/* 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・docs/lifeplan/decisions/0061): 答えのカード・前提のお知らせの色(idecoと同じ) */
    --primary-wash: #eef6f8;
    --notice-bg: #fff7ed;
    --notice-fg: #9a3412;
}

* {
    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;
}

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

/* 見出しの右端に「ⓘ 計算の前提」を置く(MEMO.md 2026/9/29コメント2) */
.app-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}

/* スマホ幅では、ボタンと並んでもサイト名が折り返さないよう少し小さくする */
@media (max-width: 480px) {
    header h1 {
        font-size: 19px;
    }
}

.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;
}

/* 大見出しの開閉(MEMO.md 2026/9/30コメント1-(3))。見出し全体がボタンで、畳んでいるときは右に要約を出す */
.section-toggle {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 8px;
    width: 100%;
    padding: 0;
    margin: 0;
    background: none;
    border: none;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.section-toggle .section-title {
    margin-bottom: 0;
}

.section-toggle-icon::before {
    content: '▾';
    display: inline-block;
    width: 1em;
    font-size: 18px;
    line-height: 1;
    text-align: center;
    color: var(--text-secondary);
    transition: transform 0.15s;
}

.is-collapsed .section-toggle-icon::before {
    transform: rotate(-90deg);
}

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

[data-section]:not(.is-collapsed) .section-summary {
    display: none;
}

/* 検討していないときの相続税の見込み(lifeplan ADR 0077) */
.inheritance-outlook {
    margin: 0 0 12px;
    font-size: 14px;
    color: var(--text-secondary);
}

.inheritance-outlook p {
    margin: 2px 0;
}

.section-body {
    margin-top: 12px;
}

.living-cost-total {
    font-size: 14px;
    margin: 12px 0 0;
}

.section-title-sub {
    font-weight: bold;
    font-size: 13px;
    margin: 16px 0 8px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}

/* 小見出し(「現状」「拠出プラン」「出口戦略」等)は、入力欄のラベルと同じ文字(13px・太字・黒)にそろえ、上の細い区切り線で
   「ここから次のまとまり」と見分ける(MEMO.md 2026/9/30コメント1-(11)。以前は灰色の文字だけで見分けており、薄いラベルに見えた)。
   まとまりの先頭(タブのすぐ下等)では線を引かない */
.section-title-sub:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

/* 折りたたみの見出しになっている小見出し(相続税の「ステップ2: 誰がいくら払うか」)も、同じ役割の「ステップ1: 相続税の総額」と
   同じ文字にする(コメント1-(11)。以前は折りたたみの既定の12px・青緑だった) */
.detail-toggle.as-section-title-sub > summary {
    font-size: 13px;
    color: inherit;
    margin-top: 16px;
    padding: 12px 0 6px;
    border-top: 1px solid var(--border);
}

/* 認証・同意画面(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のdisplayがhidden属性(ブラウザ既定のdisplay: none)に勝って、隠したボタンが出てしまうのを防ぐ */
.btn[hidden] {
    display: none;
}

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

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

.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;
}

/* プランタブ(rebalanceの口座タブと同じ挙動: 折り返さず横スクロール) */
.account-tabs-container {
    margin-bottom: 20px;
}

.tabs-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.account-tabs-bar {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    margin-bottom: 8px;
}

.account-tabs-scroll {
    flex: 1;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
}

#pattern_tabs_row {
    flex-wrap: nowrap;
    margin-bottom: 0;
}

#pattern_tabs_row .tab-btn,
#pattern_tabs_row .btn-link {
    flex-shrink: 0;
}

.tab-btn {
    position: relative;
    padding: 8px 24px 8px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-card);
    cursor: pointer;
    font-size: 14px;
}

.tab-btn.active {
    border-color: var(--primary);
    background: var(--primary-tint);
    color: var(--primary);
    font-weight: bold;
}

/* プランタブの一体感(rebalanceの口座タブと同じ演出、2026-09-07のフィードバックでrebalanceに
   合わせた)。選択中タブに下線(border-bottom)を持たせ、その色を自身の背景色と同じにして
   見えなくすることで、タブの箱がその線を突き破って下の作業領域と地続きになっているように見せる。 */
#pattern_tabs_row .tab-btn,
#compare_tab_slot .tab-btn-compare {
    border-bottom: 1px solid var(--border-strong);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

#pattern_tabs_row .tab-btn.active,
#compare_tab_slot .tab-btn-compare.active {
    border-bottom-color: var(--primary-tint);
}

/* タブの下部角丸を「外側に開く」形にする(タブ本体の裾がページ地色<--bg-main>へ滑らかに
   繋がって見えるようにする、rebalanceと同じ手法) */
#pattern_tabs_row .tab-btn.active::before,
#pattern_tabs_row .tab-btn.active::after,
#compare_tab_slot .tab-btn-compare.active::before,
#compare_tab_slot .tab-btn-compare.active::after {
    content: "";
    position: absolute;
    bottom: 0;
    width: 8px;
    height: 8px;
}

#pattern_tabs_row .tab-btn.active::before,
#compare_tab_slot .tab-btn-compare.active::before {
    left: -8px;
    background: radial-gradient(circle at top left, transparent 8px, var(--primary-tint) 8.5px);
}

#pattern_tabs_row .tab-btn.active::after,
#compare_tab_slot .tab-btn-compare.active::after {
    right: -8px;
    background: radial-gradient(circle at top right, transparent 8px, var(--primary-tint) 8.5px);
}

.tab-delete {
    position: absolute;
    top: 2px;
    right: 6px;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 12px;
}

.tab-delete:hover {
    color: var(--danger);
}

/* 「全プラン比較」タブ: 個別プランタブとは挙動が違うことを示す(rebalanceのダッシュボードタブと同じ) */
.tab-btn-compare {
    flex-shrink: 0;
    width: 130px;
    padding: 6px 8px;
    white-space: normal;
    text-align: center;
    font-size: 12px;
    line-height: 1.3;
    background: #f1f5f9;
    border-color: #cbd5e1;
    color: var(--text-secondary);
}

