/* play.ayo.pe.kr — PC방·당구장·게임장 독자 스킨 (2026-09-27 사이트 고유 디자인 규칙).
 *
 * 콘셉트: **당구대 × 점수판**. 동네 PC방·당구장 간판 앞의 초록 당구대 천(라사지)과
 * 벽에 걸린 알 점수판(주판알)으로 화면을 짠다. game(어두운 게임 스토어)과 겹치지 않게 밝은 나무·펠트 톤이다.
 * site.css(디자인 A) 위에 덮어쓰고 전부 body.site-play 아래로 가둔다 — 다른 사이트에 새지 않는다.
 *
 *   헤더   : 초록 펠트 판 + 나무 쿠션 테 + 네 귀퉁이 포켓 · 아래 점수판 알 줄
 *   탭     : 초크 큐브(파란 사각 초크, 선택 시 가루 묻은 흰 윗면)
 *   요약표 : 점수판 — 나무 판에 칸마다 알 표식
 *   질답   : 당구공 번호(1 노랑 · 2 파랑 · 3 빨강 · 4 보라 · 5 주황 · 6 초록 · 7 밤색 · 8 검정 순환)
 *   목록   : 큐 거치대 — 줄마다 큐대 끝(가죽 팁) 표식
 *   글꼴   : 제목 Jua · 본문 Sunflower
 *
 * ⚠️ 광고 유닛(<ins>·.ad-top·.ad-row 안쪽)에는 배경·테두리·라벨을 씌우지 않는다(site.css 애드센스 절).
 * ⚠️ 질문(h2)과 답(p) 사이에 요소를 끼우지 않는다 — 장식은 ::before/::after 로만.
 * ⚠️ '성인PC방' 은 분류·문구로 쓰지 않는다(SITES.md) — 이 파일도 그런 표식을 만들지 않는다.
 */

body.site-play {
  --fg: #1f2a24;
  --fg-soft: #46554c;
  --muted: #76857b;
  --line: #d9d2c2;
  --line-soft: #ebe5d7;
  --bg: #fbf8f1;
  --bg-soft: #f1ecdf;
  --accent: #0f6b45;          /* 펠트 초록 */
  --accent-strong: #0a5034;
  --accent-soft: #dcefe4;
  --accent-wash: #f0f8f3;
  --accent-line: #a9d3bb;
  --felt: #127a4e;
  --felt-dark: #0b5a39;
  --wood: #7a4a24;
  --wood-dark: #56321a;
  --chalk: #2f6fd1;
  --radius: 10px;
  --wrap: 880px;
  --head: "Jua", "Sunflower", sans-serif;
  background: #f4efe3;
  font-family: "Sunflower", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  font-size: 16.5px;
}
body.site-play a { color: var(--accent); }

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

