@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;
  /* 전화 버튼은 초록 (2026-09-28 사장님 지시: 파랑 통일 후 다시 초록으로).
     나머지 강조색은 파랑(--brand) 하나로 통일한 상태. */
  --call:       #0a7d38;
  --call-dark:  #096a30;
  --kakao:      #fee500;
  --kakao-ink:  #1b1000;
  --naver:      #03c75a;   /* 네이버 블로그 버튼 */
  --warn:       #a8410b;

  /* 모바일 고정 요소 높이. 하단 바 여백과 메뉴 서랍 최대 높이가 이 값을 함께 쓴다 */
  --hdr-h: 56px;
  --callbar-h: 78px;

  --wrap: 1180px;
  /* 2026-09-28 사장님 지시(디자인 톤 정리): 거의 직각(2px)이던 모서리를 살짝 둥글게,
     카드는 실선 + 아주 옅은 그림자로 정돈한다. 크게 둥글거나 진한 그림자는 쓰지 않는다. */
  --radius: 8px;
  --radius-lg: 12px;
  --shadow: 0 1px 2px rgba(21, 24, 29, .05);
  --shadow-lift: 0 2px 6px rgba(21, 24, 29, .06), 0 8px 24px rgba(21, 24, 29, .06);
  --shadow-card: 0 1px 2px rgba(21, 24, 29, .04), 0 4px 14px rgba(21, 24, 29, .05);
  --shadow-hover: 0 2px 6px rgba(21, 24, 29, .06), 0 10px 28px rgba(21, 24, 29, .08);
}

/* ---------------------------------------------------------------- base --- */
body {
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.75;
  color: var(--ink);
  background: var(--paper);
  letter-spacing: -.011em;
  /* 2026-09-29: 한글이 글자 중간에서 잘리지 않게 단어 단위로 줄을 바꾼다(keep-all).
     가운뎃점 이음말은 build.py mobile_wbr() 가 '·' 뒤에 <wbr> 을 넣어 거기서 바꾼다.
     그래도 칸보다 긴 말(URL·긴 숫자)만 anywhere 로 비상 줄바꿈 — anywhere 는 최소 폭 계산에도
     반영돼 break-word 와 달리 화면 밖으로 밀려 나가지 않는다(2026-09-20 문제의 원인). */
  word-break: keep-all;
  overflow-wrap: anywhere;
  padding-bottom: env(safe-area-inset-bottom);
}

h1, h2, h3, h4 { line-height: 1.3; font-weight: 700; letter-spacing: -.038em; }
/* 제목은 줄 길이를 고르게(마지막 줄에 한 단어만 남는 것 방지), 문단은 끝줄 외톨이 단어 방지 */
h1, h2, h3, h4, .btn, .shead p, figcaption, summary { text-wrap: balance; }
p, li, dd, td, th { text-wrap: pretty; }
/* 2026-09-30 모바일: 짧은 안내 줄·카드 제목은 두 줄이 되면 줄 길이를 고르게(끝줄에 한두 단어만 남지 않게) */
.keypoints li, .wcase__work, .pcase__sub { text-wrap: balance; }
/* build.py mobile_wbr() 가 '글자·' 와 '40만 원' 을 묶는 데 쓴다. display: contents 라 flex 링크(.ftr__nav a 등)\n   안에서도 따로 떨어진 칸이 되지 않고 줄바꿈만 막는다. */
nobr { display: contents; white-space: nowrap; }
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; white-space: nowrap; }  /* 전화번호·금액이 '02-' / '3146-3800' 처럼 갈라지지 않게 */
.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; }

  /* 메뉴 서랍 (2026-09-21 사장님 지시: 메뉴를 열면 아래쪽 항목이 하단 바에 가리고,
     손으로 밀면 메뉴가 아니라 뒤 페이지가 움직인다)

     서랍을 고정 헤더 안에 그대로 두면 페이지를 내려도 따라오지 않아 화면 밖으로
     넘어간 항목에 손이 닿지 않는다. 그래서 화면에 직접 붙이고(fixed) 헤더와 하단 바
     사이만 쓰게 한 뒤, 항목이 넘치면 서랍 안에서 스크롤하도록 한다. */
  .drawer {
    display: block; border-top: 1px solid var(--line); background: #fff;
    position: fixed; top: var(--hdr-h); left: 0; right: 0; z-index: 59;
    max-height: calc(100vh - var(--hdr-h) - var(--callbar-h) - env(safe-area-inset-bottom));
    overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    box-shadow: 0 12px 24px rgba(21, 24, 29, .10);
  }
  .drawer[hidden] { display: none; }
  .drawer__list { padding: 8px 0 20px; }
  .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);
  }
  @supports (height: 100dvh) {
    .drawer { max-height: calc(100dvh - var(--hdr-h) - var(--callbar-h) - env(safe-area-inset-bottom)); }
  }
}

/* ------------------------------------------------------------- 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: var(--call-dark); }
.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; }


/* 증상별 안내: 소제목 아래 한 줄 질문 */
.prose .sym__q { font-weight: 700; color: var(--ink); margin-bottom: 6px; }
.prose hr.rule { border: 0; border-top: 1px solid var(--line); margin: 30px 0 26px; }

/* --------------------------------------------- 전 페이지 상단 한 줄 안내 --- */
.topnote {
  background: var(--brand-tint); color: var(--ink); border-bottom: 1px solid var(--line);
  font-size: 1.02rem; line-height: 1.5; font-weight: 700;
  letter-spacing: -.012em; text-align: center; word-break: keep-all;
}
.topnote .wrap { padding: 9px 20px; }
.topnote { font-size: .95rem; }
.topnote b { font-weight: 800; color: var(--brand-dark); }
@media (max-width: 900px) { .topnote { display: none; } }  /* 하단 바에 같은 문구가 있음 */

/* 요금 안내 페이지에 끼워 넣은 현장 사진 갤러리 (2026-09-22).
   prose 안이 아니라 .wrap 바로 아래에 놓이므로 아래 요금표와 붙지 않게 여백을 준다. */
.casegal { margin: 0 0 56px; }
.casegal > h2:first-child { margin-top: 0; }
.casegal > p:last-child { margin-bottom: 0; }
@media (max-width: 699px) { .casegal { margin-bottom: 40px; } }

