/* 올공이의 꿈 — 팔레트 토큰 (docs/olgong-art-ui-guide-v1.md §1 정본. 임의 색 추가 금지)
   이 파일 밖에서는 아래 CSS 변수만 참조한다 — 새 색 리터럴을 추가하지 않는다. */
:root {
  /* 잔디 */
  --grass-1: #7fb069;
  --grass-2: #77a862;
  --grass-3: #86b873;
  --grass-dark: #6a9a57;

  /* 길/포장 */
  --path: #e8dcc0;
  --path-border: #d4c5a0;
  --plaza-pave: #d9d2c4;
  --pave-joint: #c9c0ae;

  /* 도로 */
  --road: #b8b2a6;
  --road-lane: #dedad0;

  /* 건물 지붕 */
  --roof-light: #f2f0ea;
  --roof-mid: #dcd9d0;
  --roof-dark: #c2beb2;
  --roof-line: #a9a496;
  --wall: #9b958a;

  /* 나무 */
  --tree-1: #4c7a3d;
  --tree-2: #5f9349;
  --tree-3: #74a85c;
  --trunk: #8a6642;
  --forum-tree-leaf: #8fd47a;

  /* 피부톤 */
  --skin-1: #f2d4b0;
  --skin-2: #e0b48a;
  --skin-3: #c68f5f;
  --skin-4: #9c6b43;

  /* 머리색 */
  --hair-1: #3a3430;
  --hair-2: #8a6642;
  --hair-3: #b5764a;
  --hair-4: #8d8d95;

  /* 모자색 */
  --hat-1: #3a3430;
  --hat-2: #d95d54;
  --hat-3: #4a7fb5;
  --hat-4: #ece5d3;

  /* 상의색 */
  --top-1: #d95d54;
  --top-2: #e0995a;
  --top-3: #d9c05a;
  --top-4: #5a8f68;
  --top-5: #7f9fc6;
  --top-6: #b58ac2;

  /* 고정색 */
  --pants: #4a4436;
  --shoes: #6f5a3f;
  --white: #f2ede2;
  --gold: #e8b04a;
  --suit: #3a4356;

  /* 아웃라인(웜다크 — 순검정 금지) */
  --outline: #3a3228;

  /* 해빙기 */
  --ice-1: #bfe3ff;
  --ice-2: #e8f6ff;
  --ice-3: #9ad1e8;
  --haebinggi-bg: #1e3242;

  /* UI 배경 */
  --ui-chat-bg: #171a21;
  --ui-bar-bg: #20242e;
  --ui-bubble-bg: #242938;
  --ui-bubble-mine: #3d5a80;
  --ui-accent-text: #ffe08a;

  /* 분위기 축(구호↔말) — 진영 의미 부여 절대 금지(절대 규칙 3) */
  --mood-cold: #7f9fc6;
  --mood-warm: #e0995a;

  /* 게이트 표지판(기준서 §2) */
  --gate-blue: #4a7fb5;
  --gate-orange: #b5764a;

  /* 존재 표식(기준서 §3.4) */
  --badge-npc: #8fd47a;
  --badge-verified: #4a7fb5;
  --badge-me: #ffd24a;

  /* 줌 ③ 따뜻한 오버레이(기준서 §5) */
  --zoom3-overlay: rgba(232, 176, 74, 0.16);
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  height: 100%;
  background: var(--ui-chat-bg);
  color: var(--white);
  /* 시스템 폰트 스택만 사용 — 폰트 추가 금지 */
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-size: 15px;
  line-height: 1.5;
}

#app {
  min-height: 100%;
}

.pixel {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

.btn {
  display: inline-block;
  padding: 10px 20px;
  border-radius: 8px;
  border: none;
  background: var(--ui-bubble-mine);
  color: var(--white);
  font-size: 15px;
  cursor: pointer;
}
.btn:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 2px solid var(--ui-accent-text);
  outline-offset: 2px;
}
.btn:disabled {
  opacity: 0.5;
  cursor: default;
}
.btn.secondary {
  background: var(--ui-bar-bg);
}

.toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  background: var(--ui-bar-bg);
  color: var(--white);
  padding: 10px 16px;
  border-radius: 8px;
  font-size: 14px;
  z-index: 1000;
}

.modal-overlay {
  position: fixed;
  inset: 0;
  background: color-mix(in srgb, var(--outline) 72%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1001;
}
.modal-box {
  background: var(--ui-bubble-bg);
  color: var(--white);
  padding: 20px;
  border-radius: 10px;
  max-width: 320px;
  text-align: center;
}

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