/* ロープレ相手AI（不動産・テレビ電話型）— 画面のスタイル
   正本: docs/SPEC_v1.0_2026-09-11.md §5-8 デザインシステム／§5-9 端末・アクセシビリティ
   8pxグリッド・カード内16・画面端18・タップ最小48・終了72・UIは200ms ease-out・遷移はフェードのみ */

:root{
  --paper:#F6F4EF;
  --ink:#1F2933;
  --accent:#1F5F8B;
  --accent-ink:#17496B;
  --ok:#2E7D32;
  --warn:#B26A00;
  --danger:#D32F2F;
  --stage:#111418;

  --card:#FFFFFF;
  --line:#E4DFD4;
  --line-soft:#EFEBE2;
  --muted:#66707B;
  --muted-2:#8A939D;
  --tint:#EEF3F7;          /* アクセントの薄い面 */
  --tint-line:#CFDEEA;
  --danger-tint:#FCEDEC;
  --ok-tint:#EAF2EA;
  --warn-tint:#F8F0E4;

  --r-s:10px; --r-m:14px; --r-l:18px; --r-xl:24px;
  --shadow-1:0 1px 2px rgba(31,41,51,.05), 0 2px 8px rgba(31,41,51,.05);
  --shadow-2:0 2px 6px rgba(31,41,51,.07), 0 10px 26px rgba(31,41,51,.09);
  --shadow-up:0 -2px 10px rgba(0,0,0,.18);
  --ease:200ms cubic-bezier(.2,.7,.3,1);
  --edge:18px;             /* 画面端 */
}

*,*::before,*::after{box-sizing:border-box}
html{font-size:16px;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:"Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP","Yu Gothic Medium",system-ui,sans-serif;
  font-size:1rem;line-height:1.65;letter-spacing:.01em;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overscroll-behavior:none;
}
h1,h2,h3,p,ul,ol,figure{margin:0}
ul{padding:0;list-style:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
input{font:inherit;color:inherit}
svg{display:block}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:4px}

/* ===== 画面の入れ物 ===== */
#app{position:fixed;inset:0;overflow:hidden;background:var(--paper)}
.screen{
  position:absolute;inset:0;display:flex;flex-direction:column;
  opacity:1;transition:opacity var(--ease);background:var(--paper);
}
.screen.is-enter{opacity:0}
.screen.is-leave{opacity:0;pointer-events:none}
.screen--dark{background:var(--stage)}

/* 縦1列（スマホ）＋PCは右にパネル */
.col{
  flex:1;min-height:0;display:flex;flex-direction:column;
  width:100%;max-width:520px;margin:0 auto;
}
.side{display:none}

/* ===== 見出し・バー ===== */
.appbar{
  flex:none;display:flex;align-items:center;gap:10px;
  min-height:56px;padding:10px var(--edge) 6px;
}
.appbar__title{font-size:1.0625rem;font-weight:700;letter-spacing:.02em;white-space:nowrap}
.appbar__sub{font-size:.8125rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.appbar__spacer{flex:1}
.company{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 12px;border-radius:999px;background:var(--tint);border:1px solid var(--tint-line);
  font-size:.8125rem;font-weight:700;color:var(--accent-ink);white-space:nowrap;
}
.backbtn{
  display:inline-flex;align-items:center;gap:4px;min-height:48px;min-width:48px;
  margin-left:-10px;padding:0 10px;border-radius:var(--r-s);
  font-size:.9375rem;color:var(--accent-ink);font-weight:500;
}
.backbtn:active{background:var(--tint)}

.scroll{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;padding:0 var(--edge) 24px}
.scroll--dock{padding-bottom:148px}

.greet{font-size:1.25rem;font-weight:700;line-height:1.4;margin:2px 0 2px}
.greet small{display:block;font-size:.8125rem;font-weight:400;color:var(--muted);margin-top:2px}

.sect{display:flex;align-items:center;gap:8px;margin:24px 0 10px}
.sect__label{font-size:.8125rem;font-weight:700;letter-spacing:.06em;color:var(--muted)}
.sect__rule{flex:1;height:1px;background:var(--line)}
.sect--lead .sect__label{color:var(--accent-ink)}

/* ===== カード ===== */
.card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-m);
  padding:16px;box-shadow:var(--shadow-1);
}
.card + .card{margin-top:12px}

/* シナリオカード */
.scn{
  display:block;width:100%;text-align:left;background:var(--card);
  border:1px solid var(--line);border-radius:var(--r-l);padding:16px;
  box-shadow:var(--shadow-1);transition:transform var(--ease),box-shadow var(--ease),border-color var(--ease);
}
.scn + .scn{margin-top:12px}
.scn:active{transform:scale(.99);box-shadow:var(--shadow-1);border-color:var(--tint-line)}
.scn--lead{border-color:var(--tint-line);box-shadow:var(--shadow-2)}
.scn__head{display:flex;gap:14px;align-items:flex-start}
.scn__body{flex:1;min-width:0}
.scn__title{font-size:1.0625rem;font-weight:700;line-height:1.45}
.scn__who{margin-top:3px;font-size:.875rem;color:var(--muted);line-height:1.5}
.scn__meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:10px}
.scn__goal{
  margin-top:10px;padding:10px 12px;border-radius:var(--r-s);
  background:var(--tint);border:1px solid var(--tint-line);
  font-size:.875rem;line-height:1.55;color:var(--accent-ink);
}
.scn__goal b{font-weight:700}
.scn__rec{
  margin-top:10px;padding-top:10px;border-top:1px dashed var(--line);
  display:flex;align-items:center;gap:8px;font-size:.8125rem;color:var(--muted);
}
.scn__rec strong{color:var(--ink);font-weight:700}

