/* =========================================================
   GOLIXX 共通UI部品
   正本: _運用/memory/香林UIデザイン.md §2-§7
   前提: tokens.css を先に読み込むこと。
   ========================================================= */

*{box-sizing:border-box;margin:0;padding:0}
/* ★hidden 属性は必ず効かせる。
   .flash{display:flex} や .badge{display:inline-block} のほうが
   ブラウザ標準の [hidden]{display:none} より詳細度が高く、
   「hidden を付けたのに出たまま」が起きる（実際に「コピーしました」が
   最初から表示されていた）。ここで一度だけ強制する。 */
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%}
body{
  font-family:"Segoe UI","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;
  font-size:var(--fs-body); line-height:1.8; color:var(--text);
  background:var(--bg);
  overflow-x:hidden;                 /* モバイル横スクロール禁止（UIレビュー基準D 最重要） */
}
img{max-width:100%;height:auto}
a{color:var(--primary)}
a:hover{color:var(--primary-d)}
/* W2.4.7 フォーカスの可視化を全操作要素へ一括定義 */
:focus-visible{outline:3px solid var(--primary);outline-offset:2px;border-radius:var(--r-sm)}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--sp-4)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- アプリバー ---------- */
.appbar{position:sticky;top:0;z-index:20;background:var(--surface);border-bottom:1px solid var(--line)}
.appbar-in{max-width:var(--maxw);margin:0 auto;padding:0 var(--sp-4);min-height:56px;
  display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:var(--sp-2);text-decoration:none;color:var(--text);min-height:44px}
.brand-logo{width:32px;height:32px;border-radius:var(--r-sm)}
.brand-name{font-size:var(--fs-2xl);font-weight:700;letter-spacing:.04em}
.brand-name .tm{font-size:var(--fs-xs);vertical-align:super;font-weight:400;margin-left:1px}
.brand-sub{font-size:var(--fs-sm);color:var(--muted);font-weight:700}
.gnav{margin-left:auto;display:flex;gap:var(--sp-1);flex-wrap:wrap}
.gnav a{display:inline-flex;align-items:center;min-height:40px;padding:0 var(--sp-3);
  border-radius:var(--r-pill);text-decoration:none;color:var(--text);font-size:var(--fs-md);font-weight:600}
.gnav a:hover{background:var(--bg-hover)}
/* 現在地は色だけで伝えない：淡色地＋太字＋下線インジケータの3点 */
.gnav a[aria-current="page"]{background:var(--primary-l);color:var(--primary-d);font-weight:700;
  box-shadow:inset 0 -3px 0 var(--primary)}

/* ---------- ボタン（ピル形状・主=塗り／副=ゴースト） ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);
  min-height:var(--control-h-touch);padding:var(--sp-2) var(--sp-5);
  border-radius:var(--r-pill);border:1px solid var(--primary);
  background:var(--primary);color:#fff;
  font-family:inherit;font-size:var(--fs-lg);font-weight:700;text-decoration:none;cursor:pointer;
  transition:background .12s}
.btn:hover{background:var(--primary-d);border-color:var(--primary-d);color:#fff}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.55;cursor:not-allowed}
.btn.ghost{background:var(--surface);color:var(--primary)}
.btn.ghost:hover{background:var(--primary-l);color:var(--primary-d)}
.btn.ok{background:var(--ok);border-color:var(--ok)}
.btn.ok:hover{background:var(--ok-text);border-color:var(--ok-text)}
.btn.danger{background:var(--warn);border-color:var(--warn)}
.btn.danger:hover{background:var(--expense-d);border-color:var(--expense-d)}
/* amber の塗りボタンは --amber-d(#e65100) だと白文字が 3.79:1 で AA を割る（実測）。
   塗りには濃い --amber-text(#8a3200) を使う。 */
