/* 노벨토익 공용 리더 스타일
   「대리님, 이건 업무 외입니다」 read.html 에서 그대로 뽑았다.
   색·폰트·간격을 손대지 마라. 두 작품이 같은 사이트로 보여야 한다. */

:root{
  --bg:#fbfaf7; --card:#ffffff; --line:#e6e3dc; --line2:#d8d4ca;
  --ink:#26272e; --ink2:#4a4d58; --dim:#8b8f9c; --dim2:#a8abb6;
  --accent:#4aa8c9; --accent2:#3d93b3; --accent-soft:#e8f4f8;
  --mint:#5cc0a8; --mint-soft:#e4f5f0;
  --paper:#fdfcf8; --paper-line:#ece7d9;
  --ok:#4aa87f; --no:#d97b7b;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{background:var(--bg);color:var(--ink);font-family:'Pretendard Variable',Pretendard,'Apple SD Gothic Neo',system-ui,sans-serif;line-height:1.75;font-size:16px}
.wrap{max-width:720px;margin:0 auto;padding:0 18px 120px}
button{font-family:inherit;font-size:inherit;cursor:pointer;border:none;background:none;color:inherit}
.bar{position:sticky;top:0;z-index:50;background:rgba(251,250,247,.92);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.bar-in{max-width:720px;margin:0 auto;padding:12px 18px;display:flex;align-items:center;gap:10px}
.bar h1{font-size:13px;font-weight:600;margin:0;flex:1;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar button{font-size:13px;color:var(--dim);padding:6px 9px;border-radius:8px;white-space:nowrap}
.bar button:hover{color:var(--accent2);background:var(--accent-soft)}
.lv{font-size:11px;background:var(--accent-soft);color:var(--accent2);padding:3px 9px;border-radius:999px;font-weight:700}
.cover{padding:34px 0 4px;text-align:center}
.hook{margin:20px 0 4px;padding:0 4px;text-align:left}
.hook p{margin:0 0 9px;font-size:15.5px;line-height:1.85;color:var(--ink2)}
.hook p.q{font-size:16.5px;color:var(--ink);font-weight:600}
.cta{display:block;width:100%;padding:17px;border-radius:14px;background:var(--accent);color:#fff;
  font-weight:800;font-size:16.5px;margin:20px 0 10px;box-shadow:0 3px 14px #4aa8c93a;transition:.15s;
  letter-spacing:-.01em}
.cta:hover{background:var(--accent2);box-shadow:0 5px 18px #4aa8c950}
.ctasub{text-align:center;font-size:12.5px;color:var(--dim);line-height:1.7;margin-bottom:6px}
.divider{display:flex;align-items:center;gap:12px;margin:26px 0 14px;color:var(--dim2);font-size:12px}
.divider::before,.divider::after{content:'';flex:1;height:1px;background:var(--line)}
.cover .eyebrow{font-size:11px;letter-spacing:.35em;color:var(--accent2);margin-bottom:20px;font-weight:700}
.cover h2{font-size:32px;font-weight:800;letter-spacing:-.025em;margin:0 0 16px;line-height:1.38}
.cover p{color:var(--dim);font-size:15px;margin:0 auto;max-width:440px}
.stat{display:flex;justify-content:center;gap:26px;margin:34px 0 8px}
.stat div{text-align:center}.stat b{display:block;font-size:26px;color:var(--accent2);font-weight:800}
.stat span{font-size:11px;color:var(--dim2);letter-spacing:.1em}
.cover-art{margin:6px 0 22px;border-radius:16px;overflow:hidden;border:1px solid var(--line);
  box-shadow:0 4px 20px #26272e14;position:relative;background:var(--card)}
.cover-art img{display:block;width:100%;height:auto}
.cover-art::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 60%,#26272ec4 100%)}
.cover-cap{position:absolute;left:0;right:0;bottom:0;padding:16px 18px;z-index:2;
  font-size:13px;color:#cfd3e0;letter-spacing:-.01em;text-shadow:0 2px 8px #0009}
.wordlink{display:flex;gap:13px;align-items:center;padding:16px 18px;border-radius:14px;
  background:var(--mint-soft);border:1px solid #cfe9e0;margin-top:18px;text-align:left;width:100%;
  transition:.15s;text-decoration:none;color:inherit}
.wordlink:hover{border-color:var(--mint);box-shadow:0 3px 12px #5cc0a820;transform:translateY(-1px)}
.wordlink .ico{flex:none;width:38px;height:38px;border-radius:11px;background:var(--mint);color:#fff;
  display:grid;place-items:center;font-size:17px;font-weight:800}
.wordlink .tx{flex:1;min-width:0}
.wordlink .tx b{display:block;font-size:14.5px;font-weight:700;color:var(--ink);margin-bottom:2px}
.wordlink .tx span{display:block;font-size:12.5px;color:var(--ink2);line-height:1.55}
.wordlink .arw{flex:none;color:var(--mint);font-size:15px}
.bar .wl{font-size:12.5px;color:var(--dim);padding:6px 10px;border-radius:8px;text-decoration:none;
  white-space:nowrap;border:1px solid transparent;transition:.15s}
.bar .wl:hover{color:var(--mint);border-color:#cfe9e0;background:var(--mint-soft)}
.lvpick{display:flex;flex-direction:column;gap:9px;margin:26px 0 8px}
.lvgroup{display:flex;flex-direction:column;gap:9px}
.lvcard{position:relative}
.lvcard .chev{position:absolute;right:18px;top:19px;font-size:11px;color:var(--accent);transition:.2s}
.lvcard.on .chev{color:var(--accent)}
.lvbody{overflow:hidden}
.lvmore{font-size:12px;color:var(--dim);text-align:center;padding:10px 0 2px}
.lvmore button{color:var(--accent2);font-weight:700;font-size:12.5px;padding:6px 12px;border-radius:999px;
  border:1px solid var(--line);background:var(--card)}
.lvmore button:hover{border-color:var(--accent);background:var(--accent-soft)}
.lvbody .eplist{margin:9px 0 4px 14px;padding-left:14px;border-left:2px solid var(--accent-soft)}
.lvbody .epcard{background:var(--card)}
.lvcard{padding:17px 19px;border-radius:14px;background:var(--card);border:1.5px solid var(--line);text-align:left;transition:.15s;box-shadow:0 1px 3px #26272e0a;width:100%}
.lvcard:hover{border-color:var(--line2)}
.lvcard.on{border-color:var(--accent);background:var(--accent-soft);box-shadow:0 2px 10px #4aa8c920}
.lvcard b{display:block;font-size:16px;margin-bottom:3px}
.lvcard span{font-size:13px;color:var(--dim);line-height:1.6}
.lvcard em{display:inline-block;font-style:normal;font-size:11px;color:var(--mint);margin-top:7px;background:var(--mint-soft);padding:3px 9px;border-radius:999px;font-weight:600}
.eplist{display:flex;flex-direction:column;gap:8px;margin-top:14px}
/* 화 한 줄 = 읽기 카드 + PDF 단추. 카드가 폭을 다 먹으므로 줄로 한 번 감싼다.
   PDF 는 공개된 화에만 붙는다 — 종이는 받아 간 파일을 못 고친다 */
.eprow{display:flex;align-items:stretch;gap:8px}
.eprow .epcard{flex:1;min-width:0}
.eppdf{flex:none;display:grid;place-items:center;width:52px;border-radius:14px;
  border:1px solid var(--line);background:var(--card);color:var(--dim);
  font-size:11px;font-weight:700;letter-spacing:.02em;transition:.15s;text-decoration:none}
.eppdf:hover{border-color:var(--accent);color:var(--accent2);background:var(--accent-soft)}
/* 잠긴 PDF — 누를 수는 있다(왜 잠겼는지 알려 준다). 받는 단추와 헷갈리지 않게 흐리게 */
.eppdf.lock{cursor:pointer;color:var(--dim2);background:#f6f4f0;border-style:dashed;
  font-family:inherit;padding:0;gap:1px;align-content:center}
.eppdf.lock span{font-size:13px;line-height:1;filter:grayscale(1);opacity:.75}
.eppdf.lock:hover{color:var(--dim);background:#f1efe9;border-color:var(--line2)}
.pdfnote{position:fixed;left:50%;bottom:22px;transform:translate(-50%,16px);z-index:90;
  max-width:min(92vw,420px);padding:12px 16px;border-radius:12px;background:#26272e;color:#fff;
  font-size:13px;line-height:1.6;box-shadow:0 8px 24px #26272e40;opacity:0;pointer-events:none;
  transition:.2s;text-align:center}
.pdfnote.on{opacity:1;transform:translate(-50%,0)}
.epcard{display:flex;align-items:center;gap:14px;padding:15px 16px;border-radius:14px;background:var(--card);border:1px solid var(--line);text-align:left;width:100%;transition:.15s;box-shadow:0 1px 2px #26272e08}
.epcard:hover{border-color:var(--accent);box-shadow:0 3px 10px #4aa8c918;transform:translateX(2px)}
.epcard .no{width:34px;height:34px;flex:none;border-radius:50%;display:grid;place-items:center;font-size:13px;font-weight:700;background:#f0eee8;color:var(--dim)}
.epcard.done .no{background:var(--mint);color:#fff}
.epcard .t{flex:1;min-width:0}.epcard .t b{display:block;font-size:15px;font-weight:600}
.epcard .t small{color:var(--dim2);font-size:12px}
.epcard .sc{font-size:12px;color:var(--mint);font-weight:700;flex:none}
.stage{padding:24px 0 10px}
h3.eptitle{font-size:23px;font-weight:700;margin:0 0 16px}
.tools{display:flex;gap:7px;margin-bottom:16px;flex-wrap:wrap}
.tbtn{font-size:12.5px;padding:8px 15px;border-radius:999px;background:var(--card);
  border:1px solid var(--line2);color:var(--ink2);font-weight:600;transition:.15s;display:inline-flex;align-items:center;gap:7px}
.tbtn:hover{border-color:var(--accent);color:var(--accent2)}
.tbtn::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--line2);transition:.15s}
.tbtn.on{background:var(--accent-soft);border-color:var(--accent);color:var(--accent2)}
.tbtn.on::before{background:var(--accent);box-shadow:0 0 6px #4aa8c977}
.advk{font-size:14.5px;line-height:1.85;color:var(--dim);margin:6px 0 16px;padding-left:15px;border-left:2px solid var(--accent-soft)}
.advreadk{font-size:13.5px;line-height:1.8;color:var(--dim);margin:0 0 16px;padding-left:15px;border-left:2px solid var(--accent-soft)}
.story{white-space:pre-line;font-size:16.5px;line-height:2.05;color:var(--ink)}
.story.en{font-size:16px;line-height:1.95;font-family:'Pretendard Variable',Pretendard,system-ui,sans-serif}
/* 본문 속 한 줄 인용 — 문서가 아니라 기존 문서의 한 줄을 읽는 자리 (7화 유효기간 · 8화 담당 검인관) */
.story.inq{border-left:3px solid var(--line2);padding-left:14px;color:var(--ink2);font-style:italic}
/* 장면 안에 놓인 문항 카드 (2026-08 장면 배치) */
.iq{margin:22px 0;padding:16px 14px;border:1px solid var(--line);border-radius:12px;background:var(--card)}
.iq .qtext{margin:6px 0 12px}
.bi{margin:0}
.bi .row{margin-bottom:16px}
.bi .e{font-size:16px;line-height:1.9;font-family:'Pretendard Variable',Pretendard,system-ui,sans-serif;color:var(--ink)}
.bi .k{font-size:14.5px;line-height:1.8;color:var(--dim);margin-top:5px;padding-left:13px;border-left:2px solid #2f3444}
.doc{background:var(--paper);color:#3a352a;border-radius:12px;padding:20px 22px;margin:14px 0;border:1px solid var(--paper-line);
  font-family:'Pretendard Variable',Pretendard,system-ui,sans-serif;font-size:14.5px;line-height:1.85;box-shadow:0 2px 12px #26272e0c}
.doc h4{margin:0 0 4px;font-size:11px;letter-spacing:.16em;color:var(--accent2);font-family:inherit;font-weight:700}
.doc h5{margin:0 0 12px;font-size:16px;font-weight:700;font-family:system-ui}
.doc .head{margin:0 0 12px;white-space:pre-line;font-weight:600}
.doc p{margin:0 0 11px;position:relative;padding-left:26px}.doc p:last-child{margin:0}
.doc .pn{position:absolute;left:0;top:2px;font-size:10px;color:#b3ab97;font-weight:700}
.doc strong{background:#dff0e9;padding:1px 3px;border-radius:3px;font-weight:700;color:#2f6b5c}
.doc .tr{display:block;margin-top:6px;font-family:'Pretendard',system-ui;font-size:13.5px;
  line-height:1.75;color:#6b6252;padding-left:11px;border-left:2px solid #cfc4a0}
.doc .tr strong{background:#e8f0ec;color:#3f7767}
.docpin{position:sticky;top:47px;z-index:30;background:var(--bg);padding:10px 0 8px;margin:0 -4px;
  box-shadow:0 8px 12px -8px #26272e12}
.docpin .scroller{max-height:36vh;overflow-y:auto;padding:0 4px;border-radius:12px}
.docpin .scroller::-webkit-scrollbar{width:6px}
.docpin .scroller::-webkit-scrollbar-thumb{background:var(--line2);border-radius:3px}
.pintop{display:flex;align-items:center;gap:8px;padding:0 2px 6px}
.pintop span{font-size:11px;color:var(--dim2);flex:1}
.vgrid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:10px 0}
@media(max-width:560px){.vgrid{grid-template-columns:1fr}}
.vcard{background:var(--card);border:1px solid var(--line);border-radius:11px;padding:12px 14px;text-align:left;box-shadow:0 1px 2px #26272e08}
.vcard b{display:block;font-size:15px;font-family:'Pretendard Variable',Pretendard,system-ui,sans-serif;color:var(--ink)}
.vcard span{display:block;font-size:13px;color:var(--ink2);margin-top:1px}
.vcard em{display:block;font-size:11.5px;color:var(--dim2);font-style:normal;margin-top:5px;line-height:1.5}
.qhead{display:flex;align-items:center;gap:9px;margin:20px 0 12px;font-size:12px;color:var(--dim2)}
.qhead .tag{background:var(--accent-soft);color:var(--accent2);padding:4px 10px;border-radius:999px;font-size:11px;font-weight:700}
.qhead .tag:empty{display:none}
.qhead .prog{margin-left:auto;font-variant-numeric:tabular-nums}
.qtext{font-size:17px;line-height:1.8;margin:0 0 16px;font-family:'Pretendard Variable',Pretendard,system-ui,sans-serif;color:var(--ink)}
.opts{display:flex;flex-direction:column;gap:9px}
.opt{display:flex;gap:12px;align-items:flex-start;padding:13px 15px;border-radius:12px;background:var(--card);
  border:1.5px solid var(--line);text-align:left;width:100%;font-size:15px;line-height:1.6;transition:.13s}
.opt:not(:disabled):hover{border-color:var(--accent);background:var(--accent-soft)}
.opt .k{flex:none;width:22px;height:22px;border-radius:7px;border:1.5px solid var(--line2);display:grid;
  place-items:center;font-size:11px;font-weight:700;color:var(--dim);margin-top:1px}
.opt.ok{border-color:var(--ok);background:#eaf6f0}.opt.ok .k{background:var(--ok);border-color:var(--ok);color:#fff}
.opt.no{border-color:var(--no);background:#fdeeee}.opt.no .k{background:var(--no);border-color:var(--no);color:#fff}
.opt.mute{opacity:.45}
.expl{margin-top:14px;padding:15px 18px;border-radius:12px;background:var(--accent-soft);border-left:3px solid var(--accent);
  font-size:14.5px;line-height:1.8;color:var(--ink2)}
.advread{white-space:pre-line;font-size:15.5px;line-height:1.95;color:var(--dim);font-family:'Pretendard Variable',Pretendard,system-ui,sans-serif;
  padding-left:14px;border-left:2px solid #2a2d3a;margin-bottom:14px}
.advcur{white-space:pre-line;font-size:17px;line-height:2;color:var(--ink);font-family:'Pretendard Variable',Pretendard,system-ui,sans-serif;margin-bottom:14px}
.advcur .blank{display:inline-block;min-width:80px;border-bottom:2.5px solid var(--accent);text-align:center;color:var(--accent2);font-weight:700;padding:0 7px}
.advbar{display:flex;gap:4px;margin-bottom:14px}
.advbar i{flex:1;height:3px;border-radius:2px;background:var(--line)}.advbar i.fill{background:var(--accent)}
.btn{display:block;width:100%;padding:15px;border-radius:13px;background:var(--accent);color:#fff;font-weight:700;font-size:15.5px;margin-top:20px;box-shadow:0 2px 10px #4aa8c930;transition:.15s}
.btn:hover{background:var(--accent2);box-shadow:0 4px 14px #4aa8c945}
.btn.ghost{background:var(--card);border:1.5px solid var(--line);color:var(--ink2);box-shadow:none}
.btn.ghost:hover{border-color:var(--accent);color:var(--accent2);background:var(--accent-soft)}
.btn2{display:flex;gap:9px;margin-top:20px}.btn2 .btn{margin-top:0}
a.btn{text-decoration:none;text-align:center}
/* 문항 옆 의견 링크 — 해설이 열린 뒤에만 그려진다 */
.fb{display:inline-block;margin-top:9px;font-size:12px;color:var(--dim2);text-decoration:none}
.fb:hover{color:var(--dim);text-decoration:underline}
.result{text-align:center;padding:32px 0 10px}
.result .big{font-size:52px;font-weight:800;color:var(--accent2);line-height:1}
.result .sub{color:var(--dim);font-size:14px;margin-top:8px}
.ring{display:flex;gap:5px;justify-content:center;margin:20px 0;flex-wrap:wrap}
.ring i{width:9px;height:9px;border-radius:50%;background:var(--line2)}
.ring i.ok{background:var(--mint)}.ring i.no{background:var(--no)}
/* 형광펜 — 고른 자리에 뜨는 작은 막대와 그어진 자국.
   자국은 노란 기가 도는 배경만 둔다. 글자색은 그대로라 읽는 결이 안 바뀐다 */
.hl{background:#fdf3c7;color:inherit;border-radius:2px;padding:0 1px}
.hlbar{position:fixed;z-index:220;display:flex;gap:4px;padding:4px;border-radius:11px;
  background:var(--ink);box-shadow:0 4px 14px #26272e40}
.hlbar button{color:#fff;font-size:12.5px;font-weight:600;padding:7px 12px;border-radius:8px;white-space:nowrap}
.hlbar button:hover{background:#ffffff22}
.hlbar button.off{color:#ffd9d9}

/* 낱말 탭 — 이 작품이 이미 가르친 낱말에만 밑줄이 그어진다.
   글자색은 그대로 두고 아래 점선만 둔다. 읽는 흐름을 끊지 않으려는 것이다 */
.vw{font-weight:inherit;border-bottom:1px dotted var(--line2);cursor:pointer}
/* 사전에만 있는 낱말 — 「눌러도 된다」는 안내일 뿐이라 새 단어보다 훨씬 옅게.
   본문 낱말의 절반을 넘게 걸리므로 조금만 진해도 지뢰밭이 된다 */
.vd{font-weight:inherit;border-bottom:1px dotted transparent;cursor:pointer;
  background-image:linear-gradient(to right,var(--line) 40%,transparent 0);
  background-size:4px 1px;background-repeat:repeat-x;background-position:0 100%}
.vd:hover{background-image:none;border-bottom-color:var(--accent);background-color:var(--accent-soft)}
.vw:hover{border-bottom-color:var(--accent);background:var(--accent-soft)}
.vpop{position:fixed;inset:0;z-index:200;background:#26272e4d;display:flex;align-items:flex-end;justify-content:center}
.vpop-in{background:var(--card);border-radius:18px 18px 0 0;padding:22px 20px 26px;width:100%;max-width:720px;
  box-shadow:0 -4px 24px #26272e1f;position:relative;animation:vup .16s ease-out}
@keyframes vup{from{transform:translateY(14px);opacity:.6}to{transform:translateY(0);opacity:1}}
.vpop-in b{font-size:22px;font-weight:800;color:var(--ink)}
.vpop-in p{margin:6px 0 0;font-size:16px;color:var(--ink2)}
.vpop-in small{display:block;margin-top:8px;font-size:13px;color:var(--dim);line-height:1.6}
.vpop-ep{margin-top:10px;font-size:11.5px;color:var(--accent2);font-weight:600}
.vform{display:inline-block;margin-left:8px;font-size:12px;color:var(--dim2)}
/* ── 대원정 — 낱말 하나를 크게 보여 주고 스스로 채점한다 ── */
/* 쪽지의 발음 단추 — 표제어 옆에 작게 */
.vnone{margin:12px 0 0;font-size:14px;color:var(--dim)}
.vsay{margin-left:9px;width:30px;height:30px;border-radius:999px;border:1.5px solid var(--line);
  background:var(--card);color:var(--accent2);font-size:14px;line-height:1;vertical-align:middle}
.vsay:hover{border-color:var(--accent);background:var(--accent-soft)}
.gword{font-size:clamp(30px,9vw,44px);font-weight:800;letter-spacing:-.01em;text-align:center;
  margin:34px 0 22px;word-break:break-word}
.gmean{font-size:clamp(19px,5.4vw,24px);font-weight:700;color:var(--accent2);text-align:center;
  margin:0 0 10px;line-height:1.55}
.gsrc{font-size:12.5px;color:var(--dim);text-align:center;margin:0 0 10px;line-height:1.6}
.btn.gbig{padding:22px 17px;font-size:17px;line-height:1.4}
.btn.gbig small{display:block;font-size:12.5px;font-weight:500;opacity:.72;margin-top:5px}
.btn.gstart{margin-top:22px}
/* 대원정 화면의 소리 단추 — 오른쪽 끝에 붙인다 */
.vtop.gtop{padding:6px 2px 0;justify-content:flex-end}
/* 몰랐어요·알고 있었어요는 나란히 둔다 — 위아래로 두면 위 단추가 「먼저 고를 것」처럼 보인다 */
.gpair{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:20px 0 0}
.gpair .btn{margin:0}
.ghelp{font-size:12.5px;color:var(--dim);text-align:center;margin:8px 0 0;line-height:1.6}
.vpop-ep.dim{color:var(--dim);font-weight:500}

/* 쪽지 안의 「이 문장」 — 낱말 뜻이 없을 때 여기가 유일한 실마리다 */
.vsent{margin:11px 0 0;padding:10px 12px;background:var(--bg);border:1px solid var(--line);
  border-radius:10px;font-size:14px;line-height:1.7;color:var(--ink2)}
.vsent span{display:block;font-size:10.5px;letter-spacing:.09em;color:var(--dim);
  margin-bottom:5px;font-weight:700}
.vpop-row{display:flex;gap:8px}
.vpop-row .btn{margin-top:14px}
.vpop-x{position:absolute;top:12px;right:14px;font-size:22px;color:var(--dim2);padding:4px 8px;line-height:1}
.vpop-x:hover{color:var(--ink2)}
.vdel{margin-top:9px;font-size:12px;color:var(--dim);border:1px solid var(--line);border-radius:8px;padding:4px 10px}
.vdel:hover{color:var(--no);border-color:var(--no)}
@media (min-width:640px){.vpop{align-items:center}.vpop-in{border-radius:18px;max-width:420px}}

/* 화마다 별점 — 결과 화면(step 4)에서만 뜬다.
   색은 기존 변수만 쓴다. 별이 켜지는 색은 --accent2 로 두어 점수 숫자와 같은 결로 읽히게 했다 */
.rate{text-align:center;margin:22px 0 4px;padding:18px 0 16px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.rate p{margin:0 0 10px;font-size:14px;color:var(--dim)}
.starrow{display:flex;gap:0;justify-content:center;touch-action:manipulation;user-select:none;-webkit-user-select:none}
/* 별을 하나하나 맞혀 누르기 어려워서(사장님 2026-10-07: 자꾸 1점이 된다) 줄 전체가 누른 가로 위치로 점수를 정한다 — 아래 스크립트(starPick) */
.star{font-size:34px;line-height:1;color:var(--line2);padding:6px 5px;min-width:48px;min-height:48px;transition:.12s;background:none;pointer-events:none}
.star:hover{transform:scale(1.12)}
.star.on{color:var(--accent2)}
.ravg{margin-top:10px;font-size:13px;color:var(--dim2)}
.rate .rstar{color:var(--accent2);font-size:16px}     /* 작품 페이지 — 평균을 먼저 보여 준다 */
.wcard{background:var(--card);border:1px solid var(--line);border-radius:13px;padding:16px 18px;margin-bottom:11px;text-align:left;box-shadow:0 1px 3px #26272e08}
.wcard .meta{font-size:11px;color:var(--accent2);margin-bottom:9px;font-weight:600}
.wcard .q{font-size:15px;font-family:'Pretendard Variable',Pretendard,system-ui,sans-serif;line-height:1.7;margin-bottom:11px;color:var(--ink)}
.wcard .row{font-size:13.5px;line-height:1.65;margin:4px 0;display:flex;gap:8px}
.wcard .row b{flex:none;font-size:11px;padding:2px 7px;border-radius:5px;height:fit-content;margin-top:2px}
.wcard .row.mine b{background:#fdeeee;color:#c25a5a}
.wcard .row.ans b{background:#eaf6f0;color:#3d8a68}
.wcard .ex{font-size:13px;color:var(--dim);margin-top:10px;padding-top:10px;border-top:1px solid var(--line);line-height:1.7}
.empty{text-align:center;padding:60px 20px;color:var(--dim2)}
.fade{animation:f .28s ease}@keyframes f{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}

.advread{color:inherit!important;opacity:1!important}
.advreadk{color:inherit!important;opacity:.72!important}

/* ── 작품별 추가 ─────────────────────────────
   대리님에는 없고 「제 값은 제가 정합니다」에 필요한 것들.
   문서 표(dtab) · Part 6 표시 · 단계 막대 · 새 단어 가리기 · 고급 이어 읽기 */

.wl{font-size:12.5px;color:var(--dim);padding:6px 10px;border-radius:8px;text-decoration:none;
  white-space:nowrap;border:1px solid transparent;transition:.15s}
.wl:hover{color:var(--mint);border-color:#cfe9e0;background:var(--mint-soft)}
/* 작품 대문 — 대리님 read.html 과 같은 값 */
.cover-art{margin:6px 0 22px;border-radius:16px;overflow:hidden;border:1px solid var(--line);
  box-shadow:0 4px 20px #26272e14;position:relative;background:var(--card)}
.dtab{width:100%;border-collapse:collapse;margin:10px 0;font-size:14px}
.dtab th,.dtab td{border:1px solid var(--line);padding:6px 9px;text-align:left;vertical-align:top}
.dtab th{background:rgba(128,128,128,.10);font-weight:600}
.dtab .tr{display:block;font-size:12px;opacity:.72;margin-top:2px}
.p6dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--accent);margin-left:7px;vertical-align:middle}
.steps{display:flex;gap:6px;margin:22px 0 20px}
.steps i{flex:1;height:3px;border-radius:2px;background:#e6e8ec}
.steps i.on{background:var(--accent)}
.doc.p6{border-left:4px solid var(--accent)}
.pmark{display:inline-block;min-width:50px;text-align:center;background:var(--accent-soft);
  border-bottom:2px solid var(--accent);border-radius:3px;color:var(--accent2);font-weight:700;
  padding:0 6px;margin:0 2px;font-size:12.5px}
.blank{display:inline-block;min-width:66px;text-align:center;border-bottom:2px solid var(--accent);
  color:var(--accent2);font-weight:700;padding:0 6px;margin:0 2px}
.docpin .pintop{display:flex;align-items:center;gap:8px;padding:0 2px 8px}
.docpin .pintop span{font-size:11.5px;color:var(--dim);flex:1}
.docpin .doc{margin:0 0 10px;font-size:14.5px;line-height:1.85;padding:16px 18px}
.qtext .ctxp{display:inline-block;font-size:10.5px;font-weight:700;color:var(--accent2);
  background:var(--accent-soft);padding:2px 7px;border-radius:5px;margin-right:8px;vertical-align:2px}
.opt:hover{border-color:var(--line2)}
.opt:disabled{cursor:default}
[hidden]{display:none!important}
.resetrow{margin-top:26px;text-align:center}
.reset{font-size:11.5px;color:var(--dim2);padding:6px 12px;border-radius:999px;
  border:1px solid var(--line);background:transparent}
.reset:hover{color:var(--no);border-color:var(--no)}
.vtop{display:flex;align-items:center;gap:8px;padding:0 2px 9px}
.vtop span{font-size:12px;color:var(--dim);flex:1}
.vcard:last-child{border-bottom:none}
.vrow{display:flex;align-items:baseline;gap:10px}
.vdot{flex:1;border-bottom:1px dotted var(--line2);transform:translateY(-4px);min-width:24px}
.vcard i{font-style:normal;font-size:13.5px;color:var(--ink2);flex:none;text-align:right}
.vcard i.masked{color:transparent;background:#eceef1;border-radius:4px;user-select:none}
.vcard i.masked:hover{color:var(--ink2);background:none}
.vcard small{display:block;font-size:11.5px;color:var(--dim2);line-height:1.65;margin-top:6px}
/* 단어장 낱말 — 누르면 발음. 글자처럼 보이되 ♪ 로 누를 곳임을 알린다 */
.vcard .vword{display:inline-flex;align-items:center;gap:7px;margin:0;padding:2px 0;border:0;background:none;
  font:inherit;color:inherit;text-align:left;cursor:pointer;min-width:0}
.vcard .vword b{display:inline;word-break:break-word}
.vcard .vword .vplay{display:inline-flex;align-items:center;justify-content:center;flex:none;margin:0;
  width:22px;height:22px;border-radius:999px;border:1.5px solid var(--line);background:var(--card);
  color:var(--accent2);font-size:11px;line-height:1}
.vcard .vword:hover .vplay,.vcard .vword:active .vplay{border-color:var(--accent);background:var(--accent-soft)}
.saynote{position:fixed;left:50%;top:calc(66px + env(safe-area-inset-top,0px));transform:translateX(-50%);z-index:80;
  max-width:calc(100% - 32px);padding:9px 15px;border-radius:999px;background:#26272e;color:#fff;
  font-size:13px;line-height:1.4;text-align:center;box-shadow:0 6px 18px #26272e33}
@media(max-width:420px){.vrow{flex-wrap:wrap}.vdot{min-width:16px}}
.advread .filled{color:var(--mint);font-weight:700}
.result p{color:var(--dim);font-size:14px;margin:6px 0 0}
.sec{font-size:11px;letter-spacing:.18em;color:var(--dim);font-weight:700;margin:28px 0 11px;padding-bottom:8px;border-bottom:1px solid var(--line)}

/* ── 좁은 화면 상단바 ─────────────────────────
   ← 목록 · ↑ · 제목 · 배지 · 단어 원정대 · 단어장 · 오답노트 일곱이 360px 에 다 들어가면
   서로 붙어서 잘못 눌린다. 좁아질수록 하나씩 덜어낸다.
   덜어내는 순서는 급한 정도의 역순이다 — 단어 원정대(외부 링크)가 먼저,
   그다음 레벨 배지(대문에서 다시 고를 수 있다).
   나가는 길과 단어장·오답은 끝까지 남긴다 — 320px 에서도 다 들어간다(실측) */
.lv{white-space:nowrap;flex:none;max-width:9em;overflow:hidden;text-overflow:ellipsis}
.bar-in button{flex:none}
.bar h1{min-width:3em}
@media(max-width:560px){
  .bar-in{gap:7px;padding:11px 14px}
  .wl{display:none}
}
@media(max-width:400px){
  .lv{display:none}
  .bar-in{gap:5px;padding:11px 12px}
  .bar button{padding:6px 7px}
}
/* 아주 좁은 화면(320px 짜리 옛 기기)에서는 「오답노트」를 「오답」으로 줄인다.
   안 줄이면 회차 제목이 「1화 · …」로 눌린다(실측). 360px 이상은 그대로 다 나온다 */
@media(max-width:345px){ .bar .cut{display:none} }

/* ── 법적 고지 푸터 — 전 페이지 공용 ──────────────────
   네이버 비즈채널 심사용 사업자 정보 · 약관 링크. 본문 아래, #app 밖에
   정적으로 둔다 — render() 가 다시 그려도 지워지지 않아야 한다 */
.legalfoot{max-width:720px;margin:8px auto 0;padding:18px 18px 30px;
  border-top:1px solid var(--line);font-size:11.5px;line-height:1.85;
  color:var(--dim2);text-align:center}
.legalfoot .lf-row{display:flex;justify-content:center;flex-wrap:wrap;
  column-gap:8px;word-break:keep-all}
.legalfoot .lf-row .sep{opacity:.55}
.legalfoot a{color:inherit;text-decoration:none}
.legalfoot a:hover{text-decoration:underline}
.legalfoot .lf-links{margin-top:6px}
.legalfoot .lf-links a{display:inline-block;padding:6px 4px;margin:-6px -4px}
.legalfoot .lf-priv{font-weight:700;color:var(--ink2)}
/* ── 듣기(기기 음성) — 2026-09-13 ── */
.rdbar{position:fixed;left:0;right:0;bottom:0;z-index:90;background:rgba(255,255,255,.97);backdrop-filter:blur(14px);
  border-top:1px solid var(--line);box-shadow:0 -6px 20px #26272e12;padding:10px 16px calc(10px + env(safe-area-inset-bottom))}
.rdbar .rdin{max-width:720px;margin:0 auto;display:flex;align-items:center;gap:10px}
.rdbar .rdplay{flex:none;width:44px;height:44px;border-radius:50%;background:var(--accent);display:grid;place-items:center;
  box-shadow:0 2px 8px #4aa8c940}
/* ❚❚ — 읽는 중(누르면 잠깐 멈춤) */
.rdbar .rdplay i{width:13px;height:14px;border-left:4px solid #fff;border-right:4px solid #fff;box-sizing:border-box}
/* ▶ — 멈춘 뒤(누르면 이어 듣기) */
.rdbar .rdplay.is-paused i{width:0;height:0;border-style:solid;border-width:8px 0 8px 13px;
  border-color:transparent transparent transparent #fff;margin-left:4px}
.rdbar .rdx{flex:none;width:34px;height:34px;border-radius:50%;color:var(--dim);font-size:15px;background:transparent}
.rdbar .rdx:hover{background:#f1efe9;color:var(--ink2)}
.rdbar .rdinfo{flex:1;min-width:0;line-height:1.35}
.rdbar .rdinfo b{display:block;font-size:13.5px;color:var(--ink)}
.rdbar .rdinfo span{display:block;font-size:12px;color:var(--dim);font-variant-numeric:tabular-nums}
.rdbar .rdchip{position:relative;flex:none;padding:8px 13px;border-radius:999px;border:1px solid var(--line);
  background:var(--card);font-size:13px;font-weight:700;color:var(--ink2);white-space:nowrap}
.rdbar .rdacc{max-width:118px;overflow:hidden;text-overflow:ellipsis}
/* 발음 고르기 — 재생 줄 바로 위에 뜨는 작은 창 */
.rdsheet{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(76px + env(safe-area-inset-bottom));z-index:91;
  width:min(92vw,420px);background:var(--card);border:1px solid var(--line);border-radius:16px;
  box-shadow:0 10px 30px #26272e26;padding:12px 14px 14px}
.rdsh-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.rdsh-h b{font-size:14px;color:var(--ink)}
.rdsh-h button{width:30px;height:30px;border-radius:50%;color:var(--dim)}
.rdsh-acc{display:flex;flex-wrap:wrap;gap:7px}
.rdsh-acc button,.rdsh-v button{padding:8px 14px;border-radius:999px;border:1px solid var(--line);background:var(--card);
  font-size:13.5px;font-weight:700;color:var(--ink2)}
.rdsh-acc button.on,.rdsh-v button.on{background:var(--accent);border-color:var(--accent);color:#fff}
.rdsh-v{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin-top:12px;padding-top:12px;border-top:1px dashed var(--line)}
.rdsh-v span{font-size:12px;color:var(--dim);margin-right:4px}
.rdsh-v button{min-width:40px;padding:7px 0}
body.rd-on .wrap{padding-bottom:150px}
::highlight(rdsent){background-color:#e1f0fb}
::highlight(tts){background-color:#9fd2f2}
.tools .tbtn+.tbtn{margin-left:8px}
/* 빈칸 모드 듣기 — 이야기 전체를 답을 넣어 펼친 화면 */
.advlnote{font-size:12.5px;color:var(--dim);margin:6px 0 14px}
.advlisten .story{margin:0 0 .9em;white-space:pre-line}
.afill{text-decoration:none;border-bottom:2px solid var(--accent);color:var(--accent2);font-weight:700}

.rdsh-d{margin:10px 0 0;font-size:11px;color:var(--dim2)}
.rdsh-d summary{cursor:pointer}
.rdsh-d ul{margin:6px 0 0;padding-left:16px;max-height:140px;overflow:auto}
.rdsh-d li{margin:2px 0;color:var(--ink2)}
.rdsh-d li span{color:var(--dim2)}
.rdsh-d p{margin:6px 0 0}
/* 단어장에 담은 낱말 = 형광펜. 역할 색 위에서도 보이게 형광 노랑을 진하게 */
.vw.inbag,.vd.inbag{background:#ffe95c;color:var(--ink);border-bottom-color:transparent;border-radius:3px;
  box-shadow:0 0 0 1px #ffe95c}
/* 화 끝 부록 — 「오늘의 문법」 강의·단어장 (reader.html lessonHTML). lesson·wordbook 이 있는 화에만 그려진다 */
.lesson{margin:22px 0 6px;padding:18px 20px;border-radius:12px;background:var(--accent-soft);border-left:3px solid var(--accent);color:var(--ink2)}
.lesson .lhead{font-size:11.5px;font-weight:700;letter-spacing:.06em;color:var(--accent2);margin:0 0 4px}
.lesson .lhead+.vgrid{margin-top:6px}
.lesson .vgrid+.lhead,.lesson p+.lhead{margin-top:18px}
.lesson .lsub{font-size:13px;letter-spacing:0;color:var(--ink);margin:14px 0 6px}
.lesson h4{font-size:18px;font-weight:700;color:var(--ink);margin:0 0 10px}
.lesson p{font-size:14.5px;line-height:1.8;margin:0 0 8px}
.lesson p.lx{font-family:Georgia,'Times New Roman',serif;font-size:15.5px;color:var(--ink);background:var(--card);border-radius:8px;padding:7px 12px}
.lesson code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.92em;background:var(--card);border-radius:4px;padding:1px 5px}

/* ── 다이글롯 레벨 (2026-09-19) — 새 방식으로 바꾼 화의 본문 ── */
.story.dgp{margin:0 0 1.15em}
/* 바꿔 넣은 영어 낱말 — 누르면 이 작품 용어 사전의 뜻이 뜬다 */
.vw.dgw{font-weight:600;color:var(--accent2);border-bottom:1px dotted var(--accent)}
.story.en .vw.dgw{font-weight:inherit;color:inherit;border-bottom-color:var(--line2)}
/* 원고 속 문서(인용 · 표) — 줄바꿈은 <br> 로 이미 넣었다 */
.story.dgdoc{white-space:normal;background:var(--paper);border:1px solid var(--paper-line);border-radius:12px;
  padding:14px 16px;font-size:14.5px;line-height:1.85;color:#3a352a;overflow-x:auto}
.story.dgdoc .dtab{margin:6px 0}
.dgscene{text-align:center;color:var(--dim2);letter-spacing:.4em;margin:6px 0 22px;font-size:13px}
/* 이야기 문제 — 기본은 꺼 둔다 */
.dgqz{margin:30px 0 6px;padding-top:18px;border-top:1px dashed var(--line2)}
.dgqz .iq .qstem{font-size:15.5px;background:var(--paper);border:1px solid var(--paper-line);border-radius:10px;padding:10px 13px}
/* 대문 화 목록 — 새 방식으로 바꾼 화 */
.dgchip{display:inline-block;margin-left:7px;font-size:10.5px;font-weight:700;color:var(--mint);background:var(--mint-soft);padding:1px 7px;border-radius:999px;vertical-align:2px}

/* ── 댓글 (2026-09-20) — 화 끝, 별점 아래 ── */
.cmts{margin:26px 0 6px;padding-top:20px;border-top:1px dashed var(--line2)}
.cmts h4{margin:0 0 12px;font-size:14px;font-weight:700;color:var(--ink2)}
.cmwrite textarea{width:100%;box-sizing:border-box;padding:12px 14px;border:1px solid var(--line);
  border-radius:12px;background:var(--card);color:var(--ink);font:inherit;font-size:14.5px;line-height:1.7;resize:vertical}
.cmwrite textarea:focus{outline:none;border-color:var(--accent)}
.cmrow{display:flex;align-items:center;gap:10px;margin:8px 0 18px}
.cmrow .btn{margin:0;width:auto;padding:10px 18px;font-size:14px}
.cmlen{flex:1;font-size:12px;color:var(--dim2)}
.cmnote{font-size:13px;color:var(--dim);margin:0 0 14px;line-height:1.7}
.cmt{padding:12px 0;border-top:1px solid var(--line)}
.cmt:first-of-type{border-top:none}
.cmmeta{display:flex;align-items:center;gap:9px;margin-bottom:5px}
.cmmeta b{font-size:13px;font-weight:700;color:var(--ink2)}
.cmmeta span{font-size:11.5px;color:var(--dim2)}
.cmdel{margin-left:auto;font-size:11.5px;color:var(--dim2);padding:3px 8px;border-radius:8px;border:1px solid var(--line)}
.cmdel:hover{color:var(--no);border-color:var(--no)}
.cmt p{margin:0;font-size:14.5px;line-height:1.8;color:var(--ink);white-space:pre-line}

/* 별점 + 댓글 한 칸 — 이야기 끝과 결과 화면 (2026-09-20) */
.endbox{margin-top:26px;border:1px solid var(--line);border-radius:14px;background:var(--card);padding:18px 16px 6px}
.endbox .rate{margin:0 0 4px;padding:0;border:none;background:none}
.endbox .cmts{margin-top:14px;padding-top:16px;border-top:1px solid var(--line)}
/* 마지막 화가 아니면 위에 별점 칸이 없다 — 그때는 가르는 줄도 없어야 한다 */
.endbox .cmts:first-child{margin-top:0;padding-top:0;border-top:none}

/* ── 본문 읽기 단계 전환 (reader.html paintLv) — 한글 · 초급 · 중급 · 고급 ──
   넓은 화면은 네 칸 단추, 640px 아래는 「초급 ▾」 한 칸을 눌러 펼친다.
   바가 이미 꽉 차 있어(목록·↑·제목·단어장·오답) 좁은 화면에 네 칸을 다 두면 제목이 사라진다 */
.lvsw{position:relative;flex:none}
.lvseg{display:flex;background:#f1efe9;border-radius:9px;padding:2px}
.bar .lvseg button{font-size:12px;color:var(--dim);padding:4px 9px;border-radius:7px}
.bar .lvseg button:hover{background:none;color:var(--ink2)}
.bar .lvseg button[aria-pressed=true]{background:var(--card);color:var(--accent2);font-weight:700;box-shadow:0 1px 2px #26272e18}
.bar .lvbtn{display:none;font-size:12.5px;font-weight:700;color:var(--accent2);background:var(--accent-soft);border-radius:99px;padding:4px 10px}
.lvmenu{position:absolute;right:0;top:calc(100% + 8px);z-index:60;display:flex;flex-direction:column;min-width:104px;padding:5px;
  background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:0 8px 24px #26272e22}
.lvmenu[hidden]{display:none}
.bar .lvmenu button{text-align:left;padding:9px 12px;border-radius:8px;font-size:14px;color:var(--ink)}
.bar .lvmenu button[aria-checked=true]{color:var(--accent2);font-weight:700;background:var(--accent-soft)}
@media(max-width:640px){ .lvseg{display:none} .bar .lvbtn{display:inline-block} }