/* 별의 계승자 홈페이지 */
:root { --ink:#0b1020; --ink-2:#121a33; --panel:rgba(18,26,51,.7); --line:rgba(255,255,255,.12); --cream:#f4efe6; --dim:#a9b0c2; --gold:#f5c451; --gold-2:#ffd976; --dia:#7fd8ff; --exp:#8be07a; --coral:#ff8a6b; --font:'Noto Sans KR',system-ui,sans-serif; --display:'Gowun Batang',serif; --ease:cubic-bezier(.2,.8,.2,1); --max:1120px; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--ink); color:var(--cream); font-family:var(--font); line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden; }
a { color:inherit; text-decoration:none; }
img { max-width:100%; display:block; }
.display { font-family:var(--display); letter-spacing:-.01em; }
.muted { color:var(--dim); }
.eyebrow { font-size:12px; letter-spacing:.24em; text-transform:uppercase; color:var(--gold); font-weight:800; }
.skip { position:absolute; left:-999px; top:8px; background:var(--gold); color:#000; padding:8px 12px; border-radius:8px; z-index:100; } .skip:focus { left:8px; }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:46px; padding:0 22px; border-radius:14px; font-weight:800; font-size:15px; border:1px solid var(--line); background:rgba(255,255,255,.08); transition:transform .15s var(--ease), background .2s, box-shadow .2s; cursor:pointer; color:var(--cream); font-family:inherit; }
.btn:hover { transform:translateY(-1px); background:rgba(255,255,255,.14); } .btn:active { transform:scale(.98); }
.btn.primary { background:linear-gradient(180deg,var(--gold-2),var(--gold)); color:#3a2a05; border-color:transparent; box-shadow:0 10px 30px rgba(245,196,81,.35); } .btn.primary:hover { box-shadow:0 14px 36px rgba(245,196,81,.5); }
.btn.ghost { background:transparent; } .btn.small { min-height:38px; padding:0 14px; font-size:13px; border-radius:11px; } .btn.big { min-height:54px; padding:0 28px; font-size:16px; } .btn.block { width:100%; }

/* 내비 */
.nav { position:fixed; top:0; left:0; right:0; z-index:50; display:flex; align-items:center; gap:18px; padding:12px max(20px,calc((100% - var(--max))/2)); background:rgba(11,16,32,.55); backdrop-filter:blur(14px); border-bottom:1px solid transparent; transition:background .3s, border-color .3s; }
.nav.solid { background:rgba(11,16,32,.9); border-color:var(--line); }
.brand { display:flex; align-items:center; gap:10px; font-family:var(--display); font-size:20px; font-weight:700; } .brand img { width:34px; height:34px; border-radius:9px; }
.links { display:flex; gap:22px; margin-left:auto; font-size:14px; font-weight:600; color:var(--dim); } .links a:hover { color:var(--cream); }
.nav-cta { display:flex; gap:8px; }
.burger { display:none; width:44px; height:44px; border-radius:10px; background:rgba(255,255,255,.08); border:1px solid var(--line); flex-direction:column; justify-content:center; gap:5px; align-items:center; cursor:pointer; } .burger span { width:20px; height:2px; background:var(--cream); border-radius:2px; }
@media (max-width:860px) { .links, .nav-cta { display:none; } .burger { display:flex; margin-left:auto; } .nav.open .links { display:flex; position:absolute; top:100%; left:0; right:0; flex-direction:column; gap:0; background:rgba(11,16,32,.97); border-bottom:1px solid var(--line); } .nav.open .links a { padding:14px 20px; border-top:1px solid var(--line); } .nav.open .nav-cta { display:flex; position:absolute; top:calc(100% + 300px); left:20px; right:20px; } }

/* 히어로 */
.hero { position:relative; min-height:100svh; display:flex; align-items:flex-end; overflow:hidden; background:radial-gradient(120% 70% at 50% 0%,#1c2a5a 0%,#0b1020 55%,#05070f 100%); }
#hero-3d { position:absolute; inset:0; width:100%; height:100%; display:block; }
.hero-fade { position:absolute; inset:0; background:linear-gradient(180deg,rgba(11,16,32,0) 35%,rgba(11,16,32,.75) 70%,var(--ink) 100%); pointer-events:none; }
.hero-inner { position:relative; z-index:2; width:100%; max-width:var(--max); margin:0 auto; padding:120px 20px 90px; }
.hero h1 { font-size:clamp(40px,7vw,78px); line-height:1.02; margin:12px 0 18px; text-shadow:0 10px 40px rgba(0,0,0,.6); } .hero h1 span { color:var(--gold); }
.lead { max-width:640px; font-size:clamp(15px,1.6vw,18px); color:#dfe3ee; margin:0 0 24px; }
.hero-cta { display:flex; flex-wrap:wrap; gap:12px; margin-bottom:20px; }
.stores { display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.store { display:inline-flex; align-items:center; gap:10px; padding:8px 14px 8px 10px; border-radius:12px; background:#000; border:1px solid rgba(255,255,255,.2); } .store svg { width:26px; height:26px; } .store span { display:flex; flex-direction:column; line-height:1.1; font-weight:800; font-size:15px; } .store small { font-size:10px; color:var(--dim); font-weight:600; }
.reg-count { padding:8px 14px; border-radius:12px; background:rgba(245,196,81,.12); border:1px solid rgba(245,196,81,.35); color:var(--gold); font-weight:800; font-size:13px; }
.hint { font-size:12px; color:var(--dim); margin:18px 0 0; }
.scroll-cue { position:absolute; left:50%; bottom:18px; transform:translateX(-50%); font-size:11px; letter-spacing:.3em; color:var(--dim); animation:cue 2s ease-in-out infinite; } @keyframes cue { 50% { transform:translate(-50%,6px); opacity:.5; } }

/* 섹션 */
.section { padding:96px 20px; max-width:var(--max); margin:0 auto; }
.section.alt { max-width:none; background:linear-gradient(180deg,var(--ink-2),var(--ink)); } .section.alt > * { max-width:var(--max); margin-left:auto; margin-right:auto; }
.sec-head { text-align:center; margin-bottom:40px; } .sec-head h2 { font-size:clamp(28px,4vw,42px); margin:8px 0 10px; } .sec-head p { color:var(--dim); max-width:640px; margin:0 auto; }
.cards { display:grid; gap:18px; } .cards.three { grid-template-columns:repeat(3,1fr); } .cards.two { grid-template-columns:repeat(2,1fr); }
@media (max-width:860px) { .cards.three, .cards.two { grid-template-columns:1fr; } .section { padding:56px 20px; } .sec-head { margin-bottom:24px; } }
.card { padding:26px; border-radius:22px; background:var(--panel); border:1px solid var(--line); box-shadow:0 20px 60px rgba(0,0,0,.35); transition:transform .3s var(--ease), border-color .3s; }
.card:hover { transform:translateY(-4px); border-color:rgba(245,196,81,.35); }
.card h3 { margin:14px 0 8px; font-size:20px; } .card h3 small { font-size:11px; letter-spacing:.2em; color:var(--dim); margin-left:6px; } .card p { margin:0; color:#cfd4e0; font-size:15px; }
.card .ic { width:56px; height:56px; border-radius:16px; display:grid; place-items:center; background:rgba(255,255,255,.06); } .card .ic svg { width:34px; height:34px; }
.stats { display:grid; grid-template-columns:repeat(6,1fr); gap:10px; margin-top:28px; } .stats div { text-align:center; padding:16px 8px; border-radius:16px; background:rgba(255,255,255,.04); border:1px solid var(--line); } .stats b { display:block; font-size:28px; font-family:var(--display); color:var(--gold); } .stats span { font-size:12px; color:var(--dim); }
@media (max-width:860px) { .stats { grid-template-columns:repeat(3,1fr); } }
.hero-art { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.9; display:none; }
@media (max-width:767px) { .hero-art { display:block; object-position:62% 30%; opacity:.55; } #hero-3d { display:none; } .hero-fade { background:linear-gradient(180deg,rgba(11,16,32,.2) 0%,rgba(11,16,32,.7) 45%,var(--ink) 100%); } }
.cls-art { height:220px; border-radius:16px; background:radial-gradient(60% 60% at 50% 70%,rgba(245,196,81,.18),transparent), rgba(0,0,0,.25); display:grid; place-items:center; overflow:hidden; } .cls-art img { width:100%; height:100%; object-fit:contain; display:block; filter:drop-shadow(0 12px 20px rgba(0,0,0,.5)); transition:transform .4s var(--ease); } .card.cls:hover .cls-art img { transform:scale(1.06) translateY(-4px); }
.card.cls ul { display:flex; flex-wrap:wrap; gap:6px; padding:0; margin:14px 0 0; list-style:none; } .card.cls li { padding:5px 10px; border-radius:999px; background:rgba(255,255,255,.08); font-size:12px; font-weight:700; }
.card.warrior:hover { border-color:rgba(217,74,61,.5); } .card.archer:hover { border-color:rgba(61,138,90,.6); } .card.mage:hover { border-color:rgba(79,140,255,.6); }
.grid-sys { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; } .sys { padding:18px; border-radius:16px; background:var(--panel); border:1px solid var(--line); } .sys b { display:block; margin-bottom:6px; color:var(--gold); } .sys span { font-size:13px; color:#cfd4e0; }
@media (max-width:860px) { .grid-sys { grid-template-columns:repeat(2,1fr); } }
.item-strip { display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin-top:28px; padding:18px; border-radius:20px; background:rgba(0,0,0,.3); border:1px solid var(--line); } .item-strip .it { width:64px; height:64px; border-radius:14px; display:grid; place-items:center; background:rgba(255,255,255,.05); border:1px solid var(--line); } .item-strip .it svg { width:48px; height:48px; }
.item-strip .it.r2 { border-color:#4f8cff; } .item-strip .it.r3 { border-color:#b48cf0; box-shadow:inset 0 0 12px rgba(180,140,240,.3); } .item-strip .it.r4 { border-color:#f5a623; box-shadow:inset 0 0 14px rgba(245,166,35,.35); } .item-strip .it.r5 { border-color:#ff5c8a; box-shadow:0 0 18px rgba(255,92,138,.45), inset 0 0 14px rgba(255,92,138,.35); }
.monster-stage { position:relative; height:320px; border-radius:24px; overflow:hidden; background:linear-gradient(180deg,#132a44,#0b1a2c); border:1px solid var(--line); } #mon-3d { width:100%; height:100%; display:block; }
.mon-labels { position:absolute; left:0; right:0; bottom:10px; display:flex; justify-content:space-around; pointer-events:none; } .mon-labels span { font-size:12px; font-weight:800; text-shadow:0 2px 6px rgba(0,0,0,.8); padding:4px 8px; border-radius:8px; background:rgba(0,0,0,.35); }
.zones { display:grid; grid-template-columns:repeat(6,1fr); gap:8px; margin-top:16px; } .zones div { display:flex; align-items:center; gap:8px; padding:10px 12px; border-radius:12px; background:rgba(255,255,255,.04); border:1px solid var(--line); font-size:13px; font-weight:700; } .zones i { width:12px; height:12px; border-radius:50%; background:var(--c); box-shadow:0 0 10px var(--c); } .zones small { color:var(--dim); font-weight:500; margin-left:auto; }
@media (max-width:860px) { .zones { grid-template-columns:repeat(2,1fr); } }
.news time { font-size:12px; color:var(--gold); font-weight:800; letter-spacing:.1em; }
.register { padding-top:40px; }
.reg-box { display:grid; grid-template-columns:1.1fr 1fr; gap:28px; padding:36px; border-radius:28px; background:linear-gradient(135deg,rgba(245,196,81,.14),rgba(127,216,255,.08)), var(--panel); border:1px solid rgba(245,196,81,.35); box-shadow:0 30px 80px rgba(0,0,0,.45); }
@media (max-width:860px) { .reg-box { grid-template-columns:1fr; padding:24px; } }
.rewards { list-style:none; padding:0; margin:18px 0; display:flex; flex-direction:column; gap:10px; } .rewards li { display:flex; justify-content:space-between; gap:12px; padding:12px 14px; border-radius:14px; background:rgba(0,0,0,.25); border:1px solid var(--line); } .rewards b { color:var(--gold); } .rewards span { color:var(--dim); font-size:13px; }
.reg-form { display:flex; flex-direction:column; gap:12px; } .reg-form label { display:flex; flex-direction:column; gap:6px; font-size:13px; font-weight:700; color:var(--dim); }
.reg-form input:not([type=radio]):not([type=checkbox]) { padding:13px 14px; border-radius:12px; border:1px solid var(--line); background:rgba(0,0,0,.3); color:var(--cream); font:inherit; font-size:15px; min-height:46px; } .reg-form input:focus { outline:2px solid var(--gold); border-color:transparent; }
.reg-form fieldset { border:1px solid var(--line); border-radius:12px; padding:10px 12px; display:flex; gap:14px; flex-wrap:wrap; } .reg-form legend { font-size:12px; color:var(--dim); padding:0 6px; }
.chk { flex-direction:row !important; align-items:center; gap:8px !important; font-size:14px !important; color:var(--cream) !important; min-height:44px; cursor:pointer; } .chk input { width:20px; height:20px; accent-color:var(--gold); }
.form-msg { min-height:20px; font-size:13px; color:var(--exp); } .form-msg.err { color:var(--coral); }
.card.game { display:grid; grid-template-columns:120px 1fr; gap:18px; align-items:center; } .card.game .thumb { width:120px; height:120px; border-radius:22px; display:grid; place-items:center; } .thumb img { width:84px; height:84px; } .thumb.lh { background:linear-gradient(180deg,#1b4b6e,#0b1d33); } .thumb.fg { background:#5b8c5a; } .tag { display:inline-block; margin-top:10px; padding:4px 10px; border-radius:999px; background:rgba(255,255,255,.08); font-size:12px; font-weight:700; }
@media (max-width:520px) { .card.game { grid-template-columns:1fr; } }
.footer { border-top:1px solid var(--line); padding:40px 20px 60px; background:#070b18; } .foot-inner { max-width:var(--max); margin:0 auto; display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap; font-size:13px; } .foot-inner p { margin:4px 0; } .foot-inner nav { display:flex; gap:16px; flex-wrap:wrap; color:var(--dim); }
/* 등장 애니메이션 */
.reveal { opacity:0; transform:translateY(18px); transition:opacity .7s var(--ease), transform .7s var(--ease); } .reveal.in { opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce) { .reveal { opacity:1; transform:none; transition:none; } .scroll-cue { animation:none; } html { scroll-behavior:auto; } }

/* 전직 */
.jobs { display:flex; flex-direction:column; gap:14px; }
.job-row { display:grid; grid-template-columns:64px repeat(6,1fr); gap:8px; align-items:end; padding:12px; border-radius:20px; background:var(--panel); border:1px solid var(--line); overflow-x:auto; }
.job-row > b { font-family:var(--display); font-size:18px; color:var(--gold); align-self:center; }
.job-cell { margin:0; text-align:center; min-width:84px; } .job-cell img { width:100%; aspect-ratio:1; object-fit:contain; filter:drop-shadow(0 8px 14px rgba(0,0,0,.5)); }
.job-cell figcaption { display:flex; flex-direction:column; line-height:1.2; } .job-cell span { font-size:12px; font-weight:800; } .job-cell small { font-size:10px; color:var(--dim); }
.job-cell.r5 span { color:var(--gold); } .job-cell.r4 span { color:var(--dia); }
.job-notes { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:16px; } .job-notes div { padding:14px 16px; border-radius:16px; background:rgba(255,255,255,.04); border:1px solid var(--line); font-size:13px; } .job-notes b { display:block; color:var(--gold); margin-bottom:4px; } .job-notes span { color:#cfd4e0; }
@media (max-width:860px) { .job-notes { grid-template-columns:1fr; } .job-row { grid-template-columns:48px repeat(6,84px); } .job-row > b { font-size:15px; } }
/* 도감 */
.bestiary { display:grid; grid-template-columns:repeat(5,1fr); gap:10px; margin-top:18px; }
.bestiary figure { margin:0; padding:8px; border-radius:16px; background:var(--panel); border:1px solid var(--line); text-align:center; transition:transform .3s var(--ease), border-color .3s; } .bestiary figure:hover { transform:translateY(-4px); border-color:rgba(127,216,255,.5); }
.bestiary figure.boss { border-color:rgba(217,74,61,.5); background:linear-gradient(180deg, rgba(217,74,61,.12), var(--panel)); }
.bestiary img { width:100%; aspect-ratio:1; object-fit:contain; } .bestiary figcaption { display:flex; flex-direction:column; line-height:1.2; margin-top:4px; } .bestiary span { font-size:12px; font-weight:800; } .bestiary small { font-size:10px; color:var(--dim); } .bestiary figure.boss small { color:#ff8a6b; }
@media (max-width:860px) { .bestiary { grid-template-columns:repeat(3,1fr); } } @media (max-width:520px) { .bestiary { grid-template-columns:repeat(2,1fr); } }