/* 두손하우징 — 테마
 * 톤: 웜뉴트럴(라이트) + 그린 액센트. 시공사진이 주인공이 되도록 배경은 물러선다.
 *     마이타임(다크골드 세리프)과 정반대 얼굴 — 같은 엔진이지만 인상이 겹치면 안 된다.
 * 편집 기준: '건축 포트폴리오 인쇄물'. 카드 그림자로 띄우지 않고 괘선·여백·정렬로 위계를 만든다.
 * 폰트: 전부 셀프호스팅 woff2 (KS X 1001 2350자 서브셋). 외부 핫링크 없음.
 *   헤드라인 = Paperlogy — 굵고 각진 지오메트릭. 시공사 특유의 단단함.
 *   본문     = Pretendard — 장문 가독성.
 *
 * ★ 폰트 선정 근거 (페페 폰트 창고 ~/pp-dev/fonts/ 기준, 2026-08-27 재검토)
 *   1순위였던 학교안심 곧은제목체(분양·공공캠페인·구조감 태그, 테라 픽)는
 *   실물 렌더까지 확인했으나 LICENSE-AUDIT.json 에서 risky + fsType=8 +
 *   "고객 사이트 배포 금지" 판정 → 폐기. KoPub과 같은 등급의 임베딩 제한이다.
 *   safe_for_client_sites 목록 ∩ fsType=0 중 가장 굵고 각진 얼굴이 Paperlogy이며,
 *   G마켓산스는 700이 상한이고 무드가 '친근·팝·B2C'라 시공사와 어긋난다.
 *   → Paperlogy 유지가 정답. 단 기존엔 800 한 축만 써서 9웨이트를 낭비했으므로
 *     디스플레이 900 / 섹션 800 / 소제목 600 / 도면 라벨 500 의 4축 체계로 재설계한다.
 *   전 웨이트 KS X 1001 2350자 커버리지·실컨투어 검증 완료(스텁 글리프 0).
 */

/* ───────── 웹폰트 (셀프호스팅) ───────── */
@font-face {
  font-family: "Paperlogy";
  src: url("/assets/fonts/Paperlogy-5Medium.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Paperlogy";
  src: url("/assets/fonts/Paperlogy-6SemiBold.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Paperlogy";
  src: url("/assets/fonts/Paperlogy-8ExtraBold.woff2") format("woff2");
  font-weight: 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Paperlogy";
  src: url("/assets/fonts/Paperlogy-9Black.woff2") format("woff2");
  font-weight: 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "PretendardKR";
  src: url("/assets/fonts/Pretendard-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "PretendardKR";
  src: url("/assets/fonts/Pretendard-Medium.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "PretendardKR";
  src: url("/assets/fonts/Pretendard-SemiBold.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "PretendardKR";
  src: url("/assets/fonts/Pretendard-Bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  --paper:      #faf8f5;   /* 최상위 배경 — 웜 화이트 */
  --paper-2:    #f2eee8;   /* 섹션 교차 배경 */
  --card:       #ffffff;
  --line:       #e2dcd2;
  --line-2:     #cfc7ba;
  --ink:        #23201c;   /* 본문 — 순흑 아님, 웜 그레이 */
  --ink-dim:    #5c564e;
  --ink-mute:   #8b8378;

  --grn:        #32c155;   /* 브랜드 (로고 실측) */
  --grn-dp:     #1f8a3a;   /* 텍스트/보더용 — 흰바탕 대비 확보 */
  --grn-dk:     #14602a;
  --grn-tint:   #eaf7ee;
  --on-grn:     #052e13;

  --kakao:      #fae100;
  --kakao-ink:  #191600;
  --ok:         #1f8a3a;
  --warn:       #b4462a;

  --sans:  "PretendardKR", "Pretendard", "Pretendard Variable", "Apple SD Gothic Neo",
           "Malgun Gothic", sans-serif;
  /* 헤드라인 — Paperlogy 4축(900/800/600/500). 위계는 크기가 아니라 웨이트로 먼저 만든다 */
  --head:  "Paperlogy", "PretendardKR", "Apple SD Gothic Neo", sans-serif;
  --num:   "PretendardKR", "Pretendard", sans-serif;   /* tabular-nums 쓰는 수치용 */
  /* 도면 라벨 전용 — PLAN 001 / SCALE 1:50 같은 제도 표기. Medium + 넓은 자간 */
  --label: "Paperlogy", "PretendardKR", sans-serif;

  --wrap: 1160px;
  --pad: clamp(20px, 5vw, 40px);
  /* 인쇄물 느낌 — 라운드를 줄여 각을 세운다. 도면/제본의 직각 */
  --r: 3px;
  --r-sm: 2px;
  --cta-h: 62px;            /* 모바일 고정바 높이 */
  /* 그림자는 '떠 있는 카드' 연출이 아니라 최소 보조로만 */
  --shadow: 0 1px 2px rgba(35,32,28,.05);
  --rule: 1px solid var(--line);

  /* ── 모션 단일 소스 ──
   * 인터랙션 언어 = 제도(製圖). 통통 튀는 스프링이 아니라
   * 자를 대고 선을 긋는 감각 — 시작이 즉각적이고 끝에서 정확히 멈춘다.
   */
  --ease-pen:   cubic-bezier(.16,.84,.34,1);    /* 선이 그어지는 궤적 — 길게 감속 */
  --ease-draft: cubic-bezier(.22,.68,.35,1);    /* 스냅 — 자에 딱 붙는 느낌 */
  --t-fast:  .16s;
  --t-base:  .26s;
  --t-slow:  .5s;
  --t-draw:  1.1s;    /* stroke-dashoffset 드로잉 */
  --hair:    1px;     /* 치수선 굵기 */
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16.5px;
  font-weight: 400;
  line-height: 1.82;         /* 한글 장문은 넉넉한 행간이 읽기 편하다 */
  letter-spacing: -.008em;
  word-break: keep-all;      /* 한글 어절 단위 줄바꿈 */
  overflow-wrap: break-word;
  font-feature-settings: "case" 1;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* 숫자는 전부 등폭 — 30년/15년/45년, 평수, 전화번호가 흔들리지 않게 */
time, .num, .duo-yr, .hero-trust b, .step .sn, .hdr-tel, .pager, .art-meta {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

img, svg { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--grn-dp); outline-offset: 3px; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--pad); }
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--grn-dp); color: #fff; padding: 10px 16px; font-weight: 700;
}
.skip:focus { left: 0; }

/* ───────── 타이포 ─────────
 * Paperlogy 4축을 위계에 그대로 매핑한다. 크기만 키우는 위계는 인쇄물에서 약하다.
 *   h-xl 900(주장) → h-lg 800(섹션) → h-md 800(블록) → .plabel 500(도면 라벨)
 * 크기가 커질수록 자간을 더 조인다(옵티컬 트래킹).
 */
.h-xl, .h-lg, .h-md {
  font-family: var(--head);
  font-weight: 800;
  line-height: 1.26;
  margin: 0;
  word-break: keep-all;
}
.h-xl {
  font-size: clamp(2.05rem, 5.4vw, 3.5rem);
  font-weight: 900;          /* 주장 한 줄만 Black — 여기서만 목소리를 키운다 */
  line-height: 1.18;
  letter-spacing: -.045em;   /* 큰 글자일수록 더 조인다 */
}
.h-lg { font-size: clamp(1.6rem, 3.6vw, 2.4rem);  letter-spacing: -.035em; }
.h-md { font-size: clamp(1.24rem, 2.3vw, 1.58rem); letter-spacing: -.028em; }
.grn { color: var(--grn-dp); }

/* 도면 라벨 — PLAN 001 / SCALE 1:50 / N↑ 같은 제도 표기.
 * Paperlogy Medium + 넓은 자간. 본문 서체와 섞이지 않아야 '표기'로 읽힌다. */
.plabel {
  font-family: var(--label); font-weight: 500;
  font-size: .66rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--ink-mute); font-variant-numeric: tabular-nums;
}

/* 섹션 라벨 — 도면 인덱스 태그처럼. 짧은 괘선 + 넓은 레터스페이싱 대문자감 */
.eyebrow {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--sans);
  font-size: .755rem; font-weight: 700;
  /* 한글은 자간을 벌리면 흩어져 보인다 — 라벨감은 괘선+색으로 내고 자간은 최소로 */
  letter-spacing: .01em;
  color: var(--grn-dp); margin: 0 0 18px;
}
.eyebrow::before {
  content: ""; width: 22px; height: 2px; border-radius: 0;
  background: var(--grn); flex: none;
}
.lede {
  color: var(--ink-dim);
  font-size: 1.075rem; font-weight: 400; line-height: 1.85;
  max-width: 60ch; margin: 18px 0 0;
  letter-spacing: -.012em;
}

section { padding: clamp(60px, 8.5vw, 108px) 0; position: relative; }
.sec-alt { background: var(--paper-2); }
.sec-line { border-top: 1px solid var(--line); }

/* 섹션 머리 — 제목 아래 얇은 괘선으로 '지면 단락'을 만든다 */
.sec-head { margin-bottom: clamp(48px, 6.5vw, 72px); }

/* ───────── 도판(figure) 공통 — 인쇄물의 그림+캡션 ─────────
 * 실사진 수급 시 <img> 가 그대로 들어와도 같은 프레임이 적용된다.
 */
.wide-fig { margin: 0 0 clamp(30px, 4vw, 44px); }
.wide-fig img, .wide-fig .heroart {
  width: 100%; display: block; border: 1px solid var(--line-2); border-radius: var(--r);
  aspect-ratio: 16/9; object-fit: cover; background: var(--paper-2);
}
.wide-fig figcaption {
  margin-top: 11px; font-size: .78rem; color: var(--ink-mute);
  padding-left: 13px; border-left: 2px solid var(--grn); line-height: 1.65;
}

/* ───────── 헤더 ───────── */
.hdr {
  position: sticky; top: 0; z-index: 60;
  background: rgba(250,248,245,.92);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--line);
}
.hdr-in { display: flex; align-items: center; gap: 20px; height: 72px; }

/* 로고 — 실제 로고 PNG(투명배경) 사용 */
.logo { display: flex; align-items: center; gap: 10px; margin-right: auto; }
.logo img { height: 38px; width: auto; }
.logo-tx { line-height: 1.12; }
.logo-ko { font-family: var(--head); font-size: 1.2rem; font-weight: 800; letter-spacing: -.04em; display: block; }
.logo-en { display: block; font-size: .55rem; letter-spacing: .3em; color: var(--grn-dp); font-weight: 700; }

.nav { display: flex; gap: 26px; font-size: .92rem; color: var(--ink-dim); font-weight: 500; }
.nav a { padding: 8px 0; border-bottom: 2px solid transparent; transition: color .2s, border-color .2s; }
.nav a:hover { color: var(--ink); border-bottom-color: var(--grn); }
.hdr-tel {
  font-family: var(--head);
  font-size: 1.1rem; font-weight: 800; color: var(--grn-dk);
  white-space: nowrap; letter-spacing: -.02em;
}
.hdr-tel span {
  font-family: var(--sans);
  font-size: .64rem; letter-spacing: .14em; color: var(--ink-mute);
  display: block; font-weight: 600;
}
@media (max-width: 940px) { .nav { display: none; } }
@media (max-width: 460px) { .hdr-tel { display: none; } }

/* ───────── 버튼 ───────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  height: 56px; padding: 0 28px; border-radius: var(--r-sm);
  font-family: var(--sans); font-size: 1rem; font-weight: 700; letter-spacing: -.015em;
  border: 1px solid transparent; cursor: pointer;
  transition: transform .16s, background .2s, border-color .2s, color .2s;
}
.btn:active { transform: translateY(1px); }
.btn-grn { background: var(--grn-dp); color: #fff; }
.btn-grn:hover { background: var(--grn-dk); }
.btn-kakao { background: var(--kakao); color: var(--kakao-ink); }
.btn-kakao:hover { filter: brightness(1.05); }
.btn-ghost { border-color: var(--line-2); color: var(--ink); background: var(--card); }
.btn-ghost:hover { border-color: var(--grn-dp); color: var(--grn-dp); }
.btn-wide { width: 100%; }

/* ───────── 히어로 ─────────
 * 좌: 카피 / 우: 실사 시공사진 + 도면 모티프 캡션.
 * 사진 위에 도면 좌표선을 얹어 '실측→도면→시공' 서사를 시각화한다.
 */
.hero { padding: clamp(44px, 7vw, 84px) 0 clamp(48px, 7vw, 84px); overflow: hidden; }
.hero-grid {
  display: grid; grid-template-columns: 1.04fr .96fr;
  gap: clamp(30px, 5vw, 64px); align-items: center;
}
@media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; } }

