/* RigSoft Studio — 공통 스타일. 게임사 홈페이지 톤: 어두운 상단 + 그림 위주 */
:root{
  --bg:#0f1115; --bg2:#161a21; --surface:#1c212a; --line:#2a303b;
  --text:#f3f1ec; --muted:#a3a9b5; --accent:#f08a3c; --accent2:#ffb36b; --ink:#1a1206;
  --radius:16px;
  --font:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic","Noto Sans KR",Roboto,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{margin:0; background:var(--bg); color:var(--text); font-family:var(--font);
     font-size:16px; line-height:1.65; -webkit-font-smoothing:antialiased}
img{max-width:100%; display:block}
a{color:inherit}
.wrap{max-width:1200px; margin:0 auto; padding:0 24px}

/* ── 상단 바 ── */
.nav{position:fixed; inset:0 0 auto 0; z-index:50; height:68px;
     display:flex; align-items:center;
     background:linear-gradient(to bottom, rgba(10,12,16,.85), rgba(10,12,16,0));
     transition:background .25s}
.nav.solid{background:rgba(12,14,19,.96); box-shadow:0 1px 0 var(--line)}
.nav .wrap{display:flex; align-items:center; justify-content:space-between; width:100%}
.logo{display:flex; align-items:center; gap:10px; text-decoration:none}
.logo img{height:30px; width:auto}
.logo b{font-size:17px; letter-spacing:.14em; font-weight:800}
.logo span{font-size:11px; letter-spacing:.2em; color:var(--muted); font-weight:600}
.menu{display:flex; gap:28px}
.menu a{text-decoration:none; font-size:15px; font-weight:600; color:#e8e6e1; opacity:.85}
.menu a:hover{opacity:1; color:var(--accent2)}

/* ── 첫 화면 배너 ── */
.hero{position:relative; height:min(92vh,860px); min-height:560px; overflow:hidden; background:#000}
.slide{position:absolute; inset:0; opacity:0; transition:opacity 1s ease; pointer-events:none}
.slide.on{opacity:1; pointer-events:auto}
.slide > img.bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
                transform:scale(1.04); transition:transform 7s ease-out}
.slide.on > img.bg{transform:scale(1)}
.slide::after{content:""; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(8,10,14,.95) 0%, rgba(8,10,14,.7) 28%, rgba(8,10,14,.15) 55%, rgba(8,10,14,0) 70%),
             linear-gradient(to right, rgba(8,10,14,.55) 0%, rgba(8,10,14,0) 55%)}
.slide .copy{position:absolute; left:0; right:0; bottom:88px; z-index:2}
.slide .eyebrow{display:inline-block; font-size:13px; font-weight:700; letter-spacing:.12em;
                color:var(--accent2); margin-bottom:10px}
.slide h1{margin:0 0 8px; font-size:clamp(32px,5vw,56px); line-height:1.15; font-weight:800;
          text-shadow:0 2px 18px rgba(0,0,0,.5)}
.slide p{margin:0 0 22px; font-size:clamp(15px,1.6vw,19px); color:#e6e3dc; max-width:620px;
         text-shadow:0 1px 10px rgba(0,0,0,.6)}
.slide .gamelogo{width:min(420px,70vw); margin:0 0 10px; filter:drop-shadow(0 6px 18px rgba(0,0,0,.6))}
.dots{position:absolute; z-index:3; left:0; right:0; bottom:36px}
.dots .wrap{display:flex; gap:10px}
.dots button{width:36px; height:4px; border:0; padding:0; border-radius:2px; cursor:pointer;
             background:rgba(255,255,255,.35)}
.dots button.on{background:var(--accent)}

/* ── 버튼 ── */
.btns{display:flex; flex-wrap:wrap; gap:10px; align-items:center}
.btns .btn{min-height:48px}
.tm{flex-basis:100%; font-size:12px; color:#6f7682; margin:0}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px;
     padding:12px 22px; border-radius:10px; text-decoration:none; font-weight:700; font-size:15px;
     background:var(--accent); color:var(--ink); border:1px solid transparent;
     transition:transform .12s, background .12s}
.btn:hover{transform:translateY(-1px); background:var(--accent2)}
.btn.ghost{background:rgba(255,255,255,.08); color:var(--text); border-color:rgba(255,255,255,.25);
           backdrop-filter:blur(4px)}
.btn.ghost:hover{background:rgba(255,255,255,.16)}
/* 스토어 공식 배지: 규정상 원본 그대로, 높이만 맞춤 */
.store-badge{display:inline-block; line-height:0; border-radius:8px; transition:transform .12s, opacity .12s}
.store-badge:hover{transform:translateY(-1px); opacity:.9}
.store-badge img{height:48px; width:auto}
.btn.soon{background:rgba(255,255,255,.08); color:var(--muted); border-color:rgba(255,255,255,.18); cursor:default}
.btn.soon:hover{transform:none}

