/**
 * 빅풋캠핑 — 원자 컴포넌트 (여러 PART·화면이 공유하는 조각)
 *
 * 정본 = bigfoot-design/design-guide/DESIGN_GUIDE.md #6 · 토큰 = bigfoot-style.css
 * 수치 출처 = design-guide/analysis/*.md (프레임 id 는 각 블록 주석)
 *
 * 규칙
 *  · 색·반경·그림자는 토큰만. 이 파일에 hex 를 새로 쓰지 않는다.
 *  · 데이터를 받는 조합(카드·행·말풍선)은 PART(templates/parts/part-*.html)가 소유한다. 여기는 조각만.
 *  · 아이콘 = /assets/icons/*.svg (디자이너 원본). 없는 역할만 iconify lucide.
 */

/* ━━ 레이아웃 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.bf-gutter { padding-left: var(--bf-gutter); padding-right: var(--bf-gutter); }
.bf-row    { display: flex; align-items: center; }
.bf-icon   { width: 24px; height: 24px; flex: none; display: inline-block; }
.bf-icon--16 { width: 16px; height: 16px; }
.bf-icon--20 { width: 20px; height: 20px; }
.bf-icon--28 { width: 28px; height: 28px; }
.bf-icon--40 { width: 40px; height: 40px; }
/* 초기화 = 클래스 하나(0,1,0). button.bf-reset(0,1,1) 이면 다른 클래스의 padding·margin·color 를 지우고(S5 보고),
 * :where(0) 면 프레임워크 button{padding:10px 20px…}(0,0,1) 에 진다. 파일 맨 앞이라 뒤에 오는 같은 특이도 클래스가 이긴다. */
.bf-reset { background: none; border: 0; padding: 0; margin: 0; font: inherit; color: inherit; cursor: pointer; }

/* 프레임워크(nskit-base.css)가 모든 button 에 hover 들뜸·그림자, disabled opacity .5 를 건다.
 * 원본에 없는 효과라 빅풋 버튼·PART 안 버튼에서는 끈다. 그래서 버튼 테두리는 box-shadow 가 아니라 border 로 그린다. */
button[class*="bf-"]:hover, [part-name] button:hover,
#scene-area button:hover, #gnb-area button:hover, #sub-page-area button:hover, #side-panel-area button:hover, #dialog-area button:hover, #dialog-area-super button:hover, #sub-page-area-super button:hover { transform: none; box-shadow: none; }
/* nskit-base 는 button 에 gap 8·justify-content:center 도 건다 → 버튼을 flex 행/열로 쓰면 둘 다 명시한다 */

/* display 를 가진 클래스가 hidden 속성을 이긴다 → 속성이 항상 이기게 */
[hidden] { display: none !important; }
/* 2px 점 구분자 (체크인·체크아웃 / 사이트명·날짜 / 주변환경 목록) */
.bf-dot-sep { display: inline-block; flex: none; width: 2px; height: 2px; border-radius: 50%; background: currentColor; opacity: .8; }
button[class*="bf-"]:disabled, [part-name] button:disabled,
#scene-area button:disabled, #gnb-area button:disabled, #sub-page-area button:disabled, #side-panel-area button:disabled, #dialog-area button:disabled, #dialog-area-super button:disabled, #sub-page-area-super button:disabled { opacity: 1; cursor: default; transform: none; }

/* ━━ 버튼 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 * 원본: 풀폭 364x51 r10, 18/500 (활성·비활성 모두 500 — 전 카테고리 CTA 30여 개 실측)
 */
.bf-btn {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    width: 100%; height: var(--bf-h-btn); padding: 0 16px;
    border: 0; border-radius: var(--bf-r);
    font-family: inherit; font-size: 18px; font-weight: 500; line-height: 1.4;
    background: var(--bf-primary); color: var(--bf-on-dark);
    cursor: pointer; transition: opacity .15s, transform .1s;
}
.bf-btn:active { transform: scale(.98); }
.bf-btn[disabled], .bf-btn.is-disabled { background: var(--bf-fill); color: var(--bf-ink-2); cursor: default; transform: none; }
.bf-btn--gray   { background: var(--bf-fill); color: var(--bf-ink-2); }            /* 액션시트 수정·삭제 */
.bf-btn--danger { background: var(--bf-fill); color: var(--bf-accent); }           /* 신고하기 */
.bf-btn--sm     { width: auto; flex: none; height: 44px; padding: 0 40px; font-size: 16px; }                    /* 가격바 「예약하기」 */
.bf-btn--pop    { height: 40px; border-radius: var(--bf-r-pop); font-size: 16px; }  /* 센터 팝업 */
.bf-btn--pop.bf-btn--gray { background: var(--bf-line-2); color: var(--bf-ink-2); } /* 팝업 「닫기」 */
.bf-btn--timer  { height: 56px; background: var(--bf-fill-2); color: var(--bf-ink); font-size: 16px; font-weight: 800; } /* 인증문자 다시 받기 */

