/* WhaleFair 1.0. 값의 정본. 규격: docs/design/DESIGN-SYSTEM.md.
   관리자는 이 범위에서만 Nautilus를 조정한다. 행사 색(--sd-*)은 theme.ts 소유. */
:root {
  --wf-space-1: 4px; --wf-space-2: 8px; --wf-space-3: 12px; --wf-space-4: 16px;
  --wf-space-5: 24px; --wf-space-6: 32px; --wf-space-7: 48px; --wf-space-8: 64px;
  --wf-sidebar: 224px; --wf-content: 1440px; --wf-form: 640px;
  --wf-control: 44px; --wf-control-public: 52px;
  --wf-control-line: 20px; --wf-control-pad: 12px; --wf-action-pad: 16px;
  --wf-field-gap: 8px; --wf-form-gap: 24px; --wf-action-gap: 8px;
  --wf-radius-control: 10px; --wf-radius-card: 12px;
  --wf-duration: 200ms;
}
.sd-admin {
  --wf-nav-selected: #244b3e;
  --color-canvas: #0d1c17; --color-surface-soft: #12261f; --color-surface-card: #193229;
  --color-surface-raised: #214237; --color-surface-overlay: #284b3f;
  --color-hairline: #466456; --color-hairline-soft: #2c4a3e;
  --color-ink: #f2f0eb; --color-body: #dedfd5; --color-mute: #b3c6ba; --color-ash: #a1b9aa;
  --color-primary: #00754a; --color-primary-hover: #008553; --color-primary-pressed: #006241;
  --color-primary-text: #b9e6cc; --color-on-primary: #ffffff;
  --color-primary-tint: #1e3932; --color-primary-tint-border: #70ae8e;
  --color-secondary-bg: #214237; --color-secondary-hover: #2b5148;
  --color-focus-outer: #cba258; --color-focus-inner: #0d1c17;
  --wf-brand-gold: #cba258;
  --radius-sm: 10px; --radius-md: 12px; --radius-lg: 24px;
  --text-heading-xl: 700 28px/1.35 var(--font-sans);
  --text-heading-lg: 650 22px/1.4 var(--font-sans);
  --text-heading-md: 650 16px/1.5 var(--font-sans);
  --text-body-md: 400 15px/1.65 var(--font-sans);
  --text-body-sm: 400 14px/1.6 var(--font-sans);
  --text-button-md: 650 14px/1.2 var(--font-sans);
  --text-button-sm: 600 13px/1.2 var(--font-sans);
}
.wf-icon { width: 20px; height: 20px; flex: none; vertical-align: middle; }
.wf-mark { width: 36px; height: 36px; display: inline-grid; place-items: center; flex: none; border-radius: 11px; }
.wf-mark { overflow: hidden; background: #0a3125; }
.wf-mark img { display: block; width: 100%; height: 100%; object-fit: contain; max-width: none; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; } }