/*
  해몽 공용 요소. 값은 모두 tokens.css의 var(--...)만 써요.
  문법: 흰 바탕 위 회색 상자, 테두리 대신 면과 여백으로 나눠요. 남빛은 누를 수 있는 것과 고른 것에만 써요.
  누르면 살짝 작아지는 손맛(:active)으로 눌렸다는 것을 알려요. 움직임을 줄이는 설정이면 모두 멈춰요.
*/

/* 바탕 */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--color-bg);
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: var(--weight-regular);
  line-height: var(--line-body);
  letter-spacing: var(--tracking-body);
  word-break: keep-all;
  overflow-wrap: break-word;
  overflow-wrap: anywhere;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

h1,
h2,
h3 {
  margin: 0 0 var(--space-3);
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  line-height: var(--line-heading);
  letter-spacing: var(--tracking-display);
  text-wrap: balance;
}

h1 {
  font-size: var(--text-h1);
  line-height: var(--line-tight);
}

h2 {
  font-size: var(--text-h2);
}

h3 {
  font-size: var(--text-lead);
}

p {
  margin: 0 0 var(--space-4);
  max-width: var(--measure);
  text-wrap: pretty;
}

strong {
  font-weight: var(--weight-bold);
}

a {
  color: var(--color-accent);
  text-decoration-line: underline;
  text-decoration-thickness: var(--hairline);
  text-underline-offset: var(--space-1);
}

a:active {
  color: var(--color-accent-press);
}

::selection {
  background: var(--color-selection);
  color: var(--color-ink);
}

:focus {
  outline: var(--focus-width) solid var(--color-accent);
  outline-offset: var(--focus-offset);
}

:focus:not(:focus-visible) {
  outline: none;
}

:focus-visible {
  outline: var(--focus-width) solid var(--color-accent);
  outline-offset: var(--focus-offset);
}

.lead {
  font-size: var(--text-lead);
  line-height: var(--line-body);
}

.hint {
  font-size: var(--text-small);
  line-height: var(--line-body);
  color: var(--color-muted);
}

/* 버튼: 넓고 둥근 버튼. 누르면 살짝 작아져요 */
.button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: 100%;
  max-width: var(--measure);
  min-height: var(--button-height);
  margin: 0;
  padding: var(--space-3) var(--space-5);
  border: var(--border-width) solid transparent;
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: var(--text-lead);
  font-weight: var(--weight-bold);
  line-height: var(--line-tight);
  letter-spacing: var(--tracking-body);
  text-align: center;
  text-decoration: none;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  touch-action: manipulation;
}

.button:active {
  transform: scale(0.98);
}

.button-primary {
  background: var(--color-accent);
  color: var(--color-accent-ink);
  box-shadow: var(--shadow-raise);
}

.button-primary:active {
  background: var(--color-accent-press);
}

.button-secondary {
  background: var(--color-surface);
  color: var(--color-ink);
}

.button-secondary:active {
  background: var(--color-veil);
}

.button:disabled,
.button[aria-disabled="true"] {
  background: var(--color-veil);
  color: var(--color-muted);
  border-color: var(--color-veil);
  box-shadow: none;
  cursor: not-allowed;
  transform: none;
}

/* 입력: 회색 상자 안에 큰 글씨. 초점이 오면 남빛 테두리 */
.field,
.textarea {
  display: block;
  width: 100%;
  max-width: var(--measure);
  min-height: var(--button-height);
  margin: 0;
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  color: var(--color-ink);
  border: var(--border-width) solid transparent;
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: var(--text-lead);
  line-height: var(--line-body);
  caret-color: var(--color-accent);
  -webkit-appearance: none;
  appearance: none;
}

.textarea {
  min-height: calc(var(--button-height) * 3);
  resize: vertical;
}

.field::placeholder,
.textarea::placeholder {
  color: var(--color-muted);
  opacity: 1;
}

.field:focus,
.textarea:focus {
  background: var(--color-bg);
  border-color: var(--color-accent);
}

.field:focus-visible,
.textarea:focus-visible {
  outline: none;
}

.field[aria-invalid="true"],
.textarea[aria-invalid="true"] {
  border-color: var(--color-ink);
  border-style: dashed;
}

/* 칩: 둥근 알약. 고르면 남빛 테두리와 굵은 글씨 */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0 0 var(--space-4);
  padding: 0;
}

.chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap-min);
  min-width: var(--tap-min);
  margin: 0;
  padding: var(--space-2) var(--space-4);
  background: var(--color-surface);
  color: var(--color-ink);
  border: var(--border-width) solid transparent;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: var(--weight-regular);
  line-height: var(--line-tight);
  letter-spacing: var(--tracking-body);
  cursor: pointer;
  touch-action: manipulation;
}

.chip:active {
  transform: scale(0.96);
  background: var(--color-veil);
}

/* 고른 칩: 색만이 아니라 테두리와 굵기로도 알 수 있게 해요 */
.chip[aria-pressed="true"] {
  background: var(--color-accent-soft);
  color: var(--color-accent-press);
  border-color: var(--color-accent);
  font-weight: var(--weight-bold);
}

/* 카드: 테두리 없는 둥근 회색 상자 */
.card {
  max-width: var(--page-max);
  margin: 0 0 var(--space-4);
  padding: var(--space-5);
  background: var(--color-surface);
  color: var(--color-ink);
  border: 0;
  border-radius: var(--radius-large);
}

.card > :last-child {
  margin-bottom: 0;
}

/* 잠긴 낱말(가린 말). 서버가 보낸 ○ 자리표시는 그대로 두고(폭이 같아요) 글자는 투명하게, 그 자리를
   남빛이 비치는 둥근 막대와 작은 자물쇠로 보여 줘요. ○는 aria-hidden, 화면 낭독기는 옆의 "가린 말"을 읽어요. */
.veil {
  position: relative;
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  margin: 0 0.15em;
  padding: 0 var(--space-2) 0 calc(var(--space-2) + 1em);
  border-radius: var(--radius-small);
  background: linear-gradient(90deg, var(--color-lock-from), var(--color-lock-to));
  box-shadow: inset 0 0 0 var(--hairline) var(--color-lock-to);
  color: transparent;
  line-height: var(--line-tight);
  letter-spacing: 0;
  vertical-align: -0.12em;
  white-space: nowrap;
  -webkit-user-select: none;
  user-select: none;
}

.veil::before {
  content: "";
  position: absolute;
  top: 50%;
  left: var(--space-2);
  width: 0.8em;
  height: 0.8em;
  transform: translateY(-50%);
  background: var(--color-accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 11V8a5 5 0 0 1 10 0v3' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round'/%3E%3Crect x='4' y='10' width='16' height='11' rx='3' fill='black'/%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'%3E%3Cpath d='M7 11V8a5 5 0 0 1 10 0v3' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round'/%3E%3Crect x='4' y='10' width='16' height='11' rx='3' fill='black'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* 줄 그림 (src/reading-visuals.js): 한 가지 선 굵기, 둥근 끝. 색은 글씨 색을 따라요 */
.glyph {
  display: block;
  width: 1.25em;
  height: 1.25em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* 대기 화면: 가운데 숨 쉬는 달 그림, 큰 제목, 실제로 지난 단계만 체크한 목록, 다음에 올 화면의 뼈대.
   화면 높이를 채워 바닥글이 화면 가운데로 올라오지 않아요. */
.wait-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: calc(100vh - var(--space-9));
  min-height: calc(100svh - var(--space-9));
  padding: var(--space-7) 0 var(--space-8);
  text-align: center;
}

.wait-art {
  position: relative;
  display: grid;
  place-items: center;
  width: calc(var(--space-9) + var(--space-7));
  height: calc(var(--space-9) + var(--space-7));
  margin: 0 0 var(--space-5);
}

.wait-orbit {
  position: absolute;
  inset: 0;
  border: var(--border-width) dashed var(--color-lock-to);
  border-radius: var(--radius-pill);
}

.wait-orbit span {
  position: absolute;
  width: var(--space-3);
  height: var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--icon-amber);
}

.wait-orbit span:nth-child(1) { top: calc(var(--space-2) * -1 + var(--hairline)); left: calc(50% - var(--space-2) + var(--hairline)); }
.wait-orbit span:nth-child(2) { bottom: var(--space-4); left: var(--space-1); background: var(--icon-mint); }
.wait-orbit span:nth-child(3) { bottom: var(--space-4); right: var(--space-1); background: var(--icon-coral); }

.wait-moon {
  position: relative;
}

.wait-copy {
  max-width: var(--measure);
}

.wait-title {
  margin: 0 0 var(--space-3);
  font-size: var(--text-h1);
}

.wait-lead {
  max-width: none;
  margin: 0 auto var(--space-6);
  color: var(--color-muted);
  font-size: var(--text-lead);
}

.wait-list {
  width: 100%;
  max-width: var(--measure);
  margin: 0 0 var(--space-4);
  padding: var(--space-2) var(--space-5);
  list-style: none;
  border-radius: var(--radius-large);
  background: var(--color-surface);
  text-align: left;
}

.wait-list li {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--button-height);
  color: var(--color-muted);
}

