* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: var(--bg-page);
  color: var(--text);
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

button {
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
  border-radius: 6px;
  transition: background 0.12s, border-color 0.12s;
}

/* 헤더 */

.hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 20px;
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border);
}

.hd__left { display: flex; align-items: center; gap: 20px; }

.hd__logo { color: var(--brand); font-weight: 500; letter-spacing: -0.01em; }

.hd__nav { display: flex; gap: 16px; }

.hd__nav span { color: var(--text-muted); font-size: 13px; }

.btn--brand {
  background: var(--brand);
  color: var(--on-brand);
  border: none;
  padding: 6px 14px;
  font-weight: 500;
}
.btn--brand:hover { background: var(--brand-hover); }

.btn--ghost {
  background: transparent;
  color: var(--brand);
  border: 1px solid var(--border);
  padding: 7px 12px;
}
.btn--ghost:hover { border-color: var(--border-strong); background: var(--bg-card); }
.btn--ghost[aria-pressed="true"] { border-color: var(--border-strong); background: var(--bg-elevated); }

/* 레이아웃 */

.wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 20px;
  max-width: 940px;
  margin: 0 auto;
  padding: 20px;
  align-items: start;
}

@media (max-width: 760px) {
  .wrap { grid-template-columns: minmax(0, 1fr); }
}

/* 보드 */

.board { width: 100%; height: auto; display: block; border-radius: var(--radius); touch-action: manipulation; }
.board:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }

.board__bg { fill: var(--board); stroke: var(--board-edge); stroke-width: 1; }
.board__line { stroke: var(--board-line); stroke-width: 1.6; stroke-linecap: round; }
.board__star { fill: var(--board-star); }

.stone--black { fill: var(--stone-black); }
.stone--white { fill: var(--stone-white); stroke: var(--stone-white-edge); stroke-width: 2; }

/* 마지막 착수는 색 슬롯을 쓰지 않고 돌 색을 반전시켜 표시 */
.last--onblack { fill: var(--stone-white); }
.last--onwhite { fill: var(--stone-white-edge); }

.forbid { stroke: var(--forbidden); stroke-width: 3.5; stroke-linecap: round; }
.winline { stroke: var(--success); stroke-width: 5; stroke-linecap: round; opacity: 0.9; }

.ghost { opacity: 0.32; pointer-events: none; }
.hit { fill: transparent; cursor: pointer; }

.cursor { fill: none; stroke: var(--brand); stroke-width: 2.5; opacity: 0; }
.board:focus-visible .cursor { opacity: 0.85; }

/* 사이드 패널 */

.panel { display: flex; flex-direction: column; gap: 8px; }

.pl {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  background: var(--bg-card);
  border-radius: var(--radius);
}
.pl[data-turn="true"] { background: var(--bg-elevated); box-shadow: inset 2px 0 0 var(--brand); }

.pl__who { display: flex; align-items: center; gap: 8px; min-width: 0; }
.pl__name { color: var(--brand); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl__dot { width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0; }
.pl__dot--black { background: var(--stone-black); border: 1px solid var(--stone-white-edge); }
.pl__dot--white { background: var(--stone-white); border: 1px solid var(--stone-white-edge); }
.pl__n { font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); }

.badge { font-size: 11px; padding: 1px 8px; border-radius: 20px; border: 1px solid; flex-shrink: 0; }
.badge--donor { color: var(--tier-donor); border-color: rgba(237, 167, 107, 0.4); }
.badge--sub { color: var(--tier-sub); border-color: rgba(243, 194, 74, 0.4); }

.card { background: var(--bg-card); border-radius: var(--radius); padding: 10px 12px; }
.card__t { font-size: 11px; color: var(--text-muted); margin-bottom: 6px; }

.moves { max-height: 220px; overflow-y: auto; font-family: var(--font-mono); font-size: 12px; }
.moves__row { display: flex; gap: 10px; padding: 1px 0; }
.moves__no { color: var(--text-dim); width: 20px; text-align: right; flex-shrink: 0; }
.moves__b { width: 34px; }
.moves__w { width: 34px; color: var(--text-muted); }
.moves:empty::after { content: "아직 둔 수가 없습니다"; font-family: var(--font); color: var(--text-dim); }

.status { padding: 10px 12px; border-radius: var(--radius); background: var(--bg-card); font-size: 13px; }
.status[data-kind="win"] { color: var(--success); }
.status[data-kind="foul"] { color: var(--danger); }

.row { display: flex; gap: 8px; }
.row > * { flex: 1; }

.opt { display: flex; align-items: center; justify-content: space-between; font-size: 12px; color: var(--text-muted); padding: 2px 0; }
.opt input { accent-color: var(--brand); }

.sel {
  background: var(--bg-elevated);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 3px 6px;
  font-family: inherit;
  font-size: 12px;
}