@charset "UTF-8";
/* ==========================================================================
   만정누수 — Design System "Calm Authority"
   컨셉: 급한 상황의 고객에게 '차분한 신뢰'와 '즉각적 행동'을 동시에.
   구리(copper)를 배관·금속의 재료색으로 사용하고, 중성색을 따뜻하게 잡아
   현장 시공 사진이 칙칙하지 않고 의도적으로 보이게 한다.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design tokens
   -------------------------------------------------------------------------- */
:root {
  /* Neutrals — 따뜻한 계열 (기존 쿨그레이 → 페이퍼 화이트) */
  --ink:        #1A1D21;   /* 제목 */
  --body:       #3D4249;   /* 본문 */
  --gray:       #666B74;   /* 보조 텍스트 — bg 5.2:1 / tint 4.7:1 (WCAG AA) */
  --gray-soft:  #9AA0A8;   /* 3차 텍스트 */
  --bg:         #FBFAF8;   /* 페이지 배경 */
  --surface:    #FFFFFF;   /* 카드 표면 */
  --tint:       #F3F0EB;   /* 섹션 톤 배경 (웜 샌드) */
  --border:     #E5E1DA;   /* 보더 */
  --border-soft:#EFECE6;

  /* Brand */
  --primary:      #2A2E35;   /* 딥 웜 차콜 */
  --primary-deep: #1A1D21;
  --accent:       #B87333;   /* 구리 — 큰 요소·장식용 */
  --accent-text:  #8F5722;   /* 구리 — 작은 글씨용 (AA 대비 확보) */
  --accent-deep:  #965C28;   /* hover */
  --accent-tint:  #F7EFE6;   /* 구리 워시 배경 */

  /* Elevation */
  --shadow-sm: 0 1px 2px rgba(26,29,33,.05), 0 1px 3px rgba(26,29,33,.04);
  --shadow-md: 0 4px 12px rgba(26,29,33,.07), 0 2px 4px rgba(26,29,33,.04);
  --shadow-lg: 0 14px 34px rgba(26,29,33,.11), 0 4px 10px rgba(26,29,33,.05);

  /* Shape — 구조는 각지게(0), 버튼만 pill */
  --r-sm: 0;
  --r-md: 0;
  --r-lg: 0;
  --r-pill: 999px;

  /* Rhythm */
  --header-h: 72px;
  --gap: 22px;

  --ease: cubic-bezier(.22,.61,.36,1);
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--body);
  font-family: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont,
               'Apple SD Gothic Neo', system-ui, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.8;              /* 한글 가독성 */
  word-break: keep-all;          /* 한글 어절 단위 줄바꿈 */
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg, video, iframe { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

/* 한글 제목은 자간을 좁혀야 '디자인된' 느낌이 난다 */
h1, h2, h3, h4 {
  color: var(--ink);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.28;
  margin: 0;
}
h4 { font-weight: 700; letter-spacing: -0.02em; }
p { margin: 0; }

::selection { background: var(--accent); color: #fff; }

/* 키보드 사용자 접근성 */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 0;
}

/* 전화번호는 등폭 숫자로 — 자릿수가 흔들리지 않게 */
.phone-encoded, .phone-link-encoded, .step-no, .plain-card .num, .num-badge {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

/* --------------------------------------------------------------------------
   3. Layout
   -------------------------------------------------------------------------- */
.wrap { max-width: 1140px; margin: 0 auto; padding: 0 20px; }
.wrap-narrow { max-width: 780px; margin: 0 auto; padding: 0 20px; }

.section { padding: clamp(56px, 8vw, 96px) 0; }
.section-tight { padding: clamp(40px, 5vw, 60px) 0; }
.section-tint { background: var(--tint); }
.section-dark { background: var(--primary); color: rgba(255,255,255,.82); }
.section-dark h2, .section-dark h3 { color: #fff; }

.hairline-top { border-top: 1px solid var(--border); }
.hairline { border: 1px solid var(--border); }

/* 섹션 헤더 --------------------------------------------------------------- */
.eyebrow {
  display: inline-block;
  margin: 0 0 14px;
  padding: 6px 14px;
  border-radius: 0;
  background: var(--accent-tint);
  color: var(--accent-text);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1.4;
  text-transform: uppercase;
}

.section-title {
  font-size: clamp(25px, 3.6vw, 34px);
  margin: 0 0 14px;
}

.section-lead {
  color: var(--gray);
  font-size: clamp(14.5px, 1.6vw, 16px);
  line-height: 1.75;
  margin: 0 0 clamp(32px, 4vw, 48px);
  max-width: 62ch;
}

/* --------------------------------------------------------------------------
   4. Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 26px;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease),
              background-color .18s var(--ease), color .18s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

/* 주 행동 = 구리. 이 사이트에서 구리는 '누르는 것'을 뜻한다. */
.btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  box-shadow: var(--shadow-sm);
}
.btn-primary:hover {
  background: var(--accent-deep);
  border-color: var(--accent-deep);
  box-shadow: var(--shadow-md);
}

.btn-dark {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}
.btn-dark:hover { background: var(--primary-deep); box-shadow: var(--shadow-md); }

.btn-outline {
  background: transparent;
  border-color: var(--border);
  color: var(--ink);
}
.btn-outline:hover { border-color: var(--ink); background: var(--surface); }

/* 어두운 배경 위 */
.on-dark .btn-outline,
.btn-outline-light {
  border-color: rgba(255,255,255,.42);
  color: #fff;
  background: transparent;
}
.on-dark .btn-outline:hover,
.btn-outline-light:hover { background: rgba(255,255,255,.12); border-color: #fff; }

.btn-lg { padding: 16px 32px; font-size: 16px; }
.btn-block { width: 100%; }
.header-cta { padding: 11px 20px; font-size: 13.5px; }

/* --------------------------------------------------------------------------
   5. Header
   -------------------------------------------------------------------------- */
.site-header {
  position: fixed; inset: 0 0 auto 0;
  z-index: 50;
  background: rgba(251,250,248,.82);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.site-header.is-scrolled {
  border-bottom-color: var(--border);
  box-shadow: 0 1px 12px rgba(26,29,33,.05);
}
.site-header .wrap {
  display: flex; align-items: center; justify-content: space-between;
  height: var(--header-h);
}

.brand {
  display: flex; align-items: center; gap: 10px;
  font-size: 18px; font-weight: 800; letter-spacing: -0.03em;
  color: var(--ink);
}
.brand img, .brand svg { width: 30px; height: 30px; }

.header-actions { display: flex; align-items: center; gap: 10px; }

/* 데스크톱 헤더의 전화 — 급한 고객의 최단 동선 */
.header-phone {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 10px 16px;
  border-radius: var(--r-pill);
  color: var(--ink);
  font-size: 14.5px; font-weight: 800; letter-spacing: -0.01em;
  transition: background-color .18s var(--ease);
}
.header-phone:hover { background: var(--accent-tint); color: var(--accent-text); }
.header-phone svg { width: 16px; height: 16px; stroke: var(--accent); }

.hamburger {
  display: none;
  background: none; border: none; cursor: pointer;
  padding: 10px; border-radius: var(--r-sm);
}
.hamburger span {
  display: block; width: 22px; height: 2px;
  background: var(--ink); border-radius: 2px;
  transition: transform .22s var(--ease), opacity .22s var(--ease);
}
.hamburger span + span { margin-top: 5px; }
.hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-menu {
  display: none;
  position: fixed; top: var(--header-h); left: 0; right: 0; z-index: 49;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-md);
  padding: 18px 20px calc(18px + env(safe-area-inset-bottom, 0px));
}
.mobile-menu.open { display: block; }
.mobile-menu .btn + .btn { margin-top: 10px; }

@media (max-width: 860px) {
  .hamburger { display: block; }
  .header-phone { display: none; }
}

/* --------------------------------------------------------------------------
   6. Hero intro — h1 + 전화 + 신뢰 배지
   -------------------------------------------------------------------------- */
.hero-intro {
  padding: calc(var(--header-h) + clamp(40px, 6vw, 76px)) 0 clamp(36px, 5vw, 56px);
}
/* 디스플레이 락업: h1 은 키워드만, 뒷문장은 형제 요소로 두되 시각적으로는 한 덩어리 */
.hero-display { margin: 0 0 18px; }
.hero-display h1,
.hero-display .tail {
  font-size: clamp(31px, 6.2vw, 54px);
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 1.16;
  color: var(--ink);
  margin: 0;
}
.hero-intro .lead {
  color: var(--gray);
  font-size: clamp(15px, 1.9vw, 17.5px);
  line-height: 1.8;
  max-width: 58ch;
  margin: 0 0 30px;
}
.hero-actions { display: flex; gap: 11px; flex-wrap: wrap; align-items: center; }

/* 전화 CTA — 페이지에서 가장 강한 요소 */
.phone-cta {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 13px 26px 13px 20px;
  border-radius: var(--r-pill);
  background: var(--primary);
  color: #fff;
  box-shadow: var(--shadow-md);
  transition: transform .18s var(--ease), box-shadow .18s var(--ease);
}
.phone-cta:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.phone-cta .ico {
  display: grid; place-items: center;
  width: 34px; height: 34px; flex-shrink: 0;
  border-radius: 50%;
  background: var(--accent);
}
.phone-cta .ico svg { width: 16px; height: 16px; stroke: #fff; }
.phone-cta .txt { display: flex; flex-direction: column; line-height: 1.25; }
.phone-cta .txt small {
  font-size: 11px; font-weight: 600; letter-spacing: .06em;
  color: rgba(255,255,255,.62);
}
.phone-cta .txt strong { font-size: 17px; font-weight: 800; letter-spacing: -0.01em; }

/* 신뢰 배지 바 */
.trust-bar {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin-top: 30px; padding: 0; list-style: none;
}
.trust-bar li {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 15px;
  border: 1px solid var(--border);
  border-radius: 0;
  background: var(--surface);
  color: var(--body);
  font-size: 13px; font-weight: 600; letter-spacing: -0.01em;
}
.trust-bar svg { width: 14px; height: 14px; stroke: var(--accent); flex-shrink: 0; }

/* 데스크톱: 텍스트 + 현장사진 2단 — 첫 화면에서 바로 '실제 작업'을 보여준다 */
.hero-intro-grid {
  display: grid;
  grid-template-columns: 1fr 0.8fr;
  gap: 60px;
  align-items: center;
}
.hero-intro-media { position: relative; padding-bottom: 34px; }
.hero-intro-media figure { margin: 0; }
.him-main {
  aspect-ratio: 4/5;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--tint);
  box-shadow: var(--shadow-lg);
}
.him-sub {
  position: absolute;
  right: -14px; bottom: 0;
  width: 54%;
  aspect-ratio: 4/3;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--tint);
  border: 5px solid var(--bg);
  box-shadow: var(--shadow-md);
}
.hero-intro-media img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 1000px) {
  .hero-intro-grid { grid-template-columns: 1fr; gap: 0; }
  .hero-intro-media { display: none; }
}

@media (max-width: 640px) {
  .hero-actions { gap: 9px; }
  .phone-cta, .hero-actions .btn { width: 100%; }
  .phone-cta { justify-content: flex-start; }
  .trust-bar { gap: 8px; }
  .trust-bar li { font-size: 12.5px; padding: 8px 13px; }
}

/* --------------------------------------------------------------------------
   7. Hero band — 풀블리드 현장 사진 슬라이더
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  height: clamp(340px, 46vh, 480px);
  overflow: hidden;
  background: var(--primary);
}
.hero-slide {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity 1.4s var(--ease);
}
.hero-slide.active { opacity: 1; }
.hero-slide img { width: 100%; height: 100%; object-fit: cover; }
.hero-slide::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(18,20,24,.84) 0%, rgba(18,20,24,.50) 40%, rgba(18,20,24,.06) 78%);
}
.hero-content {
  position: absolute; inset: 0; z-index: 2;
  display: flex; align-items: center;
}
.hero-content .wrap { width: 100%; }
.hero-content .eyebrow {
  background: rgba(255,255,255,.14);
  color: #fff;
  backdrop-filter: blur(4px);
}
.hero-content h2 {
  color: #fff;
  font-size: clamp(22px, 3.4vw, 34px);
  line-height: 1.3;
  margin: 0 0 14px;
  max-width: 20ch;
  text-shadow: 0 2px 18px rgba(0,0,0,.35);
}
.hero-content p {
  color: rgba(255,255,255,.84);
  font-size: clamp(14px, 1.7vw, 16px);
  margin: 0 0 26px;
  max-width: 46ch;
}

/* 슬라이드 인디케이터 */
.hero-dots {
  position: absolute; z-index: 3;
  left: 50%; transform: translateX(-50%);
  bottom: 20px;
  display: flex; gap: 7px;
}
.hero-dots i {
  width: 22px; height: 3px; border-radius: 2px;
  background: rgba(255,255,255,.32);
  transition: background-color .3s var(--ease);
}
.hero-dots i.on { background: var(--accent); }

/* --------------------------------------------------------------------------
   8. Sub hero (서브페이지)
   -------------------------------------------------------------------------- */
.sub-hero {
  position: relative;
  margin-top: var(--header-h);
  height: clamp(300px, 42vh, 420px);
  overflow: hidden;
  background: var(--primary);
}
.sub-hero > img { width: 100%; height: 100%; object-fit: cover; }
.sub-hero::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(18,20,24,.86) 0%, rgba(18,20,24,.54) 44%, rgba(18,20,24,.10) 80%);
}
.sub-hero-content {
  position: absolute; inset: 0; z-index: 2;
  display: flex; align-items: center;
}
.sub-hero-content .wrap { width: 100%; }
.sub-hero-content .eyebrow {
  background: rgba(255,255,255,.14);
  color: #fff;
  backdrop-filter: blur(4px);
}
.sub-hero-content h1 {
  color: #fff;
  font-size: clamp(28px, 5vw, 46px);
  letter-spacing: -0.045em;
  line-height: 1.18;
  margin: 0 0 22px;
  text-shadow: 0 2px 20px rgba(0,0,0,.35);
}
@media (max-width: 640px) {
  .sub-hero-content .hero-actions .btn { flex: 1 1 auto; }
}

