/* TAECHORA WEB v2 — design system
   BEAT·FLOW 리뉴얼 토큰을 따른다. 한글과 모든 UI 문장은 IBM Plex Sans KR,
   Black Han Sans는 영문 제목·숫자·등급에만 쓴다(한글 금지). */
:root{
  --void:#05060b;--deep:#0a0d17;--panel:#111525;--panel2:#181d31;
  --line:rgba(214,222,255,.12);--line2:rgba(214,222,255,.24);
  --ivory:#f4efe3;--text:#e8e6ef;--mute:#9aa0b8;--dim:#626883;--ink:#07080e;
  --gold:#f5b93f;--gold2:#ffdc8f;
  --easy:#3ddc97;--normal:#3ea2ff;--hard:#ffae1f;--super:#ff4f9a;--extreme:#ff3346;
  --violet:#b08cff;--azure:#5cc6ff;
  --f-disp:"Black Han Sans","IBM Plex Sans KR",sans-serif;
  --f-ui:"IBM Plex Sans KR","Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;
  --skew:-12deg;--hdr:64px;--tab:68px;--wrap:1240px;--gut:24px;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;min-height:100vh;background:
  radial-gradient(1100px 560px at 85% -8%,rgba(143,123,255,.16),transparent 62%),
  radial-gradient(900px 520px at -12% 18%,rgba(62,162,255,.09),transparent 60%),
  var(--void);color:var(--text);font:400 16px/1.6 var(--f-ui);word-break:keep-all;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}
.disp{font-family:var(--f-disp);font-weight:400;letter-spacing:.01em}
.gold{color:var(--gold)}
.muted{color:var(--mute)}

