:root{
  --bg:#F2F4F7;--surface:#FFFFFF;--ink:#141B26;--mute:#5E6878;--rule:#DDE2E9;--foot:#E7EAEF;--accent:#2D6BD6;
  --display:"Do Hyeon","IBM Plex Sans KR","Apple SD Gothic Neo",sans-serif;
  --text:"IBM Plex Sans KR","Apple SD Gothic Neo","Noto Sans KR","Malgun Gothic",sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root{--bg:#0E131B;--surface:#171E29;--ink:#E7ECF3;--mute:#9AA6B6;--rule:#273142;--foot:#121821;--accent:#6E9BF2;color-scheme:dark}}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:400 16px/1.7 var(--text);word-break:keep-all;-webkit-font-smoothing:antialiased}
a{color:inherit}
img{display:block;max-width:100%}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:6px}
.wrap{max-width:1200px;margin:0 auto;padding:0 24px}

/* 머리글 */
.hdr{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--surface) 92%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--rule)}
.hdr .wrap{display:flex;align-items:center;gap:36px;height:64px}
.brand{display:flex;align-items:center;gap:9px;text-decoration:none;font:26px/1 var(--display);white-space:nowrap}
.brand svg{width:28px;height:28px}
.menu{display:flex;gap:26px;font-size:15px;font-weight:500;white-space:nowrap;overflow-x:auto}
.menu a{text-decoration:none;color:var(--mute);padding:20px 0;border-bottom:2px solid transparent}
.menu a:hover,.menu a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--ink)}