/* ------------------------------------------------- mobile fixed callbar --- */
.callbar { display: none; }
.callbar-wrap { display: none; }
.callbar__note { display: none; }
@media (max-width: 900px) {
  .callbar-wrap {
    display: flex; flex-direction: column-reverse;   /* 문구가 버튼 위로 */
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
    background: #fff; padding-bottom: env(safe-area-inset-bottom);
    box-shadow: 0 -2px 12px rgba(21, 24, 29, .08);
  }
  /* 2026-09-28: 두 줄(122px)이던 하단 바를 얇게 줄였다. 문구와 버튼은 그대로 두고
     크기만 줄인다(문구는 2026-09-20 사장님 지시로 넣은 것). 검은 띠+노란 글씨 대신
     옅은 파랑 띠로 바꿔 사이트 색과 맞춘다. 높이는 --callbar-h 와 맞춰야 한다. */
  .callbar__note {
    display: block; margin: 0; padding: 4px 10px 5px; text-align: center;
    font-size: .74rem; line-height: 1.35; font-weight: 600; color: var(--ink-2);
    background: var(--brand-tint); border-top: 1px solid var(--line);
    letter-spacing: -.012em; word-break: keep-all;
  }
  .callbar__note b { font-weight: 800; color: var(--brand-dark); }
  .callbar {
    display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr;
    background: #fff; border-top: 1px solid var(--line);
  }
  .callbar a {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 2px; padding: 7px 4px 8px; font-size: .74rem; font-weight: 700; line-height: 1.3;
    text-decoration: none; color: var(--ink);
  }
  .callbar a + a { border-left: 1px solid var(--line-2); }
  .callbar svg { width: 18px; height: 18px; }
  /* 전화 칸만 꽉 채운 색으로 넓게 잡는다(2026-09-20 사장님 지시: 전화가 눈에 안 띈다).
     아이콘은 왼쪽, 글자 두 줄은 오른쪽에 두어 높이를 한 칸 높이로 맞춘다. */
  .callbar .is-call {
    display: grid; grid-template-columns: auto auto; column-gap: 7px; row-gap: 0;
    align-content: center; justify-content: center; justify-items: start;
    background: var(--call); color: #fff;
    font-size: .86rem; padding: 7px 6px;
  }
  .callbar .is-call svg { grid-row: 1 / span 2; align-self: center; width: 20px; height: 20px; }
  .callbar .is-call small {
    font-size: .7rem; font-weight: 600; opacity: .92;
    letter-spacing: -.01em; white-space: nowrap;
  }
  .callbar .is-kakao { color: #8a6d00; }
  .callbar .is-blog { color: var(--naver); }
  body { padding-bottom: calc(var(--callbar-h) + 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;
    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; }
  .quick .is-blog:hover { background: var(--naver); color: #fff; }
  /* 맨 아래 전화번호 칸. 번호를 한 줄로 두기 위해 메뉴 폭(68px)보다 넓게 잡고
     오른쪽 끝을 메뉴에 맞춰 왼쪽으로 튀어나오게 한다. 초록 바탕으로 구분만 하고
     높이는 다른 칸과 비슷하게 둬서 과하지 않게. */
  .quick .quick__tel {
    float: right; width: max-content;
    margin-top: 12px;                 /* 메뉴 기둥과 떨어진 별도 배지 */
    gap: 0; padding: 11px 18px 13px;
    background: var(--call); color: #fff;
    box-shadow: 0 4px 18px rgba(13, 27, 46, .28);
  }
  .quick a + .quick__tel { border-top: 0; }
  .quick .quick__tel small { font-size: .7rem; font-weight: 600; opacity: .9; margin-bottom: 2px; }
  .quick .quick__tel b { font-size: 1.12rem; font-weight: 800; line-height: 1.25; letter-spacing: .01em; white-space: nowrap; font-variant-numeric: tabular-nums; }
  .quick .quick__tel:hover { background: var(--call-dark); color: #fff; }
  .quick::after { content: ""; display: block; clear: both; }
}

/* ---------------------------------------------------------------- hero ---
   밝은 바탕 위에 실제 작업 전후 슬라이더를 얹는다. 방문자가 처음 보는
   화면에서 '실제로 이 일을 하는 업체'라는 근거를 글이 아니라 사진으로
   제시하는 것이 목적이다. 어두운 네이비 히어로는 요즘 자동 생성 사이트마다
   깔린 형태라 일부러 피한다 — 본문과 같은 밝은 톤이 오히려 이 업종답다. */
.hero {
  position: relative;
  padding: 72px 0 84px;
  background: linear-gradient(180deg, var(--paper-2), var(--paper) 82%);
  border-bottom: 1px solid var(--line);
}

.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: 700; letter-spacing: .02em;
  color: var(--brand); margin-bottom: 22px;
}
.hero__eyebrow::before {
  content: ""; width: 26px; height: 2px; background: currentColor; 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: var(--brand);
  background: linear-gradient(transparent 66%, #cfe1f9 66%);
}
.hero__lead { font-size: 1.09rem; color: var(--ink-2); 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 var(--line); font-size: .87rem; color: var(--ink-3);
}
.hero__meta span { display: inline-flex; align-items: baseline; gap: 7px; }
.hero__meta b { color: var(--ink); font-weight: 600; }

.hero__figure { margin: 0; }
.hero__figure figcaption {
  margin-top: 14px; font-size: .85rem; color: var(--ink-3); 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 var(--line);
  padding: 7px 14px; font-size: .89rem; color: var(--ink-2);
  background: #fff;
}
.chip b { font-weight: 700; color: var(--ink); 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 var(--line);
  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(6, 78, 170, .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 var(--brand); outline-offset: 3px; }
.ba__range:focus-visible { outline: 3px solid var(--brand); 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 ---
   신뢰 근거를 본문 글씨가 아니라 독립 띠로 세운다. 히어로와 같은 밝은 톤. */
.section--facts { background: var(--paper); border-bottom: 1px solid var(--line); }
.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 var(--line); }
.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 var(--line); }
}
/* 아주 좁은 화면(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 var(--line-2); }
}
.fact dt {
  font-size: .76rem; font-weight: 700; letter-spacing: .09em;
  color: var(--brand); 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: var(--ink-3); 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); } }
.cases--inline { margin: 18px 0 14px; }
/* 지역 페이지 현장 사진 갤러리 — 화면 폭과 상관없이 옆으로 넘겨 본다.
   PC 는 한 번에 3장이 보이고 좌우 화살표로 넘긴다. 모바일은 손으로 민다.
   (2026-09-21 사장님 지시: 사진이 더 있는데 3장만 보이고 넘길 수가 없다) */
.cases--inline {
  display: flex; gap: 16px;
  overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}
.cases--inline::-webkit-scrollbar { display: none; }
.cases--inline .case { flex: 0 0 calc((100% - 32px) / 3); scroll-snap-align: start; }

.gal { position: relative; }
.gal__nav {
  position: absolute; top: 40%; transform: translateY(-50%);
  width: 38px; height: 38px; z-index: 2;
  display: none; align-items: center; justify-content: center;
  background: #fff; border: 1px solid var(--line); color: var(--ink-2);
  cursor: pointer; box-shadow: 0 2px 10px rgba(21, 24, 29, .12);
  transition: border-color .15s, color .15s, opacity .15s;
}
.gal__nav:hover { border-color: var(--brand); color: var(--brand); }
.gal__nav[disabled] { opacity: .3; cursor: default; }
.gal__nav[disabled]:hover { border-color: var(--line); color: var(--ink-2); }
.gal__nav svg { width: 20px; height: 20px; }
.gal__nav.is-prev { left: -19px; }
.gal__nav.is-next { right: -19px; }
/* 본문 컬럼 밖 여백에 화살표가 들어갈 자리가 있을 때만 보여 준다 */
@media (min-width: 900px) and (pointer: fine) {
  .gal.is-scrollable .gal__nav { display: flex; }
}

@media (max-width: 699px) {
  .cases--inline {
    gap: 12px; margin-inline: -20px; padding: 0 20px 4px;
    scroll-padding-inline: 20px;
  }
  .cases--inline .case { flex: 0 0 82%; }
}
.cases--inline .case__body { padding: 12px 14px 14px; }
.cases--inline .case__body h3 { font-size: .98rem; }
.prose .cases--inline .case, .prose .cases--inline .case h3 { text-decoration: none; }
.prose .cases--inline .case__body dl { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 10px 0 0; font-size: .84rem; color: var(--ink-3); }
.prose .cases--inline .case__body dl > div { display: flex; gap: 4px; margin: 0; }
.prose .cases--inline .case__body dt, .prose .cases--inline .case__body dd { margin: 0; }


.case {
  border: 1px solid var(--line); overflow: hidden;
  background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-card);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.case:hover { border-color: var(--brand); box-shadow: var(--shadow-hover); }
.case, .case:hover, .case h3, .case dd, .case dt { text-decoration: none; color: var(--ink); }
.case .case__body dl { color: var(--ink-3); }
/* 카드 안에 들어간 비교 슬라이더는 카드 테두리와 겹치지 않게 평평하게 */
.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(6, 78, 170, .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 --- */
/* 요금표 안의 글은 한글 단어를 중간에서 자르지 않는다 ("장비 세/척", "결정됩니/다" 방지).
   overflow-wrap: anywhere 는 한 단어가 칸보다 넓을 때만 쓰이는 안전장치다. */
.ptable { margin-bottom: 40px; word-break: keep-all; overflow-wrap: anywhere; }
.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: 28%; }
.ptable td.is-price { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; width: 18%; color: var(--brand); }
.ptable td.is-note { color: var(--ink-2); font-size: .92rem; width: 54%; }
.ptable tr:hover { background: var(--paper-2); }
/* 표 위 한 줄 안내. 제목과 구분되게 굵기를 주지 않는다 */
.ptable__note {
  margin: 10px 0 12px; font-size: .9rem; font-weight: 400;
  color: var(--ink-2); word-break: keep-all;
}
.ptable__head + .ptable__note { margin-top: 12px; }
@media (max-width: 720px) {
  /* 금액 표: '작업명 + 금액' 두 칸으로 바꾸고 설명은 아래 줄에 깐다.
     금액 칸이 없는 표(.ptable--plain)는 칸이 어긋나 글자가 겹치므로 제외한다. */
  .ptable:not(.ptable--plain) thead { display: none; }
  .ptable:not(.ptable--plain) tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 2px 12px; padding: 14px 0; border-bottom: 1px solid var(--line); }
  .ptable:not(.ptable--plain) th, .ptable:not(.ptable--plain) td { border: 0 !important; padding: 0; width: auto !important; }
  .ptable:not(.ptable--plain) 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; }

  /* 두 칸짜리 비교표: 제목을 윗줄, 설명을 아랫줄로 쌓는다 */
  .ptable--cols2 thead { display: none; }
  .ptable--cols2 tr { display: block; padding: 14px 0; border-bottom: 1px solid var(--line); }
  .ptable--cols2 th, .ptable--cols2 td { display: block; border: 0 !important; padding: 0; width: auto !important; }
  .ptable--cols2 th { margin-bottom: 4px; }
  .ptable--cols2 td { color: var(--ink-2); font-size: .94rem; }

  /* 세 칸 이상 비교표: 칸만 조금 좁힌다(600px 이하는 아래에서 카드형으로 바꾼다) */
  .ptable--cols3 th, .ptable--cols3 td { padding: 12px 10px; }
}
@media (max-width: 600px) {
  /* 2026-10-02: 세 칸 표를 옆으로 밀지 않고 줄마다 카드로 쌓는다(가이드 '표 가로 넘침 금지').
     줄 머리(th)를 굵은 제목으로, 나머지 칸은 build.py mark_tables() 가 넣은 data-label 을 앞에 붙인다. */
  .ptable--cols3 thead { display: none; }
  .ptable--cols3 tr { display: block; padding: 14px 0; border-bottom: 1px solid var(--line); }
  .ptable--cols3 th, .ptable--cols3 td { display: block; border: 0 !important; padding: 0 !important; width: auto !important; text-align: left; }  /* 뒤쪽 .dtable 칸 여백을 이긴다 */
  .ptable--cols3 tbody th { margin-bottom: 6px; }
  .ptable--cols3 td { display: grid; grid-template-columns: 6.4em minmax(0, 1fr); gap: 0 10px; align-items: baseline; margin-top: 3px; color: var(--ink-2); font-size: .94rem; }
  .ptable--cols3 td::before { content: attr(data-label); font-size: .84rem; font-weight: 700; color: var(--ink-3); white-space: normal; }
}

.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; }
/* 요금 비교 안내 (2026-09-29 개편).
   카드·아이콘·알약 라벨·형광펜을 쓰지 않는다. 신문 인용문처럼 왼쪽 검정 선 하나로만 구분하고,
   페이지 안에서 이 모양은 여기 하나뿐이게 둔다(고립 효과: 다른 것과 달라야 기억된다). */
