/* ==========================================================================
   tokens.css — 문찍힘수리 (doordent.korhomepro.com)
   §1 색상 · §2 타이포 · §3 간격 · §4 시그니처 · §5 버튼/터치
   하드코딩 #hex / rgb() 0건. 그라디언트 0건. --amber 텍스트 색 사용 금지.
   ========================================================================== */

/* --------------------------------------------------------------------------
   §1 색상 토큰
   Base 14(벽돌) / 보조 44(앰버) / 강조 108(모스) — 모두 185~265° 밖
   -------------------------------------------------------------------------- */
:root {
  /* 면 — 무광 도장면 */
  --paper:    hsl(30 22% 97%);       /* 페이지 배경 */
  --card:     hsl(0 0% 100%);        /* 카드 면 */
  --mist:     hsl(24 16% 93.5%);     /* 교차 섹션 배경 (최대 3개 섹션) */
  --line:     hsl(24 12% 86%);       /* 보더 1px */
  --line-2:   hsl(24 10% 76%);       /* 강조 보더 */

  /* 글자 */
  --ink:      hsl(14 16% 13%);       /* 본문·제목 (대비 15:1) */
  --ink-2:    hsl(14  9% 39%);       /* 보조 설명 (대비 8:1) */
  --ink-3:    hsl(14  7% 54%);       /* 캡션 — 15px 이상에만 */

  /* Base 14 — 주색, 벽돌 */
  --brick:      hsl(14 54% 40%);     /* 주 버튼 면색, 링크 (흰 글자 6.5:1) */
  --brick-deep: hsl(14 46% 24%);     /* :active, /nseo-5 CTA, 푸터 */
  --brick-soft: hsl(14 44% 95%);     /* 칩·강조 블록 배경 */

  /* 보조 44 — 앰버 (텍스트 색 사용 금지, 8px 정사각형·3px 라인·아이콘 stroke만) */
  --amber:      hsl(44 62% 46%);
  --amber-soft: hsl(44 56% 94%);     /* 고지 블록 배경 */

  /* 강조 108 — 모스 (시공 후 라벨·체크 아이콘 전용) */
  --moss:       hsl(108 22% 30%);    /* (대비 7:1) */
  --moss-soft:  hsl(108 24% 94%);

  /* 공통 */
  --r:      8px;
  --r-chip: 4px;

  /* 그림자 — .ba-card(전후 비교 카드) 한 곳에만 */
  --sh-lift: 0 12px 32px -16px hsl(14 30% 15% / .28);
}

/* --------------------------------------------------------------------------
   §2 타이포그래피
   Pretendard 단일 패밀리 — 굵기·자간·크기로 역할 분리
   -------------------------------------------------------------------------- */
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard-dynamic-subset.min.css");

html {
  font-size: 17px;                   /* 데스크톱 18px는 body 미디어쿼리로 조정 */
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: "Pretendard", "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  font-weight: 400;
  color: var(--ink);
  background: var(--paper);
  line-height: 1.85;
  word-break: keep-all;
  overflow-wrap: break-word;
}

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

/* 제목 */
h1 {
  font-size: clamp(29px, 6.2vw, 46px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.2;
  color: var(--ink);
}

h2 {
  font-size: clamp(22px, 4.4vw, 32px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.35;
  color: var(--ink);
}

h3 {
  font-size: clamp(18px, 2.6vw, 21px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.35;
  color: var(--ink);
}

/* 역할별 유틸 */
.lead {
  font-size: clamp(17px, 2.4vw, 19px);
  line-height: 1.75;
  color: var(--ink);
}

.caption {
  font-size: 15px;                   /* 하한 — 이 아래 사용 금지 (eyebrow 제외) */
  color: var(--ink-3);
}

.eyebrow {
  font-size: 13px;                   /* 유틸리티 라벨만 예외적으로 13px */
  font-weight: 600;
  letter-spacing: 0.1em;
}

/* 본문 텍스트 제약 */
p {
  max-width: 680px;
  margin-block-end: 16px;
}

@media (min-width: 768px) {
  p { margin-block-end: 18px; }
}

strong { font-weight: 600; }         /* 문단당 1회 이하 */

/* --------------------------------------------------------------------------
   §3 간격 · 레이아웃
   8px 그리드 — 모바일 1열 → 768px 2열 → 1024px 3열 (최대 3열)
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: 1180px;
  margin-inline: auto;
  padding-inline: 20px;
}

@media (min-width: 768px) {
  .container { padding-inline: 32px; }
}

.section {
  padding-block: 60px;
}

@media (min-width: 1024px) {
  .section { padding-block: 100px; }
}

/* 기본 그리드 (섹션 콘텐츠용) */
.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 { grid-template-columns: repeat(3, 1fr); }
}

/* 손상 유형 섹션 전용 4열 (§7) */
.grid--4col {
  display: grid;
  gap: 14px;
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .grid--4col { gap: 20px; grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .grid--4col { grid-template-columns: repeat(4, 1fr); }
}

/* --------------------------------------------------------------------------
   §4 시그니처 — 무광 면 시스템
   그림자: .ba-card 한 곳에만. 나머지는 면색 단차로 구분
   -------------------------------------------------------------------------- */

/* 섹션 에이브로우 — 8px 앰버 정사각형 */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--brick);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.1em;
}

.eyebrow::before {
  content: "";
  width: 8px;
  height: 8px;
  background: var(--amber);          /* 앰버는 면·선 전용 */
  flex: none;
}

/* 카드 — 그림자 없음, 면색·보더만 */
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 22px;
  box-shadow: none;
  transition:
    border-color 0.18s cubic-bezier(0.2, 0.6, 0.3, 1),
    background-color 0.18s cubic-bezier(0.2, 0.6, 0.3, 1);
}

