:root {
  color-scheme: light;
  --navy-950: #101b26;
  --navy-850: #1c2b38;
  --navy-alpha: rgb(16 27 38 / 18%);
  --ink-900: #1f2a33;
  --ink-600: #596873;
  --neutral-050: #f5f3ee;
  --neutral-100: #e9e7e1;
  --neutral-150: #dfddd7;
  --neutral-200: #d4d2cc;
  --neutral-350: #aeb5b8;
  --neutral-alpha: rgb(174 181 184 / 34%);
  --surface-000: #ffffff;
  --surface-alpha: rgb(255 255 255 / 88%);
  --wood-200: #d1ab7d;
  --wood-400: #a87342;
  --wood-650: #6c482d;
  --glass-150: #c5e0e3;
  --glass-500: #56868d;
  --company-accent-600: #086a6e;
  --company-accent-100: #dceff0;
  --local-accent-500: #a84837;
  --local-accent-100: #f9e4de;
  --presence-available: #0f774f;
  --presence-focused: #3468a8;
  --presence-away: #9b6a16;
  --presence-offline: #6f7880;
  --status-error-700: #a13232;
  --status-error-100: #f8dfdf;
  --status-warning-100: #fff2d2;
  --focus-ring: #0a5fa8;
  --avatar-skin-light: #f4d4bd;
  --avatar-skin-warm: #ddb18f;
  --avatar-skin-medium: #b98262;
  --avatar-skin-deep: #80543f;
  --avatar-hair-black: #26313a;
  --avatar-hair-brown: #6c482d;
  --avatar-hair-auburn: #8f4d3d;
  --avatar-hair-silver: #aeb5b8;
  --avatar-outfit-navy: #2f5069;
  --avatar-outfit-teal: #2f8584;
  --avatar-outfit-coral: #c56755;
  --avatar-outfit-sand: #d1ab7d;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --target-min: 44px;
  --control-tall: 52px;
  --hud-block: 64px;
  --dialogue-overlay-max: 32rem;
  --avatar-size: 36px;
  --avatar-tall: 52px;
  --person-min-inline: 92px;
  --person-max-inline: 148px;
  --person-narrow-inline: 82px;
  --line-thin: 1px;
  --line-world: 2px;
  --line-focus: 3px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-round: 999px;
  --shadow-hard: 0 3px 0 rgb(31 42 51 / 24%);
  --shadow-panel: 0 12px 32px rgb(16 27 38 / 16%);
  --type-12: 0.75rem;
  --type-14: 0.875rem;
  --type-16: 1rem;
  --type-20: 1.25rem;
  --type-24: 1.5rem;
  --leading-tight: 1.3;
  --leading-body: 1.55;
  --motion-press: 120ms;
  --motion-state: 180ms;
  --motion-walk: 220ms;
  --ease-standard: ease-out;
  font-family: "Apple SD Gothic Neo", "Pretendard", "Noto Sans KR", system-ui, sans-serif;
  color: var(--ink-900);
  background: var(--neutral-050);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; min-inline-size: 320px; min-block-size: 100%; }
button, input, textarea, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
svg { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
:focus-visible { outline: var(--line-focus) solid var(--focus-ring); outline-offset: 3px; }
.visually-hidden { position: absolute; inline-size: 1px; block-size: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.icon-sprite { position: absolute; inline-size: 0; block-size: 0; overflow: hidden; }
.skip-link { position: fixed; inset-block-start: var(--space-2); inset-inline-start: var(--space-2); z-index: 100; padding: var(--space-3) var(--space-4); color: var(--surface-000); background: var(--focus-ring); border-radius: var(--radius-sm); opacity: 0; pointer-events: none; transform: translateY(-160%); transition: transform var(--motion-state) var(--ease-standard); }
.skip-link:focus { opacity: 1; pointer-events: auto; transform: translateY(0); }
.overline { margin: 0 0 var(--space-1); color: var(--ink-600); font-size: var(--type-12); font-weight: 700; letter-spacing: .03em; }
kbd { padding: 2px 5px; color: inherit; background: var(--surface-alpha); border: var(--line-thin) solid currentColor; border-radius: var(--radius-sm); font-size: var(--type-12); }