/* ============================================================
   단어 기억 게임 전용 스타일
   - 방향: 밝고 순한 느낌, 고대비, 큰 활자 (노년층 사용자 기준)
   - 단어 카드는 낱말 카드처럼 큼직하게. 선택 상태는 색에만
     기대지 않고 체크 표시와 테두리 두께로도 구분한다.
   ============================================================ */

:root {
  --wm-turn-watch-bg: #f5e3c8;  --wm-turn-watch-fg: #7a5410;
  --wm-turn-input-bg: #d9edda;  --wm-turn-input-fg: #1d5f2a;
  --wm-frame-watch: #e3b463;
  --wm-frame-input: #4da362;
  /* 결과 화면 3색: 맞춤(초록) / 놓침(호박색) / 잘못 고름(붉은색) */
  --wm-good: #2e7d43;  --wm-good-bg: #e2f0e3;
  --wm-miss: #8a6410;  --wm-miss-bg: #f4e9cf;
  --wm-wrong: #b03a2e; --wm-wrong-bg: #f4ded9;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --wm-turn-watch-bg: #4a3a17;  --wm-turn-watch-fg: #f2d9a4;
    --wm-turn-input-bg: #1e3d24;  --wm-turn-input-fg: #b9e5c0;
    --wm-frame-watch: #a3782c;
    --wm-frame-input: #4d9760;
    --wm-good: #7fc890;  --wm-good-bg: #21361f;
    --wm-miss: #e0bc6a;  --wm-miss-bg: #3d3116;
    --wm-wrong: #e08a7e; --wm-wrong-bg: #402019;
  }
}
:root[data-theme="dark"] {
  --wm-turn-watch-bg: #4a3a17;  --wm-turn-watch-fg: #f2d9a4;
  --wm-turn-input-bg: #1e3d24;  --wm-turn-input-fg: #b9e5c0;
  --wm-frame-watch: #a3782c;
  --wm-frame-input: #4d9760;
  --wm-good: #7fc890;  --wm-good-bg: #21361f;
  --wm-miss: #e0bc6a;  --wm-miss-bg: #3d3116;
  --wm-wrong: #e08a7e; --wm-wrong-bg: #402019;
}

/* ---- 도입부 ---- */
.tool-intro { padding: clamp(30px, 5vw, 56px) 0 clamp(18px, 3vw, 30px); }
.tool-intro h1 { margin: 0 0 var(--space-4); }
.tool-intro .lead {
  font-size: 1.08rem;
  line-height: 1.75;
  color: var(--color-text-sub);
  max-width: 52ch;
  margin: 0;
}
.tool-intro .lead strong { color: var(--color-text); }
.tool-intro .lead-note {
  margin: var(--space-3) 0 0;
  font-size: .88rem;
  color: var(--color-text-sub);
}