/* 작은 보조 버튼들 */
.bf-btn-outline-sm {                                              /* 「포인트 충전」「최대사용」 */
    display: inline-flex; align-items: center; justify-content: center;
    height: 40px; padding: 0 14px; border: 1px solid var(--bf-line); border-radius: 6px;
    background: var(--bf-surface); color: var(--bf-ink); font: 600 14px/1.4 var(--bf-font); cursor: pointer;
}
.bf-btn-outline-sm--xs { height: 28px; padding: 0 16px; border-color: var(--bf-line-2); border-radius: var(--bf-r-pop); background: var(--bf-fill); }
.bf-btn-pill-soft {                                               /* 「스토리톡 만들기」「친구 찾기」 */
    display: inline-flex; align-items: center; justify-content: center;
    height: 40px; padding: 0 16px; border: 0; border-radius: var(--bf-r-pill);
    background: var(--bf-fill); color: var(--bf-primary); font: 600 14px/1.4 var(--bf-font); cursor: pointer;
}
.bf-btn-mini {                                                    /* 행 오른쪽 「삭제」「친구 거절/수락」 */
    display: inline-flex; align-items: center; justify-content: center;
    height: 32px; padding: 0 8px; border: 1px solid var(--bf-line); border-radius: var(--bf-r);
    background: var(--bf-surface); color: var(--bf-ink-3); font: 500 14px/1.4 var(--bf-font); cursor: pointer;
}
.bf-btn-mini--accept { color: var(--bf-primary); font-weight: 700; }
.bf-btn-more {                                                    /* 「후기 더보기 6」 */
    display: flex; align-items: center; justify-content: center; gap: 10px;
    width: 100%; height: 47px; border: 1px solid var(--bf-fill-2); border-radius: var(--bf-r);
    background: var(--bf-surface); color: var(--bf-ink-2); font: 500 14px/1.4 var(--bf-font); cursor: pointer;
}
.bf-btn-more b { color: var(--bf-primary); font-weight: 700; }
.bf-btn-add {                                                     /* 참여멤버·담당자 「+」 박스 / 「차량 추가」 */
    display: flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%; height: var(--bf-h-input); border: 1px solid var(--bf-fill-2); border-radius: var(--bf-r);
    background: var(--bf-surface); color: var(--bf-primary); font: 500 16px/1.4 var(--bf-font); cursor: pointer;
}
.bf-link { color: var(--bf-primary); font-weight: 700; font-size: 14px; line-height: 1.4; cursor: pointer; }
/* 헤더 「다음」「완료」 — button.bf-reset(0,1,1) 의 color:inherit 을 이기도록 button 까지 건다 */
button.bf-text-action, .bf-text-action { font: 500 14px/1.4 var(--bf-font); color: var(--bf-primary); cursor: pointer; flex: none; }
button.bf-text-action--prev, .bf-text-action--prev { color: var(--bf-ink-3); }
/* 비활성(사진 올리는 중 등) — 글자만 흐리게. 누를 수 없다는 것이 보여야 한다(가이드: 비활성 = ink-4) */
button.bf-text-action[disabled], .bf-text-action.is-disabled { color: var(--bf-ink-4); cursor: default; }

/* 소셜 로그인 (lXPX0) 356x60 r30, 16/700/1.25 */
.bf-social {
    display: flex; align-items: center; justify-content: center; gap: 4px;
    width: 100%; height: 60px; border: 0; border-radius: 30px;
    font: 700 16px/1.25 var(--bf-font); cursor: pointer;
}
.bf-social img { width: 40px; height: 40px; }
.bf-social--kakao  { background: var(--bf-kakao); color: var(--bf-kakao-ink); }
.bf-social--naver  { background: var(--bf-naver); color: var(--bf-on-dark); }
.bf-social--google { background: var(--bf-surface); color: var(--bf-kakao-ink); border: 1px solid var(--bf-line); }
.bf-social--apple  { background: var(--bf-apple); color: var(--bf-on-dark); }

/* 원형 아이콘 버튼 (헤더 알림·메모장 36 / 채팅 + 32) */
.bf-icon-btn {
    position: relative; display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--bf-line);
    background: var(--bf-surface); cursor: pointer; flex: none;
}
.bf-icon-btn img { width: 20px; height: 20px; }
.bf-icon-btn--fill { width: 32px; height: 32px; border: 0; background: var(--bf-fill); }
.bf-icon-btn .bf-dot-new { position: absolute; right: -2px; bottom: -2px; }
.bf-dot-new { width: 10px; height: 10px; border-radius: 50%; background: var(--bf-primary); }

/* FAB (ic_plus_03) 60 히트 · 50 원 · 우 20 · GNB 위 20 */
.bf-fab {
    position: absolute; right: 20px; bottom: 20px; width: 60px; height: 60px;
    border: 0; padding: 0; background: url(/assets/icons/ic_plus_03.svg) center/60px 60px no-repeat; cursor: pointer;
}

/* ━━ 칩·배지 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* 세그먼트 칩 (스토리/커뮤니티/중고거래 · 준비물/메모 · 내친구/받은 친구신청) 40 r20 pad 12/20, 14/700/1.2, gap 8 */
.bf-segs { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; max-width: 100%; }   /* 좁은 화면(320)은 가로 스크롤 */
.bf-segs::-webkit-scrollbar { display: none; }
.bf-segs > * { flex: none; }
.bf-seg {
    height: var(--bf-h-chip); padding: 0 20px; border: 0; border-radius: var(--bf-r-pill);
    background: var(--bf-fill); color: var(--bf-ink-2); font: 700 14px/1.2 var(--bf-font); cursor: pointer; white-space: nowrap;
}
.bf-seg.is-on { background: var(--bf-primary); color: var(--bf-on-dark); }
/* 테두리 토글 칩 「내 준비물 보기」 */
.bf-seg--outline { background: transparent; border: 1px solid var(--bf-fill-2); box-sizing: border-box; }
.bf-seg--outline.is-on { background: var(--bf-ink); border-color: var(--bf-ink); color: var(--bf-on-dark); }

/* 필터 칩 (정렬기준 시트) 40 r10 pad 0/16, 14/700 #444 */
.bf-chips { display: flex; flex-wrap: wrap; gap: 12px; }
/* 칩 모양의 정본 — 버튼 칩과 라디오 그룹 아이템(ns-checkbox.bf-chips)이 같은 규칙을 탄다 */
.bf-chip, .ns-checkbox.bf-chips .ns-checkbox-item {
    display: inline-flex; align-items: center; justify-content: center;
    height: var(--bf-h-chip); padding: 0 16px; border-radius: var(--bf-r); box-sizing: border-box;
    background: var(--bf-surface); border: 1px solid var(--bf-line);
    color: var(--bf-ink-chip); font: 700 14px/1.4 var(--bf-font); cursor: pointer; white-space: nowrap;
}
.bf-chip.is-on, .ns-checkbox.bf-chips .ns-checkbox-item.checked { background: var(--bf-primary); border-color: var(--bf-primary); color: var(--bf-on-dark); }
.bf-chip--region { width: 100%; justify-content: flex-start; text-align: left; font-weight: 600; } /* 시군 칩 고정폭 */