/* --------------------------------------------------------------------------
   9. Grids
   -------------------------------------------------------------------------- */
.grid-6   { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
.grid-4-2 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); }
.grid-3-1 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }

@media (max-width: 900px) {
  .grid-6   { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .grid-4-2 { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .grid-3-1 { grid-template-columns: 1fr; gap: 14px; }
}
@media (max-width: 460px) {
  .grid-4-2 { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   10. Cards
   -------------------------------------------------------------------------- */
.card {
  position: relative;
  display: block;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform .22s var(--ease), box-shadow .22s var(--ease),
              border-color .22s var(--ease);
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--border);
}
.card-photo {
  aspect-ratio: 4/3;
  overflow: hidden;
  background: var(--tint);
}
.card-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .5s var(--ease);
}
.card:hover .card-photo img { transform: scale(1.045); }

.card-body { padding: 20px; }
.card-body h3 {
  font-size: 17.5px;
  margin: 0 0 6px;
  display: flex; align-items: center; gap: 6px;
}
.card-body p {
  font-size: 13.5px;
  color: var(--gray);
  line-height: 1.65;
  margin: 0;
}
/* 카드 화살표 — hover 시 이동 */
.card-body h3::after {
  content: '';
  width: 15px; height: 15px;
  flex-shrink: 0;
  background: currentColor;
  opacity: .28;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12h14M13 6l6 6-6 6'/></svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12h14M13 6l6 6-6 6'/></svg>") center/contain no-repeat;
  transition: transform .22s var(--ease), opacity .22s var(--ease);
}
.card:hover .card-body h3::after { transform: translateX(4px); opacity: .75; }
figure.card .card-body h3::after { display: none; }

/* 상담 카드 — 구리로 강조 */
.card-consult {
  background: linear-gradient(160deg, var(--accent-tint) 0%, var(--surface) 62%);
  border-color: rgba(184,115,51,.28);
}
.card-consult .card-body h3 { color: var(--accent-text); }

.plain-card {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-md);
  padding: 28px 26px;
  box-shadow: var(--shadow-sm);
}
.plain-card .num {
  display: block;
  font-size: 12.5px; font-weight: 800; letter-spacing: .1em;
  color: var(--accent-text);
}
.plain-card h3 { font-size: 18px; margin: 12px 0 8px; }
.plain-card p { font-size: 14px; color: var(--gray); line-height: 1.7; margin: 0; }

a.plain-card { transition: transform .2s var(--ease), box-shadow .2s var(--ease); }
a.plain-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }

/* --------------------------------------------------------------------------
   10-b. 붙은 그리드 (gap-as-divider)
   컨테이너 배경을 선 색으로 두고 gap:1px 을 주면 카드 사이 틈으로 배경이
   비쳐 1px 구분선이 된다. 테두리 겹침(2px)이 생기지 않는 게 핵심.
   -------------------------------------------------------------------------- */
.grid-flush {
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;                 /* 모서리 카드가 바깥 라운드를 따라 잘리도록 */
  box-shadow: var(--shadow-sm);
}
.grid-flush > .card {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: var(--surface);
  transition: background-color .2s var(--ease);
}
/* 붙어 있는 그리드에서 카드를 들어올리면 블록이 깨진다 → 배경 전환으로 대체 */
.grid-flush > .card:hover {
  transform: none;
  box-shadow: none;
  background: var(--accent-tint);
}
.grid-flush > .card .card-photo { border-radius: 0; }

/* 상담 카드는 붙은 상태에서도 구리 강조 유지 */
.grid-flush > .card-consult {
  background: linear-gradient(160deg, var(--accent-tint) 0%, var(--surface) 62%);
}
.grid-flush > .card-consult:hover { background: var(--accent-tint); }

/* 사진만 있는 갤러리는 콘택트시트처럼 — 사진 사이 여백 없이 */
.grid-flush.grid-photos > .card:hover { background: var(--surface); }

