/* ============================================================
   kodle.css — 개념 꼬들 (자모 퍼즐 레이스)
   교사 대시보드는 bal.css의 bl-* 골격을 재사용하고, 여기엔 kd-* 전용만.
   ============================================================ */

/* ── 생성 폼 ── */
.kd-cat-row { display: flex; flex-wrap: wrap; gap: 8px; }
.kd-cat-chip {
  padding: 8px 14px; border-radius: 999px; border: 1.5px solid var(--line, #d8cbb8);
  background: var(--card, #fff); font-weight: 700; cursor: pointer; font-size: 14px;
}
.kd-cat-chip.sel { background: var(--ink, #2b2118); color: #fff; border-color: var(--ink, #2b2118); }

/* ── 생성 폼: 커스텀 단어 검증 리스트 ── */
.kd-custom-list { margin-top: 6px; display: flex; flex-direction: column; gap: 3px; }
.kd-custom-row { font-size: 13px; display: flex; gap: 8px; align-items: baseline; }
.kd-custom-row.bad { opacity: .8; }
.kd-custom-ok { color: #2e7d43; font-size: 12px; letter-spacing: .06em; }
.kd-custom-err { color: #b3402e; font-size: 12px; }

/* ── 교사: 라운드 지휘 ── */
.kd-next { border: 1.5px dashed var(--line, #d8cbb8); border-radius: 12px; padding: 10px 12px; }
.kd-next-word { font-size: 22px; font-weight: 900; }
.kd-next-len { font-size: 12px; font-weight: 700; opacity: .65; margin-left: 6px; }
.kd-next-hint { font-size: 13px; opacity: .8; margin-top: 4px; line-height: 1.45; }
.kd-remain-note { font-size: 12px; opacity: .6; margin-top: 6px; }
.kd-heat-row { display: flex; gap: 10px; align-items: baseline; font-size: 13px; padding: 5px 0; border-bottom: 1px dashed var(--line, #e5dccc); }
.kd-heat-row b { font-size: 15px; }
.kd-heat-row span { opacity: .7; }
.bl-cta-sm.no { background: #b3402e; color: #fff; }

/* ── 교사: 프로젝션 ── */
.kd-proj { gap: 10px; }
.kd-proj-round { font-size: 20px; font-weight: 900; letter-spacing: .12em; opacity: .7; }
.kd-proj-timer { font-size: 88px; font-weight: 900; font-variant-numeric: tabular-nums; line-height: 1; }
.kd-proj-timer.hot { color: #c9402c; animation: kdPulse .8s infinite; }
@keyframes kdPulse { 50% { transform: scale(1.06); } }
.kd-proj-sub { font-size: 16px; opacity: .8; }
.kd-proj-dim { opacity: .55; font-size: 14px; }
.kd-proj-answer { font-size: 56px; font-weight: 900; margin: 6px 0; }
.kd-proj-hint { font-size: 16px; opacity: .85; max-width: 560px; margin: 0 auto 8px; line-height: 1.5; }
.kd-solver-stack { display: flex; flex-direction: column; gap: 6px; max-height: 40vh; overflow-y: auto; align-items: center; }
.kd-solver { font-size: 18px; animation: kdDrop .35s ease-out; }
.kd-solver span { opacity: .6; font-size: 14px; }
@keyframes kdDrop { from { transform: translateY(-8px); opacity: 0; } }
.kd-board { margin-top: 14px; min-width: 300px; }
.kd-board-title { font-weight: 900; margin-bottom: 6px; }
.kd-board-row { display: flex; gap: 10px; align-items: baseline; padding: 4px 8px; border-radius: 8px; font-size: 15px; }
.kd-board-row.top { background: rgba(255, 210, 90, .18); font-size: 17px; }
.kd-board-row b { width: 24px; text-align: right; }
.kd-board-row span { flex: 1; text-align: left; }
.kd-qr-sheet { text-align: center; padding: 28px; }
.kd-lastround { width: 100%; }
.kd-rank-list { display: flex; flex-direction: column; gap: 4px; align-items: center; margin-top: 8px; }
.kd-rank-row { font-size: 16px; display: flex; gap: 8px; align-items: baseline; padding: 3px 10px; border-radius: 8px; }
.kd-rank-row b { min-width: 34px; text-align: right; }
.kd-rank-row span { opacity: .65; font-size: 13px; }
.kd-rank-row.me { background: rgba(80, 150, 90, .16); font-weight: 800; }
.kd-rank-row.me em { font-style: normal; font-size: 12px; color: #2e7d43; }
.kd-rank-part { font-size: 13px; opacity: .75; margin-top: 6px; }

/* ── 모둠전 ── */
.kd-group-banner {
  background: rgba(120, 160, 220, .12); border-radius: 12px; padding: 10px 12px;
  font-size: 13px; line-height: 1.5; margin-bottom: 10px;
}
.kd-writer-badge { font-size: 13px; }
.kd-group-row { padding: 6px 0; border-bottom: 1px dashed var(--line, #e5dccc); font-size: 13px; }
.kd-group-members { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.kd-member-chip {
  padding: 3px 9px; border-radius: 999px; border: 1px solid var(--line, #d8cbb8);
  background: var(--card, #fff); font-size: 12px; cursor: pointer;
}
.kd-member-chip.absent { opacity: .45; text-decoration: line-through; }

/* ── 학생: 보드 ── */
.kd-stage { display: flex; flex-direction: column; min-height: 100dvh; }
.kd-body { flex: 1; overflow-y: auto; padding: 14px; max-width: 560px; margin: 0 auto; width: 100%; box-sizing: border-box; }
.kd-round { background: var(--card, #fff); border: 1.5px solid var(--line, #e2d7c3); border-radius: 14px; padding: 12px; }
.kd-round-head { display: flex; justify-content: space-between; align-items: baseline; }
.kd-round-no { font-weight: 900; letter-spacing: .08em; font-size: 14px; opacity: .75; }
.kd-timer { font-weight: 900; font-size: 22px; font-variant-numeric: tabular-nums; }
.kd-timer.hot { color: #c9402c; animation: kdPulse .8s infinite; }
.kd-live { font-size: 12px; opacity: .7; margin: 3px 0 7px; }
.kd-color-guide { display: flex; flex-wrap: wrap; gap: 5px 10px; align-items: center; margin: 0 0 9px; padding: 7px 9px; border-radius: 9px; background: #f7f3ec; color: var(--slate, #6f665b); font-size: 10.5px; line-height: 1.25; }
.kd-color-guide span { display: inline-flex; align-items: center; gap: 3px; }
.kd-color-guide i { width: 10px; height: 10px; flex: 0 0 10px; border-radius: 3px; display: inline-block; }
.kd-color-guide i.g { background: #4caf70; }
.kd-color-guide i.y { background: #e6b93f; }
.kd-color-guide i.x { background: #9aa0a6; }
.kd-color-guide b { color: var(--ink, #2b2118); }

.kd-grid { display: flex; flex-direction: column; gap: 4px; margin-bottom: 9px; }
.kd-row { display: grid; grid-template-columns: repeat(var(--kd-cols, 6), 1fr); gap: 4px; }
.kd-row.cur .kd-cell { border-style: dashed; }
.kd-cell {
  aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--line, #d8cbb8); border-radius: 7px;
  font-size: clamp(15px, 5vw, 23px); font-weight: 900; background: var(--card, #fff);
  color: var(--ink, #2b2118);
}
.kd-cell.fill { border-color: var(--ink, #8a7a63); }
.kd-cell.m-g { background: #4caf70; border-color: #4caf70; color: #fff; }
.kd-cell.m-y { background: #e6b93f; border-color: #e6b93f; color: #fff; }
.kd-cell.m-x { background: #9aa0a6; border-color: #9aa0a6; color: #fff; opacity: .85; }

.kd-input-row { display: flex; gap: 6px; }
.kd-input {
  flex: 1; font-size: 22px; font-weight: 800; text-align: center; letter-spacing: .2em;
  padding: 8px 10px; border: 1.5px solid var(--line, #d8cbb8); border-radius: 10px; min-width: 0;
}
.kd-input:focus { outline: none; border-color: var(--ink, #2b2118); }
.kd-input-row .btn { flex: 0 0 auto; padding: 9px 12px; }

/* 학생: 자모 키보드와 판정 범례 */
.kd-keyboard { display: flex; flex-direction: column; gap: 4px; margin: 8px auto 0; max-width: 430px; }
.kd-key-row { display: flex; gap: 4px; justify-content: center; }
.kd-key { flex: 1; min-width: 0; padding: 6px 3px; border-radius: 6px; border: 1px solid var(--line, #d8cbb8); background: #f4efe7; color: var(--ink, #2b2118); text-align: center; font-size: 13px; font-weight: 800; }
.kd-key.m-g { background: #4caf70; border-color: #4caf70; color: #fff; }
.kd-key.m-y { background: #e6b93f; border-color: #e6b93f; color: #fff; }
.kd-key.m-x { background: #9aa0a6; border-color: #9aa0a6; color: #fff; opacity: .85; }
.kd-answer-toggle { margin-top: 7px; }
.kd-attendance-summary { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 12px; }
.kd-attendance-summary > div { display: flex; justify-content: space-between; align-items: baseline; padding: 7px 9px; border-radius: 8px; background: rgba(255,255,255,.08); font-size: 12px; }
.kd-attendance-summary b { font-size: 16px; }
.kd-attendance-summary b.warn { color: #e6b93f; }
.kd-attendance-summary b.ok { color: #70c98a; }
.kd-attendance-list { margin-top: 12px; }
.kd-attendance-heading { font-size: 12px; font-weight: 900; margin-bottom: 6px; }
.kd-attendance-heading.missing { margin-top: 12px; }
.kd-name-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.kd-name-chip { padding: 4px 7px; border-radius: 999px; font-size: 11px; line-height: 1.2; }
.kd-name-chip.in { color: #dff6e5; background: rgba(76,175,112,.28); }
.kd-name-chip.out { color: #f1dfbd; background: rgba(230,185,63,.18); }
.kd-attendance-empty { color: rgba(255,255,255,.55); font-size: 11px; }

.kd-result { text-align: center; padding: 8px 0; }
.kd-result-title { font-size: 20px; font-weight: 900; }
.kd-result-title span { font-size: 14px; font-weight: 700; opacity: .6; }
.kd-answer { font-size: 30px; }
.kd-hint-card {
  background: rgba(120, 160, 220, .12); border-radius: 12px; padding: 12px 14px;
  font-size: 15px; line-height: 1.55; margin: 10px 0; text-align: left;
}
.kd-solved .kd-result-title { color: #2e7d43; }

/* ── 학생: 마감 ── */
.kd-final-score { text-align: center; padding: 8px 0 4px; }
.kd-final-kicker { font-size: 13px; letter-spacing: .1em; opacity: .6; font-weight: 800; }
.kd-final-num { font-size: 54px; font-weight: 900; line-height: 1.1; }
.kd-final-num span { font-size: 20px; margin-left: 2px; }
.kd-final-rank { font-size: 14px; opacity: .7; }
.kd-word-card {
  display: flex; gap: 10px; align-items: baseline; padding: 10px 12px; margin-top: 8px;
  border: 1.5px solid var(--line, #e2d7c3); border-radius: 12px; text-align: left;
}
.kd-word-card b { font-size: 17px; white-space: nowrap; }
.kd-word-card span { font-size: 13px; opacity: .8; line-height: 1.5; }

/* 모바일 — 셀이 좁아지면 폰트를 함께 줄인다(8칸 대응) */
@media (max-width: 420px) {
  .kd-round { padding: 10px; }
  .kd-cell { border-radius: 6px; }
  .kd-body { padding: 10px; }
  .kd-round-no { font-size: 12px; }
  .kd-timer { font-size: 20px; }
  .kd-color-guide { gap: 4px 8px; font-size: 10px; }
  .kd-color-guide span { flex: 1 1 45%; }
  .kd-input { font-size: 18px; letter-spacing: .12em; padding: 8px 6px; }
  .kd-input-row .btn { padding: 8px 9px; font-size: 12px; }
  .kd-key { padding: 5px 2px; font-size: 12px; }
}