@charset "utf-8";

/* ========================================
base
======================================== */
html {
   font-size: 62.5%;
}

/* ========================================
   Design Tokens
   - Figma 기준 frame: 720px (콘텐츠 616px + 좌우 52px)
   - clamp 기준 구간: 244px ~ 768px (범위 밖은 min/max 고정)
   - 1rem = 10px, font-size 절대 하한 12px, .inner gutter 최소 20px
   - font-size: 768px max scale을 244px에서 0.6 비율로 압축해 위계 유지
======================================== */
:root {
    /* =========================
       Layout
       ========================= */
    --inner-max-width: 76.8rem;                                     /* padding 포함 외곽 기준 */
    --inner-padding-x: clamp(2rem, calc(0.5099rem + 6.1069vw), 5.2rem);  /* 52px, 최소 20px */


    /* =========================
       Font Size Tokens
       ========================= */
    --fs-15: clamp(1.2rem, calc(1.0603rem + 0.5725vw), 1.5rem);
    --fs-19: clamp(1.3rem, calc(1.2258rem + 0.8779vw), 1.9rem);
    --fs-20: clamp(1.35rem, calc(1.2672rem + 0.9542vw), 2rem);
    --fs-21: clamp(1.4rem, calc(1.3085rem + 1.0305vw), 2.1rem);
    --fs-22: clamp(1.4rem, calc(1.3499rem + 1.1069vw), 2.2rem);
    --fs-23: clamp(1.45rem, calc(1.3913rem + 1.1832vw), 2.3rem);
    --fs-25: clamp(1.5rem, calc(1.474rem + 1.3359vw), 2.5rem);
    --fs-26: clamp(1.6rem, calc(1.5154rem + 1.4122vw), 2.6rem);
    --fs-27: clamp(1.6rem, calc(1.5568rem + 1.4885vw), 2.7rem);
    --fs-28: clamp(1.7rem, calc(1.5982rem + 1.5649vw), 2.8rem);
    --fs-30: clamp(1.8rem, calc(1.6809rem + 1.7176vw), 3rem);
    --fs-31: clamp(1.8rem, calc(1.7223rem + 1.7939vw), 3.1rem);
    --fs-33: clamp(2rem, calc(1.805rem + 1.9466vw), 3.3rem);
    --fs-35: clamp(2.2rem, calc(1.8878rem + 2.0992vw), 3.5rem);
    --fs-37: clamp(2.3rem, calc(1.9705rem + 2.2519vw), 3.7rem);
    --fs-40: clamp(2.4rem, calc(2.0947rem + 2.4809vw), 4rem);


    /* =========================
       Line Height Tokens (unitless)
       ========================= */
    --lh-base: 1.4 !important;      /* 본문·제목 공통 — Figma 전 텍스트가 round(fs * 1.3) */
    --lh-loose: 1.68;    /* 룰렛 안내문 등 25/42 */
    --lh-button: 1.56;   /* 버튼 라벨 27/42 */


    /* =========================
       Spacing Tokens
       ========================= */
    --space-10: clamp(0.4rem, 1.3021vw, 1rem);
    --space-11: clamp(1rem, 1.4323vw, 1.1rem);
    --space-12: clamp(1rem, 1.5625vw, 1.2rem);
    --space-14: clamp(1rem, 1.8229vw, 1.4rem);
    --space-15: clamp(1.2rem, 1.9531vw, 1.5rem);
    --space-17: clamp(1.2rem, 2.2135vw, 1.7rem);
    --space-19: clamp(1.2rem, 2.474vw, 1.9rem);
    --space-20: clamp(1.2rem, 2.6042vw, 2rem);
    --space-22: clamp(1.4rem, 2.8646vw, 2.2rem);
    --space-23: clamp(1.4rem, 2.9948vw, 2.3rem);
    --space-25: clamp(1.6rem, 3.2552vw, 2.5rem);
    --space-26: clamp(1.8rem, 3.3854vw, 2.6rem);
    --space-27: clamp(2rem, 3.5156vw, 2.7rem);
    --space-33: clamp(2.4rem, 4.2969vw, 3.3rem);
    --space-35: clamp(2.6rem, 4.5573vw, 3.5rem);
    --space-40: clamp(2.8rem, 5.2083vw, 4rem);
    --space-45: clamp(3.2rem, 5.8594vw, 4.5rem);
    --space-50: clamp(3.8rem, 6.5104vw, 5rem);
    --space-60: clamp(4rem, 7.8125vw, 6rem);
    --space-100: clamp(5rem, 10.8125vw, 10rem);
    --space-120: clamp(6rem, 14.8125vw, 12rem);


    /* =========================
       Radius Tokens
       - pill/원형(50px pill, 58px, 60px, 90px, 600px)은 토큰화하지 않고
         컴포넌트에서 50% 로 처리
       ========================= */
    --radius-10: clamp(0.3177rem, 1.3021vw, 1rem);   /* 페이지네이션 버튼 */
    --radius-20: clamp(0.6354rem, 2.6042vw, 2rem);   /* 검색 박스 / 액션 버튼 */
    --radius-29: clamp(0.9214rem, 3.776vw, 2.9rem);  /* 썸네일 */
    --radius-40: clamp(1.2708rem, 5.2083vw, 4rem);   /* 썸네일 박스 / 보관함 카드 */
    --radius-50: clamp(1.5885rem, 6.5104vw, 5rem);   /* 히어로 카드 / 모달 / 바텀시트 */


    /* =========================
       Size Tokens
       ========================= */
    --size-icon: clamp(0.7625rem, 3.125vw, 2.4rem);      /* 24px — 인라인 아이콘 */
    --size-icon-nav: clamp(3.4rem, 7.1615vw, 5.5rem); /* 55px — 하단 탭 아이콘 */
    --size-pin: clamp(1.938rem, 7.9427vw, 6.1rem);       /* 61px — 지도 핀 */
    --size-page-btn: clamp(3rem, 6.3802vw, 4.9rem); /* 49px — 페이지네이션 버튼 */


    /* =========================
       Color Tokens
       ========================= */
    --color-primary: #FF6B6B;
    --color-danger: #EF4444;

    --color-text: #0F172A;
    --color-text-sub: #5E6A7C;
    --color-text-mute: #949CAE;
    --color-text-gray: #AEB6C6;                    /* 하단 탭 비활성 */
    --color-text-on-image: rgba(255, 255, 255, 0.7);

    --color-icon-mute: #94A3B8;                    /* 하트 비활성 */
    --color-icon-disabled: #C5CAD5;

    --color-bg: #FFFFFF;
    --color-bg-gray: #F1F0F5;                      /* 칩 / 썸네일 박스 */
    --color-bg-control: #F1F3F8;                   /* 보조 버튼 / 아이콘 버튼 */
    --color-bg-card: #FBFBFB;                      /* 보관함 카드 */
    --color-glass: rgba(255, 255, 255, 0.3);       /* 검색 박스 / 찜 뱃지 */

    --color-line-gray: #E2E6EE;
    --color-backdrop: rgba(0, 0, 0, 0.3);


    /* =========================
       Gradient Tokens
       ========================= */
    --gradient-fab: linear-gradient(138.02deg, #E86883 2.37%, #955FE2 97.63%);
    --gradient-hero-card: linear-gradient(116.17deg, #102555 40.68%, #FF6B6B 97.21%);
    --gradient-chip-active: linear-gradient(90deg, #E86984 0%, #965FE1 100%);
    --gradient-page-active: linear-gradient(134.23deg, #DE688F 0.65%, #955FE2 99.35%);
    --gradient-action: linear-gradient(90deg, #F0697C 0%, #865DF3 100%);
    --gradient-map-overlay: linear-gradient(180deg, #0A193A 49.04%, rgba(10, 25, 58, 0) 100%);


    /* =========================
       Shadow Tokens
       ========================= */
    --shadow-soft: 0px 14px 42px rgba(20, 20, 43, 0.04);
    --shadow-card: 0px 14px 42px rgba(20, 20, 43, 0.1);
    --shadow-pin: 0px 14px 42px rgba(20, 20, 43, 0.25);
    --shadow-nav: 0px -14px 42px rgba(20, 20, 43, 0.1);
    --shadow-fab: 0px 14px 42px rgba(255, 107, 107, 0.36);
    --shadow-hero: 0px 14px 42px rgba(255, 107, 107, 0.23);
}