.screen-onboarding {
  width: min(100%, 760px);
  min-height: 100dvh;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: max(20px, env(safe-area-inset-top)) 20px max(20px, env(safe-area-inset-bottom));
  text-align: center;
}

.screen-onboarding h1,
.screen-onboarding h2,
.screen-onboarding p,
.screen-onboarding figure {
  margin: 0;
}

.screen-onboarding h1 {
  font-size: 22px;
}

.screen-onboarding .field {
  width: 100%;
  padding: 12px 14px;
  border-radius: 8px;
  border: 1px solid var(--roof-line);
  background: var(--ui-bar-bg);
  color: var(--white);
  font-size: 16px;
}

.form-error {
  min-height: 1.5em;
  color: var(--top-2);
  font-size: 13px;
}

/* 타이틀 — title-draft-v2의 픽셀 캔버스·현수막 흔들림 구조 */
.title-screen {
  position: relative;
  min-height: 100dvh;
  overflow: hidden;
  background: var(--ui-bar-bg);
}

.title-bg,
.title-veil {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.title-veil {
  background: linear-gradient(transparent 45%, color-mix(in srgb, var(--ui-chat-bg) 88%, transparent));
}

.title-logo-wrap {
  position: absolute;
  z-index: 1;
  top: 8%;
  left: 50%;
  width: min(92vw, 350px);
  transform-origin: 50% -40px;
  transform: translateX(-50%);
  animation: title-sway 5s ease-in-out infinite;
  text-align: center;
}

.title-logo {
  display: block;
  width: 100%;
  height: auto;
}

.title-subtitle {
  margin: 8px 0 0;
  color: var(--ui-accent-text);
  font-size: 11px;
  letter-spacing: 0.22em;
}

.title-tagline {
  position: absolute;
  z-index: 1;
  top: 61%;
  left: 20px;
  right: 20px;
  margin: 0;
  color: var(--white);
  text-align: center;
  font-size: 15px;
}

.title-action {
  position: absolute;
  z-index: 1;
  left: 50%;
  bottom: 13%;
  min-width: 180px;
  transform: translateX(-50%);
  border: 2px solid var(--outline);
  border-radius: 12px;
  font-weight: 700;
  animation: title-breathe 2.4s ease-in-out infinite;
  /* 릴리즈 노트 상자보다 위에 둔다 — 낮은 화면에서도 시작하기가 절대 덮이지 않게. */
  z-index: 2;
}

/* 릴리즈 노트 — 시작하기 버튼 아래 여백. 높이를 버튼까지 남은 공간으로 묶어 버튼을 밀지 않는다. */
.title-release-notes {
  position: absolute;
  z-index: 1;
  left: 50%;
  bottom: 28px;
  width: min(86vw, 300px);
  transform: translateX(-50%);
  padding: 6px 8px;
  border: 1px solid var(--outline);
  border-radius: 8px;
  background: color-mix(in srgb, var(--ui-chat-bg) 82%, transparent);
  text-align: left;
}

.title-release-notes__label {
  margin: 0 0 4px;
  color: var(--roof-line);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.12em;
}

.title-release-notes__list {
  max-height: clamp(32px, calc(13dvh - 44px), 78px);
  margin: 0;
  padding: 0;
  overflow-y: auto;
  list-style: none;
  scrollbar-width: thin;
  scrollbar-color: var(--roof-line) transparent;
}

.title-release-notes__list:focus-visible {
  outline: 1px solid var(--ui-accent-text);
  outline-offset: 2px;
}

.title-release-notes__item {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 2px 0;
  font-size: 11px;
  line-height: 1.4;
}

.title-release-notes__head {
  display: flex;
  gap: 6px;
  align-items: baseline;
}

.title-release-notes__version {
  color: var(--ui-accent-text);
  font-weight: 700;
}

.title-release-notes__date {
  color: var(--roof-line);
  font-size: 10px;
}

.title-release-notes__body {
  color: var(--white);
}

.title-version {
  position: absolute;
  z-index: 1;
  right: 14px;
  bottom: 10px;
  color: var(--roof-line);
  font-size: 10px;
}

@keyframes title-sway {
  0%, 100% { transform: translateX(-50%) rotate(-1.1deg); }
  50% { transform: translateX(-50%) rotate(1.1deg); }
}

@keyframes title-breathe {
  0%, 100% { transform: translateX(-50%) scale(1); }
  50% { transform: translateX(-50%) scale(1.04); }
}

/* 서사 3장 */
.story-screen {
  position: relative;
  background: linear-gradient(var(--ui-chat-bg), var(--ui-bar-bg));
}

.story-skip {
  position: absolute;
  top: max(18px, env(safe-area-inset-top));
  right: 18px;
  border: 0;
  background: transparent;
  color: var(--roof-light);
  cursor: pointer;
}

.story-card {
  width: min(100%, 420px);
  min-height: 250px;
  padding: 28px;
  border: 1px solid var(--path-border);
  border-radius: 12px;
  background: var(--ui-bubble-bg);
  color: var(--white);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 24px;
  cursor: pointer;
}

.story-number {
  color: var(--gold);
  font-size: 13px;
  letter-spacing: 0.2em;
}

.story-copy {
  font-size: 17px;
  line-height: 1.9;
  word-break: keep-all;
}

.story-dots {
  display: flex;
  gap: 8px;
}

.story-dots span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--roof-line);
}

