@charset "utf-8";
/* ==========================================================
   tokens.css — IEUM Design Tokens (CSS 변수)
   ==========================================================
   모든 CSS 파일에서 공통으로 참조하는 디자인 토큰(색상, 폰트, 간격 등)을
   :root 에 정의합니다. head.jsp 에서 가장 먼저 로드되어야 합니다.
   ---
   NOTE: 기존 component.css의 :root 블록에서 이관된 값 + 추가 토큰
   ========================================================== */

:root {
    /* =====================================================
       1. Typography (폰트)
       ===================================================== */
    --head-font: "Aggro";                                      /* 제목용 폰트 (서체명 유지) */
    --body-font: "Pretendard";                                 /* 본문용 폰트 */


    /* =====================================================
       2. Main Colors (메인 컬러)
       ===================================================== */
    --main1: #000000;       /* 메인1 - 블랙 */
    --main2: #00B2ff;       /* 메인2 - 블루 */
    --main3: #EEF485;       /* 메인3 - 라임 */


    /* =====================================================
       3. Sub Colors (서브 포인트 컬러)
       ===================================================== */
    --sub1: #fc4586;        /* 핑크 (포인트·알림·하이라이트) */
    --sub2: #0082ff;        /* 블루 (보조 분류) */
    --sub3: #222222;        /* 다크 (컨트롤 버튼 배경) */
    --sub4: #442410;        /* 브라운 (챌린지·액센트) */


    /* =====================================================
       4. Primary / Secondary (UI 상태 컬러)
       ===================================================== */
    --primary1: #442c93;    /* UI 포커스·선택 상태 (체크박스, 라디오 등) */
    --primary2: #5943a0;    /* 보조 UI 액센트 (댓글 버튼 등) */


    /* =====================================================
       5. Light Background Colors (연한 배경)
       ===================================================== */
    --light1: #f2f3f5;      /* 연회색 (TNB 배경 등) */
    --light2: #ffe3ed;      /* 연핑크 (메인 비주얼, 상단 박스) */
    --light3: #cce6ff;      /* 연블루 (카테고리 배지 배경) */
    --light4: #f9fbfd;      /* 연회색 블루 */
    --light-sky: #e9f8ff;   /* 연하늘 (순번 리스트 배경) */


    /* =====================================================
       6. Semantic / Feedback Colors
       ===================================================== */
    --red1: #e74c3c;        /* 필수 입력 표시·에러 */
    --blue: #1976D2;        /* 정보 강조 (리스트 번호 테두리) */


    /* =====================================================
       7. Gray Scale (그레이 팔레트)
       ===================================================== */
    --gray-33:  #333333;
    --gray-44:  #444444;
    --gray-55:  #555555;
    --gray-66:  #666666;
    --gray-75:  #757575;
    --gray-99:  #999999;
    --gray-b5:  #b5b5b5;
    --gray-cc:  #cccccc;
    --gray-dd:  #dddddd;
    --gray-e5:  #e5e5e5;
    --gray-e9:  #e9e9e9;
    --gray-f467: #f4f6f7;   /* 폼·카드 배경 (연회색) */
    --gray-f5:  #f5f5f5;
    --gray-f6:  #f6f6f6;
    --gray-f7:  #f7f7f7;
    --gray-f9:  #f9f9f9;
    --gray-fa:  #fafafa;
    --gray-fc:  #fcfcfc;


    /* =====================================================
       8. Spacing Scale (간격)
       ===================================================== */
    --space-xs:   4px;
    --space-sm:   8px;
    --space-md:   16px;
    --space-lg:   24px;
    --space-xl:   32px;
    --space-2xl:  48px;
    --space-3xl:  64px;
    --space-4xl:  80px;
    --space-5xl:  100px;


    /* =====================================================
       9. Layout (레이아웃)
       ===================================================== */
    --max-width:        1440px;  /* 컨텐츠 최대 너비 */
    --max-width-wide:   1500px;  /* 와이드 컨텐츠 */
    --header-height-pc: 85px;    /* PC 헤더 높이 */
    --header-height-mo: 70px;    /* 모바일 헤더 높이 */


    /* =====================================================
       10. Border Radius (둥글기)
       ===================================================== */
    --radius-sm:  4px;
    --radius-md:  8px;
    --radius-lg:  12px;
    --radius-xl:  16px;
    --radius-2xl: 24px;
    --radius-full: 50px;    /* Pill-shape 버튼 */
    --radius-circle: 100%;  /* 완전 원형 */


    /* =====================================================
       11. Shadows (그림자)
       ===================================================== */
    --shadow-sm:   0 2px 4px rgba(0, 0, 0, 0.05);
    --shadow-md:   0 4px 12px rgba(0, 0, 0, 0.1);
    --shadow-lg:   0 10px 20px rgba(0, 0, 0, 0.1);
    --shadow-xl:   0 20px 40px rgba(0, 0, 0, 0.08);
    --shadow-purple: 0 10px 20px rgba(68, 44, 147, 0.2);


    /* =====================================================
       12. Transitions (전환 효과)
       ===================================================== */
    --transition-fast:   0.2s ease;
    --transition-normal: 0.3s ease;
    --transition-slow:   0.5s ease;
    --transition-spring: 0.3s cubic-bezier(0.4, 0, 0.2, 1);


    /* =====================================================
       13. Z-Index Scale (레이어 순서)
       ===================================================== */
    --z-dropdown:  10;
    --z-sticky:    20;
    --z-overlay:   30;
    --z-modal:     50;
    --z-gnb:       1000;
    --z-submenu:   1001;
    --z-mobile-menu: 9999;
}