/* =============================================================
   customer-common.css — 고객 프론트 공통 라이브러리 (C1~ 고객 화면 공용)
   -------------------------------------------------------------
   콘솔·내부 화면(app.css)과 별개인 고객 대면 브랜드 스타일.
   디자인 토큰 + 공통 컴포넌트(헤더·푸터·하단 내비·버튼·칩·뱃지·섹션 헤더).
   페이지 전용 규칙은 각 페이지 CSS(main.css 등)에 둔다.

   토큰 값은 Figma 변수(TheKKOT-yhlee)에서 그대로 가져왔다 —
   임의 보정하지 말고 시안이 바뀌면 변수부터 고친다.

   브레이크포인트 (프로젝트 원칙):
     모바일  <560px  /  태블릿 560~1099px  /  데스크탑 ≥1100px
   ============================================================= */

:root {
  /* --- 브랜드 (Figma: main / main 600 / main 300 / main 200 / main 50) --- */
  --kb-main: #22d4ca;
  --kb-main-600: #1fc1b8;
  --kb-main-300: #6be2db;
  --kb-main-200: #99ebe7;
  --kb-main-50: #e9fbfa;

  /* --- 그레이 스케일 (Figma: Gray/gray*) --- */
  --kb-gray-900: #212121;
  --kb-gray-800: #424242;
  --kb-gray-700: #616161;
  --kb-gray-600: #757575;
  --kb-gray-500: #9e9e9e;
  --kb-gray-300: #e0e0e0;
  --kb-gray-200: #eeeeee;
  --kb-gray-100: #f5f5f5;
  --kb-gray-50: #fafafa;
  --kb-white: #ffffff;
  --kb-dark: #2a343d;

  /* --- 그 외 시안 고정색 --- */
  --kb-lang-badge: #ed9966;      /* 병원 지원 언어 뱃지 */
  --kb-highlight: #c4e9e7;       /* 히어로 포인트 형광펜 */
  --kb-hero-bg: #f9f8f6;         /* 히어로 웜화이트 배경 */
  --kb-caption-scrim: rgba(13, 13, 13, 0.4); /* 시술 카드 캡션 */

  /* --- 레이아웃 --- */
  --kb-frame-max: 1280px;
  --kb-frame-pad: 16px;          /* 데스크탑에서 44px 로 넓어진다 */
  --kb-radius: 8px;
  --kb-bottomnav-height: 69px;

  /* --- 타이포 ---
     본문은 Pretendard Variable 을 자체 호스팅한다 (assets/font/pretendard/,
     _shell.html 의 head 프래그먼트에서 불러온다). 로컬에 설치된 Pretendard 가
     있으면 그걸 먼저 쓰고, 웹폰트가 못 뜨면 OS 기본 산세리프로 떨어진다.
     디스플레이("How it works" · 스텝 번호)는 시안이 Outfit 인데 아직 번들하지
     않았다. Futura·Avenir 같은 OS 내장 폰트를 끼우면 맥/윈도 렌더가 달라지므로
     번들한 Pretendard 로 떨어뜨려 어디서나 같게 나오게 둔다. */
  --kb-font: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
    "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Segoe UI", Roboto, sans-serif;
  --kb-font-display: Outfit, var(--kb-font);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  background: var(--kb-white);
}

body.kb-body {
  min-height: 100vh;
  margin: 0;
  background: var(--kb-white);
  color: var(--kb-gray-900);
  font-family: var(--kb-font);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* 엘리먼트 선택자(0,0,1) 라서 어떤 컴포넌트 클래스에도 지지 않는다.
   .kb-body a 처럼 클래스를 붙이면 .kb-btn-primary 의 color 를 이겨버린다 — 주의 */
a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
}

/* ⚠ 리셋은 반드시 엘리먼트 선택자(0,0,1)로 둔다.
   .kb-body figure 처럼 클래스를 붙이면 특정도(0,1,1)가 컴포넌트 클래스
   (.main-treatment-card 등 0,1,0)를 이겨 margin 을 되돌려 놓는다.
   이 파일은 고객 화면에서만 불러오므로 굳이 .kb-body 로 감쌀 필요가 없다. */
