/* src/style.css */

/* 画面幅対応の基本方針(screen-design.md 0-1節、rebalanceの方針を踏襲): 狭い画面(600px未満、
   スマートフォン想定)とそれ以外(タブレット・PC)の2区分のみとする。基本はフルードレイアウト+
   flex-wrap/gridの折り返しで対応し、表だけは横スクロール(.table-responsive)に切り替える。 */

:root {
    --bg-main: #f8fafc;
    --bg-card: #ffffff;
    --border: #e2e8f0;
    --border-strong: #cbd5e1;
    --primary: #155e75;
    --primary-dark: #164e63;
    --primary-tint: #cfe6ec;
    --success: #16a34a;
    --danger: #dc2626;
    --text-main: #0f172a;
    --text-secondary: #64748b;
    /* 2026-10-22(docs/shared/decisions/0018): 答えのカード・比較の2つ目の案・前提のお知らせの色 */
    --primary-wash: #eef6f8;
    --compare-alt: #94a3b8;
    --notice-bg: #fff7ed;
    --notice-fg: #9a3412;
}

/* displayを指定したクラスの要素でも、hidden属性で隠せるようにする */
[hidden] {
    display: none !important;
}

* {
    box-sizing: border-box;
}

html {
    overflow-y: scroll;
}

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans", Meiryo, sans-serif;
    background: var(--bg-main);
    color: var(--text-main);
}

.app-container {
    /* iframe埋め込み先(要件1章①)によっては表示幅が960pxを超えるため、
       中央寄せによる無駄な左右余白でツール画面が縮小されないよう上限を拡大している
       (rebalance ADR 0008参照)。 */
    max-width: 1400px;
    margin: 0 auto;
    padding: 24px 16px 64px;
}

/* ヘッダー: 画面名+戻るボタンをスマホアプリのように左上へ固定する。戻るボタンは(1)では非表示、
   (2)(3)ではUI._currentPageに応じて表示する */
.wizard-header {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 20px;
}

/* サイト名(MEMO.md 2026/9/26コメント1-(8))。rebalance・lifeplanのヘッダーh1と同じ左上に置き、
   下線でステップ見出しと区切る。主見出しはステップ名(h1)のため、それより控えめにする */
.site-name {
    /* スマホ幅で「iDeCoシミュレータ／ー」と折り返さない(2026-10-22) */
    white-space: nowrap;
    font-size: 15px;
    font-weight: bold;
    color: var(--primary-dark);
    letter-spacing: 0.02em;
}

/* サイト名の右端に「ⓘ 計算の前提」を置く(MEMO.md 2026/9/29コメント2)。区切りの下線はこの行に付ける */
.site-name-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding-bottom: 8px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--border);
}

/* モーダルダイアログ(「計算の前提」、lifeplanのmodal-overlayと同じ見た目) */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(15, 23, 42, 0.5);
    z-index: 9998;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

.modal-card {
    max-width: 560px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    text-align: left;
}

/* 閉じるボタン(×)は、中身をスクロールしても右上に常に見えるようにする(MEMO.md 2026/9/29の追加の要望)。
   カードの先頭に置いた×を右に浮かせ(float)、スクロール領域の上端に貼り付ける(sticky)。
   見出しは×の左に回り込む。スクロールした中身が透けないよう背景を付ける */
.modal-close {
    position: sticky;
    top: 0;
    float: right;
    z-index: 1;
    width: 32px;
    height: 32px;
    margin: -8px -8px 0 8px;
    background: var(--bg-card, #fff);
    border: none;
    border-radius: 50%;
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.15);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    color: var(--text-secondary);
}

.wizard-header-top {
    display: flex;
    align-items: center;
    gap: 4px;
}

.wizard-header h1 {
    font-size: 20px;
    margin: 0;
}

.nav-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    border: none;
    background: transparent;
    color: var(--primary);
    font-size: 15px;
    font-weight: bold;
    padding: 4px 6px 4px 0;
    margin-right: 4px;
    cursor: pointer;
}

.nav-back-btn span {
    font-size: 20px;
    line-height: 1;
}

