/* 메인 게임 화면(`/`) 레이아웃. 색·간격·폰트·폭은 tokens.css 변수만 쓴다 —
 * 이 파일에 hex 색이나 새 간격이 생기면 토큰을 안 쓴 것이다(tests/test_web_design.py).
 * 다크모드는 따로 규칙을 두지 않는다: 변수만 쓰면 tokens.css 의
 * `prefers-color-scheme: dark` 재정의가 그대로 따라온다(OVERRIDES §9).
 *
 * 클래스 이름은 토큰 이름을 그대로 쓴다(`primary-button`, `tile-empty`,
 * `tile-correct`, `tile-wrong`) — 마크업만 보고 "이 면이 어느 토큰인가" 를 안다.
 */

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--color-background);
  color: var(--color-foreground);
  font-family: var(--font-sans);
  font-size: var(--font-size-base);
  line-height: var(--line-height-body);
  letter-spacing: var(--letter-spacing-ko);
  -webkit-text-size-adjust: 100%;
}

body:lang(en) {
  letter-spacing: var(--letter-spacing-en);
}

/* OVERRIDES §10: 중앙 정렬 **하나**, ≤480 은 폭 100% / 481+ 는 480px 고정.
 * 라이트 모드에선 카드 면을 깔지 않는다(§4) — 배경과 같은 면 위에서 섹션 구분은
 * 헤어라인과 여백이 한다. 그래서 이름만 `card` 고 면도 그림자도 없다. */
.card,
.site-footer {
  box-sizing: border-box;
  width: 100%;
  max-width: var(--content-max-width);
}

.card {
  padding: var(--space-6) var(--space-4) var(--space-8);
}

.site-footer {
  padding: 0 var(--space-4) var(--space-12);
}

/* 폭이 고정되는 지점과 패딩이 넓어지는 지점을 같은 481px 로 둔다(legal.css 와 같다).
 * 패딩은 §4 의 "16(모바일) 24(태블릿+)". */
@media (min-width: 481px) {
  .card {
    padding: var(--space-6) var(--space-6) var(--space-8);
  }

  .site-footer {
    padding: 0 var(--space-6) var(--space-12);
  }
}

/* 포커스 링은 brand 다(OVERRIDES §2 — brand 는 테두리·밑줄·포커스 링에만). */
:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: 2px;
}

/* --- 오프라인 배너 (OVERRIDES §7) ------------------------------------------ */
/* 카드 폭에 맞추지 않고 화면 폭을 다 쓴다 — 상단 배너는 "지금 전체가 오프라인"
 * 이라는 말이라 카드 안에 들어가면 안 된다. */

.offline-banner {
  box-sizing: border-box;
  width: 100%;
  padding: var(--space-3) var(--space-4);
  border-bottom: var(--border-hairline) solid var(--color-border);
  background: var(--color-muted);
  color: var(--color-foreground);
  font-size: var(--font-size-sm);
  text-align: center;
}

/* 대결 배너는 오프라인 배너 자리에 같은 띠로 붙는다. 알림이 아니라 초대라서 면은
   brand-subtle 이고, 글자색은 foreground 그대로다(OVERRIDES §2: brand 색 글자 금지). */
.challenge-banner {
  box-sizing: border-box;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4);
  border-bottom: var(--border-hairline) solid var(--color-border);
  background: var(--color-brand-subtle);
  color: var(--color-foreground);
  font-size: var(--font-size-sm);
}

.challenge-banner-body {
  flex: 1;
  max-width: var(--content-max-width);
  padding-top: var(--space-3);
}

/* 한 줄을 넘는 문구라 ko 가 "이/겨보세요" 처럼 낱말 가운데서 끊기지 않게 한다. */
.challenge-banner-text {
  margin: 0;
  font-weight: 600;
  word-break: keep-all;
}

.challenge-language {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: var(--space-2);
  margin: 0;
  color: var(--color-muted-foreground);
}

/* --- 머리말 · 섹션 내비 ---------------------------------------------------- */

