/* 홈페이지 공통(home·guide·pricing·board·legal). 게임 화면(index.html)은 이 파일을 쓰지 않는다. */
:root{
  --bg:#081222; --bg2:#0d1a30; --card:#12223d; --card2:#172a4a; --line:rgba(255,255,255,.09);
  --text:#eaf3ff; --muted:#9fb2cc; --gold:#ffd479; --gold2:#ffb63c; --lime:#8dffb4; --red:#ff7a7a;
  --r:16px; --w:1160px; --nav:64px;
}
*{box-sizing:border-box; margin:0; padding:0}
html{scroll-behavior:smooth; scroll-padding-top:calc(var(--nav) + 12px)}
body{background:var(--bg); color:var(--text); min-height:100vh; display:flex; flex-direction:column;
  font:500 16px/1.65 "Pretendard Variable",Pretendard,-apple-system,"Apple SD Gothic Neo",system-ui,sans-serif;
  -webkit-font-smoothing:antialiased; word-break:keep-all; overflow-x:hidden}
main{flex:1}
a{color:inherit; text-decoration:none}
img,video{max-width:100%; display:block}
button,input,textarea,select{font:inherit; color:inherit}
.wrap{width:100%; max-width:var(--w); margin:0 auto; padding:0 20px}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0)}
.pixel{font-family:"Galmuri11","Galmuri9",monospace; letter-spacing:.06em}

/* ── 상단 메뉴 ── */
.nav{position:fixed; inset:0 0 auto; height:var(--nav); z-index:50; transition:background .3s, box-shadow .3s}
.nav.solid,.nav.open{background:rgba(8,18,34,.92); backdrop-filter:blur(12px); box-shadow:0 1px 0 var(--line)}
.nav .wrap{height:100%; display:flex; align-items:center; gap:28px}
.nav .home{display:flex; align-items:center; gap:10px; min-height:44px; font-weight:800; font-size:18px; flex-shrink:0}
.nav .home img{width:34px; height:34px}
.nav .home b{color:var(--gold)}
.nav ul{display:flex; gap:4px; list-style:none; margin-left:auto}
.nav ul a{display:block; padding:8px 14px; border-radius:999px; font-size:15px; font-weight:600; color:#d5e2f5}
.nav ul a:hover{background:rgba(255,255,255,.07); color:#fff}
.nav ul a.on{color:var(--gold)}
.nav .start{flex-shrink:0}
.nav .burger{display:none; margin-left:auto; background:none; border:0; width:44px; height:44px; cursor:pointer}
.nav .burger i,.nav .burger i::before,.nav .burger i::after{display:block; width:22px; height:2px; background:#fff;
  margin:0 auto; position:relative; transition:transform .25s}
.nav .burger i::before,.nav .burger i::after{content:""; position:absolute; left:0}
.nav .burger i::before{top:-7px} .nav .burger i::after{top:7px}
.nav.open .burger i{background:transparent}
.nav.open .burger i::before{transform:translateY(7px) rotate(45deg)}
.nav.open .burger i::after{transform:translateY(-7px) rotate(-45deg)}
@media (max-width:860px){
  .nav .burger{display:block}
  .nav ul,.nav .start{display:none}
  .nav.open ul{display:flex; flex-direction:column; position:absolute; top:var(--nav); left:0; right:0;
    background:rgba(8,18,34,.97); padding:8px 16px 16px; gap:0; border-bottom:1px solid var(--line)}
  .nav.open ul a{padding:14px 12px; font-size:17px; border-radius:10px}
  .nav.open ul .mstart{display:block; margin-top:8px}
  .nav.open ul .mstart a{display:flex; background:linear-gradient(180deg,var(--gold),var(--gold2)); color:#2a1a00; justify-content:center}
}
.nav ul .mstart{display:none}

/* ── 버튼 ── */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; height:44px; padding:0 20px;
  border-radius:12px; border:1px solid var(--line); background:rgba(255,255,255,.06); font-weight:700;
  font-size:15px; cursor:pointer; transition:transform .15s, background .2s, box-shadow .2s; white-space:nowrap}
.btn:hover{background:rgba(255,255,255,.12)}
.btn:active{transform:translateY(1px)}
.btn.gold{background:linear-gradient(180deg,var(--gold),var(--gold2)); color:#2a1a00; border-color:transparent;
  box-shadow:0 6px 24px rgba(255,182,60,.28)}
.btn.gold:hover{box-shadow:0 8px 32px rgba(255,182,60,.45)}
.btn.big{height:56px; padding:0 28px; font-size:17px; border-radius:14px}
.btn:disabled{opacity:.5; cursor:not-allowed}
.btn:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--gold); outline-offset:2px}

