/* 한국도로공사 인재개발원 · 가로세로 안전 낱말퀴즈
   게임 이벤트 느낌으로 맞춘 꾸밈새.
   - 바탕은 어두운 무대, 그 위에 두꺼운 테두리의 밝은 카드를 얹는다
   - 단추와 조각은 아래쪽에 두꺼운 그림자를 두어 「눌리는 것」처럼 보이게 한다
   - 글자는 먹색으로 크게. 꾸밈보다 읽히는 것이 먼저다 */

:root {
  color-scheme: light;

  /* 이벤트용 글씨체.
     제목 · 숫자는 굵은 고딕(HY견고딕), 본문은 산돌고딕 계열.
     둘 다 없는 컴퓨터에서는 맑은 고딕으로 대신 보인다. */
  --font-display: "HY견고딕", "HYGothic-Extra", "산돌고딕Neo1", "SandollGothicNeo1",
                  "Apple SD Gothic Neo", "Malgun Gothic", "맑은 고딕", sans-serif;
  --font-body: "산돌고딕Neo1", "SandollGothicNeo1", "Sandoll GothicNeo1",
               "SD산돌고딕Neo", "산돌고딕M", "Apple SD Gothic Neo",
               "Malgun Gothic", "맑은 고딕", system-ui, sans-serif;

  --ink: #0b1220;          /* 글자 먹색 */
  --ink-soft: #55637a;
  --edge: #16233e;         /* 카드 · 단추의 두꺼운 테두리 */
  --panel: #ffffff;
  --line: #d9e1ec;

  --navy: #10315c;
  --accent: #1763c7;
  --accent-soft: #e4eefc;
  --cyan: #12b5cf;
  --amber: #ffc531;
  --amber-deep: #f0a204;
  --pink: #ff8fb1;
  --mint: #43cfa0;
  --violet: #8a7bf0;

  --ok: #12844a;
  --ok-soft: #dff5e8;
  --warn: #c5301a;
  --warn-soft: #fde4e0;
  --hint: #a8720a;
  --hint-soft: #fdf0d2;

  --hard: 0 5px 0 var(--edge);                 /* 눌리는 느낌의 단단한 그림자 */
  --card: 0 6px 0 rgba(10, 20, 40, .35), 0 18px 34px rgba(5, 12, 30, .28);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;

  /* 어두운 무대 바탕 + 은은한 점무늬 */
  background:
    radial-gradient(900px 420px at 12% -8%, rgba(138, 123, 240, .40), transparent 62%),
    radial-gradient(760px 420px at 88% 4%, rgba(18, 181, 207, .32), transparent 60%),
    radial-gradient(circle at 18% 22%, rgba(255, 255, 255, .055) 1.5px, transparent 1.6px) 0 0 / 26px 26px,
    linear-gradient(180deg, #16295a 0%, #101d3e 42%, #0c1730 100%);
  background-attachment: scroll;
}

/* ---- 머리말 (이벤트 배너) ---- */
.top {
  position: relative;
  padding: 18px 16px 22px;
  color: #fff;
  background:
    radial-gradient(760px 180px at 20% -50%, rgba(255, 197, 49, .38), transparent 62%),
    linear-gradient(120deg, #0a2144 0%, #12508f 46%, #12a3c4 100%);
  border-bottom: 4px solid var(--edge);
  overflow: hidden;
}
.top::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(115deg,
    rgba(255, 255, 255, .06) 0 14px, transparent 14px 34px);
  pointer-events: none;
}
/* 로고 그림을 걷어내고, 남은 문안을 가운데로 모았다.
   EVENT 표는 넓은 화면에서만 오른쪽 끝에 붙이고, 좁아지면 글 아래로 내려온다. */
.top-inner {
  position: relative;
  z-index: 1;
  max-width: 1080px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
}

.brand {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}
.org {
  margin: 0;
  display: inline-block;
  padding: 2px 9px;
  border-radius: 99px;
  background: rgba(255, 255, 255, .18);
  border: 1px solid rgba(255, 255, 255, .35);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
}
.top h1 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 28px;
  line-height: 1.15;
  letter-spacing: -.02em;
  text-shadow: 0 3px 0 rgba(8, 24, 50, .45);
}
.sub { margin: 0; font-size: 13.5px; opacity: .94; }

