/* ==========================================================================
   layout.css — 셸 / 헤더 / 패널 / 랭킹 / 추천 / 푸터 / 광고 슬롯
   ========================================================================== */

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* -------------------------------------------------------------- 헤더 */
.site-header {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in oklab, var(--bg) 86%, transparent);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  border-bottom: 1px solid var(--line-soft);
}

.header-inner {
  display: flex; align-items: center; gap: 14px;
  min-height: 64px;
}
/* 가로로 눕힌 휴대폰 — 화면 높이가 낮아 머리글이 따라다니면 게임판을 절반 가까이 가린다 */
@media (max-height: 500px) { .site-header { position: static; } }
/* 휴대폰 게임 화면 — 머리글(두 줄, 150px 안팎)이 따라다니면 판과 아래 버튼(테트리스 등)이 한 화면에 안 들어간다.
   게임을 시작하면 판이 화면 맨 위로 오게 스크롤한다 (_shared.js bringIntoView) */
@media (hover: none) and (pointer: coarse) { html[data-page="game"] .site-header { position: static; } }
/* 게임 화면에서는 당겨서 새로고침이 되지 않게 — 위로 쓸어 올리다 판이 날아가지 않게 */
html[data-page="game"] { overscroll-behavior-y: contain; }

.brand { display: flex; align-items: center; gap: 11px; color: var(--text); flex: 1 1 auto; min-width: 0; }
.brand:hover { text-decoration: none; }
.brand-mark {
  display: grid; place-items: center;
  width: 42px; height: 42px; flex: none;
  border-radius: var(--r-md);
  background: linear-gradient(140deg, var(--accent), var(--accent-2));
  color: #fff;
  box-shadow: 0 8px 22px -12px color-mix(in oklab, var(--accent) 90%, transparent);
}
.brand-text { display: flex; flex-direction: column; min-width: 0; }
.brand-text strong { font-size: 1.04rem; letter-spacing: -.03em; line-height: 1.2; }
.brand-text small { color: var(--text-mute); font-size: .74rem; line-height: 1.3; }

.header-tools { display: flex; align-items: center; gap: 8px; flex: none; }

.search-box {
  display: flex; align-items: center; gap: 8px;
  height: 38px; padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface-2);
  color: var(--text-mute);
  transition: border-color .14s, background .14s;
}
.search-box:focus-within { border-color: var(--accent); background: var(--surface); }
.search-box input {
  width: 150px; min-width: 0;
  border: 0; background: none; outline: none;
  font-size: .88rem;
}
.search-box input::placeholder { color: var(--text-mute); }
/* 16px 보다 작은 입력칸은 누를 때 아이폰이 화면을 확대한다 */
@media (hover: none) and (pointer: coarse) { .search-box input { font-size: 16px; } }
.search-box input::-webkit-search-cancel-button { filter: grayscale(1) opacity(.6); }

/* 카테고리 네비 */
.cat-nav { border-top: 1px solid var(--line-soft); }
.cat-nav-inner {
  display: flex; gap: 6px; align-items: center;
  overflow-x: auto; overflow-y: hidden;
  min-height: 50px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.cat-nav-inner::-webkit-scrollbar { display: none; }

.cat-link {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 13px;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  color: var(--text-dim);
  font-size: .86rem; font-weight: 650;
  white-space: nowrap; flex: none;
  transition: background .14s, color .14s, border-color .14s;
}
.cat-link:hover { background: var(--surface-2); color: var(--text); text-decoration: none; }
.cat-link[aria-current="true"] {
  background: var(--accent-soft);
  color: var(--accent-text);
  border-color: color-mix(in oklab, var(--accent) 30%, transparent);
}
.cat-link .cat-count {
  font-size: .72rem; font-weight: 700;
  padding: 0 6px; border-radius: var(--r-pill);
  background: color-mix(in oklab, var(--text) 10%, transparent);
  color: var(--text-mute);
}

/* -------------------------------------------------------------- 메인 */
.site-main {
  display: flex; flex-direction: column; gap: 18px;
  padding-block: 20px calc(34px + env(safe-area-inset-bottom));
}

.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-2);
}

.game-panel { padding: 18px; }