.chip{
  display:inline-flex;align-items:center;gap:5px;
  padding:3px 9px;border-radius:999px;font-size:.8125rem;line-height:1.5;
  background:#F2EFE8;border:1px solid var(--line);color:var(--ink);white-space:nowrap;
}
.chip--mode{background:#FFF;color:var(--accent-ink);border-color:var(--tint-line);font-weight:700}
.chip--diff{background:#FFF;border-color:var(--line)}
.chip--diff .stars{letter-spacing:.08em;color:var(--warn)}
.chip--dept{background:var(--card)}
.chip--trunc{display:inline-block;max-width:56%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* 顔・受話器のアイコン */
.face-chip{flex:none;width:60px;height:60px;border-radius:16px;overflow:hidden;background:#E8E3D9;box-shadow:inset 0 0 0 1px rgba(31,41,51,.06)}
.face-chip svg{width:100%;height:100%}

/* ===== タブ／セグメント ===== */
.seg{
  display:flex;gap:4px;padding:4px;border-radius:999px;
  background:#EBE7DE;border:1px solid var(--line);
}
.seg__btn{
  flex:1;min-height:44px;padding:0 8px;border-radius:999px;
  font-size:.875rem;font-weight:700;color:var(--muted);
  display:flex;align-items:center;justify-content:center;gap:4px;
  transition:background var(--ease),color var(--ease),box-shadow var(--ease);
}
.seg__btn[aria-selected="true"]{background:var(--card);color:var(--accent-ink);box-shadow:var(--shadow-1)}
.seg--big .seg__btn{min-height:48px;flex-direction:column;gap:0;line-height:1.3}
.seg--big .seg__btn small{font-size:.6875rem;font-weight:400;color:var(--muted-2)}
.seg--big .seg__btn[aria-selected="true"] small{color:var(--accent)}

.tabbar .seg{overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}
.tabbar .seg::-webkit-scrollbar{display:none}
.tabbar .seg__btn{flex:0 0 auto;min-width:78px;white-space:nowrap}
.tabbar{
  flex:none;padding:8px var(--edge) calc(8px + env(safe-area-inset-bottom));
  background:linear-gradient(to top,var(--paper) 72%,rgba(246,244,239,0));
}

/* ===== ボタン ===== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:48px;padding:0 18px;border-radius:var(--r-m);
  font-size:.9375rem;font-weight:700;
  background:var(--card);border:1px solid var(--line);color:var(--ink);
  transition:background var(--ease),transform var(--ease),border-color var(--ease);
}
.btn:active{transform:scale(.985)}
.btn--primary{background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:var(--shadow-1)}
.btn--primary:active{background:var(--accent-ink)}
.btn--ghost{background:transparent;border-color:var(--line)}
.btn--wide{width:100%}
.btn[disabled]{opacity:.45;pointer-events:none}

/* 発信（72px） */
.dock-cta{
  flex:none;padding:12px var(--edge) calc(16px + env(safe-area-inset-bottom));
  background:linear-gradient(to top,var(--paper) 68%,rgba(246,244,239,0));
}
.cta{
  display:flex;align-items:center;justify-content:center;gap:10px;
  width:100%;height:72px;border-radius:20px;
  background:var(--accent);color:#fff;font-size:1.125rem;font-weight:700;letter-spacing:.03em;
  box-shadow:0 6px 18px rgba(31,95,139,.28);transition:transform var(--ease),background var(--ease);
}
.cta:active{transform:translateY(1px) scale(.995);background:var(--accent-ink)}
.cta svg{width:26px;height:26px}

/* ===== 入口: コード・ニックネーム・初回説明 ===== */
.gate{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:center;padding:24px var(--edge) 40px;overflow-y:auto}
.gate__mark{width:56px;height:56px;border-radius:16px;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;margin-bottom:18px}
.gate__mark svg{width:30px;height:30px}
.gate h1{font-size:1.375rem;font-weight:700;line-height:1.45}
.gate p{margin-top:8px;color:var(--muted);font-size:.9375rem;line-height:1.7}
.field{margin-top:24px}
.field label{display:block;font-size:.8125rem;font-weight:700;color:var(--muted);margin-bottom:6px}
.input{
  width:100%;min-height:56px;padding:0 16px;border-radius:var(--r-m);
  background:var(--card);border:1px solid var(--line);
  font-size:1.0625rem;box-shadow:var(--shadow-1);
}
.input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(31,95,139,.16)}
.input--code{font-size:1.75rem;font-weight:700;letter-spacing:.5em;text-align:center;padding-left:.5em;font-variant-numeric:tabular-nums}
.formnote{margin-top:10px;font-size:.8125rem;color:var(--muted);line-height:1.6}
.formerr{
  margin-top:12px;padding:10px 12px;border-radius:var(--r-s);
  background:var(--danger-tint);border:1px solid #F0C8C5;color:#8E1F1B;
  font-size:.875rem;font-weight:500;display:flex;gap:8px;align-items:flex-start;
}

.ob{flex:1;min-height:0;display:flex;flex-direction:column;padding:24px var(--edge) 24px}
.ob{justify-content:center}
.ob__art{
  flex:0 1 280px;min-height:150px;max-height:300px;
  display:flex;align-items:center;justify-content:center;
  background:var(--tint);border:1px solid var(--tint-line);border-radius:var(--r-xl);margin-bottom:24px;
}
.ob__art svg{width:96px;height:96px;color:var(--accent)}
.ob h2{font-size:1.375rem;font-weight:700;line-height:1.45}
.ob p{margin-top:10px;color:var(--muted);font-size:.9375rem;line-height:1.75;white-space:pre-line}
.ob__dots{display:flex;gap:6px;justify-content:center;margin:20px 0 12px}
.ob__dot{width:7px;height:7px;border-radius:99px;background:var(--line)}
.ob__dot.is-on{background:var(--accent);width:20px}

/* ===== 発信前 ===== */
.situ{line-height:1.8}
.situ__label{font-size:.75rem;font-weight:700;letter-spacing:.08em;color:var(--muted)}
.situ__lead{font-size:1.0625rem;font-weight:700;margin-top:2px}
.situ__text{margin-top:8px;font-size:.9375rem;color:#3A444F}
.kv{display:flex;gap:12px;margin-top:14px;padding-top:14px;border-top:1px solid var(--line-soft)}
.kv__item{flex:1;min-width:0}
.kv__k{font-size:.75rem;font-weight:700;letter-spacing:.06em;color:var(--muted)}
.kv__v{font-size:.9375rem;font-weight:700;line-height:1.5;margin-top:2px}
.kv__v--goal{color:var(--accent-ink)}

.doc{margin-top:0}
.doc__item + .doc__item{margin-top:12px;padding-top:12px;border-top:1px solid var(--line-soft)}
.doc__t{font-size:.875rem;font-weight:700;color:var(--accent-ink)}
.doc__b{font-size:.9375rem;line-height:1.75;margin-top:4px}
.rules{counter-reset:r}
.rules li{
  position:relative;padding-left:28px;font-size:.9375rem;line-height:1.7;
}
.rules li + li{margin-top:10px}
.rules li::before{
  counter-increment:r;content:counter(r);
  position:absolute;left:0;top:.28em;width:20px;height:20px;border-radius:99px;
  background:var(--tint);border:1px solid var(--tint-line);color:var(--accent-ink);
  font-size:.6875rem;font-weight:700;display:flex;align-items:center;justify-content:center;
}

/* ===== 通話中 ===== */
.call{position:absolute;inset:0;display:flex;flex-direction:column;background:var(--stage)}
.call__main{flex:1;min-height:0;display:flex;flex-direction:column}

/* 上の帯（暗い舞台なので紙色の帯に載せる） */
.callbar{
  flex:none;display:flex;align-items:center;gap:10px;
  margin:calc(8px + env(safe-area-inset-top)) 8px 8px;padding:6px 8px 6px 6px;
  background:var(--paper);border-radius:999px;box-shadow:var(--shadow-2);min-height:48px;
}
.callbar__x{width:40px;height:40px;border-radius:999px;display:flex;align-items:center;justify-content:center;color:var(--muted)}
.callbar__x:active{background:#E8E4DA}
.callbar__who{flex:1;min-width:0}
.callbar__name{font-size:.9375rem;font-weight:700;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.callbar__role{font-size:.75rem;color:var(--muted);line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.callbar__time{
  font-size:.9375rem;font-weight:700;font-variant-numeric:tabular-nums;
  font-family:"SFMono-Regular",Menlo,Consolas,monospace;letter-spacing:.02em;
}
.net{display:inline-flex;align-items:center;gap:5px;padding:4px 10px 4px 8px;border-radius:999px;background:#EDE9E0;margin-right:2px}
.net__dot{width:9px;height:9px;border-radius:99px;background:var(--ok);flex:none}
.net__txt{font-size:.6875rem;font-weight:700;color:var(--muted)}
.net--slow .net__dot{background:var(--warn)}
.net--slow .net__txt{color:var(--warn)}
.net--bad .net__dot{background:var(--danger)}
.net--bad .net__txt{color:var(--danger)}

/* 舞台 */
.stage{position:relative;flex:1;min-height:0;margin:0 8px;border-radius:var(--r-l);overflow:hidden;background:#0E1114}
.stage::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(120% 80% at 50% 32%,#1B2027 0%,#14181D 45%,#0C0F12 100%);
}
.stage__face{position:absolute;inset:0;z-index:1;display:flex;align-items:center;justify-content:center;color:rgba(246,244,239,.5);font-size:.875rem}
.stage__over{position:absolute;inset:0;z-index:2;pointer-events:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px}
.stage__over--top{justify-content:flex-start;padding-top:12px}
.ringing{
  display:flex;align-items:center;gap:12px;
  padding:10px 18px;border-radius:999px;background:rgba(246,244,239,.95);box-shadow:var(--shadow-2);
}
.ringing__txt{font-size:.9375rem;font-weight:700;color:var(--ink)}
.ringing__sub{font-size:.75rem;color:var(--muted)}
.ringing__waves{display:flex;gap:5px;align-items:flex-end;height:18px}
.ringing__waves i{width:4px;border-radius:2px;background:var(--accent);animation:ring-b 1.1s ease-in-out infinite}
.ringing__waves i:nth-child(2){animation-delay:.12s}
.ringing__waves i:nth-child(3){animation-delay:.24s}
.ringing__waves i:nth-child(4){animation-delay:.36s}
@keyframes ring-b{0%,100%{height:5px;opacity:.45}50%{height:18px;opacity:1}}

.goalband{
  position:absolute;left:8px;right:8px;top:8px;z-index:3;
  display:flex;align-items:center;gap:8px;justify-content:center;
  padding:10px 14px;border-radius:var(--r-m);
  background:rgba(234,242,234,.96);border:1px solid #BFD8C0;color:#1E5C22;
  font-size:.875rem;font-weight:700;box-shadow:var(--shadow-1);
  opacity:0;transform:translateY(-6px);transition:opacity var(--ease),transform var(--ease);
}
.goalband.is-on{opacity:1;transform:none}

.banner{
  position:absolute;left:8px;right:8px;top:8px;z-index:4;
  display:flex;align-items:center;gap:8px;padding:10px 14px;border-radius:var(--r-m);
  background:rgba(248,240,228,.97);border:1px solid #E4CFA8;color:#7A4900;
  font-size:.875rem;font-weight:700;box-shadow:var(--shadow-1);
}
.banner--bad{background:rgba(252,237,236,.97);border-color:#F0C8C5;color:#8E1F1B}

.stage.is-paused .stage__face{filter:brightness(.4) saturate(.7)}
.paused{
  display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:14px 22px;border-radius:var(--r-l);background:rgba(246,244,239,.95);box-shadow:var(--shadow-2);
}
.paused__t{font-size:1rem;font-weight:700}
.paused__s{font-size:.8125rem;color:var(--muted)}

/* 舞台の下端に重ねる帯（字幕・ヒント）。暗い舞台なので必ず紙色の帯に載せる */
.stage__bottom{position:absolute;left:8px;right:8px;bottom:8px;z-index:3}

/* ヒント（1行・8秒・字幕の上） */
.hintbox{
  position:absolute;left:0;right:0;bottom:100%;margin-bottom:8px;z-index:5;
  display:flex;gap:10px;align-items:flex-start;
  padding:12px 14px;border-radius:var(--r-m);
  background:rgba(246,244,239,.97);border:1px solid var(--tint-line);box-shadow:var(--shadow-2);
  opacity:0;transform:translateY(8px);transition:opacity var(--ease),transform var(--ease);pointer-events:none;
}
.hintbox.is-on{opacity:1;transform:none}
.hintbox__i{flex:none;width:22px;height:22px;color:var(--warn);margin-top:1px}
.hintbox__t{font-size:.9375rem;line-height:1.55;font-weight:500}
.hintbox__n{font-size:.6875rem;color:var(--muted);margin-top:3px}

/* 字幕（上＝相手／下＝あなた。行ごとに2行まで＝帯は可変高さ。顔には被せない） */
.caption{
  margin:0;padding:8px 12px 10px;border-radius:var(--r-m);
  background:rgba(246,244,239,.94);
  display:flex;flex-direction:column;gap:6px;
  box-shadow:0 2px 10px rgba(0,0,0,.18);
}
.cap{display:flex;gap:8px;align-items:flex-start}
.cap__w{
  flex:none;width:3.8em;padding-top:.32em;
  font-size:.6875rem;font-weight:700;color:var(--muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.cap__t{
  flex:1;min-width:0;margin:0;
  font-size:.9375rem;line-height:1.5;color:#2A333D;min-height:1.5em;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.cap__t b{font-weight:700;color:var(--ink)}
.cap__t:empty::before{color:var(--muted-2)}
.cap--ai .cap__w{color:var(--accent-ink)}
.cap--ai .cap__t:empty::before{content:"（相手の声をここに文字で出します）"}
/* あなたの行は薄い枠で見た目を変える（相手の行と取り違えない） */
.cap--you{
  padding:5px 10px 6px;border-radius:var(--r-s);
  background:rgba(255,255,255,.86);border:1px solid var(--tint-line);
}
.cap--you .cap__w{color:var(--accent);padding-top:.24em}
.cap--you .cap__t{font-size:.875rem;color:#3A444F;min-height:1.5em}
.cap--you .cap__t b{font-weight:600;color:#2A333D}
.cap--you .cap__t:empty::before{content:"（あなたの声をここに文字で出します）"}
/* 初回だけ8秒（あなたの行の上） */
.cap__note{
  display:none;align-items:center;gap:5px;margin:0 0 -2px 2px;
  font-size:.6875rem;font-weight:700;color:var(--accent-ink);
}
.cap__note.is-on{display:flex}
.cap__note-i{flex:none;width:14px;height:14px}
.caption.is-off{display:none}

/* 下の操作盤 */
.console{
  flex:none;margin-top:8px;padding:8px 12px calc(12px + env(safe-area-inset-bottom));
  background:var(--paper);border-radius:var(--r-xl) var(--r-xl) 0 0;box-shadow:var(--shadow-up);
}
.foldrow{display:flex;align-items:center;gap:8px}
.fold{
  display:flex;align-items:center;gap:8px;flex:1;min-width:0;
  min-height:40px;padding:0 8px;border-radius:var(--r-s);color:var(--muted);
}
.fold:active{background:#EDE9E0}
.fold__t{flex:1;text-align:left;font-size:.8125rem;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fold__chev{width:16px;height:16px;flex:none}
.fold__doc{
  flex:none;display:flex;align-items:center;gap:5px;min-height:36px;padding:0 10px;border-radius:999px;
  background:var(--card);border:1px solid var(--line);font-size:.75rem;font-weight:700;color:var(--accent-ink);
}
.ctrls{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-top:4px}
.ctrl{
  position:relative;flex:1;min-width:48px;min-height:52px;border-radius:var(--r-m);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  color:var(--ink);transition:background var(--ease),color var(--ease);
}
.ctrl svg{width:22px;height:22px}
.ctrl__l{font-size:.6875rem;font-weight:700;letter-spacing:.02em}
.ctrl:active{background:#EAE6DC}
.ctrl.is-on{background:var(--tint);color:var(--accent-ink)}
.ctrl.is-alert{color:var(--danger)}
.ctrl[disabled]{opacity:.4;pointer-events:none}
.ctrl__badge{
  position:absolute;top:2px;left:50%;margin-left:6px;
  min-width:17px;height:17px;padding:0 4px;border-radius:999px;
  display:flex;align-items:center;justify-content:center;white-space:nowrap;
  background:var(--card);border:1px solid var(--line);
  font-size:.625rem;line-height:1;color:var(--muted);font-weight:700;
}
.ctrl.is-alert .ctrl__badge{color:var(--danger);border-color:#F0C8C5}
.endrow{display:flex;align-items:center;justify-content:center;margin-top:8px}
.endbtn{
  width:72px;height:72px;border-radius:999px;background:var(--danger);color:#fff;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
  box-shadow:0 6px 18px rgba(211,47,47,.32);transition:transform var(--ease),background var(--ease);
}
.endbtn:active{transform:scale(.96);background:#B42A25}
.endbtn svg{width:26px;height:26px}
.endbtn span{font-size:.625rem;font-weight:700;letter-spacing:.04em}

/* 通話中のシート（状況・資料） */
.sheet{position:absolute;inset:0;z-index:20;display:flex;flex-direction:column;justify-content:flex-end}
.sheet__scrim{position:absolute;inset:0;background:rgba(10,12,15,.55)}
.sheet__panel{
  position:relative;max-height:74%;overflow-y:auto;
  background:var(--paper);border-radius:var(--r-xl) var(--r-xl) 0 0;
  padding:8px var(--edge) calc(20px + env(safe-area-inset-bottom));box-shadow:var(--shadow-up);
}
.sheet__grip{width:40px;height:4px;border-radius:99px;background:var(--line);margin:6px auto 12px}
.sheet__h{display:flex;align-items:center;gap:8px;margin-bottom:12px}
.sheet__h h3{font-size:1.0625rem;font-weight:700}
.sheet__close{margin-left:auto;min-height:44px;padding:0 14px;border-radius:999px;background:var(--card);border:1px solid var(--line);font-size:.875rem;font-weight:700}

/* ===== 振り返り ===== */
.rv__head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.rv__head h1{font-size:1.25rem;font-weight:700}
.rv__head .rv__meta{font-size:.875rem;color:var(--muted)}
.oneliner{
  margin-top:14px;padding:20px 18px;border-radius:var(--r-l);
  background:linear-gradient(180deg,#FFFFFF 0%,#FBFAF6 100%);
  border:1px solid var(--tint-line);box-shadow:var(--shadow-2);text-align:center;
}
.oneliner__k{font-size:.75rem;font-weight:700;letter-spacing:.1em;color:var(--accent)}
.oneliner__v{margin-top:8px;font-size:1.5rem;font-weight:700;line-height:1.45;letter-spacing:.01em}
.oneliner__v--wait{font-size:1rem;color:var(--muted);font-weight:500}

.skel{background:linear-gradient(90deg,#EFEBE2 25%,#F6F3EC 37%,#EFEBE2 63%);background-size:400% 100%;animation:sk 1.4s ease infinite;border-radius:8px;height:1em}
@keyframes sk{0%{background-position:100% 0}100%{background-position:-100% 0}}
.waitnote{margin-top:10px;text-align:center;font-size:.8125rem;color:var(--muted)}

.chart{margin-top:8px}
.chart__box{position:relative;background:var(--card);border:1px solid var(--line);border-radius:var(--r-m);padding:12px 8px 6px;box-shadow:var(--shadow-1)}
.chart__ax{font-size:.6875rem;fill:var(--muted-2)}
.chart__legend{display:flex;gap:14px;justify-content:center;margin-top:6px;font-size:.6875rem;color:var(--muted)}
.moment{
  display:flex;gap:10px;align-items:flex-start;width:100%;text-align:left;
  padding:10px 12px;border-radius:var(--r-s);border:1px solid var(--line);background:var(--card);
}
.moment + .moment{margin-top:8px}
.moment.is-on{border-color:var(--accent);background:var(--tint)}
.moment__t{flex:none;font-size:.8125rem;font-weight:700;font-variant-numeric:tabular-nums;color:var(--muted);padding-top:1px}
.moment__q{flex:1;min-width:0;font-size:.875rem;line-height:1.6}
.moment__q small{display:block;color:var(--muted);font-size:.75rem;margin-top:2px}
.moment__k{flex:none;display:inline-flex;align-items:center;gap:3px;font-size:.75rem;font-weight:700}
.moment__k--down{color:var(--danger)}
.moment__k--up{color:var(--ok)}
.excerpt{margin-top:8px;padding:12px;border-radius:var(--r-s);background:#FBFAF6;border:1px dashed var(--tint-line)}
.excerpt__h{font-size:.75rem;font-weight:700;color:var(--muted);margin-bottom:6px}
.line{display:flex;gap:8px;font-size:.875rem;line-height:1.6}
.line + .line{margin-top:6px}
.line__w{flex:none;width:3.4em;white-space:nowrap;font-weight:700;color:var(--muted);font-size:.75rem;padding-top:.2em}
.line--ai .line__w{color:var(--accent-ink)}

.rub{margin-top:0}
.rub__row{display:flex;align-items:center;gap:12px;min-height:44px}
.rub__row + .rub__row{border-top:1px solid var(--line-soft)}
.rub__k{flex:none;width:5.5em;font-size:.9375rem;font-weight:700}
.rub__dots{display:flex;gap:5px;flex:1}
.rub__dot{width:14px;height:14px;border-radius:99px;background:#E6E1D7;box-shadow:inset 0 0 0 1px rgba(31,41,51,.05)}
.rub__dot.is-on{background:var(--accent)}
.rub--ok .rub__dot.is-on{background:var(--ok)}
.rub__n{flex:none;font-size:.8125rem;font-weight:700;color:var(--muted);font-variant-numeric:tabular-nums}
.rub__ev{font-size:.75rem;color:var(--muted);line-height:1.6;padding:0 0 10px 0;margin-top:-2px}

.ngband{
  margin-top:12px;border-radius:var(--r-m);overflow:hidden;
  border:1px solid #F0C8C5;background:var(--danger-tint);
}
.ngband__h{display:flex;align-items:center;gap:8px;padding:10px 14px;background:var(--danger);color:#fff}
.ngband__tag{font-size:.6875rem;font-weight:700;letter-spacing:.1em;border:1px solid rgba(255,255,255,.7);border-radius:4px;padding:1px 5px}
.ngband__h b{font-size:.875rem;font-weight:700}
.ngband__b{padding:12px 14px}
.ngband__q{font-size:1rem;font-weight:700;line-height:1.6;color:#8E1F1B}
.ngband__q time{display:block;font-size:.75rem;font-weight:700;color:#A84B46;font-variant-numeric:tabular-nums;margin-bottom:2px}
.ngband__why{margin-top:8px;font-size:.8125rem;line-height:1.7;color:#5F3330}
.ngband__fix{margin-top:10px;padding:10px 12px;border-radius:var(--r-s);background:#fff;border:1px solid #F0C8C5}
.ngband__fix b{display:block;font-size:.6875rem;letter-spacing:.08em;color:var(--ok);margin-bottom:3px}
.ngband__fix span{font-size:.9375rem;line-height:1.6;font-weight:500}
.okband{
  margin-top:12px;display:flex;align-items:center;gap:8px;
  padding:10px 14px;border-radius:var(--r-m);background:var(--ok-tint);border:1px solid #C6DCC7;
  font-size:.875rem;font-weight:700;color:#1E5C22;
}

.next{
  margin-top:0;padding:16px;border-radius:var(--r-m);
  background:var(--tint);border:1px solid var(--tint-line);
}
.next__k{font-size:.75rem;font-weight:700;letter-spacing:.08em;color:var(--accent)}
.next__v{margin-top:6px;font-size:1.0625rem;font-weight:700;line-height:1.6;color:var(--accent-ink)}
.good__q{font-size:1rem;line-height:1.7;font-weight:500}
.hidden__l{display:flex;gap:8px;align-items:flex-start;font-size:.9375rem;line-height:1.6}
.hidden__l + .hidden__l{margin-top:8px}
.hidden__i{flex:none;width:18px;height:18px;margin-top:3px}
.hidden__i--y{color:var(--ok)}
.hidden__i--n{color:var(--muted-2)}
.diff{
  margin-top:12px;display:flex;gap:8px;align-items:center;
  padding:10px 14px;border-radius:var(--r-m);background:var(--card);border:1px solid var(--line);
  font-size:.875rem;font-weight:700;
}
.diff svg{width:18px;height:18px;color:var(--accent);flex:none}
.note{margin-top:14px;font-size:.75rem;line-height:1.7;color:var(--muted)}

/* 会話の記録（両者・時刻つき・開閉） */
.talkbtn{
  display:flex;align-items:center;gap:10px;width:100%;
  min-height:48px;padding:0 14px;border-radius:var(--r-m);
  background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow-1);text-align:left;
}
.talkbtn:active{background:#F7F5F0}
.talkbtn__chev{flex:none;width:18px;height:18px;color:var(--muted);transition:transform var(--ease)}
.talkbtn.is-open .talkbtn__chev{transform:rotate(180deg)}
.talkbtn__t{flex:1;min-width:0;font-size:.9375rem;font-weight:700}
.talkbtn__n{flex:none;font-size:.75rem;color:var(--muted)}
.talklog{margin-top:8px}
.talk{display:flex;gap:10px;align-items:flex-start}
.talk + .talk{margin-top:10px;padding-top:10px;border-top:1px dashed var(--line-soft)}
.talk__m{flex:none;width:4em;display:flex;flex-direction:column;gap:1px;padding-top:.15em}
.talk__t{font-size:.6875rem;color:var(--muted-2);font-variant-numeric:tabular-nums}
.talk__w{font-size:.75rem;font-weight:700;color:var(--accent);white-space:nowrap}
.talk--ai .talk__w{color:var(--muted)}
.talk__b{flex:1;min-width:0;margin:0;font-size:.875rem;line-height:1.75;color:var(--ink)}
.talk--ai .talk__b{color:#3A444F}

.rv__actions{display:flex;gap:8px;margin-top:8px}
.rv__actions .btn{flex:1;padding:0 8px;font-size:.875rem}
.toast{
  position:absolute;left:50%;bottom:24px;transform:translate(-50%,10px);z-index:30;
  padding:12px 18px;border-radius:999px;background:var(--ink);color:#fff;font-size:.875rem;font-weight:700;
  opacity:0;transition:opacity var(--ease),transform var(--ease);pointer-events:none;box-shadow:var(--shadow-2);
}
.toast.is-on{opacity:1;transform:translate(-50%,0)}

/* ===== 確認ダイアログ ===== */
.modal{position:absolute;inset:0;z-index:40;display:flex;align-items:center;justify-content:center;padding:24px}
.modal__scrim{position:absolute;inset:0;background:rgba(10,12,15,.5)}
.modal__box{position:relative;width:100%;max-width:344px;max-height:86vh;overflow-y:auto;background:var(--paper);border-radius:var(--r-l);padding:20px;box-shadow:var(--shadow-2)}
.modal__box h3{font-size:1.0625rem;font-weight:700}
.modal__box p{margin-top:6px;font-size:.875rem;color:var(--muted);line-height:1.7}
.modal__row{display:flex;gap:8px;margin-top:18px}
.modal__row .btn{flex:1}
.btn--danger{background:var(--danger);border-color:var(--danger);color:#fff}

/* ===== PC（右にパネル） ===== */
@media (min-width:900px){
  .screen{padding:0}
  .screen__wrap{
    flex:1;min-height:0;width:100%;max-width:1180px;margin:0 auto;
    display:grid;grid-template-columns:minmax(0,1fr) 372px;gap:28px;padding:0 24px;
  }
  .col{max-width:none;border-right:1px solid var(--line)}
  .col > .scroll{padding-right:28px}
  .side{
    display:flex;flex-direction:column;min-height:0;overflow-y:auto;
    padding:24px 0 32px;gap:14px;
  }
  .side__h{font-size:.8125rem;font-weight:700;letter-spacing:.06em;color:var(--muted)}
  .side__card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-m);padding:16px;box-shadow:var(--shadow-1)}
  .side__card h4{font-size:.9375rem;font-weight:700;margin-bottom:6px}
  .side__card p{font-size:.875rem;line-height:1.75;color:#3A444F}
  .side__card .doc__b{font-size:.875rem}

  /* 通話はPCでも舞台を主役に、右に資料と字幕ログ */
  .call__wrap{
    flex:1;min-height:0;width:100%;max-width:1280px;margin:0 auto;
    display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:0;
  }
  .call__main{min-width:0}
  .callside{
    display:flex;flex-direction:column;min-height:0;
    background:var(--paper);padding:calc(12px + env(safe-area-inset-top)) 18px 18px;gap:12px;box-shadow:-2px 0 16px rgba(0,0,0,.25);
  }
  .callside__h{font-size:.75rem;font-weight:700;letter-spacing:.08em;color:var(--muted)}
  .callside__box{background:var(--card);border:1px solid var(--line);border-radius:var(--r-m);padding:14px;font-size:.875rem;line-height:1.7}
  .callside__log{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:8px}
  .console{border-radius:var(--r-xl) var(--r-xl) 0 0}
  .stage{margin:0 12px}
  .ctrls{max-width:520px;margin:4px auto 0}
  .foldrow{max-width:520px;margin:0 auto}
  .endrow{margin-top:10px}
  .stage__bottom{left:50%;right:auto;transform:translateX(-50%);width:min(560px,calc(100% - 24px))}
  .hintbox{left:auto;width:min(420px,100%);margin-left:auto}
}
@media (max-width:899px){
  .call__wrap{flex:1;min-height:0;display:flex;flex-direction:column}
  .callside{display:none}
  .screen__wrap{flex:1;min-height:0;display:flex;flex-direction:column}
}

/* 動きを減らす設定 */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important}
}

/* ===== どのブラウザでも迷わない案内（API.md §10-2） ===== */

/* 足切り（入口） */
.gate--stop{justify-content:flex-start;padding-top:32px}
.gate__mark--warn{background:var(--danger)}
.why{margin-top:10px;padding:12px 14px;border-radius:var(--r-m);background:var(--danger-tint);border:1px solid #F0C8C5}
.why p{margin:0;color:#8E1F1B;font-size:.9375rem;line-height:1.7;font-weight:500}
.why p + p{margin-top:6px}

/* 番号つきの手順（直し方） */
.steps{counter-reset:s;margin:0;padding:0;list-style:none}
.steps li{
  position:relative;padding:10px 0 10px 34px;font-size:.9375rem;line-height:1.7;
  border-bottom:1px solid var(--line-soft);
}
.steps li:last-child{border-bottom:0}
.steps li::before{
  counter-increment:s;content:counter(s);
  position:absolute;left:0;top:11px;width:24px;height:24px;border-radius:999px;
  display:flex;align-items:center;justify-content:center;
  background:var(--accent);color:#fff;font-size:.75rem;font-weight:700;
}

/* 小さな導線（入口の下・振り返りの下） */
.checklink{margin-top:14px;text-align:center}
.checklink a,.checklink button{
  display:inline-flex;align-items:center;gap:6px;min-height:48px;padding:0 12px;
  color:var(--accent);font-size:.8125rem;font-weight:700;text-decoration:underline;text-underline-offset:3px;
}
.checklink__i{width:16px;height:16px;flex:none}
a.btn{display:flex;align-items:center;justify-content:center;gap:8px;text-decoration:none}

/* 発信前の「イヤホンを使わない」 */
.check{
  display:flex;gap:12px;align-items:flex-start;min-height:48px;
  padding:14px 16px;border-radius:var(--r-m);background:var(--card);
  border:1px solid var(--line);box-shadow:var(--shadow-1);cursor:pointer;
}
.check__in{position:absolute;opacity:0;width:1px;height:1px}
.check__box{
  flex:none;width:24px;height:24px;margin-top:1px;border-radius:6px;
  border:2px solid var(--muted-2);background:var(--card);
  display:flex;align-items:center;justify-content:center;color:#fff;
  transition:background var(--ease),border-color var(--ease);
}
.check__mark{width:16px;height:16px;opacity:0;transition:opacity var(--ease)}
.check__in:checked ~ .check__box{background:var(--accent);border-color:var(--accent)}
.check__in:checked ~ .check__box .check__mark{opacity:1}
.check__in:focus-visible ~ .check__box{outline:3px solid var(--accent);outline-offset:2px}
.check__body{flex:1;min-width:0}
.check__t{display:block;font-size:.9375rem;font-weight:700;line-height:1.5}
.check__body small{display:block;margin-top:4px;font-size:.75rem;line-height:1.7;color:var(--muted)}

/* 通話ヘッダのマイクの入り具合 */
.miclvl{
  display:inline-flex;align-items:center;gap:5px;flex:none;
  padding:4px 8px;border-radius:999px;background:#EDE9E0;color:var(--muted-2);
}
.miclvl__i{width:14px;height:14px}
.miclvl__bars{display:flex;align-items:flex-end;gap:2px;height:14px}
.miclvl__bars i{width:3px;border-radius:2px;background:#CFC9BD}
.miclvl__bars i:nth-child(1){height:5px}
.miclvl__bars i:nth-child(2){height:8px}
.miclvl__bars i:nth-child(3){height:11px}
.miclvl__bars i:nth-child(4){height:14px}
.miclvl__bars i.is-lit{background:var(--ok)}
.miclvl.is-on{background:var(--ok-tint);color:#1E5C22}
.miclvl.is-muted{opacity:.5}

/* 声が届いていないお知らせ（閉じられる） */
.notice{
  position:absolute;left:8px;right:8px;top:8px;z-index:5;
  padding:10px 12px 12px;border-radius:var(--r-m);
  background:rgba(248,240,228,.98);border:1px solid #E4CFA8;color:#7A4900;
  box-shadow:var(--shadow-2);
}
.notice--bad{background:rgba(252,237,236,.98);border-color:#F0C8C5;color:#8E1F1B}
.notice__h{display:flex;align-items:center;gap:8px}
.notice__i{width:18px;height:18px;flex:none}
.notice__t{flex:1;min-width:0;font-size:.875rem;font-weight:700;line-height:1.5}
.notice__x{
  flex:none;width:32px;height:32px;margin:-6px -4px -6px 0;border-radius:999px;
  display:flex;align-items:center;justify-content:center;color:inherit;opacity:.7;
}
.notice__x svg{width:16px;height:16px}
.notice__l{margin:8px 0 0;padding:0;list-style:none}
.notice__l li{position:relative;padding-left:16px;font-size:.8125rem;line-height:1.7;font-weight:500}
.notice__l li::before{content:"・";position:absolute;left:0}
.notice__link{
  display:inline-flex;align-items:center;gap:6px;margin-top:8px;min-height:36px;
  color:var(--accent-ink);font-size:.8125rem;font-weight:700;text-decoration:underline;text-underline-offset:3px;
}

/* マイクの直し方（通話画面のうえ） */
.modal--help .modal__box{max-width:392px;text-align:left}
.help__h{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.help__i{width:26px;height:26px;flex:none;color:var(--danger)}
.modal--help h3{font-size:1.125rem;line-height:1.45}
.modal--help .steps{margin-top:10px}
.modal--help .modal__row{margin-top:14px}
.modal--help .modal__row + .modal__row{margin-top:8px}
.modal--help .formnote{margin-top:10px}

/* 相手の声が鳴らないときの1タップ */
.tapaudio{
  position:absolute;inset:0;z-index:60;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  padding:24px;background:rgba(14,17,20,.92);
}
.tapaudio__btn{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;
  width:min(320px,86vw);min-height:200px;padding:24px;border-radius:var(--r-xl);
  background:var(--accent);color:#fff;box-shadow:var(--shadow-2);
  font-size:1.125rem;font-weight:700;line-height:1.5;text-align:center;
}
.tapaudio__btn:active{background:var(--accent-ink);transform:scale(.99)}
.tapaudio__btn svg{width:44px;height:44px}
.tapaudio__n{max-width:320px;text-align:center;font-size:.8125rem;line-height:1.7;color:rgba(246,244,239,.82)}
.checklink--tight{margin-top:4px}
.checklink--tight button{font-size:.8125rem;color:var(--muted)}
@media (min-width:900px){
  .gate--stop{max-width:680px;width:100%;margin:0 auto;padding-top:48px}
}