/* ============================================================
   스파인 오목 — 스타일 (style.css)
   컨셉: 흑백 모노크롬 미니멀. 먹돌·백돌과 반상, 현재 차례에 집중.
   공통 토큰(/assets/css/tokens.css)의 .sgh-* 컴포넌트를 기반으로
   오목 전용 요소만 최소한으로 정의한다. (data-game="omok" 스코프)
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

body.sgh-base {
  min-height: 100vh;
  word-break: keep-all;              /* 한국어 어절 단위 줄바꿈 */
  overflow-wrap: break-word;
}

/* ── 화면 전환 세그먼트 ─────────────────── */
.view-switch {
  display: flex;
  justify-content: center;
  padding: var(--sgh-sp-5) var(--sgh-sp-4) 0;
}
.view-switch .tab {
  min-height: 38px;
  padding: 0 var(--sgh-sp-5);
  border: 0;
  border-radius: calc(var(--sgh-r-md) - 3px);
  background: transparent;
  color: var(--sgh-text-2);
  font-family: inherit;
  font-size: var(--sgh-fs-small);
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background var(--sgh-t-fast), color var(--sgh-t-fast);
}
.view-switch .tab:hover { color: var(--sgh-text-1); }
.view-switch .tab.active {
  background: var(--game-accent);
  color: var(--sgh-brand-ink);
}
@media (pointer: coarse) {
  .view-switch .tab { min-height: var(--sgh-touch); }
}

/* ── 대국 레이아웃 ────────────────────── */
.view { display: none; }
.view.active { display: block; }

.view-game.active {
  display: block;
  max-width: var(--sgh-maxw);
  margin: 0 auto;
  padding: var(--sgh-sp-5) var(--sgh-sp-5) var(--sgh-sp-7);
}

.game-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sgh-sp-5);
  align-items: start;
}

/* PC: 좌측 반상 크게 + 우측 패널 */
@media (min-width: 1024px) {
  .game-layout {
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: var(--sgh-sp-6);
  }
}

.board-col { min-width: 0; }

/* ── 현재 차례 (가장 눈에 띄게) ─────────── */
.status-bar {
  display: flex;
  align-items: center;
  gap: var(--sgh-sp-4);
  width: 100%;
  min-height: 60px;
  margin: 0 auto var(--sgh-sp-4);
  max-width: min(72vh, 100%, 720px);
  padding: var(--sgh-sp-3) var(--sgh-sp-5);
  border-radius: var(--sgh-r-lg);
}
.status-bar .status-text { display: flex; flex-direction: column; line-height: 1.35; }
.status-bar .status-text strong {
  font-size: var(--sgh-fs-h2);
  font-weight: 700;
  color: var(--sgh-text-1);
}
.status-bar .status-text small { font-size: var(--sgh-fs-small); color: var(--sgh-text-2); }

/* 차례/결과 돌 칩 (모노크롬) */
.stone-chip {
  width: 34px; height: 34px; border-radius: 50%; flex: 0 0 auto;
  box-shadow: inset -3px -4px 7px rgba(0,0,0,.5), 0 2px 6px rgba(0,0,0,.4);
  transition: background .25s;
}
.stone-chip.black {
  background: radial-gradient(circle at 34% 30%, #5a616d, var(--game-stone-black) 62%, #05070a);
}
.stone-chip.white {
  background: radial-gradient(circle at 34% 30%, #ffffff, var(--game-stone-white) 60%, #c4c6cb);
}

/* ── 반상 ─────────────────────────────── */
.board-wrap { display: flex; justify-content: center; }

.board-frame {
  padding: 12px;
  border-radius: var(--sgh-r-lg);
  background: var(--sgh-bg-1);
  border: 1px solid var(--sgh-border-2);
  box-shadow: var(--sgh-shadow-2);
}

#board {
  display: block;
  width: min(72vh, 100%, 720px);
  height: auto;
  border-radius: var(--sgh-r-sm);
  cursor: crosshair;
  touch-action: manipulation;          /* 더블탭 확대 방지 */
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
}
@media (pointer: coarse) { #board { cursor: default; } }

/* ── 사이드 패널 ──────────────────────── */
.side-col { display: flex; flex-direction: column; gap: var(--sgh-sp-3); }

/* 기록 */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); text-align: center; }
.stats b {
  display: block; font-size: 1.5rem; font-weight: 700; color: var(--sgh-text-1);
  font-variant-numeric: tabular-nums;
}
.stats span {
  font-size: var(--sgh-fs-caption); letter-spacing: 0.12em; color: var(--sgh-text-3);
}
.stats div + div { border-left: 1px solid var(--sgh-border-1); }

