@charset "UTF-8";

html,
body {
    position: relative;
    overflow-x: clip;
}

html {
    min-height: 100%;
}

body {
    font-family: var(--font-base);
    font-size: var(--fs-body);
    line-height: var(--lh-tight);
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    text-decoration: none;
    color: inherit;
    word-break: keep-all;
    font-family: inherit;
    font-size: inherit;
}

/* web font — Figma 지정 서체는 두 개다.
   'Do Hyeon'(도현체) = 제목 전용, 'Pretendard' = 본문·라벨.
   도현체는 저장소 안(./fonts/)에 두고 자체 호스팅한다. url()은 이 CSS 파일 기준 상대 경로다. */
@font-face {
    font-family: 'Do Hyeon';
    src: url('../fonts/BMDOHYEON.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Regular.woff2') format('woff2');
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Medium.woff2') format('woff2');
    font-weight: 500;
    font-display: swap;
}
@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-display: swap;
}
@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Bold.woff2') format('woff2');
    font-weight: 700;
    font-display: swap;
}
@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-ExtraBold.woff2') format('woff2');
    font-weight: 800;
    font-display: swap;
}

/* ── 광고 영역은 full-bleed ──
   .inner 의 좌우 gutter를 그대로 두면 좁은 기기에서 표준 배너가 물리적으로 안 들어가
   애드센스가 응답만 하고 광고를 안 준다(unfilled). 광고 slot만 담은 .inner에
   이 클래스를 함께 붙인다(예: <div class="inner inner--ad">). */
.inner.inner--ad {
    padding-inline: 0;
}

.ads_wrap {
    width: 100%;
    display: block;
    text-align: center;
}
.ads_wrap .adsbygoogle {
    width: 100%;
    margin: var(--space-lg) 0;
    display: block;
}

.ads_wrap .adsbygoogle[data-ad-status="unfilled"] {
    display: none !important
}


/* ========================================
   재사용 컴포넌트
   - 2개 이상 페이지에서 반복되는 것만 둔다. 한 페이지 전용은 css/{page}.css로.
======================================== */

/* ── 페이지 인트로 블록 (뒤로가기 헤더 아래, 작은 안내문 + 큰 제목) ──
   food_detail / sauce_intro / sauce_recipe / pref_intro / pref_step / saved_sauces 공용.
   스켈레톤의 title_only 헤더는 "제목(큼) → 보조문(작음)" 순서만 표현할 수 있어,
   Figma의 "안내문(작음) → 제목(큼)" 순서는 페이지 컨텐츠로 직접 그린다. */
.page-intro {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.page-intro__eyebrow {
    font-size: var(--fs-body);
    font-weight: var(--fw-medium);
    line-height: var(--lh-snug);
    color: var(--color-text-sub);
}

.page-intro__title {
    font-family: var(--font-display);
    font-size: var(--fs-page-title);
    font-weight: var(--fw-regular);
    line-height: var(--lh-snug);
    color: var(--color-text);
    margin-top: 0.6rem;
}

/* ── 섹션 제목 (Figma: 도현체 20px) ── */
.section-title {
    font-family: var(--font-display);
    font-size: var(--fs-title);
    font-weight: var(--fw-regular);
    line-height: var(--lh-snug);
    color: var(--color-text);
}

/* ── 코랄 CTA 카드 (부제목 + 제목 + 원형 화살표) ──
   Figma의 주 진입 카드. .btn-primary와 달리 두 줄 카피를 담는다. */
.cta-card {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    width: 100%;
    min-height: 8.1rem;
    padding: var(--space-lg);
    border-radius: var(--radius-lg);
    background: var(--color-primary);
}

.cta-card__body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.cta-card__eyebrow {
    font-size: var(--fs-body);
    font-weight: var(--fw-medium);
    line-height: var(--lh-body);
    color: var(--color-text-invert);
}

.cta-card__title {
    font-family: var(--font-display);
    font-size: var(--fs-title);
    font-weight: var(--fw-regular);
    line-height: var(--lh-snug);
    color: var(--color-text-invert);
}

.cta-card__icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    border-radius: var(--radius-pill);
    background: var(--color-text-invert);
    color: var(--color-primary);
}

.cta-card__icon svg {
    width: 45%;
    height: 45%;
}

/* ── 주 CTA 버튼 ── */
.btn-primary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    width: 100%;
    padding: var(--space-xl) var(--space-lg);
    border: 0;
    border-radius: var(--radius-md);
    background: var(--color-primary);
    box-shadow: var(--shadow-primary);
    font-family: var(--font-display);
    font-size: var(--fs-label);
    font-weight: var(--fw-regular);
    line-height: var(--lh-tight);
    text-align: center;
    color: var(--color-text-invert);
    cursor: pointer;
}

.btn-primary:disabled,
.btn-primary.is-disabled {
    background: var(--color-bg-disabled);
    box-shadow: none;
    color: var(--color-text-disabled);
    cursor: default;
    pointer-events: none;
}

/* ── 하단 고정 CTA 바 ──
   흐름 끝 주 액션 버튼(레시피 보기/다음으로/홈으로 등)을 화면 하단에 고정한다.
   .site-header의 sticky+blur 처리를 아래쪽으로 그대로 미러링한 것 — 배경·블러가
   같아야 스크롤되는 콘텐츠가 위/아래 어느 쪽에서 나타나도 같은 방식으로 읽힌다.
   높이 계산은 css/layout.css의 --cta-bar-height(#wrap padding-bottom 예약)와
   반드시 같은 식이어야 한다 — padding을 여기서만 고치지 말 것. */
