/* EngPower 練習プリント教材集｜共通スタイル
   画面表示（回答モード）と A4印刷（プリントモード）を1つのHTMLで両立させる。
   配色は /english/ と同じ Slate Blue × Dusty Rose 系。 */

:root{
  --navy:#30465e; --ink:#243447; --paper:#f6f5f3; --white:#fff;
  --rose:#c76473; --rose-dark:#a94f61; --mist:#e8edef; --line:#d9dfe2;
  --soft:#586b7c; --ok:#2f7d5b; --ng:#c0392b; --near:#b8860b;
  --serif:'Shippori Mincho B1',serif; --sans:'Noto Sans JP',sans-serif; --mono:'DM Mono',monospace;
}
*{box-sizing:border-box}
body{margin:0;background:#dfe4e7;color:var(--ink);font-family:var(--sans);line-height:1.9;font-feature-settings:"palt"}
a{color:inherit;text-decoration:none}
button{font-family:inherit}

/* ───────── 画面上部のツールバー（印刷では消える） ───────── */
.bar{position:sticky;top:0;z-index:80;background:var(--navy);color:#fff;padding:10px clamp(14px,3vw,30px);
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;box-shadow:0 2px 14px rgba(36,52,71,.25)}
.bar .brand{font:700 15px var(--mono);letter-spacing:.1em}
.bar .back{font-size:12px;font-weight:600;color:#e9d3d7;border-bottom:1px solid #c76473;padding-bottom:2px}
.bar .sp{margin-left:auto}
.bar .who{font-size:11.5px;color:#c5d3dc}
.btn{display:inline-flex;align-items:center;gap:7px;border:none;cursor:pointer;border-radius:2px;
  background:var(--rose);color:#fff;font-size:13px;font-weight:700;letter-spacing:.03em;padding:10px 18px;transition:.15s}
.btn:hover{background:var(--rose-dark);transform:translateY(-1px)}
.btn.ghost{background:transparent;color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.45)}
.btn.ghost:hover{background:rgba(255,255,255,.12);transform:none}
.btn.small{font-size:12px;padding:7px 13px}
.btn[disabled]{opacity:.45;cursor:default;transform:none}

/* モード切替タブ */
.modes{display:inline-flex;background:rgba(255,255,255,.12);border-radius:2px;padding:3px}
.modes button{background:none;border:none;color:#cfdae2;font-size:12px;font-weight:700;padding:7px 14px;cursor:pointer;border-radius:2px}
.modes button.on{background:#fff;color:var(--navy)}

/* ───────── 用紙 ───────── */
.sheet{width:210mm;margin:20px auto;background:var(--white);
  padding:15mm 15mm 14mm;box-shadow:0 12px 34px rgba(36,52,71,.22);position:relative}
.sheet:last-of-type{margin-bottom:60px}

.head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;
  border-bottom:2.5px solid var(--navy);padding-bottom:7px}
.head .kicker{font:700 9.5pt var(--mono);letter-spacing:.16em;color:var(--rose-dark)}
.head h1{font-family:var(--serif);font-size:19pt;font-weight:600;letter-spacing:.03em;line-height:1.45;margin:2px 0 0}
.head h1 span{display:block;font-family:var(--sans);font-size:9.5pt;font-weight:500;color:var(--soft);letter-spacing:0;margin-top:3px}
.head .meta{font-size:9.5pt;font-weight:600;color:var(--soft);text-align:right;line-height:2;white-space:nowrap}
.head .meta .bl{display:inline-block;border-bottom:1.2px solid #9aa7b2;width:38mm;margin-left:4px}

/* ゴール表示 */
.goal{display:flex;gap:12px;align-items:flex-start;background:var(--mist);border-left:4px solid var(--rose);
  padding:9px 14px;margin:11px 0 0;font-size:10pt;font-weight:600;line-height:1.85}
.goal .g{flex-shrink:0;font:700 8.5pt var(--mono);letter-spacing:.12em;color:var(--rose-dark);padding-top:2px}

/* ルールカード */
.rule{border:2px solid var(--navy);border-radius:3px;padding:12px 16px;margin-top:13px;background:#fbfcfc}
.rule h2{font-family:var(--serif);font-size:12.5pt;font-weight:600;margin:0 0 6px;letter-spacing:.03em}
.rule .lead{font-size:10pt;font-weight:600;line-height:1.95;margin:0}
.rule b{background:linear-gradient(transparent 62%,#f4d3d8 62%);font-weight:700}
.rule table{width:100%;border-collapse:collapse;margin-top:9px;font-size:9.5pt}
.rule th,.rule td{border:1px solid var(--line);padding:5px 8px;text-align:left;line-height:1.75}
.rule th{background:var(--mist);font-weight:700;white-space:nowrap}
.rule td b,.rule td em{font-style:normal;color:var(--rose-dark);font-weight:700;background:none;font-family:var(--mono);font-size:10.5pt}
.rule .ex{margin:8px 0 0;padding:8px 12px;background:var(--mist);font-size:9.5pt;line-height:1.9}
.rule .ex code{font-family:var(--mono);font-size:10pt;background:none}
.rule ul{margin:7px 0 0;padding-left:1.2em;font-size:9.5pt;line-height:1.9}
.warn{margin-top:9px;background:#fdf2f3;border:1px dashed var(--rose);padding:8px 12px;font-size:9.5pt;font-weight:600;line-height:1.85}
.warn::before{content:'⚠ ここで落とす ';font:700 8.5pt var(--mono);letter-spacing:.08em;color:var(--rose-dark)}

/* ───────── セクション ───────── */
.sec{margin-top:15px;page-break-inside:auto}
.sec-h{display:flex;align-items:center;gap:10px;flex-wrap:wrap;border-bottom:1px solid var(--line);padding-bottom:5px;margin-bottom:8px}
.sec-h .no{background:var(--navy);color:#fff;font:700 9pt var(--mono);letter-spacing:.1em;padding:3px 10px;border-radius:2px}
.sec-h h2{font-family:var(--serif);font-size:12.5pt;font-weight:600;margin:0;letter-spacing:.03em}
.sec-h .tip{font-size:9pt;font-weight:600;color:var(--soft)}
.sec-h .pt{margin-left:auto;font:700 8.5pt var(--mono);color:var(--rose-dark);white-space:nowrap}
.sec-note{font-size:9.5pt;color:var(--soft);font-weight:500;margin:0 0 8px;line-height:1.85}

ol.q{list-style:none;margin:0;padding:0;counter-reset:qn}
ol.q>li{counter-increment:qn;display:grid;grid-template-columns:26px 1fr;gap:9px;
  font-size:11pt;line-height:2.35;padding:3px 0;border-bottom:1px dotted #e2e7ea;page-break-inside:avoid}
ol.q>li::before{content:"(" counter(qn) ")";font:700 9pt var(--mono);color:var(--rose-dark);padding-top:.45em}
.qbody{min-width:0}
.jp{display:block;font-size:9.5pt;color:var(--soft);font-weight:600;line-height:1.7}
.words{display:inline-block;font-family:var(--mono);font-size:10pt;background:var(--mist);padding:1px 9px;margin-bottom:2px;letter-spacing:.02em}

/* 2択・3択 */
.pick{display:inline-flex;gap:6px;flex-wrap:wrap;vertical-align:middle;margin:0 2px}
.pick label{font-family:var(--mono);font-size:10.5pt;font-weight:500;border:1.2px solid #b9c4cc;border-radius:999px;
  padding:1px 13px;cursor:pointer;line-height:1.9;background:#fff}
.pick input{display:none}
.pick input:checked+span{font-weight:700}
.pick label:has(input:checked){border-color:var(--navy);background:var(--navy);color:#fff}

/* 書き込み欄 */
.w{font-family:var(--mono);font-size:10.5pt;color:var(--ink);background:transparent;border:none;
  border-bottom:1.3px solid #8b98a3;padding:0 4px 1px;min-width:34mm;line-height:2}
.w:focus{outline:none;border-bottom-color:var(--rose);background:#fdf6f7}
.w.s{min-width:20mm}
.w.m{min-width:52mm}
.w.l{width:100%;min-width:0;display:block;margin-top:2px}
.w::placeholder{color:#c3ccd3}

/* 判定マーク */
.mk{display:inline-block;font-weight:700;font-size:11pt;margin-left:7px;vertical-align:middle}
.mk.ok{color:var(--ok)} .mk.near{color:var(--near)} .mk.ng{color:var(--ng)}
.fix{display:block;font-size:9.5pt;font-weight:600;color:var(--ng);line-height:1.8;margin-top:-4px}
.fix.near{color:var(--near)}
.fix code{font-family:var(--mono);font-size:10pt}
li.graded-ok{background:#f4faf7}
li.graded-ng{background:#fdf5f4}

/* 読解パッセージ */
.passage{border:1px solid var(--line);border-left:4px solid var(--navy);background:#fbfcfc;padding:11px 15px;
  font-size:10.5pt;line-height:2.15;margin-bottom:10px;font-family:var(--sans)}
.passage p{margin:0 0 7px}.passage p:last-child{margin:0}
.passage .sp{font-family:var(--mono);font-size:9pt;color:var(--rose-dark);font-weight:700;margin-right:5px}
.gloss{margin-top:8px;padding-top:7px;border-top:1px dotted var(--line);font-size:9pt;color:var(--soft);line-height:1.8}

/* ふりかえり */
.check{border:2px dashed var(--navy);padding:11px 16px;margin-top:15px;background:#fbfcfc}
.check h2{font-family:var(--serif);font-size:12pt;font-weight:600;margin:0 0 6px}
.check ul{list-style:none;margin:0;padding:0;font-size:10pt;line-height:2.2}
.check li{display:flex;gap:9px;align-items:flex-start;border-bottom:1px dotted var(--line);padding:2px 0}
.check li:last-child{border:none}
.check .box{flex-shrink:0;width:14px;height:14px;border:1.5px solid var(--navy);margin-top:.5em}

/* 答え合わせページ */
.sheet.ans{background:#fdfbfb;display:none}
body.show-ans .sheet.ans{display:block}
.sheet.ans .head{border-bottom-color:var(--rose-dark)}
.sheet.ans .head h1{color:var(--rose-dark)}
.alist{list-style:none;margin:0;padding:0;counter-reset:an;column-gap:12mm}
.alist li{counter-increment:an;font-size:10pt;line-height:1.95;padding:2px 0;border-bottom:1px dotted #eceff1;
  display:grid;grid-template-columns:24px 1fr;gap:7px;page-break-inside:avoid}
.alist li::before{content:"(" counter(an) ")";font:700 8.5pt var(--mono);color:#9aa7b2;padding-top:.35em}
.alist .a{font-family:var(--mono);font-weight:700;color:var(--rose-dark);font-size:10.5pt}
.alist .why{display:block;font-size:9pt;color:var(--soft);font-weight:500;line-height:1.7}
.acols{columns:2;column-gap:12mm}
.acols li{break-inside:avoid}
.asec{margin-top:12px}
.asec h3{font-family:var(--serif);font-size:11pt;font-weight:600;margin:0 0 5px;padding-bottom:3px;border-bottom:1px solid var(--line)}
.voice{background:var(--mist);padding:11px 15px;margin-top:14px;font-size:9.5pt;line-height:1.95;border-left:4px solid var(--rose)}
.voice h3{font-family:var(--serif);font-size:11pt;font-weight:600;margin:0 0 5px}
.voice b{font-weight:700;color:var(--rose-dark)}
.voice p{margin:0 0 5px}.voice p:last-child{margin:0}
.next{margin-top:12px;font-size:9.5pt;font-weight:600;line-height:1.9;border:1px solid var(--line);padding:9px 14px}
.next b{color:var(--rose-dark)}

.foot{display:flex;justify-content:space-between;margin-top:16px;
  font:700 7.5pt var(--mono);letter-spacing:.1em;color:#a4b0b9;border-top:1px solid #edf0f2;padding-top:4px}

/* ───────── 会員限定ロック ───────── */
.lock{border:2px solid var(--navy);background:linear-gradient(135deg,#f6f8f9,#edf1f3);padding:22px 24px;margin-top:15px;text-align:center}
.lock .ic{font-size:26px;line-height:1}
.lock h2{font-family:var(--serif);font-size:14pt;font-weight:600;margin:7px 0 5px}
.lock p{font-size:10pt;color:var(--soft);margin:0 auto 13px;max-width:30em;line-height:1.9}
.lock .cnt{font:700 9pt var(--mono);color:var(--rose-dark);letter-spacing:.08em}

/* ───────── 採点結果バナー ───────── */
.result{position:sticky;bottom:0;z-index:70;background:var(--navy);color:#fff;padding:13px clamp(14px,3vw,30px);
  display:none;align-items:center;gap:18px;flex-wrap:wrap;box-shadow:0 -3px 18px rgba(36,52,71,.3)}
.result.on{display:flex}
.result .score{font:700 26px var(--mono);letter-spacing:.02em}
.result .score small{font-size:13px;font-weight:500;color:#b8c6d1;margin-left:3px}
.result .msg{font-size:13px;font-weight:600;max-width:44em;line-height:1.75}
.result .msg b{color:#f2b9c1}
.result .acts{margin-left:auto;display:flex;gap:9px;flex-wrap:wrap}
.saved{font-size:11px;color:#9fd8bd;font-weight:600}

/* ───────── 印刷 ───────── */
@media print{
  body{background:#fff}
  .bar,.result,.noprint{display:none!important}
  .sheet{width:auto;min-height:0;margin:0;padding:12mm 13mm 12mm;box-shadow:none;page-break-after:always}
  .sec-h,.rule,.goal,.passage,.warn,.voice,.next,.check{page-break-inside:avoid}
  .sec-h{page-break-after:avoid}
  .sheet:last-of-type{page-break-after:auto}
  .w{border-bottom-color:#5c6b78}
  .mk,.fix{display:none!important}
  li.graded-ok,li.graded-ng{background:none}
  .lock{display:none!important}
  .sheet.ans{display:block!important}
  .foot{margin-top:10px}
  a[href]::after{content:none!important}
}
@page{size:A4;margin:0}

/* ───────── 画面が狭いとき ───────── */
@media(max-width:820px){
  .sheet{width:100%;margin:12px 0;padding:22px 18px 26px;box-shadow:none;border-bottom:8px solid #dfe4e7}
  .head{flex-direction:column;align-items:flex-start;gap:8px}
  .head .meta{text-align:left}
  .head h1{font-size:22px}
  ol.q>li{font-size:15px;line-height:2.3}
  .foot{margin-top:16px}
  .acols{columns:1}
  .result{flex-direction:column;align-items:flex-start;gap:9px}
  .result .acts{margin-left:0;width:100%}
  .result .acts .btn{flex:1;justify-content:center}
}