:root{
  --bg:#08080a; --card:#121216; --card2:#0f0f12;
  --ink:#f2f0ec; --ink2:#c9c7c2; --muted:#86868c; --line:rgba(255,255,255,.09);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);
  font-family:'Inter','Pretendard',system-ui,sans-serif;
  line-height:1.65;-webkit-font-smoothing:antialiased;letter-spacing:-0.01em;overflow-x:hidden;
  word-break:keep-all;overflow-wrap:break-word} /* 27차: 한글은 낱말 단위로 줄바꿈('월스트리트/를' 방지), 긴 주소만 예외로 끊는다 */
a{color:inherit;text-decoration:none}
.wrap{max-width:1180px;margin:0 auto;padding:0 32px}
.muted{color:var(--muted)}

/* nav */
nav{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;
  justify-content:space-between;padding:18px 36px;
  background:rgba(8,8,10,.62);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
nav .brand{font-weight:600;letter-spacing:.04em;font-size:15px;display:inline-flex;align-items:center;gap:9px}
nav .brand .bmark{display:block}
nav .links{display:flex;gap:24px;align-items:center}
nav .links a{font-size:14px;color:var(--ink2);transition:.2s}
nav .links a:hover{color:var(--ink)}
.nav-cta{font-size:13.5px;font-weight:500;background:var(--ink);color:#0a0a0a !important;
  padding:9px 18px;border-radius:7px;transition:.2s}
.nav-cta:hover{opacity:.85}

.btn{display:inline-block;padding:14px 26px;border-radius:8px;font-size:14.5px;font-weight:500;
  transition:.2s;cursor:pointer;border:1px solid transparent;font-family:inherit}
.btn-primary{background:var(--ink);color:#0a0a0a}
.btn-primary:hover{opacity:.86}
.btn-ghost{border-color:rgba(255,255,255,.22);color:var(--ink);background:transparent}
.btn-ghost:hover{background:rgba(255,255,255,.06)}

.eyebrow{font-size:13px;font-weight:600;color:var(--muted);letter-spacing:.06em;margin-bottom:14px}
.crumb{font-size:13.5px;color:var(--muted);margin-bottom:22px}
.crumb a{display:inline-flex;align-items:center;min-height:44px;min-width:44px}  /* 27차: 경로 링크 16px → 44px */
.crumb a:hover{color:var(--ink)}

footer{border-top:1px solid var(--line);padding:42px 0;color:var(--muted);font-size:13px;margin-top:40px}
footer .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px}
.wordmark{font-weight:600;letter-spacing:.14em;color:var(--ink2)}

/* ===== giant detail ===== */
.ghero{display:grid;grid-template-columns:340px 1fr;gap:48px;padding:140px 0 70px;align-items:center}
.ghero .photo{aspect-ratio:3/4;border-radius:16px;overflow:hidden;border:1px solid var(--line)}
.ghero .photo img{width:100%;height:100%;object-fit:cover;object-position:center top;
  filter:grayscale(100%) contrast(1.05) brightness(.92)}
.ghero .en{font-size:12.5px;font-weight:600;letter-spacing:.18em;color:var(--muted)}
.ghero h1{font-size:clamp(36px,5vw,60px);font-weight:600;letter-spacing:-0.035em;line-height:1.04;margin:10px 0 8px}
.ghero .desc{font-size:18px;color:var(--ink2)}
.ghero .tagline{color:var(--muted);margin-top:16px;font-size:16px;max-width:520px}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:24px}
.chip{font-size:13px;color:var(--ink2);border:1px solid var(--line);padding:8px 14px;border-radius:30px;background:var(--card)}
.ghero .cta{margin-top:30px;display:flex;gap:12px;flex-wrap:wrap}
@media(max-width:760px){.ghero{grid-template-columns:1fr;gap:28px;padding:120px 0 50px}.ghero .photo{max-width:280px}}

.sec-title{font-size:13px;font-weight:600;color:var(--muted);letter-spacing:.06em;
  text-transform:uppercase;margin:60px 0 22px}