/* 공지 태그 (안내·공지·필독) 높이 20 */
.bf-tag {
    display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: var(--bf-r-pill);
    background: var(--bf-line); color: var(--bf-ink-2); font: 600 12px/1.4 var(--bf-font); letter-spacing: -0.36px; flex: none;
}
.bf-tag--must { background: var(--bf-primary); color: var(--bf-on-dark); }

/* 후기 칩 (별점·키워드) 26 r13 */
.bf-kw {
    display: inline-flex; align-items: center; gap: 2px; height: 26px; padding: 0 8px; border-radius: var(--bf-r-pill);
    background: var(--bf-fill-2); color: var(--bf-ink-2); font: 400 12px/1.2 var(--bf-font);
}
.bf-kw img { width: 16px; height: 16px; }

/* 사진 위·밝은 바탕 알약 28 r14 (작성자 · 위치) */
.bf-pill {
    display: inline-flex; align-items: center; gap: 2px; height: 28px; padding: 0 12px; border-radius: var(--bf-r-pill);
    font: 400 12px/1.4 var(--bf-font); background: var(--bf-fill-2); color: var(--bf-ink); max-width: 100%;
}
.bf-pill img { width: 16px; height: 16px; }
.bf-pill--scrim  { background: var(--bf-scrim); color: var(--bf-on-dark); }
.bf-pill--author { background: var(--bf-scrim-soft); color: var(--bf-on-dark); font-size: 14px; }
/* 원본 결함: 어두운 알약 위 위치 아이콘이 #000 → 흰색으로 바꾼다(가이드 #12) */
.bf-pill--scrim img { filter: brightness(0) invert(1); }

/* 이미지 카운터 「1 / 10」 — 원본 44 고정폭은 두 자리에서 모자라 최소폭으로 */
.bf-counter {
    display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 24px; padding: 0 6px;
    border-radius: var(--bf-r-bubble); background: var(--bf-scrim); color: var(--bf-on-dark);
    font: 500 14px/1.143 var(--bf-font); letter-spacing: -0.7px; font-variant-numeric: tabular-nums;
}
/* 박수 칩 「2박」 44x28 */
.bf-nights { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 28px; padding: 0 8px; border-radius: var(--bf-r-pill); background: var(--bf-line); color: var(--bf-ink-2); font: 600 14px/1.4 var(--bf-font); }
/* 작은 뱃지들 */
.bf-badge { display: inline-flex; align-items: center; justify-content: center; border-radius: 4px; padding: 3px 6px; background: var(--bf-primary); color: var(--bf-on-dark); font: 700 12px/1.4 var(--bf-font); }
.bf-badge--round { height: 20px; padding: 0 8px; border-radius: var(--bf-r); font-weight: 600; }   /* 「즉시할인」 */
.bf-dday { display: inline-flex; align-items: center; justify-content: center; min-width: 68px; height: 36px; padding: 0 8px; background: var(--bf-primary); color: var(--bf-on-dark); font: 800 16px/1.4 var(--bf-font); }

/* 순위 리본 ic_rebon 40 + 18/800 흰 */
.bf-rank { position: absolute; left: 4px; top: 0; width: 40px; height: 40px; background: url(/assets/icons/ic_rebon.svg) center/contain no-repeat; color: var(--bf-on-dark); font: 800 18px/1.4 var(--bf-font); text-align: center; padding-top: 5px; box-sizing: border-box; }

/* ━━ 입력 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 * 원본에 두 벌: 폼 #edeff1 r10 364x56 (로그인·스토리·결제) vs 차량번호 #d2d4d9 r6 308x52 → 폼으로 통일(#12)
 * 포커스 = 테두리 #000 (주석 「Select 된 입력박스의 라인 강조 #000000」)
 */
.bf-field { display: flex; flex-direction: column; gap: 8px; }
.bf-field__label { font: 500 16px/1.4 var(--bf-font); color: var(--bf-ink-2); }
.bf-field__label em { font-style: normal; font-weight: 700; color: var(--bf-primary); margin-left: 2px; }
.bf-input {
    width: 100%; height: var(--bf-h-input); padding: 0 20px; box-sizing: border-box;
    border: 1px solid var(--bf-fill-2); border-radius: var(--bf-r); background: var(--bf-surface);
    font: 400 16px/1.25 var(--bf-font); color: var(--bf-ink); outline: none; caret-color: var(--bf-primary);
    -webkit-appearance: none; appearance: none;
}
.bf-input::placeholder { color: var(--bf-ink-4); }
.bf-input:focus { border-color: var(--bf-ink); }
.bf-input[readonly] { background: var(--bf-fill); border-color: var(--bf-line); }
.bf-textarea {
    width: 100%; min-height: 224px; padding: 16px; box-sizing: border-box; resize: none;
    border: 1px solid var(--bf-line); border-radius: var(--bf-r); background: var(--bf-surface);
    font: 400 16px/1.4 var(--bf-font); color: var(--bf-ink); outline: none; caret-color: var(--bf-primary);
}
.bf-textarea::placeholder { color: var(--bf-ink-4); }
.bf-textarea--sm { min-height: 162px; }
/* 검색 알약 (홈·친구 찾기) 44 r22 #f5f5f5 */
.bf-search {
    display: flex; align-items: center; gap: 12px; height: 44px; padding: 0 16px; border-radius: var(--bf-r-pill);
    background: var(--bf-fill); box-sizing: border-box; width: 100%;
}
.bf-search img { width: 24px; height: 24px; flex: none; }
.bf-search input, .bf-search span {
    flex: 1; min-width: 0; border: 0; outline: none; background: transparent;
    font: 400 16px/1.4 var(--bf-font); color: var(--bf-ink); caret-color: var(--bf-primary);
}
.bf-search input::placeholder, .bf-search span.is-placeholder { color: var(--bf-ink-3); }
/* 검색 박스 (위치 검색) 48 r10 + 테두리 */
.bf-search--box { height: 48px; border-radius: var(--bf-r); box-shadow: inset 0 0 0 1px var(--bf-line-2); }

