:root{
  --night:#040814; --deep:#0a1430; --lake:#0d1b3d; --ink:#e6ebf7; --ink-2:#b9c2db; --muted:#7f8bab;
  --gold:#d9b66e; --gold-hi:#f4dea6; --gold-dim:rgba(217,182,110,.35); --line:rgba(185,194,219,.16);
  --serif:"Noto Serif KR",serif; --sans:"Noto Sans KR",system-ui,sans-serif; --latin:"Cormorant Garamond","Noto Serif KR",serif;
  --gutter:clamp(20px,5vw,72px);
  --ease-arrive:cubic-bezier(.16,1,.3,1);   /* 빠르게 나와 부드럽게 멈춤 */
  --ease-breath:cubic-bezier(.45,0,.55,1);  /* 숨처럼 대칭 */
}
*{box-sizing:border-box}
html{background:var(--night);color:var(--ink);-webkit-text-size-adjust:100%}
html.lenis,html.lenis body{height:auto}
body{margin:0;font-family:var(--sans);font-weight:300;font-size:16px;line-height:1.75;word-break:keep-all;overflow-wrap:break-word;background:var(--night)}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
:focus-visible{outline:1px solid var(--gold);outline-offset:4px}
.skip{position:absolute;left:-9999px;top:8px;z-index:100;background:var(--gold);color:var(--night);padding:6px 12px}
.skip:focus{left:8px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.eyebrow{font-family:var(--latin);font-weight:400;letter-spacing:.28em;text-transform:uppercase;font-size:12px;color:var(--gold);margin:0 0 18px}
h1,h2,h3{font-family:var(--serif);font-weight:300;letter-spacing:-.01em;margin:0}
h2{font-size:clamp(26px,3.6vw,44px);line-height:1.35}

/* 머리띠 */
.nav{position:fixed;inset:0 0 auto 0;z-index:50;display:flex;justify-content:space-between;align-items:center;padding:20px var(--gutter);mix-blend-mode:normal;transition:background .6s var(--ease-arrive),padding .6s var(--ease-arrive)}
.nav.solid{background:linear-gradient(to bottom,rgba(4,8,20,.86),rgba(4,8,20,0));padding-top:14px}
.mark{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--gold-hi)}
.mark svg{width:28px;height:28px}
.mark span{font-family:var(--latin);font-size:15px;letter-spacing:.32em;text-transform:uppercase}
.nav nav{display:flex;gap:clamp(14px,2.4vw,34px)}
.nav nav a{text-decoration:none;font-size:13px;letter-spacing:.12em;color:var(--ink-2);position:relative;padding:4px 0}
.nav nav a::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease-arrive)}
.nav nav a:hover::after,.nav nav a.on::after{transform:scaleX(1)}

