@charset "utf-8";
/* ==========================================================================
   바로하수구 — site.css
   외부 도메인 의존 없음. 폰트는 잘라서 자체 호스팅하고 아이콘은 인라인 SVG.
   ========================================================================== */

/* ---------------------------------------------------------------- font ---
   Pretendard 를 자체 호스팅한다. 없으면 윈도우에서 '맑은 고딕'으로 떨어지는데,
   시스템 기본 글꼴이라 손대지 않은 페이지처럼 보인다.
   KS X 1001 완성형 2,350자만 남겨 굵기당 약 175KB. tools/fonts.py 가 만든다.
   swap 이라 폰트가 늦게 와도 글자는 즉시 보인다. */
@font-face {
  font-family: "Pretendard";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../font/pretendard-400.woff2") format("woff2");
}
@font-face {
  font-family: "Pretendard";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../font/pretendard-700.woff2") format("woff2");
}

/* --------------------------------------------------------------- reset --- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body, h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote, table { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; height: auto; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: inherit; }
table { border-collapse: collapse; width: 100%; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 2px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* -------------------------------------------------------------- tokens --- */
:root {
  /* 자체 호스팅한 Pretendard 가 먼저. 로드 전/실패 시 시스템 글꼴로 떨어진다. */
  --font: "Pretendard", -apple-system, BlinkMacSystemFont, system-ui,
          "Apple SD Gothic Neo", "Malgun Gothic", "맑은 고딕", sans-serif;

  --ink:      #15181d;
  --ink-2:    #4d5663;
  --ink-3:    #78828f;
  --line:     #e2e6eb;
  --line-2:   #eef1f4;
  --paper:    #ffffff;
  --paper-2:  #f6f8fa;

  --brand:      #064eaa;
  --brand-dark: #043a80;
  --brand-tint: #eef3fb;
  --navy:       #0d1b2e;
  --call:       #0a7d38;
  --kakao:      #fee500;
  --kakao-ink:  #1b1000;
  --warn:       #a8410b;

  --wrap: 1180px;
  /* 모서리는 거의 직각으로 둔다. 크게 둥근 카드는 어느 SaaS 템플릿에나 있는
     형태라, 같은 내용이라도 '기성품'으로 읽히게 만든다. */
  --radius: 2px;
  --radius-lg: 2px;
  /* 카드는 그림자로 띄우지 않고 실선 한 줄로만 구분한다. 떠 있는 카드가
     화면 가득 깔리면 내용보다 껍데기가 먼저 보인다. */
  --shadow: none;
  --shadow-lift: none;
  --shadow-card: none;
  --shadow-hover: none;
}

/* ---------------------------------------------------------------- base --- */
body {
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.75;
  color: var(--ink);
  background: var(--paper);
  letter-spacing: -.011em;
  word-break: keep-all;
  overflow-wrap: break-word;
  padding-bottom: env(safe-area-inset-bottom);
}

h1, h2, h3, h4 { line-height: 1.3; font-weight: 700; letter-spacing: -.038em; }
h1 { font-size: clamp(1.95rem, 1.25rem + 3.1vw, 3.05rem); }
h2 { font-size: clamp(1.55rem, 1.15rem + 1.9vw, 2.25rem); }
h3 { font-size: clamp(1.1rem, 1rem + .5vw, 1.3rem); }
h4 { font-size: 1.03rem; }
strong, b { font-weight: 700; }
small { font-size: .875rem; }

a:not([class]) { color: var(--brand); text-decoration: underline; text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:not([class]):hover { color: var(--brand-dark); }

.num { font-variant-numeric: tabular-nums; }
.skip {
  position: absolute; left: 12px; top: -60px; z-index: 200;
  background: var(--navy); color: #fff; padding: 10px 16px; border-radius: var(--radius);
  transition: top .15s;
}
.skip:focus { top: 12px; }

/* -------------------------------------------------------------- layout --- */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: 20px; }
.wrap--narrow { max-width: 760px; }

