/* [WF_UI_V1] 단어의 족보 워크북 — 화면 공용 스타일. 색·글꼴은 송성태 영문법 워크북 v2 와 같은 계열 */
:root{
  --bg:#F6F3EC; --paper:#FFFDF8; --fg:#1F2A44; --mute:#6B7183; --line:#D9D3C4;
  --accent:#2F6F6A; --accent-soft:#DCEBE8; --ok:#2E7D5B; --ok-soft:#DFF0E7; --bad:#B0543A; --bad-soft:#F6E0DA;
  --gold:#A87A1E; --gold-soft:#F4E8C8; --root:#B0543A; --root-soft:#F3E3DC;
  --sans:"Noto Sans KR",system-ui,-apple-system,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  --serif:"Noto Serif",Georgia,"Times New Roman",serif;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --bg:#1A1F2E; --paper:#222838; --fg:#EDE7DA; --mute:#A2A8B8; --line:#3A4156;
  --accent:#7CC4BA; --accent-soft:#233A3A; --ok:#7FC8A4; --ok-soft:#24392F; --bad:#E08A6F; --bad-soft:#44302B;
  --gold:#E2BE6A; --gold-soft:#3D3523; --root:#E08A6F; --root-soft:#3E2E2B; color-scheme:dark } }
:root[data-theme="dark"]{
  --bg:#1A1F2E; --paper:#222838; --fg:#EDE7DA; --mute:#A2A8B8; --line:#3A4156;
  --accent:#7CC4BA; --accent-soft:#233A3A; --ok:#7FC8A4; --ok-soft:#24392F; --bad:#E08A6F; --bad-soft:#44302B;
  --gold:#E2BE6A; --gold-soft:#3D3523; --root:#E08A6F; --root-soft:#3E2E2B; color-scheme:dark }

*{box-sizing:border-box}
html{scroll-padding-top:80px;-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--fg);font-family:var(--sans);font-size:16px;line-height:1.65;margin:0;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-bottom:4em;word-break:keep-all;overflow-wrap:anywhere}
main{max-width:40em;margin:0 auto}
a{color:var(--accent)}
button{font:inherit;cursor:pointer;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
[hidden]{display:none!important}
.en,.wd{font-family:var(--serif)}
.mute{color:var(--mute)}

/* 상단 줄 */
.top{display:flex;justify-content:space-between;align-items:center;gap:.6em 1em;flex-wrap:wrap;padding:.9em 0;border-bottom:1px solid var(--line);font-size:.85em}
.top a{color:var(--mute);text-decoration:none}
.top a:hover{color:var(--accent)}
.top .book{font-weight:700;color:var(--fg)}
.top nav{display:flex;gap:1em}

/* 머리 */
header.hd{padding:1.6em 0 1em}
.kicker{font-size:.82em;letter-spacing:.06em;color:var(--accent);font-weight:700}
header.hd h1{margin:.15em 0 .1em;font-family:var(--serif);font-size:1.9em;line-height:1.25;font-weight:600;text-wrap:balance}
header.hd h1.ko{font-family:var(--sans);font-size:1.5em;font-weight:700}
.gloss{font-family:var(--serif);font-style:italic;color:var(--mute);font-size:1.05em}
.gloss .gk{font-family:var(--sans);font-style:normal;color:var(--fg);font-weight:500;margin-right:.35em}
.intro{margin:.8em 0 0;font-size:.95em}
.meta{margin:.8em 0 0;font-size:.85em;color:var(--mute)}
.wordlist{margin:.6em 0 0}
.wordlist p{font-family:var(--serif)}

h2.sec{font-size:.82em;letter-spacing:.12em;color:var(--mute);margin:2em 0 .8em;display:flex;align-items:center;gap:.8em;font-weight:500}
h2.sec::after{content:"";flex:1;height:1px;background:var(--line)}

/* 진행 줄 */
.bar{position:sticky;top:0;z-index:5;background:var(--bg);padding:.55em 0;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:.8em;font-size:.85em}
.bar .track{flex:1;height:6px;border-radius:3px;background:var(--line);overflow:hidden;display:flex}
.bar .track i{display:block;height:100%}
.bar .track .r{background:var(--ok)}
.bar .track .w{background:var(--bad)}
.bar b{font-weight:700}

/* 다시 만나기 안내 */
.due{border:1px solid var(--gold);background:var(--gold-soft);color:var(--fg);border-radius:.4em;padding:.7em 1em;margin:1em 0 0;font-size:.92em}
.due b{color:var(--gold)}

/* 문항 */
.q{background:var(--paper);border:1px solid var(--line);border-radius:.5em;padding:1em 1.1em;margin:0 0 .9em;display:grid;gap:.65em;scroll-margin-top:70px}
.q.ok{border-color:var(--ok)}
.q.bad{border-color:var(--bad)}
.q-head{display:flex;gap:.5em;align-items:center;flex-wrap:wrap;font-size:.8em;color:var(--mute)}
.q-n{font-family:var(--serif);color:var(--accent);font-weight:600;font-size:1.15em}
.tag{border:1px solid var(--line);border-radius:1em;padding:0 .6em}
.tag.again{border-color:var(--gold);color:var(--gold);background:var(--gold-soft);font-weight:700}
.tag.book{border-color:var(--accent);color:var(--accent)}
.q-word{font-family:var(--serif);font-size:1.6em;line-height:1.2;font-weight:600}
.q-word small{font-family:var(--sans);font-size:.5em;color:var(--mute);font-weight:400;margin-left:.4em}
.q-ask{margin:0;font-size:.98em}
.q-sent{margin:0;font-family:var(--serif);font-size:1.08em;line-height:1.7}
.blank{display:inline-block;min-width:4.5em;border-bottom:2px solid var(--accent);text-align:center;font-weight:600}
.peek{font-size:.85em}
.peek>summary{cursor:pointer;color:var(--mute);list-style:none;display:inline}
.peek>summary::-webkit-details-marker{display:none}
.peek>summary::before{content:"▸ "}
.peek[open]>summary::before{content:"▾ "}
.peek p{margin:.3em 0 0;color:var(--mute)}

.opts{display:grid;gap:.45em;grid-template-columns:1fr}
@media (min-width:520px){.opts.two{grid-template-columns:1fr 1fr}}
.opt{border:1px solid var(--line);background:var(--bg);border-radius:.4em;padding:.55em .85em;text-align:left;min-height:44px;line-height:1.45}
.opt.en{font-size:1.05em}
.opt:hover:not(:disabled){border-color:var(--accent)}
.opt:disabled{cursor:default}
.opt.pick{border-color:var(--bad);background:var(--bad-soft)}
.opt.right{border-color:var(--ok);background:var(--ok-soft);font-weight:700}

/* 조각(칩) */
.chips{display:flex;flex-wrap:wrap;gap:.35em;align-items:stretch}
.chip{display:inline-grid;grid-template-rows:auto auto;justify-items:center;border:1px solid var(--line);border-radius:.35em;background:var(--bg);padding:.25em .6em;min-width:2.6em;line-height:1.25}
.chip b{font-family:var(--serif);font-size:1.08em;font-weight:600}
.chip i{font-style:normal;font-size:.75em;color:var(--mute)}
.chip.root{border-color:var(--root);background:var(--root-soft)}
.chip.root b{color:var(--root)}
.chip.blank-chip b{color:var(--accent)}
.plus{color:var(--mute);align-self:center;font-size:.9em}
button.chip{min-height:44px}
button.chip:disabled{opacity:.3;cursor:default}
.slots{min-height:3.2em;padding:.4em;border:1px dashed var(--line);border-radius:.4em;display:flex;flex-wrap:wrap;gap:.35em;align-items:center}
.slots:empty::before{content:"조각을 누르면 여기에 순서대로 놓입니다";color:var(--mute);font-size:.82em}

.fill{display:flex;gap:.5em;flex-wrap:wrap;align-items:center}
.fill input{font:inherit;font-family:var(--serif);font-size:1.1em;padding:.45em .7em;border:1px solid var(--line);border-radius:.4em;background:var(--bg);color:var(--fg);min-width:0;flex:1 1 10em;min-height:44px}
.q.ok .fill input{border-color:var(--ok)}
.q.bad .fill input{border-color:var(--bad)}

.q-foot{display:flex;gap:.6em;align-items:center;flex-wrap:wrap}
.btn{border:1px solid var(--accent);background:var(--accent);color:#fff;border-radius:.4em;padding:.5em 1.15em;font-weight:500;min-height:44px;text-decoration:none;display:inline-flex;align-items:center}
:root[data-theme="dark"] .btn{color:#14201f}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .btn{color:#14201f} }
.btn.ghost{background:none;color:var(--accent)}
.btn:disabled{opacity:.45;cursor:default}
.verdict{font-weight:700}
.q.ok .verdict{color:var(--ok)}
.q.bad .verdict{color:var(--bad)}

/* 해설: 단어 카드 */
.card{border-top:1px solid var(--line);padding-top:.7em;display:grid;gap:.4em;font-size:.95em}
.card .hw{font-family:var(--serif);font-size:1.25em;font-weight:600}
.card .hw small{font-family:var(--sans);font-size:.62em;color:var(--mute);font-weight:400;margin-left:.35em}
.card .mean{font-weight:700}
.card .lit{margin:0}
.card .lit .h{color:var(--accent);margin:0 .25em}
.card .fam{font-size:.82em;color:var(--mute)}
.card .exd{font-size:1em}
.card .exd>summary{font-size:.92em;color:var(--accent);padding:.15em 0;min-height:32px;display:inline-flex;align-items:center;gap:.3em}
.card .exd .ex{margin-top:.4em}
.card .ex{display:grid;gap:.15em;padding:.45em .7em;border-left:2px solid var(--line)}
.card .ex .en{margin:0}
.card .ex .en mark{background:var(--accent-soft);color:inherit;border-radius:.15em;padding:0 .1em}
.card .ex .ko{margin:0;color:var(--mute);font-size:.92em}
.card .why{margin:0}

/* 결과 */
.result{background:var(--paper);border:1px solid var(--accent);border-radius:.5em;padding:1.1em 1.2em;margin:1.4em 0;display:grid;gap:.7em}
.result h3{margin:0;font-size:1.1em}
.score{font-family:var(--serif);font-size:2.2em;line-height:1;color:var(--accent)}
.score small{font-size:.45em;color:var(--mute);font-family:var(--sans)}
.missed{display:flex;flex-wrap:wrap;gap:.35em .8em;font-family:var(--serif)}
.missed a{color:var(--bad)}
.acts{display:flex;gap:.6em;flex-wrap:wrap}

/* 목차(부·첫 화면) */
.units{list-style:none;margin:0;padding:0;display:grid;gap:.4em}
.units a{display:grid;grid-template-columns:2.7em 1fr auto;gap:.2em .7em;align-items:center;text-decoration:none;color:var(--fg);background:var(--paper);border:1px solid var(--line);border-radius:.45em;padding:.6em .85em;min-height:48px}
.units a:hover{border-color:var(--accent)}
.units .no{font-family:var(--serif);color:var(--mute);font-size:.85em}
.units .t{font-family:var(--serif);font-weight:600}
.units .t.ko{font-family:var(--sans);font-weight:700}
.units .g{font-size:.8em;color:var(--mute);grid-column:2}
.units .st{grid-row:1/3;grid-column:3;font-size:.78em;color:var(--mute);text-align:right;white-space:nowrap}
.units .st.done{color:var(--ok);font-weight:700}
.units .st.dueing{color:var(--gold);font-weight:700}
.mini{height:4px;border-radius:2px;background:var(--line);overflow:hidden;grid-column:2/4;display:flex}
.mini i{display:block;height:100%}
.mini .r{background:var(--ok)}.mini .w{background:var(--bad)}

.parts{display:grid;gap:1.6em}
.part h2{margin:0 0 .15em;font-size:1.15em}
.part h2 small{font-size:.75em;color:var(--mute);font-weight:400;margin-left:.4em}
.part .sub{margin:0 0 .7em;font-size:.85em;color:var(--mute)}
.lock{display:inline-block;font-size:.72em;border:1px solid var(--line);border-radius:1em;padding:0 .55em;color:var(--mute);margin-left:.4em;vertical-align:.15em}
.free{border-color:var(--ok);color:var(--ok)}

.panel{background:var(--paper);border:1px solid var(--line);border-radius:.5em;padding:1em 1.1em;margin:1em 0;display:grid;gap:.5em}
.panel h3{margin:0;font-size:1em}
.panel p{margin:0;font-size:.92em}
.stat{display:flex;gap:1.4em;flex-wrap:wrap}
.stat div{display:grid}
.stat b{font-family:var(--serif);font-size:1.6em;line-height:1.1;color:var(--accent)}
.stat span{font-size:.78em;color:var(--mute)}
.duelist{display:flex;flex-wrap:wrap;gap:.4em}
.duelist a{font-size:.88em;border:1px solid var(--gold);color:var(--fg);background:var(--gold-soft);border-radius:1em;padding:.15em .7em;text-decoration:none}

footer.ft{margin-top:2.5em;padding-top:1em;border-top:1px solid var(--line);font-size:.8em;color:var(--mute);display:grid;gap:.4em}
footer.ft button{background:none;border:0;padding:0;color:var(--mute);text-decoration:underline}
.cover{display:flex;gap:1em;align-items:center}
.cover img{width:72px;height:auto;border-radius:3px;box-shadow:0 1px 4px rgba(0,0,0,.2)}

/* ================= [WF_HOME_V2] 첫 화면 랜딩 — 표지(남색·크림·빨강)와 같은 색 ================= */
:root{--lp-red:#D8423C;--lp-red-ink:#B8332E;--lp-red-soft:#F7E1DC;--lp-navy:#1B2236;--lp-note:#E4EAF8;--lp-note-ink:#1F2E6B;--lp-chip:#EFEADF;--lp-go:#B9563E;--lp-go-hover:#A2482F;--lp-pz:#C4573A;--lp-ck:#5D7193;--lp-bk:#6E9282}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){--lp-red:#EE6A61;--lp-red-ink:#F28A82;--lp-red-soft:#45292A;--lp-navy:#EDE7DA;--lp-note:#252C40;--lp-note-ink:#C9D3EE;--lp-chip:#2C3346;--lp-go:#E58A6F;--lp-go-hover:#EFA088;--lp-pz:#E58A6F;--lp-ck:#93A7CC;--lp-bk:#8FB7A5} }
:root[data-theme="dark"]{--lp-red:#EE6A61;--lp-red-ink:#F28A82;--lp-red-soft:#45292A;--lp-navy:#EDE7DA;--lp-note:#252C40;--lp-note-ink:#C9D3EE;--lp-chip:#2C3346;--lp-go:#E58A6F;--lp-go-hover:#EFA088;--lp-pz:#E58A6F;--lp-ck:#93A7CC;--lp-bk:#8FB7A5}
body.lp main{max-width:74em}
.lp-top{font-size:.95em}
.lp-top .book{font-size:1.05em}
/* [WF_HOME_V3] 머리 카드: 왼쪽 표지 · 오른쪽 이름·특징·알림 알약·학습 시작 */
.lp-hero{display:grid;gap:1.6em 2.6em;align-items:center;margin:2em 0 1.4em;background:var(--paper);border:1px solid var(--line);border-radius:1.1em;
  padding:1.6em 1.3em;box-shadow:0 1px 0 rgba(27,34,54,.03),0 14px 36px -24px rgba(27,34,54,.35)}
@media (min-width:860px){.lp-hero{grid-template-columns:minmax(220px,.36fr) minmax(0,1fr);padding:2.6em 3em;margin-top:2.6em}}
.lp-cover{margin:0;justify-self:center;width:min(62%,250px)}
@media (min-width:860px){.lp-cover{width:100%;max-width:330px}}
.lp-cover img{display:block;width:100%;height:auto;border-radius:3px 6px 6px 3px;
  box-shadow:0 2px 4px rgba(27,34,54,.16),0 6px 0 -2px var(--gold-soft),0 22px 40px -18px rgba(27,34,54,.5)}
.lp-main{min-width:0;display:grid;gap:0}
.lp-kick{margin:0;color:var(--lp-red-ink);font-weight:700;font-size:clamp(1rem,1.9vw,1.35rem);letter-spacing:.02em}
.lp-title{margin:.15em 0 .25em;font-size:clamp(2.1rem,5.6vw,3.7rem);line-height:1.12;font-weight:700;letter-spacing:-.025em;color:var(--lp-navy);text-wrap:balance}
.lp-lead{margin:0;font-size:clamp(1.12rem,2.6vw,1.75rem);line-height:1.45;color:var(--mute)}
.lp-lead b{color:var(--lp-red);font-weight:700}
.lp-feat{list-style:none;margin:1.5em 0 0;padding:0;display:grid;gap:.9em}
@media (min-width:600px){.lp-feat{grid-template-columns:repeat(3,minmax(0,1fr));gap:0}
  .lp-feat li+li{border-left:1px solid var(--line);padding-left:1.1em}.lp-feat li{padding-right:.8em}}
.lp-feat li{display:flex;align-items:center;gap:.7em;min-width:0}
.lp-feat .ic{flex:none;width:2.6em;height:2.6em;display:grid;place-items:center}
.lp-feat .ic svg{width:100%;height:100%}
.lp-feat .ic.pz{color:var(--lp-pz)}.lp-feat .ic.ck{color:var(--lp-ck)}.lp-feat .ic.bk{color:var(--lp-bk)}
.lp-feat b{display:block;font-weight:700;font-size:clamp(1rem,1.7vw,1.2rem);line-height:1.3;color:var(--fg)}
.lp-feat small{display:block;color:var(--mute);font-size:.84em;line-height:1.35}
.lp-pills{list-style:none;margin:1.4em 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.55em}
.lp-pills li{border-radius:2em;padding:.42em 1.1em;font-size:clamp(.92rem,1.6vw,1.1rem);font-weight:500;background:var(--lp-chip);color:var(--fg)}
.lp-pills .new{background:var(--lp-red-soft);color:var(--lp-red-ink);font-weight:700}
.lp-pills .free{background:var(--lp-note);color:var(--lp-note-ink);font-weight:700}
.lp-foot{display:grid;gap:1em;align-items:center;margin-top:1.5em;padding-top:1.4em;border-top:1px solid var(--line)}
@media (min-width:600px){.lp-foot{grid-template-columns:minmax(0,1fr) auto;gap:1.6em}}
.lp-pt{display:grid;gap:.6em;color:var(--mute);font-size:clamp(1rem,1.7vw,1.2rem)}
.lp-pt b{color:var(--fg);font-weight:700}
.lp-track{height:8px;border-radius:4px;background:var(--line);overflow:hidden}
.lp-track i{display:block;height:100%;width:0;background:var(--lp-red);border-radius:4px;transition:width .6s ease}
.lp-go{display:inline-flex;align-items:center;justify-content:center;gap:.55em;background:var(--lp-go);color:#fff;text-decoration:none;font-weight:700;
  font-size:clamp(1.1rem,1.9vw,1.4rem);border-radius:.55em;padding:.8em 1.9em;min-height:54px;white-space:nowrap}
.lp-go:hover{background:var(--lp-go-hover)}
:root[data-theme="dark"] .lp-go{color:#1B2236}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .lp-go{color:#1B2236} }
@media (prefers-reduced-motion: reduce){.lp-track i{transition:none}}
#wf-due:empty{display:none}
#wf-due{margin-top:1em;display:grid;gap:.6em}
.lp-stat{margin:0;font-size:.9em;color:var(--mute)}
.lp-stat b{color:var(--fg)}
.lp-note{display:flex;gap:1.1em;align-items:flex-start;background:var(--lp-note);color:var(--lp-note-ink);border-radius:.9em;padding:1.3em 1.4em;margin:.8em 0 0}
@media (min-width:640px){.lp-note{padding:1.6em 2em}}
.lp-note svg{flex:none;width:2.1em;height:2.1em;margin-top:.05em}
.lp-note p{margin:0 0 .35em;font-size:.9em;color:var(--mute)}
.lp-note p:first-child{font-size:1.05em;color:var(--lp-note-ink)}
.lp-note p:last-child{margin:0}
.lp-sec{margin-top:1em}
.lp-sub{margin:-.3em 0 1em;color:var(--mute);font-size:.92em}
.lp-roots{list-style:none;margin:0;padding:0;display:grid;gap:.7em;grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:760px){.lp-roots{grid-template-columns:repeat(3,minmax(0,1fr))}}
.lp-roots a,.lp-roots div{display:grid;gap:.1em;grid-template-rows:auto auto 1fr auto;height:100%;background:var(--paper);border:1px solid var(--line);border-radius:.6em;padding:1em 1.1em;text-decoration:none;color:var(--fg)}
.lp-roots a:hover{border-color:var(--lp-red)}
.lp-roots .rt{font-family:var(--serif);font-size:1.7em;font-weight:600;line-height:1.1;color:var(--lp-navy)}
.lp-roots li:nth-child(4) .rt,.lp-roots a:hover .rt{color:var(--lp-red)}
.lp-roots .rk{font-size:.88em;color:var(--mute)}
.lp-roots .rw{font-family:var(--serif);font-style:italic;font-size:.98em;margin-top:.35em}
.lp-roots .rm{font-size:.76em;color:var(--mute);margin-top:.5em;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:.3em .5em}
.lp-roots em{font-style:normal;white-space:nowrap;align-self:end;border:1px solid var(--line);border-radius:1em;padding:0 .55em}
.lp-roots em.on{border-color:var(--lp-red);color:var(--lp-red-ink)}
@media (min-width:960px){body.lp .parts.many{grid-template-columns:1fr 1fr;gap:2em 2.4em;align-items:start}}
body.lp footer.ft{margin-top:3em}

/* ================= [WF_NAV_V1] 단원 이동 줄 · 탭 · 단어 먼저 보기 · 준비 중 ================= */
.unav{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:.6em;align-items:stretch;margin:.9em 0 0}
.unav>a,.unav>span{display:grid;gap:.05em;align-content:center;min-width:0;padding:.5em .8em;border:1px solid var(--line);border-radius:.5em;background:var(--paper);text-decoration:none;color:var(--fg);min-height:48px}
.unav>a:hover{border-color:var(--accent)}
.unav small{font-size:.74em;color:var(--mute)}
.unav b{font-family:var(--serif);font-weight:600;font-size:.92em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.unav .nx{text-align:right}
.unav .off{opacity:.45}
.unav .mid{display:flex;align-items:center;justify-content:center;min-width:0}
.unav .toc{font-size:.88em;color:var(--accent);padding:0 .6em;text-align:center}
.jump{display:grid;gap:.1em;font-size:.74em;color:var(--mute);min-width:0}
.jump select{font:inherit;font-size:1.25em;color:var(--fg);background:var(--paper);border:1px solid var(--line);border-radius:.45em;padding:.45em .5em;min-height:44px;max-width:15em;width:100%}
.unav.bottom{margin:2em 0 0}
@media (max-width:560px){
  .unav{grid-template-columns:1fr 1fr}
  .unav .mid{grid-column:1/-1;grid-row:1}
  .jump select{max-width:none}
}
.tabs{display:grid;grid-template-columns:1fr 1fr;gap:0;margin:1.2em 0 0;border:1px solid var(--line);border-radius:.6em;overflow:hidden;background:var(--paper);scroll-margin-top:12px}
.tabs a{display:flex;align-items:center;justify-content:center;gap:.45em;padding:.75em .5em;min-height:48px;text-decoration:none;color:var(--mute);font-weight:500}
.tabs a+a{border-left:1px solid var(--line)}
.tabs a b{font-family:var(--serif);font-weight:600;font-size:.9em;color:inherit;opacity:.8}
.tabs a.on{background:var(--accent);color:#fff;font-weight:700}
:root[data-theme="dark"] .tabs a.on{color:#14201f}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .tabs a.on{color:#14201f} }
.study{margin:1em 0 0;display:grid;gap:.8em}
.st-head{display:flex;justify-content:space-between;align-items:center;gap:.5em 1em;flex-wrap:wrap}
.st-tip{margin:0;font-size:.88em;color:var(--mute)}
.st-hide{display:inline-flex;align-items:center;gap:.4em;font-size:.88em;white-space:nowrap;cursor:pointer}
.st-hide input{width:1.1em;height:1.1em;accent-color:var(--accent)}
.st-idx{display:flex;flex-wrap:wrap;gap:.35em;padding:.1em 0 .2em}
.st-idx a{flex:none;font-family:var(--serif);font-size:.92em;border:1px solid var(--line);border-radius:1em;padding:.15em .7em;text-decoration:none;color:var(--fg);background:var(--paper)}
.st-idx a.on{border-color:var(--accent);background:var(--accent-soft);font-weight:600}
.st-card{background:var(--paper);border:1px solid var(--line);border-radius:.6em;padding:1.2em 1.25em;gap:.6em;font-size:1em}
.st-card .hw{font-size:1.8em}
.st-card .mean{font-size:1.15em}
.st-card .ex{border-left:2px solid var(--accent-soft)}
.st-card .ex mark{background:var(--accent-soft);color:inherit;border-radius:.15em;padding:0 .1em}
.st-card .ex .en{margin:0;font-family:var(--serif)}
.st-card .ex .ko{margin:0;color:var(--mute);font-size:.92em}
.st-card.masked:not(.shown) .m,.st-card.masked:not(.shown) .ex .ko{filter:blur(7px);user-select:none}
.st-acts{display:flex;align-items:center;gap:.8em;flex-wrap:wrap}
.st-q{font-size:.9em;color:var(--accent)}
.st-nav{display:flex;justify-content:space-between;align-items:center;gap:.6em}
.st-pos{font-size:.9em;color:var(--mute);font-variant-numeric:tabular-nums}
.st-pos b{color:var(--fg)}
.wlinks{display:flex;flex-wrap:wrap;gap:.25em .7em}
.wlinks a{color:var(--fg);text-decoration-color:var(--line)}
.wlinks a:hover{color:var(--accent)}
.units .soon{display:grid;grid-template-columns:2.7em 1fr auto;gap:.2em .7em;align-items:center;color:var(--mute);background:transparent;border:1px dashed var(--line);border-radius:.45em;padding:.55em .85em;min-height:44px}
.units .soon .t{color:var(--fg);opacity:.75}
.soonp .sub{opacity:.85}
.lock:not(.free){white-space:nowrap}
.soonlist{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.4em}
.soonlist li{display:inline-flex;align-items:baseline;gap:.4em;border:1px dashed var(--line);border-radius:.45em;padding:.3em .65em;font-size:.9em}
.soonlist b{font-family:var(--serif);font-weight:600;color:var(--fg);opacity:.85}
.soonlist span{font-size:.82em;color:var(--mute)}

/* [WF_HOME_V4] 첫 화면 10부 차례: 부마다 접기 */
details.part{background:var(--paper);border:1px solid var(--line);border-radius:.6em;padding:0 1em;scroll-margin-top:12px}
details.part>summary{list-style:none;cursor:pointer;padding:.9em 0 .8em;display:grid;gap:.15em}
details.part>summary::-webkit-details-marker{display:none}
details.part>summary h2{display:flex;align-items:baseline;flex-wrap:wrap;gap:.2em .4em;margin:0}
details.part>summary h2::before{content:"▸";color:var(--mute);font-size:.8em;width:1em;transition:transform .15s}
details.part[open]>summary h2::before{transform:rotate(90deg)}
details.part>summary .sub{margin:0 0 0 1.4em}
details.part>summary:hover h2{color:var(--accent)}
details.part[open]{padding-bottom:1em}
details.part .pprog{font-size:.72em;font-weight:400;color:var(--mute);margin-left:auto}
details.part .pprog b{color:var(--ok)}
details.part .plink{margin:.7em 0 0;font-size:.88em}
@media (prefers-reduced-motion: reduce){details.part>summary h2::before{transition:none}}
@media (min-width:960px){body.lp .parts.many{gap:1em 1.6em}}
@media (min-width:960px){body.lp .parts.many{grid-template-columns:1fr;gap:.7em}
  details.part .units{grid-template-columns:1fr 1fr;column-gap:.8em}}
body.lp .parts{gap:.7em}