/* ウィザード全体の見取り図+現在位置(装飾のみ、クリック不可。MEMO.md 2026/9/22コメント1-(5)) */
.wizard-steps {
    display: flex;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
}

.wizard-step {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--text-secondary);
    font-size: 13px;
}

.wizard-step:not(:last-child)::after {
    content: '→';
    margin: 0 8px;
    color: var(--border-strong);
}

.wizard-step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--border);
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: bold;
}

.wizard-step-active {
    color: var(--primary-dark);
    font-weight: bold;
}

.wizard-step-active .wizard-step-num {
    background: var(--primary);
    color: #fff;
}

.card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 4px 10px rgba(15, 23, 42, 0.04);
}

.section-title {
    font-weight: bold;
    font-size: 15px;
    margin-bottom: 12px;
}

.section-title-sub {
    font-weight: bold;
    font-size: 13px;
    color: var(--text-secondary);
    margin: 16px 0 8px;
}

/* 認証・同意画面(rebalanceと同じパターン) */
.auth-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--bg-main);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

/* 認証済み・uttate.comからのアクセスでは、描画の前から認証画面を隠す(index.htmlの<head>で印を付ける)。auth.jsが出し直すときは
   style.displayで上書きする */
html.auth-skip #auth_overlay {
    display: none;
}


.auth-card {
    max-width: 420px;
    width: 100%;
    text-align: center;
}

.auth-desc {
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: 20px;
    line-height: 1.6;
}

#token_input {
    width: 100%;
    text-align: center;
    font-size: 16px;
    padding: 8px;
    margin-bottom: 16px;
    border: 1px solid var(--border);
    border-radius: 6px;
}

.consent-list {
    text-align: left;
    font-size: 14px;
    line-height: 1.8;
    color: var(--text-main);
    padding-left: 20px;
    margin-bottom: 20px;
}

/* ボタン */
.btn {
    display: inline-block;
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--text-main);
    padding: 8px 14px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
}

