/* 2ページ共通のデザイントークン（docs/design/2026-10-08-a-focus-v2/README.md「デザイントークン」。設計書.dc.html の @media 形式）
   モックの light-dark() は使わない（古い Safari でも色が付くように）。値を変えるときは README と両方のページを見る */
:root {
  color-scheme: light dark;
  --font-sans: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  --color-brand: #04384c;
  --color-brand-hover: #0a4d66;
  --color-brand-soft: #e2eef2;
  --color-on-brand: #ffffff;
  --color-accent: #0b7c93;
  --color-focus: #0b7c93;
  --color-bg: #f4f6f7;
  --color-surface: #ffffff;
  --color-surface-sunken: #eaeff1;
  --color-surface-raised: #ffffff;
  --color-scrim: rgb(14 29 36 / .4);
  --color-text: #0e1d24;
  --color-text-muted: #4f626b;
  --color-border: #dbe3e7;
  --color-border-input: #84979f;
  --color-filled-bg: #eef6f8;
  --color-ok-text: #1f6b4a;
  --color-ok-bg: #e6f3ec;
  --color-warn-text: #7a4b00;
  --color-warn-bg: #fcf0d6;
  --color-warn-line: #c98a12;
  --color-danger-text: #a3221b;
  --color-danger-bg: #fce9e7;
  --color-danger-line: #d14a40;
  /* 引用文献で追加 */
  --color-mark-check-bg: #fff1c9;
  --color-mark-check-text: #6e4300;
  --color-mark-check-line: #c98a12;
  --color-mark-missing-bg: #fde4e1;
  --color-mark-missing-text: #9c1f18;
  --color-mark-missing-line: #d14a40;
  --color-row-editing-bg: #e2eef2;
  --color-row-link-bg: #eef5f7;
  --color-drop-bg: #f8fbfc;
  --shadow-1: 0 1px 2px rgb(4 56 76 / .08);
  --shadow-2: 0 10px 30px rgb(4 56 76 / .16), 0 2px 6px rgb(4 56 76 / .08);
  --shadow-3: 0 16px 40px rgb(4 56 76 / .22), 0 2px 8px rgb(4 56 76 / .10);
  --font-size-xs: 12px;
  --font-size-sm: 13px;
  --font-size-md: 15px;
  --font-size-input: 16px;
  --font-size-output: 16px;
  --font-size-lg: 17px;
  --font-size-xl: 20px;
  --line-height-tight: 1.35;
  --line-height-body: 1.6;
  --line-height-output: 1.85;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-pill: 999px;
  --tap-min: 44px;
  --header-height: 56px;
  --pane-output-width: clamp(320px, 38%, 520px);
  --pane-list-width: clamp(380px, 46%, 680px);
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --ease: cubic-bezier(.2, .7, .2, 1);

  /* ---- 追加（計画6 Task 1。docs/design/3-Claude-designから受け取った/tokens.css の「追加」の欄） ---- */
  --color-on-accent: #fff;                                   /* 入力済みの丸の中のチェック */
  --color-header-bg: #fff; --color-header-text: #04384c; --color-header-muted: #4f626b;
  --color-header-line: #dbe3e7; --color-header-hover: rgb(4 56 76 / .06); --color-header-focus: #0b7c93;
  --color-logo-ring: transparent;                            /* ダークでロゴの縁が溶けないための細い縁 */
  --color-search-bg: #fff; --color-search-line: #84979f;
  --color-yes-bg: #04384c; --color-on-yes: #fff;             /* 「あり」を選んだときの塗り */
  --color-selected-bg: #e2eef2; --color-selected-line: #04384c;   /* 「なし」・性別など、選んだ選択肢 */
  --color-pending-line: #84979f;                             /* 未入力の点線 */
  --color-match-bg: #fff1c9; --color-match-text: #0e1d24;    /* 検索の一致部分 */
  --color-sev-strong-bg: #a3221b; --color-on-sev-strong: #fff;    /* 最も重い判定（超重症・G5）。danger-line+白は 4.4:1 で AA 未達のため */
  --color-toast-bg: #0e1d24; --color-toast-text: #fff; --color-toast-action: #7cc7de;
  --color-shelf-badge-bg: #e2eef2; --color-shelf-badge-text: #04384c;   /* 分類の札（漢字1字） */
  --shadow-strip: 0 6px 16px rgb(4 56 76 / .08);             /* 結果の固定欄の下の影（画面に1つだけ） */
  --font-size-2xl: 24px; --font-size-result: 28px; --line-height-note: 1.75;
  --space-10: 40px; --radius-control: 10px; --tap-comfort: 52px;
  --duration-feedback: 2400ms;                               /* 「コピーしました」を出す時間 */
  --safe-top: env(safe-area-inset-top, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px);
}
@media (prefers-color-scheme: dark) {
  :root {
    --color-brand: #7cc7de;
    --color-brand-hover: #a3dbeb;
    --color-brand-soft: #16323c;
    --color-on-brand: #04222e;
    --color-accent: #5cc8de;
    --color-focus: #5cc8de;
    --color-bg: #0b1519;
    --color-surface: #111e23;
    --color-surface-sunken: #0d181c;
    --color-surface-raised: #1c2f37;
    --color-scrim: rgb(0 0 0 / .55);
    --color-text: #e4edf0;
    --color-text-muted: #9fb2ba;
    --color-border: #22343b;
    --color-border-input: #587079;
    --color-filled-bg: #13272e;
    --color-ok-text: #74d3a5;
    --color-ok-bg: #10291f;
    --color-warn-text: #f2c46d;
    --color-warn-bg: #2e2411;
    --color-warn-line: #b8862a;
    --color-danger-text: #ff9e93;
    --color-danger-bg: #3a1715;
    --color-danger-line: #e0665c;
    --color-mark-check-bg: #3a2c0c;
    --color-mark-check-text: #ffd27a;
    --color-mark-check-line: #e0a93a;
    --color-mark-missing-bg: #43191a;
    --color-mark-missing-text: #ffb1a8;
    --color-mark-missing-line: #ff8a7e;
    --color-row-editing-bg: #16323c;
    --color-row-link-bg: #13252c;
    --color-drop-bg: #0f1b20;
    --shadow-1: 0 1px 2px rgb(0 0 0 / .5);
    --shadow-2: 0 10px 30px rgb(0 0 0 / .6), 0 2px 6px rgb(0 0 0 / .4);
    --shadow-3: 0 12px 40px rgb(0 0 0 / .7), 0 2px 8px rgb(0 0 0 / .5);

    /* 追加 */
    --color-on-accent: #04222e;
    --color-header-bg: #111e23; --color-header-text: #e4edf0; --color-header-muted: #9fb2ba;
    --color-header-line: #22343b; --color-header-hover: rgb(255 255 255 / .06); --color-header-focus: #5cc8de;
    --color-logo-ring: rgb(255 255 255 / .10);
    --color-search-bg: #1c2f37; --color-search-line: #587079;
    --color-yes-bg: #2a6a80; --color-on-yes: #fff;             /* brand の水色だとまぶしいので一段暗く（白文字 5.6:1） */
    --color-selected-bg: #16323c; --color-selected-line: #7cc7de;
    --color-pending-line: #587079;
    --color-match-bg: #3a2c0c; --color-match-text: #ffd27a;
    --color-sev-strong-bg: #ff9e93; --color-on-sev-strong: #2b0705;
    --color-toast-bg: #e4edf0; --color-toast-text: #0b1519; --color-toast-action: #0b5e70;
    --color-shelf-badge-bg: #16323c; --color-shelf-badge-text: #a3dbeb;
    --shadow-strip: 0 6px 16px rgb(0 0 0 / .45);
  }
}
@media (prefers-reduced-motion: reduce) {
  :root { --duration-fast: 0ms; --duration-base: 0ms; }
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* 2ページ共通の部品（docs/design/2026-10-08-a-focus-v2 の2つのモックの BASE。README「共通の部品」）
   モックの @container app は @media (min-width: 768px) に置き換え、.app の height: 100% は 100dvh にした（README「幅による切り替え」）。
   どちらかのページだけの都合で変えない。ページだけの見た目は src/ui/index.css（一覧）・src/ui/calc.css（計算ページ）に書く。
   旧 .site-header* の規則（下の「ページの頭」）は他ツールと共通の写しで、この計算ツールでは使わない（頭は .app-header） */
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--color-bg); color: var(--color-text); font-family: var(--font-sans); }
[hidden] { display: none !important; }

