/* ============================================================
   20. 공통 부품 (버튼 · 헤더 · 카드 · 폼 · 플로팅 · 푸터)
   ------------------------------------------------------------
   5개 업체가 전부 같은 이 파일을 씁니다.
   업체별 차이는 오직 토큰(01~03)에서만 생깁니다.
   ============================================================ */

/* ─────────── 버튼 ─────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: var(--btn-h);
  padding-inline: var(--btn-px);
  /* ★ 당근 버튼은 알약이 아니라 6px 둥근 사각형입니다 */
  border-radius: var(--radius-btn);
  font-size: var(--btn-fs);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);   /* 당근은 버튼 글씨도 1.35 */
  white-space: nowrap;
  /* ★ 자리를 옮기는 것(transform)만 튕기는 곡선을 씁니다.
     색까지 튕기게 하면 색이 넘어갔다 돌아와 번쩍입니다. */
  transition: transform var(--dur-fast) var(--ease-spring),
              background-color var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease);
}
.btn:hover { transform: translateY(var(--lift)); }
/* ★★ 누르는 순간 살짝 오그라듭니다. 이 사이트 "쫀득함"의 핵심입니다.
   ★ 시간이 --dur-instant(0.12초)인 이유 : 누른 느낌은 손가락보다 빨라야
     "내가 눌러서 반응했다"고 인식됩니다. 조금만 늦어도 먹통처럼 느껴집니다.
   ★ 손 떼면 위의 튕기는 곡선을 타고 원래 크기로 톡 돌아옵니다.
   ★ 손가락에서도 그대로 동작합니다(:active 는 터치에도 적용됩니다). */
.btn:active {
  transform: translateY(0) scale(var(--press));
  transition-duration: var(--dur-instant);
}

/* 당근 대표 주황(#ff6600) 채움. 글자는 진하게 (대비 5.8:1). 그림자는 쓰지 않습니다. */
.btn--primary {
  background: var(--brand-500);
  color: var(--on-brand);
}
.btn--primary:hover { background: var(--brand-600); }

.btn--accent {
  background: var(--accent-500);
  color: var(--on-accent);
  box-shadow: var(--shadow-2);
}
.btn--accent:hover { background: var(--accent-600); box-shadow: var(--shadow-3); }

/* 보조 버튼 — 당근의 연회색 버튼 */
.btn--ghost {
  background: var(--surface-alt);
  color: var(--ink-900);
  border: var(--border-w) solid var(--line);
}
.btn--ghost:hover { background: var(--line); }

.btn--sm    { height: var(--btn-h-sm); font-size: var(--btn-fs-sm); padding-inline: var(--space-5); }
.btn--block { display: flex; width: 100%; }

/* ─────────── 뱃지 ─────────── */
/* 당근의 작은 태그 — 실측: 12px / 4px 둥글기 / 높이 24px / 연회색 */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  height: 26px;
  padding-inline: var(--space-3);
  border-radius: var(--radius-tag);
  background: var(--surface-alt);
  color: var(--ink-500);
  font-size: var(--fs-tag);
  font-weight: var(--fw-medium);
}
/* ★ 태그는 흰 배경 위에 쓰라고 만든 연회색입니다.
   연회색 섹션(--alt) 위에 그대로 두면 배경과 같은 색이라 사라집니다. 뒤집어 줍니다. */
.section--alt .badge { background: var(--surface); }

.badge--brand  { background: var(--brand-50); color: var(--brand-ink); font-weight: var(--fw-bold); }
.badge--accent { background: var(--accent-50); color: var(--accent-600); }
.badge--solid  { background: var(--brand-500); color: var(--on-brand); }

/* ─────────── 아이콘 ───────────
   ★ 이모지를 쓰지 않습니다.
     이모지는 기기마다 모양이 달라 디자인이 무너지고 흐릿하게 보입니다.
     당근처럼 단색 채움(filled) SVG 를 씁니다. */
.ico {
  width: 1em;
  height: 1em;
  flex: none;
  fill: currentColor;
}
/* 버튼 안 아이콘은 작아서 2톤이 탁해 보입니다. 단색으로 바꿉니다.
   (사용자 정의 속성은 use 의 그림자 트리 안까지 상속됩니다) */
.btn .ico {
  width: 1.1em;
  height: 1.1em;
  --ico-bg-opacity: 1;
}

/* 아이콘 상자 — 확정 방식: 가①(채움형) + 나①(흰 상자 + 컬러 아이콘)
   당근비즈니스 "비즈니스 도구" 섹션과 같은 방식. 실측 48px / 둥글기 10px. */