/* ---- 설정 줄 ---- */
.wm-controls {
  padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-4);
}
.wm-field { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.wm-lab { font-size: .95rem; font-weight: 700; color: var(--color-text-sub); }
.wm-chips { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.wm-chip {
  font: inherit;
  font-size: 1rem;
  cursor: pointer;
  touch-action: manipulation;
  padding: 10px 18px;
  border-radius: 999px;
  border: 1.5px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
}
.wm-chip small { font-size: .8em; opacity: .8; }
.wm-chip:hover { border-color: var(--color-primary); }
.wm-chip[aria-pressed="true"] {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
  font-weight: 700;
}
.wm-level-desc {
  margin: var(--space-3) 0 0;
  font-size: .95rem;
  color: var(--color-text-sub);
}

/* ---- 게임판 ---- */
.wm-stage { max-width: 680px; margin: 0 auto; }

.wm-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}
.wm-stat {
  font-size: 1.05rem;
  color: var(--color-text-sub);
  font-variant-numeric: tabular-nums;
  min-width: 84px;
}
.wm-stat:last-child { text-align: right; }
.wm-stat b { font-size: 1.25rem; color: var(--color-text); }

/* 지금이 외울 차례인지 고를 차례인지: 항상 보이는 큰 표시 */
.wm-turn {
  flex: 1;
  max-width: 220px;
  text-align: center;
  font-size: 1.15rem;
  font-weight: 700;
  padding: 10px 14px;
  border-radius: 999px;
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  color: var(--color-text-sub);
  transition: background .2s ease, color .2s ease;
}
.wm-turn[data-mode="watch"] {
  background: var(--wm-turn-watch-bg);
  border-color: transparent;
  color: var(--wm-turn-watch-fg);
}
.wm-turn[data-mode="input"] {
  background: var(--wm-turn-input-bg);
  border-color: transparent;
  color: var(--wm-turn-input-fg);
}

.wm-board {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 20px;
  box-shadow: var(--shadow-sm);
  padding: clamp(16px, 3.5vw, 28px);
  min-height: 340px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  transition: box-shadow .25s ease;
}
/* 게임판 테두리가 차례를 입는다: 외울 차례는 호박색, 고를 차례는 초록 */
.wm-board[data-phase="memo"] { box-shadow: 0 0 0 3px var(--wm-frame-watch); }
.wm-board[data-phase="pick"] { box-shadow: 0 0 0 3px var(--wm-frame-input); }

.wm-view { width: 100%; }

/* ---- 시작 화면 ---- */
.wm-view-start { text-align: center; padding: var(--space-6) 0; }
.wm-start-note {
  margin: 0 0 var(--space-5);
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.6;
  color: var(--color-text);
}
.wm-btn-big {
  font: inherit;
  font-size: 1.25rem;
  font-weight: 700;
  cursor: pointer;
  touch-action: manipulation;
  padding: 16px 40px;
  border-radius: 999px;
  border: 0;
  background: var(--color-primary);
  color: #fff;
  box-shadow: var(--shadow);
}
.wm-btn-big:hover:not(:disabled) { filter: brightness(1.06); }
.wm-btn-big:active:not(:disabled) { transform: scale(.97); }
.wm-btn-big:disabled { opacity: .4; cursor: default; box-shadow: none; }
.wm-actions { text-align: center; margin-top: var(--space-5); }

/* ---- 남은 시간 ---- */
.wm-timer-row {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}
.wm-timer {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-text-sub);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.wm-timer b {
  font-size: 1.7rem;
  color: var(--color-text);
  min-width: 2ch;
  display: inline-block;
  text-align: right;
}
.wm-timer.is-low b { color: var(--color-primary); }
.wm-timebar {
  flex: 1;
  height: 10px;
  border-radius: 999px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  overflow: hidden;
}
.wm-timebar i {
  display: block;
  height: 100%;
  width: 100%;
  border-radius: 999px;
  background: var(--wm-frame-watch);
  transition: width .15s linear;
}
.wm-timer.is-low + .wm-timebar i { background: var(--color-primary); }

/* ---- 단어 카드 ---- */
.wm-words {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(8px, 1.8vw, 12px);
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
.wm-word {
  background: var(--color-bg);
  border: 1.5px solid var(--color-border);
  border-radius: 12px;
  padding: 14px 10px;
  text-align: center;
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.3;
}
.wm-word .wm-mean {
  display: block;
  margin-top: 5px;
  font-size: .82rem;
  font-weight: 400;
  line-height: 1.45;
  color: var(--color-text-sub);
}

/* 고를 차례: 카드가 버튼이 된다. 목록이 길어서 한 단계 촘촘하게 */
.wm-words-pick { grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); }
.wm-pick {
  position: relative;
  font: inherit;
  font-size: 1.2rem;
  font-weight: 700;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  width: 100%;
  background: var(--color-bg);
  border: 1.5px solid var(--color-border);
  border-radius: 12px;
  padding: 16px 8px;
  color: var(--color-text);
  line-height: 1.3;
}
.wm-pick:hover { border-color: var(--color-primary); }
.wm-pick:focus-visible { outline: 3px solid var(--color-text); outline-offset: 2px; }
/* 선택 표시: 색(배경)과 함께 굵은 테두리 + 체크 표시로 이중 구분 */
.wm-pick[aria-pressed="true"] {
  border: 3px solid var(--color-primary);
  background: var(--color-primary-weak);
  padding: 14.5px 6.5px;
}
.wm-pick .wm-check {
  position: absolute;
  top: -9px;
  right: -9px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--color-primary);
  display: none;
  align-items: center;
  justify-content: center;
}
.wm-pick .wm-check::after {
  content: "";
  width: 11px;
  height: 6px;
  border-left: 2.5px solid #fff;
  border-bottom: 2.5px solid #fff;
  transform: rotate(-45deg) translate(1px, -1px);
}
.wm-pick[aria-pressed="true"] .wm-check { display: flex; }

