/* iOS의 더블탭 확대 판정은 실제로 눌린 자식 요소의 touch-action을 본다.
   앱 전체에 manipulation을 주면 더블탭 확대만 막고 두 손가락 핀치 확대는 유지한다.
   조이스틱처럼 직접 제스처를 처리하는 컨트롤은 아래의 더 구체적인 규칙에서 none으로 덮는다. */
* {
  touch-action: manipulation;
}

html,
body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: #0f1722;
  /* 게임 UI — iOS 롱프레스 텍스트 선택·콜아웃이 조작(드래그·터치)을 가로채지 않게. */
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
/* 선택 방지의 예외 — 입력란은 선택이 돼야 편집이 된다(tweakpane 텍스트 입력 포함). */
input,
textarea {
  -webkit-user-select: text;
  user-select: text;
}
#app {
  position: fixed;
  inset: 0;
  color: #e8eef4;
  font-family:
    -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", sans-serif;
}
#app canvas {
  display: block;
}

:root {
  --surface: rgba(13, 20, 29, 0.85);
  --edge: 1px solid rgba(255, 255, 255, 0.07);
  --shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
  --ink: #dbe6ef;
  --ink-dim: #8ea3b6;
  --well: #232f3d;
  --control-idle: #1d2834;
  --control-edge: rgba(255, 255, 255, 0.12);
  --accent: #3d6047;
  --accent-ink: #d7ecd9;
  --danger: #7a3a3a;
  /* --danger는 배경용(.delete). 어두운 배경 위 작은 글씨에는 명암비가
     약 2:1로 부족해 --accent/--accent-ink 관례대로 전경색을 따로 둔다. */
  --danger-ink: #f2dcdc;
}

/* 첫 로딩 표시 — 모델 프리로드와 지형·생태계 구성 동안 어두운 빈 화면 대신 보여준다.
   #app의 정적 자식으로 index.html에 있고, main.js가 첫 WebGL 프레임 뒤 이 노드만 제거한다. */
.loading {
  position: fixed;
  inset: 0;
  z-index: 20;
  /* iOS Safari의 fixed inset:0은 레이아웃 뷰포트(하단 툴바 접힘) 기준이라, 첫 로드처럼
     툴바가 펼쳐진 상태에선 하단 고정 요소(.loadversion)가 툴바 뒤로 숨는다. 동적
     뷰포트 높이(dvh)로 잡는다 — top·height가 지정되면 bottom(inset)은 스펙상 무시. */
  height: 100vh;
  /* biome-ignore lint/suspicious/noDuplicateProperties: 구형 Safari용 vh 폴백 뒤에 dvh를 둔다. */
  height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: #0f1722;
  color: var(--ink-dim);
  font-size: 13px;
}
.loadring {
  width: 26px;
  height: 26px;
  border: 2px solid rgba(255, 255, 255, 0.12);
  border-top-color: var(--ink);
  border-radius: 50%;
  animation: loadspin 850ms linear infinite;
}
@keyframes loadspin {
  to {
    transform: rotate(360deg);
  }
}
/* "받는 중"/"못 받음" 상태 줄 — 실측: 폰트 11px·줄높이 1.5 기준 두 줄 높이(2×16.5px)
   + gap 4px ≈ 37px. min-height를 고정해 줄이 나타나거나(빈 텍스트→hidden) 사라져도
   .loadring이 위아래로 튀지 않는다(레이아웃 흔들림 방지 — 실측 확인됨). */
.loadstatus {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-height: 37px;
  font-size: 11px;
  line-height: 1.5;
}
.loadstatus p {
  margin: 0;
  white-space: nowrap;
}
.loadstatus p.loadstatus-failed {
  color: var(--danger-ink);
  /* 에러 문구(긴 URL 포함)는 nowrap을 풀어 폰 화면(390px) 안에서 줄바꿈시킨다.
     선택자를 p까지 붙인 건 위 `.loadstatus p`의 nowrap보다 우선하기 위해서다. */
  white-space: normal;
  overflow-wrap: anywhere;
  max-width: 88vw;
}
/* 버전 표시 — .loading의 justify-content:center 흐름에서 빼내 하단 중앙에 고정.
   env(safe-area-inset-bottom)로 아이폰 홈바를 피한다. */
.loadversion {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(14px + env(safe-area-inset-bottom));
  margin: 0;
  text-align: center;
  font-size: 11px;
  color: var(--ink-dim);
}