/* 포인트 입력 (kglhR) */
.bf-point-field { display: flex; align-items: center; gap: 8px; height: var(--bf-h-input); padding: 0 12px 0 20px; border: 1px solid var(--bf-line); border-radius: var(--bf-r); background: var(--bf-fill); box-sizing: border-box; }
.bf-point-field input { flex: 1; min-width: 0; border: 0; background: transparent; outline: none; text-align: right; font: 700 16px/1.25 var(--bf-font); color: var(--bf-ink); font-variant-numeric: tabular-nums; }
.bf-point-field input::placeholder { color: var(--bf-ink-4); }
.bf-point-field .unit { font: 700 16px/1.25 var(--bf-font); }

/* 스위치(설정 on/off) — 원본에 없는 원자. 가이드 색으로만 조립(44x26, 켜짐 = primary) */
.bf-switch { position: relative; flex: none; width: 44px; height: 26px; border: 0; padding: 0; border-radius: var(--bf-r-pill); background: var(--bf-line-2); cursor: pointer; transition: background .15s; }
.bf-switch::after { content: ''; position: absolute; left: 3px; top: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--bf-surface); box-shadow: var(--bf-shadow-fab); transition: transform .15s; }
.bf-switch.is-on, .bf-switch[aria-checked="true"] { background: var(--bf-primary); }
.bf-switch.is-on::after, .bf-switch[aria-checked="true"]::after { transform: translateX(18px); }

/* 체크(원형 24) — 디자이너 아이콘 btn_check_01_n/s */
.bf-check { display: inline-block; width: 24px; height: 24px; flex: none; background: url(/assets/icons/btn_check_01_n.svg) center/contain no-repeat; cursor: pointer; }
.bf-check.is-on { background-image: url(/assets/icons/btn_check_01_s.svg); }

/* 스테퍼 36 히트 · 30 r8 박스 */
.bf-stepper { display: inline-flex; align-items: center; }
.bf-stepper button { width: 36px; height: 36px; padding: 3px; border: 0; background: none; cursor: pointer; }
.bf-stepper button i { display: block; width: 30px; height: 30px; box-sizing: border-box; border: 1px solid var(--bf-line); border-radius: var(--bf-r-pop); background: center/24px 24px no-repeat; }
.bf-stepper .dec i { background-image: url(/assets/icons/btn_02_minus_s.svg); }
.bf-stepper .inc i { background-image: url(/assets/icons/btn_01_plus_s.svg); }
.bf-stepper .dec[disabled] i { background-image: url(/assets/icons/btn_02_minus_d.svg); }
.bf-stepper .inc[disabled] i { background-image: url(/assets/icons/btn_01_plus_d.svg); }
.bf-stepper output { width: 25px; text-align: center; font: 400 16px/1.4 var(--bf-font); font-variant-numeric: tabular-nums; }

/* 별점 입력 60 × 5, gap 8 (ic_scope_02) */
.bf-stars { display: flex; gap: 8px; width: 100%; max-width: 332px; }
.bf-stars button { flex: 1 1 0; max-width: 60px; aspect-ratio: 1; min-width: 0; height: auto; border: 0; padding: 0; background: url(/assets/icons/ic_scope_02_n.svg) center/contain no-repeat; cursor: pointer; }
.bf-stars button.is-on { background-image: url(/assets/icons/ic_scope_02_s.svg); }

/* ━━ 아바타 — 스쿼클(초타원). 원이 아니다 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 * 원본 path "M0 34c0-25.5 8.5-34 34-34 …" (68 기준) 가 28~200 전 크기에서 같다 = 이 서비스의 서명(#4)
 */
.bf-avatar {
    --size: 44px;
    position: relative; display: inline-block; flex: none; width: var(--size); height: var(--size);
    background: var(--bf-avatar-bg) center/cover no-repeat;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 68 68'%3E%3Cpath d='M0 34c0-25.5 8.5-34 34-34 25.5 0 34 8.5 34 34 0 25.5-8.5 34-34 34-25.5 0-34-8.5-34-34z'/%3E%3C/svg%3E") center/100% 100% no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 68 68'%3E%3Cpath d='M0 34c0-25.5 8.5-34 34-34 25.5 0 34 8.5 34 34 0 25.5-8.5 34-34 34-25.5 0-34-8.5-34-34z'/%3E%3C/svg%3E") center/100% 100% no-repeat;
}
.bf-avatar::after { content: ''; position: absolute; inset: 0; box-shadow: inset 0 0 0 1px var(--bf-img-line); } /* 안쪽 1px 선(마스크가 잘라 스쿼클이 된다) */
.bf-avatar--28 { --size: 28px; } .bf-avatar--32 { --size: 32px; } .bf-avatar--36 { --size: 36px; }
.bf-avatar--40 { --size: 40px; } .bf-avatar--72 { --size: 72px; } .bf-avatar--160 { --size: 160px; }
.bf-avatar.is-empty-1 { background: url(/assets/icons/ic_no_profile_01.svg) center/100% no-repeat; }
.bf-avatar.is-empty-2 { background: url(/assets/icons/ic_no_profile_02.svg) center/100% no-repeat; }
.bf-avatar.is-empty-3 { background: url(/assets/icons/ic_no_profile_03.svg) center/100% no-repeat; }
.bf-avatar-wrap { position: relative; display: inline-block; flex: none; }
.bf-avatar-wrap .bf-leader { position: absolute; left: 68%; top: 59%; width: 18px; height: 18px; background: url(/assets/icons/ic_leader.svg) center/contain no-repeat; }