.hero h1 { margin: 0 0 24px; }
.hero h1 .ln { display: block; }
.hero-sub {
  color: var(--ink-dim); font-size: clamp(1rem, 1.55vw, 1.09rem);
  line-height: 1.85; max-width: 44ch; margin: 0 0 32px;
}
.hero-sub strong { color: var(--ink); font-weight: 700; }
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; }
.hero-cta .btn { min-width: 190px; }
@media (max-width: 480px) { .hero-cta .btn { min-width: 0; flex: 1 1 100%; } }

/* 신뢰 지표 — 괘선으로 칸을 나눈 표. 숫자는 등폭 */
.hero-trust {
  display: grid; grid-template-columns: repeat(4, 1fr);
  margin-top: 38px; border-top: var(--rule); border-bottom: var(--rule);
  color: var(--ink-mute); font-size: .78rem; letter-spacing: -.01em;
}
.hero-trust > div {
  padding: 16px 14px 15px; border-left: var(--rule);
}
.hero-trust > div:first-child { border-left: 0; padding-left: 0; }
.hero-trust b {
  font-family: var(--head);
  color: var(--grn-dk); font-size: 1.24rem; display: block;
  font-weight: 800; letter-spacing: -.04em; margin-bottom: 3px;
}
@media (max-width: 620px) {
  .hero-trust { grid-template-columns: repeat(2, 1fr); }
  .hero-trust > div:nth-child(odd) { border-left: 0; padding-left: 0; }
  .hero-trust > div:nth-child(n+3) { border-top: var(--rule); }
}

/* 히어로 사진 프레임 */
.plan-wrap { position: relative; }
.plan {
  width: 100%; aspect-ratio: 16/11; border-radius: var(--r); overflow: hidden;
  background: var(--paper-2); border: 1px solid var(--line-2); position: relative;
}
.plan img, .plan .heroart { width: 100%; height: 100%; object-fit: cover; display: block; }
.plan svg { width: 100%; height: 100%; }

/* 도면 모티프 — 코너 크롭마크. 도면 위(밝음)/사진 위(어두움) 양쪽에서 보이게 혼합 */
.plan-marks { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: difference; }
.plan-marks::before, .plan-marks::after {
  content: ""; position: absolute; width: 26px; height: 26px;
  opacity: .55;
}
.plan-marks::before {
  left: 14px; top: 14px;
  border-left: 2px solid #fff; border-top: 2px solid #fff;
}
.plan-marks::after {
  right: 14px; bottom: 14px;
  border-right: 2px solid #fff; border-bottom: 2px solid #fff;
}
.plan-tag {
  position: absolute; left: 0; bottom: 0;
  background: var(--grn-dp); color: #fff; font-size: .74rem; font-weight: 700;
  padding: 9px 16px; border-radius: 0; letter-spacing: .01em;
}
.plan-note {
  position: absolute; right: 14px; top: 14px;
  background: rgba(255,255,255,.94); border: 1px solid var(--line-2);
  color: var(--ink-dim); font-size: .68rem; font-weight: 700;
  padding: 5px 11px; border-radius: 0; letter-spacing: .18em;
  text-transform: uppercase;
}
/* 사진 캡션 — 인쇄물의 도판 설명 */
.plan-cap {
  margin: 12px 2px 0; font-size: .76rem; color: var(--ink-mute);
  display: flex; gap: 8px; align-items: baseline; line-height: 1.6;
}
.plan-cap b { color: var(--grn-dp); font-weight: 700; flex: none; letter-spacing: .04em; }

/* ───────── 부자 시공 스토리 (차별점 1순위) ─────────
 * 사진 + 2단 조판. 카드로 띄우지 않고 괘선으로 지면을 나눈다.
 */
.duo-photo {
  margin: 0 0 clamp(28px, 4vw, 42px);
  border: 1px solid var(--line-2); border-radius: var(--r); overflow: hidden;
  aspect-ratio: 16/8; background: var(--paper-2); position: relative;
}
.duo-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.duo-photo figcaption {
  position: absolute; left: 0; bottom: 0;
  background: rgba(20,96,42,.92); color: #fff;
  font-size: .74rem; font-weight: 600; padding: 8px 16px; letter-spacing: -.01em;
}

.duo {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0;
  border-top: 2px solid var(--ink); background: transparent;
}
@media (max-width: 720px) { .duo { grid-template-columns: 1fr; } }
.duo-cell { padding: clamp(26px, 3.4vw, 38px) clamp(20px, 2.6vw, 34px); position: relative; }
.duo-cell:first-child { padding-left: 0; }
.duo-cell + .duo-cell { border-left: var(--rule); }
@media (max-width: 720px) {
  .duo-cell { padding-left: 0; padding-right: 0; }
  .duo-cell + .duo-cell { border-left: 0; border-top: var(--rule); }
}
.duo-yr {
  font-family: var(--head);
  font-size: clamp(2.6rem, 6.4vw, 3.7rem); font-weight: 800; line-height: .96;
  color: var(--grn-dp); letter-spacing: -.055em;
}
.duo-yr small {
  font-family: var(--sans);
  font-size: .28em; font-weight: 700; color: var(--ink-mute);
  margin-left: 7px; letter-spacing: -.01em;
}
.duo-cell h3 {
  font-family: var(--head);
  font-size: 1.18rem; margin: 16px 0 11px; font-weight: 800; letter-spacing: -.035em;
}
.duo-cell p { margin: 0; color: var(--ink-dim); font-size: .94rem; line-height: 1.82; }
.duo-band {
  margin-top: 0; padding: 24px 0 0; border-top: var(--rule);
  background: transparent; border-radius: 0;
  color: var(--grn-dk); font-size: 1rem; font-weight: 600; line-height: 1.9;
}
/* 문장마다 제 줄 — 통짜 문단으로 흐르면 고아줄이 남는다 */
.duo-band .ln { display: block; width: fit-content; }