.loading-error-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
.loading-error-action {
  min-height: 36px;
  padding: 0 14px;
  border: var(--edge);
  border-radius: 18px;
  background: var(--accent);
  color: var(--accent-ink);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.loading-error-action:hover {
  background: #4b7256;
}
.loading-secondary-action {
  background: var(--control-idle);
  color: var(--ink);
}

.invitation-login {
  display: grid;
  gap: 10px;
  width: min(320px, 88vw);
}
.invitation-login label {
  display: grid;
  gap: 5px;
  text-align: left;
  font-size: 12px;
}
.invitation-login label[hidden] {
  display: none;
}
:where(.invitation-login) input,
:where(.world-invitation-panel) .world-share-link {
  box-sizing: border-box;
  min-width: 0;
  width: 100%;
  min-height: 40px;
  border: var(--edge);
  border-radius: 8px;
  padding: 8px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
}
:where(.invitation-login, .world-invitation-panel) input:focus {
  box-shadow: 0 0 0 2px var(--accent);
}
:where(.world-invitation-panel) .world-share-actions {
  flex-wrap: wrap;
}
:where(.world-invitation-panel) :where(.world-share-actions) > button {
  flex: 1 1 110px;
}
:where(.invitation-entry) .loadmsg {
  max-width: 88vw;
  overflow-wrap: anywhere;
}
:where(.invitation-entry) .loadstatus-failed {
  color: var(--ink-dim);
}

/* 공유 방문 표식 — 기존 캡슐 어휘를 그대로 쓰되 소유자 UI와 헷갈리지 않게 항상 남긴다. */
.shared-view-banner {
  position: fixed;
  top: 60px;
  left: 50%;
  z-index: 7;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: calc(100vw - 24px);
  min-height: 38px;
  box-sizing: border-box;
  padding: 6px 8px 6px 14px;
  border: var(--edge);
  border-radius: 20px;
  background: var(--surface);
  box-shadow: var(--shadow);
  color: var(--ink-dim);
  font-size: 12px;
  backdrop-filter: blur(12px) saturate(1.2);
  transform: translateX(-50%);
}
.shared-view-banner[hidden] {
  display: none;
}
.shared-view-banner span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.shared-view-banner strong {
  color: var(--ink);
  font-weight: 600;
}
.visited-view-banner {
  width: min(560px, calc(100vw - 24px));
}
.visited-view-banner span {
  flex: 1;
  white-space: normal;
}
.visited-view-banner strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.shared-view-banner button {
  flex: none;
  min-height: 28px;
  padding: 0 10px;
  border: 1px solid var(--control-edge);
  border-radius: 14px;
  background: var(--control-idle);
  color: var(--accent-ink);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.shared-view-banner button:hover {
  background: var(--accent);
}

/* v9.4 상단 메뉴바 — 좌측 환경→활력 캡슐, 우측 아이콘 툴바 */
.topbar {
  position: fixed;
  top: 12px;
  left: 12px;
  right: 12px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  pointer-events: none; /* 빈 영역은 캔버스로 통과 */
  z-index: 5;
}
.capgroup {
  display: flex;
  gap: 8px;
  align-items: flex-start; /* 바람 배지(52px)와 캡슐(36px)을 top 12px 상단 기준으로 정렬 */
}
.mobilecaps {
  display: none;
}
.cap.app-update-chip {
  border-color: rgba(243, 211, 138, 0.5);
  background: rgba(74, 55, 23, 0.92);
  color: #f3d38a;
  font-weight: 700;
  white-space: nowrap;
}
.cap.app-update-chip:hover {
  background: rgba(94, 70, 28, 0.96);
}
.app-update-chip[hidden] {
  display: none;
}
.cap.app-update-chip-mobile {
  width: 80px;
  height: 48px;
  flex-direction: column;
  justify-content: center;
  gap: 1px;
  padding: 4px 8px;
  border-radius: 18px;
  font-size: 11px;
  line-height: 1.15;
}
.app-update-version {
  font-variant-numeric: tabular-nums;
}
.cap {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 7px;
  height: 36px;
  box-sizing: border-box;
  padding: 0 14px;
  border: var(--edge);
  border-radius: 18px;
  background: var(--surface);
  backdrop-filter: blur(12px) saturate(1.2);
  box-shadow: var(--shadow);
  color: var(--ink);
  font-size: 12px;
  font-weight: 500;
  font-variant-numeric: tabular-nums; /* 시각·% 숫자 폭 고정 — 칩 크기 요동 방지(2026-09-04) */
}
button.cap {
  cursor: pointer;
  transition: background-color 120ms ease;
}
/* background-color만 쓴다(shorthand background가 아님) — envcap·timechip의 계절 진행
   채움(background-image 그라디언트, #64)을 hover·on·open에서 지우지 않기 위해서다. */
button.cap:hover,
.cap.on {
  background-color: rgba(34, 48, 63, 0.9);
}
.cap.open {
  /* 패널 열림 — 선택(채움)과 구분: 외곽선 액센트 */
  background-color: rgba(34, 48, 63, 0.9);
  box-shadow: inset 0 0 0 1.5px var(--accent);
}
/* 계절 진행 바탕색(#64) — env-popover.js의 syncEnvCap이 --season-progress(0~100%)·
   --season-tint(rgba, 알파 0.4)를 쓴다. 왼쪽부터 progress까지 계절색, 그 뒤는 그대로
   .cap의 배경색 — 하드 스톱 그라디언트라 값이 없으면(fallback) 아무 변화도 없다.
   데스크톱 환경 캡슐은 항상 채우고, 모바일 시각 칩은 .seasonmode일 때만 채운다. */
.envcap,
.timechip.seasonmode {
  background-image: linear-gradient(
    to right,
    var(--season-tint, transparent) var(--season-progress, 0%),
    transparent var(--season-progress, 0%)
  );
}
.capicon {
  display: flex;
}
.suncolor {
  color: #f3d38a;
}
.mooncolor {
  color: #cfd8e3;
}
.leafcolor {
  color: #8fd48a;
}
.toolbar {
  padding: 0 6px;
  gap: 2px;
}
.toolico {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 26px;
  border: 0;
  border-radius: 13px;
  background: transparent;
  color: var(--ink-dim);
  cursor: pointer;
  transition:
    background 120ms ease,
    color 120ms ease;
}
.toolico:hover {
  background: rgba(255, 255, 255, 0.07);
  color: var(--ink);
}
.toolico.on {
  /* 모드 "선택됨" — 채움(강한 상태) */
  background: var(--accent);
  color: var(--accent-ink);
}
.toolico.open {
  /* 패널 "열림" — 모드 선택과 다른 상태임을 구분: 외곽선만 */
  background: transparent;
  color: var(--accent);
  box-shadow: inset 0 0 0 1.5px var(--accent);
}
.tooldiv {
  width: 1px;
  height: 16px;
  background: rgba(255, 255, 255, 0.12);
  margin: 0 4px;
}

/* 터치 타깃 확장(pointer:coarse만) — 아이콘·버튼의 보이는 크기(30×26)는 그대로 두고,
   ::after 투명 영역으로 히트 영역만 40×44로 넓힌다(2026-08-27 후속: 375px 이하 폰에서
   툴바가 좌측 2행 칩과 겹쳐 아이콘 32→30px·간격 12→10px로 줄였다 — 간격 10+폭 30=40이므로
   ±5px 확장이면 인접 히트존이 정확히 맞닿아 겹치지 않는다. 마우스·데스크탑은 이 미디어쿼리 밖이라 무영향).
   시각 칩·Lv 칩(#64로 분리된 timechip·menubtn)은 서로 6px 간격(.mobilecaps gap)으로
   쌓이므로, 위아래 확장을 절반씩(3px) 나눠 정확히 그 간격 한가운데서 맞닿게 한다 —
   겹치면 한쪽을 눌러도 다른 버튼이 반응하는 사고가 난다. */
@media (pointer: coarse) {
  .toolbar {
    gap: 10px;
    padding: 0 4px;
  }
  .toolico {
    width: 30px;
  }
  .toolico,
  .timechip,
  .menubtn {
    position: relative;
  }
  .toolico::after,
  .timechip::after,
  .menubtn::after {
    content: "";
    position: absolute;
    top: -6px;
    right: -5px;
    bottom: -12px;
    left: -5px;
  }
  /* timechip(위)·menubtn(아래) 사이 6px 간격을 절반씩(3px) — 위 규칙의 bottom/top을 덮는다. */
  .timechip::after {
    bottom: -3px;
  }
  .menubtn::after {
    top: -3px;
  }
  .tooldiv {
    margin: 0; /* 넓어진 gap만으로 충분 — 이중으로 벌어지지 않게 */
  }
}
.drop {
  position: fixed;
  top: 56px;
  width: 248px;
  box-sizing: border-box;
  padding: 14px;
  border: var(--edge);
  border-radius: 14px;
  background: var(--surface);
  backdrop-filter: blur(12px) saturate(1.2);
  box-shadow: var(--shadow);
  color: var(--ink);
  font-size: 12px;
  z-index: 6;
  max-height: calc(100vh - 68px);
  /* biome-ignore lint/suspicious/noDuplicateProperties: iOS Safari는 100vh가 주소창을 뺀 큰 뷰포트라 아래가 잘린다 — dvh로 덮고 홈바만큼 띄운다. */
  max-height: calc(100dvh - 68px - env(safe-area-inset-bottom));
  max-width: calc(100vw - 24px);
  overflow-x: hidden;
  overflow-y: auto;
  display: none;
  animation: dropin 120ms ease;
}
@keyframes dropin {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.envpop {
  left: 12px;
}
.drop.right {
  right: 12px;
}
.popdiv {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  margin: 10px 0;
}
.ghost {
  position: fixed;
  left: 14px;
  bottom: 12px;
  box-sizing: border-box;
  margin: 0;
  padding: 8px 38px 8px 10px;
  color: rgba(220, 232, 240, 0.9);
  background: rgba(24, 34, 45, 0.72);
  border-radius: 8px;
  backdrop-filter: blur(8px);
  font-size: 11px;
  line-height: 1.7;
  pointer-events: none;
  z-index: 5;
  transition:
    background-color 120ms ease,
    border-radius 120ms ease;
}
.ghost.ghost-conflict {
  border-color: color-mix(in srgb, #e99a91 56%, transparent);
  background: color-mix(in srgb, #40282b 88%, transparent);
}
.ghost-text {
  margin: 0;
}
.ghost-toggle {
  pointer-events: auto;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: rgba(220, 232, 240, 0.9);
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.ghost-toggle[hidden],
.ghost-text[hidden] {
  display: none;
}
.ghost-toggle:hover {
  background: rgba(255, 255, 255, 0.1);
}
.ghost-collapse {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 30px;
  height: 30px;
}
.ghost.collapsed {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 12px;
}
.ghost-expand {
  width: 44px;
  height: 44px;
}
.confirm p {
  margin: 0 0 10px;
  line-height: 1.5;
}
.confirm button {
  width: 100%;
  margin-top: 6px;
  border: 0;
  border-radius: 9px;
  padding: 9px;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  background: var(--well);
  color: var(--ink);
  transition: background 120ms ease;
}
.confirm button.primary {
  background: var(--accent);
  color: var(--accent-ink);
}
.world-library-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.world-library-header h3 {
  margin: 0;
  font-size: 14px;
}
.world-library-heading {
  display: grid;
  gap: 2px;
}
.app-version,
.offline-status {
  color: var(--ink-dim);
  font-size: 10.5px;
  font-variant-numeric: tabular-nums;
}
.offline-status[hidden] {
  display: none;
}
.confirm .world-library-header .primary {
  width: auto;
  min-height: 36px;
  margin: 0;
  padding: 8px 10px;
  white-space: nowrap;
}
.world-library-status {
  min-height: 36px;
  margin: 10px 0 0;
}
.world-list {
  display: grid;
  gap: 6px;
  margin-top: 10px;
}
.world-row-item {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 38px;
  gap: 4px;
}
/* 위 줄: 상태 칩(좌)·행동 라벨(우) / 아래: 세계 이름(전체 폭) / 그 아래: 수정 시각
   (승인된 UI 동선, 2026-09-11). row(열기 버튼)와 top(칩·행동 오버레이)을 surface 위에
   겹친다 — 열기는 여전히 행 전체(칩 영역 포함)를 누르면 되고, top은 계정에 저장
   버튼 자리만 pointer-events를 다시 켠다(버튼 안에 버튼을 넣을 수 없어 형제로 둔다). */
.world-row-surface {
  position: relative;
  min-width: 0;
}
.confirm .world-row-surface .world-row {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: stretch;
  width: 100%;
  min-height: 52px;
  margin: 0;
  padding: 24px 10px 8px;
  text-align: left;
}
.confirm .world-row-menu-button {
  width: 38px;
  min-height: 52px;
  margin: 0;
  padding: 0;
  font-size: 20px;
  line-height: 1;
}
.world-row-copy {
  display: grid;
  min-width: 0;
  gap: 3px;
}
.world-row-copy strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.world-row-copy time {
  color: var(--ink-dim);
  font-size: 10.5px;
  font-variant-numeric: tabular-nums;
}
.world-row-copy small {
  color: var(--ink-dim);
  font-size: 10.5px;
  font-weight: 500;
}
.world-row-top {
  position: absolute;
  top: 8px;
  left: 10px;
  right: 10px;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  pointer-events: none;
}
.world-row-chip {
  flex: 0 0 auto;
  padding: 2px 7px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ink) 14%, transparent);
  color: var(--ink-dim);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.world-row-chip[data-chip="synced"] {
  background: color-mix(in srgb, var(--accent) 26%, transparent);
  color: var(--ink);
}
.world-row-chip[data-chip="pending"] {
  background: color-mix(in srgb, #e9c46a 34%, transparent);
  color: var(--ink);
}
.world-row-chip[data-chip="conflict"] {
  background: color-mix(in srgb, #e99a91 34%, transparent);
  color: var(--ink);
}
.world-row-action {
  flex: 0 0 auto;
  color: var(--ink-dim);
  font-size: 11px;
  font-weight: 500;
  pointer-events: none;
}
.world-row-action.world-row-action-current {
  color: var(--ink);
  font-weight: 700;
}
.confirm .world-row-attach {
  pointer-events: auto;
  width: auto;
  min-height: 22px;
  margin: 0;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--accent);
  color: #0f1722;
  font-size: 10.5px;
  font-weight: 700;
  white-space: nowrap;
}
.confirm .world-row-resolve-conflict {
  pointer-events: auto;
  width: auto;
  min-height: 22px;
  margin: 0;
  padding: 3px 9px;
  border-radius: 999px;
  background: color-mix(in srgb, #e99a91 82%, var(--surface));
  color: #171014;
  font-size: 10.5px;
  font-weight: 750;
  white-space: nowrap;
}
.world-conflict-resolution {
  grid-column: 1 / -1;
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid color-mix(in srgb, #e99a91 38%, transparent);
  border-radius: 9px;
  background: color-mix(in srgb, #e99a91 10%, var(--well));
}
.world-conflict-resolution p {
  margin: 0;
  color: var(--ink-dim);
  font-size: 11px;
  line-height: 1.45;
}
.world-conflict-choices {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.confirm .world-conflict-choices button {
  min-height: 38px;
  margin: 0;
  padding: 7px 9px;
  line-height: 1.25;
}
.world-conflict-error {
  color: #e99a91 !important;
}
.world-share-panel {
  grid-column: 1 / -1;
  display: grid;
  gap: 9px;
  min-width: 0;
  padding: 11px;
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  border-radius: 9px;
  background: color-mix(in srgb, var(--accent) 8%, var(--well));
}
.world-share-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.world-share-heading h4 {
  margin: 0;
  font-size: 12px;
}
.confirm .world-share-close {
  display: grid;
  place-items: center;
  width: 30px;
  min-height: 30px;
  margin: 0;
  padding: 0;
}
.confirm .world-share-note,
.confirm .world-share-loading,
.confirm .world-share-error,
.confirm .world-share-meta,
.confirm .world-share-status,
.confirm .world-share-republish-hint,
.confirm .world-share-revoke-confirmation p {
  margin: 0;
  color: var(--ink-dim);
  font-size: 11px;
  line-height: 1.45;
}
.confirm .world-share-error {
  color: #e99a91;
}
.confirm .world-share-create,
.world-share-panel > button {
  min-height: 38px;
  margin: 0;
}
.world-share-link-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px;
  min-width: 0;
}
.world-share-link-row input {
  min-width: 0;
  padding: 8px 9px;
  border: 1px solid color-mix(in srgb, var(--ink) 22%, transparent);
  border-radius: 7px;
  outline: none;
  background: color-mix(in srgb, var(--surface) 88%, #0f1722);
  color: var(--ink);
  font: inherit;
  font-size: 11px;
}
.world-share-link-row input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 72%, transparent);
}
.confirm .world-share-link-row button {
  width: auto;
  min-width: 52px;
  min-height: 36px;
  margin: 0;
  padding: 8px 10px;
}
.confirm .world-share-meta {
  font-variant-numeric: tabular-nums;
}
.confirm .world-share-status {
  font-weight: 700;
}
.confirm .world-share-status.is-current {
  color: var(--accent-ink);
}
.confirm .world-share-status.is-stale {
  color: #e3b779;
}
.confirm .world-share-republish-hint {
  margin-top: -3px;
}
.world-share-actions,
.world-share-revoke-confirm-actions {
  display: flex;
  align-items: center;
  gap: 7px;
}
.world-share-actions > button,
.world-share-revoke-confirm-actions > button {
  flex: 1 1 0;
}
.confirm .world-share-revoke,
.confirm .world-share-revoke-confirm {
  border-color: color-mix(in srgb, #d7685e 55%, transparent);
  color: #f0a098;
}
.world-share-revoke-confirmation {
  display: grid;
  gap: 8px;
  padding: 9px;
  border: 1px solid color-mix(in srgb, #d7685e 42%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, #d7685e 10%, transparent);
}
@media (max-width: 560px) {
  .world-share-actions,
  .world-share-revoke-confirm-actions {
    align-items: stretch;
    flex-direction: column;
  }
  .world-share-actions > button,
  .world-share-revoke-confirm-actions > button {
    width: 100%;
  }
}
.world-row-sync-error {
  grid-column: 1 / -1;
  margin: 0;
  padding: 0 10px;
  color: #e99a91;
  font-size: 11px;
}
.world-row-retry-sync {
  margin-left: 6px;
  padding: 1px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ink) 14%, transparent);
  color: var(--ink);
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
}
.confirm .world-row[aria-current="page"] {
  background: color-mix(in srgb, var(--accent) 22%, var(--well));
  cursor: default;
  opacity: 1;
}
.confirm .world-slot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: 52px;
  margin: 0;
  padding: 8px 10px;
  border: 1px dashed color-mix(in srgb, var(--ink) 18%, transparent);
  border-radius: 9px;
  background: color-mix(in srgb, var(--well) 55%, transparent);
  color: var(--ink);
  text-align: left;
}
.confirm button.world-slot-empty:hover {
  border-color: color-mix(in srgb, var(--accent) 58%, transparent);
  background: color-mix(in srgb, var(--accent) 12%, var(--well));
}
.confirm .world-slot-locked {
  border-style: solid;
  opacity: 0.56;
}
.world-slot-action {
  display: inline-flex;
  align-items: center;
}
.world-row-menu {
  position: absolute;
  z-index: 4;
  top: 48px;
  right: 0;
  display: grid;
  gap: 4px;
  width: 128px;
  padding: 4px;
  border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent);
  border-radius: 10px;
  background: color-mix(in srgb, var(--surface) 96%, #0f1722);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.24);
  backdrop-filter: blur(12px);
}
.confirm .world-row-menu button {
  min-height: 36px;
  margin: 0;
  padding: 7px 9px;
  text-align: left;
}
.confirm .world-row-menu .world-delete-button {
  color: #e99a91;
}
.world-rename-form {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 6px;
  padding: 6px;
  border-radius: 9px;
  background: var(--well);
}
.world-rename-input {
  min-width: 0;
  border: 1px solid color-mix(in srgb, var(--ink) 22%, transparent);
  border-radius: 7px;
  padding: 7px 8px;
  background: color-mix(in srgb, var(--surface) 88%, #0f1722);
  color: var(--ink);
  font: inherit;
}
.world-rename-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 72%, transparent);
}
.confirm .world-rename-form button {
  width: auto;
  min-height: 34px;
  margin: 0;
  padding: 7px 9px;
}
.world-rename-error {
  grid-column: 1 / -1;
  margin: 0;
  color: #e99a91;
  font-size: 11px;
}
.world-list-empty {
  margin: 0;
  padding: 12px 10px;
  border-radius: 9px;
  background: var(--well);
  color: var(--ink-dim);
  text-align: center;
}
.world-trash {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
}
.confirm .world-trash-toggle {
  width: 100%;
  min-height: 36px;
  margin: 0;
  padding: 8px 10px;
  color: var(--ink-dim);
  text-align: left;
}
.world-trash-toggle::after {
  float: right;
  content: "⌄";
  transform: rotate(0deg);
  transition: transform 120ms ease;
}
.world-trash-toggle[aria-expanded="true"]::after {
  transform: rotate(180deg);
}
.world-trash-list {
  display: grid;
  gap: 6px;
  margin-top: 6px;
}
.world-trash-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 7px 8px 7px 10px;
  border-radius: 9px;
  background: var(--well);
}
.confirm .world-trash-row button {
  width: auto;
  min-height: 34px;
  margin: 0;
  padding: 7px 9px;
}
.confirm .worldio {
  display: flex;
  gap: 8px;
  margin-top: 6px;
}
.confirm .worldio button {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
:where(.confirm)
  :where(.world-library-header, .worldio, .world-trash-row)
  button:disabled,
:where(.confirm) button.world-slot-empty:disabled,
:where(.confirm) button.world-row-attach:disabled {
  cursor: not-allowed;
  opacity: 0.5;
  filter: none;
}
.worldio-hint {
  margin: 8px 0 0;
}
.world-transfer {
  min-width: 0;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
}
.world-transfer-title {
  display: block;
  font-size: 12px;
}
.world-transfer-launchers {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 7px;
  margin-top: 7px;
}
.confirm .world-transfer-launchers button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 0;
  min-height: 40px;
  margin: 0;
  padding: 7px 6px;
  font-size: 11px;
  white-space: nowrap;
}
.confirm .world-transfer-intro {
  margin: 3px 0 8px;
  color: var(--ink-dim);
  font-size: 11px;
}
.world-transfer-path {
  min-width: 0;
  margin-top: 7px;
  padding: 9px;
  border-radius: 10px;
  background: var(--well);
}
.world-transfer-path-title {
  display: block;
  font-size: 11.5px;
}
.confirm .world-transfer-path-detail {
  margin: 3px 0 7px;
  color: var(--ink-dim);
  font-size: 10.5px;
}
.confirm .world-transfer-create {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 38px;
  margin: 0;
}
.world-transfer-receive {
  min-width: 0;
  margin: 0 0 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
}
.world-transfer-receive-label {
  display: grid;
  gap: 5px;
  min-width: 0;
  color: var(--ink-dim);
  font-size: 10.5px;
}
.world-transfer-receive-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px;
  min-width: 0;
}
.world-transfer-receive-input {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  padding: 8px;
  border: 1px solid color-mix(in srgb, var(--ink) 22%, transparent);
  border-radius: 7px;
  outline: none;
  background: color-mix(in srgb, var(--surface) 88%, #0f1722);
  color: var(--ink);
  font: inherit;
  font-size: 11px;
}
.world-transfer-receive-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 72%, transparent);
}
.confirm .world-transfer-receive-row button {
  width: auto;
  min-width: 98px;
  min-height: 38px;
  margin: 0;
  padding: 7px 10px;
}
.confirm .world-transfer-error {
  margin: 7px 0 0;
  color: #e99a91;
  font-size: 10.5px;
}
.world-transfer-active {
  display: grid;
  grid-template-columns: minmax(112px, 142px) minmax(0, 1fr);
  gap: 9px;
  min-width: 0;
  margin-top: 8px;
}
.world-transfer-active[hidden],
.world-transfer-error[hidden] {
  display: none;
}
.world-transfer-qr {
  display: block;
  box-sizing: border-box;
  width: 100%;
  max-width: 142px;
  aspect-ratio: 1;
  padding: 5px;
  border-radius: 8px;
  background: #fff;
}
.world-transfer-active-info {
  display: grid;
  align-content: start;
  gap: 5px;
  min-width: 0;
}
.world-transfer-remaining {
  color: var(--ink);
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
}
.world-transfer-expiry {
  line-height: 1.4;
}
.world-transfer-link {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  padding: 7px 8px;
  border: 1px solid color-mix(in srgb, var(--ink) 22%, transparent);
  border-radius: 7px;
  outline: none;
  background: color-mix(in srgb, var(--surface) 88%, #0f1722);
  color: var(--ink);
  font: inherit;
  font-size: 10px;
}
.world-transfer-link:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 72%, transparent);
}
.world-transfer-actions {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}
.confirm .world-transfer-actions button {
  flex: 1 1 88px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: auto;
  min-width: 0;
  min-height: 36px;
  margin: 0;
  padding: 7px 8px;
}
.confirm .world-transfer-actions .world-transfer-cancel {
  color: #f0a098;
}
@media (max-width: 560px) {
  .world-transfer-receive-row {
    grid-template-columns: minmax(0, 1fr);
  }
  .confirm .world-transfer-receive-row button {
    width: 100%;
  }
  .world-transfer-active {
    grid-template-columns: minmax(0, 1fr);
  }
  .world-transfer-qr {
    justify-self: center;
    width: min(172px, 100%);
    max-width: 172px;
  }
  .world-transfer-actions {
    grid-column: 1;
  }
}
.world-transfer-modal {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: flex;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  padding: max(20px, env(safe-area-inset-top))
    max(20px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom))
    max(20px, env(safe-area-inset-left));
  background: rgba(5, 9, 14, 0.74);
  backdrop-filter: blur(5px);
}
.world-transfer-modal[hidden] {
  display: none;
}
.world-transfer-modal-card {
  display: flex;
  overflow: hidden;
  flex-direction: column;
  box-sizing: border-box;
  width: min(520px, 100%);
  max-height: min(720px, 100%);
  border: var(--edge);
  border-radius: 16px;
  background: color-mix(in srgb, var(--surface) 96%, #15202b);
  box-shadow: var(--shadow);
  color: var(--ink);
}
.world-transfer-modal-header {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 15px 16px 12px;
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
}
.world-transfer-modal-header h2 {
  margin: 0;
  font-size: 17px;
}
.world-transfer-modal button {
  box-sizing: border-box;
  min-height: 42px;
  padding: 9px 13px;
  border: 1px solid var(--control-edge);
  border-radius: 9px;
  background: var(--control-idle);
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  font-weight: 650;
  cursor: pointer;
}
.world-transfer-modal button:hover {
  border-color: color-mix(in srgb, var(--accent-ink) 35%, transparent);
  background: color-mix(in srgb, var(--accent) 45%, var(--control-idle));
}
.world-transfer-modal button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}
.confirm button.icon-label-button,
.world-transfer-modal button.icon-label-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
button.icon-label-button > svg {
  display: block;
  flex: 0 0 auto;
}
.world-transfer-modal .world-transfer-modal-close {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 36px;
  padding: 7px 10px;
}
.world-transfer-modal-content {
  overflow-x: hidden;
  overflow-y: auto;
  min-width: 0;
  padding: 16px;
  overscroll-behavior: contain;
}
.world-transfer-modal-intro {
  margin: 0 0 14px;
  color: var(--ink-dim);
  font-size: 13px;
  line-height: 1.55;
}
.world-transfer-pairing-form,
.world-transfer-pairing-form label {
  display: grid;
  gap: 8px;
}
.world-transfer-pairing-form label {
  color: var(--ink-dim);
  font-size: 12px;
}
.world-transfer-pairing-input,
.world-transfer-modal .world-transfer-receive-input,
.world-transfer-modal .world-transfer-link {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  padding: 11px 12px;
  border: 1px solid color-mix(in srgb, var(--ink) 22%, transparent);
  border-radius: 9px;
  outline: none;
  background: color-mix(in srgb, var(--surface) 80%, #0f1722);
  color: var(--ink);
  font: inherit;
  font-size: 16px;
}
.world-transfer-pairing-input {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 22px;
  font-weight: 750;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.world-transfer-pairing-input::placeholder {
  color: color-mix(in srgb, var(--ink-dim) 72%, transparent);
  font-family: system-ui, sans-serif;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  opacity: 1;
}
.world-transfer-pairing-code {
  display: block;
  margin: 5px 0 0;
  color: var(--accent-ink);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: clamp(32px, 9vw, 46px);
  letter-spacing: 0.12em;
  text-align: center;
}
.world-transfer-pairing-share {
  display: grid;
  grid-template-columns: 144px minmax(0, 1fr);
  align-items: center;
  gap: 18px;
  margin: 2px 0 14px;
}
.world-transfer-pairing-qr {
  display: block;
  box-sizing: border-box;
  width: 144px;
  height: 144px;
  padding: 5px;
  border-radius: 10px;
  background: #fff;
}
.world-transfer-send-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.world-transfer-send-actions button {
  min-width: 0;
}
.world-transfer-scanner {
  position: relative;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--accent-ink) 28%, transparent);
  border-radius: 12px;
  background: #05090e;
}
.world-transfer-scanner[hidden] {
  display: none;
}
.world-transfer-scanner-video {
  display: block;
  width: 100%;
  min-height: 220px;
  max-height: 320px;
  object-fit: cover;
}
.world-transfer-scanner-hint {
  position: absolute;
  right: 10px;
  bottom: 10px;
  left: 10px;
  margin: 0;
  padding: 7px 9px;
  border-radius: 8px;
  background: rgb(5 9 14 / 78%);
  color: #fff;
  font-size: 11px;
  text-align: center;
}
.world-transfer-pairing-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.world-transfer-pairing-status {
  margin: 12px 0 0;
  padding: 10px 12px;
  border-radius: 9px;
  background: color-mix(in srgb, var(--accent) 25%, var(--well));
  color: var(--accent-ink);
  font-size: 12px;
  line-height: 1.45;
}
.world-transfer-pairing-status[hidden] {
  display: none;
}
.world-transfer-pairing-status.error {
  background: color-mix(in srgb, var(--danger) 26%, var(--well));
  color: var(--danger-ink);
}
.world-transfer-pairing-status.busy {
  display: flex;
  align-items: center;
  gap: 8px;
}
.world-transfer-pairing-status.busy::before {
  width: 13px;
  height: 13px;
  flex: 0 0 auto;
  border: 2px solid color-mix(in srgb, currentColor 24%, transparent);
  border-top-color: currentColor;
  border-radius: 50%;
  animation: loadspin 850ms linear infinite;
  content: "";
}

.world-transfer-send-complete {
  display: grid;
  justify-items: center;
  padding: 22px 16px 18px;
  border: 1px solid color-mix(in srgb, var(--accent-ink) 24%, transparent);
  border-radius: 14px;
  background: color-mix(in srgb, var(--accent) 18%, var(--well));
  text-align: center;
}

.world-transfer-send-complete-mark {
  display: grid;
  width: 52px;
  height: 52px;
  place-items: center;
  margin-bottom: 12px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent-ink) 18%, transparent);
  color: var(--accent-ink);
}

