:root{
  color-scheme: dark;
  /* ── 색 · 어두운 화면 (한밤의 전시실) */
  --bg:#0b0e14; --surface:#11151d; --surface-2:#151a23; --raise:#191f29; --sunk:#0c1017;
  --line:#2a3240; --line-soft:#1d242f; --hair:rgba(239,233,220,.08);
  --ink:#f0eadd; --ink-2:#c2c6cd; --ink-3:#9098a5;
  --accent:#d6b36a; --accent-2:#e9cd92; --accent-3:#a9884a; --accent-ink:#15110a; --accent-soft:rgba(214,179,106,.12); --accent-line:rgba(214,179,106,.36);
  --up:#62a8ff; --down:#ff9357; --up-soft:rgba(98,168,255,.16); --down-soft:rgba(255,147,87,.16); --ok:#45c486;
  --grid:#10151e; --grid-major:#161d28; --figure:#212c3c; --figure-2:#2b394d; --formula:#243145;
  --glass:rgba(11,14,20,.78); --veil:rgba(11,14,20,.55);
  --shadow:0 24px 60px -28px rgba(0,0,0,.75);
  --e1:0 1px 0 rgba(255,255,255,.025) inset, 0 1px 2px rgba(0,0,0,.28);
  --e2:0 1px 0 rgba(255,255,255,.03) inset, 0 2px 4px -1px rgba(0,0,0,.3), 0 14px 32px -16px rgba(0,0,0,.6);
  --e3:0 2px 6px -2px rgba(0,0,0,.35), 0 30px 70px -28px rgba(0,0,0,.8);
  --f-geo:#e2b54f; --f-alg:#ea6a50; --f-ana:#5d9cec; --f-nt:#9b8df3; --f-top:#3fc4a1; --f-prob:#cf84dc;
  --f-log:#a9b3c2; --f-comb:#98c95a; --f-app:#f09450; --f-cs:#4fc8e2; --f-edu:#ef7ca5;
  /* ── 글꼴 */
  --serif-ko:'Noto Serif KR','Noto Serif CJK KR','Nanum Myeongjo','AppleMyungjo',serif;
  --sans:'IBM Plex Sans KR','Apple SD Gothic Neo','Noto Sans CJK KR','Malgun Gothic',system-ui,sans-serif;
  --display:'STIX Two Text','Cambria','Times New Roman',serif;
  --mono:'IBM Plex Mono',ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace;
  /* ── 글자 크기 · 1·2 비율의 단계 (가장 작은 글씨 12px) */
  --fs-2xs:12px; --fs-xs:12.5px; --fs-sm:13.5px; --fs-base:15px; --fs-md:16.5px; --fs-lg:19px; --fs-xl:23px;
  --fs-2xl:clamp(24px, 1.2vw + 16px, 30px);
  --fs-3xl:clamp(30px, 2.4vw + 18px, 46px);
  --fs-4xl:clamp(36px, 4vw + 16px, 64px);
  --fs-hero:clamp(54px, 8.6vw, 128px);
  --lh-tight:1.14; --lh-snug:1.32; --lh-body:1.65; --lh-read:1.8;
  --track-caps:.16em;
  /* ── 간격 · 4px 격자 */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px; --s-6:24px; --s-7:32px; --s-8:40px; --s-9:56px; --s-10:72px; --s-11:96px;
  --gutter:24px; --page-max:1360px;
  /* ── 모서리 · 조작 요소 10 · 카드 14 · 판 18 */
  --r-xs:4px; --r-sm:7px; --r-ctl:10px; --r-card:14px; --r-panel:18px; --r-pill:999px;
  /* ── 조작 요소 높이 */
  --h-sm:32px; --h-md:38px; --h-lg:46px;
  /* ── 움직임 */
  --dur-1:120ms; --dur-2:200ms; --dur-3:320ms; --dur-4:560ms; --dur-5:900ms;
  --ease-out:cubic-bezier(.2,.7,.2,1); --ease-io:cubic-bezier(.65,0,.35,1); --ease-soft:cubic-bezier(.3,.6,.3,1);
  --hdr:64px; --insp:420px;
}
@media (prefers-color-scheme: light){
  :root:not([data-theme='dark']):not([data-mtheme='dark']){
    color-scheme: light;
    /* ── 색 · 밝은 화면 (상아빛 종이) */
    --bg:#f6f3ec; --surface:#fffdf9; --surface-2:#faf7f1; --raise:#ffffff; --sunk:#efeae0;
    --line:#d9d1c1; --line-soft:#e8e2d6; --hair:rgba(40,30,15,.09);
    --ink:#1b1814; --ink-2:#474036; --ink-3:#6b6255;
    --accent:#86621a; --accent-2:#a17a2a; --accent-3:#6e4f12; --accent-ink:#ffffff; --accent-soft:rgba(134,98,26,.09); --accent-line:rgba(134,98,26,.32);
    --up:#1d63bd; --down:#a9470f; --up-soft:rgba(29,99,189,.1); --down-soft:rgba(169,71,15,.1); --ok:#17774a;
    --grid:#ebe6db; --grid-major:#e0d9cb; --figure:#d2c9b8; --figure-2:#bcb19c; --formula:#d6cdbc;
    --glass:rgba(246,243,236,.84); --veil:rgba(246,243,236,.6);
    --shadow:0 24px 50px -30px rgba(60,44,18,.3);
    --e1:0 1px 2px rgba(60,44,18,.06);
    --e2:0 1px 2px rgba(60,44,18,.05), 0 14px 30px -18px rgba(60,44,18,.24);
    --e3:0 2px 6px -2px rgba(60,44,18,.1), 0 30px 64px -30px rgba(60,44,18,.34);
    --f-geo:#8c680d; --f-alg:#bd3b25; --f-ana:#2867bb; --f-nt:#6451cf; --f-top:#0f775e; --f-prob:#9846ad;
    --f-log:#5a6475; --f-comb:#4a7617; --f-app:#a65213; --f-cs:#0f7389; --f-edu:#bb3765;
  }
}
:root[data-theme='light']:not([data-mtheme='dark']),:root[data-mtheme='light']{
  color-scheme: light;
  --bg:#f6f3ec; --surface:#fffdf9; --surface-2:#faf7f1; --raise:#ffffff; --sunk:#efeae0;
  --line:#d9d1c1; --line-soft:#e8e2d6; --hair:rgba(40,30,15,.09);
  --ink:#1b1814; --ink-2:#474036; --ink-3:#6b6255;
  --accent:#86621a; --accent-2:#a17a2a; --accent-3:#6e4f12; --accent-ink:#ffffff; --accent-soft:rgba(134,98,26,.09); --accent-line:rgba(134,98,26,.32);
  --up:#1d63bd; --down:#a9470f; --up-soft:rgba(29,99,189,.1); --down-soft:rgba(169,71,15,.1); --ok:#17774a;
  --grid:#ebe6db; --grid-major:#e0d9cb; --figure:#d2c9b8; --figure-2:#bcb19c; --formula:#d6cdbc;
  --glass:rgba(246,243,236,.84); --veil:rgba(246,243,236,.6);
  --shadow:0 24px 50px -30px rgba(60,44,18,.3);
  --e1:0 1px 2px rgba(60,44,18,.06);
  --e2:0 1px 2px rgba(60,44,18,.05), 0 14px 30px -18px rgba(60,44,18,.24);
  --e3:0 2px 6px -2px rgba(60,44,18,.1), 0 30px 64px -30px rgba(60,44,18,.34);
  --f-geo:#8c680d; --f-alg:#bd3b25; --f-ana:#2867bb; --f-nt:#6451cf; --f-top:#0f775e; --f-prob:#9846ad;
  --f-log:#5a6475; --f-comb:#4a7617; --f-app:#a65213; --f-cs:#0f7389; --f-edu:#bb3765;
}
:root[data-theme='dark']:not([data-mtheme='light']),:root[data-mtheme='dark']{ color-scheme: dark; }
@media (max-width:640px){ :root{ --gutter:16px; } }

*,*::before,*::after{ box-sizing:border-box; }
[hidden]{ display:none !important; }
html,body{ background:var(--bg); }
body{ margin:0; color:var(--ink); font-family:var(--sans); font-size:15px; line-height:1.6; -webkit-font-smoothing:antialiased; }
body.gate-lock{ overflow:hidden; }
button{ font:inherit; color:inherit; }
a{ color:var(--accent); text-underline-offset:3px; }
:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
:where(a):focus-visible{ border-radius:3px; }
#main:focus,#main:focus-visible{ outline:none; }
h1,h2,h3,h4{ text-wrap:balance; margin:0; font-weight:600; }
p{ margin:0; }
ul,ol{ margin:0; padding:0; list-style:none; }
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.mono{ font-family:var(--mono); font-variant-numeric:tabular-nums; }
.fc{ --c:var(--ink-3); }
.fc-geo{ --c:var(--f-geo); } .fc-alg{ --c:var(--f-alg); } .fc-ana{ --c:var(--f-ana); } .fc-nt{ --c:var(--f-nt); } .fc-top{ --c:var(--f-top); } .fc-prob{ --c:var(--f-prob); }
.fc-log{ --c:var(--f-log); } .fc-comb{ --c:var(--f-comb); } .fc-app{ --c:var(--f-app); } .fc-cs{ --c:var(--f-cs); } .fc-edu{ --c:var(--f-edu); }

/* 배경 */
#bg{ position:fixed; inset:0; width:100%; height:100%; z-index:0; pointer-events:none; }
#app{ position:relative; z-index:1; transition:opacity 1.1s ease, transform 1.4s cubic-bezier(.2,.7,.2,1); }
body.pre-enter #app{ opacity:.35; transform:scale(1.012); }

/* 대문 */
.gate{ position:fixed; inset:0; z-index:1000; background:#06080c; perspective:1800px; overflow:hidden; transition:opacity .9s ease; color:#efe6d2; }
.gate.is-open{ opacity:0; pointer-events:none; }
.gate-lintel{ position:absolute; left:0; right:0; top:0; height:74px; display:flex; align-items:center; justify-content:center; background:linear-gradient(#17120c,#0f0c08); border-bottom:1px solid rgba(202,163,90,.45); box-shadow:0 10px 30px rgba(0,0,0,.6); z-index:3; }
.gate-lintel .gr{ font-family:var(--display); letter-spacing:.42em; font-size:clamp(11px,1.6vw,19px); color:#caa35a; white-space:nowrap; padding-left:.42em; }
.gate-glow{ position:absolute; inset:74px 0 0 0; background:radial-gradient(ellipse 60% 70% at 50% 55%, rgba(255,240,205,.98), rgba(226,190,120,.5) 38%, rgba(10,12,16,0) 72%); opacity:0; transition:opacity 1.5s ease .15s; }
.gate-doors{ position:absolute; inset:74px 0 0 0; display:flex; transform-style:preserve-3d; }
.door{ position:relative; width:50%; height:100%; overflow:hidden; backface-visibility:hidden; transition:transform 1.7s cubic-bezier(.62,.02,.18,1); background:radial-gradient(ellipse 90% 60% at 50% 45%, rgba(202,163,90,.07), rgba(0,0,0,0) 70%), linear-gradient(90deg,#15110c,#1d1711 50%,#15110c); }
.door-l{ transform-origin:0 50%; box-shadow:inset -2px 0 0 rgba(0,0,0,.8), inset -12px 0 30px rgba(0,0,0,.45); }
.door-r{ transform-origin:100% 50%; box-shadow:inset 2px 0 0 rgba(0,0,0,.8), inset 12px 0 30px rgba(0,0,0,.45); }
.door svg{ position:absolute; top:0; height:100%; width:100vw; }
.door-l svg{ left:0; } .door-r svg{ left:-50vw; }
.eng{ fill:none; stroke:#c9a35b; stroke-width:1.3; vector-effect:non-scaling-stroke; stroke-linecap:round; opacity:.82; stroke-dasharray:1; stroke-dashoffset:1; animation:draw 2.6s cubic-bezier(.45,.05,.3,1) forwards; animation-delay:var(--d,0s); }
.eng.faint{ opacity:.32; } .eng.dash{ stroke-dasharray:.012 .012; animation:none; stroke-dashoffset:0; opacity:.35; }
.eng-t{ fill:#c9a35b; font-family:var(--display); font-size:30px; opacity:0; animation:fadein 1s ease forwards; animation-delay:var(--d,1.8s); }
@keyframes draw{ to{ stroke-dashoffset:0; } }
@keyframes fadein{ to{ opacity:.85; } }
.gate-ui{ position:absolute; left:50%; top:calc(50% + 37px); transform:translate(-50%,-50%); width:min(92vw,540px); z-index:4; transition:opacity .5s ease, transform .6s ease; }
.gate-card{ text-align:center; padding:34px 30px 28px; background:rgba(8,9,12,.8); border:1px solid rgba(202,163,90,.42); border-radius:3px; box-shadow:0 30px 80px rgba(0,0,0,.7), inset 0 0 0 5px rgba(8,9,12,.8), inset 0 0 0 6px rgba(202,163,90,.18); backdrop-filter:blur(3px); animation:rise 1s cubic-bezier(.2,.7,.2,1) 1.2s both; }
@keyframes rise{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }
.gate-brand{ font-family:var(--display); letter-spacing:.5em; font-size:13px; color:#caa35a; padding-left:.5em; }
.gate-q{ font-family:var(--serif-ko); font-weight:600; font-size:clamp(24px,4.6vw,36px); line-height:1.3; margin:16px 0 10px; color:#f3ead6; }
.gate-trans{ font-size:13px; color:#a8997a; line-height:1.6; }
.gate-trans b{ font-weight:500; color:#d8c69c; }
.btn-gate{ margin-top:24px; appearance:none; border:1px solid #caa35a; background:rgba(202,163,90,.1); color:#f6e7c1; padding:13px 44px; font-family:var(--serif-ko); font-size:17px; letter-spacing:.14em; cursor:pointer; border-radius:2px; transition:background .25s, box-shadow .25s; }
.btn-gate:hover{ background:rgba(202,163,90,.22); box-shadow:0 0 34px rgba(202,163,90,.32); }
.gate-hint{ margin-top:12px; font-size:12px; color:#7d735f; }
.gate.is-opening .gate-ui{ opacity:0; transform:translate(-50%,-44%); }
.gate.is-opening .door-l{ transform:rotateY(-104deg); }
.gate.is-opening .door-r{ transform:rotateY(104deg); }
.gate.is-opening .gate-glow{ opacity:1; }
.gate.is-opening .eng{ stroke:#f3d99a; opacity:1; }

/* 머리말 */
.top{ position:sticky; top:env(safe-area-inset-top,0px); z-index:70; background:var(--glass); backdrop-filter:blur(14px) saturate(1.2); -webkit-backdrop-filter:blur(14px) saturate(1.2); border-bottom:1px solid var(--line-soft); }
.top-in{ padding-inline:20px; display:flex; align-items:center; gap:14px; min-height:58px; }
.brand{ display:flex; align-items:center; gap:10px; background:none; border:0; padding:0; cursor:pointer; flex:none; }
.brand svg{ width:30px; height:30px; }
.brand svg *{ fill:none; stroke:var(--accent); stroke-width:1.4; }
.brand-t{ display:flex; flex-direction:column; line-height:1.1; text-align:left; }
.brand-en{ font-family:var(--display); font-size:17px; letter-spacing:.24em; font-weight:600; }
.brand-ko{ font-size:11.5px; color:var(--ink-3); letter-spacing:.06em; margin-top:2px; }
.brand-ko:lang(ko){ letter-spacing:.01em; font-size:12px; }
.nav{ display:flex; align-items:center; gap:3px; overflow-x:auto; scrollbar-width:none; min-width:0; padding:0 16px 8px; }
.nav .ng{ font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); padding:0 6px 0 14px; white-space:nowrap; border-left:1px solid var(--line-soft); margin-left:6px; }
.nav .ng:first-child{ border-left:0; margin-left:0; padding-left:4px; }
.nav::-webkit-scrollbar{ display:none; }
.tab{ appearance:none; background:none; border:0; padding:6px 12px; font-size:14px; color:var(--ink-2); cursor:pointer; border-radius:999px; white-space:nowrap; transition:color .2s, background .2s; }
.tab:hover{ color:var(--ink); background:var(--accent-soft); }
.tab[aria-current='page']{ color:var(--accent-ink); background:var(--accent); font-weight:600; }
.search{ position:relative; flex:none; width:300px; margin-left:auto; }
.search input{ width:100%; background:var(--surface); border:1px solid var(--line); border-radius:999px; padding:8px 34px; color:var(--ink); font:inherit; font-size:14px; }
.search input::placeholder{ color:var(--ink-3); }
.search .ico{ position:absolute; left:12px; top:50%; transform:translateY(-50%); width:15px; height:15px; stroke:var(--ink-3); fill:none; stroke-width:1.6; pointer-events:none; }
.search kbd{ position:absolute; right:12px; top:50%; transform:translateY(-50%); font-family:var(--mono); font-size:11px; color:var(--ink-3); border:1px solid var(--line); border-radius:5px; padding:0 5px; }
.results{ position:absolute; right:0; top:calc(100% + 8px); width:min(420px,calc(100vw - 32px)); max-height:min(70vh,520px); overflow:auto; background:var(--raise); border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow); padding:6px; z-index:80; }
.res-g{ font-size:11.5px; letter-spacing:.14em; color:var(--ink-3); padding:8px 10px 4px; font-family:var(--mono); }
.res-g:lang(ko){ letter-spacing:.02em; font-family:var(--sans); font-size:12px; }
.res{ display:flex; gap:10px; align-items:baseline; width:100%; text-align:left; background:none; border:0; padding:8px 10px; border-radius:8px; cursor:pointer; }
.res:hover,.res.on{ background:var(--accent-soft); }
.res b{ font-weight:500; } .res small{ color:var(--ink-3); font-size:12.5px; }
.res-empty{ padding:14px; color:var(--ink-3); font-size:13.5px; }

/* 공통 */
#main{ transition:margin-right .35s cubic-bezier(.2,.7,.2,1); }
/* 페이지가 들어오는 움직임은 ui.css 에 있다 */
.appview{ height:calc(100dvh - var(--hdr)); display:flex; flex-direction:column; gap:12px; padding:14px 20px 16px; }
.page{ max-width:1360px; margin:0 auto; padding:32px 24px 80px; }
.eyebrow{ font-family:var(--display); font-style:italic; font-size:15px; color:var(--accent); }
.caps{ font-style:normal; font-family:var(--mono); font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); }
.caps:lang(ko){ font-family:var(--sans); font-size:12.5px; letter-spacing:.02em; font-weight:500; }
.vh{ display:grid; gap:8px; margin-bottom:24px; max-width:880px; }
.vh h2{ font-family:var(--serif-ko); font-size:clamp(24px,3vw,32px); line-height:1.25; }
.vh p{ color:var(--ink-2); font-size:15.5px; line-height:1.7; max-width:68ch; }
.btn{ appearance:none; display:inline-flex; align-items:center; gap:8px; border:1px solid var(--line); background:var(--surface); color:var(--ink); padding:8px 15px; border-radius:10px; font-size:14px; cursor:pointer; transition:border-color .2s, background .2s; text-decoration:none; white-space:nowrap; }
.btn:hover{ border-color:var(--accent); }
.btn.primary{ background:var(--accent); color:var(--accent-ink); border-color:var(--accent); font-weight:600; }
.btn.sm{ padding:6px 11px; font-size:13px; border-radius:8px; }
.field-in{ background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:7px 12px; color:var(--ink); font:inherit; font-size:14px; min-width:0; }
.chips{ display:flex; flex-wrap:wrap; gap:6px; }
.chip{ appearance:none; display:inline-flex; align-items:center; gap:6px; border:1px solid var(--line); background:var(--surface); color:var(--ink-2); font-size:13px; padding:4px 10px; border-radius:999px; cursor:pointer; white-space:nowrap; }
.chip:hover{ color:var(--ink); border-color:var(--ink-3); }
.chip[aria-pressed='true']{ color:var(--ink); border-color:var(--c,var(--accent)); background:color-mix(in srgb, var(--c,var(--accent)) 14%, transparent); }
.chip i{ width:8px; height:8px; border-radius:50%; background:var(--c,var(--ink-3)); flex:none; }
.chip small{ font-family:var(--mono); font-size:11.5px; color:var(--ink-3); font-variant-numeric:tabular-nums; }
.chip[aria-pressed='true'] small{ color:var(--ink-2); }
.chip.static{ cursor:default; }
.pchip{ appearance:none; display:inline-flex; align-items:center; gap:6px; border:0; background:color-mix(in srgb, var(--c,var(--accent)) 13%, transparent); color:var(--ink); font-size:13px; padding:3px 10px 3px 8px; border-radius:6px; cursor:pointer; white-space:nowrap; }
.pchip:hover{ background:color-mix(in srgb, var(--c,var(--accent)) 26%, transparent); }
.pchip i{ width:6px; height:6px; border-radius:50%; background:var(--c); }
.pchip small{ color:var(--ink-3); font-family:var(--mono); font-size:11.5px; }
.seg{ display:inline-flex; border:1px solid var(--line); border-radius:10px; overflow:hidden; background:var(--surface); }
.seg button{ appearance:none; border:0; background:none; padding:6px 12px; font-size:13px; color:var(--ink-2); cursor:pointer; border-left:1px solid var(--line-soft); }
.seg button:first-child{ border-left:0; }
.seg button[aria-pressed='true']{ background:var(--ink); color:var(--bg); font-weight:600; }
.lbl{ font-size:13px; color:var(--ink-3); }
.toggle{ display:inline-flex; align-items:center; gap:6px; font-size:13px; color:var(--ink-2); cursor:pointer; user-select:none; }
.toggle input{ accent-color:var(--accent); }
.sw{ width:11px; height:11px; border-radius:3px; display:inline-block; flex:none; }
.sw.up{ background:var(--up); } .sw.dn{ background:var(--down); } .sw.sel{ background:var(--ink); } .sw.path{ background:var(--accent); }
.empty{ padding:40px; text-align:center; color:var(--ink-3); }

/* ── 지도 */
.intro{ display:flex; align-items:center; justify-content:space-between; gap:12px 28px; flex-wrap:wrap; }
.intro-t{ display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; }
.intro h1{ font-family:var(--display); font-size:30px; letter-spacing:.16em; font-weight:500; line-height:1; }
.intro-t p{ color:var(--ink-2); font-size:14px; }
.intro-t p b{ color:var(--ink); font-weight:600; }
.howto{ display:flex; gap:6px 18px; flex-wrap:wrap; font-size:13.5px; color:var(--ink-2); counter-reset:h; }
.howto li{ display:flex; align-items:center; gap:7px; }
.howto li::before{ counter-increment:h; content:counter(h); display:inline-flex; width:20px; height:20px; border-radius:50%; background:var(--accent-soft); color:var(--accent); font-family:var(--mono); font-size:11px; align-items:center; justify-content:center; flex:none; }
.bar{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 18px; }
.bar .grow{ flex:1; }
.legend{ display:flex; flex-wrap:wrap; gap:6px 14px; font-size:13px; color:var(--ink-2); align-items:center; }
.legend span{ display:inline-flex; align-items:center; gap:6px; }
.tryit{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.mapview{ flex:1; min-height:0; overflow:auto; border:1px solid var(--line); border-radius:14px; background:var(--surface); position:relative; overscroll-behavior:contain; }
.mapgrid{ display:grid; position:relative; }
.mc{ border-bottom:1px solid var(--line-soft); }
.corner{ position:sticky; top:0; left:0; z-index:8; background:var(--surface); border-right:1px solid var(--line); border-bottom:1px solid var(--line); display:flex; flex-direction:column; justify-content:flex-end; padding:10px; font-size:11.5px; color:var(--ink-3); line-height:1.4; }
.lane-h{ position:sticky; top:0; z-index:6; appearance:none; background:var(--surface); border:0; border-bottom:1px solid var(--line); border-left:1px solid var(--line-soft); text-align:left; cursor:pointer; padding:10px 9px 9px; display:grid; gap:1px; }
.lane-h::before{ content:''; height:3px; border-radius:2px; background:var(--c); margin-bottom:7px; }
.lane-h b{ font-size:13.5px; font-weight:600; }
.lane-h small{ font-family:var(--mono); font-size:11.5px; color:var(--ink-3); }
.lane-h:hover{ background:var(--surface-2); }
.era-h{ position:sticky; left:0; z-index:5; background:var(--surface); border-right:1px solid var(--line); display:flex; flex-direction:column; gap:3px; padding:12px 12px; }
.era-h b{ font-family:var(--serif-ko); font-size:14.5px; line-height:1.35; }
.era-h small{ font-size:12px; color:var(--ink-3); line-height:1.45; }
.era-h .n{ font-family:var(--mono); font-size:11.5px; color:var(--ink-3); margin-top:6px; }
.era-h.odd,.cell.odd{ background-color:var(--surface-2); }
.cell{ display:flex; flex-direction:column; gap:5px; padding:9px 6px; border-left:1px solid var(--line-soft); background-image:linear-gradient(color-mix(in srgb, var(--c) 5%, transparent), color-mix(in srgb, var(--c) 5%, transparent)); container-type:inline-size; }
.pill{ position:relative; z-index:3; display:flex; align-items:center; gap:4px; width:100%; min-height:28px; padding:3px 6px; border-radius:7px; border:1px solid var(--line); background:var(--raise); color:var(--ink); font-size:12.8px; cursor:pointer; text-align:left; transition:opacity .25s, background .2s, border-color .2s, box-shadow .2s; }
.pill .nm{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:500; }
.pill .yr{ font-family:var(--mono); font-size:10.5px; color:var(--ink-3); flex:none; letter-spacing:-.02em; }
.pill .dots{ display:flex; gap:2px; flex:none; }
.pill .dots i{ width:5px; height:5px; border-radius:50%; }
.pill .gb{ display:none; font-style:normal; font-family:var(--mono); font-size:10px; line-height:15px; padding:0 3px; border-radius:4px; color:#fff; flex:none; }
.pill:hover{ border-color:var(--c); background:var(--surface-2); }
@container (max-width:124px){ .pill .yr,.pill .dots{ display:none; } }
.mapgrid.focus .pill .yr,.mapgrid.focus .pill .dots{ display:none; }
.mapgrid.focus .pill{ opacity:.18; }
.mapgrid.focus .pill.is-sel,.mapgrid.focus .pill.is-anc,.mapgrid.focus .pill.is-desc,.mapgrid.focus .pill.is-path{ opacity:1; }
.pill.is-sel{ background:var(--ink); color:var(--bg); border-color:var(--ink); box-shadow:0 0 0 3px color-mix(in srgb, var(--ink) 22%, transparent); }
.pill.is-sel .yr{ color:inherit; opacity:.7; }
.pill.is-anc{ background:color-mix(in srgb, var(--up) var(--t,24%), var(--raise)); border-color:var(--up); }
.pill.is-desc{ background:color-mix(in srgb, var(--down) var(--t,24%), var(--raise)); border-color:var(--down); }
.pill.is-path{ background:color-mix(in srgb, var(--accent) 22%, var(--raise)); border-color:var(--accent); }
.pill.is-anc .gb{ display:inline-block; background:var(--up); }
.pill.is-desc .gb{ display:inline-block; background:var(--down); }
.pill.is-path .gb{ display:inline-block; background:var(--accent); color:var(--accent-ink); }
.pill.flash{ animation:flash 1.2s ease 2; }
@keyframes flash{ 50%{ box-shadow:0 0 0 5px color-mix(in srgb, var(--accent) 45%, transparent); } }
.map-lines{ position:absolute; left:0; top:0; z-index:2; pointer-events:none; overflow:visible; }
.ln{ fill:none; stroke-width:1.5; opacity:.72; stroke-linecap:round; }
.ln.up{ stroke:var(--up); } .ln.dn{ stroke:var(--down); } .ln.path{ stroke:var(--accent); stroke-width:2.6; opacity:1; }
.ln.d1{ stroke-width:2.6; opacity:1; }
.ln.pv{ opacity:.6; stroke-width:1.8; }
.mk-up{ fill:var(--up); } .mk-dn{ fill:var(--down); } .mk-path{ fill:var(--accent); }
.threadbar{ display:flex; align-items:center; gap:10px; padding:8px 12px; border-radius:10px; background:var(--accent-soft); border:1px solid color-mix(in srgb, var(--accent) 35%, transparent); font-size:13.5px; }
.threadbar b{ font-family:var(--serif-ko); }

/* ── 인물 패널 */
.insp{ position:fixed; top:var(--hdr); right:0; bottom:0; width:var(--insp); z-index:60; background:var(--raise); border-left:1px solid var(--line); transform:translateX(102%); transition:transform .35s cubic-bezier(.2,.7,.2,1); display:flex; flex-direction:column; box-shadow:-24px 0 60px -40px rgba(0,0,0,.6); }
body.insp-open .insp{ transform:none; }
@media (min-width:1180px){ body.insp-open #main{ margin-right:var(--insp); } }
.insp-top{ display:flex; align-items:center; justify-content:space-between; gap:8px; padding:10px 14px; border-bottom:1px solid var(--line-soft); }
.insp-top .grip{ display:none; }
.ibtn{ appearance:none; border:1px solid var(--line); background:var(--surface); border-radius:9px; height:34px; min-width:34px; padding:0 10px; cursor:pointer; font-size:13.5px; color:var(--ink-2); }
.ibtn:hover{ color:var(--ink); border-color:var(--accent); }
.ibtn[disabled]{ opacity:.35; cursor:default; }
.insp-body{ overflow:auto; padding:20px 22px 48px; display:grid; gap:18px; align-content:start; }
.ih{ display:grid; gap:4px; }
.ih h2{ font-family:var(--serif-ko); font-size:29px; line-height:1.2; }
.ih .en{ font-family:var(--display); font-style:italic; font-size:17px; color:var(--ink-2); }
.ih .meta{ display:flex; flex-wrap:wrap; gap:4px 14px; font-size:13px; color:var(--ink-3); margin-top:4px; }
.ih .meta .mono{ color:var(--ink); }
.lead{ font-size:15px; line-height:1.7; }
.counts{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.count-b{ appearance:none; text-align:left; border:1px solid var(--line); border-radius:12px; padding:10px 12px; background:var(--surface); cursor:pointer; display:grid; gap:0; }
.count-b b{ font-family:var(--display); font-size:26px; font-weight:500; line-height:1.1; font-variant-numeric:tabular-nums lining-nums; }
.count-b span{ font-size:12.5px; color:var(--ink-2); display:flex; align-items:center; gap:6px; }
.count-b.up{ border-color:color-mix(in srgb, var(--up) 55%, transparent); background:var(--up-soft); }
.count-b.dn{ border-color:color-mix(in srgb, var(--down) 55%, transparent); background:var(--down-soft); }
.itabs{ position:sticky; top:-20px; z-index:2; background:var(--raise); padding:6px 0; }
.itabs .seg{ width:100%; display:grid; grid-template-columns:repeat(4,1fr); }
.infl{ display:grid; gap:12px; }
.infl-h{ display:flex; align-items:center; gap:8px; }
.infl-h b{ font-size:15px; }
.infl-h .mono{ font-size:12px; color:var(--ink-3); margin-left:auto; }
.gen{ display:grid; gap:6px; padding-left:12px; border-left:2px solid var(--gc); }
.gen .gl{ font-size:12.5px; color:var(--ink-3); }
.infl.up .gen{ --gc:color-mix(in srgb, var(--up) 60%, transparent); }
.infl.dn .gen{ --gc:color-mix(in srgb, var(--down) 60%, transparent); }
.rrow{ appearance:none; display:grid; grid-template-columns:auto 1fr; gap:2px 10px; text-align:left; border:1px solid var(--line-soft); background:var(--surface); border-radius:10px; padding:8px 10px; cursor:pointer; align-items:baseline; }
.rrow:hover{ border-color:var(--ink-3); }
.rrow b{ font-family:var(--serif-ko); font-size:15px; font-weight:600; }
.rrow .ry{ font-family:var(--mono); font-size:12px; color:var(--ink-3); }
.rrow .rn{ grid-column:1 / -1; font-size:13px; line-height:1.5; color:var(--ink-2); display:flex; gap:6px; align-items:baseline; }
.kb{ font-family:var(--mono); font-size:11px; border-radius:4px; padding:0 5px; border:1px solid var(--line); color:var(--ink-3); flex:none; }
.kb.t{ color:var(--accent); border-color:color-mix(in srgb, var(--accent) 50%, transparent); }
.gchip{ appearance:none; border:1px solid var(--line-soft); background:var(--surface); border-radius:7px; padding:3px 9px; font-size:13px; cursor:pointer; }
.gchip:hover{ border-color:var(--ink-3); }
.gchip small{ color:var(--ink-3); font-family:var(--mono); font-size:11px; margin-left:4px; }
.infl .none{ font-size:13.5px; color:var(--ink-3); }
.isec{ display:grid; gap:10px; }
.isec > b{ font-size:12px; letter-spacing:.14em; color:var(--ink-3); font-family:var(--mono); font-weight:500; }
.isec > b:lang(ko),.blk > b:lang(ko){ letter-spacing:.02em; font-family:var(--sans); font-size:12.5px; font-weight:600; }
.dot{ display:grid; gap:7px; }
.dot li{ padding-left:15px; position:relative; font-size:14.5px; }
.dot li::before{ content:''; position:absolute; left:2px; top:.7em; width:6px; height:6px; border-radius:50%; background:var(--c,var(--accent)); }
.dworks li{ display:grid; grid-template-columns:58px 1fr; gap:12px; padding:9px 0; border-top:1px solid var(--line-soft); }
.dworks li:first-child{ border-top:0; }
.dworks .y{ font-family:var(--mono); font-size:12px; color:var(--ink-3); text-align:right; padding-top:3px; }
.dworks .t{ font-family:var(--serif-ko); font-weight:600; font-size:15px; }
.dworks .o{ font-family:var(--display); font-style:italic; color:var(--ink-3); font-size:14px; overflow-wrap:anywhere; }
.dworks .n{ font-size:13.5px; color:var(--ink-2); line-height:1.6; }
.links{ display:flex; flex-wrap:wrap; gap:8px; }
.links a{ font-size:13px; border:1px solid var(--line); border-radius:8px; padding:6px 10px; text-decoration:none; color:var(--ink-2); }
.links a:hover{ color:var(--ink); border-color:var(--accent); }
.fbar{ border-left:4px solid var(--c); padding-left:14px; display:grid; gap:4px; }
.fbar h2{ font-family:var(--serif-ko); font-size:27px; }
.fbar small{ font-family:var(--display); font-style:italic; font-size:16px; color:var(--ink-2); }

/* ── 계보도 */
.fview{ flex:1; min-height:0; overflow:auto; border:1px solid var(--line); border-radius:14px; background:var(--surface); position:relative; overscroll-behavior:contain; }
.fview.grab{ cursor:grab; } .fview.drag{ cursor:grabbing; user-select:none; }
.fcanvas{ position:relative; }
.fhead{ position:sticky; top:0; z-index:4; height:52px; background:var(--surface); border-bottom:1px solid var(--line); }
.fhead span{ position:absolute; top:0; height:52px; display:flex; flex-direction:column; justify-content:center; font-size:12.5px; color:var(--ink-2); line-height:1.3; }
.fhead span b{ font-weight:600; color:var(--ink); font-size:13.5px; }
.fhead span.up b{ color:var(--up); } .fhead span.dn b{ color:var(--down); }
.flines{ position:absolute; left:0; top:0; pointer-events:none; overflow:visible; z-index:1; }
.flines path{ fill:none; stroke-width:1.5; opacity:.55; transition:opacity .2s, stroke-width .2s; }
.flines path.up{ stroke:var(--up); } .flines path.dn{ stroke:var(--down); }
.flines path.g1{ stroke-width:2.2; opacity:.9; }
.flines path.hl{ stroke-width:3; opacity:1; }
.fcard{ position:absolute; z-index:2; appearance:none; text-align:left; border:1px solid var(--line); background:var(--raise); border-radius:11px; padding:9px 11px 9px 13px; cursor:pointer; display:grid; gap:2px; align-content:start; overflow:hidden; line-height:1.3; transition:border-color .2s, box-shadow .2s, transform .2s; }
.fcard::before{ content:''; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--c); }
.fcard:hover,.fcard.hl{ border-color:var(--ink-3); box-shadow:0 8px 24px -14px rgba(0,0,0,.6); }
.fcard b{ font-family:var(--serif-ko); font-size:14.5px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.fcard .ry{ font-family:var(--mono); font-size:11.5px; color:var(--ink-3); }
.fcard .rn{ font-size:12px; color:var(--ink-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:flex; gap:5px; align-items:baseline; }
.fcard.up{ background:color-mix(in srgb, var(--up) 7%, var(--raise)); }
.fcard.dn{ background:color-mix(in srgb, var(--down) 7%, var(--raise)); }
.fcard.center{ cursor:default; padding:16px 18px 16px 20px; gap:6px; border-color:var(--ink-3); box-shadow:var(--shadow); white-space:normal; }
.fcard.center::before{ width:5px; }
.fcard.center h3{ font-family:var(--serif-ko); font-size:24px; line-height:1.2; }
.fcard.center .en{ font-family:var(--display); font-style:italic; font-size:14.5px; color:var(--ink-2); }
.fcard.center p{ font-size:13.5px; color:var(--ink-2); line-height:1.6; }
.fcard.center .row{ display:flex; gap:6px; flex-wrap:wrap; margin-top:4px; }
.fcard.ghost{ cursor:default; border-style:dashed; background:none; color:var(--ink-3); font-size:12.5px; }
.fcard.ghost::before{ display:none; }
.trail{ display:flex; gap:6px; align-items:center; overflow-x:auto; scrollbar-width:thin; min-width:0; }
.trail .t{ appearance:none; border:0; background:none; padding:3px 6px; border-radius:6px; font-size:13px; color:var(--ink-3); cursor:pointer; white-space:nowrap; }
.trail .t:hover{ color:var(--ink); background:var(--accent-soft); }
.trail .t.cur{ color:var(--ink); font-weight:600; }
.trail .sep{ color:var(--ink-3); font-size:12px; }
.flist{ display:grid; gap:14px; padding:14px; }
.flist .fg{ display:grid; gap:8px; }
.flist .fg > p{ font-size:13px; color:var(--ink-3); }
.flist .fg.up > p b{ color:var(--up); } .flist .fg.dn > p b{ color:var(--down); }
.flist .cards{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:8px; }
.flist .fcard{ position:relative; }
.flist .arrow{ text-align:center; color:var(--ink-3); font-size:14px; }

/* ── 계보 이야기 */
.stories{ display:grid; grid-template-columns:320px minmax(0,1fr); gap:28px; align-items:start; }
.st-list{ display:grid; gap:8px; position:sticky; top:calc(var(--hdr) + 20px); }
.st-item{ appearance:none; text-align:left; border:1px solid var(--line); background:var(--surface); border-radius:12px; padding:12px 14px; cursor:pointer; display:grid; gap:3px; }
.st-item:hover{ border-color:var(--ink-3); }
.st-item[aria-current='true']{ border-color:var(--accent); background:var(--accent-soft); }
.st-item b{ font-family:var(--serif-ko); font-size:16px; }
.st-item small{ color:var(--ink-3); font-size:13px; line-height:1.5; }
.st-flow{ display:grid; gap:0; }
.st-head{ display:flex; flex-wrap:wrap; align-items:end; justify-content:space-between; gap:12px; margin-bottom:18px; }
.st-head h3{ font-family:var(--serif-ko); font-size:28px; }
.st-head p{ color:var(--ink-2); }
.st-step{ display:grid; grid-template-columns:40px minmax(0,1fr); gap:14px; position:relative; }
.st-step::before{ content:''; position:absolute; left:19px; top:40px; bottom:-2px; width:2px; background:linear-gradient(var(--c), var(--c2,var(--line))); opacity:.55; }
.st-step:last-child::before{ display:none; }
.st-n{ width:40px; height:40px; border-radius:50%; border:2px solid var(--c); display:flex; align-items:center; justify-content:center; font-family:var(--mono); font-size:13px; background:var(--raise); position:relative; z-index:1; }
.st-card{ appearance:none; text-align:left; border:1px solid var(--line); background:var(--surface); border-radius:12px; padding:12px 16px; margin-bottom:14px; cursor:pointer; display:grid; gap:3px; }
.st-card:hover{ border-color:var(--c); }
.st-card .top1{ display:flex; flex-wrap:wrap; gap:4px 12px; align-items:baseline; }
.st-card b{ font-family:var(--serif-ko); font-size:18px; }
.st-card .ry{ font-family:var(--mono); font-size:12px; color:var(--ink-3); }
.st-card p{ color:var(--ink-2); font-size:14px; line-height:1.6; }
.st-card .era{ font-size:12px; color:var(--ink-3); margin-left:auto; }

/* ── 분야 */
.fl{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:28px; align-items:start; }
.panel{ background:var(--surface); border:1px solid var(--line); border-radius:18px; }
.const{ position:sticky; top:calc(var(--hdr) + 20px); padding:10px; aspect-ratio:1; max-height:calc(100vh - var(--hdr) - 40px); max-width:100%; }
.const svg{ width:100%; height:100%; display:block; overflow:visible; }
.cedge{ fill:none; stroke:var(--ink-3); opacity:.3; transition:opacity .2s, stroke .2s; }
.cedge-hit{ fill:none; stroke:transparent; stroke-width:14; cursor:pointer; }
.cedge.on{ stroke:var(--accent); opacity:.95; }
.cedge.dim{ opacity:.07; }
.cnode{ cursor:pointer; }
.cnode circle{ fill:var(--c); fill-opacity:.16; stroke:var(--c); stroke-width:1.6; transition:fill-opacity .2s; }
.cnode:hover circle,.cnode.on circle{ fill-opacity:.42; }
.cnode.on circle{ stroke-width:3; }
.cnode.dim{ opacity:.35; }
.cnode text{ font-family:var(--serif-ko); font-size:15px; font-weight:600; fill:var(--ink); text-anchor:middle; paint-order:stroke; stroke:var(--surface); stroke-width:4px; stroke-linejoin:round; }
.cnode .cn{ font-family:var(--mono); font-size:11px; font-weight:400; fill:var(--ink-3); }
.clabel{ font-size:12px; fill:var(--ink); text-anchor:middle; paint-order:stroke; stroke:var(--surface); stroke-width:4px; stroke-linejoin:round; pointer-events:none; }
.fpanel{ padding:26px 26px 30px; display:grid; gap:22px; }
.q{ font-family:var(--serif-ko); font-size:18px; line-height:1.55; }
.q::before{ content:attr(data-lab); display:block; font-family:var(--sans); font-size:12px; color:var(--ink-3); margin-bottom:4px; }
.blk{ display:grid; gap:10px; }
.blk > b{ font-size:12px; letter-spacing:.14em; color:var(--ink-3); font-family:var(--mono); font-weight:500; }
.bridge{ display:grid; grid-template-columns:auto 1fr; gap:4px 12px; padding:12px 0; border-top:1px solid var(--line-soft); }
.bridge:first-of-type{ border-top:0; padding-top:0; }
.bridge .bt{ appearance:none; background:none; border:0; padding:0; cursor:pointer; text-align:left; font-family:var(--serif-ko); font-size:16px; font-weight:600; }
.bridge .bt:hover{ color:var(--accent); }
.bridge .with{ grid-row:span 3; }
.bridge p{ font-size:14px; line-height:1.6; color:var(--ink-2); }
.bridge.on{ background:var(--accent-soft); border-radius:10px; padding:12px; }
.ms li{ display:grid; grid-template-columns:84px 1fr; gap:14px; padding:7px 0; border-top:1px solid var(--line-soft); font-size:14px; }
.ms li:first-child{ border-top:0; }
.ms .y{ font-family:var(--mono); font-size:12.5px; color:var(--ink-3); text-align:right; padding-top:1px; }
.ms button{ appearance:none; border:0; background:none; padding:0; cursor:pointer; color:var(--accent); font-size:13px; margin-left:6px; }
.th{ display:grid; gap:6px; padding:12px 0; border-top:1px solid var(--line-soft); }
.th:first-of-type{ border-top:0; padding-top:0; }
.th h4{ font-family:var(--serif-ko); font-size:16px; }
.th p{ font-size:14px; line-height:1.6; color:var(--ink-2); }

/* ── 저작 */
.toolbar{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-bottom:14px; }
.toolbar .grow{ flex:1; }
.count{ font-size:13px; color:var(--ink-3); }
.hist{ display:grid; gap:4px; margin:4px 0 22px; overflow-x:auto; }
.hbar{ appearance:none; border:0; background:none; padding:0; cursor:pointer; display:grid; grid-template-rows:64px auto; gap:6px; min-width:64px; text-align:center; }
.hbar .col{ display:flex; align-items:flex-end; justify-content:center; height:64px; border-bottom:1px solid var(--line); }
.hbar .col i{ display:block; width:60%; max-width:44px; background:var(--accent); opacity:.55; border-radius:3px 3px 0 0; }
.hbar:hover .col i,.hbar[aria-pressed='true'] .col i{ opacity:1; }
.hbar small{ font-size:12px; color:var(--ink-3); line-height:1.4; }
.hbar b{ font-family:var(--mono); font-size:11.5px; font-weight:400; color:var(--ink-2); display:block; }
.wera{ font-family:var(--serif-ko); font-size:18px; margin:30px 0 8px; display:flex; align-items:baseline; gap:10px; }
.wera small{ font-family:var(--sans); font-size:12.5px; color:var(--ink-3); font-weight:400; }
.wrow{ display:grid; grid-template-columns:96px minmax(0,1fr) auto; gap:18px; padding:14px 4px; border-top:1px solid var(--line-soft); align-items:start; }
.wrow .y{ font-family:var(--mono); font-size:13px; color:var(--ink-3); text-align:right; padding-top:3px; }
.wrow .tt{ font-family:var(--serif-ko); font-size:16.5px; font-weight:600; line-height:1.4; }
.wrow .or{ font-family:var(--display); font-style:italic; font-size:14.5px; color:var(--ink-3); line-height:1.4; margin-top:2px; overflow-wrap:anywhere; }
.wrow .nt{ font-size:13.5px; line-height:1.6; color:var(--ink-2); margin-top:4px; }

/* ── 학교수학 */
.notice{ display:flex; flex-wrap:wrap; gap:8px 18px; font-size:13.5px; color:var(--ink-2); padding:12px 16px; border-radius:12px; background:var(--accent-soft); border:1px solid color-mix(in srgb, var(--accent) 30%, transparent); margin-bottom:22px; }
.notice b{ color:var(--ink); font-weight:600; }
.mx-box{ overflow-x:auto; padding:16px 18px 12px; margin-bottom:26px; }
.mx{ display:grid; min-width:760px; }
.mx .h{ font-size:12px; color:var(--ink-3); text-align:center; padding:4px 2px 8px; line-height:1.35; cursor:pointer; background:none; border:0; }
.mx .h:hover{ color:var(--ink); }
.mx .h i{ display:block; width:8px; height:8px; border-radius:50%; background:var(--c); margin:0 auto 4px; }
.mx .rh{ appearance:none; background:none; border:0; text-align:left; font-size:13.5px; padding:6px 10px 6px 0; cursor:pointer; color:var(--ink-2); white-space:nowrap; display:flex; align-items:center; gap:8px; }
.mx .rh small{ font-size:11px; color:var(--ink-3); font-family:var(--mono); }
.mx .rh:hover,.mx .rh.on{ color:var(--ink); }
.mx .rh.on{ font-weight:600; }
.mx .stage{ grid-column:1 / -1; font-size:11.5px; letter-spacing:.14em; color:var(--accent); font-family:var(--mono); padding:12px 0 4px; border-top:1px solid var(--line-soft); }
.mx .cell2{ display:flex; align-items:center; justify-content:center; min-height:30px; border:0; border-left:1px dashed var(--line-soft); cursor:pointer; background:none; padding:0; }
.mx .cell2.rowon{ background:var(--accent-soft); }
.mx .cell2 i{ display:block; border-radius:50%; background:var(--c); opacity:.9; }
.mx .cell2.z i{ display:none; }
.school{ display:grid; grid-template-columns:220px minmax(0,1fr); gap:28px; align-items:start; }
.ladder{ position:sticky; top:calc(var(--hdr) + 20px); display:grid; gap:2px; }
.ladder .st{ font-size:11.5px; letter-spacing:.14em; color:var(--ink-3); font-family:var(--mono); margin:14px 0 4px; }
.mx .stage:lang(ko),.ladder .st:lang(ko){ letter-spacing:.02em; font-family:var(--sans); font-size:12.5px; font-weight:600; }
.ladder .st:first-child{ margin-top:0; }
.rung{ appearance:none; display:flex; align-items:baseline; justify-content:space-between; gap:10px; text-align:left; border:0; background:none; padding:8px 12px; border-radius:9px; cursor:pointer; color:var(--ink-2); font-size:14.5px; border-left:2px solid var(--line); }
.rung small{ font-family:var(--mono); font-size:11.5px; color:var(--ink-3); }
.rung:hover{ background:var(--accent-soft); color:var(--ink); }
.rung[aria-current='true']{ color:var(--ink); font-weight:600; border-left-color:var(--accent); background:var(--accent-soft); }
.lvl-h{ display:flex; flex-wrap:wrap; align-items:end; justify-content:space-between; gap:12px; margin-bottom:16px; }
.lvl-h h3{ font-family:var(--serif-ko); font-size:28px; }
.lvl-h p{ font-size:13px; color:var(--ink-3); }
.units{ display:grid; gap:12px; }
.unit{ padding:18px 20px; display:grid; gap:10px; border-radius:14px; }
.unit .uh{ display:flex; flex-wrap:wrap; align-items:baseline; gap:10px; }
.unit .area{ font-size:12px; color:var(--accent); border:1px solid color-mix(in srgb, var(--accent) 40%, transparent); padding:1px 8px; border-radius:999px; }
.unit h4{ font-family:var(--serif-ko); font-size:19px; }
.unit p{ font-size:14.5px; line-height:1.7; color:var(--ink-2); max-width:72ch; }
.strip{ position:relative; height:34px; margin:2px 6px 0; }
.strip .base{ position:absolute; left:0; right:0; top:11px; height:1px; background:var(--line); }
.strip .tk{ position:absolute; top:7px; width:1px; height:9px; background:var(--line); }
.strip .dt{ position:absolute; top:5px; width:13px; height:13px; margin-left:-6.5px; border-radius:50%; background:var(--c); border:2px solid var(--surface); }
.strip .lb{ position:absolute; top:19px; font-family:var(--mono); font-size:11px; color:var(--ink-3); white-space:nowrap; }
.strip .lb.l{ left:0; } .strip .lb.r{ right:0; } .strip .lb.m{ transform:translateX(-50%); }
.unit .rowx{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.unit .rowx .lab{ font-size:12.5px; color:var(--ink-3); margin-right:4px; }
.unit.flash{ border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }

/* 툴팁 */
.tip{ position:fixed; z-index:120; pointer-events:none; max-width:300px; background:var(--raise); border:1px solid var(--line); border-radius:10px; padding:10px 12px; box-shadow:var(--shadow); font-size:13px; opacity:0; transition:opacity .12s; }
.tip.on{ opacity:1; }
.tip b{ font-family:var(--serif-ko); font-size:15px; display:block; }
.tip small{ color:var(--ink-3); font-family:var(--mono); font-size:12px; }
.tip p{ color:var(--ink-2); margin-top:4px; font-size:13px; line-height:1.55; }
.tip .tc{ display:flex; gap:10px; margin-top:6px; font-size:12.5px; }
.tip .tc span{ display:inline-flex; align-items:center; gap:5px; }

/* 바닥글 */
.foot{ border-top:1px solid var(--line); margin-top:70px; padding-top:26px; display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:30px; font-size:13px; color:var(--ink-3); }
.foot b{ font-family:var(--display); letter-spacing:.24em; color:var(--ink); font-size:15px; font-weight:600; }
.foot ul{ display:grid; gap:5px; }
.foot a{ color:var(--ink-2); }

@media (max-width:1179px){
  .insp{ top:auto; left:0; width:auto; height:min(58vh,600px); border-left:0; border-top:1px solid var(--line); border-radius:18px 18px 0 0; transform:translateY(103%); box-shadow:0 -24px 60px -20px rgba(0,0,0,.5); padding-bottom:env(safe-area-inset-bottom,0px); }
  .insp-top .grip{ display:block; position:absolute; left:50%; top:6px; width:40px; height:4px; border-radius:2px; background:var(--line); transform:translateX(-50%); }
  .insp-top{ position:relative; padding-top:16px; }
  body.insp-open .appview{ padding-bottom:calc(min(58vh,600px) + 12px); }
  .fl,.stories,.school{ grid-template-columns:1fr; }
  .const,.st-list,.ladder{ position:relative; top:0; max-height:none; }
  .st-list{ grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); }
  .ladder{ display:flex; overflow-x:auto; gap:6px; padding-bottom:6px; }
  .ladder .st{ display:none; }
  .rung{ border:1px solid var(--line); flex:none; }
  .rung[aria-current='true']{ border-color:var(--accent); }
}
@media (max-width:860px){
  .top-in{ gap:8px 10px; padding-block:8px; padding-inline:12px; min-height:52px; }
  .nav{ padding:0 10px 7px; }
  .nav .ng{ display:none; }
  .search{ flex:1; width:auto; margin-left:auto; max-width:320px; min-width:0; }
  .search kbd{ display:none; }
  .appview{ padding:10px 10px 12px; gap:8px; }
  .howto{ display:none; }
  .intro h1{ font-size:24px; }
  .foot{ grid-template-columns:1fr; }
  .era-h small{ display:none; }
  .era-h{ padding:10px 8px; }
  .era-h b{ font-size:13px; }
  .intro-t p,.legend,#map-try,#v-focus .legend{ display:none; }
  body.insp-open #v-map .intro,body.insp-open #mapbar{ display:none; }
}
@media (max-width:640px){
  .page{ padding:22px 16px 70px; }
  .brand-ko{ display:none; }
  .wrow{ grid-template-columns:1fr; gap:4px; }
  .wrow .y{ text-align:left; }
  .insp-body{ padding:16px 16px 40px; }
  .ih h2{ font-size:25px; }
  .fpanel{ padding:20px 18px 24px; }
  .gate-lintel{ height:60px; } .gate-doors,.gate-glow{ inset:60px 0 0 0; }
  .tryit .lbl{ display:none; }
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-delay:0s !important; transition-duration:.001ms !important; }
  .eng{ stroke-dashoffset:0; }
}

/* ═════════ v3 추가 */
.c-up{ color:var(--up); } .c-dn{ color:var(--down); }
.tools{ display:flex; align-items:center; gap:8px; flex:none; }
.ibtn.theme{ font-size:16px; width:36px; padding:0; }
.gate-lang{ margin-top:18px; display:inline-flex; border:1px solid rgba(202,163,90,.35); border-radius:999px; overflow:hidden; }
.gate-lang button{ appearance:none; border:0; background:none; color:#a8997a; padding:5px 14px; font-size:12.5px; cursor:pointer; }
.gate-lang button[aria-pressed='true']{ background:rgba(202,163,90,.18); color:#f3e3bb; }
.toast{ position:fixed; left:50%; bottom:24px; transform:translate(-50%,20px); z-index:130; background:var(--ink); color:var(--bg); padding:10px 16px; border-radius:12px; font-size:13.5px; opacity:0; pointer-events:none; transition:opacity .2s, transform .2s; display:grid; gap:6px; max-width:min(560px,calc(100vw - 32px)); box-shadow:var(--shadow); }
.toast.on{ opacity:1; transform:translate(-50%,0); pointer-events:auto; }
.toast small{ font-family:var(--mono); font-size:11.5px; opacity:.8; overflow-wrap:anywhere; }
.toast input{ width:100%; font-size:12px; }
.flash{ animation:flash 1.2s ease 2; }
.hint{ font-size:13px; line-height:1.6; color:var(--ink-3); }
.none{ font-size:13.5px; color:var(--ink-3); }
.lab{ font-family:var(--mono); font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); margin-bottom:6px; }
.lab:lang(ko){ font-family:var(--sans); font-size:12.5px; letter-spacing:.02em; font-weight:500; }
.sec-h{ font-family:var(--serif-ko); font-size:21px; margin:44px 0 14px; }
.page.wide{ max-width:1560px; }
.count{ font-size:13px; color:var(--ink-3); }
.eq{ font-family:var(--display); font-style:italic; }
.star-s{ color:var(--accent); }
.pname{ font-size:13px; color:var(--ink-2); padding:3px 6px; }
.two{ display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.three{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; }
.cards3{ display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:12px; }
.cards3 .th{ padding:16px 18px; border-top:0; border-radius:14px; }
.stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; margin-bottom:22px; }
.stats .st,.fd-stats .st{ background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:12px 14px; display:grid; }
.st b{ font-family:var(--display); font-size:28px; font-weight:500; line-height:1.1; font-variant-numeric:tabular-nums lining-nums; }
.st span{ font-size:13px; color:var(--ink-3); line-height:1.45; }

/* 상세 패널 보강 */
.ih-row{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.ih-act{ display:flex; gap:6px; flex:none; padding-top:4px; }
.ibtn.star.on{ color:var(--accent); border-color:var(--accent); }
.badge{ appearance:none; font-size:12px; border-radius:999px; padding:2px 10px; border:1px solid var(--line); color:var(--ink-2); background:var(--surface); cursor:default; }
.badge.prize{ border-color:color-mix(in srgb, var(--accent) 55%, transparent); color:var(--accent); background:var(--accent-soft); }
button.badge{ cursor:pointer; }
.badge.phil:hover{ border-color:var(--ink-3); color:var(--ink); }
.throw{ appearance:none; display:grid; grid-template-columns:auto 1fr auto; gap:2px 8px; align-items:baseline; text-align:left; border:1px solid var(--line-soft); background:var(--surface); border-radius:10px; padding:8px 10px; cursor:pointer; }
.throw:hover{ border-color:var(--ink-3); }
.throw b{ font-family:var(--serif-ko); font-size:14.5px; font-weight:600; grid-column:2; }
.throw .star-s{ grid-column:1; }
.throw .eq{ grid-column:2; font-size:14px; color:var(--ink-2); }
.throw small{ grid-column:3; grid-row:1; font-family:var(--mono); font-size:11.5px; color:var(--ink-3); }
.prow{ appearance:none; display:grid; gap:2px; text-align:left; border:1px solid var(--line-soft); border-left:3px solid var(--c); background:var(--surface); border-radius:10px; padding:9px 12px; cursor:pointer; }
.prow:hover{ border-color:var(--ink-3); border-left-color:var(--c); }
.prow b{ font-family:var(--serif-ko); font-size:15px; }
.prow small{ font-size:12px; color:var(--ink-3); }
.prow span{ font-size:13.5px; line-height:1.55; color:var(--ink-2); }
.isec .none{ font-size:13.5px; }

/* 지도 렌즈 */
.toggle.lens select{ padding:5px 10px; font-size:13px; max-width:230px; }
.mapgrid.lens .pill:not(.in-lens){ opacity:.2; }
.mapgrid.lens .pill.in-lens{ border-color:var(--accent); box-shadow:0 0 0 2px var(--accent-soft); }
.mapgrid.focus.lens .pill:not(.in-lens):not(.is-sel):not(.is-anc):not(.is-desc):not(.is-path){ opacity:.1; }
.pill.is-fav::after{ content:'★'; position:absolute; top:-7px; right:-4px; font-size:10px; color:var(--accent); }

/* 분야 · 개관 흐름도 */
.ovp{ padding:22px 22px 18px; margin-bottom:26px; }
.ov{ position:relative; display:grid; grid-template-columns:minmax(150px,230px) minmax(60px,1fr) minmax(170px,270px); align-items:start; }
.ov-col{ display:grid; gap:4px; position:relative; z-index:2; }
.ov-lab{ font-family:var(--mono); font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); margin-bottom:6px; }
.ov-col.r .ov-lab{ text-align:right; }
.ovb{ appearance:none; display:flex; align-items:center; gap:8px; border:1px solid var(--line); background:var(--raise); border-radius:9px; padding:0 10px; min-height:33px; cursor:pointer; text-align:left; font-size:13.5px; transition:opacity .2s, border-color .2s, background .2s; }
.ovb i{ width:9px; height:9px; border-radius:50%; background:var(--c); flex:none; }
.ovb span{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ovb small{ font-family:var(--mono); font-size:11px; color:var(--ink-3); }
.ovb:hover{ border-color:var(--c,var(--accent)); }
.ovb.dom{ flex-direction:row-reverse; text-align:right; }
.ovb.dom[aria-pressed='true']{ border-color:var(--accent); background:var(--accent-soft); }
.ovb.dim{ opacity:.3; }
.ov-lines{ position:absolute; left:0; top:0; z-index:1; pointer-events:none; overflow:visible; }
.ov-lines path{ fill:none; stroke-width:1.6; opacity:.34; transition:opacity .2s, stroke-width .2s; }
.ov-lines path.on{ opacity:.95; stroke-width:2.6; }
.ov-lines path.dim{ opacity:.05; }
.dom-card{ margin-top:18px; border-top:1px solid var(--line-soft); padding-top:16px; display:grid; gap:12px; }
.dc-h{ display:flex; flex-wrap:wrap; align-items:end; justify-content:space-between; gap:10px; }
.dc-h h3{ font-family:var(--serif-ko); font-size:22px; }
.dex{ display:grid; gap:0; }
.dex li{ display:grid; grid-template-columns:70px 1fr; gap:14px; padding:9px 0; border-top:1px solid var(--line-soft); }
.dex li:first-child{ border-top:0; }
.dex .y{ font-family:var(--mono); font-size:12.5px; color:var(--ink-3); text-align:right; padding-top:2px; }
.dex p{ font-size:14px; line-height:1.65; margin-bottom:5px; }
.fsel{ flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; position:sticky; top:calc(var(--hdr) + 0px); z-index:20; background:var(--glass); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); padding:10px 0; margin-bottom:14px; border-bottom:1px solid var(--line-soft); }

main [id]{ scroll-margin-top:calc(var(--hdr) + 18px); }
#fdetail{ scroll-margin-top:calc(var(--hdr) + 64px); }
.fsel::-webkit-scrollbar{ display:none; }
html:lang(ko) body{ word-break:keep-all; overflow-wrap:break-word; }
html:lang(ko) .nav .ng{ letter-spacing:.02em; }
/* 분야 · 상세 */
.fd-head{ display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:24px; align-items:start; border-left:4px solid var(--c); padding-left:18px; margin:10px 0 22px; }
.fd-t{ display:grid; gap:10px; }
.fd-t h2{ font-family:var(--serif-ko); font-size:clamp(28px,3.4vw,38px); line-height:1.15; }
.fd-t .d{ color:var(--ink-2); line-height:1.7; max-width:66ch; }
.fd-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.fd-stats .st b{ font-size:24px; }
.fflow{ position:relative; display:grid; grid-template-columns:minmax(0,1fr) minmax(150px,210px) minmax(0,1fr); gap:0 64px; align-items:center; padding:22px; }
.ff-col{ display:grid; gap:6px; position:relative; z-index:2; align-content:center; }
.ff-lab{ font-family:var(--mono); font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); margin-bottom:4px; }
.ov-lab:lang(ko),.ff-lab:lang(ko){ font-family:var(--sans); font-size:12.5px; letter-spacing:.02em; font-weight:500; }
.ff-col.r .ff-lab{ text-align:right; }
.ffb{ appearance:none; display:grid; gap:1px; text-align:left; border:1px solid var(--line); border-left:3px solid var(--c,var(--accent)); background:var(--raise); border-radius:10px; padding:7px 11px; cursor:pointer; transition:border-color .2s, background .2s, opacity .2s; }
.ffb:hover{ border-color:var(--ink-3); border-left-color:var(--c,var(--accent)); }
.ffb[aria-pressed='true']{ background:color-mix(in srgb, var(--c,var(--accent)) 12%, var(--raise)); border-color:var(--c,var(--accent)); }
.ffb .fn{ display:flex; align-items:center; gap:6px; font-size:12px; color:var(--ink-3); }
.ffb .fn i{ width:7px; height:7px; border-radius:50%; background:var(--c); }
.ffb b{ font-family:var(--serif-ko); font-size:14.5px; font-weight:600; line-height:1.35; }
.ffb.dom{ border-left:1px solid var(--line); border-right:3px solid var(--accent); text-align:right; }
.ffb.dom .ex{ font-size:12.5px; color:var(--ink-3); line-height:1.5; }
.ff-c{ position:relative; z-index:2; display:grid; justify-items:center; text-align:center; gap:2px; padding:22px 12px; border-radius:18px; border:2px solid var(--c); background:color-mix(in srgb, var(--c) 12%, var(--raise)); }
.ff-c b{ font-family:var(--serif-ko); font-size:22px; line-height:1.25; }
.ff-c small{ font-family:var(--mono); font-size:11.5px; color:var(--ink-3); }
.ff-lines{ position:absolute; left:0; top:0; z-index:1; pointer-events:none; overflow:visible; }
.ff-lines path{ fill:none; stroke-width:1.8; opacity:.5; transition:opacity .2s, stroke-width .2s; }
.ff-lines path.to{ stroke:var(--accent); }
.ff-lines path.on{ opacity:1; stroke-width:3; }
.ff-lines path.dim{ opacity:.12; }
#ff-detail{ margin:14px 0 8px; }
.ffd{ padding:18px 20px; display:grid; gap:12px; }
.ffd > p{ color:var(--ink-2); line-height:1.7; max-width:72ch; }
.fsec{ margin-top:40px; display:grid; gap:14px; }
.fsec h3{ font-family:var(--serif-ko); font-size:21px; }
.fsec h3 small{ font-family:var(--mono); font-size:12px; color:var(--ink-3); font-weight:400; margin-left:6px; }
.fsec-h{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px; }
.fsec.two{ grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:30px; align-items:start; }
.fsec.two > div{ display:grid; gap:12px; }
.eras{ display:grid; gap:0; border:1px solid var(--line); border-radius:14px; background:var(--surface); overflow:hidden; }
.er{ display:grid; grid-template-columns:150px minmax(0,1fr); gap:14px; padding:12px 16px; border-top:1px solid var(--line-soft); align-items:start; }
.er:first-child{ border-top:0; }
.er-h{ display:grid; }
.er-h b{ font-family:var(--serif-ko); font-size:14.5px; }
.er-h small{ font-size:12px; color:var(--ink-3); }
.pchip.prim{ font-weight:600; background:color-mix(in srgb, var(--c) 22%, transparent); }
.tgrid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:10px; }
.tmini{ appearance:none; position:relative; display:grid; gap:3px; text-align:left; border:1px solid var(--line); border-top:3px solid var(--c); background:var(--surface); border-radius:12px; padding:12px 14px; cursor:pointer; }
.tmini:hover{ border-color:var(--ink-3); border-top-color:var(--c); }
.tmini .y{ font-family:var(--mono); font-size:11.5px; color:var(--ink-3); }
.tmini b{ font-family:var(--serif-ko); font-size:15.5px; line-height:1.35; }
.tmini .eq{ font-size:15px; color:var(--ink-2); overflow-wrap:anywhere; }
.tmini small{ font-size:12.5px; color:var(--ink-3); }
.tmini .star-s{ position:absolute; right:12px; top:10px; }

/* 정리 · 명예의 전당 */
.hof-h{ display:flex; align-items:baseline; gap:12px; margin:8px 0 14px; }
.hof-h h3{ font-family:var(--serif-ko); font-size:24px; }
.hof{ display:grid; grid-template-columns:repeat(auto-fill,minmax(310px,1fr)); gap:14px; margin-bottom:48px; }
.hof-c{ position:relative; display:grid; gap:8px; align-content:start; padding:20px 20px 18px; border-radius:18px; border:1px solid color-mix(in srgb, var(--accent) 35%, var(--line)); background:linear-gradient(160deg, color-mix(in srgb, var(--c) 10%, var(--surface)), var(--surface) 55%); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--accent) 8%, transparent); }
.hof-top{ display:flex; align-items:center; gap:10px; }
.hof-c .rank{ font-family:var(--display); font-size:15px; color:var(--accent); border:1px solid color-mix(in srgb, var(--accent) 55%, transparent); border-radius:50%; width:34px; height:34px; display:inline-flex; align-items:center; justify-content:center; flex:none; }
.hof-c .y{ font-family:var(--mono); font-size:12px; color:var(--ink-3); flex:1; }
.hof-c > .eq{ font-size:clamp(20px,2.1vw,25px); color:var(--ink); line-height:1.3; padding:8px 0 2px; overflow-wrap:anywhere; }
.hof-c h3{ font-family:var(--serif-ko); font-size:20px; line-height:1.3; }
.hof-c .alt{ font-family:var(--display); font-style:italic; font-size:14.5px; color:var(--ink-3); margin-top:-4px; }
.hof-c .who{ font-size:13.5px; color:var(--accent); }
.hof-c .stmt{ font-size:14px; color:var(--ink-2); line-height:1.65; }
.hof-c .why{ font-size:14px; line-height:1.65; padding:11px 13px; border-radius:10px; background:var(--accent-soft); }
.hof-c .why span{ display:block; font-family:var(--mono); font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); margin-bottom:3px; }
.hof-c .why span:lang(ko){ font-family:var(--sans); font-size:12.5px; letter-spacing:.02em; font-weight:600; }
.tstrip-box{ padding:14px 18px 8px; margin-bottom:16px; overflow-x:auto; }
.tstrip{ position:relative; min-width:760px; }
.tstrip .ax{ position:absolute; left:0; right:0; bottom:0; height:26px; border-top:1px solid var(--line); }
.ax-t{ position:absolute; top:5px; font-size:11px; color:var(--ink-3); white-space:nowrap; padding-left:4px; border-left:1px solid var(--line); height:20px; }
.tdot{ position:absolute; width:12px; height:12px; margin-left:-6px; border-radius:50%; background:var(--c); border:2px solid var(--surface); cursor:pointer; padding:0; transition:transform .15s, opacity .2s; }
.tdot.h{ box-shadow:0 0 0 2px var(--accent); }
.tdot:hover{ transform:scale(1.5); z-index:2; }
.tdot.dim{ opacity:.15; }
.tip .eq{ font-size:15px; color:var(--ink); }
.trow{ border-top:1px solid var(--line-soft); }
.trow summary{ list-style:none; display:grid; grid-template-columns:110px minmax(0,1fr) minmax(0,.8fr) auto; gap:14px; align-items:baseline; padding:12px 6px; cursor:pointer; }
.trow summary::-webkit-details-marker{ display:none; }
.trow summary:hover{ background:var(--surface); }
.trow .y{ font-family:var(--mono); font-size:12.5px; color:var(--ink-3); text-align:right; }
.trow .nm{ display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 10px; }
.trow .nm b{ font-family:var(--serif-ko); font-size:16px; }
.trow .nm .eq{ color:var(--ink-2); font-size:15px; }
.trow .who{ font-size:13px; color:var(--ink-3); }
.trow .chip.static{ font-size:12px; }
.trow[open] summary{ background:var(--surface); }
.tbody{ padding:4px 16px 16px 130px; display:grid; gap:10px; }
.tbody p{ font-size:14.5px; line-height:1.7; max-width:72ch; }
.tbody .why{ font-size:14px; line-height:1.65; color:var(--ink-2); padding-left:12px; border-left:2px solid var(--accent); }

/* 밀레니엄 난제 */
.mp-facts{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:10px; margin-bottom:18px; }
.fact{ background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:14px 16px; display:grid; gap:6px; align-content:start; }
.fact b{ font-family:var(--mono); font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); font-weight:500; }
.fact b:lang(ko){ font-family:var(--sans); font-size:12.5px; letter-spacing:.02em; font-weight:600; }
.fact p{ font-size:14px; line-height:1.65; color:var(--ink-2); }
.mp-board{ padding:18px 20px; display:grid; gap:14px; margin-bottom:14px; }
.mp-sum{ display:flex; flex-wrap:wrap; gap:8px 18px; align-items:center; font-size:14px; }
.mst{ display:inline-flex; align-items:center; gap:5px; font-size:12px; border-radius:999px; padding:2px 10px; border:1px solid; white-space:nowrap; }
.mst::before{ content:''; width:7px; height:7px; border-radius:50%; background:currentColor; }
.mst.solved{ color:var(--ok,#3fbf7f); border-color:color-mix(in srgb, var(--ok,#3fbf7f) 50%, transparent); background:color-mix(in srgb, var(--ok,#3fbf7f) 12%, transparent); }
.mst.claimed{ color:var(--down); border-color:color-mix(in srgb, var(--down) 50%, transparent); background:var(--down-soft); }
.mst.open{ color:var(--ink-3); border-color:var(--line); }
.mp-tiles{ display:grid; grid-template-columns:repeat(auto-fill,minmax(165px,1fr)); gap:8px; }
.mp-tile{ appearance:none; position:relative; display:grid; gap:6px; align-content:start; text-align:left; border:1px solid var(--line); border-top:3px solid var(--c); background:var(--raise); border-radius:12px; padding:12px 12px 12px; cursor:pointer; min-height:132px; }
.mp-tile:hover{ border-color:var(--ink-3); border-top-color:var(--c); }
.mp-tile .n{ font-family:var(--display); font-size:13px; color:var(--ink-3); }
.mp-tile b{ font-family:var(--serif-ko); font-size:15px; line-height:1.38; }
.mp-tile .sym{ font-family:var(--display); font-style:italic; font-size:13.5px; color:var(--ink-2); overflow-wrap:anywhere; }
.mp-tile .mst{ justify-self:start; margin-top:auto; }
.mp-tile.solved{ background:color-mix(in srgb, #3fbf7f 7%, var(--raise)); }
.mp-ai{ display:grid; gap:4px; padding:14px 18px; border-radius:14px; border:1px dashed var(--line); background:var(--surface); margin-bottom:34px; font-size:14.5px; line-height:1.7; color:var(--ink-2); }
.mp-ai p{ max-width:76ch; }
.mp-ai b{ color:var(--ink); }
.mp{ border-top:1px solid var(--line); padding:34px 0 10px; display:grid; gap:18px; }
.mp-h{ display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:16px; align-items:center; }
.mp-h .n{ width:46px; height:46px; border-radius:50%; border:2px solid var(--c); display:flex; align-items:center; justify-content:center; font-family:var(--display); font-size:20px; }
.mp-h h3{ font-family:var(--serif-ko); font-size:clamp(22px,2.6vw,28px); line-height:1.25; }
.mp-h .alt{ font-family:var(--display); font-style:italic; color:var(--ink-3); font-size:15px; }
.mp-tags{ display:flex; flex-wrap:wrap; gap:6px; justify-content:flex-end; }
.mp > .sym{ font-family:var(--display); font-style:italic; font-size:clamp(19px,2.2vw,24px); padding:12px 18px; border-radius:12px; background:var(--surface); border:1px solid var(--line-soft); overflow-x:auto; white-space:nowrap; }
.mp-body{ display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:26px; }
.mp-lay{ display:grid; gap:9px; align-content:start; }
.mp-lay p:not(.lab){ font-size:15px; line-height:1.75; }
.mp-lay .lab{ margin-top:8px; }
.mp-lay .lab:first-child{ margin-top:0; }
.mp-now{ padding:16px 18px; border-radius:14px; background:var(--surface); border:1px solid var(--line); align-self:start; }
.mp.claimed .mp-now{ border-color:color-mix(in srgb, var(--down) 45%, transparent); background:color-mix(in srgb, var(--down) 5%, var(--surface)); }
.mp.solved .mp-now{ border-color:color-mix(in srgb, #3fbf7f 45%, transparent); }
.mp-now .dot li{ font-size:14px; line-height:1.65; }
.mp-tl ol{ display:grid; gap:0; }
.mp-tl li{ display:grid; grid-template-columns:110px minmax(0,1fr); gap:14px; padding:8px 0; border-top:1px solid var(--line-soft); }
.mp-tl li:first-child{ border-top:0; }
.mp-tl .y{ font-family:var(--mono); font-size:12.5px; color:var(--ink-3); text-align:right; padding-top:2px; }
.mp-tl p{ font-size:14px; line-height:1.65; }
.mp-tl .chips{ margin-top:5px; }
.mp-foot{ display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:26px; }
.others{ font-size:14px; color:var(--ink-3); margin-top:8px; line-height:1.7; max-width:72ch; }

/* 수학철학 */
.ph-main{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.ph-other{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.phc{ display:grid; gap:12px; align-content:start; padding:22px 20px; border-radius:18px; border:1px solid var(--line); border-top:4px solid var(--c); background:linear-gradient(180deg, color-mix(in srgb, var(--c) 9%, var(--surface)), var(--surface) 40%); }
.phc h3{ font-family:var(--serif-ko); font-size:26px; }
.phc .caps{ color:var(--c); }
.phc .slogan{ font-family:var(--serif-ko); font-size:18px; line-height:1.5; }
.phc .claim{ font-size:14px; color:var(--ink-2); line-height:1.7; }
.phc .blk > p{ font-size:14px; color:var(--ink-2); line-height:1.7; }
.phc .wall{ padding:10px 12px; border-radius:10px; background:color-mix(in srgb, var(--down) 8%, transparent); }
.phc.sm h3{ font-size:20px; }
.phc.sm .slogan{ font-size:15.5px; }
.proles{ display:grid; gap:5px; }
.prole{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.prole small{ font-size:12px; color:var(--ink-3); }
.ph-grid{ padding:14px 16px; overflow-x:auto; }
.phg{ display:grid; min-width:720px; align-items:center; }
.phg-h{ appearance:none; background:none; border:0; border-bottom:2px solid var(--c); font-size:12.5px; font-weight:600; padding:6px 4px 8px; cursor:pointer; color:var(--ink); text-align:center; line-height:1.3; }
.phg-n{ appearance:none; background:none; border:0; border-top:1px solid var(--line-soft); text-align:left; padding:7px 8px 7px 0; cursor:pointer; font-size:13.5px; display:flex; gap:8px; align-items:baseline; }
.phg-n small{ font-family:var(--mono); font-size:11px; color:var(--ink-3); }
.phg-n:hover{ color:var(--accent); }
.phg-c{ border-top:1px solid var(--line-soft); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; min-height:36px; }
.phg-c i{ width:12px; height:12px; border-radius:50%; background:var(--c); }
.phg-c small{ font-size:11px; color:var(--ink-3); text-align:center; line-height:1.3; }
.vtl{ display:grid; gap:0; border-left:2px solid var(--line); margin-left:54px; }
.vtl li{ display:grid; grid-template-columns:0 minmax(0,1fr); gap:0; position:relative; padding:10px 0 10px 22px; }
.vtl li::before{ content:''; position:absolute; left:-7px; top:16px; width:12px; height:12px; border-radius:50%; background:var(--raise); border:2px solid var(--accent); }
.vtl .y{ position:absolute; left:-62px; top:12px; width:46px; text-align:right; font-family:var(--mono); font-size:12.5px; color:var(--ink-3); }
.vtl p{ font-size:14.5px; line-height:1.65; }
.vtl .chips{ margin-top:6px; }

/* 수학교육 계보 */
.eduview{ height:min(78vh,860px); margin-bottom:16px; }
.edu-h{ text-align:left; }
.edu-h::before{ background:var(--f-edu); }
.edugrid .cell{ --c:var(--f-edu); }
.ecell.lane-on{ background-color:color-mix(in srgb, var(--accent) 8%, transparent); }
.ln.e0{ stroke:var(--ink-3); opacity:.28; stroke-width:1.2; }
.lanecards{ display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:10px; }
.lanec{ appearance:none; display:grid; gap:5px; text-align:left; align-content:start; border:1px solid var(--line); border-left:3px solid var(--f-edu); background:var(--surface); border-radius:12px; padding:12px 14px; cursor:pointer; }
.lanec:hover{ border-color:var(--ink-3); border-left-color:var(--f-edu); }
.lanec[aria-pressed='true']{ border-color:var(--accent); background:var(--accent-soft); }
.lanec b{ font-family:var(--serif-ko); font-size:15px; }
.lanec p{ font-size:13.5px; color:var(--ink-2); line-height:1.6; }
.lanec small{ font-size:12px; color:var(--ink-3); line-height:1.5; }
#edu-ms{ max-width:900px; }

/* 수상 */
.aw{ display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:16px; align-items:start; }
.awc{ padding:18px 20px; }
.awc h3{ font-family:var(--serif-ko); font-size:19px; margin-bottom:10px; }
.awl li{ display:grid; grid-template-columns:52px minmax(0,1fr); gap:12px; padding:8px 0; border-top:1px solid var(--line-soft); align-items:baseline; }
.awl li:first-child{ border-top:0; }
.awl .y{ font-family:var(--mono); font-size:13px; color:var(--accent); }

/* 수학사 연표 */
.ch-jump{ display:flex; gap:6px; overflow-x:auto; padding:8px 0 10px; position:sticky; top:var(--hdr); z-index:10; background:var(--glass); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); scrollbar-width:none; border-bottom:1px solid var(--line-soft); }
.ch-jump::-webkit-scrollbar{ display:none; }
.ch-jump .chip[disabled]{ opacity:.35; cursor:default; }
#ch-list .wera{ scroll-margin-top:calc(var(--hdr) + 60px); }
.chl li{ display:grid; grid-template-columns:96px minmax(0,1fr); gap:16px; padding:10px 4px 10px 0; border-top:1px solid var(--line-soft); position:relative; }
.chl li::before{ content:''; position:absolute; left:108px; top:17px; width:7px; height:7px; border-radius:50%; background:var(--c); }
.chl li > div{ padding-left:14px; }
.chl .y{ font-family:var(--mono); font-size:12.5px; color:var(--ink-3); text-align:right; padding-top:2px; }
.chx{ font-size:14.5px; }
button.chx{ appearance:none; background:none; border:0; padding:0; cursor:pointer; text-align:left; color:var(--ink); font-family:var(--serif-ko); font-weight:600; }
button.chx:hover{ color:var(--accent); }
.chl .chips{ margin-top:6px; }
.ck{ display:inline-block; font-family:var(--mono); font-size:11px; line-height:1.55; border:1px solid var(--line); border-radius:4px; padding:0 6px; color:var(--ink-3); margin-right:8px; vertical-align:2px; }
.ck:lang(ko){ font-family:var(--sans); font-size:11.5px; font-weight:500; }
.ck-thm{ --c:var(--accent); } .ck-ms{ --c:var(--up); } .ck-ph{ --c:var(--f-log); } .ck-st{ --c:var(--down); } .ck-pr{ --c:var(--f-comb); }
span.ck.ck-thm,span.ck.ck-ms,span.ck.ck-ph,span.ck.ck-st,span.ck.ck-pr{ color:var(--c); border-color:color-mix(in srgb, var(--c) 50%, transparent); }

/* 탐구 */
.exg{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; align-items:start; }
.exc{ padding:20px 22px; display:grid; gap:14px; }
.exc.wide{ grid-column:1 / -1; }
.exc h3{ font-family:var(--serif-ko); font-size:20px; }
.exc .toolbar{ margin:0; }
.exc .toolbar .field-in{ width:180px; }
.palt{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-bottom:12px; }
.palt .grow{ flex:1; }
.pchain{ display:grid; gap:0; justify-items:start; max-width:620px; }
.pcard{ appearance:none; display:grid; gap:1px; text-align:left; border:1px solid var(--line); border-left:4px solid var(--c); background:var(--raise); border-radius:12px; padding:9px 14px; cursor:pointer; min-width:260px; }
.pcard:hover{ border-color:var(--ink-3); border-left-color:var(--c); }
.pcard b{ font-family:var(--serif-ko); font-size:16px; }
.pcard small{ font-family:var(--mono); font-size:11.5px; color:var(--ink-3); }
.plink{ display:flex; align-items:center; gap:8px; padding:6px 0 6px 18px; font-size:13px; color:var(--ink-2); border-left:2px solid var(--line); margin-left:20px; }
.plink .arr{ font-size:15px; }
.plink.fw .arr{ color:var(--down); } .plink.bw .arr{ color:var(--up); }
.qtop{ display:flex; justify-content:space-between; align-items:center; }
.qscore{ font-family:var(--mono); font-size:12.5px; color:var(--ink-2); }
.qq{ font-family:var(--serif-ko); font-size:18px; line-height:1.5; }
.qopts{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.qopt{ appearance:none; border:1px solid var(--line); background:var(--raise); border-radius:10px; padding:10px 12px; cursor:pointer; text-align:left; font-size:14px; transition:border-color .2s, background .2s; }
.qopt:hover:not([disabled]){ border-color:var(--accent); }
.qopt[disabled]{ cursor:default; opacity:.6; }
.qopt.ok{ border-color:#3fbf7f; background:color-mix(in srgb, #3fbf7f 14%, var(--raise)); opacity:1; }
.qopt.no{ border-color:var(--down); background:var(--down-soft); opacity:1; }
.qex{ display:grid; gap:10px; padding:12px 14px; border-radius:10px; background:var(--surface-2); font-size:14px; line-height:1.65; }
.qend{ display:grid; gap:10px; justify-items:start; }
.qend b{ font-family:var(--display); font-size:44px; font-weight:500; line-height:1; font-variant-numeric:tabular-nums lining-nums; }
.today{ display:grid; gap:8px; border-left:4px solid var(--c); padding-left:16px; }
.today h3{ font-family:var(--serif-ko); font-size:24px; }
.today .alt{ font-family:var(--display); font-style:italic; color:var(--ink-3); font-size:14.5px; }
.today > p:not(.caps):not(.alt){ font-size:14.5px; color:var(--ink-2); }
ol.rank{ display:grid; gap:4px; }
ol.rank li{ display:grid; grid-template-columns:22px minmax(0,1fr) auto; gap:8px; align-items:center; }
ol.rank .n{ font-family:var(--mono); font-size:12px; color:var(--ink-3); text-align:right; }
ol.rank .pchip{ justify-self:start; max-width:100%; overflow:hidden; text-overflow:ellipsis; }
ol.rank .v{ font-family:var(--mono); font-size:12.5px; color:var(--ink-2); }
.bars{ display:grid; gap:5px; }
.bar-r{ display:grid; grid-template-columns:minmax(80px,120px) minmax(0,1fr) 34px; gap:8px; align-items:center; font-size:12.5px; }
.bar-r .bl{ color:var(--ink-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bar-r .bt{ height:10px; background:var(--surface-2); border-radius:5px; overflow:hidden; }
.bar-r .bt i{ display:block; height:100%; border-radius:5px; }
.bar-r .bn{ font-family:var(--mono); font-size:12px; color:var(--ink-3); text-align:right; }

@media (max-width:1179px){
  .ph-main,.ph-other{ grid-template-columns:1fr; }
  .fd-head{ grid-template-columns:1fr; }
  .aw{ grid-template-columns:1fr; }
}
@media (max-width:860px){
  .fflow{ grid-template-columns:1fr; gap:14px; padding:16px; }
  .ff-c{ order:-1; }
  .ff-col.r .ff-lab{ text-align:left; }
  .ffb.dom{ text-align:left; border-right:1px solid var(--line); border-left:3px solid var(--accent); }
  .ff-lines{ display:none; }
  .fsec.two,.mp-body,.mp-foot,.two,.three,.exg{ grid-template-columns:1fr; }
  .er{ grid-template-columns:1fr; gap:6px; }
  .trow summary{ grid-template-columns:78px minmax(0,1fr); }
  .trow .who,.trow summary .chip{ display:none; }
  .tbody{ padding:4px 8px 14px 8px; }
  .mp-h{ grid-template-columns:auto minmax(0,1fr); }
  .mp-tags{ grid-column:1 / -1; justify-content:flex-start; }
  .ov{ grid-template-columns:minmax(0,1fr) 34px minmax(0,1fr); }
  .ovb{ font-size:12.5px; padding:0 8px; }
  .ovb small{ display:none; }
  .qopts{ grid-template-columns:1fr; }
  .fd-stats{ grid-template-columns:repeat(3,1fr); }
  .eduview{ height:70vh; }
}
@media (max-width:640px){
  .search kbd{ display:none; }
  .brand-t{ display:none; }
  .ovp{ padding:14px 12px; }
  .hof{ grid-template-columns:1fr; }
  .mp-tl li,.dex li{ grid-template-columns:64px minmax(0,1fr); gap:10px; }
  .chl li{ grid-template-columns:62px minmax(0,1fr); gap:10px; }
  .chl li::before{ left:68px; }
  .vtl{ margin-left:46px; }
  .vtl .y{ left:-54px; width:40px; font-size:12px; }
  .exc{ padding:16px 14px; }
  .exc .toolbar .field-in{ width:calc(50% - 30px); }
  .pcard{ min-width:0; width:100%; }
  .pchain{ justify-items:stretch; }
}
.pchip,.chip{ max-width:100%; }
.pchip{ white-space:normal; text-align:left; line-height:1.4; }
.hof{ grid-template-columns:repeat(auto-fill,minmax(min(310px,100%),1fr)); }
.cards3{ grid-template-columns:repeat(auto-fill,minmax(min(280px,100%),1fr)); }
.hof > *,.tgrid > *,.cards3 > *,.exg > *,.ph-main > *,.ph-other > *,.aw > *,.mp-body > *,.mp-foot > *,.mp-tiles > *,.fsec.two > *,.two > *,.three > *,.fd-head > *{ min-width:0; }
.ov-col{ grid-template-columns:minmax(0,1fr); }
@media (max-width:860px){
  .ovb span{ white-space:normal; line-height:1.25; }
  .ovb{ padding:5px 8px; }
}

/* ═════════ 사이트 (여러 페이지) */
#page{ min-height:100%; }
a.tab{ text-decoration:none; display:inline-block; }
a.pchip{ text-decoration:none; }
a.badge{ text-decoration:none; cursor:pointer; }
a.brand{ text-decoration:none; color:inherit; }
.btn.lg{ padding:11px 20px; font-size:15px; border-radius:12px; }
.btn.on{ border-color:var(--accent); color:var(--accent); }
.flinks{ display:flex; flex-wrap:wrap; gap:6px 16px; }
.flinks a{ color:var(--ink-2); }
.chips .sep{ width:1px; height:22px; background:var(--line); margin:0 4px; align-self:center; }

/* 첫 화면 */
.home{ display:grid; gap:0; }
.hero{ display:grid; gap:14px; padding:clamp(28px,6vw,72px) 0 clamp(26px,4vw,44px); max-width:980px; }
.hero-h{ font-family:var(--display); font-weight:500; font-size:clamp(46px,9vw,108px); letter-spacing:.14em; line-height:1; margin-left:-.04em; }
.hero-s{ font-family:var(--serif-ko); font-size:clamp(17px,2vw,22px); line-height:1.55; color:var(--ink-2); max-width:36em; }
.hero-cta{ gap:10px; margin-top:6px; }
.hero-n{ display:flex; flex-wrap:wrap; gap:10px 34px; margin:18px 0 0; padding-top:18px; border-top:1px solid var(--line); }
.hero-n div{ display:grid; gap:0; }
.hero-n dt{ font-size:12.5px; color:var(--ink-3); order:2; }
.hero-n dd{ margin:0; font-family:var(--display); font-size:34px; line-height:1.1; font-variant-numeric:tabular-nums; order:1; }
.hs{ display:grid; gap:12px; margin-top:34px; }
.hs-h{ font-family:var(--mono); font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); font-weight:500; }
html:lang(ko) .hs-h{ letter-spacing:.02em; font-size:13px; font-family:var(--sans); font-weight:600; }
.hs-g{ display:grid; grid-template-columns:repeat(auto-fill,minmax(min(250px,100%),1fr)); gap:10px; }
.hcard{ display:grid; gap:6px; align-content:start; padding:16px 18px; border-radius:14px; border:1px solid var(--line); background:var(--surface); color:var(--ink); text-decoration:none; transition:border-color .2s, transform .2s, background .2s; min-width:0; }
.hcard:hover{ border-color:var(--accent); background:color-mix(in srgb, var(--accent) 6%, var(--surface)); transform:translateY(-2px); }
.hcard b{ font-family:var(--serif-ko); font-size:18px; }
.hcard p{ font-size:14px; color:var(--ink-2); line-height:1.6; }
.hcard .hn{ font-family:var(--mono); font-size:12px; color:var(--ink-3); margin-top:4px; }
.home-2{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.2fr); gap:16px; margin:40px 0 34px; align-items:start; }
.home-2 .mp-tiles{ grid-template-columns:repeat(auto-fill,minmax(min(150px,100%),1fr)); }
.home-2 .mp-tile{ min-height:118px; }
.hof-h a{ font-size:13.5px; margin-left:auto; }

/* 인물 사전 */
.pd-filters{ display:grid; gap:8px; margin-bottom:10px; }
.pd-filters .chips{ gap:5px; }
.pdg{ display:grid; grid-template-columns:repeat(auto-fill,minmax(min(260px,100%),1fr)); gap:10px; }
.pdc{ display:grid; gap:4px; align-content:start; padding:14px 16px 12px; border-radius:14px; border:1px solid var(--line); background:var(--surface); color:var(--ink); text-decoration:none; min-width:0; transition:border-color .2s, background .2s; }
.pdc:hover{ border-color:var(--c); background:color-mix(in srgb, var(--c) 6%, var(--surface)); }
.pdc-t{ display:flex; align-items:baseline; gap:8px; justify-content:space-between; }
.pdc-t b{ font-family:var(--serif-ko); font-size:16.5px; line-height:1.3; }
.pdc .dots{ display:flex; gap:3px; flex:none; }
.pdc .dots i{ width:7px; height:7px; border-radius:50%; }
.pdc small{ font-family:var(--display); font-style:italic; color:var(--ink-3); font-size:13.5px; line-height:1.3; }
.pdc .life{ font-family:var(--mono); font-size:12px; color:var(--ink-3); line-height:1.45; }
.pdc p{ font-size:14px; color:var(--ink-2); line-height:1.6; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; margin-top:4px; }
.pdc-n{ display:flex; gap:12px; font-family:var(--mono); font-size:12px; margin-top:4px; }

/* 인물 페이지 */
.crumbs{ display:flex; flex-wrap:wrap; gap:6px; align-items:baseline; font-size:13px; color:var(--ink-3); margin-bottom:18px; }
.crumbs a{ color:var(--ink-2); }
.crumbs b{ color:var(--ink); font-weight:500; }
.pp-h{ display:grid; gap:10px; padding-bottom:26px; border-bottom:1px solid var(--line); max-width:920px; }
.pp-h h1{ font-family:var(--serif-ko); font-size:clamp(32px,5vw,52px); line-height:1.12; }
.pp-h .alt{ font-family:var(--display); font-style:italic; font-size:clamp(17px,2vw,21px); color:var(--ink-2); margin-top:-4px; }
.pp-h .meta{ display:flex; flex-wrap:wrap; gap:4px 16px; font-size:13.5px; color:var(--ink-3); }
.pp-h .meta .mono{ color:var(--ink); }
.pp-h .lead{ font-size:17px; line-height:1.75; max-width:62ch; }
.pp-h .caps{ color:var(--c); }
.pp-grid{ display:grid; grid-template-columns:minmax(0,1.45fr) minmax(0,1fr); gap:40px; margin-top:28px; align-items:start; }
.pp-main{ display:grid; gap:32px; }
.pp-s{ display:grid; gap:12px; }
.pp-s > h2{ font-family:var(--serif-ko); font-size:20px; }
.pp-s > h2 small{ font-family:var(--mono); font-size:12px; color:var(--ink-3); font-weight:400; margin-left:4px; }
.pp-s .dot li{ font-size:15px; line-height:1.65; }
.pp-s .bridge{ grid-template-columns:auto 1fr; }
.ppu{ display:grid; gap:3px; padding:10px 0; border-top:1px solid var(--line-soft); }
.ppu:first-of-type{ border-top:0; padding-top:0; }
.ppu .bt,.pp-s .bt{ appearance:none; background:none; border:0; padding:0; text-align:left; cursor:pointer; font-family:var(--serif-ko); font-size:15.5px; font-weight:600; color:var(--ink); }
.ppu .bt:hover,.pp-s .bt:hover{ color:var(--accent); }
.ppu p{ font-size:14.5px; color:var(--ink-2); line-height:1.7; max-width:68ch; }
.pp-side{ display:grid; gap:18px; padding:20px; border-radius:18px; border:1px solid var(--line); background:var(--surface); }
.pp-side .count-b{ text-decoration:none; color:var(--ink); }
.pp-nav{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:48px; }
.pp-nav a{ display:grid; gap:2px; padding:14px 16px; border-radius:14px; border:1px solid var(--line); background:var(--surface); text-decoration:none; color:var(--ink); }
.pp-nav a:hover{ border-color:var(--accent); }
.pp-nav a.nx{ text-align:right; }
.pp-nav small{ font-size:12px; color:var(--ink-3); }
.pp-nav b{ font-family:var(--serif-ko); font-size:16px; }

/* 소개 */
.about{ display:grid; gap:34px; max-width:880px; }
.ab{ display:grid; gap:12px; }
.ab h2{ font-family:var(--serif-ko); font-size:22px; }
.ab > p{ font-size:15.5px; line-height:1.8; color:var(--ink-2); max-width:68ch; }
.abl{ display:grid; gap:0; }
.abl li{ display:grid; grid-template-columns:170px minmax(0,1fr); gap:14px; padding:9px 0; border-top:1px solid var(--line-soft); font-size:14px; }
.abl li:first-child{ border-top:0; }
.abl a{ font-family:var(--serif-ko); font-weight:600; }
.abl span{ color:var(--ink-2); }
.abs{ display:grid; gap:5px; font-size:14px; }
.ab .dot li{ font-size:14.5px; line-height:1.7; }

@media (max-width:1180px){
  .pp-grid{ grid-template-columns:1fr; }
  .home-2{ grid-template-columns:1fr; }
}
@media (max-width:640px){
  .abl li{ grid-template-columns:1fr; gap:2px; }
  .pp-nav{ grid-template-columns:1fr; }
  .hero-n{ gap:10px 22px; }
  .hero-n dd{ font-size:28px; }
}
#home-hall{ grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr)); margin-bottom:10px; }

/* ═════════ 연대표 */
.tl-box{ padding:16px 16px 12px; display:grid; gap:12px; margin-bottom:10px; }
.tl-bar{ display:grid; gap:10px; }
.tl-ctl{ display:flex; flex-wrap:wrap; gap:10px 14px; align-items:center; }
.seg.zoom{ align-items:center; }
.seg.zoom .zv{ font-family:var(--mono); font-size:12.5px; font-variant-numeric:tabular-nums; padding:0 6px; color:var(--ink-2); min-width:46px; text-align:center; }
.tl-jump,.tl-legend{ display:flex; gap:6px; overflow-x:auto; scrollbar-width:none; align-items:center; }
.tl-jump::-webkit-scrollbar,.tl-legend::-webkit-scrollbar{ display:none; }
.tl-jump .lbl{ flex:none; margin-right:2px; }
.tl-jump .chip,.tl-legend .chip{ flex:none; }
.tl-scroll{ position:relative; overflow:auto; height:min(72vh,780px); border:1px solid var(--line); border-radius:12px; background:var(--surface); overscroll-behavior:contain; cursor:grab; }
.tl-scroll.drag{ cursor:grabbing; user-select:none; }
.tl-canvas{ position:relative; min-height:100%; }
.tl-grid{ position:absolute; inset:0; pointer-events:none; z-index:0; }
.tl-grid i{ position:absolute; top:0; bottom:0; width:1px; background:var(--line-soft); }
.tl-grid i.now{ background:var(--accent); opacity:.7; }
.tl-head{ position:sticky; top:0; z-index:5; background:var(--surface); border-bottom:1px solid var(--line); box-shadow:0 8px 16px -14px rgba(0,0,0,.5); }
.tl-row{ position:relative; border-top:1px solid var(--line-soft); }
.tl-row.axis{ border-top:0; }
.tl-rl{ position:sticky; left:0; z-index:4; display:inline-flex; align-items:center; gap:6px; width:84px; height:100%; min-height:22px; padding:0 8px; font-size:11px; line-height:1.2; color:var(--ink-3); background:var(--surface); border-right:1px solid var(--line-soft); vertical-align:top; }
.tk{ position:absolute; top:6px; transform:translateX(-50%); font-family:var(--mono); font-size:11px; color:var(--ink-3); white-space:nowrap; }
.band{ position:absolute; height:18px; margin-top:1px; border-radius:4px; font-size:11px; line-height:16px; padding:0 6px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; color:var(--ink-2); cursor:default; }
.band.w{ background:color-mix(in srgb, var(--up) 13%, var(--surface)); border:1px solid color-mix(in srgb, var(--up) 32%, transparent); }
.band.k{ background:color-mix(in srgb, var(--down) 13%, var(--surface)); border:1px solid color-mix(in srgb, var(--down) 32%, transparent); }
.tm{ position:absolute; width:9px; height:9px; margin-left:-4.5px; border-radius:50%; background:var(--c,var(--ink-3)); cursor:default; }
.tm.thm{ border-radius:1px; transform:rotate(45deg); background:var(--ink-3); cursor:pointer; }
.tm.thm.hall{ background:var(--accent); }
.tm:hover{ outline:2px solid var(--ink); outline-offset:1px; z-index:3; }
.k-kr,.tl-key .k3{ --c:var(--f-top); } .k-inst,.k-comp,.k-ed,.tl-key .k4{ --c:var(--f-cs); } .k-hist,.tl-key .k5{ --c:var(--ink-3); }
.tm.k-kr{ background:var(--f-top); } .tm.k-inst,.tm.k-comp,.tm.k-ed{ background:var(--f-cs); } .tm.k-hist{ background:transparent; border:1.5px solid var(--ink-3); }
.tl-body{ position:relative; z-index:1; }
.tl-bars{ position:relative; }
.tl-grp{ border-top:1px solid var(--line-soft); }
.tl-grp:first-child{ border-top:0; }
.tl-gh{ position:relative; height:24px; }
.tl-gh .tl-rl{ width:auto; background:none; border:0; font-size:12.5px; font-weight:600; color:var(--ink); padding-top:6px; align-items:center; }
.tl-gh .tl-rl i{ width:8px; height:8px; border-radius:50%; background:var(--c); }
.tl-gh .tl-rl small{ font-family:var(--mono); font-weight:400; font-size:11px; color:var(--ink-3); }
.tlb{ position:absolute; height:18px; padding:0; border-radius:5px; border:1px solid color-mix(in srgb, var(--c) 70%, transparent); background:color-mix(in srgb, var(--c) 22%, var(--raise)); cursor:pointer; text-align:left; transition:opacity .2s, background .2s; }
.tlb .tl-l{ position:absolute; left:6px; top:0; line-height:16px; font-size:11.5px; white-space:nowrap; color:var(--ink); pointer-events:none; }
.tlb.out .tl-l{ left:calc(100% + 5px); color:var(--ink-2); }
.tlb.alive{ background:linear-gradient(90deg, color-mix(in srgb, var(--c) 26%, var(--raise)) 70%, color-mix(in srgb, var(--c) 6%, var(--raise))); border-right-style:dashed; }
.tlb.open{ border-right-style:dotted; border-right-width:2px; }
.tlb.ca{ border-left-style:dashed; }
.tlb:hover{ background:color-mix(in srgb, var(--c) 42%, var(--raise)); z-index:2; }
.tlb.off{ opacity:.16; }
.tl-canvas.focus .tlb:not(.sel):not(.anc):not(.desc){ opacity:.14; }
.tlb.sel{ background:var(--ink); border-color:var(--ink); z-index:3; }
.tlb.sel .tl-l{ color:var(--bg); font-weight:600; }
.tlb.sel.out .tl-l{ color:var(--ink); }
.tlb.anc{ background:color-mix(in srgb, var(--up) 26%, var(--raise)); border-color:var(--up); }
.tlb.desc{ background:color-mix(in srgb, var(--down) 26%, var(--raise)); border-color:var(--down); }
.tlb.d1{ border-width:2px; }
.tlb.fav::after{ content:'★'; position:absolute; right:-4px; top:-9px; font-size:9px; color:var(--accent); }
.tlb.flash{ animation:flash 1.2s ease 2; }
.tl-foot{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px 16px; align-items:center; }
.tl-key{ display:flex; flex-wrap:wrap; gap:6px 14px; font-size:12.5px; color:var(--ink-3); align-items:center; }
.tl-key i{ width:9px; height:9px; border-radius:50%; display:inline-block; background:var(--c); margin-right:5px; vertical-align:-1px; }
.tl-key .k1{ background:var(--ink-3); border-radius:1px; transform:rotate(45deg); }
.tl-key .k2{ background:var(--accent); border-radius:1px; transform:rotate(45deg); }
.tl-key .k5{ background:transparent; border:1.5px solid var(--ink-3); }
.tl-key span{ margin-right:6px; }
.ck-inst{ --c:var(--f-cs); } .ck-comp{ --c:var(--f-log); } .ck-ed{ --c:var(--f-edu); } .ck-kr{ --c:var(--f-top); } .ck-hist{ --c:var(--ink-3); }
span.ck.ck-inst,span.ck.ck-comp,span.ck.ck-ed,span.ck.ck-kr,span.ck.ck-hist{ color:var(--c); border-color:color-mix(in srgb, var(--c) 50%, transparent); }
.chl li.hist .chx{ color:var(--ink-2); }

/* ═════════ 다듬기 */
::selection{ background:color-mix(in srgb, var(--accent) 30%, transparent); }
html{ scrollbar-color:color-mix(in srgb, var(--accent) 45%, var(--line)) transparent; scrollbar-width:thin; }
::-webkit-scrollbar{ width:10px; height:10px; } ::-webkit-scrollbar-track{ background:transparent; } ::-webkit-scrollbar-thumb{ background:color-mix(in srgb, var(--accent) 40%, var(--line)); border-radius:10px; border:3px solid transparent; background-clip:padding-box; } ::-webkit-scrollbar-thumb:hover{ background-color:var(--accent); }
#page:not([data-page='home']):not([data-page='map']):not([data-page='focus']) #bg{ opacity:.55; }
.skip{ position:fixed; left:12px; top:-60px; z-index:200; background:var(--accent); color:var(--accent-ink); padding:8px 14px; border-radius:8px; font-weight:600; text-decoration:none; transition:top .2s; }
.skip:focus{ top:calc(env(safe-area-inset-top,0px) + 10px); }
.menu-btn{ display:none; font-size:17px; width:36px; padding:0; }
.menu,.keys{ position:fixed; inset:0; z-index:150; background:rgba(4,6,10,.55); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); display:flex; justify-content:flex-end; }
.keys{ justify-content:center; align-items:center; }
.menu-in{ width:min(420px,100%); height:100%; overflow:auto; background:var(--raise); border-left:1px solid var(--line); padding:calc(env(safe-area-inset-top,0px) + 16px) 20px calc(env(safe-area-inset-bottom,0px) + 30px); display:grid; gap:20px; align-content:start; box-shadow:var(--shadow); }
.menu-top{ display:flex; justify-content:space-between; align-items:center; gap:10px; }
.menu-g{ display:grid; gap:4px; }
.menu-g a{ display:grid; gap:1px; padding:9px 12px; border-radius:10px; text-decoration:none; color:var(--ink); border:1px solid transparent; }
.menu-g a:hover{ background:var(--surface-2); }
.menu-g a[aria-current='page']{ border-color:var(--accent); background:var(--accent-soft); }
.menu-g a b{ font-family:var(--serif-ko); font-size:16px; }
.menu-g a small{ font-size:13px; color:var(--ink-3); line-height:1.5; }
.keys-in{ width:min(420px,calc(100% - 32px)); background:var(--raise); border:1px solid var(--line); border-radius:16px; padding:18px 20px 20px; display:grid; gap:14px; box-shadow:var(--shadow); }
.keys-in dl{ display:grid; gap:8px; margin:0; }
.keys-in dl div{ display:grid; grid-template-columns:70px 1fr; gap:10px; align-items:center; }
.keys-in dd{ margin:0; font-size:14px; color:var(--ink-2); }
kbd{ font-family:var(--mono); font-size:12px; border:1px solid var(--line); border-bottom-width:2px; border-radius:6px; padding:1px 7px; background:var(--surface); color:var(--ink); }
body.menu-open{ overflow:hidden; }
.totop{ position:fixed; right:18px; bottom:calc(env(safe-area-inset-bottom,0px) + 18px); z-index:55; width:44px; height:44px; border-radius:50%; border:1px solid var(--line); background:var(--raise); color:var(--ink); font-size:18px; cursor:pointer; box-shadow:var(--shadow); }
.totop:hover{ border-color:var(--accent); color:var(--accent); }
body.insp-open .totop{ display:none; }
.foot{ display:block; margin-top:70px; padding-top:0; border-top:0; font-size:13px; color:var(--ink-3); }
.pager{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:40px; }
.pager a{ display:grid; gap:2px; padding:14px 18px; border-radius:14px; border:1px solid var(--line); background:var(--surface); text-decoration:none; color:var(--ink); transition:border-color .2s; }
.pager a:hover{ border-color:var(--accent); }
.pager a.nx{ text-align:right; }
.pager small{ font-size:12.5px; color:var(--ink-3); }
.pager b{ font-family:var(--serif-ko); font-size:17px; }
.ft{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.6fr); gap:36px; padding-top:28px; border-top:1px solid var(--line); }
.ft-brand{ display:grid; gap:8px; align-content:start; }
.ft-logo{ font-family:var(--display); letter-spacing:.24em; color:var(--ink); font-size:16px; font-weight:600; text-decoration:none; }
.ft-note{ font-size:13.5px; line-height:1.7; max-width:52ch; }
.ft-cite{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 8px; margin-top:6px; font-size:12.5px; }
.ft-cite span{ font-family:var(--mono); letter-spacing:.08em; color:var(--ink-3); }
.ft-cite span:lang(ko){ font-family:var(--sans); letter-spacing:0; }
.ft-cite code{ font-family:var(--mono); font-size:12px; line-height:1.5; color:var(--ink-2); background:var(--surface); border:1px solid var(--line-soft); border-radius:6px; padding:3px 8px; user-select:all; }
.ibtn.sm{ height:26px; font-size:12px; padding:0 8px; }
.ft-nav{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; }
.ft-h{ font-family:var(--mono); font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); margin-bottom:8px; }
html:lang(ko) .ft-h{ letter-spacing:.02em; font-size:12.5px; font-family:var(--sans); font-weight:600; }
.ft-col ul{ display:grid; gap:6px; }
.ft-col a{ color:var(--ink-2); text-decoration:none; font-size:14px; }
.ft-col a:hover{ color:var(--accent); }
.ft-col a[aria-current='page']{ color:var(--ink); font-weight:600; }
.ft-bottom{ display:flex; flex-wrap:wrap; gap:8px 18px; align-items:center; justify-content:space-between; margin-top:28px; padding-top:16px; border-top:1px solid var(--line-soft); font-size:12.5px; }
.ft-src{ display:flex; flex-wrap:wrap; gap:4px 14px; }
.ft-src a{ color:var(--ink-3); }
.ft-keys{ appearance:none; background:none; border:0; color:var(--ink-3); cursor:pointer; font-size:12.5px; display:inline-flex; gap:6px; align-items:center; }
.ft-keys:hover{ color:var(--ink); }
@media (max-width:1180px){
  .ft{ grid-template-columns:1fr; }
}
@media (max-width:860px){
  .menu-btn{ display:inline-flex; align-items:center; justify-content:center; }
  .ft-nav{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .tl-scroll{ height:68vh; }
  .tl-rl{ width:64px; font-size:10.5px; padding:0 5px; }
}
@media (max-width:640px){
  .nav{ display:none; }
  .pager{ grid-template-columns:1fr; }
  .tools .theme{ width:34px; }
  .totop{ right:12px; bottom:calc(env(safe-area-inset-bottom,0px) + 12px); }
}

.pager b{ letter-spacing:0; }
.band{ overflow:clip; }
.band > span{ position:sticky; left:98px; }
.tlb:not(.out){ overflow:clip; }
.tlb:not(.out) .tl-l{ position:sticky; display:inline-block; left:98px; padding-left:6px; }
.tlb{ font-size:11.5px; line-height:16px; display:block; }
.tlb:not(.out) .tl-l{ vertical-align:top; top:0; line-height:16px; }

/* ═════════ 소리 조절 */
.snd{ position:relative; }
.snd-btn{ width:36px; padding:0; display:inline-flex; align-items:center; justify-content:center; }
.eqz{ display:inline-flex; align-items:flex-end; gap:2px; height:14px; }
.eqz i{ width:2.5px; height:4px; background:currentColor; border-radius:1px; }
.eqz i:nth-child(2){ height:8px; } .eqz i:nth-child(3){ height:6px; }
.snd-btn.on{ color:var(--accent); border-color:color-mix(in srgb, var(--accent) 55%, var(--line)); }
.snd-btn.on .eqz i{ animation:eqz 1.1s ease-in-out infinite; }
.snd-btn.on .eqz i:nth-child(2){ animation-delay:-.45s; } .snd-btn.on .eqz i:nth-child(3){ animation-delay:-.8s; } .snd-btn.on .eqz i:nth-child(4){ animation-delay:-.2s; }
.snd-btn.muted .eqz{ opacity:.4; }
@keyframes eqz{ 0%,100%{ height:3px; } 50%{ height:14px; } }
.snd-pop{ position:absolute; right:0; top:calc(100% + 10px); width:290px; background:var(--raise); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow); padding:14px 16px 16px; display:grid; gap:12px; z-index:95; }
.snd-h{ font-family:var(--mono); font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); }
.snd-h:lang(ko){ font-family:var(--sans); font-size:13px; letter-spacing:.02em; font-weight:600; }
.sw-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:14px; cursor:pointer; position:relative; }
.sw-row input{ position:absolute; opacity:0; width:1px; height:1px; }
.sw-row i{ width:38px; height:22px; border-radius:999px; background:var(--line); position:relative; transition:background .2s; flex:none; }
.sw-row i::after{ content:''; position:absolute; left:3px; top:3px; width:16px; height:16px; border-radius:50%; background:var(--ink-2); transition:transform .2s, background .2s; }
.sw-row input:checked + i{ background:var(--accent); }
.sw-row input:checked + i::after{ transform:translateX(16px); background:var(--accent-ink); }
.sw-row input:focus-visible + i{ outline:2px solid var(--accent); outline-offset:2px; }
.vol-row{ display:grid; grid-template-columns:auto 1fr; gap:12px; align-items:center; font-size:14px; }
.vol-row input{ accent-color:var(--accent); width:100%; }
.snd-note{ font-size:12.5px; color:var(--ink-3); line-height:1.6; }

/* ═════════ 대문 연출 */
.gate-rays{ position:absolute; inset:74px 0 0 0; z-index:0; opacity:0; transform-origin:50% 58%; background:repeating-conic-gradient(from 0deg at 50% 58%, rgba(255,236,196,0) 0deg 5deg, rgba(255,236,196,.1) 5.6deg 7deg, rgba(255,236,196,0) 7.6deg 12deg); -webkit-mask-image:radial-gradient(ellipse 58% 70% at 50% 58%, #000 8%, transparent 74%); mask-image:radial-gradient(ellipse 58% 70% at 50% 58%, #000 8%, transparent 74%); transition:opacity 1.6s ease .15s; pointer-events:none; }
.gate.is-opening .gate-rays{ opacity:1; animation:rays 10s linear infinite; }
@keyframes rays{ to{ transform:rotate(9deg); } }
.gate-dust{ position:absolute; inset:74px 0 0 0; z-index:0; opacity:0; pointer-events:none; transition:opacity 1.4s ease .3s;
  background-image:radial-gradient(1.6px 1.6px at 12% 22%, rgba(255,242,214,.95), transparent 60%), radial-gradient(1.2px 1.2px at 37% 68%, rgba(255,242,214,.8), transparent 60%), radial-gradient(2px 2px at 58% 34%, rgba(255,230,190,.9), transparent 60%), radial-gradient(1.3px 1.3px at 79% 76%, rgba(255,242,214,.75), transparent 60%), radial-gradient(1.7px 1.7px at 88% 18%, rgba(255,236,200,.85), transparent 60%), radial-gradient(1.1px 1.1px at 24% 88%, rgba(255,242,214,.7), transparent 60%);
  background-size:340px 340px; animation:dust 7s linear infinite; }
.gate.is-opening .gate-dust{ opacity:.9; }
@keyframes dust{ to{ background-position:30px -340px; } }
.gate-doors{ transition:transform 2.3s cubic-bezier(.45,.05,.2,1); }
.gate.is-opening .gate-doors{ transform:scale(1.09); }
.gate-quiet{ appearance:none; background:none; border:0; margin-top:8px; color:#8d8168; font-size:12.5px; text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
.gate-quiet:hover{ color:#d8c69c; }

/* ═════════ 첫 화면 · 나선 */
.hero{ grid-template-columns:minmax(0,1fr) minmax(0,560px); align-items:center; gap:clamp(20px,4vw,60px); max-width:none; }
.hero-t{ display:grid; gap:14px; align-content:center; }
.hero-art{ margin:0; display:grid; gap:8px; }
.hero-art canvas{ width:100%; aspect-ratio:1; display:block; touch-action:manipulation; }
.hero-art figcaption{ font-size:13px; color:var(--ink-3); text-align:center; line-height:1.6; max-width:46ch; justify-self:center; }
.hero-h{ background:linear-gradient(100deg, var(--ink) 0%, var(--ink) 40%, var(--accent) 50%, var(--ink) 60%, var(--ink) 100%); background-size:260% 100%; background-position:0% 0; -webkit-background-clip:text; background-clip:text; color:transparent; animation:shimmer 2.6s cubic-bezier(.4,.1,.2,1) .6s 1 both; }
@keyframes shimmer{ from{ background-position:100% 0; } to{ background-position:0% 0; } }
@media (max-width:1100px){
  .hero{ grid-template-columns:1fr; }
  .hero-art{ max-width:540px; width:100%; justify-self:center; }
}

/* ═════════ 진행 막대 · 카드 조명 · 페이지 전환 */
.progress{ position:absolute; left:0; right:0; bottom:-1px; height:2px; background:linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 35%, var(--up))); transform-origin:0 50%; transform:scaleX(0); pointer-events:none; }
.hcard,.pdc,.pager a,.fact,.lanec,.phc,.tmini,.exc{ position:relative; }
.hcard::after,.pdc::after,.hof-c::after,.mp-tile::after,.pager a::after,.fact::after,.lanec::after,.phc::after,.tmini::after,.exc::after{ content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none; background:radial-gradient(460px circle at var(--mx,50%) var(--my,50%), color-mix(in srgb, var(--accent) 9%, transparent), transparent 55%); opacity:0; transition:opacity .35s; }
.hcard:hover::after,.pdc:hover::after,.hof-c:hover::after,.mp-tile:hover::after,.pager a:hover::after,.fact:hover::after,.lanec:hover::after,.phc:hover::after,.tmini:hover::after,.exc:hover::after{ opacity:1; }
@view-transition{ navigation:auto; }
::view-transition-old(root){ animation:vt-out .2s ease both; }
::view-transition-new(root){ animation:vt-in .45s cubic-bezier(.2,.7,.2,1) both; }
@keyframes vt-out{ to{ opacity:0; } }
@keyframes vt-in{ from{ opacity:0; transform:translateY(8px); } }
.top{ view-transition-name:mathesis-top; }
@media (prefers-reduced-motion: reduce){
  @view-transition{ navigation:none; }
  .hero-h{ animation:none; }
}
@media (max-width:640px){
  .snd-pop{ position:fixed; left:12px; right:12px; top:calc(var(--hdr) + 6px); width:auto; }
  .tools{ gap:6px; }
}

.hero-art{ position:relative; }
.hero-art::before{ content:''; position:absolute; inset:-4% -4% 12% -4%; z-index:-1; border-radius:50%; background:radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--bg) 92%, transparent) 0 58%, transparent 72%); pointer-events:none; }

/* ═════════ 단계 표기 · 도움말 */
.ibtn.help{ width:26px; height:26px; min-width:26px; padding:0; border-radius:50%; font-size:13px; font-weight:600; }
.gen .gl .gn{ font-weight:600; color:var(--ink); font-size:13px; }
.gen .gl .gh{ display:block; font-size:12px; color:var(--ink-3); margin-top:1px; }
.help-pop{ position:fixed; z-index:140; background:var(--raise); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow); padding:16px 18px; display:grid; gap:10px; font-size:13.5px; }
.hp-h{ font-family:var(--serif-ko); font-size:16px; font-weight:600; }
.hp-chain{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; }
.hp-n{ display:grid; gap:1px; padding:6px 10px; border-radius:10px; border:1px solid var(--line); background:var(--surface); text-align:center; min-width:64px; }
.hp-n b{ font-size:13.5px; }
.hp-n small{ font-size:11.5px; color:var(--down); }
.hp-n.sel{ background:var(--ink); border-color:var(--ink); }
.hp-n.sel b{ color:var(--bg); } .hp-n.sel small{ color:var(--bg); opacity:.75; }
.hp-chain .ar{ color:var(--ink-3); }
.help-pop .dot li{ font-size:13.5px; line-height:1.6; }

/* ═════════ 명예의 전당 */
.medal-strip{ display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:10px; }
.ms-i{ display:grid; justify-items:center; gap:4px; padding:12px 6px 10px; border-radius:14px; text-decoration:none; color:var(--ink); border:1px solid transparent; transition:border-color .2s, background .2s, transform .25s; }
@media (hover:hover) and (pointer:fine){ .ms-i:hover{ border-color:color-mix(in srgb, var(--accent) 45%, var(--line)); background:var(--surface); } }
.ms-i canvas{ width:min(96px,100%); aspect-ratio:1; display:block; filter:drop-shadow(0 6px 10px rgba(0,0,0,.28)); }
.ms-i b{ font-family:var(--serif-ko); font-size:14.5px; text-align:center; }
.ms-i small{ font-family:var(--mono); font-size:11px; color:var(--ink-3); }
.home-hall{ margin:10px 0 18px; padding:18px 18px 10px; border-radius:18px; border:1px solid color-mix(in srgb, var(--accent) 30%, var(--line)); background:linear-gradient(180deg, color-mix(in srgb, var(--accent) 6%, var(--surface)), var(--surface)); }
.home-hall .hof-h{ margin:0 0 8px; flex-wrap:wrap; }

/* 첫 화면 · 신전 */
.page.hall{ overflow-x:clip; }
.hall-hero{ position:relative; isolation:isolate; text-align:center; padding:clamp(16px,3vw,34px) 0 6px; }
.hall-hero::before{ content:''; position:absolute; inset:-30px -60px 0; z-index:-1; pointer-events:none; background:radial-gradient(ellipse 58% 50% at 50% 46%, color-mix(in srgb, var(--accent) 15%, transparent), transparent 72%); }
.hh-head .eyebrow{ justify-content:center; }
.hh-head h2{ font-family:var(--serif-ko); font-weight:600; font-size:clamp(40px,6.2vw,76px); letter-spacing:.08em; line-height:1.08; margin:8px 0 12px; padding-left:.08em; background:linear-gradient(180deg, var(--ink) 30%, color-mix(in srgb, var(--accent) 80%, var(--ink))); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hh-sub{ color:var(--ink-2); max-width:58ch; margin:0 auto; font-size:15.5px; line-height:1.7; }
#hall-temple{ width:min(1080px,100%); margin:clamp(22px,3.4vw,40px) auto 0; }
.temple{ --t-line:color-mix(in srgb, var(--accent) 60%, transparent); --t-fill-a:color-mix(in srgb, var(--accent) 16%, var(--surface)); --t-fill-b:color-mix(in srgb, var(--accent) 6%, var(--surface)); --t-col-a:color-mix(in srgb, var(--accent) 7%, var(--surface)); --t-col-b:color-mix(in srgb, var(--accent) 24%, var(--surface)); --t-ink:var(--accent); position:relative; }
.temple svg{ display:block; width:100%; height:auto; overflow:visible; }
.t-s{ fill:none; stroke:var(--t-line); stroke-width:1.1; vector-effect:non-scaling-stroke; }
.t-thin{ stroke-width:.8; opacity:.8; }
.t-flute{ stroke-width:.7; opacity:.4; }
.t-ins{ fill:var(--t-ink); font-family:var(--display); font-size:25px; font-weight:500; letter-spacing:7px; text-anchor:middle; }
.t-rn{ fill:var(--t-ink); font-family:var(--display); font-size:16px; letter-spacing:1px; text-anchor:middle; }
.t-sym{ fill:var(--t-ink); font-family:'STIX Two Text','Cambria Math',serif; font-size:18px; text-anchor:middle; opacity:.85; }
.t-colon{ position:relative; }
.t-cols{ position:absolute; inset:0; width:100%; height:100% !important; }
.t-bays{ position:relative; display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); padding:22px 7% 24px; }
.bay{ min-width:0; position:relative; isolation:isolate; display:grid; justify-items:center; align-content:start; gap:5px; padding:8px 4px 4px; text-decoration:none; color:var(--ink); }
.bm{ position:relative; display:block; width:min(88px,80%); aspect-ratio:1; border-radius:50%; transition:box-shadow .35s ease; }
.bay canvas{ width:100%; height:100%; display:block; filter:brightness(.5) saturate(.35); transition:filter 1.1s ease calc(var(--k) * 110ms); }
.bm .sheen{ position:absolute; inset:0; border-radius:50%; pointer-events:none; mix-blend-mode:soft-light; opacity:0; background:linear-gradient(115deg, transparent 38%, rgba(255,251,235,.8) 49%, transparent 60%) no-repeat; background-size:260% 100%; background-position:130% 0; }
.bay.lit .bm .sheen{ opacity:1; animation:glint 9s ease-in-out calc(var(--k) * .22s + 2s) infinite; }
.bay b{ max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-family:var(--serif-ko); font-size:clamp(11px, calc(1.3vw + 2px), 14px); opacity:.5; transition:opacity .9s ease calc(var(--k) * 110ms); }
.bay small{ max-width:100%; text-align:center; font-family:var(--mono); font-size:10.5px; color:var(--ink-3); }
.bay-rn{ font-family:var(--display); font-size:12px; letter-spacing:.14em; color:var(--t-ink); opacity:.75; }
.bay-light{ position:absolute; left:50%; top:-24px; width:150%; height:calc(100% + 44px); transform:translateX(-50%); z-index:-1; pointer-events:none; opacity:0; background:radial-gradient(ellipse 48% 72% at 50% 0%, color-mix(in srgb, var(--accent) 34%, transparent), transparent 72%); transition:opacity 1.3s ease calc(var(--k) * 110ms); }
.bay.lit canvas{ filter:drop-shadow(0 8px 14px rgba(0,0,0,.35)); }
.bay.lit b{ opacity:1; }
.bay.lit .bay-light{ opacity:.85; }
.bay.hl .bm{ box-shadow:0 0 0 2px color-mix(in srgb, var(--accent) 70%, transparent), 0 0 26px color-mix(in srgb, var(--accent) 45%, transparent); }
.bay.hl .bay-light{ opacity:1; }
.t-cap{ min-height:48px; margin:14px auto 0; display:flex; flex-wrap:wrap; justify-content:center; align-items:baseline; gap:4px 12px; font-size:14px; color:var(--ink-3); }
.t-cap .tc-d{ font-size:13px; }
.t-cap .tc-n{ font-family:var(--display); letter-spacing:.2em; color:var(--accent); font-size:13px; }
.t-cap b{ font-family:var(--serif-ko); font-size:19px; color:var(--ink); font-weight:600; }
.t-cap .tc-e{ color:var(--ink-2); }
.t-cap.on{ animation:capIn .35s cubic-bezier(.2,.7,.2,1) both; }
a.bay:focus-visible{ outline:2px solid var(--accent); outline-offset:-2px; border-radius:10px; }
.hh-thread-box{ width:min(1080px,100%); margin:30px auto 0; }
.hh-thread-h{ font-size:13.5px; color:var(--ink-2); margin:0 auto 26px; max-width:66ch; line-height:1.6; }
.hh-thread{ display:flex; align-items:center; }
.th-n{ appearance:none; flex:none; display:grid; justify-items:center; padding:7px 11px; border-radius:12px; border:1px solid color-mix(in srgb, var(--accent) 45%, var(--line)); background:var(--surface); color:var(--ink); cursor:pointer; transition:border-color .2s, transform .2s; }
.th-n:hover{ border-color:var(--accent); }
.th-n i{ font-style:normal; font-family:var(--display); font-size:11px; letter-spacing:.12em; color:var(--accent); }
.th-n b{ font-family:var(--serif-ko); font-size:13.5px; font-weight:600; }
.th-n small{ font-family:var(--mono); font-size:10px; color:var(--ink-3); }
.th-l{ flex:var(--g) 1 26px; min-width:26px; height:2px; position:relative; background:linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 55%, transparent) 50%, var(--accent)); }
.th-c{ position:absolute; left:50%; bottom:8px; transform:translateX(-50%); display:grid; justify-items:center; white-space:nowrap; font-size:11px; color:var(--ink-3); line-height:1.3; }
.th-c em{ font-style:normal; font-family:var(--mono); font-size:10.5px; color:var(--accent); }
.hh-actions{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin:24px 0 10px; }

/* 방 목록 띠 */
.hall-idx{ position:sticky; top:var(--hdr); z-index:12; background:var(--glass); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-bottom:1px solid var(--line-soft); margin:18px 0 10px; padding:6px 0; }
.hall-idx .ms-i{ padding:6px 4px; gap:2px; }
.hall-idx .ms-i canvas{ width:min(46px,100%); }
.hall-idx .ms-i small{ display:none; }
.hall-idx .ms-i b{ font-size:12.5px; }
.hall-idx .ms-i.on{ background:var(--surface); border-color:color-mix(in srgb, var(--accent) 60%, var(--line)); }
.hall-idx .ms-i.on b{ color:var(--accent); }

/* 방 */
.room{ position:relative; isolation:isolate; display:grid; grid-template-columns:minmax(0,0.9fr) minmax(0,1.1fr); gap:clamp(24px,5vw,72px); align-items:center; padding:clamp(40px,6vw,80px) 0; scroll-margin-top:calc(var(--hdr) + 104px); }
.room::before{ content:attr(data-rn); position:absolute; top:clamp(6px,2vw,24px); left:-.04em; z-index:-1; pointer-events:none; font-family:var(--display); font-size:clamp(110px,16vw,230px); line-height:1; letter-spacing:-.02em; color:var(--accent); opacity:.07; }
.room:nth-of-type(even)::before{ left:auto; right:-.04em; }
.room:nth-of-type(even) .room-art{ order:2; }
.room-art{ position:relative; display:grid; justify-items:center; gap:14px; }
.room-art::before{ content:''; position:absolute; left:50%; top:-70px; width:min(560px,130%); height:calc(100% + 70px); transform:translateX(-50%); z-index:-1; pointer-events:none; background:radial-gradient(ellipse 42% 58% at 50% 0%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 72%); }
.frame{ position:relative; width:min(400px,100%); aspect-ratio:1; padding:16px; border-radius:50%; background:radial-gradient(circle at 50% 38%, color-mix(in srgb, var(--accent) 10%, var(--raise)), var(--raise) 72%); box-shadow:0 40px 80px -40px rgba(0,0,0,.75), inset 0 0 0 1px color-mix(in srgb, var(--accent) 40%, transparent), inset 0 0 40px rgba(0,0,0,.22); transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)); transition:transform .7s cubic-bezier(.2,.7,.2,1); }
.frame.tilting{ transition:transform .12s linear; }
.frame canvas{ width:100%; height:100%; display:block; border-radius:50%; filter:drop-shadow(0 14px 22px rgba(0,0,0,.42)); }
.frame .sheen{ position:absolute; inset:16px; border-radius:50%; pointer-events:none; mix-blend-mode:soft-light; background:linear-gradient(115deg, transparent 38%, rgba(255,251,235,.75) 49%, transparent 60%) no-repeat; background-size:260% 100%; background-position:130% 0; animation:glint 8s ease-in-out infinite; }
.frame.tilting .sheen{ animation:none; background-position:var(--sx,48%) 0; }
@keyframes glint{ 0%,60%{ background-position:130% 0; } 100%{ background-position:-30% 0; } }
.plaque{ display:grid; justify-items:center; gap:2px; text-align:center; padding:12px 24px; border-radius:6px; min-width:250px; border:1px solid color-mix(in srgb, var(--accent) 40%, var(--line)); background:var(--surface); box-shadow:inset 0 0 0 3px var(--surface), inset 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent); }
.plaque b{ font-family:var(--serif-ko); font-size:21px; }
.plaque small{ font-family:var(--display); font-style:italic; font-size:14px; color:var(--ink-2); }
.plaque span{ font-family:var(--mono); font-size:11.5px; color:var(--ink-3); }
.medal-note{ font-size:12px; color:var(--ink-3); text-align:center; max-width:34ch; }
.room-text{ display:grid; gap:14px; align-content:center; }
.room-text .caps{ color:var(--accent); letter-spacing:.14em; }
.room-text h3{ font-family:var(--serif-ko); font-size:clamp(30px,3.6vw,44px); line-height:1.12; }
.room-text .why{ font-size:16px; line-height:1.8; color:var(--ink-2); max-width:60ch; }
.room-text .why::first-letter{ float:left; font-family:var(--serif-ko); font-weight:600; font-size:3.25em; line-height:.92; margin:.1em .14em 0 0; color:var(--accent); }
.room-text .sig{ font-size:clamp(20px,2.2vw,26px); color:var(--accent); padding:4px 0; }
.feats{ display:grid; gap:8px; counter-reset:f; }
.feats li{ display:grid; grid-template-columns:28px 1fr; gap:10px; font-size:14.5px; line-height:1.6; }
.feats li::before{ counter-increment:f; content:counter(f); width:24px; height:24px; border-radius:50%; border:1px solid color-mix(in srgb, var(--accent) 55%, transparent); color:var(--accent); font-family:var(--mono); font-size:11px; display:flex; align-items:center; justify-content:center; margin-top:1px; }
.q{ margin:4px 0 0; padding:14px 18px; border-left:3px solid var(--accent); background:var(--accent-soft); border-radius:0 12px 12px 0; }
.q p{ font-family:var(--serif-ko); font-size:17px; line-height:1.6; }
.q cite{ display:block; margin-top:4px; font-style:normal; font-size:12px; color:var(--ink-3); }
.legacy{ display:grid; gap:10px; padding-top:14px; border-top:1px solid var(--line-soft); }
.lg-row{ display:grid; grid-template-columns:136px minmax(0,1fr); gap:12px; align-items:start; }
.lg-row .lab{ font-size:12px; color:var(--ink-3); padding-top:6px; letter-spacing:0; text-transform:none; }
.legacy .chip.more{ text-decoration:none; color:var(--ink-3); border-style:dashed; }
.lg-works{ display:flex; flex-wrap:wrap; gap:4px 16px; font-family:var(--serif-ko); font-size:14.5px; padding-top:3px; }
.lg-works small{ font-family:var(--mono); font-size:11px; color:var(--ink-3); margin-left:6px; }
.lg-none{ font-size:13px; color:var(--ink-3); line-height:1.6; padding-top:4px; }
.legacy .chips{ gap:6px; }
.chip.mpc{ border-color:color-mix(in srgb, var(--accent) 55%, var(--line)); }
.room-stats{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:8px; }
.room-stats div{ display:grid; gap:0; padding:10px 12px; border-radius:10px; background:var(--surface); border:1px solid var(--line-soft); }
.room-stats b{ font-family:var(--display); font-size:24px; font-weight:500; line-height:1.1; }
.room-stats span{ font-size:11.5px; color:var(--ink-3); line-height:1.35; }
.hall.rv-on .room .rv{ opacity:0; transform:translateY(22px); transition:opacity .9s ease, transform .9s cubic-bezier(.2,.7,.2,1); transition-delay:calc(var(--d, 0) * 70ms); }
.hall.rv-on .room .room-art.rv{ transform:translateY(24px) scale(.96); }
.hall.rv-on .room.in .rv{ opacity:1; transform:none; }

/* 방 안의 탭 */
.rtabs{ gap:0; padding-top:4px; border-top:0; }
.rt-bar{ position:relative; display:flex; gap:2px; border-bottom:1px solid var(--line-soft); margin-bottom:14px; }
.rt-bar [role=tab]{ appearance:none; background:none; border:0; padding:9px 14px 10px; font-size:13.5px; color:var(--ink-3); cursor:pointer; font-family:inherit; transition:color .2s; }
.rt-bar [role=tab]:hover{ color:var(--ink); }
.rt-bar [role=tab][aria-selected=true]{ color:var(--ink); font-weight:600; }
.rt-ink{ position:absolute; left:0; bottom:-1px; height:2px; width:0; background:var(--accent); border-radius:2px; transition:transform .35s cubic-bezier(.2,.7,.2,1), width .35s cubic-bezier(.2,.7,.2,1); }
.rt-panel{ display:grid; gap:10px; animation:capIn .35s ease both; }
.rt-panel[hidden]{ display:none; }
.rt-lead{ font-size:13.5px; color:var(--ink-2); line-height:1.65; }
.cons{ display:block; width:100%; max-width:600px; height:auto; overflow:visible; }
.cn-h{ font-size:11.5px; fill:var(--ink-3); text-anchor:middle; letter-spacing:.04em; }
.cn-l{ fill:none; stroke:color-mix(in srgb, var(--accent) 55%, transparent); stroke-width:1.1; stroke-dasharray:3 4; }
.cn-l.t{ stroke:var(--accent); stroke-width:1.5; stroke-dasharray:none; }
.cn-n{ cursor:pointer; outline:none; }
.cn-n rect{ fill:var(--surface); stroke:var(--line); stroke-width:1; transition:stroke .2s, fill .2s; }
.cn-n text{ fill:var(--ink); font-size:13px; text-anchor:middle; font-family:var(--serif-ko); pointer-events:none; }
.cn-n:hover rect,.cn-n:focus-visible rect{ stroke:var(--accent); fill:var(--accent-soft); }
.cn-c .o{ fill:none; stroke:var(--accent); stroke-width:1.2; opacity:.6; }
.cn-c .i{ fill:var(--accent); }
.cn-c text{ fill:var(--bg); font-family:'STIX Two Text','Cambria Math',serif; font-size:21px; font-weight:600; text-anchor:middle; }
.cn-narrow{ display:none; gap:10px; }
.cn-list{ display:grid; gap:6px; }
.cn-list .lab{ font-size:12px; color:var(--ink-3); }
.cn-list .chip.t{ border-color:color-mix(in srgb, var(--accent) 60%, var(--line)); }
.cn-key{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; font-size:12px; color:var(--ink-3); }
.cn-key .k{ display:inline-block; width:22px; height:0; border-top:1.5px dashed color-mix(in srgb, var(--accent) 60%, transparent); }
.cn-key .k.t{ border-top-style:solid; border-top-color:var(--accent); }
.cn-more{ margin-left:auto; color:var(--accent); text-decoration:none; font-size:12.5px; }
.cn-more:hover{ text-decoration:underline; }
@media (max-width:560px){ .cons{ display:none; } .cn-narrow{ display:grid; } }

/* 방을 따라 내려가는 금빛 선 */
#hall-rooms{ position:relative; }
.g-rail{ position:absolute; left:0; width:28px; pointer-events:none; display:none; }
.g-track,.g-fill{ position:absolute; left:13px; top:0; bottom:0; width:2px; border-radius:2px; }
.g-track{ background:var(--line-soft); }
.g-fill{ background:linear-gradient(var(--accent), color-mix(in srgb, var(--accent) 70%, #fff)); transform-origin:top; transform:scaleY(0); box-shadow:0 0 10px color-mix(in srgb, var(--accent) 50%, transparent); }
.g-rail i{ position:absolute; left:14px; width:28px; height:28px; margin:-14px 0 0 -14px; border-radius:50%; display:grid; place-items:center; font-style:normal; font-family:var(--display); font-size:10.5px; letter-spacing:.02em; color:var(--ink-3); background:var(--bg); border:1px solid var(--line); transition:color .4s, border-color .4s, background .4s, box-shadow .4s; }
.g-rail i.on{ color:var(--bg); background:var(--accent); border-color:var(--accent); box-shadow:0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent); }
@media (min-width:1101px){ #hall-rooms{ padding-left:56px; } .g-rail{ display:block; } }

/* 방과 방 사이 · 계보의 실 */
.interlude{ display:grid; justify-items:center; gap:8px; text-align:center; }
.il-line{ width:1px; height:36px; background:linear-gradient(transparent, var(--accent), transparent); }
.il-path{ display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:6px; }
.il-path .ar{ color:var(--accent); }
.il-path .chip.via{ border-style:dashed; }
.il-cap{ font-size:12.5px; color:var(--ink-3); }

/* 선정 기준 */
.hall-crit{ display:grid; gap:22px; margin-top:clamp(40px,6vw,76px); padding-top:clamp(30px,5vw,56px); border-top:1px solid var(--line-soft); scroll-margin-top:calc(var(--hdr) + 104px); }
.hall-crit .vh.sm h3{ font-family:var(--serif-ko); font-size:clamp(24px,3vw,34px); margin:4px 0 8px; }
.hall-crit .vh.sm p{ color:var(--ink-2); max-width:70ch; line-height:1.7; }
.crit-cards{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.crit{ display:grid; gap:6px; align-content:start; padding:18px; border-radius:14px; border:1px solid var(--line-soft); background:var(--surface); }
.crit i{ font-style:normal; font-family:var(--display); font-size:20px; color:var(--accent); }
.crit b{ font-family:var(--serif-ko); font-size:17px; }
.crit p{ font-size:13.5px; line-height:1.65; color:var(--ink-2); }
.score-wrap{ overflow-x:auto; border:1px solid var(--line-soft); border-radius:14px; background:var(--surface); }
.score{ width:100%; min-width:680px; border-collapse:collapse; }
.score caption{ caption-side:bottom; text-align:left; padding:10px 14px; font-size:12px; color:var(--ink-3); }
.score th,.score td{ padding:10px 14px; text-align:left; font-weight:400; border-bottom:1px solid var(--line-soft); }
.score thead th{ font-size:12px; color:var(--ink-3); }
.score tbody th button{ appearance:none; border:0; background:none; padding:0; display:inline-flex; align-items:baseline; gap:8px; cursor:pointer; color:var(--ink); font-family:var(--serif-ko); font-size:14.5px; }
.score tbody th button:hover{ color:var(--accent); }
.score tbody th i{ font-style:normal; min-width:24px; font-family:var(--display); font-size:12px; color:var(--accent); }
.score td b{ font-family:var(--mono); font-size:12.5px; font-weight:500; }
.score .sb{ display:block; position:relative; width:min(120px,100%); height:5px; margin-bottom:5px; border-radius:3px; background:var(--line-soft); }
.score .sb::after{ content:''; position:absolute; inset:0 auto 0 0; width:var(--w); border-radius:3px; background:linear-gradient(90deg, color-mix(in srgb, var(--accent) 50%, transparent), var(--accent)); }
.cand{ display:grid; gap:10px; }
.cand .lab{ font-family:var(--serif-ko); font-size:17px; }
.hall-note{ font-size:13px; color:var(--ink-3); text-align:center; margin:26px auto 0; max-width:60ch; }

/* ═════════ 입성 의식 */
@keyframes hgIn{ from{ opacity:0; transform:translateY(18px) scale(.97); } to{ opacity:1; transform:none; } }
@keyframes cardOut{ from{ opacity:1; transform:none; } to{ opacity:0; transform:translateY(14px) scale(.98); visibility:hidden; } }
@keyframes capIn{ from{ opacity:0; transform:translateY(8px); filter:blur(3px); } to{ opacity:1; transform:none; filter:none; } }
@keyframes stamp{ 0%{ opacity:0; transform:translate(-50%,-50%) scale(2.4) rotate(-14deg); } 11%{ opacity:1; transform:translate(-50%,-50%) scale(.93) rotate(-8deg); } 18%{ transform:translate(-50%,-50%) scale(1.03) rotate(-8deg); } 24%,76%{ opacity:1; transform:translate(-50%,-50%) scale(1) rotate(-8deg); } 100%{ opacity:0; transform:translate(-50%,-50%) scale(1.22) rotate(-8deg); } }
.bgm-chip{ appearance:none; justify-self:start; width:fit-content; max-width:100%; display:inline-flex; align-items:center; gap:10px; margin-top:14px; padding:8px 14px 8px 10px; border-radius:999px; border:1px solid color-mix(in srgb, var(--accent) 40%, var(--line)); background:var(--surface); color:var(--ink); text-align:left; cursor:pointer; transition:border-color .2s, background .2s; }
.bgm-chip:hover{ border-color:var(--accent); }
.bgm-chip .bt{ display:grid; line-height:1.35; }
.bgm-chip b{ font-size:13px; font-weight:600; }
.bgm-chip small{ font-size:11.5px; color:var(--ink-3); }
.bgm-chip .bq{ display:inline-flex; align-items:flex-end; gap:2px; width:22px; height:22px; padding:4px; border-radius:50%; background:var(--accent-soft); }
.bgm-chip .bq i{ flex:1; height:30%; border-radius:1px; background:var(--accent); }
.bgm-chip.on .bq i{ animation:eqb 1.1s ease-in-out infinite; }
.bgm-chip.on .bq i:nth-child(2){ animation-delay:-.35s; } .bgm-chip.on .bq i:nth-child(3){ animation-delay:-.7s; }
@keyframes eqb{ 0%,100%{ height:30%; } 50%{ height:100%; } }
.hh-actions .bgm-chip{ margin-top:0; }
.now-t{ font-family:var(--serif-ko); letter-spacing:.02em; }
.snd-now{ display:grid; grid-template-columns:auto 1fr; column-gap:8px; align-items:center; padding:8px 10px; margin:6px 0 4px; border-radius:10px; border:1px solid var(--line-soft); background:var(--bg); }
.snd-now i{ font-style:normal; grid-row:span 2; color:var(--ink-3); font-size:16px; }
.snd-now.on i{ color:var(--accent); animation:npulse 1.6s ease-in-out infinite; }
.snd-now span{ font-size:13px; font-weight:500; }
.snd-now small{ font-size:11px; color:var(--ink-3); }
@keyframes npulse{ 50%{ opacity:.35; } }

/* ═════════ 난제 애니메이션 */
.mp-anim{ margin:0; display:grid; gap:8px; border:1px solid var(--line); border-radius:16px; overflow:hidden; background:var(--surface); }
.mp-anim canvas{ width:100%; aspect-ratio:16/9; display:block; }
.mp-anim figcaption{ display:flex; align-items:center; gap:8px; padding:0 12px 10px; }
.mp-anim figcaption .grow{ flex:1; }

@media (max-width:1100px){
  .room,.room:nth-of-type(even){ grid-template-columns:1fr; }
  .room:nth-of-type(even) .room-art{ order:0; }
  .room-art{ grid-template-columns:minmax(0,260px) minmax(0,1fr); align-items:center; justify-items:start; column-gap:clamp(18px,4vw,36px); }
  .room-art .frame{ grid-row:span 2; width:100%; padding:12px; }
  .room-art .frame .sheen{ inset:12px; }
  .room-art .plaque{ align-self:end; justify-items:start; text-align:left; min-width:0; }
  .room-art .medal-note{ align-self:start; text-align:left; }
  .room-art::before{ left:130px; width:420px; }
  .room:nth-of-type(even)::before{ right:auto; left:-.04em; }
  .room-stats{ grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width:820px){
  .hh-thread{ flex-direction:column; align-items:center; }
  .th-n{ grid-template-columns:28px auto; column-gap:8px; justify-items:start; min-width:200px; }
  .th-n i{ grid-row:span 2; align-self:center; }
  .th-l{ flex:none; width:2px; min-width:0; height:calc(var(--g) * 1.1px + 26px); background:linear-gradient(var(--accent), color-mix(in srgb, var(--accent) 55%, transparent) 50%, var(--accent)); }
  .th-c{ left:14px; bottom:auto; top:50%; transform:translateY(-50%); justify-items:start; }
  .crit-cards{ grid-template-columns:1fr; }
  .lg-row{ grid-template-columns:1fr; gap:4px; }
  .lg-row .lab{ padding-top:0; }
}
@media (max-width:640px){
  .medal-strip{ grid-template-columns:repeat(4,minmax(0,1fr)); }
  .hall-idx{ grid-template-columns:repeat(7,minmax(0,1fr)); gap:2px; }
  .hall-idx .ms-i b{ display:none; }
  .hall-idx .ms-i{ padding:5px 2px; }
  .hall-idx .ms-i canvas{ width:min(40px,100%); }
  .hh-temple .t-cols{ display:none; }
  .hh-temple .t-bays{ display:flex; flex-wrap:wrap; justify-content:center; row-gap:10px; padding:16px 0 14px; }
  .hh-temple .bay{ flex:0 0 25%; width:25%; }
  .hh-temple .bay b{ font-size:12.5px; }
  .hh-temple .bay small{ font-size:9.5px; }
  .t-ins{ font-size:30px; letter-spacing:5px; }
  .room-stats{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .plaque{ min-width:0; width:100%; }
  .room-art{ grid-template-columns:1fr; justify-items:center; }
  .room-art .frame{ width:min(250px,76vw); grid-row:auto; }
  .room-art .plaque,.room-art .medal-note{ justify-items:center; text-align:center; align-self:auto; }
  .room-art::before{ left:50%; }
}

.mp-anim{ max-width:860px; }

/* ═════════ 고급 마감 · 제목 밑줄과 주 단추는 ui.css 로 옮김 */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .room::before{ animation:numDrift linear both; animation-timeline:view(); }
    @keyframes numDrift{ from{ transform:translateY(60px); } to{ transform:translateY(-60px); } }
  }
}

/* ═════════ 시트 */
.sheet-wrap{ position:fixed; inset:0; z-index:900; display:grid; place-items:center; }
.sheet-bg{ position:absolute; inset:0; background:rgba(4,6,10,.55); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); opacity:0; transition:opacity .25s ease; }
.sheet{ position:relative; width:min(640px,92vw); max-height:84vh; display:flex; flex-direction:column; border-radius:18px; background:var(--raise); border:1px solid var(--line); box-shadow:0 40px 90px -30px rgba(0,0,0,.7); opacity:0; transform:translateY(16px) scale(.98); transition:opacity .25s ease, transform .3s cubic-bezier(.2,.7,.2,1); }
.sheet.wide{ width:min(980px,94vw); }
.sheet-wrap.on .sheet-bg{ opacity:1; }
.sheet-wrap.on .sheet{ opacity:1; transform:none; }
.sheet-h{ display:flex; align-items:center; gap:10px; padding:14px 16px 12px 22px; border-bottom:1px solid var(--line-soft); }
.sheet-t{ flex:1; font-family:var(--serif-ko); font-size:17px; }
.sheet-grab{ display:none; }
.sheet-body{ overflow:auto; padding:18px 22px 24px; overscroll-behavior:contain; }
.sheet-more{ margin-top:16px; text-align:center; }
.hall-crit.in-sheet{ margin:0; padding:0; border:0; gap:18px; }
body.sheet-open{ overflow:hidden; }
@media (max-width:760px){
  .sheet-wrap{ place-items:end stretch; }
  .sheet,.sheet.wide{ width:100%; max-height:88vh; border-radius:20px 20px 0 0; border-bottom:0; transform:translateY(100%); padding-bottom:env(safe-area-inset-bottom,0px); }
  .sheet-wrap.on .sheet{ transform:none; }
  .sheet-h{ position:relative; padding-top:20px; }
  .sheet-grab{ display:block; position:absolute; left:50%; top:8px; width:40px; height:4px; margin-left:-20px; border-radius:4px; background:var(--line); }
  .sheet-body{ padding:14px 16px 22px; }
}
@media (prefers-reduced-motion: reduce){ .sheet,.sheet-bg{ transition:none; } }
.cls-list{ display:grid; gap:10px; counter-reset:c; padding:0; margin:0; list-style:none; }
.cls-list li{ position:relative; padding:12px 14px 12px 44px; border-radius:12px; background:var(--surface); border:1px solid var(--line-soft); font-size:14.5px; line-height:1.65; }
.cls-list li::before{ counter-increment:c; content:counter(c); position:absolute; left:14px; top:13px; width:20px; height:20px; border-radius:50%; background:var(--accent); color:var(--accent-ink); font-family:var(--mono); font-size:11.5px; display:grid; place-items:center; }
.kr-note{ margin-top:4px; padding:14px 16px; border-radius:12px; border:1px dashed color-mix(in srgb, var(--accent) 50%, var(--line)); background:var(--accent-soft); }
.kr-note b{ display:block; font-size:12.5px; color:var(--accent); margin-bottom:4px; }
.kr-note p{ font-size:14px; line-height:1.7; color:var(--ink-2); }
.chip.static{ cursor:default; }
.th-l.none{ background:repeating-linear-gradient(90deg, color-mix(in srgb, var(--accent) 60%, transparent) 0 6px, transparent 6px 11px); }
.hall-switch{ display:inline-flex; gap:4px; padding:4px; margin:0 auto 18px; border-radius:999px; border:1px solid var(--line); background:var(--surface); }
.hall-switch a{ padding:7px 16px; border-radius:999px; text-decoration:none; color:var(--ink-2); font-size:13.5px; }
.hall-switch a[aria-current]{ background:var(--accent); color:var(--accent-ink); font-weight:600; }

.hall-crit.in-sheet .vh.sm .eyebrow,.hall-crit.in-sheet .vh.sm h3{ display:none; }

.bgm-pill{ position:fixed; left:50%; bottom:calc(var(--dock, 0px) + 18px + env(safe-area-inset-bottom, 0px)); z-index:75; transform:translate(-50%, 20px); opacity:0; display:inline-flex; align-items:center; gap:10px; padding:10px 18px 10px 12px; border-radius:999px; border:1px solid color-mix(in srgb, var(--accent) 55%, var(--line)); background:var(--raise); color:var(--ink); font:inherit; font-size:13.5px; box-shadow:0 18px 40px -18px rgba(0,0,0,.6); cursor:pointer; transition:opacity .3s ease, transform .35s cubic-bezier(.2,.7,.2,1); max-width:calc(100vw - 24px); }
.bgm-pill.on{ opacity:1; transform:translate(-50%, 0); }
.bgm-pill b{ font-weight:600; color:var(--accent); }
.bgm-pill .bq{ display:inline-flex; align-items:flex-end; gap:2px; width:22px; height:22px; padding:4px; border-radius:50%; background:var(--accent-soft); }
.bgm-pill .bq i{ flex:1; height:40%; border-radius:1px; background:var(--accent); animation:eqb 1.1s ease-in-out infinite; }
.bgm-pill .bq i:nth-child(2){ animation-delay:-.35s; } .bgm-pill .bq i:nth-child(3){ animation-delay:-.7s; }

.home-hall .hof-h2{ margin-top:18px; padding-top:16px; border-top:1px solid var(--line-soft); }

/* ═════════ 휴대폰과 태블릿 */
.dock{ display:none; }
@media (max-width:760px){
  :root{ --dock:62px; }
  .dock{ position:fixed; left:0; right:0; bottom:0; z-index:58; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); height:calc(var(--dock) + env(safe-area-inset-bottom,0px)); padding-bottom:env(safe-area-inset-bottom,0px); background:var(--glass); backdrop-filter:blur(16px) saturate(1.2); -webkit-backdrop-filter:blur(16px) saturate(1.2); border-top:1px solid var(--line); transition:transform .3s cubic-bezier(.2,.7,.2,1); }
  .dock a,.dock button{ position:relative; appearance:none; background:none; border:0; display:grid; place-items:center; align-content:center; gap:3px; color:var(--ink-3); font:inherit; font-size:11.5px; line-height:1.2; letter-spacing:0; text-decoration:none; cursor:pointer; -webkit-tap-highlight-color:transparent; }
  .dock svg{ width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
  .dock [aria-current]{ color:var(--accent); }
  .dock [aria-current]::before{ content:''; position:absolute; top:0; left:50%; width:26px; height:2px; margin-left:-13px; border-radius:2px; background:var(--accent); }
  .dock a:active,.dock button:active{ transform:scale(.94); }
  body{ padding-bottom:calc(var(--dock) + env(safe-area-inset-bottom,0px)); }
  body.insp-open .dock,body.gate-lock .dock,body.sheet-open .dock,body.menu-open .dock{ transform:translateY(110%); }
  .totop{ bottom:calc(var(--dock) + 12px + env(safe-area-inset-bottom,0px)) !important; }
  .toast{ bottom:calc(var(--dock) + 16px + env(safe-area-inset-bottom,0px)); }
  .appview{ height:calc(100dvh - var(--hdr) - var(--dock) - env(safe-area-inset-bottom,0px)); }
  .mapgrid .pill .nm{ white-space:normal; overflow:visible; text-overflow:clip; word-break:keep-all; line-height:1.25; }
  .mapgrid .pill{ align-items:flex-start; }
}
@media (pointer:coarse){
  .chip{ min-height:36px; padding:6px 12px; }
  .pchip{ min-height:34px; padding:6px 10px 6px 8px; }
  .btn.sm{ min-height:38px; }
  .seg button{ min-height:40px; }
  .pill{ min-height:34px; }
  .ibtn{ min-width:40px; min-height:40px; }
  .th-n{ min-height:44px; }
  .ms-i{ min-height:44px; }
  .ft-col a{ display:inline-block; padding:7px 0; }
  .ft-keys{ min-height:40px; }
  .gchip{ min-height:36px; padding:6px 11px; }
  button.chx{ min-height:34px; }
}
@media (max-width:760px){ .menu-btn{ display:none !important; } }

.bgm-pill{ white-space:nowrap; }
@media (max-width:760px){ .bgm-pill{ top:calc(var(--hdr) + 10px); bottom:auto; transform:translate(-50%, -16px); } .bgm-pill.on{ transform:translate(-50%, 0); } }

/* ═════════ 가독성 · 읽기 편하게 */
p,li,dd,blockquote,figcaption{ text-wrap:pretty; }
td,th,.count,.hero-n dd,.pdc-n,.qscore,ol.rank .v,.bar-r .bn{ font-variant-numeric:tabular-nums lining-nums; }
.snd-now small{ font-size:12px; }
.snd-now span{ font-size:13.5px; }
/* 스크롤 띠 안의 초점 테두리는 안쪽에 그려 잘리지 않게 */
.nav .tab:focus-visible,.seg button:focus-visible,.ch-jump .chip:focus-visible,.tl-jump .chip:focus-visible,.tl-legend .chip:focus-visible,.fsel .chip:focus-visible,.trail .t:focus-visible,.ladder .rung:focus-visible,.hbar:focus-visible,.dock a:focus-visible,.dock button:focus-visible,.res:focus-visible,.menu-g a:focus-visible{ outline-offset:-2px; }
.search input:focus{ border-color:color-mix(in srgb, var(--accent) 65%, var(--line)); }
.search input:focus-visible{ outline:2px solid color-mix(in srgb, var(--accent) 55%, transparent); outline-offset:1px; }
.res.on{ box-shadow:inset 3px 0 0 var(--accent); }
.btn:focus-visible,.chip:focus-visible,.pchip:focus-visible,.ibtn:focus-visible{ outline-offset:2px; box-shadow:0 0 0 5px color-mix(in srgb, var(--accent) 18%, transparent); }

/* 창작 일러스트 초상 · 인물 사전 카드와 인물 페이지 머리 */
.pdc.has-por{ position:relative; padding-right:78px; }
.pdc-por{ position:absolute; top:14px; right:14px; width:56px; height:56px; border-radius:50%; box-shadow:0 4px 14px rgba(0,0,0,.28); transition:transform .3s cubic-bezier(.2,.7,.2,1); }
.pdc.has-por:hover .pdc-por{ transform:translateY(-2px) rotate(-3deg); }
.pp-h.has-por{ position:relative; padding-right:clamp(0px, 22vw, 280px); min-height:260px; }
.pp-por{ position:absolute; right:0; top:4px; margin:0; width:clamp(150px, 19vw, 240px); text-align:center; }
.pp-por .por{ width:100%; height:auto; filter:drop-shadow(0 14px 30px rgba(0,0,0,.35)); }
.pp-por figcaption{ margin-top:6px; font-size:12px; color:var(--ink-3); letter-spacing:.04em; }
@media (max-width:760px){
  .pp-h.has-por{ padding-right:0; min-height:0; }
  .pp-por{ position:static; width:150px; margin:4px 0 14px; text-align:left; }
  .pp-por figcaption{ text-align:center; width:150px; }
}

/* 분야 아이콘 · src/v_icons.js 의 ficon ficonBadge 와 짝 */
.fi{ display:inline-block; width:1em; height:1em; vertical-align:-.125em; flex:none; color:inherit; }

/* 분야색 · 확장 키는 가까운 분야색을 빌림 */
.fi-geo{ --fi-c:var(--f-geo); } .fi-alg{ --fi-c:var(--f-alg); } .fi-ana{ --fi-c:var(--f-ana); } .fi-nt{ --fi-c:var(--f-nt); }
.fi-top{ --fi-c:var(--f-top); } .fi-prob{ --fi-c:var(--f-prob); } .fi-log{ --fi-c:var(--f-log); } .fi-comb{ --fi-c:var(--f-comb); }
.fi-app{ --fi-c:var(--f-app); } .fi-cs{ --fi-c:var(--f-cs); } .fi-edu{ --fi-c:var(--f-edu); }
.fi-ag{ --fi-c:var(--f-geo); } .fi-pde{ --fi-c:var(--f-app); } .fi-dyn{ --fi-c:var(--f-cs); } .fi-algmp{ --fi-c:var(--f-alg); } .fi-logc{ --fi-c:var(--f-log); }
.fi.fi-tint{ color:var(--fi-c, currentColor); }

/* 칩 안에서는 글자보다 조금 크게 · 분야색으로 */
.chip > .fi{ font-size:1.25em; margin-left:-2px; color:var(--fi-c, var(--c, currentColor)); }
.chip > .fi-badge.sm{ margin-left:-6px; }

/* 배지 */
.fi-badge{
  --fb:var(--fi-c, var(--accent));
  display:inline-grid; place-items:center; flex:none; vertical-align:middle;
  width:32px; height:32px; border-radius:9px;
  color:var(--fb);
  background:
    radial-gradient(120% 95% at 28% 12%, color-mix(in srgb, var(--fb) 22%, transparent), transparent 72%),
    color-mix(in srgb, var(--fb) 8%, var(--surface));
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--fb) 30%, transparent), 0 1px 2px -1px rgba(0,0,0,.25);
}
.fi-badge > .fi{ width:18px; height:18px; transition:transform .5s cubic-bezier(.2,.7,.2,1); }
.fi-badge.sm{ width:24px; height:24px; border-radius:7px; }
.fi-badge.sm > .fi{ width:14px; height:14px; }
.fi-badge.lg{ width:44px; height:44px; border-radius:12px; }
.fi-badge.lg > .fi{ width:24px; height:24px; }
.fi-badge:hover > .fi, a:hover .fi-badge > .fi, button:hover .fi-badge > .fi{ transform:translateY(-1px) scale(1.07); }
@media (prefers-reduced-motion: reduce){
  .fi-badge > .fi{ transition:none; }
  .fi-badge:hover > .fi, a:hover .fi-badge > .fi, button:hover .fi-badge > .fi{ transform:none; }
}

/* 시대 아이콘 · src/v_icons.js 의 eicon eiconBadge 와 짝 */
.ei{ display:inline-block; width:1em; height:1em; vertical-align:-.125em; flex:none; color:inherit; }

/* 시대색 · 고대의 청동과 테라코타에서 근대의 쪽빛과 청록으로 */
:root{
  --era-e1:hsl(29 50% 62%); --era-e2:hsl(14 56% 66%); --era-e3:hsl(352 46% 70%); --era-e4:hsl(322 36% 70%); --era-e5:hsl(284 36% 74%);
  --era-e6:hsl(252 48% 76%); --era-e7:hsl(228 58% 72%); --era-e8:hsl(207 52% 66%); --era-e9:hsl(189 48% 58%); --era-e10:hsl(168 44% 56%);
}
@media (prefers-color-scheme: light){
  :root:not([data-theme='dark']):not([data-mtheme='dark']){
    --era-e1:hsl(29 62% 32%); --era-e2:hsl(14 62% 40%); --era-e3:hsl(352 52% 40%); --era-e4:hsl(322 40% 38%); --era-e5:hsl(284 34% 42%);
    --era-e6:hsl(252 40% 47%); --era-e7:hsl(228 52% 43%); --era-e8:hsl(207 64% 35%); --era-e9:hsl(189 76% 27%); --era-e10:hsl(168 64% 26%);
  }
}
:root[data-theme='light']:not([data-mtheme='dark']),:root[data-mtheme='light']{
  --era-e1:hsl(29 62% 32%); --era-e2:hsl(14 62% 40%); --era-e3:hsl(352 52% 40%); --era-e4:hsl(322 40% 38%); --era-e5:hsl(284 34% 42%);
  --era-e6:hsl(252 40% 47%); --era-e7:hsl(228 52% 43%); --era-e8:hsl(207 64% 35%); --era-e9:hsl(189 76% 27%); --era-e10:hsl(168 64% 26%);
}
.ei-e1{ --ei-c:var(--era-e1); } .ei-e2{ --ei-c:var(--era-e2); } .ei-e3{ --ei-c:var(--era-e3); } .ei-e4{ --ei-c:var(--era-e4); } .ei-e5{ --ei-c:var(--era-e5); }
.ei-e6{ --ei-c:var(--era-e6); } .ei-e7{ --ei-c:var(--era-e7); } .ei-e8{ --ei-c:var(--era-e8); } .ei-e9{ --ei-c:var(--era-e9); } .ei-e10{ --ei-c:var(--era-e10); }
.ei.ei-tint{ color:var(--ei-c, currentColor); }
.chip > .ei{ font-size:1.25em; margin-left:-2px; color:var(--ei-c, currentColor); }

/* 둥근 메달 배지 · 가는 안쪽 테두리를 한 번 더 둘러 주화처럼 */
.ei-badge{
  --eb:var(--ei-c, var(--accent));
  display:inline-grid; place-items:center; flex:none; vertical-align:middle;
  width:32px; height:32px; border-radius:50%;
  color:var(--eb);
  background:
    radial-gradient(90% 90% at 32% 22%, color-mix(in srgb, var(--eb) 22%, transparent), transparent 70%),
    color-mix(in srgb, var(--eb) 8%, var(--surface));
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--eb) 34%, transparent),
    inset 0 0 0 3px color-mix(in srgb, var(--eb) 5%, var(--surface)),
    inset 0 0 0 3.6px color-mix(in srgb, var(--eb) 16%, transparent),
    0 1px 2px -1px rgba(0,0,0,.25);
}
.ei-badge > .ei{ width:17px; height:17px; transition:transform .5s cubic-bezier(.2,.7,.2,1); }
.ei-badge.sm{ width:24px; height:24px; box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--eb) 34%, transparent); }
.ei-badge.sm > .ei{ width:14px; height:14px; }
.ei-badge.lg{ width:44px; height:44px; }
.ei-badge.lg > .ei{ width:23px; height:23px; }
.ei-badge:hover > .ei, a:hover .ei-badge > .ei, button:hover .ei-badge > .ei{ transform:translateY(-1px) scale(1.07); }
@media (prefers-reduced-motion: reduce){
  .ei-badge > .ei{ transition:none; }
  .ei-badge:hover > .ei, a:hover .ei-badge > .ei, button:hover .ei-badge > .ei{ transform:none; }
}

/* ───────── 밀레니엄 난제 설명 필름 · 무대는 늘 어둡고 자막과 조작부는 사이트 테마를 따른다 */
.mp-film{ max-width:860px; margin:0; }
.mf{ position:relative; border:1px solid var(--line); border-radius:16px; overflow:hidden; background:var(--surface); box-shadow:var(--shadow); container-type:inline-size; -webkit-tap-highlight-color:transparent; }
.mf:focus{ outline:none; }
.mf:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
.mf-stage{ position:relative; aspect-ratio:16/9; overflow:hidden; cursor:pointer; background:radial-gradient(120% 95% at 50% 36%, #132036 0%, #0d1523 44%, #05080e 100%); }
.mf.mf-43 .mf-stage{ aspect-ratio:4/3; }
.mf-cv{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.mf-vig{ position:absolute; inset:0; pointer-events:none; background:radial-gradient(ellipse 78% 74% at 50% 46%, rgba(2,4,8,0) 58%, rgba(2,4,8,.5) 100%); box-shadow:inset 0 1px 0 rgba(243,236,220,.07), inset 0 -60px 80px -60px rgba(2,4,8,.55); }
.mf-cap{ display:grid; gap:6px; padding:16px 20px 4px; border-top:1px solid var(--line-soft); }
.mf-head{ display:flex; align-items:baseline; gap:12px; min-width:0; }
.mf-num{ flex:none; font-family:var(--mono); font-size:12px; letter-spacing:.08em; color:var(--accent); font-variant-numeric:tabular-nums; }
.mf-tts,.mf-txts{ display:grid; min-width:0; }
.mf-tt,.mf-tx{ grid-area:1/1; opacity:0; visibility:hidden; transition:opacity .4s ease,visibility 0s linear .4s; }
.mf-tt.on,.mf-tx.on{ opacity:1; visibility:visible; transition:opacity .45s ease .12s,visibility 0s; }
.mf-tt{ font-family:var(--serif-ko); font-size:18px; font-weight:600; line-height:1.35; color:var(--ink); }
.mf-tx{ margin:0; font-size:14.5px; line-height:1.68; color:var(--ink-2); text-wrap:pretty; }
.mf-bar{ display:flex; align-items:center; gap:12px; padding:10px 14px 14px; }
.mf-btn{ flex:none; appearance:none; width:38px; height:38px; padding:0; border-radius:50%; border:1px solid var(--line); background:var(--surface-2); color:var(--ink-2); display:grid; place-items:center; cursor:pointer; transition:color .2s,border-color .2s,background-color .2s,filter .2s; }
.mf-btn svg{ width:18px; height:18px; fill:currentColor; display:block; }
.mf-btn span{ display:grid; place-items:center; }
.mf-btn:hover{ color:var(--accent); border-color:var(--accent); }
.mf-btn:focus-visible,.mf-ch:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.mf-play{ background:var(--accent); border-color:var(--accent); color:var(--accent-ink); }
.mf-play:hover{ color:var(--accent-ink); filter:brightness(1.08); }
.mf-i-pause,.mf.is-play .mf-i-play{ display:none !important; }
.mf.is-play .mf-i-pause{ display:grid !important; }
.mf-chs{ flex:1; min-width:0; display:flex; gap:6px; }
.mf-ch{ flex:1 1 0; min-width:0; appearance:none; background:none; border:0; border-radius:8px; padding:6px 3px 5px; display:grid; gap:7px; text-align:left; color:var(--ink-3); cursor:pointer; transition:color .2s; }
.mf-ch:hover,.mf-ch[aria-current]{ color:var(--ink); }
.mf-cl{ display:flex; align-items:baseline; gap:6px; min-width:0; font-size:12.5px; line-height:1.25; }
.mf-cn{ flex:none; font-family:var(--mono); font-size:11.5px; font-variant-numeric:tabular-nums; }
.mf-ch[aria-current] .mf-cn{ color:var(--accent); }
.mf-ct{ min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.mf-tr{ position:relative; display:block; height:3px; border-radius:2px; overflow:hidden; background:var(--line); }
.mf-fl{ position:absolute; inset:0; background:var(--accent); transform-origin:left center; transform:scaleX(0); will-change:transform; }
.mf-ch.done .mf-fl{ opacity:.5; }
.mf-ch:hover .mf-tr{ background:var(--ink-3); }
@container (max-width:560px){
  .mf-cap{ padding:14px 16px 2px; }
  .mf-tt{ font-size:16.5px; }
  .mf-tx{ font-size:14px; }
  .mf-bar{ gap:8px; padding:8px 10px 12px; }
  .mf-ct{ display:none; }
  .mf-cl{ justify-content:center; }
}
@media (pointer:coarse){
  .mf-btn{ width:44px; height:44px; }
  .mf-ch{ min-height:44px; align-content:center; }
}
@media (prefers-reduced-motion:reduce){
  .mf-tt,.mf-tx,.mf-tt.on,.mf-tx.on{ transition:none; }
}

/* ───────── 테오 · 캐릭터 그림과 움직임 */
.theo{ display:block; overflow:visible; flex:none; }
.theo.th-bust{ overflow:hidden; }
.theo .th-fig{ animation:th-bob 4.2s ease-in-out infinite; }
.theo .th-eyes{ transform-box:fill-box; transform-origin:center; animation:th-blink 5.8s linear infinite; }
.theo .th-wv{ transform-box:view-box; transform-origin:123px 131px; animation:th-wave 1.6s ease-in-out infinite; }
.theo .th-sp{ transform-box:fill-box; transform-origin:center; animation:th-tw 1.8s ease-in-out infinite; }
.theo .th-q{ animation:th-qb 2.6s ease-in-out infinite; }
.theo.th-cheer .th-fig{ animation:th-hop 1.5s cubic-bezier(.3,.7,.3,1) infinite; }
.theo .th-orb text{ transform-box:fill-box; transform-origin:center; animation:th-orb 11s ease-in-out infinite; }
.theo .th-orb text:nth-child(2){ animation-duration:13s; }
.theo .th-orb text:nth-child(3){ animation-duration:12s; animation-direction:reverse; }
.theo .th-orb text:nth-child(4){ animation-duration:14s; }
.theo .th-arc{ stroke-dasharray:100; animation:th-draw 3.4s ease-in-out infinite; }
.theo .th-bulb{ animation:th-glow 2.6s ease-in-out infinite; }
.theo.th-still,.theo.th-still *{ animation:none !important; }
@keyframes th-bob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-1.8px); } }
@keyframes th-hop{ 0%,55%,100%{ transform:translateY(0); } 25%{ transform:translateY(-5px); } }
@keyframes th-blink{ 0%,93%,100%{ transform:scaleY(1); } 95%,96.5%{ transform:scaleY(.1); } }
@keyframes th-wave{ 0%,100%{ transform:rotate(0deg); } 30%{ transform:rotate(7deg); } 70%{ transform:rotate(-5deg); } }
@keyframes th-tw{ 0%,100%{ transform:scale(1); opacity:1; } 50%{ transform:scale(.5); opacity:.5; } }
@keyframes th-qb{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-3px); } }
@keyframes th-orb{ 0%,100%{ transform:translate(0,0) rotate(0deg); opacity:.55; } 25%{ transform:translate(3px,-4px) rotate(8deg); opacity:1; } 50%{ transform:translate(0,-7px) rotate(0deg); opacity:.7; } 75%{ transform:translate(-3px,-3px) rotate(-8deg); opacity:.9; } }
@keyframes th-draw{ 0%{ stroke-dashoffset:100; } 70%,100%{ stroke-dashoffset:0; } }
@keyframes th-glow{ 0%,100%{ opacity:.82; } 50%{ opacity:1; } }
@media (prefers-reduced-motion: reduce){ .theo,.theo *{ animation:none !important; } }

/* ───────── 안내 카드 · 왼쪽 아래, 모바일 도크 위 */
.tg{ position:fixed; left:16px; bottom:calc(var(--dock, 0px) + 16px + env(safe-area-inset-bottom, 0px)); z-index:70; width:0; height:0; pointer-events:none; }
.tg > *{ pointer-events:auto; }
body.gate-lock .tg{ visibility:hidden; }
@media (max-width:1179px){ body.insp-open .tg{ visibility:hidden; } }
@media print{ .tg{ display:none; } }

.tg-card{ position:absolute; left:0; bottom:0; width:min(360px, calc(100vw - 32px)); max-height:min(72vh, 620px); display:flex; flex-direction:column;
  background:var(--raise); color:var(--ink); border:1px solid color-mix(in srgb, var(--accent) 32%, var(--line)); border-radius:18px;
  box-shadow:0 26px 60px -26px rgba(0,0,0,.6), 0 3px 12px -6px rgba(0,0,0,.28);
  opacity:0; transform:translateY(16px) scale(.985); transform-origin:0 100%; transition:opacity .26s ease, transform .42s cubic-bezier(.2,.8,.2,1); }
.tg.is-open .tg-card{ opacity:1; transform:none; }
.tg.is-closing .tg-card{ opacity:0; transform:translateY(10px) scale(.99); transition-duration:.2s, .24s; }
.tg-card:focus{ outline:none; }
.tg-card:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }

.tg-head{ position:relative; flex:none; min-height:64px; padding:13px 48px 12px 122px; border-bottom:1px solid color-mix(in srgb, var(--accent) 30%, var(--line-soft));
  background:linear-gradient(180deg, color-mix(in srgb, var(--accent) 7%, transparent), transparent); border-radius:18px 18px 0 0; }
.tg-fig{ position:absolute; left:-12px; bottom:0; width:132px; height:132px; pointer-events:none; }
.tg-fig .theo{ filter:drop-shadow(0 0 .6px color-mix(in srgb, var(--ink) 30%, transparent)); }
.tg.is-open .tg-fig{ animation:tg-peek .55s .06s cubic-bezier(.2,.9,.25,1.15) both; }
@keyframes tg-peek{ from{ transform:translateY(14px); opacity:0; } to{ transform:none; opacity:1; } }
.tg-k{ display:flex; align-items:center; gap:8px; font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); }
.tg-n{ letter-spacing:.06em; color:var(--ink-3); font-variant-numeric:tabular-nums; }
.tg-t{ margin-top:3px; font-family:var(--serif-ko); font-size:17px; line-height:1.35; font-weight:600; color:var(--ink); }
.tg-x{ position:absolute; top:9px; right:9px; width:32px; height:32px; display:grid; place-items:center; border:1px solid transparent; border-radius:50%; background:none; color:var(--ink-3); cursor:pointer; transition:background .2s, color .2s, border-color .2s; }
.tg-x:hover{ color:var(--ink); background:var(--accent-soft); border-color:color-mix(in srgb, var(--accent) 30%, transparent); }

.tg-body{ flex:1 1 auto; min-height:0; overflow-y:auto; padding:14px 16px 14px; scrollbar-width:thin; }
.tg-tip{ font-size:14.5px; line-height:1.7; color:var(--ink); text-wrap:pretty; }
.tg-q{ margin-top:13px; padding:12px 14px 12px; border-radius:13px; background:var(--accent-soft); border:1px solid color-mix(in srgb, var(--accent) 24%, transparent); }
.tg-ql{ display:flex; align-items:center; gap:7px; font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); }
.tg-ql::before{ content:''; width:14px; height:1px; background:currentColor; opacity:.7; }
.tg-qt{ margin-top:6px; font-family:var(--serif-ko); font-size:15px; line-height:1.6; font-weight:500; color:var(--ink); text-wrap:pretty; }
.tg-think{ appearance:none; margin-top:10px; display:inline-flex; align-items:center; gap:6px; padding:6px 13px 6px 10px; border-radius:999px; cursor:pointer;
  border:1px solid color-mix(in srgb, var(--accent) 55%, transparent); background:var(--surface); color:var(--accent); font-size:13px; font-weight:600; transition:background .2s, border-color .2s; }
.tg-think:hover{ border-color:var(--accent); background:color-mix(in srgb, var(--accent) 10%, var(--surface)); }
.tg-think[aria-expanded='true']{ background:var(--accent); color:var(--accent-ink); border-color:var(--accent); }
.tg-ans{ margin-top:11px; padding-top:10px; border-top:1px dashed color-mix(in srgb, var(--accent) 40%, transparent); font-size:13.5px; line-height:1.7; color:var(--ink-2); text-wrap:pretty; }
.tg-ans.pop{ animation:tg-ans .38s ease both; }
@keyframes tg-ans{ from{ opacity:0; transform:translateY(-4px); } to{ opacity:1; transform:none; } }

.tg-act{ flex:none; display:flex; align-items:center; flex-wrap:wrap; gap:8px; padding:10px 16px 12px; border-top:1px solid var(--line-soft); border-radius:0 0 18px 18px; }
.tg-act .btn.sm{ gap:5px; }
.tg-next svg{ margin-right:-3px; }
.tg-off{ margin-left:auto; display:inline-flex; align-items:center; gap:6px; font-size:12px; color:var(--ink-3); cursor:pointer; user-select:none; }
.tg-off input{ width:14px; height:14px; margin:0; accent-color:var(--accent); cursor:pointer; }
.tg-off:hover{ color:var(--ink-2); }
html[lang='ko'] .tg-k,html[lang='ko'] .tg-ql{ letter-spacing:.05em; }
.tg-sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* 접힌 얼굴 단추 */
.tg-mini{ position:absolute; left:0; bottom:0; width:56px; height:56px; padding:0; border:0; border-radius:50%; background:none; cursor:pointer;
  box-shadow:0 12px 28px -12px rgba(0,0,0,.7), 0 0 0 1px color-mix(in srgb, var(--accent) 40%, transparent); transition:transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s; }
.tg-mini .theo{ width:56px; height:56px; }
.tg-mini:hover{ transform:translateY(-2px); box-shadow:0 16px 30px -12px rgba(0,0,0,.7), 0 0 0 1px var(--accent), 0 0 0 5px var(--accent-soft); }
.tg-mini:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:50%; }
.tg.mini-in .tg-mini:not([hidden]){ animation:tg-pop .42s cubic-bezier(.2,.9,.3,1.3) both; }
@keyframes tg-pop{ from{ transform:scale(.6); opacity:0; } to{ transform:none; opacity:1; } }

/* 말풍선 */
.tg-say{ position:absolute; left:-6px; bottom:-4px; display:flex; align-items:flex-end; gap:2px; pointer-events:none; }
.tg-say-fig{ position:relative; width:114px; height:168px; flex:none; margin-right:-10px; }
.tg-say-fig::before{ content:''; position:absolute; left:4%; right:4%; top:8%; bottom:2%; border-radius:50%; background:radial-gradient(closest-side, color-mix(in srgb, var(--bg) 88%, transparent), transparent); z-index:-1; }
.tg-say-fig .theo{ filter:drop-shadow(0 0 .6px color-mix(in srgb, var(--ink) 30%, transparent)); }
.tg-bub{ position:relative; pointer-events:auto; margin-bottom:96px; width:max-content; max-width:min(300px, calc(100vw - 120px)); padding:10px 14px; border-radius:16px;
  background:var(--raise); color:var(--ink); border:1px solid color-mix(in srgb, var(--accent) 45%, var(--line)); font-size:14px; line-height:1.55; font-weight:500;
  box-shadow:0 18px 40px -20px rgba(0,0,0,.6); }
.tg-bub::before{ content:''; position:absolute; left:-7px; bottom:14px; width:12px; height:12px; background:var(--raise); border-left:1px solid color-mix(in srgb, var(--accent) 45%, var(--line)); border-bottom:1px solid color-mix(in srgb, var(--accent) 45%, var(--line)); transform:rotate(45deg); }
.tg-say{ opacity:0; transform:translateY(10px); transition:opacity .22s ease, transform .34s cubic-bezier(.2,.9,.3,1.2); }
.tg-say.on{ opacity:1; transform:none; }

/* 본문 안의 작은 가로 카드 · 빈 결과 같은 자리 */
.tg-inline{ display:flex; align-items:center; gap:12px; width:fit-content; max-width:min(560px, 100%); margin:18px 0; padding:10px 20px 10px 6px; overflow:hidden; border-radius:16px;
  background:linear-gradient(90deg, var(--accent-soft), transparent 70%), var(--surface); border:1px solid color-mix(in srgb, var(--accent) 26%, var(--line)); color:var(--ink-2); font-size:14px; line-height:1.6; }
.tg-inline.no-fig{ padding-left:18px; }
.tg-in-fig{ flex:none; align-self:flex-end; width:84px; height:84px; margin:-6px 0 -10px; }
.tg-in-fig .theo{ filter:drop-shadow(0 0 .6px color-mix(in srgb, var(--ink) 30%, transparent)); }
.tg-in-t{ min-width:0; }
.tg-in-t b,.tg-in-t strong{ display:block; color:var(--ink); font-family:var(--serif-ko); font-size:15.5px; font-weight:600; margin-bottom:2px; }

/* 휴대폰 · 거의 화면 너비, 높이는 화면의 46% 이하 */
@media (max-width:560px){
  .tg{ left:12px; right:12px; width:auto; }
  .tg-card{ width:auto; right:0; max-height:46vh; }
  .tg-head{ min-height:58px; padding:11px 44px 10px 104px; }
  .tg-fig{ left:-10px; width:114px; height:114px; }
  .tg-fig .theo{ width:114px; height:114px; }
  .tg-say-fig,.tg-say-fig .theo{ width:95px; height:140px; }
  .tg-bub{ margin-bottom:80px; }
  .tg-t{ font-size:16px; }
  .tg-body{ padding:12px 14px 12px; }
  .tg-act{ padding:9px 14px 10px; }
  .tg-tip{ font-size:14px; line-height:1.65; }
  .tg-q{ margin-top:11px; padding:11px 12px; }
  .tg-qt{ font-size:14.5px; }
  .tg-mini,.tg-mini .theo{ width:52px; height:52px; }
  .tg-inline{ padding-right:14px; }
  .tg-in-fig{ width:72px; height:72px; }
  .tg-in-fig .theo{ width:72px; height:72px; }
}
@media (pointer:coarse){
  .tg-x{ width:40px; height:40px; top:6px; right:6px; }
  .tg-act .btn.sm,.tg-think{ min-height:40px; }
  .tg-off{ min-height:40px; }
  .tg-off input{ width:18px; height:18px; }
}
@media (prefers-reduced-motion: reduce){
  .tg-card,.tg-say,.tg-mini{ transition:none; }
  .tg.is-open .tg-fig,.tg.mini-in .tg-mini:not([hidden]),.tg-ans.pop{ animation:none; }
  .tg-card{ transform:none; }
}

/* 페이지 인사 말풍선 */
.tg-bub .tg-tz-t{ display:block; font-family:var(--serif-ko); font-size:14px; margin-bottom:2px; }
.tg-bub .tg-tz{ display:block; font-size:13px; line-height:1.55; color:var(--ink-2); }
.tg-bub .tg-more{ appearance:none; margin-top:8px; padding:6px 12px; border-radius:999px; border:1px solid color-mix(in srgb, var(--accent) 55%, var(--line)); background:var(--accent-soft); color:var(--ink); font:inherit; font-size:12.5px; cursor:pointer; }
.tg-bub .tg-more:hover{ border-color:var(--accent); }
@media (pointer:coarse){ .tg-bub .tg-more{ min-height:40px; } }

/* ───────── 오늘의 수학사 · 왼쪽 가장자리의 탭과 테오의 「그거 아세요?」 창 */
.td-tab{ position:fixed; left:0; top:50%; transform:translateY(-50%); z-index:57; display:flex; flex-direction:column; align-items:center; gap:8px; width:34px; padding:7px 0 12px; margin:0;
  border:1px solid color-mix(in srgb, var(--accent) 45%, var(--line)); border-left:0; border-radius:0 12px 12px 0; background:var(--raise); color:var(--ink-2); font:inherit;
  box-shadow:0 12px 28px -16px rgba(0,0,0,.6); cursor:pointer; transition:width .22s ease, color .2s, background .2s; }
.td-tab:hover{ width:38px; color:var(--ink); background:color-mix(in srgb, var(--accent) 7%, var(--raise)); }
.td-tab:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.td-tab[aria-expanded='true']{ color:var(--accent); }
.td-tab-d{ display:grid; place-items:center; align-content:center; width:26px; height:30px; border-radius:6px; background:var(--accent); color:var(--accent-ink); line-height:1; box-shadow:inset 0 -2px 0 rgba(0,0,0,.12); }
.td-tab-d small{ font-family:var(--mono); font-size:7.5px; font-weight:600; letter-spacing:.04em; opacity:.85; }
.td-tab-d b{ font-family:var(--display); font-size:13px; font-weight:600; margin-top:1px; }
.td-tab-t{ writing-mode:vertical-rl; font-family:var(--serif-ko); font-size:12.5px; font-weight:600; letter-spacing:.1em; white-space:nowrap; }
html[lang='en'] .td-tab-t{ letter-spacing:.03em; font-family:var(--sans); font-size:12px; }
.td-tab.new::after{ content:''; position:absolute; top:4px; right:4px; width:7px; height:7px; border-radius:50%; background:var(--down); box-shadow:0 0 0 2px var(--raise); }
body.gate-lock .td-tab,body.gate-lock .td-pop,body.sheet-open .td-tab,body.menu-open .td-tab{ visibility:hidden; }
@media (max-width:1179px){ body.insp-open .td-tab,body.insp-open .td-pop{ visibility:hidden; } }
@media print{ .td{ display:none; } }

.td-pop{ position:fixed; left:16px; bottom:calc(var(--dock, 0px) + 16px + env(safe-area-inset-bottom, 0px)); z-index:71; width:min(360px, calc(100vw - 32px)); max-height:min(72vh, 560px); display:flex; flex-direction:column;
  background:var(--raise); color:var(--ink); border:1px solid color-mix(in srgb, var(--accent) 38%, var(--line)); border-radius:18px;
  box-shadow:0 26px 60px -26px rgba(0,0,0,.6), 0 3px 12px -6px rgba(0,0,0,.28);
  opacity:0; transform:translateY(16px) scale(.985); transform-origin:0 100%; transition:opacity .26s ease, transform .42s cubic-bezier(.2,.8,.2,1); }
.td.is-open .td-pop{ opacity:1; transform:none; }
.td.is-closing .td-pop{ opacity:0; transform:translateY(10px) scale(.99); transition-duration:.2s, .24s; }
.td-pop:focus{ outline:none; }
.td-pop:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
.td-head{ position:relative; flex:none; min-height:64px; padding:13px 48px 12px 18px; border-bottom:1px solid color-mix(in srgb, var(--accent) 30%, var(--line-soft)); border-radius:18px 18px 0 0;
  background:linear-gradient(180deg, color-mix(in srgb, var(--accent) 10%, transparent), transparent); }
.td-head.has-fig{ padding-left:122px; }
.td-fig{ position:absolute; left:-12px; bottom:0; width:132px; height:132px; pointer-events:none; }
.td-fig .theo{ filter:drop-shadow(0 0 .6px color-mix(in srgb, var(--ink) 30%, transparent)); }
.td.is-open .td-fig{ animation:tg-peek .55s .06s cubic-bezier(.2,.9,.25,1.15) both; }
.td-k{ font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); }
html[lang='ko'] .td-k{ letter-spacing:.05em; }
.td-h{ margin-top:3px; font-family:var(--serif-ko); font-size:19px; line-height:1.3; font-weight:700; color:var(--ink); }
.td-x{ position:absolute; top:9px; right:9px; width:32px; height:32px; display:grid; place-items:center; border:1px solid transparent; border-radius:50%; background:none; color:var(--ink-3); cursor:pointer; transition:background .2s, color .2s; }
.td-x:hover{ color:var(--ink); background:var(--accent-soft); }
.td-body{ flex:1 1 auto; min-height:0; overflow-y:auto; padding:13px 18px 14px; scrollbar-width:thin; }
.td-ctx{ display:flex; align-items:center; flex-wrap:wrap; gap:6px 8px; font-size:12.5px; color:var(--ink-2); font-variant-numeric:tabular-nums; }
.td-kind{ display:inline-flex; align-items:center; padding:2px 9px; border-radius:999px; font-size:11.5px; font-weight:600; color:var(--accent); background:var(--accent-soft); border:1px solid color-mix(in srgb, var(--accent) 30%, transparent); }
.td-kind.k-died{ color:var(--ink-2); background:color-mix(in srgb, var(--ink) 7%, transparent); border-color:var(--line); }
.td-kind.k-proof{ color:var(--f-top); background:color-mix(in srgb, var(--f-top) 12%, transparent); border-color:color-mix(in srgb, var(--f-top) 35%, transparent); }
.td-kind.k-event,.td-kind.k-pub{ color:var(--up); background:var(--up-soft); border-color:color-mix(in srgb, var(--up) 35%, transparent); }
.td-kind.k-fact{ color:var(--f-edu); background:color-mix(in srgb, var(--f-edu) 12%, transparent); border-color:color-mix(in srgb, var(--f-edu) 35%, transparent); }
.td-t{ margin-top:9px; font-size:15px; line-height:1.7; color:var(--ink); text-wrap:pretty; }
.td-act{ flex:none; display:flex; align-items:center; flex-wrap:wrap; gap:8px; padding:10px 16px 12px; border-top:1px solid var(--line-soft); border-radius:0 0 18px 18px; }
.td-act .btn.sm{ gap:6px; }
.td-n{ font-family:var(--mono); font-size:11px; color:var(--ink-3); font-variant-numeric:tabular-nums; }
.td-sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
@media (max-width:560px){
  .td-tab{ width:28px; gap:6px; padding:6px 0 10px; }
  .td-tab:hover{ width:30px; }
  .td-tab-d{ width:22px; height:26px; }
  .td-tab-d b{ font-size:12px; }
  .td-tab-t{ font-size:11.5px; }
  .td-pop{ left:12px; right:12px; width:auto; max-height:52vh; }
  .td-head{ min-height:58px; padding:11px 44px 10px 16px; }
  .td-head.has-fig{ padding-left:104px; }
  .td-fig{ left:-10px; width:114px; height:114px; }
  .td-fig .theo{ width:114px; height:114px; }
  .td-h{ font-size:17.5px; }
  .td-body{ padding:11px 14px 12px; }
  .td-t{ font-size:14.5px; }
  .td-act{ padding:9px 14px 10px; gap:6px; }
}
@media (max-width:400px){ .td-n{ display:none; } }
@media (pointer:coarse){
  .td-x{ width:40px; height:40px; top:6px; right:6px; }
  .td-act .btn.sm{ min-height:40px; }
  .td-tab{ min-height:96px; }
}
@media (prefers-reduced-motion: reduce){
  .td-pop,.td-tab{ transition:none; }
  .td-pop{ transform:none; }
  .td.is-open .td-fig{ animation:none; }
}

/* ───────── 필즈상 통계 (#fs-box · renderFieldsStats) */
/* 분야 색 · 데이터 시각화 기준표의 8색을 사이트 분야 색과 같은 계열로 짝지었고, 논리·조합은 중립 회색 (어두운/밝은 테마 각각 검증) */
.fs,.fs-tip{
  --fs-ana:#3987e5; --fs-pde:#d95926; --fs-top:#199e70; --fs-ag:#c98500; --fs-prob:#d55181;
  --fs-dyn:#008300; --fs-nt:#9085e9; --fs-algmp:#e66767; --fs-logc:#7d8694;
  --fs-on-ana:#0a0e14; --fs-on-pde:#0a0e14; --fs-on-top:#0a0e14; --fs-on-ag:#0a0e14; --fs-on-prob:#0a0e14;
  --fs-on-dyn:#ffffff; --fs-on-nt:#0a0e14; --fs-on-algmp:#0a0e14; --fs-on-logc:#0a0e14;
  --fs-mark:var(--accent); --fs-grid:var(--line-soft); --fs-base:var(--line); --fs-zone:rgba(129,138,152,.09);
}
@media (prefers-color-scheme: light){
  :root:not([data-theme='dark']):not([data-mtheme='dark']) .fs,
  :root:not([data-theme='dark']):not([data-mtheme='dark']) .fs-tip{
    --fs-ana:#2a78d6; --fs-pde:#eb6834; --fs-top:#1baf7a; --fs-ag:#eda100; --fs-prob:#e87ba4;
    --fs-dyn:#008300; --fs-nt:#4a3aa7; --fs-algmp:#e34948; --fs-logc:#5a6475;
    --fs-on-ana:#ffffff; --fs-on-pde:#121923; --fs-on-top:#121923; --fs-on-ag:#121923; --fs-on-prob:#121923;
    --fs-on-dyn:#ffffff; --fs-on-nt:#ffffff; --fs-on-algmp:#121923; --fs-on-logc:#ffffff; --fs-zone:rgba(106,116,130,.08); --fs-mark:#a67c24;
  }
}
:root[data-theme='light']:not([data-mtheme='dark']) .fs,:root[data-mtheme='light'] .fs,
:root[data-theme='light']:not([data-mtheme='dark']) .fs-tip,:root[data-mtheme='light'] .fs-tip{
  --fs-ana:#2a78d6; --fs-pde:#eb6834; --fs-top:#1baf7a; --fs-ag:#eda100; --fs-prob:#e87ba4;
  --fs-dyn:#008300; --fs-nt:#4a3aa7; --fs-algmp:#e34948; --fs-logc:#5a6475;
  --fs-on-ana:#ffffff; --fs-on-pde:#121923; --fs-on-top:#121923; --fs-on-ag:#121923; --fs-on-prob:#121923;
  --fs-on-dyn:#ffffff; --fs-on-nt:#ffffff; --fs-on-algmp:#121923; --fs-on-logc:#ffffff; --fs-zone:rgba(106,116,130,.08); --fs-mark:#a67c24;
}
.fs-f-ana{ --fs-c:var(--fs-ana); --fs-on:var(--fs-on-ana); } .fs-f-pde{ --fs-c:var(--fs-pde); --fs-on:var(--fs-on-pde); }
.fs-f-top{ --fs-c:var(--fs-top); --fs-on:var(--fs-on-top); } .fs-f-ag{ --fs-c:var(--fs-ag); --fs-on:var(--fs-on-ag); }
.fs-f-prob{ --fs-c:var(--fs-prob); --fs-on:var(--fs-on-prob); } .fs-f-dyn{ --fs-c:var(--fs-dyn); --fs-on:var(--fs-on-dyn); }
.fs-f-nt{ --fs-c:var(--fs-nt); --fs-on:var(--fs-on-nt); } .fs-f-algmp{ --fs-c:var(--fs-algmp); --fs-on:var(--fs-on-algmp); }
.fs-f-logc{ --fs-c:var(--fs-logc); --fs-on:var(--fs-on-logc); }

/* 틀 */
.fs{ container:fs / inline-size; display:grid; gap:20px; margin:48px 0 8px; min-width:0; }
.fs *{ box-sizing:border-box; }
.fs-sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.fs-hd{ display:grid; gap:6px; max-width:780px; }
.fs-hd .eyebrow{ margin:0; }
.fs-hd h2{ font-family:var(--serif-ko); font-size:clamp(22px,2.4vw,28px); line-height:1.3; margin:0; font-weight:600; letter-spacing:-.005em; text-wrap:balance; }
.fs-hd p:last-child{ color:var(--ink-2); font-size:15px; margin:0; max-width:68ch; }

/* 핵심 숫자 */
.fs-kpis{ display:grid; gap:10px; grid-template-columns:repeat(2,minmax(0,1fr)); }
.fs-kpi{ display:grid; align-content:start; gap:2px; padding:14px 16px 13px; background:var(--surface); border:1px solid var(--line); border-radius:14px; min-width:0; }
.fs-kpi:first-child{ grid-column:1 / -1; }
.fs-kv{ font-family:var(--sans); font-size:30px; font-weight:600; line-height:1.1; color:var(--ink); letter-spacing:-.01em; }
.fs-kv small{ font-size:15px; font-weight:500; color:var(--ink-2); margin-left:2px; }
.fs-kl{ font-size:13px; color:var(--ink-2); margin-top:4px; }
.fs-ks{ font-size:12px; color:var(--ink-3); line-height:1.45; }
@container fs (min-width: 760px){
  .fs-kpis{ grid-template-columns:repeat(5,minmax(0,1fr)); }
  .fs-kpi:first-child{ grid-column:auto; }
}

/* 카드 배치 */
.fs-grid{ display:grid; gap:16px; grid-template-columns:minmax(0,1fr); }
@container fs (min-width: 960px){
  .fs-grid{ grid-template-columns:repeat(12,minmax(0,1fr)); align-items:start; }
  .fs-ctry{ grid-column:1 / span 6; } .fs-fld{ grid-column:7 / span 6; }
  .fs-tl{ grid-column:1 / -1; }
  .fs-age{ grid-column:1 / span 7; } .fs-notes{ grid-column:8 / span 5; }
}
.fs-card{ container:fsc / inline-size; min-width:0; display:flex; flex-direction:column; gap:16px; padding:22px 24px 22px; }
.fs-ch{ display:flex; flex-wrap:wrap; gap:12px 16px; align-items:flex-start; justify-content:space-between; }
.fs-ct{ min-width:0; flex:1 1 220px; }
.fs-kick{ font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); margin:0 0 5px; }
.fs-ch h3{ font-family:var(--serif-ko); font-size:19px; line-height:1.35; margin:0; font-weight:600; }
.fs-sub{ font-size:13px; color:var(--ink-3); margin:3px 0 0; }
.fs-ctl{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.fs-tbtn{ font-size:12.5px; }
.fs-seg2 .fs-s{ display:none; }
.fs-card[data-view='table'] .fs-body{ display:none; }
.fs-card[data-view='chart'] .fs-tview{ display:none; }
.fs-insight{ margin:0; font-size:13.5px; line-height:1.6; color:var(--ink-2); border-left:2px solid var(--accent); padding:1px 0 1px 12px; }
.fs-note{ margin:-4px 0 0; font-size:12.5px; line-height:1.55; color:var(--ink-3); }
@container fs (max-width: 520px){
  .fs-card{ padding:18px 16px 18px; }
}
@container fsc (max-width: 520px){
  .fs-ctl{ width:100%; }
  .fs-seg2{ display:flex; width:100%; }
  .fs-seg2 button{ flex:1 1 auto; padding:7px 10px; line-height:1.3; text-wrap:balance; }
}
@container fsc (max-width: 400px){
  .fs-en .fs-seg2 .fs-l{ display:none; }
  .fs-en .fs-seg2 .fs-s{ display:inline; }
}

/* 가로 막대 */
.fs-bars{ display:grid; gap:1px; }
.fs-row{ display:grid; grid-template-columns:var(--fs-lw,7.8rem) minmax(0,1fr); align-items:center; gap:12px; min-height:26px; padding:1px 6px; margin:0 -6px; border-radius:6px; outline-offset:-1px; }
.fs-fbars .fs-row{ --fs-lw:10rem; min-height:28px; }
.fs-en .fs-fbars .fs-row{ --fs-lw:13rem; }
.fs-row:hover,.fs-row.fs-hot{ background:color-mix(in srgb, var(--ink) 5%, transparent); }
.fs-row:hover .fs-bar,.fs-row.fs-hot .fs-bar{ filter:brightness(1.12); }
.fs-rl{ display:flex; align-items:center; gap:8px; min-width:0; font-size:13px; line-height:1.25; color:var(--ink-2); }
.fs-rl > span{ min-width:0; }
.fs-track{ display:flex; align-items:center; gap:8px; min-width:0; font-size:12.5px; }
.fs-bar{ flex:none; height:12px; width:calc((100% - 3.6em) * var(--w)); min-width:3px; background:var(--fs-c,var(--fs-mark)); border-radius:0 4px 4px 0; transform-origin:left center; }
.fs-val{ color:var(--ink); white-space:nowrap; font-variant-numeric:tabular-nums; }
.fs-sw{ display:inline-block; flex:none; width:10px; height:10px; border-radius:3px; background:var(--fs-c); }
.fs-ico{ display:inline-flex; flex:none; width:16px; height:16px; color:var(--fs-c); }
.fs-ico svg{ width:100%; height:100%; display:block; }
@container fsc (max-width: 420px){
  .fs-row{ --fs-lw:6.6rem; gap:10px; }
  .fs-fbars .fs-row{ --fs-lw:8rem; }
  .fs-en .fs-fbars .fs-row{ grid-template-columns:minmax(0,1fr); gap:3px; padding-top:4px; padding-bottom:5px; }
}

/* 시대별 누적 막대 */
.fs-per-h{ display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 10px; margin-top:8px; padding-top:14px; border-top:1px solid var(--fs-grid); }
.fs-per-h h4{ margin:0; font-size:14px; font-weight:600; color:var(--ink); font-family:var(--sans); }
.fs-per-h span{ font-size:12.5px; color:var(--ink-3); }
.fs-stacks{ display:grid; gap:10px; margin-top:12px; }
.fs-prow{ display:grid; grid-template-columns:7.2rem minmax(0,1fr); gap:12px; align-items:center; }
.fs-pl{ display:flex; flex-direction:column; line-height:1.3; }
.fs-pl b{ font-family:var(--mono); font-size:12px; font-weight:500; color:var(--ink); font-variant-numeric:tabular-nums; }
.fs-pl small{ font-size:11.5px; color:var(--ink-3); }
.fs-stack{ display:flex; gap:2px; height:22px; min-width:0; }
.fs-seg{ flex:1 1 0; min-width:0; display:flex; align-items:center; justify-content:center; background:var(--fs-c); color:var(--fs-on); font-size:11.5px; outline-offset:1px; transform-origin:left center; transition:filter .15s; }
.fs-seg b{ font-weight:600; font-variant-numeric:tabular-nums; }
.fs-seg:last-child{ border-radius:0 4px 4px 0; }
.fs-seg:hover,.fs-seg.fs-hot{ filter:brightness(1.15) saturate(1.05); }
.fs-legend{ list-style:none; margin:14px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:6px 14px; font-size:12.5px; color:var(--ink-2); }
.fs-legend li{ display:inline-flex; align-items:center; gap:6px; }
@container fsc (max-width: 420px){
  .fs-prow{ grid-template-columns:minmax(0,1fr); gap:5px; }
  .fs-pl{ flex-direction:row; gap:8px; align-items:baseline; }
}

/* 대회별 점 그림 */
.fs-chips{ display:flex; flex-wrap:wrap; gap:6px; }
.fs-chip{ --c:var(--fs-c,var(--accent)); gap:7px; }
.fs-chip small{ font-family:var(--mono); font-size:11px; color:var(--ink-3); }
.fs-chip[aria-pressed='true'] small{ color:var(--ink-2); }
.fs-tlw{ margin-top:14px; }
.fs-tlp{ display:grid; grid-template-columns:var(--cols,repeat(3,minmax(0,1fr))); }
.fs-per{ min-width:0; }
.fs-per + .fs-per{ border-left:1px solid var(--fs-grid); }
.fs-ph{ margin:0; padding:0 10px 8px; font-size:12px; color:var(--ink-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.fs-ph b{ font-family:var(--mono); font-weight:500; color:var(--ink-2); }
.fs-cols{ display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); }
.fs-yr{ display:flex; flex-direction:column; align-items:center; min-width:0; }
.fs-dots{ display:flex; flex-direction:column-reverse; align-items:center; justify-content:flex-start; width:100%; height:152px; padding-bottom:6px; }
.fs-yl{ width:100%; border-top:1px solid var(--fs-base); padding-top:7px; text-align:center; font-family:var(--mono); font-size:11px; color:var(--ink-3); font-variant-numeric:tabular-nums; white-space:nowrap; }
.fs-gap .fs-dots{ justify-content:center; }
.fs-gap .fs-dots span{ writing-mode:vertical-rl; font-size:11px; color:var(--ink-3); letter-spacing:.04em; line-height:1.2; max-height:140px; }
.fs-gap .fs-yl{ font-size:10px; }
.fs-dot{ appearance:none; flex:none; display:flex; align-items:center; justify-content:center; width:100%; max-width:40px; height:29px; padding:0; margin:0; border:0; background:none; border-radius:8px; cursor:default; color:inherit; font:inherit; }
.fs-dot[data-person]{ cursor:pointer; }
.fs-dot i{ display:block; width:14px; height:14px; border-radius:50%; background:var(--fs-c); box-shadow:0 0 0 2px var(--surface); transition:transform .16s ease, opacity .2s ease; }
.fs-dot.fs-hollow i{ background:var(--surface); box-shadow:inset 0 0 0 2.5px var(--fs-c), 0 0 0 2px var(--surface); }
.fs-dot.fs-special i{ width:10px; height:10px; border-radius:1.5px; background:transparent; box-shadow:inset 0 0 0 1.5px var(--ink-3); transform:rotate(45deg); }
.fs-dot:hover i,.fs-dot.fs-hot i{ transform:scale(1.3); }
.fs-dot.fs-special:hover i,.fs-dot.fs-special.fs-hot i{ transform:rotate(45deg) scale(1.3); }
.fs-dot:focus-visible{ outline:none; }
.fs-dot:focus-visible i{ box-shadow:0 0 0 2px var(--surface), 0 0 0 4px var(--accent); }
.fs-dot.fs-hollow:focus-visible i{ box-shadow:inset 0 0 0 2.5px var(--fs-c), 0 0 0 2px var(--surface), 0 0 0 4px var(--accent); }
.fs-dot.fs-special:focus-visible i{ box-shadow:inset 0 0 0 1.5px var(--ink-3), 0 0 0 2px var(--surface), 0 0 0 4px var(--accent); }
.fs-dot.fs-dim i{ opacity:.16; }
.fs-foot{ list-style:none; margin:14px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:6px 20px; font-size:12.5px; color:var(--ink-3); }
.fs-foot li{ display:inline-flex; align-items:center; gap:8px; }
.fs-mk{ flex:none; display:inline-block; width:10px; height:10px; border-radius:50%; }
.fs-mk-dot{ background:var(--ink-3); }
.fs-mk-hollow{ box-shadow:inset 0 0 0 2px var(--ink-3); }
.fs-mk-dia{ width:8px; height:8px; border-radius:1px; box-shadow:inset 0 0 0 1.5px var(--ink-3); transform:rotate(45deg); margin:0 1px; }
@container fsc (max-width: 720px){
  .fs-tlp{ grid-template-columns:minmax(0,1fr); }
  .fs-per + .fs-per{ border-left:0; border-top:1px solid var(--fs-grid); margin-top:8px; padding-top:12px; }
  .fs-ph{ padding:0 0 4px; }
  .fs-cols{ grid-auto-flow:row; grid-auto-columns:auto; }
  .fs-yr{ flex-direction:row; align-items:stretch; }
  .fs-yl{ order:-1; flex:none; width:3.6rem; border-top:0; border-right:1px solid var(--fs-base); padding:0 8px 0 0; display:flex; align-items:center; font-size:11.5px; }
  .fs-dots{ flex-direction:row; flex-wrap:wrap; height:auto; padding:0 0 0 6px; justify-content:flex-start; }
  .fs-dot{ width:36px; max-width:none; height:32px; }
  .fs-gap .fs-dots{ justify-content:flex-start; }
  .fs-gap .fs-dots span{ writing-mode:horizontal-tb; padding:6px 4px; max-height:none; }
  .fs-gap .fs-yl{ font-size:11px; }
}

/* 수상 나이 */
.fs-hw{ display:grid; }
.fs-hann,.fs-hplot,.fs-hax{ display:grid; grid-template-columns:repeat(var(--n,8),minmax(0,1fr)); }
.fs-hann{ font-size:12px; color:var(--ink-2); line-height:1.35; }
.fs-a1,.fs-a2{ grid-row:1; padding-top:2px; padding-bottom:6px; min-width:0; }
.fs-a1{ justify-self:start; margin-left:12.5%; padding-left:7px; border-left:1px solid var(--ink-3); }
.fs-a2{ justify-self:end; margin-right:12.5%; padding-right:7px; border-right:1px solid var(--ink-3); text-align:right; }
.fs-hplot{ height:170px; align-items:end; border-bottom:1px solid var(--fs-base); }
.fs-bin{ height:100%; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; min-width:0; border-radius:8px 8px 0 0; outline-offset:-2px; }
.fs-bin:hover,.fs-bin.fs-hot{ background:color-mix(in srgb, var(--ink) 5%, transparent); }
.fs-bin:hover .fs-col,.fs-bin.fs-hot .fs-col{ filter:brightness(1.12); }
.fs-ld{ flex:1 1 auto; width:1px; background:var(--ink-3); margin-bottom:4px; opacity:.8; }
.fs-cap{ font-size:12.5px; font-weight:600; color:var(--ink); margin-bottom:4px; font-variant-numeric:tabular-nums; }
.fs-col{ display:block; width:min(24px,62%); background:var(--fs-mark); border-radius:4px 4px 0 0; transform-origin:bottom center; }
.fs-zone{ height:100%; position:relative; display:flex; flex-direction:column; align-items:center; justify-content:space-between; padding:10px 2px 4px; background:var(--fs-zone); border-left:1px solid var(--accent); }
.fs-zone span{ font-size:11px; line-height:1.35; color:var(--ink-3); text-align:center; word-break:keep-all; }
.fs-zone .fs-zs{ display:none; }
.fs-zone .fs-dot{ height:28px; }
.fs-hax span{ padding-top:7px; text-align:center; font-family:var(--mono); font-size:11px; color:var(--ink-3); white-space:nowrap; font-variant-numeric:tabular-nums; }
@container fsc (max-width: 520px){
  .fs-a1{ grid-row:1 / span 2; white-space:nowrap; }
  .fs-a2{ grid-row:2; white-space:nowrap; }
  .fs-zone .fs-zl{ display:none; }
  .fs-zone .fs-zs{ display:block; font-size:10.5px; }
  .fs-hax span{ font-size:10px; letter-spacing:-.02em; }
}

/* 주석 */
.fs-nl{ list-style:none; margin:0; padding:0; display:grid; gap:12px; }
.fs-nl li{ display:grid; gap:2px; font-size:13px; line-height:1.6; color:var(--ink-2); padding-left:12px; border-left:1px solid var(--fs-grid); }
.fs-nl b{ font-size:12px; font-weight:600; color:var(--ink); letter-spacing:.01em; }

/* 표 보기 */
.fs-tview{ overflow:auto; max-height:520px; border:1px solid var(--line-soft); border-radius:12px; overscroll-behavior:contain; }
.fs-table{ width:100%; border-collapse:collapse; font-size:13px; }
.fs-table th{ position:sticky; top:0; z-index:1; background:var(--surface-2); text-align:left; font-weight:600; font-size:12px; color:var(--ink-2); }
.fs-table th,.fs-table td{ padding:7px 12px; border-bottom:1px solid var(--line-soft); vertical-align:top; }
.fs-table td{ color:var(--ink-2); }
.fs-table td:first-child{ color:var(--ink); white-space:nowrap; }
.fs-table .n{ text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
.fs-table tbody tr:last-child td{ border-bottom:0; }
.fs-tcell{ display:inline-flex; align-items:center; gap:7px; white-space:nowrap; }

/* 말풍선 */
.fs-tip{ position:fixed; left:0; top:0; z-index:95; width:max-content; max-width:min(300px,calc(100vw - 16px)); padding:10px 12px 11px; background:var(--raise); color:var(--ink); border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow); font-family:var(--sans); font-size:12.5px; line-height:1.5; pointer-events:none; }
.fs-tip p{ margin:0; }
.fs-tt-h{ display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 8px; }
.fs-tt-h b{ font-size:14px; font-weight:600; }
.fs-tt-h span{ font-size:12px; color:var(--ink-3); }
.fs-tt-dl{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:3px 12px; margin:8px 0 0; padding:0; }
.fs-tt-dl dt{ color:var(--ink-3); }
.fs-tt-dl dd{ margin:0; color:var(--ink); }
.fs-tt-dl dd b{ font-weight:600; }
.fs-lk{ display:inline-block; width:12px; height:2px; border-radius:1px; background:var(--fs-c); vertical-align:middle; margin:-2px 7px 0 0; }
.fs-tt-v{ display:flex; align-items:baseline; gap:8px; }
.fs-tt-v b{ font-size:20px; font-weight:600; line-height:1.2; }
.fs-tt-v span{ color:var(--ink-2); font-size:13px; }
.fs-tt-p{ color:var(--ink-2); margin-top:2px !important; }
.fs-tt-n{ color:var(--ink-3); margin-top:6px !important; font-size:12px; }
.fs-tt-note{ margin-top:7px !important; padding-top:6px; border-top:1px solid var(--line-soft); color:var(--ink-3); font-size:12px; }

/* 처음 보일 때의 움직임 */
.fs-wait .fs-bar,.fs-wait .fs-seg{ transform:scaleX(0); }
.fs-wait .fs-col{ transform:scaleY(0); }
.fs-wait .fs-tlp .fs-dot:not(.fs-special) i{ transform:scale(0); }
@keyframes fs-grow-x{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }
@keyframes fs-grow-y{ from{ transform:scaleY(0); } to{ transform:scaleY(1); } }
@keyframes fs-pop{ from{ transform:scale(0); } to{ transform:scale(1); } }
.fs-anim .fs-bar{ animation:fs-grow-x .75s cubic-bezier(.2,.7,.2,1) both; animation-delay:calc(var(--i,0) * 28ms); }
.fs-anim .fs-seg{ animation:fs-grow-x .8s cubic-bezier(.2,.7,.2,1) both; animation-delay:calc(var(--i,0) * 90ms + 200ms); }
.fs-anim .fs-col{ animation:fs-grow-y .75s cubic-bezier(.2,.7,.2,1) both; animation-delay:calc(var(--i,0) * 50ms); }
.fs-anim .fs-tlp .fs-dot:not(.fs-special) i{ animation:fs-pop .45s cubic-bezier(.3,1.4,.5,1) both; animation-delay:calc(var(--i,0) * 12ms); }
@media (prefers-reduced-motion: reduce){
  .fs-wait .fs-bar,.fs-wait .fs-seg,.fs-wait .fs-col,.fs-wait .fs-tlp .fs-dot i{ transform:none; }
  .fs-anim .fs-bar,.fs-anim .fs-seg,.fs-anim .fs-col,.fs-anim .fs-dot i{ animation:none; }
  .fs-dot i{ transition:none; }
}

/* 터치 기기 · 누르는 곳을 40px 이상으로 */
@media (pointer: coarse){
  .fs-row{ min-height:40px; }
  .fs-fbars .fs-row{ min-height:40px; }
  .fs-stack{ height:24px; }
  .fs-prow{ min-height:40px; }
  .fs-dot{ height:40px; }
  .fs-dots{ height:212px; }
  .fs-chip,.fs-tbtn,.fs-seg2 button{ min-height:40px; }
}
@container fsc (max-width: 720px){
  @media (pointer: coarse){ .fs-dot{ width:40px; height:40px; } .fs-dots{ height:auto; } }
}

/* 강제 색상 모드 */
@media (forced-colors: active){
  .fs-bar,.fs-seg,.fs-col,.fs-sw,.fs-dot i{ forced-color-adjust:none; }
}

/* 수학교육 흐름도와 분석표 · #edu-flow #edu-tables */
.e2{ margin-top:72px; }
.e2-head{ display:grid; gap:8px; max-width:900px; margin-bottom:18px; }
.e2-head h3{ font-family:var(--serif-ko); font-size:clamp(22px,2.4vw,28px); line-height:1.3; position:relative; padding-bottom:12px; }
.e2-head h3::after{ content:''; position:absolute; left:0; bottom:0; width:56px; height:2px; border-radius:2px; background:linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 0%, transparent)); }
.e2-head .lede{ color:var(--ink-2); font-size:15px; max-width:78ch; }

/* 범례 */
.e2-legend{ display:flex; flex-wrap:wrap; gap:8px 20px; margin:0 0 12px; font-size:12.5px; color:var(--ink-2); }
.e2-legend span{ display:inline-flex; align-items:center; gap:8px; }
.e2-legend i{ flex:none; display:inline-block; }
.e2-legend i.w{ width:9px; height:9px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 2px var(--bg), 0 0 0 3px color-mix(in srgb, var(--accent) 45%, transparent); }
.e2-legend i.k{ width:24px; height:11px; border-radius:3px; background:color-mix(in srgb, var(--f-edu) 22%, var(--surface)); border:1px solid color-mix(in srgb, var(--f-edu) 55%, transparent); }
.e2-legend i.l{ width:28px; height:0; border-top:1.6px dashed var(--accent); }
.e2-legend i.b{ width:18px; height:18px; border-radius:50%; border:1.5px solid var(--accent); color:var(--accent); font:600 10px/15px var(--mono); text-align:center; font-style:normal; }

/* 틀 */
.e2-frame{ position:relative; background:linear-gradient(180deg, var(--surface), color-mix(in srgb, var(--surface) 55%, var(--bg))); border:1px solid var(--line); border-radius:18px; padding:14px 16px 8px; box-shadow:var(--shadow); }
.e2-frame::before{ content:''; position:absolute; left:18px; right:18px; top:-1px; height:1px; background:linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent) 60%, transparent), transparent); }
.e2-chart{ position:relative; }

/* 가로 배치 */
.e2-h .e2-band{ position:absolute; top:0; z-index:0; border-left:1px solid color-mix(in srgb, var(--accent) 20%, transparent); }
.e2-h .e2-band.alt{ background:color-mix(in srgb, var(--accent) 4.5%, transparent); }
.e2-h .e2-band::before{ content:''; position:absolute; left:0; right:0; top:0; height:2px; background:linear-gradient(90deg, color-mix(in srgb, var(--accent) 75%, transparent), color-mix(in srgb, var(--accent) 12%, transparent)); }
.e2-bh{ display:grid; gap:1px; padding:9px 10px 0; }
.e2-bh b{ font-family:var(--serif-ko); font-size:13px; font-weight:600; color:var(--ink); line-height:1.3; }
.e2-bh small{ font-family:var(--mono); font-size:10.5px; color:var(--accent); letter-spacing:.05em; }
.e2-svg{ position:absolute; left:0; top:0; z-index:1; pointer-events:none; overflow:visible; }
.e2-grid{ stroke:var(--line-soft); stroke-width:1; }
.e2-grid.mj{ stroke:var(--line); }
.e2-axis{ stroke:color-mix(in srgb, var(--accent) 45%, var(--line)); stroke-width:1.5; }
.e2-pre{ stroke:color-mix(in srgb, var(--f-edu) 45%, var(--line)); stroke-width:1.2; stroke-dasharray:2 5; }
.e2-stem{ stroke-width:1.2; opacity:.6; transition:opacity .25s; }
.e2-stem.w{ stroke:var(--accent); }
.e2-stem.k{ stroke:var(--f-edu); }
.e2-dot{ fill:var(--accent); stroke:var(--surface); stroke-width:2.5; transition:opacity .25s; }
.e2-ln{ fill:none; stroke:var(--accent); stroke-width:1.4; stroke-dasharray:3 4; stroke-linecap:round; opacity:.62; transition:opacity .25s, stroke-width .25s; }
.e2-ah{ fill:var(--accent); opacity:.8; transition:opacity .25s; }
.e2-chart.focus .e2-ln{ opacity:.1; }
.e2-chart.focus .e2-ln.on{ opacity:1; stroke-width:2.2; stroke-dasharray:none; }
.e2-chart.focus .e2-ah:not(.on),.e2-chart.focus .e2-stem:not(.on),.e2-chart.focus .e2-dot:not(.on){ opacity:.18; }
.e2-chart.focus .e2-card:not(.on),.e2-chart.focus .e2-seg:not(.on){ opacity:.4; }
.e2-chart.focus .e2-badge:not(.on){ opacity:.45; }

/* 카드 */
.e2-card{ appearance:none; position:absolute; z-index:2; display:grid; align-content:start; gap:2px; text-align:left; margin:0; padding:6px 9px 5px 10px; height:62px; border:1px solid var(--line); border-left:2px solid var(--c); border-radius:2px 9px 9px 2px; background:var(--raise); color:var(--ink); cursor:pointer; box-shadow:0 8px 18px -14px rgba(0,0,0,.7); transition:transform .2s, border-color .2s, background .2s, opacity .25s; }
.e2-card.w{ --c:var(--accent); }
.e2-card.k{ --c:var(--f-edu); }
.e2-card .y{ font-family:var(--mono); font-size:10.5px; color:var(--c); letter-spacing:.03em; line-height:1.3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.e2-card b{ font-family:var(--serif-ko); font-weight:600; font-size:12.5px; line-height:1.34; display:-webkit-box; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; overflow-wrap:anywhere; }
.e2-card .g{ display:none; }
.e2-v .e2-card .g{ display:block; font-size:12.3px; line-height:1.5; color:var(--ink-3); margin-top:2px; }
.e2-card:hover{ border-color:color-mix(in srgb, var(--c) 70%, var(--line)); border-left-color:var(--c); transform:translateY(-1px); }
.e2-card.on{ background:color-mix(in srgb, var(--c) 13%, var(--raise)); border-color:var(--c); }
.e2-card[aria-expanded='true']{ box-shadow:0 0 0 1px var(--c), 0 10px 22px -14px rgba(0,0,0,.7); }

/* 한국 교육과정 띠 */
.e2-seg{ appearance:none; position:absolute; z-index:2; height:26px; margin:0; padding:0 6px; border:1px solid color-mix(in srgb, var(--f-edu) 45%, transparent); border-radius:5px; background:color-mix(in srgb, var(--f-edu) 15%, var(--surface)); color:var(--ink); font-size:11.5px; font-weight:600; cursor:pointer; display:flex; align-items:center; white-space:nowrap; overflow:hidden; transition:opacity .25s, background .2s; }
.e2-seg.alt{ background:color-mix(in srgb, var(--f-edu) 25%, var(--surface)); }
.e2-seg.open{ -webkit-mask-image:linear-gradient(90deg, #000 55%, transparent); mask-image:linear-gradient(90deg, #000 55%, transparent); }
.e2-seg:hover,.e2-seg.on{ background:color-mix(in srgb, var(--f-edu) 34%, var(--surface)); }

/* 줄 이름, 번호, 눈금 */
.e2-lane{ position:absolute; left:0; z-index:2; display:grid; gap:1px; }
.e2-lane.w{ transform:translateY(-100%); }
.e2-lane.m{ transform:translateY(-50%); }
.e2-lane b{ font-family:var(--serif-ko); font-size:13px; font-weight:600; line-height:1.3; }
.e2-lane.w b{ color:var(--accent); }
.e2-lane.k b{ color:var(--f-edu); }
.e2-lane.m b{ font-size:11.5px; font-weight:500; color:var(--ink-3); font-style:italic; }
.e2-lane small{ font-size:11px; color:var(--ink-3); line-height:1.35; }
.e2-badge{ appearance:none; position:absolute; z-index:3; width:22px; height:22px; margin:-11px 0 0 -11px; padding:0; border-radius:50%; border:1.5px solid var(--accent); background:var(--surface); color:var(--accent); font:600 11px/1 var(--mono); display:grid; place-items:center; cursor:pointer; transition:transform .2s, background .2s, color .2s, opacity .25s; }
.e2-badge.sm{ width:17px; height:17px; margin:-8.5px 0 0 -8.5px; font-size:9.5px; border-width:1.2px; }
.e2-badge::after{ content:''; position:absolute; inset:-9px; border-radius:50%; }
.e2-badge:hover,.e2-badge.on{ background:var(--accent); color:var(--accent-ink); transform:scale(1.08); }
.e2-tk{ position:absolute; z-index:2; transform:translateX(-50%); font-family:var(--mono); font-size:10.5px; color:var(--ink-3); line-height:1; }
.e2-lib{ position:absolute; z-index:2; transform:translate(-100%, -50%); font-size:11px; color:var(--ink-3); white-space:nowrap; line-height:1; }

/* 세로 배치 */
.e2-v{ --g:34px; position:relative; }
.e2-vhd{ display:grid; grid-template-columns:minmax(0,1fr) var(--g) minmax(0,1fr); font-family:var(--serif-ko); font-size:13px; font-weight:600; padding:2px 0 10px; }
.e2-vhd .w{ color:var(--accent); }
.e2-vhd .k{ color:var(--f-edu); }
.e2-ve{ position:relative; padding:12px 8px 14px; margin:0 -8px; border-top:1px solid color-mix(in srgb, var(--accent) 30%, var(--line)); }
.e2-ve.alt{ background:color-mix(in srgb, var(--accent) 4.5%, transparent); }
.e2-veh{ display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 10px; margin-bottom:10px; max-width:calc((100% - var(--g)) / 2); }
.e2-veh b{ font-family:var(--serif-ko); font-size:14px; font-weight:600; }
.e2-veh small{ font-family:var(--mono); font-size:10.5px; color:var(--accent); letter-spacing:.05em; }
.e2-vc{ display:grid; grid-template-columns:minmax(0,1fr) var(--g) minmax(0,1fr); }
.e2-vcol{ display:grid; gap:8px; align-content:start; min-width:0; }
.e2-v .e2-card{ position:relative; height:auto; min-height:54px; width:100%; }
.e2-vlib{ font-size:11px; color:var(--ink-3); padding:0 2px; }
.e2-ln.v{ stroke-dasharray:2 3; }
.e2-v ~ .e2-badge{ z-index:3; }

/* 설명 카드 */
.e2-pop{ position:absolute; z-index:30; display:grid; gap:8px; background:var(--raise); border:1px solid var(--line); border-top:2px solid var(--c, var(--accent)); border-radius:12px; padding:12px 15px 13px; box-shadow:var(--shadow), 0 4px 14px -6px rgba(0,0,0,.45); pointer-events:none; animation:e2in .18s ease; }
.e2-pop.pinned{ pointer-events:auto; }
.e2-pop.w,.e2-pop.l{ --c:var(--accent); }
.e2-pop.k{ --c:var(--f-edu); }
@keyframes e2in{ from{ opacity:0; transform:translateY(4px); } to{ opacity:1; transform:none; } }
.e2-ph{ display:flex; align-items:center; gap:9px; min-height:22px; }
.e2-tag{ font-family:var(--sans); font-size:11px; font-weight:500; letter-spacing:.02em; color:var(--c); border:1px solid color-mix(in srgb, var(--c) 45%, transparent); padding:1px 8px; border-radius:999px; white-space:nowrap; }
.e2-ph .yr{ font-family:var(--mono); font-size:12px; color:var(--ink-2); }
.e2-x{ appearance:none; margin-left:auto; width:28px; height:28px; border-radius:50%; border:1px solid var(--line); background:var(--surface); color:var(--ink-2); font-size:16px; line-height:1; cursor:pointer; display:grid; place-items:center; padding:0; }
.e2-x:hover{ color:var(--ink); border-color:var(--ink-3); }
.e2-pop h4{ font-family:var(--serif-ko); font-size:16px; line-height:1.4; }
.e2-pop .g{ color:var(--c); font-size:13px; font-weight:500; line-height:1.5; }
.e2-pop .d{ font-size:13.2px; color:var(--ink-2); line-height:1.68; }
.e2-pdl{ font-size:12.8px; color:var(--ink); }
.e2-pdl span{ color:var(--ink-3); margin-right:8px; font-size:11.5px; }
.e2-prow{ display:grid; gap:5px; }
.e2-prow small{ font-size:11px; color:var(--ink-3); }
.e2-prow .chips{ gap:5px; }
.e2-go{ appearance:none; display:inline-flex; align-items:baseline; gap:6px; border:1px solid var(--line); background:var(--surface); color:var(--ink); border-radius:999px; padding:3px 10px; font-size:12.5px; cursor:pointer; max-width:100%; text-align:left; }
.e2-go span{ font-family:var(--mono); font-size:10.5px; color:var(--c2); }
.e2-go.w{ --c2:var(--accent); }
.e2-go.k{ --c2:var(--f-edu); }
.e2-go:hover{ border-color:var(--c2); }
.e2-hint{ font-size:11.5px; color:var(--ink-3); font-style:italic; }

/* 영향 읽기 */
.e2-infh{ display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 14px; margin:26px 0 12px; }
.e2-infh h4{ font-family:var(--serif-ko); font-size:17px; }
.e2-infh p{ font-size:12.8px; color:var(--ink-3); }
.e2-inf{ display:grid; grid-template-columns:repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap:10px; }
.e2-inf li{ min-width:0; }
.e2-ic{ appearance:none; width:100%; height:100%; display:grid; grid-template-columns:24px minmax(0,1fr); gap:11px; text-align:left; border:1px solid var(--line); background:var(--surface); border-radius:12px; padding:13px 15px; cursor:pointer; color:var(--ink); transition:border-color .2s, background .2s; }
.e2-ic:hover,.e2-ic.on{ border-color:color-mix(in srgb, var(--accent) 60%, var(--line)); background:color-mix(in srgb, var(--accent) 5%, var(--surface)); }
.e2-ic[aria-pressed='true']{ box-shadow:inset 0 0 0 1px var(--accent); }
.e2-bn{ width:24px; height:24px; border-radius:50%; border:1.5px solid var(--accent); color:var(--accent); font:600 11px/21px var(--mono); text-align:center; }
.e2-ic.on .e2-bn{ background:var(--accent); color:var(--accent-ink); }
.e2-icb{ display:grid; gap:6px; min-width:0; }
.e2-icb .tt{ font-family:var(--serif-ko); font-size:14.5px; font-weight:600; line-height:1.4; }
.e2-icb .route{ font-size:12px; color:var(--ink-2); line-height:1.55; }
.e2-icb .route .yy{ font-family:var(--mono); font-size:10.5px; color:var(--accent); }
.e2-icb .route i{ font-style:normal; color:var(--f-edu); padding:0 2px; }
.e2-icb .ds{ font-size:12.8px; color:var(--ink-2); line-height:1.62; }
.e2-icb .lag{ display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:9px; align-items:center; margin-top:2px; }
.e2-icb .lag small{ font-family:var(--sans); font-size:11px; color:var(--ink-3); }
.e2-icb .lag .tr{ position:relative; height:6px; border-radius:3px; background:var(--line-soft); overflow:hidden; }
.e2-icb .lag .tr i{ position:absolute; top:0; bottom:0; }
.e2-icb .lag .tr .a{ left:0; background:var(--accent); border-radius:3px; }
.e2-icb .lag .tr .b{ background:color-mix(in srgb, var(--accent) 40%, transparent); border-radius:0 3px 3px 0; }
.e2-icb .lag em{ font-style:normal; font-family:var(--mono); font-size:11.5px; color:var(--ink); white-space:nowrap; }

.e2-icn{ height:100%; display:grid; align-content:start; gap:7px; border:1px dashed color-mix(in srgb, var(--accent) 35%, var(--line)); border-radius:12px; padding:13px 15px; }
.e2-icn b{ font-family:var(--serif-ko); font-size:14px; font-weight:600; color:var(--ink-2); }
.e2-icn p{ font-size:12.5px; color:var(--ink-3); line-height:1.62; }

/* 핵심 한 줄과 관찰 */
.e2-take{ display:flex; gap:14px; align-items:baseline; margin-top:16px; padding:13px 18px; border-left:2px solid var(--accent); background:linear-gradient(90deg, var(--accent-soft), color-mix(in srgb, var(--accent) 0%, transparent) 85%); border-radius:0 12px 12px 0; font-family:var(--serif-ko); font-size:15.5px; line-height:1.62; color:var(--ink); }
.e2-take b{ flex:none; font-family:var(--sans); font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); font-weight:600; }
.e2-obs{ display:grid; gap:6px; margin:12px 0 0; padding:0 0 0 20px; }
.e2-obs li{ position:relative; font-size:13.5px; color:var(--ink-2); line-height:1.62; padding-left:16px; }
.e2-obs li::before{ content:''; position:absolute; left:0; top:.8em; width:8px; height:1.5px; background:var(--accent); }

/* 분석표 */
.e2-tabs{ display:inline-flex; flex-wrap:wrap; gap:4px; padding:4px; border:1px solid var(--line); border-radius:14px; background:var(--surface); margin-bottom:22px; max-width:100%; }
.e2-tabs [role=tab]{ appearance:none; border:0; background:none; border-radius:10px; padding:8px 15px; display:inline-flex; align-items:baseline; gap:9px; cursor:pointer; color:var(--ink-2); font-size:14px; transition:background .2s, color .2s, box-shadow .2s; }
.e2-tabs [role=tab] .n{ font-family:var(--sans); font-size:11px; letter-spacing:.04em; color:var(--ink-3); white-space:nowrap; }
.e2-tabs [role=tab]:hover{ color:var(--ink); }
.e2-tabs [role=tab][aria-selected='true']{ background:var(--accent-soft); color:var(--ink); font-weight:600; box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent); }
.e2-tabs [role=tab][aria-selected='true'] .n{ color:var(--accent); }
.e2-tp.in{ animation:e2in .25s ease; }
.e2-th{ display:grid; gap:6px; margin-bottom:14px; }
.e2-th .caps{ font-family:var(--sans); font-size:12px; letter-spacing:.06em; font-weight:600; }
.e2-it{ display:block; }
.e2-it + .e2-it{ margin-top:3px; }
.e2-th h4{ font-family:var(--serif-ko); font-size:20px; line-height:1.35; }
.e2-guide{ display:flex; gap:10px; align-items:baseline; font-size:13.5px; color:var(--ink-2); line-height:1.6; }
.e2-guide b{ flex:none; font-family:var(--sans); font-size:11px; font-weight:600; letter-spacing:.04em; color:var(--accent); text-transform:uppercase; border:1px solid color-mix(in srgb, var(--accent) 40%, transparent); padding:1px 8px; border-radius:999px; white-space:nowrap; }
.e2-tw{ border:1px solid var(--line); border-radius:14px; background:var(--surface); overflow:hidden; box-shadow:var(--shadow); }
.e2-t{ width:100%; border-collapse:separate; border-spacing:0; table-layout:fixed; font-size:13.3px; line-height:1.62; }
.e2-t thead th{ text-align:left; vertical-align:bottom; font-size:11.5px; font-weight:600; color:var(--ink-3); letter-spacing:.02em; padding:13px 14px 11px; background:var(--surface-2); border-bottom:1px solid var(--line); }
.e2-t thead th:first-child{ box-shadow:inset 3px 0 0 color-mix(in srgb, var(--accent) 60%, transparent); }
.e2-t td,.e2-t tbody th,.e2-t tfoot th{ padding:14px; vertical-align:top; border-top:1px solid var(--line-soft); text-align:left; overflow-wrap:break-word; }
.e2-t tbody tr:first-child > *{ border-top:0; }
.e2-t tbody th{ font-family:var(--serif-ko); font-weight:600; font-size:14.2px; color:var(--ink); line-height:1.45; }
.e2-t td{ color:var(--ink-2); }
.e2-t tbody tr{ transition:background .2s; }
.e2-t tbody tr:hover{ background:color-mix(in srgb, var(--accent) 3.5%, transparent); }
.e2-t .pp .chips{ gap:5px; }
.e2-t .pp .pchip{ font-size:12.3px; }
.e2-t small.nt{ display:block; margin-top:6px; font-size:11.3px; color:var(--ink-3); line-height:1.5; }
.e2-t1 td.yr{ font-family:var(--mono); font-size:12px; color:var(--accent); white-space:nowrap; }
.e2-pill{ display:inline; padding:2px 8px; border-radius:6px; background:color-mix(in srgb, var(--f-edu) 12%, transparent); color:var(--ink); font-size:12.8px; line-height:1.9; -webkit-box-decoration-break:clone; box-decoration-break:clone; }
.e2-t1 .wt{ display:block; }
.e2-refs{ display:flex; flex-wrap:wrap; gap:5px; margin-top:8px; }
.e2-ref{ appearance:none; display:inline-flex; align-items:baseline; gap:6px; border:1px solid color-mix(in srgb, var(--accent) 35%, var(--line)); background:none; color:var(--ink); border-radius:999px; padding:2px 10px; font-size:12px; cursor:pointer; max-width:100%; text-align:left; transition:background .2s, border-color .2s; }
.e2-ref span{ font-family:var(--mono); font-size:10.5px; color:var(--accent); }
.e2-ref:hover{ background:var(--accent-soft); border-color:var(--accent); }
.e2-t3 th .kd{ display:block; margin-top:5px; font-family:var(--sans); font-size:11.5px; font-weight:500; color:var(--accent); }
.e2-steps{ display:flex; margin:0; padding:0; list-style:none; }
.e2-steps li{ flex:1 1 0; min-width:0; display:grid; gap:1px; align-content:center; padding:6px 8px 6px 17px; min-height:48px; margin-left:-4px; background:color-mix(in srgb, var(--accent) var(--k), var(--surface-2)); clip-path:polygon(0 0, calc(100% - 9px) 0, 100% 50%, calc(100% - 9px) 100%, 0 100%, 9px 50%); }
.e2-steps li:first-child{ margin-left:0; padding-left:10px; clip-path:polygon(0 0, calc(100% - 9px) 0, 100% 50%, calc(100% - 9px) 100%, 0 100%); border-radius:7px 0 0 7px; }
.e2-steps li:last-child{ padding-right:10px; clip-path:polygon(0 0, 100% 0, 100% 100%, 0 100%, 9px 50%); }
.e2-steps li:first-child:last-child{ clip-path:none; }
.e2-steps .i{ font-family:var(--mono); font-size:9.5px; color:color-mix(in srgb, var(--ink) 60%, transparent); line-height:1.2; }
.e2-steps .t{ font-size:11.8px; line-height:1.3; color:var(--ink); font-weight:500; overflow-wrap:anywhere; }
.e2-pair{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.e2-pair span{ border:1px solid var(--line); background:var(--surface-2); padding:7px 12px; border-radius:8px; font-size:12px; color:var(--ink); font-weight:500; }
.e2-pair span:last-child{ border-color:color-mix(in srgb, var(--accent) 50%, var(--line)); background:color-mix(in srgb, var(--accent) 12%, var(--surface-2)); }
.e2-pair i{ font-style:normal; color:var(--accent); }
.e2-t4 thead th{ vertical-align:bottom; }
.e2-t4 thead th .fw{ display:block; color:var(--ink); font-size:12.3px; line-height:1.4; }
.e2-t4 thead th .fy{ font-family:var(--mono); color:var(--accent); font-size:10.5px; }
.e2-t4 tbody td.v2{ background:color-mix(in srgb, var(--accent) 5%, transparent); }
.e2-t4 tbody td.v1{ background:color-mix(in srgb, var(--accent) 2.5%, transparent); }
.e2-mk{ display:flex; gap:9px; align-items:flex-start; }
.e2-m{ flex:none; display:inline-block; width:12px; height:12px; border-radius:50%; margin-top:5px; }
.e2-m.m2{ background:var(--accent); box-shadow:inset 0 0 0 1.5px var(--accent); }
.e2-m.m1{ background:linear-gradient(90deg, var(--accent) 50%, transparent 50%); box-shadow:inset 0 0 0 1.5px var(--accent); }
.e2-m.m0{ height:2px; border-radius:1px; margin-top:10px; background:var(--ink-3); opacity:.75; }
.e2-t4 td.v2 .it{ color:var(--ink); }
.e2-t4 td.v0 .it{ color:var(--ink-3); font-style:italic; }
.e2-t4 tfoot th,.e2-t4 tfoot td{ border-top:1px solid var(--line); background:var(--surface-2); padding:11px 14px; font-size:12px; color:var(--ink-3); }
.e2-t4 tfoot th{ font-family:var(--sans); font-weight:600; font-size:11.5px; }
.e2-cnt{ display:inline-flex; align-items:center; gap:6px; font-family:var(--mono); font-size:12px; color:var(--ink-2); }
.e2-cnt .e2-m{ margin-top:0; }
.e2-cnt .sp{ width:8px; }
.e2-lg4{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 18px; margin-top:4px; font-size:12.3px; color:var(--ink-2); }
.e2-lg4 span{ display:inline-flex; align-items:center; gap:7px; }
.e2-lg4 .e2-m{ margin-top:0; }
.e2-lg4 em{ color:var(--ink-3); font-style:italic; }

/* 좁은 화면 · 표는 행마다 카드로 */
@media (max-width: 860px){
  .e2-tw{ border:0; background:none; border-radius:0; overflow:visible; box-shadow:none; }
  .e2-t,.e2-t tbody,.e2-t tr,.e2-t td,.e2-t tbody th{ display:block; width:auto; }
  .e2-t colgroup,.e2-t thead,.e2-t tfoot{ display:none; }
  .e2-t tbody tr{ display:flex; flex-direction:column; gap:10px; border:1px solid var(--line); border-radius:14px; background:var(--surface); padding:14px 15px 15px; margin-bottom:10px; }
  .e2-t tbody tr:hover{ background:var(--surface); }
  .e2-t tbody tr > *{ padding:0; border:0; }
  .e2-t tbody th{ order:-2; font-size:16px; }
  .e2-t1 td.yr{ order:-1; margin-top:-8px; }
  .e2-t td[data-l]::before{ content:attr(data-l); display:block; font-size:11px; font-weight:600; letter-spacing:.02em; color:var(--ink-3); margin-bottom:4px; }
  .e2-t4 tbody tr{ gap:0; padding-bottom:6px; }
  .e2-t4 tbody th{ margin-bottom:6px; }
  .e2-t4 tbody td{ display:grid; grid-template-columns:minmax(0,38%) minmax(0,1fr); gap:4px 12px; padding:9px 0; border-top:1px solid var(--line-soft); background:none; }
  .e2-t4 tbody td.v2,.e2-t4 tbody td.v1{ background:none; }
  .e2-t4 tbody td::before{ margin:0; }
  .e2-t4 tbody td small.nt{ grid-column:2; margin-top:0; }
  .e2-steps{ flex-direction:column; gap:3px; }
  .e2-steps li,.e2-steps li:first-child,.e2-steps li:last-child{ flex:none; display:flex; align-items:center; gap:10px; margin:0; min-height:0; padding:7px 11px; clip-path:none; border-radius:8px; }
  .e2-steps .i{ width:14px; }
}
@media (max-width: 640px){
  .e2{ margin-top:52px; }
  .e2-frame{ padding:10px 10px 8px; border-radius:14px; }
  .e2-v{ --g:30px; }
  .e2-v .e2-card .g{ display:none; }
  .e2-tabs{ display:grid; grid-template-columns:1fr 1fr; width:100%; }
  .e2-tabs [role=tab]{ flex-direction:column; align-items:flex-start; gap:1px; padding:8px 12px; }
  .e2-take{ flex-direction:column; gap:4px; font-size:14.5px; padding:12px 14px; }
  .e2-guide{ flex-direction:column; gap:4px; }
  .e2-obs{ padding-left:4px; }
  .e2-legend{ gap:6px 14px; font-size:12px; }
  .e2-pop{ padding:12px 13px; }
}
@media (pointer: coarse){
  .e2-tabs [role=tab],.e2-ref,.e2-go{ min-height:40px; }
  .e2-x{ width:40px; height:40px; }
  .e2-seg::after{ content:''; position:absolute; inset:-8px 0; }
  .e2-t .pp .pchip{ min-height:36px; }
}
@media (prefers-reduced-motion: reduce){
  .e2 *,.e2 *::before{ transition:none !important; animation:none !important; }
}

/* 펼치기 접기 · src/v_xp.js 의 xpBlock xpClamp xpList 와 짝 */
.xp{ position:relative; scroll-margin-top:calc(var(--hdr, 64px) + 16px); }
.xp-more{ height:0; overflow:hidden; visibility:hidden; transition:height .38s cubic-bezier(.2,.7,.2,1); }
.xp.open > .xp-more{ height:auto; visibility:visible; }
.xp.open > .xp-more:not(.moving){ overflow:visible; }
.xp-more.moving{ visibility:visible; }
.xp-in{ opacity:0; transform:translateY(-6px); transition:opacity .3s ease, transform .38s cubic-bezier(.2,.7,.2,1); }
.xp.open > .xp-more > .xp-in{ opacity:1; transform:none; }
.xp[data-xptap] > .xp-brief{ cursor:pointer; }

/* 단추 · 금빛 가는 테두리의 알약 모양 */
.xp-btn{
  appearance:none; display:inline-flex; align-items:center; gap:5px; margin-top:10px;
  min-height:30px; padding:4px 9px 4px 12px; border-radius:999px;
  border:1px solid color-mix(in srgb, var(--accent) 32%, var(--line));
  background:color-mix(in srgb, var(--accent) 5%, var(--surface));
  color:var(--accent); font:500 12.5px/1.2 var(--sans); letter-spacing:.02em;
  cursor:pointer; white-space:nowrap; transition:background .2s, border-color .2s, box-shadow .2s;
}
/* 화면 낭독용 설명이 단추 밖으로 새어 가로 넘침을 만들지 않게 */
.xp-btn{ position:relative; }
.xp-btn > .sr{ left:0; top:0; }
.xp-btn:hover{ background:var(--accent-soft); border-color:color-mix(in srgb, var(--accent) 70%, var(--line)); box-shadow:0 4px 14px -8px color-mix(in srgb, var(--accent) 60%, transparent); }
.xp-btn:active{ transform:translateY(1px); }
.xp-chev{ width:14px; height:14px; flex:none; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; transition:transform .36s cubic-bezier(.2,.7,.2,1); }
[aria-expanded='true'] > .xp-chev,[aria-pressed='true'] > .xp-chev{ transform:rotate(180deg); }
.xp.slot .xp-btn{ margin-top:0; }

/* 긴 목록 · 나머지를 펼치는 단추는 한결 가볍게 */
.xp-list > .xp-more > .xp-in > :is(ol,ul,div){ margin-top:0; }
.xp-list > .xp-btn{ background:transparent; border-style:dashed; }
.xp-list > .xp-more > .xp-in > :is(.ms,.dex,.awl,.dworks) > li:first-child{ border-top:1px solid var(--line-soft); }
.xp-list > .xp-more > .xp-in > .dot{ margin-top:7px; }
.xp-list > .xp-more > .xp-in > .ppus > .ppu:first-of-type{ border-top:1px solid var(--line-soft); padding-top:10px; }

/* 긴 문단 · 정해진 줄만 보이고 끝이 흐려짐 */
.xpc{ display:grid; justify-items:start; gap:2px; min-width:0; }
.xpc > .xpc-t{ margin:0; min-width:0; justify-self:stretch; }
.xpc:not(.open) > .xpc-t{ display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:var(--xl, 3); line-clamp:var(--xl, 3); overflow:hidden; }
.xpc.over:not(.open) > .xpc-t{ -webkit-mask-image:linear-gradient(180deg, #000 calc(100% - 1.6em), rgba(0,0,0,.18)); mask-image:linear-gradient(180deg, #000 calc(100% - 1.6em), rgba(0,0,0,.18)); }
.xpc-btn{ appearance:none; border:0; background:none; padding:2px 0; display:inline-flex; align-items:center; gap:3px; color:var(--accent); font:500 12.5px/1.3 var(--sans); cursor:pointer; border-radius:6px; }
.xpc-btn:hover .xp-l{ text-decoration:underline; text-underline-offset:3px; }
.xpc-btn .xp-chev{ width:13px; height:13px; }

/* 이름표 · 해설 안의 소제목 */
.xp-lab{ font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); }

/* 시대 머리 · 저작 목록과 여러 연표 */
.xp-era{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.xp-era .ei-badge{ margin-right:2px; }

/* ───────── 저작 · 한 줄 요약과 펼치는 해설 */
.wk{ border-top:1px solid var(--line-soft); border-radius:0; transition:background .25s; scroll-margin-top:calc(var(--hdr, 64px) + 20px); }
.wk:hover{ background:color-mix(in srgb, var(--c, var(--accent)) 3%, transparent); }
.wk:has(> .xp.open){ background:linear-gradient(180deg, color-mix(in srgb, var(--c, var(--accent)) 6%, transparent), transparent 70%); }
.wk-b{ display:grid; grid-template-columns:96px minmax(0,1fr) auto; gap:18px; padding:14px 4px; align-items:start; }
.wk-b .y{ font-family:var(--mono); font-size:13px; color:var(--ink-3); text-align:right; padding-top:3px; font-variant-numeric:tabular-nums; }
.wk-m{ min-width:0; }
.wk-m .tt{ font-family:var(--serif-ko); font-size:16.5px; font-weight:600; line-height:1.4; display:flex; flex-wrap:wrap; align-items:center; gap:4px 10px; }
.wk-m .or{ font-family:var(--display); font-style:italic; font-size:14.5px; color:var(--ink-3); line-height:1.4; margin-top:2px; overflow-wrap:anywhere; }
.wk-m .gist{ font-size:13.5px; color:var(--ink-2); margin-top:6px; line-height:1.6; max-width:74ch; }
.wk-s{ display:flex; flex-direction:column; align-items:flex-end; gap:8px; }
.wk-badge{ font:500 10px/1 var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--accent); border:1px solid color-mix(in srgb, var(--accent) 45%, transparent); padding:4px 7px 3px; border-radius:999px; background:var(--accent-soft); }
.wk.has-d .wk-m .tt::before{ content:''; width:6px; height:6px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); margin-left:-2px; }
.wk .xp.open > .wk-b .tt{ color:var(--ink); }
/* 행마다 있는 단추는 조용하게 · 명저와 마우스를 올린 행에서만 금빛 알약 */
.wk .wk-s .xp-btn{ background:transparent; border-color:transparent; color:var(--ink-3); }
.wk:hover .wk-s .xp-btn,.wk .wk-s .xp-btn:focus-visible,.wk .wk-s .xp-btn[aria-expanded='true'],.wk.has-d .wk-s .xp-btn{ color:var(--accent); border-color:color-mix(in srgb, var(--accent) 32%, var(--line)); background:color-mix(in srgb, var(--accent) 5%, var(--surface)); }

.wkd{ margin:0 4px 20px 118px; padding:20px 22px 16px; border-radius:16px; border:1px solid color-mix(in srgb, var(--c, var(--accent)) 22%, var(--line)); background:linear-gradient(168deg, color-mix(in srgb, var(--c, var(--accent)) 7%, var(--surface)), var(--surface) 58%); display:grid; gap:16px; box-shadow:var(--shadow); cursor:auto; }
.wkd-cols{ display:grid; grid-template-columns:minmax(0,1fr) minmax(220px,300px); gap:24px; }
.wkd-text{ display:grid; gap:16px; align-content:start; min-width:0; }
.wkd-s{ display:grid; gap:6px; }
.wkd-s .lab,.wkd-r .lab{ font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); }
.wkd-s > p:not(.lab){ font-size:14.5px; line-height:1.8; color:var(--ink); max-width:70ch; }
.wkd-s.wkd-c > p:not(.lab){ font-family:var(--serif-ko); font-size:15.5px; line-height:1.85; }
.wkd-s .dot li{ font-size:13.5px; color:var(--ink-2); }
.wkd-meta{ margin:0; align-self:start; display:grid; gap:12px; align-content:start; padding:16px 16px 14px; border-radius:12px; background:color-mix(in srgb, var(--sunk) 70%, transparent); border:1px solid var(--line-soft); min-width:0; }
.wkd-meta div{ display:grid; gap:3px; min-width:0; }
.wkd-meta dt{ font-size:11px; color:var(--ink-3); letter-spacing:.06em; }
.wkd-meta dd{ margin:0; font-size:13.5px; display:flex; flex-wrap:wrap; align-items:center; gap:6px; min-width:0; }
.wkd-meta .chips{ gap:4px; }
.wkd-or{ font-family:var(--display); font-style:italic; font-size:14.5px; line-height:1.45; overflow-wrap:anywhere; }
.wkd-life{ font-family:var(--mono); font-size:11.5px; color:var(--ink-3); }
.wkd-ms{ display:grid; gap:0; }
.wkd-ms li{ display:grid; grid-template-columns:78px minmax(0,1fr); gap:12px; font-size:13.5px; padding:5px 0; border-top:1px solid var(--line-soft); }
.wkd-ms li:first-child{ border-top:0; }
.wkd-ms .y{ font-family:var(--mono); font-size:12px; color:var(--ink-3); text-align:right; padding-top:1px; }
.wkd-rel{ display:grid; gap:10px; padding-top:14px; border-top:1px solid var(--line-soft); }
.wkd-r{ display:grid; grid-template-columns:168px minmax(0,1fr); gap:12px; align-items:start; }
.wkd-r .lab{ padding-top:8px; }
.wkd-r .chips{ gap:5px; }
.wkd-more{ font-family:var(--mono); font-size:12px; color:var(--ink-3); align-self:center; padding:0 4px; }
.wk-go{ gap:6px; white-space:normal; text-align:left; line-height:1.4; height:auto; min-width:0; }
.wkd .chip,.wkd .pchip{ max-width:100%; }
.wkd-r .chip,.wkd-r .pchip{ white-space:normal; text-align:left; line-height:1.4; }
.wkd-r .chips,.wkd-meta .chips{ min-width:0; }
.wk-go .mono{ font-size:11px; color:var(--ink-3); }
.wkd-foot{ display:flex; justify-content:flex-end; }
#wk-all{ gap:4px; }
#wk-all .xp-chev{ width:14px; height:14px; }

/* ───────── 7대 난제 · 요지와 펼치는 본문 */
.mp-gist{ display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:26px; align-items:start; }
.mp-gist .mp-lay p:not(.lab){ font-size:15px; line-height:1.75; }
.mp-gist .mp-now-g{ padding:14px 16px; border-radius:14px; border:1px solid var(--line); background:var(--surface); display:grid; gap:6px; }
.mp.claimed .mp-now-g{ border-color:color-mix(in srgb, var(--down) 45%, transparent); background:color-mix(in srgb, var(--down) 5%, var(--surface)); }
.mp.solved .mp-now-g{ border-color:color-mix(in srgb, #3fbf7f 45%, transparent); }
.mp-now-g p:not(.lab){ font-size:14px; line-height:1.65; color:var(--ink-2); }
.mp-x > .xp-more > .xp-in{ display:grid; gap:22px; padding-top:18px; }
.mp-x > .xp-btn{ margin-top:14px; }

/* ───────── 수학철학 · 카드 아래쪽을 접기 */
.phc .xp > .xp-more > .xp-in{ display:grid; gap:12px; padding-top:2px; }
.phc .xp > .xp-btn{ margin-top:4px; }
.phc .xp-btn{ --accent:var(--c); border-color:color-mix(in srgb, var(--c) 40%, var(--line)); background:color-mix(in srgb, var(--c) 6%, var(--surface)); color:var(--c); }
.phc .xp-btn:hover{ background:color-mix(in srgb, var(--c) 12%, var(--surface)); }

/* ───────── 위대한 정리 · 카드와 연표 행 */
.hof-c .xp > .xp-more > .xp-in{ display:grid; gap:10px; padding-top:4px; }
.hof-c .xp > .xp-btn{ margin-top:2px; }
.th-x{ display:grid; gap:4px; }
.th-x .lab{ font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); }
.th-x p:not(.lab){ font-size:13.5px; line-height:1.7; color:var(--ink-2); }
.th-hist{ display:grid; gap:0; }
.th-hist li{ display:grid; grid-template-columns:64px minmax(0,1fr); gap:10px; font-size:13px; padding:4px 0; border-top:1px solid var(--line-soft); }
.th-hist li:first-child{ border-top:0; }
.th-hist .y{ font-family:var(--mono); font-size:11.5px; color:var(--ink-3); text-align:right; padding-top:1px; }
.trow summary .t-chev{ display:inline-grid; place-items:center; width:26px; height:26px; border-radius:50%; color:var(--accent); border:1px solid color-mix(in srgb, var(--accent) 30%, var(--line)); align-self:center; }
.trow[open] summary .t-chev .xp-chev{ transform:rotate(180deg); }
.trow summary{ grid-template-columns:110px minmax(0,1fr) minmax(0,.8fr) auto auto; }
.trow .tbody{ display:grid; gap:10px; }

/* ───────── 필즈상과 아벨상 · 십 년 단위로 접기 */
.aw-decs{ display:grid; gap:0; }
.aw-dec{ border-top:1px solid var(--line-soft); }
.aw-dec:first-child{ border-top:0; }
.aw-dh{ display:grid; grid-template-columns:64px minmax(0,1fr) auto; gap:12px; align-items:center; padding:10px 0; }
.aw-dh b{ font-family:var(--mono); font-size:13px; color:var(--accent); font-weight:500; }
.aw-dh .aw-nm{ font-size:13px; color:var(--ink-2); line-height:1.5; min-width:0; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; }
.aw-dh .aw-nm small{ font-family:var(--mono); color:var(--ink-3); margin-right:8px; }
.aw-dec .xp.open > .aw-dh .aw-nms{ display:none; }
.aw-dec .awl{ padding:0 0 10px; }

#ph-tl .xp-list > .xp-btn{ margin-left:54px; }
/* 연표의 글 칸 · 연도와 점은 절대 위치라 둘째 칸에 바로 놓음 */
.vtl li > div{ grid-column:2; min-width:0; }

/* ───────── 탐구 · 쓰는 법 */
.ex-help{ margin:4px 0 12px; padding:10px 14px; border-radius:12px; background:color-mix(in srgb, var(--accent) 5%, transparent); border:1px solid var(--line-soft); }
.ex-help .xp-brief p{ font-size:13.5px; color:var(--ink-2); line-height:1.6; }
.ex-help .xp-btn{ margin-top:6px; }
.ex-help ol{ display:grid; gap:6px; padding-top:8px; counter-reset:exh; }
.ex-help ol li{ position:relative; padding-left:26px; font-size:13.5px; line-height:1.6; color:var(--ink-2); counter-increment:exh; }
.ex-help ol li::before{ content:counter(exh); position:absolute; left:0; top:1px; width:18px; height:18px; border-radius:50%; display:grid; place-items:center; font:500 10.5px/1 var(--mono); color:var(--accent); border:1px solid color-mix(in srgb, var(--accent) 40%, transparent); }

/* ───────── 학교수학 · 단원 설명 두 줄 */
.unit .xpc-t{ font-size:14px; color:var(--ink-2); line-height:1.65; }

/* ───────── 인물 페이지의 저작 · 명저 해설 펼치기 */
.wkp .t{ display:flex; flex-wrap:wrap; align-items:center; gap:4px 8px; }
.wkp .n{ margin-top:3px; line-height:1.55; }
.wkp .xp-btn{ margin-top:6px; }
.wkp-d{ display:grid; gap:12px; padding:12px 0 4px; }
.wkp-d .wkd-s > p:not(.lab){ font-size:14px; line-height:1.75; }
.wkp-d .wkd-s.wkd-c > p:not(.lab){ font-size:14.5px; }
.wkp-go{ font-size:13px; justify-self:start; }

.ppbr{ display:grid; gap:12px; }
.xp-list > .xp-more > .xp-in > .ppbr{ margin-top:12px; }

/* ───────── 인물 사전 · 시대 표시 */
.era-rn{ display:inline-grid; place-items:center; min-width:1.6em; height:1.6em; padding:0 .3em; border-radius:999px; font:600 .72em/1 var(--display); letter-spacing:.02em; color:var(--ei-c, var(--accent)); border:1px solid color-mix(in srgb, var(--ei-c, var(--accent)) 45%, transparent); vertical-align:middle; }
.era-rn.badge{ width:32px; height:32px; font-size:13px; background:color-mix(in srgb, var(--ei-c, var(--accent)) 8%, var(--surface)); }
.era-rn.badge.sm{ width:24px; height:24px; font-size:10.5px; }
.era-rn.badge.lg{ width:44px; height:44px; font-size:16px; }
.chip.era-chip > .ei,.chip.era-chip > .era-rn{ color:var(--ei-c, currentColor); }
.chip.era-chip[aria-pressed='true']{ border-color:var(--ei-c, var(--accent)); background:color-mix(in srgb, var(--ei-c, var(--accent)) 12%, var(--surface)); color:var(--ink); }

.pd-eh{ display:flex; align-items:center; gap:14px; margin:36px 0 14px; scroll-margin-top:calc(var(--hdr, 64px) + 86px); }
.pd-eh:first-child{ margin-top:14px; }
.pd-eh-t{ display:grid; gap:1px; }
.pd-eh-t h3{ font-family:var(--serif-ko); font-size:21px; line-height:1.25; }
.pd-eh-t p{ font-size:12.5px; color:var(--ink-3); }
.pd-eh-rule{ flex:1; height:1px; min-width:24px; background:linear-gradient(90deg, color-mix(in srgb, var(--ei-c, var(--accent)) 60%, transparent), transparent); }

.era-rib{
  position:sticky; top:calc(var(--hdr, 64px) + 6px); z-index:20;
  display:flex; gap:4px; overflow-x:auto; scrollbar-width:none; scroll-snap-type:x proximity;
  margin:8px 0 6px; padding:6px; border-radius:16px;
  background:var(--glass); -webkit-backdrop-filter:blur(14px) saturate(1.2); backdrop-filter:blur(14px) saturate(1.2);
  border:1px solid var(--line-soft); box-shadow:0 14px 34px -26px rgba(0,0,0,.6);
}
.era-rib::-webkit-scrollbar{ display:none; }
.era-rb{ appearance:none; flex:1 0 auto; display:flex; align-items:center; gap:8px; min-height:40px; padding:5px 10px 5px 5px; border-radius:11px; border:1px solid transparent; background:transparent; color:var(--ink-2); cursor:pointer; text-align:left; scroll-snap-align:start; transition:background .2s, border-color .2s, color .2s; }
.era-rb:hover:not(:disabled){ background:color-mix(in srgb, var(--ei-c, var(--accent)) 10%, transparent); color:var(--ink); }
.era-rb[aria-current='true']{ background:color-mix(in srgb, var(--ei-c, var(--accent)) 15%, var(--surface)); border-color:color-mix(in srgb, var(--ei-c, var(--accent)) 45%, transparent); color:var(--ink); }
.era-rb:disabled{ opacity:.35; cursor:default; }
.era-rb-t{ display:grid; line-height:1.2; }
.era-rb b{ font-size:12px; font-weight:500; white-space:nowrap; }
.era-rb small{ font-family:var(--mono); font-size:10.5px; color:var(--ink-3); }

/* 인물 카드 · 위쪽 가는 시대색 선과 생몰 앞의 시대 표시 */
.pdc[class*='ei-e']::before{ content:''; position:absolute; left:16px; right:16px; top:-1px; height:2px; border-radius:0 0 2px 2px; background:linear-gradient(90deg, var(--ei-c), color-mix(in srgb, var(--ei-c) 0%, transparent)); opacity:.85; pointer-events:none; }
.pdc .life .ei,.pdc .life .era-rn{ font-size:13px; margin-right:5px; vertical-align:-2px; }

/* ───────── 좁은 화면 */
@media (max-width:760px){
  .wk-b{ grid-template-columns:minmax(0,1fr); gap:4px; padding:14px 2px 12px; }
  .wk-b .y{ text-align:left; padding-top:0; font-size:12px; }
  .wk-s{ flex-direction:row; align-items:center; justify-content:space-between; margin-top:8px; flex-wrap:wrap; }
  .wkd{ margin:0 0 16px; padding:16px 14px 14px; border-radius:14px; }
  .wkd-cols{ grid-template-columns:minmax(0,1fr); gap:16px; }
  .wkd-r{ grid-template-columns:minmax(0,1fr); gap:5px; }
  .wkd-r .lab{ padding-top:0; }
  .wkd-ms li{ grid-template-columns:64px minmax(0,1fr); gap:10px; }
  .aw-dh{ grid-template-columns:52px minmax(0,1fr) auto; gap:10px; }
  .era-rb{ padding-right:8px; }
  .era-rb b{ font-size:11.5px; }
  .pd-eh{ margin-top:28px; gap:12px; }
  .pd-eh-t h3{ font-size:19px; }
}
@media (max-width:860px){
  .mp-gist{ grid-template-columns:minmax(0,1fr); gap:14px; }
  .trow summary{ grid-template-columns:78px minmax(0,1fr) auto; }
}
@media (pointer:coarse){
  .xp-btn{ min-height:40px; padding:8px 12px 8px 15px; }
  .xpc-btn{ min-height:40px; padding:6px 2px; }
  .trow summary .t-chev{ width:32px; height:32px; }
}
@media (prefers-reduced-motion: reduce){
  .xp-more,.xp-in,.xp-chev{ transition:none; }
  .xp-in{ transform:none; }
}
@media print{
  .xp-more{ height:auto !important; visibility:visible !important; overflow:visible !important; }
  .xp-in{ opacity:1 !important; transform:none !important; }
  .xp-btn,.xpc-btn{ display:none !important; }
  .xpc > .xpc-t{ display:block !important; -webkit-mask-image:none !important; mask-image:none !important; }
}

/* ───────── 초상 (portrait agent) · 인라인 SVG 초상과 2·5D 무대 */
.por{ display:block; max-width:100%; height:auto; aspect-ratio:1 / 1; overflow:visible; }
.por.por-lift{ transition:transform .35s cubic-bezier(.2,.7,.2,1), filter .35s ease; }
.por.por-lift:hover{ transform:translateY(-3px); filter:drop-shadow(0 10px 14px rgba(0,0,0,.28)); }

.por-3d{ position:relative; width:var(--por-size,240px); max-width:100%; aspect-ratio:1 / 1; perspective:760px; border-radius:50%; isolation:isolate; transition:transform .45s cubic-bezier(.2,.7,.2,1); }
.por-3d::before{ content:''; position:absolute; left:10%; right:10%; bottom:-7%; height:14%; border-radius:50%; background:radial-gradient(closest-side, rgba(0,0,0,.34), rgba(0,0,0,0)); filter:blur(2px); z-index:-1; transition:transform .45s ease, opacity .45s ease; }
.por-3d:hover{ transform:translateY(-3px); }
.por-3d:hover::before{ transform:scale(.92); opacity:.8; }
.por-3d .por-defs{ position:absolute; width:0; height:0; overflow:hidden; }
.por-3d .por-st{ position:absolute; inset:0; border-radius:50%; overflow:hidden; clip-path:circle(49.4% at 50% 50%); transform-origin:50% 55%; transform:rotateX(0) rotateY(0); }
.por-3d .por-l{ position:absolute; inset:0; width:100%; height:100%; display:block; overflow:visible; transform:translate3d(0,0,0); }
.por-3d.on .por-l, .por-3d.on .por-st, .por-3d.on .por-sh{ will-change:transform; }
.por-3d .por-sh{ position:absolute; inset:-30%; pointer-events:none; background:radial-gradient(circle at 36% 30%, rgba(255,248,232,.34), rgba(255,248,232,.1) 22%, rgba(255,248,232,0) 42%); mix-blend-mode:soft-light; }
.por-3d .por-sw{ position:absolute; inset:0; pointer-events:none; background:linear-gradient(105deg, rgba(255,255,255,0) 38%, rgba(255,250,236,.26) 50%, rgba(255,255,255,0) 62%); transform:translateX(-130%); mix-blend-mode:screen; }
.por-3d:hover .por-sw{ animation:porSweep 1.25s cubic-bezier(.3,.6,.2,1) 1; }
.por-3d .por-fr{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
@keyframes porSweep{ from{ transform:translateX(-130%); } to{ transform:translateX(130%); } }
@media (prefers-reduced-motion: reduce){
  .por-3d, .por-3d::before, .por.por-lift{ transition:none; }
  .por-3d:hover, .por.por-lift:hover{ transform:none; }
  .por-3d:hover .por-sw{ animation:none; }
}

/* ───────── 일대기 · bioHTML 세로 연표와 bioLine 가로 요약 */
@property --bio-f{ syntax:'<percentage>'; inherits:false; initial-value:0%; }
.bio{ container:bio / inline-size; --bio-yw:112px; --bio-nw:28px; --bio-gap:16px; --bio-ln:color-mix(in srgb, var(--accent) 34%, var(--line)); position:relative; color:var(--ink); scroll-margin-top:120px; }

/* 머리글 */
.bio-h{ position:relative; display:flex; align-items:baseline; flex-wrap:wrap; column-gap:12px; row-gap:2px; padding-bottom:11px; margin-bottom:16px; border-bottom:1px solid var(--line-soft); }
.bio-h::after{ content:''; position:absolute; left:0; bottom:-1px; width:44px; height:1px; background:var(--accent); }
.bio-eb{ margin:0; font-family:var(--display); font-style:italic; font-size:15px; line-height:1; color:var(--accent); }
.bio-t{ margin:0; font-family:var(--serif-ko); font-size:19px; font-weight:600; line-height:1.2; letter-spacing:.02em; color:var(--ink); }
.bio:lang(en) .bio-t{ font-family:var(--display); font-size:21px; letter-spacing:.01em; }
.bio-span{ margin-left:auto; font-family:var(--mono); font-size:12px; color:var(--ink-3); font-variant-numeric:tabular-nums; white-space:nowrap; }

/* 한 문장 요약 */
.bio-lead{ margin:0 0 20px; max-width:64ch; font-family:var(--serif-ko); font-size:15.5px; line-height:1.8; color:var(--ink-2); text-wrap:pretty; word-break:keep-all; overflow-wrap:break-word; }
.bio:lang(en) .bio-lead{ font-family:var(--display); font-size:17px; line-height:1.62; word-break:normal; }

/* 연표 · 좁을 때는 점 기둥과 본문 두 칸 */
.bio-clip{ position:relative; --bio-f:0%; transition:height .55s cubic-bezier(.22,.8,.24,1), --bio-f .5s ease; }
.bio[data-open='0'] .bio-clip,.bio.bio-anim .bio-clip{ -webkit-mask-image:linear-gradient(to bottom, #000 calc(100% - var(--bio-f)), transparent); mask-image:linear-gradient(to bottom, #000 calc(100% - var(--bio-f)), transparent); }
.bio[data-open='0'] .bio-clip,.bio.bio-closing .bio-clip{ --bio-f:48%; }
.bio.bio-anim .bio-clip{ overflow:hidden; }
.bio[data-open='0'] .bio-rest{ display:none; }
.bio-tl{ list-style:none; margin:0; padding:0; }
.bio-ev{ display:grid; grid-template-columns:var(--bio-nw) minmax(0,1fr); grid-template-areas:'node when' 'node text'; column-gap:var(--bio-gap); }
.bio-when{ grid-area:when; display:flex; align-items:baseline; flex-wrap:wrap; column-gap:9px; margin:4px 0 3px; line-height:1.3; }
.bio-y{ font-family:var(--mono); font-size:12.5px; font-weight:500; color:var(--accent); font-variant-numeric:tabular-nums; letter-spacing:.01em; }
.bio-kn{ font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); }
.bio-node{ grid-area:node; position:relative; display:flex; justify-content:center; align-items:flex-start; }
.bio-node::before{ content:''; position:absolute; top:26px; bottom:0; left:50%; width:1px; transform:translateX(-.5px); background:var(--bio-ln); }
.bio-last .bio-node::before{ display:none; }
.bio-k-died .bio-node::before,.bio-k-legacy .bio-node::before{ background:repeating-linear-gradient(to bottom, var(--bio-ln) 0 3px, transparent 3px 7px); }
.bio-dot{ position:relative; z-index:1; width:26px; height:26px; flex:none; display:grid; place-items:center; border-radius:50%; border:1px solid var(--line); background:var(--surface); color:var(--ink-2); transition:border-color .25s, box-shadow .25s, transform .3s; }
.bio-g{ display:block; width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:1.35; stroke-linecap:round; stroke-linejoin:round; }
.bio-x{ grid-area:text; margin:0; padding-bottom:20px; font-size:14.5px; line-height:1.68; color:var(--ink-2); text-wrap:pretty; word-break:keep-all; overflow-wrap:break-word; }
.bio:lang(en) .bio-x{ word-break:normal; }
.bio-ev:hover .bio-dot{ border-color:var(--accent); box-shadow:0 0 0 4px var(--accent-soft); }
.bio-ev:hover .bio-x{ color:var(--ink); }

/* 종류마다 조금씩 다른 점 */
.bio-k-born .bio-dot,.bio-k-died .bio-dot{ border-color:color-mix(in srgb, var(--accent) 72%, var(--line)); color:var(--accent); }
.bio-k-born .bio-dot{ background:color-mix(in srgb, var(--accent) 12%, var(--surface)); }
.bio-k-died .bio-dot{ background:color-mix(in srgb, var(--ink) 5%, var(--surface)); }
.bio-k-idea .bio-dot,.bio-k-book .bio-dot{ color:var(--accent); }
.bio-k-honour .bio-dot{ color:var(--accent); border-color:color-mix(in srgb, var(--accent) 55%, var(--line)); background:color-mix(in srgb, var(--accent) 16%, var(--surface)); }
.bio-k-loss .bio-dot{ border-style:dashed; color:var(--ink-3); }
.bio-k-legacy .bio-dot{ color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 11%, transparent); }
.bio-k-loss .bio-y{ color:var(--ink-3); }

/* 본문 속 인물 링크 */
.bio-p{ appearance:none; display:inline; margin:0; padding:0; border:0; background:none; font:inherit; line-height:inherit; color:var(--ink); cursor:pointer; text-decoration:underline dotted color-mix(in srgb, var(--accent) 75%, transparent); text-decoration-thickness:1px; text-underline-offset:3px; }
.bio-p:hover{ color:var(--accent); text-decoration-style:solid; }

/* 펼치기 단추 · 원이 연표의 점 기둥 위에 놓인다 */
.bio-foot{ display:grid; grid-template-columns:var(--bio-nw) minmax(0,1fr); column-gap:var(--bio-gap); margin-top:0; }
.bio-btn{ grid-column:1 / 3; justify-self:start; appearance:none; display:inline-flex; align-items:center; gap:10px; margin:0; padding:3px 14px 3px 0; min-height:36px; border:0; border-radius:999px; background:none; color:var(--ink); font:inherit; font-size:14px; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.bio-bi{ width:28px; height:28px; flex:none; display:grid; place-items:center; border-radius:50%; border:1px solid color-mix(in srgb, var(--accent) 62%, var(--line)); background:color-mix(in srgb, var(--accent) 11%, var(--surface)); color:var(--accent); transition:background .2s, box-shadow .25s; }
.bio-bi svg{ width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; transition:transform .45s cubic-bezier(.2,.7,.2,1); }
.bio[data-open='1']:not(.bio-closing) .bio-bi svg{ transform:rotate(180deg); }
.bio-bl{ font-weight:600; letter-spacing:.03em; }
.bio-bn{ font-family:var(--mono); font-size:11.5px; color:var(--ink-3); letter-spacing:.02em; }
.bio-btn:hover .bio-bi{ background:color-mix(in srgb, var(--accent) 22%, var(--surface)); box-shadow:0 0 0 4px var(--accent-soft); }
.bio-btn:hover .bio-bl{ color:var(--accent); }
.bio-btn:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
.bio[data-open='0'] .bio-foot{ margin-top:-6px; }

/* 펼칠 때 나머지 장면이 차례로 떠오르고, 접을 때 흐려진다 */
@keyframes bioIn{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
.bio.bio-anim:not(.bio-closing) .bio-rest{ animation:bioIn .5s cubic-bezier(.2,.7,.2,1) both; animation-delay:calc((var(--i) - var(--bio-n, 3)) * 45ms + 70ms); }
.bio.bio-closing .bio-rest{ opacity:0; transition:opacity .28s ease; }

/* 넓을 때는 연도 기둥, 점 기둥, 본문 세 칸 */
@container bio (min-width:540px){
  .bio-ev{ grid-template-columns:var(--bio-yw) var(--bio-nw) minmax(0,1fr); grid-template-areas:'when node text'; }
  .bio-when{ flex-direction:column; align-items:flex-end; text-align:right; row-gap:2px; margin:4px 0 0; }
  .bio-x{ padding-top:1px; }
  .bio-foot{ grid-template-columns:var(--bio-yw) var(--bio-nw) minmax(0,1fr); }
  .bio-btn{ grid-column:2 / 4; }
}
@container bio (min-width:760px){
  .bio{ --bio-yw:132px; --bio-gap:20px; }
  .bio-x{ font-size:15px; }
}

/* 가로 요약 · 작은 카드용 */
.bio-line{ position:relative; display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); column-gap:6px; margin:0; padding:0; font-size:11.5px; line-height:1.35; color:var(--ink-2); }
.bl-track{ position:absolute; top:9.5px; left:calc((100% - 12px) / 6); right:calc((100% - 12px) / 6); height:1px; background:linear-gradient(90deg, color-mix(in srgb, var(--accent) 65%, var(--line)), color-mix(in srgb, var(--accent) 30%, var(--line))); }
.bl-i{ position:relative; min-width:0; display:flex; flex-direction:column; align-items:center; text-align:center; gap:1px; }
.bl-dot{ width:20px; height:20px; margin-bottom:4px; display:grid; place-items:center; border-radius:50%; border:1px solid color-mix(in srgb, var(--accent) 55%, var(--line)); background:var(--surface); color:var(--accent); }
.bl-dot .bio-g{ width:11px; height:11px; stroke-width:1.5; }
.bl-mark .bl-dot{ border-color:var(--accent); background:var(--accent); color:var(--accent-ink); box-shadow:0 0 0 3px var(--accent-soft); }
.bl-y{ font-family:var(--mono); font-size:11px; font-weight:500; color:var(--accent); font-variant-numeric:tabular-nums; line-height:1.3; }
.bl-t{ max-width:100%; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; overflow-wrap:anywhere; color:var(--ink-2); }
.bio-line .bio-k-died .bl-dot{ background:color-mix(in srgb, var(--ink) 5%, var(--surface)); }

/* 손가락 조작 · 누르는 곳을 40px 이상으로 */
@media (pointer:coarse){
  .bio-btn{ min-height:44px; padding-right:18px; }
  .bio-bi{ width:28px; height:28px; }
}
@media (prefers-reduced-motion: reduce){
  .bio-clip{ transition:none; }
  .bio.bio-anim .bio-rest{ animation:none; }
  .bio-bi svg,.bio-dot{ transition:none; }
}

/* ───────── 한눈에 보기 · 계보도 접기와 펼치기 · src/v_export.js 와 src/v_map.js 의 짝 */

/* 도구 막대 단추 */
.mx-ico{ width:16px; height:16px; flex:none; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.btn.mx-ovb{ gap:7px; border-color:color-mix(in srgb, var(--accent) 55%, var(--line)); background:color-mix(in srgb, var(--accent) 7%, var(--surface)); }
.btn.mx-ovb .mx-ico{ color:var(--accent); }
.btn.mx-ovb:hover{ background:color-mix(in srgb, var(--accent) 15%, var(--surface)); border-color:var(--accent); }
.tl-ctl .mx-ovb.end{ margin-left:auto; }
.fold-tools{ display:inline-flex; align-items:center; gap:10px; flex-wrap:wrap; }
.mx-pair{ display:inline-flex; border:1px solid var(--line); border-radius:10px; overflow:hidden; background:var(--surface); }
.mx-pair button{ appearance:none; display:inline-flex; align-items:center; gap:6px; border:0; border-left:1px solid var(--line-soft); background:none; padding:6px 11px; font:inherit; font-size:13px; color:var(--ink-2); cursor:pointer; white-space:nowrap; }
.mx-pair button:first-child{ border-left:0; }
.mx-pair button:hover{ color:var(--ink); background:var(--surface-2); }
.mx-pair .mx-ico{ width:14px; height:14px; color:var(--ink-3); }
.mx-pair button:hover .mx-ico{ color:var(--accent); }

/* ───────── 계보도 · 넓은 화면의 열 접기 */
.mx-chev{ width:14px; height:14px; flex:none; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; transition:transform .35s cubic-bezier(.2,.7,.2,1); }
.fhead .fh{ z-index:1; }
.fhead .fh-t{ appearance:none; display:flex; align-items:center; justify-content:space-between; gap:8px; width:100%; height:100%; margin:0; padding:0 8px 0 0; border:0; border-radius:10px; background:none; font:inherit; color:inherit; text-align:left; cursor:pointer; }
.fhead .fh-t .mx-chev{ color:var(--ink-3); transform:rotate(90deg); }
.fhead .fh-t:hover .mx-chev{ color:var(--accent); }
.fhead .fh-t:hover .fh-l b{ text-decoration:underline; text-decoration-color:color-mix(in srgb, currentColor 40%, transparent); text-underline-offset:4px; }
.fhead .fh-t:focus-visible{ outline:2px solid var(--accent); outline-offset:-2px; }
.fhead .fh-l{ position:static; top:auto; height:auto; min-width:0; display:flex; flex-direction:column; justify-content:center; gap:1px; }
.fhead .fh-l b{ font-size:13.5px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.fhead .fh-l small{ font-size:12.5px; color:var(--ink-2); }
.fhead .fh.up .fh-l b{ color:var(--up); } .fhead .fh.dn .fh-l b{ color:var(--down); }
.fhead .fh.folded .fh-t{ flex-direction:column-reverse; justify-content:center; gap:3px; padding:0; }
.fhead .fh.folded .fh-l{ align-items:center; }
.fhead .fh.folded .fh-l b{ display:none; }
.fhead .fh-l .fh-c{ display:none; }
.fhead .fh.folded .fh-l .fh-n{ display:none; }
.fhead .fh.folded .fh-l .fh-c{ display:block; font-family:var(--mono); font-size:11.5px; font-weight:500; color:inherit; }
.fhead .fh.folded .fh-t .mx-chev{ transform:none; }
.fhead .fh.up.folded .fh-t{ color:var(--up); } .fhead .fh.dn.folded .fh-t{ color:var(--down); }
.fhead .fh.folded .fh-t .mx-chev{ color:currentColor; }
.fhead .fh.folded .fh-t::before{ content:''; position:absolute; inset:7px 6px; border-radius:12px; border:1px dashed color-mix(in srgb, currentColor 45%, transparent); background:color-mix(in srgb, currentColor 7%, transparent); z-index:-1; }
.fhead .fh.folded .fh-t{ position:relative; }
.fcol{ position:absolute; z-index:2; }
.fcol.up{ --dc:var(--up); } .fcol.dn{ --dc:var(--down); }
.fcol-cards > .fcard{ left:0; width:206px; }
.fcol.folded .fcol-cards{ overflow:hidden; width:100%; height:100%; }
.fcol-cards{ position:absolute; left:0; top:0; width:206px; transition:opacity .3s ease .08s, transform .42s cubic-bezier(.2,.7,.2,1), visibility 0s; }
.fcol.folded .fcol-cards{ opacity:0; visibility:hidden; pointer-events:none; transform:translateX(-10px) scale(.97); transform-origin:0 50%; transition:opacity .2s ease, transform .42s cubic-bezier(.2,.7,.2,1), visibility 0s linear .3s; }
.frail{ position:absolute; left:0; top:0; width:100%; z-index:0; display:flex; flex-direction:column; align-items:center; gap:8px; opacity:0; visibility:hidden; transform:scale(.9); transition:opacity .22s ease, transform .3s ease, visibility 0s linear .3s; }
.fcol.folded .frail{ opacity:1; visibility:visible; transform:none; transition:opacity .32s ease .14s, transform .42s cubic-bezier(.2,.7,.2,1) .1s, visibility 0s; }
.frail::before{ content:''; position:absolute; left:50%; top:-10px; bottom:-10px; width:50px; margin-left:-25px; border-radius:25px; z-index:-1; background:color-mix(in srgb, var(--dc) 7%, var(--surface)); border:1px dashed color-mix(in srgb, var(--dc) 40%, transparent); }
.fr-av{ position:relative; appearance:none; flex:none; width:34px; height:34px; padding:0; border-radius:50%; overflow:hidden; display:grid; place-items:center; cursor:pointer; border:1.5px solid var(--c, var(--line)); background:radial-gradient(circle at 32% 26%, color-mix(in srgb, var(--c, var(--ink-3)) 32%, var(--raise)), color-mix(in srgb, var(--c, var(--ink-3)) 12%, var(--raise)) 72%); color:var(--ink); font-family:var(--serif-ko); font-weight:600; font-size:13px; line-height:1; box-shadow:0 3px 8px -4px rgba(0,0,0,.55); transition:transform .2s ease, box-shadow .2s ease; }
.fr-av img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.fr-av:hover,.fr-av.hl{ transform:scale(1.1); box-shadow:0 0 0 3px color-mix(in srgb, var(--c, var(--accent)) 32%, transparent), 0 4px 10px -4px rgba(0,0,0,.5); z-index:1; }
.fr-av.fr-more{ --c:var(--dc); border-style:dashed; background:var(--surface); color:var(--ink-2); font-family:var(--mono); font-size:10.5px; font-weight:500; }
.flines path.fo{ stroke-dasharray:3 4; opacity:.42; }
.flines path.fo.g1{ opacity:.62; }
.fcanvas.fanim .fh,.fcanvas.fanim .fcol,.fcanvas.fanim #fc-center{ transition:left .45s cubic-bezier(.2,.7,.2,1), top .45s cubic-bezier(.2,.7,.2,1), width .45s cubic-bezier(.2,.7,.2,1), height .45s cubic-bezier(.2,.7,.2,1); }

/* ───────── 계보도 · 휴대폰 목록의 단계 접기 */
.flist .fg-t{ appearance:none; display:flex; align-items:center; gap:8px; width:100%; min-height:40px; margin:0; padding:4px 6px 4px 2px; border:0; border-radius:10px; background:none; font:inherit; font-size:12.5px; color:var(--ink-3); text-align:left; cursor:pointer; }
.flist .fg-t:hover{ background:var(--surface-2); }
.flist .fg-t:focus-visible{ outline:2px solid var(--accent); outline-offset:0; }
.flist .fg-t .mx-chev{ transform:rotate(90deg); color:var(--ink-3); }
.flist .fg.folded .fg-t .mx-chev{ transform:none; }
.flist .fg.up .fg-t b,.flist .fg.up .fg-t .mx-chev{ color:var(--up); } .flist .fg.dn .fg-t b,.flist .fg.dn .fg-t .mx-chev{ color:var(--down); }
.flist .fg-l{ flex:1; min-width:0; }
.fg-av{ display:flex; align-items:center; padding-left:6px; opacity:0; transform:translateX(8px); transition:opacity .25s ease, transform .35s cubic-bezier(.2,.7,.2,1); pointer-events:none; }
.fg.folded .fg-av{ opacity:1; transform:none; }
.fg-a{ position:relative; overflow:hidden; display:grid; place-items:center; flex:none; width:26px; height:26px; margin-left:-7px; border-radius:50%; border:1.5px solid var(--c, var(--line)); background:color-mix(in srgb, var(--c, var(--ink-3)) 20%, var(--raise)); font-style:normal; font-family:var(--serif-ko); font-weight:600; font-size:11px; color:var(--ink); box-shadow:0 0 0 2px var(--surface); }
.fg-a img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.fg-a.more{ width:auto; min-width:26px; padding:0 6px; border-radius:13px; border-style:dashed; border-color:var(--line); background:var(--surface); font-family:var(--mono); font-weight:500; font-size:10px; color:var(--ink-2); }
.fg-b{ display:grid; grid-template-rows:1fr; transition:grid-template-rows .42s cubic-bezier(.2,.7,.2,1); }
.fg.folded .fg-b{ grid-template-rows:0fr; }
.fg-in{ min-height:0; overflow:hidden; padding:3px; margin:-3px; transition:opacity .3s ease .05s; }
.fg.folded .fg-in{ opacity:0; visibility:hidden; transition:opacity .2s ease, visibility 0s linear .42s; }
.flist .fg.folded{ gap:0; }

/* ───────── 한눈에 보기 창 */
body.mxo-open{ overflow:hidden; }
.mxo{ position:fixed; inset:0; z-index:940; opacity:0; transition:opacity .24s ease; }
.mxo.on{ opacity:1; }
.mxo-dlg{ position:absolute; inset:0; display:grid; grid-template-columns:minmax(0,1fr) auto auto; grid-template-rows:auto minmax(0,1fr); grid-template-areas:'tt act x' 'st st st'; background:var(--bg); transform:scale(.988); transition:transform .32s cubic-bezier(.2,.7,.2,1); }
.mxo.on .mxo-dlg{ transform:none; }
.mxo-dlg::before{ content:''; grid-area:1 / 1 / 2 / -1; background:var(--surface); border-bottom:1px solid var(--line); box-shadow:0 10px 30px -24px rgba(0,0,0,.7); }
.mxo-tt{ grid-area:tt; z-index:1; min-width:0; padding:12px 10px 12px 24px; display:grid; gap:1px; align-content:center; }
.mxo-eb{ font-family:var(--display); font-style:italic; font-size:14px; line-height:1.2; color:var(--accent); }
.mxo-h{ font-family:var(--serif-ko); font-size:19px; font-weight:600; line-height:1.3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mxo-sub{ font-size:12.5px; line-height:1.4; color:var(--ink-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mxo-act{ grid-area:act; z-index:1; display:flex; align-items:center; gap:14px; padding:10px 14px; }
.mxo-opts:empty{ display:none; }
.mxo-act .seg button{ display:inline-flex; align-items:center; gap:7px; padding:7px 12px; }
.mxo-sw{ width:12px; height:12px; border-radius:50%; flex:none; box-shadow:inset 0 0 0 1px rgba(0,0,0,.18); }
.mxo-sw.paper{ background:radial-gradient(circle at 35% 30%, #fbf7ef, #e4d6b8); border:1px solid #b08433; }
.mxo-sw.night{ background:radial-gradient(circle at 35% 30%, #1c2533, #05080d); border:1px solid #caa45a; }
.mxo-dl{ display:flex; align-items:center; gap:6px; }
.mxo-dl-l{ font-family:var(--mono); font-size:11px; letter-spacing:.14em; color:var(--ink-3); margin-right:4px; }
.mxo-db{ gap:6px; font-family:var(--mono); font-size:12.5px; letter-spacing:.04em; }
.mxo-db .mx-ico{ width:15px; height:15px; color:var(--accent); }
.mxo-db[disabled]{ opacity:.45; cursor:progress; }
.mxo-x{ grid-area:x; z-index:1; align-self:center; width:40px; height:40px; margin-right:18px; padding:0; font-size:15px; border-radius:12px; }
.mxo-stage{ grid-area:st; position:relative; overflow:hidden; touch-action:none; background:radial-gradient(120% 90% at 50% 40%, var(--surface-2), var(--sunk) 70%); }
.mxo-stage::after{ content:''; position:absolute; inset:0; pointer-events:none; background-image:radial-gradient(circle, color-mix(in srgb, var(--ink) 9%, transparent) 1px, transparent 1.2px); background-size:22px 22px; opacity:.5; mask-image:radial-gradient(120% 90% at 50% 45%, transparent 35%, #000 100%); -webkit-mask-image:radial-gradient(120% 90% at 50% 45%, transparent 35%, #000 100%); }
.mxo-cv{ position:absolute; inset:0; z-index:1; display:block; width:100%; height:100%; cursor:grab; outline:none; touch-action:none; -webkit-user-select:none; user-select:none; }
.mxo-cv.grabbing{ cursor:grabbing; }
.mxo-cv:focus-visible{ box-shadow:inset 0 0 0 2px var(--accent); }
.mxo-zoom{ position:absolute; right:20px; bottom:20px; z-index:2; display:flex; flex-direction:column; align-items:center; gap:2px; padding:5px; border-radius:14px; border:1px solid var(--line); background:var(--glass); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); box-shadow:var(--shadow); }
.mxo-zoom button{ appearance:none; display:grid; place-items:center; width:38px; height:38px; border:0; border-radius:10px; background:none; color:var(--ink-2); font:inherit; font-size:20px; line-height:1; cursor:pointer; }
.mxo-zoom button:hover{ background:var(--surface-2); color:var(--ink); }
.mxo-zoom button .mx-ico{ width:18px; height:18px; }
.mxo-zoom output{ font-family:var(--mono); font-size:10.5px; color:var(--ink-3); padding:1px 0 2px; min-width:40px; text-align:center; }
.mxo-hint{ position:absolute; left:50%; bottom:24px; z-index:2; max-width:calc(100% - 160px); padding:9px 16px; border-radius:999px; background:var(--ink); color:var(--bg); font-size:12.5px; line-height:1.4; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; opacity:0; transform:translate(-50%, 8px); pointer-events:none; transition:opacity .4s ease, transform .4s ease; box-shadow:var(--shadow); }
.mxo-hint.on{ opacity:.94; transform:translate(-50%, 0); }
.mxo-tip{ position:absolute; left:0; top:0; z-index:3; display:grid; gap:2px; max-width:300px; padding:8px 12px; border-radius:10px; border:1px solid var(--line); background:var(--raise); box-shadow:var(--shadow); pointer-events:none; }
.mxo-tip b{ font-family:var(--serif-ko); font-size:14px; font-weight:600; line-height:1.35; }
.mxo-tip small{ font-size:11.5px; line-height:1.4; color:var(--ink-3); }
.mxo-busy{ position:absolute; inset:0; z-index:4; display:grid; place-items:center; background:color-mix(in srgb, var(--bg) 40%, transparent); backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px); }
.mxo-busy.done,.mxo-busy.err{ inset:auto 0 26px 0; background:none; backdrop-filter:none; -webkit-backdrop-filter:none; pointer-events:none; }
.mxo-busy-in{ display:grid; justify-items:center; gap:5px; min-width:270px; max-width:min(420px, calc(100vw - 32px)); padding:18px 24px 16px; border-radius:16px; border:1px solid var(--line); background:var(--raise); box-shadow:var(--shadow); text-align:center; }
.mxo-busy-in b{ font-family:var(--serif-ko); font-size:15px; font-weight:600; }
.mxo-busy-in small{ font-family:var(--mono); font-size:11.5px; color:var(--ink-3); }
.mxo-spin{ width:28px; height:28px; margin-bottom:4px; border-radius:50%; border:2px solid var(--line); border-top-color:var(--accent); animation:mxo-spin .85s linear infinite; }
.mxo-busy.done .mxo-spin,.mxo-busy.err .mxo-spin{ animation:none; border-color:var(--accent); position:relative; }
.mxo-busy.done .mxo-spin::after{ content:''; position:absolute; left:8px; top:4px; width:7px; height:12px; border:solid var(--accent); border-width:0 2px 2px 0; transform:rotate(45deg); }
.mxo-busy.err .mxo-spin{ border-color:var(--down); }
.mxo-busy.err .mxo-spin::after{ content:'!'; position:absolute; inset:0; display:grid; place-items:center; font-weight:700; color:var(--down); font-size:14px; }
.mxo-meter{ width:100%; height:3px; margin-top:8px; border-radius:3px; overflow:hidden; background:var(--line-soft); }
.mxo-meter i{ display:block; height:100%; background:var(--accent); transform-origin:0 50%; transform:scaleX(0); transition:transform .45s ease; }
.mxo-busy.done .mxo-meter,.mxo-busy.err .mxo-meter{ display:none; }
@keyframes mxo-spin{ to{ transform:rotate(360deg); } }

@media (max-width:1100px){
  .mxo-dl-l{ display:none; }
  .mxo-act{ gap:10px; }
}
@media (max-width:860px){
  .mxo-dlg{ grid-template-columns:minmax(0,1fr) auto; grid-template-rows:auto minmax(0,1fr) auto; grid-template-areas:'tt x' 'st st' 'act act'; }
  .mxo-tt{ padding:10px 8px 9px 16px; }
  .mxo-h{ font-size:16.5px; }
  .mxo-sub{ font-size:12px; }
  .mxo-x{ margin-right:12px; }
  .mxo-act{ flex-wrap:wrap; justify-content:center; gap:8px; padding:10px 12px calc(10px + env(safe-area-inset-bottom, 0px)); background:var(--surface); border-top:1px solid var(--line); box-shadow:0 -10px 30px -24px rgba(0,0,0,.7); }
  .mxo-opts{ flex:1 1 0; min-width:0; display:flex; }
  .mxo-opts .seg{ flex:1; }
  .mxo-sty{ flex:1 1 0; min-width:0; }
  .mxo-act .seg button{ flex:1; justify-content:center; padding:7px 8px; font-size:13px; white-space:nowrap; }
  .mxo-dl{ width:100%; }
  .mxo-dl .btn{ flex:1; justify-content:center; min-height:44px; }
  .mxo-zoom{ right:12px; bottom:12px; }
  .mxo-zoom output{ display:none; }
  .mxo-hint{ max-width:calc(100% - 96px); left:calc(50% - 30px); bottom:16px; white-space:normal; text-align:center; border-radius:14px; }
  .mxo-busy.done,.mxo-busy.err{ bottom:14px; }
}
@media (pointer:coarse){
  .mx-pair button{ min-height:40px; padding:6px 13px; }
  .btn.mx-ovb{ min-height:40px; }
  .mxo-zoom button{ width:44px; height:44px; }
  .mxo-act .seg button{ min-height:44px; }
  .fr-av{ width:40px; height:40px; font-size:14px; }
}
@media (prefers-reduced-motion: reduce){
  .mxo,.mxo-dlg,.mxo-hint,.mxo-meter i{ transition:none; }
  .mxo-dlg{ transform:none; }
  .mxo-spin{ animation-duration:2.4s; }
  .fcol-cards,.fcol.folded .fcol-cards,.frail,.fcol.folded .frail,.fg-b,.fg-in,.fg.folded .fg-in,.fg-av,.mx-chev,.fr-av{ transition:none; }
  .fcanvas.fanim .fh,.fcanvas.fanim .fcol,.fcanvas.fanim #fc-center{ transition:none; }
}

/* ───────── 저장 알림 · 창과 시트 위에 뜨는 작은 카드 · src/v_export.js 의 mxNote */
.mxs{ position:fixed; left:50%; bottom:24px; z-index:1200; display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:start; gap:12px; width:max-content; max-width:min(480px, calc(100vw - 32px)); padding:12px 12px 12px 14px; border-radius:14px; border:1px solid var(--line); background:var(--raise); color:var(--ink); box-shadow:var(--shadow), 0 18px 40px -24px rgba(0,0,0,.6); opacity:0; transform:translate(-50%, 14px); transition:opacity .22s ease, transform .3s cubic-bezier(.2,.7,.2,1); }
.mxs.on{ opacity:1; transform:translate(-50%, 0); }
.mxs[hidden]{ display:none; }
.mxs-ic{ display:grid; place-items:center; width:30px; height:30px; border-radius:50%; background:color-mix(in srgb, var(--accent) 16%, transparent); color:var(--accent); }
.mxs-ic svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.mxs.k-err .mxs-ic{ background:color-mix(in srgb, var(--down) 16%, transparent); color:var(--down); }
.mxs.k-warn .mxs-ic{ background:color-mix(in srgb, var(--down) 12%, transparent); color:var(--down); }
.mxs.k-info .mxs-ic{ background:color-mix(in srgb, var(--up) 14%, transparent); color:var(--up); }
.mxs-spin{ width:16px; height:16px; border-radius:50%; border:2px solid color-mix(in srgb, var(--accent) 30%, transparent); border-top-color:var(--accent); animation:mxo-spin .9s linear infinite; }
.mxs-t{ display:grid; gap:3px; min-width:0; padding-top:5px; }
.mxs-t b{ font-size:14px; font-weight:600; line-height:1.4; }
.mxs-t small{ font-family:var(--mono); font-size:11.5px; color:var(--ink-3); overflow-wrap:anywhere; }
.mxs-h{ margin-top:3px; font-size:13px; line-height:1.6; color:var(--ink-2); }
.mxs-pv{ display:block; max-width:100%; max-height:180px; margin-top:6px; border-radius:8px; border:1px solid var(--line-soft); background:repeating-conic-gradient(var(--surface-2) 0 25%, var(--surface) 0 50%) 0 0/16px 16px; object-fit:contain; }
.mxs-a{ display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.mxs-a .btn{ text-decoration:none; }
.mxs-x{ appearance:none; display:grid; place-items:center; width:30px; height:30px; border:0; border-radius:8px; background:none; color:var(--ink-3); font-size:13px; cursor:pointer; }
.mxs-x:hover{ color:var(--ink); background:var(--surface-2); }
.mxs-x:focus-visible,.mxs-a .btn:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
@media (max-width:760px){
  .mxs{ bottom:calc(var(--dock, 64px) + 14px + env(safe-area-inset-bottom, 0px)); width:calc(100vw - 32px); }
}
@media (pointer:coarse){
  .mxs-x{ width:40px; height:40px; }
  .mxs-a .btn{ min-height:40px; }
}
@media (prefers-reduced-motion: reduce){
  .mxs{ transition:none; }
}

/* ───────── 인쇄 상자 · 인쇄할 때만 보이고 나머지는 모두 숨긴다 · mxPrint */
#mx-printbox{ display:none; }
@media print{
  body.mx-printing{ background:#fff !important; }
  body.mx-printing > *:not(#mx-printbox){ display:none !important; }
  body.mx-printing #mx-printbox{ display:block !important; color:#000; background:#fff; }
  #mx-printbox.mxp-imgs .mxp-page{ display:flex; align-items:center; justify-content:center; overflow:hidden; break-after:page; page-break-after:always; break-inside:avoid; }
  #mx-printbox.mxp-imgs .mxp-page:last-child{ break-after:auto; page-break-after:auto; }
  #mx-printbox .mxp-img{ display:block; max-width:100%; max-height:100%; width:100%; height:100%; object-fit:contain; }
}
.mxs-addr{ width:100%; margin-top:6px; font-family:var(--mono); font-size:12px; }

/* ───────── 연대표 · 세계사와 한국사 시대 띠로 옮겨 가기 · src/v_timeline.js 의 tlBand 짝 */
.tl-box{ position:relative; }
.tl-row.bands .band[data-band]{ appearance:none; font:inherit; font-size:11px; line-height:16px; text-align:left; cursor:var(--cur-pointer, pointer); transition:background .2s, border-color .2s, box-shadow .2s, color .2s; }
.tl-row.bands .band[data-band]:hover{ color:var(--ink); border-color:color-mix(in srgb, var(--accent) 70%, transparent); background:color-mix(in srgb, var(--accent) 14%, var(--surface)); z-index:2; }
.tl-row.bands .band[data-band]:focus-visible{ outline:2px solid var(--accent); outline-offset:1px; z-index:3; }
.tl-row.bands .band.on{ color:var(--accent-ink, var(--bg)); font-weight:600; background:var(--accent); border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); z-index:2; }
.tl-row.bands .band.on > span{ color:inherit; }
.tl-era-col{ position:absolute; top:0; bottom:0; z-index:0; pointer-events:none; background:linear-gradient(180deg, color-mix(in srgb, var(--accent) 16%, transparent), color-mix(in srgb, var(--accent) 7%, transparent) 40%, color-mix(in srgb, var(--accent) 4%, transparent)); border-left:1px solid color-mix(in srgb, var(--accent) 55%, transparent); border-right:1px solid color-mix(in srgb, var(--accent) 55%, transparent); animation:tl-era-in .5s cubic-bezier(.2,.7,.2,1) both; }
.tl-era-col.k{ background:linear-gradient(180deg, color-mix(in srgb, var(--accent) 16%, transparent), color-mix(in srgb, var(--down) 6%, transparent) 40%, color-mix(in srgb, var(--accent) 4%, transparent)); }
@keyframes tl-era-in{ from{ opacity:0; transform:scaleX(.9); } to{ opacity:1; transform:none; } }
.tl-canvas.era-mode .tlb:not(.era):not(.sel){ opacity:.13; }
.tl-canvas.era-mode .tlb.era{ box-shadow:0 0 0 1px color-mix(in srgb, var(--accent) 60%, transparent), 0 0 12px -2px color-mix(in srgb, var(--accent) 55%, transparent); z-index:2; }
.tl-cap{ position:absolute; z-index:8; width:min(440px, calc(100% - 140px)); display:grid; gap:6px; padding:12px 14px 13px; border-radius:14px; border:1px solid color-mix(in srgb, var(--accent) 45%, var(--line)); background:color-mix(in srgb, var(--surface) 92%, transparent); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); box-shadow:var(--shadow, 0 14px 40px -18px rgba(0,0,0,.6)); opacity:0; transform:translateY(8px); transition:opacity .22s, transform .22s; }
.tl-cap.on{ opacity:1; transform:none; }
.tl-cap[hidden]{ display:none; }
.tl-cap-h{ display:flex; align-items:center; gap:8px; }
.tl-cap-k{ font-size:11.5px; font-weight:600; letter-spacing:.02em; padding:2px 8px; border-radius:99px; color:var(--ink-2); background:color-mix(in srgb, var(--up) 16%, transparent); }
.tl-cap-k.k{ background:color-mix(in srgb, var(--down) 16%, transparent); }
.tl-cap-y{ font-family:var(--mono); font-size:12px; color:var(--ink-3); }
.tl-cap-x{ appearance:none; margin-left:auto; display:grid; place-items:center; width:30px; height:30px; border:0; border-radius:8px; background:none; color:var(--ink-3); font-size:13px; cursor:var(--cur-pointer, pointer); }
.tl-cap-x:hover{ color:var(--ink); background:var(--surface-2); }
.tl-cap-x:focus-visible{ outline:2px solid var(--accent); outline-offset:1px; }
.tl-cap-t{ font-family:var(--serif-ko); font-size:17px; font-weight:600; line-height:1.35; color:var(--ink); }
html:lang(en) .tl-cap-t{ font-family:var(--display); }
.tl-cap-s{ font-size:13px; line-height:1.55; color:var(--ink-2); }
.tl-cap-s:empty{ display:none; }
.tl-cap-l{ display:flex; flex-wrap:wrap; gap:5px; align-items:center; }
.tl-cap-p{ appearance:none; font:inherit; font-size:12.5px; line-height:1; padding:6px 9px; border-radius:99px; border:1px solid color-mix(in srgb, var(--c, var(--accent)) 55%, transparent); background:color-mix(in srgb, var(--c, var(--accent)) 12%, var(--surface)); color:var(--ink); cursor:var(--cur-pointer, pointer); }
.tl-cap-p:hover{ background:color-mix(in srgb, var(--c, var(--accent)) 24%, var(--surface)); }
.tl-cap-p:focus-visible{ outline:2px solid var(--accent); outline-offset:1px; }
.tl-cap-more,.tl-cap-none{ font-size:12.5px; color:var(--ink-3); }
@media (pointer:coarse){
  .tl-cap-x{ width:40px; height:40px; }
  .tl-cap-p{ min-height:36px; padding:0 12px; display:inline-flex; align-items:center; }
}
@media (prefers-reduced-motion: reduce){ .tl-era-col{ animation:none; } .tl-cap{ transition:none; } }

/* ═════════ 명예의 전당 2 (hall agent) · site.css 다음에 읽혀 전당의 새 규칙과 덮어쓰는 규칙을 담는다 */

/* ───────── 입장 의식 · 대리석 문간과 청동 문, 빛의 문턱, 긴 방 (테마와 상관없이 늘 어둡다) */
.hx{ position:fixed; inset:0; z-index:1000; overflow:hidden; background:#040405; color:#efe6d2; font-family:var(--sans); color-scheme:dark; transition:opacity 1.4s cubic-bezier(.4,0,.2,1); -webkit-tap-highlight-color:transparent; }
.hx.hx-out{ opacity:0; pointer-events:none; }
.hx.hx-out.hx-fast{ transition-duration:.55s; }
.hx-front{ position:absolute; inset:0; transform-origin:var(--hx-ox,50%) var(--hx-oy,50%); will-change:transform; }
.hx-arrive{ position:absolute; inset:0; transform-origin:var(--hx-ox,50%) var(--hx-oy,50%); animation:hxArrive 2.8s cubic-bezier(.2,.6,.2,1) both; }
@keyframes hxArrive{ from{ opacity:0; transform:scale(1.07); } 45%{ opacity:1; } to{ opacity:1; transform:none; } }
.hx-fbox{ position:absolute; left:0; top:0; width:1600px; height:1000px; transform-origin:0 0; }
.hx-portal{ position:absolute; left:0; top:0; overflow:visible; }
.hx-jn{ fill:none; stroke:#040303; stroke-width:2; opacity:.38; }
.hx-fl{ fill:none; stroke:rgba(255,232,196,.045); stroke-width:1.2; }
.hx-hl{ fill:none; stroke:rgba(255,232,196,.15); stroke-width:1.2; }
.hx-mo{ fill:none; stroke:rgba(0,0,0,.5); stroke-width:1.6; }
.hx-flute{ fill:none; stroke:rgba(0,0,0,.42); stroke-width:1.6; }
.hx-vol{ fill:#2a2520; stroke:rgba(255,232,196,.2); stroke-width:1.2; }
.hx-far{ opacity:.85; }
.hx-dent rect{ fill:#2c2823; }
.hx-ins{ fill:url(#hxGildG); font-family:var(--display); font-size:19px; font-weight:500; text-anchor:middle; }
.hx-ins-s{ fill:#050403; }
.hx-rl{ fill:none; stroke:rgba(214,180,112,.42); stroke-width:1.3; }
.hx-tym ellipse{ fill:rgba(214,180,112,.3); }
.hx-rd{ fill:rgba(214,180,112,.6); }
.hx-edu .hx-rl{ stroke:rgba(200,212,230,.42); }
.hx-edu .hx-tym ellipse{ fill:rgba(200,212,230,.28); }
.hx-halo{ position:absolute; left:470px; top:210px; width:660px; height:680px; border-radius:50%; pointer-events:none; opacity:.5; background:radial-gradient(closest-side, rgba(255,204,134,.2), rgba(255,190,110,.07) 55%, rgba(255,190,110,0)); }
.hx-edu .hx-halo{ background:radial-gradient(closest-side, rgba(214,226,248,.2), rgba(190,206,236,.07) 55%, rgba(190,206,236,0)); }
.hx-spill{ position:absolute; left:560px; top:764px; width:480px; height:300px; pointer-events:none; transform-origin:50% 0; transform:scaleX(.3); opacity:.28; background:radial-gradient(ellipse 50% 100% at 50% 0%, rgba(255,218,156,.62), rgba(255,204,134,.22) 42%, rgba(255,200,130,.06) 70%, rgba(255,200,130,0)); }
.hx-edu .hx-spill{ background:radial-gradient(ellipse 50% 100% at 50% 0%, rgba(230,238,252,.62), rgba(206,218,242,.22) 42%, rgba(200,214,240,.06) 70%, rgba(200,214,240,0)); }
.hx-door{ position:absolute; left:676px; top:318px; width:248px; height:448px; overflow:hidden; perspective:1000px; perspective-origin:50% 50%; background:#060403; cursor:pointer; }
.hx-in,.hx-core,.hx-jl,.hx-jr{ position:absolute; }
.hx-in{ inset:0; }
.hx-core{ inset:0; background:radial-gradient(ellipse 62% 56% at 50% 56%, #fffdf6 0%, #fff0cf 22%, #f6cf8a 47%, #b98542 76%, #4a3014 100%); }
.hx-edu .hx-core{ background:radial-gradient(ellipse 62% 56% at 50% 56%, #ffffff 0%, #f1f5fc 22%, #cfdcee 47%, #8595ae 76%, #2a3242 100%); }
.hx-jl,.hx-jr{ top:0; bottom:0; width:15%; }
.hx-jl{ left:0; background:linear-gradient(90deg, #120e0a, #3b2d1d 70%, rgba(255,222,166,.55)); clip-path:polygon(0 0, 100% 6%, 100% 94%, 0 100%); }
.hx-jr{ right:0; background:linear-gradient(270deg, #120e0a, #3b2d1d 70%, rgba(255,222,166,.55)); clip-path:polygon(0 6%, 100% 0, 100% 100%, 0 94%); }
.hx-leaf{ position:absolute; top:0; bottom:0; width:calc(50% - .8px); will-change:transform; }
.hx-l{ left:0; transform-origin:0 50%; }
.hx-r{ right:0; transform-origin:100% 50%; }
.hx-leaf svg{ display:block; width:100%; height:100%; }
.hx-shade{ position:absolute; inset:0; background:#050302; opacity:0; pointer-events:none; }
.hx-leaf .hx-p0{ stroke:#0a0603; stroke-width:3; }
.hx-leaf rect.hx-p0,.hx-leaf rect.hx-p1{ fill:none; }
.hx-leaf .hx-p1{ stroke:rgba(214,164,98,.34); stroke-width:1; }
.hx-leaf .hx-p2{ stroke:#0a0603; stroke-width:1.2; }
.hx-leaf .hx-rs{ fill:none; stroke:rgba(0,0,0,.65); stroke-width:1.5; }
.hx-leaf .hx-rh{ fill:none; stroke:rgba(228,186,118,.62); stroke-width:1.2; }
.hx-leaf .hx-ring{ fill:none; stroke-width:3.4; }
.hx-leaf .hx-edge{ fill:none; stroke:rgba(255,214,150,.5); stroke-width:1.2; }
.hx-seam{ position:absolute; left:50%; top:.5%; bottom:.5%; width:2px; margin-left:-1px; background:linear-gradient(180deg, rgba(255,243,212,0), #fff3d4 8%, #fffaf0 50%, #fff3d4 92%, rgba(255,243,212,0)); box-shadow:0 0 6px 1px rgba(255,214,150,.9), 0 0 24px 7px rgba(255,190,110,.32); animation:hxSeam 3.8s ease-in-out infinite; }
.hx-edu .hx-seam{ box-shadow:0 0 6px 1px rgba(226,236,252,.9), 0 0 24px 7px rgba(196,212,240,.32); }
@keyframes hxSeam{ 0%,100%{ opacity:.72; } 50%{ opacity:1; } }
.hx-hit .hx-seam{ animation:none; opacity:0; transition:opacity .35s ease; }
.hx-glint{ position:absolute; left:50%; top:260px; width:90px; height:90px; margin:-45px 0 0 -45px; border-radius:50%; pointer-events:none; opacity:0; background:linear-gradient(115deg, rgba(255,247,226,0) 35%, rgba(255,247,226,.95) 50%, rgba(255,247,226,0) 65%) no-repeat; background-size:260% 100%; background-position:120% 0; mix-blend-mode:screen; }
.hx-unlock .hx-glint{ animation:hxGlint .7s ease-out .04s forwards; }
@keyframes hxGlint{ 0%{ opacity:1; background-position:120% 0; } 100%{ opacity:0; background-position:-20% 0; } }
.hx-cv{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }

/* ───────── 수학의 열쇠 · 자물쇠 앞으로 다가가 보는 동안 흐려지지 않도록 확대할 때마다 다시 그린다 */
.hx-front,.hx-leaf{ will-change:auto; }
.hx-bars{ position:absolute; top:0; left:-38.71%; width:138.71%; height:100%; overflow:visible; pointer-events:none; }
.hx-key{ position:absolute; width:0; height:0; pointer-events:none; }
.hk-stage{ position:absolute; left:0; top:0; width:0; height:0; perspective:520px; perspective-origin:0 -300px; transform-origin:0 0; }
.hk-l{ position:absolute; left:-160px; top:-8px; width:320px; height:736px; transform-origin:160px 8px; opacity:0; }
.hk-l svg{ display:block; width:100%; height:100%; overflow:visible; }
.hk-g{ font-family:var(--display); font-size:9.4px; font-weight:600; text-anchor:middle; }
.hk-hole,.hk-flash,.hk-star{ position:absolute; border-radius:50%; pointer-events:none; }
.hk-hole{ left:-15px; top:-15px; width:30px; height:30px; background:radial-gradient(closest-side, rgba(255,251,240,.95), rgba(255,216,150,.6) 36%, rgba(255,190,110,0)); animation:hkHole 2.8s ease-in-out infinite; }
@keyframes hkHole{ 0%,100%{ opacity:.5; transform:scale(.86); } 50%{ opacity:1; transform:scale(1.16); } }
.hx-on .hk-hole{ animation:none; }
.hk-lock{ position:absolute; left:-40px; top:-40px; width:80px; height:80px; opacity:0; filter:drop-shadow(0 0 2px rgba(255,236,196,.95)) drop-shadow(0 0 9px rgba(255,196,110,.75)); }
.hk-lock svg{ display:block; width:100%; height:100%; overflow:visible; }
.hk-flash{ left:-96px; top:-96px; width:192px; height:192px; opacity:0; background:radial-gradient(closest-side, #fffdf5, rgba(255,238,200,.9) 16%, rgba(255,208,134,.36) 44%, rgba(255,190,110,0)); }
.hk-ring{ position:absolute; left:-40px; top:-40px; width:80px; height:80px; border-radius:50%; opacity:0; pointer-events:none; border:1.5px solid rgba(255,238,200,.95); box-shadow:0 0 10px rgba(255,206,130,.8), inset 0 0 8px rgba(255,206,130,.6); }
.hk-ring.r2{ border-width:1px; }
.hx-edu .hk-ring{ border-color:rgba(244,248,255,.95); box-shadow:0 0 10px rgba(200,216,246,.8), inset 0 0 8px rgba(200,216,246,.6); }
.hk-star{ left:-64px; top:-64px; width:128px; height:128px; opacity:0; background:radial-gradient(closest-side, #fff, rgba(255,246,220,.85) 9%, rgba(255,216,150,.26) 28%, rgba(255,216,150,0) 62%); }
.hk-star::before,.hk-star::after{ content:''; position:absolute; left:0; top:50%; width:100%; height:2px; margin-top:-1px; border-radius:2px; background:linear-gradient(90deg, rgba(255,240,206,0), #fff 50%, rgba(255,240,206,0)); }
.hk-star::after{ transform:rotate(90deg); }
.hx-edu .hk-hole{ background:radial-gradient(closest-side, rgba(255,255,255,.95), rgba(214,226,248,.6) 36%, rgba(190,206,236,0)); }
.hx-edu .hk-lock{ filter:drop-shadow(0 0 2px rgba(240,246,255,.95)) drop-shadow(0 0 9px rgba(196,212,244,.75)); }
.hx-edu .hk-flash{ background:radial-gradient(closest-side, #ffffff, rgba(236,242,252,.9) 16%, rgba(200,214,242,.36) 44%, rgba(190,206,236,0)); }
.hx-edu .hk-star{ background:radial-gradient(closest-side, #fff, rgba(240,246,255,.85) 9%, rgba(206,220,246,.26) 28%, rgba(206,220,246,0) 62%); }
.hx-still .hx-key,.hx-still .hx-bars .hx-keep{ display:none; }

/* 시작 전의 글 · 조용한 제목과 하나의 부름 */
.hx-intro{ position:absolute; left:50%; top:72%; width:min(700px, calc(100vw - 32px)); transform:translateX(-50%); display:grid; justify-items:center; gap:10px; text-align:center; transition:opacity .55s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
.hx-intro > *{ animation:hxUp 1.2s cubic-bezier(.2,.7,.2,1) both; animation-delay:calc(.8s + var(--i, 0) * .14s); }
.hx-intro > :nth-child(2){ --i:1; } .hx-intro > :nth-child(3){ --i:2; } .hx-intro > :nth-child(4){ --i:3; }
@keyframes hxUp{ from{ opacity:0; transform:translateY(12px); } to{ opacity:1; transform:none; } }
.hx-on .hx-intro{ opacity:0; transform:translate(-50%, 18px); pointer-events:none; }
.hx-h{ margin:0; font-family:var(--serif-ko); font-weight:600; font-size:clamp(26px, 3vw, 38px); line-height:1.2; letter-spacing:.24em; padding-left:.24em; color:#f3e8cf; text-shadow:0 2px 24px rgba(0,0,0,.85); word-break:keep-all; text-wrap:balance; }
.hx-sub{ margin:0; font-size:clamp(13.5px, 1.15vw, 15px); line-height:1.65; color:#b8a887; max-width:62ch; text-wrap:balance; word-break:keep-all; }
.hx-names{ margin:0; display:flex; flex-wrap:wrap; justify-content:center; gap:3px 14px; font-family:var(--serif-ko); font-size:13px; color:#a39374; }
.hx-names span{ white-space:nowrap; }
.hx-names i{ font-style:normal; font-family:var(--display); font-size:11.5px; color:#caa55f; margin-right:5px; letter-spacing:.05em; }
.hx-edu .hx-names i{ color:#b9c5d8; }
.hx-cta{ display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:10px 24px; margin-top:8px; }
.hx-open{ position:relative; appearance:none; cursor:pointer; display:inline-flex; align-items:center; gap:12px; min-height:52px; padding:0 32px 0 26px; border-radius:999px; border:1px solid rgba(224,188,116,.78); background:radial-gradient(120% 150% at 50% 0%, rgba(234,198,126,.28), rgba(234,198,126,.05) 62%), rgba(14,11,8,.66); color:#faeed2; font:600 16.5px/1 var(--serif-ko); letter-spacing:.16em; box-shadow:inset 0 1px 0 rgba(255,240,210,.3), 0 0 0 5px rgba(224,188,116,.07), 0 18px 44px -16px rgba(0,0,0,.95); transition:transform .25s ease, box-shadow .3s ease, background .3s ease, border-color .3s ease; }
.hx-open::after{ content:''; position:absolute; inset:-6px; border-radius:inherit; pointer-events:none; box-shadow:0 0 0 1px rgba(224,188,116,.22), 0 0 34px rgba(234,198,126,.22); opacity:0; animation:hxBreath 3.8s ease-in-out infinite; }
@keyframes hxBreath{ 0%,100%{ opacity:0; } 50%{ opacity:1; } }
.hx-open svg{ width:21px; height:21px; flex:none; fill:none; stroke:#e8c680; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.hx-open circle{ fill:#e8c680; stroke:none; }
.hx-open:hover{ transform:translateY(-1px); border-color:#f0d08a; background:radial-gradient(120% 150% at 50% 0%, rgba(240,208,138,.4), rgba(240,208,138,.08) 62%), rgba(18,14,10,.7); box-shadow:inset 0 1px 0 rgba(255,240,210,.34), 0 0 0 6px rgba(224,188,116,.1), 0 0 40px rgba(234,198,126,.28), 0 18px 44px -16px rgba(0,0,0,.95); }
.hx-open:active{ transform:translateY(1px); }
.hx-open:focus-visible{ outline:2px solid #f0d08a; outline-offset:5px; }
.hx-edu .hx-open{ border-color:rgba(210,220,236,.75); background:radial-gradient(120% 150% at 50% 0%, rgba(214,226,246,.24), rgba(214,226,246,.04) 62%), rgba(10,11,14,.66); color:#f2f5fb; }
.hx-edu .hx-open svg{ stroke:#d5deec; } .hx-edu .hx-open circle{ fill:#d5deec; }
.hx-quiet{ appearance:none; background:none; border:0; cursor:pointer; min-height:40px; padding:0 4px; color:#a39578; font:inherit; font-size:13.5px; text-decoration:underline; text-underline-offset:4px; text-decoration-color:rgba(163,149,120,.45); transition:color .2s; }
.hx-quiet:hover{ color:#e9dab6; }
.hx-quiet:focus-visible{ outline:2px solid #d8b46a; outline-offset:3px; border-radius:6px; }

/* 벽감마다 이름 · 초상 메달과 로마 숫자, 한 줄 별칭 */
.hx-cap{ position:absolute; left:50%; bottom:max(22px, 5vh); width:min(660px, calc(100vw - 24px)); transform:translateX(-50%); display:flex; justify-content:center; pointer-events:none; opacity:0; transition:opacity .7s ease; }
.hx-inside .hx-cap{ opacity:1; }
.hx-final .hx-cap{ opacity:0; transition-duration:1s; }
.hx-ci{ display:flex; align-items:center; gap:16px; max-width:100%; padding:9px 28px 9px 9px; border-radius:999px; background:linear-gradient(180deg, rgba(16,12,9,.74), rgba(8,7,6,.74)); border:1px solid rgba(224,188,116,.32); box-shadow:0 20px 50px -20px rgba(0,0,0,.9); animation:hxCi .6s cubic-bezier(.2,.7,.2,1) both; }
.hx-ci img{ flex:none; width:60px; height:60px; border-radius:50%; box-shadow:0 0 0 1px rgba(224,188,116,.6), 0 0 26px rgba(255,208,140,.38); }
.hx-edu .hx-ci img{ box-shadow:0 0 0 1px rgba(210,220,236,.6), 0 0 26px rgba(214,226,248,.35); }
.hx-ct{ display:grid; gap:1px; min-width:0; text-align:left; }
.hx-cn{ font-family:var(--display); font-size:13px; letter-spacing:.24em; color:#e0b96c; }
.hx-cn i{ font-style:normal; color:#948262; letter-spacing:.12em; }
.hx-ct b{ font-family:var(--serif-ko); font-weight:600; font-size:clamp(19px, 2.1vw, 25px); line-height:1.25; color:#f8efdb; word-break:keep-all; }
.hx-ct small{ font-size:13.5px; line-height:1.45; color:#cbb892; word-break:keep-all; }
@keyframes hxCi{ from{ opacity:0; transform:translateY(10px) scale(.98); filter:blur(4px); } to{ opacity:1; transform:none; filter:blur(0); } }

/* 마지막 화음 · 큰 제목이 빛 속에서 맺힌다 */
.hx-title{ position:absolute; left:16px; right:16px; top:clamp(44px, 10vh, 118px); text-align:center; pointer-events:none; }
.hx-t-eb,.hx-t-h,.hx-t-s{ margin:0; opacity:0; }
.hx-t-eb{ font-family:var(--display); font-size:clamp(11px, 1.05vw, 14px); letter-spacing:.52em; padding-left:.52em; color:#e6c47c; text-shadow:0 1px 12px rgba(0,0,0,.8); }
.hx-t-h{ margin:.16em 0 .14em; font-family:var(--serif-ko); font-weight:600; font-size:clamp(38px, 7vw, 108px); line-height:1.14; letter-spacing:.14em; padding-left:.14em; word-break:keep-all; text-wrap:balance; background:linear-gradient(180deg, #fffaec 14%, #f3d596 55%, #c49341 100%); -webkit-background-clip:text; background-clip:text; color:transparent; filter:blur(0) drop-shadow(0 0 30px rgba(255,204,128,.5)) drop-shadow(0 4px 12px rgba(0,0,0,.7)); }
.hx-edu .hx-t-h{ background:linear-gradient(180deg, #ffffff 14%, #e3e9f3 55%, #9fadc2 100%); -webkit-background-clip:text; background-clip:text; filter:blur(0) drop-shadow(0 0 30px rgba(214,226,250,.45)) drop-shadow(0 4px 12px rgba(0,0,0,.7)); }
.hx-t-s{ font-family:var(--serif-ko); font-size:clamp(14px, 1.35vw, 18px); letter-spacing:.06em; color:#efe0bf; text-shadow:0 2px 14px rgba(0,0,0,.85); word-break:keep-all; }
.hx-final .hx-t-eb{ animation:hxFade 1.2s ease .15s both; }
.hx-final .hx-t-h{ animation:hxTitle 2.2s cubic-bezier(.16,.7,.2,1) both; }
.hx-final .hx-t-s{ animation:hxFade 1s ease .5s both; }
@keyframes hxFade{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }
@keyframes hxTitle{ from{ opacity:0; transform:scale(1.12); filter:blur(16px) drop-shadow(0 0 30px rgba(255,204,128,0)) drop-shadow(0 4px 12px rgba(0,0,0,0)); } to{ opacity:1; transform:none; filter:blur(0) drop-shadow(0 0 30px rgba(255,204,128,.5)) drop-shadow(0 4px 12px rgba(0,0,0,.7)); } }

/* 건너뛰기 */
.hx-skip{ position:absolute; top:max(14px, env(safe-area-inset-top, 0px)); right:max(14px, env(safe-area-inset-right, 0px)); z-index:5; appearance:none; display:inline-flex; align-items:center; gap:9px; min-height:38px; padding:0 12px 0 16px; border-radius:999px; border:1px solid rgba(224,188,116,.34); background:rgba(10,9,8,.55); color:#c2b08c; font:inherit; font-size:13px; cursor:pointer; opacity:0; visibility:hidden; transition:opacity .5s ease .6s, visibility 0s linear .6s, color .2s, border-color .2s; }
.hx-on .hx-skip{ opacity:1; visibility:visible; transition-delay:.6s, 0s, 0s, 0s; }
.hx-skip kbd{ font-family:var(--mono); font-size:10.5px; line-height:1; padding:3px 5px; border-radius:4px; border:1px solid rgba(224,188,116,.3); color:#978766; }
.hx-skip:hover,.hx-skip:focus-visible{ color:#f5e6c2; border-color:#d8b46a; }
.hx-skip:focus-visible{ outline:2px solid #d8b46a; outline-offset:3px; }
@media (pointer:coarse){ .hx-skip kbd{ display:none; } .hx-skip{ min-height:42px; padding:0 18px; } }

/* 움직임 줄이기 · 문간이 스러지고 모두 불 켜진 방이 떠오른다 */
.hx-still .hx-arrive,.hx-still .hx-intro > *,.hx-still .hx-seam,.hx-still .hx-open::after{ animation:none; }
.hx-still .hx-cv{ opacity:0; transition:opacity 1s ease .25s; }
.hx-still.hx-on .hx-cv{ opacity:1; }
.hx-still.hx-on .hx-front{ opacity:0; transition:opacity .9s ease; }
.hx-still.hx-final .hx-t-eb,.hx-still.hx-final .hx-t-h,.hx-still.hx-final .hx-t-s{ animation:hxFade 1s ease .6s both; }
@media (prefers-reduced-motion: reduce){
  .hx-arrive,.hx-intro > *,.hx-seam,.hx-open::after,.hx-ci{ animation:none !important; }
}

/* 휴대폰 */
@media (max-width:560px){
  .hx-h{ letter-spacing:.16em; padding-left:.16em; }
  .hx-names{ font-size:12px; gap:1px 10px; }
  .hx-names i{ font-size:10.5px; margin-right:4px; }
  .hx-cta{ flex-direction:column; gap:2px; margin-top:6px; }
  .hx-open{ min-height:52px; padding:0 30px 0 24px; font-size:16px; }
  .hx-cap{ bottom:max(18px, 4vh); }
  .hx-ci{ gap:12px; padding:8px 20px 8px 8px; }
  .hx-ci img{ width:50px; height:50px; }
  .hx-ct small{ font-size:12.5px; }
}
@media (max-height:640px){ .hx-names{ display:none; } .hx-sub{ font-size:13px; } }

/* ───────── 연도 글씨 · 메달 아래, 신전, 띠, 금빛 선, 방 머리글에서 더 크고 또렷하게 */
.bay small,.ms-i small,.th-n small{ font-family:'STIX Two Text', var(--serif-ko); font-variant-numeric:lining-nums tabular-nums; letter-spacing:.02em; line-height:1.3; }
.bay small{ font-size:14.5px; font-weight:500; color:color-mix(in srgb, var(--accent) 38%, var(--ink-2)); }
.bay.lit small{ color:color-mix(in srgb, var(--accent) 50%, var(--ink)); }
.ms-i small{ font-size:14px; font-weight:500; color:color-mix(in srgb, var(--accent) 30%, var(--ink-2)); }
.ms-i{ grid-template-columns:minmax(0, 1fr); min-width:0; }
.ms-i b{ font-size:15px; max-width:100%; line-height:1.3; word-break:keep-all; overflow-wrap:anywhere; }
.ms-i small{ max-width:100%; text-align:center; word-break:keep-all; }
.th-n small{ font-size:13px; font-weight:500; color:var(--ink-2); }
.th-c{ font-size:12px; color:var(--ink-2); }
.th-c em{ font-family:'STIX Two Text', var(--mono); font-size:13px; font-weight:500; }
.g-rail i{ width:32px; height:32px; margin:-16px 0 0 -16px; font-size:12.5px; color:var(--ink-2); }
.plaque span{ font-family:var(--sans); font-size:14px; color:var(--ink-2); font-variant-numeric:lining-nums tabular-nums; }
.plaque small{ font-size:15px; }
.lg-works small{ font-family:'STIX Two Text', var(--mono); font-size:13.5px; color:var(--ink-2); font-variant-numeric:lining-nums tabular-nums; }
.room-text .caps{ display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 14px; font-size:13px; }
.room-text .caps .hr-rn{ font-family:var(--display); font-size:14.5px; letter-spacing:.18em; }
.room-text .caps .hr-era{ letter-spacing:.06em; }
.room-text .caps .hr-life{ font-family:'STIX Two Text', var(--sans); font-size:15px; letter-spacing:.02em; text-transform:none; color:var(--ink-2); font-variant-numeric:lining-nums tabular-nums; }
.t-cap.on{ align-items:center; }
.t-cap .tc-p{ width:40px; height:40px; border-radius:50%; box-shadow:0 0 0 1px color-mix(in srgb, var(--accent) 55%, transparent); }
.t-cap .tc-y{ font-family:'STIX Two Text', var(--serif-ko); font-size:15px; color:var(--ink-2); font-variant-numeric:lining-nums tabular-nums; }
@media (max-width:640px){
  .hh-temple .bay small{ font-size:12.5px; }
  .ms-i small{ font-size:12.5px; }
  .ms-i b{ font-size:13.5px; }
  .th-n small{ font-size:12.5px; }
}

/* ───────── 방 · 초상이 선 아치 벽감, 받침의 로마 숫자, 모서리에 걸린 메달 */
.room.has-por .room-art{ gap:18px; }
.ra-stage{ position:relative; width:min(360px, 100%); margin-inline:auto; }
.ra-stage::before{ content:''; position:absolute; inset:-10px; border-radius:50% 50% 20px 20px / 41% 41% 20px 20px; border:1px solid color-mix(in srgb, var(--accent) 34%, transparent); pointer-events:none; }
.ra-niche{ position:relative; isolation:isolate; display:grid; justify-items:center; align-content:start; aspect-ratio:5 / 6; padding:13% 8% 0; overflow:hidden; border-radius:50% 50% 16px 16px / 41.6% 41.6% 16px 16px; background:radial-gradient(ellipse 72% 52% at 50% 10%, color-mix(in srgb, var(--accent) 24%, transparent), transparent 72%), linear-gradient(180deg, color-mix(in srgb, var(--accent) 7%, var(--sunk)), var(--surface-2) 64%, var(--raise)); box-shadow:inset 0 28px 50px -20px rgba(0,0,0,.42), inset 0 0 0 1px color-mix(in srgb, var(--accent) 42%, transparent), 0 44px 80px -44px rgba(0,0,0,.75); }
.ra-light{ position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:.7; background:linear-gradient(180deg, color-mix(in srgb, var(--accent) 20%, transparent), transparent 72%); clip-path:polygon(36% 0, 64% 0, 100% 100%, 0 100%); }
.ra-por{ position:relative; width:86%; aspect-ratio:1; display:grid; place-items:center; }
.ra-por .por-3d{ max-width:100%; }
.ra-flat{ display:block; width:100%; height:auto; border-radius:50%; filter:drop-shadow(0 16px 20px rgba(0,0,0,.3)); }
.ra-plinth{ position:absolute; left:0; right:0; bottom:0; height:15%; display:grid; place-items:center; background:linear-gradient(180deg, color-mix(in srgb, var(--accent) 18%, var(--raise)), var(--surface)); border-top:1px solid color-mix(in srgb, var(--accent) 48%, transparent); box-shadow:0 -14px 26px -14px rgba(0,0,0,.45); }
.ra-plinth i{ font-style:normal; font-family:var(--display); font-size:15px; letter-spacing:.34em; padding-left:.34em; color:var(--accent); }
.room-art .frame.ra-medal{ position:absolute; right:-8%; bottom:1%; width:clamp(104px, 36%, 136px); padding:6px; grid-row:auto; z-index:2; }
.room-art .frame.ra-medal .sheen{ inset:6px; }
.room:nth-of-type(even) .frame.ra-medal{ right:auto; left:-8%; }
.ra-niche.flash{ animation:raFlash 1.6s ease; }
@keyframes raFlash{ 0%,100%{ box-shadow:inset 0 28px 50px -20px rgba(0,0,0,.42), inset 0 0 0 1px color-mix(in srgb, var(--accent) 42%, transparent), 0 44px 80px -44px rgba(0,0,0,.75); } 30%{ box-shadow:inset 0 28px 50px -20px rgba(0,0,0,.42), inset 0 0 0 2px var(--accent), 0 0 44px color-mix(in srgb, var(--accent) 45%, transparent); } }
.room-text .hr-why{ gap:4px; }
.room-text .hr-why:not(.open) > .xpc-t{ display:block; -webkit-line-clamp:unset; line-clamp:none; max-height:calc(1.8em * 3); overflow:hidden; }
.hr-feats .xp-list > .xp-more > .xp-in > .feats{ margin-top:8px; }
.feats[start='4']{ counter-reset:f 3; }
.cls-list[start='2']{ counter-reset:c 1; }
.rt-panel .xp-list > .xp-more > .xp-in > .cls-list{ margin-top:10px; }
.hr-units .xp-in > .chips{ margin-top:6px; }
.room-text .hr-bio{ margin-top:6px; padding:18px 18px 12px; border-radius:14px; border:1px solid var(--line-soft); background:color-mix(in srgb, var(--accent) 3%, var(--surface)); }
.room-text .hr-bio .bio-t{ font-size:19px; line-height:1.2; }
.room-text .hr-bio .bio:lang(en) .bio-t{ font-size:21px; }
.kr-note .xpc-t{ font-size:14px; line-height:1.7; color:var(--ink-2); }
@media (max-width:1100px){
  .room.has-por .room-art{ grid-template-columns:minmax(0, 250px) minmax(0, 1fr); }
  .room.has-por .ra-stage{ grid-row:span 2; width:100%; }
  .room-art .frame.ra-medal{ width:96px; padding:5px; right:-9%; bottom:1%; }
  .room-art .frame.ra-medal .sheen{ inset:5px; }
  .room:nth-of-type(even) .frame.ra-medal{ left:auto; right:-9%; }
}
@media (max-width:640px){
  .room.has-por .room-art{ grid-template-columns:1fr; }
  .room.has-por .ra-stage{ grid-row:auto; width:min(272px, 74vw); }
  .room-art .frame.ra-medal{ width:92px; right:-12%; }
  .room-text .hr-bio{ padding:14px 14px 8px; }
}

/* 내려앉기 · 방과 빛이 스러지는 동안 큰 제목만 페이지의 제목 자리로 옮겨 간다 */
.hx.hx-settle{ background-color:rgba(4,4,5,0); transition:background-color 1.2s ease; }
.hx-settle .hx-cv,.hx-settle .hx-cap,.hx-settle .hx-skip,.hx-settle .hx-t-eb,.hx-settle .hx-t-s,.hx-settle .hx-tback{ opacity:0 !important; transition:opacity 1.1s ease; animation:none; }
.hx-settle .hx-t-h{ animation:none; opacity:1; letter-spacing:.08em; padding-left:.08em; transition:transform 1.3s cubic-bezier(.55,0,.2,1), filter 1.2s ease, letter-spacing 1.3s cubic-bezier(.55,0,.2,1), padding-left 1.3s cubic-bezier(.55,0,.2,1); filter:blur(0) drop-shadow(0 0 30px rgba(255,204,128,0)) drop-shadow(0 4px 12px rgba(0,0,0,0)); }
.hx.hx-out.hx-slow{ transition-duration:1.4s; }
.hx-tback{ position:absolute; left:50%; top:clamp(20px, 7vh, 90px); width:min(1100px, 110vw); height:clamp(170px, 30vh, 300px); transform:translateX(-50%); pointer-events:none; opacity:0; background:radial-gradient(closest-side, rgba(6,5,4,.62), rgba(6,5,4,.3) 55%, rgba(6,5,4,0)); transition:opacity 1.4s ease; }
.hx-final .hx-tback{ opacity:1; }

/* 긴 방 · 글이 길어도 초상은 읽는 동안 곁에 머문다 */
@media (min-width:1101px){
  .room.has-por{ align-items:start; }
  .room.has-por .room-art{ position:sticky; top:calc(var(--hdr, 64px) + 120px); }
}
.hx-vig{ position:absolute; inset:0; pointer-events:none; opacity:0; background:radial-gradient(ellipse 72% 78% at 50% var(--hx-vy, 42%), rgba(2,2,3,0) 34%, rgba(2,2,3,.5) 72%, rgba(2,2,3,.82) 100%); transition:opacity .8s ease; }
.hx-inside .hx-vig{ opacity:1; }
.hx-final .hx-vig{ opacity:.6; transition-duration:1.6s; }
.hx-settle .hx-vig{ opacity:0 !important; transition:opacity 1.1s ease; }

/* 영어 · 라틴 글자는 전시용 세리프로, 자간은 좁게 */
html[lang='en'] .hx-h{ font-family:var(--display); font-weight:500; letter-spacing:.12em; padding-left:.12em; font-size:clamp(28px, 3.2vw, 40px); }
html[lang='en'] .hx-t-h{ font-family:var(--display); font-weight:500; letter-spacing:.05em; padding-left:.05em; }
html[lang='en'] .hx-open{ font-family:var(--display); font-weight:500; font-size:17.5px; letter-spacing:.1em; }
html[lang='en'] .hx-ct b,html[lang='en'] .hx-t-s,html[lang='en'] .hx-names{ font-family:var(--display); }
html[lang='en'] .hx-ct b{ font-weight:500; }
html[lang='en'] .hx-settle .hx-t-h{ letter-spacing:.02em; padding-left:.02em; }
@media (max-height:480px){
  .hx-sub{ display:none; }
  .hx-h{ font-size:22px; }
  .hx-intro{ gap:6px; }
  .hx-cta{ margin-top:2px; flex-direction:row; }
  .hx-open{ min-height:44px; }
  .hx-cap{ bottom:10px; }
  .hx-ci img{ width:44px; height:44px; }
  .hx-ct b{ font-size:18px; }
  .hx-title{ top:14px; }
  .hx-t-h{ font-size:clamp(30px, 5vw, 56px); }
}

/* ───────── 전당 밖의 뜰 · 닫힌 문과 붉은 줄 너머에서 입장을 기다리는 사람들 */
.hall-court{ display:grid; gap:22px; margin-top:clamp(40px,6vw,76px); padding-top:clamp(30px,5vw,56px); border-top:1px solid var(--line-soft); scroll-margin-top:calc(var(--hdr, 64px) + 24px); }
.hall-court .vh.sm h3{ font-family:var(--serif-ko); font-size:clamp(24px,3vw,34px); margin:4px 0 8px; word-break:keep-all; text-wrap:balance; }
.hall-court .vh.sm p{ color:var(--ink-2); max-width:70ch; line-height:1.7; word-break:keep-all; }
.hc-stage{ position:relative; isolation:isolate; padding:clamp(16px,2.6vw,30px) clamp(12px,2.6vw,30px) clamp(20px,3vw,34px); border-radius:20px; border:1px solid var(--line-soft); overflow:hidden; background:radial-gradient(ellipse 58% 42% at 50% 0%, color-mix(in srgb, var(--accent) 15%, transparent), transparent 72%), linear-gradient(180deg, var(--sunk), var(--surface) 42%, var(--surface-2)); }
.hc-stage::before{ content:''; position:absolute; left:0; right:0; bottom:0; height:70%; z-index:-1; pointer-events:none; opacity:.55; background:repeating-linear-gradient(90deg, transparent 0 91px, color-mix(in srgb, var(--line) 60%, transparent) 91px 92px), repeating-linear-gradient(180deg, transparent 0 91px, color-mix(in srgb, var(--line) 45%, transparent) 91px 92px); -webkit-mask-image:linear-gradient(180deg, transparent, #000 26%, #000 72%, transparent); mask-image:linear-gradient(180deg, transparent, #000 26%, #000 72%, transparent); }
.hc-gate{ display:flex; align-items:flex-end; margin:0 calc(-1 * clamp(12px,2.6vw,30px)); }
.hc-rope{ flex:1 1 0; min-width:0; height:66px; margin-bottom:6px; }
.hc-rope.l{ transform:scaleX(-1); }
.hc-door{ flex:none; width:clamp(150px, 19vw, 216px); height:auto; display:block; }
.hc-m1{ fill:var(--raise); stroke:var(--line); stroke-width:1; }
.hc-m2{ fill:var(--surface-2); stroke:var(--line); stroke-width:1; }
.hc-fl{ fill:none; stroke:var(--line); stroke-width:.8; }
.hc-vii{ font-family:var(--display); font-size:10.5px; letter-spacing:.24em; text-anchor:middle; fill:var(--accent); }
.hc-pn{ fill:none; stroke:rgba(227,189,114,.5); stroke-width:.8; }
.hc-kh{ animation:hcKh 3.2s ease-in-out infinite; }
@keyframes hcKh{ 0%,100%{ opacity:.45; } 50%{ opacity:1; } }
.hc-rp{ fill:none; stroke:#7a1521; stroke-width:5.2; stroke-linecap:round; }
.hc-rh{ fill:none; stroke:#c8505a; stroke-width:1.3; stroke-linecap:round; opacity:.75; }
.hc-pb{ fill:rgba(0,0,0,.26); }
.hc-sign{ display:flex; justify-content:center; margin:12px 0 0; }
.hc-sign span{ font-family:var(--serif-ko); font-size:12.5px; letter-spacing:.34em; padding:5px 14px 5px calc(14px + .34em); border:1px solid color-mix(in srgb, var(--accent) 55%, transparent); border-radius:4px; color:var(--accent); background:color-mix(in srgb, var(--accent) 7%, var(--surface)); box-shadow:inset 0 1px 0 color-mix(in srgb, #fff 16%, transparent); }
html[lang='en'] .hc-sign span{ font-family:var(--display); letter-spacing:.24em; padding-left:calc(14px + .24em); }
.hc-bar{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px 18px; margin:20px 0 16px; }
.hc-sum{ display:flex; flex-wrap:wrap; gap:4px 18px; margin:0; font-size:13.5px; color:var(--ink-2); }
.hc-sum b{ margin-left:5px; color:var(--accent); font-weight:600; }
.hc-tools{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; }
.hc-seg{ display:inline-flex; padding:3px; border-radius:999px; border:1px solid var(--line-soft); background:var(--sunk); }
.hc-seg button{ appearance:none; border:0; background:none; font:inherit; font-size:13px; color:var(--ink-2); padding:0 14px; min-height:32px; border-radius:999px; cursor:pointer; transition:background .2s, color .2s; }
.hc-seg button[aria-pressed='true']{ background:var(--surface); color:var(--ink); box-shadow:0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent), 0 4px 10px -6px rgba(0,0,0,.4); }
.hc-reset{ appearance:none; border:0; background:none; font:inherit; font-size:13px; color:var(--ink-3); min-height:32px; padding:0 4px; text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
.hc-reset:hover{ color:var(--ink); }
.hc-q{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill, minmax(196px, 1fr)); gap:16px; }
.hc-c{ position:relative; display:flex; flex-direction:column; align-items:center; gap:3px; min-width:0; text-align:center; padding:16px 14px 14px; border-radius:16px; border:1px solid var(--line-soft); background:linear-gradient(180deg, color-mix(in srgb, var(--accent) 6%, var(--surface)), var(--surface) 60%); box-shadow:0 22px 38px -32px rgba(0,0,0,.7); transition:border-color .3s ease, box-shadow .3s ease; }
.hc-c.on{ border-color:color-mix(in srgb, var(--accent) 52%, var(--line-soft)); box-shadow:0 0 0 1px color-mix(in srgb, var(--accent) 22%, transparent), 0 22px 38px -30px rgba(0,0,0,.7); }
.hc-no{ position:absolute; top:10px; left:12px; font-family:var(--display); font-size:12px; letter-spacing:.06em; color:var(--ink-3); font-variant-numeric:lining-nums tabular-nums; }
.hc-fig{ appearance:none; border:0; background:none; padding:6px 6px 0; margin:0; cursor:pointer; display:flex; flex-direction:column; align-items:center; border-radius:18px; color:inherit; }
.hc-bob{ display:block; width:96px; height:96px; transform-origin:50% 90%; animation:hcBob 6.4s ease-in-out infinite; animation-delay:calc(var(--i, 0) * -.83s); }
.hc-bob svg{ display:block; width:100%; height:100%; border-radius:50%; filter:drop-shadow(0 8px 10px rgba(0,0,0,.3)); }
.hc-sh{ display:block; width:64px; height:9px; margin-top:7px; border-radius:50%; background:radial-gradient(closest-side, rgba(0,0,0,.34), rgba(0,0,0,0)); animation:hcShd 6.4s ease-in-out infinite; animation-delay:calc(var(--i, 0) * -.83s); }
@keyframes hcBob{ 0%,100%{ transform:translateY(0) rotate(0deg); } 30%{ transform:translateY(-4px) rotate(-1.6deg); } 65%{ transform:translateY(-1px) rotate(1.2deg); } }
@keyframes hcShd{ 0%,100%{ transform:scaleX(1); opacity:1; } 30%{ transform:scaleX(.84); opacity:.68; } 65%{ transform:scaleX(.96); opacity:.9; } }
.hc-fig:hover .hc-bob svg{ filter:drop-shadow(0 8px 10px rgba(0,0,0,.3)) drop-shadow(0 0 12px color-mix(in srgb, var(--accent) 45%, transparent)); }
.hc-ini{ font-family:var(--display); font-size:40px; font-weight:600; text-anchor:middle; }
.hc-ini.two{ font-size:29px; letter-spacing:-.02em; }
.hc-n{ margin-top:6px; font-family:var(--serif-ko); font-size:17px; font-weight:600; line-height:1.3; word-break:keep-all; }
html[lang='en'] .hc-n{ font-family:var(--display); font-weight:500; font-size:18px; }
.hc-n a{ color:var(--ink); text-decoration:none; }
.hc-n a:hover{ color:var(--accent); }
.hc-y{ font-family:'STIX Two Text', var(--serif-ko); font-size:14px; color:var(--ink-2); font-variant-numeric:lining-nums tabular-nums; }
.hc-why{ margin:6px 0 2px; font-size:13.5px; line-height:1.6; color:var(--ink-2); word-break:keep-all; text-wrap:pretty; }
.hc-v{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:6px 10px; margin-top:auto; padding-top:10px; }
.hc-vb{ appearance:none; display:inline-flex; align-items:center; gap:6px; min-height:34px; padding:0 14px 0 11px; border-radius:999px; border:1px solid color-mix(in srgb, var(--accent) 55%, var(--line)); background:color-mix(in srgb, var(--accent) 8%, var(--surface)); color:var(--ink); font:inherit; font-size:13px; cursor:pointer; transition:background .2s, border-color .2s, transform .15s; }
.hc-vb:hover{ background:color-mix(in srgb, var(--accent) 16%, var(--surface)); border-color:var(--accent); }
.hc-vb:active{ transform:scale(.97); }
.hc-vb svg{ width:15px; height:15px; flex:none; fill:none; stroke:var(--accent); stroke-width:1.6; stroke-linejoin:round; }
.hc-c.on .hc-vb svg{ fill:var(--accent); }
.hc-t{ font-family:var(--mono); font-size:12.5px; color:var(--accent); white-space:nowrap; }
.hc-t.pop{ animation:hcPop .5s cubic-bezier(.2,.8,.2,1.3); }
@keyframes hcPop{ from{ transform:scale(1.6); opacity:.3; } to{ transform:none; opacity:1; } }
.hc-c.cheer .hc-bob{ animation:hcCheer .7s cubic-bezier(.2,.8,.2,1), hcBob 6.4s ease-in-out .7s infinite; }
@keyframes hcCheer{ 0%{ transform:none; } 35%{ transform:translateY(-10px) scale(1.05); } 100%{ transform:none; } }
.hc-q.re .hc-c{ animation:hcIn .45s cubic-bezier(.2,.7,.2,1) both; }
@keyframes hcIn{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
.hc-fig:focus-visible,.hc-vb:focus-visible,.hc-seg button:focus-visible,.hc-reset:focus-visible,.hc-n a:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
@media (max-width:640px){
  .hc-q{ grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px; }
  .hc-c{ padding:14px 9px 12px; border-radius:14px; }
  .hc-no{ top:8px; left:10px; font-size:11px; }
  .hc-bob{ width:76px; height:76px; }
  .hc-sh{ width:52px; }
  .hc-n{ font-size:15.5px; }
  html[lang='en'] .hc-n{ font-size:16.5px; }
  .hc-y{ font-size:13px; }
  .hc-why{ font-size:12.5px; line-height:1.55; }
  .hc-vb{ padding:0 12px 0 9px; font-size:12.5px; }
  .hc-bar{ margin:16px 0 12px; }
  .hc-rope{ height:56px; }
}
@media (pointer:coarse){ .hc-vb{ min-height:42px; } .hc-seg button{ min-height:40px; } .hc-reset{ min-height:40px; } }
@media (prefers-reduced-motion: reduce){ .hc-bob,.hc-sh,.hc-kh,.hc-t.pop,.hc-c.cheer .hc-bob,.hc-q.re .hc-c{ animation:none !important; } }

/* ───────── 수학사 공방 */
.at{ --at-gut:24px; --at-gold:var(--accent); --at-card-r:18px; --at-shelf:color-mix(in srgb, var(--surface) 82%, var(--accent) 3%); position:relative; display:block; }
.at *{ -webkit-tap-highlight-color:transparent; }
.at svg{ flex:none; }
.at .btn svg,.at .at-ib svg,.at-sheet .btn svg,.at-pk .btn svg{ width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.at .btn[aria-busy='true'],.at-sheet .btn[aria-busy='true'],.at-pk .btn[aria-busy='true']{ opacity:.7; cursor:progress; }
.at .btn[aria-busy='true'] svg,.at .at-ib[aria-busy='true'] svg,.at-sheet .btn[aria-busy='true'] svg{ animation:at-spin 1s linear infinite; }
@keyframes at-spin{ to{ transform:rotate(360deg); } }

/* 차례 */
.at-nav{ position:sticky; top:var(--hdr,64px); z-index:40; margin:4px calc(-1 * var(--at-gut)) 8px; padding:10px var(--at-gut); background:var(--glass); backdrop-filter:blur(14px) saturate(1.2); -webkit-backdrop-filter:blur(14px) saturate(1.2); border-bottom:1px solid var(--line-soft); }
.at-nav-in{ display:flex; gap:6px; overflow-x:auto; scrollbar-width:none; overscroll-behavior-x:contain; scroll-padding:0 var(--at-gut); }
.at-nav-in::-webkit-scrollbar{ display:none; }
.at-nav a{ display:inline-flex; align-items:center; gap:8px; min-height:38px; padding:6px 14px 6px 8px; border-radius:999px; border:1px solid var(--line); background:var(--surface); color:var(--ink-2); font-size:13.5px; text-decoration:none; white-space:nowrap; transition:border-color .2s ease, color .2s ease, background .2s ease; }
.at-nav a b{ display:grid; place-items:center; min-width:26px; height:24px; padding:0 5px; border-radius:999px; font-family:var(--mono); font-size:11px; font-weight:500; color:var(--accent); background:var(--accent-soft); letter-spacing:.02em; }
.at-nav a:hover{ color:var(--ink); border-color:color-mix(in srgb, var(--accent) 60%, var(--line)); }
.at-nav a[aria-current]{ color:var(--accent-ink); background:var(--accent); border-color:var(--accent); }
.at-nav a[aria-current] b{ background:color-mix(in srgb, var(--accent-ink) 16%, transparent); color:var(--accent-ink); }

/* 섹션 */
.at-sec{ position:relative; padding:64px 0 8px; scroll-margin-top:calc(var(--hdr,64px) + 60px); }
.at-sec + .at-sec{ border-top:1px solid var(--line-soft); }
.at-sh{ display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:end; column-gap:26px; row-gap:16px; margin-bottom:34px; }
.at-no{ align-self:start; font-family:var(--display); font-size:64px; line-height:.86; font-weight:500; color:transparent; -webkit-text-stroke:1px color-mix(in srgb, var(--accent) 75%, transparent); letter-spacing:-.02em; font-variant-numeric:lining-nums; }
.at-sh-t{ display:grid; gap:6px; min-width:0; }
.at-sh h3{ font-family:var(--serif-ko); font-size:clamp(22px,2.4vw,28px); line-height:1.25; }
.at-intro{ color:var(--ink-2); font-size:15px; line-height:1.72; max-width:66ch; }
.at-acts{ display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-end; }
.at-acts .btn{ min-height:38px; }
.at-body{ position:relative; }
.at-pending{ background:linear-gradient(90deg, transparent, color-mix(in srgb, var(--ink) 3%, transparent), transparent) 0 0/200% 100%; border-radius:var(--at-card-r); animation:at-shim 1.8s linear infinite; }
@keyframes at-shim{ to{ background-position:-200% 0; } }
.at-note{ margin-top:18px; font-size:12.5px; color:var(--ink-3); }

/* 아이콘 단추 */
.at-ib{ appearance:none; display:inline-grid; place-items:center; width:34px; height:34px; flex:none; border-radius:10px; border:1px solid var(--line); background:var(--surface); color:var(--ink-2); cursor:pointer; transition:border-color .2s ease, color .2s ease, background .2s ease; }
.at-ib:hover{ color:var(--accent); border-color:var(--accent); background:var(--accent-soft); }

/* 스티커 */
.at-stg{ display:grid; grid-template-columns:repeat(auto-fill, minmax(168px, 1fr)); gap:18px; }
.at-st{ position:relative; min-width:0; display:grid; gap:4px; padding:10px 10px 8px; border-radius:var(--at-card-r); background:var(--at-shelf); border:1px solid var(--line-soft); transition:transform .35s cubic-bezier(.2,.7,.2,1), border-color .25s ease, box-shadow .35s ease; }
.at-st:hover{ transform:translateY(-4px); border-color:color-mix(in srgb, var(--accent) 45%, var(--line)); box-shadow:var(--shadow); }
.at-st-b{ appearance:none; display:block; width:100%; padding:0; border:0; background:none; cursor:zoom-in; border-radius:12px; }
.at-st-im{ position:relative; display:block; aspect-ratio:1; border-radius:12px; overflow:hidden; }
.at-st:not(.on) .at-st-im{ background:radial-gradient(circle at 50% 46%, color-mix(in srgb, var(--ink) 7%, transparent) 0 42%, transparent 43%), linear-gradient(90deg, transparent, color-mix(in srgb, var(--ink) 4%, transparent), transparent) 0 0/200% 100%; animation:at-shim 1.6s linear infinite; }
.at-st-im img{ display:block; width:100%; height:100%; object-fit:contain; transform-origin:50% 60%; transition:transform .45s cubic-bezier(.3,1.5,.5,1); animation:at-pop .5s cubic-bezier(.3,1.4,.5,1) both; }
@keyframes at-pop{ from{ opacity:0; transform:scale(.86) rotate(-3deg); } }
.at-st:hover .at-st-im img{ transform:rotate(-4deg) scale(1.05); }
.at-st:nth-child(even):hover .at-st-im img{ transform:rotate(4deg) scale(1.05); }
.at-st-f{ display:flex; align-items:center; gap:8px; min-height:34px; padding-left:4px; }
.at-st-n b{ margin-right:7px; font-family:var(--mono); font-size:11px; font-weight:500; color:var(--accent); }
.at-st-n{ flex:1; min-width:0; font-size:13.5px; color:var(--ink-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.at-stg-theo{ grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); }

/* 시트 안의 큰 보기 */
.at-sheet{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:24px; align-items:center; }
.at-sheet-art{ border-radius:16px; background:radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 70%), var(--sunk); padding:14px; }
.at-sheet-art img{ display:block; width:100%; height:auto; }
.at-sheet-t{ display:grid; gap:10px; align-content:center; }
.at-sheet-t h4{ font-family:var(--serif-ko); font-size:24px; line-height:1.3; }
.at-sheet-t p:not(.eyebrow){ color:var(--ink-2); line-height:1.72; }
.at-sheet-acts{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; margin-top:6px; }
.at-sheet-meta{ font-family:var(--mono); font-size:12px; color:var(--ink-3); }

@media (max-width:720px){
  .at-nav{ margin:0 calc(-1 * var(--at-gut)) 4px; padding:8px var(--at-gut); }
  .at-sec{ padding-top:46px; scroll-margin-top:calc(var(--hdr,64px) + 54px); }
  .at-sh{ grid-template-columns:minmax(0,1fr); row-gap:12px; margin-bottom:24px; }
  .at-no{ font-size:44px; }
  .at-acts{ justify-content:flex-start; }
  .at-stg,.at-stg-theo{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px; }
  .at-st{ padding:8px 8px 6px; }
  .at-sheet{ grid-template-columns:minmax(0,1fr); gap:14px; }
  .at-sheet-art{ max-width:320px; justify-self:center; width:100%; }
}
@media (pointer:coarse){
  .at-ib{ width:40px; height:40px; }
  .at-nav a{ min-height:40px; }
  .at-acts .btn,.at-sheet-acts .btn{ min-height:40px; }
}
@media (prefers-reduced-motion: reduce){
  .at *,.at *::before,.at *::after{ animation:none !important; transition:none !important; }
}

/* 포토카드 */
.at-deck{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; margin:-6px 0 28px; padding:12px 16px; border:1px solid var(--line-soft); border-radius:14px; background:var(--at-shelf); font-size:13.5px; color:var(--ink-2); }
.at-deck-l{ font-weight:500; color:var(--ink); }
.at-deck-dots{ display:flex; gap:4px; }
.at-deck-dots i{ width:9px; height:14px; border-radius:2.5px; border:1px solid var(--line); }
.at-deck-dots i.on{ background:var(--c); border-color:var(--c); box-shadow:0 0 8px -2px var(--c); }
.at-deck-n{ font-family:var(--mono); font-weight:500; color:var(--accent); }
.at-deck-h{ color:var(--ink-3); font-size:12.5px; }
.at-cards{ display:grid; grid-template-columns:repeat(auto-fill, minmax(204px, 1fr)); gap:34px 26px; }
.at-cw{ min-width:0; display:grid; gap:12px; align-content:start; }
.at-card{ --px:50%; --py:50%; --rx:0deg; --ry:0deg; --hov:0; position:relative; aspect-ratio:55/85; perspective:1200px; cursor:pointer; border-radius:5.4% / 3.5%; container-type:inline-size; outline-offset:5px; }
.at-card-t,.at-card-in{ position:absolute; inset:0; border-radius:inherit; transform-style:preserve-3d; }
.at-card-t{ transform:rotateX(var(--rx)) rotateY(var(--ry)) translateZ(0); transition:transform .25s ease-out; }
.at-card:not(:hover) .at-card-t{ transition:transform .6s cubic-bezier(.2,.8,.2,1); }
.at-card-in{ transition:transform .75s cubic-bezier(.25,.8,.25,1); }
.at-card.is-flip .at-card-in{ transform:rotateY(180deg); }
.at-cf,.at-cbk{ position:absolute; inset:0; border-radius:inherit; overflow:hidden; backface-visibility:hidden; -webkit-backface-visibility:hidden; box-shadow:0 22px 40px -22px rgba(0,0,0,.6), 0 3px 8px -2px rgba(0,0,0,.25); }
.at-cf{ background:linear-gradient(var(--ca), var(--cb)); }
.at-card:not(.on) .at-cf::after{ content:''; position:absolute; inset:0; background:linear-gradient(100deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%) 0 0/250% 100%; animation:at-shim 1.4s linear infinite; }
.at-cf canvas{ display:block; width:100%; height:100%; }
.at-holo,.at-glare{ position:absolute; inset:0; pointer-events:none; border-radius:inherit; }
.at-holo{ mix-blend-mode:color-dodge; opacity:calc(.06 + var(--hov) * .26); background:linear-gradient(115deg, transparent 18%, rgba(255,90,150,.55) 30%, rgba(255,210,80,.5) 38%, rgba(80,240,150,.5) 46%, rgba(70,190,255,.55) 54%, rgba(160,110,255,.55) 62%, rgba(255,90,150,.55) 70%, transparent 82%); background-size:260% 260%; background-position:var(--px) var(--py); transition:opacity .35s ease; }
.at-glare{ mix-blend-mode:soft-light; opacity:calc(var(--hov) * .8); background:radial-gradient(circle at var(--px) var(--py), rgba(255,255,255,.9), rgba(255,255,255,0) 48%); transition:opacity .35s ease; }
.at-card:hover .at-cf,.at-card:focus-visible .at-cf{ box-shadow:0 34px 60px -26px rgba(0,0,0,.7), 0 0 0 1px color-mix(in srgb, var(--accent) 40%, transparent); }
@media (hover:none){ .at-holo{ opacity:.26; animation:at-holo 6s ease-in-out infinite; } }
@keyframes at-holo{ 0%,100%{ background-position:0% 0%; } 50%{ background-position:100% 100%; } }
.at-cbk{ --accent:#dcc07e; justify-content:flex-start; --accent-ink:#1a140a; --accent-soft:rgba(220,192,126,.16); --surface:color-mix(in srgb, var(--cd) 82%, #000); --line:rgba(220,192,126,.4); --ink:#fbf3e2; --ink-2:rgba(251,243,226,.84); --ink-3:rgba(251,243,226,.6);
  transform:rotateY(180deg); display:flex; flex-direction:column; align-items:center; gap:2.6cqw; padding:8.5cqw 8cqw 7cqw; text-align:center; color:var(--ink); font-size:4.3cqw; line-height:1.4;
  background:radial-gradient(130% 60% at 50% 0%, color-mix(in srgb, var(--cd) 62%, var(--cb)), var(--cd) 62%), var(--cd); }
.at-cbk::before{ content:''; position:absolute; inset:3.2cqw; border:1px solid rgba(220,192,126,.62); border-radius:3.6cqw; pointer-events:none; }
.at-cbk::after{ content:''; position:absolute; inset:4.6cqw; border:1px solid rgba(220,192,126,.24); border-radius:2.6cqw; pointer-events:none; }
.at-cb-top{ position:relative; width:100%; display:flex; justify-content:space-between; font-family:var(--display); font-size:3.8cqw; letter-spacing:.22em; color:var(--accent); }
.at-cb-ini{ font-family:var(--display); font-size:12cqw; margin-top:1cqw; line-height:1.05; color:var(--accent); text-shadow:0 0 18px rgba(220,192,126,.35); }
.at-cb-n button{ appearance:none; padding:0; border:0; background:none; color:var(--ink); font-family:var(--serif-ko); font-weight:700; font-size:7.4cqw; line-height:1.2; cursor:pointer; text-decoration:underline; text-decoration-color:transparent; text-underline-offset:3px; transition:text-decoration-color .2s; }
.at-cb-n button:hover{ text-decoration-color:var(--accent); }
.at-cb-e{ color:var(--accent); font-size:4.2cqw; margin-top:-1cqw; }
.at-cb-bio{ width:100%; margin:1.5cqw 0 .5cqw; }
.at-cb-bio .bio-line{ font-size:3.9cqw; column-gap:1.5cqw; }
.at-cb-bio .bl-y{ font-size:3.6cqw; }
.at-cb-bio .bl-dot{ width:8cqw; height:8cqw; margin-bottom:1.2cqw; }
.at-cb-bio .bl-dot .bio-g{ width:4.4cqw; height:4.4cqw; }
.at-cb-bio .bl-track{ top:4cqw; }
.at-cb-f{ width:100%; display:grid; gap:2.4cqw; text-align:left; font-size:4.3cqw; line-height:1.42; counter-reset:none; }
.at-cb-f li{ display:grid; grid-template-columns:7cqw minmax(0,1fr); align-items:baseline; }
.at-cb-f b{ font-family:var(--display); font-weight:600; color:var(--accent); font-size:4.2cqw; }
.at-cb-f span{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; color:var(--ink-2); }
.at-cb-q{ margin-top:auto; font-family:var(--serif-ko); font-size:4cqw; line-height:1.5; color:var(--ink-3); display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.at-cb-sig{ font-family:var(--display); font-style:italic; font-size:4.8cqw; color:var(--accent); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
.at-cw-f{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.at-cw-n{ min-width:0; display:flex; align-items:baseline; gap:8px; font-size:14px; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.at-cw-n b{ font-family:var(--mono); font-size:11.5px; font-weight:500; color:var(--accent); }
.at-cw-a{ display:flex; gap:6px; flex:none; }
.at-tb{ appearance:none; display:inline-flex; align-items:center; gap:4px; height:30px; padding:0 9px 0 7px; border-radius:8px; border:1px solid var(--line); background:var(--surface); color:var(--ink-2); font-size:12.5px; cursor:pointer; transition:border-color .2s ease, color .2s ease; }
.at-tb svg{ width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.at-tb:hover{ color:var(--accent); border-color:var(--accent); }
.at-tb[aria-busy='true'] svg{ animation:at-spin 1s linear infinite; }

/* 카드 뽑기 */
body.at-pk-open{ overflow:hidden; }
.at-pk{ position:fixed; inset:0; z-index:950; display:grid; place-items:center; overflow:auto; }
.at-pk-bg{ position:fixed; inset:0; background:radial-gradient(circle at 50% 42%, rgba(52,40,20,.9), rgba(5,7,11,.96) 70%); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); opacity:0; transition:opacity .3s ease; }
.at-pk.on .at-pk-bg{ opacity:1; }
.at-pk-in{ position:relative; display:grid; justify-items:center; gap:16px; width:min(460px, 100%); padding:30px 16px calc(24px + env(safe-area-inset-bottom,0px)); color:#f1e8d4; opacity:0; transform:translateY(14px); transition:opacity .35s ease, transform .45s cubic-bezier(.2,.8,.2,1); }
.at-pk.on .at-pk-in{ opacity:1; transform:none; }
.at-pk-eb{ font-family:var(--display); font-style:italic; font-size:15px; color:#d6b36a; }
.at-pk-stage{ position:relative; width:min(290px, 62vw, 44vh); aspect-ratio:55/85; margin:18px 0 8px; }
.at-pk-rays{ position:absolute; left:50%; top:50%; width:260%; aspect-ratio:1; translate:-50% -50%; border-radius:50%; background:repeating-conic-gradient(rgba(255,224,150,0) 0deg 7deg, rgba(255,224,150,.2) 7deg 11deg); -webkit-mask:radial-gradient(circle, #000 18%, transparent 62%); mask:radial-gradient(circle, #000 18%, transparent 62%); opacity:0; scale:.5; transition:opacity .6s ease, scale 1s cubic-bezier(.2,.8,.2,1); animation:at-spin 24s linear infinite; pointer-events:none; }
.at-pk-stage.torn .at-pk-rays{ opacity:1; scale:1; }
.at-pk-stage::before{ content:''; position:absolute; left:50%; top:50%; width:150%; aspect-ratio:1; translate:-50% -50%; border-radius:50%; background:radial-gradient(circle, rgba(255,236,190,.55), rgba(255,210,120,0) 62%); opacity:0; transition:opacity .5s ease; pointer-events:none; }
.at-pk-stage.torn::before{ opacity:1; }
.at-pk-sparks{ position:absolute; left:50%; top:50%; width:0; height:0; pointer-events:none; }
.at-pk-sparks i{ position:absolute; left:-7px; top:-7px; width:14px; height:14px; background:#ffe7a6; clip-path:polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%); opacity:0; }
.at-pk-stage.torn .at-pk-sparks i{ animation:at-spark 1.3s cubic-bezier(.15,.7,.3,1) forwards; }
@keyframes at-spark{ 0%{ opacity:0; transform:rotate(var(--a)) translateY(0) scale(.2); } 18%{ opacity:1; } 100%{ opacity:0; transform:rotate(var(--a)) translateY(calc(-1 * var(--d))) scale(var(--s)); } }
.at-pk-card{ position:absolute; inset:0; opacity:0; transform:translateY(10%) scale(.9); transition:opacity .45s ease, transform .9s cubic-bezier(.2,.9,.25,1.12); }
.at-pk-stage.reveal .at-pk-card{ opacity:1; transform:none; }
.at-pk-pack{ position:absolute; inset:-5% -9%; appearance:none; padding:0; border:0; border-radius:16px; cursor:pointer; overflow:hidden; color:#ecd9a2; background:linear-gradient(150deg, #313a60, #151a2d 55%, #3a2742); box-shadow:0 34px 70px -24px rgba(0,0,0,.85), inset 0 0 0 1px rgba(214,179,106,.55), inset 0 0 0 6px rgba(214,179,106,.08); animation:at-wob 2.6s ease-in-out infinite; transition:transform .7s cubic-bezier(.5,0,.75,.3), opacity .55s ease; }
.at-pk-pack::before{ content:''; position:absolute; inset:0; background:linear-gradient(115deg, transparent 25%, rgba(255,120,170,.35) 38%, rgba(255,230,130,.35) 46%, rgba(120,255,190,.35) 54%, rgba(120,200,255,.35) 62%, transparent 75%) 0 0/260% 260%; mix-blend-mode:screen; animation:at-holo 4s ease-in-out infinite; }
.at-pk-pack::after{ content:''; position:absolute; inset:0; background:repeating-linear-gradient(45deg, rgba(255,255,255,.03) 0 2px, transparent 2px 9px); }
.at-pk-pack:focus-visible{ outline:2px solid #d6b36a; outline-offset:4px; }
@keyframes at-wob{ 0%,100%{ transform:rotate(-1.4deg) translateY(0); } 50%{ transform:rotate(1.4deg) translateY(-6px); } }
.at-pk-top{ position:absolute; z-index:2; left:0; right:0; top:0; height:13%; background:repeating-linear-gradient(90deg, #d6b36a 0 7px, #b48d3f 7px 14px); border-bottom:2px dashed rgba(20,14,4,.45); transition:transform .55s cubic-bezier(.3,.6,.4,1), opacity .5s ease; }
.at-pk-face{ position:absolute; z-index:2; inset:13% 0 0; display:grid; place-content:center; justify-items:center; gap:8px; text-align:center; padding:0 12px; }
.at-pk-face svg{ width:60px; height:60px; fill:none; stroke:#d6b36a; stroke-width:1.3; }
.at-pk-face b{ font-family:var(--display); font-weight:600; font-size:21px; letter-spacing:.32em; padding-left:.32em; }
.at-pk-face small{ font-size:13.5px; color:#f1e8d4; }
.at-pk-face em{ font-style:normal; font-size:12px; color:rgba(241,232,212,.6); }
.at-pk-stage.torn .at-pk-top{ transform:translate(34%, -150%) rotate(22deg); opacity:0; }
.at-pk-stage.reveal .at-pk-pack{ transform:translateY(78%) scale(.92); opacity:0; pointer-events:none; animation:none; }
.at-pk-msg{ min-height:1.7em; text-align:center; font-size:15px; line-height:1.6; color:#eae0cb; }
.at-pk-msg strong{ font-family:var(--serif-ko); font-size:17px; color:#fff6e2; }
.at-pk-new{ display:inline-block; padding:1px 8px; margin-right:4px; border-radius:999px; background:#d6b36a; color:#1a140a; font-size:11.5px; letter-spacing:.1em; vertical-align:2px; }
.at-pk-acts{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px; visibility:hidden; opacity:0; transition:opacity .4s ease; }
.at-pk.done .at-pk-acts{ visibility:visible; opacity:1; }
.at-pk-acts .btn{ min-height:40px; }
.at-pk-x{ position:absolute; top:6px; right:8px; width:40px; height:40px; display:grid; place-items:center; appearance:none; border:1px solid rgba(214,179,106,.4); border-radius:50%; background:rgba(10,12,18,.5); color:#f1e8d4; cursor:pointer; }
.at-pk-x svg{ width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; }
@media (max-width:720px){
  .at-cards{ grid-auto-flow:column; grid-template-columns:none; grid-auto-columns:66%; overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory; margin:0 calc(-1 * var(--at-gut)); padding:8px var(--at-gut) 20px; scroll-padding-inline:var(--at-gut); gap:18px; scrollbar-width:none; }
  .at-cards::-webkit-scrollbar{ display:none; }
  .at-cw{ scroll-snap-align:center; }
  .at-deck{ margin-top:-4px; }
}
@media (pointer:coarse){ .at-tb{ height:40px; padding:0 12px 0 10px; } }
@media (prefers-reduced-motion: reduce){ .at-pk *,.at-pk *::before,.at-pk *::after{ animation:none !important; transition:none !important; } }

/* 소제목 */
.at-sub{ display:flex; align-items:center; gap:14px; margin:6px 0 18px; font-family:var(--sans); font-size:13px; font-weight:500; letter-spacing:.04em; color:var(--ink-2); }
.at-sub::after{ content:''; flex:1; height:1px; background:linear-gradient(90deg, var(--line), transparent); }
.at-sub span::before{ content:''; display:inline-block; width:6px; height:6px; margin-right:9px; border-radius:50%; background:var(--accent); vertical-align:2px; }
.at-subp{ margin:-8px 0 20px; max-width:70ch; font-size:13.5px; line-height:1.7; color:var(--ink-3); }

/* 메달 */
.at-mdg .at-sub:not(:first-child){ margin-top:34px; }
.at-mds{ display:grid; grid-template-columns:repeat(7, minmax(0,1fr)); gap:18px 14px; }
.at-md{ position:relative; min-width:0; display:grid; justify-items:center; gap:10px; padding:16px 10px 12px; border-radius:var(--at-card-r); background:var(--at-shelf); border:1px solid var(--line-soft); text-align:center; transition:transform .35s cubic-bezier(.2,.7,.2,1), border-color .25s ease; }
.at-md:hover{ transform:translateY(-3px); border-color:color-mix(in srgb, var(--accent) 45%, var(--line)); }
.at-md-art{ width:100%; max-width:150px; aspect-ratio:1; border-radius:50%; filter:drop-shadow(0 10px 16px rgba(0,0,0,.35)); }
.at-md:not(.on) .at-md-art{ background:radial-gradient(circle, color-mix(in srgb, var(--accent) 16%, transparent) 0 60%, transparent 61%); }
.at-md-art canvas{ display:block; width:100%; height:100%; }
.at-md-t{ display:grid; gap:3px; min-width:0; }
.at-md-t b{ font-family:var(--serif-ko); font-size:15px; font-weight:600; color:var(--ink); }
.at-md-t small{ font-size:11.5px; line-height:1.45; color:var(--ink-3); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.at-md .at-ib,.at-hn .at-ib{ position:absolute; top:8px; right:8px; opacity:.5; transition:opacity .2s ease, border-color .2s ease, color .2s ease; }
.at-md:hover .at-ib,.at-md .at-ib:focus-visible,.at-hn:hover .at-ib,.at-hn .at-ib:focus-visible{ opacity:1; }
@media (hover:none){ .at-md .at-ib,.at-hn .at-ib{ opacity:1; } }
.at-hng{ margin-top:46px; }
.at-hns{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:18px; }
.at-hn{ position:relative; min-width:0; display:grid; grid-template-columns:minmax(0,1fr); justify-items:center; gap:8px; padding:12px 16px 18px; border-radius:var(--at-card-r); background:var(--at-shelf); border:1px solid var(--line-soft); text-align:center; transition:transform .35s cubic-bezier(.2,.7,.2,1), border-color .25s ease; }
.at-hn:hover{ transform:translateY(-3px); border-color:color-mix(in srgb, var(--accent) 45%, var(--line)); }
.at-hn-art{ width:100%; max-width:210px; aspect-ratio:1; }
.at-hn-art canvas{ display:block; width:100%; height:100%; }
.at-hn-t{ display:grid; gap:4px; }
.at-hn-t b{ font-family:var(--serif-ko); font-size:15.5px; font-weight:600; }
.at-hn-t small{ font-size:12.5px; line-height:1.55; color:var(--ink-3); }

/* 배경화면 */
.at-wtools{ margin-bottom:22px; }
.at-wt{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; }
.at-seg{ display:inline-flex; padding:3px; border-radius:12px; border:1px solid var(--line); background:var(--surface); }
.at-seg button{ appearance:none; min-height:34px; padding:0 14px; border:0; border-radius:9px; background:none; color:var(--ink-2); font-size:13.5px; cursor:pointer; }
.at-seg button[aria-pressed='true']{ background:var(--accent); color:var(--accent-ink); font-weight:500; }
.at-wt-size{ font-family:var(--mono); font-size:12px; color:var(--ink-3); }
.at-wt .btn{ margin-left:auto; min-height:38px; }
.at-walls{ display:grid; grid-template-columns:repeat(6, minmax(0,1fr)); gap:20px 16px; }
.at-walls[data-dev='desk']{ grid-template-columns:repeat(3, minmax(0,1fr)); gap:24px 20px; }
.at-wl{ position:relative; min-width:0; display:grid; gap:10px; align-content:start; }
.at-wl-art{ position:relative; aspect-ratio:1179/2556; border-radius:18px; overflow:hidden; background:var(--sunk); border:1px solid var(--line-soft); box-shadow:0 18px 36px -22px rgba(0,0,0,.6); transition:transform .35s cubic-bezier(.2,.7,.2,1); }
.at-walls[data-dev='desk'] .at-wl-art{ aspect-ratio:16/9; border-radius:12px; }
.at-walls:not([data-dev='desk']) .at-wl-art::after{ content:''; position:absolute; left:50%; top:2%; width:30%; height:2%; translate:-50% 0; border-radius:99px; background:rgba(0,0,0,.55); }
.at-wl:hover .at-wl-art{ transform:translateY(-4px); }
.at-wl:not(.on) .at-wl-art{ background:linear-gradient(100deg, var(--sunk) 30%, color-mix(in srgb, var(--ink) 6%, var(--sunk)) 50%, var(--sunk) 70%) 0 0/250% 100%; animation:at-shim 1.4s linear infinite; }
.at-wl-art canvas{ display:block; width:100%; height:100%; }
.at-wl-t{ display:grid; gap:2px; padding-right:44px; }
.at-wl-t b{ font-size:14px; font-weight:600; }
.at-wl-t small{ font-size:12px; line-height:1.5; color:var(--ink-3); }
.at-wl .at-ib{ position:absolute; right:0; bottom:4px; }

/* 인증서 */
.at-cert{ display:grid; grid-template-columns:minmax(260px, 330px) minmax(0,1fr); gap:30px; align-items:start; }
.at-cert-f{ position:sticky; top:calc(var(--hdr,64px) + 84px); display:grid; gap:10px; padding:22px; border-radius:var(--at-card-r); background:var(--at-shelf); border:1px solid var(--line-soft); }
.at-lab{ font-size:13.5px; font-weight:500; color:var(--ink); }
.at-in{ width:100%; min-height:48px; padding:10px 14px; border-radius:12px; border:1px solid var(--line); background:var(--surface); color:var(--ink); font:inherit; font-family:var(--serif-ko); font-size:18px; }
.at-in:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 4px var(--accent-soft); }
.at-help{ font-size:12.5px; line-height:1.6; color:var(--ink-3); }
.at-cert-acts{ display:flex; flex-wrap:wrap; gap:8px; margin-top:6px; }
.at-cert-acts .btn{ min-height:40px; }
.at-cert-p{ position:relative; aspect-ratio:297/210; border-radius:6px; overflow:hidden; background:#f4ead4; box-shadow:0 30px 60px -30px rgba(0,0,0,.6), 0 2px 6px rgba(0,0,0,.18); }
.at-cert-p canvas{ display:block; width:100%; height:100%; }
.at-cert-p:not(.on)::after{ content:''; position:absolute; inset:0; background:linear-gradient(100deg, transparent 30%, rgba(255,255,255,.4) 50%, transparent 70%) 0 0/250% 100%; animation:at-shim 1.4s linear infinite; }

/* 엽서 */
.at-posts{ display:grid; grid-auto-flow:column; grid-auto-columns:minmax(300px, 30%); gap:22px; overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x proximity; padding:6px 2px 18px; scrollbar-width:thin; scrollbar-color:var(--line) transparent; }
.at-po{ min-width:0; display:grid; gap:10px; scroll-snap-align:start; }
.at-po-art{ aspect-ratio:148/100; border-radius:6px; overflow:hidden; background:#f4ead4; box-shadow:0 20px 40px -24px rgba(0,0,0,.6), 0 1px 4px rgba(0,0,0,.2); transition:transform .35s cubic-bezier(.2,.7,.2,1); }
.at-po:hover .at-po-art{ transform:translateY(-3px) rotate(-.6deg); }
.at-po:not(.on) .at-po-art{ background:linear-gradient(100deg, #efe4cc 30%, #f8f0de 50%, #efe4cc 70%) 0 0/250% 100%; animation:at-shim 1.4s linear infinite; }
.at-po-art canvas{ display:block; width:100%; height:100%; }
.at-po-f{ display:flex; align-items:center; justify-content:space-between; gap:8px; }

/* 나의 유형 · 질문 카드, 결과, 네 축 그래프, 유형 지도 */
.at-qwrap{ display:grid; grid-template-columns:minmax(0,1fr); gap:26px; }
.at-quiz{ min-width:0; }
.at-qz{ display:grid; gap:14px; max-width:860px; width:100%; margin:0 auto; padding:28px; border-radius:22px; background:var(--at-shelf); border:1px solid var(--line-soft); }
.at-qz-prog{ display:flex; gap:5px; }
.at-qz-prog i{ flex:1; height:4px; border-radius:4px; background:var(--line); transition:background .3s ease; }
.at-qz-prog i.on{ background:var(--accent); }
.at-qz-prog i.cur{ background:color-mix(in srgb, var(--accent) 45%, var(--line)); }
.at-qz-top{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:6px 14px; }
.at-qz-n{ font-family:var(--mono); font-size:12px; color:var(--accent); letter-spacing:.06em; }
.at-qz-ax{ display:inline-flex; align-items:center; gap:8px; font-size:12px; color:var(--ink-3); padding:3px 10px; border-radius:99px; border:1px solid var(--line-soft); }
.at-qz-ax i{ font-style:normal; color:var(--accent); }
.at-qz-q{ font-family:var(--serif-ko); font-size:clamp(20px, 2.4vw, 25px); line-height:1.35; }
.at-qz-o{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px; margin-top:4px; }
.at-qz-b{ appearance:none; display:flex; align-items:center; gap:14px; min-height:60px; padding:12px 16px; border-radius:14px; border:1px solid var(--line); background:var(--surface); color:var(--ink); font:inherit; font-size:15px; line-height:1.45; text-align:left; cursor:pointer; transition:border-color .2s ease, transform .2s ease, background .2s ease; }
.at-qz-b b{ display:grid; place-items:center; width:30px; height:30px; flex:none; border-radius:50%; border:1px solid color-mix(in srgb, var(--accent) 60%, var(--line)); color:var(--accent); font-family:var(--display); font-size:14px; }
.at-qz-b:hover{ border-color:var(--accent); background:color-mix(in srgb, var(--accent) 7%, var(--surface)); transform:translateY(-1px); }
.at-qz-b:focus-visible,.at-qz-back:focus-visible,.at-tm-c:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.at-qz-back{ justify-self:start; appearance:none; border:0; background:none; color:var(--ink-3); font:inherit; font-size:13px; min-height:36px; padding:0; cursor:pointer; }
.at-qz-back:hover{ color:var(--accent); }

.at-qr{ display:grid; gap:22px; padding:28px; border-radius:22px; background:var(--at-shelf); border:1px solid var(--line-soft); }
.at-qr.see{ border-style:dashed; border-color:color-mix(in srgb, var(--accent) 45%, var(--line-soft)); }
.at-qr-top{ display:grid; grid-template-columns:minmax(0,300px) minmax(0,1fr); gap:34px; align-items:center; }
.at-qr-art{ aspect-ratio:1; }
.at-qr-art canvas{ display:block; width:100%; height:100%; animation:at-pop .6s cubic-bezier(.3,1.4,.5,1) both; }
.at-qr-t{ display:grid; gap:10px; min-width:0; }
.at-qr-t h4{ font-family:var(--serif-ko); font-size:clamp(24px, 3vw, 34px); line-height:1.25; }
html:lang(en) .at-qr-t h4{ font-family:var(--display); }
.at-qr-t p:not(.eyebrow){ color:var(--ink-2); line-height:1.72; }
.at-qr-code{ display:flex; flex-wrap:wrap; gap:6px; }
.at-qr-code span{ display:inline-flex; align-items:center; gap:6px; padding:3px 10px 3px 3px; border-radius:99px; border:1px solid color-mix(in srgb, var(--accent) 45%, var(--line)); background:color-mix(in srgb, var(--accent) 8%, var(--surface)); font-size:12.5px; color:var(--ink); }
.at-qr-code b{ display:grid; place-items:center; width:22px; height:22px; border-radius:50%; background:var(--accent); color:var(--accent-ink); font-family:var(--display); font-size:12.5px; font-weight:600; }
.at-qr-who{ font-size:14px; }
.at-link{ appearance:none; padding:0; border:0; background:none; color:var(--accent); font:inherit; cursor:pointer; text-decoration:underline; text-underline-offset:3px; }
.at-qr-acts{ display:flex; flex-wrap:wrap; gap:8px; margin-top:6px; }
.at-qr-acts .btn{ min-height:40px; }
.at-qr-h{ font-size:12.5px; font-weight:600; letter-spacing:.04em; color:var(--ink-3); margin-bottom:10px; }
.at-qr-axes{ padding:18px 20px 16px; border-radius:18px; border:1px solid var(--line-soft); background:color-mix(in srgb, var(--surface) 70%, transparent); }
.at-ax{ display:grid; gap:14px; }
.at-ax-r{ display:grid; grid-template-columns:minmax(92px, 150px) minmax(0,1fr) minmax(92px, 150px); grid-template-areas:'l bar r' '. d .'; align-items:center; gap:4px 14px; }
.at-ax-l{ grid-area:l; display:flex; align-items:baseline; justify-content:flex-end; gap:6px; color:var(--ink-3); font-size:13.5px; text-align:right; }
.at-ax-l.r{ grid-area:r; justify-content:flex-start; text-align:left; }
.at-ax-l b{ font-weight:500; }
.at-ax-l small{ font-family:var(--mono); font-size:11.5px; }
.at-ax-l.on{ color:var(--ink); }
.at-ax-l.on b{ font-weight:700; color:var(--accent); }
.at-ax-bar{ grid-area:bar; position:relative; height:12px; border-radius:99px; background:color-mix(in srgb, var(--line) 70%, transparent); }
.at-ax-mid{ position:absolute; left:50%; top:-4px; bottom:-4px; width:1px; background:var(--ink-3); opacity:.6; }
.at-ax-fill{ position:absolute; top:0; bottom:0; border-radius:99px; background:linear-gradient(90deg, color-mix(in srgb, var(--accent) 55%, transparent), var(--accent)); animation:at-ax-in .8s cubic-bezier(.2,.7,.2,1) both; }
.at-ax-dot{ position:absolute; top:50%; width:18px; height:18px; margin:-9px 0 0 -9px; border-radius:50%; background:var(--accent); border:3px solid var(--surface); box-shadow:0 0 0 1px var(--accent), 0 2px 8px -2px rgba(0,0,0,.5); animation:at-ax-dot .8s cubic-bezier(.2,.7,.2,1) both; }
.at-ax-d{ grid-area:d; font-size:12.5px; color:var(--ink-3); text-align:center; }
@keyframes at-ax-in{ from{ opacity:0; transform:scaleX(.2); } to{ opacity:1; transform:none; } }
@keyframes at-ax-dot{ from{ opacity:0; transform:scale(.3); } to{ opacity:1; transform:none; } }
.at-qr-cols{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:14px; }
.at-qr-cols section{ padding:16px 18px; border-radius:16px; border:1px solid var(--line-soft); background:color-mix(in srgb, var(--surface) 70%, transparent); }
.at-qr-cols h5{ font-size:14px; font-weight:600; margin-bottom:8px; color:var(--ink); }
.at-qr-cols ul{ display:grid; gap:7px; margin:0; padding:0; list-style:none; }
.at-qr-cols li{ position:relative; padding-left:16px; font-size:14px; line-height:1.6; color:var(--ink-2); }
.at-qr-cols li::before{ content:''; position:absolute; left:2px; top:.62em; width:6px; height:6px; border-radius:50%; background:var(--accent); }
.at-qr-cols section:nth-child(2) li::before{ background:transparent; border:1.5px solid var(--ink-3); width:5px; height:5px; }
.at-qr-cols .tips li::before{ border-radius:1px; transform:rotate(45deg); }
.at-qr-next{ display:flex; align-items:center; justify-content:space-between; gap:12px 20px; flex-wrap:wrap; padding:16px 20px; border-radius:16px; border:1px solid color-mix(in srgb, var(--accent) 40%, var(--line)); background:linear-gradient(120deg, color-mix(in srgb, var(--accent) 12%, var(--surface)), var(--surface) 70%); }
.at-qr-next > div{ display:grid; gap:4px; min-width:0; flex:1 1 320px; }
.at-qr-next .at-qr-h{ margin:0; }
.at-qr-next b{ font-size:16px; color:var(--ink); }
.at-qr-next p:not(.at-qr-h){ font-size:14px; line-height:1.6; color:var(--ink-2); }
.at-qr-next .btn{ min-height:40px; text-decoration:none; }

/* 유형 지도 */
.at-qa{ padding:22px 22px 20px; border-radius:22px; border:1px solid var(--line-soft); background:color-mix(in srgb, var(--surface) 60%, transparent); }
.at-tm-h{ display:grid; gap:4px; margin-bottom:14px; }
.at-tm-h .at-qr-h{ margin:0; }
.at-tm-s{ font-size:13px; line-height:1.6; color:var(--ink-3); }
.at-tm{ display:grid; grid-template-columns:minmax(64px, 96px) repeat(4, minmax(0,1fr)); gap:8px; }
.at-tm-corner{ display:block; }
.at-tm-ch,.at-tm-rh{ display:flex; align-items:center; font-size:12px; font-weight:600; color:var(--ink-3); line-height:1.35; }
.at-tm-ch{ justify-content:center; text-align:center; padding:0 4px 2px; }
.at-tm-rh{ justify-content:flex-end; text-align:right; padding-right:4px; }
.at-tm-c{ appearance:none; display:flex; align-items:center; gap:10px; min-width:0; min-height:64px; padding:8px 10px 8px 8px; border-radius:14px; border:1px solid var(--line-soft); background:var(--surface); color:var(--ink); font:inherit; text-align:left; cursor:pointer; transition:border-color .2s ease, background .2s ease, transform .2s ease; }
.at-tm-c:hover{ border-color:color-mix(in srgb, var(--accent) 60%, var(--line)); transform:translateY(-1px); }
.at-tm-c.see{ border-color:var(--accent); border-style:dashed; }
.at-tm-c.on{ border-color:var(--accent); background:color-mix(in srgb, var(--accent) 14%, var(--surface)); box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.at-tm-p{ display:grid; place-items:center; width:44px; height:44px; flex:none; border-radius:50%; overflow:hidden; }
.at-tm-p svg{ display:block; width:44px; height:44px; }
.at-tm-mono{ display:grid; place-items:center; width:44px; height:44px; border-radius:50%; color:#fff4d8; font-family:var(--display); font-style:italic; font-size:22px; box-shadow:inset 0 0 0 2px rgba(255,244,216,.35); }
.at-tm-t{ display:grid; gap:2px; min-width:0; }
.at-tm-t b{ font-size:13px; font-weight:600; line-height:1.3; overflow-wrap:anywhere; }
.at-tm-t small{ font-size:11.5px; color:var(--ink-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.at-tm-t em{ font-style:normal; font-family:var(--mono); font-size:10.5px; letter-spacing:.06em; color:var(--accent); }
@media (max-width:1100px){
  .at-tm{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .at-tm-corner,.at-tm-ch{ display:none; }
  .at-tm-rh{ grid-column:1 / -1; justify-content:flex-start; text-align:left; padding:6px 0 0; }
}
@media (max-width:900px){
  .at-qr-top{ grid-template-columns:minmax(0,220px) minmax(0,1fr); gap:22px; }
  .at-qr-cols{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
  .at-qr-cols .tips{ grid-column:1 / -1; }
}
@media (max-width:720px){
  .at-qz,.at-qr{ padding:18px; }
  .at-qz-o{ grid-template-columns:minmax(0,1fr); }
  .at-qr-top{ grid-template-columns:minmax(0,1fr); gap:18px; }
  .at-qr-art{ max-width:260px; justify-self:center; width:100%; }
  .at-qr-cols{ grid-template-columns:minmax(0,1fr); }
  .at-qr-axes{ padding:14px; }
  .at-ax-r{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); grid-template-areas:'l r' 'bar bar' 'd d'; gap:6px 10px; }
  .at-ax-l{ justify-content:flex-start; text-align:left; }
  .at-ax-l.r{ justify-content:flex-end; text-align:right; }
  .at-qa{ padding:16px; }
  .at-tm{ gap:6px; }
  .at-tm-c{ padding:7px 8px 7px 7px; gap:8px; }
  .at-tm-p,.at-tm-p svg,.at-tm-mono{ width:36px; height:36px; }
  .at-tm-mono{ font-size:18px; }
  .at-tm-t b{ font-size:12.5px; }
}
@media (pointer:coarse){ .at-tm-c{ min-height:56px; } .at-qz-back{ min-height:40px; } }
@media (prefers-reduced-motion: reduce){ .at-ax-fill,.at-ax-dot{ animation:none; } }

@media (max-width:1180px){
  .at-mds{ grid-template-columns:repeat(4, minmax(0,1fr)); }
  .at-walls{ grid-template-columns:repeat(3, minmax(0,1fr)); }
  .at-walls[data-dev='desk']{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (max-width:900px){
  .at-hns{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .at-cert{ grid-template-columns:minmax(0,1fr); }
  .at-cert-f{ position:static; }
}
@media (max-width:720px){
  .at-mds{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px; }
  .at-hns{ gap:12px; }
  .at-hn{ padding:10px 10px 14px; }
  .at-hn-t small{ font-size:11.5px; }
  .at-walls{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:16px 12px; }
  .at-walls[data-dev='desk']{ grid-template-columns:minmax(0,1fr); }
  .at-wt .btn{ margin-left:0; }
  .at-posts{ grid-auto-columns:84%; margin:0 calc(-1 * var(--at-gut)); padding:6px var(--at-gut) 18px; scroll-snap-type:x mandatory; scroll-padding-inline:var(--at-gut); }
}
@media (pointer:coarse){ .at-seg button{ min-height:40px; } }

/* 크게 보기 단추와 시트 */
.at-po-art,.at-wl-art,.at-md-art,.at-hn-art{ appearance:none; display:block; width:100%; padding:0; border:0; font:inherit; color:inherit; cursor:zoom-in; }
.at-md-art,.at-hn-art{ background:none; margin:0 auto; }
.at-po-art[aria-busy='true'],.at-wl-art[aria-busy='true'],.at-md-art[aria-busy='true'],.at-hn-art[aria-busy='true']{ cursor:progress; opacity:.8; }
.at-sheet-wide{ grid-template-columns:minmax(0,1fr); }
.at-sheet-wide .at-sheet-art{ padding:10px; }
.at-sheet-wall:not(.at-sheet-wide) .at-sheet-art img{ max-height:68vh; width:auto; max-width:100%; margin:0 auto; border-radius:14px; }
.at-sheet-post .at-sheet-art img,.at-sheet-wide.at-sheet-wall .at-sheet-art img{ border-radius:6px; box-shadow:0 14px 30px -18px rgba(0,0,0,.6); }
.at-st,.at-cw,.at-md,.at-hn,.at-wl,.at-po{ grid-template-columns:minmax(0,1fr); }
@media (max-width:640px){ .at{ --at-gut:16px; } }

/* 수학사 굿즈 · 제품 목업 카드 */
.at-goods{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:22px; }
.at-gd{ position:relative; min-width:0; display:grid; grid-template-rows:auto 1fr auto; gap:12px; padding:12px 12px 16px; border-radius:var(--at-card-r); background:var(--at-shelf); border:1px solid var(--line-soft); transition:transform .35s cubic-bezier(.2,.7,.2,1), border-color .25s ease, box-shadow .35s ease; }
.at-gd:hover{ transform:translateY(-3px); border-color:color-mix(in srgb, var(--accent) 45%, var(--line-soft)); box-shadow:0 18px 40px -26px rgba(0,0,0,.6); }
.at-gd-art{ appearance:none; display:block; width:100%; aspect-ratio:4 / 3; padding:0; border:0; border-radius:12px; overflow:hidden; background:var(--sunk); cursor:var(--cur-zoom-in, zoom-in); }
.at-gd-art canvas{ display:block; width:100%; height:100%; opacity:0; transition:opacity .5s ease; }
.at-gd.on .at-gd-art canvas{ opacity:1; }
.at-gd-art:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
.at-gd-t{ display:grid; gap:5px; align-content:start; padding:0 4px; }
.at-gd-t b{ font-family:var(--serif-ko); font-size:17px; font-weight:600; color:var(--ink); line-height:1.35; }
html:lang(en) .at-gd-t b{ font-family:var(--display); }
.at-gd-t p{ font-size:13.5px; line-height:1.6; color:var(--ink-2); }
.at-gd-t p sup{ font-size:.72em; line-height:0; }
.at-gd-t small{ font-family:var(--mono); font-size:11.5px; line-height:1.5; color:var(--ink-3); }
.at-gd-a{ display:flex; flex-wrap:wrap; gap:6px; padding:0 4px; }
.at-gd-a .btn{ min-height:36px; }
.at-sheet-goods .at-gd-view{ display:grid; gap:12px; padding:12px; }
.at-gd-view .at-gd-mk{ display:block; width:100%; height:auto; border-radius:10px; }
.at-gd-df{ margin:0; display:grid; grid-template-columns:minmax(0,120px) minmax(0,1fr); align-items:center; gap:12px; padding:8px; border-radius:10px; border:1px dashed var(--line); background:repeating-conic-gradient(color-mix(in srgb, var(--ink) 6%, transparent) 0 25%, transparent 0 50%) 0 0 / 16px 16px; }
.at-gd-df img{ display:block; width:100%; height:auto; max-height:120px; object-fit:contain; }
.at-gd-df figcaption{ font-family:var(--mono); font-size:12px; color:var(--ink-3); }
@media (max-width:1100px){ .at-goods{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:16px; } }
@media (max-width:560px){ .at-goods{ grid-template-columns:minmax(0,1fr); } }
@media (pointer:coarse){ .at-gd-a .btn{ min-height:40px; } }
@media (prefers-reduced-motion: reduce){ .at-gd,.at-gd-art canvas{ transition:none; } }
.at-sheet.at-sheet-goods{ grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); align-items:start; }
@media (max-width:720px){ .at-sheet.at-sheet-goods{ grid-template-columns:minmax(0,1fr); } .at-sheet-goods .at-sheet-art{ max-width:none; } }

/* ───────── 수학 커서 · 마우스처럼 섬세한 포인터에서만 바뀌고 터치 화면은 그대로
   기본은 끝에 각의 호가 있는 벡터 화살표 · 누르는 곳은 바늘이 왼쪽 위를 가리키는 컴퍼스 · 글자 입력은 눈금 I 빔 · 끌기는 원점이 있는 좌표축 · 확대는 돋보기 · 기다림은 원을 긋는 화살표
   사이트가 쓰지 않는 help, not-allowed, zoom-out 은 그림을 싣지 않고 시스템 커서로 둔다
   그림은 32 논리 픽셀이고 image-set 으로 2x 판을 함께 준다 · 핫스폿은 화살표 끝, 바늘 끝, 원점, 렌즈 중심
   아래 되비춤 규칙은 지금 css 의 cursor 규칙을 같은 선택자와 같은 차례로 옮긴 것이고, 나중에 더해지는 규칙은 src/v_cursor.js 가 실행 중에 같은 방식으로 되비춘다 */
@media (pointer:fine) and (hover:hover){
  :root{ --cu-arrow-1:url('data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2732%27 height=%2732%27 viewBox=%270 0 32 32%27%3E%3Cdefs%3E%3ClinearGradient id=%27g%27 x2=%271%27 y2=%271%27%3E%3Cstop stop-color=%27%23f8e6b0%27/%3E%3Cstop offset=%27.5%27 stop-color=%27%23d9b76d%27/%3E%3Cstop offset=%271%27 stop-color=%27%239c7430%27/%3E%3C/linearGradient%3E%3Cpath id=%27s0%27 d=%27M16.3 15.3L9.2 14.1L5 20L5 4ZM9.9 12.5L14 22.4L11.6 23.3L7.6 13.5ZM16.3 24.9A2.7 2.7 0 1 1 10.9 24.9A2.7 2.7 0 1 1 16.3 24.9Z%27/%3E%3C/defs%3E%3Cg stroke-linejoin=%27round%27 stroke-linecap=%27round%27%3E%3Cuse href=%27%23s0%27 fill=%27none%27 stroke=%27%23fff7e4%27 stroke-opacity=%27.2%27 stroke-width=%275.7%27/%3E%3Cuse href=%27%23s0%27 fill=%27none%27 stroke=%27%23fff7e4%27 stroke-opacity=%27.42%27 stroke-width=%274%27/%3E%3Cuse href=%27%23s0%27 fill=%27%231a1308%27 stroke=%27%231a1308%27 stroke-width=%272.3%27/%3E%3Cuse href=%27%23s0%27 fill=%27url(%23g)%27/%3E%3Cpath d=%27M5 10.2A6.2 6.2 0 0 0 9.4 8.4%27 fill=%27none%27 stroke=%27%231a1308%27 stroke-width=%27.9%27/%3E%3Ccircle cx=%2713.6%27 cy=%2724.9%27 r=%27.9%27 fill=%27%231a1308%27/%3E%3C/g%3E%3C/svg%3E'); --cu-arrow-2:url('data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2764%27 height=%2764%27 viewBox=%270 0 32 32%27%3E%3Cdefs%3E%3ClinearGradient id=%27g%27 x2=%271%27 y2=%271%27%3E%3Cstop stop-color=%27%23f8e6b0%27/%3E%3Cstop offset=%27.5%27 stop-color=%27%23d9b76d%27/%3E%3Cstop offset=%271%27 stop-color=%27%239c7430%27/%3E%3C/linearGradient%3E%3Cpath id=%27s0%27 d=%27M16.3 15.3L9.2 14.1L5 20L5 4ZM9.9 12.5L14 22.4L11.6 23.3L7.6 13.5ZM16.3 24.9A2.7 2.7 0 1 1 10.9 24.9A2.7 2.7 0 1 1 16.3 24.9Z%27/%3E%3C/defs%3E%3Cg stroke-linejoin=%27round%27 stroke-linecap=%27round%27%3E%3Cuse href=%27%23s0%27 fill=%27none%27 stroke=%27%23fff7e4%27 stroke-opacity=%27.2%27 stroke-width=%275.7%27/%3E%3Cuse href=%27%23s0%27 fill=%27none%27 stroke=%27%23fff7e4%27 stroke-opacity=%27.42%27 stroke-width=%274%27/%3E%3Cuse href=%27%23s0%27 fill=%27%231a1308%27 stroke=%27%231a1308%27 stroke-width=%272.3%27/%3E%3Cuse href=%27%23s0%27 fill=%27url(%23g)%27/%3E%3Cpath d=%27M5 10.2A6.2 6.2 0 0 0 9.4 8.4%27 fill=%27none%27 stroke=%27%231a1308%27 stroke-width=%27.9%27/%3E%3Ccircle cx=%2713.6%27 cy=%2724.9%27 r=%27.9%27 fill=%27%231a1308%27/%3E%3C/g%3E%3C/svg%3E'); }
  :root{ --cu-compass-1:url('data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2732%27 height=%2732%27 viewBox=%270 0 32 32%27%3E%3Cdefs%3E%3ClinearGradient id=%27g%27 x2=%271%27 y2=%271%27%3E%3Cstop stop-color=%27%23f8e6b0%27/%3E%3Cstop offset=%27.5%27 stop-color=%27%23d9b76d%27/%3E%3Cstop offset=%271%27 stop-color=%27%239c7430%27/%3E%3C/linearGradient%3E%3Cpath id=%27s0%27 d=%27M18.1 20.2L12.1 7.4L14 6.4L21.3 18.5ZM18.9 21L5.6 13.8L6.6 11.6L20.5 17.7ZM22.5 19.9L25.3 22.6A1.6 1.6 0 0 1 23.1 24.8L20.3 22.1A1.6 1.6 0 0 1 22.5 19.9ZM23.2 19.3A3.5 3.5 0 1 1 16.2 19.3A3.5 3.5 0 1 1 23.2 19.3Z%27/%3E%3Cpath id=%27s1%27 d=%27M5.6 13.8L3.1 11.2L6.6 11.6Z%27/%3E%3Cpath id=%27s2%27 d=%27M12.4 7.2L11 3L13.7 6.5Z%27/%3E%3C/defs%3E%3Cg stroke-linejoin=%27round%27 stroke-linecap=%27round%27%3E%3Cuse href=%27%23s0%27 fill=%27none%27 stroke=%27%23fff7e4%27 stroke-opacity=%27.2%27 stroke-width=%275.6%27/%3E%3Cuse href=%27%23s0%27 fill=%27none%27 stroke=%27%23fff7e4%27 stroke-opacity=%27.42%27 stroke-width=%273.9%27/%3E%3Cuse href=%27%23s1%27 fill=%27none%27 stroke=%27%23fff7e4%27 stroke-opacity=%27.2%27 stroke-width=%275.6%27/%3E%3Cuse href=%27%23s1%27 fill=%27none%27 stroke=%27%23fff7e4%27 stroke-opacity=%27.42%27 stroke-width=%273.9%27/%3E%3Cuse href=%27%23s2%27 fill=%27none%27 stroke=%27%23fff7e4%27 stroke-opacity=%27.2%27 stroke-width=%275.2%27/%3E%3Cuse href=%27%23s2%27 fill=%27none%27 stroke=%27%23fff7e4%27 stroke-opacity=%27.42%27 stroke-width=%273.5%27/%3E%3Cuse href=%27%23s0%27 fill=%27%231a1308%27 stroke=%27%231a1308%27 stroke-width=%272.2%27/%3E%3Cuse href=%27%23s0%27 fill=%27url(%23g)%27/%3E%3Ccircle cx=%2719.7%27 cy=%2719.3%27 r=%271.4%27 fill=%27%23f8e6b0%27 stroke=%27%231a1308%27 stroke-width=%27.9%27/%3E%3Cuse href=%27%23s1%27 fill=%27%231a1308%27 stroke=%27%231a1308%27 stroke-width=%272.2%27/%3E%3Cuse href=%27%23s1%27 fill=%27%234a3b22%27/%3E%3Cuse href=%27%23s2%27 fill=%27%231a1308%27 stroke=%27%231a1308%27 stroke-width=%271.8%27/%3E%3Cuse href=%27%23s2%27 fill=%27%23eef0f2%27/%3E%3C/g%3E%3C/svg%3E'); --cu-compass-2:url('data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2764%27 height=%2764%27 viewBox=%270 0 32 32%27%3E%3Cdefs%3E%3ClinearGradient id=%27g%27 x2=%271%27 y2=%271%27%3E%3Cstop stop-color=%27%23f8e6b0%27/%3E%3Cstop offset=%27.5%27 stop-color=%27%23d9b76d%27/%3E%3Cstop offset=%271%27 stop-color=%27%239c7430%27/%3E%3C/linearGradient%3E%3Cpath id=%27s0%27 d=%27M18.1 20.2L12.1 7.4L14 6.4L21.3 18.5ZM18.9 21L5.6 13.8L6.6 11.6L20.5 17.7ZM22.5 19.9L25.3 22.6A1.6 1.6 0 0 1 23.1 24.8L20.3 22.1A1.6 1.6 0 0 1 22.5 19.9ZM23.2 19.3A3.5 3.5 0 1 1 16.2 19.3A3.5 3.5 0 1 1 23.2 19.3Z%27/%3E%3Cpath id=%27s1%27 d=%27M5.6 13.8L3.1 11.2L6.6 11.6Z%27/%3E%3Cpath id=%27s2%27 d=%27M12.4 7.2L11 3L13.7 6.5Z%27/%3E%3C/defs%3E%3Cg stroke-linejoin=%27round%27 stroke-linecap=%27round%27%3E%3Cuse href=%27%23s0%27 fill=%27none%27 stroke=%27%23fff7e4%27 stroke-opacity=%27.2%27 stroke-width=%275.6%27/%3E%3Cuse href=%27%23s0%27 fill=%27none%27 stroke=%27%23fff7e4%27 stroke-opacity=%27.42%27 stroke-width=%273.9%27/%3E%3Cuse href=%27%23s1%27 fill=%27none%27 stroke=%27%23fff7e4%27 stroke-opacity=%27.2%27 stroke-width=%275.6%27/%3E%3Cuse href=%27%23s1%27 fill=%27none%27 stroke=%27%23fff7e4%27 stroke-opacity=%27.42%27 stroke-width=%273.9%27/%3E%3Cuse href=%27%23s2%27 fill=%27none%27 stroke=%27%23fff7e4%27 stroke-opacity=%27.2%27 stroke-width=%275.2%27/%3E%3Cuse href=%27%23s2%27 fill=%27none%27 stroke=%27%23fff7e4%27 stroke-opacity=%27.42%27 stroke-width=%273.5%27/%3E%3Cuse href=%27%23s0%27 fill=%27%231a1308%27 stroke=%27%231a1308%27 stroke-width=%272.2%27/%3E%3Cuse href=%27%23s0%27 fill=%27url(%23g)%27/%3E%3Ccircle cx=%2719.7%27 cy=%2719.3%27 r=%271.4%27 fill=%27%23f8e6b0%27 stroke=%27%231a1308%27 stroke-width=%27.9%27/%3E%3Cuse href=%27%23s1%27 fill=%27%231a1308%27 stroke=%27%231a1308%27 stroke-width=%272.2%27/%3E%3Cuse href=%27%23s1%27 fill=%27%234a3b22%27/%3E%3Cuse href=%27%23s2%27 fill=%27%231a1308%27 stroke=%27%231a1308%27 stroke-width=%271.8%27/%3E%3Cuse href=%27%23s2%27 fill=%27%23eef0f2%27/%3E%3C/g%3E%3C/svg%3E'); }
  :root{ --cu-text-1:url('data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2732%27 height=%2732%27 viewBox=%270 0 32 32%27%3E%3Cdefs%3E%3ClinearGradient id=%27g%27 x2=%271%27 y2=%271%27%3E%3Cstop stop-color=%27%23f8e6b0%27/%3E%3Cstop offset=%27.5%27 stop-color=%27%23d9b76d%27/%3E%3Cstop offset=%271%27 stop-color=%27%239c7430%27/%3E%3C/linearGradient%3E%3Cpath id=%27s0%27 d=%27M16.8 6.6L16.8 25.4L15.2 25.4L15.2 6.6ZM12.1 5.2L19.9 5.2L19.9 6.7L12.1 6.7ZM12.1 25.4L19.9 25.4L19.9 26.9L12.1 26.9ZM12.8 5.9L12.8 8.1L11.4 8.1L11.4 5.9ZM11.4 26.1L11.4 23.9L12.8 23.9L12.8 26.1ZM20.5 5.9L20.5 8.1L19.2 8.1L19.2 5.9ZM19.2 26.1L19.2 23.9L20.5 23.9L20.5 26.1ZM14 15.4L18 15.4L18 16.6L14 16.6Z%27/%3E%3C/defs%3E%3Cg stroke-linejoin=%27round%27 stroke-linecap=%27round%27%3E%3Cuse href=%27%23s0%27 fill=%27none%27 stroke=%27%23fff7e4%27 stroke-opacity=%27.2%27 stroke-width=%275.3%27/%3E%3Cuse href=%27%23s0%27 fill=%27none%27 stroke=%27%23fff7e4%27 stroke-opacity=%27.42%27 stroke-width=%273.6%27/%3E%3Cuse href=%27%23s0%27 fill=%27%231a1308%27 stroke=%27%231a1308%27 stroke-width=%271.9%27/%3E%3Cuse href=%27%23s0%27 fill=%27url(%23g)%27/%3E%3C/g%3E%3C/svg%3E'); --cu-text-2:url('data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2764%27 height=%2764%27 viewBox=%270 0 32 32%27%3E%3Cdefs%3E%3ClinearGradient id=%27g%27 x2=%271%27 y2=%271%27%3E%3Cstop stop-color=%27%23f8e6b0%27/%3E%3Cstop offset=%27.5%27 stop-color=%27%23d9b76d%27/%3E%3Cstop offset=%271%27 stop-color=%27%239c7430%27/%3E%3C/linearGradient%3E%3Cpath id=%27s0%27 d=%27M16.8 6.6L16.8 25.4L15.2 25.4L15.2 6.6ZM12.1 5.2L19.9 5.2L19.9 6.7L12.1 6.7ZM12.1 25.4L19.9 25.4L19.9 26.9L12.1 26.9ZM12.8 5.9L12.8 8.1L11.4 8.1L11.4 5.9ZM11.4 26.1L11.4 23.9L12.8 23.9L12.8 26.1ZM20.5 5.9L20.5 8.1L19.2 8.1L19.2 5.9ZM19.2 26.1L19.2 23.9L20.5 23.9L20.5 26.1ZM14 15.4L18 15.4L18 16.6L14 16.6Z%27/%3E%3C/defs%3E%3Cg stroke-linejoin=%27round%27 stroke-linecap=%27round%27%3E%3Cuse href=%27%23s0%27 fill=%27none%27 stroke=%27%23fff7e4%27 stroke-opacity=%27.2%27 stroke-width=%275.3%27/%3E%3Cuse href=%27%23s0%27 fill=%27none%27 stroke=%27%23fff7e4%27 stroke-opacity=%27.42%27 stroke-width=%273.6%27/%3E%3Cuse href=%27%23s0%27 fill=%27%231a1308%27 stroke=%27%231a1308%27 stroke-width=%271.9%27/%3E%3Cuse href=%27%23s0%27 fill=%27url(%23g)%27/%3E%3C/g%3E%3C/svg%3E'); }
  :root{ --cu-grab-1:url('data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2732%27 height=%2732%27 viewBox=%270 0 32 32%27%3E%3Cdefs%3E%3ClinearGradient id=%27g%27 x2=%271%27 y2=%271%27%3E%3Cstop stop-color=%27%23f8e6b0%27/%3E%3Cstop offset=%27.5%27 stop-color=%27%23d9b76d%27/%3E%3Cstop offset=%271%27 stop-color=%27%239c7430%27/%3E%3C/linearGradient%3E%3Cpath id=%27s0%27 d=%27M19 15.1L24.6 15.1L24.6 16.9L19 16.9ZM28.6 16L24.3 19.6L24.3 12.4ZM16.9 19L16.9 24.6L15.1 24.6L15.1 19ZM16 28.6L12.4 24.3L19.6 24.3ZM13 16.9L7.4 16.9L7.4 15.1L13 15.1ZM3.4 16L7.7 12.4L7.7 19.6ZM15.1 13L15.1 7.4L16.9 7.4L16.9 13ZM16 3.4L19.6 7.7L12.4 7.7ZM19.7 16A3.7 3.7 0 1 1 12.3 16A3.7 3.7 0 1 1 19.7 16Z%27/%3E%3C/defs%3E%3Cg stroke-linejoin=%27round%27 stroke-linecap=%27round%27%3E%3Cuse href=%27%23s0%27 fill=%27none%27 stroke=%27%23fff7e4%27 stroke-opacity=%27.2%27 stroke-width=%275.5%27/%3E%3Cuse href=%27%23s0%27 fill=%27none%27 stroke=%27%23fff7e4%27 stroke-opacity=%27.42%27 stroke-width=%273.8%27/%3E%3Cuse href=%27%23s0%27 fill=%27%231a1308%27 stroke=%27%231a1308%27 stroke-width=%272.1%27/%3E%3Cuse href=%27%23s0%27 fill=%27url(%23g)%27/%3E%3Ccircle cx=%2716%27 cy=%2716%27 r=%271.6%27 fill=%27none%27 stroke=%27%231a1308%27 stroke-width=%27.95%27/%3E%3C/g%3E%3C/svg%3E'); --cu-grab-2:url('data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2764%27 height=%2764%27 viewBox=%270 0 32 32%27%3E%3Cdefs%3E%3ClinearGradient id=%27g%27 x2=%271%27 y2=%271%27%3E%3Cstop stop-color=%27%23f8e6b0%27/%3E%3Cstop offset=%27.5%27 stop-color=%27%23d9b76d%27/%3E%3Cstop offset=%271%27 stop-color=%27%239c7430%27/%3E%3C/linearGradient%3E%3Cpath id=%27s0%27 d=%27M19 15.1L24.6 15.1L24.6 16.9L19 16.9ZM28.6 16L24.3 19.6L24.3 12.4ZM16.9 19L16.9 24.6L15.1 24.6L15.1 19ZM16 28.6L12.4 24.3L19.6 24.3ZM13 16.9L7.4 16.9L7.4 15.1L13 15.1ZM3.4 16L7.7 12.4L7.7 19.6ZM15.1 13L15.1 7.4L16.9 7.4L16.9 13ZM16 3.4L19.6 7.7L12.4 7.7ZM19.7 16A3.7 3.7 0 1 1 12.3 16A3.7 3.7 0 1 1 19.7 16Z%27/%3E%3C/defs%3E%3Cg stroke-linejoin=%27round%27 stroke-linecap=%27round%27%3E%3Cuse href=%27%23s0%27 fill=%27none%27 stroke=%27%23fff7e4%27 stroke-opacity=%27.2%27 stroke-width=%275.5%27/%3E%3Cuse href=%27%23s0%27 fill=%27none%27 stroke=%27%23fff7e4%27 stroke-opacity=%27.42%27 stroke-width=%273.8%27/%3E%3Cuse href=%27%23s0%27 fill=%27%231a1308%27 stroke=%27%231a1308%27 stroke-width=%272.1%27/%3E%3Cuse href=%27%23s0%27 fill=%27url(%23g)%27/%3E%3Ccircle cx=%2716%27 cy=%2716%27 r=%271.6%27 fill=%27none%27 stroke=%27%231a1308%27 stroke-width=%27.95%27/%3E%3C/g%3E%3C/svg%3E'); }
  :root{ --cu-grabbing-1:url('data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2732%27 height=%2732%27 viewBox=%270 0 32 32%27%3E%3Cdefs%3E%3ClinearGradient id=%27g%27 x2=%271%27 y2=%271%27%3E%3Cstop stop-color=%27%23f8e6b0%27/%3E%3Cstop offset=%27.5%27 stop-color=%27%23d9b76d%27/%3E%3Cstop offset=%271%27 stop-color=%27%239c7430%27/%3E%3C/linearGradient%3E%3Cpath id=%27s0%27 d=%27M19 15.1L22.6 15.1L22.6 16.9L19 16.9ZM26.6 16L22.3 19.6L22.3 12.4ZM16.9 19L16.9 22.6L15.1 22.6L15.1 19ZM16 26.6L12.4 22.3L19.6 22.3ZM13 16.9L9.4 16.9L9.4 15.1L13 15.1ZM5.4 16L9.7 12.4L9.7 19.6ZM15.1 13L15.1 9.4L16.9 9.4L16.9 13ZM16 5.4L19.6 9.7L12.4 9.7ZM19.4 16A3.4 3.4 0 1 1 12.6 16A3.4 3.4 0 1 1 19.4 16Z%27/%3E%3C/defs%3E%3Cg stroke-linejoin=%27round%27 stroke-linecap=%27round%27%3E%3Cuse href=%27%23s0%27 fill=%27none%27 stroke=%27%23fff7e4%27 stroke-opacity=%27.2%27 stroke-width=%275.5%27/%3E%3Cuse href=%27%23s0%27 fill=%27none%27 stroke=%27%23fff7e4%27 stroke-opacity=%27.42%27 stroke-width=%273.8%27/%3E%3Cuse href=%27%23s0%27 fill=%27%231a1308%27 stroke=%27%231a1308%27 stroke-width=%272.1%27/%3E%3Cuse href=%27%23s0%27 fill=%27url(%23g)%27/%3E%3Ccircle cx=%2716%27 cy=%2716%27 r=%271.75%27 fill=%27%231a1308%27/%3E%3C/g%3E%3C/svg%3E'); --cu-grabbing-2:url('data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2764%27 height=%2764%27 viewBox=%270 0 32 32%27%3E%3Cdefs%3E%3ClinearGradient id=%27g%27 x2=%271%27 y2=%271%27%3E%3Cstop stop-color=%27%23f8e6b0%27/%3E%3Cstop offset=%27.5%27 stop-color=%27%23d9b76d%27/%3E%3Cstop offset=%271%27 stop-color=%27%239c7430%27/%3E%3C/linearGradient%3E%3Cpath id=%27s0%27 d=%27M19 15.1L22.6 15.1L22.6 16.9L19 16.9ZM26.6 16L22.3 19.6L22.3 12.4ZM16.9 19L16.9 22.6L15.1 22.6L15.1 19ZM16 26.6L12.4 22.3L19.6 22.3ZM13 16.9L9.4 16.9L9.4 15.1L13 15.1ZM5.4 16L9.7 12.4L9.7 19.6ZM15.1 13L15.1 9.4L16.9 9.4L16.9 13ZM16 5.4L19.6 9.7L12.4 9.7ZM19.4 16A3.4 3.4 0 1 1 12.6 16A3.4 3.4 0 1 1 19.4 16Z%27/%3E%3C/defs%3E%3Cg stroke-linejoin=%27round%27 stroke-linecap=%27round%27%3E%3Cuse href=%27%23s0%27 fill=%27none%27 stroke=%27%23fff7e4%27 stroke-opacity=%27.2%27 stroke-width=%275.5%27/%3E%3Cuse href=%27%23s0%27 fill=%27none%27 stroke=%27%23fff7e4%27 stroke-opacity=%27.42%27 stroke-width=%273.8%27/%3E%3Cuse href=%27%23s0%27 fill=%27%231a1308%27 stroke=%27%231a1308%27 stroke-width=%272.1%27/%3E%3Cuse href=%27%23s0%27 fill=%27url(%23g)%27/%3E%3Ccircle cx=%2716%27 cy=%2716%27 r=%271.75%27 fill=%27%231a1308%27/%3E%3C/g%3E%3C/svg%3E'); }
  :root{ --cu-zoomin-1:url('data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2732%27 height=%2732%27 viewBox=%270 0 32 32%27%3E%3Cdefs%3E%3ClinearGradient id=%27g%27 x2=%271%27 y2=%271%27%3E%3Cstop stop-color=%27%23f8e6b0%27/%3E%3Cstop offset=%27.5%27 stop-color=%27%23d9b76d%27/%3E%3Cstop offset=%271%27 stop-color=%27%239c7430%27/%3E%3C/linearGradient%3E%3Cpath id=%27s0%27 d=%27M21.4 13A8.4 8.4 0 1 1 4.6 13A8.4 8.4 0 1 1 21.4 13ZM18.9 13A5.9 5.9 0 1 0 7.1 13A5.9 5.9 0 1 0 18.9 13ZM20.5 17.9L28.5 25.9A1.8 1.8 0 0 1 25.9 28.5L17.9 20.5A1.8 1.8 0 0 1 20.5 17.9Z%27/%3E%3Cpath id=%27s1%27 d=%27M9.9 12.2L16.1 12.2L16.1 13.8L9.9 13.8ZM13.8 9.9L13.8 16.1L12.2 16.1L12.2 9.9Z%27/%3E%3C/defs%3E%3Cg stroke-linejoin=%27round%27 stroke-linecap=%27round%27%3E%3Cuse href=%27%23s0%27 fill=%27none%27 stroke=%27%23fff7e4%27 stroke-opacity=%27.2%27 stroke-width=%275.5%27/%3E%3Cuse href=%27%23s0%27 fill=%27none%27 stroke=%27%23fff7e4%27 stroke-opacity=%27.42%27 stroke-width=%273.8%27/%3E%3Ccircle cx=%2713%27 cy=%2713%27 r=%276%27 fill=%27%231a1308%27 fill-opacity=%27.3%27/%3E%3Cuse href=%27%23s0%27 fill=%27%231a1308%27 stroke=%27%231a1308%27 stroke-width=%272.1%27/%3E%3Cuse href=%27%23s0%27 fill=%27url(%23g)%27/%3E%3Cuse href=%27%23s1%27 fill=%27%231a1308%27 stroke=%27%231a1308%27 stroke-width=%271.9%27/%3E%3Cuse href=%27%23s1%27 fill=%27url(%23g)%27/%3E%3C/g%3E%3C/svg%3E'); --cu-zoomin-2:url('data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2764%27 height=%2764%27 viewBox=%270 0 32 32%27%3E%3Cdefs%3E%3ClinearGradient id=%27g%27 x2=%271%27 y2=%271%27%3E%3Cstop stop-color=%27%23f8e6b0%27/%3E%3Cstop offset=%27.5%27 stop-color=%27%23d9b76d%27/%3E%3Cstop offset=%271%27 stop-color=%27%239c7430%27/%3E%3C/linearGradient%3E%3Cpath id=%27s0%27 d=%27M21.4 13A8.4 8.4 0 1 1 4.6 13A8.4 8.4 0 1 1 21.4 13ZM18.9 13A5.9 5.9 0 1 0 7.1 13A5.9 5.9 0 1 0 18.9 13ZM20.5 17.9L28.5 25.9A1.8 1.8 0 0 1 25.9 28.5L17.9 20.5A1.8 1.8 0 0 1 20.5 17.9Z%27/%3E%3Cpath id=%27s1%27 d=%27M9.9 12.2L16.1 12.2L16.1 13.8L9.9 13.8ZM13.8 9.9L13.8 16.1L12.2 16.1L12.2 9.9Z%27/%3E%3C/defs%3E%3Cg stroke-linejoin=%27round%27 stroke-linecap=%27round%27%3E%3Cuse href=%27%23s0%27 fill=%27none%27 stroke=%27%23fff7e4%27 stroke-opacity=%27.2%27 stroke-width=%275.5%27/%3E%3Cuse href=%27%23s0%27 fill=%27none%27 stroke=%27%23fff7e4%27 stroke-opacity=%27.42%27 stroke-width=%273.8%27/%3E%3Ccircle cx=%2713%27 cy=%2713%27 r=%276%27 fill=%27%231a1308%27 fill-opacity=%27.3%27/%3E%3Cuse href=%27%23s0%27 fill=%27%231a1308%27 stroke=%27%231a1308%27 stroke-width=%272.1%27/%3E%3Cuse href=%27%23s0%27 fill=%27url(%23g)%27/%3E%3Cuse href=%27%23s1%27 fill=%27%231a1308%27 stroke=%27%231a1308%27 stroke-width=%271.9%27/%3E%3Cuse href=%27%23s1%27 fill=%27url(%23g)%27/%3E%3C/g%3E%3C/svg%3E'); }
  :root{ --cu-progress-1:url('data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2732%27 height=%2732%27 viewBox=%270 0 32 32%27%3E%3Cdefs%3E%3ClinearGradient id=%27g%27 x2=%271%27 y2=%271%27%3E%3Cstop stop-color=%27%23f8e6b0%27/%3E%3Cstop offset=%27.5%27 stop-color=%27%23d9b76d%27/%3E%3Cstop offset=%271%27 stop-color=%27%239c7430%27/%3E%3C/linearGradient%3E%3Cpath id=%27s0%27 d=%27M15.4 14.4L8.9 13.3L5 18.7L5 4ZM9.5 11.7L13.2 20.9L11.1 21.8L7.3 12.6ZM15.4 23.2A2.5 2.5 0 1 1 10.5 23.2A2.5 2.5 0 1 1 15.4 23.2Z%27/%3E%3C/defs%3E%3Cg stroke-linejoin=%27round%27 stroke-linecap=%27round%27%3E%3Cuse href=%27%23s0%27 fill=%27none%27 stroke=%27%23fff7e4%27 stroke-opacity=%27.2%27 stroke-width=%275.7%27/%3E%3Cuse href=%27%23s0%27 fill=%27none%27 stroke=%27%23fff7e4%27 stroke-opacity=%27.42%27 stroke-width=%274%27/%3E%3Cuse href=%27%23s0%27 fill=%27%231a1308%27 stroke=%27%231a1308%27 stroke-width=%272.3%27/%3E%3Cuse href=%27%23s0%27 fill=%27url(%23g)%27/%3E%3Cpath d=%27M5 9.7A5.7 5.7 0 0 0 9 8%27 fill=%27none%27 stroke=%27%231a1308%27 stroke-width=%27.9%27/%3E%3Ccircle cx=%2713%27 cy=%2723.2%27 r=%27.9%27 fill=%27%231a1308%27/%3E%3Cpath d=%27M24.2 19A5.2 5.2 0 1 1 19 24.2%27 fill=%27none%27 stroke=%27%23fff7e4%27 stroke-opacity=%27.42%27 stroke-width=%275.4%27/%3E%3Cpath d=%27M24.2 19A5.2 5.2 0 1 1 19 24.2%27 fill=%27none%27 stroke=%27%231a1308%27 stroke-width=%273.6%27/%3E%3Cpath d=%27M24.2 19A5.2 5.2 0 1 1 19 24.2%27 fill=%27none%27 stroke=%27%23e9c97c%27 stroke-width=%271.6%27/%3E%3Cpath d=%27M24.2 24.2L19 24.2%27 stroke=%27%231a1308%27 stroke-width=%272.8%27/%3E%3Cpath d=%27M24.2 24.2L19 24.2%27 stroke=%27%23e9c97c%27 stroke-width=%271%27/%3E%3Ccircle cx=%2724.2%27 cy=%2724.2%27 r=%271.5%27 fill=%27%23f5dfa0%27 stroke=%27%231a1308%27 stroke-width=%27.9%27/%3E%3C/g%3E%3C/svg%3E'); --cu-progress-2:url('data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2764%27 height=%2764%27 viewBox=%270 0 32 32%27%3E%3Cdefs%3E%3ClinearGradient id=%27g%27 x2=%271%27 y2=%271%27%3E%3Cstop stop-color=%27%23f8e6b0%27/%3E%3Cstop offset=%27.5%27 stop-color=%27%23d9b76d%27/%3E%3Cstop offset=%271%27 stop-color=%27%239c7430%27/%3E%3C/linearGradient%3E%3Cpath id=%27s0%27 d=%27M15.4 14.4L8.9 13.3L5 18.7L5 4ZM9.5 11.7L13.2 20.9L11.1 21.8L7.3 12.6ZM15.4 23.2A2.5 2.5 0 1 1 10.5 23.2A2.5 2.5 0 1 1 15.4 23.2Z%27/%3E%3C/defs%3E%3Cg stroke-linejoin=%27round%27 stroke-linecap=%27round%27%3E%3Cuse href=%27%23s0%27 fill=%27none%27 stroke=%27%23fff7e4%27 stroke-opacity=%27.2%27 stroke-width=%275.7%27/%3E%3Cuse href=%27%23s0%27 fill=%27none%27 stroke=%27%23fff7e4%27 stroke-opacity=%27.42%27 stroke-width=%274%27/%3E%3Cuse href=%27%23s0%27 fill=%27%231a1308%27 stroke=%27%231a1308%27 stroke-width=%272.3%27/%3E%3Cuse href=%27%23s0%27 fill=%27url(%23g)%27/%3E%3Cpath d=%27M5 9.7A5.7 5.7 0 0 0 9 8%27 fill=%27none%27 stroke=%27%231a1308%27 stroke-width=%27.9%27/%3E%3Ccircle cx=%2713%27 cy=%2723.2%27 r=%27.9%27 fill=%27%231a1308%27/%3E%3Cpath d=%27M24.2 19A5.2 5.2 0 1 1 19 24.2%27 fill=%27none%27 stroke=%27%23fff7e4%27 stroke-opacity=%27.42%27 stroke-width=%275.4%27/%3E%3Cpath d=%27M24.2 19A5.2 5.2 0 1 1 19 24.2%27 fill=%27none%27 stroke=%27%231a1308%27 stroke-width=%273.6%27/%3E%3Cpath d=%27M24.2 19A5.2 5.2 0 1 1 19 24.2%27 fill=%27none%27 stroke=%27%23e9c97c%27 stroke-width=%271.6%27/%3E%3Cpath d=%27M24.2 24.2L19 24.2%27 stroke=%27%231a1308%27 stroke-width=%272.8%27/%3E%3Cpath d=%27M24.2 24.2L19 24.2%27 stroke=%27%23e9c97c%27 stroke-width=%271%27/%3E%3Ccircle cx=%2724.2%27 cy=%2724.2%27 r=%271.5%27 fill=%27%23f5dfa0%27 stroke=%27%231a1308%27 stroke-width=%27.9%27/%3E%3C/g%3E%3C/svg%3E'); }
  :root{ --cu-gate-1:url('data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2748%27 height=%2748%27 viewBox=%270 0 48 48%27%3E%3Cdefs%3E%3ClinearGradient id=%27g%27 x2=%271%27 y2=%271%27%3E%3Cstop stop-color=%27%23f8e6b0%27/%3E%3Cstop offset=%27.5%27 stop-color=%27%23d9b76d%27/%3E%3Cstop offset=%271%27 stop-color=%27%239c7430%27/%3E%3C/linearGradient%3E%3Cfilter id=%27b%27 filterUnits=%27userSpaceOnUse%27 x=%27-8%27 y=%27-8%27 width=%2764%27 height=%2764%27%3E%3CfeGaussianBlur stdDeviation=%272.3%27/%3E%3C/filter%3E%3Cpath id=%27s0%27 d=%27M26.7 34.1L18.7 16.6L21.5 15.1L31.6 31.5ZM27.9 35.3L9.7 25.3L11.3 22.1L30.3 30.3ZM33.3 33.6L37.5 37.7A2.3 2.3 0 0 1 34.3 41L30.1 37A2.3 2.3 0 0 1 33.3 33.6ZM34.4 32.8A5.2 5.2 0 1 1 23.9 32.8A5.2 5.2 0 1 1 34.4 32.8Z%27/%3E%3Cpath id=%27s1%27 d=%27M9.7 25.3L5.9 21.5L11.3 22.1Z%27/%3E%3Cpath id=%27s2%27 d=%27M19.1 16.4L17 10L21.1 15.3Z%27/%3E%3C/defs%3E%3Cg stroke-linejoin=%27round%27 stroke-linecap=%27round%27%3E%3Cuse href=%27%23s0%27 fill=%27%23f3c763%27 stroke=%27%23f3c763%27 stroke-width=%275.7%27 filter=%27url(%23b)%27 opacity=%270.72%27/%3E%3Cuse href=%27%23s1%27 fill=%27%23f3c763%27 stroke=%27%23f3c763%27 stroke-width=%275.7%27 filter=%27url(%23b)%27 opacity=%270.72%27/%3E%3Cuse href=%27%23s2%27 fill=%27%23f3c763%27 stroke=%27%23f3c763%27 stroke-width=%275%27 filter=%27url(%23b)%27 opacity=%270.72%27/%3E%3Cuse href=%27%23s0%27 fill=%27%231a1308%27 stroke=%27%231a1308%27 stroke-width=%273.3%27/%3E%3Cuse href=%27%23s0%27 fill=%27url(%23g)%27/%3E%3Ccircle cx=%2729.1%27 cy=%2732.8%27 r=%272.2%27 fill=%27%23f8e6b0%27 stroke=%27%231a1308%27 stroke-width=%271.4%27/%3E%3Cpath d=%27M32.9 38.8L35.2 36.4%27 fill=%27none%27 stroke=%27%231a1308%27 stroke-width=%271%27/%3E%3Cuse href=%27%23s1%27 fill=%27%231a1308%27 stroke=%27%231a1308%27 stroke-width=%273.3%27/%3E%3Cuse href=%27%23s1%27 fill=%27%234a3b22%27/%3E%3Cuse href=%27%23s2%27 fill=%27%231a1308%27 stroke=%27%231a1308%27 stroke-width=%272.6%27/%3E%3Cuse href=%27%23s2%27 fill=%27%23eef0f2%27/%3E%3Cpath d=%27M17 2.2L18.5 8.5L24.8 10L18.5 11.5L17 17.8L15.5 11.5L9.2 10L15.5 8.5Z%27 fill=%27%23fff6dc%27 opacity=%27.95%27/%3E%3Ccircle cx=%2717%27 cy=%2710%27 r=%274.5%27 fill=%27%23fff1c8%27 opacity=%27.35%27 filter=%27url(%23b)%27/%3E%3C/g%3E%3C/svg%3E'); --cu-gate-2:url('data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2796%27 height=%2796%27 viewBox=%270 0 48 48%27%3E%3Cdefs%3E%3ClinearGradient id=%27g%27 x2=%271%27 y2=%271%27%3E%3Cstop stop-color=%27%23f8e6b0%27/%3E%3Cstop offset=%27.5%27 stop-color=%27%23d9b76d%27/%3E%3Cstop offset=%271%27 stop-color=%27%239c7430%27/%3E%3C/linearGradient%3E%3Cfilter id=%27b%27 filterUnits=%27userSpaceOnUse%27 x=%27-8%27 y=%27-8%27 width=%2764%27 height=%2764%27%3E%3CfeGaussianBlur stdDeviation=%272.3%27/%3E%3C/filter%3E%3Cpath id=%27s0%27 d=%27M26.7 34.1L18.7 16.6L21.5 15.1L31.6 31.5ZM27.9 35.3L9.7 25.3L11.3 22.1L30.3 30.3ZM33.3 33.6L37.5 37.7A2.3 2.3 0 0 1 34.3 41L30.1 37A2.3 2.3 0 0 1 33.3 33.6ZM34.4 32.8A5.2 5.2 0 1 1 23.9 32.8A5.2 5.2 0 1 1 34.4 32.8Z%27/%3E%3Cpath id=%27s1%27 d=%27M9.7 25.3L5.9 21.5L11.3 22.1Z%27/%3E%3Cpath id=%27s2%27 d=%27M19.1 16.4L17 10L21.1 15.3Z%27/%3E%3C/defs%3E%3Cg stroke-linejoin=%27round%27 stroke-linecap=%27round%27%3E%3Cuse href=%27%23s0%27 fill=%27%23f3c763%27 stroke=%27%23f3c763%27 stroke-width=%275.7%27 filter=%27url(%23b)%27 opacity=%270.72%27/%3E%3Cuse href=%27%23s1%27 fill=%27%23f3c763%27 stroke=%27%23f3c763%27 stroke-width=%275.7%27 filter=%27url(%23b)%27 opacity=%270.72%27/%3E%3Cuse href=%27%23s2%27 fill=%27%23f3c763%27 stroke=%27%23f3c763%27 stroke-width=%275%27 filter=%27url(%23b)%27 opacity=%270.72%27/%3E%3Cuse href=%27%23s0%27 fill=%27%231a1308%27 stroke=%27%231a1308%27 stroke-width=%273.3%27/%3E%3Cuse href=%27%23s0%27 fill=%27url(%23g)%27/%3E%3Ccircle cx=%2729.1%27 cy=%2732.8%27 r=%272.2%27 fill=%27%23f8e6b0%27 stroke=%27%231a1308%27 stroke-width=%271.4%27/%3E%3Cpath d=%27M32.9 38.8L35.2 36.4%27 fill=%27none%27 stroke=%27%231a1308%27 stroke-width=%271%27/%3E%3Cuse href=%27%23s1%27 fill=%27%231a1308%27 stroke=%27%231a1308%27 stroke-width=%273.3%27/%3E%3Cuse href=%27%23s1%27 fill=%27%234a3b22%27/%3E%3Cuse href=%27%23s2%27 fill=%27%231a1308%27 stroke=%27%231a1308%27 stroke-width=%272.6%27/%3E%3Cuse href=%27%23s2%27 fill=%27%23eef0f2%27/%3E%3Cpath d=%27M17 2.2L18.5 8.5L24.8 10L18.5 11.5L17 17.8L15.5 11.5L9.2 10L15.5 8.5Z%27 fill=%27%23fff6dc%27 opacity=%27.95%27/%3E%3Ccircle cx=%2717%27 cy=%2710%27 r=%274.5%27 fill=%27%23fff1c8%27 opacity=%27.35%27 filter=%27url(%23b)%27/%3E%3C/g%3E%3C/svg%3E'); }
  :root{ --cu-gateon-1:url('data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2748%27 height=%2748%27 viewBox=%270 0 48 48%27%3E%3Cdefs%3E%3ClinearGradient id=%27g%27 x2=%271%27 y2=%271%27%3E%3Cstop stop-color=%27%23f8e6b0%27/%3E%3Cstop offset=%27.5%27 stop-color=%27%23d9b76d%27/%3E%3Cstop offset=%271%27 stop-color=%27%239c7430%27/%3E%3C/linearGradient%3E%3Cfilter id=%27b%27 filterUnits=%27userSpaceOnUse%27 x=%27-8%27 y=%27-8%27 width=%2764%27 height=%2764%27%3E%3CfeGaussianBlur stdDeviation=%272.3%27/%3E%3C/filter%3E%3Cpath id=%27s0%27 d=%27M26.7 34.1L18.7 16.6L21.5 15.1L31.6 31.5ZM27.9 35.3L9.7 25.3L11.3 22.1L30.3 30.3ZM33.3 33.6L37.5 37.7A2.3 2.3 0 0 1 34.3 41L30.1 37A2.3 2.3 0 0 1 33.3 33.6ZM34.4 32.8A5.2 5.2 0 1 1 23.9 32.8A5.2 5.2 0 1 1 34.4 32.8Z%27/%3E%3Cpath id=%27s1%27 d=%27M9.7 25.3L5.9 21.5L11.3 22.1Z%27/%3E%3Cpath id=%27s2%27 d=%27M19.1 16.4L17 10L21.1 15.3Z%27/%3E%3C/defs%3E%3Cg stroke-linejoin=%27round%27 stroke-linecap=%27round%27%3E%3Cuse href=%27%23s0%27 fill=%27%23f3c763%27 stroke=%27%23f3c763%27 stroke-width=%275.7%27 filter=%27url(%23b)%27 opacity=%270.95%27/%3E%3Cuse href=%27%23s1%27 fill=%27%23f3c763%27 stroke=%27%23f3c763%27 stroke-width=%275.7%27 filter=%27url(%23b)%27 opacity=%270.95%27/%3E%3Cuse href=%27%23s2%27 fill=%27%23f3c763%27 stroke=%27%23f3c763%27 stroke-width=%275%27 filter=%27url(%23b)%27 opacity=%270.95%27/%3E%3Cuse href=%27%23s0%27 fill=%27%231a1308%27 stroke=%27%231a1308%27 stroke-width=%273.3%27/%3E%3Cuse href=%27%23s0%27 fill=%27url(%23g)%27/%3E%3Ccircle cx=%2729.1%27 cy=%2732.8%27 r=%272.2%27 fill=%27%23f8e6b0%27 stroke=%27%231a1308%27 stroke-width=%271.4%27/%3E%3Cpath d=%27M32.9 38.8L35.2 36.4%27 fill=%27none%27 stroke=%27%231a1308%27 stroke-width=%271%27/%3E%3Cuse href=%27%23s1%27 fill=%27%231a1308%27 stroke=%27%231a1308%27 stroke-width=%273.3%27/%3E%3Cuse href=%27%23s1%27 fill=%27%234a3b22%27/%3E%3Cuse href=%27%23s2%27 fill=%27%231a1308%27 stroke=%27%231a1308%27 stroke-width=%272.6%27/%3E%3Cuse href=%27%23s2%27 fill=%27%23eef0f2%27/%3E%3Cpath d=%27M17 3.7L18.5 8.5L23.3 10L18.5 11.5L17 16.3L15.5 11.5L10.7 10L15.5 8.5Z%27 fill=%27%23fff6dc%27 opacity=%27.95%27/%3E%3Ccircle cx=%2717%27 cy=%2710%27 r=%274.5%27 fill=%27%23fff1c8%27 opacity=%27.35%27 filter=%27url(%23b)%27/%3E%3Ccircle cx=%2717%27 cy=%2710%27 r=%278.4%27 fill=%27none%27 stroke=%27%23ffd98a%27 stroke-width=%273.6%27 opacity=%27.55%27 filter=%27url(%23b)%27/%3E%3Ccircle cx=%2717%27 cy=%2710%27 r=%278.4%27 fill=%27none%27 stroke=%27%23fff0c8%27 stroke-width=%271.1%27/%3E%3Cpath d=%27M23 10L27.8 10M17 16L17 20.8M11 10L6.2 10M17 4L17 -.8%27 fill=%27none%27 stroke=%27%23fff0c8%27 stroke-width=%271.1%27/%3E%3C/g%3E%3C/svg%3E'); --cu-gateon-2:url('data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2796%27 height=%2796%27 viewBox=%270 0 48 48%27%3E%3Cdefs%3E%3ClinearGradient id=%27g%27 x2=%271%27 y2=%271%27%3E%3Cstop stop-color=%27%23f8e6b0%27/%3E%3Cstop offset=%27.5%27 stop-color=%27%23d9b76d%27/%3E%3Cstop offset=%271%27 stop-color=%27%239c7430%27/%3E%3C/linearGradient%3E%3Cfilter id=%27b%27 filterUnits=%27userSpaceOnUse%27 x=%27-8%27 y=%27-8%27 width=%2764%27 height=%2764%27%3E%3CfeGaussianBlur stdDeviation=%272.3%27/%3E%3C/filter%3E%3Cpath id=%27s0%27 d=%27M26.7 34.1L18.7 16.6L21.5 15.1L31.6 31.5ZM27.9 35.3L9.7 25.3L11.3 22.1L30.3 30.3ZM33.3 33.6L37.5 37.7A2.3 2.3 0 0 1 34.3 41L30.1 37A2.3 2.3 0 0 1 33.3 33.6ZM34.4 32.8A5.2 5.2 0 1 1 23.9 32.8A5.2 5.2 0 1 1 34.4 32.8Z%27/%3E%3Cpath id=%27s1%27 d=%27M9.7 25.3L5.9 21.5L11.3 22.1Z%27/%3E%3Cpath id=%27s2%27 d=%27M19.1 16.4L17 10L21.1 15.3Z%27/%3E%3C/defs%3E%3Cg stroke-linejoin=%27round%27 stroke-linecap=%27round%27%3E%3Cuse href=%27%23s0%27 fill=%27%23f3c763%27 stroke=%27%23f3c763%27 stroke-width=%275.7%27 filter=%27url(%23b)%27 opacity=%270.95%27/%3E%3Cuse href=%27%23s1%27 fill=%27%23f3c763%27 stroke=%27%23f3c763%27 stroke-width=%275.7%27 filter=%27url(%23b)%27 opacity=%270.95%27/%3E%3Cuse href=%27%23s2%27 fill=%27%23f3c763%27 stroke=%27%23f3c763%27 stroke-width=%275%27 filter=%27url(%23b)%27 opacity=%270.95%27/%3E%3Cuse href=%27%23s0%27 fill=%27%231a1308%27 stroke=%27%231a1308%27 stroke-width=%273.3%27/%3E%3Cuse href=%27%23s0%27 fill=%27url(%23g)%27/%3E%3Ccircle cx=%2729.1%27 cy=%2732.8%27 r=%272.2%27 fill=%27%23f8e6b0%27 stroke=%27%231a1308%27 stroke-width=%271.4%27/%3E%3Cpath d=%27M32.9 38.8L35.2 36.4%27 fill=%27none%27 stroke=%27%231a1308%27 stroke-width=%271%27/%3E%3Cuse href=%27%23s1%27 fill=%27%231a1308%27 stroke=%27%231a1308%27 stroke-width=%273.3%27/%3E%3Cuse href=%27%23s1%27 fill=%27%234a3b22%27/%3E%3Cuse href=%27%23s2%27 fill=%27%231a1308%27 stroke=%27%231a1308%27 stroke-width=%272.6%27/%3E%3Cuse href=%27%23s2%27 fill=%27%23eef0f2%27/%3E%3Cpath d=%27M17 3.7L18.5 8.5L23.3 10L18.5 11.5L17 16.3L15.5 11.5L10.7 10L15.5 8.5Z%27 fill=%27%23fff6dc%27 opacity=%27.95%27/%3E%3Ccircle cx=%2717%27 cy=%2710%27 r=%274.5%27 fill=%27%23fff1c8%27 opacity=%27.35%27 filter=%27url(%23b)%27/%3E%3Ccircle cx=%2717%27 cy=%2710%27 r=%278.4%27 fill=%27none%27 stroke=%27%23ffd98a%27 stroke-width=%273.6%27 opacity=%27.55%27 filter=%27url(%23b)%27/%3E%3Ccircle cx=%2717%27 cy=%2710%27 r=%278.4%27 fill=%27none%27 stroke=%27%23fff0c8%27 stroke-width=%271.1%27/%3E%3Cpath d=%27M23 10L27.8 10M17 16L17 20.8M11 10L6.2 10M17 4L17 -.8%27 fill=%27none%27 stroke=%27%23fff0c8%27 stroke-width=%271.1%27/%3E%3C/g%3E%3C/svg%3E'); }
  :root{ --cur-default:var(--cu-arrow-1) 5 4,default; --cur-pointer:var(--cu-compass-1) 11 3,pointer; --cur-text:var(--cu-text-1) 16 16,text; --cur-grab:var(--cu-grab-1) 16 16,grab; --cur-grabbing:var(--cu-grabbing-1) 16 16,grabbing; --cur-zoom-in:var(--cu-zoomin-1) 13 13,zoom-in; --cur-progress:var(--cu-progress-1) 5 4,progress; --cur-gate:var(--cu-gate-1) 17 10,var(--cu-compass-1) 11 3,pointer; --cur-gate-on:var(--cu-gateon-1) 17 10,var(--cu-compass-1) 11 3,pointer; }
  @supports (cursor:image-set(url('data:,a') 1x) 1 1,auto){ :root{ --cur-default:image-set(var(--cu-arrow-1) 1x,var(--cu-arrow-2) 2x) 5 4,default; --cur-pointer:image-set(var(--cu-compass-1) 1x,var(--cu-compass-2) 2x) 11 3,pointer; --cur-text:image-set(var(--cu-text-1) 1x,var(--cu-text-2) 2x) 16 16,text; --cur-grab:image-set(var(--cu-grab-1) 1x,var(--cu-grab-2) 2x) 16 16,grab; --cur-grabbing:image-set(var(--cu-grabbing-1) 1x,var(--cu-grabbing-2) 2x) 16 16,grabbing; --cur-zoom-in:image-set(var(--cu-zoomin-1) 1x,var(--cu-zoomin-2) 2x) 13 13,zoom-in; --cur-progress:image-set(var(--cu-progress-1) 1x,var(--cu-progress-2) 2x) 5 4,progress; --cur-gate:image-set(var(--cu-gate-1) 1x,var(--cu-gate-2) 2x) 17 10,image-set(var(--cu-compass-1) 1x,var(--cu-compass-2) 2x) 11 3,pointer; --cur-gate-on:image-set(var(--cu-gateon-1) 1x,var(--cu-gateon-2) 2x) 17 10,image-set(var(--cu-compass-1) 1x,var(--cu-compass-2) 2x) 11 3,pointer; } }
  /* 기본 · 누를 수 있는 것 · 글자 칸 */
  html{ cursor:var(--cur-default); }
  :where(a[href],area[href],button,summary,select,label[for],[role=button],[role=link],[role=tab],[role=option],[role=menuitem],[role=menuitemradio],[role=menuitemcheckbox],[role=switch],[role=checkbox],[role=radio],input:is([type=checkbox],[type=radio],[type=range],[type=color],[type=file],[type=submit],[type=button],[type=reset],[type=image]),[data-person],[data-pid],[data-fid],[data-thm],[data-mp],[data-phil],[data-try],[data-go]){ cursor:var(--cur-pointer); }
  :where(input:not([type]),input:is([type=text],[type=search],[type=email],[type=url],[type=tel],[type=password],[type=number]),textarea,[contenteditable]:not([contenteditable=false])){ cursor:var(--cur-text); }
  /* 스크립트가 style 로 직접 넣은 커서 (나선 캔버스, 내보내기 미리보기) */
  [style*='cursor: pointer;'],[style*='cursor:pointer']{ cursor:var(--cur-pointer) !important; }
  [style*='cursor: default;'],[style*='cursor:default']{ cursor:var(--cur-default) !important; }
  [style*='cursor: grab;'],[style*='cursor:grab']{ cursor:var(--cur-grab) !important; }
  [style*='cursor: grabbing;'],[style*='cursor:grabbing']{ cursor:var(--cur-grabbing) !important; }
  [style*='cursor: text;'],[style*='cursor:text']{ cursor:var(--cur-text) !important; }
  /* 되비춤 · 사이트 css 의 cursor 규칙과 같은 선택자, 같은 차례 */
  .btn-gate,.brand,.tab,.res,.btn,.chip{cursor:var(--cur-pointer)}.chip.static{cursor:var(--cur-default)}.pchip,.seg button,.toggle,.lane-h,.pill,.ibtn{cursor:var(--cur-pointer)}.ibtn[disabled]{cursor:var(--cur-default)}.count-b,.rrow,.gchip{cursor:var(--cur-pointer)}.fview.grab{cursor:var(--cur-grab)}.fview.drag{cursor:var(--cur-grabbing)}.fcard{cursor:var(--cur-pointer)}.fcard.center,.fcard.ghost{cursor:var(--cur-default)}.trail .t,.st-item,.st-card,.cedge-hit,.cnode,.bridge .bt,.ms button,.hbar,.mx .h,.mx .rh,.mx .cell2,.rung,.gate-lang button{cursor:var(--cur-pointer)}.badge{cursor:var(--cur-default)}button.badge,.throw,.prow,.ovb,.ffb,.tmini,.tdot,.trow summary,.mp-tile,.phg-h,.phg-n,.lanec{cursor:var(--cur-pointer)}.ch-jump .chip[disabled]{cursor:var(--cur-default)}button.chx,.pcard,.qopt{cursor:var(--cur-pointer)}.qopt[disabled]{cursor:var(--cur-default)}a.badge,.ppu .bt, .pp-s .bt{cursor:var(--cur-pointer)}.tl-scroll{cursor:var(--cur-grab)}.tl-scroll.drag{cursor:var(--cur-grabbing)}.band,.tm{cursor:var(--cur-default)}.tm.thm,.tlb,.totop,.ft-keys,.sw-row,.gate-quiet,.th-n,.rt-bar [role='tab'],.cn-n,.score tbody th button,.bgm-chip{cursor:var(--cur-pointer)}.chip.static{cursor:var(--cur-default)}.bgm-pill{cursor:var(--cur-pointer)}@media (max-width: 760px){.dock a, .dock button{cursor:var(--cur-pointer)}}.mf-stage,.mf-btn,.mf-ch,.tg-x,.tg-think,.tg-off,.tg-off input,.tg-mini,.tg-bub .tg-more,.td-tab,.td-x{cursor:var(--cur-pointer)}.fs-dot{cursor:var(--cur-default)}.fs-dot[data-person],.e2-card,.e2-seg,.e2-badge,.e2-x,.e2-go,.e2-ic,.e2-tabs [role='tab'],.e2-ref,.xp[data-xptap] > .xp-brief,.xp-btn,.xpc-btn{cursor:var(--cur-pointer)}.wkd{cursor:var(--cur-default)}.era-rb{cursor:var(--cur-pointer)}.era-rb:disabled{cursor:var(--cur-default)}.bio-p,.bio-btn,.mx-pair button,.fhead .fh-t,.fr-av,.flist .fg-t{cursor:var(--cur-pointer)}.mxo-db[disabled]{cursor:var(--cur-progress)}.mxo-cv{cursor:var(--cur-grab)}.mxo-cv.grabbing{cursor:var(--cur-grabbing)}.mxo-zoom button,.mxs-x,.hx-door,.hx-open,.hx-quiet,.hx-skip,.hc-seg button,.hc-reset,.hc-fig,.hc-vb{cursor:var(--cur-pointer)}.at .btn[aria-busy='true'], .at-sheet .btn[aria-busy='true'], .at-pk .btn[aria-busy='true']{cursor:var(--cur-progress)}.at-ib{cursor:var(--cur-pointer)}.at-st-b{cursor:var(--cur-zoom-in)}.at-card,.at-cb-n button,.at-tb,.at-pk-pack,.at-pk-x,.at-seg button,.at-qz-b,.at-qz-back,.at-link,.at-tm-c{cursor:var(--cur-pointer)}.at-po-art, .at-wl-art, .at-md-art, .at-hn-art{cursor:var(--cur-zoom-in)}.at-po-art[aria-busy='true'], .at-wl-art[aria-busy='true'], .at-md-art[aria-busy='true'], .at-hn-art[aria-busy='true']{cursor:var(--cur-progress)}
  /* 쓸 수 없는 단추는 누르는 컴퍼스 대신 화살표 */
  :where(button,input,select,textarea,[role=button],[role=tab]):is(:disabled,[aria-disabled=true]){ cursor:var(--cur-default); }
  /* 입구 · 대문과 전당 의식에서는 빛나는 큰 컴퍼스, 누를 수 있는 곳에서는 바늘 끝에 작은 작도 원 */
  #gate,#gate *,#hgate,#hgate *{ cursor:var(--cur-gate); }
  #gate :is(a[href],button,[role=button],label,summary,select,.hx-door),#gate :is(a[href],button,[role=button],label,summary,select,.hx-door) *,#hgate :is(a[href],button,[role=button],label,summary,select,.hx-door),#hgate :is(a[href],button,[role=button],label,summary,select,.hx-door) *{ cursor:var(--cur-gate-on); }
}
/* 대문 자취 캔버스 · src/v_cursor.js 가 섬세한 포인터에서 대문이 열려 있는 동안만 만든다 */
.cur-trail{ position:fixed; inset:0; width:100%; height:100%; z-index:1001; pointer-events:none; }
/* 누른 자리의 작은 작도 · 원 하나와 반지름 하나 */
.cur-rip{ --cur-c:var(--accent, #d6b36a); position:fixed; z-index:2147483000; width:26px; height:26px; margin:-13px 0 0 -13px; box-sizing:border-box; border:1px solid var(--cur-c); border-radius:50%; pointer-events:none; opacity:0; box-shadow:0 0 7px -2px var(--cur-c); animation:cur-rip .4s cubic-bezier(.2,.7,.3,1) forwards; }
.cur-rip::before{ content:''; position:absolute; left:50%; top:50%; width:3px; height:3px; margin:-1.5px 0 0 -1.5px; border-radius:50%; background:var(--cur-c); }
.cur-rip::after{ content:''; position:absolute; left:50%; top:50%; width:50%; height:1px; margin-top:-.5px; background:var(--cur-c); transform-origin:0 50%; transform:rotate(var(--cur-a, -35deg)); }
body.gate-lock .cur-rip{ --cur-c:#e8c77a; }
@keyframes cur-rip{ 0%{ opacity:.85; transform:scale(.4); } 70%{ opacity:.5; } 100%{ opacity:0; transform:scale(1); } }
@media (prefers-reduced-motion: reduce){ .cur-rip,.cur-trail{ display:none; } }

/* 가독성 보정 · 모든 css 뒤에 읽혀 작은 글씨의 바닥을 12px 로 올린다 · 한글은 자간을 좁힌다 */
:where(.bio-kn,.e2-bh small,.e2-card .y,.e2-tk,.e2-veh small,.e2-go span,.e2-icb .route .yy,.e2-ref span,.e2-t4 thead th .fy,.fs-gap .fs-yl,.tg-k,.tg-ql,.td-k,.th-n small,.th-c em,.g-rail i,.xp-lab,.wkd-s .lab,.wkd-r .lab,.th-x .lab,.era-rb small,.wk-badge,.e2-badge.sm,.e2-steps .i,
  .lane-h small,.mapgrid .mc .n,.mapgrid .corner span,.room-stats span,.th-n i,.bio-bn,.fcard .ry,.gchip small,.tmini .y,.tlb .tl-l,.tl-head .tk,.band > span,.tl-rl,.ovb small,.ff-c small,.th-hist .y,.ax-t,.mf-cn,.hbar b,.phg-n small,.phg-c small,.pill .yr,
  .e2-card .y,.e2-icb .yy,.e2-seg span,.e2-badge,.e2-bn,.e2-icb small,.e2-icb em,.e2-tabs .n,.e2-lane small,.strip .lb,.mx .rh small,.fs-yl,.aw-nm small,.fs-hax span,.fs-kick,.fs-pl small,.fs-dots span,.fs-zl,.tp-lv,.tp-su b,.tp-ul,.seg button small,.at-st-n b,.at-nav-in b,.td-tab-d small,.pill .gb,.kb,.ck,.mst,.res-g,
  .caps,.ov-lab,.ff-lab,.fact b,.lab,.mx .stage,.ladder .st,.era-rb b,.e2-lib,.e2-take b,.e2-guide b,.e2-lane b,.e2-vlib,.fs-seg b,.fs-zs,.fg-a,.e2-legend i.b,.hs-h,.snd-h,.ft-h,.sh-k,.tg-n,.td-n,.wk-go .mono,.gchip small,
  .wm-rn small,.wm-kick,.wm-era small,.wm-ylab,.hd-pc-t small,.hd-fact-n,.sx-pc small,.sx-rk-p small,.sx-dots small,.sx-ch-i .pchip small,.sm-here){ font-size:12px !important; }
:where(.bio-kn,.e2-bh small,.e2-veh small,.e2-go span,.e2-ref span,.tg-k,.tg-ql,.td-k,.th-n small,.th-c em,.xp-lab,.wkd-s .lab,.wkd-r .lab,.th-x .lab,.era-rb small,.wk-badge):lang(ko){ letter-spacing:.02em !important; }
/* 본문 문단은 한글 기준 줄간격을 넉넉하게 */
:where(.bio-x,.wkd-s p,.th-x p,.xp-in p):lang(ko){ line-height:1.75; word-break:keep-all; overflow-wrap:anywhere; }
/* 긴 한글 제목이 어절 중간에서 끊기지 않게 */
:where(h1,h2,h3,h4,.hg-q,.pp-h h1,.vh h2):lang(ko){ word-break:keep-all; }
/* 휴대폰에서는 오늘의 수학사 탭을 날짜 배지만 남겨 본문을 덜 가리게 */
@media (max-width:760px){
  .td-tab{ width:30px; gap:0; padding:5px 0; top:auto; bottom:calc(var(--dock, 0px) + 96px + env(safe-area-inset-bottom, 0px)); transform:none; border-radius:0 10px 10px 0; }
  .td-tab:hover{ width:30px; }
  .td-tab-t{ display:none; }
}

/* 학생 탐구 주제 · 탐구 페이지 맨 위 */
.tp-sec .eyebrow{ margin-bottom:2px; }
.tp-sec > h3{ font-family:var(--serif-ko); font-size:clamp(20px,2.4vw,26px); }
.tp-lead{ margin:6px 0 14px; color:var(--ink-2); font-size:15px; line-height:1.7; max-width:68ch; }

/* 도구 막대 · 찾기, 학교급, 분야 */
.tp-tools{ display:grid; gap:10px; padding:12px; border:1px solid var(--line-soft); border-radius:14px; background:color-mix(in srgb, var(--raise) 55%, transparent); }
.tp-row{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; }
.tp-search{ position:relative; flex:1 1 260px; min-width:0; display:flex; }
.tp-search .field-in{ width:100%; height:38px; padding-left:36px; font-size:14.5px; }
.tp-search .field-in:focus-visible{ outline:2px solid color-mix(in srgb, var(--accent) 70%, transparent); outline-offset:1px; border-color:var(--accent); }
.tp-sico{ position:absolute; left:12px; top:50%; width:16px; height:16px; transform:translateY(-50%); fill:none; stroke:var(--ink-3); stroke-width:1.6; stroke-linecap:round; pointer-events:none; }
.tp-seg{ flex:none; }
.tp-seg button{ display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:38px; }
.tp-seg button small{ font-family:var(--mono); font-size:11.5px; color:var(--ink-3); font-variant-numeric:tabular-nums; }
.tp-seg button[aria-pressed='true']{ background:var(--accent); color:var(--accent-ink); }
.tp-seg button[aria-pressed='true'] small{ color:inherit; opacity:.8; }
.tp-fields{ display:flex; flex-wrap:wrap; gap:6px; }
.tp-fc{ min-height:32px; padding:4px 11px 4px 9px; }
.tp-fc > .fi{ font-size:17px; margin-left:0; }
.tp-fc.tp-fc-all{ padding-left:12px; }
.tp-fc.tp-zero:not([aria-pressed='true']){ opacity:.42; }
.tp-fc[aria-pressed='true']{ font-weight:600; }
.tp-fc-all[aria-pressed='true']{ --c:var(--accent); }
.tp-status{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin:12px 0; min-height:32px; }
.tp-count{ font-size:13.5px; color:var(--ink-2); line-height:1.5; }
.tp-count b{ font-family:var(--display); font-size:17px; color:var(--ink); font-variant-numeric:lining-nums tabular-nums; font-weight:600; margin:0 1px; }
.tp-reset{ appearance:none; border:0; background:none; margin-left:8px; padding:2px 0; font:inherit; font-size:13px; color:var(--accent); text-decoration:underline; text-underline-offset:3px; cursor:pointer; white-space:nowrap; }
.tp-rand{ flex:none; }
.tp-rand[disabled]{ opacity:.45; pointer-events:none; }

/* 주제 카드 */
.tp-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(min(340px,100%),1fr)); gap:12px; align-items:start; }
.tp{ position:relative; padding:16px 16px 12px; border:1px solid var(--line); border-radius:14px; background:var(--surface); overflow:hidden; min-width:0; scroll-margin-top:calc(var(--hdr, 64px) + 14px); transition:border-color .2s ease; }
.tp:hover{ border-color:color-mix(in srgb, var(--c, var(--accent)) 40%, var(--line)); }
.tp::before{ content:''; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--c, var(--accent)); opacity:.85; }
.tp.fc-geo{ --c:var(--f-geo); } .tp.fc-alg{ --c:var(--f-alg); } .tp.fc-ana{ --c:var(--f-ana); } .tp.fc-nt{ --c:var(--f-nt); } .tp.fc-top{ --c:var(--f-top); } .tp.fc-prob{ --c:var(--f-prob); }
.tp.fc-log{ --c:var(--f-log); } .tp.fc-comb{ --c:var(--f-comb); } .tp.fc-app{ --c:var(--f-app); } .tp.fc-cs{ --c:var(--f-cs); } .tp.fc-edu{ --c:var(--f-edu); }
.tp-top{ display:flex; align-items:center; gap:8px; margin-bottom:6px; min-width:0; }
.tp-n{ font-family:var(--display); font-size:22px; line-height:1; color:var(--c, var(--accent)); font-variant-numeric:lining-nums; }
.tp-ic{ display:inline-grid; place-items:center; width:26px; height:26px; border-radius:50%; background:color-mix(in srgb, var(--c) 14%, transparent); color:var(--c); font-size:15px; flex:none; }
.tp-fn{ flex:0 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; font-size:12px; color:var(--ink-3); white-space:nowrap; }
.tp-lvs{ flex:0 0 auto; display:flex; flex-wrap:wrap; justify-content:flex-end; gap:4px; margin-left:auto; max-width:calc(100% - 64px); }
.tp-lv{ font-size:11.5px; padding:2px 8px; border-radius:999px; border:1px solid var(--line); color:var(--ink-2); white-space:nowrap; }
.tp-lv-e{ border-color:color-mix(in srgb, var(--f-comb) 45%, var(--line)); }
.tp-lv-m{ border-color:color-mix(in srgb, var(--up) 45%, var(--line)); }
.tp-lv-h{ border-color:color-mix(in srgb, var(--f-prob) 45%, var(--line)); }
.tp-t{ font-family:var(--serif-ko); font-size:18px; line-height:1.4; font-weight:700; word-break:keep-all; overflow-wrap:anywhere; text-wrap:balance; }
.tp-q{ margin-top:6px; font-size:15px; line-height:1.65; color:var(--ink); word-break:keep-all; }
.tp-u{ margin-top:9px; display:flex; flex-wrap:wrap; gap:5px 6px; align-items:center; font-size:13px; color:var(--ink-2); }
.tp-ul{ font-size:11.5px; color:var(--ink-3); letter-spacing:.04em; margin-right:2px; }
.tp-su{ display:inline-flex; align-items:center; gap:6px; max-width:100%; padding:2px 9px 2px 3px; border:1px solid var(--line-soft); border-radius:999px; color:var(--ink-2); text-decoration:none; font-size:12.5px; line-height:1.45; transition:border-color .2s ease, color .2s ease; }
.tp-su b{ flex:none; font-weight:600; font-size:11px; padding:1px 7px; border-radius:999px; background:color-mix(in srgb, var(--c, var(--accent)) 16%, transparent); color:var(--ink); font-variant-numeric:lining-nums; }
.tp-su span{ min-width:0; overflow-wrap:anywhere; }
.tp-su:hover{ color:var(--ink); border-color:color-mix(in srgb, var(--c, var(--accent)) 55%, var(--line)); }
.tp-ux{ font-size:13px; color:var(--ink-2); }
.tp-ppl{ margin-top:10px; gap:6px; }
.tp .xp-btn{ margin-top:10px; }
.tp-st{ margin:12px 0 0; padding:0; list-style:none; counter-reset:tps; display:grid; gap:10px; font-size:14.5px; line-height:1.7; color:var(--ink); word-break:keep-all; overflow-wrap:anywhere; }
.tp-st li{ position:relative; padding-left:34px; counter-increment:tps; }
.tp-st li::before{ content:counter(tps); position:absolute; left:0; top:1px; width:24px; height:24px; border-radius:50%; display:grid; place-items:center; font-family:var(--display); font-size:13.5px; font-weight:600; line-height:1; color:var(--c, var(--accent)); border:1px solid color-mix(in srgb, var(--c, var(--accent)) 50%, var(--line)); background:color-mix(in srgb, var(--c, var(--accent)) 10%, transparent); font-variant-numeric:lining-nums; }
.tp-meta{ margin-top:12px; display:grid; gap:8px; padding:10px 12px; border-radius:10px; background:color-mix(in srgb, var(--c, var(--accent)) 7%, var(--raise)); }
.tp-meta div{ display:grid; grid-template-columns:6.4em minmax(0,1fr); gap:8px; font-size:14px; line-height:1.6; word-break:keep-all; }
.tp-meta b{ font-size:12.5px; color:var(--c, var(--accent)); font-weight:600; padding-top:1px; }

/* 선생님 노트 */
.tp-tn{ margin-top:10px; padding:10px 12px 11px; border-radius:10px; border:1px dashed color-mix(in srgb, var(--accent) 45%, var(--line)); background:color-mix(in srgb, var(--accent) 5%, var(--surface)); }
.tp-tn-h{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:6px; font-size:12px; color:var(--accent); letter-spacing:.06em; font-weight:600; }
.tp-tn-h b{ font-size:11.5px; letter-spacing:.02em; padding:1px 9px; border-radius:999px; border:1px solid color-mix(in srgb, var(--accent) 50%, var(--line)); color:var(--ink); font-weight:600; font-variant-numeric:lining-nums; }
.tp-tn dl{ display:grid; gap:6px; margin:0; }
.tp-tn dl div{ display:grid; grid-template-columns:6.4em minmax(0,1fr); gap:8px; font-size:13.5px; line-height:1.6; word-break:keep-all; }
.tp-tn dt{ font-size:12px; color:var(--ink-3); padding-top:1px; }
.tp-tn dd{ margin:0; color:var(--ink-2); overflow-wrap:anywhere; }
.tp-links{ margin-top:12px; display:flex; flex-wrap:wrap; gap:6px; }
.tp-acts{ display:inline-flex; flex-wrap:wrap; gap:6px; margin-left:auto; }
.tp-empty{ grid-column:1 / -1; display:grid; justify-items:center; gap:12px; padding:36px 16px; border:1px dashed var(--line); border-radius:14px; text-align:center; color:var(--ink-2); font-size:14.5px; }
.tp-note{ margin-top:14px; }

@media (max-width:760px){
  .tp-tools{ padding:10px; }
  .tp-row{ flex-direction:column; align-items:stretch; }
  .tp-search{ flex:none; }
  .tp-seg{ width:100%; display:grid; grid-template-columns:repeat(4,1fr); }
  .tp-seg button{ padding:8px 2px; gap:4px; }
  .tp-fields{ flex-wrap:nowrap; overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x proximity; scrollbar-width:none; padding-bottom:2px; -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent); mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent); }
  .tp-fields::-webkit-scrollbar{ display:none; }
  .tp-fields .chip{ flex:none; scroll-snap-align:start; }
  .tp-fields .chip:last-child{ margin-right:28px; }
  .tp{ padding:14px 14px 10px; }
  .tp-fn{ display:none; }
  .tp-meta div,.tp-tn dl div{ grid-template-columns:1fr; gap:2px; }
  .tp-acts{ margin-left:0; width:100%; }
  .tp-acts .btn{ flex:1; justify-content:center; }
}
@media (pointer:coarse){
  .tp-links .btn,.tp-fc,.tp-rand{ min-height:40px; }
  .tp-su{ min-height:32px; }
  .tp-seg button{ min-height:42px; }
  .tp-search .field-in{ height:44px; font-size:16px; }
}

/* 활동지 인쇄 · 고른 주제 하나를 학생용 활동지로 */
/* 활동지 인쇄 · 인쇄 상자는 src/v_export.js 의 mxPrint 가 만들고 보이고 숨긴다 */
@media print{
  #mx-printbox .tpw{ color:#000; background:#fff; font-family:var(--sans); font-size:11pt; line-height:1.6; }
  #mx-printbox .tpw-h{ display:flex; justify-content:space-between; gap:12px; padding-bottom:6px; border-bottom:1px solid #000; font-size:9pt; color:#333; }
  #mx-printbox .tpw-name{ display:flex; gap:6px; flex:0 0 60%; }
  #mx-printbox .tpw-name i{ font-style:normal; flex:1; border-bottom:1px solid #999; padding-right:4px; }
  #mx-printbox .tpw-name i:last-child{ flex:3; }
  #mx-printbox h1{ margin:14px 0 4px; font-family:var(--serif-ko); font-size:17pt; line-height:1.35; }
  #mx-printbox .tpw-q{ font-size:12pt; margin:0 0 6px; }
  #mx-printbox .tpw-m{ font-size:9pt; color:#444; margin:0 0 12px; }
  #mx-printbox .tpw-st{ margin:0; padding-left:20px; list-style:decimal; }
  #mx-printbox .tpw-st li{ display:list-item; }
  #mx-printbox .tpw-st li{ margin-bottom:8px; break-inside:avoid; }
  #mx-printbox .tpw-st p{ margin:0 0 2px; }
  #mx-printbox .tpw-lines i{ display:block; height:7mm; border-bottom:1px solid #bbb; }
  #mx-printbox .tpw-box{ margin-top:10px; padding:8px 10px; border:1px solid #888; border-radius:6px; break-inside:avoid; }
  #mx-printbox .tpw-box h2{ margin:0; font-size:11pt; }
  #mx-printbox .tpw-box p{ margin:4px 0 0; }
  #mx-printbox .tpw-f{ margin-top:12px; font-size:8pt; color:#666; text-align:right; }
}

/* ───────── 위대한 정리 애니메이션 · src/v_fields.js 의 thvFigure 짝 */
.thv{ position:relative; margin:6px -6px 4px; display:grid; gap:12px; }
.thv-stage{ position:relative; aspect-ratio:3 / 2; border-radius:14px; overflow:visible; background:radial-gradient(120% 90% at 30% 10%, color-mix(in srgb, var(--accent) 7%, var(--sunk)), var(--sunk) 70%); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--accent) 18%, var(--line-soft)), inset 0 12px 30px -24px rgba(0,0,0,.6); }
.thv-cv{ display:block; width:100%; height:100%; border-radius:14px; }
.thv-seal{ position:absolute; top:-12px; right:-10px; width:42px; height:42px; z-index:2; filter:drop-shadow(0 3px 5px rgba(0,0,0,.35)); pointer-events:none; }
.thv-seal svg{ display:block; width:100%; height:100%; }
.thv-seal .thv-rim{ transform-origin:24px 24px; animation:thv-rim 24s linear infinite; }
.thv-seal::after{ content:''; position:absolute; inset:5px; border-radius:50%; background:linear-gradient(115deg, transparent 35%, rgba(255,255,255,.55) 48%, transparent 60%); background-size:260% 100%; background-position:120% 0; mix-blend-mode:soft-light; animation:thv-shine 5.5s ease-in-out infinite; }
.thv.done .thv-seal{ animation:thv-seal-pop .7s cubic-bezier(.3,1.5,.5,1) both; }
@keyframes thv-rim{ to{ transform:rotate(360deg); } }
@keyframes thv-shine{ 0%,55%{ background-position:120% 0; } 85%,100%{ background-position:-40% 0; } }
@keyframes thv-seal-pop{ 0%{ transform:scale(1); } 45%{ transform:scale(1.18) rotate(-8deg); } 100%{ transform:scale(1); } }
.thv-pg{ position:absolute; left:14px; right:14px; bottom:-5px; height:2px; border-radius:2px; background:color-mix(in srgb, var(--ink-3) 22%, transparent); overflow:hidden; opacity:.9; }
.thv-pg i{ display:block; height:100%; background:var(--accent); transform-origin:left center; transform:scaleX(0); }
.thv.done .thv-pg{ opacity:.35; }
.thv-cap{ display:flex; align-items:flex-start; gap:10px; }
.thv-txs{ display:grid; flex:1; min-width:0; }
.thv-tx{ grid-area:1 / 1; margin:0; font-size:13px; line-height:1.6; color:var(--ink-2); opacity:0; visibility:hidden; transition:opacity .18s ease, visibility 0s linear .18s; }
.thv-tx.on{ opacity:1; visibility:visible; transition:opacity .4s ease .2s, visibility 0s linear .2s; }
.thv-tx sup,.thv-tx sub{ font-size:.72em; line-height:0; }
.thv-ctl{ display:flex; gap:6px; flex:none; }
.thv-b{ appearance:none; display:grid; place-items:center; width:32px; height:32px; padding:0; border-radius:50%; border:1px solid color-mix(in srgb, var(--accent) 45%, var(--line)); background:color-mix(in srgb, var(--accent) 8%, var(--surface)); color:var(--accent); cursor:var(--cur-pointer, pointer); transition:background .2s, border-color .2s, transform .2s; }
.thv-b:hover{ background:color-mix(in srgb, var(--accent) 18%, var(--surface)); border-color:var(--accent); }
.thv-b:active{ transform:scale(.94); }
.thv-b:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.thv-b svg{ width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.thv-b[data-thv-act='toggle'] svg path:only-child{ fill:currentColor; }
@media (pointer:coarse){ .thv-b{ width:40px; height:40px; } }
@media (max-width:420px){ .thv{ margin-left:-4px; margin-right:-4px; } .thv-seal{ width:38px; height:38px; top:-10px; right:-6px; } }
@media (prefers-reduced-motion: reduce){ .thv-seal .thv-rim,.thv-seal::after,.thv.done .thv-seal{ animation:none; } .thv-tx,.thv-tx.on{ transition:none; } }
@media print{ .thv-ctl,.thv-pg{ display:none; } }
/* 애니메이션이 잘 보이도록 위대한 정리 카드를 조금 넓게 */
#hof{ grid-template-columns:repeat(auto-fill, minmax(min(380px, 100%), 1fr)); gap:18px; }

/* ───────── 세계 지도 (world 페이지 #world-root, awards 페이지 #wm-prize) · src/v_world.js */
/* 색 · 어두운 화면이 기본, 밝은 화면은 아래 두 곳에서 같은 값으로 바꾼다 */
.wm-sec{
  --wm-sea0:#141d2a; --wm-sea1:#0c1119; --wm-land:#1d2735; --wm-slab:#070a10; --wm-coast:rgba(214,179,106,.36); --wm-grat:rgba(214,179,106,.075);
  --wm-shadow:rgba(0,0,0,.62); --wm-needle:rgba(240,234,221,.62); --wm-jade:#4fc9a4; --wm-halo:#0b0e14;
  --wm-f0:#94702e; --wm-f1:#e0bd6e; --wm-f2:#fbe7b2; --wm-fs:#6a4c19; --wm-fs2:#4a3410; --wm-fh:#fff4d6; --wm-fe:rgba(255,236,190,.5);
  --wm-l0:#6f7a8c; --wm-l1:#c9d1dd; --wm-l2:#f3f6fa; --wm-ls:#4b5566; --wm-ls2:#343c49; --wm-lh:#ffffff; --wm-le:rgba(255,255,255,.4);
  --wm-e0:#1f7a60; --wm-e1:#4cc7a1; --wm-e2:#b4f1dd; --wm-es:#175845; --wm-es2:#0f3c2f; --wm-eh:#e9fff7; --wm-ee:rgba(210,255,238,.45);
  --wm-pool:rgba(214,179,106,.34); --wm-poole:rgba(79,201,164,.32);
  --wm-fm:#d6b36a; --wm-ab:#6aa8f4; --wm-mring:#0c1119;
  --wm-g0:#b8683a; --wm-g1:#d38f3a; --wm-g2:#e3b852; --wm-g3:#efd88f; --wm-g4:#fbf2da; --wm-dring:rgba(0,0,0,0);
  --wm-bar:var(--surface); --wm-stage:transparent;
}
@media (prefers-color-scheme: light){
  :root:not([data-theme='dark']):not([data-mtheme='dark']) .wm-sec{
    --wm-sea0:#ece8df; --wm-sea1:#e2ddd1; --wm-land:#faf6ee; --wm-slab:#c9bca3; --wm-coast:rgba(134,98,26,.42); --wm-grat:rgba(134,98,26,.1);
    --wm-shadow:rgba(70,50,20,.3); --wm-needle:rgba(60,44,18,.55); --wm-jade:#15876a; --wm-halo:#faf6ee;
    --wm-f0:#9a6f1c; --wm-f1:#d4a445; --wm-f2:#f3d58d; --wm-fs:#7a5514; --wm-fs2:#5c3f0c; --wm-fh:#fff6dc; --wm-fe:rgba(120,84,20,.35);
    --wm-l0:#8390a3; --wm-l1:#b9c3d1; --wm-l2:#e8edf3; --wm-ls:#5d6878; --wm-ls2:#465060; --wm-lh:#ffffff; --wm-le:rgba(60,70,90,.3);
    --wm-e0:#157a5f; --wm-e1:#2fa985; --wm-e2:#8fdcc2; --wm-es:#11604b; --wm-es2:#0b4535; --wm-eh:#e6fff6; --wm-ee:rgba(10,80,60,.3);
    --wm-pool:rgba(166,124,36,.3); --wm-poole:rgba(21,135,106,.26);
    --wm-fm:#a67c24; --wm-ab:#1d63bd; --wm-mring:#faf6ee;
    --wm-g0:#e2a870; --wm-g1:#c7832f; --wm-g2:#a2661a; --wm-g3:#744510; --wm-g4:#3e2506; --wm-dring:rgba(60,40,10,.4);
    --wm-stage:#ebe5d8; --wm-land:#fcfaf5;
  }
}
:root[data-theme='light']:not([data-mtheme='dark']) .wm-sec,:root[data-mtheme='light'] .wm-sec{
  --wm-sea0:#ece8df; --wm-sea1:#e2ddd1; --wm-land:#faf6ee; --wm-slab:#c9bca3; --wm-coast:rgba(134,98,26,.42); --wm-grat:rgba(134,98,26,.1);
  --wm-shadow:rgba(70,50,20,.3); --wm-needle:rgba(60,44,18,.55); --wm-jade:#15876a; --wm-halo:#faf6ee;
  --wm-f0:#9a6f1c; --wm-f1:#d4a445; --wm-f2:#f3d58d; --wm-fs:#7a5514; --wm-fs2:#5c3f0c; --wm-fh:#fff6dc; --wm-fe:rgba(120,84,20,.35);
  --wm-l0:#8390a3; --wm-l1:#b9c3d1; --wm-l2:#e8edf3; --wm-ls:#5d6878; --wm-ls2:#465060; --wm-lh:#ffffff; --wm-le:rgba(60,70,90,.3);
  --wm-e0:#157a5f; --wm-e1:#2fa985; --wm-e2:#8fdcc2; --wm-es:#11604b; --wm-es2:#0b4535; --wm-eh:#e6fff6; --wm-ee:rgba(10,80,60,.3);
  --wm-pool:rgba(166,124,36,.3); --wm-poole:rgba(21,135,106,.26);
  --wm-fm:#a67c24; --wm-ab:#1d63bd; --wm-mring:#faf6ee;
  --wm-g0:#e2a870; --wm-g1:#c7832f; --wm-g2:#a2661a; --wm-g3:#744510; --wm-g4:#3e2506; --wm-dring:rgba(60,40,10,.4);
  --wm-stage:#ebe5d8; --wm-land:#fcfaf5;
}

/* 틀 */
.wm-root{ display:grid; min-width:0; }
.wm-sec{ position:relative; min-width:0; margin:4px 0 8px; }
.wm-sec *{ box-sizing:border-box; }
.wm-root > .wm-sec + .wm-sec{ margin-top:64px; padding-top:56px; border-top:1px solid var(--line-soft); }
.wm-prize{ margin:40px 0 44px; }
.wm-hd{ display:grid; gap:6px; max-width:800px; margin-bottom:20px; }
.wm-hd .eyebrow{ margin:0; }
.wm-hd h2{ font-family:var(--serif-ko); font-size:clamp(23px,2.5vw,31px); line-height:1.28; margin:0; font-weight:600; letter-spacing:-.005em; }
.wm-hd p:last-child{ color:var(--ink-2); font-size:15px; line-height:1.75; margin:0; max-width:70ch; }
.wm-kick{ font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); margin:0 0 4px; }
.wm-sub{ font-size:13px; color:var(--ink-3); margin:2px 0 0; }
.wm-note{ font-size:12.5px; line-height:1.65; color:var(--ink-3); margin:12px 2px 0; max-width:92ch; }

/* 공통 지도 바탕 */
.wm-sea0{ stop-color:var(--wm-sea0); } .wm-sea1{ stop-color:var(--wm-sea1); }
.wm-grat{ fill:none; stroke:var(--wm-grat); stroke-width:.6; vector-effect:non-scaling-stroke; }
.wm-slab{ fill:var(--wm-slab); }
.wm-land{ fill:var(--wm-land); }
.wm-coast{ fill:none; stroke:var(--wm-coast); stroke-width:.7px; stroke-linejoin:round; }
.wm-cam .wm-coast{ stroke-width:calc(.55px / var(--wz, 1) + .15px); }
.wm-bmap .wm-coast{ stroke-width:calc(.75px / var(--bz, 1)); }

/* ═════ 1 · 기울인 지도 무대 */
.wm-stage{ position:relative; border-radius:24px; overflow:hidden; isolation:isolate;
  background:radial-gradient(ellipse 80% 70% at 50% 58%, color-mix(in srgb, var(--accent) 7%, transparent), transparent 72%), var(--wm-stage); }
.wm-stage::after{ content:''; position:absolute; inset:0; pointer-events:none; z-index:2;
  background:radial-gradient(ellipse 80% 82% at 50% 50%, transparent 62%, color-mix(in srgb, var(--bg) 45%, transparent) 100%); }
.wm-world{ position:relative; overflow:hidden; touch-action:pan-y;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent), linear-gradient(180deg, transparent, #000 7%, #000 90%, transparent);
  -webkit-mask-composite:source-in; mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent), linear-gradient(180deg, transparent, #000 7%, #000 90%, transparent); mask-composite:intersect; }
.wm-cam{ position:absolute; left:0; top:0; transform-origin:0 0; transition:transform 1.6s cubic-bezier(.55,.05,.25,1); }
.wm-cam.wm-cam-now{ transition:none; }
.wm-world.wm-hot{ cursor:pointer; }
.wm-geo,.wm-fx{ position:absolute; left:0; top:0; overflow:visible; pointer-events:none; }

/* 바닥 점, 빛 웅덩이, 퍼지는 고리 */
.wm-dot{ transition:opacity .4s; }
.wm-dot.fut{ fill:var(--ink-3); opacity:.4; }
.wm-dot.past{ fill:var(--accent); opacity:.62; }
.wm-dot.on{ fill:var(--wm-f2); }
.wm-dot.wm-th-e.past{ fill:var(--wm-jade); }
.wm-pool{ fill:url(#wms-pool-m); }
.wm-pool.wm-th-e{ fill:url(#wms-pool-e); }
.wm-po0{ stop-color:var(--wm-pool); } .wm-pe0p{ stop-color:var(--wm-poole); } .wm-po1{ stop-color:var(--wm-pool); stop-opacity:0; }
.wm-pulse{ fill:none; stroke:var(--wm-f1); stroke-width:1.3; vector-effect:non-scaling-stroke; transform-box:fill-box; transform-origin:center; animation:wm-pulse 2.6s cubic-bezier(.2,.6,.3,1) infinite; }
.wm-pulse.d2{ animation-delay:1.3s; }
.wm-pulse.wm-th-e{ stroke:var(--wm-jade); }
@keyframes wm-pulse{ 0%{ transform:scale(1); opacity:.95; } 100%{ transform:scale(5.2); opacity:0; } }

/* 입체 리본 화살표 · 종류마다 색 묶음 */
.wm-k-f{ --t0:var(--wm-f0); --t1:var(--wm-f1); --t2:var(--wm-f2); --sd:var(--wm-fs); --sd2:var(--wm-fs2); --hi:var(--wm-fh); --edge:var(--wm-fe); }
.wm-k-l{ --t0:var(--wm-l0); --t1:var(--wm-l1); --t2:var(--wm-l2); --sd:var(--wm-ls); --sd2:var(--wm-ls2); --hi:var(--wm-lh); --edge:var(--wm-le); }
.wm-k-e{ --t0:var(--wm-e0); --t1:var(--wm-e1); --t2:var(--wm-e2); --sd:var(--wm-es); --sd2:var(--wm-es2); --hi:var(--wm-eh); --edge:var(--wm-ee); }
.wm-t0{ stop-color:var(--t0); } .wm-t1{ stop-color:var(--t1); } .wm-t2{ stop-color:var(--t2); }
.wm-side{ fill:var(--sd); }
.wm-end{ fill:var(--sd2); }
.wm-top{ stroke:var(--edge); stroke-width:.7; stroke-linejoin:round; }
.wm-hi{ fill:var(--hi); opacity:.42; }
.wm-sh{ fill:var(--wm-shadow); }
.wm-shp{ opacity:.35; }
.wm-past{ opacity:.46; }
.wm-past .wm-hi{ display:none; }
.wm-past .wm-top{ fill:var(--t0); stroke:none; }
.wm-fut{ opacity:.26; }
.wm-glow{ fill:var(--t1); opacity:.45; }
.wm-gl0{ stop-color:var(--hi,#fff); stop-opacity:0; }
.wm-gl1{ stop-color:#fffaf0; stop-opacity:.95; }
.wm-glint{ mix-blend-mode:screen; }

/* 핀 */
.wm-needle{ stroke:var(--wm-needle); stroke-width:calc(1.4px / var(--wz, 1)); stroke-linecap:round; }
.wm-pin:not(.on) .wm-needle{ opacity:.6; }
.wm-head{ fill:url(#wm-pg-m); stroke:rgba(0,0,0,.35); stroke-width:calc(.6px / var(--wz, 1)); }
.wm-th-e .wm-head{ fill:url(#wm-pg-e); }
.wm-pin:not(.on) .wm-head{ opacity:.9; }
.wm-pin.src .wm-head{ fill:var(--wm-halo); stroke:var(--wm-f1); stroke-width:calc(1.5px / var(--wz, 1)); }
.wm-shine{ fill:#fff; opacity:.8; }
.wm-pg0{ stop-color:#fff7de; } .wm-pg1{ stop-color:#e4bf6c; } .wm-pg2{ stop-color:#7a5418; }
.wm-pe0{ stop-color:#eafff7; } .wm-pe1{ stop-color:#4cc7a1; } .wm-pe2{ stop-color:#135443; }
.wm-lab{ font-family:var(--sans); font-size:calc(14px / var(--wz, 1)); font-weight:600; fill:var(--ink); paint-order:stroke; stroke:var(--wm-halo); stroke-width:calc(4px / var(--wz, 1)); stroke-linejoin:round; letter-spacing:.01em; }
.wm-lab.src{ font-size:calc(12.5px / var(--wz, 1)); font-weight:500; fill:var(--ink-2); }
.wm-shift:not(.wm-reduce) .wm-labs{ animation:wm-fade .7s 1.05s both; }
@keyframes wm-fade{ from{ opacity:0; } to{ opacity:1; } }

/* 떠 있는 풀이 */
.wm-tip{ position:absolute; z-index:4; pointer-events:none; display:grid; gap:2px; max-width:250px; padding:8px 11px 9px; border-radius:11px;
  background:var(--glass); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); border:1px solid var(--line); box-shadow:var(--e2); font-size:12.5px; line-height:1.45; color:var(--ink-2); }
.wm-tip b{ color:var(--ink); font-size:13.5px; font-weight:600; }
.wm-tip b small{ color:var(--accent); font-size:12px; margin-left:4px; }
.wm-tip-s{ color:var(--ink-3); font-size:12px; margin-bottom:3px; }
.wm-tip-r{ display:flex; align-items:center; gap:7px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wm-tip-r i{ flex:none; width:7px; height:7px; border-radius:50%; background:var(--wm-fm); }
.wm-tip-r i.wm-a{ background:var(--wm-ab); }
.wm-tip-r i.half{ background:transparent; box-shadow:inset 0 0 0 1.5px var(--wm-fm); }
.wm-tip-r i.wm-a.half{ box-shadow:inset 0 0 0 1.5px var(--wm-ab); }
.wm-tip-m{ color:var(--ink-3); font-size:11.5px; margin-top:3px; }

/* 재생 막대와 연표 */
.wm-bar{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:12px 26px; align-items:center; margin-top:10px; padding:14px 22px 12px 16px;
  border:1px solid var(--line-soft); border-radius:18px; background:var(--wm-bar); box-shadow:var(--e1); }
.wm-btns{ display:flex; align-items:center; gap:8px; }
.wm-btn{ appearance:none; height:40px; min-width:40px; padding:0 10px; display:inline-flex; align-items:center; justify-content:center; gap:7px; border-radius:999px;
  border:1px solid var(--line); background:var(--surface-2); color:var(--ink); cursor:pointer; font-size:13.5px; font-weight:600; transition:border-color .2s, background .2s, opacity .2s; }
.wm-btn svg{ width:18px; height:18px; fill:currentColor; stroke:currentColor; flex:none; }
.wm-btn:hover:not(:disabled){ border-color:var(--accent); }
.wm-btn:disabled{ opacity:.35; cursor:default; }
.wm-play{ min-width:104px; padding:0 18px 0 14px; background:var(--accent); border-color:var(--accent); color:var(--accent-ink); box-shadow:0 6px 18px -8px color-mix(in srgb, var(--accent) 70%, transparent); }
.wm-play:hover:not(:disabled){ background:var(--accent-2); border-color:var(--accent-2); }
.wm-tl{ position:relative; min-width:0; padding:0 10px; }
.wm-bands{ position:relative; height:24px; }
.wm-band{ position:absolute; top:0; height:24px; left:calc(var(--x0) * 100%); width:calc((var(--x1) - var(--x0)) * 100%); }
.wm-band i{ position:absolute; left:-7px; right:-7px; top:17px; height:6px; border:1px solid var(--line); border-bottom:0; border-radius:4px 4px 0 0; transition:border-color .3s; }
.wm-band b{ position:absolute; left:50%; top:0; transform:translateX(-50%); font-family:var(--sans); font-size:12px; font-weight:500; color:var(--ink-3); white-space:nowrap; letter-spacing:.02em; transition:color .3s; }
.wm-band.on b{ color:var(--accent); font-weight:600; }
.wm-band.on i{ border-color:var(--accent-line); }
.wm-track{ position:relative; height:30px; cursor:pointer; touch-action:none; border-radius:8px; }
.wm-track:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
.wm-rail,.wm-fill{ position:absolute; left:0; top:14px; height:2px; border-radius:2px; }
.wm-rail{ right:0; background:var(--line); }
.wm-fill{ width:calc(var(--p, 0) * 100%); background:linear-gradient(90deg, var(--accent-3), var(--accent)); transition:width .55s var(--ease-out); }
.wm-tick{ position:absolute; left:calc(var(--x) * 100%); top:15px; width:9px; height:9px; margin:-4.5px 0 0 -4.5px; border-radius:50%; background:var(--surface); border:1.5px solid var(--ink-3); transition:border-color .3s, background .3s; }
.wm-tick.wm-th-e{ border-color:color-mix(in srgb, var(--wm-jade) 70%, var(--ink-3)); }
.wm-tick.past{ border-color:var(--accent); background:var(--accent); }
.wm-tick.past.wm-th-e{ border-color:var(--wm-jade); background:var(--wm-jade); }
.wm-thumb{ position:absolute; left:calc(var(--p, 0) * 100%); top:15px; width:20px; height:20px; margin:-10px 0 0 -10px; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle at 36% 30%, #fff7de, var(--accent) 56%, var(--accent-3)); box-shadow:0 0 0 5px var(--accent-soft), 0 3px 10px rgba(0,0,0,.35); transition:left .55s var(--ease-out); }
.wm-ylabs{ position:relative; height:17px; }
.wm-ylab{ position:absolute; left:calc(var(--x) * 100%); top:0; transform:translateX(-50%); font-family:var(--mono); font-size:11.5px; color:var(--accent); white-space:nowrap; opacity:0; transition:opacity .3s; font-variant-numeric:tabular-nums; }
.wm-ylab.on{ opacity:1; }
.wm-ylab:first-child{ transform:translateX(-12%); } .wm-ylab:last-child{ transform:translateX(-88%); }

/* 풀이 카드 */
.wm-cap{ position:relative; overflow:hidden; display:grid; grid-template-columns:minmax(0,4fr) minmax(0,7fr); gap:14px 40px; margin-top:12px; padding:24px 28px 24px 30px;
  border:1px solid var(--line-soft); border-radius:18px; background:var(--surface); box-shadow:var(--e1); }
.wm-cap::before{ content:''; position:absolute; left:0; top:0; bottom:0; width:3px; background:linear-gradient(var(--accent), color-mix(in srgb, var(--accent) 10%, transparent)); }
.wm-cap[data-th='e']::before{ background:linear-gradient(var(--wm-jade), color-mix(in srgb, var(--wm-jade) 10%, transparent)); }
.wm-cap-no{ display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; font-family:var(--mono); font-size:12px; color:var(--ink-3); margin:0; }
.wm-cap-no b{ font-family:var(--display); font-size:34px; line-height:1; font-weight:500; color:var(--accent); letter-spacing:-.01em; }
.wm-cap[data-th='e'] .wm-cap-no b{ color:var(--wm-jade); }
.wm-cap-no em{ font-style:normal; font-family:var(--sans); font-size:13px; color:var(--ink-2); margin-left:8px; padding-left:10px; border-left:1px solid var(--line); }
.wm-cap h3{ font-family:var(--serif-ko); font-size:clamp(20px,2vw,25px); line-height:1.32; font-weight:600; margin:10px 0 0; text-wrap:balance; }
.wm-cap-k{ font-size:12px; color:var(--ink-3); margin:6px 0 0; letter-spacing:.03em; }
.wm-cap-r > p{ font-size:15px; line-height:1.8; color:var(--ink-2); margin:0; }
.wm-cap-p{ margin-top:14px; }
.wm-cap-none{ font-size:13px !important; color:var(--ink-3) !important; margin-top:12px !important; }
.wm-cap.wm-in .wm-cap-l,.wm-cap.wm-in .wm-cap-r{ animation:wm-rise .55s var(--ease-out) both; }
.wm-cap.wm-in .wm-cap-r{ animation-delay:.07s; }
@keyframes wm-rise{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }

/* 범례 */
.wm-legend{ display:flex; flex-wrap:wrap; gap:8px 24px; margin:14px 2px 0; font-size:13px; color:var(--ink-2); }
.wm-legend > span{ display:inline-flex; align-items:center; gap:8px; }
.wm-sw{ width:40px; height:17px; flex:none; overflow:visible; }
.wm-sw-s{ fill:var(--sd); } .wm-sw-t{ fill:var(--t1); stroke:var(--edge); stroke-width:.5; }
.wm-lg-pin{ position:relative; width:12px; height:17px; flex:none; }
.wm-lg-pin::before{ content:''; position:absolute; left:1px; top:0; width:10px; height:10px; border-radius:50%; background:radial-gradient(circle at 36% 30%, #fff7de, #e4bf6c 55%, #7a5418); }
.wm-lg-pin::after{ content:''; position:absolute; left:5.5px; top:10px; width:1.3px; height:7px; background:var(--wm-needle); }

/* ═════ 2 · 태어난 곳 */
.wm-eras{ display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:8px; margin-bottom:14px; }
.wm-era{ appearance:none; display:flex; gap:10px; align-items:flex-start; min-width:0; text-align:left; padding:11px 12px 10px; border-radius:13px; border:1px solid var(--line-soft);
  background:var(--surface); color:var(--ink-2); cursor:pointer; transition:border-color .2s, background .2s; }
.wm-era:hover{ border-color:var(--line); }
.wm-era i{ flex:none; width:11px; height:11px; margin-top:4px; border-radius:50%; background:var(--c); box-shadow:0 0 0 3px color-mix(in srgb, var(--c) 18%, transparent); }
.wm-era span{ min-width:0; display:grid; gap:1px; }
.wm-era b{ font-size:13.5px; font-weight:600; color:var(--ink); line-height:1.3; }
.wm-era small{ font-family:var(--mono); font-size:11px; color:var(--ink-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wm-era[aria-pressed='true']{ border-color:color-mix(in srgb, var(--c) 70%, var(--line)); background:color-mix(in srgb, var(--c) 9%, var(--surface)); }
.wm-g0{ --c:var(--wm-g0); } .wm-g1{ --c:var(--wm-g1); } .wm-g2{ --c:var(--wm-g2); } .wm-g3{ --c:var(--wm-g3); } .wm-g4{ --c:var(--wm-g4); }
.wm-ga{ --c:var(--accent); }
.wm-ga i{ background:conic-gradient(var(--wm-g0) 0 20%, var(--wm-g1) 0 40%, var(--wm-g2) 0 60%, var(--wm-g3) 0 80%, var(--wm-g4) 0); }
.wm-bgrid,.wm-pgrid{ display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:18px; align-items:start; }
.wm-pgrid{ grid-template-columns:minmax(0,1fr) 310px; }
.wm-flat-w{ min-width:0; }
.wm-flat-t{ display:flex; justify-content:flex-end; margin:0 0 10px; }
.wm-flat-s{ overflow-x:auto; overflow-y:hidden; border-radius:18px; border:1px solid var(--line-soft); background:var(--wm-sea1); scrollbar-width:thin; }
.wm-flat{ position:relative; }
.wm-flat svg{ display:block; width:100%; height:auto; overflow:hidden; }
.wm-flat.wm-hot{ cursor:pointer; }
.wm-bmap{ transition:transform .8s var(--ease-io); }
.wm-bd{ fill:var(--c); stroke:var(--wm-dring); stroke-width:.6; transition:transform .8s var(--ease-io), opacity .35s, fill .3s; cursor:pointer; }
.wm-bd.off{ opacity:.1; pointer-events:none; }
.wm-bd.sel{ stroke:var(--ink); stroke-width:.9; }
.wm-bdots{ filter:url(#wmb-glow); }
.wm-sec .wm-bdots{ filter:url(#wmb-glow); }
.wm-bside,.wm-prank{ padding:18px 18px 16px; min-width:0; }
.wm-bside h3,.wm-prank h3{ font-family:var(--serif-ko); font-size:18px; line-height:1.35; font-weight:600; margin:0; }
.wm-bside .chips{ margin-top:12px; }
.wm-bclr{ margin-top:14px; }
.wm-brank{ margin:12px 0 0; display:grid; gap:2px; }
.wm-brank button{ appearance:none; width:100%; display:grid; grid-template-columns:minmax(0,7fr) minmax(0,6fr) 36px; align-items:center; gap:10px; padding:6px 6px; border:0; border-radius:8px; background:none; color:var(--ink-2); cursor:pointer; font-size:13.5px; text-align:left; }
.wm-brank button:hover{ background:var(--accent-soft); color:var(--ink); }
.wm-bn{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wm-bb{ display:flex; height:8px; border-radius:4px; background:var(--line-soft); overflow:hidden; gap:2px; }
.wm-bb i{ display:block; height:100%; border-radius:4px; background:linear-gradient(90deg, var(--accent-3), var(--accent)); }
.wm-brank b{ font-size:12.5px; color:var(--ink); text-align:right; font-weight:600; }

/* ═════ 3 · 입체 수상자 지도 */
.wm-hd-link{ margin-top:4px !important; font-size:14px !important; }
.wm-hd-link a{ color:var(--accent); text-decoration:none; border-bottom:1px solid var(--accent-line); padding-bottom:1px; }
.wm-hd-link a:hover{ border-color:var(--accent); }
.wm-ptools{ display:flex; flex-wrap:wrap; gap:10px 12px; align-items:center; margin-bottom:14px; }
.wm-ptools .seg button{ padding:7px 13px; }
.wm-ptools .seg button[aria-pressed='true'],.wm-zoom button[aria-pressed='true']{ background:var(--accent-soft); color:var(--ink); box-shadow:inset 0 -2px 0 var(--accent); }
.wm-decs{ display:flex; flex-wrap:wrap; gap:6px; }
.wm-decs .chip{ font-family:var(--mono); font-size:12px; }
.wm-pmain{ min-width:0; }
.wm-pstage{ position:relative; border-radius:22px; overflow:hidden; isolation:isolate; border:1px solid var(--line-soft);
  background:radial-gradient(ellipse 70% 80% at 45% 60%, color-mix(in srgb, var(--accent) 6%, transparent), transparent 75%), var(--wm-stage); }
.wm-pscroll{ position:relative; }
.wm-pworld{ position:relative; overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent), linear-gradient(180deg, transparent, #000 5%, #000 92%, transparent);
  -webkit-mask-composite:source-in; mask-image:linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent), linear-gradient(180deg, transparent, #000 5%, #000 92%, transparent); mask-composite:intersect; }
.wm-pworld.wm-hot{ cursor:pointer; }
.wm-pfx{ position:absolute; left:0; top:0; overflow:visible; pointer-events:none; }
.wm-ctry{ fill:var(--wm-fm); fill-opacity:var(--a, 0); stroke:var(--wm-fm); stroke-opacity:calc(var(--a, 0) * 1.3); stroke-width:.7; transition:fill-opacity .45s, stroke-opacity .45s; }
.wm-ctry.on{ pointer-events:visiblePainted; }
.wm-ctry.hot{ fill-opacity:calc(var(--a, 0) + .16); stroke-opacity:.9; }
.wm-ctry.sel{ fill-opacity:calc(var(--a, 0) + .22); stroke-opacity:1; stroke-width:1.3; }
/* 메달 기둥 */
.wm-cf0{ stop-color:#fff0c4; } .wm-cf1{ stop-color:#e0b95f; } .wm-cf2{ stop-color:#6c4c15; }
.wm-ca0{ stop-color:#dcebff; } .wm-ca1{ stop-color:#6aa6f4; } .wm-ca2{ stop-color:#1c3d77; }
.wm-col{ pointer-events:visiblePainted; cursor:pointer; transition:opacity .35s; }
.wm-cs.wm-f{ fill:url(#wmp-gf); } .wm-cs.wm-a{ fill:url(#wmp-ga); }
.wm-ct.wm-f{ fill:#f6dc98; } .wm-ct.wm-a{ fill:#b9d6fc; }
.wm-ct{ stroke:rgba(255,255,255,.55); stroke-width:calc(.6px / var(--wz, 1)); }
.wm-rim{ fill:none; stroke:rgba(40,26,4,.34); stroke-width:calc(.7px / var(--wz, 1)); }
.wm-cs.wm-a + .wm-rim{ stroke:rgba(6,18,40,.34); }
.wm-cg{ fill:#fff; opacity:.45; }
.wm-col.dim{ opacity:.32; }
.wm-col.hot .wm-ct,.wm-col.sel .wm-ct{ stroke:var(--ink); stroke-width:calc(1.3px / var(--wz, 1)); }
.wm-col.hot .wm-cs,.wm-col.sel .wm-cs{ filter:brightness(1.12); }
.wm-pad{ fill:var(--wm-fm); opacity:.14; transition:opacity .3s; }
.wm-pad.hot,.wm-pad.sel{ opacity:.42; }
.wm-pad.dim{ opacity:.05; }
.wm-csh path{ fill:none; stroke:var(--wm-shadow); stroke-linecap:round; opacity:.7; }
.wm-clab text{ font-family:var(--mono); font-size:calc(12.5px / var(--wz, 1)); font-weight:600; fill:var(--ink); paint-order:stroke; stroke:var(--wm-halo); stroke-width:calc(3.5px / var(--wz, 1)); stroke-linejoin:round; }
.wm-clab .c{ font-family:var(--sans); font-size:calc(12.5px / var(--wz, 1)); fill:var(--ink-2); }
.wm-clab.sel .c,.wm-clab.hot .c{ fill:var(--ink); }
.wm-clab.dim{ opacity:.35; }
.wm-plg{ display:flex; flex-wrap:wrap; gap:6px 18px; margin:12px 2px 0; font-size:12.5px; color:var(--ink-2); }
.wm-plg span{ display:inline-flex; align-items:center; gap:7px; }
.wm-plg i{ width:12px; height:8px; border-radius:50%; flex:none; background:linear-gradient(90deg, #fff0c4, #e0b95f 45%, #6c4c15); box-shadow:0 -2px 0 #f6dc98 inset; }
.wm-plg i.wm-a{ background:linear-gradient(90deg, #dcebff, #6aa6f4 45%, #1c3d77); box-shadow:0 -2px 0 #b9d6fc inset; }
.wm-plg i.wm-c{ width:18px; height:10px; border-radius:3px; box-shadow:none; background:linear-gradient(90deg, color-mix(in srgb, var(--wm-fm) 12%, transparent), color-mix(in srgb, var(--wm-fm) 48%, transparent)); }
/* 순위표 */
.wm-prank{ padding:18px 14px 14px; }
.wm-rk-h{ padding:0 6px; }
.wm-rk{ margin:12px 0 0; display:grid; gap:1px; }
.wm-rk button{ appearance:none; width:100%; display:grid; grid-template-columns:22px minmax(0,1fr) minmax(0,66px) 34px; align-items:center; gap:8px; padding:6px 8px; border:0; border-radius:10px; background:none; color:var(--ink-2); cursor:pointer; text-align:left; transition:background .2s; }
.wm-rk button:hover,.wm-rk button.hot{ background:var(--accent-soft); color:var(--ink); }
.wm-rk button[aria-pressed='true']{ background:color-mix(in srgb, var(--accent) 16%, transparent); color:var(--ink); box-shadow:inset 3px 0 0 var(--accent); }
.wm-rr{ font-size:12px; color:var(--ink-3); text-align:center; }
.wm-rk li:nth-child(-n+3) .wm-rr{ color:var(--accent); font-weight:600; }
.wm-rn{ min-width:0; display:grid; }
.wm-rn b{ font-size:13.5px; font-weight:600; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wm-rn small{ display:flex; align-items:center; gap:4px; font-family:var(--mono); font-size:11px; color:var(--ink-3); }
.wm-rn small i{ width:6px; height:6px; border-radius:50%; background:var(--wm-fm); margin-left:2px; }
.wm-rn small i.wm-a{ background:var(--wm-ab); margin-left:6px; }
.wm-rn small i:first-child{ margin-left:0; }
.wm-rb{ display:flex; height:7px; border-radius:4px; background:var(--line-soft); overflow:hidden; gap:1px; }
.wm-rb i{ display:block; height:100%; min-width:2px; }
.wm-rb i.wm-f{ background:var(--wm-fm); } .wm-rb i.wm-a{ background:var(--wm-ab); }
.wm-rt{ font-size:13px; color:var(--ink); text-align:right; font-weight:600; }
.wm-rmore{ margin:10px 6px 0; }
.wm-rk-none{ margin:14px 6px 4px; font-size:13px; line-height:1.6; color:var(--ink-3); }
.wm-pempty{ position:absolute; left:50%; top:46%; transform:translate(-50%,-50%); z-index:4; margin:0; padding:10px 16px; border-radius:12px; background:var(--glass); border:1px solid var(--line); font-size:13.5px; color:var(--ink-2); pointer-events:none; }
/* 명단 판 · 오른쪽에서 쭈욱 미끄러져 나온다 */
.wm-pp{ position:absolute; z-index:5; top:12px; right:12px; bottom:12px; width:min(380px, 46%); border-radius:18px; overflow:hidden;
  background:var(--glass); -webkit-backdrop-filter:blur(14px) saturate(1.1); backdrop-filter:blur(14px) saturate(1.1); border:1px solid var(--line); box-shadow:var(--e3);
  transform:translateX(calc(100% + 30px)); opacity:0; pointer-events:none; transition:transform .75s cubic-bezier(.16,1,.3,1), opacity .35s ease; }
.wm-pp-open .wm-pp{ transform:none; opacity:1; pointer-events:auto; }
.wm-pp-in{ height:100%; overflow-y:auto; overscroll-behavior:contain; padding:18px 18px 20px; scrollbar-width:thin; }
.wm-pp-h{ display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:12px; align-items:start; }
.wm-pp-rank{ display:grid; place-items:center; min-width:48px; height:48px; padding:0 8px; margin:0; border-radius:14px; background:linear-gradient(145deg, color-mix(in srgb, var(--accent) 30%, transparent), color-mix(in srgb, var(--accent) 8%, transparent)); border:1px solid var(--accent-line); color:var(--accent); font-size:12px; line-height:1; }
.wm-pp-rank b{ font-size:21px; font-weight:600; color:var(--ink); }
.wm-pp-h h3{ font-family:var(--serif-ko); font-size:22px; line-height:1.25; font-weight:600; margin:2px 0 0; }
.wm-pp .wm-x{ position:static; }
.wm-pp-kpi{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin:16px 0 6px; }
.wm-pp-kpi span{ display:grid; gap:2px; padding:10px 12px; border-radius:12px; background:var(--surface-2); border:1px solid var(--line-soft); font-size:12px; color:var(--ink-3); }
.wm-pp-kpi b{ font-size:20px; font-weight:600; color:var(--ink); line-height:1.1; }
.wm-pp-kpi .wm-f{ box-shadow:inset 0 3px 0 var(--wm-fm); } .wm-pp-kpi .wm-a{ box-shadow:inset 0 3px 0 var(--wm-ab); }
.wm-pp-s{ margin-top:16px; }
.wm-pp-s h4{ display:flex; align-items:center; gap:8px; margin:0 0 8px; font-size:13.5px; font-weight:600; color:var(--ink); }
.wm-pp-s h4 i{ width:10px; height:10px; border-radius:50%; background:var(--wm-fm); }
.wm-pp-s.wm-a h4 i{ background:var(--wm-ab); }
.wm-pp-s h4 small{ margin-left:auto; color:var(--ink-3); font-size:12px; }
.wm-pp-s ol{ display:grid; gap:4px; }
.wm-pp-s li{ display:flex; align-items:center; gap:10px; min-height:34px; padding:3px 8px 3px 6px; border-radius:10px; background:color-mix(in srgb, var(--surface-2) 70%, transparent); }
.wm-pp-s li .y{ flex:none; width:40px; font-size:12px; color:var(--accent); }
.wm-pp-s.wm-a li .y{ color:var(--wm-ab); }
.wm-pp-s li .pname{ font-size:13.5px; color:var(--ink-2); }
.wm-pp-s li .pname small{ color:var(--ink-3); }
.wm-pp-note{ margin:14px 2px 0; font-size:12px; color:var(--ink-3); line-height:1.6; }
.wm-pp-anim .wm-pp-h,.wm-pp-anim .wm-pp-kpi{ animation:wm-slide .6s cubic-bezier(.16,1,.3,1) both; }
.wm-pp-anim .wm-pp-kpi{ animation-delay:.06s; }
.wm-pp-anim li{ animation:wm-slide .55s cubic-bezier(.16,1,.3,1) both; animation-delay:calc(120ms + var(--d, 0) * 26ms); }
@keyframes wm-slide{ from{ opacity:0; transform:translateX(26px); } to{ opacity:1; transform:none; } }
.wm-x{ width:40px; height:40px; border-radius:50%; border:1px solid var(--line); background:var(--surface-2); color:var(--ink-2); font-size:20px; line-height:1; cursor:pointer; flex:none; }
.wm-x:hover{ color:var(--ink); border-color:var(--accent); }

/* ═════ 폭에 따라 */
@media (max-width:1180px){
  .wm-eras{ grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width:1020px){
  .wm-bgrid,.wm-pgrid{ grid-template-columns:minmax(0,1fr); }
  .wm-bside,.wm-prank{ max-width:none; }
  .wm-cap{ grid-template-columns:minmax(0,1fr); gap:10px; }
}
@media (max-width:760px){
  .wm-bar{ grid-template-columns:minmax(0,1fr); padding:12px 14px 10px; gap:8px; }
  .wm-btns{ justify-content:center; }
  .wm-band b{ font-size:11.5px; opacity:0; transition:opacity .3s, color .3s; }
  .wm-band.on b{ opacity:1; }
  .wm-cap{ padding:20px 18px 20px 22px; }
  .wm-cap-r > p{ font-size:14.5px; line-height:1.75; }
  .wm-stage{ border-radius:18px; margin:0 calc(-1 * var(--gutter, 16px)); }
  .wm-stage::after{ background:none; }
  .wm-eras{ display:flex; overflow-x:auto; scrollbar-width:none; margin:0 calc(-1 * var(--gutter, 16px)) 12px; padding:0 var(--gutter, 16px); }
  .wm-eras::-webkit-scrollbar{ display:none; }
  .wm-era{ flex:0 0 auto; width:158px; }
  .wm-flat{ width:720px; }
  .wm-flat-s{ margin:0 calc(-1 * var(--gutter, 16px)); border-radius:0; border-left:0; border-right:0; }
  .wm-decs{ flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; width:calc(100% + 2 * var(--gutter, 16px)); margin:0 calc(-1 * var(--gutter, 16px)); padding:2px var(--gutter, 16px); }
  .wm-decs::-webkit-scrollbar{ display:none; }
  .wm-pstage{ border-radius:0; border-left:0; border-right:0; margin:0 calc(-1 * var(--gutter, 16px)); overflow:visible; }
  .wm-pscroll{ overflow-x:auto; overflow-y:hidden; scrollbar-width:none; }
  .wm-pscroll::-webkit-scrollbar{ display:none; }
  .wm-pp{ position:static; width:auto; margin:0 var(--gutter, 16px); border-radius:16px; transform:none; opacity:1; pointer-events:auto;
    display:grid; grid-template-rows:0fr; border-width:0; box-shadow:none; transition:grid-template-rows .7s cubic-bezier(.16,1,.3,1), margin .5s, border-width 0s .7s; }
  .wm-pp > .wm-pp-in{ min-height:0; height:auto; overflow:hidden; padding:0 16px; transition:padding .6s cubic-bezier(.16,1,.3,1); }
  .wm-pp-open .wm-pp{ grid-template-rows:1fr; margin:10px var(--gutter, 16px) 12px; border-width:1px; box-shadow:var(--e2); transition:grid-template-rows .7s cubic-bezier(.16,1,.3,1), margin .5s; }
  .wm-pp-open .wm-pp > .wm-pp-in{ padding:16px 16px 18px; }
  @keyframes wm-slide{ from{ opacity:0; transform:translateY(-10px); } to{ opacity:1; transform:none; } }
  .wm-hd p:last-child{ font-size:14.5px; }
}
@media (pointer:coarse){
  .wm-btn{ height:44px; min-width:44px; }
  .wm-track{ height:36px; }
  .wm-rail,.wm-fill{ top:17px; } .wm-tick,.wm-thumb{ top:18px; }
  .wm-brank button,.wm-rk button{ min-height:42px; }
  .wm-era{ min-height:52px; }
  .wm-ptools .seg button,.wm-zoom button{ min-height:40px; }
  .wm-decs .chip{ min-height:40px; }
}
@media (prefers-reduced-motion: reduce){
  .wm-pulse{ animation:none; display:none; }
  .wm-cap.wm-in .wm-cap-l,.wm-cap.wm-in .wm-cap-r,.wm-pp-anim li,.wm-pp-anim .wm-pp-h,.wm-pp-anim .wm-pp-kpi{ animation:none; }
  .wm-thumb,.wm-fill,.wm-bmap,.wm-bd,.wm-cam,.wm-pp,.wm-pp > .wm-pp-in{ transition:none; }
}
/* 밝은 화면에서는 번지는 빛을 빼고 점을 또렷하게 */
@media (prefers-color-scheme: light){
  :root:not([data-theme='dark']):not([data-mtheme='dark']) .wm-sec .wm-bdots{ filter:none; }
  :root:not([data-theme='dark']):not([data-mtheme='dark']) .wm-glint{ mix-blend-mode:normal; }
}
:root[data-theme='light']:not([data-mtheme='dark']) .wm-sec .wm-bdots,:root[data-mtheme='light'] .wm-sec .wm-bdots{ filter:none; }
:root[data-theme='light']:not([data-mtheme='dark']) .wm-glint,:root[data-mtheme='light'] .wm-glint{ mix-blend-mode:normal; }

/* ═════════ 오늘의 수학사 · 커다란 날짜, 금빛 별점, 달력, 별 다섯의 날들 */
#today-root{ --hd-g1:var(--accent-2); --hd-g2:var(--accent); --hd-g3:var(--accent-3); position:relative; }
.hd-defs{ position:absolute; width:0; height:0; overflow:hidden; }
.hd{ display:grid; grid-template-columns:minmax(0,1fr) minmax(300px,372px); gap:32px 36px; align-items:start; }
.hd-main{ display:grid; gap:34px; min-width:0; }
.hd-side{ display:grid; gap:18px; min-width:0; }
.hd-five{ grid-column:1 / -1; }
.hd svg.hd-i{ width:16px; height:16px; flex:none; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.hd-sec-k{ font-family:var(--display); font-style:italic; font-size:14px; line-height:1.3; color:var(--accent); }
.hd-sh{ display:grid; gap:4px; margin-bottom:16px; }
.hd-sh h3{ font-family:var(--serif-ko); font-size:var(--fs-lg); font-weight:600; line-height:1.35; }
.hd-sh p:not(.hd-sec-k){ font-size:13.5px; line-height:1.6; color:var(--ink-3); }
html:lang(en) .hd-sh h3,html:lang(en) .hd-who h3,html:lang(en) .hd-fact h3{ font-family:var(--display); font-weight:600; font-size:21px; }

/* ─ 금빛 별 */
.hd-stars{ display:inline-flex; align-items:center; gap:2px; line-height:0; flex:none; }
.hd-st{ width:16px; height:16px; overflow:visible; }
.hd-st path{ fill:color-mix(in srgb, var(--ink-3) 12%, transparent); stroke:color-mix(in srgb, var(--ink-3) 42%, transparent); stroke-width:1; stroke-linejoin:round; }
.hd-st.on path{ fill:url(#hd-gold); stroke:var(--hd-g3); stroke-width:.6; }
.hd-stars.lg .hd-st{ width:22px; height:22px; }
.hd-stars.lg{ gap:3px; }
.hd-stars.sm .hd-st{ width:14px; height:14px; }
.hd-stars.xs .hd-st{ width:11px; height:11px; }
.hd-stars.xs{ gap:1px; }
.hd-e.i5 .hd-st.on{ filter:drop-shadow(0 0 5px color-mix(in srgb, var(--accent) 40%, transparent)); }
svg.five{ width:10px; height:10px; flex:none; }
svg.five path{ fill:url(#hd-gold); stroke:var(--hd-g3); stroke-width:.8; }

/* ─ 커다란 날짜 */
.hd-head{ position:relative; overflow:hidden; padding:30px 32px 26px; border-radius:var(--r-panel); border:1px solid var(--line-soft); box-shadow:var(--e1);
  background:radial-gradient(120% 150% at 0% 0%, color-mix(in srgb, var(--accent) 11%, transparent), transparent 58%), var(--surface); }
.hd-head::before{ content:''; position:absolute; right:-70px; top:-70px; width:300px; height:300px; border-radius:50%; pointer-events:none;
  background:repeating-radial-gradient(circle, transparent 0 22px, color-mix(in srgb, var(--accent) 12%, transparent) 22px 23px); -webkit-mask-image:radial-gradient(circle, #000 20%, transparent 70%); mask-image:radial-gradient(circle, #000 20%, transparent 70%); }
.hd-head > *{ position:relative; }
.hd-k{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 10px; font-size:13.5px; color:var(--ink-3); }
.hd-nowtag{ display:inline-flex; align-items:center; height:24px; padding:0 10px; border-radius:999px; background:var(--accent); color:var(--accent-ink); font-size:12.5px; font-weight:600; letter-spacing:.04em; }
.hd-date{ display:flex; flex-wrap:wrap; align-items:baseline; gap:0 .2em; margin:14px 0 4px; font-family:var(--serif-ko); font-weight:600; font-size:clamp(58px, 6.4vw, 104px); line-height:1; letter-spacing:-.02em; color:var(--ink); }
.hd-date .m,.hd-date .d{ display:inline-flex; align-items:baseline; }
.hd-date .d{ font-family:var(--display); font-weight:500; font-variant-numeric:lining-nums; background:linear-gradient(175deg, var(--hd-g1), var(--hd-g2) 55%, var(--hd-g3)); -webkit-background-clip:text; background-clip:text; color:transparent; padding-right:.04em; }
.hd-date .m{ font-family:var(--display); font-weight:500; font-variant-numeric:lining-nums; }
.hd-date small{ font-family:var(--serif-ko); font-size:.4em; font-weight:500; letter-spacing:0; color:var(--ink-2); margin-left:.08em; -webkit-text-fill-color:var(--ink-2); }
html:lang(en) .hd-date .m{ font-style:italic; font-size:.62em; color:var(--ink); }
.hd-rom{ font-family:var(--display); font-style:italic; font-size:15px; letter-spacing:.32em; color:var(--accent); }
.hd-sum{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 22px; margin-top:18px; font-size:14.5px; color:var(--ink-2); }
.hd-sum b{ font-family:var(--display); font-size:21px; font-weight:600; color:var(--ink); margin:0 2px; }
.hd-sum-s{ display:inline-flex; align-items:center; gap:8px; }
.hd-head{ container-type:inline-size; container-name:hdh; }
.hd-hm{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:12px 20px; align-items:end; }
.hd-ht{ min-width:0; }
.hd-host{ display:flex; align-items:flex-end; gap:6px; margin:0 -6px -4px 0; }
.hd-theo{ display:block; flex:none; }
.hd-theo svg{ display:block; width:auto; height:150px; }
.hd-bub{ position:relative; align-self:flex-start; max-width:230px; margin-top:6px; padding:12px 14px 13px; border-radius:16px 16px 4px 16px; background:var(--surface-2); border:1px solid var(--line); box-shadow:var(--e1); font-size:13.5px; line-height:1.6; color:var(--ink); }
.hd-bub::after{ content:''; position:absolute; right:-7px; bottom:14px; width:12px; height:12px; transform:rotate(45deg); background:var(--surface-2); border-top:1px solid var(--line); border-right:1px solid var(--line); }
.hd-bub-n{ display:block; margin-bottom:3px; font-family:var(--display); font-style:italic; font-size:12.5px; color:var(--accent); }
.hd-dt{ position:relative; display:inline-flex; align-items:center; }
.hd-dt-l{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.hd-dt .field-in{ min-height:32px; height:32px; padding:0 10px; font-family:var(--mono); font-size:13px; color:var(--ink-2); color-scheme:inherit; cursor:pointer; }
.hd-dt .field-in::-webkit-calendar-picker-indicator{ opacity:.7; cursor:pointer; }
.hd-nav{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:22px; padding-top:18px; border-top:1px solid var(--line-soft); }
.hd-nav .btn{ gap:6px; }
.hd-copy{ margin-left:auto; }
.hd-tocal{ display:none !important; }

/* 머리가 좁을 때 · 테오는 날짜 옆에, 말풍선은 그 아래 한 줄로 */
@container hdh (max-width:560px){
  .hd-hm{ grid-template-columns:minmax(0,1fr) auto; align-items:start; }
  .hd-host{ display:contents; }
  .hd-theo{ grid-column:2; grid-row:1; align-self:end; margin-right:-6px; }
  .hd-theo svg{ height:112px; }
  .hd-bub{ grid-column:1 / -1; max-width:none; margin:0; border-radius:14px; font-size:13.5px; }
  .hd-bub::after{ left:auto; bottom:auto; top:-7px; right:34px; transform:rotate(-45deg); }
}

/* ─ 사건 카드 */
.hd-list{ list-style:none; margin:0; padding:0; display:grid; gap:12px; }
.hd-list.is-in > li{ animation:hd-in var(--dur-4) var(--ease-out) both; }
.hd-list.is-in > li:nth-child(2){ animation-delay:50ms; } .hd-list.is-in > li:nth-child(3){ animation-delay:100ms; } .hd-list.is-in > li:nth-child(n+4){ animation-delay:150ms; }
@keyframes hd-in{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
.hd-e{ position:relative; display:grid; grid-template-columns:40px minmax(0,1fr); gap:0 16px; padding:18px 22px 18px 16px; border-radius:var(--r-card); border:1px solid var(--line-soft); background:var(--surface); box-shadow:var(--e1); }
.hd-e.i4,.hd-e.i5{ border-color:color-mix(in srgb, var(--accent) 30%, var(--line-soft)); }
.hd-e.is-top{ grid-template-columns:48px minmax(0,1fr) auto; padding:26px 28px 24px 20px; border-color:var(--accent-line); box-shadow:var(--e2);
  background:linear-gradient(135deg, color-mix(in srgb, var(--accent) 9%, var(--surface)), var(--surface) 58%); }
.hd-e-rank span{ display:grid; place-items:center; width:34px; height:34px; border-radius:50%; border:1px solid var(--line); font-family:var(--display); font-size:16px; color:var(--ink-3); font-variant-numeric:lining-nums; }
.hd-e.is-top .hd-e-rank span{ width:44px; height:44px; font-size:21px; color:var(--accent); border-color:var(--accent-line); background:var(--accent-soft); }
.hd-e-b{ min-width:0; }
.hd-e-top{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px; }
.hd-lv{ font-size:12.5px; color:var(--ink-3); letter-spacing:.02em; }
.hd-e.i4 .hd-lv,.hd-e.i5 .hd-lv{ color:var(--accent); font-weight:500; }
.hd-e-meta{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px; margin-top:10px; }
.hd-y{ font-family:var(--display); font-size:27px; line-height:1; color:var(--ink); font-variant-numeric:lining-nums; }
.hd-e.is-top .hd-y{ font-size:36px; }
.hd-kind{ display:inline-flex; align-items:center; gap:5px; height:24px; padding:0 9px 0 7px; border-radius:999px; border:1px solid var(--line); font-size:12.5px; color:var(--ink-2); white-space:nowrap; }
.hd-kind svg.hd-i{ width:14px; height:14px; stroke:var(--kc, var(--ink-3)); }
.k-born{ --kc:var(--ok); } .k-died{ --kc:var(--ink-3); } .k-proof{ --kc:var(--accent); } .k-pub{ --kc:var(--f-ana); } .k-event{ --kc:var(--f-app); }
.hd-ago{ font-family:var(--mono); font-size:12px; color:var(--ink-3); }
.hd-ann{ display:inline-flex; align-items:center; height:22px; padding:0 9px; border-radius:999px; font-size:12px; font-weight:600; color:var(--accent); background:var(--accent-soft); box-shadow:inset 0 0 0 1px var(--accent-line); }
.hd-e-t{ margin-top:10px; font-size:15.5px; line-height:1.75; color:var(--ink); max-width:64ch; }
.hd-e.is-top .hd-e-t{ font-family:var(--serif-ko); font-size:18.5px; line-height:1.72; }
html:lang(en) .hd-e.is-top .hd-e-t{ font-family:var(--display); font-size:20px; line-height:1.55; }
.hd-e-who{ margin-top:14px; }
.hd-pc{ appearance:none; display:inline-flex; align-items:center; gap:10px; max-width:100%; padding:4px 14px 4px 4px; border-radius:999px; border:1px solid var(--line-soft); background:var(--surface-2); color:var(--ink); font:inherit; text-align:left; cursor:pointer; transition:border-color var(--dur-2), background-color var(--dur-2); }
.hd-pc:hover{ border-color:var(--accent-line); background:color-mix(in srgb, var(--c, var(--accent)) 8%, var(--surface-2)); }
.hd-pc-t{ display:grid; line-height:1.25; min-width:0; }
.hd-pc-t b{ font-size:14px; font-weight:600; }
.hd-pc-t small{ font-family:var(--mono); font-size:11.5px; color:var(--ink-3); }
.hd-e-lk{ display:flex; flex-wrap:wrap; gap:6px; margin-top:12px; }
.hd-e-lk:empty{ display:none; }
.hd-lk{ text-decoration:none; }
.hd-lk-s{ color:var(--accent); }
.hd-e-fig{ align-self:center; margin:0 0 0 14px; display:grid; justify-items:center; gap:10px; }
.hd-e-fig .pg-face{ box-shadow:0 0 0 1px var(--accent-line), 0 0 0 7px var(--surface), 0 0 0 8px color-mix(in srgb, var(--accent) 22%, transparent), var(--e2); }
.hd-e-fig figcaption{ font-family:var(--display); font-style:italic; font-size:14px; color:var(--ink-3); }
.hd-empty{ padding:18px 20px; }

/* ─ 달력 */
.hd-cal{ padding:18px 18px 16px; }
.hd-cal-h{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.hd-cal-t{ display:flex; align-items:baseline; gap:10px; font-family:var(--serif-ko); font-size:20px; font-weight:600; }
html:lang(en) .hd-cal-t{ font-family:var(--display); font-size:21px; }
.hd-cal-t small{ font-family:var(--display); font-style:italic; font-weight:400; font-size:14px; letter-spacing:.16em; color:var(--accent); }
.hd-cal .hd-mb{ width:36px; height:36px; padding:0; display:inline-grid; place-items:center; border-radius:10px; }
.hd-cal .hd-mb svg{ width:18px; height:18px; }
.hd-ms{ display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:3px; margin-top:14px; padding:6px; border-radius:12px; background:var(--surface-2); border:1px solid var(--line-soft); }
.hd-mo{ appearance:none; position:relative; display:grid; grid-template-rows:22px auto; justify-items:center; align-items:end; gap:3px; min-width:0; padding:4px 0 3px; border:0; border-radius:7px; background:transparent; color:var(--ink-3); font-family:var(--display); font-size:12.5px; line-height:1; font-variant-numeric:lining-nums; cursor:pointer; transition:background-color var(--dur-2), color var(--dur-2); }
.hd-mo i{ display:block; width:6px; height:calc(4px + var(--v) * 18px); border-radius:3px 3px 1px 1px; background:color-mix(in srgb, var(--accent) 55%, transparent); }
.hd-mo:hover{ color:var(--ink); background:var(--surface); }
.hd-mo.has-sel span{ color:var(--accent); font-weight:600; }
.hd-mo.is-on{ background:var(--surface); color:var(--ink); box-shadow:inset 0 0 0 1px var(--accent-line); }
.hd-mo.is-on i{ background:var(--accent); }
.hd-mo:focus-visible{ outline:2px solid var(--accent); outline-offset:1px; }
.hd-cal-w{ display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); margin:14px 0 6px; font-size:12px; color:var(--ink-3); text-align:center; }
.hd-cal-w .sun{ color:color-mix(in srgb, var(--down) 70%, var(--ink-3)); }
.hd-cal-w .sat{ color:color-mix(in srgb, var(--up) 70%, var(--ink-3)); }
.hd-cal-g{ display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:4px; }
.hd-c{ position:relative; min-width:0; aspect-ratio:1 / 1.04; min-height:40px; appearance:none; display:grid; grid-template-rows:1fr 8px; justify-items:center; align-items:end; gap:2px; padding:4px 2px 6px; border:1px solid transparent; border-radius:10px; background:transparent; color:var(--ink-2); font-family:var(--display); font-size:15.5px; line-height:1; font-variant-numeric:lining-nums; cursor:pointer; transition:background-color var(--dur-2), border-color var(--dur-2), color var(--dur-2); }
.hd-c .n{ align-self:center; }
.hd-c.pad{ visibility:hidden; pointer-events:none; }
.hd-c.z{ color:color-mix(in srgb, var(--ink-3) 80%, transparent); }
.hd-c.i1{ background:color-mix(in srgb, var(--accent) 5%, transparent); }
.hd-c.i2{ background:color-mix(in srgb, var(--accent) 10%, transparent); }
.hd-c.i3{ background:color-mix(in srgb, var(--accent) 16%, transparent); color:var(--ink); }
.hd-c.i4{ background:color-mix(in srgb, var(--accent) 24%, transparent); color:var(--ink); }
.hd-c.i5{ background:color-mix(in srgb, var(--accent) 34%, transparent); color:var(--ink); }
.hd-c .dots{ display:flex; gap:2px; height:4px; }
.hd-c .dots i{ width:4px; height:4px; border-radius:50%; background:var(--accent); }
.hd-c svg.five{ position:absolute; top:3px; right:3px; width:9px; height:9px; }
.hd-c:hover{ border-color:var(--accent-line); color:var(--ink); }
.hd-c.leap{ border:1px dashed var(--line); }
.hd-c.is-now{ border-color:var(--accent); }
.hd-c.is-now::after{ content:''; position:absolute; left:50%; bottom:-3px; width:14px; height:2px; margin-left:-7px; border-radius:2px; background:var(--accent); }
.hd-c.is-sel{ background:var(--accent); border-color:var(--accent); color:var(--accent-ink); font-weight:600; box-shadow:0 6px 16px -8px color-mix(in srgb, var(--accent) 80%, transparent); }
.hd-c.is-sel .dots i{ background:var(--accent-ink); }
.hd-c.is-sel svg.five path{ fill:var(--accent-ink); stroke:none; }
.hd-c:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.hd-cal-f{ display:grid; gap:6px; margin-top:12px; padding-top:12px; border-top:1px solid var(--line-soft); font-size:12.5px; color:var(--ink-3); }
.hd-cal-n b{ font-family:var(--display); font-size:15px; font-weight:600; color:var(--ink); }
.hd-cal-lg{ display:flex; flex-wrap:wrap; gap:4px 14px; }
.hd-cal-lg span{ display:inline-flex; align-items:center; gap:6px; }
.hd-cal-lg .dot{ width:5px; height:5px; border-radius:50%; background:var(--accent); }
.hd-cal-lg .sw{ width:18px; height:9px; border-radius:3px; background:linear-gradient(90deg, color-mix(in srgb, var(--accent) 6%, transparent), color-mix(in srgb, var(--accent) 36%, transparent)); }

/* ─ 그거 아세요? */
.hd-fact{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:14px; align-items:start; padding:18px 18px 18px 12px; background:linear-gradient(160deg, color-mix(in srgb, var(--accent) 6%, var(--surface)), var(--surface) 55%); }
.hd-fact-theo svg{ display:block; width:84px; height:auto; }
.hd-fact h3{ font-family:var(--serif-ko); font-size:19px; font-weight:600; margin:2px 0 8px; }
.hd-fact-t{ font-size:14.5px; line-height:1.75; color:var(--ink); }
.hd-fact .btn{ margin-top:12px; gap:6px; }
.hd-fact-n{ font-family:var(--mono); font-size:11.5px; color:var(--ink-3); margin-left:2px; }

/* ─ 오늘의 수학자 */
.hd-who{ display:grid; gap:12px; padding:20px 20px 18px; }
.hd-who h3{ font-family:var(--serif-ko); font-size:19px; font-weight:600; margin-top:-8px; }
#hd-who-out{ display:grid; gap:12px; }
.hd-who-in{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:14px; align-items:center; padding-top:12px; border-top:1px solid var(--line-soft); }
.hd-who-n{ min-width:0; }
.hd-who-n h4{ font-family:var(--serif-ko); font-size:21px; font-weight:600; line-height:1.3; }
html:lang(en) .hd-who-n h4{ font-family:var(--display); font-size:22px; }
.hd-who-n .alt{ font-size:13px; color:var(--ink-3); line-height:1.5; }
.hd-who-n .alt .mono{ font-family:var(--mono); font-size:12px; }
.hd-who-s{ font-size:14.5px; line-height:1.72; color:var(--ink-2); }
.hd-who-d{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; }
.hd-who-d .lab{ font-size:12px; color:var(--ink-3); margin-right:2px; }
.hd-who-d .chip svg.hd-i{ width:13px; height:13px; }
.hd-who-a{ display:flex; flex-wrap:wrap; gap:6px; }
.hd-who-a .btn{ gap:6px; }

/* ─ 가까운 날 */
.hd-near-g{ display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 270px), 1fr)); gap:12px; }
.hd-ng{ display:grid; gap:10px; align-content:start; padding:14px 16px 16px; border-radius:var(--r-card); }
.hd-ng-h{ appearance:none; display:flex; align-items:baseline; gap:10px; width:100%; padding:2px 0; border:0; background:none; color:var(--ink); font:inherit; text-align:left; cursor:pointer; }
.hd-ng-o{ font-size:12.5px; color:var(--accent); white-space:nowrap; }
.hd-ng-h b{ font-family:var(--serif-ko); font-size:17px; font-weight:600; }
html:lang(en) .hd-ng-h b{ font-family:var(--display); font-size:18px; }
.hd-ng-go{ margin-left:auto; color:var(--accent); transition:transform var(--dur-2) var(--ease-out); }
.hd-ng-h:hover .hd-ng-go{ transform:translateX(3px); }
.hd-ng ol{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.hd-nr{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 8px; padding-top:10px; border-top:1px solid var(--line-soft); }
.hd-nr-y{ font-family:var(--display); font-size:17px; line-height:1; }
.hd-nr .hd-kind{ height:22px; font-size:12px; }
.hd-nr p{ flex:1 0 100%; font-size:13.5px; line-height:1.65; color:var(--ink-2); display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.hd-ng-more{ font-size:12.5px; color:var(--ink-3); }

/* ─ 별 다섯의 날들 */
.hd-five{ padding-top:8px; }
.hd-five-g{ display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 228px), 1fr)); gap:10px; }
.hd-5c{ position:relative; appearance:none; display:grid; gap:7px; align-content:start; padding:16px 16px 15px; border-radius:var(--r-card); border:1px solid var(--line-soft); color:var(--ink); font:inherit; text-align:left; cursor:pointer; box-shadow:var(--e1);
  background:linear-gradient(160deg, color-mix(in srgb, var(--accent) 8%, var(--surface)), var(--surface) 62%); transition:border-color var(--dur-2), transform var(--dur-3) var(--ease-out), box-shadow var(--dur-3); }
.hd-5c:hover{ border-color:var(--accent-line); box-shadow:var(--e2); }
@media (hover:hover){ .hd-5c:hover{ transform:translateY(-2px); } }
.hd-5c svg.five{ position:absolute; top:15px; right:15px; width:15px; height:15px; }
.hd-5d{ font-family:var(--serif-ko); font-size:18px; font-weight:600; padding-right:22px; }
html:lang(en) .hd-5d{ font-family:var(--display); font-size:19px; }
.hd-5m{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 8px; }
.hd-5y{ font-family:var(--display); font-size:16px; color:var(--accent); font-variant-numeric:lining-nums; }
.hd-5m .hd-kind{ height:22px; font-size:12px; }
.hd-5c b{ font-size:14.5px; font-weight:600; line-height:1.45; }
.hd-5t{ font-size:13px; line-height:1.6; color:var(--ink-3); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.hd-5c.is-cur{ border-color:var(--accent); box-shadow:inset 0 0 0 1px var(--accent), var(--e2); }

/* ─ 태블릿 · 날짜와 달력을 한 줄에, 나머지는 넓게 */
@media (max-width:1099px){
  .hd{ grid-template-columns:minmax(0,1fr) minmax(300px,360px); grid-template-areas:'head cal' 'ev ev' 'near near' 'who fact' 'five five'; gap:24px 20px; }
  .hd-main,.hd-side{ display:contents; }
  .hd-head{ grid-area:head; align-self:stretch; } .hd-cal{ grid-area:cal; } .hd-ev{ grid-area:ev; } .hd-near{ grid-area:near; } .hd-fact{ grid-area:fact; } .hd-who{ grid-area:who; } .hd-five{ grid-area:five; }
  .hd-head{ padding:26px 26px 22px; }
  .hd-date{ font-size:clamp(54px, 9vw, 84px); }
  .hd-copy{ margin-left:0; }
}
@media (max-width:719px){
  .hd{ grid-template-columns:minmax(0,1fr); grid-template-areas:'head' 'ev' 'near' 'cal' 'fact' 'who' 'five'; gap:26px; }
  .hd-head{ padding:22px 20px 18px; }
  .hd-dt{ flex:1 1 150px; }
  .hd-dt .field-in{ width:100%; }
  .hd-head::before{ width:220px; height:220px; right:-60px; top:-60px; }
  .hd-date{ font-size:clamp(52px, 16vw, 72px); margin-top:10px; }
  .hd-nav .btn span{ white-space:nowrap; }
  .hd-tocal{ display:inline-flex !important; }
  .hd-e,.hd-e.is-top{ grid-template-columns:minmax(0,1fr); padding:18px 18px 16px; }
  .hd-e-rank{ position:absolute; top:16px; right:16px; }
  .hd-e-rank span{ width:30px; height:30px; font-size:15px; }
  .hd-e.is-top .hd-e-rank span{ width:36px; height:36px; font-size:18px; }
  .hd-e-top{ padding-right:44px; }
  .hd-e-fig{ display:none; }
  .hd-e.is-top .hd-y{ font-size:32px; }
  .hd-e.is-top .hd-e-t{ font-size:17px; }
  .hd-cal{ padding:16px 14px 14px; }
  .hd-fact{ grid-template-columns:64px minmax(0,1fr); }
  .hd-fact-theo svg{ width:64px; }
}
@media (pointer:coarse){
  .hd .btn.sm,.hd .chip,.hd-pc{ min-height:40px; }
  .hd-dt .field-in{ min-height:40px; height:40px; }
  .hd-mo{ min-height:40px; }
  .hd-cal .hd-mb{ width:44px; height:44px; }
  .hd-ng-h{ min-height:40px; }
}
@media (prefers-reduced-motion:reduce){
  .hd-list.is-in > li{ animation:none; }
  .hd-5c,.hd-ng-go{ transition:none; }
}
@media print{
  .hd{ grid-template-columns:minmax(0,1fr); }
  .hd-side,.hd-nav,.hd-five{ display:none; }
}

/* ═════════ 새 페이지들 · 탐구의 놀이와 도전, 아틀라스 통계, 즐겨찾기, 사이트맵 */

/* ─ 초상 또는 머리글자 원 */
.pg-face{ width:var(--s,40px); height:var(--s,40px); flex:none; display:inline-block; border-radius:50%; object-fit:cover; background:var(--sunk); box-shadow:0 0 0 1px var(--line); }
.pg-mono{ display:inline-grid; place-items:center; font-family:var(--display); font-weight:500; font-size:calc(var(--s,40px) * .46); line-height:1; color:var(--ink); user-select:none;
  background:radial-gradient(circle at 34% 28%, color-mix(in srgb, var(--c, var(--accent)) 34%, var(--surface)), color-mix(in srgb, var(--c, var(--accent)) 12%, var(--surface)) 72%);
  box-shadow:0 0 0 1px color-mix(in srgb, var(--c, var(--accent)) 55%, transparent), inset 0 0 0 3px var(--surface), inset 0 0 0 4px color-mix(in srgb, var(--c, var(--accent)) 28%, transparent); }
html:lang(ko) .pg-mono{ font-family:var(--serif-ko); font-weight:600; font-size:calc(var(--s,40px) * .4); }

/* ═════════ 탐구 · 놀이와 도전 */
.exg > .wide{ grid-column:1 / -1; }
.exa{ display:grid; gap:18px; margin-top:clamp(18px, 3vw, 36px); min-width:0; }
.exa-h{ display:grid; gap:6px; max-width:760px; }
.exa-h h3{ font-family:var(--serif-ko); font-size:var(--fs-2xl); font-weight:600; line-height:1.25; letter-spacing:-.01em; }
html:lang(en) .exa-h h3{ font-family:var(--display); }
.exa-h > p:not(.eyebrow){ font-size:15px; line-height:1.7; color:var(--ink-2); }
.exa-tabs{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.exa-tab{ position:relative; appearance:none; display:grid; grid-template-columns:auto minmax(0,1fr); gap:16px; align-items:center; padding:18px 20px; border-radius:var(--r-card); border:1px solid var(--line-soft); background:var(--surface); color:var(--ink); font:inherit; text-align:left; cursor:pointer; box-shadow:var(--e1); transition:border-color var(--dur-2), background-color var(--dur-2), box-shadow var(--dur-3); }
.exa-tab:hover{ border-color:var(--accent-line); }
.exa-tab[aria-selected='true']{ border-color:var(--accent-line); box-shadow:inset 0 0 0 1px var(--accent-line), var(--e2); background:linear-gradient(135deg, color-mix(in srgb, var(--accent) 10%, var(--surface)), var(--surface) 70%); }
.exa-tab[aria-selected='true']::after{ content:''; position:absolute; left:50%; bottom:-7px; width:12px; height:12px; margin-left:-6px; transform:rotate(45deg); background:var(--surface); border-right:1px solid var(--accent-line); border-bottom:1px solid var(--accent-line); }
.exa-ic{ display:grid; place-items:center; width:54px; height:54px; border-radius:50%; background:var(--surface-2); box-shadow:inset 0 0 0 1px var(--line); color:var(--ink-3); transition:color var(--dur-2), background-color var(--dur-2), box-shadow var(--dur-2); }
.exa-ic svg{ width:30px; height:30px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.exa-tab[aria-selected='true'] .exa-ic{ color:var(--accent); background:var(--accent-soft); box-shadow:inset 0 0 0 1px var(--accent-line); }
.exa-t{ display:grid; gap:4px; min-width:0; }
.exa-t b{ font-family:var(--serif-ko); font-size:18px; font-weight:600; line-height:1.3; }
html:lang(en) .exa-t b{ font-family:var(--display); font-size:19px; }
.exa-t small{ font-size:13.5px; line-height:1.55; color:var(--ink-3); }
.exa-tab:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.exa-p{ padding:24px 26px 26px; gap:18px; min-width:0; }
.exa-p:focus{ outline:none; }
.exa-p[hidden]{ display:none; }
.exa-p .ex-help:empty{ display:none; }

/* 두 수학자 잇기 */
.exp-bar{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 10px; padding:14px; border-radius:var(--r-card); background:var(--surface-2); border:1px solid var(--line-soft); }
.exc .exp-bar .field-in{ flex:1 1 170px; width:auto; min-width:0; max-width:240px; }
.exp-bar .seg{ margin-left:4px; }
.exp-bar [data-exrand]{ margin-left:auto; }
.exp-cols{ display:grid; grid-template-columns:minmax(0,1fr) minmax(240px,300px); gap:24px; align-items:start; }
.exp-cols .pchain{ max-width:none; }
.exp-cols .pcard{ min-width:min(100%, 420px); max-width:100%; }
.exp-cols .plink{ flex-wrap:wrap; }
.exp-sum{ position:sticky; top:calc(var(--hdr) + 60px); display:grid; gap:14px; padding:18px; border-radius:var(--r-card); background:var(--surface-2); border:1px solid var(--line-soft); }
.exp-dl{ display:grid; grid-template-columns:1fr 1fr; gap:12px 14px; margin:0; }
.exp-dl div{ display:grid; gap:2px; }
.exp-dl .w{ grid-column:1 / -1; padding-top:10px; border-top:1px solid var(--line-soft); }
.exp-dl dt{ font-size:12.5px; color:var(--ink-3); }
.exp-dl dd{ margin:0; font-family:var(--display); font-size:22px; line-height:1.15; color:var(--ink); font-variant-numeric:tabular-nums lining-nums; }
.exp-f{ display:grid; gap:8px; }
.exp-f .lab{ font-size:12.5px; color:var(--ink-3); }
.exp-sum .btn{ justify-self:start; }
.exp-sum .hint{ font-size:12.5px; line-height:1.6; color:var(--ink-3); }

/* 수학사 퀴즈 */
.exq{ display:grid; grid-template-columns:minmax(0,1fr) 220px; gap:24px; align-items:start; }
.exq-main{ display:grid; gap:16px; min-width:0; }
#ex-quiz-out{ display:grid; gap:14px; }
.exq-bar{ height:4px; border-radius:4px; background:var(--sunk); overflow:hidden; }
.exq-bar i{ display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg, var(--accent-3), var(--accent)); transition:width var(--dur-3) var(--ease-out); }
#ex-quiz-out .qq{ font-size:clamp(18px, 1vw + 12px, 22px); line-height:1.55; outline:none; }
html:lang(en) #ex-quiz-out .qq{ font-family:var(--display); }
#ex-quiz-out .qopts{ gap:10px; }
#ex-quiz-out .qopt{ display:flex; align-items:center; gap:12px; min-height:52px; padding:10px 14px; font-size:15px; line-height:1.4; }
.qk{ flex:none; display:grid; place-items:center; width:28px; height:28px; border-radius:50%; border:1px solid var(--line); font-family:var(--display); font-size:14px; color:var(--ink-3); }
.qopt.ok .qk{ border-color:var(--ok); color:var(--ok); }
.qopt.no .qk{ border-color:var(--down); color:var(--down); }
.qopt.ok{ border-color:var(--ok) !important; background:color-mix(in srgb, var(--ok) 12%, var(--raise)) !important; }
#ex-quiz-out .qex{ padding:14px 16px; }
#ex-quiz-out .qex .chips{ align-items:center; }
#ex-quiz-out .qend{ padding:18px 0 6px; }
.exq-side{ position:sticky; top:calc(var(--hdr) + 60px); display:grid; gap:10px; padding:18px; border-radius:var(--r-card); background:var(--surface-2); border:1px solid var(--line-soft); }
.exq-score{ display:flex; align-items:baseline; gap:6px; font-family:var(--display); }
.exq-score b{ font-size:48px; font-weight:500; line-height:1; color:var(--accent); font-variant-numeric:tabular-nums lining-nums; }
.exq-score span{ font-size:18px; color:var(--ink-3); }
.exq-dots{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(5, 1fr); gap:6px; }
.exq-dots li{ height:10px; border-radius:10px; background:var(--sunk); box-shadow:inset 0 0 0 1px var(--line-soft); }
.exq-dots li.ok{ background:var(--ok); box-shadow:none; }
.exq-dots li.no{ background:var(--down); box-shadow:none; }
.exq-dots li.cur{ box-shadow:inset 0 0 0 1.5px var(--accent); }
.exq-note{ font-size:12.5px; color:var(--ink-3); line-height:1.5; }
.exq-side .btn{ justify-self:start; }

/* 더 둘러보기 · 옮겨 간 단락으로 가는 길 */
.exm{ display:grid; gap:12px; margin-top:clamp(16px, 2.6vw, 30px); }
.exm-h{ font-size:13px; letter-spacing:var(--track-caps); color:var(--ink-3); }
html:lang(ko) .exm-h{ letter-spacing:.06em; }
.exm-g{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.exm-c{ appearance:none; display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:14px; align-items:center; padding:16px 18px; border-radius:var(--r-card); border:1px solid var(--line-soft); background:var(--surface); color:var(--ink); font:inherit; text-align:left; text-decoration:none; cursor:pointer; box-shadow:var(--e1); transition:border-color var(--dur-2), box-shadow var(--dur-3), transform var(--dur-3) var(--ease-out); }
.exm-c:hover{ border-color:var(--accent-line); box-shadow:var(--e2); }
@media (hover:hover){ .exm-c:hover{ transform:translateY(-2px); } }
.exm-ic{ display:grid; place-items:center; width:42px; height:42px; border-radius:12px; background:var(--accent-soft); color:var(--accent); box-shadow:inset 0 0 0 1px var(--accent-line); }
.exm-ic svg{ width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.exm-t{ display:grid; gap:3px; min-width:0; }
.exm-t b{ font-size:15.5px; font-weight:600; }
.exm-t small{ font-size:13px; line-height:1.5; color:var(--ink-3); }
.exm-go{ color:var(--accent); transition:transform var(--dur-2) var(--ease-out); }
.exm-c:hover .exm-go{ transform:translateX(3px); }

@media (max-width:1023px){
  .exp-cols{ grid-template-columns:minmax(0,1fr); }
  .exp-sum,.exq-side{ position:static; }
  .exq{ grid-template-columns:minmax(0,1fr); }
  .exq-side{ grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:10px 18px; }
  .exq-side .caps{ grid-column:1 / -1; }
  .exq-side .exq-note{ grid-column:1 / 3; }
  .exm-g{ grid-template-columns:minmax(0,1fr); }
}
@media (max-width:719px){
  .exa-tabs{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:8px; }
  .exa-tab{ grid-template-columns:minmax(0,1fr); justify-items:start; gap:10px; padding:14px; }
  .exa-ic{ width:42px; height:42px; }
  .exa-ic svg{ width:24px; height:24px; }
  .exa-t b{ font-size:16px; }
  .exa-t small{ font-size:12.5px; }
  .exa-p{ padding:18px 16px 20px; }
  .exp-bar{ padding:10px; }
  .exc .exp-bar .field-in{ flex:1 1 calc(50% - 30px); max-width:none; }
  .exp-bar .seg{ margin-left:0; }
  .exp-bar [data-exrand]{ margin-left:0; }
  #ex-quiz-out .qopts{ grid-template-columns:minmax(0,1fr); }
  .exq-side{ grid-template-columns:auto minmax(0,1fr); }
  .exq-side .exq-dots{ grid-column:1 / -1; }
  .exq-side .exq-note{ grid-column:1 / -1; }
  .exq-score b{ font-size:40px; }
  .exp-cols .pcard{ min-width:0; width:100%; }
}
@media (pointer:coarse){
  .exa-tab{ min-height:64px; }
  .exm-c{ min-height:56px; }
}
@media (prefers-reduced-motion:reduce){
  .exa-tab,.exm-c,.exm-go,.exq-bar i{ transition:none; }
}

/* ═════════ 아틀라스 통계 */
.sx{ display:grid; gap:clamp(40px, 5vw, 64px); }
.sx-tiles{ display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:12px; }
.sx-tile{ appearance:none; display:grid; align-content:start; gap:6px; min-width:0; padding:18px 18px 16px; border-radius:var(--r-card); border:1px solid var(--line-soft); background:var(--surface); color:var(--ink); font:inherit; text-align:left; text-decoration:none; cursor:pointer; box-shadow:var(--e1); transition:border-color var(--dur-2), box-shadow var(--dur-3); }
.sx-tile:hover{ border-color:var(--accent-line); box-shadow:var(--e2); }
.sx-tile:first-child{ background:linear-gradient(150deg, color-mix(in srgb, var(--accent) 12%, var(--surface)), var(--surface) 70%); border-color:var(--accent-line); }
.sx-tl{ font-size:13px; line-height:1.4; color:var(--ink-2); }
.sx-tv{ font-family:var(--display); font-size:clamp(34px, 2.4vw + 12px, 46px); font-weight:500; line-height:1; letter-spacing:-.01em; color:var(--ink); }
.sx-tile:first-child .sx-tv{ color:var(--accent); }
.sx-ts{ font-size:12.5px; line-height:1.45; color:var(--ink-3); }
.sx-nav{ display:flex; flex-wrap:wrap; gap:6px; margin-top:-24px; }
.sx-nav .chip{ gap:7px; }
.sx-nn{ font-family:var(--display); font-style:italic; font-size:12.5px; color:var(--accent); }
.sx-sec{ display:grid; gap:18px; scroll-margin-top:calc(var(--hdr) + 56px); min-width:0; }
.sx-h{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:4px 20px; align-items:end; }
.sx-h > *{ grid-column:1; }
.sx-h > .sx-go,.sx-h > .sx-acts{ grid-column:2; grid-row:1 / span 3; align-self:end; }
.sx-acts{ display:flex; flex-wrap:wrap; gap:6px; justify-content:flex-end; }
.sx-k{ display:flex; align-items:center; gap:10px; font-family:var(--display); font-style:italic; font-size:14.5px; color:var(--accent); }
.sx-n{ display:inline-grid; place-items:center; min-width:30px; height:30px; padding:0 6px; border-radius:999px; border:1px solid var(--accent-line); font-style:normal; font-size:13px; letter-spacing:.04em; }
.sx-h h3{ font-family:var(--serif-ko); font-size:var(--fs-2xl); font-weight:600; line-height:1.25; outline:none; }
html:lang(en) .sx-h h3{ font-family:var(--display); }
.sx-lead{ max-width:70ch; font-size:15px; line-height:1.72; color:var(--ink-2); }
.sx-card{ position:relative; display:grid; gap:14px; align-content:start; min-width:0; padding:22px 24px; border-radius:var(--r-panel); border:1px solid var(--line-soft); background:var(--surface); box-shadow:var(--e1); }
.sx-card-t{ padding:4px 24px; }
.sx-2{ display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:16px; align-items:start; }
.sx-2b{ grid-template-columns:minmax(0,1fr) minmax(0,1.2fr); }
.sx-ch{ font-size:13px; font-weight:600; letter-spacing:.04em; color:var(--ink-2); }
.sx-note{ font-size:13px; line-height:1.9; color:var(--ink-3); }
.sx-lg{ display:flex; flex-wrap:wrap; gap:6px 18px; font-size:12.5px; color:var(--ink-3); }
.sx-lg span{ display:inline-flex; align-items:center; gap:7px; }
.sx-lg i{ width:18px; height:10px; border-radius:2px 3px 3px 2px; }
.sx-lg i.s{ background:var(--ink-2); }
.sx-lg i.w{ background:color-mix(in srgb, var(--ink-2) 22%, transparent); }
.sx-rn{ font-family:var(--display); font-style:italic; color:var(--accent); }

/* 세로 막대 */
.sx-cols{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(var(--n, 10), minmax(0,1fr)); gap:10px; align-items:stretch; }
#sx-era .sx-cols{ --n:10; }
.sx-hist{ --n:12; gap:6px; }
.sx-col{ display:grid; grid-template-rows:220px auto; gap:10px; min-width:0; outline:none; }
.sx-hist .sx-col{ grid-template-rows:170px auto; gap:8px; }
.sx-cb{ position:relative; border-bottom:1px solid var(--line); }
.sx-cb i{ position:absolute; left:50%; bottom:0; width:min(28px, 70%); height:calc(var(--v) * (100% - 26px)); min-height:2px; transform:translateX(-50%); border-radius:4px 4px 0 0; background:color-mix(in srgb, var(--accent) 62%, var(--surface)); transition:background-color var(--dur-2); }
.sx-col.is-max .sx-cb i{ background:var(--accent); }
.sx-cb em{ position:absolute; left:0; right:0; bottom:calc(var(--v) * (100% - 26px) + 6px); text-align:center; font-style:normal; font-family:var(--display); font-size:16px; line-height:1; color:var(--ink); }
.sx-col:hover .sx-cb i,.sx-col:focus-visible .sx-cb i{ background:var(--accent-2); }
.sx-col:focus-visible .sx-cb{ outline:2px solid var(--accent); outline-offset:3px; border-radius:6px; }
.sx-cl{ display:grid; justify-items:center; gap:2px; text-align:center; font-size:12.5px; line-height:1.35; color:var(--ink-2); }
.sx-cl .sx-rn{ font-size:13px; }
.sx-hist .sx-cl{ font-family:var(--mono); font-size:12px; color:var(--ink-3); }
.sx-axis{ font-size:12.5px; color:var(--ink-3); text-align:center; }

/* 가로 막대 */
.sx-rows{ list-style:none; margin:0; padding:0; display:grid; gap:4px; }
.sx-row{ appearance:none; width:100%; display:grid; grid-template-columns:minmax(92px, 9em) minmax(0,1fr) 72px; gap:12px; align-items:center; min-height:36px; padding:4px 8px; border:0; border-radius:8px; background:transparent; color:var(--ink); font:inherit; text-align:left; cursor:default; outline:none; transition:background-color var(--dur-2); }
button.sx-row{ cursor:pointer; }
.sx-row:hover,.sx-row:focus-visible{ background:var(--surface-2); }
.sx-row:focus-visible{ box-shadow:inset 0 0 0 2px var(--accent); }
.sx-rl{ display:inline-flex; align-items:center; gap:8px; min-width:0; font-size:14px; }
.sx-rl > span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sx-rl .fi{ font-size:18px; color:var(--c); }
.sx-tr{ position:relative; height:14px; }
.sx-tr i{ position:absolute; left:0; top:0; bottom:0; border-radius:0 4px 4px 0; }
.sx-tr i.s{ width:calc(var(--v) * 100%); background:var(--c, var(--accent)); min-width:2px; }
.sx-tr i.w{ width:calc(var(--w) * 100%); background:color-mix(in srgb, var(--c, var(--accent)) 20%, transparent); }
.sx-r .sx-tr i.s{ background:color-mix(in srgb, var(--accent) 70%, var(--surface)); }
.sx-r .sx-row:first-child .sx-tr i.s{ background:var(--accent); }
.sx-rv{ display:inline-flex; align-items:baseline; justify-content:flex-end; gap:4px; font-variant-numeric:tabular-nums lining-nums; }
.sx-rv b{ font-family:var(--display); font-size:17px; font-weight:500; }
.sx-rv small{ font-size:12px; color:var(--ink-3); }

/* 시대와 지역 · 금빛 농도 표 */
.sx-hm{ display:grid; grid-template-columns:minmax(120px, 1.3fr) repeat(var(--nc), minmax(0,1fr)); gap:3px; }
.sx-hm-c{ display:grid; place-items:center; min-height:30px; font-size:12.5px; }
.sx-hm-h{ font-size:12px; color:var(--ink-3); text-align:center; line-height:1.2; padding-bottom:4px; }
.sx-hm-e{ justify-items:start; grid-auto-flow:column; justify-content:start; gap:8px; font-size:12.5px; color:var(--ink-2); white-space:nowrap; overflow:hidden; }
.sx-hm-e .sx-ct{ overflow:hidden; text-overflow:ellipsis; }
.sx-hm-v{ border-radius:5px; background:color-mix(in srgb, var(--accent) var(--p), var(--surface-2)); font-family:var(--display); font-size:14px; color:var(--ink); font-variant-numeric:tabular-nums lining-nums; outline:none; }
.sx-hm-v.z{ background:var(--surface-2); }
.sx-hm-v.dk{ color:var(--accent-ink); }
.sx-hm-v:hover{ box-shadow:0 0 0 2px var(--surface), 0 0 0 3px var(--accent); }
.sx-scale{ display:flex; align-items:center; gap:10px; justify-content:flex-end; font-family:var(--display); font-size:13px; color:var(--ink-3); }
.sx-scale i{ width:140px; height:8px; border-radius:4px; background:linear-gradient(90deg, var(--surface-2), color-mix(in srgb, var(--accent) 12%, var(--surface-2)), var(--accent)); box-shadow:inset 0 0 0 1px var(--line-soft); }

/* 표로 보기 */
.sx-tbl{ border-top:1px solid var(--line-soft); padding-top:10px; }
.sx-card-t .sx-tbl{ border-top:0; }
.sx-tbl summary{ display:inline-flex; align-items:center; gap:6px; min-height:32px; cursor:pointer; font-size:13px; color:var(--ink-3); list-style:none; }
.sx-tbl summary::-webkit-details-marker{ display:none; }
.sx-tbl summary::before{ content:'▸'; font-size:11px; color:var(--accent); transition:transform var(--dur-2); }
.sx-tbl[open] summary::before{ transform:rotate(90deg); }
.sx-tbl summary:hover{ color:var(--ink); }
.sx-tw{ overflow-x:auto; margin-top:8px; }
.sx-tbl table{ width:100%; border-collapse:collapse; font-size:13px; }
.sx-tbl th,.sx-tbl td{ padding:6px 10px; border-bottom:1px solid var(--line-soft); text-align:left; white-space:nowrap; }
.sx-tbl thead th{ font-weight:600; color:var(--ink-3); font-size:12px; }
.sx-tbl tbody th{ font-weight:500; color:var(--ink); }
.sx-tbl .num{ text-align:right; font-variant-numeric:tabular-nums lining-nums; }

/* 여성 수학자와 수상 */
.sx-wm,.sx-pzw{ grid-template-columns:minmax(220px, 280px) minmax(0,1fr); gap:24px; align-items:start; }
.sx-big{ display:grid; gap:8px; }
.sx-big > b{ font-family:var(--display); font-size:64px; font-weight:500; line-height:.95; color:var(--accent); }
.sx-big > span{ font-size:14px; color:var(--ink-2); }
.sx-big > small{ font-size:12.5px; line-height:1.5; color:var(--ink-3); }
.sx-meter{ height:8px; border-radius:8px; background:var(--sunk); box-shadow:inset 0 0 0 1px var(--line-soft); overflow:hidden; }
.sx-meter i{ display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg, var(--accent-3), var(--accent)); }
.sx-dots{ display:grid; grid-template-columns:repeat(10, 1fr); gap:4px; margin-top:6px; }
.sx-dots span{ display:grid; justify-items:center; gap:4px; }
.sx-dots i{ width:100%; height:26px; border-radius:4px; background:var(--surface-2); position:relative; overflow:hidden; }
.sx-dots i::after{ content:''; position:absolute; left:0; right:0; bottom:0; height:calc(var(--v) * 100%); background:var(--f-edu); opacity:.8; border-radius:4px 4px 0 0; }
.sx-dots small{ font-family:var(--display); font-style:italic; font-size:11.5px; color:var(--ink-3); }
.sx-dots span.on small{ color:var(--ink-2); }
.sx-pcs{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 210px), 1fr)); gap:8px; }
.sx-pc{ appearance:none; width:100%; display:flex; align-items:center; gap:10px; padding:6px 10px 6px 6px; border-radius:12px; border:1px solid var(--line-soft); background:var(--surface-2); color:var(--ink); font:inherit; text-align:left; cursor:pointer; transition:border-color var(--dur-2), background-color var(--dur-2); }
.sx-pc:hover{ border-color:var(--accent-line); background:color-mix(in srgb, var(--c, var(--accent)) 8%, var(--surface-2)); }
.sx-pc > span{ display:grid; min-width:0; line-height:1.3; }
.sx-pc b{ font-size:13.5px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sx-pc small{ font-family:var(--mono); font-size:11.5px; color:var(--ink-3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sx-pzs{ display:grid; gap:18px; }
.sx-pz{ display:grid; gap:6px; }
.sx-pz-t{ font-size:13.5px; font-weight:600; color:var(--ink-2); }
.sx-pz-n{ display:flex; align-items:baseline; gap:6px; font-family:var(--display); }
.sx-pz-n b{ font-size:44px; font-weight:500; line-height:1; color:var(--accent); }
.sx-pz-n span{ font-size:17px; color:var(--ink-3); }
.sx-pz small{ font-size:12.5px; line-height:1.5; color:var(--ink-3); }

/* 관계 */
.sx-share{ display:flex; gap:2px; height:22px; }
.sx-share i{ display:block; min-width:4px; }
.sx-share i.t{ background:var(--up); border-radius:4px 0 0 4px; }
.sx-share i.i{ background:color-mix(in srgb, var(--accent) 70%, var(--surface)); border-radius:0 4px 4px 0; }
.sx-kv{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:12px; margin:0; }
.sx-kv div{ display:grid; gap:4px; }
.sx-kv dt{ display:flex; align-items:center; gap:7px; font-size:12.5px; color:var(--ink-3); }
.sx-kv dt i{ width:10px; height:10px; border-radius:2px; }
.sx-kv dt i.t{ background:var(--up); } .sx-kv dt i.i{ background:color-mix(in srgb, var(--accent) 70%, var(--surface)); }
.sx-kv dd{ margin:0; display:flex; align-items:baseline; gap:6px; font-family:var(--display); font-size:28px; line-height:1; color:var(--ink); }
.sx-kv dd small{ font-family:var(--sans); font-size:12.5px; color:var(--ink-3); }

/* 순위 */
.sx-rk-tabs{ display:flex; flex-wrap:wrap; gap:4px; padding:4px; border-radius:var(--r-ctl); background:var(--surface-2); border:1px solid var(--line-soft); justify-self:start; max-width:100%; }
.sx-rk-tabs button{ appearance:none; min-height:34px; padding:0 14px; border:0; border-radius:8px; background:transparent; color:var(--ink-2); font:inherit; font-size:13.5px; cursor:pointer; transition:background-color var(--dur-2), color var(--dur-2); }
.sx-rk-tabs button:hover{ color:var(--ink); }
.sx-rk-tabs button[aria-selected='true']{ background:var(--surface); color:var(--ink); font-weight:600; box-shadow:inset 0 0 0 1px var(--accent-line), var(--e1); }
.sx-rk-tabs button:focus-visible{ outline:2px solid var(--accent); outline-offset:1px; }
.sx-rk-d{ font-size:13.5px; line-height:1.6; color:var(--ink-3); }
.sx-rk{ list-style:none; margin:10px 0 0; padding:0; display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); grid-auto-flow:column; grid-template-rows:repeat(5, auto); gap:6px 28px; }
.sx-rk li{ display:grid; grid-template-columns:28px minmax(0, 15em) minmax(0,1fr) 54px; gap:12px; align-items:center; padding:6px 0; border-bottom:1px solid var(--line-soft); }
.sx-rk-n{ font-family:var(--display); font-size:18px; color:var(--ink-3); text-align:center; }
.sx-rk li.top .sx-rk-n{ color:var(--accent); }
.sx-rk-p{ appearance:none; display:flex; align-items:center; gap:10px; min-width:0; padding:2px; border:0; border-radius:10px; background:none; color:var(--ink); font:inherit; text-align:left; cursor:pointer; }
.sx-rk-p:hover b{ color:var(--accent); }
.sx-rk-p > span{ display:grid; min-width:0; line-height:1.3; }
.sx-rk-p b{ font-size:14.5px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; transition:color var(--dur-2); }
.sx-rk-p small{ font-family:var(--mono); font-size:11.5px; color:var(--ink-3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sx-rk-b{ height:10px; }
.sx-rk-b i{ display:block; height:100%; width:calc(var(--v) * 100%); min-width:2px; border-radius:0 4px 4px 0; background:var(--c); opacity:.85; }
.sx-rk-v{ font-family:var(--display); font-size:19px; text-align:right; font-variant-numeric:tabular-nums lining-nums; }
.sx-rk-v small{ font-family:var(--sans); font-size:12px; color:var(--ink-3); margin-left:1px; }

/* 가장 긴 사슬 */
.sx-chain{ gap:16px; }
.sx-ch-h{ display:grid; gap:4px; }
.sx-ch-s{ font-size:14px; color:var(--ink-2); }
.sx-ch-s b{ font-family:var(--display); font-size:24px; font-weight:500; color:var(--accent); margin:0 1px; }
.sx-ch-e{ font-family:var(--serif-ko); font-size:17px; font-weight:600; color:var(--ink); }
html:lang(en) .sx-ch-e{ font-family:var(--display); font-size:18px; }
.sx-ch-l{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; align-items:center; gap:8px 4px; }
.sx-ch-i{ display:inline-flex; align-items:center; gap:4px; }
.sx-ch-i .pchip small{ font-family:var(--mono); font-size:11px; color:var(--ink-3); margin-left:2px; }
.sx-ch-a{ color:var(--ink-3); font-size:13px; }
.sx-ch-era{ display:inline-flex; align-items:center; gap:6px; height:28px; padding:0 10px 0 4px; margin-left:6px; border-left:2px solid var(--accent-line); font-size:12px; color:var(--ink-3); white-space:nowrap; }
.sx-ch-era span{ font-family:var(--display); font-style:italic; color:var(--accent); }
.sx-ch-l .sx-ch-era:first-child{ margin-left:0; }

@media (max-width:1199px){
  .sx-tiles{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .sx-rk li{ grid-template-columns:24px minmax(0,1fr) 44px; }
  .sx-rk-b{ grid-column:2 / 4; grid-row:2; }
  .sx-rk li{ row-gap:4px; }
}
@media (max-width:1023px){
  .sx-2,.sx-2b{ grid-template-columns:minmax(0,1fr); }
  .sx-cl .sx-ct{ font-size:12px; }
}
@media (max-width:899px){
  .sx-rk{ grid-template-columns:minmax(0,1fr); grid-auto-flow:row; grid-template-rows:none; }
}
@media (max-width:719px){
  .sx-tiles{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
  .sx-tile{ padding:14px 14px 12px; }
  .sx-nav{ margin-top:-16px; }
  .sx-h{ grid-template-columns:minmax(0,1fr); }
  .sx-h > .sx-go,.sx-h > .sx-acts{ grid-column:1; grid-row:auto; justify-self:start; justify-content:flex-start; margin-top:6px; }
  .sx-card{ padding:18px 16px; }
  .sx-card-t{ padding:2px 16px; }
  /* 시대 막대는 가로로 눕힌다 */
  #sx-era .sx-cols{ grid-template-columns:minmax(0,1fr); gap:4px; }
  #sx-era .sx-col{ grid-template-rows:none; grid-template-columns:minmax(0, 9.5em) minmax(0,1fr); gap:10px; align-items:center; min-height:34px; }
  #sx-era .sx-col .sx-cl{ grid-row:1; grid-column:1; justify-items:start; grid-auto-flow:column; justify-content:start; gap:8px; text-align:left; }
  #sx-era .sx-cb{ grid-row:1; grid-column:2; height:14px; border-bottom:0; border-left:1px solid var(--line); }
  #sx-era .sx-cb i{ left:0; top:0; bottom:0; height:auto; width:calc(var(--v) * (100% - 36px)); transform:none; border-radius:0 4px 4px 0; }
  #sx-era .sx-cb em{ left:auto; right:auto; bottom:auto; top:50%; transform:translateY(-50%); inset-inline-start:calc(var(--v) * (100% - 36px) + 8px); text-align:left; font-size:15px; }
  .sx-hist .sx-col{ grid-template-rows:140px auto; }
  .sx-hist{ gap:3px; }
  .sx-hist .sx-cb em{ font-size:12.5px; }
  .sx-hm{ grid-template-columns:minmax(52px, .8fr) repeat(var(--nc), minmax(0,1fr)); gap:2px; }
  .sx-hm-e .sx-ct{ display:none; }
  .sx-hm-h{ font-size:10.5px; writing-mode:vertical-rl; transform:rotate(180deg); min-height:64px; justify-self:center; }
  .sx-hm-v{ font-size:12.5px; min-height:28px; }
  .sx-wm,.sx-pzw{ grid-template-columns:minmax(0,1fr); }
  .sx-kv dd{ font-size:24px; }
  .sx-row{ grid-template-columns:minmax(80px, 7.5em) minmax(0,1fr) 58px; gap:8px; padding:4px; }
  .sx-rk-tabs{ display:grid; grid-template-columns:1fr 1fr; width:100%; }
  .sx-rk-tabs button{ padding:0 8px; font-size:13px; }
}
@media (pointer:coarse){
  .sx-rk-tabs button{ min-height:42px; }
  .sx-row{ min-height:42px; }
  .sx-pc{ min-height:46px; }
  .sx-tbl summary{ min-height:42px; }
}
@media (prefers-reduced-motion:reduce){
  .sx-tile,.sx-row,.sx-pc,.sx-rk-tabs button,.sx-tbl summary::before{ transition:none; }
}
.sx-hubs{ display:grid; gap:10px; padding-top:14px; border-top:1px solid var(--line-soft); }
.sx-hubs ol{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:6px; }
@media (max-width:719px){ .sx-hubs ol{ grid-template-columns:minmax(0,1fr); } }

/* ═════════ 즐겨찾기 · 머리말 단추와 창 */
#top .fav-btn{ position:relative; }
.fav-btn svg.fav-i{ width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linejoin:round; }
.fav-btn.has svg.fav-i{ fill:var(--accent); stroke:var(--accent); }
.fav-n{ position:absolute; top:-5px; right:-5px; min-width:17px; height:17px; padding:0 4px; border-radius:999px; background:var(--accent); color:var(--accent-ink); font:600 10.5px/17px var(--mono); text-align:center; box-shadow:0 0 0 2px var(--bg); pointer-events:none; }
.fav-n:empty{ display:none; }
.fav{ display:grid; gap:14px; }
.fav-sum{ font-size:14px; color:var(--ink-2); }
.fav-sum b{ font-family:var(--display); font-size:20px; font-weight:600; color:var(--accent); }
.fav-l{ list-style:none; margin:0; padding:0; display:grid; gap:6px; }
.fav-r{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; align-items:center; padding:6px 6px 6px 8px; border-radius:var(--r-card); border:1px solid var(--line-soft); background:var(--surface); transition:opacity var(--dur-2), background-color var(--dur-2); }
.fav-r:hover{ border-color:var(--accent-line); }
.fav-r.is-gone{ background:transparent; border-style:dashed; }
.fav-r.is-gone .fav-p{ opacity:.5; }
.fav-p{ display:flex; align-items:center; gap:12px; min-width:0; color:var(--ink); text-decoration:none; }
.fav-p .pg-face{ box-shadow:0 0 0 1.5px color-mix(in srgb, var(--c) 60%, transparent); }
.fav-t{ display:grid; min-width:0; line-height:1.35; }
.fav-t b{ font-size:15px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fav-p:hover .fav-t b{ color:var(--accent); }
.fav-t small{ font-size:12.5px; color:var(--ink-3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fav-a{ display:inline-flex; align-items:center; gap:4px; }
.fav-a .ibtn{ width:36px; height:36px; min-width:0; padding:0; display:inline-grid; place-items:center; border-radius:var(--r-ctl); background:transparent; }
.fav-a .ibtn svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.fav-x:hover{ color:var(--down); border-color:color-mix(in srgb, var(--down) 50%, var(--line)); }
.fav-f{ display:flex; flex-wrap:wrap; gap:8px; padding-top:4px; }
.fav-clr{ margin-left:auto; }
.fav-clr.is-arm{ color:var(--down); border-color:var(--down); }
.fav-note,.fav-empty{ font-size:12.5px; color:var(--ink-3); }
.fav-h{ font-size:13px; font-weight:600; color:var(--ink-2); }
.fav-sg{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:6px; }
.fav-sg .chip{ gap:6px; }
svg.fav-i.sm{ width:14px; height:14px; fill:none; stroke:var(--accent); stroke-width:1.8; stroke-linejoin:round; }
.fav-menu{ appearance:none; display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:12px; width:100%; min-height:52px; margin:4px 0 8px; padding:10px 16px; border-radius:var(--r-card); border:1px solid var(--accent-line); background:var(--accent-soft); color:var(--ink); font:inherit; text-align:left; cursor:pointer; }
.fav-menu svg.fav-i{ width:20px; height:20px; fill:var(--accent); stroke:var(--accent); stroke-width:1.4; stroke-linejoin:round; }
.fav-menu b{ font-size:15px; font-weight:600; }
.fav-menu small{ font-size:13px; color:var(--ink-3); }
@media (pointer:coarse){ .fav-a .ibtn{ width:44px; height:44px; } .fav-r{ min-height:56px; } }
@media (max-width:719px){ .fav-clr{ margin-left:0; } }
@media (max-width:379px){ #top .fav-btn{ display:none; } }

/* ═════════ 사이트맵 */
.smap{ display:grid; gap:clamp(36px, 4.4vw, 56px); }
.sm-top{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px 20px; margin-top:-8px; }
.sm-sum{ font-size:15px; color:var(--ink-2); }
.sm-sum b{ font-family:var(--display); font-size:22px; font-weight:600; color:var(--accent); margin-right:2px; }
.sm-q{ position:relative; display:block; width:min(100%, 360px); }
.sm-q svg{ position:absolute; left:13px; top:50%; width:15px; height:15px; margin-top:-7.5px; fill:none; stroke:var(--ink-3); stroke-width:1.6; stroke-linecap:round; pointer-events:none; }
.sm-q input{ width:100%; padding-left:38px; }
.sm-sec{ display:grid; gap:16px; min-width:0; scroll-margin-top:calc(var(--hdr) + 56px); }
.sm-sec[hidden]{ display:none; }
.sm-gh{ display:grid; gap:4px; max-width:760px; }
.sm-gk{ font-family:var(--display); font-style:italic; font-size:14.5px; color:var(--accent); }
.sm-gh h3{ display:flex; align-items:center; gap:10px; font-family:var(--serif-ko); font-size:var(--fs-2xl); font-weight:600; line-height:1.25; }
html:lang(en) .sm-gh h3{ font-family:var(--display); }
.sm-gh > p:not(.sm-gk){ font-size:14.5px; line-height:1.7; color:var(--ink-2); }
.sm-sw{ width:12px; height:12px; border-radius:50%; background:var(--gc); box-shadow:0 0 0 4px color-mix(in srgb, var(--gc) 18%, transparent); }
.sm-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap:12px; align-items:start; }
.sm-card{ position:relative; display:grid; gap:10px; align-content:start; min-width:0; padding:18px 20px 18px 22px; border-radius:var(--r-card); border:1px solid var(--line-soft); background:var(--surface); box-shadow:inset 3px 0 0 var(--gc), var(--e1); }
.sm-card[hidden]{ display:none; }
.sm-card.is-cur{ border-color:var(--accent-line); background:linear-gradient(140deg, color-mix(in srgb, var(--accent) 8%, var(--surface)), var(--surface) 70%); }
.sm-card header{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.sm-no{ font-family:var(--mono); font-size:12px; color:var(--ink-3); }
.sm-card h4{ font-family:var(--serif-ko); font-size:19px; font-weight:600; line-height:1.3; }
html:lang(en) .sm-card h4{ font-family:var(--display); font-size:20px; }
.sm-card h4 a{ color:var(--ink); text-decoration:none; }
.sm-card h4 a::after{ content:' →'; color:var(--accent); opacity:0; transition:opacity var(--dur-2); }
.sm-card h4 a:hover{ color:var(--accent); }
.sm-card h4 a:hover::after,.sm-card h4 a:focus-visible::after{ opacity:1; }
.sm-here{ margin-left:auto; font-size:11.5px; font-weight:600; letter-spacing:.04em; color:var(--accent-ink); background:var(--accent); border-radius:999px; padding:2px 9px; }
.sm-card > p{ font-size:14px; line-height:1.65; color:var(--ink-2); }
.sm-f{ list-style:none; margin:0; padding:10px 0 0; border-top:1px solid var(--line-soft); display:flex; flex-wrap:wrap; gap:6px; }
.sm-f a,.sm-f span{ display:inline-flex; align-items:center; min-height:28px; padding:3px 10px; border-radius:var(--r-sm); font-size:13px; line-height:1.35; }
.sm-f a{ color:var(--ink); text-decoration:none; background:color-mix(in srgb, var(--gc) 10%, transparent); transition:background-color var(--dur-2), color var(--dur-2); }
.sm-f a:hover{ background:color-mix(in srgb, var(--gc) 22%, transparent); }
.sm-f a:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.sm-f span{ color:var(--ink-3); border:1px dashed var(--line); }
.sm-none{ font-size:15px; color:var(--ink-3); }
.sm-none[hidden]{ display:none; }

/* 노선도 */
.sm-map{ padding:18px 18px 14px; overflow:hidden; }
.sm-map-box{ width:100%; min-height:200px; }
.sm-svg{ display:block; width:100%; height:auto; overflow:visible; font-family:var(--sans); }
.sm-rail{ fill:none; stroke:var(--gc); stroke-width:3; stroke-linecap:round; stroke-linejoin:round; opacity:.85; transition:opacity var(--dur-3); }
.sm-trunk{ fill:none; stroke:var(--line); stroke-width:3; stroke-linecap:round; }
.sm-end{ fill:var(--gc); }
.sm-gl{ font-size:12px; font-weight:600; letter-spacing:.06em; fill:var(--ink-3); }
.sm-st{ cursor:pointer; outline:none; }
.sm-hit{ fill:transparent; transition:fill var(--dur-2); }
.sm-st:hover .sm-hit,.sm-st:focus-visible .sm-hit{ fill:color-mix(in srgb, var(--gc) 12%, transparent); }
.sm-st:focus-visible .sm-hit{ stroke:var(--accent); stroke-width:1.5; }
.sm-dot{ fill:var(--surface); stroke:var(--gc); stroke-width:3; transition:r var(--dur-2), fill var(--dur-2); }
.sm-st.is-cur .sm-dot{ fill:var(--gc); }
.sm-lab{ font-size:13.5px; fill:var(--ink); transition:fill var(--dur-2), opacity var(--dur-2); }
.sm-st.is-cur .sm-lab{ font-weight:600; }
.sm-ln{ fill:none; stroke:var(--accent); stroke-width:1.5; opacity:0; transition:opacity var(--dur-3); pointer-events:none; }
.sm-ln.on{ opacity:.9; }
.sm-svg.has-hot .sm-rail{ opacity:.35; }
.sm-svg.has-hot .sm-st:not(.is-hot):not(.is-near) .sm-lab{ opacity:.45; }
.sm-st.is-hot .sm-dot{ fill:var(--accent); stroke:var(--accent); }
.sm-st.is-hot .sm-lab{ font-weight:600; }
.sm-st.is-near .sm-dot{ fill:color-mix(in srgb, var(--accent) 45%, var(--surface)); stroke:var(--accent); }
.sm-st.is-near .sm-lab{ fill:var(--accent); }
.sm-node{ cursor:pointer; }
.sm-node circle{ fill:var(--surface-2); stroke:var(--accent); stroke-width:2; }
.sm-hub circle{ fill:var(--accent); }
.sm-nm{ font-family:var(--display); font-size:14px; fill:var(--accent); font-weight:600; }
.sm-hub .sm-nm{ fill:var(--accent-ink); font-size:13px; }
.sm-nl{ font-size:14px; font-weight:600; fill:var(--ink); }
.sm-ns{ font-size:12px; fill:var(--ink-3); }
.sm-node:hover .sm-nl{ fill:var(--accent); }
.sm-node:focus-visible circle{ stroke-width:3.5; }
.sm-cap{ min-height:22px; margin-top:6px; padding-top:10px; border-top:1px solid var(--line-soft); font-size:13px; line-height:1.7; color:var(--ink-3); }
.sm-cap b{ color:var(--ink); }
.sm-cap a{ color:var(--accent); }

/* 도구 */
.sm-tl{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 380px), 1fr)); gap:10px; }
.sm-tl li{ display:grid; grid-template-columns:44px minmax(0,1fr) auto; gap:14px; align-items:center; padding:14px 16px; border-radius:var(--r-card); border:1px solid var(--line-soft); background:var(--surface); }
.sm-tl kbd{ display:grid; place-items:center; width:40px; height:40px; border-radius:10px; border:1px solid var(--line); border-bottom-width:2px; background:var(--surface-2); font-family:var(--mono); font-size:15px; color:var(--accent); }
.sm-tl b{ font-size:15px; font-weight:600; }
.sm-tl p{ font-size:13px; line-height:1.55; color:var(--ink-3); }
@media (max-width:719px){
  .sm-map{ padding:12px 10px 10px; }
  .sm-lab{ font-size:13px; }
  .sm-card{ padding:16px 16px 16px 18px; }
  .sm-tl li{ grid-template-columns:40px minmax(0,1fr); }
  .sm-tl li .btn{ grid-column:2; justify-self:start; }
  .sm-q{ width:100%; }
}
@media (pointer:coarse){ .sm-f a,.sm-f span{ min-height:38px; } }
@media (prefers-reduced-motion:reduce){ .sm-rail,.sm-ln,.sm-dot,.sm-hit,.sm-lab{ transition:none; } }
.sm-lab,.sm-gl,.sm-nl,.sm-ns{ paint-order:stroke; stroke:var(--surface); stroke-width:5px; stroke-linejoin:round; }
.sm-map.panel{ background:var(--surface); }

/* ═════════ 첫 화면의 방 카드 · 무리마다 줄이 고르게 차도록 */
@media (min-width:1100px){
  .hs-g:has(> :nth-child(6):last-child){ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .hs-g:has(> :nth-child(4):last-child),.hs-g:has(> :nth-child(7):last-child),.hs-g:has(> :nth-child(8):last-child){ grid-template-columns:repeat(4,minmax(0,1fr)); }
}
@media (min-width:720px) and (max-width:1099px){
  .hs-g:has(> :nth-child(4):last-child){ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .hs-g:has(> :nth-child(6):last-child),.hs-g:has(> :nth-child(7):last-child){ grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width:719px){
  html:lang(ko) .sx-hm-h{ transform:none; letter-spacing:.02em; }
  .sx-pcs{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:6px; }
  .sx-pc{ padding:6px 8px 6px 6px; gap:8px; align-items:flex-start; }
  .sx-pc b{ white-space:normal; font-size:13px; line-height:1.3; }
  .sx-pc small{ white-space:normal; }
  .sx-hubs .sx-pc b{ white-space:nowrap; }
}
@media (min-width:720px) and (max-width:899px){
  .sx-rk li{ grid-template-columns:28px minmax(0, 15em) minmax(0,1fr) 54px; row-gap:0; }
  .sx-rk-b{ grid-column:auto; grid-row:auto; }
}

/* ───────── 사용설명서 · 전자책 읽개 (src/v_manual.js) · 모든 class 는 bk- 로 시작한다 */

/* 색 · 어두운 화면이 기본, 밝은 화면은 아래에서 다시 정한다 · 표지와 면지는 두 테마에서 같은 가죽빛 */
.bk{
  --bk-paper:#151a23; --bk-paper-2:#10141b; --bk-paper-3:#1b2230;
  --bk-ink:#ece5d6; --bk-ink-2:#bdb7a9; --bk-ink-3:#8f8c86;
  --bk-rule:rgba(214,179,106,.3); --bk-hair:rgba(236,229,214,.1);
  --bk-edge:#0a0d12; --bk-edge-2:#232a36;
  --bk-gold:#d6b36a; --bk-gold-2:#ecd29a;
  --bk-tip:rgba(214,179,106,.075); --bk-tip-line:rgba(214,179,106,.34);
  --bk-try:rgba(63,196,161,.07); --bk-try-line:rgba(63,196,161,.34); --bk-try-ink:#6fd6b9;
  --bk-kbd:#202837; --bk-mark:rgba(214,179,106,.38);
  --bk-shadow:0 34px 70px -34px rgba(0,0,0,.9), 0 10px 24px -14px rgba(0,0,0,.7);
  --bk-spine:rgba(0,0,0,.42);
  --bk-leather:#0f1a2d; --bk-leather-2:#07101d;
  --bk-pw:520px; --bk-ph:680px; --bk-pt:48px; --bk-pb:48px; --bk-po:40px; --bk-pi:50px; --bk-bw:430px; --bk-bh:584px; --bk-fs:16px;
  --bk-tl:2px; --bk-tr:6px; --bk-prog:0%;
  position:relative; display:flex; flex-direction:column; gap:10px; margin:6px 0 10px;
  color:var(--ink);
}
@media (prefers-color-scheme: light){
  :root:not([data-theme='dark']):not([data-mtheme='dark']) .bk{
    --bk-paper:#fdfaf3; --bk-paper-2:#f2ebdc; --bk-paper-3:#fffdf8;
    --bk-ink:#221c14; --bk-ink-2:#51493d; --bk-ink-3:#7a7061;
    --bk-rule:rgba(134,98,26,.32); --bk-hair:rgba(60,44,18,.12);
    --bk-edge:#d9cfbb; --bk-edge-2:#efe7d6;
    --bk-gold:#8a6313; --bk-gold-2:#a57a26;
    --bk-tip:rgba(134,98,26,.07); --bk-tip-line:rgba(134,98,26,.3);
    --bk-try:rgba(15,119,94,.06); --bk-try-line:rgba(15,119,94,.3); --bk-try-ink:#0f6e57;
    --bk-kbd:#f4efe3; --bk-mark:rgba(214,170,60,.42);
    --bk-shadow:0 34px 60px -34px rgba(60,44,18,.55), 0 10px 22px -14px rgba(60,44,18,.35);
    --bk-spine:rgba(90,66,20,.2);
  }
}
:root[data-theme='light']:not([data-mtheme='dark']) .bk,:root[data-mtheme='light'] .bk{
  --bk-paper:#fdfaf3; --bk-paper-2:#f2ebdc; --bk-paper-3:#fffdf8;
  --bk-ink:#221c14; --bk-ink-2:#51493d; --bk-ink-3:#7a7061;
  --bk-rule:rgba(134,98,26,.32); --bk-hair:rgba(60,44,18,.12);
  --bk-edge:#d9cfbb; --bk-edge-2:#efe7d6;
  --bk-gold:#8a6313; --bk-gold-2:#a57a26;
  --bk-tip:rgba(134,98,26,.07); --bk-tip-line:rgba(134,98,26,.3);
  --bk-try:rgba(15,119,94,.06); --bk-try-line:rgba(15,119,94,.3); --bk-try-ink:#0f6e57;
  --bk-kbd:#f4efe3; --bk-mark:rgba(214,170,60,.42);
  --bk-shadow:0 34px 60px -34px rgba(60,44,18,.55), 0 10px 22px -14px rgba(60,44,18,.35);
  --bk-spine:rgba(90,66,20,.2);
}

.bk svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; flex:none; }
.bk button{ font:inherit; color:inherit; }
.bk :focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.bk .bk-book:focus,.bk .bk-book:focus-visible{ outline:none; }

/* ───────── 도구 막대 */
.bk-bar{ position:relative; z-index:6; display:flex; align-items:center; justify-content:space-between; gap:8px 12px; flex-wrap:wrap; padding:7px 8px; border:1px solid var(--line-soft); border-radius:14px; background:var(--surface); box-shadow:var(--e1); }
.bk-g1,.bk-g2{ display:flex; align-items:center; gap:4px; min-width:0; }
.bk-g1{ flex:1 1 auto; }
.bk-b{ display:inline-flex; align-items:center; justify-content:center; gap:7px; height:38px; min-width:38px; padding:0 11px; border-radius:10px; border:1px solid transparent; background:transparent; color:var(--ink-2); font:500 13.5px/1 var(--sans); white-space:nowrap; cursor:pointer; transition:background var(--dur-1) ease, color var(--dur-1) ease, border-color var(--dur-1) ease; }
.bk-b:hover{ background:var(--surface-2); color:var(--ink); }
.bk-b[aria-pressed='true'],.bk-b[aria-expanded='true']{ color:var(--accent); background:var(--accent-soft); border-color:var(--accent-line); }
.bk-b:disabled{ opacity:.4; cursor:default; }
.bk-b.bk-io{ padding:0; width:38px; }
.bk-qb{ display:none; }
.bk-resume{ color:var(--accent); border-color:var(--accent-line); background:var(--accent-soft); }
.bk-resume[hidden]{ display:none; }
.bk-q{ position:relative; display:flex; align-items:center; flex:0 1 240px; min-width:120px; height:38px; margin-left:4px; }
.bk-q svg{ position:absolute; left:11px; top:50%; transform:translateY(-50%); width:16px; height:16px; color:var(--ink-3); pointer-events:none; }
.bk-qi,.bk-dq{ width:100%; height:38px; padding:0 12px 0 34px; border-radius:10px; border:1px solid var(--line); background:var(--bg); color:var(--ink); font:400 13.5px/1 var(--sans); }
.bk-qi::placeholder,.bk-dq::placeholder{ color:var(--ink-3); }
.bk-qi:focus,.bk-dq:focus{ outline:none; border-color:var(--accent-line); box-shadow:0 0 0 3px var(--accent-soft); }
.bk-seg{ display:inline-flex; height:38px; border:1px solid var(--line); border-radius:10px; overflow:hidden; margin-right:2px; }
.bk-seg button{ display:inline-flex; align-items:baseline; justify-content:center; gap:1px; min-width:42px; padding:0 9px; border:0; background:transparent; color:var(--ink-2); font:600 13px/38px var(--sans); cursor:pointer; }
.bk-seg button + button{ border-left:1px solid var(--line); }
.bk-seg button:hover{ background:var(--surface-2); color:var(--ink); }
.bk-seg button:disabled{ opacity:.35; cursor:default; background:transparent; }
.bk-aa{ font-family:var(--serif-ko); font-size:16px; font-weight:700; }
.bk-aa.sm{ font-size:12.5px; }
.bk-dlw{ position:relative; }
.bk-dlm{ position:absolute; right:0; top:calc(100% + 8px); width:min(320px, calc(100vw - 32px)); padding:8px; border-radius:14px; border:1px solid var(--line); background:var(--raise); box-shadow:var(--e3); z-index:20; }
.bk-dlm[hidden]{ display:none; }
.bk-dlh{ margin:4px 8px 6px; font:600 11.5px/1.3 var(--sans); letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); }
.bk-dla{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:12px; align-items:start; padding:10px; border-radius:10px; color:var(--ink); text-decoration:none; }
.bk-dla:hover{ background:var(--surface-2); }
.bk-dla svg{ margin-top:2px; color:var(--accent); }
.bk-dla b{ display:block; font:600 14px/1.3 var(--sans); }
.bk-dla small{ display:block; margin-top:3px; font:400 12.5px/1.45 var(--sans); color:var(--ink-3); }

/* ───────── 무대와 책 */
.bk-stage{ position:relative; display:flex; align-items:center; justify-content:center; gap:14px; padding:18px 0 12px; min-height:calc(var(--bk-ph) + 30px); touch-action:pan-y pinch-zoom; user-select:none; -webkit-user-select:none; }
.bk-nav{ flex:none; display:grid; place-items:center; width:48px; height:48px; border-radius:50%; border:1px solid var(--line); background:var(--surface); color:var(--ink-2); box-shadow:var(--e1); cursor:pointer; transition:color var(--dur-1) ease, border-color var(--dur-1) ease, transform var(--dur-2) var(--ease-out), opacity var(--dur-2) ease; }
.bk-nav svg{ width:22px; height:22px; }
.bk-nav:hover:not(:disabled){ color:var(--accent); border-color:var(--accent-line); transform:scale(1.05); }
.bk-nav:disabled{ opacity:.28; cursor:default; }
.bk-book{ position:relative; flex:none; width:calc(var(--bk-pw) * 2); height:var(--bk-ph); perspective:3400px; perspective-origin:50% 50%; transition:transform .72s cubic-bezier(.36,.06,.2,1); outline:none; }
.bk-book.closed{ transform:translateX(calc(var(--bk-pw) * -0.5)); }
.bk-sheet{ position:absolute; top:0; width:50%; height:100%; }
.bk-l{ left:0; } .bk-r{ right:0; }
.bk-sheet:not(.is-empty){ box-shadow:var(--bk-shadow); border-radius:6px; }
/* 책 두께 · 읽은 쪽은 왼쪽에, 남은 쪽은 오른쪽에 쌓인다 */
.bk-l:not(.is-empty)::before,.bk-r:not(.is-empty)::after{ content:''; position:absolute; top:4px; bottom:4px; width:var(--bk-tl); left:calc(var(--bk-tl) * -1); border-radius:4px 0 0 4px; background:repeating-linear-gradient(90deg, var(--bk-edge) 0 1px, var(--bk-edge-2) 1px 2px); }
.bk-r:not(.is-empty)::after{ left:auto; right:calc(var(--bk-tr) * -1); width:var(--bk-tr); border-radius:0 4px 4px 0; }
.bk-spine{ position:absolute; top:0; bottom:0; left:50%; width:2px; transform:translateX(-1px); background:linear-gradient(180deg, transparent, var(--bk-spine) 12%, var(--bk-spine) 88%, transparent); z-index:3; pointer-events:none; transition:opacity .4s ease; }
.bk-book.closed .bk-spine{ opacity:0; }
.bk-track{ display:none; position:absolute; inset:0; }
.bk-slot{ position:absolute; inset:0; }
.bk-slot.p{ transform:translateX(calc(-100% - 24px)); }
.bk-slot.n{ transform:translateX(calc(100% + 24px)); }
.bk-slot:empty{ display:none; }
.bk[data-mode='single'] .bk-book{ width:var(--bk-pw); overflow:hidden; border-radius:8px; box-shadow:var(--bk-shadow); }
.bk[data-mode='single'] .bk-sheet,.bk[data-mode='single'] .bk-spine,.bk[data-mode='single'] .bk-corner{ display:none; }
.bk[data-mode='single'] .bk-track{ display:block; }
.bk-wait{ position:absolute; inset:0; display:grid; place-items:center; margin:0; color:var(--ink-3); font:500 13px var(--sans); letter-spacing:.12em; }
.bk.ready .bk-wait{ display:none; }
.bk:not(.ready) .bk-book{ visibility:hidden; }
.bk-book.bk-fadein .bk-sheet,.bk-book.bk-fadein .bk-slot.c{ animation:bkFade .34s ease both; }
@keyframes bkFade{ from{ opacity:.25; transform:translateY(5px); } to{ opacity:1; transform:none; } }

/* 모서리 · 넓은 화면에서 쪽 귀퉁이를 잡아 넘긴다 */
.bk-corner{ position:absolute; bottom:0; z-index:4; width:64px; height:64px; padding:0; border:0; background:transparent; cursor:pointer; opacity:0; transition:opacity .25s ease; }
.bk-corner.l{ left:0; border-radius:0 0 0 6px; background:linear-gradient(45deg, var(--bk-paper-2) 0 44%, rgba(0,0,0,.28) 49%, transparent 52%); }
.bk-corner.r{ right:0; border-radius:0 0 6px 0; background:linear-gradient(-45deg, var(--bk-paper-2) 0 44%, rgba(0,0,0,.28) 49%, transparent 52%); }
@media (hover:hover) and (pointer:fine){
  .bk-corner:hover:not(:disabled){ opacity:1; }
}
.bk-corner:disabled,.bk-book.closed .bk-corner.l{ display:none; }

/* ───────── 한 쪽 */
.bk-pg{ position:absolute; inset:0; overflow:hidden; border-radius:6px; background:linear-gradient(90deg, var(--bk-paper) 0%, var(--bk-paper) 100%); color:var(--bk-ink); padding:var(--bk-pt) var(--bk-po) var(--bk-pb) var(--bk-po); font-size:var(--bk-fs); line-height:1.78; text-align:left; -webkit-font-smoothing:antialiased; user-select:text; -webkit-user-select:text; }
.bk-pg.is-l{ padding-left:var(--bk-po); padding-right:var(--bk-pi); border-radius:6px 2px 2px 6px; background:linear-gradient(90deg, var(--bk-paper) 0%, var(--bk-paper) 82%, var(--bk-paper-2) 100%); }
.bk-pg.is-r{ padding-left:var(--bk-pi); padding-right:var(--bk-po); border-radius:2px 6px 6px 2px; background:linear-gradient(90deg, var(--bk-paper-2) 0%, var(--bk-paper) 18%, var(--bk-paper) 100%); }
.bk-pg.is-l::after,.bk-pg.is-r::after{ content:''; position:absolute; top:0; bottom:0; width:34px; pointer-events:none; }
.bk-pg.is-l::after{ right:0; background:linear-gradient(90deg, transparent, var(--bk-spine)); }
.bk-pg.is-r::after{ left:0; background:linear-gradient(270deg, transparent, var(--bk-spine)); }
.bk-body{ position:relative; width:var(--bk-bw); height:var(--bk-bh); overflow:hidden; display:flow-root; font-family:var(--serif-ko); font-weight:400; word-break:keep-all; overflow-wrap:anywhere; }
.bk-body > :first-child{ margin-top:0 !important; }
:lang(en) .bk-body{ font-family:var(--display), var(--serif-ko); font-size:1.04em; word-break:normal; }
.bk-run{ position:absolute; top:calc(var(--bk-pt) * .38); left:var(--bk-po); right:var(--bk-po); margin:0; font:500 11px/1.2 var(--sans); letter-spacing:.14em; color:var(--bk-ink-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bk-pg.is-l .bk-run{ left:var(--bk-po); right:var(--bk-pi); text-align:left; }
.bk-pg.is-r .bk-run{ left:var(--bk-pi); right:var(--bk-po); text-align:right; }
.bk-pg.is-1 .bk-run{ text-align:center; }
.bk-run span{ display:inline-block; padding-bottom:5px; border-bottom:1px solid var(--bk-hair); }
.bk-folio{ position:absolute; bottom:calc(var(--bk-pb) * .36); left:var(--bk-po); right:var(--bk-po); margin:0; font:500 12.5px/1 var(--display); letter-spacing:.06em; color:var(--bk-ink-3); text-align:center; }
.bk-pg.is-l .bk-folio{ text-align:left; right:auto; }
.bk-pg.is-r .bk-folio{ text-align:right; left:auto; }
.bk-blank{ display:grid; place-items:center; }
.bk-bo{ color:var(--bk-rule); font-size:18px; }
.bk-ribbon{ position:absolute; top:-3px; right:14%; width:17px; height:62px; z-index:2; background:linear-gradient(180deg, #b8892e, #e8c574 45%, #c99a3c); clip-path:polygon(0 0, 100% 0, 100% 100%, 50% 80%, 0 100%); filter:drop-shadow(0 3px 4px rgba(0,0,0,.35)); }
.bk-pg.is-l .bk-ribbon{ right:auto; left:14%; }
.bk-ribbon.drop{ animation:bkDrop .5s cubic-bezier(.3,1.4,.5,1) both; }
@keyframes bkDrop{ from{ transform:translateY(-70%); } to{ transform:none; } }

/* 글 */
.bk-p{ margin:0 0 .82em; }
.bk-p.open-end{ margin-bottom:0; }
.bk[data-mode='spread'] :lang(en) .bk-p,:lang(en) .bk[data-mode='spread'] .bk-p{ text-align:justify; hyphens:auto; -webkit-hyphens:auto; }
.bk-p kbd,.bk-box kbd,.bk-dl kbd,.bk-ul kbd,.bk-a kbd,.bk-tt-h kbd,.bk-keys kbd{ display:inline-block; min-width:1.5em; padding:.02em .42em; margin:0 .06em; border:1px solid var(--bk-rule); border-bottom-width:2px; border-radius:5px; background:var(--bk-kbd); color:var(--bk-ink); font:600 .76em/1.5 var(--mono); text-align:center; vertical-align:.08em; }
.bk-h{ display:flex; align-items:center; gap:.55em; margin:1.25em 0 .5em; font:700 1.12em/1.4 var(--serif-ko); color:var(--bk-ink); letter-spacing:-.005em; }
.bk-h::before{ content:''; flex:none; width:.9em; height:1px; background:var(--bk-gold); }
:lang(en) .bk-h{ font-family:var(--display), var(--serif-ko); font-weight:600; }
.bk-note{ margin:.9em 0; padding:.1em 0 .1em .9em; border-left:2px solid var(--bk-rule); font-size:.86em; line-height:1.7; color:var(--bk-ink-3); }
.bk-note.open-end{ margin-bottom:0; }
.bk-ul{ margin:.5em 0 .95em; padding:0; list-style:none; }
.bk-ul li{ position:relative; margin:0 0 .5em; padding-left:1.15em; }
.bk-ul li::before{ content:''; position:absolute; left:.1em; top:.72em; width:.36em; height:.36em; transform:rotate(45deg); background:var(--bk-gold); opacity:.85; }
.bk-ul li b{ font-weight:700; color:var(--bk-ink); }
.bk-dl{ margin:.55em 0 1em; padding:0; }
.bk-dl > div{ padding:.5em 0 .55em; border-top:1px solid var(--bk-hair); }
.bk-dl > div:last-child{ border-bottom:1px solid var(--bk-hair); }
.bk-dl dt{ font:600 .84em/1.45 var(--sans); color:var(--bk-gold); letter-spacing:.01em; }
.bk-dl dd{ margin:.15em 0 0; font-size:.95em; line-height:1.7; }
.bk-keys{ width:100%; margin:.5em 0 1em; border-collapse:collapse; font-size:.92em; }
.bk-keys th,.bk-keys td{ padding:.36em .4em; border-top:1px solid var(--bk-hair); text-align:left; vertical-align:middle; }
.bk-keys tr:last-child th,.bk-keys tr:last-child td{ border-bottom:1px solid var(--bk-hair); }
.bk-keys th{ width:34%; font-weight:400; white-space:nowrap; }
.bk-keys td{ font-family:var(--sans); font-size:.92em; color:var(--bk-ink-2); }
.bk-box{ margin:.95em 0 1.05em; padding:.72em .95em .8em; border-radius:10px; border:1px solid var(--bk-tip-line); background:var(--bk-tip); }
.bk-box p{ margin:0; font-size:.95em; line-height:1.72; }
.bk-box .bk-bh{ display:flex; align-items:center; gap:.45em; margin:0 0 .35em; font:700 .74em/1.3 var(--sans); letter-spacing:.14em; color:var(--bk-gold); }
.bk-box .bk-bh svg{ width:1.45em; height:1.45em; stroke-width:1.7; }
.bk-try{ border-color:var(--bk-try-line); background:var(--bk-try); }
.bk-try .bk-bh{ color:var(--bk-try-ink); }
.bk-try ol{ margin:0; padding:0; list-style:none; }
.bk-try li{ position:relative; margin:.32em 0 0; padding-left:1.75em; font-size:.95em; line-height:1.7; counter-increment:bk; }
.bk-try li::before{ content:counter(bk); position:absolute; left:0; top:.25em; width:1.3em; height:1.3em; border-radius:50%; border:1px solid var(--bk-try-line); color:var(--bk-try-ink); font:700 .72em/1.28em var(--sans); text-align:center; }
.bk-qa{ margin:0 0 .9em; padding:0 0 .8em; border-bottom:1px solid var(--bk-hair); }
.bk-q{ display:flex; gap:.6em; align-items:baseline; margin:0 0 .3em; font-weight:700; line-height:1.55; }
.bk-q span{ flex:none; display:inline-grid; place-items:center; width:1.45em; height:1.45em; border-radius:50%; background:var(--bk-gold); color:var(--bk-paper); font:700 .72em/1 var(--display); transform:translateY(-.08em); }
.bk-a{ margin:0; padding-left:1.65em; font-size:.95em; line-height:1.72; color:var(--bk-ink-2); }
.bk-fig{ margin:.85em 0 1.05em; }
.bk-frame{ display:flex; justify-content:center; align-items:flex-start; gap:10px; }
.bk-zoom{ position:relative; display:block; padding:0; border:1px solid var(--bk-rule); border-radius:8px; overflow:hidden; background:#0a0d12; cursor:zoom-in; box-shadow:0 10px 24px -16px rgba(0,0,0,.7); }
.bk-zoom img{ display:block; max-width:none; object-fit:cover; }
.bk-zi{ position:absolute; right:8px; bottom:8px; display:grid; place-items:center; width:30px; height:30px; border-radius:50%; background:rgba(10,13,18,.72); color:#f2e7cc; opacity:0; transition:opacity .2s ease; }
.bk-zi svg{ width:16px; height:16px; }
.bk-zoom:hover .bk-zi,.bk-zoom:focus-visible .bk-zi{ opacity:1; }
@media (pointer:coarse){ .bk-zi{ opacity:.85; } }
.bk-fig figcaption{ margin:.55em auto 0; max-width:92%; font:400 .78em/1.5 var(--sans); color:var(--bk-ink-3); text-align:center; }
mark.bk-m,.bk-hit mark{ background:var(--bk-mark); color:inherit; border-radius:3px; padding:0 .06em; }

/* 장의 첫 쪽 */
.bk-open{ margin:.2em 0 1.25em; }
.bk-num{ display:flex; align-items:baseline; gap:.7em; margin:0 0 .35em; }
.bk-n{ font:500 2.5em/1 var(--display); color:var(--bk-gold); letter-spacing:.02em; }
.bk-la{ font:italic 400 .9em/1.2 var(--display); color:var(--bk-ink-3); }
.bk-ct{ margin:0 0 .45em; font:700 1.62em/1.3 var(--serif-ko); color:var(--bk-ink); letter-spacing:-.01em; word-break:keep-all; }
:lang(en) .bk-ct{ font-family:var(--display), var(--serif-ko); font-weight:600; font-size:1.7em; }
.bk-lead{ margin:0; font-size:1em; line-height:1.7; color:var(--bk-ink-2); }
.bk-orn{ display:flex; align-items:center; gap:.8em; margin:1em 0 0; color:var(--bk-gold); font-size:.7em; }
.bk-orn i{ flex:1; height:1px; background:linear-gradient(90deg, transparent, var(--bk-rule)); }
.bk-orn i:last-child{ background:linear-gradient(270deg, transparent, var(--bk-rule)); }

/* 차례 */
.bk-toch{ margin:.1em 0 .55em; }
.bk-toch .bk-la{ display:block; margin-bottom:.3em; }
.bk-toch h2{ margin:0; font:700 1.55em/1.2 var(--serif-ko); color:var(--bk-ink); }
:lang(en) .bk-toch h2{ font-family:var(--display), var(--serif-ko); font-weight:600; }
.bk-tp{ margin:.75em 0 .1em; font:700 .7em/1.3 var(--sans); letter-spacing:.18em; color:var(--bk-gold); }
.bk-te{ display:grid; grid-template-columns:2em minmax(0,auto) minmax(12px,1fr) auto; align-items:baseline; gap:.5em; width:100%; padding:.14em 0; border:0; background:transparent; color:var(--bk-ink); font-size:.88em; line-height:1.45; text-align:left; cursor:pointer; }
.bk-te .n{ font:500 .8em/1 var(--display); color:var(--bk-ink-3); }
.bk-te .t{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bk-te i{ align-self:end; height:.9em; border-bottom:1px dotted var(--bk-rule); margin-bottom:.35em; }
.bk-te .f{ font:500 .84em/1 var(--display); color:var(--bk-ink-2); min-width:1.6em; text-align:right; }
.bk-te:hover .t,.bk-te:focus-visible .t{ color:var(--bk-gold); }

/* 표지 · 가죽빛 판에 금박 */
.bk-cover{ padding:0 !important; background:radial-gradient(120% 90% at 30% 20%, #18284a 0%, var(--bk-leather) 45%, var(--bk-leather-2) 100%) !important; color:#e8d4a2; }
.bk-cover::after{ display:none; }
.bk-cv{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:12% 12%; text-align:center; background-image:radial-gradient(rgba(255,255,255,.035) 1px, transparent 1px); background-size:4px 4px; }
.bk-cv-f{ position:absolute; inset:18px; border:1px solid rgba(222,190,120,.55); border-radius:4px; box-shadow:inset 0 0 0 5px rgba(0,0,0,0), inset 0 0 0 6px rgba(222,190,120,.28); pointer-events:none; }
.bk-cv-f::before,.bk-cv-f::after{ content:'✦'; position:absolute; left:50%; transform:translateX(-50%); font-size:12px; color:#dcbc78; background:var(--bk-leather); padding:0 8px; }
.bk-cv-f::before{ top:-9px; } .bk-cv-f::after{ bottom:-9px; }
.bk-cv-k{ margin:0 0 1.6em; font:italic 400 14px/1 var(--display); letter-spacing:.18em; color:rgba(232,212,162,.7); }
.bk-cv-logo svg{ width:64px; height:64px; stroke:#dcbc78; stroke-width:1.1; margin-bottom:1em; filter:drop-shadow(0 2px 6px rgba(0,0,0,.5)); }
.bk-cv-b{ margin:0; font:500 clamp(22px, calc(var(--bk-pw) * .075), 40px)/1 var(--display); letter-spacing:.32em; padding-left:.32em; background:linear-gradient(180deg, #f7e4ae, #c9a052 60%, #e8cd8a); -webkit-background-clip:text; background-clip:text; color:transparent; }
.bk-cv-t{ margin:.55em 0 .5em; font:700 clamp(22px, calc(var(--bk-pw) * .07), 36px)/1.2 var(--serif-ko); color:#f1e2bb; letter-spacing:.08em; }
:lang(en) .bk-cv-t{ font-family:var(--display), var(--serif-ko); font-weight:500; letter-spacing:.06em; }
.bk-cv-s{ margin:0; max-width:18em; font:400 14px/1.6 var(--serif-ko); color:rgba(232,212,162,.82); }
.bk-cv-e{ margin:2.2em 0 0; padding-top:1em; border-top:1px solid rgba(222,190,120,.35); font:500 12px/1.4 var(--sans); letter-spacing:.14em; color:rgba(232,212,162,.75); }
.bk-cv-p{ position:absolute; bottom:40px; left:0; right:0; margin:0; font:500 10.5px/1.3 var(--sans); letter-spacing:.2em; color:rgba(232,212,162,.55); }

/* 면지 · 두 원과 삼각형의 무늬 */
.bk-endp{ padding:0 !important; background-color:#0c1628 !important; background-image:radial-gradient(circle, transparent 0 11px, rgba(222,190,120,.2) 11.5px 12.5px, transparent 13px), radial-gradient(circle, transparent 0 11px, rgba(222,190,120,.12) 11.5px 12.5px, transparent 13px) !important; background-size:34px 34px, 34px 34px !important; background-position:0 0, 17px 17px !important; }
.bk-endp::after{ left:auto; right:0; background:linear-gradient(90deg, transparent, rgba(0,0,0,.45)); }
.bk-ep{ position:absolute; inset:0; display:grid; place-items:center; }
.bk-exl{ display:grid; justify-items:center; gap:10px; padding:22px 28px; border:1px solid rgba(222,190,120,.5); border-radius:6px; background:#0c1628; box-shadow:0 0 0 6px #0c1628, 0 0 0 7px rgba(222,190,120,.25); color:#dcbc78; text-align:center; }
.bk-exl p{ margin:0; font:italic 400 13px/1 var(--display); letter-spacing:.2em; }
.bk-exl p:last-child{ font-style:normal; font-weight:500; letter-spacing:.3em; }
.bk-exl svg{ width:40px; height:40px; stroke-width:1.2; }

/* 속표지와 끝 */
.bk-title,.bk-endpg{ padding:var(--bk-pt) var(--bk-po) var(--bk-pb) var(--bk-pi) !important; }
.bk-tt,.bk-fin{ position:absolute; inset:var(--bk-pt) var(--bk-po) var(--bk-pb) var(--bk-pi); display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; }
.bk-pg.is-l .bk-tt,.bk-pg.is-l .bk-fin{ inset:var(--bk-pt) var(--bk-pi) var(--bk-pb) var(--bk-po); }
.bk-pg.is-1 .bk-tt,.bk-pg.is-1 .bk-fin{ inset:var(--bk-pt) var(--bk-po) var(--bk-pb) var(--bk-po); }
.bk-tt-logo svg{ width:44px; height:44px; color:var(--bk-gold); stroke-width:1.2; }
.bk-tt-b{ margin:.6em 0 0; font:500 13px/1 var(--display); letter-spacing:.4em; padding-left:.4em; color:var(--bk-ink-3); }
.bk-tt-t{ margin:.65em 0 .35em; font:700 1.9em/1.25 var(--serif-ko); color:var(--bk-ink); word-break:keep-all; }
:lang(en) .bk-tt-t{ font-family:var(--display), var(--serif-ko); font-weight:600; }
.bk-tt-s{ margin:0; font-size:1em; line-height:1.6; color:var(--bk-ink-2); }
.bk-tt .bk-orn{ width:60%; margin:1.2em 0 .9em; }
.bk-tt-e{ margin:0; font:500 12.5px/1.4 var(--sans); letter-spacing:.1em; color:var(--bk-ink-3); }
.bk-tt-go{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin:1.6em 0 0; }
.bk-btn{ display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:40px; padding:0 16px; border-radius:999px; border:1px solid var(--bk-rule); background:transparent; color:var(--bk-ink); font:600 13.5px/1 var(--sans); text-decoration:none; cursor:pointer; transition:background var(--dur-1) ease, color var(--dur-1) ease; }
.bk-btn:hover{ background:var(--bk-tip); color:var(--bk-gold); }
.bk-btn.primary{ background:var(--bk-gold); border-color:var(--bk-gold); color:var(--bk-paper); }
.bk-btn.primary:hover{ filter:brightness(1.06); color:var(--bk-paper); background:var(--bk-gold); }
.bk-tt-dl{ display:flex; justify-content:center; gap:6px; margin:1em 0 0; }
.bk-tt-dl .bk-dla{ display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:8px; font-size:12.5px; color:var(--bk-ink-2); }
.bk-tt-dl .bk-dla svg{ width:15px; height:15px; margin:0; color:var(--bk-gold); }
.bk-tt-dl .bk-dla b{ font:600 12.5px/1 var(--sans); }
.bk-tt-dl .bk-dla:hover{ background:var(--bk-tip); color:var(--bk-ink); }
.bk-tt-h{ margin:1.3em 0 0; font:400 12.5px/1.6 var(--sans); color:var(--bk-ink-3); }
.bk-tt-by{ position:absolute; bottom:0; left:0; right:0; margin:0; font:500 10.5px/1.3 var(--sans); letter-spacing:.18em; color:var(--bk-ink-3); }
.bk-fin-f{ margin:.6em 0 .2em; font:italic 400 2.2em/1 var(--display); color:var(--bk-gold); }
.bk-fin-t{ margin:.3em 0 0; font:700 1.15em/1.4 var(--serif-ko); color:var(--bk-ink); }
.bk-fin-e,.bk-fin-by{ margin:.3em 0 0; font:500 12px/1.5 var(--sans); color:var(--bk-ink-3); letter-spacing:.06em; }

/* ───────── 넘기는 잎 · 앞면은 등을 축으로 일어서고 뒷면은 건너편에 내려앉는다 */
.bk-half{ position:absolute; top:0; width:50%; height:100%; z-index:5; pointer-events:none; will-change:transform; }
.bk-half.r{ left:50%; transform-origin:0 50%; }
.bk-half.l{ left:0; transform-origin:100% 50%; }
.bk-half .bk-pg{ box-shadow:0 18px 40px -22px rgba(0,0,0,.75); }
.bk-shd{ position:absolute; inset:0; z-index:3; opacity:0; pointer-events:none; border-radius:6px; }
.bk-half.r .bk-shd{ background:linear-gradient(90deg, rgba(0,0,0,.42), rgba(0,0,0,.14) 45%, rgba(255,255,255,.05)); }
.bk-half.l .bk-shd{ background:linear-gradient(270deg, rgba(0,0,0,.42), rgba(0,0,0,.14) 45%, rgba(255,255,255,.05)); }
.bk-cast{ position:absolute; inset:0; z-index:2; pointer-events:none; border-radius:6px; }
.bk-cast.r{ background:linear-gradient(90deg, rgba(0,0,0,.5), transparent 55%); }
.bk-cast.l{ background:linear-gradient(270deg, rgba(0,0,0,.5), transparent 55%); }

/* ───────── 아래 막대 · 지금 장, 진행, 쪽 번호 */
.bk-foot{ display:grid; grid-template-columns:minmax(0,1fr) minmax(180px,2.4fr) minmax(0,1fr); grid-template-areas:'w g p'; align-items:center; gap:10px 18px; padding:2px 6px 0; }
.bk-where{ grid-area:w; margin:0; font:500 13px/1.3 var(--sans); color:var(--ink-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bk-wn{ margin-right:.55em; font:600 12px/1 var(--mono); color:var(--accent); }
.bk-pno{ grid-area:p; margin:0; font:500 12.5px/1 var(--mono); color:var(--ink-3); text-align:right; white-space:nowrap; }
.bk-prog{ grid-area:g; position:relative; height:30px; }
.bk-prog::before{ content:''; position:absolute; left:0; right:0; top:50%; height:4px; margin-top:-2px; border-radius:4px; background:var(--line); }
.bk-fill{ position:absolute; left:0; top:50%; height:4px; margin-top:-2px; width:var(--bk-prog); border-radius:4px; background:linear-gradient(90deg, var(--accent-3), var(--accent)); pointer-events:none; }
.bk-ticks{ position:absolute; inset:0; pointer-events:none; }
.bk-ticks i{ position:absolute; top:50%; width:1px; height:10px; margin-top:-5px; background:var(--ink-3); opacity:.45; }
.bk-range{ position:absolute; inset:0; width:100%; height:100%; margin:0; background:transparent; -webkit-appearance:none; appearance:none; cursor:pointer; }
.bk-range::-webkit-slider-runnable-track{ height:30px; background:transparent; }
.bk-range::-moz-range-track{ height:30px; background:transparent; }
.bk-range::-webkit-slider-thumb{ -webkit-appearance:none; width:16px; height:16px; margin-top:7px; border-radius:50%; background:var(--accent); border:3px solid var(--surface); box-shadow:0 0 0 1px var(--accent-line), 0 2px 6px rgba(0,0,0,.35); }
.bk-range::-moz-range-thumb{ width:12px; height:12px; border-radius:50%; background:var(--accent); border:3px solid var(--surface); box-shadow:0 0 0 1px var(--accent-line), 0 2px 6px rgba(0,0,0,.35); }
.bk-range:focus-visible{ outline:none; }
.bk-range:focus-visible::-webkit-slider-thumb{ box-shadow:0 0 0 4px var(--accent-soft), 0 0 0 1px var(--accent); }
.bk-fn{ display:none; }

/* ───────── 차례 · 책갈피 · 찾기 창 */
.bk-dr{ position:absolute; z-index:12; top:58px; left:0; width:min(390px, 100%); max-height:calc(var(--bk-ph) + 24px); display:flex; flex-direction:column; border-radius:16px; border:1px solid var(--line); background:var(--raise); box-shadow:var(--e3); opacity:0; transform:translateY(-6px); transition:opacity .22s ease, transform .22s var(--ease-out); }
.bk-dr.on{ opacity:1; transform:none; }
.bk-dr[hidden]{ display:none; }
.bk-dh{ display:flex; align-items:center; justify-content:space-between; gap:8px; padding:8px 8px 6px 10px; border-bottom:1px solid var(--line-soft); }
.bk-dtabs{ display:flex; gap:2px; }
.bk-dtabs button{ height:36px; padding:0 12px; border:0; border-radius:9px; background:transparent; color:var(--ink-3); font:600 13px/1 var(--sans); cursor:pointer; }
.bk-dtabs button:hover{ color:var(--ink); background:var(--surface-2); }
.bk-dtabs button[aria-selected='true']{ color:var(--accent); background:var(--accent-soft); }
.bk-dx{ display:grid; place-items:center; width:36px; height:36px; border:0; border-radius:9px; background:transparent; color:var(--ink-3); cursor:pointer; }
.bk-dx:hover{ color:var(--ink); background:var(--surface-2); }
.bk-dp{ overflow:auto; padding:6px 8px 12px; overscroll-behavior:contain; }
.bk-dtoc,.bk-dtoc ol{ margin:0; padding:0; list-style:none; }
.bk-dpt > p{ margin:12px 8px 4px; font:700 11px/1.3 var(--sans); letter-spacing:.16em; color:var(--accent); }
.bk-dtoc button{ display:grid; grid-template-columns:26px minmax(0,1fr) auto; gap:8px; align-items:baseline; width:100%; padding:8px; border:0; border-radius:9px; background:transparent; color:var(--ink); font:500 13.5px/1.4 var(--sans); text-align:left; cursor:pointer; }
.bk-dtoc button:hover{ background:var(--surface-2); }
.bk-dtoc button[aria-current='true']{ background:var(--accent-soft); color:var(--accent); }
.bk-dtoc .n{ font:500 12px/1 var(--mono); color:var(--ink-3); }
.bk-dtoc .f{ font:500 12px/1 var(--mono); color:var(--ink-3); }
.bk-dmk{ margin:0; padding:0; list-style:none; }
.bk-dmk li{ display:flex; align-items:stretch; gap:4px; }
.bk-mkgo,.bk-hit{ flex:1; display:grid; gap:3px; width:100%; padding:9px 10px; border:0; border-radius:9px; background:transparent; color:var(--ink); text-align:left; cursor:pointer; }
.bk-mkgo:hover,.bk-hit:hover,.bk-hit.sel{ background:var(--surface-2); }
.bk-hit.sel{ box-shadow:inset 0 0 0 1px var(--accent-line); }
.bk-hit-h{ display:flex; justify-content:space-between; gap:10px; font:600 12.5px/1.35 var(--sans); }
.bk-hit-h small{ font:500 11.5px/1.35 var(--mono); color:var(--ink-3); white-space:nowrap; }
.bk-hit-s{ font:400 12.5px/1.55 var(--sans); color:var(--ink-2); }
.bk-mkx{ flex:none; display:grid; place-items:center; width:38px; border:0; border-radius:9px; background:transparent; color:var(--ink-3); cursor:pointer; }
.bk-mkx:hover{ color:var(--down); background:var(--surface-2); }
.bk-mkx svg{ width:15px; height:15px; }
.bk-empty{ margin:14px 10px; font:400 13px/1.6 var(--sans); color:var(--ink-3); }
.bk-dfind{ position:relative; display:flex; align-items:center; gap:8px; margin:4px 2px 8px; }
.bk-dfind svg{ position:absolute; left:11px; top:50%; transform:translateY(-50%); width:16px; height:16px; color:var(--ink-3); pointer-events:none; }
.bk-hitn{ position:absolute; right:10px; font:500 11.5px/1 var(--mono); color:var(--ink-3); pointer-events:none; }

/* ───────── 그림 크게 보기 */
.bk-lb{ position:fixed; inset:0; z-index:170; display:grid; place-items:center; padding:24px; background:rgba(4,6,10,.88); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); opacity:0; transition:opacity .2s ease; cursor:zoom-out; }
.bk-lb.on{ opacity:1; }
.bk-lb[hidden]{ display:none; }
.bk-lb figure{ margin:0; display:grid; justify-items:center; gap:12px; max-width:min(1400px, 100%); pointer-events:none; }
.bk-lb img{ width:auto; height:auto; max-width:100%; max-height:calc(100vh - 120px); border-radius:10px; box-shadow:0 30px 80px -30px rgba(0,0,0,.9); }
.bk-lb figcaption{ font:400 13.5px/1.5 var(--sans); color:#d7d1c3; text-align:center; }
.bk-lb svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; }
.bk-lbx{ position:absolute; top:14px; right:14px; display:grid; place-items:center; width:44px; height:44px; border-radius:50%; border:1px solid rgba(255,255,255,.2); background:rgba(20,24,32,.8); color:#f0eadd; cursor:pointer; }

/* ───────── 몰입 모드 · 책만 화면 가득 */
.bk.imm{ position:fixed; inset:0; z-index:90; margin:0; padding:12px 16px calc(10px + env(safe-area-inset-bottom, 0px)); background:var(--bg); overflow:hidden; }
.bk.imm .bk-stage{ flex:1; min-height:0; }
body.bk-imm-on{ overflow:hidden; }
/* 사이트의 view 는 들어올 때의 애니메이션으로 쌓임 맥락을 만든다 · 몰입 모드에서는 그 맥락을 풀어 책이 머리말 위로 오게 한다 */
body.bk-imm-on .view{ animation:none !important; }
body.bk-imm-on .dock,body.bk-imm-on .td,body.bk-imm-on .tg,body.bk-imm-on #totop,body.bk-imm-on .bgm-pill,body.bk-sheet-on .dock,body.bk-sheet-on .td,body.bk-lb-on .td,body.bk-lb-on .tg{ visibility:hidden; }

/* ───────── 좁은 화면 */
@media (max-width:1100px){
  .bk-g2 .bk-b span{ display:none; }
  .bk-g2 .bk-b{ padding:0; width:38px; }
}
@media (max-width:760px){
  .bk-q{ display:none; }
  .bk-qb{ display:inline-flex; }
  .bk-g1 .bk-b span{ display:none; }
  .bk-g1 .bk-b:not(.bk-resume){ padding:0; width:38px; }
  .bk-resume span{ display:inline !important; }
  .bk-resume{ padding:0 10px; }
}
.bk.narrow{ margin-top:2px; gap:6px; }
.bk.narrow .bk-bar{ gap:4px; padding:5px; border-radius:12px; flex-wrap:nowrap; }
.bk.narrow [data-bk='marks']{ display:none; }
.bk.narrow .bk-g2{ margin-left:auto; }
.bk.narrow .bk-g1,.bk.narrow .bk-g2{ gap:2px; }
.bk.narrow .bk-seg button{ min-width:38px; padding:0 6px; }
.bk.narrow .bk-stage{ padding:10px 0 6px; gap:0; }
.bk.narrow .bk-nav{ display:none; }
.bk.narrow .bk-foot{ grid-template-columns:44px minmax(0,1fr) 44px; grid-template-areas:'w w p' 'a g b'; gap:4px 8px; padding:0 2px; }
.bk.narrow .bk-fn{ display:grid; place-items:center; width:44px; height:40px; border-radius:10px; border:1px solid var(--line); background:var(--surface); color:var(--ink-2); cursor:pointer; }
.bk.narrow .bk-fn:disabled{ opacity:.3; }
.bk.narrow .bk-fn.a{ grid-area:a; } .bk.narrow .bk-fn.b{ grid-area:b; }
.bk.narrow .bk-dr{ position:fixed; top:auto; left:0; right:0; bottom:0; width:auto; max-height:78vh; border-radius:18px 18px 0 0; z-index:95; padding-bottom:env(safe-area-inset-bottom, 0px); }
.bk.narrow .bk-dlm{ position:fixed; left:16px; right:16px; top:auto; bottom:calc(16px + env(safe-area-inset-bottom, 0px)); width:auto; }
.bk.narrow .bk-pg{ border-radius:8px; }
.bk.narrow .bk-run{ font-size:10.5px; }
@media (pointer:coarse){
  .bk-b,.bk-seg,.bk-dtabs button,.bk-dx{ min-height:44px; height:44px; }
  .bk-b.bk-io,.bk-g2 .bk-b{ width:44px; min-width:44px; }
  .bk-seg button{ line-height:44px; min-width:44px; }
  .bk-dtoc button,.bk-mkgo,.bk-hit{ min-height:44px; }
}
@media (prefers-reduced-motion: reduce){
  .bk-book,.bk-nav,.bk-dr,.bk-lb,.bk-corner{ transition:none !important; }
  .bk-book.bk-fadein .bk-sheet,.bk-book.bk-fadein .bk-slot.c,.bk-ribbon.drop{ animation:none !important; }
}
@media print{
  .bk-bar,.bk-foot,.bk-nav,.bk-dr,.bk-corner,.bk-lb{ display:none !important; }
}

/* 측정용 숨은 쪽 · 실제 쪽과 같은 글꼴과 너비 */
.bk-meas{ position:absolute; left:-10000px; top:0; width:var(--bk-pw); height:4000px; overflow:hidden; visibility:hidden; pointer-events:none; contain:strict; }
.bk-meas .bk-pg{ position:relative; inset:auto; height:auto; overflow:visible; }
.bk-meas .bk-body{ height:auto; overflow:visible; }

/* ═════════ 휴대폰과 태블릿 마무리 · 모든 css 뒤에 읽힌다
   휴대폰 760 이하 · 태블릿 761–1279 · 손가락으로 쓰는 기기는 pointer:coarse */

/* ─ 태블릿 머리 · 메뉴 단추를 늘 보이고, 가로로 넘기는 탭 줄은 손가락 크기로 */
@media (min-width:761px) and (max-width:1279px), (min-width:761px) and (pointer:coarse){
  .menu-btn{ display:inline-flex !important; align-items:center; justify-content:center; }
}
@media (min-width:761px){
  .nav{ scroll-padding-inline:24px; scroll-behavior:smooth; -webkit-mask-image:none; mask-image:none; }
  .nav.fade-r{ -webkit-mask-image:linear-gradient(90deg,#000 88%,transparent); mask-image:linear-gradient(90deg,#000 88%,transparent); }
  .nav.fade-l{ -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%); mask-image:linear-gradient(90deg,transparent,#000 12%); }
  .nav.fade-l.fade-r{ -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent); mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent); }
}
@media (min-width:761px) and (pointer:coarse){
  .nav{ gap:4px; padding-bottom:9px; }
  .nav .tab{ min-height:40px; display:inline-flex; align-items:center; padding:8px 13px; font-size:14px; }
  .tools .ibtn,.tools .theme,.tools .lang button{ min-height:42px; }
}

/* ─ 오늘의 수학사 · 태블릿과 휴대폰에서는 본문을 가리지 않도록 오른쪽 아래 둥근 날짜 단추로 */
@media (max-width:1279px), (pointer:coarse){
  .td-tab{ left:auto; right:18px; top:auto; bottom:calc(env(safe-area-inset-bottom,0px) + 74px); transform:none; width:44px; height:44px; min-height:0 !important; padding:0; gap:0; justify-content:center; border-radius:50%; border:1px solid color-mix(in srgb, var(--accent) 45%, var(--line)); box-shadow:0 10px 24px -12px rgba(0,0,0,.6); }
  .td-tab:hover{ width:44px; }
  .td-tab-t{ display:none; }
  .td-tab-d{ width:30px; height:32px; }
  .td-tab.new::after{ top:1px; right:1px; }
  body.insp-open .td-tab{ visibility:hidden; }
}
@media (max-width:760px){
  .td-tab{ right:12px; bottom:calc(var(--dock, 0px) + 68px + env(safe-area-inset-bottom, 0px)); }
  .td-pop{ left:12px; right:12px; width:auto; max-height:min(64vh, 520px); }
  .td-fig{ width:104px; height:104px; left:-8px; }
  .td-head.has-fig{ padding-left:98px; }
}

/* ─ 테오의 짧은 인사 · 휴대폰에서는 작게, 화면 아래쪽만 조금 차지하게 */
@media (max-width:760px){
  .tg-say-fig,.tg-say-fig .theo{ width:70px; height:104px; }
  .tg-say-fig{ margin-right:-6px; }
  .tg-bub{ margin-bottom:52px; max-width:calc(100vw - 104px); padding:9px 12px; }
  .tg-bub .tg-tz-t{ font-size:13.5px; }
  .tg-bub .tg-tz{ font-size:12.5px; line-height:1.5; -webkit-line-clamp:3; line-clamp:3; display:-webkit-box; -webkit-box-orient:vertical; overflow:hidden; }
  .tg-bub .tg-more{ min-height:36px; }
}

/* ─ 손가락으로 누르는 작은 단추와 입력칸 · 누르기 쉽게 키우고 iOS 확대를 막는다 */
@media (pointer:coarse){
  .bio-p{ padding-block:4px; }
  select,input[type=search],input[type=text]{ min-height:44px; font-size:16px; }
  .xp-btn,.xpc-btn,.bio-btn{ min-height:40px; }
  .at-ib,.at-st-b{ min-width:40px; min-height:40px; }
  /* 손가락으로는 떠 있는 효과가 붙어 남지 않게 */
  .pdc.has-por:hover .pdc-por{ transform:none; }
}

/* ─ 휴대폰 가로 모드처럼 낮은 화면 · 떠 있는 요소를 줄인다 */
@media (max-height:500px) and (orientation:landscape){
  .tg-say{ display:none; }
  .td-pop{ max-height:86vh; }
  .td-fig{ display:none; }
  .td-head.has-fig{ padding-left:18px; }
}

/* ─ 인물 페이지 초상 · 태블릿에서는 조금 작게 */
@media (min-width:761px) and (max-width:1100px){
  .pp-h.has-por{ padding-right:200px; }
  .pp-por{ width:180px; }
}

/* ═════════════════════════════════════════════════════════════
   MATHESIS 디자인 시스템 · 모든 기능 css 뒤, fix.css 앞에 읽힌다
   토큰은 base.css 의 :root 에 있고, 여기서는 그 토큰으로 머리말, 페이지 머리,
   단추, 칩, 입력칸, 카드, 표, 떠 있는 창, 바닥글, 첫 화면을 한 결로 맞춘다
   ═════════════════════════════════════════════════════════════ */

/* ───────── 0 · 바탕 */
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; scroll-padding-top:calc(var(--hdr) + 16px); }
body{ font-size:var(--fs-base); line-height:var(--lh-body); font-kerning:normal; text-rendering:optimizeLegibility; }
:where(h1,h2,h3,h4){ letter-spacing:-.006em; }
a{ text-decoration-thickness:1px; text-underline-offset:.24em; }
a:hover{ text-decoration-color:currentColor; }
::selection{ background:color-mix(in srgb, var(--accent) 32%, transparent); color:var(--ink); }
hr{ border:0; height:1px; background:var(--line-soft); }
sup,sub{ font-size:max(.75em, 12px); line-height:0; }

/* 본문 페이지에서는 배경 그림을 한 단계 가라앉히고, 읽는 칸 뒤에 옅은 막을 깐다 */
#page:not([data-page='home']):not([data-page='map']):not([data-page='focus']) #bg{ opacity:.42; }
#page:not([data-page='map']):not([data-page='focus']) #app::before{ content:''; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(90deg, transparent 0, var(--veil) max(8vw, calc((100vw - var(--page-max)) / 2 + 40px)), var(--veil) min(92vw, calc((100vw + var(--page-max)) / 2 - 40px)), transparent 100%); }
#page[data-page='home'] #app::before{ opacity:.5; }

/* ───────── 1 · 머리말 */
/* 머리말과 본문의 가장자리를 같은 선에 맞춘다 · 넓은 페이지와 앱 화면은 그 폭을 따른다 */
#page[data-page='chrono'],#page[data-page='edu']{ --page-max:1560px; }
#page[data-page='map'],#page[data-page='focus']{ --page-max:100vw; }
.appview{ padding-inline:var(--gutter); }
#top{ background:var(--glass); -webkit-backdrop-filter:blur(18px) saturate(1.4); backdrop-filter:blur(18px) saturate(1.4); border-bottom:1px solid var(--line-soft);
  transition:transform var(--dur-3) var(--ease-out), box-shadow var(--dur-3) ease, background-color var(--dur-3) ease; will-change:transform; }
#top.is-scrolled{ box-shadow:0 12px 32px -24px rgba(0,0,0,.7); border-bottom-color:var(--line); }
#top.is-tucked{ transform:translateY(calc(-1 * var(--hdr-cut, 0px))); }
#top .top-in{ min-height:64px; gap:var(--s-4); padding-block:10px; padding-inline:max(var(--gutter), calc((100% - var(--page-max)) / 2 + var(--gutter))); }

/* 상표 · 표장과 글자 사이에 가는 세로선 */
#top .brand{ gap:12px; color:var(--ink); border-radius:var(--r-sm); }
#top .brand svg{ width:34px; height:34px; transition:transform var(--dur-4) var(--ease-out); }
#top .brand svg *{ stroke-width:1.2; }
#top .brand:hover svg{ transform:rotate(-12deg); }
#top .brand-t{ padding-left:12px; border-left:1px solid var(--line); gap:0; }
#top .brand-en{ font-family:var(--display); font-size:17px; font-weight:600; letter-spacing:.32em; line-height:1.05; color:var(--ink); }
#top .brand-ko{ margin-top:4px; font-size:12px; line-height:1.2; letter-spacing:.06em; color:var(--ink-3); }
html:lang(en) #top .brand-ko{ font-family:var(--display); font-style:italic; font-size:13px; letter-spacing:.02em; }

/* 검색 */
#top .search{ width:clamp(220px, 24vw, 340px); }
#top .search input{ height:var(--h-md); padding:0 44px 0 38px; border-radius:var(--r-ctl); border:1px solid var(--line); background:color-mix(in srgb, var(--surface) 72%, transparent); font-size:14px; color:var(--ink); transition:border-color var(--dur-2), box-shadow var(--dur-2), background-color var(--dur-2); }
#top .search input:hover{ border-color:color-mix(in srgb, var(--accent) 30%, var(--line)); }
#top .search input:focus{ outline:none; background:var(--surface); border-color:var(--accent-line); box-shadow:0 0 0 4px var(--accent-soft); }
#top .search input::-webkit-search-cancel-button{ opacity:.5; }
#top .search .ico{ left:13px; width:15px; height:15px; stroke:var(--ink-3); }
#top .search kbd{ right:10px; min-width:22px; text-align:center; font-size:12px; line-height:18px; padding:0 5px; border-radius:5px; background:var(--surface-2); border-color:var(--line); border-bottom-width:1px; color:var(--ink-3); }
#top .results{ top:calc(100% + 10px); border-radius:var(--r-card); border-color:var(--line-soft); box-shadow:var(--e3); padding:8px; }

/* 도구 단추 · 모두 같은 크기 */
#top .tools{ gap:6px; }
#top .ibtn{ width:var(--h-md); height:var(--h-md); min-width:0; min-height:0; padding:0; display:inline-grid; place-items:center; border-radius:var(--r-ctl); border:1px solid var(--line); background:transparent; color:var(--ink-2); font-size:16px; line-height:1; transition:color var(--dur-2), border-color var(--dur-2), background-color var(--dur-2); }
#top .ibtn:hover{ color:var(--ink); border-color:var(--accent-line); background:var(--accent-soft); }
#top .snd-btn.on{ color:var(--accent); border-color:var(--accent-line); }
#top .seg.lang{ height:var(--h-md); padding:3px; gap:2px; border-radius:var(--r-ctl); border:1px solid var(--line); background:transparent; box-shadow:none; }
#top .seg.lang button{ height:100%; min-height:0; min-width:32px; padding:0 8px; border:0; border-radius:7px; font:500 12px/1 var(--mono); letter-spacing:.08em; color:var(--ink-3); background:transparent; box-shadow:none; }
#top .seg.lang button:hover{ color:var(--ink); }
#top .seg.lang button[aria-pressed='true']{ background:var(--accent-soft); color:var(--accent); font-weight:600; box-shadow:inset 0 0 0 1px var(--accent-line); }
#top .menu-btn{ font-size:17px; }
#top .snd-pop{ top:calc(100% + 12px); border-radius:var(--r-card); border-color:var(--line-soft); box-shadow:var(--e3); padding:16px 18px 18px; }

/* 탭 줄 · 금빛 밑줄로 지금 페이지를 표시 */
#top .nav{ height:44px; gap:0; align-items:stretch; padding:0 max(calc(var(--gutter) - 10px), calc((100% - var(--page-max)) / 2 + var(--gutter) - 10px)); border-top:1px solid var(--hair); }
#top .nav .tab{ position:relative; display:inline-flex; align-items:center; height:100%; min-height:0; padding:0 10px; border-radius:0; background:none; color:var(--ink-2); font-size:13.5px; font-weight:500; letter-spacing:.005em; white-space:nowrap; transition:color var(--dur-2); }
#top .nav .tab::after{ content:''; position:absolute; left:10px; right:10px; bottom:0; height:2px; border-radius:2px 2px 0 0; background:var(--accent); transform:scaleX(0); opacity:0; transition:transform var(--dur-3) var(--ease-out), opacity var(--dur-2); }
#top .nav .tab:hover{ color:var(--ink); background:none; }
#top .nav .tab:hover::after{ transform:scaleX(.4); opacity:.55; }
#top .nav .tab[aria-current='page']{ color:var(--ink); background:none; font-weight:600; }
#top .nav .tab[aria-current='page']::after{ transform:none; opacity:1; }
#top .nav .tab:focus-visible{ outline-offset:-6px; border-radius:8px; }
#top .nav .ng{ flex:none; align-self:center; width:1px; height:16px; margin:0 7px; padding:0; border:0; font-size:0; background:var(--line); }
#top .nav .ng:first-child{ display:none; }

@media (min-width:761px) and (max-width:1439px) and (pointer:fine){
  #top .nav .tab{ padding:0 8px; font-size:13px; }
  #top .nav .tab::after{ left:8px; right:8px; }
  #top .nav{ padding-inline:max(calc(var(--gutter) - 8px), calc((100% - var(--page-max)) / 2 + var(--gutter) - 8px)); }
  #top .nav .ng{ margin:0 5px; }
}

/* 스크롤 진행 · 머리말 아래 가는 금빛 선 */
#top .progress{ height:1.5px; bottom:-1px; background:linear-gradient(90deg, color-mix(in srgb, var(--accent) 30%, transparent), var(--accent) 60%, var(--accent-2)); }

/* 태블릿 · 탭 줄은 손가락 크기, 가장자리는 흐리게 */
@media (min-width:761px) and (pointer:coarse){
  #top .nav{ height:48px; }
  #top .nav .tab{ min-height:0; padding:0 13px; font-size:14px; }
  #top .nav .tab::after{ left:13px; right:13px; }
  #top .ibtn{ width:44px; height:44px; }
  #top .seg.lang{ height:44px; }
  #top .search input{ height:44px; }
}
/* 휴대폰 · 탭 줄 대신 아래 도크, 언어는 단추 하나로 */
@media (max-width:760px){
  #top .nav{ display:none; }
  #top .top-in{ min-height:58px; gap:8px; padding-block:8px; }
  #top .brand-t{ display:none; }
  #top .brand svg{ width:32px; height:32px; }
  #top .search{ flex:1; width:auto; max-width:none; min-width:0; }
  #top .search input{ padding-right:12px; }
  #top .search kbd{ display:none; }
  #top .tools{ gap:4px; }
  #top .seg.lang{ padding:0; border:0; background:none; }
  #top .seg.lang button[aria-pressed='true']{ display:none; }
  #top .seg.lang button{ width:var(--h-md); padding:0; border:1px solid var(--line); border-radius:var(--r-ctl); color:var(--ink-2); }
}
@media (max-width:760px) and (pointer:coarse){
  #top .ibtn,#top .seg.lang button{ width:44px; height:44px; }
  #top .seg.lang{ height:44px; }
  #top .search input{ height:44px; }
  #top .top-in{ padding-block:7px; }
}

/* ───────── 2 · 페이지 머리 · 눈썹글, 제목, 도입글, 동작 */
.eyebrow{ font-family:var(--display); font-style:italic; font-size:15px; line-height:1.3; letter-spacing:.01em; color:var(--accent); }
.vh{ gap:var(--s-3); margin:clamp(4px, 1.6vw, 20px) 0 clamp(28px, 4vw, 48px); max-width:920px; }
.vh .eyebrow{ display:flex; align-items:center; gap:12px; color:var(--accent); font-size:15.5px; line-height:1.3; max-width:none; }
.vh .eyebrow::before{ content:''; flex:none; width:32px; height:1px; background:currentColor; opacity:.65; }
.vh h2{ font-family:var(--serif-ko); font-weight:600; font-size:var(--fs-3xl); line-height:var(--lh-tight); letter-spacing:-.014em; padding:0; margin:2px 0 4px; }
.vh h2::after{ display:none; }
.vh > p:not(.eyebrow){ font-size:var(--fs-md); line-height:1.78; color:var(--ink-2); max-width:62ch; }
.vh > p.count{ font-size:var(--fs-sm); color:var(--ink-3); }
.vh > .bgm-chip{ margin-top:var(--s-3); }
.vh.sm h3{ font-family:var(--serif-ko); }

/* 앱 화면 머리 · 지도와 계보도 */
.app-h{ display:flex; align-items:baseline; flex-wrap:wrap; gap:4px 14px; min-width:0; }
.app-h .eyebrow{ font-size:14px; }
.app-h h1{ font-family:var(--serif-ko); font-weight:600; font-size:clamp(20px, 1.4vw + 10px, 26px); line-height:1.2; letter-spacing:-.01em; }
.intro .app-h p{ color:var(--ink-3); font-size:13.5px; }
.intro .app-h p b{ color:var(--ink-2); font-weight:500; }

/* 페이지 안의 절 제목 · 오른쪽으로 가는 선이 이어진다 */
.sec-h{ display:flex; align-items:center; gap:16px; font-family:var(--serif-ko); font-weight:600; font-size:var(--fs-xl); line-height:1.3; margin:var(--s-10) 0 var(--s-5); }
.sec-h::after{ content:''; flex:1; min-width:24px; height:1px; background:linear-gradient(90deg, var(--line), transparent); }
.hof-h{ align-items:baseline; gap:12px 14px; flex-wrap:wrap; margin:var(--s-2) 0 var(--s-5); }
.hof-h h3{ font-family:var(--serif-ko); font-weight:600; font-size:var(--fs-xl); line-height:1.3; }
.hof-h .count{ font-size:var(--fs-sm); color:var(--ink-3); }
.hof-h a{ font-size:var(--fs-sm); font-weight:500; text-decoration:none; }
.hof-h a:hover{ text-decoration:underline; }
.fsec h3,.pp-s > h2,.ab h2,.dc-h h3,.lvl-h h3,.st-head h3{ letter-spacing:-.01em; }

/* 빵 부스러기 */
.crumbs{ font-size:var(--fs-xs); letter-spacing:.01em; gap:8px; }
.crumbs a{ text-decoration:none; }
.crumbs a:hover{ color:var(--accent); text-decoration:underline; }

/* ───────── 3 · 단추 · 기본, 주 단추, 유령 단추 · 높이 32 38 46 */
.btn{ min-height:var(--h-md); padding:7px 16px; gap:8px; border-radius:var(--r-ctl); border:1px solid var(--line); background:var(--surface); color:var(--ink); font-size:14px; font-weight:500; line-height:1.25; letter-spacing:.005em; box-shadow:var(--e1);
  transition:border-color var(--dur-2), background-color var(--dur-2), color var(--dur-2), box-shadow var(--dur-2), transform var(--dur-1) var(--ease-out); }
.btn:hover{ border-color:var(--accent-line); background:var(--surface-2); color:var(--ink); }
.btn:active{ transform:translateY(1px); box-shadow:none; }
.btn.sm{ min-height:var(--h-sm); padding:5px 12px; gap:6px; border-radius:8px; font-size:13px; }
.btn.lg{ min-height:var(--h-lg); padding:10px 22px; gap:10px; border-radius:12px; font-size:15px; }
.btn.primary{ border-color:transparent; background-color:var(--accent); background-image:linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,0) 60%); color:var(--accent-ink); font-weight:600; filter:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28), 0 1px 2px rgba(0,0,0,.2), 0 10px 22px -12px color-mix(in srgb, var(--accent) 80%, transparent); }
.btn.primary:hover{ background-color:var(--accent-2); color:var(--accent-ink); border-color:transparent; filter:none; }
.btn.ghost{ background:transparent; border-color:transparent; box-shadow:none; color:var(--ink-2); }
.btn.ghost:hover{ background:var(--accent-soft); color:var(--ink); }
.btn.on,.btn[aria-pressed='true']{ border-color:var(--accent-line); color:var(--accent); background:var(--accent-soft); }
.btn[disabled],.btn[aria-disabled='true']{ opacity:.45; cursor:default; box-shadow:none; transform:none; }
a.btn{ text-decoration:none; }

.ibtn{ height:var(--h-sm); min-width:var(--h-sm); padding:0 11px; border-radius:8px; border:1px solid var(--line); background:var(--surface); color:var(--ink-2); font-size:13px; transition:color var(--dur-2), border-color var(--dur-2), background-color var(--dur-2); }
.ibtn:hover{ color:var(--ink); border-color:var(--accent-line); }
.ibtn.sm{ height:26px; min-width:26px; padding:0 8px; font-size:12px; border-radius:6px; }
.ibtn.help{ width:26px; height:26px; min-width:26px; padding:0; border-radius:50%; font-size:13px; }

/* ───────── 4 · 칩, 사람 칩, 알약 표 */
.chips{ gap:6px; }
.chip{ min-height:30px; padding:4px 12px; gap:6px; border-radius:var(--r-pill); border:1px solid var(--line); background:var(--surface); color:var(--ink-2); font-size:13px; line-height:1.3;
  transition:color var(--dur-2), border-color var(--dur-2), background-color var(--dur-2), box-shadow var(--dur-2); }
.chip:hover{ color:var(--ink); border-color:color-mix(in srgb, var(--c, var(--accent)) 50%, var(--line)); }
.chip[aria-pressed='true']{ color:var(--ink); border-color:color-mix(in srgb, var(--c, var(--accent)) 72%, transparent); background:color-mix(in srgb, var(--c, var(--accent)) 14%, var(--surface)); box-shadow:inset 0 0 0 .5px color-mix(in srgb, var(--c, var(--accent)) 60%, transparent); font-weight:500; }
.chip.static,.chip.static:hover{ color:var(--ink-2); border-color:var(--line); cursor:default; }
.chip small,.pchip small{ font-size:12px; }
.chip[disabled]{ opacity:.4; cursor:default; }
.chips .sep{ height:20px; background:var(--line); margin:0 6px; }
.pchip{ min-height:28px; padding:3px 10px 3px 8px; border-radius:var(--r-sm); background:color-mix(in srgb, var(--c, var(--accent)) 12%, transparent); font-size:13px; transition:background-color var(--dur-2), box-shadow var(--dur-2); }
.pchip:hover{ background:color-mix(in srgb, var(--c, var(--accent)) 22%, transparent); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--c, var(--accent)) 40%, transparent); }
.gchip{ border-radius:var(--r-sm); border-color:var(--line-soft); min-height:28px; }
.gchip:hover{ border-color:var(--accent-line); }

.badge{ display:inline-flex; align-items:center; min-height:24px; padding:2px 10px; border-radius:var(--r-pill); font-size:12px; line-height:1.3; border-color:var(--line); color:var(--ink-2); background:var(--surface); }
.badge.prize{ border-color:var(--accent-line); color:var(--accent); background:var(--accent-soft); }
.mst{ font-size:12px; min-height:22px; padding:1px 10px; }
.kb{ font-size:12px; line-height:1.5; padding:0 6px; border-radius:var(--r-xs); }
.ck,.ck:lang(ko){ font-size:12px; line-height:1.6; padding:0 7px; border-radius:var(--r-xs); }
kbd{ font-size:12px; border-radius:5px; }

/* ───────── 5 · 나뉜 선택 단추 · 떠오른 손잡이와 금빛 가는 테 */
.seg{ display:inline-flex; padding:3px; gap:2px; border:1px solid var(--line); border-radius:var(--r-ctl); background:var(--sunk); overflow:visible; }
.seg button{ min-height:30px; padding:4px 12px; border:0; border-left:0; border-radius:7px; background:transparent; color:var(--ink-2); font-size:13px; font-weight:500; line-height:1.25; transition:color var(--dur-2), background-color var(--dur-2), box-shadow var(--dur-2); }
.seg button:hover{ color:var(--ink); background:color-mix(in srgb, var(--ink) 5%, transparent); }
.seg button[aria-pressed='true']{ background:var(--raise); color:var(--ink); font-weight:600; box-shadow:0 1px 2px rgba(0,0,0,.28), inset 0 0 0 1px var(--accent-line); }
.seg.zoom .zv{ font-size:12.5px; }
.itabs{ background:var(--raise); }
.itabs .seg{ background:var(--sunk); }

/* 켜고 끄는 칸 */
.toggle{ gap:8px; font-size:13.5px; min-height:30px; }
.toggle input[type=checkbox]{ width:16px; height:16px; margin:0; accent-color:var(--accent); }
.lbl{ font-size:12.5px; color:var(--ink-3); }

/* ───────── 6 · 입력칸과 고르기 */
.field-in{ min-height:var(--h-md); padding:7px 12px; border-radius:var(--r-ctl); border:1px solid var(--line); background:var(--surface); color:var(--ink); font-size:14px; line-height:1.3; transition:border-color var(--dur-2), box-shadow var(--dur-2), background-color var(--dur-2); }
.field-in::placeholder{ color:var(--ink-3); }
.field-in:hover{ border-color:color-mix(in srgb, var(--accent) 28%, var(--line)); }
.field-in:focus{ outline:none; border-color:var(--accent-line); box-shadow:0 0 0 4px var(--accent-soft); }
select.field-in{ -webkit-appearance:none; appearance:none; padding-right:34px; cursor:pointer;
  background-image:linear-gradient(45deg, transparent 50%, var(--ink-3) 50%), linear-gradient(135deg, var(--ink-3) 50%, transparent 50%);
  background-position:calc(100% - 17px) 52%, calc(100% - 12px) 52%; background-size:5px 5px, 5px 5px; background-repeat:no-repeat; }
select.field-in option{ background:var(--raise); color:var(--ink); }
.toolbar{ gap:10px; margin-bottom:var(--s-4); }
.toolbar .count,.count{ font-size:var(--fs-sm); color:var(--ink-3); font-variant-numeric:tabular-nums; }

/* ───────── 7 · 판과 카드 · 모서리 18 과 14, 가는 선과 부드러운 그림자 */
.panel{ background:var(--surface); border:1px solid var(--line-soft); border-radius:var(--r-panel); box-shadow:var(--e1); }
:is(.hcard,.pdc,.fact,.lanec,.tmini,.st-item,.st-card,.crit,.pcard,.mp-tile,.unit,.stats .st,.fd-stats .st,.count-b,.pager a,.pp-nav a,.qopt,.rrow,.prow,.throw,.ffb,.ovb,.cards3 .th){ border-color:var(--line-soft); box-shadow:var(--stripe, 0 0 #0000), var(--e1); }
:is(.hcard,.pdc,.fact,.lanec,.tmini,.st-item,.st-card,.crit,.pcard,.mp-tile,.stats .st,.fd-stats .st,.pager a,.pp-nav a,.cards3 .th){ border-radius:var(--r-card); }
:is(.rrow,.prow,.throw,.qopt,.ffb,.count-b){ border-radius:var(--r-ctl); }
.unit{ border-radius:var(--r-card); }
/* 누를 수 있는 카드는 올리면 살짝 떠오른다 */
:is(.hcard,.pdc,.pager a,.pp-nav a,.st-item,.tmini,.lanec,.mp-tile,.pcard,.st-card){ transition:border-color var(--dur-3) ease, box-shadow var(--dur-3) ease, background-color var(--dur-3) ease, transform var(--dur-3) var(--ease-out); }
@media (hover:hover) and (pointer:fine){
  :is(.hcard,.pager a,.pp-nav a,.st-item,.tmini,.lanec,.mp-tile,.pcard,.st-card):hover{ border-color:var(--accent-line); box-shadow:var(--stripe, 0 0 #0000), var(--e2); transform:translateY(-2px); }
  .pdc:hover{ box-shadow:var(--e2); transform:translateY(-2px); }
  :is(.rrow,.prow,.throw,.ffb):hover{ box-shadow:var(--stripe, 0 0 #0000), var(--e2); }
}
/* 분야색 띠 · 두꺼운 테두리 대신 모서리를 따라 휘는 안쪽 선 */
.tmini,.mp-tile{ border-top:1px solid var(--line-soft); --stripe:inset 0 2px 0 var(--c); }
.tmini:hover,.mp-tile:hover{ border-top-color:var(--accent-line); }
.phc{ border-top:1px solid var(--line-soft); border-color:var(--line-soft); border-radius:var(--r-panel); box-shadow:inset 0 3px 0 var(--c), var(--e1); }
.lanec{ border-left:1px solid var(--line-soft); --stripe:inset 3px 0 0 var(--f-edu); }
.lanec:hover{ border-left-color:var(--accent-line); }
.lanec[aria-pressed='true']{ border-color:var(--accent-line); }
.prow{ border-left:1px solid var(--line-soft); --stripe:inset 3px 0 0 var(--c); }
.prow:hover{ border-left-color:var(--ink-3); }
.pcard{ border-left:1px solid var(--line-soft); --stripe:inset 3px 0 0 var(--c); }
.pcard:hover{ border-left-color:var(--accent-line); }
.ffb{ border-left:1px solid var(--line); --stripe:inset 3px 0 0 var(--c, var(--accent)); }
.ffb:hover{ border-left-color:var(--ink-3); }
.ffb.dom{ border-right:1px solid var(--line); --stripe:inset -3px 0 0 var(--accent); }
.st-item[aria-current='true']{ border-color:var(--accent-line); background:color-mix(in srgb, var(--accent) 8%, var(--surface)); box-shadow:inset 3px 0 0 var(--accent), var(--e1); }
.hcard,.pdc{ background:var(--surface); }

/* 숫자 칸 */
.stats{ gap:12px; }
.stats .st,.fd-stats .st{ padding:14px 16px 12px; background:var(--surface); }
.st b{ font-family:var(--display); font-weight:500; font-size:30px; line-height:1.05; letter-spacing:-.01em; }
.st span{ font-size:12.5px; margin-top:4px; }

/* ───────── 8 · 표 */
.score thead th,.e2-t thead th{ font-size:12px; font-weight:600; letter-spacing:.04em; color:var(--ink-3); text-transform:none; }
.score tbody tr,.e2-t tbody tr{ transition:background-color var(--dur-2); }
.score tbody tr:hover,.e2-t tbody tr:hover{ background:color-mix(in srgb, var(--accent) 4%, transparent); }
.score-wrap{ border-color:var(--line-soft); border-radius:var(--r-card); box-shadow:var(--e1); }

/* ───────── 9 · 떠 있는 창 · 검색 결과, 도움말, 풍선, 알림, 메뉴, 시트 */
.results,.help-pop,.snd-pop,.keys-in{ background:var(--raise); border:1px solid var(--line-soft); border-radius:var(--r-card); box-shadow:var(--e3); }
.res{ border-radius:8px; padding:9px 10px; }
.res-g{ font-size:12px; letter-spacing:.14em; padding:10px 10px 4px; }
.res-empty{ padding:18px 14px; text-align:center; font-size:13.5px; }
.tip{ border-radius:var(--r-ctl); border-color:var(--line-soft); box-shadow:var(--e3); padding:11px 13px; }
.toast{ border-radius:12px; padding:11px 18px; font-weight:500; box-shadow:var(--e3); letter-spacing:.005em; }
.toast small{ font-size:12px; }
.menu,.keys{ background:rgba(4,6,10,.5); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
.menu-in{ border-left:1px solid var(--line-soft); box-shadow:var(--e3); gap:22px; padding-inline:22px; }
.menu-g{ gap:2px; }
.menu-g .ft-h{ margin:0 0 6px 12px; }
.menu-g a{ border-radius:var(--r-ctl); padding:10px 12px; transition:background-color var(--dur-2), border-color var(--dur-2); }
.menu-g a:hover{ background:var(--surface-2); }
.menu-g a[aria-current='page']{ border-color:var(--accent-line); background:var(--accent-soft); box-shadow:inset 3px 0 0 var(--accent); }
.menu-g a b{ font-size:16px; font-weight:600; }
.menu-g a small{ font-size:12.5px; }
.menu-top .ft-logo{ font-size:17px; }
.keys-in{ border-radius:var(--r-panel); }
.sheet-bg{ background:rgba(4,6,10,.56); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
.sheet{ border-radius:20px; border-color:var(--line-soft); box-shadow:var(--e3); }
.sheet-h{ padding:16px 16px 14px 24px; border-bottom-color:var(--line-soft); }
.sheet-t{ font-size:18px; font-weight:600; letter-spacing:-.005em; }
.sheet-body{ padding:20px 24px 26px; }
@media (max-width:760px){ .sheet,.sheet.wide{ border-radius:22px 22px 0 0; } .sheet-body{ padding:16px 18px 24px; } }
.help-pop{ padding:18px 20px; }
.bgm-pill{ box-shadow:var(--e3); border-color:var(--accent-line); }

/* ───────── 10 · 펼치기 접기 · 오늘의 수학사, 테오 */
.xp-btn{ min-height:var(--h-sm); padding:4px 11px 4px 14px; font-size:13px; font-weight:500; border-color:var(--accent-line); background:color-mix(in srgb, var(--accent) 6%, var(--surface)); }
.xpc-btn{ font-size:13px; }
.xp-lab,.wkd-s .lab,.wkd-r .lab,.th-x .lab{ font-size:12px; }
.bgm-chip{ border-color:var(--accent-line); box-shadow:var(--e1); border-radius:var(--r-pill); padding:7px 16px 7px 8px; }
.bgm-chip small{ font-size:12px; }
.tg-card,.td-pop{ border-radius:var(--r-panel); box-shadow:var(--e3); }
.tg-k,.tg-ql,.td-k{ font-size:12px; }
.td-tab-d{ width:30px; height:36px; gap:1px; border-radius:7px; }
.td-tab-d small{ line-height:1; letter-spacing:0; font-weight:600; }
.td-tab-d b{ font-size:14px; line-height:1; }

/* ───────── 11 · 빈 결과와 불러오는 자리 */
.empty{ margin:12px 0; padding:48px 24px; border:1px dashed var(--line); border-radius:var(--r-card); background:color-mix(in srgb, var(--surface) 55%, transparent); color:var(--ink-3); font-size:14px; line-height:1.7; text-align:center; }
.none{ color:var(--ink-3); }
@keyframes ui-shimmer{ from{ background-position:120% 0; } to{ background-position:-20% 0; } }
:is(#pd-list,#home-sections,#hof,#mp-list,#ch-list,#wk-list,#t-list,#pp,#about-body,#atelier-root,#ph-main,#st-flow,#lvl,#home-today,#home-mp,#home-hall):empty{ min-height:180px; border-radius:var(--r-card);
  background:linear-gradient(100deg, transparent 30%, color-mix(in srgb, var(--ink) 5%, transparent) 50%, transparent 70%) 0 0 / 250% 100%, color-mix(in srgb, var(--surface) 70%, transparent);
  animation:ui-shimmer 1.6s linear infinite; }

/* ───────── 12 · 초점 · 누르는 느낌 */
:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
:is(.btn,.chip,.pchip,.ibtn,.field-in,.xp-btn,.bgm-chip,.gchip):focus-visible{ outline:2px solid var(--accent); outline-offset:2px; box-shadow:0 0 0 6px var(--accent-soft); }
.seg button:focus-visible{ outline:2px solid var(--accent); outline-offset:-2px; }
:is(.chip,.pchip,.gchip,.seg button,.xp-btn,.bgm-chip):active{ transform:translateY(1px); }

/* ───────── 13 · 인물 패널 · 닫혀 있을 때는 키보드 초점이 들어가지 않게 숨긴다 */
.insp{ visibility:hidden; transition:transform .35s var(--ease-out), visibility 0s linear .35s; }
body.insp-open .insp{ visibility:visible; transition:transform .35s var(--ease-out), visibility 0s; }
.insp{ background:var(--raise); border-left:1px solid var(--line-soft); box-shadow:-30px 0 70px -44px rgba(0,0,0,.7); }
.insp-top{ padding:10px 16px; border-bottom-color:var(--line-soft); background:color-mix(in srgb, var(--raise) 92%, var(--accent) 8%); }
.insp-body{ padding:22px 24px 48px; gap:20px; }
.ih h2{ font-weight:600; letter-spacing:-.012em; }
.count-b{ padding:12px 14px; }
.count-b b{ font-size:28px; }
@media (max-width:1179px){ .insp{ border-top:1px solid var(--line-soft); border-radius:20px 20px 0 0; box-shadow:0 -24px 60px -24px rgba(0,0,0,.55); } }

/* ───────── 14 · 바닥글 */
.foot{ margin-top:var(--s-11); font-size:var(--fs-sm); color:var(--ink-3); }
.pager{ gap:14px; margin-bottom:var(--s-9); }
.pager a{ padding:18px 22px; gap:4px; background:var(--surface); }
.pager small{ font-size:12px; letter-spacing:.08em; color:var(--ink-3); }
html:lang(en) .pager small{ text-transform:uppercase; letter-spacing:.14em; }
.pager b{ font-size:19px; font-weight:600; }
.ft{ position:relative; grid-template-columns:minmax(0,1fr) minmax(0,1.75fr); gap:var(--s-9); padding-top:var(--s-9); border-top:1px solid var(--line); }
.ft::before{ content:''; position:absolute; left:0; top:-1px; width:72px; height:1px; background:var(--accent); }
.ft-brand{ gap:10px; }
.ft-logo{ font-size:18px; letter-spacing:.32em; }
.ft-brand > p:not(.ft-note):not(.ft-theo){ font-family:var(--serif-ko); color:var(--ink-2); font-size:15px; margin-top:-2px; }
html:lang(en) .ft-brand > p:not(.ft-note):not(.ft-theo){ font-family:var(--display); font-style:italic; }
.ft-note{ font-size:13px; line-height:1.75; color:var(--ink-3); }
.ft-cite{ margin-top:8px; gap:8px; }
.ft-cite code{ font-size:12px; border-color:var(--line-soft); }
.ft-theo{ margin-top:4px; }
.ft-nav{ gap:28px; }
.ft-h,html:lang(ko) .ft-h{ font-family:var(--mono); font-size:12px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); margin-bottom:14px; }
html:lang(ko) .ft-h{ font-family:var(--sans); letter-spacing:.06em; font-weight:600; }
.ft-col ul{ gap:9px; }
.ft-col a{ font-size:14px; color:var(--ink-2); transition:color var(--dur-2); }
.ft-col a:hover{ color:var(--ink); text-decoration:underline; text-decoration-color:var(--accent-line); }
.ft-col a[aria-current='page']{ color:var(--accent); font-weight:600; }
.ft-bottom{ margin-top:var(--s-8); padding:18px 0 4px; border-top:1px solid var(--line-soft); font-size:12.5px; gap:10px 24px; color:var(--ink-3); }
.ft-src{ gap:6px 18px; }
.ft-src a{ text-decoration:none; }
.ft-src a:hover{ color:var(--ink-2); text-decoration:underline; }
.ft-keys{ font-size:12.5px; min-height:30px; }
@media (max-width:1180px){ .ft{ grid-template-columns:1fr; gap:var(--s-8); } }
@media (max-width:640px){
  .foot{ margin-top:var(--s-10); }
  .ft-nav{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px 20px; }
  .pager a{ padding:14px 16px; }
  .pager b{ font-size:17px; }
  .ft-bottom{ flex-direction:column; align-items:flex-start; }
}

/* ───────── 15 · 휴대폰 도크와 맨 위로 */
/* 페이지 음악 알약 · 휴대폰에서는 제목을 가리지 않게 도크 바로 위 가운데로 */
@media (max-width:760px){
  .bgm-pill{ top:auto; bottom:calc(var(--dock, 0px) + 14px + env(safe-area-inset-bottom, 0px)); transform:translate(-50%, 16px); }
  .bgm-pill.on{ transform:translate(-50%, 0); }
  body.insp-open .bgm-pill,body.sheet-open .bgm-pill,body.menu-open .bgm-pill{ opacity:0; pointer-events:none; }
}
@media (max-width:760px){
  .dock{ border-top:1px solid var(--line-soft); box-shadow:0 -12px 30px -24px rgba(0,0,0,.6); }
  .dock a,.dock button{ font-size:12px; font-weight:500; gap:4px; }
  .dock [aria-current]::before{ width:22px; margin-left:-11px; height:2px; }
}
.totop{ width:44px; height:44px; border-color:var(--line); background:var(--raise); box-shadow:var(--e2); font-size:17px; transition:border-color var(--dur-2), color var(--dur-2), transform var(--dur-2) var(--ease-out); }
.totop:hover{ transform:translateY(-2px); }

/* ───────── 16 · 첫 화면 */
.home .hero{ min-height:min(880px, calc(100svh - var(--hdr) - 12px)); padding:clamp(24px, 5vw, 64px) 0 clamp(36px, 5vw, 64px); grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr); gap:clamp(24px, 4vw, 72px); align-items:center; }
.home .hero-t{ gap:18px; position:relative; }
.page.home{ overflow-x:clip; }
.home .hero-t::before{ content:''; position:absolute; inset:-12% -10% -12% -14%; z-index:-1; pointer-events:none; background:radial-gradient(closest-side, color-mix(in srgb, var(--bg) 82%, transparent) 55%, transparent); }
.home .hero .eyebrow{ display:flex; align-items:center; gap:14px; font-size:16px; }
.home .hero .eyebrow::before{ content:''; width:40px; height:1px; background:currentColor; opacity:.65; }
.home .hero-h{ font-size:var(--fs-hero); font-weight:500; letter-spacing:.12em; line-height:.92; margin:4px 0 6px -.04em; }
.home .hero-s{ display:grid; gap:6px; max-width:34em; margin-top:2px; }
.home .hero-s .hs-l1{ display:block; font-family:var(--serif-ko); font-weight:500; font-size:clamp(20px, .9vw + 13px, 27px); line-height:1.35; letter-spacing:-.012em; color:var(--ink); }
.home .hero-s .hs-l2{ display:block; font-family:var(--sans); font-size:clamp(15px, .35vw + 12px, 17.5px); line-height:1.7; color:var(--ink-2); max-width:30em; }
html:lang(en) .home .hero-s .hs-l1{ font-family:var(--display); font-style:italic; font-weight:500; letter-spacing:0; }
.home .hero-cta{ gap:10px; margin-top:10px; }
.home .hero-n{ display:grid; grid-template-columns:repeat(5,minmax(0,auto)); justify-content:start; gap:0; margin-top:26px; padding-top:22px; border-top:1px solid var(--line); }
.home .hero-n > div{ padding:0 clamp(14px, 2vw, 28px); border-left:1px solid var(--line-soft); }
.home .hero-n > div:first-child{ padding-left:0; border-left:0; }
.home .hero-n dd{ font-size:clamp(28px, 1.4vw + 16px, 38px); font-weight:500; line-height:1.05; font-variant-numeric:lining-nums tabular-nums; }
.home .hero-n dt{ margin-top:4px; font-size:12.5px; letter-spacing:.02em; color:var(--ink-3); white-space:nowrap; }
.home .hero-art{ position:relative; }
.home .hero-art::before{ inset:4% 4% 14% 4%; background:radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--bg) 88%, transparent) 0 56%, transparent 71%); }
.home .hero-art::after{ content:''; position:absolute; left:50%; top:0; width:min(100%, 560px); aspect-ratio:1; transform:translateX(-50%); border-radius:50%; border:1px solid var(--hair); box-shadow:inset 0 0 0 14px color-mix(in srgb, var(--bg) 0%, transparent), 0 0 0 1px transparent; pointer-events:none; }
.home .hero-art figcaption{ font-size:12.5px; line-height:1.7; max-width:44ch; color:var(--ink-3); }

/* 첫 화면의 절 · 번호 눈썹글과 제목, 오른쪽 링크 */
.hsec{ margin-top:clamp(56px, 7vw, 104px); }
.sh{ display:flex; align-items:flex-end; justify-content:space-between; flex-wrap:wrap; gap:10px 24px; margin-bottom:var(--s-6); padding-bottom:var(--s-4); border-bottom:1px solid var(--line-soft); }
.sh-t{ display:grid; gap:6px; min-width:0; }
.sh-k{ display:flex; align-items:center; gap:10px; font-family:var(--mono); font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); }
.sh-k:lang(ko){ font-family:var(--sans); letter-spacing:.08em; font-weight:600; }
.sh-k .n{ font-family:var(--display); font-size:14px; letter-spacing:.08em; font-weight:500; }
.sh h2{ font-family:var(--serif-ko); font-weight:600; font-size:var(--fs-2xl); line-height:1.2; letter-spacing:-.012em; }
.sh p{ color:var(--ink-3); font-size:var(--fs-sm); line-height:1.6; max-width:60ch; }
.sh a{ font-size:var(--fs-sm); font-weight:500; text-decoration:none; white-space:nowrap; }
.sh a:hover{ text-decoration:underline; }

.home .home-hall{ margin:0; padding:clamp(18px, 2.4vw, 30px) clamp(16px, 2.4vw, 30px) clamp(12px, 1.6vw, 20px); border-radius:var(--r-panel); border:1px solid var(--accent-line); background:radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--accent) 9%, var(--surface)), var(--surface) 70%); box-shadow:var(--e2), inset 0 0 0 5px var(--surface), inset 0 0 0 6px color-mix(in srgb, var(--accent) 14%, transparent); }
.home .home-hall .hof-h{ margin:0 0 6px; }
.home .home-hall .hof-h h3{ font-size:var(--fs-lg); }
.home .home-hall .hof-h2{ margin-top:22px; padding-top:20px; border-top:1px solid var(--line-soft); }
.home .medal-strip{ gap:clamp(6px, 1vw, 14px); }
.home .ms-i{ border-radius:var(--r-card); padding:14px 6px 12px; }
.home .ms-i b{ font-size:14.5px; font-weight:600; }
.home .ms-i small{ font-size:12px; }

#home-sections{ display:grid; gap:var(--s-8); }
.home .hs{ margin-top:0; gap:14px; }
.home .hs-h,html:lang(ko) .home .hs-h{ display:flex; align-items:center; gap:14px; font-family:var(--mono); font-size:12px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); }
html:lang(ko) .home .hs-h{ font-family:var(--sans); letter-spacing:.08em; font-weight:600; font-size:13px; }
.home .hs-h::after{ content:''; flex:1; height:1px; background:linear-gradient(90deg, var(--line-soft), transparent); }
.home .hs-g{ gap:12px; grid-template-columns:repeat(auto-fill,minmax(min(240px,100%),1fr)); }
.home .hcard{ padding:18px 20px 16px; gap:8px; min-height:148px; }
.home .hcard b{ font-size:18px; font-weight:600; letter-spacing:-.01em; }
.home .hcard p{ font-size:13.5px; line-height:1.65; color:var(--ink-2); }
.home .hcard .hn{ margin-top:auto; padding-top:10px; border-top:1px solid var(--line-soft); font-size:12px; color:var(--ink-3); }
.home .hcard::before{ content:'→'; position:absolute; right:18px; top:17px; color:var(--accent); opacity:0; transform:translateX(-6px); transition:opacity var(--dur-3), transform var(--dur-3) var(--ease-out); font-family:var(--display); }
.home .hcard:hover::before{ opacity:1; transform:none; }

.home .home-2{ margin:0; gap:16px; grid-template-columns:minmax(0,1fr) minmax(0,1.25fr); }
.home .home-2 .exc{ padding:22px 24px; }
.home .home-2 .exc > h3{ font-size:var(--fs-lg); }
.home #home-hall{ margin-bottom:0; }
.home .foot{ margin-top:clamp(72px, 9vw, 128px); }

@media (max-width:1100px){
  .home .hero{ grid-template-columns:1fr; min-height:0; }
  .home .hero-t::before{ inset:-8% 0 -8% -6%; }
  .home .hero-art{ max-width:520px; }
}
@media (max-width:760px){
  .home .hero{ padding-top:20px; gap:18px; }
  .home .hero-h{ letter-spacing:.08em; }
  .home .hero-cta .btn.lg{ min-height:44px; padding:9px 16px; font-size:14.5px; }
  .home .hero-n{ grid-template-columns:repeat(3,minmax(0,1fr)); row-gap:16px; }
  .home .hero-n > div{ padding:0 12px; }
  .home .hero-n > div:nth-child(3n+1){ padding-left:0; border-left:0; }
  .home .home-2{ grid-template-columns:1fr; }
  .sh{ margin-bottom:var(--s-5); }
  .home .hcard{ min-height:0; }
}

/* ───────── 17 · 여러 페이지 다듬기 */
.page{ padding-top:clamp(28px, 3.4vw, 48px); }
.notice{ border-radius:var(--r-card); border-color:var(--accent-line); padding:14px 18px; }
.threadbar{ border-radius:var(--r-ctl); }
.mapview,.fview,.tl-scroll{ border-color:var(--line-soft); border-radius:var(--r-card); box-shadow:var(--e1); }
.tl-box{ border-radius:var(--r-panel); }
.hof-c{ border-radius:var(--r-panel); box-shadow:var(--e1), inset 0 0 0 1px color-mix(in srgb, var(--accent) 6%, transparent); }
.exc{ border-radius:var(--r-panel); }
.exc h3{ font-weight:600; }
.fsel{ top:var(--hdr); transition:top var(--dur-3) var(--ease-out); }
.ch-jump{ top:var(--hdr); transition:top var(--dur-3) var(--ease-out); }
.hall-idx{ transition:top var(--dur-3) var(--ease-out); }
.era-rib{ transition:top var(--dur-3) var(--ease-out); }
.wera{ font-weight:600; }
.pp-h{ gap:12px; }
.pp-h h1{ font-weight:600; letter-spacing:-.016em; }
.pp-h .lead{ font-size:var(--fs-md); line-height:1.8; color:var(--ink-2); }
.pp-side{ border-color:var(--line-soft); box-shadow:var(--e1); border-radius:var(--r-panel); }
.pp-s > h2{ font-weight:600; font-size:21px; }
.links a{ border-radius:var(--r-sm); border-color:var(--line-soft); min-height:32px; display:inline-flex; align-items:center; }
.ab h2{ font-weight:600; }
.q::before{ font-size:12px; }

/* 인물 사전 · 휴대폰에서는 거르개 줄을 가로로 넘긴다 */
.pd-filters{ gap:8px; margin-bottom:var(--s-4); }
@media (max-width:760px), (max-width:1100px) and (pointer:coarse){
  .pd-filters .chips{ flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; margin-inline:calc(-1 * var(--gutter)); padding:2px var(--gutter); -webkit-mask-image:linear-gradient(90deg, transparent, #000 var(--gutter), #000 calc(100% - var(--gutter)), transparent); mask-image:linear-gradient(90deg, transparent, #000 var(--gutter), #000 calc(100% - var(--gutter)), transparent); }
  .pd-filters .chips::-webkit-scrollbar{ display:none; }
  .pd-filters .chip{ flex:none; }
}

/* ───────── 18 · 손가락 기기 · 누르는 곳은 44px */
@media (pointer:coarse){
  .btn{ min-height:44px; }
  .btn.sm{ min-height:40px; }
  .chip{ min-height:40px; padding:6px 14px; }
  .pchip,.gchip{ min-height:36px; }
  .seg button{ min-height:40px; }
  .ibtn{ min-height:40px; min-width:40px; }
  .field-in{ min-height:44px; }
  .xp-btn{ min-height:40px; }
  .links a{ min-height:40px; }
  .ft-col a{ padding:8px 0; }
  .toggle{ min-height:40px; }
  :is(.hcard,.pdc,.pager a,.pp-nav a,.st-item,.tmini,.lanec,.mp-tile,.pcard,.st-card):hover{ transform:none; }
}

/* 작은 단추는 보이는 크기는 그대로 두고 누르는 자리만 44px 로 넓힌다 */
@media (pointer:coarse){
  :where(.chip,.pchip,.gchip,.xp-btn,.xpc-btn,.seg button,.btn.sm,.era-rb,.at-ib,.tg-more,.tg-think,.bio-btn,.bio-p,.trail .t,.chx,.bt,.ibtn,.rung,.hof-h a,.sh a,.crumbs a,.abl a,.links a,.ft-src a,.ft-keys,.ft-col a,.th-n,.bgm-chip,.res,.menu-g a){ position:relative; }
  :where(.chip,.pchip,.gchip,.xp-btn,.xpc-btn,.seg button,.btn.sm,.era-rb,.at-ib,.tg-more,.tg-think,.bio-btn,.bio-p,.trail .t,.chx,.bt,.ibtn,.rung,.hof-h a,.sh a,.crumbs a,.abl a,.links a,.ft-src a,.ft-keys,.ft-col a)::before{ content:''; position:absolute; left:-2px; right:-2px; top:50%; height:max(100%, 44px); transform:translateY(-50%); }
  #top .brand{ min-height:44px; }
  .rung{ min-height:44px; }
}

/* ───────── 19 · 들어올 때와 스크롤할 때의 움직임 · v_ui.js 와 짝 */
@keyframes ui-rise{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }
@keyframes ui-fade{ from{ opacity:0; } to{ opacity:1; } }
.view{ animation:ui-fade .5s ease both; }
.vh > *,.home .hero-t > *,.pp-h > *:not(.pp-por),.app-h{ animation:ui-rise .7s var(--ease-out) both; }
.vh > :nth-child(2),.home .hero-t > :nth-child(2),.pp-h > :nth-child(2){ animation-delay:.06s; }
.vh > :nth-child(3),.home .hero-t > :nth-child(3),.pp-h > :nth-child(3){ animation-delay:.12s; }
.vh > :nth-child(4),.home .hero-t > :nth-child(4),.pp-h > :nth-child(4){ animation-delay:.18s; }
.vh > :nth-child(n+5),.home .hero-t > :nth-child(n+5),.pp-h > :nth-child(n+5){ animation-delay:.24s; }
.home .hero-art{ animation:ui-fade 1.2s .2s ease both; }
html.ui-rv .ui-rv-t{ opacity:0; transform:translateY(18px); transition:opacity .8s ease, transform .9s var(--ease-out); transition-delay:var(--rv-d, 0s); }
html.ui-rv .ui-rv-t.ui-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .view,.vh > *,.home .hero-t > *,.pp-h > *,.app-h,.home .hero-art{ animation:none !important; }
  html.ui-rv .ui-rv-t{ opacity:1 !important; transform:none !important; transition:none !important; }
  #top{ transition:none; }
  :is(.hcard,.pdc,.pager a,.pp-nav a,.st-item,.tmini,.lanec,.mp-tile,.pcard,.st-card):hover{ transform:none; }
}
/* 인쇄 규칙은 맨 끝 23 절에 모았다 */

/* ───────── 20 · 기능 페이지 안의 절 머리 · 같은 눈썹글과 제목 */
.e2-head,.fs-hd{ gap:8px; }
.e2-head .eyebrow,.fs-hd .eyebrow{ display:flex; align-items:center; gap:12px; }
.e2-head .eyebrow::before,.fs-hd .eyebrow::before{ content:''; flex:none; width:24px; height:1px; background:currentColor; opacity:.65; }
.e2-head h3,.fs-hd h2{ font-size:var(--fs-2xl); font-weight:600; letter-spacing:-.012em; padding-bottom:0; }
.e2-head h3::after{ display:none; }
.e2-head .lede,.fs-hd p:last-child{ font-size:var(--fs-base); line-height:1.75; }
.fs-kpi{ border-color:var(--line-soft); box-shadow:var(--e1); border-radius:var(--r-card); }

/* ───────── 21 · 영어 화면의 제목은 라틴 전시용 글꼴로 */
html:lang(en) :is(.vh h2,.sh h2,.pp-h h1,.app-h h1,.sec-h,.hof-h h3,.e2-head h3,.fs-hd h2,.pager b,.pp-nav b,.hcard b,.st-head h3,.lvl-h h3,.dc-h h3,.fsec h3,.pp-s > h2,.ab h2,.exc > h3,.sheet-t,.ih h2,.fd-t h2,.mp-h h3,.phc h3,.room-text h3,.hh-head h2){ font-family:var(--display); font-weight:600; letter-spacing:-.005em; }
html:lang(en) .vh h2,html:lang(en) .pp-h h1{ font-weight:500; letter-spacing:-.012em; }

/* ───────── 22 · 자잘한 맞춤 */
.ab .stats{ grid-template-columns:repeat(auto-fit,minmax(min(120px,100%),1fr)); }
.hall-switch{ padding:3px; gap:2px; border-color:var(--line); background:var(--sunk); box-shadow:var(--e1); }
.hall-switch a{ padding:7px 16px; font-weight:500; transition:color var(--dur-2), background-color var(--dur-2); }
.hall-switch a:hover{ color:var(--ink); }
.hall-switch a[aria-current]{ background-image:linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,0) 60%); box-shadow:inset 0 1px 0 rgba(255,255,255,.25), 0 6px 16px -10px color-mix(in srgb, var(--accent) 80%, transparent); }
/* 인물 페이지 · 넓은 화면에서는 영향 관계 칸을 붙여 두고 그 안에서 넘긴다 */
@media (min-width:1181px){
  .pp-side{ position:sticky; top:calc(var(--hdr) + 16px); max-height:calc(100vh - var(--hdr) - 32px); overflow:auto; overscroll-behavior:contain; scrollbar-width:thin; transition:top var(--dur-3) var(--ease-out), max-height var(--dur-3) var(--ease-out); }
}


/* ───────── 23 · 탭 줄이 넘칠 때 · 들어가지 못한 탭은 「더 보기」 목록으로 (v_ui.js 와 짝) */
#top .nav.is-prio{ overflow:visible; -webkit-mask-image:none; mask-image:none; }
#top .nav .nav-hid{ display:none !important; }
#top .nav-more{ position:relative; display:flex; align-items:stretch; flex:none; }
#top .nav-more[hidden]{ display:none; }
#top .nav-more-b{ appearance:none; border:0; background:none; cursor:pointer; gap:6px; font:inherit; font-size:inherit; color:var(--ink-2); }
#top .nav-more-b svg{ width:12px; height:12px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; transition:transform var(--dur-3) var(--ease-out); }
#top .nav-more-b[aria-expanded='true']{ color:var(--ink); }
#top .nav-more-b[aria-expanded='true'] svg{ transform:rotate(180deg); }
#top .nav-more-b.has-cur::after{ transform:none; opacity:1; }
#top .nav-more-pop{ position:absolute; right:0; top:calc(100% + 8px); z-index:95; min-width:240px; max-height:min(70vh, 560px); overflow:auto; display:grid; gap:2px; padding:10px; border-radius:var(--r-card); border:1px solid var(--line-soft); background:var(--raise); box-shadow:var(--e3); animation:ui-rise .28s var(--ease-out) both; }
#top .nav-more-pop[hidden]{ display:none; }
#top .nm-g{ margin:8px 10px 4px; font-family:var(--mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); }
#top .nm-g:first-child{ margin-top:2px; }
html:lang(ko) #top .nm-g{ font-family:var(--sans); letter-spacing:.06em; font-weight:600; text-transform:none; }
#top .nm-a{ display:flex; align-items:center; min-height:38px; padding:6px 12px; border-radius:var(--r-ctl); color:var(--ink); text-decoration:none; font-size:14px; white-space:nowrap; transition:background-color var(--dur-2); }
#top .nm-a:hover,#top .nm-a:focus-visible{ background:var(--accent-soft); }
#top .nm-a[aria-current='page']{ color:var(--accent); font-weight:600; box-shadow:inset 3px 0 0 var(--accent); }
@media (pointer:coarse){ #top .nm-a{ min-height:44px; } }

/* ───────── 24 · 휴대폰 머리말 · 검색은 돋보기 단추로 접혀 있다가 누르면 한 줄을 다 쓴다 */
@media (max-width:760px){
  #top .top-in{ position:relative; }
  #top .brand{ margin-right:auto; }
  #top .search{ flex:none; width:var(--h-md); }
  #top .search input{ width:100%; padding:0; color:transparent; cursor:pointer; background:transparent; }
  #top .search input::placeholder{ color:transparent; }
  #top .search .ico{ left:50%; transform:translate(-50%,-50%); width:16px; height:16px; stroke:var(--ink-2); }
  #top .search:focus-within{ position:absolute; z-index:6; left:var(--gutter); right:var(--gutter); top:50%; transform:translateY(-50%); width:auto; }
  #top .search:focus-within input{ padding:0 12px 0 38px; color:var(--ink); cursor:text; background:var(--surface); }
  #top .search:focus-within input::placeholder{ color:var(--ink-3); }
  #top .search:focus-within .ico{ left:13px; transform:translateY(-50%); }
  #top .search .results{ left:0; right:0; width:auto; }
}
@media (max-width:760px) and (pointer:coarse){ #top .search{ width:44px; } }

/* ───────── 25 · 낮은 가로 화면 (휴대폰 가로 · 작은 태블릿) · 머리말을 한층 얇게 */
@media (max-height:520px) and (min-width:761px){
  #top .top-in{ min-height:50px; padding-block:6px; }
  #top .brand-ko{ display:none; }
  #top .brand svg{ width:28px; height:28px; }
  #top .nav{ height:40px; }
  .home .hero{ min-height:0; padding-top:18px; }
  .vh{ margin-top:0; }
}

/* ───────── 26 · 인쇄 · 밝은 종이 위에 본문만 · 접힌 글은 모두 펼치고 카드는 쪽 사이에서 끊지 않는다 */
@media print{
  :root:not(#mathesis-print){
    color-scheme:light;
    --bg:#ffffff; --surface:#ffffff; --surface-2:#faf8f3; --raise:#ffffff; --sunk:#f4f1ea;
    --line:#cfc6b5; --line-soft:#e2dccf; --hair:rgba(40,30,15,.12);
    --ink:#15120d; --ink-2:#3b352c; --ink-3:#5d5548;
    --accent:#7a5712; --accent-2:#8c6618; --accent-3:#5f430d; --accent-ink:#ffffff; --accent-soft:rgba(122,87,18,.08); --accent-line:rgba(122,87,18,.35);
    --up:#1d5fb5; --down:#a3440e; --up-soft:rgba(29,95,181,.08); --down-soft:rgba(163,68,14,.08); --ok:#17774a;
    --glass:#ffffff; --veil:transparent; --shadow:none; --e1:none; --e2:none; --e3:none;
    --f-geo:#8c680d; --f-alg:#bd3b25; --f-ana:#2867bb; --f-nt:#6451cf; --f-top:#0f775e; --f-prob:#9846ad;
    --f-log:#5a6475; --f-comb:#4a7617; --f-app:#a65213; --f-cs:#0f7389; --f-edu:#bb3765;
    --hdr:0px;
  }
  @page{ margin:14mm 12mm 16mm; }
  html,body{ background:#fff !important; color:var(--ink); }
  body{ padding:0 !important; font-size:11pt; line-height:1.55; }
  *,*::before,*::after{ -webkit-print-color-adjust:exact; print-color-adjust:exact; animation:none !important; transition:none !important; }
  /* 화면에서만 쓰는 것 */
  #top,.nav,.dock,.totop,#bg,.skip,.insp,.menu,.keys,.tip,.toast,.help-pop,.results,.snd-pop,.bgm-pill,.bgm-chip,#gate,#hgate,.sheet-wrap,.tg,.td,.td-tab,.td-pop,.progress,#cur-trail,.cur-trail,
  .pager,.ft-nav,.ft-bottom,.ft-theo,.ft-cite .ibtn,.xp-btn,.xpc-btn,.bio-foot,.era-rib,.fsel,.ch-jump,.hall-idx,.g-rail,.nav-more-pop,.hero-cta,#fav-btn,.fav-btn,
  .toolbar input,.toolbar select,.tryit,.howto,.hh-actions,.hall-switch,[data-print='hide']{ display:none !important; }
  #app::before,#page #app::before{ display:none !important; }
  #app,#main,.view{ opacity:1 !important; transform:none !important; }
  body.insp-open #main{ margin-right:0 !important; }
  html.ui-rv .ui-rv-t,.hall.rv-on .room .rv,.hall.rv-on .room .room-art.rv{ opacity:1 !important; transform:none !important; }
  .hx,.room::before{ display:none !important; }
  .room{ padding:14pt 0 !important; }
  .frame{ box-shadow:none !important; transform:none !important; }
  /* 넓이와 높이를 종이에 맞춘다 */
  .page,.page.wide{ max-width:none; padding:0 !important; margin:0; }
  .appview{ height:auto !important; padding:0 !important; }
  .mapview,.fview,.eduview,.tl-scroll{ height:auto !important; max-height:none !important; overflow:visible !important; }
  .const,.st-list,.ladder,.pp-side,.fsel,.ch-jump,.hall-idx,.era-rib,.itabs{ position:static !important; max-height:none !important; overflow:visible !important; }
  /* 글자 · 금빛 그레이디언트 글씨는 잉크색으로 */
  .hero-h,.hh-head h2{ background:none !important; -webkit-background-clip:border-box !important; background-clip:border-box !important; color:var(--ink) !important; }
  a{ color:var(--ink); text-decoration:none; }
  .page a[href^='http']::after{ content:' ↗'; font-size:.8em; color:var(--ink-3); }
  /* 카드와 판 · 그림자 대신 가는 선 */
  .panel,.hcard,.pdc,.hof-c,.mp-tile,.fact,.phc,.tmini,.st-item,.st-card,.unit,.crit,.pcard,.exc,.lanec,.count-b,.stats .st,.fd-stats .st,.fs-kpi,.wkd,.home-hall,.pp-side{ box-shadow:none !important; background:#fff !important; border-color:var(--line) !important; }
  .hof-c,.phc{ background-image:none !important; }
  :is(.hcard,.pdc,.hof-c,.mp-tile,.fact,.phc,.tmini,.st-card,.unit,.crit,.pcard,.lanec,.count-b,.stats .st,.fs-kpi,.rrow,.prow,.throw,.wk,.trow,.bridge,.ppu,.th,.dex li,.ms li,.chl li,.awl li,.bio-ev,figure,canvas,svg,img,table,tr,.cls-list li,.tp,.q){ break-inside:avoid; page-break-inside:avoid; }
  h1,h2,h3,h4,.sec-h,.sh,.hof-h,.wera,.pd-eh,.vh,.fsec-h,.lvl-h,.st-head{ break-after:avoid; page-break-after:avoid; }
  p,li{ orphans:3; widows:3; }
  .sec-h::after,.hs-h::after,.home .hs-h::after{ background:var(--line) !important; }
  /* 접힌 글은 모두 펼친다 */
  .xp-more{ height:auto !important; visibility:visible !important; overflow:visible !important; }
  .xp-in{ opacity:1 !important; transform:none !important; }
  .xpc > .xpc-t{ display:block !important; -webkit-line-clamp:unset !important; line-clamp:unset !important; overflow:visible !important; -webkit-mask-image:none !important; mask-image:none !important; }
  .bio .bio-clip{ height:auto !important; overflow:visible !important; -webkit-mask-image:none !important; mask-image:none !important; }
  .bio[data-open='0'] .bio-rest{ display:list-item !important; }
  .bio-rest{ display:list-item !important; opacity:1 !important; }
  details > :not(summary){ display:block; }
  details::details-content{ content-visibility:visible !important; display:block !important; }
  .trow .tbody{ display:grid !important; }
  /* 첫 화면 · 나선과 표지만 */
  .home .hero{ min-height:0 !important; padding:0 0 12pt !important; grid-template-columns:1fr 0.9fr; }
  .home .hero-t::before,.home .hero-art::before,.home .hero-art::after{ display:none !important; }
  .hsec{ margin-top:18pt; }
  /* 인물 페이지 · 초상은 그대로 */
  .pp-por .por{ filter:none !important; }
  .pp-grid{ grid-template-columns:1fr !important; }
  /* 바닥글 · 이름과 인용 문구만 */
  .foot{ margin-top:18pt !important; }
  .ft{ display:block !important; padding-top:10pt !important; }
  .ft::before{ display:none !important; }
  .ft-cite code{ border:0 !important; padding:0 !important; }
}

/* ───────── 27 · 휴대폰 지도 도구줄 · 한 줄로 두고 옆으로 넘겨서 지도를 넓게 */
@media (max-width:760px){
  #mapbar{ flex-wrap:nowrap; overflow-x:auto; overscroll-behavior-x:contain; scrollbar-width:none; gap:8px; margin-inline:calc(-1 * var(--gutter)); padding:2px var(--gutter) 4px;
    -webkit-mask-image:linear-gradient(90deg, transparent, #000 var(--gutter), #000 calc(100% - var(--gutter)), transparent); mask-image:linear-gradient(90deg, transparent, #000 var(--gutter), #000 calc(100% - var(--gutter)), transparent); }
  #mapbar::-webkit-scrollbar{ display:none; }
  #mapbar > *{ flex:none; }
  #mapbar .grow{ display:none; }
  #mapbar .seg button,#mapbar .toggle,#mapbar .btn{ white-space:nowrap; }
  #mapbar .toggle.lens select{ max-width:180px; }
  #v-map .intro{ gap:4px 12px; }
}
.res{ flex-wrap:wrap; column-gap:10px; row-gap:1px; }
.res b{ flex:none; max-width:100%; }

/* 내레이션 자막 · 입구와 명예의 전당에서 목소리와 함께 */
.narr-sub{ position:fixed; left:50%; bottom:calc(var(--dock, 0px) + 28px + env(safe-area-inset-bottom, 0px)); z-index:1200; transform:translate(-50%, 8px); max-width:min(720px, calc(100vw - 32px)); padding:10px 18px; border-radius:12px; background:rgba(6,7,10,.72); color:#f3ead6; font-family:var(--serif-ko); font-size:clamp(15px, 1.6vw, 19px); line-height:1.55; text-align:center; letter-spacing:.01em; opacity:0; pointer-events:none; transition:opacity .45s ease, transform .45s ease; -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); box-shadow:0 12px 30px -16px rgba(0,0,0,.8); }
.narr-sub.on{ opacity:1; transform:translate(-50%, 0); }
html:lang(en) .narr-sub{ font-family:var(--display); font-style:italic; }
@media (prefers-reduced-motion:reduce){ .narr-sub{ transition:none; } }
@media print{ .narr-sub{ display:none !important; } }
/* 12px 아래로 내려가던 글씨 */
.sx-hm-c{ font-size:12px !important; }
.thv-tx sup,.thv-tx sub{ font-size:max(.75em, 12px) !important; }
/* 낮은 가로 화면에서 테오 얼굴이 첫 화면 글을 가리지 않게 */
@media (max-height:500px) and (orientation:landscape){ .tg-mini{ transform:scale(.8); transform-origin:left bottom; opacity:.85; } #page[data-page='home'] .tg{ display:none; } }

/* QA 8 · 12px 아래로 내려가던 글씨 */
.rung small,.pcard small,.td-kind{ font-size:12px; }
.wm-band b{ font-size:12px !important; }
.hc-no{ font-size:12px !important; }
/* QA 8 · 음악 알약은 테오 카드와 오늘의 창 뒤로 물러나고, 휴대폰에서는 테오와 맨 위로 단추 사이에 들어간다 */
.bgm-pill{ z-index:69; }
@media (max-width:760px){
  .bgm-pill{ white-space:normal; width:max-content; max-width:min(calc(100vw - 150px), 320px); line-height:1.3; text-align:left; }
}
/* QA 8 · 글자 대비 4·5 대 1 미만이던 곳 */
.sx-hm-v.dk{ color:#15110a; }
.sx-hm-v.dk.hi{ color:var(--accent-ink); }
.hd-c.z{ color:var(--ink-3); }
.ff-c small{ color:var(--ink-2); }
.wk-badge,.btn[data-theo-toggle],.btn[data-theo-toggle][aria-pressed='true']{ color:color-mix(in srgb, var(--accent) 82%, var(--ink)); }
/* QA 8 · 손가락으로 누르는 글 줄 단추는 세로 24px 이상 (WCAG 2.5.8) */
@media (pointer:coarse), (max-width:1100px){
  .ft-src a, .crumbs a, .abl a, .sh > a, .hof-h > a, .ms button{ min-height:24px; }
  .ms button{ display:inline-flex; align-items:center; }
  .hd-mo{ min-width:24px; }
}

/* ═════════ 대문 · 깊은 우주에 선 아카데메이아의 문 (장면은 part_bg.js 의 GATE3D, 흐름은 boot.js 의 startGate) */
/* 테마와 상관없이 늘 어두운 영화 화면으로 둔다 · base.css 와 site.css 의 옛 대문 규칙보다 뒤에 온다 */
#gate.gate{
  background:
    radial-gradient(54% 44% at 50% 40%, rgba(98,68,30,.34), rgba(42,29,15,.12) 55%, transparent 78%),
    radial-gradient(38% 34% at 14% 18%, rgba(36,62,104,.24), transparent 72%),
    radial-gradient(42% 38% at 88% 76%, rgba(64,44,104,.17), transparent 72%),
    linear-gradient(180deg, #05070c 0%, #030409 60%, #020306 100%);
  perspective:none; color:#efe6d2; outline:none; transition:opacity 1.1s ease; -webkit-tap-highlight-color:transparent; overscroll-behavior:contain; touch-action:manipulation;
}
#gate.gate.is-open{ opacity:0; pointer-events:none; }
/* 대문이 화면을 다 덮는 동안에는 아래의 사이트를 그리지 않는다 · 드러나는 순간(pre-enter 가 풀릴 때) 다시 보인다 */
body.pre-enter #app, body.pre-enter #bg{ visibility:hidden; }
/* 카메라가 앞으로 날아 들어가듯 사이트가 살짝 작은 데서 제 크기로 다가온다 (옛 확대는 가로 넘침을 만들었다) */
body.pre-enter #app{ transform:scale(.985); }
#gate .gt-cv, #gate .gt-glow{ position:absolute; inset:0; width:100%; height:100%; display:block; opacity:0; transition:opacity 2.2s ease; }
#gate.is-live .gt-cv, #gate.is-live .gt-glow{ opacity:1; }
#gate .gt-shade{ position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(125% 95% at 50% 44%, transparent 56%, rgba(0,0,0,.6) 100%), linear-gradient(to top, rgba(2,3,6,.93) 0%, rgba(2,3,6,.68) 19%, rgba(2,3,6,0) 42%), linear-gradient(to bottom, rgba(2,3,6,.78) 0%, rgba(2,3,6,.4) 8%, rgba(2,3,6,0) 15%); }

/* 위 · 이름과 글귀의 뜻 */
#gate .gt-top{ text-shadow:0 1px 10px rgba(0,0,0,.95), 0 0 3px rgba(0,0,0,.8); position:absolute; top:calc(env(safe-area-inset-top, 0px) + clamp(14px, 2.8vh, 28px)); left:16px; right:16px; text-align:center; pointer-events:none; opacity:0; transition:opacity 2s ease .5s, transform .9s ease; }
#gate.is-live .gt-top{ opacity:1; }
#gate .gt-brand{ font-family:var(--display); font-size:12px; letter-spacing:.66em; padding-left:.66em; color:#caa35a; }
#gate .gt-cap{ margin:7px auto 0; max-width:640px; font-family:var(--serif-ko); font-size:12.5px; line-height:1.55; color:#85795f; display:flex; flex-wrap:wrap; justify-content:center; column-gap:.7em; }
#gate .gt-cap-q{ color:#b3a17b; }
html:lang(en) #gate .gt-cap{ font-family:var(--display); font-style:italic; font-size:13.5px; }

/* 언어 · 처음에는 오른쪽 위에, 선택지가 뜨면 그 아래에 */
#gate .gt-lang{ display:inline-flex; border:1px solid rgba(214,179,106,.34); border-radius:999px; overflow:hidden; background:rgba(8,9,12,.45); }
#gate .gt-lang button{ appearance:none; border:0; background:none; color:#a4967a; font:500 12px/1 var(--sans); letter-spacing:.14em; padding:0 13px; min-height:32px; cursor:pointer; transition:background .25s, color .25s; }
#gate .gt-lang button + button{ border-left:1px solid rgba(214,179,106,.22); }
#gate .gt-lang button[aria-pressed='true']{ background:rgba(214,179,106,.22); color:#f8ebc8; }
#gate .gt-lang button:hover{ color:#f3e3bb; }
#gate .gt-lang-top{ position:absolute; top:calc(env(safe-area-inset-top, 0px) + 12px); right:calc(env(safe-area-inset-right, 0px) + 14px); opacity:0; transition:opacity 1.4s ease 1s, visibility 0s; }
#gate.is-live .gt-lang-top{ opacity:1; }
#gate[data-stage='ask'] .gt-lang-top, #gate[data-stage='enter'] .gt-lang-top{ opacity:0; visibility:hidden; transition:opacity .5s ease, visibility 0s .5s; }

/* 아래 · 시작 안내, 내레이션의 말, 선택지 */
#gate .gt-ui{ position:absolute; left:0; right:0; bottom:calc(env(safe-area-inset-bottom, 0px) + clamp(18px, 4.6vh, 50px)); padding:0 16px; display:flex; flex-direction:column; align-items:center; text-align:center; gap:clamp(14px, 2.4vh, 24px); pointer-events:none; transition:opacity .6s ease, transform .9s ease; }
#gate .gt-ui button{ pointer-events:auto; }
#gate .gt-stack{ display:grid; justify-items:center; align-items:end; width:100%; }
#gate .gt-stack > *{ grid-area:1 / 1; }
#gate .gt-start{ appearance:none; background:none; border:0; color:inherit; display:grid; justify-items:center; gap:10px; padding:10px 22px 12px; border-radius:8px; cursor:pointer; opacity:0; transform:translateY(12px); transition:opacity .7s ease, transform .9s cubic-bezier(.2,.7,.2,1), visibility 0s .7s; visibility:hidden; }
#gate.is-live[data-stage='idle'] .gt-start{ opacity:1; transform:none; visibility:visible; transition:opacity 1.4s ease 1.3s, transform 1.6s cubic-bezier(.2,.7,.2,1) 1.3s, visibility 0s; }
#gate .gt-start::before{ content:''; width:40px; height:40px; border-radius:50%; border:1px solid rgba(230,194,120,.75); background:radial-gradient(circle, rgba(255,238,200,.95) 0 2.5px, rgba(240,200,120,.25) 3.5px, transparent 7px); animation:gtPulse 2.6s ease-out 2.6s infinite; }
#gate .gt-start-t{ font-family:var(--serif-ko); font-weight:500; font-size:clamp(17px, 2vw, 21px); letter-spacing:.26em; padding-left:.26em; color:#f3e6c6; text-shadow:0 0 22px rgba(240,200,120,.4); animation:gtBreath 3.4s ease-in-out 3s infinite; }
#gate .gt-start-s{ display:inline-flex; align-items:center; gap:8px; font-size:12.5px; letter-spacing:.03em; color:#8c8166; }
#gate .gt-start-s::before{ content:'♪'; color:#caa35a; font-size:13px; }
html:lang(en) #gate .gt-start-t{ font-family:var(--display); font-style:italic; letter-spacing:.2em; padding-left:.2em; }
#gate .gt-words{ display:grid; justify-items:center; align-items:center; max-width:min(100%, 900px); pointer-events:none; }
#gate .gt-words > *{ grid-area:1 / 1; }
#gate .gt-pre{ font-family:var(--serif-ko); font-size:clamp(17px, 2vw, 25px); line-height:1.45; letter-spacing:.04em; color:#e2d3b0; text-shadow:0 0 26px rgba(240,196,110,.25), 0 2px 14px rgba(0,0,0,.6); word-break:keep-all; opacity:0; transform:translateY(10px); filter:blur(6px); transition:opacity 1.5s ease, transform 1.5s cubic-bezier(.2,.7,.2,1), filter 1.5s ease, color 1.2s ease; }
#gate .gt-q{ margin:0; font-family:var(--serif-ko); font-weight:600; font-size:clamp(25px, 3.4vw, 46px); line-height:1.3; letter-spacing:.01em; color:#f7edd6; word-break:keep-all; text-wrap:balance; text-shadow:0 0 36px rgba(240,196,110,.3), 0 2px 18px rgba(0,0,0,.65); opacity:0; transform:translateY(14px) scale(.985); filter:blur(8px); transition:opacity 1.7s ease, transform 1.8s cubic-bezier(.2,.7,.2,1), filter 1.6s ease; }
html:lang(en) #gate .gt-pre{ font-family:var(--display); font-style:italic; font-size:clamp(18px, 2.1vw, 27px); }
html:lang(en) #gate .gt-q{ font-family:var(--display); font-weight:500; letter-spacing:0; }
#gate .gt-pre.on, #gate .gt-q.on{ opacity:1; transform:none; filter:none; }
#gate .gt-pre:not(.on){ transition-duration:.9s; }

/* 선택지 · 질문이 끝나면 금빛 선이 펼쳐지고 단추가 차례로 떠오른다 */
#gate .gt-choices{ position:relative; display:flex; align-items:center; justify-content:center; gap:14px 30px; padding-top:clamp(16px, 2.2vh, 22px); visibility:hidden; }
#gate .gt-choices .gt-quiet{ order:-1; min-width:9em; text-align:right; }
#gate .gt-choices .gt-lang{ min-width:9em; justify-content:flex-start; border:0; background:none; }
#gate .gt-choices .gt-lang button{ border:1px solid rgba(214,179,106,.34); }
#gate .gt-choices .gt-lang button:first-child{ border-radius:999px 0 0 999px; }
#gate .gt-choices .gt-lang button:last-child{ border-radius:0 999px 999px 0; border-left:0; }
#gate .gt-choices::before{ content:''; position:absolute; top:0; left:50%; width:min(340px, 72vw); height:1px; transform:translateX(-50%) scaleX(0); background:linear-gradient(90deg, rgba(226,190,116,0), rgba(236,202,130,.9), rgba(226,190,116,0)); transition:transform 1.3s cubic-bezier(.2,.7,.2,1); }
#gate .gt-choices > *{ opacity:0; transform:translateY(18px); filter:blur(5px); transition:opacity .9s ease, transform 1.1s cubic-bezier(.2,.8,.2,1), filter .9s ease; }
#gate[data-stage='ask'] .gt-choices, #gate[data-stage='enter'] .gt-choices{ visibility:visible; }
#gate[data-stage='ask'] .gt-choices::before, #gate[data-stage='enter'] .gt-choices::before{ transform:translateX(-50%) scaleX(1); }
#gate[data-stage='ask'] .gt-choices > *, #gate[data-stage='enter'] .gt-choices > *{ opacity:1; transform:none; filter:none; }
#gate[data-stage='ask'] .gt-choices > :nth-child(1){ transition-delay:.16s; }
#gate[data-stage='ask'] .gt-choices > :nth-child(n+2){ transition-delay:.44s; }
#gate .gt-enter{ position:relative; overflow:hidden; appearance:none; cursor:pointer; min-width:min(270px, 78vw); min-height:52px; padding:0 46px; border-radius:3px; border:1px solid rgba(234,200,126,.85);
  background:linear-gradient(180deg, rgba(214,179,106,.26), rgba(214,179,106,.07)); color:#fdf3da; font-family:var(--serif-ko); font-weight:600; font-size:clamp(17px, 1.6vw, 19px); letter-spacing:.34em; text-indent:.34em;
  box-shadow:0 0 0 4px rgba(214,179,106,.07), 0 18px 54px -18px rgba(240,190,100,.6), inset 0 1px 0 rgba(255,240,210,.28); text-shadow:0 0 16px rgba(255,220,150,.45); transition:background .3s ease, box-shadow .3s ease, border-color .3s ease; }
#gate .gt-enter::after{ content:''; position:absolute; inset:-1px; pointer-events:none; background:linear-gradient(105deg, transparent 36%, rgba(255,244,220,.3) 50%, transparent 64%); transform:translateX(-130%); animation:gtSheen 5s ease-in-out 1.8s infinite; }
#gate .gt-enter:hover, #gate .gt-enter:focus-visible{ border-color:#f4d692; background:linear-gradient(180deg, rgba(214,179,106,.4), rgba(214,179,106,.12)); box-shadow:0 0 0 5px rgba(214,179,106,.13), 0 22px 64px -16px rgba(240,190,100,.8), inset 0 1px 0 rgba(255,240,210,.38); }
html:lang(en) #gate .gt-enter{ font-family:var(--display); font-weight:500; font-size:clamp(18px, 1.7vw, 20px); letter-spacing:.36em; text-indent:.36em; }
#gate .gt-quiet{ appearance:none; background:none; border:0; min-height:36px; padding:0 4px; color:#a09379; font-size:13.5px; letter-spacing:.02em; text-decoration:underline; text-decoration-color:rgba(214,179,106,.4); text-underline-offset:4px; cursor:pointer; transition:color .25s; }
#gate .gt-quiet:hover{ color:#eadab4; }
#gate button:focus-visible{ outline:1px solid #f1d99c; outline-offset:3px; }
#gate .gt-start:focus-visible{ outline:0; }
#gate .gt-start:focus-visible::before{ border-color:#fff0c8; box-shadow:0 0 0 4px rgba(240,204,130,.22), 0 0 26px rgba(240,204,130,.5); }
#gate .gt-start:focus-visible .gt-start-t{ color:#fff6de; }
#gate .gt-enter:focus-visible{ outline-offset:6px; }

/* 입장 · 글과 단추는 물러나고 장면만 남는다 */
#gate[data-stage='enter'] .gt-ui, #gate[data-stage='enter'] .gt-top{ opacity:0; transform:translateY(14px); transition:opacity .55s ease, transform .9s ease; }
#gate .gt-shade{ transition:opacity 1s ease; }
#gate[data-stage='enter'] .gt-shade{ opacity:0; transition-delay:1.2s; }

/* 캔버스를 쓸 수 없을 때 */
#gate.no-cv .gt-cv, #gate.no-cv .gt-glow{ display:none; }

/* 휴대폰과 태블릿 */
@media (pointer:coarse){
  #gate .gt-lang button{ min-height:40px; padding:0 15px; }
  #gate .gt-quiet{ min-height:44px; }
}
@media (max-width:640px){
  #gate .gt-choices{ display:grid; grid-template-columns:auto auto; grid-template-areas:'e e' 'q l'; justify-content:center; gap:12px 18px; }
  #gate .gt-choices .gt-enter{ grid-area:e; justify-self:center; }
  #gate .gt-choices .gt-quiet{ grid-area:q; min-width:0; text-align:center; }
  #gate .gt-choices .gt-lang{ grid-area:l; min-width:0; }
}
@media (max-width:520px){
  #gate .gt-top{ left:74px; right:74px; }
  #gate .gt-brand{ font-size:11px; letter-spacing:.5em; padding-left:.5em; }
  #gate .gt-cap{ font-size:11.5px; column-gap:.4em; }
  html:lang(en) #gate .gt-cap{ font-size:12.5px; }
  #gate .gt-cap-s{ display:none; }
  #gate .gt-enter{ min-height:54px; }
}
@media (max-height:520px) and (orientation:landscape){
  #gate .gt-top{ top:calc(env(safe-area-inset-top, 0px) + 10px); }
  #gate .gt-cap{ display:none; }
  #gate .gt-ui{ bottom:calc(env(safe-area-inset-bottom, 0px) + 10px); gap:8px; }
  #gate .gt-q{ font-size:clamp(19px, 3vw, 26px); }
  #gate .gt-pre{ font-size:13.5px; }
  #gate .gt-words{ gap:4px; }
  #gate .gt-start{ gap:6px; padding:6px 18px 8px; }
  #gate .gt-start::before{ display:none; }
  #gate .gt-choices{ display:flex; gap:18px; padding-top:10px; }
  #gate .gt-choices .gt-quiet, #gate .gt-choices .gt-lang{ min-width:0; }
  #gate .gt-enter{ min-width:0; min-height:44px; padding:0 30px; }
}

/* 움직임을 줄인 환경 · 장면은 멈춘 한 장면으로, 입장은 부드러운 겹침 전환으로 */
@media (prefers-reduced-motion:reduce){
  #gate.gate{ transition:opacity .9s ease !important; }
  #gate .gt-cv, #gate .gt-glow{ transition:opacity 1s ease !important; }
  #gate .gt-top, #gate .gt-lang-top, #gate .gt-ui, #gate .gt-start, #gate .gt-pre, #gate .gt-q, #gate .gt-choices > *{ transform:none !important; filter:none !important; transition:opacity .6s ease !important; }
  #gate:not([data-stage='idle']) .gt-start{ transition:opacity .6s ease, visibility 0s linear .6s !important; }
  #gate .gt-start::before, #gate .gt-start-t, #gate .gt-enter::after{ animation:none !important; }
  #gate .gt-choices::before{ transform:translateX(-50%) scaleX(1) !important; transition:none !important; }
}

@keyframes gtBreath{ 0%, 100%{ opacity:1; } 50%{ opacity:.58; } }
@keyframes gtPulse{ 0%{ box-shadow:0 0 0 0 rgba(230,194,120,.5); } 70%, 100%{ box-shadow:0 0 0 18px rgba(230,194,120,0); } }
@keyframes gtSheen{ 0%{ transform:translateX(-130%); } 42%, 100%{ transform:translateX(130%); } }
@media print{ #gate{ display:none !important; } }