/* game.ayo.pe.kr — 게임 이용등급 독자 스킨 (2026-09-27, 사이트 고유 디자인 규칙).
 *
 * 콘셉트: **게임 패키지 뒷면 등급 라벨 × 어두운 게임 스토어**. 이 사이트가 답하는 것은 "몇 세 이용가인가" 이고,
 * 사람들이 그 답을 처음 보는 곳은 패키지 뒷면·스토어 상세의 등급 표지다. 화면을 그 말투로 짠다.
 * site.css(디자인 A) 위에 덮어쓰고 전부 body.site-game 아래로 가둔다 — 다른 사이트에 새지 않는다.
 * 마크업 변형은 place/detail.html 의 `siteKey == 'game'` 조건 블록(등급 표지·이용등급/플랫폼/연도 행)과
 * 공용 관련 목록(section.related)뿐이다.
 *
 *   헤더   : 먹색 스토어 바 + 픽셀 로고 라벨(PRESS START) + 네온 밑줄
 *   탭     : 게임패드 버튼처럼 둥근 캡슐, 선택 시 네온 채움
 *   표지   : 상세 제목 아래 등급 라벨 — ALL(초록) · 12(파랑) · 15(주황) · 18(빨강), 공식 표지 색 계열
 *   요약표 : 패키지 뒷면 사양표(칸마다 모서리 픽셀 · 모노 라벨)
 *   질답   : 퀘스트 로그 — 항목마다 QUEST 01 번호(CSS counter), 왼쪽 체력바 선
 *   목록   : 카트리지 슬롯 — 왼쪽 라벨 홈 + 장르 칩
 *   허브   : 스테이지 선택 타일(건수는 점수판 글꼴)
 *   글꼴   : 제목 Bagel Fat One · 본문 Noto Sans KR · 라벨/숫자 Press Start 2P
 *
 * ⚠️ 광고 유닛(<ins>·.ad-top·.ad-row 안쪽)에는 배경·테두리·라벨을 씌우지 않는다(site.css 애드센스 절).
 * ⚠️ 질문(h2)과 답(p) 사이에 요소를 끼우지 않는다 — 장식은 ::before/::after 로만.
 */

body.site-game {
  --fg: #eef1f8;
  --fg-soft: #c4cadb;
  --muted: #8d94a8;
  --line: #2c3142;
  --line-soft: #232735;
  --bg: #151822;
  --bg-soft: #1c2030;
  --accent: #7cf29c;          /* 네온 초록(시작 버튼) */
  --accent-strong: #52d97a;
  --accent-soft: rgba(124, 242, 156, .12);
  --accent-wash: #1a2230;
  --accent-line: #2f4a3c;
  --cyan: #5ad7ff;
  --pink: #ff5c9a;
  --r-all: #2fae4e;
  --r-12: #2479d6;
  --r-15: #f2a20c;
  --r-18: #de2c35;
  --pixel: "Press Start 2P", ui-monospace, monospace;
  --display: "Bagel Fat One", "Noto Sans KR", sans-serif;
  --radius: 14px;
  --wrap: 880px;
  background: #0d0f16;
  background-image:
    radial-gradient(circle at 12% -10%, rgba(90, 215, 255, .10), transparent 42%),
    radial-gradient(circle at 100% 0%, rgba(255, 92, 154, .08), transparent 38%);
  background-attachment: fixed;
  color: var(--fg);
  font-family: "Noto Sans KR", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
}
body.site-game a { color: var(--cyan); }
body.site-game a:hover { color: var(--accent); }

body.site-game main,
body.site-game .site-foot,
body.site-game .ad-top,
body.site-game .top-search { max-width: var(--wrap); }