/* 外枠: body > .app > header.app-header + main（src/ui/render-index.js・render-calc.js が作る。.app__main は他ツール共通の写しで、この計算ツールでは使わない） */
.app{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;font-family:var(--font-sans);font-size:var(--font-size-md);line-height:var(--line-height-body);background:var(--color-bg);color:var(--color-text);-webkit-text-size-adjust:100%;text-size-adjust:100%}
.app__main{flex:1;display:flex;flex-direction:column;min-width:0;min-height:0}
.app a{color:var(--color-brand)}
.app a:hover{color:var(--color-brand-hover)}
.sr-only{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.icon{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.icon--sm{width:14px;height:14px}
.app :focus-visible,.toast :focus-visible{outline:3px solid var(--color-focus);outline-offset:2px}
/* 見えない radio／checkbox（label の中の input）は、label 全体に輪を出す（README §Interactions）。input 自身の輪は見えないので出さない */
.app label:has(> input:is([type=radio],[type=checkbox]):focus-visible){outline:3px solid var(--color-focus);outline-offset:2px}
.app label > input:is([type=radio],[type=checkbox]):focus-visible{outline:0}
/* タップしたときにブラウザが重ねる既定の色（Android の Chrome では角丸の部品に四角く出る）は出さない。
   押す部品（ボタン・タブ・開閉・選ぶ部品の文字）は、長押しで文字を選ばず、コピーなどのメニューも出さない（2026-10-09 Galaxy の録画で見つかった。ユーザーの指示） */
.app{-webkit-tap-highlight-color:transparent}
.app :is(button,summary,label:has(input[type=radio],input[type=checkbox])){-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}

/* ページの頭 */
.site-header{flex:none;display:flex;align-items:center;gap:var(--space-3);min-height:var(--header-height);padding:calc(var(--space-2) + env(safe-area-inset-top)) calc(var(--space-4) + env(safe-area-inset-right)) var(--space-2) calc(var(--space-4) + env(safe-area-inset-left));background:var(--color-surface);border-bottom:1px solid var(--color-border)}
.site-header__brand{display:flex;align-items:center;gap:var(--space-3);min-width:0}
.site-header__icon{width:32px;height:32px;border-radius:8px;flex:none;display:block}
.site-header__link-icon{width:20px;height:20px;border-radius:5px;flex:none;display:block}
.site-header__name{margin:0;min-width:0;font-size:var(--font-size-lg);font-weight:700;line-height:var(--line-height-tight);color:var(--color-brand);letter-spacing:.02em}
.app .site-header__link{margin-left:auto;display:inline-flex;align-items:center;gap:var(--space-1);min-height:var(--tap-min);padding:0 var(--space-2);border-radius:var(--radius-sm);font-size:var(--font-size-sm);color:var(--color-text-muted);text-decoration:none;text-align:right;line-height:1.3}
.site-header__link-short{display:none}
.app .site-header__link:hover{color:var(--color-brand);background:var(--color-surface-sunken)}

/* ヘッダー（計画6 Task 1。docs/design/3-Claude-designから受け取った/README.md「共通：ヘッダー」）。高さ 56px（ノッチの分は上に足す）。
   社名は出さない。ロゴの図形・配色は変えず、画面上の表示だけ角丸でクリップする（ダークは --color-logo-ring の細い縁） */
.app-header{flex:none;display:flex;align-items:center;gap:10px;min-height:calc(var(--header-height) + var(--safe-top));padding:var(--safe-top) calc(var(--space-4) + env(safe-area-inset-right, 0px)) 0 calc(var(--space-4) + env(safe-area-inset-left, 0px));background:var(--color-header-bg);color:var(--color-header-text);border-bottom:1px solid var(--color-header-line)}
.app-header__brand{display:flex;align-items:center;gap:10px;min-width:0;margin:0}
.app-header__title{font-size:var(--font-size-lg);font-weight:700;letter-spacing:.02em;white-space:nowrap}
.app-logo{display:block;flex:none;box-shadow:0 0 0 1px var(--color-logo-ring)}
.app-header__brand .app-logo{width:30px;height:30px;border-radius:7px}
.app-header__chevron{flex:none}
.app .app-header__back{display:flex;align-items:center;gap:var(--space-2);min-height:var(--tap-min);min-width:0;margin-left:calc(var(--space-2) * -1);padding:0 10px 0 var(--space-1);border-radius:var(--radius-control);color:inherit;text-decoration:none}
.app .app-header__back:hover{color:inherit;background:var(--color-header-hover)}
.app .app-header__back:active{background:var(--color-header-hover)}
.app .app-header__back:focus-visible{outline:3px solid var(--color-header-focus);outline-offset:2px}
.app-header__back .app-logo{width:28px;height:28px;border-radius:6px}
.app-header__back .app-header__title{font-size:var(--font-size-input)}

/* 通知（トースト。src/ui/toast.js が body 直下に1つ作り、置いたまま文字を入れ替える。画面下、左右 16px、最大幅 480px）。
   消すときは hidden にせず .toast--off（見えなくして押せなくする）。入れ物を置いたままにするのは、role=status の読み上げを確実にするため。
   押せる範囲は 44px（ボタン 44px に合わせて上下の padding を詰め、文字の側に余白を持たせる） */
.toast{position:fixed;left:var(--space-4);right:var(--space-4);bottom:calc(48px + var(--safe-bottom));z-index:30;display:flex;align-items:center;gap:var(--space-3);max-width:480px;min-height:48px;margin:0 auto;padding:2px var(--space-2) 2px var(--space-4);border-radius:var(--radius-md);background:var(--color-toast-bg);color:var(--color-toast-text);font-size:14px;line-height:1.5;box-shadow:var(--shadow-2)}
.toast--off{opacity:0;pointer-events:none}
/* 位置: スマホは下から 48px（ホームバーの上）、PC（960px 以上）は 24px。結果の固定欄は画面の上端なので重ならない */
@media (min-width: 960px){ .toast{bottom:calc(var(--space-6) + var(--safe-bottom))} }
.toast__text{flex:1;min-width:0;padding:var(--space-2) 0;overflow-wrap:anywhere}
.toast__action{flex:none;min-height:var(--tap-min);padding:0 var(--space-3);border:0;border-radius:var(--radius-sm);background:transparent;color:var(--color-toast-action);font:inherit;font-size:14px;font-weight:700;cursor:pointer}

/* ボタン */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);min-height:var(--tap-min);min-width:var(--tap-min);padding:0 var(--space-4);border:1px solid transparent;border-radius:var(--radius-sm);background:none;color:var(--color-text);font:inherit;font-size:var(--font-size-md);font-weight:600;line-height:1.2;cursor:pointer;white-space:nowrap;transition:background-color var(--duration-fast) var(--ease),color var(--duration-fast) var(--ease)}
.btn--primary{background:var(--color-brand);color:var(--color-on-brand)}
.btn--primary:hover{background:var(--color-brand-hover)}
.btn--secondary{background:var(--color-surface);border-color:var(--color-border-input)}
.btn--secondary:hover{background:var(--color-surface-sunken)}
.btn--ghost{color:var(--color-text-muted);font-weight:500}
.btn--ghost:hover{background:var(--color-surface-sunken);color:var(--color-text)}
.btn--danger{background:var(--color-danger-text);color:var(--color-surface)}
.btn:disabled{background:var(--color-surface-sunken);color:var(--color-text-muted);border-color:transparent;cursor:not-allowed}
.btn--ghost:disabled{background:none;opacity:.5} /* 使えない［畳む］などが、灰色の四角で押されているように見えないように（2026-10-10 ユーザーの決め・UI/UX レビュー M10） */
/* 押している間だけ、角の丸に沿った薄い背景（2026-10-10 ユーザーの決め・UI/UX レビュー M16）。タップの四角い既定の色は消したまま。使えないときは変えない。
   地が塗ってある主ボタンは既存の濃い方（--color-brand-hover）。危険のボタンは対になるトークンが無いので触らない */
.btn--primary:not(:disabled):active{background:var(--color-brand-hover)}
.btn--secondary:not(:disabled):active,.btn--ghost:not(:disabled):active{background:var(--color-surface-sunken)}
.app .site-header__link:active{background:var(--color-surface-sunken)}
.btn--lg{min-height:52px;font-size:var(--font-size-lg);padding:0 var(--space-6)}

