/* TED HACKS ワークシート（A4・印刷／PDF 専用）
   1ページ = .pg（210×297mm 固定）。中身があふれたら sheet.js が文字を少しずつ小さくする。 */
/* 端末に BIZ UDPゴシック があればそれを使う（Windows 10以降に標準）。PDF に埋め込むフォントが1つにまとまり軽くなる */
@font-face { font-family: "THJ"; font-weight: 400; src: local("BIZ UDPGothic"), local("BIZUDPGothic"), local("BIZ UDPゴシック"); }
@font-face { font-family: "THJ"; font-weight: 700 900; src: local("BIZ UDPGothic Bold"), local("BIZUDPGothic-Bold"), local("BIZ UDPゴシック Bold"); }
:root {
  --ink: #16182a; --red: #ff4b3e; --red2: #e8392d; --redsoft: #ffe9e6;
  --cream: #fff6ea; --cream2: #fbeedb; --line: #c9c2b4; --line2: #e4ddd0;
  --mint: #19a892; --mintsoft: #dcf4ef; --mustard: #ffc53d; --mustardsoft: #fff3d1;
  --sky: #2f8fe6; --skysoft: #e2f0ff; --lilac: #7a67f0; --lilacsoft: #ece8ff;
  --muted: #5d6175;
  --f: "THJ", "BIZ UDPGothic", "Hiragino Sans", "Yu Gothic", "Meiryo", sans-serif; /* PDFを軽くするため可変フォントは使わない */
  --fe: "Lato", "THJ", "BIZ UDPGothic", sans-serif;
  --fd: "Dela Gothic One", "THJ", "BIZ UDPGothic", sans-serif;
  --fs: 9.4pt;
  --row: 8mm;
}
* { box-sizing: border-box; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
@page { size: A4 portrait; margin: 0; }
html, body { margin: 0; padding: 0; }
body { font-family: var(--f); color: var(--ink); }
img { display: block; max-width: 100%; }
.en { font-family: var(--fe); }

/* ---------- 画面表示（ツールバー＋紙のプレビュー） ---------- */
@media screen {
  body { background: #24263b; }
  .tb { position: sticky; top: 0; z-index: 10; background: #0e0f1d; color: #fff; display: flex; align-items: center; gap: 10px; padding: 10px 16px; flex-wrap: wrap; box-shadow: 0 4px 18px rgba(0,0,0,.35); font-size: 14px; }
  .tb a, .tb button, .tb label { font: inherit; color: inherit; text-decoration: none; }
  .tb .back { opacity: .8; font-weight: 700; }
  .tb .t { flex: 1; min-width: 200px; line-height: 1.35; }
  .tb .t b { display: block; font-size: 15px; }
  .tb .t small { color: #b9bcd6; font-size: 12px; }
  .tb label { display: flex; align-items: center; gap: 6px; font-size: 13px; color: #d9dbef; cursor: pointer; }
  .tb .btn { border: 0; cursor: pointer; border-radius: 999px; padding: 9px 16px; font-weight: 800; background: #fff; color: var(--ink); white-space: nowrap; }
  .tb .btn.red { background: var(--red); color: #fff; }
  .pages { display: flex; flex-direction: column; align-items: center; gap: 22px; padding: 22px 0 80px; zoom: var(--z, 1); }
  .pg { box-shadow: 0 14px 44px rgba(0,0,0,.45); }
  .tip-mobile { color: #b9bcd6; font-size: 12.5px; text-align: center; padding: 0 16px; margin: 14px auto 0; max-width: 720px; }
}
@media print {
  .tb, .tip-mobile { display: none !important; }
  body.noans .pg.ans { display: none !important; }
}

/* ---------- ページ ---------- */
.pg { width: 210mm; height: 297mm; padding: 9mm 11.5mm 7mm; background: #fff; display: flex; flex-direction: column; position: relative; overflow: hidden; break-after: page; page-break-after: always; font-size: var(--fs); line-height: 1.55; }
.pg:last-child { break-after: auto; page-break-after: auto; }
.pc { flex: 1; min-height: 0; overflow: hidden; }
.pz { display: flex; flex-direction: column; gap: 3.2mm; height: 100%; }

.ph { display: flex; align-items: center; gap: 3mm; padding-bottom: 2.2mm; border-bottom: .7mm solid var(--ink); margin-bottom: 3.4mm; }
.ph .logo { display: flex; align-items: center; gap: 1.6mm; font-family: var(--fd); font-size: 11.5pt; letter-spacing: .02em; line-height: 1; }
.ph .logo i { width: 5mm; height: 5mm; border-radius: 50%; background: var(--red); position: relative; flex: none; }
.ph .logo i::after { content: ""; position: absolute; inset: 1.6mm; border-radius: 50%; background: #fff; }
.ph .logo b { color: var(--red); font-weight: 400; }
.ph .kind { font-family: var(--fe); font-weight: 800; font-size: 7.4pt; letter-spacing: .16em; color: var(--muted); }
.ph .step { margin-left: auto; display: flex; align-items: center; gap: 2mm; }
.ph .step em { font-style: normal; font-family: var(--fe); font-weight: 900; font-size: 8.4pt; letter-spacing: .12em; background: var(--ink); color: #fff; padding: .9mm 2.6mm; border-radius: 1mm; }
.ph .step span { font-family: var(--fe); font-weight: 800; font-size: 8.4pt; }
.pg.ans .ph { border-color: var(--red); }
.pg.ans .ph .step em { background: var(--red); }

.pf { display: flex; gap: 4mm; align-items: center; border-top: .25mm solid var(--line); margin-top: 2.6mm; padding-top: 1.6mm; font-size: 6.6pt; color: var(--muted); line-height: 1.4; }
.pf .u { font-family: var(--fe); font-weight: 700; color: var(--ink); white-space: nowrap; }
.pf .c { flex: 1; }
.pf .n { font-family: var(--fe); font-weight: 900; color: var(--ink); font-size: 8pt; }

/* ---------- 表紙ブロック ---------- */
.cover { display: grid; grid-template-columns: 1fr 58mm; gap: 5mm; align-items: start; }
.cover .tags { display: flex; gap: 1.4mm; flex-wrap: wrap; margin-bottom: 1.6mm; }
.tag { display: inline-block; font-size: 7pt; font-weight: 800; padding: .5mm 2.2mm; border-radius: 999px; background: var(--cream2); line-height: 1.5; white-space: nowrap; }
.tag.ted { background: var(--red); color: #fff; }
.tag.teded { background: var(--ink); color: #fff; }
.tag.tedx { background: #ffd9d4; }
.tag.lv1 { background: var(--mintsoft); color: #0e6e5f; }
.tag.lv2 { background: var(--mustardsoft); color: #7a5600; }
.tag.lv3 { background: var(--lilacsoft); color: #4b39b8; }
.cover h1 { font-size: 17pt; line-height: 1.32; margin: 0 0 1.2mm; font-weight: 900; letter-spacing: -.01em; }
.cover .ent { font-family: var(--fe); font-size: 9pt; font-weight: 600; color: var(--muted); margin: 0 0 2.4mm; line-height: 1.4; }
.facts { display: grid; grid-template-columns: repeat(4, 1fr); border: .3mm solid var(--ink); border-radius: 2mm; overflow: hidden; }
.facts div { padding: 1.4mm 2mm; border-left: .3mm solid var(--line2); }
.facts div:first-child { border-left: 0; }
.facts b { display: block; font-family: var(--fe); font-size: 10.5pt; font-weight: 900; line-height: 1.25; white-space: nowrap; }
.facts b.st { color: var(--red); font-size: 9.5pt; letter-spacing: -.04em; }
.facts span { font-size: 6.8pt; color: var(--muted); font-weight: 700; }
.vid { position: relative; border-radius: 2.4mm; overflow: hidden; background: var(--ink); }
.vid img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.vid .pl { position: absolute; left: 50%; top: 50%; width: 10mm; height: 10mm; margin: -5mm 0 0 -5mm; border-radius: 50%; background: var(--red); }
.vid .pl::after { content: ""; position: absolute; left: 3.9mm; top: 2.9mm; border-left: 3.4mm solid #fff; border-top: 2.1mm solid transparent; border-bottom: 2.1mm solid transparent; }
.qrrow { display: flex; gap: 2.4mm; align-items: center; margin-top: 2mm; }
.qr { width: 19mm; height: 19mm; flex: none; padding: 1mm; border: .3mm solid var(--ink); border-radius: 1.4mm; background: #fff; }
.qr svg { width: 100%; height: 100%; display: block; }
.qrrow p { margin: 0; font-size: 7pt; line-height: 1.45; color: var(--muted); }
.qrrow p b { color: var(--ink); font-size: 7.6pt; }

.name { display: grid; grid-template-columns: 1fr 1fr 1.6fr; gap: 3mm; font-size: 7.4pt; font-weight: 700; color: var(--muted); }
.name.four { grid-template-columns: .9fr 1fr 1.5fr .9fr; }
.name span { border-bottom: .3mm solid var(--ink); padding: 0 0 .6mm; height: 7mm; display: flex; align-items: flex-end; }

/* ---------- セクション見出し ---------- */
.sh { display: flex; align-items: center; gap: 2mm; margin: .6mm 0 1.6mm; }
.sh .no { width: 6.4mm; height: 6.4mm; border-radius: 50%; background: var(--red); color: #fff; font-family: var(--fe); font-weight: 900; font-size: 9.5pt; display: grid; place-items: center; flex: none; line-height: 1; }
.sh b { font-size: 11.2pt; font-weight: 900; letter-spacing: .01em; line-height: 1.3; }
.sh em { font-style: normal; font-family: var(--fe); font-weight: 800; font-size: 6.8pt; letter-spacing: .16em; color: var(--red); }
.sh .tm { margin-left: auto; font-size: 7pt; font-weight: 800; border: .3mm solid var(--ink); border-radius: 999px; padding: .2mm 2.2mm; white-space: nowrap; }
.sh .tm.pt { background: var(--ink); color: #fff; }
.lead { margin: -0.6mm 0 1.6mm; font-size: 8pt; color: var(--muted); }
.sec { display: flex; flex-direction: column; min-height: 0; }
.sec.grow { flex: 1; }

/* ---------- 罫線・枠 ---------- */
.ln { background-image: repeating-linear-gradient(to bottom, transparent 0, transparent calc(var(--row) - .22mm), var(--line) calc(var(--row) - .22mm), var(--line) var(--row)); background-size: 100% var(--row); }
.fill { flex: 1; min-height: calc(var(--row) * 2); }
.box { border: .3mm solid var(--ink); border-radius: 2mm; padding: 2mm 2.6mm; }
.soft { background: var(--cream); border-radius: 2.4mm; padding: 2.4mm 3mm; }
.soft.mint { background: var(--mintsoft); }
.soft.sky { background: var(--skysoft); }
.soft.mustard { background: var(--mustardsoft); }
.soft.red { background: var(--redsoft); }
.soft.lilac { background: var(--lilacsoft); }
.soft p { margin: 0; }
.lab { font-size: 7.2pt; font-weight: 900; letter-spacing: .06em; color: var(--red); display: block; margin-bottom: .6mm; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 4mm; }
.three { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3mm; }
.row { display: flex; gap: 4mm; align-items: stretch; }
.muted { color: var(--muted); }
.small { font-size: 7.6pt; }

/* 問い */
.q { display: grid; grid-template-columns: 6.4mm 1fr; gap: 0 1.6mm; margin-bottom: 1mm; }
.q .k { font-family: var(--fe); font-weight: 900; font-size: 9pt; color: var(--red); line-height: 1.5; }
.q .e { font-family: var(--fe); font-weight: 700; font-size: 10pt; line-height: 1.45; }
.q .j { font-size: 7.6pt; color: var(--muted); line-height: 1.45; }
.q .ln { grid-column: 2; margin-top: .4mm; }

/* 表 */
table.t { width: 100%; border-collapse: collapse; font-size: 8.6pt; }
table.t th, table.t td { border: .25mm solid #9c9586; padding: 1.1mm 2mm; text-align: left; vertical-align: middle; line-height: 1.4; }
table.t th { background: var(--ink); color: #fff; font-size: 7.4pt; font-weight: 800; letter-spacing: .04em; border-color: var(--ink); }
table.t td.n { width: 6mm; text-align: center; font-family: var(--fe); font-weight: 800; color: var(--muted); }
table.t td.w { font-family: var(--fe); font-weight: 800; font-size: 9.6pt; }
table.t tr.h td { height: var(--row); }
table.t tr:nth-child(even) td { background: #fdfaf4; }
.dots { display: inline-flex; gap: 1.6mm; align-items: center; font-size: 6.6pt; font-weight: 700; color: var(--muted); white-space: nowrap; }
.dots i { width: 3.6mm; height: 3.6mm; border: .3mm solid var(--ink); border-radius: 50%; display: inline-block; vertical-align: middle; margin-right: .5mm; }
.cb { width: 3.6mm; height: 3.6mm; border: .3mm solid var(--ink); border-radius: .7mm; display: inline-block; vertical-align: -0.6mm; margin-right: 1.2mm; flex: none; background: #fff; }

/* 視聴ログ */
.round { display: grid; grid-template-columns: 13mm 1fr 47mm; gap: 3mm; align-items: center; border: .3mm solid var(--ink); border-radius: 2.2mm; padding: 2mm 3mm; }
.round .r { font-family: var(--fe); font-weight: 900; font-size: 7pt; text-align: center; line-height: 1.1; color: var(--red); }
.round .r b { display: block; font-size: 17pt; color: var(--ink); }
.round p { margin: 0; font-size: 8.6pt; }
.round .ck { font-size: 7pt; color: var(--muted); font-weight: 700; display: grid; gap: 1.2mm; }
.scale { display: flex; gap: 1mm; align-items: center; }
.scale span { flex: 1; text-align: center; border: .3mm solid var(--ink); border-radius: 999px; font-family: var(--fe); font-size: 6.2pt; font-weight: 800; padding: .2mm 0; color: var(--ink); }

/* 話の流れマップ */
.flow { flex: 1; display: flex; flex-direction: column; gap: 1.6mm; min-height: 0; }
.flow .st { flex: 1; display: grid; grid-template-columns: 27mm 1fr; border: .3mm solid var(--ink); border-radius: 2.2mm; overflow: hidden; min-height: 14mm; }
.flow .st .hd { background: var(--ink); color: #fff; padding: 1.6mm 2.4mm; display: flex; flex-direction: column; justify-content: center; position: relative; }
.flow .st .hd small { font-family: var(--fe); font-weight: 900; font-size: 6.4pt; letter-spacing: .14em; color: var(--mustard); }
.flow .st .hd b { font-size: 9.6pt; line-height: 1.3; }
.flow .st .bd { padding: 0 2.6mm; }

/* マッチング・スペル */
.match { display: grid; grid-template-columns: 1fr 1fr; gap: .9mm 5mm; font-size: 9pt; line-height: 1.35; }
.match .l { display: flex; align-items: center; gap: 1.6mm; }
.match .l .w { font-family: var(--fe); font-weight: 800; flex: 1; }
.match .l .p { font-family: var(--fe); color: var(--muted); }
.match .l .bx { width: 7mm; height: 5mm; border: .3mm solid var(--ink); border-radius: 1mm; flex: none; }
.match .r { display: flex; gap: 1.6mm; align-items: center; }
.match .r .k { font-family: var(--fe); font-weight: 900; color: var(--red); width: 4mm; }
.spell { display: grid; gap: 1.8mm; }
.spell .it { display: grid; grid-template-columns: 34mm 1fr; align-items: center; gap: 2mm; font-size: 8.6pt; }
.spell .it .j { font-weight: 700; line-height: 1.3; }
.lt { display: flex; gap: .5mm; flex-wrap: nowrap; }
.lt i { width: 3.7mm; height: 5.4mm; border-bottom: .35mm solid var(--ink); display: inline-grid; place-items: end center; font-style: normal; font-family: var(--fe); font-weight: 800; font-size: 9pt; line-height: 1.1; }
.lt i.f { color: var(--red); }
.lt i.sp { width: 2.6mm; border: 0; }

/* 穴埋め */
.cloze { display: grid; gap: 1.1mm; }
.cloze .c { display: grid; grid-template-columns: 6mm 1fr; gap: 1.4mm; }
.cloze .c .k { font-family: var(--fe); font-weight: 900; color: var(--red); }
.cloze .c .e { font-family: var(--fe); font-size: 9.2pt; line-height: 1.45; }
.cloze .c .e u { display: inline-block; min-width: 26mm; border-bottom: .3mm solid var(--ink); text-decoration: none; height: 4.6mm; vertical-align: -1mm; }
.cloze .c .j { font-size: 7.2pt; color: var(--muted); }
.bank { display: flex; flex-wrap: wrap; gap: 1.6mm; border: .3mm dashed var(--ink); border-radius: 2mm; padding: 1.8mm 2.4mm; align-items: center; }
.bank .lab { margin: 0 1.6mm 0 0; }
.bank span { font-family: var(--fe); font-weight: 800; font-size: 9pt; background: var(--cream); border-radius: 1.2mm; padding: .2mm 2mm; }

/* PREP */
.prep { flex: 1; display: grid; grid-template-rows: repeat(4, 1fr); gap: 1.4mm; min-height: 0; }
.prep .p { display: grid; grid-template-columns: 26mm 1fr; border: .3mm solid var(--ink); border-radius: 2.2mm; overflow: hidden; min-height: 15mm; }
.prep .p .hd { background: var(--cream); padding: 1.4mm 2.2mm; border-right: .3mm solid var(--ink); display: flex; flex-direction: column; justify-content: center; }
.prep .p .hd b { font-family: var(--fe); font-weight: 900; font-size: 13pt; color: var(--red); line-height: 1; }
.prep .p .hd span { font-size: 7.4pt; font-weight: 800; }
.prep .p .hd small { font-family: var(--fe); font-size: 6.6pt; color: var(--muted); line-height: 1.3; margin-top: .6mm; }
.prep .p .bd { padding: 0 2.6mm; }
.wc { display: flex; gap: 3mm; align-items: center; justify-content: flex-end; font-size: 7.6pt; font-weight: 800; }
.wc span { border-bottom: .3mm solid var(--ink); min-width: 14mm; display: inline-block; height: 5mm; }

/* 自己評価 */
.eval { display: grid; gap: 1mm; font-size: 8.6pt; }
.eval .e { display: grid; grid-template-columns: 1fr auto; gap: 3mm; align-items: center; border-bottom: .25mm dotted var(--line); padding-bottom: .8mm; }
.mk { display: inline-flex; gap: 1.4mm; }
.mk span { width: 6mm; height: 6mm; border: .3mm solid var(--ink); border-radius: 50%; display: grid; place-items: center; font-size: 7.4pt; font-weight: 900; color: #b8b2a6; }

/* ホーキー */
.hk { display: flex; gap: 2.6mm; align-items: center; }
.hk img { width: 15mm; height: 15mm; border-radius: 50%; object-fit: cover; flex: none; border: .3mm solid var(--line2); }
.hk .bb { position: relative; background: var(--cream); border-radius: 2.4mm; padding: 1.8mm 3mm; flex: 1; font-size: 8.2pt; line-height: 1.55; }
.hk .bb b { color: var(--red); font-size: 7pt; letter-spacing: .08em; display: block; }

/* 原稿用紙 */
.genko { display: grid; grid-template-columns: repeat(20, 1fr); border-top: .3mm solid var(--ink); border-left: .3mm solid var(--ink); width: 100%; }
.genko i { aspect-ratio: 1; border-right: .25mm solid #9c9586; border-bottom: .25mm solid #9c9586; position: relative; }
.genko i:nth-child(20n) { border-right-color: var(--ink); }
.genko i.m::after { content: attr(data-n); position: absolute; right: -0.2mm; bottom: -2.8mm; font-size: 5pt; font-family: var(--fe); color: var(--red); font-weight: 800; }

/* 長文 */
.passage { font-family: var(--fe); font-size: 10pt; line-height: 1.78; }
.passage p { margin: 0 0 1.6mm; text-indent: 0; display: grid; grid-template-columns: 6mm 1fr; }
.passage p b { font-size: 7.4pt; color: var(--red); font-weight: 900; padding-top: .8mm; }
.gloss { font-size: 7.6pt; display: flex; flex-wrap: wrap; gap: 1mm 4mm; border-top: .3mm solid var(--ink); padding-top: 1.4mm; }
.gloss b { font-family: var(--fe); }
.wpm { display: grid; grid-template-columns: repeat(9, 1fr); border: .3mm solid var(--ink); border-radius: 1.6mm; overflow: hidden; text-align: center; font-family: var(--fe); font-size: 7.2pt; }
.wpm div { border-left: .25mm solid var(--line2); padding: .6mm 0; }
.wpm div:first-child { border-left: 0; background: var(--ink); color: #fff; font-weight: 800; font-size: 6.4pt; display: grid; place-items: center; }
.wpm b { display: block; font-size: 8.4pt; }

/* 解答ページ */
.ans .akey { columns: 2; column-gap: 6mm; font-size: 8.2pt; line-height: 1.55; }
.ans .akey > div { break-inside: avoid; margin-bottom: 2.6mm; }
.ans h3 { font-size: 9pt; margin: 0 0 .8mm; padding: .4mm 2mm; background: var(--ink); color: #fff; border-radius: 1mm; display: inline-block; font-weight: 800; }
.ans ul, .ans ol { margin: 0; padding-left: 4.2mm; }
.ans li { margin-bottom: .6mm; }
.ans p { margin: 0 0 1mm; }
.plan { width: 100%; border-collapse: collapse; font-size: 7.8pt; }
.plan td { border-bottom: .25mm solid var(--line2); padding: .9mm 1.2mm; vertical-align: top; }
.plan td:first-child { font-family: var(--fe); font-weight: 900; white-space: nowrap; color: var(--red); width: 11mm; }
.plan td:nth-child(2) { font-weight: 800; white-space: nowrap; width: 18mm; }

/* ログ表 */
table.log { width: 100%; border-collapse: collapse; font-size: 8pt; }
table.log th { background: var(--ink); color: #fff; font-size: 7pt; padding: 1.2mm 1mm; font-weight: 800; border: .25mm solid var(--ink); }
table.log td { border: .25mm solid #9c9586; height: 8.6mm; padding: 0 1mm; text-align: center; color: #b8b2a6; font-size: 6.6pt; }
table.log td:first-child { font-family: var(--fe); font-weight: 900; color: var(--ink); font-size: 7.6pt; width: 7mm; }
table.log tr:nth-child(5n) td { border-bottom: .45mm solid var(--ink); }
.meter { display: grid; grid-template-columns: repeat(20, 1fr); gap: .8mm; }
.meter i { height: 6mm; border: .3mm solid var(--ink); border-radius: .8mm; position: relative; }
.meter i:nth-child(4n) { background: var(--cream); }
.meter i span { position: absolute; bottom: -3.2mm; right: 0; font-size: 5pt; font-family: var(--fe); font-weight: 800; color: var(--muted); font-style: normal; }

.cover .catch { margin: -1mm 0 2.4mm; font-weight: 900; font-size: 11pt; color: var(--red); }