/* ================================================================
   えいぶんカルテくん ── 「診療カルテと紫紺の印」スタイル
   はつおんカルテくん／むげん問題くん の姉妹デザイン。
   主色は紫紺（診断）、採点の朱、警告の金茶をそのまま引き継ぐ。
   ================================================================ */
:root{
  --paper:#f6f3ec;
  --card:#fffdf8;
  --ink:#2b2a26;
  --sub:#847e70;
  --line:#d9d3c2;
  --line2:#b9b2a0;
  --ai:#4b3f72;          /* 紫紺（このアプリの主色） */
  --ai-soft:#eeebf5;
  --ai-dark:#332a52;
  --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)}

/* ---------- 立場の説明 ---------- */
.stance{margin-top:16px;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(--ai);color:var(--ai);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:13px;line-height:1.9}
.stancebody h6{font-family:"Noto Serif JP",serif;font-size:13px;font-weight:700;margin:14px 0 5px;
  padding-left:9px;border-left:4px solid var(--ai)}
.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}
.stance.disc{margin-top:22px}
.stance.disc > summary .mk{border-color:var(--sub);color:var(--sub)}
.stance.disc .stancebody{font-size:12.5px}
.stance.disc .stancebody h6{border-left-color:var(--sub);font-size:12.5px}

/* ---------- タブ ---------- */
.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)}
.tabs button small{display:block;font-family:"Noto Sans JP",sans-serif;font-weight:400;
  font-size:9.5px;letter-spacing:0;color:var(--sub);margin-top:1px}
.tabs button.on small{color:var(--ai)}
.panel{display:none}
.panel.on{display:block}

/* ---------- 用紙 ---------- */
.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}
.gonote{font-size:11.5px;color:var(--sub);text-align:center;margin-top:9px}
.quota{display:block;margin-top:4px;font-size:11.5px;color:var(--ai);font-weight:700}
.quota.out{color:var(--red)}
.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}
.mbtn:disabled{opacity:.5;cursor:not-allowed}
.mrow{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}