.btn-primary {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

.btn-primary:hover {
    background: var(--primary-dark);
}

/* disabled状態の見た目(見た目でも無効と分かるようにする) */
.btn:disabled,
.btn.is-disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
/* リンク(<a class="btn">)のボタン(lifeplanへ新しいタブで開く、MEMO.md 2026/10/16コメント1-(5)) */
a.btn {
    display: inline-block;
    text-decoration: none;
}

.btn-link {
    background: transparent;
    border: none;
    color: var(--primary);
    padding: 4px 0;
    text-decoration: underline;
}

.btn-delete {
    background: transparent;
    border: 1px solid var(--danger);
    color: var(--danger);
}

.btn-large {
    width: 100%;
    padding: 12px;
    font-weight: bold;
    font-size: 15px;
}

.button-row {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

/* 「戻る」はヘッダーにあるため、ページ最下部に残るボタンは右寄せにする */
.button-row-end {
    justify-content: flex-end;
}

/* フォーム */
.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px 20px;
}

/* 調整可能かつ比較が重要な2項目(退職年齢と公的年金受給開始年齢のペア)を、
   画面幅によらず同じ行に固定する */
.form-grid-pair {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.form-field {
    margin-bottom: 14px;
}

.form-field label {
    display: block;
    font-size: 13px;
    font-weight: bold;
    margin-bottom: 4px;
}

.field-with-unit {
    display: flex;
    align-items: center;
    gap: 6px;
}

.field-with-unit input {
    flex: 1;
    min-width: 0;
}

.unit {
    font-size: 13px;
    color: var(--text-secondary);
    white-space: nowrap;
}

.field-note {
    font-size: 12px;
    color: var(--text-secondary);
    margin: 4px 0 0;
}

.info-note {
    font-size: 13px;
    color: var(--primary-dark);
    background: var(--primary-tint);
    border-radius: 8px;
    padding: 10px 12px;
    margin-top: 8px;
    line-height: 1.6;
}

input[type="text"], input[type="number"], select {
    padding: 6px 8px;
    /* 2026-10-22: 欄の境目が見えるよう、枠線を少し濃くした(docs/shared/decisions/0018) */
    border: 1px solid var(--border-strong);
    border-radius: 6px;
    font-size: 14px;
    width: 100%;
}

/* 計算した値を出すだけの欄(企業年金から計算したiDeCoの上限、docs/ideco/decisions/0014)は、入れられる欄と見分けられるよう地の色を変える */
input[readonly] {
    background: var(--bg-main);
    color: var(--text-secondary);
}

/* 数値入力欄では日本語入力モードを自動解除する(要件4.4節、rebalance踏襲) */
input[inputmode="numeric"], input[inputmode="decimal"] {
    ime-mode: disabled;
}

.range-input {
    width: 100%;
    accent-color: var(--primary);
}

/* スライダー+editable数値入力の複合部品(iDeCo拠出額・死亡予測年齢、ADR 0010参照)。
   スライダーを伸縮領域、数値入力は幅を固定して横並びにする */
.slider-with-input {
    display: flex;
    align-items: center;
    gap: 12px;
}

.slider-with-input .range-input {
    flex: 1;
    min-width: 0;
}

.slider-with-input .slider-number {
    width: 130px;
    flex-shrink: 0;
}

@media (max-width: 600px) {
    .slider-with-input {
        flex-wrap: wrap;
    }

    .slider-with-input .slider-number {
        width: 100%;
    }

    /* 狭い画面では非アクティブなステップ名を省略し、番号(丸)と矢印だけで見取り図を保つ */
    .wizard-step:not(.wizard-step-active) .wizard-step-label {
        display: none;
    }
}

/* 比較結果のグラフ(Chart.js、ページ(3)内に埋め込み。ページ(2)は情報量を絞るため持たない、
   docs/ideco/decisions/0008・0009参照) */
#page3_compare_chart_wrap {
    position: relative;
    height: 280px;
    margin-top: 16px;
    margin-bottom: 16px;
}

.result-summary {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
    margin-top: 12px;
}

.result-summary-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.result-summary-label {
    font-size: 12px;
    color: var(--text-secondary);
}

.result-summary-value {
    font-size: 18px;
    font-weight: bold;
}

/* iDeCoによる節税額(拠出時の所得控除効果のみ、機能仕様8.2節) */
.tax-savings-box {
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px dashed var(--border);
}

.tax-savings-value {
    font-size: 14px;
    font-weight: bold;
    color: var(--success);
}

.unit-note {
    font-weight: normal;
    color: var(--text-secondary);
    font-size: 12px;
}

.net-amount-label {
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 2px;
}

.net-amount {
    font-size: 20px;
    font-weight: bold;
    color: var(--success);
    margin-bottom: 4px;
}

.checkbox-label {
    display: flex !important;
    align-items: center;
    gap: 6px;
    font-weight: normal !important;
    cursor: pointer;
}

.checkbox-label input[type="checkbox"] {
    width: auto;
    accent-color: var(--primary);
}

.net-amount-sub {
    font-size: 14px;
    font-weight: bold;
    color: var(--success);
    margin-bottom: 8px;
}

/* 住民税非課税簡易診断(任意、機能仕様8.4節) */
.resident-tax-check-toggle {
    margin: 4px 0 8px;
    /* .form-fieldの外にあるため、他のチェックボックスラベルとフォントサイズを明示的に揃える */
    font-size: 13px;
}

.resident-tax-check-fields {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 8px 26px;
}

.resident-tax-check-fields label {
    /* .form-field labelの外にあるため、他のフィールドラベルとフォントサイズ・太さを揃える */
    font-size: 13px;
    font-weight: bold;
}

.resident-tax-check-fields select {
    padding: 6px 8px;
    border: 1px solid var(--border-strong);
    border-radius: 6px;
    font-size: 13px;
}

#resident_tax_check_note {
    margin-left: 26px;
}

/* 表(全プラン比較の一覧表・出口戦略比較3列の共通スタイル) */
table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

th, td {
    padding: 8px;
    border-bottom: 1px solid var(--border);
    text-align: left;
}

.text-right {
    text-align: right;
}

/* 比較表: 起点プラン(現在の入力欄の設定値そのもの)の列を強調する(2026-09-22のフィードバック)。
   .info-noteと同じ配色(--primary-tint地に--primary-dark文字)を流用する */
