:root {
  --bg: #2b2438;
  --panel: #3a3150;
  --text: #f1ecff;
  --muted: #b3a8d6;
  --cell: #f4f0ff;
  --cell-word: #d9cffa;
  --cell-sel: #ffd84d;
  --wrong: #ffc2c2;
  --accent: #8f7fc0;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, "Noto Sans KR", "Malgun Gothic", sans-serif;
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
}

#app { max-width: 560px; margin: 0 auto; padding: 12px 12px 40px; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
#app > main { flex: 1; display: flex; flex-direction: column; }   /* 화면이 길어도 내용이 위에 몰리지 않게 본문이 남는 높이를 차지한다 */

header { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0 12px; }
h1 { font-size: 22px; margin: 4px 0 10px; white-space: nowrap; }
h2 { font-size: 15px; margin: 0 0 6px; color: var(--muted); }
.meta { color: var(--muted); font-size: 14px; display: flex; flex-wrap: wrap; gap: 0 10px; margin-bottom: 8px; }
.meta span { white-space: nowrap; }
.meta { align-items: center; }
.icon { background: transparent; font-size: 20px; line-height: 1; padding: 6px; min-width: 44px; min-height: 44px; margin: -8px -6px -8px 0; }
.icon.off { opacity: 0.5; }
#timer { font-variant-numeric: tabular-nums; color: var(--text); }
#streak { color: var(--cell-sel); }

.row { display: flex; gap: 6px; align-items: center; margin-bottom: 10px; }
.spacer { flex: 1; }
.row.wrap { flex-wrap: wrap; }
.row[hidden], #topicRow[hidden] { display: none; }
#topicRow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
#topicRow .chip { min-width: 0; padding-left: 4px; padding-right: 4px; white-space: normal; line-height: 1.2; overflow-wrap: anywhere; }
.chip.small { padding: 6px 4px; min-height: 44px; font-size: 14px; white-space: nowrap; }

button {
  font: inherit;
  color: var(--text);
  background: var(--panel);
  border: 0;
  border-radius: 8px;
  cursor: pointer;
}
.chip { padding: 9px 12px; font-size: 14px; min-height: 44px; }
.chip:active, .key:active { background: var(--accent); }
.chip.on { background: var(--cell-sel); color: #2b2438; font-weight: 700; }
.chip:disabled { opacity: 0.4; cursor: default; }
#diffInfo { font-size: 13px; color: var(--muted); }
/* 힌트 버튼: 남은 횟수를 막대로 보여 준다 */
#btnHint { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; }
.hbar { display: flex; gap: 3px; height: 8px; line-height: 8px; font-size: 13px; color: var(--muted); }
.hbar.inf { height: auto; line-height: 1; }
.hbar i { width: 10px; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.22); }
.hbar i.on { background: var(--cell-sel); }

#clueBar {
  min-height: 48px;
  padding: 10px 12px;
  margin-bottom: 10px;
  background: var(--panel);
  border-radius: 8px;
  font-size: 15px;
  line-height: 1.35;
}
#clueBar b { color: var(--cell-sel); margin-right: 6px; }
/* 좁은 화면: 위쪽 조작 영역을 줄이고, 단서는 스크롤해도 위에 붙여 둔다 */
@media (max-width: 700px) {
  #app { padding-top: 6px; }
  h1 { font-size: 20px; margin: 2px 0 6px; }
  #diffInfo { display: none; }
  #diffRow, #topicRow, .row { margin-bottom: 6px; }
  #clueBar { position: sticky; top: 6px; z-index: 9; min-height: 0; padding: 8px 12px; box-shadow: 0 0 0 6px var(--bg); }
}
#clueBar .badge { margin-left: 8px; padding: 1px 8px; border-radius: 10px; background: #ff9d9d; color: #7a1020; font-size: 12px; font-weight: 700; white-space: nowrap; }

#gridWrap { display: flex; justify-content: center; margin-bottom: 12px; }
#grid { display: grid; gap: 2px; }
.grow { display: contents; }
.chip[aria-current="true"] { box-shadow: inset 0 0 0 2px var(--cell-sel); }

