:root {
  --bg: #faf8ef;
  --fg: #3a3226;
  --muted: #8d8578;
  --line: #d6cec2;
  --tile-bg: #ffffff;
  --btn-bg: #8f7a66;
  --btn-fg: #f9f6f2;
  --key-bg: #e5ded3;
  --sheet-bg: #ffffff;

  /* 판정 색은 셋 다 중간 이상으로 어둡게 잡는다. 타일 글자가 흰색 하나로
     고정되므로 어느 색 위에서도 읽혀야 한다. */
  --correct: #5f9e57;
  --present: #c3a83c;
  --absent: #7b7f81;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1a1714;
    --fg: #e4dcd2;
    --muted: #9a9184;
    --line: #3d352e;
    --tile-bg: #241f1b;
    --key-bg: #3a322c;
    --sheet-bg: #241f1b;
    --correct: #56894f;
    --present: #a68f33;
    --absent: #5f6365;
  }
}

* { box-sizing: border-box; }

html, body { margin: 0; min-height: 100%; }

body {
  background: var(--bg);
  color: var(--fg);
  font-family: "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  display: flex;
  justify-content: center;
  --pad-x: clamp(12px, 4vmin, 32px);
  padding: clamp(12px, 3vmin, 28px) var(--pad-x) clamp(16px, 4vmin, 32px);
  /* **자판까지 한 화면에 들어와야 한다.** 판을 남는 높이에 맞추려면 화면 높이가
     먼저 정해져 있어야 한다. `dvh`인 것은 아이폰 사파리에서 `vh`가 툴바를 감춘
     높이(큰 뷰포트)를 가리키기 때문이다 — 852로 재고 실제로는 700만 보이니 판이
     그만큼 넘쳤다. 모르는 브라우저를 위해 `vh`를 먼저 적어 둔다. */
  min-height: 100vh;
  min-height: 100dvh;
}

.app {
  width: min(100%, 460px);
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 2.5vmin, 20px);
}

/* 게임마다 헤더가 제각각이면 게임을 옮겨 다닐 때 목록으로 돌아가는 길을 매번
   다시 찾게 된다. 네 게임 모두 목록은 왼쪽 위, 이름은 가운데로 맞춘다.
   양옆을 1fr로 묶으면 좌우 내용의 폭이 달라도 이름이 화면 한가운데에 온다. */
.head { flex: none; }

.title-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 10px;
}

.title-row h1 { text-align: center; }
.title-row .head-nav { justify-self: start; }
.head-nav { display: flex; align-items: center; gap: 14px; }
.title-row .head-actions { justify-self: end; }

h1 {
  margin: 0;
  font-size: clamp(28px, 7vmin, 40px);
  font-weight: 800;
  letter-spacing: -0.02em;
}

.head-actions {
  display: flex;
  align-items: baseline;
  gap: 14px;
}

.toggle {
  border: 0;
  background: none;
  padding: 0;
  color: inherit;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  opacity: 0.6;
}

.toggle[aria-pressed="false"] { opacity: 0.38; }
.toggle:hover { opacity: 1; }

.back {
  color: inherit;
  opacity: 0.6;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
}

.back:hover { opacity: 1; }

.sub-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 12px;
  flex-wrap: wrap;
}

.subtitle {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
}

/* 취소선은 소리 토글에만 준다. 모드·도움말 토글은 꺼짐이 "선택 안 함"일 뿐이라
   같은 표시를 쓰면 뜻이 달라진다. 모드 토글이 소리 토글과 한 묶음에 들어와서
   자리가 아니라 클래스로 가른다. */
.toggle.sound { font-size: 13px; }
.toggle.sound[aria-pressed="false"] { text-decoration: line-through; }