/* --------------------------------------------------------------------------
   11. Gallery
   -------------------------------------------------------------------------- */
.gallery-item {
  margin: 0;
  cursor: zoom-in;
}
.gallery-item .card-photo { aspect-ratio: 4/3; }
.gallery-item figcaption {
  padding: 12px 16px;
  font-size: 13px;
  color: var(--gray);
}

/* --------------------------------------------------------------------------
   12. Process steps — 번호를 크게, 연결선으로 흐름 표현
   -------------------------------------------------------------------------- */
.step {
  position: relative;
  padding-top: 22px;
  border-top: 2px solid var(--border);
}
.step::before {
  content: '';
  position: absolute; top: -2px; left: 0;
  width: 34px; height: 2px;
  background: var(--accent);
}
.step .step-no {
  display: block;
  font-size: 13px; font-weight: 800; letter-spacing: .12em;
  color: var(--accent-text);
}
.step h3 { font-size: 16.5px; margin: 10px 0 7px; }
.step p { font-size: 13.5px; color: var(--gray); line-height: 1.7; margin: 0; }

/* --------------------------------------------------------------------------
   13. Video
   -------------------------------------------------------------------------- */
.video-wrap {
  position: relative;
  aspect-ratio: 16/9;
  width: 100%;
  max-width: 760px;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--tint);
  box-shadow: var(--shadow-md);
  margin-bottom: 24px;
}
.video-wrap iframe { width: 100%; height: 100%; border: 0; }
.video-wrap.video-wrap--vertical { aspect-ratio: 9/16; max-width: 360px; }