/* 첫 화면 */
.hero{position:relative;height:100svh;min-height:560px;overflow:hidden}
#lake{position:absolute;inset:0;width:100%;height:100%;display:block;image-rendering:auto}
.hero-fallback{position:absolute;inset:0;background:radial-gradient(60% 40% at 50% 34%,rgba(217,182,110,.18),transparent 70%),linear-gradient(#0a1534 0%,#050b1d 56%,#08142f 57%,#040814 100%);display:none}
.no-gl .hero-fallback{display:block}
.hero-copy{position:absolute;left:var(--gutter);right:var(--gutter);bottom:clamp(92px,15vh,170px);text-align:center;pointer-events:none}
.hero::after{content:"";position:absolute;inset:auto 0 0 0;height:62%;background:linear-gradient(to top,rgba(4,8,20,.78),rgba(4,8,20,.35) 55%,transparent);pointer-events:none}
.hero-copy,.scroll-cue{z-index:2}
.hero h1{font-size:clamp(32px,4.4vw,64px);line-height:1.22;font-weight:300;color:#f3f0e6;text-shadow:0 0 40px rgba(4,8,20,.8)}
.hero h1 .ln{display:block;overflow:hidden;padding-bottom:.06em}
.hero h1 .ln>span{display:inline-block;transform:translateY(110%)}
[data-intro]{opacity:0;transform:translateY(14px)}
.intro-done .hero h1 .ln>span,.intro-done [data-intro]{transform:none;opacity:1}
.hero .lede{margin:22px auto 0;max-width:30em;color:var(--ink-2);font-size:clamp(14px,1.3vw,17px)}
.scroll-cue{position:absolute;left:50%;bottom:28px;transform:translateX(-50%);font-size:11px;letter-spacing:.3em;color:var(--muted);display:flex;flex-direction:column;align-items:center;gap:10px}
.scroll-cue span{width:1px;height:42px;background:linear-gradient(var(--gold),transparent);animation:cue 2.6s var(--ease-breath) infinite}
@keyframes cue{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* 일곱 계 */
.planes{position:relative;background:linear-gradient(var(--night),var(--deep) 30%,var(--deep) 70%,var(--night))}
.planes-pin{min-height:100svh;padding:clamp(90px,12vh,130px) var(--gutter) 48px;display:grid;grid-template-rows:auto 1fr auto;gap:24px}
.planes-head{max-width:760px}
.planes-stage{position:relative;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);align-items:center;gap:clamp(16px,4vw,64px)}
.rings{width:100%;max-height:68svh;overflow:visible}
.rings .ring{fill:none;stroke:var(--gold);stroke-width:1.1;vector-effect:non-scaling-stroke}
.rings .ring-fill{fill:rgba(217,182,110,.035)}
.plane-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column-reverse;gap:6px}
.plane-list li{display:grid;grid-template-columns:6.4em 1fr;gap:14px;padding:10px 0;border-top:1px solid var(--line);opacity:.28;transition:opacity .6s var(--ease-arrive)}
.plane-list li.on{opacity:1}
.plane-list li.now .pl-name{color:var(--gold-hi)}
.pl-name{font-family:var(--serif);font-size:clamp(16px,1.5vw,19px);transition:color .6s}
.pl-desc{font-size:14px;color:var(--ink-2);line-height:1.65}
.planes-note{font-size:13px;color:var(--muted);margin:0;max-width:640px}

/* 책 */
.book{padding:clamp(100px,16vh,180px) var(--gutter) clamp(80px,12vh,140px);max-width:1240px;margin:0 auto}
.book-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(32px,6vw,96px);align-items:center}
.book-cover{margin:0;position:relative;transform-style:preserve-3d;will-change:transform;box-shadow:0 40px 80px -30px rgba(0,0,0,.9),0 0 0 1px rgba(217,182,110,.18);border-radius:2px;overflow:hidden;max-width:420px;justify-self:center}
.book-cover .glare{position:absolute;inset:0;background:radial-gradient(40% 30% at var(--gx,50%) var(--gy,20%),rgba(255,240,210,.22),transparent 70%);mix-blend-mode:screen;pointer-events:none}
.book-copy h2{font-size:clamp(30px,4vw,50px)}
.book-copy .sub{font-family:var(--serif);color:var(--gold);margin:14px 0 26px;font-size:clamp(15px,1.4vw,18px)}
.book-copy>p{color:var(--ink-2);max-width:34em}
.facts{display:grid;grid-template-columns:repeat(4,auto);justify-content:start;gap:8px clamp(18px,3vw,44px);margin:32px 0 0;padding:22px 0 0;border-top:1px solid var(--line)}
.facts dt{font-size:11px;letter-spacing:.2em;color:var(--muted)}
.facts dd{margin:4px 0 0;font-family:var(--serif);font-size:17px}
.soon{font-size:13px;color:var(--muted)!important;margin-top:18px}

.path{margin-top:clamp(90px,14vh,150px)}
.path h3{font-size:clamp(20px,2.2vw,28px);margin-bottom:28px}
.path-stage{position:relative}
.path-line{position:absolute;inset:0 0 auto 0;width:100%;height:220px;overflow:visible}
.path-line path{fill:none;stroke:var(--gold-dim);stroke-width:1;stroke-dasharray:2 6;vector-effect:non-scaling-stroke}
.parts{list-style:none;margin:0;padding:0;position:relative;height:300px}
.parts li{position:absolute;transform:translate(-6.5px,-8.5px);width:150px}
.parts button{all:unset;cursor:pointer;display:flex;flex-direction:column;gap:2px;padding:4px 2px}
.parts button:focus-visible{outline:1px solid var(--gold);outline-offset:6px}
.star{width:9px;height:9px;border-radius:50%;background:var(--gold-hi);box-shadow:0 0 0 4px rgba(217,182,110,.12),0 0 18px 4px rgba(244,222,166,.45);margin-bottom:10px;transition:transform .5s var(--ease-arrive)}
.parts button:hover .star,.parts button[aria-expanded="true"] .star{transform:scale(1.6)}
.pn{font-family:var(--latin);font-size:13px;letter-spacing:.2em;color:var(--gold)}
.pt{font-family:var(--serif);font-size:clamp(14px,1.3vw,17px)}
.parts p{position:absolute;left:0;top:100%;width:min(250px,60vw);margin:10px 0 0;font-size:13px;line-height:1.65;color:var(--ink-2);opacity:0;transform:translateY(6px);pointer-events:none;transition:opacity .45s var(--ease-arrive),transform .45s var(--ease-arrive);z-index:2}
.parts li:nth-child(n+5) p{left:auto;right:calc(100% - 150px)}
.parts p{display:none}
.part-desc{margin:8px 0 0;min-height:3.4em;font-size:14px;color:var(--muted);max-width:40em;transition:color .4s}
.part-desc.on{color:var(--ink-2)}
.part-desc b{font-family:var(--serif);font-weight:400;color:var(--gold-hi);margin-right:14px}

/* 숨 */
.breath{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(30px,6vw,90px);align-items:center;padding:clamp(100px,16vh,170px) var(--gutter);max-width:1240px;margin:0 auto}
.breath-copy p{color:var(--ink-2);max-width:28em}
.btn{all:unset;cursor:pointer;margin-top:26px;display:inline-block;font-size:14px;letter-spacing:.14em;padding:14px 26px;border:1px solid var(--gold-dim);color:var(--gold-hi);transition:background .4s,border-color .4s}
.btn:hover{background:rgba(217,182,110,.08);border-color:var(--gold)}
.btn:focus-visible{outline:1px solid var(--gold);outline-offset:4px}
.breath-stage{display:flex;flex-direction:column;align-items:center;gap:20px}
.breath-flower{width:min(380px,74vw);color:var(--gold);overflow:visible;filter:drop-shadow(0 0 22px rgba(217,182,110,.25))}
.breath-flower .petals{transform-origin:0 0}
.breath-cue{font-family:var(--serif);font-size:18px;color:var(--ink-2);min-height:1.8em;margin:0}

/* 용어 */
.lexicon{padding:clamp(90px,14vh,150px) var(--gutter);max-width:1240px;margin:0 auto;border-top:1px solid var(--line)}
.lex-head{max-width:720px}
.lex-head>p{color:var(--ink-2)}
.search{display:block;margin-top:26px}
.search input{width:100%;background:transparent;border:0;border-bottom:1px solid var(--gold-dim);color:var(--ink);font:300 clamp(18px,2vw,22px)/1.5 var(--serif);padding:10px 0;outline:none;border-radius:0}
.search input:focus{border-bottom-color:var(--gold)}
.search input::placeholder{color:var(--muted)}
.lex-count{font-size:12px;letter-spacing:.14em;color:var(--muted)}
.lex-list{margin:28px 0 0;columns:2 360px;column-gap:56px}
.lex-list .it{break-inside:avoid;padding:16px 0;border-top:1px solid var(--line)}
.lex-list dt{font-family:var(--serif);font-size:18px}
.lex-list dt small{font-family:var(--latin);font-size:14px;color:var(--gold);margin-left:10px;letter-spacing:.04em}
.lex-list dd{margin:6px 0 0;font-size:14px;color:var(--ink-2);line-height:1.7}
.lex-list dd em{font-style:normal;color:var(--muted);font-size:12px;letter-spacing:.06em}
.lex-list mark{background:none;color:var(--gold-hi)}

/* 곧 */
.coming{padding:clamp(80px,12vh,130px) var(--gutter);max-width:1240px;margin:0 auto;border-top:1px solid var(--line)}
.coming h2{font-size:clamp(22px,2.6vw,32px);margin-bottom:36px}
.coming-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,44px)}
.coming article{padding-top:22px;border-top:1px solid var(--gold-dim)}
.coming h3{font-size:18px;margin-bottom:10px}
.coming p{font-size:14px;color:var(--ink-2);margin:0}

