/*
 * classic-tokens.css — クラシック側ツールページの共通トークンと共通部品
 *
 * 構造: ヒーロー → ツールパネル（入力／結果）→ 次の一手 → 広告 → 解説 → FAQ
 * 見た目の値は必ず :root の変数を経由する。ページ固有の上書きはページ側で行う。
 *
 * ■ 単位について
 *   css/grid.css が html { font-size: 62.5% } を指定しており 1rem = 10px になるため、
 *   フォントサイズと余白は px で書く。11〜12px の指定は禁止（本文 16 / ラベル 14 / 補足 13）。
 *
 * ■ 判定色
 *   安全／注意／危険の色は全ページ共通で意味を固定する。色だけで伝えず、
 *   必ずアイコンと文言を併記すること（.tu-verdict / .tu-chip）。
 */

:root {
    /* ---- 面 ---- */
    --tu-bg: #f7f6f2;
    --tu-panel: #ffffff;
    --tu-line: #e3e1da;
    --tu-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);

    /* ---- 文字 ---- */
    --tu-text: #1f2328;
    --tu-text-muted: #5b6470;
    --tu-fs-body: 16px;
    --tu-fs-label: 14px;
    --tu-fs-note: 13px;
    --tu-fs-h1: 28px;
    --tu-fs-h2: 20px;
    --tu-fs-main: 40px;
    --tu-fs-sub: 20px;

    /* ---- カテゴリ別アクセント ---- */
    --tu-accent-learn: #b23a48;     /* 試して学ぶ */
    --tu-accent-protect: #2f6f5e;   /* 守る・返す */
    --tu-accent-grow: #2b5797;      /* 増やす */
    --tu-accent-manage: #3b4a6b;    /* 管理する */
    --tu-accent: var(--tu-accent-grow);
    /* カテゴリ色を白に 8% 混ぜた不透明色。半透明だとベージュの地と混ざって灰色に濁るため */
    --tu-accent-soft: #edf1f7;

    /* ---- 判定色（意味固定） ---- */
    --tu-safe: #2e8b57;
    --tu-warn: #e0a100;
    --tu-danger: #c1272d;
    --tu-safe-soft: #eaf5ee;
    --tu-warn-soft: #fdf5dc;
    --tu-danger-soft: #fbeaea;
    --tu-safe-ink: #1f6b41;
    --tu-warn-ink: #7a5800;         /* 黄色地に載せる文字はコントラスト確保のため暗色 */
    --tu-danger-ink: #a11f24;

    /* ---- 形・余白（8px グリッド） ---- */
    --tu-radius: 8px;
    --tu-sp-1: 8px;
    --tu-sp-2: 16px;
    --tu-sp-3: 24px;
    --tu-sp-4: 32px;
    --tu-tap: 48px;
    --tu-dur: 200ms;
}

@media (prefers-reduced-motion: reduce) {
    :root { --tu-dur: 1ms; }
}