.ico-box {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  flex: none;
  border-radius: 10px;
  background: var(--surface);
  /* 당근은 그림자를 안 씁니다. 흰 상자는 얇은 선으로만 구분합니다. */
  border: var(--border-w) solid var(--line);
  color: var(--ico-1);
  font-size: 26px;
}
/* 항목마다 색을 달리해 구분 — 전부 당근 팔레트, 흰 배경 3:1 이상 */
.ico-box--1 { color: var(--ico-1); }
.ico-box--2 { color: var(--ico-2); }
.ico-box--3 { color: var(--ico-3); }
.ico-box--4 { color: var(--ico-4); }
.ico-box--5 { color: var(--ico-5); }
.ico-box--6 { color: var(--ico-6); }

/* ─────────── 헤더 ─────────── */
.header {
  position: fixed;
  inset: 0 0 auto 0;
  height: var(--header-h);
  background: var(--surface);
  border-bottom: var(--border-w) solid var(--line);
  z-index: 1000;
  transition: transform var(--dur-base) var(--ease-out);
}
/* ★ 아래로 읽어 내려갈 때는 상단바가 비켜줍니다 (js/site.js 가 붙입니다).
   ★ 위로 조금이라도 올리면 곧바로 다시 내려옵니다.
     "찾으려고 위로 올린다"는 뜻이니 그때는 있어야 합니다.
   ★ 모바일에서 특히 큰 차이가 납니다. 세로 60px 을 읽는 데 돌려줍니다. */
.header.is-tucked { transform: translateY(-100%); }
/* 모바일 메뉴가 열려 있으면 절대 숨지 않습니다. 닫을 X 버튼이 거기 있습니다. */
.header.is-menu-open { transform: none; }
.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-x);
}
.header__logo img { height: var(--logo-h); width: auto; }

.nav__list { display: flex; gap: var(--nav-gap); }
.nav__list a {
  position: relative;
  font-size: var(--nav-fs);
  font-weight: var(--fw-bold);
  color: var(--ink-700);
  transition: color var(--dur-fast) var(--ease);
}
.nav__list a:hover,
.nav__list a[aria-current="page"] { color: var(--brand-ink); }
/* 메뉴 밑줄이 가운데에서 양쪽으로 자라납니다.
   ★ scaleX 로 늘립니다. width 를 바꾸면 글자 배치를 매번 다시 계산해서
     버벅입니다. scaleX 는 화면에 그리기만 하므로 매끄럽습니다.
   ★ 현재 페이지 메뉴는 처음부터 펴져 있습니다. */
.nav__list a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -6px;
  height: 2px;
  border-radius: 2px;
  background: var(--brand-500);
  transform: scaleX(0);
  transition: transform var(--dur-base) var(--ease-spring);
}
.nav__list a:hover::after,
.nav__list a[aria-current="page"]::after { transform: scaleX(1); }

.nav__close, .header__mobile { display: none; }

/* 모바일: 햄버거 없이 '인라인 목차 메뉴' (우상단, 좁으면 가로로 넘겨봄) */
@media (max-width: 768px) {
  .header__inner { gap: var(--space-3); }
  .nav { min-width: 0; }                       /* 로고 옆에서 줄어들 수 있게 */
  .nav__list {
    flex-direction: row;
    justify-content: flex-end;
    gap: var(--space-4);
    overflow-x: auto;                          /* 아주 좁은 화면이면 가로 스크롤 */
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .nav__list::-webkit-scrollbar { display: none; }
  .nav__list a {
    flex: none;
    font-size: var(--fs-sm);
    white-space: nowrap;
  }
  /* 인라인에선 가운데서 자라는 밑줄이 답답하므로 끕니다 */
  .nav__list a::after { display: none; }
}

/* ─────────── 카드 ─────────── */
.card {
  background: var(--surface);
  border: var(--border-w) solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--card-p);
  text-align: left;      /* 가이드 1-4: 카드 안 설명글은 왼쪽 정렬 */
  box-shadow: var(--shadow-1);
  /* 카드는 버튼보다 큰 덩어리라 조금 느긋하게 움직입니다 */
  transition: transform var(--dur-base) var(--ease-spring),
              border-color var(--dur-fast) var(--ease),
              box-shadow var(--dur-base) var(--ease);
}
.card--hover:hover {
  transform: translateY(var(--lift));
  border-color: var(--line-strong);
  box-shadow: var(--shadow-2);
}
.card--hover:active {
  transform: translateY(0) scale(var(--press));
  transition-duration: var(--dur-instant);
}