/* ── 헤더: 당구대 ───────────────────────────────────────────────────── */
body.site-play .site-head {
  position: relative;
  max-width: var(--wrap);
  margin: 14px auto 30px;
  padding: 22px 30px 20px;
  border: 12px solid var(--wood);
  border-radius: 18px;
  background:
    radial-gradient(ellipse at 50% 40%, rgba(255, 255, 255, .10), transparent 65%),
    var(--felt);
  box-shadow:
    inset 0 0 0 3px var(--felt-dark),
    inset 0 0 26px rgba(0, 0, 0, .28),
    0 0 0 2px var(--wood-dark),
    0 8px 0 -2px var(--wood-dark);
  gap: 12px 22px;
}
/* 네 귀퉁이 포켓 + 쿠션 위 다이아몬드 표식 */
body.site-play .site-head::before {
  content: "";
  position: absolute;
  inset: -12px;
  border-radius: 18px;
  background:
    radial-gradient(circle at 10px 10px, #111 0 8px, transparent 9px) 0 0 / 100% 100% no-repeat,
    radial-gradient(circle at calc(100% - 10px) 10px, #111 0 8px, transparent 9px) 0 0 / 100% 100% no-repeat,
    radial-gradient(circle at 10px calc(100% - 10px), #111 0 8px, transparent 9px) 0 0 / 100% 100% no-repeat,
    radial-gradient(circle at calc(100% - 10px) calc(100% - 10px), #111 0 8px, transparent 9px) 0 0 / 100% 100% no-repeat,
    radial-gradient(circle at 50% 6px, #efe0b8 0 2px, transparent 2.5px) 0 0 / 25% 100% repeat-x;
  pointer-events: none;
}
/* 점수판 알 줄 — 헤더 아래 */
body.site-play .site-head::after {
  content: "";
  position: absolute;
  left: 20px; right: 20px; bottom: -34px;
  height: 14px;
  background:
    linear-gradient(#8a8a8a, #8a8a8a) 0 50% / 100% 2px no-repeat,
    radial-gradient(circle at 50% 50%, #c0392b 0 5px, transparent 5.5px) 0 0 / 14px 14px repeat-x;
  -webkit-mask: linear-gradient(90deg, #000 0 38%, transparent 38% 64%, #000 64% 74%, transparent 74%);
  mask: linear-gradient(90deg, #000 0 38%, transparent 38% 64%, #000 64% 74%, transparent 74%);
  pointer-events: none;
}
body.site-play .brand {
  position: relative;
  font-family: var(--head);
  font-weight: 400;
  font-size: 28px;
  letter-spacing: 0;
  line-height: 1.1;
}
body.site-play .brand a { color: #fff; text-shadow: 0 2px 0 rgba(0, 0, 0, .25); }
body.site-play .brand a:hover { color: #fdf3c8; text-decoration: none; }
/* 큐볼 하나 — 상호 앞 */
body.site-play .brand::before {
  content: "";
  display: inline-block;
  width: 22px; height: 22px;
  margin-right: 10px;
  vertical-align: -3px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff 0 20%, #f3efe4 45%, #cfc8b6 100%);
  box-shadow: 0 2px 3px rgba(0, 0, 0, .35);
}

/* 탭: 초크 큐브 */
body.site-play .site-head nav { position: relative; gap: 10px; }
body.site-play .site-head nav a {
  padding: 7px 14px 6px;
  border-radius: 4px;
  background: var(--chalk);
  color: #fff;
  font-family: var(--head);
  font-size: 16px;
  box-shadow: inset 0 4px 0 rgba(255, 255, 255, .22), 0 3px 0 #1c4c96;
}
body.site-play .site-head nav a.on,
body.site-play .site-head nav a:hover {
  background: #eaf1fb;
  color: #1c4c96;
  box-shadow: inset 0 4px 0 #cfdcf2, 0 3px 0 #1c4c96;
  text-decoration: none;
}

/* 검색창: 쿠션 테 */
body.site-play .site-search input[type="search"] {
  border: 2px solid var(--wood);
  border-radius: 999px;
  background: #fff;
  padding-left: 18px;
  font-family: inherit;
}
body.site-play .site-search input[type="search"]:focus { outline: 3px solid var(--accent-soft); border-color: var(--felt); }
body.site-play .site-search button {
  border-radius: 999px;
  background: var(--felt);
  font-family: var(--head);
  font-weight: 400;
  font-size: 16px;
  padding: 0 22px;
}
body.site-play .site-search button:hover { background: var(--felt-dark); }

/* ── 경로·제목 ─────────────────────────────────────────────────────── */
body.site-play .crumb { font-size: 13.5px; }
body.site-play .crumb a { color: var(--fg-soft); }
body.site-play .crumb a::after {
  content: "";
  display: inline-block;
  width: 5px; height: 5px;
  margin: 0 8px 2px;
  border-radius: 50%;
  background: var(--wood);
}
body.site-play .crumb span { color: var(--accent); font-weight: 700; }

body.site-play h1 {
  font-family: var(--head);
  font-weight: 400;
  font-size: 34px;
  line-height: 1.25;
  letter-spacing: 0;
  color: var(--felt-dark);
}
body.site-play .lead { color: var(--fg-soft); margin: -4px 0 22px; }
body.site-play .data-date {
  display: inline-block;
  margin: -8px 0 18px;
  padding: 3px 12px;
  border-radius: 999px;
  background: var(--bg-soft);
  color: var(--fg-soft);
}

/* ── 요약표: 점수판 ─────────────────────────────────────────────────── */
body.site-play .summary {
  border: 8px solid var(--wood);
  border-radius: 12px;
  background: #fffdf7;
  box-shadow: 0 0 0 2px var(--wood-dark), 0 6px 0 -1px var(--wood-dark);
  font-size: 15.5px;
}
body.site-play .summary tr:has(> td:empty) { display: none; }
body.site-play .summary tr + tr th,
body.site-play .summary tr + tr td { border-top: 1px solid #e9e1cd; }
body.site-play .summary th {
  width: 120px;
  background: #f4ecd9;
  color: var(--wood-dark);
  font-weight: 700;
  font-size: 14px;
}
body.site-play .summary th::before {
  content: "";
  display: inline-block;
  width: 9px; height: 9px;
  margin-right: 8px;
  vertical-align: 1px;
  border-radius: 50%;
  background: #c0392b;
  box-shadow: inset -2px -2px 0 rgba(0, 0, 0, .2);
}
body.site-play .summary tr:nth-child(2n) th::before { background: #f1c40f; }
body.site-play .summary td { font-weight: 500; }

body.site-play .btn { border-radius: 999px; font-family: inherit; }
body.site-play .btn-phone { border: 2px solid var(--felt); color: var(--felt-dark); background: #fff; font-weight: 700; }
body.site-play .btn-phone:hover { background: var(--felt); color: #fff; }

/* ── 질답: 당구공 번호 ─────────────────────────────────────────────── */
body.site-play section.qa { counter-reset: pl-q; }
body.site-play .qa-head {
  font-family: var(--head);
  font-weight: 400;
  font-size: 22px;
  color: var(--felt-dark);
}
body.site-play .qa-head::before {
  content: "8";
  width: 28px; height: 28px;
  background: radial-gradient(circle, #fff 0 42%, #111 44%);
  color: #111;
  font-size: 12px;
  font-weight: 700;
}
body.site-play .qa-list,
body.site-play section.qa > .qa-item {
  padding: 6px 22px;
  border: 0;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 0 0 1px var(--line), 0 5px 0 var(--line-soft);
}
body.site-play section.qa > .qa-item + .qa-item { margin-top: 12px; }
body.site-play .qa-item {
  --ball: #f1c40f;
  counter-increment: pl-q;
  position: relative;
  padding: 18px 0 18px 50px;
  border-bottom: 1px dashed var(--line);
}
body.site-play .qa-item:nth-child(8n+2) { --ball: #2471d6; }
body.site-play .qa-item:nth-child(8n+3) { --ball: #d63a2c; }
body.site-play .qa-item:nth-child(8n+4) { --ball: #7a3fb0; }
body.site-play .qa-item:nth-child(8n+5) { --ball: #ec7a1c; }
body.site-play .qa-item:nth-child(8n+6) { --ball: #16924f; }
body.site-play .qa-item:nth-child(8n+7) { --ball: #8b2d2d; }
body.site-play .qa-item:nth-child(8n)   { --ball: #151515; }
body.site-play .qa-item::before {
  content: counter(pl-q);
  position: absolute;
  left: 0; top: 16px;
  width: 34px; height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, #fff 0 36%, transparent 38%),
    radial-gradient(circle at 32% 28%, rgba(255, 255, 255, .55) 0 12%, transparent 30%),
    var(--ball);
  color: #1b1b1b;
  font-family: var(--head);
  font-size: 13px;
  line-height: 1;
  box-shadow: inset -3px -4px 0 rgba(0, 0, 0, .18), 0 2px 3px rgba(0, 0, 0, .18);
}
body.site-play section.qa > .qa-item { padding: 18px 22px 18px 72px; }
body.site-play section.qa > .qa-item::before { left: 22px; }
body.site-play .qa-item h2 {
  font-family: var(--head);
  font-weight: 400;
  font-size: 19px;
  color: var(--fg);
}
body.site-play .qa-item h2::before { content: none; }
body.site-play .qa-item p { padding-left: 0; color: var(--fg-soft); line-height: 1.8; }

/* ── 지도 ───────────────────────────────────────────────────────────── */
body.site-play .mapsec-head { font-family: var(--head); font-weight: 400; font-size: 20px; color: var(--felt-dark); }
body.site-play .map-canvas,
body.site-play .pano-canvas { border: 6px solid var(--wood); border-radius: 10px; }

/* ── 주변 ───────────────────────────────────────────────────────────── */
body.site-play .near { border-top: 0; margin-top: 46px; }
body.site-play .near-block {
  padding: 4px 20px 16px;
  border-radius: 14px;
  background: var(--felt);
  color: #eaf6ef;
  box-shadow: inset 0 0 0 3px var(--felt-dark), 0 0 0 6px var(--wood);
  margin: 6px;
}
body.site-play .near-block + .near-block { margin-top: 30px; }
body.site-play .near h2 {
  border-left: 0;
  padding-left: 0;
  font-family: var(--head);
  font-weight: 400;
  font-size: 19px;
  color: #fff;
}
body.site-play .near > .near-block > p { padding-left: 0; color: #d4ecde; }
body.site-play .near ul { padding-left: 0; }
body.site-play .near li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 8px;
  padding: 9px 0;
  border-top: 1px solid rgba(255, 255, 255, .14);
}
body.site-play .near li a { color: #fff; font-weight: 700; }
body.site-play .near .addr { color: #b9dcc8; }
body.site-play .near .more { padding-left: 0; }
body.site-play .near .more a { color: #fdf3c8; }
body.site-play .near .dist { background: #fdf3c8; color: var(--wood-dark); }
body.site-play .dist { border-radius: 4px; }

/* ── 목록: 큐 거치대 ────────────────────────────────────────────────── */
body.site-play section.list > h2,
body.site-play section.children > h2,
body.site-play section.other-sites > h2 {
  font-family: var(--head);
  font-weight: 400;
  font-size: 21px;
  color: var(--felt-dark);
  border-bottom: 3px solid var(--wood);
}
body.site-play .place-list li:not(.ad-row) {
  position: relative;
  padding: 13px 8px 13px 40px;
  border-bottom: 1px solid var(--line);
}
/* 큐대 끝 — 가죽 팁 + 흰 페럴 */
body.site-play .place-list li:not(.ad-row)::before {
  content: "";
  position: absolute;
  left: 4px; top: 22px;
  width: 26px; height: 5px;
  border-radius: 3px 0 0 3px;
  background: linear-gradient(90deg, #3b6fb8 0 3px, #f7f3e8 3px 8px, #c69a62 8px);
}
body.site-play .place-list li:not(.ad-row):hover { background: var(--accent-wash); }
body.site-play .place-list li > a { color: var(--fg); font-size: 16.5px; }
body.site-play .cat:empty { display: none; }
body.site-play .cat { background: var(--accent-soft); color: var(--felt-dark); border-radius: 4px; }

/* 지역·조건·다른 사이트 링크: 포켓 칩 */
body.site-play .region-links { gap: 10px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
body.site-play .region-links li {
  position: relative;
  padding: 10px 12px 10px 30px;
  border: 0;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 0 0 1.5px var(--line), 0 3px 0 var(--line);
}
body.site-play .region-links li::before {
  content: "";
  position: absolute;
  left: 11px; top: 50%;
  width: 10px; height: 10px;
  margin-top: -5px;
  border-radius: 50%;
  background: #1b1b1b;
  box-shadow: inset 0 0 0 2px var(--wood);
}
body.site-play .region-links li:hover { box-shadow: 0 0 0 1.5px var(--felt), 0 3px 0 var(--felt); }
body.site-play .region-links li > a { color: var(--fg); }
body.site-play .count { color: var(--wood); font-weight: 700; }

/* 홈 메뉴: 작은 당구대 */
body.site-play .menu-cards { gap: 18px; }
body.site-play .menu-cards li {
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 24px 22px;
  border: 8px solid var(--wood);
  border-radius: 14px;
  background: radial-gradient(ellipse at 50% 40%, rgba(255, 255, 255, .12), transparent 70%), var(--felt);
  box-shadow: inset 0 0 0 2px var(--felt-dark), 0 5px 0 -1px var(--wood-dark);
}
body.site-play .menu-cards li:hover { background: var(--felt-dark); }
body.site-play .menu-cards li > a { color: #fff; font-family: var(--head); font-weight: 400; font-size: 24px; }
body.site-play .menu-cards .count { color: #fdf3c8; font-size: 13px; }

/* ── 출처·삭제요청·푸터 ─────────────────────────────────────────────── */
body.site-play .source h2 { font-family: var(--head); font-weight: 400; color: var(--felt-dark); }
body.site-play .removal {
  border: 2px dashed var(--wood);
  border-radius: 14px;
  background: #fffdf7;
  box-shadow: none;
}
body.site-play .removal::before { background: var(--accent-soft); }
body.site-play .removal-icon { border-radius: 50%; background: #1b1b1b; color: #fff; }
body.site-play .removal-title { font-family: var(--head); font-weight: 400; font-size: 18px; }
body.site-play .btn-removal { background: var(--felt); box-shadow: 0 4px 0 var(--felt-dark); border-radius: 999px; }
body.site-play .btn-removal:hover { background: var(--felt-dark); box-shadow: 0 4px 0 #063824; }
body.site-play .site-foot {
  margin-top: 54px;
  padding: 22px 20px 40px;
  border-top: 0;
  border-radius: 14px 14px 0 0;
  background: repeating-linear-gradient(90deg, var(--wood) 0 60px, #83502a 60px 120px);
  color: #f3e3cc;
}
body.site-play .site-foot a { color: #fdf3c8; }

body.site-play main.not-found h1::before {
  content: "";
  display: block;
  width: 40px; height: 40px;
  margin-bottom: 12px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0 36%, #111 38%);
}

/* ── 모바일 ─────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  body.site-play .site-head { margin: 10px 12px 28px; padding: 16px 16px 14px; border-width: 9px; }
  body.site-play .site-head::before { inset: -9px; }
  body.site-play .brand { font-size: 23px; }
  body.site-play .site-head nav { gap: 8px; }
  body.site-play .site-head nav a { font-size: 15px; padding: 6px 11px 5px; }
  body.site-play h1 { font-size: 27px; }
  body.site-play .summary { border-width: 6px; }
  body.site-play .summary th { width: 92px; }
  body.site-play .qa-list { padding: 4px 14px; }
  body.site-play .qa-item { padding-left: 44px; }
  body.site-play .qa-item::before { width: 30px; height: 30px; font-size: 12px; }
  body.site-play .qa-item h2 { font-size: 17.5px; }
  body.site-play section.qa > .qa-item { padding: 16px 14px 16px 58px; }
  body.site-play section.qa > .qa-item::before { left: 14px; }
  body.site-play .near-block { padding: 4px 14px 14px; }
  body.site-play .region-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.site-play .region-links li { flex-wrap: wrap; min-width: 0; }
}

/* ── 다크 모드: 불 끈 당구장(조명 아래 판만 밝다) ───────────────────── */
@media (prefers-color-scheme: dark) {
  body.site-play {
    --fg: #e8efe9;
    --fg-soft: #bccbc1;
    --muted: #8fa196;
    --line: #34403a;
    --line-soft: #29332e;
    --bg: #18201c;
    --bg-soft: #222c26;
    --accent: #5fcf95;
    --accent-strong: #86e0b0;
    --accent-soft: #1d3a2b;
    --accent-wash: #1a2a22;
    --accent-line: #2f5a43;
    background: #121815;
  }
  body.site-play h1,
  body.site-play .qa-head,
  body.site-play section.list > h2,
  body.site-play section.children > h2,
  body.site-play section.other-sites > h2,
  body.site-play .source h2,
  body.site-play .mapsec-head { color: #bfeed3; }
  body.site-play .summary,
  body.site-play .qa-list,
  body.site-play section.qa > .qa-item,
  body.site-play .region-links li,
  body.site-play .removal,
  body.site-play .site-search input[type="search"],
  body.site-play .btn-phone { background: #1c2520; }
  body.site-play .summary th { background: #2a2419; color: #e8cfa8; }
  body.site-play .summary tr + tr th,
  body.site-play .summary tr + tr td { border-top-color: #3a342a; }
  body.site-play .btn-phone { color: #bfeed3; border-color: var(--accent); }
  body.site-play .cat { background: #1d3a2b; color: #bfeed3; }
  body.site-play .count { color: #e3b884; }
  body.site-play .qa-item::before { color: #1b1b1b; }
}