.world-transfer-send-complete-title {
  color: var(--ink);
  font-size: 18px;
}

.world-transfer-send-complete-code {
  margin-top: 10px;
  color: var(--accent-ink);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: clamp(28px, 8vw, 38px);
  letter-spacing: 0.12em;
}

.world-transfer-send-complete-next {
  max-width: 32em;
  margin: 12px 0 0;
  color: var(--ink-dim);
  font-size: 13px;
  line-height: 1.55;
}

.world-transfer-received-preview {
  display: grid;
  gap: 3px;
  padding: 14px 16px;
  border: 1px solid rgb(148 210 236 / 20%);
  border-radius: 14px;
  background: rgb(3 18 28 / 45%);
}

.world-transfer-received-name {
  overflow-wrap: anywhere;
  color: #e9f8ff;
  font-size: 16px;
}

.world-transfer-received-meta {
  color: #96adba;
  font-size: 12px;
}
.world-transfer-modal .world-transfer-accept {
  width: 100%;
  margin-top: 12px;
}
.world-transfer-pairing-expiry {
  margin: 8px 0 0;
  line-height: 1.45;
}
.world-transfer-modal .world-transfer-danger {
  color: var(--danger-ink);
}
.world-transfer-fallback {
  min-width: 0;
  margin-top: 18px;
  padding-top: 12px;
  border-top: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
}
.world-transfer-fallback summary {
  color: var(--ink-dim);
  font-size: 12px;
  cursor: pointer;
}
.world-transfer-fallback-body {
  display: grid;
  gap: 12px;
  min-width: 0;
  padding-top: 12px;
}
.world-transfer-fallback-hint {
  margin: 0;
  color: #7e93a6;
  font-size: 11px;
  line-height: 1.45;
}
.world-transfer-modal .world-transfer-fallback .world-transfer-receive {
  margin: 0;
  padding-bottom: 12px;
}
.world-transfer-modal .world-transfer-create {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  min-height: 44px;
  margin: 0;
}
.world-transfer-modal .world-transfer-error {
  margin: 7px 0 0;
  color: #e99a91;
  font-size: 12px;
}
.world-transfer-modal .world-transfer-actions button,
.world-transfer-modal .world-transfer-receive-row button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 0;
}
.world-transfer-file-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  width: 100%;
}
.world-transfer-modal .world-transfer-file-actions button {
  width: 100%;
  min-height: 44px;
  margin: 0;
}
@media (max-width: 560px) {
  .world-transfer-modal {
    align-items: stretch;
    padding: max(12px, env(safe-area-inset-top))
      max(12px, env(safe-area-inset-right))
      max(12px, env(safe-area-inset-bottom))
      max(12px, env(safe-area-inset-left));
  }
  .world-transfer-modal-card {
    width: 100%;
    max-height: 100%;
    border-radius: 14px;
  }
  .world-transfer-modal-header {
    padding: 12px;
  }
  .world-transfer-modal-content {
    padding: 14px 12px 18px;
  }
  .world-transfer-launchers,
  .world-transfer-pairing-actions,
  .world-transfer-send-actions,
  .world-transfer-file-actions {
    grid-template-columns: minmax(0, 1fr);
  }
  .world-transfer-pairing-share {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    gap: 6px;
  }
  .world-transfer-pairing-qr {
    width: min(168px, 100%);
    height: auto;
    aspect-ratio: 1;
  }
}
.browser-storage {
  margin-top: 10px;
  padding: 10px;
  border-radius: 10px;
  background: var(--well);
}
.browser-storage-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  min-width: 0;
  gap: 10px;
  font-size: 12px;
}
.browser-storage-value {
  min-width: 0;
  color: var(--ink-dim);
  font-size: 11px;
  overflow-wrap: anywhere;
  text-align: right;
}
.browser-storage-detail,
.browser-storage-persistence,
.browser-storage-backup {
  margin-top: 5px;
  line-height: 1.5;
}
.confirm .browser-storage-persist {
  width: auto;
  min-height: 36px;
  margin: 8px 0 0;
  padding: 7px 10px;
}
.browser-storage-warning {
  margin: 8px 0 0;
  color: #e99a91;
  font-size: 11px;
  line-height: 1.5;
}
.browser-storage-warning[hidden] {
  display: none;
}
.browser-storage-backup {
  padding-top: 7px;
  border-top: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
}
/* ── 계정 한 줄·로그인/가입(#19) — 내 세계 패널 맨 위, 승인된 UI 동선(2026-09-11) ── */
.world-account {
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
}
.world-account-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.world-account-status {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 600;
}
.confirm .world-account-action {
  width: auto;
  min-height: 32px;
  margin: 0;
  padding: 7px 10px;
  flex: 0 0 auto;
  white-space: nowrap;
}
.world-account-hint {
  margin: 4px 0 0;
}
.world-account-hint.world-account-hint-error {
  color: #e99a91;
}
.confirm .world-account-top button:disabled,
.confirm .world-account-actions button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
  filter: none;
}
.world-account-auth h3 {
  margin: 0 0 8px;
  font-size: 14px;
}
.world-account-note {
  margin: 0 0 12px;
}
.world-account-form {
  display: grid;
  gap: 8px;
}
.world-account-form label {
  display: grid;
  gap: 4px;
  font-size: 11px;
  color: var(--ink-dim);
}
.world-account-form label[hidden] {
  display: none;
}
.world-account-form input {
  border: 1px solid color-mix(in srgb, var(--ink) 22%, transparent);
  border-radius: 7px;
  padding: 8px 9px;
  background: color-mix(in srgb, var(--surface) 88%, #0f1722);
  color: var(--ink);
  font: inherit;
}
@media (pointer: coarse) {
  /* iOS Safari는 16px보다 작은 입력란에 포커스할 때 페이지를 자동 확대한다. */
  .world-account-form input {
    font-size: 16px;
  }
}
.world-account-form input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 72%, transparent);
}
.world-account-error {
  margin: 0;
  color: #e99a91;
  font-size: 11px;
}
.world-account-error[hidden] {
  display: none;
}
.world-account-actions {
  display: grid;
  gap: 6px;
  margin-top: 4px;
}
.confirm button:hover {
  filter: brightness(1.15);
}
/* 슬라이더 행 공통(시간/계절/비/구름/소리·반경/강도) */
.time,
.weather,
.season {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 0;
}
.timelabel,
.weatherlabel,
.seasonlabel {
  font-variant-numeric: tabular-nums;
  min-width: 52px;
  color: var(--ink-dim);
}
input[type="range"] {
  flex: 1;
  accent-color: #6fa876;
}
.play {
  border: 0;
  background: transparent;
  color: var(--ink);
  display: flex;
  cursor: pointer;
  padding: 2px;
}