/* ━━ 탭 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 * 밑줄 탭: pad 12/0, gap 36, 활성 14/700 #000 · 비활성 14/500 ink-2, 인디케이터 2px #000 = 글자 폭
 * 원본 결함: 인디케이터가 글자보다 6px 짧고 6px 왼쪽 → 글자 폭에 정확히 맞춘다(#12)
 */
.bf-tabs { display: flex; width: 100%; box-sizing: border-box; gap: 36px; padding: 0 var(--bf-gutter); border-top: 1px solid var(--bf-line); border-bottom: 1px solid var(--bf-line); overflow-x: auto; scrollbar-width: none; background: var(--bf-surface); }
.bf-tabs::-webkit-scrollbar { display: none; }
.bf-tabs--flush { border-top: 0; }
.bf-tab { position: relative; flex: none; padding: 12px 0; border: 0; background: none; font: 500 14px/1.4 var(--bf-font); color: var(--bf-ink-2); cursor: pointer; white-space: nowrap; }
.bf-tab.is-on { font-weight: 700; color: var(--bf-ink); }
.bf-tab.is-on::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--bf-ink); }

/* 숫자 탭 (스크랩) 3칸 균등 */
.bf-count-tabs { display: flex; width: 100%; box-sizing: border-box; padding: 0 var(--bf-gutter); border-top: 1px solid var(--bf-line); border-bottom: 1px solid var(--bf-line); }
.bf-count-tab { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 0; border: 0; background: none; color: var(--bf-ink-4); cursor: pointer; }
.bf-count-tab b { font: 700 24px/1.4 var(--bf-font); font-variant-numeric: tabular-nums; }
.bf-count-tab span { font: 500 14px/1.4 var(--bf-font); }
.bf-count-tab.is-on { color: var(--bf-ink); }
.bf-count-tab.is-on span { font-weight: 700; }   /* 원본은 칸마다 굵기 고정(결함) → 상태로 바꾼다(#12) */
.bf-count-tab.is-on::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--bf-ink); }

/* ━━ 헤더 (412x56) ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.bf-header {
    position: relative; display: flex; width: 100%; align-items: center; gap: 12px; height: var(--bf-h-header);
    padding: 0 var(--bf-gutter); background: var(--bf-surface); box-sizing: border-box;
}
.bf-header__title { flex: 1; min-width: 0; font: 600 20px/1.4 var(--bf-font); color: var(--bf-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bf-header__title b { color: var(--bf-primary); font-weight: 700; margin-left: 4px; }      /* 「댓글 4」 */
.bf-header__back { width: 24px; height: 24px; border: 0; padding: 0; background: url(/assets/icons/ic_arrow_01_b.svg) center/contain no-repeat; cursor: pointer; flex: none; }
.bf-header__close { width: 24px; height: 24px; border: 0; padding: 0; background: url(/assets/icons/ic_cancel_02_b.svg) center/contain no-repeat; cursor: pointer; flex: none; }
.bf-header__tools { display: flex; align-items: center; gap: 20px; flex: none; }
.bf-header__tools .bf-icon-btn { margin-left: -12px; }  /* 검색 24 ↔ 알림 36 간격 = 원본 20 */
.bf-header--line { box-shadow: inset 0 -1px 0 var(--bf-line); }
.bf-header__logo { display: block; width: 92px; height: 38px; }
/* 브랜드색 헤더 (프로필) — 제목 가운데 */
.bf-header--brand { background: var(--bf-primary); }
.bf-header--brand .bf-header__title { color: var(--bf-on-dark); text-align: center; }
.bf-header--brand .bf-header__back { background-image: url(/assets/icons/ic_arrow_01_w.svg); }
/* 사진 위 투명 헤더 (상세 히어로·매거진) — 원본 그라디언트는 위 투명 → 아래 60% */
.bf-header--overlay { position: absolute; left: 0; right: 0; top: 0; z-index: 2; background: var(--bf-header-fade); }
.bf-header--overlay .bf-header__back { background-image: url(/assets/icons/ic_arrow_01_w.svg); }
.bf-header--overlay .bf-header__title { color: var(--bf-on-dark); }
/* 다크 (사진 선택·이미지 뷰어) */
.bf-header--dark { background: var(--bf-ink); }
.bf-header--dark .bf-header__title { color: var(--bf-on-dark); }
.bf-header--dark .bf-header__close { background-image: url(/assets/icons/ic_cancel_02_w.svg); }

