/* 모험가의 수첩 v2 디자인 시스템.
   기준: FRONTEND_SPEC.md §3 시각 방향, §12 공통 컴포넌트.
   Stitch 화면(.questbook/stitch)의 페이퍼 + 픽셀 HUD 룩을 토큰화한 파일입니다.
   styles.css 뒤에 로드하며 retro-theme.legacy.css 를 대체합니다. */

@import url("https://cdn.jsdelivr.net/npm/galmuri@latest/dist/galmuri.css");
@import url("https://cdn.jsdelivr.net/npm/pretendard@1.3.9/dist/web/variable/pretendardvariable.css");

/* ────────────────────────────────────────────────
   1. 토큰 (§3.3)
   ──────────────────────────────────────────────── */

:root {
  --px-outline: #2c1d16;
  --px-ink: #2c1d16;
  --px-ink-sub: #6f5748;
  --px-paper: #fdf6e3;
  --px-panel: #fffdf7;
  --px-panel-muted: #eee6d2;
  --px-shadow: 3px 3px 0 #2c1d16;

  --px-gold: #fdbc29;
  /* 계획 모드 강조색입니다. 현위치(금색)와 한눈에 구분되도록 한색을 씁니다. (명세 §6.3) */
  --px-plan: #2e7d8f;
  --px-plan-soft: #d7e9ec;
  --px-blue: #2c7be0;
  --px-danger: #d8402a;
  --px-success: #3e9b62;

  --cat-science: #3b7dd8;
  --cat-bread: #d97b3c;
  --cat-nature: #3e9b62;
  --cat-heritage: #8a6ba8;
  --cat-culture: #c2508a;
  --cat-market: #c9452f;
  --cat-tashu: #2e7d8f;
  --cat-festival: #e0a72b;

  --font-display: "Galmuri11", "Noto Sans KR", sans-serif;
  --font-body: "Pretendard Variable", Pretendard, "Noto Sans KR", system-ui, sans-serif;

  /* 픽셀 패널의 안쪽 베벨. Stitch 의 inset 이중 그림자를 토큰으로 고정합니다. */
  --px-bevel-light: #ffffff;
  --px-bevel-dark: #c9bfa6;
  --px-bevel: inset 2px 2px 0 var(--px-bevel-light), inset -2px -2px 0 var(--px-bevel-dark);

  /* 레이아웃. 디자인 기준 390×844, 지원 폭 360~430, 넓은 화면은 520 셸. */
  --shell-max-width: 520px;
  --gutter-page: 16px;
  --touch-min: 44px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-top: env(safe-area-inset-top, 0px);
  --header-height: 56px;
  --drawer-width: 288px;

  /* 간격은 4px 배수만 사용합니다. */
  /* 우측 상시 책갈피 손잡이가 차지하는 폭입니다. 본문 여백이 이 값을 씁니다. (명세 §7.2) */
  --bookmark-handle-width: 34px;
  --u1: 4px;
  --u2: 8px;
  --u3: 12px;
  --u4: 16px;
  --u5: 20px;
  --u6: 24px;
  --u8: 32px;
  --u10: 40px;
  --u12: 48px;

  /* styles.css 가 쓰는 이름들을 v2 값으로 재지정해 구형 규칙도 같은 팔레트를 따르게 합니다. */
  --ink: var(--px-ink);
  --sub: var(--px-ink-sub);
  --paper: var(--px-paper);
  --paper-2: var(--px-panel);
  --paper-line: var(--px-panel-muted);
  --line: var(--px-outline);
  --shadow-soft: var(--px-shadow);

  color: var(--px-ink);
  font-family: var(--font-body);

  /* 픽셀 미학보다 접근성이 우선이므로 사용자 확대를 막지 않습니다. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* 카테고리 8종의 대표색을 data 속성 하나로 꺼내 쓰기 위한 매핑입니다. (§4.1) */
[data-category="science"] { --cat-color: var(--cat-science); }
[data-category="bread"] { --cat-color: var(--cat-bread); }
[data-category="nature"] { --cat-color: var(--cat-nature); }
[data-category="heritage"] { --cat-color: var(--cat-heritage); }
[data-category="culture"] { --cat-color: var(--cat-culture); }
[data-category="market"] { --cat-color: var(--cat-market); }
[data-category="tashu"] { --cat-color: var(--cat-tashu); }
[data-category="festival"] { --cat-color: var(--cat-festival); }

/* ────────────────────────────────────────────────
   2. 기본 타이포와 셸
   ──────────────────────────────────────────────── */

/* display 를 지정한 컴포넌트가 많아 hidden 속성이 무시되는 일을 막습니다.
   app.js 는 화면 전환과 조건부 표시를 전부 element.hidden 으로 처리합니다. */
[hidden] {
  display: none !important;
}

body {
  min-height: 100dvh;
  margin: 0;
  color: var(--px-ink);
  font-family: var(--font-body);
  /* 본문 최소 14px, 권장 15~16px. (§3.3) */
  font-size: 15px;
  line-height: 1.55;
  word-break: keep-all;
  background: #e6dcc2;
  /* 드로어가 열렸을 때만 본문 스크롤을 잠급니다. */
  overscroll-behavior-y: none;
}

body,
button,
input,
select,
textarea {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
}

/* 픽셀 서체는 제목·숫자·짧은 라벨·게임 상태에만 씁니다. (§3.1) */
.px-display,
.px-counter,
.px-label,
.section-title,
.page-title,
.app-title,
.app-eyebrow {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: 0.01em;
}

.px-counter {
  font-variant-numeric: tabular-nums;
}

/* 긴 설명·약관·설정 문구는 일반 본문 서체를 유지합니다. */
.page-copy,
.data-note,
.px-body,
p {
  font-family: var(--font-body);
}

.app-shell {
  width: 100%;
  max-width: var(--shell-max-width);
  min-height: 100dvh;
  margin: 0 auto;
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--px-paper);
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.app-shell::before,
.app-shell::after {
  display: none;
}

@media (min-width: 560px) {
  .app-shell {
    border-inline: 2px solid var(--px-outline);
  }
}

/* ── styles.css 정규화 ──
   styles.css 는 v1 의 둥근 카드·초록 팔레트를 전제로 작성돼 있습니다.
   v2 는 0~4px 모서리와 하드 오프셋 그림자만 쓰므로 여기서 한 번에 눌러 둡니다. (§3.2, §3.3) */

.app-shell *,
.app-shell *::before,
.app-shell *::after,
.app-drawer *,
.bookmark-handle {
  border-radius: 0;
}

/* 지도 높이는 홈 시트와 함께 보이도록 v2 값으로 다시 잡습니다. */
.map-shell {
  min-height: 0;
  border: 2px solid var(--px-outline);
  background: none;
}

.map-canvas {
  height: clamp(220px, 38dvh, 340px);
}

/* 안내 문구는 초록 점선 알약이 아니라 본문 각주로 표시합니다. */
.data-note {
  padding: 0;
  border: 0;
  background: none;
  color: var(--px-ink-sub);
  font-size: 12px;
}

/* 픽셀 에셋은 정수배 확대와 nearest-neighbor 로만 키웁니다. (§3.3) */
.px-art,
img[data-pixel-art="true"] {
  image-rendering: pixelated;
}

/* 지도 타일·카메라 영상·사진은 픽셀화하지 않습니다. (§3.1) */
.map-canvas,
.map-canvas img,
video,
.photo-surface img {
  image-rendering: auto;
}

/* ────────────────────────────────────────────────
   3. 픽셀 패널·카드 (§12)
   ──────────────────────────────────────────────── */

.px-panel {
  background: var(--px-panel);
  border: 2px solid var(--px-outline);
  border-radius: 0;
  box-shadow: var(--px-shadow);
  padding: var(--u3);
}

.px-panel--paper {
  background: var(--px-paper);
}

.px-panel--muted {
  background: var(--px-panel-muted);
}

/* 안쪽이 파인 HUD 상자. 수치·요약을 담습니다. */
.px-panel--inset {
  background: var(--px-paper);
  box-shadow: var(--px-bevel);
}

/* 제목 줄이 잉크색으로 반전된 대화창형 패널. */
.px-dialog {
  background: var(--px-panel);
  border: 3px solid var(--px-outline);
  box-shadow: 4px 4px 0 var(--px-outline);
}

.px-dialog__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--u2);
  padding: var(--u1) var(--u3);
  background: var(--px-outline);
  color: var(--px-panel);
  border-bottom: 2px solid var(--px-outline);
}