/* 数のバッジ・入力欄 */
.count{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 6px;border-radius:var(--radius-pill);background:var(--color-brand-soft);color:var(--color-brand);font-size:var(--font-size-xs);font-weight:700;font-variant-numeric:tabular-nums;line-height:1}
.input{width:100%;min-height:var(--tap-min);padding:0 var(--space-3);border:1px solid var(--color-border-input);border-radius:var(--radius-sm);background:var(--color-surface);color:var(--color-text);font:inherit;font-size:var(--font-size-input);line-height:1.4}
.input::placeholder{color:var(--color-text-muted);opacity:1}
.input:hover{border-color:var(--color-text-muted)}
.input:disabled{background:var(--color-surface-sunken);border-color:var(--color-border)}
.app .input:focus-visible{outline:3px solid var(--color-focus);outline-offset:0;border-color:var(--color-focus)}
textarea.input{padding:var(--space-2) var(--space-3);line-height:var(--line-height-body);resize:vertical}
.field-label{font-size:var(--font-size-sm);font-weight:700}

/* コピーの知らせ（［コピー］の上の吹き出し。data-on="false" で消える。レイアウトは動かさない） */
.copy-wrap{position:relative}
.copy-status{position:absolute;right:0;bottom:calc(100% + var(--space-2));display:inline-flex;align-items:center;gap:var(--space-1);margin:0;padding:var(--space-1) var(--space-3);border-radius:var(--radius-pill);background:var(--color-text);color:var(--color-bg);font-size:var(--font-size-sm);font-weight:700;white-space:nowrap;pointer-events:none;transition:opacity var(--duration-base) var(--ease)}
.copy-status[data-on=false]{opacity:0}

/* 480px 未満（スマホの縦持ち全体。多くの iPhone の 360〜393px、〜440px の大きい iPhone を含む）: 頭の右のリンクの文字を、姉妹ページの短い名前（検査値／引用文献）にする（2026-10-11 ユーザーの決め）。
   長い名前のままだとツール名が「検査値の記載補／助」のように2行に折れるため。折れる最大の幅は実測で 401／406px（Chromium・macOS の日本語フォント。1px 刻み。dist を開いて長い名前のまま測った）。
   フォントの違う端末（Android の Noto 系など）に備えて、スマホの縦持ち全体（480px 未満）を短い名前にそろえる（480〜767px は長い名前で1行に収まることを実測）。
   隠す側は display:none（読み上げからも外れる。読み上げはリンクの aria-label の正式名が担う） */
@media (max-width: 479.98px) {
  .site-header__link-long{display:none}
  .site-header__link-short{display:inline}
}

/* 768px 以上: ページ全体をスクロールさせず、画面の高さの枠の中で並べる（本体の内側スクロールは各ページの CSS） */
@media (min-width: 768px) {
  .app{height:100vh;height:100dvh}
  .app__main{overflow:auto}
}

/* 一覧ページ（計画6 Task 7・一覧トラック。docs/design/3-Claude-designから受け取った/README.md §Screens 1〜3）。
   色・大きさは src/shared/tokens.css のトークン。同じ値のトークンがある所は var()、トークンの段に無い部品固有の寸法（札 24/26/30/48px・角丸 7/14px・本文 14px など。README が px で決めた値）は px のまま（台帳 Ruling 6）。
   PC の切り替えは幅 960px。ダークは tokens のダークの値で自動。影は付けない（影は結果の固定欄とトーストだけ）。
   本体が calc.css の `.calc,.index`（幅 720px・余白）より強くなるよう `main.index` で書く */

/* ---- 外枠 ---- */
main.index{--pad-l:calc(var(--space-4) + env(safe-area-inset-left, 0px));--pad-r:calc(var(--space-4) + env(safe-area-inset-right, 0px));display:flex;flex-direction:column;gap:var(--space-5);width:100%;max-width:none;min-width:0;margin:0;padding:var(--space-4) var(--pad-r) calc(var(--space-6) + var(--space-1) + var(--safe-bottom)) var(--pad-l)}
.index a{color:var(--color-text);text-decoration:none}
.index a:hover{color:var(--color-text)}
.index ul{margin:0;padding:0;list-style:none}
.name-head{font-weight:700}

/* ---- 説明文・検索欄 ---- */
.intro{display:flex;flex-direction:column;gap:var(--space-2)}
.intro__desc{margin:0;max-width:640px;font-size:var(--font-size-xs);line-height:1.65;color:var(--color-text-muted);text-wrap:pretty}
.search,.cat-search{position:relative;max-width:640px}
.search__icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--color-text-muted);pointer-events:none}
/* 入力欄そのものを 48px（分類の中は 44px）の枠にする: 押せる範囲が欄の大きさと一致する。左に虫めがね、右に消すボタン */
.search__input,.cat-search__input{display:block;width:100%;margin:0;border:1.5px solid var(--color-search-line);background:var(--color-search-bg);color:var(--color-text);font:inherit;font-size:var(--font-size-input);line-height:1.4;-webkit-appearance:none;appearance:none}
.search__input{height:48px;padding:0 52px 0 42px;border-radius:var(--radius-md)}
.search__input::placeholder,.cat-search__input::placeholder{color:var(--color-text-muted);opacity:1}
.search__input::-webkit-search-cancel-button,.search__input::-webkit-search-decoration,.cat-search__input::-webkit-search-cancel-button,.cat-search__input::-webkit-search-decoration{-webkit-appearance:none;appearance:none;display:none}
/* 検索欄は枠全体に 3px の輪（base.css の 2px の輪を、この欄だけ README の 3px にする） */
.app .search__input:focus-visible,.app .cat-search__input:focus-visible{outline:3px solid var(--color-focus);outline-offset:0;border-color:var(--color-focus)}
.search__clear{position:absolute;top:2px;right:var(--space-1);display:grid;place-items:center;width:var(--tap-min);height:var(--tap-min);padding:0;border:0;border-radius:var(--radius-control);background:transparent;color:var(--color-text-muted);cursor:pointer}
.search__clear:hover,.search__clear:active{background:var(--color-surface-sunken);color:var(--color-text)}

/* ---- ホーム: 棚（お気に入り・最近開いた・分類） ---- */
.home{display:flex;flex-direction:column;gap:var(--space-5)}
.shelf__title{display:flex;align-items:center;gap:6px;margin:0 0 10px;font-size:var(--font-size-md);font-weight:700;color:var(--color-text)}
.shelf__icon{flex:none}
.shelf--favs .shelf__icon{color:var(--color-brand)}
.shelf--recent .shelf__icon{color:var(--color-text-muted)}
.shelf__head{display:flex;align-items:baseline;gap:var(--space-2);margin:0 0 10px}
.shelf__head .shelf__title{margin:0}
.shelf__hint{font-size:var(--font-size-xs);font-weight:500;color:var(--color-text-muted)}
/* お気に入りが空: 破線の枠に、ボタンと同じ見た目の見本（押せない飾り）と一文 */
.shelf__empty{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:var(--space-3);max-width:560px;padding:var(--space-3) 14px;border:1.5px dashed var(--color-border-input);border-radius:var(--radius-md);background:var(--color-drop-bg)}
.shelf__sample{display:inline-flex;align-items:center;gap:5px;height:36px;padding:0 var(--space-3);border:1.5px solid var(--color-border-input);border-radius:var(--radius-control);background:var(--color-surface);font-size:var(--font-size-sm);font-weight:700;color:var(--color-text)}
.shelf__note{margin:var(--space-2) 0 0;font-size:var(--font-size-sm);line-height:1.6;color:var(--color-text-muted)}
.shelf__empty-text{margin:0;font-size:var(--font-size-sm);line-height:1.5}
/* 名前だけの札。略称（太字）は折り返さない。ただし札の幅より長い略称だけは、はみ出さないよう札の中で折る */
.fav-chips{display:flex;flex-wrap:wrap;gap:6px}
.fav-chips>li{min-width:0;max-width:100%}
.fav-chip,.recent-chips a{display:block;min-height:var(--tap-min);padding:11px 14px;border:1px solid var(--color-border);border-radius:var(--radius-control);color:var(--color-text);font-size:14px;line-height:20px}
.fav-chip{max-width:100%;background:var(--color-surface);overflow-wrap:anywhere}
.fav-chip:hover,.recent-chips a:hover{border-color:var(--color-border-input)}
.fav-chip .name-head,.recent-chips .name-head{display:inline-block;max-width:100%;vertical-align:top}
.fav-more{display:inline-flex;align-items:center;min-height:var(--tap-min);margin-top:6px;padding:0 14px;border:1px dashed var(--color-border-input);border-radius:var(--radius-control);background:transparent;color:var(--color-accent);font:inherit;font-size:14px;font-weight:700;white-space:nowrap;cursor:pointer}
.fav-more:hover,.fav-more:active{background:var(--color-surface-sunken)}
/* 最近開いた: 横スクロールの札（端まで広げ、スクロールバーは出さない。上下 var(--space-2) は輪〈3px＋offset 2px＝5px〉が枠に切られないための余白。負の margin と組で、並びは変わらない） */
/* .index ul{margin:0;padding:0}（0,1,1）に負けないよう .index を前に付ける（付けないと枠の padding が 0 になり、輪が切れる） */
.index .recent-chips{position:relative;display:flex;gap:6px;margin:calc(var(--space-2) * -1) calc(var(--pad-r) * -1) calc(var(--space-2) * -1) calc(var(--pad-l) * -1);padding:var(--space-2) var(--pad-r) var(--space-2) var(--pad-l);overflow-x:auto;scrollbar-width:none;scroll-padding-inline:var(--pad-l)}
.recent-chips::-webkit-scrollbar{display:none}
.recent-chips>li{flex:none}
.recent-chips a{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}