th.compare-col-source, td.compare-col-source {
    background: var(--primary-tint);
    color: var(--primary-dark);
    font-weight: bold;
}

/* マイナスの金額表示(lifeplanと同じ表記)。色だけに頼らず、formatYen側で先頭に「▲」を
   付けるのと併用する(色覚特性によらず判別できるようにするため) */
.negative {
    color: var(--danger);
}

/* 比較表、開閉可能なグループ見出し(lifeplanのresult-table-group-headerをそのまま踏襲) */
.result-table-group-header {
    cursor: pointer;
    user-select: none;
    background: var(--bg-main);
}

/* ページ(2)拠出プラン比較表の区切り見出し行。
   result-table-group-headerと違い開閉トグルを持たないため、cursor: pointerは付けない */
.compare-table-section-header {
    background: var(--bg-main);
    font-weight: bold;
}

.table-responsive {
    overflow-x: auto;
}

.alert-text {
    color: var(--danger);
    font-weight: bold;
    font-size: 14px;
    margin: 0 0 16px;
}

/* 検討トピック(lifeplanのtopic-cards/topic-cardを踏襲、docs/ideco/decisions/0007参照) */
.topic-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 14px;
}

.topic-card {
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 14px;
    background: var(--bg-main);
}

.topic-card h3 {
    margin: 0 0 6px;
    font-size: 14px;
}

.topic-card p {
    margin: 0 0 10px;
    font-size: 13px;
    color: var(--text-secondary);
}

@media (max-width: 600px) {
    .app-container {
        padding: 16px 10px 48px;
    }

    .form-grid,
    .form-grid-pair {
        grid-template-columns: 1fr;
    }
}

/* 出口戦略の目的別最適化の再計算待ち(入力中、docs/shared/decisions/0007「2026-09-25改訂」)。
   表示中の結果が入力と食い違っていることを示す */
table.is-stale {
    opacity: 0.5;
    transition: opacity 0.15s;
}

/* 年齢のスライダーの上に置く、ラベルと年齢の表示・▲▼ボタンの行(MEMO.md 2026/9/29コメント1-(2)、
   src/shared/age-stepper.js。lifeplan・iDeCoと同じ見た目。以前はスライダーの右に数値入力欄を置いていた) */
.age-slider-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin: 0 0 4px;
}

.age-slider-head label {
    margin-bottom: 0;
}

.age-stepper {
    display: flex;
    align-items: center;
    gap: 6px;
}

.age-stepper-value {
    min-width: 3.5em;
    text-align: right;
    font-weight: bold;
    font-variant-numeric: tabular-nums;
}

.age-stepper-btn {
    width: 36px;
    height: 32px;
    border: 1px solid var(--primary);
    border-radius: 6px;
    background: var(--bg-card);
    color: var(--primary);
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
}

.age-stepper-btn:disabled {
    border-color: var(--border-strong);
    color: var(--text-secondary);
    cursor: not-allowed;
}

/* 「ⓘ 計算の前提」ボタンと一覧(MEMO.md 2026/9/29コメント2、docs/shared/decisions/0012)。lifeplan・ねんきんプランナーで
   同じ見た目にする(中身はsrc/shared/parameter-catalog.jsが組み立てる) */