/* **판이 남는 높이를 가져간다.** 예전에는 타일 크기를 `vh`로 잡아 두고 판·머리·
   자판을 위에서부터 쌓았는데, 그러면 셋의 합이 화면보다 커도 아무도 줄지 않아
   자판이 화면 밖으로 밀렸다. 이제 머리와 자판은 제 크기대로 두고 판만 늘었다
   줄었다 하므로, 어떤 높이에서도 자판이 화면 안에 남는다.
   `--tries`는 판의 줄 수(`logic.js`의 `MAX_TRIES`)다. 여기서는 최대 크기를 재는
   데만 쓴다. */
.board {
  --gap: clamp(6px, 1.6vmin, 10px);
  --tries: 6;
  --board-w: min(100vw - 2 * var(--pad-x), 460px);
  /* 세로로 아무리 넉넉해도 타일이 가로로 넘치면 안 된다. 판의 높이를 막아 두는
     것이 타일마다 최대 폭을 거는 것보다 낫다 — 타일에 걸면 높이는 그대로라
     정사각형이 깨진다. */
  --tile-cap: min(84px, (var(--board-w) - var(--gap)) / 2);
  /* 바탕값이 `auto`면 판의 높이가 제 내용에서 나오는데, 그러면 판을 크기
     컨테이너로 삼을 수 없다(내용이 크기를 정하는 상자는 크기 가둠이 안 된다).
     0에서 늘리면 높이가 남는 자리에서만 나온다 — 실제로 `auto`로 두었더니 좁은
     화면에서 `cqh`가 0으로 잡혀 글자가 사라졌다. */
  flex: 1 1 0;
  min-height: 0;
  /* 너무 줄면 글자를 읽을 수 없다. 이보다 좁은 화면은 스크롤되는 편이 낫다. */
  min-height: calc(var(--tries) * 34px + (var(--tries) - 1) * var(--gap));
  max-height: calc(var(--tries) * var(--tile-cap) + (var(--tries) - 1) * var(--gap));
  /* 최대 크기에 걸려 남는 자리가 생기면 판을 그 가운데에 둔다. */
  margin-block: auto;
  display: grid;
  grid-auto-rows: minmax(0, 1fr);
  gap: var(--gap);
  justify-content: center;
}

/* 타일 크기는 줄 높이에서 나온다. 줄이 판의 1fr을 받고, 타일이 그 높이를 다 쓰고,
   가로는 정사각형 비율이 정한다. */
.row {
  display: flex;
  justify-content: center;
  gap: var(--gap);
}

.tile {
  height: 100%;
  aspect-ratio: 1;
  flex: none;
  /* 화면이 낮으면 타일이 글자보다 작아질 수 있다. 넘친 글자가 줄을 밀지 않게 한다. */
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--line);
  border-radius: 10px;
  background: var(--tile-bg);
  /* 타일이 이제 남는 높이에서 나오므로 글자도 높이를 따라가야 한다. 가로만 보고
     잡으면 낮고 넓은 화면에서 글자가 타일보다 커진다. 아래 @supports가 판 높이에서
     직접 계산하고, 여기 있는 것은 그것이 없는 브라우저를 위한 어림값이다. */
  font-size: clamp(20px, min(9vmin, 5.6dvh), 44px);
  font-weight: 700;
  line-height: 1;
}

/* **글자 크기는 타일에서 나온다.** 타일이 화면에 남는 높이에서 나오므로 vmin이나
   dvh로 어림잡으면 화면 크기에 따라 글자가 타일보다 커지거나 우스꽝스럽게 작아진다.
   판을 크기 컨테이너로 두면 타일 높이를 그대로 계산할 수 있다 — 판의 폭은 늘어난
   자리에서, 높이는 flex와 max-height에서 이미 정해져 있어 컨테이너로 삼아도
   안전하다. */
@supports (container-type: size) {
  .board { container-type: size; }
  .tile {
    font-size: min(44px,
      calc((100cqh - (var(--tries) - 1) * var(--gap)) / var(--tries) * 0.56));
  }
}

.tile.filled { border-color: var(--muted); }