.px-dialog__bar .px-label {
  color: var(--px-panel);
  font-size: 12px;
  letter-spacing: 0.08em;
}

.px-dialog__body {
  padding: var(--u3);
  display: flex;
  flex-direction: column;
  gap: var(--u3);
}

/* 카테고리 색을 왼쪽 띠로만 쓰는 목록 카드. */
.px-card {
  position: relative;
  display: block;
  width: 100%;
  text-align: start;
  background: var(--px-panel);
  border: 2px solid var(--px-outline);
  border-radius: 0;
  box-shadow: var(--px-shadow);
  padding: var(--u3) var(--u3) var(--u3) var(--u4);
  color: inherit;
}

.px-card::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 6px;
  background: var(--cat-color, var(--px-panel-muted));
  border-inline-end: 2px solid var(--px-outline);
}

.px-card:active {
  translate: 2px 2px;
  box-shadow: 1px 1px 0 var(--px-outline);
}

/* ────────────────────────────────────────────────
   4. 버튼·칩·태그
   ──────────────────────────────────────────────── */

.px-button,
.primary-action,
.secondary-action {
  min-height: var(--touch-min);
  /* 좁은 칸에서 글자가 접혀 버튼 높이만 커지는 것을 막습니다. */
  white-space: nowrap;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--u2);
  padding: var(--u2) var(--u4);
  font-family: var(--font-display);
  font-size: 15px;
  color: var(--px-ink);
  background: var(--px-panel-muted);
  border: 2px solid var(--px-outline);
  border-radius: 0;
  box-shadow: var(--px-shadow);
  cursor: pointer;
}

.px-button:active,
.primary-action:active,
.secondary-action:active {
  translate: 2px 2px;
  box-shadow: 1px 1px 0 var(--px-outline);
}

.px-button--primary,
.primary-action {
  background: var(--px-gold);
}

.px-button--danger {
  background: var(--px-danger);
  color: var(--px-panel);
}

.px-button--ghost {
  background: var(--px-panel);
}

.px-button[disabled],
.primary-action[disabled],
.secondary-action[disabled] {
  cursor: not-allowed;
  /* 색만으로 구분하지 않도록 패턴을 함께 씁니다. (§3.2) */
  background-image: repeating-linear-gradient(
    45deg,
    rgba(44, 29, 22, 0.14) 0 4px,
    transparent 4px 8px
  );
  color: var(--px-ink-sub);
  box-shadow: 1px 1px 0 var(--px-outline);
  translate: 2px 2px;
}

.px-chip,
.chip-button {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  gap: var(--u1);
  padding: var(--u1) var(--u2);
  font-family: var(--font-display);
  font-size: 13px;
  color: var(--px-ink);
  background: var(--px-panel);
  border: 2px solid var(--px-outline);
  border-radius: 0;
  box-shadow: 2px 2px 0 var(--px-outline);
  cursor: pointer;
}

.px-chip.is-active,
.chip-button.is-active {
  background: var(--cat-color, var(--px-gold));
  box-shadow: inset 0 0 0 2px var(--px-panel), 2px 2px 0 var(--px-outline);
}

/* 카테고리 태그는 색 + 텍스트를 함께 보여 색맹 사용자도 구분할 수 있게 합니다. */
.px-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--u1);
  padding: 1px var(--u1);
  font-family: var(--font-display);
  font-size: 11px;
  color: var(--px-panel);
  background: var(--cat-color, var(--px-ink-sub));
  border: 1px solid var(--px-outline);
}

.px-tag--ink {
  color: var(--px-ink);
  background: var(--px-gold);
}

/* ────────────────────────────────────────────────
   5. 아이콘 (§3.2 이모지 금지)
   ──────────────────────────────────────────────── */

/* Material Symbols 를 기능 아이콘으로 사용합니다. 폰트가 늦게 오면
   리거처 이름이 그대로 보이므로 로드 전에는 감춥니다. */
.px-icon {
  font-family: "Material Symbols Outlined";
  font-weight: normal;
  font-style: normal;
  font-size: 20px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 24;
  -webkit-font-feature-settings: "liga";
  font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
  /* 아이콘은 보조 표시이므로 스크린리더가 읽지 않습니다. */
  user-select: none;
}

html:not(.fonts-icons-ready) .px-icon {
  visibility: hidden;
}

.px-icon--sm { font-size: 16px; }
.px-icon--lg { font-size: 24px; }

/* 잉크색 사각 아이콘 배지. 드로어와 목록에서 씁니다. */
.px-icon-box {
  inline-size: 24px;
  block-size: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--px-panel);
  background: var(--cat-color, var(--px-ink));
  border: 1px solid var(--px-outline);
}

/* ────────────────────────────────────────────────
   6. 헤더 HUD
   ──────────────────────────────────────────────── */

.app-header {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: var(--u2);
  min-height: var(--header-height);
  padding: calc(var(--safe-top) + var(--u2)) var(--gutter-page) var(--u2);
  background: var(--px-panel);
  border: 0;
  border-bottom: 2px solid var(--px-outline);
  box-shadow: 0 2px 0 var(--px-outline);
}

.app-mark {
  inline-size: 28px;
  block-size: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  color: var(--px-panel);
  background: var(--cat-bread);
  border: 2px solid var(--px-outline);
  box-shadow: 1px 1px 0 var(--px-outline);
}

/* 이전 화면으로 돌아가는 버튼이다. 되돌아갈 화면이 있을 때만 좌측 상단에 나타난다. */
.app-back-button {
  inline-size: 28px;
  block-size: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  padding: 0;
  color: var(--px-ink);
  background: var(--px-panel);
  border: 2px solid var(--px-outline);
  box-shadow: 1px 1px 0 var(--px-outline);
}

.app-back-button[hidden] {
  display: none;
}

.app-back-button:active {
  box-shadow: none;
  translate: 1px 1px;
}

.app-title-group {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.15;
}

.app-eyebrow {
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--px-ink-sub);
}

.app-title {
  margin: 0;
  font-size: 15px;
  font-weight: 400;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.header-status {
  margin-inline-start: auto;
  display: flex;
  align-items: center;
  gap: var(--u2);
}

.level-pill {
  font-family: var(--font-display);
  font-size: 11px;
  padding: 1px var(--u1);
  color: var(--px-ink);
  background: var(--px-gold);
  border: 1px solid var(--px-outline);
}

.system-status {
  display: inline-flex;
  align-items: center;
  gap: var(--u1);
  font-size: 11px;
  color: var(--px-ink-sub);
}

.status-dot {
  inline-size: 8px;
  block-size: 8px;
  border: 1px solid var(--px-outline);
  background: var(--px-panel-muted);
}

.status-dot--ok { background: var(--px-success); }
.status-dot--pending { background: var(--px-gold); }
.status-dot--error { background: var(--px-danger); }

/* EXP 바는 칸이 보이는 픽셀 게이지로 표현합니다. */
.px-exp {
  display: flex;
  align-items: center;
  gap: var(--u1);
}

.px-exp__track {
  inline-size: 64px;
  block-size: 8px;
  display: flex;
  gap: 1px;
  padding: 1px;
  background: var(--px-panel-muted);
  border: 1px solid var(--px-outline);
}

.px-exp__cell {
  flex: 1;
  background: var(--px-panel);
}

.px-exp__cell.is-filled {
  background: var(--cat-festival);
}

/* ────────────────────────────────────────────────
   7. 우측 책갈피 손잡이와 드로어 (§7.2)
   ──────────────────────────────────────────────── */

.bookmark-handle {
  position: fixed;
  inset-inline-end: 0;
  top: 168px;
  z-index: 45;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-block-size: var(--touch-min);
  padding: var(--u2) var(--u1);
  color: var(--px-ink);
  background: var(--cat-festival);
  border: 2px solid var(--px-outline);
  border-inline-end: 0;
  box-shadow: -3px 3px 0 rgba(44, 29, 22, 0.35);
  cursor: pointer;
}

/* 셸이 중앙 정렬된 넓은 화면에서도 손잡이가 셸 가장자리에 붙게 합니다. */
@media (min-width: 560px) {
  .bookmark-handle {
    inset-inline-end: max(0px, calc(50vw - var(--shell-max-width) / 2));
  }
}

.bookmark-handle__letter {
  font-family: var(--font-display);
  font-size: 11px;
  line-height: 1.1;
}

.bookmark-handle[aria-expanded="true"] {
  visibility: hidden;
}

.drawer-scrim {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: rgba(44, 29, 22, 0.75);
  /* 흐릿한 블러 대신 픽셀 디더 패턴으로 어둡게 덮습니다. (§3.2) */
  background-image: repeating-conic-gradient(
    rgba(44, 29, 22, 0.35) 0% 25%,
    transparent 0% 50%
  );
  background-size: 4px 4px;
  border: 0;
}

.drawer-scrim[hidden] {
  display: none;
}

.app-drawer {
  position: fixed;
  inset-block: 0;
  inset-inline-end: 0;
  z-index: 60;
  inline-size: min(var(--drawer-width), 82vw);
  display: flex;
  flex-direction: column;
  background: var(--px-panel);
  border-inline-start: 2px solid var(--px-outline);
  box-shadow: -4px 0 0 rgba(44, 29, 22, 0.35);
  translate: 100% 0;
  transition: translate 180ms steps(6, end);
}

@media (min-width: 560px) {
  .app-drawer {
    inset-inline-end: max(0px, calc(50vw - var(--shell-max-width) / 2));
  }
}

.app-drawer.is-open {
  translate: 0 0;
}

.app-drawer[hidden] {
  display: none;
}

.drawer-header {
  flex: 0 0 auto;
  padding: var(--u3) var(--u3) var(--u3) var(--u4);
  background: var(--px-paper);
  border-bottom: 2px solid var(--px-outline);
  display: flex;
  flex-direction: column;
  gap: var(--u2);
}

.drawer-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--u2);
}