.cell {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--cell);
  color: #2b2438;
  border-radius: 4px;
  font-weight: 700;
  cursor: pointer;
}
.cell.blank { background: transparent; cursor: default; }
.cell.done { background: #cdeec3; }
.cell.inword { background: var(--cell-word); }
/* 현재 단어: 바깥 둘레를 굵은 선으로 감싼다 (--bw 는 위 오른쪽 아래 왼쪽 순서의 선 두께) */
.cell.inword::before {
  content: '';
  position: absolute;
  inset: -2px;
  border: solid #7b5cf0;
  border-width: var(--bw, 0);
  border-radius: 6px;
  pointer-events: none;
  z-index: 1;
}
.cell.inword.bad::before { border-color: #c0182c; }
.cell.bad { background: #ff9d9d; box-shadow: inset 0 0 0 2px #c0182c; animation: shake 0.35s ease; }   /* 다 채웠는데 틀린 단어 */
.cell.sel { background: var(--cell-sel); box-shadow: inset 0 0 0 3px #2b2438; }     /* 선택한 칸: 안쪽 테두리 */
.cell.wrong { background: var(--wrong); }
.cell.done::after, .cell.wrong::after, .cell.bad::after { position: absolute; right: 3px; bottom: 1px; font-size: 11px; font-weight: 700; line-height: 1; }
.cell.done::after { content: '✓'; color: #14532d; }     /* 맞힌 단어: 체크 표시 */
.cell.wrong::after, .cell.bad::after { content: '✕'; color: #7a1020; }    /* 틀린 칸: 엑스 표시 */
/* 단어를 맞히면 글자가 차례로 통통 튄다 */
.cell.pop { animation: pop 0.5s ease both; animation-delay: calc(var(--i, 0) * 70ms); }
@keyframes pop {
  0% { transform: scale(1); }
  40% { transform: scale(1.28); background: #9be27a; }
  100% { transform: scale(1); }
}
/* 확인을 눌렀을 때 틀린 칸이 살짝 흔들린다 */
.cell.wrong { animation: shake 0.35s ease; }
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-3px); }
  75% { transform: translateX(3px); }
}
.cell .num { position: absolute; top: 1px; left: 3px; font-size: 11px; font-weight: 600; color: #4a3f78; }

#kb { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
/* 터치 기기: 키보드를 화면 하단에 붙여, 스크롤하지 않아도 항상 보이게 한다 */
@media (pointer: coarse), (max-width: 700px) {
  .key { min-height: 42px; }
  #kb {
    position: sticky;
    bottom: 0;
    z-index: 10;
    margin: 0 -12px 16px;
    padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
    background: var(--bg);
    border-top: 1px solid var(--panel);
  }
}
#kb .krow { display: flex; justify-content: center; gap: 5px; }
.key { flex: 1; max-width: 46px; min-height: 46px; font-size: 18px; padding: 0; }
.key.wide { flex: 1.5; max-width: 70px; font-size: 15px; }
.key.on { background: var(--cell-sel); color: #2b2438; }

.clues { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.clues ul { list-style: none; margin: 0; padding: 0; }
.clues li button {
  width: 100%;
  text-align: left;
  background: transparent;
  padding: 8px 6px;
  min-height: 44px;
  font-size: 14px;
  line-height: 1.35;
  border-radius: 6px;
}
.clues li button.cur { background: var(--panel); }
.clues li button.done { color: var(--muted); text-decoration: line-through; }

#confetti {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 20;
}
#confetti[hidden] { display: none; }

#modal {
  position: fixed;
  inset: 0;
  z-index: 15;   /* 고정한 키보드(10)와 단서(9) 위, 폭죽(20) 아래 */
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.6);
}
#modal[hidden] { display: none; }
.card { background: var(--panel); border-radius: 14px; padding: 24px; text-align: center; width: min(320px, 86vw); }
.card h2 { color: var(--text); font-size: 22px; }
.card p { line-height: 1.6; color: var(--muted); }
.primary { background: var(--cell-sel); color: #2b2438; font-weight: 700; padding: 14px 24px; font-size: 16px; }
.secondary { background: var(--bg); padding: 14px 18px; font-size: 16px; }
.actions { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
#sharePreview[hidden], #btnShare[hidden], #btnTopicOpen[hidden] { display: none; }
#sharePreview {
  width: fit-content;
  max-width: 100%;
  margin: 0 auto 16px;
  font: inherit;
  font-size: 16px;
  line-height: 1.3;
  white-space: pre;
  overflow: visible;
}

@media (prefers-reduced-motion: reduce) {
  .cell.pop, .cell.wrong { animation: none; }
}

.brand { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
/* 일반 | 어린이 화면 선택: 지금 화면은 채워 보이고, 다른 쪽은 눌러서 이동하는 링크 */
/* 🏠 메인 화면 버튼: 배경과 테두리를 줘서 한눈에 띄게 하고, 터치하기 쉬운 크기로 둔다 */
.home { font-size: 28px; line-height: 1; min-width: 52px; min-height: 52px; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; border-radius: 14px; background: var(--panel); border: 2px solid var(--cell-sel); }
.home[hidden] { display: none; }
.home:hover, .home:focus-visible { background: rgba(255, 216, 77, 0.28); }
.home:active { background: rgba(255, 216, 77, 0.45); }
.home:focus-visible { outline: 3px solid #ffffff; outline-offset: 2px; }
.modes { display: inline-flex; border: 2px solid var(--cell-sel); border-radius: 999px; overflow: hidden; margin-top: 2px; }
.modes a { padding: 8px 14px; font-size: 14px; font-weight: 700; color: var(--cell-sel); text-decoration: none; cursor: pointer; }
.modes a[aria-current="page"] { background: var(--cell-sel); color: #2b2438; cursor: default; }
.modes a:not([aria-current]):hover, .modes a:not([aria-current]):focus-visible { background: rgba(255, 216, 77, 0.2); }
.bank-info { margin: 20px 0 0; font-size: 13px; color: var(--muted); text-align: center; }

/* 화면 낭독기에만 읽히는 텍스트 */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* 건너뛰기 링크: 키보드로 Tab을 눌렀을 때만 나타난다 */
.skip {
  position: absolute;
  left: 8px;
  top: -60px;
  z-index: 30;
  padding: 12px 16px;
  background: #ffffff;
  color: #2b2438;
  font-weight: 700;
  border-radius: 8px;
}
.skip:focus { top: 8px; }

/* 키보드 포커스 표시: 어느 배경에서도 보이도록 흰색 윤곽선 */
:focus { outline: none; }
:focus-visible { outline: 3px solid #ffffff; outline-offset: 2px; }
#grid:focus-visible { outline-offset: 6px; border-radius: 4px; }

/* ---------- 어린이 화면 테마: 따뜻한 모래색 바탕에 주황 한 가지 포인트, 작고 은은한 움직임 ---------- */
body.kids {
  --bg: #f3dcae;
  --panel: #ffffff;
  --text: #3d3560;
  --muted: #5b537f;
  --cell: #ffffff;
  --cell-word: #ffe27a;
  --cell-sel: #ffd84d;
  --accent: #ff9f1c;
  background: #f3dcae;
}
html:has(body.kids) { background: #f3dcae; }
body.kids h1 { color: #a34100; font-weight: 800; }   /* 어린이 화면 색은 글자 대비 4.5:1 이상 (연한 주황 #e8631c 는 바탕에서 2.5:1) */
body.kids h1::after { content: ' ⭐'; display: inline-block; animation: kidsBob 2.6s ease-in-out infinite; }
body.kids button { border-radius: 14px; box-shadow: 0 2px 0 rgba(61, 53, 96, 0.16); transition: transform 0.08s ease; }
body.kids button:active { transform: scale(0.92); }
body.kids .chip.on, body.kids .key.on, body.kids .primary { background: #ff9f1c; color: #2b2438; }   /* 밝은 주황 위에는 어두운 글자 (흰 글자는 2.1:1) */
body.kids .chip:active, body.kids .key:active { background: #ff9f1c; color: #2b2438; }
body.kids #streak, body.kids #clueBar b { color: #9a3b00; }
body.kids .modes { border-color: #e8631c; }
body.kids .modes a { color: #9a3b00; }
body.kids .modes a[aria-current="page"] { background: #c2410c; color: #fff; }
body.kids #clueBar { border-radius: 16px; box-shadow: 0 2px 0 rgba(61, 53, 96, 0.12); }
body.kids .hbar i { background: rgba(61, 53, 96, 0.18); }
body.kids .hbar i.on { background: #ff9f1c; }
body.kids .cell { border-radius: 8px; box-shadow: 0 1px 0 rgba(61, 53, 96, 0.22); }
body.kids .cell.blank { box-shadow: none; }
body.kids .cell .ch { display: inline-block; }
body.kids .cell.done { background: #cdeec6; }
body.kids .cell.inword::before { border-color: #e8631c; }
body.kids .cell.inword.bad::before { border-color: #c0182c; }
body.kids .key.wide { background: #ffd9a0; }
body.kids .key.wide.on { background: #ff9f1c; }
body.kids .card { border-radius: 24px; }
body.kids #modal:not([hidden]) .card { animation: kidsCardIn 0.35s cubic-bezier(0.3, 1.5, 0.5, 1); }
body.kids .clues li button.cur { background: #ffe27a; }
body.kids :focus-visible { outline-color: #3d3560; }
/* 글자를 쓰면 톡 튀어나오고, 별은 천천히 흔들리고, 완료 창은 통통 튀며 나타난다 */
body.kids .cell.ty .ch { animation: kidsPop 0.28s ease-out; }
@keyframes kidsPop { 0% { transform: scale(0.5); } 60% { transform: scale(1.2); } 100% { transform: scale(1); } }
@keyframes kidsBob { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-3px) rotate(12deg); } }
@keyframes kidsCardIn { from { transform: scale(0.7); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  body.kids .cell.ty .ch, body.kids h1::after, body.kids #modal:not([hidden]) .card { animation: none; }
  body.kids button:active { transform: none; }
}

/* 영어 화면: 자모 키 아래에 로마자 소리를 작게 적는다 */
.key .kj, .key .kr { display: block; line-height: 1.1; pointer-events: none; }
.key .kr { font-size: 9px; opacity: .75; margin-top: 1px; }
.has-rom .key { min-height: 50px; }
/* 언어 선택: 일반/어린이 선택(노란 테두리 알약)과 다르게, 테두리 없는 푸른 기호 버튼이다. 지금 언어는 숨기고 반대 언어로 바꾸는 버튼만 보인다 */
.modes.lang, body.kids .modes.lang { margin-left: auto; border: 0; border-radius: 8px; background: rgba(127, 183, 255, 0.16); }
/* 언어 전환 버튼은 한국어·영어 화면에서 같은 자리(오른쪽 위)에 고정한다. 제목 길이가 달라도 움직이지 않는다 */
header { position: relative; }
header .brand { padding-right: 68px; gap: 4px 10px; }   /* 오른쪽 위 언어 버튼(🌐) 자리를 비워 둔다 */
header .meta { flex-basis: 100%; }   /* 점수·시간 줄은 언제나 제목 아래 줄에 둔다 (제목 길이에 따라 위로 올라와 언어 버튼과 겹치거나 자리가 바뀌지 않게) */
.modes.lang, body.kids .modes.lang { position: absolute; top: 11px; right: 12px; margin: 0; }
header:has(.home) .modes.lang { top: 19px; }
.modes.lang a { min-width: 84px; text-align: center; }
.modes.lang a, body.kids .modes.lang a { padding: 5px 10px; font-size: 12px; font-weight: 600; color: #aad2ff; }   /* 눌러 볼 때(hover) 바탕에서도 대비 5.2:1 이상 */
body.kids .modes.lang { background: rgba(0, 110, 200, 0.12); }
body.kids .modes.lang a { color: #084a8c; }   /* 연한 파랑 바탕에서 대비 5.2:1 이상 (이전 #0b66b8 은 3.7:1) */
.modes.lang a::before { content: '🌐'; margin-right: 5px; }
.modes.lang a:not([aria-current]):hover, .modes.lang a:not([aria-current]):focus-visible { background: rgba(127, 183, 255, 0.28); }
.modes.lang a[aria-current] { display: none; }
.modes[hidden] { display: none; }

/* ---------- 소리 듣기 버튼과 결과 단어 목록 (네 게임이 같이 쓴다. 게임마다 크기·배치만 따로 고친다) ---------- */
.speak { flex: none; width: 44px; min-height: 44px; padding: 0; font-size: 19px; line-height: 1; color: var(--text); background: var(--panel); border: 2px solid transparent; border-radius: 12px; cursor: pointer; }
.speak[hidden], html.no-tts .speak { display: none; }
.speak:hover { background: #453a60; }
.speak:active { background: var(--accent); }
.speak:focus-visible { outline: 3px solid #ffffff; outline-offset: 2px; }
.rlist { display: grid; gap: 6px; margin: 14px 0; padding: 0; list-style: none; text-align: left; font-size: 15px; }
.rlist li { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 8px; background: rgba(255, 255, 255, 0.08); line-height: 1.4; }
.rlist .rtext { flex: 1; min-width: 0; }
.rlist .resspeak { flex: none; width: 36px; min-height: 36px; font-size: 16px; }
body.kids .rlist li { background: #fff3c4; }
.rlist .rsub { display: block; color: #d2c9ee; font-size: 13px; }   /* 반투명 흰 바탕 위에서 4.5:1 이상 (--muted 는 4.3:1) */
body.kids .rlist .rsub { color: var(--muted); }
.wlist { max-height: 30vh; overflow: auto; }
.clues li { display: flex; align-items: center; gap: 4px; }
.clues li button[data-id] { flex: 1; min-width: 0; }
.clues .resspeak { width: 32px; min-height: 32px; font-size: 14px; }
/* 결과 창의 닫기 (네 게임 공통) */
.closebtn { display: block; margin: 10px auto 0; padding: 8px 16px; font-size: 14px; color: var(--muted); background: transparent; }

/* 키가 작은 폰 화면(아이폰의 사파리처럼 주소·도구 막대가 보이는 세로 약 700px 이하): 위쪽 조작줄과 키보드를 조금 줄여 십자 말풀이 격자가 키보드에 가리지 않게 한다 */
@media (max-width: 700px) and (max-height: 720px) {
  .home { font-size: 22px; min-width: 40px; min-height: 40px; }
  .chip, .chip.small { min-height: 38px; padding: 6px 9px; font-size: 13px; }
  .row > .chip { white-space: nowrap; }   /* 영어 화면에서 버튼 글자가 두 줄로 접혀 줄이 높아지지 않게 */
  #clueBar { padding-top: 5px; padding-bottom: 5px; }
  .key { min-height: 38px; }
  #kb { gap: 4px; padding-top: 6px; }
  header:has(.home) .modes.lang { top: 12px; }
}

/* 머리글은 폰에서 한 줄: 🏠 제목 일반|어린이 🌐. 제목 글자를 줄이고 언어 버튼은 아이콘만 보여, 한국어·영어·게임마다 같은 자리에 놓인다 */
body header .modes.lang a, body.kids header .modes.lang a { display: inline-flex; align-items: center; justify-content: center; min-width: 56px; height: 40px; padding: 0 6px; font-size: 0; }
body header .modes.lang a::before, body.kids header .modes.lang a::before { margin: 0 3px 0 0; font-size: 18px; }
/* 아이콘만으로는 언어 전환 버튼인지 알기 어려워 EN/KO 글자를 함께 보인다 (누르면 그 언어로 바뀐다) */
header .modes.lang a::after { font-size: 13px; font-weight: 700; letter-spacing: 0.02em; }
body header .modes.lang a[aria-current], body.kids header .modes.lang a[aria-current] { display: none; }
#langKo::after { content: 'KO'; }
#langEn::after { content: 'EN'; }
header .modes.lang { top: 6px; }
header:has(.home) .modes.lang { top: 12px; }
@media (max-width: 700px) {
  header .brand { gap: 4px 6px; }
  header .brand h1 { font-size: 17px; margin: 0; }
  header .modes:not(.lang) a { padding: 8px 10px; }
  header .home { min-width: 48px; }
}
@media (max-width: 700px) and (max-height: 720px) {
  header:has(.home) .modes.lang { top: 6px; }
}
header .brand .modes:not(.lang) { margin-left: auto; }   /* 일반|어린이는 언어 버튼 바로 왼쪽에 붙여, 제목 길이와 상관없이 오른쪽 끝이 같다 */
@media (max-width: 400px) { body.kids header .brand h1::after { display: none; } }   /* 아주 좁은 폰: 제목 옆 별 장식을 빼서 일반|어린이가 아래로 떨어지지 않게 */