.card__icon {
  display: grid;
  place-items: center;
  width: 56px; height: 56px;
  margin-bottom: var(--space-5);
  border-radius: var(--radius-md);
  background: var(--brand-50);
  color: var(--brand-ink);
  font-size: 24px;
}
.card__title { margin-bottom: var(--space-3); }
.card__text  { color: var(--ink-500); font-size: var(--fs-sm); }

/* ─────────── 폼 ─────────── */
.field { margin-bottom: var(--space-5); }
.field__label {
  display: block;
  margin-bottom: var(--space-2);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--ink-700);
}
.field__input,
.field__select,
.field__textarea {
  width: 100%;
  min-height: var(--btn-h);
  padding: var(--space-3) var(--space-4);
  background: var(--surface);
  border: var(--border-w) solid var(--line);
  border-radius: var(--radius-sm);
  font-size: var(--fs-body);
  transition: border-color var(--dur-fast) var(--ease);
}
.field__input:focus,
.field__select:focus,
.field__textarea:focus { border-color: var(--brand-500); outline: none; }
.field__textarea { min-height: 130px; resize: vertical; }
.field__help  { margin-top: var(--space-2); font-size: var(--fs-xs); color: var(--ink-500); }
.field__error { margin-top: var(--space-2); font-size: var(--fs-xs); color: var(--danger); }

/* ─────────── 아코디언 (FAQ) ─────────── */
.accordion__item {
  border-bottom: var(--border-w) solid var(--line);
}
.accordion__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  width: 100%;
  padding: var(--space-6) 0;
  text-align: left;
  font-size: var(--fs-h4);
  font-weight: var(--fw-bold);
  color: var(--ink-900);
}
.accordion__q::after {
  content: "＋";
  color: var(--brand-ink);
  /* 45도까지 갔다가 살짝 지나쳐 되돌아옵니다. 돌리는 손맛이 납니다. */
  transition: transform var(--dur-base) var(--ease-spring);
}
.accordion__item.is-open .accordion__q::after { transform: rotate(45deg); }
/* 질문 줄 전체가 버튼입니다. 눌리는 게 보여야 "먹었다"는 걸 압니다.
   ★ 줄 전체를 오그라뜨리면 글자가 흔들려 읽기 나쁩니다.
     그래서 + 기호만 살짝 오그라뜨립니다. */
.accordion__q:active::after {
  transform: scale(.85);
  transition-duration: var(--dur-instant);
}
.accordion__item.is-open .accordion__q:active::after { transform: rotate(45deg) scale(.85); }

.accordion__a {
  display: grid;
  grid-template-rows: 0fr;
  visibility: hidden;   /* 접힌 내용을 접근성 트리에서 제외 (WCAG 4.1.2) */
  transition: grid-template-rows var(--dur-base) var(--ease),
              visibility var(--dur-base) var(--ease);
  color: var(--ink-500);
}
.accordion__item.is-open .accordion__a {
  grid-template-rows: 1fr;
  visibility: visible;
}
.accordion__a > div { overflow: hidden; }
.accordion__item.is-open .accordion__a > div { padding-bottom: var(--space-6); }

/* ─────────── 화면을 따라다니는 상담 띠 ───────────
   ★★ 화면에 "떠 있는" 상담 버튼은 이것 하나뿐입니다.
     예전에는 떠 있는 버튼이 세 군데였습니다.
       ① 히어로 안 버튼 두 개
       ② 오른쪽 아래 떠다니는 동그란 카톡 버튼
       ③ 모바일에만 나오던 하단 띠
     화면만 복잡해서 ①②를 없애고 ③을 PC까지 넓혔습니다.
   ★ 히어로에 같은 버튼을 다시 넣지 마세요. 화면에 네 개가 됩니다.
     (페이지 맨 끝 .d-band 안내 구역의 버튼은 글 흐름 속에 있는 것이라 별개입니다)
   ★ 항상 화면에 붙어 있어 스크롤 위치와 상관없이 언제든 누를 수 있습니다. */
.site-cta {
  position: fixed;
  inset: auto 0 0 0;
  display: flex;
  justify-content: center;
  gap: var(--space-3);
  /* env(safe-area-inset-bottom) = 아이폰 아래쪽 홈 막대가 차지하는 높이.
     이걸 빼면 홈 막대가 버튼을 덮어 눌리지 않습니다. */
  padding: var(--space-3) var(--container-x)
           calc(var(--space-3) + env(safe-area-inset-bottom));
  background: var(--surface);
  /* 당근은 그림자를 안 씁니다. 위쪽 얇은 선으로만 경계를 만듭니다. */
  border-top: var(--border-w) solid var(--line-strong);
  z-index: 950;
}