.drawer-close {
  min-inline-size: var(--touch-min);
  min-block-size: 36px;
}

.drawer-language-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--u2);
}

.onboarding-language-row {
  margin-bottom: var(--u3);
}

.drawer-mode-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--u2);
}

.ui-language-select {
  padding: 2px var(--u2);
  font-size: 12px;
  font-weight: 700;
  color: var(--px-ink);
  background: #ffffff;
  border: 2px solid var(--px-outline);
  box-shadow: 1px 1px 0 var(--px-bevel-dark);
}

.drawer-profile {
  display: flex;
  align-items: center;
  gap: var(--u2);
  padding: var(--u2);
  background: #ffffff;
  border: 2px solid var(--px-outline);
  box-shadow: 2px 2px 0 var(--px-bevel-dark);
}

.drawer-profile__art {
  inline-size: 36px;
  block-size: 36px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--px-paper);
  border: 1px solid var(--px-outline);
}

.drawer-profile__art img {
  inline-size: 32px;
  block-size: 32px;
  object-fit: contain;
}

.drawer-profile__meta {
  min-width: 0;
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}

.drawer-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: var(--u2) var(--u3) var(--u4) var(--u4);
  display: flex;
  flex-direction: column;
  gap: var(--u3);
}

.drawer-section-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: #8a5e28;
}

.drawer-nav {
  display: flex;
  flex-direction: column;
  gap: var(--u2);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* 카트리지형 메뉴 항목. */
.nav-link {
  inline-size: 100%;
  min-block-size: var(--touch-min);
  display: flex;
  align-items: center;
  gap: var(--u2);
  padding: var(--u2);
  text-align: start;
  color: var(--px-ink);
  background: #ffffff;
  border: 2px solid var(--px-outline);
  border-radius: 0;
  box-shadow: 2px 2px 0 var(--px-bevel-dark);
  cursor: pointer;
}

.nav-link:active {
  translate: 1px 1px;
  box-shadow: 1px 1px 0 var(--px-bevel-dark);
}

.nav-link.is-active {
  background: var(--px-gold);
  box-shadow: inset 0 0 0 2px var(--px-panel), 2px 2px 0 var(--px-outline);
}

.nav-link__text {
  min-width: 0;
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}

.nav-link__label {
  font-family: var(--font-display);
  font-size: 13px;
}

.nav-link__desc {
  font-size: 11px;
  color: var(--px-ink-sub);
}

.nav-link.is-active .nav-link__desc {
  color: var(--px-ink);
}

.nav-link__index {
  margin-inline-start: auto;
  flex: 0 0 auto;
  font-family: var(--font-display);
  font-size: 11px;
  padding: 0 var(--u1);
  background: var(--px-paper);
  border: 1px solid var(--px-outline);
}

/* 하단 고정 탭은 v2 에서 폐기합니다. (§0.1) */
.bottom-nav {
  display: none;
}

/* ────────────────────────────────────────────────
   8. 본문과 책장 넘김 (§7.3)
   ──────────────────────────────────────────────── */

.app-main {
  flex: 1 1 auto;
  inline-size: 100%;
  padding: var(--u3) var(--gutter-page) calc(var(--u12) + var(--safe-bottom));
  /* 상시 노출되는 책갈피 손잡이가 본문을 덮지 않도록 오른쪽에 자리를 비웁니다. (명세 §7.2) */
  padding-inline-end: calc(var(--gutter-page) + var(--bookmark-handle-width));
  background: var(--px-paper);
}

.view-stack {
  display: block;
}

.view-panel {
  display: flex;
  flex-direction: column;
  gap: var(--u4);
}

.view-panel[hidden] {
  display: none;
}

/* 다섯 최상위 메뉴 이동에만 짧은 책장 넘김을 적용합니다. */
@keyframes px-page-turn {
  from {
    opacity: 0.35;
    transform: perspective(900px) rotateY(-8deg) translateX(10px);
    transform-origin: right center;
  }
  to {
    opacity: 1;
    transform: perspective(900px) rotateY(0deg) translateX(0);
    transform-origin: right center;
  }
}

.view-panel.is-turning {
  animation: px-page-turn 220ms ease-out;
}

.section-title {
  margin: 0 0 var(--u2);
  font-size: 15px;
  font-weight: 400;
}

.page-kicker {
  margin: 0;
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--px-ink-sub);
}

.page-title {
  margin: 0;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.3;
}

.page-copy {
  margin: 0;
  font-size: 14px;
  color: var(--px-ink-sub);
}

.hero-panel {
  display: flex;
  flex-direction: column;
  gap: var(--u3);
  padding: var(--u3);
  background: var(--px-panel);
  border: 2px solid var(--px-outline);
  border-radius: 0;
  box-shadow: var(--px-shadow);
}

.data-note {
  margin: var(--u2) 0 0;
  font-size: 12px;
  color: var(--px-ink-sub);
}

.card-list {
  display: flex;
  flex-direction: column;
  gap: var(--u3);
}

/* ────────────────────────────────────────────────
   9. 탐색 컨텍스트 바 (§6)
   ──────────────────────────────────────────────── */

.context-bar {
  display: flex;
  flex-direction: column;
  gap: var(--u2);
}

.context-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--u2);
}

/* 탐색 컨텍스트 줄은 계획 중 라벨이 늘어나도 글자가 접히지 않게 줄을 넘깁니다. */
.context-bar .context-row {
  flex-wrap: wrap;
}

.context-bar .mode-toggle {
  flex: 0 0 auto;
}

.context-bar .plan-flag,
.context-bar .context-pill {
  flex: 0 1 auto;
  white-space: nowrap;
}

/* 계획 날짜와 위치 검색 줄. 입력이 늘어나고 버튼은 제 크기를 지킵니다. */
#home-plan-controls {
  flex-wrap: wrap;
  justify-content: flex-start;
}

#home-plan-controls > input[type="date"] {
  flex: 1 1 150px;
  inline-size: auto;
  min-inline-size: 0;
  min-block-size: var(--touch-min);
}

/* 현위치 / 계획 모드 토글. */
.mode-toggle {
  display: inline-flex;
  padding: 2px;
  background: var(--px-outline);
  border: 2px solid var(--px-outline);
  box-shadow: 2px 2px 0 var(--px-outline);
}

.mode-toggle__button {
  min-block-size: 28px;
  white-space: nowrap;
  padding: var(--u1) var(--u2);
  font-family: var(--font-display);
  font-size: 12px;
  color: var(--px-ink-sub);
  background: var(--px-panel-muted);
  border: 0;
  cursor: pointer;
}

.mode-toggle__button[aria-pressed="true"] {
  color: var(--px-ink);
  background: var(--px-gold);
}