.tab-btn-compare.active {
    border-color: var(--primary);
    background: var(--primary-tint);
    color: var(--primary);
    font-weight: bold;
}

/* プラン名変更ボタンの段(rebalanceの「🏷️ 口座プロパティ」と同じ配置、2026-09-07のフィードバック) */
.account-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed var(--border);
}

.account-properties-panel {
    margin-top: 8px;
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.account-name-group {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: bold;
}

#pattern_name_input {
    padding: 4px 8px;
    font-size: 14px;
    font-weight: bold;
    min-width: 160px;
}

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

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

/* 源泉徴収票・住民税決定通知書から転記する欄(MEMO.md 2026/10/4コメント1-(10))。源泉徴収票の5項目がなるべく1行に収まるよう
   幅を狭くし、ラベルが折り返しても入力欄の高さがそろうよう下端にそろえる */
.form-grid-slip {
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    align-items: end;
}

/* 欄が1つだけでも横幅いっぱいに伸ばさない並び(給与収入タブ、lifeplan ADR 0064)。auto-fillで空の列を残す */
.form-grid-compact {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

/* まとまり(.section-title-sub)の中の小さな見出し。区切り線は引かない(給与収入タブの「① 役職定年」等、lifeplan ADR 0064) */
.subgroup-title {
    font-weight: bold;
    font-size: 13px;
    margin: 4px 0 8px;
}

/* 給与収入タブの「これからの働き方」の各段階(①役職定年・②定年退職・③勤めをやめる年齢、lifeplan ADR 0064)。左の線で段階を分ける */
.work-stage {
    border-left: 3px solid var(--border-strong);
    padding: 2px 0 2px 12px;
    margin: 0 0 14px;
}

.work-stage-note {
    display: block;
    font-weight: normal;
    font-size: 12px;
    color: var(--text-secondary);
    margin-top: 2px;
}

/* 失業給付の補足。すぐ下の「勤め先の健康保険を抜けた後」の見出しと間を空ける(lifeplan ADR 0064) */
.field-note.work-stage-after-note {
    margin-bottom: 16px;
}

/* 入力欄の代わりに、決まっている値を文字で出す(失業給付の「高年齢求職者給付金(一時金)」) */
.field-static {
    margin: 6px 0 0;
}

/* 住民税決定通知書から写す住民税は、源泉徴収票の項目と行を分ける */
.form-field-row-start {
    grid-column-start: 1;
}

/* ラベルに添える、源泉徴収票の欄の位置などの補足 */
.label-hint {
    display: block;
    font-size: 12px;
    font-weight: normal;
    color: var(--text-secondary);
}

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

/* 老齢基礎年金・老齢厚生年金で受給状況が食い違う場合(ADR 0012「2026-09-24改訂」)に、
   各金額欄のラベル横へ「実額」「見込額」を示すチップ */
.status-chip {
    display: inline-block;
    font-size: 11px;
    font-weight: normal;
    padding: 1px 7px;
    border-radius: 999px;
    margin-left: 6px;
    vertical-align: middle;
}

.status-chip-actual {
    background: var(--primary-tint);
    color: var(--primary-dark);
}

.status-chip-estimate {
    background: var(--bg-main);
    color: var(--text-secondary);
    border: 1px solid var(--border);
}

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

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

/* 項目が1つしか無いform-grid内の入力欄(現在の年齢・退職年齢・その他の被扶養者数等)が
   全幅に伸びて単位表示が右端に離れて見づらくなるのを防ぐ(2026-09-09のフィードバック)。
   form-grid自体ではなくfield-with-unitの幅だけを抑えることで、隣接するfield-noteの
   折り返しには影響させない */
.field-with-unit-narrow {
    max-width: 220px;
}

.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;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 14px;
    width: 100%;
}

/* 編集不可の欄であることを明確にする(iDeCoの一時金/年金比率が0%・100%のときのグレーアウト等、
   2026-09-13のフィードバック、rebalance style.css踏襲)。opacityだけでなく背景色・文字色も
   変えることで、単に薄いだけでなく「触れない」ことが視覚的にはっきり伝わるようにする */
input[type="text"]:disabled, input[type="number"]:disabled, select:disabled {
    background: #f1f5f9;
    color: var(--text-secondary);
    border-color: var(--border);
    cursor: not-allowed;
}

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

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

/* 資産残高推移グラフ・全プラン比較グラフ(ADR 0004、Chart.js)。高さは2026-09-14の
   フィードバックで280pxから560px(約2倍)に拡大した */
#asset_chart_canvas_wrap, #compare_chart_wrap {
    position: relative;
    height: 560px;
    margin-top: 16px;
}

/* 資産推移グラフの枠はサブタブ+キャンバスの枠(#asset_chart_canvas_wrap)を包むだけで、高さは固定しない
   (高さを固定するとキャンバスが枠からはみ出し、下の「明細を見る」に重なるため、ADR 0032) */
#asset_chart_wrap {
    margin-top: 16px;
}

/* #asset_chart_wrapは下に住民税非課税簡易診断のセグメントバーが隙間なく続くため、
   下マージンを持たせない(2026-09-08のフィードバック、「グラフの真下に挿入」)。
   #compare_chart_wrapは各カードの最後の要素のため、従来通り下マージンを残す */
#compare_chart_wrap {
    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;
}

/* 出口戦略の結果マトリックス(現在の配分による1件分、機能仕様8.3節、
   2026-09-07のフィードバックで一時金/年金の単純表示から3行×3列のマトリックスに置き換えた) */
.result-matrix-label {
    font-size: 13px;
    font-weight: bold;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

.result-matrix-wrap {
    overflow-x: auto;
}

.result-matrix {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.result-matrix th,
.result-matrix td {
    padding: 6px 8px;
    text-align: right;
    white-space: nowrap;
}

.result-matrix thead th {
    color: var(--text-secondary);
    font-weight: normal;
    border-bottom: 1px solid var(--border);
}

.result-matrix tbody th {
    text-align: left;
    font-weight: normal;
    color: var(--text-secondary);
}

.result-matrix tbody td {
    font-weight: bold;
    color: var(--success);
}

.result-matrix-total th,
.result-matrix-total td {
    border-top: 1px solid var(--border);
    font-weight: bold;
}

.result-matrix-total th {
    color: var(--text-main);
}

/* iDeCoによる節税額(拠出時の所得控除効果のみ、機能仕様8.2節、2026-09-07のフィードバックで追加) */
.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-size: 13px;
    font-weight: normal !important;
    cursor: pointer;
}

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

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

/* 住民税非課税簡易診断(任意、機能仕様8.4節、2026-09-06のフィードバックで追加) */
.resident-tax-check-toggle {
    margin: 4px 0 8px;
}

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

.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;
}