.cmpnote, .cmp { word-break: keep-all; overflow-wrap: anywhere; }
.cmpnote {
  margin: 36px 0 12px; padding: 4px 0 4px 20px;
  border-left: 4px solid var(--ink);
}
.cmpnote p { margin: 0; color: var(--ink-2); line-height: 1.8; }
.cmpnote .cmpnote__q {
  margin-bottom: 8px; color: var(--ink); font-weight: 700;
  font-size: 1.16rem; letter-spacing: -.02em; line-height: 1.45;
}
.cmpnote__go { margin-top: 14px !important; display: flex; flex-wrap: wrap; gap: 6px 22px; }
.cmpnote__go a { color: var(--ink) !important; font-weight: 700; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; text-decoration-color: var(--brand); }
.cmpnote__go a::after { content: " →"; }
.cmpnote__go a:hover { color: var(--brand) !important; }

/* 요금 페이지 #compare: 답을 먼저, 대화로 */
.cmp { margin: 64px 0 8px; padding-top: 36px; border-top: 2px solid var(--ink); scroll-margin-top: 150px; }
.cmp h2 { margin: 0 0 12px; }
.cmp h3 { margin: 40px 0 10px; font-size: 1.12rem; }
.cmp p { color: var(--ink-2); line-height: 1.8; max-width: 70ch; }
.cmp__lead { margin: 0; }
.talk { margin: 28px 0 0; display: grid; gap: 10px; max-width: 70ch; }
.talk p { margin: 0; }
.talk__who { display: block; margin-bottom: 2px; font-size: .82rem; font-weight: 700; color: var(--ink-3); letter-spacing: .02em; }
.talk__q { font-size: 1.12rem; color: var(--ink) !important; font-weight: 600; }
.talk__a { padding-left: 16px; border-left: 3px solid var(--brand); color: var(--ink) !important; }
.talk__a .talk__who { color: var(--brand); }
.cmp__table tbody th { width: 36%; }
.cmp__table tbody tr:first-child th, .cmp__table tbody tr:first-child td { border-top: 2px solid var(--ink); }
.cmp__table td b { color: var(--ink); }
.cmp__note { font-size: .92rem; margin: 4px 0 0; }
.cmp__go { margin: 18px 0 0; color: var(--ink) !important; font-weight: 600; }