h1,
h2,
h3,
p,
ul,
figure {
  margin: 0;
}

ul {
  padding: 0;
  list-style: none;
}

img,
svg {
  display: block;
  max-width: 100%;
}

/* 화면에는 숨기고 보조기기에는 읽히는 텍스트 */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* 본문 폭 프레임 (시안: 1280 캔버스 · 좌우 44 패딩 → 내용 1192) */
.kb-frame {
  width: 100%;
  max-width: var(--kb-frame-max);
  margin: 0 auto;
  padding: 0 var(--kb-frame-pad);
}

/* 모바일 화면 구분 밴드 (시안 division · 8px 회색 띠) — C2·C3 공용 */
.t-division {
  height: 8px;
  background: var(--kb-gray-100);
}

/* 플로팅 버튼 form 래퍼 — 레이아웃에 끼어들지 않게 */
.t-fab-form {
  display: contents;
}

/* 뷰포트별 표시 — 모바일·태블릿 전용 / 데스크탑 전용 */
.t-only-desktop {
  display: none;
}

@media (min-width: 1100px) {
  .t-only-mobile {
    display: none !important;
  }

  .t-only-desktop {
    display: block;
  }

  .t-division {
    display: none;
  }
}

/* 목적지 화면이 아직 없는 링크 */
.kb-link-disabled {
  opacity: 0.45;
  pointer-events: none;
  cursor: default;
}

/* ---------------------------------------------------------------
   헤더
   모바일: 웜화이트 바탕에 로고만 중앙 (시안 head, 높이 50)
   데스크탑: 흰 바탕 · 로고 · GNB · 로그인 (시안 서브헤더, 높이 70)
   --------------------------------------------------------------- */
.kb-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--kb-hero-bg);
  border-bottom: 1px solid var(--kb-gray-200);
}

.kb-header-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  height: 50px;
}

.kb-logo img {
  height: 17px;
  width: auto;
}

.kb-gnb {
  display: none; /* 모바일은 하단 내비가 대신한다 */
  gap: 24px;
  font-size: 1rem;
}

.kb-gnb a {
  color: var(--kb-gray-600);
  font-weight: 500;
}

.kb-gnb a.is-current {
  color: var(--kb-gray-900);
  font-weight: 600;
}

.kb-header-actions {
  display: none;
  align-items: center;
  gap: 12px;
}

/* ---------------------------------------------------------------
   버튼
   --------------------------------------------------------------- */
.kb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 56px;
  padding: 0 28px;
  border: 0;
  border-radius: var(--kb-radius);
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
}

.kb-btn-primary {
  background: var(--kb-main);
  color: var(--kb-white);
}

.kb-btn-primary:hover {
  background: var(--kb-main-600);
}

.kb-btn-outline {
  background: var(--kb-white);
  border: 1px solid var(--kb-main);
  color: var(--kb-main-600);
}

.kb-btn-outline:hover {
  background: var(--kb-main-50);
}

/* 헤더 로그인 — 작은 고스트 버튼 (시안 60x32) */
.kb-btn-ghost {
  height: 32px;
  padding: 0 14px;
  background: var(--kb-white);
  border: 1px solid var(--kb-gray-300);
  color: var(--kb-gray-600);
  font-size: 0.75rem;
  font-weight: 500;
}

.kb-btn-ghost:hover {
  border-color: var(--kb-gray-500);
}

/* ---------------------------------------------------------------
   섹션 (여백 · eyebrow · 제목 · 더보기)
   --------------------------------------------------------------- */
.kb-section {
  padding: 30px 0;
}

.kb-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}

.kb-eyebrow {
  color: var(--kb-gray-700);
  font-size: 0.75rem;
  font-weight: 500;
  margin-bottom: 4px;
}

.kb-section-title {
  color: var(--kb-gray-900);
  font-size: 1.125rem;
  font-weight: 700;
}

.kb-section-sub {
  color: var(--kb-gray-500);
  font-size: 0.75rem;
  font-weight: 500;
  margin-top: 8px;
}

/* 더보기 — 아이콘은 좌향 화살표 SVG 를 뒤집어 쓴다 (시안 icon-arrow-right) */
.kb-more {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: none;
  color: var(--kb-gray-600);
  font-size: 0.875rem;
  font-weight: 600;
  white-space: nowrap;
}