/* ───────── 차별점 ─────────
 * 카드 상자를 없애고 상단 괘선 + 번호로 조판. 인쇄물의 항목 리스트.
 */
.why-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(232px, 1fr));
  gap: 0; border-top: 2px solid var(--ink);
}
.why {
  background: transparent; border: 0; border-left: var(--rule); border-radius: 0;
  padding: 26px clamp(18px, 2vw, 26px) 8px;
  transition: none;
}
.why:first-child { border-left: 0; padding-left: 0; }
@media (max-width: 760px) {
  .why-grid { grid-template-columns: 1fr 1fr; }
  .why:nth-child(odd) { border-left: 0; padding-left: 0; }
  .why:nth-child(n+3) { border-top: var(--rule); }
}
@media (max-width: 480px) {
  .why-grid { grid-template-columns: 1fr; }
  .why { border-left: 0; padding-left: 0; }
  .why + .why { border-top: var(--rule); }
}
.why .ic {
  width: 38px; height: 38px; border-radius: 0; display: grid; place-items: center;
  background: transparent; border: 1.5px solid var(--grn-dp);
  color: var(--grn-dp); margin-bottom: 18px;
}
.why .ic svg { width: 20px; height: 20px; }
.why h3 {
  font-family: var(--head);
  font-size: 1.08rem; margin: 0 0 10px; font-weight: 800; letter-spacing: -.035em;
}
.why p { margin: 0; color: var(--ink-dim); font-size: .9rem; line-height: 1.78; }

/* ───────── 시공분야 허브 — 사진 주도 ───────── */
.svc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 22px 20px; }
.svc {
  background: transparent; border: 0; border-radius: 0;
  overflow: visible; display: flex; flex-direction: column;
}
.svc-art {
  aspect-ratio: 16/10; background: var(--paper-2);
  border: 1px solid var(--line); border-radius: var(--r);
  overflow: hidden; position: relative;
}
.svc-art img, .svc-art .heroart {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .5s cubic-bezier(.22,.68,.35,1);
}
.svc:hover .svc-art img { transform: scale(1.035); }
.svc-b { padding: 15px 2px 0; display: flex; flex-direction: column; flex: 1; }
.svc .sn {
  font-family: var(--head);
  font-size: 1.12rem; font-weight: 800; letter-spacing: -.035em;
}
.svc .sd {
  color: var(--ink-mute); font-size: .845rem; margin-top: 8px; line-height: 1.68;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.svc .go {
  color: var(--grn-dp); font-size: .78rem; margin-top: auto; padding-top: 14px; font-weight: 700;
  letter-spacing: .04em; border-bottom: 1px solid transparent; align-self: flex-start;
  transition: border-color .2s;
}
.svc:hover .go { border-bottom-color: var(--grn); }

/* ───────── 진행 절차 — 공정표(간트) 조판 ───────── */
.steps {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 0;
  border-top: 2px solid var(--ink);
}
@media (max-width: 980px) { .steps { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .steps { grid-template-columns: repeat(2, 1fr); } }
.step {
  background: transparent; border: 0; border-left: var(--rule); border-radius: 0;
  padding: 22px clamp(14px, 1.6vw, 20px) 10px; position: relative;
}
.step:first-child { border-left: 0; padding-left: 0; }
@media (max-width: 980px) {
  .step:nth-child(3n+1) { border-left: 0; padding-left: 0; }
  .step:nth-child(n+4) { border-top: var(--rule); }
}
@media (max-width: 560px) {
  .step:nth-child(3n+1) { border-left: var(--rule); padding-left: clamp(14px,1.6vw,20px); }
  .step:nth-child(odd) { border-left: 0; padding-left: 0; }
  .step:nth-child(n+3) { border-top: var(--rule); }
}
.step .sn {
  width: auto; height: auto; border-radius: 0; display: block;
  background: transparent; color: var(--grn-dp);
  font-family: var(--head); font-size: 1.5rem; font-weight: 800;
  letter-spacing: -.04em; line-height: 1; margin-bottom: 12px;
}
.step .sn::after {
  content: ""; display: block; width: 20px; height: 2px;
  background: var(--grn); margin-top: 10px;
}
.step h3 {
  font-family: var(--head);
  font-size: 1rem; margin: 0 0 8px; font-weight: 800; letter-spacing: -.035em;
}
.step p { margin: 0; color: var(--ink-dim); font-size: .845rem; line-height: 1.72; }

/* ───────── 체크 그리드 (시공 가능 범위) ───────── */
.cond-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(196px, 1fr));
  gap: 0; border-top: var(--rule);
}
.cond {
  background: transparent; border: 0; border-bottom: var(--rule);
  border-left: var(--rule); border-radius: 0;
  padding: 18px clamp(14px, 1.6vw, 20px);
  display: flex; gap: 12px; align-items: flex-start;
}
.cond:nth-child(4n+1) { border-left: 0; padding-left: 0; }
@media (max-width: 900px) {
  .cond:nth-child(4n+1) { border-left: var(--rule); padding-left: clamp(14px,1.6vw,20px); }
  .cond:nth-child(odd) { border-left: 0; padding-left: 0; }
}
.cond .ck {
  width: 18px; height: 18px; border-radius: 0; flex: none; margin-top: 3px;
  background: transparent; color: var(--grn-dp); border: 1.5px solid var(--grn);
  display: grid; place-items: center; font-size: .68rem; font-weight: 800;
}
.cond b {
  display: block; font-size: .95rem; margin-bottom: 4px;
  font-weight: 700; letter-spacing: -.025em;
}
.cond span { color: var(--ink-mute); font-size: .83rem; line-height: 1.65; }

