/*
Theme Name: 겜벤 (geekvenues)
Description: geekvenues.com 게임 정보 사이트 전용 클래식 테마. 외부 JS 0, 웹폰트 0, 시스템 폰트. 색은 --c1/--c2만 hex, 파생색은 color-mix().
Version: 1.0.0
Author: 겜벤 운영팀
Text Domain: geekvenues
*/

:root {
  --c1: #1f3a5f;             /* 기본색(남색) */
  --c2: #ff7a1a;             /* 강조색(주황) */
  --ink: color-mix(in srgb, var(--c1) 85%, black);
  --muted: color-mix(in srgb, var(--c1) 55%, white);
  --line: color-mix(in srgb, var(--c1) 14%, white);
  --bg: #fff;
  --bg2: color-mix(in srgb, var(--c1) 5%, white);
  --link: color-mix(in srgb, var(--c1) 80%, var(--c2));
  --ok: color-mix(in srgb, #2e7d32 85%, var(--c1));
  --warn: color-mix(in srgb, var(--c2) 70%, black);
  --maxw: 960px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.6 -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", "Segoe UI", Roboto, sans-serif; word-break: keep-all; overflow-wrap: anywhere; }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; height: auto; }
h1 { font-size: 1.5rem; line-height: 1.3; margin: .4em 0 .5em; }
h1 small { font-size: .75em; font-weight: 500; color: var(--muted); }
h2 { font-size: 1.15rem; margin: 1.6em 0 .5em; padding-bottom: .3em; border-bottom: 2px solid var(--line); }
h2 .gv-meta { font-size: .8rem; font-weight: 400; margin-left: .5em; }
h3 { font-size: 1rem; margin: 1.2em 0 .4em; }
code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.gv-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.gv-wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 16px; }

/* 헤더 */
.gv-header { background: var(--c1); color: #fff; }
.gv-header-in { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "logo search" "nav nav"; gap: 8px 12px; align-items: center; padding-top: 10px; padding-bottom: 10px; }
.gv-logo { grid-area: logo; color: #fff; font-weight: 800; font-size: 1.35rem; letter-spacing: -.02em; }
.gv-logo span { color: var(--c2); }
.gv-nav { grid-area: nav; display: flex; gap: 4px 14px; overflow-x: auto; white-space: nowrap; font-size: .9rem; -webkit-overflow-scrolling: touch; }
.gv-nav a { color: color-mix(in srgb, white 88%, var(--c1)); padding: 2px 0; }
.gv-search { grid-area: search; display: flex; gap: 6px; justify-self: end; width: 100%; max-width: 360px; }
.gv-search input { flex: 1; min-width: 0; padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px; font: inherit; font-size: .95rem; }
.gv-search button { padding: 8px 12px; border: 0; border-radius: 6px; background: var(--c2); color: #fff; font: inherit; font-weight: 700; cursor: pointer; }
.gv-search-big { max-width: 560px; margin: 12px 0 0; justify-self: start; }
.gv-search-big input { padding: 12px 14px; font-size: 1rem; }
@media (min-width: 720px) { .gv-header-in { grid-template-columns: auto 1fr auto; grid-template-areas: "logo nav search"; } .gv-nav { overflow: visible; } }

/* 본문 공통 */
.gv-main { min-height: 60vh; padding: 8px 0 40px; }
.gv-hero { padding-top: 24px; padding-bottom: 8px; }
.gv-lead { color: var(--muted); margin: 0 0 1em; }
.gv-meta { color: var(--muted); font-size: .85rem; }
.gv-sec { margin: 0 0 8px; }
.gv-card { background: var(--bg2); border-radius: 10px; padding: 4px 16px 12px; }
.gv-card h2 { margin-top: .8em; }
.gv-grid2 { display: grid; gap: 16px; }
@media (min-width: 720px) { .gv-grid2 { grid-template-columns: 1fr 1fr; } }
.gv-crumb { font-size: .85rem; color: var(--muted); margin: 10px 0 4px; }
.gv-sep { margin: 0 6px; }
.gv-more { font-weight: 600; }
.gv-more::after { content: " ›"; }
.gv-empty { background: var(--bg2); border-left: 4px solid var(--c2); padding: 10px 12px; border-radius: 0 6px 6px 0; }
.gv-notice-box { background: var(--bg2); border: 1px dashed var(--line); padding: 8px 12px; border-radius: 6px; font-size: .9rem; color: var(--muted); margin-top: 10px; }
.gv-tag { display: inline-block; font-size: .75rem; padding: 1px 6px; border-radius: 4px; background: var(--c2); color: #fff; vertical-align: middle; }
.gv-checked { display: inline-block; font-size: .75rem; font-weight: 500; color: var(--ok); background: color-mix(in srgb, var(--ok) 10%, white); padding: 1px 7px; border-radius: 10px; vertical-align: middle; }
.gv-list { padding-left: 1.2em; margin: .3em 0; }
.gv-list li { margin: .25em 0; }
.gv-steps li { margin: .4em 0; }
.gv-chips { list-style: none; padding: 0; margin: .3em 0; display: flex; flex-wrap: wrap; gap: 8px; }
.gv-chips a { display: inline-block; padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg); font-size: .92rem; }
.gv-chips small { color: var(--muted); margin-left: 4px; }
.gv-rank { padding-left: 1.6em; margin: .3em 0; columns: 1; }
.gv-rank li { margin: .2em 0; }
.gv-rank small { color: var(--muted); margin-left: 4px; font-size: .8rem; }
@media (min-width: 720px) { .gv-rank { columns: 2; column-gap: 24px; } }
.gv-up .gv-date { display: inline-block; min-width: 6.2em; font-variant-numeric: tabular-nums; color: var(--muted); }
.gv-notices { list-style: none; padding: 0; margin: .3em 0; }
.gv-notices li { padding: 6px 0; border-bottom: 1px solid var(--line); }
.gv-src { margin-top: 28px; padding-top: 10px; border-top: 1px solid var(--line); font-size: .82rem; color: var(--muted); }

/* 허브 배너(PC 게임: 스팀 header) — aspect-ratio 로 자리를 예약해 CLS 0 */
.gv-banner { margin: 10px 0 0; }
.gv-banner-img { width: 100%; aspect-ratio: 460 / 215; object-fit: cover; border-radius: 12px; background: var(--bg2); }

/* 허브 헤드 */
.gv-hub-head { display: flex; gap: 14px; align-items: flex-start; margin-top: 8px; }
.gv-icon { width: 72px; height: 72px; border-radius: 16px; flex: 0 0 72px; background: var(--bg2); }
.gv-sub { margin: 0; color: var(--muted); font-size: .92rem; }

/* 바로가기 버튼 묶음(§5-2) */
.gv-btns { display: flex; flex-wrap: wrap; gap: 8px; margin: .4em 0; }
.gv-btn { display: inline-block; padding: 10px 14px; border-radius: 8px; background: var(--c1); color: #fff; font-weight: 700; font-size: .92rem; line-height: 1.2; }
.gv-btn:hover { text-decoration: none; background: color-mix(in srgb, var(--c1) 85%, black); }
.gv-btn-coupon { background: var(--c2); }
.gv-btn-googleplay, .gv-btn-appstore, .gv-btn-steam { background: color-mix(in srgb, var(--c1) 70%, white); color: var(--ink); }
.gv-btn-support, .gv-btn-cafe, .gv-btn-forum { background: var(--bg2); color: var(--ink); border: 1px solid var(--line); }
@media (max-width: 480px) { .gv-btns { display: grid; grid-template-columns: 1fr 1fr; } .gv-btn { text-align: center; } }

/* 표 — 기본 overflow visible, 375px에서 4열↑ 표는 카드형 */
table { border-collapse: collapse; width: 100%; margin: .4em 0; font-size: .95rem; }
th, td { padding: 8px 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
thead th { background: var(--bg2); font-weight: 700; position: sticky; top: 0; }
.gv-kv th { width: 7.5em; color: var(--muted); font-weight: 600; white-space: nowrap; }
.gv-spec th { width: 6.5em; color: var(--muted); font-weight: 600; }
.gv-spec td { font-size: .9rem; }
.is-scrollable { overflow-x: auto; }
@media (max-width: 480px) {
  .gv-tbl thead { display: none; }
  .gv-tbl tr { display: block; border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; margin: 8px 0; }
  .gv-tbl td { display: flex; gap: 10px; border: 0; padding: 4px 0; }
  .gv-tbl td::before { content: attr(data-l); flex: 0 0 4.5em; color: var(--muted); font-size: .85rem; }
  .gv-spec thead { display: none; }
  .gv-spec tr { display: block; border-bottom: 1px solid var(--line); padding: 6px 0; }
  .gv-spec th { display: block; width: auto; padding: 2px 0; }
  .gv-spec td { display: flex; gap: 8px; border: 0; padding: 2px 0; }
  .gv-spec td::before { content: attr(data-l); flex: 0 0 3em; color: var(--muted); font-size: .85rem; }
}

/* 쿠폰 */
.gv-codes { list-style: none; padding: 0; margin: .3em 0; }
.gv-codes li { padding: 8px 0; border-bottom: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.gv-code { font-size: 1.05rem; font-weight: 700; letter-spacing: .04em; background: var(--bg2); padding: 3px 8px; border-radius: 6px; user-select: all; }
.gv-code-x { text-decoration: line-through; color: var(--muted); font-weight: 500; }
.gv-copy { border: 1px solid var(--line); background: var(--bg); border-radius: 6px; padding: 4px 10px; font: inherit; font-size: .85rem; cursor: pointer; }
.gv-copy:hover { border-color: var(--c2); color: var(--warn); }
.gv-codes .gv-meta { flex-basis: 100%; }

/* 사양 대조 */
.gv-chk-form { display: grid; gap: 10px; margin: .5em 0; }
.gv-chk-form label { display: grid; gap: 4px; font-size: .9rem; color: var(--muted); }
.gv-chk-form input { padding: 9px 10px; border: 1px solid var(--line); border-radius: 6px; font: inherit; }
.gv-chk-form button { justify-self: start; padding: 9px 18px; border: 0; border-radius: 6px; background: var(--c2); color: #fff; font: inherit; font-weight: 700; cursor: pointer; }
.gv-chk-out { min-height: 2.4em; margin-top: 8px; }
.gv-chk-out strong { display: block; font-size: 1.1rem; }
.gv-chk-out ul { margin: .3em 0; padding-left: 1.2em; }
@media (min-width: 600px) { .gv-chk-form { grid-template-columns: 1fr 1fr 120px; align-items: end; } .gv-chk-form button { grid-column: 1 / -1; } }
.gv-extra summary { cursor: pointer; color: var(--muted); font-size: .9rem; }

/* 오류 해결 */
.gv-ts { padding: 10px 0; border-bottom: 1px solid var(--line); }
.gv-ts h2 { border: 0; margin: .4em 0 .2em; font-size: 1.05rem; }

/* 글 본문 */
.gv-article .gv-content { font-size: 1.02rem; }
.gv-content h2 { margin-top: 1.8em; }
.gv-content p { margin: .8em 0; }
.gv-content ul, .gv-content ol { padding-left: 1.4em; }
.gv-content table { font-size: .92rem; }
.gv-content img { border-radius: 8px; }
.gv-thumb { margin: 0 0 1em; }
.gv-thumb img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 10px; }
.gv-cards { list-style: none; padding: 0; margin: .5em 0; display: grid; gap: 10px; }
.gv-cardi a { display: block; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; }
.gv-cardi strong { display: block; }
.gv-cardi span { display: block; color: var(--muted); font-size: .88rem; margin-top: 2px; }
.gv-monthnav { display: flex; justify-content: space-between; margin: .5em 0; font-weight: 600; }
.pagination, .nav-links { display: flex; gap: 8px; justify-content: center; margin: 20px 0; }
.nav-links .page-numbers { padding: 6px 12px; border: 1px solid var(--line); border-radius: 6px; }
.nav-links .current { background: var(--c1); color: #fff; border-color: var(--c1); }

/* 광고 자리(PHASE 6, ADSENSE.md §3-3) — 예약 높이는 실측 후 확정 */
.ad-slot { margin: 28px 0; text-align: center; overflow: hidden; }
.ad-slot.ad-display, .ad-slot.ad-inarticle { min-height: 280px; }
.ad-slot.ad-infeed { min-height: 200px; }
.ad-slot.ad-multiplex { min-height: 600px; }
@media (min-width: 768px) { .ad-slot.ad-display, .ad-slot.ad-inarticle { min-height: 250px; } .ad-slot.ad-multiplex { min-height: 400px; } }

/* 푸터 */
.gv-footer { background: var(--bg2); border-top: 1px solid var(--line); padding: 20px 0 28px; font-size: .85rem; color: var(--muted); }
.gv-foot-nav { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 8px 0; }
.gv-copy { margin: 6px 0 0; }