.cta-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 90;
    /* border-top: var(--size-hairline) solid var(--color-line); */
    background: linear-gradient(0deg, rgba(255, 248, 237, 1) 95%, transparent);
    padding-top: var(--space-2xl);
    padding-bottom: max(var(--space-lg), var(--safe-bottom));
}

/* Figma의 인라인 아이콘 기본 크기는 24px다 (chevron·네비·화살표 공통). */
.icon-arrow {
    flex: 0 0 auto;
    width: var(--size-icon-md);
    height: var(--size-icon-md);
}

.icon-chevron {
    flex: 0 0 auto;
    width: var(--size-icon-md);
    height: var(--size-icon-md);
    color: var(--color-icon-sub);
}

/* ── 칩 (맛·재료·페어링 태그) — Figma tag: radius 8, 회색 채움, 14px SemiBold ── */
.chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-4) var(--space-xs);
    border-radius: var(--radius-sm);
    background: var(--color-bg-chip);
    font-size: var(--fs-body);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-body);
    color: var(--color-text);
    white-space: nowrap;
}

/* 매운맛 단계 칩 — 배경은 다른 칩과 같고 앞에 24px 아이콘만 붙는다(Figma). */
.chip--spicy {}

/* 24x24 이미지 자리 — ./img/icon-spicy-{1,2,3}.png */
.chip__icon {
    flex: 0 0 auto;
    width: var(--size-icon-md);
    height: var(--size-icon-md);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

.chip__icon--spicy-1 { background-image: url('../img/icon-spicy-1.png'); }
.chip__icon--spicy-2 { background-image: url('../img/icon-spicy-2.png'); }
.chip__icon--spicy-3 { background-image: url('../img/icon-spicy-3.png'); }

/* 음식 종류 배지 (마라탕/훠궈/두끼) — Figma tag: radius 8, 색 채움 + 흰 12px SemiBold */
.food-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-4) var(--space-xs);
    border-radius: var(--radius-sm);
    font-size: var(--fs-caption);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-body);
    color: var(--color-text-invert);
    white-space: nowrap;
}

.food-badge--malatang { background: var(--color-tag-ink); }
.food-badge--hotpot { background: var(--color-tag-coral); }
.food-badge--dookki { background: var(--color-tag-yellow); }

/* ── 소스 카드 (목록에 반복되는 기본 단위) ──
   Figma 카드 내부는 세 행이고 행마다 padding이 다르다.
     제목 행 16/16/0 → 설명 행 8/16 → 태그 행 8/16/16
   chevron은 카드 레벨에서 세로 중앙에 둔다. */
.sauce-card {
    display: flex;
    align-items: center;
    width: 100%;
    border-radius: var(--radius-lg);
    background: var(--color-bg-card);
    text-align: left;
}

.sauce-card__body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.sauce-card__head {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-lg) var(--space-lg) 0;
}

.sauce-card__title {
    font-family: var(--font-display);
    font-size: var(--fs-title);
    font-weight: var(--fw-regular);
    line-height: var(--lh-snug);
    color: var(--color-text);
}

/* 배지는 마크업상 제목보다 앞에 있지만 시안에서는 제목 오른쪽에 붙는다. */
.sauce-card__head .food-badge {
    order: 1;
}

.sauce-card__desc {
    font-size: var(--fs-caption);
    font-weight: var(--fw-medium);
    line-height: var(--lh-body);
    color: var(--color-text-sub);
}

.sauce-card__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-xs);
}

/* 카드 안에서만 행 padding을 준다 — sauce_intro/sauce_recipe는 이 블록들을
   카드 밖에서 단독으로 쓰기 때문에 .sauce-card__body 하위로 한정한다. */
.sauce-card__body > .sauce-card__desc {
    padding: var(--space-xs) var(--space-lg);
}

.sauce-card__body > .sauce-card__meta {
    padding: var(--space-xs) var(--space-lg) var(--space-lg);
}

.sauce-card__chevron {
    flex: 0 0 auto;
    width: var(--size-icon-md);
    height: var(--size-icon-md);
    margin-right: var(--space-lg);
    color: var(--color-icon-sub);
}

.sauce-card-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    list-style: none;
}

/* ── 빈 상태 (Figma: 80px 아이콘 + 40px 간격 + 도현체 20px 문구) ── */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3xl);
    padding: var(--space-3xl) 0;
    text-align: center;
}

/* JS가 토글하는 hidden 속성은 컴포넌트의 display 선언보다 우선해야 한다. */
[hidden] {
    display: none !important;
}

/* 80x80 이미지 자리 — ./img/icon-empty-sauce.png */
.empty-state__icon {
    width: 8rem;
    height: 8rem;
    background-image: url('../img/icon-empty-sauce.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

.empty-state__title {
    font-family: var(--font-display);
    font-size: var(--fs-title);
    font-weight: var(--fw-regular);
    line-height: var(--lh-snug);
    color: var(--color-text);
}

.empty-text {
    padding: var(--space-3xl) 0;
    font-size: var(--fs-body);
    font-weight: var(--fw-medium);
    line-height: var(--lh-body);
    text-align: center;
    color: var(--color-text-sub);
}