.kb-more::after {
  content: "";
  width: 10px;
  height: 10px;
  background: currentColor;
  transform: scaleX(-1);
  -webkit-mask: url("../img/main/icon/arrow-left.svg") center / contain no-repeat;
  mask: url("../img/main/icon/arrow-left.svg") center / contain no-repeat;
}

/* ---------------------------------------------------------------
   칩 (카테고리 필터) · 뱃지 (병원 지원 언어)
   --------------------------------------------------------------- */
.kb-chip-row {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
}

.kb-chip-row::-webkit-scrollbar {
  display: none;
}

.kb-chip {
  flex: none;
  padding: 10px 16px;
  border: 1px solid var(--kb-gray-300);
  border-radius: 100px;
  background: var(--kb-gray-50);
  color: var(--kb-gray-800);
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
}

.kb-chip[aria-pressed="true"] {
  background: var(--kb-gray-800);
  border-color: var(--kb-gray-700);
  color: var(--kb-white);
}

/* ---------------------------------------------------------------
   시술 카드 매소너리 — C1 시술 섹션 · C2 시술 탐색 공용.
   width 는 열이 고정하고 높이는 원본 비율을 따른다 (CSS columns).
   카드 전체가 상세(/treatments/{id})로 가는 링크다.
   --------------------------------------------------------------- */
.kb-treatment-grid {
  columns: 2;
  column-gap: 11px;
  margin-top: 12px;
}

.kb-treatment-card {
  display: block;
  position: relative;
  break-inside: avoid;
  margin-bottom: 12px;
  border-radius: var(--kb-radius);
  overflow: hidden;
  background: var(--kb-gray-50);
}

.kb-treatment-card img {
  width: 100%;
  height: auto;
}

/* 이미지 미등록 시술 — 플레이스홀더는 비율이 없어 카드가 납작해진다 */
.kb-treatment-card img.is-placeholder {
  aspect-ratio: 175 / 250;
  object-fit: cover;
}

/* 캡션은 이미지 아래가 아니라 이미지 위 오버레이 + 스크림 (시안) */
.kb-treatment-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px;
  background: var(--kb-caption-scrim);
}

.kb-treatment-name {
  color: var(--kb-white);
  font-size: 0.875rem;
  font-weight: 700;
}

.kb-treatment-desc {
  color: var(--kb-gray-300);
  font-size: 0.75rem;
  font-weight: 500;
}

/* 카드는 display:block 이라 UA 의 [hidden] 규칙이 밀린다 — 명시적으로 숨긴다 */
.kb-treatment-card[hidden] {
  display: none;
}

/* 필터로 남는 시술이 없을 때 */
.kb-treatment-empty {
  color: var(--kb-gray-500);
  font-size: 0.875rem;
  padding: 24px 0;
}

.kb-badge-lang {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 4px;
  border-radius: 4px;
  background: var(--kb-lang-badge);
  color: var(--kb-white);
  font-size: 0.6875rem;
  font-weight: 500;
  line-height: 1.3;
  white-space: nowrap;
}

/* ---------------------------------------------------------------
   푸터
   --------------------------------------------------------------- */
.kb-footer {
  padding: 40px 0 32px;
  background: var(--kb-white);
  /* 모바일 플로팅 하단 내비에 가리지 않게 */
  margin-bottom: var(--kb-bottomnav-height);
}

.kb-footer-top {
  display: flex;
  flex-direction: column;
  gap: 27px;
}

.kb-footer-logo img {
  height: 24px;
  width: auto;
}

.kb-footer-cols {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  max-width: 436px;
}

.kb-footer-col h2 {
  color: var(--kb-gray-800);
  font-size: 0.8125rem;
  font-weight: 600;
  margin-bottom: 14px;
}

.kb-footer-col li + li {
  margin-top: 10px;
}

.kb-footer-col a {
  color: var(--kb-gray-500);
  font-size: 0.8125rem;
  font-weight: 500;
}

.kb-footer-policy {
  display: flex;
  gap: 18px;
  margin-top: 24px;
}

.kb-footer-policy a {
  color: var(--kb-gray-800);
  font-size: 0.8125rem;
  font-weight: 500;
  text-decoration: underline;
}