/* --------------------------------------------------------------------------
   14. Prose (본문)
   -------------------------------------------------------------------------- */
.prose { max-width: 74ch; }
.prose h2 {
  font-size: clamp(23px, 3.2vw, 30px);
  line-height: 1.34;
  margin: 0 0 18px;
}
.prose h3 {
  font-size: 18.5px;
  margin: 40px 0 10px;
  padding-left: 14px;
  border-left: 3px solid var(--accent);
}
.prose p {
  font-size: 15.5px;
  line-height: 1.95;
  color: var(--body);
  margin: 0 0 18px;
}
.prose > p:last-child { margin-bottom: 0; }

/* 핵심 요약 박스 */
.summary-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--r-md);
  padding: 26px 28px;
  margin: 0 0 38px;
  box-shadow: var(--shadow-sm);
}
.summary-box ul { margin: 0; padding-left: 20px; }
.summary-box li {
  font-size: 14.5px;
  line-height: 1.95;
  color: var(--body);
}
.summary-box li::marker { color: var(--accent); }

/* --------------------------------------------------------------------------
   15. FAQ
   -------------------------------------------------------------------------- */
.faq-item {
  border-bottom: 1px solid var(--border);
}
.faq-q {
  width: 100%;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 18px;
  padding: 22px 4px;
  background: none; border: none;
  font-family: inherit;
  font-size: 16px; font-weight: 700; letter-spacing: -0.02em;
  line-height: 1.55;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  transition: color .18s var(--ease);
}
.faq-q:hover { color: var(--accent-text); }
.faq-q .mark {
  flex-shrink: 0;
  width: 26px; height: 26px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--accent-tint);
  color: var(--accent-text);
  font-size: 17px; font-weight: 700; line-height: 1;
  transition: transform .26s var(--ease), background-color .2s var(--ease);
}
.faq-item.open .faq-q .mark {
  transform: rotate(45deg);
  background: var(--accent);
  color: #fff;
}
.faq-a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .3s var(--ease);
}
.faq-item.open .faq-a { grid-template-rows: 1fr; }
.faq-a > p {
  overflow: hidden;
  margin: 0;
  font-size: 14.5px;
  line-height: 1.85;
  color: var(--gray);
}
.faq-item.open .faq-a > p { padding: 0 4px 24px; }