/* 계획 모드는 현위치와 다른 색으로 표시합니다. (명세 §6.3) */
.mode-toggle__button[data-context-mode="planned"][aria-pressed="true"] {
  color: var(--px-panel);
  background: var(--px-plan);
}

/* 계획 모드일 때는 탐색 컨텍스트 전체를 한색으로 물들여 모드를 분명히 합니다. */
body[data-exploration-mode="planned"] .context-bar {
  padding: var(--u2);
  background: var(--px-plan-soft);
  border: 2px solid var(--px-plan);
  box-shadow: 2px 2px 0 var(--px-outline);
}

body[data-exploration-mode="planned"] .context-place {
  border-inline-start: 6px solid var(--px-plan);
}

/* 계획 중임을 지속 표시하는 라벨입니다. 색 외에 글자로도 알립니다. (명세 §6.3, §3.2) */
.plan-flag {
  display: none;
  align-items: center;
  gap: var(--u1);
  padding: var(--u1) var(--u2);
  font-family: var(--font-display);
  font-size: 11px;
  color: var(--px-panel);
  background: var(--px-plan);
  border: 2px solid var(--px-outline);
  box-shadow: 2px 2px 0 var(--px-outline);
}

body[data-exploration-mode="planned"] .plan-flag {
  display: inline-flex;
}

.context-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--u1);
  padding: var(--u1) var(--u2);
  font-family: var(--font-display);
  font-size: 12px;
  background: var(--px-panel);
  border: 2px solid var(--px-outline);
  box-shadow: 2px 2px 0 var(--px-outline);
}

.context-place {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--u2);
  padding: var(--u1) var(--u2);
  background: var(--px-panel-muted);
  border: 2px solid var(--px-outline);
  box-shadow: 2px 2px 0 var(--px-outline);
}

.context-place__name {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: var(--u1);
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ────────────────────────────────────────────────
   10. 지도와 3단 시트 (§10 S03)
   ──────────────────────────────────────────────── */

.map-shell {
  position: relative;
  border: 2px solid var(--px-outline);
  box-shadow: var(--px-shadow);
  overflow: hidden;
}

.map-canvas {
  block-size: clamp(220px, 38dvh, 340px);
  inline-size: 100%;
  background: #cfe0c3;
}

.home-sheet {
  display: flex;
  flex-direction: column;
  gap: var(--u3);
  padding: var(--u3);
  background: var(--px-panel);
  border: 2px solid var(--px-outline);
  box-shadow: var(--px-shadow);
}

.home-sheet__grip {
  align-self: center;
  inline-size: 48px;
  block-size: 6px;
  background: var(--px-panel-muted);
  border: 2px solid var(--px-outline);
}

/* 3스냅: 접힘 / 중간 / 전체. 높이만 바꾸고 내용은 유지합니다. */
.home-sheet[data-snap="collapsed"] .home-sheet__body {
  max-block-size: 0;
  overflow: hidden;
}

.home-sheet[data-snap="mid"] .home-sheet__body {
  max-block-size: 40dvh;
  overflow-y: auto;
}

.home-sheet[data-snap="full"] .home-sheet__body {
  max-block-size: none;
  overflow: visible;
}

/* ────────────────────────────────────────────────
   11. 대표 꿈돌이와 도감 (§5, §10 S09)
   ──────────────────────────────────────────────── */

/* 프로필 카드는 [그림+글] 행, 진행률 설명, 진행 막대를 세로로 쌓습니다.
   가로 배치로 두면 .profile-main 격자의 글 칸이 0px 로 눌려 한 글자씩 줄바꿈됩니다. */
.profile-panel {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--u3);
}

/* 그림 칸은 실제 그림 크기(96px)에 맞추고 글 칸이 남은 폭을 씁니다. */
.profile-panel .profile-main {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
}

/* 대표 꿈돌이는 약 96px. 지면에서 뜨지 않도록 바닥 그림자를 붙입니다. (§3.2) */
.ggumdori-figure {
  position: relative;
  inline-size: 96px;
  block-size: 96px;
  flex: 0 0 auto;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: var(--px-paper);
  border: 2px solid var(--px-outline);
  box-shadow: var(--px-shadow);
}

.ggumdori-figure img {
  inline-size: 88px;
  block-size: 88px;
  object-fit: contain;
  position: relative;
  z-index: 1;
}

.ggumdori-figure::after {
  content: "";
  position: absolute;
  bottom: 6px;
  inline-size: 44px;
  block-size: 4px;
  background: rgba(44, 29, 22, 0.45);
}

.ggumdori-figure--sm {
  inline-size: 48px;
  block-size: 48px;
}

.ggumdori-figure--sm img {
  inline-size: 42px;
  block-size: 42px;
}

/* 도감은 3열 고정입니다. (§19) */
.collection-grid,
.ggumdori-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--u2);
}

.ggumdori-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--u1);
  padding: var(--u2);
  background: var(--px-panel);
  border: 2px solid var(--px-outline);
  box-shadow: 2px 2px 0 var(--px-outline);
  cursor: pointer;
}

.ggumdori-card__no {
  align-self: flex-start;
  font-family: var(--font-display);
  font-size: 10px;
  color: var(--px-ink-sub);
}

.ggumdori-card__name {
  font-family: var(--font-display);
  font-size: 11px;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  inline-size: 100%;
}

/* 잠긴 항목: 무채색 + 어두운 오버레이 + 자물쇠 + 텍스트를 함께 씁니다. (§5.3) */
.ggumdori-card.is-locked img {
  filter: grayscale(1) contrast(0.85) brightness(0.75);
}

.ggumdori-card.is-locked .ggumdori-figure::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: rgba(44, 29, 22, 0.45);
}

.ggumdori-card__lock {
  position: absolute;
  top: var(--u2);
  inset-inline-end: var(--u2);
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 20px;
  block-size: 20px;
  color: var(--px-panel);
  background: var(--px-outline);
  border: 1px solid var(--px-outline);
}

.ggumdori-card.is-locked .ggumdori-card__name {
  color: var(--px-ink-sub);
}

.collection-count {
  font-family: var(--font-display);
  font-size: 13px;
}

/* ────────────────────────────────────────────────
   12. 공용 퀘스트 상세 시트 (§10 S06)
   제목·CTA 는 고정되고 본문만 스크롤합니다. (§19)
   ──────────────────────────────────────────────── */

.quest-sheet {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.quest-sheet[hidden] {
  display: none;
}

.quest-sheet__scrim {
  position: absolute;
  inset: 0;
  background: rgba(44, 29, 22, 0.7);
}

.quest-sheet__panel {
  position: relative;
  z-index: 1;
  inline-size: 100%;
  max-inline-size: var(--shell-max-width);
  margin: 0 auto;
  max-block-size: 92dvh;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  background: var(--px-panel);
  border: 3px solid var(--px-outline);
  border-bottom: 0;
  box-shadow: 0 -4px 0 rgba(44, 29, 22, 0.35);
}

/* grid item의 기본 min-width는 auto라(세로축 minmax(0,1fr)는 body 행에만 적용되고
   가로축엔 영향이 없음), 영문으로 길어진 제목처럼 안쪽 텍스트가 줄임표 처리되도록
   짜여 있어도 이 grid item 자체가 패널 폭보다 넓게 밀려나 화면 밖으로 넘칠 수 있다.
   세 행 모두 0으로 낮춰서 패널 폭 안으로 강제로 눌러준다. */
.quest-sheet__head,
.quest-sheet__body,
.quest-sheet__cta {
  min-width: 0;
}

.quest-sheet__head {
  position: sticky;
  top: 0;
}

.quest-sheet__body {
  overflow-y: auto;
  padding: var(--u3);
  display: flex;
  flex-direction: column;
  gap: var(--u3);
}

.quest-sheet__cta {
  padding: var(--u3);
  padding-bottom: calc(var(--u3) + var(--safe-bottom));
  background: var(--px-paper);
  border-top: 2px solid var(--px-outline);
  display: flex;
  gap: var(--u2);
}

.quest-sheet__cta .px-button {
  flex: 1;
}

.quest-sheet__head {
  gap: var(--u2);
}

.quest-sheet__title-group {
  min-width: 0;
  flex: 1 1 auto;
}

.quest-sheet__title-group .px-label {
  display: block;
  margin: 0;
  font-size: 14px;
  color: var(--px-panel);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.quest-sheet__tags {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: var(--u1);
}

.quest-sheet__close {
  flex: 0 0 auto;
  min-inline-size: 36px;
  min-block-size: 28px;
  padding: 0 var(--u2);
  box-shadow: none;
}

.quest-sheet__eyebrow {
  display: block;
  font-size: 10px;
  color: var(--px-ink-sub);
}

.quest-sheet__address {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--u2);
  padding: var(--u2);
  background: var(--px-panel);
  border: 2px solid var(--px-outline);
  box-shadow: 1px 1px 0 var(--px-outline);
}

.quest-sheet__address p {
  min-width: 0;
  margin: 0;
  font-size: 13px;
}

/* Clipboard API 가 막힌 환경의 대체 표시. 사용자가 직접 선택해 복사합니다. */
.quest-sheet__fallback {
  margin: var(--u2) 0 0;
  padding: var(--u2);
  font-family: var(--font-body);
  font-size: 13px;
  white-space: pre-wrap;
  background: var(--px-panel-muted);
  border: 2px dashed var(--px-outline);
  user-select: all;
}

.quest-sheet__message:empty {
  display: none;
}

/* ────────────────────────────────────────────────
   12b. 관광지 상세 모달 (지도 마커 클릭)
   퀘스트 상세 시트와 같은 scrim/panel 뼈대를 재사용합니다.
   ──────────────────────────────────────────────── */

.place-detail__sub {
  margin: 2px 0 0;
  font-size: 12px;
  color: var(--px-ink-sub);
}

.place-detail__description-group {
  display: flex;
  flex-direction: column;
  gap: var(--u1);
}

.place-detail__description {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
}

.place-detail__description-toggle {
  align-self: flex-start;
  padding: 2px var(--u2);
  font-size: 12px;
  color: var(--px-ink-sub);
  background: none;
  border: 1px solid var(--px-outline);
}

.place-detail__section-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--px-ink-sub);
  margin-bottom: var(--u1);
}