.wait-list li + li {
  border-top: var(--hairline) solid var(--color-veil);
}

.wait-dot {
  display: grid;
  place-items: center;
  flex: none;
  width: var(--space-6);
  height: var(--space-6);
  border-radius: var(--radius-pill);
  background: var(--color-veil);
  color: var(--color-accent-ink);
  font-size: var(--text-small);
}

.wait-list .is-done {
  color: var(--color-ink);
}

.wait-list .is-done .wait-dot {
  background: var(--color-accent);
}

.wait-list .is-active {
  color: var(--color-ink);
  font-weight: var(--weight-bold);
}

.wait-list .is-active .wait-dot {
  background: var(--color-accent-soft);
  box-shadow: inset 0 0 0 var(--border-width) var(--color-accent);
}

/* 구조 블록 (arc10): 분야 한눈에, 달마다 한눈에, 할 일 번호. 글로 읽히는 목록이에요 */
.chapter-glance { display: grid; gap: var(--space-2); margin: var(--space-4) var(--space-5); padding: var(--space-4); border-radius: var(--radius); background: var(--color-surface); }
.chapter-glance-title { font-size: var(--text-small); font-weight: var(--weight-bold); color: var(--color-muted); }
.chapter-glance div + div { display: flex; justify-content: space-between; gap: var(--space-3); }
.chapter-glance dt { font-weight: var(--weight-bold); }
.chapter-glance dd { margin: 0; color: var(--color-muted); text-align: right; }
.chapter-months ol, .chapter-steps ol { margin: 0 var(--space-5) var(--space-4); padding: 0; list-style: none; display: grid; gap: var(--space-2); }
.chapter-months li { display: grid; grid-template-columns: auto 1fr; gap: var(--space-1) var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius); background: var(--color-surface); }
.chapter-months .month-name { font-weight: var(--weight-bold); }
.chapter-months .month-level { justify-self: end; font-size: var(--text-small); color: var(--color-muted); }
.chapter-months .month-note { grid-column: 1 / -1; }
.chapter-months li[data-best] { box-shadow: inset 0 0 0 var(--border-width) var(--color-accent); }
.chapter-months li[data-best] .month-level, .chapter-months li[data-careful] .month-level { color: var(--color-ink); font-weight: var(--weight-bold); }
.chapter-steps ol { counter-reset: step; }
.chapter-steps li { counter-increment: step; display: grid; grid-template-columns: auto 1fr; gap: var(--space-1) var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius); background: var(--color-surface); }
.chapter-steps li::before { content: counter(step); grid-row: 1 / span 2; display: grid; place-items: center; width: var(--space-6); height: var(--space-6); border-radius: var(--radius-pill); background: var(--color-accent); color: var(--color-accent-ink); font-size: var(--text-small); font-weight: var(--weight-bold); }
.chapter-steps .step-when { font-size: var(--text-small); font-weight: var(--weight-bold); color: var(--color-muted); }
.chapter-steps .step-text { grid-column: 2; }
.report-verdict { margin: var(--space-2) 0 0; font-weight: var(--weight-bold); }
.report-verdict-label { font-weight: var(--weight-regular); color: var(--color-muted); }
.report-live { margin: var(--space-4) 0; padding: var(--space-4) var(--space-5); border-radius: var(--radius-large); background: var(--color-surface); }
.report-live-line { display: flex; align-items: center; gap: var(--space-3); margin: 0; font-weight: var(--weight-bold); }
.report-live-note { margin: var(--space-2) 0 0; font-size: var(--text-small); color: var(--color-muted); }