/* 큰 배너 */
.hero{position:relative;background:#0F1623;color:#fff;overflow:hidden}
.slides{position:relative;height:clamp(340px,40vw,560px)}
.slide{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .6s ease,visibility .6s}
.slide.on{opacity:1;visibility:visible}
.slide .art{position:absolute;inset:0;background:radial-gradient(120% 90% at 75% 40%,color-mix(in srgb,var(--c) 70%,#fff) 0%,var(--c) 38%,#0F1623 100%)}
.slide .art img{width:100%;height:100%;object-fit:cover}
.slide .art .ph{position:absolute;right:5%;top:50%;transform:translateY(-50%);font:400 clamp(70px,11vw,170px)/1 var(--display);color:rgba(255,255,255,.12);white-space:nowrap}
.slide .shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,14,22,.82) 0%,rgba(10,14,22,.45) 45%,rgba(10,14,22,0) 75%)}
.slide .txt{position:relative;height:100%;display:flex;flex-direction:column;justify-content:center;max-width:1200px;margin:0 auto;padding:0 24px}
.slide .kind{display:inline-flex;align-self:flex-start;font-size:13px;font-weight:600;padding:4px 10px;border-radius:6px;background:var(--c);color:#fff;margin-bottom:14px}
.slide h2{font:400 clamp(40px,6vw,72px)/1.1 var(--display);margin:0 0 10px;max-width:12em}
.slide p{margin:0 0 26px;max-width:28em;font-size:clamp(15px,1.6vw,18px);color:rgba(255,255,255,.85)}
.cta{display:flex;flex-wrap:wrap;gap:10px}
.store{display:inline-flex;align-items:center;gap:8px;height:46px;padding:0 18px;border-radius:12px;text-decoration:none;font-weight:600;font-size:15px;background:#fff;color:#141B26;white-space:nowrap}
.store svg{width:18px;height:18px}
.store.soon{background:rgba(255,255,255,.14);color:#fff;cursor:default}
.ctl{position:absolute;left:0;right:0;bottom:22px}
.ctl .wrap{display:flex;align-items:center;gap:10px}
.dot{width:28px;height:4px;border-radius:2px;border:0;padding:0;background:rgba(255,255,255,.35);cursor:pointer}
.dot[aria-current="true"]{background:#fff;width:44px}
.arw{width:36px;height:36px;border-radius:50%;border:1px solid rgba(255,255,255,.35);background:transparent;color:#fff;cursor:pointer;font-size:18px;line-height:1}
.arw:first-of-type{margin-left:auto}

/* 구역 */
.sec{padding:64px 0}
.sec h2{font:400 34px/1.2 var(--display);margin:0}
.sec-h{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:26px;flex-wrap:wrap}
.tabs{display:flex;gap:6px;background:var(--surface);border:1px solid var(--rule);border-radius:12px;padding:4px}
.tabs button{border:0;background:transparent;color:var(--mute);font:500 15px/1 var(--text);padding:10px 16px;border-radius:9px;cursor:pointer}
.tabs button[aria-pressed="true"]{background:var(--ink);color:var(--surface)}

/* 게임·앱 카드 */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:22px}
.card{background:var(--surface);border:1px solid var(--rule);border-radius:18px;overflow:hidden;display:flex;flex-direction:column}
.card .art{position:relative;aspect-ratio:16/9;background:linear-gradient(135deg,var(--c),color-mix(in srgb,var(--c) 45%,#0F1623))}
.card .art img{width:100%;height:100%;object-fit:cover}
.card .art .ph{position:absolute;right:18px;top:16px;font:400 26px/1 var(--display);color:rgba(255,255,255,.85)}
.card .body{position:relative;padding:44px 20px 20px;flex:1;display:flex;flex-direction:column}
.icon{position:absolute;top:-34px;left:20px;width:68px;height:68px;border-radius:18px;background:var(--c);border:3px solid var(--surface);overflow:hidden;display:grid;place-items:center;font:400 28px/1 var(--display);color:#fff}
.icon img{width:100%;height:100%;object-fit:cover}
.card h3{font:400 24px/1.25 var(--display);margin:0}
.meta{font-size:14px;color:var(--mute);margin:2px 0 8px}
.meta b{color:var(--c);font-weight:600}
.card p{margin:0 0 16px;color:var(--mute);font-size:15px}
.card .row{margin-top:auto;display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.card .store{height:40px;font-size:14px;background:var(--ink);color:var(--surface)}
.card .store.soon{background:var(--bg);color:var(--mute);border:1px solid var(--rule)}
.card .pol{margin-left:auto;font-size:13px;color:var(--mute)}

/* 회사 소개, 문의 */
.split{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
.split p{margin:0 0 14px;max-width:34em;color:var(--mute)}
.split h2{margin-bottom:14px}
.mail{display:inline-block;font:400 clamp(22px,3vw,32px)/1.2 var(--display);text-decoration:none;border-bottom:3px solid var(--accent);padding-bottom:3px;margin:6px 0 16px;overflow-wrap:anywhere}
.box{background:var(--surface);border:1px solid var(--rule);border-radius:18px;padding:22px 24px}
.box h3{font:400 21px/1.3 var(--display);margin:0 0 8px}
.box ul{margin:0;padding-left:18px;color:var(--mute)}
.alt{background:var(--surface);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}

/* 바닥글 */
.ftr{background:var(--foot);color:var(--mute);font-size:13.5px;padding:34px 0 44px;border-top:1px solid var(--rule)}
.flinks{display:flex;flex-wrap:wrap;gap:6px 22px;margin-bottom:18px;font-size:14px}
.flinks a{text-decoration:none;color:var(--ink)}
.flinks a.strong{font-weight:700}
.finfo{display:flex;flex-wrap:wrap;gap:4px 18px;margin:0 0 4px}
.finfo span{white-space:nowrap}
.finfo a{color:var(--mute)}
.copy{margin-top:14px}

/* 정책 문서 */
.doc{max-width:780px;padding:48px 0 72px}
.doc h1{font:400 clamp(32px,5vw,46px)/1.15 var(--display);margin:0 0 8px}
.doc .updated{color:var(--mute);margin:0 0 30px;font-size:14.5px}
.doc h2{font:400 23px/1.3 var(--display);margin:38px 0 10px}
.doc .en{color:var(--mute);font-size:14.5px}
.doc ul{padding-left:20px}
.doc table{width:100%;border-collapse:collapse;font-size:15px;margin:8px 0}
.doc th,.doc td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--rule);vertical-align:top}
.doc th{color:var(--mute);font-weight:500}
.tw{overflow-x:auto}
.plist{list-style:none;padding:0;margin:0}
.plist li{display:flex;align-items:center;gap:14px;padding:16px 0;border-bottom:1px solid var(--rule)}
.plist .sw{width:12px;height:12px;border-radius:50%;flex:none}
.plist a{font:400 22px/1.3 var(--display);text-decoration:none}
.plist small{color:var(--mute);margin-left:auto}

@media (max-width:760px){
  .hdr .wrap{gap:18px}
  .brand{font-size:19px}.brand svg{width:22px;height:22px}
  .menu{gap:12px;font-size:13.5px}
  .slide .shade{background:linear-gradient(0deg,rgba(10,14,22,.9) 0%,rgba(10,14,22,.5) 55%,rgba(10,14,22,.1) 100%)}
  .slide .txt{justify-content:flex-end;padding-bottom:70px}
  .split{grid-template-columns:1fr;gap:28px}
  .sec{padding:48px 0}
}
@media (prefers-reduced-motion:reduce){.slide{transition:none}}