/* グラフの真下に隙間なく挿入する(2026-09-08のフィードバック) */
#resident_tax_bar_wrap {
    margin-top: 2px;
}

/* 上の資産残高推移グラフ(Chart.js)のx軸ピクセル位置に合わせて、各セグメントをJSから
   position:absoluteで配置する(2026-09-08のフィードバック。グラフとの軸ずれで、特に単色一色の
   場合に何を示しているか分かりにくいという指摘への対応) */
.resident-tax-bar {
    position: relative;
    height: 34px;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid var(--border);
}

.resident-tax-bar-segment {
    position: absolute;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: bold;
    white-space: nowrap;
    overflow: hidden;
}

.resident-tax-bar-segment.taxable {
    background: #fde8e8;
    color: #9f1c1c;
}

.resident-tax-bar-segment.exempt {
    background: #dcf5e3;
    color: #166534;
}

.breakdown-list {
    text-align: left;
    font-size: 12px;
    color: var(--text-secondary);
    margin: 8px 0 0;
}

.breakdown-list dt {
    float: left;
    clear: left;
    margin-right: 6px;
}

.breakdown-list dd {
    margin: 0 0 4px;
    text-align: right;
}

details summary {
    cursor: pointer;
    color: var(--primary);
    font-size: 12px;
}

/* 表(全プラン比較の一覧表・出口戦略比較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-13のフィードバック)。色だけに頼らず、formatYen側で先頭に
   「▲」を付けるのと併用する(色覚特性によらず判別できるようにするため) */
.negative {
    color: var(--danger);
}

/* 横スクロール可能な表であることを示す視覚的な手がかり(2026-09-14のフィードバック、
   rebalance<src/rebalance/style.css>の実装をそのまま踏襲)。iOS等はスクロールバーを既定で
   隠すため、スクロールバー以外にも「まだ続きがある」ことを伝える必要がある。
   陰影(.scroll-shadow)の位置基準(containing block)は、実際にスクロールする要素
   (.table-scroll-area、ui.jsのinitScrollShadowsが動的に生成する)とは別の、スクロールしない
   外側の要素(.table-responsive)にする。同じ要素にoverflow-x:autoとposition:relativeを
   両方持たせてその中に陰影を置くと、CSSの仕様上、陰影自身もその要素のスクロール量の影響を
   受けてしまい、スクロールにつれて陰影が横に動いてしまう(rebalanceでの実機確認で判明)。 */
.table-responsive {
    position: relative;
}

/* 起動の後に描く表(引退後の健康保険の比べる表など、ui.jsがinnerHTMLで毎回作り直す)は、initScrollShadowsが
   .table-scroll-areaで包まないため、外側の要素そのものを横スクロールにする(2026-10-22。以前は横スクロールが無く、
   スマホ幅で国保と任意継続を比べる表がページ全体を横に広げていた) */
.table-responsive:not(:has(> .table-scroll-area)) {
    overflow-x: auto;
}

.table-scroll-area {
    overflow-x: auto;
}

.scroll-shadow {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 24px;
    pointer-events: none; /* 陰影の下にある削除ボタン等の操作を妨げないようにする */
    opacity: 0;
    transition: opacity 0.15s;
    z-index: 1;
}

.scroll-shadow.is-visible {
    opacity: 1;
}

.scroll-shadow-left {
    left: 0;
    background: linear-gradient(to right, rgba(15, 23, 42, 0.18), rgba(15, 23, 42, 0));
}

.scroll-shadow-right {
    right: 0;
    background: linear-gradient(to left, rgba(15, 23, 42, 0.18), rgba(15, 23, 42, 0));
}

/* 全プラン比較表の、開閉可能なグループ見出し(2026-09-11のフィードバックで明細表に追加し、明細表の廃止<ADR 0032>
   後も全プラン比較表で使う) */
.result-table-group-header {
    cursor: pointer;
    user-select: none;
    background: var(--bg-main);
}

/* シミュレーション結果の「明細を見る」(MEMO.md 2026/9/28コメント1-(2)、ADR 0032)。ねんきんプランナー②と同じ
   ネイティブの<details>で、選んだ1年分を縦の一覧(行=項目、列=人物・合計)で表示する */
.detail-toggle {
    margin-top: 16px;
}

.detail-toggle > summary {
    cursor: pointer;
    font-weight: bold;
    color: var(--primary);
    padding: 6px 0;
}

/* 年齢のスライダーの上に置く、ラベルと年齢の表示・▲▼ボタンの行(MEMO.md 2026/9/29コメント1-(2)、
   src/shared/age-stepper.js。ねんきんプランナー・iDeCoと同じ見た目) */
.age-slider-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin: 8px 0 4px;
}

/* 年齢のスライダーの見出しも、ほかの入力欄のラベルと同じ文字にする(MEMO.md 2026/9/30コメント1-(11)。以前は16px・細字だった) */
.age-slider-head label {
    font-size: 13px;
    font-weight: bold;
    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, #fff);
    color: var(--primary);
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
}

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

/* スライダーの左右の端を、グラフの描画範囲(Chart.jsのchartArea)に合わせる。paddingはJS側
   (ChartAgeCursor.alignSlider)で描画後に動的に設定する */
.range-input-align {
    box-sizing: border-box;
    margin-bottom: 12px;
}

/* ブラウザ既定の左右マージン(Chromeは2px)があると、グラフの描画範囲とずれるため消す */
.range-input-align .range-input {
    display: block;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
}

.result-detail-table th,
.result-detail-table td {
    white-space: nowrap;
}

