/* =========================================================
   GOLIXX 順番ボード(仮称) — 製品ローカルCSS
   ★「共通の器」(hero-x / beta-band / share-loop / fold / toast など)と
     トークンは golixx-lib(tokens.css / ui.css)から来る。
     このファイルに書くのは junban 固有の3つだけ:
       ① [data-brand="junban"] の色ブロック(製品の肌=深いティール)
       ② ヒーロー内デモの中身 .jb-*(呼出番号が進む実演)
       ③ 受け手/窓口画面の部品(番号表示・呼出オーバーレイ・QR)
   ⛔ 器や :root トークンはここに書かない(lib から来る)。
   読み順: tokens.css → ui.css → junban.css
   ========================================================= */

/* --- ① 製品アイデンティティ(骨格は共通・肌で個性)---
   呼び出し=「今どうぞ」の合図なので、意味色の緑(--ok #2e7d32)や注意の
   amber と混ざらない「深いティール(青緑)」に振る。白地の #00695c は
   コントラスト 6.7:1(AA)、濃色 #004d40 は 9.5:1。--ok系は変えない。 */
[data-brand="junban"]{
  --primary:#00695c; --primary-d:#004d40; --primary-l:#e0f2f1; --bd-primary:#b2dfdb;
  --accent:#00897b; --accent-d:#00695c; --accent-l:#e0f2f1;
  --hero-2:#00564b; --hero-3:#00332c; --hero-ink:#d9efec;
  --motif:"🔢";
}

/* --- ② ヒーロー内デモの中身:呼出番号 11→12 が進み、スマホが「あなたの番」に。
   自己完結SVG/CSS・画像なし・8秒ループ。 --- */
.jb-num-a,.jb-wait-a{animation:jb-phase-a 8s steps(1,end) infinite}
.jb-num-b,.jb-wait-b{animation:jb-phase-b 8s steps(1,end) infinite}
.jb-phone-wait{animation:jb-phase-a 8s steps(1,end) infinite}
.jb-phone-call{animation:jb-phase-b 8s steps(1,end) infinite;transform-box:fill-box;transform-origin:center}
@keyframes jb-phase-a{0%,45%{opacity:1}46%,100%{opacity:0}}
@keyframes jb-phase-b{0%,45%{opacity:0}46%,100%{opacity:1}}
/* 常時アニメは reduced-motion で停止(正本§5)。停止時は「呼ばれた状態」で静止 */
@media (prefers-reduced-motion:reduce){
  .jb-num-a,.jb-wait-a,.jb-phone-wait{animation:none;opacity:0}
  .jb-num-b,.jb-wait-b,.jb-phone-call{animation:none;opacity:1}
}

/* 使い方3ステップの番号粒 */
.jb-step{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-size:var(--fs-lg);font-weight:700;
  margin-right:var(--sp-1);vertical-align:middle}

/* --- ③ 受け手/窓口画面 --- */
.board-wrap{padding-top:var(--sp-5);padding-bottom:var(--sp-6)}
.board-title{border:none;padding:0;margin:0 0 var(--sp-2);font-size:var(--fs-2xl)}
.board-note{color:var(--muted);margin:0 0 var(--sp-4)}

/* 番号を取る前 */
.board-take{text-align:center}
.take-lead{margin:var(--sp-2) 0 var(--sp-4);font-size:var(--fs-lg)}

/* 番号の状態表示(受け手・窓口共通の部品) */
.board-status,.admin-call{text-align:center}
.st-label{color:var(--muted);font-size:var(--fs-md);font-weight:700;margin:var(--sp-2) 0 0}
.st-your{font-size:64px;line-height:1.15;font-weight:800;color:var(--primary-d);
  font-variant-numeric:tabular-nums;margin:0 0 var(--sp-2)}
.st-row{display:flex;justify-content:center;gap:var(--sp-5);margin-bottom:var(--sp-3)}
.st-cell{display:flex;align-items:baseline;gap:var(--sp-1)}
.st-k{color:var(--muted);font-size:var(--fs-md);font-weight:700}
.st-v{font-size:var(--fs-3xl);font-weight:700;font-variant-numeric:tabular-nums}
.st-unit{color:var(--muted);font-size:var(--fs-md)}

/* 「次はあなたの番です」（あと0人のときの言い換え。数字0を出さない） */
.st-next{font-size:var(--fs-xl);font-weight:700;color:var(--primary-d);margin:0 0 var(--sp-3)}
.st-next .hint{display:block;font-weight:400;margin-top:var(--sp-1)}

