/* src/nenkin/style.css */

/* idecoのstyle.css(docs/nenkin/decisions/0001参照)から、本サイトが実際に使う要素だけを
   移植したもの。3ページのウィザード構成(MEMO.md 2026/9/22コメント3-(3))に伴い、
   ideco[ADR 0009]「2026-09-22改訂」のヘッダー見取り図・スライダー等のスタイルも追加した。 */

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

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

* {
    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埋め込み先によっては表示幅が960pxを超えるため、中央寄せによる無駄な左右余白で
       ツール画面が縮小されないよう上限を拡大している(rebalance ADR 0008・ideco踏襲) */
    max-width: 1400px;
    margin: 0 auto;
    padding: 24px 16px 64px;
}

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

/* ウィザード全体の見取り図+現在位置(装飾のみ、クリック不可。ideco[ADR 0009]「2026-09-22改訂」踏襲) */
.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;
}

/* 認証・同意画面(rebalance/idecoと同じパターン) */
.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は元々<button>専用だったが、lifeplanへの導線(#lifeplan_handoff_link_wrap)で
       <a class="btn btn-primary">として初めて使うため、リンクの下線を消す
       (2026-09-23の追加フィードバック「idecoサイトに合わせたボタンにしてください」) */
    text-decoration: none;
}

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

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

/* disabled状態の見た目(見た目でも無効と分かるようにする、ideco踏襲) */
.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

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

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

.form-grid-pair {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* 「より正確に試算する(任意)」内の2カラム化(2026-09-23コメント2-(1)「lifeplanへの連携ボタンを
   置く場所」への対応)。左に既存の任意項目(可変長)、右にlifeplanへの導線を配置する。
   align-items: endで、右列(短い)を左列の下端に揃え、「右下」に導線が来るようにする */
/* ライフプランシミュレーターへの導線のカード(MEMO.md 2026/10/9コメント2-(1)、docs/shared/decisions/0015)。
   その人の結果の数字で「引き継ぐと分かること」を示す。iDeCoシミュレーターと同じ見た目にする。左端の太い線は、見出しを「…確かめる」の
   呼びかけにした後は不要になったため外した(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;
}

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

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

/* 年齢のスライダーの上に置く、ラベルと年齢の表示・▲▼ボタンの行(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;
}

/* 「明細を表示したい年齢」等のスライダーを、グラフの実際の描画範囲(Chart.jsのchartArea)に
   位置合わせするための左右の余白(2026-09-23の追加フィードバック「グラフの左右のx座標をスライダの
   調整範囲のx座標に合わせてほしい」)。paddingはJS側(ChartAgeCursor.alignSlider)で描画後に
   動的に設定する(2026-09-29に年齢の数値入力欄をスライダーの上へ移したため、右端も動的に合わせる) */
.range-input-align {
    box-sizing: border-box;
}
.range-input-align .range-input {
    display: block;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
}

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

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

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

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

input[type="text"], input[type="number"], select {
    padding: 6px 8px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 14px;
    width: 100%;
}

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

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

/* トピックA・Bの比較結果グラフ(Chart.js、ideco[page3_compare_chart_wrap]踏襲) */
#page2_chart_wrap, #page2_work_until_chart_wrap {
    position: relative;
    height: 280px;
    margin-bottom: 16px;
}

/* トピックAの比較表(ideco/lifeplanの表スタイルを踏襲) */
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;
}

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

/* 参考値の列(手取り最大・税/社会保険料最小、2026-09-22の追加フィードバックで新設)を、
   選択中の列より控えめな見た目にする */
th.reference-col, td.reference-col {
    color: var(--text-secondary);
    font-style: italic;
}

/* 内訳行(「手取り合計」の下の「うち加給年金合計」等、2026-09-22の追加フィードバック
   コメント(11))をインデントして親行の内訳であることを示す */
td.row-indent {
    padding-left: 28px;
    color: var(--text-secondary);
    font-size: 13px;
}

/* トピックAの比較表。別々の年齢で受け取る案の3列目(MEMO.md 2026/9/26コメント1-(2))を加えると
   狭い画面で行見出しが1文字ずつ折り返されるため、行見出しに最小幅を確保し、金額は折り返さない
   (収まらない分は.table-responsiveで横スクロール) */
#page2_results_body td:first-child {
    min-width: 9em;
}

#page2_results_body td.text-right {
    white-space: nowrap;
}

/* トピックBのグラフ下の折り畳み明細(2026-09-23の追加フィードバック(11))。グループ見出し行
   (収入・社会保険料・税金)。lifeplan本体の明細表と違いクリックでの開閉は持たない(1年分のみの
   縦一覧のため)ため、cursor: pointerは付けない */
.detail-group-header {
    background: var(--bg-main);
    text-align: left;
}

/* 折り畳み明細の開閉(ネイティブの<details>要素、2026-09-23の追加フィードバック(11)
   「グラフの下に折り畳みで明細を出してほしい」) */
.detail-toggle summary {
    cursor: pointer;
    font-weight: bold;
    padding: 8px 0;
}
.detail-toggle {
    margin-top: 16px;
}

/* トピックA/Bの入口カード(idecoの検討トピックカードを踏襲) */
.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;
    }

    /* 狭い画面では1列に積み、lifeplanへの導線(DOM順で後ろ)は既存の任意項目の下に表示される */
    .lifeplan-cta-carry {
        grid-template-columns: 1fr;
    }

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

/* トピックAの比較表・トピックBの明細の内訳行(MEMO.md 2026/9/26コメント1-(4))。小計の行
   (.breakdown-group-header)をクリックするとグループごとに開閉する(lifeplanの明細表と同じ操作感)。
   既定は畳んだ状態 */
tr.breakdown-row[hidden] {
    display: none;
}

tr.breakdown-group-header {
    cursor: pointer;
    user-select: none;
}

tr.breakdown-group-header:hover td {
    background: var(--bg-main);
}

/* 手取り・小計行(収入・社会保険料・税金)。トピックAの比較表・トピックBの明細で共通
   (MEMO.md 2026/9/26コメント1-(4))。内訳(インデント行)より目立たせる */
tr.subtotal-row td:first-child {
    font-weight: 600;
}

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


/* 「より正確に試算する(任意)」とライフプランシミュレーターへの導線を左右に並べる(MEMO.md 2026/10/18コメント2-(1))。
   狭い幅では①②の順に縦に並べる */
.card-pair {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    align-items: start;
}
/* 左右に並べると右の列が狭いため、引き継ぐ情報の見出しと中身を縦に並べる */
.card-pair .lifeplan-cta-carry {
    grid-template-columns: 1fr;
}
.card-pair .lifeplan-cta-carry dd {
    margin-bottom: 6px;
}
@media (max-width: 768px) {
    .card-pair {
        grid-template-columns: 1fr;
        gap: 0;
    }
}

/* 住民税非課税世帯になる期間の1文(MEMO.md 2026/10/18コメント2-(3)) */
.exempt-summary {
    margin: 8px 0 12px;
    font-size: 14px;
}