/* ---------- header ---------- */
.hdr{position:sticky;top:0;z-index:60;height:var(--hdr);background:rgba(5,6,11,.74);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.hdr .wrap{display:flex;align-items:center;gap:30px;height:100%}
.logo{font:400 23px/1 var(--f-disp);display:inline-block;transform:skewX(-10deg);background:linear-gradient(95deg,#fff 0%,#dbe8ff 45%,#b8a4ff 100%);-webkit-background-clip:text;background-clip:text;color:transparent;white-space:nowrap;padding:4px 2px}
.logo small{font-size:11px;letter-spacing:.08em;-webkit-text-fill-color:var(--gold);margin-left:6px;vertical-align:4px}
.nav{display:flex;align-items:center;gap:24px;height:100%}
.nav a{position:relative;display:flex;align-items:center;height:100%;font:400 15px var(--f-disp);letter-spacing:.03em;color:var(--mute);transition:color .15s}
.nav a:hover{color:var(--ivory)}
.nav a.on{color:var(--ivory)}
.nav a.on::after{content:"";position:absolute;left:-2px;right:-2px;bottom:14px;height:3px;background:var(--gold);transform:skewX(var(--skew))}
.hdr-r{margin-left:auto;display:flex;align-items:center;gap:10px}
.pchip{display:flex;align-items:center;gap:9px;height:38px;padding:0 14px 0 5px;border:1px solid var(--line2);border-radius:999px;background:rgba(17,21,37,.72);font-size:13px;font-weight:600;white-space:nowrap}
.pchip .av{width:28px;height:28px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,#b08cff 55%,#1b1f35);box-shadow:0 0 0 2px rgba(245,185,63,.5)}
.pchip b{font:400 11px var(--f-disp);color:var(--gold);letter-spacing:.04em}
.pchip:hover{border-color:var(--gold)}
.v2tag{font:400 11px var(--f-disp);color:var(--ink);background:var(--gold);padding:3px 8px;border-radius:3px;letter-spacing:.06em}

/* ---------- mobile tab bar ---------- */
.tabbar{display:none}
@media (max-width:899px){
  :root{--hdr:56px;--gut:16px}
  .nav{display:none}
  .logo{font-size:20px}
  .pchip{height:34px;font-size:12px;padding-right:11px}
  .pchip span.nm{max-width:84px;overflow:hidden;text-overflow:ellipsis}
  .tabbar{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;left:0;right:0;bottom:0;z-index:70;height:calc(var(--tab) + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);background:rgba(8,10,20,.92);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-top:1px solid var(--line)}
  .tabbar a,.tabbar button{appearance:none;border:0;background:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:var(--dim);font:400 11px var(--f-disp);letter-spacing:.05em;padding:0}
  .tabbar svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
  .tabbar .on{color:var(--ivory)}
  .tabbar .on svg{stroke:var(--gold)}
  .tabbar .play{position:relative}
  .tabbar .play .orb{position:absolute;top:-22px;left:50%;width:64px;height:64px;margin-left:-32px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 50% 40%,#1c2140,#07080e 70%);box-shadow:0 0 0 3px var(--gold),0 8px 24px rgba(245,185,63,.35),0 0 0 8px rgba(245,185,63,.12);animation:pulse 1.8s ease-in-out infinite}
  .tabbar .play .orb svg{width:24px;height:24px;fill:var(--gold);stroke:none;margin-left:3px}
  .tabbar .play span.lb{margin-top:34px;color:var(--gold)}
  body{padding-bottom:calc(var(--tab) + env(safe-area-inset-bottom))}
}
@keyframes pulse{0%,100%{box-shadow:0 0 0 3px var(--gold),0 8px 24px rgba(245,185,63,.35),0 0 0 8px rgba(245,185,63,.12)}50%{box-shadow:0 0 0 3px var(--gold2),0 8px 28px rgba(245,185,63,.5),0 0 0 14px rgba(245,185,63,.04)}}

/* ---------- buttons ---------- */
.btn{position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;gap:10px;height:54px;padding:0 28px;font:700 16px/1 var(--f-ui);color:var(--ink);white-space:nowrap;border:0;background:none;letter-spacing:-.01em}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:4px;transform:skewX(var(--skew));background:var(--gold);box-shadow:0 10px 30px rgba(245,185,63,.26);transition:background .15s,transform .15s}
.btn:hover::before{background:var(--gold2)}
.btn:active::before{transform:skewX(var(--skew)) scale(.97)}
.btn svg{width:20px;height:20px;flex:none;fill:currentColor}
.btn .en{font:400 18px var(--f-disp);letter-spacing:.03em}
.btn-line{color:var(--ivory)}
.btn-line::before{background:rgba(8,10,20,.35);border:1.5px solid rgba(244,239,227,.5);box-shadow:none}
.btn-line:hover::before{background:rgba(244,239,227,.1);border-color:var(--ivory)}
.btn-dark{color:var(--ivory)}
.btn-dark::before{background:rgba(17,21,37,.92);border:1px solid var(--line2);box-shadow:none}
.btn-dark:hover::before{background:var(--panel2)}
.btn-sm{height:40px;padding:0 18px;font-size:14px}
.btn-sm .en{font-size:15px}
.btn[aria-disabled=true]{pointer-events:none;color:var(--mute)}
.btn[aria-disabled=true]::before{background:rgba(17,21,37,.8);border:1px dashed var(--line2);box-shadow:none}
.cta{display:flex;flex-wrap:wrap;gap:14px 16px;align-items:center}

/* ---------- chips & badges ---------- */
.chip{--c:var(--text);position:relative;isolation:isolate;display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 11px;font:600 12px/1 var(--f-ui);color:var(--c);white-space:nowrap}
.chip::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:3px;transform:skewX(var(--skew));border:1px solid color-mix(in srgb,var(--c) 55%,transparent);background:color-mix(in srgb,var(--c) 14%,rgba(8,10,20,.6))}
.chip .en,.chip.en{font:400 12px var(--f-disp);letter-spacing:.05em}
.chip svg{width:14px;height:14px;fill:currentColor}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.st-live{--c:var(--easy)}
.st-review{--c:var(--hard)}
.st-soon{--c:var(--violet)}
.st-new{--c:var(--super)}
.pf{display:inline-flex;align-items:center;gap:4px;font:400 11px var(--f-disp);letter-spacing:.05em;color:var(--mute)}
.pf svg{width:14px;height:14px;fill:currentColor}
.pfs{display:flex;gap:10px;align-items:center}

/* ---------- sections ---------- */
.sec{padding-top:64px;padding-bottom:8px}
.sec-h{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:22px}
.sec-h h2{margin:0;font:400 clamp(30px,4.2vw,46px)/1 var(--f-disp);letter-spacing:.01em}
.sec-h h2 i{font-style:normal;color:var(--gold)}
.sec-h p{margin:10px 0 0;color:var(--mute);font-size:15px}
.more{font:400 14px var(--f-disp);color:var(--gold);letter-spacing:.04em;white-space:nowrap;display:inline-flex;align-items:center;gap:6px}
.more:hover{color:var(--gold2)}
.more.kr{font:700 14px var(--f-ui);letter-spacing:0}
.kick{display:inline-block;font:400 12px/1 var(--f-disp);letter-spacing:.08em;color:var(--ink);background:var(--gold);padding:5px 10px 4px;transform:skewX(var(--skew));margin-bottom:12px}
.kick>span{display:inline-block;transform:skewX(12deg)}

/* ---------- game cards ---------- */
.gc{--c:var(--gold);position:relative;display:flex;flex-direction:column;border-radius:14px;overflow:hidden;background:var(--panel);border:1px solid var(--line);transition:transform .2s ease,border-color .2s,box-shadow .2s;min-width:0}
.gc:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--c) 65%,transparent);box-shadow:0 18px 40px rgba(0,0,0,.45),0 0 44px color-mix(in srgb,var(--c) 22%,transparent)}
.gc-cv{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--deep)}
.gc-cv>img,.gc-cv>svg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .45s ease}
.gc:hover .gc-cv>img,.gc:hover .gc-cv>svg{transform:scale(1.05)}
.gc-cv::after{content:"";position:absolute;inset:auto 0 0 0;height:58%;background:linear-gradient(180deg,transparent,rgba(5,6,11,.94));pointer-events:none}
.gc-top{position:absolute;z-index:2;top:10px;left:10px;right:10px;display:flex;justify-content:space-between;gap:6px;align-items:flex-start}
.gc-nm{position:absolute;z-index:2;left:14px;right:14px;bottom:12px;display:flex;align-items:flex-end;gap:10px}
.gc-ic{width:46px;height:46px;border-radius:12px;flex:none;box-shadow:0 6px 16px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.14)}
.gc-nm .en{display:block;font:400 22px/1.02 var(--f-disp);color:#fff;text-shadow:0 2px 14px rgba(0,0,0,.7);overflow-wrap:anywhere}
.gc-nm>div{min-width:0}
.rowx .gc-nm .en{font-size:19px}
.gc-ft .pft{display:none}
.gc-ft .pf svg{width:15px;height:15px}
.gc-nm .en.kr{font:700 21px/1.15 var(--f-ui);letter-spacing:-.02em}
.gc-nm .ko{display:block;font-size:12px;font-weight:600;color:rgba(255,255,255,.78);margin-top:5px}
.gc-bd{padding:12px 14px 14px;display:flex;flex-direction:column;gap:10px;flex:1}
.gc-tg{margin:0;font-size:13px;line-height:1.5;color:var(--mute);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:39px}
.gc-ft{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:8px}
.gc-go{font:400 14px var(--f-disp);letter-spacing:.05em;color:var(--c);display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
.gc-go.off{color:var(--dim)}
.gc-off{cursor:default}
.gc-off:hover{transform:none;border-color:var(--line);box-shadow:none}
.gc-off:hover .gc-cv>img{transform:none}
.gc-lg .gc-nm .en{font-size:28px}
.rowx{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 5*16px)/6);gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:4px 2px 10px}
.rowx::-webkit-scrollbar{display:none}
.rowx>*{scroll-snap-align:start}
.grid4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(212px,1fr));gap:18px}
@media (max-width:1100px){.rowx{grid-auto-columns:calc((100% - 3*16px)/4)}}
@media (max-width:899px){
  .rowx{grid-auto-columns:62%;gap:12px;margin:0 calc(-1*var(--gut));padding:4px var(--gut) 10px;scroll-padding:0 var(--gut)}
  .grid4{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .gc-nm .en{font-size:19px}
  .gc-nm .en.lw{font-size:16px}
  .gc-ic{width:38px;height:38px;border-radius:10px}
  .gc-tg{font-size:12.5px}
  .gc-ft .pft{display:none}
  .gc-ft .pf svg{width:15px;height:15px}
  .gc-bd{padding:10px 12px 12px}
}

/* ---------- hero ---------- */
.hero{position:relative;height:min(86vh,820px);min-height:580px;overflow:hidden;background:#000;margin-top:calc(-1*var(--hdr))}
.hs{--c:var(--gold);position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .7s ease,visibility .7s}
.hs.on{opacity:1;visibility:visible;z-index:1}
.hs-bg{position:absolute;inset:0;background:#05060b center/cover no-repeat;transform:scale(1.06);transition:transform 8s linear}
.hs.on .hs-bg{transform:scale(1)}
.hs.portrait .hs-bg{filter:blur(34px) saturate(1.35) brightness(.72);transform:scale(1.25)}
.hs-fade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(5,6,11,.93) 0%,rgba(5,6,11,.72) 34%,rgba(5,6,11,.1) 70%),linear-gradient(0deg,rgba(5,6,11,.98) 0%,rgba(5,6,11,0) 42%),linear-gradient(180deg,rgba(5,6,11,.7) 0%,rgba(5,6,11,0) 22%)}
.hs.light .hs-fade{background:linear-gradient(90deg,rgba(5,6,11,.9) 0%,rgba(5,6,11,.66) 38%,rgba(5,6,11,0) 72%),linear-gradient(0deg,rgba(5,6,11,.98) 0%,rgba(5,6,11,0) 45%)}
.hs-dev{position:absolute;right:max(var(--gut),calc((100vw - var(--wrap))/2 + 40px));top:calc(var(--hdr) + 36px);bottom:118px;aspect-ratio:9/16;border-radius:34px;overflow:hidden;border:7px solid #151a2e;box-shadow:0 30px 90px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.08),0 0 80px color-mix(in srgb,var(--c) 30%,transparent);transform:rotate(3deg);transition:transform .8s ease}
.hs.on .hs-dev{transform:rotate(0)}
.hs-dev img{width:100%;height:100%;object-fit:cover}
.hs-cp{position:absolute;z-index:3;left:max(var(--gut),calc((100vw - var(--wrap))/2 + var(--gut)));bottom:150px;width:min(620px,calc(100vw - 2*var(--gut)))}
.hs-ttl{margin:14px 0 0;font:400 clamp(64px,10vw,136px)/.9 var(--f-disp);letter-spacing:.005em;transform:skewX(-8deg);transform-origin:left bottom;background:linear-gradient(100deg,#fff 0%,#fff3d1 35%,var(--c) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 8px 30px rgba(0,0,0,.55));padding:0 .06em .04em 0}
.hs-ttl.long{font-size:clamp(46px,6.6vw,98px)}
.hs-ko{margin:16px 0 0;font-size:19px;font-weight:700;color:#fff}
.hs-tg{margin:6px 0 0;font-size:16px;color:rgba(244,239,227,.8);max-width:520px}
.hs .cta{margin-top:26px}
.hs-more{display:inline-flex;align-items:center;gap:6px;margin-top:18px;font-size:15px;font-weight:600;color:rgba(244,239,227,.86);border-bottom:1px solid rgba(244,239,227,.3);padding-bottom:2px}
.hs-more svg{width:16px;height:16px}
.hs-more:hover{color:#fff;border-color:var(--gold)}
.hn{position:absolute;z-index:4;left:max(var(--gut),calc((100vw - var(--wrap))/2 + var(--gut)));right:max(var(--gut),calc((100vw - var(--wrap))/2 + var(--gut)));bottom:34px;display:flex;gap:14px}
.hn button{appearance:none;border:0;background:none;flex:1;max-width:190px;position:relative;text-align:left;padding:12px 0 0;border-top:3px solid rgba(244,239,227,.18);color:rgba(244,239,227,.5);display:flex;gap:10px;align-items:center}
.hn button img{width:40px;height:40px;border-radius:10px;object-fit:cover;opacity:.6;transition:opacity .2s}
.hn button b{font:400 14px/1.1 var(--f-disp);letter-spacing:.03em;display:block}
.hn button small{display:block;font-size:11px;color:var(--dim);margin-top:3px}
.hn button.on{color:#fff}
.hn button.on img{opacity:1}
.hn .bar{position:absolute;left:0;top:-3px;height:3px;width:0;background:var(--gold)}
.hn button.on .bar{animation:heroBar var(--dur,7s) linear forwards}
.hero.paused .hn button.on .bar{animation-play-state:paused}
@keyframes heroBar{to{width:100%}}
@media (max-width:899px){
  .hero{height:min(80vh,720px);min-height:520px}
  .hs-fade{background:linear-gradient(0deg,rgba(5,6,11,.98) 0%,rgba(5,6,11,.75) 42%,rgba(5,6,11,.05) 75%),linear-gradient(180deg,rgba(5,6,11,.7),transparent 25%)}
  .hs-dev{display:none}
  .hs.portrait .hs-bg{filter:none;transform:none;background-position:center 30%}
  .hs.portrait.on .hs-bg{transform:none}
  .hs-cp{bottom:96px}
  .hs-ko{font-size:16px}
  .hs-tg{font-size:14px}
  .hn{bottom:22px;gap:8px}
  .hn button{padding-top:8px;max-width:none}
  .hn button img,.hn button small{display:none}
  .hn button b{font-size:11px}
}

/* ---------- archive ---------- */
.ah{padding-top:44px;padding-bottom:8px}
.ah h1{margin:0;font:400 clamp(40px,7vw,76px)/.95 var(--f-disp);transform:skewX(-6deg);transform-origin:left bottom}
.ah p{margin:12px 0 0;color:var(--mute)}
.ah .cnt{font:400 1em var(--f-disp);color:var(--gold)}
.tools{position:sticky;top:var(--hdr);z-index:40;background:rgba(5,6,11,.9);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line);margin-bottom:22px}
.tools .wrap{display:flex;flex-direction:column;gap:10px;padding-top:12px;padding-bottom:12px}
.search{display:flex;align-items:center;gap:10px;height:48px;padding:0 14px;border:1px solid var(--line2);border-radius:12px;background:var(--panel);max-width:560px}
.search:focus-within{border-color:var(--gold)}
.search svg{width:20px;height:20px;stroke:var(--mute);fill:none;stroke-width:2;flex:none}
.search input{flex:1;min-width:0;background:none;border:0;outline:0;color:var(--text);font:500 16px var(--f-ui)}
.search input::placeholder{color:var(--dim)}
.fbar{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:2px 4px}
.fbar::-webkit-scrollbar{display:none}
.fch{appearance:none;border:0;background:none;position:relative;isolation:isolate;height:36px;padding:0 15px;font:600 14px var(--f-ui);color:var(--mute);white-space:nowrap;flex:none}
.fch::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:4px;transform:skewX(var(--skew));border:1px solid var(--line2);background:rgba(17,21,37,.7)}
.fch:hover{color:var(--ivory)}
.fch.on{color:var(--ink)}
.fch.on::before{background:var(--gold);border-color:var(--gold)}
.fch small{font:400 11px var(--f-disp);margin-left:5px;opacity:.7}
.empty{padding:60px 20px;text-align:center;color:var(--mute);border:1px dashed var(--line2);border-radius:14px}
.empty b{display:block;font:400 22px var(--f-disp);color:var(--ivory);margin-bottom:6px}
.gc[hidden]{display:none}

/* ---------- detail ---------- */
.dh{--c:var(--gold);position:relative;overflow:hidden;margin-top:calc(-1*var(--hdr));padding:calc(var(--hdr) + 120px) 0 44px;min-height:600px;display:flex;align-items:flex-end}
.dh-bg{position:absolute;inset:0;background:#05060b center/cover no-repeat}
.dh.art .dh-bg{background-size:auto 118%;background-position:right max(0px,calc((100vw - var(--wrap))/2)) center}
.dh.art .dh-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#05060b 0%,rgba(5,6,11,0) 55%)}
.dh.portrait .dh-bg{filter:blur(30px) saturate(1.3) brightness(.7);transform:scale(1.2)}
.dh-fade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(5,6,11,.94) 0%,rgba(5,6,11,.7) 42%,rgba(5,6,11,.15) 78%),linear-gradient(0deg,var(--void) 0%,rgba(5,6,11,0) 55%)}
.dh .wrap{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:40px;align-items:end}
.dh-dev{width:230px;aspect-ratio:9/16;border-radius:28px;overflow:hidden;border:6px solid #151a2e;box-shadow:0 26px 70px rgba(0,0,0,.6),0 0 60px color-mix(in srgb,var(--c) 30%,transparent)}
.dh-dev img{width:100%;height:100%;object-fit:cover}
.dh-top{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.dh-ic{width:92px;height:92px;border-radius:22px;box-shadow:0 10px 30px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.14)}
.dh h1{margin:14px 0 0;font:400 clamp(52px,8vw,104px)/.92 var(--f-disp);transform:skewX(-8deg);transform-origin:left bottom;background:linear-gradient(100deg,#fff 0%,#fff3d1 40%,var(--c) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 8px 26px rgba(0,0,0,.5));overflow-wrap:anywhere}
.dh h1.long{font-size:clamp(40px,6vw,80px)}
.dh .ko{margin:14px 0 0;font-size:20px;font-weight:700;color:#fff}
.dh .tg{margin:6px 0 0;font-size:16px;color:rgba(244,239,227,.82);max-width:640px}
.dh .cta{margin-top:24px}
.collab{font:400 12px var(--f-disp);letter-spacing:.08em;color:var(--c)}
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:28px;max-width:640px}
.stat{padding:14px 16px;border-radius:12px;background:rgba(17,21,37,.72);border:1px solid var(--line);backdrop-filter:blur(6px)}
.stat b{display:block;font:400 30px/1 var(--f-disp);color:var(--c);letter-spacing:.01em}
.stat span{display:block;margin-top:6px;font-size:12px;color:var(--mute)}
.dm{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:40px;padding-top:36px;padding-bottom:20px;align-items:start}
.dm h3{margin:0 0 14px;font:400 22px var(--f-disp);letter-spacing:.02em}
.dm h3 small{font:600 13px var(--f-ui);color:var(--mute);margin-left:8px;letter-spacing:0}
.blk{margin-bottom:40px}
.shots{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 2px 12px;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.2) transparent}
.shot{flex:none;width:216px;aspect-ratio:9/16;border-radius:20px;overflow:hidden;border:1px solid var(--line2);background:#000;scroll-snap-align:start}
.shot.wide{width:min(560px,86vw);aspect-ratio:16/9;border-radius:14px}
.shot img{width:100%;height:100%;object-fit:cover}
.feat{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.fi{padding:18px;border-radius:12px;background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--c)}
.fi b{font-size:16px;display:block}
.fi p{margin:6px 0 0;font-size:14px;line-height:1.6;color:var(--mute)}
.how{list-style:none;margin:0;padding:0}
.how li{display:flex;align-items:center;gap:16px;padding:14px 0;border-bottom:1px solid var(--line);font-size:15px}
.how li b{font:400 28px/1 var(--f-disp);color:var(--c);width:46px;flex:none}
.side{display:flex;flex-direction:column;gap:16px;position:sticky;top:calc(var(--hdr) + 16px)}
.facts{margin:0;border-radius:14px;background:var(--panel);border:1px solid var(--line);padding:4px 18px}
.facts div{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid var(--line);font-size:14px}
.facts div:last-child{border-bottom:0}
.facts dt{color:var(--mute)}
.facts dd{margin:0;text-align:right;font-weight:600}
.qr{display:flex;gap:14px;align-items:center;padding:16px;border-radius:14px;background:linear-gradient(135deg,rgba(245,185,63,.14),rgba(17,21,37,.92) 60%);border:1px solid rgba(245,185,63,.38)}
.qr img{width:104px;height:104px;border-radius:8px;background:#fff;padding:4px;flex:none}
.qr b{display:block;font-size:15px}
.qr p{margin:4px 0 0;font-size:13px;color:var(--mute);line-height:1.5}
.note{padding:14px 16px;border-radius:12px;border:1px dashed var(--line2);color:var(--mute);font-size:13px;line-height:1.6}
@media (max-width:899px){
  .dh{padding-top:calc(var(--hdr) + 90px);min-height:0}
  .dh.art .dh-bg{background-size:cover;background-position:center}
  .dh .wrap{grid-template-columns:minmax(0,1fr)}
  .dh-dev{display:none}
  .dh-ic{width:72px;height:72px;border-radius:18px}
  .dh .ko{font-size:17px}
  .dh .tg{font-size:15px}
  .stats{gap:8px}
  .stat{padding:12px}
  .stat b{font-size:23px}
  .dm{grid-template-columns:minmax(0,1fr);gap:8px}
  .side{position:static}
  .feat{grid-template-columns:1fr}
  .shot{width:170px}
}

/* ---------- ranking ---------- */
.rk{border-radius:16px;background:var(--panel);border:1px solid var(--line);overflow:hidden}
.rk-hd{display:flex;flex-direction:column;gap:8px;padding:14px 14px 12px;border-bottom:1px solid var(--line)}
.rk-tabs,.rk-per{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none}
.rk-tabs::-webkit-scrollbar,.rk-per::-webkit-scrollbar{display:none}
.rk .fch{height:32px;font-size:13px;padding:0 12px}
.rk-per .fch{height:28px;font-size:12px}
.rk-list{min-height:250px}
.rk-row{display:grid;grid-template-columns:44px minmax(0,1fr) auto;align-items:center;gap:10px;padding:11px 16px;border-top:1px solid var(--line)}
.rk-row:first-child{border-top:0}
.rk-row .n{font:400 22px/1 var(--f-disp);color:var(--mute)}
.rk-row:nth-child(1) .n{color:var(--gold)}
.rk-row:nth-child(2) .n{color:#cfd8e6}
.rk-row:nth-child(3) .n{color:#e0a07a}
.rk-row .p{min-width:0}
.rk-row .p b{display:block;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rk-row .p small{font:400 11px var(--f-disp);color:var(--dim);letter-spacing:.04em}
.rk-row .s{font:400 18px var(--f-disp);letter-spacing:.02em;text-align:right}
.rk-row .s small{display:block;font:500 11px var(--f-ui);color:var(--mute)}
.rk-msg{padding:40px 16px;text-align:center;color:var(--mute);font-size:14px}
.rk-ft{display:flex;justify-content:flex-end;padding:12px 16px;border-top:1px solid var(--line)}

/* ---------- archive teaser / panels ---------- */
.panel{border-radius:18px;background:linear-gradient(135deg,rgba(24,29,49,.95),rgba(10,13,23,.95));border:1px solid var(--line);padding:28px}
.teaser{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:28px;align-items:center}
.teaser h3{margin:0;font:400 clamp(30px,4vw,44px)/1 var(--f-disp)}
.teaser p{color:var(--mute);margin:12px 0 18px}
.gl{display:flex;flex-wrap:wrap;gap:10px}
.gl a{--c:var(--gold)}
.lab-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.lab-row a{display:flex;gap:10px;align-items:center;padding:10px;border-radius:12px;background:rgba(5,6,11,.5);border:1px solid var(--line);min-width:0}
.lab-row a:hover{border-color:var(--gold)}
.lab-row .th{width:44px;height:44px;border-radius:10px;overflow:hidden;flex:none;background:var(--deep)}
.lab-row .th>*{width:100%;height:100%;object-fit:cover}
.lab-row b{display:block;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lab-row small{display:block;font-size:11px;color:var(--mute);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:899px){
  .teaser{grid-template-columns:minmax(0,1fr)}
  .lab-row{grid-template-columns:repeat(2,minmax(0,1fr))}
  .panel{padding:20px}
}

/* ---------- pc-only / notices ---------- */
.warn{display:flex;gap:14px;align-items:flex-start;padding:16px;border-radius:14px;border:1px solid rgba(255,174,31,.45);background:rgba(255,174,31,.08)}
.warn b{display:block;margin-bottom:4px}
.warn p{margin:0;color:var(--mute);font-size:14px}

/* ---------- footer ---------- */
.ftr{margin-top:80px;border-top:1px solid var(--line);padding:40px 0 48px;color:var(--mute);font-size:13px}
.ftr .wrap{display:grid;grid-template-columns:1.2fr 2fr;gap:30px}
.ftr .logo{font-size:20px}
.ftr p{margin:10px 0 0;line-height:1.7}
.ftr nav{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px 18px}
.ftr nav a:hover{color:var(--ivory)}
.ftr nav b{grid-column:1/-1;font:400 12px var(--f-disp);letter-spacing:.08em;color:var(--dim);margin-top:6px}
@media (max-width:899px){.ftr .wrap{grid-template-columns:1fr}.ftr nav{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---------- sheet / modal ---------- */
.sheet-bg{position:fixed;inset:0;z-index:90;background:rgba(0,0,0,.6);opacity:0;pointer-events:none;transition:opacity .25s}
.sheet{position:fixed;z-index:91;left:50%;bottom:0;width:min(560px,100%);max-height:84vh;overflow:auto;transform:translate(-50%,105%);transition:transform .3s cubic-bezier(.2,.8,.2,1),visibility .3s;background:var(--deep);border:1px solid var(--line2);border-bottom:0;border-radius:22px 22px 0 0;padding:10px 18px calc(22px + env(safe-area-inset-bottom))}
.sheet{visibility:hidden}
.sheet.open{transform:translate(-50%,0);visibility:visible}
.sheet-bg.open{opacity:1;pointer-events:auto}
.sheet .grab{width:44px;height:5px;border-radius:9px;background:var(--line2);margin:4px auto 14px}
.sheet h4{margin:0 0 4px;font:400 26px var(--f-disp)}
.sheet .sub{margin:0 0 14px;color:var(--mute);font-size:14px}
.ql{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.ql a{--c:var(--gold);display:flex;align-items:center;gap:10px;padding:10px;border-radius:12px;background:var(--panel);border:1px solid var(--line);min-width:0}
.ql a:hover{border-color:var(--c)}
.ql .th{width:42px;height:42px;border-radius:10px;overflow:hidden;flex:none;background:var(--void)}
.ql .th>*{width:100%;height:100%;object-fit:cover}
.ql b{display:block;font:400 15px/1.1 var(--f-disp);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ql small{display:block;font-size:11px;color:var(--mute)}
.ql b.kr{font:700 14px/1.2 var(--f-ui)}
.sheet .x{position:absolute;right:14px;top:12px;appearance:none;border:0;background:rgba(255,255,255,.06);width:36px;height:36px;border-radius:50%;display:grid;place-items:center}
.sheet .x svg{width:18px;height:18px;stroke:var(--text);stroke-width:2}
.qrm{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding:8px 0 6px}
.qrm img{width:200px;height:200px;background:#fff;border-radius:12px;padding:8px}

/* ---------- web demo: cards · detail block ---------- */
.st-demo{--c:var(--gold)}
.gc-lim{color:var(--c);font-weight:700}
.demo-box{display:flex;flex-direction:column;gap:18px;padding:20px;border-radius:16px;background:linear-gradient(135deg,color-mix(in srgb,var(--c) 14%,rgba(17,21,37,.95)),rgba(10,13,23,.95) 70%);border:1px solid color-mix(in srgb,var(--c) 40%,transparent)}
.pl-cmp{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.pl-cmp>div{padding:14px;border-radius:12px;background:rgba(8,10,20,.62);border:1px solid var(--line)}
.pl-cmp>.app{border-color:rgba(245,185,63,.42);background:linear-gradient(135deg,rgba(245,185,63,.13),rgba(8,10,20,.7) 70%)}
.pl-cmp b{display:block;font:700 13px var(--f-ui);color:var(--mute);margin-bottom:8px}
.pl-cmp>.app b{color:var(--gold)}
.pl-cmp ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:7px;font-size:13px;line-height:1.45;color:var(--text)}
.pl-cmp li{display:flex;gap:7px}
.pl-cmp li::before{content:"";flex:none;width:6px;height:6px;margin-top:6px;border-radius:1px;transform:rotate(45deg);background:var(--c)}
.pl-cmp>.app li::before{background:var(--gold)}

/* ---------- web demo page (/play/<id>/) ---------- */
body.pl{height:100vh;height:100dvh;min-height:0;overflow:hidden;padding:0;display:flex;flex-direction:column;background:var(--void)}
.pl-bg{position:fixed;inset:-60px;background:#05060b center/cover no-repeat;filter:blur(42px) saturate(1.3) brightness(.4);transform:scale(1.1);z-index:0;pointer-events:none}
.pl-bar{position:relative;z-index:5;flex:none;display:flex;align-items:center;gap:10px;height:calc(58px + env(safe-area-inset-top));padding:env(safe-area-inset-top) max(14px,env(safe-area-inset-right)) 0 max(10px,env(safe-area-inset-left));background:rgba(5,6,11,.8);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.pl-back{flex:none;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.07);color:var(--ivory)}
.pl-back svg{width:20px;height:20px}
.pl-back:hover{background:rgba(255,255,255,.14)}
.pl-ic{flex:none;width:36px;height:36px;border-radius:9px;box-shadow:0 0 0 1px rgba(255,255,255,.14)}
.pl-t{min-width:0;flex:1}
.pl-t b{display:block;font:400 19px/1.05 var(--f-disp);letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#fff}
.pl-t b.kr{font:700 16px/1.2 var(--f-ui)}
.pl-t small{display:flex;gap:6px;align-items:center;margin-top:3px;font-size:12px;font-weight:600;color:var(--mute);white-space:nowrap;overflow:hidden}
.pl-t small .en{font:400 11px var(--f-disp);color:var(--c);letter-spacing:.06em}
.pl-r{flex:none;display:flex;align-items:center;gap:10px}
.pl-i{appearance:none;flex:none;width:34px;height:34px;border-radius:50%;border:1px solid var(--line2);background:rgba(17,21,37,.7);font:700 15px/1 Georgia,serif;font-style:italic;color:var(--ivory)}
.pl-i:hover{border-color:var(--gold)}
.pl-st{height:30px}
.pl-main{position:relative;z-index:1;flex:1;min-height:0;display:flex;justify-content:center;align-items:stretch;gap:44px;padding:20px 24px}
.pl-stage{min-width:0;display:flex;align-items:center;justify-content:center}
.pl-dev{position:relative;height:100%;aspect-ratio:9/19;max-width:100%;border-radius:30px;overflow:hidden;border:6px solid #151a2e;background:#000;box-shadow:0 30px 90px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.08),0 0 80px color-mix(in srgb,var(--c) 26%,transparent)}
.pl-dev iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:#000;display:block}
.pl-cur{position:absolute;inset:0;z-index:2;display:grid;place-content:center;justify-items:center;gap:16px;background:radial-gradient(420px 320px at 50% 42%,color-mix(in srgb,var(--c) 22%,transparent),transparent 70%),#05060b;transition:opacity .45s ease,visibility .45s}
.pl-cur.off{opacity:0;visibility:hidden;pointer-events:none}
.pl-cur img{width:86px;height:86px;border-radius:22px;box-shadow:0 12px 40px rgba(0,0,0,.6);animation:plFloat 1.6s ease-in-out infinite}
.pl-cur .disp{font-size:13px;letter-spacing:.3em;color:var(--mute)}
@keyframes plFloat{50%{transform:translateY(-8px)}}
.pl-side{width:360px;flex:none;align-self:center;display:flex;flex-direction:column;gap:16px;max-height:100%;overflow:auto}
.pl-side .kick{align-self:flex-start;margin:0}
.pl-side h1{margin:0;font:400 58px/.92 var(--f-disp);transform:skewX(-8deg);transform-origin:left bottom;background:linear-gradient(100deg,#fff 0%,#fff3d1 40%,var(--c) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;padding-right:.08em;overflow-wrap:anywhere}
.pl-side h1.long{font-size:42px}
.pl-side .ko{margin:-4px 0 0;font-size:17px;font-weight:700;color:#fff}
.pl-get{display:flex;gap:14px;align-items:center;padding:14px;border-radius:14px;background:linear-gradient(135deg,rgba(245,185,63,.14),rgba(17,21,37,.92) 60%);border:1px solid rgba(245,185,63,.38)}
.pl-get img{width:96px;height:96px;border-radius:8px;background:#fff;padding:4px;flex:none}
.pl-get b{display:block;font-size:15px}
.pl-get p{margin:4px 0 0;font-size:13px;color:var(--mute);line-height:1.5}
.pl-side .more{align-self:flex-start}
.pl-end{position:fixed;inset:0;z-index:95;display:grid;place-items:center;padding:20px;background:rgba(3,4,8,.74);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.pl-end[hidden]{display:none}
.pl-card{position:relative;width:min(460px,100%);max-height:calc(100dvh - 40px);overflow:auto;padding:26px 22px 20px;border-radius:22px;background:linear-gradient(160deg,#171c33,#0a0d17 72%);border:1px solid var(--line2);box-shadow:0 30px 80px rgba(0,0,0,.6),0 0 60px color-mix(in srgb,var(--c) 24%,transparent);text-align:center;animation:plIn .28s cubic-bezier(.2,.8,.2,1)}
@keyframes plIn{from{opacity:0;transform:translateY(14px) scale(.98)}}
.pl-card-ic{width:72px;height:72px;border-radius:18px;margin:0 auto 14px;box-shadow:0 10px 30px rgba(0,0,0,.5)}
.pl-card .kick{margin-bottom:8px}
.pl-card h2{margin:4px 0 8px;font:700 22px/1.35 var(--f-ui);letter-spacing:-.01em;color:#fff}
.pl-card p{margin:0 0 18px;color:var(--mute);font-size:14px;line-height:1.65}
.pl-card .pl-cmp{text-align:left;margin-bottom:20px}
.pl-card .cta{justify-content:center}
.pl-end-f{display:flex;justify-content:center;align-items:center;gap:16px;margin-top:18px;flex-wrap:wrap}
.pl-end-f .btn[hidden]{display:none}
.pl-card .btn:focus-visible,.pl-r .btn:focus-visible{outline:none}
.pl-card .btn:focus-visible::before,.pl-r .btn:focus-visible::before{box-shadow:0 0 0 2px var(--gold2)}
.nudge::before{animation:plNudge 1.1s ease-in-out 3}
@keyframes plNudge{50%{box-shadow:0 0 0 7px rgba(245,185,63,.32),0 10px 30px rgba(245,185,63,.45)}}
.pl-toast{position:fixed;z-index:80;left:50%;bottom:calc(20px + env(safe-area-inset-bottom));transform:translate(-50%,20px);opacity:0;visibility:hidden;max-width:min(420px,calc(100vw - 32px));padding:12px 16px;border-radius:14px;background:rgba(17,21,37,.96);border:1px solid rgba(245,185,63,.45);font-size:14px;font-weight:600;color:var(--ivory);box-shadow:0 16px 40px rgba(0,0,0,.5);transition:opacity .3s,transform .3s,visibility .3s}
.pl-toast.on{opacity:1;visibility:visible;transform:translate(-50%,0)}
@media (max-width:899px){
  .pl-main{padding:0;gap:0}
  .pl-side{display:none}
  .pl-stage{flex:1}
  .pl-dev{width:100%;height:100%;aspect-ratio:auto;border:0;border-radius:0;box-shadow:none}
  .pl-bar{gap:8px;height:calc(54px + env(safe-area-inset-top))}
  .pl-t b{font-size:17px}
  .pl-ic{width:32px;height:32px;border-radius:8px}
  .pl-r .btn-sm{height:34px;padding:0 13px;font-size:13px}
  .pl-r .btn-sm svg{width:16px;height:16px}
  .pl-cmp{gap:8px}
  .pl-cmp>div{padding:12px}
  .pl-card{padding:22px 16px 16px}
  .pl-card-ic{width:60px;height:60px;border-radius:15px}
  .pl-card h2{font-size:20px}
}
@media (max-width:420px){.pl-lg{display:none}}
@media (max-width:359px){.pl-ic{display:none}}

/* ---------- motion ---------- */
.rv{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .rv{opacity:1;transform:none}
}

/* ---------- device helpers ---------- */
@media (pointer:coarse){.only-pc{display:none!important}}
.is-touch .only-pc{display:none!important}

/* Six featured games remain selectable without clipping on small screens. */
.hn button,.hn button>span{min-width:0}
@media(max-width:899px){.hn{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));row-gap:10px}.hs-cp{bottom:132px}.hn button{min-height:36px}.hn button b{overflow-wrap:anywhere}}
@media(max-width:380px){.hdr .wrap{gap:8px}.hdr-r .pchip{padding:0 3px;gap:0}.hdr-r .pchip .nm{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}}