/* 제목과 스트릭이 한 줄에 다 안 들어가면 스트릭이 아랫줄로 내려간다.
 * `wrap` 이 없으면 줄바꿈 금지인 스트릭(`white-space: nowrap`)과 제목의 최소 단어
 * 폭이 한 행에 고정돼, 320px 영어 화면에서 내용이 카드 밖으로 ~49px 넘치고 가로
 * 스크롤이 생긴다 — OVERRIDES §10 의 "모든 폭에서 카드 안" 위반이다
 * (review/impl-review-18.md D-18-3). */
.header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-1) var(--space-3);
  margin-bottom: var(--space-4);
}

/* 제목은 스케일의 맨 위(32)다. 24 로 두면 섹션 제목(20)과 1.2 배라 단계가 사실상
   평평해지고(`impeccable` 디자인 훅의 flat-type-hierarchy), Editorial Light 는
   타이포가 주인공인 방향이다 — 법적 문서 페이지의 `.doc-title` 도 같은 토큰이다. */
.header h1 {
  margin: 0;
  font-size: var(--font-size-2xl);
  font-weight: 700;
  line-height: 1.2;
}

/* 스트릭 글자는 `foreground` 다 — brand 를 글자색으로 쓰면 흰 면 위에서 3.6:1 로
   AA 미달이고 OVERRIDES §2 가 "스트릭 숫자는 foreground" 로 못 박아 뒀다.
   불꽃만 brand 색 Lucide `flame` 아이콘이다(§8 — 이모지를 쓰지 않는다). */
.streak {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin: 0;
  font-size: var(--font-size-sm);
  font-weight: 700;
  color: var(--color-foreground);
  white-space: nowrap;
}

.streak-icon {
  width: 16px;
  height: 16px;
  flex: none;
  color: var(--color-brand);
}

/* 스트릭과 `?` 버튼은 한 덩이로 오른쪽에 붙는다 — 따로 두면 `space-between` 이
   스트릭을 가운데로 민다. */
.header-end {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* 아이콘만 있는 버튼. 글자는 작아도 누르는 면은 44px 이다(OVERRIDES §5). */
.icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--touch-target-min);
  height: var(--touch-target-min);
  padding: 0;
  border: none;
  background: none;
  color: var(--color-muted-foreground);
  cursor: pointer;
}

.icon-button svg {
  width: 20px;
  height: 20px;
}

/* 활성 섹션은 brand 밑줄로 표시한다(OVERRIDES §2: 활성 탭 밑줄). 글자색은
   foreground 로 올려서, 색을 못 보는 경우에도 굵기와 밑줄로 구분된다. */
.section-nav {
  display: flex;
  justify-content: center;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
  border-bottom: var(--border-hairline) solid var(--color-border);
}

.section-link {
  min-height: var(--touch-target-min);
  padding: 0 var(--space-1);
  border: none;
  border-bottom: 2px solid transparent;
  background: none;
  color: var(--color-muted-foreground);
  font-family: inherit;
  font-size: var(--font-size-base);
  cursor: pointer;
}

.section-link[aria-pressed="true"] {
  border-bottom-color: var(--color-brand);
  color: var(--color-foreground);
  font-weight: 700;
}

.section h2 {
  margin: 0 0 var(--space-2);
  font-size: var(--font-size-lg);
  font-weight: 700;
}

.section h3 {
  margin: var(--space-4) 0 var(--space-2);
  font-size: var(--font-size-base);
  font-weight: 700;
}

/* --- 주 버튼 · 입력 -------------------------------------------------------- */

.primary-button {
  min-height: var(--touch-target-min);
  padding: var(--space-3) var(--space-4);
  border: none;
  border-radius: var(--radius-button);
  background: var(--color-primary-button);
  color: var(--color-on-primary-button);
  font-family: inherit;
  font-size: var(--font-size-base);
  font-weight: 600;
  cursor: pointer;
}

.link-button {
  min-height: var(--touch-target-min);
  padding: 0;
  border: none;
  background: none;
  color: var(--color-muted-foreground);
  font-family: inherit;
  font-size: var(--font-size-sm);
  text-decoration: underline;
  text-decoration-color: var(--color-brand);
  text-underline-offset: 3px;
  cursor: pointer;
}