.param-info-btn {
    flex-shrink: 0;
    background: var(--bg-card, #fff);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 4px 12px;
    font-size: 13px;
    color: var(--primary);
    cursor: pointer;
    white-space: nowrap;
}

.param-info-btn:hover {
    border-color: var(--primary);
}

/* 制度改正への対応の表示(MEMO.md 2026/10/9コメント2-(2)、docs/shared/decisions/0012「2026-10-09改訂」)。「ⓘ 計算の前提」の
   左に置き、押すとその一覧を開く(中身・文言はshared/parameter-catalog.js) */
.law-change-badge {
    flex-shrink: 1;
    margin-left: auto;
    align-self: center;
    background: none;
    border: none;
    padding: 4px;
    font-size: 12px;
    color: var(--text-secondary);
    cursor: pointer;
    text-align: right;
    text-decoration: underline dotted;
}

.law-change-badge:hover {
    color: var(--primary);
}

.site-name-row .law-change-badge + .param-info-btn,
.is-embedded .site-name-row .law-change-badge + .param-info-btn {
    margin-left: 4px;
}

/* スマホ幅では、サイト名と並ぶよう2行に折り返す */
@media (max-width: 480px) {
    .law-change-badge {
        max-width: 8em;
        font-size: 11px;
        line-height: 1.3;
    }
}

/* 「ⓘ 計算の前提」の先頭の「反映している主な制度改正」(MEMO.md 2026/10/9コメント2-(2)) */
.param-law-change-list {
    list-style: none;
    margin: 4px 0 8px;
    padding: 0;
}

.param-law-change-list li {
    display: grid;
    grid-template-columns: 7em 1fr;
    gap: 2px 8px;
    padding: 6px 0;
    border-bottom: 1px solid var(--border);
    font-size: 13px;
}

.param-law-change-date {
    grid-row: span 2;
    font-weight: bold;
    color: var(--primary);
}

.param-law-change-label {
    font-weight: bold;
}

.param-law-change-detail {
    font-size: 12px;
    color: var(--text-secondary);
}

.param-intro {
    font-size: 13px;
    color: var(--text-secondary);
    margin: 0 0 12px;
}

.param-category {
    border: 1px solid var(--border);
    border-radius: 8px;
    margin-bottom: 8px;
    padding: 0 12px;
}

.param-category summary {
    cursor: pointer;
    font-weight: bold;
    padding: 10px 0;
}

.param-item {
    border-top: 1px solid var(--border);
    padding: 10px 0;
}

.param-label {
    font-weight: bold;
    font-size: 14px;
}

.param-kind {
    display: inline-block;
    margin-left: 8px;
    padding: 1px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: normal;
    vertical-align: middle;
    background: var(--primary-tint);
    color: var(--primary-dark);
}

.param-kind-simplified {
    background: #fef3c7;
    color: #92400e;
}

.param-kind-assumption {
    background: #ede9fe;
    color: #5b21b6;
}

.param-value {
    margin-top: 4px;
    font-size: 14px;
}

.param-note,
.param-sources,
.param-keys {
    margin: 4px 0 0;
    font-size: 12px;
    color: var(--text-secondary);
}

.param-sources a {
    color: var(--primary);
    word-break: break-all;
}

.param-table {
    border-collapse: collapse;
    font-size: 13px;
    margin-top: 4px;
}

.param-table th,
.param-table td {
    border: 1px solid var(--border);
    padding: 2px 8px;
}

.param-table th {
    white-space: nowrap;
}

.param-table td.text-right {
    text-align: right;
    white-space: nowrap;
}

/* スマホ(iOS)で入力欄に触れたときの自動拡大を防ぐ(MEMO.md 2026/9/29コメント1-(5)、docs/shared/decisions/0011)。
   iOSは文字が16px未満の入力欄にフォーカスすると画面を拡大し、入力後もその倍率のまま残すため、画面が
   左右にはみ出したように見える。表の中の欄・プラン名等の個別の指定(13〜14px、IDやクラスの指定を含む)
   より必ず優先させるため!importantを付ける。PCの見た目は変えない */
@media (max-width: 768px) {
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
    select,
    textarea {
        font-size: 16px !important;
    }
}

/* uttate.comに埋め込まれているときは、iframeの外にページの見出しがあるため、サイト名を出さない(MEMO.md 2026/9/30コメント1-(12))。
   「ⓘ 計算の前提」は右端に残し、各ステップの見出しは出す。直接開いたときはサイト名を出す */
.is-embedded .site-name {
    display: none;
}

.is-embedded .site-name-row .param-info-btn {
    margin-left: auto;
}

/* ラベルに添える、源泉徴収票の欄の位置などの補足(lifeplanと同じ、MEMO.md 2026/10/4コメント1-(10)) */
.label-hint {
    display: block;
    font-size: 12px;
    font-weight: normal;
    color: var(--text-secondary);
}

/* ライフプランシミュレーターへの導線のカード(MEMO.md 2026/10/9コメント2-(1)、docs/shared/decisions/0015)。
   その人の結果の数字で「引き継ぐと分かること」を示す。ねんきんプランナーと同じ見た目にする。左端の太い線は、見出しを「…確かめる」の
   呼びかけにした後は不要になったため外した(MEMO.md 2026/10/18コメント1-(4)) */

.lifeplan-cta-facts {
    margin: 0 0 12px;
    padding-left: 20px;
    line-height: 1.7;
}

.lifeplan-cta-carry {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 4px 12px;
    margin: 0 0 12px;
    padding: 10px 12px;
    background: var(--bg-main);
    border-radius: 8px;
    font-size: 13px;
}

.lifeplan-cta-carry dt {
    font-weight: bold;
    white-space: nowrap;
}

.lifeplan-cta-carry dd {
    margin: 0;
}

/* ボタン文言がサイト名「ライフプランシミュレーター」を含み長いため、狭い画面で単語の途中で折り返さない(見出しはindex.htmlの<wbr>、「〜で、」の直後で折り返す) */
.lifeplan-cta .btn {
    word-break: keep-all;
    overflow-wrap: anywhere;
}

@media (max-width: 600px) {
    .lifeplan-cta-carry {
        grid-template-columns: 1fr;
    }
}

/* 補足のアイコンとポップアップ(MEMO.md 2026/10/15コメント2-(1)、lifeplan ADR 0056、src/shared/help-popover.js)。
   「解説」(i)は落ち着いた色、「入力のヒント」(?)は緑で見分ける。押しやすいよう見た目より広く押せる */
.help-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    margin: 0 0 0 4px;
    padding: 0;
    border: 1.5px solid currentColor;
    border-radius: 50%;
    background: var(--bg-card);
    font: bold 12px/1 Georgia, "Times New Roman", serif;
    vertical-align: text-bottom;
    cursor: pointer;
    position: relative;
}
.help-btn::after {
    content: "";
    position: absolute;
    inset: -8px;
}
.help-btn-info {
    color: var(--primary);
    font-style: italic;
}
.help-btn-hint {
    color: var(--success);
    font-family: inherit;
}
.help-btn-info::before {
    content: "i";
}
.help-btn-hint::before {
    content: "?";
}
.help-btn[aria-expanded="true"] {
    color: var(--bg-card);
    background: var(--primary);
    border-color: var(--primary);
}
.help-btn-hint[aria-expanded="true"] {
    background: var(--success);
    border-color: var(--success);
}
.help-popover {
    position: absolute;
    z-index: 2000;
    width: max-content;
    max-width: min(380px, calc(100vw - 16px));
    background: var(--bg-card);
    border: 1px solid var(--border-strong);
    border-top: 3px solid var(--primary);
    border-radius: 8px;
    box-shadow: 0 6px 20px rgba(15, 23, 42, 0.18);
    padding: 8px 12px 10px;
    font-size: 13px;
    font-weight: normal;
    line-height: 1.6;
    color: var(--text-main);
    text-align: left;
}
.help-popover[data-kind="hint"] {
    border-top-color: var(--success);
}
.help-popover-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 4px;
}
.help-popover-title {
    font-size: 12px;
    font-weight: bold;
    color: var(--primary);
}
.help-popover[data-kind="hint"] .help-popover-title {
    color: var(--success);
}
.help-popover-close {
    border: none;
    background: none;
    font-size: 18px;
    line-height: 1;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0 2px;
}
.help-popover-body p,
.help-popover-body ul {
    margin: 0 0 6px;
}
.help-popover-body ul {
    padding-left: 18px;
}
.help-popover-body > :last-child {
    margin-bottom: 0;
}
/* 見出し(.section-title-sub等)の横に置くアイコンは、見出しの文字の大きさに合わせない */
.section-title-sub .help-btn,
.section-title .help-btn,
summary .help-btn,
th .help-btn {
    font-size: 12px;
    font-weight: bold;
}