/* 한 글자를 초·중·종 세 칸으로 보여줘야 하는데, 칸을 나누면 글자를 읽을 수
   없다. 배경을 세로 3등분해 칠하고 글자는 그 위에 얹는다. */
.tile.judged {
  border-color: transparent;
  color: #fff;
  background-image: linear-gradient(
    to right,
    var(--c1) 0 33.34%, var(--c2) 33.34% 66.67%, var(--c3) 66.67% 100%);
}

.tile.judged.no-jong {
  /* 받침이 없으면 셋째 칸을 좁게 둔다. 같은 넓이로 칠하면 없는 받침이 있는
     것처럼 보인다. */
  background-image: linear-gradient(
    to right,
    var(--c1) 0 42%, var(--c2) 42% 84%, var(--c3) 84% 100%);
}

.tile.pop { animation: pop 180ms ease-out; }
.row.shake { animation: shake 340ms ease-in-out; }

@keyframes pop {
  0% { transform: scale(1); }
  45% { transform: scale(1.08); }
  100% { transform: scale(1); }
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-7px); }
  40% { transform: translateX(7px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}

.toast {
  flex: none;
  margin: 0;
  min-height: 20px;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
}

/* display를 지정한 클래스가 기본 [hidden]을 이기므로 직접 꺼준다. */
.keyboard[hidden] { display: none; }

.keyboard {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.krow {
  display: flex;
  justify-content: center;
  gap: 5px;
}

.key {
  flex: 1 1 auto;
  min-width: 0;
  height: clamp(44px, 8vmin, 54px);
  border: 0;
  border-radius: 6px;
  background: var(--key-bg);
  color: inherit;
  font-family: inherit;
  font-size: clamp(15px, 3.6vmin, 18px);
  font-weight: 700;
  cursor: pointer;
  padding: 0;
}

.key.wide { flex: 1.6 1 auto; font-size: 13px; }
/* 자모는 글자, 시프트와 지우기는 도형이다. 키 높이 안에서 자모와 비슷한 무게로
   보이도록 크기를 따로 잡는다. */
.key svg { width: clamp(18px, 4.4vmin, 22px); height: clamp(18px, 4.4vmin, 22px); }
.key { display: inline-flex; align-items: center; justify-content: center; }
.key:active { filter: brightness(0.92); }
.key[data-state="correct"] { background: var(--correct); color: #fff; }
.key[data-state="present"] { background: var(--present); color: #fff; }
.key[data-state="absent"] { background: var(--absent); color: #fff; opacity: 0.65; }
.key[aria-pressed="true"] { outline: 2px solid var(--fg); outline-offset: -2px; }

.sheet {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--sheet-bg);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* display를 지정한 클래스가 기본 [hidden]을 이기므로 직접 꺼준다. */
.sheet[hidden] { display: none; }

.sheet-title { margin: 0; font-size: 19px; font-weight: 800; }
.sheet-answer { margin: 0; font-size: 15px; color: var(--muted); }

.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin: 0;
}

.stats div { text-align: center; }
.stats dt { font-size: 11px; color: var(--muted); font-weight: 700; }
.stats dd { margin: 2px 0 0; font-size: 20px; font-weight: 800; }

.sheet-actions { display: flex; gap: 8px; }

.btn {
  flex: 1;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 0;
  border-radius: 8px;
  padding: 11px 16px;
  font-size: 15px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
}

.btn.ghost {
  background: none;
  border: 1px solid var(--line);
  color: inherit;
}

.btn:hover { filter: brightness(1.08); }

.help-list {
  margin: 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 14px;
  line-height: 1.55;
}

.chip {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 3px;
  vertical-align: -2px;
}

.chip.correct { background: var(--correct); }
.chip.present { background: var(--present); }
.chip.absent { background: var(--absent); }

@media (prefers-reduced-motion: reduce) {
  .tile.pop, .row.shake { animation-duration: 1ms; }
}