/* ---- 分類のタイル ---- */
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,104px),1fr));gap:6px}
.tiles>li{display:flex;min-width:0}
.tile{flex:1;min-width:0;display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"badge count" "name name";align-content:start;gap:var(--space-1) 6px;min-height:64px;padding:var(--space-2) var(--space-2) var(--space-2) 10px;border:1px solid var(--color-border);border-radius:var(--radius-control);background:var(--color-surface);color:var(--color-text)}
.tile:hover,.tile-mini:hover{border-color:var(--color-border-input)}
.tile__badge,.cat-nav__badge,.tile-mini__badge,.cat-view__badge,.calc-row__badge{display:grid;place-items:center;flex:none;background:var(--color-shelf-badge-bg);color:var(--color-shelf-badge-text);font-weight:700}
.tile__badge{grid-area:badge;width:24px;height:24px;border-radius:7px;font-size:var(--font-size-sm)}
.tile__count{grid-area:count;justify-self:end;font-size:var(--font-size-xs);line-height:1.3;color:var(--color-text-muted);font-variant-numeric:tabular-nums}
.tile__name{grid-area:name;font-size:var(--font-size-sm);font-weight:700;line-height:1.3;overflow-wrap:anywhere}

/* ---- 分類の画面 ---- */
.cat-nav{display:none}
.cat-views{min-width:0}
.cat-view{display:flex;flex-direction:column;gap:14px;min-width:0}
.cat-view__back{align-self:flex-start;display:inline-flex;align-items:center;gap:var(--space-1);min-height:var(--tap-min);margin:calc(var(--space-2) * -1) 0 -6px calc(var(--space-2) * -1);padding:0 10px 0 var(--space-1);border:0;border-radius:var(--radius-control);background:transparent;color:var(--color-accent);font:inherit;font-size:14px;font-weight:700;cursor:pointer}
.cat-view__back:hover,.cat-view__back:active{background:var(--color-surface-sunken)}
.cat-view__head{display:flex;align-items:baseline;gap:var(--space-3);min-width:0}
.cat-view__badge{width:48px;height:48px;border-radius:var(--radius-md);font-size:22px}
.cat-view__title{min-width:0;margin:0;font-size:22px;font-weight:700;line-height:var(--line-height-tight);color:var(--color-text);overflow-wrap:anywhere}
.cat-view__count{flex:none;font-size:14px;color:var(--color-text-muted);font-variant-numeric:tabular-nums}
/* 分類の中の検索（10件以上の分類だけ）。入力欄そのものが 44px */
.cat-search{max-width:none}
.cat-search .search__icon{left:var(--space-3);width:18px;height:18px}
.cat-search__input{height:var(--tap-min);padding:0 var(--space-3) 0 38px;border-radius:var(--radius-control)}
/* 型の絞り込み: 横スクロール。上下 var(--space-2) は輪〈3px＋offset 2px＝5px〉が切られないための余白。position:relative は、中の .sr-only（件）が枠の外を基準に置かれて、スクロールの先で画面を横に広げないため */
.type-filter{position:relative;display:flex;gap:6px;margin:calc(var(--space-2) * -1) calc(var(--pad-r) * -1) calc(var(--space-2) * -1) calc(var(--pad-l) * -1);padding:var(--space-2) var(--pad-r) var(--space-2) var(--pad-l);overflow-x:auto;scrollbar-width:none;scroll-padding-inline:var(--pad-l)}
.type-filter::-webkit-scrollbar{display:none}
.type-filter__btn{flex:none;display:inline-flex;align-items:center;gap:6px;min-height:var(--tap-min);padding:0 14px;border:1.5px solid var(--color-border-input);border-radius:var(--radius-pill);background:var(--color-surface);color:var(--color-text);font:inherit;font-size:14px;font-weight:700;white-space:nowrap;cursor:pointer}
.type-filter__btn:hover{background:var(--color-surface-sunken)}
.type-filter__btn[aria-pressed=true]{background:var(--color-brand);border-color:var(--color-brand);color:var(--color-on-brand)}
.type-filter__n{font-size:var(--font-size-xs);font-weight:500;font-variant-numeric:tabular-nums}
.cat-view__zero{margin:0;padding:var(--space-4);border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface);font-size:var(--font-size-md);font-weight:700;line-height:1.6;text-wrap:pretty}

/* ---- 行のリスト（分類の中・検索結果）: 1枚のカードの中を 1px の区切りで並べる。区切りは影でなく線（各行の上と左の線を 1px 重ね、外側は枠の overflow で切る） ---- */
.calc-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr));border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface);overflow:hidden}
.calc-list:not(:has(> li:not([hidden]))){display:none}
.calc-list>li{display:flex;min-width:0;margin:-1px 0 0 -1px;border-top:1px solid var(--color-border);border-left:1px solid var(--color-border)}
.calc-row{flex:1;min-width:0;display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:var(--space-3);row-gap:2px;align-items:start;padding:11px var(--space-4) var(--space-3);color:var(--color-text)}
.calc-row:hover{background:var(--color-row-link-bg)}
.calc-row:focus-visible{outline-offset:-2px}
.calc-row__name{font-size:var(--font-size-md);line-height:1.45;overflow-wrap:anywhere}
.calc-row__meta{display:flex;gap:var(--space-1);padding-top:2px}
.calc-row__sub{grid-column:1 / -1;font-size:var(--font-size-sm);line-height:1.55;color:var(--color-text-muted);text-wrap:pretty;overflow-wrap:anywhere}
.tag{padding:0 6px;border-radius:5px;font-size:var(--font-size-xs);white-space:nowrap}
.tag--old{font-weight:700;line-height:18px;background:var(--color-warn-bg);color:var(--color-warn-text)}
.tag--type{border:1px solid var(--color-border);font-weight:600;line-height:16px;color:var(--color-text-muted)}
/* 一致した部分: 地と文字の色を変え、太字も付ける（色だけに頼らない） */
.calc-list mark{border-radius:3px;background:var(--color-match-bg);color:var(--color-match-text);font-weight:700}

/* ---- 検索中 ---- */
.search-count{margin:0 0 -10px;font-size:var(--font-size-sm);color:var(--color-text-muted)}
.search-count:empty{margin-bottom:calc(var(--space-5) * -1)}
.search-results{grid-template-columns:minmax(0,1fr);max-width:760px}
.calc-row--hit{grid-template-columns:auto minmax(0,1fr) auto;padding:var(--space-3) var(--space-4)}
.calc-row--hit .calc-row__badge{grid-column:1;grid-row:1 / span 3;width:30px;height:30px;border-radius:var(--radius-sm);font-size:14px}
.calc-row--hit .calc-row__name{grid-column:2;grid-row:1;font-size:var(--font-size-input)}
.calc-row--hit .calc-row__meta{grid-column:3;grid-row:1}
.calc-row--hit .calc-row__sub{grid-column:2 / -1;grid-row:2}
.calc-row__cats{grid-column:2 / -1;grid-row:3;font-size:var(--font-size-xs);color:var(--color-text-muted);overflow-wrap:anywhere}
/* ↑↓ で選んでいる行: 地の色に加え、選んだ（aria-selected）行は内側に輪を出す */
.search-results>li[data-active]>.calc-row{background:var(--color-row-link-bg)}
.search-results>li[aria-selected=true]>.calc-row{outline:2px solid var(--color-focus);outline-offset:-2px}
.search-empty{display:flex;flex-direction:column;gap:14px;max-width:760px}
.search-empty__msg{margin:0;padding:18px;border:1px solid var(--color-border);border-radius:14px;background:var(--color-surface);font-size:var(--font-size-input);font-weight:700;line-height:1.6;text-wrap:pretty}
.search-empty__lead{margin:6px 0 0;font-size:14px;font-weight:700;color:var(--color-text-muted)}
.tiles--mini{grid-template-columns:repeat(auto-fill,minmax(min(100%,152px),1fr));gap:var(--space-2)}
.tile-mini{flex:1;min-width:0;display:flex;align-items:center;gap:10px;min-height:var(--tap-comfort);padding:6px 10px;border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface);color:var(--color-text)}
.tile-mini__badge{width:32px;height:32px;border-radius:var(--radius-sm);font-size:var(--font-size-md)}
.tile-mini__name{min-width:0;font-size:14px;font-weight:700;overflow-wrap:anywhere}