/* v8 활력 캡슐 */
.vitalcap .vitallabel {
  font-size: 12px;
}
.xpbar {
  width: 54px;
  height: 5px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.15);
  overflow: hidden;
}
.xpfill {
  height: 100%;
  width: 0%;
  border-radius: 3px;
  background: #8fd48a;
  transition: width 0.3s;
}

/* v8 레벨업 토스트 */
.toast {
  position: fixed;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(20, 28, 24, 0.92);
  color: #eaf6e8;
  padding: 10px 16px;
  border-radius: 8px;
  font-size: 13px;
  z-index: 20;
  pointer-events: none;
  display: flex;
  align-items: center;
  gap: 10px;
  box-sizing: border-box;
  max-width: calc(100vw - 24px);
}
.toast-text {
  min-width: 0;
  overflow-wrap: anywhere;
}
/* 삭제 되돌리기 등 — 토스트 자체는 pointer-events:none(클릭 통과)이지만 액션 버튼만은 눌려야 한다 */
.toast-action {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: inherit;
  border-radius: 999px;
  padding: 4px 12px;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  min-height: 32px;
  pointer-events: auto;
}
.toast-action:hover {
  background: rgba(255, 255, 255, 0.12);
}

/* 로컬 저장 실패가 이어지는 동안 유지되는 복구 진입점. 패널이 열리면 z-index 6 패널이
   칩 위를 덮고, 닫히면 다시 드러난다. */
