/* ============================================================
   정형외과학 8판 · Interactive Study
   Aesthetic: "Clinical Precision" — 임상 정밀 (white/blue medical)
   ============================================================ */

:root {
  /* paper & surface */
  --paper:    #F3F6FB;
  --paper-2:  #E9EFF7;
  --surface:  #FFFFFF;
  --surface-2:#FBFCFE;

  /* ink */
  --ink:      #0C1A2B;
  --ink-2:    #44566A;
  --ink-3:    #7F8D9E;
  --ink-4:    #AAB6C4;

  /* lines */
  --line:     #E3EAF3;
  --line-2:   #D2DCE9;

  /* clinical blue */
  --pri:      #1559D6;
  --pri-d:    #0B3C9E;
  --pri-l:    #4F86EE;
  --pri-t:    #E9F1FE;
  --pri-t2:   #D8E6FD;

  /* medical teal (figures / data) */
  --teal:     #0B8E95;
  --teal-t:   #DEF3F3;

  /* amber (term highlight) */
  --amber:    #B9740A;
  --amber-t:  #FCEFCE;
  --amber-t2: #F8E1A8;

  /* coral (practice / quiz) */
  --coral:    #DA2B62;
  --coral-d:  #B01B4C;
  --coral-t:  #FCE5EC;

  /* emerald (key learning / done) */
  --emerald:  #0A8E5F;
  --emerald-t:#DCF2E8;

  --radius:   18px;
  --radius-s: 12px;
  --radius-xs:8px;

  --shadow-s: 0 1px 2px rgba(13,30,55,.05), 0 2px 6px rgba(13,30,55,.04);
  --shadow:   0 4px 14px rgba(13,30,55,.07), 0 12px 30px rgba(13,30,55,.06);
  --shadow-l: 0 10px 30px rgba(13,30,55,.12), 0 30px 70px rgba(13,30,55,.14);
  --shadow-pri: 0 10px 30px rgba(21,89,214,.18);

  --ff-sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", Roboto, "Malgun Gothic", sans-serif;
  --ff-mono: "IBM Plex Mono", "SFMono-Regular", ui-monospace, Menlo, monospace;
  --ff-serif:"Newsreader", "Pretendard Variable", Pretendard, serif;

  --maxw: 1240px;
  --read: 760px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--ff-sans);
  color: var(--ink);
  background: var(--paper);
  font-size: 16px;
  line-height: 1.72;
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* blueprint backdrop */
body::before {
  content: "";
  position: fixed; inset: 0;
  z-index: -2;
  background:
    radial-gradient(1200px 600px at 12% -8%, rgba(21,89,214,.10), transparent 60%),
    radial-gradient(1000px 560px at 100% 0%, rgba(11,142,149,.08), transparent 55%),
    var(--paper);
}
body::after {
  content: "";
  position: fixed; inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(21,89,214,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(21,89,214,.045) 1px, transparent 1px);
  background-size: 34px 34px;
  -webkit-mask-image: radial-gradient(ellipse 100% 80% at 50% 0%, #000 30%, transparent 78%);
          mask-image: radial-gradient(ellipse 100% 80% at 50% 0%, #000 30%, transparent 78%);
  pointer-events: none;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; }
::selection { background: var(--pri-t2); color: var(--pri-d); }

/* ---------- scrollbar ---------- */
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 8px; border: 3px solid var(--paper); }
::-webkit-scrollbar-thumb:hover { background: var(--ink-4); }

/* ============================================================
   Top bar
   ============================================================ */
.topbar {
  position: sticky; top: 0; z-index: 60;
  display: flex; align-items: center; gap: 18px;
  height: 62px; padding: 0 clamp(16px, 4vw, 34px);
  background: rgba(255,255,255,.78);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 11px; cursor: pointer; }
.brand .mark {
  width: 30px; height: 30px; border-radius: 9px;
  background: linear-gradient(135deg, var(--pri), var(--teal));
  display: grid; place-items: center; flex: none;
  box-shadow: var(--shadow-pri);
}
.brand .mark svg { width: 18px; height: 18px; }
.brand .bt { display: flex; flex-direction: column; line-height: 1.05; }
.brand .bt b { font-weight: 800; font-size: 15px; letter-spacing: -.02em; }
.brand .bt span { font-family: var(--ff-mono); font-size: 9.5px; letter-spacing: .12em; color: var(--ink-3); text-transform: uppercase; }
.topbar .spacer { flex: 1; }

.topsearch {
  display: flex; align-items: center; gap: 8px;
  background: var(--paper); border: 1px solid var(--line-2);
  border-radius: 999px; padding: 7px 14px; min-width: 200px;
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.topsearch:focus-within { border-color: var(--pri-l); box-shadow: 0 0 0 4px var(--pri-t); background: #fff; }
.topsearch svg { width: 15px; height: 15px; color: var(--ink-3); flex: none; }
.topsearch input { border: 0; background: transparent; outline: 0; font-family: inherit; font-size: 13.5px; width: 100%; color: var(--ink); }
.topsearch input::placeholder { color: var(--ink-4); }

.topbtn {
  display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid var(--line-2); background: #fff;
  color: var(--ink-2); font-weight: 600; font-size: 13px;
  padding: 8px 14px; border-radius: 999px; transition: .18s;
}
.topbtn:hover { border-color: var(--pri-l); color: var(--pri-d); transform: translateY(-1px); }
.topbtn svg { width: 15px; height: 15px; }

/* reading progress (chapter) */
.readbar { position: fixed; top: 0; left: 0; height: 3px; width: 0%; z-index: 70;
  background: linear-gradient(90deg, var(--pri), var(--teal)); box-shadow: 0 0 12px rgba(21,89,214,.5);
  transition: width .12s linear; }

/* ============================================================
   Layout
   ============================================================ */
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 clamp(16px, 4vw, 34px); }
.wrap.wide { max-width: min(1480px, 94vw); }
.view { animation: viewin .5s cubic-bezier(.2,.7,.2,1); }
@keyframes viewin { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ============================================================
   Library — hero
   ============================================================ */
.hero { position: relative; padding: clamp(46px, 8vw, 92px) 0 38px; }
.hero .eyebrow {
  font-family: var(--ff-mono); font-size: 12px; letter-spacing: .26em; text-transform: uppercase;
  color: var(--pri); font-weight: 600; display: flex; align-items: center; gap: 12px;
}
.hero .eyebrow::before { content: ""; width: 34px; height: 1.5px; background: var(--pri); display: inline-block; }
.hero h1 {
  font-size: clamp(38px, 7vw, 76px); line-height: 1.02; letter-spacing: -.035em;
  font-weight: 800; margin: 20px 0 0; color: var(--ink);
}
.hero h1 .en { display: block; font-family: var(--ff-serif); font-weight: 400; font-style: italic;
  font-size: clamp(20px, 3.2vw, 34px); color: var(--ink-3); letter-spacing: -.01em; margin-top: 6px; }
.hero p.lead { max-width: 560px; margin: 22px 0 0; font-size: 17px; color: var(--ink-2); line-height: 1.7; }

.hero .stats { display: flex; flex-wrap: wrap; gap: 30px; margin: 34px 0 0; }
.hero .stat b { font-size: clamp(28px, 4vw, 40px); font-weight: 800; letter-spacing: -.03em;
  background: linear-gradient(120deg, var(--pri), var(--teal)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.hero .stat span { display: block; font-family: var(--ff-mono); font-size: 10.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-3); margin-top: 2px; }

.hero .cta { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 36px; }
.btn-pri {
  display: inline-flex; align-items: center; gap: 9px; white-space: nowrap;
  background: linear-gradient(135deg, var(--pri), var(--pri-d));
  color: #fff; font-weight: 700; font-size: 15px; padding: 14px 24px;
  border-radius: 999px; border: 0; box-shadow: var(--shadow-pri); transition: .2s;
}
.btn-pri:hover { transform: translateY(-2px); box-shadow: 0 14px 36px rgba(21,89,214,.32); }
.btn-pri svg, .btn-ghost svg { width: 17px; height: 17px; flex: none; }
.btn-ghost { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; background: #fff; color: var(--ink-2);
  font-weight: 600; font-size: 15px; padding: 14px 22px; border-radius: 999px; border: 1px solid var(--line-2); transition: .2s; }
:root[data-theme="dark"] .btn-ghost { background: var(--surface); }
.btn-ghost:hover { border-color: var(--pri-l); color: var(--pri-d); transform: translateY(-2px); }

/* pulse line */
.pulse { position: absolute; right: 0; top: clamp(60px, 12vw, 130px); width: min(46%, 540px); height: 150px; opacity: .9; pointer-events: none; }
.pulse svg { width: 100%; height: 100%; overflow: visible; }
.pulse path { fill: none; stroke: url(#pgrad); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1400; stroke-dashoffset: 1400; animation: trace 3.4s cubic-bezier(.5,0,.2,1) .4s forwards; }
@keyframes trace { to { stroke-dashoffset: 0; } }
.pulse .dot { fill: var(--coral); filter: drop-shadow(0 0 6px rgba(218,43,98,.7)); opacity: 0; animation: blip 1.6s ease-out 3.2s infinite; }
@keyframes blip { 0%{opacity:0; r:3;} 30%{opacity:1; r:6;} 100%{opacity:0; r:14;} }

/* ============================================================
   Library — parts & chapter cards
   ============================================================ */
.partsec { margin: 46px 0 0; }
.parthead { display: flex; align-items: baseline; gap: 14px; margin: 0 0 20px; padding-bottom: 14px; border-bottom: 1.5px solid var(--line); }
.parthead .pn { font-family: var(--ff-mono); font-size: 12px; color: var(--pri); font-weight: 600; letter-spacing: .1em; }
.parthead h2 { font-size: clamp(20px, 3vw, 26px); font-weight: 800; letter-spacing: -.025em; margin: 0; }
.parthead .pen { font-family: var(--ff-serif); font-style: italic; color: var(--ink-3); font-size: 15px; }
.parthead .pcount { margin-left: auto; font-family: var(--ff-mono); font-size: 11.5px; color: var(--ink-3); letter-spacing: .06em; }

.cardgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 16px; }

.chcard {
  position: relative; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 20px 20px 18px; overflow: hidden;
  transition: transform .26s cubic-bezier(.2,.7,.2,1), box-shadow .26s, border-color .26s;
  cursor: pointer; box-shadow: var(--shadow-s);
}
.chcard::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: linear-gradient(var(--pri), var(--teal)); transform: scaleY(0); transform-origin: top; transition: transform .3s; }
.chcard:hover { transform: translateY(-5px); box-shadow: var(--shadow-l); border-color: transparent; }
.chcard:hover::before { transform: scaleY(1); }
.chcard .top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.chcard .num { font-family: var(--ff-mono); font-size: 13px; font-weight: 600; color: var(--pri);
  background: var(--pri-t); padding: 3px 9px; border-radius: 7px; letter-spacing: .02em; }
.chcard .ring { width: 30px; height: 30px; flex: none; }
.chcard h3 { font-size: 17px; font-weight: 700; letter-spacing: -.02em; margin: 14px 0 3px; line-height: 1.32; }
.chcard .ten { font-family: var(--ff-serif); font-style: italic; font-size: 13px; color: var(--ink-3); line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.6em; }
.chcard .chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.chip { font-family: var(--ff-mono); font-size: 10.5px; letter-spacing: .03em; color: var(--ink-2);
  background: var(--paper); border: 1px solid var(--line); border-radius: 6px; padding: 3px 7px; display: inline-flex; gap: 4px; align-items: center; }
.chip svg { width: 11px; height: 11px; color: var(--ink-3); }
.chcard.soon { opacity: .62; }
.chcard.soon:hover { transform: translateY(-2px); }
.chcard .badge-soon, .chcard .badge-go { font-family: var(--ff-sans); font-size: 11px; font-weight: 700;
  letter-spacing: 0; white-space: nowrap; flex: none; line-height: 1.4; border-radius: 7px; padding: 3px 9px; display: inline-block; }
.chcard .badge-soon { color: var(--ink-3); border: 1px dashed var(--line-2); }
.chcard .badge-go { color: #fff; background: var(--emerald); }
.chcard.done .badge-done { color: var(--emerald); }

/* count-up & reveal */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s cubic-bezier(.2,.7,.2,1), transform .6s cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity: 1; transform: none; }
.reveal[data-d="1"]{ transition-delay:.05s;} .reveal[data-d="2"]{transition-delay:.1s;}
.reveal[data-d="3"]{ transition-delay:.15s;} .reveal[data-d="4"]{transition-delay:.2s;}
.reveal[data-d="5"]{ transition-delay:.25s;} .reveal[data-d="6"]{transition-delay:.3s;}

/* ============================================================
   Chapter reader
   ============================================================ */
.chread { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: clamp(56px, 5vw, 92px); align-items: start;
  padding: 30px 0 90px; }
@media (max-width: 1100px){ .chread { gap: clamp(40px, 4vw, 60px); } }
@media (max-width: 940px){ .chread { grid-template-columns: 1fr; gap: 0; } .toc { display: none; } }

/* TOC */
.toc { position: sticky; top: 84px; align-self: start; max-height: calc(100vh - 110px); overflow-y: auto;
  padding-right: 24px; border-right: 1px solid var(--line); }
.toc .tlabel { font-family: var(--ff-mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-3); margin: 0 0 12px; }
.toc a { display: block; font-size: 13px; color: var(--ink-3); padding: 6px 0 6px 14px; line-height: 1.4;
  border-left: 2px solid var(--line); transition: .18s; position: relative; }
.toc a:hover { color: var(--ink); border-color: var(--line-2); }
.toc a.active { color: var(--pri-d); border-color: var(--pri); font-weight: 600; }
.toc a.tsp { color: var(--ink-2); font-weight: 600; margin-top: 10px; }
.toc .tprog { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.toc .tprog .lab { font-family: var(--ff-mono); font-size: 10px; letter-spacing: .1em; color: var(--ink-3); text-transform: uppercase; }
.toc .tprog .track { height: 6px; background: var(--paper-2); border-radius: 99px; margin-top: 8px; overflow: hidden; }
.toc .tprog .fill { height: 100%; width: 0%; background: linear-gradient(90deg, var(--pri), var(--teal)); border-radius: 99px; transition: width .3s; }
.toc .tprog .pct { font-family: var(--ff-mono); font-size: 11px; color: var(--ink-2); margin-top: 6px; }

/* article */
.article { min-width: 0; }
.crumb { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-3); margin-bottom: 18px; }
.crumb a:hover { color: var(--pri-d); }
.crumb .sep { color: var(--ink-4); }

.chhero { position: relative; margin-bottom: 30px; }
.chhero .eyebrow { font-family: var(--ff-mono); font-size: 11.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--teal); font-weight: 600; }
.chhero .bignum { position: absolute; right: -4px; top: -30px; font-family: var(--ff-mono); font-weight: 700;
  font-size: clamp(70px, 14vw, 150px); line-height: 1; color: var(--pri); opacity: .07; letter-spacing: -.04em; pointer-events: none; }
.chhero h1 { font-size: clamp(30px, 5vw, 50px); font-weight: 800; letter-spacing: -.035em; line-height: 1.06; margin: 10px 0 0; }
.chhero .ten { font-family: var(--ff-serif); font-style: italic; font-size: clamp(16px, 2.4vw, 22px); color: var(--ink-3); margin-top: 8px; }
.chhero .meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.chhero .src { font-size: 12px; color: var(--ink-4); margin-top: 14px; font-family: var(--ff-mono); letter-spacing: .02em; }

/* overview card */
.ovcard { background: linear-gradient(160deg, #fff, var(--surface-2)); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 26px 28px; box-shadow: var(--shadow-s); margin-bottom: 40px; position: relative; overflow: hidden; }
.ovcard::after { content: ""; position: absolute; right: -40px; top: -40px; width: 180px; height: 180px; border-radius: 50%;
  background: radial-gradient(circle, rgba(11,142,149,.10), transparent 70%); }
.ovcard .otitle { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 18px; letter-spacing: -.02em; margin-bottom: 6px; }
.ovcard .otitle .ic { width: 28px; height: 28px; border-radius: 8px; background: var(--teal-t); color: var(--teal); display: grid; place-items: center; }
.ovcard .otitle .ic svg { width: 16px; height: 16px; }
.ovcard .ointro { color: var(--ink-2); font-size: 14.5px; margin: 0 0 16px; }
.ovlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.ovlist li { position: relative; padding-left: 26px; font-size: 15px; color: var(--ink); line-height: 1.66; }
.ovlist li::before { content: ""; position: absolute; left: 4px; top: 9px; width: 7px; height: 7px; border-radius: 50%;
  background: var(--pri); box-shadow: 0 0 0 4px var(--pri-t); }

/* subtopic section */
.subsec { margin: 0 0 18px; scroll-margin-top: 84px; }
.subhead { display: flex; align-items: flex-start; gap: 14px; margin: 38px 0 18px; }
.subhead .sn { flex: none; font-family: var(--ff-mono); font-size: 14px; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, var(--pri), var(--pri-d)); width: 34px; height: 34px; border-radius: 10px;
  display: grid; place-items: center; box-shadow: var(--shadow-pri); margin-top: 2px; }
.subhead .st { min-width: 0; }
.subhead h2 { font-size: clamp(19px, 2.6vw, 24px); font-weight: 800; letter-spacing: -.025em; line-height: 1.28; margin: 0; }
.subhead .sken { font-family: var(--ff-serif); font-style: italic; color: var(--ink-3); font-size: 14.5px; margin-top: 2px; }

/* bullet rendering */
.blk { margin: 0 0 14px; }
.bul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.bul > li { position: relative; padding-left: 24px; font-size: 15.5px; line-height: 1.74; color: var(--ink); }
.bul > li::before { content: ""; position: absolute; left: 6px; top: 11px; width: 6px; height: 6px; border-radius: 2px;
  background: var(--pri); transform: rotate(45deg); }
.bul li.grp { padding-left: 4px; }
.bul li.grp::before { display: none; }
.bul li.grp .ln { font-weight: 700; color: var(--pri-d); }
.ln { display: inline; }
.subbul { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 7px; }
.subbul li { position: relative; padding-left: 18px; font-size: 14.5px; color: var(--ink-2); line-height: 1.62; }
.subbul li::before { content: ""; position: absolute; left: 3px; top: 10px; width: 5px; height: 1.5px; background: var(--ink-4); }

/* term highlight & english */
.term { font-weight: 700; color: var(--ink); background: linear-gradient(transparent 62%, var(--amber-t2) 62%);
  padding: 0 1px; border-radius: 2px; }
.en-term { color: var(--teal); font-style: normal; font-weight: 500; }

/* figure */
.figc { margin: 22px 0 26px; }
.figc.w-full { max-width: 100%; }
.figc.w-lg { max-width: 640px; }
.figc.w-md { max-width: 480px; margin-left: auto; margin-right: auto; }
.figc.w-sm { max-width: 360px; margin-left: auto; margin-right: auto; }
.figframe { position: relative; background: #0E1A28; border-radius: 14px; padding: 12px; overflow: hidden;
  border: 1px solid var(--line-2); box-shadow: var(--shadow); cursor: zoom-in; transition: transform .25s, box-shadow .25s; }
.figframe::before { content: ""; position: absolute; inset: 0; border-radius: 14px; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); }
.figframe img { width: 100%; border-radius: 7px; transition: transform .4s cubic-bezier(.2,.7,.2,1); display: block; }
.figframe:hover { transform: translateY(-3px); box-shadow: var(--shadow-l); }
.figframe:hover img { transform: scale(1.018); }
.figframe .zoom { position: absolute; right: 16px; bottom: 16px; width: 30px; height: 30px; border-radius: 8px;
  background: rgba(255,255,255,.16); backdrop-filter: blur(6px); display: grid; place-items: center; opacity: 0; transition: .2s; }
.figframe:hover .zoom { opacity: 1; }
.figframe .zoom svg { width: 15px; height: 15px; color: #fff; }
.figcap { display: flex; gap: 9px; margin-top: 11px; font-size: 13px; color: var(--ink-2); line-height: 1.55; }
.figcap .fnum { flex: none; font-family: var(--ff-mono); font-size: 11px; font-weight: 600; color: var(--teal);
  background: var(--teal-t); padding: 2px 8px; border-radius: 6px; height: fit-content; letter-spacing: .02em; }

/* table */
.tblc { margin: 22px 0 26px; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; box-shadow: var(--shadow-s); background: #fff; }
.tblc .tbltitle { font-weight: 700; font-size: 14px; padding: 13px 18px; background: var(--paper); border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: 8px; }
.tblc .tbltitle .ic { color: var(--teal); display: inline-flex; } .tblc .tbltitle .ic svg { width: 15px; height: 15px; }
.tblscroll { overflow-x: auto; }
.tblc table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.tblc thead th { background: var(--pri-t); color: var(--pri-d); font-weight: 700; text-align: left;
  padding: 11px 16px; white-space: nowrap; border-bottom: 1px solid var(--pri-t2); font-size: 12.5px; }
.tblc tbody td { padding: 10px 16px; border-bottom: 1px solid var(--line); color: var(--ink); vertical-align: top; }
.tblc tbody tr:last-child td { border-bottom: 0; }
.tblc tbody tr:nth-child(even) { background: var(--surface-2); }
.tblc tbody tr:hover { background: var(--pri-t); }
.tblc tbody td:first-child { font-weight: 600; }

/* ============================================================
   Practice (quiz)
   ============================================================ */
.section-h { display: flex; align-items: center; gap: 13px; margin: 56px 0 22px; }
.section-h .sic { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; flex: none; }
.section-h .sic svg { width: 20px; height: 20px; }
.section-h h2 { font-size: clamp(22px, 3vw, 28px); font-weight: 800; letter-spacing: -.03em; margin: 0; }
.section-h .sub { font-family: var(--ff-mono); font-size: 11px; color: var(--ink-3); letter-spacing: .08em; text-transform: uppercase; }
.section-h.prac .sic { background: var(--coral-t); color: var(--coral); }
.section-h.klp .sic { background: var(--emerald-t); color: var(--emerald); }

.quizbar { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }
.quizbar .score { font-family: var(--ff-mono); font-size: 13px; color: var(--ink-2); }
.quizbar .score b { color: var(--coral); }
.quizbar .qreset { margin-left: auto; font-size: 12px; color: var(--ink-3); border: 1px solid var(--line-2); background: #fff;
  border-radius: 999px; padding: 6px 13px; transition: .18s; }
.quizbar .qreset:hover { color: var(--coral); border-color: var(--coral); }

.qcard { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 14px; overflow: hidden;
  box-shadow: var(--shadow-s); transition: box-shadow .25s, border-color .25s; }
.qcard:hover { box-shadow: var(--shadow); }
.qcard .qq { display: flex; gap: 14px; padding: 20px 22px; cursor: pointer; align-items: flex-start; }
.qcard .qnum { flex: none; font-family: var(--ff-mono); font-weight: 700; font-size: 13px; color: #fff;
  background: linear-gradient(135deg, var(--coral), var(--coral-d)); width: 30px; height: 30px; border-radius: 9px;
  display: grid; place-items: center; }
.qcard .qtext { font-weight: 600; font-size: 15.5px; line-height: 1.6; color: var(--ink); flex: 1; }
.qcard .qtoggle { flex: none; color: var(--ink-3); transition: transform .3s, color .2s; margin-top: 3px; }
.qcard .qtoggle svg { width: 20px; height: 20px; }
.qcard.open .qtoggle { transform: rotate(180deg); color: var(--coral); }
.qcard .qa { max-height: 0; overflow: hidden; transition: max-height .4s cubic-bezier(.3,.7,.2,1); }
.qcard.open .qa { max-height: 1400px; }
.qcard .qa-in { padding: 0 22px 20px 66px; }
.qcard .qa-in .alabel { font-family: var(--ff-mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--emerald); font-weight: 600; margin-bottom: 7px; display: flex; align-items: center; gap: 6px; }
.qcard .qa-in .alabel svg { width: 13px; height: 13px; flex: none; }
.qcard .qa-in .atext { font-size: 14.5px; line-height: 1.74; color: var(--ink-2); border-left: 2px solid var(--emerald-t); padding-left: 16px; }
.qcard .selfcheck { display: flex; gap: 8px; margin-top: 16px; }
.qcard .selfcheck button { font-size: 12.5px; font-weight: 600; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--line-2);
  background: #fff; color: var(--ink-2); display: inline-flex; align-items: center; gap: 6px; transition: .16s; }
.qcard .selfcheck button svg { width: 14px; height: 14px; }
.qcard .selfcheck .ok:hover, .qcard .selfcheck .ok.on { background: var(--emerald); color: #fff; border-color: var(--emerald); }
.qcard .selfcheck .no:hover, .qcard .selfcheck .no.on { background: var(--coral); color: #fff; border-color: var(--coral); }

/* ============================================================
   KLP
   ============================================================ */
.klpgrid { display: grid; gap: 12px; }
.klpcard { display: flex; gap: 15px; background: linear-gradient(150deg, #fff, var(--surface-2));
  border: 1px solid var(--line); border-left: 3px solid var(--emerald); border-radius: var(--radius-s);
  padding: 18px 20px; box-shadow: var(--shadow-s); transition: transform .2s, box-shadow .2s; }
.klpcard:hover { transform: translateX(3px); box-shadow: var(--shadow); }
.klpcard .knum { flex: none; font-family: var(--ff-mono); font-size: 12px; font-weight: 700; color: var(--emerald);
  background: var(--emerald-t); width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; }
.klpcard .ktext { font-size: 14.5px; line-height: 1.68; color: var(--ink); }

/* chapter nav footer */
.chnav { display: flex; gap: 14px; margin-top: 56px; padding-top: 30px; border-top: 1px solid var(--line); }
.chnav a { flex: 1; display: flex; flex-direction: column; gap: 4px; padding: 18px 22px; border: 1px solid var(--line);
  border-radius: var(--radius-s); background: #fff; transition: .2s; box-shadow: var(--shadow-s); }
.chnav a:hover { border-color: var(--pri-l); transform: translateY(-2px); box-shadow: var(--shadow); }
.chnav a.next { text-align: right; }
.chnav a .dir { font-family: var(--ff-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.chnav a .nt { font-weight: 700; font-size: 15px; color: var(--ink); }
.chnav a.disabled { opacity: .4; pointer-events: none; }

.donebtn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; margin-top: 26px;
  padding: 16px; border-radius: var(--radius-s); border: 1.5px solid var(--emerald); background: var(--emerald-t);
  color: var(--emerald); font-weight: 700; font-size: 15px; transition: .2s; }
.donebtn svg { width: 18px; height: 18px; }
.donebtn:hover { background: var(--emerald); color: #fff; }
.donebtn.done { background: var(--emerald); color: #fff; }

/* ============================================================
   Lightbox
   ============================================================ */
.lightbox { position: fixed; inset: 0; z-index: 100; background: rgba(8,16,26,.92); backdrop-filter: blur(8px);
  display: none; align-items: center; justify-content: center; padding: 4vh 4vw; opacity: 0; transition: opacity .25s; }
.lightbox.show { display: flex; opacity: 1; }
.lightbox .lbinner { max-width: 94vw; max-height: 92vh; display: flex; flex-direction: column; gap: 14px; animation: lbin .35s cubic-bezier(.2,.7,.2,1); }
@keyframes lbin { from { transform: scale(.94); opacity: 0; } to { transform: none; opacity: 1; } }
.lightbox img { max-width: 100%; max-height: 80vh; object-fit: contain; border-radius: 10px; box-shadow: 0 30px 80px rgba(0,0,0,.5); }
.lightbox .lbcap { color: #cfe; font-size: 14px; line-height: 1.6; text-align: center; max-width: 760px; margin: 0 auto;
  display: flex; gap: 9px; align-items: baseline; justify-content: center; }
.lightbox .lbcap .fnum { font-family: var(--ff-mono); font-size: 11px; color: #fff; background: rgba(255,255,255,.16); padding: 2px 8px; border-radius: 6px; }
.lightbox .lbclose { position: absolute; top: 22px; right: 26px; width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255,255,255,.12); border: 0; color: #fff; display: grid; place-items: center; transition: .2s; }
.lightbox .lbclose:hover { background: rgba(255,255,255,.25); transform: rotate(90deg); }
.lightbox .lbclose svg { width: 22px; height: 22px; }
.lightbox .lbnav { position: absolute; top: 50%; transform: translateY(-50%); width: 50px; height: 50px; border-radius: 50%;
  background: rgba(255,255,255,.10); border: 0; color: #fff; display: grid; place-items: center; transition: .2s; }
.lightbox .lbnav:hover { background: rgba(255,255,255,.22); }
.lightbox .lbnav.prev { left: 18px; } .lightbox .lbnav.next { right: 18px; }
.lightbox .lbnav svg { width: 24px; height: 24px; }

/* toast */
.toast { position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%) translateY(20px); z-index: 110;
  background: var(--ink); color: #fff; font-size: 14px; font-weight: 600; padding: 13px 22px; border-radius: 999px;
  box-shadow: var(--shadow-l); opacity: 0; transition: .3s; display: flex; align-items: center; gap: 9px; pointer-events: none; }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast svg { width: 17px; height: 17px; color: var(--emerald); }

/* empty / soon */
.soonview { text-align: center; padding: 90px 20px; }
.soonview .ic { width: 72px; height: 72px; border-radius: 20px; background: var(--pri-t); color: var(--pri); display: grid; place-items: center; margin: 0 auto 22px; }
.soonview .ic svg { width: 34px; height: 34px; }
.soonview h2 { font-size: 26px; font-weight: 800; letter-spacing: -.03em; margin: 0 0 8px; }
.soonview p { color: var(--ink-2); margin: 0 0 24px; }

/* footer */
.foot { border-top: 1px solid var(--line); padding: 30px 0; margin-top: 40px; color: var(--ink-3); font-size: 13px;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
.foot .fmono { font-family: var(--ff-mono); font-size: 11px; letter-spacing: .06em; }

@media (max-width: 620px){
  .hero .stats { gap: 20px; }
  .chread { gap: 0; }
  .qcard .qa-in { padding-left: 22px; }
}

/* reduce motion */
@media (prefers-reduced-motion: reduce){
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; }
}
/* ============================================================
   DARK THEME
   ============================================================ */
:root[data-theme="dark"] {
  --paper:    #0B131F;
  --paper-2:  #111E2E;
  --surface:  #142133;
  --surface-2:#0F1B2A;
  --ink:      #E7EEF7;
  --ink-2:    #AEBCCD;
  --ink-3:    #7C8BA1;
  --ink-4:    #586780;
  --line:     #243349;
  --line-2:   #2F4159;
  --pri:      #5B8DF0;
  --pri-d:    #3E72DE;
  --pri-l:    #79A3F4;
  --pri-t:    #16243C;
  --pri-t2:   #1E3457;
  --teal:     #2BB9C0;
  --teal-t:   #0E2A2D;
  --amber:    #E0A33A;
  --amber-t:  #3A2E12;
  --amber-t2: #5A4516;
  --coral:    #F2568A;
  --coral-d:  #D63A6F;
  --coral-t:  #361624;
  --emerald:  #2DB281;
  --emerald-t:#102A20;
  --shadow-s: 0 1px 2px rgba(0,0,0,.4), 0 2px 6px rgba(0,0,0,.3);
  --shadow:   0 6px 18px rgba(0,0,0,.45), 0 14px 34px rgba(0,0,0,.4);
  --shadow-l: 0 14px 40px rgba(0,0,0,.55), 0 34px 80px rgba(0,0,0,.6);
  --shadow-pri: 0 10px 30px rgba(40,90,200,.4);
}
:root[data-theme="dark"] body::before {
  background:
    radial-gradient(1200px 600px at 12% -8%, rgba(60,114,222,.16), transparent 60%),
    radial-gradient(1000px 560px at 100% 0%, rgba(43,185,192,.12), transparent 55%),
    var(--paper);
}
:root[data-theme="dark"] body::after {
  background-image:
    linear-gradient(rgba(91,141,240,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(91,141,240,.06) 1px, transparent 1px);
}
:root[data-theme="dark"] .topbar { background: rgba(15,26,40,.82); }
:root[data-theme="dark"] .topsearch:focus-within { background: var(--surface); }
:root[data-theme="dark"] .ovcard,
:root[data-theme="dark"] .klpcard { background: linear-gradient(150deg, var(--surface), var(--surface-2)); }
:root[data-theme="dark"] .hero h1 .en,
:root[data-theme="dark"] .chhero .ten,
:root[data-theme="dark"] .sken,
:root[data-theme="dark"] .chcard .ten,
:root[data-theme="dark"] .parthead .pen { color: var(--ink-3); }
:root[data-theme="dark"] .term { background: linear-gradient(transparent 60%, rgba(224,163,58,.38) 60%); color: var(--ink); }
:root[data-theme="dark"] mark.pen { color: #16202c; }
:root[data-theme="dark"] .figframe { background: #0A1018; }

/* ============================================================
   PEN HIGHLIGHT
   ============================================================ */
mark.pen { background: transparent; color: inherit; border-radius: 2px; padding: 0 1px;
  box-decoration-break: clone; -webkit-box-decoration-break: clone; transition: background .15s; }
mark.pen-yellow { background: #FFF09A; }
mark.pen-pink   { background: #FFC6DC; }
mark.pen-blue   { background: #B6E3FF; }
mark.pen-green  { background: #BCEFCC; }
mark.pen-purple { background: #E3D2FF; }
mark.pen-orange { background: #FFD7AD; }
mark.pen.under { background: transparent; }
mark.pen-yellow.under { box-shadow: inset 0 -0.5em 0 #FFF09A; }
mark.pen { cursor: pointer; }

.pentool { position: absolute; z-index: 95; display: none; gap: 6px; align-items: center;
  background: var(--surface); border: 1px solid var(--line-2); border-radius: 999px;
  padding: 7px 10px; box-shadow: var(--shadow-l); transform: translate(-50%, -120%); }
.pentool.show { display: flex; animation: penin .16s ease-out; }
@keyframes penin { from { opacity: 0; transform: translate(-50%, -108%); } to { opacity: 1; transform: translate(-50%, -120%); } }
.pentool .sw { width: 22px; height: 22px; border-radius: 50%; border: 2px solid rgba(0,0,0,.08); cursor: pointer; transition: transform .12s; }
:root[data-theme="dark"] .pentool .sw { border-color: rgba(255,255,255,.14); }
.pentool .sw:hover { transform: scale(1.18); }
.pentool .erase { width: 26px; height: 26px; border-radius: 50%; border: 0; background: var(--paper-2); color: var(--ink-2);
  display: grid; place-items: center; cursor: pointer; margin-left: 2px; }
.pentool .erase:hover { background: var(--coral-t); color: var(--coral); }
.pentool .erase svg { width: 14px; height: 14px; }
.pentool .vr { width: 1px; height: 18px; background: var(--line-2); }
.pentool .memoadd { width: 26px; height: 26px; border-radius: 50%; border: 0; background: var(--pri-t); color: var(--pri);
  display: grid; place-items: center; cursor: pointer; }
.pentool .memoadd:hover { background: var(--pri); color: #fff; }
.pentool .memoadd svg { width: 15px; height: 15px; }

/* ============================================================
   THEME / MEMO / EXAM topbar buttons
   ============================================================ */
.iconbtn { width: 38px; height: 38px; border-radius: 999px; border: 1px solid var(--line-2); background: #fff;
  color: var(--ink-2); display: grid; place-items: center; transition: .18s; flex: none; position: relative; }
:root[data-theme="dark"] .iconbtn { background: var(--surface); }
.iconbtn:hover { border-color: var(--pri-l); color: var(--pri-d); transform: translateY(-1px); }
.iconbtn svg { width: 18px; height: 18px; }
.iconbtn .ct { position: absolute; top: -4px; right: -4px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px;
  background: var(--coral); color: #fff; font-family: var(--ff-mono); font-size: 10px; font-weight: 600; display: grid; place-items: center; }

/* figure memo button */
.figframe .memoclip { position: absolute; right: 16px; top: 16px; width: 30px; height: 30px; border-radius: 8px;
  background: rgba(255,255,255,.16); backdrop-filter: blur(6px); display: grid; place-items: center; opacity: 0; transition: .2s; cursor: pointer; }
.figframe:hover .memoclip { opacity: 1; }
.figframe .memoclip:hover { background: var(--pri); }
.figframe .memoclip svg { width: 15px; height: 15px; color: #fff; }

/* ============================================================
   CHAPTER NAVIGATOR (left drawer)
   ============================================================ */
.navdrawer { position: fixed; top: 0; left: 0; bottom: 0; width: min(340px, 90vw); z-index: 91;
  background: var(--paper); border-right: 1px solid var(--line); box-shadow: var(--shadow-l);
  transform: translateX(-100%); transition: transform .3s cubic-bezier(.2,.7,.2,1); display: flex; flex-direction: column; }
.navdrawer.show { transform: none; }
.navdrawer .ndh { display: flex; align-items: center; gap: 10px; padding: 17px 18px; border-bottom: 1px solid var(--line); }
.navdrawer .ndh .ic { width: 30px; height: 30px; border-radius: 9px; background: linear-gradient(135deg, var(--pri), var(--teal)); display: grid; place-items: center; }
.navdrawer .ndh .ic svg { width: 17px; height: 17px; color: #fff; }
.navdrawer .ndh b { font-size: 16px; font-weight: 800; letter-spacing: -.02em; }
.navdrawer .ndh .x { margin-left: auto; width: 32px; height: 32px; border-radius: 8px; border: 0; background: transparent; color: var(--ink-3); cursor: pointer; display: grid; place-items: center; }
.navdrawer .ndh .x:hover { background: var(--paper-2); color: var(--ink); }
.navdrawer .ndh .x svg { width: 18px; height: 18px; }
.navscroll { flex: 1; overflow-y: auto; padding: 10px 12px 24px; }
.navtop { display: flex; gap: 8px; margin-bottom: 8px; }
.navtop a { flex: 1; display: flex; align-items: center; justify-content: center; gap: 7px; padding: 11px; border-radius: 11px;
  font-weight: 700; font-size: 13px; border: 1px solid var(--line-2); background: var(--surface); color: var(--ink-2); cursor: pointer; transition: .16s; }
.navtop a:hover { border-color: var(--pri-l); color: var(--pri-d); }
.navtop a svg { width: 16px; height: 16px; }
.navtop a.wrong { color: var(--coral); border-color: var(--coral-t); }
.navtop a.wrong:hover { background: var(--coral-t); border-color: var(--coral); }
.navtop a .wct { font-family: var(--ff-mono); font-size: 11px; background: var(--coral); color: #fff; border-radius: 7px; padding: 0 6px; }
.navpart { font-family: var(--ff-sans); font-size: 12.5px; font-weight: 800; letter-spacing: -.01em; color: var(--ink-2);
  padding: 18px 8px 8px; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; position: sticky; top: -10px; background: var(--paper); z-index: 1; }
.navpart span { color: var(--ink-4); font-family: var(--ff-serif); font-style: italic; font-size: 12px; font-weight: 500; }
.navch { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 9px; cursor: pointer; transition: background .14s; }
.navch:hover { background: var(--pri-t); }
.navch .nn { font-family: var(--ff-mono); font-size: 11px; font-weight: 600; color: var(--ink-3); width: 22px; text-align: center; flex: none; }
.navch .nt { font-size: 13.5px; color: var(--ink); line-height: 1.3; flex: 1; }
.navch .nck { width: 16px; height: 16px; flex: none; color: var(--emerald); opacity: 0; }
.navch.done .nck { opacity: 1; }
.navch.done .nt { color: var(--ink-2); }
.navch.cur { background: var(--pri); }
.navch.cur .nn, .navch.cur .nt { color: #fff; }
.navch.cur .nck { color: #bff3dd; }

/* ============================================================
   WRONG NOTE (오답노트)
   ============================================================ */
.wrongview { padding: clamp(36px,6vw,64px) 0 80px; }
.wronghead { display: flex; align-items: center; gap: 14px; margin-bottom: 8px; }
.wronghead .ic { width: 44px; height: 44px; border-radius: 13px; background: var(--coral-t); color: var(--coral); display: grid; place-items: center; flex: none; }
.wronghead .ic svg { width: 24px; height: 24px; }
.wronghead h1 { font-size: clamp(26px,4vw,38px); font-weight: 800; letter-spacing: -.03em; margin: 0; }
.wronghead .sub { font-family: var(--ff-mono); font-size: 12px; color: var(--ink-3); letter-spacing: .06em; }
.wrongbar { display: flex; gap: 10px; flex-wrap: wrap; margin: 22px 0 24px; }
.wrongbar button { font-weight: 700; font-size: 13.5px; padding: 11px 18px; border-radius: 999px; border: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; transition: .18s; }
.wrongbar button svg { width: 16px; height: 16px; }
.wrongbar .retake { background: linear-gradient(135deg, var(--coral), var(--coral-d)); color: #fff; box-shadow: var(--shadow); }
.wrongbar .retake:hover { transform: translateY(-2px); }
.wrongbar .clearall { background: var(--surface); border: 1px solid var(--line-2); color: var(--ink-2); }
.wrongbar .clearall:hover { color: var(--coral); border-color: var(--coral); }
.wrongempty { text-align: center; padding: 80px 20px; color: var(--ink-3); }
.wrongempty .ic { width: 70px; height: 70px; border-radius: 20px; background: var(--emerald-t); color: var(--emerald); display: grid; place-items: center; margin: 0 auto 20px; }
.wrongempty .ic svg { width: 34px; height: 34px; }
.wrongempty h2 { font-size: 22px; font-weight: 800; color: var(--ink); margin: 0 0 6px; letter-spacing: -.02em; }
.wronggrid { display: grid; gap: 14px; }
.wrongcard { background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--coral); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-s); }
.wrongcard .wq { display: flex; gap: 13px; padding: 18px 20px; cursor: pointer; align-items: flex-start; }
.wrongcard .wch { flex: none; font-family: var(--ff-mono); font-size: 11px; font-weight: 600; color: var(--coral); background: var(--coral-t); padding: 3px 9px; border-radius: 7px; cursor: pointer; }
.wrongcard .wqt { flex: 1; font-weight: 600; font-size: 15px; line-height: 1.6; color: var(--ink); }
.wrongcard .wtoggle { flex: none; color: var(--ink-3); transition: transform .3s; }
.wrongcard .wtoggle svg { width: 20px; height: 20px; }
.wrongcard.open .wtoggle { transform: rotate(180deg); }
.wrongcard .wa { max-height: 0; overflow: hidden; transition: max-height .4s cubic-bezier(.3,.7,.2,1); }
.wrongcard.open .wa { max-height: 1200px; }
.wrongcard .wa-in { padding: 0 20px 18px 64px; }
.wrongcard .wa-in .al { font-family: var(--ff-mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--emerald); font-weight: 600; margin-bottom: 7px; display: flex; align-items: center; gap: 6px; }
.wrongcard .wa-in .al svg { width: 13px; height: 13px; flex: none; }
.wrongcard .wa-in .atext { font-size: 14.5px; line-height: 1.72; color: var(--ink-2); border-left: 2px solid var(--emerald-t); padding-left: 15px; }
.wrongcard .wfoot { display: flex; gap: 8px; padding: 0 20px 16px 64px; }
.wrongcard .wfoot button { font-size: 12px; font-weight: 600; padding: 7px 13px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--surface); color: var(--ink-2); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; transition: .16s; }
.wrongcard .wfoot button svg { width: 13px; height: 13px; }
.wrongcard .wfoot .master:hover { background: var(--emerald); color: #fff; border-color: var(--emerald); }
.wrongcard .wfoot .goto:hover { background: var(--pri); color: #fff; border-color: var(--pri); }

/* ============================================================
   MEMO drawer
   ============================================================ */
.drawer-mask { position: fixed; inset: 0; z-index: 90; background: rgba(8,16,26,.45); backdrop-filter: blur(3px);
  opacity: 0; pointer-events: none; transition: opacity .25s; }
.drawer-mask.show { opacity: 1; pointer-events: auto; }
.memodrawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(440px, 92vw); z-index: 91;
  background: var(--paper); border-left: 1px solid var(--line); box-shadow: var(--shadow-l);
  transform: translateX(100%); transition: transform .3s cubic-bezier(.2,.7,.2,1); display: flex; flex-direction: column; }
.memodrawer.show { transform: none; }
.memodrawer .dh { display: flex; align-items: center; gap: 10px; padding: 18px 20px; border-bottom: 1px solid var(--line); }
.memodrawer .dh .ic { width: 30px; height: 30px; border-radius: 9px; background: var(--pri-t); color: var(--pri); display: grid; place-items: center; }
.memodrawer .dh .ic svg { width: 17px; height: 17px; }
.memodrawer .dh b { font-size: 16px; font-weight: 800; letter-spacing: -.02em; }
.memodrawer .dh .scope { font-family: var(--ff-mono); font-size: 11px; color: var(--ink-3); }
.memodrawer .dh .x { margin-left: auto; width: 32px; height: 32px; border-radius: 8px; border: 0; background: transparent; color: var(--ink-3); cursor: pointer; display: grid; place-items: center; }
.memodrawer .dh .x:hover { background: var(--paper-2); color: var(--ink); }
.memodrawer .dh .x svg { width: 18px; height: 18px; }
.memocompose { padding: 14px 18px; border-bottom: 1px solid var(--line); }
.memocompose textarea { width: 100%; min-height: 64px; resize: vertical; border: 1px solid var(--line-2); border-radius: 12px;
  padding: 11px 13px; font-family: inherit; font-size: 14px; color: var(--ink); background: var(--surface); outline: 0; line-height: 1.6; }
.memocompose textarea:focus { border-color: var(--pri-l); box-shadow: 0 0 0 3px var(--pri-t); }
.memocompose .crow { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.memocompose .attach { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--ink-2);
  border: 1px solid var(--line-2); background: var(--surface); border-radius: 999px; padding: 7px 12px; cursor: pointer; transition: .16s; }
.memocompose .attach:hover { border-color: var(--pri-l); color: var(--pri-d); }
.memocompose .attach svg { width: 14px; height: 14px; }
.memocompose .save { margin-left: auto; background: linear-gradient(135deg, var(--pri), var(--pri-d)); color: #fff; border: 0;
  font-weight: 700; font-size: 13px; padding: 9px 18px; border-radius: 999px; cursor: pointer; box-shadow: var(--shadow-pri); }
.memocompose .save:hover { transform: translateY(-1px); }
.memocompose .thumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.memocompose .thumbs .th { position: relative; width: 64px; height: 64px; border-radius: 8px; overflow: hidden; border: 1px solid var(--line-2); }
.memocompose .thumbs .th img { width: 100%; height: 100%; object-fit: cover; }
.memocompose .thumbs .th .rm { position: absolute; top: 2px; right: 2px; width: 18px; height: 18px; border-radius: 50%; border: 0;
  background: rgba(0,0,0,.6); color: #fff; cursor: pointer; display: grid; place-items: center; font-size: 11px; line-height: 1; }
.memocompose .hint { font-size: 11px; color: var(--ink-4); margin-top: 8px; }
.memolist { flex: 1; overflow-y: auto; padding: 14px 18px 30px; display: flex; flex-direction: column; gap: 12px; }
.memolist .empty { text-align: center; color: var(--ink-4); padding: 50px 10px; font-size: 13.5px; }
.memocard { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 14px 15px; box-shadow: var(--shadow-s); }
.memocard .mtext { font-size: 14px; line-height: 1.65; color: var(--ink); white-space: pre-wrap; }
.memocard .mimgs { display: grid; grid-template-columns: repeat(auto-fill, minmax(80px,1fr)); gap: 7px; margin-top: 10px; }
.memocard .mimgs img { width: 100%; border-radius: 8px; border: 1px solid var(--line-2); cursor: zoom-in; }
.memocard .mfoot { display: flex; align-items: center; gap: 10px; margin-top: 11px; }
.memocard .mfoot .ts { font-family: var(--ff-mono); font-size: 10.5px; color: var(--ink-4); }
.memocard .mfoot .loc { font-size: 11px; color: var(--pri); cursor: pointer; }
.memocard .mfoot .del { margin-left: auto; font-size: 11.5px; color: var(--ink-3); border: 0; background: transparent; cursor: pointer; }
.memocard .mfoot .del:hover { color: var(--coral); }

/* ============================================================
   EXAM overlay
   ============================================================ */
.exam { position: fixed; inset: 0; z-index: 98; background: var(--paper); display: none; flex-direction: column; }
.exam.show { display: flex; animation: viewin .3s; }
.exam .eh { display: flex; align-items: center; gap: 14px; padding: 16px clamp(16px,4vw,40px); border-bottom: 1px solid var(--line); }
.exam .eh .et { font-weight: 800; font-size: 17px; letter-spacing: -.02em; display: flex; align-items: center; gap: 9px; }
.exam .eh .et .ic { width: 30px; height: 30px; border-radius: 9px; background: var(--coral-t); color: var(--coral); display: grid; place-items: center; }
.exam .eh .et .ic svg { width: 17px; height: 17px; }
.exam .eh .timer { font-family: var(--ff-mono); font-size: 14px; color: var(--ink-2); display: flex; align-items: center; gap: 6px; }
.exam .eh .timer svg { width: 15px; height: 15px; color: var(--ink-3); }
.exam .eh .eprog { font-family: var(--ff-mono); font-size: 13px; color: var(--ink-3); }
.exam .eh .ex { margin-left: auto; width: 36px; height: 36px; border-radius: 9px; border: 0; background: var(--paper-2); color: var(--ink-2); cursor: pointer; display: grid; place-items: center; }
.exam .eh .ex:hover { background: var(--coral-t); color: var(--coral); }
.exam .eh .ex svg { width: 18px; height: 18px; }
.exam .etrack { height: 4px; background: var(--paper-2); }
.exam .etrack .efill { height: 100%; width: 0; background: linear-gradient(90deg, var(--coral), var(--pri)); transition: width .3s; }
.exam .ebody { flex: 1; overflow-y: auto; display: flex; align-items: flex-start; justify-content: center; padding: clamp(24px,5vw,60px) clamp(16px,4vw,40px); }
.exam .ecard { width: 100%; max-width: 780px; }
.exam .ecard .qmeta { font-family: var(--ff-mono); font-size: 12px; letter-spacing: .08em; color: var(--coral); text-transform: uppercase; font-weight: 600; }
.exam .ecard .qbig { font-size: clamp(20px,3vw,27px); font-weight: 700; line-height: 1.5; letter-spacing: -.02em; margin: 14px 0 26px; color: var(--ink); }
.exam .ecard .reveal-a { background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--emerald); border-radius: 14px;
  padding: 20px 22px; box-shadow: var(--shadow-s); display: none; animation: viewin .3s; }
.exam .ecard .reveal-a.show { display: block; }
.exam .ecard .reveal-a .al { font-family: var(--ff-mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--emerald); font-weight: 600; margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }
.exam .ecard .reveal-a .al svg { width: 13px; height: 13px; flex: none; }
.exam .ecard .reveal-a .atext { font-size: 15px; line-height: 1.74; color: var(--ink-2); }
.exam .efoot { padding: 16px clamp(16px,4vw,40px); border-top: 1px solid var(--line); display: flex; gap: 12px; align-items: center; justify-content: center; }
.exam .efoot button { font-weight: 700; font-size: 14.5px; padding: 13px 26px; border-radius: 999px; border: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; transition: .18s; }
.exam .efoot button svg { width: 16px; height: 16px; }
.exam .efoot .show-a { background: var(--ink); color: #fff; }
.exam .efoot .show-a:hover { transform: translateY(-2px); }
.exam .efoot .grade-ok { background: var(--emerald); color: #fff; }
.exam .efoot .grade-no { background: var(--coral); color: #fff; }
.exam .efoot button:hover { transform: translateY(-2px); }
.exam .eresult { width: 100%; max-width: 600px; text-align: center; margin: auto; }
.exam .eresult .ring { width: 180px; height: 180px; margin: 0 auto 24px; }
.exam .eresult h2 { font-size: 30px; font-weight: 800; letter-spacing: -.03em; margin: 0 0 6px; }
.exam .eresult p { color: var(--ink-2); margin: 0 0 26px; }
.exam .eresult .rbtns { display: flex; gap: 12px; justify-content: center; }
/* 오늘의 퀴즈 4지선다 */
.dqsnip { background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--pri); border-radius: 14px;
  padding: 18px 20px; font-size: 16px; line-height: 1.7; color: var(--ink); margin-bottom: 22px; box-shadow: var(--shadow-s); }
.dqopts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.dqo { display: flex; align-items: center; gap: 12px; text-align: left; padding: 14px 16px; border: 1.5px solid var(--line-2); background: var(--surface); color: var(--ink);
  border-radius: 14px; font-size: 14.5px; font-weight: 600; line-height: 1.45; cursor: pointer; transition: .16s; }
.dqo:hover:not(.done) { border-color: var(--pri-l); background: var(--pri-t); transform: translateY(-1px); }
.dqo.done { cursor: default; }
.dqo .dqn { width: 26px; height: 26px; border-radius: 8px; background: var(--paper-2); color: var(--ink-2); font-family: var(--ff-mono);
  font-weight: 700; font-size: 13px; display: grid; place-items: center; flex: none; }
.dqo.right { border-color: var(--emerald); background: var(--emerald-t); color: var(--emerald); }
.dqo.wrong { border-color: var(--coral); background: var(--coral-t); color: var(--coral); }
.dqo.right .dqn { background: var(--emerald); color: #fff; }
.dqo.wrong .dqn { background: var(--coral); color: #fff; }
.dqfb { font-weight: 700; font-size: 14.5px; display: flex; align-items: center; gap: 7px; margin-right: auto; }
.dqfb svg { width: 17px; height: 17px; flex: none; }
.dqfb.ok { color: var(--emerald); } .dqfb.no { color: var(--coral); }

/* ============================================================
   SEARCH modal
   ============================================================ */
.searchmodal { position: fixed; inset: 0; z-index: 99; background: rgba(8,16,26,.5); backdrop-filter: blur(6px);
  display: none; align-items: flex-start; justify-content: center; padding: 10vh 16px 16px; opacity: 0; transition: opacity .2s; }
.searchmodal.show { display: flex; opacity: 1; }
.searchbox { width: min(720px, 100%); background: var(--surface); border: 1px solid var(--line-2); border-radius: 18px;
  box-shadow: var(--shadow-l); overflow: hidden; max-height: 76vh; display: flex; flex-direction: column; animation: lbin .25s; }
.searchbox .sinput { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.searchbox .sinput svg { width: 20px; height: 20px; color: var(--ink-3); flex: none; }
.searchbox .sinput input { flex: 1; border: 0; background: transparent; outline: 0; font-family: inherit; font-size: 17px; color: var(--ink); }
.searchbox .sinput .kbd { font-family: var(--ff-mono); font-size: 11px; color: var(--ink-4); border: 1px solid var(--line-2); border-radius: 6px; padding: 2px 6px; }
.searchresults { overflow-y: auto; padding: 8px; }
.searchresults .sr { display: block; padding: 12px 14px; border-radius: 12px; cursor: pointer; transition: background .14s; }
.searchresults .sr:hover, .searchresults .sr.sel { background: var(--pri-t); }
.searchresults .sr .srt { display: flex; align-items: center; gap: 9px; }
.searchresults .sr .srn { font-family: var(--ff-mono); font-size: 11px; font-weight: 600; color: var(--pri); background: var(--pri-t2); padding: 2px 7px; border-radius: 6px; }
:root[data-theme="dark"] .searchresults .sr:hover .srn { background: var(--surface); }
.searchresults .sr .srh { font-weight: 700; font-size: 14.5px; color: var(--ink); }
.searchresults .sr .srsub { font-size: 12.5px; color: var(--ink-3); margin-left: 2px; }
.searchresults .sr .srx { font-size: 12.5px; color: var(--ink-2); margin-top: 4px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.searchresults .sr mark { background: var(--amber-t2); color: inherit; padding: 0 1px; border-radius: 2px; }
.searchresults .shint { padding: 30px; text-align: center; color: var(--ink-4); font-size: 13.5px; }
.searchresults .scat { font-family: var(--ff-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-4); padding: 12px 14px 6px; }

/* ============================================================
   READING FONT SIZE (--fz)
   ============================================================ */
:root { --fz: 1; }
.article .ointro { font-size: calc(14.5px * var(--fz)); }
.article .ovlist li { font-size: calc(15px * var(--fz)); }
.article .bul > li { font-size: calc(15.5px * var(--fz)); }
.article .subbul li { font-size: calc(14.5px * var(--fz)); }
.article .klpcard .ktext { font-size: calc(14.5px * var(--fz)); }
.article .qcard .qtext { font-size: calc(15.5px * var(--fz)); }
.article .qcard .qa-in .atext { font-size: calc(14.5px * var(--fz)); }
.article .tblc table { font-size: calc(13.5px * var(--fz)); }
.article .tblc thead th { font-size: calc(12.5px * var(--fz)); }
.article .figcap { font-size: calc(13px * var(--fz)); }
.article .subhead .sken { font-size: calc(14.5px * var(--fz)); }

/* font-size popover */
.fzpop { position: fixed; z-index: 80; top: 60px; right: clamp(16px,4vw,34px); width: 248px;
  background: var(--surface); border: 1px solid var(--line-2); border-radius: 14px; box-shadow: var(--shadow-l);
  padding: 16px; display: none; }
.fzpop.show { display: block; animation: lbin .18s; }
.fzpop .fzt { font-size: 12.5px; font-weight: 700; color: var(--ink-2); margin-bottom: 12px; display: flex; align-items: center; gap: 7px; }
.fzpop .fzt svg { width: 15px; height: 15px; color: var(--pri); }
.fzpop .fzrow { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.fzpop .fzrow button { width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--paper);
  color: var(--ink); font-size: 17px; font-weight: 700; cursor: pointer; flex: none; transition: .15s; }
.fzpop .fzrow button:hover { border-color: var(--pri-l); color: var(--pri-d); }
.fzpop .fzrow .fzval { flex: 1; text-align: center; font-family: var(--ff-mono); font-size: 17px; font-weight: 700; color: var(--pri); }
.fzpop input[type=range] { width: 100%; accent-color: var(--pri); margin: 0 0 10px; }
.fzpop .fzreset { width: 100%; font-size: 12px; font-weight: 600; color: var(--ink-3); background: var(--paper); border: 1px solid var(--line-2);
  border-radius: 999px; padding: 7px; cursor: pointer; }
.fzpop .fzreset:hover { color: var(--pri-d); border-color: var(--pri-l); }

/* ============================================================
   HIGHLIGHTS review (형광펜 모아보기)
   ============================================================ */
.hlview { padding: clamp(36px,6vw,64px) 0 80px; }
.hlhead { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; }
.hlhead .ic { width: 44px; height: 44px; border-radius: 13px; background: var(--amber-t); color: var(--amber); display: grid; place-items: center; flex: none; }
.hlhead .ic svg { width: 24px; height: 24px; }
.hlhead h1 { font-size: clamp(26px,4vw,38px); font-weight: 800; letter-spacing: -.03em; margin: 0; }
.hlhead .sub { font-family: var(--ff-mono); font-size: 12px; color: var(--ink-3); }
.hlfilter { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 22px 0 26px; }
.hlfilter .pf { width: 30px; height: 30px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; transition: .15s; position: relative; }
.hlfilter .pf.sel { border-color: var(--ink); transform: scale(1.08); }
.hlfilter .pf.all { background: linear-gradient(135deg,#FFF09A,#FFC6DC,#B6E3FF,#BCEFCC,#E3D2FF,#FFD7AD); }
.hlfilter .cnt { margin-left: auto; font-family: var(--ff-mono); font-size: 12px; color: var(--ink-3); }
.hlempty { text-align: center; padding: 80px 20px; color: var(--ink-3); }
.hlempty .ic { width: 70px; height: 70px; border-radius: 20px; background: var(--amber-t); color: var(--amber); display: grid; place-items: center; margin: 0 auto 20px; }
.hlempty .ic svg { width: 34px; height: 34px; }
.hlempty h2 { font-size: 22px; font-weight: 800; color: var(--ink); margin: 0 0 6px; letter-spacing: -.02em; }
.hlchap { margin-bottom: 26px; }
.hlchap .hch { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; cursor: pointer; }
.hlchap .hch .hn { font-family: var(--ff-mono); font-size: 12px; font-weight: 600; color: var(--pri); background: var(--pri-t); padding: 3px 9px; border-radius: 7px; }
.hlchap .hch h3 { font-size: 16px; font-weight: 800; letter-spacing: -.02em; margin: 0; }
.hlchap .hch .go { margin-left: auto; font-size: 12px; color: var(--pri); }
.hllist { display: grid; gap: 9px; }
.hlitem { display: flex; align-items: flex-start; gap: 12px; background: var(--surface); border: 1px solid var(--line);
  border-radius: 12px; padding: 13px 15px; box-shadow: var(--shadow-s); }
.hlitem .bar { width: 5px; align-self: stretch; border-radius: 3px; flex: none; }
.hlitem .htext { flex: 1; font-size: 14.5px; line-height: 1.6; color: var(--ink); }
.hlitem .htext mark { padding: 0 2px; border-radius: 3px; color: #16202c; }
.hlitem .hdel { flex: none; border: 0; background: transparent; color: var(--ink-4); cursor: pointer; padding: 2px; }
.hlitem .hdel:hover { color: var(--coral); }
.hlitem .hdel svg { width: 16px; height: 16px; }

@keyframes hlflash { 0%, 100% { background-color: transparent; } 28% { background-color: var(--pri-t); } }
.hlflash { animation: hlflash 1.5s ease; border-radius: 5px; }

/* ============================================================
   MEMBERSHIP (login / locked / badges)
   ============================================================ */
.topbtn.authbtn { white-space: nowrap; }
.topbtn.authbtn.member { color: var(--emerald); border-color: var(--emerald-t); }
.topbtn.authbtn.member:hover { border-color: var(--emerald); color: var(--emerald); }
.topbtn.authbtn.guest { background: linear-gradient(135deg, var(--pri), var(--pri-d)); color: #fff; border-color: transparent; }
.topbtn.authbtn.guest:hover { transform: translateY(-1px); color: #fff; box-shadow: var(--shadow-pri); }
.topbtn.authbtn svg { width: 15px; height: 15px; }

/* chapter-card lock badge */
.chcard .badge-lock { font-family: var(--ff-sans); font-size: 11px; font-weight: 700; white-space: nowrap; flex: none;
  color: var(--ink-3); background: var(--paper-2); border-radius: 7px; padding: 3px 9px; display: inline-flex; align-items: center; gap: 4px; }
.chcard .badge-lock svg { width: 11px; height: 11px; }
.chcard .badge-free { font-family: var(--ff-sans); font-size: 11px; font-weight: 700; white-space: nowrap; flex: none;
  color: #fff; background: var(--teal); border-radius: 7px; padding: 3px 9px; }
.chcard.locked .ring { opacity: .5; }

/* login modal box */
.loginbox { width: min(400px, 100%); background: var(--surface); border: 1px solid var(--line-2); border-radius: 20px;
  box-shadow: var(--shadow-l); padding: 36px 32px; text-align: center; animation: lbin .25s; }
.loginbox .loginmark { width: 52px; height: 52px; border-radius: 15px; margin: 0 auto 18px;
  background: linear-gradient(135deg, var(--pri), var(--teal)); display: grid; place-items: center; box-shadow: var(--shadow-pri); }
.loginbox .loginmark svg { width: 29px; height: 29px; }
.loginbox h2 { font-size: 22px; font-weight: 800; letter-spacing: -.02em; margin: 0 0 8px; }
.loginbox p { color: var(--ink-2); font-size: 13.5px; line-height: 1.6; margin: 0 0 22px; }
.loginbox form { display: flex; flex-direction: column; gap: 10px; }
.loginbox input { width: 100%; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--paper);
  color: var(--ink); font-size: 15px; outline: 0; text-align: center; letter-spacing: .04em; font-family: inherit; }
.loginbox input:focus { border-color: var(--pri-l); box-shadow: 0 0 0 4px var(--pri-t); background: var(--surface); }
.loginbox button[type=submit] { width: 100%; padding: 14px; border-radius: 12px; border: 0; cursor: pointer;
  background: linear-gradient(135deg, var(--pri), var(--pri-d)); color: #fff; font-size: 15px; font-weight: 700; transition: transform .15s; }
.loginbox button[type=submit]:hover { transform: translateY(-1px); }
.loginbox .loginerr { color: var(--coral); font-size: 13px; margin-top: 14px; min-height: 18px; }
.loginbox .loginclose { margin-top: 6px; background: transparent; border: 0; color: var(--ink-3); font-size: 13px; cursor: pointer; }
.loginbox .loginclose:hover { color: var(--ink); }
.loginbox.shake { animation: gshake .42s; }

/* locked chapter view */
.lockview { text-align: center; padding: clamp(60px,10vw,120px) 20px; max-width: 560px; margin: 0 auto; }
.lockview .lic { width: 84px; height: 84px; border-radius: 24px; background: var(--pri-t); color: var(--pri); display: grid; place-items: center; margin: 0 auto 26px; }
.lockview .lic svg { width: 40px; height: 40px; }
.lockview .leyebrow { font-family: var(--ff-mono); font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--pri); font-weight: 600; }
.lockview h1 { font-size: clamp(24px,4vw,34px); font-weight: 800; letter-spacing: -.03em; margin: 12px 0 10px; }
.lockview p { color: var(--ink-2); font-size: 15px; line-height: 1.7; margin: 0 0 28px; }
.lockview .lbtns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ============================================================
   PRIVATE ACCESS GATE
   ============================================================ */
#gateOverlay { display: none; }
html.gated { overflow: hidden; }
html.gated #gateOverlay {
  display: flex; position: fixed; inset: 0; z-index: 99999; align-items: center; justify-content: center; padding: 20px;
  background: radial-gradient(1000px 600px at 20% 0%, rgba(21,89,214,.22), transparent 60%),
    radial-gradient(900px 540px at 100% 100%, rgba(11,142,149,.18), transparent 55%), #0B1320;
}
#gateOverlay .gatecard { width: min(380px, 100%); background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.12);
  border-radius: 22px; padding: 40px 34px; text-align: center; backdrop-filter: blur(12px); box-shadow: 0 30px 80px rgba(0,0,0,.5); }
#gateOverlay .gatecard.shake { animation: gshake .42s; }
@keyframes gshake { 0%,100%{transform:translateX(0);} 20%,60%{transform:translateX(-9px);} 40%,80%{transform:translateX(9px);} }
#gateOverlay .gatemark { width: 54px; height: 54px; border-radius: 16px; margin: 0 auto 20px;
  background: linear-gradient(135deg, #1559D6, #0B8E95); display: grid; place-items: center; box-shadow: 0 10px 30px rgba(21,89,214,.4); }
#gateOverlay .gatemark svg { width: 30px; height: 30px; }
#gateOverlay h1 { color: #fff; font-size: 23px; font-weight: 800; letter-spacing: -.02em; margin: 0 0 8px;
  font-family: "Pretendard Variable", Pretendard, system-ui, sans-serif; }
#gateOverlay p { color: rgba(255,255,255,.62); font-size: 14px; margin: 0 0 24px; line-height: 1.6;
  font-family: "Pretendard Variable", Pretendard, system-ui, sans-serif; }
#gateOverlay form { display: flex; flex-direction: column; gap: 10px; }
#gateOverlay input { width: 100%; padding: 14px 16px; border-radius: 12px; border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06); color: #fff; font-size: 15px; outline: 0; text-align: center; letter-spacing: .04em;
  font-family: "Pretendard Variable", Pretendard, system-ui, sans-serif; }
#gateOverlay input:focus { border-color: #4F86EE; box-shadow: 0 0 0 4px rgba(79,134,238,.22); }
#gateOverlay input::placeholder { color: rgba(255,255,255,.4); }
#gateOverlay button { width: 100%; padding: 14px; border-radius: 12px; border: 0; cursor: pointer;
  background: linear-gradient(135deg, #1559D6, #0B3FA6); color: #fff; font-size: 15px; font-weight: 700;
  font-family: "Pretendard Variable", Pretendard, system-ui, sans-serif; transition: transform .15s; }
#gateOverlay button:hover { transform: translateY(-1px); }
#gateOverlay .gateerr { color: #FF8FA8; font-size: 13px; margin-top: 14px; min-height: 18px;
  font-family: "Pretendard Variable", Pretendard, system-ui, sans-serif; }

/* ============================================================
   LIBRARY dashboard (내 학습)
   ============================================================ */
.dash { margin: 30px 0 6px; background: linear-gradient(160deg, var(--surface), var(--surface-2)); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 22px 24px; box-shadow: var(--shadow-s); }
.dashh { display: flex; align-items: center; gap: 9px; font-weight: 800; font-size: 16px; letter-spacing: -.02em; margin-bottom: 16px; }
.dashh svg { width: 20px; height: 20px; color: #E8920C; }
.dashtiles { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.dtile { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 16px 8px; border: 1px solid var(--line); border-radius: 14px;
  background: var(--surface); cursor: pointer; transition: .18s; position: relative; }
.dtile:hover { border-color: var(--pri-l); transform: translateY(-2px); box-shadow: var(--shadow); }
.dtile .dti { width: 40px; height: 40px; border-radius: 12px; background: var(--pri-t); color: var(--pri); display: grid; place-items: center; }
.dtile .dti svg { width: 20px; height: 20px; }
.dtile .dtl { font-size: 12.5px; font-weight: 700; color: var(--ink-2); }
.dtile .dtv { position: absolute; top: 8px; right: 10px; font-family: var(--ff-mono); font-size: 11px; font-weight: 700; color: var(--pri); }
.dashbadges { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.dashbadges .dbh { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.dashbadges .dbh span { font-size: 13px; color: var(--ink-2); } .dashbadges .dbh b { color: #E8920C; font-family: var(--ff-mono); }
.dashbadges .dball { font-size: 12.5px; color: var(--pri); background: transparent; border: 0; cursor: pointer; font-weight: 600; }
.dashbadges .dbrow { display: flex; flex-wrap: wrap; gap: 8px; }
.dashbadges .db { display: flex; align-items: center; gap: 7px; background: var(--amber-t); border: 1px solid var(--amber-t2); border-radius: 999px; padding: 6px 12px 6px 7px; }
.dashbadges .dbi { width: 26px; height: 26px; border-radius: 50%; background: linear-gradient(135deg, #F4B41A, #E8920C); color: #fff; display: grid; place-items: center; flex: none; overflow: hidden; }
.dashbadges .dbi svg { width: 15px; height: 15px; }
.dashbadges .db span:last-child { font-size: 12px; font-weight: 700; color: var(--amber); }
.dashbadges .dbempty { font-size: 13px; color: var(--ink-3); line-height: 1.6; }
@media (max-width: 680px) { .dashtiles { grid-template-columns: repeat(3, 1fr); } }

/* ============================================================
   CELEBRATION banner (completion / focus / badge)
   ============================================================ */
.celebrate { position: fixed; inset: 0; z-index: 100; display: none; align-items: center; justify-content: center; padding: 20px; }
.celebrate.show { display: flex; }
.celebrate .celemask { position: absolute; inset: 0; background: rgba(8,16,26,.5); backdrop-filter: blur(5px); animation: viewin .25s; }
.celecard { position: relative; width: min(440px, 100%); background: var(--surface); border: 1px solid var(--line-2); border-radius: 24px;
  padding: 40px 32px 30px; text-align: center; box-shadow: var(--shadow-l); animation: celepop .5s cubic-bezier(.2,1.3,.4,1); }
@keyframes celepop { 0% { transform: scale(.8); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
.celeburst { width: 92px; height: 92px; margin: 0 auto 22px; border-radius: 50%; position: relative;
  background: linear-gradient(135deg, var(--emerald), var(--teal)); display: grid; place-items: center; box-shadow: 0 12px 34px rgba(11,142,149,.4); }
.celeburst::before, .celeburst::after { content: ""; position: absolute; inset: -8px; border-radius: 50%; border: 2px solid var(--teal); opacity: 0; animation: celering 1.1s ease-out .25s infinite; }
.celeburst::after { animation-delay: .55s; }
@keyframes celering { 0% { transform: scale(.9); opacity: .7; } 100% { transform: scale(1.5); opacity: 0; } }
.celeicon { color: #fff; } .celeicon svg { width: 46px; height: 46px; }
.celecard .celesub { font-family: var(--ff-mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--emerald); font-weight: 600; }
.celecard h2 { font-size: 24px; font-weight: 800; letter-spacing: -.02em; margin: 8px 0 8px; line-height: 1.3; }
.celecard p { color: var(--ink-2); font-size: 14.5px; margin: 0 0 22px; }
.cbadges { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 0 0 22px; }
.cbadges .cb { display: flex; flex-direction: column; align-items: center; gap: 5px; background: var(--amber-t); border: 1px solid var(--amber-t2); border-radius: 14px; padding: 12px 14px; min-width: 84px; }
.cbadges .cbi { width: 40px; height: 40px; border-radius: 12px; background: linear-gradient(135deg, #F4B41A, #E8920C); color: #fff; display: grid; place-items: center; }
.cbadges .cbi.tn-rainbow, .dashbadges .dbi.tn-rainbow { color: #5a4a16; }
.cbadges .cbi svg { width: 22px; height: 22px; }
.cbadges .cb span:last-child { font-size: 11.5px; font-weight: 700; color: var(--amber); }
.celecard .celeclose { width: 100%; }

/* ============================================================
   FOCUS timer widget
   ============================================================ */
.focusw { position: fixed; right: 18px; top: 72px; z-index: 96; width: 260px; background: var(--surface);
  border: 1px solid var(--line-2); border-radius: 20px; box-shadow: var(--shadow-l); display: none; overflow: hidden; }
.focusw.show { display: block; animation: celepop .35s cubic-bezier(.2,1.2,.4,1); }
.focusw .fwh { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--line); cursor: move; touch-action: none; user-select: none; }
.focusw .fwh .fwt { cursor: move; }
.focusw.dragging { animation: none; box-shadow: 0 18px 50px rgba(15,40,90,.28); }
.focusw.dragging .fwh, .focusw.dragging .fwh .fwt { cursor: grabbing; }
.focusw .fwt { font-weight: 700; font-size: 13.5px; display: flex; align-items: center; gap: 7px; flex: 1; }
.focusw .fwt svg { width: 16px; height: 16px; color: var(--coral); }
.focusw .fwh button { width: 26px; height: 26px; border: 0; background: transparent; color: var(--ink-3); border-radius: 7px; cursor: pointer; font-size: 14px; display: grid; place-items: center; }
.focusw .fwh button:hover { background: var(--paper-2); color: var(--ink); }
.focusw .fwh button svg { width: 15px; height: 15px; }
.focusw .fwbody { padding: 18px; }
.focusw.mini .fwbody { display: none; }
.focusw .fwring { width: 150px; height: 150px; margin: 0 auto 14px; }
.focusw .fwring svg { width: 100%; height: 100%; }
.focusw .fwpresets { display: flex; gap: 7px; justify-content: center; margin-bottom: 12px; }
.focusw .fwp { border: 1px solid var(--line-2); background: var(--paper); color: var(--ink-2); border-radius: 999px; padding: 6px 13px; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.focusw .fwp.on { background: var(--pri); color: #fff; border-color: var(--pri); }
.focusw .fwctrl { display: flex; gap: 8px; }
.focusw .fwgo { flex: 1; background: linear-gradient(135deg, var(--pri), var(--pri-d)); color: #fff; border: 0; border-radius: 12px; padding: 11px; font-weight: 700; font-size: 14px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
.focusw .fwgo svg { width: 15px; height: 15px; }
.focusw .fwreset { width: 44px; border: 1px solid var(--line-2); background: var(--paper); color: var(--ink-2); border-radius: 12px; cursor: pointer; display: grid; place-items: center; }
.focusw .fwreset svg { width: 16px; height: 16px; }

/* ============================================================
   BADGES page
   ============================================================ */
.badgeview { padding: clamp(36px,6vw,64px) 0 80px; }
.bvhead { display: flex; align-items: center; gap: 14px; margin-bottom: 8px; flex-wrap: wrap; }
.bvhead .ic { width: 46px; height: 46px; border-radius: 14px; background: linear-gradient(135deg, #F4B41A, #E8920C); color: #fff; display: grid; place-items: center; flex: none; }
.bvhead .ic svg { width: 26px; height: 26px; }
.bvhead h1 { font-size: clamp(26px,4vw,38px); font-weight: 800; letter-spacing: -.03em; margin: 0; }
.bvhead .sub { font-family: var(--ff-mono); font-size: 12.5px; color: var(--ink-3); }
.bvhead .bvprog { flex: 1; min-width: 160px; }
.bvhead .bvprog .track { height: 10px; background: var(--paper-2); border-radius: 99px; overflow: hidden; }
.bvhead .bvprog .fill { height: 100%; background: linear-gradient(90deg, #F4B41A, var(--teal)); border-radius: 99px; transition: width .5s; }
.badgegrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; margin-top: 26px; }
.badge { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 20px 16px; text-align: center; box-shadow: var(--shadow-s); position: relative; transition: transform .2s; }
.badge.on:hover { transform: translateY(-3px); }
.badge .bic { width: 58px; height: 58px; margin: 0 auto 12px; border-radius: 16px; display: grid; place-items: center; }
.badge .bic svg { width: 28px; height: 28px; }
.badge.on .bic { color: #fff; filter: drop-shadow(0 6px 14px rgba(0,0,0,.18)); }
.badge .bic.sh-star svg, .badge .bic.sh-diamond svg { width: 22px; height: 22px; }
.badge.off { opacity: .8; }
.badge.off .bic { background: var(--paper-2); color: var(--ink-4); }
/* badge shapes */
.sh-circle { border-radius: 50%; }
.sh-rounded { border-radius: 17px; }
.sh-hex { clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.sh-shield { clip-path: polygon(50% 0, 100% 17%, 100% 60%, 50% 100%, 0 60%, 0 17%); }
.sh-star { clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.sh-diamond { clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
/* badge tones */
.tn-gold { background: linear-gradient(135deg, #F4B41A, #E8920C); } .tn-bronze { background: linear-gradient(135deg, #D08B4F, #A66A2E); }
.tn-silver { background: linear-gradient(135deg, #C3CCD8, #8FA0B3); } .tn-blue { background: linear-gradient(135deg, #4B8BF5, #1D4ED8); }
.tn-teal { background: linear-gradient(135deg, #1EC2B4, #0E8E95); } .tn-emerald { background: linear-gradient(135deg, #19C37D, #0A8E5F); }
.tn-coral { background: linear-gradient(135deg, #FB7185, #E11D6B); } .tn-pink { background: linear-gradient(135deg, #F472B6, #DB2777); }
.tn-purple { background: linear-gradient(135deg, #A78BFA, #7C3AED); } .tn-indigo { background: linear-gradient(135deg, #818CF8, #4F46E5); }
.tn-cyan { background: linear-gradient(135deg, #34D3EE, #0891B2); } .tn-orange { background: linear-gradient(135deg, #FB923C, #EA580C); }
.tn-red { background: linear-gradient(135deg, #F87171, #DC2626); } .tn-amber { background: linear-gradient(135deg, #FBBF24, #D97706); }
.tn-rose { background: linear-gradient(135deg, #FB7299, #E11D6B); } .tn-rainbow { background: conic-gradient(from 200deg, #FFD93D, #FF8FB1, #7FD4FF, #9CF0B4, #C9B0FF, #FFC487, #FFD93D); }
.badge .bn { font-weight: 800; font-size: 14.5px; letter-spacing: -.01em; }
.badge.off .bn { color: var(--ink-3); }
.badge .bd { font-size: 11.5px; color: var(--ink-3); margin-top: 4px; line-height: 1.45; }
.badge .bdate { font-family: var(--ff-mono); font-size: 10px; color: var(--emerald); margin-top: 9px; }
.badge .block { color: var(--ink-4); margin-top: 9px; } .badge .block svg { width: 14px; height: 14px; }

/* chapter reset */
.chresetwrap { text-align: center; margin-top: 22px; }
.chresetbtn { font-size: 12.5px; color: var(--ink-3); background: transparent; border: 1px solid var(--line); border-radius: 999px;
  padding: 8px 16px; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; transition: .16s; }
.chresetbtn:hover { color: var(--coral); border-color: var(--coral); }
.chresetbtn svg { width: 14px; height: 14px; }

/* ============================================================
   MOBILE
   ============================================================ */
@media (max-width: 760px) {
  body { font-size: 15.5px; }
  .topbar { gap: 4px; padding: 0 9px; height: 56px; }
  .brand { gap: 8px; }
  .brand .bt { display: none; }                 /* 모바일: 로고만 (메모·로그인 버튼 공간 확보) */
  .topsearch { min-width: 0; padding: 9px; flex: none; }
  .topsearch > span { display: none; }          /* 검색 안내문/단축키 숨김 → 아이콘만 */
  .topbar .libbtn { display: none; }            /* 라이브러리(햄버거 메뉴에 있음) 숨김 */
  .topbtn { padding: 8px 10px; }
  .topbtn.authbtn .tlabel { display: none; }    /* 로그인/로그아웃 아이콘만 */
  .topbtn.authbtn { padding: 9px 11px; }
  .iconbtn { width: 36px; height: 36px; }
  .iconbtn svg { width: 17px; height: 17px; }
  .readbar { height: 3px; }

  .hero { padding: 36px 0 28px; }
  .hero .pulse { display: none; }
  .hero .stats { gap: 18px; }
  .hero .cta { gap: 9px; }
  .hero .cta .btn-pri, .hero .cta .btn-ghost { font-size: 14px; padding: 12px 16px; }
  .cardgrid { grid-template-columns: 1fr; }
  .partsec { margin-top: 34px; }

  .chread { padding: 18px 0 70px; }
  .chhero .bignum { font-size: 84px; top: -14px; }
  .subhead { gap: 11px; margin: 30px 0 14px; }
  .subhead .sn { width: 30px; height: 30px; font-size: 13px; }
  .ovcard { padding: 20px 18px; }
  .bul > li { padding-left: 20px; }
  .figc.w-md, .figc.w-sm, .figc.w-lg { max-width: 100%; }
  .qcard .qa-in { padding-left: 20px; padding-right: 18px; }
  .section-h { margin: 40px 0 18px; }
  .chnav { flex-direction: column; }

  .fzpop { right: 9px; left: 9px; width: auto; }
  .lightbox .lbnav { width: 42px; height: 42px; }
  .lightbox .lbclose { top: 12px; right: 12px; }
  .exam .ebody { padding: 24px 16px; }
  .exam .efoot { flex-wrap: wrap; }
  .dqopts { grid-template-columns: 1fr !important; }
  .lockview .lbtns { flex-direction: column; }
  .lockview .lbtns .btn-pri, .lockview .lbtns .btn-ghost { width: 100%; justify-content: center; }
}
@media (max-width: 430px) {
  .topbar { gap: 3px; padding: 0 7px; }
  .hero h1 { font-size: 34px; }
  .hero .stat b { font-size: 26px; }
}

/* still mode (screenshot/verify) */
html.still .reveal { opacity: 1 !important; transform: none !important; }
html.still .pulse path { animation: none; stroke-dashoffset: 0; }
html.still .fzpop { animation: none !important; }
html.still .searchbox, html.still .pentool, html.still .lbinner, html.still .exam, html.still .memodrawer, html.still .navdrawer, html.still .loginbox, html.still .celecard, html.still .celemask, html.still .celeburst::before, html.still .celeburst::after, html.still .focusw { animation: none !important; }
html.still .searchmodal, html.still .lightbox, html.still .drawer-mask, html.still .memodrawer, html.still .navdrawer { transition: none !important; }
html.tailonly .chhero, html.tailonly #ov, html.tailonly .subsec, html.tailonly .crumb { display: none !important; }
html.tblonly .chhero, html.tblonly #ov, html.tblonly .subhead, html.tblonly .bul, html.tblonly .blk,
html.tblonly .figc, html.tblonly #prac, html.tblonly #klp, html.tblonly .donebtn, html.tblonly .chnav,
html.tblonly .crumb { display: none !important; }