/* ============================================================
    カラーパレット（中途解約シミュレーターと共通）
============================================================ */
:root {
    --primary-color : #2563eb;
    --primary-light : #dbeafe;
    --bg-color      : #f8fafc;
    --card-bg       : #ffffff;
    --text-main     : #0f172a;
    --text-sub      : #475569;
    --accent-red    : #e11d48;
    --border-color  : #cbd5e1;
    --section-bg    : #f1f5f9;
}

/* ============================================================
    ベースレイアウト
============================================================ */


/* 左右2カラムレイアウト（幅800px以上で横並び） */
.main-layout {
    display       : flex;
    flex-direction: column;
    gap           : 15px;
}
@media (min-width: 800px) {
    .main-layout { flex-direction: row; align-items: flex-start; }
    .panel-left  { flex: 1.1; }
    .panel-right { flex: 1; position: sticky; top: 20px; }
}

/* ============================================================
    カード
============================================================ */
.card {
    background   : var(--card-bg);
    border-radius: 12px;
    padding      : 24px;
    box-shadow   : 0 4px 6px -1px rgba(0,0,0,0.1);
    border       : 1px solid var(--border-color);
    box-sizing   : border-box;
    width        : 100%;
}

/* 注意事項ボックス */
.notice-box {
    background   : #fffbeb;
    border       : 1px solid #fcd34d;
    border-radius: 8px;
    padding      : 12px 16px;
    margin-bottom: 16px;
    font-size    : 0.8rem;
    color        : #78350f;
    line-height  : 1.7;
}
.notice-box ul {
    margin : 0;
    padding: 0 0 0 1.2em;
}

/* ============================================================
    入力フォーム
============================================================ */
.input-grid {
    display              : grid;
    grid-template-columns: 1fr 1fr;
    gap                  : 16px;
}
@media (max-width: 500px) {
    .input-grid { grid-template-columns: 1fr; }
}
/* 金利取得ボタンのある行は3列 */
.input-group-rate {
    display    : flex;
    gap        : 8px;
    align-items: flex-end;
}
.input-group-rate .input-wrap { flex: 1; }

label {
    display      : block;
    font-size    : 0.8rem;
    font-weight  : bold;
    color        : var(--text-sub);
    margin-bottom: 6px;
}

input, select {
    width           : 100%;
    padding         : 12px;
    font-size       : 1rem;
    border          : 1px solid var(--border-color);
    border-radius   : 8px;
    box-sizing      : border-box;
    background-color: #fff;
}
input:disabled, select:disabled {
    background-color: #f1f5f9;
    cursor          : not-allowed;
    color           : #94a3b8;
}
.input-note {
    font-size  : 0.7rem;
    color      : var(--accent-red);
    margin-top : 4px;
    min-height : 1.2em;
    line-height: 1.4;
}
input.number-input {
    text-align : right;
    font-family: monospace;
}

/* ラジオボタン（利息計算方法） */
.radio-group {
    display: flex;
    gap    : 12px;
}
.radio-group label {
    display    : flex;
    align-items: center;
    gap        : 6px;
    font-weight: normal;
    font-size  : 1rem;
    color      : var(--text-main);
    cursor     : pointer;
}
.radio-group input[type="radio"] {
    width : auto;
    padding: 0;
}

