/* ============================================================
   baduk.css — 바둑 전용 스타일
   공통 크롬(nav/버튼/탭/패널/모바일/모달)은 css/chess.css 재사용.
   여기서는 SVG 바둑판(goban)과 바둑 고유 컴포넌트만 정의.
   ============================================================ */

:root {
  --goban-bg: #e3b668;        /* 나무색 */
  --goban-line: #3a2a14;
  --goban-star: #3a2a14;
  --stone-black: #16181d;
  --stone-white: #f4f6f8;
  --terr-black: rgba(20,22,27,0.55);
  --terr-white: rgba(244,246,248,0.72);
}
body.goban-slate { --goban-bg: #b8975a; }
body.goban-dark  { --goban-bg: #30374a; --goban-line: #cdd5e2; --goban-star: #cdd5e2; }

/* 승률 바: 아래=흑, 위=백 */
.eval-bar { background: var(--stone-white); }
.eval-fill { background: var(--stone-black); }
.eval-num.top { color: #1a2233; }
.eval-num.bottom { color: #e8edf4; }

/* ── GOBAN ── */
.goban {
  width: 100%; height: 100%; display: block;
  background: var(--goban-bg);
  border-radius: 8px; border: 1px solid var(--border);
  box-shadow: 0 18px 50px rgba(0,0,0,0.5);
  touch-action: none; user-select: none; -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none;
}
.goban text { font-family: 'Inter', sans-serif; pointer-events: none; }
.goban .hover-stone { opacity: .45; pointer-events: none; }

/* 보드 오버레이(종국/계가 등) — chess.css .board-overlay 재사용 */

/* ── 점수/포획 정보 행 ── */
.score-row {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-size: 12px; color: var(--muted); min-height: 24px;
}
.score-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border: 1px solid var(--border); border-radius: 8px;
  background: rgba(255,255,255,.02); font-weight: 600; color: var(--text);
}
.score-chip .dot { width: 11px; height: 11px; border-radius: 50%; display: inline-block; }
.score-chip .dot.b { background: var(--stone-black); border: 1px solid #000; }
.score-chip .dot.w { background: var(--stone-white); border: 1px solid #ccc; }

/* ── 분석: 승률/집차 요약 ── */
.wr-summary { display: flex; align-items: baseline; gap: 16px; margin-bottom: 14px; flex-wrap: wrap; }
.wr-big { font-size: 28px; font-weight: 700; font-variant-numeric: tabular-nums; }
.wr-big.b { color: var(--text); }
.wr-meta { display: flex; gap: 12px; font-size: 11px; color: var(--muted); flex-wrap: wrap; }

/* 추천수 목록 — chess .pv-list/.pv-item 재사용 가능하나 전용 표기 */
.cand-list { display: flex; flex-direction: column; gap: 6px; }
.cand-item {
  display: flex; gap: 10px; align-items: center;
  padding: 9px 11px; border: 1px solid var(--border); border-radius: 9px;
  background: rgba(255,255,255,.02); cursor: pointer; transition: border-color .15s, background .15s;
}
.cand-item:hover { border-color: rgba(99,102,241,.4); background: rgba(99,102,241,.06); }
.cand-rank { font-size: 11px; color: var(--muted); font-weight: 700; width: 14px; flex-shrink: 0; }
.cand-coord { font-size: 13px; font-weight: 700; color: var(--accent-light); min-width: 42px; }
.cand-wr { font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; min-width: 52px; }
.cand-bar { flex: 1; height: 6px; border-radius: 3px; background: var(--surface2); overflow: hidden; }
.cand-bar > i { display: block; height: 100%; background: var(--accent); }
.cand-visits { font-size: 10px; color: var(--muted); min-width: 44px; text-align: right; }

/* 세력 범례 */
.owner-legend { display: flex; align-items: center; gap: 10px; font-size: 11px; color: var(--muted); margin-top: 8px; }
.owner-legend .sw { width: 14px; height: 14px; border-radius: 3px; display: inline-block; vertical-align: middle; }

/* 계가 결과 패널 */
.score-result {
  border: 1px solid var(--border); border-radius: 10px; padding: 14px;
  background: rgba(255,255,255,.02); margin-bottom: 12px;
}
.score-result .big { font-size: 20px; font-weight: 700; margin-bottom: 6px; }
.score-result .rows { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; font-size: 13px; }
.score-result .rows .lbl { color: var(--muted); }

.disclaimer { font-size: 10.5px; color: var(--muted); line-height: 1.6; margin-top: 10px; opacity: .85; }
.empty-hint { font-size: 12px; color: var(--muted); text-align: center; padding: 24px 10px; line-height: 1.6; }

/* 수순(기보) */
.movelog { max-height: 260px; overflow-y: auto; border: 1px solid var(--border); border-radius: 10px; margin-bottom: 12px; }
.movelog table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.movelog td { padding: 5px 9px; border-bottom: 1px solid rgba(255,255,255,.04); }
.movelog .mn { color: var(--muted); width: 34px; font-variant-numeric: tabular-nums; }
.movelog .mv { cursor: pointer; border-radius: 5px; }
.movelog .mv:hover { background: rgba(255,255,255,.07); }
.movelog .mv.current { background: var(--accent); color: #fff; }
.movelog .stone-ic { display:inline-block; width:10px;height:10px;border-radius:50%;margin-right:6px;vertical-align:middle; }
.movelog .stone-ic.b { background: var(--stone-black); border:1px solid #000; }
.movelog .stone-ic.w { background: var(--stone-white); border:1px solid #bbb; }