/* ---- PC（幅 960px 以上）: 余白が広がり、分類の画面に左の欄（幅 240px）が出る ---- */
@media (min-width: 960px) {
  main.index{--pad-l:calc(var(--space-8) + env(safe-area-inset-left, 0px));--pad-r:calc(var(--space-8) + env(safe-area-inset-right, 0px));max-width:1120px;margin:0 auto;padding-top:28px;padding-bottom:calc(var(--space-10) + var(--safe-bottom))}
  .cat-layout{display:grid;grid-template-columns:240px minmax(0,1fr);gap:var(--space-6);align-items:start}
  .cat-nav{display:block;position:sticky;top:var(--space-4);max-height:calc(100vh - var(--space-8));max-height:calc(100dvh - var(--space-8));padding:var(--space-2);overflow-y:auto;border:1px solid var(--color-border);border-radius:14px;background:var(--color-surface)}
  .cat-nav ul{display:flex;flex-direction:column;gap:2px}
  /* 分類の中を探している間（index-page.js が data-cat-search-active を付ける）: 件数の行と結果の一覧は .cat-layout の外にあるので、
     .cat-layout を display:contents にして main の grid に左の欄・本文・件数・結果を並べ直す。欄は右の列の全行にまたがり、結果は本文の列の上の方に出る */
  main.index[data-cat-search-active]{display:grid;grid-template-columns:240px minmax(0,1fr);grid-template-rows:auto auto auto auto minmax(0,1fr);column-gap:var(--space-6);row-gap:var(--space-5);align-items:start}
  main.index[data-cat-search-active] > .intro{grid-column:1 / -1}
  main.index[data-cat-search-active] > .cat-layout{display:contents}
  main.index[data-cat-search-active] .cat-nav{grid-column:1;grid-row:2 / -1}
  main.index[data-cat-search-active] .cat-views,main.index[data-cat-search-active] > .search-count,main.index[data-cat-search-active] > .search-results{grid-column:2}
  main.index[data-cat-search-active] .cat-views{grid-row:2}
  main.index[data-cat-search-active] > .search-count{grid-row:3}
  main.index[data-cat-search-active] > .search-results{grid-row:4;width:100%}
  /* 押せる範囲は 44px（README の 36px より大きい。26 件が画面に収まらない分は欄の中でスクロール） */
  .cat-nav a{display:flex;align-items:center;gap:10px;min-height:var(--tap-min);padding:2px var(--space-2);border-radius:var(--radius-sm);font-size:var(--font-size-sm);font-weight:500}
  .cat-nav a:hover{background:var(--color-row-link-bg)}
  .cat-nav a[aria-current=page]{background:var(--color-brand-soft);color:var(--color-brand);font-weight:700}
  .cat-nav__badge{width:26px;height:26px;border-radius:7px;font-size:var(--font-size-sm)}
  .cat-nav__name{flex:1;min-width:0}
  .cat-nav__count{font-size:var(--font-size-xs);font-weight:500;color:var(--color-text-muted);font-variant-numeric:tabular-nums}
  .cat-nav a[aria-current=page] .cat-nav__count{color:inherit}
  /* 欄の横幅いっぱいに広げた型の絞り込みは、PC では本文の幅に収める */
  .type-filter{margin-inline:calc(var(--space-2) * -1);padding-inline:var(--space-2);scroll-padding-inline:var(--space-2)}
}

/* ---- JS が無いとき（render-index.js の <noscript><style> が 26 分類を全部見せる。台帳 Ruling 11） ----
   その規則は [data-cat-layout][hidden]{display:block!important}。PC では左の欄と並べるため、同じ !important を強い指定で grid に戻す */
@media (scripting: none) {
  .cat-view + .cat-view{margin-top:var(--space-10)}
}
@media (scripting: none) and (min-width: 960px) {
  .app .cat-layout[data-cat-layout]{display:grid!important}
}

/* 計算ページの見た目（計画6 Task 7。docs/design/3-Claude-designから受け取った/README.md §4 と mock/CalcForm.dc.html・pattern-b.dc.html の寸法）。
   色・同じ値のトークンがある大きさは var()。トークンの段に無い部品固有の寸法（札の高さ 30px・数値欄 148px など README が px で決めた値）は px のまま（台帳 Ruling 6）。
   影は結果の固定欄（--shadow-strip）とトーストだけ。ダークは tokens のダークの値で自動。PC の切り替えは幅 960px。
   構造: main.calc > div.calc__main（見出し・旧版の案内・結果の固定欄・入力・計算式）／aside.calc-aside（判定の表。PC は右の列）／注意・出典・免責。
   結果の固定欄: スマホ（960px 未満）は div.calc__main を display:contents にして main.calc の直接の子として並べ、ページの最後（免責の手前）まで貼りつく。
   PC は固定欄と入力が同じ div.calc__main（flex の列）の中にあり、position: sticky が動ける範囲はその中（見出しから計算式の終わりまで。右の列は別に aside の sticky）。 */

/* ---- ページの枠 ---- */
body[data-page="calc"] .app{height:auto}
.calc{--pad-l:calc(var(--space-4) + env(safe-area-inset-left, 0px));--pad-r:calc(var(--space-4) + env(safe-area-inset-right, 0px));display:flex;flex-direction:column;gap:22px;width:100%;max-width:720px;margin:0 auto;padding:14px var(--pad-r) calc(var(--space-6) + var(--safe-bottom)) var(--pad-l)}
.calc > *{min-width:0}
.calc__main{display:flex;flex-direction:column;gap:var(--space-3);min-width:0}
.line-slot{margin:0}

/* ---- 見出し ---- */
.calc-head{display:flex;align-items:flex-start;gap:var(--space-3)}
.calc-head__text{flex:1;min-width:0}
.calc-head__title{margin:0;font-size:var(--font-size-xl);font-weight:400;line-height:var(--line-height-tight);color:var(--color-text);overflow-wrap:anywhere}
.calc-head__head{font-weight:700}
.calc-head__sub{margin:var(--space-1) 0 0;font-size:var(--font-size-sm);line-height:var(--line-height-body);color:var(--color-text-muted);text-wrap:pretty}
.fav-btn{flex:none;display:inline-flex;align-items:center;gap:5px;min-height:var(--tap-min);margin-top:calc(var(--space-1) * -1);padding:0 10px;border:1.5px solid var(--color-border-input);border-radius:var(--radius-control);background:var(--color-surface);color:var(--color-text);font:inherit;font-size:var(--font-size-sm);font-weight:700;cursor:pointer;transition:background-color var(--duration-fast) var(--ease),border-color var(--duration-fast) var(--ease)}
.fav-btn[aria-pressed="true"]{border-color:var(--color-brand);background:var(--color-brand-soft);color:var(--color-brand)}
.fav-btn .icon,.fav-btn svg{flex:none}

/* ---- 旧版の案内 ---- */
.calc-old{display:flex;align-items:flex-start;gap:10px;margin:0;padding:var(--space-3) 14px;border:1.5px solid var(--color-warn-line);border-radius:var(--radius-md);background:var(--color-warn-bg);color:var(--color-warn-text);font-size:14px;line-height:var(--line-height-body);font-weight:700}
.calc-old svg{flex:none;width:20px;height:20px;margin-top:2px}
.app .calc-old a{color:inherit;text-decoration:underline;text-underline-offset:3px}

