/* v2calm.css — Haeyo Korean · 2026-10-29 (owner: "redesign the popular pages with frontend-design, inside our design system").
   Loaded LAST. It does not change the design system (colours, type, poster tiles, station plates, the Haeyo Line); it removes the
   template defaults that make a page read as machine-made, so the site's own devices carry the page. Notes: std/design_notes_2026-10-29.md.
   1 · section labels: sentence case, no tracking — a quiet name, not a shouted tag
   2 · no single phrase highlighted inside a headline
   3 · no fade-and-slide entrance on every section (content is there when you arrive)
   4 · cards on the home don't jump on hover; the poster tiles keep their press (the system's tactile signature)
   5 · K-Culture tiles lose the "READ & LIVE" caption that repeats the band heading
   (trailing "→" in link and button text is trimmed by app.js calmArrows) */

/* 1 · section labels */
html body :is(.eyebrow,.cap,.okey,.okmh-eye,.kch-eye,.kc-eye,.kh-eye,.nu-eye,.th-eye,.th-cap,.th-intro-hd,.tb2-eyebrow,.tb2-no,.v2lh .plate small,.plate small,.hv-meta span,.hv-tc small,.hv-ph small,.hv-pg small,.hv-nchd small,.hv-mgt small,.v2-fcol>small,.okmg>small,.oklf small,.okpg small,.okmh-bd small,.okmh-ov small,.post-c small,.partsw a b,.lsn .sec2 small,.stat span,.stat em,.kch-gl,.okfc b,.mpk,.okmh-eye){
  text-transform:none!important;letter-spacing:.005em!important}
html body :is(.eyebrow,.okey,.kch-eye,.kc-eye,.th-eye,.tb2-eyebrow,.hv-ph small,.hv-pg small){font-weight:600!important}
html body .tb2 .tb2-eyebrow{font-size:14px}
html body .th-eye{font-size:13px}

/* 2 · no highlighted phrase inside a headline */
html body :is(h1,h2,h3) :is(.hl,.cm-hl,mark){background:none!important;padding:0!important;color:inherit!important;box-shadow:none!important}
html body :is(h1,h2,h3) :is(.hl,.cm-hl):after,html body :is(h1,h2,h3) :is(.hl,.cm-hl):before{content:none!important}

/* 3 · content is there when you arrive */
html body .rv{opacity:1!important;transform:none!important;transition:none!important}

/* 4 · home cards: no jump on hover */
html body .v2home :is(.hv-kc a,.hv-t>a):hover{transform:none!important}

/* 5 · K-Culture tiles: no caption that repeats the band heading */
html body .kcpage[data-kc-page=hub] .kch-c:before{content:none!important}
html body .kcpage[data-kc-page=hub] .kch-c .kbub{margin-top:2px}
html body .kcpage[data-kc-page=hub] .kch-c .kbub.on-ph{top:20px}