.foot{padding:70px var(--gutter) 60px;text-align:center;color:var(--muted);font-size:13px;border-top:1px solid var(--line)}
.foot-mark{font-family:var(--latin);letter-spacing:.4em;text-transform:uppercase;color:var(--gold);font-size:14px}
.foot-small{font-size:11px}

/* 모바일 */
@media (max-width:820px){
  .nav nav a{font-size:12px}
  .mark span{display:none}
  .planes-stage{grid-template-columns:1fr}
  .rings{max-height:42svh}
  .plane-list li{grid-template-columns:6.2em 1fr;padding:6px 0}
  .pl-desc{font-size:13px}
  .plane-list li{display:none}
  .plane-list li.now{display:grid;opacity:1;border-top:1px solid var(--gold-dim);padding-top:14px}
  .plane-list li.now::after{content:attr(data-n);grid-column:1/-1;font-family:var(--latin);font-size:12px;letter-spacing:.24em;color:var(--muted)}
  .rings{max-height:46svh}
  .planes-pin{padding-top:84px;gap:14px}
  .planes-head h2{font-size:22px}
  .book-grid,.breath{grid-template-columns:1fr}
  .book-cover{max-width:300px}
  .facts{grid-template-columns:repeat(2,auto)}
  .path-line{display:none}
  .parts{display:block;height:auto;border-left:1px dashed var(--gold-dim);margin-left:4px}
  .parts li{position:relative;transform:none;width:auto;padding:14px 0 14px 22px}
  .parts li .star{position:absolute;left:-5px;top:20px;margin:0}
  .parts p,.parts li:nth-child(n+5) p{display:block;position:static;width:auto;opacity:1;transform:none;margin-top:6px}
  .part-desc{display:none}
  .coming-grid{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .hero h1 .ln>span,[data-intro]{transform:none!important;opacity:1!important}
  *,*::before,*::after{animation:none!important;transition:none!important}
}
.hero-sig{margin:26px 0 0;color:var(--muted)}

.lex-more{all:unset;cursor:pointer;margin-top:26px;font-size:13px;letter-spacing:.14em;color:var(--gold-hi);border-bottom:1px solid var(--gold-dim);padding-bottom:4px}
.lex-more:focus-visible{outline:1px solid var(--gold);outline-offset:4px}

/* 안내 명상 */
.guide{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(30px,6vw,90px);align-items:center;padding:clamp(90px,14vh,150px) var(--gutter);max-width:1240px;margin:0 auto;border-top:1px solid var(--line)}
.guide-head>p{color:var(--ink-2);max-width:30em}
.guide-pick{display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:26px}
.guide-pick button{all:unset;cursor:pointer;font-family:var(--serif);font-size:17px;color:var(--muted);padding:6px 0;border-bottom:1px solid transparent;transition:color .4s,border-color .4s}
.guide-pick button span{font-family:var(--latin);font-size:13px;margin-left:8px;letter-spacing:.08em}
.guide-pick button[aria-checked="true"]{color:var(--gold-hi);border-bottom-color:var(--gold)}
.guide-pick button:focus-visible{outline:1px solid var(--gold);outline-offset:4px}
.guide-player{position:relative;display:grid;place-items:center;min-height:min(480px,90vw)}
.guide-ring{position:absolute;width:min(440px,84vw);height:auto;transform:rotate(-90deg)}
.guide-ring circle{fill:none;stroke-width:.8}
.guide-ring .track{stroke:var(--line)}
.guide-ring .prog{stroke:var(--gold);stroke-linecap:round;stroke-dasharray:578;stroke-dashoffset:578;transition:stroke-dashoffset 1s linear;filter:drop-shadow(0 0 6px rgba(217,182,110,.5))}
.guide-now{position:relative;text-align:center;max-width:min(300px,62vw)}
.g-step{font-family:var(--latin);letter-spacing:.24em;color:var(--gold);font-size:13px;margin:0 0 12px}
.g-text{font-family:var(--serif);font-size:clamp(16px,1.6vw,19px);line-height:1.75;margin:0;min-height:5.4em;transition:opacity .6s}
.g-time{font-family:var(--latin);font-size:22px;letter-spacing:.1em;color:var(--ink-2);margin:14px 0 0}
.guide-ctrl{position:relative;display:flex;gap:12px;margin-top:22px;grid-row:2}
.btn.ghost{border-color:var(--line);color:var(--ink-2)}
.btn[disabled]{opacity:.35;cursor:default}

/* 기록 양식 + 추천 도서 */
.shelf{padding:clamp(90px,14vh,150px) var(--gutter);max-width:1240px;margin:0 auto;border-top:1px solid var(--line)}
.shelf-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(36px,6vw,100px)}
.forms>p{color:var(--ink-2)}
.dl{list-style:none;margin:28px 0 0;padding:0}
.dl a{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:18px 0;border-top:1px solid var(--line);text-decoration:none;font-family:var(--serif);font-size:18px;transition:color .4s,padding .5s var(--ease-arrive)}
.dl li:last-child a{border-bottom:1px solid var(--line)}
.dl a span{font-family:var(--sans);font-size:12px;letter-spacing:.1em;color:var(--muted)}
.dl a:hover{color:var(--gold-hi);padding-left:10px}
.rd-h{font-size:clamp(20px,2.2vw,28px)}
.rd-note{font-size:14px;color:var(--muted)}
.rd-g{margin-top:30px}
.rd-g h4{font-family:var(--serif);font-weight:400;font-size:15px;color:var(--gold);margin:0 0 6px;letter-spacing:.02em}
.rd-b{padding:14px 0;border-top:1px solid var(--line)}
.rd-b .t{font-family:var(--serif);font-size:17px}
.rd-b .m{font-size:12px;color:var(--muted);margin-left:8px}
.rd-b p{margin:4px 0 0;font-size:14px;color:var(--ink-2);line-height:1.7}
@media (max-width:820px){
  .guide,.shelf-grid{grid-template-columns:1fr}
  .guide-player{min-height:auto;padding:30px 0}
  .guide-ring{position:static;grid-area:1/1}
  .guide-now{grid-area:1/1}
}