/* ───────── 글 카드 — 사진 + 캡션 조판 (상자 없음) ───────── */
.post-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(284px, 1fr)); gap: 34px 24px; }
.pcard {
  background: transparent; border: 0; border-radius: 0;
  overflow: visible; display: flex; flex-direction: column;
}
.pcard-art {
  aspect-ratio: 16/10; overflow: hidden; background: var(--paper-2);
  border: 1px solid var(--line); border-radius: var(--r);
}
.pcard-art img, .pcard-art .heroart {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .5s cubic-bezier(.22,.68,.35,1);
}
.pcard:hover .pcard-art img { transform: scale(1.035); }
.pcard-b { padding: 15px 2px 0; display: flex; flex-direction: column; flex: 1; }
.pcard .cat {
  display: inline-block; align-self: flex-start;
  font-size: .715rem; color: var(--grn-dp); font-weight: 700;
  background: transparent; padding: 0; border-radius: 0;
  letter-spacing: .005em;
}
.pcard h3 {
  font-family: var(--head);
  font-size: 1.06rem; font-weight: 800; letter-spacing: -.035em;
  margin: 9px 0 9px; line-height: 1.52;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  transition: color .2s;
}
.pcard:hover h3 { color: var(--grn-dk); }
.pcard p {
  margin: 0 0 14px; color: var(--ink-mute); font-size: .865rem; line-height: 1.7;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.pcard .meta {
  margin-top: auto; padding-top: 11px; border-top: var(--rule);
  font-size: .73rem; color: var(--ink-mute); display: flex; gap: 9px;
}

/* ───────── 지역 ───────── */
.region-cloud { display: flex; flex-wrap: wrap; gap: 9px; }
.region-cloud a {
  background: var(--card); border: 1px solid var(--line); padding: 9px 17px;
  font-size: .87rem; color: var(--ink-dim); border-radius: var(--r-sm);
  transition: border-color .2s, color .2s, background .2s;
}
.region-cloud a:hover { border-color: var(--grn); color: var(--grn-dp); background: var(--grn-tint); }

/* ───────── FAQ ───────── */
.faq { border-top: 2px solid var(--ink); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  padding: 24px 44px 24px 18px; cursor: pointer; list-style: none; position: relative;
  font-family: var(--head);
  font-size: 1.02rem; font-weight: 800; letter-spacing: -.03em; line-height: 1.55;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 10px; top: 50%; width: 9px; height: 9px;
  border-right: 2px solid var(--grn-dp); border-bottom: 2px solid var(--grn-dp);
  transform: translateY(-70%) rotate(45deg); transition: transform .25s;
}
.faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq .fa { padding: 0 44px 28px 18px; color: var(--ink-dim); margin: 0; max-width: 76ch; }

/* ───────── 최종 CTA ───────── */
.cta-final {
  border-radius: var(--r); padding: clamp(36px, 5vw, 60px);
  background: var(--grn-dk);
  color: #fff; text-align: center; position: relative; overflow: hidden;
}
/* 도면 모눈 모티프를 아주 옅게 깐다 */
.cta-final::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px);
  background-size: 34px 34px;
}
.cta-final > * { position: relative; }
.cta-final .eyebrow { color: #b9f0c8; }
.cta-final .eyebrow::before { background: #b9f0c8; box-shadow: 0 0 0 4px rgba(185,240,200,.2); }
.cta-final .lede { color: rgba(255,255,255,.86); }
.cta-final .btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 28px; }
.cta-final .btns .btn { min-width: 200px; }
.cta-final .btn-ghost { background: transparent; border-color: rgba(255,255,255,.5); color: #fff; }
.cta-final .btn-ghost:hover { background: rgba(255,255,255,.12); border-color: #fff; color: #fff; }
.cta-final .btn-wht { background: #fff; color: var(--grn-dk); }
.cta-final .btn-wht:hover { background: #eafaef; }

/* ───────── 문의폼 ───────── */
.inq-form { margin-top: 8px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } }
.f-full { grid-column: 1 / -1; }
.fld label { display: block; font-size: .83rem; color: var(--ink-dim); margin-bottom: 7px; font-weight: 600; }
.fld label .req { color: var(--grn-dp); }
.fld input, .fld textarea, .fld select {
  width: 100%; background: var(--card); border: 1px solid var(--line-2); color: var(--ink);
  padding: 13px 14px; font-family: var(--sans); font-size: .96rem; border-radius: var(--r-sm);
  transition: border-color .2s, box-shadow .2s;
}
.fld textarea { min-height: 120px; resize: vertical; }
.fld input:focus, .fld textarea:focus, .fld select:focus {
  border-color: var(--grn-dp); outline: none; box-shadow: 0 0 0 3px var(--grn-tint);
}
.agree { display: flex; gap: 10px; align-items: flex-start; font-size: .84rem; color: var(--ink-dim); }
.agree input { width: 17px; height: 17px; flex: none; margin-top: 3px; accent-color: var(--grn-dp); }
.form-msg { padding: 13px 16px; border-radius: var(--r-sm); font-size: .9rem; display: none; }
.form-msg.ok { display: block; background: var(--grn-tint); border: 1px solid var(--grn); color: var(--grn-dk); }
.form-msg.err { display: block; background: #fbeeea; border: 1px solid var(--warn); color: #8f3520; }

/* ───────── 글 본문 ───────── */
.crumb { font-size: .8rem; color: var(--ink-mute); margin-bottom: 22px; }
.crumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; }
.crumb li + li::before { content: "›"; margin-right: 8px; color: var(--line-2); }
.crumb a:hover { color: var(--grn-dp); }

.article { display: grid; grid-template-columns: minmax(0,1fr) 280px; gap: clamp(28px, 4vw, 54px); align-items: start; }
@media (max-width: 1000px) { .article { grid-template-columns: 1fr; } }

.art-head { border-bottom: 2px solid var(--ink); padding-bottom: 26px; margin-bottom: 30px; }
.art-head h1 {
  font-family: var(--head);
  font-size: clamp(1.72rem, 3.9vw, 2.45rem); line-height: 1.32;
  letter-spacing: -.04em; margin: 14px 0 18px; font-weight: 800;
}
.art-meta { display: flex; gap: 13px; font-size: .79rem; color: var(--ink-mute); flex-wrap: wrap; }
.art-hero { margin: 0 0 30px; border: 1px solid var(--line); border-radius: var(--r); aspect-ratio: 16/9; overflow: hidden; }
.art-hero img, .art-hero .heroart { width: 100%; height: 100%; object-fit: cover; }

.summary-box {
  border-left: 3px solid var(--grn); background: var(--grn-tint);
  border-radius: 0 var(--r-sm) var(--r-sm) 0; padding: 20px 24px; margin: 0 0 30px;
}
.summary-box .st { font-size: .74rem; color: var(--grn-dp); font-weight: 800; margin-bottom: 8px; letter-spacing: .02em; }
.summary-box p { margin: 0; color: var(--grn-dk); font-size: .95rem; }

.toc { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 20px 24px; margin: 0 0 34px; }
.toc .tt { font-size: .74rem; color: var(--grn-dp); font-weight: 800; margin-bottom: 12px; letter-spacing: .02em; }
.toc ol { list-style: none; margin: 0; padding: 0; counter-reset: toc; }
.toc li { margin: 7px 0; font-size: .9rem; }
/* 번호는 lv2(대제목)만 센다 — lv3까지 세면 1,2,3 다음이 8,9로 튄다 */
.toc li.lv2 { counter-increment: toc; }
.toc li.lv3 { padding-left: 18px; font-size: .85rem; }
.toc a { color: var(--ink-dim); border-bottom: 1px solid transparent; }
.toc a:hover { color: var(--grn-dp); border-bottom-color: var(--grn); }
.toc li.lv2 > a::before { content: counter(toc) ". "; color: var(--grn-dp); font-weight: 700; }

.prose { font-size: 1.045rem; line-height: 1.98; color: #38332d; max-width: 74ch; }
.prose h2 {
  font-family: var(--head);
  font-size: clamp(1.34rem, 2.5vw, 1.7rem); font-weight: 800;
  letter-spacing: -.04em; margin: 56px 0 18px; padding-top: 24px; line-height: 1.4;
  border-top: 2px solid var(--ink); color: var(--ink);
}
.prose h2:first-child { margin-top: 0; border-top: 0; padding-top: 0; }
.prose h3 {
  font-family: var(--head);
  font-size: 1.14rem; font-weight: 800; margin: 36px 0 12px;
  color: var(--grn-dk); letter-spacing: -.035em;
}
.prose p { margin: 0 0 20px; }
.prose ul, .prose ol { margin: 0 0 22px; padding-left: 22px; }
.prose li { margin: 9px 0; }
.prose li::marker { color: var(--grn); }
.prose a { color: var(--grn-dp); border-bottom: 1px solid var(--grn); font-weight: 600; }
.prose a:hover { background: var(--grn-tint); }
.prose strong { color: var(--ink); font-weight: 800; }
.prose blockquote {
  margin: 26px 0; padding: 18px 24px; border-left: 3px solid var(--grn);
  background: var(--grn-tint); border-radius: 0 var(--r-sm) var(--r-sm) 0;
  color: var(--grn-dk); font-size: .97rem;
}

.aside { position: sticky; top: 92px; display: flex; flex-direction: column; gap: 18px; }
@media (max-width: 1000px) { .aside { position: static; } }
.side-cta {
  border-radius: var(--r); padding: 26px 24px;
  background: var(--grn-dk); color: #fff;
}
.side-cta .sh {
  font-family: var(--head);
  font-size: 1.1rem; font-weight: 800; margin-bottom: 8px; letter-spacing: -.035em;
}
.side-cta p { color: rgba(255,255,255,.84); font-size: .85rem; margin: 0 0 18px; line-height: 1.7; }
.side-cta .btn { height: 46px; font-size: .93rem; }
.side-cta .btn-wht { background: #fff; color: var(--grn-dk); }
.side-cta .btn-wht:hover { background: #eafaef; }
.side-cta .btn-ghost { background: transparent; border-color: rgba(255,255,255,.5); color: #fff; }
.side-cta .btn-ghost:hover { background: rgba(255,255,255,.12); border-color: #fff; color: #fff; }

.side-box { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 22px 24px; }
.side-box .sh { font-size: .74rem; color: var(--grn-dp); font-weight: 800; margin-bottom: 14px; letter-spacing: .02em; }
.side-list a { display: block; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: .89rem; color: var(--ink-dim); line-height: 1.55; }
.side-list a:last-child { border-bottom: 0; }
.side-list a:hover { color: var(--grn-dp); }

.related { border-top: 1px solid var(--line); margin-top: 56px; padding-top: 40px; }

/* ───────── 푸터 ───────── */
.ftr {
  border-top: 1px solid var(--line); background: #22201d; color: #a49c91;
  padding: 54px 0 calc(34px + var(--cta-h)); font-size: .86rem;
}
@media (min-width: 941px) { .ftr { padding-bottom: 34px; } }
.ftr .logo-ko { color: #f2eee8; }
.ftr .logo-en { color: var(--grn); }
.ftr-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 34px; margin-bottom: 38px; }
@media (max-width: 800px) { .ftr-top { grid-template-columns: 1fr; gap: 26px; } }
.ftr h4 { font-size: .76rem; color: var(--grn); margin: 0 0 15px; font-weight: 800; letter-spacing: .02em; }
.ftr-links a { display: block; padding: 5px 0; color: #a49c91; }
.ftr-links a:hover { color: var(--grn); }
.ftr-biz { line-height: 1.95; }
.ftr-biz b { color: #d6cec3; font-weight: 600; }
.ftr-biz a:hover { color: var(--grn); }
.ftr-bot {
  border-top: 1px solid #34302b; padding-top: 22px;
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: .8rem;
  color: #8b8378;
}

/* ───────── 모바일 하단 고정 CTA (전환 1순위) ───────── */
.mcta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  display: grid; grid-template-columns: 1fr 1fr; height: var(--cta-h);
  background: rgba(255,255,255,.96); backdrop-filter: blur(12px);
  border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom);
  box-shadow: 0 -4px 18px rgba(35,32,28,.08);
}
.mcta a {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  font-weight: 700; font-size: .98rem; letter-spacing: -.02em;
}
.mcta .m-tel { background: var(--grn-dp); color: #fff; }
.mcta .m-kko { background: var(--kakao); color: var(--kakao-ink); }
.mcta svg { width: 18px; height: 18px; }
@media (min-width: 941px) { .mcta { display: none; } }
body { padding-bottom: 0; }
@media (max-width: 940px) { body { padding-bottom: var(--cta-h); } }

/* ───────── 페이지네이션 ───────── */
.pager { display: flex; gap: 8px; justify-content: center; margin-top: 42px; flex-wrap: wrap; }
.pager a, .pager span {
  min-width: 42px; height: 42px; display: grid; place-items: center; padding: 0 12px;
  background: var(--card); border: 1px solid var(--line); font-size: .9rem;
  color: var(--ink-dim); border-radius: var(--r-sm);
}
.pager a:hover { border-color: var(--grn); color: var(--grn-dp); }
.pager .cur { background: var(--grn-dp); border-color: var(--grn-dp); color: #fff; font-weight: 700; }

/* ───────── 404 ───────── */
.err-wrap { min-height: 58vh; display: grid; place-items: center; text-align: center; padding: 60px 0; }
.err-code { font-size: clamp(4rem, 13vw, 8rem); font-weight: 800; color: var(--grn-tint); line-height: 1; letter-spacing: -.05em; }

/* ───────── 진입 리빌 ─────────
 * .rv        = 즉시 재생 (히어로 등 첫 화면. JS 없이도 동작)
 * [data-rv]  = 스크롤 진입 시 재생. 단 html.js-rv 일 때만 숨긴다
 *              → JS가 죽으면 숨김 자체가 적용되지 않아 콘텐츠가 항상 보인다
 */
@media (prefers-reduced-motion: no-preference) {
  .rv { opacity: 0; transform: translateY(16px); animation: rv .7s cubic-bezier(.22,.68,.35,1) forwards; }
  @keyframes rv { to { opacity: 1; transform: none; } }
  .rv-1 { animation-delay: .05s; } .rv-2 { animation-delay: .14s; }
  .rv-3 { animation-delay: .23s; } .rv-4 { animation-delay: .32s; }

  html.js-rv [data-rv] { opacity: 0; }
  html.js-rv [data-rv].rv { opacity: 0; }   /* 애니메이션이 opacity를 인계받는다 */
}

/* ═══════════════════════════════════════════════════════════════
 * 마이크로 인터랙션 — 제도(製圖) 언어
 * ═══════════════════════════════════════════════════════════════
 * 원칙
 *  1) JS는 콘텐츠를 숨기지 않는다. 상태 훅(html.js-on / .is-*)이 붙었을 때만
 *     감춤이 적용되므로 JS가 죽으면 전부 그냥 보인다.
 *  2) 애니메이션은 transform / opacity / stroke-dashoffset 만 만진다(레이아웃 리플로우 없음).
 *  3) 모든 전환 시간·이징은 :root 변수 단일 소스.
 *  4) prefers-reduced-motion: reduce 면 파일 최상단의 전역 규칙이 전부 무력화한다.
 *
 * 모티프 사전 — 이 사이트의 인터랙션은 아래 5개 어휘만 반복한다.
 *   · 크롭마크(┌┐└┘)  : 요소가 '선택·실측 대상'이 됨
 *   · 치수선(|←→|)     : 크기·범위를 밝힘
 *   · 먹줄(scaleX/Y)   : 선이 그어짐 = 확정·진행
 *   · 해칭(45° 빗금)   : 채워짐 = 선택됨
 *   · 압인(하드 섀도우): 눌림 = 승인·접수
 */

/* ───── 공통 유틸 ───── */

/* 크롭마크 프레임 — 호버/포커스 시 네 모서리가 안쪽으로 스냅하며 그린 점등.
 * ::before/::after 두 개로 좌상+우하 두 모서리만 그린다(나머지는 시각적으로 충분). */
.cropmark { position: relative; }
.cropmark::before, .cropmark::after {
  content: ""; position: absolute; width: 9px; height: 9px;
  border-color: var(--line-2); border-style: solid; border-width: 0;
  opacity: 0; pointer-events: none;
  transition: opacity var(--t-base) var(--ease-draft),
              transform var(--t-base) var(--ease-draft),
              border-color var(--t-base);
}
.cropmark::before {
  left: -5px; top: -5px; border-left-width: var(--hair); border-top-width: var(--hair);
  transform: translate(4px, 4px);
}
.cropmark::after {
  right: -5px; bottom: -5px; border-right-width: var(--hair); border-bottom-width: var(--hair);
  transform: translate(-4px, -4px);
}
.cropmark:hover::before, .cropmark:hover::after,
.cropmark:focus-visible::before, .cropmark:focus-visible::after,
.cropmark:focus-within::before, .cropmark:focus-within::after {
  opacity: 1; transform: translate(0, 0); border-color: var(--grn);
}

/* 먹줄 언더라인 — 링크·네비 공통. 양 끝에 치수 틱이 달린 |───| 형태로 펴진다.
 * scaleX 전개라 리플로우가 없고, transform-origin 만 바꿔 방향을 정한다. */
.penline { position: relative; }
.penline::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: var(--hair);
  background: var(--grn);
  transform: scaleX(0); transform-origin: left center;
  transition: transform var(--t-base) var(--ease-pen);
}
.penline:hover::after, .penline:focus-visible::after { transform: scaleX(1); }

/* 치수 틱 — 먹줄 양 끝의 세로 획. 도면의 치수 보조선 */
.penline-dim::before {
  content: ""; position: absolute; left: 0; bottom: -6px; width: var(--hair); height: 7px;
  background: var(--grn); transform: scaleY(0); transform-origin: bottom;
  transition: transform var(--t-fast) var(--ease-draft) var(--t-base);
}
.penline-dim:hover::before, .penline-dim:focus-visible::before { transform: scaleY(1); }

/* SVG 선 드로잉 — stroke-dashoffset. pathLength=1 로 정규화해서
 * 경로 실제 길이를 몰라도 dasharray:1 하나로 전부 제어된다. */
.draw path, .draw line, .draw rect, .draw circle, .draw polyline {
  pathLength: 1;
}
html.js-on .draw [data-draw] {
  stroke-dasharray: 1; stroke-dashoffset: 1;
  transition: stroke-dashoffset var(--t-draw) var(--ease-pen);
}
html.js-on .draw.is-drawn [data-draw] { stroke-dashoffset: 0; }
/* 순차 지연 — 외벽 → 내벽 → 설비 → 치수선 순으로 그려진다 */
html.js-on .draw [data-draw="1"] { transition-delay: .05s; }
html.js-on .draw [data-draw="2"] { transition-delay: .32s; }
html.js-on .draw [data-draw="3"] { transition-delay: .58s; }
html.js-on .draw [data-draw="4"] { transition-delay: .82s; }

/* 카운트업 자리 고정 — 숫자가 0→45 로 늘 때 폭이 흔들리면 옆 글자가 밀린다 */
[data-count] { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

/* ───── ① 헤더 ───── */
.nav a { position: relative; border-bottom: 0; padding-bottom: 10px; }
.nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 2px;
  background: var(--grn);
  transform: scaleX(0); transform-origin: left center;
  transition: transform var(--t-base) var(--ease-pen);
}
.nav a:hover::after, .nav a:focus-visible::after { transform: scaleX(1); }
/* 치수 틱 — 언더라인 양 끝 */
.nav a::before {
  content: ""; position: absolute; left: 0; bottom: 2px; width: var(--hair); height: 6px;
  background: var(--grn-dp); transform: scaleY(0); transform-origin: bottom;
  transition: transform var(--t-fast) var(--ease-draft) .18s;
}
.nav a:hover::before { transform: scaleY(1); }

/* 헤더 — 스크롤 시 괘선이 진해지며 지면이 '고정'된다 */
.hdr { transition: box-shadow var(--t-base), border-color var(--t-base); }
.hdr.is-stuck { border-bottom-color: var(--line-2); box-shadow: 0 1px 0 rgba(35,32,28,.04); }

/* 헤더 전화 — 호버 시 번호가 그린으로 점등 + 라벨에 먹줄 */
.hdr-tel { position: relative; transition: color var(--t-base); }
.hdr-tel:hover { color: var(--grn-dp); }
.hdr-tel::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: var(--hair);
  background: var(--grn); transform: scaleX(0); transform-origin: left;
  transition: transform var(--t-base) var(--ease-pen);
}
.hdr-tel:hover::after { transform: scaleX(1); }

/* 로고 — 마크가 아주 살짝 눌리고 EN 라벨 자간이 벌어진다 */
.logo img { transition: transform var(--t-base) var(--ease-draft); }
.logo:hover img { transform: scale(.94); }
.logo-en { transition: letter-spacing var(--t-slow) var(--ease-pen), color var(--t-base); }
.logo:hover .logo-en { letter-spacing: .42em; }

/* ───── ② 버튼 ───── */
/* 압인 — 누르면 1px 내려가며 하드 섀도우가 압착된다(도면 검인 도장) */
.btn { position: relative; overflow: hidden; }
.btn::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: currentColor; opacity: 0;
  transition: opacity var(--t-fast);
}
.btn:hover::before { opacity: .07; }
.btn:active { transform: translate(1px, 1px); }
.btn-grn:active, .btn-wht:active { box-shadow: -1px -1px 0 rgba(0,0,0,.18) inset; }

/* 고스트 버튼 — 호버 시 테두리가 먹줄처럼 좌→우로 다시 그어진다 */
.btn-ghost { position: relative; }
.btn-ghost::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 2px; right: 0;
  background: var(--grn); transform: scaleX(0); transform-origin: left;
  transition: transform var(--t-base) var(--ease-pen);
}
.btn-ghost:hover::after { transform: scaleX(1); }

/* ───── ③ 히어로 ───── */
/* 도면 프레임 — 마우스가 들어오면 십자선 HUD가 따라다닌다(AutoCAD 크로스헤어).
 * 좌표는 JS가 --cx/--cy 로만 넘긴다. 포인터 없는 기기에선 아예 안 만든다. */
.plan { --cx: 50%; --cy: 50%; }
.plan-hud {
  position: absolute; inset: 0; pointer-events: none; opacity: 0;
  transition: opacity var(--t-base);
}
.plan.is-tracking .plan-hud { opacity: 1; }
.plan-hud::before, .plan-hud::after {
  content: ""; position: absolute; background: var(--grn-dp); opacity: .5;
}
.plan-hud::before { left: 0; right: 0; top: var(--cy); height: var(--hair); }
.plan-hud::after  { top: 0; bottom: 0; left: var(--cx); width: var(--hair); }
/* 좌표 표기 — 십자선 교차점 옆에 붙는 치수값 */
.plan-xy {
  position: absolute; left: var(--cx); top: var(--cy);
  transform: translate(9px, 7px);
  background: var(--grn-dp); color: #fff; padding: 2px 7px;
  font-family: var(--label); font-weight: 500; font-size: .6rem; letter-spacing: .1em;
  font-variant-numeric: tabular-nums; white-space: nowrap;
  opacity: 0; transition: opacity var(--t-base);
}
.plan.is-tracking .plan-xy { opacity: 1; }
@media (hover: none) { .plan-hud, .plan-xy { display: none; } }

/* 히어로 이미지 — 아주 느린 켄번스. 도면을 훑어보는 시선 */
@media (prefers-reduced-motion: no-preference) {
  .plan > img { animation: planpan 26s ease-in-out infinite alternate; }
  @keyframes planpan { from { transform: scale(1); } to { transform: scale(1.05); } }
}

/* 크롭마크가 호버 시 안쪽으로 조여진다 */
.plan-marks::before, .plan-marks::after {
  transition: transform var(--t-slow) var(--ease-draft), opacity var(--t-base);
}
.plan-wrap:hover .plan-marks::before { transform: translate(4px, 4px); opacity: .85; }
.plan-wrap:hover .plan-marks::after  { transform: translate(-4px, -4px); opacity: .85; }

/* PLAN 라벨 — 호버 시 자간이 더 벌어지며 '표기'임을 강조 */
.plan-note { transition: letter-spacing var(--t-slow) var(--ease-pen), border-color var(--t-base); }
.plan-wrap:hover .plan-note { letter-spacing: .3em; border-color: var(--grn); }

/* 하단 태그 — 좌측에서 밀려 들어온다 */
.plan-tag { transition: transform var(--t-base) var(--ease-draft); }
.plan-wrap:hover .plan-tag { transform: translateX(4px); }

/* 신뢰지표 — 칸마다 호버 시 상단에 먹줄이 그어지고 숫자가 진해진다 */
.hero-trust > div { position: relative; transition: background var(--t-base); }
.hero-trust > div::after {
  content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 2px;
  background: var(--grn); transform: scaleX(0); transform-origin: left;
  transition: transform var(--t-base) var(--ease-pen);
}
.hero-trust > div:hover::after { transform: scaleX(1); }
.hero-trust > div:hover { background: var(--grn-tint); }
.hero-trust b { transition: color var(--t-base), transform var(--t-base) var(--ease-draft); }
.hero-trust > div:hover b { color: var(--grn-dk); transform: translateY(-1px); }

/* ───── ④ 부자 스토리 ───── */
/* 30년 / 15년 셀 — 호버 시 숫자가 압인되듯 눌린다 */
.duo-cell { transition: background var(--t-base); }
.duo-cell:hover { background: rgba(50,193,85,.045); }
.duo-yr { display: inline-block; transition: transform var(--t-base) var(--ease-draft); }
.duo-cell:hover .duo-yr { transform: translate(1px, 1px); }

/* 합산 치수선 — 두 셀을 잇는 |←  45년  →| 표기.
 * 섹션 진입 시 세로선이 위→아래로 그어지고 라벨이 압인된다. */
.duo-sum {
  position: relative; text-align: center;
  padding: 26px 0 0; margin: 0;
}
.duo-sum-line {
  display: block; width: var(--hair); height: 22px; margin: 0 auto;
  background: var(--line-2);
  transform: scaleY(0); transform-origin: top;
  transition: transform var(--t-slow) var(--ease-pen);
}
.duo-sum.is-in .duo-sum-line { transform: scaleY(1); background: var(--grn); }
.duo-sum-tag {
  display: inline-flex; align-items: baseline; gap: 8px; margin-top: 12px;
  border: var(--hair) solid var(--grn); color: var(--grn-dk);
  padding: 8px 18px; background: var(--paper);
  opacity: 0; transform: scale(1.06);
  transition: opacity var(--t-base), transform var(--t-base) var(--ease-draft);
  transition-delay: .42s;
}
.duo-sum.is-in .duo-sum-tag { opacity: 1; transform: scale(1); }
.duo-sum-tag b {
  font-family: var(--head); font-weight: 900; font-size: 1.5rem;
  letter-spacing: -.02em; line-height: 1.15;
  /* ★ flex 컨테이너로 만들면 안 된다 — 안쪽 카운트업 <span>이 flex 아이템이 되면서
   *   폭이 줄어 숫자와 '년'이 겹친다. 평범한 인라인 텍스트로 두는 게 정답. */
  white-space: nowrap;
}
/* 카운트업 span은 인라인 유지 — 숫자 폭만 예약해 자릿수가 바뀌어도 안 밀린다 */
.duo-sum-tag b [data-count] { display: inline; }
/* ★ 설명 텍스트만 작게 — 자식 선택자로 한정한다.
 *   그냥 `span`으로 잡으면 <b> 안의 카운트업 <span data-count>까지 걸려
 *   숫자가 13px/600 으로 쪼그라들고 '년'과 겹친다(실제로 겪은 버그). */
.duo-sum-tag > span { font-size: .84rem; font-weight: 600; }
/* JS 없으면 그냥 보인다 */
html:not(.js-on) .duo-sum-line { transform: scaleY(1); }
html:not(.js-on) .duo-sum-tag { opacity: 1; transform: none; }

/* ───── ⑤ 시공분야 4카드 ───── */
.svc { position: relative; }
.svc-art { position: relative; isolation: isolate; }
/* "도면(무채) → 시공(유채)" 서사 — filter 는 얇은 선화를 뭉갠다(라이브 실사고).
 * 대신 회색 오버레이 mix-blend-mode:color 로 채도만 중화 — 선의 명암은 원본 그대로.
 * 호버/포커스에서 오버레이가 걷히며 그린 잉크가 돌아온다. */
.svc-art::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: #8a8778; mix-blend-mode: color;
  transition: opacity var(--t-slow) var(--ease-pen);
}
@supports not (mix-blend-mode: color) {
  .svc-art::before { background: rgba(138, 135, 120, .30); }
}
.svc:hover .svc-art::before, .svc:focus-visible .svc-art::before { opacity: 0; }
.svc-art img {
  image-rendering: -webkit-optimize-contrast;
  transition: transform var(--t-slow) var(--ease-pen);
}
.svc:hover .svc-art img, .svc:focus-visible .svc-art img { transform: scale(1.045); }
.svc-dim { z-index: 2; }
/* 치수선 오버레이 — 카드 상단에 |←  가로  →| 가 떠오른다 */
.svc-dim {
  position: absolute; left: 12px; right: 12px; top: 12px; height: 9px;
  pointer-events: none; opacity: 0; transform: translateY(-5px);
  transition: opacity var(--t-base), transform var(--t-base) var(--ease-draft);
}
.svc:hover .svc-dim, .svc:focus-visible .svc-dim { opacity: 1; transform: translateY(0); }
.svc-dim::before {        /* 치수 본선 */
  content: ""; position: absolute; left: 0; right: 0; top: 4px; height: var(--hair);
  background: var(--grn-dp);
}
.svc-dim i {              /* 양 끝 보조선 */
  position: absolute; top: 0; width: var(--hair); height: 9px; background: var(--grn-dp);
}
.svc-dim i:first-child { left: 0; }
.svc-dim i:last-child { right: 0; }
/* 진행 게이지 — 카드 하단에서 좌→우로 차오른다 */
.svc-art::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: var(--grn);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--t-slow) var(--ease-pen);
}
.svc:hover .svc-art::after, .svc:focus-visible .svc-art::after { transform: scaleX(1); }
/* 스케일 태그 — 도면철 견출지처럼 위로 튀어나온다 */
.svc-scale {
  position: absolute; right: 10px; bottom: 10px;
  background: rgba(255,255,255,.94); border: var(--hair) solid var(--line-2);
  padding: 3px 8px; pointer-events: none;
  opacity: 0; transform: translateY(4px);
  transition: opacity var(--t-base), transform var(--t-base) var(--ease-draft);
}
.svc:hover .svc-scale { opacity: 1; transform: translateY(0); }
/* 제목 + 화살표 */
.svc .sn { transition: color var(--t-base); }
.svc:hover .sn { color: var(--grn-dk); }
.svc .go em { font-style: normal; display: inline-block; transition: transform var(--t-base) var(--ease-draft); }
.svc:hover .go em { transform: translateX(5px); }

/* ───── ⑥ 차별점 ───── */
.why { transition: background var(--t-base); }
.why:hover { background: rgba(50,193,85,.04); }
/* 아이콘 박스 — 컴퍼스로 원을 그리듯 테두리가 한 바퀴 */
.why .ic { position: relative; transition: border-color var(--t-base), background var(--t-base); }
.why:hover .ic { background: var(--grn-tint); }
.why .ic svg { transition: transform var(--t-slow) var(--ease-draft); }
.why:hover .ic svg { transform: scale(1.1); }
/* 컴퍼스 원호 — 아이콘 바깥을 도는 1px 원 */
.why .ic::after {
  content: ""; position: absolute; inset: -6px; border: var(--hair) solid var(--grn);
  border-radius: 50%; opacity: 0; transform: scale(.82) rotate(-90deg);
  transition: opacity var(--t-base), transform var(--t-slow) var(--ease-pen);
}
.why:hover .ic::after { opacity: .5; transform: scale(1) rotate(0deg); }
.why h3 { transition: color var(--t-base); }
.why:hover h3 { color: var(--grn-dk); }

/* ───── ⑦ 진행 절차 6단계 ───── */
.steps { position: relative; }
/* 다림줄 — 6단계를 관통하는 기준선이 좌→우로 그어진다 */
.steps::before {
  content: ""; position: absolute; left: 0; top: -2px; height: 2px; width: 100%;
  background: var(--grn); transform-origin: left;
  transform: scaleX(var(--flow, 0));
  transition: transform var(--t-draw) var(--ease-pen);
}
html:not(.js-on) .steps::before { transform: scaleX(1); }
.step { transition: background var(--t-base); }
.step:hover { background: rgba(50,193,85,.045); }
.step .sn { transition: color var(--t-base), transform var(--t-base) var(--ease-draft); }
.step:hover .sn { transform: translateY(-2px); }
/* 번호 밑 짧은 획이 호버 시 길어진다(치수 보조선이 늘어나는 감각) */
.step .sn::after { transition: width var(--t-base) var(--ease-pen), background var(--t-base); }
.step:hover .sn::after { width: 40px; }
.step h3 { transition: color var(--t-base); }
.step:hover h3 { color: var(--grn-dk); }
/* 진행 중인 단계 — 스크롤이 이 단계를 지날 때 좌측에 먹줄이 선다 */
.step::after {
  content: ""; position: absolute; left: -1px; top: 0; bottom: 0; width: 2px;
  background: var(--grn); transform: scaleY(0); transform-origin: top;
  transition: transform var(--t-base) var(--ease-pen);
}
.step.is-on::after { transform: scaleY(1); }

/* ───── ⑧ 시공 가능 범위 체크칩 ───── */
.cond { transition: background var(--t-base); position: relative; }
.cond:hover { background: rgba(50,193,85,.05); }
/* 해칭 — 체크박스가 45° 빗금으로 채워진다(캐드 단면 표시) */
.cond .ck {
  position: relative; overflow: hidden;
  transition: border-color var(--t-base), color var(--t-base);
}
.cond .ck::before {
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(45deg,
    var(--grn) 0 1.5px, transparent 1.5px 5px);
  opacity: 0; transform: translateX(-100%);
  transition: transform var(--t-base) var(--ease-pen), opacity var(--t-fast);
}
.cond:hover .ck::before { opacity: .45; transform: translateX(0); }
.cond:hover .ck { border-color: var(--grn-dp); }
.cond b { transition: color var(--t-base); }
.cond:hover b { color: var(--grn-dk); }

/* ───── ⑨ 글 카드 ───── */
.pcard { position: relative; }
.pcard-art { position: relative; }
.pcard-art::after {          /* 하단 게이지 */
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: var(--grn); transform: scaleX(0); transform-origin: left;
  transition: transform var(--t-slow) var(--ease-pen);
}
.pcard:hover .pcard-art::after { transform: scaleX(1); }
.pcard .cat { position: relative; display: inline-block; }
.pcard .cat::after {         /* 카테고리 라벨 밑 먹줄 */
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: var(--hair);
  background: var(--grn); transform: scaleX(0); transform-origin: left;
  transition: transform var(--t-base) var(--ease-pen);
}
.pcard:hover .cat::after { transform: scaleX(1); }
.pcard .meta { transition: border-color var(--t-base), color var(--t-base); }
.pcard:hover .meta { border-color: var(--grn); }

/* ───── ⑩ 지역 칩 ───── */
.region-cloud a { position: relative; overflow: hidden; }
/* 반경 측정 펄스 — 칩 안쪽에서 그린 면이 좌→우로 밀려 들어온다 */
.region-cloud a::before {
  content: ""; position: absolute; inset: 0; background: var(--grn-tint);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--t-base) var(--ease-pen);
  z-index: -1;
}
.region-cloud a:hover::before { transform: scaleX(1); }
.region-cloud a { z-index: 0; transition: border-color var(--t-base), color var(--t-base), transform var(--t-fast) var(--ease-draft); }
.region-cloud a:hover { transform: translateY(-1px); }
.region-cloud a:active { transform: translate(1px, 1px); }

/* ───── ⑪ FAQ 아코디언 ───── */
.faq details { transition: background var(--t-base); }
.faq details[open] { background: rgba(50,193,85,.035); }
.faq summary { transition: color var(--t-base), padding-left var(--t-base) var(--ease-draft); }
.faq summary:hover { color: var(--grn-dk); padding-left: 26px; }
/* 좌측 먹줄 — 열리면 질문 옆에 선이 선다 */
.faq details { position: relative; }
.faq details::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: var(--grn); transform: scaleY(0); transform-origin: top;
  transition: transform var(--t-base) var(--ease-pen);
}
.faq details[open]::before { transform: scaleY(1); }
/* 답변 — 열릴 때 아래에서 올라온다 */
@media (prefers-reduced-motion: no-preference) {
  .faq details[open] .fa { animation: faqin var(--t-base) var(--ease-pen); }
  @keyframes faqin { from { opacity: 0; transform: translateY(-5px); } }
}

/* ───── ⑫ 문의폼 ───── */
.fld { position: relative; }
/* 먹줄 포커스 — 하단 보더가 좌→우로 그어진다 */
.fld input, .fld textarea, .fld select { position: relative; z-index: 1; }
.fld::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--grn); transform: scaleX(0); transform-origin: left;
  transition: transform var(--t-base) var(--ease-pen);
  pointer-events: none; z-index: 2;
}
.fld:focus-within::after { transform: scaleX(1); }
.fld label { transition: color var(--t-base); }
.fld:focus-within label { color: var(--grn-dp); }
/* 입력이 채워진 필드 — 라벨 앞에 체크 획 */
.fld.is-filled label::before {
  content: "\2713"; color: var(--grn-dp); margin-right: 5px; font-weight: 800;
}
/* 동의 체크박스 */
.agree { transition: color var(--t-base); }
.agree:hover { color: var(--ink); }
/* 제출 버튼 — 접수되면 압인 리바운드 */
@media (prefers-reduced-motion: no-preference) {
  .btn.is-stamped { animation: stamp .28s var(--ease-draft); }
  @keyframes stamp {
    0%   { transform: scale(1); }
    38%  { transform: scale(.965); }
    100% { transform: scale(1); }
  }
}
/* 접수 완료 메시지 — 도장이 찍히듯 등장 */
@media (prefers-reduced-motion: no-preference) {
  .form-msg.ok, .form-msg.err { animation: msgin var(--t-base) var(--ease-draft); }
  @keyframes msgin { from { opacity: 0; transform: translateY(-6px); } }
}