.tu-cat-learn { --tu-accent: var(--tu-accent-learn); --tu-accent-soft: #f8eced; }
.tu-cat-protect { --tu-accent: var(--tu-accent-protect); --tu-accent-soft: #ebf2f0; }
.tu-cat-grow { --tu-accent: var(--tu-accent-grow); --tu-accent-soft: #ebf0f6; }
.tu-cat-manage { --tu-accent: var(--tu-accent-manage); --tu-accent-soft: #eceff5; }

/* ---- ページ地 ---- */
body.tu-page {
    background: var(--tu-bg);
    color: var(--tu-text);
}
/* 既存の「1カラム白パネル」を外し、部品ごとのパネルで階層を作る */
body.tu-page main .container > .row > .col.span-12 {
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
}
.tu-num { font-variant-numeric: tabular-nums; }

/* パンくず: 背景・枠を外してテキストだけにする */
body.tu-page nav.breadcrumb,
body.tu-page .debt-breadcrumb {
    margin: 0 0 12px !important;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    font-size: var(--tu-fs-note);
    color: var(--tu-text-muted);
}
body.tu-page nav.breadcrumb li,
body.tu-page nav.breadcrumb li a,
body.tu-page nav.breadcrumb > a,
body.tu-page nav.breadcrumb > span,
body.tu-page .debt-breadcrumb a {
    padding: 0;
    font-size: var(--tu-fs-note);
    background: none;
    border: 0;
}

/* ---- 1. ヒーロー ---- */
.tu-hero {
    margin: 0 0 var(--tu-sp-2);
    padding: var(--tu-sp-2) var(--tu-sp-3);
    background: var(--tu-accent-soft);
    border-left: 4px solid var(--tu-accent);
    border-radius: var(--tu-radius);
}
body.tu-page .tu-hero h1 {
    margin: 0 0 4px;
    font-weight: 400;
    /* 「ー」や小さい「ョ」の直前で改行しない。語の塊は .tu-keep（include/tool_ui.php の tu_h1_text） */
    line-break: strict;
    font-size: var(--tu-fs-h1);
    line-height: 1.35;
    color: var(--tu-text);
    border: 0;
    padding: 0;
    background: none;
}
.tu-hook {
    margin: 0 0 4px;
    font-size: 18px;
    line-height: 1.7;
    font-variant-numeric: tabular-nums;
}
.tu-hook strong { color: var(--tu-accent); }
.tu-lead {
    margin: 0;
    font-size: var(--tu-fs-label);
    line-height: 1.7;
    color: var(--tu-text-muted);
}

/* 見出しの中で途中改行させたくない語（はみ出す長さなら塊の中で折り返す） */
.tu-keep { display: inline-block; max-width: 100%; }

/* ---- 2. ツールパネル ---- */
.tu-panel {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: var(--tu-sp-3);
    margin: 0 0 var(--tu-sp-2);
    padding: var(--tu-sp-2) var(--tu-sp-3);
    background: var(--tu-panel);
    border: 1px solid var(--tu-line);
    border-radius: var(--tu-radius);
    box-shadow: var(--tu-shadow);
}
.tu-inputs { min-width: 0; }
.tu-field { margin: 0 0 8px; }
.tu-field__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--tu-sp-1);
    margin: 0 0 4px;
}
.tu-field label,
.tu-field__label {
    font-size: var(--tu-fs-label);
    font-weight: 700;
    color: var(--tu-text);
}
.tu-field__box {
    display: flex;
    align-items: center;
    gap: 4px;
}
.tu-field__box input[type="number"] {
    width: 9em;
    min-height: 40px;
    padding: 4px 8px;
    font-size: var(--tu-fs-body);
    font-variant-numeric: tabular-nums;
    text-align: right;
    color: var(--tu-text);
    background: #fff;
    border: 1px solid #b9bfc7;
    border-radius: 6px;
    box-sizing: border-box;
}
.tu-field__box input[type="number"]:focus-visible,
.tu-field input[type="range"]:focus-visible {
    outline: 2px solid var(--tu-accent);
    outline-offset: 2px;
}
.tu-field__name { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.tu-field__box select {
    min-height: 40px;
    max-width: 12em;
    padding: 4px 8px;
    font-size: var(--tu-fs-body);
    color: var(--tu-text);
    background: #fff;
    border: 1px solid #b9bfc7;
    border-radius: 6px;
}
/* 項目名の横の「?」 */
.tu-tip {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    font-size: var(--tu-fs-note);
    font-weight: 700;
    color: var(--tu-accent);
    border: 1.5px solid var(--tu-accent);
    border-radius: 50%;
    cursor: help;
}
.tu-tip__body {
    position: absolute;
    left: -8px;
    top: calc(100% + 6px);
    z-index: 20;
    display: none;
    width: max-content;
    max-width: min(300px, 80vw);
    padding: 8px 12px;
    font-size: var(--tu-fs-note);
    font-weight: 400;
    line-height: 1.6;
    color: #fff;
    background: var(--tu-text);
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
.tu-tip:hover .tu-tip__body,
.tu-tip:focus .tu-tip__body { display: block; }
.tu-tip:focus-visible { outline: 2px solid var(--tu-accent); outline-offset: 2px; }
/* 推移グラフ */
.tu-chart { position: relative; height: 240px; margin: 12px 0 0; }
.tu-chart canvas { width: 100% !important; height: 100% !important; }
.tu-field__unit { font-size: var(--tu-fs-label); color: var(--tu-text-muted); }
.tu-field input[type="range"] {
    display: block;
    width: 100%;
    height: 28px;
    margin: 0;
    accent-color: var(--tu-accent);
    background: transparent;
}
.tu-field__note {
    margin: 2px 0 0;
    font-size: var(--tu-fs-note);
    line-height: 1.6;
    color: var(--tu-text-muted);
}
.tu-details { margin: 0 0 var(--tu-sp-2); }
.tu-details > summary {
    min-height: 40px;
    font-size: var(--tu-fs-label);
    color: var(--tu-accent);
    cursor: pointer;
}
.tu-submit {
    display: block;
    width: 100%;
    min-height: var(--tu-tap);
    padding: 0 var(--tu-sp-2);
    font-size: var(--tu-fs-body);
    font-weight: 700;
    color: #fff;
    background: var(--tu-accent);
    border: 0;
    border-radius: var(--tu-radius);
    cursor: pointer;
}
.tu-submit:hover { filter: brightness(1.08); }
.tu-submit:focus-visible { outline: 3px solid var(--tu-text); outline-offset: 2px; }

/*
 * 入力が 4 項目以上のとき、デスクトップは「項目名｜スライダー｜数値」を 1 行にして
 * 1280px で入力＋判定が 1 画面に入るようにする（.tu-inputs に --compact を付ける）
 */
@media (min-width: 769px) {
    .tu-inputs--compact .tu-field { display: grid; grid-template-columns: 10.5em minmax(0, 1fr) auto; align-items: center; column-gap: 12px; }
    .tu-inputs--compact .tu-field__head { display: contents; }
    .tu-inputs--compact .tu-field__name { grid-column: 1; grid-row: 1; }
    .tu-inputs--compact .tu-field input[type="range"] { grid-column: 2; grid-row: 1; }
    .tu-inputs--compact .tu-field__box { grid-column: 3; grid-row: 1; }
    .tu-inputs--compact .tu-field__box input[type="number"] { width: 7.5em; }
    .tu-inputs--compact .tu-field__note { grid-column: 1 / -1; }
}

/* 入力が多いページは項目を 2 列に並べる（.tu-inputs の中で .tu-grid2 で囲む） */
.tu-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
.tu-grid2 .tu-field { margin-bottom: 4px; }
.tu-grid2 .tu-field__head { flex-direction: column; align-items: stretch; gap: 2px; margin-bottom: 0; }
.tu-grid2 .tu-field__box input[type="number"],
.tu-grid2 .tu-field__box select { width: 100%; max-width: none; }

/* ---- 3. 結果ブロック ---- */
.tu-result { min-width: 0; }
.tu-result[aria-busy="true"] { opacity: 0.85; }

.tu-verdict {
    display: flex;
    gap: var(--tu-sp-2);
    align-items: flex-start;
    margin: 0 0 12px;
    padding: 12px var(--tu-sp-2);
    border-radius: var(--tu-radius);
    border: 1px solid transparent;
    border-left-width: 6px;
}
.tu-verdict__icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
    color: #fff;
}
.tu-verdict__label {
    display: block;
    margin: 0 0 4px;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.3;
}
.tu-verdict__text {
    margin: 0;
    font-size: var(--tu-fs-body);
    line-height: 1.7;
    color: var(--tu-text);
    font-variant-numeric: tabular-nums;
}
.tu-verdict--safe { background: var(--tu-safe-soft); border-color: var(--tu-safe); }
.tu-verdict--warn { background: var(--tu-warn-soft); border-color: var(--tu-warn); }
.tu-verdict--danger { background: var(--tu-danger-soft); border-color: var(--tu-danger); }
/* 計算前・計算できないときの中立表示（判定色を使わない。tool-ui.js が判定を描くと外れる） */
.tu-verdict--pending { background: var(--tu-bg); border-color: var(--tu-line); }
.tu-verdict--safe .tu-verdict__icon { background: var(--tu-safe); }
.tu-verdict--warn .tu-verdict__icon { background: var(--tu-warn); color: var(--tu-text); }
.tu-verdict--danger .tu-verdict__icon { background: var(--tu-danger); }
.tu-verdict--safe .tu-verdict__label { color: var(--tu-safe-ink); }
.tu-verdict--warn .tu-verdict__label { color: var(--tu-warn-ink); }
.tu-verdict--danger .tu-verdict__label { color: var(--tu-danger-ink); }

.tu-main { margin: 0 0 12px; }
.tu-main__label {
    display: block;
    font-size: var(--tu-fs-label);
    color: var(--tu-text-muted);
}
.tu-main__value {
    display: block;
    font-size: var(--tu-fs-main);
    font-weight: 700;
    line-height: 1.2;
    color: var(--tu-text);
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}
.tu-main__value small {
    display: inline-block;
    white-space: nowrap;
    margin-left: 4px;
    font-size: 18px;
    font-weight: 700;
    color: var(--tu-text-muted);
}

.tu-subs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: var(--tu-sp-1);
    margin: 0 0 12px;
    padding: 0;
}
.tu-sub {
    margin: 0;
    padding: 6px 12px;
    background: var(--tu-bg);
    border-radius: 6px;
}
.tu-sub dt {
    font-size: var(--tu-fs-note);
    color: var(--tu-text-muted);
}
.tu-sub dd {
    margin: 0;
    line-height: 1.4;
    font-size: var(--tu-fs-sub);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

/* ゲージ: 安全／注意／危険の帯＋現在値マーカー */
.tu-gauge { margin: 0; padding-top: 24px; position: relative; }
.tu-gauge__title {
    position: absolute;
    top: 0;
    left: 0;
    font-size: var(--tu-fs-note);
    color: var(--tu-text-muted);
}
.tu-gauge__track {
    position: relative;
    display: flex;
    height: 12px;
    border-radius: 6px;
    overflow: visible;
}
.tu-gauge__band { height: 100%; }
.tu-gauge__band:first-child { border-radius: 6px 0 0 6px; }
.tu-gauge__band:last-child { border-radius: 0 6px 6px 0; }
.tu-gauge__band--safe { background: var(--tu-safe); }
.tu-gauge__band--warn { background: var(--tu-warn); }
.tu-gauge__band--danger { background: var(--tu-danger); }
.tu-gauge__marker {
    position: absolute;
    top: -6px;
    width: 4px;
    height: 24px;
    margin-left: -2px;
    background: var(--tu-text);
    border: 2px solid #fff;
    border-radius: 3px;
    box-sizing: content-box;
    transition: left var(--tu-dur) ease-out;
}
.tu-gauge__legend {
    display: flex;
    margin: 6px 0 0;
    font-size: var(--tu-fs-note);
    color: var(--tu-text-muted);
}
.tu-gauge__legend span { overflow: hidden; white-space: nowrap; text-overflow: clip; text-align: center; }
/* 帯の境目の実数値。帯の幅は値域に比例させる（見た目のために幅を歪めない） */
.tu-gauge__ticks {
    position: relative;
    height: 18px;
    margin: 2px 0 0;
    font-size: var(--tu-fs-note);
    line-height: 18px;
    color: var(--tu-text-muted);
    font-variant-numeric: tabular-nums;
}
.tu-gauge__ticks span { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; }
.tu-gauge__ticks span:first-child { transform: none; }
.tu-gauge__ticks span:last-child { transform: translateX(-100%); }

/* ---- 4. 次の一手 ---- */
.tu-next {
    margin: 0 0 var(--tu-sp-3);
    padding: var(--tu-sp-2) var(--tu-sp-3);
    background: var(--tu-panel);
    border: 1px solid var(--tu-line);
    border-top: 3px solid var(--tu-accent);
    border-radius: var(--tu-radius);
    box-shadow: var(--tu-shadow);
}
.tu-next h2 {
    margin: 0 0 var(--tu-sp-1);
    padding: 0;
    font-size: var(--tu-fs-h2);
    color: var(--tu-text);
    border: 0;
    background: none;
    text-align: left;
}
.tu-next__list { margin: 0; padding: 0; list-style: none; }
.tu-next__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--tu-sp-2);
    padding: 12px 0;
    border-top: 1px solid var(--tu-line);
    font-size: var(--tu-fs-body);
    line-height: 1.7;
    font-variant-numeric: tabular-nums;
}
.tu-next__item:first-child { border-top: 0; }
.tu-next__text { margin: 0; min-width: 0; }
.tu-try {
    flex: 0 0 auto;
    min-height: 44px;
    padding: 0 var(--tu-sp-2);
    font-size: var(--tu-fs-label);
    font-weight: 700;
    color: var(--tu-accent);
    background: #fff;
    border: 2px solid var(--tu-accent);
    border-radius: var(--tu-radius);
    cursor: pointer;
    white-space: nowrap;
}
.tu-try:hover { background: var(--tu-accent-soft); }
.tu-try:focus-visible { outline: 3px solid var(--tu-text); outline-offset: 2px; }
.tu-next__links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--tu-sp-1) var(--tu-sp-3);
    margin: var(--tu-sp-1) 0 0;
    padding: var(--tu-sp-1) 0 0;
    border-top: 1px solid var(--tu-line);
    list-style: none;
}
.tu-next__links a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-size: var(--tu-fs-body);
    font-weight: 700;
    color: var(--tu-accent);
}

