:root{
  --bg:#0c0e12;--bg2:#111419;--panel:#15181e;--panel2:#1b1f26;--line:#262a33;
  --text:#e8ecf8;--sub:#9a9fab;
  --accent:#ffbb1f;--accent2:#ff9f1f;--neon:#ffd166;
  --green:#3ddc97;--greenbg:#12382e;--amber:#ffb84d;--amberbg:#3a2a10;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;color:var(--text);font-family:-apple-system,"Segoe UI","Noto Sans KR","Malgun Gothic",sans-serif;line-height:1.5;
  background:radial-gradient(1100px 520px at 12% -8%,rgba(255,187,31,.16),transparent 60%),
             radial-gradient(900px 480px at 100% 0%,rgba(255,159,31,.13),transparent 55%),var(--bg);
  background-attachment:fixed;min-height:100vh}
a{color:inherit;text-decoration:none}

.top{display:flex;gap:18px;align-items:center;flex-wrap:wrap;padding:12px 22px;
  background:rgba(12,14,18,.82);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5}
.logo{font-size:1.35rem;font-weight:800;letter-spacing:-.02em;
  background:linear-gradient(90deg,#fff,var(--neon));-webkit-background-clip:text;background-clip:text;color:transparent}
.logo span{font-size:.75rem;margin-left:7px;font-weight:700;color:var(--accent);-webkit-text-fill-color:var(--accent);letter-spacing:.08em;text-transform:uppercase}
.search{display:flex;gap:8px;flex:1;min-width:220px;max-width:540px}
.search input{flex:1;padding:9px 14px;border-radius:8px;border:1px solid var(--line);background:var(--panel);color:var(--text);outline:none;transition:border-color .15s,box-shadow .15s}
.search input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(255,187,31,.2)}
.search button,.btn{padding:9px 18px;border-radius:8px;border:0;color:#fff;font-weight:700;cursor:pointer;display:inline-block;
  background:linear-gradient(135deg,var(--accent),var(--accent2));box-shadow:0 6px 18px rgba(255,187,31,.28);transition:transform .12s,box-shadow .12s}
.search button:hover,.btn:hover{transform:translateY(-1px);box-shadow:0 8px 24px rgba(255,159,31,.4)}

main{max-width:1200px;margin:0 auto;padding:24px 16px 70px}
.hero h1{margin:6px 0 2px;font-size:1.75rem;letter-spacing:-.02em}
.hero p{margin:0 0 14px;color:var(--sub)}
.filters{display:flex;gap:18px;flex-wrap:wrap;align-items:center;margin:8px 0 18px;padding:10px 14px;background:var(--bg2);border:1px solid var(--line);border-radius:10px;color:var(--sub);font-size:.93rem}
.filters select{margin-left:6px;padding:6px 9px;border-radius:6px;background:var(--panel);color:var(--text);border:1px solid var(--line)}
.filters input[type=checkbox]{accent-color:var(--accent)}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}
.card{background:linear-gradient(180deg,var(--panel),var(--bg2));border:1px solid var(--line);border-radius:12px;overflow:hidden;display:flex;flex-direction:column;transition:transform .15s,border-color .15s,box-shadow .15s}
.card:hover{transform:translateY(-3px);border-color:var(--accent);box-shadow:0 10px 30px rgba(255,187,31,.22)}
.card img{width:100%;height:auto;aspect-ratio:460/215;object-fit:cover;background:#050814;display:block}
.card .body{padding:11px 13px 13px;display:flex;flex-direction:column;gap:7px;flex:1}
.card h2{font-size:.97rem;margin:0;font-weight:600;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;min-height:2.9em}
.tags{display:flex;gap:6px;flex-wrap:wrap}
.tag{font-size:.72rem;padding:2px 8px;border-radius:999px;background:var(--panel2);color:var(--sub);border:1px solid var(--line)}
.tag.ko{background:rgba(255,209,102,.1);color:var(--neon);border-color:rgba(255,209,102,.35)}
.tag.low{background:var(--amberbg);color:var(--amber);border-color:rgba(255,184,77,.4)}
.price{margin-top:auto;display:flex;align-items:center;gap:8px;justify-content:flex-end}
.disc{background:var(--greenbg);color:var(--green);padding:2px 8px;border-radius:6px;font-weight:800;font-size:.9rem;border:1px solid rgba(61,220,151,.35)}
.orig{color:var(--sub);text-decoration:line-through;font-size:.85rem}
.now{font-weight:800}

.pager{display:flex;gap:16px;justify-content:center;align-items:center;margin:28px 0;color:var(--sub)}
.pager a{padding:7px 16px;border:1px solid var(--line);border-radius:8px;background:var(--panel);color:var(--text)}
.pager a:hover{border-color:var(--accent)}
.empty{color:var(--sub);text-align:center;padding:70px 0}

.back{color:var(--sub);display:inline-block;margin-bottom:12px}
.back:hover{color:var(--neon)}
.detail{display:grid;grid-template-columns:minmax(0,460px) 1fr;gap:24px;align-items:start}
.cover{width:100%;height:auto;border-radius:12px;display:block;box-shadow:0 14px 40px rgba(0,0,0,.5);border:1px solid var(--line)}
.info h1{margin:0 0 10px;font-size:1.7rem;letter-spacing:-.02em}
.price.big{justify-content:flex-start;margin:16px 0}
.price.big .now{font-size:1.8rem}
.desc{color:var(--sub)}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:24px 0}
.stats div{background:linear-gradient(180deg,var(--panel),var(--bg2));border:1px solid var(--line);border-radius:10px;padding:13px 15px}
.stats b{display:block;font-size:1.15rem}
.stats span{color:var(--sub);font-size:.85rem}
.chartbox{background:linear-gradient(180deg,var(--panel),var(--bg2));border:1px solid var(--line);border-radius:12px;padding:16px 18px}
.chartbox h2{margin:0 0 10px;font-size:1.05rem}
.note{color:var(--sub);font-size:.8rem;margin:10px 0 0}

footer{border-top:1px solid var(--line);padding:26px 16px;text-align:center;color:var(--sub);font-size:.82rem;background:rgba(12,14,18,.6)}
footer p{margin:2px 0}
@media(max-width:720px){.detail{grid-template-columns:1fr}.top{padding:10px 14px}}

