/* ============================================================
   FAR 3表連動ドリル
   言語化ドリルと同じ暖色の紙＋ティール。BS / PL / CF に固有の色を持たせ、
   答え合わせで「どの表が動いたか」を色で追えるようにする。
   ============================================================ */

:root{
  --paper:#F4EFE4;
  --card:#FFFBF4;
  --card-edge:#E4D6C2;
  --rule:#E0D2BC;
  --ink:#2A241C;
  --ink-soft:#6B5E4E;
  --ink-faint:#9A8B78;

  --accent:#0F6B5C;
  --accent-strong:#0A4F44;
  --accent-ink:#F7F3EA;
  --accent-wash:#DCEBE6;

  --red:#B4532A;
  --red-wash:#F6E4D6;
  --green:#1F7A4C;
  --green-wash:#DCEFE3;
  --amber:#A8752A;
  --amber-wash:#F3E6C8;

  --bs:#2F5D8A;
  --bs-wash:#DFE8F1;
  --pl:#A8752A;
  --pl-wash:#F3E6C8;
  --cf:#1F7A4C;
  --cf-wash:#DCEFE3;

  --chip-bg:#EBE2D2;
  --chip-ink:#4A3F32;
  --shadow: 0 1px 0 rgba(42,36,28,.04), 0 8px 20px -12px rgba(42,36,28,.28);
  color-scheme: light;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#1A1814; --card:#26221C; --card-edge:#3A342A; --rule:#3A342A;
    --ink:#F3EDE2; --ink-soft:#B5A894; --ink-faint:#7D7263;
    --accent:#4CB8A4; --accent-strong:#8AD4C4; --accent-ink:#12241F; --accent-wash:#1E332E;
    --red:#E08A5C; --red-wash:#3A261C; --green:#5CBC84; --green-wash:#1D3327;
    --amber:#D9A857; --amber-wash:#3A3020;
    --bs:#7FAEDB; --bs-wash:#1F2A36; --pl:#D9A857; --pl-wash:#3A3020; --cf:#5CBC84; --cf-wash:#1D3327;
    --chip-bg:#322C24; --chip-ink:#E4D6C2;
    --shadow: 0 1px 0 rgba(0,0,0,.3), 0 10px 24px -14px rgba(0,0,0,.6);
    color-scheme: dark;
  }
}
:root[data-theme="dark"]{
  --paper:#1A1814; --card:#26221C; --card-edge:#3A342A; --rule:#3A342A;
  --ink:#F3EDE2; --ink-soft:#B5A894; --ink-faint:#7D7263;
  --accent:#4CB8A4; --accent-strong:#8AD4C4; --accent-ink:#12241F; --accent-wash:#1E332E;
  --red:#E08A5C; --red-wash:#3A261C; --green:#5CBC84; --green-wash:#1D3327;
  --amber:#D9A857; --amber-wash:#3A3020;
  --bs:#7FAEDB; --bs-wash:#1F2A36; --pl:#D9A857; --pl-wash:#3A3020; --cf:#5CBC84; --cf-wash:#1D3327;
  --chip-bg:#322C24; --chip-ink:#E4D6C2;
  --shadow: 0 1px 0 rgba(0,0,0,.3), 0 10px 24px -14px rgba(0,0,0,.6);
  color-scheme: dark;
}

*{box-sizing:border-box;}
html,body{min-height:100%;}
html{background-color:var(--paper);}
body{
  margin:0; color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
  -webkit-tap-highlight-color:transparent;
  background-color:var(--paper);
  background-image: radial-gradient(ellipse at top, rgba(15,107,92,.06), transparent 55%);
  min-height:100vh; min-height:100dvh;
  overflow-x:hidden;
}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important; transition-duration:.001ms !important;}
}
.mono{font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace; font-variant-numeric: tabular-nums;}
.boot{padding:40px 16px; text-align:center; color:var(--ink-soft);}
.hidden{display:none !important;}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}
svg.lucide{width:18px; height:18px; flex-shrink:0;}

#app{max-width:1040px; margin:0 auto; min-height:100vh; min-height:100dvh; display:flex; flex-direction:column;}
.col{max-width:600px; margin:0 auto; width:100%;}

