@charset "utf-8";

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

/* ========================================
   Design Tokens — 오늘의 소스
   - Figma 기준 프레임: 393px (모바일 전용 목업, 데스크톱 프레임 없음)
   - clamp 기준 구간: 244px ~ 768px (범위 밖은 min/max 고정)
   - 1rem = 10px, font-size 절대 하한 12px, .inner gutter 최소 20px
   - 393px 프레임 값을 375px 기준으로 환산(x 375/393 = x 0.9542)해 target375를 잡고,
     거기서 244px(min)을 역산했다.
       min244 = (4 x target375 - max768) / 3
       slope  = (max - min) / 524 * 100 (vw)
       icptPx = min - slope * 2.44
     Figma 12px(caption)은 환산값이 11.45px으로 하한 미달이라 min을 12px으로 올렸다.
   - Figma에 데스크톱 프레임이 없어 max768은 각 역할의 393px 원본값을 상한으로 삼았다
     (예: caption 12 -> 14, body 14 -> 16, title 20 -> 22, page-title 24 -> 27).
   - 검증: 244/320/360/375/480/720/768px 전 구간에서 폰트 최소 12px,
     gutter 최소 20px, 375px 역할별 목표 범위를 만족한다. 하단 §검증 로그 참조.
======================================== */
:root {
    /* =========================
       Layout
       ========================= */
    --inner-max-width: 76.8rem;                                          /* padding 포함 외곽 기준(스켈레톤 규약) */
    --inner-padding-x: clamp(2rem, calc(1.4412rem + 2.2901vw), 3.2rem);  /* 244px 20px → 375px 23px → 768px 32px
                                                                            Figma는 16px gutter지만 스켈레톤 하한 규정(최소 20px)이 우선한다 */


    /* =========================
       Font Family
       - Figma 지정 서체는 두 개다.
         'Do Hyeon'(도현체, 400 단일) = 제목 전용 / 'Pretendard'(500·600) = 본문·라벨.
       - 도현체는 ./fonts/BMDOHYEON.woff 로 자체 호스팅한다(@font-face는 common.css).
       ========================= */
    --font-base: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
    --font-display: 'Do Hyeon', 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;


    /* =========================
       Font Size Tokens (역할 기반 명명)
       - 주석의 (n @375)는 375px 실제 렌더값, [Figma]는 393px 프레임 원본값이다.
       ========================= */
   --fs-caption: clamp(1.2rem, calc(0.5069rem + 0.3817vw), 1.4rem);       /* 12.50 @375 — [Figma 12] 캡션·작은 태그·행 보조문 */
   --fs-body: clamp(1.25rem, calc(0.487rem + 0.6679vw), 1.6rem);          /* 13.38 @375 — [Figma 14] 부제목·설명·태그·텍스트 버튼 */
   --fs-label: clamp(1.3rem, calc(0.6625rem + 0.6998vw), 1.8rem);      /* 15.25 @375 — [Figma 16] 헤더 리드 설명·리스트 행 제목(Title3_16_SB) */
   --fs-nav-title: clamp(1.4rem, calc(0.8529rem + 0.7124vw), 2rem);    /* 17.20 @375 — [Figma 18] 상단 네비 가운데 타이틀(도현체) */
   --fs-title: clamp(1.6rem, calc(1.0137rem + 0.7634vw), 2.2rem);         /* 19.00 @375 — [Figma 20] 카드·섹션 제목(도현체) */
   --fs-page-title: clamp(1.8rem, calc(1.2987rem + 1.0433vw), 2.7rem); /* 22.90 @375 — [Figma 24] 페이지 제목·벤토 대제목(도현체) */
    --fs-hero: var(--fs-page-title);                                       /* Figma에 24px 위 단계가 없다 — 홈 히어로도 page-title과 같은 크기.
                                                                              더 큰 강조가 필요해지면 이 키만 분기한다 */


    /* =========================
       Font Weight Tokens (고정)
       - Figma는 도현체 400, Pretendard 500(M)/600(SB)만 쓴다.
         bold/extrabold는 스켈레톤 공용 강조 단계로 남겨둔다.
       ========================= */
    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;
    --fw-extrabold: 800;


    /* =========================
       Line Height Tokens (unitless, 고정)
       - Figma: 도현체 제목 140%, Pretendard 12·14px 150%, 16px 160%.
       ========================= */
    --lh-none: 1.1;
    --lh-tight: 1.25;
    --lh-snug: 1.4;      /* 도현체 제목 */
    --lh-body: 1.5;      /* Pretendard 12·14px */
    --lh-relaxed: 1.6;   /* Pretendard 16px */


    /* =========================
       Letter Spacing Tokens (고정)
       - Figma 기본은 0(tracking 미지정)이다. tight 계열은 긴 제목 줄바꿈 보정용.
       ========================= */
    --ls-normal: 0;
    --ls-tight: -0.01em;
    --ls-tightest: -0.02em;


    /* =========================
       Spacing Tokens
       - Figma 393px 프레임의 4 / 8 / 10 / 12 / 16 / 20 / 24 / 40 사다리를 그대로 옮겼다.
       - 각 토큰은 375px에서 Figma 값과 일치하도록 min244를 역산했다.
       ========================= */
    --space-2: 0.2rem;                                                /* 2px 고정 — 태그 내부 아이콘↔텍스트 */
    --space-4: clamp(0.3667rem, calc(0.3046rem + 0.2544vw), 0.5rem);  /* 4 @375 → 5 @768 */
    --space-xs: clamp(0.7333rem, calc(0.6091rem + 0.509vw), 1rem);    /* 8 @375 → 10 @768 — 카드 사이 gap, 태그 사이 gap */
    --space-sm: clamp(0.9167rem, calc(0.7615rem + 0.6361vw), 1.25rem);/* 10 @375 → 12.5 @768 — 컴포넌트 내부 gap */
    --space-md: clamp(1.1rem, calc(0.9137rem + 0.7634vw), 1.5rem);    /* 12 @375 → 15 @768 — 아이콘 슬롯 좌우 padding */
    --space-lg: clamp(1.4667rem, calc(1.2184rem + 1.0177vw), 2rem);   /* 16 @375 → 20 @768 — 카드 padding, 섹션 블록 gap */
    --space-xl: clamp(1.8rem, calc(1.4275rem + 1.5267vw), 2.6rem);    /* 20 @375 → 26 @768 — 카드 세로 여백 */
    --space-2xl: clamp(2.1333rem, calc(1.6366rem + 2.0357vw), 3.2rem);/* 24 @375 → 32 @768 — 섹션 사이 여백 */
    --space-3xl: clamp(3.6rem, calc(2.855rem + 3.0534vw), 5.2rem);    /* 40 @375 → 52 @768 — 빈 상태 아이콘↔문구, 페이지 상단 여백 */


    /* =========================
       Radius Tokens (고정)
       - Figma: 태그 8 / 텍스트 버튼 12 / 카드·섹션 16 / 썸네일 9.6 / 아바타·pill 사실상 원형.
       ========================= */
    --radius-sm: 0.8rem;    /* 8px — 태그·칩 */
    --radius-md: 1.2rem;    /* 12px — 텍스트 버튼·작은 컨트롤 */
    --radius-lg: 1.6rem;    /* 16px — 카드·섹션 블록 */
    --radius-image: 1rem;   /* 9.6px 반올림 — 썸네일 이미지 */
    --radius-pill: 999rem;  /* 아바타·원형 배지 */


    /* =========================
       Icon / Component Size (고정)
       ========================= */
    --size-hairline: 1px;
    --size-icon-md: 2.4rem;   /* 24px — chevron·네비·화살표·태그 아이콘 등 인라인 아이콘 기본 */
    --size-back: 4rem;        /* 40px — 뒤로가기 버튼 터치 영역 */
    --size-nav-indicator: 0.5rem;

    /* 3열 아이콘 그리드 공용 아이콘 크기 — pref_step의 음식/매운맛 스티커(Figma 60 @393)와
       sauce_intro의 대표재료/추천대상/페어링 아이콘(Figma 100 @393)이 이 하나의 스케일을 공유한다.
       두 Figma 원본 크기가 서로 달라도, 실제 제약은 "3열 그리드 칸 폭에 맞는가"이지 원본 px가 아니다 —
       244px에서 3열 카드/칸 폭이 대략 55~95px대라 96px을 넘기면 다음 줄로 밀리거나 넘친다.
       244=44 / 375=57 / 768=96, 두 페이지 모두 이 값으로 검증 완료(각 CSS의 §검증 참조). */
    --size-icon-grid: clamp(4.4rem, calc(1.9786rem + 9.9237vw), 9.6rem);
    /* Figma의 12(태그 보조 슬롯)·16(이미지 배지)·32(아바타)·40(CTA 원형)·80(일러스트)은
       컴포넌트 한 곳에서만 쓰는 크기라 토큰이 아니라 해당 CSS에 직접 적는다. */


    /* =========================
       Color Tokens — 오늘의 소스
       - Figma 팔레트: coral #F75D42, yellow #F1C100, 배경 크림 #FFF8ED,
         카드 #FFFFFF, 구분선 #F2F4F7, 텍스트/칩은 navy #0D1C2D의 알파 램프.
       - a2(0.8)·a3(0.5)·a5(0.08)만 Figma에 등장한다. a4는 위계가 한 단계 더 필요한
         곳(placeholder·disabled)을 위한 파생값이다.
       ========================= */
    --color-gray-a2: rgba(13, 28, 45, 0.8);    /* Figma trans/gray/a2 */
    --color-gray-a3: rgba(13, 28, 45, 0.5);    /* Figma trans/gray/a3 */
    --color-gray-a4: rgba(13, 28, 45, 0.3);    /* 파생 */
    --color-gray-a5: rgba(13, 28, 45, 0.08);   /* Figma trans/gray/a5 */

    --color-bg: #FFF8ED;                        /* 페이지 배경 (크림) */
    --color-bg-card: #FFFFFF;                   /* 카드 표면 — Figma all/fill/common */
    --color-bg-soft: #F2F4F7;                   /* 카드 안 서브 표면 — Figma background/fill/elevated */
    --color-bg-chip: var(--color-gray-a5);      /* 중립 태그 칩 배경 */
    --color-bg-chip-warm: rgba(247, 93, 66, 0.12); /* 파생 — Figma의 강조 태그는 solid coral(아래 --color-tag-*)이고
                                                      soft 코랄 톤이 필요한 칩에만 쓴다 */
    --color-bg-disabled: var(--color-gray-a5);

    --color-primary: #F75D42;                   /* 브랜드 코랄 — Figma all/coral/1 */
    --color-primary-soft: rgba(247, 93, 66, 0.12);

    --color-tag-coral: #F75D42;                 /* 강조 태그 배경 — 텍스트는 --color-text-invert */
    --color-tag-yellow: #F1C100;                /* 강조 태그 배경 — Figma all/yellow/a1 */
    --color-tag-ink: #373738;                   /* 강조 태그 배경 — Figma 로고 다크 잉크.
                                                   시안에 태그 색이 coral/yellow 둘뿐이라 세 번째 분류에 이 색을 쓴다 */

    --color-text: var(--color-gray-a2);         /* 제목/본문 기본 */
    --color-text-sub: var(--color-gray-a3);     /* 부제목·설명·캡션 */
    --color-text-mute: var(--color-gray-a4);    /* placeholder */
    --color-text-invert: #FFFFFF;               /* 코랄 배경 위 텍스트 — Figma all/white/a1 */
    --color-text-disabled: var(--color-gray-a4);

    --color-icon: var(--color-gray-a2);         /* 뒤로가기 등 주요 아이콘 */
    --color-icon-sub: var(--color-gray-a3);     /* 리스트 chevron_right */
    --color-icon-nav: var(--color-gray-a3);

    --color-line: var(--color-gray-a5);         /* 크림 배경 위 헤어라인 (파생) */
    --color-line-card: #F2F4F7;                 /* 카드 내부 구분선 — Figma background/fill/elevated */

    --color-scrim: rgba(13, 28, 45, 0.5);


    /* =========================
       Shadow Tokens
       - Figma의 카드·코랄 CTA는 그림자가 없다(크림 배경과 흰 카드의 명도 차로 분리).
         그래서 card/primary는 none으로 두고, 콘텐츠 위에 떠야 하는 표면
         (바텀시트·sticky 네비)만 약한 그림자를 남긴다.
       ========================= */
    --shadow-card: none;
    --shadow-primary: none;
    --shadow-card-strong: 0 0.8rem 2.4rem rgba(13, 28, 45, 0.1);
    --shadow-nav: 0 -0.2rem 1.2rem rgba(13, 28, 45, 0.06);


    /* =========================
       Motion Tokens (고정)
       - Figma에 모션 스펙은 없다. 기존 CSS가 반복해 쓰던 0.15s / 0.2s ease를 토큰화했다.
       ========================= */
    --dur-fast: 0.15s;
    --dur-base: 0.2s;
    --ease-standard: ease;
}