/* ── 공통 섹션 ── */
.sec{padding:96px 0}
.sec.alt{background:var(--bg2)}
.eyebrow{display:inline-block; color:var(--gold); font-size:13px; margin-bottom:12px}
.h2{font-size:clamp(28px,4vw,42px); line-height:1.25; font-weight:800; letter-spacing:-.02em}
.lead{color:var(--muted); font-size:clamp(16px,1.8vw,18px); margin-top:14px; max-width:640px}
.center{text-align:center} .center .lead{margin-left:auto; margin-right:auto}
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:28px}
.grid{display:grid; gap:20px}
.g2{grid-template-columns:repeat(2,1fr)} .g3{grid-template-columns:repeat(3,1fr)} .g4{grid-template-columns:repeat(4,1fr)}
@media (max-width:900px){.g3,.g4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.g2,.g3,.g4{grid-template-columns:1fr} .sec{padding:64px 0}}
.shot{border-radius:12px; border:1px solid var(--line); box-shadow:0 20px 50px rgba(0,0,0,.45); width:100%}
.tag{display:inline-block; font-size:12px; font-weight:700; padding:3px 10px; border-radius:999px;
  background:rgba(255,212,121,.14); color:var(--gold)}

/* 페이지 머리(홈 외) */
.phead{padding:calc(var(--nav) + 72px) 0 56px; background:
  linear-gradient(90deg,rgba(8,18,34,.85) 0%,rgba(8,18,34,.35) 60%,rgba(8,18,34,.15)),
  linear-gradient(180deg,rgba(8,18,34,.3) 0%,transparent 40%,var(--bg) 100%),
  var(--ph, url(assets/art/bg_menu.jpg)) center/cover}
.phead h1{font-size:clamp(30px,4.5vw,46px); font-weight:800; letter-spacing:-.02em}
.phead p{color:var(--muted); margin-top:10px}

/* 스크롤하면 떠오르기 — site.js 가 .in 을 붙인다 */
.rise{opacity:0; transform:translateY(28px); transition:opacity .8s ease, transform .8s ease}
.rise.in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){.rise{opacity:1; transform:none; transition:none} html{scroll-behavior:auto}}