/* --- 계정 · 백업 패널 ("내 기록" 섹션) ------------------------------------- */

.account {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2) var(--space-4);
  margin-bottom: var(--space-3);
}

.account-actions {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
}

.account-actions .link-button {
  display: inline-flex;
  align-items: center;
  text-decoration-color: currentColor;
}

.linked-account {
  width: 100%;
  margin: 0;
  color: var(--color-muted-foreground);
  font-size: var(--font-size-sm);
  text-align: center;
}

/* 패널은 `muted` 면 하나로 구분한다(OVERRIDES §2: muted 는 입력창·빈 타일 배경). */
.panel {
  padding: var(--space-3);
  border-radius: var(--radius-card);
  background: var(--color-muted);
  margin-bottom: var(--space-3);
}

.panel-desc {
  margin: 0 0 var(--space-2);
  color: var(--color-muted-foreground);
  font-size: var(--font-size-sm);
}

.token-row {
  display: flex;
  gap: var(--space-2);
}

.token-row input,
.guess-form input {
  flex: 1;
  min-width: 0;
  padding: var(--space-2) var(--space-3);
  border: var(--border-hairline) solid var(--color-border);
  border-radius: var(--radius-button);
  background: var(--color-card);
  color: var(--color-foreground);
  font-family: inherit;
  font-size: var(--font-size-base);
}

.token-row input {
  font-family: ui-monospace, monospace;
  font-size: var(--font-size-sm);
}

/* 브라우저 기본 placeholder 색은 다크 면 위에서 3.4:1 로 AA 미달이다
   (`impeccable detect` 가 다크 판에서 잡았다 — review/impl-evidence-18.md §4).
   보조 텍스트 토큰으로 올리면 라이트 7.4:1 / 다크 6.4:1 이다. */
.token-row input::placeholder,
.guess-form input::placeholder {
  color: var(--color-muted-foreground);
  opacity: 1;
}

/* --- 로딩 스켈레톤 (OVERRIDES §7: 스피너 금지) ----------------------------- */

.skeleton {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.skeleton-line {
  width: 100%;
  max-width: 220px;
  height: var(--font-size-base);
  border-radius: var(--radius-tile);
  background: var(--color-muted);
}

.skeleton-line-short {
  max-width: 120px;
}

/* 전환 모션은 `prefers-reduced-motion` 이면 끈다(OVERRIDES §7: 즉시 표시). */
@media (prefers-reduced-motion: no-preference) {
  .skeleton-line,
  .skeleton .tile {
    animation: skeleton-pulse 1.4s ease-in-out infinite;
  }
}

@keyframes skeleton-pulse {
  50% {
    opacity: 0.55;
  }
}

/* --- "어떻게 하나요?" 모달 (티켓 05) -------------------------------------- */

/* 결과 시트와 같은 중앙 다이얼로그다(스펙: 웹은 바텀시트 대신 `<dialog>`). 폭은
   카드와 같은 토큰에서 좌우 여백만 뺀다. */
.help-dialog {
  box-sizing: border-box;
  width: calc(100% - var(--space-8));
  max-width: var(--content-max-width);
  padding: var(--space-6);
  border: var(--border-hairline) solid var(--color-border);
  border-radius: var(--radius-card);
  background: var(--color-card);
  color: var(--color-foreground);
}

.help-dialog::backdrop {
  background: color-mix(in srgb, var(--color-foreground) 40%, transparent);
}

.help-dialog h2 {
  margin: 0 0 var(--space-2);
  font-size: var(--font-size-xl);
  font-weight: 700;
}

.help-intro {
  margin: 0;
}

.help-caption {
  margin: 0 0 var(--space-4);
  color: var(--color-muted-foreground);
  font-size: var(--font-size-sm);
  text-align: center;
}

.help-rules {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin: 0 0 var(--space-6);
  padding: 0;
  list-style: none;
  font-size: var(--font-size-sm);
}

.help-feedback {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.help-feedback .tile {
  flex: none;
}

.help-close {
  width: 100%;
}

/* --- 인라인 상태 카드 (네트워크 오류 · 퍼즐 없음) ------------------------- */

.state-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  padding: var(--space-4);
  border: var(--border-hairline) solid var(--color-border);
  border-radius: var(--radius-card);
  text-align: center;
}

.state-text {
  margin: 0;
}

.state-countdown {
  margin: 0;
  color: var(--color-muted-foreground);
  font-size: var(--font-size-sm);
  font-variant-numeric: tabular-nums;
}

/* --- 퍼즐 · 타일 ----------------------------------------------------------- */

.puzzle {
  margin-bottom: var(--space-4);
  text-align: center;
}

/* 날짜 줄(SCREENS S1, stitch e1_home): 왼쪽 "날짜 · 번호 · 카테고리", 오른쪽 작은
   "새 퍼즐" 칩, 아래 가는 구분선. 좁은 폭에서는 칩이 아랫줄로 내려간다. */
.puzzle-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-1) var(--space-2);
  padding-bottom: var(--space-2);
  margin-bottom: var(--space-4);
  border-bottom: var(--border-hairline) solid var(--color-border);
  text-align: left;
}