.result-detail-table td {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.result-detail-table tbody th {
    font-weight: normal;
    text-align: left;
}

/* 小計の行(クリックで内訳を開閉)と内訳の行 */
.result-detail-table .group-row {
    cursor: pointer;
    user-select: none;
    background: var(--bg-main);
}

.result-detail-table .group-row th {
    font-weight: bold;
}

.result-detail-table .row-indent {
    padding-left: 1.5em;
}

/* 内訳のさらに内訳(公的年金の「うち加給年金」) */
.result-detail-table .row-indent-2 {
    padding-left: 3em;
    color: var(--text-secondary);
}

.result-detail-table .total-col {
    font-weight: bold;
}

/* 資産タブで積立資金の出し手に「世帯主からの贈与」を選んだ場合の注意書き(MEMO.md 2026/9/26コメント2-(2)
   「贈与税計算の対象になることを一言目立つように」、ADR 0007「2026-09-26改訂」)。.form-grid内に置くため
   全列にまたがらせる */
.gift-tax-warning {
    grid-column: 1 / -1;
    background: #fffbeb;
    border: 1px solid #f59e0b;
    border-left-width: 4px;
    border-radius: 8px;
    padding: 10px 12px;
    color: #78350f;
    font-size: 13px;
    line-height: 1.6;
}

.gift-tax-warning strong {
    font-size: 14px;
}

.gift-tax-warning p {
    margin: 4px 0 8px;
}

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

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

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

/* ===========================================================================
   lifeplan Stage 2 固有のスタイル(docs/lifeplan/design/screen-design.md)
   =========================================================================== */

/* 3階層目のタブ(収入タブ<公的年金/給与収入/非課税所得>、人物タブの中にネストする)を、
   外側の人物タブと区別しやすいよう、背景色と枠線で囲んだパネルにする(2026-09-09の
   フィードバック。マージンだけでは「別の独立したタブ列」に見え、包含関係が伝わりにくかった) */
.sub-panel {
    background: var(--bg-main);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 16px;
    margin-bottom: 16px;
}

.sub-panel .sub-tabs-bar {
    margin-bottom: 12px;
}

/* セクション内サブタブ(収入の人物タブ・支出のタブ・資産の資産クラスタブ、tab-btnより一段小さい) */
.sub-tabs-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.sub-tabs-scroll {
    flex: 1;
    min-width: 0;
    overflow-x: auto;
    display: flex;
    gap: 8px;
}

/* タブの段の右端の、タブ全体に対する操作(資産タブの「🔗 資産リバランスシミュレーターと連携」)。サイト名で書くと長いため
   (MEMO.md 2026/10/2コメント2-(2))、スマホ幅では段の半分までにして折り返し、タブの場所を残す */
.tabs-bar-action {
    flex-shrink: 0;
    margin-left: auto;
    max-width: 50%;
    white-space: normal;
    text-align: right;
    line-height: 1.3;
}

/* 資産リバランスシミュレーターとの連携の状態(ボタンの1行目、MEMO.md 2026/10/8コメント1-(2)①) */
.rebalance-link-status {
    /* inline-blockにすると、ボタンの下線が状態の行に引き継がれない */
    display: inline-block;
    width: 100%;
    font-size: 11px;
    color: var(--text-secondary);
    text-decoration: none;
}

.rebalance-link-status.is-linked {
    color: var(--primary);
}

.rebalance-linked-mark {
    margin-left: 2px;
    font-size: 0.85em;
}

/* プランタブ(#pattern_tabs_row .tab-btn)・rebalanceの口座タブ/subtab-btnと同じ「一体感」の演出
   (2026-09-08のフィードバックで、単なる角丸矩形からideco/rebalanceと同じ見た目に統一) */
.sub-tab-btn {
    position: relative;
    flex-shrink: 0;
    padding: 6px 20px 6px 10px;
    border: 1px solid var(--border);
    border-bottom: 1px solid var(--border-strong);
    border-radius: 8px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    background: var(--bg-card);
    cursor: pointer;
    font-size: 13px;
    white-space: nowrap;
}

.sub-tab-btn.active {
    border-color: var(--primary);
    background: var(--primary-tint);
    color: var(--primary);
    font-weight: bold;
    border-bottom-color: var(--primary-tint);
}

.sub-tab-btn.active::before,
.sub-tab-btn.active::after {
    content: "";
    position: absolute;
    bottom: 0;
    width: 8px;
    height: 8px;
}

.sub-tab-btn.active::before {
    left: -8px;
    background: radial-gradient(circle at top left, transparent 8px, var(--primary-tint) 8.5px);
}

.sub-tab-btn.active::after {
    right: -8px;
    background: radial-gradient(circle at top right, transparent 8px, var(--primary-tint) 8.5px);
}

.sub-tab-add {
    flex-shrink: 0;
    padding: 6px 10px;
    border: 1px dashed var(--border-strong);
    border-radius: 8px;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 13px;
}

.section-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

/* 動的リスト(不定期支出・生前贈与)の一覧テーブル */
.dynamic-list-table th,
.dynamic-list-table td {
    font-size: 13px;
}

.dynamic-list-table input,
.dynamic-list-table select {
    font-size: 13px;
    padding: 4px 6px;
}

/* 臨時収入(ADR 0060)は列が多いため、スマホ幅では列を潰さず横スクロールにする(.table-responsive) */
.windfall-table {
    min-width: 940px;
}

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

.windfall-table input[data-windfall-field="name"] {
    min-width: 12em;
}

/* 「区分ごとの設定」の列を、ごみ箱の列の手前まで広げる。課税の区分は名前が切れないよう幅を保つ */
.windfall-table td:nth-child(5) {
    width: 36%;
}

.windfall-table select[data-windfall-field="taxType"] {
    min-width: 12em;
}

.windfall-table input[data-windfall-field="amount"] {
    min-width: 8em;
}

.windfall-detail-note {
    font-size: 12px;
    color: var(--text-secondary);
}

/* 臨時収入の「区分ごとの設定」(不動産の売却は4つの欄)。欄の名前を上に小さく出し、横に並べて折り返す */
.windfall-details {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;
}

.windfall-detail {
    display: flex;
    flex-direction: column;
    /* 列の幅いっぱいまで広げる(譲渡費用の「空欄なら仲介手数料の目安」が入り切るように) */
    flex: 1 1 10em;
    font-size: 12px;
    color: var(--text-secondary);
}

/* 臨時収入の金額の欄の下の、何の額を入れるかの注記 */
.windfall-amount-note {
    display: block;
    margin-top: 2px;
    white-space: nowrap;
    font-size: 11px;
    color: var(--text-secondary);
}

.dynamic-list-add {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
}

.dynamic-list-add select {
    width: auto;
}

.row-delete-btn {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 14px;
}

.row-delete-btn:hover {
    color: var(--danger);
}

/* 資産タブ追加時の種別・名義人選択ダイアログ(簡易版、screen-design.md 3章) */
.asset-add-form {
    display: flex;
    align-items: flex-end;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 16px;
    padding: 12px;
    border: 1px dashed var(--border-strong);
    border-radius: 8px;
}

.asset-add-form select {
    width: auto;
}

/* 相続税検討画面(ADR 0007) */
#inheritance_stop_row {
    justify-content: flex-end;
}