/* ━━ 하단 바 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.bf-ctabar { width: 100%; box-sizing: border-box; padding: 17px var(--bf-gutter) calc(16px + var(--bf-safe-bot)); background: var(--bf-surface); box-shadow: inset 0 1px 0 var(--bf-line); }
.bf-pricebar { width: 100%; box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; padding: 14px var(--bf-gutter) calc(14px + var(--bf-safe-bot)); background: var(--bf-surface); box-shadow: inset 0 1px 0 var(--bf-line); }
.bf-pricebar__price { font: 700 16px/1.5 var(--bf-font); font-variant-numeric: tabular-nums; }
.bf-pricebar__price small { font-weight: 400; color: var(--bf-ink-3); font-size: 14px; margin-left: 2px; }

/* ━━ 시트·딤·팝업 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.bf-dim { position: fixed; inset: 0; background: var(--bf-dim); }
.bf-sheet { width: 100%; background: var(--bf-surface); border-radius: var(--bf-r-sheet) var(--bf-r-sheet) 0 0; overflow: hidden; }
.bf-sheet--gray { background: var(--bf-fill); }                                     /* 필터·지역 시트 바닥 */
.bf-sheet__head { position: relative; display: flex; align-items: center; height: var(--bf-h-header); padding: 0 var(--bf-gutter); background: var(--bf-surface); box-shadow: inset 0 -1px 0 var(--bf-line); }
.bf-sheet__head::before { content: ''; position: absolute; left: 50%; top: 8px; width: 40px; height: 4px; margin-left: -20px; border-radius: 2px; background: var(--bf-line-2); }
.bf-sheet__title { flex: 1; font: 700 16px/1.4 var(--bf-font); }
.bf-sheet__reset { width: 24px; height: 24px; border: 0; padding: 0; background: url(/assets/icons/ic_refresh.svg) center/contain no-repeat; cursor: pointer; }
.bf-actionsheet { box-sizing: border-box; display: flex; flex-direction: column; gap: 12px; padding: 24px var(--bf-gutter) calc(24px + var(--bf-safe-bot)); }
.bf-gridsheet { display: flex; justify-content: center; gap: 2px; padding: 0 var(--bf-gutter) var(--bf-safe-bot); }
.bf-gridsheet button { flex: 0 1 calc((100% - 4px) / 3); height: 120px; border: 0; background: none; display: flex; flex-direction: column; align-items: center; gap: 16px; padding-top: 20px; font: 400 14px/1.2 var(--bf-font); color: var(--bf-ink); cursor: pointer; }
.bf-gridsheet button img { width: 40px; height: 40px; }

/* 센터 팝업 280 r8 — 원본 바탕 #f5f5f5, 머리 흰 56 */
.bf-popup-host { padding: 0 16%; }   /* 팝업은 폭을 갖지 않는다 — 띄우는 쪽이 여백을 준다(원본 280/412) */
.bf-popup { width: 100%; border-radius: var(--bf-r-pop); background: var(--bf-fill); overflow: hidden; }
.bf-popup__head { height: 56px; padding: 0 20px; display: flex; align-items: center; background: var(--bf-surface); box-shadow: inset 0 -1px 0 var(--bf-fill-2); font: 500 16px/1.4 var(--bf-font); }
.bf-popup__body { padding: 20px; min-height: 68px; font: 400 14px/1.4 var(--bf-font); color: var(--bf-ink-2); }
.bf-popup__foot { display: flex; gap: 8px; padding: 16px; box-shadow: inset 0 1px 0 var(--bf-line); }

/* ━━ 구분·제목·빈 상태·경고 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.bf-divider { height: 1px; background: var(--bf-fill-2); }
.bf-divider--line { background: var(--bf-line); }
.bf-divider--band { height: 8px; background: var(--bf-fill); }
.bf-divider--band12 { height: 12px; background: var(--bf-fill); }
.bf-section-title { display: flex; align-items: center; gap: 8px; font: 700 18px/1.4 var(--bf-font); color: var(--bf-ink); }
.bf-section-title b { color: var(--bf-primary); }
.bf-section-title .more { margin-left: auto; width: 28px; height: 28px; border: 0; padding: 0; background: url(/assets/icons/ic_more_01.svg) center/contain no-repeat; cursor: pointer; }
.bf-section-title--lg { font-size: 24px; }       /* 홈 섹션 */
.bf-eyebrow { font: 700 14px/1.4 var(--bf-font); letter-spacing: -0.42px; color: var(--bf-primary); } /* 「매거진 TOP 30」 */
.bf-hint { font: 400 14px/1.4 var(--bf-font); color: var(--bf-ink-2); }
.bf-empty { display: flex; flex-direction: column; align-items: center; gap: 20px; padding: 120px var(--bf-gutter); text-align: center; font: 400 16px/1.4 var(--bf-font); color: var(--bf-ink-4); }
.bf-empty--action { font-size: 14px; color: var(--bf-ink-3); }
.bf-empty img { width: 92px; height: 38px; margin-bottom: 20px; }
.bf-warning { display: flex; align-items: flex-start; gap: 8px; font: 600 14px/1.6 var(--bf-font); color: var(--bf-accent); }
.bf-warning::before { content: ''; flex: none; width: 20px; height: 20px; margin-top: 2px; background: url(/assets/icons/ic_warning.svg) center/contain no-repeat; }
.bf-warn-text { font: 400 12px/1.4 var(--bf-font); color: var(--bf-accent); }

/* 캐러셀 점 — 홈 캐러셀(점 8, 활성 막대 24x8) / 사진 캐러셀(점 6, 활성 점) */
.bf-dots { display: flex; justify-content: center; align-items: center; gap: 8px; }
.bf-dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--bf-line); }
.bf-dots i.is-on { width: 24px; border-radius: 4px; background: var(--bf-primary); }
.bf-dots--photo { gap: 6px; }
.bf-dots--photo i { width: 6px; height: 6px; }
.bf-dots--photo i.is-on { width: 6px; border-radius: 50%; }

/* 아이콘 + 텍스트 정보 행 (위치·전화·평점·적립) 피치 32 */
.bf-info-row { display: flex; align-items: center; gap: 4px; min-height: 32px; font: 500 14px/1.4 var(--bf-font); color: var(--bf-ink-2); }
.bf-info-row > img:first-child { width: 20px; height: 20px; margin-right: 0; }
.bf-info-row .bf-link { margin-left: 4px; }