/* ---- 結果の固定欄（スマホは左右いっぱい。上端に貼りつく） ---- */
/* 高さの上限 40vh はトークンに無い値で直書き（台帳 Ruling 6・30）。出力の多いページで欄が入力を覆う・画面より高くなるのを防ぎ、超えた分は欄の中をスクロールする。dvh を後に書き、対応しない端末は vh */
.result-strip{position:sticky;top:var(--safe-top);z-index:4;max-height:40vh;max-height:40dvh;overflow-y:auto;overscroll-behavior:contain;display:flex;flex-direction:column;gap:var(--space-2);margin:0 calc(var(--pad-r) * -1) 0 calc(var(--pad-l) * -1);padding:6px var(--pad-r) var(--space-2) var(--pad-l);background:var(--color-surface);border-bottom:1px solid var(--color-border);box-shadow:var(--shadow-strip)}
/* 縦の flex の子は高さの上限で縮むので縮めない（入力の札の枠など overflow を持つ子が潰れて押せる範囲が切れる） */
.result-strip > *{flex-shrink:0}
/* コピーのボタンは上揃え。縦中央だと背の高い欄（上限 40% で欄の中をスクロールする）で最初の見える範囲の外に出る。見本 pattern-b.dc.html の copyAlign は出力が複数のときだけ上揃えだが、出力が1つでも注意文などで高い欄があるので常に上揃え */
.result-strip__main{display:flex;align-items:flex-start;gap:var(--space-2)}
.result{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--space-1)}
.result__line{display:flex;align-items:center;gap:0 10px;min-height:var(--tap-min)}
.result__label{flex:0 1 auto;max-width:55%;overflow-wrap:break-word;font-size:var(--font-size-sm);font-weight:700;color:var(--color-text-muted)}
.result__line:not(.result__line--solo) > .result__label{min-width:2.8em}
.result__body{display:flex;flex-wrap:wrap;align-items:center;gap:6px var(--space-3);min-width:0}
.result__value{min-width:0;overflow-wrap:anywhere;font-size:var(--font-size-2xl);font-weight:800;line-height:1;letter-spacing:-.01em;font-variant-numeric:tabular-nums;color:var(--color-text)}
.result__unit{font-size:var(--font-size-sm);font-weight:700;color:var(--color-text)}
.result__value + .result__unit{margin-left:-9px}
.result__verdict{padding:3px 10px;border-radius:var(--radius-control);background:var(--color-brand-soft);color:var(--color-brand);font-size:14px;font-weight:800;line-height:1.3;overflow-wrap:anywhere}
.result__detail{font-size:var(--font-size-sm);color:var(--color-text-muted)}
.result__line--solo .result__value{font-size:40px}
.result__line--solo .result__unit{font-size:var(--font-size-input)}
.result__line--solo .result__verdict{padding:5px var(--space-3);font-size:18px}
.result__pending{font-size:var(--font-size-xl);font-weight:700;line-height:1.3;color:var(--color-text);cursor:pointer}
.result__error{font-size:14px;font-weight:700;line-height:1.4;color:var(--color-danger-text)}
.result__warn{display:flex;align-items:flex-start;gap:6px;margin:0;font-size:var(--font-size-sm);font-weight:700;line-height:1.5;color:var(--color-warn-text)}
.result__warn svg{flex:none;margin-top:1px}

/* 記録用にコピー（アイコン＋常に「コピー」。押せる範囲 44×44。結果が出ているときだけ見える） */
.copy-btn{flex:none;display:inline-flex;align-items:center;justify-content:center;gap:5px;min-width:var(--tap-min);height:var(--tap-min);margin-right:-10px;padding:0 10px;border:0;border-radius:var(--radius-control);background:transparent;color:var(--color-accent);font:inherit;font-size:var(--font-size-xs);font-weight:700;white-space:nowrap;cursor:pointer;transition:background-color var(--duration-fast) var(--ease)}
.copy-btn:hover{background:var(--color-surface-sunken)}
.copy-btn:disabled{visibility:hidden}
.copy-btn[data-state="ok"]{color:var(--color-ok-text)}
.copy-btn[data-state="fail"]{color:var(--color-danger-text)}
/* コピーの結果の文（成功・失敗・記録文）は欄の最下部の行。背の高い欄では欄の外に出るので、最下部に貼りつけて常に見える範囲に置く（出力の少ない欄では貼りつく必要がなく今のまま） */
.result-strip__status{position:sticky;bottom:0;z-index:1;margin:0;background:var(--color-surface);font-size:var(--font-size-sm);font-weight:700;line-height:var(--line-height-body)}
.result-strip__status:has([data-copy-status]:empty){display:none}
.result-strip:has(.copy-btn[data-state="ok"]) [data-copy-status]{color:var(--color-ok-text)}
.result-strip:has(.copy-btn[data-state="fail"]) [data-copy-status]{color:var(--color-danger-text)}
.copy-record{display:block;margin-top:var(--space-1);font-weight:600;color:var(--color-text);max-height:calc(40vh - 4.5rem);max-height:calc(40dvh - 4.5rem);overflow-y:auto;overscroll-behavior:contain}
/* 記録文は欄の上限（40%）に収まる高さで止め、超えた分は文の中をスクロールする（貼りつく文の行が欄より高くならないように。タップで全文を選べるので全文はコピーできる） */

/* 入力の状況の札（横スクロール。札は見た目 30px（枠線 1px を含む）、押せる範囲は ::before で枠線の外へ上下 7px・左右 2px 広げて 44px。::before の位置は枠線の内側から測るので 8px・3px）。
   押せる範囲と輪（3px＋offset 2px）が枠に切られないよう、枠の padding で確保する（上下 7px・左右 6px、同じだけ負の margin で位置は動かさない）。
   .sr-only（position:absolute）が枠の中で画面を横に広げないよう position:relative */
.item-map{position:relative;display:flex;gap:var(--space-1);margin:-7px -6px;padding:7px 6px;list-style:none;overflow-x:auto;scrollbar-width:none;-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent)}
.item-map::-webkit-scrollbar{display:none}
.item-map > li{flex:none}
.item-map button{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:var(--space-1);min-width:40px;min-height:30px;padding:0 9px;border:1px dashed var(--color-pending-line);border-radius:7px;background:transparent;color:var(--color-text-muted);font:inherit;font-size:var(--font-size-xs);font-weight:700;white-space:nowrap;cursor:pointer}
.item-map button::before{content:"";position:absolute;top:-8px;bottom:-8px;left:-3px;right:-3px}
.item-map [data-state="done"] button{border-color:transparent;border-style:solid;background:var(--color-surface-sunken)}
.item-map [data-state="error"] button{border-style:solid;border-color:var(--color-danger-line);background:var(--color-danger-bg);color:var(--color-danger-text)}
.item-map [data-state="skipped"] button{border-style:solid;border-color:var(--color-mark-check-line);background:var(--color-mark-check-bg);color:var(--color-mark-check-text)}

/* ---- 入力 ---- */
.calc-form{display:flex;flex-direction:column;margin:0}
.calc-form > .calc-section{margin-top:14px}
.calc-form > button[hidden] + .calc-section{margin-top:0}
.calc-section{display:flex;flex-direction:column}
.calc-section__head{display:flex;align-items:center;gap:10px;padding:var(--space-1) 0 var(--space-2)}
.calc-section__title{margin:0;font-size:14px;font-weight:700;letter-spacing:.02em;color:var(--color-brand)}
.calc-section__count{margin-left:auto;padding:1px var(--space-2);border-radius:var(--radius-pill);background:var(--color-surface-sunken);color:var(--color-text-muted);font-size:var(--font-size-xs);font-weight:700;font-variant-numeric:tabular-nums}
.calc-section__count[data-state="complete"]{background:var(--color-ok-bg);color:var(--color-ok-text)}
.field{min-width:0;margin:0;padding:var(--space-2) 0;border:0;border-top:1px solid var(--color-border)}
.field__line{display:flex;flex-wrap:wrap;align-items:center;gap:6px var(--space-3)}
.field__head{flex:1 1 150px;min-width:0;display:flex;align-items:flex-start;gap:var(--space-2);margin:0;padding:0}
.field--row .field__head{flex-basis:min(var(--label-basis, 150px), 100%)}
.field__label{flex:0 1 auto;min-width:0;display:block;margin:0;padding:0;font-size:var(--font-size-md);font-weight:600;line-height:1.45;color:var(--color-text);overflow-wrap:anywhere;text-wrap:pretty}
.field--row .field__label{flex:1 1 auto}
.field__optional{margin-left:var(--space-1);font-size:var(--font-size-sm);font-weight:400;color:var(--color-text-muted)}
.field__range{flex:none;align-self:baseline;font-size:var(--font-size-xs);color:var(--color-text-muted);font-variant-numeric:tabular-nums}
.field__flag{flex:none;padding:1px 7px;border:1px solid var(--color-mark-check-line);border-radius:6px;background:var(--color-mark-check-bg);color:var(--color-mark-check-text);font-size:var(--font-size-xs);font-weight:700;line-height:18px}
.field__hint{margin:6px 0 0 26px;font-size:var(--font-size-sm);line-height:var(--line-height-body);font-weight:400;color:var(--color-text-muted)}
.field > legend.field__head{float:left;width:100%}

