/* ================================================================
   スピーキングくん ── 「問題カードと藍の印」スタイル
   むげん問題くん／かんたん採点くんの姉妹デザイン。
   主色は藍（面接）、採点の朱、警告の金茶をそのまま引き継ぐ。
   ================================================================ */
:root{
  --paper:#f6f3ec;
  --card:#fffdf8;
  --ink:#2b2a26;
  --sub:#847e70;
  --line:#d9d3c2;
  --line2:#b9b2a0;
  --ai:#27496d;          /* 藍（このアプリの主色） */
  --ai-soft:#e8eef5;
  --ai-dark:#182f47;
  --red:#c23a2b;         /* 朱（採点・添削用） */
  --red-soft:#faeae7;
  --navy:#2c4257;
  --navy-soft:#eef1f4;
  --gold:#a5772a;
  --gold-soft:#f8f1e4;
  --green:#2f6b4f;
  --green-soft:#e9f1ec;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth}
body{
  font-family:"Noto Sans JP","Hiragino Sans","Yu Gothic",sans-serif;
  background:
    repeating-linear-gradient(0deg, transparent 0 31px, rgba(0,0,0,.018) 31px 32px),
    var(--paper);
  color:var(--ink);line-height:1.85;min-height:100vh;font-size:14.5px;
}
.wrap{max-width:660px;margin:0 auto;padding:26px 18px 90px}

/* ---------- 題字 ---------- */
header{display:flex;align-items:center;gap:16px;padding:14px 2px 20px;border-bottom:3px double var(--line2);
  cursor:pointer;transition:.12s;user-select:none}
header:hover{opacity:.78}
header:active{transform:scale(.99)}
header:focus-visible{outline:2px solid var(--ai);outline-offset:3px}
.stamp{flex:0 0 58px;height:58px;border:3px solid var(--ai);border-radius:8px;color:var(--ai);
  display:grid;place-items:center;font-size:32px;font-weight:900;transform:rotate(-4deg);
  font-family:"Noto Serif JP",serif;background:var(--card)}
.fuki{position:relative;display:inline-block;border:1.5px solid var(--ink);border-radius:999px;
  background:#fff;color:var(--ink);font-size:12px;font-weight:700;letter-spacing:.08em;
  padding:2px 13px;margin-bottom:9px}
.fuki::after,.fuki::before{content:"";position:absolute;left:22px;border-style:solid;border-color:transparent}
.fuki::before{bottom:-8px;border-width:8px 5px 0 5px;border-top-color:var(--ink)}
.fuki::after{bottom:-5.5px;border-width:7px 4px 0 4px;border-top-color:#fff}
header .t h1{font-family:"Noto Serif JP",serif;font-size:clamp(23px,5.6vw,30px);font-weight:900;letter-spacing:.06em}
header .t p{font-size:12px;color:var(--sub);margin-top:2px;letter-spacing:.04em}
header .t p b{color:var(--ai);font-weight:700}

.foreword{margin:18px 0 4px;padding:14px 16px;background:var(--card);border:1px solid var(--line);
  border-left:4px solid var(--ai);font-size:13.5px}
.foreword b{color:var(--ai)}

/* ---------- タブ ---------- */
.tabs{display:flex;gap:0;margin:22px 0 0;border-bottom:2px solid var(--ink);flex-wrap:wrap}
.tabs button{font-family:"Noto Serif JP",serif;font-size:15px;font-weight:700;letter-spacing:.08em;
  padding:10px 18px 8px;cursor:pointer;border:1px solid var(--line2);border-bottom:none;
  background:#eceadf;color:var(--sub);border-radius:6px 6px 0 0;margin-right:6px;position:relative;top:2px}
.tabs button.on{background:var(--card);color:var(--ink);border-color:var(--ink);
  border-bottom:2px solid var(--card);top:2px}

/* ---------- 用紙 ---------- */
.card{background:var(--card);border:1px solid var(--line);padding:20px 20px 18px;margin-top:16px;
  box-shadow:0 1px 3px rgba(60,50,30,.07)}
.card h2{font-family:"Noto Serif JP",serif;font-size:16px;font-weight:700;letter-spacing:.08em;
  padding-bottom:8px;margin-bottom:14px;border-bottom:1px solid var(--line);display:flex;align-items:baseline;gap:10px}
.card h2 .no{color:var(--ai);font-size:14px;font-weight:900}
.hint{font-size:12px;color:var(--sub);margin:-6px 0 12px}

/* ---------- 選択 ---------- */
.seg{display:grid;gap:8px}
.seg.c2{grid-template-columns:repeat(2,1fr)}
.seg.c3{grid-template-columns:repeat(3,1fr)}
.seg.c4{grid-template-columns:repeat(4,1fr)}
.seg button{font-family:inherit;cursor:pointer;padding:11px 4px;transition:.12s;text-align:center;
  border:1px solid var(--line2);background:var(--card);font-size:13.5px;font-weight:700;color:var(--ink)}
.seg button small{display:block;font-weight:400;font-size:10.5px;color:var(--sub);margin-top:1px;letter-spacing:.03em}
.seg button.on{border:2px solid var(--ai);color:var(--ai);background:var(--ai-soft);padding:10px 3px}
.seg button.on small{color:var(--ai)}
.spec{margin-top:12px;font-size:12.5px;color:var(--ink);background:var(--navy-soft);
  border-left:3px solid var(--navy);padding:9px 13px}
.spec b{color:var(--navy)}

/* ---------- 大ボタン ---------- */
.genbtn{display:block;width:100%;border:none;cursor:pointer;font-family:"Noto Serif JP",serif;
  font-weight:900;font-size:17px;color:#fff;padding:16px;letter-spacing:.3em;text-indent:.3em;
  background:var(--ai);margin-top:16px;box-shadow:0 2px 0 var(--ai-dark);transition:.1s}
.genbtn:active{transform:translateY(2px);box-shadow:none}
.genbtn:disabled{opacity:.55;cursor:not-allowed}
.startbtn{background:var(--red);box-shadow:0 2px 0 #8e2a1f}
.gonote{font-size:11.5px;color:var(--sub);text-align:center;margin-top:9px}
.limitnote{font-size:11px;line-height:1.6;opacity:.85;margin-top:3px}
.quota{display:block;margin-top:4px;font-size:11.5px;color:var(--ai);font-weight:700}
.quota.out{color:var(--red)}

/* ---------- 問題カード ---------- */
.mondai{border:2px solid var(--ink);background:#fff;padding:20px 20px 16px;margin-top:16px;position:relative}
.mondai .mhead{display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--line);padding-bottom:8px;margin-bottom:12px}
.mondai .mhead .mtitle{font-family:"Noto Serif JP",serif;font-weight:700;font-size:15px;letter-spacing:.15em}
.mondai .mhead .mtag{margin-left:auto;font-size:11px;color:var(--sub);letter-spacing:.05em}
.mondai .inst{font-size:12.5px;color:var(--ink);background:var(--paper);padding:9px 13px;margin-bottom:12px}
.mondai .ptitle{font-family:"Noto Serif JP",serif;font-size:16px;font-weight:700;text-align:center;margin-bottom:10px}
.mondai .passage{font-size:14.5px;line-height:2.05}
.mondai .startsent{margin-top:12px;border:1px solid var(--line2);padding:10px 14px;background:var(--ai-soft)}
.mondai .startsent .plabel{font-size:11px;font-weight:700;letter-spacing:.2em;color:var(--ai);
  font-family:"Noto Serif JP",serif;margin-bottom:3px}
.mondai .startsent .en{font-size:14.5px;font-weight:700}

/* コマ割り */
.koma{display:grid;gap:10px;margin-top:14px}
.koma.c3{grid-template-columns:repeat(3,1fr)}
.koma.c4{grid-template-columns:repeat(2,1fr)}
.frame{border:1.5px solid var(--ink);background:#fff;padding:10px 11px;position:relative;min-height:118px}
.frame .no{position:absolute;top:-1px;left:-1px;background:var(--ink);color:#fff;font-size:10px;
  font-weight:700;padding:1px 7px;font-family:"Noto Serif JP",serif}
.frame .tm{font-size:11px;font-weight:700;color:var(--ai);margin:12px 0 5px;letter-spacing:.03em}
.frame .sc{font-size:12px;line-height:1.75;color:var(--ink)}
.frame .bub{margin-top:7px;font-size:11.5px;background:#fff;border:1px solid var(--line2);
  border-radius:12px;padding:4px 10px;font-style:italic;position:relative}
.frame .bub::before{content:"“"}
.frame .bub::after{content:"”"}
.frame .sg{margin-top:6px;font-size:11px;background:var(--gold-soft);border-left:2px solid var(--gold);
  padding:3px 8px;font-weight:700;color:var(--gold)}
.komanote{font-size:11.5px;color:var(--sub);margin-top:8px;line-height:1.7}
.qhide{margin-top:12px;border:1px dashed var(--line2);background:var(--paper);padding:16px 15px;text-align:center}
.qhide .lock{font-family:"Noto Serif JP",serif;font-weight:700;font-size:13px;letter-spacing:.15em;color:var(--ai);margin-bottom:6px}
.qhide .lock::before{content:"🔒 "}
.qhide p{font-size:12px;color:var(--sub);line-height:1.75}

/* 1級のトピック選択 */
.topics{display:grid;gap:8px;margin-top:4px}
.topic{display:flex;gap:11px;align-items:flex-start;border:1px solid var(--line2);background:#fff;
  padding:11px 13px;cursor:pointer;font-family:inherit;text-align:left;font-size:13.5px;line-height:1.75;color:var(--ink)}
.topic .tn{flex:0 0 auto;font-family:"Noto Serif JP",serif;font-weight:900;color:var(--ai);font-size:13px}
.topic.on{border:2px solid var(--ai);background:var(--ai-soft);padding:10px 12px}
.topic.on .tn{color:var(--ai)}

.mrow{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.mbtn{border:1px solid var(--line2);background:var(--card);color:var(--ink);
  font-family:inherit;font-size:12.5px;font-weight:700;padding:8px 16px;cursor:pointer}
.mbtn:active{background:#efece2}

/* ---------- 面接本番オーバーレイ ---------- */
#stage{position:fixed;inset:0;z-index:200;background:var(--paper);display:none;overflow-y:auto}
#stage.on{display:block}
.stagewrap{max-width:660px;margin:0 auto;padding:18px 18px 40px;min-height:100%;display:flex;flex-direction:column}
.stagebar{display:flex;align-items:center;gap:10px;border-bottom:2px solid var(--ink);padding-bottom:9px}
.stagebar .sname{font-family:"Noto Serif JP",serif;font-weight:900;letter-spacing:.1em;font-size:15px}
.stagebar .sstep{font-size:11.5px;color:var(--sub);margin-left:auto}
.stagebar .abort{border:1px solid var(--line2);background:var(--card);font-family:inherit;
  font-size:11.5px;font-weight:700;padding:5px 11px;cursor:pointer;color:var(--sub)}

.examiner{display:flex;gap:12px;margin-top:16px;align-items:flex-start}
.exface{flex:0 0 44px;height:44px;border:2px solid var(--ai);border-radius:50%;color:var(--ai);
  display:grid;place-items:center;font-family:"Noto Serif JP",serif;font-weight:900;font-size:15px;background:#fff}
.exbody{flex:1;background:#fff;border:1px solid var(--line);padding:12px 15px;position:relative;min-height:56px}
.exbody::before{content:"";position:absolute;left:-7px;top:14px;border:7px solid transparent;border-right-color:var(--line)}
.exbody::after{content:"";position:absolute;left:-5.5px;top:14px;border:7px solid transparent;border-right-color:#fff}
.exbody .lbl{font-size:10.5px;font-weight:700;letter-spacing:.15em;color:var(--ai);
  font-family:"Noto Serif JP",serif;margin-bottom:3px}
.exbody .en{font-size:14.5px;line-height:1.8}
.exbody .ja{font-size:11.5px;color:var(--sub);margin-top:6px;border-top:1px dashed var(--line);padding-top:5px}
.exbody.speaking{border-color:var(--ai);box-shadow:0 0 0 2px var(--ai-soft)}
.exbody .hidden-cc{color:var(--sub);font-style:italic;font-size:12.5px}

.bigtimer{text-align:center;margin:18px 0 6px;font-family:"Noto Serif JP",serif}
.bigtimer .tnum{font-size:58px;font-weight:900;line-height:1;letter-spacing:.02em;color:var(--ink)}
.bigtimer.warn .tnum{color:var(--red)}
.bigtimer .tlab{font-size:12px;color:var(--sub);letter-spacing:.2em;margin-top:4px}
.tbar{height:6px;background:#efece2;border:1px solid var(--line);margin-top:8px;overflow:hidden}
.tbar i{display:block;height:100%;background:var(--ai);width:100%;transition:width .25s linear}
.tbar.rec i{background:var(--red)}

.reclamp{display:flex;align-items:center;justify-content:center;gap:9px;margin-top:14px;
  font-size:13px;font-weight:700;color:var(--red)}
.reclamp .dot{width:11px;height:11px;border-radius:50%;background:var(--red);animation:blink 1.1s ease infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.25}}
.level{height:8px;background:#efece2;border:1px solid var(--line);margin-top:10px;overflow:hidden}
.level i{display:block;height:100%;width:0;background:var(--red);transition:width .08s linear}

.stagecard{margin-top:16px}
.stagebtns{display:flex;gap:9px;margin-top:16px;flex-wrap:wrap}
.stagebtns button{flex:1;min-width:130px;border:none;cursor:pointer;font-family:"Noto Serif JP",serif;
  font-weight:900;font-size:15px;color:#fff;padding:14px;letter-spacing:.15em;background:var(--ai);
  box-shadow:0 2px 0 var(--ai-dark)}
.stagebtns button.sub{background:var(--card);color:var(--sub);border:1px solid var(--line2);
  box-shadow:none;font-weight:700;font-size:13px;letter-spacing:.05em;flex:0 0 auto;min-width:0;padding:14px 18px}
.stagebtns button:active{transform:translateY(2px);box-shadow:none}
.stagebtns button:disabled{opacity:.5;cursor:not-allowed}
.stagenote{font-size:11.5px;color:var(--sub);text-align:center;margin-top:10px;line-height:1.7}

.ccswitch{display:flex;align-items:center;gap:7px;font-size:11.5px;color:var(--sub);margin-top:12px;justify-content:flex-end}
.ccswitch input{width:16px;height:16px;accent-color:var(--ai)}

/* ---------- 採点中 ---------- */
.loading{display:flex;gap:14px;align-items:center}
.spin{flex:0 0 34px;height:34px;border-radius:50%;border:3px solid var(--line);
  border-top-color:var(--ai);animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.ldstep{font-size:12.5px;color:var(--sub);transition:opacity .25s;margin-top:2px}

/* ================= 結果 ================= */
.sheethead{font-family:"Noto Serif JP",serif;text-align:center;margin:34px 0 0;font-size:19px;
  font-weight:900;letter-spacing:.3em;text-indent:.3em}
.sheethead::after{content:"";display:block;width:70px;margin:8px auto 0;border-bottom:3px double var(--red)}
.scorebox{display:flex;gap:22px;align-items:center;justify-content:center;flex-wrap:wrap;padding:6px 0 2px}
.scorenum{font-family:"Noto Serif JP",serif;text-align:center}
.scorenum .num{font-size:62px;font-weight:900;color:var(--red);line-height:1.05;letter-spacing:.02em}
.scorenum .den{font-size:16px;color:var(--ink);font-weight:700}
.scorenum .rule{border-top:2px solid var(--ink);margin-top:2px;padding-top:3px;font-size:11px;color:var(--sub);letter-spacing:.15em}
.hanko{flex:0 0 auto;width:84px;height:84px;border:3px double var(--red);border-radius:50%;
  display:grid;place-items:center;color:var(--red);font-family:"Noto Serif JP",serif;font-weight:900;
  font-size:17px;letter-spacing:.06em;transform:rotate(-7deg);line-height:1.25;text-align:center;opacity:.92}
.hanko.mid{border-color:var(--gold);color:var(--gold)}
.hanko.ng{border-color:var(--navy);color:var(--navy)}
.csebox{text-align:center;font-size:12.5px;color:var(--ink);margin-top:4px}
.csebox b{font-family:"Noto Serif JP",serif;font-size:20px;color:var(--ai)}
.csebox .pl{color:var(--sub);font-size:11.5px}
.banddesc{font-size:12.5px;color:var(--ink);margin-top:10px}
.lvname{text-align:center;font-size:12px;color:var(--sub);letter-spacing:.1em;margin-bottom:6px}
.cbar{display:grid;grid-template-columns:6.2em 1fr 3.6em;gap:10px;align-items:center;font-size:13px;margin-top:10px}
.cbar .nm{font-weight:700;letter-spacing:.06em;font-size:12.5px}
.cbar .tr{height:8px;background:#efece2;border:1px solid var(--line);overflow:hidden}
.cbar .tr i{display:block;height:100%;width:0;background:var(--navy);transition:width 1.1s ease}
.cbar .tr i.low{background:var(--red)}
.cbar .tr i.mid{background:var(--gold)}
.cbar .sc{font-weight:700;text-align:right;color:var(--ink);font-family:"Noto Serif JP",serif}
h4.sec{font-family:"Noto Serif JP",serif;font-size:15px;font-weight:700;letter-spacing:.08em;
  margin:2px 0 12px;padding-left:10px;border-left:4px solid var(--red)}
.callout{background:var(--navy-soft);border-left:3px solid var(--navy);padding:10px 14px;font-size:13px;margin:8px 0}
.callout.warn{background:var(--gold-soft);border-left-color:var(--gold)}
p.lead{font-size:13.5px}
ul.list{list-style:none;display:grid;gap:7px;font-size:13px}
ul.list li{position:relative;padding-left:24px}
ul.list li::before{position:absolute;left:0;top:0;font-weight:900}
ul.good li::before{content:"◎";color:var(--red)}
ul.bad li::before{content:"△";color:var(--navy)}
ul.arrow li::before{content:"一、";color:var(--sub);font-weight:400;font-family:"Noto Serif JP",serif}
ul.arrow li:nth-child(2)::before{content:"二、"}
ul.arrow li:nth-child(3)::before{content:"三、"}
ul.arrow li:nth-child(4)::before{content:"四、"}

details.box{border:1px solid var(--line);margin-top:9px;background:var(--card)}
details.box summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:9px;
  padding:11px 14px;font-size:13.5px;font-weight:700}
details.box summary::-webkit-details-marker{display:none}
details.box summary .sc{margin-left:auto;color:var(--red);font-weight:700;font-family:"Noto Serif JP",serif}
details.box summary .lvj{font-size:10.5px;background:var(--red-soft);color:var(--red);padding:1px 9px;font-weight:700}
details.box summary .caret{color:var(--sub);font-size:10px;transition:.2s}
details.box summary .sc + .caret{margin-left:8px}
details.box[open] summary .caret{transform:rotate(180deg)}
details.box .inner{padding:2px 15px 14px;font-size:13px;border-top:1px dashed var(--line)}

.saidbox{border:1px solid var(--line2);background:#fff;padding:10px 13px;margin:10px 0;font-size:12.5px;line-height:1.85}
.saidbox .lbl{font-size:10.5px;font-weight:700;letter-spacing:.18em;color:var(--sub);
  font-family:"Noto Serif JP",serif;margin-bottom:4px}
.saidbox .en{font-style:italic;color:var(--ink)}
.judgeline{background:var(--ai-soft);border-left:3px solid var(--ai);padding:9px 13px;font-size:12.5px;margin:8px 0}

.fix{border:1px solid var(--line);border-left:3px solid var(--red);padding:11px 14px;margin-bottom:9px;
  font-size:13px;background:var(--card)}
.fix .meta{display:flex;gap:6px;margin-bottom:5px;flex-wrap:wrap}
.sev{font-size:10.5px;font-weight:700;padding:1px 10px;border:1px solid}
.sev.s3{border-color:var(--red);color:var(--red)}
.sev.s2{border-color:var(--gold);color:var(--gold)}
.sev.s1{border-color:var(--line2);color:var(--sub)}
.fix .orig{color:var(--ink);text-decoration:line-through;text-decoration-color:var(--red);text-decoration-thickness:2px}
.fix .fixed{color:var(--red);font-weight:700}
.fix .why{color:var(--sub);font-size:12px;margin-top:5px;border-top:1px dashed var(--line);padding-top:5px}

.enbox{border:1px solid var(--line2);padding:14px 16px;margin:8px 0;background:#fff}
.enbox .lbl{font-size:11px;font-weight:700;letter-spacing:.2em;margin-bottom:6px;color:var(--navy);
  font-family:"Noto Serif JP",serif}
.enbox.model .lbl{color:var(--red)}
.enbox .en{font-size:14px;line-height:1.95}
.enbox .ja{font-size:12px;color:var(--sub);margin-top:8px;border-top:1px dashed var(--line);padding-top:8px}
.enbox .pt{font-size:12px;color:var(--red);margin-top:6px}

.vup{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12.5px;padding:8px 0;border-bottom:1px dashed var(--line)}
.vup:last-child{border-bottom:none}
.pill{background:#fff;border:1px solid var(--line2);padding:1px 11px}
.pill.up{border-color:var(--red);color:var(--red);font-weight:700}
.vup .arw{color:var(--sub)}
.vup .why{flex-basis:100%;color:var(--sub);font-size:11.5px}
.tpl{border-bottom:1px dashed var(--line);padding:9px 2px;font-size:13px}
.tpl:last-of-type{border-bottom:none}
.tpl .en{font-weight:700;color:var(--navy)}
.tpl .jp{color:var(--sub);font-size:12px}
.tpl .when{font-size:11px;color:var(--red);margin-top:1px}
.pw{display:flex;gap:9px;align-items:baseline;font-size:12.5px;padding:7px 0;border-bottom:1px dashed var(--line)}
.pw:last-child{border-bottom:none}
.pw .w{font-weight:700;font-style:italic}
.pw .s{font-family:"Noto Serif JP",serif;font-weight:900;color:var(--red);font-size:13px}
.pw .h{color:var(--sub);flex:1 1 100%;font-size:11.5px}
.hcard{border-left:4px solid var(--red)}
.hcard .hb{font-family:"Noto Serif JP",serif;font-size:12.5px;font-weight:700;color:var(--red);
  letter-spacing:.1em;margin-bottom:6px}
.hcard p{font-size:14px}
.err{border-left:4px solid var(--red)!important}
.err .et{color:var(--red);font-weight:700;margin-bottom:4px}
.err p{font-size:12.5px;color:var(--sub);white-space:pre-wrap}
.share{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.shbtn{border:1px solid var(--line2);background:var(--card);color:var(--ink);
  font-family:inherit;font-size:12.5px;font-weight:700;padding:8px 16px;cursor:pointer}
.shbtn:active{background:#efece2}
audio.rp{width:100%;margin-top:8px;height:34px}

/* ================= 予想問題集 ================= */
.qitem{border:1px solid var(--line);background:var(--card);margin-top:9px}
.qitem > summary{list-style:none;cursor:pointer;display:flex;gap:10px;align-items:flex-start;padding:12px 14px}
.qitem > summary::-webkit-details-marker{display:none}
.qitem > summary .tag{flex:0 0 auto;font-size:10.5px;font-weight:700;padding:1px 8px;border:1px solid var(--ai);
  color:var(--ai);background:var(--ai-soft);font-family:"Noto Serif JP",serif}
.qitem > summary .qt{flex:1;font-size:13.5px;line-height:1.7}
.qitem > summary .gn{flex:0 0 auto;font-size:10.5px;color:var(--sub)}
.qitem[open] > summary{border-bottom:1px dashed var(--line);background:var(--ai-soft)}
.qbody{padding:12px 15px 15px}
.qbody .qja{font-size:12.5px;color:var(--sub);margin-bottom:10px}
.qbody h6{font-family:"Noto Serif JP",serif;font-size:12px;font-weight:700;letter-spacing:.12em;
  color:var(--red);margin:14px 0 6px;padding-left:8px;border-left:3px solid var(--red)}
.qbody h6:first-child{margin-top:0}
.qbody .ans{font-size:13.5px;line-height:1.95;background:#fff;border:1px solid var(--line2);padding:11px 13px}
.qbody .ansja{font-size:12px;color:var(--sub);margin-top:7px;border-top:1px dashed var(--line);padding-top:7px;line-height:1.8}
.qbody .adv{font-size:12.5px;background:var(--gold-soft);border-left:3px solid var(--gold);padding:9px 12px;line-height:1.8}
.qbody .ph{display:grid;gap:5px;margin-top:6px}
.qbody .ph span{font-size:12px;background:#fff;border:1px solid var(--line);padding:5px 10px}
.playbtn{flex:0 0 auto;border:1px solid var(--ai);background:#fff;color:var(--ai);cursor:pointer;
  font-family:inherit;font-size:12px;font-weight:700;padding:4px 11px;border-radius:3px;line-height:1.6}
.playbtn:active{background:var(--ai-soft)}
.playbtn:disabled{opacity:.5;cursor:default}
.playrow{display:flex;gap:8px;align-items:center;margin-top:7px}
.playrow .lb{font-size:11px;color:var(--sub)}
.stanceline{font-size:12.5px;background:var(--ai-soft);border-left:3px solid var(--ai);padding:8px 12px;margin-bottom:10px}
.stanceline b{color:var(--ai)}
.outline{display:grid;gap:0}
.outline .ol{display:flex;gap:10px;padding:8px 0;border-bottom:1px dashed var(--line);font-size:13px;line-height:1.85}
.outline .ol:last-child{border-bottom:none}
.outline .ol .k{flex:0 0 5.4em;font-size:10.5px;font-weight:700;color:var(--ai);font-family:"Noto Serif JP",serif;padding-top:3px}

/* ================= 極秘メモ ================= */
.memohead{border:2px solid var(--red);background:#fff;padding:16px 18px;margin-top:16px;position:relative;overflow:hidden}
.memohead::after{content:"㊙";position:absolute;right:-12px;bottom:-24px;font-size:110px;
  color:var(--red);opacity:.07;font-family:"Noto Serif JP",serif;font-weight:900;line-height:1}
.memohead .mk{display:inline-block;border:2px solid var(--red);color:var(--red);font-family:"Noto Serif JP",serif;
  font-weight:900;font-size:11px;letter-spacing:.25em;padding:2px 11px;transform:rotate(-2deg);margin-bottom:8px}
.memohead h3{font-family:"Noto Serif JP",serif;font-size:18px;font-weight:900;letter-spacing:.06em}
.memohead p{font-size:12.5px;color:var(--sub);margin-top:5px}
.memo{border:1px solid var(--line);background:var(--card);margin-top:12px}
.memo > summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:11px;padding:14px 16px}
.memo > summary::-webkit-details-marker{display:none}
.memo > summary .g{flex:0 0 auto;border:2px solid var(--ai);color:var(--ai);font-family:"Noto Serif JP",serif;
  font-weight:900;font-size:12px;padding:3px 10px;background:#fff}
.memo > summary .ttl{font-family:"Noto Serif JP",serif;font-weight:700;font-size:14.5px;letter-spacing:.05em}
.memo > summary .ttl small{display:block;font-family:inherit;font-weight:400;font-size:11px;color:var(--sub);letter-spacing:0}
.memo > summary .caret{margin-left:auto;color:var(--sub);font-size:11px;transition:.2s}
.memo[open] > summary .caret{transform:rotate(180deg)}
.memo[open] > summary{border-bottom:1px dashed var(--line)}
.memobody{padding:6px 17px 18px}
.memobody h5{font-family:"Noto Serif JP",serif;font-size:13.5px;font-weight:700;letter-spacing:.06em;
  margin:16px 0 8px;padding-left:9px;border-left:4px solid var(--red)}
.memobody h5:first-child{margin-top:8px}
.memobody p{font-size:13px;margin-bottom:8px}
.memobody ul{list-style:none;display:grid;gap:6px;font-size:12.5px;margin-bottom:8px}
.memobody ul li{position:relative;padding-left:20px}
.memobody ul li::before{content:"●";position:absolute;left:0;top:0;font-size:8px;color:var(--ai);top:1px}
.memobody .kim{background:var(--red-soft);border-left:3px solid var(--red);padding:10px 13px;font-size:12.5px;margin:10px 0}
.memobody .kim b{color:var(--red)}
.memobody .tmpl{border:1px solid var(--line2);background:#fff;padding:11px 14px;margin:8px 0}
.memobody .tmpl .en{font-size:13px;font-weight:700;color:var(--navy);line-height:1.85}
.memobody .tmpl .ja{font-size:11.5px;color:var(--sub);margin-top:4px}
.memobody table{width:100%;border-collapse:collapse;font-size:12px;margin:8px 0}
.memobody th,.memobody td{border:1px solid var(--line);padding:6px 9px;text-align:left}
.memobody th{background:var(--ai-soft);color:var(--ai);font-weight:700;white-space:nowrap}
.memobody td b{color:var(--red)}

/* ================= 質問室 ================= */
.presets{display:flex;gap:7px;flex-wrap:wrap;margin-top:10px}
.preset{border:1px solid var(--line2);background:#fff;color:var(--ai);
  font-family:inherit;font-size:12px;font-weight:500;padding:7px 13px;cursor:pointer}
.preset:active{background:var(--ai-soft)}
#chatlog{display:grid;gap:10px;margin:14px 0}
.msg{max-width:90%}
.msg .body{padding:11px 15px;font-size:13.5px;line-height:1.85;border:1px solid var(--line);white-space:pre-wrap}
.msg.user{justify-self:end}
.msg.user .body{background:var(--ai);color:#fff;border-color:var(--ai)}
.msg.ai .body{background:var(--card)}
.msg.ai .who{display:block;font-family:"Noto Serif JP",serif;font-size:11px;font-weight:700;color:var(--red);margin-bottom:3px;letter-spacing:.08em}
.msg .body code{background:#efece2;padding:1px 6px;font-size:12.5px}
.typing{display:inline-flex;gap:4px;padding:5px 0}
.typing i{width:6px;height:6px;border-radius:50%;background:var(--sub);animation:tp 1.2s ease infinite;font-style:normal}
.typing i:nth-child(2){animation-delay:.18s}.typing i:nth-child(3){animation-delay:.36s}
@keyframes tp{0%,60%,100%{transform:translateY(0);opacity:.4}30%{transform:translateY(-5px);opacity:1}}
.chatbar{position:sticky;bottom:12px;display:flex;gap:8px;align-items:flex-end;padding:8px;
  background:var(--card);border:1.5px solid var(--ink);box-shadow:0 3px 10px rgba(60,50,30,.15)}
.chatbar textarea{flex:1;border:none;background:transparent;color:var(--ink);font-family:inherit;
  font-size:14px;resize:none;max-height:120px;line-height:1.7;padding:8px 6px}
.chatbar textarea:focus{outline:none}
.sendbtn{flex:0 0 60px;height:42px;border:none;cursor:pointer;font-family:"Noto Serif JP",serif;
  font-size:14px;font-weight:700;background:var(--ai);color:#fff;letter-spacing:.15em}
.sendbtn:disabled{opacity:.5}

/* ================= 奥付 ================= */
.sisters{margin-top:40px;border-top:3px double var(--line2);padding-top:18px}
.sisters h3{font-family:"Noto Serif JP",serif;font-size:14.5px;font-weight:700;letter-spacing:.08em;margin-bottom:2px}
.sisters .note{font-size:12px;color:var(--sub);margin-bottom:12px}
.sis{display:flex;gap:12px;align-items:baseline;border-bottom:1px dashed var(--line);
  padding:11px 4px;text-decoration:none;color:var(--ink)}
.sis b{font-size:13.5px;border-bottom:1px solid var(--navy);color:var(--navy)}
.sis span.d{font-size:11.5px;color:var(--sub)}
.sis .go{margin-left:auto;color:var(--sub);font-size:12px}
footer{text-align:center;margin-top:32px;color:var(--sub);font-size:11.5px}
.foottop{cursor:pointer;text-decoration:underline;text-decoration-style:dotted;text-underline-offset:4px}
.foottop:active{color:var(--ai)}
footer a.hq{display:inline-block;margin-top:14px;background:var(--navy);color:#fff;
  font-family:"Noto Serif JP",serif;font-weight:900;font-size:18px;letter-spacing:.08em;
  padding:14px 36px;text-decoration:none;box-shadow:0 2px 0 #1b2c3d}
footer a.hq:active{transform:translateY(2px);box-shadow:none}
.hqsub{font-size:11.5px;color:var(--sub);margin-top:8px}

#totop{position:fixed;right:18px;bottom:24px;width:52px;height:52px;border-radius:50%;
  border:2.5px solid var(--ai);background:var(--card);color:var(--ai);
  font-family:"Noto Serif JP",serif;font-size:21px;font-weight:900;cursor:pointer;
  display:none;z-index:60;box-shadow:0 4px 14px rgba(60,50,30,.28);line-height:1;padding:0}
#totop.show{display:block}
#totop:active{transform:scale(.94)}
@media (max-width:720px){ #totop{bottom:88px;right:12px} }

#toast{display:none;position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:300;
  background:var(--ink);color:#fff;padding:11px 20px;font-size:13px;max-width:90vw;text-align:center}
.panel{display:none}
.panel.on{display:block}
@media (max-width:480px){
  .wrap{padding:18px 13px 70px}
  .card{padding:17px 14px}
  .seg.c4{grid-template-columns:repeat(2,1fr)}
  .koma.c3{grid-template-columns:1fr}
  .koma.c4{grid-template-columns:1fr}
  .stagewrap{padding:14px 13px 34px}
  .bigtimer .tnum{font-size:48px}
  .cbar{grid-template-columns:5.4em 1fr 3.2em;gap:8px}
}

/* ================= 注記 ================= */
.stance{margin-top:22px;border:1px solid var(--line);background:var(--card)}
.stance > summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;padding:13px 15px;font-size:13.5px;font-weight:700}
.stance > summary::-webkit-details-marker{display:none}
.stance > summary .mk{flex:0 0 auto;border:1.5px solid var(--sub);color:var(--sub);background:#fff;
  font-family:"Noto Serif JP",serif;font-size:11px;font-weight:900;padding:2px 9px}
.stance > summary .caret{margin-left:auto;color:var(--sub);font-size:11px;transition:.2s}
.stance[open] > summary{border-bottom:1px dashed var(--line)}
.stance[open] > summary .caret{transform:rotate(180deg)}
.stancebody{padding:6px 17px 16px;font-size:12.5px;line-height:1.9}
.stancebody h6{font-family:"Noto Serif JP",serif;font-size:12.5px;font-weight:700;margin:14px 0 5px;
  padding-left:9px;border-left:4px solid var(--sub)}
.stancebody h6:first-child{margin-top:6px}
.stancebody p{margin-bottom:8px}
.stancebody .hi{background:var(--ai-soft);border-left:3px solid var(--ai);padding:10px 13px;margin:10px 0;font-size:12.5px}