@media (min-width: 768px) {
  .card { padding: 30px; }
}

.card:hover,
.card:focus-within,
.card:active {
  border-color: var(--brick);
  background: var(--brick-soft);
}

/* 전후 비교 카드 — 사이트 유일 입체 요소 */
.ba-card {
  box-shadow: var(--sh-lift);
  border-radius: var(--r);
  overflow: hidden;
}

/* 교차 섹션 배경 (최대 3개 섹션에 적용) */
.section--alt {
  background: var(--mist);
}

/* 고지 블록 (결과 단정 금지 대응 — 메인 2곳에만) */
.notice {
  background: var(--amber-soft);
  border-radius: var(--r-chip);
  padding: 14px 16px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink-2);
  border: none;
  box-shadow: none;
}

/* --------------------------------------------------------------------------
   §5 클릭 · 터치 설계
   최소 탭 대상 48×48px. 주·보조 CTA 높이 56px
   -------------------------------------------------------------------------- */

/* 주 CTA — 전화 상담 (--brick 면) */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: 0 28px;
  border-radius: var(--r);
  background: var(--brick);
  color: hsl(0 0% 100%);
  font-weight: 700;
  font-size: 17px;
  border: 1px solid var(--brick);
  box-shadow: none;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color 0.18s cubic-bezier(0.2, 0.6, 0.3, 1),
    transform 0.18s cubic-bezier(0.2, 0.6, 0.3, 1);
}

.btn-primary:active {
  background: var(--brick-deep);
  border-color: var(--brick-deep);
  transform: translateY(1px);
}

/* 보조 CTA — 문자 문의 (--card 면, 보더) */
.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(--brick);
  font-weight: 700;
  font-size: 17px;
  border: 1.5px solid var(--line-2);
  box-shadow: none;
  text-decoration: none;
  cursor: pointer;
  transition:
    border-color 0.18s cubic-bezier(0.2, 0.6, 0.3, 1),
    background-color 0.18s cubic-bezier(0.2, 0.6, 0.3, 1);
}

.btn-ghost:active {
  border-color: var(--brick);
  background: var(--brick-soft);
}

/* 포커스 링 — 모든 인터랙티브 요소 */
:where(a, button, summary):focus-visible {
  outline: 3px solid var(--amber);
  outline-offset: 3px;
  border-radius: var(--r);
}

/* 내비·탭 최소 터치 대상 */
nav a,
.tab-target {
  min-height: 48px;
  padding-inline: 16px;
  display: inline-flex;
  align-items: center;
}

/* 카드 전체 클릭 영역 보장 */
.card > a.card-link {
  display: block;
  text-decoration: none;
  color: inherit;
}

/* 링크 — 색만으로 구분하지 않음 (밑줄 또는 화살표 병기) */
a {
  color: var(--brick);
  text-decoration: underline;
  text-underline-offset: 3px;
}

a:active { color: var(--brick-deep); }

/* 모바일 하단 고정 CTA 바 */
.cta-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  height: 64px;
  padding-bottom: env(safe-area-inset-bottom);
  border-top: 1px solid var(--line-2);
  background: var(--card);
  box-shadow: none;
  z-index: 100;
}

@media (min-width: 768px) {
  .cta-bar { display: none; }
}

/* 하단 바가 푸터를 가리지 않도록 */
body { padding-bottom: 76px; }

@media (min-width: 768px) {
  body { padding-bottom: 0; }
}

/* --------------------------------------------------------------------------
   공통 모션
   transform·opacity만. prefers-reduced-motion 필수
   -------------------------------------------------------------------------- */
* {
  transition-duration: 0.18s;
  transition-timing-function: cubic-bezier(0.2, 0.6, 0.3, 1);
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}