/* ---- 6. 解説 ---- */
.tu-article {
    margin: 0 0 var(--tu-sp-3);
    padding: var(--tu-sp-3);
    background: var(--tu-panel);
    border: 1px solid var(--tu-line);
    border-radius: var(--tu-radius);
    text-align: left;
}
.tu-article h2 {
    margin: var(--tu-sp-3) 0 var(--tu-sp-1);
    padding: 0;
    font-size: var(--tu-fs-h2);
    line-height: 1.4;
    color: var(--tu-text);
    border: 0;
    background: none;
    text-align: left;
}
.tu-article h2:first-child { margin-top: 0; }
.tu-article p,
.tu-article li,
.tu-article dd { font-size: var(--tu-fs-body); line-height: 1.8; }
.tu-article dt { margin-top: var(--tu-sp-2); font-weight: 700; }
.tu-article dd { margin: 4px 0 0; }
.tu-caution {
    margin: var(--tu-sp-3) 0 0;
    padding: 12px var(--tu-sp-2);
    font-size: var(--tu-fs-label);
    line-height: 1.7;
    color: var(--tu-text-muted);
    background: var(--tu-bg);
    border-radius: 6px;
}

/* ---- モバイル: 判定＋主数値を常に見せるバー ---- */
.tu-sticky {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
    display: none;
    align-items: center;
    gap: 12px;
    height: 64px;
    padding: 0 16px;
    box-sizing: border-box;
    background: var(--tu-panel);
    border-bottom: 3px solid var(--tu-line);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    color: var(--tu-text);
    text-decoration: none;
}
.tu-sticky.is-visible { display: flex; }
.tu-sticky--safe { border-bottom-color: var(--tu-safe); }
.tu-sticky--warn { border-bottom-color: var(--tu-warn); }
.tu-sticky--danger { border-bottom-color: var(--tu-danger); }
.tu-chip {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 32px;
    padding: 0 10px;
    font-size: var(--tu-fs-label);
    font-weight: 700;
    border-radius: 16px;
    color: #fff;
}
.tu-chip--safe { background: var(--tu-safe); }
.tu-chip--warn { background: var(--tu-warn); color: var(--tu-text); }
.tu-chip--danger { background: var(--tu-danger); }
.tu-sticky__main { min-width: 0; line-height: 1.25; }
.tu-sticky__label { display: block; font-size: var(--tu-fs-note); color: var(--tu-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tu-sticky__value {
    display: block;
    font-size: 20px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 768px) {
    :root {
        --tu-fs-h1: 22px;
        --tu-fs-main: 32px;
        --tu-fs-sub: 17px;
    }
    /* モバイルは帯を外して h1＋フック＋左線だけにする */
    .tu-hero {
        padding: 0 0 0 12px;
        background: none;
        border-radius: 0;
    }
    .tu-hook { font-size: 17px; }
    .tu-panel {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--tu-sp-2);
        padding: var(--tu-sp-2);
    }
    .tu-field { margin-bottom: 8px; }
    .tu-chart { height: 200px; }
    /* 判定カードを 1 画面目に出すため、結果ブロックを展開して判定だけ入力より前へ */
    .tu-result { display: contents; }
    .tu-result > [data-tu="verdict"] { order: -1; margin-bottom: 0; }
    /* 判定カードの無いページは主数値を入力より前に出す */
    .tu-result > .tu-main:first-child { order: -1; margin-bottom: 0; }
    .tu-hero .tu-lead { display: none; }
    .tu-verdict { padding: 12px; gap: 12px; }
    .tu-verdict__label { font-size: 20px; }
    .tu-next { padding: var(--tu-sp-2); }
    .tu-next__item { flex-direction: column; align-items: stretch; gap: var(--tu-sp-1); }
    .tu-try { width: 100%; }
    .tu-article { padding: var(--tu-sp-2); }
}
@media (min-width: 769px) {
    .tu-sticky, .tu-sticky.is-visible { display: none; }
}

/* 補助数値の中の小さい補足（金額など） */
.tu-sub dd small {
    display: block;
    font-size: var(--tu-fs-label);
    font-weight: 700;
    color: var(--tu-text-muted);
}