:root {
    /* ===== Neutral ===== */
    --neutral-0: #FFFFFF;
    --neutral-5: #F5F5F5;
    --neutral-10: #E8E8E8;
    --neutral-15: #DCDCDC;
    --neutral-20: #CCCCCC;
    --neutral-30: #B3B3B3;
    --neutral-40: #999999;
    --neutral-50: #808080;
    --neutral-60: #666666;
    --neutral-70: #4D4D4D;
    --neutral-80: #333333;
    --neutral-90: #1A1A1A;
    --neutral-100: #000000;

    /* ===== Mint (Primary) ===== */
    --mint-5: #E6FFF7;
    --mint-10: #B3FFE6;
    --mint-20: #66FFCC;
    --mint-30: #33FFB8;
    --mint-40: #00F0A0;
    --mint-50: #00D4AA;
    --mint-60: #00B38F;
    --mint-70: #009975;
    --mint-80: #007A5E;
    --mint-90: #005C47;

    /* ===== Red ===== */
    --red-50: #FF3B5C;
    --red-70: #CC1A3A;
    --red-90: #8B0020;

    /* ===== Semantic: Primary ===== */
    --primary: #008C67;
    --primary-dark: #007556;
    --primary-bg-light: #E6FFF8;
    --primary-bg-hover: #D6FAF0;

    /* ===== Semantic: Background ===== */
    --bg-page: #F5F7FA;
    --bg-card: #FFFFFF;
    --bg-muted: #F3F5F7;         /* Light gray sections, summary cards, footer rows */

    /* ===== Semantic: Text ===== */
    --text-primary: #1A1A1A;
    --text-secondary: #666666;
    --text-tertiary: #999999;
    --text-placeholder: #B3B3B3;
    --text-muted: #7E8695;       /* Muted labels, sub-headers, tag titles */
    --text-dark: #32363E;        /* Table cell data, slightly off-black */

    /* ===== Semantic: Sidebar ===== */
    --sidebar-bg: #1A1A1A;       /* = neutral-90 */
    --sidebar-text: #E0E2E6;     /* Nav link default text */
    --sidebar-user-name: #DBE1EB;
    --sidebar-btn-bg: #494B4E;
    --sidebar-btn-hover: #5A5C5F;

    /* ===== Semantic: Buttons ===== */
    --btn-dark: #333333;
    --btn-dark-hover: #1A1A1A;
    --btn-outline-border: #CCCCCC;

    /* ===== Semantic: Status / Stats ===== */
    --stat-primary: #35B5A4;     /* Ticket stat values (reserved/total) */
    --stat-cancel: #F04452;      /* Cancelled ticket count */

    /* ===== Semantic: Tab / UI ===== */
    --tab-active-bg: #1C1E22;    /* Active tab background */
    --tab-muted-color: #8D8E90;  /* Inactive tab text */
    --tab-sub-bg: #E0E2E6;       /* Sub-tab default background */

    /* ===== Semantic: Badges ===== */
    --badge-default-bg: #7E8695;

    /* ===== Semantic: Login ===== */
    --login-bg: #080F0D;
    --login-panel-bg: #070E0B;

    /* ===== Semantic: Warning / Info ===== */
    --warning-text: #8B6914;
    --warning-bg: #FFF8E6;
    --warning-border: #FFE08A;
    --info-text: #1A5FAC;
    --info-bg: #EBF5FF;
    --info-border: #B8D9FF;

    /* ===== Shadows ===== */
    --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 6px rgba(0, 0, 0, 0.02);
    --shadow-card-sm: 0 1px 4px rgba(0, 0, 0, 0.08);
    --shadow-modal: 0 8px 40px rgba(0, 0, 0, 0.15);
    --shadow-dropdown: 0 4px 16px rgba(0, 0, 0, 0.12);
    --shadow-profile: 0 0 0 1px var(--neutral-10);

    /* ===== Z-index scale =====
       필터 드롭다운은 본문 영역 내부에서만 사용되므로 사이드바(100)보다 아래에 둔다.
       Bootstrap modal의 기본값(1055)보다 위에 떠야 하는 타임 픽커는 1060. */
    --z-topbar: 50;
    --z-filter-dropdown: 90;
    --z-sidebar-overlay: 99;
    --z-sidebar: 100;
    --z-mobile-cta: 100;
    --z-mobile-nav: 1100;
    --z-mobile-dropdown: 1200;
    --z-time-picker: 1060;
    --z-toast: 9999;
    --z-confirm: 10000;
    --z-alert: 10001;

    /* ===== Spacing scale (4px grid) =====
       프로젝트에서 가장 많이 쓰이는 값을 토큰화한다. 비표준 값(6px, 10px)은
       후속 단계에서 점진적으로 8/12로 정규화하므로 토큰을 정의하지 않는다. */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;

    /* ===== Font size =====
       --fs-base(13px)가 어드민의 기본 본문 크기. label/caption은 sm/xs, 헤더는 xl 이상. */
    --fs-xs: 11px;
    --fs-sm: 12px;
    --fs-base: 13px;
    --fs-md: 14px;
    --fs-lg: 15px;
    --fs-xl: 16px;
    --fs-2xl: 18px;
    --fs-3xl: 20px;
    --fs-4xl: 22px;

    /* ===== Border radius ===== */
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 8px;
    --radius-xl: 12px;
    --radius-2xl: 16px;

    /* ===== Breakpoints (documentation only) =====
       CSS @media는 var()를 지원하지 않으므로 토큰 정의는 불가. 미디어 쿼리 작성 시 아래 값을 사용한다.
       - Mobile:  576px
       - Tablet:  768px
       - Desktop: 1024px */
}

* {
    box-sizing: border-box;
}

body {
    font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background-color: var(--bg-page);
    color: var(--text-primary);
    margin: 0;
    padding: 0;
}

/* Utility */
.hidden { display: none; }
.fs-7 { font-size: 13px; }
.text-red { color: var(--red-50) !important; font-weight: 600; }
.text-bold { font-weight: 700; }
.text-green { color: var(--stat-primary) !important; }