/* -------- header -------- */
header.topbar{
  padding:14px 16px 12px; position:sticky; top:0; z-index:20;
  background:var(--paper); border-bottom:1px solid var(--rule);
}
.topbar-inner{display:flex; align-items:center; justify-content:space-between; gap:12px; max-width:1040px; margin:0 auto;}
.eyebrow{
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size:10.5px; letter-spacing:.14em; color:var(--accent); font-weight:700; margin-bottom:3px;
}
header.topbar h1{font-size:18px; margin:0; font-weight:800; text-wrap:balance;}
header.topbar .sub{font-size:12.5px; color:var(--ink-soft); margin-top:2px;}
.icon-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  min-width:40px; height:40px; padding:0 10px; border-radius:10px;
  border:1px solid var(--card-edge); background:var(--card); color:var(--ink-soft);
  font:inherit; font-size:12px; font-weight:700; cursor:pointer;
}
.icon-btn:active{transform:scale(.97);}
.mascot-avatar{width:52px; height:52px; flex-shrink:0; filter:drop-shadow(0 2px 6px rgba(0,0,0,.18));}

main{flex:1; padding:16px 16px 110px;}

/* -------- common -------- */
.btn{
  display:flex; align-items:center; justify-content:center; gap:8px;
  width:100%; padding:14px; border-radius:10px; border:1px solid transparent;
  background:var(--accent); color:var(--accent-ink); font-size:15px; font-weight:700;
  cursor:pointer; font-family:inherit;
}
.btn.secondary{background:var(--card); color:var(--ink); border-color:var(--card-edge);}
.btn.weak{background:var(--red-wash); color:var(--red); border-color:color-mix(in srgb, var(--red) 35%, transparent);}
.btn.ghost{background:transparent; color:var(--accent); border-color:var(--card-edge);}
.btn[disabled]{opacity:.4; pointer-events:none;}
.btn:active{transform:scale(.99);}
.stack > * + *{margin-top:10px;}

.section-title{
  display:flex; align-items:center; gap:6px;
  font-size:11.5px; font-weight:700; color:var(--ink-soft); margin:22px 0 10px;
  letter-spacing:.09em;
}
.note{font-size:12px; line-height:1.7; color:var(--ink-soft); margin:10px 2px 0;}
.banner{
  display:flex; gap:8px; align-items:flex-start;
  margin:0 0 14px; padding:10px 12px; border-radius:10px;
  background:var(--amber-wash); color:var(--amber); font-size:12px; line-height:1.6; font-weight:600;
}

.stat-row{display:flex; gap:1px; margin:6px 0 14px; background:var(--card-edge); border:1px solid var(--card-edge); border-radius:10px; overflow:hidden;}
.stat-box{flex:1; background:var(--card); padding:12px 6px; text-align:center;}
.stat-box .num{font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-variant-numeric: tabular-nums; font-size:21px; font-weight:700;}
.stat-box .lbl{font-size:10.5px; color:var(--ink-soft); margin-top:3px;}
.progress-bar{height:6px; border-radius:3px; background:var(--chip-bg); overflow:hidden; margin:0 0 18px;}
.progress-bar > div{height:100%; background:var(--accent); transition:width .4s ease;}

.chips{display:flex; flex-wrap:wrap; gap:7px;}
.chip{
  padding:7px 13px; border-radius:999px; background:var(--chip-bg); color:var(--chip-ink);
  font-size:12.5px; border:1px solid transparent; cursor:pointer; user-select:none; font-weight:600; font-family:inherit;
}
.chip.active{background:var(--accent); color:var(--accent-ink);}

.toggle-row{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:12px 14px; border-radius:10px; background:var(--card); border:1px solid var(--card-edge);
}
.toggle-row .t-main{font-size:14px; font-weight:700;}
.toggle-row .t-sub{font-size:11.5px; color:var(--ink-soft); margin-top:2px; line-height:1.5;}
.switch{position:relative; width:46px; height:28px; flex-shrink:0;}
.switch input{opacity:0; width:100%; height:100%; margin:0; position:absolute; inset:0; cursor:pointer; z-index:1;}
.switch span{position:absolute; inset:0; border-radius:999px; background:var(--chip-bg); border:1px solid var(--card-edge); transition:background .2s;}
.switch span::after{content:""; position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%; background:var(--card); box-shadow:0 1px 3px rgba(0,0,0,.25); transition:transform .2s;}
.switch input:checked + span{background:var(--accent);}
.switch input:checked + span::after{transform:translateX(18px);}

/* -------- login -------- */
.login-page{flex:1; display:flex; flex-direction:column; justify-content:center; padding:32px 22px 40px; max-width:420px; margin:0 auto; width:100%;}
.login-page h1{margin:6px 0 10px; font-size:24px;}
.login-lead{font-size:13.5px; line-height:1.7; color:var(--ink-soft); margin:0 0 22px;}
.mascot-hero{width:130px; height:130px; margin:0 auto 10px; display:block; filter:drop-shadow(0 6px 14px rgba(0,0,0,.2));}
.field-label{display:block; font-size:12px; font-weight:700; color:var(--ink-soft); margin-bottom:8px;}
.text-input{
  width:100%; padding:12px 14px; border-radius:8px; border:1px solid var(--card-edge);
  background:var(--card); color:var(--ink); font-size:17px; font-family:inherit;
}
.form-msg{min-height:1.4em; font-size:12px; color:var(--red); margin:8px 0 12px;}