/* ===== ステップ3「受け取り方」(2026-10-22の作り直し、docs/shared/decisions/0018) =====
   答え(手取りが最も多い受け取り方と金額)を一番上に大きく出し、比較は万円の5行、条件の入力は閉じて下にまとめる。
   文字の大きさは、答えの金額・見出し・本文・補足の4段階に絞る */

.answer-card {
    border-color: var(--primary);
    display: grid;
    gap: 16px;
}

.answer-card > p {
    margin: 0;
}

.answer-body {
    display: grid;
    gap: 12px;
}

.answer-label {
    font-size: 13px;
    font-weight: bold;
    color: var(--primary-dark);
    letter-spacing: 0.04em;
}

.answer-how {
    margin: 2px 0 0;
    font-size: 20px;
    font-weight: bold;
    text-wrap: balance;
}

.answer-figure {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px 12px;
}

.answer-caption {
    font-size: 14px;
    color: var(--text-secondary);
}

.answer-amount {
    font-size: 40px;
    font-weight: 800;
    line-height: 1.1;
    color: var(--primary-dark);
    font-variant-numeric: tabular-nums;
}

.answer-amount small {
    font-size: 20px;
    font-weight: bold;
    margin-left: 2px;
}

.answer-delta {
    background: var(--primary-wash);
    color: var(--primary-dark);
    font-size: 13px;
    font-weight: bold;
    padding: 2px 10px;
    border-radius: 999px;
}