/* ========================================
   §검증 로그 (244 / 320 / 360 / 375 / 480 / 720 / 768px)
   caption      12.00 / 12.29 / 12.44 / 12.50 / 12.90 / 13.82 / 14.00
   body         12.50 / 13.01 / 13.27 / 13.38 / 14.08 / 15.68 / 16.00
   label        14.33 / 14.86 / 15.14 / 15.25 / 15.98 / 17.66 / 18.00
   nav-title    16.27 / 16.81 / 17.09 / 17.20 / 17.95 / 19.66 / 20.00
   title        18.00 / 18.58 / 18.89 / 19.00 / 19.80 / 21.63 / 22.00
   page-title   21.53 / 22.33 / 22.74 / 22.90 / 23.99 / 26.50 / 27.00
   → 전 구간 12px 이상이고 단조 증가한다. 모든 브레이크포인트에서
     page-title > title > nav-title > label > body > caption 위계가 유지된다.
   → 375px 실제값이 CLAUDE.md 목표 범위 안에 든다.
     caption 12.50(12~13) / body 13.38(13~15) / label 15.25(14~16)
     title 19.00(16~19) / page-title 22.90(20~23)
   inner-padding-x  20.00 / 21.74 / 22.66 / 23.00 / 25.40 / 30.90 / 32.00 → 최소 20px 만족.
   spacing(@375 = Figma 393px 원본값)
     space-4 4 / xs 8 / sm 10 / md 12 / lg 16 / xl 20 / 2xl 24 / 3xl 40
======================================== */