/* -------- question -------- */
.progress-line{display:flex; align-items:center; gap:10px; margin-bottom:14px;}
.progress-line .count{font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size:12.5px; color:var(--ink-soft); white-space:nowrap;}
.progress-line .bar{flex:1; height:5px; background:var(--chip-bg); border-radius:3px; overflow:hidden;}
.progress-line .bar > div{height:100%; background:var(--accent);}

.card{
  background:var(--card); border:1px solid var(--card-edge); border-radius:16px;
  padding:18px 16px; box-shadow:var(--shadow);
}
.card + .card{margin-top:14px;}
.tag-row{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:12px;}
.tag{
  display:inline-flex; align-items:center; gap:4px;
  font-size:11px; font-weight:700; padding:4px 9px; border-radius:4px;
  background:var(--accent-wash); color:var(--accent-strong);
}
.tag.family{background:var(--chip-bg); color:var(--chip-ink);}
.tag.adv{background:var(--red-wash); color:var(--red);}
.scenario-ja{font-size:16.5px; line-height:1.8; font-weight:600; margin:0; text-wrap:pretty;}
.scenario-en{margin-top:12px; border-top:1px dashed var(--card-edge); padding-top:10px;}
.scenario-en summary{font-size:12px; color:var(--ink-soft); cursor:pointer; font-weight:700; list-style:none; display:flex; align-items:center; gap:6px;}
.scenario-en summary::-webkit-details-marker{display:none;}
.scenario-en p{font-size:14px; line-height:1.7; color:var(--ink-soft); margin:8px 0 0; font-family:Georgia, "Times New Roman", serif;}

