@charset "UTF-8";

:root {
   /* 화면 기준: 360px ~ 1280px */

    /* =========================
       폰트 시스템(fs)
    ========================= */
    --font-family-base: "Pretendard ", -apple-system, BlinkMacSystemFont,
                         "Apple SD Gothic Neo", "Segoe UI", Roboto,
                         "Noto Sans KR", "Malgun Gothic", Arial, sans-serif;
 
    /* Hero */
    --fs-hero-title: clamp(2.5rem, 1.5rem + 4.35vw, 5rem);  /* 40px ~ 80px */
    --fs-hero-sub:   clamp(1.13rem, 1rem + 0.56vw, 1.5rem); /* 18px ~ 24px */

    /* Headings */
    --fs-h1: clamp(1.75rem, 1.33rem + 1.85vw, 3rem);     /* 28px ~ 48px */
    --fs-h2: clamp(1.5rem, 1.25rem + 1.11vw, 2.25rem);   /* 24px ~ 36px */
    --fs-h3: clamp(1.25rem, 1.08rem + 0.74vw, 1.75rem);  /* 20px ~ 28px */

    /* 본문 및 요소 */
    --fs-p:    clamp(1rem, 0.96rem + 0.19vw, 1.13rem);   /* 16px ~ 18px */
    --fs-span: 1rem;
    --fs-a:    1rem;
    --fs-table: 0.94rem;                                 /* 약 15px */
    --fs-note:  0.88rem;                                 /* 약 14px */
    --fs-card-desc: clamp(0.9rem, 0.87rem + 0.15vw, 1rem); /* 카드 전용 목록 */
    
    /* Interaction/CTA */
    --fs-btn: clamp(1rem, 0.9rem + 0.43vw, 1.25rem);    /* 16px ~ 20px */


    /* Line-height */
    --lh-title: 1.1; /* 제목용 (좁게) */
    --lh-body: 1.6;    /* 본문용 (넓게) */

    /* Font-weight */
    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;


    /* =========================
       컬러 시스템
    ========================= */
    --color-primary: #007AFF;
    --color-primary-hover: #0063d6;

    --color-light-base: #ffffff;     
    --color-light-sub: #f5f5f7;      
    --color-light-muted: #e8e8e8;    

    --color-dark-base: #111111;   /* 본문/타이틀 */
    --color-dark-sub: #444444; /* 설명 텍스트 */
    --color-dark-muted: #6e6e73;     /* 보조 정보 */
    

    /* Border / Divider */
    --color-border-light: rgba(255, 255, 255, 0.2);
    --color-border-light-strong: rgba(255, 255, 255, 0.4);
    --color-border-dark: rgba(0, 0, 0, 0.2);
    --color-border-dark-strong: rgba(0, 0, 0, 0.4);

    /* Icon / UI */
    --color-icon-muted: rgba(0, 0, 0, 0.45);


    /* Status Colors : Direction, Badge, State */

    --color-direction-up: #2e7d32;        /* 상행 */
    --color-direction-down: #c62828;      /* 하행 */
    --color-direction-normal: var(--color-light-muted); /* 기본 */

    --color-badge-text-default: var(--color-dark-base);
    --color-badge-text-on-fill: var(--color-light-base);

    --badge-bg: var(--color-direction-normal);
    --badge-text: var(--color-badge-text-default);


    /* =========================
       Glass / Overlay
    ========================= */
    --glass-bg: rgba(255, 255, 255, 0.06);
    --glass-bg-strong: rgba(255, 255, 255, 0.12);
    --glass-border: rgba(255, 255, 255, 0.18);

    --bg-overlay-subtle: rgba(0, 0, 0, 0.3);
    --bg-overlay-strong: rgba(0, 0, 0, 0.6);

    
    /* =========================
       Layout / Spacing / gap
    ========================= */
    --container-max-width: 1280px; /* 화면 최대 너비 */

    /* 본문 패딩 */    
    --pd-body-content: clamp(1rem, 4.44vw, 4rem);           /* 기본 섹션 패딩 */
    --pd-body-compact: clamp(2rem, 5.93vw + 0.67rem, 5rem); /* 로그인, 배너, 푸터 패딩 */

    /* 그리드 및 카드 */
    --grid-gap-1col: clamp(18px, 2.4vw, 36px); /* 1열 - 읽기 리듬 고려 */
    --grid-gap-2col: clamp(24px, 4vw, 60px); /* 2열 - 여유있게 */
    --grid-gap-3col: clamp(18px, 2.2vw, 32px); /* 3열 — 밀도 균형 */
    --grid-gap-4col: clamp(14px, 1.6vw, 24px); /* 4열 — 텍스트 폭 보호 */
    --pd-card-inner: clamp(16px, 0.75rem + 1.2vw, 28px); /* 텍스트 가독성 확보 */

    --ls-body : -0.05em; /* 본문 letter spacing */

    --space-2xs: 4px;
    --space-xs: 8px;
    --space-sm: 12px;
    --space-md: 20px;
    --space-lg: 32px;
    --space-xl: 48px;
    --space-2xl: 72px;


    /* =========================
       Radius / Shadow
    ========================= */
    --radius-xs: 4px;
    --radius-sm: 8px;
    --radius-md: 16px;
    --radius-lg: 24px;
    --radius-pill: 999px;

    --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.25);
    --shadow-md: 0 12px 30px rgba(0, 0, 0, 0.35);
    --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.45);


    /* =========================
       Motion
    ========================= */
    --ease-out: cubic-bezier(0.17, 0.67, 0.83, 0.67);
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

    --duration-fast: 0.2s;
    --duration-base: 0.4s;
    --duration-slow: 0.8s;


    /* =========================
       Z-Index Scale
    ========================= */
    --z-base: 1;
    --z-content: 10;
    --z-header: 100;
    --z-overlay: 1000;
    --z-modal: 2000;


    /* =========================
       Media / Asset Paths
    ========================= */
    --img-path: "../assets/img";
    --vod-path: "../assets/vod";

    /* =========================
       Accordion container
    ========================= */
    --transition-speed: 0.6s;
    --timing-function: cubic-bezier(0.4, 0, 0.2, 1);

    /* =========================
       copyrights / credits
    ========================= */
    --map-credit: '출처 : 네이버지도';
    --map-credit-bg: rgba(0,0,0,.55);
    --map-credit-color: #fff;
    --map-credit-size: 12px;

}