/*
 * remodal-default-theme.css
 * 「残火 -NOKORIBI-」 カスタムダイアログテーマ
 * 墨色和紙スタイル（config / CG ギャラリーと統一）
 */

/* ── オーバーレイ ── */
.remodal-overlay {
    background: rgba(8, 6, 4, 0.82);
}
.remodal-overlay.remodal-is-opening,
.remodal-overlay.remodal-is-closing {
    animation-duration: 0.3s;
    animation-fill-mode: forwards;
}
.remodal-overlay.remodal-is-opening  { animation-name: remodal-overlay-opening-keyframes; }
.remodal-overlay.remodal-is-closing  { animation-name: remodal-overlay-closing-keyframes; }

/* ── ダイアログ本体 ── */
.remodal {
    box-sizing: border-box;
    width: 100%;
    max-width: 560px;
    margin-bottom: 10px;
    padding: 40px 36px 32px;
    transform: translate3d(0, 0, 0);

    /* 墨色背景 + 墨線2重枠 */
    background: #1a1710;
    color: #c8b490;
    border: 2px solid rgba(55, 44, 32, 0.95);
    box-shadow:
        inset 0 0 0 3px rgba(40, 32, 24, 0.6),
        0 8px 32px rgba(0, 0, 0, 0.7);
    border-radius: 2px;

    font-family: 'Yuji Boku', 'DroidSansFallback', serif;
    font-size: 22px;
    line-height: 1.75;
    text-align: center;
    letter-spacing: 0.05em;
}
.remodal.remodal-is-opening,
.remodal.remodal-is-closing {
    animation-duration: 0.3s;
    animation-fill-mode: forwards;
}
.remodal.remodal-is-opening { animation-name: remodal-opening-keyframes; }
.remodal.remodal-is-closing { animation-name: remodal-closing-keyframes; }

/* ── メッセージテキスト ── */
.remodal_txt {
    margin: 0 0 4px;
    color: #c8b490;
    font-size: 22px;
    line-height: 1.75;
}

/* ── 区切り線 ── */
.remodal_divider {
    width: 80%;
    margin: 20px auto 20px;
    height: 1px;
    background: linear-gradient(
        to right,
        transparent,
        rgba(90, 70, 45, 0.7) 20%,
        rgba(90, 70, 45, 0.7) 80%,
        transparent
    );
}

/* ── ボタン共通 ── */
.remodal-confirm,
.remodal-cancel {
    display: inline-block;
    min-width: 140px;
    margin: 0 10px;
    padding: 14px 0;
    cursor: pointer;
    text-align: center;
    font-family: 'Yuji Boku', serif;
    font-size: 20px;
    letter-spacing: 0.08em;
    border-radius: 2px;
    transition: background 0.18s, filter 0.18s;
    border: 2px solid rgba(55, 44, 32, 0.9);
    box-shadow: inset 0 0 0 1px rgba(40, 32, 24, 0.5);
    outline: none;
}

/* ── はい（確認）ボタン ── */
.remodal-confirm {
    background: #28221a;
    color: #c8b490;
}
.remodal-confirm:hover,
.remodal-confirm:focus {
    background: #3a3025;
    filter: brightness(1.15);
}

/* ── もどる（キャンセル）ボタン ── */
.remodal-cancel {
    background: #141008;
    color: #8a7a62;
}
.remodal-cancel:hover,
.remodal-cancel:focus {
    background: #1e1812;
    filter: brightness(1.1);
}

/* ── wrapper ── */
.remodal-wrapper {
    padding: 10px 10px 0;
}
.remodal,
.remodal-wrapper:after {
    vertical-align: middle;
}

/* ── アニメーション ── */
@keyframes remodal-opening-keyframes {
    from { transform: scale(1.04); opacity: 0; }
    to   { transform: none;        opacity: 1; filter: blur(0); }
}
@keyframes remodal-closing-keyframes {
    from { transform: scale(1);    opacity: 1; }
    to   { transform: scale(0.96); opacity: 0; filter: blur(0); }
}
@keyframes remodal-overlay-opening-keyframes {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes remodal-overlay-closing-keyframes {
    from { opacity: 1; }
    to   { opacity: 0; }
}

/* メディアクエリ */
@media only screen and (min-width: 641px) {
    .remodal { max-width: 600px; }
}