.puzzle-heading {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-1);
  margin: 0;
  color: var(--color-muted-foreground);
  font-size: var(--font-size-sm);
  font-weight: 500;
}

.new-puzzle-chip {
  padding: 2px var(--space-2);
  border: var(--border-hairline) solid var(--color-border);
  border-radius: var(--space-1);
  background: var(--color-muted);
  color: var(--color-muted-foreground);
  font-size: var(--font-size-xs);
  white-space: nowrap;
}

/* `--slots` 는 행의 글자 칸 수다(app.js 가 행마다 넣는다). 글자 크기를 칸 폭에
   맞추는 데 쓴다 — 아래 `.tile`. */
.tile-row {
  --slots: 5;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
}

.mask-row {
  margin: var(--space-3) 0 var(--space-1);
}

/* 360px 폭에서도 가로 스크롤이 없게(US 47) 타일은 40px 를 기준으로 **줄어든다** —
   책 제목처럼 10글자가 넘는 행은 카드 폭(328px)에 다 안 들어간다. 정사각형은
   aspect-ratio 가 지키고, 글자는 "행 폭 ÷ 칸 수" 에 맞춰 같이 작아진다. 칸이 넉넉한
   행(대부분의 2~4글자)은 토큰 크기 그대로다. */
.puzzle,
.board,
.skeleton {
  container-type: inline-size;
}

.tile {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 1 40px;
  min-width: 0;
  min-height: 0;
  aspect-ratio: 1;
  border-radius: var(--radius-tile);
  font-size: min(var(--font-size-xl), 100cqi / var(--slots) * 0.6);
  font-weight: 700;
  line-height: 1;
}

.mask-row .tile {
  flex-basis: 48px;
  font-size: min(var(--font-size-2xl), 100cqi / var(--slots) * 0.65);
}

/* 구분자(공백·하이픈)는 타일이 아니라 타일 사이 간격이다. */
.tile-gap {
  flex: 0 0 10px;
}

/* 보이는 글자는 타이포가 주인공이라 면을 안 깐다(OVERRIDES §1), 빈 타일만 면이다. */
.tile-revealed {
  background: none;
}

.tile-empty {
  background: var(--color-tile-empty);
}

/* 피드백은 색만으로 구분하지 않는다(US 3 · OVERRIDES §2): correct 는 굵은 글자 +
   모서리 체크, wrong 은 취소선. */
.tile-correct {
  background: var(--color-tile-correct);
  color: var(--color-tile-text-on-correct);
  font-weight: 800;
}

/* 체크 표시는 Lucide `check` 패스를 마스크로 쓴다. 마스크는 알파만 보므로 색은
   `currentColor`(= 타일 글자색 토큰)가 정하고, 데이터 URI 안의 `stroke` 는
   "칠해지기만 하면 되는" 값이라 테마 색이 아니다. */
.tile-correct::after {
  content: "";
  position: absolute;
  top: 5%;
  right: 5%;
  /* 40px 타일에서 11px — 긴 행에서 타일이 줄면 같이 줄어 글자를 덮지 않는다. */
  width: 28%;
  height: 28%;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
}