/* 状態の丸（18px）。未入力＝破線＋番号／入力済み＝塗り＋✓／誤り＝塗り＋!／入れ忘れ＝黄＋番号（番号は入力の状況の札と同じ。render-calc.js の data-no） */
.field__status{flex:none;display:grid;place-items:center;width:18px;height:18px;margin-top:2px;border:2px dashed var(--color-pending-line);border-radius:50%;background:transparent}
.field[data-state="pending"] .field__status::after,.field[data-state="skipped"] .field__status::after{content:attr(data-no);font-size:10px;font-weight:700;line-height:1;letter-spacing:-.04em;font-variant-numeric:tabular-nums;color:var(--color-text-muted)}
.field[data-state="skipped"] .field__status::after{color:var(--color-mark-check-text)}
.field[data-state="done"] .field__status{border:2px solid var(--color-accent);background:var(--color-accent)}
.field[data-state="done"] .field__status::after{content:"";width:4px;height:8px;border:solid var(--color-on-accent);border-width:0 2px 2px 0;transform:translateY(-1px) rotate(45deg)}
.field[data-state="error"] .field__status{border:2px solid var(--color-danger-line);background:var(--color-danger-line)}
.field[data-state="error"] .field__status::after{content:"";width:2px;height:9px;background:linear-gradient(var(--color-on-accent),var(--color-on-accent)) top/100% 5px no-repeat,linear-gradient(var(--color-on-accent),var(--color-on-accent)) bottom/100% 2px no-repeat}
.field[data-state="skipped"] .field__status{border:2px solid var(--color-mark-check-line);background:var(--color-mark-check-bg)}

/* 見えない radio／checkbox は label いっぱいに重ねる（label 全体が押せる範囲。画面のテストの check() も input に当たる）。輪は base.css の label:has(> input:focus-visible） */
.seg__opt > input,.choice__opt > input,.pick__opt > input,.check > input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}

/* 2択（あり／なし・性別など）。ラベルが長いと切り替えがラベルの下に回って右寄せ */
.seg{display:flex;flex-wrap:nowrap;max-width:100%;margin-left:auto;border:1.5px solid var(--color-border-input);border-radius:var(--radius-control);background:var(--color-surface)}
.field[data-state="pending"] .seg{border-style:dashed;border-color:var(--color-pending-line)}
.field[data-state="skipped"] .seg{border-color:var(--color-mark-check-line)}
.seg__opt{position:relative;display:flex;flex:0 1 auto;align-items:center;justify-content:center;gap:5px;min-width:60px;min-height:var(--tap-min);padding:0 var(--space-3) 0 11px;background:var(--color-surface);color:var(--color-text);font-size:var(--font-size-md);font-weight:500;line-height:1.2;text-align:center;cursor:pointer;transition:background-color var(--duration-fast) var(--ease)}
.seg__label{min-width:0;overflow-wrap:anywhere}
.seg__pts{flex:none}
.field--yesno .seg__opt{min-width:64px}
.seg__opt + .seg__opt{border-left:1.5px solid var(--color-border)}
.seg__opt:first-child{border-radius:8.5px 0 0 8.5px}
.seg__opt:last-child{border-radius:0 8.5px 8.5px 0}
.seg__opt:has(input:checked){background:var(--color-selected-bg);font-weight:700}
.seg__opt:has(input[value="yes"]:checked){background:var(--color-yes-bg);color:var(--color-on-yes)}
.seg__opt:has(input[value="yes"]:checked)::before{content:"";flex:none;width:4px;height:8px;margin:-2px 2px 0 0;border:solid currentColor;border-width:0 2px 2px 0;transform:rotate(45deg)}
.seg__pts{font-size:var(--font-size-sm);font-weight:700;font-variant-numeric:tabular-nums;color:var(--color-text-muted)}
.seg__opt:has(input[value="yes"]:checked) .seg__pts{color:var(--color-on-yes)}

/* 3択以上（点数つき）。縦に積む */
.choice,.pick{clear:both;display:flex;flex-direction:column;padding-top:var(--space-2)}
.choice{gap:var(--space-1)}
.pick{gap:10px}
.choice__opt,.pick__opt,.check{position:relative;display:flex;align-items:center;gap:10px;min-height:var(--tap-min);border:1.5px solid var(--color-border);border-radius:9px;background:var(--color-surface);color:var(--color-text);font-size:14px;font-weight:500;line-height:1.45;cursor:pointer}
.field[data-state="pending"] .choice__opt,.field[data-state="pending"] .pick__opt{border-style:dashed;border-color:var(--color-pending-line)}
.field[data-state="skipped"] .choice__opt,.field[data-state="skipped"] .pick__opt{border-color:var(--color-mark-check-line)}
.choice__opt:has(input:checked),.pick__opt:has(input:checked),.check:has(input:checked){border-color:var(--color-selected-line);background:var(--color-selected-bg);font-weight:700}
.choice__opt{padding:7px var(--space-3)}
.choice__radio{flex:none;display:grid;place-items:center;width:18px;height:18px;border:2px solid var(--color-border-input);border-radius:50%}
.choice__radio::after{content:"";width:8px;height:8px;border-radius:50%;background:transparent}
.choice__opt:has(input:checked) .choice__radio{border-color:currentColor}
.choice__opt:has(input:checked) .choice__radio::after{background:currentColor}
.choice__label,.pick__label{flex:1;min-width:0;text-wrap:pretty;overflow-wrap:anywhere}
.choice__pts{flex:none;font-size:var(--font-size-sm);font-weight:700;font-variant-numeric:tabular-nums;color:var(--color-text-muted)}

/* 段階を1つ選ぶ（JCS） */
.pick__group{display:flex;flex-direction:column;gap:var(--space-1)}
.pick__group-title{margin:0;font-size:var(--font-size-xs);font-weight:700;color:var(--color-text-muted)}
.pick__opt{padding:var(--space-1) 10px var(--space-1) var(--space-1)}
.pick__num{flex:none;display:grid;place-items:center;min-width:46px;height:34px;border-radius:7px;background:var(--color-surface-sunken);color:var(--color-text);font-size:var(--font-size-input);font-weight:700;font-variant-numeric:tabular-nums}
.pick__opt:has(input:checked) .pick__num{background:var(--color-brand);color:var(--color-on-brand)}

/* 付け足しの2択（任意。チェックボックス） */
.field--checks .field__line{flex-wrap:nowrap;align-items:center}
.field--checks .field__status{margin-top:0}
.check{flex:1;min-width:0;padding:6px var(--space-3)}
.check__box{flex:none;display:grid;place-items:center;width:20px;height:20px;border:2px solid var(--color-border-input);border-radius:5px}
.check:has(input:checked) .check__box{border-color:var(--color-brand);background:var(--color-brand)}
.check:has(input:checked) .check__box::after{content:"";width:5px;height:9px;border:solid var(--color-on-brand);border-width:0 2px 2px 0;transform:translateY(-1px) rotate(45deg)}
.check__label{flex:1;min-width:0;overflow-wrap:anywhere}

/* 数値（148px の入力欄。枠は .num が持ち、入力欄は枠の内側いっぱい（高さ 44px）にして、欄のどこを押しても入力できる） */
.num{--bw:1.5px;flex:0 0 148px;min-width:0;margin-left:auto;display:flex;align-items:center;gap:6px;height:var(--tap-min);padding:0 var(--space-3);border:var(--bw) solid var(--color-border-input);border-radius:var(--radius-control);background:var(--color-surface)}
.num:hover{border-color:var(--color-text-muted)}
.num:focus-within{outline:3px solid var(--color-focus);outline-offset:2px}
.field[data-state="done"] .num{background:var(--color-filled-bg)}
.field[data-state="skipped"] .num{border-style:dashed;border-color:var(--color-mark-check-line)}
.field:has(.field__msg[data-level="warning"]:not([hidden])) .num{--bw:2px;border-color:var(--color-warn-line)}
.field[data-invalid] .num{--bw:2px;border-color:var(--color-danger-line)}
.num__input{flex:1;min-width:var(--tap-min);width:0;align-self:stretch;margin:calc(var(--bw) * -1) 0;padding:0;border:0;background:transparent;color:var(--color-text);font:inherit;font-size:var(--font-size-lg);font-weight:600;text-align:right;font-variant-numeric:tabular-nums}
.app .num__input:focus-visible{outline:0}
.num__unit{flex:0 1 auto;min-width:0;max-width:60%;font-size:var(--font-size-sm);line-height:1.25;color:var(--color-text-muted);text-align:right;overflow-wrap:anywhere}