/* 입체 책 — 실제 비율: 148 × 210mm, 책등 11.06mm(172쪽) */
.book3d-wrap{--w:clamp(170px,19vw,236px);--h:calc(var(--w) * 210 / 148);--d:calc(var(--w) * 11.06 / 148);position:relative;justify-self:center;display:flex;flex-direction:column;align-items:center;perspective:1400px;padding:20px 0 0}
.book3d{position:relative;width:var(--w);height:var(--h);transform-style:preserve-3d;transform:rotateX(6deg) rotateY(30deg);will-change:transform;cursor:grab}
.book3d:active{cursor:grabbing}
.bf{position:absolute;backface-visibility:hidden}
.bf img{width:100%;height:100%;object-fit:cover;display:block}
.bf.front,.bf.back{inset:0}
.bf.front{transform:translateZ(calc(var(--d) / 2));box-shadow:inset 3px 0 6px -2px rgba(0,0,0,.45)}
.bf.front::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(255,255,255,.12),transparent 30%,transparent 70%,rgba(0,0,0,.18));pointer-events:none}
.bf.back{transform:rotateY(180deg) translateZ(calc(var(--d) / 2))}
.bf.spine{width:var(--d);height:var(--h);left:calc((var(--w) - var(--d)) / 2);transform:rotateY(-90deg) translateZ(calc(var(--w) / 2))}
.bf.edge{width:var(--d);height:calc(var(--h) - 4px);top:2px;left:calc((var(--w) - var(--d)) / 2);transform:rotateY(90deg) translateZ(calc(var(--w) / 2 - 2px));background:repeating-linear-gradient(90deg,#efe8d8 0 1px,#dcd3bf 1px 2px)}
.bf.top,.bf.bottom{width:calc(var(--w) - 2px);height:var(--d);top:calc((var(--h) - var(--d)) / 2);background:repeating-linear-gradient(0deg,#efe8d8 0 1px,#d9d0bb 1px 2px)}
.bf.top{transform:rotateX(90deg) translateZ(calc(var(--h) / 2 - 2px))}
.bf.bottom{transform:rotateX(-90deg) translateZ(calc(var(--h) / 2 - 2px))}
.book3d-shadow{width:calc(var(--w) * 1.1);height:26px;margin-top:26px;background:radial-gradient(50% 50% at 50% 50%,rgba(0,0,0,.75),transparent 70%);filter:blur(4px)}
.book-turn{all:unset;cursor:pointer;margin-top:14px;font-size:12px;letter-spacing:.18em;color:var(--muted);border-bottom:1px solid var(--line);padding-bottom:3px}
.book-turn:hover{color:var(--gold-hi)}
.book-turn:focus-visible{outline:1px solid var(--gold);outline-offset:4px}

/* 안내 명상 플레이어 — 원 정중앙에 글, 버튼은 원 아래 */
.guide-player{display:flex;flex-direction:column;align-items:center;min-height:0;padding:0}
.guide-dial{position:relative;width:min(400px,82vw);aspect-ratio:1;display:grid;place-items:center}
.guide-ring{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.guide-now{position:relative;width:68%;max-width:none;text-align:center}
.g-text{font-size:clamp(15px,1.45vw,18px);min-height:0}
.guide-ctrl{margin-top:26px}
.btn:focus{outline:none}
.btn:focus-visible{outline:1px solid var(--gold);outline-offset:3px}
@media (max-width:820px){.guide-ring{position:absolute;grid-area:auto}.guide-now{grid-area:auto}}

/* 목소리 안내 명상 목록과 재생기 */
.med-list{list-style:none;margin:30px 0 0;padding:0;counter-reset:none}
.med-list button{all:unset;cursor:pointer;display:grid;grid-template-columns:2.6em 1fr auto;gap:14px;align-items:baseline;width:100%;padding:15px 0;border-top:1px solid var(--line);transition:color .4s}
.med-list li:last-child button{border-bottom:1px solid var(--line)}
.med-list .mn{font-family:var(--latin);font-size:14px;color:var(--muted);letter-spacing:.1em}
.med-list .mt{font-family:var(--serif);font-size:17px;line-height:1.45}
.med-list .mt small,.med-list .md small{display:block;font-family:var(--sans);font-size:12px;color:var(--muted);margin-top:3px;letter-spacing:.02em}
.med-list .md{font-family:var(--latin);font-size:15px;color:var(--ink-2);text-align:right;white-space:nowrap}
.med-list button:hover .mt,.med-list button[aria-pressed="true"] .mt{color:var(--gold-hi)}
.med-list button[aria-pressed="true"] .mn{color:var(--gold)}
.med-list button:focus-visible{outline:1px solid var(--gold);outline-offset:3px}
.g-title{font-family:var(--serif);font-size:15px;color:var(--ink-2);margin:0 0 16px}
.g-text{opacity:0;transition:opacity 1.2s var(--ease-breath)}
.g-text.in{opacity:1}
.g-seek{width:min(320px,70vw);margin-top:22px;accent-color:var(--gold);height:2px}
.guide-ctrl .btn.icon{padding:14px 16px;font-family:var(--latin);letter-spacing:.06em}
.guide-opts{display:flex;gap:22px;margin-top:18px;font-size:13px;color:var(--muted)}
.guide-opts input{accent-color:var(--gold);margin-right:6px;vertical-align:-1px}
.guide-player{position:sticky;top:90px}
@media (max-width:820px){.guide-player{position:static}}

/* 탭 */
.view[hidden]{display:none!important}
.view:not([data-view="home"]){padding-top:40px;min-height:100svh}
.view h2:focus{outline:none}
.doors{max-width:1240px;margin:0 auto;padding:clamp(70px,10vh,120px) var(--gutter) clamp(90px,12vh,140px);display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,2vw,28px)}
.door{display:flex;flex-direction:column;gap:8px;padding:26px 0 22px;border-top:1px solid var(--gold-dim);text-decoration:none;transition:border-color .5s,transform .6s var(--ease-arrive)}
.door .dn{font-family:var(--latin);font-size:12px;letter-spacing:.26em;text-transform:uppercase;color:var(--gold)}
.door b{font-family:var(--serif);font-weight:300;font-size:clamp(22px,2.4vw,30px)}
.door span:last-child{font-size:14px;color:var(--ink-2)}
.door:hover{border-color:var(--gold);transform:translateY(-4px)}
.door:focus-visible{outline:1px solid var(--gold);outline-offset:6px}
@media (max-width:820px){.doors{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.doors{grid-template-columns:1fr}}
.med-cats{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:28px}
.med-cats button{all:unset;cursor:pointer;font-size:13px;letter-spacing:.08em;color:var(--muted);padding:4px 0;border-bottom:1px solid transparent;transition:color .3s,border-color .3s}
.med-cats button[aria-selected="true"]{color:var(--gold-hi);border-bottom-color:var(--gold)}
.med-cats button:hover{color:var(--ink)}
.med-cats button:focus-visible{outline:1px solid var(--gold);outline-offset:4px}
.med-list{margin-top:16px}