/* ─────────── 상담 띠 버튼 (아이콘 + 제목 + 부제 2줄형) ───────────
   ★ 왼쪽 카톡(카카오 노랑) · 오른쪽 전화(우리 브랜드 주황).
   ★ .btn 을 안 쓰고 따로 만든 이유 : .btn 은 한 줄 높이(54~58px)로 고정이라
     제목+부제 두 줄이 안 들어갑니다. */
.cta-btn {
  display: flex;
  align-items: center;
  justify-content: center;      /* 아이콘 + 글자를 버튼 가운데로 */
  gap: var(--space-2);
  flex: 1;
  /* 넓은 화면에서 끝까지 늘어나지 않게. 320px 두 개 + 간격이 딱 보기 좋습니다. */
  max-width: 320px;
  /* 한 줄 버튼. 아이콘 30 + 위아래 여백 14×2 ≒ 58px. 손가락이 넉넉히 닿습니다. */
  padding: var(--space-4) var(--space-4);
  border-radius: var(--radius-btn);
  transition: transform var(--dur-fast) var(--ease-spring),
              filter var(--dur-fast) var(--ease);
}
.cta-btn:hover  { transform: translateY(var(--lift)); filter: brightness(.97); }
.cta-btn:active { transform: scale(var(--press)); transition-duration: var(--dur-instant); }

/* 아이콘 자리 — 배지(원) 없이 아이콘만. */
.cta-btn__ico {
  flex: none;
  display: grid;
  place-items: center;
}
/* 카톡 : 업체가 준 TALK png (스스로 완결된 말풍선). */
.cta-btn__png { width: 30px; height: 30px; object-fit: contain; display: block; }
/* 전화 : 흰 수화기만. 원 배지 없음.
   ★★ #phone 은 "바탕 원 + 앞면 수화기" 2톤입니다. 바탕 원을 그대로 두면
     흰 동그라미 덩어리로 보입니다. --ico-bg-opacity:0 으로 바탕을 숨겨
     수화기 하나만 흰색으로 남깁니다. */
.cta-btn--phone .cta-btn__ico .ico {
  /* #phone 은 '바탕 원 + 앞면 수화기' 2톤인데 원을 숨기므로, 실제 보이는 수화기는
     아이콘 박스의 절반 정도입니다. 그래서 박스를 키워 수화기를 카톡 아이콘만큼 키웁니다. */
  width: 36px;
  height: 36px;
  color: var(--gray-00);
  --ico-bg-opacity: 0;
}

/* 버튼 글자 (한 줄). */
.cta-btn__label { font-size: var(--fs-body); font-weight: var(--fw-bold); white-space: nowrap; }

/* 카톡 : 카카오 노랑 + 먹색 글씨 (대비 14:1). */
.cta-btn--kakao { background: var(--kakao-bg); color: var(--kakao-ink); }
/* 전화 : 우리 브랜드 주황 + 흰 글씨. */
.cta-btn--phone { background: var(--brand-500); color: var(--gray-00); }

/* 띠에 가려 페이지 마지막 줄이 안 보이는 것을 막습니다 (PC·모바일 모두). */
body { padding-bottom: calc(60px + var(--space-10)); }

@media (max-width: 768px) {
  .site-cta { gap: var(--space-2); }
  .cta-btn  { max-width: none; }
}
@media (max-width: 360px) {
  /* 아주 좁은 화면 : 아이콘·글자를 한 단계 줄입니다 */
  .cta-btn__png { width: 26px; height: 26px; }
  .cta-btn--phone .cta-btn__ico .ico { width: 31px; height: 31px; }
  .cta-btn__label { font-size: var(--fs-sm); }
}

/* ─────────── 푸터 ─────────── */
.footer {
  background: var(--footer-bg);
  color: var(--on-dark-mid);
  padding-block: var(--space-16) var(--space-10);
  font-size: var(--fs-sm);
}
.footer__logo img { height: var(--logo-h); margin-bottom: var(--space-6); }
.footer__info {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4) var(--space-10);
  margin-bottom: var(--space-6);
}
.footer__notice {
  padding-top: var(--space-6);
  border-top: var(--border-w) solid var(--on-dark-line);
  font-size: var(--fs-xs);
  line-height: var(--lh-normal);
  color: var(--on-dark-weak);
}
.footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  margin-top: var(--space-4);
}
/* 푸터 링크도 터치 대상 — 세로 여백으로 44px 확보 */
.footer__links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.footer__links a:hover { color: var(--ink-invert); }
.footer__copy {
  margin-top: var(--space-6);
  font-size: var(--fs-xs);
  color: var(--on-dark-weak);
}