/* 誤り／警告の文（欄の下）。形でも区別する: 誤り＝丸の!、警告＝三角の!（色だけで伝えない） */
.field__msg{display:flex;align-items:flex-start;gap:var(--space-2);margin:var(--space-2) 0 0;padding:var(--space-2) var(--space-3);border-radius:var(--radius-sm);font-size:14px;font-weight:600;line-height:1.55;overflow-wrap:anywhere}
.field__msg-text{flex:1;min-width:0}
.field__msg::before{content:"";flex:none;width:18px;height:18px;margin-top:2px}
.field__msg[data-level="error"]{background:var(--color-danger-bg);color:var(--color-danger-text)}
.field__msg[data-level="error"]::before{box-sizing:border-box;border:2px solid currentColor;border-radius:50%;background:linear-gradient(currentColor,currentColor) 6px 3px/2px 6px no-repeat,linear-gradient(currentColor,currentColor) 6px 10px/2px 2px no-repeat}
.field__msg[data-level="warning"]{background:var(--color-warn-bg);color:var(--color-warn-text)}
.field__msg[data-level="warning"]::before{height:16px;clip-path:polygon(50% 0,100% 100%,0 100%);background:linear-gradient(var(--color-warn-bg),var(--color-warn-bg)) 8px 6px/2px 5px no-repeat,linear-gradient(var(--color-warn-bg),var(--color-warn-bg)) 8px 12px/2px 2px no-repeat,currentColor}

/* 入力の下のボタン */
.calc-actions{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:14px}
.calc-actions__fill,.calc-actions__clear{min-height:var(--tap-min);border-radius:var(--radius-control);font:inherit;font-size:14px;font-weight:600;cursor:pointer;transition:background-color var(--duration-fast) var(--ease)}
.calc-actions__fill{padding:0 14px;border:1.5px solid var(--color-border-input);background:var(--color-surface);color:var(--color-text)}
.calc-actions__clear{display:inline-flex;align-items:center;gap:6px;padding:0 var(--space-3);border:1.5px solid transparent;background:transparent;color:var(--color-text-muted)}
.calc-actions__fill:hover,.calc-actions__clear:hover{background:var(--color-surface-sunken)}

/* ---- 計算式・判定の表 ---- */
.calc-formula,.calc-table,.calc-table-group{margin-top:10px}
.calc-formula h2,.calc-table h2,.calc-table-group h2,.calc-notes h2{margin:0 0 10px;font-size:var(--font-size-input);font-weight:700;line-height:var(--line-height-tight);color:var(--color-text)}
.calc-formula ul{display:flex;flex-direction:column;gap:10px;margin:0;padding:14px var(--space-4);list-style:none;border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface)}
.calc-formula li{font-size:14px;line-height:var(--line-height-note);text-wrap:pretty;overflow-wrap:anywhere}
.table-wrap{max-width:100%;margin:0;overflow-x:auto;border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface)}
.data{width:100%;border-collapse:collapse;font-size:14px;line-height:1.5}
.data th{padding:9px 14px;background:var(--color-surface-sunken);color:var(--color-text-muted);font-size:var(--font-size-xs);font-weight:600;text-align:left}
.data td{padding:10px 14px;border-top:1px solid var(--color-border);vertical-align:top;text-align:left;overflow-wrap:anywhere}
.data td:first-child{font-variant-numeric:tabular-nums}
.data tr[aria-current="true"]{background:var(--color-row-editing-bg)}
.data tr[aria-current="true"] td{font-weight:700}
.now-badge{display:inline-block;margin-left:var(--space-2);padding:1px var(--space-2);border-radius:var(--radius-pill);background:var(--color-brand);color:var(--color-on-brand);font-size:var(--font-size-xs);font-weight:700;line-height:1.5;vertical-align:1px}
.calc-table__foot{margin:var(--space-2) 2px 0;padding:0;list-style:none;font-size:var(--font-size-sm);line-height:var(--line-height-body)}
.calc-table__foot li[aria-current="true"]{font-weight:700}
.calc-table-group{display:flex;flex-direction:column;gap:var(--space-2)}
.calc-table-group h2{margin-bottom:var(--space-1)}
.calc-table--fold{margin:0;border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface);overflow:hidden}
.calc-table--fold summary{display:flex;align-items:center;gap:10px;min-height:var(--tap-min);padding:0 14px;list-style:none;font-size:14px;font-weight:600;cursor:pointer}
.calc-table--fold summary::-webkit-details-marker{display:none}
.calc-table--fold summary::before{content:"";flex:none;width:7px;height:7px;margin:0 3px 0 1px;border:solid var(--color-text-muted);border-width:0 2px 2px 0;transform:rotate(-45deg);transition:transform var(--duration-fast) var(--ease)}
.calc-table--fold[open] summary::before{transform:rotate(45deg)}
.app .calc-table--fold summary:focus-visible{outline-offset:-3px}
.calc-table__fold-title{flex:1;min-width:0;overflow-wrap:anywhere}
.calc-table__fold-now{flex:none;padding:1px var(--space-2);border-radius:var(--radius-pill);background:var(--color-brand-soft);color:var(--color-brand);font-size:var(--font-size-xs);font-weight:700}
.calc-table--fold .table-wrap{border:0;border-radius:0}

/* ---- 注意・出典・免責 ---- */
.calc-notes{padding:var(--space-4) 18px;border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface)}
.calc-notes h2{display:flex;align-items:center;gap:var(--space-2);margin-bottom:var(--space-3)}
.calc-notes h2 svg{flex:none;color:var(--color-accent)}
.calc-notes ul{display:flex;flex-direction:column;gap:var(--space-3);margin:0;padding:0;list-style:none}
.calc-notes li{display:grid;grid-template-columns:6px minmax(0,1fr);gap:var(--space-3);font-size:var(--font-size-md);line-height:var(--line-height-note);text-wrap:pretty;overflow-wrap:anywhere}
.calc-notes li::before{content:"";width:6px;height:6px;margin-top:11px;border-radius:2px;background:var(--color-accent)}
.calc-refs h2{margin:0 0 6px;font-size:var(--font-size-sm);font-weight:700;color:var(--color-text-muted)}
.calc-refs ol{display:flex;flex-direction:column;gap:6px;margin:0;padding-left:1.4em;font-size:var(--font-size-xs);line-height:1.7;color:var(--color-text-muted)}
.calc-refs li{overflow-wrap:anywhere}
.app .calc-refs a{color:var(--color-accent)}
.source__kind{margin-left:var(--space-1)}
.source__reuse{margin:var(--space-1) 0 0;font-size:var(--font-size-xs);color:var(--color-text-muted)}
.calc__credit{margin:var(--space-2) 0 0;font-size:var(--font-size-xs);line-height:1.7;color:var(--color-text-muted);overflow-wrap:anywhere}
.calc__checked{margin:var(--space-2) 0 0;font-size:var(--font-size-xs);color:var(--color-text-muted)}
.calc-disclaimer{padding:14px var(--space-4);border-radius:var(--radius-md);background:var(--color-surface-sunken);color:var(--color-text-muted);font-size:var(--font-size-sm);line-height:var(--line-height-note)}
.calc-disclaimer p{margin:0;text-wrap:pretty}
.noscript{margin:var(--space-4);color:var(--color-danger-text)}

/* 数字＋単位＋以上／以下／未満／超 は途中で改行しない（render-calc.js の nbEsc が span.nb で囲む） */
.nb{white-space:nowrap}

/* ---- スマホ（幅 960px 未満）: 1列。calc__main は枠を作らず、全部が main.calc の直接の子（固定欄の動ける範囲がページ全体になる）。本文の縦の間隔は 12px、判定の表・注意・出典・免責の前は 22px ---- */
@media (max-width: 959.98px){
  .calc{gap:var(--space-3)}
  .calc__main{display:contents}
  .calc > :is(.calc-aside,.calc-notes,.calc-refs,.calc-disclaimer){margin-top:10px}
}

/* ---- PC（幅 960px 以上）: 2列。左に本文、右に判定の表だけ ---- */
@media (min-width: 960px){
  .calc{--pad-l:calc(var(--space-8) + env(safe-area-inset-left, 0px));--pad-r:calc(var(--space-8) + env(safe-area-inset-right, 0px));padding-top:var(--space-6)}
  .calc-head__title{font-size:26px}
  .result-strip{margin:0;padding:var(--space-2) var(--space-4);border-top:1px solid var(--color-border);border-radius:0 0 14px 14px}
  .calc:has(> .calc-aside){display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,420px);column-gap:var(--space-10);row-gap:0;align-items:start;max-width:1200px}
  .calc:has(> .calc-aside) > *{grid-column:1}
  .calc:has(> .calc-aside) > :not(.calc__main){margin-top:22px}
  .calc:has(> .calc-aside) > .calc-aside{grid-column:2;grid-row:1 / span 4;margin-top:0;position:sticky;top:var(--space-3);max-height:calc(100vh - var(--space-6));max-height:calc(100dvh - var(--space-6));overflow-y:auto;padding:6px 6px var(--space-4) 6px}
  .calc-aside > :first-child{margin-top:0}
}