.game-head {
  display: flex; align-items: flex-start; gap: 14px; flex-wrap: wrap;
}
.game-head-text { flex: 1 1 320px; min-width: 0; }
.game-head-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

.game-desc { color: var(--text-dim); font-size: .9rem; margin-top: 5px; word-break: keep-all; }
/* 조작법 줄 — 한 줄 설명 바로 아래, 한 톤 더 흐리게 (설명 1줄 + 조작법 1~2줄 = 2~3줄) */
.game-howto {
  margin-top: 3px;
  color: var(--text-mute);
  font-size: .84rem;
  line-height: 1.55;
  word-break: keep-all;
  max-width: 72ch;
}
.game-howto[hidden] { display: none; }
/* 홈은 제목 영역이 없다 → 게임 목록이 패널 맨 위에서 바로 시작 */
.game-head[hidden] ~ .game-mount { margin-top: 0; }

/* 옵션 바 */
.option-bar {
  display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: center;
  margin-top: 14px;
}
.option-bar:empty { display: none; }

.opt-group { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.opt-label {
  font-size: .76rem; font-weight: 750; letter-spacing: .04em;
  text-transform: uppercase; color: var(--text-mute);
}
.seg {
  display: inline-flex; gap: 3px; padding: 3px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  flex-wrap: wrap;
}
.seg-btn {
  appearance: none; border: 0; background: none;
  padding: 6px 13px;
  border-radius: 9px;
  color: var(--text-dim);
  font-size: .84rem; font-weight: 700;
  cursor: pointer;
  font-variant-numeric: tabular-nums;
  transition: background .13s, color .13s;
}
.seg-btn:hover { color: var(--text); background: color-mix(in oklab, var(--text) 7%, transparent); }
.seg-btn[aria-pressed="true"] {
  background: var(--accent-on);
  color: var(--accent-ink);
  box-shadow: var(--shadow-1);
}
/* 손가락으로 누르는 기기 — 모드 탭·작은 버튼을 누르기 쉬운 높이로 (34px·30px → 40px·36px) */
@media (hover: none) and (pointer: coarse) {
  .seg-btn { min-height: 40px; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
  .btn-sm { min-height: 36px; }
}

/* 게임 마운트 */
.game-mount {
  margin-top: 16px;
  border-radius: var(--r-md);
  min-height: 300px;
  position: relative;
}
.game-mount:focus { outline: none; }

/* 상태 바 */
.status-bar {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-top: 14px;
}
.status-bar:empty { display: none; }

.stat {
  display: flex; flex-direction: column; gap: 1px;
  padding: 8px 14px;
  min-width: 88px;
  border-radius: var(--r-md);
  background: var(--surface-2);
  border: 1px solid var(--line-soft);
}
.stat-k { font-size: .7rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-mute); }
.stat-v {
  font-size: 1.16rem; font-weight: 750; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums lining-nums;
}
.stat[data-tone="good"] .stat-v { color: var(--good); }
.stat[data-tone="warn"] .stat-v { color: var(--warn); }
.stat[data-tone="bad"]  .stat-v { color: var(--bad); }
.stat[data-tone="accent"] .stat-v { color: var(--accent-text); }
.stat.is-wide { flex: 1 1 200px; }

/* -------------------------------------------------------------- 하단 그리드 */
/* 랭킹과 추천 패널은 나란히 같은 높이로 */
.bottom-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 18px;
  align-items: stretch;
}
/* minmax(0, …) — 모드 탭이 많은 게임(타이핑 6개)에서 탭 줄 길이만큼 화면이 넓어지지 않게 (탭 줄은 옆으로 넘긴다) */
@media (max-width: 800px) { .bottom-grid { grid-template-columns: minmax(0, 1fr); } }
.rank-panel, .reco-panel { display: flex; flex-direction: column; }
.rank-body { flex: 1; }

/* 홈·카테고리·검색 화면에는 아래 패널(랭킹·추천)이 없다 — 게임 목록만 */
.bottom-grid[data-view="home"] { display: none; }

.panel-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line-soft);
}
.panel-head h2 { display: flex; align-items: center; gap: 7px; }
.panel-head-actions { display: flex; align-items: center; gap: 8px; }