/* ── 푸터 ── */
.foot{background:#050c18; border-top:1px solid var(--line); padding:48px 0 40px; color:var(--muted); font-size:13px}
.foot .top{display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap; align-items:center;
  padding-bottom:24px; border-bottom:1px solid var(--line); margin-bottom:24px}
.foot .brand{display:flex; align-items:center; gap:10px; min-height:44px; color:var(--text); font-weight:800; font-size:17px}
.foot .brand img{width:30px; height:30px}
.foot nav{display:flex; gap:20px; flex-wrap:wrap}
.foot nav a{color:#c9d6ea; font-weight:600}
.foot nav a.strong{color:#fff}
.foot nav a:hover{color:var(--gold)}
@media (max-width:860px){.foot nav{gap:0 4px; margin-left:-8px} .foot nav a{display:inline-flex; align-items:center; min-height:44px; padding:0 8px}}
.foot dl{display:flex; flex-wrap:wrap; gap:4px 18px; line-height:1.8}
.foot dl div{display:flex; gap:6px}
.foot dt{color:#6f829e}
.foot dd.none{color:#6f829e}
.foot .copy{margin-top:18px; color:#6f829e}

/* 폼 */
.field{display:flex; flex-direction:column; gap:6px; margin-bottom:16px}
.field label{font-size:14px; font-weight:700; color:#c9d6ea}
.input,.textarea{width:100%; background:#0a1628; border:1px solid var(--line); border-radius:10px;
  padding:12px 14px; font-size:15px}
.textarea{min-height:200px; resize:vertical; line-height:1.6}
.input:focus,.textarea:focus{border-color:rgba(255,212,121,.5); outline:none}
.check{display:flex; align-items:center; gap:8px; font-size:14px; color:#c9d6ea; cursor:pointer}
.msg{font-size:14px; min-height:1.5em; color:var(--red)}
.msg.ok{color:var(--lime)}

/* ═════════ 톤 통일(2026-09-29) — 게임(/app)의 tone.css 와 같은 결 ═════════
   하늘 위 성(assets/art/bg_title.jpg) · 남색 판 + 금빛 가는 테 · 금 버튼(윗빛·아랫그늘) · 영문 머릿글 Cinzel.
   여백은 4의 배수. 본문 좌우 여백 = 데스크톱 24 · 모바일 16(게임 화면 가장자리 16 과 같은 선). */
:root{
  --bg:#060d1a; --bg2:#0a1528; --card:#10203a; --card2:#162a4a;
  --line:rgba(255,255,255,.09); --line-gold:rgba(255,212,121,.28);
  --panel:linear-gradient(180deg, rgba(20,36,62,.92), rgba(9,17,32,.95));
  --shadow:0 16px 40px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.05);
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px;
  --edge:24px; --nav:64px;
  --font-display:"Cinzel","Times New Roman",serif;
}
@media (max-width:620px){ :root{--edge:16px} }
.wrap{padding:0 var(--edge)}

/* 영문 머릿글 */
.eyebrow,.eyebrow.pixel{font-family:var(--font-display); font-weight:700; font-size:13px; letter-spacing:.32em;
  color:var(--gold); margin-bottom:var(--s3)}
.eyebrow::before,.eyebrow::after{content:"◆"; font-size:8px; vertical-align:2px; margin:0 10px; opacity:.7}

/* 버튼 */
.btn{border-radius:var(--r-md,12px); background:rgba(9,18,34,.74); border:1px solid rgba(255,255,255,.14)}
.btn:hover{background:rgba(24,42,70,.86); border-color:var(--line-gold)}
.btn.gold{color:#1d1405; border:0;
  background:linear-gradient(180deg,#ffe6a6 0%,#ffcd5c 48%,#f2a93a 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7), inset 0 -2px 0 rgba(140,86,12,.45), 0 8px 24px rgba(255,170,50,.3)}
.btn.gold:hover{filter:brightness(1.05); box-shadow:inset 0 1px 0 rgba(255,255,255,.7), inset 0 -2px 0 rgba(140,86,12,.45), 0 10px 32px rgba(255,170,50,.45)}
.btn.big{height:56px; padding:0 var(--s6); border-radius:14px}

/* 판(카드 · 장면 · 단계 · 요금 · 자주 묻는 질문) — 남색 판 + 금빛 가는 테 */
.card,.scene,.steps li,.lane,.faq details,.reply,.tabs:not(nav){background:var(--panel); border:1px solid var(--line-gold); box-shadow:var(--shadow)}
.card{padding:var(--s6)}
.scene:hover,.card:hover{border-color:rgba(255,212,121,.5)}
.grid{gap:var(--s5)}

/* 섹션 */
.sec{padding:96px 0}
.sec.alt{background:linear-gradient(180deg, rgba(14,28,50,.7), rgba(8,16,30,.7)), var(--bg);
  border-top:1px solid var(--line-gold); border-bottom:1px solid var(--line-gold)}
@media (max-width:620px){.sec{padding:64px 0}}

/* 상단 메뉴 — 남색 + 금빛 아랫줄, 오른쪽 끝 '게임 시작' */
.nav.solid,.nav.open{background:rgba(6,13,26,.9); box-shadow:0 1px 0 var(--line-gold)}
.nav .wrap{gap:var(--s5)}
.nav .home b{font-family:var(--font-display); letter-spacing:.12em}
.nav .start{height:40px; padding:0 var(--s4); font-size:14px}
.nav ul{gap:var(--s1)}
.nav ul a.on{color:var(--gold); background:rgba(255,212,121,.1)}

/* 페이지 머리 — 첫 화면과 같은 하늘 성 */
.phead{padding:calc(var(--nav) + 72px) 0 var(--s7); position:relative; border-bottom:1px solid var(--line-gold);
  background:
    linear-gradient(90deg, rgba(6,13,26,.9) 0%, rgba(6,13,26,.55) 55%, rgba(6,13,26,.25) 100%),
    linear-gradient(180deg, rgba(6,13,26,.35) 0%, transparent 40%, rgba(6,13,26,.85) 100%),
    url(assets/art/bg_title.jpg) 70% 38%/cover}
.phead h1{text-shadow:0 3px 20px rgba(0,0,0,.6)}

/* 마지막 띠 · 안내 페이지 끝 CTA */
.band,section.cta{background:linear-gradient(180deg, rgba(6,13,26,.72), rgba(6,13,26,.92)), url(assets/art/bg_title.jpg) center 42%/cover !important;
  border-top:1px solid var(--line-gold)}

/* 푸터 */
.foot{background:#040914; border-top:1px solid var(--line-gold)}

/* ── 첫 화면 히어로(home) — 하늘 위 성 + 은은한 움직임(게임 첫 화면과 같은 배경) ── */
.hero .sky{position:absolute; inset:0; z-index:-2; overflow:hidden; background:#0a1426}
.hero .sky i{position:absolute; inset:0; display:block; pointer-events:none}
.hero .sky .img{inset:-3%; background:url(assets/art/bg_title.jpg) 62% 40%/cover no-repeat;
  animation:kb 48s ease-in-out infinite alternate; will-change:transform}
.hero .sky .rays{mix-blend-mode:screen; opacity:.4; transform-origin:72% 0%;
  background:repeating-conic-gradient(from 198deg at 72% -8%, rgba(255,214,140,0) 0deg, rgba(255,214,140,.1) 3deg,
    rgba(255,214,140,0) 7deg, rgba(255,214,140,0) 13deg);
  -webkit-mask:radial-gradient(90% 80% at 72% 0%, #000, rgba(0,0,0,.45) 45%, transparent 75%);
          mask:radial-gradient(90% 80% at 72% 0%, #000, rgba(0,0,0,.45) 45%, transparent 75%);
  animation:rays 11s ease-in-out infinite}
.hero .sky .mist{top:auto; height:46%; opacity:.55; mix-blend-mode:screen; background-size:140% 100%;
  background-image:radial-gradient(40% 60% at 20% 80%, rgba(210,225,255,.22), transparent 70%),
    radial-gradient(45% 55% at 70% 90%, rgba(255,226,180,.18), transparent 70%);
  animation:mist 38s linear infinite alternate}
.hero .sky .motes{background-image:
    radial-gradient(2px 2px at 12% 22%, rgba(255,236,180,.9), transparent 60%),
    radial-gradient(1.5px 1.5px at 28% 12%, rgba(255,255,255,.8), transparent 60%),
    radial-gradient(2px 2px at 44% 30%, rgba(255,226,160,.85), transparent 60%),
    radial-gradient(1.5px 1.5px at 58% 16%, rgba(255,255,255,.8), transparent 60%),
    radial-gradient(2px 2px at 83% 34%, rgba(255,236,180,.8), transparent 60%);
  animation:twinkle 5.5s ease-in-out infinite}
@keyframes kb{from{transform:scale(1)}to{transform:scale(1.06) translate3d(-1.2%,-.8%,0)}}
@keyframes rays{0%,100%{opacity:.22; transform:rotate(-1.2deg)}50%{opacity:.48; transform:rotate(1.2deg)}}
@keyframes mist{from{background-position:0% 0}to{background-position:100% 0}}
@keyframes twinkle{0%,100%{opacity:.35}50%{opacity:1}}
@media (prefers-reduced-motion:reduce){.hero .sky i{animation:none!important}}
.hero .logo{filter:drop-shadow(0 0 28px rgba(255,200,90,.35)) drop-shadow(0 10px 22px rgba(0,0,0,.6))}
.hero .cta{gap:var(--s3)}
.hero .cta .btn.gold::after{content:"›"; font-size:1.3em; line-height:1; margin-top:-2px}

/* 크게 보기(site.js zoom) */
.zoomable{cursor:zoom-in}
.zoom{border:0; padding:0; background:transparent; max-width:none; max-height:none; margin:auto; overflow:visible}
.zoom::backdrop{background:rgba(3,8,16,.9)}
.zoom img,.zoom video{display:block; max-width:96vw; max-height:90vh; border-radius:12px; box-shadow:0 20px 60px rgba(0,0,0,.6)}
.zoom .x{position:fixed; top:16px; right:16px; height:44px; padding:0 18px; border-radius:12px; border:1px solid var(--line);
  background:rgba(8,18,34,.85); color:var(--text); font:inherit; font-weight:700; cursor:pointer}
/* 운영 콘솔에서 설정한 공개 서비스 공지 */
.site-announcement{position:relative;z-index:4;margin:84px auto 16px;max-width:1100px;padding:16px 24px;border:1px solid rgba(125,195,164,.28);border-radius:10px;background:#173c32;color:#d9efe4;font-size:14px;line-height:1.8;white-space:pre-wrap}