/* --------------------------------------------------------------------------
   16. CTA section
   -------------------------------------------------------------------------- */
.cta-section {
  position: relative;
  background: var(--primary);
  color: rgba(255,255,255,.78);
  padding: clamp(56px, 7vw, 84px) 0;
  text-align: center;
  overflow: hidden;
}
/* 구리 글로우 — 어두운 면에 온기 */
.cta-section::before {
  content: '';
  position: absolute; top: -40%; left: 50%;
  width: 620px; height: 620px;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(184,115,51,.22) 0%, rgba(184,115,51,0) 68%);
  pointer-events: none;
}
.cta-section > .wrap { position: relative; z-index: 1; }
.cta-section h2 {
  color: #fff;
  font-size: clamp(24px, 3.6vw, 34px);
  margin: 0 0 12px;
}
.cta-section p {
  color: rgba(255,255,255,.72);
  font-size: clamp(14.5px, 1.7vw, 16px);
  margin: 0 0 30px;
}
.cta-actions {
  display: flex; gap: 11px; justify-content: center; flex-wrap: wrap;
}
.cta-section .phone-cta {
  background: #fff;
  color: var(--ink);
}
.cta-section .phone-cta .txt small { color: var(--gray); }

@media (max-width: 640px) {
  .cta-actions .btn, .cta-actions .phone-cta { width: 100%; }
  .cta-section .phone-cta { justify-content: center; }
}

/* --------------------------------------------------------------------------
   17. Footer
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--primary-deep);
  color: rgba(255,255,255,.62);
  padding: clamp(48px, 6vw, 68px) 0 28px;
  font-size: 13.5px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 44px;
}
.footer-grid h4 {
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .06em;
  margin: 0 0 16px;
  text-transform: uppercase;
}
.footer-grid ul { list-style: none; margin: 0; padding: 0; }
.footer-grid li { margin-bottom: 10px; line-height: 1.6; }
.footer-grid a { transition: color .18s var(--ease); }
.footer-grid a:hover { color: #fff; }

.footer-brand {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 19px; font-weight: 800; letter-spacing: -0.03em;
  color: #fff;
  margin-bottom: 14px;
}
.footer-note { color: rgba(255,255,255,.5); line-height: 1.75; margin: 0; }

.footer-phone {
  display: inline-flex; align-items: center; gap: 8px;
  color: #fff; font-weight: 800; font-size: 16px;
  letter-spacing: -0.01em;
}
.footer-phone svg { width: 15px; height: 15px; stroke: var(--accent); }
.footer-phone-row { margin-bottom: 14px; }

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.1);
  margin-top: 44px;
  padding-top: 22px;
  font-size: 12.5px;
  color: rgba(255,255,255,.42);
  line-height: 1.8;
}

@media (max-width: 900px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
}
@media (max-width: 560px) {
  .footer-grid { grid-template-columns: 1fr; gap: 30px; }
}

/* --------------------------------------------------------------------------
   18. Floating / 모바일 하단 액션 바
   -------------------------------------------------------------------------- */
