/* v2read.css — Haeyo Korean v2, phase 3 slice ③c (2026-10-23, branch v2-apply). Load AFTER v2site.css + v2spec.css (+ v2lesson/v2culture).
   The look of site3/mock/v2/read.html for the live Read pages, without touching their logic (app.js rdShelf · readPage):
     #/read              the novels shelf  (.ph2.rdph head · .rdsteps · .rdlv level chips · .rdgrp > .rdgh + .rdbks > a.rdbk)
     #/read?id=…&ch=N    the open book     (.rdhead · .rdchs/.rdc chapter chips · section.rdsec > .rdgrid > .rdbook + aside.rdpanel)
   Cream paper with faint shelf lines on top, a wooden board under the head, every level a shelf whose plank runs under the covers
   (the real cover images, img/pv_*.jpg — no typographic covers here). Accent = butter (Read).
   The magazine's edition rows (English · Korean Levels 3–4 · 5–6) are styled inside study.js (.sk .mg-eds); this file does not touch #/korea.
   app.css loads first and uses plain class selectors, so equal-specificity rules here win by order. Phone first (375); 720 and 1024 add on.
   Nothing a learner reads is under 12px; everything you tap is ≥44px tall. */

/* ================= 0 · scope tokens ================= */
.ph2.rdph,.rdsteps,.rdhead,section.rdsec,section:has(>.wrap>.rdlv){--ac:var(--butter);--ac-d:var(--butter-d);--ac-l:var(--butter-l);
  --rd-plank:linear-gradient(180deg,#eadcb8,#d6c290);--rd-plank-top:#c9b27b;--rd-plank-sh:0 7px 10px -7px rgba(90,64,0,.45)}

/* ================= 1 · shelf head: cream paper, station plate, 읽 sign, board ================= */
.ph2.rdph{position:relative;overflow:hidden;text-align:left;background:var(--cream);border-bottom:0;padding:24px 0 40px !important}
.ph2.rdph:before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(180deg,transparent 0,transparent 63px,rgba(138,100,0,.13) 63px,rgba(138,100,0,.13) 64px);pointer-events:none}
.ph2.rdph:after{content:"";position:absolute;left:0;right:0;bottom:0;height:12px;background:linear-gradient(180deg,#e9dcbc,#d8c79c);border-top:1px solid #cdb886;box-shadow:0 6px 10px -6px rgba(90,64,0,.35)}
.ph2.rdph .wrap{position:relative;text-align:left}
/* the site sign 읽 sits top right; the plate, title and lead keep clear of it */
.ph2.rdph .wrap:before{content:none!important;position:absolute;top:0;right:var(--gut);font:900 64px/.86 var(--kr);letter-spacing:-.06em;color:var(--butter-d);pointer-events:none}
.ph2.rdph .wrap>*{position:relative}
.ph2.rdph .eyebrow{max-width:calc(100% - 76px)}
/* eyebrow = station plate */
.ph2.rdph .eyebrow{display:inline-flex;align-items:center;flex-wrap:wrap;gap:6px 8px;min-height:44px;margin:0;padding:6px 14px 6px 10px;border:2px solid var(--ink);border-radius:9999px;background:#fff;font:700 var(--fs-12)/1.2 var(--ui);letter-spacing:.12em;text-transform:uppercase;color:var(--ink)}
.ph2.rdph .eyebrow:before{content:"";width:12px;height:12px;border-radius:50%;background:var(--butter);box-shadow:0 0 0 2px var(--butter-d);flex:none}
.ph2.rdph .eyebrow .kr{font-family:var(--kr);letter-spacing:0;text-transform:none;color:var(--mute)}
.ph2.rdph .beta{margin-left:0;padding:3px 8px;border-radius:6px;background:var(--butter);color:var(--ink);font:700 var(--fs-12)/1.2 var(--ui);letter-spacing:.04em;vertical-align:0}
.ph2.rdph h1{margin:14px 0 0;font:900 clamp(32px,8.6vw,64px)/1.04 var(--ui);letter-spacing:-.04em;color:var(--ink);text-align:left}
.ph2.rdph .lead{margin:14px 0 0;max-width:40em;font:400 var(--fs-16)/var(--lh-body) var(--ui);color:var(--ink2);text-align:left}

/* ================= 2 · three steps ================= */
.rdsteps{padding-block:24px 8px;background:#fff}
.rdsteps ol{gap:10px}
.rdsteps li{align-content:start;background:var(--cream);border:1px solid var(--line);border-radius:var(--rd-s);padding:14px 16px;gap:2px 12px}
.rdsteps li i{font:700 28px/1 var(--hand);color:var(--butter-d)}
.rdsteps li b{font:700 var(--fs-16)/1.3 var(--ui);color:var(--ink)}
.rdsteps li span{font:400 var(--fs-14)/1.5 var(--ui);color:var(--ink2)}

/* ================= 3 · level filter chips ================= */
section:has(>.wrap>.rdlv){padding-top:18px !important;padding-bottom:56px;background:#fff}
.chips.cat.rdlv{display:flex;flex-wrap:nowrap;gap:8px;margin:0 0 24px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding:2px}
.chips.cat.rdlv::-webkit-scrollbar{display:none}
.rdlv a.chipb{flex:none;height:auto;min-height:44px;padding:0 16px;border-radius:9999px;border:1px solid var(--line2);background:#fff;color:var(--ink);font:600 var(--fs-14)/1 var(--ui);letter-spacing:0;white-space:nowrap}
.rdlv a.chipb:hover{border-color:var(--ink);background:#fff}
.rdlv a.chipb.on{background:var(--ink);border-color:var(--ink);color:#fff}

/* ================= 4 · one shelf per level ================= */
.rdgrp{margin:0 0 40px}
.rdgh{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 8px;margin:0 0 14px;font:800 var(--fs-20)/1.2 var(--ui);letter-spacing:-.02em;color:var(--ink)}
.rdgh:before{content:"";align-self:center;width:12px;height:12px;border-radius:50%;background:var(--butter-d);flex:none}
.rdgh .kr{font:700 var(--fs-16)/1.2 var(--kr);color:var(--mute)}
/* the books stand side by side with no gap, so the plank under each cover reads as one board */
.rdbks{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:0;row-gap:28px;gap:28px 0}
.rdbks .rdbk.rv{opacity:1;transform:none}   /* books on a shelf do not fade in */
.rdbk{display:flex;flex-direction:column;background:none;border:0;border-radius:0;overflow:visible;color:var(--ink);text-decoration:none;min-width:0}
.rdbk:hover{box-shadow:none;transform:none}
.rdbk .cv{display:block;aspect-ratio:auto;padding:0 6px;background:none;overflow:visible;position:relative;border-bottom:11px solid #d9c696;border-image:var(--rd-plank) 1;box-shadow:var(--rd-plank-sh)}
.rdbk .cv:after{content:"";position:absolute;left:0;right:0;bottom:-11px;height:1px;background:var(--rd-plank-top);opacity:.6}
.rdbk .cv img{position:static;display:block;width:100%;height:auto;aspect-ratio:1500/2128;object-fit:cover;transform:none;border-radius:3px 8px 8px 3px;box-shadow:inset 0 0 0 1px rgba(11,11,12,.12),0 12px 18px -12px rgba(11,11,12,.55);background:var(--cream2);transition:transform .2s}
.rdbk:hover .cv img,.rdbk:focus-visible .cv img{transform:translateY(-4px)}
.rdbk .bd{display:grid;gap:4px;padding:12px 6px 0;align-content:start;min-width:0}
.rdbk .lv{justify-self:start;padding:3px 8px;border-radius:6px;background:var(--ink);color:#fff;font:800 var(--fs-12)/1.2 var(--kr);letter-spacing:0}
.rdbk b{margin-top:2px;font:700 var(--fs-14)/var(--lh-snug) var(--kr);color:var(--ink);word-break:keep-all;overflow-wrap:anywhere}
.rdbk em{font:600 var(--fs-12)/1.3 var(--ui);font-style:normal;color:var(--ink2);overflow-wrap:anywhere}
.rdbk small{font:500 var(--fs-12)/1.3 var(--ui);letter-spacing:0;text-transform:none;color:var(--mute);overflow-wrap:anywhere}
.rdbk .fr{justify-self:start;margin-top:4px;padding:3px 8px;border-radius:6px;background:var(--green-l);color:var(--green);font:700 var(--fs-12)/1.3 var(--ui)}
.rdbk .fr.own{background:var(--butter-l);color:var(--butter-d)}
.rdnote{margin-top:8px;padding:12px 14px;border-left:3px solid var(--butter-d);background:var(--cream);border-radius:0 12px 12px 0;font:400 var(--fs-14)/1.55 var(--ui);color:var(--ink2);max-width:52em}

/* ================= 5 · the open book: head ================= */
.rdhead{background:var(--butter-l);border-bottom:1px solid var(--line)}
.rdhead .wrap{gap:4px 18px;padding-block:8px 14px}
.rdhead .wrap>a.note{display:inline-flex;align-items:center;min-height:44px;font:600 var(--fs-14)/1.2 var(--ui);color:var(--ink);text-decoration:none}
.rdhead .wrap>a.note:hover{text-decoration:underline}
.rdtitle{flex:1 1 100%;align-items:center;gap:8px 12px;order:2}
.rdtitle .lv{display:inline-flex;align-items:center;min-height:32px;padding:0 12px;border-radius:9999px;border:2px solid var(--ink);background:#fff;color:var(--ink);font:800 var(--fs-14)/1 var(--kr)}
.rdtitle b{font:900 clamp(24px,6.4vw,40px)/1.15 var(--kr);letter-spacing:-.03em;color:var(--ink);overflow-wrap:anywhere}
.rdtitle em{flex-basis:100%;font:600 var(--fs-14)/1.35 var(--ui);color:var(--ink2)}
.rdsw{order:3;min-height:44px;gap:10px;font:600 var(--fs-14)/1.2 var(--ui);color:var(--ink)}
.rdsw input{appearance:none;-webkit-appearance:none;width:46px;height:28px;margin:0;border-radius:9999px;background:var(--line2);position:relative;flex:none;cursor:pointer;transition:background .2s}
.rdsw input:after{content:"";position:absolute;left:3px;top:3px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .2s}
.rdsw input:checked{background:var(--ink)}.rdsw input:checked:after{transform:translateX(18px)}
@media (min-width:1024px){
  .rdhead .wrap{padding-block:12px 18px}
  .rdtitle{flex:1 1 0;order:2}
  .rdhead .wrap>a.note{flex-basis:100%;order:1}
  .rdtitle em{flex-basis:auto}
}

/* ================= 6 · the open book: chapter chips (underline-free pills, 44px) ================= */
section.rdsec{background:var(--cream);padding-block:18px 64px}
.rdchs{gap:8px;margin:0 0 18px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding:2px}
.rdchs::-webkit-scrollbar{display:none}
.rdchs small{flex:none;font:700 var(--fs-12)/1 var(--ui);letter-spacing:.12em;color:var(--mute);margin-right:4px}
.rdc{flex:none;min-width:44px;height:44px;padding:0 12px;border:1px solid var(--line2);background:#fff;color:var(--ink);font:700 var(--fs-14)/1 var(--ui)}
.rdc:hover{border-color:var(--ink)}
.rdc.on{background:var(--ink);border-color:var(--ink);color:#fff}
.rdc.lock{background:var(--cream2);border-color:var(--line);color:var(--mute)}
.rdc.lock i{font-size:var(--fs-12)}
@media (max-width:640px){.rdchs{gap:6px}.rdc{min-width:44px;height:44px;font-size:var(--fs-14);padding:0 10px}}

/* ================= 7 · the page and the explanation card ================= */
.rdbook{background:#fff;border:1px solid #f1dc9a;border-radius:var(--rd-m);box-shadow:var(--sh)}
.rdcv1{border-radius:3px 12px 12px 3px;box-shadow:0 12px 24px -14px rgba(11,11,12,.5)}
.rdch small{font:700 var(--fs-12)/1.2 var(--ui);letter-spacing:.14em;color:var(--butter-d)}
.rdwho span{font:700 var(--fs-12)/1.3 var(--ui);background:var(--butter-l);color:var(--butter-d)}
.rdaud{border-color:#f1dc9a;background:rgba(255,255,255,.96)}
.rdaud-btn{min-height:44px;height:44px;background:var(--ink);font:700 var(--fs-14)/1 var(--ui)}
.rdmore{border:1.5px dashed var(--line2);border-radius:var(--rd-s);background:var(--cream)}
.rdmore b{font:800 var(--fs-16)/1.3 var(--ui);color:var(--ink)}
.rdmore span{font:400 var(--fs-14)/1.5 var(--ui);color:var(--ink2)}
.rdmore .btn,.rdlock .btn{min-height:44px}
.rdlock{border:1px solid var(--line);border-radius:var(--rd-m);background:#fff;box-shadow:var(--sh)}
.rdlock h2{font-family:var(--kr);font-weight:900;letter-spacing:-.03em;color:var(--ink)}

.rdpanel{border:1px solid var(--line2);border-radius:var(--rd-m);background:#fff;box-shadow:var(--sh)}
.rdpanel:before{content:"";display:block;height:6px;border-radius:var(--rd-m) var(--rd-m) 0 0;background:var(--butter)}
.rdpin{padding:16px 18px 20px}
.rdclose{width:44px;height:44px;right:6px;top:10px;border-radius:12px;color:var(--ink)}
.rdclose:hover{background:var(--cream)}
.rdp-intro b{font:800 var(--fs-18)/1.3 var(--ui);color:var(--ink)}
.rdp-intro p{font:400 var(--fs-14)/1.5 var(--ui);color:var(--ink2)}
.rdp-sec h3{font:700 var(--fs-12)/1.2 var(--ui);letter-spacing:.12em;color:var(--mute)}
.rdp-sec .note{font-size:var(--fs-14)}
.rdgk{min-height:44px;padding:6px 12px;border-color:var(--line2);font-size:var(--fs-14)}
.rdgk small,.rdgk em{font-size:var(--fs-12)}
.rdgk.on{background:var(--butter);border-color:var(--butter-d)}
.rdlvg > summary{min-height:44px;font-size:var(--fs-14)}
.rdlvg > summary small,.rdlvh{font-size:var(--fs-12)}
.rdp-nav{padding-right:46px}
.rdp-nav span{font:700 var(--fs-12)/1.2 var(--ui);color:var(--mute)}
.rdp-nav .btn{height:auto;min-height:44px;padding:0 14px;font-size:var(--fs-14)}
.rdp-s{background:var(--butter-l);border:1px solid #f1dc9a;border-radius:var(--rd-s)}
.rdp-s .rdsay,.rdp-s .rdtrb{min-height:44px;padding:0 14px;border-color:var(--line2);font:700 var(--fs-14)/1 var(--ui);color:var(--ink)}
.rdtr{font-size:var(--fs-14)}
.rg{border-color:var(--line);border-radius:var(--rd-s)}
.rg.basic{background:var(--cream)}
.rg .lvl,.rw .lvl{font-size:var(--fs-12);background:var(--cream2);color:var(--ink2)}
.sib{min-height:44px;padding:0 12px;font-size:var(--fs-14);border-color:var(--line2);border-radius:9999px}
.rdp-fix{font-size:var(--fs-12)}
@media (max-width:599px), (max-width:999px) and (max-aspect-ratio:3999/5000){
  .rdpanel{border-radius:var(--rd-m) var(--rd-m) 0 0}
  .rdpanel:before{height:0}
  .rdpanel .rdclose{display:grid;place-items:center}
}

/* ================= 8 · 720 · 1024 ================= */
@media (min-width:720px){
  .ph2.rdph{padding:40px 0 52px !important}
  .ph2.rdph .wrap:before{font-size:96px}
  .ph2.rdph .eyebrow{max-width:calc(100% - 110px)}
  .rdbks{grid-template-columns:repeat(4,minmax(0,1fr))}
  .rdbk .cv{padding:0 12px}
  .rdbk .bd{padding:14px 12px 0}
  .rdbk b{font-size:var(--fs-16)}
  .rdbk em{font-size:var(--fs-14)}
}
@media (min-width:1024px){
  .ph2.rdph{padding:56px 0 64px !important}
  .ph2.rdph .lead{font-size:var(--fs-18);max-width:36em}
  .ph2.rdph .wrap:before{top:auto;bottom:-20px;font-size:200px}
  .ph2.rdph .eyebrow{max-width:none}
  .ph2.rdph h1,.ph2.rdph .lead{max-width:calc(100% - 240px)}
  .rdbks{grid-template-columns:repeat(5,minmax(0,1fr))}
  .rdgrp{margin-bottom:48px}
}
@media (min-width:1200px){.rdbks{grid-template-columns:repeat(6,minmax(0,1fr))}}

/* 2026-10-29 (V247): the hero = the words, then the reading demo (tiles.js .rdd, a reader window with tabs) across the full width; no big 읽 */
.ph2.rdph .rdph-in{display:grid;grid-template-columns:1fr;gap:22px}
.ph2.rdph .eyebrow{max-width:100%}
.ph2.rdph .rdph-in>div:first-child{max-width:760px}

/* 2026-10-29: beside the text, the grammar panel sticks just below the sticky menu bar (it used to slide under it: the bar is 97px tall
   below 1024px, where it has two rows, and 69px above). Same query as rdSide() in app.js. */
@media (min-width:1000px), (min-width:600px) and (min-aspect-ratio:4/5){
  .rdpanel{top:110px;max-height:calc(100vh - 124px)}
}
@media (min-width:1024px){
  .rdpanel{top:82px;max-height:calc(100vh - 96px)}
}