.answer-basis {
    margin: 0;
    font-size: 14px;
    line-height: 1.7;
    max-width: 62ch;
}

.answer-body.is-stale {
    opacity: 0.5;
    transition: opacity 0.15s;
}

/* 前提のお知らせ(赤字の警告ではなく、入力を促す1行) */
.soft-notice {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    background: var(--notice-bg);
    color: var(--notice-fg);
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 13px;
    line-height: 1.6;
}

.soft-notice .btn-link {
    color: inherit;
    font-weight: bold;
    font-size: inherit;
    padding: 0;
}

.btn-answer {
    font-weight: bold;
    font-size: 15px;
    padding: 10px 18px;
}

.btn-outline {
    background: var(--bg-card);
    border-color: var(--primary);
    color: var(--primary);
    font-weight: bold;
}

.btn-outline:hover {
    background: var(--primary-wash);
}

.btn-small {
    font-size: 13px;
    padding: 6px 10px;
}

/* 表の欄の単位(MEMO.md 2026/10/22コメント1-(2)。以前は表の右上に「単位: 万円」と1度だけ書いていたが、
   3〜4桁の数字だけでは一瞬何か分からないため、欄ごとに付ける。数字より少し小さくして桁を読みやすくする) */
.cell-unit {
    font-size: 0.85em;
    font-weight: normal;
    margin-left: 1px;
}

/* 答えのカードのボタンの上に、押すと何が開くかを書く(MEMO.md 2026/10/22コメント1-(1)) */
.answer-next {
    margin: 12px 0 0;
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.6;
}

/* 比較(万円)。数字の列は右寄せで桁をそろえ、生涯の手取りの行だけを太くする */
.summary-table td {
    font-variant-numeric: tabular-nums;
}

.summary-table th {
    font-size: 13px;
    color: var(--text-secondary);
    vertical-align: bottom;
}

.summary-table td:not(:first-child),
.summary-table th:not(:first-child) {
    width: 36%;
}

.summary-table .cell-sub {
    display: block;
    font-size: 12px;
    color: var(--text-secondary);
}

.summary-table .summary-total td {
    font-weight: 800;
    font-size: 16px;
    border-bottom: 2px solid var(--border-strong);
}

.summary-table .summary-total td:nth-child(2) {
    color: var(--primary-dark);
}

.summary-table .summary-actions td {
    border-bottom: none;
    padding-top: 12px;
}

.summary-table.is-stale {
    opacity: 0.5;
    transition: opacity 0.15s;
}

/* 比較表の見出しの色の印(グラフの線と同じ色) */
.plan-key {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 2px;
    margin-right: 6px;
    background: var(--primary);
}

.plan-key-alt {
    background: var(--compare-alt);
}

/* 内訳(以前の円単位の比較表)・「条件を変える」の開閉 */
.more-details {
    margin-top: 12px;
    border-top: 1px solid var(--border);
}

.more-details > summary {
    cursor: pointer;
    padding-top: 12px;
    color: var(--primary);
    font-weight: bold;
    font-size: 13px;
}

.more-details[open] > summary {
    margin-bottom: 8px;
}

.card.conditions {
    padding: 0;
}