/* 予測入力 */
.predict-list{display:flex; flex-direction:column; gap:10px;}
.p-group-label{font-size:11px; font-weight:800; letter-spacing:.08em; margin:6px 0 -2px; display:flex; align-items:center; gap:6px;}
.p-group-label.bs{color:var(--bs);} .p-group-label.pl{color:var(--pl);} .p-group-label.cf{color:var(--cf);}
.p-item{
  display:grid; grid-template-columns:1fr auto; gap:8px 10px; align-items:center;
  padding:10px 12px; border-radius:12px; background:var(--paper); border:1px solid var(--card-edge);
}
.p-item.done{border-color:color-mix(in srgb, var(--accent) 45%, var(--card-edge));}
.p-name{font-size:14px; font-weight:700; line-height:1.35;}
.p-name small{display:block; font-size:11px; color:var(--ink-faint); font-weight:600; font-family:ui-monospace, Menlo, monospace;}
.seg{display:inline-flex; border:1px solid var(--card-edge); border-radius:10px; overflow:hidden; background:var(--card);}
.seg button{
  width:48px; height:42px; border:0; background:transparent; color:var(--ink-soft); cursor:pointer;
  display:flex; align-items:center; justify-content:center; font-family:inherit;
}
.seg button + button{border-left:1px solid var(--card-edge);}
.seg button svg.lucide{width:20px; height:20px;}
.seg button[aria-pressed="true"].up{background:var(--green); color:#fff;}
.seg button[aria-pressed="true"].down{background:var(--red); color:#fff;}
.seg button[aria-pressed="true"].none{background:var(--ink-soft); color:var(--card);}
.amt-input{
  grid-column:1 / -1; width:100%; padding:9px 12px; border-radius:8px; border:1px solid var(--card-edge);
  background:var(--card); color:var(--ink); font-size:15px; font-family:ui-monospace, Menlo, monospace;
}
.amt-input::placeholder{color:var(--ink-faint); font-family:-apple-system, "Hiragino Sans", sans-serif; font-size:13px;}

/* -------- 答え合わせ -------- */
.score-head{display:flex; align-items:center; gap:14px;}
.score-ring{
  width:68px; height:68px; border-radius:50%; flex-shrink:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  border:3px solid var(--accent); color:var(--accent-strong);
}
.score-ring .n{font-size:22px; font-weight:800; line-height:1; font-family:ui-monospace, Menlo, monospace;}
.score-ring .d{font-size:10px; font-weight:700; color:var(--ink-soft); margin-top:2px;}
.score-ring.low{border-color:var(--red); color:var(--red);}
.score-ring.mid{border-color:var(--amber); color:var(--amber);}
.score-text h2{margin:0; font-size:17px;}
.score-text p{margin:4px 0 0; font-size:12.5px; color:var(--ink-soft); line-height:1.6;}

.journal{font-family:ui-monospace, "SF Mono", Menlo, monospace; font-size:13.5px; line-height:1.9;}
.j-row{display:grid; grid-template-columns:30px 1fr auto; gap:8px; align-items:baseline;}
.j-row .side{font-weight:800; color:var(--accent);}
.j-row.cr .side{color:var(--amber);}
.j-row.cr .acc{padding-left:18px;}
.j-row .amt{text-align:right; font-variant-numeric:tabular-nums;}

/* フロー(PL純利益 → BS利益剰余金 → CF起点) */
.flow-rail{
  display:grid; grid-template-columns:1fr auto 1fr auto 1fr; align-items:center; gap:6px;
  padding:12px; border-radius:12px; background:var(--card); border:1px solid var(--card-edge); margin-bottom:12px;
}
.flow-node{
  border:1.5px dashed var(--card-edge); border-radius:10px; padding:8px 6px; text-align:center;
  color:var(--ink-faint); transition:all .35s ease; min-width:0;
}
.flow-node .fn-k{font-size:10px; font-weight:800; letter-spacing:.08em;}
.flow-node .fn-l{font-size:12px; font-weight:700; margin-top:2px; line-height:1.3;}
.flow-node .fn-v{font-size:12.5px; font-weight:800; margin-top:3px; font-family:ui-monospace, Menlo, monospace; min-height:1.2em;}
.flow-node.on{border-style:solid; color:var(--ink);}
.flow-node.on.pl{border-color:var(--pl); background:var(--pl-wash);}
.flow-node.on.bs{border-color:var(--bs); background:var(--bs-wash);}
.flow-node.on.cf{border-color:var(--cf); background:var(--cf-wash);}
.flow-arrow{color:var(--ink-faint); display:flex; transition:color .35s ease;}
.flow-arrow.on{color:var(--accent);}
.flow-arrow svg.lucide{width:20px; height:20px;}
.flow-skip{grid-column:1 / -1; font-size:11.5px; color:var(--ink-soft); text-align:center; line-height:1.5;}

.fs-grid{display:grid; grid-template-columns:1fr; gap:12px;}
@media (min-width:820px){
  .fs-grid{grid-template-columns:repeat(3, minmax(0,1fr)); align-items:start;}
}
.fs{
  background:var(--card); border:1px solid var(--card-edge); border-radius:12px; overflow:hidden;
  border-top:4px solid var(--c, var(--accent));
}
.fs.bs{--c:var(--bs); --w:var(--bs-wash);}
.fs.pl{--c:var(--pl); --w:var(--pl-wash);}
.fs.cf{--c:var(--cf); --w:var(--cf-wash);}
.fs-head{display:flex; align-items:baseline; justify-content:space-between; padding:10px 12px 6px;}
.fs-head .k{font-size:15px; font-weight:800; color:var(--c);}
.fs-head .s{font-size:11px; color:var(--ink-soft);}
.fs-sec{font-size:10.5px; font-weight:800; letter-spacing:.06em; color:var(--ink-faint); padding:8px 12px 2px; text-transform:uppercase;}
.fs-row{
  display:grid; grid-template-columns:22px 1fr auto; gap:6px; align-items:center;
  padding:6px 12px; font-size:12.5px; line-height:1.4;
  border-left:3px solid transparent; transition:background .35s ease, border-color .35s ease, opacity .35s ease;
}
.fs-row .nm{min-width:0; overflow-wrap:anywhere;}
.fs-row .v{font-family:ui-monospace, "SF Mono", Menlo, monospace; font-variant-numeric:tabular-nums; font-weight:700; text-align:right; white-space:nowrap; color:var(--ink-faint);}
.fs-row .stp{
  width:20px; height:20px; border-radius:50%; font-size:10.5px; font-weight:800;
  display:flex; align-items:center; justify-content:center; color:transparent;
  border:1px dashed var(--card-edge); font-family:ui-monospace, Menlo, monospace;
}
.fs-row.pending .nm{color:var(--ink-soft);}
.fs-row.shown .v{color:var(--ink);}
.fs-row.shown .stp{border:0; background:var(--chip-bg); color:var(--chip-ink);}
.fs-row.shown .v.pos{color:var(--green);}
.fs-row.shown .v.neg{color:var(--red);}
.fs-row.active{background:var(--w); border-left-color:var(--c);}
.fs-row.active .stp{background:var(--c); color:var(--card);}
.fs-row.active .nm{font-weight:700;}
.fs-row.total{border-top:1px solid var(--rule); font-weight:800; padding-top:8px; padding-bottom:8px;}
.fs-row.total .nm{font-weight:800;}
.fs-row.flowpt .nm::after{
  content:"つながり"; margin-left:6px; font-size:9.5px; font-weight:800; padding:1px 5px; border-radius:3px;
  background:var(--accent-wash); color:var(--accent-strong); vertical-align:1px;
}
.fs-empty{padding:6px 12px; font-size:12px; color:var(--ink-faint);}
.fs-foot{height:6px;}
.fs-row.pulse{animation:pulse .9s ease;}
@keyframes pulse{
  0%{box-shadow:inset 0 0 0 0 var(--c);}
  40%{box-shadow:inset 0 0 0 2px var(--c);}
  100%{box-shadow:inset 0 0 0 0 transparent;}
}

/* chain の再生コントロール */
.chain-list{list-style:none; margin:12px 0 0; padding:0; counter-reset:c;}
.chain-list li{
  display:grid; grid-template-columns:24px 1fr; gap:8px; padding:8px 10px; border-radius:8px;
  font-size:13px; line-height:1.6; color:var(--ink-faint); transition:all .3s ease;
}
.chain-list li .n{
  width:22px; height:22px; border-radius:50%; font-size:11px; font-weight:800; display:flex; align-items:center; justify-content:center;
  border:1px solid var(--card-edge); font-family:ui-monospace, Menlo, monospace;
}
.chain-list li.done{color:var(--ink-soft);}
.chain-list li.done .n{background:var(--chip-bg); border-color:transparent; color:var(--chip-ink);}
.chain-list li.cur{color:var(--ink); background:var(--accent-wash); font-weight:600;}
.chain-list li.cur .n{background:var(--accent); color:var(--accent-ink); border-color:transparent;}

.player{
  position:sticky; bottom:0; z-index:15; margin:14px -16px 0; padding:10px 16px calc(10px + env(safe-area-inset-bottom));
  background:color-mix(in srgb, var(--paper) 92%, transparent); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  border-top:1px solid var(--rule);
}
.player-cap{font-size:12.5px; line-height:1.55; margin-bottom:8px; min-height:2.6em; color:var(--ink);}
.player-cap .lbl{font-family:ui-monospace, Menlo, monospace; font-size:11px; color:var(--accent); font-weight:800; margin-right:6px;}
.player-btns{display:grid; grid-template-columns:auto auto 1fr auto; gap:8px;}
.player-btns .btn{padding:11px 12px; font-size:14px; width:auto;}

/* 7項目の正誤 */
.result-table{width:100%; border-collapse:collapse; font-size:13px;}
.result-table th{font-size:10.5px; color:var(--ink-faint); font-weight:700; text-align:left; padding:0 6px 6px; letter-spacing:.04em;}
.result-table td{padding:9px 6px; border-top:1px solid var(--rule); vertical-align:middle;}
.result-table td.item{font-weight:700;}
.result-table td.ok-cell{width:34px; text-align:center;}
.dir{display:inline-flex; align-items:center; gap:3px; font-weight:700; white-space:nowrap; font-family:ui-monospace, Menlo, monospace; font-size:12px;}
.dir svg.lucide{width:15px; height:15px;}
.dir.up{color:var(--green);} .dir.down{color:var(--red);} .dir.none{color:var(--ink-soft);}
.dir.blank{color:var(--ink-faint);}
.okmark{display:inline-flex; width:24px; height:24px; border-radius:50%; align-items:center; justify-content:center;}
.okmark.ok{background:var(--green-wash); color:var(--green);}
.okmark.ng{background:var(--red-wash); color:var(--red);}
.okmark svg.lucide{width:15px; height:15px;}
tr.ng-row td{background:color-mix(in srgb, var(--red-wash) 45%, transparent);}

.punchline{
  margin:0; font-size:21px; line-height:1.6; font-weight:800; letter-spacing:.01em; text-wrap:pretty;
  padding:4px 0 4px 14px; border-left:4px solid var(--accent);
}
.trap{
  margin-top:16px; padding:12px 14px; border-radius:10px; background:var(--amber-wash);
  font-size:13.5px; line-height:1.75; color:var(--ink);
}
.trap .lbl{display:flex; align-items:center; gap:6px; font-size:11.5px; font-weight:800; color:var(--amber); margin-bottom:4px; letter-spacing:.04em;}
.related{margin-top:12px; font-size:12px; color:var(--ink-soft); line-height:1.6;}

.rate-row{display:flex; gap:8px;}
.rate-btn{
  flex:1; padding:12px 4px; border-radius:10px; border:1.5px solid transparent; font-weight:800; font-size:13px;
  cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:4px; font-family:inherit;
}
.rate-btn svg.lucide{width:20px; height:20px;}
.rate-btn .interval{font-size:10.5px; font-weight:700; opacity:.75;}
.rate-btn.bad{background:var(--red-wash); color:var(--red); border-color:color-mix(in srgb, var(--red) 30%, transparent);}
.rate-btn.mid{background:var(--amber-wash); color:var(--amber); border-color:color-mix(in srgb, var(--amber) 30%, transparent);}
.rate-btn.good{background:var(--green-wash); color:var(--green); border-color:color-mix(in srgb, var(--green) 30%, transparent);}
.rate-btn:active{transform:scale(.97);}

/* -------- つながりマップ -------- */
.summary-head{text-align:center; padding-top:10px;}
.summary-head h2{margin:0 0 6px; font-size:20px;}
.summary-head p{color:var(--ink-soft); font-size:13px; margin:0 0 18px; line-height:1.6;}
.summary-stats{display:flex; gap:8px; justify-content:center; margin-bottom:8px;}
.summary-stats div{background:var(--card); border:1px solid var(--card-edge); border-radius:8px; padding:10px 8px; flex:1; max-width:110px;}
.summary-stats .n{font-family:ui-monospace, Menlo, monospace; font-size:18px; font-weight:800;}
.summary-stats .l{font-size:10px; color:var(--ink-soft); margin-top:3px; white-space:nowrap;}

.family{background:var(--card); border:1px solid var(--card-edge); border-radius:14px; padding:14px; box-shadow:var(--shadow);}
.family + .family{margin-top:12px;}
.family.gap{border-color:color-mix(in srgb, var(--red) 45%, var(--card-edge));}
.family-head{display:flex; align-items:flex-start; justify-content:space-between; gap:10px;}
.family-head h3{margin:0; font-size:15.5px; line-height:1.4;}
.family-avg{font-family:ui-monospace, Menlo, monospace; font-size:18px; font-weight:800; color:var(--accent-strong); white-space:nowrap;}
.family-core{font-size:12.5px; line-height:1.7; color:var(--ink-soft); margin:6px 0 10px;}
.gap-alert{
  display:flex; gap:8px; align-items:flex-start; padding:9px 11px; border-radius:8px;
  background:var(--red-wash); color:var(--red); font-size:12px; line-height:1.6; font-weight:600; margin-bottom:10px;
}
.topic-row{display:grid; grid-template-columns:minmax(0,1fr) 92px 44px; gap:8px; align-items:center; padding:7px 0; border-top:1px solid var(--rule); font-size:13px;}
.topic-row .tn{font-weight:700; min-width:0;}
.topic-row .tn small{display:block; font-size:10.5px; color:var(--ink-faint); font-weight:600;}
.topic-row .bar{height:8px; border-radius:4px; background:var(--chip-bg); overflow:hidden;}
.topic-row .bar > div{height:100%; background:var(--accent); border-radius:4px;}
.topic-row .pct{font-family:ui-monospace, Menlo, monospace; font-weight:800; text-align:right; font-size:12.5px;}
.topic-row.weak .tn{color:var(--red);}
.topic-row.weak .bar > div{background:var(--red);}
.topic-row.weak .pct{color:var(--red);}
.topic-row.untried{opacity:.55;}
.topic-row .flag{
  display:inline-block; margin-left:6px; font-size:10px; font-weight:800; padding:1px 6px; border-radius:3px;
  background:var(--red); color:#fff; vertical-align:1px;
}
.topic-row .now{
  display:inline-block; margin-left:6px; font-size:10px; font-weight:800; padding:1px 6px; border-radius:3px;
  background:var(--accent-wash); color:var(--accent-strong); vertical-align:1px;
}

.empty-state{text-align:center; padding:50px 10px; color:var(--ink-soft); font-size:13.5px; line-height:1.7;}
.mascot-small{width:88px; height:88px; margin-bottom:10px;}

footer.tabbar{
  position:sticky; bottom:0; display:flex; border-top:1px solid var(--rule); z-index:15;
  background:var(--paper); padding:8px 10px calc(8px + env(safe-area-inset-bottom));
}
.tabbar button{
  flex:1; background:none; border:none; color:var(--ink-faint); font-size:11px; padding:6px 0;
  display:flex; flex-direction:column; align-items:center; gap:4px; cursor:pointer; font-weight:600; font-family:inherit;
}
.tabbar button.active{color:var(--accent);}
.tabbar button svg.lucide{width:20px; height:20px;}

/* 再生コントロールは「3表」ブロックの中だけで下に張り付く */
.stage{max-width:1040px; margin:0 auto;}

/* スマホでヘッダーが縦に伸びすぎないようにする */
header.topbar h1{display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
header.topbar .sub{white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.topbar-inner > div:first-child{min-width:0;}
@media (max-width:480px){
  header.topbar h1{font-size:16px;}
  .punchline{font-size:18.5px;}
}

/* -------- 解答集 -------- */
.col.wide{max-width:820px;}
a.btn{text-decoration:none;}
.btn.sm{width:auto; padding:8px 12px; font-size:13px; border-radius:8px; gap:6px;}
.btn.sm svg.lucide{width:16px; height:16px;}
.ans-toc{margin:14px 0 4px;}
a.chip{text-decoration:none; display:inline-block;}

.ans-quick{
  margin-top:16px; padding:14px; border-radius:14px; background:var(--card); border:1px solid var(--card-edge); box-shadow:var(--shadow);
  scroll-margin-top:90px;
}
.ans-quick-head{display:flex; align-items:center; justify-content:space-between; gap:10px;}
#quickBody{margin-top:12px;}
/* 横スクロールは表の中だけに閉じ込める */
.qt-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch; max-width:100%; border:1px solid var(--card-edge); border-radius:10px; overscroll-behavior-x:contain;}
.qt{border-collapse:separate; border-spacing:0; width:100%; min-width:640px; font-size:12px;}
.qt th, .qt td{padding:6px 7px; border-bottom:1px solid var(--rule); text-align:center; white-space:nowrap; background:var(--card);}
.qt thead th{background:var(--accent); color:var(--accent-ink); font-size:11px; font-weight:700; letter-spacing:.04em;}
.qt .qt-id{position:sticky; left:0; z-index:1; font-family:ui-monospace, Menlo, monospace; color:var(--ink-soft); font-weight:700; border-right:1px solid var(--rule);}
.qt thead .qt-id{color:var(--accent-ink); z-index:2;}
.qt td.qt-topic{text-align:left; font-weight:600; white-space:normal; min-width:150px;}
.qt td.qt-topic .tag{margin-left:5px; padding:1px 5px; font-size:10px; vertical-align:1px;}
.qt tr.qt-fam th{background:var(--accent-wash); color:var(--accent-strong); text-align:left; font-size:12px; font-weight:800; position:static;}
.qt tbody tr:last-child > *{border-bottom:0;}
.qd{font-family:ui-monospace, Menlo, monospace; font-variant-numeric:tabular-nums; font-weight:700;}
.qd.up{color:var(--green);} .qd.down{color:var(--red);} .qd.none{color:var(--ink-faint);}

.ans-chapter{scroll-margin-top:90px; margin-top:26px;}
.chap-head{
  padding:14px 16px; border-radius:14px; margin-bottom:10px;
  background:var(--accent-wash); border:1px solid color-mix(in srgb, var(--accent) 30%, transparent);
}
.chap-head .ck{font-family:ui-monospace, Menlo, monospace; font-size:11px; letter-spacing:.14em; font-weight:800; color:var(--accent); display:flex; gap:10px;}
.chap-head .ck span{color:var(--ink-soft); letter-spacing:.04em;}
.chap-head h2{margin:4px 0 6px; font-size:17px; line-height:1.45; color:var(--accent-strong);}
.chap-head p{margin:0; font-size:13px; line-height:1.75; color:var(--ink);}

.ans-card{background:var(--card); border:1px solid var(--card-edge); border-radius:14px; box-shadow:var(--shadow); overflow:hidden; scroll-margin-top:90px;}
.ans-card + .ans-card{margin-top:10px;}
.ans-card.open{border-color:color-mix(in srgb, var(--accent) 40%, var(--card-edge));}
.ans-head{
  display:flex; align-items:center; gap:8px; width:100%; padding:13px 14px; border:0; background:transparent;
  color:var(--ink); font:inherit; text-align:left; cursor:pointer;
}
.ans-id{font-family:ui-monospace, Menlo, monospace; font-size:11px; font-weight:800; padding:3px 7px; border-radius:4px; background:var(--chip-bg); color:var(--chip-ink); flex-shrink:0;}
.ans-topic{font-size:14.5px; font-weight:700; line-height:1.4; min-width:0;}
.ans-head .tag{flex-shrink:0;}
.ans-toggle{margin-left:auto; display:inline-flex; align-items:center; gap:4px; font-size:12px; font-weight:700; color:var(--accent); flex-shrink:0; white-space:nowrap;}
.ans-toggle svg.lucide{transition:transform .2s ease;}
.ans-toggle .t-close{display:none;}
.ans-card.open .ans-toggle .t-open{display:none;}
.ans-card.open .ans-toggle .t-close{display:inline;}
.ans-card.open .ans-toggle svg.lucide{transform:rotate(180deg);}

.ans-untried{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px 12px;
  margin:0 14px 12px; padding:8px 10px; border-radius:8px; background:var(--paper); border:1px dashed var(--card-edge);
  font-size:12px; color:var(--ink-soft); line-height:1.5;
}
.ans-untried > span{display:flex; align-items:center; gap:6px;}
.ans-untried svg.lucide{width:15px; height:15px;}
.ans-last{display:flex; align-items:center; gap:6px; margin:0 14px 12px; font-size:12px; font-weight:700;}
.ans-last svg.lucide{width:15px; height:15px;}
.ans-last.ok{color:var(--green);} .ans-last.mid{color:var(--amber);} .ans-last.ng{color:var(--red);}
.ans-last .cnt{color:var(--ink-faint); font-weight:600;}

.ans-body{padding:4px 14px 16px; border-top:1px solid var(--rule);}
.ans-body .scenario-ja{font-size:15px; margin-top:12px;}
.ans-en{font-size:13.5px; line-height:1.7; color:var(--ink-soft); margin:8px 0 0; font-family:Georgia, "Times New Roman", serif;}
.ans-box{background:var(--paper); border:1px solid var(--card-edge); border-radius:10px; padding:10px 12px; margin-top:12px; min-width:0;}
.ans-box .bh, .ans-fs .fh{display:flex; align-items:center; gap:6px; font-size:11px; font-weight:800; color:var(--ink-soft); letter-spacing:.06em; margin-bottom:6px;}
.ans-box .bh svg.lucide{width:15px; height:15px;}
.bh-note{margin-left:auto; font-weight:600; color:var(--ink-faint); letter-spacing:0;}
.ans-box .journal{font-size:12.5px; line-height:1.8;}
.ans-grid2{display:grid; grid-template-columns:1fr; gap:0 12px;}
.ans-items{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:6px 10px;}
.ans-item{min-width:0; padding-left:8px; border-left:3px solid var(--c, var(--accent));}
.ans-item.bs{--c:var(--bs);} .ans-item.pl{--c:var(--pl);} .ans-item.cf{--c:var(--cf);}
.ans-item .al{font-size:11px; color:var(--ink-soft); font-weight:700;}
.ans-item .av{display:flex; align-items:center; gap:6px; margin-top:1px;}
.ans-item .okmark{width:18px; height:18px;}
.ans-item .okmark svg.lucide{width:12px; height:12px;}
.ans-fs3{display:grid; grid-template-columns:1fr; gap:10px; margin-top:12px;}
.ans-fs{background:var(--card); border:1px solid var(--card-edge); border-top:3px solid var(--c); border-radius:10px; padding:8px 10px; min-width:0;}
.ans-fs.bs{--c:var(--bs);} .ans-fs.pl{--c:var(--pl);} .ans-fs.cf{--c:var(--cf);}
.ans-fs .fh{color:var(--c); font-size:13px; letter-spacing:.02em;}
.ans-fs .fh span{font-size:10.5px; color:var(--ink-soft); font-weight:600;}
.ans-fs .ln{display:flex; justify-content:space-between; align-items:baseline; gap:8px; padding:4px 0; border-top:1px dotted var(--rule); font-size:12px; line-height:1.45;}
.ans-fs .ln .nm{min-width:0; overflow-wrap:anywhere;}
.ans-fs .ln b{display:inline-block; margin-right:5px; font-size:10px; padding:0 4px; border-radius:3px; background:var(--cf-wash); color:var(--cf); vertical-align:1px;}
.ans-fs .ln .v{font-family:ui-monospace, Menlo, monospace; font-variant-numeric:tabular-nums; font-weight:700; white-space:nowrap;}
.ans-fs .ln .v.pos{color:var(--green);} .ans-fs .ln .v.neg{color:var(--red);}
.ln-none{font-size:12px; color:var(--ink-faint);}
.chain-list.static{margin:0;}
.chain-list.static li{color:var(--ink); padding:5px 0;}
.chain-list.static li .n{background:var(--accent); color:var(--accent-ink); border-color:transparent;}
.ans-body .punchline{font-size:16.5px; margin-top:16px;}
@media (min-width:720px){
  .ans-grid2{grid-template-columns:minmax(0,1fr) minmax(0,1fr);}
  .ans-fs3{grid-template-columns:repeat(3, minmax(0,1fr));}
  .ans-items{grid-template-columns:repeat(4, minmax(0,1fr));}
  .ans-grid2 .ans-items{grid-template-columns:repeat(2, minmax(0,1fr));}
}