.place-detail__amenities {
  display: flex;
  flex-wrap: wrap;
  gap: var(--u1);
}

.place-detail__amenity {
  padding: 2px var(--u2);
  font-size: 12px;
  background: var(--px-panel-muted);
  border: 2px solid var(--px-outline);
}

.place-detail__empty {
  font-size: 12px;
  color: var(--px-ink-sub);
}

.place-detail__audio {
  display: flex;
  align-items: center;
  gap: var(--u2);
  padding: var(--u2);
  font-size: 13px;
  background: var(--px-panel-muted);
  border: 2px solid var(--px-outline);
}

.place-detail__audio-button {
  flex: 0 0 auto;
  padding: var(--u1) var(--u2);
  font-size: 12px;
  border: 2px solid var(--px-outline);
  background: var(--px-panel);
}

.place-detail__audio-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--px-ink-sub);
}

.place-detail__status {
  margin: 0;
  font-size: 12px;
  color: var(--px-ink-sub);
}

.place-detail__status:empty {
  display: none;
}

/* 관광지 상세 모달만 하단 시트가 아니라 화면 중앙 다이얼로그로 띄웁니다.
   다른 quest-sheet 계열(퀘스트 상세, 도감 상세 등)은 기존 하단 시트를 그대로 유지합니다. */
#place-detail-sheet {
  justify-content: center;
  align-items: center;
  padding: var(--u3);
}

#place-detail-sheet .quest-sheet__panel {
  max-block-size: 85dvh;
  border-bottom: 3px solid var(--px-outline);
  box-shadow: 4px 4px 0 rgba(44, 29, 22, 0.35);
}

/* 보상 쌍: 미니 뱃지와 꿈돌이를 같은 규격으로 나란히 둡니다. */
.reward-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--u2);
}

.reward-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--u1);
  padding: var(--u2);
  text-align: center;
  background: var(--px-paper);
  border: 2px solid var(--px-outline);
  box-shadow: 2px 2px 0 var(--px-outline);
}

.reward-slot__art {
  position: relative;
  inline-size: 56px;
  block-size: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--px-panel);
  border: 2px solid var(--px-outline);
}

.reward-slot__art img {
  inline-size: 48px;
  block-size: 48px;
  object-fit: contain;
}

/* 미획득 보상은 무채색 + 어두운 덮개 + 자물쇠 + 텍스트를 함께 씁니다. (§5.3) */
.reward-slot.is-locked .reward-slot__art img {
  filter: grayscale(1) brightness(0.75);
}

.reward-slot__lock {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--px-panel);
  background: rgba(44, 29, 22, 0.5);
}

.reward-slot__meta {
  min-width: 0;
  inline-size: 100%;
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}

.reward-slot__meta .px-label {
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.reward-slot__meta .px-body {
  font-size: 11px;
  color: var(--px-ink-sub);
}

/* 목록 카드의 요약 행과 미니 뱃지. */
.card-topline {
  display: flex;
  align-items: center;
  gap: var(--u1);
  margin-bottom: var(--u1);
}

.card-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 400;
}

.card-place {
  margin: 2px 0 var(--u2);
  font-size: 13px;
  color: var(--px-ink-sub);
}

.card-summary {
  display: flex;
  align-items: center;
  gap: var(--u2);
  font-size: 12px;
}

.mini-badge {
  margin-inline-start: auto;
  display: inline-flex;
  align-items: center;
  gap: var(--u1);
  padding: 1px var(--u1);
  background: var(--px-panel-muted);
  border: 1px solid var(--px-outline);
}

.mini-badge img {
  inline-size: 16px;
  block-size: 16px;
  object-fit: contain;
}

.mini-badge__name {
  font-family: var(--font-display);
  font-size: 11px;
  max-inline-size: 9ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 시트가 열린 동안 뒤 본문이 스크롤되지 않게 합니다. */
body[data-quest-sheet-open="true"] {
  overflow: hidden;
}

/* 모험 중 카드. 본문 버튼과 행동 버튼을 세로로 쌓습니다. (명세 §10 S04) */
.recommendation-card--adventure {
  display: flex;
  flex-direction: column;
  gap: var(--u2);
}

/* 카드 본문 전체가 상세 시트를 여는 버튼입니다. 테두리는 바깥 카드가 갖습니다. */
.recommendation-card__body {
  display: block;
  inline-size: 100%;
  padding: 0;
  text-align: start;
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

.recommendation-card__body:focus-visible {
  outline: 2px solid var(--px-outline);
  outline-offset: 2px;
}

/* 퀘스트를 언제 시작했는지 보여 주는 줄입니다. */
.card-started {
  margin: var(--u1) 0 0;
  font-size: 11px;
  color: var(--px-ink-sub);
}

/* 모험 중 카드의 주소 복사와 완료 인증 버튼 줄입니다. */
.recommendation-card--adventure .card-actions {
  display: flex;
  gap: var(--u2);
  padding-block-start: var(--u2);
  border-block-start: 2px dashed var(--px-outline);
}

.recommendation-card--adventure .card-actions > .px-button {
  flex: 1 1 0;
}

/* 진행 중 퀘스트가 없을 때의 빈 상태입니다. */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--u2);
  padding: var(--u4) var(--u3);
  text-align: center;
  background: var(--px-panel-muted);
  border: 2px dashed var(--px-outline);
}

/* ── S05 퀘스트 탐색: 보기 전환 · 정렬 · 목록형 (명세 §10 S05) ── */

/* 보기 전환 칩과 정렬 선택을 한 줄에 둡니다. 좁으면 접힙니다. */
.quests-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--u2);
}

.quests-toolbar .chip-row {
  flex: 1 1 auto;
}

/* 정렬 선택은 줄 전체를 차지하지 않게 폭을 줄입니다. */
.quests-toolbar .px-select {
  flex: 0 1 auto;
  inline-size: auto;
  min-inline-size: 8.5rem;
}

/* 목록형은 카드형보다 촘촘한 한 줄 목록입니다. */
.quest-list {
  display: flex;
  flex-direction: column;
  gap: var(--u1);
}

.quest-line {
  display: flex;
  align-items: center;
  gap: var(--u2);
  inline-size: 100%;
  padding: var(--u2);
  text-align: start;
  font: inherit;
  color: inherit;
  background: var(--px-panel);
  border: 2px solid var(--px-outline);
  border-inline-start: 6px solid var(--cat-color, var(--px-panel-muted));
  box-shadow: 2px 2px 0 var(--px-outline);
  cursor: pointer;
}

.quest-line:active {
  translate: 2px 2px;
  box-shadow: 1px 1px 0 var(--px-outline);
}