/* 리포트 장 목록 (쓰는 중): 장마다 완성 ✓ · 쓰는 중 · 기다리는 중. 시간·진행률은 없어요 */
.wait-chapters li { gap: var(--space-3); }
.wait-chapter-title { flex: 1; min-width: 0; }
.wait-chapter-num { color: var(--color-muted); font-weight: var(--weight-regular); }
.wait-chapter-state { flex: none; font-size: var(--text-small); color: var(--color-muted); }
.wait-chapters .is-done .wait-chapter-state { color: var(--color-ink); }
.wait-early { margin: 0 0 var(--space-6); }
/* 쓰는 중 표시: 움직임을 줄인 화면에서는 멈춘 점 */
.wait-pulse { display: inline-block; flex: none; align-self: center; width: var(--space-2); height: var(--space-2); border-radius: var(--radius-pill); background: var(--color-accent); }
.chapter-pending-line { display: flex; align-items: center; gap: var(--space-3); margin: var(--space-5); color: var(--color-muted); }
.toc-writing-tag { color: var(--color-accent); }

.wait-note {
  margin: 0 0 var(--space-6);
  color: var(--color-muted);
}

/* 뼈대: 곧 올 결과 화면의 모양. 글씨가 아니라 장식이에요 */
.skeleton {
  display: grid;
  gap: var(--space-3);
  width: 100%;
  max-width: var(--measure);
  margin-top: var(--space-4);
  text-align: left;
}

.skeleton span {
  display: block;
  border-radius: var(--radius);
  background: linear-gradient(90deg, var(--color-surface) 30%, var(--color-wash) 50%, var(--color-surface) 70%) 0 0 / 300% 100%;
}

.skeleton .sk-hero { height: calc(var(--space-9) + var(--space-5)); border-radius: var(--radius-large); }
.skeleton .sk-line { height: var(--space-4); width: 80%; border-radius: var(--radius-pill); }
.skeleton .sk-line.is-short { width: 55%; }
.skeleton .sk-card { height: var(--space-9); border-radius: var(--radius-large); }

@media (prefers-reduced-motion: no-preference) {
  .wait-orbit {
    animation: wait-turn 24s linear infinite;
  }

  .wait-moon {
    animation: wait-breathe 3.2s var(--ease-out) infinite alternate;
  }

  .skeleton span {
    animation: wait-shimmer 1.8s linear infinite;
  }

  .wait-pulse {
    animation: wait-pulse 1.2s var(--ease-out) infinite alternate;
  }
}