.tile-wrong {
  background: var(--color-tile-wrong);
  color: var(--color-foreground);
  text-decoration: line-through;
  text-decoration-thickness: 2px;
}

.length-caption {
  margin: 0 0 var(--space-2);
  color: var(--color-muted-foreground);
  font-size: var(--font-size-xs);
}

.attempts-left {
  margin: 0;
  color: var(--color-foreground);
  font-size: var(--font-size-sm);
}

.board {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: var(--space-3);
}

/* --- 제출 · 안내 ----------------------------------------------------------- */

.guess-form {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

/* 카운터 `0/N` 은 입력창 안 오른쪽에 얹는다(SCREENS S1). 글자가 카운터 밑으로
   들어가지 않게 입력창 오른쪽 여백을 카운터 자리만큼 넓힌다. */
.guess-field {
  position: relative;
  display: flex;
  flex: 1;
  min-width: 0;
}

.guess-form .guess-field input {
  padding-right: calc(var(--space-3) + 4em);
}

.guess-counter {
  position: absolute;
  top: 50%;
  right: var(--space-3);
  transform: translateY(-50%);
  color: var(--color-muted-foreground);
  font-size: var(--font-size-xs);
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}

/* 힌트 카드(S1 HintCard). 목업(stitch e1 "Quiet Hint Section")처럼 상자 없이 한 줄로
   둔다 — 이미 `.card` 안이라 테두리를 또 두르면 카드 속 카드가 된다.
   잠김은 자물쇠 + 보조 텍스트, 열림은 힌트 문장. */
.hint-card {
  margin: 0 0 var(--space-3);
  font-size: var(--font-size-sm);
}

.hint-locked {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  color: var(--color-muted-foreground);
}

.hint-lock-icon {
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
}

/* 열린 힌트는 brand 를 **세로선으로만** 쓴다 — 글자색으로 쓰면 AA 미달이다(OVERRIDES §2). */
.hint {
  margin: 0;
  padding-left: var(--space-3);
  border-left: 2px solid var(--color-brand);
  color: var(--color-foreground);
}

.message {
  min-height: 1.2em;
  margin: 0;
  color: var(--color-destructive-text);
  font-size: var(--font-size-sm);
  white-space: pre-wrap;
}

/* 복사 완료 같은 짧은 확인은 보조 텍스트다 — 초록은 게임 피드백 전용이라
   여기에 쓰지 않는다(OVERRIDES §2: Secondary 초록 금지). */
.copied {
  margin: 0;
  color: var(--color-muted-foreground);
  font-size: var(--font-size-sm);
}

/* --- 결과 · 앱 설치 CTA ---------------------------------------------------- */

.result {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-3);
  text-align: center;
}

/* 보조 버튼 — 주 버튼과 같은 크기의 outline(SCREENS S2 "순위 보기"). */
.secondary-button {
  min-height: var(--touch-target-min);
  padding: var(--space-3) var(--space-4);
  border: var(--border-hairline) solid var(--color-border);
  border-radius: var(--radius-button);
  background: none;
  color: var(--color-foreground);
  font-family: inherit;
  font-size: var(--font-size-base);
  font-weight: 600;
  cursor: pointer;
}

/* 보이지 않지만 스크린리더는 읽는 글자(내 통계 행의 "내 결과"). */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --- 결과 시트 (티켓 08 · SCREENS S2) ---------------------------------------- */

/* 앱의 바텀시트 대신 중앙 다이얼로그(스펙). 시트 모서리 토큰을 쓰고, 폭은 규칙
   모달과 같이 카드 폭 토큰에서 좌우 여백만 뺀다. */
.result-sheet {
  box-sizing: border-box;
  width: calc(100% - var(--space-8));
  max-width: var(--content-max-width);
  max-height: calc(100% - var(--space-8));
  padding: var(--space-6);
  border: var(--border-hairline) solid var(--color-border);
  border-radius: var(--radius-sheet);
  background: var(--color-card);
  color: var(--color-foreground);
  text-align: center;
}

