/* v2lesson.css — Haeyo Korean v2, phase 3 slice ② (2026-10-23, branch v2-apply). Loaded after v2site.css + v2spec.css.
   The look of site3/mock/v2/learn.html for three live pages, without touching their logic:
     #/lessons?lv=1A      lesson list   (.v2lh head · .lvtabs · .lsum · .lgrid .lcard2)
     #/lessons?id=1A-5-1  lesson page   (.v2lh head · .partsw · #tbook = textbook2.js .tb2-* · fallback textbook.js .tb*/.tbg-*)
     #/workbook?id=1A-5   workbook      (.v2lh.v2wbh head · wb.js .wb .wbp .wbi … answer marks)
   The v2 primitives .plate .lv .chip are scoped to .v2 scopes in v2site.css, so the copies used here are scoped to .v2lh.
   textbook2.js injects its CSS at runtime (after this file) as ".tb2 .tb2-x" — every #tbook rule here starts with the id to win.
   Phone first (375); 720px and 1024px add on. Nothing a learner reads is under 12px; everything you tap is ≥44px tall. */

/* ================= 1 · heads (lesson · list · workbook) ================= */
/* 2026-10-29: the station plate (.plate) and level dot (.lv) are drawn by v2site.css only — one rule for every page */
.ph2.v2lh{text-align:left;background:var(--ac-l,var(--sky-l));border-bottom:1px solid var(--line);padding:18px 0 22px !important}
.ph2.v2lh .wrap{text-align:left}
.v2lh .plate .prem{font:700 var(--fs-12)/1 var(--ui);font-style:normal;letter-spacing:.06em;text-transform:uppercase;color:var(--butter-d);background:var(--butter-l);padding:4px 8px;border-radius:6px}
.v2lh .lv[data-g="K"]{background:var(--ink)}
.ph2.v2lh h1.hand{margin:14px 0 0;font-family:var(--hand);font-weight:700;font-size:clamp(40px,11.5vw,72px);line-height:1.05;letter-spacing:0;color:var(--ink);text-align:left;word-break:keep-all;overflow-wrap:anywhere}
.ph2.v2lh h1.hand:not([lang]){font-size:clamp(34px,9vw,56px)}
.ph2.v2lh h1.hand:after,.ph2.v2lh h1.hand:before{display:none}
.ph2.v2lh .lead{margin:8px 0 0;max-width:40em;font:600 var(--fs-16)/var(--lh-snug) var(--ui);color:var(--ink2);text-align:left}
.ph2.v2lh .row{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-start !important;margin-top:16px}
.ph2.v2lh .row .btn{min-height:44px;padding:0 16px;font-size:var(--fs-14)}
/* grammar chips under the title (the class you are in is filled) */
.v2chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.v2chips .chip{display:inline-flex;align-items:center;gap:8px;max-width:100%;min-height:40px;padding:6px 14px;border-radius:9999px;border:1px solid var(--line2);background:#fff;font:700 var(--fs-14)/1.3 var(--kr);color:var(--ink);white-space:normal}
.v2chips .chip small{flex:none;font:700 var(--fs-12)/1 var(--ui);letter-spacing:.06em;color:var(--mute)}
.v2chips .chip.on{background:var(--ink);border-color:var(--ink);color:#fff}
.v2chips .chip.on small{color:var(--sky)}
/* list head: the side buttons */
.v2lh .wbhw{align-items:end}
.v2lh .wbhw>.row{margin-top:0}
/* workbook head: the long how-to line is a quiet second line */
.v2wbh .lead .hide-sm{font-weight:500;color:var(--mute)}

/* ================= 2 · level tabs → underline tabs ================= */
.lvtabs:not(.smp){display:flex;flex-wrap:nowrap;justify-content:flex-start;gap:var(--sp-5);margin:0 0 14px;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.lvtabs:not(.smp)::-webkit-scrollbar{display:none}
.lvtabs:not(.smp) a,.lvtabs:not(.smp) a.on,.lvtabs:not(.smp) a.v2-dim{position:relative;inset:auto;z-index:auto;display:inline-flex;align-items:center;gap:6px;flex:none;min-height:44px;padding:0 2px;border:0;border-radius:0;background:none;box-shadow:none;font:600 var(--fs-16)/1 var(--ui);color:var(--mute);text-decoration:none;white-space:nowrap}
.lvtabs:not(.smp) a i,.lvtabs:not(.smp) a.on i{background:none;padding:0;font:600 var(--fs-12)/1 var(--ui);color:var(--mute2)}
.lvtabs:not(.smp) a.on{color:var(--ink)}
.lvtabs:not(.smp) a.on:after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--ink);border-radius:3px 3px 0 0}
.lvtabs:not(.smp) a.v2-dim{color:var(--mute2);border:0}   /* v2spec.css .v2-dim is the modal overlay (position:fixed;inset:0) — undo it on the empty-level tabs */
.lvtabs:not(.smp) a:hover{color:var(--ink)}
.lsum{margin:4px 0 14px;font:500 var(--fs-14)/var(--lh-body) var(--ui);color:var(--ink2)}
.lsum b{font-family:var(--kr);font-weight:700;color:var(--ink)}

/* ================= 3 · lesson cards ================= */
.lgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.lcard2{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-height:132px;padding:14px 14px 12px;border:1px solid var(--cream2);border-radius:var(--rd-m);background:var(--cream);box-shadow:none;color:var(--ink);text-decoration:none;transition:border-color .15s,box-shadow .15s,transform .15s}
a.lcard2:hover{border-color:var(--ink);box-shadow:var(--sh-desk);transform:translateY(-1px)}
.lcard2 .n{grid-row:auto;width:auto;height:auto;display:block;border-radius:0;background:none !important;color:var(--ink) !important;font:900 clamp(34px,9vw,44px)/1 var(--kr);letter-spacing:-.04em}
.lcard2 b{font:700 var(--fs-16)/var(--lh-snug) var(--kr);color:var(--ink);word-break:keep-all;overflow-wrap:anywhere}
.lcard2 small{display:block;font:500 var(--fs-12)/var(--lh-snug) var(--ui);color:var(--mute)}
.lcard2 .st{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:auto;padding-top:6px;width:100%}
.lcard2 .st i{width:24px;height:24px;border-radius:50%;border:1.5px solid var(--line2);background:#fff;display:grid;place-items:center;font:700 var(--fs-12)/1 var(--ui);font-style:normal;color:var(--mute)}
.lcard2 .st i.on{background:var(--ink);border-color:var(--ink);color:#fff}
.lcard2 .st em{margin-left:auto;padding:0;background:none;font:400 22px/1 var(--pen);font-style:normal;color:var(--red)}   /* the workbook score, written in red pen */
.lcard2.going{border-color:var(--sky);background:#fff}
.lcard2.going .n{color:var(--sky-d) !important}
.lcard2.done{border-color:var(--green);background:var(--green-l)}
.lcard2.done .n{color:var(--green) !important}
.lcard2.off{background:transparent;border:1px dashed var(--line2)}
.lcard2.off .n,.lcard2.off b{color:var(--mute2) !important}
.lcard2.rvc,.lcard2.rvt{background:#fff;border-color:var(--line2)}
.lcard2.rvc .n,.lcard2.rvt .n{font-size:var(--fs-24)}
.lcard2.wbc .st > em{margin-left:0;font:400 22px/1 var(--pen);color:var(--red)}
.lcard2.wbc .st .wbpct em{background:var(--ink)}
.lcard2.wbc .st .wbpct.done em{background:var(--green)}
@media (min-width:720px){
  .lgrid{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
  .lcard2{min-height:150px;padding:18px 18px 14px}
  .lcard2 b{font-size:var(--fs-18)}
  .lcard2 small{font-size:var(--fs-14)}
}
@media (min-width:1024px){
  .ph2.v2lh{padding:28px 0 32px !important}
  .lgrid{grid-template-columns:repeat(4,minmax(0,1fr))}
}

/* ================= 4 · Session 1 · 2 switch → underline tabs ================= */
.partsw{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 var(--sp-5);margin:6px 0 18px;border-bottom:1px solid var(--line)}
.partsw a,.partsw a.on{position:relative;display:grid;align-content:start;gap:4px;min-width:0;min-height:44px;padding:10px 2px 14px;border:0;border-radius:0;background:none;color:var(--mute);text-decoration:none;box-shadow:none}
.partsw a b,.partsw a.on b{font:700 var(--fs-14)/1.2 var(--ui);letter-spacing:0;text-transform:none;color:inherit}
.partsw a span{font:500 var(--fs-12)/1.4 var(--kr);color:var(--mute);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.partsw a.on{color:var(--ink)}
.partsw a.on span{color:var(--ink2)}
.partsw a.on:after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--ink);border-radius:3px 3px 0 0}
.partsw a:hover{color:var(--ink)}
@media (min-width:720px){.partsw a b,.partsw a.on b{font-size:var(--fs-16)}.partsw a span{font-size:var(--fs-14)}}

/* ================= 5 · the Student Book chapter (textbook2.js, .tb2) ================= */
#tbook .tb2{--c-ink:#0b0b0c;--c-sky:#7cc8ff;--c-link:#0b6fbd;--c-sub:#6b7280;--c-rule:#e8e6df;--c-soft:#fbf8f1;--c-tint:#eef7ff;--c-paper:#fffdf8;--c-bad:#e05252;--c-good:#1f8a4c;font-family:var(--ui)}
#tbook .tb2 .tb2-eyebrow{display:flex;align-items:center;gap:8px;margin-bottom:6px;font:600 var(--fs-12)/1.4 var(--ui);letter-spacing:.12em;text-transform:uppercase;color:var(--sky-d)}
#tbook .tb2 .tb2-main h2{margin-bottom:8px;font-family:var(--hand);font-weight:700;font-size:clamp(28px,7.6vw,40px);line-height:1.1;letter-spacing:0;color:var(--ink)}
#tbook .tb2 .tb2-main h2 :lang(ko),#tbook .tb2 .tb2-main h2 .tb2-k{font-family:var(--hand)}
#tbook .tb2 h1.tb2-ko{font-family:var(--hand);font-weight:700;font-size:clamp(36px,10vw,56px);line-height:1.05;letter-spacing:0}
#tbook .tb2 .tb2-lede{font:600 var(--fs-18)/var(--lh-snug) var(--ui);color:var(--ink2)}
#tbook .tb2 .tb2-main h3{font:800 var(--fs-18)/var(--lh-tight) var(--ui);color:var(--ink)}
#tbook .tb2 .tb2-main h3 small{font:500 var(--fs-14)/var(--lh-snug) var(--ui);color:var(--mute)}
#tbook .tb2 .tb2-goals{border-top:2px solid var(--ink)}
#tbook .tb2 .tb2-goals li:first-child{border-top:0}
#tbook .tb2 .tb2-goals li{border-bottom-color:var(--line2)}
#tbook .tb2 .tb2-goals .tb2-n{display:grid;place-items:center;width:24px;height:24px;margin-top:2px;padding:0;border:2px solid var(--ink);border-radius:5px 7px 4px 6px;transform:rotate(-3deg);font:700 var(--fs-12)/1 var(--ui);color:var(--ink)}
#tbook .tb2 .tb2-pill{font:700 var(--fs-12)/1.3 var(--ui);background:var(--sky-l);color:var(--sky-d);border-radius:6px}
#tbook .tb2 .tb2-callout{background:var(--sky-l);border-left:3px solid var(--sky-d)}
#tbook .tb2 .tb2-callout .tb2-ct{font:400 22px/1.1 var(--pen);color:var(--red)}
/* the phone table of contents (sticky chips) → underline tabs */
@media (max-width:900px){
  #tbook .tb2 .tb2-toc{gap:var(--sp-5);border-bottom:1px solid var(--line)}
  #tbook .tb2 .tb2-toc a{position:relative;display:inline-flex;align-items:center;min-height:44px;padding:0 2px;border:0;border-radius:0;background:none;font:600 var(--fs-14)/1 var(--ui);color:var(--mute)}
  #tbook .tb2 .tb2-toc a.on{border:0;background:none;color:var(--ink)}
  #tbook .tb2 .tb2-toc a.on:after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--ink);border-radius:3px 3px 0 0}
}
@media (min-width:901px){
  #tbook .tb2 .tb2-toc a.on{border-left-color:var(--ink)}
}
/* v214 (owner 2026-10-23: "why does it turn into a notebook from Grammar 1?"): grammar pages look like the rest of the chapter — plain paper. Only the form itself stays big. */
#tbook .tb2 section.tb2-sec:is(#tb2-g1,#tb2-g2,#tb2-g3,#tb2-g4,#tb2-g5,#tb2-g6) h2{margin-top:10px;font:900 clamp(30px,8.4vw,44px)/1.15 var(--kr);letter-spacing:-.04em}
#tbook .tb2 section.tb2-sec:is(#tb2-g1,#tb2-g2,#tb2-g3,#tb2-g4,#tb2-g5,#tb2-g6) .tb2-h2en{font:600 var(--fs-16)/var(--lh-snug) var(--ui);color:var(--ink2)}
/* the textbook tags under the form: SNU 1A-3 · Yonsei 1-1-8 … */
#tbook .tb2 .tb2-tags-top{margin:10px 0 4px}
/* the pager (one section = one page) */
#tbook .tb2 .tb2-pager{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:40px;padding-top:18px;border-top:2px solid var(--ink)}
#tbook .tb2 .tb2-pager .tb2-pgn{font:700 var(--fs-14)/1 var(--ui);color:var(--mute);font-variant-numeric:tabular-nums;white-space:nowrap}
#tbook .tb2 .tb2-pager .tb2-pgl:empty{display:none}
#tbook .tb2 .tb2-pager .tb2-pgl{margin-left:.35em;font-weight:500;color:var(--ink2);max-width:28vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#tbook .tb2 .tb2-pager button:disabled{opacity:.35;pointer-events:none}
#tbook .tb2 .tb2-pager button:first-child{text-align:left}
#tbook .tb2.tb2-paged .tb2-foot{border-top:0;padding-top:12px}
/* the forms table: ruled, hairlines */
#tbook .tb2 .tb2-tbl th{padding:6px 8px 6px 0;border-bottom:1.5px solid var(--ink);font:700 var(--fs-12)/1.2 var(--ui);letter-spacing:.1em;color:var(--ink)}
#tbook .tb2 .tb2-tbl td{border-bottom:1px dashed #cbd5e1}
#tbook .tb2 .tb2-tbl td.tb2-f{font:700 var(--fs-18)/1.3 var(--kr);color:var(--ink)}
#tbook .tb2 .tb2-tbl td.tb2-w{font-size:var(--fs-14);color:var(--mute)}
#tbook .tb2 .tb2-tbl .tb2-arrow{color:var(--red)}
#tbook .tb2 .tb2-rows{border-top:1.5px solid var(--ink)}
#tbook .tb2 .tb2-rows>div{border-bottom:1px dashed #cbd5e1}
#tbook .tb2 .tb2-conj{border-top:1.5px solid var(--ink)}
#tbook .tb2 .tb2-conj div{border-bottom:1px dashed #cbd5e1}
#tbook .tb2 .tb2-conj h5{font:400 24px/1 var(--pen);color:var(--red)}
/* model sentences: highlighter */
#tbook .tb2 .tb2-models{border-top:1.5px solid var(--ink)}
#tbook .tb2 .tb2-models li:first-child{border-top:0}
#tbook .tb2 .tb2-models li{border-bottom:1px dashed #cbd5e1}
#tbook .tb2 .tb2-models .tb2-k{font:700 var(--fs-18)/1.5 var(--kr);color:var(--ink);background:linear-gradient(transparent 58%,var(--hl) 58%,var(--hl) 94%,transparent 94%);-webkit-box-decoration-break:clone;box-decoration-break:clone;padding:0 .04em}
#tbook .tb2 .tb2-models .tb2-e{font-size:var(--fs-14);color:var(--mute)}
/* common mistakes: red pen */
#tbook .tb2 .tb2-mis li{grid-template-columns:26px minmax(0,1fr);border-bottom:1px dashed #cbd5e1}
#tbook .tb2 .tb2-mis .tb2-mk{font:400 24px/1 var(--pen);color:var(--red) !important;padding-top:0}
#tbook .tb2 .tb2-mis .tb2-x{color:var(--mute);text-decoration-color:var(--red);text-decoration-thickness:2px}
#tbook .tb2 .tb2-mis .tb2-o{color:var(--ink);font-weight:700}
/* textbook tags as v2 .tag badges */
#tbook .tb2 .tb2-tags{gap:6px}
#tbook .tb2 .tb2-tags span{display:inline-block;padding:5px 9px;border:1px solid var(--line2);border-radius:6px;background:#fff;font:600 var(--fs-12)/1.3 var(--ui);letter-spacing:.04em;color:var(--ink2)}
#tbook .tb2 details>summary{min-height:44px;display:flex;align-items:center;cursor:pointer}
/* the other pages of paper (chat, notice) share the frame colour */
#tbook .tb2 .tb2-paper{border-color:#eadfc6;background:#fffdf8}
#tbook .tb2 .tb2-next{border-radius:var(--rd-m);border-color:var(--line2);background:var(--cream)}
#tbook .tb2 .tb2-btn{min-height:44px;display:inline-flex;align-items:center;padding:0 14px;border-radius:9999px;border:1.5px solid var(--ink);color:var(--ink);font:600 var(--fs-14)/1 var(--ui)}
#tbook .tb2 .tb2-btn.tb2-ghost{border-color:var(--line2);color:var(--ink2)}
#tbook .tb2 .tb2-fb.ok .tb2-ok{font:400 24px/1 var(--pen);color:var(--red)}
#tbook .tb2 .tb2-fb.ok .tb2-ok:before{content:"";display:inline-block;width:16px;height:16px;margin-right:8px;border:2.5px solid var(--red);border-radius:48% 52% 50% 50%/55% 45% 55% 45%;vertical-align:-1px}
#tbook .tb2 .tb2-fb.no .tb2-bad:before{content:"\2715";margin-right:6px;font:400 22px/1 var(--pen);color:var(--red)}
/* v213 the practice lines of the forms: the answer is written in red pen on the blank line, the teacher's ○ or ✕ beside it */
#tbook .tb2 .tb2-inp{min-height:44px}
#tbook .tb2 .tb2-fl-bl b{font:400 25px/1.1 var(--pen);color:var(--red)}
#tbook .tb2 .tb2-fl-mk{position:relative;width:28px;height:24px;margin-left:2px}
#tbook .tb2 .tb2-fl.ok .tb2-fl-mk::before{content:"";position:absolute;left:0;top:-2px;width:24px;height:24px;border:3px solid var(--red);border-radius:48% 52% 50% 50%/55% 45% 55% 45%;transform:rotate(-8deg)}
#tbook .tb2 .tb2-fl.no .tb2-fl-mk::before{content:"\2715";position:absolute;left:2px;top:-8px;font:400 30px/1 var(--pen);color:var(--red);transform:rotate(8deg)}
#tbook .tb2 .tb2-fl .tb2-ch.right{position:relative;border-color:var(--green);color:var(--ink);background:var(--green-l)}
#tbook .tb2 .tb2-fl .tb2-ch.wrong{border-style:dashed;color:var(--mute)}
#tbook .tb2 .tb2-md{font:600 var(--fs-14)/1 var(--ui)}
#tbook .tb2 .tb2-msg .tb2-t{font-size:var(--fs-12)}
@media (min-width:720px){
  #tbook .tb2 section.tb2-sec:is(#tb2-g1,#tb2-g2,#tb2-g3,#tb2-g4,#tb2-g5,#tb2-g6){margin-left:0;margin-right:0;padding:28px 30px 30px 48px;background:linear-gradient(90deg,transparent 30px,#f5b5b5 30px,#f5b5b5 31.2px,transparent 31.2px),#fffdf8}
}
@media (max-width:640px){
  #tbook .tb2 .tb2-tbl tr{border-bottom:1px dashed #cbd5e1}
  #tbook .tb2 .tb2-tbl td{border:0}
}

/* ================= 6 · fallback: the old Student Book (textbook.js · haeyo.book2=off) ================= */
#tbook .tbph{font-family:var(--hand);font-weight:700;font-size:clamp(28px,7.6vw,40px);line-height:1.1;letter-spacing:0;color:var(--ink)}
#tbook .tbph span{display:block;font:600 var(--fs-12)/1.4 var(--ui);letter-spacing:.12em;text-transform:uppercase;color:var(--sky-d)}
#tbook .tbsub{font:800 var(--fs-18)/var(--lh-tight) var(--ui);color:var(--ink)}
#tbook .tbsub small{display:block;font:500 var(--fs-14)/var(--lh-snug) var(--ui);color:var(--mute)}
#tbook .tbg-head h3{font:900 clamp(28px,8vw,44px)/1.15 var(--kr);letter-spacing:-.04em;color:var(--ink)}
#tbook .tbg-head h3 span{display:block;font:400 26px/1.1 var(--pen);color:var(--red);letter-spacing:0;transform:rotate(-1.5deg);transform-origin:left center}
#tbook .tbg-head h3 small{display:block;font:600 var(--fs-16)/var(--lh-snug) var(--ui);color:var(--ink2);letter-spacing:0}
#tbook .tbg-rule{position:relative;padding:18px 14px 18px 30px;border:1px solid #eadfc6;border-radius:6px;background:linear-gradient(90deg,transparent 18px,#f5b5b5 18px,#f5b5b5 19.2px,transparent 19.2px),#fffdf8;box-shadow:0 18px 34px -24px rgba(11,11,12,.45)}
#tbook .tbg-forms table{width:100%;border-collapse:collapse}
#tbook .tbg-forms th{border-bottom:1.5px solid var(--ink);font:700 var(--fs-12)/1.2 var(--ui);letter-spacing:.1em;text-transform:uppercase;text-align:left}
#tbook .tbg-forms td{border-bottom:1px dashed #cbd5e1;vertical-align:top}
#tbook .tbg-pts span{background:linear-gradient(transparent 58%,var(--hl) 58%,var(--hl) 94%,transparent 94%)}
#tbook .tbg-tags .tg{display:inline-flex;gap:4px;padding:5px 9px;border:1px solid var(--line2);border-radius:6px;background:#fff;font:600 var(--fs-12)/1.3 var(--ui);color:var(--ink2)}
#tbook .tbg-tags .tg b{color:var(--ink)}
#tbook .tbg-more>summary{min-height:44px}

/* ================= 7 · workbook ================= */
.v2wbh+section .wb .wbp{border-color:#eadfc6;background:#fffdf8}
.wb .wbh .n{background:var(--ink);color:#fff}
.wb .wbh b{font-family:var(--hand);font-weight:700;font-size:var(--fs-24);letter-spacing:0}
.wb .wbprog b{font:400 32px/1 var(--pen);color:var(--red)}
.wb .wbprog .bar em{background:var(--ink)}
.wb .mini,.wb .wbpager button{min-height:44px}
.wbi .opts button,.wbi .chips button,.wbm button{position:relative;min-height:44px}
.wbi .num{font-size:var(--fs-12)}
/* right: the teacher's red circle · wrong: a red ✕ */
.wbi.ok .num{background:var(--ink);color:#fff}
.wbi .mark{position:relative;min-height:28px}
.wbi.ok .mark::before{content:"";display:block;width:24px;height:24px;margin:0 auto;border:3px solid var(--red);border-radius:48% 52% 50% 50%/55% 45% 55% 45%;transform:rotate(-8deg)}
.wbi .opts button.good,.wbm button.done{background:var(--green-l);border-color:var(--green);color:var(--ink)}
.wbi .opts button.good::after{content:"";position:absolute;inset:-7px -9px;border:3px solid var(--red);border-radius:48% 52% 50% 50%/55% 45% 55% 45%;transform:rotate(-3deg);pointer-events:none}
.wbi .opts button.bad,.wbm button.bad{background:#fff;border-style:dashed;border-color:var(--line2);color:var(--mute)}
.wbi .opts button.bad::after,.wbm button.bad::after{content:"\2715";position:absolute;right:-8px;top:-14px;font:400 30px/1 var(--pen);color:var(--red);transform:rotate(8deg);pointer-events:none}
.wbi .ans{position:relative}
.wbi .ans.good{border-color:var(--green);background:var(--green-l)}
.wbi .ans.bad{border-color:var(--red);background:var(--red-l)}
.wbi .ans.good::after{content:"";position:absolute;right:10px;top:50%;width:26px;height:26px;margin-top:-13px;border:3px solid var(--red);border-radius:48% 52% 50% 50%/55% 45% 55% 45%;transform:rotate(-6deg)}
.wbi .ans.bad::after{content:"\2715";position:absolute;right:12px;top:50%;margin-top:-15px;font:400 30px/1 var(--pen);color:var(--red);transform:rotate(8deg)}
@media print{.ph2.v2lh{background:none;border:0}.v2chips .chip.on{background:#fff;color:var(--ink)}}
/* the lock chip in a card title (app.css's "font:… inherit" shorthand is invalid, so it took the title's size) */
.lcard2 .lkchip{font:600 var(--fs-12)/1.5 var(--ui);background:#fff;border:1px solid var(--line2);color:var(--mute)}

/* 2026-10-29 (owner: one card, one look): every lesson card — level pages, workbook list, review sets, theme courses — is .lcard2,
   in the poster-tile language of the K-Culture cards (tiles.js): ink border, hard shadow, the press; the number in the level or course colour (--lc). */
.lcard2{border:1.5px solid var(--ink)!important;border-radius:14px!important;box-shadow:3px 4px 0 var(--ink);transition:transform .12s,box-shadow .12s}
a.lcard2:active{transform:translate(2px,2px);box-shadow:1px 2px 0 var(--ink)}
a.lcard2:hover{box-shadow:3px 4px 0 var(--ink)}
.lcard2 .n{color:var(--lc,var(--ink))!important}
.lcard2.off{box-shadow:none;border:1.5px dashed var(--line2)!important}
.lcard2.done{background:var(--green-l)}
.lcard2.going{background:#fff}
.lgrid[data-g="1"]{--lc:var(--sky-d)}.lgrid[data-g="2"]{--lc:var(--mint-d)}.lgrid[data-g="3"]{--lc:var(--butter-d)}.lgrid[data-g="4"]{--lc:#b4476a}.lgrid[data-g="5"]{--lc:#5b4a9e}.lgrid[data-g="6"]{--lc:#b35b1e}
a.lcard2:hover{transform:none}

/* 2026-10-30 mobile audit (r2-book): the sample page — the four level buttons were 48px blocks stacked over the whole first screen; now one row of chips that scrolls sideways */
@media (max-width:640px){
  section.smp-pg .lvtabs.smp{flex-direction:row;flex-wrap:nowrap;align-items:center;gap:6px;overflow-x:auto;margin:0 -16px 6px;padding:2px 16px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  section.smp-pg .lvtabs.smp::-webkit-scrollbar{display:none}
  section.smp-pg .lvtabs.smp button{flex:none;width:auto;min-height:44px;padding:0 14px;font-size:14px;border-radius:999px;white-space:nowrap}
  section.smp-pg .smpfree{margin:6px auto 2px;font-size:14px}
  section.smp-pg .smphint{margin:0 0 8px;font-size:13px}
}
/* the station name board: the arrow stays with its station ("시청 City Hall →") */
#tbook .rd-sign .ls p{text-wrap:balance}

/* 2026-10-30: level lessons / workbook pair, top-left of the level and lesson heads */
.lvsw{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px;justify-content:flex-start}

/* 2026-10-30 mobile audit B (08 · first screen): the "How to study" line is a plain label, not a small blue capital eyebrow */
.lpage .howto>summary{min-height:44px}
.lpage .howto>summary b{font:700 var(--fs-14)/1.3 var(--ui);letter-spacing:0;text-transform:none;color:var(--ink)}
/* on a phone the lesson head fits the first screen, so the Student Book starts on it: one scrolling row of grammar chips, a smaller title, tighter gaps */
@media (max-width:640px){
  .ph2.lhead2.v2lh{padding:12px 0 14px !important}
  .lhead2 .lvsw{margin-bottom:8px}
  .ph2.lhead2.v2lh h1.hand{margin-top:8px;font-size:clamp(28px,8.6vw,34px)}
  .ph2.lhead2.v2lh .lead{margin-top:4px;font-size:var(--fs-14)}
  .lhead2 .v2chips{flex-wrap:nowrap;overflow-x:auto;margin-top:10px;padding-bottom:2px;scrollbar-width:none}
  .lhead2 .v2chips::-webkit-scrollbar{display:none}
  .lhead2 .v2chips .chip{flex:none;white-space:nowrap;min-height:36px;padding:4px 12px}
  .ph2.lhead2.v2lh .row{margin-top:10px}
  section.lpage.bk{padding-top:10px !important}
  .lpage .howto{margin-bottom:10px;padding:2px 14px}
  .lpage .howto[open]{padding-bottom:12px}
  .partsw{margin:0 0 10px}
  .partsw a,.partsw a.on{padding:8px 2px 10px}
  .partsw a span{-webkit-line-clamp:1}
}