/* ============================================================================
   style.css — 敏腕事務OCR 共通コンポーネントCSS（P3-W1正本）
   出典: internal/mockups/2026-07-30_yomitoki_meijin/mock.html の <style>（岡田承認済み）。
   変数（色・フォント）は tokens.css を参照する。ここにベタ書きしない。

   🔴 ファイル境界（P3_BOARD.md・2026-07-31 PMO裁定）:
   このファイルの「共通コンポーネント」（ボタン・チップ・カード・テーブル・モーダル・
   トースト・フォーム部品・空状態・シェル/サイドバー・ログイン・見出し）は
   P3-W1（このファイルの作者）が作った既存クラスを変更しない。
   W2（review.js）・W3（jobs.js）・W4（templates/members/report/login.js）は、
   自分の画面固有のコンポーネント（例: 確認画面のbbox/明細ドロワー、テンプレートのtcard、
   レポートのchart等）を**このファイルの末尾に追記してよい**。既存クラスの改変・
   トークン変数の追加はPMOに相談すること（衝突・意図しない全画面への影響を防ぐため）。

   利用可能な共通クラス一覧（W2〜W4はこれを使い、JSで自作しない）:
     ボタン: .btn（.btn--pri/--sec/--gh/--dark/--navy・.sm/.lg・.w100）
     チップ/ドット: .chip（.chip--ok/--warn/--err/--blue/--mute/--new）・.dot（.ok/.warn/.err/.edit/.gray/.ink）
     カード/一覧: .card・.seg（.sm）・table.tbl・.num（数値の等幅表示）・.backlink
     通知: .notice（.notice--warn/--err/--blue）
     モーダル: .mbg > .modal（.wide/.xl）> .mline（.navy）+ .mhead + .mbody + .mfoot
       フォーム部品: .fld・.inp（.n=数字・.err=エラー時）・textarea.inp・.two/.three（グリッド）・
       .inline-err・.hint・.optlist/.opt（ラジオ選択カード）・.exlist/.exbtn（例文ボタン）・
       .credbox/.credrow（発行結果の表示）・.spin（ローディングアイコン）・.slider・details.adv
     トースト: #toast（ui.toast()経由で使う。直接innerHTML操作しない）
     見出し: .wrap（.wide）・.phead・.ptitle・.plede・.h3・.eyebrow・.jalabel（tokens.cssにあり）
     空状態: .empty（ui.emptyState()が生成する）
     シェル: .shell・.side・.nitem・.quota（.full）・.userbox・.ava（.flat/.mute）・main・.view（.on/.col）
   ============================================================================ */

/* ---------- 画面切替（screen） ---------- */
.screen{display:none;position:fixed;inset:0}
.screen.on{display:flex}

/* ---------- ローディングバー（api.jsのリクエスト中に自動表示） ---------- */
.loadingbar{position:fixed;top:0;left:0;right:0;height:2px;z-index:200;overflow:hidden;background:var(--nvl-bg-light)}
.loadingbar::after{content:"";position:absolute;top:0;left:-40%;width:40%;height:100%;
  background:var(--nvl-gradient);animation:loadingbar-sweep 1.1s ease-in-out infinite}
@keyframes loadingbar-sweep{0%{left:-40%}100%{left:100%}}