.save-status {
  position: fixed;
  top: 60px;
  right: 12px;
  z-index: 5;
  min-height: 32px;
  box-sizing: border-box;
  padding: 6px 12px;
  border: 1px solid rgba(231, 190, 93, 0.42);
  border-radius: 999px;
  background: rgba(74, 55, 23, 0.92);
  box-shadow: var(--shadow);
  color: #f3d38a;
  font: inherit;
  font-size: 11px;
  font-weight: 650;
  cursor: pointer;
  backdrop-filter: blur(12px) saturate(1.2);
}
.save-status:hover {
  background: rgba(94, 70, 28, 0.96);
}
.save-status[hidden] {
  display: none;
}
/* 터치 기기 — 토스트가 상단바(top 12px + 한 줄 44px = 하단 56px)와 겹치지 않게 그 아래 줄로 내린다 */
@media (pointer: coarse) {
  .toast {
    top: 64px;
  }
  .toast-action {
    min-height: 44px;
  }
}

/* v8 잠금·게이지 */
.tool:disabled {
  opacity: 0.45;
  cursor: default;
}
.fullness {
  font-size: 12px;
  margin: 4px 0;
}

/* v10 배치 수용량 요약 칩 — 동물·조형물 두 배지(2026-08-26). 합산 개요이며 일반 텍스트
   느낌을 없애려 필 스타일로 디자인. 정확한 개별 풀은 HUD 타이틀 배지가 담당. */
.capacitygauge {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  font-size: 12px;
  margin: 4px 0;
}
.capacity-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  padding: 3px 9px;
  border: var(--edge);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  line-height: 1.2;
}
.capacity-chip em {
  font-style: normal;
  color: var(--ink-dim);
}
.capacity-chip b {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.capacity-chip i {
  font-style: normal;
  color: var(--ink-dim);
  font-variant-numeric: tabular-nums;
}

/* v8.5 활력 정체 힌트 — 보조 캡슐로 스타일 차용(위치 없이 capgroup 자식) */
.vitalhint {
  pointer-events: auto;
  display: flex;
  align-items: center;
  height: 36px;
  box-sizing: border-box;
  padding: 0 14px;
  border: var(--edge);
  border-radius: 18px;
  background: var(--surface);
  backdrop-filter: blur(12px) saturate(1.2);
  box-shadow: var(--shadow);
  font-size: 11px;
  color: #d6b45a;
  line-height: 1.3;
}

.vitalhint[hidden] {
  display: none;
}

/* v7.5 시점(eyecam) — 목록 + PiP 오버레이 */
.eyelist {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 6px;
}
.eyeview-control {
  display: grid;
  gap: 5px;
  padding: 2px 0 6px;
}
.eyeview-label {
  color: var(--ink-dim);
  font-size: 10px;
}
.eyeview-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px;
  padding: 3px;
  border: var(--edge);
  border-radius: 8px;
  background: rgba(8, 13, 19, 0.48);
}
.eyeview-option {
  min-width: 0;
  height: 30px;
  padding: 0 8px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--ink-dim);
  font: inherit;
  cursor: pointer;
}
.eyeview-option:hover {
  color: var(--ink);
}
.eyeview-option[aria-pressed="true"] {
  background: var(--accent);
  color: var(--accent-ink);
}
/* .tool과 동일 명시도(0,1,0)라 후속 선언(.tool)이 이겨버림 — .tool.eyerow로 명시도를 올려 고정 */
.tool.eyerow {
  text-align: left;
  justify-content: flex-start;
}
/* 2026-09-04 — 동물 행 = 선택(본문) + 시선으로 보기 + 이름 바꾸기, 세 버튼을 한 줄에. */
.eyerow-wrap {
  display: flex;
  gap: 4px;
}
.eyerow-wrap .tool.eyerow {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tool.eyebtn {
  flex: 0 0 auto;
  width: 32px;
  padding: 0;
}
.eyename-input {
  flex: 1 1 auto;
  min-width: 0;
}
/* 터치 타깃 40px — 다른 .tool 버튼보다 좁은 아이콘 전용 버튼이라 손가락 크기를 따로 보정. */
@media (pointer: coarse) {
  .eyeview-option {
    height: 44px;
  }
  .tool.eyebtn {
    width: 40px;
    height: 40px;
  }
}
.hint {
  font-size: 11px;
  color: #7e93a6;
  margin: 12px 0 0;
  line-height: 1.7;
}
/* v9.4 후속 — 도움말 패널: 모드별 섹션 + 공통 단축키 */
.helpsection + .helpsection {
  margin-top: 14px;
}
.helpsection h4 {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
}
.helppanel .hint {
  margin-top: 6px;
}
.pip {
  position: fixed;
  /* 우측 드롭다운 슬롯과 겹치지 않게 좌측 정렬 — eyecam.js PIP_RIGHT/PIP_TOP과 손동기 */
  right: 310px;
  top: 16px;
  border: 2px solid rgba(255, 255, 255, 0.85);
  border-radius: 6px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
  touch-action: none; /* 포인터 드래그(팬/틸트) */
  z-index: 10;
}
.pip .pipbar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px 6px;
  background: rgba(20, 28, 40, 0.55);
  color: #fff;
  font-size: 12px;
  border-radius: 4px 4px 0 0;
  pointer-events: none; /* 바 배경은 드래그 통과 — 버튼만 클릭 */
}
.pip .pipbar .piptitle {
  flex: 1;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.pip .pipbar button {
  pointer-events: auto;
  display: inline-flex; /* SVG 아이콘 수평 정렬 — 인라인 기본 베이스라인 어긋남 방지 */
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: #fff;
  cursor: pointer;
  font-size: 13px;
  padding: 0 4px;
}

/* 지형/배치 드롭다운 내부(Task 4 리스타일) — 아이콘+텍스트 붓/도구, 잠금 SVG 배지, 토큰 기반 색 */
.brushes {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}
.brush {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  border: 0;
  border-radius: 9px;
  padding: 9px 2px 7px;
  background: var(--control-idle);
  color: var(--ink-dim);
  box-shadow: inset 0 0 0 1px var(--control-edge);
  font-size: 10.5px;
  cursor: pointer;
  transition:
    background 120ms ease,
    color 120ms ease;
}
.brush:hover:not(.active) {
  background: #2b3a4b;
}
.brush.active {
  background: var(--accent);
  color: var(--accent-ink);
  box-shadow: none;
}
.group {
  margin-top: 4px;
}
.tools {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}
.tool {
  flex: 1 1 calc(33% - 6px);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: 0;
  border-radius: 9px;
  padding: 8px 4px;
  background: var(--control-idle);
  color: var(--ink-dim);
  box-shadow: inset 0 0 0 1px var(--control-edge); /* 누를 수 있음 어포던스 */
  font-size: 11.5px;
  cursor: pointer;
  transition:
    background 120ms ease,
    color 120ms ease;
}
.tool:hover:not(.active):not(:disabled) {
  background: #2b3a4b;
}
.tool.active {
  background: var(--accent);
  color: var(--accent-ink);
  box-shadow: none;
}
.tool:disabled {
  opacity: 0.4;
  cursor: default;
}

/* 배치 패널 3층 위계(2026-08-24) — 도구 탭(1층) > 카테고리(2층) > 변형 칩(3층).
   같은 .tool 버튼이라도 행 클래스로 크기·강조를 나눠 층위가 눈에 보이게 한다.
   단계별 선택 색상(미선택도 층마다 다른 색): 1층=초록 / 2층=청색 / 3층=호박색 /
   종=청록 — "지금 몇 단계를 고르는 중인지"가 색만으로 보이게 한다. */
.stage-label {
  flex-basis: 100%; /* flex-wrap 행에서 혼자 한 줄 차지 — 캡션이 위 줄이 된다 */
  margin-top: 10px; /* 이전 단계와의 간격 */
  padding-bottom: 5px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18); /* 단계 구분선 */
  font-size: 10px;
  font-weight: 600;
  color: var(--ink-dim);
  letter-spacing: 0.03em;
}
.tools.sub .tool.active {
  /* 2층 선택 — 청색 채움(1층 초록과 다른 색) */
  background: #2e5d78;
  color: #dcebf5;
}
.tools.chips .tool.active {
  /* 3층 선택 — 호박색 채움(1·2층과 다른 색) */
  background: #7a5c2e;
  color: #f3e8d2;
}
.tools.primary .tool {
  /* 1층 도구 탭 — 초록 계열. 가장 크고, 선택 시 액센트 채움 */
  flex: 1 1 calc(33% - 6px);
  padding: 9px 4px;
  font-size: 12px;
  font-weight: 600;
  position: relative;
  background: #1d2b23;
  color: #b9cfc0;
}
.tools.primary .tool:hover:not(.active):not(:disabled) {
  background: #2c4235;
}
.tools.primary .tool.active {
  background: var(--accent);
}
.tools.sub .tool {
  /* 2층 카테고리 — 청색 계열 */
  background: #182531;
  color: #b3c6d4;
}
.tools.sub .tool:hover:not(.active):not(:disabled) {
  background: #27394a;
}
.tools.chips {
  gap: 4px;
}
.tools.chips .tool {
  /* 3층 변형 칩 — 호박색 계열. 작고, 이름이 줄바꿈되지 않게("벚나무 Lv3" 방지) */
  flex: 0 1 auto;
  min-width: 0;
  white-space: nowrap;
  padding: 5px 8px;
  font-size: 10.5px;
  border-radius: 7px;
  background: #292318;
  color: #cfc4ab;
}
.tools.chips .tool:hover:not(.active):not(:disabled) {
  background: #3e3625;
}
.lockbadge {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 9.5px;
  color: var(--ink-dim);
}
.tools.chips .tool .lockbadge {
  font-size: 8.5px;
}
.undo,
.delete,
.edit {
  width: 100%;
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 0;
  border-radius: 9px;
  padding: 8px;
  font-size: 11.5px;
  cursor: pointer;
  background: var(--well);
  color: var(--ink-dim);
  transition: background 120ms ease;
}
.undo:hover,
.edit:hover {
  background: #2b3a4b;
  color: var(--ink);
}
.delete {
  background: var(--danger);
  color: var(--danger-ink);
}
.delete:hover {
  filter: brightness(1.15);
}
/* 편집 토글 「칠하기」/「놓기」(6-1) — 손가락이 하는 일이 바뀌는 스위치라 켜짐이 확실히 보여야 함 */
.edittoggle {
  -webkit-tap-highlight-color: transparent;
  width: 100%;
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  border: 0;
  border-radius: 9px;
  padding: 8px;
  font-size: 11.5px;
  cursor: pointer;
  background: var(--well);
  color: var(--ink-dim);
  transition:
    background 120ms ease,
    color 120ms ease;
}
.edittoggle-label {
  display: flex;
  align-items: center;
  gap: 6px;
}
.edittoggle-state {
  font-size: 10.5px;
}
.edittoggle:hover {
  background: #2b3a4b;
  color: var(--ink);
}
.edittoggle.on {
  background: var(--accent);
  color: var(--accent-ink);
}
.sculpt-shortcut {
  margin: 10px 0 0;
  color: var(--ink-dim);
  font-size: 10.5px;
  text-align: center;
}
/* 터치 타깃 44px — 지형/배치 패널의 다른 버튼(undo 등)은 그대로, 이 버튼만 손가락이 하는
   일을 바꾸므로 여유 있게 키운다. */