/* ───── ⑬ 모바일 하단 고정바 ───── */
.mcta a { transition: filter var(--t-fast), transform var(--t-fast) var(--ease-draft); }
.mcta a:active { transform: translateY(1px); filter: brightness(.92); }
/* 스크롤 방향에 따라 숨었다 나온다 — 본문 읽는 중엔 비켜준다 */
.mcta { transition: transform var(--t-base) var(--ease-draft); }
.mcta.is-hidden { transform: translateY(110%); }

/* ───── ⑭ 푸터 ───── */
.ftr-links a { position: relative; display: inline-block; transition: color var(--t-base), transform var(--t-fast) var(--ease-draft); }
.ftr-links a:hover { transform: translateX(3px); }
.ftr-biz a { position: relative; }
.ftr-biz a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: var(--hair);
  background: var(--grn); transform: scaleX(0); transform-origin: left;
  transition: transform var(--t-base) var(--ease-pen);
}
.ftr-biz a:hover::after { transform: scaleX(1); }

/* ───── ⑮ 본문 링크 / 목차 ───── */
.prose a { transition: background var(--t-base), border-color var(--t-base); }
.toc a { position: relative; transition: color var(--t-base), padding-left var(--t-fast) var(--ease-draft); }
.toc a:hover { padding-left: 4px; }
.side-list a { transition: color var(--t-base), padding-left var(--t-fast) var(--ease-draft); }
.side-list a:hover { padding-left: 4px; }
.pager a { transition: border-color var(--t-base), color var(--t-base), transform var(--t-fast) var(--ease-draft); }
.pager a:hover { transform: translateY(-1px); }
.pager a:active { transform: translate(1px, 1px); }
.crumb a { position: relative; transition: color var(--t-base); }