/* ── 섹션 ── */
section{padding:96px 0}
section.alt{background:var(--bg2)}
.sec-head{display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:32px}
.sec-head h2{margin:0; font-size:clamp(26px,3vw,36px); font-weight:800}
.sec-head .en{color:var(--muted); font-size:14px; font-weight:700; letter-spacing:.16em}
.lead{color:var(--muted); max-width:720px; margin:0}

/* ── 게임 카드 ── */
.games{display:grid; grid-template-columns:repeat(2,1fr); gap:24px}
.gcard{display:block; text-decoration:none; background:var(--surface); border-radius:var(--radius);
       overflow:hidden; border:1px solid var(--line); transition:transform .2s, border-color .2s}
.gcard:hover{transform:translateY(-4px); border-color:#3b4352}
.gcard .thumb{aspect-ratio:16/9; overflow:hidden; position:relative}
.gcard .thumb img{width:100%; height:100%; object-fit:cover; transition:transform .5s}
.gcard:hover .thumb img{transform:scale(1.04)}
.gcard .tag{position:absolute; top:14px; left:14px; padding:4px 12px; border-radius:999px;
            font-size:12.5px; font-weight:700; background:rgba(10,12,16,.75); backdrop-filter:blur(4px)}
.gcard .tag.live{color:#8ef0b0}
.gcard .tag.soon{color:var(--accent2)}
.gcard .body{display:flex; gap:16px; align-items:center; padding:20px 22px}
.gcard .icon{width:64px; height:64px; border-radius:14px; flex:none}
.gcard h3{margin:0; font-size:20px; font-weight:800}
.gcard .meta{margin:2px 0 0; color:var(--muted); font-size:14px}
.gcard .plat{margin-left:auto; color:var(--muted); font-size:13px; text-align:right; white-space:nowrap}

/* ── 회사 소개 ── */
.about{display:grid; grid-template-columns:1.1fr .9fr; gap:56px; align-items:center}
.about h3{font-size:clamp(24px,2.6vw,32px); line-height:1.35; margin:0 0 18px; font-weight:800}
.about h3 em{font-style:normal; color:var(--accent2)}
.about p{color:#cfd3db; margin:0 0 14px}
.about .en{color:var(--muted); font-size:14.5px}
.about .mark{background:#fdf1e7; border-radius:24px; padding:48px; display:flex; justify-content:center}
.about .mark img{width:min(260px,60%)}
.facts{display:flex; gap:28px; margin-top:28px; flex-wrap:wrap}
.facts div b{display:block; font-size:28px; font-weight:800; color:var(--text)}
.facts div span{color:var(--muted); font-size:13.5px}

/* ── 문의 ── */
.contacts{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.ccard{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:26px}
.ccard h4{margin:0 0 4px; font-size:17px}
.ccard p{margin:0 0 14px; color:var(--muted); font-size:14px}
.ccard a{color:var(--accent2); font-weight:700; overflow-wrap:anywhere; text-decoration:none}
.ccard a:hover{text-decoration:underline}

/* ── 게임 상세 ── */
.ghero{position:relative; height:min(78vh,720px); min-height:480px; overflow:hidden}
.ghero > img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.ghero::after{content:""; position:absolute; inset:0;
  background:linear-gradient(to top, var(--bg) 0%, rgba(15,17,21,.55) 35%, rgba(15,17,21,0) 65%)}
.ghero .copy{position:absolute; z-index:2; left:0; right:0; bottom:56px}
.ghero .head{display:flex; gap:18px; align-items:center; margin-bottom:18px}
.ghero .head img{width:84px; height:84px; border-radius:18px; box-shadow:0 6px 20px rgba(0,0,0,.45)}
.ghero h1{margin:0; font-size:clamp(30px,4.4vw,48px); font-weight:800; line-height:1.15}
.ghero .meta{margin:4px 0 0; color:#d9d6cf}
.feature{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:36px}
.feature div{background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:22px}
.feature b{display:block; font-size:16.5px; margin-bottom:6px}
.feature span{color:var(--muted); font-size:14.5px}

/* 스크린샷 가로 넘기기 */
.shots{display:flex; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:12px;
       scrollbar-width:thin; scrollbar-color:#3b4352 transparent}
.shots img{flex:none; scroll-snap-align:start; border-radius:12px; border:1px solid var(--line);
           cursor:zoom-in; background:#000}
.shots.land img{width:min(640px,82vw); aspect-ratio:16/9; object-fit:cover}
.shots.port img{width:min(270px,58vw); aspect-ratio:9/16; object-fit:cover}

/* 크게 보기 */
.lightbox{position:fixed; inset:0; z-index:100; background:rgba(0,0,0,.9); display:none;
          align-items:center; justify-content:center; padding:24px; cursor:zoom-out}
.lightbox.on{display:flex}
.lightbox img{max-width:100%; max-height:100%; border-radius:10px}

/* ── 푸터 ── */
footer{border-top:1px solid var(--line); padding:44px 0 56px; color:var(--muted); font-size:13.5px}
footer .wrap{display:flex; flex-wrap:wrap; justify-content:space-between; gap:18px 32px}
footer .links{display:flex; flex-wrap:wrap; gap:8px 22px}
footer a{color:var(--muted); text-decoration:none}
footer a:hover{color:var(--text)}
footer .brand{display:flex; align-items:center; gap:10px; color:var(--text); font-weight:800; letter-spacing:.12em}
footer .brand img{height:26px; width:auto}

/* 정책 문서 페이지 */
.doc-head{padding:120px 0 28px; background:var(--bg2); border-bottom:1px solid var(--line)}
.doc-head .wrap{max-width:820px}
.doc-head .crumb{margin:0 0 6px; font-size:13.5px; color:var(--muted)}
.doc-head .crumb a{color:var(--accent2); text-decoration:none}
.doc-head h1{margin:0; font-size:clamp(28px,4vw,40px); font-weight:800}
.doc-head .sub{margin:4px 0 22px; color:var(--muted)}
.doc-tabs{display:flex; flex-wrap:wrap; gap:8px}
.doc-tabs a{padding:7px 16px; border-radius:999px; border:1px solid var(--line); text-decoration:none;
            font-size:14px; font-weight:600; color:#d9dce2}
.doc-tabs a:hover{border-color:var(--accent); color:var(--accent2)}
.doc-wrap{max-width:820px; padding-top:20px; padding-bottom:80px}
.doc{padding:36px 0; border-bottom:1px solid var(--line); scroll-margin-top:84px}
.doc:last-child{border-bottom:0}
.doc h1{font-size:24px; margin:0 0 6px}
.doc h2{font-size:17.5px; margin:30px 0 10px; color:var(--text)}
.doc p, .doc li{color:#cfd3db; font-size:15px}
.doc ul{padding-left:20px; margin:0 0 12px}
.doc li{margin:4px 0}
.doc .meta{color:var(--muted); font-size:13.5px; background:var(--surface); border:1px solid var(--line);
           border-radius:12px; padding:14px 16px}
.doc table{width:100%; border-collapse:collapse; margin:12px 0; font-size:14px; display:block; overflow-x:auto}
.doc th, .doc td{border:1px solid var(--line); padding:8px 10px; text-align:left; color:#cfd3db}
.doc th{background:var(--surface); color:var(--text)}
.doc a{color:var(--accent2)}

/* 정책 모음: 게임별 카드 */
.policy-list{display:grid; gap:12px}
.pcard{display:flex; align-items:center; gap:16px; padding:16px 18px; border-radius:14px;
       background:var(--surface); border:1px solid var(--line); text-decoration:none; transition:border-color .15s}
a.pcard:hover{border-color:var(--accent)}
.pcard img{width:52px; height:52px; border-radius:12px; flex:none}
.pcard b{display:block; font-size:17px}
.pcard span{color:var(--muted); font-size:13.5px}
.pcard em{margin-left:auto; font-style:normal; color:var(--accent2); font-weight:700; font-size:14px; white-space:nowrap}
.pcard.off{opacity:.6}
.pcard.off em{color:var(--muted)}

/* 퍼즐 그림 갤러리 */
.gallery{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
.gallery img{width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:12px; cursor:zoom-in}
@media (max-width:860px){ .gallery{grid-template-columns:repeat(2,1fr)} }

@media (max-width:860px){
  .games,.contacts,.feature{grid-template-columns:1fr}
  .about{grid-template-columns:1fr; gap:32px}
  .about .mark{order:-1; padding:32px}
  section{padding:68px 0}
}
@media (max-width:600px){
  .wrap{padding:0 16px}
  .menu{gap:16px}
  .menu a{font-size:14px}
  .menu a.hide-s{display:none}
  .logo span{display:none}
  .slide .copy{bottom:72px}
  .hero .btns .btn, .ghero .btns .btn{flex:1 1 auto}
  .gcard .plat{display:none}
  .ghero .head img{width:64px; height:64px}
}