/* MyArc / Semantic — Figma XoQmTuke6bCTAMq9zkc0wO, Light mode. */
:root {
  --color-canvas: #fafaf7;
  --color-surface: #fff;
  --color-soft: #f2f2ed;
  --color-text: #303630;
  --color-secondary: #677067;
  --color-muted: #6c756c;
  --color-border: #e3e6de;
  --color-hover: #bec8bc;
  --color-accent: #526a53;
  --color-accent-soft: #edf2ea;
  --color-edge: #a5b09f;
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --radius-control: 8px;
  --radius-card: 14px;
  --radius-panel: 16px;
  --border-width: 1px;
  --font-brand: 500 20px/28px 'Noto Sans KR', sans-serif;
  --font-title: 500 14px/21px 'Noto Sans KR', sans-serif;
  --font-body: 400 12px/20px 'Noto Sans KR', sans-serif;
  --font-control: 500 12px/18px 'Noto Sans KR', sans-serif;
  --font-meta: 400 10px/16px 'Noto Sans KR', sans-serif;
  --shadow-card: 0 2px 8px rgb(41 51 38 / 3.5%);
  --shadow-hover: 0 4px 14px rgb(41 51 38 / 5.5%);
  --shadow-panel: 0 12px 40px rgb(41 51 38 / 9%);
  --selection-ring: 0 0 0 3px rgb(82 106 83 / 9%);
  --duration-hover: 180ms;
  --duration-panel: 360ms;
  --ease-calm: cubic-bezier(.2,.7,.2,1);
  --header-height: 60px;
  --muted: var(--color-secondary);
  --blue: var(--color-accent);
  --line: var(--color-border);
}