/* 키-값 목록 — 원본은 유형마다 색이 반대(결함). 키 ink-3 / 값 ink 로 통일(#12) */
.bf-kv { display: grid; grid-template-columns: max-content 1fr; column-gap: 20px; row-gap: 8px; font: 400 14px/1.4 var(--bf-font); }
.bf-kv dt { color: var(--bf-ink-3); min-width: 58px; }
.bf-kv dd { margin: 0; color: var(--bf-ink); min-width: 0; }
.bf-kv dd.strong { font-weight: 700; }
.bf-kv--box { padding: 20px 24px; border-radius: var(--bf-r); background: var(--bf-fill); row-gap: 14px; }

/* 말풍선 — 채팅·메모 공통 (조합은 PART chat-message) */
.bf-bubble { max-width: 80%; padding: 12px; box-sizing: border-box; font: 400 14px/1.2 var(--bf-font); color: var(--bf-ink); word-break: keep-all; overflow-wrap: anywhere; white-space: pre-wrap; }  /* 한국어는 단어 단위로 끊는다 */
.bf-bubble--other { background: var(--bf-surface); border-radius: 0 var(--bf-r-bubble) var(--bf-r-bubble) var(--bf-r-bubble); }
.bf-bubble--mine  { background: var(--bf-mint);    border-radius: var(--bf-r-bubble) 0 var(--bf-r-bubble) var(--bf-r-bubble); }
.bf-time { font: 400 12px/1.2 var(--bf-font); color: var(--bf-ink-3); white-space: nowrap; }

/* ━━ NSKit 위젯 스킨 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 * 컨트롤 순서 = NSKit 위젯(ns-input·ns-textarea·ns-checkbox) → PART → 기본 컨트롤(사용자 결정 2026-09-27).
 * 엔진 위젯 CSS(nskit-widget.css)는 로드하지 않는다 — 위젯 모양의 정본은 여기다.
 * 변형은 위젯 컨테이너에 빅풋 클래스를 붙인다:
 *   ns-input    (기본 = bf-input 폼칸) · bf-search(검색 알약) · bf-search--box(검색 박스) · bf-point(포인트 입력, 오른쪽 단위)
 *               단위 = icon-right-class="bf-ic-unit-p"(P) | "bf-ic-unit-won"(원)
 *   ns-textarea (기본 = bf-textarea 224) · bf-textarea--sm(162) · bf-textarea--bar(채팅·댓글 입력줄, 자동 높이)
 *   ns-checkbox (기본 = 원형 체크 24 + 라벨) · bf-switch(스위치) · 그룹: bf-chips(칩 라디오) · bf-tiles(타일 라디오)
 * 🔑 선택자는 맥락(컨테이너)을 :where() 로 감싸 **대상 요소 하나만** 우선순위에 남긴다 → 변형은 선언 순서로 이기고,
 *    화면·PART 의 로컬 규칙(.xx .textarea-field)은 우선순위로 이긴다. 예전엔 스킨이 로컬 padding·font 를 이겨 입력줄이 20px 로 눌렸다(S2·S3 실측).
 * 아이콘 슬롯은 엔진 ICON_MAP 에 없는 클래스를 주면 빈 <i> 로 나온다 → 디자이너 SVG 를 배경으로 입힌다(bf-ic-*).
 */
.ns-input { display: flex; flex-direction: column; gap: 8px; width: 100%; min-width: 0; }
:where(.ns-input) > .label, :where(.ns-textarea) > .label { font: 500 16px/1.4 var(--bf-font); color: var(--bf-ink-2); }
:where(.ns-textarea) > .label { display: block; margin-bottom: 8px; }
:where(.ns-input) > .label.required::after { content: '*'; margin-left: 2px; font-weight: 700; color: var(--bf-primary); }
:where(.ns-input) .input-wrapper { display: flex; align-items: center; gap: 12px; min-width: 0; }
/* ⚠️ flex:1 은 가로 wrapper 안에서만 — 아이콘 없는 입력칸은 세로 flex(.ns-input) 의 직속 자식이라
      flex-basis 0 이 height 를 이겨 21px 로 눌린다(실측) */
:where(.ns-input .input-wrapper) .input-field { flex: 1; }
:where(.ns-input) .input-field {
    width: 100%; min-width: 0; height: var(--bf-h-input); padding: 0 20px; box-sizing: border-box;
    border: 1px solid var(--bf-fill-2); border-radius: var(--bf-r); background: var(--bf-surface);
    font: 400 16px/1.25 var(--bf-font); color: var(--bf-ink); outline: none; caret-color: var(--bf-primary);
    -webkit-appearance: none; appearance: none;
}
:where(.ns-input) .input-field::placeholder { color: var(--bf-ink-4); }
:where(.ns-input) .input-field:focus { border-color: var(--bf-ink); }
:where(.ns-input) .input-field[readonly] { background: var(--bf-fill); border-color: var(--bf-line); }
:where(.ns-input.disabled) .input-field, :where(.ns-input) .input-field:disabled { background: var(--bf-fill); color: var(--bf-ink-4); }
:where(.ns-input) .input-field[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }
:where(.ns-input) .nsk-icon { flex: none; display: block; width: 24px; height: 24px; background: center/contain no-repeat; }
:where(.ns-input) .nsk-icon.clickable { cursor: pointer; }
.nsk-icon.bf-ic-search { background-image: url(/assets/icons/ic_search.svg); }
/* 검색 알약 44 r22 fill — 컨테이너가 알약, 입력칸은 투명 */
.ns-input.bf-search { display: flex; flex-direction: row; align-items: center; height: 44px; padding: 0 16px; gap: 0; border-radius: var(--bf-r-pill); background: var(--bf-fill); box-sizing: border-box; }
:where(.ns-input.bf-search) .input-wrapper { flex: 1; }
:where(.ns-input.bf-search) .input-field { height: 100%; padding: 0; border: 0; border-radius: 0; background: transparent; font: 400 16px/1.4 var(--bf-font); }
:where(.ns-input.bf-search) .input-field::placeholder { color: var(--bf-ink-3); }
.ns-input.bf-search--box { height: 48px; border-radius: var(--bf-r); background: var(--bf-surface); box-shadow: inset 0 0 0 1px var(--bf-line-2); }
/* 포인트 입력 — 오른쪽 정렬 숫자 + 단위(아이콘 슬롯 bf-ic-unit-p) */
:where(.ns-input.bf-point) .input-wrapper { height: var(--bf-h-input); padding: 0 12px 0 20px; gap: 8px; border: 1px solid var(--bf-line); border-radius: var(--bf-r); background: var(--bf-fill); box-sizing: border-box; }
:where(.ns-input.bf-point) .input-field { height: 100%; padding: 0; border: 0; border-radius: 0; background: transparent; text-align: right; font: 700 16px/1.25 var(--bf-font); font-variant-numeric: tabular-nums; }
.nsk-icon.bf-ic-unit-p, .nsk-icon.bf-ic-unit-won { width: auto; height: auto; background: none; font: 700 16px/1.25 var(--bf-font); font-style: normal; color: var(--bf-ink); }
.nsk-icon.bf-ic-unit-p::before { content: 'P'; }
.nsk-icon.bf-ic-unit-won::before { content: '원'; }