#inheritance_stop_row[hidden] {
    display: none;
}

.inheritance-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 16px;
}

.inheritance-spouse-status {
    margin: 6px 0 0;
    font-size: 14px;
}

.inheritance-real-estate {
    margin-bottom: 12px;
}

.inheritance-result-box {
    display: grid;
    grid-template-columns: 1fr auto;
    row-gap: 10px;
    column-gap: 16px;
    font-size: 14px;
    padding: 16px;
    background: var(--bg-main);
    border-radius: 8px;
}

.inheritance-result-box .label {
    color: var(--text-secondary);
}

/* 開閉できる行(相続税ステップ1の「課税価格の合計」、MEMO.md 2026/9/29コメント1-(3))と、その内訳の行 */
.inheritance-result-box .toggle-label {
    cursor: pointer;
    user-select: none;
    color: var(--text-main);
    font-weight: bold;
}

.inheritance-result-box .row-indent {
    padding-left: 1.5em;
}

.inheritance-result-box .value {
    font-weight: bold;
    text-align: right;
}

.inheritance-result-box .value.total {
    font-size: 18px;
    color: var(--primary-dark);
}

/* 「全プラン比較」タブ(2026-09-08のフィードバックで、プランタブと同じ段に配置。
   ideco/rebalanceのtab-btn-compare/tab-btn-dashboardと同じ考え方) */
.tab-btn-compare {
    flex-shrink: 0;
    width: 130px;
    padding: 6px 8px;
    white-space: normal;
    text-align: center;
    font-size: 12px;
    line-height: 1.3;
    background: #f1f5f9;
    border-color: #cbd5e1;
    color: var(--text-secondary);
}

.tab-btn-compare.active {
    border-color: var(--primary);
    background: var(--primary-tint);
    color: var(--primary);
    font-weight: bold;
}

/* タブ列末尾の追加ボタン(人物・資産、2026-09-08のフィードバックでタブ列に統合) */
.tab-add-btn {
    flex-shrink: 0;
}

/* モーダルダイアログ(資産タブ追加、rebalanceのasset_class_modal等と同じパターン) */
.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: 480px;
    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);
}

.modal-actions {
    justify-content: flex-end;
    margin-top: 16px;
}

/* 公的年金受給開始年齢ウィザード(ADR 0027)。2列比較表を収めるため、他のモーダルより少し広げる */
.modal-card-wide {
    max-width: 560px;
}

/* 列の多い比較表を持つモーダル(生前贈与ウィザード、ADR 0033)。狭い画面では従来どおり表を横スクロールする */
.modal-card-xwide {
    max-width: 760px;
}

/* 残高を記録(資産名・入力欄・前回の値・資産リバランスの今の金額の4列)。資産リバランスシミュレーターの「スクショから入力」と
   同じ幅にそろえる(MEMO.md 2026/10/9の追加の指摘) */
.modal-card-balance {
    max-width: 600px;
}

.pension-wizard-compare-table {
    font-size: 13px;
}

.pension-wizard-compare-table thead th {
    background: var(--bg-main);
    white-space: nowrap;
    text-align: right;
}

.pension-wizard-compare-table tbody th {
    font-weight: normal;
    /* 狭い画面で1文字ずつ折り返されないよう最小幅を確保する(収まらない分は.table-responsiveで横スクロール) */
    min-width: 11em;
}

/* 「ウィザードで最適化する」ボタン(受給開始年齢の欄の下)。直前の注記と詰まって見えないよう余白を空ける */
.pension-wizard-button-row {
    margin-top: 8px;
}

