/* haru Korean — v5 · clean academy look (가나다 / TTMIK reference): white, navy, one accent, real photos */
:root{
  --paper:#FFFFFF; --alt:#F5F7FA; --alt2:#EEF2F7; --card:#FFFFFF; --ink:#14213A; --ink-2:#3C4A61; --muted:#6B7A90; --faint:#98A3B3; --line:#E4E9F0; --line-2:#D5DCE6;
  --coral:#FF6B57; --coral-deep:#E24E3A; --coral-soft:#FFEDE9;
  --navy:#14213A; --navy-2:#1E2F4F;
  --honey:#FFC845; --honey-deep:#B98A00; --honey-soft:#FFF3D1;
  --sky:#3B82F6; --sky-deep:#2563EB; --sky-soft:#E8F0FE;
  --leaf:#22A06B; --leaf-deep:#15805A; --leaf-soft:#E3F6EC;
  --lilac:#7C6CF0; --lilac-soft:#EEEBFD;
  --wa:#25D366;
  --r:14px; --r-lg:18px; --r-xl:24px;
  --sh:0 1px 2px rgba(20,33,58,.05),0 10px 30px -18px rgba(20,33,58,.22);
  --sh-lift:0 2px 6px rgba(20,33,58,.06),0 22px 44px -22px rgba(20,33,58,.28);
  --disp:"Manrope","Noto Sans KR",system-ui,sans-serif;
  --body:"Manrope","Noto Sans KR",system-ui,-apple-system,sans-serif;
  --kr:"Noto Sans KR","Manrope",sans-serif;
  --kr-disp:"Noto Sans KR","Manrope",sans-serif;
  --scale:1;
  color-scheme:light;
}
html{font-size:calc(16px * var(--scale));scroll-behavior:smooth;-webkit-text-size-adjust:100%}
*{box-sizing:border-box}
/* buttons/inputs never take the OS "ButtonText" colour — in dark mode that made text invisible on white */
button,input,select,textarea{color:var(--ink);font-family:inherit;forced-color-adjust:none}
.slide button,.quiz button,.opt,.stop,.tabs button,.lvbar button,.shopbar button,.flow span,.langbox button,.chip span{color:var(--ink)}
.dnav button,.deckbar .tog,.langbtn,.tabs button.on,.lvbar button.on,.shopbar button.on,.flow span.on,.langbox button.on,:is(.slide,.tbook) .drill .opts button.on,.chip input:checked + span{color:#fff}
.deckbar .tog.on{color:#3B2A00}
.stage,.slide,.quiz,.termcard,.ctab,.prow,.stp,.coh,.price-c,.tcard,.oc,.lsn,.opt{color:var(--ink)}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);font-size:1rem;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
#app{position:relative}
img{max-width:100%;display:block}
a{color:var(--sky-deep)}
:focus-visible{outline:3px solid var(--sky);outline-offset:3px;border-radius:6px}
h1,h2,h3,h4{font-family:var(--disp);font-weight:800;margin:0;line-height:1.15;letter-spacing:-.02em;text-wrap:balance}
h1{font-size:clamp(2rem,4.6vw,3.4rem)}
h2{font-size:clamp(1.6rem,3vw,2.3rem)}
h3{font-size:1.15rem;font-weight:800}
h1 .kr,h2 .kr,h3 .kr{font-family:var(--kr-disp);font-weight:800}
p{margin:0}
.kr{font-family:var(--kr)}
.wrap{max-width:1180px;margin:0 auto;padding-inline:clamp(18px,4vw,40px)}
section{padding-block:clamp(48px,6.5vw,88px)}
section.alt{background:var(--alt)}
.lead{color:var(--ink-2);font-size:1.05rem;max-width:64ch;line-height:1.7}
.center{text-align:center}.center .lead{margin-inline:auto}
.note{color:var(--faint);font-size:.88rem}
.head{display:grid;gap:10px;justify-items:center;text-align:center;margin-bottom:clamp(26px,3.5vw,42px)}
.head.left{justify-items:start;text-align:left}
.eyebrow{font-size:.74rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--coral-deep)}
.stk{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:999px;font-weight:800;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;background:var(--sky-soft);color:var(--sky-deep)}
.stk.c{background:var(--coral-soft);color:var(--coral-deep)}.stk.h{background:var(--honey-soft);color:var(--honey-deep)}.stk.s{background:var(--sky-soft);color:var(--sky-deep)}.stk.l{background:var(--leaf-soft);color:var(--leaf-deep)}.stk.v{background:var(--lilac-soft);color:var(--lilac)}.stk.k{background:var(--ink);color:#fff}
.hl{background:linear-gradient(transparent 62%,var(--coral-soft) 62%,var(--coral-soft) 94%,transparent 94%)}
.hl.c{background:linear-gradient(transparent 62%,var(--honey-soft) 62%,var(--honey-soft) 94%,transparent 94%)}
.tag{display:inline-block;font-size:.64rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;background:var(--alt2);color:var(--muted);padding:3px 8px;border-radius:999px;vertical-align:middle;margin-left:6px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:13px 22px;border-radius:12px;font-weight:800;font-size:.95rem;text-decoration:none;border:1.5px solid transparent;cursor:pointer;font-family:var(--body);transition:transform .15s,box-shadow .15s,background .15s,border-color .15s;color:var(--ink)}
.btn:hover{transform:translateY(-1px)}
.btn-c{background:var(--coral);color:#fff}.btn-c:hover{background:var(--coral-deep);color:#fff}
.btn-k{background:var(--ink);color:#fff}.btn-k:hover{color:#fff;background:var(--navy-2)}
.btn-h{background:var(--honey);color:#3B2A00}
.btn-o{background:#fff;border-color:var(--line-2);color:var(--ink)}.btn-o:hover{border-color:var(--ink)}
.btn-sm{padding:9px 15px;font-size:.86rem;border-radius:10px}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.rv{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.2,1)}
.rv.in{opacity:1;transform:none}
.rv.d1{transition-delay:.06s}.rv.d2{transition-delay:.12s}.rv.d3{transition-delay:.18s}.rv.d4{transition-delay:.24s}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}*{animation:none!important}}

/* top bar + nav */
.topbar{background:var(--ink);color:#fff;font-size:.8rem}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:40px}
.tb-note{color:rgba(255,255,255,.65);font-weight:600}
.tb-wa{display:inline-flex;align-items:center;gap:7px;color:#fff;text-decoration:none;font-weight:800}
.tb-wa svg{width:16px;height:16px}
.tb-wa:hover{color:var(--honey)}
@media (max-width:820px){.tb-note{display:none}}
.langwrap{position:relative}
.langbtn{display:inline-flex;align-items:center;gap:7px;background:rgba(255,255,255,.12);color:#fff;border:0;border-radius:999px;padding:5px 12px 5px 10px;font:inherit;font-weight:800;font-size:.78rem;cursor:pointer}
.langbtn:hover{background:rgba(255,255,255,.22)}
.langbtn svg{width:15px;height:15px}
.langbtn .cv{width:6px;height:6px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);margin-left:2px;transition:transform .2s}
.langbtn.open .cv{transform:rotate(-135deg) translate(-2px,-2px)}
.langbox{position:absolute;left:0;top:calc(100% + 8px);z-index:50;background:#fff;color:var(--ink);border-radius:var(--r);box-shadow:var(--sh-lift);border:1px solid var(--line);padding:10px;display:grid;gap:2px;min-width:230px;animation:pop .2s ease}
@keyframes pop{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.langbox[hidden]{display:none}
.langbox > small{font-size:.66rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);padding:4px 8px 6px}
.langbox button{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:none;border:0;padding:8px 10px;border-radius:9px;font:inherit;font-weight:700;font-size:.9rem;color:var(--ink);cursor:pointer}
.langbox button:hover{background:var(--alt)}
.langbox button.on{background:var(--ink);color:#fff}
.langbox .tagx{display:grid;place-items:center;width:26px;height:22px;border-radius:6px;background:var(--alt2);color:var(--muted);font-size:.64rem;font-weight:800}
.langbox button.on .tagx{background:rgba(255,255,255,.2);color:#fff}
.langbox > p{font-size:.72rem;color:var(--faint);padding:6px 10px 0;line-height:1.4}
.nav{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.9);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:70px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)}
.brand svg{width:38px;height:38px;flex:none}
.brand b{font-family:var(--disp);font-weight:800;font-size:1.35rem;line-height:1;letter-spacing:-.03em;display:block}
.brand b{font-weight:900;text-shadow:2px 2px 0 var(--honey)}
.brand svg{overflow:visible}
.brand:hover svg{transform:rotate(-6deg) scale(1.05);transition:transform .15s}
.brand small{display:block;font-family:var(--kr);font-size:.66rem;letter-spacing:.12em;color:var(--muted);font-weight:700;margin-top:3px}
.nav nav ul{list-style:none;margin:0;padding:0;display:flex;gap:2px}
.nav nav a{display:block;padding:8px 12px;border-radius:9px;color:var(--ink-2);text-decoration:none;font-weight:700;font-size:.9rem}
.nav nav a:hover{color:var(--ink);background:var(--alt)}
.nav nav a.on{color:var(--coral-deep);background:var(--coral-soft)}
@media (max-width:1040px){.nav nav{display:none}}
.mnav{display:none;gap:6px;flex-wrap:wrap;justify-content:center;padding:10px 14px;background:#fff;border-bottom:1px solid var(--line)}
.mnav a{text-decoration:none;font-weight:700;font-size:.82rem;color:var(--ink-2);padding:6px 11px;border-radius:999px;border:1px solid var(--line)}
.mnav a.on{background:var(--ink);color:#fff;border-color:var(--ink)}
@media (max-width:1040px){.mnav{display:flex}}
@media (max-width:560px){.nav .wrap{min-height:60px;gap:8px}.brand svg{width:32px;height:32px}.brand b{font-size:1.15rem}.brand small{display:none}.nav .btn{padding:8px 12px;font-size:.78rem}}

/* hero photo carousel */
.hero{position:relative;height:clamp(420px,62vh,640px);overflow:hidden;background:var(--navy)}
.hero .ph{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity 1.1s ease;transform:scale(1.02)}
.hero .ph.on{opacity:1;animation:kb 9s ease-in-out forwards}
@keyframes kb{from{transform:scale(1.02)}to{transform:scale(1.09)}}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(20,33,58,.72) 0%,rgba(20,33,58,.45) 45%,rgba(20,33,58,.1) 100%),linear-gradient(0deg,rgba(20,33,58,.55),transparent 40%)}
.hero .wrap{position:relative;z-index:2;height:100%;display:grid;align-content:end;padding-bottom:clamp(64px,9vw,120px);color:#fff}
.hero .eyebrow{color:var(--honey)}
.hero h1{color:#fff;max-width:16ch;text-shadow:0 2px 20px rgba(0,0,0,.25)}
.hero .lead{color:rgba(255,255,255,.88);margin-top:14px;max-width:56ch;text-shadow:0 1px 12px rgba(0,0,0,.3)}
.hero .row{margin-top:20px}
.hero .btn-o{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.45);color:#fff;backdrop-filter:blur(6px)}
.hero .btn-o:hover{background:#fff;color:var(--ink)}
.hdots{position:absolute;right:clamp(18px,4vw,40px);bottom:clamp(74px,10vw,130px);z-index:3;display:flex;gap:8px;align-items:center;color:#fff;font-size:.78rem;font-weight:800}
.hdots i{width:26px;height:3px;border-radius:2px;background:rgba(255,255,255,.4);cursor:pointer}
.hdots i.on{background:#fff}
/* overlap cards (가나다) */
.ovl{position:relative;z-index:3;margin-top:calc(-1 * clamp(44px,6vw,80px));display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.oc{background:#fff;border-radius:var(--r-lg);padding:22px 20px;box-shadow:var(--sh-lift);display:grid;gap:8px;border:1px solid var(--line)}
.oc .ic{width:42px;height:42px;border-radius:12px;background:var(--coral-soft);color:var(--coral-deep);display:grid;place-items:center}
.oc .ic svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.oc b{font-size:1.02rem}
.oc p{color:var(--muted);font-size:.88rem}
/* stats band */
.stats{background:linear-gradient(180deg,#FFF8E8 0%,#FFF1D6 100%);color:var(--ink);margin-top:clamp(40px,5vw,64px);border-top:1px solid #F3E3BD;border-bottom:1px solid #F3E3BD}
.stats .wrap{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:20px;padding-block:clamp(36px,5vw,60px)}
.stat{display:grid;gap:8px;text-align:center;justify-items:center}
.stat .num{display:inline-flex;align-items:baseline;justify-content:center;gap:6px;white-space:nowrap}
/* v38: the number is the hero of the tile — huge ink figure, a small grey unit beside it, a one-line label under it (the editable <span data-e> inside <b> must inherit) */
.stat b{font-family:var(--disp);font-size:clamp(3.2rem,7vw,5.4rem);font-weight:800;line-height:.95;letter-spacing:-.04em;font-variant-numeric:tabular-nums;color:var(--ink)}
.stat .num span{font:inherit;color:inherit;max-width:none}
.stat em{font-style:normal;font-family:var(--body);font-size:clamp(.8rem,1.3vw,1rem);font-weight:800;color:var(--muted);letter-spacing:.04em;text-transform:uppercase;align-self:flex-end;padding-bottom:.35em}
.stat > span{font-size:.92rem;color:var(--muted);font-weight:600;max-width:24ch;line-height:1.4}
/* course cards */
.courses{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.cc{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;display:grid;text-decoration:none;color:var(--ink);transition:transform .2s,box-shadow .2s}
.cc:hover{transform:translateY(-4px);box-shadow:var(--sh-lift)}
.cc .im{aspect-ratio:4/3;background-size:cover;background-position:center}
.cc .bd{padding:18px 18px 20px;display:grid;gap:6px}
.cc .bd small{font-size:.7rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--coral-deep)}
.cc .bd b{font-size:1.08rem}
.cc .bd p{color:var(--muted);font-size:.88rem}
.cc .bd .pr{margin-top:6px;font-weight:800;font-size:.95rem}
.cc .bd .pr small{color:var(--muted);font-weight:700;letter-spacing:0;text-transform:none;font-size:.78rem}
.cc .bd .go{margin-top:6px;font-size:.84rem;font-weight:800;color:var(--sky-deep)}
/* two-column feature */
.split{display:grid;gap:34px;align-items:center}
@media (min-width:920px){.split{grid-template-columns:1fr 1fr}.split.rev>div:first-child{order:2}}
.photo{border-radius:var(--r-xl);overflow:hidden;aspect-ratio:4/3;background:var(--alt2)}
.photo img{width:100%;height:100%;object-fit:cover}
.photo.tall{aspect-ratio:3/4}
.checks{list-style:none;padding:0;margin:18px 0 0;display:grid;gap:10px;color:var(--ink-2);font-size:.96rem}
.checks li{display:flex;gap:10px;align-items:flex-start}
.checks li::before{content:"✓";flex:none;width:22px;height:22px;border-radius:50%;background:var(--leaf-soft);color:var(--leaf-deep);display:grid;place-items:center;font-weight:900;font-size:.8rem;margin-top:2px}
.essay{font-size:1.02rem;line-height:1.85;color:var(--ink-2);display:grid;gap:16px}
.essay .q{font-family:var(--kr-disp);font-size:1.25rem;font-weight:700;color:var(--ink);line-height:1.5;border-left:3px solid var(--coral);padding-left:16px;margin-block:4px}
.pull{background:var(--alt);border-radius:var(--r-lg);padding:22px 24px;display:grid;gap:8px;border:1px solid var(--line)}
.pull b{font-family:var(--kr-disp);font-size:1.15rem;font-weight:800}
.pull p{color:var(--muted);font-size:.92rem}
/* steps */
.how{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.hs{background:#fff;border-radius:var(--r-lg);padding:22px;display:grid;gap:8px;border:1px solid var(--line)}
.hs .st{font-family:var(--disp);font-size:2rem;font-weight:800;color:var(--coral-deep);line-height:1}
.hs h3{font-size:1.05rem}
.hs p{color:var(--muted);font-size:.9rem}
/* teachers */
.tgrid{display:grid;gap:18px}
@media (min-width:920px){.tgrid{grid-template-columns:1fr 1fr}}
.tcard{display:grid;grid-template-columns:120px 1fr;gap:20px;background:#fff;border:1px solid var(--line);border-radius:var(--r-xl);padding:22px;align-items:start}
@media (max-width:520px){.tcard{grid-template-columns:1fr}}
.pf{aspect-ratio:1;border-radius:var(--r-lg);background:linear-gradient(150deg,var(--sky-soft),var(--coral-soft));display:grid;place-items:center;font-family:var(--kr-disp);font-weight:800;font-size:2.4rem;color:var(--ink);overflow:hidden}
.pf img{width:100%;height:100%;object-fit:cover}
.trole{font-size:.82rem;font-weight:800;color:var(--coral-deep);margin-top:2px}
.creds{list-style:none;padding:0;margin:12px 0 0;display:grid;gap:7px;color:var(--ink-2);font-size:.9rem}
.creds li{display:flex;gap:9px;align-items:flex-start}
.creds li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--coral);margin-top:9px;flex:none}
/* gallery */
.gal{display:grid;gap:10px;grid-template-columns:repeat(4,1fr)}
@media (max-width:760px){.gal{grid-template-columns:repeat(2,1fr)}}
.gal div{aspect-ratio:1;border-radius:12px;overflow:hidden;background:var(--alt2)}
.gal img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.gal div:hover img{transform:scale(1.05)}
.gal .wide{grid-column:span 2}
/* notice */
.notice{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:20px 22px;display:grid;gap:8px}
.notice .nh{display:flex;justify-content:space-between;align-items:center}
.notice ul{list-style:none;padding:0;margin:0;display:grid}
.notice li{display:grid;grid-template-columns:28px 1fr auto;gap:12px;align-items:center;padding:11px 0;border-top:1px solid var(--line);font-size:.92rem}
.notice li:first-child{border-top:0}
.notice li i{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--sky-soft);color:var(--sky-deep);font-style:normal;font-weight:800;font-size:.74rem}
.notice li small{color:var(--faint);font-weight:700;font-size:.78rem}
/* band */
.band{background:linear-gradient(135deg,#FFEDE9 0%,#FFF3D1 100%);color:var(--ink);border:1px solid #FFD9CF;border-radius:var(--r-xl);padding:clamp(30px,4.5vw,56px);display:grid;gap:14px;justify-items:center;text-align:center}
.band h2{color:var(--ink)}
.band p{color:var(--ink-2);max-width:56ch}
.band .btn-o{background:#fff;color:var(--coral-deep);border-color:var(--coral)}
.band .btn-o:hover{background:var(--coral);color:#fff}
/* page head */
.ph2{padding-block:clamp(36px,5vw,64px) clamp(18px,3vw,32px);text-align:center;background:var(--alt);border-bottom:1px solid var(--line)}
.ph2 h1{margin-top:10px}
.ph2 .lead{margin-inline:auto;margin-top:12px}
.ph2 .tabs{margin-top:22px}

/* bootcamp-style classes */
.steps-line{display:flex;justify-content:center;gap:0;flex-wrap:wrap;margin:6px 0 30px}
.steps-line span{display:grid;justify-items:center;gap:6px;position:relative;padding:0 14px;font-size:.72rem;font-weight:800;color:var(--muted)}
.steps-line span i{width:46px;height:46px;border-radius:14px;background:var(--ink);color:#fff;display:grid;place-items:center;font-style:normal;font-family:var(--kr-disp);font-weight:800;font-size:1rem}
.steps-line span.on i{background:var(--coral)}
.steps-line span:not(:last-child)::after{content:"";position:absolute;right:-8px;top:22px;width:16px;border-top:2px dashed var(--line-2)}
.cohorts{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.coh{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;display:grid;grid-template-rows:auto 1fr auto}
.coh .top{padding:14px 18px;background:var(--alt);display:flex;justify-content:space-between;align-items:center;gap:8px;border-bottom:1px solid var(--line)}
.coh .top b{font-family:var(--kr-disp);font-size:1.05rem}
.coh .top .st{font-size:.68rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:4px 9px;border-radius:999px;background:var(--honey-soft);color:var(--honey-deep)}
.coh.open .top .st{background:var(--leaf-soft);color:var(--leaf-deep)}
.coh .bd{padding:18px;display:grid;gap:10px;align-content:start}
.coh .bd .en{color:var(--muted);font-size:.9rem}
.coh .bd small.lbl{font-size:.68rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
.coh ul{margin:0;padding:0;list-style:none;display:grid;gap:4px;font-size:.9rem;color:var(--ink-2)}
.coh ul li::before{content:"· ";color:var(--coral-deep)}
.coh .fill{display:grid;gap:5px;margin-top:4px}
.coh .fill b{font-size:.9rem}
.coh .fill .bar{height:8px;border-radius:999px;background:var(--alt2);overflow:hidden}
.coh .fill .bar em{display:block;height:100%;background:var(--coral);transition:width .6s}
.coh.open .fill .bar em{background:var(--leaf)}
.coh .fill small{color:var(--muted);font-size:.78rem;font-weight:600}
.coh .pr{padding:0 18px 4px;font-weight:800}
.coh .pr small{color:var(--muted);font-weight:700;font-size:.8rem}
.coh .ft{padding:14px 18px 18px}
.coh .ft .btn{width:100%}
.howopen{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.pricing{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.price-c{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:20px;display:grid;gap:6px}
.price-c b.kr{font-size:1rem}
.price-c .amt{font-family:var(--disp);font-size:2rem;font-weight:800;line-height:1;margin-top:4px}
.price-c .amt small{font-size:.9rem;color:var(--muted);font-weight:700;margin-left:4px}
.price-c p{color:var(--muted);font-size:.86rem}
.price-c.hi{border-color:var(--coral);box-shadow:var(--sh)}
/* self test */
.quiz{max-width:760px;margin-inline:auto;background:#fff;border:1px solid var(--line);border-radius:var(--r-xl);padding:clamp(20px,3vw,34px);display:grid;gap:18px}
.quiz .prog{height:8px;border-radius:999px;background:var(--alt2);overflow:hidden}
.quiz .prog em{display:block;height:100%;background:var(--coral);transition:width .3s}
.quiz .qn{font-size:.74rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
.quiz .qt{font-family:var(--kr-disp);font-size:clamp(1.2rem,2.4vw,1.6rem);font-weight:800;line-height:1.4}
.quiz .qt small{display:block;font-family:var(--body);font-size:.9rem;color:var(--muted);font-weight:600;margin-top:6px}
.quiz .ans{display:grid;gap:8px}
.quiz .ans button{font:inherit;font-family:var(--kr);font-size:1rem;text-align:left;padding:13px 16px;border-radius:12px;border:1.5px solid var(--line-2);background:#fff;cursor:pointer;font-weight:600;transition:border-color .15s,background .15s}
.quiz .ans button:hover{border-color:var(--ink)}
.quiz .ans button.ok{border-color:var(--leaf);background:var(--leaf-soft)}
.quiz .ans button.no{border-color:var(--coral);background:var(--coral-soft)}
.quiz .fb{font-size:.9rem;color:var(--ink-2);min-height:1.4em}
.quiz .res{display:grid;gap:12px;text-align:center;justify-items:center}
.quiz .res .lv{font-family:var(--disp);font-size:4rem;font-weight:800;color:var(--coral-deep);line-height:1}
.quiz .res .lvk{font-family:var(--kr-disp);font-size:1.3rem;font-weight:800}
.quiz .res p{color:var(--ink-2);max-width:52ch}
.quiz .skip{font-size:.82rem;color:var(--muted);text-align:right}
.quiz .skip a{color:var(--muted)}

/* curriculum */
.tabs{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.tabs button{display:grid;gap:1px;text-align:left;padding:10px 16px;border-radius:12px;border:1.5px solid var(--line-2);background:#fff;cursor:pointer;font-family:var(--body);color:var(--ink);min-width:200px}
.tabs button b{font-size:.95rem;font-weight:800}
.tabs button span{font-size:.76rem;color:var(--muted)}
.tabs button.on{border-color:var(--ink);background:var(--ink);color:#fff}
.tabs button.on span{color:rgba(255,255,255,.7)}
.pathmap svg{width:100%;height:auto;display:block}
.stops{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:-6px}
@media (max-width:760px){.stops{grid-template-columns:repeat(2,1fr)}}
.stop{background:#fff;border-radius:var(--r);padding:14px 16px;border:1.5px solid var(--line);display:grid;gap:4px;cursor:pointer;text-align:left;font:inherit;color:inherit;transition:border-color .15s,transform .2s}
.stop:hover{transform:translateY(-2px)}
.stop.on{border-color:var(--coral)}
.stop .lv{display:inline-flex;align-items:center;gap:6px;font-size:.68rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.stop .lv i{width:9px;height:9px;border-radius:50%;background:var(--c,var(--coral))}
.stop b{font-family:var(--kr-disp);font-size:1.05rem}
.stop span{font-size:.8rem;color:var(--muted)}
.termnav{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:22px 0 10px;flex-wrap:wrap}
.termnav .btn{min-width:140px}
.termnav .tcount{font-weight:800;color:var(--muted);font-size:.88rem}
.termcard{background:#fff;border-radius:var(--r-xl);padding:clamp(18px,3vw,30px);border:1px solid var(--line);box-shadow:var(--sh);animation:tin .35s ease}
@keyframes tin{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:none}}
.termcard .th{display:grid;gap:8px;margin-bottom:16px}
.termcard .th .lv{font-size:.7rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--coral-deep)}
.termcard .th h2{font-size:clamp(1.5rem,3vw,2.1rem)}
.termcard .res{background:var(--alt);border-radius:12px;padding:12px 16px;font-weight:700;font-size:.92rem;display:grid;gap:2px;max-width:62ch;border:1px solid var(--line)}
.termcard .res small{font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.ctab{overflow-x:auto;border-radius:12px;border:1px solid var(--line);margin-top:6px}
.ctab table{border-collapse:separate;border-spacing:0;width:100%;min-width:760px;font-size:.88rem}
.ctab th{background:var(--ink);color:#fff;font-weight:800;padding:10px 12px;text-align:left;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase}
.ctab td{padding:12px;vertical-align:top;border-bottom:1px solid var(--line);line-height:1.45}
.ctab tr:last-child td{border-bottom:0}
.ctab tr:nth-child(even) td{background:var(--alt)}
.ctab td.u{width:46px}
.ctab td.u b{display:grid;place-items:center;width:28px;height:28px;border-radius:8px;background:var(--coral-soft);color:var(--coral-deep);font-family:var(--disp);font-weight:800;font-size:.88rem}
.ctab td.tt{min-width:170px}
.ctab td.tt b{display:block;font-family:var(--kr-disp);font-size:1rem;font-weight:800}
.ctab td.tt span{display:block;color:var(--muted);font-size:.82rem;font-weight:600}
.ctab td.si{color:var(--ink-2);min-width:150px}
.ctab td.gg{min-width:180px}
.ctab td.gg span{display:inline-block;font-family:var(--kr);font-size:.8rem;background:#fff;border:1px solid var(--line-2);border-radius:6px;padding:2px 7px;margin:0 3px 3px 0}
.ctab td.cc{min-width:210px;color:var(--ink-2)}
.align{display:grid;gap:22px;align-items:center;background:#FFF8E8;color:var(--ink);border:1px solid #F3E3BD;border-radius:var(--r-xl);padding:clamp(24px,4vw,44px);margin-top:40px}
@media (min-width:900px){.align{grid-template-columns:1.1fr .9fr}}
.align h2{color:var(--ink)}
.align p{color:var(--ink-2)}
.align .kr-q{font-family:var(--kr-disp);font-size:1.2rem;font-weight:700;color:var(--coral-deep);line-height:1.5}
.unis{display:flex;flex-wrap:wrap;gap:7px;align-content:start}
.uni{font-family:var(--kr);font-size:.84rem;font-weight:700;background:#fff;border:1px solid var(--line-2);color:var(--ink);border-radius:999px;padding:5px 12px}
/* syllabus details */
.syl{display:grid;gap:10px;margin-top:16px}
.lsn{background:#fff;border-radius:var(--r);border:1px solid var(--line);overflow:hidden}
.lsn summary{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;padding:14px 18px;cursor:pointer;list-style:none}
.lsn summary::-webkit-details-marker{display:none}
.lsn summary .n{font-family:var(--disp);font-size:1.4rem;font-weight:800;color:var(--coral-deep);line-height:1;min-width:2ch}
.lsn summary b{font-family:var(--kr-disp);font-size:1.02rem;display:block;font-weight:800}
.lsn summary span.en{display:block;color:var(--muted);font-size:.84rem;font-weight:600}
.lsn summary .chev{width:9px;height:9px;border-right:2px solid var(--faint);border-bottom:2px solid var(--faint);transform:rotate(45deg);transition:transform .2s}
.lsn[open] summary .chev{transform:rotate(-135deg)}
.lsn[open]{border-color:var(--ink)}
.lsn .lb{padding:0 18px 18px;display:grid;gap:14px;border-top:1px solid var(--line);padding-top:16px}
.lsn .sec2{display:grid;gap:6px}
.lsn .sec2 small{font-size:.66rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
.lsn .goals{margin:0;padding:0;list-style:none;display:grid;gap:5px;font-size:.9rem;color:var(--ink-2)}
.lsn .goals li{display:flex;gap:8px}.lsn .goals li::before{content:"✓";color:var(--leaf-deep);font-weight:900}
.lsn .vo{display:flex;flex-wrap:wrap;gap:6px}
.lsn .vo span{font-family:var(--kr);font-weight:600;background:var(--alt);border:1px solid var(--line);border-radius:8px;padding:3px 9px;font-size:.88rem}
.lsn .two{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.lsn .doc{background:var(--sky-soft);border-radius:10px;padding:10px 12px;font-size:.88rem}
.lsn .doc small{display:block;font-size:.64rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--sky-deep)}
.lsn .doc b{font-family:var(--kr);display:block}
.lsn .out2{background:var(--leaf-soft);border-radius:10px;padding:10px 12px;font-size:.88rem;font-weight:700}
.lsn .out2 small{display:block;font-weight:800;font-size:.64rem;letter-spacing:.08em;text-transform:uppercase;color:var(--leaf-deep)}
.sylhead{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));margin:18px 0}
.sylhead div{background:#fff;border-radius:var(--r);padding:14px 16px;border:1px solid var(--line);display:grid;gap:2px}
.sylhead b{font-family:var(--disp);font-size:1.5rem;font-weight:800;line-height:1}
.sylhead span{font-size:.78rem;color:var(--muted);font-weight:700}
/* moms */
.momshero{background:var(--alt)}
.momsletter{max-width:70ch;margin-inline:auto;display:grid;gap:16px;font-size:1.04rem;line-height:1.85;color:var(--ink-2)}
.momsletter .mq{font-family:var(--kr-disp);font-size:1.3rem;font-weight:800;color:var(--ink);text-align:center;line-height:1.6;margin-block:8px}
.momscards{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));margin-top:30px}
.mcard{background:#fff;border-radius:var(--r);padding:16px 18px;border:1px solid var(--line);display:grid;gap:4px}
.mcard b{font-family:var(--kr-disp);font-size:1.08rem;color:var(--coral-deep)}
.mcard span{font-size:.88rem;color:var(--muted)}
/* lessons */
.lgrid{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));margin-bottom:30px}
.lcard{background:#fff;border-radius:var(--r-lg);padding:20px;border:1px solid var(--line);display:grid;gap:6px;text-decoration:none;color:var(--ink);transition:transform .2s,box-shadow .2s}
.lcard:hover{transform:translateY(-4px);box-shadow:var(--sh-lift)}
.lcard .n{font-family:var(--disp);font-size:1.8rem;font-weight:800;color:var(--coral-deep);line-height:1}
.lcard b{font-family:var(--kr-disp);font-size:1.15rem;font-weight:800}
.lcard .en{color:var(--muted);font-size:.88rem;font-weight:600}
.lcard .gr{display:flex;flex-wrap:wrap;gap:5px;margin-top:4px}
.lcard .gr span{font-family:var(--kr);font-size:.76rem;background:var(--alt);border-radius:6px;padding:3px 8px}
.lcard .go{margin-top:6px;font-size:.82rem;font-weight:800;color:var(--sky-deep)}
.lvbar{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin:0 0 16px}
.lvbar button{font:inherit;font-weight:800;font-size:.86rem;padding:9px 16px;border-radius:10px;border:1.5px solid var(--line-2);background:#fff;cursor:pointer;color:var(--ink);display:grid;gap:0;text-align:left;min-width:150px}
.lvbar button span{font-family:var(--kr);font-weight:700;font-size:.8rem;color:var(--muted)}
.lvbar button.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.lvbar button.on span{color:rgba(255,255,255,.7)}
/* v36: sample-lesson picker — level tabs → numbered lesson chips (dashed = not written yet) → the chosen lesson's title. Replaces the long row of lesson buttons. */
.lvtabs{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;margin:0 0 12px}
.lvtabs button,.lvtabs span{font:inherit;font-weight:800;font-size:.84rem;padding:8px 16px;border-radius:999px;border:1.5px solid var(--line-2);background:#fff;color:var(--ink);cursor:pointer;line-height:1.2}
.lvtabs button.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.lvtabs span.off{color:var(--faint);border-style:dashed;cursor:default}
.lchips{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;margin:0 0 10px}
.lchip{font:inherit;font-weight:800;font-size:.9rem;width:40px;height:40px;border-radius:50%;border:1.5px solid var(--line-2);background:#fff;color:var(--ink);cursor:pointer;display:inline-grid;place-items:center;padding:0}
.lchip:hover{border-color:var(--ink)}
.lchip.on{background:var(--coral);color:#fff;border-color:var(--coral)}
.lchip.off{color:var(--faint);border-style:dashed;cursor:default;background:transparent}
.lsel{display:flex;gap:10px;align-items:baseline;justify-content:center;flex-wrap:wrap;margin:0 0 4px;text-align:center}
.lsel b{font-size:.76rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.lsel .kr{font-family:var(--kr-disp);font-weight:800;font-size:1.15rem}
.lsel small{color:var(--muted)}
/* v37: Lessons page — level tabs + one list per level (Toss/Wanted-style rows: number · title · two class chips · action), planned lessons shown dimmed */
.lvtabs a{font:inherit;font-weight:800;font-size:.84rem;padding:8px 16px;border-radius:999px;border:1.5px solid var(--line-2);background:#fff;color:var(--ink);text-decoration:none;display:inline-flex;gap:6px;align-items:center;line-height:1.2}
.lvtabs a i{font-style:normal;font-size:.7rem;font-weight:800;background:var(--coral-soft);color:var(--coral-deep);border-radius:999px;padding:1px 7px}
.lvtabs a.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.lvtabs a.on i{background:var(--coral);color:#fff}
.lvtabs a.dim{color:var(--faint);border-style:dashed}
.lhead{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin:22px 0 12px;padding:0 4px}
.lhead > div:first-child{display:grid;gap:4px}
.lhead b{font-family:var(--kr-disp);font-size:1.3rem;font-weight:800}
.lhead small{color:var(--muted);max-width:60ch;line-height:1.5}
.lprog{display:flex;align-items:baseline;gap:4px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:8px 14px}
.lprog b{font-family:var(--disp);font-size:1.5rem;color:var(--coral-deep)}
.lprog small{color:var(--muted);font-weight:700}
.llist{display:grid;gap:8px}
.lrow{display:grid;grid-template-columns:44px 1fr auto;align-items:center;gap:14px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px 16px;text-decoration:none;color:var(--ink);transition:box-shadow .2s,border-color .2s}
a.lrow:hover{box-shadow:var(--sh);border-color:var(--line-2)}
.lrow .ln{width:40px;height:40px;border-radius:50%;background:var(--coral-soft);color:var(--coral-deep);display:grid;place-items:center;font-family:var(--disp);font-weight:800;font-size:1rem}
.lrow .lt{display:grid;gap:3px;min-width:0}
.lrow .lt b{font-family:var(--kr-disp);font-size:1.08rem;font-weight:800}
.lrow .lt small{color:var(--muted);font-size:.86rem;font-weight:600}
.lrow .lcls{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.lrow .lcls span{font-family:var(--kr);font-size:.76rem;font-weight:700;background:var(--alt);border-radius:8px;padding:3px 9px;color:var(--ink-2)}
.lrow .lcls span em{font-style:normal;color:var(--faint);margin-right:6px;font-size:.68rem;letter-spacing:.04em}
.lrow .lgo{font-size:.82rem;font-weight:800;color:var(--sky-deep);white-space:nowrap}
.lrow.off{background:transparent;border-style:dashed}
.lrow.off .ln{background:var(--alt2);color:var(--faint)}
.lrow.off .lt b{color:var(--muted)}
.lrow.off .lgo{color:var(--faint)}
@media (max-width:640px){.lrow{grid-template-columns:36px 1fr}.lrow .lgo{grid-column:2;justify-self:start}.lrow .ln{width:34px;height:34px;font-size:.9rem}}

/* slide deck — clean classroom look */
/* v37 (2026-10-02): the deck frame is light — a white card with a thin line and soft shadow; the navy block is gone (대표: "슬라이드는 여전히 남색이 주를 이루네") */
.deckwrap{margin-top:14px;background:var(--alt);border:1px solid var(--line);border-radius:var(--r-xl);padding:clamp(10px,1.6vw,18px);box-shadow:var(--sh)}
.deckbar{display:flex;justify-content:space-between;align-items:center;gap:12px;color:var(--ink-2);padding:2px 8px 10px;font-size:.84rem;font-weight:700;flex-wrap:wrap}
.deckbar .pg{font-variant-numeric:tabular-nums;color:var(--faint)}
.deckbar .tog{display:inline-flex;gap:6px;align-items:center;cursor:pointer;background:#fff;padding:6px 12px;border-radius:999px;border:1px solid var(--line-2);color:var(--ink);font:inherit;font-weight:800;font-size:.8rem}
.deckbar .tog.on{background:var(--honey);color:#3B2A00;border-color:var(--honey)}
/* v36 (2026-10-02, 대표 결정): 슬라이드 크기는 고정 — 내용에 따라 늘었다 줄었다 하지 않는다. 16:9 대신 세로가 긴 4:3, 화면 높이의 78%를 넘지 않음. 내용이 넘치면 슬라이드 안에서 스크롤. */
.stage{position:relative;aspect-ratio:4/3;max-height:78vh;min-height:420px;background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden}
@media (max-width:760px){.stage{aspect-ratio:auto;height:min(76vh,600px);min-height:0;max-height:none}}
.slide{position:absolute;inset:0;padding:clamp(16px,3vw,44px);display:grid;align-content:start;gap:clamp(10px,1.5vw,18px);opacity:0;transform:translateX(30px);transition:opacity .35s ease,transform .35s ease;pointer-events:none;overflow-y:auto;overflow-x:hidden;padding-bottom:clamp(30px,5vw,60px);scrollbar-width:thin}
.slide.on{opacity:1;transform:none;pointer-events:auto}
.slide.out{transform:translateX(-30px)}
.deckwrap.teach .slide{padding-bottom:clamp(60px,9vw,96px)}
.slide::-webkit-scrollbar{width:6px}.slide::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:3px}
:is(.slide,.tbook) .sec{display:inline-flex;align-items:center;gap:8px;font-size:clamp(.62rem,1vw,.74rem);font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--c,var(--coral-deep));justify-self:start;padding:4px 10px 4px 8px;border-radius:999px;background:var(--alt)}
:is(.slide,.tbook) .sec i{width:8px;height:8px;border-radius:50%;background:var(--c,var(--coral))}
.slide h3{font-family:var(--kr-disp);font-size:clamp(1.2rem,3vw,2.1rem);line-height:1.25;font-weight:800}
.slide h3 small{display:block;font-family:var(--body);font-size:clamp(.72rem,1.15vw,.92rem);color:var(--muted);font-weight:600;margin-top:5px;letter-spacing:0}
:is(.slide,.tbook) .big{font-family:var(--kr-disp);font-size:clamp(1.4rem,4vw,3rem);line-height:1.3;font-weight:800}
:is(.slide,.tbook) .big mark{background:transparent;color:var(--coral-deep);border-bottom:5px solid var(--coral-soft)}
:is(.slide,.tbook) .big mark.b{color:var(--sky-deep);border-color:var(--sky-soft)}
:is(.slide,.tbook) .sub{font-size:clamp(.78rem,1.25vw,.98rem);color:var(--muted);font-weight:600}
:is(.slide,.tbook) .cols{display:grid;gap:clamp(8px,1.2vw,14px);grid-template-columns:repeat(auto-fit,minmax(120px,1fr))}
:is(.slide,.tbook) .chip{background:#fff;border:1.5px solid var(--line);border-radius:12px;padding:clamp(8px,1.2vw,14px) clamp(10px,1.4vw,16px);display:grid;gap:2px;border-top-width:4px}
:is(.slide,.tbook) .chip b{font-family:var(--kr-disp);font-size:clamp(.95rem,1.8vw,1.3rem);font-weight:800}
:is(.slide,.tbook) .chip span{font-size:clamp(.62rem,1vw,.8rem);color:var(--muted);font-weight:600}
:is(.slide,.tbook) .chip.c{border-top-color:var(--coral)}.slide .chip.s{border-top-color:var(--sky)}.slide .chip.h{border-top-color:var(--honey)}.slide .chip.l{border-top-color:var(--leaf)}
:is(.slide,.tbook) .rule{display:grid;gap:clamp(6px,1vw,12px);grid-template-columns:1fr auto 1fr;align-items:center;background:var(--alt);border:1px solid var(--line);border-radius:14px;padding:clamp(12px,2vw,22px)}
:is(.slide,.tbook) .rule div{display:grid;gap:4px;text-align:center}
:is(.slide,.tbook) .rule b{font-family:var(--kr-disp);font-size:clamp(1.05rem,2.4vw,1.8rem);font-weight:800}
:is(.slide,.tbook) .rule small{font-size:clamp(.62rem,1vw,.8rem);color:var(--muted);font-weight:600}
:is(.slide,.tbook) .rule .arrow{font-size:clamp(1.1rem,2.2vw,1.7rem);color:var(--faint)}
:is(.slide,.tbook) .drill{display:grid;gap:clamp(8px,1.3vw,14px)}
:is(.slide,.tbook) .drill .line{font-family:var(--kr-disp);font-size:clamp(1.3rem,3.4vw,2.6rem);font-weight:800;background:var(--alt);border:1px solid var(--line);border-radius:14px;padding:clamp(12px,2vw,24px);text-align:center;min-height:2.4em;display:grid;place-items:center}
:is(.slide,.tbook) .drill .line mark{background:var(--honey-soft);color:var(--ink);padding:0 .14em;border-radius:6px;box-decoration-break:clone;-webkit-box-decoration-break:clone}
:is(.slide,.tbook) .drill .opts{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
:is(.slide,.tbook) .drill .opts button{font:inherit;font-family:var(--kr);font-size:clamp(.8rem,1.25vw,.98rem);padding:8px 14px;border-radius:999px;border:1.5px solid var(--line-2);background:#fff;cursor:pointer;font-weight:700}
:is(.slide,.tbook) .drill .opts button:hover{border-color:var(--ink)}
:is(.slide,.tbook) .drill .opts button.on{background:var(--ink);color:#fff;border-color:var(--ink)}
:is(.slide,.tbook) .qa{display:grid;gap:10px;grid-template-columns:1fr 1fr}
@media (max-width:640px){:is(.slide,.tbook) .qa{grid-template-columns:1fr}}
:is(.slide,.tbook) .bub{position:relative;background:#fff;border:1.5px solid var(--line);border-radius:14px;padding:clamp(10px,1.5vw,16px) clamp(12px,1.7vw,20px);font-family:var(--kr);font-size:clamp(.9rem,1.6vw,1.2rem);font-weight:600}
:is(.slide,.tbook) .bub.q{border-bottom-left-radius:4px}.slide .bub.a{border-bottom-right-radius:4px;background:var(--sky-soft);border-color:transparent;text-align:right}
:is(.slide,.tbook) .bub small{display:block;font-family:var(--body);font-size:.7em;color:var(--muted);font-weight:600;margin-top:4px}
:is(.slide,.tbook) .bub .blank{display:inline-block;min-width:4em;border-bottom:3px solid var(--coral);color:var(--coral-deep);font-weight:800;cursor:pointer}
:is(.slide,.tbook) .bub .blank.show{border-color:transparent}
:is(.slide,.tbook) .build{display:grid;gap:10px}
:is(.slide,.tbook) .build .out{font-family:var(--kr-disp);font-size:clamp(1.15rem,2.8vw,2.2rem);font-weight:800;background:var(--alt);border:1px solid var(--line);border-radius:14px;padding:clamp(12px,2vw,22px);min-height:2.2em;display:flex;gap:.3em;flex-wrap:wrap;align-items:center;justify-content:center}
:is(.slide,.tbook) .build .out span{background:var(--honey-soft);padding:0 .25em;border-radius:8px}
:is(.slide,.tbook) .build .out span.v{background:var(--coral-soft)}
:is(.slide,.tbook) .build .out .ph2{color:var(--faint);background:none;padding:0;border:0;font-size:.6em}
:is(.slide,.tbook) .build .grp{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
@media (max-width:640px){:is(.slide,.tbook) .build .grp{grid-template-columns:1fr}}
:is(.slide,.tbook) .build .grp div{display:grid;gap:5px}
:is(.slide,.tbook) .build .grp small{font-size:.64rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
:is(.slide,.tbook) .build button{font:inherit;font-family:var(--kr);font-size:clamp(.78rem,1.15vw,.92rem);padding:7px 10px;border-radius:9px;border:1.5px solid var(--line-2);background:#fff;cursor:pointer;text-align:left;font-weight:600}
:is(.slide,.tbook) .build button.on{border-color:var(--coral);background:var(--coral-soft)}
:is(.slide,.tbook) .dlg{display:grid;gap:8px;max-width:680px}
:is(.slide,.tbook) .dlg .ln{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:start;font-family:var(--kr);font-size:clamp(.85rem,1.5vw,1.15rem)}
:is(.slide,.tbook) .dlg .who{font-weight:800;color:var(--coral-deep);font-size:.85em;padding-top:.3em;min-width:3.5em}
:is(.slide,.tbook) .dlg .txt{background:var(--alt);border:1px solid var(--line);border-radius:12px;padding:8px 14px;font-weight:600}
:is(.slide,.tbook) .dlg .txt small{display:block;font-family:var(--body);color:var(--muted);font-size:.72em;font-weight:600}
:is(.slide,.tbook) .tpl{font-family:var(--kr-disp);font-size:clamp(1rem,2.2vw,1.7rem);font-weight:700;line-height:1.8;background:var(--alt);border:1px solid var(--line);border-radius:14px;padding:clamp(14px,2.2vw,28px)}
:is(.slide,.tbook) .tpl u{text-decoration:none;border-bottom:3px solid var(--coral);color:var(--coral-deep);padding:0 .6em}
:is(.slide,.tbook) .culture{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
:is(.slide,.tbook) .culture div{background:#fff;border:1.5px solid var(--line);border-radius:12px;padding:14px;display:grid;gap:4px}
:is(.slide,.tbook) .culture b{font-family:var(--kr-disp);font-size:clamp(.95rem,1.6vw,1.15rem);font-weight:800}
:is(.slide,.tbook) .culture span{font-size:clamp(.66rem,1.05vw,.84rem);color:var(--muted);font-weight:600}
.slide ol.hw{margin:0;padding-left:1.3em;font-size:clamp(.85rem,1.5vw,1.1rem);display:grid;gap:6px;color:var(--ink-2)}
:is(.slide,.tbook) .goal{display:grid;gap:8px}
:is(.slide,.tbook) .goal div{display:flex;gap:10px;align-items:flex-start;font-family:var(--kr);font-size:clamp(.9rem,1.6vw,1.2rem);font-weight:600;background:var(--alt);border:1px solid var(--line);border-radius:12px;padding:10px 14px}
:is(.slide,.tbook) .goal div::before{content:"✓";color:var(--leaf-deep);font-weight:900}
:is(.slide,.tbook) .art{position:absolute;right:clamp(10px,3vw,40px);bottom:clamp(10px,3vw,40px);width:clamp(80px,18%,180px);opacity:.9;pointer-events:none}
/* v35: 교사 노트는 긴 슬라이드를 내려 읽는 동안 화면 아래에 붙어 따라온다(sticky). 교사용을 끄면 자리도 차지하지 않는다. */
.tnote{position:absolute;left:0;right:0;bottom:0;background:var(--honey-soft);color:var(--ink);border-top:1px solid #F3E3BD;padding:10px 16px;font-size:clamp(.7rem,1.1vw,.86rem);display:flex;gap:14px;align-items:flex-start;line-height:1.5;transform:translateY(100%);transition:transform .3s;max-height:42%;overflow:auto}
.deckwrap.teach .tnote{transform:none}
.tnote .tn{white-space:pre-line}
.tnote b{background:var(--honey);color:#3B2A00;padding:2px 8px;border-radius:6px;font-size:.9em;white-space:nowrap}
.dnav{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 6px 2px}
.dnav button{font:inherit;font-weight:800;padding:10px 18px;border-radius:10px;border:1px solid var(--line-2);cursor:pointer;background:#fff;color:var(--ink)}
.dnav button.pri{background:var(--coral);color:#fff;border-color:var(--coral)}
.dots{display:flex;gap:4px;flex-wrap:wrap;justify-content:center}
.dots i{width:7px;height:7px;border-radius:50%;background:var(--line-2);cursor:pointer}
.dots i.on{background:var(--coral);transform:scale(1.3)}
.flow{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;margin-top:14px}
.flow span{font-family:var(--kr);font-size:.78rem;font-weight:700;padding:5px 11px;border-radius:999px;background:#fff;border:1px solid var(--line);cursor:pointer}
.flow span.on{background:var(--ink);color:#fff;border-color:var(--ink)}

/* shop */
.shopbar{display:flex;gap:8px;flex-wrap:wrap;margin:18px 0 12px}
.shopbar button{font:inherit;font-weight:800;font-size:.8rem;padding:7px 13px;border-radius:999px;border:1.5px solid var(--line-2);background:#fff;cursor:pointer;color:var(--ink-2)}
.shopbar button.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.plist{display:grid;gap:10px}
.prow{display:grid;grid-template-columns:64px 1fr auto;gap:14px;align-items:center;background:#fff;border-radius:var(--r);padding:12px 14px;border:1px solid var(--line)}
.prow .th{width:64px;aspect-ratio:3/4;border-radius:8px;overflow:hidden;background:var(--alt2);border:1px solid var(--line)}
.prow .th img{width:100%;height:100%;object-fit:contain;background:#fff}
.prow .ti{display:grid;gap:2px;min-width:0}
.prow .ti b{font-size:.96rem;line-height:1.25}
.prow .ti .kr-t{font-family:var(--kr);color:var(--coral-deep);font-size:.8rem;font-weight:700}
.prow .ti .sp{font-size:.74rem;color:var(--muted);font-weight:600}
.prow .ti .more{font-size:.82rem;color:var(--ink-2);margin-top:4px;display:none}
.prow.open .ti .more{display:block}
.prow .more-t{justify-self:start;font:inherit;font-size:.76rem;font-weight:800;color:var(--sky-deep);background:none;border:0;padding:0;cursor:pointer}
.prow .pr{display:grid;gap:4px;justify-items:end;text-align:right}
.prow .pr b{font-family:var(--disp);font-size:1.1rem;font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap}
.prow .pr .left{font-size:.7rem;color:var(--faint);font-weight:700}
.prow .pr .done{font-weight:800;color:var(--leaf-deep);font-size:.88rem}
.btn-pp{background:#FFC439;color:#111;padding:9px 14px;font-size:.85rem;gap:6px;white-space:nowrap;border-radius:10px}
.btn-pp:hover{background:#F2B800;color:#111}
.btn-pp i{font-style:italic;font-weight:900;letter-spacing:-.02em}
.btn-pp i b{color:#003087}.btn-pp i b+b{color:#009CDE}
@media (max-width:560px){.prow{grid-template-columns:56px 1fr}.prow .pr{grid-column:1/-1;justify-items:stretch;text-align:left;grid-template-columns:1fr auto;align-items:center}.prow .th{width:56px}}
.ppnote{margin-top:22px;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:20px 22px;display:grid;gap:8px;font-size:.9rem;color:var(--ink-2)}
.ppnote b{color:var(--ink)}

/* forms + enrol */
.field{display:grid;gap:6px}
.r2{display:grid;gap:14px}
@media (min-width:560px){.r2{grid-template-columns:1fr 1fr}}
label,.flabel{font-size:.82rem;font-weight:800;color:var(--muted)}
input,select,textarea{font:inherit;font-size:1rem;padding:12px 14px;border-radius:11px;border:1.5px solid var(--line-2);background:#fff;color:var(--ink);width:100%}
input:focus,select:focus,textarea:focus{border-color:var(--ink);outline:none}
textarea{min-height:84px;resize:vertical}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{position:relative}
.chip input{position:absolute;inset:0;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.chip span{display:inline-block;padding:8px 14px;border-radius:999px;border:1.5px solid var(--line-2);font-size:.88rem;font-weight:700;color:var(--ink-2);background:#fff}
.chip input:checked + span{background:var(--ink);border-color:var(--ink);color:#fff}
.chip input:focus-visible + span{outline:3px solid var(--sky);outline-offset:2px}
.status{font-size:.9rem;color:var(--leaf-deep);font-weight:800;min-height:1.4em}
.steps{display:grid;gap:14px;margin-top:22px}
.step{display:grid;grid-template-columns:40px 1fr;gap:14px;align-items:start}
.step i{width:40px;height:40px;border-radius:12px;background:var(--ink);color:#fff;display:grid;place-items:center;font-family:var(--disp);font-weight:800;font-style:normal}
.step p{color:var(--muted);font-size:.92rem}
.contact{margin-top:22px;display:grid;gap:8px;font-size:.94rem;color:var(--muted)}
.contact b{color:var(--ink)}
.faq{display:grid;gap:10px;margin-top:10px}
.faq details{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:14px 18px}
.faq summary{font-weight:800;cursor:pointer}
.faq p{color:var(--muted);margin-top:8px;font-size:.92rem}
.enrol{display:grid;gap:22px;align-items:start}
@media (min-width:940px){.enrol{grid-template-columns:.9fr 1.1fr}}
.stepper{display:grid;gap:12px}
.stp{background:#fff;border-radius:var(--r-lg);border:1px solid var(--line);padding:18px 20px;display:grid;gap:12px;opacity:.55;transition:opacity .3s}
.stp.on,.stp.done{opacity:1}
.stp.on{border-color:var(--ink)}
.stp .sh{display:flex;gap:12px;align-items:center}
.stp .sh i{width:32px;height:32px;border-radius:10px;background:var(--ink);color:#fff;display:grid;place-items:center;font-family:var(--disp);font-weight:800;font-style:normal;flex:none}
.stp.done .sh i{background:var(--leaf)}
.stp .sh b{font-size:1.02rem}
.stp .sh small{display:block;color:var(--muted);font-weight:600;font-size:.84rem}
.stp .body{display:none;gap:10px}
.stp.on .body{display:grid}
.opts2{display:grid;gap:8px;grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
.opt{position:relative;display:grid;gap:3px;padding:13px 15px;border:1.5px solid var(--line-2);border-radius:12px;background:#fff;cursor:pointer;text-align:left;font:inherit;color:var(--ink)}
.opt:hover{border-color:var(--ink)}
.opt b{font-size:.96rem}.opt span{font-size:.8rem;color:var(--muted);font-weight:600}
.opt .kr-t{font-family:var(--kr);color:var(--coral-deep);font-size:.8rem;font-weight:700}
.opt.on{border-color:var(--coral);background:var(--coral-soft)}
.pick{background:var(--ink);color:#fff;border-radius:var(--r-lg);padding:18px 20px;display:grid;gap:6px}
.pick small{font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:var(--honey);font-weight:800}
.pick b{font-size:1.1rem}
.pick .amt{font-family:var(--disp);font-size:1.5rem;font-weight:800}
.pick .amt small{font-size:.8rem;color:rgba(255,255,255,.7);text-transform:none;letter-spacing:0}
.pick p{color:rgba(255,255,255,.72);font-size:.86rem}

/* footer / fab */
footer{padding-block:36px 56px;color:var(--faint);font-size:.88rem;border-top:1px solid var(--line);background:var(--alt)}
footer .wrap{display:grid;gap:16px}
@media (min-width:760px){footer .wrap{grid-template-columns:1fr auto;align-items:center}}
footer .soc{display:flex;gap:14px}
footer .soc a{font-weight:800;text-decoration:none;color:var(--ink-2)}
.fab{position:fixed;right:20px;bottom:20px;z-index:45;display:inline-flex;align-items:center;gap:10px;padding:12px 18px 12px 14px;border-radius:999px;background:var(--wa);color:#fff;text-decoration:none;font-weight:800;font-size:.9rem;box-shadow:0 12px 30px -12px rgba(0,0,0,.45)}
.fab:hover{color:#fff;transform:translateY(-2px)}
.fab svg{width:24px;height:24px}
@media (max-width:620px){.fab{padding:14px;right:14px;bottom:14px}.fab span{display:none}}

/* ===== v7: student focus · basket · four curricula ===== */
.hero{height:auto;min-height:clamp(560px,82vh,800px)}
.hero .wrap{padding-top:clamp(70px,10vw,130px)}
.hero h1{font-size:clamp(1.9rem,4.2vw,3.2rem)}
.navr{display:flex;align-items:center;gap:10px}
.bagbtn{position:relative;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:12px;border:1.5px solid var(--line-2);color:var(--ink);text-decoration:none;background:#fff}
.bagbtn svg{width:20px;height:20px}
.bagbtn b{position:absolute;top:-6px;right:-6px;min-width:18px;height:18px;border-radius:9px;background:var(--line-2);color:var(--ink);font-size:.66rem;font-weight:800;display:grid;place-items:center;padding:0 4px}
.bagbtn.has b{background:var(--coral);color:#fff}
.bagbtn.on,.bagbtn:hover{border-color:var(--ink)}
.typed{margin-top:18px;display:inline-flex;align-items:center;gap:2px;background:rgba(255,255,255,.14);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.35);border-radius:999px;padding:8px 16px;font-size:1rem;font-weight:700;color:#fff;min-height:40px;min-width:200px}
.typed i{width:2px;height:1.1em;background:#fff;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
/* curriculum hub */
.khub{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.kcard{display:grid;grid-template-rows:auto 1fr;border-radius:var(--r-xl);overflow:hidden;text-decoration:none;color:var(--ink);border:1px solid var(--line);background:#fff;transition:transform .2s,box-shadow .2s;min-height:420px}
.kcard:hover{transform:translateY(-5px);box-shadow:var(--sh-lift)}
.kcard .im{aspect-ratio:4/3;background-size:cover;background-position:center}
.kcard .bd{padding:20px 22px 24px;display:grid;gap:6px;align-content:start}
.kcard .bd small{font-size:.68rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.kcard .bd h2{font-size:1.5rem}
.kcard .bd b{font-size:.98rem;color:var(--ink-2)}
.kcard .bd p{color:var(--muted);font-size:.88rem}
.kcard .bd .go{margin-top:auto;padding-top:10px;font-size:.86rem;font-weight:800}
.kcard.k-reg{border-top:6px solid var(--navy)}.kcard.k-reg small,.kcard.k-reg .go{color:var(--navy)}
.kcard.k-cul{border-top:6px solid var(--coral)}.kcard.k-cul small,.kcard.k-cul .go{color:var(--coral-deep)}
.kcard.k-mom{border-top:6px solid var(--leaf)}.kcard.k-mom small,.kcard.k-mom .go{color:var(--leaf-deep)}
.kcard.k-biz{border-top:6px solid var(--sky)}.kcard.k-biz small,.kcard.k-biz .go{color:var(--sky-deep)}
/* switch strip + distinct heroes */
.cswitch{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:26px}
.cswitch a{display:grid;gap:0;padding:8px 14px;border-radius:12px;text-decoration:none;border:1.5px solid rgba(20,33,58,.15);background:rgba(255,255,255,.7);color:var(--ink);min-width:150px}
.cswitch a b{font-size:.86rem;font-weight:800}.cswitch a span{font-family:var(--kr);font-size:.74rem;color:var(--muted);font-weight:600}
.cswitch a.on{background:var(--ink);border-color:var(--ink);color:#fff}.cswitch a.on span{color:rgba(255,255,255,.7)}
.khero{padding-block:clamp(30px,5vw,60px) clamp(24px,4vw,44px);border-bottom:1px solid var(--line)}
.khero h1{margin-top:8px;max-width:22ch}
.khero .lead{margin-top:12px}
.khero.k-reg{background:linear-gradient(180deg,#EEF2F7,#fff)}
.khero.k-reg .stops{margin-top:26px}
.khero.k-cul{background:linear-gradient(135deg,#FFEDE9 0%,#FFF3D1 100%)}
.khero.k-cul .eyebrow{color:var(--coral-deep)}
.khero.k-cul .cswitch a.on{background:var(--coral-deep);border-color:var(--coral-deep)}
.khero.k-mom{background:linear-gradient(180deg,#E3F6EC,#fff)}
.khero.k-mom .eyebrow{color:var(--leaf-deep)}
.khero.k-mom .cswitch a.on{background:var(--leaf-deep);border-color:var(--leaf-deep)}
.khero.k-mom .momsletter{font-size:1rem}
.khero.k-biz{background:linear-gradient(180deg,#E8F0FE,#fff)}
.khero.k-biz .eyebrow{color:var(--sky-deep)}
.khero.k-biz .cswitch a.on{background:var(--sky-deep);border-color:var(--sky-deep)}
.khero.k-biz .sylhead{margin-bottom:0}
.facts{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));margin-top:20px}
.facts div{background:#fff;border-radius:var(--r);padding:12px 14px;border:1px solid var(--line);display:grid;gap:2px}
.facts b{font-family:var(--disp);font-size:1.3rem;font-weight:800;line-height:1;color:var(--coral-deep)}
.facts span{font-size:.76rem;color:var(--muted);font-weight:700}
.mcard.k-cul{border-top:4px solid var(--coral)}
.mcard.k-cul b{font-family:var(--kr-disp);font-size:1.05rem;color:var(--coral-deep)}
.ppnote.k-cul{background:var(--coral-soft);border-color:transparent}
/* curriculum table legend */
.ctab td.gg span.j{background:var(--alt);border-style:dotted;color:var(--ink-2)}
.ctab td.gg span.tb{background:transparent;border-style:dashed;color:var(--muted)}
.lg{display:inline-block;width:12px;height:12px;border:1px solid var(--line-2);border-radius:3px;vertical-align:-2px;background:#fff}
.lg.j{background:var(--alt);border-style:dotted}.lg.tb{border-style:dashed}
/* basket */
.cartbar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;background:var(--ink);color:#fff;border-radius:var(--r-lg);padding:14px 18px;margin-top:16px}
.cartbar span{display:inline-flex;align-items:center;gap:8px}.cartbar svg{width:18px;height:18px}
.cartwrap{display:grid;gap:18px;align-items:start}
@media (min-width:900px){.cartwrap{grid-template-columns:1fr 1fr}}
.cbox{background:#fff;border:1px solid var(--line);border-radius:var(--r-xl);padding:clamp(18px,3vw,28px);display:grid;gap:12px}
.cbox h2{font-size:1.3rem}.cbox h2 small{font-size:.72rem;color:var(--muted);font-weight:800;letter-spacing:.08em;text-transform:uppercase;margin-left:6px}
.crow{display:grid;grid-template-columns:auto 1fr auto auto;gap:12px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line)}
.crow .th{width:44px;aspect-ratio:3/4;border-radius:6px;overflow:hidden;border:1px solid var(--line)}
.crow .th img{width:100%;height:100%;object-fit:contain;background:#fff}
.crow .ti{display:grid;gap:2px;min-width:0}.crow .ti b{font-size:.94rem;line-height:1.3}.crow .ti span{font-size:.76rem;color:var(--muted);font-weight:600}
.crow .amt{font-family:var(--disp);font-weight:800;white-space:nowrap}.crow .amt small{font-size:.72rem;color:var(--muted);font-weight:700}
.crow .rm{width:28px;height:28px;border-radius:8px;border:1px solid var(--line-2);background:#fff;color:var(--muted);font-size:1rem;cursor:pointer;line-height:1}
.crow .rm:hover{border-color:var(--coral);color:var(--coral-deep)}
.crow:has(.th){grid-template-columns:44px 1fr auto auto}
.ctotal{display:flex;justify-content:space-between;align-items:center;font-size:1.05rem;padding-top:6px}.ctotal b{font-family:var(--disp);font-size:1.4rem}
.btn-pp.big{justify-content:center;padding:14px 18px;font-size:1rem;border-radius:12px}
/* enrol v7 */
.lvgrid{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.lvc{display:grid;gap:3px;text-align:left;padding:14px 14px 12px;border-radius:14px;border:1.5px solid var(--line-2);background:#fff;cursor:pointer;font:inherit;color:var(--ink);transition:border-color .15s,transform .15s}
.lvc:hover{border-color:var(--ink);transform:translateY(-2px)}
.lvc b{font-family:var(--disp);font-size:1.3rem;font-weight:800;line-height:1}
.lvc span.kr{font-weight:700;font-size:.92rem}
.lvc small{font-size:.74rem;color:var(--muted);font-weight:600}
.lvc em{font-style:normal;font-size:.72rem;color:var(--faint);font-weight:800;margin-top:4px}
.lvc i{font-style:normal;font-size:.8rem;font-weight:800;color:var(--sky-deep);margin-top:6px}
.lvc.on{border-color:var(--coral);background:var(--coral-soft)}.lvc.on i{color:var(--coral-deep)}
.freqrow{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:14px;font-size:.88rem;font-weight:800;color:var(--muted)}
.trialopt{border-style:dashed;border-color:var(--honey-deep)}
.pick2{display:grid;gap:0;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:6px 18px 12px}
.pick2 .crow:last-of-type{border-bottom:0}
.opt.on .kr-t:last-child{color:var(--coral-deep)}
@media (max-width:760px){.khero .split{grid-template-columns:1fr}.kcard{min-height:0}}

/* ===== v8: product pages · account · admin · adaptive test · vocabulary ===== */
.prow .ti b a{color:inherit;text-decoration:none}.prow .ti b a:hover{color:var(--sky-deep)}
.product{display:grid;gap:28px;align-items:start}
@media (min-width:900px){.product{grid-template-columns:.9fr 1.1fr}}
.product .cover{background:#fff;border:1px solid var(--line);border-radius:var(--r-xl);padding:18px;display:grid;gap:12px}
.product .cover img{width:100%;border-radius:10px;border:1px solid var(--line);background:#fff}
.product .pages{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.product .pages img{aspect-ratio:3/4;object-fit:cover;object-position:top;border-radius:8px;border:1px solid var(--line);cursor:pointer}
.buybox{background:#fff;border:1.5px solid var(--ink);border-radius:var(--r-xl);padding:22px;display:grid;gap:12px;position:sticky;top:14px}
.buybox .price{font-family:var(--disp);font-size:2.2rem;font-weight:800;line-height:1}
.buybox .price small{font-size:.9rem;color:var(--muted);font-weight:700;margin-left:6px}
.buybox ul{margin:0;padding:0;list-style:none;display:grid;gap:5px;font-size:.9rem;color:var(--ink-2)}
.buybox ul li::before{content:"✓ ";color:var(--leaf-deep);font-weight:900}
.buybox .row .btn{flex:1;justify-content:center}
.pinfo{display:grid;gap:18px}
.pinfo h2{font-size:1.4rem}
.toc{display:grid;gap:8px}
.toc details{background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 16px}
.toc summary{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:center;cursor:pointer;list-style:none;font-weight:800}
.toc summary::-webkit-details-marker{display:none}
.toc summary i{font-style:normal;font-family:var(--disp);font-weight:800;color:var(--coral-deep);min-width:2.2ch}
.toc summary small{display:block;color:var(--muted);font-weight:600;font-size:.82rem}
.toc .tb{display:grid;gap:8px;padding-top:12px;font-size:.9rem;color:var(--ink-2)}
.toc .tb .vo{display:flex;flex-wrap:wrap;gap:5px}.toc .tb .vo span{font-family:var(--kr);background:var(--alt);border:1px solid var(--line);border-radius:6px;padding:2px 8px;font-size:.84rem}
.toc .tb .lb{font-size:.68rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
.spec{display:grid;gap:8px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.spec div{background:var(--alt);border-radius:12px;padding:12px 14px;display:grid;gap:2px}.spec b{font-size:1.05rem}.spec span{font-size:.76rem;color:var(--muted);font-weight:700}
/* join / request panel */
.joinbox{background:#fff;border:1.5px solid var(--ink);border-radius:var(--r-lg);padding:18px 20px;display:grid;gap:12px;margin-top:10px}
.joinbox h3{font-size:1.05rem}
.joinbox .ok{background:var(--leaf-soft);color:var(--leaf-deep);border-radius:12px;padding:12px 14px;font-weight:700;font-size:.92rem}
.cartform{display:grid;gap:12px;margin-top:10px}
/* account */
.acct{display:grid;gap:18px}
.acct .crow{grid-template-columns:1fr auto}
.tag{display:inline-block;font-size:.66rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:3px 8px;border-radius:999px;background:var(--alt2);color:var(--ink-2)}
.tag.ok{background:var(--leaf-soft);color:var(--leaf-deep)}.tag.wait{background:var(--honey-soft);color:var(--honey-deep)}.tag.paid{background:var(--sky-soft);color:var(--sky-deep)}
/* admin */
.adm{display:grid;gap:18px;grid-template-columns:220px 1fr;align-items:start}
@media (max-width:900px){.adm{grid-template-columns:1fr}}
.adm-nav{display:grid;gap:4px;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:10px;position:sticky;top:14px}
.adm-nav a{display:flex;justify-content:space-between;align-items:center;padding:9px 12px;border-radius:10px;text-decoration:none;color:var(--ink);font-weight:700;font-size:.9rem}
.adm-nav a.on{background:var(--ink);color:#fff}.adm-nav a b{font-size:.7rem;background:var(--coral);color:#fff;border-radius:999px;padding:1px 7px}
.adm-nav a.on b{background:var(--honey);color:#3B2A00}
.adm-main{display:grid;gap:16px}
.tiles{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}
.tile{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:16px 18px;display:grid;gap:4px}
.tile b{font-family:var(--disp);font-size:1.8rem;font-weight:800;line-height:1}.tile span{font-size:.76rem;color:var(--muted);font-weight:700}
.tile.warn b{color:var(--coral-deep)}
.atab{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);overflow:auto}
.atab table{width:100%;border-collapse:collapse;font-size:.86rem;min-width:640px}
.atab th{text-align:left;font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding:10px 12px;border-bottom:1px solid var(--line);background:var(--alt)}
.atab td{padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top}
.atab tr:last-child td{border-bottom:0}
.atab .act{display:flex;gap:6px;flex-wrap:wrap}
.atab .act a,.atab .act button{font:inherit;font-size:.74rem;font-weight:800;padding:5px 9px;border-radius:8px;border:1px solid var(--line-2);background:#fff;color:var(--ink);text-decoration:none;cursor:pointer}
.atab .act .wa{color:var(--wa);border-color:var(--wa)}
.abox{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:18px 20px;display:grid;gap:12px}
.abox h2{font-size:1.15rem}
.abox .grid2{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.abox .fld{display:grid;gap:4px}.abox .fld label{font-size:.72rem}.abox input,.abox textarea,.abox select{padding:8px 10px;font-size:.9rem;border-radius:8px}
.bar-h{display:grid;gap:6px}
.bar-h div{display:grid;grid-template-columns:140px 1fr auto;gap:10px;align-items:center;font-size:.84rem}
.bar-h em{display:block;height:10px;border-radius:5px;background:var(--sky)}
.bar-h b{font-variant-numeric:tabular-nums}
.locked{max-width:560px;margin:40px auto;text-align:center;display:grid;gap:12px}
.roles{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.roles div{background:var(--alt);border-radius:12px;padding:12px 14px;font-size:.86rem}
.roles b{display:block;margin-bottom:4px}
.note-adm{font-size:.82rem;color:var(--muted);background:var(--honey-soft);border-radius:10px;padding:10px 12px}
/* adaptive test */
.quiz .lvtrack{display:flex;gap:4px;justify-content:center;margin-bottom:6px}
.quiz .lvtrack span{font-size:.66rem;font-weight:800;padding:3px 8px;border-radius:999px;background:var(--alt2);color:var(--muted)}
.quiz .lvtrack span.on{background:var(--ink);color:#fff}.quiz .lvtrack span.done{background:var(--leaf-soft);color:var(--leaf-deep)}
.quiz .ans{grid-template-columns:1fr 1fr}
@media (max-width:560px){.quiz .ans{grid-template-columns:1fr}}
.quiz .res .hist{display:flex;gap:4px;flex-wrap:wrap;justify-content:center}
.quiz .res .hist i{width:12px;height:12px;border-radius:3px;background:var(--line-2);font-style:normal}
.quiz .res .hist i.ok{background:var(--leaf)}.quiz .res .hist i.no{background:var(--coral)}
/* vocabulary */
.vfields{display:flex;gap:6px;flex-wrap:wrap}
.vfields button{font:inherit;font-size:.78rem;font-weight:800;padding:6px 11px;border-radius:999px;border:1.5px solid var(--line-2);background:#fff;color:var(--ink-2);cursor:pointer}
.vfields button.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.vlist{display:grid;gap:8px;margin-top:14px}
.ventry{background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 16px;display:grid;gap:4px}
.ventry .w{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
.ventry .w b{font-family:var(--kr-disp);font-size:1.15rem}
.ventry .w small{color:var(--faint);font-weight:700;font-size:.72rem}
.ventry .w span{color:var(--ink-2);font-weight:600}
.ventry .ex{font-family:var(--kr);font-size:.92rem;color:var(--ink-2);background:var(--alt);border-radius:8px;padding:6px 10px}
.ventry .rel{font-size:.8rem;color:var(--muted)}
.ventry .rel::before{content:"▸ ";color:var(--coral-deep)}
.vsimple{display:grid;gap:6px;grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
.vsimple div{background:#fff;border:1px solid var(--line);border-radius:10px;padding:8px 12px;font-size:.88rem}
.vsimple b{font-family:var(--kr);font-size:1rem}.vsimple small{color:var(--faint);font-weight:700;font-size:.7rem;margin-left:4px}.vsimple span{display:block;color:var(--muted);font-size:.78rem}
.wkvocab{margin-top:14px;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:16px 18px;display:grid;gap:10px}
.wkvocab .hd{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.wkvocab .hd b{font-size:1rem}
.wkvocab .hd > span{display:flex;gap:6px;flex-wrap:wrap}
.wkvocab .hd > span .x{font-size:.72rem;font-weight:800;color:var(--muted);background:var(--alt2);border:0;border-radius:999px;padding:3px 9px}
.coh .joinbox{margin-top:12px;padding:14px}
.coh .joinbox .r2{grid-template-columns:1fr}
.wkvocab .fl{display:flex;flex-wrap:wrap;gap:6px}
.wkvocab .fl span{font-family:var(--kr);font-size:.86rem;background:var(--alt);border:1px solid var(--line);border-radius:8px;padding:3px 9px}
.wkvocab .fl span.x{background:transparent;border-style:dashed;color:var(--muted)}

/* admin */
.adminbtn{position:fixed;left:20px;bottom:20px;z-index:45;display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:999px;background:var(--ink);color:#fff;border:0;font:inherit;font-weight:800;font-size:.85rem;cursor:pointer;box-shadow:0 12px 30px -14px rgba(0,0,0,.5)}
.drawer{position:fixed;inset:0;z-index:60;background:rgba(20,33,58,.45);display:grid;justify-items:end}
.drawer[hidden]{display:none!important}
.dpanel{background:#fff;width:min(580px,100%);height:100%;overflow-y:auto;box-shadow:-20px 0 60px -30px rgba(0,0,0,.6);display:grid;grid-template-rows:auto 1fr auto}
.dhead{position:sticky;top:0;background:#fff;border-bottom:1px solid var(--line);padding:18px 22px;display:flex;justify-content:space-between;align-items:center;gap:12px;z-index:2}
.dhead h3{font-size:1.05rem}.dhead p{font-size:.78rem;color:var(--faint);margin-top:2px}
.dbody{padding:18px 22px;display:grid;gap:12px;align-content:start}
.dfoot{position:sticky;bottom:0;background:#fff;border-top:1px solid var(--line);padding:14px 22px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.acc2{border:1px solid var(--line);border-radius:var(--r);background:#fff;overflow:hidden}
.acc2 > summary{padding:12px 16px;cursor:pointer;font-weight:800;font-size:.92rem;list-style:none;display:flex;justify-content:space-between;align-items:center}
.acc2 > summary::-webkit-details-marker{display:none}
.acc2 > summary::after{content:"+";color:var(--faint);font-weight:800}
.acc2[open] > summary::after{content:"−"}
.acc2 .in{padding:0 16px 16px;display:grid;gap:10px;border-top:1px solid var(--line);padding-top:14px}
.dfield{display:grid;gap:5px}
.dfield label{font-size:.74rem;font-weight:800;color:var(--faint)}
.dfield input,.dfield textarea{padding:9px 12px;font-size:.9rem;border-radius:9px}
.dfield textarea{min-height:64px}
.dnote{font-size:.78rem;color:var(--faint);line-height:1.5}
.saved{color:var(--leaf-deep);font-weight:800;font-size:.85rem}
.closeb{background:none;border:0;font-size:1.5rem;line-height:1;cursor:pointer;color:var(--faint);padding:0 4px}
body.editing [data-e]{outline:1.5px dashed rgba(255,107,87,.6);outline-offset:3px;border-radius:4px;cursor:text}
body.editing [data-e]:hover{outline-color:var(--coral);background:rgba(255,200,69,.15)}
body.editing [data-e]:focus{outline:2px solid var(--coral);background:#fff;color:var(--ink)}
body.editing .fab{display:none}
.etool{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:70;background:var(--ink);color:#fff;border-radius:999px;padding:10px 12px 10px 18px;display:flex;gap:10px;align-items:center;box-shadow:0 20px 50px -20px rgba(0,0,0,.6);max-width:calc(100vw - 24px);flex-wrap:wrap;justify-content:center}
.etool b{font-size:.84rem;white-space:nowrap}
.etool .grp{display:flex;gap:6px;align-items:center;background:rgba(255,255,255,.08);border-radius:999px;padding:4px 10px}
.etool .grp small{font-size:.66rem;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.6);font-weight:800}
.etool input[type=range]{width:90px;accent-color:var(--honey)}
.etool input[type=color]{width:24px;height:24px;border:0;padding:0;background:none;border-radius:50%;cursor:pointer}
.etool button{font:inherit;font-weight:800;font-size:.8rem;padding:8px 14px;border-radius:999px;border:0;cursor:pointer;background:rgba(255,255,255,.12);color:#fff}
.etool button.pub{background:var(--honey);color:#3B2A00}
.etool .msg{font-size:.78rem;color:var(--leaf);font-weight:800}
@media print{.topbar,.nav,.mnav,.fab,.adminbtn,.drawer,.etool{display:none!important}}

/* ---- v9: vocabulary groups ---- */
.vtools{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:14px}
.vgroups{display:grid;gap:18px;margin-top:14px}
.vgroup h4{display:flex;align-items:baseline;gap:10px;font-family:var(--kr-disp);font-size:1.05rem;font-weight:800;margin:0 0 8px;padding-bottom:6px;border-bottom:2px solid var(--line)}
.vgroup h4 small{font-family:var(--body);font-size:.78rem;color:var(--muted);font-weight:700}
.vgroup h4 em{font-style:normal;font-size:.7rem;font-weight:800;color:var(--faint);margin-left:auto}
.vgroup .vlist{margin-top:0;grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.wkvocab .fl span{display:grid;gap:1px;padding:5px 10px}
.wkvocab .fl span b{font-family:var(--kr);font-weight:700;font-size:.9rem}
.wkvocab .fl span small{font-family:var(--body);font-size:.7rem;color:var(--muted);font-weight:600}
/* ---- v9: product page ---- */
.product .cover a{display:block}
.product .pages.six{grid-template-columns:repeat(6,1fr)}
.product .pages button{font:inherit;padding:0;border:1.5px solid var(--line);border-radius:8px;background:#fff;cursor:pointer;display:grid;gap:3px;overflow:hidden;color:var(--muted)}
.product .pages button img{aspect-ratio:3/4;width:100%;object-fit:cover;object-position:top;border:0;border-radius:0}
.product .pages button span{font-size:.6rem;font-weight:700;padding:0 4px 5px;line-height:1.2}
.product .pages button.on{border-color:var(--coral);color:var(--coral-deep)}
.parts{display:grid;gap:8px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.parts div{background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 14px;display:grid;grid-template-columns:auto 1fr;gap:2px 10px}
.parts i{grid-row:1/3;font-style:normal;font-family:var(--disp);font-weight:800;color:var(--coral-deep);font-size:1.1rem}
.parts b{font-size:.92rem}.parts span{font-size:.8rem;color:var(--muted);font-weight:600}
.howto{margin:0;padding-left:20px;color:var(--ink-2);display:grid;gap:6px}
.fmt{border-collapse:collapse;width:100%;font-size:.9rem}.fmt th{text-align:left;font-weight:800;padding:8px 10px;border-bottom:1px solid var(--line);width:34%;color:var(--ink-2)}.fmt td{padding:8px 10px;border-bottom:1px solid var(--line);color:var(--ink-2)}
.toc .tb .exl{display:grid;gap:4px;margin-top:4px}.toc .tb .exl div{display:grid;gap:0}.toc .tb .exl b{font-size:.92rem}.toc .tb .exl span{font-size:.8rem;color:var(--muted)}
/* ---- v9: enrol ---- */
.enrol2{display:grid;gap:26px;align-items:start;grid-template-columns:minmax(0,1fr) 320px}
.emain{display:grid;gap:44px;min-width:0}
.eblock .head{margin-bottom:16px}
.cohorts.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.lvgrid.four{grid-template-columns:repeat(4,minmax(0,1fr));margin-top:14px}
.opts2.four{grid-template-columns:repeat(2,minmax(0,1fr))}
.freqrow{margin-top:0}
.steps3{display:grid;gap:12px;grid-template-columns:repeat(3,minmax(0,1fr))}
.steps3 div{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:18px;display:grid;gap:6px;align-content:start}
.steps3 i{width:36px;height:36px;border-radius:11px;background:var(--ink);color:#fff;display:grid;place-items:center;font-family:var(--disp);font-weight:800;font-style:normal}
.steps3 b{font-size:1rem}.steps3 p{color:var(--muted);font-size:.9rem}
.faqlist{display:grid;gap:14px}
.faqlist div{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:16px 20px}
.faqlist h3{font-size:1rem;font-weight:800;margin:0 0 6px}
.faqlist p{color:var(--muted);font-size:.92rem;margin:0}
.esum{position:sticky;top:14px;background:#fff;border:1.5px solid var(--ink);border-radius:var(--r-xl);padding:20px;display:grid;gap:12px}
.esum .eh{display:grid;gap:2px}.esum .eh b{font-family:var(--disp);font-size:2.2rem;font-weight:800;line-height:1}.esum .eh small{color:var(--muted);font-weight:700;font-size:.8rem}
.esum ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.esum li{display:grid;grid-template-columns:1fr auto auto;gap:8px;align-items:center;padding:8px 0;border-top:1px solid var(--line)}
.esum li div{display:grid;gap:1px;min-width:0}.esum li b{font-size:.9rem}.esum li span{font-size:.74rem;color:var(--muted);font-weight:600}
.esum li em{font-style:normal;font-weight:800;font-size:.95rem}.esum li em small{font-size:.7rem;color:var(--muted)}
.esum li .rm{border:0;background:var(--alt);width:24px;height:24px;border-radius:50%;cursor:pointer;color:var(--muted);font-size:1rem;line-height:1}
.esum .tot{display:grid;gap:4px;padding-top:8px;border-top:2px solid var(--ink)}.esum .tot div{display:flex;justify-content:space-between;font-size:.88rem}.esum .tot span{color:var(--muted);font-weight:700}
.esum .btn{width:100%;justify-content:center}
@media (max-width:980px){.enrol2{grid-template-columns:1fr}.esum{position:static}.lvgrid.four{grid-template-columns:repeat(2,minmax(0,1fr))}.steps3{grid-template-columns:1fr}}
@media (max-width:640px){.cohorts.two,.opts2.four{grid-template-columns:1fr}.product .pages.six{grid-template-columns:repeat(3,1fr)}}
/* ---- v9: policy · admin ---- */
.policy{max-width:820px;display:grid;gap:22px}
.psec h2{font-size:1.25rem;margin-bottom:8px}.psec p{color:var(--ink-2);margin-top:8px;line-height:1.65}
.tag.no{background:var(--coral-soft);color:var(--coral-deep)}
.adminlink svg{width:20px;height:20px}
.locked input{font:inherit;padding:10px 12px;border:1.5px solid var(--line-2);border-radius:10px}
.vgroup.rest h4{border-bottom-color:var(--line-2)}
.vgroup.rest h4 .kr{color:var(--muted)}
.vgroup .vsimple{margin-top:0}

/* ---- v11: topic-first curriculum (2026-10-01) ---- */
.termcard .th h2 .thm{display:block;font-family:var(--body);font-size:.95rem;color:var(--muted);font-weight:700;margin-top:4px}
.termcard .blurb{color:var(--ink-2);font-size:.95rem;max-width:70ch;margin:-2px 0 4px}
.ctab .wkv{display:inline-block;margin-top:5px;font-size:.76rem;font-weight:800;color:var(--sky-deep)}
.ctab tr.rev td{background:var(--honey-soft)!important}
.ctab td.gg span.rvw{background:transparent;border:0;color:var(--muted);font-family:var(--body);font-weight:700;padding:0}
.ctab tr.wkopen td{padding:0 12px 14px;background:#fff!important}
.wkpanel{background:var(--alt);border:1px solid var(--line);border-radius:var(--r-lg);padding:16px 18px;display:grid;gap:16px}
.wkhead{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap}
.wkhead .kr{font-family:var(--kr-disp);font-weight:800;font-size:1.02rem}
.wkhead small{color:var(--muted);font-weight:700;font-size:.78rem}
.wksec h4{font-size:.8rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--coral-deep);margin:0 0 8px}
.wksec h4 small{color:var(--faint);letter-spacing:0;text-transform:none;font-size:.78rem;margin-left:4px}
.wkcl{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.wkcl .cl{background:#fff;border:1px solid var(--line);border-radius:12px;padding:10px 12px;display:grid;gap:7px;align-content:start}
.wkcl .cl h5{display:flex;align-items:center;gap:6px;margin:0;font-size:.9rem;font-weight:800}
.wkcl .cl h5 i{font-style:normal;color:var(--coral-deep);font-family:var(--kr-disp)}
.wkcl .cl h5 em{font-style:normal;font-size:.62rem;font-weight:800;color:var(--sky-deep);background:var(--sky-soft);border-radius:999px;padding:1px 7px}
.wkcl .ws{display:flex;flex-wrap:wrap;gap:5px}
.wkcl .ws span{display:grid;gap:0;font-family:var(--kr);font-size:.86rem;background:var(--alt);border:1px solid var(--line);border-radius:8px;padding:4px 9px}
.wkcl .ws span b{font-weight:700}
.wkcl .ws span small{font-family:var(--body);font-size:.68rem;color:var(--muted);font-weight:600}
.wkcl.compact{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
.wkcl.compact .cl{padding:8px 10px;gap:5px}
.wkcl.compact .cl h5{font-size:.8rem;color:var(--ink-2)}
.wkcl.compact .ws span{font-size:.8rem;padding:2px 7px;background:#fff}
.flow5{display:grid;gap:8px;grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
.flow5 div{background:#fff;border:1px solid var(--line);border-radius:12px;padding:10px 12px;display:grid;gap:4px}
.flow5 small{font-size:.66rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--faint)}
.flow5 .kr{font-size:.82rem;color:var(--ink-2);line-height:1.45}
.xref small{display:block;font-size:.72rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);margin-bottom:6px}
.xref .xl{display:flex;flex-wrap:wrap;gap:6px}
.xref .xl span{display:inline-flex;flex-direction:column;background:#fff;border:1px dashed var(--line-2);border-radius:8px;padding:5px 9px;font-size:.78rem;max-width:260px}
.xref .xl span b{font-weight:800}
.xref .xl span em{font-style:normal;font-family:var(--kr);color:var(--muted);font-size:.74rem}
.xref .xl span.pin{border-style:solid;border-color:var(--coral);background:var(--coral-soft)}
.xref .xl span.weak{opacity:.6}
.wkvocab .wkcl{margin-top:2px}
@media (max-width:640px){.wkcl{grid-template-columns:1fr}}

/* ============ v12 (2026-10-01): Montage-inspired foundation — spacing 4/8, fixed control heights, type scale, elevation, semantic lines/fills. Brand colours unchanged. ============ */
:root{
  --sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:20px;--sp-6:24px;--sp-8:32px;--sp-10:40px;--sp-12:48px;
  --line:#E6E7EA; --line-2:#D7D9DE; --alt:#F7F7F8; --alt2:#EFF0F2; --muted:#70737C; --faint:#989BA2; --ink-2:#2E2F33;
  --fill-n:rgba(112,115,124,.08); --fill-s:rgba(112,115,124,.16); --fill-a:rgba(112,115,124,.05);
  --positive:#00BF40; --cautionary:#FF9200; --negative:#FF4242;
  --el-xs:0 1px 2px rgba(0,0,0,.08),0 0 1px rgba(0,0,0,.08); --el-s:0 2px 8px rgba(0,0,0,.10),0 1px 4px rgba(0,0,0,.06); --el-m:0 6px 12px rgba(0,0,0,.10),0 4px 8px rgba(0,0,0,.06); --el-l:0 16px 20px rgba(0,0,0,.12),0 8px 16px rgba(0,0,0,.08);
  --sh:var(--el-xs); --sh-lift:var(--el-m);
  --r:12px; --r-lg:16px; --r-xl:20px; --r-pill:999px;
  --h-btn:48px; --h-btn-sm:40px; --h-chip:32px; --h-input:48px;
}
.wrap{max-width:1120px}
h1{font-size:clamp(1.9rem,3.4vw,2.5rem);line-height:1.3;letter-spacing:-.0253em}
h2{font-size:clamp(1.35rem,2.4vw,1.75rem);line-height:1.36;letter-spacing:-.0236em}
h3{font-size:1.25rem;line-height:1.4;letter-spacing:-.012em}
p,li{letter-spacing:.0057em}
.lead{font-size:1.0625rem;line-height:1.55}
.note{font-size:.875rem;line-height:1.43;letter-spacing:.0145em}
/* controls: fixed heights, never reshape */
.btn{height:var(--h-btn);padding:0 20px;border-radius:var(--r);font-size:.95rem;letter-spacing:.0057em;box-shadow:none}
.btn-sm{height:var(--h-btn-sm);padding:0 16px;font-size:.875rem}
.btn:hover{transform:none;box-shadow:var(--el-xs)}
.btn:active{transform:translateY(1px)}
.btn:focus-visible,.chipb:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--coral);outline-offset:2px}
.btn-o{background:#fff;border-color:var(--line-2)}.btn-o:hover{background:var(--fill-a);border-color:var(--line-2)}
.btn-k:hover{background:#2E2F33}
.btn[disabled],.btn:disabled{background:var(--alt2);color:var(--faint);border-color:transparent;cursor:not-allowed;box-shadow:none}
input,select,textarea{height:var(--h-input);padding:0 14px;border-radius:10px;border:1px solid var(--line-2);font-size:1rem}
textarea{height:auto;min-height:96px;padding:12px 14px}
input:hover,select:hover,textarea:hover{border-color:var(--faint)}
input:focus,select:focus,textarea:focus{border-color:var(--coral);box-shadow:0 0 0 3px var(--coral-soft);outline:none}
.field label,.field .flabel{font-size:.8125rem;font-weight:700;color:var(--ink-2);letter-spacing:.0194em}
/* chips — Montage: outlined (multi/section), solid when active (page control) */
.chips.cat{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 18px}
.chipb{height:var(--h-chip);padding:0 14px;border-radius:var(--r-pill);border:1px solid var(--line-2);background:#fff;color:var(--ink-2);font:inherit;font-size:.875rem;font-weight:700;letter-spacing:.0145em;cursor:pointer;display:inline-flex;align-items:center;gap:6px;transition:background .15s,border-color .15s}
.chipb:hover{background:var(--fill-a)}
.chipb.on{background:var(--ink);border-color:var(--ink);color:#fff}
.chips.sel .chipb.on{background:var(--coral);border-color:var(--coral)}
.chip span{height:var(--h-chip);display:inline-flex;align-items:center;border-radius:var(--r-pill);padding:0 14px}
.badge{display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:6px;background:var(--fill-n);color:var(--ink-2);font-size:.75rem;font-weight:700;letter-spacing:.0252em}
.badges{display:flex;flex-wrap:wrap;gap:6px}
.chipx{display:inline-flex;align-items:center;height:24px;padding:0 9px;border-radius:7px;background:var(--coral-soft);color:var(--coral-deep);font-weight:800;font-size:.78rem}
.tag.demo{background:var(--honey-soft);color:#7A5A00;text-transform:none;letter-spacing:0;font-size:.62rem;margin-left:4px}
/* segmented control (admin role switch) */
.segc{display:inline-flex;background:var(--alt2);border-radius:14px;padding:4px;gap:2px;margin-top:16px}
.segc button{font:inherit;border:0;background:transparent;border-radius:11px;padding:8px 18px;display:grid;justify-items:center;gap:0;cursor:pointer;color:var(--muted)}
.segc button b{font-size:.9rem;font-weight:800}.segc button small{font-size:.7rem;font-weight:700}
.segc button.on{background:#fff;color:var(--ink);box-shadow:var(--el-xs)}
/* cards */
.coh,.cbox,.dcard,.pcard,.waitcard,.termcard,.abox,.tile{box-shadow:var(--el-xs);border-color:var(--line)}
.coh:hover,.pcard:hover{box-shadow:var(--el-s)}
/* ---- shop: product cards (Montage card: thumbnail · heading ≤2 lines · caption 1 line · bottom actions) ---- */
.pgrid{display:grid;gap:18px;grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.pcard{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;display:grid;grid-template-rows:auto 1fr;transition:box-shadow .15s}
.pcard .pth{display:block;aspect-ratio:3/2;background:var(--alt);position:relative;overflow:hidden}
.pcard .pth img{position:absolute;left:50%;top:14px;transform:translateX(-50%);height:calc(100% - 14px);width:auto;border-radius:6px 6px 0 0;box-shadow:var(--el-m)}
.pcard .pth .ovl{position:absolute;left:12px;top:12px;background:var(--ink);color:#fff;font-size:.7rem;font-weight:800;padding:4px 9px;border-radius:7px;letter-spacing:.06em}
.pcard .pbd{padding:16px 18px 18px;display:grid;gap:8px;align-content:start}
.pcard h3{font-size:1.05rem;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pcard h3 a{color:inherit;text-decoration:none}
.pcard .kr-t{font-family:var(--kr);font-size:.82rem;color:var(--muted);font-weight:700}
.pcard .desc{font-size:.875rem;color:var(--ink-2);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;margin:0}
.pcard .pft{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:6px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:12px}
.pcard .price{font-family:var(--disp);font-size:1.35rem;font-weight:800}.pcard .price small{font-size:.7rem;color:var(--muted)}
.pcard .pft .row{gap:8px}.pcard .pft .btn{height:var(--h-btn-sm);padding:0 14px;font-size:.85rem}
.pcard .left,.pcard .done{font-size:.76rem;color:var(--muted)}
.trust{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));margin-top:22px}
.trust div{background:var(--alt);border-radius:12px;padding:12px 14px;display:grid;gap:2px}.trust b{font-size:.9rem}.trust span{font-size:.78rem;color:var(--muted);font-weight:600}
/* ---- enrol: class cards ---- */
.coh.cls .top{align-items:flex-start}
.coh.cls .top div{display:grid;gap:2px}
.coh.cls .top small{font-size:.76rem;color:var(--muted);font-weight:700;font-family:var(--body)}
.coh.cls .top .st.run{background:var(--sky-soft);color:var(--sky-deep)}
.coh.cls .lvl{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.coh.cls .lvl .now{font-size:.82rem;font-weight:700;color:var(--ink-2)}
.coh.cls .path{font-size:.74rem;color:var(--faint);font-weight:700}
.coh.cls .tch{font-size:.76rem;color:var(--muted);font-weight:700}
.waitcard{background:#fff;border:1px dashed var(--line-2);border-radius:var(--r-lg);padding:20px 22px;display:grid;gap:14px}
.waitcard .wh h3{margin-top:4px}
.waitcard .wrow{display:grid;gap:6px}.waitcard .wrow small{font-size:.74rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--faint)}
.waitcard .ok{background:var(--leaf-soft);color:var(--leaf-deep);border-radius:10px;padding:10px 14px;font-weight:700;font-size:.9rem}
/* ---- dashboards (student / teacher) ---- */
.dgrid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));margin-top:4px}
.dcard{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:20px 22px;display:grid;gap:14px;align-content:start}
.dcard .dh{display:grid;gap:4px}.dcard h3{font-size:1.15rem}
.dcard .prog{display:grid;gap:6px}.dcard .prog>div{display:flex;justify-content:space-between;gap:8px;font-size:.88rem}.dcard .prog span{color:var(--muted);font-weight:700}
.dcard .bar,.tcls .bar{height:8px;border-radius:999px;background:var(--alt2);overflow:hidden}.dcard .bar em,.tcls .bar em{display:block;height:100%;background:var(--coral)}
.dcard .prog small{color:var(--muted);font-size:.76rem;font-weight:600}
.dtab{width:100%;border-collapse:collapse;font-size:.86rem}.dtab th{text-align:left;font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);padding:6px 8px;border-bottom:1px solid var(--line)}.dtab td{padding:8px;border-bottom:1px solid var(--line);color:var(--ink-2)}
.tiles3{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.tiles3 div{background:var(--alt);border-radius:12px;padding:10px 12px;display:grid;gap:0}.tiles3 b{font-family:var(--disp);font-size:1.3rem}.tiles3 span{font-size:.72rem;color:var(--muted);font-weight:700}
.dlist{list-style:none;margin:0;padding:0;display:grid;gap:6px}.dlist li{display:flex;justify-content:space-between;gap:10px;font-size:.88rem;border-bottom:1px solid var(--line);padding-bottom:6px}.dlist li span{color:var(--muted);font-size:.78rem}
.tcls .th2{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.tcls h2 .chipx{vertical-align:middle;margin-left:6px}
/* ---- deck v2 pieces: vocabulary table · explanation box · situation · bag picker ---- */
:is(.slide,.tbook) .vtab{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden;font-size:clamp(.8rem,1.3vw,1rem)}
:is(.slide,.tbook) .vtab th{background:var(--alt);text-align:left;font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);padding:8px 12px}
:is(.slide,.tbook) .vtab td{padding:7px 12px;border-top:1px solid var(--line);vertical-align:middle}
:is(.slide,.tbook) .vtab td.n{width:32px;color:var(--faint);font-weight:800}.slide .vtab td.w{font-family:var(--kr-disp);font-weight:800;font-size:1.15em;white-space:nowrap}.slide .vtab td.m{color:var(--ink-2);font-weight:600}.slide .vtab td.x{font-family:var(--kr);color:var(--muted);font-size:.9em}.slide .vtab td.s{width:36px;text-align:right}
:is(.slide,.tbook) .vtab .say{border:0;background:transparent;cursor:pointer;font-size:1rem;padding:2px 4px}
:is(.slide,.tbook) .xpl{display:grid;gap:10px;grid-template-columns:1fr 1fr;margin-top:4px}
:is(.slide,.tbook) .xpl .ko{font-family:var(--kr);display:grid;gap:4px}.slide .xpl .ko p{margin:0;background:#fff;border:1px solid var(--line);border-left:4px solid var(--coral);border-radius:8px;padding:8px 12px;font-size:clamp(.9rem,1.5vw,1.1rem);font-weight:700}
:is(.slide,.tbook) .xpl .en{background:var(--sky-soft);border-radius:10px;padding:10px 14px;font-size:clamp(.78rem,1.2vw,.95rem);color:var(--ink-2);line-height:1.5}
:is(.slide,.tbook) .xpl .en small{display:block;font-size:.66rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--sky-deep);margin-bottom:4px}
:is(.slide,.tbook) .situ{font-family:var(--kr);font-size:clamp(.85rem,1.4vw,1.05rem);color:var(--ink-2);background:var(--honey-soft);border-radius:10px;padding:8px 14px;margin:0}
:is(.slide,.tbook) .situ small{display:block;font-family:var(--body);font-size:.8em;color:var(--muted);font-weight:600}
:is(.slide,.tbook) .bagpick{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px}
:is(.slide,.tbook) .bagw{font:inherit;font-family:var(--kr-disp);font-weight:800;font-size:clamp(.95rem,1.8vw,1.3rem);padding:8px 16px;border-radius:12px;border:1.5px solid var(--line-2);background:#fff;cursor:pointer;color:var(--ink)}
:is(.slide,.tbook) .bagw.on{background:var(--leaf-soft);border-color:var(--leaf);color:var(--leaf-deep)}.slide .bagw.on::after{content:" ✓"}
:is(.slide,.tbook) .bagw.off{background:var(--alt);color:var(--faint);text-decoration:line-through}
@media (max-width:640px){:is(.slide,.tbook) .xpl{grid-template-columns:1fr}.tiles3{grid-template-columns:1fr 1fr 1fr}.segc button{padding:8px 12px}}

/* ---- v13 (2026-10-01): HH-format slides — stage header · side tab · footer · cover · vocabulary cards · plan table · listening checklist · 차시 switch ---- */
.slide.hh{padding-top:0;gap:clamp(8px,1.3vw,16px)}
:is(.slide,.tbook) .shd{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:start;padding:clamp(12px,2vw,24px) 0 10px;border-bottom:2px solid var(--line)}
:is(.slide,.tbook) .sico{width:clamp(34px,4.6vw,52px);height:clamp(34px,4.6vw,52px);border-radius:50%;background:var(--cs);display:grid;place-items:center;color:var(--cd);margin-top:2px}
:is(.slide,.tbook) .sico svg{width:58%;height:58%;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
:is(.slide,.tbook) .sttl{display:grid;gap:3px;min-width:0}
:is(.slide,.tbook) .stg{font-family:var(--kr-disp);font-weight:800;font-size:clamp(.72rem,1.1vw,.86rem);color:var(--cd);display:flex;gap:8px;align-items:baseline}
:is(.slide,.tbook) .stg small{font-family:var(--body);font-size:.85em;color:var(--muted);font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.slide.hh h3{font-size:clamp(1.05rem,2.3vw,1.65rem);line-height:1.25}
.slide.hh h3 small{margin-top:3px}
:is(.slide,.tbook) .spill{font-family:var(--kr);font-weight:800;font-size:clamp(.62rem,.95vw,.76rem);color:#fff;background:var(--cd);padding:7px 12px 6px;border-radius:0 0 10px 10px;letter-spacing:.06em;margin-top:calc(-1 * clamp(12px,2vw,24px))}
:is(.slide,.tbook) .sft{position:absolute;left:clamp(16px,3vw,44px);right:clamp(16px,3vw,44px);bottom:7px;display:flex;justify-content:space-between;font-size:.64rem;color:var(--faint);font-weight:700;pointer-events:none}
/* v37: the cover is light too — warm paper gradient, ink type, coral grammar mark */
.slide.cover{background:linear-gradient(160deg,#FFF8E8 0%,#FFEDE9 100%);color:var(--ink);align-content:center;gap:16px}
.slide.cover h3{color:var(--ink);display:grid;gap:6px;font-size:1rem}
.slide.cover .cv-lv{font-family:var(--body);font-size:clamp(.72rem,1.1vw,.9rem);color:var(--coral-deep);letter-spacing:.12em;text-transform:uppercase;font-weight:800}
.slide.cover .cv-t{font-size:clamp(1.8rem,5vw,3.6rem);line-height:1.15;font-weight:800}
.slide.cover h3 small{color:var(--ink-2)}
.slide.cover .cv-g{display:flex;flex-wrap:wrap;gap:10px;align-items:center;font-family:var(--kr-disp);font-weight:800;font-size:clamp(1rem,2.2vw,1.6rem);margin:0}
.slide.cover .cv-g span{font-family:var(--body);font-size:.58em;color:var(--muted);letter-spacing:.1em;text-transform:uppercase}
.slide.cover .cv-g mark{background:var(--coral);color:#fff;padding:4px 14px;border-radius:12px}
.slide.cover .cv-sub{color:var(--ink-2);font-size:clamp(.74rem,1.1vw,.92rem);font-weight:600;margin:0}
.slide.cover .sft{color:var(--faint)}
:is(.slide,.tbook) .vgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:8px}
:is(.slide,.tbook) .vcard{position:relative;background:#fff;border:1.5px solid var(--line);border-radius:12px;padding:14px 10px 10px;display:grid;gap:3px;text-align:center;min-height:74px;align-content:center}
:is(.slide,.tbook) .vcard i{position:absolute;left:6px;top:6px;width:20px;height:20px;border-radius:50%;background:var(--ink);color:#fff;font-style:normal;font-size:.62rem;font-weight:800;display:grid;place-items:center}
:is(.slide,.tbook) .vcard>span{font-family:var(--kr-disp);font-weight:800;font-size:clamp(1rem,1.9vw,1.35rem)}
:is(.slide,.tbook) .vcard>small{font-size:clamp(.62rem,.95vw,.78rem);color:var(--muted);font-weight:600}
:is(.slide,.tbook) .vcard .say{position:absolute;right:4px;top:4px;border:0;background:transparent;cursor:pointer;color:var(--muted);width:22px;height:22px;padding:0}
:is(.slide,.tbook) .vcard .say svg,:is(.slide,.tbook) .vtab .say svg{width:18px;height:18px;display:block;color:var(--muted)}
:is(.slide,.tbook) .vcard.q{background:var(--alt);border-style:dashed}
:is(.slide,.tbook) .vcard .blank{display:inline-block;border:0;color:var(--coral-deep);cursor:pointer;min-width:0}
:is(.slide,.tbook) .vcard .blank.show{color:var(--ink)}
:is(.slide,.tbook) .vcard small.blank{color:var(--coral-deep)}
:is(.slide,.tbook) .vcard small.blank.show{color:var(--ink-2)}
:is(.slide,.tbook) .vtab th{color:var(--ink-2)}
:is(.slide,.tbook) .sft{color:#5B6472}
.slide.cover .cv-g mark{background:var(--coral-deep)}
/* ---- v14 (2026-10-01): textbook tags · concept slide · dark cover pills ---- */
.gtags{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.tg{display:inline-flex;align-items:center;gap:7px;border:1.5px solid var(--line-2);border-radius:999px;padding:3px 11px 3px 4px;font-size:clamp(.66rem,1vw,.78rem);font-weight:700;background:#fff;color:var(--ink-2);font-family:var(--body);white-space:nowrap}
.tg b{background:var(--ink);color:#fff;border-radius:999px;padding:3px 9px;font-size:.84em;letter-spacing:.06em;text-transform:uppercase;font-weight:800}
.tg.off{border-style:dashed;color:var(--muted);background:transparent}
.tg.off b{background:var(--alt2);color:var(--muted)}
:is(.slide,.tbook) .tgl{margin:14px 0 0;font-size:.7rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.slide.cover .gtags{margin:2px 0 6px}
.slide.cover .tg{background:#fff;border-color:var(--line-2);color:var(--ink)}
.slide.cover .tg b{background:var(--honey);color:var(--ink)}
.slide.cover .tg.off{opacity:.6}
.slide.cover .tg.off b{background:var(--alt2);color:var(--muted)}
:is(.slide,.tbook) .fig{background:#fff;border:1.5px solid var(--line);border-radius:14px;padding:10px 14px 6px}
:is(.slide,.tbook) .fig svg{display:block;width:100%;max-height:230px;margin:0 auto}
:is(.slide,.tbook) .cpt{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:4px}
:is(.slide,.tbook) .cpt div{background:#fff;border:1.5px solid var(--line);border-radius:12px;padding:12px 14px;display:grid;gap:3px}
:is(.slide,.tbook) .cpt div:nth-child(1){border-top:5px solid var(--coral)}.slide .cpt div:nth-child(2){border-top:5px solid var(--sky)}.slide .cpt div:nth-child(3){border-top:5px solid var(--ink)}
:is(.slide,.tbook) .cpt b{font-family:var(--kr-disp);font-size:clamp(1.2rem,2.4vw,1.8rem);font-weight:800}
:is(.slide,.tbook) .cpt span{font-weight:800;font-size:clamp(.8rem,1.2vw,.95rem);color:var(--ink-2)}
:is(.slide,.tbook) .cpt small{font-size:clamp(.72rem,1.05vw,.84rem);color:var(--muted);font-weight:600;line-height:1.45}
@media (max-width:640px){:is(.slide,.tbook) .cpt{grid-template-columns:1fr}.slide .fig svg{max-height:170px}}
/* HH-style forms table: one grammar point, its variants as columns; 기초 연습 = word + ending → form.
   .ftw is a block wrapper: a bare <table> as a grid item was given too short a track and the next block overlapped it. */
:is(.slide,.tbook) .ftw{display:block;width:100%}
:is(.slide,.tbook) .ftab{width:100%;border-collapse:collapse;background:#fff;border:1.5px solid var(--line);border-radius:14px;overflow:hidden;font-family:var(--kr);table-layout:fixed}
:is(.slide,.tbook) .ftab th.ink{color:var(--ink);font-size:clamp(1rem,2vw,1.45rem)}
:is(.slide,.tbook) .ftab.q tbody td{text-align:left;padding-left:clamp(12px,2vw,24px)}
:is(.slide,.tbook) .tense{display:flex;flex-wrap:wrap;gap:6px 16px;align-items:center;background:var(--alt);border:1px solid var(--line);border-radius:10px;padding:8px 14px;font-family:var(--kr);font-weight:700;font-size:clamp(.8rem,1.25vw,1rem);color:var(--ink)}
:is(.slide,.tbook) .tense b{color:var(--leaf-deep);font-family:var(--body)}.slide .tense.no b{color:var(--coral-deep)}
:is(.slide,.tbook) .tense span i{font-style:normal;color:var(--faint);margin:0 2px}
:is(.slide,.tbook) .tense em{font-style:normal;color:var(--leaf-deep);text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:4px}
:is(.slide,.tbook) .tense.no span{color:var(--ink-2)}
:is(.slide,.tbook) .tense small{flex-basis:100%;color:var(--muted);font-weight:600;font-size:.86em}
:is(.slide,.tbook) .vtab.wt td.w{white-space:normal;font-size:1.08em}
:is(.slide,.tbook) .vtab.wt td.n{width:28px;border-left:1px solid var(--line)}.slide .vtab.wt td.n:first-child{border-left:0}
:is(.slide,.tbook) .vtab.wt td.m{font-size:.95em}
:is(.slide,.tbook) .vtab.wt tr:first-child td{border-top:0}
:is(.slide,.tbook) .ftab th,:is(.slide,.tbook) .ftab td{border:1px solid var(--line);padding:clamp(8px,1.2vw,14px) clamp(8px,1.2vw,14px);text-align:center;vertical-align:middle}
:is(.slide,.tbook) .ftab th.f{font-family:var(--kr-disp);font-size:clamp(1.1rem,2.4vw,1.8rem);font-weight:800;background:var(--alt);border-bottom-width:2px}
:is(.slide,.tbook) .ftab th.coral,:is(.slide,.tbook) .ftab b.coral{color:var(--coral-deep)}.slide .ftab th.sky,:is(.slide,.tbook) .ftab b.sky{color:var(--sky-deep)}.slide .ftab th.leaf,:is(.slide,.tbook) .ftab b.leaf{color:var(--leaf-deep)}.slide .ftab th.lilac,:is(.slide,.tbook) .ftab b.lilac{color:#6D4FC7}
:is(.slide,.tbook) .ftab tr.when td{font-family:var(--body);font-size:clamp(.72rem,1.05vw,.88rem);font-weight:700;color:var(--muted);background:#fff;padding-top:6px;padding-bottom:6px}
:is(.slide,.tbook) .ftab tbody td{font-size:clamp(.95rem,1.7vw,1.3rem);font-weight:700;color:var(--ink);line-height:1.5}
:is(.slide,.tbook) .ftab tbody td i{font-style:normal;color:var(--faint);margin:0 2px}
:is(.slide,.tbook) .ftab tbody td b{font-weight:800}
:is(.slide,.tbook) .ftab tbody td b em{font-style:normal;text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:4px}
:is(.slide,.tbook) .ftab .blank{display:inline-block;min-width:3.2em;border-bottom:3px solid var(--coral);color:var(--coral-deep);font-weight:800;cursor:pointer;line-height:1.2}
:is(.slide,.tbook) .ftab .blank.show{border-color:transparent;color:var(--ink)}
@media (max-width:640px){:is(.slide,.tbook) .ftab th.f{font-size:1rem}.slide .ftab tbody td{font-size:.86rem}.slide .ftab th,:is(.slide,.tbook) .ftab td{padding:6px 5px}}
/* notice board */
.notice .nh h3 a{color:inherit;text-decoration:none}.notice .nh h3 a:hover{color:var(--coral-deep)}
.notice li a{color:var(--ink);text-decoration:none;font-weight:700}.notice li a:hover{color:var(--coral-deep)}
.board-f{margin-bottom:18px}
.board{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.post-c{display:grid;gap:6px;align-content:start;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:20px 22px;text-decoration:none;color:var(--ink);position:relative;transition:border-color .15s,transform .15s}
.post-c:hover{border-color:var(--ink);transform:translateY(-2px)}
.post-c small{font-size:.72rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.post-c b{font-size:1.08rem;line-height:1.35}
.post-c span{font-size:.9rem;color:var(--ink-2);line-height:1.5}
.post-c em{font-style:normal;font-size:.82rem;font-weight:800;color:var(--sky-deep);margin-top:4px}
.post-c .pin{position:absolute;right:14px;top:14px;font-size:.62rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;background:var(--honey-soft);color:var(--honey-deep);border-radius:999px;padding:3px 9px}
.post{max-width:72ch;font-size:1.02rem;line-height:1.7;color:var(--ink-2)}
.post p{margin:0 0 14px}
.bk{display:inline-block;margin-bottom:12px;font-size:.84rem;font-weight:800;text-decoration:none;color:var(--ink-2)}
.pform{margin-top:28px;border-top:5px solid var(--honey)}
.pform select{font:inherit;padding:12px 14px;border:1.5px solid var(--line-2);border-radius:12px;background:#fff;width:100%}
.pform textarea{min-height:140px}
/* sign in */
.gbox{display:grid;gap:12px;align-content:start}
.gbtn{display:inline-flex;align-items:center;gap:12px;font:inherit;font-weight:800;font-size:1rem;padding:12px 20px;border-radius:14px;border:1.5px solid var(--line-2);background:#fff;color:var(--ink);cursor:pointer;justify-self:start;min-height:var(--h-btn,48px)}
.gbtn svg{width:22px;height:22px}
.gbtn:hover{border-color:var(--ink)}
.gbtn[disabled]{opacity:.55;cursor:not-allowed}
.linkbtn{font:inherit;font-weight:800;color:var(--sky-deep);background:none;border:0;padding:0;cursor:pointer;text-decoration:underline}
@media (max-width:640px){.quiz .lvtrack{flex-wrap:wrap}}
:is(.slide,.tbook) .plan{width:100%;border-collapse:collapse;font-size:clamp(.72rem,1.05vw,.88rem);background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden}
:is(.slide,.tbook) .plan th{background:var(--ink);color:#fff;text-align:left;padding:7px 10px;font-size:.64rem;letter-spacing:.08em;text-transform:uppercase}
:is(.slide,.tbook) .plan td{padding:6px 10px;border-top:1px solid var(--line);vertical-align:top;color:var(--ink-2)}
:is(.slide,.tbook) .plan td.st{font-family:var(--kr);font-weight:800;color:var(--ink);white-space:nowrap}
:is(.slide,.tbook) .plan td.mn{font-variant-numeric:tabular-nums;font-weight:800;white-space:nowrap;color:var(--ink)}
:is(.slide,.tbook) .plan tfoot td{background:var(--alt);color:var(--muted);font-weight:600}
:is(.slide,.tbook) .plan.toc tr.on td{background:var(--honey-soft);color:var(--ink);font-weight:800}
:is(.slide,.tbook) .plan.toc td.kr{font-family:var(--kr);font-weight:700;white-space:nowrap}
:is(.slide,.tbook) .plan.toc td.g{font-size:.92em}
:is(.slide,.tbook) .frames{display:grid;gap:8px}
:is(.slide,.tbook) .frame{margin:0;font-family:var(--kr-disp);font-size:clamp(1rem,2.1vw,1.55rem);font-weight:700;background:#fff;border:1.5px solid var(--line);border-radius:12px;padding:10px 16px;line-height:1.7}
:is(.slide,.tbook) .frame u{text-decoration:none;border-bottom:3px solid var(--coral);padding:0 1.4em}
:is(.slide,.tbook) .ck{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
:is(.slide,.tbook) .ck label{display:flex;gap:10px;align-items:center;background:#fff;border:1.5px solid var(--line);border-radius:12px;padding:10px 12px;font-family:var(--kr);font-weight:700;font-size:clamp(.9rem,1.5vw,1.15rem);cursor:pointer}
:is(.slide,.tbook) .ck input{width:18px;height:18px;accent-color:var(--coral);margin:0}
:is(.slide,.tbook) .culture.expr div em{font-style:normal;font-size:.7rem;color:var(--coral-deep);font-weight:800}
.slide ul.rules{margin:8px 0 0;padding-left:1.2em;color:var(--ink-2);font-size:clamp(.8rem,1.3vw,1rem);display:grid;gap:4px}
.slide ol.qs{margin:0;padding-left:1.4em;font-family:var(--kr);font-size:clamp(1rem,2vw,1.5rem);font-weight:700;display:grid;gap:8px}
:is(.slide,.tbook) .goal.pts div::before{content:"①";color:var(--coral-deep)}
:is(.slide,.tbook) .goal.pts div:nth-child(2)::before{content:"②"}
:is(.slide,.tbook) .goal.pts div:nth-child(3)::before{content:"③"}
:is(.slide,.tbook) .bub .ans{color:var(--leaf-deep);font-weight:800}
.partsw{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0 0}
.partsw a{display:grid;gap:2px;flex:1 1 220px;text-decoration:none;color:var(--ink);background:#fff;border:1.5px solid var(--line);border-radius:12px;padding:10px 14px;min-height:var(--h-btn)}
.partsw a b{font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.partsw a span{font-family:var(--kr);font-weight:700;font-size:.95rem}
.partsw a.on{border-color:var(--ink);background:var(--ink);color:#fff}
.partsw a.on b{color:var(--honey)}
.loading{display:grid;place-items:center;min-height:40vh;color:var(--muted);font-weight:700;gap:12px}
.loading i{width:28px;height:28px;border-radius:50%;border:3px solid var(--line);border-top-color:var(--coral);animation:spin .9s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media (max-width:640px){:is(.slide,.tbook) .shd{grid-template-columns:auto 1fr}.slide .spill{display:none}.slide .vgrid{grid-template-columns:repeat(3,1fr)}.slide .plan.toc td.kr{white-space:normal}}


/* v35 한글 덱 (1A-1 · 1A-2, site3/l2h.js) — 자모 카드 · 음절표 · 받침 소리표 · 최소 대립쌍 듣기 · 받아쓰기 */
.hgl{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:10px}
.hgl .hgc{background:#fff;border:1.5px solid var(--line);border-radius:14px;padding:12px 10px 10px;display:grid;justify-items:center;gap:4px;position:relative;text-align:center}
.hgl .hgc b{font-family:var(--kr-disp);font-size:clamp(2.2rem,5vw,3.4rem);line-height:1;color:var(--ink);font-weight:800}
.hgl .hgc span{font-weight:800;color:var(--coral-deep);font-size:.92rem}
.hgl .hgc small{font-size:.72rem;color:var(--muted);line-height:1.35}
.hgl .hgc .say{position:absolute;top:6px;right:6px}
.hgl.big{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.hgl.big .hgc b{font-size:clamp(3rem,7vw,4.8rem)}
.hgcb td{font-family:var(--kr-disp);font-size:clamp(1rem,2vw,1.4rem);font-weight:800}
.hgcb td .say{vertical-align:middle}
.hgt{border-collapse:collapse;font-family:var(--kr);font-size:clamp(.88rem,1.6vw,1.2rem);margin:0 auto}
.hgt th,.hgt td{border:1px solid var(--line);padding:5px 4px;text-align:center;min-width:2.1em}
.hgt th{background:var(--alt);font-weight:800;color:var(--ink)}
.hgt th small{display:block;font-size:.6em;color:var(--muted);font-weight:700;letter-spacing:0}
.hgt td{font-weight:700}
.hgt tbody tr:nth-child(even) td{background:#FFFBF2}
.hgb{width:100%;border-collapse:collapse;font-size:clamp(.86rem,1.4vw,1.05rem)}
.hgb th,.hgb td{border-bottom:1px solid var(--line);padding:8px 10px;text-align:left;vertical-align:middle}
.hgb th{font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.hgb td.l{font-family:var(--kr-disp);font-size:1.35em;font-weight:800;white-space:nowrap}
.hgb td.s{color:var(--coral-deep);font-weight:800;white-space:nowrap}
.lpair{display:grid;gap:8px}
.lpair > div{display:grid;grid-template-columns:auto auto 1fr auto;align-items:center;gap:12px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:8px 12px}
.lpair i{font-style:normal;font-weight:800;color:var(--faint);font-size:.8rem;min-width:1.2em}
.lpair .opts{display:flex;gap:8px;flex-wrap:wrap}
.lpair .opts span{font-family:var(--kr-disp);font-size:clamp(1.1rem,2.4vw,1.7rem);font-weight:800;padding:4px 14px;border-radius:10px;background:var(--alt)}
.lpair .blank{font-family:var(--kr-disp);font-weight:800;min-width:3.5em;text-align:center}
.dict{display:grid;gap:8px;grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
.dict > div{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:10px 12px}
.dict i{font-style:normal;font-weight:800;color:var(--faint);font-size:.8rem}
.dict .blank{font-family:var(--kr-disp);font-size:1.3rem;font-weight:800;min-width:5em;text-align:center;flex:1}
.vgrid .vcard em.br{font-style:normal;font-size:.68rem;color:var(--faint);letter-spacing:.02em}
.vgrid.big{grid-template-columns:repeat(auto-fill,minmax(170px,1fr))}
.vgrid.big .vcard span{font-size:clamp(1.7rem,4vw,2.8rem)}


/* ============================================================================================================
   v37 (2026-10-02, 대표: "전체적으로 한 번 싹 디자인 잡아줘. 토스와 원티드 느낌으로") — site-wide restyle, appended last so it wins.
   Principles: white page, one accent (coral) used sparingly, blue-grey neutrals, 8-pt spacing, 16–24px radii, hairline borders,
   shadows only on hover, big tight headings, pill buttons, no navy blocks or photo overlays. Brand colours and names unchanged.
   ============================================================================================================ */
:root{--alt:#F7F8FA;--alt2:#EEF1F5;--line:#EDF0F4;--line-2:#DEE3EA;--muted:#6B7684;--faint:#9AA3AF;--ink-2:#333D4B;--r:16px;--r-lg:20px;--r-xl:24px;
  --sh:0 1px 2px rgba(20,33,58,.04),0 8px 24px -16px rgba(20,33,58,.16);--sh-lift:0 2px 6px rgba(20,33,58,.05),0 20px 40px -20px rgba(20,33,58,.22)}
body{background:#fff;line-height:1.6}
h1,h2,h3,h4{letter-spacing:-.025em}
h1{font-size:clamp(2rem,4.6vw,3.4rem);line-height:1.1}
h2{font-size:clamp(1.5rem,3vw,2.3rem)}
.lead{color:var(--ink-2);font-size:clamp(1rem,1.3vw,1.12rem);line-height:1.65}
.eyebrow{font-size:.74rem;letter-spacing:.1em;color:var(--coral-deep)}
section{padding-block:clamp(56px,7vw,104px)}
.wrap{max-width:1120px}
/* buttons: pills, two tones (dark · coral) + a quiet outline */
.btn,.btn{border-radius:999px;height:48px;padding:0 24px;font-weight:800;border:1.5px solid transparent;box-shadow:none}
.btn-sm{height:40px;padding:0 18px;font-size:.88rem}
.btn-o{background:#fff;border-color:var(--line-2);color:var(--ink)}.btn-o:hover{border-color:var(--ink);transform:none;box-shadow:none}
.btn-c:hover,.btn-k:hover{transform:none;box-shadow:none}
/* navigation */
.nav{background:rgba(255,255,255,.86);border-bottom:1px solid var(--line)}
.nav nav a{border-radius:999px;font-weight:700}
.nav nav a.on{background:var(--alt2);color:var(--ink)}
/* hero: white, type-first, photo as a rounded card on the right */
.hero{background:#fff;height:auto;min-height:clamp(480px,66vh,680px)}
.hero::after{display:none}
.hero .ph{inset:clamp(56px,8vw,96px) 0 clamp(56px,8vw,96px) 54%;border-radius:28px;transform:none;box-shadow:var(--sh-lift)}
.hero .ph.on{animation:none}
.hero .wrap{align-content:center;padding-top:clamp(56px,8vw,96px);padding-bottom:clamp(56px,8vw,96px);color:var(--ink)}
.hero .eyebrow{color:var(--coral-deep)}
.hero h1{color:var(--ink);text-shadow:none;max-width:12ch}
.hero h1 em,.hero h1 i,.hero h1 .ac{color:var(--coral-deep);font-style:normal}
.hero .lead{color:var(--ink-2);text-shadow:none;max-width:44ch}
.hero .btn-o{background:#fff;border-color:var(--line-2);color:var(--ink);backdrop-filter:none}
.hero .btn-o:hover{border-color:var(--ink)}
.hero .typed,.hero .kr-line{color:var(--muted)}
@media (max-width:900px){.hero .ph{display:none}.hero{min-height:0}}
/* soft bands become plain white panels with a hairline */
.stats{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.band,.align{background:var(--alt);border:1px solid var(--line)}
.ph2{background:#fff;border-bottom:1px solid var(--line)}
/* cards everywhere: hairline, 20px radius, shadow on hover only */
.tcard,.pcard,.lcard,.lrow,.ppnote,.pillar,.ccard,.course,.card,.deckwrap,.lprog,.termcard,.flow5 div,.pillars > div,.online > div,.how > div{border-color:var(--line);border-radius:var(--r-lg);box-shadow:none}
a.lrow:hover,.pcard:hover,.lcard:hover,.tcard:hover{box-shadow:var(--sh-lift);border-color:var(--line-2);transform:none}
.deckwrap{background:#fff;padding:clamp(8px,1.2vw,14px)}
.stage{border-radius:16px}
.stk{border-radius:999px;background:var(--alt2);color:var(--ink-2)}
.stk.c{background:var(--coral-soft);color:var(--coral-deep)}
.tag{background:var(--alt2);color:var(--muted)}
/* chips, tabs, pickers */
.lvtabs button,.lvtabs span,.lvtabs a,.flow span,.lchip,.tabs button,.shopbar button,.lvbar button{border-color:var(--line-2)}
.flow span.on{background:var(--ink);color:#fff}
/* footer: quiet */
footer{background:#fff;border-top:1px solid var(--line);color:var(--muted)}
/* slides keep their own look but lose heavy fills */
:is(.slide,.tbook) .sec{background:var(--alt2)}
.deckbar .tog{border-color:var(--line-2)}


/* v38 (2026-10-03): vocabulary check grid modes · antonym pair table · cover with several grammar blocks */
.vtools{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-bottom:2px}
.vtools button{font:inherit;font-weight:800;font-size:.8rem;padding:6px 14px;border-radius:999px;border:1.5px solid var(--line-2);background:#fff;color:var(--ink);cursor:pointer}
.vtools button.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.vtools small{color:var(--faint);font-weight:600;margin-left:4px}
:is(.slide,.tbook) .vgrid[data-mode="ko"] .vcard>small,:is(.slide,.tbook) .vgrid[data-mode="en"] .vcard>span{visibility:hidden}
:is(.slide,.tbook) .vgrid[data-mode] .vcard{cursor:pointer}
:is(.slide,.tbook) .vgrid[data-mode] .vcard.peek>small,:is(.slide,.tbook) .vgrid[data-mode] .vcard.peek>span{visibility:visible;color:var(--coral-deep)}
:is(.slide,.tbook) .vgrid[data-mode] .vcard.q{background:#fff;border-style:solid}
:is(.slide,.tbook) .ptab td.arr{color:var(--coral-deep);font-weight:800;text-align:center;font-size:1.1em}
:is(.slide,.tbook) .ptab td.w{font-family:var(--kr-disp);font-weight:800;white-space:nowrap}
:is(.slide,.tbook) .ptab td.m small{display:block;color:var(--faint);font-size:.72em;font-weight:600}
:is(.slide,.tbook) .ptab .say{vertical-align:middle;border:0;background:transparent;cursor:pointer;color:var(--muted);width:22px;height:22px;padding:0}
:is(.slide,.tbook) .ptab .say svg{width:16px;height:16px}
.slide.cover .cv-blk{display:grid;gap:6px;margin-bottom:6px}


/* ============================================================================================================
   v39 (2026-10-03): subscription-first home · pricing page · learner dashboard · workbook · lesson rows with a workbook link
   ============================================================================================================ */
.hero .hnote{color:var(--muted);font-size:.86rem;font-weight:600;margin-top:12px}
.flow3{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.fstep{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:24px;display:grid;gap:8px;align-content:start}
.fstep .st{font-family:var(--disp);font-size:.78rem;font-weight:800;letter-spacing:.1em;color:var(--coral-deep)}
.fstep h3{font-size:1.1rem}
.fstep p{color:var(--muted);font-size:.92rem}
.fstep a{font-weight:800;font-size:.86rem;text-decoration:none;margin-top:4px}
.feats{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.fc{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:20px;display:grid;gap:8px;align-content:start}
.fc .ic{width:40px;height:40px;border-radius:12px;background:var(--coral-soft);color:var(--coral-deep);display:grid;place-items:center}
.fc .ic svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.fc b{font-size:1rem}
.fc p{color:var(--muted);font-size:.88rem}
.rail{display:grid;gap:10px;grid-template-columns:repeat(4,minmax(0,1fr))}
.rl{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:18px;display:grid;gap:4px;text-decoration:none;color:var(--ink);transition:box-shadow .2s,border-color .2s}
.rl:hover{box-shadow:var(--sh);border-color:var(--line-2)}
.rl .lv{font-family:var(--disp);font-size:1.4rem;font-weight:800;color:var(--ink)}
.rl b{font-size:.92rem}
.rl small{color:var(--muted);font-size:.8rem}
.rl em{position:absolute;top:14px;right:14px;font-style:normal;font-size:.68rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;background:var(--leaf-soft);color:var(--leaf-deep);border-radius:999px;padding:3px 9px}
.rl.free{border-color:var(--leaf)}
@media (max-width:760px){.rail{grid-template-columns:repeat(2,minmax(0,1fr))}}
.plans{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));align-items:stretch}
.plan{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r-xl);padding:26px 24px;display:grid;gap:8px;align-content:start}
.plan.hi{border-color:var(--ink);box-shadow:var(--sh)}
.plan .pop{position:absolute;top:-12px;left:24px;background:var(--ink);color:#fff;font-size:.68rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;border-radius:999px;padding:4px 10px}
.plan h3{font-size:1.25rem}
.plan .amt{font-family:var(--disp);font-size:2.6rem;font-weight:800;line-height:1;letter-spacing:-.03em;margin-top:6px}
.plan .amt small{font-size:.95rem;color:var(--muted);font-weight:700;margin-left:4px;letter-spacing:0}
.plan .yr{color:var(--muted);font-size:.86rem;font-weight:700;margin:0}
.plan .best{color:var(--ink-2);font-size:.92rem;margin:6px 0 2px}
.plan ul{margin:0;padding:0;list-style:none;display:grid;gap:6px;font-size:.9rem;color:var(--ink-2)}
.plan ul li{padding-left:22px;position:relative}
.plan ul li::before{content:"✓";position:absolute;left:0;color:var(--leaf-deep);font-weight:800}
.plan .row{margin-top:12px}
.plan .row .btn{flex:1 1 auto;justify-content:center}
.cmp{width:100%;border-collapse:collapse;font-size:.92rem}
.cmp th,.cmp td{padding:12px 14px;border-bottom:1px solid var(--line);text-align:left}
.cmp th{font-family:var(--kr-disp);font-size:1rem}
.cmp th small{display:block;font-family:var(--body);font-size:.74rem;color:var(--muted);font-weight:700}
.cmp td.c{text-align:center}
.cmp .yes{color:var(--leaf-deep);font-weight:800}
.cmp .no{color:var(--faint)}
.faq2{display:grid;gap:8px}
.faq2 details{background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px 18px}
.faq2 summary{font-weight:800;cursor:pointer}
.faq2 p{margin:10px 0 0;color:var(--ink-2);font-size:.92rem}
.dash{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.dc{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:22px;display:grid;gap:8px;align-content:start}
.dc.big{grid-column:1 / -1;background:linear-gradient(160deg,#FFF8E8 0%,#fff 60%)}
.dc h3{font-size:1.25rem}
.dc h3 small{font-size:.8rem;color:var(--muted);font-weight:700}
.dc .row{margin-top:6px}
.pchips{display:flex;gap:6px;flex-wrap:wrap}
.pch{width:34px;height:34px;border-radius:50%;border:1.5px solid var(--line-2);display:grid;place-items:center;font-weight:800;font-size:.84rem;color:var(--ink);text-decoration:none;background:#fff}
.pch.half{background:linear-gradient(90deg,var(--coral-soft) 50%,#fff 50%);border-color:var(--coral)}
.pch.full{background:var(--coral);border-color:var(--coral);color:#fff}
.pch.wb{box-shadow:0 0 0 3px #fff,0 0 0 5px var(--leaf)}
.pch.off{color:var(--faint);border-style:dashed}
.lrow .lact{display:grid;gap:6px;justify-items:end}
.lrow .lt a{text-decoration:none;color:inherit}
.lrow .lt a:hover b{color:var(--coral-deep)}
.lrow .lwb{font-size:.78rem;font-weight:800;text-decoration:none;color:var(--leaf-deep);background:var(--leaf-soft);border-radius:999px;padding:3px 10px}
.lrow .lwb.off{color:var(--faint);background:var(--alt2)}
.lrow:hover{box-shadow:var(--sh);border-color:var(--line-2)}
/* workbook */
.wb{display:grid;gap:16px}
.wbtop{display:grid;grid-template-columns:1fr auto;gap:18px;align-items:start;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:22px}
.ph2 h1 small{display:block;font-family:var(--body);font-size:1rem;color:var(--muted);font-weight:600;margin-top:8px}
.wbtop h2 small{display:block;font-family:var(--body);font-size:.84rem;color:var(--muted);font-weight:600;margin-top:4px}
.wbprog{min-width:220px;display:grid;gap:6px;justify-items:end;text-align:right}
.wbprog b{font-family:var(--disp);font-size:2rem;font-weight:800;line-height:1}
.wbprog small{color:var(--muted);font-weight:700}
.wbprog .bar{width:100%;height:8px;border-radius:999px;background:var(--alt2);overflow:hidden}
.wbprog .bar em{display:block;height:100%;background:var(--leaf);transition:width .4s}
.wbprog .row{gap:6px;justify-content:flex-end}
.wb .mini{font:inherit;font-size:.78rem;font-weight:800;padding:6px 12px;border-radius:999px;border:1.5px solid var(--line-2);background:#fff;color:var(--ink);cursor:pointer}
.wb .mini:hover{border-color:var(--ink)}
.wbp{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:6px 0 8px}
.wbh{display:flex;gap:12px;align-items:center;padding:14px 22px 10px;border-bottom:1px solid var(--line)}
.wbh .n{width:30px;height:30px;border-radius:10px;background:var(--ink);color:#fff;display:grid;place-items:center;font-family:var(--disp);font-weight:800;font-size:.9rem}
.wbh b{font-family:var(--kr-disp);font-size:1.1rem}
.wbh small{display:block;color:var(--muted);font-size:.84rem;font-weight:600}
.wbi{display:grid;grid-template-columns:28px 1fr 28px;gap:12px;padding:16px 22px;border-bottom:1px solid var(--line);align-items:start}
.wbi:last-child{border-bottom:0}
.wbi .num{width:26px;height:26px;border-radius:50%;background:var(--alt2);color:var(--muted);display:grid;place-items:center;font-size:.78rem;font-weight:800;margin-top:2px}
.wbi.ok .num{background:var(--leaf);color:#fff}
.wbi .mark{width:24px;text-align:center;color:var(--leaf-deep);font-weight:800}
.wbi.ok .mark::before{content:"✓"}
.wbi .q{font-family:var(--kr);font-size:1.08rem;font-weight:700;margin:0 0 10px}
.wbi .q u{text-decoration:none;border-bottom:2px solid var(--coral);display:inline-block;min-width:3em}
.wbi .q small{color:var(--muted);font-family:var(--body);font-weight:600}
.wbi .q i{font-style:normal;color:var(--coral-deep)}
.wbi .opts{display:flex;gap:8px;flex-wrap:wrap}
.wbi .opts button,.wbi .chips button,.wbm button{font:inherit;font-family:var(--kr);font-weight:700;font-size:.98rem;padding:9px 16px;border-radius:12px;border:1.5px solid var(--line-2);background:#fff;color:var(--ink);cursor:pointer}
.wbi .opts button.good,.wbm button.done{background:var(--leaf-soft);border-color:var(--leaf);color:var(--leaf-deep)}
.wbi .opts button.bad,.wbm button.bad{background:var(--coral-soft);border-color:var(--coral);color:var(--coral-deep);animation:shake .3s}
.wbi .opts button:disabled:not(.good){opacity:.5}
.wbi .opts.ox button{min-width:64px;font-family:var(--disp);font-size:1.2rem}
@keyframes shake{25%{transform:translateX(-3px)}75%{transform:translateX(3px)}}
.wbm{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.wbm .col{display:grid;gap:6px}
.wbm button.sel{border-color:var(--ink);background:var(--alt)}
.wbi .ans{min-height:48px;border:1.5px dashed var(--line-2);border-radius:12px;padding:10px 14px;font-family:var(--kr-disp);font-size:1.15rem;font-weight:800;display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:10px}
.wbi .ans .ph{color:var(--faint);font-family:var(--body);font-size:.84rem;font-weight:600}
.wbi .ans.good{border-color:var(--leaf);background:var(--leaf-soft)}
.wbi .ans.bad{border-color:var(--coral);background:var(--coral-soft)}
.wbi .chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.wbi .chips button:disabled{opacity:.35}
.wbi .row{gap:6px}
.wbi .pas{background:var(--alt);border-radius:12px;padding:14px 16px;font-family:var(--kr);font-size:1.02rem;line-height:1.8;margin-bottom:12px}
.wbi .sub{margin-top:10px}
.wbi .did{display:inline-flex;gap:8px;align-items:center;font-weight:700;margin:6px 0 10px;cursor:pointer}
.wbi .model .mtxt{margin-top:8px;background:var(--alt);border-radius:12px;padding:10px 14px;font-family:var(--kr)}
.wbi .model .mtxt p{margin:2px 0}
.wbi .akey{display:none;margin-top:10px;font-size:.86rem;color:var(--leaf-deep);background:var(--leaf-soft);border-radius:10px;padding:8px 12px}
.wb.key .akey{display:block}
.wb-keysec{display:none}
@media (max-width:640px){.wbtop{grid-template-columns:1fr}.wbprog{justify-items:start;text-align:left}.wbm{grid-template-columns:1fr}}
@media print{
  .topbar,.nav,.mnav,footer,.fab,.ph2 .row,.wbprog .row,.wb .mini,.wbi .chips,.wbi .model button,.wbi .say{display:none!important}
  body{background:#fff}
  .wb{gap:10px}.wbp,.wbtop{border:0;padding:0}.wbi{padding:8px 0;break-inside:avoid}
  .wbi .opts button,.wbm button{border:1px solid #999;background:#fff;color:#000}
  .wbi .akey{display:none}
  .wb-keysec{display:block;break-before:page;font-size:.9rem}
  .wb-keysec h3{margin-bottom:10px}
}

/* ---- v41 (2026-10-04): speaker buttons · Learn hero · live-class landing · curriculum hub · empty states · four plans ---- */
.say{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border:0;border-radius:50%;background:var(--coral-soft);color:var(--coral-deep);cursor:pointer;vertical-align:middle;padding:0;flex:none;font-size:0;line-height:0;transition:transform .15s,background .15s,color .15s}
.say:hover{transform:scale(1.08);background:#FFE0DA}
.say.on{background:var(--coral);color:#fff;animation:saypulse .9s ease-in-out infinite}
@keyframes saypulse{0%,100%{box-shadow:0 0 0 0 rgba(255,107,87,.35)}50%{box-shadow:0 0 0 7px rgba(255,107,87,0)}}
.say svg{width:20px;height:20px;display:block;color:inherit}
:is(.slide,.tbook) .vcard .say{width:32px;height:32px;right:6px;top:6px;color:var(--coral-deep);background:var(--coral-soft)}
:is(.slide,.tbook) .vcard .say svg,:is(.slide,.tbook) .vtab .say svg,:is(.slide,.tbook) .ptab .say svg{width:18px;height:18px;color:inherit}
:is(.slide,.tbook) .vtab .say,:is(.slide,.tbook) .ptab .say{width:32px;height:32px;background:var(--coral-soft);color:var(--coral-deep)}
.hgl .hgc .say{width:30px;height:30px}
.wbi .say{width:38px;height:38px;margin-right:6px}
.wbi .say svg{width:22px;height:22px}
.deckbar .tog .prem{font-style:normal;font-size:.62rem;font-weight:800;letter-spacing:.04em;background:var(--ink);color:#fff;border-radius:999px;padding:2px 7px;margin-left:2px}
.deckbar .tog.on .prem{background:#3B2A00}
/* Learn page: the self-study promise first, then the library counted in classes, then the Premium courses */
.lhero{background:#fff;border-bottom:1px solid var(--line);padding-block:clamp(36px,5vw,64px) clamp(22px,3vw,36px)}
.lhero h1{margin-top:10px;max-width:18ch}
.lhero .lead{margin-top:12px;max-width:64ch}
.lhero .row{margin-top:18px}
.lwhy{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));margin-top:26px}
.lwhy div{background:var(--alt);border-radius:var(--r-lg);padding:16px 18px;display:grid;gap:6px;align-content:start}
.lwhy b{font-size:.98rem}
.lwhy span{font-size:.88rem;color:var(--ink-2);line-height:1.5}
.crs{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.crs-c{display:grid;grid-template-rows:150px 1fr;text-decoration:none;color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;transition:transform .2s,box-shadow .2s}
.crs-c:hover{transform:translateY(-2px);box-shadow:var(--sh)}
.crs-c .im{background-size:cover;background-position:center}
.crs-c .bd{padding:16px 18px;display:grid;gap:4px;align-content:start}
.crs-c small{font-size:.72rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--coral-deep)}
.crs-c b{font-family:var(--kr-disp);font-size:1.05rem}
.crs-c span{color:var(--muted);font-size:.86rem}
.crs-c em{font-style:normal;font-weight:800;font-size:.84rem;margin-top:8px}
/* live classes: landing blocks, and an empty state that cannot be missed */
.why3{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.nocls{display:grid;gap:10px;justify-items:center;text-align:center;background:var(--honey-soft);border:1px dashed var(--honey-deep);border-radius:var(--r-xl);padding:clamp(28px,5vw,48px) 22px;margin:14px 0}
.nocls b{font-family:var(--kr-disp);font-size:clamp(1.3rem,3vw,1.8rem);line-height:1.25;color:var(--ink)}
.nocls span{max-width:58ch;color:var(--ink-2);font-size:.95rem;line-height:1.55}
.nocls .btn{margin-top:6px}
.nocls.soft{background:var(--alt);border:1px solid var(--line);padding:18px 22px;grid-template-columns:auto 1fr;justify-items:start;text-align:left;align-items:center;gap:6px 16px;margin:0 0 16px}
.nocls.soft b{font-size:1.05rem}
.nocls.soft span{font-size:.9rem;max-width:none}
@media (max-width:640px){.nocls.soft{grid-template-columns:1fr}}
/* curriculum hub */
.whogrid{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.whoc{display:grid;gap:6px;align-content:start;text-decoration:none;color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:18px 20px;transition:transform .2s,box-shadow .2s}
.whoc:hover{transform:translateY(-2px);box-shadow:var(--sh)}
.whoc b{font-size:1rem}
.whoc span{font-size:.88rem;color:var(--ink-2);line-height:1.5}
.whoc em{font-style:normal;font-weight:800;font-size:.82rem;color:var(--coral-deep);margin-top:4px}
.stops.hub{margin-top:14px}
@media (max-width:900px){.stops.hub{grid-template-columns:repeat(2,1fr)}}
/* class price cards are links now */
a.price-c{text-decoration:none;color:var(--ink);transition:transform .2s,box-shadow .2s,border-color .2s}
a.price-c:hover{transform:translateY(-2px);box-shadow:var(--sh);border-color:var(--ink)}
a.price-c .go{font-size:.84rem;font-weight:800;color:var(--coral-deep);margin-top:4px}
/* four plans side by side on wide screens */
@media (min-width:1100px){.plans{grid-template-columns:repeat(4,1fr)}}
.plan .amt small{white-space:nowrap}
.eyebrow .prem{font-style:normal;font-size:.62rem;font-weight:800;letter-spacing:.04em;background:var(--ink);color:#fff;border-radius:999px;padding:2px 7px;margin-left:6px;vertical-align:middle}

/* ---- v42 (2026-10-04): course landing pages built for ad traffic (Culture · Moms · Business) + live-class hero ---- */
.khero.lp{padding-block:clamp(28px,4vw,52px)}
.khero.lp h1{max-width:22ch}
.khero.lp .lead{max-width:60ch}
.lp-split{grid-template-columns:1.1fr .9fr}
@media (max-width:900px){.lp-split{grid-template-columns:1fr}}
.lp-trust{margin-top:12px;font-size:.82rem}
.ph2.lp .checks{max-width:640px;margin-top:16px}
.lp-pains{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.pain{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:22px;display:grid;gap:8px;align-content:start}
.pain b{font-family:var(--kr-disp);font-size:1.1rem;line-height:1.35}
.pain p{color:var(--ink-2);font-size:.92rem;line-height:1.55;margin:0}
.lp-parts{margin-top:4px}
.lp-how{display:grid;gap:18px;grid-template-columns:1.4fr .8fr;align-items:start}
@media (max-width:900px){.lp-how{grid-template-columns:1fr}}
.pricecard{background:#fff;border:1px solid var(--ink);border-radius:var(--r-xl);padding:24px;display:grid;gap:10px;box-shadow:var(--sh)}
.pricecard .amt{font-family:var(--disp);font-size:2.6rem;font-weight:800;line-height:1}
.pricecard .amt small{font-size:1rem;color:var(--muted);font-weight:700;margin-left:6px}
.pricecard p{color:var(--ink-2);margin:0}
.pricecard .checks{margin-top:4px;font-size:.9rem}
.pricecard .btn{width:100%;margin-top:6px}
.whonot{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.whonot > div{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:22px}
.whonot .checks{margin-top:12px}
.checks.no li::before{content:"–";background:var(--alt2);color:var(--muted)}
.tgrid.one{max-width:860px}
.lpbar,.lpbar-space{display:none}
@media (max-width:900px){
  .lpbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:40;background:#fff;border-top:1px solid var(--line);padding:10px 16px calc(10px + env(safe-area-inset-bottom));gap:12px;align-items:center;justify-content:space-between;box-shadow:0 -8px 24px rgba(20,33,58,.08)}
  .lpbar b{font-family:var(--disp);font-size:1.2rem;line-height:1.1}
  .lpbar small{display:block;color:var(--muted);font-size:.72rem;font-weight:700}
  .lpbar .btn{flex:none;padding-inline:16px;white-space:nowrap}
  .lpbar-space{display:block;height:88px}
}

/* ---- v43 (2026-10-04 night): the "not a template" layer — blobs · stickers · serif italic accents · phrase ticker · tilt cards · count-up · pastel section rhythm · dashboard tiles.
   Target: late-teens / twenties women who love Korean (user). Restyles home, Learn, course landings, live classes and My account; no data changes. ---- */
:root{--serif:"Fraunces","Noto Serif KR",Georgia,serif;--hand:"Caveat","Nanum Pen Script",cursive;--lilac:#B894F6;--lilac-soft:#F3ECFF;--mint:#3FC48F;--mint-soft:#E6F8EF;--peach:#FF9C84;--peach-soft:#FFE9E2;--butter:#FFE28A;--butter-soft:#FFF6D6}
h1 .ac,h2 .ac,.hero h1 .ac{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--coral-deep);letter-spacing:0}
.hand{font-family:var(--hand);font-weight:700;color:var(--coral-deep);font-size:1.25em;line-height:1}
.blobs{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.blob{position:absolute;border-radius:62% 38% 46% 54% / 55% 42% 58% 45%;filter:blur(2px);opacity:.9;animation:blobdrift 18s ease-in-out infinite alternate}
.blob.l{background:var(--lilac-soft)}.blob.m{background:var(--mint-soft)}.blob.p{background:var(--peach-soft)}.blob.b{background:var(--butter-soft)}
.blob.d2{animation-duration:23s;animation-delay:-6s}.blob.d3{animation-duration:27s;animation-delay:-11s}
@keyframes blobdrift{0%{transform:translate(0,0) rotate(0deg) scale(1)}50%{transform:translate(2.5%,-3%) rotate(6deg) scale(1.06)}100%{transform:translate(-2%,2%) rotate(-5deg) scale(.97)}}
.hero>.wrap,.lhero>.wrap,.khero>.wrap{position:relative;z-index:1}
.khero{position:relative;overflow:hidden}
.stks{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.stk-pill{display:inline-flex;align-items:center;gap:6px;padding:7px 13px;border-radius:999px;font-weight:800;font-size:.76rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);border:1.5px solid rgba(20,33,58,.08);box-shadow:0 2px 0 rgba(20,33,58,.08);transform:rotate(-3deg)}
.stk-pill:nth-child(2){transform:rotate(2deg)}.stk-pill:nth-child(3){transform:rotate(-1.5deg)}.stk-pill:nth-child(4){transform:rotate(2.5deg)}
.stk-pill.l{background:var(--lilac-soft)}.stk-pill.m{background:var(--mint-soft)}.stk-pill.p{background:var(--peach-soft)}.stk-pill.b{background:var(--butter-soft)}
.stk-pill:hover{animation:wiggle .5s ease}
@keyframes wiggle{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}
.collage{position:relative;aspect-ratio:1/1;max-width:520px;margin-inline:auto;width:100%}
.collage .im{position:absolute;overflow:hidden;border:5px solid #fff;box-shadow:var(--sh-lift,0 20px 50px rgba(20,33,58,.18));background:var(--alt2)}
.collage .im img{width:100%;height:100%;object-fit:cover;display:block}
.collage .im.a{left:4%;top:8%;width:60%;height:62%;border-radius:46% 54% 52% 48% / 52% 44% 56% 48%;transform:rotate(-4deg)}
.collage .im.b{right:2%;top:0;width:44%;height:44%;border-radius:50% 50% 44% 56% / 48% 56% 44% 52%;transform:rotate(5deg)}
.collage .im.c{right:8%;bottom:4%;width:48%;height:42%;border-radius:28px;transform:rotate(-2deg)}
.collage .badge{position:absolute;z-index:2;background:#fff;border:1px solid var(--line);border-radius:14px;padding:10px 14px;box-shadow:var(--sh);font-weight:800;font-size:.84rem;display:grid;gap:2px;animation:floaty 5s ease-in-out infinite}
.collage .badge small{font-weight:700;color:var(--muted);font-size:.7rem}
.collage .badge.b1{left:0;bottom:14%;animation-delay:-1s}.collage .badge.b2{right:0;top:46%;animation-delay:-2.6s}.collage .badge.b3{left:34%;top:-4%;animation-delay:-4s}
.collage .badge b.kr{font-family:var(--kr-disp);font-size:1rem}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.collage .spark{position:absolute;z-index:3;color:var(--honey-deep);font-size:1.6rem;animation:twinkle 2.8s ease-in-out infinite}
.collage .spark.s2{animation-delay:-1.2s;font-size:1.1rem}
@keyframes twinkle{0%,100%{opacity:.35;transform:scale(.9) rotate(0)}50%{opacity:1;transform:scale(1.15) rotate(20deg)}}
.ticker{overflow:hidden;border-block:1px solid var(--line);background:#fff;padding:12px 0;position:relative}
.ticker .trk{display:flex;gap:40px;width:max-content;animation:marquee 40s linear infinite;will-change:transform}
.ticker:hover .trk{animation-play-state:paused}
.ticker span{display:inline-flex;align-items:baseline;gap:10px;white-space:nowrap;font-family:var(--kr-disp);font-weight:800;font-size:1.05rem}
.ticker span small{font-family:var(--body);font-weight:700;color:var(--muted);font-size:.8rem}
.ticker span i{font-style:normal;color:var(--coral-deep)}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
section.tone-l{background:var(--lilac-soft)}section.tone-m{background:var(--mint-soft)}section.tone-p{background:var(--peach-soft)}section.tone-b{background:var(--butter-soft)}
section.night{background:radial-gradient(900px 500px at 20% 0%,rgba(184,148,246,.35),transparent 60%),radial-gradient(700px 400px at 90% 100%,rgba(255,156,132,.35),transparent 60%),var(--ink);color:#fff}
section.night .eyebrow{color:var(--honey)}section.night h2,section.night p{color:#fff}section.night .lead{color:rgba(255,255,255,.82)}
section.night .btn-o{background:transparent;color:#fff;border-color:rgba(255,255,255,.5)}section.night .btn-o:hover{background:#fff;color:var(--ink)}
.fstep .st,.steps3>div>i{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--ink);color:#fff;font-family:var(--disp);font-size:.9rem;font-weight:800;letter-spacing:0}
.flow3 .fstep,.steps3>div{position:relative}
@media (min-width:900px){.flow3 .fstep:not(:last-child)::after,.steps3>div:not(:last-child)::after{content:"";position:absolute;top:44px;right:-14px;width:14px;border-top:2px dashed var(--line-2)}}
.rl,.cc,.crs-c,.kcard,.pain,.whoc,.fc{transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s}
.rl:hover,.cc:hover,.crs-c:hover,.kcard:hover,.pain:hover,.whoc:hover,.fc:hover{transform:translateY(-5px) rotate(-.4deg);box-shadow:0 18px 40px rgba(20,33,58,.12)}
.plan.hi{border:2px solid transparent;background:linear-gradient(#fff,#fff) padding-box,linear-gradient(135deg,var(--lilac),var(--coral),var(--honey)) border-box}
.plan.hi .pop{background:linear-gradient(135deg,var(--lilac),var(--coral));color:#fff}
.feats .fc:nth-child(6n+1) .ic{background:var(--lilac-soft);color:#6B3FD1}.feats .fc:nth-child(6n+2) .ic{background:var(--mint-soft);color:#1F8F5F}.feats .fc:nth-child(6n+3) .ic{background:var(--peach-soft);color:var(--coral-deep)}.feats .fc:nth-child(6n+4) .ic{background:var(--butter-soft);color:var(--honey-deep)}.feats .fc:nth-child(6n+5) .ic{background:var(--sky-soft);color:var(--sky-deep)}
.hero.v43{min-height:0;height:auto;padding-block:clamp(36px,6vw,80px) clamp(30px,5vw,60px);background:#fff;overflow:hidden}
.hero.v43 .ph,.hero.v43 .hdots,.hero.v43 .typed{display:none}
.hero.v43 .wrap{display:grid;gap:clamp(24px,4vw,56px);grid-template-columns:1.05fr .95fr;align-items:center}
@media (max-width:900px){.hero.v43 .wrap{grid-template-columns:1fr}}
.hero.v43 h1{max-width:14ch;font-size:clamp(2.2rem,5.2vw,4rem);line-height:1.04;letter-spacing:-.02em}
.hero.v43 .lead{max-width:50ch}
.hero.v43 .hnote{margin-top:12px}
.lhero{position:relative;overflow:hidden}
.lhero .wrap{display:grid;gap:clamp(24px,4vw,56px);grid-template-columns:1.05fr .95fr;align-items:center}
@media (max-width:900px){.lhero .wrap{grid-template-columns:1fr}}
.lhero h1{font-size:clamp(2rem,4.6vw,3.4rem);line-height:1.06;letter-spacing:-.02em;max-width:16ch}
.lwhy div:nth-child(1){background:var(--lilac-soft)}.lwhy div:nth-child(2){background:var(--mint-soft)}.lwhy div:nth-child(3){background:var(--peach-soft)}
section.tone-l .lwhy div{background:#fff}
.minislide{position:absolute;z-index:2;left:-4%;bottom:6%;width:64%;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--sh-lift,0 20px 50px rgba(20,33,58,.18));padding:14px 16px;display:grid;gap:8px;transform:rotate(-3deg);animation:floaty 6s ease-in-out infinite}
.minislide .tag{font-size:.64rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--coral-deep)}
.minislide .q{font-family:var(--kr-disp);font-weight:800;font-size:1.1rem}
.minislide .q u{text-decoration:none;border-bottom:2px solid var(--coral);color:var(--coral-deep);padding:0 6px}
.minislide .opts{display:flex;gap:6px;flex-wrap:wrap}
.minislide .opts span{border:1.5px solid var(--line-2);border-radius:999px;padding:3px 10px;font-size:.8rem;font-weight:700}
.minislide .opts span.on{background:var(--coral);border-color:var(--coral);color:#fff}
.fam{display:grid;gap:16px;grid-template-columns:1.2fr .8fr}
@media (max-width:900px){.fam{grid-template-columns:1fr}}
.famc{position:relative;overflow:hidden;border-radius:var(--r-xl);padding:clamp(22px,3vw,34px);display:grid;gap:12px;align-content:start;border:1px solid var(--line)}
.famc.reg{background:linear-gradient(135deg,var(--lilac-soft),#fff 60%)}
.famc.spc{background:linear-gradient(135deg,var(--peach-soft),#fff 60%)}
.famc h3{font-size:clamp(1.25rem,2.3vw,1.7rem);line-height:1.22}
.famc p{color:var(--ink-2)}
.famc .lvs{display:flex;gap:6px;flex-wrap:wrap}
.famc .lvs a{font-weight:800;font-size:.84rem;padding:6px 12px;border-radius:999px;background:#fff;border:1.5px solid var(--line-2);text-decoration:none;color:var(--ink)}
.famc .lvs a.free{border-color:var(--mint);background:var(--mint-soft);color:#1F8F5F}
.famc .spcs{display:grid;gap:10px}
.famc .spcs a{display:grid;grid-template-columns:56px 1fr auto;gap:12px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:14px;padding:10px 12px;text-decoration:none;color:var(--ink);transition:transform .2s,box-shadow .2s}
.famc .spcs a:hover{transform:translateX(4px);box-shadow:var(--sh)}
.famc .spcs a .im{width:56px;height:56px;border-radius:14px;background-size:cover;background-position:center;display:block}
.famc .spcs a b{font-family:var(--kr-disp);display:block}.famc .spcs a small{color:var(--muted);font-weight:700}
.famc .spcs a em{font-style:normal;font-weight:800;color:var(--coral-deep);font-size:1.1rem}
.demo-wrap{position:relative;margin-top:8px}
.demo-wrap .hand{position:absolute;right:4%;top:-26px;transform:rotate(6deg);z-index:2;font-size:1.5rem}
.dash.v43{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:900px){.dash.v43{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.dash.v43{grid-template-columns:1fr}}
.dash.v43 .dc.hello{grid-column:1 / -1;background:linear-gradient(120deg,var(--lilac-soft),var(--peach-soft));border:0;display:grid;grid-template-columns:auto 1fr auto;gap:18px;align-items:center}
@media (max-width:600px){.dash.v43 .dc.hello{grid-template-columns:1fr}}
.dash.v43 .dc.hello .av{width:64px;height:64px;border-radius:50%;background:#fff;display:grid;place-items:center;font-family:var(--kr-disp);font-weight:800;font-size:1.5rem;color:var(--coral-deep);box-shadow:var(--sh)}
.dash.v43 .dc.hello h3{font-size:clamp(1.3rem,2.4vw,1.7rem)}
.dash.v43 .dc.hello .hand{font-size:1.5rem;margin-left:6px}
.tile{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:18px;display:grid;gap:6px;align-content:start}
.tile .ic{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;font-size:1.1rem;font-weight:800}
.tile b{font-family:var(--disp);font-size:1.9rem;line-height:1}
.tile span{color:var(--muted);font-size:.84rem;font-weight:700}
.tile:nth-of-type(1) .ic{background:var(--lilac-soft);color:#6B3FD1}.tile:nth-of-type(2) .ic{background:var(--mint-soft);color:#1F8F5F}.tile:nth-of-type(3) .ic{background:var(--peach-soft);color:var(--coral-deep)}.tile:nth-of-type(4) .ic{background:var(--butter-soft);color:var(--honey-deep)}
.dash.v43 .dc.wide{grid-column:span 2}
@media (max-width:600px){.dash.v43 .dc.wide{grid-column:auto}}
.bars{display:flex;align-items:flex-end;gap:10px;height:120px;padding-top:10px}
.bars div{flex:1;display:grid;gap:6px;align-content:end;justify-items:center}
.bars div i{display:block;width:100%;max-width:34px;border-radius:10px 10px 6px 6px;background:linear-gradient(180deg,var(--lilac),var(--coral));min-height:6px}
.bars div small{font-size:.7rem;font-weight:800;color:var(--muted)}
.ring{position:relative;width:120px;height:120px}
.ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.ring circle{fill:none;stroke-width:12;stroke-linecap:round}
.ring .bg{stroke:var(--alt2)}.ring .fg{stroke:url(#ringg)}
.ring b{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--disp);font-size:1.4rem;font-weight:800}
.ringrow{display:grid;grid-template-columns:120px 1fr;gap:16px;align-items:center}
@media (max-width:600px){.ringrow{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.blob,.collage .badge,.collage .spark,.ticker .trk,.minislide{animation:none}}

/* ---- v44 (2026-10-04 night): photo bands · show-all-answers button · dialogue play button · study mode ---- */
.pband-sec{padding-block:0 clamp(28px,4vw,48px)}
.pband{display:grid;gap:14px;grid-template-columns:2fr 1fr 1fr;align-items:stretch}
@media (max-width:760px){.pband{grid-template-columns:1fr 1fr}.pband figure.big{grid-column:1 / -1}}
.pband figure{margin:0;position:relative;border-radius:var(--r-xl);overflow:hidden;min-height:220px;background:var(--alt2);box-shadow:var(--sh);transform:rotate(-1deg)}
.pband figure:nth-child(2){transform:rotate(1.2deg)}.pband figure:nth-child(3){transform:rotate(-.8deg)}
.pband figure.big{min-height:320px}
.pband img{width:100%;height:100%;object-fit:cover;display:block;position:absolute;inset:0}
.pband figcaption{position:absolute;left:14px;bottom:12px;background:#fff;border-radius:999px;padding:6px 14px;font-size:1.15rem;box-shadow:var(--sh)}
.photo.tiltp{transform:rotate(-2deg);box-shadow:var(--sh-lift,0 20px 50px rgba(20,33,58,.18));border:5px solid #fff}
.collage.small{max-width:420px}
section.night .collage .im{border-color:rgba(255,255,255,.18)}
section.night .hand{color:var(--honey)}
/* show / hide every blank on a slide */
:is(.slide,.tbook) .revrow{display:flex;justify-content:flex-end;margin-top:10px}
:is(.slide,.tbook) .revall{font:inherit;font-weight:800;font-size:.82rem;padding:8px 14px;border-radius:999px;border:1.5px solid var(--coral);background:#fff;color:var(--coral-deep);cursor:pointer}
:is(.slide,.tbook) .revall.on{background:var(--coral);color:#fff}
/* ▶ play the whole dialogue */
.dlgtools{display:flex;justify-content:flex-end;margin-bottom:8px}
.sayall{display:inline-flex;align-items:center;gap:8px;font:inherit;font-weight:800;font-size:.84rem;padding:7px 14px 7px 10px;border-radius:999px;border:0;background:var(--ink);color:#fff;cursor:pointer}
.sayall svg{width:18px;height:18px}
.sayall.on{background:var(--coral);animation:saypulse .9s ease-in-out infinite}
/* study mode: a quiet shell */
.nav.study .brand small{font-family:var(--body);font-weight:800;font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--coral-deep);display:block}
.nav.study .navr{gap:10px}
.nav.study .langwrap .langbtn{height:36px}
footer.study{background:#fff;border-top:1px solid var(--line);padding:22px 0;font-size:.86rem;color:var(--muted)}
footer.study a{font-weight:800;color:var(--ink)}
a.lrow{text-decoration:none;color:var(--ink)}
.lrow .wbpct{position:relative;width:110px;height:8px;border-radius:999px;background:var(--alt2);overflow:hidden;display:inline-block;vertical-align:middle;margin-right:8px}
.lrow .wbpct em{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(90deg,var(--lilac),var(--coral))}
.lrow .wbpct.done em{background:var(--mint)}
.lrow .wbnum{font-family:var(--disp);font-size:.9rem;color:var(--ink-2)}

/* ---- v47: real-world documents as near-photographic mockups (.rd) + "good to know" cards (.tips) ---- */
:is(.slide,.tbook) .rd{position:relative;max-width:560px;margin:6px auto 0;font-family:var(--kr);color:#1c2430;text-align:left}
:is(.slide,.tbook) .rd .blank{display:inline-block;min-width:3em;border-bottom:3px solid var(--coral);color:var(--coral-deep);font-weight:800;cursor:pointer;line-height:1.2;background:#fff;padding:0 4px}
:is(.slide,.tbook) .rd p{margin:0 0 6px;line-height:1.55}
:is(.slide,.tbook) .rd .kv{width:100%;border-collapse:collapse;margin-top:8px;font-size:.92rem}
:is(.slide,.tbook) .rd .kv th{width:30%;text-align:left;font-weight:800;background:rgba(0,0,0,.04);padding:7px 10px;border:1px solid rgba(0,0,0,.12)}
:is(.slide,.tbook) .rd .kv td{padding:7px 10px;border:1px solid rgba(0,0,0,.12)}
/* paper */
:is(.slide,.tbook) .rd-paper{background:linear-gradient(180deg,#fffefb,#fbf8f1);border:1px solid #e3ddd0;border-radius:6px;padding:26px 28px 24px;box-shadow:0 18px 40px rgba(20,33,58,.16),0 1px 0 #fff inset;transform:rotate(-.6deg)}
:is(.slide,.tbook) .rd-paper h3{font-family:"Noto Serif KR",var(--kr-disp);font-size:1.45rem;text-align:center;letter-spacing:.3em;margin:4px 0 14px;padding-bottom:10px;border-bottom:2px solid #1c2430}
:is(.slide,.tbook) .rd-paper h3 small{display:block;letter-spacing:0;font-size:.74rem;color:#6b7280;font-family:var(--body);margin-top:4px}
:is(.slide,.tbook) .rd-form .org{font-size:.8rem;font-weight:800;color:#6b7280;letter-spacing:.1em}
:is(.slide,.tbook) .rd-form .appr{position:absolute;right:28px;top:20px;display:flex;border:1px solid #1c2430;font-size:.62rem}
:is(.slide,.tbook) .rd-form .appr div{display:grid;width:46px;text-align:center}.slide .rd-form .appr small{border-bottom:1px solid #1c2430;padding:2px}.slide .rd-form .appr span{height:30px;border-left:1px solid #1c2430}.slide .rd-form .appr div:first-child span{border-left:0}
:is(.slide,.tbook) .rd-form .grid{width:100%;border-collapse:collapse;margin-top:12px;font-size:.9rem}
:is(.slide,.tbook) .rd-form .grid th{background:#eef1f5;border:1px solid #1c2430;padding:6px;font-weight:800}.slide .rd-form .grid td{border:1px solid #1c2430;padding:8px 6px;text-align:center}
:is(.slide,.tbook) .rd .chk{display:flex;gap:16px;flex-wrap:wrap;margin-top:10px;font-weight:700}
:is(.slide,.tbook) .rd .nt{font-size:.88rem;color:#374151;margin-top:12px}
:is(.slide,.tbook) .rd-form .sign{margin-top:18px;text-align:right;font-weight:700;border-top:1px dashed #9ca3af;padding:10px 84px 0 0}   /* room on the right for the 접수 stamp */
:is(.slide,.tbook) .rd-form .sign i{font-style:normal;color:#9ca3af;margin-left:6px}
:is(.slide,.tbook) .rd .stamp{position:absolute;right:26px;bottom:22px;width:62px;height:62px;border:3px double #d33;color:#d33;border-radius:50%;display:grid;place-items:center;font-weight:900;font-size:.9rem;transform:rotate(-14deg);opacity:.85;letter-spacing:.1em}
:is(.slide,.tbook) .rd-letter .head{display:flex;gap:10px;align-items:center;margin-bottom:10px}
:is(.slide,.tbook) .rd-letter .head i{width:36px;height:36px;border-radius:50%;background:#ffd166;display:grid;place-items:center;font-style:normal;color:#b45309}
:is(.slide,.tbook) .rd-letter .head b{display:block;font-size:.95rem}.slide .rd-letter .head small{color:#6b7280;font-size:.76rem}
:is(.slide,.tbook) .rd-letter .cut{margin:18px -28px 10px;color:#9ca3af;font-size:.8rem;letter-spacing:.1em;white-space:nowrap;overflow:hidden;padding:0 20px}
:is(.slide,.tbook) .rd-letter .slip{background:#fff;border:1px solid #cfd6df;border-radius:4px;padding:12px 14px}.slide .rd-letter .slip>b{display:block;margin-bottom:6px}
:is(.slide,.tbook) .rd-sched{padding-top:30px}
:is(.slide,.tbook) .rd-sched .pin{position:absolute;top:10px;width:14px;height:14px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#ff8a7a,#c62828);box-shadow:0 2px 4px rgba(0,0,0,.3)}.slide .rd-sched .pin.l{left:14px}.slide .rd-sched .pin.r{right:14px}
:is(.slide,.tbook) .rd-sched table{width:100%;border-collapse:collapse;font-size:1rem}
:is(.slide,.tbook) .rd-sched th{width:28%;text-align:left;padding:9px 10px;border-bottom:1px solid #e5e7eb;color:#b45309;font-family:var(--disp)}.slide .rd-sched td{padding:9px 10px;border-bottom:1px solid #e5e7eb}
:is(.slide,.tbook) .rd-sched tr:nth-child(odd) td,:is(.slide,.tbook) .rd-sched tr:nth-child(odd) th{background:rgba(255,209,102,.18)}
/* phone */
:is(.slide,.tbook) .rd-app{max-width:380px}
:is(.slide,.tbook) .rd-app .ph{background:#fff;border-radius:34px;border:10px solid #1c2430;box-shadow:0 24px 50px rgba(20,33,58,.28);overflow:hidden;transform:rotate(1deg)}
:is(.slide,.tbook) .rd-app .sb{display:flex;justify-content:space-between;padding:8px 18px 4px;font-size:.72rem;font-weight:800;color:#1c2430}
:is(.slide,.tbook) .rd-app .ah{display:flex;align-items:center;gap:8px;padding:8px 16px 10px;border-bottom:1px solid #eef1f5}
:is(.slide,.tbook) .rd-app .ah i{width:26px;height:26px;border-radius:8px;background:#ffb703;color:#fff;display:grid;place-items:center;font-style:normal;font-weight:900}
:is(.slide,.tbook) .rd-app .ah b{font-size:.98rem}.slide .rd-app .ah small{margin-left:auto;color:#6b7280;font-weight:700;font-size:.76rem}
:is(.slide,.tbook) .rd-app .ah.dark{background:#1c2430;color:#fff;border:0}.slide .rd-app .ah.dark small{color:#cbd5e1}
:is(.slide,.tbook) .rd-app .post{padding:12px 16px}
:is(.slide,.tbook) .rd-app .who{display:flex;gap:10px;align-items:center;margin-bottom:10px}
:is(.slide,.tbook) .rd-app .who i{width:36px;height:36px;border-radius:50%;background:#dbeafe;color:#1d4ed8;display:grid;place-items:center;font-style:normal;font-weight:900}
:is(.slide,.tbook) .rd-app .who b{display:block;font-size:.92rem}.slide .rd-app .who small{color:#6b7280;font-size:.74rem}
:is(.slide,.tbook) .rd-app .who em{margin-left:auto;font-style:normal;font-size:.7rem;font-weight:800;background:#fff3c4;color:#b45309;border-radius:999px;padding:3px 9px}
:is(.slide,.tbook) .rd-app h4{margin:0 0 8px;font-size:1.05rem}
:is(.slide,.tbook) .rd-app .bd{font-size:.95rem}
:is(.slide,.tbook) .rd-app .pics{display:flex;gap:8px;margin-top:10px}.slide .rd-app .pics span{width:72px;height:72px;border-radius:12px;display:grid;place-items:center;font-size:1.6rem;color:rgba(0,0,0,.35)}
:is(.slide,.tbook) .rd-app .acts{display:flex;gap:16px;margin-top:12px;padding-top:10px;border-top:1px solid #eef1f5;font-size:.78rem;font-weight:700;color:#6b7280}
:is(.slide,.tbook) .rd-app .reply{display:flex;align-items:center;gap:10px;margin:0 12px 14px;background:#f3f4f6;border-radius:999px;padding:9px 14px;font-size:.84rem;color:#9ca3af}.slide .rd-app .reply b{margin-left:auto;color:#2563eb}
:is(.slide,.tbook) .rd-chat .msgs{background:#b2c7d9;padding:14px 12px;display:grid;gap:10px;min-height:260px}
:is(.slide,.tbook) .rd-chat .day{justify-self:center;background:rgba(0,0,0,.18);color:#fff;font-size:.7rem;border-radius:999px;padding:3px 12px}
:is(.slide,.tbook) .rd-chat .m{display:flex;gap:8px;align-items:flex-end;max-width:92%}
:is(.slide,.tbook) .rd-chat .m i{width:34px;height:34px;border-radius:40%;background:#fff;display:grid;place-items:center;font-style:normal;font-weight:800;color:#374151;flex:none}
:is(.slide,.tbook) .rd-chat .m small{display:block;font-size:.72rem;color:#374151;margin-bottom:3px}
:is(.slide,.tbook) .rd-chat .bub{background:#fff;border-radius:4px 14px 14px 14px;padding:8px 11px;font-size:.92rem;line-height:1.45;box-shadow:0 1px 1px rgba(0,0,0,.08)}
:is(.slide,.tbook) .rd-chat .m em{font-style:normal;font-size:.66rem;color:#374151;flex:none}
:is(.slide,.tbook) .rd-chat .m.me{margin-left:auto;flex-direction:row-reverse}.slide .rd-chat .m.me .bub{background:#fee500;border-radius:14px 4px 14px 14px}
:is(.slide,.tbook) .rd-app .inp{display:flex;align-items:center;gap:10px;padding:10px 12px;border-top:1px solid #e5e7eb;font-size:.84rem;color:#9ca3af}.slide .rd-app .inp .f{flex:1;background:#f3f4f6;border-radius:999px;height:32px;display:flex;align-items:center;padding:0 12px}.slide .rd-app .inp .s{font-weight:900;color:#374151}
:is(.slide,.tbook) .rd-sms .msgs{padding:14px 12px;display:grid;gap:8px;min-height:220px}
:is(.slide,.tbook) .rd-sms .m{display:flex;gap:6px;align-items:flex-end;max-width:85%}.slide .rd-sms .bub{background:#e9e9eb;border-radius:18px 18px 18px 4px;padding:9px 13px;font-size:.92rem;line-height:1.45}
:is(.slide,.tbook) .rd-sms .m em{font-style:normal;font-size:.66rem;color:#9ca3af}
:is(.slide,.tbook) .rd-sms .m.me{margin-left:auto;flex-direction:row-reverse}.slide .rd-sms .m.me .bub{background:#34c759;color:#fff;border-radius:18px 18px 4px 18px}
/* shoe rack */
:is(.slide,.tbook) .rd-rack{max-width:600px;padding:14px 14px 0;background:linear-gradient(180deg,#f3e3c7,#e4ccA2);border-radius:10px;box-shadow:0 18px 40px rgba(20,33,58,.18);transform:rotate(-.4deg)}
:is(.slide,.tbook) .rd-rack .plate{display:inline-flex;gap:8px;align-items:center;background:#fff;border:2px solid #d9b26f;border-radius:8px;padding:6px 14px;font-family:var(--hand);font-size:1.4rem;color:#7c4a03;margin-bottom:12px}
:is(.slide,.tbook) .rd-rack .plate i{font-style:normal;color:#f4a300}
:is(.slide,.tbook) .rd-rack .cubs{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
:is(.slide,.tbook) .rd-rack .cub{position:relative;height:118px;background:linear-gradient(180deg,#fff9ee,#f0e2c6);border:3px solid #cfae73;border-radius:6px;display:grid;align-content:space-between;justify-items:center;padding:8px 6px 10px}
:is(.slide,.tbook) .rd-rack .cub.empty{background:linear-gradient(180deg,#f7efdf,#e9d8b8)}.slide .rd-rack .cub.empty small{align-self:center;color:#a98350;font-size:.72rem}
:is(.slide,.tbook) .rd-rack .cub.hl{outline:3px solid var(--coral);outline-offset:2px}
:is(.slide,.tbook) .rd-rack .tag{font-family:var(--hand);font-size:1.2rem;white-space:nowrap;max-width:100%;color:#1c2430;padding:2px 10px;border-radius:4px;transform:rotate(-3deg);box-shadow:0 1px 2px rgba(0,0,0,.2)}
:is(.slide,.tbook) .rd-rack .cub:nth-child(even) .tag{transform:rotate(2.5deg)}
:is(.slide,.tbook) .rd-rack .shoe{display:flex;gap:4px}
:is(.slide,.tbook) .rd-rack .shoe i{display:block;width:26px;height:40px;border-radius:50% 50% 40% 40% / 60% 60% 40% 40%;background:var(--c);box-shadow:inset 0 -8px 0 rgba(0,0,0,.12),0 2px 2px rgba(0,0,0,.15)}
:is(.slide,.tbook) .rd-rack .floor{height:10px;margin:12px -14px 0;background:#b58a4e;border-radius:0 0 10px 10px}
/* medicine bag · card */
:is(.slide,.tbook) .rd-bag{max-width:420px;background:#fff;border:2px solid #1c2430;border-radius:4px;padding:16px 18px 18px;box-shadow:0 18px 40px rgba(20,33,58,.16);transform:rotate(.8deg)}
:is(.slide,.tbook) .rd-bag .top{display:flex;justify-content:space-between;border-bottom:3px double #1c2430;padding-bottom:8px;font-size:1.05rem}.slide .rd-bag .top small{color:#6b7280}
:is(.slide,.tbook) .rd-bag .pt{margin:10px 0;font-size:1.1rem;font-weight:800}.slide .rd-bag .pt small{font-weight:600;color:#6b7280;font-size:.8rem}
:is(.slide,.tbook) .rd-bag .dose{display:flex;gap:10px;margin:8px 0 10px}.slide .rd-bag .dose span{flex:1;text-align:center;border:2px solid #1c2430;border-radius:50%;aspect-ratio:1;display:grid;place-items:center;font-weight:800;color:#9ca3af}.slide .rd-bag .dose span.on{background:#1c2430;color:#fff}
:is(.slide,.tbook) .rd-card{max-width:440px;background:linear-gradient(160deg,#fff7ed,#ffe4e6);border:1px solid #fecdd3;border-radius:14px;padding:26px 28px;text-align:center;box-shadow:0 18px 40px rgba(20,33,58,.14);transform:rotate(-1.2deg)}
:is(.slide,.tbook) .rd-card .deco{font-size:1.6rem;color:#f43f5e}.slide .rd-card small{display:block;letter-spacing:.2em;color:#9f1239;font-weight:800;font-size:.72rem;margin-top:6px}.slide .rd-card h3{font-family:var(--hand);font-size:2rem;margin:6px 0 10px;color:#881337}
:is(.slide,.tbook) .docqs{margin-top:14px}
/* good-to-know cards */
:is(.slide,.tbook) .tips{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));text-align:left}
:is(.slide,.tbook) .tip{display:grid;grid-template-columns:30px 1fr;gap:10px;background:#fff;border:1px solid var(--line);border-left:4px solid var(--honey);border-radius:12px;padding:12px 14px}
:is(.slide,.tbook) .tip i{width:28px;height:28px;border-radius:50%;background:var(--honey-soft);color:var(--honey-deep);display:grid;place-items:center;font-style:normal;font-weight:800;font-size:.8rem}
:is(.slide,.tbook) .tip b{display:block;font-size:.95rem;margin-bottom:3px}.slide .tip p{margin:0;font-size:.86rem;line-height:1.5;color:var(--ink-2)}.slide .tip small{display:block;margin-top:4px;color:var(--muted);font-size:.74rem;font-weight:700}
/* v48 document types for the Regular Course */
:is(.slide,.tbook) .rd-sign{max-width:520px;background:#1c2430;color:#fff;border-radius:10px;padding:22px 26px;text-align:center;box-shadow:0 18px 40px rgba(20,33,58,.25);transform:rotate(-1deg);display:grid;gap:6px;justify-items:center}
:is(.slide,.tbook) .rd-sign.cafe{background:linear-gradient(160deg,#6b4f3a,#3e2a1e);color:#fff3e0}.slide .rd-sign.blue{background:#0b57d0}.slide .rd-sign.red{background:#c62828}.slide .rd-sign.paper{background:#fffdf5;color:#1c2430;border:1px solid #e3ddd0}
:is(.slide,.tbook) .rd-sign small{letter-spacing:.2em;font-size:.72rem;opacity:.8}.slide .rd-sign b{font-family:var(--kr-disp);font-size:clamp(1.6rem,4vw,2.4rem);line-height:1.2;letter-spacing:.04em}.slide .rd-sign span{font-size:.95rem;opacity:.9}.slide .rd-sign .ls{font-size:.9rem;opacity:.9;text-align:left}
:is(.slide,.tbook) .rd-menu{max-width:440px;background:linear-gradient(180deg,#fffdf8,#f6efe2);border:1px solid #e0d6c3;border-radius:8px;padding:18px 20px;box-shadow:0 18px 40px rgba(20,33,58,.16);transform:rotate(.6deg)}
:is(.slide,.tbook) .rd-menu .hd{text-align:center;border-bottom:2px solid #1c2430;padding-bottom:8px;margin-bottom:8px}.slide .rd-menu .hd b{font-family:var(--kr-disp);font-size:1.3rem;display:block}.slide .rd-menu .hd small{letter-spacing:.3em;font-size:.68rem;color:#6b7280}
:is(.slide,.tbook) .rd-menu h4{margin:10px 0 4px;font-size:.78rem;letter-spacing:.14em;color:#b45309}
:is(.slide,.tbook) .rd-menu table{width:100%;border-collapse:collapse}.slide .rd-menu td{padding:6px 2px;border-bottom:1px dotted #d1c7b4;font-size:.95rem}.slide .rd-menu td.n small{display:block;color:#6b7280;font-size:.74rem;font-weight:500}.slide .rd-menu td.p{text-align:right;font-family:var(--disp);font-weight:800;white-space:nowrap}
:is(.slide,.tbook) .rd-rcpt{max-width:320px;background:#fff;padding:16px 18px 22px;font-family:"Courier New",ui-monospace,monospace;font-size:.86rem;color:#111;box-shadow:0 18px 40px rgba(20,33,58,.18);transform:rotate(-1.2deg);clip-path:polygon(0 0,100% 0,100% 97%,96% 100%,92% 97%,88% 100%,84% 97%,80% 100%,76% 97%,72% 100%,68% 97%,64% 100%,60% 97%,56% 100%,52% 97%,48% 100%,44% 97%,40% 100%,36% 97%,32% 100%,28% 97%,24% 100%,20% 97%,16% 100%,12% 97%,8% 100%,4% 97%,0 100%)}
:is(.slide,.tbook) .rd-rcpt .hd{text-align:center;border-bottom:1px dashed #999;padding-bottom:8px;margin-bottom:8px}.slide .rd-rcpt .hd b{display:block;font-size:1.05rem}.slide .rd-rcpt .hd small{display:block;color:#555}
:is(.slide,.tbook) .rd-rcpt table{width:100%;border-collapse:collapse}.slide .rd-rcpt td{padding:3px 0}.slide .rd-rcpt td.q{text-align:center;width:2.5em}.slide .rd-rcpt td.p{text-align:right;white-space:nowrap}
:is(.slide,.tbook) .rd-rcpt .tot{display:flex;justify-content:space-between;border-top:1px dashed #999;margin-top:8px;padding-top:8px;font-size:1.05rem}.slide .rd-rcpt .pay{color:#555;margin-top:6px}
:is(.slide,.tbook) .rd-rcpt .bar{height:34px;margin:12px 0 6px;background:repeating-linear-gradient(90deg,#111 0 2px,#fff 2px 4px,#111 4px 5px,#fff 5px 8px)}.slide .rd-rcpt .thx{display:block;text-align:center;color:#555}
:is(.slide,.tbook) .rd-tkt{max-width:520px;display:grid;grid-template-columns:1fr 150px;background:linear-gradient(135deg,#e8f0fe,#fff);border:1px solid #c7d7f5;border-radius:14px;overflow:clip;flex:none;min-height:max-content;box-shadow:0 18px 40px rgba(20,33,58,.16);transform:rotate(.8deg)}
:is(.slide,.tbook) .rd-tkt .l{padding:16px 18px}.slide .rd-tkt .l>small{letter-spacing:.2em;font-size:.68rem;color:#1d4ed8;font-weight:800}
:is(.slide,.tbook) .rd-tkt .route{display:flex;align-items:center;gap:12px;margin:6px 0 8px}.slide .rd-tkt .route b{font-family:var(--kr-disp);font-size:1.5rem}.slide .rd-tkt .route i{font-style:normal;color:#1d4ed8}
:is(.slide,.tbook) .rd-tkt .r{border-left:2px dashed #c7d7f5;padding:16px 14px;display:grid;align-content:center;gap:4px;text-align:center;background:#fff}.slide .rd-tkt .r small{font-size:.68rem;letter-spacing:.14em;color:#6b7280}.slide .rd-tkt .r b{font-family:var(--disp);font-size:1.6rem}.slide .rd-tkt .r span{font-weight:800;color:#1d4ed8}
:is(.slide,.tbook) .rd-tkt .kv{margin-top:4px;font-size:.84rem}.slide .rd-tkt .kv th,:is(.slide,.tbook) .rd-tkt .kv td{border:0;padding:3px 6px 3px 0;background:transparent}
:is(.slide,.tbook) .rd-cal{max-width:520px;background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:16px 18px;box-shadow:0 18px 40px rgba(20,33,58,.14);transform:rotate(-.6deg)}
:is(.slide,.tbook) .rd-cal .hd{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px}.slide .rd-cal .hd b{font-family:var(--disp);font-size:1.4rem}.slide .rd-cal .hd small{color:#6b7280;font-weight:700}
:is(.slide,.tbook) .rd-cal table{width:100%;border-collapse:collapse;table-layout:fixed}.slide .rd-cal th{font-size:.7rem;color:#6b7280;padding:4px 0;font-weight:800}.slide .rd-cal th.sun,:is(.slide,.tbook) .rd-cal td.sun{color:#d33}
:is(.slide,.tbook) .rd-cal td{height:48px;vertical-align:top;padding:4px 5px;border-top:1px solid #f0f2f5;font-family:var(--disp);font-weight:700;font-size:.9rem}.slide .rd-cal td.mk{background:#fff3c4;border-radius:8px}.slide .rd-cal td small{display:block;font-family:var(--kr);font-weight:700;font-size:.66rem;color:#b45309;line-height:1.2}
:is(.slide,.tbook) .rd-id{max-width:380px;background:linear-gradient(135deg,#f8fafc,#e2e8f0);border:1px solid #cbd5e1;border-radius:14px;padding:14px 16px;position:relative;box-shadow:0 18px 40px rgba(20,33,58,.18);transform:rotate(-2deg)}
:is(.slide,.tbook) .rd-id .top{display:flex;justify-content:space-between;align-items:baseline;border-bottom:2px solid #1c2430;padding-bottom:6px;margin-bottom:10px}.slide .rd-id .top b{font-family:var(--kr-disp)}.slide .rd-id .top small{color:#6b7280;font-weight:800;font-size:.7rem;letter-spacing:.1em}
:is(.slide,.tbook) .rd-id .body{display:grid;grid-template-columns:84px 1fr;gap:14px;align-items:start}.slide .rd-id .photo{width:84px;height:104px;border-radius:8px;background:#cbd5e1;display:grid;place-items:center}.slide .rd-id .photo i{font-style:normal;font-family:var(--kr-disp);font-size:2rem;color:#fff}
:is(.slide,.tbook) .rd-id .kv{margin:0;font-size:.84rem}.slide .rd-id .kv th,:is(.slide,.tbook) .rd-id .kv td{border:0;padding:3px 6px 3px 0;background:transparent}
:is(.slide,.tbook) .rd-id .chip{position:absolute;right:18px;bottom:14px;width:34px;height:26px;border-radius:5px;background:linear-gradient(135deg,#f5d58a,#c89b3c)}
:is(.slide,.tbook) .rd-wx .ph{background:linear-gradient(180deg,#60a5fa,#1d4ed8);color:#fff}.slide .rd-wx .sb{color:#fff}
:is(.slide,.tbook) .rd-wx .now{text-align:center;padding:16px 16px 10px}.slide .rd-wx .now small{display:block;font-size:.9rem;opacity:.9}.slide .rd-wx .now b{display:block;font-family:var(--disp);font-size:3.6rem;line-height:1}.slide .rd-wx .now span{display:block;font-size:1rem}
:is(.slide,.tbook) .rd-wx .days{display:flex;gap:6px;padding:10px 14px 16px}.slide .rd-wx .days div{flex:1;background:rgba(255,255,255,.18);border-radius:12px;padding:8px 4px;display:grid;justify-items:center;gap:2px}.slide .rd-wx .days small{font-size:.7rem}.slide .rd-wx .days i{font-style:normal;font-size:1.2rem}.slide .rd-wx .days b{font-size:.84rem}
:is(.slide,.tbook) .rd-wx .dust{margin:0 14px 16px;background:rgba(255,255,255,.9);color:#1c2430;border-radius:10px;padding:8px 12px;font-size:.84rem;font-weight:700}
:is(.slide,.tbook) .rd-poster{max-width:420px;background:linear-gradient(160deg,#fff7ed,#ffedd5);border:3px solid #1c2430;padding:22px 24px;box-shadow:0 18px 40px rgba(20,33,58,.18);transform:rotate(1.2deg)}
:is(.slide,.tbook) .rd-poster.green{background:linear-gradient(160deg,#ecfdf5,#d1fae5)}.slide .rd-poster.purple{background:linear-gradient(160deg,#f5f3ff,#ede9fe)}
:is(.slide,.tbook) .rd-poster small{letter-spacing:.2em;font-size:.7rem;font-weight:800}.slide .rd-poster h3{font-family:var(--kr-disp);font-size:1.7rem;margin:4px 0 6px;line-height:1.2}.slide .rd-poster .s{font-weight:700;margin:0 0 8px}.slide .rd-poster .ls{font-size:.9rem}.slide .rd-poster .ft{margin-top:12px;border-top:1px solid rgba(0,0,0,.2);padding-top:8px;font-size:.84rem;font-weight:700}

/* ===== v55 (2026-10-05, 대표: 말하기·듣기·도입 슬라이드와 워크북에 그림) — scenes.js drawn scenes + avatars + workbook pager ===== */
.scn{margin:0 0 12px;border-radius:16px;overflow:hidden;border:2px solid #243041;box-shadow:4px 4px 0 rgba(36,48,65,.12);background:#fffdf6;max-width:720px}
:is(.slide,.tbook) .scn{transform:rotate(-.35deg)}
.scn svg.scnsvg{display:block;width:100%;height:auto;aspect-ratio:60/17}
/* v60: the slide is a grid — a width-only svg contributed 0 height to its row and the banner collapsed to a 4px line; the svg now carries width/height attributes like an image. Before a dialogue the picture is narrower so the first lines stay on screen */
:is(.slide,.tbook) .scn{min-height:0;aspect-ratio:auto;width:100%}
:is(.slide,.tbook) .scn:has(+ .dlg){max-width:560px}
/* v65 (2026-10-06, 대표: "그림이 슬라이드 내용을 가린다"): inside the slide grid the banner's row was sized at about half the drawn height
   (aspect-ratio + max-width + min-height:0 confused the track sizing), so the dialogue below started on top of the picture.
   The height now comes from a padding-top box (28.33% = 170/600) and the svg fills it absolutely — no track-sizing guesswork. */
.scn{position:relative}
.scn::before{content:"";display:block;padding-top:28.3333%}
.scn svg.scnsvg{position:absolute;left:0;top:0;width:100%;height:100%;aspect-ratio:auto}
/* root cause: the slide is a grid with a FIXED height (4:3 stage). A grid row's base size comes from its items' minimum size, and for an
   overflow:hidden item that minimum is 0 — with no free space the row never grows, so pictures, documents and tables got squashed and the next
   block was drawn over them. Every direct child now insists on its full content height. */
.slide > *{min-height:max-content}
:is(.slide,.tbook) .scn{overflow:visible;min-height:max-content}
:is(.slide,.tbook) .scn svg.scnsvg{clip-path:inset(0 round 14px)}
:is(.slide,.tbook) .dlg .who{display:flex;align-items:center;gap:7px;padding-top:0;min-width:0}
:is(.slide,.tbook) .dlg .who em{font-style:normal}
.ava{flex:none;border-radius:50%;background:#fff;border:1.6px solid #243041;padding:1px;box-shadow:2px 2px 0 rgba(36,48,65,.12);overflow:hidden}
:is(.slide,.tbook) .dlg .ln{align-items:center}
.wb .scn{margin:0 0 14px;transform:none}
.wbpager{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:14px 0 18px;padding:10px 12px;border:1px solid var(--line,#e6e6ea);border-radius:14px;background:#fff}
.wbpager .pgs{display:flex;gap:6px;flex-wrap:wrap}
.wbpager button{appearance:none;border:1.5px solid #243041;background:#fff;border-radius:999px;padding:6px 12px;font-weight:800;font-size:.9rem;cursor:pointer;line-height:1}
.wbpager button.on{background:#243041;color:#fff}
.wbpager button.done{border-color:#3fc48f;color:#1f7a55}
.wbpager button.on.done{background:#3fc48f;border-color:#3fc48f;color:#fff}
.wbpager button[disabled]{opacity:.35;cursor:default}
.wbpager .pgi{margin-left:auto;font-weight:700;color:var(--muted,#6b7280);font-size:.9rem}
.wbpager .nav{display:flex;gap:6px}
.wb .wbp{scroll-margin-top:84px}
.wb .wbnext{display:flex;justify-content:space-between;gap:10px;margin:18px 0 6px}
.wb .wbnext button{appearance:none;border:2px solid #243041;background:#ffe28a;border-radius:14px;padding:12px 18px;font-weight:900;cursor:pointer;box-shadow:3px 3px 0 rgba(36,48,65,.15)}
.wb .wbnext button.back{background:#fff}
.wb .wbnext{flex-wrap:wrap}
.wb .wbnext a.btn{border:2px solid #243041;background:#ffe28a;color:#243041;border-radius:14px;padding:12px 18px;font-weight:900;text-decoration:none;box-shadow:3px 3px 0 rgba(36,48,65,.15)}
.wb .wbnext a.btn.ghost{background:#fff}
.wb .wbnext a.btn:first-of-type{margin-left:auto}
.wb .wbnext button[disabled]{opacity:.35;cursor:default;box-shadow:none}
@media print{.wbpager,.wb .wbnext{display:none}.scn{box-shadow:none;transform:none}}

/* ===== v65 (2026-10-06) — Book mode: the lesson laid out in parts like the workbook; default. Class mode = the slide stage. ===== */
.deckwrap.book .stage,.deckwrap.book .dnav,.deckwrap.book .tnote,.deckwrap.book .deckbar .pg,.deckwrap.book + .flow,.deckwrap.book ~ .flow{display:none}
.deckwrap.slides .book{display:none}
.book{background:#fff;border:1px solid var(--line);border-radius:20px;padding:clamp(18px,3vw,44px) clamp(16px,3.5vw,56px);max-width:960px;margin:0 auto;font-family:var(--kr);box-shadow:0 1px 0 rgba(20,33,58,.04),0 18px 40px -28px rgba(20,33,58,.25)}
.book .bpager{margin:0 0 22px}
.book .bpage{display:none}.book .bpage.on{display:block}
.book .bph{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;border-bottom:3px solid var(--ink);padding:0 0 10px;margin:0 0 22px;font-family:var(--kr-disp);font-size:clamp(1.2rem,2.2vw,1.6rem);font-weight:800}
.book .bph span{font-family:var(--body);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--coral-deep);font-weight:800}
/* v66 (2026-10-06, 대표: "슬라이드를 나열하지 말고 슬라이드 안의 내용을 밖으로 꺼내서 책처럼 디자인") — the slide frame is gone in Book mode:
   no icon circle, no stage tab, no footer, no fixed-size type; each slide becomes a section with a small eyebrow (stage) and a running heading,
   vocabulary cards become a two-column word list, drills become exercise lines, the cover becomes a chapter opener. */
.book{max-width:880px;font-size:1rem;line-height:1.6;color:var(--ink)}
.book .slide{position:relative;inset:auto;opacity:1;transform:none;pointer-events:auto;overflow:visible;display:grid;align-content:start;gap:14px;padding:0;margin:0 0 34px;background:transparent;border:0;border-radius:0;transition:none;aspect-ratio:auto;height:auto;min-height:0;max-height:none;animation:none;scrollbar-width:auto}
.book .slide:last-child{margin-bottom:0}
.book .slide .spill,.book .slide .sft,.book .slide .sico{display:none}
.book .slide .shd{display:block;padding:0;border:0;margin:0}
.book .slide .stg{font-family:var(--body);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--cd);gap:6px;margin-bottom:4px}
.book .slide .stg small{font-size:1em;color:var(--muted);letter-spacing:.14em}
.book .slide.hh h3{font-family:var(--kr-disp);font-size:1.3rem;line-height:1.3;margin:0;padding:0 0 8px;border-bottom:2px solid var(--line);position:relative}
.book .slide.hh h3::after{content:"";position:absolute;left:0;bottom:-2px;width:56px;height:2px;background:var(--cd)}
.book .slide.hh h3 small{display:block;font-family:var(--body);font-size:.84rem;color:var(--ink-2);font-weight:500;line-height:1.5;margin-top:5px}
.book .slide .art{position:absolute}
.book .slide .scn{max-width:640px;margin:0 auto;width:100%}
.book .slide .scn::before{padding-top:28.3333%}
/* type sizes: the stage uses viewport-scaled type for a 16:9 frame; a book column reads at fixed sizes */
.book .slide .drill .line{font-size:1.25rem;background:none;border:0;border-left:3px solid var(--cd);border-radius:0;padding:4px 0 4px 16px;text-align:left;min-height:0;display:block}
.book .slide .drill .opts{justify-content:flex-start;gap:6px}
.book .slide .drill .opts button{font-size:.86rem;padding:5px 12px}
.book .slide .build .out{font-size:1.15rem;justify-content:flex-start;padding:10px 14px;min-height:2em;background:none;border:1px solid var(--line);border-radius:10px}
.book .slide .build button{font-size:.86rem;padding:6px 10px}
.book .slide .rule b{font-size:1.25rem}.book .slide .rule small{font-size:.78rem}.book .slide .rule .arrow{font-size:1.2rem}
.book .slide .bub{font-size:1rem;padding:10px 14px}
.book .slide .vtab,.book .slide .plan{font-size:.92rem}
.book .slide .vtab th,.book .slide .vtab td{padding:7px 10px}
.book .slide .vtab{border:0;border-radius:0;border-top:2px solid var(--ink)}
.book .slide .vtab tr{border-bottom:1px solid var(--line)}
/* vocabulary cards → word list, two columns */
.book .slide .vgrid{grid-template-columns:repeat(2,1fr);gap:0 36px}
.book .slide .vcard{display:grid;grid-template-columns:22px 1fr auto;gap:0 10px;align-items:baseline;text-align:left;border:0;border-bottom:1px dotted var(--line-2);border-radius:0;padding:7px 0;min-height:0;background:transparent}
.book .slide .vcard i{position:static;width:auto;height:auto;border-radius:0;background:none;color:var(--muted);font-size:.72rem;font-weight:700}
.book .slide .vcard>span{font-size:1.05rem;font-weight:700}
.book .slide .vcard>small{font-size:.82rem;color:var(--ink-2);grid-column:2;text-align:left}
.book .slide .vcard .say{position:static;grid-column:3;grid-row:1;align-self:center}
.book .slide .vcard.q{background:transparent;border-style:dotted}
@media (max-width:640px){.book .slide .vgrid{grid-template-columns:1fr}}
/* cover → chapter opener */
.book .slide.cover{background:none;border:0;border-radius:0;padding:6px 0 22px;color:var(--ink);min-height:0;gap:14px;align-content:start}
.book .slide.cover h3{font-size:1rem;gap:4px}
.book .slide.cover .cv-lv{color:var(--coral-deep);font-size:.74rem}
.book .slide.cover .cv-t{color:var(--ink);font-size:clamp(1.8rem,4vw,2.6rem);line-height:1.15}
.book .slide.cover h3 small{font-size:.9rem;color:var(--ink-2);font-weight:500;margin-top:4px}
.book .slide.cover .cv-blk{margin:0 0 6px}
.book .slide.cover .cv-g{font-size:1.1rem;gap:8px}
.book .slide.cover .cv-g span{color:var(--muted)}
.book .slide.cover .cv-g mark{background:none;color:var(--ink);padding:0;border-radius:0;border-bottom:3px solid var(--coral)}
.book .slide.cover .cv-sub{color:var(--ink-2);font-size:.86rem}
.book .slide.cover .tg{background:#fff;border-color:var(--line-2);color:var(--ink-2)}.book .slide.cover .tg b{background:var(--ink);color:#fff}
/* section rows used by the stage with fixed heights */
.book .slide .goals{font-size:1rem}
.book .slide .qa{gap:8px}
.book .slide .frames{gap:6px}
.book .slide .tip{padding:10px 12px}
.book .slide .rd{margin:0}
/* ===== v71 (2026-10-06, 대표: "서울대 교재 뒤의 문법 설명·예문처럼 자세히 — 셀프스터디") — grammar reference block in decks (.gref) and the #/grammar index ===== */
:is(.slide,.tbook) .gref{display:grid;gap:clamp(8px,1.3vw,14px);font-family:var(--kr)}
:is(.slide,.tbook) .gref small,.gwrap .gbody small{display:block;font-family:var(--body);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--coral-deep);font-weight:800;margin-bottom:4px}
:is(.slide,.tbook) .gref .gr-mean p{margin:0;font-family:var(--body);font-size:clamp(.82rem,1.3vw,1rem);line-height:1.55;color:var(--ink)}
:is(.slide,.tbook) .gref ol,:is(.slide,.tbook) .gref ul{margin:0;padding-left:1.3em;display:grid;gap:5px}
:is(.slide,.tbook) .gref li b{font-family:var(--kr-disp);font-weight:800;font-size:clamp(.95rem,1.6vw,1.2rem)}
:is(.slide,.tbook) .gref li span{display:block;font-family:var(--body);font-size:clamp(.72rem,1.05vw,.86rem);color:var(--ink-2)}
:is(.slide,.tbook) .gref li .say{border:0;background:transparent;cursor:pointer;color:var(--muted);width:22px;height:22px;padding:0;vertical-align:middle;margin-left:4px}
:is(.slide,.tbook) .gref li .say svg{width:16px;height:16px}
:is(.slide,.tbook) .gref .gr-note{background:var(--honey-soft);border-radius:10px;padding:10px 14px}
:is(.slide,.tbook) .gref .gr-note li,:is(.slide,.tbook) .gref .gr-cmp li{font-family:var(--body);font-size:clamp(.74rem,1.1vw,.9rem);line-height:1.5}
:is(.slide,.tbook) .gref .gr-cmp{border-left:3px solid var(--line-2);padding-left:12px}
.book .slide .gref .gr-mean p{font-size:1rem}.book .slide .gref li b{font-size:1.05rem}.book .slide .gref li span,.book .slide .gref .gr-note li,.book .slide .gref .gr-cmp li{font-size:.9rem}
.gsearch{display:flex;gap:8px;margin:14px 0 10px;max-width:560px}
.gsearch input{flex:1;font:inherit;padding:10px 14px;border:1.5px solid var(--line-2);border-radius:999px;background:#fff}
.gtabs{display:flex;flex-wrap:wrap;gap:6px}
.gtabs .chip{font-size:.8rem;font-weight:700;padding:6px 12px;border-radius:999px;border:1.5px solid var(--line-2);background:#fff;color:var(--ink-2);text-decoration:none}
.gtabs .chip.on{background:var(--ink);color:#fff;border-color:var(--ink)}
/* v86 UX: Korean breaks between words, never inside one (저는 학생이에 / 요). Chinese and Japanese have no spaces, so they keep the normal breaking */
html:not([lang^="zh"]):not([lang^="ja"]) body{word-break:keep-all;overflow-wrap:break-word}
/* v86 UX (phone): Practice opened with two long paragraphs — the first question sat 1,100px down */
@media (max-width:640px){.wb .wbtop{padding:14px 16px;gap:10px}.wb .wbprog{min-width:0;grid-template-columns:auto auto 1fr;align-items:center;justify-items:start;text-align:left;gap:6px 10px}.wb .wbprog b{font-size:1.4rem}.wb .wbprog .bar{min-width:60px}.wb .wbprog .row{grid-column:1/-1;flex-wrap:nowrap;justify-content:flex-start}.wb .wbprog .row .mini{padding:6px 10px;font-size:.74rem;white-space:nowrap}}
@media (max-width:640px){.hide-sm{display:none}.wb .wbintro{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;cursor:pointer;position:relative}.wb .wbintro.open{display:block}}
/* v98 vocabulary picture cards (site3/vpic.js): big drawings, wider cards in a grid that has any */
:is(.slide,.tbook) .vgrid.pics{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
:is(.slide,.tbook) .vgrid.pics .vcard{padding:12px 10px 12px;align-content:start;min-height:170px}
:is(.slide,.tbook) .vgrid.pics .vcard:not(.hasp){align-content:center}
:is(.slide,.tbook) .vcard .vpic{width:96px;height:96px;margin:4px auto 6px;display:block}
:is(.slide,.tbook) .vcard .vpic svg{width:100%;height:100%;display:block}
@media (max-width:480px){:is(.slide,.tbook) .vgrid.pics{grid-template-columns:1fr 1fr}:is(.slide,.tbook) .vcard .vpic{width:84px;height:84px}}
/* v98 Practice front page: progress panel top-right (PC), separate course tabs */
.wbhw{display:grid;grid-template-columns:1fr minmax(300px,360px);gap:28px;align-items:end}
.wbpanel{background:#fff;border:2px solid var(--ink);border-radius:18px;padding:16px 16px 14px;box-shadow:4px 4px 0 var(--honey);display:grid;gap:12px}
.wbp-top{display:grid;grid-template-columns:84px 1fr;gap:14px;align-items:center}
.wbring{width:84px;height:84px;display:block}
.wbp-num b{display:block;font-family:var(--disp);font-size:2rem;font-weight:900;line-height:1;color:var(--ink)}
.wbp-num b i{font-style:normal;font-size:1rem;color:var(--muted);font-weight:800;margin-left:4px}
.wbp-num small{display:block;font-size:.76rem;font-weight:800;color:var(--ink-2);margin-top:4px}
.wbp-num span{display:inline-block;margin-top:6px;font-size:.7rem;font-weight:800;color:#8a6100;background:var(--honey-soft);border-radius:999px;padding:2px 8px}
.wbbars{display:grid;grid-template-columns:repeat(8,1fr);gap:6px;align-items:end}
.wbbar{display:grid;gap:3px;justify-items:center;text-decoration:none;color:var(--muted)}
.wbbar span{position:relative;width:100%;height:46px;background:var(--alt);border-radius:6px;overflow:hidden;display:block}
.wbbar em{position:absolute;left:0;right:0;bottom:0;display:block}
.wbbar em.g{background:var(--honey);opacity:.75}
.wbbar em.d{background:var(--leaf);z-index:1}
.wbbar small{font-size:.66rem;font-weight:800}
.wbbar.on small{color:var(--ink)}
.wbbar.on span{outline:2px solid var(--ink);outline-offset:1px}
.wbcrsrow{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.wbcrs{background:var(--alt);border-radius:10px;padding:6px 8px;display:grid;gap:2px}
.wbcrs small{font-size:.62rem;font-weight:800;color:var(--muted);line-height:1.2}
.wbcrs b{font-family:var(--disp);font-weight:900;font-size:1rem}
.wbcrs b i{font-style:normal;color:var(--muted);font-size:.72rem;margin-left:2px}
.wbcont{display:grid;gap:2px;text-decoration:none;background:var(--ink);color:#fff;border-radius:12px;padding:10px 14px}
.wbcont small{font-size:.66rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--honey)}
.wbcont b{font-size:1rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wbcont span{font-size:.76rem;font-weight:700;opacity:.85}
.wbcont:hover{background:#1f2f4d}
.lvtabs.lvcrs{margin-top:-4px;align-items:center}.lvtabs.lvcrs small{font-size:.68rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-right:4px}
@media (max-width:860px){.wbhw{grid-template-columns:1fr;gap:14px}.wbpanel{box-shadow:3px 3px 0 var(--honey)}}
@media (max-width:480px){.wbp-top{grid-template-columns:64px 1fr}.wbring{width:64px;height:64px}.wbbar span{height:34px}}
/* v88 UX: "Continue" bar on Lessons */
.lcont{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:4px 14px;margin:14px 0 0;max-width:640px;padding:12px 16px;background:var(--ink);color:#fff;border-radius:14px;text-decoration:none;box-shadow:3px 3px 0 var(--coral)}
.lcont small{font-size:.68rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--honey)}
.lcont b{font-size:1.02rem;font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lcont span{font-size:.8rem;font-weight:700;color:#fff;opacity:.85;white-space:nowrap}
.lcont:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--coral)}
@media (max-width:480px){.lcont{grid-template-columns:1fr auto}.lcont small{grid-column:1/-1}}
/* v88 UX (phone): the top-bar button broke into two lines (Start / studying) */
@media (max-width:560px){.nav .btn{white-space:nowrap}.nav .navr{gap:6px}}
@media (max-width:380px){.nav .btn{padding:8px 10px;font-size:.74rem}}
/* v87 UX: on touch screens the grammar examples' speaker buttons (22px) become a 36px target */
@media (pointer:coarse){.gmain .gex .say,.gwrap .gex .say{width:36px;height:36px;margin-left:2px}.gmain .gex .say svg,.gwrap .gex .say svg{width:20px;height:20px;margin:auto}}
/* v85 irregular verbs table (#/grammar?id=irr) */
.irr-lead{max-width:760px;margin:0 0 18px}
.irr{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,520px),1fr));gap:18px}
.irr-g{background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px 18px 14px}
.irr-g h3{display:flex;align-items:baseline;gap:10px;margin:0 0 6px;font-size:1.15rem}
.irr-g h3 b{font-family:var(--kr);font-weight:900}
.irr-g h3 small{color:var(--muted);font-size:.8rem;font-weight:700}
.irr-g>p{margin:0 0 10px;font-size:.88rem;color:var(--ink-2);line-height:1.55}
.irr-tw{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 -4px}
.irr-g table{border-collapse:collapse;width:100%;min-width:520px;font-family:var(--kr);font-size:.92rem}
.irr-g th,.irr-g td{padding:7px 8px;border-bottom:1px solid var(--line);text-align:left;white-space:nowrap}
.irr-g thead th{font-size:.72rem;color:var(--muted);font-weight:800;background:var(--alt)}
.irr-g tbody th button{appearance:none;border:0;background:none;padding:0;font:inherit;font-weight:900;color:var(--ink);cursor:pointer;border-bottom:1.5px dashed var(--line-2)}
.irr-g td mark{background:var(--coral-soft);color:var(--coral-deep);font-weight:900;border-radius:4px;padding:0 2px}
.irr-g td:nth-child(2){color:var(--muted)}
.irr-more,.irr-reg{margin:10px 0 0;font-size:.84rem;font-family:var(--kr)}
.irr-more b,.irr-reg b{font-family:var(--body);font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-right:6px}
.irr-ha{grid-column:1/-1;margin:0}
.gwrap{max-width:880px}
.gwrap .glesson{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin:28px 0 10px;padding-bottom:8px;border-bottom:2px solid var(--ink);font-family:var(--kr-disp);font-size:1.15rem}
.gwrap .glesson span{font-family:var(--body);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--coral-deep);font-weight:800}
.gwrap .glesson small{font-family:var(--body);font-size:.84rem;color:var(--muted);font-weight:500}
.gwrap .gitem{border:1px solid var(--line);border-radius:14px;background:#fff;margin:0 0 8px;padding:0}
.gwrap .gitem summary{cursor:pointer;padding:12px 16px;display:flex;gap:12px;align-items:baseline;flex-wrap:wrap;list-style:none}
.gwrap .gitem summary::-webkit-details-marker{display:none}
.gwrap .gitem summary::before{content:"+";font-weight:800;color:var(--coral-deep);width:14px}
.gwrap .gitem[open] summary::before{content:"–"}
.gwrap .gitem summary b{font-family:var(--kr-disp);font-size:1.05rem}
.gwrap .gitem summary span{font-size:.86rem;color:var(--ink-2)}
.gwrap .gbody{padding:4px 18px 16px 42px;display:grid;gap:12px;font-family:var(--kr)}
.gwrap .gtag{display:inline-flex;gap:6px;align-items:center;font-size:.72rem;border:1px solid var(--line-2);border-radius:999px;padding:3px 10px 3px 4px;margin:4px 6px 0 0;color:var(--ink-2)}
.gwrap .gtag b{background:var(--ink);color:#fff;border-radius:999px;padding:2px 8px;font-size:.62rem;letter-spacing:.06em}
.gwrap .gforms{border-collapse:collapse;width:100%;font-size:.9rem;border-top:2px solid var(--ink)}
.gwrap .gforms th,.gwrap .gforms td{padding:6px 10px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.gwrap .gforms th{font-family:var(--kr-disp);white-space:nowrap}
.gwrap .gforms td.kr{color:var(--ink-2)}
.gwrap .gmean p{margin:0;line-height:1.6}
.gwrap .gex ol{margin:0;padding-left:1.3em;display:grid;gap:6px}
.gwrap .gex li b{font-family:var(--kr-disp);font-size:1.02rem}
.gwrap .gex li span{display:block;font-size:.86rem;color:var(--ink-2)}
.gwrap .gex .say{border:0;background:transparent;cursor:pointer;color:var(--muted);width:22px;height:22px;padding:0;vertical-align:middle;margin-left:4px}
.gwrap .gex .say svg{width:16px;height:16px}
.gwrap .gnote{margin:0;font-size:.88rem;color:var(--ink-2);background:var(--alt);border-radius:10px;padding:8px 12px}
.gwrap .gwarn{background:var(--honey-soft);border-radius:10px;padding:10px 14px}
.gwrap .gwarn ul,.gwrap .gcmp ul{margin:0;padding-left:1.2em;font-size:.9rem;line-height:1.55}
.gwrap .gcmp{border-left:3px solid var(--line-2);padding-left:12px}
.gwrap .glink{margin:4px 0 0}
@media (max-width:640px){.gwrap .gbody{padding-left:16px}.gsearch{flex-direction:column}}
.gr-ox{width:100%;border-collapse:collapse;font-family:var(--kr);font-size:.92rem}
.gr-ox td{padding:6px 10px;border-top:1px solid var(--line);vertical-align:top;width:50%}
.gr-ox td.x{color:#B3261E;text-decoration:line-through;text-decoration-color:rgba(179,38,30,.45)}
.gr-ox td.o{color:#1B6B3A;font-weight:700}
.gr-ox td.why{font-family:var(--body);font-size:.82rem;color:var(--ink-2);border-top:0;padding-top:0}
:is(.slide,.tbook) .gref .gr-at{margin:6px 0 0;font-family:var(--body);font-size:clamp(.74rem,1.1vw,.9rem);color:var(--ink-2)}
:is(.slide,.tbook) .gref .gr-at b{color:var(--coral-deep);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;margin-right:6px}
:is(.slide,.tbook) .gref .gr-ox{font-size:clamp(.8rem,1.3vw,1rem)}
.howto{background:#fff;border:1px solid var(--line);border-left:4px solid var(--coral);border-radius:14px;padding:14px 18px;margin:0 0 16px;max-width:960px;margin-left:auto;margin-right:auto}
.howto b{display:block;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--coral-deep);margin-bottom:8px}
.howto ol{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:10px 18px}
.howto li{display:grid;gap:3px;font-size:.84rem;line-height:1.45;color:var(--ink-2)}
.howto li em{font-style:normal;font-weight:800;color:var(--ink);font-family:var(--kr-disp)}
.howto li a{color:var(--ink-2);text-decoration:underline;text-decoration-color:var(--line-2);text-underline-offset:3px}
.howto li a:hover{color:var(--coral-deep)}
@media (max-width:760px){.howto ol{grid-template-columns:1fr 1fr}}
.howto>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:10px}
.howto>summary::-webkit-details-marker{display:none}
.howto>summary b{margin-bottom:0}
.howto>summary::after{content:"";width:8px;height:8px;border-right:2px solid var(--coral-deep);border-bottom:2px solid var(--coral-deep);transform:rotate(45deg);margin-top:-4px;transition:transform .15s}
.howto[open]>summary::after{transform:rotate(-135deg);margin-top:4px}
.howto[open]>summary{margin-bottom:10px}
:is(.slide,.tbook) .greflink{margin:8px 0 0;font-size:.74rem;font-weight:700}
:is(.slide,.tbook) .greflink a{color:var(--coral-deep);text-decoration:none;border-bottom:1.5px solid var(--coral-soft)}
.book .slide .greflink{font-size:.84rem}
.book .slide[data-stage="교사용"]{display:none}.deckwrap.teach .book .slide[data-stage="교사용"]{display:grid}
.bnote{display:none;background:var(--honey-soft);border-radius:10px;padding:10px 14px;font-size:.86rem;line-height:1.55;color:var(--ink-2);font-family:var(--kr)}
.bnote b{display:block;font-family:var(--body);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:#8A6A1C;margin-bottom:4px}
.deckwrap.teach .book .bnote{display:block}
.stage .bnote{display:none}
.book .revrow{justify-content:flex-start}
@media print{.book{box-shadow:none;border:0;padding:0}.book .bpage{display:block;break-before:page}.book .bpager,.book .wbnext,.deckbar{display:none}}
/* ===== v63 (2026-10-06, 대표: "슬라이드 내용도 워크북처럼 사이트에 쭉 보여 주기") — reading view: the deck's slides stacked as cards on one scrolling page (superseded by Book mode v65, kept for the .read class) ===== */
.deckbar .togs{display:inline-flex;gap:6px;flex-wrap:wrap}
.deckwrap.read .stage{aspect-ratio:auto;max-height:none;min-height:0;height:auto;overflow:visible;background:transparent;border:0;border-radius:0}
.deckwrap.read .slide{position:relative;inset:auto;opacity:1;transform:none;pointer-events:auto;overflow:visible;background:#fff;border:1px solid var(--line);border-radius:14px;margin:0 0 14px;padding-bottom:clamp(18px,3vw,36px);transition:none}
.deckwrap.read .slide.cover{min-height:260px}
.deckwrap.read .slide .art{position:absolute}
.deckwrap.read .tnote,.deckwrap.read .dnav,.deckwrap.read .flow{display:none}
.deckwrap.read .deckbar .pg{display:none}
@media (max-width:760px){.deckwrap.read .stage{height:auto}}
@media print{.deckwrap.read .slide{break-inside:avoid;box-shadow:none}}
/* ===== v73 (2026-10-07) Student Book chapter — textbook.js. The .book .slide sizes, re-used for the chapter ===== */
.tbook .spill,.tbook .sft,.tbook .sico{display:none}
.tbook .shd{display:block;padding:0;border:0;margin:0}
.tbook .stg{font-family:var(--body);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--cd);gap:6px;margin-bottom:4px}
.tbook .stg small{font-size:1em;color:var(--muted);letter-spacing:.14em}
.tbook .art{position:absolute}
.tbook .scn{max-width:640px;margin:0 auto;width:100%}
.tbook .scn::before{padding-top:28.3333%}
.tbook .drill .line{font-size:1.25rem;background:none;border:0;border-left:3px solid var(--cd);border-radius:0;padding:4px 0 4px 16px;text-align:left;min-height:0;display:block}
.tbook .drill .opts{justify-content:flex-start;gap:6px}
.tbook .drill .opts button{font-size:.86rem;padding:5px 12px}
.tbook .build .out{font-size:1.15rem;justify-content:flex-start;padding:10px 14px;min-height:2em;background:none;border:1px solid var(--line);border-radius:10px}
.tbook .build button{font-size:.86rem;padding:6px 10px}
.tbook .rule b{font-size:1.25rem}.tbook .rule small{font-size:.78rem}.tbook .rule .arrow{font-size:1.2rem}
.tbook .bub{font-size:1rem;padding:10px 14px}
.tbook .vtab,.tbook .plan{font-size:.92rem}
.tbook .vtab th,.tbook .vtab td{padding:7px 10px}
.tbook .vtab{border:0;border-radius:0;border-top:2px solid var(--ink)}
.tbook .vtab tr{border-bottom:1px solid var(--line)}
.tbook .vcard{display:grid;grid-template-columns:22px 1fr auto;gap:0 10px;align-items:baseline;text-align:left;border:0;border-bottom:1px dotted var(--line-2);border-radius:0;padding:7px 0;min-height:0;background:transparent}
.tbook .vcard i{position:static;width:auto;height:auto;border-radius:0;background:none;color:var(--muted);font-size:.72rem;font-weight:700}
.tbook .vcard>span{font-size:1.05rem;font-weight:700}
.tbook .vcard>small{font-size:.82rem;color:var(--ink-2);grid-column:2;text-align:left}
.tbook .vcard .say{position:static;grid-column:3;grid-row:1;align-self:center}
.tbook .vcard.q{background:transparent;border-style:dotted}
.tbook .goals{font-size:1rem}
.tbook .qa{gap:8px}
.tbook .frames{gap:6px}
.tbook .tip{padding:10px 12px}
.tbook .rd{margin:0}
.tbook .gref .gr-mean p{font-size:1rem}.tbook .gref li b{font-size:1.05rem}.tbook .gref li span,.tbook .gref .gr-note li,.tbook .gref .gr-cmp li{font-size:.9rem}
.tbook .greflink{font-size:.84rem}
/* ===== v73 (2026-10-07) Student Book chapter layout (textbook.js). The owner: "lessons like the SNU Student Book - not slides laid out; no review; use the width; recompose the content" ===== */
.lhead2{padding-bottom:10px}
.lpage .wrap{max-width:1280px}
.lmodes{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin:0 0 14px}
.lmodes button{font:inherit;font-weight:800;font-size:.86rem;padding:9px 18px;border-radius:999px;border:1.5px solid var(--line-2);background:#fff;color:var(--ink);cursor:pointer}
.lmodes button.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.lpage.cls .deckwrap .tog[data-mode]{display:none}
.lpage .howto{max-width:none}
.tbook{background:#fff;border:1px solid var(--line);border-radius:22px;padding:clamp(20px,3vw,48px) clamp(18px,4vw,64px) clamp(30px,4vw,60px);font-family:var(--kr);color:var(--ink);line-height:1.6;box-shadow:0 1px 0 rgba(20,33,58,.04),0 24px 48px -32px rgba(20,33,58,.3)}
/* opener */
.tbo{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(18px,3vw,40px);align-items:start;padding:0 0 clamp(20px,3vw,32px);border-bottom:3px solid var(--ink);margin-bottom:6px}
.tbo-lv{display:inline-block;font-family:var(--body);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;font-weight:800;color:var(--coral-deep);margin-bottom:8px}
.tbo h1{font-family:var(--kr-disp);font-size:clamp(2rem,4.6vw,3.4rem);line-height:1.12;margin:0 0 6px;font-weight:800;letter-spacing:-.01em}
.tbo-en{font-family:var(--body);font-size:1.05rem;color:var(--ink-2);margin:0 0 18px}
.tbo-g{display:grid;gap:6px;margin:0 0 18px}
.tbo-g small,.tbo-goal small{display:block;font-family:var(--body);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:800;margin-bottom:4px}
.tbo-gi{display:grid;grid-template-columns:28px 1fr;gap:0 10px;align-items:baseline}
.tbo-gi b{color:var(--coral-deep);font-size:1.1rem}
.tbo-gi span{font-family:var(--kr-disp);font-weight:800;font-size:1.15rem}
.tbo-gi em{grid-column:2;font-style:normal;font-family:var(--body);font-size:.84rem;color:var(--ink-2)}
.tbo-goal .goal{gap:0}
.tbo-goal .goal div{background:transparent;border:0;border-bottom:1px dotted var(--line-2);border-radius:0;padding:6px 0;font-size:.95rem;font-weight:600}
.tbo-art .scn{max-width:none;margin:0;transform:rotate(.6deg)}
/* chapter nav */
.tbnav{position:sticky;top:60px;z-index:5;display:flex;gap:4px;flex-wrap:wrap;align-items:center;background:#fff;padding:10px 0;margin:0 0 10px;border-bottom:1px solid var(--line);font-family:var(--body)}
.tbnav-t{font-weight:800;font-size:.78rem;color:var(--muted);margin-right:8px;letter-spacing:.06em}
.tbnav a{text-decoration:none;color:var(--ink-2);font-weight:700;font-size:.8rem;padding:5px 10px;border-radius:999px;border:1px solid transparent}
.tbnav a:hover{border-color:var(--line-2)}
.tbnav a.on{background:var(--ink);color:#fff}
/* sections */
.tbs{display:grid;grid-template-columns:72px 1fr;gap:0 clamp(12px,2vw,28px);padding:clamp(22px,3vw,36px) 0;border-bottom:1px solid var(--line)}
.tbs:last-child{border-bottom:0}
.tbh{grid-column:1/-1;display:grid;grid-template-columns:72px 1fr;gap:0 clamp(12px,2vw,28px);align-items:center;margin-bottom:18px}
.tbn{font-family:var(--body);font-size:clamp(2.2rem,4vw,3.2rem);font-weight:800;line-height:1;color:var(--coral-deep);text-align:right}
.tbh h2{font-family:var(--kr-disp);font-size:clamp(1.4rem,2.6vw,1.9rem);margin:0;line-height:1.2}
.tbh p{margin:2px 0 0;font-family:var(--body);color:var(--ink-2);font-size:.92rem}
.tbb{grid-column:2;display:grid;gap:16px;min-width:0}
.tbsub{font-family:var(--kr-disp);font-size:1.1rem;margin:10px 0 0;padding-left:12px;border-left:4px solid var(--coral);line-height:1.3}
.tbsub small{display:block;font-family:var(--body);font-size:.8rem;color:var(--ink-2);font-weight:500;margin-top:2px}
.tbnote{font-family:var(--body);font-size:.84rem;color:var(--ink-2);margin:0}
.tbdet{border:1px solid var(--line);border-radius:12px;padding:8px 14px;font-family:var(--body)}
.tbdet summary{cursor:pointer;font-weight:800;font-size:.84rem;color:var(--ink-2)}
.tbdet[open] summary{margin-bottom:8px}
.tbs.vocab .tbn,.tbs.intro .tbn,.tbs.tips .tbn{color:var(--honey)}.tbs.listen .tbn{color:var(--sky)}.tbs.read .tbn{color:var(--leaf)}.tbs.act .tbn{color:var(--lilac)}.tbs.wrap .tbn{color:var(--ink)}
.tbs.vocab .tbsub{border-color:var(--honey)}.tbs.listen .tbsub{border-color:var(--sky)}.tbs.read .tbsub{border-color:var(--leaf)}.tbs.act .tbsub{border-color:var(--lilac)}
/* grammar */
.tbg-head{display:grid;grid-template-columns:1fr auto;gap:12px 24px;align-items:start;background:var(--coral-soft);border-radius:14px;padding:14px 18px}
.tbg-pts{display:grid;gap:4px}
.tbg-pts span{font-family:var(--kr-disp);font-weight:800;font-size:1.08rem}
.tbg-tags small{display:block;font-family:var(--body);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:800;margin-bottom:4px}
.tbg-rule{display:grid;grid-template-columns:1.15fr .85fr;gap:16px;align-items:start}
.tbg-forms{display:grid;gap:10px;min-width:0}
.tbg-xpl .xpl{grid-template-columns:1fr;margin:0}
/* exercises */
.tbx{position:relative;border:1.5px solid var(--line);border-radius:16px;padding:14px 18px 16px;display:grid;gap:12px;background:#fff}
.tbx h4{margin:0;font-family:var(--kr-disp);font-size:1rem;display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
.tbx h4 i{font-style:normal;font-family:var(--body);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:#fff;background:var(--leaf-deep);border-radius:999px;padding:3px 9px}
.tbx h4 small{font-family:var(--body);font-size:.8rem;color:var(--ink-2);font-weight:500;flex-basis:100%}
.tbx .revrow,.tbdoc .revrow{justify-content:flex-start}
.tbl2{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
.tbdoc{display:grid;gap:12px}
.tbook .qs{margin:0;padding-left:1.4em;display:grid;gap:6px;font-weight:700;font-size:1rem}
/* component sizes inside the chapter (the slide sizes are for a 4:3 stage) */
.tbook .vgrid{grid-template-columns:repeat(3,1fr);gap:0 32px}
.tbook .vtools{justify-content:flex-start}
.tbook .dlg{max-width:860px}
.tbook .scn{max-width:760px;margin-left:0}
.tbook .situ{font-size:1rem}
.tbook .big{font-size:1.35rem;line-height:1.5}
.tbook .sub{font-size:.95rem}
.tbook .cpt b{font-size:1.4rem}
.tbook .ftab tbody td{font-size:1.05rem}.tbook .ftab th.f{font-size:1.2rem}
.tbook .xpl .ko p{font-size:1rem}.tbook .xpl .en{font-size:.88rem}
.tbook .gref{grid-template-columns:1fr 1fr}
.tbook .gref .gr-mean,.tbook .gref .gr-ex,.tbook .gref .gr-mis{grid-column:1/-1}
.tbook .gref .gr-ex ol{grid-template-columns:1fr 1fr;gap:6px 24px}
.tbook .gref .gr-mean p{font-size:1rem}
.tbook .culture{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.tbook .tips{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.tbook .hw{margin:0;padding-left:1.4em;display:grid;gap:6px;font-family:var(--body);font-size:.95rem}
.tbook .ck{grid-template-columns:repeat(auto-fill,minmax(130px,1fr))}
.tbook .rd{margin-left:0}
@media (max-width:900px){.tbo,.tbg-rule,.tbl2,.tbook .gref,.tbook .tips{grid-template-columns:1fr}.tbg-head{grid-template-columns:1fr}.tbs,.tbh{grid-template-columns:44px 1fr}.tbn{font-size:1.8rem}.tbook .vgrid{grid-template-columns:repeat(2,1fr)}.tbook .gref .gr-ex ol{grid-template-columns:1fr}}
@media (max-width:560px){.tbook{border-radius:14px;padding:16px 14px 24px}.tbook .vgrid{grid-template-columns:1fr}.tbook .qa{grid-template-columns:1fr}.tbs,.tbh{grid-template-columns:1fr}.tbn{text-align:left;font-size:1.4rem}.tbb{grid-column:1}.tbnav{position:static}}
@media print{.tbnav,.lmodes,.howto,.lhead2 .row{display:none}.tbook{border:0;box-shadow:none;padding:0}.tbs{break-inside:avoid-page}}
/* v73 scene pictures (std\scene_gen.ps1) */
.scnimg{margin:0 0 12px;border-radius:16px;overflow:hidden;border:1px solid var(--line);background:#fffdf6;max-width:760px;box-shadow:0 10px 26px -18px rgba(20,33,58,.35)}
.scnimg img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}
.tbo-art .scnimg{max-width:none;margin:0;transform:rotate(.6deg)}
.tbl2 .scnimg{max-width:none}
/* ===== v74 (2026-10-07) Characters page (#/cast, cast.js) — the SNU-style "Characters" spread: full-body figures on a campus band, story cards below ===== */
.cpage .wrap{max-width:1280px}
.cband{position:relative;border-radius:22px;overflow:hidden;padding:clamp(24px,4vw,56px) clamp(12px,2vw,28px) 0;background:linear-gradient(180deg,#dff0ff 0%,#eaf6ff 42%,#b9e2a4 42.5%,#9fd38c 100%);box-shadow:0 24px 48px -32px rgba(20,33,58,.35)}
.cband::before{content:"";position:absolute;left:0;right:0;top:34%;height:9%;background:linear-gradient(180deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.55) 100%)}
.cfigs{position:relative;display:flex;align-items:flex-end;justify-content:center;gap:clamp(4px,1vw,14px);flex-wrap:wrap;min-height:360px}
.cfig{margin:0;display:grid;justify-items:center;gap:6px;flex:0 1 auto}
.cfig img{display:block;height:calc(var(--sc,1) * clamp(240px,30vw,400px));width:auto;filter:drop-shadow(0 10px 10px rgba(20,33,58,.22))}
.cfig figcaption{display:grid;gap:1px;text-align:center;background:rgba(255,255,255,.92);border-radius:10px;padding:5px 9px;margin-bottom:14px;font-family:var(--body);box-shadow:0 2px 6px rgba(20,33,58,.12)}
.cfig figcaption b{font-family:var(--kr-disp);font-size:.9rem}
.cfig figcaption span{font-size:.68rem;color:var(--ink-2);font-weight:700}
.ccards{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:22px}
.ccard{display:grid;grid-template-columns:120px 1fr;gap:16px;background:#fff;border:1px solid var(--line);border-radius:18px;padding:16px 18px;align-items:start}
.ccard .cim{background:linear-gradient(180deg,var(--sky-soft),var(--alt));border-radius:14px;height:200px;display:grid;place-items:end center;overflow:hidden}
.ccard .cim img{height:190px;width:auto;display:block}
.ccard .cno{display:inline-block;font-family:var(--body);font-size:.68rem;font-weight:800;letter-spacing:.1em;color:var(--coral-deep);margin-bottom:2px}
.ccard h3{margin:0;font-family:var(--kr-disp);font-size:1.2rem;line-height:1.25}
.ccard h3 small{display:block;font-family:var(--body);font-size:.84rem;color:var(--ink-2);font-weight:600}
.ccard .cmeta{margin:4px 0 8px;font-family:var(--body);font-size:.82rem;color:var(--ink-2);font-weight:700}
.ccard .cmeta i{font-style:normal;color:var(--muted);font-family:var(--kr)}
.ccard .cline{margin:0 0 8px;font-family:var(--body);font-size:.92rem;line-height:1.55}
.ccard .carc{margin:0;font-family:var(--body);font-size:.84rem;line-height:1.5;color:var(--ink-2)}
.ccard .carc b{display:block;font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:2px}
@media (max-width:900px){.ccards{grid-template-columns:1fr}.cfigs{min-height:240px}}
@media (max-width:560px){.ccard{grid-template-columns:84px 1fr}.ccard .cim{height:150px}.ccard .cim img{height:140px}.cfig img{height:calc(var(--sc,1) * 170px)}}
@media print{.cband{break-inside:avoid}.ccard{break-inside:avoid}}
/* ===== v75 (2026-10-07) Student Book: one class per book, page by page like the workbook; readable grammar explanations; characters page bubbles ===== */
.tbpage{display:none}.tbpage.on{display:block}
.tbpager{margin:0 0 18px}
.tbook .wbnext{margin-top:22px}
.tbp{display:grid;gap:16px}
.tbph{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;border-bottom:3px solid var(--ink);padding:0 0 10px;margin:0 0 6px;font-family:var(--kr-disp);font-size:clamp(1.25rem,2.3vw,1.7rem);font-weight:800;line-height:1.25}
.tbph span{font-family:var(--body);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--coral-deep);font-weight:800}
.tbp.cover .tbph{display:none}
.tbp.cover .tbo{display:block;border-bottom:0;padding:clamp(10px,2vw,24px) 0 0;margin:0}
.tbp.cover .tbo h1{font-size:clamp(2.2rem,5vw,3.6rem)}
.tbp.cover .tbo-g{margin:8px 0 22px;gap:14px}
.tbp.cover .tbo-gi{grid-template-columns:32px 1fr;align-items:start;padding:10px 0;border-bottom:1px solid var(--line)}
.tbp.cover .tbo-gi>div{display:grid;gap:4px}
.tbp.cover .tbo-gi span{font-size:1.25rem}
.tbp.cover .tbo-gi em{grid-column:auto}
.tbp.cover .gtags{margin-top:6px}
.tbp.cover .gtags.cv .tg{background:#fff}
.tbp.cover .tbo-goal .goal div{font-size:1rem}
.tbask small{display:block;font-family:var(--body);color:var(--muted);font-weight:600;margin-top:3px}
.tbg-head{display:grid;grid-template-columns:1fr;gap:10px;background:var(--coral-soft);border-radius:14px;padding:14px 18px}
.tbg-head h3{margin:0;font-family:var(--kr-disp);font-size:1.35rem;line-height:1.3}
.tbg-head h3 span{display:block;font-family:var(--body);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--coral-deep);font-weight:800;margin-bottom:2px}
.tbg-head h3 small{display:block;font-family:var(--body);font-size:.88rem;color:var(--ink-2);font-weight:500;margin-top:3px}
.tbg-rule{grid-template-columns:1fr 1fr}
/* readable English (app.js fmtEn): one sentence per line, Korean bold, enumerations as a list */
.kv{list-style:none;margin:6px 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:4px 16px}
.kv li{display:grid;grid-template-columns:auto 1fr;gap:0 10px;align-items:baseline;padding:4px 0;border-bottom:1px dotted var(--line-2);font-family:var(--body)}
.kv li b{font-family:var(--kr-disp);font-size:1.05em;font-weight:800;color:var(--ink);white-space:nowrap}
.kv li span{font-size:.92em;color:var(--ink-2)}
.kv.at{grid-template-columns:1fr;gap:2px}
.kv.at li{grid-template-columns:1fr;border-bottom:0;padding:2px 0 2px 14px;position:relative}
.kv.at li::before{content:"·";position:absolute;left:2px;color:var(--coral-deep);font-weight:900}
b.ko{font-family:var(--kr-disp);font-weight:800;color:var(--ink)}
:is(.slide,.tbook) .gref .gr-mean p,:is(.slide,.tbook) .xpl .en p,.gwrap .gmean p{margin:0 0 6px}
:is(.slide,.tbook) .gref .gr-mean p:last-child,:is(.slide,.tbook) .xpl .en p:last-child{margin-bottom:0}
:is(.slide,.tbook) .xpl .en p{font-family:var(--body);line-height:1.55}
:is(.slide,.tbook) .gref .gr-at b,.gwrap .gnote>b{display:block;font-family:var(--body);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--coral-deep);font-weight:800;margin:8px 0 2px}
.tbook .gref{grid-template-columns:1fr 1fr}
.tbook .gref .gr-mean,.tbook .gref .gr-ex,.tbook .gref .gr-mis{grid-column:1/-1}
.tbook .xpl .ko p{font-size:1.05rem}
/* good-to-know cards: one column, easy to read */
.tbook .tips{display:grid;grid-template-columns:1fr;gap:10px;max-width:860px}
.tbook .tip{display:grid;grid-template-columns:32px 1fr;gap:12px;align-items:start;background:#fff;border:1px solid var(--line);border-left:4px solid var(--honey);border-radius:12px;padding:12px 14px}
.tbook .tip i{width:28px;height:28px;border-radius:50%;background:var(--honey-soft);color:var(--honey-deep,#8A6A1C);display:grid;place-items:center;font-style:normal;font-weight:800;font-size:.8rem}
.tbook .tip b{display:block;font-family:var(--kr-disp);font-size:1rem;margin-bottom:3px}
.tbook .tip p{margin:0;font-family:var(--body);font-size:.9rem;line-height:1.55;color:var(--ink-2)}
.tbook .tip small{display:block;margin-top:5px;color:var(--muted);font-size:.76rem;font-weight:700;font-family:var(--kr)}
/* characters page: bubbles above the figures, three to a row */
.cfigs{display:grid;grid-template-columns:repeat(3,1fr);gap:18px 10px;align-items:end;justify-items:center;min-height:0}
.cfig{width:100%;display:grid;justify-items:center;gap:8px}
.cfig img{height:calc(var(--sc,1) * clamp(220px,26vw,360px))}
.cbub{position:relative;background:#fff;border-radius:14px;padding:9px 12px;font-family:var(--body);text-align:center;max-width:300px;box-shadow:0 3px 10px rgba(20,33,58,.14)}
.cbub::after{content:"";position:absolute;left:50%;bottom:-9px;width:18px;height:18px;background:#fff;transform:translateX(-50%) rotate(45deg);border-radius:3px;box-shadow:3px 3px 6px rgba(20,33,58,.08)}
.cbub b{display:block;font-family:var(--kr-disp);font-size:.98rem;line-height:1.2;margin-bottom:3px}
.cbub span{display:block;font-size:.74rem;line-height:1.4;color:var(--ink-2);font-weight:700}
.cbub span i{font-style:normal;font-family:var(--kr);color:var(--muted)}
.cfig figcaption{display:none}
.cband{padding-bottom:0}
@media (max-width:640px){.cfigs{grid-template-columns:repeat(2,1fr)}.cfig img{height:calc(var(--sc,1) * 200px)}.cbub{max-width:none}.tbg-rule{grid-template-columns:1fr}}
.tbg-en{margin:0;font-family:var(--body);font-size:1rem;color:var(--ink-2);font-weight:600}
.tbg-pts span{display:block;padding-left:14px;position:relative}.tbg-pts span::before{content:'·';position:absolute;left:0;color:var(--coral-deep);font-weight:900}
/* ===== v76 (2026-10-07) cleaner lists · grammar spread · status windows · My progress dashboard · player bar · intro on the cover ===== */
/* Student Book: Introduction on the cover page, grammar page starts with the sentences */
.tbintro{margin-top:26px;padding-top:22px;border-top:1px solid var(--line);display:grid;gap:12px}
.tbintro .tbsub{border-color:var(--honey)}
.tbintro .tbsub small{max-width:70ch}
.tbp.gram .tbg-head{margin-top:18px;padding:18px 20px;border-top:3px solid var(--coral);border-radius:0 0 14px 14px}
.tbp.gram .tbg-head h3{margin:0 0 6px;font-family:var(--kr-disp);font-size:clamp(1.4rem,2.6vw,1.9rem);line-height:1.25}
.tbp.gram .tbg-head h3 span{display:block;font-family:var(--body);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--coral-deep);font-weight:800;margin-bottom:4px}
.tbp.gram .tbg-head h3 small{display:block;font-family:var(--body);font-size:.92rem;color:var(--ink-2);font-weight:500;margin-top:4px}
.tbp.gram .tbsub:first-child{border-color:var(--honey)}
/* lessons · workbooks: one clean grid */
.lsum{margin:4px 0 12px;font-family:var(--body);color:var(--ink-2);font-size:.9rem}
.lsum b{font-family:var(--kr-disp);color:var(--ink)}
.lgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px}
.lcard2{position:relative;display:grid;grid-template-columns:40px 1fr;grid-template-rows:auto auto auto;gap:2px 12px;align-items:start;background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px 16px 12px;text-decoration:none;color:var(--ink);min-height:96px;transition:box-shadow .2s,border-color .2s}
.lcard2:hover{box-shadow:var(--sh);border-color:var(--line-2)}
.lcard2 .n{grid-row:1/4;width:40px;height:40px;border-radius:50%;background:var(--coral-soft);color:var(--coral-deep);display:grid;place-items:center;font-family:var(--disp);font-weight:800}
.lcard2 b{font-family:var(--kr-disp);font-size:1.02rem;line-height:1.3}
.lcard2 small{color:var(--muted);font-size:.8rem;font-weight:600;line-height:1.35}
.lcard2 .st{display:flex;gap:6px;align-items:center;margin-top:6px;font-family:var(--body)}
.lcard2 .st i{font-style:normal;width:22px;height:22px;border-radius:50%;border:1.5px solid var(--line-2);display:grid;place-items:center;font-size:.68rem;font-weight:800;color:var(--muted)}
.lcard2 .st i.on{background:var(--leaf);border-color:var(--leaf);color:#fff}
.lcard2 .st em{font-style:normal;font-size:.72rem;font-weight:800;color:var(--leaf-deep);background:var(--leaf-soft);border-radius:999px;padding:2px 8px}
.lcard2.done{border-color:var(--leaf);background:linear-gradient(160deg,var(--leaf-soft) 0%,#fff 55%)}
.lcard2.done .n{background:var(--leaf);color:#fff}
.lcard2.going .n{background:var(--coral);color:#fff}
.lcard2.off{background:transparent;border-style:dashed;color:var(--muted)}
.lcard2.off .n{background:var(--alt2);color:var(--faint)}
.lcard2.wbc .st{width:100%}.lcard2.wbc .st .wbpct{flex:1;height:8px;border-radius:999px;background:var(--alt2);overflow:hidden;display:block}
.lcard2.wbc .st .wbpct em{display:block;height:100%;background:linear-gradient(90deg,var(--lilac),var(--coral));border-radius:999px;padding:0}
.lcard2.wbc .st .wbpct.done em{background:var(--leaf)}
.lcard2.wbc .st > em{background:transparent;color:var(--ink-2);padding:0;font-size:.8rem}
.crs-c .im{display:block;height:150px}
.crs-c .bd .go{margin-top:10px;font-weight:800;font-size:.84rem;text-decoration:none;color:var(--coral-deep)}
.crs-c .lchips .lchip{width:34px;height:34px;font-size:.8rem;text-decoration:none}
/* grammar reference: index + spread */
.gwrap2{display:grid;grid-template-columns:240px 1fr;gap:28px;align-items:start}
.gidx{position:sticky;top:78px;display:grid;gap:2px;max-height:calc(100vh - 100px);overflow:auto;padding-right:6px;font-family:var(--body)}
.gidx small{display:block;font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:800;margin:0 0 6px 8px}
.gidx a{display:grid;grid-template-columns:28px 1fr;gap:8px;align-items:center;text-decoration:none;color:var(--ink-2);font-size:.86rem;font-weight:600;padding:7px 8px;border-radius:10px;font-family:var(--kr)}
.gidx a i{font-style:normal;font-family:var(--body);font-weight:800;font-size:.72rem;color:var(--coral-deep);background:var(--coral-soft);border-radius:999px;text-align:center;line-height:22px;height:22px}
.gidx a:hover{background:var(--alt);color:var(--ink)}
.gidx a.back{grid-template-columns:1fr;font-weight:800;color:var(--ink)}
.gmain{min-width:0}
.gmain .glesson{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin:28px 0 10px;padding-bottom:8px;border-bottom:2px solid var(--ink);font-family:var(--kr-disp);font-size:1.15rem}
.gmain .glesson:first-of-type{margin-top:6px}
.gmain .glesson span{font-family:var(--body);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--coral-deep);font-weight:800}
.gmain .glesson small{font-family:var(--body);font-size:.84rem;color:var(--muted);font-weight:500}
.gmain .gitem{border:1px solid var(--line);border-radius:16px;background:#fff;margin:0 0 10px;padding:0;overflow:hidden}
.gmain .gitem summary{cursor:pointer;padding:14px 18px;display:grid;grid-template-columns:34px 1fr;gap:4px 14px;align-items:center;list-style:none}
.gmain .gitem summary::-webkit-details-marker{display:none}
.gmain .gitem summary .gno{width:34px;height:34px;border-radius:10px;background:var(--coral-soft);color:var(--coral-deep);display:grid;place-items:center;font-family:var(--body);font-weight:800;grid-row:1/3}
.gmain .gitem summary b{font-family:var(--kr-disp);font-size:1.12rem;display:block;line-height:1.3}
.gmain .gitem summary div > span{font-size:.86rem;color:var(--ink-2);font-family:var(--body)}
.gmain .gitem summary .gtags{grid-column:2;display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}
.gmain .gitem[open] summary{border-bottom:1px solid var(--line);background:var(--alt)}
.gmain .gbody{padding:16px 18px 18px;display:grid;gap:16px;font-family:var(--kr)}
.gmain .gbody > small,.gmain .g2 > div > small,.gmain .gex > small,.gmain .gwarn small,.gmain .gcmp small,.gmain .gmis small,.gmain .gmean small{display:block;font-family:var(--body);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--coral-deep);font-weight:800;margin-bottom:6px}
.gmain .g2{display:grid;grid-template-columns:1fr 1.1fr;gap:18px;align-items:start}
.gmain .g2 > div{display:grid;gap:10px;min-width:0}
.gmain .gtag{display:inline-flex;gap:6px;align-items:center;font-size:.7rem;border:1px solid var(--line-2);border-radius:999px;padding:2px 9px 2px 3px;color:var(--ink-2);font-family:var(--body);background:#fff}
.gmain .gtag b{background:var(--ink);color:#fff;border-radius:999px;padding:2px 7px;font-size:.6rem;letter-spacing:.06em}
.gmain .gforms{border-collapse:collapse;width:100%;font-size:.9rem;border-top:2px solid var(--ink)}
.gmain .gforms th,.gmain .gforms td{padding:7px 10px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.gmain .gforms th{font-family:var(--kr-disp);white-space:nowrap}
.gmain .gforms td.kr{color:var(--ink-2)}
.gmain .gmean p{margin:0 0 6px;line-height:1.6;font-family:var(--body)}
.gmain .gex ol{margin:0;padding-left:1.3em;display:grid;grid-template-columns:1fr 1fr;gap:6px 24px}
.gmain .gex li b{font-family:var(--kr-disp);font-size:1.02rem}
.gmain .gex li span{display:block;font-size:.84rem;color:var(--ink-2);font-family:var(--body)}
.gmain .gex .say{border:0;background:transparent;cursor:pointer;color:var(--muted);width:22px;height:22px;padding:0;vertical-align:middle;margin-left:4px}
.gmain .gex .say svg{width:16px;height:16px}
.gmain .g3{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;align-items:start}
.gmain .gnote{margin:0;font-size:.88rem;color:var(--ink-2);background:var(--alt);border-radius:10px;padding:8px 12px;font-family:var(--body)}
.gmain .gnote > b{display:block;font-family:var(--body);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--coral-deep);font-weight:800;margin-bottom:2px}
.gmain .gwarn{background:var(--honey-soft);border-radius:10px;padding:10px 14px}
.gmain .gwarn ul,.gmain .gcmp ul{margin:0;padding-left:1.2em;font-size:.9rem;line-height:1.55;font-family:var(--body)}
.gmain .gcmp{border:1px solid var(--line);border-radius:10px;padding:10px 14px}
.gmain .gmis .gr-ox{width:100%}
.gmain .glink{margin:0}
/* v86 UX (phone): the lesson index was 1,900px of chips before the first grammar point, and five textbook tags wrapped each row to 150px —
   both become one swipeable line; the index stays under the top bar */
@media (max-width:860px){.gidx{position:sticky!important;top:60px;z-index:6;flex-wrap:nowrap!important;overflow-x:auto;scrollbar-width:none;background:var(--paper);margin:0 -16px 6px;padding:8px 16px;border-bottom:1px solid var(--line)}.gidx::-webkit-scrollbar{display:none}.gidx a,.gidx small{flex:none;white-space:nowrap}.gidx small{align-self:center;width:auto!important;margin-right:4px}
  .gmain .gitem summary .gtags{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,#000 85%,transparent)}.gmain .gitem summary .gtags::-webkit-scrollbar{display:none}.gmain .gtag{flex:none}}
@media (max-width:860px){.gwrap2{grid-template-columns:1fr}.gidx{position:static;max-height:none;display:flex;flex-wrap:wrap;gap:4px}.gidx small{width:100%}.gidx a{grid-template-columns:auto;padding:5px 10px;border:1px solid var(--line);border-radius:999px;font-size:.8rem}.gidx a i{display:none}.gmain .g2{grid-template-columns:1fr}.gmain .gex ol{grid-template-columns:1fr}}
/* characters: status windows, rows of 3 · 3 · 3 · 4, the story */
.cfigs{display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-end;gap:22px 0}
.cfig{flex:0 0 33.333%;max-width:33.333%;display:grid;justify-items:center;gap:10px;padding:0 6px;box-sizing:border-box}
.cfig:nth-child(n+10){flex-basis:25%;max-width:25%}
.cfig img{height:calc(var(--sc,1) * clamp(220px,25vw,340px))}
.cbub{display:none}
.cstat{width:100%;max-width:260px;background:rgba(20,33,58,.86);color:#fff;border:1px solid rgba(255,255,255,.35);border-radius:6px;padding:9px 12px 10px;font-family:var(--body);position:relative;box-shadow:0 8px 20px -10px rgba(20,33,58,.5)}
.cstat::before,.cstat::after{content:"";position:absolute;width:10px;height:10px;border:2px solid #fff;opacity:.9}
.cstat::before{left:-1px;top:-1px;border-right:0;border-bottom:0;border-radius:4px 0 0 0}
.cstat::after{right:-1px;bottom:-1px;border-left:0;border-top:0;border-radius:0 0 4px 0}
.cstat b{display:block;font-family:var(--kr-disp);font-size:1rem;line-height:1.2;margin-bottom:6px;padding-bottom:6px;border-bottom:1px dashed rgba(255,255,255,.3)}
.cstat b small{display:block;font-family:var(--body);font-size:.7rem;font-weight:600;color:rgba(255,255,255,.75);margin-top:2px}
.cstat dl{display:grid;grid-template-columns:auto 1fr;gap:3px 10px;margin:0;font-size:.74rem;line-height:1.35}
.cstat dt{font-weight:800;letter-spacing:.08em;text-transform:uppercase;font-size:.62rem;color:#FFD08A;padding-top:2px}
.cstat dd{margin:0;font-weight:600}
.cstat dd i{font-style:normal;font-family:var(--kr);color:rgba(255,255,255,.7);font-size:.7rem}
.cstory{margin:28px 0 8px;display:grid;gap:18px}
.cstory-g{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.cstory-g div{background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px 18px}
.cstory-g b{display:block;font-family:var(--body);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--coral-deep);margin-bottom:6px}
.cstory-g p{margin:0;font-family:var(--body);font-size:.92rem;line-height:1.6;color:var(--ink-2)}
.ctl{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.ctl div{position:relative;border-top:3px solid var(--coral);padding:10px 4px 0;display:grid;gap:3px}
.ctl div::before{content:"";position:absolute;left:0;top:-7px;width:11px;height:11px;border-radius:50%;background:var(--coral)}
.ctl i{font-style:normal;font-family:var(--body);font-size:.7rem;font-weight:800;color:var(--muted);letter-spacing:.06em}
.ctl b{font-family:var(--kr-disp);font-size:1rem}
.ctl span{font-family:var(--body);font-size:.82rem;color:var(--ink-2);line-height:1.45}
@media (max-width:760px){.cfig,.cfig:nth-child(n+10){flex-basis:50%;max-width:50%}.cfig:nth-child(n+11){flex-basis:33.333%;max-width:33.333%}.cfig img{height:calc(var(--sc,1) * 190px)}.cstat{padding:7px 9px}.cstat dl{font-size:.68rem}.cstory-g,.ctl{grid-template-columns:1fr}}
/* My progress */
.dash2{display:grid;gap:14px}
.d2hero{display:grid;grid-template-columns:auto 1fr 300px;gap:22px;align-items:center;background:linear-gradient(120deg,var(--lilac-soft),var(--peach-soft));border-radius:var(--r-xl);padding:clamp(18px,3vw,28px)}
.d2av{width:132px;height:132px;border-radius:50%;background:#fff;overflow:hidden;display:grid;place-items:center;box-shadow:var(--sh);border:4px solid #fff}
.d2av img{width:100%;height:100%;object-fit:cover;object-position:top center;transform:scale(1.15) translateY(6%)}
.d2av span{font-family:var(--kr-disp);font-weight:800;font-size:2.4rem;color:var(--coral-deep)}
.d2hi h2{margin:4px 0 6px;font-size:clamp(1.3rem,2.4vw,1.8rem)}
.d2hi p{margin:0;font-family:var(--body);color:var(--ink-2)}
.d2hi .fire{color:var(--coral-deep)}
.d2hi .fire::before{content:"🔥 "}
.d2pick{margin-top:12px}
.d2pick small{display:block;font-family:var(--body);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:800;margin-bottom:6px}
.d2pick div{display:flex;gap:6px;flex-wrap:wrap}
.d2pick button{width:40px;height:40px;border-radius:50%;border:2px solid #fff;background:#fff;padding:0;overflow:hidden;cursor:pointer;box-shadow:0 2px 6px rgba(20,33,58,.15);opacity:.75;transition:transform .15s,opacity .15s}
.d2pick button img{width:100%;height:100%;object-fit:cover;object-position:top center;transform:scale(1.2) translateY(8%)}
.d2pick button:hover{opacity:1;transform:translateY(-2px)}
.d2pick button.on{opacity:1;border-color:var(--coral);transform:scale(1.12)}
.d2cont{background:#fff;border-radius:18px;padding:16px 18px;display:grid;gap:6px;box-shadow:var(--sh)}
.d2cont b.kr{font-family:var(--kr-disp);font-size:1.2rem;line-height:1.3}
.d2cont small{font-family:var(--body);color:var(--muted);font-weight:700;font-size:.8rem}
.d2st{display:flex;gap:6px;flex-wrap:wrap;margin:4px 0 2px}
.d2st i{font-style:normal;font-family:var(--body);font-size:.7rem;font-weight:800;border-radius:999px;padding:3px 9px;background:var(--alt2);color:var(--muted)}
.d2st i.on{background:var(--leaf-soft);color:var(--leaf-deep)}
.d2tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.d2tiles div{background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px 16px;display:grid;gap:2px}
.d2tiles b{font-family:var(--disp);font-size:1.7rem;line-height:1}
.d2tiles span{font-family:var(--body);font-size:.78rem;color:var(--muted);font-weight:700}
.d2tiles div:nth-child(1) b{color:#6B3FD1}.d2tiles div:nth-child(2) b{color:var(--leaf-deep)}.d2tiles div:nth-child(3) b{color:var(--coral-deep)}.d2tiles div:nth-child(4) b{color:var(--honey-deep,#8A6A1C)}
.d2grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.d2c{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:18px 20px;display:grid;gap:8px;align-content:start}
.d2c h3{margin:0;font-size:1.2rem}
.d2c h3 small{font-size:.8rem;color:var(--muted);font-weight:700}
.d2path{display:grid;grid-template-columns:repeat(4,1fr);gap:10px 6px;margin-top:4px}
.d2path a{display:grid;justify-items:center;gap:2px;text-decoration:none;color:var(--muted);font-family:var(--body);font-size:.72rem;font-weight:700}
.d2path .r{position:relative;width:64px;height:64px}
.d2path .r svg{width:100%;height:100%;transform:rotate(-90deg)}
.d2path .r circle{fill:none;stroke-width:7;stroke-linecap:round}
.d2path .r .bg{stroke:var(--alt2)}.d2path .r .fg{stroke:var(--lilac)}
.d2path a.cur .r .fg{stroke:var(--coral)}.d2path a.done .r .fg{stroke:var(--leaf)}
.d2path .r b{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--disp);font-size:.86rem;color:var(--ink)}
.d2path a.cur{color:var(--coral-deep)}
.d2bars div.today small{color:var(--coral-deep)}
.d2wb{display:grid;gap:8px;margin-top:4px}
.d2wb a{display:grid;grid-template-columns:1fr 90px 44px;gap:4px 12px;align-items:center;text-decoration:none;color:var(--ink);font-family:var(--body)}
.d2wb a b{font-family:var(--kr-disp);font-size:.95rem;grid-row:1}
.d2wb a small{grid-column:1;grid-row:2;font-size:.72rem;color:var(--muted);font-weight:700}
.d2wb .wbpct{grid-row:1/3;height:8px;border-radius:999px;background:var(--alt2);overflow:hidden;display:block}
.d2wb .wbpct em{display:block;height:100%;background:linear-gradient(90deg,var(--lilac),var(--coral));border-radius:999px}
.d2wb .wbpct.done em{background:var(--leaf)}
.d2wb a i{grid-row:1/3;font-style:normal;font-weight:800;font-size:.84rem;text-align:right}
.d2badges{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:4px}
.d2badges div{display:grid;justify-items:center;gap:4px;text-align:center;font-family:var(--body);font-size:.68rem;font-weight:700;color:var(--muted);opacity:.45}
.d2badges div.on{opacity:1;color:var(--ink)}
.d2badges i{width:44px;height:44px;border-radius:14px;background:var(--alt2);display:grid;place-items:center;font-style:normal;font-weight:800;font-size:1rem}
.d2badges div.on i{background:linear-gradient(140deg,var(--honey-soft),var(--peach-soft));box-shadow:var(--sh)}
@media (max-width:900px){.d2hero{grid-template-columns:auto 1fr}.d2cont{grid-column:1/-1}.d2grid,.d2tiles{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.d2hero{grid-template-columns:1fr;justify-items:center;text-align:center}.d2pick div{justify-content:center}.d2tiles,.d2grid{grid-template-columns:1fr}.d2path{grid-template-columns:repeat(4,1fr)}}
/* dialogue player bar */
.sayplayer{display:none;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;background:var(--ink);color:#fff;border-radius:14px;padding:10px 14px;margin:0 0 10px}
.sayplayer.on{display:grid}
.sp-stop{width:34px;height:34px;border-radius:50%;border:0;background:var(--coral);color:#fff;display:grid;place-items:center;cursor:pointer;padding:0}
.sp-stop svg{width:16px;height:16px}
.sp-mid{display:grid;gap:6px;min-width:0}
.sp-txt{font-family:var(--kr);font-weight:700;font-size:.95rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sp-track{height:6px;border-radius:999px;background:rgba(255,255,255,.2);overflow:hidden}
.sp-track i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--lilac),var(--coral));border-radius:999px;transition:width .3s}
.sp-n{font-family:var(--body);font-size:.78rem;font-weight:800;color:rgba(255,255,255,.8);font-variant-numeric:tabular-nums}
:is(.slide,.tbook) .dlg .ln.playing .txt{background:var(--honey-soft);border-color:var(--honey);box-shadow:0 0 0 3px rgba(255,208,138,.35)}
/* ===== v77 (2026-10-07) mobile: bottom tab bar · tighter phone layout · My progress tiles 2 per row · status-window traits · course Student Book ===== */
.d2tiles{grid-template-columns:1fr 1fr}
.cstat dd.tr{display:flex;flex-wrap:wrap;gap:3px}
.cstat dd.tr span{font-size:.62rem;font-weight:800;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.25);border-radius:999px;padding:1px 7px}
.cstat dd.qk{font-weight:500;font-size:.68rem;line-height:1.4;color:rgba(255,255,255,.85)}
.cstat{max-width:300px}
.tbp.course{gap:14px}
.tbslide{display:grid;gap:12px;padding:16px 0 20px;border-bottom:1px dashed var(--line)}
.tbslide:last-child{border-bottom:0}
.tbslide h3{margin:0;font-family:var(--kr-disp);font-size:1.15rem;line-height:1.3;padding-left:12px;border-left:4px solid var(--coral)}
.tbslide h3 small{display:block;font-family:var(--body);font-size:.82rem;color:var(--ink-2);font-weight:500;margin-top:3px}
.tbslide .big{font-size:1.3rem}
/* bottom tab bar (study app, phones) */
.tabbar{display:none}
@media (max-width:640px){
  .tabbar{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;left:0;right:0;bottom:0;z-index:50;background:rgba(255,255,255,.96);backdrop-filter:blur(10px);border-top:1px solid var(--line);padding:6px 4px calc(6px + env(safe-area-inset-bottom))}
  .tabbar a{display:grid;justify-items:center;gap:3px;text-decoration:none;color:var(--muted);font-family:var(--body);font-size:.62rem;font-weight:800;padding:4px 0;border-radius:10px}
  .tabbar a svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  .tabbar a.on{color:var(--coral-deep)}
  .tabbar a.on svg{stroke:var(--coral-deep)}
  body{padding-bottom:70px}
  .fab{bottom:78px}
  .nav.study nav,.mnav{display:none}
  .nav.study .navr .btn{display:none}
  .ph2 h1{font-size:1.6rem}
  .ph2 .lead{font-size:.92rem}
  .lhead2 .row{gap:6px}
  .lhead2 .row .btn{padding:7px 11px;font-size:.78rem}
  .lmodes button{padding:8px 12px;font-size:.78rem}
  .partsw a{flex-basis:100%}
  .howto{padding:12px 14px}
  .howto ol{grid-template-columns:1fr 1fr;gap:8px 12px}
  .howto li{font-size:.78rem}
  .tbook{padding:14px 12px 22px;border-radius:14px}
  .tbpager{padding:8px;gap:6px}
  .tbpager .pgs button{padding:5px 9px;font-size:.78rem}
  .tbpager .pgi{display:none}
  .tbph{font-size:1.1rem}
  .tbo h1{font-size:1.8rem}
  .tbp.cover .tbo-gi span{font-size:1.05rem}
  .tbsub{font-size:1rem}
  .tbx{padding:12px 12px 14px}
  :is(.slide,.tbook) .ftw{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .tbook .ftab tbody td,.tbook .ftab th.f{font-size:.92rem}
  .tbook .vgrid{grid-template-columns:1fr 1fr;gap:0 14px}
  .tbook .qa{grid-template-columns:1fr}
  .tbook .gref .gr-ex ol{grid-template-columns:1fr}
  .tbl2{grid-template-columns:1fr}
  .lgrid{grid-template-columns:1fr 1fr;gap:8px}
  .lcard2{padding:12px 12px 10px;min-height:0;grid-template-columns:32px 1fr}
  .lcard2 .n{width:32px;height:32px;font-size:.84rem}
  .lcard2 b{font-size:.92rem}
  .lcard2 small{display:none}
  .lvtabs{gap:4px}
  .lvtabs a{padding:6px 10px;font-size:.76rem}
  .cband{border-radius:14px;padding:16px 6px 0}
  .cstory-g div{padding:12px 14px}
  .d2hero{padding:16px}
  .d2av{width:96px;height:96px}
  .d2c{padding:14px 14px}
  .sayplayer{grid-template-columns:auto 1fr;padding:8px 10px}
  .sayplayer .sp-n{grid-column:2;text-align:right;font-size:.7rem}
  .gmain .gitem summary{padding:12px 12px}
  .gmain .gbody{padding:12px 12px 14px}
}
/* v79: the English explanation under the forms table is folded behind a button (대표: "설명이 과하다") */
:is(.slide,.tbook) .xpl .en.xplen{padding:0;background:transparent}
:is(.slide,.tbook) .xplen summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:8px;font:inherit;font-weight:800;font-size:.8rem;letter-spacing:.04em;color:var(--sky-deep);background:var(--sky-soft);border-radius:999px;padding:8px 14px}
:is(.slide,.tbook) .xplen summary::-webkit-details-marker{display:none}
:is(.slide,.tbook) .xplen summary i{font-style:normal;transition:transform .2s}
:is(.slide,.tbook) .xplen[open] summary i{transform:rotate(180deg)}
:is(.slide,.tbook) .xplen > div{margin-top:10px;background:var(--sky-soft);border-radius:10px;padding:10px 14px;font-size:clamp(.78rem,1.2vw,.95rem);color:var(--ink-2);line-height:1.55}
.tbook .xplen > div{font-size:.9rem}
/* v79 §13: sticky page bar · grammar folded behind a button · tap-to-hear dialogue lines · next-step buttons · no line waste in 문법 정리 lists */
.tbpager{position:sticky;top:60px;z-index:6;box-shadow:0 6px 16px -12px rgba(20,33,58,.35)}
@media (max-width:640px){.tbpager{top:52px;padding:8px 10px}}
.tbg-more{margin:18px 0 0;border:2px dashed var(--coral);border-radius:16px;background:#fff}
.tbg-more summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:1fr auto;gap:2px 12px;align-items:center;padding:14px 18px}
.tbg-more summary::-webkit-details-marker{display:none}
.tbg-more summary b{font-family:var(--kr-disp);font-size:1.05rem;color:var(--coral-deep)}
.tbg-more summary small{grid-column:1;color:var(--ink-2);font-size:.85rem}
.tbg-more summary i{grid-row:1/3;grid-column:2;font-style:normal;font-weight:900;font-size:1.3rem;color:var(--coral-deep);transition:transform .2s}
.tbg-more[open] summary i{transform:rotate(180deg)}
.tbg-more[open] summary{border-bottom:1px dashed var(--line-2)}
.tbg-more[open]{border-style:solid}
.tbg-more .tbg-body{padding:0 18px 18px}
.tbg-more .tbg-body .tbg-head{margin-top:14px}
.dlg .ln[data-line]{cursor:pointer;border-radius:12px;transition:background .15s}
.dlg .ln[data-line]:hover{background:rgba(255,107,87,.08)}
.tbafter{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin:28px 0 8px;padding-top:18px;border-top:1px dashed var(--line-2)}
.tbafter .btn{text-decoration:none}
.kv.at li{display:block}
.kv.at li b{white-space:normal;font-size:1em}
.tbafter .btn.ghost{background:#fff;color:var(--ink);border:1.5px solid var(--ink)}
@media (max-width:640px){.tbpager .pgs{display:none}.tbpager .pgi{margin-left:0;flex:1}}
/* night 2: lesson page — one shared column (howto card, mode tabs, deck, student book, workbook) */
.lpage .wrap{max-width:1120px}
.lpage .howto,.lpage .deckwrap,.lpage .book,.lpage .tbook,.lpage .lmodes{max-width:none;width:100%;margin-left:0;margin-right:0;box-sizing:border-box}
.lpage .lmodes{justify-content:flex-start}
.tbook .tips{max-width:none}
.tbook .dlg{max-width:none}
.lpair .opts .lo{font-family:var(--kr-disp);font-size:clamp(1.1rem,2.4vw,1.7rem);font-weight:800;padding:4px 14px;border-radius:10px;background:var(--alt);border:2px solid transparent;cursor:pointer;color:var(--ink)}
.lpair .opts .lo:hover{border-color:var(--line-2)}
.lpair .opts .lo.ok{background:#DFF5E6;border-color:#2E9E5B}
.lpair .opts .lo.no{background:#FDE3E0;border-color:#E24E3A}
:is(.slide,.tbook) .cpt .say{justify-self:start;margin-top:4px}
.hgb .s .say{margin-left:8px;vertical-align:middle}
/* night 16: interest-hook introduction */
.hook{font-size:1.12rem;line-height:1.6;font-weight:600;color:var(--ink);margin:10px 0}
.hookpic{margin:10px 0;padding:14px 16px;border:2px dashed var(--line-2);border-radius:14px;background:var(--alt)}
.hookpic figcaption{font-size:.72rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--coral-deep);margin-bottom:4px}
.hookpic p{margin:0;font-style:italic;color:var(--ink-2);line-height:1.55}
.hwords{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0}
.hwords span{display:inline-flex;flex-direction:column;align-items:center;background:#fff;border:1.5px solid var(--line);border-radius:10px;padding:5px 12px}
.hwords b{font-family:var(--kr-disp);font-size:1.15rem}
.hwords small{color:var(--muted);font-size:.74rem}
/* v83: drawn scene for a hook whose generated picture is not made yet */
.hookdraw{margin:10px 0}.hookdraw .scn{margin:0 0 6px}.hookdraw figcaption{font-size:.82rem;font-style:italic;color:var(--ink-2);line-height:1.5;max-width:720px}
/* v116 Practice: the three courses as their own sections under the level grid */
.wbcsec{margin-top:36px;padding-top:22px;border-top:2px dashed var(--line-2)}
.wbch h2{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;margin:4px 0 12px;font-size:1.35rem}
.wbch h2 small{font-family:var(--body);font-size:.82rem;color:var(--muted);font-weight:700}
/* v116 grammar by textbook (#/grammar?id=snu|yonsei|sogang|ewha): volume → lesson → grammar, with the haru lesson */
.gtabs.gsch{margin-top:8px;align-items:center}
.gtabs.gsch small{font-size:.68rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-right:4px}
.gbk-nav{position:sticky;top:64px;z-index:5;display:flex;flex-wrap:wrap;gap:6px;padding:8px 0;background:var(--paper);border-bottom:1px solid var(--line);margin-bottom:8px}
.gbk-nav button{appearance:none;border:1.5px solid var(--ink);background:#fff;border-radius:999px;padding:5px 12px;font-weight:800;font-size:.8rem;cursor:pointer}
.gbk-nav button:hover{background:var(--honey-soft)}
.gbk{margin-top:22px}
.gbk-v{display:flex;align-items:baseline;gap:10px;font-size:1.4rem;margin:0 0 10px;padding-bottom:6px;border-bottom:3px solid var(--ink)}
.gbk-v span{font-family:var(--kr);font-size:.8rem;color:#fff;background:var(--coral);border-radius:999px;padding:2px 10px}
.gbk-ls{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,420px),1fr));gap:10px}
.gbk-l{display:grid;grid-template-columns:54px 1fr;gap:10px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:10px 12px}
.gbk-n{font-family:var(--disp);font-size:1.5rem;font-weight:900;line-height:1;text-align:center;color:var(--coral-deep)}
.gbk-n small{display:block;font-family:var(--body);font-size:.6rem;color:var(--muted);font-weight:800;margin-top:3px;text-transform:uppercase}
.gbk-l ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.gbk-l li a{display:grid;gap:1px;text-decoration:none;color:var(--ink);padding:4px 6px;border-radius:8px}
.gbk-l li a:hover{background:var(--alt)}
.gbk-l li b{font-size:.98rem}
.gbk-l li span{font-size:.78rem;color:var(--ink-2)}
.gbk-l li em{font-style:normal;font-size:.68rem;font-weight:800;color:var(--muted)}
@media (max-width:640px){.gbk-nav{top:56px}}
/* v117 (대표: "By textbook 서울대 연세 서강 이화 — 오른쪽 상단에 더 잘 보이게, 모바일도"): textbook switcher as a highlighted card, top-right on desktop, top of header on mobile */
.gtabs.gsch{background:var(--honey-soft);border:1.5px solid var(--honey);border-radius:var(--r);padding:10px 12px;gap:6px;box-shadow:var(--sh)}
.gtabs.gsch small{display:block;width:100%;font-size:.72rem;color:var(--honey-deep);margin:0 0 2px}
.gtabs.gsch .chip{font-size:.9rem;padding:7px 14px;border-color:var(--honey)}
.gtabs.gsch .chip.on{background:var(--ink);border-color:var(--ink)}
.ph2 .wrap:has(.gsch){display:flex;flex-direction:column}
.ph2 .wrap:has(.gsch)>.eyebrow{order:-2}
.ph2 .wrap:has(.gsch)>.gsch{order:-1;margin:10px 0 4px}
@media (min-width:900px){
  .ph2 .wrap:has(.gsch){position:relative;display:block}
  .ph2 .wrap:has(.gsch)>h1,.ph2 .wrap:has(.gsch)>.lead{max-width:calc(100% - 300px)}
  .ph2 .wrap>.gtabs.gsch{position:absolute;top:0;right:var(--gut,24px);width:270px;margin:0}
}

/* v119 (대표 2026-10-10): hook picture slot left empty on purpose — a plain TBD frame, no generated art */
.hooktbd{margin:10px 0;aspect-ratio:3/2;max-width:720px;border:2px dashed var(--line-2);border-radius:14px;display:grid;place-items:center;background:var(--alt);color:var(--muted);font-weight:800;letter-spacing:.2em}

/* v121 (대표 2026-10-10): Premium band under the regular grid on Lessons and Practice — wide gap, explanation, one card per course, a "more are coming" card */
.premband{margin-top:88px;padding-top:44px;border-top:2px dashed var(--line-2)}
.premband .head{margin-bottom:22px}.premband .head .lead{max-width:760px}
.premgrid{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.prem-c{display:grid;grid-template-rows:150px 1fr;text-decoration:none;color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:var(--r-l,18px);overflow:hidden;transition:transform .15s,box-shadow .15s}
.prem-c:hover{transform:translateY(-2px);box-shadow:var(--sh)}
.prem-c .im{display:block;background-size:cover;background-position:center}
.prem-c .bd{padding:18px 20px 20px;display:grid;gap:6px;align-content:start}
.prem-c small{font-size:.72rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--coral-deep)}
.prem-c b{font-family:var(--kr-disp);font-size:1.15rem}
.prem-c p{margin:0;color:var(--ink-2);font-size:.9rem;line-height:1.55}
.prem-c em{font-style:normal;font-weight:800;font-size:.84rem;margin-top:8px;color:var(--coral-deep)}
.prem-c.off{opacity:.75}.prem-c.off em{color:var(--muted)}
.prem-c.more{grid-template-rows:1fr;background:var(--honey-soft);border:1.5px dashed var(--honey)}
.prem-c.more em a{color:var(--honey-deep);text-decoration:none}
@media (max-width:640px){.premband{margin-top:56px;padding-top:30px}.prem-c{grid-template-rows:130px 1fr}}

/* v123 (대표 2026-10-10: "대학교 태그 좀 크거든 — 반 정도로"): textbook tag pills at about half size, everywhere */
.tg{gap:4px;border-width:1px;padding:1px 7px 1px 2px;font-size:clamp(.52rem,.75vw,.6rem);font-weight:700}
.tg b{padding:2px 6px;font-size:.78em;letter-spacing:.04em}
.gtags{gap:4px}
.tg-none{display:inline-flex;align-items:center;font-size:clamp(.52rem,.75vw,.6rem);color:var(--muted);font-weight:600;padding:1px 2px}
.gwrap .gtag,.gmain .gtag{font-size:.56rem;padding:1px 6px 1px 2px;gap:4px;margin:2px 4px 0 0}
.gwrap .gtag b,.gmain .gtag b{padding:1px 5px;font-size:.5rem}
.tbo-gi .gtags span.tg,.tbp.cover .tbo-gi .gtags span.tg,.tbo-gi .gtags span.tg-none,.tbp.cover .tbo-gi .gtags span.tg-none{font-family:var(--sans);font-weight:700;font-size:clamp(.52rem,.75vw,.6rem)}
.tbo-gi .gtags span.tg b{font-size:.78em}
.tbo-gi .gtags span.tg-none{font-weight:600}
/* v123 picture cards inside the Student Book / book-mode slides: the 3-column word-list layout (22px 1fr auto) chopped them — the word wrapped inside a 22px column */
.tbook .vgrid.pics .vcard,.book .slide .vgrid.pics .vcard{grid-template-columns:1fr;gap:3px;align-items:center;align-content:start;text-align:center;border:1.5px solid var(--line);border-radius:12px;padding:12px 10px 12px;position:relative;min-height:170px}
.tbook .vgrid.pics .vcard:not(.hasp),.book .slide .vgrid.pics .vcard:not(.hasp){align-content:center}
.tbook .vgrid.pics .vcard>span,.book .slide .vgrid.pics .vcard>span,.tbook .vgrid.pics .vcard>small,.book .slide .vgrid.pics .vcard>small{grid-column:1;text-align:center;overflow-wrap:anywhere}
.tbook .vgrid.pics .vcard>small,.book .slide .vgrid.pics .vcard>small{font-size:.8rem;color:var(--muted)}
.tbook .vgrid.pics .vcard i,.book .slide .vgrid.pics .vcard i{position:absolute;left:8px;top:8px;width:auto;height:auto}
.tbook .vgrid.pics .vcard .say,.book .slide .vgrid.pics .vcard .say{position:absolute;right:6px;top:6px;grid-column:auto;grid-row:auto}
.tbook .vgrid.pics .vcard.q,.book .slide .vgrid.pics .vcard.q{border-style:dashed;background:var(--alt)}
.tbook .vgrid.pics .vcard .vpic{width:88px;height:88px}
.gmain .gitem summary div > span.gtag,.gwrap .gitem summary div > span.gtag{font-size:.56rem}
/* v123 phone, class slides: a picture-card slide (8 cards × 2 columns) ran 710px inside a 598px slide and had to be scrolled — three narrower columns keep it on one screen */
@media (max-width:480px){.stage .slide .vgrid.pics{grid-template-columns:repeat(3,1fr);gap:6px}.stage .slide .vgrid.pics .vcard{min-height:112px;padding:8px 4px 8px}.stage .slide .vcard .vpic{width:58px;height:58px;margin:2px auto 4px}.stage .slide .vgrid.pics .vcard>span{font-size:.95rem}.stage .slide .vgrid.pics .vcard>small{font-size:.6rem}.stage .slide .vgrid.pics .vcard .say{width:24px;height:24px;right:2px;top:2px}}
.gmain .gitem summary div > span.gtag,.gwrap .gitem summary div > span.gtag{line-height:1.3}
.gmain .gitem summary div > span.gtag b,.gwrap .gitem summary div > span.gtag b,.gmain .gitem summary span.gtag b{font-size:.5rem;line-height:1.3;padding:1px 5px}

/* ===== v125 — Level 1 readers (shop shelf · book page) · bigger previews (v126: full-screen viewer removed) ===== */
section.shoptop{padding-block:10px 18px}
section.rshelf{padding-block:34px 40px;background:linear-gradient(180deg,#FFF7EA 0%,#FFF0DD 100%);border-block:1px solid #F1E2CC}
.rs-head{display:grid;gap:18px 40px;align-items:end;margin-bottom:22px}
@media (min-width:960px){.rs-head{grid-template-columns:minmax(0,1.7fr) minmax(0,1fr)}}
.rs-head h2{font-size:clamp(1.5rem,2.6vw,2.1rem);line-height:1.2;margin:6px 0 10px}
.rs-head .lead{margin:0;color:var(--ink-2);max-width:64ch}
.rs-pts{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.rs-pts li{background:#fff;border:1px solid #F0DEC4;border-radius:12px;padding:10px 14px;display:grid;gap:1px}
.rs-pts b{font-size:.95rem}.rs-pts span{font-size:.8rem;color:var(--muted);font-weight:600}
.pgrid.books{grid-template-columns:repeat(auto-fill,minmax(228px,1fr))}
.pcard.bookc .pth{aspect-ratio:1/1;background:linear-gradient(180deg,#F1E4D2,#E7D6BE)}
.pcard.bookc .pth img{top:18px;height:calc(100% - 18px);border-radius:4px 4px 0 0}
.pcard.setc{border:1.5px solid var(--coral)}
.pcard.setc .pth{background:#F6EFE4}
.pcard.setc .pth img{left:0;top:0;transform:none;width:100%;height:100%;object-fit:contain;border-radius:0;box-shadow:none}
.pcard .pth .ovl.save{left:auto;right:12px;margin:0;z-index:2;display:block;background:var(--coral-deep)}
.pinfo .spec{grid-template-columns:repeat(auto-fit,minmax(100px,1fr))}
.pcard .genre{font-size:.7rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--coral-deep)}
.pcard .price s,.buybox .price s,.rmore s{color:var(--faint);font-weight:700;font-size:.62em;margin-right:6px;text-decoration-thickness:2px}
.pcard .kdl,.buybox .kdl,.atab .kdl{display:grid;gap:6px;width:100%}
.atab .kdl .btn{height:auto;padding:6px 10px;font-size:.8rem}
.wbhead{margin:0 0 16px}
/* product page: preview column ~1.7× wider than before, buy box at the top of the right column */
@media (min-width:900px){.wrap.product{max-width:1340px;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr)}}
.product .pvmain{display:block;width:100%}
.product .pvmain img{display:block}
.product .pages.four{grid-template-columns:repeat(4,1fr)}
.product .pages button span{font-size:.66rem}
.pinfo .buybox{position:static}
.setx{display:grid;grid-template-columns:76px 1fr auto;gap:12px;align-items:center;background:var(--coral-soft);border-radius:12px;padding:10px 12px;text-decoration:none;color:var(--ink);font-size:.9rem;font-weight:700;line-height:1.4}
.setx img{width:76px;border-radius:6px;display:block}
.setx i{font-style:normal;font-weight:900;color:var(--coral-deep);font-size:1.2rem}
.setx:hover{background:#FFE1DB}
.tryk{background:#fff;border:1px solid var(--line);border-left:4px solid var(--coral);border-radius:14px;padding:14px 18px;display:grid;gap:8px}
.tryk .lb{font-size:.7rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--coral-deep)}
.tryk blockquote{margin:0;font-family:var(--kr);font-size:1.12rem;line-height:1.85;color:var(--ink)}
.tryk p{margin:0;font-size:.85rem;color:var(--muted);font-weight:600}
.setlist{display:grid;gap:10px}
.setrow{display:grid;grid-template-columns:96px 1fr;gap:14px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:12px;text-decoration:none;color:var(--ink-2);font-size:.88rem}
.setrow:hover{border-color:var(--coral)}
.setrow img{width:96px;border-radius:6px;box-shadow:var(--el-s);display:block}
.setrow > span{display:grid;gap:3px;align-content:start}
.setrow small{font-size:.68rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--coral-deep)}
.setrow b{font-size:1.1rem;color:var(--ink)}.setrow em{font-style:normal;font-weight:700;color:var(--ink);font-size:.88rem}
.setrow i{font-style:normal;font-weight:800;color:var(--coral-deep);font-size:.84rem}
.rmore{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.rmore a{display:grid;gap:3px;text-decoration:none;color:var(--ink-2);font-size:.8rem;line-height:1.35}
.rmore img{width:100%;aspect-ratio:3/2;object-fit:cover;object-position:top;border-radius:8px;border:1px solid var(--line);display:block}
.rmore b{color:var(--ink);font-size:.95rem;margin-top:4px}
.rmore a:hover b{color:var(--coral-deep)}

/* ===== v127 — 책으로 공부하기 (Read with a book): shelf · reader (book left, sentence panel right 5:2) ===== */
.rdph .beta{display:inline-block;margin-left:6px;padding:2px 8px;border-radius:999px;background:var(--coral);color:#fff;font-size:.66rem;letter-spacing:.06em;vertical-align:1px}
.rdsteps{padding-block:6px 18px}
.rdsteps ol{list-style:none;margin:0;padding:0;display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.rdsteps li{background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px 16px;display:grid;grid-template-columns:auto 1fr;gap:2px 12px}
.rdsteps li i{grid-row:1/3;font-style:normal;font-family:var(--disp);font-weight:800;font-size:1.3rem;color:var(--coral-deep)}
.rdsteps li b{font-size:.98rem}.rdsteps li span{font-size:.84rem;color:var(--muted)}
.rdbks{display:grid;gap:18px;grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.rdbk{display:grid;grid-template-rows:auto 1fr;background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;text-decoration:none;color:var(--ink);transition:box-shadow .15s,transform .15s}
.rdbk:hover{box-shadow:var(--el-m);transform:translateY(-2px)}
.rdbk .cv{display:block;aspect-ratio:1/1;background:linear-gradient(180deg,#F1E4D2,#E7D6BE);position:relative;overflow:hidden}
.rdbk .cv img{position:absolute;left:50%;top:16px;height:calc(100% - 16px);transform:translateX(-50%);border-radius:4px 4px 0 0;box-shadow:var(--el-m)}
.rdbk .bd{display:grid;gap:3px;padding:14px 16px 16px;align-content:start}
.rdbk .lv{justify-self:start;font-size:.7rem;font-weight:800;padding:2px 8px;border-radius:999px;background:var(--ink);color:#fff}
.rdbk b{font-size:1.08rem;margin-top:4px}.rdbk em{font-style:normal;font-weight:700;font-size:.86rem}
.rdbk small{font-size:.74rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--coral-deep)}
.rdbk .fr{margin-top:6px;font-size:.82rem;color:var(--leaf-deep);font-weight:800}
.rdnote{margin-top:16px;max-width:76ch}
.wrap.rdwide{max-width:1440px}
.rdhead{border-bottom:1px solid var(--line);background:#fff}
.rdhead .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px;padding-block:12px}
.rdtitle{display:flex;align-items:baseline;gap:10px;flex:1;min-width:0;flex-wrap:wrap}
.rdtitle .lv{font-size:.72rem;font-weight:800;padding:2px 8px;border-radius:999px;background:var(--ink);color:#fff;align-self:center}
.rdtitle b{font-size:1.15rem}.rdtitle em{font-style:normal;color:var(--muted);font-weight:700;font-size:.9rem}
.rdsw{display:inline-flex;align-items:center;gap:8px;font-size:.86rem;font-weight:700;color:var(--ink-2);cursor:pointer;user-select:none}
.rdsw input{width:18px;height:18px;accent-color:var(--coral-deep)}
section.rdsec{padding-block:22px 60px;background:#F7F4EE}
.rdgrid{display:grid;gap:26px;align-items:start}
@media (min-width:1000px){.rdgrid{grid-template-columns:minmax(0,5fr) minmax(0,2fr)}}
.rdbook{background:#FFFDF8;border:1px solid #EDE5D6;border-radius:18px;padding:clamp(22px,4vw,52px) clamp(18px,5vw,64px);box-shadow:0 1px 0 rgba(20,33,58,.04),0 18px 40px -28px rgba(20,33,58,.25);font-family:"Noto Serif KR",var(--kr);color:#24211C}
.rdch{display:grid;gap:4px;text-align:center;margin:0 0 26px;font-family:"Noto Serif KR",var(--kr);font-weight:600;font-size:clamp(1.4rem,2.4vw,1.9rem)}
.rdch small{font-family:var(--body);font-size:.78rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--coral-deep)}
.rdbook p{margin:0 0 .9em;font-size:clamp(1.05rem,1.35vw,1.2rem);line-height:2.05;word-break:keep-all}
.rdbook p.rdpp{text-indent:1em}
.rdbook p.rdd{padding-left:.4em}
.rdbook p.rdwho{margin:1.4em 0 .6em;text-indent:0}
.rdwho span{display:inline-block;font-family:var(--body);font-size:.78rem;font-weight:800;padding:3px 12px;border-radius:999px;background:var(--coral-soft);color:var(--coral-deep);letter-spacing:.04em}
.rdbook p.rdhr{text-align:center;color:#C9BBA3;margin:1.2em 0;text-indent:0;letter-spacing:.4em}
.rs{border-radius:5px;padding:2px 1px;cursor:pointer;transition:background .12s;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.rs:hover{background:#FFF0C7}
.rs:focus-visible{outline:2px solid var(--honey);outline-offset:1px}
.rs.on{background:#FFE08A;box-shadow:inset 0 -2px 0 var(--coral-deep)}
.rs.hl{background:#DCEBFF}
.rs.hl.on{background:#FFE08A}
.rs.e{cursor:default;color:#8A8276}
.rs.e:hover{background:none}
.rdmore{margin-top:34px;padding:18px 20px;border-radius:14px;background:#fff;border:1px dashed #D9CBB2;display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;font-family:var(--body)}
.rdmore b{font-size:1rem}.rdmore span{color:var(--muted);font-size:.9rem;flex:1;min-width:180px}
.rdpanel{background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:var(--el-s);position:relative}
@media (min-width:1000px){.rdpanel{position:sticky;top:14px;max-height:calc(100vh - 28px);overflow:auto}}
.rdpin{padding:18px 18px 20px;display:grid;gap:16px}
.rdclose{position:absolute;right:10px;top:8px;width:34px;height:34px;border:0;border-radius:10px;background:transparent;font-size:1.5rem;line-height:1;color:var(--muted);cursor:pointer;display:none}
.rdpanel.open .rdclose{display:block}
.rdp-intro b{font-size:1.05rem}.rdp-intro p{margin:4px 0 0;color:var(--ink-2);font-size:.9rem}
.rdp-sec{display:grid;gap:10px}
.rdp-sec h3{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);margin:0}
.rdp-sec .note{margin:0;font-size:.82rem}
.rdp-gl{display:flex;flex-wrap:wrap;gap:6px}
.rdgk{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:#fff;border-radius:999px;padding:5px 10px;font:inherit;font-size:.84rem;cursor:pointer;color:var(--ink)}
.rdgk small{font-size:.66rem;font-weight:800;color:var(--muted)}
.rdgk em{font-style:normal;font-size:.7rem;font-weight:800;background:var(--alt);border-radius:999px;padding:0 6px;color:var(--ink-2)}
.rdgk.on{background:#DCEBFF;border-color:#9DC1F2}
.rdp-nav{display:flex;align-items:center;justify-content:space-between;gap:8px;padding-right:30px}
.rdp-nav span{font-size:.82rem;font-weight:800;color:var(--muted)}
.rdp-nav .btn{height:32px;padding:0 10px;font-size:.8rem}
.rdp-s{background:#FFFDF8;border:1px solid #EDE5D6;border-radius:14px;padding:14px 14px 12px;display:grid;gap:10px}
.rdp-s > p.kr{margin:0;font-family:"Noto Serif KR",var(--kr);font-size:1.18rem;line-height:1.9;word-break:keep-all}
.rdp-s .row{display:flex;flex-wrap:wrap;gap:8px}
.rdp-s .rdsay,.rdp-s .rdtrb{font:inherit;font-size:.8rem;font-weight:800;border:1px solid var(--line);background:#fff;border-radius:999px;padding:5px 12px;cursor:pointer;color:var(--ink-2)}
.rdtr{margin:0;font-size:.92rem;color:var(--ink-2);border-top:1px dashed #E5DCCB;padding-top:8px}
mark.m0,mark.m1,mark.m2,mark.m3{color:inherit;border-radius:3px;padding:0 1px}
mark.m0{background:linear-gradient(transparent 58%,#FFC9BE 58%)}
mark.m1{background:linear-gradient(transparent 58%,#BFDCFF 58%)}
mark.m2{background:linear-gradient(transparent 58%,#BFEBD3 58%)}
mark.m3{background:linear-gradient(transparent 58%,#E2D3FF 58%)}
.sw{width:10px;height:10px;border-radius:50%;flex:none}
.sw.m0{background:#FF8A75}.sw.m1{background:#5E9BEA}.sw.m2{background:#3BB273}.sw.m3{background:#9B7BEA}
.rg{border:1px solid var(--line);border-radius:14px;padding:12px 14px;display:grid;gap:6px}
.rg.basic{background:var(--alt);border-style:dashed}
.rg-h{display:flex;align-items:center;gap:8px}
.rg-h b{font-size:1.02rem;flex:1;min-width:0}
.rg .lvl,.rw .lvl{font-size:.68rem;font-weight:800;padding:2px 8px;border-radius:999px;background:var(--alt);color:var(--ink-2);text-decoration:none;white-space:nowrap}
.rg a.lvl:hover{background:var(--coral-soft);color:var(--coral-deep)}
.rg-m{margin:0;font-size:.88rem;color:var(--ink-2)}
.rg-in{margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:.92rem}
.rg-in span{font-size:.66rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
.rg details summary{cursor:pointer;font-size:.8rem;font-weight:800;color:var(--coral-deep);list-style:none}
.rg details summary::-webkit-details-marker{display:none}
.rg details summary::before{content:"▸ "}.rg details[open] summary::before{content:"▾ "}
.rg-x{margin:6px 0 0;font-size:.86rem;line-height:1.6;color:var(--ink-2)}
.rg-a{margin:6px 0 0;font-size:.82rem;color:var(--ink-2)}
.rg-a span{display:block;font-size:.66rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
.rg-ex{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:6px}
.rg-ex li{display:grid;gap:1px;padding-left:10px;border-left:2px solid var(--line)}
.rg-ex b{font-weight:600;font-size:.92rem}.rg-ex span{font-size:.8rem;color:var(--muted)}
.rg-go{display:inline-block;margin-top:8px;font-size:.8rem;font-weight:800}
.rw{border-top:1px solid var(--line);padding-top:10px;display:grid;gap:4px}
.rdp-sec h3 + .rw{border-top:0;padding-top:0}
.rw-h{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.rw-h b{font-size:1.02rem;margin-right:2px}
.rw .lvl.st{background:var(--honey-soft);color:var(--honey-deep)}
.rw-m{margin:0;font-size:.9rem;color:var(--ink-2)}
.rw-f{margin:0;font-size:.82rem;color:var(--muted)}
.rw-sg small{display:block;font-size:.7rem;font-weight:800;color:var(--faint);margin:4px 0}
.sibs{display:flex;flex-wrap:wrap;gap:5px}
.sib{font:inherit;font-size:.82rem;border:1px solid var(--line);background:#fff;border-radius:8px;padding:3px 9px;cursor:pointer;color:var(--ink)}
.sib.on{background:var(--ink);border-color:var(--ink);color:#fff}
.sib:hover{border-color:var(--coral)}
.sibm{margin:6px 0 0;font-size:.84rem;color:var(--ink-2)}
.rdp-fix{margin:0;font-size:.8rem}
.lnk{font:inherit;background:none;border:0;padding:0;color:var(--coral-deep);font-weight:800;cursor:pointer;text-decoration:underline}
@media (max-width:999px){
  .rdpanel{position:fixed;left:0;right:0;bottom:0;max-height:74vh;overflow:auto;border-radius:18px 18px 0 0;transform:translateY(105%);transition:transform .22s ease;z-index:70;box-shadow:0 -12px 40px rgba(20,33,58,.22)}
  .rdpanel.open{transform:none}
  .rdpanel .rdclose{display:block}
  section.rdsec{padding-bottom:90px}
}

/* ===== v127 — home: what is new (book reader · Level 1 readers) ===== */
.stk-pill.r{background:var(--coral-soft)}
section.nwband{padding-block:clamp(40px,5vw,64px) 6px}
.nw2{display:grid;gap:18px}
@media (min-width:900px){.nw2{grid-template-columns:1.12fr 1fr}}
.nwc{position:relative;display:grid;gap:12px;align-content:start;background:#fff;border:1px solid var(--line);border-radius:20px;padding:22px 24px;text-decoration:none;color:var(--ink);box-shadow:var(--el-xs);transition:box-shadow .15s,transform .15s}
.nwc:hover{box-shadow:var(--el-m);transform:translateY(-2px)}
.nwc .tg{justify-self:start;font-size:.7rem;font-weight:800;letter-spacing:.08em;padding:3px 10px;border-radius:999px;background:var(--ink);color:#fff}
.nwc.bks .tg{background:var(--coral-deep)}
.nwc > b{font-size:1.25rem;line-height:1.3}
.nwc > p{margin:0;color:var(--ink-2);font-size:.95rem}
.nwc .go{font-weight:800;color:var(--coral-deep);font-size:.92rem}
.nwc.rdr{background:linear-gradient(160deg,#FFFDF8,#FFF3DE)}
.nwc .demo{background:#fff;border:1px solid #EDE5D6;border-radius:14px;padding:14px 16px;display:grid;gap:10px}
.nwc .demo p{margin:0;font-family:"Noto Serif KR",var(--kr);font-size:1.3rem}
.nwc .pop{display:grid;grid-template-columns:auto auto 1fr;gap:4px 8px;align-items:center;border-left:3px solid #FF8A75;padding-left:10px}
.nwc .pop small{font-size:.66rem;font-weight:800;background:var(--alt);border-radius:999px;padding:1px 7px}
.nwc .pop span{font-size:.84rem;color:var(--ink-2)}
.nwc .pop i{grid-column:1/-1;font-style:normal;font-size:.82rem;color:var(--muted)}
.nwc .covs{display:flex;gap:12px}
.nwc .covs img{width:30%;max-width:150px;aspect-ratio:1/1.41;object-fit:cover;object-position:top;border-radius:6px;box-shadow:var(--el-m)}
/* v127: five numbers in the stats strip — smaller numerals so 10,635 fits its column */
.stats .stat .num b{font-size:clamp(2.4rem,4vw,3.6rem)}
.stats .wrap{gap:24px}
.stats .stat > span{max-width:19ch}
.rdp-s .rdsay{display:inline-flex;flex-direction:row;align-items:center;gap:5px;width:auto;height:auto;position:static}
/* v128: Level 2 readers shelf + Level 3/4 coming soon + three-page preview */
section.rshelf.lv2{background:linear-gradient(180deg,#F4F1FF 0%,#ECE7FB 100%);border-block-color:#DCD4F2}
section.rsoon{padding-block:26px 34px}
.rsoon-g{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.rsoon-c{display:grid;gap:6px;padding:18px 22px;border:1.5px dashed var(--honey);border-radius:18px;background:var(--honey-soft)}
.rsoon-c b{font-size:1.2rem}
.rsoon-c p{margin:0;color:var(--ink-2)}
.product .pages.three{grid-template-columns:repeat(3,1fr)}
@media (max-width:640px){.rsoon-g{grid-template-columns:1fr}}

/* ===== v129 — Study with books (Beta badge) · grammar jump · sample tabs · no copying ===== */
.nbeta{display:inline-block;margin-left:5px;padding:1px 6px;border-radius:999px;background:var(--coral);color:#fff;font-size:.6rem;font-weight:800;letter-spacing:.04em;vertical-align:2px;line-height:1.5}
.tabbar .nbeta{position:absolute;top:2px;right:6px;margin:0;font-size:.52rem;padding:0 4px}
.tabbar a{position:relative}
details.gitem.gjump{box-shadow:0 0 0 3px var(--honey);border-radius:12px}
.lvtabs.smp{display:flex;flex-wrap:wrap;gap:8px}
.lvtabs.smp button{width:auto;padding:0 14px}
html.nocopy body{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
html.nocopy input,html.nocopy textarea,html.nocopy select,html.nocopy [contenteditable="true"],html.nocopy .allowcopy{-webkit-user-select:text;user-select:text}
details.gitem{scroll-margin-top:96px}
/* v131: Study with books by level */
.rdlv{margin:4px 0 18px}
.rdlv a.chipb{text-decoration:none}
.rdgrp{margin:0 0 28px}
.rdgh{font-size:1.25rem;margin:0 0 12px}
.rdgh .kr{color:var(--ink-2);font-weight:600}

/* v135 — PDF shop: reader levels as buttons, one shelf at a time */
section.rtabsec{padding-block:26px 0;background:#FFF7EA;border-top:1px solid #F1E2CC}
.rtabs{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px}
.rtabs button{font:inherit;display:grid;gap:1px;text-align:left;min-width:132px;padding:10px 16px;border-radius:14px;border:1.5px solid #EBD9BE;background:#fff;color:var(--ink);cursor:pointer}
.rtabs button b{font-size:1rem}.rtabs button .kr{font-size:.8rem;color:var(--muted);font-weight:700}.rtabs button small{font-size:.72rem;font-weight:800;color:var(--coral-deep)}
.rtabs button.on{background:var(--ink);border-color:var(--ink);color:#fff}.rtabs button.on .kr{color:#E6E9EF}.rtabs button.on small{color:var(--honey)}
.rtabp > section.rshelf{border-top:0}
.rtabp > section.rsoon{background:#FFF7EA;padding-bottom:40px}
.rtabp > section.rsoon .rsoon-g{grid-template-columns:minmax(0,1fr);max-width:560px}

/* ---- v136 (대표 2026-10-13: "모바일에서 위아래 간격이 빽빽하고 가독성이 떨어지고, 콘텐츠가 겹치거나 잘린다") — phone pass.
   The first two fixes are bugs that showed at every width; everything else sits inside max-width:640px, so the desktop look does not change. ---- */
/* home hero: the collage badges inherited the generic 22px-high .badge, so their second line ("a university 어학당 teacher", "Free for everyone") spilled out of the white pill onto the photos */
.collage .badge{height:auto;line-height:1.25}
/* Student Book: the previous / next page buttons under the book had no style at all (grey browser buttons) */
.tbook .wbnext{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.tbook .wbnext button{appearance:none;font:inherit;font-family:var(--body);font-size:.9rem;font-weight:800;line-height:1.2;color:var(--ink);background:#fff;border:1.5px solid var(--line-2);border-radius:999px;padding:11px 18px;cursor:pointer}
.tbook .wbnext button[data-bp="1"]{background:var(--ink);border-color:var(--ink);color:#fff}
.tbook .wbnext button[disabled]{opacity:.35;cursor:default}
@media (max-width:640px){
  /* ---------- marketing pages ---------- */
  /* hero: 92px of empty space above the first line, and the title lines touched (line-height 1.04 with the serif accent line) */
  .hero.v43 .wrap{padding-top:10px}
  .hero.v43 h1{line-height:1.13}
  /* pricing: the comparison table was 401px wide in a 339px column and its last column was cut off — tighter cells, and it scrolls sideways if it still does not fit */
  .ftw{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .cmp{font-size:.84rem}
  .cmp th,.cmp td{padding:10px 8px}
  .cmp th{font-size:.9rem}
  .cmp th small{font-size:.66rem}
  .cmp th:first-child,.cmp td:first-child{width:40%}   /* the feature names had 98px and ran to six lines each */
  .cmp thead th:not(:first-child){font-size:.76rem;text-align:center;padding-inline:3px;word-break:keep-all}
  .cmp td.c{padding-inline:3px}
  /* course landings: the sticky "Join …" button was 408px wide and ran off the right edge */
  .lpbar{gap:10px;padding-inline:14px}
  .lpbar > div{flex:1 1 34%;min-width:0}
  .lpbar small{line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}   /* the full price details are in the page; the bar keeps two lines */
  .lpbar .btn{flex:1 1 66%;min-width:0;height:auto;min-height:46px;white-space:normal;text-align:center;justify-content:center;line-height:1.25;font-size:.82rem;padding:8px 12px}
  .plan ul{gap:9px;line-height:1.5}   /* plan cards: multi-line ticks were 6px apart */
  /* notice board: the "Pinned" pill sat on top of the date line */
  .post-c .pin{position:static;justify-self:start;margin-bottom:2px}
  /* characters: figures 11–13 went three to a row and their status windows ran out of the picture band */
  .cfig:nth-child(n+11){flex-basis:50%;max-width:50%}
  .cstat{padding:8px 10px}
  .cstat dl{font-size:.74rem;line-height:1.45}
  .cstat dt{font-size:.62rem}
  .cstat dd{overflow-wrap:anywhere}
  .cstat b small{font-size:.72rem}
  /* footer links (WhatsApp · Sign in · … · Admin) were one line that ran off narrow screens */
  footer .soc{flex-wrap:wrap;gap:8px 16px}

  /* ---------- study app ---------- */
  /* bottom tab bar: 10px labels and an 8px Beta tag */
  .tabbar a{font-size:.69rem;line-height:1.2;gap:4px}
  .tabbar .nbeta{font-size:.56rem;padding:1px 5px}
  /* Lessons list */
  .lgrid{gap:10px}
  .lcard2{padding:14px 12px 12px}
  .lcard2 b{font-size:.95rem;line-height:1.38}
  .lvtabs{gap:6px}
  .lvtabs a{padding:7px 11px;font-size:.8rem}
  /* lesson page: header buttons, mode buttons and the how-to list were .78rem; the how-to list was two 147px columns */
  .ph2 .lead{font-size:.95rem;line-height:1.6}
  .lhead2 .row{gap:8px}
  .lhead2 .row .btn{padding:8px 13px;font-size:.84rem}
  .lmodes{gap:8px}
  .lmodes button{padding:9px 14px;font-size:.86rem}
  .howto ol{grid-template-columns:1fr;gap:12px}
  .howto li{font-size:.88rem;line-height:1.55}
  /* the lesson page carries the class "bk", which is also the back-link style (.bk = .84rem, weight 800):
     the whole Student Book was 13.4px and extra-bold. On phones: 15px, normal weight (headings keep their own weight) */
  .lpage.bk{display:block;font-size:.94rem;font-weight:400;margin-bottom:0}
  /* Student Book */
  .tbook{padding:16px 14px 26px}
  .tbook section.tbp{padding-block:6px 4px}   /* the site-wide section padding (56px above and below) was inside every book page */
  .tbp{gap:18px}
  .tbook p{line-height:1.7}
  .tbook .hook{font-size:1.02rem;font-weight:500}   /* the intro story: six lines of 18px semi-bold on a phone */
  .tbsub small,.tbx h4 small{font-size:.86rem;line-height:1.55;letter-spacing:0;margin-top:4px}
  .tbx{padding:14px 14px 16px}
  .tbx h4{line-height:1.35;gap:6px 10px}
  .tbx h4 i{font-size:.7rem}
  .tbook .big{line-height:1.75}
  .tbook .vtools small{font-size:.8rem}
  .tbo-g small,.tbo-goal small{font-size:.72rem}
  .tbook .wbnext{margin-top:26px}
  .tbook .wbnext button{flex:1 1 auto;padding:11px 12px;font-size:.86rem;white-space:nowrap}
  .tbook .ftab th,.tbook .ftab td{padding:9px 8px}
  /* the word table behind "Word table · Meaning and how to tell them apart" (and the 어휘 표 slide) had five columns (360px) and was cut off:
     each word becomes a block — number · word · listen, then the meaning, then the note */
  :is(.tbook,.slide) .vtab:not(.wt):not(.ptab),:is(.tbook,.slide) .vtab:not(.wt):not(.ptab) tbody{display:block;width:100%}
  :is(.tbook,.slide) .vtab:not(.wt):not(.ptab) thead{display:none}
  :is(.tbook,.slide) .vtab:not(.wt):not(.ptab) tr{display:grid;grid-template-columns:22px minmax(0,1fr) auto;gap:3px 10px;align-items:center;padding:10px 2px}
  :is(.tbook,.slide) .vtab:not(.wt):not(.ptab) td{display:block;padding:0;border:0;width:auto}
  :is(.tbook,.slide) .vtab:not(.wt):not(.ptab) td.n{grid-row:1;grid-column:1}
  :is(.tbook,.slide) .vtab:not(.wt):not(.ptab) td.w{grid-row:1;grid-column:2;white-space:normal;font-family:var(--kr-disp);font-weight:800;font-size:1.05rem}
  :is(.tbook,.slide) .vtab:not(.wt):not(.ptab) td.s{grid-row:1;grid-column:3}
  :is(.tbook,.slide) .vtab:not(.wt):not(.ptab) td.m{grid-column:2/4;line-height:1.5}
  :is(.tbook,.slide) .vtab:not(.wt):not(.ptab) td.x{grid-column:2/4;font-size:.88em;color:var(--muted);line-height:1.5}
  :is(.tbook,.slide) .vtab:not(.wt):not(.ptab) td.x:empty{display:none}
  .tbook .tbp > *,.tbslide > *{min-width:0}   /* a wide child could stretch the page's one grid column past the screen */
  /* word cards, two to a row: long 5·6급 / course words pushed the second column 10px past the screen — the columns may shrink now and the word wraps */
  .tbook .vgrid:not(.pics){grid-template-columns:repeat(2,minmax(0,1fr))}
  .tbook .vcard > span,.tbook .vcard > small,.tbook .vcard em.br{overflow-wrap:anywhere}
  .tbook .vcard em.br{font-size:.72rem}
  /* 기초 연습 (word + ending → ___): two columns broke the items mid-word ("아요/ 어요") — one item per line */
  .tbook .ftab.q.c2,.tbook .ftab.q.c2 thead,.tbook .ftab.q.c2 tbody,.tbook .ftab.q.c2 tr{display:block;width:100%}
  .tbook .ftab.q.c2 th,.tbook .ftab.q.c2 td{display:block;border-width:0 0 1px}
  .tbook .ftab.q.c2 tbody td{padding:11px 16px}
  .tbook .ftab.q.c2 tbody tr:last-child td:last-child{border-bottom:0}
  /* textbook tags on the cover: the phone rule for the grammar title (.tbo-gi span) also hit the text inside each pill —
     17px lesson numbers next to 6px school names, one pill per line. Pills stay small (대표 v123) but readable (10px) */
  .tbp.cover .tbo-gi .gtags .tg > span{font-size:inherit}
  .tg,.tg-none,.tbo-gi .gtags span.tg,.tbp.cover .tbo-gi .gtags span.tg,.tbo-gi .gtags span.tg-none,.tbp.cover .tbo-gi .gtags span.tg-none{font-size:.64rem}
  .tg b,.tbo-gi .gtags span.tg b{font-size:.84em}
  /* …and in a 215–253px column they still stacked four to six lines: one line you can swipe, as on the Grammar reference page */
  .tbook .gtags{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:2px;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 22px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 22px),transparent)}
  .tbook .gtags::-webkit-scrollbar{display:none}
  .tbook .gtags > *{flex:none}
  .tbook .tbg-tags,.tbook .tbo-gi > div{min-width:0}   /* grid items: without this a one-line tag row would widen its column */
  /* grammar blocks in the book: three nested paddings left 215px for the text */
  .tbg-more summary{padding:14px 14px}
  .tbg-more .tbg-body{padding:0 12px 14px}
  .tbp.gram .tbg-head{padding:14px 14px 16px}
  /* dialogue translations (9.8px) and speech-bubble glosses (10px) */
  :is(.slide,.tbook) .dlg .txt small{font-size:.8rem;line-height:1.45;margin-top:2px}
  :is(.slide,.tbook) .bub small{font-size:.78rem;line-height:1.45}
  /* Practice: matching buttons were 6px apart; the Show answers · Print · Start again row could not wrap */
  .wbm .col{gap:9px}
  .wb .wbprog .row{flex-wrap:wrap}
  /* Grammar reference: tags were 9px / 8px */
  .gmain .gtag,.gwrap .gtag,.gmain .gitem summary div > span.gtag,.gwrap .gitem summary div > span.gtag{font-size:.6rem}
  .gmain .gtag b,.gwrap .gtag b,.gmain .gitem summary div > span.gtag b,.gwrap .gitem summary div > span.gtag b,.gmain .gitem summary span.gtag b{font-size:.54rem}
  .gmain h3.glesson small{letter-spacing:0;line-height:1.5}
  /* My progress */
  .d2badges div{font-size:.74rem}
  .d2path a{font-size:.76rem}
  /* class slides on a phone: subtitles, footers, plan tables, notes and word glosses were 10–11px */
  .stage .slide h3 small{font-size:.8rem;line-height:1.4}
  .stage .slide .sft{font-size:.68rem}
  .stage .slide .plan{font-size:.8rem}
  .stage .slide .plan th{font-size:.66rem}
  .stage .slide .gref .gr-note li,.stage .slide .gref .gr-cmp li{font-size:.82rem}
  .stage .slide .vcard>small{font-size:.74rem}
  .stage .slide .vgrid:not(.pics){grid-template-columns:repeat(2,minmax(0,1fr))}   /* three word cards to a row ran 34px out of the slide */
  .stage .slide > *{min-width:0}
  /* paper documents (forms, notices, timetables): "margin:auto" kept them at their widest line (26px past the slide); full width, a little less padding */
  :is(.slide,.tbook) .rd{margin-inline:0}
  :is(.slide,.tbook) .rd-paper{padding:18px 16px 16px}
  /* ID-card / business-card documents: an 84px photo column + a table that would not wrap made the card 56px wider than a phone slide */
  :is(.slide,.tbook) .rd-id{max-width:calc(100% - 12px)}   /* room for its 2° tilt */
  :is(.slide,.tbook) .rd-id .body{grid-template-columns:60px minmax(0,1fr);gap:10px}
  :is(.slide,.tbook) .rd-id .photo{width:60px;height:76px}
  :is(.slide,.tbook) table.kv{display:table}   /* the list style .kv{display:grid} also caught these tables, so they could not shrink */
  :is(.slide,.tbook) .rd-id .kv{table-layout:fixed}
  :is(.slide,.tbook) .rd-id .kv th{width:34%}
  :is(.slide,.tbook) .rd-id .kv th,:is(.slide,.tbook) .rd-id .kv td{overflow-wrap:anywhere}
  .tnote{font-size:.78rem}
  .tnote .tn{min-width:0;overflow-wrap:anywhere}
  .slide.cover .cv-sub{font-size:.82rem}
}
/* small phones (320px): the header ran 34px past the right edge and cut "Start studying" in half — the admin gear goes (it is at #/admin), the icons get a little smaller */
@media (max-width:359px){
  .nav .navr{gap:4px}
  .nav .adminlink{display:none}
  .nav .bagbtn{width:38px;height:38px}
  .d2path{gap:10px 4px}
  .d2path .r{width:54px;height:54px}   /* My progress: four 64px rings made every card 19px wider than the screen allows */
  .tbook .vgrid:not(.pics){grid-template-columns:minmax(0,1fr)}   /* Student Book word cards: two columns ran 17px off a 320px screen */
}

/* ===== v137-PC (2026-10-13, 대표: "PC에서 콘텐츠 위아래 간격이 좁다 — 넓찍하게 여유 있게 · 전체 가시성 평가해서 아쉬운 곳 고치기") =====
   1) Korean first (site3/ko.js): the English under a Korean line at Levels 2–3 = .kten
   2) PC only (≥1024px): more room between the blocks of the Student Book, the workbook, the grammar reference and the reader; body text at 16px;
      the small uppercase labels and English glosses no smaller than about 12.5px. Phones keep their own layout (the ≤640px blocks above). */
.kten{display:block;font-family:var(--body);font-size:.86em;font-weight:500;font-style:normal;color:var(--ink-2);line-height:1.5;margin-top:3px;letter-spacing:0;text-transform:none}
.tbx h4 .kten{flex-basis:100%;margin-top:-6px}
.tbph span .kten,.tbo-lv .kten,.tbx h4 i .kten,button .kten,.btn .kten,.ph .kten,.ph2 .kten{display:inline;margin-left:.4em;opacity:.85}
.tbsub small .kten,.tbx h4 small .kten,.wbh small .kten{font-size:.92em}
.goal .kten{font-weight:400}
.hw li .kten{margin-top:4px}
.wb .q .kten{font-size:.8em;margin-top:4px}
.tbook.kofirst .goal div{font-weight:700}

/* readability on every screen: the coral buttons (white on #FF6B57 = 2.8:1) and the faint grey labels (#9AA3AF = 2.6:1) were hard to read —
   the buttons take the deeper coral of the same palette (3.9:1), the faint grey goes to 4.4:1 */
:root{--faint:#767880}
.btn-c,.nbeta{background:var(--coral-deep)}
.btn-c:hover{background:#C93F2C}

/* 책으로 공부하기 — chapters bar · locked chapter · next chapter (v136: every chapter for buyers) */
.rdchs{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0 0 18px}
.rdchs small{font-family:var(--body);font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;font-weight:800;color:var(--muted);margin-right:6px}
.rdc{display:inline-flex;align-items:center;gap:3px;min-width:34px;height:34px;padding:0 10px;justify-content:center;border:1.5px solid var(--line);border-radius:999px;background:#fff;color:var(--ink);font-weight:700;font-size:.9rem;text-decoration:none}
.rdc:hover{border-color:var(--ink)}
.rdc.on{background:var(--ink);border-color:var(--ink);color:#fff}
.rdc.lock{color:var(--muted);background:var(--alt,#f6f4ef)}
.rdc.lock i{font-style:normal;font-size:.7rem}
.rdlock{max-width:640px;margin:28px auto 40px;padding:34px 36px;border:1.5px solid var(--line);border-radius:22px;background:#fff;display:grid;gap:14px;text-align:left}
.rdlock h2{margin:0;font-family:var(--kr-disp);font-size:clamp(1.4rem,2.6vw,1.9rem)}
.rdlock .row{display:flex;flex-wrap:wrap;gap:10px}
.rdlock p{margin:0;line-height:1.7}
.rdmore.rdnext{justify-content:space-between}
.rdbk .fr.own{background:var(--leaf-deep,#2f7a52);color:#fff}
@media (max-width:640px){ .rdchs{gap:5px} .rdc{min-width:30px;height:30px;font-size:.82rem;padding:0 8px} .rdlock{padding:22px 18px;margin:16px 0 28px} }

@media (min-width:1024px){
  /* Student Book */
  .tbook{line-height:1.7;padding:56px 72px 64px}
  .tbpager{margin-bottom:30px}
  .tbp{gap:30px}
  .tbph{padding-bottom:14px;margin-bottom:12px}
  .tbph span{font-size:.8rem}
  .tbsub{font-size:1.25rem;margin-top:24px;line-height:1.35}
  .tbsub small{font-size:.95rem;line-height:1.55;margin-top:6px}
  .tbx{padding:24px 30px 26px;gap:20px;border-radius:18px}
  .tbx h4{font-size:1.14rem;gap:12px}
  .tbx h4 small{font-size:.95rem;line-height:1.55}
  .tbx h4 i{font-size:.76rem;padding:4px 11px}
  .tbintro{margin-top:44px;padding-top:34px;gap:20px}
  .tbo-g small,.tbo-goal small{font-size:.78rem}
  .tbp.cover .tbo-g{margin:14px 0 30px;gap:16px}
  .tbp.cover .tbo-gi{padding:14px 0}
  .tbp.cover .tbo-goal .goal div,.tbo-goal .goal div{padding:11px 0;font-size:1.04rem;line-height:1.6}
  .tbp.gram .tbg-head{margin-top:34px;padding:26px 30px}
  .tbp.gram .tbg-head h3 span{font-size:.78rem}
  .tbg-tags small{font-size:.78rem}
  .tbg-rule,.tbg-body{gap:26px}
  .tbook .tips .tip p,.tbook .xplen p,.tbook .gr-note li,.tbook .gr-cmp li,.tbook ol.hw li,.tbintro p.sub,.tbook .kv.at li{font-size:1rem;line-height:1.75}
  .tbook .gr-ex li{font-size:.98rem;line-height:1.7}
  .tbook .gr-ox td.why{font-size:.92rem}
  .tbook .vtab td{font-size:.97rem}
  .tbook .gr-mean small,.tbook .gr-ex small,.tbook .gr-note small,.tbook .gr-cmp small,.tbook .gr-mis small,.tbook .gr-at b{font-size:.78rem}
  .tbook .gr-at li b.ko{font-size:.95rem}
  .tbook .qa{row-gap:12px}
  .tbook .wbnext,.tbafter{margin-top:44px}
  .tbook p.situ{margin-top:6px}
  /* a comfortable line (the English explanations ran to 110 characters a line on a laptop) */
  .tbook :is(p.sub,p.situ,p.hook,.gr-mean p,.xplen p,.tip p,ol.hw li,ol.qs li,.goal div,.tbsub small,.tbx h4 small){max-width:46em}
  .howto summary b{font-size:.9rem}
  /* Practice (workbook) */
  .wb .wbp{display:grid;gap:22px}
  .wb .wbh{margin-bottom:6px}
  .wb .wbi{padding:22px 26px}
  .wb .wbi .q{margin-bottom:14px;line-height:1.65}
  .wb .opts{gap:10px}
  .wb .wbnext{margin-top:40px}
  .wb .wbintro{line-height:1.75}
  /* Grammar reference (#/grammar) */
  .gbody .gwarn li,.gbody .gcmp li,.gbody .gnote li{font-size:1rem;line-height:1.75}
  .gbody .gex ol li>span{font-size:.95rem}
  .gbody p.gnote b.ko{font-size:.95rem}
  .gbody .gmean small,.gbody .gmis small,.gbody .g2 small,.gbody .g3 small{font-size:.78rem}
  .gbody td.why{font-size:.92rem}
  .gbody{gap:22px}
  /* Study with books — the sentence panel */
  .rdpin .note,.rdp-sec .note{font-size:.92rem;line-height:1.6}
  .rdp-sec h3{font-size:.8rem}
  .rw-sg small{font-size:.8rem}
  /* page heads and lesson grids — room between the head, the tabs and the cards */
  .ph2.lp.wbhead{padding-top:56px}
  .lvtabs{margin-bottom:18px}
  .lgrid{gap:16px}
  .lsum{margin:6px 0 18px}
  .lcard2 small{font-size:.86rem}
}

/* v137-PC: two desktop bugs found by the phone pass — the lesson page's section carries the class "bk", which also styled the back link
   (.bk{font-size:.84rem;font-weight:800}), so the whole Student Book was 13.4px bold; and each book page (section.tbp) took the site's
   section padding (about 90px above and below) */
.lpage.bk{font-size:1rem;font-weight:400;display:block}
.tbook section.tbp{padding:0}