.quest-line:focus-visible {
  outline: 2px solid var(--px-outline);
  outline-offset: 2px;
}

/* 가운데 글 영역입니다. 긴 이름은 잘라 냅니다. */
.quest-line__main {
  min-width: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.quest-line__title {
  font-family: var(--font-display);
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.quest-line__place {
  font-size: 12px;
  color: var(--px-ink-sub);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.quest-line__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--u1);
  font-size: 11px;
}

.quest-line__note {
  font-size: 11px;
  color: var(--px-ink-sub);
}

/* 상태 표시는 줄 끝에 고정하고 줄바꿈하지 않습니다. */
.quest-line > .status-badge {
  flex: 0 0 auto;
  white-space: nowrap;
}

/* 목록형 미니 뱃지는 그림만 남기고 이름은 접근성 텍스트로 둡니다. */
.mini-badge--compact {
  flex: 0 0 auto;
  margin-inline-start: 0;
  padding: 2px;
}

.mini-badge--compact img {
  inline-size: 24px;
  block-size: 24px;
}

/* 공통 축제 퀘스트의 참여 가능 행사 수 보조 문구입니다. (명세 §11.1) */
.card-festival-note {
  margin: var(--u1) 0 0;
  font-size: 11px;
  color: var(--px-ink-sub);
}

/* 오프라인 안내는 목록 맨 위에 한 줄로 둡니다. (명세 §13.2) */
.quest-offline-note {
  margin: 0 0 var(--u2);
  padding: var(--u2);
  background: var(--px-panel-muted);
  border: 2px dashed var(--px-outline);
}

/* 수치 3분할 HUD. 거리 / 시간 / 난이도. */
.stat-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--u1);
}

.stat-cell {
  padding: var(--u1);
  text-align: center;
  background: var(--px-panel);
  border: 2px solid var(--px-outline);
  box-shadow: 1px 1px 0 var(--px-outline);
}

.stat-cell__label {
  display: block;
  font-family: var(--font-display);
  font-size: 10px;
  color: var(--px-ink-sub);
}

.stat-cell__value {
  font-family: var(--font-display);
  font-size: 14px;
}

/* ────────────────────────────────────────────────
   13. 상태 표시 (색만으로 구분하지 않음, §3.2)
   ──────────────────────────────────────────────── */

.status-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--u1);
  padding: 1px var(--u1);
  font-family: var(--font-display);
  font-size: 11px;
  border: 1px solid var(--px-outline);
}

.status-badge--available { background: var(--px-panel-muted); }
.status-badge--active { background: var(--px-gold); }
.status-badge--done { color: var(--px-panel); background: var(--px-success); }
.status-badge--locked { color: var(--px-panel); background: var(--px-ink-sub); }
.status-badge--error { color: var(--px-panel); background: var(--px-danger); }

/* ────────────────────────────────────────────────
   14. 폼
   ──────────────────────────────────────────────── */

input[type="text"],
input[type="search"],
input[type="date"],
input[type="email"],
select,
textarea {
  inline-size: 100%;
  min-block-size: var(--touch-min);
  padding: var(--u2);
  font-size: 15px;
  color: var(--px-ink);
  background: var(--px-panel);
  border: 2px solid var(--px-outline);
  border-radius: 0;
  box-shadow: var(--px-bevel);
}

/* 입력창은 강제 픽셀화하지 않고 본문 서체를 유지합니다. (§3.2) */
input,
textarea,
select {
  font-family: var(--font-body);
}

.consent-check-list {
  display: flex;
  flex-direction: column;
  gap: var(--u2);
}

.consent-check {
  min-block-size: var(--touch-min);
  display: flex;
  align-items: center;
  gap: var(--u2);
  font-size: 14px;
}

.consent-check input[type="checkbox"] {
  inline-size: 20px;
  block-size: 20px;
  min-block-size: 20px;
  flex: 0 0 auto;
  accent-color: var(--cat-festival);
}

.oauth-login-list {
  display: flex;
  flex-direction: column;
  gap: var(--u2);
}

.social-login-button {
  min-block-size: var(--touch-min);
  inline-size: 100%;
  font-family: var(--font-display);
  color: var(--px-ink);
  background: var(--px-panel);
  border: 2px solid var(--px-outline);
  box-shadow: var(--px-shadow);
  cursor: pointer;
}

/* ────────────────────────────────────────────────
   15. 접근성 (§13.3)
   ──────────────────────────────────────────────── */

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--px-blue);
  outline-offset: 2px;
}

.skip-link {
  position: fixed;
  top: var(--u2);
  inset-inline-start: var(--u2);
  z-index: 100;
  padding: var(--u2) var(--u3);
  background: var(--px-gold);
  border: 2px solid var(--px-outline);
  translate: -200% 0;
}

.skip-link:focus {
  translate: 0 0;
}

.px-sr-only {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* 모션 줄이기: 책장 넘김·드로어 슬라이드·꿈돌이 모션을 정지시킵니다. (§5.4) */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .app-drawer {
    transition: none;
  }
}

/* 앱 내 모션 줄이기 설정(마이페이지)도 같은 결과를 냅니다. */
body[data-reduced-motion="true"] .view-panel.is-turning {
  animation: none;
}

body[data-reduced-motion="true"] .app-drawer {
  transition: none;
}

/* ── S09 꿈돌이 도감 · S10 도감 상세 (명세 §5.3, §5.4, §10 S09·S10) ── */

/* 3열 그리드는 위쪽 .ggumdori-grid 정의를 그대로 씁니다. (명세 §10 S09) */

/* 더 보기 버튼과 빈 문구는 그리드 폭 전체를 씁니다. */
.ggumdori-grid > .catalog-more,
.ggumdori-grid > .empty-message {
  grid-column: 1 / -1;
}

.catalog-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--u1);
  padding: var(--u2);
  text-align: center;
  font: inherit;
  color: inherit;
  background: var(--px-panel);
  border: 2px solid var(--px-outline);
  border-block-start: 6px solid var(--cat-color, var(--px-panel-muted));
  box-shadow: 2px 2px 0 var(--px-outline);
  cursor: pointer;
}

.catalog-card:active {
  translate: 2px 2px;
  box-shadow: 1px 1px 0 var(--px-outline);
}

.catalog-card:focus-visible {
  outline: 2px solid var(--px-outline);
  outline-offset: 2px;
}

/* 꿈돌이 그림 자리입니다. 정사각형을 유지합니다. */
.catalog-card__art {
  position: relative;
  inline-size: 100%;
  aspect-ratio: 1 / 1;
  max-inline-size: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--px-panel-muted);
  border: 2px solid var(--px-outline);
}

.catalog-card__art img {
  inline-size: 84%;
  block-size: 84%;
  object-fit: contain;
}

.catalog-card__placeholder {
  font-family: var(--font-display);
  font-size: 20px;
  color: var(--px-ink-sub);
}

/* 잠금 카드는 무채색 + 딤 + 자물쇠 + 물음표 + 미획득을 함께 씁니다. (명세 §5.3) */
.catalog-card.is-locked .catalog-card__art img {
  filter: grayscale(1) brightness(0.72);
}

.catalog-card__lock {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  color: var(--px-panel);
  background: rgba(44, 29, 22, 0.55);
}

.catalog-card__question {
  font-family: var(--font-display);
  font-size: 16px;
}

/* 대표 꿈돌이는 별표와 대표 텍스트를 함께 표시합니다. (명세 §10 S09) */
.catalog-card__featured {
  position: absolute;
  inset-block-start: 2px;
  inset-inline-end: 2px;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 1px 3px;
  font-size: 10px;
  color: var(--px-ink);
  background: var(--px-gold);
  border: 2px solid var(--px-outline);
}

.catalog-card__meta {
  inline-size: 100%;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--u1);
}

.catalog-card__badge {
  flex: 0 0 auto;
  inline-size: 16px;
  block-size: 16px;
  object-fit: contain;
}

