/* 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;
  /* 누르는 것(단추 · 탭 · 칩)과 적는 칸은 각지게(10-31 대표님 - SPEC 135장 · 결정 90). --wf-radius-control 은 줄 · 판 같은 담는 것에 남는다.
     폭 = 위계마다 한 폭(가장 긴 이름이 자간 -0.06em 으로 한 줄에 드는 폭), 그보다 긴 이름이 있는 묶음은 eq-width.js 가 --wf-eq-w 로 맞춘다 */
  --wf-radius-action: 2px; --wf-action-track: -0.06em; --wf-action-inline: 12px;
  --wf-tab-w: 100px; --wf-chip-w: 88px; --wf-btn-w: 104px; --wf-btn-row-w: 72px; --wf-btn-cell-w: 52px;
  --wf-duration: 200ms;
}
.sd-admin {
  /* 11-04 대표님(SPEC 162장): 헤더 · 메인 바탕 = canvas(브리핑룸 바탕), 왼쪽 메뉴 바탕 = side-bg. 메뉴 선택 · hover 는 side-bg 위에서 보이는 밝기. 면 · 경계는 브리핑룸 패널 대비(패널 #161f1b · 테두리 #28312d) */
  --wf-side-bg: #1e3932; --wf-nav-selected: #2f5f52; --wf-nav-hover: #2a5448; --wf-side-line: #466456; --wf-side-line-soft: #2c4a3e;
  --color-canvas: #0e1311; --color-surface-soft: #0f1512; --color-surface-card: #161f1b;
  /* soft = 브리핑룸 --canvas-2(#111815)에서 한 단 내림 - 테두리 없는 줄 · 표 머리 · 색 칸이 카드와 갈리는 정도를 옛 판에 맞춤(줄에 선을 두르지 않는다 - 10-23 결정). 바탕 위 soft 는 테두리가 있는 면만 - 개요 레일 숫자 칸은 cockpit.css 가 카드 면으로 올림 */
  --color-surface-raised: #23312b; --color-surface-overlay: #2a3a33;
  --color-hairline: #47544e; --color-hairline-soft: #28312d;
  --wf-shadow-card: 0 0 .5px rgba(0, 0, 0, .55), 0 1px 2px rgba(0, 0, 0, .45);
  --wf-public-stage: #0d1c17; /* 테마 없음 미리보기 무대 = 참가자 기본 Forest 무대(public.css --sd-stage · posterFrame.ts BRAND_STAGE.stage) - 관리자 canvas 와 따로 */
  --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: #0e1311;
  --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; } }