/* keep motion people ask for, and respect reduced motion everywhere */
@media (prefers-reduced-motion:reduce){html body *{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* 6 · 2026-10-30 mobile audit (375/360px) — header, menus, touch targets */
html body .v2-nav .langbtn{position:relative}
html body .v2-nav .langbtn .lcode{position:absolute;right:2px;bottom:4px;min-width:16px;height:14px;padding:0 3px;border-radius:7px;background:var(--ink);color:#fff;font:700 9.5px/14px var(--ui);font-style:normal;text-align:center;pointer-events:none}
html body .v2-nav .langbtn b + .lcode,html body .oknav .langbtn .lcode{display:none}
html body .langbox>small{font-size:12px;letter-spacing:.01em;text-transform:none}
html body .langbox .tagx{font-size:12px}
html body .langbox p{font-size:12.5px}
html body .v2-mi b{color:var(--ink)}
html body .v2-sheet .hd a{display:inline-flex;align-items:center;min-height:44px;padding:0 4px}
@media (max-width:480px){
  html body .v2-mb{min-height:44px}
  html body .v2-right .oklink{display:inline-flex;align-items:center;min-height:44px;padding:0 6px;font-size:13px;font-weight:600;white-space:nowrap}
  html:is([lang=ru],[lang=fr],[lang=es],[lang=vi]) body .v2-menus{gap:6px}
  html:is([lang=ru],[lang=fr],[lang=es],[lang=vi]) body .v2-mb{padding:0 10px;font-size:13px;gap:6px}
  html:is([lang=ru],[lang=fr],[lang=es],[lang=vi]) body .v2-mb .dot{width:8px;height:8px}
}
@media (max-width:400px){
  html body .v2-menus{gap:6px}
  html body .v2-mb{padding:0 9px 0 8px;gap:6px}
  html:is([lang=ru],[lang=fr],[lang=es],[lang=vi]) body .v2-right .oklink{display:none}
  html:is([lang=ru],[lang=fr],[lang=es],[lang=vi]) body .v2-mb .dot{display:none}
}

/* 7 · 2026-10-30 mobile audit — WhatsApp button, 44px touch targets, 12px text floor (phones) */
@media (max-width:640px){
  /* the floating WhatsApp button covers the last column of books, readers, grids and tables — on those pages it stays in the footer only */
  body:is([data-page$="-id"],[data-page=sample],[data-page=read],[data-page=grammar],[data-page=live],[data-page=book],[data-page=pricing],[data-page=fan],[data-page=culture],[data-page=korea],[data-page=words]) .fab{display:none!important}
  body:not(:is([data-page$="-id"],[data-page=sample],[data-page=read],[data-page=grammar],[data-page=live],[data-page=book],[data-page=pricing],[data-page=fan],[data-page=culture],[data-page=korea],[data-page=words])) .v2-foot{padding-bottom:84px}
  /* links inside a sentence: a taller hit area, the line itself does not move */
  html body #app :is(p,.note,.lead,small,h3,.okswap,.pdk-from,td,span:not([class])) > a:not(.btn):not([class]){padding-block:12px}
  html body #app a.note{display:inline-flex;align-items:center;min-height:44px}
  html body .v2-foot .v2-fcol>a:not(.v2-brand),html body .v2-foot .v2-fhelp a{display:flex;align-items:center;min-height:44px;padding:0}
  html body .crow .rm{width:44px;height:44px;font-size:20px}
  html body :is(.okpath-c button,.hv-lvhd a,.an-w .an-tok){min-height:44px}
  /* 12px floor */
  html body :is(.price small,.pbd .genre,.pth .ovl,.tryk .lb,.post-c small,.okmpprev small,th small,.pvthumbs span,#pvThumbs span,.cart h2 small,.pdk-from,.nv .e){font-size:12px!important}
  html body :is(.pbd,.pdk,.okprice,.price) s{font-size:12px!important}
  html body :is(.hv-ph,.hv-pg) small,html body .rtabs button small,html body .cbox h2 small,html body .pvw .pages button span,html body .rmore s{font-size:12px!important}
  html body #app :is(p,.note,.lead,small,h3,.okswap,.pdk-from,td,span:not([class])) > a:not(.btn):not([class]){padding-block:14px}
}

/* 8 · speaker buttons (grammar examples, the Student Book, words): a 44px hit area around the small icon, the line does not grow */
@media (max-width:640px){
  html body :is(button.say,button.spk,button.w2-say,.tb2 button.say,.wbi button.say){position:relative}
  html body :is(button.say,button.spk,button.w2-say,.tb2 button.say,.wbi button.say)::after{content:"";position:absolute;inset:-11px}
}

/* 9 · 2026-10-30 mobile audit — more section labels in sentence case (home, cart, My page, shop, sample, test, Student Book contents) */
html body :is(.cm-free b,.hv-mgt b,.hv-mast,.hv-mast small,.v2home th,.cbox h2 small,.okmpprev small,.lsel b,.tb2-toc h4,.pbd .genre,.tryk .lb,.quiz .qn,.res .qn,.athd,.atmid .qn,.post-c small,.pinned,.okauthbox .okey){text-transform:none!important;letter-spacing:.005em!important}
/* shop detail lists that are not steps: no numbers */
html body .parts.nonum i{display:none}html body .parts.nonum>div{grid-template-columns:1fr}

/* 10 · 2026-10-30 mobile audit — shop */
@media (max-width:640px){
  html body .bkstat{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  html body .cartbar{position:sticky;bottom:10px;z-index:40;box-shadow:0 6px 18px rgba(0,0,0,.18)}
  html body .gateback{margin:0 0 6px}
  html body .gatetitle{margin:4px 0 2px;font-size:15px}
}
html body .gatetitle span{margin-left:6px;color:var(--mute,#6b7280)}
@media (max-width:480px){
  html body .v2-right:has(.bagbtn) .oklink{display:none}   /* basket + log in + sign up do not fit one phone row; the sign-up page links to log in */
  html body .quiz{min-height:72vh}   /* the level test can scroll its question under the header */
}
html body :is(.pin,span.pin){text-transform:none!important;letter-spacing:.005em!important}