.result-sheet::backdrop {
  background: color-mix(in srgb, var(--color-foreground) 40%, transparent);
}

.result-close {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
}

.result-text {
  margin: var(--space-4) 0 var(--space-1);
  font-size: var(--font-size-xl);
  font-weight: 700;
}

.result-detail {
  margin: 0 0 var(--space-4);
  color: var(--color-muted-foreground);
  font-size: var(--font-size-sm);
}

/* 보드와 같은 타일을 작게. `.board` 처럼 컨테이너 폭에 맞춰 글자가 줄어든다. */
.result-grid {
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  max-width: 240px;
  margin: 0 auto var(--space-6);
}

.result-grid .tile-row {
  gap: var(--space-1);
}

.result-grid .tile {
  flex-basis: 32px;
  font-size: min(var(--font-size-sm), 100cqi / var(--slots) * 0.5);
}

.result-stats-heading {
  margin: 0 0 var(--space-3);
  padding-top: var(--space-4);
  border-top: var(--border-hairline) solid var(--color-border);
  font-size: var(--font-size-base);
  font-weight: 700;
  text-align: left;
}

.result-stats {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: 0 0 var(--space-4);
  padding: 0;
  list-style: none;
  text-align: left;
}

/* 막대 한 줄: 시도 수 · 막대 · 비율. 막대 길이는 app.js 가 넣는 `--ratio`(0~1). */
.stat-row {
  display: grid;
  grid-template-columns: 3em 1fr 3em;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-muted-foreground);
  font-size: var(--font-size-sm);
}

.stat-percent {
  text-align: right;
}

.stat-bar {
  position: relative;
  height: 12px;
  border-radius: var(--radius-tile);
  background: var(--color-muted);
  overflow: hidden;
}

.stat-bar-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: calc(var(--ratio, 0) * 100%);
  background: var(--color-tile-wrong);
}

/* 내 행: 굵은 글자 + 주 버튼 면 색 막대. brand 는 면 채움 금지라 쓰지 않는다
   (OVERRIDES §2) — 목업(e2_result)도 같은 짙은 막대다. */
.stat-row.is-me {
  color: var(--color-foreground);
  font-weight: 700;
}

.stat-row.is-me .stat-bar-fill {
  background: var(--color-primary-button);
}

.result-countdown-line {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-4);
  color: var(--color-muted-foreground);
  font-size: var(--font-size-sm);
  font-variant-numeric: tabular-nums;
}

.result-countdown-icon {
  width: 16px;
  height: 16px;
  flex: none;
}

.result-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* 첫 완료의 계정 연결 안내 한 줄. 보조 텍스트라 작고 흐리게, 누르는 면은 44px. */
.account-prompt {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: var(--space-4) 0 0;
  padding-top: var(--space-2);
  border-top: var(--border-hairline) solid var(--color-border);
  color: var(--color-muted-foreground);
  font-size: var(--font-size-sm);
}

.account-prompt-icon {
  width: 16px;
  height: 16px;
  flex: none;
}

.account-prompt-link {
  flex: 1;
  min-height: var(--touch-target-min);
  padding: 0;
  border: none;
  background: none;
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  text-align: left;
  cursor: pointer;
}

.app-cta {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: var(--border-hairline) solid var(--color-border);
}

.app-cta-text {
  margin: 0 0 var(--space-3);
  color: var(--color-muted-foreground);
  font-size: var(--font-size-sm);
}

.store-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
}

.store-badge {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch-target-min);
  padding: 0 var(--space-4);
  border: var(--border-hairline) solid var(--color-border);
  border-radius: var(--radius-button);
  color: var(--color-foreground);
  font-size: var(--font-size-sm);
  font-weight: 600;
  text-decoration: none;
}

/* --- 퍼즐 언어 토글(머리말) ----------------------------------------------- */

/* 머리말 오른쪽의 작은 토글. 글자는 작게 줄여도 누르는 높이는 최소 터치 영역을
   지킨다(OVERRIDES §4). 머리말이 좁으면 `.header` 의 wrap 으로 아랫줄로 내려간다. */