.pension-wizard-compare-table td {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.pension-wizard-compare-table .row-indent {
    padding-left: 1.5em;
}

.pension-wizard-compare-table .row-reference {
    color: var(--text-secondary);
}

/* 遺産分割ウィザード(ADR 0030第3段階): 合計が最小の行と、今の設定の行を目立たせる */
.estate-wizard-table tbody tr.best-row {
    background: var(--primary-tint);
    font-weight: bold;
}

.estate-wizard-table tbody th {
    min-width: 8em;
}

/* 引退後の健康保険の比べる表(ADR 0051)。行の名前の列の見出しは左寄せ、表の上に少し余白を空ける */
.retirement-health-insurance-compare {
    margin-top: 8px;
}

.retirement-health-insurance-compare thead th:first-child {
    text-align: left;
}

.btn-link:disabled {
    color: var(--text-secondary);
    cursor: not-allowed;
    text-decoration: none;
}

/* 比較表の各列の下の「この案で更新する」(MEMO.md 2026/9/25コメント1-(2))。罫線を消してボタン行に見せる */
.pension-wizard-compare-table .apply-row th,
.pension-wizard-compare-table .apply-row td {
    border-bottom: none;
    padding-top: 12px;
}

.btn-secondary {
    border-color: var(--primary);
    color: var(--primary);
}

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

/* 押せないボタンは見た目でも分かるようにする(ideco・nenkinの.btn:disabledと同じ。押せないボタンにマウスを載せると
   :hoverの色が付き、押せるように見えていた、MEMO.md 2026/10/8の報告) */
.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn:disabled:hover {
    background: var(--bg-card);
}

/* 生年月日(年・月・日のドロップダウン、MEMO.md 2026/9/29コメント3-(1)) */
.birth-date-fields {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 6px;
}

.birth-date-fields select {
    width: auto;
}

/* 月・日は折り返しても離れないよう1まとまりにする(スマホ幅で「日」だけが次の行に落ちないように) */
.birth-date-month-day {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

/* ツールバーのメニュー(「📦 バックアップ」)と、実績・基準を開いているときの帯(ADR 0035・0038)。 */
/* 「📦 バックアップ」はツールバーの右端に置き(MEMO.md 2026/10/2コメント2-(3))、メニューはツールバーの右端を起点に開く
   (メニューの幅はツールバーの幅以下のため、スマホ幅でも画面の外にはみ出さない) */
.account-toolbar {
    position: relative;
}

.record-menu {
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 50;
    width: min(420px, calc(100vw - 32px));
    background: var(--bg-card);
    border: 1px solid var(--border-strong);
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.15);
    padding: 12px;
    /* 記録が増えても画面に収まるよう、長くなったらメニューの中でスクロールする */
    max-height: 70vh;
    overflow-y: auto;
}

.record-menu-note {
    font-size: 12px;
    color: var(--text-secondary);
    margin: 0 0 8px;
}

.record-menu-item {
    display: block;
    width: 100%;
    text-align: left;
    padding: 8px;
    margin-bottom: 4px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg-card);
    cursor: pointer;
}

/* バックアップ(ADR 0038) */
.backup-warning {
    font-size: 13px;
    color: #92400e;
    background: #fef3c7;
    border-radius: 6px;
    padding: 6px 8px;
    margin: 6px 0;
}

#btn_backup_menu.has-warning {
    color: #b45309;
    border-color: #d97706;
    font-weight: bold;
}

.account-toolbar .toolbar-end {
    margin-left: auto;
}

.backup-summary {
    margin: 0 0 8px;
    padding-left: 20px;
}

.record-menu-delete {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
}

.record-menu-delete:hover {
    color: var(--danger);
}

.record-banner {
    border: 2px solid var(--primary);
    background: var(--primary-tint);
    border-radius: 12px;
    padding: 12px 16px;
    margin-bottom: 20px;
    font-size: 14px;
}

.record-banner p {
    margin: 6px 0 0;
}

.record-banner-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.record-banner-date {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
}

.record-banner-date input {
    width: auto;
}

/* 基準は固定のため、タブの追加・削除も隠す(入力欄は押せなくする、ui.jsの_applyRecordLocks) */
#dashboard_workspace.is-record-baseline .input-card .tab-delete,
#dashboard_workspace.is-record-baseline .input-card .sub-tab-add {
    display: none;
}

/* 計画と実績(ADR 0044、比較はADR 0036) */
#compare_tab_slot {
    display: flex;
    gap: 6px;
}

/* 「📋 計画と実績」のタブは、全プラン比較より短い文言のため幅を詰める(スマホ幅でプランタブの場所を残すため) */
.tab-btn-compare.tab-btn-records {
    width: auto;
    min-width: 96px;
    padding: 6px 10px;
}

.record-intro ol {
    padding-left: 20px;
    margin: 8px 0 12px;
}

.record-intro li {
    margin-bottom: 6px;
}

.record-start,
.record-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 8px 0;
}

.record-start select {
    width: auto;
}

.record-status-plan,
.record-status-latest {
    margin: 4px 0;
}

.positive {
    color: #15803d;
}

.record-ops {
    white-space: nowrap;
    text-align: right;
}

.record-memo {
    font-size: 12px;
    color: var(--text-secondary);
    white-space: normal;
}

.record-baseline-row td {
    color: var(--text-secondary);
}

.record-past {
    margin-top: 12px;
}

.record-past summary {
    cursor: pointer;
    font-size: 13px;
    color: var(--text-secondary);
    padding: 4px 0;
}

.record-past-chain {
    font-size: 13px;
    padding: 4px 0;
    border-top: 1px solid var(--border);
}

.record-past-chain ul {
    margin: 4px 0;
    padding-left: 20px;
}

.balance-record-table {
    width: 100%;
    margin: 8px 0;
    border-collapse: collapse;
}

.balance-record-table thead th {
    font-size: 12px;
    font-weight: bold;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border);
    padding: 4px 8px;
    white-space: nowrap;
}

.balance-record-table tbody th {
    text-align: left;
    font-weight: normal;
    padding: 6px 8px 6px 0;
    white-space: nowrap;
}

.balance-record-table tbody td {
    padding: 6px 8px;
    vertical-align: middle;
}

.balance-record-table tbody tr + tr th,
.balance-record-table tbody tr + tr td {
    border-top: 1px solid var(--border);
}

.balance-record-table input {
    width: 140px;
    text-align: right;
}

/* 前回の値・資産リバランスシミュレーターの今の金額の列。金額は押すと入力欄に入るボタン(MEMO.md 2026/10/9の追加の指摘) */
.balance-record-ref {
    white-space: nowrap;
}

.balance-ref-amount {
    padding: 2px 6px;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    color: var(--primary);
    font: inherit;
    cursor: pointer;
    text-decoration: underline dotted;
}

.balance-ref-amount:hover {
    border-color: var(--primary);
    background: var(--primary-tint);
}

.balance-ref-date {
    font-size: 11px;
    color: var(--text-secondary);
}

.balance-ref-none {
    color: var(--text-secondary);
}

.balance-record-fill {
    gap: 4px 16px;
    margin-bottom: 12px;
}