.story-dots .is-current {
  background: var(--gold);
}

/* 규칙 — 전문을 한 화면에 욱여넣지 않는다. 본문(.rules-article)만 스크롤하고
   하단 '약속하고 입장하기' 버튼은 화면에 고정된다. */
.rules-screen {
  justify-content: flex-start;
  gap: 8px;
  height: 100dvh;
  min-height: 0;
  /* 화면 자체는 스크롤하지 않는다 — 화면이 스크롤되면 하단 확인 버튼이 밀려 사라져
     온보딩이 막힌다. 넘치는 본문은 아래 `.rules-screen .rules-article`가 안에서 흘린다. */
  overflow: hidden;
}

.rules-article {
  width: min(100%, 680px);
  display: flex;
  flex-direction: column;
  gap: clamp(3px, 0.6vh, 7px);
  padding: clamp(12px, 2vh, 22px);
  border: 1px solid var(--path-border);
  border-radius: 10px;
  background: var(--ui-bubble-bg);
  text-align: left;
  font-size: clamp(10px, 1.65vh, 14px);
  line-height: 1.34;
}

.rules-article h1 {
  color: var(--ui-accent-text);
  font-size: clamp(17px, 2.6vh, 23px);
  text-align: center;
}

.rules-article h2 {
  color: var(--white);
  font-size: inherit;
}

.rules-article p {
  color: var(--roof-light);
}

.rules-article section {
  display: grid;
  gap: 1px;
}

.rules-intro,
.rules-closing {
  color: var(--path) !important;
}

/* ---- 온보딩 페이지 전용 ----
   모달(.rules-modal-box)은 위 base 값을 그대로 쓴다. 여기 값은 `.rules-screen` 안에서만
   먹으므로 '광장의 약속 다시보기' 모달의 현재 모습에 닿지 않는다.
   모달이 읽기 좋았던 이유는 ① 넘치면 스크롤하고 ② 글자가 뷰포트 높이에 따라 줄지 않기
   때문이다. 온보딩에도 같은 두 성질을 주고, 문단 간격은 총괄 지시대로 더 벌린다. */
.rules-screen .rules-article {
  /* 넘칠 때만 줄어들고(0 1 auto), 줄어든 만큼 본문 안에서 스크롤한다.
     min-height:0이 없으면 flex 항목의 자동 최소 크기가 내용 높이라 줄어들지 않는다. */
  flex: 0 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  /* 섹션↔섹션: 3~7px → 10~14px */
  gap: clamp(10px, 1.4vh, 14px);
  /* 짧은 뷰포트(가로 모드)에서도 모달의 13px 아래로 내려가지 않는다 */
  font-size: clamp(13px, 1.65vh, 15px);
  line-height: 1.5;
}

/* 제목↔본문: 1px → 5px */
.rules-screen .rules-article section {
  gap: 5px;
}

/* 확인 버튼은 스크롤에 밀리지 않는 고정 항목이다(줄어들지도, 늘어나지도 않는다).
   이 값이 바뀌면 짧은 화면에서 버튼이 화면 밖으로 밀려 온보딩이 막힌다. */
.rules-confirm {
  flex: 0 0 auto;
}

.rules-modal-box {
  width: min(94vw, 700px);
  max-width: 700px;
  max-height: 92dvh;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow: auto;
}

.rules-modal-box .rules-article {
  flex: 0 0 auto;
  font-size: 13px;
}

