/* ==========================================================================
   다섯 글자 영단어 맞히기 — 툴 전용 스타일

   🔴 색은 css/common.css 의 토큰만 씁니다. 세 상태의 배색은 사이트 팔레트를 그대로
      쓰고, 색만으로 구분하지 않도록 칸마다 기호(● ▲ ✕)를 함께 찍습니다.
        자리까지 맞음 = 기본 강조(파랑) + ●
        들어 있음     = 보조 강조(체리) + ▲
        없음         = 보조 본문(회청) + ✕
      세 배경 모두 글자색 --color-on-primary 와 AA 를 넘깁니다(밝을 때 5.09 / 6.56 / 6.22,
      어두울 때 7.89 / 7.26 / 8.77).
   🔴 style="..." 속성은 CSP 로 막혀 있어 막대 길이도 data-fill 로 받습니다.
   ========================================================================== */

/* --- 상단 정보 ----------------------------------------------------------- */
.game-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.game-meta__date {
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
  color: var(--color-text);
}

.game-meta__tries {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.game-loading {
  margin: 0 0 var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.game-status {
  margin: 0 0 var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  min-height: 1.7em;
}

/* --- 격자 ---------------------------------------------------------------- */
.guess-grid {
  display: grid;
  gap: var(--space-2);
  width: min(100%, 340px);
  margin: 0 auto var(--space-5);
}

.guess-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-2);
}

.tile {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-sm);
  border: 2px solid var(--color-border-strong);
  background: var(--color-surface);
  color: var(--color-text);
}

.tile__letter {
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  line-height: 1;
  text-transform: uppercase;
}

.tile__mark {
  position: absolute;
  right: 4px;
  bottom: 2px;
  font-size: var(--text-2xs);
  line-height: 1;
}

.tile[data-state="typed"] {
  border-color: var(--color-primary);
}

.tile[data-state="hit"] {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-on-primary);
}

.tile[data-state="near"] {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-on-primary);
}

.tile[data-state="miss"] {
  background: var(--color-text-muted);
  border-color: var(--color-text-muted);
  color: var(--color-on-primary);
}

/* --- 범례 ---------------------------------------------------------------- */
.legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: center;
  margin: 0 0 var(--space-5);
  padding: 0;
  list-style: none;
}

.legend li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.legend__chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: var(--radius-sm);
  font-size: var(--text-2xs);
  color: var(--color-on-primary);
}

.legend__chip[data-state="hit"] { background: var(--color-primary); }
.legend__chip[data-state="near"] { background: var(--color-accent); }
.legend__chip[data-state="miss"] { background: var(--color-text-muted); }

/* --- 자판 ---------------------------------------------------------------
   알파벳 순서 6열입니다. QWERTY 로 촘촘히 깔면 375px 화면에서 한 칸이 30px 아래로
   내려가 터치 최소 크기(44px)를 못 지킵니다. 6열이면 가장 좁은 화면에서도
   한 칸이 44px 을 넘고, 상표가 있는 게임의 자판 모양과도 겹치지 않습니다.
   (7열은 375px 에서 38px 이 나와 실측 후 6열로 내렸습니다.)
   ------------------------------------------------------------------------ */
.letter-pad {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--space-1);
  width: min(100%, 460px);
  margin: 0 auto var(--space-3);
}

.pad-key {
  min-height: 48px;
  padding: 0;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border-strong);
  background: var(--color-surface);
  color: var(--color-text);
  font-family: inherit;
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  cursor: pointer;
}

.pad-key:hover { border-color: var(--color-primary); }

.pad-key[data-state="hit"] {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-on-primary);
}

.pad-key[data-state="near"] {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-on-primary);
}

.pad-key[data-state="miss"] {
  background: var(--color-text-muted);
  border-color: var(--color-text-muted);
  color: var(--color-on-primary);
}

.pad-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
  width: min(100%, 460px);
  margin: 0 auto var(--space-4);
}

.lenient-field {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  width: min(100%, 460px);
  margin: 0 auto var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.lenient-field input {
  width: 22px;
  height: 22px;
  margin: 2px 0 0;
  flex: 0 0 auto;
}

/* --- 결과 ---------------------------------------------------------------- */
.answer-card {
  display: grid;
  gap: var(--space-2);
  margin: var(--space-4) 0;
  padding: var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-surface-soft);
}

.answer-card__word {
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  letter-spacing: 0.08em;
  color: var(--color-text);
}

.answer-card dt {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.answer-card dd {
  margin: 0 0 var(--space-2);
  font-size: var(--text-base);
  color: var(--color-text);
}

.answer-card dd:last-child { margin-bottom: 0; }

.answer-card__example { font-style: italic; }

.share-box {
  width: 100%;
  min-height: 148px;
  margin-top: var(--space-3);
  padding: var(--space-3);
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border-strong);
  background: var(--color-surface);
  color: var(--color-text);
  font-family: inherit;
  font-size: var(--text-sm);
  line-height: 1.6;
  resize: vertical;
}

.result-next {
  margin: var(--space-2) 0 0;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

/* --- 기록 ---------------------------------------------------------------- */
.stat-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

.stat-row .stat { text-align: center; }

.dist-list {
  display: grid;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.dist-row {
  display: grid;
  grid-template-columns: 3.2em 1fr 2.4em;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.dist-row__track {
  display: block;
  height: 14px;
  border-radius: var(--radius-pill);
  background: var(--color-surface-soft);
  overflow: hidden;
}

.dist-row__bar {
  display: block;
  height: 100%;
  border-radius: var(--radius-pill);
  background: var(--color-primary);
  width: 0;
}

/* CSP 가 style 속성을 막아 폭을 10단계 data-* 로 받습니다. */
.dist-row__bar[data-fill="0"] { width: 0; }
.dist-row__bar[data-fill="1"] { width: 10%; }
.dist-row__bar[data-fill="2"] { width: 20%; }
.dist-row__bar[data-fill="3"] { width: 30%; }
.dist-row__bar[data-fill="4"] { width: 40%; }
.dist-row__bar[data-fill="5"] { width: 50%; }
.dist-row__bar[data-fill="6"] { width: 60%; }
.dist-row__bar[data-fill="7"] { width: 70%; }
.dist-row__bar[data-fill="8"] { width: 80%; }
.dist-row__bar[data-fill="9"] { width: 90%; }
.dist-row__bar[data-fill="10"] { width: 100%; }

.dist-row__count { text-align: right; }

.stats-note {
  margin: 0;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

/* --- 규칙 접이식 --------------------------------------------------------- */
.rules-details {
  margin-top: var(--space-5);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
}

.rules-details summary {
  cursor: pointer;
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
  color: var(--color-text);
}

.rules-details ul {
  margin: var(--space-3) 0 0;
  padding-left: 1.2em;
}

.rules-details li {
  margin-bottom: var(--space-2);
  font-size: var(--text-base);
  line-height: 1.7;
  color: var(--color-text);
}

/* --- 출처 고지 ----------------------------------------------------------- */
.source-note {
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
  font-size: var(--text-xs);
  line-height: 1.7;
  color: var(--color-text-muted);
}

.source-note p { margin: 0 0 var(--space-2); }
.source-note p:last-child { margin-bottom: 0; }

/* --- 좁은 화면 ----------------------------------------------------------- */
@media (max-width: 760px) {
  .stat-row {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
  }
  .tile__letter { font-size: var(--text-lg); }
}

/* --- 애니메이션을 줄이는 설정 ------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .dist-row__bar { transition: none; }
}