/* 맞혀라! 단어 거리 — 스트리머(/wordgap)·시청자(/viewer-wordgap/:cid)·오늘의 단어(/wordgap-daily) 화면 공용 (2026-11-01 — 화면마다 따로 있던 인라인 규칙을 모음)
 * 온도 막대·가까운 순 표는 public/js/wordgap-page.js가 넣는다. 방송 화면(OBS)은 obs-common.css 토큰이라 이 파일을 쓰지 않는다 */

.wg-cap { font-size: 0.78rem; color: var(--text-dim); }
.wg-chip { background: var(--bg-deep); border: 1px solid var(--border-dim); border-radius: 14px; padding: 3px 10px; font-size: 0.8rem; color: var(--text-sub); }
.wg-chip.is-topic { border-color: rgba(240, 163, 60, 0.55); color: var(--text-main); }
.wg-hints { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-top: 10px; font-size: 0.82rem; color: var(--text-dim); }
.wg-end { border: 1px solid rgba(243, 201, 77, 0.45); background: rgba(243, 201, 77, 0.07); border-radius: var(--radius); padding: 12px 14px; margin: 12px 0; }
.wg-end-word { font-size: 1.4rem; font-weight: 800; color: #f3c94d; overflow-wrap: anywhere; }
.wg-end-who { font-size: 0.86rem; color: var(--text-sub); margin-top: 2px; }
.wg-near { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-top: 8px; }
.wg-msg { font-size: 0.86rem; color: var(--text-sub); min-height: 1.4em; margin-top: 8px; font-variant-numeric: tabular-nums; }
.wg-msg.is-bad { color: var(--warn); }
.wg-msg b { color: var(--text-main); }
.wg-credit { font-size: 0.74rem; color: var(--text-dim); margin: 16px 0 6px; text-align: center; }
.wg-field { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 0; }
.wg-note { font-size: 0.78rem; color: var(--text-dim); line-height: 1.6; margin-top: 8px; }

/* 단어 입력 줄 (시청자·오늘의 단어 .wg-form / 스트리머 .wg-guess) */
.wg-form, .wg-guess { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.wg-form input { flex: 1 1 200px; min-width: 0; max-width: 360px; font-size: 1rem; padding: 10px 12px; }
.wg-form .btn { padding: 10px 20px; }
.wg-guess { margin-top: 10px; }
.wg-guess input { flex: 1 1 180px; min-width: 0; max-width: 280px; }
.wg-login { font-size: 0.86rem; color: var(--text-sub); line-height: 1.7; }
.wg-login .btn { margin-top: 8px; }

/* 두 칸 판 (가까운 순 | 내 추측·최근 추측) */
.wg-cols { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 14px; align-items: start; margin-bottom: 14px; }
.wg-cols > .panel { margin-bottom: 0; }

/* 스트리머 화면 — 판 시작 줄은 맨 위 진행 판 카드 첫 줄 (2026-11-01 '열고 안 여는' 문제: 시작 단추를 화면 첫 줄로) */
.wg-head { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; margin-bottom: 12px; }
.wg-head .wg-sub { font-size: 0.8rem; color: var(--text-dim); }
.wg-start { display: flex; gap: 10px 12px; flex-wrap: wrap; align-items: flex-end; padding: 14px 16px; background: var(--bg-deep); border: 1px solid var(--border-strong); border-radius: var(--radius); }
.wg-start .wg-field { flex-direction: column; align-items: flex-start; gap: 4px; }
.wg-start select { min-width: 0; }
.wg-start .wg-go { margin-left: auto; padding: 11px 26px; font-size: 1rem; font-weight: 800; }
.wg-start-lead { flex: 1 0 100%; font-size: 0.88rem; color: var(--text-sub); line-height: 1.6; margin: 0; }
.wg-start-lead b { color: var(--text-main); }
.wg-btns { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 12px 0 4px; }
.wg-board { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 14px; margin-top: 14px; }
.wg-board-title { font-size: 0.84rem; font-weight: 700; margin-bottom: 6px; }
.wg-board-title span { font-weight: 400; color: var(--text-dim); font-size: 0.76rem; }
.wg-recent { list-style: none; margin: 0; padding: 0; }
.wg-recent li { display: flex; align-items: baseline; gap: 6px 8px; flex-wrap: wrap; padding: 6px 0; border-bottom: 1px solid var(--bg-elev); font-size: 0.84rem; font-variant-numeric: tabular-nums; }
.wg-recent li:last-child { border-bottom: none; }
.wg-recent .who { color: var(--text-dim); font-size: 0.78rem; min-width: 0; overflow-wrap: anywhere; }
.wg-recent b { color: var(--text-main); overflow-wrap: anywhere; }
.wg-recent .r { margin-left: auto; font-weight: 700; white-space: nowrap; }
.wg-howto summary { cursor: pointer; font-weight: 700; color: var(--text-main); }
.wg-howto[open] summary { margin-bottom: 8px; }

/* 기록 표 (스트리머 '지난 판 기록' · 시청자 '지난 판'·'채널 순위' · 오늘의 단어 순위) */
.wg-hist { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.wg-hist th { font-size: 0.76rem; color: var(--text-dim); text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--border-dim); white-space: nowrap; }
.wg-hist td { font-size: 0.84rem; color: var(--text-sub); padding: 8px 10px; border-bottom: 1px solid var(--bg-input); overflow-wrap: anywhere; }
.wg-hist .ans { font-weight: 700; color: var(--text-main); }
.wg-hist .num { text-align: right; white-space: nowrap; }
.wg-hist tr.is-me td { background: rgba(240, 163, 60, 0.08); }

/* 내 기록 숫자 줄 */
.wg-me { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(120px, 100%), 1fr)); gap: 8px; margin-bottom: 10px; }

@media (max-width: 1024px) {
    .wg-cols, .wg-board { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
    .wg-form input { max-width: none; flex-basis: 100%; }
    .wg-form .btn { flex: 1 1 auto; }
    .wg-guess input { max-width: none; }
    .wg-start .wg-field { flex: 1 1 40%; }
    .wg-start .wg-field select { width: 100%; }
    .wg-start .wg-go, .wg-btns .btn { flex: 1 1 100%; margin-left: 0; }
    .wg-hist thead { display: none; }
    .wg-hist, .wg-hist tbody { display: block; width: 100%; }
    .wg-hist tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 10px; padding: 10px 2px; border-bottom: 1px solid var(--border-dim); }
    .wg-hist td { display: block; padding: 0; border: none; min-width: 0; }
    .wg-hist .h-when { grid-column: 1; grid-row: 1; font-size: 0.78rem; color: var(--text-dim); }
    .wg-hist .h-lv { grid-column: 2; grid-row: 1; text-align: right; font-size: 0.78rem; color: var(--text-dim); }
    .wg-hist .h-full { grid-column: 1 / -1; }
    .wg-hist .h-sub { font-size: 0.8rem; color: var(--text-dim); }
}
@media (min-width: 2200px) {
    .wg-end-word { font-size: 1.7rem; }
}