/* 狭い画面では、資産ごとに資産名・入力欄・参考の値を縦に並べる(列の見出しは各欄の上に小さく出す) */
@media (max-width: 600px) {
    .balance-record-table thead {
        display: none;
    }

    .balance-record-table tr,
    .balance-record-table th,
    .balance-record-table td {
        display: block;
    }

    .balance-record-table tbody tr {
        padding: 6px 0;
        border-bottom: 1px solid var(--border);
    }

    .balance-record-table tbody th,
    .balance-record-table tbody td {
        border: none;
        padding: 2px 0;
        text-align: left;
    }

    .balance-record-table tbody tr + tr th,
    .balance-record-table tbody tr + tr td {
        border-top: none;
    }

    .balance-record-ref::before {
        content: attr(data-mobile-label);
        margin-right: 6px;
        font-size: 11px;
        color: var(--text-secondary);
    }
}

#record_compare_chart_wrap {
    position: relative;
    height: 400px;
    margin: 16px 0;
}

.record-compare-row {
    cursor: pointer;
}

#record_compare_table th,
#record_compare_table td {
    white-space: nowrap;
}

.record-compare-row:hover td {
    background: var(--bg-main);
}

/* rebalanceとの連携(ADR 0039) */
.rebalance-hint {
    border: 1px solid var(--border-strong);
    background: var(--bg-card);
    border-radius: 12px;
    padding: 12px 16px;
    margin-bottom: 20px;
    font-size: 14px;
}

/* 案内を閉じる「×」(ダイアログの閉じるボタンと同じく右上に置く) */
.rebalance-hint .hint-close {
    float: right;
    margin: -4px -6px 4px 8px;
    padding: 0 6px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}

.rebalance-hint .hint-close:hover {
    color: var(--text-primary, #0f172a);
}

.rebalance-import-mode {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 8px 0;
}

.rebalance-import-table select {
    width: auto;
}

/* 資産の種類と名義人は同じセルに並べ、狭い画面では上下に折り返す(表が横にはみ出さないように) */
.rebalance-import-selects {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

/* 「ⓘ 計算の前提」ボタンと一覧(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);
}

.app-header .law-change-badge + .param-info-btn,
.is-embedded .app-header .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 .app-header h1 {
    display: none;
}

.is-embedded .app-header .param-info-btn {
    margin-left: auto;
}

/* 世帯の設定(お住まいの級地、ADR 0042)。人物ごとの欄と区別するため、上に区切り線を入れる */
.household-setting {
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}

/* 入力の状況(MEMO.md 2026/10/4コメント1-(8)、ADR 0047)。資金不足の案内と同じ形で、注意ではなく案内のため青系にする */
.input-status-note {
    border: 1px solid #93c5fd;
    background: #eff6ff;
    border-radius: 8px;
    padding: 10px 14px;
    margin-bottom: 12px;
    font-size: 14px;
}

.input-status-note p {
    margin: 0 0 6px;
}

.input-status-note .hint-close {
    float: right;
    margin: -4px -6px 4px 8px;
    padding: 0 6px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}

.input-status-list {
    margin: 0;
    padding-left: 4px;
    list-style: none;
}

.input-status-list li {
    margin-bottom: 4px;
}

.input-status-done {
    color: var(--text-secondary);
}

/* 結果の答えのカード(2026-10-22、docs/shared/decisions/0018・docs/lifeplan/decisions/0061)。資産が何歳まで尽きないかを1文と
   大きな金額で答える(idecoの答えのカードと同じ見た目)。文字の大きさは、答えの金額・見出し・本文・補足の4段階に絞る */
.answer-card {
    border: 1.5px solid var(--primary);
    border-radius: 10px;
    background: var(--bg-card);
    padding: 16px 20px;
    margin-top: 12px;
    display: grid;
    gap: 14px;
}

.answer-card-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

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

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

#share_link_qr svg {
    display: block;
    margin: 8px 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: 12px;
}

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

/* 現金・預金が足りなくなるときは、金額と札をお知らせの色にする(赤字の警告にはしない) */
.answer-card.is-short {
    border-color: var(--notice-fg);
}

.answer-card.is-short .answer-amount,
.answer-card.is-short .answer-label {
    color: var(--notice-fg);
}

.answer-card.is-short .answer-delta {
    background: var(--notice-bg);
    color: var(--notice-fg);
}

/* displayを指定した答えのカードの部品も、hidden属性で隠せるようにする */
.answer-card [hidden] {
    display: none !important;
}

/* 前提のお知らせ(赤字の警告ではなく、入力を促す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;
    margin: 0;
    font-size: 13px;
    line-height: 1.6;
}

/* display: flex が hidden 属性より優先され、隠したはずの空の帯が出ていた(退職金の勤続年数の見積もりの注記、lifeplan ADR 0062) */
.soft-notice[hidden] {
    display: none;
}

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

/* 資金不足の考えられる原因(MEMO.md 2026/10/2コメント2-(6))。答えのカードの中に、原因ごとにその入力欄を開くボタンを並べる */
.shortage-note {
    border-top: 1px solid var(--border);
    padding-top: 12px;
    font-size: 14px;
}

.shortage-note p {
    margin: 0 0 6px;
}

.shortage-note .shortage-note-title {
    font-weight: bold;
    font-size: 13px;
}

.shortage-causes {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 8px;
}

.shortage-causes li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    line-height: 1.6;
}

.shortage-causes li > span {
    flex: 1 1 280px;
    min-width: 0;
}

.btn.btn-compact {
    font-size: 13px;
    padding: 5px 10px;
}

/* 引退直後に暴落が来たら(ADR 0055)。押してすぐ切り替わる3つのボタン */
.scenario-head {
    font-weight: bold;
    font-size: 13px;
    margin-bottom: 6px;
}

/* 全プラン比較のグラフの見出しと切り替え(lifeplan ADR 0073) */
.compare-chart-head,
.compare-table-head {
    margin-top: 16px;
}
.compare-chart-head select {
    max-width: 560px;
}
/* 全プラン比較の起きる年は「各プランの世帯主が引退する年(…)」と長いため、文字の幅に合わせる */
#compare_return_scenario .scenario-controls > .form-grid {
    flex-basis: auto;
}

.scenario-select {
    width: 100%;
    max-width: 560px;
}