@media (pointer: coarse) {
  .edittoggle {
    min-height: 44px;
  }
}
/* 6-6: 터치 편집의 주 스위치 — 패널 밖 우하단(엄지)에 상주. 패널 안 버튼과 상태를 공유하되
   터치에선 둘이 중복이라 패널 쪽을 감춘다(마우스는 ⌘/⌃가 있어 부동 버튼을 아예 띄우지 않는다). */
.edittoggle-float {
  position: fixed;
  right: 12px;
  bottom: 12px;
  z-index: 7;
  width: auto;
  margin-top: 0;
  min-height: 44px;
  padding: 10px 14px;
  gap: 10px;
  border: var(--edge);
  border-radius: 22px;
  font-size: 12.5px;
  background: var(--surface);
  backdrop-filter: blur(12px) saturate(1.2);
  box-shadow: var(--shadow);
  color: var(--ink);
}
.edittoggle-float.on {
  background: var(--accent);
  color: var(--accent-ink);
  border-color: transparent;
}
@media (pointer: coarse) {
  .drop .edittoggle {
    display: none;
  }
  .ghost:not(.collapsed) {
    padding-right: 48px;
  }
  .ghost-collapse {
    top: 0;
    right: 0;
    width: 44px;
    height: 44px;
  }
  /* 좁은 화면에서 고스트 힌트가 편집·폭죽 버튼(우하단 ~110px)과 겹치지 않게 좁힌다 —
     힌트가 한 줄 더 접히는 편이 버튼과 겹치는 것보다 낫다. 넓은 태블릿에선 calc가 커서 무효. */
  .hasfloat .ghost,
  #app:has(> .night-activities:not([hidden])) .ghost {
    max-width: calc(100vw - 154px);
  }
}

/* 화면 조이스틱(Task B, 터치 카메라 내비) — 하단 중앙. 폭이 아니라 높이로 다른 요소를
   피한다: 고스트 힌트(좌하단)·「칠하기」 부동 버튼(우하단 ~56px 높이)이 둘 다 화면 맨
   아래에 붙어 있으므로, 조이스틱을 bottom:100px로 띄워 세로로 떨어뜨리면 힌트 문구
   길이·부동 버튼 폭이 달라져도 항상 겹치지 않는다(가로 중앙 정렬을 유지하면서). */
.joystick {
  position: fixed;
  left: 50%;
  bottom: 100px;
  transform: translateX(-50%);
  z-index: 7;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  touch-action: none;
}
.joymode {
  border: var(--edge);
  border-radius: 14px;
  padding: 5px 16px;
  background: var(--surface);
  backdrop-filter: blur(12px) saturate(1.2);
  box-shadow: var(--shadow);
  color: var(--ink);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  touch-action: none;
}
.joymode.on {
  background: var(--accent);
  color: var(--accent-ink);
}
.joyrow {
  display: flex;
  align-items: center;
  gap: 14px;
}
/* 패드 지름 104px = joystick.js PAD_RADIUS(52) × 2 — 바꾸면 같이 고칠 것 */
.joypad {
  position: relative;
  width: 104px;
  height: 104px;
  border-radius: 50%;
  border: var(--edge);
  background: var(--surface);
  backdrop-filter: blur(12px) saturate(1.2);
  box-shadow: var(--shadow);
  touch-action: none;
}
.joyknob {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 44px;
  height: 44px;
  margin: -22px 0 0 -22px;
  border-radius: 50%;
  background: var(--well);
  border: 1px solid rgba(255, 255, 255, 0.16);
}
.joythrustcol {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.joythrust {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 48px;
  height: 48px;
  border: var(--edge);
  border-radius: 12px;
  background: var(--surface);
  backdrop-filter: blur(12px) saturate(1.2);
  box-shadow: var(--shadow);
  color: var(--ink);
  font-size: 9.5px;
  cursor: pointer;
  touch-action: none;
}
.joythrust.back svg {
  transform: rotate(180deg);
}
.joythrust.on {
  background: var(--accent);
  color: var(--accent-ink);
}
.slider {
  display: block;
  font-size: 11px;
  color: var(--ink-dim);
  margin-top: 10px;
}
.slider select {
  width: 100%;
  min-height: 36px;
  padding: 6px 8px;
  border: 1px solid var(--control-edge);
  border-radius: 6px;
  background: var(--well);
  color: inherit;
  font: inherit;
}
.slider input {
  width: 100%;
  margin-top: 4px;
}
/* v9.4 후속 — 바람 배지(좌측 상단 독립 원형, .cap과 같은 표면 토큰) */
.windbadge {
  pointer-events: auto;
  position: relative;
  width: 52px;
  height: 52px;
  box-sizing: border-box;
  border: var(--edge);
  border-radius: 50%;
  background: var(--surface);
  backdrop-filter: blur(12px) saturate(1.2);
  box-shadow: var(--shadow);
  flex: none;
}
.windarrow {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #9ec3ff;
  transform-origin: center;
  pointer-events: none;
}
/* focus-visible 하늘색 outline 제거(2026-08-27, v9.4 키보드 포커스 링 대체) —
   Safari·터치에서 버튼 클릭이 focus-visible로 처리되어 pill 모양을 따라가지 않는
   직사각형이 뜨는 문제. */
.windnorth {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  color: #f3d38a;
  font-size: 8px;
  font-weight: 700;
  line-height: 12px;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
  pointer-events: none;
}

/* 6-3 좌측 두 칩(≤1040px 전용, #64로 하나의 menubtn에서 분리) — 시각 칩(timechip, 토글)과
   Lv 칩(menubtn, 메뉴 열기) 둘 다 독립 .cap.menubtnrow 버튼. 가시성은 부모 .mobilecaps가
   뷰포트로 가른다(1041px+에선 부모가 숨어 항상 안 보인다 — 개별 display 규칙 불필요).
   기본 button.cap:hover(위)가 그대로 적용되고, aria-pressed가 있는 실제 토글 버튼이라
   포커스 링도 기본값을 켜 둔다(전엔 2행을 감싼 직사각형 컨테이너라 꺼 뒀었다). */
.timechip,
.menubtn {
  -webkit-tap-highlight-color: transparent; /* iOS 탭 하이라이트 — pill 칩과 안 맞음 */
}
.menubtnrow {
  /* 고정 폭(2026-08-27 후속) — 시간 숫자 폭이 매 분 바뀌며 칩이 흔들리는 것을 막는다.
     "00:00" 태블릿 숫자 + 해/달 아이콘 + 좌우 패딩 10px, "초여름" 세 글자(#64)도
     이 폭 안에 들어간다. */
  width: 80px;
  padding: 0 10px;
  justify-content: center;
}
.menubtntime {
  font-variant-numeric: tabular-nums;
}
.menupanel {
  left: 12px;
}
.menurow {
  display: grid;
  grid-template-columns: 56px 1fr;
  align-items: center;
  gap: 8px;
  width: 100%;
  box-sizing: border-box;
  min-height: 28px;
  padding: 6px 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  text-align: left;
}
.menurow:not(:first-child) {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.menurow[hidden] {
  display: none;
}
.menulabel {
  color: var(--ink-dim);
  font-size: 11px;
}
.menuvalue {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--ink);
}
button.menurow {
  cursor: pointer;
}
button.menurow:hover {
  background: rgba(255, 255, 255, 0.06);
}
.menuxpbar {
  width: 60px;
  flex: none;
}

/* ── 1040px 이하 — 좌측 칩 그룹이 2행 메뉴 버튼으로 접힌다 ──
   좌측 칩 실측 합(바람 배지 52 + 환경 ~200 + 활력 ~170 + 할 일 힌트)이 450~550px이라
   툴바 274px와 공존하려면 760~900px이 필요하다. 안전하게 1040px에서 접는다.
   접힌 좌측은 2행(시각/레벨) — 6-3의 단일 Lv 칩보다 정보 손실이 적다. */
@media (max-width: 1040px) {
  .topbar {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    grid-template-areas: "caps tools";
    column-gap: 8px;
    align-items: start;
  }

  /* 좌측 캡슐 그룹(바람 배지·환경·활력·정체 힌트)은 메뉴 버튼으로 접힌다 */
  .capgroup {
    display: none;
  }

  /* 소리 켬/끔 툴바 아이콘(2026-09-03)은 360px 폰에서 좌측 칩과 겹친다 — 좁은 화면은
     메뉴 팝오버의 「소리」 행으로 대신한다(display:none이라 접힌 툴바의 실측 폭은 그대로). */
  .toolbar .soundbtn {
    display: none;
  }

  .mobilecaps {
    grid-area: caps;
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: max-content;
  }

  .toolbar {
    grid-area: tools;
    justify-self: end;
  }

  /* 메뉴 팝오버는 우측 툴바와 같은 너비로 그 바로 아래에 뜬다(우측 정렬) —
     좌측 2행 칩·툴바 어느 쪽과도 겹치지 않는다. 폭은 JS가 --toolbar-w로 넘긴다. */
  .menupanel {
    left: auto;
    right: 12px;
    width: var(--toolbar-w, 300px);
  }

  /* 좌측이 2행(~90px)이므로 토스트는 상단바 아래 줄로 내린다(터치 기기 64px 규칙 대체) */
  .toast {
    top: 100px;
  }

  #app.has-app-update .toast {
    top: 154px;
  }

  .shared-view-banner {
    top: 100px;
  }

  .shared-readonly .toast {
    top: 150px;
  }
}

/* ── 560px 이하 — 진짜 좁은 폭 보정만 담는다(접힘 자체는 위 1040px 블록) ── */
@media (max-width: 560px) {
  .toast {
    width: calc(100vw - 24px);
    justify-content: space-between;
  }

  .toast-action {
    flex: none;
  }
  /* 한 줄 배치에 26px이 모자라 모바일에서만 뺀다. 아이콘 사이 12px
     간격(터치 히트 영역 44px이 겹치지 않는 최소값)은 그대로 두는 쪽을 택했다. */
  .tooldiv {
    display: none;
  }

  /* 우측 패널은 full-width 대신 좌측 2행 칩(12+80px)을 피해 우측 정렬로 살짝 줄인다
     (2026-08-27 후속) — top:56px에서 시작하므로 full-width면 두 번째 행 Lv 칩과 겹친다. */
  .drop.right {
    left: auto;
    width: calc(100vw - 132px);
  }

  .ghost {
    left: 12px;
    right: 12px;
    bottom: 12px;
    width: max-content;
    max-width: calc(100vw - 24px);
  }
}