.kb-footer-disclaimer {
  margin-top: 27px;
  color: var(--kb-gray-500);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.5;
}

/* ---------------------------------------------------------------
   모바일 플로팅 하단 내비 (홈 · 시술 · 프로그램 · 마이뷰티)
   스크롤해도 화면 하단에 고정된다 (요구사항)
   --------------------------------------------------------------- */
.kb-bottomnav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 0 8px;
  background: var(--kb-white);
  border-top: 1px solid var(--kb-gray-300);
  box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.05);
  padding-bottom: calc(8px + env(safe-area-inset-bottom));
}

.kb-bottomnav a {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  color: var(--kb-gray-500);
  font-size: 0.6875rem;
  font-weight: 500;
}

.kb-bottomnav a.is-current {
  color: var(--kb-gray-800);
}

/* 아이콘은 인라인 24x24 SVG — 회색 본선이 currentColor 라서 활성/비활성이 자동 반영된다.
   민트 포인트 선은 두 상태 모두 유지되므로 SVG 안에 색을 고정해 뒀다 (시안).
   면(fill)은 활성 메뉴에만 들어간다 */
.kb-bottomnav svg {
  width: 24px;
  height: 24px;
  overflow: visible;
}

.kb-bottomnav a:not(.is-current) .kb-nav-fill {
  display: none;
}

/* ---------------------------------------------------------------
   플로팅 「컨시어지 상담」 버튼 — C2 탐색·C3 상세 (모바일·태블릿).
   하단 내비 위 16px 에 뜬다. 데스크탑은 화면 안 CTA 를 쓰므로 숨긴다.
   --------------------------------------------------------------- */
.kb-consult-fab {
  position: fixed;
  right: 16px;
  bottom: calc(var(--kb-bottomnav-height) + 16px + env(safe-area-inset-bottom));
  z-index: 45; /* 하단 내비(50)보다는 아래, 본문 위 */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 56px;
  padding: 0 28px;
  border: 0;
  border-radius: 100px;
  background: var(--kb-main);
  color: var(--kb-white);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  filter: drop-shadow(0 3px 2px rgba(0, 0, 0, 0.2));
}

.kb-consult-fab::before {
  content: "";
  width: 24px;
  height: 24px;
  background: currentColor;
  -webkit-mask: url("../img/treatment/icon/icon-talk.svg") center / contain no-repeat;
  mask: url("../img/treatment/icon/icon-talk.svg") center / contain no-repeat;
}

.kb-consult-fab:hover {
  background: var(--kb-main-600);
}

/* ---------------------------------------------------------------
   반응형
   --------------------------------------------------------------- */
@media (min-width: 560px) {
  .kb-section {
    padding: 40px 0;
  }

  .kb-treatment-grid {
    columns: 3;
    column-gap: 16px;
  }
}

@media (min-width: 1100px) {
  :root {
    --kb-frame-pad: 44px;
  }

  .kb-header {
    background: var(--kb-white);
    border-bottom-color: var(--kb-gray-300);
  }

  .kb-header-inner {
    justify-content: space-between;
    height: 70px;
  }

  .kb-logo img {
    height: 22px;
  }

  .kb-gnb,
  .kb-header-actions {
    display: flex;
  }

  .kb-section-title {
    font-size: 1.25rem;
  }

  .kb-treatment-grid {
    columns: 4;
    column-gap: 20px;
    margin-top: 12px;
  }

  .kb-treatment-card {
    margin-bottom: 20px;
  }

  .kb-bottomnav,
  .kb-consult-fab {
    display: none; /* 데스크탑은 헤더 GNB · 화면 안 CTA 사용 */
  }

  .kb-footer {
    padding: 50px 0 70px;
    margin-bottom: 0;
  }

  .kb-footer-top {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: 48px;
  }

  .kb-footer-logo img {
    height: 30px;
  }

  .kb-footer-side {
    width: 436px;
    flex: none;
  }

  .kb-footer-cols {
    max-width: none;
  }

  .kb-footer-policy {
    margin-top: 47px;
  }

  .kb-footer-disclaimer {
    margin-top: 27px;
  }
}