/* うまくいかなかったら？の選択欄と「このシナリオの前提 ⓘ」、起きる年などの操作を1〜2行にまとめ、説明はⓘに入れて、シナリオを
   切り替えてもグラフの位置が動かないようにする(MEMO.md 2026/11/4コメント1-(1)) */
.scenario-select-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 12px;
    margin-bottom: 8px;
}
.scenario-select-row .scenario-select {
    flex: 1 1 320px;
}
.scenario-premise {
    display: inline-flex;
    align-items: center;
    font-size: 13px;
    white-space: nowrap;
}
.scenario-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 8px 16px;
    margin-bottom: 4px;
}
.scenario-controls > .form-grid {
    flex: 0 1 240px;
    margin: 0;
    grid-template-columns: 1fr;
}
.scenario-controls > .checkbox-label {
    min-height: 38px;
}
/* 「株式の割合」の枠。ボタンの下に重ねて出し、後ろのグラフを押し下げない */
.stock-ratio-wrap {
    position: relative;
    min-height: 38px;
    display: flex;
    align-items: center;
}
.stock-ratio-panel {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1500;
    width: min(320px, calc(100vw - 16px));
    margin-top: 4px;
    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;
}
.stock-ratio-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: bold;
    font-size: 13px;
    margin-bottom: 6px;
}
.stock-ratio-panel .form-field {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
}
.stock-ratio-panel .form-field select {
    width: 96px;
}

/* 条件を変える(死亡予測年齢・性別)。閉じていても今の条件を1行で出す */
details.conditions {
    border: 1px solid var(--border);
    border-radius: 10px;
    margin-top: 16px;
    background: var(--bg-card);
}

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

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

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

.conditions-title {
    font-weight: bold;
    font-size: 14px;
}

.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: 4px 16px 16px;
}

@media (max-width: 600px) {
    .answer-card {
        padding: 14px 16px;
    }

    .answer-amount {
        font-size: 34px;
    }

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

/* 生活費の表(MEMO.md 2026/10/2コメント2-(11))。スマホ幅でも欄が潰れないよう幅を確保し、はみ出す分は横にスクロールする */
.living-cost-table th,
.living-cost-table td {
    white-space: nowrap;
    vertical-align: middle;
}

.living-cost-table input[type="text"] {
    width: 110px;
    min-width: 110px;
    text-align: right;
}

.living-cost-table select {
    width: auto;
    min-width: 76px;
}

/* 引き継ぎ・取り込みで足した・変えたタブの印(MEMO.md 2026/10/4コメント1-(1))。数回だけ点滅させて目を引き、印はタブを押すまで残す */
.sub-tab-btn.handoff-mark {
    animation: handoff-pulse 1s ease-in-out 4;
}

.handoff-badge {
    display: inline-block;
    margin-left: 6px;
    padding: 0 6px;
    border-radius: 999px;
    background: #f59e0b;
    color: #fff;
    font-size: 11px;
    font-weight: bold;
    line-height: 18px;
    vertical-align: middle;
    /* 印を押してもタブを押したことになるよう、印自体はクリックを受けない */
    pointer-events: none;
}

@keyframes handoff-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0); }
    50% { box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.45); }
}

/* 欄をまとめて押せなくするためだけのfieldset(見た目は持たせない)。障害年金等を一生涯受け取るときの受給開始年齢(MEMO.md 2026/10/11コメント1-(1)) */
.plain-fieldset {
    border: 0;
    padding: 0;
    margin: 0;
    min-width: 0;
}

/* 一方が亡くなった後の生活費の欄・結果カードの死亡予測年齢(ADR 0053)。直前の注記・要約と詰まって見えないよう余白を空ける */
#living_cost_after_death_wrap,
.result-death-ages,
.result-return-scenario {
    margin-top: 12px;
}


/* 補足のアイコンとポップアップ(MEMO.md 2026/10/15コメント2-(1)、docs/lifeplan/decisions/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;
}

/* 企業型DCの「掛金を出す期間」(入力欄ではなく、引退年齢等から決まる期間を表示する、lifeplan ADR 0057) */
.corporate-dc-period {
    margin: 6px 0 0;
    font-size: 14px;
    line-height: 1.5;
}

/* 「このiDeCoで、生涯の家計はこう変わります」(MEMO.md 2026/10/16コメント3-(1))。増減を文で書き、家計に良い向きを緑・悪い向きを赤にする */
.ideco-impact-list {
    margin: 6px 0 0;
    padding-left: 20px;
}
.ideco-impact-list li {
    margin: 2px 0;
}
.ideco-impact-list .impact-good strong {
    color: var(--success);
}
.ideco-impact-list .impact-bad strong {
    color: var(--danger);
}


/* 住宅ローンのカード(lifeplan ADR 0068) */
.housing-loan-card {
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 12px 14px;
    margin-bottom: 12px;
}

.housing-loan-card-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.housing-loan-summary p {
    margin: 4px 0;
    font-size: 13px;
}

.housing-loan-summary .field-note {
    display: block;
}

.housing-loan-checks {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 24px;
    margin: 8px 0 12px;
}

/* 繰上げ返済の表は、スマホ幅で選択欄が潰れないよう最小幅を持たせ、はみ出す分は横にスクロールする */
.housing-loan-card .dynamic-list-table select {
    min-width: 96px;
}

.housing-loan-card .dynamic-list-table input {
    min-width: 120px;
}

/* 戻ってきた人への案内(前回から変わったこと等、docs/shared/decisions/0020)。見た目は上の一度だけの案内(.rebalance-hint)と同じ */
.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 {
    color: var(--danger, #b91c1c);
    font-weight: bold;
}

.revisit-card .revisit-more,
.revisit-card .revisit-extra {
    margin: 6px 0 0;
}

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

/* 見直す日をカレンダーに(docs/shared/decisions/0020)。メニューはバックアップと同じ見た目で、ボタンの下に出す */
.review-calendar-wrap {
    position: relative;
}

.review-calendar-wrap .record-menu {
    width: min(320px, calc(100vw - 32px));
}

.review-calendar-wrap a.record-menu-item {
    color: var(--text-primary, #0f172a);
    text-decoration: none;
    font-size: 14px;
}