/* ───── ⑯ 최종 CTA — 모눈이 아주 느리게 흐른다 ───── */
@media (prefers-reduced-motion: no-preference) {
  .cta-final::before { animation: gridpan 44s linear infinite; }
  @keyframes gridpan { to { background-position: 34px 34px; } }
}

/* ───── 스크롤 진행 표시 — 헤더 하단 1px 먹줄 ───── */
.progress {
  position: absolute; left: 0; bottom: -1px; height: 2px; width: 100%;
  background: var(--grn); transform-origin: left;
  transform: scaleX(var(--p, 0));
  pointer-events: none;
}
html:not(.js-on) .progress { display: none; }

/* ───── 리빌 확장 — 자식 요소가 순차로 올라온다 ───── */
@media (prefers-reduced-motion: no-preference) {
  html.js-rv [data-rv-stagger] > * { opacity: 0; transform: translateY(12px); }
  html.js-rv [data-rv-stagger].rv > * {
    animation: rv .62s var(--ease-pen) forwards;
  }
  html.js-rv [data-rv-stagger].rv > *:nth-child(1) { animation-delay: .02s; }
  html.js-rv [data-rv-stagger].rv > *:nth-child(2) { animation-delay: .09s; }
  html.js-rv [data-rv-stagger].rv > *:nth-child(3) { animation-delay: .16s; }
  html.js-rv [data-rv-stagger].rv > *:nth-child(4) { animation-delay: .23s; }
  html.js-rv [data-rv-stagger].rv > *:nth-child(5) { animation-delay: .30s; }
  html.js-rv [data-rv-stagger].rv > *:nth-child(6) { animation-delay: .37s; }
  html.js-rv [data-rv-stagger].rv > *:nth-child(7) { animation-delay: .44s; }
  html.js-rv [data-rv-stagger].rv > *:nth-child(8) { animation-delay: .51s; }
}