/* ── 헤더: 스토어 바 ─────────────────────────────────────────────────── */
body.site-game .site-head {
  position: relative;
  max-width: none;
  margin: 0;
  padding: 20px max(20px, calc((100% - var(--wrap)) / 2 + 20px)) 16px;
  background: linear-gradient(180deg, #171b27, #11141d);
  border-bottom: 1px solid #262b3b;
  box-shadow: 0 1px 0 rgba(124, 242, 156, .35), 0 8px 24px rgba(0, 0, 0, .35);
}
body.site-game .brand {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-right: auto;
  font-family: var(--display);
  font-size: 26px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.1;
}
body.site-game .brand::before {
  content: "▶ PRESS START";
  font-family: var(--pixel);
  font-size: 9px;
  letter-spacing: 1.5px;
  color: var(--accent);
  animation: gm-blink 1.6s steps(2, start) infinite;
}
@keyframes gm-blink { to { visibility: hidden; } }
@media (prefers-reduced-motion: reduce) { body.site-game .brand::before { animation: none; } }
body.site-game .brand a { color: #fff; }
body.site-game .brand a:hover { color: var(--accent); text-decoration: none; }

body.site-game .site-head nav { gap: 8px; }
body.site-game .site-head nav a {
  padding: 7px 16px;
  border: 1.5px solid #3a4054;
  border-radius: 999px;
  background: #1b1f2c;
  color: var(--fg-soft);
  font-size: 14px;
  font-weight: 700;
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .35);
}
body.site-game .site-head nav a.on,
body.site-game .site-head nav a:hover {
  border-color: var(--accent);
  background: var(--accent);
  color: #0d0f16;
  text-decoration: none;
}

/* 검색창: 스토어 검색 */
body.site-game .site-search input[type="search"] {
  border: 1.5px solid #394056;
  border-radius: 12px;
  background: #11141d;
  color: var(--fg);
}
body.site-game .site-search input[type="search"]::placeholder { color: var(--muted); }
body.site-game .site-search input[type="search"]:focus { outline: 2px solid rgba(90, 215, 255, .35); border-color: var(--cyan); }
body.site-game .site-search button {
  border-radius: 12px;
  background: var(--cyan);
  color: #0d0f16;
  font-weight: 800;
}
body.site-game .site-search button:hover { background: #8fe4ff; }

/* ── 경로·제목 ─────────────────────────────────────────────────────────── */
body.site-game .crumb { font-size: 12.5px; color: var(--muted); }
body.site-game .crumb a { color: var(--fg-soft); }
body.site-game .crumb a::after { content: " ▸"; color: #4a5168; }
body.site-game .crumb span { color: var(--accent); font-weight: 700; }

body.site-game h1 {
  font-family: var(--display);
  font-weight: 400;
  font-size: 32px;
  line-height: 1.2;
  letter-spacing: 0;
  color: #fff;
  text-shadow: 0 2px 0 rgba(0, 0, 0, .5);
}
body.site-game .lead,
body.site-game .data-date { color: var(--fg-soft); }

/* ── 등급 표지(상세) ───────────────────────────────────────────────────── */
body.site-game .gm-rating {
  display: inline-grid;
  grid-template-columns: 58px auto;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 12px;
  margin: -6px 0 16px;
  padding: 8px 16px 8px 8px;
  border: 2px solid var(--gm-c, var(--r-all));
  border-radius: 12px;
  background: #11141d;
  box-shadow: 4px 4px 0 var(--gm-c, var(--r-all));
}
body.site-game .gm-rating b {
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  width: 58px; height: 58px;
  border-radius: 10px;
  background: var(--gm-c, var(--r-all));
  color: #fff;
  font-family: var(--pixel);
  font-size: 16px;
  font-weight: 400;
  letter-spacing: -1px;
  box-shadow: inset 0 -5px 0 rgba(0, 0, 0, .25);
}
body.site-game .gm-rating span { font-size: 16px; font-weight: 700; color: #fff; }
body.site-game .gm-rating i { font-style: normal; font-size: 12.5px; color: var(--muted); }
body.site-game .gm-rating.gm-all { --gm-c: var(--r-all); }
body.site-game .gm-rating.gm-12 { --gm-c: var(--r-12); }
body.site-game .gm-rating.gm-15 { --gm-c: var(--r-15); }
body.site-game .gm-rating.gm-18 { --gm-c: var(--r-18); }

/* ── 요약표: 패키지 뒷면 사양표 ─────────────────────────────────────────── */
body.site-game .summary {
  border: 1.5px solid #333a4f;
  border-radius: var(--radius);
  background: #151822;
}
body.site-game .summary tr + tr th,
body.site-game .summary tr + tr td { border-top: 1px dashed #2e3447; }
body.site-game .summary th {
  width: 118px;
  background: #1b1f2c;
  color: var(--muted);
  font-size: 12.5px;
  letter-spacing: .2px;
}
body.site-game .summary th::before {
  content: "";
  display: inline-block;
  width: 6px; height: 6px;
  margin-right: 7px;
  vertical-align: 2px;
  background: var(--accent);
  box-shadow: 6px 0 0 rgba(124, 242, 156, .35);
}
body.site-game .summary td { color: var(--fg); }

/* ── 질답: 퀘스트 로그 ─────────────────────────────────────────────────── */
body.site-game .qa-head {
  color: #fff;
  font-family: var(--display);
  font-size: 17px;
  font-weight: 400;
  letter-spacing: 0;
}
body.site-game .qa-head::before {
  content: "!";
  border-radius: 4px;
  background: var(--pink);
  color: #fff;
  font-family: var(--pixel);
  font-size: 10px;
}
body.site-game section.qa { counter-reset: gm-q; }
body.site-game .qa-list,
body.site-game section.qa > .qa-item {
  padding: 6px 20px;
  border: 1.5px solid #2e3446;
  border-radius: var(--radius);
  background: linear-gradient(180deg, #171b27, #141722);
  box-shadow: none;
}
body.site-game section.qa > .qa-item + .qa-item { margin-top: 12px; }
body.site-game .qa-item {
  counter-increment: gm-q;
  position: relative;
  padding: 16px 0 16px 14px;
  border-bottom: 1px solid #242938;
}
body.site-game .qa-item::before {
  /* 체력바 — 질답 경계를 눈으로 가른다 */
  content: "";
  position: absolute;
  left: 0; top: 18px; bottom: 18px;
  width: 3px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--accent), var(--cyan));
}
body.site-game .qa-item h2 { color: #fff; font-size: 16.5px; }
body.site-game .qa-item h2::before {
  content: "Q" counter(gm-q, decimal-leading-zero);
  align-self: flex-start;
  margin-top: 3px;
  padding: 3px 5px 2px;
  border-radius: 4px;
  background: #242a3b;
  color: var(--accent);
  font-family: var(--pixel);
  font-size: 9px;
  font-weight: 400;
  line-height: 1.4;
}
body.site-game .qa-item p { color: var(--fg-soft); padding-left: 36px; }

/* ── 관련 목록·주변 블록 ────────────────────────────────────────────────── */
body.site-game .near { border-top: 0; }
body.site-game .near h2 {
  color: #fff;
  border-left: 0;
  padding-left: 0;
}
body.site-game .near h2::before {
  content: "▶ ";
  color: var(--pink);
  font-size: .8em;
}
body.site-game .near > .near-block > p { color: var(--fg-soft); }
body.site-game .near ul {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 8px;
  padding-left: 0;
}
body.site-game .near li {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  border: 1px solid #2e3446;
  border-radius: 10px;
  background: #171b27;
}
body.site-game .near li a { font-weight: 700; color: #fff; }
body.site-game .near li a:hover { color: var(--accent); }
body.site-game .near .addr { color: var(--muted); font-size: 12px; }

/* ── 목록: 카트리지 슬롯 ───────────────────────────────────────────────── */
body.site-game section.list > h2,
body.site-game section.children > h2,
body.site-game section.other-sites > h2 {
  color: #fff;
  font-family: var(--display);
  font-weight: 400;
  font-size: 20px;
  border: 0;
}
body.site-game .place-list li:not(.ad-row) {
  position: relative;
  margin: 0 0 8px;
  padding: 12px 14px 12px 26px;
  border: 1px solid #2e3446;
  border-radius: 10px 10px 10px 4px;
  background: #171b27;
}
body.site-game .place-list li:not(.ad-row)::before {
  /* 카트리지 라벨 홈 */
  content: "";
  position: absolute;
  left: 9px; top: 12px; bottom: 12px;
  width: 6px;
  border-radius: 3px;
  background: repeating-linear-gradient(180deg, #3a4157 0 4px, transparent 4px 7px);
}
body.site-game .place-list li > a { color: #fff; }
body.site-game .place-list li > a:hover { color: var(--accent); }
body.site-game .cat {
  border: 1px solid #3a4157;
  border-radius: 999px;
  background: #1f2433;
  color: var(--cyan);
}

/* ── 허브: 스테이지 선택 타일 ──────────────────────────────────────────── */
body.site-game .region-links li,
body.site-game .menu-cards li {
  border: 1.5px solid #2e3446;
  border-radius: 12px;
  background: #171b27;
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .3);
}
body.site-game .region-links li:hover,
body.site-game .menu-cards li:hover { border-color: var(--accent); background: #1b2230; }
body.site-game .region-links li > a,
body.site-game .menu-cards li > a { color: #fff; }
body.site-game .count {
  color: var(--accent);
  font-family: var(--pixel);
  font-size: 9px;
  letter-spacing: .5px;
}
body.site-game .menu-cards li > a { font-family: var(--display); font-weight: 400; font-size: 20px; }

/* ── 출처·삭제요청·버튼·푸터 ───────────────────────────────────────────── */
body.site-game .source h2 { color: #fff; }
body.site-game .source p { color: var(--fg-soft); }
body.site-game .btn {
  border-color: #3a4157;
  background: #1b1f2c;
  color: var(--fg-soft);
}
body.site-game .btn:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
body.site-game .btn-phone { border-color: var(--cyan); color: var(--cyan); }
body.site-game .phone-note { color: var(--muted); }
body.site-game .removal {
  border-color: #33394d;
  background: #151923;
}
body.site-game .removal-title { color: #fff; }
body.site-game .removal-copy p { color: var(--fg-soft); }
body.site-game .btn-removal { background: #252b3c; color: #fff; border-color: #3a4157; }
body.site-game .btn-removal:hover { background: var(--pink); border-color: var(--pink); color: #fff; }
body.site-game .site-foot {
  color: var(--muted);
  border-top: 1px solid #242938;
}
body.site-game .site-foot a { color: var(--fg-soft); }

/* ── 모바일 ─────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  body.site-game .site-head { padding: 16px 16px 12px; }
  body.site-game .brand { font-size: 22px; }
  body.site-game h1 { font-size: 25px; }
  body.site-game .summary th { width: 92px; }
  body.site-game .qa-list { padding: 4px 14px; }
  body.site-game .qa-item p { padding-left: 0; }
  body.site-game .gm-rating { grid-template-columns: 50px auto; }
  body.site-game .gm-rating b { width: 50px; height: 50px; font-size: 13px; }
  body.site-game .near ul { grid-template-columns: 1fr; }
}