:root {
    --sc-brand: #0e7c66; /* 로고 표시(기준색 그대로). 글자색으로는 쓰지 않는다 → --sc-primary */

    --aw-font-sans: -apple-system, 'Apple SD Gothic Neo', 'Segoe UI', 'Malgun Gothic', '맑은 고딕', sans-serif;
    --aw-font-serif: var(--aw-font-sans);
    --aw-font-heading: var(--aw-font-sans);

    --aw-color-primary: var(--sc-primary);
    --aw-color-secondary: var(--sc-primary);
    --aw-color-accent: var(--sc-primary);

    --aw-color-text-heading: var(--sc-on-surface);
    --aw-color-text-default: var(--sc-on-surface);
    --aw-color-text-muted: var(--sc-on-surface-variant);
    --aw-color-bg-page: var(--sc-surface);
    --aw-color-bg-page-dark: var(--sc-surface);

    /* 방침 페이지(.sc-doc)가 쓰는 이름 → 역할로 연결 */
    --sc-bg-soft: var(--sc-surface-container-low);
    --sc-border: var(--sc-outline-variant);
    --sc-accent-soft: var(--sc-secondary-container);
    --sc-accent-soft-border: var(--sc-secondary-container); /* 색 테두리 + 같은 색 바탕 금지(COLOR-GUIDE 1-6) → 테두리를 면과 같게 */
    --sc-code-bg: var(--sc-surface-container);
    --sc-primary: #016b57;
    --sc-on-primary: #ffffff;
    --sc-primary-container: #c2ebde;
    --sc-on-primary-container: #015141;
    --sc-secondary-container: #d8ede6;
    --sc-on-secondary-container: #394a45;
    --sc-tertiary: #0f6876;
    --sc-tertiary-container: #c7eff8;
    --sc-on-tertiary-container: #014e5a;
    --sc-surface: #ffffff;
    --sc-card-top: #ffffff;
    --sc-card: #f5fcfb;
    --sc-surface-container-low: #eef5f4;
    --sc-surface-container: #e8efee;
    --sc-surface-container-high: #e3eae9;
    --sc-on-surface: #171c1c;
    --sc-on-surface-variant: #3d4948;
    --sc-outline: #6d7a78;
    --sc-outline-variant: #d7e5e4;
    --sc-band-tools: #dff6ee;
    --sc-band-blog: #dcf2f8;
    --sc-footer: #dae8e9;
    --sc-hero1: #0399ae45;
    --sc-hero2: #03957a45;
    --sc-hero3: #0399ae45;
    --sc-dot: #cbe2da;
    --sc-warn-container: #ffeedc;
    --sc-on-warn-container: #623f03;
    --sc-warn-outline: #bb8e51;
    --sc-shadow: #0b1211;

    --sc-card-shadow:
      inset 0 1px 0 rgb(255 255 255 / 95%),
      inset 0 -1px 0 color-mix(in srgb, var(--sc-shadow) 4%, transparent),
      0 0 0 1px var(--sc-outline-variant),
      0 1px 2px color-mix(in srgb, var(--sc-shadow) 7%, transparent),
      0 3px 6px -1px color-mix(in srgb, var(--sc-shadow) 6%, transparent),
      0 12px 24px -8px color-mix(in srgb, var(--sc-shadow) 12%, transparent),
      0 28px 48px -24px color-mix(in srgb, var(--sc-shadow) 16%, transparent);
    --sc-card-shadow-hover:
      inset 0 1px 0 rgb(255 255 255 / 100%),
      inset 0 -1px 0 color-mix(in srgb, var(--sc-shadow) 4%, transparent),
      0 0 0 1px var(--sc-outline-variant),
      0 2px 4px color-mix(in srgb, var(--sc-shadow) 8%, transparent),
      0 6px 12px -2px color-mix(in srgb, var(--sc-shadow) 8%, transparent),
      0 20px 36px -10px color-mix(in srgb, var(--sc-shadow) 16%, transparent),
      0 40px 64px -28px color-mix(in srgb, var(--sc-shadow) 22%, transparent);
  }
  .dark {
    --sc-primary: #79d8be;
    --sc-on-primary: #01382c;
    --sc-primary-container: #294d43;
    --sc-on-primary-container: #95f4da;
    --sc-secondary-container: #283833;
    --sc-on-secondary-container: #d3e7e0;
    --sc-tertiary: #89d2e1;
    --sc-tertiary-container: #173e46;
    --sc-on-tertiary-container: #a5eefe;
    --sc-surface: #0b1623;
    --sc-card-top: #222d3a;
    --sc-card: #1a2431;
    --sc-surface-container-low: #111b28;
    --sc-surface-container: #16202d;
    --sc-surface-container-high: #293341;
    --sc-on-surface: #d8e3f5;
    --sc-on-surface-variant: #bec7d5;
    --sc-outline: #89919e;
    --sc-outline-variant: #323a45;
    --sc-band-tools: #091f1e;
    --sc-band-blog: #0a212c;
    --sc-footer: #06101b;
    --sc-hero1: #01839547;
    --sc-hero2: #01876e47;
    --sc-hero3: #01839547;
    --sc-dot: #162b2b;
    --sc-warn-container: #442b01;
    --sc-on-warn-container: #ffddb7;
    --sc-warn-outline: #835b21;
    --sc-shadow: #000000;

    --sc-card-shadow:
      inset 0 1px 0 rgb(255 255 255 / 9%),
      0 0 0 1px var(--sc-outline-variant),
      0 1px 2px color-mix(in srgb, var(--sc-shadow) 45%, transparent),
      0 6px 12px -4px color-mix(in srgb, var(--sc-shadow) 40%, transparent),
      0 18px 36px -12px color-mix(in srgb, var(--sc-shadow) 55%, transparent);
    --sc-card-shadow-hover:
      inset 0 1px 0 rgb(255 255 255 / 13%),
      0 0 0 1px var(--sc-outline-variant),
      0 2px 4px color-mix(in srgb, var(--sc-shadow) 50%, transparent),
      0 10px 18px -4px color-mix(in srgb, var(--sc-shadow) 45%, transparent),
      0 28px 48px -14px color-mix(in srgb, var(--sc-shadow) 65%, transparent);
  }