.event-badge {
  position: absolute;
  right: 0;
  top: 50%;
  translate: 0 -50%;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 92px;
  height: 66px;
  border-radius: 14px;
  border: 3px solid var(--edge);
  background: linear-gradient(160deg, #ffdd71, var(--amber-deep));
  color: #3a2406;
  box-shadow: var(--hard);
  transform: rotate(-4deg);
}
.event-badge-top { font-size: 10px; font-weight: 800; letter-spacing: .2em; }
.event-badge-main {
  font-family: var(--font-display);
  font-size: 22px;
  line-height: 1;
  letter-spacing: .04em;
}

/* 도로 가운데 차선을 본뜬 띠 */
.road-stripe {
  height: 14px;
  background:
    repeating-linear-gradient(90deg, var(--amber) 0 26px, transparent 26px 52px)
      center / auto 4px repeat-x,
    #1d2738;
  border-bottom: 3px solid var(--edge);
}

.wrap {
  max-width: 1080px;
  margin: 0 auto;
  padding: 18px 16px 52px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.panel {
  background: var(--panel);
  border: 3px solid var(--edge);
  border-radius: 18px;
  box-shadow: var(--card);
  padding: 16px;
}

/* ---- 장 표시 ---- */
.screen { display: flex; flex-direction: column; gap: 14px; }

.chapter-mark {
  margin: 0;
  align-self: flex-start;
  font-family: var(--font-display);
  font-size: 12.5px;
  letter-spacing: .12em;
  color: #0b1220;
  background: var(--amber);
  border: 2px solid var(--edge);
  border-radius: 99px;
  padding: 3px 12px;
  box-shadow: 0 3px 0 var(--edge);
}
.chapter-mark-inline { padding: 2px 10px; }

/* ---- 1장 · 시작 ---- */
.hero {
  position: relative;
  overflow: hidden;
  text-align: center;
  padding: 38px 20px 32px;
  border-radius: 26px;
  border: 3px solid var(--edge);
  background:
    radial-gradient(420px 220px at 12% 0%, #ffe4ee 0, transparent 62%),
    radial-gradient(420px 220px at 88% 6%, #dcf6ef 0, transparent 62%),
    radial-gradient(520px 260px at 50% 112%, #e7efff 0, transparent 70%),
    #ffffff;
  box-shadow: var(--card);
}
.hero::before {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.hero::before {
  width: 130px; height: 130px;
  left: -34px; top: -38px;
  background: radial-gradient(circle at 35% 35%, #ffd9e4, #ffeaf1);
  opacity: .8;
}

.hero-kicker {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 16px;
  padding: 8px 19px;
  border-radius: 99px;
  background: #fff;
  border: 2px solid var(--edge);
  box-shadow: 0 3px 0 var(--edge);
  font-size: 15.5px;
  font-weight: 800;
  letter-spacing: .04em;
  color: var(--ink);
}
.hero-kicker .dot { color: var(--pink); font-size: 11px; }

.hero-title {
  position: relative;
  margin: 0 0 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.only-reader {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* 1행 「안전낱말」 — 게임 조각처럼 두꺼운 테두리에 먹색 글자 */
.tile-word { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.wt {
  position: relative;
  width: 76px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 3px solid var(--edge);
  border-radius: 20px;
  font-family: var(--font-display);
  font-size: 46px;
  letter-spacing: -.01em;
  color: #0b1220;
  text-rendering: geometricPrecision;
  box-shadow: 0 6px 0 var(--edge), 0 14px 22px rgba(8, 18, 40, .28);
  animation: wt-bob 3.4s ease-in-out infinite;
}
.wt1 { background: linear-gradient(165deg, #ffd0e0, #ff9dbe); transform: rotate(-3deg); animation-delay: 0s; }
.wt2 { background: linear-gradient(165deg, #ffe4a8, #ffca5e); transform: rotate(2deg);  animation-delay: .14s; }
.wt3 { background: linear-gradient(165deg, #c4ecdd, #8fdcc1); transform: rotate(-2deg); animation-delay: .28s; }
.wt4 { background: linear-gradient(165deg, #cbe1ff, #9ac8ff); transform: rotate(3deg);  animation-delay: .42s; }

@keyframes wt-bob {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -5px; }
}
@media (prefers-reduced-motion: reduce) {
  .wt { animation: none; }
}

/* 2행 「퀴즈」 — 밑줄 없이 글자만.
   글자 아래로 색을 조금씩 어둡게 겹쳐 쌓아, 도톰하게 솟은 것처럼 보이게 했다. */
.hero-word {
  position: relative;
  display: inline-block;
  padding: 0 8px 0 calc(8px + .42em);
  font-family: var(--font-display);
  font-size: 52px;
  line-height: 1.12;
  letter-spacing: .42em;
  color: #0b1220;
  text-rendering: geometricPrecision;
  text-shadow:
    0 1px 0 #c9d4e4,
    0 2px 0 #b4c1d5,
    0 3px 0 #a0aec6,
    0 4px 0 #8d9cb7,
    0 5px 0 #7d8da9,
    0 8px 14px rgba(8, 18, 40, .34);
}

.hero-lead { position: relative; margin: 0 0 18px; font-size: 15px; color: var(--ink-soft); }
.hero-lead b { color: var(--ink); }

.hero-themes {
  list-style: none;
  margin: 0 0 22px;
  padding: 0;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
}
.hero-themes li {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 15px;
  border-radius: 99px;
  background: #fff;
  border: 2px solid var(--edge);
  box-shadow: 0 3px 0 var(--edge);
  font-family: var(--font-display);
  font-size: 14.5px;
  color: var(--ink);
}
.hero-themes .ic { font-size: 17px; }

.home-buttons {
  position: relative;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 16px;
}
.icon-btn {
  width: 200px;
  padding: 11px 12px 9px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  border: 3px solid var(--edge);
  border-radius: 18px;
  background: #fff;
  color: var(--ink);
  cursor: pointer;
  text-decoration: none;
  font-family: inherit;
  box-shadow: 0 7px 0 var(--edge);
  transition: transform .08s, box-shadow .08s;
}
.icon-btn:hover { transform: translateY(-2px); box-shadow: 0 9px 0 var(--edge); }
.icon-btn:active { transform: translateY(4px); box-shadow: 0 3px 0 var(--edge); }
.icon-btn-ic {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 3px solid var(--edge);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  background: #eef4fb;
  color: var(--accent);
}
/* ▶ 세모는 글자 자체가 왼쪽으로 치우쳐 보인다. 왼쪽에 여백을 조금 주어 눈에 가운데로 보이게 맞춘다. */
#btn-start .icon-btn-ic {
  box-sizing: border-box;
  padding-left: 5px;
}
.icon-btn-name { font-family: var(--font-display); font-size: 21px; }
.icon-btn-sub { font-size: 12px; color: var(--ink-soft); }
.icon-btn-main {
  background: linear-gradient(160deg, #3a90f0, #1763c7);
  color: #fff;
}
.icon-btn-main .icon-btn-ic { background: var(--amber); color: #3a2406; }
.icon-btn-main .icon-btn-sub { color: #dceaff; }

.hero-note { position: relative; margin: 18px 0 0; font-size: 13px; color: var(--ink-soft); min-height: 20px; }

/* 게임방법 */
.how-panel h3 {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-size: 19px;
  color: var(--ink);
}
.how-list { margin: 0 0 12px; padding-left: 20px; font-size: 14.5px; }
.how-list li { margin-bottom: 7px; }
.how-tip {
  margin: 0 0 12px;
  padding: 11px 13px;
  border: 2px solid var(--edge);
  border-radius: 12px;
  background: var(--accent-soft);
  font-size: 13.5px;
}
.how-panel .btn { min-width: 0; width: 100%; }

/* ---- 장 위쪽 줄 ---- */
.game-topbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.link-btn {
  text-decoration: none;
  border: 2px solid var(--edge);
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-weight: 800;
  padding: 6px 13px;
  border-radius: 99px;
  cursor: pointer;
  box-shadow: 0 3px 0 var(--edge);
}
.link-btn:hover { background: var(--amber); }
.game-topbar-note { font-size: 12px; color: #c9d6ea; }

/* ---- 상품 · 참가자 ---- */
.prize-panel {
  background:
    radial-gradient(360px 170px at 8% 0%, #fff0d6 0, transparent 70%),
    radial-gradient(360px 170px at 92% 100%, #ffe3ec 0, transparent 70%),
    #fff;
}
.prize-title {
  margin: 0 0 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 24px;
  color: #0b1220;
  letter-spacing: -.02em;
}
.prize-ic {
  font-size: 26px;
  animation: prize-bob 2.4s ease-in-out infinite;
}
@keyframes prize-bob {
  0%, 100% { translate: 0 0; rotate: -8deg; }
  50%      { translate: 0 -5px; rotate: 8deg; }
}
@media (prefers-reduced-motion: reduce) { .prize-ic { animation: none; } }

/* 2장에서는 이 문구가 화면의 주인공이다. 크고 또렷하게. */
#screen-join .prize-panel { padding: 28px 18px 24px; }
#screen-join .prize-title {
  flex-direction: column;
  gap: 10px;
  margin-bottom: 8px;
  font-size: 38px;
  line-height: 1.16;
}
#screen-join .prize-title .prize-ic { font-size: 46px; }
#screen-join .prize-title .prize-text {
  background: linear-gradient(90deg, #ffd98a, var(--amber)) no-repeat;
  background-size: 100% 14px;
  background-position: 0 86%;
  padding: 0 8px;
}
.prize-lead { margin: -4px 0 16px; text-align: center; font-size: 14px; color: var(--ink-soft); }

.who-display {
  margin: 0;
  text-align: center;
  font-family: var(--font-display);
  font-size: 18px;
  color: var(--ink);
}
.who-link { margin: 6px 0 0; text-align: center; font-size: 13px; }
.who-link a { color: var(--accent); font-weight: 700; }
.who-note { margin: 10px 0 0; font-size: 13.5px; color: var(--ink-soft); text-align: center; }
.who-note:empty { margin: 0; }
.who-note.done { color: var(--ok); font-weight: 800; }
.who-note.warn { color: var(--warn); font-weight: 800; }

.who {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: center;
}
.who-field { flex: 1 1 200px; display: flex; align-items: center; gap: 8px; min-width: 0; }
.who-field label { font-size: 14px; font-weight: 800; color: var(--ink); white-space: nowrap; }
.who-field input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 10px 12px;
  border: 2px solid var(--edge);
  border-radius: 10px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 15px;
}
.who-field input:focus { outline: 3px solid var(--amber); outline-offset: 1px; }

/* 사번(1행) · 이름(2행) · 확인(3행) 으로 한 줄씩 쌓는다 */
.prize-panel .who {
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  max-width: 440px;
  margin: 0 auto;
}
.prize-panel .who-field { flex: 1 1 auto; gap: 10px; }
.prize-panel .who-field label { width: 40px; font-size: 15px; }
.prize-panel .who-field input {
  padding: 13px 14px;
  font-size: 17px;
  border-radius: 12px;
}
.who-confirm { flex: 0 0 auto; width: 100%; padding: 14px; font-size: 17px; }


/* ---- 2장 · 참가 정보 폼 ---- */
#screen-join .prize-title .prize-text { color: var(--navy); }
.giftbox { width: 1.9em; height: 1.9em; display: block; }
.prize-ic { line-height: 0; }

.join-form {
  max-width: 440px;
  margin: 4px auto 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* 개인정보 수집·이용 안내 — 눌러서 펼치는 남색 띠 */
.agree-head {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 13px 14px;
  border: 2px solid var(--edge);
  border-radius: 12px;
  background: linear-gradient(180deg, #1b477f, var(--navy));
  box-shadow: var(--hard);
  color: #fff;
  font-family: var(--font-display);
  font-size: 16px;
}
.agree-head::-webkit-details-marker { display: none; }
.agree-head:focus-visible { outline: 3px solid var(--amber); outline-offset: 2px; }
.agree-arrow { font-size: 12px; transition: rotate .18s ease; }
.agree-box[open] .agree-arrow { rotate: 180deg; }
.agree-body {
  margin-top: 8px;
  padding: 14px 16px;
  border: 2px solid var(--line);
  border-radius: 12px;
  background: #f8fafd;
  font-size: 13.5px;
  color: var(--ink-soft);
  text-align: left;
}
.agree-body dl { margin: 0; display: grid; grid-template-columns: 76px 1fr; gap: 6px 10px; }
.agree-body dt { font-weight: 800; color: var(--navy); }
.agree-body dd { margin: 0; }
.agree-tip { margin: 10px 0 0; font-size: 12.5px; }

/* 동의 체크 */
.agree-check {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  text-align: left;
}
.agree-check input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.agree-mark {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border: 2px solid var(--edge);
  border-radius: 8px;
  background: #fff;
  position: relative;
}
.agree-mark::after {
  content: "";
  position: absolute;
  left: 8px;
  top: 3px;
  width: 7px;
  height: 14px;
  border: solid #fff;
  border-width: 0 3px 3px 0;
  rotate: 45deg;
  opacity: 0;
}
.agree-check input:checked + .agree-mark { background: var(--accent); }
.agree-check input:checked + .agree-mark::after { opacity: 1; }
.agree-check input:focus-visible + .agree-mark { outline: 3px solid var(--amber); outline-offset: 2px; }
.agree-label { font-size: 15px; font-weight: 700; color: var(--ink); }
.agree-label b { color: var(--warn); }

/* 이름 · 휴대폰 번호 — 이름표를 칸 위에 올린다 */
.join-form .who { gap: 14px; }
.join-form .who-field { flex-direction: column; align-items: stretch; gap: 6px; }
.join-form .who-field label {
  width: auto;
  font-family: var(--font-display);
  font-size: 16px;
  color: var(--navy);
}
/* 1행 도움 단추 둘 · 2행 정답 제출 — 서로 색을 달리해 한눈에 구분되게 한다 */
.controls-submit { margin-top: 10px; }
.btn-wide { flex: 1 1 100%; width: 100%; }
.controls-submit .btn { padding: 15px 14px; font-size: 19px; }

/* 글자하나 힌트 — 청록 */
#btn-hint {
  background: linear-gradient(170deg, #2fd0e8, #0e93ad);
  color: #fff;
  text-shadow: 0 2px 0 rgba(6, 50, 60, .45);
}
#btn-hint:hover:not(:disabled) { background: linear-gradient(170deg, #4ad9ee, #0a7f96); }
#btn-hint .btn-sub { color: #dffaff; }

/* 다른문제 풀기 — 보라 */
#btn-other {
  background: linear-gradient(170deg, #a394ff, #6a57e0);
  color: #fff;
  text-shadow: 0 2px 0 rgba(36, 22, 90, .45);
}
#btn-other:hover:not(:disabled) { background: linear-gradient(170deg, #b3a6ff, #5b46d6); }
#btn-other .btn-sub { color: #ece8ff; }

/* 정답 제출 — 초록. 이 화면에서 가장 힘을 준 단추다. */
#btn-submit:not(.is-locked) {
  background: linear-gradient(170deg, #35d07f, #12844a);
  color: #fff;
  text-shadow: 0 2px 0 rgba(4, 52, 30, .5);
  border-color: #0f7a44;
  box-shadow: 0 4px 0 rgba(22, 35, 62, .18);
}
#btn-submit:not(.is-locked):hover { background: linear-gradient(170deg, #4ade92, #0d6e3d); }

/* 커서를 올리면 또렷하게 떠오른다 */
.controls .btn:not(:disabled):hover {
  transform: translateY(-2px);
  box-shadow: 0 7px 0 var(--edge);
}
.controls .btn:not(:disabled):active {
  transform: translateY(3px);
  box-shadow: 0 2px 0 var(--edge);
}

/* 아직 못 누르는 단추.
   도움 단추 둘(힌트 · 다른문제)은 같은 잿빛, 정답 제출은 다른 빛으로 구분한다. */
#btn-hint:disabled,
#btn-other:disabled {
  background: #c9d1dd;
  color: #69748a;
  border-color: #98a4b8;
  box-shadow: 0 3px 0 #98a4b8;
  text-shadow: none;
  cursor: not-allowed;
}
#btn-hint:disabled .btn-sub,
#btn-other:disabled .btn-sub { color: #7c8799; }

/* 정답 제출이 잠겼을 때 — 열렸을 때의 초록이 비치는 연둣빛. 「곧 열린다」로 읽히게. */
#btn-submit.is-locked {
  background: #cfe6d7;
  color: #58806a;
  border-color: #9cc2ab;
  box-shadow: 0 4px 0 rgba(22, 35, 62, .18);
  text-shadow: none;
  cursor: pointer;          /* 누를 수 있다. 누르면 비어 있는 칸을 빨갛게 짚어 준다 */
}
#btn-submit.is-locked:hover {
  background: #bfdcc9;
  border-color: #7fae90;
}
/* 정답 제출만 그림자를 다른 박스와 같은 부드러운 것으로 둔다 */
.controls-submit .btn:not(:disabled):hover { box-shadow: 0 6px 0 rgba(22, 35, 62, .18); }
.controls-submit .btn:not(:disabled):active { box-shadow: 0 2px 0 rgba(22, 35, 62, .18); }
/* ---- 유형 고르기 ---- */
.theme-panel { padding: 12px 14px; }
.theme-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.theme-chip {
  flex: 1 1 auto;
  min-width: 132px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 10px 12px;
  border: 2px solid #c3cddb;
  border-radius: 12px;
  background: #f5f8fc;
  color: var(--ink-soft);
  font-family: var(--font-display);
  font-size: 15px;
}
.theme-chip .ic { font-size: 19px; }
.theme-chip.on {
  border-color: var(--edge);
  background: linear-gradient(160deg, #ffe9a8, var(--amber));
  color: var(--ink);
  box-shadow: 0 4px 0 var(--edge);
}
.theme-chip.done { opacity: .5; }
.theme-chip .tag {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 800;
  padding: 1px 7px;
  border-radius: 99px;
  border: 1.5px solid var(--edge);
  background: #fff;
  color: var(--ink);
}
/* 「다른문제 풀기」로 고르는 중일 때 — 누를 수 있는 유형을 도드라지게 한다 */
.theme-chip.pick {
  cursor: pointer;
  border-color: var(--edge);
  background: linear-gradient(160deg, #e6f7ff, #bfe6fb);
  color: var(--ink);
  box-shadow: 0 4px 0 var(--edge);
  font: inherit;
  font-family: var(--font-display);
  font-size: 15px;
  animation: chip-call 1.5s ease-in-out infinite;
}
.theme-chip.pick:hover {
  background: linear-gradient(160deg, #fff0b8, var(--amber));
  transform: translateY(-2px);
  box-shadow: 0 6px 0 var(--edge);
}
.theme-chip.pick:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--edge); }
.theme-chip.pick .tag { background: var(--accent); color: #fff; border-color: var(--edge); }
@keyframes chip-call {
  0%, 100% { box-shadow: 0 4px 0 var(--edge); }
  50%      { box-shadow: 0 4px 0 var(--edge), 0 0 0 4px rgba(23, 99, 199, .35); }
}
@media (prefers-reduced-motion: reduce) {
  .theme-chip.pick { animation: none; }
}

.theme-note { margin: 8px 2px 0; font-size: 12.5px; color: var(--ink-soft); }

/* ---- 가운데 시간 타이머 ---- */
.timer-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 16px;
  background:
    radial-gradient(420px 120px at 50% 0%, rgba(255, 197, 49, .22), transparent 70%),
    linear-gradient(160deg, #10294c, #0b1a35);
  color: #fff;
}
.timer-label { font-size: 12px; letter-spacing: .2em; color: #9fb6d6; }
.timer-face { display: flex; align-items: center; gap: 12px; }
.timer-ic { font-size: 28px; }
.timer-value {
  font-family: var(--font-display);
  font-size: 50px;
  line-height: 1.05;
  letter-spacing: .06em;
  font-variant-numeric: tabular-nums;
  color: var(--amber);
  text-shadow: 0 3px 0 rgba(0, 0, 0, .45);
}
/* 「재는 중 · 멈춰 있음」 알림표는 보이지 않게 둔다 (자리도 차지하지 않는다) */
.timer-state {
  display: none;
  font-size: 12px;
  font-weight: 800;
  padding: 3px 12px;
  border-radius: 99px;
  border: 2px solid rgba(255, 255, 255, .28);
  background: rgba(255, 255, 255, .12);
}
.timer-panel.running .timer-state {
  background: var(--amber);
  border-color: var(--edge);
  color: #3a2406;
}

/* ---- 점수판 ---- */
.status {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.stat {
  text-align: center;
  padding: 3px 6px;
  border: 2px solid var(--edge);
  border-radius: 14px;
  background: #f4f8fd;
  box-shadow: 0 4px 0 rgba(22, 35, 62, .18);
}
.stat-main { background: linear-gradient(160deg, #fff3cf, #ffe09a); }
.stat-icon { display: block; font-size: 13px; line-height: 1.15; }
.stat-label { display: block; font-size: 10.5px; line-height: 1.25; color: var(--ink-soft); }
.stat-value {
  display: block;
  font-family: var(--font-display);
  font-size: 18px;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

.gauge-row {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 10px;
}
.gauge {
  flex: 1 1 auto;
  height: 18px;
  background: #e6ebf2;
  border: 2px solid var(--edge);
  border-radius: 99px;
  overflow: hidden;
}
.gauge-fill {
  height: 100%;
  width: 0%;
  background:
    repeating-linear-gradient(115deg, rgba(255, 255, 255, .28) 0 8px, transparent 8px 16px),
    linear-gradient(90deg, var(--cyan), var(--accent) 55%, var(--amber));
  transition: width .3s ease;
}
.rank {
  flex: 0 0 auto;
  font-family: var(--font-display);
  font-size: 14.5px;
  color: var(--ink);
  background: linear-gradient(160deg, #ffe9a8, var(--amber));
  border: 2px solid var(--edge);
  box-shadow: 0 3px 0 var(--edge);
  border-radius: 99px;
  padding: 3px 14px;
  white-space: nowrap;
}

/* ---- 배치 ---- */
.board-area {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}
@media (max-width: 820px) {
  .board-area { grid-template-columns: minmax(0, 1fr); }
}

/* 「↺ 처음부터 다시」 — 되돌리는 단추라 다른 길잡이와 색을 달리한다 */
.link-btn-warn {
  background: #fff1ee;
  border-color: #c5301a;
  color: #a8280f;
  cursor: pointer;
}
.link-btn-warn:hover { background: #c5301a; color: #fff; }
/* ---- 낱말판 ---- */
.board-panel { display: flex; flex-direction: column; gap: 12px; }

.board {
  --cols: 9;
  --board-gap: 4px;
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  gap: var(--board-gap);
  justify-content: center;
  padding: 6px;
  width: 100%;
  max-width: calc(var(--cols) * 60px + (var(--cols) - 1) * var(--board-gap) + 12px);
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

.cell { position: relative; width: 100%; aspect-ratio: 1 / 1; }
.cell.block { background: transparent; }

.cell-btn {
  width: 100%;
  height: 100%;
  border: 2px solid var(--edge);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 22px;
  text-align: center;
  padding: 0;
  cursor: pointer;
  box-shadow: 0 3px 0 rgba(22, 35, 62, .22);
  transition: background .12s, transform .08s;
}
.cell-btn:focus-visible { outline: 3px solid var(--amber); outline-offset: 2px; }
.cell.active .cell-btn { background: #e4eefc; }
.cell.focus-cell .cell-btn {
  background: #c9e0ff;
  transform: translateY(-1px);
  box-shadow: 0 4px 0 var(--edge);
}
.cell.ok .cell-btn { background: var(--ok-soft); color: var(--ok); }
.cell.bad .cell-btn { background: var(--warn-soft); color: var(--warn); }
.cell.hinted .cell-btn { background: var(--hint-soft); }

.cell .num {
  position: absolute;
  top: 1px;
  left: 4px;
  font-size: 10px;
  line-height: 1;
  color: var(--ink-soft);
  pointer-events: none;
  font-weight: 800;
  z-index: 1;
}

.current-clue {
  margin: 0;
  min-height: 48px;
  padding: 11px 13px;
  background: linear-gradient(135deg, #fff5d8, #ffe9ae);
  border: 2px solid var(--edge);
  border-radius: 12px;
  font-size: 14.5px;
}
.current-clue b { font-family: var(--font-display); color: #0b1220; }

/* ---- 글자 조각 ---- */
.bank-area {
  padding: 13px;
  background: #eef3f9;
  border: 2px dashed #9fb0c6;
  border-radius: 14px;
}
.bank-title {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-size: 15px;
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}
.bank-help { font-family: var(--font-body); font-size: 12px; font-weight: 400; color: var(--ink-soft); }
.bank {
  --tile-cols: 6;
  --tile-gap: 7px;
  display: grid;
  grid-template-columns: repeat(var(--tile-cols), minmax(0, 1fr));
  gap: var(--tile-gap);
  justify-content: center;
  width: 100%;
  max-width: calc(var(--tile-cols) * 62px + (var(--tile-cols) - 1) * var(--tile-gap));
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}
.tile {
  width: 44px;
  height: 44px;
  border: 2px solid var(--edge);
  border-radius: 10px;
  background: linear-gradient(#ffffff, #eef3fa);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 21px;
  cursor: pointer;
  padding: 0;
  box-shadow: 0 4px 0 var(--edge);
  transition: transform .08s, background .12s, box-shadow .08s;
}
.tile:hover { background: linear-gradient(#fff6db, #ffe7a6); }
.tile:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--edge); }
.tile:focus-visible { outline: 3px solid var(--amber); outline-offset: 2px; }
.tile.used {
  background: #e3e8ef;
  color: transparent;
  border-color: #c2cbd7;
  box-shadow: none;
  cursor: default;
  transform: none;
}


/* ---- 3장 · 낱말판 꾸밈새 (노란 판 · 하늘색 채움 · 남색 조각) ---- */
.board-panel {
  background: linear-gradient(180deg, #f9e35c, #f3d43f);
  border-color: var(--edge);
  padding: 16px 14px;
}

.board { --board-gap: 8px; padding: 2px; }

/* 글자가 안 들어가는 칸 — 노란 바탕에 흰 테두리만 남긴다 */
.cell.block {
  background: rgba(255, 255, 255, .16);
  border: 2px solid rgba(255, 255, 255, .62);
  border-radius: 12px;
}

/* 글자가 들어가는 빈칸 — 흰 네모 */
.board .cell-btn {
  border: none;
  border-radius: 12px;
  background: #fff;
  color: var(--navy);
  font-size: clamp(16px, 5.8vw, 30px);
  box-shadow: 0 2px 4px rgba(22, 35, 62, .18);
}

/* 글자를 채운 칸 — 하늘색 */
.cell.filled .cell-btn { background: #b9e2f7; color: var(--navy); }

/* 지금 고른 칸 — 하늘색에 남색 굵은 테두리 */
.cell.focus-cell .cell-btn {
  background: #aedcf6;
  border: 3px solid var(--navy);
  transform: none;
  box-shadow: 0 2px 6px rgba(22, 35, 62, .3);
}
/* 지금 고른 낱말의 나머지 칸 */
.cell.active:not(.focus-cell) .cell-btn { background: #eaf7ff; }
.cell.active.filled:not(.focus-cell) .cell-btn { background: #b9e2f7; }

.cell .num { color: #3d5680; }

/* 열쇠 카드 — 왼쪽에 그림, 오른쪽에 글 */
.current-clue {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 74px;
  padding: 14px 16px;
  background: #fdf6e6;
  border: 2px solid #f0e2bd;
  border-radius: 16px;
  box-shadow: 0 2px 6px rgba(22, 35, 62, .12);
  font-size: 20px;
  color: var(--navy);
  font-weight: 700;
  line-height: 1.5;
}
.clue-ic {
  flex: 0 0 auto;
  align-self: center;     /* 글이 두 줄로 늘어나도 그림은 늘 세로 한가운데 */
  width: 58px;
  height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;
  line-height: 1;
}
.clue-body { flex: 1 1 auto; min-width: 0; }
.current-clue b { font-family: var(--font-display); color: var(--navy); }

/* 글자 조각 — 남색 단추에 흰 글자 */
.bank-area {
  background: linear-gradient(180deg, #f9e35c, #f3d43f);
  border: 2px solid var(--edge);
}
.bank { --tile-gap: 10px; }
.tile {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  border: 2px solid #0d2247;
  border-radius: 14px;
  background: linear-gradient(180deg, #2d4f96, #1b3a76);
  color: #fff;
  font-size: clamp(17px, 5.6vw, 27px);
  box-shadow: 0 5px 0 #0d2247;
}
.tile:hover { background: linear-gradient(180deg, #385cab, #24478a); }
.tile:active { transform: translateY(4px); box-shadow: 0 1px 0 #0d2247; }
.tile.used {
  background: #d7dbe2;
  border-color: #c2c7d0;
  color: #a4abb6;
  box-shadow: none;
  cursor: default;
  transform: none;
}

@media (max-width: 560px) {
  .tile { width: 50px; height: 50px; font-size: 23px; border-radius: 12px; }
  .clue-ic { width: 40px; height: 40px; font-size: 27px; }
}
/* 정답이 아닌 글자를 골랐을 때 — 칸이 잠깐 좌우로 흔들린다 */
@keyframes cell-shake {
  0%, 100% { translate: 0 0; }
  15%      { translate: -5px 0; }
  30%      { translate: 4px 0; }
  45%      { translate: -3px 0; }
  60%      { translate: 2px 0; }
  75%      { translate: -1px 0; }
}
.cell.shake { animation: cell-shake .4s ease; }
.cell.shake .cell-btn { background: #ffe0da; }
@media (prefers-reduced-motion: reduce) {
  .cell.shake { animation: none; }
}

/* 좁은 화면에서는 EVENT 표가 글 아래로 내려온다 */
@media (max-width: 700px) {
  .event-badge { position: static; translate: none; }
}
/* 낱말 하나를 맞혔을 때 — 칸이 밝게 부풀었다 가라앉는다 */
@keyframes cell-sparkle {
  0%   { scale: 1;    background: #b9e2f7; box-shadow: 0 2px 4px rgba(22, 35, 62, .18); }
  35%  { scale: 1.16; background: #fff6c2; box-shadow: 0 0 0 5px rgba(255, 213, 74, .85), 0 0 22px 6px rgba(255, 213, 74, .7); }
  70%  { scale: 1.04; background: #eafaff; box-shadow: 0 0 0 3px rgba(255, 213, 74, .45), 0 0 14px 3px rgba(255, 213, 74, .35); }
  100% { scale: 1;    background: #b9e2f7; box-shadow: 0 2px 4px rgba(22, 35, 62, .18); }
}
.cell.sparkle { z-index: 2; }
.cell.sparkle .cell-btn {
  animation: cell-sparkle .85s ease-out;
  animation-delay: inherit;
}
@media (prefers-reduced-motion: reduce) {
  .cell.sparkle .cell-btn { animation: none; box-shadow: 0 0 0 3px var(--amber); }
}
/* ---- 4장 · 스테이지 클리어 ---- */
.clear-panel {
  text-align: center;
  padding: 34px 20px 28px;
  background:
    radial-gradient(420px 200px at 50% -10%, #fff2c6 0, transparent 70%),
    #fff;
}

.clear-badge { margin: 0 0 10px; display: flex; justify-content: center; gap: 10px; }
.clear-star {
  font-size: 34px;
  color: var(--amber);
  text-shadow: 0 3px 0 var(--amber-deep), 0 6px 10px rgba(8, 18, 40, .3);
  animation: star-pop .5s ease-out both;
}
.clear-star:nth-child(2) { animation-delay: .16s; font-size: 44px; }
.clear-star:nth-child(3) { animation-delay: .32s; }
@keyframes star-pop {
  0%   { scale: .2; rotate: -40deg; opacity: 0; }
  70%  { scale: 1.2; rotate: 8deg;  opacity: 1; }
  100% { scale: 1;   rotate: 0deg;  opacity: 1; }
}

.clear-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 46px;
  line-height: 1.1;
  letter-spacing: .06em;
  color: var(--navy);
  text-shadow:
    0 2px 0 #b4c1d5,
    0 4px 0 #8d9cb7,
    0 8px 14px rgba(8, 18, 40, .3);
}
.clear-title-ko {
  margin: 6px 0 18px;
  font-family: var(--font-display);
  font-size: 24px;
  color: var(--ink);
}

.clear-lead {
  margin: 0 auto 22px;
  max-width: 460px;
  font-size: 17px;
  line-height: 1.75;
  font-weight: 700;
  color: var(--ink);
}

.clear-summary {
  margin: 0 auto 16px;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  border: 2px solid var(--edge);
  border-radius: 14px;
  overflow: hidden;
  background: var(--line);
  text-align: left;
}
.clear-summary > div {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 15px;
  background: #fff;
}
.clear-summary dt {
  flex: 0 0 86px;
  font-size: 14px;
  font-weight: 800;
  color: var(--navy);
}
.clear-summary dd {
  margin: 0;
  flex: 1 1 auto;
  font-family: var(--font-display);
  font-size: 17px;
  color: var(--ink);
}

.clear-note { margin: 0 0 20px; font-size: 13.5px; color: var(--ink-soft); }
.clear-note:empty { margin: 0; }

.clear-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  max-width: 420px;
  margin: 0 auto;
}
.clear-buttons .btn { text-decoration: none; text-align: center; }

@media (prefers-reduced-motion: reduce) {
  .clear-star { animation: none; }
}
@media (max-width: 560px) {
  .clear-title { font-size: 34px; }
  .clear-title-ko { font-size: 20px; }
  .clear-lead { font-size: 15.5px; }
}
/* ---- 커서를 올렸을 때 (글자색과 또렷이 대비되게) ---- */

/* 글자 조각: 남색 바탕 + 흰 글자 → 노란 바탕 + 남색 글자 */
.tile:not(.used):hover {
  background: linear-gradient(180deg, #ffe27a, #ffc531);
  color: #0d2247;
  border-color: #0d2247;
  transform: translateY(-2px);
  box-shadow: 0 7px 0 #0d2247;
}

/* 낱말판 빈칸: 흰 바탕 → 연노랑, 테두리로 어디를 가리키는지 알려 준다 */
.board .cell-btn:hover {
  background: #fff3bf;
  box-shadow: 0 0 0 3px var(--amber-deep), 0 2px 4px rgba(22, 35, 62, .18);
}
/* 이미 채운 칸: 하늘색 + 남색 글자 → 살구색. 「누르면 빠진다」는 뜻으로 읽히게 */
.cell.filled .cell-btn:hover {
  background: #ffd9c2;
  color: #8a3b10;
  box-shadow: 0 0 0 3px #e8702a, 0 2px 4px rgba(22, 35, 62, .18);
}
/* 지금 고른 칸은 커서를 올려도 남색 테두리를 지킨다 */
.cell.focus-cell .cell-btn:hover { box-shadow: 0 2px 6px rgba(22, 35, 62, .3); }
/* 덜 채운 채로 「정답 제출」을 눌렀을 때 — 비어 있는 칸이 빨갛게 번쩍인다 */
@keyframes cell-need {
  0%, 100% { background: #fff; box-shadow: 0 2px 4px rgba(22, 35, 62, .18); }
  20%, 80% { background: #ffd9d2; box-shadow: 0 0 0 3px #d93025, 0 0 14px 3px rgba(217, 48, 37, .45); }
}
.cell.need { z-index: 2; }
.cell.need .cell-btn {
  animation: cell-need 1.4s ease-in-out;
  animation-delay: inherit;
}
@media (prefers-reduced-motion: reduce) {
  .cell.need .cell-btn {
    animation: none;
    background: #ffd9d2;
    box-shadow: 0 0 0 3px #d93025;
  }
}

/* ---- 단추 ---- */
.controls { display: flex; flex-wrap: wrap; gap: 10px; }
.btn {
  flex: 1 1 auto;
  min-width: 132px;
  padding: 12px 14px;
  border: 3px solid var(--edge);
  border-radius: 12px;
  background: #fff;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 15.5px;
  cursor: pointer;
  box-shadow: var(--hard);
  transition: transform .08s, box-shadow .08s, background .12s;
}
.btn:hover { background: #fff6db; }
.btn:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--edge); }
.btn:disabled {
  color: #8d99a8;
  background: #eef1f5;
  border-color: #b9c3d0;
  box-shadow: 0 3px 0 #b9c3d0;
  cursor: default;
  transform: none;
}
.btn-main {
  background: linear-gradient(160deg, #3a90f0, #1763c7);
  color: #fff;
}
.btn-main:hover { background: linear-gradient(160deg, #2f83e2, #124f9f); }
.btn-sub {
  margin-left: 5px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 400;
  color: var(--ink-soft);
}
.btn-main .btn-sub { color: #dceaff; }
.btn:disabled .btn-sub { color: #9aa5b2; }

.message { margin: 0; min-height: 22px; font-size: 14.5px; font-weight: 800; }
.message.ok { color: var(--ok); }
.message.bad { color: var(--warn); }
.message.info { color: var(--ink-soft); font-weight: 500; }
.message.party {
  color: #3a2406;
  background: linear-gradient(135deg, #fff2c4, #ffd76a);
  border: 3px solid var(--edge);
  box-shadow: 0 5px 0 var(--edge);
  border-radius: 14px;
  padding: 12px 14px;
  font-family: var(--font-display);
  font-size: 17px;
}

/* ---- 열쇠 ---- */
.clue-panel { display: flex; flex-direction: column; gap: 14px; }
/* 「가로 열쇠 · 세로 열쇠」 — 색을 겹겹이 쌓아 도톰하게 솟은 것처럼 보이게 한 아기자기한 제목.
   바탕이 흰 칸이므로 글자는 진한 색으로 넣어야 또렷하게 읽힌다. */
.clue-group h2 {
  margin: 0 0 12px;
  padding-bottom: 8px;
  border-bottom: 3px solid var(--edge);
  font-family: var(--font-display);
  font-size: 24px;
  letter-spacing: .06em;
  paint-order: stroke fill;
}

/* 가로 열쇠 — 진한 주황 */
.clue-group:first-child h2 {
  color: #e0510b;
  -webkit-text-stroke: 2.5px #5c2100;
  text-shadow:
    0 2px 0 #a13a06,
    0 3px 0 #8a3205,
    0 4px 0 #742a04,
    0 5px 0 #5c2100,
    0 8px 12px rgba(92, 33, 0, .4);
}

/* 세로 열쇠 — 진한 청록 */
.clue-group:last-child h2 {
  color: #0d7f9c;
  -webkit-text-stroke: 2.5px #03323f;
  text-shadow:
    0 2px 0 #086076,
    0 3px 0 #075263,
    0 4px 0 #054351,
    0 5px 0 #03323f,
    0 8px 12px rgba(3, 50, 63, .4);
}
.clue-list { list-style: none; margin: 0; padding: 0; }
.clue-list li {
  display: flex;
  gap: 8px;
  padding: 8px 9px;
  border-radius: 10px;
  cursor: pointer;
  font-size: 14px;
  border: 2px solid transparent;
}
.clue-list li:hover { background: #f1f5fa; }
.clue-list li.active { background: #fff3d1; border-color: var(--edge); }
.clue-list li.done { color: var(--ink-soft); text-decoration: line-through; }
.clue-list li.done .n::after { content: " ✓"; color: var(--ok); }
.clue-list li .n { font-family: var(--font-display); color: var(--accent); min-width: 22px; }
.clue-list li .len { margin-left: auto; font-size: 12px; color: var(--ink-soft); white-space: nowrap; }

/* ---- 저장 · 제출 ---- */
.submit-area {
  padding-top: 14px;
  border-top: 2px dashed var(--line);
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.submit-buttons { display: flex; gap: 10px; }
.submit-buttons .btn { flex: 1 1 0; min-width: 0; }
.submit-note { margin: 0; font-size: 13px; color: var(--ink-soft); }
.submit-note.done { color: var(--ok); font-weight: 800; }
.submit-note.warn { color: var(--warn); font-weight: 800; }

/* ---- 좁은 화면 ---- */
@media (max-width: 560px) {
  .top h1 { font-size: 22px; }
  .event-badge { width: 74px; height: 56px; }
  .event-badge-main { font-size: 18px; }
  .wt { width: 60px; height: 64px; font-size: 34px; }
  .hero-word { font-size: 38px; }
  #screen-join .prize-title { font-size: 28px; }
  #screen-join .prize-title .prize-ic { font-size: 34px; }
  .icon-btn { width: 100%; }
  .timer-value { font-size: 40px; }
  .status { grid-template-columns: repeat(3, 1fr); }
  .stat-value { font-size: 16px; }
  .cell-btn { font-size: clamp(14px, 5vw, 18px); }
  .tile { width: 38px; height: 38px; font-size: 18px; }
  .who .who-field { flex: 1 1 100%; }
  .who-confirm { flex: 1 1 100%; }
}


/* ===== 완성된 낱말 · 잠긴 칸 =====
   맞힌 낱말의 칸은 초록 테를 둘러 「끝난 칸」임을 보이고, 더는 고쳐지지 않는다. */
.cell.locked .cell-btn {
  background: var(--ok-soft);
  color: var(--ok);
  font-weight: 800;
  cursor: default;
  box-shadow: inset 0 0 0 2px rgba(28, 122, 69, .35);
}
.cell.locked .cell-btn:hover,
.cell.locked.filled .cell-btn:hover {
  background: var(--ok-soft);
  box-shadow: inset 0 0 0 2px rgba(28, 122, 69, .35);
}
.cell.locked.active .cell-btn,
.cell.locked.active.filled:not(.focus-cell) .cell-btn { background: var(--ok-soft); }
.cell.locked.focus-cell .cell-btn { outline: 3px solid var(--amber); outline-offset: 2px; }

/* ===== 「다른문제 풀기」로 유형 줄을 부를 때 ===== */
.theme-panel { scroll-margin-top: 12px; }
.theme-panel.calling { animation: theme-call 1.6s ease-out 1; }
@keyframes theme-call {
  0%, 100% { box-shadow: 0 0 0 0 rgba(245, 179, 1, 0); }
  20%, 60% { box-shadow: 0 0 0 5px rgba(245, 179, 1, .55); }
}
@media (prefers-reduced-motion: reduce) {
  .theme-panel.calling { animation: none; box-shadow: 0 0 0 4px rgba(245, 179, 1, .55); }
}