/* ---------- 入れ方の切り替え ---------- */
.inways{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.inways button{font-family:inherit;cursor:pointer;padding:10px 5px;border:1px solid var(--line2);
  background:var(--card);text-align:center;color:var(--ink)}
.inways button .ic{display:block;font-family:"Noto Serif JP",serif;font-weight:900;font-size:16px;color:var(--ai);line-height:1.2}
.inways button .nm{display:block;font-size:12px;font-weight:700;margin-top:3px}
.inways button.on{border:2px solid var(--ai);background:var(--ai-soft);padding:9px 4px}
.way{display:none;margin-top:12px}
.way.on{display:block}

textarea.own{width:100%;min-height:150px;border:1px solid var(--line2);background:#fff;color:var(--ink);
  font-family:inherit;font-size:14.5px;padding:12px 14px;resize:vertical;line-height:1.9}
textarea.own:focus{outline:none;border-color:var(--ai)}

/* ---------- 写真 ---------- */
.drop{display:grid;place-items:center;gap:5px;text-align:center;cursor:pointer;
  border:2px dashed var(--ai);background:var(--ai-soft);padding:26px 16px;transition:.12s}
.drop.over{background:#e2ddf0;border-style:solid}
.drop .ic{font-size:32px;line-height:1}
.drop b{font-family:"Noto Serif JP",serif;font-size:15px;color:var(--ai);letter-spacing:.06em}
.drop small{font-size:11.5px;color:var(--sub);line-height:1.7;max-width:30em}
.shotgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:12px}
.thumb{position:relative;margin:0;border:1px solid var(--line2);background:#fff;padding:4px;aspect-ratio:3/4;overflow:hidden}
.thumb img{width:100%;height:100%;object-fit:cover;display:block}
.thumb .no{position:absolute;left:4px;top:4px;background:var(--ai);color:#fff;font-family:"Noto Serif JP",serif;
  font-size:11px;font-weight:900;width:20px;height:20px;display:grid;place-items:center}
.thumb .del{position:absolute;right:4px;top:4px;width:22px;height:22px;border:none;cursor:pointer;
  background:rgba(43,42,38,.82);color:#fff;font-size:12px;line-height:1;padding:0}
.thumb .del:active{background:var(--red)}
.addmore{border:2px dashed var(--line2);background:var(--paper);color:var(--sub);cursor:pointer;
  font-family:"Noto Serif JP",serif;font-size:22px;font-weight:900;aspect-ratio:3/4;display:grid;
  place-items:center;line-height:1.1}
.addmore small{display:block;font-family:"Noto Sans JP",sans-serif;font-size:9.5px;font-weight:400}
.addmore:hover{border-color:var(--ai);color:var(--ai)}
@media (max-width:480px){ .shotgrid{grid-template-columns:repeat(3,1fr)} }

/* ---------- その場の見立て ---------- */
.meter{border:1px solid var(--line2);background:#fff;margin-top:12px}
.mrow2{display:grid;grid-template-columns:repeat(4,1fr)}
.mcell{text-align:center;padding:9px 2px;border-right:1px dashed var(--line)}
.mcell:last-child{border-right:none}
.mcell .k{display:block;font-size:10.5px;color:var(--sub);letter-spacing:.04em}
.mcell b{font-family:"Noto Serif JP",serif;font-size:21px;font-weight:900;color:var(--ai);line-height:1.2}
.mcell i{font-style:normal;font-size:11px;color:var(--sub);margin-left:2px}
.mband{border-top:1px solid var(--line);background:var(--paper);padding:8px 13px;font-size:12px;display:flex;gap:9px;align-items:baseline;flex-wrap:wrap}
.mband .k{color:var(--sub);font-size:11px;letter-spacing:.08em}
.mband b{font-family:"Noto Serif JP",serif;font-size:14px;color:var(--ink)}
.mband .pl{color:var(--sub);font-size:11px;flex-basis:100%;line-height:1.7}

/* ---------- サンプル一覧 ---------- */
.sents{display:grid;gap:9px}
.sent{border:2px solid var(--line2);background:#fff;padding:13px 14px;cursor:pointer;
  font-family:inherit;text-align:left;color:var(--ink);width:100%;
  display:flex;align-items:center;gap:13px;transition:.13s;box-shadow:0 2px 0 var(--line)}
.sent .body{flex:1;min-width:0}
.sent .ttl{font-family:"Noto Serif JP",serif;font-size:14px;font-weight:700}
.sent .en{font-size:12.5px;color:var(--sub);margin-top:3px;line-height:1.7}
.sent .lv{display:inline-block;font-size:10px;font-weight:700;border:1px solid var(--line2);
  color:var(--sub);padding:0 7px;margin-right:7px;vertical-align:1px}
.sent .go{flex:0 0 auto;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;
  border:2px solid var(--ai);background:var(--ai-soft);color:var(--ai);
  font-family:"Noto Serif JP",serif;font-size:16px;font-weight:900;line-height:1}
.sent:hover{border-color:var(--ai);background:#fbfaff}
.sent:hover .go{background:var(--ai);color:#fff}
.sent:active{transform:translateY(2px);box-shadow:none}

/* ---------- 作成中 ---------- */
.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}
.ldttl{font-family:"Noto Serif JP",serif;font-weight:700;font-size:14.5px}

/* ================= カルテ ================= */

/* 見立ての1行と道具 */
.kmeta{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-top:26px;font-size:12px;color:var(--sub)}
.kmeta .dot{opacity:.5}
.kband{font-family:"Noto Serif JP",serif;font-weight:900;font-size:12px;width:22px;height:22px;
  display:grid;place-items:center;border:1.5px solid;border-radius:3px}
.kband.b1{border-color:var(--green);color:var(--green)}
.kband.b2{border-color:var(--gold);color:var(--gold)}
.kband.b3{border-color:var(--red);color:var(--red)}
.ktools{margin-left:auto;display:flex;gap:6px}
.tbtn{border:1px solid var(--line2);background:var(--card);color:var(--sub);font-family:inherit;
  font-size:11.5px;font-weight:700;padding:3px 11px;cursor:pointer}
.tbtn:active{background:#efece2}

/* この英文のキモ */
.hero{border:2px solid var(--ink);background:#fff;padding:20px 20px 18px;margin-top:8px}
.hero .hl{font-family:"Noto Serif JP",serif;font-size:clamp(19px,5vw,25px);font-weight:900;
  line-height:1.5;letter-spacing:.02em}
.hero .gist{font-size:13.5px;line-height:1.95;color:var(--ink);margin-top:11px;
  border-top:1px dashed var(--line);padding-top:11px}
.hsay{display:flex;gap:9px;align-items:center;margin-top:13px;background:var(--red-soft);
  border-left:3px solid var(--red);padding:9px 12px;font-family:"Noto Serif JP",serif;
  font-size:13.5px;font-weight:700;color:var(--red);line-height:1.7}
.hsay .face{flex:0 0 28px;height:28px;border-radius:50%;border:1.5px solid var(--red);background:#fff;
  display:grid;place-items:center;font-size:12px}

/* カルテのタブ */
.ktabs{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:16px}
.ktabs button{font-family:"Noto Serif JP",serif;font-size:13.5px;font-weight:700;letter-spacing:.06em;
  padding:11px 4px;cursor:pointer;border:1px solid var(--line2);background:#eceadf;color:var(--sub)}
.ktabs button.on{background:var(--ai);border-color:var(--ai);color:#fff}
.kpanel{display:none}
.kpanel.on{display:block;margin-top:14px}

/* 読む：地図 */
.map{border:1px solid var(--line2);background:var(--card);padding:12px 14px}
.maph{font-size:11.5px;color:var(--ai);font-weight:700;margin-bottom:8px;letter-spacing:.03em}
.mline{display:flex;gap:10px;align-items:baseline;width:100%;text-align:left;cursor:pointer;
  background:none;border:none;border-bottom:1px dashed var(--line);padding:8px 2px;font-family:inherit;color:var(--ink)}
.mline:last-child{border-bottom:none}
.mline:hover{background:#fbfaff}
.mline .mn{flex:0 0 20px;height:20px;border-radius:50%;background:var(--ai);color:#fff;
  font-family:"Noto Serif JP",serif;font-size:11px;font-weight:900;display:grid;place-items:center}
.mline .mo{flex:1;font-family:"Noto Serif JP",serif;font-size:14.5px;font-weight:700;line-height:1.55}
.mline .mr{flex:0 0 auto;font-size:10px;color:var(--sub);border:1px solid var(--line2);padding:0 7px}

.readhint{font-size:11.5px;color:var(--sub);margin:12px 0 10px;line-height:1.8}
.dotmk{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--red);margin:0 3px;vertical-align:1px}

/* 読む：本文 */
.passage{display:grid;gap:12px}
.para{border:1px solid var(--line);background:#fff;padding:0 0 2px}
.para .phead{display:flex;gap:9px;align-items:baseline;padding:11px 14px 9px;background:var(--ai-soft);
  border-bottom:1px solid var(--line)}
.para .pn{flex:0 0 auto;font-family:"Noto Serif JP",serif;font-weight:900;color:var(--ai);font-size:13px}
.para .po{flex:1;font-family:"Noto Serif JP",serif;font-size:15px;font-weight:700;line-height:1.55}
.para .pr{flex:0 0 auto;font-size:10px;color:var(--ai);border:1px solid var(--ai);padding:0 7px;white-space:nowrap}
.para .pdet{font-size:12px;color:var(--sub);line-height:1.85;padding:9px 14px 0}
.para .ptext{font-size:15px;line-height:2.15;padding:10px 14px 12px}
.para .pask{font-size:12.5px;background:var(--green-soft);border-left:3px solid var(--green);
  padding:8px 11px;margin:0 14px 12px;line-height:1.8}
.para .pask::before{content:"発問例：";font-weight:700;color:var(--green)}

span.s{cursor:pointer;border-bottom:1px solid transparent;transition:.1s;padding:1px 0}
span.s:hover{background:var(--ai-soft);border-bottom-color:var(--ai)}
span.s.hard{background:#fdf3f1}
span.s.hard::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;
  background:var(--red);margin-right:4px;vertical-align:1px}
span.s.open{background:var(--ai);color:#fff;border-bottom-color:var(--ai)}
span.s.open::before{background:#fff}

/* 読む：1文の解説 */
.sdet{margin:0 14px 14px;border:1.5px solid var(--ai);background:var(--card);padding:12px 14px}
.sdet .sja{font-size:14.5px;line-height:1.95;font-weight:500}
.sdet .sja.none{color:var(--sub);font-size:12.5px;font-weight:400}
.sdet .sslash{font-size:13.5px;line-height:2.05;margin-top:10px;background:#fff;border:1px solid var(--line);padding:9px 11px}
.sdet .sslash b{color:var(--ai);font-weight:900;padding:0 2px}
.sdet .sframe{font-family:"Noto Serif JP",serif;font-size:12.5px;color:var(--navy);
  background:var(--navy-soft);border-left:3px solid var(--navy);padding:8px 11px;margin-top:8px;line-height:1.8}
.sdet .strap{font-size:12.5px;line-height:1.9;background:var(--red-soft);border-left:3px solid var(--red);
  padding:9px 11px;margin-top:8px}
.sdet .strap::before{content:"転ぶのはここ　";font-weight:700;color:var(--red);font-size:11.5px}
.sdet .show{font-size:12.5px;line-height:1.9;background:var(--gold-soft);border-left:3px solid var(--gold);
  padding:9px 11px;margin-top:8px}
.sdet .svoc{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;border-top:1px dashed var(--line);padding-top:9px}
.sdet .svoc span{font-size:11.5px;border:1px solid var(--line2);background:#fff;padding:2px 9px}
.sdet .svoc b{font-style:italic;color:var(--ai)}

details.more{border:1px solid var(--line);background:var(--card);margin-top:12px}
details.more > summary{list-style:none;cursor:pointer;padding:11px 14px;font-size:13px;font-weight:700;
  display:flex;align-items:center}
details.more > summary::-webkit-details-marker{display:none}
details.more .caret{margin-left:auto;color:var(--sub);font-size:10px;transition:.2s}
details.more[open] .caret{transform:rotate(180deg)}
.mbody{padding:2px 14px 12px;border-top:1px dashed var(--line)}
.mbody .bg{padding:9px 0;border-bottom:1px dashed var(--line)}
.mbody .bg:last-child{border-bottom:none}
.mbody .bg b{font-family:"Noto Serif JP",serif;font-size:13.5px;color:var(--navy)}
.mbody .bg p{font-size:12.5px;line-height:1.9;margin-top:3px}

/* 共通の小見出し */
h4.sec2{font-family:"Noto Serif JP",serif;font-size:14.5px;font-weight:700;letter-spacing:.06em;
  margin:22px 0 11px;padding-left:9px;border-left:4px solid var(--red)}
h4.sec2:first-child{margin-top:0}
.grp{display:grid;gap:9px}
.note{font-size:11px;color:var(--sub);margin-top:9px;line-height:1.7}
.none{font-size:12.5px;color:var(--sub);padding:14px;border:1px dashed var(--line2);background:var(--card)}

/* 狙われる */
.trap{border:1px solid var(--line);border-left:4px solid var(--gold);background:#fff;padding:11px 14px}
.trap .tt{font-family:"Noto Serif JP",serif;font-weight:700;font-size:13.5px;color:var(--gold);
  display:flex;gap:9px;align-items:baseline}
.trap .ty{font-size:10px;border:1px solid var(--gold);color:var(--gold);padding:0 7px;
  font-family:"Noto Sans JP",sans-serif;font-weight:700;white-space:nowrap}
.trap p{font-size:12.5px;line-height:1.9;margin-top:5px}

.quiz{border:1px solid var(--line2);background:#fff;padding:13px 14px;margin-bottom:10px}
.quiz .qh{display:flex;align-items:baseline;gap:9px}
.quiz .qn{font-family:"Noto Serif JP",serif;font-weight:900;font-size:13px;color:var(--ai)}
.quiz .qsk{font-size:10px;border:1px solid var(--line2);color:var(--sub);padding:0 7px;margin-left:auto}
.quiz .qq{font-size:14px;font-weight:700;line-height:1.8;margin-top:5px}
.qopts{display:grid;gap:8px;margin-top:11px}
.qopt{border:2px solid var(--line2);background:var(--card);color:var(--ink);font-family:inherit;
  font-size:13.5px;font-weight:500;padding:10px 13px;cursor:pointer;transition:.12s;text-align:left;line-height:1.7}
.qopt:hover:not(:disabled){border-color:var(--ai);background:var(--ai-soft)}
.qopt:disabled{cursor:default}
.qopt.ok{border-color:var(--ai);background:var(--ai);color:#fff;font-weight:700}
.qopt.ng{border-color:var(--red);background:var(--red-soft);color:var(--red);text-decoration:line-through}
.qres{margin-top:10px}
.qmark{font-family:"Noto Serif JP",serif;font-weight:900;font-size:15px;margin-bottom:4px}
.qmark.hit{color:var(--ai)}
.qmark.miss{color:var(--red)}
.qwhy{font-size:12.5px;line-height:1.9;background:var(--gold-soft);border-left:3px solid var(--gold);padding:9px 12px}
.qscore{font-size:13px;background:var(--ai-soft);border-left:3px solid var(--ai);padding:9px 13px;margin-bottom:12px}
.qscore b{font-family:"Noto Serif JP",serif;font-size:17px;color:var(--ai)}

/* 覚える */
.gram{border:1px solid var(--line);border-left:4px solid var(--red);background:var(--card);padding:11px 14px}
.gram .gn{font-family:"Noto Serif JP",serif;font-weight:700;font-size:13.5px;color:var(--red)}
.gram .gen{font-size:13px;background:#fff;border:1px solid var(--line2);padding:7px 10px;
  line-height:1.85;font-style:italic;margin-top:6px}
.gram .gp{font-size:12.5px;margin-top:6px}
.gram .gp::before{content:"つまり　";color:var(--ai);font-weight:700;font-size:11px}
.gram .gx{font-size:12px;background:var(--ai-soft);border-left:3px solid var(--ai);padding:7px 10px;margin-top:7px;line-height:1.8}
.gram .gx::before{content:"狙われ方　";font-weight:700;color:var(--ai);font-size:11px}

.vfil{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}
.vfil button{border:1px solid var(--line2);background:#fff;color:var(--sub);font-family:inherit;
  font-size:11.5px;font-weight:700;padding:4px 11px;cursor:pointer}
.vfil button.on{border-color:var(--ai);background:var(--ai-soft);color:var(--ai)}
.vw{display:flex;gap:9px;align-items:baseline;flex-wrap:wrap;padding:9px 2px;border-bottom:1px dashed var(--line)}
.vw:last-child{border-bottom:none}
.vw .w{font-size:15px;font-weight:700;font-style:italic;min-width:6.5em}
.vw .pos{font-size:10px;color:var(--sub);border:1px solid var(--line);padding:0 6px}
.vw .lv{font-size:10px;font-weight:700;padding:1px 8px;border:1px solid}
.vw .lv.l1{border-color:var(--line2);color:var(--sub)}
.vw .lv.l2{border-color:var(--navy);color:var(--navy)}
.vw .lv.l3{border-color:var(--gold);color:var(--gold)}
.vw .lv.l4{border-color:var(--red);color:var(--red)}
.vw .ja{font-weight:700;font-size:13.5px}
.vw .nt{flex-basis:100%;font-size:11.5px;color:var(--sub);line-height:1.75}

/* 聞く */
.askhead{display:flex;align-items:center;gap:11px;flex-wrap:wrap}
.askhead .face{flex:0 0 42px;height:42px;border-radius:50%;border:2px solid var(--red);background:#fff;
  display:grid;place-items:center;font-family:"Noto Serif JP",serif;font-weight:900;color:var(--red);font-size:16px}
.askhead .nm{font-family:"Noto Serif JP",serif;font-weight:900;font-size:14.5px}
.askhead .nm small{display:block;font-family:"Noto Sans JP",sans-serif;font-weight:400;font-size:11px;color:var(--sub)}
.askleft{margin-left:auto;font-size:11.5px;font-weight:700;color:var(--ai);border:1px solid var(--ai);padding:2px 10px}
.askleft.out{color:var(--red);border-color:var(--red)}
.presets{display:flex;gap:7px;flex-wrap:wrap;margin:12px 0 4px}
.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:92%}
.msg .body{padding:11px 15px;font-size:13.5px;line-height:1.9;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}
.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{display:flex;gap:8px;align-items:flex-end;padding:8px;background:var(--card);border:1.5px solid var(--ink)}
.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}

.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}

/* 履歴 */
.hist{display:flex;gap:10px;align-items:center;border-bottom:1px dashed var(--line);padding:9px 2px;
  cursor:pointer;font-family:inherit;background:none;border-top:none;border-left:none;border-right:none;
  width:100%;text-align:left;color:var(--ink)}
.hist:active{background:#efece2}
.hist .ht{flex:1;min-width:0;font-size:13px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hist .hd{font-size:11px;color:var(--sub);flex:0 0 auto}

/* 入力欄まわり */
.meterline{margin-top:11px;font-size:12px;color:var(--sub);background:var(--paper);
  border:1px solid var(--line);padding:8px 12px;letter-spacing:.02em}
.meterline b{font-family:"Noto Serif JP",serif;font-size:14px;color:var(--ai);font-weight:900;padding:0 1px}
.modeline{display:flex;align-items:center;gap:10px;margin-top:14px}
.modeline .lb{font-size:11.5px;color:var(--sub);letter-spacing:.08em;flex:0 0 auto}
.modes{display:flex;gap:6px;flex:1}
.modes button{flex:1;font-family:inherit;font-size:12.5px;font-weight:700;padding:7px 4px;cursor:pointer;
  border:1px solid var(--line2);background:var(--card);color:var(--ink)}
.modes button.on{border:1.5px solid var(--ai);background:var(--ai-soft);color:var(--ai)}
.modehint{font-size:11.5px;color:var(--sub);line-height:1.75;margin-top:7px}
.modehint b{color:var(--ai)}

/* 読み方の型：ひとまとめの札 */
.wcard{border:2px solid var(--ai);background:#fff}
.wno{font-family:"Noto Serif JP",serif;font-size:11.5px;font-weight:700;letter-spacing:.18em;color:var(--sub)}
.wh{font-family:"Noto Serif JP",serif;font-size:clamp(17px,4.4vw,21px);font-weight:900;line-height:1.5;margin:4px 0 14px}
.xo{display:grid;gap:7px;margin-top:14px}
.xo .x,.xo .o{display:flex;gap:9px;align-items:flex-start;font-size:13px;line-height:1.85;padding:9px 12px}
.xo .x{background:#f4f1ea;border-left:4px solid var(--line2);color:var(--sub)}
.xo .o{background:var(--ai-soft);border-left:4px solid var(--ai)}
.xo span{flex:0 0 auto;font-family:"Noto Serif JP",serif;font-weight:900;font-size:14px}
.xo .x span{color:var(--sub)}
.xo .o span{color:var(--ai)}
ol.wsteps{list-style:none;counter-reset:w;display:grid;gap:8px;margin-top:16px}
ol.wsteps li{counter-increment:w;position:relative;padding-left:30px;font-size:13.5px;line-height:1.85}
ol.wsteps li::before{content:counter(w);position:absolute;left:0;top:3px;width:20px;height:20px;
  border-radius:50%;background:var(--red);color:#fff;font-family:"Noto Serif JP",serif;
  font-size:11px;font-weight:900;display:grid;place-items:center}
ol.wsteps li b{color:var(--red)}
.wsig{display:flex;flex-wrap:wrap;gap:6px;margin-top:16px;padding-top:14px;border-top:1px dashed var(--line)}
.wsig span{font-size:12px;padding:3px 10px;border:1px solid var(--line2);background:#fff;color:var(--sub)}
.wsig span.hot{border-color:var(--red);color:var(--red);font-weight:700;background:var(--red-soft)}

/* ================= 読み方の型 ================= */
.wazanav{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.wazanav button{font-family:inherit;cursor:pointer;padding:9px 4px 7px;border:1px solid var(--line2);
  background:var(--card);text-align:center;color:var(--ink);transition:.12s}
.wazanav button .ic{display:block;font-family:"Noto Serif JP",serif;font-weight:900;font-size:17px;color:var(--ai);line-height:1.15}
.wazanav button .tt{display:block;font-size:11.5px;font-weight:700;margin-top:2px}
.wazanav button .nn{display:block;font-size:9.5px;color:var(--sub);letter-spacing:.06em;margin-top:1px}
.wazanav button:hover{border-color:var(--ai);background:#fbfaff}
.wazanav button.on{border:2px solid var(--ai);background:var(--ai-soft);padding:8px 3px 6px}
.wazanav button.on .nn{color:var(--ai)}


/* 図解 */
.fig{margin:0;border:1px solid var(--line2);background:#fff;padding:12px 10px 8px;overflow-x:auto}
.figsvg{display:block;width:100%;min-width:520px;height:auto}
.fg-box{fill:#fff;stroke:var(--line2);stroke-width:1.2}
.fg-mute{fill:#eceadf;stroke:var(--line2);stroke-width:1.2}
.fg-ai{fill:var(--ai-soft);stroke:var(--ai);stroke-width:1.4}
.fg-hot{fill:var(--red-soft);stroke:var(--red);stroke-width:1.6}
.fg-hotb{fill:var(--red-soft);stroke:var(--red);stroke-width:2.2}
.fg-mutep{fill:#eceadf;stroke:var(--line2);stroke-width:1.2}
.fg-hotp{fill:var(--red-soft);stroke:var(--red);stroke-width:1.6}
.fg-t{font-family:"Noto Sans JP",sans-serif;font-size:12.5px;fill:var(--ink)}
.fg-ts{font-family:"Noto Sans JP",sans-serif;font-size:10.5px;fill:var(--sub)}
.fg-tb{font-family:"Noto Serif JP",serif;font-size:14px;font-weight:700;fill:var(--ink);letter-spacing:.08em}
.fg-tb2{font-family:"Noto Serif JP",serif;font-size:11.5px;font-weight:700;fill:var(--ai);letter-spacing:.1em}
.fg-th{font-family:"Noto Serif JP",serif;font-size:14px;font-weight:900;fill:var(--red)}
.fg-th2{font-family:"Noto Sans JP",sans-serif;font-size:11px;font-weight:700;fill:var(--red)}
.fg-ar{stroke:var(--red);stroke-width:1.6;fill:none}
.fg-arh{fill:var(--red);stroke:none}

/* ✕ と ◎ */


/* 例文（めくる） */
.wex{border:1px solid var(--line2);background:#fff;padding:14px 15px;margin-bottom:10px}
.wex.open{border-color:var(--ai)}
.wex .en{font-size:14.5px;line-height:2;font-weight:500}
.wex .en b{color:var(--red);font-weight:700}
.wex .ask{font-size:12.5px;color:var(--ai);background:var(--ai-soft);padding:8px 12px;margin-top:10px;
  border-left:3px solid var(--ai);line-height:1.8}
.wex .ask::before{content:"問　";font-weight:700}
.reveal{margin-top:11px;border:1.5px solid var(--ai);background:#fff;color:var(--ai);font-family:"Noto Serif JP",serif;
  font-size:13px;font-weight:700;letter-spacing:.1em;padding:8px 20px;cursor:pointer;transition:.12s}
.reveal:hover{background:var(--ai);color:#fff}
.wex .ans{margin-top:11px;border-top:1px dashed var(--line);padding-top:11px}
.wex .ans .ja{font-size:13.5px;line-height:1.95}
.wex .ans .ja b{color:var(--red)}
.wex .ans .pt{font-size:12.5px;line-height:1.9;background:var(--gold-soft);border-left:3px solid var(--gold);
  padding:9px 12px;margin-top:9px}
.wex .ans .pt::before{content:"▸ ";color:var(--gold);font-weight:700}

.wsig{display:flex;flex-wrap:wrap;gap:7px;margin-top:4px}
.wsig span{font-size:12.5px;padding:4px 11px;border:1px solid var(--line2);background:#fff}
.wsig span.hot{border-color:var(--red);color:var(--red);font-weight:700;background:var(--red-soft)}


/* ---------- 上へ / 通知 ---------- */
#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)}
#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;line-height:1.7}

/* ---------- 奥付 ---------- */
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}

/* ---------- せまい画面 ---------- */
@media (max-width:480px){
  .wrap{padding:18px 13px 70px}
  .card{padding:17px 14px}
  .seg.c4{grid-template-columns:repeat(2,1fr)}
  .wazanav{grid-template-columns:repeat(2,1fr)}
    .mcell b{font-size:18px}
  .ktabs{grid-template-columns:repeat(2,1fr)}
  .para .phead{flex-wrap:wrap}
  .para .pr{order:-1}
  #totop{bottom:88px;right:12px}
}

/* ================= 印刷（プリント配布用） ================= */
@media print{
  @page{size:A4;margin:14mm 12mm}
  body{background:#fff!important;font-size:10.5pt;line-height:1.7}
  .wrap{max-width:none;padding:0}
  header,.foreword,.stance:not(.disc),.tabs,#p-waza,#totop,#toast,#histbox,
  #p-karte > .card,.ktabs,.ktools,.readhint,.map .maph,.presets,.chatbar,
  .askhead,#chatlog,.vfil,.mrow,footer a.hq,  #result{display:block!important}
  .kpanel{display:block!important;margin-top:6mm!important;break-before:auto}
  #k-ask{display:none!important}
  .hero{border:2px solid #333!important;padding:5mm!important}
  .hero .hl{font-size:15pt}
  .kmeta{margin-top:0}
  .map{border:1px solid #999!important;background:#f7f7f7!important}
  .mline{cursor:default}
  .mline .mn{background:#333!important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .para,.trap,.quiz,.gram,.vw,.bg{break-inside:avoid}
  .para{border:1px solid #999!important}
  .para .phead{background:#f0f0f0!important}
  .sdet{display:none!important}
  span.s.hard{background:#f2f2f2!important}
  .qres{display:block!important}
  .qopt{border-color:#999!important;background:#fff!important;color:#000!important;text-decoration:none!important}
  details.more{border:1px solid #999!important}
  details.more .mbody{display:block!important}
  #result::after{
    content:"作成： AIはらだくん（原田英語.com）　　この解説はAIによる推定を含みます。最後はご自身で本文に戻って確認してください。";
    display:block;margin-top:5mm;padding-top:3mm;border-top:1px solid #999;
    font-size:8.5pt;color:#333;text-align:right}
  .stance.disc{display:block!important;border:1px solid #999!important;break-inside:avoid;margin-top:6mm}
  .stance.disc > summary{display:none}
  .stance.disc .stancebody{padding:3mm 4mm;font-size:8pt;line-height:1.6}
}