/* 히어로 도면 오버레이 — 사진/모티프 위에 겹치는 제도 레이어.
 * 슬롯 내용과 무관하게 항상 올라가므로 드로잉 연출이 실제로 화면에 보인다. */
.plan-draw {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 1;
}
/* 십자선 HUD는 오버레이보다 위 */
.plan-hud, .plan-xy { z-index: 2; }
.plan-tag, .plan-note { z-index: 3; }

/* ───── 장식 레이어 클릭 차단 방지 ─────
 * 위의 먹줄/게이지/해칭은 전부 ::before/::after 순수 장식이다.
 * 부모가 <a>/<button> 인 경우 이들이 클릭을 가로채면 링크가 죽으므로
 * (과거 '친구폐차' 사고와 같은 유형) 한 번에 통과시킨다.
 */
.penline::after, .penline-dim::before,
.nav a::after, .nav a::before,
.hdr-tel::after,
.btn::before, .btn-ghost::after,
.hero-trust > div::after,
.svc-dim::before, .svc-dim i, .svc-art::after,
.why .ic::after,
.steps::before, .step::after,
.cond .ck::before,
.pcard-art::after, .pcard .cat::after,
.region-cloud a::before,
.faq details::before,
.fld::after,
.ftr-biz a::after,
.cropmark::before, .cropmark::after,
.cta-final::before,
.progress { pointer-events: none; }

