:root{--bg:#0b0e14;--pn:#141922;--pn2:#1b212c;--tx:#e8ecf3;--mu:#8a94a6;--ac:#4db8ff;
--ac2:#7c5cff;--gd:#3ddc84;--rd:#ff6b6b;--yl:#ffc857;--bd:#232a36}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--tx);
font:15px/1.65 "Pretendard","Malgun Gothic",system-ui,-apple-system,sans-serif;
-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}img{max-width:100%;display:block}
h1,h2,h3{letter-spacing:-.4px}

.hd{position:sticky;top:0;z-index:30;display:flex;gap:16px;align-items:center;
padding:10px 22px;background:rgba(11,14,20,.9);backdrop-filter:blur(10px);
border-bottom:1px solid var(--bd)}
.logo{font-weight:800;font-size:16px;white-space:nowrap;line-height:1.15}
.logo b{color:var(--ac)}
.logo i{display:block;font-style:normal;font-size:11px;color:var(--mu);font-weight:600;
letter-spacing:.3px}
.ytl{color:#ff6b6b}
.hnav{margin-left:auto;display:flex;gap:16px;font-size:13.5px;color:var(--mu)}
.hnav a:hover{color:var(--tx)}
.sb{position:relative;flex:1;max-width:420px}
.sb input{width:100%;padding:8px 13px;border-radius:9px;border:1px solid var(--bd);
background:var(--pn);color:var(--tx);font-size:14px;outline:none}
.sb input:focus{border-color:var(--ac)}

/* 검색 히어로 — 이 사이트에서 제일 먼저 보여야 하는 것 */
.shero{padding:56px 20px 40px;text-align:center;
background:radial-gradient(1100px 340px at 50% -60px,rgba(77,184,255,.16),transparent 70%),
linear-gradient(180deg,#101725,var(--bg));border-bottom:1px solid var(--bd)}
.shero h1{font-size:clamp(28px,5vw,46px);margin:0 0 10px;font-weight:800}
.shero h1 em{font-style:normal;background:linear-gradient(90deg,var(--ac),var(--ac2));
-webkit-background-clip:text;background-clip:text;color:transparent}
.shero .sub{color:var(--mu);margin:0 0 26px;font-size:15.5px}
.bigsearch{position:relative;max-width:660px;margin:0 auto;display:flex;align-items:center;
background:var(--pn);border:1px solid #2c3646;border-radius:14px;padding:6px 6px 6px 14px;
box-shadow:0 12px 40px rgba(0,0,0,.45)}
.bigsearch:focus-within{border-color:var(--ac);box-shadow:0 12px 44px rgba(77,184,255,.22)}
.mag{width:20px;height:20px;flex:none;fill:none;stroke:var(--mu);stroke-width:2;stroke-linecap:round}
.bigsearch input{flex:1;border:0;background:0;color:var(--tx);font-size:16px;padding:12px 12px;outline:none}
.bigsearch button{border:0;border-radius:10px;padding:11px 20px;font-size:14.5px;font-weight:700;
color:#06121d;background:linear-gradient(90deg,var(--ac),#6fd0ff);cursor:pointer}
.quick{margin-top:14px;display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.quick a{font-size:12.5px;color:var(--mu);border:1px solid var(--bd);border-radius:999px;
padding:4px 11px}.quick a:hover{color:var(--tx);border-color:var(--ac)}
.sr{position:absolute;top:calc(100% + 8px);left:0;right:0;background:var(--pn2);
border:1px solid var(--bd);border-radius:12px;overflow:hidden;display:none;
max-height:62vh;overflow-y:auto;text-align:left;z-index:40;box-shadow:0 14px 40px rgba(0,0,0,.5)}
.sr a,.sr .no{display:block;padding:10px 15px;border-bottom:1px solid var(--bd);font-size:14px}
.sr a:hover{background:#2a3342}.sr .sm{color:var(--mu);font-size:12px}
.sr .so{color:var(--gd);font-size:12px;font-weight:700;margin-left:6px}

/* ⚠ 여기에 overflow-x:hidden 을 넣으면 안 된다. 조상에 overflow 가 걸리면
   자식의 position:sticky 가 통째로 죽는다 — 좌우 배너가 안 따라오던 원인이었다
   (2026-08-11). 가로 넘침은 grid 자식의 min-width:0 으로 막는다. */
.wrap{display:grid;grid-template-columns:220px minmax(0,1fr) 220px;gap:22px;
max-width:1440px;margin:0 auto;padding:26px 20px 70px}
.side{display:flex;flex-direction:column;gap:18px;position:sticky;top:66px;align-self:start;min-width:0}
.mid{min-width:0}
h2{font-size:20px;margin:38px 0 15px}
h2 small,h3 small{display:block;font-size:12.5px;color:var(--mu);font-weight:400;margin-top:4px}

.band{display:flex;gap:22px;align-items:center;flex-wrap:wrap;
background:linear-gradient(120deg,#16233a,#131924);border:1px solid #28374d;
border-radius:16px;padding:18px 22px}
.bl{display:flex;gap:12px;align-items:baseline;flex-wrap:wrap}
.lab{color:var(--mu);font-size:12.5px}
.dnum{font-size:40px;font-weight:800;color:var(--ac);line-height:1}
.bn{font-size:15px;font-weight:600}.cd2{color:var(--mu);font-size:12.5px}
.br{color:var(--mu);font-size:12.5px;max-width:420px;margin-left:auto}.br b{color:#cfe4f5}

.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;margin-top:14px}
.stats>div{background:var(--pn);border:1px solid var(--bd);border-radius:12px;padding:14px}
.stats b{display:block;font-size:24px;color:var(--ac)}
.stats span{color:var(--mu);font-size:12.5px}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:14px}
.card{background:var(--pn);border:1px solid var(--bd);border-radius:13px;overflow:hidden;
transition:.16s}
.card:hover{border-color:var(--ac);transform:translateY(-3px);box-shadow:0 10px 26px rgba(0,0,0,.4)}
.cimg{position:relative}
.coff{position:absolute;left:8px;top:8px;background:#2f7d32;color:#c6ffb8;font-weight:800;
font-size:13px;padding:2px 8px;border-radius:6px}
.cb{padding:11px 12px 13px}
.nm{font-weight:600;font-size:13.5px;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;
-webkit-box-orient:vertical;overflow:hidden;min-height:36px}
.row{display:flex;gap:8px;align-items:center;margin-top:8px;flex-wrap:wrap}
.base{color:var(--mu);text-decoration:line-through;font-size:12.5px}
.now{font-size:15px;font-weight:700}
.save{color:var(--gd);font-size:12px;margin-top:3px}
.badge{font-size:11.5px;padding:2px 8px;border-radius:6px;font-weight:600}
.b-best{background:#14512f;color:#6dfaa8}.b-normal{background:#2c3340;color:#adb8c8}
.b-wait{background:#5a2323;color:#ff9b9b}.b-none{background:#2c3340;color:#9aa5b5}
.b-thin{background:#2b3444;color:#93a2b8}.b-free{background:#22384f;color:#8fd0ff}
.b-up{background:#14512f;color:#6dfaa8}.b-down{background:#5a2323;color:#ff9b9b}
.b-flat{background:#2c3340;color:#adb8c8}.b-unknown{background:#2c3340;color:#8f98a8}
.trend{font-size:11.5px;color:var(--mu)}.t-up{color:var(--gd)}.t-down{color:var(--rd)}

.rlist{display:flex;flex-direction:column;gap:10px}
.rrow{display:flex;gap:14px;background:var(--pn);border:1px solid var(--bd);border-radius:12px;
padding:11px;align-items:center}.rrow:hover{border-color:var(--ac)}
.rrow img{width:140px;border-radius:8px;flex:none}
.dl{font-size:13px;color:var(--mu);margin-top:3px}.dl b{color:var(--gd)}
.why{font-size:12.5px;color:#9fb4cc;margin-top:5px}

.ad{background:var(--pn);border:1px solid var(--bd);border-radius:12px;padding:11px;min-width:0}
.ad h3{margin:0 0 9px;font-size:13px}
.ad h3 small{font-size:11.5px;margin-top:2px}
.plist{display:flex;flex-direction:column;gap:14px;min-width:0}
.pcard{display:block;min-width:0}
.pcard:hover .pn{color:var(--ac)}
.pcard:hover .pimg{border-color:var(--ac)}
.pimg{display:block;width:100%;aspect-ratio:1;background:#fff;border:1px solid var(--bd);
border-radius:10px;overflow:hidden}
.pimg img{width:100%;height:100%;object-fit:contain}
.pn{display:block;font-size:12px;line-height:1.4;margin-top:7px;
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pp{display:block;font-size:14px;font-weight:800;color:var(--yl);margin-top:3px}
.pp i{font-style:normal;font-size:10.5px;color:#7fb6e8;font-weight:600;margin-left:4px}
.adnote{margin:11px 0 0;font-size:10.5px;color:#5f6a7d}
/* 본문 안 묶음은 가로로 눕힌다 — 세로로 쌓으면 본문이 광고로 끊긴다 */
.mid .ad .plist{flex-direction:row;overflow-x:auto;padding-bottom:5px;gap:12px}
.mid .ad .pcard{flex:0 0 168px}
.rules ul{margin:0 0 16px;padding-left:19px}
.rules li{margin:6px 0;font-size:13.5px;color:#c3ccd9}
.cal{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:6px}
.cal li{display:grid;grid-template-columns:1fr auto auto;gap:12px;align-items:center;
background:var(--pn);border:1px solid var(--bd);border-radius:10px;padding:10px 14px;font-size:13.5px}
.cal li.past{opacity:.4}.cal li.big{border-color:#2c4360}
.cal li.fest b{font-weight:500;color:#b9c4d2}
.cal span{color:var(--mu);font-size:12.5px}
.cal em{font-style:normal;color:var(--ac);font-weight:700;font-size:13px}
.asof{color:var(--mu);font-size:12px;margin-top:10px}
.score{background:var(--pn);border:1px solid var(--bd);border-radius:12px;padding:16px;font-size:16px}
.score b{font-size:28px;color:var(--gd)}.score span{color:var(--mu)}
.score em{display:block;font-style:normal;color:var(--mu);font-size:12.5px;margin-top:4px}
.score.pend{font-size:13.5px;color:var(--mu);line-height:1.7}
.again{margin-top:34px;background:linear-gradient(120deg,#16233a,#131924);
border:1px solid #28374d;border-radius:13px;padding:16px 18px}
.again b{display:block;font-size:15px}
.again span{display:block;color:var(--mu);font-size:13px;margin-top:5px}
.rc a{border-color:#2c4360;color:#b8c3d2}
.rc:empty{display:none}
.rl{font-size:12px;color:var(--mu);align-self:center;margin-right:2px}
.warn{background:#4a3a12;border:1px solid #6b551b;color:#ffd77a;padding:10px 14px;
border-radius:10px;font-size:13px;margin-bottom:14px}

/* 게임 페이지 */
.ghead{display:flex;gap:18px;align-items:center;margin-bottom:18px;position:relative;
border-radius:14px;padding:16px;overflow:hidden}
.ghead[data-bg]::before{content:"";position:absolute;inset:0;background-image:var(--bg-img);
background-size:cover;background-position:center;opacity:.16;filter:saturate(.8)}
.ghead[data-bg]::after{content:"";position:absolute;inset:0;
background:linear-gradient(90deg,var(--bg) 8%,rgba(11,14,20,.55) 60%,rgba(11,14,20,.85))}
.ghead>*{position:relative;z-index:1}
.ghead img{width:250px;border-radius:11px;flex:none}
h1{font-size:26px;margin:0}
.meta{color:var(--mu);font-size:13px;margin-top:7px}
.steam{display:inline-block;margin-top:9px;font-size:12.5px;color:var(--ac);
border:1px solid #26435c;border-radius:8px;padding:4px 11px}
.vd{background:linear-gradient(150deg,#17202e,var(--pn));border:1px solid #26303f;
border-radius:15px;padding:20px}
.vhead{font-size:27px;font-weight:800;line-height:1.3;letter-spacing:-.6px}
.v-buy .vhead{color:#6dfaa8}.v-wait .vhead{color:#ffb86b}.v-free .vhead{color:#8fd0ff}
.vsub2{margin-top:7px;font-size:14px;color:#b8c3d2}
.ours{margin-top:18px}
.vlist{display:flex;gap:11px;overflow-x:auto;padding-bottom:4px}
.vcard{flex:0 0 210px;background:var(--pn);border:1px solid var(--bd);border-radius:11px;
overflow:hidden;transition:.15s}
.vcard:hover{border-color:#ff6b6b}
.vcard img{width:100%;aspect-ratio:16/9;object-fit:cover}
.vk{display:inline-block;margin:8px 10px 0;font-size:11px;color:#ff9b9b;
background:#3a1a1a;border-radius:5px;padding:1px 7px}
.vt{display:block;padding:5px 10px 10px;font-size:12.5px;line-height:1.4;color:#c7d0dc}
.ptab{margin-top:16px;border:1px solid var(--bd);border-radius:12px;overflow:hidden;
background:#111722}
.prow{display:flex;align-items:baseline;gap:12px;padding:11px 16px;border-bottom:1px solid var(--bd)}
.prow:last-child{border-bottom:0}
.prow span{width:52px;flex:none;color:var(--mu);font-size:12.5px}
.prow b{font-size:19px;font-weight:700}
.prow em{font-style:normal;color:var(--mu);font-size:13px}
.prow .strike{color:var(--mu);text-decoration:line-through;font-weight:500}
.prow.off{background:#132a17}.prow.off b{color:#6dfaa8;font-size:22px}
.prow.off em{color:#6dfaa8}
.prow.fin{background:#152030}.prow.fin b{font-size:30px;color:#fff}
.dend{margin-top:9px;font-size:13.5px;color:#ffd08a}
.dend b{color:var(--yl);font-size:16px}.dend span{color:var(--mu);font-size:12.5px}
.lows{display:flex;gap:11px;flex-wrap:wrap;margin-top:15px;padding-top:15px;border-top:1px solid var(--bd)}
.lows>div{flex:1;min-width:140px}
.lows span{display:block;color:var(--mu);font-size:12.5px}
.lows b{font-size:18px}.lows em{font-style:normal;color:var(--gd);font-size:12.5px;margin-left:6px}
.lows i{font-style:normal;color:#5f6a7d;font-size:11px}
.prob{margin-top:15px;padding-top:14px;border-top:1px solid var(--bd);
display:flex;gap:11px;align-items:baseline;flex-wrap:wrap}
.prob b{font-size:32px;color:var(--ac);line-height:1}.prob span{font-size:14px}
.prob em{font-style:normal;color:var(--mu);font-size:12.5px;flex-basis:100%}
.vsub{margin-top:14px;padding-top:13px;border-top:1px solid var(--bd);font-size:14px;
color:#c3ccd9;display:flex;gap:9px;align-items:baseline;flex-wrap:wrap}

.dg,.tl{width:100%;height:auto;background:var(--pn);border:1px solid var(--bd);border-radius:12px}
.dg .grid,.tl .grid{stroke:#232a36}
.dg .ax,.tl .ax{fill:#8a94a6;font-size:11px}
.dg .bar{fill:#2f7d32}.dg .bar.best{fill:#3ddc84}
.dg .bl{fill:#cfeed9;font-size:10.5px;font-weight:700}
.tl .line{fill:none;stroke:var(--ac);stroke-width:2}.tl .fill{fill:rgba(77,184,255,.1)}
.tl .umark line{stroke:var(--yl);stroke-width:1;stroke-dasharray:2 3;opacity:.5}
.tl .umark circle{fill:var(--yl)}.tl .dmark{stroke:var(--gd);stroke-width:3}
.lg{display:flex;gap:16px;font-size:12px;color:var(--mu);margin-top:8px;flex-wrap:wrap}
.lg i{display:inline-block;width:12px;height:3px;margin-right:5px;vertical-align:middle}
.lg .l1{background:var(--ac)}.lg .l2{background:var(--yl)}.lg .l3{background:var(--gd)}

.dtab{width:100%;border-collapse:collapse;margin-top:12px;font-size:13.5px}
.dtab th{text-align:left;color:var(--mu);font-weight:500;font-size:12.5px;
padding:8px 10px;border-bottom:1px solid var(--bd)}
.dtab td{padding:9px 10px;border-bottom:1px solid #1b212c}
.dtab tr:hover td{background:#151b25}
.dtab .pc{color:var(--gd);font-weight:700}
.dtab .pw b{font-weight:700}.dtab .pw s{color:var(--mu);margin-left:7px;font-size:12px}
.dtab .mk{text-align:right}
.dtab em{font-style:normal;font-size:11px;padding:1px 7px;border-radius:5px;margin-left:5px}
.dtab em.best{background:#14512f;color:#6dfaa8}.dtab em.live{background:#5a4413;color:var(--yl)}
.dtab .src{font-style:normal;color:#5f6a7d;font-size:11px;margin-left:7px}
.thin{color:var(--mu);font-size:13px}
.live{display:inline-block;margin-top:7px;margin-right:8px;font-size:12.5px;color:#8fe6b0;
background:#14351f;border:1px solid #1e5233;border-radius:999px;padding:3px 11px}
.atab{width:100%;border-collapse:collapse;margin-top:10px;font-size:13.5px}
.atab td{padding:10px;border-bottom:1px solid #1b212c;vertical-align:top}
.atab tr:hover td{background:#151b25}
.atab .ap{color:var(--yl);font-weight:800;width:66px;white-space:nowrap}
.atab b{display:block}.atab span{display:block;color:var(--mu);font-size:12.5px;margin-top:2px}
.atab .hid{color:#7a6a3f;font-style:italic}

.steps{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:9px}
.steps li{background:var(--pn);border:1px solid var(--bd);border-left:3px solid #2c3340;
border-radius:10px;padding:12px 15px;display:grid;grid-template-columns:1fr auto;gap:4px 12px}
.steps li.now{border-left-color:var(--mu)}.steps li.ev{border-left-color:var(--ac)}
.steps b{font-size:14.5px}.steps span{color:var(--mu);font-size:13px}
.steps em{grid-column:1/-1;font-style:normal;color:var(--mu);font-size:12.5px}

.eds{display:flex;flex-direction:column;gap:8px}
.eds>div{display:flex;gap:12px;align-items:center;background:var(--pn);
border:1px solid var(--bd);border-radius:10px;padding:11px 14px;font-size:13.5px}
.eds span{flex:1}.eds b{font-size:15px}
.eds em{font-style:normal;color:var(--gd);font-size:12.5px}

.tr{width:100%;border-radius:12px;background:#000;border:1px solid var(--bd)}
.abt{font-size:14px;color:#c7d0dc;white-space:pre-wrap;margin:14px 0 0}
.shots{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:9px;margin-top:13px}
.shots img{border-radius:9px}

.up{background:var(--pn);border:1px solid var(--bd);border-radius:12px;padding:15px;margin-bottom:11px}
.ud{color:var(--ac);font-size:12.5px;font-weight:700}
.ut{font-size:14px;color:var(--mu);margin:3px 0 9px}
.krs{margin:0;padding-left:18px}.krs li{margin:4px 0;font-size:14.5px}
details{margin-top:10px}summary{cursor:pointer;color:var(--mu);font-size:12.5px}
details p{font-size:12.5px;color:#9aa5b5;white-space:pre-wrap;max-height:240px;overflow:auto}
.rv{background:var(--pn);border:1px solid var(--bd);border-left:3px solid #2c3340;
border-radius:10px;padding:12px 14px;margin-bottom:9px}
.rv.up{border-left-color:var(--gd)}.rv.dn{border-left-color:var(--rd)}
.rv span{color:var(--mu);font-size:12px}.rv p{margin:5px 0 0;font-size:13.5px}
.src ul{padding-left:19px;color:var(--mu);font-size:13px}.src a{color:var(--ac)}

.ft{border-top:1px solid var(--bd);padding:28px 20px 46px;text-align:center;
color:var(--mu);font-size:12.5px}
.dis{font-size:11.5px;opacity:.72;margin:5px 0}

/* 모바일에선 사이드가 DOM 순서대로 본문 위에 얹혀 첫 화면이 통째로 광고가 된다
   (2026-08-11 실측). order 로 본문을 먼저 세우고 상품은 가로 스크롤로 눕힌다. */
@media(max-width:1080px){.wrap{grid-template-columns:1fr}
.mid{order:1}.side.l{order:2}.side.r{order:3}
.side{position:static;flex-direction:column;overflow:visible}
.side .plist{flex-direction:row;overflow-x:auto;padding-bottom:5px;gap:12px}
.side .pcard{flex:0 0 150px}
.ghead img{width:170px}.dnum{font-size:34px}.br{margin-left:0}}
/* 430px 에서 카드·띠·통계가 화면 밖으로 넘쳤다(2026-08-11 실측).
   최소폭을 좁히고 바깥 여백을 줄여야 두 칸이 들어간다. */
@media(max-width:560px){.wrap{padding:18px 12px 60px;gap:16px}
.ghead{flex-direction:column;align-items:flex-start}
.ghead img{width:100%}.hd .sb{display:none}.hnav{font-size:12.5px;gap:12px}
.vline{font-size:18px}.pnow{font-size:26px}.poff{font-size:20px}
.shero{padding:34px 14px 28px}.bigsearch{padding:5px 5px 5px 11px}
.bigsearch input{font-size:15px;padding:11px 8px}.bigsearch button{padding:10px 14px}
.grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.nm{font-size:12.5px;min-height:34px}.now{font-size:14px}
.stats{grid-template-columns:repeat(2,1fr);gap:9px}
.stats b{font-size:20px}.stats>div{padding:11px}
.band{flex-direction:column;align-items:flex-start;gap:10px;padding:15px 16px}
.bl{gap:9px}.dnum{font-size:30px}.bn{font-size:13.5px}
.br{font-size:12px;max-width:none}
.rrow img{width:104px}
.dtab{font-size:12px}.dtab td,.dtab th{padding:7px 5px}
.dtab .pw s{display:block;margin-left:0}
.shots{grid-template-columns:repeat(2,1fr)}}