.floating {
  position: fixed; right: 20px; bottom: 20px; z-index: 60;
  display: flex; flex-direction: column; gap: 10px;
}
.fab {
  width: 54px; height: 54px;
  display: grid; place-items: center;
  border: none; border-radius: 50%;
  box-shadow: var(--shadow-lg);
  cursor: pointer;
  transition: transform .18s var(--ease);
}
.fab:hover { transform: translateY(-3px); }
.fab-consult { background: var(--accent); color: #fff; }
.fab-top {
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--border);
  display: none;
}
.fab-top.show { display: grid; }

/* 모바일 하단 고정 액션 바 — 국내 로컬 서비스 전환의 핵심 패턴 */
.mobile-bar {
  display: none;
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
  background: rgba(255,255,255,.94);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-top: 1px solid var(--border);
  padding: 9px 12px calc(9px + env(safe-area-inset-bottom, 0px));
  gap: 8px;
}
.mobile-bar a {
  flex: 1 1 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px;
  padding: 9px 4px;
  border-radius: var(--r-pill);
  font-size: 12px; font-weight: 700; letter-spacing: -0.02em;
  color: var(--body);
}
.mobile-bar a svg { width: 19px; height: 19px; stroke: var(--gray); }
.mobile-bar a.is-primary {
  flex: 1.5 1 0;
  background: var(--accent);
  color: #fff;
}
.mobile-bar a.is-primary svg { stroke: #fff; }

@media (max-width: 860px) {
  .mobile-bar { display: flex; }
  body { padding-bottom: 74px; }
  .floating { bottom: calc(74px + env(safe-area-inset-bottom, 0px)); right: 14px; }
  .fab-consult { display: none; }
}

/* --------------------------------------------------------------------------
   19. Lightbox
   -------------------------------------------------------------------------- */
.lightbox {
  position: fixed; inset: 0; z-index: 100;
  display: none;
  align-items: center; justify-content: center;
  padding: 24px;
  background: rgba(16,18,21,.93);
  backdrop-filter: blur(6px);
}
.lightbox.open { display: flex; }
.lightbox img {
  max-width: 92vw; max-height: 88vh;
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
}
.lightbox-close {
  position: absolute; top: 18px; right: 22px;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  background: rgba(255,255,255,.1);
  border: none; border-radius: 50%;
  color: #fff; font-size: 26px; line-height: 1;
  cursor: pointer;
  transition: background-color .18s var(--ease);
}
.lightbox-close:hover { background: rgba(255,255,255,.22); }

/* --------------------------------------------------------------------------
   19-b. 공용 컴포넌트 — 전 페이지 통일용
   (인라인 스타일로 흩어져 있던 것들을 컴포넌트로 승격)
   -------------------------------------------------------------------------- */

/* 히어로 없는 페이지(404·사이트맵)의 상단 — 고정 헤더 높이만큼 확보 */
.page-head {
  padding: calc(var(--header-h) + clamp(40px, 6vw, 72px)) 0 clamp(28px, 4vw, 44px);
}
.page-head h1 {
  font-size: clamp(28px, 5vw, 44px);
  letter-spacing: -0.045em;
  line-height: 1.18;
  margin: 0 0 14px;
}
.page-head--center { text-align: center; }
.page-head--center .section-lead { margin-left: auto; margin-right: auto; }
.page-head--center .hero-actions { justify-content: center; }

/* 서브페이지 신뢰 배지 스트립 — 메인의 trust-bar 를 전 페이지로 확장 */
.trust-strip { padding: 22px 0 26px; border-bottom: 1px solid var(--border); }
.trust-strip .trust-bar { margin-top: 0; }

/* 화면용 이동 경로 (BreadcrumbList 스키마와 짝을 이룬다) */
.breadcrumb {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  margin: 0 0 16px;
  font-size: 13px; color: var(--gray);
}
.breadcrumb a { color: var(--gray); }
.breadcrumb a:hover { color: var(--accent-text); text-decoration: underline; }
.breadcrumb span[aria-hidden] { color: var(--gray-soft); }
.breadcrumb [aria-current] { color: var(--ink); font-weight: 700; }

/* 유튜브 채널 카드 (6개 페이지 반복 → 컴포넌트) */
.channel-card { display: flex; align-items: center; gap: 16px; max-width: 520px; }
.channel-card > svg { color: var(--accent); flex-shrink: 0; }
.channel-card strong { display: block; font-size: 15px; font-weight: 700; color: var(--ink); }
.channel-card .sub { font-size: 13px; color: var(--gray); }

/* FAQ 본문 폭 */
.faq-wrap { max-width: 760px; }

/* 사이트맵 목록 */
.sitemap-group {
  font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--accent-text);
  margin: 34px 0 10px;
}
.sitemap-list {
  list-style: none; margin: 0 0 8px; padding: 0;
  border-top: 1px solid var(--border);
}
.sitemap-list li {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  padding: 14px 4px;
  border-bottom: 1px solid var(--border);
}
.sitemap-list a { font-weight: 700; color: var(--ink); }
.sitemap-list a:hover { color: var(--accent-text); }
.sitemap-list .desc { font-size: 12.5px; color: var(--gray); text-align: right; }
@media (max-width: 560px) {
  .sitemap-list li { flex-direction: column; gap: 4px; }
  .sitemap-list .desc { text-align: left; }
}