.wm-pick-count {
  margin: 0 0 var(--space-4);
  text-align: center;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-text-sub);
}
.wm-pick-count b {
  font-size: 1.35rem;
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
}

/* ---- 결과 ---- */
.wm-res-label {
  margin: 0;
  text-align: center;
  font-size: 1.05rem;
  color: var(--color-text-sub);
}
.wm-res-score {
  margin: var(--space-1) 0 var(--space-2);
  text-align: center;
  font-family: var(--font-serif);
  font-size: 3.2rem;
  font-weight: 700;
  line-height: 1.15;
  color: var(--color-primary);
}
.wm-res-score .wm-res-of {
  font-family: var(--font-sans);
  font-size: 1.3rem;
  color: var(--color-text);
  margin-left: 6px;
}
.wm-res-best {
  margin: 0 0 var(--space-5);
  text-align: center;
  font-size: 1.05rem;
  color: var(--color-text-sub);
}
.wm-res-best .wm-new-record { color: var(--color-primary); font-weight: 700; }

.wm-res-groups { display: grid; gap: var(--space-4); }
.wm-res-group h3 {
  margin: 0 0 var(--space-2);
  font-size: .95rem;
  color: var(--color-text-sub);
}
.wm-res-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.wm-res-item {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 1.05rem;
  font-weight: 700;
  border: 1.5px solid transparent;
}
.wm-res-item .wm-ic {
  font-size: .85em;
  font-weight: 700;
}
.wm-res-item .wm-mean {
  font-size: .8rem;
  font-weight: 400;
  color: var(--color-text-sub);
}
.wm-res-item.is-hit   { background: var(--wm-good-bg);  color: var(--wm-good);  border-color: var(--wm-good); }
.wm-res-item.is-miss  { background: var(--wm-miss-bg);  color: var(--wm-miss);  border-color: var(--wm-miss); border-style: dashed; }
.wm-res-item.is-wrong { background: var(--wm-wrong-bg); color: var(--wm-wrong); border-color: var(--wm-wrong); }

/* ---- 안내 문구 ---- */
.wm-msg {
  min-height: 1.8em;
  margin: var(--space-3) 0 0;
  text-align: center;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-text);
}

/* ---- 본문 ---- */
.prose { max-width: 720px; margin: clamp(40px, 6vw, 64px) auto 0; }
.prose h2 { margin: 0 0 var(--space-3); }
.prose p { margin: 0 0 var(--space-3); color: var(--color-text); }
.prose ul { margin: 0; padding-left: 1.2em; }
.prose li { margin-bottom: var(--space-2); }

@media (prefers-reduced-motion: reduce) {
  .wm-turn, .wm-btn-big, .wm-timebar i { transition: none; }
}

@media (max-width: 480px) {
  .wm-stat { min-width: 64px; font-size: .95rem; }
  .wm-turn { font-size: 1.02rem; padding: 9px 10px; }
  .wm-words { grid-template-columns: repeat(2, 1fr); }
  .wm-words-pick { grid-template-columns: repeat(2, 1fr); }
  .wm-word { font-size: 1.2rem; }
  .wm-pick { font-size: 1.1rem; }
}