/* 지역 페이지 전체(2026-09-29): 눈에 띄는 색은 전화 버튼 초록과 금액 파랑만 남긴다.
   본문 링크 81개가 전부 파란 밑줄이면 아무것도 강조되지 않는다. */
.is-area .prose a:not([class]) { color: var(--ink); text-decoration-color: rgba(6, 78, 170, .38); text-decoration-thickness: 1px; }
.is-area .prose a:not([class]):hover { color: var(--brand); text-decoration-color: var(--brand); }
.is-area .dtable th a { color: var(--ink); text-decoration: none; font-weight: 600; }
.is-area .dtable th a:hover { color: var(--brand); text-decoration: underline; }
/* 뒤쪽 참고용 섹션(상황별·증상별)은 한 묶음으로 보이게 제목을 한 단계 낮춘다(청킹). */
.is-area .section--alt .prose h2, .is-area .section--rule .prose h2 {
  font-size: clamp(1.22rem, 1.05rem + .8vw, 1.55rem); letter-spacing: -.025em;
  margin-top: 48px; padding-top: 28px; border-top: 1px solid var(--line);
}
.is-area .section--alt .prose > h2:first-child, .is-area .section--rule .prose > h2:first-child { border-top: 0; padding-top: 0; margin-top: 0; }
.cmp__tw { margin: 0 0 16px; }
@media (max-width: 639px) {
  .cmpnote { padding-left: 16px; }
  .cmp { margin-top: 48px; }
  /* 모바일: 질문 → 바로하수구 답 → 다른 업체 적는 칸 순서로 쌓는다 */
  .cmp__table, .cmp__table tbody, .cmp__table tr, .cmp__table th, .cmp__table td { display: block; width: auto !important; }
  .cmp__table tr { padding: 16px 0; border-bottom: 1px solid var(--line); }
  .cmp__table th, .cmp__table td { border: 0 !important; padding: 0 !important; }
  .cmp__table tbody th { font-size: 1rem; margin-bottom: 6px; }
  .cmp__table td { color: var(--ink-2); font-size: .95rem; line-height: 1.7; }
}

/* ------------------------------------------------------------- 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;
}

/* ---------------------------------------------------------- work cases ---
   전국 작업 사례 가로 슬라이더. 카드를 한 번에 열 개씩 깔면 보기 힘들어
   좌우 화살표로 넘긴다. 사이트 다른 곳처럼 모서리는 거의 직각이고
   그림자 없이 실선 한 줄로만 구분한다. */
.wcases { position: relative; }
.wcases__viewport { overflow: hidden; }
.wcases__track {
  display: flex; gap: 16px;
  transition: transform .32s cubic-bezier(.4, 0, .2, 1);
}
.wcase {
  flex: 0 0 calc(100% - 0px);
  border: 1px solid var(--line); background: #fff;
  padding: 22px 22px 20px;
}
@media (min-width: 620px) { .wcase { flex-basis: calc((100% - 16px) / 2); } }
@media (min-width: 1000px) { .wcase { flex-basis: calc((100% - 32px) / 3); } }
.wcase__area {
  font-size: .82rem; font-weight: 700; color: var(--brand);
  margin-bottom: 10px;
}
.wcase__sym {
  font-size: 1.04rem; font-weight: 700; color: var(--ink);
  margin: 0 0 10px; line-height: 1.4;
}
.wcase__work {
  font-size: .94rem; color: var(--ink-2); margin: 0;
  padding-top: 12px; border-top: 1px solid var(--line-2);
}

/* 화살표는 카드 바깥에 둔다. 카드 위에 여달면 글을 가린다. */
.wcases__nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px; z-index: 2;
  display: none; align-items: center; justify-content: center;
  background: #fff; border: 1px solid var(--line); color: var(--ink-2);
  cursor: pointer; transition: border-color .15s, color .15s;
}
.wcases__nav:hover { border-color: var(--brand); color: var(--brand); }
.wcases__nav:disabled { opacity: .3; cursor: default; }
.wcases__nav:disabled:hover { border-color: var(--line); color: var(--ink-2); }
.wcases__nav svg { width: 20px; height: 20px; }
.wcases__nav.is-prev { left: -20px; }
.wcases__nav.is-next { right: -20px; }
@media (min-width: 1240px) { .wcases__nav { display: flex; } }

/* 1240px 미만에서는 손가락으로 밀어 본다(지역 페이지 사진칸 .cases--inline 과 같은 방식).
   2026-10-02 사장님: 모바일에서 '사진으로 남긴 현장'이 옆으로 안 넘어간다.
   카드 맞춤(scroll-snap)을 넣고, 넘길 수 있다는 걸 알 수 있게 작은 화살표도 띄운다.
   화살표는 한 장씩 넘기고(site.js), 마우스로 끌어도 넘어간다. */
@media (max-width: 1239px) {
  .wcases__viewport {
    overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory; scroll-behavior: smooth;
    overscroll-behavior-x: contain;
  }
  .wcases__viewport::-webkit-scrollbar { display: none; }
  .wcases__track { transform: none !important; transition: none; }
  .wcase, .pcase { scroll-snap-align: start; }
  .wcase { flex-basis: 78%; }
  .wcases.is-scrollable .wcases__nav { display: flex; }
  .wcases__nav {
    width: 34px; height: 34px; top: 40%;
    box-shadow: 0 2px 10px rgba(21, 24, 29, .14);
  }
  .wcases__nav svg { width: 18px; height: 18px; }
  .wcases__nav.is-prev { left: -14px; }
  .wcases__nav.is-next { right: -14px; }
  .wcases__nav:disabled { opacity: 0; pointer-events: none; }
}
@media (min-width: 620px) and (max-width: 1239px) { .wcase { flex-basis: 44%; } }