/* ---- SVG 요소 ---- */
.bgdeco{position:fixed;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}
.logo{display:flex;align-items:center;gap:9px;background:none;-webkit-text-fill-color:initial;color:var(--text)}
.logo b{background:linear-gradient(90deg,#fff,var(--neon));-webkit-background-clip:text;background-clip:text;color:transparent;font-size:1.3rem;letter-spacing:-.02em}
.logo svg{filter:drop-shadow(0 0 8px rgba(255,187,31,.55))}
.search{position:relative}
.search .sicon{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--sub);display:flex}
.search input[type=search]{padding-left:36px}
.hero{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:6px 0 4px}
.hero h1 em{font-style:normal;background:linear-gradient(90deg,var(--neon),var(--accent2));-webkit-background-clip:text;background-clip:text;color:transparent}
.heroart{width:220px;height:90px;flex:none;opacity:.95}
.chk{display:inline-flex;align-items:center;gap:6px;cursor:pointer}
.thumb{position:relative}
.ribbon{position:absolute;top:10px;left:0;display:inline-flex;align-items:center;gap:4px;padding:4px 12px 4px 9px;font-weight:800;font-size:.85rem;color:#04140d;
  background:linear-gradient(90deg,var(--green),#7cf0bd);clip-path:polygon(0 0,100% 0,calc(100% - 9px) 50%,100% 100%,0 100%);box-shadow:0 4px 14px rgba(61,220,151,.4)}
.tag{display:inline-flex;align-items:center;gap:4px}
.disc{display:inline-flex;align-items:center;gap:3px}
.rangebar{width:100%;max-width:420px;height:auto;display:block;margin:4px 0 8px}
.chart{width:100%;height:auto;display:block}
.chart circle{transition:r .12s}
.chart circle:hover{r:7}
.stats .lab{display:flex;align-items:center;gap:5px;color:var(--sub);font-size:.82rem;margin-bottom:2px}
.stats b{font-size:1.2rem}
.donutbox{display:flex;align-items:center;gap:12px}
.empty{display:flex;flex-direction:column;align-items:center;gap:6px}
.btn{display:inline-flex;align-items:center;gap:7px}
.back{display:inline-flex;align-items:center;gap:6px}
.fdiv{width:min(420px,80%);height:12px;display:block;margin:0 auto 12px}
@media(max-width:720px){.heroart{display:none}}

/* ---- 순위/리뷰/동접 ---- */
.nav{display:flex;gap:6px;margin-left:auto}
.nav a{padding:7px 14px;border-radius:8px;color:var(--sub);font-weight:600;display:inline-flex;align-items:center;gap:6px}
.nav a:hover{color:var(--text);background:var(--panel)}
.meta{display:flex;gap:10px;flex-wrap:wrap;font-size:.8rem;color:var(--sub)}
.m{display:inline-flex;align-items:center;gap:4px}
.m.rev.good{color:var(--green)}.m.rev.mid{color:var(--amber)}.m.rev.bad{color:#ff5d73}
.tag.deck{background:rgba(255,159,31,.14);color:#b69cff;border-color:rgba(255,159,31,.4)}
.live{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px;margin:22px 0 0}
.livebox{background:linear-gradient(180deg,var(--panel),var(--bg2));border:1px solid var(--line);border-radius:10px;padding:13px 15px}
.livebox .lab{display:flex;align-items:center;gap:6px;color:var(--sub);font-size:.82rem}
.livebox .revbar{width:100%;height:auto;display:block;margin:2px 0 0}
.livebox small{color:var(--sub)}
.bignum{font-size:1.5rem;display:block}
.tabs{display:flex;gap:8px;margin:6px 0 16px;flex-wrap:wrap}
.tabs a{padding:8px 18px;border-radius:999px;border:1px solid var(--line);background:var(--bg2);color:var(--sub);font-weight:600}
.tabs a.on{color:#fff;background:linear-gradient(135deg,var(--accent),var(--accent2));border-color:transparent;box-shadow:0 6px 18px rgba(255,187,31,.28)}
.rank{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.rank a{display:grid;grid-template-columns:44px 150px 1fr auto;gap:14px;align-items:center;background:linear-gradient(180deg,var(--panel),var(--bg2));border:1px solid var(--line);border-radius:12px;padding:8px 14px 8px 8px;transition:border-color .15s,transform .15s}
.rank a:hover{border-color:var(--accent);transform:translateX(2px)}
.rank .no{text-align:center;font-weight:800;font-size:1.1rem;color:var(--sub)}
.rank .no.gold{color:var(--amber)}
.rank img{width:150px;height:auto;aspect-ratio:460/215;object-fit:cover;border-radius:6px;background:#050814}
.rname{min-width:0;display:flex;flex-direction:column;gap:8px}
.rname b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mbar{width:100%;max-width:360px;height:8px;display:block}
.rval{text-align:right;display:flex;flex-direction:column}
.rval b{font-size:1.05rem}
.rval span{color:var(--sub);font-size:.8rem}
@media(max-width:720px){.rank a{grid-template-columns:32px 96px 1fr}.rank .rval{grid-column:2 / -1;text-align:left}.rank img{width:96px}.nav{margin-left:0}}

/* ---- 가격 알림 ---- */
.alertbox{margin-top:22px;background:linear-gradient(180deg,var(--panel),var(--bg2));border:1px solid var(--line);border-radius:12px;padding:18px 20px}
.alertbox.narrow{max-width:560px;margin:30px auto}
.ahead{display:flex;align-items:center;gap:9px;color:var(--neon)}
.ahead h2{margin:0;font-size:1.1rem;color:var(--text)}
.asub{color:var(--sub);font-size:.9rem;margin:4px 0 12px}
.aform{display:grid;grid-template-columns:200px 1fr auto;gap:12px;align-items:end}
.aform label{display:flex;flex-direction:column;gap:5px;font-size:.82rem;color:var(--sub)}
.aform input[type=number],.aform input[type=text]{padding:10px 12px;border-radius:8px;border:1px solid var(--line);background:var(--bg);color:var(--text);outline:none;font-size:.95rem}
.aform input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(255,187,31,.2)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.flash{padding:10px 14px;border-radius:8px;font-size:.9rem;margin:0 0 12px}
.flash.good{background:var(--greenbg);color:var(--green);border:1px solid rgba(61,220,151,.35)}
.flash.bad{background:#3a1520;color:#ff8a9b;border:1px solid rgba(255,93,115,.4)}
.ahelp{margin-top:12px;color:var(--sub);font-size:.88rem}
.ahelp summary{cursor:pointer;color:var(--accent)}
.ahelp ol{margin:8px 0;padding-left:20px}
@media(max-width:720px){.aform{grid-template-columns:1fr}}

/* ---- 로그인/위시리스트/룰렛/미디어 ---- */
.nav a.me{display:inline-flex;align-items:center;gap:6px;color:var(--text)}
.nav a.me img{border-radius:50%;border:1px solid var(--line)}
.nav a.loginbtn{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff}
.btn.wide{display:flex;justify-content:center;width:100%}
.note a{color:var(--accent)}
.actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.ghost{padding:9px 16px;border-radius:8px;border:1px solid var(--line);background:var(--panel);color:var(--text);cursor:pointer;display:inline-flex;align-items:center;gap:7px;font:inherit;font-weight:600}
.ghost:hover{border-color:var(--accent)}
.heartbtn.on{color:#ff6b9a;border-color:rgba(255,107,154,.5)}
.chicken{display:flex;align-items:center;gap:7px;color:var(--amber);margin:2px 0 8px;font-weight:600}
.chicken small{color:var(--sub);font-weight:400}
.chickenhint{display:inline-flex;align-items:center;gap:6px;color:var(--amber)}
.mediabox,.about{margin-top:22px;background:linear-gradient(180deg,var(--panel),var(--bg2));border:1px solid var(--line);border-radius:12px;padding:16px 18px}
.mediabox h2,.about h2{margin:0 0 10px;font-size:1.05rem}
.trailer{position:relative;max-width:720px;aspect-ratio:16/9;background:#050814;border-radius:10px;overflow:hidden}
.trailer img,.trailer video{width:100%;height:100%;object-fit:cover;display:block}
.playbtn{position:absolute;inset:0;margin:auto;width:64px;height:64px;border:0;background:none;cursor:pointer;padding:0;transition:transform .12s}
.playbtn:hover{transform:scale(1.08)}
.shots{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:8px;margin-top:12px}
.shots img{width:100%;height:auto;border-radius:6px;display:block;border:1px solid var(--line);transition:border-color .12s}
.shots a:hover img{border-color:var(--accent)}
.aboutbody summary{cursor:pointer;color:var(--accent);margin:4px 0 8px}
.abouttext{color:var(--text);line-height:1.7;max-height:520px;overflow:auto;padding-right:6px}
.abouttext img{max-width:100%;height:auto;border-radius:6px;margin:8px 0}
.abouttext h1,.abouttext h2,.abouttext h3{font-size:1.05rem;margin:14px 0 6px}
.sect{margin:30px 0 12px;font-size:1.15rem}
.mepanels{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px;margin:6px 0}
.aform.one{grid-template-columns:1fr auto}
.alist{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}
.alist li{display:flex;gap:14px;align-items:center;background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:10px 14px;flex-wrap:wrap}
.alist li>span{color:var(--sub);margin-left:auto;font-size:.88rem}
.small{color:#ff8a9b;font-size:.85rem}
.logout{margin-top:30px}
.rlt{display:grid;grid-template-columns:minmax(0,420px) 1fr;gap:26px;align-items:center;margin-top:10px}
.wheelbox{position:relative;max-width:420px}
.wheelbox svg#wheel{width:100%;height:auto;display:block;filter:drop-shadow(0 10px 30px rgba(255,187,31,.3))}
.pointer{position:absolute;top:-8px;left:50%;width:34px;height:34px;transform:translateX(-50%) rotate(180deg)}
.rside{display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.resultcard[hidden]{display:none}
.rescard{display:grid;grid-template-columns:200px 1fr;gap:12px;align-items:center;background:var(--panel);border:1px solid var(--accent);border-radius:10px;padding:10px;max-width:520px}
.rescard img{width:100%;height:auto;border-radius:6px;display:block}
.rescard div{display:flex;flex-direction:column;gap:4px}
.rescard span{color:var(--sub);font-size:.88rem}
@media(max-width:720px){.rlt{grid-template-columns:1fr}.rescard{grid-template-columns:1fr}.nav a.me span{display:none}}

/* ---- 정책 페이지 / 광고 / 404 / 푸터 링크 ---- */
.prose{max-width:760px;margin:0 auto;line-height:1.8}
.prose h1{font-size:1.7rem;letter-spacing:-.02em;margin:6px 0 4px}
.prose h2{font-size:1.1rem;margin:26px 0 6px;color:var(--neon)}
.prose p,.prose li{color:var(--text)}
.prose ul{padding-left:20px}
.prose a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.prose .meta{color:var(--sub);font-size:.88rem}
.prose code{background:var(--panel);padding:1px 6px;border-radius:4px;font-size:.88em}
.bigmail{font-size:1.4rem;font-weight:700;margin:18px 0}
.flinks{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;margin-bottom:10px}
.flinks a{color:var(--sub)}
.flinks a:hover{color:var(--text)}
.adslot{position:relative;margin:22px 0;min-height:110px;background:rgba(17,26,51,.5);border:1px dashed var(--line);border-radius:10px;padding:18px 8px 8px;overflow:hidden}
.adlabel{position:absolute;top:4px;left:10px;font-size:.7rem;color:var(--sub)}
.adwide{grid-column:1/-1}
.notfound{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding:50px 0}
.notfound h1{margin:10px 0 0}
.notfound p{color:var(--sub)}
.danger{margin-top:30px;color:var(--sub);font-size:.9rem}
.danger summary{cursor:pointer}
.dangerbtn{border-color:rgba(255,93,115,.5);color:#ff8a9b}

/* ---- 소셜 로그인 버튼 ---- */
.sns{margin-top:10px;background:var(--panel2);border:1px solid var(--line);color:var(--text);box-shadow:none}
.sns.discord{background:#5865f2;border-color:#5865f2;color:#fff}
.sns.google{background:#fff;border-color:#dadce0;color:#1f1f1f}
.sns.kakao{background:#fee500;border-color:#fee500;color:#191919}
.sns:hover{transform:translateY(-1px);box-shadow:0 8px 22px rgba(0,0,0,.35)}

/* ---- 필터 바 / 카드 개선 ---- */
.fbar{display:grid;grid-template-columns:auto 1fr;gap:12px 20px;align-items:center;margin:10px 0 18px;padding:14px 16px;background:linear-gradient(180deg,var(--panel),var(--bg2));border:1px solid var(--line);border-radius:14px;box-shadow:0 8px 28px rgba(0,0,0,.25)}
.fsel{display:flex;gap:10px;flex-wrap:wrap}
.fsel label{display:flex;flex-direction:column;gap:3px;font-size:.72rem;color:var(--sub);letter-spacing:.02em}
.fsel select{min-width:128px;padding:8px 30px 8px 12px;border-radius:9px;background:var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238b97b8' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center;color:var(--text);border:1px solid var(--line);font:inherit;font-size:.92rem;appearance:none;-webkit-appearance:none;cursor:pointer}
.fsel select:hover,.fsel select:focus{border-color:var(--accent);outline:none}
.chips{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.chip{position:relative;cursor:pointer}
.chip input{position:absolute;opacity:0;inset:0;width:100%;height:100%;cursor:pointer;margin:0}
.chip span{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:999px;background:var(--bg);border:1px solid var(--line);color:var(--sub);font-weight:600;font-size:.9rem;transition:all .15s}
.chip:hover span{border-color:var(--accent);color:var(--text)}
.chip input:checked + span{background:linear-gradient(135deg,rgba(255,187,31,.25),rgba(255,159,31,.25));border-color:var(--accent);color:#fff;box-shadow:0 0 0 1px rgba(255,187,31,.35) inset,0 4px 14px rgba(255,187,31,.2)}
.chip input:focus-visible + span{outline:2px solid var(--neon);outline-offset:2px}
.fmeta{grid-column:1/-1;display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding-top:10px;border-top:1px dashed var(--line);color:var(--sub);font-size:.88rem}
.fmeta b{color:var(--text);margin-right:4px}
.achip{display:inline-flex;gap:6px;align-items:center;padding:3px 10px;border-radius:999px;background:var(--panel2);border:1px solid var(--line);color:var(--text)}
.achip:hover{border-color:#ff8a9b}
.reset{margin-left:auto;color:var(--accent)}
.cardw{position:relative;display:flex}
.cardw .card{flex:1;min-width:0}
.heart{position:absolute;top:10px;right:10px;width:34px;height:34px;border-radius:50%;border:1px solid rgba(255,255,255,.18);background:rgba(12,14,18,.72);backdrop-filter:blur(6px);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;transition:transform .12s,color .12s,border-color .12s}
.heart:hover{transform:scale(1.1);border-color:#ff6b9a;color:#ff6b9a}
.heart.on{color:#ff6b9a;border-color:rgba(255,107,154,.6)}
.card .ribbon{top:12px;left:0;padding:6px 14px 6px 12px;font-size:1.05rem;font-weight:900;letter-spacing:-.01em;color:#04140d;background:linear-gradient(90deg,#3ddc97,#9af2c8);clip-path:polygon(0 0,100% 0,calc(100% - 10px) 50%,100% 100%,0 100%);box-shadow:0 6px 18px rgba(0,0,0,.45);text-shadow:none;border:0}
.pricebox{margin-top:auto;display:flex;align-items:center;gap:10px;justify-content:flex-end}
.dchip{padding:6px 10px;border-radius:8px;background:var(--green);color:#04140d;font-weight:900;font-size:1.05rem;line-height:1;box-shadow:0 4px 14px rgba(61,220,151,.3)}
.pcol{display:flex;flex-direction:column;align-items:flex-end;line-height:1.25}
.pcol .orig{font-size:.8rem}
.pcol .now{font-size:1.15rem}
.now.free{color:var(--green)}
.totop{position:fixed;right:18px;bottom:20px;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:rgba(17,26,51,.92);color:var(--text);cursor:pointer;z-index:6;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 24px rgba(0,0,0,.4)}
.totop[hidden]{display:none}
.totop svg{transform:rotate(90deg)}
.totop:hover{border-color:var(--accent)}
@media(max-width:860px){.fbar{grid-template-columns:1fr}.chips{justify-content:flex-start}}
@media(max-width:560px){.fsel select{min-width:0}.fsel label{flex:1 1 40%}}

/* ---- 추천 모음 ---- */
.collgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px;margin-top:8px}
.collcard{display:flex;flex-direction:column;background:linear-gradient(180deg,var(--panel),var(--bg2));border:1px solid var(--line);border-radius:14px;overflow:hidden;transition:transform .15s,border-color .15s,box-shadow .15s}
.collcard:hover{transform:translateY(-3px);border-color:var(--accent);box-shadow:0 10px 30px rgba(255,187,31,.22)}
.collthumbs{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:#050814;min-height:70px}
.collthumbs img{width:100%;height:auto;aspect-ratio:460/215;object-fit:cover;display:block}
.collempty{grid-column:1/-1;display:flex;align-items:center;justify-content:center;color:var(--accent);min-height:70px}
.collbody{padding:14px 16px 16px;display:flex;flex-direction:column;gap:6px;flex:1}
.collbody h2{margin:0;font-size:1.1rem}
.collbody p{margin:0;color:var(--sub);font-size:.9rem;line-height:1.6}
.collcount{margin-top:auto;padding-top:6px;color:var(--neon);font-weight:700;font-size:.9rem}
.collsum{background:var(--bg2);border:1px solid var(--line);border-radius:10px;padding:12px 16px;color:var(--text);line-height:1.7;margin:6px 0 16px}

/* ---- 할인율: 붉은 네온 ---- */
.dchip,.disc{background:rgba(255,60,90,.12);color:#ff5d73;border:1px solid #ff5d73;font-weight:900;text-shadow:0 0 3px rgba(255,93,115,.4);box-shadow:0 0 5px rgba(255,93,115,.22),inset 0 0 5px rgba(255,93,115,.1)}
.dchip{padding:6px 11px;border-radius:9px;font-size:1.1rem;line-height:1;letter-spacing:-.01em}
.card:hover .dchip{box-shadow:0 0 8px rgba(255,93,115,.38),inset 0 0 6px rgba(255,93,115,.14)}

/* ---- 툴바 (한 줄) ---- */
.tbar{margin:6px 0 16px}
.trow{display:flex;align-items:center;justify-content:space-between;gap:12px 18px;flex-wrap:wrap;padding-bottom:12px;border-bottom:1px solid var(--line)}
.tchips{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.tchip{position:relative;cursor:pointer}
.tchip input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.tchip span,.fmore summary{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:999px;border:1px solid transparent;background:transparent;color:var(--sub);font-weight:600;font-size:.9rem;transition:background .15s,color .15s,border-color .15s;cursor:pointer;list-style:none}
.fmore summary::-webkit-details-marker{display:none}
.tchip:hover span,.fmore summary:hover{background:var(--panel);color:var(--text)}
.tchip input:checked + span{background:rgba(255,187,31,.18);border-color:rgba(255,187,31,.55);color:#fff}
.tchip input:focus-visible + span{outline:2px solid var(--neon);outline-offset:2px}
.fmore{position:relative;margin-left:4px;padding-left:10px;border-left:1px solid var(--line)}
.fmore[open] summary{background:var(--panel);color:var(--text);border-color:var(--line)}
.fmore summary em{font-style:normal;background:var(--accent);color:#fff;border-radius:999px;min-width:18px;height:18px;padding:0 5px;display:inline-flex;align-items:center;justify-content:center;font-size:.72rem;font-weight:800}
.fpop{position:absolute;top:calc(100% + 8px);left:10px;z-index:7;min-width:230px;display:flex;flex-direction:column;gap:12px;padding:14px;background:var(--panel);border:1px solid var(--line);border-radius:12px;box-shadow:0 16px 40px rgba(0,0,0,.5)}
.fpop label{display:flex;flex-direction:column;gap:5px;font-size:.78rem;color:var(--sub)}
.fpop select,.tsort select{padding:8px 30px 8px 12px;border-radius:9px;background:var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238b97b8' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center;color:var(--text);border:1px solid var(--line);font:inherit;font-size:.9rem;appearance:none;-webkit-appearance:none;cursor:pointer}
.fpop select:hover,.fpop select:focus,.tsort select:hover,.tsort select:focus{border-color:var(--accent);outline:none}
.tright{display:flex;align-items:center;gap:12px}
.tcount{color:var(--sub);font-size:.88rem}
.tcount b{color:var(--text)}
.tactive{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding-top:10px;font-size:.86rem}
.tactive .reset{margin-left:auto;color:var(--sub)}
.tactive .reset:hover{color:var(--accent)}
@media(max-width:640px){.tchips{overflow-x:auto;flex-wrap:nowrap;padding-bottom:2px;max-width:100%}.tchip span,.fmore summary{white-space:nowrap}.tright{width:100%;justify-content:space-between}.fpop{left:auto;right:0}}

.itadsrc{display:block;color:var(--sub);font-size:.72rem;margin-top:2px}
.itadsrc a{color:var(--accent);text-decoration:underline}

.rprice{display:inline-flex;align-items:center;gap:8px;justify-content:flex-end;color:var(--text);font-weight:700;font-size:.9rem}
.dchip.sm{font-style:normal;padding:3px 8px;font-size:.78rem;border-radius:7px}

/* ---- 프로필 메뉴 ---- */
.umenu{position:relative}
.umenu summary.me{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:8px;padding:5px 10px 5px 6px;border-radius:999px;border:1px solid var(--line);background:var(--panel);color:var(--text);font-weight:600}
.umenu summary::-webkit-details-marker{display:none}
.umenu summary.me:hover,.umenu[open] summary.me{border-color:var(--accent)}
.umenu summary.me img{border-radius:50%;display:block}
.umenu summary.me span{max-width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.umenu summary.me svg{color:var(--sub);transition:transform .15s}
.umenu[open] summary.me svg{transform:rotate(180deg)}
.upop{position:absolute;right:0;top:calc(100% + 8px);z-index:8;min-width:190px;padding:6px;background:var(--panel);border:1px solid var(--line);border-radius:12px;box-shadow:0 16px 40px rgba(0,0,0,.5);display:flex;flex-direction:column;gap:2px}
.upop a,.upop button{display:flex;align-items:center;gap:9px;width:100%;padding:9px 12px;border-radius:8px;color:var(--text);font:inherit;font-size:.92rem;background:none;border:0;cursor:pointer;text-align:left}
.upop a:hover,.upop button:hover{background:var(--panel2)}
.upop form{margin:0;border-top:1px solid var(--line);padding-top:4px;margin-top:2px}
.upop form button{color:#ff8a9b}
@media(max-width:560px){.umenu summary.me span{display:none}}

/* ---- 일러스트 배너/양옆 (광고가 켜지면 양옆은 광고로 대체) ---- */
body{position:relative}
.banner{position:absolute;top:0;left:0;right:0;height:340px;z-index:0;pointer-events:none;overflow:hidden;
  -webkit-mask-image:linear-gradient(#000 55%,transparent);mask-image:linear-gradient(#000 55%,transparent)}
.banner img{width:100%;height:100%;object-fit:cover;object-position:center top;display:block;opacity:.95}
header.top{background:linear-gradient(rgba(12,14,18,.55),rgba(12,14,18,0));border-bottom-color:transparent;backdrop-filter:none;transition:background .2s,border-color .2s}
header.top.scrolled{background:rgba(12,14,18,.88);border-bottom-color:var(--line);backdrop-filter:blur(10px)}
main{position:relative;z-index:1}
.heroart{display:none}
.sideart,.sideslot{display:none}
@media(min-width:1760px){
  .sideart,.sideslot{display:block;position:absolute;top:36px;width:240px;pointer-events:none}
  .sideart{height:auto;opacity:.95}
  .sideslot{width:160px;pointer-events:auto}
  .sideart.l{right:calc(100% + 4px)} .sideart.r{left:calc(100% + 4px)}
  .sideslot.l{right:calc(100% + 20px)} .sideslot.r{left:calc(100% + 20px)}
}
/* ---- 로그인 페이지 ---- */
.loginwrap{display:grid;grid-template-columns:1.05fr 1fr;gap:0;max-width:940px;margin:36px auto 10px;border:1px solid var(--line);border-radius:20px;overflow:hidden;box-shadow:0 24px 70px rgba(0,0,0,.45);background:var(--bg2)}
.loginside{padding:38px 34px;background:radial-gradient(520px 320px at 0% 0%,rgba(255,187,31,.28),transparent 70%),radial-gradient(420px 300px at 100% 100%,rgba(255,159,31,.26),transparent 70%),linear-gradient(180deg,#15181e,#111419)}
.loginside h1{margin:0 0 10px;font-size:1.9rem;line-height:1.3;letter-spacing:-.02em}
.loginside h1 em{font-style:normal;background:linear-gradient(90deg,var(--neon),var(--accent2));-webkit-background-clip:text;background-clip:text;color:transparent}
.lead{color:var(--sub);margin:0 0 22px}
.perks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:16px}
.perks li{display:flex;gap:14px;align-items:flex-start}
.perks .pi{flex:none;width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;color:var(--neon);background:rgba(255,209,102,.1);border:1px solid rgba(255,209,102,.3)}
.perks b{display:block}
.perks small{color:var(--sub);font-size:.84rem;line-height:1.5}
.fine{color:var(--sub);font-size:.8rem;margin:24px 0 0}
.logincard{padding:38px 34px;display:flex;flex-direction:column}
.logincard h2{margin:0;font-size:1.4rem}
.provs{display:flex;flex-direction:column;gap:10px;margin:6px 0 18px}
.prov{display:flex;align-items:center;gap:14px;padding:12px 16px;border-radius:12px;border:1px solid var(--line);background:var(--panel);color:var(--text);font-weight:700;transition:transform .12s,border-color .12s,box-shadow .12s}
.prov:hover{transform:translateY(-1px);box-shadow:0 8px 22px rgba(0,0,0,.35)}
.prov .pmark{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:.95rem;flex:none}
.prov .ptxt{flex:1}
.prov svg{opacity:.6}
.prov.steam{border-color:rgba(102,192,244,.4)} .prov.steam .pmark{background:#1b2838;color:#66c0f4;border:1px solid #66c0f4}
.prov.discord{border-color:rgba(88,101,242,.5)} .prov.discord .pmark{background:#5865f2;color:#fff}
.prov.google{border-color:rgba(255,255,255,.25)} .prov.google .pmark{background:#fff;color:#4285f4}
.prov.kakao{border-color:rgba(254,229,0,.5)} .prov.kakao .pmark{background:#fee500;color:#191919}
.prov:hover{border-color:var(--accent)}
.logincard .note{margin:4px 0}
.logincard .note a{color:var(--accent);text-decoration:underline}
@media(max-width:760px){.loginwrap{grid-template-columns:1fr}.loginside{padding:26px 22px}.logincard{padding:26px 22px}.loginside h1{font-size:1.5rem}}
/* ---- 내 페이지 숫자 카드 ---- */
.mestats{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin:10px 0 18px}
.mstat{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 18px;border-radius:14px;border:1px solid var(--line);background:linear-gradient(135deg,var(--panel),var(--bg2));overflow:hidden;position:relative}
.mstat b{display:block;font-size:2rem;line-height:1;letter-spacing:-.02em}
.mstat span{color:var(--sub);font-size:.88rem}
.mstat i{font-style:normal;width:56px;height:56px;border-radius:16px;display:flex;align-items:center;justify-content:center}
.mstat i.pink{color:#ff6b9a;background:rgba(255,107,154,.12)} .mstat i.red{color:#ff5d73;background:rgba(255,93,115,.12)} .mstat i.cyan{color:var(--neon);background:rgba(255,209,102,.1)}

/* ---- 배너는 상단 헤더 영역에만, 본문은 그 아래에서 시작 ---- */
.banner{height:236px;-webkit-mask-image:linear-gradient(#000 62%,transparent);mask-image:linear-gradient(#000 62%,transparent)}
.banner img{object-position:center 28%}
main{padding-top:132px}
@media(max-width:700px){.banner{height:170px}main{padding-top:96px}}
@media(min-width:1760px){.sideart,.sideslot{top:140px}}
header.top:not(.scrolled){background:linear-gradient(rgba(12,14,18,.78),rgba(12,14,18,0))}
header.top:not(.scrolled) .nav a:not(.loginbtn):not(.me){color:#e6edff;text-shadow:0 1px 8px rgba(0,0,0,.85)}

/* ---- 모바일 상단 메뉴 ---- */
.nav a,.umenu summary.me{white-space:nowrap}
@media(max-width:700px){
  header.top{gap:10px 12px;padding:10px 14px}
  .nav{width:100%;margin-left:0;justify-content:space-between;gap:2px}
  .nav a{padding:7px 9px;font-size:.88rem}
  main{padding-top:28px}
  .search{order:3;flex:1 1 100%;max-width:none}
  .logo{order:1}.nav{order:2}
}

/* ---- 양옆 그림/광고: 스크롤을 따라 내려옴 (본문 끝에서 멈춤) ---- */
.sidecol{display:none}
@media(min-width:1760px){
  .sidecol{display:block;position:absolute;top:132px;bottom:0;width:240px;pointer-events:none}
  .sidecol.l{right:calc(100% + 4px)}
  .sidecol.r{left:calc(100% + 4px)}
  .sidecol .sideart,.sidecol .sideslot{position:sticky;top:92px;left:auto;right:auto;display:block;width:100%;height:auto;margin:0}
  .sidecol .sideslot{width:160px;pointer-events:auto}
  .sidecol.l .sideslot{margin-left:auto}
}

/* ---- 게임 상세: 위쪽 여백 ---- */
.back{margin:10px 0 22px}
.detail{margin-top:6px;padding-top:6px}
.detail .info h1{margin-top:6px}
@media(max-width:700px){.back{margin:6px 0 16px}}

/* ---- 모든 페이지: 배너 아래 본문 시작 여백을 통일 ---- */
main{padding-top:152px}
main > section.hero:first-child,main > .back:first-child,main > article:first-child,main > section:first-child{margin-top:0}
@media(min-width:1760px){.sidecol{top:152px}}
@media(max-width:700px){main{padding-top:40px}}

/* ===== 헤더: 투명 대신 자리를 차지하는 단색 바 / 배너는 그 아래에서 자리 차지 ===== */
header.top,header.top.scrolled,header.top:not(.scrolled){background:rgba(12,14,18,.97);border-bottom:1px solid var(--line);backdrop-filter:none}
header.top:not(.scrolled) .nav a:not(.loginbtn):not(.me){color:var(--sub);text-shadow:none}
header.top:not(.scrolled) .nav a:not(.loginbtn):not(.me):hover{color:var(--text)}
.banner{position:relative;top:auto;left:auto;right:auto;height:210px;z-index:0;
  -webkit-mask-image:linear-gradient(#000 68%,transparent);mask-image:linear-gradient(#000 68%,transparent)}
main{padding-top:22px}
@media(min-width:1760px){.sidecol{top:22px}}
@media(max-width:700px){.banner{height:130px}main{padding-top:16px}}

/* ===== 카드: 조금 더 밝게, 윗면 하이라이트와 그림자로 입체감 ===== */
:root{--panel:#15181e;--panel2:#1b1f26;--bg2:#111419;--line:#262a33}
.card,.collcard,.alertbox,.mstat,.livebox,.stats div,.rank a,.chartbox,.mediabox,.about,.collsum,.fpop,.upop{
  border-top-color:rgba(255,255,255,.34);
  box-shadow:0 1px 0 rgba(255,255,255,.08) inset,0 12px 26px rgba(0,0,0,.5),0 2px 0 rgba(0,0,0,.4)}
.card:hover,.collcard:hover{box-shadow:0 1px 0 rgba(255,255,255,.1) inset,0 16px 34px rgba(255,187,31,.28)}
.tag{background:#26367a}

/* ===== 로그인 ===== */
.loginwrap{border-color:#3a4c9a;background:#141f4a;box-shadow:0 1px 0 rgba(255,255,255,.1) inset,0 30px 80px rgba(2,5,20,.6)}
.loginside{position:relative;overflow:hidden;background:radial-gradient(520px 340px at 0% 0%,rgba(255,187,31,.42),transparent 70%),radial-gradient(440px 320px at 100% 100%,rgba(255,159,31,.40),transparent 70%),linear-gradient(180deg,#1b1f26,#121419)}
.lchart{position:absolute;right:-6px;bottom:-4px;width:78%;max-width:300px;opacity:.9;pointer-events:none}
.eyebrow{margin:0 0 10px;color:var(--neon);font-weight:800;font-size:.78rem;letter-spacing:.14em}
.loginside h1{font-size:1.85rem;line-height:1.35;margin:0 0 12px}
.loginside .lead{max-width:30em}
.perks,.fine{position:relative}
.perks .pi{background:rgba(255,209,102,.14);border-color:rgba(255,209,102,.4);box-shadow:0 1px 0 rgba(255,255,255,.12) inset}
.logincard{background:linear-gradient(180deg,#1f2f6c,#16224f)}
.prov{background:linear-gradient(180deg,#27388a,#1d2b6c);border-color:#3c4fa6;
  box-shadow:0 1px 0 rgba(255,255,255,.12) inset,0 4px 0 rgba(4,8,28,.6),0 8px 18px rgba(0,0,0,.4)}
.prov:hover{transform:translateY(2px);box-shadow:0 1px 0 rgba(255,255,255,.12) inset,0 2px 0 rgba(4,8,28,.6),0 4px 12px rgba(0,0,0,.4);border-color:var(--accent)}
.prov:active{transform:translateY(4px);box-shadow:0 1px 0 rgba(255,255,255,.1) inset}

/* ===== 상단 메뉴: 배경 박스 대신 밑줄 ===== */
.nav a:not(.loginbtn):not(.me){position:relative;background:none!important;border-radius:0;padding:9px 12px}
.nav a:not(.loginbtn):not(.me):hover{background:none!important;color:var(--text)}
.nav a:not(.loginbtn):not(.me)::after{content:"";position:absolute;left:12px;right:12px;bottom:2px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--neon),var(--accent2));transform:scaleX(0);transform-origin:center;transition:transform .2s ease}
.nav a:not(.loginbtn):not(.me):hover::after,.nav a.on::after{transform:scaleX(1)}
.nav a.on{color:var(--text)}
@media(max-width:700px){.nav a:not(.loginbtn):not(.me){padding:8px 6px}.nav a:not(.loginbtn):not(.me)::after{left:6px;right:6px}}

/* ===== 룰렛 ===== */
.rfilter{margin:6px 0 22px;padding:16px 18px;border-radius:16px;border:1px solid var(--line);background:linear-gradient(180deg,var(--panel),var(--bg2));display:flex;flex-direction:column;gap:12px}
.rf-row{display:flex;gap:14px;align-items:flex-start}
.rf-lab{flex:none;width:44px;padding-top:7px;color:var(--sub);font-size:.82rem;font-weight:700}
.pills{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.pill{padding:7px 14px;border-radius:999px;border:1px solid var(--line);background:var(--bg);color:var(--sub);font-weight:600;font-size:.88rem;transition:all .15s}
.pill:hover{border-color:var(--accent);color:var(--text)}
.pill.on{background:linear-gradient(135deg,rgba(255,187,31,.32),rgba(255,159,31,.3));border-color:var(--accent);color:#fff;box-shadow:0 0 0 1px rgba(255,187,31,.3) inset}
.budgetform{display:inline-flex;align-items:center;gap:6px;margin-left:4px;color:var(--sub);font-size:.85rem}
.budgetform input{width:104px;padding:7px 10px;border-radius:9px;border:1px solid var(--line);background:var(--bg);color:var(--text);font:inherit}
.budgetform button{padding:7px 12px;border-radius:9px;border:0;background:var(--panel2);color:var(--text);cursor:pointer;font:inherit;font-weight:600}
.sep{width:1px;height:20px;background:var(--line);margin:0 4px}
.mini{color:var(--sub);font-size:.8rem}
.segm{display:inline-flex;border:1px solid var(--line);border-radius:999px;overflow:hidden;background:var(--bg)}
.segm a{padding:6px 12px;color:var(--sub);font-size:.84rem;font-weight:600}
.segm a.on{background:var(--accent);color:#fff}
.segm a:hover:not(.on){background:var(--panel)}
.rf-foot{padding-top:10px;border-top:1px dashed var(--line);color:var(--sub);font-size:.88rem}
.rf-foot b{color:var(--text)}
.rf-foot a{color:var(--accent);display:inline-flex;align-items:center;gap:5px;margin-left:6px}
.stage{display:grid;grid-template-columns:minmax(0,560px) minmax(0,1fr);gap:34px;align-items:start}
.wheelcol{display:flex;flex-direction:column;align-items:center;gap:16px}
.wheelwrap{position:relative;width:100%;max-width:540px;aspect-ratio:1;filter:drop-shadow(0 18px 40px rgba(60,90,255,.35))}
.wheelwrap svg#wheel{width:100%;height:100%;display:block}
.pin{position:absolute;top:-14px;left:50%;width:44px;transform:translateX(-50%);filter:drop-shadow(0 4px 8px rgba(0,0,0,.5));z-index:2}
.led{fill:#24306e}
.led.l0{animation:blink 1.2s infinite} .led.l1{animation:blink 1.2s .4s infinite} .led.l2{animation:blink 1.2s .8s infinite}
@keyframes blink{0%,100%{fill:#24306e}50%{fill:#ffe27a;filter:drop-shadow(0 0 4px #ffd066)}}
.seg{transition:opacity .3s}
.seg.dim{opacity:.38}
.seg.win path{stroke:#fff;stroke-width:3}
.spinbtn{display:inline-flex;align-items:center;gap:10px;padding:14px 46px;border:0;border-radius:16px;color:#fff;font:inherit;font-size:1.25rem;font-weight:900;cursor:pointer;
  background:linear-gradient(180deg,#6aa4ff,#4f46e5);box-shadow:0 1px 0 rgba(255,255,255,.35) inset,0 6px 0 #2a2f9a,0 14px 26px rgba(40,50,200,.5);transition:transform .08s,box-shadow .08s}
.spinbtn:hover{transform:translateY(2px);box-shadow:0 1px 0 rgba(255,255,255,.35) inset,0 4px 0 #2a2f9a,0 10px 20px rgba(40,50,200,.5)}
.spinbtn:active{transform:translateY(6px);box-shadow:0 1px 0 rgba(255,255,255,.35) inset,0 0 0 #2a2f9a}
.spinbtn:disabled{opacity:.6;cursor:wait}
.cand-help{margin:-4px 0 0;color:var(--sub);font-size:.8rem}
.cands{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;max-width:540px}
.cand{display:inline-flex;align-items:center;gap:7px;padding:5px 6px 5px 10px;border-radius:999px;border:1px solid var(--line);background:var(--panel);font-size:.82rem}
.cand.on{border-color:#fff;background:var(--panel2)}
.cand i{width:10px;height:10px;border-radius:50%;flex:none}
.cand a{color:var(--text)}
.cand button{width:20px;height:20px;border-radius:50%;border:0;background:var(--bg);color:var(--sub);cursor:pointer;line-height:1;padding:0}
.cand button:hover{background:#ff5d73;color:#fff}
.confetti{position:absolute;left:50%;top:50%;width:0;height:0;pointer-events:none;z-index:3}
.confetti span{position:absolute;border-radius:2px;animation:fly 1.4s ease-out forwards}
@keyframes fly{0%{transform:translate(0,0) rotate(0);opacity:1}100%{transform:translate(var(--dx),var(--dy)) rotate(var(--rt));opacity:0}}
.resultcol{position:sticky;top:90px;display:flex;flex-direction:column;gap:16px}
.idle{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding:46px 24px;border-radius:18px;border:1px dashed var(--line);background:linear-gradient(180deg,var(--panel),var(--bg2))}
.idle h2{margin:10px 0 0;font-size:1.3rem}
.idle p{margin:0;color:var(--sub);line-height:1.7}
.rcard{border-radius:18px;overflow:hidden;border:1px solid var(--accent);background:linear-gradient(180deg,var(--panel2),var(--panel));box-shadow:0 1px 0 rgba(255,255,255,.1) inset,0 20px 50px rgba(255,187,31,.28)}
.rcard.pop{animation:pop .5s cubic-bezier(.2,1.4,.4,1)}
@keyframes pop{0%{transform:scale(.88);opacity:0}100%{transform:scale(1);opacity:1}}
.rimg img{width:100%;height:auto;display:block;aspect-ratio:460/215;object-fit:cover}
.rbody{padding:18px 20px 20px;display:flex;flex-direction:column;gap:10px}
.rbadge{align-self:flex-start;padding:3px 10px;border-radius:999px;background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;font-weight:800;font-size:.76rem;letter-spacing:.04em}
.rbody h2{margin:0;font-size:1.5rem;letter-spacing:-.02em}
.rbody h2 a{color:var(--text)}
.rtags,.rmeta{display:flex;flex-wrap:wrap;gap:6px}
.rm{font-size:.82rem;color:var(--sub)} .rm.good{color:var(--green);font-weight:700}
.rprice2{display:flex;align-items:center;gap:12px;margin-top:2px}
.rprice2 .now{font-size:1.7rem;font-weight:900}
.ract{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
.hist{padding:14px 18px;border-radius:14px;border:1px solid var(--line);background:var(--bg2)}
.hist h3{margin:0 0 8px;font-size:.9rem;color:var(--sub)}
.hist ol{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:5px}
.hist li{font-size:.9rem} .hist a{color:var(--text)} .hist .hp{margin-left:8px;color:var(--sub);font-size:.8rem}
@media(max-width:980px){.stage{grid-template-columns:1fr}.resultcol{position:static}.rf-row{flex-direction:column;gap:6px}.rf-lab{width:auto;padding-top:0}}

/* ===== 룰렛 필터 패널: 더 얇게 (장르/태그는 한 줄만 보이고 더보기로 펼침) ===== */
.rfilter{padding:12px 16px;gap:8px;margin:4px 0 16px}
.rf-row{gap:12px;align-items:flex-start}
.rf-row > .pills{flex:1;min-width:0}
.rf-lab{padding-top:5px;width:40px;font-size:.78rem}
.rfilter .pill{padding:4px 12px;font-size:.83rem}
.rfilter .pills{gap:6px}
.pills.fold{max-height:31px;overflow:hidden}
.rf-row.open .pills.fold{max-height:none}
.foldbtn{flex:none;margin-top:1px;padding:4px 12px;border-radius:999px;border:1px dashed var(--line);background:transparent;color:var(--accent);cursor:pointer;font:inherit;font-size:.8rem;white-space:nowrap}
.foldbtn:hover{border-color:var(--accent)}
.foldbtn[hidden]{display:none}
.budgetform input{padding:4px 8px;width:92px}
.budgetform button{padding:4px 11px}
.segm a{padding:4px 10px;font-size:.8rem}
.rf-foot{padding-top:8px;font-size:.84rem}
.rf-foot .hint{margin-left:14px;color:var(--sub);font-size:.8rem}
@media(max-width:980px){.rf-row{flex-direction:row;flex-wrap:wrap}.rf-lab{width:100%;padding-top:0}}

/* ===== 룰렛 2: 결과 카드는 위, 휠은 그 아래, 돌리기 버튼은 익살스럽게 ===== */
.stage2{display:flex;flex-direction:column;gap:22px}
.topresult{min-height:132px}
.idle2{display:flex;align-items:center;justify-content:center;gap:22px;padding:26px 28px;border-radius:18px;border:1px dashed var(--line);background:linear-gradient(135deg,var(--panel),var(--bg2))}
.idle2 h2{margin:0 0 4px;font-size:1.35rem}
.idle2 p{margin:0;color:var(--sub)}
.idle2 svg{flex:none;animation:floaty 3s ease-in-out infinite}
@keyframes floaty{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-6px) rotate(4deg)}}
.rcard.rwide{display:grid;grid-template-columns:minmax(0,400px) 1fr}
.rwide .rimg{display:block;height:100%}
.rwide .rimg img{height:100%;min-height:200px;object-fit:cover}
.rwide .rbody{justify-content:center}
.wheelarea{display:flex;flex-direction:column;align-items:center;gap:12px}
.wheelarea .wheelwrap{max-width:470px}
.spinzone{position:relative;display:flex;align-items:center;justify-content:center;margin:6px 0 2px;padding:10px 40px}
.burst{position:absolute;left:50%;top:50%;width:300px;height:150px;transform:translate(-50%,-50%);z-index:0;pointer-events:none;animation:turn 14s linear infinite}
@keyframes turn{to{transform:translate(-50%,-50%) rotate(360deg)}}
.funbtn{position:relative;z-index:1;display:inline-flex;align-items:center;gap:12px;padding:15px 40px 16px;font:inherit;font-size:1.55rem;font-weight:900;letter-spacing:-.01em;color:#2a1200;cursor:pointer;
  border:4px solid #1a0c06;border-radius:24px;background:linear-gradient(180deg,#fff08a,#ffb347 55%,#ff7a3d);box-shadow:0 7px 0 #1a0c06,0 18px 28px rgba(255,122,61,.45);
  text-shadow:0 2px 0 rgba(255,255,255,.55);transform:rotate(-2.5deg);animation:wobble 2.8s ease-in-out infinite;transition:transform .12s,box-shadow .12s}
.fb-ico{display:inline-flex;animation:rolldice 1.6s ease-in-out infinite}
@keyframes rolldice{0%,70%,100%{transform:rotate(0)}85%{transform:rotate(200deg)}}
@keyframes wobble{0%,82%,100%{transform:rotate(-2.5deg) scale(1)}86%{transform:rotate(2.5deg) scale(1.07)}90%{transform:rotate(-3deg) scale(1.04)}94%{transform:rotate(1.5deg) scale(1.06)}}
.funbtn:hover{animation:none;transform:rotate(0) scale(1.08) translateY(-3px);box-shadow:0 10px 0 #1a0c06,0 24px 34px rgba(255,122,61,.55)}
.funbtn:active{animation:none;transform:translateY(6px) scale(.96);box-shadow:0 1px 0 #1a0c06,0 6px 12px rgba(255,122,61,.4)}
.funbtn.go{animation:shake .22s linear infinite;background:linear-gradient(180deg,#9af0ff,#ffbb1f 60%,#6d3fe0);color:#06101f;cursor:wait;filter:saturate(1.2)}
.funbtn.go .fb-ico{animation:spinfast .5s linear infinite}
@keyframes shake{0%{transform:rotate(-2deg) translateX(-2px)}25%{transform:rotate(2deg) translateX(2px)}50%{transform:rotate(-1.5deg) translateX(-1px)}75%{transform:rotate(1.5deg) translateX(2px)}100%{transform:rotate(-2deg) translateX(-2px)}}
@keyframes spinfast{to{transform:rotate(360deg)}}
.shock{position:absolute;left:50%;top:50%;width:40px;height:40px;margin:-20px 0 0 -20px;border-radius:50%;border:5px solid #ffd066;z-index:0;pointer-events:none;animation:shock .65s ease-out forwards}
@keyframes shock{0%{transform:scale(1);opacity:.95}100%{transform:scale(9);opacity:0}}
.quip{margin:0;min-height:1.5em;color:#ffd066;font-weight:800;font-size:1rem;text-align:center}
@media(max-width:760px){.rcard.rwide{grid-template-columns:1fr}.idle2{flex-direction:column;text-align:center;padding:22px 18px}.funbtn{font-size:1.3rem;padding:13px 28px 14px}}
@media(prefers-reduced-motion:reduce){.funbtn,.fb-ico,.burst,.idle2 svg{animation:none}}

/* 결과 카드로 자동 스크롤할 때 고정 헤더에 가려지지 않게 */
.topresult,#result{scroll-margin-top:84px}

/* ===== 룰렛 검색 ===== */
.rf-foot{display:flex;align-items:center;justify-content:space-between;gap:10px 16px;flex-wrap:wrap}
.qform{display:inline-flex;align-items:center;gap:6px}
.qform input{width:210px;padding:4px 10px;border-radius:9px;border:1px solid var(--line);background:var(--bg);color:var(--text);font:inherit;font-size:.84rem;outline:none}
.qform input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(255,187,31,.2)}
.qform button{padding:4px 12px;border-radius:9px;border:0;background:var(--accent);color:#fff;font:inherit;font-size:.82rem;font-weight:700;cursor:pointer}
.qform a{color:var(--sub);font-size:.8rem}
.addbox{position:relative;width:100%;max-width:470px;margin-top:6px}
.addbox label{display:block;color:var(--sub);font-size:.78rem;font-weight:700;margin-bottom:4px}
.addbox input{width:100%;padding:9px 14px;border-radius:12px;border:1px solid var(--line);background:var(--panel);color:var(--text);font:inherit;outline:none}
.addbox input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(255,187,31,.2)}
.addres{position:absolute;left:0;right:0;top:calc(100% - 18px);z-index:8;background:var(--panel);border:1px solid var(--accent);border-radius:12px;box-shadow:0 18px 40px rgba(0,0,0,.55);max-height:340px;overflow:auto;padding:4px}
.addres[hidden]{display:none}
.addrow{display:flex;align-items:center;gap:10px;width:100%;padding:6px;border:0;border-radius:8px;background:none;color:var(--text);font:inherit;text-align:left;cursor:pointer}
.addrow:hover{background:var(--panel2)}
.addrow img{width:92px;height:auto;border-radius:6px;flex:none}
.addname{flex:1;font-size:.88rem;line-height:1.35}
.addprice{flex:none;color:var(--sub);font-size:.82rem;font-weight:700}
.addempty{padding:12px;color:var(--sub);text-align:center;font-size:.88rem}
.addmsg{margin:4px 2px 0;min-height:1.2em;color:var(--green);font-size:.82rem}

/* ===== 예산 직접 입력: 캡슐 + 스텝퍼 ===== */
.budgetform{gap:8px;margin-left:6px}
.numfield{display:inline-flex;align-items:center;height:32px;border:1px solid var(--line);border-radius:999px;background:var(--bg);padding:0 12px 0 3px;transition:border-color .15s,box-shadow .15s}
.numfield:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px rgba(255,187,31,.22)}
.numfield input{width:86px;border:0;background:transparent;color:var(--text);font:inherit;font-weight:800;font-size:.9rem;text-align:center;outline:none;padding:0;-moz-appearance:textfield;appearance:textfield}
.numfield input::placeholder{color:var(--sub);font-weight:600;font-size:.82rem}
.numfield input::-webkit-outer-spin-button,.numfield input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.numfield .stp{width:26px;height:26px;border-radius:50%;border:0;background:var(--panel2);color:var(--text);font-size:1.05rem;line-height:1;cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center;transition:background .12s}
.numfield .stp:hover{background:var(--accent);color:#fff}
.numfield .unit{margin-left:8px;padding-left:9px;border-left:1px solid var(--line);color:var(--sub);font-size:.8rem;white-space:nowrap}
.budgetform .apply{height:32px;padding:0 15px;border-radius:999px;border:0;background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;font:inherit;font-size:.84rem;font-weight:800;cursor:pointer;box-shadow:0 1px 0 rgba(255,255,255,.2) inset,0 3px 10px rgba(255,187,31,.3)}
.budgetform .apply:hover{filter:brightness(1.1)}
.funbtn.off{filter:grayscale(.8) brightness(.8);cursor:not-allowed;animation:none;transform:rotate(-2deg)}

/* ===== 룰렛 3: 카드 띠(릴) ===== */
.stage3{display:flex;flex-direction:column;gap:20px}
.reelwrap{display:flex;flex-direction:column;gap:14px;align-items:stretch}
.reelbar{display:flex;align-items:flex-end;justify-content:space-between;gap:12px 20px;flex-wrap:wrap}
.reelcount{display:flex;flex-direction:column;gap:2px}
.reelcount b{font-size:1.15rem}
.reelcount span{color:var(--sub);font-size:.8rem}
.reelbar .addbox{width:100%;max-width:440px;margin:0}
.reel{--cw:210px;--gap:12px;position:relative;overflow:hidden;height:292px;border-radius:20px;border:1px solid var(--line);
  background:radial-gradient(600px 220px at 50% 0%,rgba(255,187,31,.16),transparent 70%),linear-gradient(180deg,var(--bg2),#0f1115);
  box-shadow:0 1px 0 rgba(255,255,255,.08) inset,0 18px 40px rgba(0,0,0,.5)}
.track{position:absolute;left:0;top:26px;display:flex;gap:var(--gap);will-change:transform}
.rc{position:relative;flex:none;width:var(--cw);border-radius:14px;border:1px solid var(--line);border-top-color:rgba(255,255,255,.35);overflow:hidden;
  background:linear-gradient(180deg,var(--panel2),var(--panel));box-shadow:0 8px 18px rgba(0,0,0,.5);transition:transform .35s,opacity .35s,filter .35s,box-shadow .35s,border-color .35s}
.rc-img img{display:block;width:100%;aspect-ratio:460/215;object-fit:cover;background:#050814}
.rc-body{padding:9px 10px 10px;display:flex;flex-direction:column;gap:6px}
.rc-name{font-weight:800;font-size:.9rem;line-height:1.3;height:2.6em;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.rc-price{display:flex;align-items:center;gap:6px;min-height:24px}
.rc-price .now{margin-left:auto;font-weight:900;font-size:1rem}
.rc-tags{display:flex;gap:4px;height:22px;overflow:hidden}
.rc-tags .tag{font-size:.68rem;padding:1px 7px;white-space:nowrap;flex:none}
.rx{position:absolute;top:6px;right:6px;width:24px;height:24px;border-radius:50%;border:0;background:rgba(12,14,18,.78);color:#fff;font-size:1rem;line-height:1;cursor:pointer;opacity:0;transition:opacity .15s,background .15s;z-index:2;padding:0}
.rc:hover .rx,.rx:focus-visible{opacity:1}
.rx:hover{background:#ff5d73}
.track.has-win .rc:not(.win){opacity:.38;filter:saturate(.5)}
.rc.win{transform:scale(1.09);border-color:#ffd066;box-shadow:0 0 0 2px #ffd066,0 18px 44px rgba(255,208,102,.45);z-index:3}
.rc.enter{animation:cardIn .75s cubic-bezier(.2,1.35,.4,1) both;animation-delay:var(--d,0ms)}
@keyframes cardIn{0%{opacity:0;transform:translateY(-80px) scale(.55) rotate(-9deg)}60%{opacity:1;transform:translateY(8px) scale(1.04) rotate(2deg)}100%{opacity:1;transform:none}}
.rc.fresh{animation:fresh 1.1s cubic-bezier(.2,1.4,.4,1) both;z-index:3}
@keyframes fresh{0%{opacity:0;transform:translateY(-110px) scale(.3) rotate(-16deg)}45%{opacity:1;transform:translateY(10px) scale(1.2) rotate(3deg);box-shadow:0 0 0 3px #ffd066,0 0 46px rgba(255,208,102,.9)}100%{transform:none}}
.fade{position:absolute;top:0;bottom:0;width:110px;z-index:4;pointer-events:none}
.fade.l{left:0;background:linear-gradient(90deg,#0f1115,transparent)}
.fade.r{right:0;background:linear-gradient(270deg,#0f1115,transparent)}
.marker{position:absolute;left:50%;top:0;bottom:0;width:0;z-index:6;pointer-events:none}
.marker::before{content:"";position:absolute;left:-2px;top:12px;bottom:12px;width:4px;border-radius:3px;background:linear-gradient(#ffe27a,#ff7a3d);box-shadow:0 0 16px rgba(255,208,102,.85)}
.marker .cap{position:absolute;left:-13px;width:0;height:0;border-left:13px solid transparent;border-right:13px solid transparent}
.marker .cap.capu{top:0;border-top:16px solid #ffd066;filter:drop-shadow(0 0 6px rgba(255,208,102,.8))}
.marker .cap.capd{bottom:0;border-bottom:16px solid #ffd066;filter:drop-shadow(0 0 6px rgba(255,208,102,.8))}
.marker.tick::before{animation:tick .09s ease-out}
@keyframes tick{0%{width:9px;left:-4.5px;filter:brightness(2)}100%{width:4px;left:-2px}}
.reel .confetti{left:50%;top:60%}
.addrow.has{opacity:.55}
@media(max-width:700px){.reel{--cw:158px;--gap:10px;height:262px}.reelbar .addbox{max-width:none}.rc-name{font-size:.82rem}.fade{width:50px}}
@media(prefers-reduced-motion:reduce){.rc.enter,.rc.fresh{animation:none}}

/* 카드 이미지: 폭에 맞춰 비율대로 (이미지의 height 속성으로 늘어나지 않게) */
.rc-img{height:calc(var(--cw) * 215 / 460);overflow:hidden}
.rc-img img{width:100%;height:100%;aspect-ratio:auto;object-fit:cover}

.reel{height:272px}
@media(max-width:700px){.reel{height:238px}}

/* 돌리기 버튼: 좁은 화면에서도 한 줄 */
.funbtn{white-space:nowrap}
@media(max-width:420px){.funbtn{font-size:1.1rem;padding:11px 18px 12px;gap:8px}.funbtn .fb-ico svg{width:24px;height:24px}.spinzone{padding:10px 8px}}

/* 돌리기 버튼: 차분한 게이밍 스타일 (두꺼운 테두리/기울기/흔들림 제거) */
.burst{display:none}
.spinzone{padding:8px 0}
.funbtn{gap:10px;min-width:210px;justify-content:center;padding:0 34px;height:54px;font-size:1.1rem;font-weight:800;letter-spacing:.04em;color:#fff;text-shadow:none;
  border:1px solid rgba(150,195,255,.55);border-radius:12px;background:linear-gradient(180deg,#3f82ff,#2656d8);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 0 0 3px rgba(63,130,255,.14),0 10px 26px rgba(38,86,216,.4);
  transform:none;animation:none;overflow:hidden;transition:transform .15s,box-shadow .15s,filter .15s}
.funbtn::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.28),transparent);transform:skewX(-20deg);transition:left .6s}
.funbtn:hover{animation:none;transform:translateY(-1px);filter:brightness(1.1);box-shadow:inset 0 1px 0 rgba(255,255,255,.32),0 0 0 4px rgba(63,130,255,.2),0 14px 32px rgba(38,86,216,.5)}
.funbtn:hover::after{left:120%}
.funbtn:active{transform:translateY(1px);filter:brightness(.95);box-shadow:inset 0 2px 6px rgba(0,0,0,.35),0 0 0 3px rgba(63,130,255,.14)}
.funbtn .fb-ico{animation:none}
.funbtn.go{animation:none;background:linear-gradient(180deg,#2b3f78,#1b2a57);color:#bcd2ff;filter:none;cursor:wait;border-color:rgba(120,160,255,.4);box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 0 0 3px rgba(63,130,255,.12)}
.funbtn.go .fb-ico{animation:spinfast .9s linear infinite}
.funbtn.off{transform:none;filter:grayscale(.7) brightness(.7)}
.shock{border:2px solid #6aa8ff}
.quip{color:#9fb4dd;font-weight:600;font-size:.95rem}
@media(max-width:420px){.funbtn{min-width:0;height:48px;padding:0 22px;font-size:1rem}}

/* ===== 순위 페이지: 필터, 순위 변동, 태그, 찜 버튼, 페이지 이동 ===== */
.rankfilter{display:flex;flex-wrap:wrap;gap:10px 22px;align-items:center;margin:0 0 14px;padding:10px 14px;border:1px solid var(--line);border-radius:12px;background:rgba(12,18,38,.6)}
.rankfilter .pills{gap:6px}
.rankfilter .rf-lab{color:var(--sub);font-size:.82rem;font-weight:700;margin-right:2px}
.rfreset{color:var(--neon,#6aa8ff);font-size:.85rem;font-weight:700;margin-left:auto}
.rrow{position:relative}
.rank .rrow > .heart{display:flex;align-items:center;justify-content:center;padding:0;gap:0;background:rgba(12,14,18,.72);border:1px solid rgba(255,255,255,.18);position:absolute;top:50%;right:14px;transform:translateY(-50%);width:32px;height:32px;border-radius:50%;z-index:2;transition:color .12s,border-color .12s}
.rank .rrow > .heart:hover{transform:translateY(-50%) scale(1.1)}
.rank .rrow > a:not(.heart){padding-right:60px}
.rank .no{display:flex;flex-direction:column;align-items:center;gap:2px;line-height:1.1}
.mv{font-size:.66rem;font-weight:800;letter-spacing:0}
.mv.up{color:#46d38b}.mv.down{color:#ff6b7a}.mv.same{color:var(--sub)}.mv.new{color:#ffd066}
.rtags{display:flex;flex-wrap:wrap;gap:5px}
.rtags .tag{font-size:.72rem;padding:2px 8px}
.rtags .tag.plain{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25);color:var(--sub)}
.rval .rrev{font-size:.74rem}
.rankpager{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:20px 0 8px}
@media(max-width:720px){.rank .rrow > a:not(.heart){padding-right:50px}.rank .rrow > .heart{right:10px;top:14px;transform:none;width:28px;height:28px}.rank .rrow > .heart:hover{transform:scale(1.1)}}

/* 일러스트 바꾸기 버튼 */
.artbtn{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;padding:0;border-radius:8px;border:1px solid transparent;background:transparent;color:var(--sub);cursor:pointer;transition:color .15s,background .15s,border-color .15s}
.artbtn:hover{color:var(--text);background:var(--panel);border-color:var(--line)}
.artbtn.spin svg{animation:artspin .6s ease}
@keyframes artspin{to{transform:rotate(360deg)}}
header.top:not(.scrolled) .artbtn{color:#e6edff;filter:drop-shadow(0 1px 6px rgba(0,0,0,.85))}

.nav{align-items:center}
.artbtn{flex:none}

/* 언어 선택 */
.flag{display:block;flex:none;border-radius:3px}
.langmenu .upop{min-width:150px}
.langmenu .upop a.cur{color:var(--accent);font-weight:700}
.langmenu summary.me{padding:5px 10px 5px 8px}
.regionmenu .upop{min-width:210px}
.langmenu summary.me svg:first-child{flex:none}
.tag .flag,.pill .flag,.tchip .flag{display:inline-block;vertical-align:-3px}
.tchip span,.pill,.tag.ko{display:inline-flex;align-items:center;gap:6px}

/* 모바일: 메뉴가 넘치지 않게 줄바꿈 (링크 줄 + 언어/나라/로그인 줄) */
@media(max-width:700px){
  .nav{flex-wrap:wrap;justify-content:flex-start;row-gap:6px}
  .nav > .langmenu:first-of-type{margin-left:auto}
  .regionmenu .upop{min-width:190px}
}

/* 스팀 대형 세일 카운트다운 띠 */
.salebar{display:flex;align-items:center;flex-wrap:wrap;gap:8px 14px;margin:0 0 16px;padding:10px 16px;border:1px solid rgba(255,187,31,.45);border-radius:12px;background:linear-gradient(90deg,rgba(255,187,31,.16),rgba(255,159,31,.12));position:relative}
.salebar .sb-ico{color:var(--amber,#ffb84d);display:flex}
.salebar .sb-main{flex:1;min-width:200px;font-size:.95rem}
.salebar .sb-label{color:var(--text)}
.salebar .sb-count{font-weight:800;font-variant-numeric:tabular-nums;color:#ffd98a;margin-left:4px}
.salebar.soon .sb-count{color:#ff9aa8}
.sb-btn{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:999px;border:1px solid var(--accent);background:rgba(255,187,31,.18);color:#ffe9b8;font:inherit;font-size:.86rem;font-weight:700;cursor:pointer;list-style:none}
.sb-btn:hover{background:rgba(255,187,31,.32)}
.sb-sub summary::-webkit-details-marker{display:none}
.sb-sub{position:relative}
.sb-pop{position:absolute;right:0;top:calc(100% + 8px);z-index:9;width:min(340px,86vw);display:flex;flex-direction:column;gap:8px;padding:14px;background:var(--panel);border:1px solid var(--line);border-radius:12px;box-shadow:0 16px 40px rgba(0,0,0,.5)}
.sb-pop label{display:flex;flex-direction:column;gap:6px;font-size:.85rem;color:var(--sub)}
.sb-pop input[type=text]{height:38px;padding:0 10px;border-radius:8px;border:1px solid var(--line);background:var(--bg);color:var(--text)}
.sb-pop small{color:var(--sub);font-size:.76rem}
.sb-done{display:inline-flex;align-items:center;gap:6px;color:#7be0a8;font-size:.86rem;font-weight:700}
.sb-form{margin:0}
.sb-flash{flex-basis:100%;margin:0;font-size:.86rem;padding:6px 10px;border-radius:8px}
.sb-flash.good{background:rgba(61,220,151,.14);color:#7be0a8}.sb-flash.bad{background:rgba(255,93,115,.14);color:#ff9aa8}
@media(max-width:700px){
  .sb-sub{position:static}
  .sb-pop{left:0;right:0;width:auto}
  .salebar{position:relative}
}

/* 세일 종료 임박 배지 (깜빡이지 않고 색으로만 알려요) */
.cardw{position:relative}
.endbadge{position:absolute;top:10px;left:10px;z-index:2;display:inline-flex;align-items:center;gap:5px;padding:5px 10px;border-radius:999px;font-size:.78rem;font-weight:800;font-variant-numeric:tabular-nums;color:#ffd2d8;background:rgba(70,16,32,.88);border:1px solid rgba(255,93,115,.7);backdrop-filter:blur(4px);pointer-events:none}
.endbadge.urgent{color:#fff;background:rgba(190,30,60,.92);border-color:#ff8a9b}
.endbadge.inline{position:static;pointer-events:auto}
.rtags .endbadge.inline{font-size:.72rem;padding:2px 8px}
.dealend{display:flex;align-items:center;flex-wrap:wrap;gap:6px 8px;margin:6px 0 0;color:var(--sub);font-size:.92rem}
.dealend b{color:var(--text)}
.dealend.soon svg{color:#ff9aa8}

/* 가성비 투표 */
.votebox{margin:18px 0;padding:18px 20px;border:1px solid var(--line);border-radius:14px;background:linear-gradient(180deg,var(--panel),var(--bg2))}
.votebox h2{margin:0 0 4px;font-size:1.05rem}
.votebox .vsub{margin:0 0 12px;color:var(--sub);font-size:.86rem}
.vbtns{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.vbtn{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px 14px;border-radius:10px;border:1px solid var(--line);background:var(--bg);color:var(--text);font:inherit;font-size:.9rem;font-weight:700;cursor:pointer;text-align:left}
.vbtn:hover{border-color:var(--accent)}
.vbtn.on{border-color:var(--accent);box-shadow:0 0 0 1px rgba(255,187,31,.4) inset}
.vbtn .vbar{position:absolute;inset:0 auto 0 0;width:0;background:rgba(255,187,31,.22);transition:width .5s ease;z-index:0}
.vbtn .vl,.vbtn .vp{position:relative;z-index:1;display:inline-flex;align-items:center;gap:6px}
.vbtn .vp{color:#ffd98a;font-variant-numeric:tabular-nums}
.vbtn:nth-child(3) svg{transform:none}
.votebox .vnote{margin:10px 0 0;min-height:1.2em;color:var(--sub);font-size:.82rem}
@media(max-width:700px){.vbtns{grid-template-columns:1fr}}

/* ===== 게임 상세: 그래프, 갤러리, 소개, 알림 ===== */
.chead{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.chead h2{margin:0}
.rtabs{display:inline-flex;gap:4px;padding:3px;border:1px solid var(--line);border-radius:999px;background:var(--bg)}
.rtabs button{padding:5px 14px;border:0;border-radius:999px;background:none;color:var(--sub);font:inherit;font-size:.82rem;font-weight:700;cursor:pointer}
.rtabs button.on{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff}
.cwrap{position:relative}
.ctip{position:absolute;z-index:3;pointer-events:none;transform:translate(14px,-120%);padding:8px 12px;border-radius:10px;background:rgba(12,14,18,.96);border:1px solid var(--accent);box-shadow:0 10px 30px rgba(0,0,0,.5);white-space:nowrap;font-size:.9rem}
.ctip.flip{transform:translate(calc(-100% - 14px),-120%)}
.ctip b{font-size:1.05rem}
.ctip i{font-style:normal;margin-left:6px;padding:1px 7px;border-radius:6px;background:rgba(255,93,115,.18);color:#ff8a9b;font-weight:800;font-size:.8rem}
.ctip small{display:block;color:var(--sub);margin-top:2px}
.clegend{display:flex;flex-wrap:wrap;gap:6px 16px;list-style:none;margin:8px 0 0;padding:0;font-size:.8rem;color:var(--sub)}
.clegend li{display:inline-flex;align-items:center;gap:6px}
.lg-dot{width:10px;height:10px;border-radius:50%;border:2px solid #ffd166;background:#0c0e12;display:inline-block}
.lg-dot.lg-hist{border-color:#9a9fab;border-width:1.5px}
.lg-dash{width:18px;border-top:2px dotted #ff5d73;display:inline-block}
.lg-hint{margin-left:auto;color:var(--muted,#8a8f9a)}
@media(max-width:700px){.lg-hint{display:none}}
.mgal{max-width:980px}
.mstage{position:relative;aspect-ratio:16/9;background:#000;border-radius:12px;overflow:hidden;outline:none}
.mstage:focus-visible{box-shadow:0 0 0 2px var(--accent)}
.mstage img,.mstage video{width:100%;height:100%;object-fit:contain;display:block;background:#000}
.mstage .playbtn{position:absolute;inset:0;margin:auto;width:84px;height:84px;display:flex;align-items:center;justify-content:center;border:0;border-radius:50%;background:rgba(12,14,18,.55);color:#ffd166;cursor:pointer;transition:transform .15s,background .15s}
.mstage .playbtn:hover{transform:scale(1.08);background:rgba(12,14,18,.75)}
.mnav{position:absolute;top:50%;transform:translateY(-50%);width:42px;height:60px;border:0;background:rgba(12,14,18,.5);color:#fff;font-size:2rem;cursor:pointer;opacity:0;transition:opacity .15s}
.mnav.prev{left:0;border-radius:0 10px 10px 0}.mnav.next{right:0;border-radius:10px 0 0 10px}
.mstage:hover .mnav,.mstage:focus-within .mnav{opacity:1}
@media(hover:none){.mnav{opacity:.85}}
.mthumbs{display:flex;gap:8px;margin-top:10px;overflow-x:auto;padding-bottom:6px}
.mt{position:relative;flex:none;width:128px;aspect-ratio:16/9;padding:0;border:2px solid transparent;border-radius:8px;overflow:hidden;background:#050814;cursor:pointer;opacity:.7;transition:opacity .15s,border-color .15s}
.mt:hover{opacity:1}.mt.on{opacity:1;border-color:var(--accent)}
.mt img{width:100%;height:100%;object-fit:cover;display:block}
.mt-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;background:rgba(12,14,18,.35)}
.ameta{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px}
.mchip{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:999px;border:1px solid var(--line);background:var(--bg);font-size:.86rem}
.mchip span{color:var(--sub)}
.alangs{display:flex;align-items:flex-start;gap:10px;margin:0 0 14px}
.al-lab{flex:none;padding-top:4px;color:var(--sub);font-size:.84rem}
.al-list{display:flex;flex-wrap:wrap;gap:6px}
.lc{padding:3px 10px;border-radius:999px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25);color:var(--sub);font-size:.78rem}
.lc.au{color:#ffe9b8;border-color:rgba(255,187,31,.55);background:rgba(255,187,31,.14)}
.abox{position:relative;max-height:240px;overflow:hidden}
.abox.open{max-height:none}
.abox .abouttext{max-height:none;overflow:visible;padding:0}
.afade{position:absolute;left:0;right:0;bottom:0;height:90px;background:linear-gradient(transparent,var(--panel));pointer-events:none}
.abox.open .afade{display:none}
.amore{margin-top:10px;padding:8px 18px;border-radius:999px;border:1px solid var(--accent);background:rgba(255,187,31,.14);color:#ffe9b8;font:inherit;font-weight:700;cursor:pointer}
.amore:hover{background:rgba(255,187,31,.28)}
.alert2 .aform2{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) auto;gap:18px;align-items:start;margin-top:12px}
.aform2 label{display:block;font-size:.84rem;color:var(--sub);margin-bottom:6px}
.af-col{display:flex;flex-direction:column;gap:6px}
.af-col label{margin:0}
.af-sub{font-size:.76rem;color:var(--muted,#8a8f9a)}
.presets{display:flex;flex-wrap:wrap;gap:8px}
.pchip{display:inline-flex;flex-direction:column;align-items:flex-start;gap:1px;padding:6px 12px;border-radius:10px;border:1px solid var(--line);background:var(--bg);color:var(--text);font:inherit;cursor:pointer;transition:border-color .12s,background .12s}
.pchip b{font-size:.8rem;color:#ffd98a}
.pchip span{font-size:.82rem;color:var(--sub)}
.pchip:hover{border-color:var(--accent)}
.pchip.on{border-color:var(--accent);background:rgba(255,187,31,.18)}
.af-input{display:flex;align-items:center;gap:8px;padding:0 12px;border-radius:10px;border:1px solid var(--line);background:var(--bg)}
.af-input:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px rgba(255,187,31,.2)}
.af-input span{color:var(--sub);font-weight:700}
.af-input input{flex:1;min-width:0;padding:12px 0;border:0;background:none;color:var(--text);font:inherit;font-size:1.05rem;font-weight:700;outline:none}
.alert2 input[type=text]{padding:12px;border-radius:10px;border:1px solid var(--line);background:var(--bg);color:var(--text);font:inherit;outline:none}
.alert2 input[type=text]:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(255,187,31,.2)}
.tphint{min-height:1.2em;color:#ffd98a;font-size:.8rem}
.af-ok{display:inline-flex;align-items:center;gap:5px;color:#7be0a8;font-size:.8rem}
.af-go{align-self:end;height:46px;white-space:nowrap}
@media(max-width:900px){.alert2 .aform2{grid-template-columns:1fr}.af-go{width:100%}}

@media(max-width:700px){.alangs{flex-direction:column;gap:6px}.al-lab{padding-top:0}}

/* ===== 게임 상세 2차 다듬기: [hidden] 복구, 갤러리 프레임, 지원 언어 ===== */
.mstage .playbtn[hidden],.mstage video[hidden],.mstage img[hidden]{display:none}
.mediabox{padding:20px 22px}
.mediabox h2{margin-bottom:14px}
.mgal{max-width:1180px;display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
.mstage{border:1px solid rgba(255,187,31,.28);border-radius:14px;box-shadow:0 14px 34px rgba(0,0,0,.45),0 0 0 1px rgba(12,14,18,.6) inset;isolation:isolate}
.mstage::before{content:"";position:absolute;inset:-24px;z-index:-1;background:var(--bg) center/cover no-repeat;filter:blur(26px) brightness(.5) saturate(1.2)}
.mstage img,.mstage video{background:transparent}
.mcount{position:absolute;right:12px;bottom:12px;z-index:2;padding:3px 10px;border-radius:999px;background:rgba(12,14,18,.72);color:#ffe9b8;font-size:.78rem;font-weight:700;font-variant-numeric:tabular-nums;backdrop-filter:blur(4px)}
.mnav{width:40px;height:40px;top:50%;border-radius:50%!important;background:rgba(12,14,18,.62);font-size:1.5rem;line-height:1;display:flex;align-items:center;justify-content:center;padding:0 0 3px;border:1px solid rgba(255,255,255,.18)}
.mnav.prev{left:12px}.mnav.next{right:12px}
.mnav:hover{background:rgba(255,187,31,.65)}
.mthumbs{margin-top:0;padding:2px 2px 8px}
.mt{width:116px;border-radius:9px}
.mediabox .note{margin:12px 0 0}
@media(min-width:900px){
  .mgal{grid-template-columns:minmax(0,1fr) 196px;align-items:start}
  .mthumbs{flex-direction:column;overflow-x:hidden;overflow-y:auto;padding:0 6px 0 0}
  .mt{width:100%}
}
@media(max-width:700px){.mediabox{padding:16px}.mnav{opacity:.9}}
.about{padding:20px 22px}
.about h2{margin-bottom:14px}
.ameta{margin-bottom:14px}
.alangs{margin-bottom:6px}
.lc{display:inline-flex;align-items:center;gap:6px}
.lc svg{color:#5fd08a;flex:none}
.lc.cur{color:#fff;border-color:rgba(61,220,151,.6);background:rgba(61,220,151,.14);font-weight:700}
.lc-au{display:inline-flex;margin-left:2px;color:#ffd98a}
.lc.au .lc-au svg{color:#ffd98a}
.al-legend{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:0 0 16px;color:var(--muted,#8a8f9a);font-size:.76rem}
.al-legend svg{color:#ffd98a}

.vbtn{padding:14px 16px}
.vbtn .vl{gap:12px;font-size:.95rem}
.vbtn .vl svg{flex:none;filter:drop-shadow(0 2px 6px rgba(0,0,0,.35))}
.vbtn:hover .vl svg{transform:scale(1.08)}
.vbtn .vl svg{transition:transform .15s}

/* ===== 스크롤바: 어두운 테마에 맞춘 얇은 스크롤 (흰 화살표 스크롤바 제거) ===== */
@supports not selector(::-webkit-scrollbar){*{scrollbar-width:thin;scrollbar-color:#35467a transparent}}   /* 파이어폭스 */
::-webkit-scrollbar{width:10px;height:10px;background:transparent}
::-webkit-scrollbar-track{background:rgba(255,255,255,.03);border-radius:999px}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#3a4f94,#2a3866);border-radius:999px;border:2px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,#5a7be0,#4a5fbf);background-clip:padding-box;border:2px solid transparent}
::-webkit-scrollbar-button{display:none;width:0;height:0}
::-webkit-scrollbar-corner{background:transparent}
.mthumbs,.tscroll,.pills{scrollbar-gutter:stable}

/* 상단 메뉴: 컬러 아이콘을 키운 만큼 간격/크기 조정 */
.nav a{gap:8px;padding:7px 12px}
.nav a svg{flex:none;filter:drop-shadow(0 1px 3px rgba(0,0,0,.35))}
.artbtn{width:44px;height:44px;border-radius:10px}
.artbtn svg{transition:transform .35s}
.artbtn:hover svg{transform:rotate(180deg)}
.langmenu summary.me{padding:6px 12px 6px 9px;gap:7px}
.langmenu summary.me svg:not(:last-child){flex:none}
.umenu summary.me img{width:28px;height:28px}
.upop a svg,.upop button svg{flex:none}
@media(max-width:700px){
  .nav a{padding:7px 9px;gap:6px;font-size:.88rem}
  .nav a svg{width:20px;height:20px}
  .artbtn{width:40px;height:40px}
}

/* ===== 공유하기 메뉴 ===== */
.sharebtn{display:inline-flex;align-items:center;gap:8px}
.sharepop{position:absolute;z-index:200;width:min(300px,92vw);padding:8px;background:var(--panel);border:1px solid var(--accent);border-radius:14px;box-shadow:0 18px 50px rgba(0,0,0,.6);display:flex;flex-direction:column;gap:2px}
.sharepop h4{margin:4px 8px 6px;font-size:.82rem;color:var(--sub);font-weight:700}
.sharepop .si{display:flex;align-items:center;gap:12px;padding:10px 10px;border-radius:10px;color:var(--text);font:inherit;font-size:.92rem;font-weight:600;background:none;border:0;cursor:pointer;text-align:left;text-decoration:none;width:100%}
.sharepop .si:hover{background:var(--panel2,rgba(255,255,255,.06))}
.sharepop .si svg{flex:none;width:28px;height:28px;border-radius:8px}
.sharebackdrop{display:none}
@media(max-width:700px){
  .sharepop{position:fixed;left:8px;right:8px;bottom:8px;top:auto!important;width:auto;border-radius:18px;padding:12px}
  .sharebackdrop{display:block;position:fixed;inset:0;z-index:199;background:rgba(0,0,0,.55)}
  .sharepop .si{padding:13px 10px}
}

/* ===== 태그/장르 랜딩 ===== */
.crumbs{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:0 0 6px;font-size:.84rem;color:var(--sub)}
.crumbs a{color:var(--sub)}.crumbs a:hover{color:var(--text)}.crumbs b{color:var(--text)}
.tagstats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:0 0 12px}
.tagstats div{padding:14px 16px;border:1px solid var(--line);border-radius:12px;background:linear-gradient(180deg,var(--panel),var(--bg2))}
.tagstats b{display:block;font-size:1.5rem;font-variant-numeric:tabular-nums}
.tagstats span{color:var(--sub);font-size:.82rem}
.tagnote{margin:0 0 14px;color:var(--sub)}
.tagnote b{color:var(--text)}
@media(max-width:700px){.tagstats{grid-template-columns:repeat(2,minmax(0,1fr))}}
.tagrelated{margin-bottom:24px}
.tagcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px;margin-bottom:28px}
.tagcard{display:flex;align-items:center;gap:14px;padding:14px 16px;border:1px solid var(--line);border-radius:12px;background:linear-gradient(180deg,var(--panel),var(--bg2));transition:border-color .15s,transform .15s}
.tagcard:hover{border-color:var(--accent);transform:translateY(-2px)}
.tc-ico{flex:none;width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1.2rem;font-weight:900;color:#fff;background:linear-gradient(135deg,hsl(var(--h) 85% 60%),hsl(calc(var(--h) + 50) 80% 45%));box-shadow:0 6px 16px hsla(var(--h),80%,50%,.35)}
.tc-body{display:flex;flex-direction:column;min-width:0}
.tc-body b{font-size:1rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tc-body small{color:var(--sub);font-size:.8rem}
a.tag.plain{color:var(--sub)}
a.tag:hover{border-color:var(--accent);color:var(--text)}

/* 상단 메뉴 링크가 5개가 되어 작은 화면에서 한 줄에 들어가게 */
@media(max-width:480px){
  .nav a{padding:6px 6px;gap:5px;font-size:.82rem}
  .nav a svg{width:18px;height:18px}
}

/* ===== 가격 분석 / FAQ / 비슷한 게임 ===== */
.insight,.relatedbox{margin-top:22px;background:linear-gradient(180deg,var(--panel),var(--bg2));border:1px solid var(--line);border-radius:12px;padding:18px 20px}
.insight h2,.relatedbox h2{margin:0 0 10px;font-size:1.05rem}
.insight ul{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:6px;line-height:1.6}
.insight li::marker{color:var(--accent)}
.insnote{margin:10px 0 0;color:var(--muted,#8a8f9a);font-size:.8rem}
.insight h3{margin:18px 0 8px;font-size:.95rem;color:var(--sub)}
.faq details{border:1px solid var(--line);border-radius:10px;background:var(--bg);margin-bottom:8px;overflow:hidden}
.faq summary{padding:12px 14px;cursor:pointer;font-weight:700;list-style:none;display:flex;justify-content:space-between;gap:10px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--accent);font-weight:900}
.faq details[open] summary::after{content:"–"}
.faq details p{margin:0;padding:0 14px 14px;color:var(--sub);line-height:1.65}

/* 글자 색 대비 개선 (PageSpeed 접근성): 기본 태그와 해시 태그 글자를 밝게 */
.tag{color:#cdd8f5}
a.tag.plain{color:#cdd8f5}
.rtags .tag.plain{color:#c3cfee}

/* ===== 시세판 ===== */
.mindex{display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr);gap:18px;margin:6px 0 14px;padding:18px 20px;border:1px solid var(--line);border-radius:14px;background:linear-gradient(180deg,var(--panel),var(--bg2))}
.mi-lab{display:block;color:var(--sub);font-size:.85rem;font-weight:700}
.mi-val{display:block;font-size:3rem;line-height:1.1;font-weight:900;font-variant-numeric:tabular-nums;background:linear-gradient(135deg,#ffd166,#ff9f1f);-webkit-background-clip:text;background-clip:text;color:transparent}
.mi-val small{font-size:1.4rem}
.mi-chg{display:inline-block;margin:2px 0 8px;font-weight:800;font-variant-numeric:tabular-nums;color:var(--sub)}
.mi-chg.up{color:#ff8a9b}.mi-chg.down{color:#7bb7ff}
.mi-chg small{font-weight:600;color:var(--sub)}
.mi-mood{margin:0 0 6px;font-weight:700}
.mi-mood.high{color:#7be0a8}.mi-mood.low{color:#9fb4dd}
.mi-sub{margin:0;color:var(--sub);font-size:.82rem}
.mi-chart{min-width:0}
.mchart{width:100%;height:auto}
@media(max-width:800px){.mindex{grid-template-columns:1fr}}
.msec{margin:20px 0}
.msec-h{display:flex;flex-direction:column;gap:2px;margin-bottom:10px}
.msec-h h2{display:flex;align-items:center;gap:8px;margin:0;font-size:1.1rem}
.msec-h p{margin:0;color:var(--sub);font-size:.86rem}
.mlist{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 12px}
.mlist a{display:grid;grid-template-columns:92px minmax(0,1fr) auto;gap:12px;align-items:center;padding:8px 12px 8px 8px;border:1px solid var(--line);border-radius:10px;background:linear-gradient(180deg,var(--panel),var(--bg2));transition:border-color .15s}
.mlist a:hover{border-color:var(--accent)}
.mlist img{width:92px;height:auto;aspect-ratio:460/215;object-fit:cover;border-radius:6px;display:block;background:#050814}
.mn{display:flex;flex-direction:column;min-width:0}
.mn b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mn small{color:var(--sub);font-size:.76rem}
.mp{display:flex;flex-direction:column;align-items:flex-end;gap:2px}
.mp b{font-variant-numeric:tabular-nums}
@media(max-width:800px){.mlist{grid-template-columns:1fr}}
.msec-more{display:inline-block;margin-top:10px;color:var(--accent);font-weight:700;font-size:.9rem}
.sharerow{margin:22px 0 6px}
@media(max-width:560px){
  .mlist a{grid-template-columns:76px minmax(0,1fr);gap:6px 10px;padding:8px}
  .mlist img{width:76px}
  .mp{grid-column:2;flex-direction:row;align-items:center;justify-content:flex-start;gap:8px}
  .mn small{white-space:normal}
}

/* ===== 한·미 가격 대결 ===== */
.glist a{grid-template-columns:92px minmax(0,1fr) auto}
.gk{color:var(--muted,#8a8f9a)}
em.gap{font-style:normal;font-weight:800;font-size:.8rem;padding:4px 10px;border-radius:999px;white-space:nowrap}
em.gap.cheap{color:#7be0a8;background:rgba(61,220,151,.14);border:1px solid rgba(61,220,151,.45)}
em.gap.pricey{color:#ffb4bf;background:rgba(255,93,115,.12);border:1px solid rgba(255,93,115,.4)}
@media(max-width:560px){.glist a{grid-template-columns:76px minmax(0,1fr)}.glist .mn small{white-space:normal}}

/* 취향 테스트 */
.quizbox{max-width:640px;margin:8px auto 22px;padding:22px 22px 18px;background:linear-gradient(180deg,var(--panel),var(--bg2));border:1px solid var(--line);border-radius:16px}
.qprog{height:6px;border-radius:99px;background:var(--bg);overflow:hidden}
.qbar{height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,var(--accent),var(--accent2));transition:width .25s}
.qno{margin:14px 0 0;color:var(--sub);font-size:.85rem;font-weight:700;min-height:1.2em}
.qtext{margin:6px 0 14px;font-size:1.25rem;letter-spacing:-.01em}
.qopts{display:grid;gap:10px}
.qopt{padding:15px 16px;border-radius:12px;border:1px solid var(--line);background:var(--bg);color:var(--text);font:inherit;font-weight:700;text-align:left;cursor:pointer;transition:all .15s}
.qopt:hover,.qopt:focus-visible{border-color:var(--accent);background:rgba(255,187,31,.12);outline:none}
.qback{margin-top:12px;background:none;border:0;color:var(--sub);font:inherit;font-size:.85rem;cursor:pointer;text-decoration:underline}
.qresult{max-width:720px;margin:6px auto 22px;text-align:center;padding:22px;background:linear-gradient(180deg,var(--panel),var(--bg2));border:1px solid var(--line);border-radius:16px}
.qresult h1{margin:2px 0 6px;font-size:2rem;letter-spacing:-.02em;background:linear-gradient(135deg,var(--neon),var(--accent2));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.qkick{margin:0;color:var(--sub);font-weight:700}
.qline{margin:0 0 10px;font-weight:700}
.qdesc{margin:0 auto 12px;color:var(--sub);line-height:1.65;max-width:560px}
.qresult .pills{justify-content:center}
.qacts{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:14px}
@media(max-width:560px){.quizbox{padding:16px}.qresult h1{font-size:1.6rem}}
.hubrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:10px;margin:0 0 16px}
.hubcard{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:linear-gradient(180deg,var(--panel),var(--bg2));transition:border-color .15s}
.hubcard:hover{border-color:var(--accent)}
.hubcard span{display:flex;flex-direction:column;gap:2px}
.hubcard small{color:var(--sub);font-size:.82rem}
.moodgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin-bottom:18px}
.moodcard{display:flex;flex-direction:column;gap:4px;padding:14px;border:1px solid var(--line);border-radius:12px;background:linear-gradient(180deg,var(--panel),var(--bg2));transition:border-color .15s,transform .15s}
.moodcard:hover{border-color:var(--accent);transform:translateY(-2px)}
.moodcard small{color:var(--sub);font-size:.8rem}
.sectrow{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}.sectrow .ghost{padding:6px 12px;font-size:.84rem}

/* 가격 달력 */
.calbox{margin:0 0 22px;padding:14px 16px 12px;background:linear-gradient(180deg,var(--panel),var(--bg2));border:1px solid var(--line);border-radius:14px}
.calbox .chead{display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.calbox h2{margin:0;font-size:1.05rem}
.calsum{color:var(--sub);font-size:.84rem}
.calwrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.calsvg{display:block;min-width:640px;width:100%;height:auto}
.calt{fill:var(--sub);font-size:9px}
.calsvg .c0,.calsw.c0{fill:#26335a;background:#26335a}
.calsvg .c1,.calsw.c1{fill:#2b7f9e;background:#2b7f9e}
.calsvg .c2,.calsw.c2{fill:#4f8cff;background:#4f8cff}
.calsvg .c3,.calsw.c3{fill:#8b5cf6;background:#8b5cf6}
.calsvg .c4,.calsw.c4{fill:#e0508f;background:#e0508f}
.calsvg .cl{stroke:#ffc13d;stroke-width:1.6}
.calsw{display:inline-block;width:11px;height:11px;border-radius:3px;vertical-align:-1px;margin:0 1px}
.calsw.cl{box-shadow:0 0 0 1.5px #ffc13d inset}
.calleg{display:flex;gap:16px;flex-wrap:wrap;margin:8px 0 0;padding:0;list-style:none}
/* ===== 게임 공략 (gd-) ===== */
.gd-search{margin:0 0 14px}
.gd-search input{width:100%;max-width:360px;padding:10px 14px;border-radius:10px;border:1px solid var(--line);background:var(--panel);color:var(--text);font-size:.95rem}
.gd-games .collcard[hidden]{display:none}
.gd-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.gd-list a{display:flex;flex-direction:column;gap:3px;padding:12px 16px;border:1px solid var(--line);border-radius:12px;background:var(--panel);color:var(--text)}
.gd-list a:hover{border-color:var(--accent)}
.gd-list small{color:var(--sub);font-size:.85rem;line-height:1.5}
.gd-topic{display:inline-block;margin-right:8px;padding:1px 8px;border-radius:999px;background:var(--greenbg);color:var(--green);font-size:.75rem;font-weight:600;width:max-content}
.gd-head{display:flex;gap:18px;align-items:center;margin:0 0 6px}
.gd-head img{width:230px;height:auto;border-radius:10px;border:1px solid var(--line)}
.gd-head h1{margin:0 0 4px;font-size:1.6rem;letter-spacing:-.02em}
.gd-head p{margin:0;color:var(--sub)}
.gd-head a{color:var(--accent)}
.gd-meta{color:var(--sub);font-size:.88rem;margin:0}
.gd-meta a{color:var(--sub);text-decoration:none}
.gd-summary{color:var(--sub);font-size:1.02rem;border-left:3px solid var(--accent);padding-left:12px}
.gd-article h3{font-size:1rem;margin:20px 0 4px}
.gd-article ol{padding-left:22px}
.gd-article table{width:100%;border-collapse:collapse;margin:12px 0;font-size:.92rem;display:block;overflow-x:auto}
.gd-article th,.gd-article td{border:1px solid var(--line);padding:6px 10px;text-align:left}
.gd-article th{background:var(--panel2)}
.gd-article blockquote{margin:14px 0 22px;padding:12px 16px;border:1px solid var(--line);border-left:3px solid var(--accent);background:var(--panel);border-radius:10px}
.gd-article blockquote ul{margin:6px 0 0;padding-left:18px}
.gd-article blockquote li{margin:2px 0}
.gd-article p{margin:10px 0}
.gd-article p > strong:first-child{color:var(--amber)}
.gd-article h2{margin-top:30px}
.gd-empty{color:var(--sub);padding:30px 0}
@media(max-width:700px){.gd-head{flex-direction:column;align-items:flex-start}.gd-head img{width:100%}}
.gd-article figure:not(.gd-v):not(.gd-hero):not(.gd-shot){margin:18px 0;padding:14px;background:var(--panel);border:1px solid var(--line);border-radius:12px}
.gd-article figure:not(.gd-v):not(.gd-hero):not(.gd-shot) svg{display:block;max-width:100%;height:auto;margin:0 auto}
.gd-article figcaption{color:var(--sub);font-size:.85rem;text-align:center;margin-top:8px}.gd-article .gd-shot{margin:18px 0}
.gd-article .gd-shot img{display:block;width:100%;height:auto;border-radius:10px;border:1px solid var(--line)}
/* ===== 공략 그림 블록 (gd-v): 서버가 그리는 흐름도·단계·막대·타임라인·카드 ===== */
.gd-article .gd-v{margin:22px 0;padding:18px 18px 16px;border:1px solid var(--line);border-radius:14px;background:radial-gradient(120% 140% at 0% 0%,rgba(255,187,31,.10),transparent 55%),linear-gradient(180deg,var(--panel),var(--bg2));box-shadow:0 1px 0 rgba(255,255,255,.05) inset,0 10px 28px rgba(0,0,0,.25)}
.gd-v .gd-vt{display:flex;align-items:center;gap:8px;margin:0 0 14px;font-size:.82rem;font-weight:700;letter-spacing:.04em;color:var(--sub);text-align:left}
.gd-v .gd-vt::before{content:"";width:4px;height:14px;border-radius:2px;background:linear-gradient(180deg,var(--neon),var(--accent2))}
.gd-v .gd-vn{margin:14px 0 0;padding-top:12px;border-top:1px dashed var(--line);font-size:.86rem;color:var(--sub)}
.gd-v ol,.gd-v ul{list-style:none;margin:0;padding:0}
.gd-v b{color:var(--text);font-weight:700}
.gd-v small{display:block;color:var(--sub);font-size:.8rem;line-height:1.45;margin-top:2px}
.gd-n{display:inline-grid;place-items:center;flex:none;width:24px;height:24px;border-radius:50%;font-size:.75rem;font-weight:800;color:#06101f;background:linear-gradient(135deg,var(--neon),var(--accent))}
/* 흐름도 */
.gd-steps{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:22px}
.gd-steps li{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:12px 12px 13px;border-radius:11px;background:rgba(12,14,18,.55);border:1px solid var(--line)}
.gd-steps li::after{content:"";position:absolute;right:-17px;top:50%;width:10px;height:10px;border-top:2px solid var(--accent);border-right:2px solid var(--accent);transform:translateY(-50%) rotate(45deg);opacity:.8}
.gd-steps li:last-child::after{display:none}
.gd-steps li:first-child{border-color:rgba(255,209,102,.45)}
.gd-loop{margin:12px 0 0;text-align:center;font-size:.82rem;color:var(--sub)}
.gd-loop span{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border:1px dashed rgba(255,159,31,.6);border-radius:999px}
.gd-loop span::before{content:"";width:10px;height:10px;border:2px solid var(--accent2);border-right-color:transparent;border-radius:50%}
/* 단계(진행 사다리) */
.gd-ladder{display:flex;flex-direction:column;gap:8px}
.gd-ladder li{position:relative;display:grid;grid-template-columns:24px 1fr;column-gap:12px;align-items:center;padding:10px 14px;border-radius:10px;background:rgba(12,14,18,.55);border:1px solid var(--line);overflow:hidden}
.gd-ladder li::before{content:"";position:absolute;inset:0 auto 0 0;width:var(--p);background:linear-gradient(90deg,rgba(255,187,31,.22),rgba(255,209,102,.06));z-index:0}
.gd-ladder li>*{position:relative;z-index:1}
.gd-ladder li small{grid-column:2;margin:0}
.gd-ladder li .gd-n{grid-row:span 2}
.gd-ladder li:first-child{border-color:rgba(255,209,102,.5)}
.gd-ladder li:first-child b{color:var(--neon)}
/* 비교 막대 */
.gd-bars{display:flex;flex-direction:column;gap:12px}
.gd-bars li{display:grid;grid-template-columns:minmax(90px,30%) 1fr auto;gap:12px;align-items:center}
.gd-bars .gd-bt{height:10px;border-radius:999px;background:rgba(12,14,18,.7);border:1px solid var(--line);overflow:hidden}
.gd-bars .gd-bt i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--accent),var(--neon))}
.gd-bars li:first-child .gd-bt i{background:linear-gradient(90deg,var(--accent2),var(--neon))}
.gd-bars em{font-style:normal;font-weight:800;font-size:.9rem;color:var(--text);min-width:3.5em;text-align:right;font-variant-numeric:tabular-nums}
/* 타임라인 */
.gd-v .gd-tl{position:relative;padding-left:26px}
.gd-tl::before{content:"";position:absolute;left:6px;top:6px;bottom:6px;width:2px;border-radius:2px;background:linear-gradient(180deg,var(--accent),rgba(255,187,31,.15))}
.gd-tl li{position:relative;display:grid;grid-template-columns:minmax(64px,auto) 1fr;gap:4px 14px;padding:8px 0}
.gd-tl li::before{content:"";position:absolute;left:-26px;top:12px;width:14px;height:14px;box-sizing:border-box;border-radius:50%;background:var(--bg);border:3px solid var(--accent)}
.gd-tl li.k-safe::before{border-color:var(--green)}
.gd-tl li.k-warn::before{border-color:var(--amber)}
.gd-tl li.k-danger::before{border-color:#ff5c7a;box-shadow:0 0 0 4px rgba(255,92,122,.15)}
.gd-tl li b{font-variant-numeric:tabular-nums;white-space:nowrap}
.gd-tl li.k-danger b{color:#ff8aa0}
.gd-tl li.k-safe b{color:var(--green)}
.gd-tl li.k-warn b{color:var(--amber)}
.gd-tl li span{color:var(--text);font-size:.92rem}
/* 비교 카드 */
.gd-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}
.gd-card{position:relative;padding:14px;border-radius:12px;background:rgba(12,14,18,.55);border:1px solid var(--line)}
.gd-card:first-child{border-color:rgba(61,220,151,.45)}
.gd-card b{font-size:1rem}
.gd-card ul{margin-top:10px;display:flex;flex-direction:column;gap:6px}
.gd-card li{display:flex;gap:8px;align-items:flex-start;font-size:.86rem;line-height:1.45;color:var(--text)}
.gd-ic{flex:none;width:16px;height:16px;margin-top:2px}
.gd-ic.ok{color:var(--green)}
.gd-ic.no{color:#ff7a90}
.gd-tag{display:inline-block;margin-bottom:6px;padding:1px 8px;border-radius:999px;font-size:.72rem;font-weight:700;background:var(--greenbg);color:var(--green)}
@media(max-width:700px){
  .gd-article .gd-v{padding:14px}
  .gd-steps{grid-auto-flow:row;grid-auto-columns:auto;gap:16px}
  .gd-steps li{flex-direction:row;flex-wrap:wrap;align-items:center;column-gap:10px}
  .gd-steps li small{flex-basis:100%;padding-left:34px;margin:0}
  .gd-steps li::after{right:auto;left:20px;top:auto;bottom:-13px;transform:rotate(135deg)}
  .gd-bars li{grid-template-columns:1fr auto}
  .gd-bars .gd-bl{grid-column:1/-1}
  .gd-tl li{grid-template-columns:1fr}
}/* 공략 글머리 이미지 (스팀 공식 라이브러리 배너) */
.gd-article .gd-hero{position:relative;margin:14px 0 18px;border-radius:14px;overflow:hidden;border:1px solid var(--line);background:var(--bg2);aspect-ratio:31/10;box-shadow:0 12px 30px rgba(0,0,0,.35)}
.gd-article .gd-hero img{display:block;width:100%;height:100%;object-fit:cover}
.gd-article .gd-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(12,14,18,.55));pointer-events:none}
.gd-article .gd-hero.sm{aspect-ratio:460/215}
/* ===== 공략 글 읽기 개선: 주제별 뱃지 색, 포인트 색(진한 노랑), 본문 타이포 ===== */
.gd-topic.t-beginner{background:rgba(61,220,151,.14);color:#4fe3a3;box-shadow:inset 0 0 0 1px rgba(61,220,151,.35)}
.gd-topic.t-build{background:rgba(79,140,255,.16);color:#7fb0ff;box-shadow:inset 0 0 0 1px rgba(79,140,255,.4)}
.gd-topic.t-boss{background:rgba(255,92,122,.14);color:#ff8ea2;box-shadow:inset 0 0 0 1px rgba(255,92,122,.4)}
.gd-topic.t-ending{background:rgba(139,92,246,.18);color:#bba3ff;box-shadow:inset 0 0 0 1px rgba(139,92,246,.45)}
.gd-topic.t-etc{background:rgba(139,151,184,.14);color:#c3cbe3;box-shadow:inset 0 0 0 1px rgba(139,151,184,.35)}
.gd-article{--point:#ffbb1f;max-width:720px;font-size:1.03rem;line-height:1.85;letter-spacing:-.005em;word-break:keep-all;overflow-wrap:anywhere}
.gd-article h1{font-size:1.85rem;line-height:1.35;letter-spacing:-.025em;margin:8px 0 4px}
.gd-article > p,.gd-article > ul > li,.gd-article > ol > li{color:#d6dcee}
.gd-article > p{margin:14px 0}
.gd-article h2{position:relative;margin:44px 0 12px;padding-left:14px;font-size:1.3rem;line-height:1.4;letter-spacing:-.02em;color:var(--point)}
.gd-article h2::before{content:"";position:absolute;left:0;top:.25em;bottom:.25em;width:4px;border-radius:2px;background:linear-gradient(180deg,var(--point),#ff8a1f)}
.gd-article h3{margin:26px 0 6px;font-size:1.08rem;color:var(--text)}
.gd-article strong,.gd-article b{color:var(--point);font-weight:700}
.gd-article p > strong:first-child{color:var(--point)}
.gd-article > ul,.gd-article > ol{padding-left:22px;margin:10px 0 16px}
.gd-article > ul > li,.gd-article > ol > li{margin:6px 0;padding-left:2px}
.gd-article > ul > li::marker{color:var(--point)}
.gd-article > ol > li::marker{color:var(--point);font-weight:700}
.gd-article blockquote{border-left-color:var(--point)}
.gd-article blockquote > strong:first-child{display:block;margin-bottom:4px;font-size:.8rem;letter-spacing:.06em;color:var(--point)}
.gd-article blockquote li{color:var(--text)}
.gd-article blockquote li::marker{color:var(--point)}
.gd-article .gd-summary{font-size:1.05rem;line-height:1.7;color:#c4cbe0;border-left-color:var(--point)}
.gd-article th{color:var(--point)}
.gd-article td,.gd-article th{padding:9px 12px}
.gd-article .gd-v b{color:var(--text)}
.gd-article .gd-v .gd-ladder li:first-child b,.gd-article .gd-card .gd-tag+b{color:var(--text)}
@media(max-width:700px){.gd-article{font-size:1rem;line-height:1.8}.gd-article h1{font-size:1.5rem}.gd-article h2{font-size:1.18rem;margin-top:36px}}
/* ===== 공략 화면 차콜 톤 (채도 낮춘 어두운 회색, 색은 포인트와 뱃지에만) ===== */
body.theme-charcoal{--bg:#0c0e12;--bg2:#111419;--panel:#15181e;--panel2:#1b1f26;--line:#262a33;--text:#ecedf0;--sub:#9a9fab;
  background:radial-gradient(900px 420px at 50% -10%,rgba(255,187,31,.05),transparent 60%),var(--bg)}
body.theme-charcoal .bgdeco{display:none}
body.theme-charcoal header.top,body.theme-charcoal header.top.scrolled,body.theme-charcoal header.top:not(.scrolled){background:rgba(12,14,18,.97);border-bottom-color:var(--line)}
body.theme-charcoal .gd-article > p,body.theme-charcoal .gd-article > ul > li,body.theme-charcoal .gd-article > ol > li{color:#d4d6dc}
body.theme-charcoal .gd-article .gd-v{background:var(--panel);border-color:var(--line);box-shadow:0 1px 0 rgba(255,255,255,.03) inset}
body.theme-charcoal .gd-steps li,body.theme-charcoal .gd-ladder li,body.theme-charcoal .gd-card,body.theme-charcoal .gd-bars .gd-bt{background:var(--bg2);border-color:var(--line)}
body.theme-charcoal .gd-ladder li::before{background:linear-gradient(90deg,rgba(255,187,31,.16),rgba(255,187,31,.03))}
body.theme-charcoal .gd-ladder li:first-child{border-color:rgba(255,187,31,.5)}
body.theme-charcoal .gd-ladder li:first-child b{color:var(--point,#ffbb1f)}
body.theme-charcoal .gd-n{background:linear-gradient(135deg,#ffd166,#ffbb1f);color:#1a1405}
body.theme-charcoal .gd-steps li::after{border-color:#5d6370}
body.theme-charcoal .gd-steps li:first-child{border-color:rgba(255,187,31,.45)}
body.theme-charcoal .gd-v .gd-vt::before{background:linear-gradient(180deg,#ffd166,#ff8a1f)}
body.theme-charcoal .gd-bars .gd-bt i{background:linear-gradient(90deg,#ff9f1f,#ffcf4a)}
body.theme-charcoal .gd-bars li:first-child .gd-bt i{background:linear-gradient(90deg,#ff8a1f,#ffd166)}
body.theme-charcoal .gd-tl::before{background:linear-gradient(180deg,#5d6370,rgba(93,99,112,.2))}
body.theme-charcoal .gd-tl li::before{background:var(--bg2)}
body.theme-charcoal .gd-loop span{border-color:#5d6370}
body.theme-charcoal .gd-loop span::before{border-color:#ffbb1f;border-right-color:transparent}
body.theme-charcoal .gd-article blockquote{background:var(--panel);border-color:var(--line);border-left-color:var(--point,#ffbb1f)}
body.theme-charcoal .gd-article .gd-hero{border-color:var(--line);box-shadow:0 12px 30px rgba(0,0,0,.45)}
body.theme-charcoal .gd-list a{background:var(--panel);border-color:var(--line)}
body.theme-charcoal .gd-list a:hover{border-color:#ffbb1f}
body.theme-charcoal .collcard{background:var(--panel);border-color:var(--line)}
body.theme-charcoal .collcard:hover{border-color:#ffbb1f;box-shadow:0 10px 26px rgba(0,0,0,.5)}
body.theme-charcoal .gd-search input{background:var(--panel);border-color:var(--line)}
body.theme-charcoal .gd-article th{background:var(--panel2)}
/* 공략 첫 화면 게임 카드 (차콜 톤) */
.gd-ggrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
.gd-gcard{display:flex;flex-direction:column;border-radius:12px;overflow:hidden;background:var(--panel);border:1px solid var(--line);color:var(--text);transition:transform .15s,border-color .15s,box-shadow .15s}
.gd-gcard:hover{transform:translateY(-3px);border-color:rgba(255,187,31,.6);box-shadow:0 12px 28px rgba(0,0,0,.5)}
.gd-gcard[hidden]{display:none}
.gd-gimg{display:grid;place-items:center;aspect-ratio:460/215;background:var(--bg2);color:var(--sub)}
.gd-gimg img{display:block;width:100%;height:100%;object-fit:cover}
.gd-gbody{display:flex;flex-direction:column;gap:4px;padding:11px 13px 13px}
.gd-gbody b{font-size:.98rem;line-height:1.35;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gd-gbody em{font-style:normal;font-size:.82rem;font-weight:700;color:#ffbb1f}
body.theme-charcoal .hero h1 em{background:linear-gradient(90deg,#ffd166,#ff9f1f);-webkit-background-clip:text;background-clip:text;color:transparent}
body.theme-charcoal .gd-head a{color:#ffbb1f}
@media(max-width:700px){.gd-ggrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.gd-gbody b{font-size:.9rem}}
/* 게임별 공략 목록: 공식 배너 헤더 + 주제 뱃지 카드 */
.gd-ghero{position:relative;margin:0 0 22px;border-radius:16px;overflow:hidden;border:1px solid var(--line);background:var(--bg2);aspect-ratio:31/9;min-height:200px}
.gd-ghero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.gd-ghero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(12,14,18,.92) 0%,rgba(12,14,18,.7) 45%,rgba(12,14,18,.15) 100%),linear-gradient(0deg,rgba(12,14,18,.7),transparent 50%)}
.gd-ghero-in{position:absolute;left:0;bottom:0;z-index:1;display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:24px 26px;max-width:640px}
.gd-ghero h1{margin:0;font-size:1.9rem;line-height:1.25;letter-spacing:-.025em;text-shadow:0 2px 12px rgba(0,0,0,.6)}
.gd-gchips{display:flex;flex-wrap:wrap;gap:6px;margin:0}
.gd-gchips .gd-topic{margin:0;backdrop-filter:blur(6px)}
.gd-pricebtn{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:999px;font-size:.85rem;font-weight:700;color:#1a1405;background:linear-gradient(135deg,#ffd166,#ffbb1f)}
.gd-pricebtn:hover{filter:brightness(1.08)}
.gd-cardlist{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.gd-gc{--tc:#9aa1b0;position:relative;display:flex;flex-direction:column;gap:8px;padding:16px 18px 14px 20px;border-radius:12px;background:var(--panel);border:1px solid var(--line);color:var(--text);overflow:hidden;transition:transform .15s,border-color .15s,box-shadow .15s}
.gd-gc::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--tc)}
.gd-gc:hover{transform:translateY(-2px);border-color:var(--tc);box-shadow:0 12px 26px rgba(0,0,0,.45)}
.gd-gc.t-beginner{--tc:#3ddc97}.gd-gc.t-build{--tc:#5b9bff}.gd-gc.t-boss{--tc:#ff6b85}.gd-gc.t-ending{--tc:#a98bff}.gd-gc.t-etc{--tc:#9aa1b0}
.gd-gc .gd-topic{margin:0}
.gd-gc b{font-size:1.05rem;line-height:1.45;letter-spacing:-.01em}
.gd-gc small{color:var(--sub);font-size:.86rem;line-height:1.6;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;word-break:keep-all}
.gd-gc-foot{display:flex;justify-content:space-between;align-items:center;margin-top:auto;padding-top:8px;border-top:1px solid var(--line);font-size:.78rem;color:var(--sub)}
.gd-gc-foot em{font-style:normal;font-weight:700;color:#ffbb1f}
@media(max-width:700px){.gd-ghero{aspect-ratio:auto;min-height:230px}.gd-ghero-in{padding:18px}.gd-ghero h1{font-size:1.45rem}.gd-cardlist{grid-template-columns:1fr}}
/* ===== 내 PC 사양 비교 ===== */
.pcbox{margin:22px 0;padding:18px 20px;border:1px solid var(--line);border-radius:14px;background:linear-gradient(180deg,var(--panel),var(--bg2))}
.pcbox-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.pcbox-head h2{margin:0;font-size:1.1rem}
.pclv{display:inline-block;padding:4px 12px;border-radius:999px;font-weight:800;font-size:.9rem}
.pclv.sm{padding:1px 8px;font-size:.72rem;font-weight:700;margin-left:4px;vertical-align:1px}
.pclv.lv0{background:rgba(255,92,122,.16);color:#ff8ea2;box-shadow:inset 0 0 0 1px rgba(255,92,122,.45)}
.pclv.lv1{background:rgba(255,187,31,.14);color:#ffc94d;box-shadow:inset 0 0 0 1px rgba(255,187,31,.45)}
.pclv.lv2{background:rgba(61,220,151,.14);color:#4fe3a3;box-shadow:inset 0 0 0 1px rgba(61,220,151,.45)}
.pclv.lv3{background:rgba(79,140,255,.16);color:#8fb8ff;box-shadow:inset 0 0 0 1px rgba(79,140,255,.45)}
.pcdot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-left:6px;vertical-align:1px}
.pcdot.lv0{background:#ff6b85}.pcdot.lv1{background:#ffbb1f}.pcdot.lv2{background:#3ddc97}.pcdot.lv3{background:#5b9bff}
.pcbox-table{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.pcrow{display:grid;grid-template-columns:110px 1.1fr 1fr 1fr;gap:12px;padding:10px 14px;border-top:1px solid var(--line);font-size:.88rem;align-items:start}
.pcrow.nomine{grid-template-columns:110px 1fr 1fr}
.pcrow:first-child{border-top:0}
.pchead{background:rgba(255,255,255,.03);color:var(--sub);font-size:.78rem;font-weight:700}
.pcbox-table:not(:has(.pcmine)) .pchead{grid-template-columns:110px 1fr 1fr}
.pcrow b{color:var(--text)}
.pcrow span{color:#cfd5e6;word-break:keep-all;overflow-wrap:anywhere}
.pcmine{color:var(--text)!important;font-weight:600}
.pcbox-foot{margin:10px 0 0;font-size:.82rem;color:var(--sub)}
.pcbox-foot a{color:var(--accent)}
.pcset-cta{display:inline-block;padding:7px 14px;border-radius:999px;background:linear-gradient(135deg,var(--neon),var(--accent));color:#06101f!important;font-weight:800}
.tchip-link span{opacity:.85}
.pcset{max-width:560px;margin:0 auto}
.pcset h1{font-size:1.6rem;margin:6px 0 6px}
.pcset-sub,.pcset-note{color:var(--sub);font-size:.9rem;line-height:1.7}
.pcset-err{color:#ff8ea2}
.pcset-form{display:flex;flex-direction:column;gap:14px;margin:18px 0;padding:18px;border:1px solid var(--line);border-radius:14px;background:var(--panel)}
.pcset-form label{display:flex;flex-direction:column;gap:6px}
.pcset-form label span{font-weight:700;font-size:.9rem}
.pcset-form input,.pcset-form select{padding:10px 12px;border-radius:10px;border:1px solid var(--line);background:var(--bg2);color:var(--text);font-size:.95rem}
.pcset-form small{color:var(--green);font-size:.8rem;min-height:1em}
.pcset-btns{display:flex;gap:10px;flex-wrap:wrap}
.pcset-save{padding:10px 18px;border:0;border-radius:10px;background:linear-gradient(135deg,var(--neon),var(--accent));color:#06101f;font-weight:800;cursor:pointer}
.pcset-clear{padding:10px 14px;border:1px solid var(--line);border-radius:10px;background:transparent;color:var(--sub);cursor:pointer}
@media(max-width:700px){.pcrow,.pcrow.nomine,.pcbox-table:not(:has(.pcmine)) .pchead{grid-template-columns:1fr 1fr;gap:4px 10px}.pcrow b{grid-column:1/-1}.pchead span:first-child{display:none}.pcrow.pchead{display:none}.pcrow span::before{content:attr(data-label);display:block;color:var(--sub);font-size:.72rem}.pcrow .pcmine{grid-column:1/-1}}
/* 검색 결과가 적을 때: 스팀에서 찾은 게임 */
.steamhits{margin:18px 0}
.steamhits-sub{color:var(--sub);font-size:.88rem;margin:-4px 0 12px}
.steamhits ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.steamhits a{display:grid;grid-template-columns:120px 1fr;grid-template-rows:auto auto;column-gap:14px;align-items:center;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--panel);color:var(--text)}
.steamhits a:hover{border-color:var(--accent)}
.steamhits img{grid-row:span 2;width:120px;height:45px;object-fit:cover;border-radius:6px}
.steamhits b{font-size:.95rem}
.steamhits span{color:var(--sub);font-size:.82rem}

/* ===== 더보기 (태그 목록 등: 처음엔 12개만) ===== */
.clip > :nth-child(n+13):not(.keep){display:none}
.morebtn{display:block;margin:-14px auto 28px;padding:9px 22px;border:1px solid var(--line);border-radius:999px;background:var(--panel);color:var(--text);font:inherit;font-size:.9rem;font-weight:600;cursor:pointer;transition:border-color .15s,background .15s}
.morebtn:hover{border-color:var(--accent)}
.tagrelated.clip + .morebtn{margin-top:-14px}

/* ===== 수상작 모음 ===== */
.aw-hero{position:relative;overflow:hidden;margin:6px 0 22px;padding:34px 30px;border:1px solid rgba(255,187,31,.28);border-radius:20px;background:radial-gradient(120% 140% at 0% 0%,#2a2210 0%,#15130e 45%,#0f1014 100%)}
.aw-hero-glow{position:absolute;inset:auto -10% -60% 40%;height:120%;background:radial-gradient(closest-side,rgba(255,187,31,.22),transparent);pointer-events:none}
.aw-hero-in{position:relative;display:flex;gap:26px;align-items:center}
.aw-hero .aw-trophy{flex:none;filter:drop-shadow(0 10px 24px rgba(255,170,0,.35))}
.aw-kicker{margin:0 0 6px;font-size:.72rem;letter-spacing:.18em;font-weight:800;color:#c9a55a}
.aw-hero h1{margin:0 0 10px;font-size:2rem;line-height:1.25;color:#fff}
.aw-hero h1 em{font-style:normal;color:#ffbb1f}
.aw-lead{margin:0 0 16px;color:#cfc8b8;max-width:620px}
.aw-stats{display:flex;flex-wrap:wrap;gap:8px}
.aw-stats span{display:flex;align-items:baseline;gap:6px;padding:7px 14px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);color:#d8d2c4;font-size:.85rem}
.aw-stats b{font-size:1.15rem;color:#fff}
.aw-stats .hot b{color:#ffbb1f}
.aw-guide{margin:0 0 30px;padding:24px 24px 18px;border:1px solid var(--line);border-radius:16px;background:var(--panel)}
.aw-guide h2{margin:0 0 16px;font-size:1.25rem}
.aw-orgs{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.aw-org{position:relative;padding:18px 18px 14px;border-radius:12px;background:var(--bg2);border:1px solid var(--line)}
.aw-org h3{margin:8px 0 6px;font-size:1.05rem}
.aw-org p{margin:0 0 8px;color:#c9ccd3;font-size:.92rem;line-height:1.7}
.aw-org .aw-org-tip{margin:0;color:var(--sub);font-size:.84rem}
.aw-org-badge{display:inline-block;padding:3px 9px;border-radius:6px;font-size:.7rem;font-weight:800;letter-spacing:.08em}
.aw-org.tga .aw-org-badge{background:#ffbb1f;color:#1a1405}
.aw-org.steam .aw-org-badge{background:#2a475e;color:#c7d5e0}
.aw-org.tga{border-top:3px solid #ffbb1f}
.aw-org.steam{border-top:3px solid #66c0f4}
.aw-both{margin:14px 0 0;padding:16px 18px;border-radius:12px;background:linear-gradient(90deg,rgba(255,187,31,.12),rgba(102,192,244,.08));border:1px solid rgba(255,187,31,.25)}
.aw-both b{color:#ffd166}
.aw-both p{margin:6px 0 10px;color:#c9ccd3;font-size:.9rem}
.aw-both-list{display:flex;flex-wrap:wrap;gap:8px}
.aw-both-list a{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:999px;background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.1);color:#fff;font-size:.88rem;font-weight:600}
.aw-both-list a:hover{border-color:#ffbb1f}
.aw-both-list em{font-style:normal;color:#ffbb1f;font-size:.78rem}
.aw-note{margin:14px 0 0;color:var(--sub);font-size:.84rem;line-height:1.7}
.aw-tl{list-style:none;margin:0 0 34px;padding:0;position:relative}
.aw-tl::before{content:"";position:absolute;left:34px;top:8px;bottom:8px;width:2px;background:linear-gradient(180deg,#ffbb1f,rgba(255,187,31,.08))}
.aw-tl li{position:relative;display:grid;grid-template-columns:70px 1fr 1fr;gap:12px;align-items:stretch;margin-bottom:12px}
.aw-year{position:relative;z-index:1;align-self:center;justify-self:center;padding:6px 10px;border-radius:10px;background:#1a1609;border:1px solid rgba(255,187,31,.5);color:#ffd166;font-weight:800;font-size:.9rem}
.aw-tile{display:grid;grid-template-columns:130px 1fr;gap:12px;align-items:center;min-height:72px;padding:8px;border:1px solid var(--line);border-radius:12px;background:var(--panel);color:var(--text);transition:border-color .15s,transform .15s}
a.aw-tile:hover{transform:translateY(-2px)}
.aw-tile.tga{border-left:3px solid #ffbb1f}
.aw-tile.steam{border-left:3px solid #66c0f4}
a.aw-tile.tga:hover{border-color:#ffbb1f}
a.aw-tile.steam:hover{border-color:#66c0f4}
.aw-tile img{width:130px;height:61px;object-fit:cover;border-radius:8px}
.aw-tile-body{display:flex;flex-direction:column;gap:2px;min-width:0}
.aw-tile small{color:var(--sub);font-size:.72rem;font-weight:700;letter-spacing:.04em}
.aw-tile b{font-size:.95rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.aw-tile.off,.aw-tile.empty{grid-template-columns:1fr;padding:12px 14px;opacity:.6}
.aw-tile.empty{display:flex;flex-direction:column;justify-content:center;gap:2px;border-style:dashed;background:transparent;color:var(--sub);font-size:.82rem}
.aw-price{display:flex;align-items:baseline;gap:6px;font-size:.88rem;font-weight:700;color:var(--text)}
.aw-price em{font-style:normal;padding:1px 6px;border-radius:5px;background:#4c6b22;color:#beee11;font-size:.78rem}
.aw-price s{color:var(--sub);font-weight:400;font-size:.78rem}
.aw-filter{margin:0 0 14px}
.aw-filter .pill{font:inherit;cursor:pointer}
.aw-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px;margin-bottom:30px}
.aw-card{border:1px solid var(--line);border-radius:14px;background:var(--panel);overflow:hidden;transition:border-color .15s,transform .15s}
.aw-card:hover{transform:translateY(-3px);border-color:#5d6370}
.aw-card.goty{border-color:rgba(255,187,31,.45);box-shadow:0 0 0 1px rgba(255,187,31,.08),0 10px 30px -18px rgba(255,187,31,.5)}
.aw-card.goty:hover{border-color:#ffbb1f}
.aw-card-link{display:flex;flex-direction:column;height:100%;color:var(--text)}
.aw-thumb{position:relative;aspect-ratio:460/215;background:var(--bg2)}
.aw-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.aw-count{position:absolute;left:8px;bottom:8px;display:inline-flex;align-items:center;gap:4px;padding:3px 9px 3px 6px;border-radius:999px;background:rgba(10,10,12,.82);backdrop-filter:blur(4px);color:#ffd166;font-size:.78rem;font-weight:800}
.aw-body{display:flex;flex-direction:column;gap:10px;flex:1;padding:12px 14px 14px}
.aw-body h3{margin:0;font-size:1rem;line-height:1.35}
.aw-wins{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px}
.aw-wins li{display:flex;align-items:center;gap:7px;font-size:.82rem;color:#d4d6dc}
.aw-wins li span{flex:none;padding:1px 7px;border-radius:5px;font-size:.7rem;font-weight:800;background:#262a33;color:#aab0bd}
.aw-wins li.gold{color:#ffd166;font-weight:700}
.aw-wins li.gold span{background:#ffbb1f;color:#1a1405}
.aw-wins li.steam span{background:#2a475e;color:#c7d5e0}
.aw-wins li.more{color:var(--sub);font-size:.78rem;cursor:help}
.aw-foot{display:flex;justify-content:space-between;align-items:center;margin-top:auto;padding-top:10px;border-top:1px solid var(--line)}
.aw-rev{color:var(--sub);font-size:.8rem}
.aw-empty{color:var(--sub);text-align:center;padding:30px 0}
.hub-award{border-color:rgba(255,187,31,.4)}
@media(max-width:760px){.aw-hero{padding:24px 18px}.aw-hero-in{flex-direction:column;align-items:flex-start;gap:14px}.aw-hero h1{font-size:1.55rem}
.aw-orgs{grid-template-columns:1fr}.aw-tl::before{left:20px}.aw-tl li{grid-template-columns:42px 1fr;}.aw-tl li .aw-tile{grid-column:2}.aw-year{grid-row:span 2;align-self:start;margin-top:10px;font-size:.78rem;padding:5px 6px}
.aw-tile{grid-template-columns:96px 1fr}.aw-tile img{width:96px;height:45px}}
/* ===== 게임 상세 아래쪽: 구매 판단 카드 ===== */
.buybox{--lv:#ffbb1f;--lv-bg:rgba(255,187,31,.12);position:relative;overflow:hidden;margin-top:22px;padding:22px 22px 16px;border:1px solid var(--line);border-radius:16px;background:linear-gradient(180deg,var(--panel),var(--bg2))}
.buybox.lv-good{--lv:#3ddc97;--lv-bg:rgba(61,220,151,.12)}
.buybox.lv-mid{--lv:#ffb84d;--lv-bg:rgba(255,184,77,.12)}
.buybox::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:linear-gradient(90deg,var(--lv),transparent 70%)}
.buybox::after{content:"";position:absolute;right:-80px;top:-120px;width:320px;height:320px;border-radius:50%;background:radial-gradient(closest-side,var(--lv-bg),transparent);pointer-events:none}
.buy-head{position:relative;display:flex;gap:16px;align-items:flex-start}
.buy-ico{flex:none;display:flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:14px;background:var(--lv-bg);color:var(--lv);border:1px solid color-mix(in srgb,var(--lv) 40%,transparent)}
.buy-kicker{margin:0 0 2px;font-size:.74rem;font-weight:800;letter-spacing:.06em;color:var(--lv)}
.buybox h2{margin:0 0 4px;font-size:1.3rem;line-height:1.35}
.buy-text{margin:0;color:#c9d1ea;line-height:1.6}
.buy-tiles{position:relative;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin:18px 0 0}
.bt{display:flex;flex-direction:column;gap:3px;padding:12px 14px;border-radius:12px;background:rgba(5,10,30,.35);border:1px solid rgba(255,255,255,.06)}
.bt-lab{font-size:.76rem;color:var(--sub)}
.bt b{font-size:1.18rem;line-height:1.25;font-variant-numeric:tabular-nums}
.bt small{font-size:.76rem;color:var(--sub)}
.bt.hot{border-color:color-mix(in srgb,var(--lv) 45%,transparent);background:var(--lv-bg)}
.bt.hot b{color:var(--lv)}
.buy-note{position:relative;margin:12px 0 0;font-size:.76rem;color:var(--sub)}
/* 구매 판단 바로 아래 알림: 판단 -> 행동으로 이어지게 붙여서 보여 줘요 */
.buybox + .alertbox{margin-top:10px}
/* 자주 묻는 질문 */
.faqbox{margin-top:30px}
.faqbox h2{margin:0 0 12px;font-size:1.05rem}
.faqbox .faq details{background:transparent;border:0;border-bottom:1px solid var(--line);border-radius:0;margin:0}
.faqbox .faq details:first-child{border-top:1px solid var(--line)}
.faqbox .faq summary{padding:15px 4px;font-weight:600;align-items:center;justify-content:flex-start}
.faqbox .faq summary::after{content:"";margin-left:auto;flex:none;width:8px;height:8px;border-right:2px solid var(--sub);border-bottom:2px solid var(--sub);transform:rotate(45deg) translateY(-3px);transition:transform .2s}
.faqbox .faq details[open] summary::after{content:"";transform:rotate(-135deg) translateY(-1px)}
.faqbox .fq{flex:none;display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;margin-right:10px;border-radius:7px;background:rgba(255,187,31,.16);color:#ffd166;font-size:.78rem;font-weight:800}
.faqbox .faq details p{padding:0 4px 16px 38px;color:#b9c2dc}
/* 비슷한 할인 게임은 상자 없이 */
.relatedbox{background:none;border:0;padding:0;margin-top:30px;box-shadow:none}
@media(max-width:640px){.buybox{padding:18px 16px 14px}.buybox h2{font-size:1.12rem}.buy-head{flex-direction:column;gap:10px}.buy-ico{width:40px;height:40px}.buy-tiles{grid-template-columns:1fr 1fr}}
/* 게임 상세: 칸 순서를 바꿔도 간격이 일정하게 */
.detail ~ .chartbox,.detail ~ .calbox{margin-top:22px}
.detail ~ .calbox{margin-bottom:0}

/* ===== 오늘의 위시 9 (홈 맨 위 3x3) ===== */
.w9box{margin:6px 0 4px;padding:16px;border:1px solid var(--line);border-radius:16px;background:linear-gradient(180deg,rgba(255,187,31,.07),rgba(255,187,31,0) 60%),var(--panel)}
.w9head{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;margin-bottom:12px}
.w9head h1{display:flex;align-items:center;gap:8px;margin:0;font-size:1.45rem;letter-spacing:-.02em}
.w9head h1 em{font-style:normal;color:var(--neon)}
.w9head p{margin:0;color:var(--sub);font-size:.88rem;flex:1 1 260px}
.w9me{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:999px;font-size:.85rem;color:#ffe2a0;background:rgba(255,187,31,.12);border:1px solid rgba(255,187,31,.35);text-decoration:none}
.w9me:hover{background:rgba(255,187,31,.22)}
.w9grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.w9t{display:flex;flex-direction:column;gap:4px;color:var(--text);text-decoration:none}
.w9img{position:relative;display:block;border-radius:10px;overflow:hidden;aspect-ratio:460/215;background:var(--panel2)}
.w9img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .2s}
.w9t:hover .w9img img{transform:scale(1.04)}
.w9why{position:absolute;left:6px;top:6px;padding:2px 7px;border-radius:6px;font-size:.72rem;font-weight:700;background:rgba(12,14,18,.82);color:#ffe2a0}
.w9-low .w9why{background:#ffbb1f;color:#1a1405}
.w9n{font-size:.9rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.w9p{font-size:.88rem;color:var(--sub)}
.w9p em{font-style:normal;font-weight:700;color:var(--neon);margin-right:2px}
.sect.w9list{margin-top:22px}
.sect.w9list small{margin-left:8px;font-size:.8rem;font-weight:400;color:var(--sub)}
@media (max-width:700px){
  .w9box{padding:12px;border-radius:14px}
  .w9grid{gap:8px}
  .w9why{font-size:.62rem;padding:1px 5px;left:4px;top:4px}
  .w9n{font-size:.78rem}
  .w9p{font-size:.76rem}
  .w9p em{display:block}
}

/* ===== 상단 설정 메뉴(언어·나라·배경 한곳에) ===== */
.setmenu .upop{min-width:220px}
.setmenu .uplab{padding:8px 12px 2px;font-size:.74rem;font-weight:700;color:var(--sub);letter-spacing:.02em}
.setmenu .uplab:not(:first-child){border-top:1px solid var(--line);margin-top:4px;padding-top:10px}
.setmenu .uprow{border-top:1px solid var(--line);border-radius:0 0 8px 8px;margin-top:4px;color:var(--sub)}
.setmenu .uprow:hover{color:var(--text)}
.setmenu .uprow.spin svg{animation:artspin .6s ease}

/* ===== 아래쪽 전체 메뉴(사이트 지도) ===== */
.fmap{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:18px;max-width:980px;margin:6px auto 22px;text-align:left}
.fmap div{display:flex;flex-direction:column;gap:6px}
.fmap b{font-size:.88rem;color:var(--text)}
.fmap a{font-size:.84rem;color:var(--sub);text-decoration:none}
.fmap a:hover{color:var(--neon)}
@media (max-width:700px){.fmap{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 12px;padding:0 4px}}

/* 모바일: 설정·로그인은 로고 줄 오른쪽으로, 메뉴 줄에는 링크 4개만 */
@media(max-width:700px){
  .nav > details.umenu:not(.langmenu) summary.me span{display:none}
  .nav{flex-wrap:nowrap;justify-content:space-between}
  .nav > .setmenu,.nav > .loginbtn,.nav > details.umenu:not(.langmenu){position:absolute;top:10px}
  .nav > .setmenu{right:var(--setr, 88px)}
  .nav > .loginbtn,.nav > details.umenu:not(.langmenu){right:14px}
  .nav > .setmenu summary.me span{display:none}
  .nav > .setmenu .upop{right:-74px}
}

/* ===== 내 PC 사양 설정 (자동완성·메모리 버튼·성능 미리 보기) ===== */
.pcset{max-width:640px}
.pcset-head{display:flex;gap:14px;align-items:flex-start;margin:4px 0 6px}
.pcset-head svg{flex:none;margin-top:6px}
.pcset-head h1{margin:2px 0 4px}
.pcset-head .pcset-sub{margin:0}
.pcset-done{display:flex;flex-direction:column;gap:6px;margin:16px 0 0;padding:14px 16px;border-radius:14px;border:1px solid rgba(61,220,151,.4);background:rgba(61,220,151,.08)}
.pcset-done b{display:flex;align-items:center;gap:6px;color:var(--green)}
.pcset-done span{color:var(--text);font-size:.92rem}
.pcset-go{align-self:flex-start;margin-top:2px;padding:7px 14px;border-radius:999px;background:linear-gradient(135deg,var(--neon),var(--accent));color:#1a1405!important;font-weight:800;font-size:.88rem;text-decoration:none}
.pcset-form{gap:20px;padding:20px}
.pcf{display:flex;flex-direction:column;gap:8px}
.pcset-form .pcf-lab{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:8px;font-weight:700;font-size:.95rem}
.pcf-box{position:relative}
.pcf-box input{width:100%;box-sizing:border-box;padding:12px 40px 12px 14px;font-size:1rem;border-radius:12px;border:1px solid var(--line);background:var(--bg2);color:var(--text);transition:border-color .15s,box-shadow .15s}
.pcf-box input:focus{outline:0;border-color:var(--accent);box-shadow:0 0 0 3px rgba(255,187,31,.18)}
.pcf-box.good input{border-color:rgba(61,220,151,.55)}
.pcf-box.bad input{border-color:rgba(255,93,115,.6)}
.pcf-ok{position:absolute;right:12px;top:50%;transform:translateY(-50%);color:var(--green);display:none}
.pcf-box.good .pcf-ok{display:flex}
.pcf-list{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:9;list-style:none;margin:0;padding:6px;max-height:300px;overflow:auto;background:var(--panel2);border:1px solid var(--line);border-radius:12px;box-shadow:0 16px 40px rgba(0,0,0,.55)}
.pcf-list li{display:grid;grid-template-columns:1fr 90px;align-items:center;gap:10px;padding:9px 10px;border-radius:8px;cursor:pointer;font-size:.93rem}
.pcf-list li i{height:5px;border-radius:3px;justify-self:start}
.pcf-list li:hover,.pcf-list li.on{background:rgba(255,187,31,.12)}
.pcf-hint{min-height:0;font-size:.8rem;color:#ff8ea2}
.pcf-hint:empty{display:none}
.pcf-hint.auto{color:var(--green)}
.pcf-quick{display:flex;flex-wrap:wrap;gap:6px}
.pcf-quick button{padding:5px 10px;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--sub);font-size:.8rem;cursor:pointer}
.pcf-quick button:hover{border-color:rgba(255,187,31,.6);color:var(--text)}
.pcf-ram{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:6px}
.pcf-ram label{position:relative}
.pcf-ram input{position:absolute;opacity:0;pointer-events:none}
.pcf-ram span{display:flex;align-items:baseline;justify-content:center;gap:1px;padding:10px 0;border-radius:10px;border:1px solid var(--line);background:var(--bg2);font-weight:700;cursor:pointer;transition:border-color .15s,background .15s}
.pcf-ram small{font-size:.68rem;font-weight:600;color:var(--sub)}
.pcf-ram input:checked + span{border-color:var(--accent);background:rgba(255,187,31,.14);color:#ffd166}
.pcf-ram input:focus-visible + span{box-shadow:0 0 0 3px rgba(255,187,31,.25)}
.pcsum{display:flex;flex-direction:column;gap:8px;padding:14px;border-radius:12px;background:var(--bg2);border:1px dashed var(--line)}
.pcsum[hidden]{display:none}
.pcsum-t{font-size:.8rem;font-weight:700;color:var(--sub)}
.pcsum-row{display:grid;grid-template-columns:76px 1fr 112px;align-items:center;gap:10px;font-size:.86rem}
.pcsum-bar{display:block;height:8px;border-radius:4px;background:rgba(255,255,255,.06);overflow:hidden}
.pcsum-bar b{display:block;height:100%;width:0;border-radius:4px;transition:width .3s}
.pcsum-row em{font-style:normal;font-weight:700;font-size:.82rem;text-align:right}
.pt0{background:#ff8a5c}.pt1{background:#ffd166}.pt2{background:#3ddc97}.pt3{background:linear-gradient(90deg,#3ddc97,#38e1ff)}
.pcset-save{padding:12px 22px;font-size:.98rem}
.pcset-save:disabled{opacity:.45;cursor:not-allowed}
.pcset-how{margin:4px 0 10px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--panel)}
.pcset-how summary{cursor:pointer;font-weight:700;font-size:.9rem}
.pcset-how ol{margin:10px 0 0;padding-left:20px;color:var(--sub);font-size:.88rem;line-height:1.8}
.pcset-how b{color:var(--text)}
@media (max-width:700px){
  .pcset-head svg{width:36px;height:36px}
  .pcset-form{padding:16px}
  .pcf-ram{grid-template-columns:repeat(4,minmax(0,1fr))}
  .pcsum-row{grid-template-columns:64px 1fr 96px;gap:8px}
  .pcf-list li{grid-template-columns:1fr 60px}
}

/* 상단 검색: 메뉴와 한 줄일 때 버튼 글자가 꺾이지 않게 */
.search button{white-space:nowrap;flex:none}
.search input{min-width:0}

/* ===== 스팀 세일 일정 페이지 ===== */
a.sb-main{color:inherit;text-decoration:none}
a.sb-main:hover .sb-label{text-decoration:underline}
.salesched table{width:100%;border-collapse:collapse;background:var(--panel);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.salesched th,.salesched td{padding:11px 14px;text-align:left;border-bottom:1px solid var(--line);font-size:.92rem}
.salesched th{color:var(--sub);font-weight:600;font-size:.82rem}
.salesched tr:last-child td{border-bottom:0}
.salesched tr.on td{background:rgba(255,187,31,.08)}
.ss-now{display:inline-block;margin-left:6px;padding:1px 7px;border-radius:6px;font-size:.72rem;font-weight:700;background:#ffbb1f;color:#1a1405}
@media (max-width:700px){.salesched th,.salesched td{padding:9px 8px;font-size:.82rem}}

.detail h1 .koname{display:block;margin-top:2px;font-size:.6em;font-weight:600;color:var(--sub)}

/* 세일 시작 알림: 카카오톡 한 번에 받기 (주 버튼) + 디스코드 (보조) */
.salebar .sb-kakao{background:#fee500!important;border-color:#fee500;color:#191600!important}
.salebar .sb-kakao:hover{background:#ffeb3b!important}
.salebar .sb-alt{background:transparent!important;border-color:var(--line);color:var(--sub)!important;font-weight:600}
.salebar .sb-kakao + .sb-sub{margin-left:6px}
.salebar a.sb-kakao{text-decoration:none}
/* 상황별 추천: 추천 이유 한 줄, 할인 중만 보기 */
.mpfilter{margin:0 0 14px}
.card .pnote{margin:6px 0 2px;color:var(--sub);font-size:.82rem;line-height:1.45;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;min-height:3.6em}

/* ===== 사이트 기본 테마: 짙은 차콜 + 진한 노랑 포인트 =====
   예전 남색 테마 위에 덮어써요. body.theme-charcoal(기본값)일 때만 적용돼요. */
body.theme-charcoal{--accent:#ffbb1f;--accent2:#ff9f1f;--neon:#ffd166;--point:#ffbb1f;--on-accent:#1a1405}

/* 남색 패널의 파란 윗선·그림자 */
body.theme-charcoal .card,body.theme-charcoal .collcard,body.theme-charcoal .alertbox,body.theme-charcoal .mstat,body.theme-charcoal .livebox,
body.theme-charcoal .stats div,body.theme-charcoal .rank a,body.theme-charcoal .chartbox,body.theme-charcoal .mediabox,body.theme-charcoal .about,
body.theme-charcoal .collsum,body.theme-charcoal .fpop,body.theme-charcoal .upop,body.theme-charcoal .rc{
  border-top-color:var(--line);box-shadow:0 1px 0 rgba(255,255,255,.03) inset,0 10px 24px rgba(0,0,0,.35)}

/* 노랑 바탕 버튼은 글씨를 어둡게 */
body.theme-charcoal .btn,body.theme-charcoal .tabs a.on,body.theme-charcoal .nav a.loginbtn,body.theme-charcoal .rbadge,
body.theme-charcoal .budgetform .apply,body.theme-charcoal .rtabs button.on,body.theme-charcoal .segm a.on,body.theme-charcoal .qform button,
body.theme-charcoal .numfield .stp:hover,body.theme-charcoal .fmore summary em,body.theme-charcoal .search button{
  color:var(--on-accent);box-shadow:0 6px 18px rgba(255,170,0,.18)}
body.theme-charcoal .btn svg,body.theme-charcoal .nav a.loginbtn svg{color:var(--on-accent)}

/* 켜진 칩·알약·탭: 노랑 테두리 + 옅은 노랑 */
body.theme-charcoal .pill.on,body.theme-charcoal .chip input:checked + span,body.theme-charcoal .tchip input:checked + span,body.theme-charcoal .pchip.on{
  background:rgba(255,187,31,.14);border-color:rgba(255,187,31,.7);color:#ffd166;box-shadow:none}
body.theme-charcoal .salebar{border-color:rgba(255,187,31,.4);background:linear-gradient(90deg,rgba(255,187,31,.12),rgba(255,138,31,.06))}
body.theme-charcoal .sb-btn,body.theme-charcoal .amore{background:rgba(255,187,31,.12);color:#ffe2a0}
body.theme-charcoal .sb-btn:hover,body.theme-charcoal .amore:hover{background:rgba(255,187,31,.24)}
body.theme-charcoal .vbtn .vbar{background:rgba(255,187,31,.2)}
body.theme-charcoal .lc.au{color:#ffe2a0;border-color:rgba(255,187,31,.5);background:rgba(255,187,31,.1)}
body.theme-charcoal .mnav:hover{background:rgba(255,187,31,.7);color:var(--on-accent)}
body.theme-charcoal .qopt:hover,body.theme-charcoal .qopt:focus-visible{background:rgba(255,187,31,.1)}
body.theme-charcoal .faqbox .fq{background:rgba(255,187,31,.14);color:#ffd166}
body.theme-charcoal .tag.deck{background:rgba(255,255,255,.06);color:#d9dbe1;border-color:rgba(255,255,255,.16)}

/* 입력칸 포커스 */
body.theme-charcoal .search input:focus,body.theme-charcoal .aform input:focus,body.theme-charcoal .qform input:focus,body.theme-charcoal .addbox input:focus,
body.theme-charcoal .numfield:focus-within,body.theme-charcoal .af-input:focus-within,body.theme-charcoal .alert2 input[type=text]:focus{box-shadow:0 0 0 3px rgba(255,187,31,.2)}

/* 큰 숫자·제목 그라데이션 */
body.theme-charcoal .mi-val,body.theme-charcoal .loginside h1 em,body.theme-charcoal .qresult h1{background:linear-gradient(135deg,#ffd166,#ff9f1f);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
body.theme-charcoal .funbtn.go{background:linear-gradient(180deg,#ffe08a,#ffbb1f 60%,#e08a00);color:var(--on-accent)}
body.theme-charcoal .loginside{background:radial-gradient(520px 340px at 0% 0%,rgba(255,187,31,.16),transparent 70%),linear-gradient(180deg,#1b1f26,#121419)}

/* 가격 달력: 정가(회색) -> 할인 클수록 진한 노랑·주황 */
body.theme-charcoal .calsvg .c0,body.theme-charcoal .calsw.c0{fill:#262a33;background:#262a33}
body.theme-charcoal .calsvg .c1,body.theme-charcoal .calsw.c1{fill:#5a4a1c;background:#5a4a1c}
body.theme-charcoal .calsvg .c2,body.theme-charcoal .calsw.c2{fill:#9a7414;background:#9a7414}
body.theme-charcoal .calsvg .c3,body.theme-charcoal .calsw.c3{fill:#e0a010;background:#e0a010}
body.theme-charcoal .calsvg .c4,body.theme-charcoal .calsw.c4{fill:#ffd166;background:#ffd166}

/* 구매 판단 카드의 '기다리기'는 파랑 대신 회색빛 노랑 */
body.theme-charcoal .buybox{--lv:#c9ccd3;--lv-bg:rgba(255,255,255,.06)}
body.theme-charcoal .buybox.lv-good{--lv:#3ddc97;--lv-bg:rgba(61,220,151,.12)}
body.theme-charcoal .buybox.lv-mid{--lv:#ffbb1f;--lv-bg:rgba(255,187,31,.12)}
body.theme-charcoal .buy-text{color:#c9ccd3}
body.theme-charcoal .bt{background:rgba(0,0,0,.25);border-color:var(--line)}
body.theme-charcoal .faqbox .faq details p{color:#b4b8c2}
body.theme-charcoal .search button:hover,body.theme-charcoal .btn:hover{box-shadow:0 8px 24px rgba(255,170,0,.3)}

/* 카드 위 작은 태그, 로그인 상자, 룰렛 돌리기 버튼 */
body.theme-charcoal .tag{background:#22262e}
body.theme-charcoal .loginwrap{border-color:var(--line);background:var(--panel);box-shadow:0 1px 0 rgba(255,255,255,.04) inset,0 30px 80px rgba(0,0,0,.6)}
body.theme-charcoal .funbtn{color:var(--on-accent);border-color:rgba(255,220,140,.6);background:linear-gradient(180deg,#ffd166,#ffaa1f);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 0 0 3px rgba(255,187,31,.14),0 10px 26px rgba(255,150,0,.3)}
body.theme-charcoal .funbtn:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 0 0 4px rgba(255,187,31,.2),0 14px 32px rgba(255,150,0,.4)}
body.theme-charcoal .funbtn svg{color:var(--on-accent)}
body.theme-charcoal .quip,body.theme-charcoal .mi-mood.low{color:#b4b8c2}

/* 카드 뱃지 색: 한국어 파랑, 기록 최저가 노랑 + 빨간 불꽃, 덱은 차분한 회색 */
body.theme-charcoal .tag.ko{background:rgba(79,140,255,.14);color:#8fb8ff;border-color:rgba(79,140,255,.45)}
body.theme-charcoal .tag.low{background:rgba(255,187,31,.12);color:#ffbb1f;border-color:rgba(255,187,31,.45)}
body.theme-charcoal .tag.low svg{color:#ff4d3d}

/* 카드에 마우스를 올리면 날카로운 빛 반사가 한 번 빠르게 지나가요 */
.card{position:relative}
.card::after{content:"";position:absolute;top:-10%;left:-60%;width:38%;height:120%;pointer-events:none;z-index:2;opacity:0;
  background:linear-gradient(100deg,rgba(255,255,255,0) 0%,rgba(255,255,255,0) 38%,rgba(255,255,255,.08) 44%,rgba(255,255,255,.5) 49.5%,rgba(255,255,255,.08) 55%,rgba(255,255,255,0) 62%,rgba(255,255,255,0) 100%);
  transform:skewX(-18deg);mix-blend-mode:screen}
.card:hover::after{animation:cardshine .5s cubic-bezier(.3,.7,.4,1) both}
@keyframes cardshine{0%{left:-60%;opacity:1}100%{left:130%;opacity:1}}
@media (prefers-reduced-motion:reduce){.card:hover::after{animation:none}}