.section { padding: 96px 0; }
.section--tight { padding: 44px 0; }
.section--tint { background: var(--paper-2); }
.section--rule { border-top: 1px solid var(--line); }
.section--dark { background: var(--navy); color: #fff; }

.shead { margin-bottom: 46px; }
.shead h2 { font-size: clamp(1.65rem, 1.15rem + 2.2vw, 2.45rem); letter-spacing: -.042em; }
/* 섹션 표제 위 라벨 — 짧은 선을 앞에 두어 목차처럼 읽히게 한다.
   자간은 한글 기준으로 좁게. 영문 대문자용 넓은 자간을 한글에 그대로 쓰면
   글자가 흩어져 보인다. */
.shead__kicker {
  display: flex; align-items: center; gap: 9px;
  font-size: .84rem; font-weight: 700; letter-spacing: -.01em;
  color: var(--brand); margin-bottom: 10px;
}
.shead__kicker::before {
  content: ""; width: 20px; height: 2px; background: currentColor; flex: none;
}
.shead p { color: var(--ink-2); margin-top: 12px; max-width: 62ch; }
.section--dark .shead p { color: #b9c4d3; }
.section--dark .shead__kicker { color: #7fa9e6; }

/* -------------------------------------------------------------- header --- */
.hdr {
  position: sticky; top: 0; z-index: 60;
  background: rgba(255, 255, 255, .94);
  backdrop-filter: saturate(160%) blur(8px);
  border-bottom: 1px solid var(--line);
}
.hdr__bar { display: flex; align-items: center; gap: 20px; height: 62px; }
.hdr__logo { flex: none; }
.hdr__logo img { height: 30px; width: auto; }

.nav { margin-left: auto; }
.nav__list { display: flex; align-items: center; gap: 4px; }
.nav__list > li { position: relative; }
.nav__link {
  display: block; padding: 8px 12px; font-size: .96rem; font-weight: 500;
  color: var(--ink-2); border-radius: var(--radius); text-decoration: none;
  transition: color .15s, background-color .15s;
}
.nav__link:hover { color: var(--brand); background: var(--brand-tint); }
.nav__link[aria-current="page"] { color: var(--brand); font-weight: 700; }

.hdr__tel {
  flex: none; display: flex; flex-direction: column; align-items: flex-end;
  text-decoration: none; line-height: 1.25;
}
.hdr__tel span { font-size: .7rem; color: var(--ink-3); letter-spacing: .04em; }
.hdr__tel strong { font-size: 1.13rem; color: var(--brand); font-variant-numeric: tabular-nums; }

.hdr__toggle { display: none; flex: none; padding: 8px; margin-right: -8px; }
.hdr__toggle svg { width: 24px; height: 24px; }

.drawer { display: none; }

@media (max-width: 900px) {
  .hdr__bar { height: 56px; gap: 12px; }
  .hdr__logo img { height: 26px; }
  .nav { display: none; }
  .hdr__tel { margin-left: auto; }
  .hdr__tel strong { font-size: 1.02rem; }
  .hdr__toggle { display: block; }

  .drawer { display: block; border-top: 1px solid var(--line); background: #fff; }
  .drawer[hidden] { display: none; }
  .drawer__list { padding: 8px 0 14px; }
  .drawer__list a {
    display: block; padding: 11px 20px; font-size: 1rem; font-weight: 500;
    color: var(--ink); text-decoration: none;
  }
  .drawer__list a[aria-current="page"] { color: var(--brand); font-weight: 700; }
  .drawer__group {
    padding: 14px 20px 4px; font-size: .74rem; font-weight: 700;
    letter-spacing: .1em; color: var(--ink-3);
  }
}

/* ------------------------------------------------------------- buttons --- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 22px; font-size: 1rem; font-weight: 700; text-decoration: none;
  border-radius: var(--radius); border: 1px solid transparent;
  transition: background-color .15s, border-color .15s, color .15s;
}
.btn svg { width: 18px; height: 18px; flex: none; }
.btn--call { background: var(--call); color: #fff; }
.btn--call:hover { background: #096a30; }
.btn--brand { background: var(--brand); color: #fff; }
.btn--brand:hover { background: var(--brand-dark); }
.btn--kakao { background: var(--kakao); color: var(--kakao-ink); }
.btn--kakao:hover { background: #efd800; }
.btn--ghost { border-color: var(--line); color: var(--ink); background: #fff; }
.btn--ghost:hover { border-color: var(--brand); color: var(--brand); }
.btn--lg { padding: 15px 26px; font-size: 1.06rem; }
.btn--block { width: 100%; }

.btnrow { display: flex; flex-wrap: wrap; gap: 10px; }

/* ------------------------------------------------- mobile fixed callbar --- */
.callbar { display: none; }
@media (max-width: 900px) {
  .callbar {
    display: grid; grid-template-columns: repeat(3, 1fr);
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
    background: #fff; border-top: 1px solid var(--line);
    padding-bottom: env(safe-area-inset-bottom);
    box-shadow: 0 -2px 12px rgba(21, 24, 29, .08);
  }
  .callbar a {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px; padding: 9px 4px 10px; font-size: .78rem; font-weight: 700;
    text-decoration: none; color: var(--ink);
  }
  .callbar a + a { border-left: 1px solid var(--line-2); }
  .callbar svg { width: 20px; height: 20px; }
  .callbar .is-call { color: var(--call); }
  .callbar .is-kakao { color: #8a6d00; }
  body { padding-bottom: calc(62px + env(safe-area-inset-bottom)); }
}

/* ------------------------------------------- desktop floating quickmenu ---
   데스크탑 우측 고정 상담 버튼. 본문 폭(1120px) 밖 여백에 들어갈 자리가
   있을 때만 표시한다. 1264px 미만에서는 본문을 가리므로 숨기고, 항상 보이는
   헤더 전화번호와 모바일 하단 고정 바(.callbar)가 그 역할을 대신한다.
   (구버전에서 후기 '다음' 버튼을 가리던 겹침 버그의 재발 방지) */
.quick { display: none; }
@media (min-width: 1264px) {
  .quick {
    display: block;
    position: fixed; right: 14px; top: 50%; transform: translateY(-50%);
    z-index: 65; width: 68px;
    background: #2c3a54; overflow: hidden;
    box-shadow: 0 4px 18px rgba(13, 27, 46, .28);
  }
  .quick a {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    padding: 13px 4px; text-decoration: none;
    font-size: .69rem; font-weight: 600; letter-spacing: -.02em;
    color: #dde3ec; transition: background-color .15s, color .15s;
  }
  .quick a + a { border-top: 1px solid rgba(255, 255, 255, .13); }
  .quick a:hover { background: #364764; color: #fff; }
  .quick svg { width: 20px; height: 20px; flex: none; }
  .quick .is-kakao:hover { background: var(--kakao); color: var(--kakao-ink); }
  .quick .is-call:hover { background: var(--call); color: #fff; }
}

/* ---------------------------------------------------------------- hero ---
   어두운 네이비 배경 위에 실제 작업 전후 슬라이더를 얹는다. 방문자가 처음
   보는 화면에서 '실제로 이 일을 하는 업체'라는 근거를 글이 아니라 사진으로
   제시하는 것이 목적이다. */
.hero {
  position: relative; overflow: hidden;
  padding: 68px 0 80px;
  background: #0c1a2c;
  color: #fff;
}
/* 아주 옅은 사선 텍스처 — 평평한 단색 배경이 주는 빈 느낌을 없앤다 */
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: repeating-linear-gradient(
    -45deg, rgba(255, 255, 255, .028) 0 1px, transparent 1px 9px);
}
.hero > * { position: relative; }

.hero__grid { display: grid; gap: 38px; align-items: center; }
@media (min-width: 980px) { .hero__grid { grid-template-columns: 1fr .92fr; gap: 60px; } }

/* 알약 배지 + 상태 점은 어느 서비스 사이트에나 있는 형태라 쓰지 않는다.
   섹션 표제와 같은 '짧은 선 + 글자' 방식으로 통일해 사이트 안에서 일관되게. */
.hero__eyebrow {
  display: flex; align-items: center; gap: 11px;
  font-size: .84rem; font-weight: 600; letter-spacing: .02em;
  color: #9fb6d2; margin-bottom: 22px;
}
.hero__eyebrow::before {
  content: ""; width: 26px; height: 1px; background: #4f7bb0; flex: none;
}
.hero h1 {
  font-size: clamp(2.05rem, 1.3rem + 3.1vw, 3.3rem);
  line-height: 1.22; letter-spacing: -.035em; margin-bottom: 18px;
}
.hero h1 em { font-style: normal; color: #6fb0ff; }
.hero__lead { font-size: 1.09rem; color: #b6c7dc; margin-bottom: 24px; max-width: 44ch; }
.hero__cta { margin-bottom: 26px; gap: 12px; }
.hero__meta {
  display: flex; flex-wrap: wrap; gap: 10px 22px; padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, .14); font-size: .87rem; color: #8ba0ba;
}
.hero__meta span { display: inline-flex; align-items: baseline; gap: 7px; }
.hero__meta b { color: #d6e2f0; font-weight: 600; }

.hero__figure { margin: 0; }
.hero__figure figcaption {
  margin-top: 14px; font-size: .85rem; color: #8ba0ba; text-align: center;
}

/* --------------------------------------------------------- price chips --- */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px; }
.chip {
  display: inline-flex; align-items: baseline; gap: 7px;
  border: 1px solid rgba(255, 255, 255, .18);
  padding: 7px 14px; font-size: .89rem; color: #b6c7dc;
  background: rgba(255, 255, 255, .06);
}
.chip b { font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; }

/* ------------------------------------------------ before/after 슬라이더 ---
   손잡이를 끌면 작업 전/후가 같은 자리에서 겹쳐 비교된다. 접근성을 위해
   range 입력을 실제 컨트롤로 쓰므로 키보드 좌우키로도 조작된다.
   JS 가 없으면 --pos 기본값(50%)으로 반씩 보이는 정적 이미지가 된다. */
.ba {
  --pos: 50%;
  position: relative; overflow: hidden;
  background: #0a1420;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .12);
  touch-action: pan-y;
}
/* 원본 작업사진이 정사각이라 1:1 로 둔다. 다른 비율로 두면 잘려 나간다. */
.ba__frame { position: relative; display: block; aspect-ratio: 1 / 1; }
.ba__frame img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; user-select: none; -webkit-user-drag: none;
}
.ba__layer { position: absolute; inset: 0; }
.ba__layer--before { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }

.ba__tag {
  position: absolute; top: 12px; z-index: 3;
  font-size: .74rem; font-weight: 700; letter-spacing: .02em;
  padding: 5px 10px; color: #fff;
  background: rgba(9, 18, 30, .8); backdrop-filter: blur(4px);
}
.ba__tag--before { left: 12px; }
.ba__tag--after { right: 12px; background: rgba(10, 125, 56, .9); }

/* 분할선과 손잡이.
   .ba__bar 자체를 손가락이 잡을 수 있는 44px 폭 세로 띠로 두고, 보이는 선은
   ::before 로 그린다. 부모가 pointer-events: none 인 채 ::after 에만 이벤트를
   주는 방식은 마우스에서는 되지만 터치에서는 .ba 의 touch-action 이 먼저
   스크롤로 가져가 버려 끌리지 않는다. */
.ba__bar {
  position: absolute; top: 0; bottom: 0; left: var(--pos); z-index: 4;
  width: 44px; margin-left: -22px; background: none;
  pointer-events: auto; touch-action: none; cursor: ew-resize;
}
/* 실제로 보이는 흰 선 */
.ba__bar::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 50%;
  width: 2px; margin-left: -1px; background: #fff;
  box-shadow: 0 0 12px rgba(0, 0, 0, .5);
}
/* 원(손잡이)만 포인터를 받는다. 사진 아무 데나 눌러도 분할선이 튀지 않게 하려면
   이 부분만 잡히고 나머지는 통과해야 한다. */
.ba__bar::after {
  content: ""; position: absolute; top: 50%; left: 50%;
  width: 46px; height: 46px; margin: -23px 0 0 -23px;
  border-radius: 50%; background-color: #fff;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .4);
  /* 좌우 화살표 — 요소를 더 만들지 않도록 배경 SVG 로 그린다 */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='12' viewBox='0 0 26 12'%3E%3Cpath d='M10 1.5 5 6l5 4.5M16 1.5 21 6l-5 4.5' fill='none' stroke='%230b1a2d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}
/* 값과 접근성을 담당하는 실제 컨트롤. 다만 포인터는 받지 않는다.
   range 는 트랙 아무 곳이나 누르면 그 지점으로 값이 점프하는 기본 동작이 있는데,
   모바일에서는 사진을 보려고 터치했을 뿐인데 분할선이 튀어 버린다.
   그래서 끌기는 아래 site.js 가 손잡이 원에서만 처리하고, 이 입력은
   키보드 좌우키와 스크린리더용으로 남겨 둔다. */
.ba__range {
  position: absolute; inset: 0; z-index: 5;
  width: 100%; height: 100%; margin: 0; padding: 0;
  appearance: none; background: none;
  pointer-events: none;
}
.ba__range::-webkit-slider-thumb { appearance: none; width: 1px; height: 1px; background: transparent; }
.ba__range::-moz-range-thumb { width: 1px; height: 1px; border: 0; background: transparent; }
/* 키보드로 접근했을 때는 어디에 초점이 있는지 보여야 한다 */
.ba:has(.ba__range:focus-visible) { outline: 3px solid #6fb0ff; outline-offset: 3px; }
.ba__range:focus-visible { outline: 3px solid #6fb0ff; outline-offset: -3px; }

/* 힌트 — 끌 수 있다는 사실을 알려준다. 조작을 시작하면 사라진다. */
.ba__hint {
  position: absolute; left: 50%; bottom: 14px; z-index: 4;
  transform: translateX(-50%);
  font-size: .76rem; font-weight: 600; white-space: nowrap;
  padding: 6px 12px;
  background: rgba(9, 18, 30, .74); color: #e6eefa;
  backdrop-filter: blur(4px); pointer-events: none;
  transition: opacity .25s;
}
.ba.is-touched .ba__hint { opacity: 0; }

/* ---------------------------------------------------------- fact strip ---
   신뢰 근거를 본문 글씨가 아니라 독립 띠로 세운다. */
.facts { display: grid; gap: 0; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 860px) { .facts { grid-template-columns: repeat(4, 1fr); } }
.fact { padding: 4px 22px; border-left: 1px solid rgba(255, 255, 255, .13); }
.fact:first-child { border-left: 0; padding-left: 0; }
@media (max-width: 859px) {
  .fact { padding: 14px 14px; border-left: 0; }
  .fact:nth-child(odd) { padding-left: 0; }
  .fact:nth-child(even) { border-left: 1px solid rgba(255, 255, 255, .13); }
}
/* 아주 좁은 화면(320px 등)에서는 2열로는 사업자등록번호가 끊긴다 */
@media (max-width: 359px) {
  .facts { grid-template-columns: 1fr; }
  .fact { padding: 12px 0; }
  .fact:nth-child(even) { border-left: 0; }
  .fact + .fact { border-top: 1px solid rgba(255, 255, 255, .11); }
}
.fact dt {
  font-size: .76rem; font-weight: 700; letter-spacing: .09em;
  color: #6f8bad; margin-bottom: 8px;
}
/* 좁은 폭에서 사업자등록번호가 두 줄로 끊기지 않도록 글자 크기를 함께 줄인다 */
.fact dd { font-size: clamp(1.04rem, .78rem + 1.05vw, 1.32rem); font-weight: 700; letter-spacing: -.028em; }
.fact dd small { display: block; font-size: .83rem; font-weight: 400; color: #93a7c0; margin-top: 5px; letter-spacing: 0; }

/* ------------------------------------------------------- service table --- */
.svclist { border-top: 1px solid var(--ink); }
.svclist__row {
  display: grid; gap: 6px 28px; padding: 24px 0;
  border-bottom: 1px solid var(--line);
  grid-template-columns: 1fr;
}
@media (min-width: 800px) {
  .svclist__row { grid-template-columns: 240px 1fr 150px; align-items: baseline; }
}
.svclist__name { font-size: 1.13rem; font-weight: 700; letter-spacing: -.025em; }
.svclist__name a { text-decoration: none; }
.svclist__name a:hover { color: var(--brand); text-decoration: underline; text-underline-offset: .2em; }
.svclist__desc { color: var(--ink-2); font-size: .97rem; }
.svclist__desc ul { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 8px; font-size: .88rem; color: var(--ink-3); }
.svclist__desc li::before { content: "— "; }
.svclist__price { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (min-width: 800px) { .svclist__price { text-align: right; } }
.svclist__price small { display: block; font-weight: 400; font-size: .8rem; color: var(--ink-3); }

/* ------------------------------------------------------------ 안심 약속 ---
   이 업종에서 고객이 가장 두려워하는 건 "5만원이라더니 현장에서 40만원"이다.
   그 공포를 정면으로 다루는 섹션. 실제로 지키는 것만 적는다. */
.promise { display: grid; gap: 18px; grid-template-columns: 1fr; }
@media (min-width: 620px) { .promise { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .promise { grid-template-columns: repeat(4, 1fr); } }

.promise__item {
  position: relative; padding: 28px 24px 26px;
  background: #fff; border: 1px solid var(--line);
}
/* 체크 표시 — 아이콘 파일 없이 배경 SVG 로. 색 원 배경 없이 표시만 남긴다. */
.promise__item::before {
  content: ""; display: block; width: 26px; height: 26px; margin-bottom: 16px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 18 18'%3E%3Cpath d='M4 9.5 7.2 12.7 14 5.9' fill='none' stroke='%230a7d38' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: left center;
}
.promise__item h3 { font-size: 1.06rem; letter-spacing: -.03em; margin-bottom: 8px; }
.promise__item p { font-size: .94rem; color: var(--ink-2); }
.promise__item b { color: var(--ink); }

/* 공포를 그대로 인용하는 리드 문구 */
.promise__lead {
  max-width: 46ch; margin: 0 auto 34px; text-align: center;
  font-size: 1.06rem; color: var(--ink-2);
}
.promise__lead q {
  display: block; margin-bottom: 12px; quotes: "“" "”";
  font-size: 1.18rem; font-weight: 700; color: var(--ink); letter-spacing: -.03em;
}

/* --------------------------------------------------- 카톡 사진 견적 흐름 ---
   전화가 부담스러운 사람을 위한 두 번째 진입로. 사진 한 장으로 시작한다. */
.kflow { display: grid; gap: 30px; align-items: center; }
@media (min-width: 900px) { .kflow { grid-template-columns: 1fr 1fr; gap: 54px; } }

.kflow__steps { counter-reset: k; display: grid; gap: 18px; }
.kflow__step { counter-increment: k; display: grid; grid-template-columns: 38px 1fr; gap: 16px; }
.kflow__step::before {
  content: counter(k);
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px;
  background: var(--kakao); color: var(--kakao-ink);
  font-weight: 700; font-size: .95rem;
}
.kflow__step h3 { font-size: 1.03rem; margin-bottom: 3px; padding-top: 7px; }
.kflow__step p { font-size: .93rem; color: var(--ink-2); }
.kflow__step > div { padding-bottom: 4px; }

/* 카톡 대화 느낌의 예시 — 실제로 무엇을 보내면 되는지 보여준다 */
.kchat {
  background: #b2c7d9; border-radius: var(--radius-lg);
  padding: 20px 18px; display: grid; gap: 12px;
  box-shadow: var(--shadow-card);
}
.kbubble {
  max-width: 84%; padding: 11px 14px; border-radius: 14px;
  font-size: .93rem; line-height: 1.6; background: #fff; color: var(--ink);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .08);
}
.kbubble--me { margin-left: auto; background: var(--kakao); color: var(--kakao-ink); }
.kbubble b { font-weight: 700; }
.kbubble__shot { margin: -11px -14px 10px; border-radius: 14px 14px 0 0; overflow: hidden; }
.kbubble__shot img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }

/* ---------------------------------------------------------- 증상 바로가기 ---
   급한 사람이 자기 상황을 그대로 눌러 해당 작업으로 갈 수 있게 한다. */
.symptom { display: flex; flex-wrap: wrap; gap: 10px; }
.symptom a {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 12px 18px 12px 15px;
  background: #fff; border: 1px solid var(--line); color: var(--ink);
  text-decoration: none; font-size: .95rem; font-weight: 600;
  transition: border-color .15s, color .15s;
}
.symptom a::before {
  content: ""; width: 7px; height: 7px;
  background: var(--warn); flex: none;
}
.symptom a:hover { border-color: var(--ink); color: var(--brand); }

/* ------------------------------------------------------- service cards ---
   아이콘 대신 실제 작업 사진을 쓴다. 일러스트 아이콘 카드는 어느 업체나
   똑같아 보이지만, 자기 현장 사진은 그 업체만 가질 수 있는 근거다. */
.svc { display: grid; gap: 20px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .svc { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .svc { grid-template-columns: repeat(3, 1fr); } }

.svc__card {
  display: flex; flex-direction: column; overflow: hidden;
  background: #fff; border: 1px solid var(--line);
  text-decoration: none; color: inherit;
  transition: border-color .15s ease;
}
/* 마우스를 올렸을 때 카드를 띄우지 않는다. 테두리 한 줄만 진해진다. */
.svc__card:hover { border-color: var(--ink); }
.svc__shot { position: relative; aspect-ratio: 16 / 10; background: var(--paper-2); overflow: hidden; }
.svc__shot img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.svc__card:hover .svc__shot img { transform: scale(1.045); }
/* 사진 위 가격 배지 — 스캔하며 내려가는 눈에 금액이 먼저 걸리게 한다 */
.svc__badge {
  position: absolute; left: 12px; bottom: 12px;
  font-size: .88rem; font-weight: 700; font-variant-numeric: tabular-nums;
  color: #fff; background: rgba(9, 18, 30, .84); backdrop-filter: blur(4px);
  padding: 6px 11px;
}
.svc__body { display: flex; flex-direction: column; flex: 1; padding: 18px 20px 20px; }
.svc__body h3 { font-size: 1.09rem; letter-spacing: -.03em; margin-bottom: 8px; }
.svc__body p { font-size: .94rem; color: var(--ink-2); }
.svc__more {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 14px;
  font-size: .89rem; font-weight: 700; color: var(--brand);
}
.svc__more::after {
  content: ""; width: 5px; height: 5px;
  border-top: 2px solid currentColor; border-right: 2px solid currentColor;
  transform: rotate(45deg); transition: transform .18s ease;
}
.svc__card:hover .svc__more::after { transform: rotate(45deg) translate(2px, -2px); }

/* ---------------------------------------------------------- case cards --- */
.cases { display: grid; gap: 30px; grid-template-columns: 1fr; }
@media (min-width: 700px) { .cases { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .cases--3 { grid-template-columns: repeat(3, 1fr); } }

.case {
  border: 1px solid var(--line); overflow: hidden;
  background: #fff;
  transition: border-color .15s ease;
}
.case:hover { border-color: var(--ink); }
/* 카드 안에 들어간 비교 슬라이더는 카드 테두리와 겹치지 않게 평평하게 */
.case .ba { box-shadow: none; }
.case__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); }
.case__shot { position: relative; margin: 0; background: var(--paper-2); }
.case__shot img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.case__tag {
  position: absolute; left: 8px; top: 8px; z-index: 1;
  font-size: .73rem; font-weight: 700; letter-spacing: .02em;
  padding: 3px 8px; border-radius: 3px;
  background: rgba(13, 27, 46, .82); color: #fff;
}
.case__tag--after { background: rgba(10, 125, 56, .9); }
.case__body { padding: 18px 18px 20px; }
.case__body h3 { font-size: 1.06rem; margin-bottom: 6px; }
.case__body p { font-size: .93rem; color: var(--ink-2); }
.case__body dl { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 12px; font-size: .84rem; color: var(--ink-3); }
.case__body dt { font-weight: 600; }
.case__body dt::after { content: ":"; }

/* ---------------------------------------------------------- price table --- */
.ptable { margin-bottom: 40px; }
.ptable__head { padding-bottom: 12px; border-bottom: 2px solid var(--ink); margin-bottom: 0; }
.ptable__head h3 { margin-bottom: 4px; }
.ptable__head p { font-size: .9rem; color: var(--ink-3); }
.ptable table { font-size: .97rem; }
.ptable th, .ptable td { text-align: left; padding: 15px 12px; border-bottom: 1px solid var(--line); vertical-align: baseline; }
.ptable th { font-weight: 700; width: 34%; }
.ptable td.is-price { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; width: 22%; color: var(--brand); }
.ptable td.is-note { color: var(--ink-2); font-size: .92rem; }
.ptable tr:hover { background: var(--paper-2); }
@media (max-width: 720px) {
  .ptable thead { display: none; }
  .ptable tr { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 16px 0; border-bottom: 1px solid var(--line); }
  .ptable th, .ptable td { border: 0; padding: 0; width: auto; }
  .ptable th { grid-column: 1; }
  .ptable td.is-price { grid-column: 2; grid-row: 1; text-align: right; }
  .ptable td.is-note { grid-column: 1 / -1; margin-top: 4px; }
  .ptable tr:hover { background: none; }
}

.notice {
  border-left: 3px solid var(--brand); background: var(--brand-tint);
  padding: 16px 18px; border-radius: 0 var(--radius) var(--radius) 0;
  font-size: .94rem; color: var(--ink-2);
}
.notice strong { color: var(--ink); }
.notice ul { margin-top: 8px; }
.notice li { padding-left: 14px; position: relative; }
.notice li::before { content: "·"; position: absolute; left: 4px; }

/* ------------------------------------------------------------- reviews --- */
.reviews { display: grid; gap: 20px; grid-template-columns: 1fr; }
@media (min-width: 760px) { .reviews { grid-template-columns: repeat(2, 1fr); } }
.review {
  position: relative; overflow: hidden;
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 26px 26px 22px; background: #fff; box-shadow: var(--shadow-card);
}
.review__stars { color: #f0a500; font-size: 1rem; letter-spacing: .12em; margin-bottom: 12px; }
.review p { font-size: 1rem; color: var(--ink); margin-bottom: 16px; }
.review footer {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  font-size: .86rem; color: var(--ink-3);
  padding-top: 14px; border-top: 1px solid var(--line-2);
}
.review footer b { color: var(--ink); font-weight: 700; }
.review footer .tag {
  font-size: .78rem; font-weight: 600; color: var(--brand);
  background: var(--brand-tint); padding: 3px 8px;
}

/* ---------------------------------------------------------- area links --- */
.arealist { display: grid; gap: 14px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 760px) { .arealist { grid-template-columns: repeat(4, 1fr); } }
.arealist a {
  display: block; padding: 22px 20px 20px; border: 1px solid var(--line);
  text-decoration: none; background: #fff;
  transition: border-color .15s ease, background-color .15s ease;
}
.arealist a:hover { border-color: var(--ink); background: var(--paper-2); }
.arealist strong { display: block; font-size: 1.14rem; letter-spacing: -.03em; margin-bottom: 4px; }
.arealist span { font-size: .85rem; color: var(--ink-3); }
/* 주력 지역 표시 */
.arealist .pin {
  display: inline-block; margin-bottom: 10px;
  font-size: .72rem; font-weight: 700; letter-spacing: .02em;
  color: var(--call); background: #e7f5ec; padding: 3px 8px;
}

.taglist { display: flex; flex-wrap: wrap; gap: 8px; font-size: .93rem; }
.taglist li { display: flex; }
/* :has() 는 구형 브라우저에서 규칙 전체를 무효화시키므로 쓰지 않는다.
   링크형 태그는 알약, 본문(.prose) 안의 단순 나열은 아래에서 따로 처리한다. */
.taglist a {
  display: inline-block; padding: 8px 15px;
  background: #fff; border: 1px solid var(--line); color: var(--ink-2);
  text-decoration: none; font-weight: 600;
  transition: border-color .15s, color .15s, background-color .15s;
}
.taglist a:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-tint); }
/* 상세 페이지 본문 안의 지역 나열은 링크가 아닌 단순 목록이라 옅게 둔다 */
.prose .taglist li { padding: 6px 12px; background: var(--paper-2); border: 1px solid var(--line-2); font-size: .9rem; color: var(--ink-2); }
.prose .taglist a { padding: 0; border: 0; background: none; font-weight: 600; }
.prose .taglist a:hover { background: none; }

/* --------------------------------------------------------------- steps ---
   왼쪽 세로 레일에 번호를 꿴 타임라인. 단계가 이어진다는 것을 선으로 보인다. */
.steps { counter-reset: s; display: grid; gap: 0; }
.step {
  counter-increment: s; position: relative;
  display: grid; gap: 4px 24px; grid-template-columns: 46px 1fr;
  padding: 0 0 34px;
}
.step:last-child { padding-bottom: 0; }
/* 번호 원 */
.step::before {
  content: counter(s, decimal-leading-zero);
  display: flex; align-items: center; justify-content: center;
  width: 46px; height: 46px;
  font-size: .95rem; font-weight: 700; color: #fff;
  background: var(--navy); font-variant-numeric: tabular-nums;
}
/* 다음 단계로 잇는 세로선 */
.step::after {
  content: ""; position: absolute; left: 22px; top: 56px; bottom: 8px;
  width: 2px; background: linear-gradient(var(--line) 60%, transparent);
}
.step:last-child::after { display: none; }
.step > div { padding-top: 9px; }
.step h3 { font-size: 1.1rem; margin-bottom: 4px; }
.step p { font-size: .96rem; color: var(--ink-2); }

/* ----------------------------------------------------------------- faq --- */
.faq { border-top: 1px solid var(--ink); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex; align-items: baseline; gap: 12px; padding: 20px 0;
  font-size: 1.04rem; font-weight: 600; cursor: pointer; list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before { content: "Q"; flex: none; font-weight: 700; color: var(--brand); }
.faq summary::after {
  content: ""; flex: none; margin-left: auto; width: 9px; height: 9px;
  border-right: 2px solid var(--ink-3); border-bottom: 2px solid var(--ink-3);
  transform: rotate(45deg) translateY(-3px); transition: transform .15s;
}
.faq details[open] summary::after { transform: rotate(225deg) translateY(-1px); }
.faq details[open] summary { color: var(--brand); }
.faq__a { display: flex; gap: 12px; padding: 0 0 22px; color: var(--ink-2); font-size: .98rem; }
.faq__a::before { content: "A"; flex: none; font-weight: 700; color: var(--ink-3); }
.faq__a > div > * + * { margin-top: 10px; }

/* ---------------------------------------------------------- breadcrumb --- */
.crumb { padding: 14px 0; font-size: .84rem; color: var(--ink-3); border-bottom: 1px solid var(--line-2); }
.crumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.crumb li:not(:last-child)::after { content: "›"; margin-left: 6px; color: var(--line); }
.crumb a { text-decoration: none; }
.crumb a:hover { color: var(--brand); text-decoration: underline; }
.crumb [aria-current="page"] { color: var(--ink-2); }

/* --------------------------------------------------------- page header --- */
.phead { padding: 60px 0 46px; border-bottom: 1px solid var(--line); }
.phead h1 { margin-bottom: 18px; max-width: 20ch; }
.phead p { color: var(--ink-2); max-width: 60ch; font-size: 1.04rem; }
.phead .btnrow { margin-top: 24px; }

/* --------------------------------------------------------------- prose --- */
.prose > * + * { margin-top: 20px; }
.prose h2 { margin-top: 56px; padding-top: 4px; }
.prose h3 { margin-top: 36px; }
.prose p, .prose li { color: var(--ink); }
.prose ul:not([class]) > li,
.prose ol:not([class]) > li { position: relative; padding-left: 18px; }
.prose ul:not([class]) > li + li,
.prose ol:not([class]) > li + li { margin-top: 10px; }
/* 브랜드 색 동그란 점을 모든 항목에 찍으면 목록이 장식처럼 보이고,
   어느 문서에나 있는 형태라 눈에 띄지 않는다. 담백한 짧은 선으로 둔다. */
.prose ul:not([class]) > li::before {
  content: ""; position: absolute; left: 0; top: .82em;
  width: 8px; height: 1px; background: var(--ink-3);
}
.prose ol:not([class]) { counter-reset: p; }
.prose ol:not([class]) > li { counter-increment: p; }
.prose ol:not([class]) > li::before {
  content: counter(p) "."; position: absolute; left: 0; top: 0;
  font-weight: 600; color: var(--ink-3); font-size: .92rem;
  font-variant-numeric: tabular-nums;
}
.prose figure { margin: 28px 0; }
.prose figcaption { margin-top: 10px; font-size: .86rem; color: var(--ink-3); }
.prose .keypoints {
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 20px 22px; background: var(--paper-2);
}
.prose .keypoints h2, .prose .keypoints h3 { margin-top: 0; font-size: 1.02rem; }
.prose .keypoints ul { margin-top: 12px; }

/* --------------------------------------------------------------- table --- */
.dtable { font-size: .96rem; }
.dtable th, .dtable td { padding: 13px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: baseline; }
.dtable thead th { border-bottom: 2px solid var(--ink); font-size: .88rem; }
.dtable tbody th { font-weight: 600; width: 38%; }

/* ------------------------------------------------------------- cta band --- */
.ctaband {
  position: relative; overflow: hidden; color: #fff; padding: 64px 0;
  background: var(--brand);
}
.ctaband::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: repeating-linear-gradient(
    -45deg, rgba(255, 255, 255, .035) 0 1px, transparent 1px 10px);
}
.ctaband__in { position: relative; display: grid; gap: 24px; align-items: center; }
@media (min-width: 820px) { .ctaband__in { grid-template-columns: 1fr auto; gap: 44px; } }
.ctaband h2 { font-size: clamp(1.4rem, 1.1rem + 1.3vw, 1.95rem); margin-bottom: 10px; letter-spacing: -.032em; }
.ctaband p { color: #d3e3fa; font-size: 1rem; }
.ctaband .btn--ghost { background: transparent; border-color: rgba(255, 255, 255, .5); color: #fff; }
.ctaband .btn--ghost:hover { background: rgba(255, 255, 255, .12); border-color: #fff; color: #fff; }
.ctaband .btn--white { background: #fff; color: var(--brand); }
.ctaband .btn--white:hover { background: #eaf1fb; }

/* -------------------------------------------------------------- footer --- */
.ftr { background: var(--navy); color: #9fb0c6; padding: 52px 0 34px; font-size: .92rem; }
.ftr__top { display: grid; gap: 34px; padding-bottom: 32px; border-bottom: 1px solid rgba(255, 255, 255, .12); }
@media (min-width: 880px) { .ftr__top { grid-template-columns: 260px 1fr; gap: 56px; } }
.ftr__logo img { height: 28px; width: auto; }
.ftr__slogan { margin-top: 14px; color: #7f90a6; font-size: .88rem; }
.ftr__nav { display: grid; gap: 26px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 620px) { .ftr__nav { grid-template-columns: repeat(3, 1fr); } }
.ftr__nav h3 { font-size: .8rem; font-weight: 700; letter-spacing: .08em; color: #fff; margin-bottom: 12px; }
.ftr__nav li + li { margin-top: 7px; }
.ftr__nav a { text-decoration: none; font-size: .89rem; }
.ftr__nav a:hover { color: #fff; text-decoration: underline; text-underline-offset: .2em; }
/* 모바일에서 푸터 링크의 터치 영역을 넓힌다. 글자 높이(16px)만으로는
   손가락으로 누르기 어렵고 구글 모바일 사용성 검사에서도 걸린다. */
@media (max-width: 900px) {
  .ftr__nav li + li { margin-top: 0; }
  .ftr__nav a { display: flex; align-items: center; min-height: 44px; }
  .ftr__biz dd a { display: inline-flex; align-items: center; min-height: 40px; }
}

.ftr__biz { padding-top: 28px; display: grid; gap: 20px; }
@media (min-width: 880px) { .ftr__biz { grid-template-columns: 1fr auto; } }
.ftr__biz dl { display: flex; flex-wrap: wrap; gap: 6px 20px; font-size: .85rem; color: #7f90a6; }
.ftr__biz dl > div { display: flex; align-items: baseline; gap: 7px; min-width: 0; }
.ftr__biz dt { font-weight: 600; flex: none; }
.ftr__biz dd { min-width: 0; overflow-wrap: anywhere; }
.ftr__biz dd a { color: #9fb0c6; }
.ftr__copy { font-size: .82rem; color: #6b7c92; }

/* ------------------------------------------------------------- utility --- */
.vh {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.mt-0 { margin-top: 0; }
.center { text-align: center; }
.linkmore {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 26px;
  font-weight: 700; color: var(--brand); text-decoration: none; font-size: .97rem;
}
.linkmore:hover { text-decoration: underline; text-underline-offset: .2em; }
.linkmore::after {
  content: ""; width: 6px; height: 6px;
  border-top: 2px solid currentColor; border-right: 2px solid currentColor;
  transform: rotate(45deg);
}

@media print {
  .hdr, .callbar, .ctaband, .drawer { display: none !important; }
  body { font-size: 12px; padding-bottom: 0; }
  .section { padding: 16px 0; }
}