/* ボタン */
.btn-primary {
    width           : 100%;
    background-color: var(--primary-color);
    color           : white;
    border          : none;
    padding         : 16px;
    font-size       : 1.1rem;
    font-weight     : bold;
    border-radius   : 8px;
    cursor          : pointer;
    margin-top      : 20px;
    transition      : background-color 0.2s ease;
}
.btn-primary:hover { background-color: #1d4ed8; }

.btn-secondary {
    background-color: var(--section-bg);
    color           : var(--primary-color);
    border          : 1px solid var(--primary-color);
    padding         : 10px;
    font-size       : 0.85rem;
    font-weight     : bold;
    border-radius   : 8px;
    cursor          : pointer;
    transition      : background-color 0.2s ease;
    white-space     : nowrap;
}
.btn-secondary:hover { background-color: var(--primary-light); }

.btn-clear {
    width           : 100%;
    background-color: var(--section-bg);
    color           : var(--text-sub);
    border          : 1px solid var(--border-color);
    padding         : 16px;
    font-size       : 1rem;
    border-radius   : 8px;
    cursor          : pointer;
    margin-top      : 10px;
    transition      : background-color 0.2s ease;
}
.btn-clear:hover { background-color: #e2e8f0; }

/* ============================================================
    結果パネル
============================================================ */
.result-title {
    font-weight   : bold;
    margin-bottom : 15px;
    padding-bottom: 10px;
    border-bottom : 2px solid var(--primary-color);
    color         : var(--primary-color);
}
.result-row {
    display        : flex;
    justify-content: space-between;
    align-items    : center;
    padding        : 10px 0;
    border-bottom  : 1px solid #f1f5f9;
    min-height     : 40px;
}
.result-label {
    font-size   : 0.85rem;
    color       : var(--text-sub);
    flex        : 1;
    padding-right: 12px;
}
.result-value-group {
    display        : flex;
    align-items    : baseline;
    gap            : 4px;
    justify-content: flex-end;
}
.result-value {
    font-weight: bold;
    font-family: monospace;
    font-size  : 1.1rem;
}
.result-unit {
    font-size : 0.8rem;
    color     : var(--text-main);
    width     : 2.5rem;
    text-align: right;
}

/* お受取合計の強調ボックス */
.total-box {
    background   : var(--primary-light);
    padding      : 20px;
    border-radius: 12px;
    text-align   : center;
    margin-bottom: 20px;
    border       : 1px solid var(--primary-color);
}
.total-amount {
    display    : block;
    font-size  : 1.7rem;
    font-weight: bold;
    margin-top : 8px;
    color      : var(--primary-color);
}

/* サブセクション */
.result-sub-section {
    background   : var(--section-bg);
    padding      : 10px 15px;
    border-radius: 8px;
    margin       : 10px 0;
    border       : 1px solid var(--border-color);
}
.sub-section-title {
    font-size     : 0.75rem;
    font-weight   : bold;
    color         : var(--text-sub);
    margin-bottom : 5px;
    border-bottom : 1px solid var(--border-color);
    padding-bottom: 3px;
}

/* 入力内容確認セクション */
.confirm-sub-section {
    background   : #f0fdf4;
    border       : 1px solid #86efac;
    border-radius: 8px;
    padding      : 10px 15px;
    margin       : 10px 0;
}
.confirm-sub-section .sub-section-title {
    border-bottom-color: #86efac;
    color              : #166534;
}

/*ここまで　満期利息シミュレーション*/
/*ここから　解約利息シミュレーション*/
/* ============================================================
   カラーパレット（ここを変えると全体の色が変わります）
============================================================ */
:root {
    --primary-color : #2563eb;   /* メインカラー（青） */
    --primary-light : #dbeafe;   /* メインカラーの薄い版 */
    --bg-color      : #f8fafc;   /* ページ背景 */
    --card-bg       : #ffffff;   /* カード背景 */
    --text-main     : #0f172a;   /* 本文テキスト */
    --text-sub      : #475569;   /* 補助テキスト */
    --accent-red    : #e11d48;   /* 警告・マイナス表示 */
    --border-color  : #cbd5e1;   /* 罫線 */
    --section-bg    : #f1f5f9;   /* セクション背景 */
}

/* ============================================================
   ベースレイアウト
============================================================ */


/* 左右2カラムレイアウト（幅800px以上で横並び） */
.main-layout {
    display       : flex;
    flex-direction: column;
    gap           : 15px;
}
@media (min-width: 800px) {
    .main-layout { flex-direction: row; align-items: flex-start; }
    .panel-left  { flex: 1.1; }
    .panel-right { flex: 1; position: sticky; top: 20px; }
}

/* ============================================================
   カード（白い角丸ボックス）
============================================================ */
.card {
    background   : var(--card-bg);
    border-radius: 12px;
    padding      : 24px;
    box-shadow   : 0 4px 6px -1px rgba(0,0,0,0.1);
    border       : 1px solid var(--border-color);
    box-sizing   : border-box;
    width        : 100%;
}

/* ============================================================
   入力フォーム
============================================================ */
/* 2列グリッド（幅500px以下で1列） */
.input-grid {
    display              : grid;
    grid-template-columns: 1fr 1fr;
    gap                  : 16px;
}
@media (max-width: 500px) {
    .input-grid { grid-template-columns: 1fr; }

    /* モバイルでは span 2 の指定を無効にする（1列しかないため） */
    .input-group[style*="grid-column"],
    .input-group:has(.wareki-input-group) {
        grid-column: span 1 !important;
    }
}

label {
    display      : block;
    font-size    : 0.8rem;
    font-weight  : bold;
    color        : var(--text-sub);
    margin-bottom: 6px;
}

/* テキスト入力・セレクトの共通スタイル（ラジオボタンは除外） */
input:not([type="radio"]), select {
    width           : 100%;
    padding         : 12px;
    font-size       : 1rem;
    border          : 1px solid var(--border-color);
    border-radius   : 8px;
    box-sizing      : border-box;
    background-color: #fff;
}
/* 無効化されたフィールド */
input:not([type="radio"]):disabled, select:disabled {
    background-color: #f1f5f9;
    cursor          : not-allowed;
    color           : #94a3b8;
}

/* 和暦入力（元号セレクト＋年月日）※共通ルールより後に記述して幅指定を確実に上書き */
.wareki-input-group {
    display    : flex;
    align-items: center;
    gap        : 4px;
}
.wareki-input-group select { flex: 1; padding: 10px 2px; }
.wareki-input-group input  { flex: 1; text-align: center; padding: 10px 2px; }
.wareki-unit { font-size: 0.8rem; color: var(--text-sub); }
/* 和暦日付の入力グループは2カラム幅で表示（幅不足で数字が隠れるのを防ぐ） */
.input-group:has(.wareki-input-group) {
    grid-column: span 2;
}
/* 注記テキスト（赤字の補足） */
.input-note {
    font-size  : 0.7rem;
    color      : var(--accent-red);
    margin-top : 4px;
    min-height : 1.2em;
    line-height: 1.4;
}
/* 金額入力（右寄せ等幅フォント） */
input.number-input {
    text-align : right;
    font-family: monospace;
}

/* ラジオボタン（利息タイプ） */
.radio-group {
    display       : flex;
    flex-direction: row;
    align-items   : center;
    gap           : 20px;
    padding       : 10px 0;
}
.radio-group label {
    display       : flex !important; /* label { display: block } の上書きを防ぐ */
    flex-direction: row;
    align-items   : center;
    gap           : 6px;
    font-weight   : normal;
    font-size     : 1rem;
    color         : var(--text-main);
    cursor        : pointer;
    margin        : 0;
}
.radio-group label:has(input:disabled) {
    color : #94a3b8;
    cursor: not-allowed;
}

/* 計算ボタン */
button {
    width           : 100%;
    background-color: var(--primary-color);
    color           : white;
    border          : none;
    padding         : 16px;
    font-size       : 1.1rem;
    font-weight     : bold;
    border-radius   : 8px;
    cursor          : pointer;
    margin-top      : 20px;
    transition      : background-color 0.2s;
}
button:hover { background-color: #1d4ed8; }

/* ============================================================
   結果パネル
============================================================ */
.result-title {
    font-weight   : bold;
    margin-bottom : 15px;
    padding-bottom: 10px;
    border-bottom : 2px solid var(--primary-color);
    color         : var(--primary-color);
}

/* 結果の1行（ラベル＋数値） */
.result-row {
    display        : flex;
    justify-content: space-between;
    align-items    : center;
    padding        : 10px 0;
    border-bottom  : 1px solid #f1f5f9;
    min-height     : 40px;
}
.result-label {
    font-size   : 0.85rem;
    color       : var(--text-sub);
    flex        : 1;
    padding-right: 12px;
}
.result-value-group {
    display        : flex;
    align-items    : baseline;
    gap            : 4px;
    justify-content: flex-end;
}
.result-value {
    font-weight: bold;
    font-family: monospace;
    font-size  : 1.1rem;
}
.result-unit {
    font-size : 0.8rem;
    color     : var(--text-main);
    width     : 2.5rem;
    text-align: right;
}

/* お受取合計の強調ボックス */
.total-box {
    background   : var(--primary-light);
    padding      : 20px;
    border-radius: 12px;
    text-align   : center;
    margin-bottom: 20px;
    border       : 1px solid var(--primary-color);
}
.total-amount {
    display    : block;
    font-size  : 1.7rem;
    font-weight: bold;
    margin-top : 8px;
    color      : var(--primary-color);
}

/* サブセクション（灰色背景のまとまり） */
.result-sub-section {
    background   : var(--section-bg);
    padding      : 10px 15px;
    border-radius: 8px;
    margin       : 10px 0;
    border       : 1px solid var(--border-color);
}
.sub-section-title {
    font-size     : 0.75rem;
    font-weight   : bold;
    color         : var(--text-sub);
    margin-bottom : 5px;
    border-bottom : 1px solid var(--border-color);
    padding-bottom: 3px;
}