/* 窓口の警告帯（発券を断られた人がいる／残り枠わずか）。
   ★窓口が最初に見る位置＝操作カードの上に置く。 */
.admin-alert{margin-bottom:var(--sp-4)}
.admin-alert .ba-hint{display:block;font-weight:400;margin-top:var(--sp-1)}
.ad-issued{margin-top:calc(-1 * var(--sp-2));margin-bottom:var(--sp-3)}

/* 呼び出し中:画面全体の色替え+全画面オーバーレイ */
body.is-called{background:var(--primary-l)}
.called-overlay{position:fixed;inset:0;z-index:var(--z-modal,1000);
  background:var(--primary);color:#fff;display:flex;align-items:center;justify-content:center;
  text-align:center;animation:jb-called-pulse 1.6s ease-in-out infinite}
.called-overlay[hidden]{display:none}
@keyframes jb-called-pulse{0%,100%{background:var(--primary)}50%{background:var(--primary-d)}}
@media (prefers-reduced-motion:reduce){.called-overlay{animation:none}}
.co-inner{padding:var(--sp-5)}
.co-check{display:inline-flex;align-items:center;justify-content:center;
  width:72px;height:72px;border-radius:var(--r-full);background:#fff;color:var(--primary-d);
  font-size:40px;font-weight:800;margin-bottom:var(--sp-4)}
.co-title{font-size:var(--fs-3xl);font-weight:800;margin:0 0 var(--sp-2)}
.co-number{font-size:96px;line-height:1.1;font-weight:800;font-variant-numeric:tabular-nums;margin:0}
.co-sub{font-size:var(--fs-lg);margin:var(--sp-2) 0 var(--sp-5);color:var(--primary-l)}
.co-close{background:#fff;color:var(--primary-d);border:none}
.co-close:hover{background:var(--primary-l)}

/* 窓口画面 */
.admin-head{display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap;margin-bottom:var(--sp-2)}
.admin-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(var(--col-min),1fr));
  gap:var(--sp-4);margin-top:var(--sp-4)}
.admin-btns{display:grid;gap:var(--sp-3);margin-top:var(--sp-2)}
.admin-btns-sub{display:flex;gap:var(--sp-3);justify-content:center;flex-wrap:wrap}
.recall-wrap{display:inline-flex;align-items:center;gap:var(--sp-1)}
.qr-box{display:flex;justify-content:center;margin:var(--sp-4) 0}
/* ★QRは固定pxで持たない（親に追従させる）。poster.php で width:100mm 固定にしていて
   320px幅で紙面を45pxはみ出した事故と同じ型を、窓口画面にも作らない。
   min()で「基本180px・狭い画面では親幅まで」縮める。svgはblock（既定のinlineは行余白が付く）。 */
.qr-box svg{display:block;width:min(180px, 100%);height:auto;aspect-ratio:1 / 1;
  background:#fff;padding:var(--sp-2);
  border:var(--bw) solid var(--line);border-radius:var(--r-md)}

/* URL+コピー(作成完了ダイアログ用。1行部品は lib の .url-share を流用) */
.url-box{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap;min-width:0;
  margin:var(--sp-2) 0 var(--sp-3)}
.url-box input{flex:1 1 var(--col-min-sm);min-width:0;width:auto;
  background:var(--bg-subtle);font-family:ui-monospace,Consolas,monospace}

/* 作成完了ダイアログ */
dialog.result-dlg{border:none;border-radius:var(--r-lg);box-shadow:var(--shadow-lg);
  width:560px;max-width:94vw;padding:var(--sp-5)}
dialog.result-dlg::backdrop{background:rgba(0,0,0,.45)}
dialog.result-dlg h2{margin-top:0}

/* 同意文（規約リンクを含む）。主ボタンとの間に指1本ぶんの余白を確保して
   押し間違いを防ぐ（UI自動検査は上下6px未満の密着を🟠にする）。 */
.consent-note{margin:var(--sp-3) 0 var(--sp-4)}
.consent-note a{padding:var(--sp-1) 0}

/* plan_intent の受付済み表示(kono .intent-done と同名・同義) */
.intent-done{color:var(--ok-text,#1b5e20);font-weight:700}
.bb-intent{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap}

/* モバイル(≤640px):1画面1タスクへ寄せる。横スクロールは出さない */
@media (max-width:640px){
  .st-your{font-size:56px}
  .co-number{font-size:80px}
  .admin-btns-sub .btn{flex:1 1 auto}
  .url-box .btn{width:100%}
}