.btn.amber{background:var(--amber-text);border-color:var(--amber-text)}
.btn.amber:hover{background:#6d2800;border-color:#6d2800}
.btn.neutral{background:var(--neutral);border-color:var(--neutral)}
.btn.neutral:hover{background:var(--neutral-d);border-color:var(--neutral-d)}
.btn.block{width:100%}
.btn.sm{min-height:36px;padding:var(--sp-1) var(--sp-3);font-size:var(--fs-md)}
.btn.lg{min-height:56px;font-size:var(--fs-xl);padding:var(--sp-3) var(--sp-6)}
/* ★2026-07-26 追加：ラベルが折り返すと --r-pill:999px が「高さ基準の楕円」を作り、
   幅126pxのボタンが 126x107px の真円になっていた（クイズブザー司会画面・320px実測）。
   折り返しうる狭幅では左右paddingを詰め、角丸を md に落として形の崩壊を防ぐ。 */
@media (max-width:640px){
  .btn.lg{padding-inline:var(--sp-4)}
  /* ★C-4 保留中（2026-07-26）：640px以下でボタンの角丸をピル→8pxにする変更。
     見た目が変わるため香林さんの承認待ち。承認が出たら次の1行のコメントを外す。
     ※同時に入る padding-inline の縮小（上行）は「真円化」の実害対策なので先行適用している。 */
  /* .btn{border-radius:var(--r-md)} */
  .btn.pill{border-radius:var(--r-pill)}   /* 1行に収まると分かっている短いラベル用 */
}
/* 長いラベルのボタンは横に潰されない（隣の要素に押し負けて2行になるのを防ぐ） */
.btn.keep{flex:0 0 auto;white-space:nowrap}

/* ---------- カード・セクション ---------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);
  box-shadow:var(--shadow-sm);padding:var(--sp-5);margin-bottom:var(--sp-4)}
.card-h{font-size:var(--fs-xl);font-weight:700;color:var(--primary-d);margin-bottom:var(--sp-3)}
/* ★2026-07-26 修正（🔴）：`padding:var(--sp-6) 0` と書いていたため、
   同一要素に `class="wrap section"` を付けると .wrap の左右16pxを
   同詳細度・後勝ちで打ち消し、本文が画面の端に密着していた。
   クイズブザー(create/join/play/myq/pay/lp)・カイギのしたく(meeting/create/join)の
   計9ファイルで発生。padding-block にすれば左右に触らない。 */
.section{padding-block:var(--sp-6)}
.section.alt{background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.section h2{font-size:var(--fs-3xl);margin-bottom:var(--sp-4);padding-left:var(--sp-3);
  border-left:4px solid var(--primary);line-height:1.4}
.section .lead{color:var(--muted);margin-bottom:var(--sp-4)}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--sp-4)}
.pagehead{background:var(--primary-d);color:#fff;padding:var(--sp-5) 0}
.pagehead h1{font-size:var(--fs-3xl);letter-spacing:.02em}
.pagehead .sub{color:#dbe6f2;font-size:var(--fs-body);margin-top:var(--sp-1)}
.crumb{font-size:var(--fs-md);color:#dbe6f2;margin-bottom:var(--sp-2);
  display:flex;align-items:center;flex-wrap:wrap}
/* ★パンくずは本文中リンクではなくナビゲーション。実測 42x19px でタップ領域を割っていた */
.crumb a{color:#fff;text-decoration:underline;display:inline-flex;align-items:center;
  min-height:var(--tap-min);padding:0 var(--sp-1)}
.crumb .sep{margin:0 var(--sp-1)}

/* ---------- 通知・状態表示（色だけで伝えない：アイコン語＋枠線＋太字） ---------- */
.flash{border-radius:var(--r-md);padding:var(--sp-3) var(--sp-4);margin-bottom:var(--sp-4);
  font-weight:700;border:1px solid transparent;display:flex;gap:var(--sp-2);align-items:flex-start}
.flash.ok{background:var(--ok-bg);color:var(--ok-text);border-color:#bcd9be}
.flash.err{background:var(--warn-bg);color:var(--warn);border-color:#f0b9b4}
.flash.warn{background:var(--amber-bg);color:var(--amber-text);border-color:var(--bd-amber)}
.flash.info{background:var(--primary-l);color:var(--primary-d);border-color:var(--bd-primary)}
.note{background:var(--bg-subtle);border:1px solid var(--line);border-radius:var(--r-md);
  padding:var(--sp-3) var(--sp-4);font-size:var(--fs-lg);color:var(--muted)}
.badge{display:inline-block;border-radius:var(--r-pill);padding:1px var(--sp-3);
  font-size:var(--fs-sm);font-weight:700}
.badge.free{background:var(--bg-subtle);color:var(--muted);border:1px solid var(--line-strong)}
.badge.paid{background:var(--ok-bg);color:var(--ok-text);border:1px solid #bcd9be}
.badge.warn{background:var(--amber-bg);color:var(--amber-text);border:1px solid var(--bd-amber)}

/* ---------- QRコード（Golixx\Qr が出力する SVG）----------
   白地・黒モジュール固定（21:1）。印刷・スクショでも読めるよう色を薄くしない。 */
.qr-svg{display:block;width:100%;height:auto;background:#fff}
.qr-frame{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);
  padding:var(--sp-2);margin:0 auto;width:100%;max-width:260px}
/* 拡大表示：入れ物の幅いっぱい／縦にも収まる範囲でできるだけ大きく（会場で見せる用）。
   下に置く「参加コード」まで一緒に見えている必要があるので、画面の高さから逆算する。 */
/* ★2026-07-26 修正：引き算の 340px が付帯要素（見出し・リード・手順文・代替手順・
   閉じるボタン）の実高より小さく、641/768px幅で参加コードと「閉じる」が
   画面外に出ていた（実測 clientHeight 828 / scrollHeight 1027＝199px不足）。
   460px に増やして「QRと参加コードと閉じるが必ず同時に見える」を満たす。 */
.qr-frame.lg{max-width:min(100%, max(200px, calc(88vh - 460px)))}
.qr-frame.is-locked{position:relative}
.qr-frame.is-locked::after{content:"受付停止中";position:absolute;inset:0;display:flex;
  align-items:center;justify-content:center;background:rgba(255,255,255,.82);
  color:var(--warn);font-weight:700;font-size:var(--fs-xl);border-radius:var(--r-md)}

/* ---------- フォーム ---------- */
.field{margin-bottom:var(--sp-4)}
.field > label{display:block;font-size:var(--fs-md);font-weight:700;color:var(--muted);margin-bottom:var(--sp-1)}
.field .req::after{content:" *";color:var(--warn)}
.field .hint{font-size:var(--fs-md);color:var(--muted);margin-top:var(--sp-1)}
/* ★2026-07-26 修正：type の列挙漏れで time/date/tel/url/search が対象外だった。
   日程のしたく create.php の時刻入力14個が 24px高・13.3px のまま出ており、
   タップ領域34px・入力欄16px の両方を割っていた（実測）。
   列挙をやめ「除外指定」に変える＝今後 type が増えても漏れない。
   除外は :where() で包み、詳細度を上げない（0,0,1＝素の要素と同じ）。
   こうしないと下の input[type=time]{width:auto} が詳細度負けして効かない。 */
input:where(:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=range]):not([type=file]):not([type=submit]):not([type=button]):not([type=image]):not([type=color])),
textarea,select{
  width:100%;min-height:var(--control-h-touch);padding:var(--sp-2) var(--sp-3);
  font-family:inherit;font-size:var(--fs-body);   /* ★16px以上＝iOSの自動ズーム防止 */
  color:var(--text);background:var(--surface);
  border:1px solid var(--line-strong);border-radius:var(--r-md)}
/* 時刻・日付は内容ぶんの幅でよい（100%だと1行に2つ並べられない） */
input[type=time],input[type=date],input[type=month],input[type=week],input[type=datetime-local]{
  width:auto;max-width:100%}
input:focus,textarea:focus,select:focus{outline:2px solid var(--primary-l);border-color:var(--primary)}
textarea{min-height:88px;line-height:1.7;resize:vertical}
/* ★2026-07-26 追加：チェックボックス・ラジオの実寸を決めていなかったため、
   ブラウザ既定の 13x13px のまま出ていた（カイギのしたく 宿題の完了チェック・全4幅で実測）。
   基準D「タップ領域34px」を大きく割る。見た目20px＋親ラベルで領域を確保する。 */
input[type=checkbox],input[type=radio]{width:var(--check);height:var(--check);
  flex:0 0 auto;accent-color:var(--primary);cursor:pointer}
/* チェック/ラジオを包むラベルは行全体をヒット領域にする（正本§7） */
label:has(> input[type=checkbox]),label:has(> input[type=radio]){
  display:inline-flex;align-items:center;gap:var(--sp-2);min-height:var(--tap-min);cursor:pointer}
.form-foot{display:flex;gap:var(--sp-3);justify-content:flex-end;flex-wrap:wrap;margin-top:var(--sp-4)}

/* ---------- テーブル ---------- */
.tbl-wrap{border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--shadow-sm);overflow-x:auto;background:var(--surface)}
table.tbl{width:100%;border-collapse:collapse}
table.tbl th,table.tbl td{padding:var(--sp-2) var(--sp-3);font-size:var(--fs-lg);
  border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
table.tbl th{background:var(--bg-subtle);color:var(--muted);font-size:var(--fs-md);font-weight:700}
table.tbl th:not(:first-child),table.tbl td:not(:first-child){border-left:1px solid var(--line-v)}
table.tbl tbody tr:nth-child(even){background:var(--stripe)}
table.tbl tbody tr:hover{background:var(--bg-hover)}
.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}

/* ---------- 法的文書 ---------- */
.legal{max-width:820px}
.legal h2{font-size:var(--fs-2xl);margin-top:var(--sp-6);margin-bottom:var(--sp-2)}
.legal h2:first-of-type{margin-top:0}
.legal p,.legal li{font-size:var(--fs-lg)}
.legal ol,.legal ul{padding-left:1.6em;margin:var(--sp-2) 0 var(--sp-4)}
.legal li{margin-bottom:var(--sp-1)}
.legal .date{color:var(--muted);font-size:var(--fs-sm);margin-top:var(--sp-5)}
.spec{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);
  box-shadow:var(--shadow-sm);overflow:hidden}
.spec > div{display:grid;grid-template-columns:210px 1fr;border-bottom:1px solid var(--line)}
.spec > div:last-child{border-bottom:none}
.spec dt{background:var(--bg-subtle);color:var(--muted);font-weight:700;font-size:var(--fs-lg);
  padding:var(--sp-3) var(--sp-4);border-right:1px solid var(--line)}
.spec dd{padding:var(--sp-3) var(--sp-4);font-size:var(--fs-lg)}

/* ---------- フッター ---------- */
.site-foot{background:var(--neutral-d);color:#c9d1d9;margin-top:var(--sp-6);
  padding:var(--sp-6) 0 var(--sp-5);font-size:var(--fs-lg)}
.site-foot .foot-run{color:#fff;font-weight:700;margin-bottom:var(--sp-3)}
.foot-nav{display:flex;gap:var(--sp-2) var(--sp-4);flex-wrap:wrap;margin-bottom:var(--sp-4)}
.foot-nav a{color:#c9d1d9;text-decoration:underline;display:inline-flex;align-items:center;min-height:40px}
.foot-nav a:hover{color:#fff}
.site-foot small{display:block;font-size:var(--fs-md);color:#aab3bd}

/* ---------- モバイル（≤640px） ---------- */
@media (max-width:640px){
  .appbar-in{padding-top:var(--sp-2);padding-bottom:var(--sp-2)}
  .gnav{margin-left:0;width:100%;justify-content:flex-start}
  .section{padding-block:var(--sp-5)}   /* ★同上。ここも左右を打ち消していた */
  .card{padding:var(--sp-4)}
  .spec > div{grid-template-columns:1fr}          /* 1列化＝横スクロール回避 */
  .spec dt{border-right:none;border-bottom:1px dashed var(--line);padding-bottom:var(--sp-2)}
  .form-foot .btn{width:100%}
}

/* =========================================================================
   ▼▼▼ 2026-07-26 追加：共通部品の引き上げ（チェリーベリーデザイン）
   出典 UI診断_20260726.md。4製品の独自CSSに「バイト単位で同一のルールが82件」
   重複していたため、ここへ集約した。各製品CSSからは削除して本ファイルを使う。
   ★ここに書く値は生pxを新設せず、すべて tokens.css 参照。
   ========================================================================= */

/* ---------- 共通ユーティリティ ---------- */
.skip-link{position:absolute;left:-9999px;top:0;background:var(--primary-d);color:#fff;
  padding:var(--sp-2) var(--sp-4);z-index:var(--z-skiplink);border-radius:0 0 var(--r-md) 0}
.skip-link:focus{left:0}
.wrap.narrow{max-width:var(--maxw-narrow)}
.h1{font-size:var(--fs-3xl);margin-bottom:var(--sp-2)}
.lead{color:var(--muted);margin-bottom:var(--sp-4)}
.brand-sub{display:block;line-height:1.2}
.gnav .gnav-cta{background:var(--primary);color:#fff;font-weight:700}
.gnav .gnav-cta:hover{background:var(--primary-d);color:#fff}
.br-sp{display:none}
/* 並べる/積むの最小ユーティリティ（flexの手書き重複を止める） */
.row{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap}
.row.tight{gap:var(--sp-1)}
.row.spread{justify-content:space-between}
.row.top{align-items:flex-start}
.stack{display:flex;flex-direction:column;gap:var(--sp-2)}
.push{margin-left:auto}
.muted{color:var(--muted)}
.nowrap{white-space:nowrap}
.ellip{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}

/* ---------- ヒーロー（LP共通）----------
   製品差は --hero-2 / --hero-3 / --hero-ink の3スロットだけ。
   以前は4製品がグラデ全体を各自ハードコードしていた。 */
.hero{background:linear-gradient(135deg,var(--primary-d) 0%,var(--hero-2) 60%,var(--hero-3) 100%);
  color:#fff;padding:var(--sp-7) 0}
.hero-in{text-align:center}
.hero-eyebrow{display:inline-block;background:rgba(255,255,255,.16);border:var(--bw) solid rgba(255,255,255,.4);
  border-radius:var(--r-pill);padding:var(--sp-half) var(--sp-4);font-size:var(--fs-md);font-weight:700;margin-bottom:var(--sp-4)}
.hero-h1{font-size:var(--fs-hero);line-height:1.35;letter-spacing:.01em;margin-bottom:var(--sp-4)}
.hero-lead{color:var(--hero-ink);max-width:var(--maxw-narrow);margin:0 auto var(--sp-5)}
.hero-btns{display:flex;gap:var(--sp-3);justify-content:center;flex-wrap:wrap}
.hero-btns .btn.ghost{background:transparent;color:#fff;border-color:#fff}
.hero-btns .btn.ghost:hover{background:rgba(255,255,255,.14);color:#fff}
.hero-note{margin-top:var(--sp-4);font-size:var(--fs-lg);color:var(--hero-ink)}

/* ---------- 3ステップ紹介 ---------- */
.steps3{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(var(--col-min),1fr));gap:var(--sp-4)}
.steps3 li{background:var(--surface);border:var(--bw) solid var(--line);border-radius:var(--r-md);
  box-shadow:var(--shadow-sm);padding:var(--sp-5);position:relative}
.steps3 h3{font-size:var(--fs-xl);color:var(--primary-d);margin-bottom:var(--sp-1)}
.step-n{display:inline-flex;align-items:center;justify-content:center;width:var(--sp-6);height:var(--sp-6);
  border-radius:var(--r-full);background:var(--primary);color:#fff;font-weight:700;margin-bottom:var(--sp-2)}

/* ---------- 進捗ステップ（ウィザード）---------- */
.steps{display:flex;align-items:center;justify-content:center;margin-bottom:var(--sp-5);flex-wrap:wrap;gap:var(--sp-1);
  list-style:none}   /* ★ol で組むと番号マーカーが二重に出る */
.step-item{display:flex;align-items:center;gap:var(--sp-2);font-size:var(--fs-md);color:var(--muted);font-weight:600}
.step-item.active{color:var(--primary-d);font-weight:700}
.step-item.done{color:var(--ok-text)}
.step-num{width:var(--sp-6);height:var(--sp-6);border-radius:var(--r-full);background:var(--line-strong);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:var(--fs-sm);font-weight:700;flex:0 0 auto}
.step-item.active .step-num{background:var(--primary)}
/* 色だけで伝えない：完了は ✓ を必ず添える（W1.4.1） */
.step-item.done .step-num{background:var(--ok)}
.step-item.done .step-num::after{content:"✓"}
.step-item.done .step-num-txt{display:none}
.step-arrow{width:var(--sp-6);height:var(--bw-2);background:var(--line-strong);margin:0 var(--sp-2);flex:0 0 auto}
/* 折返しが起きる幅では矢印を消す（行末に線だけ残って意味不明になるため） */
@media (max-width:640px){
  .steps{justify-content:flex-start}
  .step-arrow{display:none}
  .step-item{flex:1 1 100%}
}
.wizard-step{display:none}
.wizard-step.active{display:block}

/* ---------- 料金プラン ---------- */
.plan-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(var(--col-min),1fr));gap:var(--sp-4)}
.plan{background:var(--surface);border:var(--bw) solid var(--line);border-radius:var(--r-md);
  box-shadow:var(--shadow-sm);padding:var(--sp-5)}
.plan-free{border:var(--bw-2) solid var(--ok)}
.plan-name{font-size:var(--fs-xl);font-weight:700;color:var(--primary-d)}
.plan-catch{font-size:var(--fs-md);color:var(--muted);margin-bottom:var(--sp-2)}
.plan-price{font-size:var(--fs-5xl);font-weight:700;font-variant-numeric:tabular-nums}
.plan-tax{font-size:var(--fs-md);font-weight:400;color:var(--muted)}
.plan-kind{font-size:var(--fs-md);color:var(--muted);margin-bottom:var(--sp-3)}
.plan-feat{list-style:none;border-top:var(--bw) solid var(--line);padding-top:var(--sp-3)}
.plan-feat li{font-size:var(--fs-lg);padding-left:1.4em;position:relative;margin-bottom:var(--sp-1)}
.plan-feat li::before{content:"✓";position:absolute;left:0;color:var(--ok);font-weight:700}
/* プラン比較表：スマホでは .tbl.cards と同じくカード化して横スクロールを出さない */
table.plan-compare{width:100%;border-collapse:collapse;margin:var(--sp-3) 0;background:var(--surface)}
table.plan-compare th,table.plan-compare td{border:var(--bw) solid var(--line);padding:var(--sp-2) var(--sp-3);
  font-size:var(--fs-md);text-align:left;vertical-align:top}
table.plan-compare th{background:var(--bg-subtle);color:var(--muted)}
/* 決済のプラン選択 */
.plan-pick{display:grid;grid-template-columns:repeat(auto-fit,minmax(var(--col-min-sm),1fr));gap:var(--sp-3);margin-bottom:var(--sp-4)}
.plan-pick a{display:block;text-decoration:none;color:var(--text);background:var(--surface);
  border:var(--bw) solid var(--line-strong);border-radius:var(--r-md);padding:var(--sp-4);text-align:center}
.plan-pick a.on{border:var(--bw-2) solid var(--primary);background:var(--primary-l);font-weight:700}
.plan-pick .pp-price{font-size:var(--fs-2xl);font-weight:700;display:block}
.plan-pick .pp-sel{font-size:var(--fs-sm);color:var(--primary-d);font-weight:700}

/* ---------- FAQ（details）---------- */
.faq details{background:var(--surface);border:var(--bw) solid var(--line);border-radius:var(--r-md);
  margin-bottom:var(--sp-2);box-shadow:var(--shadow-sm)}
.faq summary{cursor:pointer;padding:var(--sp-3) var(--sp-4);font-weight:700;min-height:var(--tap-lg);
  display:flex;align-items:center;gap:var(--sp-2)}
.faq summary:hover{background:var(--bg-hover)}
.faq details p{padding:0 var(--sp-4) var(--sp-4);color:var(--text)}
/* 折りたたみ（本文中で説明を畳む用。ⓘと並ぶ「説明を減らす」主力部品）*/
details.fold{margin:var(--sp-2) 0}
details.fold > summary{cursor:pointer;min-height:var(--tap-min);display:inline-flex;align-items:center;
  gap:var(--sp-1);color:var(--primary);font-size:var(--fs-md);font-weight:700;list-style:none}
details.fold > summary::-webkit-details-marker{display:none}
details.fold > summary::before{content:"＋";font-weight:700}
details.fold[open] > summary::before{content:"−"}
details.fold > summary:hover{color:var(--primary-d);text-decoration:underline}
details.fold .fold-b{padding:var(--sp-2) 0 var(--sp-2) var(--sp-4);color:var(--muted);font-size:var(--fs-md);
  border-left:var(--bw-2) solid var(--line)}

/* ---------- 記事風LP ---------- */
.article{max-width:var(--maxw-article)}
.article h2{font-size:var(--fs-3xl);margin:var(--sp-6) 0 var(--sp-3);
  padding-left:var(--sp-3);border-left:var(--bw-4) solid var(--primary);line-height:1.4}
.article h3{font-size:var(--fs-xl);color:var(--primary-d);margin:var(--sp-5) 0 var(--sp-2)}
.article p,.article li{font-size:var(--fs-lg)}
.article ul,.article ol{padding-left:1.6em;margin:var(--sp-2) 0 var(--sp-4)}
.article li{margin-bottom:var(--sp-1)}
.article .cta-box{background:var(--primary-l);border:var(--bw) solid var(--bd-primary);
  border-radius:var(--r-md);padding:var(--sp-5);margin:var(--sp-5) 0;text-align:center}
.article .cta-box p{margin-bottom:var(--sp-3);font-weight:700}
.article table{width:100%;border-collapse:collapse;margin:var(--sp-3) 0;background:var(--surface)}
.article th,.article td{border:var(--bw) solid var(--line);padding:var(--sp-2) var(--sp-3);
  font-size:var(--fs-md);text-align:left;vertical-align:top}
.article th{background:var(--bg-subtle);color:var(--muted)}

/* ---------- 決済 ---------- */
.pay-summary{background:var(--bg-subtle);border:var(--bw) solid var(--line);border-radius:var(--r-md);
  padding:var(--sp-4);margin-bottom:var(--sp-4)}
.pay-summary dl{display:grid;grid-template-columns:auto 1fr;gap:var(--sp-2) var(--sp-4)}
.pay-summary dt{color:var(--muted);font-weight:700;font-size:var(--fs-md)}
.pay-summary dd{text-align:right;font-weight:700}
.pay-total{border-top:var(--bw) solid var(--line-strong);padding-top:var(--sp-2);margin-top:var(--sp-2);
  display:flex;justify-content:space-between;align-items:baseline;gap:var(--sp-3)}
.pay-total .amount{font-size:var(--fs-4xl);font-weight:700;font-variant-numeric:tabular-nums}
#card-container{background:var(--surface);border:var(--bw) solid var(--line-strong);
  border-radius:var(--r-md);padding:var(--sp-3);margin:var(--sp-4) 0;min-height:var(--embed-h)}

/* ---------- 参加コード・URL・キーバリュー ---------- */
.join-card,.create-card{background:var(--surface);border:var(--bw-2) solid var(--primary);border-radius:var(--r-lg);
  box-shadow:var(--shadow-sm);padding:var(--sp-5);max-width:var(--maxw-card);margin:0 auto}
.join-card h2,.create-card h2{font-size:var(--fs-2xl);margin-bottom:var(--sp-2);border:none;padding:0}
.code-input{font-size:var(--fs-6xl);letter-spacing:.22em;text-align:center;font-weight:700;
  font-variant-numeric:tabular-nums;min-height:var(--code-h)}
.code-big{font-size:var(--fs-8xl);font-weight:700;letter-spacing:.16em;text-align:center;
  font-variant-numeric:tabular-nums;color:var(--primary-d);background:var(--primary-l);
  border:var(--bw) solid var(--bd-primary);border-radius:var(--r-md);padding:var(--sp-3);margin:var(--sp-3) 0}
.code-inline{font-variant-numeric:tabular-nums;letter-spacing:.1em}
.urlbox{word-break:break-all;font-family:ui-monospace,Consolas,monospace;font-size:var(--fs-base);
  background:var(--bg-subtle);border:var(--bw) solid var(--line);border-radius:var(--r-md);padding:var(--sp-2) var(--sp-3)}
/* URL＋コピーボタンの1行。input は縮められる（min-width:0）ようにして横スクロールを防ぐ */
.url-share{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap;min-width:0}
.url-share input{flex:1 1 var(--col-min-sm);min-width:0;width:auto;font-size:var(--fs-body);
  background:var(--bg-subtle);font-family:ui-monospace,Consolas,monospace}
.kv{display:grid;gap:var(--sp-1)}
.kv > div{display:grid;grid-template-columns:var(--kv-label) 1fr;gap:var(--sp-3)}
.kv dt{color:var(--muted);font-size:var(--fs-md);font-weight:700}

/* ---------- ドロップゾーン（正本§3）---------- */
.dropzone{border:var(--bw-2) dashed var(--line-strong);background:var(--bg-subtle);border-radius:var(--r-md);
  padding:var(--sp-6) var(--sp-4);text-align:center;color:var(--muted);
  transition:border-color var(--dur-fast),background var(--dur-fast)}
.dropzone.is-drag{border-color:var(--primary);background:var(--primary-l);color:var(--primary-d)}

/* =========================================================================
   ▼ アプリ画面の共通部品（今まで共通基盤に「無かった」ため各製品が自作していた分）
   ========================================================================= */

/* ---------- タブ（正本§3）----------
   ★PCは下線インジケータ、スマホは折返しピル。
     overflow-x:auto の横スクロールタブは基準D違反なので使わない。 */
.tabs{display:flex;gap:var(--sp-1);border-bottom:var(--bw-2) solid var(--line);
  margin-bottom:var(--sp-4);flex-wrap:wrap}
.tab{font-family:inherit;font-size:var(--fs-lg);font-weight:700;color:var(--muted);
  background:none;border:none;padding:var(--sp-2) var(--sp-4);min-height:var(--tap-lg);cursor:pointer;
  border-bottom:var(--bw-3) solid transparent;margin-bottom:calc(var(--bw-2) * -1);
  display:inline-flex;align-items:center;gap:var(--sp-2)}
.tab:hover{color:var(--primary-d);border-bottom-color:var(--bd-primary)}
.tab[aria-selected="true"]{color:var(--primary-d);border-bottom-color:var(--primary)}
.tab .bal{display:inline-flex;align-items:center;min-height:var(--pill-h);padding:0 var(--sp-2);
  border-radius:var(--r-pill);border:var(--bw) solid var(--line-strong);background:var(--surface);
  font-size:var(--fs-xs);font-weight:700;color:var(--muted);font-variant-numeric:tabular-nums}
.tab[aria-selected="true"] .bal{background:var(--primary-l);border-color:var(--bd-primary);color:var(--primary-d)}
.tab-panel[hidden]{display:none}
@media (max-width:640px){
  /* 下線タブは複数行になると破綻する → 枠付きピルへ切り替える（正本§3）*/
  .tabs{border-bottom:none;gap:var(--sp-1)}
  .tab{border:var(--bw) solid var(--line-strong);border-radius:var(--r-pill);margin-bottom:0;
    padding:var(--sp-1) var(--sp-3);font-size:var(--fs-md);min-height:var(--tap)}
  .tab[aria-selected="true"]{background:var(--primary);border-color:var(--primary);color:#fff}
  .tab[aria-selected="true"] .bal{background:rgba(255,255,255,.22);border-color:rgba(255,255,255,.5);color:#fff}
}

/* ---------- ツールバー（操作の帯）----------
   はみ出したら折返す。横スクロールさせない。 */
.toolbar{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap;min-height:var(--toolbar-h);
  padding:var(--sp-2) var(--sp-3);background:var(--surface);border:var(--bw) solid var(--line);
  border-radius:var(--r-md);min-width:0}
.toolbar.sticky{position:sticky;top:0;z-index:var(--z-sticky)}
.toolbar-sep{flex:0 0 auto;width:var(--bw);align-self:stretch;background:var(--line);margin:0 var(--sp-1)}
.toolbar-grp{display:flex;align-items:center;gap:var(--sp-1);flex-wrap:wrap;min-width:0}

/* ---------- アイコンボタン（★kono と akaire で同名・別見た目だったので統一）----------
   見た目は小さくてよいがヒット領域は --tap-min 以上（正本§7）。必ず aria-label を付ける。 */
.btn-icon{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
  width:var(--tap-min);height:var(--tap-min);padding:0;
  border-radius:var(--r-full);border:var(--bw) solid transparent;background:transparent;
  color:var(--muted);font-family:inherit;font-size:var(--fs-lg);line-height:1;cursor:pointer;
  text-decoration:none;transition:background var(--dur-fast),color var(--dur-fast)}
.btn-icon:hover{background:var(--bg-hover);color:var(--primary-d)}
.btn-icon.bordered{border-color:var(--line-strong);background:var(--surface)}
.btn-icon.on{background:var(--primary-l);border-color:var(--primary);color:var(--primary-d)}
.btn-icon.danger{color:var(--warn)}
.btn-icon.danger:hover{background:var(--warn-bg)}
.btn-icon.lg{width:var(--tap-lg);height:var(--tap-lg);font-size:var(--fs-xl)}
/* hoverでしか出ない操作は :focus-within でも出す（正本§7） */
.hover-only{opacity:0;transition:opacity var(--dur-fast)}
:hover > .hover-only,:focus-within > .hover-only,.hover-only:focus-visible{opacity:1}
@media (hover:none){.hover-only{opacity:1}}   /* タッチ端末は常時表示 */

/* ---------- チップ（選択・フィルタ）---------- */
.chip{display:inline-flex;align-items:center;gap:var(--sp-1);min-height:var(--tap-min);
  padding:var(--sp-1) var(--sp-3);border:var(--bw) solid var(--line-strong);border-radius:var(--r-pill);
  background:var(--surface);color:var(--muted);font-family:inherit;font-size:var(--fs-md);font-weight:600;
  cursor:pointer;white-space:nowrap;transition:background var(--dur-fast),border-color var(--dur-fast)}
.chip:hover{border-color:var(--primary);color:var(--primary-d);background:var(--primary-l)}
/* 選択中は 色＋太字＋✓ の3点（色だけで伝えない W1.4.1） */
.chip.on{background:var(--primary);border-color:var(--primary);color:#fff;font-weight:700}
.chip.on::before{content:"✓";font-weight:700}
.chip-row{display:flex;gap:var(--sp-2);flex-wrap:wrap}
.chip.static{cursor:default;background:var(--bg-subtle);border-color:var(--line);font-size:var(--fs-sm);
  min-height:auto;padding:0 var(--sp-2)}
.chip.static:hover{background:var(--bg-subtle);border-color:var(--line);color:var(--muted)}

/* ---------- セグメント選択（出欠など排他選択）----------
   role="radiogroup" + button[aria-pressed] で組む。 */
.seg{display:flex;gap:var(--sp-2);flex-wrap:wrap}
.seg button{font-family:inherit;font-size:var(--fs-md);font-weight:700;
  border:var(--bw) solid var(--line-strong);border-radius:var(--r-pill);background:var(--surface);
  color:var(--text);padding:var(--sp-1) var(--sp-3);min-height:var(--tap);cursor:pointer;
  display:inline-flex;align-items:center;gap:var(--sp-1)}
.seg button:hover{background:var(--bg-hover)}
.seg button.on{color:#fff;border-color:transparent}
.seg button.on[data-tone="ok"]{background:var(--ok)}
.seg button.on[data-tone="warn"]{background:var(--warn)}
.seg button.on[data-tone="neutral"]{background:var(--neutral)}
.seg button.on[data-tone="primary"]{background:var(--primary)}

/* ---------- リストカード（見出し＋メタ＋操作の1件）----------
   quiz(.q-list) / kaigi(.agenda-list,.homework-list,.cost-list,.attendee-list) /
   kono(.recent-card) が同じ形を各自実装していた。 */
.lcard-list{list-style:none;display:flex;flex-direction:column;gap:var(--sp-2)}
.lcard{background:var(--surface);border:var(--bw) solid var(--line);border-radius:var(--r-md);
  padding:var(--sp-3) var(--sp-4)}
.lcard.is-self,.lcard.on{border-color:var(--primary);background:var(--primary-l)}
.lcard.done{border-left:var(--bw-4) solid var(--ok)}
.lcard-row{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--sp-3);flex-wrap:wrap}
.lcard-body{flex:1 1 var(--col-min);min-width:0}      /* ★min-width:0 が無いと長文で横に伸びる */
.lcard-title{font-weight:700;word-break:break-word}
.lcard-meta{color:var(--muted);font-size:var(--fs-md);word-break:break-word}
.lcard-acts{display:flex;gap:var(--sp-2);flex:0 0 auto;flex-wrap:wrap}
.lcard-acts .btn{min-height:var(--tap-min);padding:0 var(--sp-3);font-size:var(--fs-md)}
a.lcard{display:block;text-decoration:none;color:var(--text)}
a.lcard:hover{background:var(--bg-hover)}

/* ---------- 折りたたみセクション ---------- */
.sect{background:var(--surface);border:var(--bw) solid var(--line);border-radius:var(--r-md);
  box-shadow:var(--shadow-sm);overflow:hidden;margin-bottom:var(--sp-3)}
.sect-h{padding:var(--sp-3) var(--sp-4);font-weight:700;font-size:var(--fs-lg);color:var(--primary-d);
  background:var(--primary-l);cursor:pointer;display:flex;justify-content:space-between;align-items:center;
  gap:var(--sp-2);min-height:var(--tap-lg);width:100%;border:none;font-family:inherit;text-align:left}
.sect-h:hover{background:var(--bd-primary)}
.sect-h::after{content:"▲";font-size:var(--fs-xs);color:var(--primary);flex:0 0 auto}
.sect-h[aria-expanded="false"]::after{content:"▼"}
.sect-b{padding:var(--sp-3) var(--sp-4)}
.count-badge{display:inline-flex;align-items:center;justify-content:center;background:var(--primary);color:#fff;
  font-size:var(--fs-xs);font-weight:700;min-width:var(--dot-sm);height:var(--dot-sm);border-radius:var(--r-pill);
  padding:0 var(--sp-1);margin-left:var(--sp-1);font-variant-numeric:tabular-nums}

/* ---------- 空状態（正本C／N10「次の一手を示す」）---------- */
.empty{text-align:center;color:var(--muted);padding:var(--sp-6) var(--sp-4);
  border:var(--bw-2) dashed var(--line);border-radius:var(--r-md);background:var(--bg-subtle)}
.empty-icon{font-size:var(--fs-3xl);color:var(--line-strong);display:block;margin-bottom:var(--sp-2)}
.empty-h{font-weight:700;color:var(--text);font-size:var(--fs-lg);margin-bottom:var(--sp-1)}
.empty-b{font-size:var(--fs-md);margin-bottom:var(--sp-3)}
.empty .btn{margin:0 auto}
.empty.inline{padding:var(--sp-4) var(--sp-3);border:none;background:none;text-align:left}

/* ---------- 履歴行（★kono と akaire で同名・別見た目だったので統一）---------- */
.hist{list-style:none}
.hist-item{padding:var(--sp-2) var(--sp-3);font-size:var(--fs-md);display:flex;align-items:flex-start;
  gap:var(--sp-2);border-radius:var(--r-md)}
.hist-item:nth-child(even){background:var(--stripe)}
/* 種別は「色＋記号」で伝える（色だけにしない W1.4.1） */
.hist-icon{width:var(--dot);height:var(--dot);border-radius:var(--r-full);flex:0 0 auto;
  display:inline-flex;align-items:center;justify-content:center;font-size:var(--fs-xs);font-weight:700}
.hist-icon.add{background:var(--ok-bg);color:var(--ok-text)}
.hist-icon.add::after{content:"＋"}
.hist-icon.update{background:var(--primary-l);color:var(--primary-d)}
.hist-icon.update::after{content:"✎"}
.hist-icon.delete{background:var(--warn-bg);color:var(--warn)}
.hist-icon.delete::after{content:"−"}
.hist-body{flex:1 1 auto;min-width:0;word-break:break-word}
.hist-time{font-size:var(--fs-sm);color:var(--muted);margin-left:auto;white-space:nowrap;flex:0 0 auto;
  font-variant-numeric:tabular-nums}

/* ---------- トースト／スナックバー（★quiz=.toast, kono=.snackbar を1つに）---------- */
/* ★transform だけで画面外へ逃がすと、文字が無いときは移動量も小さく
   「暗い帯」が画面下に残る（実際に残った）。visibility でも確実に消す。 */
.toast{position:fixed;left:50%;bottom:var(--sp-5);transform:translateX(-50%) translateY(140%);
  background:var(--neutral-d);color:#fff;padding:var(--sp-3) var(--sp-5);border-radius:var(--r-pill);
  font-weight:700;font-size:var(--fs-md);box-shadow:var(--shadow-md);
  transition:transform var(--dur),opacity var(--dur),visibility var(--dur);
  z-index:var(--z-toast);max-width:92vw;text-align:center;
  opacity:0;visibility:hidden}
.toast.show{transform:translateX(-50%) translateY(0);opacity:1;visibility:visible}
.toast.err{background:var(--warn)}
.toast.ok{background:var(--ok-text)}
/* 幅の狭い端末では画面幅いっぱいの帯にする（92vw の中央寄せは320pxで窮屈） */
@media (max-width:640px){
  .toast{left:var(--sp-2);right:var(--sp-2);max-width:none;transform:translateY(140%);border-radius:var(--r-md)}
  .toast.show{transform:translateY(0)}
}

/* ---------- FAB（画面右下の浮きボタン）---------- */
.fab{position:fixed;bottom:var(--fab-offset);right:var(--fab-offset);min-height:var(--fab-h);
  padding:0 var(--sp-5);border-radius:var(--r-lg);background:var(--primary);color:#fff;border:none;
  font-family:inherit;font-size:var(--fs-md);font-weight:700;cursor:pointer;
  display:inline-flex;align-items:center;gap:var(--sp-2);box-shadow:var(--shadow-md);z-index:var(--z-fab)}
.fab:hover{background:var(--primary-d);color:#fff}
@media (max-width:640px){
  .fab{bottom:var(--sp-4);right:var(--sp-4);width:var(--fab-h);padding:0;justify-content:center}
  .fab .fab-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}

/* ---------- モーダル（正本§3）----------
   ★ui.css の *{margin:0} がブラウザ標準の dialog{margin:auto} を打ち消し、
     モーダルが画面左上に寄って見切れる。margin:auto を必ず明示すること。 */
dialog.dlg{border:none;padding:0;margin:auto;width:min(94vw,var(--maxw-card));
  max-height:92vh;overflow-y:auto;overscroll-behavior-y:contain;
  border-radius:var(--r-lg);box-shadow:var(--shadow-lg);background:var(--surface);color:var(--text);
  z-index:var(--z-modal)}
dialog.dlg::backdrop{background:rgba(0,0,0,.5)}
dialog.dlg:not([open]){display:none}   /* <dialog>非対応ブラウザで出っぱなしになるのを防ぐ */
dialog.dlg.wide{width:min(94vw,var(--maxw-dlg))}
.dlg-bar{position:sticky;top:0;z-index:2;background:var(--surface);display:flex;align-items:flex-start;
  gap:var(--sp-2);padding:var(--sp-4) var(--sp-4) var(--sp-2);border-bottom:var(--bw) solid var(--line)}
.dlg-h{flex:1 1 auto;min-width:0;font-size:var(--fs-2xl);font-weight:700;color:var(--primary-d);line-height:1.4}
.dlg-x{flex:0 0 auto;width:var(--tap-lg);height:var(--tap-lg);border-radius:var(--r-full);
  border:var(--bw) solid var(--line-strong);background:var(--surface);color:var(--text);
  font-size:var(--fs-xl);font-family:inherit;cursor:pointer;line-height:1}
.dlg-x:hover{background:var(--bg-hover)}
.dlg-b{padding:var(--sp-4)}
.dlg-foot{position:sticky;bottom:0;background:var(--surface);border-top:var(--bw) solid var(--line);
  display:flex;gap:var(--sp-3);justify-content:flex-end;flex-wrap:wrap;padding:var(--sp-3) var(--sp-4)}
.dlg-foot.split{justify-content:space-between}
html.modal-open,body.modal-open{overflow:hidden}   /* 両方に付ける。body だけでは効かない環境がある */
@media (max-width:640px){
  dialog.dlg{width:100%;max-width:100%;height:100%;max-height:100%;border-radius:0;margin:0}
  .dlg-foot .btn{flex:1 1 100%}
}

/* ---------- ライトボックス ---------- */
.lightbox{position:fixed;inset:0;z-index:var(--z-lightbox);background:rgba(0,0,0,.72);
  display:flex;align-items:center;justify-content:center;padding:var(--sp-4)}
.lightbox img{max-width:100%;max-height:86vh;background:#fff;border-radius:var(--r-md)}
.lightbox-x{position:absolute;top:var(--sp-4);right:var(--sp-4);width:var(--tap-lg);height:var(--tap-lg);
  border-radius:var(--r-full);border:none;background:var(--surface);color:var(--text);
  font-size:var(--fs-xl);cursor:pointer;box-shadow:var(--shadow-md)}

/* ---------- 送信中フィードバック（正本§5「必須」）----------
   押した瞬間に処理中と分かること。変化が無いと利用者は連打する。 */
@keyframes gx-spin{to{transform:rotate(360deg)}}
.btn.is-loading{opacity:.85;pointer-events:none}   /* :disabled の .55 は「壊れて押せない」に見えるので上書き */
.btn.is-loading::before{content:"";width:1em;height:1em;flex:0 0 auto;border-radius:var(--r-full);
  border:var(--bw-2) solid rgba(255,255,255,.45);border-top-color:#fff;animation:gx-spin .7s linear infinite}
.btn.ghost.is-loading::before{border-color:var(--bd-primary);border-top-color:var(--primary)}
/* 画面上端の読み込みバー（ページ遷移・フォーム送信で出す） */
@keyframes gx-loadbar{0%{left:-40%;width:40%}50%{left:30%;width:45%}100%{left:100%;width:40%}}
.loadbar{position:fixed;top:0;left:0;right:0;height:var(--loadbar-h);z-index:var(--z-loadbar);
  background:transparent;overflow:hidden;pointer-events:none}
.loadbar::after{content:"";position:absolute;top:0;height:100%;background:var(--primary);
  animation:gx-loadbar 1.1s ease-in-out infinite}
.loadbar[hidden]{display:none !important}
/* 読み込み中テキスト（データ待ち） */
.loading-text{color:var(--muted);font-size:var(--fs-md);padding:var(--sp-5) 0;text-align:center}

/* ---------- 初回ヒントバー（説明文を常時表示しないための受け皿・正本§3）---------- */
.hintbar{display:flex;align-items:flex-start;gap:var(--sp-2);background:var(--primary-l);
  border:var(--bw) solid var(--bd-primary);border-radius:var(--r-md);color:var(--primary-d);
  padding:var(--sp-2) var(--sp-3);margin-bottom:var(--sp-3);font-size:var(--fs-md)}
.hintbar-b{flex:1 1 auto;min-width:0}
.hintbar-x{flex:0 0 auto;width:var(--tap-min);height:var(--tap-min);border:none;background:transparent;
  color:var(--primary-d);font-size:var(--fs-lg);cursor:pointer;border-radius:var(--r-full)}
.hintbar-x:hover{background:var(--bd-primary)}

/* ---------- ⓘツールチップ（正本§4）----------
   説明文を本文から追い出す主力。見た目は12pxのままタップ領域は --tap-min。 */
.tip-t{display:inline-flex;align-items:center;justify-content:center;width:var(--sp-4);height:var(--sp-4);
  border-radius:var(--r-full);border:var(--bw) solid var(--line-strong);background:var(--surface);
  color:var(--muted);font-size:var(--fs-sm);font-weight:700;line-height:1;cursor:help;
  vertical-align:middle;margin-left:var(--sp-1);padding:0;font-family:inherit}
.tip-t:hover,.tip-t:focus-visible{border-color:var(--primary);color:var(--primary-d)}
/* ★ヒット領域は常時 --tap-min を確保する。
   以前は @media (hover:none) の中だけだったが、それでは
   「タッチも使えるノートPC」やタッチ対応ディスプレイで基準D未満のままだった。
   見た目は16pxのまま・当たり判定だけ34pxなので、表示は一切変わらない。 */
.tip-t{position:relative}
.tip-t::after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:var(--tap-min);height:var(--tap-min)}
.tip{position:fixed;z-index:var(--z-dropdown);max-width:var(--tip-maxw);background:#1f2937;color:#fff;
  font-size:var(--fs-xs);font-weight:400;line-height:1.6;padding:var(--sp-2) var(--sp-3);
  border-radius:var(--r-sm);box-shadow:var(--shadow-md);pointer-events:none}

/* ---------- 進捗バー ---------- */
.progress{position:relative;height:var(--progress-h);border-radius:var(--r-sm);background:var(--bg-subtle);
  border:var(--bw) solid var(--line);overflow:hidden}
.progress-fill{height:100%;background:var(--primary);transition:width var(--dur)}
.progress.over .progress-fill{background:var(--warn)}
.progress-txt{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:var(--fs-2xs);font-weight:700;color:var(--text)}

/* ---------- 表：スマホでカード化（正本§6-3。横スクロール回避の本命）----------
   使い方: <table class="tbl cards"> で td に data-label="列名" を持たせる。 */
@media (max-width:640px){
  table.tbl.cards,table.tbl.cards tbody,table.tbl.cards tr,table.tbl.cards td{display:block;width:100%}
  table.tbl.cards thead{display:none}
  table.tbl.cards tr{border:var(--bw) solid var(--line);border-radius:var(--r-md);
    margin-bottom:var(--sp-3);background:var(--surface);overflow:hidden}
  table.tbl.cards tbody tr:nth-child(even){background:var(--surface)}
  table.tbl.cards td{border-left:none;display:flex;justify-content:space-between;gap:var(--sp-3);
    align-items:baseline;padding:var(--sp-2) var(--sp-3)}
  table.tbl.cards td::before{content:attr(data-label);font-weight:700;color:var(--muted);
    font-size:var(--fs-md);flex:0 0 auto}
  table.tbl.cards td:empty{display:none}
  table.tbl.cards td.acts{justify-content:stretch;border-top:var(--bw) dashed var(--line)}
  table.tbl.cards td.acts::before{content:none}
  table.tbl.cards td.acts .btn{width:100%}
  .tbl-wrap:has(table.cards){border:none;box-shadow:none;overflow:visible;background:transparent}
}
/* 横スクロールに頼らざるを得ない表（最後の妥協・正本§6-4）。
   ★body は決して横に伸ばさない。スクロールはこの箱の中だけ。 */
.tbl-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%;min-width:0}
.tbl-scroll table{min-width:max-content}
/* スクロールできることを知らせる（気づかれないと「切れている」と誤解される） */
.scroll-hint{font-size:var(--fs-sm);color:var(--muted);text-align:center;margin:var(--sp-1) 0;
  display:flex;align-items:center;justify-content:center;gap:var(--sp-1)}
@media (min-width:641px){.scroll-hint{display:none}}

/* ---------- フォーム行（2列→スマホ1列）---------- */
.form-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(var(--col-min-sm),1fr));gap:var(--sp-3)}
.radio-opt{display:flex;gap:var(--sp-2);align-items:flex-start;padding:var(--sp-2);
  border-radius:var(--r-md);cursor:pointer;min-height:var(--tap-lg)}
.radio-opt:hover{background:var(--bg-hover)}
.radio-opt.locked{opacity:.7;cursor:not-allowed}
.radio-opt input{width:var(--check);height:var(--check);margin-top:3px;flex:0 0 auto}
.radio-opt .opt-b{flex:1 1 auto;min-width:0}
.radio-opt .opt-sub{color:var(--muted);font-size:var(--fs-md)}
/* 極小のフィルタ入力だけは 16px 未満を許容（正本§6の例外）。それ以外は使わない */
.input-xs{font-size:var(--fs-sm);min-height:var(--tap-min);padding:var(--sp-1) var(--sp-2)}

/* ---------- パネル（アプリ画面のカード）---------- */
.panel{background:var(--surface);border:var(--bw) solid var(--line);border-radius:var(--r-md);
  box-shadow:var(--shadow-sm);padding:var(--sp-4);margin-bottom:var(--sp-4)}
.panel.center{text-align:center}
.panel-h{font-size:var(--fs-2xl);font-weight:700;color:var(--primary-d);margin-bottom:var(--sp-2)}
.panel-h3{font-size:var(--fs-lg);font-weight:700;color:var(--muted);margin:var(--sp-4) 0 var(--sp-2);
  padding-bottom:var(--sp-1);border-bottom:var(--bw) solid var(--line)}
.panel-h3:first-child{margin-top:0}
.panel-lead{color:var(--muted);margin-bottom:var(--sp-3)}

/* ---------- 統計タイル（件数の並び）---------- */
.stats{display:flex;gap:var(--sp-3);flex-wrap:wrap;margin-bottom:var(--sp-3)}
.stat{background:var(--surface);border:var(--bw) solid var(--line);border-radius:var(--r-md);
  padding:var(--sp-2) var(--sp-4);font-weight:700;display:flex;align-items:baseline;gap:var(--sp-2);
  flex:1 1 auto;min-width:0}
.stat-n{font-size:var(--fs-2xl);font-variant-numeric:tabular-nums;color:var(--primary-d)}
.stat-l{font-size:var(--fs-md);color:var(--muted);font-weight:400}

/* ---------- ファイル選択（★ネイティブ file 入力を必ず隠す）----------
   隠さないと英語の "Choose Files / No file chosen" が剥き出しになり、
   幅も制御できず枠外へはみ出す（赤入れシェアで実際に 23px はみ出していた）。 */
.file-pick{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);
  position:relative;overflow:hidden;flex:0 0 auto;
  min-height:var(--tap);padding:var(--sp-2) var(--sp-4);
  border:var(--bw) solid var(--primary);border-radius:var(--r-pill);
  background:var(--surface);color:var(--primary);font-size:var(--fs-md);font-weight:700;cursor:pointer}
.file-pick:hover{background:var(--primary-l);color:var(--primary-d)}
.file-pick input[type=file]{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.file-pick:focus-within{outline:var(--bw-focus) solid var(--primary);outline-offset:2px}

/* ---------- 入力行（入力欄＋ボタンの横並び）----------
   ★入力欄に min-width:0 が無いと、隣のボタンに押し潰されて幅18pxになる（実測）。
     幅が足りなければ2段に折り返す。 */
.input-row{display:flex;align-items:flex-end;gap:var(--sp-2);flex-wrap:wrap;min-width:0}
.input-row > input,.input-row > textarea{flex:1 1 var(--col-min-sm);min-width:0;width:auto}
.input-row > .btn,.input-row > .file-pick,.input-row > .btn-icon{flex:0 0 auto}
@media (max-width:640px){
  .input-row > input,.input-row > textarea{flex:1 1 100%}
  .input-row > .btn{flex:1 1 auto}
}

/* ---------- サイドドロワー ----------
   ★z-index はトークンで階層を固定する。生の数値を書くと
     1035/1040/1044 のように1つ違いの取り合いになり、上下関係が壊れる（実測）。 */
.drawer{position:fixed;top:0;bottom:0;left:0;width:min(86vw,var(--sidebar-w));z-index:var(--z-drawer);
  background:var(--surface);border-right:var(--bw) solid var(--line);box-shadow:var(--shadow-lg);
  display:flex;flex-direction:column;min-height:0;
  transform:translateX(-100%);transition:transform var(--dur) var(--ease-in);visibility:hidden}
.drawer.open{transform:translateX(0);visibility:visible}
.drawer.right{left:auto;right:0;border-right:none;border-left:var(--bw) solid var(--line);transform:translateX(100%)}
.drawer.right.open{transform:translateX(0)}
.drawer-h{flex:0 0 auto;display:flex;align-items:center;gap:var(--sp-2);
  padding:var(--sp-3) var(--sp-3);border-bottom:var(--bw) solid var(--line);font-weight:700}
.drawer-b{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior-y:contain;padding:var(--sp-3)}
.drawer-backdrop{position:fixed;inset:0;z-index:var(--z-backdrop);background:rgba(0,0,0,.35);
  opacity:0;visibility:hidden;transition:opacity var(--dur),visibility var(--dur)}
.drawer-backdrop.open{opacity:1;visibility:visible}
/* ドロワー展開中は下層の浮き要素を隠す（重なって操作を奪うため） */
body.drawer-open .fab{display:none}

/* ---------- ボトムシート ----------
   ★transform で下へ逃がす作りにすると「箱の下半分が常に画面外」になり、
     内部スクロールの終端が画面外に落ちて最後の項目に到達できない（実測306px到達不能）。
     箱そのものを画面内に収め、transform は開閉の見た目だけに使う。 */
.sheet{position:fixed;left:0;right:0;bottom:0;top:auto;height:55dvh;z-index:var(--z-drawer);
  background:var(--surface);border-top:var(--bw) solid var(--line);
  border-radius:var(--r-lg) var(--r-lg) 0 0;box-shadow:var(--shadow-lg);
  display:flex;flex-direction:column;min-height:0;
  transform:translateY(100%);transition:transform var(--dur) var(--ease-in),height var(--dur);visibility:hidden}
.sheet.open{transform:translateY(0);visibility:visible}
.sheet.full{height:100dvh;border-radius:0}
.sheet-grip{flex:0 0 auto;display:flex;justify-content:center;padding:var(--sp-2) 0;cursor:grab}
.sheet-grip::before{content:"";width:var(--sp-6);height:var(--sp-1);border-radius:var(--r-pill);
  background:var(--line-strong)}
.sheet-h{flex:0 0 auto;display:flex;align-items:center;gap:var(--sp-2);
  padding:0 var(--sp-3) var(--sp-2);border-bottom:var(--bw) solid var(--line);font-weight:700}
.sheet-b{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior-y:contain;padding:var(--sp-3)}
.sheet-foot{flex:0 0 auto;padding:var(--sp-2) var(--sp-3);border-top:var(--bw) solid var(--line);
  padding-bottom:calc(var(--sp-2) + env(safe-area-inset-bottom))}
body.sheet-open .fab{display:none}

/* ---------- 全画面アプリのシェル ----------
   ★height:100vh を body に書いても、間に <div id="app"> が1枚挟まると
     flex 列が切れて中身がはみ出す（赤入れシェアで下397pxが到達不能だった）。
     祖先すべてに高さと min-height:0 を通す。 */
.app-shell{display:flex;flex-direction:column;height:100dvh;overflow:hidden}
.app-shell > *{min-height:0}                    /* ★これが無いと子が縮まずあふれる */
.app-shell-main{flex:1 1 auto;min-height:0;display:flex;min-width:0}
.app-scroll{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior-y:contain}

/* ---------- 印刷（議事録・帳票の書き出し）---------- */
@media print{
  .appbar,.site-foot,.fab,.toast,.loadbar,.toolbar,.tabs,.btn,.skip-link,.hintbar{display:none !important}
  body{background:#fff}
  .card,.panel,.lcard,.sect{box-shadow:none;border-color:#999;break-inside:avoid}
}