:root {
  --ink:#1c1530;
  --night:#140f2e;
  --plum:#2a1650;
  --violet:#6b2fb3;
  --orchid:#c064ff;
  --gold:#e9c27a;
  --gold-d:#a8803c;
  --hanji:#f3ebdb;
  --hanji-d:#e4d6bb;
  --red:#b8321f;
  --text:#2b2238;
  --serif:'Hahmlet','Pretendard',serif;
  --brush:'Nanum Myeongjo','Hahmlet',serif;
  --sans:'Pretendard','Apple SD Gothic Neo','Noto Sans KR',sans-serif;
  --noise:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .36 0 0 0 0 .22 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
* { box-sizing:border-box; }
[hidden] { display:none !important; }
html { scroll-behavior:smooth; scroll-padding-top:72px; }
body { margin:0; background:var(--night); color:var(--text); font:400 16px/1.75 var(--sans); word-break:keep-all; letter-spacing:-.01em; }
img { max-width:100%; }
.px { image-rendering:pixelated; image-rendering:crisp-edges; }
button { font:inherit; color:inherit; cursor:pointer; }
a { color:inherit; }

/* ------------------------------------------------ header */
.gnb { position:fixed; inset:0 0 auto; z-index:20; display:flex; align-items:center; gap:34px; height:68px; padding:0 0 0 28px; color:#fff; transition:background .3s; background:linear-gradient(180deg, rgba(20,15,46,.85), rgba(20,15,46,.55)); backdrop-filter:blur(6px); }
.gnb.solid { background:rgba(20,15,46,.9); backdrop-filter:blur(10px); box-shadow:0 1px 0 rgba(233,194,122,.2); }
.gnb-logo { font:800 24px var(--brush); letter-spacing:-.02em; text-decoration:none; color:var(--gold); white-space:nowrap; }
.gnb-logo span { font:700 13px var(--serif); letter-spacing:.2em; color:#f6ecd9; margin-right:8px; vertical-align:3px; }
.gnb nav { display:flex; gap:30px; }
.gnb nav a, .gnb-home { font:600 15px var(--sans); text-decoration:none; color:#f1eaf8; opacity:.9; }
.gnb nav a:hover, .gnb-home:hover { color:var(--gold); opacity:1; }
.gnb-home { margin-left:auto; font-weight:500; opacity:.7; }
.gnb-cta { align-self:stretch; display:grid; place-items:center; padding:0 34px; font:700 18px var(--sans); text-decoration:none; color:#fff; background:linear-gradient(90deg,#4b1d8f,#7a2fc4); position:relative; overflow:hidden; }
.gnb-cta::before { content:''; position:absolute; inset:0; background:repeating-radial-gradient(circle at 0 50%, transparent 0 14px, rgba(255,255,255,.08) 14px 16px); }

/* ------------------------------------------------ hero */
.hero { position:relative; min-height:100svh; display:grid; place-items:center; overflow:hidden; text-align:center; color:#fff; }
.hero-kv { position:absolute; inset:0; background:linear-gradient(100deg,rgba(14,15,36,.95),rgba(31,21,59,.73)),url(/images/zodiac-world/haeon-map.svg) center/cover; image-rendering:auto; }
.hero-kv::after { content:''; position:absolute; inset:0; background:radial-gradient(ellipse 34% 40% at 50% 44%, rgba(20,15,46,.55), transparent 70%), linear-gradient(180deg, rgba(20,15,46,.65) 0%, transparent 18%, transparent 78%, rgba(20,15,46,.5)); }
@keyframes breathe { to { transform:scale(1.04); } }
.hero-stars { position:absolute; inset:0; pointer-events:none; }
.hero-inner { position:relative; z-index:2; padding:90px 20px 70px; margin-top:-3vh; }
.logo { margin:0 auto; width:min(860px,92vw); }
.logo svg { display:block; width:100%; height:auto; overflow:visible; filter:drop-shadow(0 0 26px rgba(192,100,255,.55)) drop-shadow(0 10px 18px rgba(10,4,24,.6)); }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.hero-sub { margin:4px 0 22px; font:600 clamp(19px,2.1vw,28px) var(--serif); color:#fbf4e6; text-shadow:0 2px 12px rgba(20,15,46,.9); }
.ribbon { display:inline-flex; align-items:center; gap:14px; margin:0; padding:11px 38px; font:700 clamp(15px,1.5vw,21px) var(--serif); color:#3a2416;
  background:linear-gradient(180deg,#f6eedc,#e2d1ae); clip-path:polygon(14px 0,calc(100% - 14px) 0,100% 50%,calc(100% - 14px) 100%,14px 100%,0 50%); position:relative; }
.ribbon::before { content:''; position:absolute; inset:4px 10px; border-top:1px solid var(--gold-d); border-bottom:1px solid var(--gold-d); }
.ribbon span { color:#6b3a20; }
.play-btn { display:grid; place-items:center; width:96px; height:96px; margin:34px auto 0; border-radius:50%; text-decoration:none; position:relative; transition:transform .2s;
  background:radial-gradient(circle at 50% 40%,#5b3418,#2e1608); box-shadow:0 0 0 4px #e3b265, 0 0 0 9px #3a1f0c, 0 0 0 11px #e3b265, 0 10px 30px rgba(0,0,0,.5); }
.play-btn span { width:0; height:0; margin-left:8px; border-left:30px solid #f4c675; border-top:18px solid transparent; border-bottom:18px solid transparent; filter:drop-shadow(0 0 6px rgba(244,198,117,.8)); }
.play-btn::after { content:''; position:absolute; inset:-18px; border-radius:50%; border:1px solid rgba(233,194,122,.6); animation:ring 2.4s ease-out infinite; }
@keyframes ring { from { transform:scale(.8); opacity:1; } to { transform:scale(1.25); opacity:0; } }
.play-btn:hover { transform:scale(1.05); }
.scroll-cue { position:absolute; bottom:22px; left:50%; z-index:2; transform:translateX(-50%); font-size:30px; color:var(--gold); text-decoration:none; animation:cue 1.6s ease-in-out infinite; }
@keyframes cue { 50% { transform:translate(-50%,8px); } }
.cloud-edge { position:relative; z-index:3; height:90px; margin-top:-89px; pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 90' preserveAspectRatio='none'%3E%3Cpath fill='%23f3ebdb' d='M0 90V58c40-30 90-30 120-6 20-34 80-40 110-10 30-40 100-44 130-4 26-26 80-30 104 0 34-46 116-46 150 0 26-30 84-32 112-2 30-38 96-40 128 0 26-28 76-30 104-4 30-32 84-34 110-2 18-16 42-20 62-12c20-8 40-4 50 4L1200 40V90z'/%3E%3C/svg%3E") bottom / 100% 100% no-repeat; }

/* ------------------------------------------------ sections */
.sec { position:relative; padding:96px max(4vw,18px) 110px; }
.paper { background:var(--noise), var(--hanji); }
.dusk { background:var(--noise), linear-gradient(180deg,#221545 0%,#3a1f63 60%,#2a1650 100%); color:#f3ebdb; }
.night { background:var(--noise), radial-gradient(ellipse at 50% 0%, #3a1f63, #140f2e 70%); color:#f3ebdb; }
.mountains::after { content:''; position:absolute; inset:auto 0 0; height:220px; pointer-events:none; opacity:.14;
  background:radial-gradient(ellipse 22% 60% at 12% 100%, #2b2238 60%, transparent 61%), radial-gradient(ellipse 28% 75% at 34% 100%, #2b2238 60%, transparent 61%), radial-gradient(ellipse 20% 55% at 62% 100%, #2b2238 60%, transparent 61%), radial-gradient(ellipse 30% 70% at 86% 100%, #2b2238 60%, transparent 61%); }
.sec-title { display:flex; justify-content:center; align-items:center; gap:18px; margin:0 0 46px; font:700 clamp(30px,3.2vw,42px) var(--serif); color:var(--ink); letter-spacing:.04em; }
.sec-title::before, .sec-title::after { content:'◆ ◇'; font-size:12px; letter-spacing:2px; color:var(--gold-d); padding-left:96px; background:linear-gradient(90deg,transparent,var(--gold-d)) left center / 88px 1px no-repeat; }
.sec-title::after { content:'◇ ◆'; padding:0 96px 0 0; background:linear-gradient(270deg,transparent,var(--gold-d)) right center / 88px 1px no-repeat; }
.sec-title.light { color:#f7ecd6; } .sec-title.light::before, .sec-title.light::after { color:var(--gold); background-image:linear-gradient(90deg,transparent,var(--gold)); }
.sec-title.light::after { background-image:linear-gradient(270deg,transparent,var(--gold)); }
.sec-lead { max-width:640px; margin:-26px auto 40px; text-align:center; color:#5b4c62; }

/* ------------------------------------------------ world slider */
.slider { position:relative; max-width:1120px; margin:0 auto; }
.slides { position:relative; aspect-ratio:16/8.6; border:2px solid var(--gold-d); box-shadow:0 0 0 6px var(--hanji), 0 0 0 7px var(--gold-d), 0 24px 50px rgba(28,21,48,.3); overflow:hidden; background:#140f2e; }
.slide { position:absolute; inset:0; opacity:0; transition:opacity .8s; }
.slide.is-on { opacity:1; }
.slide-art { position:absolute; inset:0; background:var(--bg) center / cover; image-rendering:auto; transform:scale(1.06); transition:transform 7s linear; }
.slide.is-on .slide-art { transform:scale(1); }
.slide-copy { position:absolute; inset:auto 0 0; padding:90px 8% 40px; text-align:center; color:#fff; background:linear-gradient(transparent, rgba(20,15,46,.9) 55%); }
.slide-copy h3 { margin:0 0 10px; font:700 clamp(22px,2.4vw,32px) var(--serif); letter-spacing:.02em; }
.slide-copy p { max-width:640px; margin:0 auto; font-size:16px; color:#ece4f4; }
.arrow { position:absolute; top:50%; width:52px; height:52px; margin-top:-26px; border:2px solid var(--gold); border-radius:50%; background:rgba(58,31,12,.85); color:var(--gold); font-size:30px; line-height:1; }
.arrow.prev { left:-26px; } .arrow.next { right:-26px; }
.arrow:hover { background:#5b3418; }
.dots { display:flex; justify-content:center; gap:14px; margin:28px 0 0; padding:0; list-style:none; }
.dots button { width:11px; height:11px; padding:0; border:1px solid var(--gold-d); background:transparent; transform:rotate(45deg); }
.dots button[aria-current=true] { background:var(--gold-d); }

/* ------------------------------------------------ cast map */
.map { position:relative; max-width:1180px; margin:0 auto; aspect-ratio:1536/850; border:2px solid var(--gold); box-shadow:0 0 0 6px #2a1650, 0 0 0 7px var(--gold), 0 30px 60px rgba(0,0,0,.45); overflow:hidden; }
.map-art { position:absolute; inset:0; background:url(/images/zodiac-world/haeon-map.svg) center / cover; image-rendering:auto; }
.map-art::after { content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(20,15,46,.1), rgba(20,15,46,.45)); }
.tokens { position:absolute; inset:0; margin:0; padding:0; list-style:none; }
.tokens li { position:absolute; transform:translate(-50%,-50%); }
.token { display:grid; justify-items:center; gap:5px; padding:0; border:0; background:none; color:#fff; }
.token img { width:clamp(64px,6.6vw,100px); height:clamp(64px,6.6vw,100px); border-radius:50%; image-rendering:pixelated; background:radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--c) 55%, #fff), var(--c)); box-shadow:0 0 0 3px #fff3d6, 0 0 0 6px var(--c), 0 8px 16px rgba(0,0,0,.5); transition:transform .2s; }
.token { position:relative; }
.token span { padding:1px 10px; border-radius:20px; background:rgba(20,15,46,.85); font:700 13px var(--sans); white-space:nowrap; border:1px solid rgba(233,194,122,.5); }
.token:hover img { transform:translateY(-4px); }
.token[aria-pressed=true] img { transform:translateY(-8px) scale(1.12); box-shadow:0 0 0 3px #fff3d6, 0 0 0 6px var(--gold), 0 0 28px var(--c); animation:hop .9s ease-in-out infinite; }
@keyframes hop { 50% { translate:0 -5px; } }
.token[aria-pressed=true] span { background:var(--gold); color:#2a1650; }
.profile { max-width:1180px; margin:44px auto 0; display:grid; grid-template-columns:1.25fr 1fr; border-radius:4px; overflow:hidden; background:var(--noise), var(--hanji); color:var(--text); box-shadow:0 24px 50px rgba(0,0,0,.35); border-top:5px solid var(--c, var(--gold)); }
.profile-art { background:#140f2e; }
.profile-art img { display:block; width:100%; height:100%; object-fit:cover; }
.profile-art img.in { animation:fadein .5s ease; }
@keyframes fadein { from { opacity:0; transform:scale(1.02); } }
.profile-copy { padding:34px 38px; }
.pf-meta { margin:0; font:700 13px var(--sans); letter-spacing:.08em; color:var(--c, var(--gold-d)); filter:brightness(.8); }
.profile-copy h3 { margin:6px 0 4px; font:800 40px var(--serif); color:var(--ink); }
.pf-quote { margin:0 0 22px; font:500 18px/1.6 var(--serif); color:#6b3a20; }
.profile-copy dl { margin:0; display:grid; grid-template-columns:56px 1fr; gap:12px 16px; }
.profile-copy dt { font:700 13px var(--sans); color:#fff; background:var(--ink); text-align:center; border-radius:2px; height:24px; line-height:24px; }
.profile-copy dd { margin:0; font-size:15px; line-height:1.65; color:#3f3450; }

/* ------------------------------------------------ jobs */
.jobs { position:relative; z-index:1; max-width:1180px; margin:0 auto; padding:0; list-style:none; display:grid; grid-template-columns:repeat(7,1fr); gap:14px; }
.job { width:100%; height:100%; display:grid; grid-template-rows:auto auto 1fr; gap:6px; padding:0 0 16px; border:1px solid var(--hanji-d); border-radius:6px; background:#fbf6ea; text-align:center; transition:transform .2s, box-shadow .2s; box-shadow:0 6px 16px rgba(43,34,56,.08); }
.job-art { display:grid; place-items:center; height:118px; border-radius:6px 6px 0 0; background:radial-gradient(circle at 50% 60%, rgba(255,255,255,.6), transparent 62%), repeating-conic-gradient(from 0deg at 50% 60%, #eadcbd 0 15deg, #f3e8d1 15deg 30deg); }
.job-art canvas { width:72px; height:72px; image-rendering:pixelated; filter:drop-shadow(0 4px 0 rgba(43,34,56,.2)); transition:transform .2s; }
.job:hover .job-art canvas, .job[aria-pressed=true] .job-art canvas { transform:translateY(-4px) scale(1.06); }
.job b { font:700 17px var(--serif); color:var(--ink); }
.job small { padding:0 10px; font-size:12.5px; line-height:1.5; color:#6b5e72; }
.job:hover { transform:translateY(-4px); box-shadow:0 14px 26px rgba(43,34,56,.14); }
.job[aria-pressed=true] { border-color:var(--gold-d); box-shadow:0 0 0 2px var(--gold-d), 0 16px 30px rgba(168,128,60,.25); transform:translateY(-6px); }
.job[aria-pressed=true] .job-art { background:radial-gradient(circle at 50% 60%, rgba(255,255,255,.7), transparent 62%), repeating-conic-gradient(from 0deg at 50% 60%, #f0cf86 0 15deg, #f8e3b0 15deg 30deg); }
.builder { position:relative; z-index:1; max-width:1000px; margin:40px auto 0; display:grid; grid-template-columns:1.2fr 1fr; gap:22px; align-items:stretch; }
.builder-panel { padding:26px 28px; border-radius:6px; background:#fffaf0; box-shadow:0 10px 30px rgba(43,34,56,.12); border:1px solid var(--hanji-d); }
.bp-head { display:flex; gap:16px; align-items:center; margin-bottom:18px; }
.bp-head canvas { width:56px; height:56px; padding:8px; border-radius:50%; background:#f1e6cf; image-rendering:pixelated; }
.bp-head h3 { margin:0; font:800 24px var(--serif); color:var(--ink); }
.bp-head p { margin:0; font-size:14px; color:#6b5e72; }
.mode { display:flex; align-items:center; margin-bottom:16px; }
.mode button { padding:7px 16px; border:1px solid var(--gold-d); background:#fff; font:600 13px var(--sans); color:var(--gold-d); }
.mode button + button { border-left:0; }
.mode button[aria-pressed=true] { background:var(--ink); color:#fff; border-color:var(--ink); }
.mode span { margin-left:auto; font:600 13px var(--sans); color:var(--red); }
.bars { list-style:none; margin:0; padding:0; display:grid; gap:12px; }
.bars li { display:grid; grid-template-columns:70px 1fr 26px auto auto; gap:12px; align-items:center; }
.bars .k { font:700 14px var(--sans); color:var(--ink); } .bars .k small { margin-left:6px; font-weight:500; color:#9a8ea6; font-size:11px; }
.track { height:10px; border-radius:10px; background:#ece2cf; overflow:hidden; }
.track i { display:block; height:100%; border-radius:10px; background:linear-gradient(90deg,#7a2fc4,#c064ff); transition:width .3s; }
.bars b { font:800 16px var(--serif); color:var(--violet); text-align:right; }
.bars button { width:26px; height:26px; border:1px solid var(--hanji-d); border-radius:50%; background:#fff; font-weight:700; line-height:1; }
.info { margin:0; padding:22px 24px; border-radius:6px; background:#1d1a2b; color:#e7e1f2; font:500 14px/1.85 'SFMono-Regular',Menlo,var(--sans); white-space:pre; overflow:auto; box-shadow:0 10px 30px rgba(28,21,48,.3); }
.info::first-line { color:#9a93b0; font-size:12px; letter-spacing:.1em; }

/* ------------------------------------------------ quests */
.quests { max-width:1180px; margin:0 auto; padding:0; list-style:none; display:grid; grid-template-columns:repeat(3,1fr); gap:30px 22px; }
.quest { position:relative; padding:28px 26px 22px; border-radius:4px; background:var(--noise), linear-gradient(180deg,#f7efde,#ecdfc3); color:var(--text); box-shadow:0 18px 36px rgba(0,0,0,.35); }
.quest::before { content:''; position:absolute; inset:8px; border:1px solid rgba(168,128,60,.45); pointer-events:none; }
.q-no { position:absolute; top:-16px; right:22px; width:40px; height:40px; display:grid; place-items:center; border-radius:50%; background:var(--red); color:#fbe9d6; font:700 18px var(--serif); box-shadow:0 0 0 3px #f7efde, 0 0 0 4px var(--red); }
.quest h3 { margin:0 0 8px; font:800 21px var(--serif); color:var(--ink); }
.quest p { margin:0; font-size:14.5px; color:#4f4360; }
.q-foot { display:flex; align-items:center; justify-content:space-between; margin-top:16px; }
.team { display:flex; }
.team img { width:44px; height:44px; border-radius:50%; background:var(--c); box-shadow:0 0 0 2px #f7efde; image-rendering:pixelated; }
.team img + img { margin-left:-8px; }
.lv { color:var(--red); letter-spacing:3px; font-size:11px; } .lv em { font-style:normal; color:#d2c3a3; }
.quest .fit { margin-top:10px; font:600 12.5px var(--sans); color:var(--violet); }
.quest.locked { background:linear-gradient(180deg,#3a2a5a,#2a1d45); box-shadow:0 18px 36px rgba(0,0,0,.35), inset 0 0 0 1px rgba(233,194,122,.35); }
.quest.locked::before { border-color:rgba(233,194,122,.25); border-style:dashed; }
.quest.locked h3 { color:#e9dcff; } .quest.locked p { color:#b9acd3; }
.quest.locked .q-no { background:#5a3a8a; box-shadow:0 0 0 3px #2a1d45, 0 0 0 4px #5a3a8a; }

/* ------------------------------------------------ first scene */
.stage-frame { max-width:1120px; margin:0 auto; padding:10px; background:linear-gradient(180deg,#3a2a5a,#1c1530); border-radius:4px; box-shadow:0 0 0 2px var(--gold-d), 0 30px 60px rgba(28,21,48,.35); }
.stage { position:relative; aspect-ratio:16/9; overflow:hidden; }
.stage-art { position:absolute; inset:0; background:url(/images/reader/zodiac/04-first-choice.webp) center / cover; image-rendering:auto; }
.rain { position:absolute; inset:0; pointer-events:none; opacity:.28; background-image:repeating-linear-gradient(105deg, transparent 0 18px, rgba(200,210,255,.6) 18px 19px, transparent 19px 44px); background-size:120px 120px; animation:rain .5s linear infinite; }
@keyframes rain { to { background-position:-30px 120px; } }
.talk { position:absolute; left:4%; right:4%; bottom:5%; display:grid; grid-template-columns:auto 1fr; gap:18px; align-items:center; min-height:120px; padding:20px 54px 20px 22px; border-radius:6px; cursor:pointer;
  background:linear-gradient(180deg, rgba(28,21,48,.88), rgba(20,15,46,.94)); border:1px solid rgba(233,194,122,.6); box-shadow:0 0 0 4px rgba(20,15,46,.5); color:#f5eedf; }
.talk.narr { grid-template-columns:1fr; }
.talk-face { width:80px; height:80px; border-radius:50%; background:#3a2a5a; box-shadow:0 0 0 2px var(--gold); overflow:hidden; display:grid; justify-items:center; }
.talk-face img { width:80px; height:80px; image-rendering:pixelated; }
.talk.narr .talk-face { display:none; }
.talk b { display:inline-block; margin-bottom:4px; font:700 16px var(--serif); color:var(--gold); }
.talk b:empty { display:none; }
.talk p { margin:0; font:500 clamp(15px,1.4vw,18px)/1.7 var(--serif); min-height:3.3em; }
.talk.narr p { color:#ddd3ea; }
.talk-next { position:absolute; right:20px; bottom:16px; color:var(--gold); animation:nudge 1.2s ease-in-out infinite; }
@keyframes nudge { 50% { transform:translateY(4px); } }
.talk.done .talk-next { display:none; }
.picks { position:absolute; right:4%; top:7%; display:grid; gap:10px; width:min(440px,60%); }
.picks button { padding:12px 18px; border:1px solid rgba(233,194,122,.75); border-radius:4px; background:rgba(28,21,48,.92); color:#f5eedf; text-align:left; font:500 15px var(--sans); transition:background .2s; }
.picks button::before { content:'◇  '; color:var(--gold); }
.picks button:hover, .picks button.picked { background:#4b1d8f; }
.picks button.picked::before { content:'◆  '; }
.scene-result { max-width:1120px; min-height:2em; margin:22px auto 0; text-align:center; font:500 17px/1.7 var(--serif); color:var(--ink); }
.scene-result strong { color:var(--red); }

/* ------------------------------------------------ footer */
.foot { padding:70px 20px 40px; text-align:center; color:#cfc3e6; background:var(--noise), #120d28; }
.foot-title { margin:0 0 24px; font:700 26px var(--serif); color:#f7ecd6; }
.stores { display:flex; flex-wrap:wrap; justify-content:center; gap:14px; }
.stores a { display:flex; align-items:center; gap:12px; min-width:220px; padding:12px 22px; border-radius:8px; background:#000; border:1px solid #3a3350; text-decoration:none; color:#fff; transition:border-color .2s, transform .2s; }
.stores a:hover { border-color:var(--gold); transform:translateY(-2px); }
.stores img { width:28px; height:28px; object-fit:contain; }
.stores span { display:grid; text-align:left; font:700 19px/1.15 var(--sans); }
.stores small { font:500 12px var(--sans); color:#bdb5cf; }
.copy { margin:36px 0 0; font-size:13px; color:#8a80a3; }
.copy a { color:#cfc3e6; margin-left:10px; }

/* ------------------------------------------------ responsive */
@media (max-width:1100px) {
  .gnb nav { display:none; }
  .jobs { grid-template-columns:repeat(4,1fr); }
  .builder, .profile { grid-template-columns:minmax(0,1fr); }
  .quests { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .arrow.prev { left:8px; } .arrow.next { right:8px; }
}
@media (max-width:640px) {
  .gnb { gap:12px; padding-left:16px; height:58px; }
  .gnb-home { display:none; }
  .gnb-logo { font-size:20px; margin-right:auto; }
  .gnb-cta { padding:0 16px; font-size:14px; }
  .hero-kv { background-size:auto 100%; }
  .sec { padding:70px 16px 80px; }
  .sec-title::before, .sec-title::after { padding:0; background:none; }
  .slides { aspect-ratio:4/5; }
  .slide-copy { padding:60px 6% 26px; }
  .map { aspect-ratio:auto; height:440px; }
  .token span { font-size:11px; padding:0 6px; }
  .jobs { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .quests { grid-template-columns:minmax(0,1fr); }
  .stage { aspect-ratio:auto; min-height:540px; }
  .picks { left:4%; right:4%; width:auto; top:4%; }
  .profile-copy { padding:24px 22px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation:none !important; transition:none !important; } }

/* ------------------------------------------------ 해·달 권역 */
.realm-tabs { display:flex; justify-content:center; gap:10px; margin:-18px 0 26px; }
.realm-tabs button { padding:8px 20px; border:1px solid rgba(233,194,122,.6); border-radius:30px; background:rgba(20,15,46,.6); color:#f3ebdb; font:600 14px var(--sans); }
.realm-tabs button[aria-pressed=true] { background:var(--gold); color:#2a1650; border-color:var(--gold); }
.map[data-show=sun] li[data-realm=moon], .map[data-show=moon] li[data-realm=sun] { opacity:.18; filter:grayscale(1); pointer-events:none; }
.tokens li { transition:opacity .3s, filter .3s; }
.map::before { content:''; position:absolute; inset:0 50% 0 0; z-index:0; pointer-events:none; background:linear-gradient(90deg, rgba(60,90,200,.22), transparent); }
.map::after { content:''; position:absolute; inset:0 0 0 50%; z-index:0; pointer-events:none; background:linear-gradient(270deg, rgba(255,150,40,.2), transparent); }
.tokens { z-index:1; }
.q-realm { display:inline-block; margin-bottom:6px; padding:1px 10px; border-radius:20px; font:700 11.5px var(--sans); background:#e9dcff; color:#4b1d8f; }
.quest[data-realm=해] .q-realm { background:#ffe2b8; color:#9a4a0c; }
.quest[data-realm=달] .q-realm { background:#d9e4ff; color:#1f3a8a; }

/* Selected 2D cover and illustrated Haeon map */
.hero { min-height:760px; text-align:left; }
.hero-kv { background:linear-gradient(100deg,rgba(14,15,36,.95),rgba(31,21,59,.73)),url(/images/zodiac-world/haeon-map.svg) center/cover; image-rendering:auto; animation:none; }
.hero-kv::after { background:radial-gradient(circle at 66% 45%,rgba(111,58,133,.3),transparent 50%),linear-gradient(180deg,rgba(20,15,46,.35),transparent 70%,rgba(20,15,46,.85)); }
.hero-inner { display:grid; grid-template-columns:minmax(0,1fr) minmax(300px,420px); align-items:center; gap:clamp(30px,6vw,100px); width:min(1180px,calc(100% - 48px)); margin:0 auto; padding:120px 0 110px; }
.hero-copy { max-width:630px; }
.hero-eyebrow { margin:0 0 20px; color:var(--gold); font:700 14px var(--sans); letter-spacing:.15em; }
.hero-copy h1 { margin:0; font:800 clamp(42px,5.2vw,78px)/1.2 var(--serif); letter-spacing:-.05em; text-shadow:0 6px 24px #140f2e; }
.hero-copy h1 span { color:var(--gold); }
.hero-sub { max-width:550px; margin:25px 0 18px; font-size:clamp(18px,1.7vw,23px); line-height:1.65; }
.hero .ribbon { display:block; width:fit-content; max-width:100%; padding:11px 22px; clip-path:none; border:1px solid var(--gold); border-radius:2px; font-size:clamp(14px,1.2vw,17px); line-height:1.5; }
.hero .ribbon::before { display:none; }
.hero-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:30px; }
.hero-actions a { padding:12px 21px; border:1px solid var(--gold); border-radius:4px; font:700 15px var(--sans); text-decoration:none; color:#fff; background:rgba(20,15,46,.7); }
.hero-actions a:first-child { color:#271733; background:var(--gold); }
.hero-actions a:hover { filter:brightness(1.14); }
.hero-cover { display:block; width:100%; max-width:420px; justify-self:center; border:2px solid #f5ddb0; border-radius:6px; overflow:hidden; box-shadow:0 0 0 8px rgba(20,15,46,.65),0 30px 65px rgba(0,0,0,.55); }
.hero-cover img { display:block; width:100%; height:auto; aspect-ratio:2/3; object-fit:cover; }
.map-slide { image-rendering:auto; }
.map-lead { max-width:720px; margin:-22px auto 38px; text-align:center; color:#e5d9ef; }
.map-scroll { max-width:1180px; margin:0 auto; overflow-x:auto; padding:7px 7px 23px; }
.map-scroll:focus-visible { outline:3px solid var(--gold); }
.map { width:100%; min-width:850px; margin:0; aspect-ratio:1536/850; }
.map-art { background-image:url(/images/zodiac-world/haeon-map.svg); image-rendering:auto; }
.map-art::after { background:linear-gradient(180deg,rgba(15,20,38,.02),rgba(15,20,38,.08)); }
.map::before,.map::after { opacity:.35; }
.tokens li { min-width:94px; }
.token { min-width:94px; }
.token img { width:clamp(64px,6.5vw,90px); height:clamp(64px,6.5vw,90px); object-fit:cover; object-position:50% 21%; image-rendering:auto; }
.token span { min-width:90px; padding:4px 8px; border-radius:6px; text-align:center; line-height:1.25; }
.token span small { display:block; margin-top:2px; font-size:10px; font-weight:500; color:#eadbb7; }
.token[aria-pressed=true] span small { color:#56340f; }
.cast-index { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:8px; max-width:1180px; margin:18px auto 0; }
.cast-index button { padding:9px 7px; border:1px solid rgba(233,194,122,.4); border-radius:4px; background:rgba(20,15,46,.55); color:#f7ecd6; text-align:center; line-height:1.35; }
.cast-index button span { display:block; font-weight:700; }
.cast-index button small { display:block; margin-top:2px; color:#cab9d8; font-size:11px; }
.cast-index button[aria-pressed=true] { background:var(--gold); color:#241638; }
.cast-index button[aria-pressed=true] small { color:#573c41; }
.cast-index[data-show=sun] button[data-realm=moon],.cast-index[data-show=moon] button[data-realm=sun] { display:none; }
.profile { grid-template-columns:minmax(300px,460px) minmax(0,1fr); }
.profile-art img { height:660px; object-fit:cover; object-position:50% 22%; }
.pf-intro { margin:0 0 22px; font:500 17px/1.75 var(--serif); color:#433654; }
.profile-copy dl { grid-template-columns:74px 1fr; }
.profile-copy dt { height:auto; min-height:24px; padding:2px 3px; line-height:1.4; }
.team img,.talk-face img { object-fit:cover; object-position:50% 22%; image-rendering:auto; }
@media (max-width:900px) {
  .hero-inner { grid-template-columns:minmax(0,1fr) minmax(230px,330px); }
  .cast-index { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .profile { grid-template-columns:minmax(0,1fr); }
  .profile-art img { height:520px; object-position:50% 25%; }
}
@media (max-width:640px) {
  .hero { min-height:auto; }
  .hero-kv { background-size:cover; }
  .hero-inner { display:flex; flex-direction:column-reverse; align-items:stretch; gap:34px; width:calc(100% - 40px); padding:84px 0 106px; }
  .hero-cover { max-width:min(300px,76vw); }
  .hero-copy h1 { font-size:clamp(38px,10vw,56px); }
  .hero-sub { margin-top:16px; }
  .hero-actions a { flex:1; text-align:center; padding:11px 10px; font-size:13px; }
  .map-scroll { margin:0 -16px; padding:7px 16px 22px; }
  .map { height:auto; }
  .cast-index { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .cast-index button { padding:8px 4px; font-size:12px; }
  .cast-index button small { font-size:10px; }
  .profile-art img { height:460px; }
  .profile-copy dl { grid-template-columns:68px 1fr; }
}
.stores.platform-group { margin-top:24px; }