/* 글 카드 / 히어로 도면도 같은 이유로 대비를 올린다 — 옅은 선화가 축소되면 사라진다 */
.pcard-art img { filter: contrast(1.42) brightness(.975); transition: transform var(--t-slow) var(--ease-pen), filter var(--t-slow) var(--ease-pen); }
.pcard:hover .pcard-art img { filter: contrast(1.55) brightness(.955); }
.plan > img { filter: contrast(1.24) brightness(.99); }

/* ───── 고아줄 방지 ─────
 * 한국어 카피에서 마지막 줄에 단어 하나만 떨어지면 지면이 헐거워 보인다.
 * text-wrap: pretty 가 지원되는 브라우저는 줄나눔을 재분배해 알아서 막아주고,
 * 미지원 브라우저는 keep-all(이미 body에 적용) 로 어절은 최소한 지킨다.
 */
.lede, .hero-sub, .duo-band, .sd, .step p, .why p, .cond span, .plan-cap span,
.pcard p, .prose p, .side-cta p, .summary-box p {
  text-wrap: pretty;
}
/* 헤드라인은 균형 우선 — 2줄 제목의 위아래 길이를 맞춘다 */
.h-xl, .h-lg, .h-md, .duo-cell h3, .step h3, .why h3, .svc .sn, .pcard h3, .faq summary {
  text-wrap: balance;
}

/* ───── ⑰ 폼 에러 상태 ─────
 * 포커스/입력완료는 위에 있지만 '틀렸을 때'가 비어 있었다(GLM 지적).
 * 도면 반려 도장 — 필드가 짧게 흔들리고 경고 먹줄이 선다.
 */
.fld.is-err input, .fld.is-err textarea, .fld.is-err select { border-color: var(--warn); }
.fld.is-err::after { transform: scaleX(1); background: var(--warn); }
.fld.is-err label { color: var(--warn); }
.fld.is-err label::after {
  content: "확인 필요"; margin-left: 7px;
  font-family: var(--label); font-weight: 500; font-size: .62rem; letter-spacing: .1em;
  color: var(--warn);
}
@media (prefers-reduced-motion: no-preference) {
  .fld.is-err { animation: shake .3s var(--ease-draft); }
  @keyframes shake {
    0%, 100% { transform: translateX(0); }
    25%      { transform: translateX(-4px); }
    75%      { transform: translateX(4px); }
  }
}

/* ───── ⑱ TOP 복귀 버튼 ─────
 * 도면 한 장을 다 본 뒤 처음으로 돌아가는 장치. 크롭마크가 조여지며 등장한다.
 * JS가 만들므로 JS 없으면 존재하지 않는다(콘텐츠 아님).
 */
.totop {
  position: fixed; right: 20px; z-index: 80;
  bottom: calc(20px + var(--cta-h));
  width: 46px; height: 46px;
  display: grid; place-items: center;
  background: var(--card); border: 1px solid var(--line-2); color: var(--grn-dk);
  border-radius: var(--r-sm); cursor: pointer;
  opacity: 0; transform: translateY(8px); pointer-events: none;
  transition: opacity var(--t-base), transform var(--t-base) var(--ease-draft),
              border-color var(--t-base), background var(--t-base);
}
@media (min-width: 941px) { .totop { bottom: 24px; } }
.totop.is-on { opacity: 1; transform: translateY(0); pointer-events: auto; }
.totop:hover { border-color: var(--grn); background: var(--grn-tint); }
.totop:active { transform: translate(1px, 1px); }
.totop svg { width: 17px; height: 17px; }

/* 푸터 시공분야 링크 — inline-block(호버 이동용)로 바꾸면서 줄바꿈이 풀렸다.
 * 한 줄에 하나씩 떨어지도록 래퍼를 세로 스택으로 잡는다. */
.ftr-links { display: flex; flex-direction: column; align-items: flex-start; }

/* ───── 도면 클릭 리드로우 — 지우개로 지웠다가 붓으로 다시 그려진다 (2026-08-27) ─────
 * data-redraw 요소를 클릭하면 JS가 .is-erasing → .is-drawing 을 순서로 붙인다.
 * 마스크 그라데이션을 300% 폭으로 깔고 position 만 움직여 브라우저가 경로 길이를 모르게 한다.
 * JS 없으면 클래스가 안 붙으므로 아무 일도 없다(콘텐츠 상시 노출 원칙 유지). */
html.js-on [data-redraw] { cursor: pointer; }
[data-redraw] > img, [data-redraw] > svg {
  --wipe: linear-gradient(105deg, #000 40%, rgba(0,0,0,.55) 50%, transparent 60%);
}
[data-redraw].is-erasing > img, [data-redraw].is-erasing > svg {
  -webkit-mask-image: var(--wipe); mask-image: var(--wipe);
  -webkit-mask-size: 300% 100%; mask-size: 300% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  animation: dsErase .5s cubic-bezier(.55,.06,.68,.19) forwards;
}
[data-redraw].is-drawing > img, [data-redraw].is-drawing > svg {
  -webkit-mask-image: var(--wipe); mask-image: var(--wipe);
  -webkit-mask-size: 300% 100%; mask-size: 300% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  animation: dsDraw 1.05s cubic-bezier(.22,.68,.35,1) forwards;
}
@keyframes dsErase {
  from { -webkit-mask-position: 0% 0; mask-position: 0% 0; }
  to   { -webkit-mask-position: 100% 0; mask-position: 100% 0; }
}
@keyframes dsDraw {
  from { -webkit-mask-position: 100% 0; mask-position: 100% 0; }
  to   { -webkit-mask-position: 0% 0; mask-position: 0% 0; }
}
@media (prefers-reduced-motion: reduce) {
  [data-redraw].is-erasing > img, [data-redraw].is-erasing > svg,
  [data-redraw].is-drawing > img, [data-redraw].is-drawing > svg { animation: none; -webkit-mask-image: none; mask-image: none; }
}