@keyframes wait-pulse {
  from { opacity: 0.35; transform: scale(0.8); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes wait-turn {
  to { transform: rotate(1turn); }
}

@keyframes wait-breathe {
  from { transform: scale(1); }
  to { transform: scale(1.05); }
}

@keyframes wait-shimmer {
  from { background-position: 100% 0; }
  to { background-position: 0 0; }
}


/* 안내: 겁주지 않는 차분한 상자. 109 안내도 이 모양을 써요 */
.notice {
  max-width: var(--page-max);
  margin: 0 0 var(--space-4);
  padding: var(--space-4) var(--space-5);
  background: var(--color-notice);
  color: var(--color-ink);
  border: var(--hairline) solid var(--color-line-strong);
  border-radius: var(--radius);
  font-size: var(--text-body);
  line-height: var(--line-body);
}

/* AI 결과물 표시. 숨기거나 흐리게 하지 않아요 */
.ai-label {
  display: block;
  margin: 0 0 var(--space-4);
  font-size: var(--text-small);
  line-height: var(--line-body);
  color: var(--color-muted);
  opacity: 1;
  visibility: visible;
}

/* 상징 그림 (shared/symbol-art.js). 색은 토큰 물감으로만 칠해요 */
.sym {
  display: block;
  width: 100%;
  height: 100%;
}

.sym .in { fill: var(--icon-indigo); }
.sym .nv { fill: var(--icon-navy); }
.sym .co { fill: var(--icon-coral); }
.sym .am { fill: var(--icon-amber); }
.sym .mi { fill: var(--icon-mint); }
.sym .sk { fill: var(--icon-sky); }
.sym .pa { fill: var(--icon-pale); }
.sym .cr { fill: var(--icon-cream); }
.sym .wh { fill: var(--icon-white); }
.sym .ik { fill: var(--icon-ink); }

.sym .s,
.sym .sw,
.sym .s-thick {
  stroke: var(--icon-ink);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sym .sw { stroke: var(--icon-white); }
.sym .s-thick { stroke-width: 5; }
.sym .in-s { stroke: var(--icon-indigo); }
.sym .nv-s { stroke: var(--icon-navy); }
.sym .am-s { stroke: var(--icon-amber); }
.sym .sk-s { stroke: var(--icon-sky); }
.sym .mi-s { stroke: var(--icon-mint); }
.sym .co-s { stroke: var(--icon-coral); }
.sym .cr-s { stroke: var(--icon-cream); }

.sym .sym-letter {
  fill: var(--icon-navy);
  font-family: var(--font-body);
  font-size: var(--text-lead);
  font-weight: var(--weight-bold);
}

/* 그림 칸: 둥근 네모에 옅은 물감 바탕 */
.sym-tile {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: var(--tap-min);
  height: var(--tap-min);
  padding: var(--space-1);
  border-radius: var(--radius);
  background: var(--tile-indigo);
}

.sym-tile[data-tile="amber"] { background: var(--tile-amber); }
.sym-tile[data-tile="mint"] { background: var(--tile-mint); }
.sym-tile[data-tile="coral"] { background: var(--tile-coral); }

/* 줄 목록의 칸(56), 머리와 대기 화면의 큰 칸(96) */
.sym-tile-row {
  width: calc(var(--space-7) + var(--space-2));
  height: calc(var(--space-7) + var(--space-2));
  padding: var(--space-2);
}

.sym-tile-hero {
  width: var(--space-9);
  height: var(--space-9);
  padding: var(--space-3);
  border-radius: var(--radius-large);
}

/* 가린 이름의 칸: 그림 대신 남빛 자물쇠 */
.sym-tile-locked {
  color: var(--color-accent);
  font-size: var(--text-title);
}

/* 화면 낭독기 전용 */
.sr-only {
  position: absolute;
  width: var(--sr-size);
  height: var(--sr-size);
  margin: var(--sr-offset);
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* 마우스가 있는 기기에서만 hover 효과를 줘요. 터치는 :active로 알려요 */
@media (hover: hover) {
  a:hover {
    text-decoration-thickness: var(--border-width);
  }

  .button-primary:hover {
    background: var(--color-accent-press);
  }

  .button-secondary:hover {
    background: var(--color-veil);
  }

  .chip:hover {
    background: var(--color-veil);
  }

  .chip[aria-pressed="true"]:hover {
    background: var(--color-accent-soft);
  }
}

/* 움직임은 줄이지 않아도 되는 경우에만 전환을 써요 */
@media (prefers-reduced-motion: no-preference) {
  .button {
    transition:
      background-color var(--duration-quick) var(--ease-out),
      border-color var(--duration-quick) var(--ease-out),
      transform var(--duration-quick) var(--ease-out);
  }

  .field,
  .textarea {
    transition:
      border-color var(--duration-quick) var(--ease-out),
      background-color var(--duration-quick) var(--ease-out);
  }

  .chip {
    transition:
      background-color var(--duration-quick) var(--ease-out),
      border-color var(--duration-quick) var(--ease-out),
      transform var(--duration-quick) var(--ease-out);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0s !important;
    animation-duration: 0s !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }

  .button:active,
  .chip:active {
    transform: none;
  }
}

/* 바닥(손님 화면 공통, shared/legal.js siteFooterHtml): 처음으로, 사전, 다시 찾기, 약관, 처리방침, 삭제 요청, 사업자 정보.
   법적 정보라 모두 보이되, 작은 글씨와 옅은 회색 띠로 조용히 둬요. 링크마다 48px 누르는 곳 */
.site-footer {
  margin: var(--space-7) 0 0;
  padding: var(--space-5) 0 0;
  border-top: var(--hairline) solid var(--color-line);
  font-size: var(--text-small);
  line-height: var(--line-body);
  color: var(--color-muted);
}

.site-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-links a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  color: var(--color-muted);
  text-decoration: none;
}

.site-business {
  margin: var(--space-3) 0 0;
  font-size: var(--text-small);
}

.site-business a {
  color: var(--color-muted);
}

.site-business:empty {
  display: none;
}

/* /app·/r은 main 밖에 바닥을 둔다. 감싸는 div가 그 화면의 틀 클래스(.reading, .intake)를 같이 써서 폭·여백을 맞추고,
   /r에서는 아래 여백이 고정 결제 버튼에 바닥글이 가리지 않게 한다. 이 클래스는 표시용 이름이다 */
.site-footer-wrap {
  box-sizing: border-box;
}

/* 언어 바꾸기 (src/locale-switcher.js). 위 띠(.landing-top·.library-top·.en-top) 오른쪽, 띠가 없는 화면은 .locale-bar 한 줄.
   자리는 미리 잡아 둔다 (스크립트가 단추를 넣어도 화면이 밀리지 않게). 색은 로케일 토큰을 따른다 */
.locale-switcher {
  position: relative;
  display: inline-flex;
  flex: none;
  min-width: calc(var(--tap-min) + var(--space-5));
  min-height: var(--tap-min);
  margin-left: var(--space-2);
}
.landing-top-link,
.library-top-link {
  margin-left: auto;
  white-space: nowrap;
}
.landing-top .brand,
.library-brand {
  white-space: nowrap;
}
.landing-top,
.library-top {
  column-gap: var(--space-2);
}
.locale-bar {
  display: flex;
  justify-content: flex-end;
  box-sizing: border-box;
  max-width: var(--page-max);
  margin: 0 auto;
  padding: var(--space-2) var(--space-4) 0;
}
.locale-switcher-button {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: var(--tap-min);
  min-width: calc(var(--tap-min) + var(--space-5));
  padding: 0 var(--space-3) 0 var(--space-2);
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-small);
  font-weight: var(--weight-bold);
  line-height: 1;
  cursor: pointer;
}
.locale-switcher-button:active {
  background: var(--color-veil);
}
.locale-switcher-globe,
.locale-switcher-check {
  width: 1.25em;
  height: 1.25em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.locale-switcher-menu {
  position: absolute;
  top: calc(100% + var(--space-1));
  right: 0;
  z-index: 60;
  min-width: 12.5rem;
  padding: var(--space-2) 0;
  border-radius: var(--radius);
  background: var(--color-bg);
  color: var(--color-ink);
  box-shadow: var(--shadow-card), 0 0 0 var(--border-width) var(--color-line);
}
.locale-switcher-menu[hidden] {
  display: none;
}
.locale-switcher-heading {
  margin: 0;
  padding: var(--space-1) var(--space-4) var(--space-2);
  color: var(--color-muted);
  font-size: 0.8125rem;
  font-weight: var(--weight-bold);
  letter-spacing: 0.08em;
}
.locale-switcher-menu ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.locale-switcher-menu a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: var(--tap-min);
  padding: 0 var(--space-4);
  color: var(--color-ink);
  font-size: var(--text-small);
  text-decoration: none;
}
.locale-switcher-menu a[aria-checked="true"] {
  font-weight: var(--weight-bold);
}
.locale-switcher-menu a:hover,
.locale-switcher-menu a:focus-visible {
  background: var(--color-surface);
}
.locale-switcher-menu a:focus-visible {
  outline-offset: calc(var(--focus-width) * -1);
}
.locale-switcher-check {
  color: var(--color-accent);
}
/* 아주 좁은 화면은 지구 그림만 (단추 이름은 aria-label이 말한다) */
@media (max-width: 22.5em) {
  .locale-switcher,
  .locale-switcher-button {
    min-width: var(--tap-min);
  }
  .locale-switcher-button {
    justify-content: center;
    padding: 0;
  }
  .locale-switcher-code {
    display: none;
  }
}

/* 루트 / 언어 고르기 (x-default) */
.locale-chooser {
  box-sizing: border-box;
  max-width: 26rem;
  margin: 0 auto;
  padding: var(--space-8) var(--space-4);
  text-align: center;
}
.locale-chooser .brand-mark {
  width: var(--space-8);
  height: var(--space-8);
}
.locale-chooser .brand-mark-bg {
  fill: var(--color-accent);
}
.locale-chooser .brand-mark-line {
  fill: none;
  stroke: var(--color-accent-ink);
  stroke-width: 2.4;
  stroke-linecap: round;
}
.locale-chooser h1 {
  margin: var(--space-3) 0 var(--space-2);
}
.locale-chooser-label {
  margin: 0 auto var(--space-5);
  color: var(--color-muted);
}
.locale-chooser-list {
  display: grid;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
.locale-chooser-link {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--button-height);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-ink);
  font-size: var(--text-lead);
  font-weight: var(--weight-bold);
  text-decoration: none;
}
.locale-chooser-link:active {
  background: var(--color-veil);
}