/* PopPlay 포털 공통 스타일 — 모든 페이지가 이 파일 하나를 참조한다 */
:root {
  --bg:#0a0a14; --panel:#14141f; --panel2:#1b1b2b; --line:rgba(255,255,255,.08);
  --ink:#e8e6f0; --dim:#8f8ca8; --amber:#ffb020; --cyan:#45d6ff; --green:#5fd776;
  --pink:#ff4d6d;
  --pixel:'Galmuri11', monospace;
}
* { box-sizing:border-box; margin:0; }
body {
  background:var(--bg); color:var(--ink); line-height:1.75;
  font-family:'Apple SD Gothic Neo','Malgun Gothic',system-ui,sans-serif;
  -webkit-text-size-adjust:100%;
}
.wrap { max-width:860px; margin:0 auto; padding:0 20px; }
.spr { image-rendering:pixelated; vertical-align:middle; }
a { color:var(--amber); }

/* ── 상단 내비게이션 ── */
.nav {
  position:sticky; top:0; z-index:20;
  background:rgba(10,10,20,.94); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.nav .wrap { display:flex; align-items:center; gap:6px; height:54px; flex-wrap:wrap; }
.nav .brand {
  font-family:var(--pixel); font-size:15px; color:var(--amber);
  text-decoration:none; margin-right:8px; white-space:nowrap;
}
.nav a.item {
  color:var(--dim); text-decoration:none; font-size:14px;
  padding:5px 9px; border-radius:6px; white-space:nowrap;
}
.nav a.item:hover { color:var(--ink); background:var(--panel); }
.nav a.item.on { color:var(--amber); background:var(--panel); }
.nav .grow { flex:1 }
.nav .play {
  background:var(--amber); color:#1a1206; font-family:var(--pixel); font-size:13px;
  padding:7px 14px; border-radius:6px; text-decoration:none; white-space:nowrap;
}

/* ── 페이지 헤더 ── */
.phead { padding:44px 0 26px; border-bottom:1px solid var(--line); }
.eyebrow { font-family:var(--pixel); font-size:12px; letter-spacing:4px; color:var(--cyan); }
h1 { font-family:var(--pixel); font-size:34px; color:var(--amber); margin:10px 0 8px; line-height:1.35; }
.phead .tag { color:var(--dim); font-size:16px; }
.updated { color:var(--dim); font-size:13px; margin-top:10px; }

/* ── 본문 ── */
section { padding:38px 0; border-bottom:1px solid var(--line); }
h2 { font-family:var(--pixel); font-size:20px; color:var(--amber); margin-bottom:14px; line-height:1.5; }
h3 { font-size:17px; color:var(--cyan); margin:26px 0 8px; }
p { margin-bottom:14px; }
p.sub, .sub { color:var(--dim); font-size:15px; }
ul, ol { padding-left:22px; margin-bottom:14px; }
li { margin:7px 0; }
b, strong { color:#fff; }
code {
  font-family:var(--pixel); font-size:13px; background:var(--panel2);
  padding:2px 6px; border-radius:4px; color:var(--green);
}

/* ── 표 ── */
.tw { overflow-x:auto; margin:16px 0; -webkit-overflow-scrolling:touch; }
table { border-collapse:collapse; width:100%; min-width:460px; font-size:14px; }
th, td { border:1px solid var(--line); padding:9px 11px; text-align:left; }
th { background:var(--panel2); font-family:var(--pixel); font-size:13px; color:var(--ink); }
td.num, th.num { text-align:right; font-variant-numeric:tabular-nums; }
tbody tr:nth-child(odd) { background:rgba(255,255,255,.02); }

/* ── 카드 / 박스 ── */
.cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:14px; margin-top:18px; }
.card { background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:18px 16px; }
.card b { display:block; font-family:var(--pixel); font-size:14px; margin-bottom:6px; color:var(--ink); }
.card span { font-size:14px; color:var(--dim); }
.note {
  background:var(--panel); border-left:3px solid var(--cyan);
  border-radius:0 8px 8px 0; padding:14px 16px; margin:18px 0; font-size:15px;
}
.note b { color:var(--cyan); }
.warn { border-left-color:var(--pink); }
.warn b { color:var(--pink); }

/* ── 등급 색 ── */
.r0{color:#9aa0aa}.r1{color:#63c7ff}.r2{color:#5fd776}.r3{color:#c58bff}.r4{color:#ff9f43}
.r5{color:#ff6b6b}.r6{color:#ffd93d}.r7{color:#4dffdf}.r8{color:#ff7ce5}.r9{color:#ffb020}.r10{color:#fff}

/* ── 인게임 스크린샷 ── */
.shot { margin:22px auto; max-width:300px; text-align:center; }
.shot img {
  width:100%; height:auto; display:block; image-rendering:auto;
  border:1px solid var(--line); border-radius:10px; box-shadow:0 10px 30px rgba(0,0,0,.5);
}
.shot figcaption { margin-top:9px; font-size:13px; color:var(--dim); line-height:1.6; }

/* ── 다음 글 내비 ── */
.pager { display:flex; gap:12px; flex-wrap:wrap; margin-top:22px; }
.pager a {
  flex:1; min-width:200px; background:var(--panel); border:1px solid var(--line);
  border-radius:10px; padding:14px 16px; text-decoration:none; color:var(--ink);
}
.pager a .k { display:block; font-size:12px; color:var(--dim); margin-bottom:4px; }
.pager a .t { font-family:var(--pixel); font-size:14px; color:var(--amber); }

/* ── 푸터 ── */
footer { padding:34px 0 56px; color:var(--dim); font-size:14px; }
footer .fnav { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px; }
footer .fnav a { color:var(--dim); text-decoration:none; }
footer .fnav a:hover { color:var(--amber); }
footer .cr { font-size:13px; line-height:1.8; }

@media (max-width:600px) {
  h1 { font-size:26px; }
  .nav .wrap { height:auto; padding-top:8px; padding-bottom:8px; }
  .nav a.item { font-size:13px; padding:4px 7px; }
}