/* 랭킹 */
.rank-tabs {
  display: flex; gap: 5px; padding: 11px 18px 0;
  overflow-x: auto; scrollbar-width: none;
}
.rank-tabs::-webkit-scrollbar { display: none; }
.rank-tabs:empty { display: none; }
.rank-tab {
  appearance: none; border: 1px solid var(--line); background: var(--surface-2);
  padding: 5px 12px; border-radius: var(--r-pill);
  font-size: .79rem; font-weight: 700; color: var(--text-dim);
  cursor: pointer; white-space: nowrap; flex: none;
  font-variant-numeric: tabular-nums;
}
.rank-tab[aria-selected="true"] {
  background: var(--accent-soft); color: var(--accent-text);
  border-color: color-mix(in oklab, var(--accent) 32%, transparent);
}

.rank-body { padding: 12px 10px 4px; min-height: 176px; }

.rank-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.rank-row {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  align-items: center; gap: 10px;
  padding: 7px 10px;
  border-radius: var(--r-sm);
}
.rank-row:hover { background: var(--surface-2); }
.rank-row.is-new {
  background: var(--accent-soft);
  animation: rank-pop .5s ease;
}
@keyframes rank-pop { from { transform: scale(.98); opacity: .4; } }

.rank-pos {
  display: grid; place-items: center;
  width: 26px; height: 26px; border-radius: var(--r-sm);
  background: var(--surface-2); border: 1px solid var(--line-soft);
  font-size: .78rem; font-weight: 800; color: var(--text-mute);
  font-variant-numeric: tabular-nums;
}
.rank-row[data-pos="1"] .rank-pos { background: color-mix(in oklab, var(--gold) 22%, transparent); color: var(--gold); border-color: color-mix(in oklab, var(--gold) 40%, transparent); }
.rank-row[data-pos="2"] .rank-pos { background: color-mix(in oklab, #b9c5d8 20%, transparent); color: #b9c5d8; }
.rank-row[data-pos="3"] .rank-pos { background: color-mix(in oklab, #d0894f 20%, transparent); color: #d0894f; }
/* 밝은 테마 — 흰 바탕에서 읽히게 진하게 (은·동 글자가 거의 안 보였다) */
:root[data-theme="light"] .rank-row[data-pos="1"] .rank-pos { color: #8a6500; }
:root[data-theme="light"] .rank-row[data-pos="2"] .rank-pos { color: #5d6b82; background: color-mix(in oklab, #8795ad 18%, transparent); }
:root[data-theme="light"] .rank-row[data-pos="3"] .rank-pos { color: #9a5424; }

.rank-meta { min-width: 0; }
.rank-name {
  font-size: .92rem; font-weight: 700; letter-spacing: -.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rank-right { display: flex; flex-direction: column; align-items: flex-end; }
.rank-score {
  font-size: .98rem; font-weight: 750; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums lining-nums;
  white-space: nowrap;
}
.rank-score .unit { font-size: .76rem; font-weight: 650; color: var(--text-mute); margin-left: 2px; }
.rank-sub { font-size: .74rem; color: var(--text-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rank-when { font-size: .7rem; color: var(--text-mute); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* 전체 랭킹 창 */
.rank-dialog {
  width: min(560px, calc(100vw - 32px));
  max-height: min(80vh, 760px);
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-3);
}
.rank-dialog[open] { display: flex; flex-direction: column; }
.rank-dialog::backdrop { background: rgba(5, 8, 16, .55); }
.rank-dialog-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 14px 16px 12px 18px;
  border-bottom: 1px solid var(--line-soft);
}
.rank-dialog-title { font-size: 1.02rem; }
.rank-dialog-body { flex: 1; overflow-y: auto; padding: 10px 10px 14px; }
.rank-dialog-mode + .rank-dialog-mode { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line-soft); }
.rank-dialog-sub { font-size: .84rem; font-weight: 750; color: var(--text-dim); padding: 2px 10px 6px; }
.rank-dialog-mode .empty-state { padding: 14px 20px; }

/* 서버에서 받아 오는 동안 — 자리만 잡아 둔다 (높이가 튀지 않게) */
.rank-loading { min-height: 176px; }

.empty-state {
  display: grid; place-items: center; gap: 7px;
  padding: 34px 20px; text-align: center;
  color: var(--text-mute); font-size: .86rem;
}
.empty-state .big { font-size: 1.7rem; opacity: .55; }

/* 추천 */
/* 옆 랭킹 패널(7줄)이 더 길면 카드가 늘어나 두 패널 높이가 맞는다 */
.reco-grid {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  grid-auto-rows: 1fr;
  gap: 9px;
  padding: 14px;
}

.game-card {
  display: flex; flex-direction: column; gap: 7px;
  padding: 13px;
  border-radius: var(--r-md);
  background: var(--surface-2);
  border: 1px solid var(--line-soft);
  color: var(--text);
  transition: transform .14s cubic-bezier(.2,.9,.3,1), border-color .14s, background .14s, box-shadow .14s;
}
.game-card:hover {
  text-decoration: none;
  transform: translateY(-2px);
  border-color: color-mix(in oklab, var(--accent) 40%, transparent);
  background: var(--surface-3);
  box-shadow: var(--shadow-2);
}
.game-card[aria-current="true"] {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.card-icon { font-size: 1.5rem; line-height: 1; }
.card-name { font-size: .92rem; font-weight: 700; letter-spacing: -.02em; }
.card-tag { font-size: .74rem; color: var(--text-mute); line-height: 1.45; }
.card-foot { margin-top: auto; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.card-best {
  font-size: .72rem; font-weight: 700; color: var(--good);
  font-variant-numeric: tabular-nums;
}

/* 홈 그리드 */
.home-section + .home-section { margin-top: 22px; }
.home-section-head {
  display: flex; align-items: center; gap: 9px;
  margin-bottom: 11px;
}
.home-section-head h2 { font-size: 1rem; }
.home-section-head .line { flex: 1; height: 1px; background: var(--line-soft); }
.home-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  gap: 11px;
}

/* -------------------------------------------------------------- 광고 슬롯 */
.ad-slot { display: none; }
.ad-slot[data-ad-state="filled"],
.ad-slot[data-ad-state="placeholder"] {
  display: block;
  min-height: 92px;
  border-radius: var(--r-md);
  overflow: hidden;
}
.ad-slot[data-ad-state="placeholder"] {
  display: grid; place-items: center;
  border: 1px dashed var(--line);
  background: var(--surface-2);
  color: var(--text-mute);
  font-size: .78rem; letter-spacing: .04em;
}

/* -------------------------------------------------------------- 맨 아래 자세한 설명 */
/* 검색으로 들어온 사람이 읽는 본문 — 게임 소개·조작법·규칙·공략 (js/core/guides.js) */
.guide {
  margin-top: 18px;
  padding: 20px 22px 22px;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  background: var(--surface);
  color: var(--text-dim);
  font-size: .9rem;
  line-height: 1.8;
  word-break: keep-all;
}
.guide:empty { display: none; }
.guide > h2 {
  margin: 0 0 18px;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -.01em;
}

/* 네 칸 — 왼쪽 위부터 오른쪽 아래까지 게임 소개 · 규칙 · 조작법 · 공략 팁.
   진짜 2×2 격자라서 줄마다 절 제목이 같은 높이에서 시작한다 (칸마다 글 길이가 달라도 눈금이 맞게) */
.guide-grid { display: grid; gap: 18px 40px; align-items: start; }
@media (min-width: 900px) { .guide-grid { grid-template-columns: 1fr 1fr; } }

.guide-sec { margin-top: 0; max-width: 78ch; }
.guide-sec h3 {
  margin: 0 0 6px;
  font-size: .95rem;
  font-weight: 700;
  color: var(--text);
}
.guide-sec p { margin: 0 0 8px; }
.guide-sec p:last-child { margin-bottom: 0; }
.guide-tips { margin: 0; padding-left: 1.1em; }
.guide-tips li { margin-bottom: 5px; }
.guide-tips li:last-child { margin-bottom: 0; }

/* 같은 갈래의 다른 게임 — 네 칸 아래 한 줄로 */
.guide-more {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--line-soft);
}
.guide-more h3 {
  margin: 0 0 8px;
  font-size: .95rem;
  font-weight: 700;
  color: var(--text);
}
.guide-links {
  display: flex; flex-wrap: wrap; gap: 6px 18px;
  margin: 0; padding: 0; list-style: none;
}
.guide-links a { color: var(--text-dim); text-decoration: none; }
.guide-links a:hover { color: var(--accent); text-decoration: underline; }

@media (max-width: 560px) {
  .guide { padding: 16px 16px 18px; font-size: .86rem; line-height: 1.75; }
  .guide > h2 { font-size: 1.05rem; }
}

/* -------------------------------------------------------------- 맨 아래 한 줄 */
/* 개인정보처리방침 · 이용약관 · 문의 · 방문자 수 */
.site-footer { padding-bottom: calc(26px + env(safe-area-inset-bottom)); }
.footer-links {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px;
  padding-top: 12px;
  border-top: 1px solid var(--line-soft);
  font-size: .76rem; color: var(--text-mute);
}
.footer-links a { color: var(--text-dim); text-decoration: none; }
.footer-links a.is-strong { font-weight: 700; color: var(--text); }
.footer-links a:hover { color: var(--accent); text-decoration: underline; }
/* 저작권 표시와 방문자 수는 한 덩어리로 오른쪽 끝에 (줄이 바뀌어도 오른쪽) */
.footer-right {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: flex-end;
  gap: 4px 16px; margin-left: auto;
}

/* 방문자 수 — 맨 아래 오른쪽 */
.visitors { display: inline-flex; align-items: baseline; gap: 8px; }
.visitors[hidden] { display: none; }
.visit-label { color: var(--text-mute); }
.visit-item { display: inline-flex; align-items: baseline; gap: 4px; }
.visit-k { color: var(--text-mute); }
.visit-v { color: var(--text-dim); font-weight: 600; font-variant-numeric: tabular-nums; }

/* -------------------------------------------------------------- 문서 (개인정보처리방침·이용약관) */
.doc {
  max-width: 860px; width: 100%; margin-inline: auto;
  padding: clamp(20px, 4vw, 40px);
  font-size: .9rem; line-height: 1.75; color: var(--text-dim);
  word-break: keep-all;      /* 한글을 낱말 단위로 줄바꿈 */
}
.doc h1 { margin: 0; font-size: 1.5rem; color: var(--text); }
.doc h2 { margin: 28px 0 8px; font-size: 1.02rem; color: var(--text); }
.doc p, .doc ul, .doc ol { margin: 0 0 10px; }
.doc ul, .doc ol { padding-left: 1.3em; }
.doc li { margin-bottom: 4px; }
.doc b { color: var(--text); }
.doc a { color: var(--accent); }
.doc-meta { font-size: .8rem; color: var(--text-mute); }

/* 문의 — 메일 앱이 없는 PC 도 쓸 수 있게 주소 복사·Gmail 쓰기를 같이 둔다 */
.contact-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: 12px;
  margin: 16px 0 8px; padding: 18px 20px;
  border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-2);
}
.contact-mail { font-size: 1.15rem; font-weight: 700; color: var(--text); user-select: all; -webkit-user-select: all; overflow-wrap: anywhere; }
.contact-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.contact-actions .btn { text-decoration: none; }
.contact-msg { min-height: 1.3em; margin: 0; font-size: .82rem; color: var(--text-mute); }
.contact-msg[data-tone="good"] { color: var(--good); }
.contact-msg[data-tone="bad"] { color: var(--bad); }
.doc-table { overflow-x: auto; margin: 0 0 12px; border: 1px solid var(--line); border-radius: var(--r-md); }
.doc-table table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: .82rem; }
.doc-table th, .doc-table td { padding: 9px 12px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line-soft); }
.doc-table th { background: var(--surface-2); color: var(--text); font-weight: 700; white-space: nowrap; }
.doc-table tr:last-child td { border-bottom: 0; }

/* -------------------------------------------------------------- 반응형 */
@media (max-width: 620px) {
  :root { --gutter: 12px; }
  .game-panel { padding: 14px; }
  .search-box input { width: 92px; }
  .brand-text small { display: none; }
  .header-inner { min-height: 58px; }
  .reco-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
}
@media (max-width: 420px) {
  .search-box { display: none; }
  .home-grid { grid-template-columns: repeat(auto-fill, minmax(142px, 1fr)); }
}