/**
 * 빅풋캠핑 — CSS 정본 (토큰 · 베이스 · 타이포 역할)
 *
 * 정본 문서 = bigfoot-design/design-guide/DESIGN_GUIDE.md (이 파일은 그 #1·#3 의 코드판)
 * 근거     = bigfoot-design/빅풋캠핑_pencil.pen 의 **실제 화면 실측**(텍스트 4,227 · 면 7,876 노드 집계, 2026-09-27)
 *            스타일가이드 프레임(3hfIF/kW4GD)은 라벨과 샘플이 서로 어긋나 판정 근거로 쓰지 않았다.
 * 컴포넌트 = bigfoot-components.css
 *
 * 🔑 값 옆 주석은 **사용 제약**이다. 값만 보고 아무 데나 쓰지 않는다.
 */

:root {
    /* ━━ 1. 브랜드 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
    --bf-primary:        #43bb8e;  /* 액션·활성·강조 (원본 156면+121텍스트). ⚠️ 위 흰 글씨 2.51 — #2 대비 계약 참조 */
    --bf-primary-deep:   #36a078;  /* 체크 ON 테두리 전용 */
    --bf-primary-shade:  #199567;  /* 순위 리본 그라디언트 끝 전용 */
    --bf-mint:           #b6f0e1;  /* 내 말풍선 · 스토리톡 배너 면 (텍스트 #000 만 올린다) */
    --bf-accent:         #ff5816;  /* 경고 문구 · 위험 동작(신고하기) 글자 전용. 면으로 쓰지 않는다 */

    /* ━━ 2. 잉크(텍스트) — 원본 본문은 #000 (1,877회). #191919 가 아니다 ━━━━━━━━ */
    --bf-ink:            #000000;  /* 본문·제목 */
    --bf-ink-2:          #5a5a5f;  /* 보조 본문 · 라벨 · 비활성 버튼 글자 (gc_07) */
    --bf-ink-3:          #878a93;  /* 메타(시간·지역·카운트 라벨) (gc_06) */
    --bf-ink-4:          #afb2bb;  /* placeholder · 비활성 · 날짜 (gc_05) — 본문 금지(#2) */
    --bf-ink-chip:       #444444;  /* 필터·지역 칩 글자 전용 (원본 62회) */
    --bf-ink-navy:       #28274f;  /* 약관 「전체동의」 전용 */
    --bf-on-dark:        #ffffff;  /* 사진·딤·primary·다크면 위 글자 */

    /* ━━ 3. 면·선 (gray-cool 만 쓴다. pure gray 계열은 화면 사용 0회라 없다) ━━━━ */
    --bf-surface:        #ffffff;
    --bf-fill:           #f5f5f5;  /* gc_01 — 칩·검색·비활성 버튼·시트(필터)·푸터 면 */
    --bf-fill-2:         #edeff1;  /* gc_02 — 채팅·메모장 바닥, 입력 테두리, 콘텐츠 구분선 */
    --bf-line:           #eaebed;  /* gc_03 — 헤더·바·탭·칩 테두리·버튼바 구분선 */
    --bf-line-2:         #d2d4d9;  /* gc_04 — 체크 OFF · 시트 핸들 · 타임라인 레일 · 표 · 결제셀 */
    --bf-line-list:      #f2f3f7;  /* 중고 목록 행 구분선 전용 */
    --bf-avatar-bg:      #f7f7f7;  /* 스쿼클 아바타 바탕 전용 */
    --bf-img-line:       rgba(0,0,0,.10);  /* 이미지·아바타 안쪽 1px 테두리 (#0000001a) */
    --bf-system-card:    rgba(0,0,0,.05);  /* 채팅 시스템 안내 카드 */

    /* ━━ 4. 오버레이 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
    --bf-dim:            rgba(0,0,0,.60);  /* 시트·팝업 딤 (#00000099) */
    --bf-scrim:          rgba(0,0,0,.40);  /* 사진 위 pill·FAB·카운터·카드 헤드 (#00000066) */
    --bf-scrim-soft:     rgba(0,0,0,.30);  /* 작성자 pill (#0000004d) */
    --bf-scrim-strong:   rgba(0,0,0,.70);  /* 사진 위 참여멤버 버튼 (#000000b2) */
    --bf-header-fade:    linear-gradient(180deg, rgba(0,0,0,.6) 0%, rgba(0,0,0,0) 100%);  /* 사진 위 헤더: 위 진함 → 아래 투명(원본 렌더 기준. 노드 값 방향은 반대로 기록돼 있었다) */

    /* ━━ 5. 도메인 색 (#5 의미론 — 이 색은 그 뜻으로만 쓴다) ━━━━━━━━━━━━━━━━━ */
    --bf-star:           #f9af30;  /* 별점·방장 배지 면 */
    --bf-star-line:      #f99b30;  /* 별점·방장 배지 테두리 */
    --bf-heart:          linear-gradient(180deg, #ea3354 0%, #d20026 100%);  /* 좋아요 ON */
    --bf-cal-sun:        #ff1e61;  /* 달력 일요일·공휴일 (원본 헤더 #ff004c 는 날짜색으로 통일) */
    --bf-cal-sat:        #0012ff;  /* 달력 토요일 */
    --bf-season-peak:    #c5edff;  /* 성수기 점 */
    --bf-season-top:     #ffc5c5;  /* 극성수기 점 */
    --bf-hit:            #ffc9c9;  /* 검색어 일치 하이라이트 면 */
    --bf-noprofile-1:    #d9edf6;  /* 기본 프로필 3색 — 사용자 id 로 결정적으로 고른다 */
    --bf-noprofile-2:    #fee8da;
    --bf-noprofile-3:    #fadde2;

    /* ━━ 6. 외부 브랜드 (그 버튼에서만) ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
    --bf-kakao:          #fdde38;
    --bf-kakao-ink:      #371e20;
    --bf-naver:          #20cc06;
    --bf-apple:          #000000;  /* Sign in with Apple — 애플 가이드가 검정·흰색만 허용 */

    /* ━━ 7. 스케일 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
    --bf-gutter: 24px;             /* 화면 좌우 여백 — 원본 전 화면 공통(콘텐츠 364/412) */
    --bf-card-pad: 20px;           /* 카드 안쪽 여백 */

    /* 라운딩 — 원본 빈도순. 이 목록 밖 값은 쓰지 않는다 */
    --bf-r-thumb: 4px;             /* 목록 썸네일 · 사진 말풍선 */
    --bf-r-img: 6px;               /* 매거진 본문 사진 · 순위 카드 */
    --bf-r-pop: 8px;               /* 센터 팝업 · 스테퍼 박스 · 시스템 카드 버튼 */
    --bf-r: 10px;                  /* 표준 — 카드·버튼·입력·칩(사각)·배너 (원본 448) */
    --bf-r-bubble: 12px;           /* 말풍선 · 시스템 카드 · 카운터 */
    --bf-r-sheet: 24px;            /* 바텀시트 윗모서리 */
    --bf-r-pill: 999px;            /* 높이의 절반인 알약(칩 40·검색 44·pill 28) */

    --bf-shadow-card: 0 4px 14px rgba(0,0,0,.10);  /* 카드·검색폼·주소카드 */
    --bf-shadow-soft: 0 4px 14px rgba(0,0,0,.05);  /* 쿠폰·일정 카드 */
    --bf-shadow-fab:  0 2px 3.5px rgba(0,0,0,.25);

    /* 높이 — 원본 고정값 */
    --bf-h-header: 56px;
    --bf-h-gnb: 60px;
    --bf-h-ctabar: 84px;
    --bf-h-btn: 51px;              /* 풀폭 CTA (padding 13 + 18/1.4) */
    --bf-h-input: 56px;
    --bf-h-chip: 40px;

    --bf-font: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Segoe UI', sans-serif;
    --nskit-font-family: var(--bf-font);   /* 엔진 기본 CSS(nskit-base)도 Pretendard 로 — 안 두면 엔진이 그리는 확인창·토스트만 Spoqa 로 나와 폰트가 두 벌이 된다 */
    --bf-safe-top: env(safe-area-inset-top, 0px);
    --bf-safe-bot: env(safe-area-inset-bottom, 0px);
}

/* ━━ 호환 별칭 — 기존 화면(v1 템플릿 31개)용. 화면 재개발 때 참조를 새 토큰으로 바꾸고 이 블록을 지운다 ━━ */
:root {
    --bf-primary-light: #e7f8f7;   /* 원본 화면 사용 0회 — 신규 사용 금지 */
    --bf-secondary: var(--bf-mint);
    --bf-text-dark: var(--bf-ink);
    --bf-text-medium: var(--bf-ink-3);
    --bf-text-light: var(--bf-ink-4);
    --bf-bg-page: var(--bf-fill);
    --bf-bg-card: var(--bf-surface);
    --bf-border: var(--bf-line);
    --bf-border-light: var(--bf-fill-2);
    --bf-gray-dark: var(--bf-ink-2);
    --bf-chat-bg: var(--bf-fill-2);
    --bf-separator: var(--bf-line);
    --bf-disabled-bg: var(--bf-fill);
    --bf-disabled-text: var(--bf-ink-2);
    --bf-gc-01: #f5f5f5; --bf-gc-02: #edeff1; --bf-gc-03: #eaebed; --bf-gc-04: #d2d4d9;
    --bf-gc-05: #afb2bb; --bf-gc-06: #878a93; --bf-gc-07: #5a5a5f; --bf-gc-08: #000000;
}

/* ━━ 베이스 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
body {
    font-family: var(--bf-font);
    background-color: var(--bf-surface);
    color: var(--bf-ink);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
* { -webkit-tap-highlight-color: transparent; }

/* ━━ 타이포 역할 — 원본 실측 빈도에서 뽑았다(DESIGN_GUIDE #3 표와 1:1) ━━━━━━━━━━━━━
 * 🔑 자간: 원본 85% 가 0. -0.42 는 캠핑장 카드 메타 줄(.bf-t-meta)에만 있다.
 * 🔑 굵기 800 은 배지 숫자(D-day·순위)에만. 제목은 700, 헤더는 600, 버튼은 500.
 */
.bf-t-cover     { font-size: 32px; font-weight: 400; line-height: 1.2; }   /* 매거진 커버 제목(사진 위) */
.bf-t-hero      { font-size: 24px; font-weight: 400; line-height: 1.2; }   /* 매거진 상세 히어로 제목 */
.bf-t-display   { font-size: 24px; font-weight: 700; line-height: 1.4; }   /* 홈 섹션 제목 · 결제 총액 */
.bf-t-header    { font-size: 20px; font-weight: 600; line-height: 1.4; }   /* 상단바 제목 */
.bf-t-name      { font-size: 20px; font-weight: 500; line-height: 1.4; }   /* 카드 이름(캠핑장·상품) */
.bf-t-price     { font-size: 20px; font-weight: 700; line-height: 1.4; font-variant-numeric: tabular-nums; }
.bf-t-title     { font-size: 18px; font-weight: 700; line-height: 1.4; }   /* 섹션 제목 (원본 104회) */
.bf-t-button    { font-size: 18px; font-weight: 500; line-height: 1.4; }   /* 풀폭 CTA (원본 활성·비활성 모두 500) */
.bf-t-subtitle  { font-size: 16px; font-weight: 700; line-height: 1.4; }   /* 시트 제목 · 소제목 */
.bf-t-label     { font-size: 16px; font-weight: 500; line-height: 1.4; }   /* 폼 라벨 · 옵션 행 */
.bf-t-body1     { font-size: 16px; font-weight: 400; line-height: 1.4; }
.bf-t-input     { font-size: 16px; font-weight: 400; line-height: 1.25; }  /* 입력칸 값·placeholder */
.bf-t-body2     { font-size: 14px; font-weight: 400; line-height: 1.4; }   /* 본문 기본 (원본 920회) */
.bf-t-body2-m   { font-size: 14px; font-weight: 500; line-height: 1.4; }   /* 이름·주소·탭 비활성 */
.bf-t-body2-b   { font-size: 14px; font-weight: 700; line-height: 1.4; }   /* 값 강조·탭 활성·링크 */
.bf-t-meta      { font-size: 14px; font-weight: 400; line-height: 1.4; letter-spacing: -0.42px; color: var(--bf-ink-3); }
.bf-t-reading   { font-size: 14px; font-weight: 400; line-height: 1.6; }   /* 약관·정책·공지 본문 */
.bf-t-chip      { font-size: 14px; font-weight: 700; line-height: 1.2; }   /* 세그먼트 칩 */
.bf-t-chat      { font-size: 14px; font-weight: 400; line-height: 1.2; }   /* 말풍선 본문 */
.bf-t-caption   { font-size: 12px; font-weight: 400; line-height: 1.4; }
.bf-t-caption-m { font-size: 12px; font-weight: 500; line-height: 1.4; }
.bf-t-tab       { font-size: 12px; font-weight: 700; line-height: 1.4; }   /* GNB 라벨 */
.bf-t-badge     { font-size: 16px; font-weight: 800; line-height: 1.4; }   /* D-day · 완료 */
.bf-t-rank      { font-size: 18px; font-weight: 800; line-height: 1.4; }   /* 순위 리본 숫자 */
.bf-t-stat      { font-size: 28px; font-weight: 700; line-height: 1.143; font-variant-numeric: tabular-nums; }

/* 숫자 자리는 정렬을 맞춘다 */
.bf-num { font-variant-numeric: tabular-nums; }

/* ━━ 유틸 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.bf-ellipsis   { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bf-ellipsis-2 { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.bf-ellipsis-3 { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.bf-safe-bottom { padding-bottom: var(--bf-safe-bot); }
.bf-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}