.ns-textarea { display: block; width: 100%; min-width: 0; }
:where(.ns-textarea) .textarea-wrapper { position: relative; display: flex; flex-direction: column; gap: 8px; }
:where(.ns-textarea) .textarea-field {
    display: block; width: 100%; min-height: 224px; padding: 16px; box-sizing: border-box; resize: none;
    border: 1px solid var(--bf-line); border-radius: var(--bf-r); background: var(--bf-surface);
    font: 400 16px/1.4 var(--bf-font); color: var(--bf-ink); outline: none; caret-color: var(--bf-primary);
}
:where(.ns-textarea) .textarea-field::placeholder { color: var(--bf-ink-4); }
:where(.ns-textarea.bf-textarea--sm) .textarea-field { min-height: 162px; }
:where(.ns-textarea.disabled) .textarea-field { background: var(--bf-fill); color: var(--bf-ink-4); }
:where(.ns-textarea) .char-count { align-self: flex-end; font: 400 12px/1.4 var(--bf-font); color: var(--bf-ink-4); font-variant-numeric: tabular-nums; }
/* 입력줄(채팅·댓글) — 테두리 없는 한 줄에서 시작해 자동으로 늘어난다(엔진 auto-resize, max-rows) */
:where(.ns-textarea.bf-textarea--bar) .textarea-field { min-height: 0; padding: 0; border: 0; border-radius: 0; background: transparent; font: 400 14px/1.43 var(--bf-font); }

.ns-checkbox { display: inline-flex; align-items: center; gap: 12px; min-width: 0; cursor: pointer; -webkit-user-select: none; user-select: none; }
:where(.ns-checkbox) > .nsk-icon, :where(.ns-checkbox-item) > .nsk-icon { flex: none; width: 24px; height: 24px; background: url(/assets/icons/btn_check_01_n.svg) center/contain no-repeat; }
:where(.ns-checkbox.checked) > .nsk-icon, :where(.ns-checkbox-item.checked) > .nsk-icon { background-image: url(/assets/icons/btn_check_01_s.svg); }
:where(.ns-checkbox) > .nsk-label { min-width: 0; font: inherit; color: inherit; }
.ns-checkbox.disabled, .ns-checkbox-item.disabled { cursor: default; }
/* 그룹 컨테이너는 누르는 곳이 아니다 — 항목만 손가락 커서(검증 실측: 칩 사이 여백을 누르면 반응이 없는데 커서는 손가락이었다) */
.ns-checkbox[role="group"], .ns-checkbox[role="radiogroup"] { cursor: default; }
.ns-checkbox-item { cursor: pointer; }
.ns-checkbox:focus-visible, .ns-checkbox-item:focus-visible { outline: 2px solid var(--bf-primary); outline-offset: 2px; }
/* 스위치 — 컨테이너가 알약. 켜짐은 엔진이 붙이는 aria-checked 로 (.bf-switch 원자 규칙을 그대로 탄다) */
.ns-checkbox.bf-switch { display: inline-block; }
:where(.ns-checkbox.bf-switch) > .nsk-icon, :where(.ns-checkbox.bf-switch) > .nsk-label { display: none; }
/* 그룹 — 칩 라디오(bf-chips): 아이템이 bf-chip 모양 */
:where(.ns-checkbox) .group-items { display: flex; flex-direction: column; gap: 12px; }
.ns-checkbox.bf-chips { display: block; }
:where(.ns-checkbox.bf-chips) .group-items { flex-direction: row; flex-wrap: wrap; gap: 12px; }
:where(.ns-checkbox.bf-chips .ns-checkbox-item) > .nsk-icon { display: none; }
.ns-checkbox.bf-tiles { display: block; }
:where(.ns-checkbox.bf-tiles) .group-items { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
:where(.ns-checkbox.bf-tiles .ns-checkbox-item) > .nsk-icon { display: none; }

/* 사진 올리는 중 — 로컬 미리보기 위에 덮는 칸(BF.uploadEach 의 pending 항목). 부모 = position:relative 인 사진 칸.
   끝나면 요소를 뗀다. 누르기는 통과시킨다(삭제 버튼은 z-index 로 위에 남는다). 새 색 없음 — 사진 위 scrim + on-dark */
.bf-uploading { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; border-radius: inherit; background: var(--bf-scrim); pointer-events: none; }
.bf-uploading::before { content: ''; width: 24px; height: 24px; box-sizing: border-box; border: 2px solid color-mix(in srgb, var(--bf-on-dark) 30%, transparent); border-top-color: var(--bf-on-dark); border-radius: var(--bf-r-pill); animation: bf-spin .8s linear infinite; }
@keyframes bf-spin { to { transform: rotate(360deg); } }