/* ── 몰입 모드(시네마틱·크리처 시선뷰) — UI 전체 은닉 + 우하단 모드 칩 ── */
/* canvas와 칩만 남긴다. devpanel(document.body 직속)은 개발 도구라 그대로 둔다. */
#app.immersive > *:not(canvas):not(.cinechip):not(.shared-view-banner) {
  display: none !important;
}

.cinechip {
  position: fixed;
  right: 16px;
  bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(20, 28, 24, 0.85);
  color: #eaf6e8;
  padding: 8px 10px 8px 14px;
  border-radius: 999px;
  font-size: 13px;
  z-index: 30;
}

.cinechip-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: inherit;
  cursor: pointer;
  padding: 0;
}

.cinechip-close:hover {
  background: rgba(255, 255, 255, 0.25);
}

/* 종(청록 계열) — 동물 패널의 3단계. 타입(청색)과 구분 */
.tools.teal .tool {
  background: #172a28;
  color: #aec8c4;
}
.tools.teal .tool:hover:not(.active):not(:disabled) {
  background: #24403d;
}
.tools.teal .tool.active {
  background: #2e6b64;
  color: #d9f0ec;
}

.night-activities {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 7;
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
  max-width: calc(100vw - 32px);
  pointer-events: none;
}
.night-activities[hidden] {
  display: none;
}
.night-activity {
  min-height: 44px;
  padding: 10px 16px;
  border: 1px solid rgba(255, 219, 161, 0.36);
  border-radius: 24px;
  background: rgba(31, 35, 49, 0.92);
  color: #ffe0a9;
  cursor: pointer;
  pointer-events: auto;
}
.night-activity:disabled {
  opacity: 0.58;
  cursor: default;
}
.night-activity:focus {
  box-shadow: 0 0 0 3px #ffe0a9;
}