.eplist{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.eprow{display:grid;grid-template-columns:54px 1fr auto;gap:20px;align-items:center;
  padding:22px 10px;border-bottom:1px solid var(--line);transition:.2s}
.eprow:hover{background:var(--card);padding-left:18px;padding-right:18px}
.eprow .no{font-size:14px;color:var(--muted);font-weight:500}
.eprow .t{font-size:17px;font-weight:600;letter-spacing:-0.02em}
.eprow .t small{display:block;font-size:13px;font-weight:400;color:var(--muted);margin-top:3px}
.eprow .era{font-size:13px;color:var(--muted)}

/* pulse box on giant page — live feel */
.pl-head{display:flex;align-items:center;justify-content:space-between;font-size:13px;font-weight:600;
  color:var(--muted);letter-spacing:.06em;text-transform:uppercase;margin:60px 0 18px}
.live{display:inline-flex;align-items:center;gap:7px;font-size:11px;font-weight:700;letter-spacing:.14em;color:#5fd08a}
.live .dot{width:8px;height:8px;border-radius:50%;background:#5fd08a;
  box-shadow:0 0 0 0 rgba(95,208,138,.6);animation:livep 1.6s infinite}
@keyframes livep{0%{box-shadow:0 0 0 0 rgba(95,208,138,.55)}70%{box-shadow:0 0 0 9px rgba(95,208,138,0)}100%{box-shadow:0 0 0 0 rgba(95,208,138,0)}}
.pulse{border:1px solid var(--line);border-radius:14px;background:var(--card);padding:28px 28px;position:relative;overflow:hidden}
.pulse:before{content:"";position:absolute;left:0;top:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,rgba(95,208,138,.7),transparent);
  background-size:200% 100%;animation:scan 2.6s linear infinite}
.pulse .pl-sum{color:var(--ink2);font-size:15.5px;line-height:1.85}
.pl-ticker{height:44px;overflow:hidden;margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.pl-track{transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.pl-row{height:44px;display:flex;align-items:center;justify-content:space-between;gap:14px;
  color:var(--ink2);font-size:14px;transition:.2s}
.pl-row:hover{color:var(--ink)}
.pl-row .pl-t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pl-row .pl-s{flex:0 0 auto;color:var(--muted);font-size:12px}
.pl-foot{margin-top:14px;font-size:12px;color:var(--muted);display:flex;align-items:center;gap:9px}
.pl-foot .scan{width:42px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,transparent,#5fd08a,transparent);background-size:200% 100%;animation:scan 2.2s linear infinite}
@keyframes scan{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* ===== story ===== */
.story{max-width:680px;margin:0 auto;padding:130px 0 40px}
.story h1{font-size:clamp(30px,4.4vw,46px);font-weight:600;letter-spacing:-0.03em;line-height:1.22}
.story .era{color:var(--muted);font-size:14px;margin-top:12px;letter-spacing:.02em}
.story .sec{margin-top:44px}
.story h3{display:flex;align-items:center;gap:10px;font-size:13px;font-weight:600;color:var(--ink);
  letter-spacing:.12em;text-transform:uppercase;margin:0 0 16px}
.story h3:before{content:"";width:22px;height:1px;background:rgba(255,255,255,.45)}
.story p{font-size:18px;color:#dedbd4;line-height:1.9;margin-bottom:18px}
.story p:last-child{margin-bottom:0}
.story .facts{list-style:none;display:grid;gap:13px;margin:2px 0 0;
  background:var(--card);border:1px solid var(--line);border-radius:12px;padding:24px 26px}
.story .facts li{position:relative;padding-left:20px;color:var(--ink2);font-size:15.5px;line-height:1.6}
.story .facts li:before{content:"";position:absolute;left:2px;top:9px;width:6px;height:6px;
  border-radius:50%;background:rgba(255,255,255,.5)}
.story .lesson{border-left:3px solid rgba(255,255,255,.55);padding:10px 0 10px 22px;
  font-size:19px;line-height:1.7;color:var(--ink);font-weight:500}
.story .src{color:var(--muted);font-size:13.5px;margin-top:34px;padding-top:18px;border-top:1px solid var(--line)}
.story-nav{display:flex;justify-content:space-between;gap:12px;margin-top:46px;
  padding-top:26px;border-top:1px solid var(--line);flex-wrap:wrap}

/* ===== advisor ===== */
.adv{padding:120px 0 40px;max-width:900px;margin:0 auto}
.adv h1{font-size:clamp(28px,4vw,40px);font-weight:600;letter-spacing:-0.03em;text-align:center}
.adv .sub{color:var(--muted);text-align:center;margin:12px 0 30px}
.picker{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-bottom:26px}
.pick{display:flex;align-items:center;gap:9px;border:1px solid var(--line);border-radius:30px;
  padding:6px 14px 6px 6px;cursor:pointer;background:var(--card);transition:.2s;font-size:13.5px;color:var(--ink2)}
.pick img{width:28px;height:28px;border-radius:50%;object-fit:cover;object-position:center top;filter:grayscale(100%)}
.pick.active{border-color:rgba(255,255,255,.55);color:var(--ink);background:#1a1a20}
.pick.active img{filter:none}
.pick.council{padding-left:14px}
.chatbox{border:1px solid var(--line);border-radius:16px;background:var(--card2);overflow:hidden}
.messages{padding:24px;min-height:280px;max-height:520px;overflow-y:auto;display:flex;flex-direction:column;gap:16px}
.msg{max-width:88%;padding:16px 18px;border-radius:14px;font-size:15px;line-height:1.62;white-space:pre-wrap}
.msg.user{align-self:flex-end;background:#23232a;color:var(--ink)}
.msg.bot{align-self:flex-start;background:var(--card);border:1px solid var(--line);color:var(--ink2)}
.msg.bot .who{font-size:12.5px;font-weight:600;color:var(--ink);letter-spacing:.02em;margin-bottom:8px;display:flex;align-items:center;gap:8px}
.msg.bot .who img{width:22px;height:22px;border-radius:50%;object-fit:cover;object-position:center top}
.msg.bot .syn{margin-top:14px;padding-top:12px;border-top:1px solid var(--line);color:var(--ink)}
.msg.bot b.h{display:block;color:var(--ink);margin:10px 0 2px;font-size:15.5px}
.msg.bot hr{border:none;border-top:1px solid var(--line);margin:12px 0}
.msg.bot b{color:var(--ink)}
.composer{display:flex;align-items:flex-end;gap:10px;padding:16px;border-top:1px solid var(--line);background:var(--card)}
.composer input,.composer textarea{flex:1;resize:none;line-height:1.55;overflow:hidden;box-sizing:border-box;min-height:52px;background:var(--bg);border:1px solid var(--line);color:var(--ink);
  padding:14px 16px;border-radius:9px;font-size:15px;font-family:inherit}
.composer input:focus,.composer textarea:focus{outline:2px solid #6DFBC7;outline-offset:2px;border-color:rgba(255,255,255,.4)}
.demohint{text-align:center;color:var(--muted);font-size:12.5px;margin-top:16px}
.gate{max-width:430px;margin:20px auto 0;text-align:center;border:1px solid var(--line);
  border-radius:16px;padding:40px 30px;background:var(--card)}
.gate .gatemsg{color:var(--ink2);font-size:15px;line-height:1.6;margin-bottom:20px}
.gateform{display:flex;gap:10px}
.gateform input{flex:1;background:var(--bg);border:1px solid var(--line);color:var(--ink);
  padding:13px 15px;border-radius:9px;font-size:15px;font-family:inherit;text-align:center}
.gateform input:focus{outline:2px solid #6DFBC7;outline-offset:2px;border-color:rgba(255,255,255,.4)}
.gateerr{color:#e8918c;font-size:13.5px;margin-top:13px;min-height:18px}

.reveal{opacity:0;transform:translateY(16px);transition:.7s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}

/* 자문 답변 — 근거 카드·체험 안내 */
.cites{margin-top:14px;padding-top:12px;border-top:1px solid var(--line);display:grid;gap:8px}
.cites-h{font-size:12.5px;font-weight:600;color:var(--muted);letter-spacing:.04em}
.cite{display:grid;grid-template-columns:auto 1fr;gap:2px 10px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--card2);transition:.2s}
.cite:hover{border-color:rgba(255,255,255,.25)}
.cite-no{grid-row:span 2;font-size:12px;font-weight:700;color:var(--ink2);align-self:center}
.cite-t{font-size:13.5px;font-weight:600;color:var(--ink)}
.cite-l{font-size:13px;color:var(--ink2)}
.trial-note{font-size:12.5px;color:var(--muted);margin:6px 0 14px 4px}
.trial-note a{text-decoration:underline;color:var(--ink2)}
.demohint a{text-decoration:underline}

/* 100인의 장면 도서관 */
.lib{padding-block:120px 40px}
.lib h1{font-size:clamp(28px,4vw,40px);font-weight:700;letter-spacing:-.02em}
.lib .sub{color:var(--ink2);margin:10px 0 22px;max-width:640px}
.lib-search{width:100%;max-width:420px;padding:12px 14px;border-radius:10px;border:1px solid var(--line);background:var(--card);color:var(--ink);font-size:15px;margin-bottom:24px}
.lib-list{display:grid;gap:12px}
.scene{border:1px solid var(--line);border-radius:14px;background:var(--card);padding:18px 20px;scroll-margin-top:90px}
.scene:target{border-color:rgba(255,255,255,.4)}
.scene summary{list-style:none;cursor:pointer;display:grid;gap:4px}
.scene summary::-webkit-details-marker{display:none}
.scene .meta{font-size:12.5px;color:var(--muted);font-weight:600}
.scene .ttl{font-size:17px;font-weight:600}
.scene .les{font-size:14.5px;color:var(--ink2)}
.scene .body{margin-top:14px;color:var(--ink2);font-size:15px;line-height:1.75;white-space:pre-line}
.scene .src{margin-top:12px;font-size:12.5px;color:var(--muted);display:grid;gap:4px;word-break:break-all}
.scene .src a{text-decoration:underline}
.scene .more{font-size:12.5px;color:var(--muted)}
.scene[open] .more{display:none}
.msg .q{display:block;border-left:2px solid rgba(255,255,255,.3);padding-left:10px;color:var(--ink)}
@media(max-width:640px){
  nav{gap:12px}
  nav .brand{font-size:13px;flex-shrink:0}
  nav .links{gap:14px;min-width:0;overflow-x:auto;scrollbar-width:none}
  nav .links::-webkit-scrollbar{display:none}
  nav .links a{white-space:nowrap;font-size:13px;flex-shrink:0}
}

/* ── 근엄한 모션 (motion.js) — 긴 감속, 튕김 없음 ── */
.rv{opacity:0;transform:translateY(26px);filter:blur(5px);
  transition:opacity 1.3s cubic-bezier(.16,1,.3,1) var(--d,0s),transform 1.6s cubic-bezier(.16,1,.3,1) var(--d,0s),filter 1.3s ease var(--d,0s)}
.rv.in{opacity:1;transform:none;filter:none}
.rv .fill{transform:scaleX(0);transform-origin:left;transition:transform 1.9s cubic-bezier(.16,1,.3,1) calc(var(--d,0s) + .35s)}
.rv.in .fill{transform:scaleX(1)}
.settle{overflow:hidden}
.settle img,.settle svg{transform:scale(1.14);transition:transform 3.2s cubic-bezier(.16,1,.3,1) var(--d,0s)}
.settle.in img,.settle.in svg{transform:scale(1.06)}
.sheen{position:relative;overflow:hidden}
.sheen::before{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;
  background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.16) 50%,transparent 60%);background-size:260% 100%;background-position:130% 0;
  animation:sheen 7.5s cubic-bezier(.45,0,.2,1) 2.2s infinite}
@keyframes sheen{0%{background-position:130% 0}28%,100%{background-position:-130% 0}}
.rule{height:1px;background:linear-gradient(90deg,transparent,rgba(109,251,199,.55),transparent);transform:scaleX(0);transition:transform 2.2s cubic-bezier(.16,1,.3,1) var(--d,0s)}
.rule.in{transform:scaleX(1)}
.engrave{letter-spacing:.06em;transition:letter-spacing 2.4s cubic-bezier(.16,1,.3,1) var(--d,0s),opacity 1.6s ease var(--d,0s),filter 1.6s ease var(--d,0s)}
.engrave.rv{transform:none}
.engrave.in{letter-spacing:-.03em}
@media (prefers-reduced-motion: reduce){
  .rv,.settle img,.settle svg,.rule,.engrave{transition:none!important;opacity:1;transform:none;filter:none}
  .rv .fill{transition:none;transform:none} .rule{transform:scaleX(1)} .sheen::before{animation:none}
}
@media (max-width:640px){.eprow{grid-template-columns:44px 1fr;gap:6px 14px}.eprow .era{grid-column:2}}

/* ── 27차 공통 (2026-09-30): 초점 테두리 · 화면 움직임 줄이기 ── */
a:focus-visible,button:focus-visible,summary:focus-visible,[role="button"]:focus-visible{outline:2px solid #6DFBC7;outline-offset:3px}
input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid #6DFBC7;outline-offset:2px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;transition-delay:0s!important}
  .reveal{transform:none}
}

/* ── 모바일 최적화 (2026-10-21): 작은 글자 12px 이상 · 터치 영역 32px 이상 · 히어로 카드 가운데 ── */
@media (max-width:760px){
  html body .ghero .photo,html body .ghero .pcol{margin-left:auto;margin-right:auto}
  html body .mcard .movr span,html body .mcard .mty,html body .mcard .cap .en,
  html body .pc .medal,html body .pc .crown,html body .pc .ovr small,
  html body .gr .who .en,html body .gr .who .tags span,html body .gr .ov span,html body .gr .rk span,
  html body .gcard .ovr span,html body .gcard .tierb span,html body .six span,
  html body .fsh .rk small,html body .live1 .lv,html body .lt .li b,html body .fcr small,
  html body .w small,html body .fsc .fnote,html body .hd .ey,html body .p3h .bd,
  html body .calc .term small,html body .wo .hlb,html body .lgh .lgk,html body .stats .lgn,
  html body .ch .code,html body .sub .nm em,html body .gcard .six span,html body .gcard .six div span,
  html body li .w small,html body .cat .cxt small,html body .sc .tn,html body .sc .sr,html body li .sr,html body .sr a,
  html body li .yr small,html body h5 .tn2,html body li .tn{font-size:12px}
  html body .sr a,html body .wg .gl a,html body .scene .src a,html body .quota a,
  html body .demohint a,html body .ls-s a,html body .top a.brand{display:inline-flex;align-items:center;min-height:32px}
}