/* 닉네임 */
.nickname-form {
  width: min(100%, 360px);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* 페르소나 */
.persona-card-list {
  display: grid;
  gap: 8px;
  width: min(100%, 430px);
}

.persona-card {
  min-height: 58px;
  padding: 11px 13px;
  border-radius: 8px;
  border: 1px solid var(--roof-line);
  background: var(--ui-bar-bg);
  color: var(--white);
  display: grid;
  grid-template-columns: 32px 1fr;
  align-items: center;
  gap: 10px;
  text-align: left;
  cursor: pointer;
}

.persona-card:hover,
.persona-card.is-selected {
  border-color: var(--ui-accent-text);
  background: var(--ui-bubble-bg);
}

.persona-card-number {
  color: var(--gold);
  font-size: 11px;
}

.persona-subcaption {
  color: var(--roof-line);
  font-size: 12px;
}

/* creator-v2 기반 조합기 */
/* 조합기 컨테이너 — 온보딩(dress)과 내 정보 수정(profile)이 같은 DOM을 쓴다(screens/dress.js). */
.avatar-editor {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 100%;
}

.dress-screen {
  justify-content: flex-start;
  width: min(100%, 940px);
}

.quick-start,
.avatar-editor-panel {
  width: 100%;
  border: 2px solid var(--outline);
  border-radius: 8px;
  background: var(--ui-bar-bg);
}

.quick-start {
  padding: 10px;
  text-align: left;
}

.quick-start h2 {
  margin-bottom: 7px;
  color: var(--ui-accent-text);
  font-size: 13px;
}

.preset-strip {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 3px 2px 8px;
  scrollbar-color: var(--roof-line) var(--ui-bubble-bg);
}

.preset-button {
  flex: 0 0 auto;
  width: 44px;
  height: 50px;
  padding: 3px;
  border: 1px solid var(--roof-line);
  border-radius: 5px;
  background: var(--grass-1);
  cursor: pointer;
}

.preset-thumb {
  display: block;
  width: 36px;
  height: 42px;
  background-image: url('/assets/characters/player-v4/presets/archetypes-front.png');
  background-size: 360px 84px;
  background-position: calc(var(--preset-col) * -36px) calc(var(--preset-row) * -42px);
  background-repeat: no-repeat;
}

.avatar-editor-panel {
  padding: 14px;
  display: grid;
  grid-template-columns: minmax(210px, 0.7fr) minmax(280px, 1.3fr);
  gap: 20px;
}

.avatar-previews {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 18px;
}

.avatar-previews figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.avatar-previews figcaption {
  color: var(--roof-line);
  font-size: 10px;
}

.avatar-front-preview {
  width: 108px;
  height: 126px;
}

.avatar-map-preview {
  width: 90px;
  height: 90px;
  padding: 6px;
  border-radius: 6px;
  background: var(--grass-1);
}

.avatar-controls {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.avatar-axis {
  display: grid;
  grid-template-columns: 58px 1fr;
  align-items: center;
  gap: 6px;
  text-align: left;
}

.avatar-axis-name {
  color: var(--roof-line);
  font-size: 11px;
}

.avatar-axis-choices {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.axis-button,
.swatch {
  border: 2px solid transparent;
  border-radius: 4px;
  cursor: pointer;
}

.axis-button {
  padding: 4px 7px;
  background: var(--ui-bubble-bg);
  color: var(--white);
  font-size: 11px;
}

.swatch {
  width: 23px;
  height: 23px;
  background: var(--swatch-color);
}

.axis-button.is-selected,
.swatch.is-selected {
  border-color: var(--ui-accent-text);
  color: var(--ui-accent-text);
}

.dress-actions {
  display: flex;
  gap: 8px;
}

.dress-status {
  margin: 0;
}

/* 입장 연출 */
.enter-screen {
  position: relative;
  min-height: 100dvh;
  overflow: hidden;
  background: var(--outline);
  color: var(--white);
  transition: background 900ms ease;
}

.enter-timeline {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  width: min(90%, 520px);
  margin: 0;
  padding: 10px 14px;
  transform: translate(-50%, -50%);
  border-top: 1px solid var(--gold);
  border-bottom: 1px solid var(--gold);
  color: var(--ui-accent-text);
  text-align: center;
  opacity: 0;
  transition: opacity 600ms ease, top 700ms ease;
}

.enter-plaza {
  position: absolute;
  inset: 0;
  opacity: 0;
  background: linear-gradient(var(--top-5), var(--grass-1) 48%, var(--path) 48%);
  transition: opacity 1100ms ease;
}

.enter-path {
  position: absolute;
  left: 46%;
  top: 43%;
  width: 16%;
  height: 57%;
  background: var(--path-border);
  transform: skew(-8deg);
}

.enter-self {
  position: absolute;
  left: 50%;
  top: 35%;
  width: 14px;
  height: 24px;
  border: 2px solid var(--outline);
  background: var(--top-4);
  transform: translateX(-50%);
  animation: enter-walk 700ms steps(2, jump-none) infinite;
}

.enter-self::before {
  content: '';
  position: absolute;
  left: 1px;
  top: -11px;
  width: 8px;
  height: 8px;
  border: 1px solid var(--outline);
  background: var(--skin-2);
}

.enter-greeting {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: 10%;
  width: min(90%, 560px);
  margin: 0;
  padding: 12px 16px;
  transform: translateX(-50%);
  border-radius: 8px;
  background: var(--ui-bubble-bg);
  color: var(--white);
  text-align: center;
  opacity: 0;
  transition: opacity 500ms ease;
}

.enter-screen.phase-timeline .enter-timeline {
  opacity: 1;
}

.enter-screen.phase-plaza {
  background: var(--ui-chat-bg);
}

.enter-screen.phase-plaza .enter-timeline {
  top: 34px;
}

.enter-screen.phase-plaza .enter-plaza,
.enter-screen.phase-greeting .enter-greeting {
  opacity: 1;
}

@keyframes enter-walk {
  from { margin-top: 0; }
  to { margin-top: 3px; }
}

@media (max-width: 620px) {
  .avatar-editor-panel {
    grid-template-columns: 1fr;
  }

  .avatar-axis {
    grid-template-columns: 54px 1fr;
  }

  .dress-screen {
    padding-inline: 12px;
  }
}

/* ---- 시민 가치관 유형 테스트 코드 입력 (온보딩 꼬리 / 내 정보) ---- */
.orientation-screen,
.screen-profile {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100dvh;
  padding: 24px 16px max(24px, env(safe-area-inset-bottom));
}
.orientation-screen { flex-direction: column; gap: 10px; text-align: center; }
.orientation-screen h1 { margin: 0 0 4px; font-size: 20px; }
.orientation-screen p { margin: 0; font-size: 13px; color: var(--ui-accent-text); }
.orientation-form,
.profile-card__form { display: flex; flex-direction: column; gap: 10px; width: min(100%, 380px); margin-top: 8px; }
.orientation-form .field,
.profile-card__form input {
  width: 100%;
  padding: 11px;
  border: 1px solid var(--outline);
  border-radius: 8px;
  background: var(--ui-chat-bg);
  color: var(--white);
  font: inherit;
  letter-spacing: 0.24em;
  text-align: center;
  text-transform: uppercase;
}
.orientation-form__actions,
.profile-card__actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.orientation-form .form-error,
.profile-card__status { min-height: 18px; margin: 0; font-size: 12px; color: var(--ui-accent-text); }

.profile-card {
  width: min(100%, 420px);
  padding: 20px;
  border: 1px solid var(--outline);
  border-radius: 12px;
  background: var(--ui-bubble-bg);
  color: var(--white);
  text-align: center;
}
.profile-card h1 { margin: 0 0 8px; font-size: 19px; }
.profile-card p { margin: 0 0 6px; font-size: 13px; color: var(--ui-accent-text); }
.profile-card__external { display: inline-block; margin: 8px 0; text-decoration: none; }
.profile-card__back {
  margin-top: 14px;
  padding: 8px 14px;
  border: 1px solid var(--outline);
  border-radius: 8px;
  background: transparent;
  color: var(--ui-accent-text);
  font: inherit;
  cursor: pointer;
}

/* ---- 내 정보 수정 — 닉네임·자리(페르소나)·꾸미기 ----
   조합기 DOM·색은 위 온보딩 규칙을 그대로 재사용한다(새 색 리터럴 금지). */
.profile-edit {
  width: min(100%, 940px);
  text-align: left;
}
.profile-edit h2 { text-align: center; }
.profile-edit__field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.profile-edit__field > span { font-size: 12px; color: var(--ui-accent-text); }
.profile-edit__nickname {
  width: 100%;
  padding: 11px;
  border: 1px solid var(--outline);
  border-radius: 8px;
  background: var(--ui-chat-bg);
  color: var(--white);
  font: inherit;
  text-align: left;
}
.profile-edit .persona-card-list { width: 100%; }
.profile-edit__actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 12px; }

/* ---- 내 정보 — 씨앗·차단 목록·계정 (도달성 감사 D-2·D-3·D-4) ----
   색은 base.css의 팔레트 토큰만 쓴다(새 색 리터럴 금지). */
.screen-profile {
  flex-direction: column;
  justify-content: flex-start;
  gap: 12px;
  overflow-y: auto;
}
.profile-card h2 { margin: 0 0 8px; font-size: 16px; }
.profile-card__subhead { margin: 10px 0 6px; font-size: 12px; }
.profile-seeds__balance {
  margin: 0 0 6px;
  font-size: 22px;
  font-weight: 700;
  color: var(--ui-accent-text);
}
.profile-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: left;
}
.profile-list:empty { display: none; }
.profile-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border: 1px solid var(--outline);
  border-radius: 8px;
  background: var(--ui-chat-bg);
  font-size: 13px;
}
.profile-list__label { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.profile-list__meta { flex: 0 0 auto; font-size: 11px; color: var(--ui-accent-text); }
.profile-list__delta { flex: 0 0 auto; font-weight: 700; color: var(--ui-accent-text); }
.profile-list__unblock {
  flex: 0 0 auto;
  min-height: 32px;
  padding: 5px 10px;
  border: 1px solid var(--outline);
  border-radius: 8px;
  background: var(--ui-bar-bg);
  color: var(--white);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
.profile-list__unblock:disabled { opacity: 0.5; cursor: default; }
.profile-account__actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.profile-account__confirm { margin-top: 12px; }
.profile-account__confirm[hidden] { display: none; }

/* ---- 씨앗 상점 (내 정보 → 상점) ----
   색은 base.css 팔레트 토큰만 쓴다(새 색 리터럴 금지).
   절대 규칙 3: 깃발 종류 칩은 전부 같은 모양·같은 색이다. 국기/무늬를 색·테두리·순서로 나누지 않는다. */
.shop-groups { display: flex; flex-direction: column; gap: 14px; }
.shop-group h3 {
  margin: 0 0 6px;
  font-size: 14px;
  color: var(--gold);
  text-align: left;
}
.shop-list { gap: 8px; }
.shop-list li.shop-item {
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  padding: 10px;
  background: var(--ui-bar-bg);
}
.shop-item__head { display: flex; align-items: center; gap: 8px; justify-content: space-between; }
.shop-item__name { flex: 1 1 auto; font-weight: 700; overflow-wrap: anywhere; }

/* 소품 그림 — client/src/items/sprites.js가 캔버스에 코드로 그린다(상점·프로필 공용).
   격자 그림이므로 브라우저 보간을 끄고 원본 픽셀 그대로 확대한다. 색은 캔버스 쪽 팔레트 토큰만 쓴다. */
.item-sprite {
  flex: 0 0 auto;
  display: block;
  image-rendering: pixelated;
}
.profile-items__row { align-items: center; }
.profile-items__note { display: block; margin-top: 2px; font-size: 11px; color: var(--ui-accent-text); }
.shop-item__price { flex: 0 0 auto; font-size: 12px; color: var(--ui-accent-text); }
.shop-item__note { margin: 0; font-size: 11px; color: var(--ui-accent-text); text-align: left; }
.shop-item__owned {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  color: var(--badge-me);
  text-align: left;
}
.shop-item__status { min-height: 16px; margin: 0; font-size: 12px; color: var(--top-2); text-align: left; }
.shop-item__buy { align-self: flex-start; }

.shop-item__variants {
  margin: 2px 0 0;
  padding: 8px;
  border: 1px solid var(--outline);
  border-radius: 8px;
}
.shop-item__variants legend { padding: 0 4px; font-size: 12px; color: var(--ui-accent-text); }
.shop-variants { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.shop-variant {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 32px;
  padding: 5px 9px;
  border: 1px solid var(--outline);
  border-radius: 8px;
  background: var(--ui-chat-bg);
  color: var(--white);
  font-size: 12px;
  cursor: pointer;
}
.shop-variant:focus-within { outline: 2px solid var(--ui-accent-text); outline-offset: 2px; }

.shop-item__text { display: flex; flex-direction: column; gap: 4px; text-align: left; }
.shop-item__text label { font-size: 12px; color: var(--ui-accent-text); }
.shop-item__text input {
  width: 100%;
  padding: 9px;
  border: 1px solid var(--outline);
  border-radius: 8px;
  background: var(--ui-chat-bg);
  color: var(--white);
  font: inherit;
  font-size: 13px;
}
.shop-item__counter { align-self: flex-end; font-size: 11px; color: var(--ui-accent-text); }
.shop-item__counter.is-over { color: var(--top-2); }

.shop-badge { align-items: flex-start; flex-wrap: wrap; }
.shop-badge.is-earned .profile-list__label { color: var(--badge-me); font-weight: 700; }
.shop-foot { padding: 12px 20px; }