.conditions > summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 20px;
}

.conditions > summary::-webkit-details-marker {
    display: none;
}

.conditions-head {
    display: grid;
    gap: 2px;
}

.conditions-head .section-title {
    margin-bottom: 0;
}

.conditions-now {
    font-size: 13px;
    color: var(--text-secondary);
}

.conditions-toggle {
    color: var(--primary);
    font-weight: bold;
    font-size: 13px;
    white-space: nowrap;
}

.conditions[open] .when-closed,
.conditions:not([open]) .when-open {
    display: none;
}

.conditions-body {
    border-top: 1px solid var(--border);
    padding: 16px 20px 20px;
}

/* lifeplanへの案内は「次に」の控えめなカード(答えのカードのボタンも同じく引き継ぐため) */
.lifeplan-cta {
    background: var(--primary-wash);
    border-color: var(--primary-tint);
    box-shadow: none;
}

@media (max-width: 600px) {
    .answer-amount {
        font-size: 34px;
    }

    .answer-how {
        font-size: 18px;
    }

    .btn-answer {
        width: 100%;
        text-align: center;
    }

    .summary-table th,
    .summary-table td {
        padding: 8px 4px;
    }

    .summary-table .summary-total td {
        font-size: 15px;
    }

    .conditions > summary {
        padding: 14px 16px;
    }

    .conditions-body {
        padding: 14px 16px 16px;
    }
}

/* 見出しは「手取りが／最も多い」のように、言葉の切れ目(<wbr>)でだけ折り返す */
.summary-table th {
    word-break: keep-all;
}

.summary-table td:first-child {
    white-space: nowrap;
}

/* ===== ステップ2「拠出プラン」の答えのカード(2026-10-22、docs/shared/decisions/0018) =====
   掛金のスライダーを答えの金額のすぐ下に置き、動かすとすぐ上の金額が変わるようにする */
.answer-controls {
    border-top: 1px solid var(--border);
    padding-top: 16px;
}

.answer-controls .form-field:last-child {
    margin-bottom: 0;
}

/* ===== 入力の部品の見た目をそろえる(2026-10-22、docs/shared/decisions/0018) =====
   選択欄はブラウザの既定の灰色をやめて入力欄と同じ白に、金額・年齢などの短い欄は幅いっぱいに伸ばさない */
select {
    background-color: var(--bg-card);
    color: var(--text-main);
    min-height: 32px;
}

.field-with-unit,
.form-field > select,
.form-grid select {
    max-width: 320px;
}

/* 金額・年数のセルは途中で折り返さない(「iDeCo 2／万円」とならないように)。ボタンの行は除く */
.summary-table tr:not(.summary-actions) td:not(:first-child) {
    white-space: nowrap;
}

/* スマホ幅では、表の中の「⬆️ 入力欄に反映」を「⬆️/入力欄に/反映」と言葉の切れ目(<wbr>)でだけ折り返す
   (3列が並ぶと欄が狭く、そのままでは「入力/欄に反/映」と崩れるため) */
@media (max-width: 600px) {
    .summary-actions .btn-small {
        padding: 4px 6px;
        font-size: 12px;
        word-break: keep-all;
    }

    .summary-actions .btn-icon {
        display: block;
    }
}

/* 戻ってきた人への案内(前回から変わったこと、docs/shared/decisions/0020)。見た目は.soft-notice */
.revisit-card {
    display: block;
    position: relative;
    margin: 12px 0;
    padding-right: 36px;
}

.revisit-card .hint-close {
    position: absolute;
    top: 4px;
    right: 6px;
    padding: 0 6px;
    border: none;
    background: transparent;
    color: inherit;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}

.revisit-card .revisit-title {
    margin: 0 0 4px;
    font-weight: bold;
}

.revisit-card .revisit-list {
    margin: 0 0 4px;
    padding-left: 1.4em;
}

.revisit-card .revisit-affects {
    font-weight: bold;
}

.revisit-card .revisit-more {
    margin: 4px 0 0;
}

.revisit-card button.btn-link {
    padding: 0;
    border: none;
    background: none;
    color: inherit;
    font: inherit;
    text-decoration: underline;
    cursor: pointer;
}