.catalog-card__name {
  min-width: 0;
  font-family: var(--font-display);
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.catalog-card__state {
  font-size: 10px;
  color: var(--px-ink-sub);
}

.catalog-card.is-locked .catalog-card__state {
  font-weight: 700;
}

/* ── S10 도감 상세 ── */

/* 큰 꿈돌이 그림입니다. */
.catalog-detail__art {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-block-size: 180px;
  padding: var(--u3);
  background: var(--px-panel-muted);
  border: 2px solid var(--px-outline);
  box-shadow: inset 2px 2px 0 rgba(44, 29, 22, 0.12);
}

.catalog-detail__art img {
  max-inline-size: 100%;
  max-block-size: 200px;
  object-fit: contain;
}

/* 미획득은 큰 그림도 무채색으로 보여 줍니다. (명세 §10 S10) */
.catalog-detail__art.is-locked img {
  filter: grayscale(1) brightness(0.72);
}

.catalog-detail__lock {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--px-panel);
  background: rgba(44, 29, 22, 0.45);
}

.catalog-detail__badge-row {
  display: flex;
  align-items: center;
  gap: var(--u2);
}

.catalog-detail__badge {
  flex: 0 0 auto;
  inline-size: 48px;
  block-size: 48px;
  object-fit: contain;
}

.catalog-detail__badge-meta {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.catalog-detail__cta > .px-button {
  inline-size: 100%;
}

/* 시트가 열린 동안 뒤 본문이 스크롤되지 않게 합니다. */
body[data-catalog-sheet-open="true"] {
  overflow: hidden;
}

/* ── 마이페이지 계정 영역 (명세 §10 S12 계정) ── */

.account-field {
  display: flex;
  flex-direction: column;
  gap: var(--u1);
  padding-block: var(--u2);
}

.account-field + .account-field {
  border-block-start: 2px dashed var(--px-outline);
}

.account-field__label {
  font-family: var(--font-display);
  font-size: 12px;
  color: var(--px-ink-sub);
}

/* 입력과 버튼이 한 줄에 서고, 좁으면 접힙니다. */
.account-field__controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--u2);
  margin-block-start: var(--u1);
}

.account-field__controls > input[type="text"] {
  flex: 1 1 140px;
  inline-size: auto;
  min-inline-size: 0;
  min-block-size: var(--touch-min);
}

/* 브라우저 데이터 삭제 경고는 눈에 띄게 둡니다. (명세 §9.3) */
.account-warning {
  padding: var(--u2);
  color: var(--px-ink);
  background: var(--px-panel-muted);
  border-inline-start: 6px solid var(--px-danger);
}

/* 직접 그린 날짜 필드(buildDateField). 네이티브 <input type="date">를 대체한다 — 네이티브
   위젯은 달력 언어가 방문자 브라우저 로케일을 그대로 따라가 버려서 화면 언어(영문/국문)로
   바꿀 수 없다(의도된 브라우저 동작). */
.date-field {
  position: relative;
}

.date-field__toggle {
  min-width: 160px;
}

.date-field__popover {
  position: absolute;
  z-index: 20;
  inset-block-start: calc(100% + var(--u1));
  inset-inline-start: 0;
  min-width: 260px;
  padding: var(--u2);
  background: var(--px-panel);
  border: 2px solid var(--px-outline);
  box-shadow: var(--px-shadow);
}

.date-field__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--u1);
  margin-block-end: var(--u2);
}

.date-field__nav {
  min-width: 36px;
  min-height: 36px;
  font-family: var(--font-display);
  font-size: 18px;
  line-height: 1;
  color: var(--px-ink);
  background: var(--px-panel);
  border: 2px solid var(--px-outline);
  cursor: pointer;
}

.date-field__month-label {
  font-family: var(--font-display);
  font-size: 13px;
  color: var(--px-ink);
}

.date-field__weekdays,
.date-field__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

.date-field__weekdays span {
  text-align: center;
  font-size: 11px;
  color: var(--px-ink-sub);
  padding-block-end: var(--u1);
}

.date-field__cell {
  aspect-ratio: 1 / 1;
}

.date-field__day {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 13px;
  color: var(--px-ink);
  background: var(--px-panel);
  border: 1px solid transparent;
  cursor: pointer;
}

.date-field__day:hover {
  border-color: var(--px-outline);
}

.date-field__day.is-today {
  color: var(--px-gold);
  font-weight: 700;
}

.date-field__day.is-selected {
  background: var(--px-plan);
  color: #fff;
  border-color: var(--px-outline);
}

.date-field__today {
  margin-block-start: var(--u2);
  width: 100%;
  text-align: center;
}

.account-message:empty {
  display: none;
}

/* 닉네임 단계 입력칸. (명세 §10 S02) */
#nickname-step .context-row {
  margin-block-start: var(--u3);
}

/* ── 날씨 상세 (명세 §10 S14) · 계획 설정 (명세 §10 S15) ── */

/* 시간대별 예보는 가로로 훑어봅니다. */
.weather-hourly {
  display: flex;
  gap: var(--u2);
  overflow-x: auto;
  padding-block-end: var(--u1);
  scrollbar-width: none;
}

.weather-hourly::-webkit-scrollbar {
  display: none;
}

.weather-hourly__cell {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-inline-size: 56px;
  padding: var(--u2) var(--u1);
  background: var(--px-panel-muted);
  border: 2px solid var(--px-outline);
}

.weather-hourly__time {
  font-family: var(--font-display);
  font-size: 11px;
  color: var(--px-ink-sub);
}

.weather-hourly__temp {
  font-family: var(--font-display);
  font-size: 14px;
}

.weather-hourly__pop {
  font-size: 11px;
  color: var(--px-blue);
}

/* 날씨 칩은 눌러서 상세를 여는 버튼입니다. */
#home-weather-pill {
  cursor: pointer;
}

#home-weather-pill:focus-visible {
  outline: 2px solid var(--px-outline);
  outline-offset: 2px;
}

/* 계획 위치 검색 결과 목록입니다. */
.plan-result-list {
  display: flex;
  flex-direction: column;
  gap: var(--u1);
  margin-block-start: var(--u2);
}

/* 행사 개최 상태 문구는 본문 각주보다 눈에 띄게 둡니다. (명세 §6.5) */
.event-note {
  color: var(--px-ink);
  font-weight: 700;
}

/* ── 공통 축제 행사 타깃 선택 (명세 §11.1, §10 S06) ── */

.festival-target-list {
  display: flex;
  flex-direction: column;
  gap: var(--u1);
  margin-block-start: var(--u2);
}

.festival-target {
  display: flex;
  align-items: center;
  gap: var(--u2);
  inline-size: 100%;
  padding: var(--u2);
  text-align: start;
  font: inherit;
  color: inherit;
  background: var(--px-panel);
  border: 2px solid var(--px-outline);
  box-shadow: 2px 2px 0 var(--px-outline);
  cursor: pointer;
}

/* 선택된 행사는 테두리와 색을 함께 바꿔 색만으로 구분하지 않습니다. (명세 §3.2) */
.festival-target.is-selected {
  background: var(--px-gold);
  border-inline-start: 6px solid var(--px-outline);
}

.festival-target[disabled] {
  cursor: not-allowed;
  opacity: 0.72;
}

.festival-target:focus-visible {
  outline: 2px solid var(--px-outline);
  outline-offset: 2px;
}