/* 조작 버튼 행 */
.action-row { display: flex; gap: var(--sgh-sp-3); }
.action-row .sgh-btn { flex: 1; }

/* 표시 옵션 토글 */
.toggle-row {
  display: flex; justify-content: space-between; align-items: center;
  min-height: var(--sgh-touch);
  font-size: var(--sgh-fs-body); color: var(--sgh-text-2); cursor: pointer;
}
.toggle-row + .toggle-row { border-top: 1px solid var(--sgh-border-1); }

/* 토글 스위치 (role="switch") */
.switch {
  width: 46px; height: 26px; border-radius: var(--sgh-r-pill); position: relative;
  background: var(--sgh-bg-3); border: 1px solid var(--sgh-border-2);
  transition: background var(--sgh-t-fast), border-color var(--sgh-t-fast);
  flex: 0 0 auto;
}
.switch::after {
  content: ''; position: absolute; top: 2px; left: 2px;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--sgh-text-2); transition: transform var(--sgh-t-fast), background var(--sgh-t-fast);
}
.switch.on { background: var(--game-accent); border-color: transparent; }
.switch.on::after { transform: translateX(20px); background: #fff; }

/* 오목 교실 바로가기 */
.school-link {
  display: flex; align-items: center; gap: var(--sgh-sp-3); text-align: left;
  width: 100%; min-height: var(--sgh-touch);
  padding: var(--sgh-sp-3) var(--sgh-sp-4);
  background: var(--sgh-bg-1);
  border: 1px solid var(--sgh-border-1);
  border-radius: var(--sgh-r-lg);
  color: var(--sgh-text-1); cursor: pointer; font-family: inherit;
  transition: background var(--sgh-t-fast), border-color var(--sgh-t-fast);
}
.school-link:hover { background: var(--sgh-bg-2); border-color: var(--game-accent); }
.school-link .school-ico { font-size: 20px; }
.school-link strong { display: block; font-size: var(--sgh-fs-body); }
.school-link small { color: var(--sgh-text-3); font-size: var(--sgh-fs-caption); }

/* ── 모달 안 대국 설정 ────────────────── */
.field + .field, #aiOptions + .field, .field + #aiOptions { margin-top: var(--sgh-sp-4); }
#aiOptions .field:first-child { margin-top: var(--sgh-sp-4); }
.opt-label {
  display: block; font-size: var(--sgh-fs-caption); letter-spacing: 0.1em;
  color: var(--sgh-text-3); margin-bottom: var(--sgh-sp-2); font-weight: 600;
}
.seg { display: flex; gap: var(--sgh-sp-2); }
.seg button {
  flex: 1; min-height: 40px; padding: 0 var(--sgh-sp-2);
  background: var(--sgh-bg-1);
  border: 1px solid var(--sgh-border-1); border-radius: var(--sgh-r-md);
  color: var(--sgh-text-2); font-family: inherit; font-size: var(--sgh-fs-small); font-weight: 600;
  cursor: pointer; white-space: nowrap;
  transition: background var(--sgh-t-fast), border-color var(--sgh-t-fast), color var(--sgh-t-fast);
}
.seg button:hover { color: var(--sgh-text-1); border-color: var(--sgh-border-2); }
.seg button.on {
  color: var(--sgh-brand-ink); background: var(--game-accent); border-color: transparent;
}
@media (pointer: coarse) { .seg button { min-height: var(--sgh-touch); } }

.modal-actions {
  display: flex; gap: var(--sgh-sp-3); margin-top: var(--sgh-sp-6);
}
.modal-actions .sgh-btn { flex: 1; }

/* ── 결과 모달 (작은 카드형) ───────────── */
.sgh-overlay[hidden] { display: none; }
.result-card { max-width: 360px; text-align: center; }
.result-card .modal-actions { margin-top: var(--sgh-sp-5); }
.result-card p { color: var(--sgh-text-2); font-size: var(--sgh-fs-body); margin: 0; }
.result-stone {
  width: 56px; height: 56px; border-radius: 50%; margin: 0 auto var(--sgh-sp-4);
  box-shadow: inset -5px -6px 10px rgba(0,0,0,.5), 0 4px 14px rgba(0,0,0,.5),
              0 0 0 3px var(--game-accent-soft);
}
.result-stone.black { background: radial-gradient(circle at 34% 30%, #5a616d, var(--game-stone-black) 62%, #05070a); }
.result-stone.white { background: radial-gradient(circle at 34% 30%, #ffffff, var(--game-stone-white) 60%, #c4c6cb); }
.result-stone.draw  { background: linear-gradient(90deg, var(--game-stone-black) 50%, var(--game-stone-white) 50%); }
.result-card .sgh-modal__title { text-align: center; margin-bottom: var(--sgh-sp-2); }

/* ── 오목 교실 ────────────────────────── */
.view-school.active { display: block; }
.school-inner {
  max-width: 820px; margin: 0 auto;
  padding: var(--sgh-sp-6) var(--sgh-sp-5) var(--sgh-sp-8);
}
.school-head { text-align: center; margin-bottom: var(--sgh-sp-7); }
.school-head h2 {
  font-size: var(--sgh-fs-display); font-weight: 800;
  letter-spacing: 0.04em; margin: 0 0 var(--sgh-sp-2);
}
.school-head p { color: var(--sgh-text-2); font-size: var(--sgh-fs-body); margin: 0; }

.school-nav { display: flex; justify-content: center; gap: var(--sgh-sp-2); margin-top: var(--sgh-sp-5); flex-wrap: wrap; }
.school-nav button {
  min-height: 40px; padding: 0 var(--sgh-sp-5); border-radius: var(--sgh-r-pill); cursor: pointer;
  background: var(--sgh-bg-1); border: 1px solid var(--sgh-border-1);
  color: var(--sgh-text-2); font-family: inherit; font-size: var(--sgh-fs-small); font-weight: 600;
  letter-spacing: 0.04em; transition: background var(--sgh-t-fast), color var(--sgh-t-fast), border-color var(--sgh-t-fast);
}
.school-nav button:hover { color: var(--sgh-text-1); }
.school-nav button.on { color: var(--sgh-brand-ink); border-color: transparent; background: var(--game-accent); }
@media (pointer: coarse) { .school-nav button { min-height: var(--sgh-touch); } }

.lesson {
  background: var(--sgh-bg-1);
  border: 1px solid var(--sgh-border-1); border-radius: var(--sgh-r-lg);
  padding: var(--sgh-sp-6); margin-bottom: var(--sgh-sp-4);
}
.lesson h3 {
  font-size: var(--sgh-fs-h2); font-weight: 700;
  letter-spacing: 0.02em; margin: 0 0 var(--sgh-sp-3); color: var(--sgh-text-1);
}
.lesson p { font-size: var(--sgh-fs-body); line-height: 1.85; color: var(--sgh-text-2); margin: 0 0 var(--sgh-sp-2); }
.lesson ul { margin: var(--sgh-sp-2) 0; padding: 0; list-style: none; }
.lesson li {
  font-size: var(--sgh-fs-body); line-height: 1.8; color: var(--sgh-text-2);
  padding-left: 18px; position: relative;
}
.lesson li::before { content: ''; position: absolute; left: 2px; top: 12px; width: 5px; height: 5px; border-radius: 50%; background: var(--game-accent); }
.lesson li b { color: var(--sgh-text-1); }
.lesson .diagram { display: flex; gap: var(--sgh-sp-5); flex-wrap: wrap; margin: var(--sgh-sp-4) 0 var(--sgh-sp-1); }
.lesson .diagram figure { text-align: center; margin: 0; }
.lesson .diagram canvas { border-radius: var(--sgh-r-sm); box-shadow: var(--sgh-shadow-1); }
.lesson .diagram figcaption { margin-top: var(--sgh-sp-2); font-size: var(--sgh-fs-caption); color: var(--sgh-text-3); }

.back-to-game { display: flex; margin: var(--sgh-sp-6) auto 0; }

/* ── 푸터 (간결형) ────────────────────── */
.footer-seo {
  max-width: 640px; margin: 0 auto var(--sgh-sp-3);
  font-size: var(--sgh-fs-small); color: var(--sgh-text-3);
}
.footer-seo summary { cursor: pointer; color: var(--sgh-text-2); }
.footer-seo p { margin: var(--sgh-sp-3) 0 0; line-height: 1.8; text-align: left; }
.footer-copy { margin: 0; }

/* ── 반응형 ──────────────────────────── */
@media (max-width: 639px) {
  .view-game.active { padding: var(--sgh-sp-4) var(--sgh-sp-3) var(--sgh-sp-6); }
  .board-frame { padding: 8px; }
  #board { width: 100%; }
  .status-bar { max-width: 100%; }
  .school-inner { padding: var(--sgh-sp-5) var(--sgh-sp-4) var(--sgh-sp-7); }
  .lesson { padding: var(--sgh-sp-5); }
  .lesson .diagram { justify-content: center; }
  .sgh-footer { padding-bottom: calc(var(--sgh-sp-6) + env(safe-area-inset-bottom)); }
}