/* ---------- ログイン ---------- */
.loginL{width:52%;flex:none;display:flex;flex-direction:column;justify-content:center;
  padding:0 84px;background:#fff;overflow:auto}
.loginR{flex:1;background:var(--nvl-gradient);color:#fff;display:flex;flex-direction:column;
  justify-content:center;padding:0 60px}
.loginR.navy{background:var(--nvl-navy)}
.logomark{width:30px;height:30px;border-radius:3px;background:var(--nvl-gradient);
  display:grid;place-items:center;flex:none}
.logomark span{display:block;width:11px;height:11px;border:1.8px solid #fff;border-radius:1px;transform:rotate(12deg)}
.logomark.navy{background:#fff}.logomark.navy span{border-color:var(--nvl-navy)}
.loginL h1{font-size:29px;font-weight:700;letter-spacing:.06em;margin:14px 0 6px}
.loginL .sub{font-size:12.5px;color:var(--muted);margin-bottom:34px;letter-spacing:.02em}
.loginL form{max-width:376px}
.loginR .cap{font-size:25px;font-weight:700;letter-spacing:.08em;line-height:1.6;margin-bottom:26px}
.loginR ul{list-style:none;display:flex;flex-direction:column;gap:13px;max-width:400px}
.loginR li{display:flex;gap:11px;font-size:13px;line-height:1.7;color:rgba(255,255,255,.94)}
.loginR li .ic{margin-top:4px;opacity:.86}
.loginR .rule{width:44px;height:2px;background:rgba(255,255,255,.55);margin-bottom:22px}
.loginfoot{margin-top:26px;padding-top:18px;border-top:1px solid var(--nvl-border);
  display:flex;align-items:center;gap:14px;font-size:11.5px;color:var(--muted)}
/* 2026-08-01: display:inline-flex/gapを追加（使い方ページへのアイコン付き導線で使うため）。
   既存の唯一の使用箇所（index.htmlの「NOVEL運営として入る」・アイコン無しのテキストリンク）は
   1行のテキストのみなので、inline→inline-flexの変更による見た目の変化は無い（実機確認済み）。 */
.linkbtn{display:inline-flex;align-items:center;gap:5px;color:var(--nvl-blue);font-size:11.5px;font-weight:500;letter-spacing:.04em;
  text-decoration:underline;text-underline-offset:3px;background:none;border:none;cursor:pointer}
.linkbtn:hover{color:var(--nvl-navy)}
.linkbtn .ic{color:inherit}

/* ---------- アプリシェル ---------- */
.shell{display:flex;width:100%;height:100%;overflow:hidden}
.side{width:208px;flex:none;border-right:1px solid var(--nvl-border);background:#fff;
  display:flex;flex-direction:column}
.side .brand{padding:17px 16px 15px;display:flex;align-items:center;gap:10px}
.side .brand .nm{font-size:14px;font-weight:700;letter-spacing:.06em}
.side nav{padding:6px 10px;display:flex;flex-direction:column;gap:1px}
.nitem{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:2px;width:100%;
  text-align:left;font-size:12.5px;font-weight:500;letter-spacing:.06em;color:var(--nvl-text);
  border-left:2px solid transparent;transition:background .12s,color .12s}
.nitem:hover{background:var(--nvl-bg-light)}
.nitem.on{background:var(--nvl-tint-blue);color:var(--nvl-blue);font-weight:700;border-left-color:var(--nvl-blue)}
.nitem .cnt{margin-left:auto;font-family:var(--nvl-font-en);font-size:10px;font-weight:600;
  color:#fff;background:var(--warn);border-radius:2px;padding:1px 5px;line-height:1.5}
.sidefoot{margin-top:auto;padding:12px 12px 14px}
/* 2026-08-01: 使い方リンク（.sidefoot内・#quotaBoxの直前）。.nitemとは意図的に別クラス・
   別スタイルにしてある（HELP.md実装担当への申し送り「nav の4項目とは視覚的に離す」対応。
   font-size 11px・border-left無し・活性色以外は常時muted＝.nitemより明確に弱いトーン） */
.sidehelp{display:flex;align-items:center;gap:7px;padding:7px 9px;margin-bottom:10px;border-radius:2px;
  font-size:11px;font-weight:500;letter-spacing:.03em;color:var(--muted);text-decoration:none;transition:.12s}
.sidehelp .ic{color:var(--muted)}
.sidehelp:hover{background:var(--nvl-bg-light);color:var(--nvl-ink)}
.sidehelp:hover .ic{color:var(--nvl-ink)}
.sidehelp.on{color:var(--nvl-blue)}
.sidehelp.on .ic{color:var(--nvl-blue)}
.quota{border:1px solid var(--nvl-border);border-radius:3px;padding:10px 11px;min-height:60px}
.quota .r1{display:flex;flex-direction:column;gap:3px}
.quota .k{font-size:10.5px;font-weight:500;letter-spacing:.1em;color:var(--muted)}
.quota .v{font-family:var(--nvl-font-en);font-size:14px;font-weight:600;letter-spacing:.01em;white-space:nowrap}
.quota .bar{height:3px;background:var(--nvl-bg-light);margin-top:8px;overflow:hidden}
.quota .bar i{display:block;height:100%;background:var(--nvl-gradient);width:0}
.quota .note{font-size:10.5px;color:var(--muted);margin-top:6px;line-height:1.5}
.quota.full{border-color:var(--err-line);background:var(--err-bg)}
.quota.full .bar i{background:var(--err)}
.quota.full .note{color:var(--err)}
.userbox{display:flex;align-items:center;gap:9px;width:100%;text-align:left;margin-top:10px;
  padding:8px 6px;border-radius:2px;transition:background .12s}
.userbox:hover{background:var(--nvl-bg-light)}
.ava{width:27px;height:27px;border-radius:50%;background:var(--nvl-gradient);color:#fff;
  display:grid;place-items:center;font-size:11px;font-weight:700;flex:none}
.ava.flat{background:var(--nvl-navy)}.ava.mute{background:#9AA0A8}
.userbox .n{font-size:11.5px;font-weight:500;line-height:1.35;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.userbox .r{font-size:10.5px;color:var(--muted);letter-spacing:.06em}
main{flex:1;min-width:0;display:flex;flex-direction:column;background:#fff;overflow:hidden}
.view{flex:1;overflow:auto;display:none}
.view.on{display:block}
.view.col{display:none}
.view.col.on{display:flex;flex-direction:column;overflow:hidden}

/* ---------- 見出し・レイアウト ---------- */
.wrap{max-width:980px;margin:0 auto;padding:30px 30px 70px}
.wrap.wide{max-width:1140px}
.phead{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:18px}
.ptitle{font-size:22px;font-weight:700;letter-spacing:.05em}
.plede{font-size:12.5px;color:var(--muted);margin-top:5px;line-height:1.7;max-width:660px}
.h3{font-size:14px;font-weight:700;letter-spacing:.04em}

/* ---------- ボタン ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:32px;padding:0 13px;
  border-radius:3px;border:1px solid var(--nvl-border);background:#fff;font-size:12.5px;font-weight:500;
  letter-spacing:.04em;color:var(--nvl-text);white-space:nowrap;transition:.12s;cursor:pointer}
.btn:disabled{opacity:.5;cursor:default}
.btn:hover:not(:disabled){background:var(--nvl-bg-light);border-color:#D2D2D2}
.btn--pri{background:var(--nvl-gradient);border-color:transparent;color:#fff;font-weight:500}
.btn--pri:hover:not(:disabled){background:var(--nvl-gradient);filter:brightness(1.06);border-color:transparent}
.btn--sec{background:#fff;border-color:var(--nvl-blue);color:var(--nvl-blue)}
.btn--sec:hover:not(:disabled){background:var(--nvl-tint-blue);border-color:var(--nvl-blue)}
.btn--gh{border-color:transparent;background:transparent;color:var(--muted)}
.btn--gh:hover:not(:disabled){background:var(--nvl-bg-light);color:var(--nvl-ink)}
.btn--dark{background:var(--nvl-bg-dark);border-color:var(--nvl-bg-dark);color:#fff}
.btn--dark:hover:not(:disabled){background:#282828;border-color:#282828}
.btn--navy{background:var(--nvl-navy);border-color:var(--nvl-navy);color:#fff}
.btn--navy:hover:not(:disabled){background:#05587F;border-color:#05587F}
.btn.sm{height:27px;padding:0 9px;font-size:11.5px}
.btn.lg{height:40px;padding:0 22px;font-size:13.5px}
.btn.w100{width:100%}
.btn.l{margin-right:auto}

/* ---------- チップ・ドット ---------- */
.chip{display:inline-flex;align-items:center;gap:5px;height:21px;padding:0 7px;border-radius:2px;
  font-size:10.5px;font-weight:500;letter-spacing:.06em;border:1px solid;white-space:nowrap}
.chip--ok{color:var(--ok);background:var(--ok-bg);border-color:var(--ok-line)}
.chip--warn{color:var(--warn);background:var(--warn-bg);border-color:var(--warn-line)}
.chip--err{color:var(--err);background:var(--err-bg);border-color:var(--err-line)}
.chip--blue{color:var(--nvl-blue);background:var(--nvl-tint-blue);border-color:var(--edit-line)}
.chip--mute{color:var(--muted);background:var(--nvl-bg-light);border-color:var(--nvl-border)}
.chip--new{color:#fff;background:var(--nvl-orange);border-color:var(--nvl-orange);
  font-family:var(--nvl-font-en);font-size:9.5px;font-weight:600;letter-spacing:.1em;border-radius:128px;padding:0 8px}
.dot{width:6px;height:6px;border-radius:50%;flex:none;display:inline-block}
.dot.ok{background:var(--ok)}.dot.warn{background:var(--warn)}.dot.err{background:var(--err)}
.dot.edit{background:var(--edit)}.dot.gray{background:#C4C4C4}.dot.ink{background:var(--nvl-ink)}
.dot.absent{background:var(--muted)}

/* ---------- カード・セグメント・テーブル ---------- */
.card{border:1px solid var(--nvl-border);border-radius:3px;background:#fff}
.seg{display:inline-flex;border:1px solid var(--nvl-border);border-radius:3px;overflow:hidden}
.seg button{padding:0 12px;height:29px;font-size:12px;font-weight:500;letter-spacing:.04em;color:var(--muted);transition:.12s}
.seg button+button{border-left:1px solid var(--nvl-border)}
.seg button:hover{background:var(--nvl-bg-light);color:var(--nvl-ink)}
.seg button.on{background:var(--nvl-tint-blue);color:var(--nvl-blue);font-weight:700}
.seg.sm button{height:25px;padding:0 9px;font-size:11px}
table.tbl{width:100%;border-collapse:collapse}
table.tbl th{font-size:10.5px;font-weight:500;letter-spacing:.1em;color:var(--muted);text-align:left;
  padding:9px 13px;border-bottom:1px solid var(--nvl-border);background:var(--nvl-bg-light);white-space:nowrap}
table.tbl td{padding:11px 13px;border-bottom:1px solid var(--line-soft);font-size:12.5px;vertical-align:middle}
table.tbl tr:last-child td{border-bottom:none}
table.tbl tbody tr:hover{background:var(--nvl-tint-blue)}
.num{font-family:var(--nvl-font-en);font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
.backlink{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);
  font-weight:500;letter-spacing:.06em;margin-bottom:14px;background:none;border:none;cursor:pointer}
.backlink:hover{color:var(--nvl-blue)}
.notice{display:flex;align-items:flex-start;gap:10px;padding:11px 13px;border-radius:3px;
  font-size:11.5px;line-height:1.65;border:1px solid}
.notice--warn{background:var(--warn-bg);border-color:var(--warn-line);color:var(--warn)}
.notice--err{background:var(--err-bg);border-color:var(--err-line);color:var(--err)}
.notice--blue{background:var(--nvl-tint-blue);border-color:var(--edit-line);color:var(--nvl-navy)}
.notice .ic{margin-top:2px}

/* ---------- 空状態 ---------- */
.empty{padding:44px 10px;text-align:center;color:var(--muted);font-size:12.5px;line-height:1.9}

/* ---------- モーダル ---------- */
.mbg{position:fixed;inset:0;background:rgba(8,8,8,.45);display:none;align-items:center;justify-content:center;
  z-index:100;padding:28px}
.mbg.on{display:flex}
.modal{background:#fff;border:1px solid #D5D5D5;border-radius:3px;width:100%;max-width:560px;
  max-height:88vh;display:flex;flex-direction:column;overflow:hidden}
.modal.wide{max-width:700px}
.modal.xl{max-width:840px}
.mline{height:2px;flex:none;background:var(--nvl-gradient)}
.mline.navy{background:var(--nvl-navy)}
.mhead{padding:17px 20px 15px;border-bottom:1px solid var(--nvl-border);display:flex;align-items:flex-start;gap:12px}
.mhead .ttl{font-size:15.5px;font-weight:700;letter-spacing:.05em}
.mhead .sub{font-size:11.5px;color:var(--muted);margin-top:4px;line-height:1.6}
.mbody{padding:19px 20px;overflow:auto}
.mfoot{padding:13px 20px;border-top:1px solid var(--nvl-border);display:flex;gap:9px;
  justify-content:flex-end;background:var(--nvl-bg-light);flex:none}
.fld{margin-bottom:15px}
.fld>label{display:block;font-size:10.5px;font-weight:500;letter-spacing:.1em;color:var(--muted);margin-bottom:6px}
.hint{font-size:11px;color:var(--muted);margin-top:6px;line-height:1.65}
.inp{width:100%;border:1px solid var(--nvl-border);border-radius:3px;padding:8px 10px;font-size:12.5px;
  background:#fff;font-family:var(--nvl-font-ja)}
.inp:focus{outline:none;border-color:var(--nvl-blue)}
.inp.n{font-family:var(--nvl-font-en);font-variant-numeric:tabular-nums}
.inp.err{border-color:var(--err);background:var(--err-bg)}
textarea.inp{min-height:104px;resize:vertical;line-height:1.75}
.two{display:grid;grid-template-columns:1fr 1fr;gap:13px}
.three{display:grid;grid-template-columns:1fr 1fr 1fr;gap:13px}
.inline-err{font-size:11px;color:var(--err);margin-top:5px;display:flex;align-items:center;gap:5px}
.optlist{display:flex;flex-direction:column;gap:8px}
.opt{display:flex;gap:11px;align-items:flex-start;border:1px solid var(--nvl-border);border-radius:3px;
  padding:11px 13px;cursor:pointer;text-align:left;width:100%;transition:.12s;background:#fff}
.opt:hover{border-color:var(--nvl-blue);background:var(--nvl-tint-blue)}
.opt.on{border-color:var(--nvl-blue);background:var(--nvl-tint-blue)}
.opt .radio{width:15px;height:15px;border-radius:50%;border:1.5px solid #C4C4C4;flex:none;margin-top:2px;
  display:grid;place-items:center}
.opt.on .radio{border-color:var(--nvl-blue)}
.opt.on .radio::after{content:"";width:7px;height:7px;border-radius:50%;background:var(--nvl-blue)}
.opt .ot{font-size:12.5px;font-weight:700;letter-spacing:.04em;margin-bottom:3px;display:flex;align-items:center;gap:8px}
.opt .od{font-size:11.5px;color:var(--muted);line-height:1.7}
.exlist{display:flex;flex-direction:column;gap:6px;margin-top:8px}
.exbtn{text-align:left;border:1px solid var(--nvl-border);border-radius:3px;padding:8px 11px;
  font-size:11.5px;line-height:1.65;color:var(--nvl-text);transition:.12s;display:flex;gap:9px;align-items:flex-start;
  background:#fff;width:100%;cursor:pointer}
.exbtn:hover{border-color:var(--nvl-blue);background:var(--nvl-tint-blue);color:var(--nvl-navy)}
.exbtn .ic{margin-top:2px;color:var(--nvl-blue)}
.credbox{border:1px solid var(--edit-line);background:var(--nvl-tint-blue);border-radius:3px;padding:14px 16px}
.credrow{display:flex;align-items:center;gap:10px;padding:7px 0;border-bottom:1px dashed var(--edit-line)}
.credrow:last-child{border-bottom:none}
.credrow .k{font-size:10.5px;font-weight:500;letter-spacing:.1em;color:var(--muted);width:126px;flex:none}
.credrow .v{font-family:var(--nvl-font-en);font-size:13px;font-weight:600;flex:1;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.spin{width:14px;height:14px;border:2px solid var(--nvl-border);border-top-color:var(--nvl-blue);
  border-radius:50%;animation:sp .7s linear infinite;flex:none;display:inline-block}
@keyframes sp{to{transform:rotate(360deg)}}
.slider{-webkit-appearance:none;width:100%;height:3px;background:var(--nvl-border);outline:none;margin:6px 0}
.slider::-webkit-slider-thumb{-webkit-appearance:none;width:15px;height:15px;border-radius:50%;
  background:#fff;border:2px solid var(--nvl-blue);cursor:pointer}
details.adv{border:1px solid var(--nvl-border);border-radius:3px}
details.adv summary{list-style:none;cursor:pointer;padding:10px 13px;font-size:11.5px;font-weight:500;
  letter-spacing:.06em;color:var(--muted);display:flex;align-items:center;gap:7px}
details.adv summary::-webkit-details-marker{display:none}
details.adv summary::before{content:"";width:6px;height:6px;border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;transform:rotate(-45deg);transition:.15s;margin-left:2px}
details.adv[open] summary::before{transform:rotate(45deg)}
details.adv .advbody{padding:2px 13px 14px}

/* ---------- トースト ---------- */
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(12px);
  background:var(--nvl-bg-dark);color:#fff;padding:11px 17px;border-radius:3px;font-size:12.5px;
  font-weight:500;letter-spacing:.03em;opacity:0;pointer-events:none;transition:.2s;z-index:120;
  display:flex;align-items:center;gap:9px;max-width:640px}
.toast.on{opacity:1;transform:translateX(-50%) translateY(0)}
.toast .dot{background:var(--nvl-cyan)}
.toast.warn .dot{background:#F0C44A}
/* err専用トースト（P3-W1追加・PMO承認済み: 既存--errトークンの範囲内の拡張。オレンジは使わない） */
.toast.err .dot{background:var(--err)}

/* ============================================================================
   確認画面（P3-W2担当・public/js/review.js専用）
   出典: internal/mockups/2026-07-30_yomitoki_meijin/mock.html の確認画面CSSを移植・調整。
   下部ドロワー用（.idrawer等）はモックのデフォルト表示だが、SPEC/MOCK_NOTESの岡田決定により
   実装は右パネルのタブ方式を採用するため移植していない。
   PDF原本の重畳表示（.docframe/#rvCanvas/.boxlayer/.pdffallback・PDF.js自前描画）はモックに無い本実装追加分。
   ============================================================================ */

/* ---- ジョブバー ---- */
.jobbar{height:53px;flex:none;border-bottom:1px solid var(--nvl-border);display:flex;
  align-items:center;padding:0 14px;gap:12px;background:#fff}
.iconbtn{width:31px;height:31px;border-radius:3px;display:grid;place-items:center;
  border:1px solid var(--nvl-border);background:#fff;flex:none;transition:.12s;color:var(--nvl-ink)}
.iconbtn:hover{background:var(--nvl-bg-light)}
.jobbar .t{font-size:14px;font-weight:700;letter-spacing:.04em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.jobbar .m{font-size:11px;color:var(--muted);margin-top:1px}
.jobbar .right{margin-left:auto;display:flex;align-items:center;gap:10px;flex:none}
.steps{display:flex;align-items:center;gap:7px;font-size:11.5px;color:var(--muted);
  padding-right:12px;border-right:1px solid var(--nvl-border)}
.steps .s{display:flex;align-items:center;gap:5px}
.steps .s.done{color:var(--ok)}.steps .s.now{color:var(--nvl-blue);font-weight:700}
.steps .ar{color:#D5D5D5}

/* ---- ジョブ名インライン編集（review.js・SPEC §3-2b・2026-07-31 岡田要望対応） ---- */
.jobtitle{display:flex;align-items:center;gap:5px;min-width:0}
.jobtitle .t{flex:1;min-width:0}
.jobtitle-editbtn{width:20px;height:20px;flex:none;border:none;background:transparent;
  border-radius:3px;display:grid;place-items:center;color:var(--muted);transition:.12s}
.jobtitle.clickable{cursor:pointer}
.jobtitle.clickable:hover .t{color:var(--nvl-blue)}
.jobtitle.clickable .jobtitle-editbtn:hover{background:var(--nvl-bg-light);color:var(--nvl-blue)}
.jobtitle-editbtn:disabled{opacity:.35;cursor:not-allowed}
.jobtitle-inp{max-width:360px;height:28px;padding:3px 8px;font-size:14px;font-weight:700}
.jobtitle-inp:disabled{opacity:.6}

/* ---- 本体レイアウト（左レール／中央原本／右パネル） ---- */
.review{flex:1;display:flex;min-height:0}
.rail{width:198px;flex:none;border-right:1px solid var(--nvl-border);display:flex;flex-direction:column;background:#fff}
.railhead{padding:11px 13px 8px;font-size:10.5px;font-weight:500;letter-spacing:.1em;color:var(--muted)}
/* ---- 書類一覧の絞り込み（SPEC F4-26・2026-08-01追加）: 198px幅に収まるようflex-wrapで自然に
   2行へ折り返す。選択中のチップは.on（既存の.seg/.tabと同じトーン）。件数を添えて絞った状態が
   分かるようにする。 ---- */
.railfilter{display:flex;flex-wrap:wrap;gap:4px;padding:0 8px 8px}
.rfchip{display:inline-flex;align-items:center;gap:4px;height:22px;padding:0 7px;border-radius:2px;
  border:1px solid var(--nvl-border);background:#fff;font-size:10.5px;font-weight:500;color:var(--muted);
  letter-spacing:.02em;transition:.12s;white-space:nowrap}
.rfchip:hover{background:var(--nvl-bg-light);color:var(--nvl-ink)}
.rfchip.on{background:var(--nvl-tint-blue);color:var(--nvl-blue);font-weight:700;border-color:var(--edit-line)}
.rfchip .c{font-family:var(--nvl-font-en);font-size:9.5px;color:inherit;opacity:.75}
.raillist{overflow:auto;padding:0 8px 10px;display:flex;flex-direction:column;gap:2px}
.ritem{text-align:left;padding:9px 10px;border-radius:2px;border:1px solid transparent;
  border-left:2px solid transparent;width:100%;transition:.12s}
.ritem:hover{background:var(--nvl-bg-light)}
.ritem.on{background:var(--nvl-tint-blue);border-color:var(--edit-line);border-left-color:var(--nvl-blue)}
.ritem .t{display:flex;align-items:center;gap:6px;font-size:11.5px;font-weight:500;margin-bottom:2px}
.ritem .t span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ritem .m{font-size:10.5px;color:var(--muted);letter-spacing:.04em}
.center{flex:1;min-width:0;display:flex;flex-direction:column}
.vbar{height:38px;flex:none;display:flex;align-items:center;gap:8px;padding:0 13px;
  background:#fff;border-bottom:1px solid var(--nvl-border)}
.vbar .fn{font-size:11.5px;font-weight:500;color:var(--muted);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;letter-spacing:.03em}
.pdfnav{display:flex;align-items:center;gap:6px;padding:0 10px;border-left:1px solid var(--nvl-border);
  border-right:1px solid var(--nvl-border);flex:none}
.pdfnav .num{font-size:11px;color:var(--muted);min-width:46px;text-align:center}
.vbar .num{font-family:var(--nvl-font-en);font-size:11px;color:var(--muted);width:38px;text-align:center}
.vscroll{flex:1;overflow:auto;padding:20px;display:flex;justify-content:center;align-items:flex-start;
  background:var(--nvl-bg-light)}

/* ---- 原本プレビュー（PDF.jsで<canvas>へ自前描画＋bbox重畳。2026-07-31 PMO裁定でiframe方式から
   変更＝ブラウザ内蔵PDFビューアへの依存を廃止。canvasの実寸=page.getViewport().width/heightなので
   bboxのハイライトはA4近似なしで正確な位置に出る） ---- */
.docframe{position:relative;background:#fff;border:1px solid #DDD;min-width:320px;min-height:400px}
#rvCanvas{display:block}
.pdffallback{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;
  padding:24px;font-size:12.5px;color:var(--muted);line-height:1.8;background:var(--nvl-bg-light)}
.boxlayer{position:absolute;inset:0;pointer-events:none}
.boxlayer .bbox{pointer-events:auto}
.bbox{position:absolute;border:1.5px solid transparent;border-radius:2px;cursor:pointer;transition:.13s}
.bbox.ok{border-color:rgba(14,124,90,.34);background:rgba(14,124,90,.07)}
.bbox.warn{border-color:rgba(138,106,18,.5);background:rgba(138,106,18,.11)}
.bbox.err{border-color:rgba(179,38,30,.55);background:rgba(179,38,30,.10)}
.bbox.edit{border-color:rgba(0,126,202,.45);background:rgba(0,126,202,.08)}
.bbox.item{border-color:rgba(0,126,202,.2);background:rgba(0,126,202,.04)}
.bbox:hover{background:rgba(0,126,202,.14);border-color:var(--nvl-blue)}
.bbox.sel{border-color:var(--nvl-blue);border-width:2px;background:rgba(0,126,202,.14)}
.bbox .tag{position:absolute;top:-17px;left:-2px;background:var(--nvl-blue);color:#fff;font-size:9.5px;
  font-weight:500;letter-spacing:.04em;padding:1px 5px;border-radius:2px;white-space:nowrap;
  opacity:0;transition:.13s;pointer-events:none}
.bbox.sel .tag,.bbox:hover .tag{opacity:1}

/* ---- 右パネル: 読み取り結果 ---- */
.fields{width:392px;flex:none;border-left:1px solid var(--nvl-border);display:flex;flex-direction:column;background:#fff}
.fhead{padding:12px 15px 11px;border-bottom:1px solid var(--nvl-border)}
.fhead .top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:9px}
.meter{display:flex;gap:2px;height:4px;background:var(--nvl-bg-light);overflow:hidden}
.meter i{display:block;height:100%}
.ftabs{display:flex;border-bottom:1px solid var(--nvl-border);flex:none}
.ftab{flex:1;padding:9px 6px;font-size:12px;font-weight:500;letter-spacing:.06em;color:var(--muted);
  border-bottom:2px solid transparent;margin-bottom:-1px;transition:.12s}
.ftab:hover{color:var(--nvl-ink)}
.ftab.on{color:var(--nvl-blue);font-weight:700;border-bottom-color:var(--nvl-blue)}
/* 「1ページ目しか読めていない」疑い（F4-18〜F4-20）。空の時はJSがinnerHTML=''にし、:emptyで
   余白ごと消える（トグルのたびにhidden属性を出し分ける実装よりシンプル） */
.fmultidoc{padding:10px 15px 0}
.fmultidoc:empty{padding:0}
.flist{flex:1;overflow:auto;padding:9px}
.fcard{border:1px solid var(--nvl-border);border-left:2px solid var(--nvl-border);border-radius:2px;
  padding:8px 11px;margin-bottom:5px;cursor:pointer;background:#fff;transition:.12s}
.fcard:hover{border-color:#CFCFCF}
.fcard.sel{border-color:var(--nvl-blue);border-left-color:var(--nvl-blue);background:var(--nvl-tint-blue)}
.fcard.ok{border-left-color:var(--ok-line)}
.fcard.warn{border-left-color:var(--warn);background:var(--warn-bg)}
.fcard.err{border-left-color:var(--err);background:var(--err-bg)}
.fcard.edit{border-left-color:var(--edit);background:var(--edit-bg)}
/* SPEC F4-22（v2.5）: 「この書類には無い」マーク。手入力(edit=青)・未検出(err=赤)とは別の状態
   なので、色を分ける（AIが読めた=okの緑・人が無いと判断した=absentのグレーを混同させない）。 */
.fcard.absent{border-left-color:var(--muted);background:var(--nvl-bg-light)}
.fcard.sel.warn,.fcard.sel.err,.fcard.sel.edit,.fcard.sel.absent{background:var(--nvl-tint-blue)}
/* 🔴 件2バグ修正（2026-08-01・岡田実使用フィードバック横展開）: F4-25は.fval（値）の折り返しは
   対応済みだったが、項目名（.lbl）とAIがそう読んだ理由（.freason）は対象外のまま残っていた。
   Geminiのreasoningは項目名をそのまま引用することがあり（buildPrompt参照）、項目名が区切りの無い
   英数字だと.ftopがflexの既定min-width:autoで縮まず.fcard/.flistごと右にはみ出す（値と同型のバグ）。 */
.fcard .ftop{display:flex;align-items:center;gap:7px;margin-bottom:5px}
.fcard .lbl{font-size:11px;font-weight:500;letter-spacing:.1em;color:var(--nvl-text);min-width:0;overflow-wrap:anywhere;word-break:break-word}
.fcard .req{font-size:9.5px;font-weight:500;color:var(--err);letter-spacing:.06em}
.fcard .conf{margin-left:auto;font-family:var(--nvl-font-en);font-size:10.5px;font-weight:600;color:var(--muted)}
.fcard.warn .conf{color:var(--warn)}.fcard.err .conf{color:var(--err)}.fcard.edit .conf{color:var(--edit)}
.fcard.absent .conf{color:var(--muted)}
/* SPEC F4-25（2026-08-01）: <input>から<textarea rows="1">に変更（長い値が右端で切れて読めなかった
   ため）。resize:noneでユーザーによる手動リサイズは無効化し、review.jsのonFlistInput/autosizeTextarea
   がscrollHeightの実測に基づいて高さを追従させる。max-heightを超えたら内部縦スクロールに任せる
   （画面全体の横スクロールは作らない）。 */
/* SPEC F4-27（2026-08-01・岡田実使用FB「入力欄がすごく編集しにくい」）: 既定を透明な枠・透明な
   背景にしていたため、値がただの文字に見えて「どこが直せるのか」が分からなかった（マウスを乗せた
   1件だけが入力欄に見える状態）。常時、白地＋淡い枠の入力欄として見せる。
   🔴 .fcard の背景はレベルで変わる（warn=ベージュ・err=ピンク・選択時=水色）。白地固定にすると
   どの色のカード上でも同じ入力欄に見える。カード色に馴染ませようとして透明に戻さないこと。 */
.fval{display:block;width:100%;border:1px solid var(--nvl-border);border-radius:2px;padding:4px 7px;margin-left:-7px;
  font-size:14px;font-weight:500;letter-spacing:.01em;line-height:1.5;background:#fff;transition:.12s;
  font-family:var(--nvl-font-ja);resize:none;overflow-x:hidden;overflow-y:auto;cursor:text;
  white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word;min-height:29px;max-height:200px}
/* 🔴 textarea.fval に限定する。閲覧者向けの .fval--ro（<div>）は下で枠を消しているが、
   :hover はクラス単体より詳細度が高く、限定しないと読み取り専用の値にホバーした時だけ
   枠が出て「直せる欄」に見えてしまう。 */
textarea.fval:hover{border-color:#C4C4C4}
textarea.fval:focus{border-color:var(--nvl-blue);box-shadow:0 0 0 2px var(--nvl-tint-blue);outline:none}
.fval.n{font-family:var(--nvl-font-en);font-variant-numeric:tabular-nums}
.fval::placeholder{color:#B9B9B9;font-weight:400;font-size:13px}
/* 閲覧者向け読み取り専用（<div>）。overflow-wrap:anywhereで、スペースを含まない長い連続文字列
   （口座番号等）でも折り返して全文を表示する（F4-25）。
   🔴 F4-27で.fvalに枠と白背景を付けたので、読み取り専用側はそれを打ち消す。打ち消さないと
   「直せる欄」に見えるのに閲覧者は直せない、という嘘の見た目になる。 */
.fval--ro{display:block;cursor:default;min-height:29px;overflow-wrap:anywhere;word-break:break-word;
  border-color:transparent;background:transparent}
.fnote{margin-top:7px;padding:6px 9px;border-radius:2px;font-size:11px;line-height:1.65;display:flex;gap:7px;border:1px solid}
.fnote.warn{background:#fff;border-color:var(--warn-line);color:var(--warn)}
.fnote.err{background:#fff;border-color:var(--err-line);color:var(--err)}
.fnote .ic{margin-top:2px}
/* SPEC F4-22（v2.5）: 「記載なし（確認済み）」の通知。fnoteと同じ構造だがグレー系（absent専用トーン）。 */
.fabsent{margin-top:7px;padding:6px 9px;border-radius:2px;font-size:11px;line-height:1.65;display:flex;
  gap:7px;border:1px solid var(--nvl-border);background:var(--nvl-bg-light);color:var(--muted)}
.fabsent .ic{margin-top:2px}
/* AIがそう読んだ理由（F4-21）。field_values.reasoningが空文字の書類（v2.4より前の読み取り）
   では要素自体を出さない（JS側でreasoningが空なら文字列を作らない）ので、常設のCSSは
   控えめな注記トーンだけ用意すればよい */
.freason{margin-top:6px;font-size:11px;line-height:1.6;color:var(--muted);overflow-wrap:anywhere;word-break:break-word}
/* SPEC F4-25（2026-08-01）: 横1行のflexだと、値が長い時にflexboxの最小コンテンツサイズにより
   兄弟要素（ラベル・結果）まで圧迫され、「1回目」「2回目」「一致/不一致」が縦に1文字ずつ
   折り返って崩れていた。縦積みレイアウトに変更し、ラベルと結果はwhite-space:nowrap+flex:noneで
   絶対に折り返さない側、値だけをoverflow-wrap:anywhereで折り返し可能な側にする。 */
.dcheck{margin-top:6px;padding-top:5px;border-top:1px dashed var(--nvl-border);display:flex;
  flex-direction:column;gap:4px;font-size:10.5px}
.dcheck .p{display:flex;gap:6px;align-items:baseline;min-width:0}
.dcheck .p em{font-style:normal;font-size:9.5px;font-weight:500;letter-spacing:.08em;color:var(--muted);
  flex:none;white-space:nowrap}
.dcheck .p b{font-family:var(--nvl-font-en);font-weight:600;color:var(--nvl-ink);min-width:0;
  overflow-wrap:anywhere;word-break:break-word}
.dcheck .res{align-self:flex-end;font-size:10px;font-weight:700;letter-spacing:.08em;color:var(--err);
  flex:none;white-space:nowrap}
.dcheck.same .res{color:var(--ok)}
.pick{margin-top:7px;display:flex;gap:6px}
.ffoot{border-top:1px solid var(--nvl-border);padding:10px 13px;display:flex;align-items:center;
  gap:10px;background:#fff;flex-wrap:wrap;flex:none}
.ffoot .h{font-size:11px;color:var(--muted);line-height:1.5;flex:1 1 100%;min-width:0}
/* 2026-08-01: ボタンが2つとも nowrap で横一列だったため、幅が足りないと右端からはみ出て
   「この書類をOKにする」が切れていた。まとめてOK側の文言を件数つき（「アラートのない13件を
   まとめてOK」）・0件時（「まとめてOKにできる書類がありません」）に伸ばした変更で顕在化した。
   🔴 ボタンの文言を縮めて対処しない（件数を出す判断を無意味にする）。入りきらないなら折り返す。
   .btn の nowrap は維持する（ボタン内で改行されると押しにくくなる）。 */
.ffoot .acts{display:flex;gap:8px;flex:1 1 auto;justify-content:flex-end;min-width:0;flex-wrap:wrap}
.ffoot .acts .btn{white-space:nowrap;max-width:100%}

/* ---- 明細（右パネルのタブ内・カード表示） ---- */
/* SPEC F4-25（2026-08-01）: .fvalと同じ理由で<input>から<textarea rows="1">に変更
   （品目名など長い値が右端で切れて読めなかった。同一クラス系統は同じ振る舞いにする＝非対称回避）。 */
/* SPEC F4-27: .fvalと同じ理由で、明細セルも常時「入力欄に見える」状態にする（同一クラス系統は
   同じ振る舞いにする＝非対称回避）。 */
.icell{display:block;width:100%;border:1px solid var(--nvl-border);border-radius:2px;padding:7px 8px;
  background:#fff;font-size:12.5px;line-height:1.5;transition:.1s;font-family:var(--nvl-font-ja);
  resize:none;overflow-x:hidden;overflow-y:auto;white-space:pre-wrap;overflow-wrap:anywhere;
  word-break:break-word;min-height:29px;max-height:150px;cursor:text}
/* .fvalと同じ理由でtextareaに限定する（.icell--ro は <div>） */
textarea.icell:hover{border-color:#C4C4C4}
textarea.icell:focus{border-color:var(--nvl-blue);box-shadow:0 0 0 2px var(--nvl-tint-blue);outline:none}
.icell.n{font-family:var(--nvl-font-en);font-variant-numeric:tabular-nums;text-align:right}
.icell--ro{display:block;cursor:default;overflow-wrap:anywhere;word-break:break-word;
  border-color:transparent;background:transparent}
.icards{display:flex;flex-direction:column}
.icard{border-bottom:1px solid var(--line-soft);padding:8px 10px 9px;cursor:pointer;transition:background .12s}
.icard:last-child{border-bottom:none}
.icard:hover{background:var(--nvl-tint-blue)}
.icard.sel{background:var(--nvl-tint-blue)}
.icard.err{border-left:2px solid var(--err);background:var(--err-bg)}
.ic1{display:flex;align-items:center;gap:7px}
.ino{font-family:var(--nvl-font-en);font-size:10px;font-weight:600;color:var(--muted);width:13px;flex:none;text-align:right}
.ic-name{flex:1;min-width:0;font-weight:500}
.ic2{display:flex;gap:6px;margin-top:5px;padding-left:20px}
.icf{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.icf>span{font-size:9.5px;font-weight:500;letter-spacing:.08em;color:var(--muted);padding-left:2px}
.irowbtn{width:26px;height:26px;border-radius:2px;display:grid;place-items:center;color:var(--muted);margin:0 auto}
.irowbtn:hover{background:var(--err-bg);color:var(--err)}
.ifoot{flex:none;display:flex;align-items:center;gap:12px;padding:8px 13px;border-top:1px solid var(--nvl-border);
  background:#fff}
.ifoot .sum{margin-left:auto;display:flex;align-items:baseline;gap:9px;font-size:11.5px;color:var(--muted)}
.ifoot .sum b{font-family:var(--nvl-font-en);font-size:13.5px;font-weight:600;color:var(--nvl-ink)}
.diffwarn{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:500;color:var(--err);
  background:var(--err-bg);border:1px solid var(--err-line);border-radius:2px;padding:3px 8px}
.diffok{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:500;color:var(--ok)}

/* ============================================================================
   読み取り一覧・新しい読み取り・CSV出力（P3-W3・jobs.js専用。
   出典: internal/mockups/2026-07-30_yomitoki_meijin/mock.html の同名クラスを移植。
   select.selのみモックにしか無かった共通フォーム部品だが、他画面にも必要になりうるため
   ここに素直に追加する（既存クラスへの変更はしていない）。
   ============================================================================ */

/* ---------- select（共通フォーム部品・元は本ファイルに未移植だった） ---------- */
select.sel{height:30px;border:1px solid var(--nvl-border);border-radius:3px;padding:0 8px;
  background:#fff;font-size:12px;font-weight:500;color:var(--nvl-text)}
select.sel:focus{outline:none;border-color:var(--nvl-blue)}
select.sel:disabled{background:var(--nvl-bg-light);color:#A5A5A5}

/* ---------- 読み取り一覧: 今月の実績 ---------- */
.homestats{display:flex;align-items:center;gap:16px;margin:2px 0 20px;font-size:12px;color:var(--muted)}
.homestats .st{display:flex;align-items:baseline;gap:6px}
.homestats .st .k{font-size:11px;font-weight:500;letter-spacing:.1em}
.homestats .st .v{font-family:var(--nvl-font-en);font-size:17px;font-weight:600;color:var(--nvl-ink);letter-spacing:.01em}
.homestats .st .u{font-size:11px;color:var(--muted)}
.homestats .sep{width:1px;height:20px;background:var(--nvl-border)}

/* ---------- 読み取り一覧: 投入口・上限到達パネル ---------- */
.drop{border:1.5px dashed #D2D2D2;border-radius:3px;padding:26px 24px;background:var(--nvl-bg-light);
  cursor:pointer;margin-bottom:22px;transition:.14s;width:100%;text-align:left}
.drop:hover,.drop.hot{border-color:var(--nvl-blue);background:var(--nvl-tint-blue)}
.drop .in{display:flex;align-items:center;gap:16px}
.drop .ico{width:42px;height:42px;border-radius:3px;background:#fff;border:1px solid var(--nvl-border);
  display:grid;place-items:center;flex:none;color:var(--nvl-blue)}
.drop b{display:block;font-size:14.5px;font-weight:700;letter-spacing:.05em;margin-bottom:3px}
.drop .d{font-size:12px;color:var(--muted);line-height:1.7}
.limitpanel{border:1px solid var(--err-line);background:var(--err-bg);border-radius:3px;
  padding:20px 22px;margin-bottom:22px;display:flex;align-items:center;gap:18px}
.limitpanel .ico{width:42px;height:42px;border-radius:3px;background:#fff;border:1px solid var(--err-line);
  display:grid;place-items:center;flex:none;color:var(--err)}
.limitpanel b{display:block;font-size:14.5px;font-weight:700;letter-spacing:.05em;color:var(--err);margin-bottom:4px}
.limitpanel .d{font-size:12px;color:var(--nvl-text);line-height:1.75}

/* ---------- 読み取り一覧: タブ ---------- */
.tabs{display:flex;gap:0;border-bottom:1px solid var(--nvl-border);margin-bottom:2px}
.tab{padding:9px 14px;font-size:12.5px;font-weight:500;letter-spacing:.06em;color:var(--muted);
  border-bottom:2px solid transparent;margin-bottom:-1px;transition:.12s}
.tab:hover{color:var(--nvl-ink)}
.tab.on{color:var(--nvl-blue);font-weight:700;border-bottom-color:var(--nvl-blue)}
.tab .c{font-family:var(--nvl-font-en);font-size:10.5px;color:var(--muted);margin-left:5px}

/* ---------- 読み取り一覧: ジョブ行 ---------- */
.jrow{display:flex;align-items:center;gap:15px;padding:15px 10px;border-bottom:1px solid var(--line-soft);
  cursor:pointer;width:100%;text-align:left;transition:background .12s}
.jrow:hover{background:var(--nvl-tint-blue)}
.jrow .stk{width:36px;height:44px;position:relative;flex:none}
.jrow .stk i{position:absolute;inset:0;background:#fff;border:1px solid var(--nvl-border);border-radius:2px}
.jrow .stk i:nth-child(1){transform:rotate(-5deg) translateX(-2px)}
.jrow .stk i:nth-child(2){transform:rotate(3deg) translateX(2px)}
.jrow .stk i:nth-child(3){display:grid;place-items:center;font-family:var(--nvl-font-en);
  font-size:10px;font-weight:600;color:var(--muted)}
.jrow .bd{flex:1;min-width:0}
.jrow .nm{font-size:14px;font-weight:700;letter-spacing:.03em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.jrow .meta{font-size:11.5px;color:var(--muted);margin-top:3px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.jrow .meta .d{width:3px;height:3px;border-radius:50%;background:#CFCFCF}
.jrow .right{display:flex;align-items:center;gap:10px;flex:none}
.jrow .chev{color:#BFBFBF}
.jsteps{display:flex;align-items:center;gap:7px;margin-top:8px;font-size:11px;color:var(--muted)}
.jsteps .s{display:flex;align-items:center;gap:5px}
.jsteps .s.done{color:var(--ok)}
.jsteps .s.now{color:var(--nvl-blue);font-weight:700}
.jsteps .ar{color:#D5D5D5}
.jprog{height:2px;background:var(--nvl-bg-light);margin-top:8px;max-width:420px;overflow:hidden}
.jprog i{display:block;height:100%;background:var(--nvl-gradient);width:0;transition:width .45s ease}

/* ---------- 新しい読み取り（モーダル）: ファイル一覧 ---------- */
.filelist{border:1px solid var(--nvl-border);border-radius:3px;overflow:hidden;margin-bottom:16px}
.frow{display:flex;align-items:center;gap:10px;padding:8px 12px;border-bottom:1px solid var(--line-soft);font-size:12px}
.frow:last-child{border-bottom:none}
.frow .pdf{width:21px;height:26px;border:1px solid var(--nvl-border);border-radius:2px;background:var(--nvl-bg-light);
  display:grid;place-items:center;font-family:var(--nvl-font-en);font-size:6px;font-weight:600;color:var(--err);flex:none}
.frow .sz{margin-left:auto;font-family:var(--nvl-font-en);font-size:10.5px;color:var(--muted)}

/* ---------- CSV出力（モーダル）: プレビュー ---------- */
.csvprev{border:1px solid var(--nvl-border);border-radius:3px;overflow:auto;background:var(--nvl-bg-light);
  font-family:var(--nvl-font-en);font-size:10.5px;white-space:pre;padding:11px 13px;line-height:1.9;
  color:var(--nvl-text);max-height:170px}

/* ============================================================================
   ここから P3-W4 追記（templates.js / members.js / report.js 用）。
   出典: internal/mockups/2026-07-30_yomitoki_meijin/mock.html の <style>（岡田承認済み）。
   ファイル境界ルール（style.css冒頭コメント）どおり、既存クラスは変更せず末尾に追記のみ。
   ============================================================================ */

/* ---------- select（共通コンポーネント。W1未定義だったためW4が追加） ---------- */
select.sel{height:30px;border:1px solid var(--nvl-border);border-radius:3px;padding:0 8px;
  background:#fff;font-size:12px;font-weight:500;color:var(--nvl-text)}
select.sel:focus{outline:none;border-color:var(--nvl-blue)}
select.sel:disabled{background:var(--nvl-bg-light);color:#A5A5A5}

/* ---------- テンプレート ---------- */
.tgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
/* 🔴 件2バグ修正（2026-08-01・岡田実使用フィードバック横展開）: テンプレート名・説明に上限が無く、
   区切りの無い長い英数字文字列が来ると、gridアイテムの既定min-width:auto（内容の最小幅=折り返せない
   文字列の全長）のせいで.tcardが縮まず、.tgrid全体が.wrap wideより横に広がっていた
   （document.documentElement.scrollWidthは変わらずSECTION.viewのoverflow:autoで横スクロールバーが
   出るだけの見えにくい形。テンプレート詳細ヘッダ#tdNameと同型のバグのため同じ対処を適用する）。 */
.tcard{text-align:left;border:1px solid var(--nvl-border);border-radius:3px;padding:16px 17px;
  background:#fff;transition:.13s;display:flex;flex-direction:column;min-width:0}
.tcard:hover{border-color:var(--nvl-blue);background:var(--nvl-tint-blue)}
.tcard .tn{font-size:14.5px;font-weight:700;letter-spacing:.05em;margin-bottom:7px;display:flex;
  align-items:center;gap:8px;flex-wrap:wrap;overflow-wrap:anywhere;word-break:break-word}
.tcard p{font-size:11.5px;color:var(--muted);line-height:1.75;margin-bottom:13px;flex:1;
  overflow-wrap:anywhere;word-break:break-word}
.tcard .facts{display:flex;gap:16px;font-size:11px;color:var(--muted);border-top:1px solid var(--line-soft);
  padding-top:10px;letter-spacing:.04em}
.tcard .facts b{font-family:var(--nvl-font-en);font-size:12.5px;font-weight:600;color:var(--nvl-ink)}
.tcard.new{border-style:dashed;align-items:center;justify-content:center;color:var(--muted);
  min-height:150px;font-size:12.5px;font-weight:500;letter-spacing:.06em;gap:8px;flex-direction:row}
.tcard.new:hover{color:var(--nvl-blue);border-color:var(--nvl-blue)}
.modebar{display:flex;align-items:center;gap:16px;margin:18px 0 24px;padding:14px 17px;
  border:1px solid var(--nvl-border);border-radius:3px}
.modebar .t{font-size:12.5px;font-weight:700;letter-spacing:.06em}
.modebar .d{font-size:11.5px;color:var(--muted);margin-top:3px;line-height:1.6}
.prompt-cell{font-size:11.5px;color:var(--muted);line-height:1.65;max-width:460px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.thpill{font-family:var(--nvl-font-en);font-size:11px;font-weight:600;color:var(--nvl-text)}
.trylist{border:1px solid var(--nvl-border);border-radius:3px;margin-top:9px;overflow:hidden}
.tryrow{display:flex;align-items:center;gap:10px;padding:9px 12px;border-bottom:1px solid var(--line-soft);font-size:11.5px}
.tryrow:last-child{border-bottom:none}
.tryrow .f{color:var(--muted);width:210px;flex:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tryrow .v{font-weight:500;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tryrow .c{font-family:var(--nvl-font-en);font-size:11px;font-weight:600;color:var(--ok)}
.tryrow .c.warn{color:var(--warn)}.tryrow .c.err{color:var(--err)}

/* ---------- メンバー ---------- */
.roles{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:22px}
.role{border:1px solid var(--nvl-border);border-radius:3px;padding:13px 15px}
.role .rn{font-size:12.5px;font-weight:700;letter-spacing:.06em;display:flex;align-items:center;gap:8px;margin-bottom:6px}
.role p{font-size:11.5px;color:var(--muted);line-height:1.7}

/* ---------- 月次レポート ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:14px}
.stat{border:1px solid var(--nvl-border);border-radius:3px;padding:14px 15px}
.stat .k{font-size:10.5px;font-weight:500;letter-spacing:.1em;color:var(--muted);margin-bottom:7px}
.stat .v{font-family:var(--nvl-font-en);font-size:26px;font-weight:600;letter-spacing:-.01em;line-height:1.2}
.stat .v small{font-family:var(--nvl-font-ja);font-size:12px;font-weight:500;color:var(--muted);margin-left:3px}
.stat .d{font-size:10.5px;color:var(--muted);margin-top:5px;line-height:1.5}
.stat .d.up{color:var(--ok)}
.repgrid{display:grid;grid-template-columns:1.3fr 1fr;gap:12px;margin:12px 0 24px}
.chart{display:flex;align-items:stretch;gap:12px;height:170px;padding:18px 4px 0}
.chart .col{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:6px}
.chart .cv{font-family:var(--nvl-font-en);font-size:10.5px;color:var(--muted)}
.chart .b{width:100%;max-width:44px;background:var(--nvl-tint-blue);border:1px solid var(--edit-line);border-radius:2px 2px 0 0}
.chart .b.cur{background:var(--nvl-gradient);border-color:transparent}
.chart .lb{font-size:10.5px;color:var(--muted);letter-spacing:.06em}
.factor{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--line-soft);font-size:12px}
.factor:last-child{border-bottom:none}
.factor .fn{width:96px;flex:none;font-size:11.5px;font-weight:500;letter-spacing:.06em}
.factor .fb{flex:1;height:5px;background:var(--nvl-bg-light);overflow:hidden}
.factor .fb i{display:block;height:100%}
.factor .pc{font-family:var(--nvl-font-en);font-size:11.5px;font-weight:600;width:38px;text-align:right}
.factor .ct{font-family:var(--nvl-font-en);font-size:11px;color:var(--muted);width:44px;text-align:right}
.assume{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--muted);
  border:1px solid var(--nvl-border);border-radius:3px;padding:9px 12px;margin-top:10px;flex-wrap:wrap}
.assume input{width:52px;height:24px;border:1px solid var(--nvl-border);border-radius:2px;padding:0 6px;
  font-family:var(--nvl-font-en);font-size:12px;font-weight:600;text-align:right;color:var(--nvl-ink)}
.assume input:focus{outline:none;border-color:var(--nvl-blue)}

/* 初期パスワード表示（メンバー画面）: NOVEL管理画面（P4・admin.css `.result-row__value.is-secret`）と
   同じ等幅・19px・letter-spacing 0.12emに統一する（PMO指示・2026-07-31。電話やチャットで
   0/O・1/lを口頭で伝える場面があるため判別性を優先）。既存の `.credrow .v` ルールは変更せず、
   このモディファイアクラスで上書きする。 */
.credrow .v.is-secret{
  font-family:ui-monospace,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
  font-size:19px;
  font-weight:700;
  letter-spacing:.12em;
  color:var(--nvl-navy);
}

/* テンプレート別の利用状況（月次レポート）: APIが枚数・丁寧さの2値しか返さないため、表ではなく
   枚数の多い順の横棒ランキングにして「どのテンプレートが多く使われているか」を一目で伝える
   （PMO指示・2026-07-31: 列が足りないと感じさせない見せ方にする）。 */
.tplrow{display:flex;align-items:center;gap:14px;padding:11px 0;border-bottom:1px solid var(--line-soft)}
.tplrow:last-child{border-bottom:none}
.tplrow-name{width:230px;flex:none;font-size:12.5px;font-weight:700;letter-spacing:.02em;
  display:flex;align-items:center;gap:8px;overflow:hidden}
.tplrow-bar{flex:1;height:8px;background:var(--nvl-bg-light);border-radius:2px;overflow:hidden}
.tplrow-bar i{display:block;height:100%;background:var(--nvl-gradient)}
.tplrow-count{font-family:var(--nvl-font-en);font-size:12.5px;font-weight:600;width:64px;
  flex:none;text-align:right;font-variant-numeric:tabular-nums}

/* ============================================================================
   ここから AIと一緒にテンプレートを設定する（v2.0新設・2026-08-01追記・templates.js/template_chat.js専用）。
   出典: internal/mockups/2026-07-31_yomitoki_suggest/mock_v2.html の<style>（岡田承認済み）。
   色はmock独自の --ai-bg/--ai-line を使わず、既存の --edit-bg/--edit-line（実質同値）に、
   --faint（tokens.cssに新規追加した1トークン）は薄い地の背景にのみ使う。ファイル境界ルール
   （本ファイル冒頭コメント）どおり既存クラスは変更せず末尾に追記のみ。
   ============================================================================ */

/* ---- 汎用ユーティリティ（既存コードでclass="muted"が使われていたがCSS未定義だったため追加。
   このファイル冒頭の既存クラス一覧のとおりmuted系は var(--muted) 直書きが基本だが、
   このセクションでは頻出するため1クラスにまとめる） ---- */
.muted{color:var(--muted)}

/* ---- 作成方法の2択（テンプレート一覧モーダル） ---- */
.choicegrid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.choicecard{border:1px solid var(--nvl-border);border-radius:4px;padding:18px 18px 16px;text-align:left;
  display:flex;flex-direction:column;gap:9px;transition:.12s;height:100%}
.choicecard:hover{border-color:var(--nvl-blue);background:var(--nvl-tint-blue)}
.choicecard .cico{width:34px;height:34px;border-radius:4px;display:grid;place-items:center;flex:none;
  background:var(--nvl-bg-light);color:var(--nvl-text)}
.choicecard.reco .cico{background:var(--nvl-gradient);color:#fff}
.choicecard b{font-size:14px;font-weight:700;letter-spacing:.04em}
.choicecard p{font-size:12px;color:var(--nvl-text);line-height:1.8}
.choicecard .cfoot{margin-top:auto;padding-top:6px;font-size:11px;color:var(--muted);
  display:flex;align-items:center;gap:6px}

/* ---- テンプレート一覧: 作成中カード（F19-1） ---- */
.tcard.draft{border-style:dashed}
.tcard.draft:hover{border-color:var(--nvl-blue)}

/* ---- チャット画面（左＝会話／右＝台帳の2ペイン） ---- */
.chatwrap{display:flex;flex:1;min-height:0}
.cpane{width:452px;flex:none;border-right:1px solid var(--nvl-border);display:flex;flex-direction:column;background:#fff;min-height:0}
.chead{padding:12px 18px 0;border-bottom:1px solid var(--nvl-border);background:#fff;flex:none}
.chead .ct{display:flex;align-items:center;gap:9px}
.chead .ct b{font-size:13.5px;font-weight:700;letter-spacing:.04em}
.chead .ct .r{margin-left:auto;display:flex;gap:6px;flex:none}
.chatava{width:22px;height:22px;border-radius:3px;background:var(--nvl-gradient);color:#fff;
  display:grid;place-items:center;flex:none}

/* ステップレール。🔴 モックは.sxの折返し行数がステップごとに変わり.barの高さが不揃いだった
   （2026-08-01 コーディネーター指摘）。.sxに2行分のmin-heightを確保して揃える（モックのまま複製しない）。 */
.steprail{display:flex;gap:0;margin:12px 0 0;padding-bottom:2px}
.strp{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px;padding-right:8px}
.strp .sl{display:flex;align-items:flex-start;gap:5px}
.strp .sd{width:15px;height:15px;border-radius:50%;border:1.5px solid #CFCFCF;flex:none;display:grid;place-items:center;
  font-family:var(--nvl-font-en);font-size:9px;font-weight:600;color:#A6A6A6;background:#fff}
.strp .sx{font-size:10.5px;color:#A6A6A6;letter-spacing:.02em;line-height:1.35;overflow:hidden;
  min-height:calc(1.35em * 2);display:flex;align-items:flex-start}
.strp .bar{height:2px;background:#E9E9E9;border-radius:1px}
.strp.done .sd{border-color:var(--ok);background:var(--ok);color:#fff}
.strp.done .sx{color:var(--muted)}
.strp.done .bar{background:var(--ok)}
.strp.cur .sd{border-color:var(--nvl-blue);color:#fff;background:var(--nvl-blue)}
.strp.cur .sx{color:var(--nvl-blue);font-weight:500}
.strp.cur .bar{background:var(--nvl-gradient)}

.cbody{flex:1;min-height:0;overflow-y:auto;padding:18px;background:var(--faint)}
.cfoot{flex:none;border-top:1px solid var(--nvl-border);background:#fff;padding:10px 18px 12px}
.remain{font-size:11px;color:var(--muted);margin-bottom:7px;display:flex;align-items:center;gap:6px}
.remain b{color:var(--nvl-blue);font-weight:500}
.composer{display:flex;gap:8px;align-items:flex-end}
.composer textarea{flex:1;min-width:0;border:1px solid var(--nvl-border);border-radius:4px;padding:8px 11px;
  font-size:12.5px;line-height:1.7;resize:none;height:38px;max-height:96px;background:#fff;font-family:var(--nvl-font-ja)}
.composer textarea:focus{border-color:var(--nvl-blue);outline:none}

/* 吹き出し（角丸4px・影なし。チャットアプリ風の大きい角丸にはしない＝ブランドガイドライン準拠） */
.cmsg{margin-bottom:12px}
.cmsg.me{display:flex;justify-content:flex-end}
.cmsg.me .cbub{max-width:86%;border:1px solid var(--edit-line);background:var(--edit-bg);border-radius:4px;
  padding:9px 12px;font-size:12.5px;line-height:1.8}
.cmsg.ai .cbub{background:#fff;border:1px solid var(--nvl-border);border-left:2px solid var(--nvl-blue);
  border-radius:4px;padding:11px 13px;font-size:12.5px;line-height:1.85;position:relative}
.cmsg.ai .cbub b{font-weight:500}
.notrightlink{display:block;margin-top:8px;font-size:10.5px;color:var(--muted);text-decoration:underline;
  text-underline-offset:2px}
.notrightlink:hover{color:var(--nvl-blue)}

.uicard{margin-top:9px;margin-bottom:16px;border-top:1px solid var(--line-soft);padding-top:10px}
.uilab{font-size:10.5px;color:var(--muted);letter-spacing:.08em;margin-bottom:7px}
.sumline{font-size:12px;color:var(--muted);display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.sumline b{color:var(--nvl-ink);font-weight:500}

.tchips{display:flex;flex-wrap:wrap;gap:7px}
.tchip{display:inline-flex;align-items:center;gap:6px;height:31px;padding:0 12px;border:1px solid var(--nvl-border);
  border-radius:4px;background:#fff;font-size:12.5px;transition:.12s}
.tchip:hover{border-color:var(--nvl-blue);background:var(--nvl-tint-blue);color:var(--nvl-blue)}
.tchip.on{border-color:var(--nvl-blue);background:var(--nvl-tint-blue);color:var(--nvl-blue);font-weight:500}

.fchips{display:flex;flex-wrap:wrap;gap:6px}
.fchip{display:inline-flex;align-items:center;gap:6px;height:29px;padding:0 10px;border:1px solid var(--nvl-border);
  border-radius:4px;background:#fff;font-size:12px;color:var(--nvl-text);transition:.12s}
.fchip:hover{border-color:#BFBFBF;background:var(--faint)}
.fchip .bx{width:13px;height:13px;border:1.4px solid #C4C4C4;border-radius:2px;flex:none;display:grid;place-items:center;
  background:#fff;color:transparent}
.fchip.on{border-color:var(--nvl-blue);background:var(--nvl-tint-blue);color:var(--nvl-blue);font-weight:500}
.fchip.on .bx{background:var(--nvl-blue);border-color:var(--nvl-blue);color:#fff}
.fchip.own{border-style:dashed;gap:5px}
.fchip.own.on{border-style:solid}
.fchip-x{width:16px;height:16px;border-radius:2px;display:grid;place-items:center;color:var(--muted)}
.fchip-x:hover{background:var(--err-bg);color:var(--err)}

/* 自分の言葉で足す — チップと同じ視野・同じ強さで置く（岡田の却下理由の本体・F15-5） */
.ownbox{border:1px solid var(--nvl-blue);border-radius:4px;background:var(--nvl-tint-blue);padding:11px 12px;margin-top:11px}
.ownbox .oh{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:500;color:var(--nvl-blue);margin-bottom:4px}
.ownbox .od{font-size:11px;color:var(--muted);line-height:1.7;margin-bottom:8px}
.ownrow{display:flex;gap:7px}
.ownrow input{flex:1;min-width:0;height:32px;border:1px solid var(--nvl-border);border-radius:4px;padding:0 11px;
  font-size:12.5px;background:#fff;font-family:var(--nvl-font-ja)}
.ownrow input:focus{border-color:var(--nvl-blue);outline:none}

/* 解析中（割合は出さない。工程1行＋経過秒だけ＝F17-1） */
.analyzing{border:1px solid var(--edit-line);border-radius:4px;background:var(--edit-bg);padding:14px 15px}
.analyzing .row1{display:flex;align-items:center;gap:11px}
.analyzing .step{font-size:12.5px;font-weight:500}
.analyzing .elapsed{margin-left:auto;font-family:var(--nvl-font-en);font-size:12px;color:var(--muted);flex:none}
.analyzing .hint{font-size:11px;color:var(--muted);margin-top:8px;padding-left:27px;line-height:1.7}
.analyzing .ab{margin-top:10px;padding-left:27px}

.failbox{border:1px solid var(--err-line);border-radius:4px;background:var(--err-bg);padding:13px 15px;
  display:flex;flex-direction:column;gap:2px}
.failbox .fr{font-size:12px;line-height:1.85;margin:8px 0 0;color:var(--nvl-text)}
.failbox .fa{display:flex;gap:7px;margin:13px 0 0;flex-wrap:wrap}

.qcard{border:1px solid var(--warn-line);background:var(--warn-bg);border-radius:4px;padding:11px 13px;margin-bottom:9px}
.qcard.done{border-color:var(--nvl-border);background:var(--faint)}
.qcard .qh{font-size:12.5px;line-height:1.8;margin-bottom:9px}
.qcard .qo{display:flex;flex-direction:column;gap:6px}
.qopt{display:flex;align-items:center;gap:8px;border:1px solid var(--nvl-border);border-radius:4px;background:#fff;
  padding:8px 11px;font-size:12px;line-height:1.6;transition:.12s;text-align:left;width:100%}
.qopt:hover{border-color:var(--nvl-blue);background:var(--nvl-tint-blue);color:var(--nvl-blue)}
.qans{display:flex;align-items:center;gap:8px;font-size:12px}

.diffcard{border-color:var(--edit-line);background:var(--edit-bg)}
.diffbox{border:1px solid var(--nvl-border);border-radius:3px;background:#fff;padding:9px 11px}
.pkey{font-family:var(--nvl-font-en);font-size:11px;color:var(--muted)}

/* ---- 台帳（右ペイン） ---- */
.ledger{flex:1;min-width:0;display:flex;flex-direction:column;background:var(--nvl-white);min-height:0}
.lhead{flex:none;padding:14px 22px 13px;border-bottom:1px solid var(--nvl-border);display:flex;align-items:flex-start;gap:14px}
.lhead .lt{min-width:0}
.lhead .lk{font-size:10.5px;color:var(--muted);letter-spacing:.1em;margin-bottom:4px}
.lname{border:1px solid transparent;border-radius:3px;padding:2px 7px;margin-left:-7px;font-size:17px;font-weight:700;
  letter-spacing:.04em;background:transparent;width:290px;max-width:100%;transition:.12s;font-family:var(--nvl-font-ja)}
.lname:hover{border-color:var(--nvl-border);background:#fff}
.lname:focus{border-color:var(--nvl-blue);outline:none;background:#fff}
.lhead .lr{margin-left:auto;flex:none;display:flex;align-items:center;gap:8px;padding-top:2px}
.lbody{flex:1;min-height:0;overflow-y:auto;padding:16px 22px 30px;background:var(--faint)}
.lempty{border:1px dashed var(--nvl-border);border-radius:4px;background:#fff;padding:34px 26px;text-align:center}
.lempty .ei{width:34px;height:34px;border-radius:4px;background:var(--nvl-bg-light);color:#A6A6A6;
  display:grid;place-items:center;margin:0 auto 12px}
.lempty b{display:block;font-size:13px;font-weight:500;margin-bottom:5px}
.lempty span{font-size:11.5px;color:var(--muted);line-height:1.8}
.lsec{display:flex;align-items:center;gap:10px;margin:4px 0 9px}
.lsec h3{font-size:12px;font-weight:700;letter-spacing:.08em}
.lsec .r{margin-left:auto;flex:none;display:flex;gap:6px}
.lsec .hint{font-size:11px;color:var(--muted)}

/* 台帳カードは既定で要約1行表示（19項目でもスクロールだけで到達できるように＝S104） */
.lcard{border:1px solid var(--nvl-border);border-radius:4px;background:#fff;margin-bottom:7px;overflow:hidden}
.lcard.open{border-color:var(--nvl-blue)}
.lh2{display:flex;align-items:center;gap:10px;padding:9px 12px;width:100%;text-align:left;transition:background .12s}
.lh2:hover{background:var(--faint)}
/* 🔴 モックは flex:none で長い項目名がカード幅を超えていた（.jobbar .right と同じ型の事故・
   PITFALLS該当）。項目名は可変長（利用者が自由に付ける）なので縮んで省略される側にする。 */
.lcard .ln{font-size:13px;font-weight:500;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lcard .lkey{font-size:10.5px;color:var(--muted);flex:none}
.lcard .lv{margin-left:auto;flex:none;display:flex;align-items:center;gap:8px;max-width:52%}
.lcard .lval{font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lcard .lconf{font-size:10.5px;color:var(--muted);flex:none}
.lb2{padding:0 12px 12px 12px;border-top:1px solid var(--line-soft)}
.lrow{display:flex;gap:9px;align-items:center;margin:10px 0 0;flex-wrap:wrap}
.lrow .lab{font-size:10.5px;color:var(--muted);letter-spacing:.06em;width:64px;flex:none}
.lta{width:100%;min-height:58px;border:1px solid var(--nvl-border);border-radius:3px;padding:8px 10px;
  font-size:12px;line-height:1.75;resize:vertical;background:#fff;margin-top:9px;font-family:var(--nvl-font-ja)}
.lta:focus{border-color:var(--nvl-blue);outline:none}
.selin{height:26px;border:1px solid var(--nvl-border);border-radius:3px;padding:0 6px;font-size:11.5px;background:#fff}
.thin2{width:52px;height:26px;border:1px solid var(--nvl-border);border-radius:3px;padding:0 6px;
  font-family:var(--nvl-font-en);font-size:11.5px;text-align:right;background:#fff}
.lwhy{font-size:11px;color:var(--muted);line-height:1.7;margin-top:9px;display:flex;gap:7px}
.btn.dgr:hover{background:var(--err-bg);color:var(--err);border-color:var(--err-line)}

.detbox{border:1px solid var(--nvl-border);border-radius:4px;background:#fff;padding:12px 14px}
.detbox .dr{display:flex;align-items:center;gap:10px}
.detbox .dr+.dr{margin-top:10px;padding-top:10px;border-top:1px solid var(--line-soft)}
.detbox .dl{font-size:11.5px;color:var(--muted);width:96px;flex:none}
/* .drの2つ目の子（明細への指示・列チップ等）は可変長テキストを持つため縮む側にする */
.detbox .dr>*:not(.dl){flex:1;min-width:0;word-break:break-word}
.colchips{display:flex;flex-wrap:wrap;gap:6px}

/* ---- 答え合わせ（最終確認・F18） ---- */
.fwrap{display:flex;flex:1;min-height:0}
.fleft{width:492px;flex:none;border-right:1px solid var(--nvl-border);display:flex;flex-direction:column;background:var(--faint);min-height:0}
.lh3{padding:12px 18px;border-bottom:1px solid var(--nvl-border);background:#fff;display:flex;align-items:center;gap:9px;flex:none}
.lh3 .fn{font-size:12.5px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lb3{flex:1;min-height:0;overflow-y:auto;padding:18px}
.fright{flex:1;min-width:0;display:flex;flex-direction:column;background:#fff;min-height:0}
.ftop{padding:15px 24px 13px;border-bottom:1px solid var(--nvl-border);flex:none}
.ftop h2{font-size:16px;font-weight:700;letter-spacing:.04em}
.ftop .sub{font-size:12px;color:var(--muted);margin-top:4px;line-height:1.7}
.ftools{display:flex;align-items:center;gap:8px;margin-top:12px;flex-wrap:wrap}
.fbody{flex:1;min-height:0;overflow-y:auto;padding:18px 24px 26px}
.ffoot{border-top:1px solid var(--nvl-border);padding:12px 24px;display:flex;align-items:center;gap:12px;
  background:var(--faint);flex:none;flex-wrap:wrap}
.ffoot .fnote{font-size:11.5px;color:var(--muted);line-height:1.6;display:flex;align-items:center;gap:7px}
.ffoot .r{margin-left:auto;display:flex;gap:9px;align-items:center;flex:none}

.pcard{border:1px solid var(--nvl-border);border-radius:4px;margin-bottom:10px;background:#fff;overflow:hidden;
  transition:border-color .12s}
.pcard.sel{border-color:var(--nvl-blue)}
.pcard.off{background:var(--faint)}
.pcard.off .pbody{opacity:.42}
.pcardhead{display:flex;align-items:flex-start;gap:11px;padding:11px 13px}
.chk{width:17px;height:17px;border:1.5px solid #BFBFBF;border-radius:3px;flex:none;margin-top:2px;
  display:grid;place-items:center;background:#fff;transition:.12s;color:transparent}
.chk.on{background:var(--nvl-blue);border-color:var(--nvl-blue);color:#fff}
.pnamewrap{flex:1;min-width:0}
.pname{width:100%;border:1px solid transparent;border-radius:3px;padding:2px 6px;margin-left:-6px;
  font-size:13.5px;font-weight:500;background:transparent;transition:.12s;font-family:var(--nvl-font-ja)}
.pname:hover{border-color:var(--nvl-border);background:#fff}
.pname:focus{border-color:var(--nvl-blue);background:#fff;outline:none}
.pmeta{display:flex;align-items:center;gap:8px;margin-top:3px;flex-wrap:wrap}
.pcardhead .pctl{display:flex;align-items:center;gap:7px;flex:none;padding-top:1px}
.pbody{padding:0 13px 12px 41px}
/* 既定は無彩色。自信度が高いことを「正しい」と読ませないため緑にしない */
.readout{display:flex;align-items:flex-start;gap:10px;border:1px solid var(--nvl-border);background:var(--faint);
  border-radius:3px;padding:9px 11px;margin-bottom:10px;border-left:2px solid var(--nvl-blue)}
.readout.warn{border-color:var(--warn-line);border-left-color:var(--warn);background:var(--warn-bg)}
.readout.err{border-color:var(--err-line);border-left-color:var(--err);background:var(--err-bg)}
.readout .rl{font-size:10.5px;color:var(--muted);letter-spacing:.08em;flex:none;padding-top:2px;width:74px}
.readout .rv{flex:1;min-width:0;font-size:13px;font-weight:500;word-break:break-all}
.readout .rv.none{color:var(--err);font-weight:400}
.readout .rc{flex:none;font-family:var(--nvl-font-en);font-size:11px;color:var(--muted);padding-top:2px}
.readout .rc b{font-weight:600;color:var(--nvl-text)}
.plabel{font-size:11px;color:var(--muted);letter-spacing:.06em;margin-bottom:5px;display:flex;align-items:center;gap:7px}
.pta{width:100%;min-height:58px;border:1px solid var(--nvl-border);border-radius:3px;padding:9px 11px;
  font-size:12.5px;line-height:1.8;resize:vertical;background:#fff;font-family:var(--nvl-font-ja)}
.pta:focus{border-color:var(--nvl-blue);outline:none}
.pfoot{display:flex;align-items:flex-start;gap:8px;margin-top:8px;flex-wrap:wrap}
.pfoot .why{font-size:11.5px;color:var(--muted);line-height:1.7;flex:1;min-width:0}
.docnote{border:1px solid var(--nvl-border);border-radius:4px;background:#fff;padding:11px 13px;margin-bottom:12px;
  font-size:11.5px;color:var(--muted);line-height:1.7;display:flex;gap:9px}

.sechd{display:flex;align-items:flex-end;gap:14px;margin:26px 0 10px}
.sechd h2{font-size:15px;font-weight:700;letter-spacing:.04em}
.sechd .sd{font-size:11.5px;color:var(--muted);padding-bottom:1px}

.infoline{display:flex;gap:9px;align-items:flex-start;border:1px solid var(--nvl-border);border-radius:3px;
  background:var(--faint);padding:10px 12px;font-size:11.5px;color:var(--nvl-text);line-height:1.75}
.infoline.b{border-color:var(--edit-line);background:var(--edit-bg)}

/* ---- バッジ（.chip系とは別系統。台帳・答え合わせの小さい状態タグ） ---- */
.badge{display:inline-flex;align-items:center;gap:4px;height:19px;padding:0 6px;border-radius:3px;
  font-size:10.5px;font-weight:500;letter-spacing:.04em;border:1px solid var(--nvl-border);color:var(--muted);
  white-space:nowrap}
.badge.b{border-color:var(--edit-line);color:var(--nvl-blue);background:var(--edit-bg)}
.badge.req{border-color:var(--err-line);color:var(--err);background:var(--err-bg)}
.badge.wn{border-color:var(--warn-line);color:var(--warn);background:var(--warn-bg)}
.badge.er{border-color:var(--err-line);color:var(--err);background:var(--err-bg)}
.badge.own{border-color:#C9C9C9;color:var(--nvl-ink);background:var(--nvl-bg-light)}

/* 相談モード・「そうじゃない」モーダルの選択カードはqoptを流用（.qopt自体は上で定義済み） */
.mbody .qo{display:flex;flex-direction:column;gap:8px}

/* ============================================================================
   使い方（#/help・public/js/help.js専用・2026-08-07改案）
   設計正本: internal/mockups/2026-08-07_binwan_help/mock.html + MOCK_NOTES.md。
   探す単位を「節」（H2）から「問い」（###見出し・.blk 1個）へ下げた構成。上から
   検索バー（sticky）→症状カード（常設）→使う流れ4工程→本文（左に目次sticky・右に節）。
   .phead/.ptitle/.btn/.btn--sec/.btn--gh/.eyebrow/.grad-text/.jalabel/.ic/.en は
   既存の共通クラス（style.css冒頭・tokens.css）をそのまま使う。ここでは新規分だけ追加する。
   ============================================================================ */
.hwrap{max-width:1140px;margin:0 auto;padding:30px 30px 90px}

/* --- 検索（スクロールしても手が届くよう上端に貼り付ける） --- */
.hwrap .srchwrap{position:sticky;top:0;z-index:6;background:var(--nvl-white);padding:8px 0 10px}
.hwrap .srch{position:relative;display:flex;align-items:center;border:1px solid var(--nvl-border);border-radius:4px;
  background:#fff;height:52px;padding:0 14px;gap:11px;transition:.12s}
.hwrap .srch:focus-within{border-color:var(--nvl-blue);box-shadow:inset 0 0 0 1px var(--nvl-blue)}
.hwrap .srch>.ic{color:var(--muted);width:20px;height:20px}
.hwrap .srch:focus-within>.ic{color:var(--nvl-blue)}
.hwrap .srch input{flex:1;min-width:0;border:0;outline:0;font-size:15px;letter-spacing:.02em;background:transparent}
.hwrap .srch input::placeholder{color:#A6A6A6;font-size:13.5px}
.hwrap .srch .kbd{font-family:var(--nvl-font-en);font-size:10.5px;color:var(--muted);border:1px solid var(--nvl-border);
  border-radius:3px;padding:2px 6px;line-height:1.4;flex:none}
.hwrap .srch .clr{width:26px;height:26px;display:grid;place-items:center;border-radius:3px;color:var(--muted);flex:none}
.hwrap .srch .clr:hover{background:var(--nvl-bg-light);color:var(--nvl-ink)}

/* --- 症状インデックス（「こんなときは」・画面上部に常設） --- */
.hwrap .symwrap{margin-top:6px;display:flex;gap:12px;align-items:flex-start}
.hwrap .symwrap .lb{flex:none;width:106px;padding-top:4px}
.hwrap .symwrap .lb .t{font-size:11.5px;font-weight:700;letter-spacing:.06em;display:flex;align-items:center;gap:5px;white-space:nowrap}
.hwrap .symwrap .lb .t .ic{color:var(--nvl-orange-text)}
.hwrap .symwrap .lb .s{font-size:10px;color:var(--muted);margin-top:3px;letter-spacing:0;white-space:nowrap}
.hwrap .syms{display:flex;flex-wrap:wrap;gap:5px;flex:1;min-width:0}
.hwrap .sym{display:inline-flex;align-items:center;gap:5px;height:27px;padding:0 9px;border:1px solid var(--nvl-border);
  border-radius:4px;font-size:11.5px;letter-spacing:.02em;color:var(--nvl-text);background:#fff;transition:.12s}
.hwrap .sym .ic{color:#B4B4B4}
.hwrap .sym:hover{border-color:var(--nvl-blue);color:var(--nvl-blue);background:var(--nvl-tint-blue)}
.hwrap .sym:hover .ic{color:var(--nvl-blue)}
.hwrap .sym.on{border-color:var(--nvl-blue);background:var(--nvl-blue);color:#fff}
.hwrap .sym.on .ic{color:#fff}

/* --- 使う流れ --- */
.hwrap .flowsec{margin-top:22px;padding-top:20px;border-top:1px solid var(--nvl-border)}
.hwrap .flowhead{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;gap:16px}
.hwrap .flowhead .l{display:flex;align-items:baseline;gap:10px}
.hwrap .flowhead .l .t{font-size:12.5px;font-weight:700;letter-spacing:.1em}
.hwrap .flowhead .l .s{font-size:11px;color:var(--muted)}
.hwrap .flowhead .r{display:flex;gap:6px}
.hwrap .flow{display:flex;align-items:stretch;gap:6px}
.hwrap .flowsec .step{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:3px;text-align:left;
  border:1px solid var(--nvl-border);border-radius:4px;padding:11px 13px 10px;background:#fff;transition:.12s}
.hwrap .flowsec .step:hover{border-color:var(--nvl-blue);background:var(--nvl-tint-blue)}
.hwrap .flowsec .step.on{border-color:var(--nvl-blue);background:var(--nvl-tint-blue);box-shadow:inset 0 0 0 1px var(--nvl-blue)}
.hwrap .step-top{display:flex;align-items:center;gap:8px;width:100%;margin-bottom:3px}
.hwrap .step-n{width:19px;height:19px;flex:none;display:grid;place-items:center;border-radius:2px;
  background:var(--nvl-gradient);color:#fff;font-size:10.5px;font-weight:600}
.hwrap .step-ic{color:var(--nvl-navy);margin-left:auto}
.hwrap .step-t{font-size:12.5px;font-weight:700;letter-spacing:.04em;color:var(--nvl-ink)}
.hwrap .step-s{font-size:10.5px;color:var(--muted);line-height:1.55}
.hwrap .step-r{font-size:10px;color:var(--nvl-blue);letter-spacing:.08em;margin-top:4px}
.hwrap .flow-ar{align-self:center;color:#C8C8C8;width:15px;height:15px;flex:none}
.hwrap .flowfoot{display:flex;align-items:center;gap:8px;margin-top:9px;font-size:11px;color:var(--muted);flex-wrap:wrap}
.hwrap .flowfoot b{font-weight:500;color:var(--nvl-text)}
.hwrap .jump{display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 9px;border:1px solid var(--nvl-border);
  border-radius:4px;font-size:11.5px;color:var(--nvl-text);transition:.12s}
.hwrap .jump:hover{border-color:var(--nvl-blue);color:var(--nvl-blue);background:var(--nvl-tint-blue)}
.hwrap .jump .ic{color:var(--muted)}
.hwrap .jump:hover .ic{color:var(--nvl-blue)}

/* --- 絞り込み中バー --- */
.hwrap .fbar{display:flex;align-items:center;gap:10px;margin-top:10px;padding:9px 12px;border:1px solid var(--edit-line);
  background:var(--edit-bg);border-radius:4px}
.hwrap .fbar .ft{font-size:12px;letter-spacing:.03em}
.hwrap .fbar .ft b{font-weight:700}
.hwrap .fbar .fc{font-family:var(--nvl-font-en);font-size:11.5px;color:var(--nvl-blue);font-weight:600}
.hwrap .fbar .sp{margin-left:auto}

/* --- 2カラム（左: 目次sticky・右: 本文） --- */
.hwrap .cols{display:flex;align-items:flex-start;gap:28px;margin-top:26px}
.hwrap .toc{width:196px;flex:none;position:sticky;top:76px;display:flex;flex-direction:column;gap:1px;padding-top:2px}
.hwrap .toc-lb{display:flex;align-items:center;gap:6px;margin-bottom:8px;padding:0 10px}
.hwrap .toc-lb .ic{color:var(--muted)}
.hwrap .toc-i{display:flex;align-items:center;gap:8px;padding:6px 10px;border-radius:2px;font-size:12px;font-weight:500;
  line-height:1.5;color:var(--nvl-text);border-left:2px solid transparent;text-decoration:none;transition:.12s}
.hwrap .toc-i:hover{background:var(--nvl-bg-light)}
.hwrap .toc-i.on{background:var(--nvl-tint-blue);color:var(--nvl-blue);font-weight:700;border-left-color:var(--nvl-blue)}
.hwrap .toc-n{font-size:10.5px;color:var(--muted);width:12px;flex:none}
.hwrap .toc-i.on .toc-n{color:var(--nvl-blue)}
.hwrap .toc-t{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hwrap .toc-c{margin-left:auto;font-size:10px;font-weight:600;color:#fff;background:var(--nvl-blue);border-radius:2px;
  padding:1px 5px;line-height:1.5;flex:none}
.hwrap .toc-i.zero{opacity:.34}
.hwrap .body{flex:1;min-width:0;max-width:760px}

/* --- セクション（H2・11本） --- */
.hwrap .sec{margin-bottom:34px;scroll-margin-top:14px}
.hwrap .sec-h{display:flex;align-items:center;gap:9px;padding-bottom:9px;margin-bottom:12px;border-bottom:1px solid var(--nvl-border)}
.hwrap .sec-ic{width:26px;height:26px;flex:none;display:grid;place-items:center;border:1px solid var(--nvl-border);
  border-radius:4px;color:var(--nvl-navy);background:var(--faint)}
.hwrap .sec-h h2{font-size:16.5px;font-weight:700;letter-spacing:.04em;display:flex;align-items:baseline;gap:9px}
.hwrap .sec-n{font-size:11.5px;color:var(--muted);font-weight:500}
.hwrap .sec-link{margin-left:auto;width:26px;height:26px;display:grid;place-items:center;border-radius:3px;color:#C4C4C4;transition:.12s}
.hwrap .sec-link:hover{background:var(--nvl-bg-light);color:var(--nvl-blue)}

/* --- 問い（###見出し・.blk 1個。lead=常時表示のイントロ／それ以外は折りたたみ項目） --- */
.hwrap .blk--lead{margin-bottom:12px}
.hwrap .blk--lead .blk-b p{margin-bottom:0}
.hwrap .blk-list{display:flex;flex-direction:column;gap:1px}
.hwrap .blk{border-radius:3px}
.hwrap .blk-h{display:flex;align-items:center;gap:8px;width:100%;text-align:left;padding:9px 10px;border-radius:3px;
  font-size:12.5px;font-weight:500;letter-spacing:.03em;color:var(--nvl-text);transition:.12s}
.hwrap .blk-h:hover{background:var(--nvl-bg-light)}
.hwrap .blk-chev{color:#B0B0B0;transition:transform .14s}
.hwrap .blk.open>.blk-h{color:var(--nvl-ink);font-weight:700}
.hwrap .blk.open>.blk-h .blk-chev{transform:rotate(90deg);color:var(--nvl-blue)}
.hwrap .blk-t{min-width:0}
.hwrap .blk-b{padding:4px 10px 16px 34px}
.hwrap .blk.open{background:var(--faint)}
.hwrap .blk.open>.blk-h{background:transparent}

/* --- 本文タイポ（.blk-b 内） --- */
.hwrap .blk-b p{font-size:12.5px;line-height:1.9;color:var(--nvl-text);margin-bottom:12px}
.hwrap .blk-b p:last-child{margin-bottom:0}
.hwrap .blk-b ol{margin:0 0 14px 20px;display:flex;flex-direction:column;gap:7px}
.hwrap .blk-b li{font-size:12.5px;line-height:1.8;color:var(--nvl-text)}
.hwrap .blk-b b{font-weight:700;color:var(--nvl-ink)}
.hwrap .blk-b .tblwrap{overflow-x:auto;margin-bottom:14px}
.hwrap mark.hit{background:rgba(249,115,22,.20);color:inherit;border-radius:2px;padding:0 1px}

/* --- 自作図（画像4枚では足りない箇所を補う視覚補助。public/js/help.js の ITEM_EXTRA_HTML） --- */
.hwrap .dfig{border:1px solid var(--nvl-border);border-radius:4px;padding:14px 16px;margin-bottom:14px;background:#fff}
.hwrap .dfig-note{font-size:11px;color:var(--muted);margin:10px 0 0;line-height:1.7}
.hwrap .cf-row{display:flex;align-items:center;gap:14px;padding:7px 0}
.hwrap .cf-row+.cf-row{border-top:1px solid var(--line-soft)}
.hwrap .cf-src{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--nvl-text);width:190px;flex:none}
.hwrap .cf-src .ic{color:var(--nvl-navy)}
.hwrap .cf-ar{color:#C8C8C8;width:16px;height:16px}
.hwrap .cf-out{display:flex;align-items:baseline;gap:4px}
.hwrap .cf-out b{font-size:22px;font-weight:600;color:var(--nvl-blue);line-height:1}
.hwrap .cf-out span{font-size:11.5px;color:var(--nvl-text)}
.hwrap .cf-out em{font-style:normal;font-size:10.5px;color:var(--muted);margin-left:8px;letter-spacing:.06em}
.hwrap .cf-out--x2 b{color:var(--nvl-orange-text)}
.hwrap .dfig--alert{display:flex;gap:14px;padding:0;border:0;background:transparent}
.hwrap .af{flex:1;border:1px solid var(--nvl-border);border-radius:4px;padding:12px 14px;background:#fff}
.hwrap .af-h{display:flex;align-items:center;gap:7px;font-size:12.5px;font-weight:700;letter-spacing:.06em;margin-bottom:8px}
.hwrap .af-h i{width:11px;height:11px;border-radius:2px;flex:none;font-style:normal}
.hwrap .af--r{border-color:var(--err-line);background:var(--err-bg)}
.hwrap .af--r .af-h{color:var(--err)}
.hwrap .af--r .af-h i{background:var(--err)}
.hwrap .af--y{border-color:var(--warn-line);background:var(--warn-bg)}
.hwrap .af--y .af-h{color:var(--warn)}
.hwrap .af--y .af-h i{background:var(--warn)}
.hwrap .af ul{list-style:none;display:flex;flex-direction:column;gap:5px}
.hwrap .af li{font-size:11.5px;line-height:1.65;color:var(--nvl-text);padding-left:11px;position:relative}
.hwrap .af li::before{content:"";position:absolute;left:0;top:8px;width:4px;height:1px;background:currentColor;opacity:.5}
.hwrap .af-f{margin-top:9px;padding-top:8px;border-top:1px solid rgba(0,0,0,.07);font-size:11px;font-weight:500;letter-spacing:.03em}
.hwrap .af--r .af-f{color:var(--err)}
.hwrap .af--y .af-f{color:var(--warn)}
.hwrap .dfig--roles{display:flex;flex-direction:column;gap:7px}
.hwrap .rf{display:flex;align-items:center;gap:12px}
.hwrap .rf-n{width:52px;flex:none;font-size:11.5px;font-weight:700;letter-spacing:.06em;text-align:right}
.hwrap .rf-bar{height:28px;border-radius:3px;background:var(--nvl-gradient);display:flex;align-items:center;
  padding:0 11px;min-width:0}
.hwrap .rf-bar span{font-size:11px;color:#fff;letter-spacing:.03em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hwrap .rf-bar--2{background:linear-gradient(135deg,#2E93D4,#8FDFEF)}
.hwrap .rf-bar--3{background:linear-gradient(135deg,#7FB6D8,#B9E9F4)}
.hwrap .rf-bar--3 span{color:var(--nvl-navy)}

/* --- 0件（症状カード・工程を出して行き止まりにしない・PITFALLS P5対策） --- */
.hwrap .nores{border:1px solid var(--nvl-border);border-radius:4px;padding:26px 24px;text-align:center;background:var(--faint)}
.hwrap .nores .h{font-size:14px;font-weight:700;letter-spacing:.05em;margin-bottom:6px}
.hwrap .nores .s{font-size:12px;color:var(--muted);line-height:1.9}
.hwrap .nores .q{color:var(--nvl-ink);font-weight:700}
.hwrap .nores .acts{display:flex;gap:6px;justify-content:center;margin-top:14px;flex-wrap:wrap}

/* SPEC F18-14（2026-08-01）: AI設定の答え合わせ画面のページ送り。複数ページの書類で
   2ページ目以降を見られるようにするための最小のUI（1ページの時はJSがhiddenにする）。 */
.tcdocnav{display:flex;align-items:center;justify-content:center;gap:8px;margin:8px 0 6px}
.tcdocnav .num{font-family:var(--nvl-font-en);font-size:11.5px;color:var(--muted);min-width:52px;text-align:center}

/* SPEC F4-31（2026-08-01）: ブラウザ内蔵PDFビューアでの原本表示。
   PDF.jsが描けない白黒スキャン（CCITTFaxDecode）等はこちらへ切り替える。
   canvas方式（.vscroll）とは排他で、JSがhidden属性を出し分ける。 */
.nativepdf{flex:1;min-width:0;min-height:0;display:flex;flex-direction:column;background:var(--nvl-bg-light)}
.nativepdf-note{padding:8px 14px;font-size:11.5px;line-height:1.6;color:var(--muted);
  background:#fff;border-bottom:1px solid var(--nvl-border)}
.nativepdf iframe{flex:1;width:100%;border:0;background:var(--nvl-bg-light)}

/* ---------------------------------------------------------------------------
   認証3画面のレスポンシブ（W11・2026-08-03。BOARD.md 2026-08-03_yomitoki_mail A9）
   対象は #screen-login / #screen-forgot / #screen-invite の3画面だけ（受入条件A9・J6・J7）。
   招待リンク・パスワード再設定リンクはメールで送られ、メールはスマホで開かれるため、
   この3画面だけ入口がスマホになる。アプリ本体（#screen-app・.shell/.side/各view）は
   PC前提の商品のままなので対象外（既存の.loginL/.loginR/.loginfootの定義は1行も変えない・
   768px超では従来と同じ見た目のまま＝受入条件J7・J8）。
   .loginR（グラデーション付きの説明パネル）は768px以下で非表示にする（下へ回さない）。
   理由: ①スマホで来る人はメールのリンクを踏んだ人で、説明文でなくフォームに用がある
   ②下へ回すレイアウトは新規CSSが増えるが、非表示なら既存クラスの上書きだけで済む。
   --------------------------------------------------------------------------- */
@media (max-width:768px){
  #screen-login .loginL,
  #screen-forgot .loginL,
  #screen-invite .loginL{
    width:100%;
    padding:0 24px;
  }
  #screen-login .loginR,
  #screen-forgot .loginR,
  #screen-invite .loginR{
    display:none;
  }
  /* .loginfoot はログイン画面で<span>+<a>の2要素が横並びになるため、狭幅で折り返す
     （横スクロールを出さないため・受入条件J6）。#screen-inviteのloginfootは<a>1つだけなので
     対象外でよい。 */
  #screen-login .loginfoot,
  #screen-forgot .loginfoot{
    flex-wrap:wrap;
    row-gap:8px;
  }
}

/* ---------------------------------------------------------------------------
   初回オンボーディングガイド（T7・SPEC F29-46〜F29-57・S283・S284・2026-08-06追加）
   .mbgとは独立クラス（route()のui.closeAllModals()の対象にしない＝hashchangeで消えない・
   F29-49: 背景クリック・Escでも閉じない）。中身はapp.jsが組み立てる。
   色は既存トークンのみ使用（tokens.css変更なし）。--nvl-orangeは「次にやること」の
   ナビ強調1箇所だけに使う（装飾のみ・1画面5%以下の原則）。ドロップシャドウは使わない
   （brand_design_guideline.md「カードは枠線1px＋角丸0〜4px。ドロップシャドウは使わない」）。
   --------------------------------------------------------------------------- */
.ob-overlay{position:fixed;inset:0;background:rgba(8,8,8,.45);display:none;
  align-items:center;justify-content:center;z-index:100;padding:28px}
.ob-overlay.on{display:flex}
.ob-card{background:#fff;border:1px solid #D5D5D5;border-radius:4px;width:100%;max-width:560px;
  max-height:82vh;overflow:auto}
.ob-head{padding:26px 28px 6px}
.ob-head h2{font-size:19px;font-weight:700;letter-spacing:.04em;margin:8px 0 10px}
.ob-lede{font-size:12.5px;line-height:1.8;color:var(--nvl-text)}
.ob-steplist{list-style:none;padding:14px 28px 6px;display:flex;flex-direction:column;gap:14px}
.ob-steplist li{display:flex;gap:12px;align-items:flex-start}
.ob-num{flex:none;width:22px;height:22px;border-radius:50%;background:var(--nvl-tint-blue);
  color:var(--nvl-blue);font-family:var(--nvl-font-en);font-size:11.5px;font-weight:600;
  display:flex;align-items:center;justify-content:center;margin-top:1px}
.ob-steplabel{font-size:13px;font-weight:700;letter-spacing:.02em}
.ob-stepdesc{font-size:11.5px;color:var(--muted);line-height:1.7;margin-top:2px}
.ob-foot{display:flex;justify-content:flex-end;gap:10px;padding:20px 28px 26px;flex-wrap:wrap}

/* 右下パネル（open）。幅は375px幅でも左右16pxずつ確保できるようclampする（P10対策）。 */
.ob-panel{position:fixed;right:24px;bottom:24px;width:340px;max-width:calc(100vw - 32px);
  background:#fff;border:1px solid var(--nvl-border);border-radius:4px;z-index:90;
  display:none;flex-direction:column;overflow:hidden;max-height:calc(100vh - 48px)}
.ob-panel.on{display:flex}
.ob-panelhead{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:13px 14px;border-bottom:1px solid var(--nvl-border)}
.ob-paneltitle{font-size:12.5px;font-weight:700;letter-spacing:.03em}
.ob-minbtn,.ob-closebtn{flex:none;width:24px;height:24px;border:none;background:transparent;
  color:var(--muted);border-radius:2px;cursor:pointer;font-size:15px;line-height:1;
  display:flex;align-items:center;justify-content:center}
.ob-minbtn:hover,.ob-closebtn:hover{background:var(--nvl-bg-light);color:var(--nvl-ink)}
.ob-checklist{list-style:none;padding:6px 8px;overflow:auto;display:flex;flex-direction:column;gap:2px}
.ob-checklist li{display:flex;gap:10px;align-items:flex-start;padding:9px 8px;border-radius:2px}
.ob-checklist li.done .ob-steplabel{color:var(--muted);text-decoration:line-through}
.ob-stepcheck{flex:none;width:19px;height:19px;margin-top:1px;border-radius:3px;
  border:1.5px solid #C9C9C9;background:#fff;cursor:pointer;display:flex;align-items:center;
  justify-content:center;color:#fff;padding:0}
.ob-checklist li.done .ob-stepcheck{background:var(--nvl-gradient);border-color:transparent}
.ob-checklist .ic{width:12px;height:12px}
.ob-donebody{padding:14px 16px 18px}
.ob-donebody p{font-size:12px;line-height:1.8;color:var(--nvl-text)}
.ob-donefoot{display:flex;justify-content:flex-end;gap:8px;margin-top:14px;flex-wrap:wrap}

/* 右下ピル（minimized） */
.ob-pill{position:fixed;right:24px;bottom:24px;z-index:90;height:36px;padding:0 16px;
  border-radius:128px;background:var(--nvl-gradient);color:#fff;border:none;cursor:pointer;
  font-size:12px;font-weight:600;letter-spacing:.02em}
.ob-pill:hover{filter:brightness(1.06)}

/* サイドナビ「次にやること」の強調（F29-50③・橙は装飾のみ・1画面5%以下の原則） */
.nitem.ob-next{box-shadow:inset 0 0 0 1.5px var(--nvl-orange)}