/*
  tokens.css
  싱크대교체 (sinkchange.korhomecrafty.com) 디자인 토큰
  출처: MASTER_PROMPT_싱크대교체_디자인가이드.md §1(컬러) §2(타이포) §3(간격/레이아웃) §4(마감선 시그니처) §5(클릭/터치)
  전 페이지가 이 파일 하나를 참조한다. 색상·폰트·간격을 페이지에서 재정의하지 않는다.
*/

/* Pretendard Variable — 로컬 폰트 파일 (/assets/fonts/PretendardVariable.woff2), 외부 CDN 미사용 */
@font-face{
  font-family: "Pretendard Variable";
  src: url("/assets/fonts/PretendardVariable.woff2") format("woff2-variations"),
       url("/assets/fonts/PretendardVariable.woff2") format("woff2");
  font-weight: 45 920;
  font-style: normal;
  font-display: swap;
}

/* ==========================================================================
   §1 컬러 토큰
   ========================================================================== */
:root{
  /* 면 */
  --paper: hsl(36 30% 97.5%);      /* 페이지 배경 — 무광 도어 웜 화이트 */
  --card: hsl(0 0% 100%);          /* 카드 면 */
  --white: hsl(0 0% 100%);         /* 어두운 배경 위 텍스트/아이콘 전용 */
  --mist: hsl(30 18% 94%);         /* 교차 섹션 배경 */
  --line: hsl(30 14% 87%);         /* 기본 구획선 1px */
  --line-2: hsl(30 12% 79%);       /* 강조 구획선 */

  /* 글자 */
  --ink: hsl(24 22% 14%);          /* 본문·제목 (대비 14:1) */
  --ink-2: hsl(24 10% 40%);        /* 보조 설명 (대비 8:1) */
  --ink-3: hsl(24 8% 55%);         /* 캡션 — 15px 이상에만 */

  /* 주색 — 우드 브라운 */
  --wood: hsl(24 46% 27%);         /* 주 버튼 면색, 링크 텍스트 (흰 글자 대비 9.5:1) */
  --wood-deep: hsl(24 50% 19%);    /* :active, 다크 밴드 배경 */
  --wood-soft: hsl(24 40% 94%);    /* 칩 배경, 강조 블록 배경 */

  /* 보조 — 클레이 (선·아이콘 전용) */
  --clay: hsl(24 58% 44%);         /* 아이콘 스트로크, 카드 상단 라인. 17px 미만 텍스트 금지 */

  /* 보조 — 올리브 (확인·완료 표시 전용) */
  --olive: hsl(96 16% 33%);

  /* 강조 — 로즈 (사이트 전체에서 단 한 곳: `/` 히어로 "무료 견적 상담" 배지) */
  --rose: hsl(340 32% 42%);

  /* 그림자 */
  --sh-1: 0 1px 2px hsl(24 25% 15% / .05);
  --sh-2: 0 10px 30px -14px hsl(24 25% 15% / .20);

  --r: 6px;         /* 라운드 단일 값 */
  --r-chip: 4px;

  /* 폰트 */
  --font-sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
}

/* ==========================================================================
   §2 타이포그래피 + 기본 리셋
   ========================================================================== */
*, *::before, *::after{ box-sizing: border-box; }

html{ -webkit-text-size-adjust: 100%; }

body{
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 17px;                 /* 데스크톱 18px는 §3 컨테이너 미디어쿼리에서 */
  line-height: 1.85;
  color: var(--ink);
  background: var(--paper);
  word-break: keep-all;
  overflow-wrap: break-word;
}

@media (min-width: 1024px){
  body{ font-size: 18px; }
}

h1, h2, h3{
  margin: 0;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.35;
  color: var(--ink);
}

h1{
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.22;
  font-size: clamp(30px, 6.4vw, 48px);
}

h2{ font-size: clamp(23px, 4.6vw, 34px); }
h3{ font-size: clamp(18px, 2.6vw, 21px); }

p{ margin: 0 0 16px; max-width: 680px; }
p:last-child{ margin-bottom: 0; }

@media (min-width: 1024px){
  p{ margin-bottom: 18px; }
}

.lead{
  font-size: clamp(17px, 2.4vw, 20px);
  line-height: 1.75;
}

.caption{ font-size: 15px; }       /* 하한선 — 이 값 미만 텍스트 금지 (.eyebrow 예외) */

.eyebrow{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--wood);
  font-weight: 600;
  font-size: 13px;                 /* 유틸리티 라벨 전용 예외 */
  letter-spacing: .12em;
}
.eyebrow::before{
  content: "";
  width: 24px;
  height: 2px;
  background: var(--clay);
  flex: none;
}

strong{ font-weight: 600; }

/* ==========================================================================
   §3 간격 · 레이아웃
   ========================================================================== */
.container{
  max-width: 1180px;
  margin-inline: auto;
  padding-inline: 20px;
}
@media (min-width: 768px){
  .container{ padding-inline: 32px; }
}

.section{
  padding-block: 60px;
  border-top: 1px solid var(--line);
}
@media (min-width: 768px){
  .section{ padding-block: 100px; }
}

.section--mist{ background: var(--mist); }

.card{
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 20px;
}
@media (min-width: 768px){
  .card{ padding: 28px; }
}

.grid{
  display: grid;
  gap: 14px;
  grid-template-columns: 1fr;
}
@media (min-width: 768px){
  .grid{ gap: 20px; grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px){
  .grid--3{ grid-template-columns: repeat(3, 1fr); }
}
/* 4열 이상 금지 (터치 대상 축소 방지) */

/* ==========================================================================
   §4 시그니처 — 마감선 시스템
   금지: 아래 네 곳 외에 장식용 선·도형·패턴을 추가하지 않는다.
   ========================================================================== */
.card{
  border-top: 3px solid var(--line-2);
  transition: border-top-color .18s ease-out, transform .18s ease-out;
}
.card:hover,
.card:focus-within,
.card:active{
  border-top-color: var(--clay);
  transform: translateY(-2px);
}

.ba-pair{
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  gap: 0;
}
.ba-pair > div{ min-width: 0; }
.ba-divider{ background: var(--line-2); }

.site-header{ border-bottom: 1px solid var(--line); }
.site-header.is-scrolled{ border-bottom-color: var(--line-2); }

/* ==========================================================================
   §5 클릭 · 터치 설계
   ========================================================================== */
a, button{ font-family: inherit; }

.btn-primary{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: 0 28px;
  border-radius: var(--r);
  background: var(--wood);
  color: var(--white);
  font-weight: 700;
  font-size: 17px;
  border: 1px solid var(--wood);
  box-shadow: var(--sh-1);
  text-decoration: none;
  cursor: pointer;
}
.btn-primary:active{
  background: var(--wood-deep);
  transform: translateY(1px);
}

.btn-ghost{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: 0 26px;
  border-radius: var(--r);
  background: var(--card);
  color: var(--wood);
  font-weight: 700;
  font-size: 17px;
  border: 1.5px solid var(--line-2);
  text-decoration: none;
  cursor: pointer;
}
.btn-ghost:active{
  border-color: var(--wood);
  background: var(--wood-soft);
}

.btn-secondary{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 20px;
  border-radius: var(--r);
  font-weight: 600;
  font-size: 16px;
  text-decoration: none;
  cursor: pointer;
}

:where(a, button, summary):focus-visible{
  outline: 3px solid var(--clay);
  outline-offset: 3px;
  border-radius: var(--r);
}

/* 모든 탭 대상 최소 48×48px, 인접 간격 8px 이상 — 개별 컴포넌트 CSS에서 준수 */