.festival-target__main {
  min-width: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.festival-target__title {
  font-family: var(--font-display);
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.festival-target__venue {
  font-size: 12px;
  color: var(--px-ink-sub);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.festival-target__when {
  font-size: 11px;
  color: var(--px-ink-sub);
}

.festival-target > .status-badge {
  flex: 0 0 auto;
  white-space: nowrap;
}

/* ── S11 꿈돌이 2D 촬영 (명세 §10 S11) ── */

/* 배경 사진과 꿈돌이를 겹치는 무대입니다. */
.photo-stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 100%;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--px-panel-muted);
  border: 2px solid var(--px-outline);
}

.photo-source,
.photo-result {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.photo-result {
  object-fit: contain;
}

.photo-placeholder {
  padding: var(--u3);
  text-align: center;
  color: var(--px-ink-sub);
}

/* 합성 미리보기의 꿈돌이입니다. 발이 바닥에 닿게 아래에 붙입니다. */
.photo-overlay {
  position: absolute;
  inset-block-end: 4%;
  translate: -50% 0;
  inline-size: auto;
  object-fit: contain;
  image-rendering: pixelated;
  pointer-events: none;
}

.photo-slider {
  display: flex;
  align-items: center;
  gap: var(--u2);
  margin-block-start: var(--u2);
}

.photo-slider__label {
  flex: 0 0 4.5rem;
  font-family: var(--font-display);
  font-size: 12px;
  color: var(--px-ink-sub);
}

.photo-slider input[type="range"] {
  flex: 1 1 auto;
  min-inline-size: 0;
}

/* 결과 화면은 버튼이 셋이라 균등 분할합니다. */
.photo-cta {
  display: flex;
  gap: var(--u2);
}

.photo-cta > .px-button {
  flex: 1 1 0;
  padding-inline: var(--u2);
}

/* 시트가 열린 동안 뒤 본문이 스크롤되지 않게 합니다. */
body[data-photo-sheet-open="true"] {
  overflow: hidden;
}

/* ── S12 설정·권한 · S13 모험 기록 (명세 §10 S12·S13) ── */

.setting-group + .setting-group {
  margin-block-start: var(--u3);
  padding-block-start: var(--u3);
  border-block-start: 2px dashed var(--px-outline);
}

.setting-group__title {
  margin: 0 0 var(--u2);
  font-family: var(--font-display);
  font-size: 13px;
  color: var(--px-ink-sub);
}

.setting-row {
  display: flex;
  align-items: center;
  gap: var(--u2);
  min-block-size: var(--touch-min);
}

/* 라벨이 남는 폭을 차지하고 조절 요소는 오른쪽에 붙습니다. */
.setting-row__label {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 14px;
}

.setting-row input[type="range"] {
  flex: 0 1 40%;
  min-inline-size: 0;
}

/* 음량 숫자는 자리를 고정해 슬라이더가 흔들리지 않게 합니다. */
.setting-row__value {
  flex: 0 0 2.5ch;
  font-family: var(--font-display);
  font-size: 12px;
  text-align: end;
  color: var(--px-ink-sub);
}

/* 배경음·효과음 게이지 바 왼쪽의 음소거 버튼입니다. */
.setting-row__mute {
  flex: 0 0 auto;
  inline-size: 26px;
  block-size: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  color: var(--px-ink);
  background: var(--px-panel-muted);
  border: 2px solid var(--px-outline);
}

.setting-row__mute[aria-pressed="false"] {
  color: var(--px-ink-sub);
  background: var(--px-panel);
}

.setting-row input[type="range"]:disabled {
  opacity: 0.4;
}

.setting-row input[type="checkbox"] {
  flex: 0 0 auto;
  inline-size: 22px;
  block-size: 22px;
}

/* 권한 상태 줄입니다. */
.permission-row {
  display: flex;
  align-items: center;
  gap: var(--u2);
  padding-block: var(--u2);
}

.permission-row + .permission-row {
  border-block-start: 2px dashed var(--px-outline);
}

.permission-row__main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.permission-row__name {
  font-family: var(--font-display);
  font-size: 14px;
}

.permission-row__purpose {
  font-size: 11px;
  color: var(--px-ink-sub);
}

.permission-row > .status-badge {
  flex: 0 0 auto;
  white-space: nowrap;
}

/* 약관 목록입니다. */
.policy-list {
  margin: 0;
  padding-inline-start: var(--u4);
  display: flex;
  flex-direction: column;
  gap: var(--u2);
}

.policy-list a {
  color: var(--px-ink);
}

/* 월별 기록 묶음입니다. */
.record-month + .record-month {
  margin-block-start: var(--u4);
}

.record-month .quest-line + .quest-line {
  margin-block-start: var(--u1);
}

/* 공유 카드. 닉네임·장소·뱃지·꿈돌이만 담습니다. (명세 §10 S13) */
.share-card {
  display: flex;
  align-items: center;
  gap: var(--u3);
  margin-block-start: var(--u2);
  padding: var(--u3);
  background: var(--px-panel-muted);
  border: 2px solid var(--px-outline);
  box-shadow: 2px 2px 0 var(--px-outline);
}

.share-card__art {
  flex: 0 0 auto;
  inline-size: 64px;
  block-size: 64px;
  object-fit: contain;
  image-rendering: pixelated;
}

.share-card__meta {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.share-card__name {
  font-family: var(--font-display);
  font-size: 15px;
}

.share-card__place {
  font-size: 12px;
  color: var(--px-ink-sub);
}

.share-card__badge {
  align-self: flex-start;
  margin-block-start: var(--u1);
  padding: 1px var(--u1);
  font-size: 11px;
  background: var(--px-gold);
  border: 2px solid var(--px-outline);
}

#record-entry-input {
  margin-block-start: var(--u2);
  font-family: var(--font-body);
}

body[data-record-sheet-open="true"] {
  overflow: hidden;
}

/* ── 접근성 보정 (명세 §13.3) ── */

/* 1. 모든 조작은 최소 44x44 입니다. 시각 크기는 그대로 두고 눌리는 범위만 넓힙니다. */
.mode-toggle__button,
.profile-customize-link,
#home-weather-pill,
.home-sheet__grip {
  position: relative;
}

/* 보이는 모양을 키우지 않고 히트 영역만 44px 로 넓힙니다. */
.mode-toggle__button::after,
.profile-customize-link::after,
#home-weather-pill::after,
.home-sheet__grip::after,
.scroll-fab::after {
  content: "";
  position: absolute;
  inset-block: 50%;
  inset-inline: 0;
  block-size: var(--touch-min);
  translate: 0 -50%;
}

/* 시트 손잡이는 얇은 선이라 위아래로 더 넓혀 줍니다. */
.home-sheet__grip::after {
  inset-inline: -20%;
}

/* 2. 본문 성격의 안내 문구는 최소 14px 입니다. 라벨·카운터 같은 보조 표기는 예외입니다. */
.data-note {
  font-size: 14px;
}

.px-body {
  font-size: 15px;
}

/* 10. 진행 바는 실제 progressbar 의미를 가집니다. 값은 app.js 가 넣습니다. */
.progress-bar[role="progressbar"] {
  display: block;
}

/* ────────────────────────────────────────────────
   TAP-TO-START 시작 화면. 앱 셸보다 항상 위에 뜨고,
   클릭/터치/Enter·Space 키로 닫힌다. 첫 사용자 입력이라
   배경음악 자동재생 허용에도 이 시점을 그대로 쓴다.
   ──────────────────────────────────────────────── */
.start-screen {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: flex;
  align-items: stretch;
  justify-content: center;
  /* 다른 화면과 같은 바깥 여백 색이다(body 배경과 동일). 폭이 --shell-max-width로
     제한되므로 넓은 화면에서는 이 색이 좌우 여백으로 그대로 보인다. */
  background: #e6dcc2;
  cursor: pointer;
  transition: opacity 0.35s ease;
}

.start-screen[hidden] {
  display: none;
}

.start-screen.is-dismissing {
  opacity: 0;
  pointer-events: none;
}

.start-screen__frame {
  position: relative;
  inline-size: 100%;
  /* 앱 셸(.app-shell)과 똑같은 폭 상한을 써서 다른 화면들과 크기를 맞춘다. */
  max-inline-size: var(--shell-max-width);
  margin: 0 auto;
}

.start-screen__image {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  /* cover로 채우면 세로로 긴 이미지 위쪽 타이틀 로고가 넓은 화면에서 잘린다.
     contain으로 전체 이미지(로고 포함)가 항상 보이게 한다. */
  object-fit: contain;
}

/* 로딩 바(초기)와 TAP TO START 문구(로딩 완료 후)가 같은 자리에서 서로 바뀝니다. */
.start-screen__status {
  position: absolute;
  z-index: 1;
  inset-inline: 0;
  inset-block-end: 10dvh;
  inline-size: min(260px, 70%);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--u1);
}

.start-screen__loading {
  inline-size: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.start-screen__loading[hidden] {
  display: none;
}

.start-screen__progress-bar {
  inline-size: 100%;
  border: 2px solid #fff;
}

.start-screen__progress-bar .progress-fill {
  transition: width 0.1s linear;
}

.start-screen__loading-text,
.start-screen__hint {
  margin: 0;
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 0.06em;
  color: #fff;
  /* 도형(배경 박스) 없이 텍스트만 쓴다. 이미지 위에서도 읽히도록 그림자만 준다. */
  text-shadow: 0 0 6px rgba(0, 0, 0, 0.85), 0 2px 2px rgba(0, 0, 0, 0.85);
}

.start-screen__hint {
  font-size: 16px;
  animation: start-screen-pulse 1.6s ease-in-out infinite;
}

.start-screen__hint[hidden] {
  display: none;
}

@keyframes start-screen-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}

@media (prefers-reduced-motion: reduce) {
  .start-screen__hint {
    animation: none;
  }
}