.language-toggle {
  display: flex;
  gap: var(--space-1);
}

.chip {
  min-height: var(--touch-target-min);
  padding: 0 var(--space-3);
  border: var(--border-hairline) solid var(--color-border);
  border-radius: 999px;
  background: none;
  color: var(--color-foreground);
  font-family: inherit;
  font-size: var(--font-size-xs);
  cursor: pointer;
}

/* 선택된 칩만 brand 를 쓴다 — 테두리와 옅은 배경까지, 글자색으로는 안 쓴다
   (OVERRIDES §2: brand 는 면 채움·일반 글자색 금지). */
.chip[aria-pressed="true"] {
  border-color: var(--color-brand);
  background: var(--color-brand-subtle);
  font-weight: 700;
}

/* --- 순위 · 통계 ----------------------------------------------------------- */

.my-rank {
  margin: 0 0 var(--space-2);
  font-size: var(--font-size-sm);
  font-weight: 600;
}

.leaderboard-entries {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.leaderboard-entry {
  display: flex;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
}

.leaderboard-entry.is-me {
  font-weight: 700;
}

.rank {
  min-width: 2.5em;
  color: var(--color-muted-foreground);
}

/* 1~3위만 순위 숫자를 굵게. brand 색 글자는 쓰지 않는다(OVERRIDES §2). */
.rank.top {
  font-weight: 700;
  color: var(--color-foreground);
}

.leaderboard-message,
.stats-empty {
  color: var(--color-muted-foreground);
  font-size: var(--font-size-xs);
}

.today-stats {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.stats-row {
  color: var(--color-foreground);
  font-size: var(--font-size-sm);
}

/* --- 푸터 (법적 링크 + 16 의 사업자 정보 조각) ----------------------------- */

.site-footer {
  color: var(--color-muted-foreground);
  font-size: var(--font-size-sm);
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  padding-top: var(--space-4);
  border-top: var(--border-hairline) solid var(--color-border);
}

.site-footer a {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch-target-min);
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--color-brand);
  text-underline-offset: 3px;
}

/* 접힌 사업자 정보 (wp09). summary 줄 자체가 상호·연락처 고지라 접힌 채로도
   읽히는 글자 크기를 유지하고, 펼침 손잡이는 브라우저 기본 삼각형을 쓴다. */
.business-details {
  margin-top: var(--space-2);
}

/* display 를 flex 로 바꾸면 Chrome·Safari 가 펼침 삼각형을 지운다 — 기본
   list-item 을 두고 줄 높이로 터치 영역을 맞춘다. */
.business-details summary {
  min-height: var(--touch-target-min);
  padding: var(--space-3) 0;
  box-sizing: border-box;
  color: var(--color-muted-foreground);
  cursor: pointer;
}

.business-summary-label {
  margin-right: var(--space-2);
  color: var(--color-foreground);
  font-weight: 600;
}

/* 조각(`legal/_business_info.html`)이 들고 오는 마크업. 문서 페이지에서는
   legal.css 가 같은 역할을 한다 — 조각은 두 스타일시트 중 어느 쪽에 얹혀도
   읽히게 클래스 이름만 주고 모양은 각 페이지가 정한다. */
.site-footer .doc-operator h2 {
  margin: var(--space-2) 0 var(--space-2);
  color: var(--color-foreground);
  font-size: var(--font-size-base);
  font-weight: 700;
}

/* 360px 에서는 en 라벨("Mail-order business registration no.")이 값 열을 몇
   글자 폭으로 눌러서, 라벨 위·값 아래로 쌓는다. 두 열 표는 481px 부터. */
.site-footer dl {
  margin: 0;
}

.site-footer dt:not(:first-child) {
  margin-top: var(--space-2);
}

@media (min-width: 481px) {
  .site-footer dl {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--space-1) var(--space-3);
  }

  .site-footer dt:not(:first-child) {
    margin-top: 0;
  }
}

.site-footer dt {
  color: var(--color-foreground);
  font-weight: 600;
}

.site-footer dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.site-footer .doc-note {
  margin: var(--space-3) 0 0;
}

/* --- 지난 퍼즐: 띠 · archived 모드 (티켓 101) -------------------------------- */