/* ── 중앙 배치 세션 ── */
.placement-hud {
  position: fixed;
  left: 50%;
  top: 50%;
  z-index: 18;
  width: min(404px, calc(100vw - 32px));
  height: min(390px, 78vh);
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #eef5f1;
  font-size: 13px;
  line-height: 1.45;
}
.placement-hud[hidden] {
  display: none;
}
.placement-hud button {
  -webkit-tap-highlight-color: transparent;
}
.placement-hud::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 0;
  width: 100vw;
  height: 100vh;
  transform: translate(-50%, -50%);
  background: rgba(9, 15, 13, 0.22);
  pointer-events: none;
}
.placement-panel {
  position: absolute;
  inset: 0;
  z-index: 1;
  border: 1px solid rgba(226, 240, 234, 0.16);
  border-radius: 22px;
  background: rgba(11, 18, 15, 0.72);
  box-shadow: 0 20px 60px rgba(3, 8, 6, 0.5);
  backdrop-filter: blur(10px);
  -webkit-mask: radial-gradient(
    circle at 50% 50%,
    transparent 0 74px,
    #000 116px
  );
  mask: radial-gradient(circle at 50% 50%, transparent 0 74px, #000 116px);
  pointer-events: none;
}
.placement-reticle {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  width: 176px;
  height: 176px;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.placement-ring {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 148px;
  height: 148px;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(214, 238, 226, 0.42);
  border-radius: 50%;
  animation: placement-ring-pulse 3.2s ease-in-out infinite;
}
@keyframes placement-ring-pulse {
  0%,
  100% {
    opacity: 0.55;
  }
  50% {
    opacity: 1;
  }
}
.placement-tick {
  position: absolute;
  display: block;
  background: rgba(214, 238, 226, 0.5);
}
.placement-tick.top,
.placement-tick.bottom {
  left: 50%;
  width: 1px;
  height: 11px;
  transform: translateX(-50%);
}
.placement-tick.top {
  top: 0;
}
.placement-tick.bottom {
  bottom: 0;
}
.placement-tick.left,
.placement-tick.right {
  top: 50%;
  width: 11px;
  height: 1px;
  transform: translateY(-50%);
}
.placement-tick.left {
  left: 0;
}
.placement-tick.right {
  right: 0;
}
.placement-content {
  position: absolute;
  inset: 0;
  z-index: 3;
  box-sizing: border-box;
  display: grid;
  grid-template-rows: auto auto auto 1fr auto auto;
  align-content: start;
  justify-items: center;
  gap: 9px;
  padding: 13px 14px 15px;
  color: #eef5f1;
  font-size: 13px;
  line-height: 1.45;
  pointer-events: none;
}
.placement-heading {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 22px;
  padding-bottom: 7px;
  border-bottom: 1px solid rgba(226, 240, 234, 0.14);
}
.placement-dialog-title {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-weight: 600;
  letter-spacing: 0.06em;
  opacity: 0.62;
}
.placement-close {
  position: absolute;
  right: 0;
  top: 50%;
  display: grid;
  width: 28px;
  height: 28px;
  margin-top: -4px;
  padding: 0;
  transform: translateY(-50%);
  place-items: center;
  border: 1px solid rgba(226, 240, 234, 0.18);
  border-radius: 999px;
  background: rgba(22, 32, 28, 0.7);
  color: #c2cec9;
  cursor: pointer;
  pointer-events: auto;
}
.placement-close:hover {
  background: rgba(72, 44, 42, 0.92);
  color: #ffd8d3;
}
/* 되돌리기 — close의 좌측 대칭(2026-08-26). 연속 배치 중 직전 배치 취소용. */
.placement-undo {
  right: auto;
  left: 0;
}
.placement-undo:hover {
  background: rgba(40, 56, 48, 0.92);
  color: #d8fff0;
}
/* HUD 타이틀 옆 풀 배지 — 현재 아이템의 정확한 수용량(팝오버 칩과 달리 개별 풀). */
.placement-pool {
  padding: 1px 7px;
  border: 1px solid rgba(226, 240, 234, 0.18);
  border-radius: 999px;
  background: rgba(22, 32, 28, 0.6);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: normal;
  opacity: 0.85;
  font-variant-numeric: tabular-nums;
}
.placement-carousel {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
}
.placement-title {
  padding: 0 4px;
  text-align: center;
  font-weight: 700;
}
.placement-title.locked,
.placement-hud.invalid .placement-title {
  color: #ffd0cc;
}
.placement-lock {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 7px;
  font-size: 13px;
  font-weight: 600;
  opacity: 0.85;
}
.placement-neighbor {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 100%;
  height: 32px;
  border: 1px solid rgba(226, 240, 234, 0.18);
  border-radius: 999px;
  background: rgba(20, 30, 26, 0.55);
  color: #cfded8;
  font-size: 13px;
  font-weight: 600;
  pointer-events: auto;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  opacity: 0.72;
}
.placement-neighbor.previous {
  justify-self: end;
  justify-content: flex-start;
  padding: 0 11px 0 9px;
}
.placement-neighbor.next {
  justify-self: start;
  justify-content: flex-end;
  padding: 0 9px 0 11px;
}
.placement-neighbor span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.placement-neighbor-icon {
  display: flex;
  flex: none;
}
.placement-neighbor:hover {
  background: rgba(47, 68, 61, 0.9);
  color: #fff;
  opacity: 1;
}
.placement-status {
  min-height: 19px;
  text-align: center;
  opacity: 0.72;
}
.placement-hud.invalid .placement-status {
  color: #ffc4bf;
}
.placement-hud.success .placement-status {
  color: #ffe08a;
  font-weight: 700;
}
.placement-hud.success .placement-panel {
  animation: placement-success-panel 300ms ease-out;
}
.placement-hud.success .placement-ring {
  animation: placement-success-ring 300ms ease-out;
}
@keyframes placement-success-panel {
  0% {
    border-color: rgba(145, 255, 196, 0.85);
    box-shadow:
      0 0 0 2px rgba(145, 255, 196, 0.34),
      0 20px 60px rgba(3, 8, 6, 0.5);
  }
  100% {
    border-color: rgba(226, 240, 234, 0.16);
    box-shadow: 0 20px 60px rgba(3, 8, 6, 0.5);
  }
}
@keyframes placement-success-ring {
  0% {
    border-color: rgba(145, 255, 196, 1);
    box-shadow: 0 0 16px rgba(145, 255, 196, 0.72);
  }
  100% {
    border-color: rgba(214, 238, 226, 0.42);
    box-shadow: 0 0 0 rgba(145, 255, 196, 0);
  }
}
.placement-controls {
  display: flex;
  align-items: center;
  gap: 7px;
}
.placement-controls button {
  height: 36px;
  border-radius: 999px;
  font-size: 13px;
  cursor: pointer;
  pointer-events: auto;
  transition:
    transform 0.16s ease,
    background 0.16s ease,
    color 0.16s ease;
}
.placement-rotate {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 13px;
  border: 1px solid rgba(226, 240, 234, 0.22);
  background: rgba(24, 35, 31, 0.8);
  color: #d7e3de;
  font-weight: 600;
}
.placement-rotate:hover {
  background: rgba(47, 68, 61, 0.94);
  color: #fff;
}
.placement-controls .placement-commit {
  padding: 0 26px;
  border: 1px solid rgba(120, 214, 164, 0.32);
  background: rgba(43, 104, 74, 0.94);
  color: #effff5;
  font-weight: 700;
}
.placement-controls .placement-commit:hover:not(:disabled) {
  background: rgba(52, 124, 88, 0.96);
}
.placement-neighbor:active,
.placement-controls button:active:not(:disabled) {
  transform: translateY(1px) scale(0.98);
}
.placement-close:active {
  transform: translateY(calc(-50% + 1px)) scale(0.98);
}
.placement-controls button:disabled {
  cursor: not-allowed;
  opacity: 0.42;
}

/* 라벨 도구 전용 텍스트 입력 — 배치 HUD 안, 카루셀과 여백 사이. */
.placement-text {
  width: 100%;
  box-sizing: border-box;
  min-height: 40px;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(0, 0, 0, 0.35);
  color: #fff;
  font: inherit;
  font-size: 14px;
  outline: none;
  pointer-events: auto;
}
.placement-text:focus {
  border-color: #9ec3ff;
}
.placement-text::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

/* 선택된 라벨의 인라인 편집기 — 오브젝트/크리처 편집기 슬롯의 마지막 자리. */
.labeledit {
  display: none;
  gap: 8px;
  align-items: center;
}
.labeledit-input {
  flex: 1;
  min-width: 0;
  border: 0;
  border-radius: 9px;
  padding: 8px 10px;
  font: inherit;
  font-size: 11.5px;
  background: var(--well);
  color: var(--ink);
  outline: none;
}
.labeledit-input:focus {
  box-shadow: inset 0 0 0 1px var(--control-edge);
}
.labeledit .edit {
  width: auto;
  flex: none;
  margin-top: 0;
}

/* 2026-09-04 — 크리처 상세(읽기 전용): 이름 + 닫기, 종, 성향 3축 막대. */
.detail-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.detail-name {
  font-weight: 600;
  font-size: 13px;
}
.detail-species {
  color: var(--ink-dim);
  font-size: 11.5px;
  margin: 2px 0 8px;
}
.trait {
  display: grid;
  grid-template-columns: 44px 1fr 34px;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  margin: 6px 0;
}
.trait-bar {
  height: 6px;
  border-radius: 3px;
  background: var(--control-idle);
  overflow: hidden;
}
.trait-bar i {
  display: block;
  height: 100%;
  background: var(--accent);
}
.trait-pct {
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--ink-dim);
}

@media (pointer: coarse) {
  .placement-close {
    width: 40px;
    height: 40px;
  }
  .placement-neighbor {
    height: 40px;
  }
  .placement-controls {
    gap: 8px;
  }
}

@media (max-height: 540px) {
  .placement-panel {
    -webkit-mask: radial-gradient(
      circle at 50% 50%,
      transparent 0 60px,
      #000 96px
    );
    mask: radial-gradient(circle at 50% 50%, transparent 0 60px, #000 96px);
  }
  .placement-reticle {
    width: 144px;
    height: 144px;
  }
  .placement-ring {
    width: 120px;
    height: 120px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .world-transfer-pairing-status.busy::before {
    animation: none;
  }
  .placement-ring {
    animation: none;
  }
  .placement-hud.success .placement-panel,
  .placement-hud.success .placement-ring {
    animation: none;
  }
}

.world-lifecycle-notice {
  padding: 10px;
  font-size: 12px;
  line-height: 1.5;
  white-space: normal;
}
.world-lifecycle-notice p {
  margin: 0 0 8px;
}

/* ── 첫 방문 시작 안내(#62) — docs/plans/2026-09-25-first-visit-guide-design.md.
   데스크톱은 가운데 고정 카드(최대 760×620), 560px 이하는 가장자리 12px만 남기고 화면을
   채운다. 본문만 세로 스크롤하고 아래 가장자리를 흐려 더 있음을 알린다(모바일 규칙은
   맨 아래 @media에 이어 둔다). ── */
/* 안내 카드 안 상자들은 width:100%에 안쪽 여백을 더해도 카드를 넘지 않게 한다(좁은 화면 3장 잘림). */
.guide-scrim *,
.guide-scrim *::before,
.guide-scrim *::after {
  box-sizing: border-box;
}
.guide-section > div,
.guide-step > div {
  min-width: 0;
}
.guide-scrim {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  padding: max(24px, env(safe-area-inset-top))
    max(24px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom))
    max(24px, env(safe-area-inset-left));
  background: rgba(10, 16, 24, 0.6);
  backdrop-filter: blur(3px);
}
.guide-scrim[hidden] {
  display: none;
}
.guide-card {
  position: relative;
  display: flex;
  overflow: hidden;
  flex-direction: column;
  box-sizing: border-box;
  width: min(760px, 100%);
  height: min(620px, 100%);
  padding: 28px 32px 22px;
  border: var(--edge);
  border-radius: 24px;
  background: color-mix(in srgb, var(--surface) 96%, #15202b);
  box-shadow: var(--shadow);
  color: var(--ink);
  outline: none;
}
.guide-skip {
  position: absolute;
  top: 14px;
  right: 16px;
  z-index: 1;
  border: 0;
  border-radius: 10px;
  background: none;
  padding: 8px 10px;
  color: var(--ink-dim);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}
.guide-skip:hover {
  background: rgba(255, 255, 255, 0.08);
}
.guide-body {
  display: flex;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
  flex-direction: column;
  gap: 18px;
  padding: 34px 4px 20px;
  overscroll-behavior: contain;
  -webkit-mask-image: linear-gradient(
    to bottom,
    #000 calc(100% - 28px),
    transparent
  );
  mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent);
}
.guide-body > :first-child {
  margin-top: auto;
}
.guide-body > :last-child {
  margin-bottom: auto;
}
.guide-hero {
  display: flex;
  justify-content: center;
}
.guide-hero img {
  width: min(220px, 38vh);
  height: auto;
  border-radius: 22%;
}
.guide-body h2 {
  margin: 0;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-align: center;
}
.guide-lead {
  max-width: 34em;
  margin: 0 auto;
  color: var(--ink);
  opacity: 0.92;
  font-size: 16px;
  text-align: center;
}
.guide-sub {
  max-width: 520px;
  margin: 4px auto 0;
  color: var(--ink-dim);
  font-size: 14px;
  text-align: center;
}
.guide-ctl {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  max-width: 600px;
  width: 100%;
  margin: 0 auto;
}
.guide-ctl-item {
  display: flex;
  align-items: center;
  gap: 10px;
  border-radius: 14px;
  background: var(--well);
  padding: 10px 12px;
  font-size: 14px;
}
.guide-ctl-item-icon {
  display: flex;
  flex: none;
  color: var(--ink-dim);
}
.guide-ctl-item b {
  display: block;
  font-size: 14.5px;
}
.guide-ctl-item span {
  color: var(--ink-dim);
  font-size: 13px;
}
.guide-steps {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 560px;
  width: 100%;
  margin: 0 auto;
}
.guide-step {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  border-radius: 16px;
  background: var(--well);
  padding: 12px 14px;
}
.guide-step-icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--control-idle);
  color: var(--ink);
}
.guide-step b {
  display: block;
  font-size: 15.5px;
}
.guide-step span {
  color: var(--ink-dim);
  font-size: 14px;
}
.guide-chip {
  display: flex;
  width: fit-content;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  border-radius: 999px;
  background: var(--control-idle);
  padding: 3px 10px;
  color: var(--ink);
  font-size: 12.5px;
}
.guide-chip i {
  display: inline-block;
  width: 46px;
  height: 5px;
  border-radius: 3px;
  background: linear-gradient(
    90deg,
    var(--accent) 38%,
    var(--control-edge) 38%
  );
}
.guide-loop {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  color: var(--ink-dim);
  font-size: 12.5px;
}
.guide-loop em {
  border-radius: 999px;
  background: var(--control-idle);
  padding: 3px 10px;
  color: var(--ink);
  font-style: normal;
}
.guide-loop-repeat {
  display: inline-flex;
  color: var(--accent-ink);
}
.guide-section {
  display: flex;
  gap: 14px;
  max-width: 560px;
  width: 100%;
  margin: 0 auto;
  border-radius: 16px;
  background: var(--well);
  padding: 16px 18px;
}
.guide-section-icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--control-idle);
  color: var(--ink);
}
.guide-section b {
  display: block;
  margin-bottom: 2px;
  font-size: 16px;
}
.guide-section p {
  margin: 0;
  color: var(--ink-dim);
  font-size: 14.5px;
}
.guide-install {
  margin-top: 10px;
}
.guide-install-hint {
  margin: 0;
  color: var(--ink);
  font-size: 13.5px;
}
.guide-install-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 0;
  border-radius: 12px;
  background: var(--accent);
  padding: 9px 14px;
  color: var(--accent-ink);
  font: inherit;
  font-size: 14.5px;
  font-weight: 600;
  cursor: pointer;
}
.guide-install-btn:disabled {
  opacity: 0.6;
  cursor: default;
}
.guide-foot {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-top: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
  padding-top: 14px;
}
.guide-dots {
  display: flex;
  gap: 7px;
}
.guide-dots i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--control-edge);
}
.guide-dots i.on {
  width: 20px;
  border-radius: 4px;
  background: var(--ink);
}
.guide-nav {
  display: flex;
  gap: 8px;
}
.guide-ghost,
.guide-primary {
  border: 0;
  border-radius: 12px;
  font: inherit;
  cursor: pointer;
}
.guide-ghost {
  background: var(--control-idle);
  padding: 11px 16px;
  color: var(--ink);
  font-weight: 600;
}
.guide-primary {
  background: var(--accent);
  padding: 11px 20px;
  color: var(--accent-ink);
  font-weight: 700;
}
.guide-replay {
  width: 100%;
  margin-top: 14px;
  border: 0;
  border-radius: 9px;
  background: var(--well);
  padding: 9px;
  color: var(--ink);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background 120ms ease;
}
.guide-replay:hover {
  background: color-mix(in srgb, var(--accent) 35%, var(--well));
}
/* 모바일(≤560px) — 기본 규칙 뒤에 이어 배치(AGENTS.md 관례). */
@media (max-width: 560px) {
  .guide-scrim {
    padding: max(12px, env(safe-area-inset-top))
      max(12px, env(safe-area-inset-right))
      max(12px, env(safe-area-inset-bottom))
      max(12px, env(safe-area-inset-left));
  }
  .guide-card {
    height: 100%;
    padding: 22px 20px 18px;
    border-radius: 22px;
  }
  .guide-body h2 {
    font-size: 23px;
  }
  .guide-lead {
    font-size: 15px;
  }
  .guide-hero img {
    width: min(140px, 22vh);
  }
  .guide-ctl {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .guide-ctl-item {
    padding: 9px 12px;
  }
  .guide-step {
    padding: 10px 12px;
  }
}
.world-visits {
  margin: 16px 0;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}
.world-visits[hidden] {
  display: none;
}
.world-visits-header,
.world-visit-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.world-visits-header h3 {
  margin: 0;
  font-size: 13px;
}
.world-visits-list {
  display: grid;
  gap: 10px;
}
.world-visit-info {
  display: grid;
  gap: 3px;
  min-width: 0;
}
.world-visit-info strong,
.world-visit-info span {
  overflow-wrap: anywhere;
}
.world-visit-info strong {
  font-size: 13px;
}
.world-visit-info span {
  font-size: 11px;
}
.confirm .world-visits button {
  flex: none;
  width: auto;
  min-height: 40px;
  margin: 0;
  padding: 8px 10px;
  white-space: nowrap;
}

/* 배치 전에 색을 선택하고 미리보기에서 바로 확인한다. */
.placement-light-colors {
  position: absolute;
  bottom: calc(100% + 12px);
  left: 0;
  right: 0;
  z-index: 3;
  margin: 0;
  padding: 8px 10px 10px;
  border: 1px solid rgba(226, 240, 234, 0.2);
  border-radius: 16px;
  background: rgba(11, 18, 15, 0.92);
  pointer-events: auto;
}
.placement-light-colors[hidden] {
  display: none;
}
.placement-light-colors legend {
  padding: 0 6px;
  font-size: 12px;
}
.placement-light-options {
  display: flex;
  gap: 6px;
}
.placement-light-options label {
  position: relative;
  flex: 1;
  min-width: 0;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border: 1px solid rgba(226, 240, 234, 0.18);
  border-radius: 10px;
  cursor: pointer;
  font-size: 11px;
}
.placement-light-options label:has(input:checked) {
  border-color: var(--light-color);
  background: color-mix(in srgb, var(--light-color) 18%, transparent);
}
.placement-light-options label:has(input:focus) {
  outline: 2px solid #eef5f1;
  outline-offset: 2px;
}
.placement-light-options label.locked {
  opacity: 0.45;
  cursor: default;
}
.placement-light-options input {
  position: absolute;
  inset: 0;
  opacity: 0;
  margin: 0;
  cursor: inherit;
}
.placement-light-swatch {
  width: 10px;
  height: 10px;
  flex: 0 0 10px;
  border-radius: 50%;
  background: var(--light-color);
}