/* 두 번째 줄 — /cases 의 사진 사례 카드. 폭·간격·화살표는 위 텍스트 카드와 같은 규칙. */
.wcases__label { margin: 36px 0 16px; }
.wcases__label h3 { font-size: 1.12rem; font-weight: 700; letter-spacing: -.02em; margin: 0 0 6px; }
.wcases__label p { font-size: .94rem; color: var(--ink-2); margin: 0; max-width: 62ch; }
.pcase {
  flex: 0 0 100%; display: block; color: inherit; text-decoration: none;
  border: 1px solid var(--line); background: #fff;
  transition: border-color .15s;
}
.pcase:hover { border-color: var(--brand); }
@media (min-width: 620px) { .pcase { flex-basis: calc((100% - 16px) / 2); } }
@media (min-width: 1000px) { .pcase { flex-basis: calc((100% - 32px) / 3); } }
.pcase__pics { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; background: var(--line); }
.pcase__pic { margin: 0; position: relative; aspect-ratio: 1 / 1; overflow: hidden; background: #f3f4f6; }
.pcase__pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pcase__pic figcaption {
  position: absolute; left: 8px; top: 8px;
  font-size: .72rem; font-weight: 700; line-height: 1; padding: 5px 8px;
  background: rgba(27, 31, 36, .78); color: #fff;
}
.pcase__pic--after figcaption { background: var(--brand); }
.pcase__body { padding: 16px 18px 18px; }
.pcase__meta { font-size: .8rem; font-weight: 700; color: var(--brand); margin: 0 0 8px; }
.pcase__title { font-size: 1.02rem; font-weight: 700; color: var(--ink); margin: 0 0 8px; line-height: 1.4; }
.pcase__sub {
  font-size: .92rem; color: var(--ink-2); margin: 0 0 12px; line-height: 1.55;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.pcase__more { font-size: .88rem; font-weight: 700; color: var(--brand); }
.pcase:hover .pcase__more { text-decoration: underline; text-underline-offset: .2em; }
@media (max-width: 1239px) { .pcase { flex-basis: 78%; } }
@media (min-width: 620px) and (max-width: 1239px) { .pcase { flex-basis: 44%; } }

/* ---------------------------------------------------------- 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;
  border-radius: var(--radius-lg); box-shadow: var(--shadow-card);
  transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.arealist a:hover { border-color: var(--brand); background: #fff; box-shadow: var(--shadow-hover); }
.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(--brand); background: var(--brand-tint); padding: 3px 8px; border-radius: 4px;
}

.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: 14px 18px; background: var(--paper-2);
}
.prose .keypoints h2, .prose .keypoints h3 { margin-top: 0; padding-top: 0; font-size: 1rem; }
.prose .keypoints ul { margin-top: 8px; }
/* 2026-09-28 사장님: 출동 안내가 세로로 너무 길다. 줄 간격·여백만 줄이고 글은 그대로 둔다. */
.prose .keypoints ul:not([class]) > li { font-size: .94rem; line-height: 1.55; }
.prose .keypoints ul:not([class]) > li + li { margin-top: 4px; }
/* 상자 위아래 빈칸도 줄인다: 페이지 첫 본문 섹션 윗여백(96px)과 상자 다음 제목 간격(56px). */
.phead + .section { padding-top: 48px; }
.prose .keypoints + h2 { margin-top: 40px; }
@media (max-width: 699px) {
  .phead + .section { padding-top: 28px; }
  .prose .keypoints + h2 { margin-top: 32px; }
}

/* --------------------------------------------------------------- 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__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; }
/* 2026-09-28: 클래스 없는 링크에 걸리는 전역 파랑(a:not([class]))이 남색 푸터 위에서
   거의 안 보였다(대비 약 2.2:1). 푸터 안에서는 밝은 회색으로 덮는다. */
.ftr a:not([class]) { color: #c9d4e3; text-decoration: none; }
.ftr a:not([class]):hover { color: #fff; text-decoration: underline; text-underline-offset: .2em; }
.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__meta { display: flex; flex-direction: column; gap: 4px; }
@media (min-width: 880px) { .ftr__meta { text-align: right; } }
.ftr__copy { font-size: .82rem; color: #6b7c92; }
.ftr__date { 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; }
}

/* ------------------------------------------------------- 히어로 도면 격자 ---
   옅은 격자를 히어로 배경에만 깔아 '배관을 다루는 업체'라는 인상을
   텍스트 없이 전달한다. 아래로 갈수록 사라져 본문과 자연스럽게 이어진다. */
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(6, 78, 170, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(6, 78, 170, .055) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: linear-gradient(180deg, #000, transparent 76%);
          mask-image: linear-gradient(180deg, #000, transparent 76%);
}
.hero .wrap { position: relative; }


/* -------------------------------------------------------------- 블로그 글 ---
   네이버 블로그 RSS 를 카드로 보여준다 (assets/js/blog.js).
   본문은 가져오지 않으므로 카드는 제목·요약·썸네일까지만 담는다. */
.posts {
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr;
}
@media (min-width: 640px) { .posts { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .posts { grid-template-columns: repeat(3, 1fr); } }

.posts__state {
  grid-column: 1 / -1;
  padding: 40px 0;
  text-align: center;
  color: var(--ink-3);
}

/* 홈의 블로그 섹션은 세로로 길어지면 아래 내용이 밀리므로
   가로로 늨어놓고 화살표로 넘긴다. 작업 사례 슬라이더와 같은 방식. */
.posts--slider { display: block; position: relative; }
/* 모든 화면에서 가로 스크롤(터치 스와이프·트랙패드·마우스 드래그). 화살표는 PC 보조 수단. */
.posts--slider .posts__viewport {
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-behavior: smooth;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
  cursor: grab;
}
.posts--slider .posts__viewport::-webkit-scrollbar { display: none; }
.posts--slider .posts__viewport.is-drag { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; }
.posts--slider .posts__viewport.is-drag .post { pointer-events: none; }
.posts--slider .posts__track { display: flex; gap: 20px; }
.posts--slider .post { flex: 0 0 78%; scroll-snap-align: start; }
.posts--slider .post img { -webkit-user-drag: none; user-select: none; }
@media (min-width: 640px) { .posts--slider .post { flex-basis: calc((100% - 20px) / 2.2); } }
@media (min-width: 1000px) { .posts--slider .post { flex-basis: calc((100% - 40px) / 3.2); } }
/* 지역 페이지처럼 좁은 본문 칼럼 안에서는 한 번에 2장 조금 넘게 */
@media (min-width: 1000px) { .prose .posts--slider .post { flex-basis: calc((100% - 20px) / 2.2); } }
.prose .posts--slider .post, .prose .posts--slider .post:hover { text-decoration: none; }

.posts__nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px; z-index: 2;
  display: none; align-items: center; justify-content: center;
  background: #fff; border: 1px solid var(--line); color: var(--ink-2);
  cursor: pointer; transition: border-color .15s, color .15s;
}
.posts__nav:hover { border-color: var(--brand); color: var(--brand); }
.posts__nav:disabled { opacity: .3; cursor: default; }
.posts__nav:disabled:hover { border-color: var(--line); color: var(--ink-2); }
.posts__nav svg { width: 20px; height: 20px; }
.posts__nav.is-prev { left: -20px; }
.posts__nav.is-next { right: -20px; }
@media (min-width: 1240px) { .posts__nav { display: flex; } }

/* 블로그 탭의 카테고리 버튼. 네이버에서 카테고리를 늘리면
   글 목록에서 알아서 뽑아 버튼이 늘어난다. */
.ptabs {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-bottom: 28px;
}
.ptabs__btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 15px;
  background: #fff; border: 1px solid var(--line); color: var(--ink-2);
  font-size: .92rem; font-weight: 600; font-family: inherit;
  cursor: pointer; transition: border-color .15s, color .15s, background-color .15s;
}
.ptabs__btn:hover { border-color: var(--brand); color: var(--brand); }
.ptabs__btn.is-on { background: var(--navy); border-color: var(--navy); color: #fff; }
.ptabs__n {
  font-size: .8rem; font-weight: 700; color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.ptabs__btn.is-on .ptabs__n { color: rgba(255, 255, 255, .7); }

.post {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--line);
  text-decoration: none;
  color: inherit;
  transition: border-color .15s ease;
}
.post:hover { border-color: var(--ink); }

.post__shot {
  display: block;
  position: relative;
  /* 네이버 RSS 썸네일은 365x365 정사각 한 종류뿐이다. 16:10 으로 자르면
     위아래가 크게 잘려 나가므로 4:3 으로만 좁힌다. */
  aspect-ratio: 4 / 3;
  background: var(--paper-2);
  overflow: hidden;
}
.post__shot img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .4s ease;
}
.post:hover .post__shot img { transform: scale(1.045); }

/* 썸네일이 없는 글은 브랜드 색 면으로 대신한다 (레이아웃이 흔들리지 않게). */
.post__shot--none {
  background: var(--brand-tint);
  background-image:
    linear-gradient(rgba(6, 78, 170, .09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(6, 78, 170, .09) 1px, transparent 1px);
  background-size: 28px 28px;
}

.post__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 16px 20px 20px;
}

.post__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 9px;
  font-size: .82rem;
  color: var(--ink-3);
}
.post__cat {
  font-weight: 700;
  color: var(--brand);
}
.post__cat + time::before {
  content: "";
  display: inline-block;
  width: 1px; height: 10px;
  margin-right: 8px;
  background: var(--line);
  vertical-align: -1px;
}

.post__title {
  display: block;
  font-size: 1.06rem;
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.45;
  margin-bottom: 8px;
}
.post__sum {
  display: block;
  font-size: .93rem;
  line-height: 1.65;
  color: var(--ink-2);
}
.post__more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  font-size: .89rem;
  font-weight: 700;
  color: var(--brand);
}
.post__more::after {
  content: "";
  width: 6px; height: 6px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
}

/* 요금표 위 안내. 표를 보러 온 사람이 제일 먼저 확인하는 게 "밤에 부르면
   더 받나"라서 표보다 위에 둔다. 배지나 체크 아이콘 같은 장식은 넣지
   않는다. 그런 건 어느 랜딩페이지에나 있어서 읽기 전에 광고로 걸러진다. */
.nosur {
  border-left: 3px solid var(--brand);
  background: var(--brand-tint);
  padding: 22px 24px;
  margin-bottom: 36px;
}
.nosur h2 {
  font-size: 1.18rem;
  line-height: 1.5;
  margin: 0 0 10px;
  color: var(--ink);
}
.nosur p {
  font-size: .96rem;
  line-height: 1.8;
  color: var(--ink-2);
  margin: 0 0 8px;
}
.nosur p:last-child { margin-bottom: 0; }

@media (min-width: 720px) {
  .nosur { padding: 26px 30px; }
  .nosur h2 { font-size: 1.3rem; }
}

/* 사례 상세의 작업 전/후 사진. 목록 페이지는 손잡이로 겹쳐 보는 방식이지만
   여기서는 두 장을 나란히 두고 각각 설명을 붙인다. 상세 페이지는 읽으러
   들어온 곳이라 조작을 시키는 것보다 그냥 보이는 편이 낫다. */
.cba {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
  margin: 0 0 34px;
}
.cba__item { margin: 0; }
.cba__item img {
  width: 100%; height: auto; display: block;
  border: 1px solid var(--line);
}
.cba__item figcaption {
  margin-top: 8px;
  font-size: .9rem;
  line-height: 1.6;
  color: var(--ink-2);
}
.cba__item figcaption b { color: var(--ink); margin-right: 4px; }

@media (min-width: 640px) {
  .cba { grid-template-columns: 1fr 1fr; gap: 18px; }
}

/* 지역 페이지(.cba--swipe)에서만 모바일에서 전후 사진을 옆으로 넘겨 본다.
   지역 페이지가 길어 스크롤이 너무 늘어나는 것을 줄이기 위한 것(2026-09-20).
   사례 상세 페이지는 사진을 보러 들어온 곳이라 세로 두 장 그대로 둔다. */
@media (max-width: 639px) {
  .cba--swipe {
    display: flex; gap: 12px;
    margin: 0 -20px 14px; padding: 0 20px;
    overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 20px;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .cba--swipe::-webkit-scrollbar { display: none; }
  .cba--swipe .cba__item { flex: 0 0 84%; scroll-snap-align: start; }
}

/* 옆으로 넘긴다는 안내. 화면이 넓어 한 줄에 다 보이면 필요 없다. */
.swipehint {
  display: none;
  margin: -14px 0 0 !important;
  font-size: .84rem; color: var(--ink-3);
}
@media (max-width: 699px) { .swipehint { display: block; } }
@media (min-width: 640px) { .cba + .swipehint { display: none; } }

/* ------------------------------------------------------ 지역 페이지 목차 --- */
.toc {
  border: 1px solid var(--line); background: var(--paper-2);
  padding: 14px 16px 12px;
}
.toc__t { font-size: .82rem; font-weight: 700; color: var(--ink-3); margin: 0 0 8px; }
.prose .toc__list { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.prose .toc__list li { margin: 0; padding: 0; }
.prose .toc__list a {
  display: inline-block; padding: 5px 11px;
  border: 1px solid var(--line); background: #fff;
  font-size: .86rem; line-height: 1.4; color: var(--ink-2);
  text-decoration: none; word-break: keep-all;
}
.prose .toc__list a:hover { border-color: var(--brand); color: var(--brand); }
.prose h2[id] { scroll-margin-top: 78px; }
/* PC 는 헤더 안에 상단 안내(.topnote)가 붙어 더 높다 */
@media (min-width: 901px) { .prose h2[id] { scroll-margin-top: 128px; } }

/* 사례 목록에서 상세로 넘어가는 링크. 목록 카드는 요약만 두고 자세한
   설명은 따로 둔다. 한 페이지에 다 밀어 넣으면 아무도 안 읽는다. */
.case__more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  font-size: .9rem;
  font-weight: 700;
  color: var(--brand);
}
.case__more::after {
  content: "";
  width: 6px; height: 6px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
}

/* ------------------------------------------------------------------ 연휴 공지 */
/* 헤더 바로 아래에서 한 번에 읽혀야 하는 띠. 페이지 폭을 꽉 채우고 배경을
   진한 브랜드색으로 깔아 본문과 확실히 분리한다. 문구가 두 줄이 되어도
   상관없으므로 글자를 충분히 키운다. */
.holiday {
  background: var(--brand);
  color: #fff;
  padding: 30px 0 32px;
  border-bottom: 4px solid var(--brand-dark);
}
.holiday .wrap { text-align: center; }
.holiday__tag {
  display: inline-block;
  background: var(--kakao);
  color: var(--kakao-ink);
  font-size: .92rem;
  font-weight: 800;
  letter-spacing: .02em;
  padding: 5px 13px;
  border-radius: 2px;
  margin-bottom: 14px;
}
.holiday__title {
  font-size: clamp(1.45rem, 4.6vw, 2.15rem);
  font-weight: 800;
  line-height: 1.32;
  letter-spacing: -.02em;
  margin: 0 0 12px;
  color: #fff;
}
.holiday__title b { color: var(--kakao); font-weight: 800; }
.holiday__sub {
  font-size: clamp(1rem, 2.3vw, 1.18rem);
  line-height: 1.7;
  color: #dbe6f7;
  margin: 0 auto;
  max-width: 44em;
}
.holiday__sub strong { color: #fff; font-weight: 700; }
.holiday .btnrow { justify-content: center; margin-top: 20px; }
.holiday .btn--ghost {
  background: #fff;
  border-color: #fff;
  color: var(--brand);
}
.holiday .btn--ghost:hover { background: #eef3fb; border-color: #eef3fb; color: var(--brand-dark); }

/* 2026-10-02 P2: 모바일(720px 이하)에서는 한 줄 띠만 보여 첫 화면에 h1·금액 줄이 나오게 한다.
   데스크톱은 그대로(.holiday__line 숨김). */
.holiday__line { display: none; color: #fff; text-decoration: none; }
/* 2026-10-02: 모바일 한 줄 띠가 전화 링크(a). 탭 영역 44px 이상. */
@media (max-width: 720px) {
  .holiday { padding: 12px 0; border-bottom-width: 2px; }
  .holiday__tag, .holiday__title, .holiday__sub, .holiday .btnrow { display: none; }
  .holiday__line {
    display: block; margin: 0; font-size: 14px; font-weight: 800; line-height: 1.45;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #fff;
  }
  .holiday__line:active { opacity: .85; }
}
/* ------------------------------------------- 지역 페이지 증상별 기본 금액 ---
   첫 화면 버튼 아래 증상 버튼 4개. 누르면 작은 창(dialog)에 기본 금액과
   변동 고지, 전화 버튼을 보여준다. (2026-09-27) */
.ppick { margin-top: 26px; max-width: 640px; }
/* 첫 화면(.phead) 안에 들어가서 '.phead p' 글자 크기·색·폭이 덮어쓰지 않게 한 단계 더 좁혀 쓴다. */
.ppick .ppick__t { margin: 0 0 10px; max-width: none; font-size: .92rem; color: var(--ink-2); word-break: keep-all; }
.ppick__list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
@media (min-width: 700px) { .ppick__list { grid-template-columns: repeat(4, 1fr); } }
/* 모바일은 4개를 한 줄로 — 2줄이면 아랫줄이 하단 전화 바에 가려져 첫 화면에서 안 보인다. (2026-09-27) */
/* 문구는 그대로 두고 여백만 줄여, 390px 급은 물론 갤럭시 S(360x800)에서도 넷이 다 보이게 한다.
   지역 페이지(.ppick 가 있는 첫 화면)에만 적용된다. */
@media (max-width: 699px) {
  .phead:has(.ppick) { padding-top: 28px; }
  .phead:has(.ppick) .btnrow { margin-top: 18px; }
  .phead:has(.ppick) .btn--lg { padding-top: 12px; padding-bottom: 12px; }
  .ppick { margin-top: 10px; }
  .ppick .ppick__t { margin-bottom: 8px; font-size: .88rem; }
  .ppick__list { grid-template-columns: repeat(4, 1fr); gap: 6px; }
  .ppick__b { min-height: 48px; padding: 5px 3px; font-size: .8rem; line-height: 1.25; }
}
.ppick__b {
  display: flex; align-items: center; justify-content: center; min-height: 52px;
  padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius);
  background: #fff; color: var(--ink); font-weight: 700; text-align: center;
  text-decoration: none; word-break: keep-all; line-height: 1.3;
  transition: border-color .15s, color .15s, background-color .15s;
}
.ppick__b:hover, .ppick__b:focus-visible { border-color: var(--brand); color: var(--brand); background: var(--brand-tint); }

.ppop {
  width: min(420px, calc(100% - 32px)); max-height: calc(100vh - 32px);
  padding: 0; border: 0; border-radius: 4px; color: var(--ink); background: #fff;
  box-shadow: 0 18px 48px rgba(13, 27, 46, .28); overflow: auto; overscroll-behavior: contain;
}
@supports (height: 100dvh) { .ppop { max-height: calc(100dvh - 32px); } }
.ppop::backdrop { background: rgba(13, 27, 46, .55); }
.ppop__in { position: relative; padding: 24px 20px 20px; }
.ppop__x {
  position: absolute; top: 8px; right: 8px; width: 40px; height: 40px;
  display: grid; place-items: center; border: 0; background: none; color: var(--ink-2); cursor: pointer;
}
.ppop__x svg { width: 20px; height: 20px; }
.ppop .ppop__t { margin: 0 0 10px; padding-right: 40px; max-width: none; font-size: 1.25rem; font-weight: 800; color: var(--ink); }
.ppop .ppop__price {
  max-width: none; font-size: 1rem;
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  margin: 0; padding: 10px 0; border-bottom: 1px solid var(--line-2);
}
.ppop__price span { color: var(--ink-2); font-size: .95rem; }
.ppop__price b { color: var(--brand); font-size: 1.45rem; font-weight: 800; white-space: nowrap; }
.ppop .ppop__d { margin: 12px 0 0; max-width: none; font-size: .95rem; color: var(--ink-2); word-break: keep-all; }
.ppop .ppop__note {
  max-width: none;
  margin: 16px 0; padding: 12px 14px; background: var(--paper-2); border-radius: var(--radius);
  font-size: .88rem; color: var(--ink-2); word-break: keep-all;
}
.ppop__call { width: 100%; }
.ppop__more { display: block; margin-top: 12px; text-align: center; font-size: .9rem; }

/* ---------------------------------------------------- 작업 진행 4단계 ---
   지역 페이지 '접수 안내' 문단 바로 아래(tools/enrich.py STEPS_HTML).
   2026-09-28 사장님 지시. 글자는 전부 HTML 텍스트로 두고 아이콘만 장식(aria-hidden)이다.
   검색엔진은 <ol> 순서와 글자를 그대로 읽는다. 단계 번호는 CSS counter 로 그리는
   장식이라 본문 텍스트에 섞이지 않는다. 이미지·지연 로딩이 없어 레이아웃이 흔들리지 않는다. */
.prose .steps { margin-top: 28px; }
.prose .steps__cap { font-size: .95rem; font-weight: 700; color: var(--ink-2); }
.prose .steps__list {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px;
  margin-top: 12px; counter-reset: step;
}
@media (min-width: 700px) { .prose .steps__list { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; } }
.prose .steps__item {
  position: relative; counter-increment: step;
  display: flex; flex-direction: column; gap: 6px; margin: 0;
  padding: 18px 16px 16px; background: #fff;
  border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-card);
  word-break: keep-all; overflow-wrap: break-word;
}
.prose .steps__ic {
  position: relative; display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--brand-tint); color: var(--brand);
}
.prose .steps__ic svg { width: 22px; height: 22px; }
.prose .steps__ic::after {
  content: counter(step);
  position: absolute; top: -4px; right: -6px;
  min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px;
  background: var(--brand); color: #fff;
  font-size: .72rem; font-weight: 700; line-height: 20px; text-align: center;
}
.prose .steps__t { display: block; font-size: 1rem; line-height: 1.4; color: var(--ink); }
.prose .steps__d { display: block; font-size: .86rem; line-height: 1.55; color: var(--ink-2); }
/* 넓은 화면에서는 칸 사이에 진행 방향 화살표 */
@media (min-width: 700px) {
  .prose .steps__item:not(:last-child)::after {
    content: ""; position: absolute; top: 36px; right: -11px; z-index: 1;
    width: 8px; height: 8px;
    border-top: 2px solid var(--brand); border-right: 2px solid var(--brand);
    transform: rotate(45deg); background: transparent;
  }
}

/* 가로 사진칸 마우스 끌기 (assets/js/site.js, 2026-09-28).
   끄는 동안에는 칸 맞춤(scroll-snap)과 부드러운 스크롤을 꺼야 손을 따라 움직인다. */
@media (pointer: fine) {
  .cases--inline, .cba--swipe { cursor: grab; }
}
.cases--inline img, .cba--swipe img { -webkit-user-drag: none; user-select: none; }
.cases--inline.is-dragging, .cba--swipe.is-dragging {
  cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; user-select: none;
}

/* ------------------------------------------ 지역 페이지 UX 정리 (2026-09-29) ---
   원칙: 덜어내서 중요한 것만 남긴다. 강조색은 초록(전화)·파랑(금액)만. */

/* 사례 사진 위아래 회색 띠 버그: 본문 공통 figure 여백(28px)이 카드 사진에도 먹었다.
   실제 현장 사진이 제일 강한 근거이므로 카드 폭을 꽉 채운다. */
.prose .case__shot { margin: 0; }
.prose .case__shot picture { display: block; }

/* 첫 화면: 기준 금액 한 줄 (tools/build.py add_facts) */
.pfacts {
  margin: 18px 0 0 !important; max-width: none !important;
  font-size: .95rem !important; color: var(--ink-2); word-break: keep-all;
}
.pfacts b { color: var(--brand); font-weight: 800; font-variant-numeric: tabular-nums; }
.pfacts span::before { content: "·"; margin: 0 .55em; color: var(--ink-3); }
@media (max-width: 639px) {
  .is-area .phead .btnrow .btn { flex: 1 1 100%; }         /* 엄지로 누르기 쉽게 한 줄 전체 */
  .pfacts span { display: block; margin-top: 2px; }
  .pfacts span::before { content: none; }
}

/* PC 떠 있는 전화 상자: 첫 화면 버튼이 보일 때는 숨김 (site.js) */
.quick .quick__tel { transition: opacity .2s ease, transform .2s ease; }
.quick .quick__tel.is-wait { opacity: 0; transform: translateX(14px); pointer-events: none; }

/* 제목 크기: 18개 제목이 모두 가장 큰 글씨면 전부 소리친다. 한 단계 낮춘다. */
.is-area .prose > h2, .is-area .prose .casegal > h2 { font-size: clamp(1.42rem, 1.12rem + 1.25vw, 1.9rem); }

/* 작업 순서: 아이콘·배지·화살표 카드 대신 번호와 글만 */
.is-area .prose .steps__list { gap: 0; border-top: 1px solid var(--line); }
.is-area .prose .steps__item {
  background: none; border: 0; border-radius: 0; box-shadow: none;
  padding: 16px 16px 8px 0; gap: 4px;
}
.is-area .prose .steps__item::before {
  content: counter(step, decimal-leading-zero);
  font-size: .8rem; font-weight: 700; letter-spacing: .06em; color: var(--brand);
  font-variant-numeric: tabular-nums;
}
.is-area .prose .steps__ic { display: none; }
.is-area .prose .steps__item::after { display: none !important; }
@media (min-width: 700px) {
  .is-area .prose .steps__list { gap: 0; }
  .is-area .prose .steps__item + .steps__item { padding-left: 16px; border-left: 1px solid var(--line-2); }
}

/* 바로 가기: 테두리 칩 16개 → 조용한 글자 목록 */
.is-area .toc { border: 0; background: none; padding: 18px 0 0; border-top: 1px solid var(--line); }
.is-area .prose .toc__list { gap: 6px 20px; }
.is-area .prose .toc__list a {
  padding: 0; border: 0; background: none; font-size: .9rem; color: var(--ink-2);
  text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 4px;
}
.is-area .prose .toc__list a:hover { color: var(--brand); text-decoration-color: var(--brand); }

/* 사례 카드: 본문 제목 여백(36px)이 카드 제목에도 먹어 사진과 제목 사이가 떴다 */
.prose .case__body h3 { margin-top: 0; }
.prose .case__body dl { margin-top: 8px !important; }

/* PC 오른쪽 메뉴: 전화 상자를 메뉴 흐름에서 빼서 아래에 매단다.
   (메뉴 남색 배경이 상자 자리까지 늘어나 상자가 메뉴를 덮던 문제, 숨겼을 때 빈 남색 공간) */
@media (min-width: 1264px) {
  .quick .quick__tel { position: absolute; right: 0; top: 100%; float: none; margin-top: 12px; }
}

/* 하단 바 전화 칸: '문의하기' 한 줄 (2026-09-29) */
@media (max-width: 900px) {
  .callbar .is-call { display: flex; flex-direction: row; gap: 7px; font-size: .95rem; }
  .callbar .is-call svg { width: 20px; height: 20px; }
}

/* 지역 페이지 첫 화면 (tools/build.py trim_lead) */
.is-area .phead h1 + p { font-size: 1.06rem; color: var(--ink-2); margin-top: 0; }
.is-area .phead .phead__more {
  margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line);
  font-size: .92rem !important; line-height: 1.75; color: var(--ink-3);
}
@media (max-width: 639px) {
  .is-area .phead { padding-top: 28px; padding-bottom: 30px; }
  .is-area .phead h1 { margin-bottom: 12px; }
  .is-area .phead .btnrow { margin-top: 18px; }
}

/* 좁은 폰(380px 이하)에서는 금액 버튼 2x2 - 4칸이면 '역류·식당 배관'이 세 줄로 꺾인다 */
@media (max-width: 380px) { .ppick__list { grid-template-columns: repeat(2, 1fr) !important; } }

/* 작업 진행 과정: 표 위 작은 제목을 뺐으므로 제목 바로 아래로 붙인다 (2026-09-30) */
.is-area .prose h2 + .steps { margin-top: 14px; }
.is-area .prose h2 + .steps .steps__list { margin-top: 0; }

/* 첫 화면 첫마디 (2026-09-30) */
.is-area .phead .phead__ask {
  margin: 0 0 6px !important; font-size: 1.1rem !important; font-weight: 700;
  color: var(--ink) !important; line-height: 1.5; letter-spacing: -.02em;
}
.is-area .phead .phead__ask span { font-weight: 500; color: var(--ink-2); }
.is-area .phead .phead__ask + p { font-size: .98rem !important; color: var(--ink-2); }
@media (max-width: 639px) {
  .is-area .phead .phead__ask { font-size: 1.02rem !important; }
  .is-area .phead .phead__ask span { display: block; }
}

/* 서울 동 페이지 링크 줄 (build.py slim_dong) */
.is-area .prose .dlinks { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.is-area .prose .dlinks a { font-weight: 700; color: var(--ink); text-decoration: underline; text-decoration-color: var(--brand); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.is-area .prose .dlinks a::after { content: " →"; }
.is-area .prose .dsym { margin: 16px 0 18px; padding: 0; }
.is-area .prose .dsym li { margin: 0; padding: 0; }
.is-area .prose .dsym li::before { content: none; }