@charset "utf-8";
/* tokens.css - 아이탐라 Design Tokens v1.0
   PC 퍼블리싱 전반에서 사용하는 공통 디자인 토큰을 정의한다.
   - 변수명은 lowercase kebab-case를 사용한다.
   - 페이지 CSS에서 HEX / font-size / spacing 등을 하드코딩하지 않고 본 토큰을 참조한다.
   - 토큰에 없는 값이 여러 화면에서 반복될 경우 임의로 추가하지 말고 토큰 추가 후보로 보고한다. */

:root {
  /* ==================================================
     01. Brand
     브랜드 정체성과 주요 인터랙션에 사용

     [사용 원칙]
     - brand-primary     : 로고 / Brand Identity / Active GNB / 브랜드 강조.
                           일반 Primary Button에 무조건 사용하지 않는다.
     - brand-secondary   : Primary Button / 일반 링크 / 주요 선택 상태.
     - brand-interaction : Hover / Focus 등 강한 Interactive State.
                           평상시 화면 전체에 과도하게 사용하지 않는다.
  ================================================== */
  --brand-primary: #0B2A63;       /* 로고, 브랜드 핵심 컬러 */
  --brand-secondary: #1246A3;     /* Primary 버튼, 링크, 주요 선택 상태 */
  --brand-interaction: #084BE7;   /* Hover, Focus 등 강한 인터랙션 */
  --brand-bg-light: #F3F7FD;      /* 브랜드 강조용 연한 배경 */

  --mono-900: #111827;            /* 강한 모노톤이 필요한 경우 제한적으로 사용 */


  /* ==================================================
     02. Text
     기본 텍스트 계층

     [사용 원칙]
     아이탐라 자체 UI에서는 #000 / #222 / #333 / #555 / #666 등
     임의 Black·Gray를 생성하지 않고 아래 토큰을 사용한다.
  ================================================== */
  --text-primary: #172033;        /* 제목 및 기본 본문 핵심 텍스트 */
  --text-secondary: #4B5565;      /* 일반 설명 텍스트 */
  --text-tertiary: #7B8494;       /* 보조정보, 메타데이터 */
  --text-disabled: #A5ADBA;       /* 비활성 텍스트 */
  --text-inverse: #FFFFFF;        /* 어두운 배경 위 텍스트 */
  --text-link: #1246A3;           /* 일반 링크 */


  /* ==================================================
     03. Background / Surface
     페이지와 컴포넌트 배경 계층
  ================================================== */
  --bg-page: #FFFFFF;             /* 기본 페이지 배경 */
  --bg-subtle: #F7F9FC;           /* 섹션 구분용 연한 배경 */
  --bg-muted: #F3F5F8;            /* 비활성, 테이블 헤더 등 */
  --bg-brand-light: #F3F7FD;      /* 브랜드 계열 강조 배경 */

  --surface-default: #FFFFFF;     /* 기본 카드/Surface */
  --surface-hover: #F8FAFD;       /* Hover Surface */
  --surface-selected: #EEF4FF;    /* 선택 상태 Surface */


  /* ==================================================
     04. Border
     테두리 강도 및 Focus 상태
  ================================================== */
  --border-light: #EEF1F5;        /* 약한 구분선 */
  --border-default: #E2E7EE;      /* 기본 Border */
  --border-strong: #CBD3DE;       /* 강조 Border */
  --border-focus: #084BE7;        /* Input/Control Focus */


  /* ==================================================
     05. Semantic Color
     성공, 경고, 오류, 정보 표현
  ================================================== */
  --success: #22A06B;
  --success-bg: #ECF8F2;

  --warning: #E89A17;
  --warning-bg: #FFF7E8;

  --error: #E5484D;
  --error-bg: #FFF0F0;

  --info: #3B73E8;
  --info-bg: #EEF4FF;


  /* ==================================================
     06. Status
     관리화면의 게시/승인/완료 상태 표현
  ================================================== */
  --status-active: #22A06B;
  --status-active-bg: #ECF8F2;

  --status-pending: #E89A17;
  --status-pending-bg: #FFF7E8;

  --status-danger: #E5484D;
  --status-danger-bg: #FFF0F0;

  --status-neutral: #7B8494;
  --status-neutral-bg: #F3F5F8;


  /* ==================================================
     07. Ranking
     실시간 순위 변화 상태
  ================================================== */
  --rank-hot: #FF4D4F;
  --rank-up: #22A06B;
  --rank-down: #3B73E8;
  --rank-stay: #A5ADBA;


  /* ==================================================
     08. Font Family
  ================================================== */
  --font-family-base:
    "Pretendard",
    "Noto Sans KR",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;


  /* ==================================================
     09. Font Size
     기본 Typography Scale
  ================================================== */
  --font-size-xs: 12px;
  --font-size-sm: 13px;
  --font-size-md: 14px;
  --font-size-base: 16px;
  --font-size-lg: 18px;
  --font-size-xl: 20px;
  --font-size-2xl: 24px;
  --font-size-3xl: 28px;
  --font-size-4xl: 32px;
  --font-size-5xl: 40px;


  /* ==================================================
     10. Font Weight
  ================================================== */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;


  /* ==================================================
     11. Line Height
  ================================================== */
  --line-height-tight: 1.3;
  --line-height-snug: 1.4;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.7;


  /* ==================================================
     12. Semantic Typography
     페이지 역할별 기본 Typography
  ================================================== */

  --text-display-size: var(--font-size-5xl);
  --text-display-weight: var(--font-weight-bold);
  --text-display-line-height: var(--line-height-tight);

  --text-page-title-size: var(--font-size-4xl);
  --text-page-title-weight: var(--font-weight-bold);
  --text-page-title-line-height: var(--line-height-tight);

  --text-detail-title-size: var(--font-size-3xl);
  --text-detail-title-weight: var(--font-weight-bold);
  --text-detail-title-line-height: var(--line-height-snug);

  --text-section-title-size: var(--font-size-2xl);
  --text-section-title-weight: var(--font-weight-semibold);
  --text-section-title-line-height: var(--line-height-snug);

  --text-subsection-title-size: var(--font-size-xl);
  --text-subsection-title-weight: var(--font-weight-semibold);
  --text-subsection-title-line-height: var(--line-height-snug);

  --text-card-title-size: var(--font-size-lg);
  --text-card-title-weight: var(--font-weight-semibold);
  --text-card-title-line-height: var(--line-height-snug);

  --text-body-size: var(--font-size-base);
  --text-body-weight: var(--font-weight-regular);
  --text-body-line-height: var(--line-height-normal);

  --text-body-sm-size: var(--font-size-md);
  --text-body-sm-weight: var(--font-weight-regular);
  --text-body-sm-line-height: var(--line-height-normal);

  --text-label-size: var(--font-size-md);
  --text-label-weight: var(--font-weight-medium);
  --text-label-line-height: var(--line-height-normal);

  --text-caption-size: var(--font-size-sm);
  --text-caption-weight: var(--font-weight-regular);
  --text-caption-line-height: var(--line-height-normal);

  --text-overline-size: var(--font-size-xs);
  --text-overline-weight: var(--font-weight-medium);
  --text-overline-line-height: var(--line-height-normal);

  --text-price-lg-size: var(--font-size-4xl);
  --text-price-lg-weight: var(--font-weight-bold);
  --text-price-lg-line-height: var(--line-height-tight);

  --text-price-size: var(--font-size-xl);
  --text-price-weight: var(--font-weight-bold);
  --text-price-line-height: var(--line-height-tight);

  --text-kpi-size: var(--font-size-3xl);
  --text-kpi-weight: var(--font-weight-bold);
  --text-kpi-line-height: var(--line-height-tight);


  /* ==================================================
     13. Spacing
     4px 기반 공통 간격 Scale
  ================================================== */
  --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;
  --space-16: 64px;
  --space-20: 80px;


  /* ==================================================
     14. Radius
     컴포넌트 크기에 따른 Radius Scale
  ================================================== */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-pill: 9999px;


  /* ==================================================
     15. Shadow
     일반 Card보다는 Floating UI 중심으로 사용

     [사용 원칙]
     일반 Card는 Border + 여백 중심으로 디자인하고,
     Shadow는 Dropdown / Sticky Sidebar / Floating UI / Modal 등
     실제로 떠 있는 요소에 사용한다.
     모든 Card에 Shadow를 기본 적용하지 않는다.
  ================================================== */
  --shadow-sm: 0 1px 3px rgba(17, 32, 51, 0.06);
  --shadow-md: 0 4px 16px rgba(17, 32, 51, 0.08);
  --shadow-lg: 0 10px 30px rgba(17, 32, 51, 0.12);


  /* ==================================================
     16. Layout
     아이탐라 PC 레이아웃 기본 기준

     [Service Frame 기준]
     Main Content(1400px) + Content/Wing Gap(40px) + Wing(240px) = Service Frame(1680px)

     service-frame-width는 고정 width가 아니라 PC 환경의 최대 기준값이며,
     Wing 노출 여부 및 Breakpoint는 docs/ui-policy.md 를 따른다.
     Sidebar(Filter/Navigation/Management)와 Wing(Advertisement)은 서로 다른 개념이다.
  ================================================== */
  --service-frame-width: 1680px; /* Main Content + Wing 전체 최대 폭 */
  --content-width: 1400px;       /* 실제 메인 콘텐츠 최대 폭 */
  --wing-width: 240px;           /* 우측 Wing 광고 영역 */
  --content-wing-gap: 40px;      /* Main Content와 Wing 사이 간격 */

  --container-padding: 24px;      /* 작은 Viewport에서 좌우 최소 여백 */

  --header-height: 90px;          /* PC 공통 Header 높이 */
  --sidebar-width: 280px;         /* 필터/관리 Sidebar 초기 기준 */


  /* ==================================================
     17. Motion
     인터랙션 기본 속도
  ================================================== */
  --transition-fast: 120ms ease;
  --transition-base: 200ms ease;
  --transition-slow: 300ms ease;


  /* ==================================================
     18. Z-index
     레이어 우선순위
  ================================================== */
  --z-header: 100;
  --z-sticky: 200;
  --z-dropdown: 500;
  --z-modal: 1000;
  --z-toast: 1100;
}