/* 지역 랜딩페이지 — 메인 유도 배너 */
.main-banner { background: var(--tint); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 26px 0; }
.main-banner__inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.main-banner strong { display: block; font-size: 17px; font-weight: 800; letter-spacing: -0.02em; color: var(--ink); margin-bottom: 4px; }
.main-banner span { font-size: 14px; color: var(--gray); }
.sub-hero-content .hero-sub { color: rgba(255,255,255,.92); font-size: clamp(14px,1.7vw,16px); line-height: 1.75; margin: 0 0 22px; max-width: 52ch; text-shadow: 0 1px 10px rgba(0,0,0,.55); }
@media (max-width: 640px) {.main-banner__inner { flex-direction: column; align-items: flex-start; }.main-banner .btn { width: 100%; } }

/* --------------------------------------------------------------------------
   19-c. 모바일 가독성 · 터치 최적화
   실측 기준: 본문 15px+ / 탭 타겟 40px+ / 한 줄 18자 이상
   -------------------------------------------------------------------------- */
@media (max-width: 860px) {
  /* 본문·보조 텍스트를 한 단계 키워 좁은 화면에서도 읽히게 */
  .section-lead { font-size: 15px; line-height: 1.8; }
  .card-body p  { font-size: 14px; line-height: 1.7; }
  .step p       { font-size: 14px; line-height: 1.75; }
  .plain-card p { font-size: 14.5px; }
  .faq-a > p    { font-size: 15px; line-height: 1.85; }
  .prose p      { font-size: 15.5px; line-height: 1.9; }

  /* 터치 영역 확보 (실측 16~38px → 40px 이상) */
  .header-cta { padding: 13px 18px; }
  .hamburger  { padding: 14px 10px; }
  .footer-grid li { margin-bottom: 2px; }
  .footer-grid li a { display: inline-block; padding: 11px 0; }
  .footer-phone { padding: 8px 0; }
  .site-footer { font-size: 14px; }
  /* 로고 링크도 터치 영역 확보 (헤더 높이는 그대로 유지) */
  .brand { padding: 6px 0; }
  .footer-brand { padding: 5px 0; }
}

/* 아주 좁은 화면: 글 있는 카드는 1열로 — 2열이면 한 줄 10자라 읽기 어렵다.
   (사진만 있는 갤러리는 2열 유지) */
@media (max-width: 460px) {
  .grid-6:not(.grid-photos) { grid-template-columns: 1fr; }
  .grid-6:not(.grid-photos) .card-photo { aspect-ratio: 16/9; }
  .grid-3-1 { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   20. Motion / 접근성
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .card:hover, .btn:hover, .phone-cta:hover, .fab:hover { transform: none; }
}

@media print {
  .site-header, .floating, .mobile-bar, .lightbox, .hero { display: none !important; }
  body { padding-bottom: 0; background: #fff; }
}