/* 지난 퍼즐을 보는 동안 늘 보이는 "오늘 퍼즐로". */
.archive-bar {
  display: flex;
  justify-content: flex-start;
  margin-bottom: var(--space-2);
}

.archive-chip {
  border-color: var(--color-brand);
  background: var(--color-brand-subtle);
  color: var(--color-foreground);
}

.archive-block {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: var(--border-hairline) solid var(--color-border);
  text-align: left;
}

.archive-heading {
  margin: 0 0 var(--space-3);
  font-size: var(--font-size-base);
  font-weight: 700;
}

/* 요일 7칸. 360px 폭에서도 가로 스크롤 없이 칸이 줄어든다 — 누르는 높이는 44px 이상. */
.archive-strip {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: var(--space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.archive-strip .archive-empty {
  grid-column: 1 / -1;
  color: var(--color-muted-foreground);
  font-size: var(--font-size-sm);
}

.archive-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  width: 100%;
  min-height: var(--touch-target-min);
  padding: var(--space-1) 0;
  border: var(--border-hairline) solid var(--color-border);
  border-radius: var(--radius-tile);
  background: var(--color-card);
  color: var(--color-foreground);
  font: inherit;
  cursor: pointer;
}

.archive-day[aria-current="date"] {
  border-color: var(--color-primary-button);
  font-weight: 700;
}

.archive-day:has(.archive-lock-icon) {
  background: var(--color-muted);
  color: var(--color-muted-foreground);
}

.archive-lock-icon::before {
  content: "\1F512";
}

.archive-picker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.archive-picker input {
  min-height: var(--touch-target-min);
  max-width: 100%;
  font: inherit;
}

.archive-older {
  min-height: var(--touch-target-min);
  margin-top: var(--space-2);
}

.archive-weekday {
  color: var(--color-muted-foreground);
  font-size: var(--font-size-xs);
}

.archive-day-number {
  font-size: var(--font-size-sm);
  font-variant-numeric: tabular-nums;
}

/* 상태 점. 색만으로 구분하지 않게 칸 이름(aria-label)에도 상태를 쓴다. 푸는 중은
   속이 빈 고리, 안 푼 날은 흐린 점이다. */
.archive-dot {
  width: 8px;
  height: 8px;
  border: var(--border-hairline) solid transparent;
  border-radius: 50%;
}

.archive-dot-success {
  background: var(--color-tile-correct);
}

.archive-dot-fail {
  background: var(--color-tile-wrong);
}

.archive-dot-in_progress {
  border-color: var(--color-tile-correct);
}

.archive-dot-none {
  background: var(--color-muted);
  border-color: var(--color-border);
}

.archive-dot-locked {
  border-style: dashed;
  border-color: var(--color-muted-foreground);
}

/* --- 공통 ------------------------------------------------------------------ */

/* 대결은 결과 시트 안의 기록 비교다. 긴 익명 태그·번역도 좁은 화면에서 줄바꿈한다. */
.challenge-compare {
  margin-block: var(--space-4);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
  padding: var(--space-4);
  border: var(--border-hairline) solid var(--color-border);
  border-radius: var(--radius-card);
  text-align: start;
  overflow-wrap: anywhere;
}

.challenge-compare h3 {
  grid-column: 1 / -1;
  margin: 0 0 var(--space-2);
  font-size: var(--font-size-base);
}

.challenge-compare p {
  margin: var(--space-2) 0 0;
  font-size: var(--font-size-sm);
}

#challenge-outcome {
  grid-column: 1 / -1;
  font-weight: 700;
}

.hidden {
  display: none;
}

/* 서버가 심은 안내 (운영자 페이지 접근 안내). brand 는 테두리에만 쓰고 글자는
   foreground 다(OVERRIDES §2). */
.notice {
  margin-bottom: var(--space-4);
  padding: var(--space-3);
  border: var(--border-hairline) solid var(--color-brand);
  border-radius: var(--radius-button);
  background: var(--color-brand-subtle);
  font-size: var(--font-size-sm);
}

.notice p {
  margin: 0;
}