/* 천지토건 홈페이지 — 아임웹 원본을 본뜬 정적 사이트.
 *
 * 색·간격은 원본 사이트를 브라우저에서 재서 맞췄다. 브랜드 네이비 #021F3D 는 아임웹
 * 커스텀 스타일시트(docs/assets/hompage_references/.../사이트 전체 스타일시트.txt)에 있던 값이다.
 *
 * 데스크탑·모바일이 같은 UI/UX 여야 하므로(대표님 지시) 모바일 전용 화면을 따로 만들지
 * 않는다. 같은 마크업을 폭에 따라 접는다.
 */

:root {
  --navy: #021f3d;
  --navy-700: #0b2c52;
  --red: #e8493f;
  --ink-900: #1a1a1a;
  --ink-600: #555;
  --ink-400: #888;
  --ink-200: #e3e3e3;
  --ink-50: #f6f7f9;
  --ink-100: #f0f1f3;
  --ink-300: #c8ccd2;
  --ink-500: #6b7280;
  --ink-700: #3f4550;
  --accent: #ef7215;
  --accent-700: #d9640c;
  --header-h: 82px;
  --header-h-mobile: 60px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: "Pretendard", "Noto Sans KR", -apple-system, BlinkMacSystemFont, "Malgun Gothic", sans-serif;
  color: var(--ink-900);
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
}

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

.wrap { width: min(1200px, calc(100% - 40px)); margin: 0 auto; }

/* ── 헤더 ─────────────────────────────────────────────── */
.hdr {
  position: sticky; top: 0; z-index: 100;
  background: #fff; border-bottom: 1px solid var(--ink-200);
  height: var(--header-h);
  display: flex; align-items: center;
}
.hdr__inner { display: flex; align-items: center; gap: 24px; }
.hdr__logo img { height: 55px; width: auto; }
.hdr__nav { display: flex; gap: 34px; margin: 0 auto; }
.hdr__nav > .hdr__item { position: relative; }
.hdr__nav > .hdr__item > a { font-size: 16px; font-weight: 700; padding: 8px 0; white-space: nowrap; display: block; position: relative; }
.hdr__nav > .hdr__item > a:hover, .hdr__nav a[aria-current] { color: var(--navy); }

/* 마우스를 올렸을 때와 현재 화면일 때 모두 주황 밑줄(대표님 지시).
   글자 아래에 겹쳐 그린다 — border 로 그리면 밑줄이 생길 때 헤더 높이가 흔들린다.
   하위 메뉴로 마우스를 옮기는 동안에도 상위 항목 밑줄이 남아야 해서
   `a:hover` 가 아니라 `.hdr__item:hover > a` 로 잡는다. */
.hdr__nav > .hdr__item > a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: var(--accent); opacity: 0; transition: opacity .15s ease;
}
.hdr__nav > .hdr__item:hover > a::after,
.hdr__nav > .hdr__item > a:focus-visible::after,
.hdr__nav > .hdr__item > a[aria-current]::after { opacity: 1; }

/* 하위 메뉴 — 마우스를 올리면 아래로 펼친다.
   상위 항목과 패널 사이가 뜨면 옮기는 도중에 닫히므로, 헤더 아래쪽 여백까지 덮도록
   `top: 100%` 에 붙이고 상위 항목의 세로 패딩이 이어지게 둔다. */
.hdr__drop {
  position: absolute; top: 100%; left: -18px; min-width: 148px;
  background: var(--navy); padding: 8px 0; border-radius: 0 0 4px 4px;
  display: flex; flex-direction: column;
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity .16s ease, transform .16s ease, visibility .16s;
  box-shadow: 0 10px 24px rgba(2, 31, 61, .22); z-index: 10;
}
.hdr__item:hover > .hdr__drop,
.hdr__item:focus-within > .hdr__drop { opacity: 1; visibility: visible; transform: translateY(0); }
.hdr__drop a {
  display: block; padding: 9px 20px; font-size: 14px; font-weight: 600;
  color: rgba(255, 255, 255, .82); white-space: nowrap;
}
.hdr__drop a:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.hdr__right { display: flex; align-items: center; gap: 18px; }
.hdr__login { font-size: 14px; color: var(--ink-600); white-space: nowrap; }
.btn-quote {
  background: var(--navy); color: #fff; font-weight: 700; font-size: 15px;
  padding: 12px 26px; border-radius: 3px; white-space: nowrap; border: 0; cursor: pointer;
}
.btn-quote:hover { background: var(--navy-700); }
.hdr__burger { display: none; background: none; border: 0; padding: 8px; cursor: pointer; }
.hdr__burger span { display: block; width: 22px; height: 2px; background: var(--navy); margin: 5px 0; }

/* 모바일 서랍 */
.drawer {
  position: fixed; inset: 0; z-index: 200; background: rgba(0, 0, 0, .45);
  opacity: 0; pointer-events: none; transition: opacity .2s;
  /* 닫힌 패널이 `translateX(100%)` 로 화면 오른쪽 밖에 서 있어 **문서에 가로 스크롤**을
     만들었다(360px에서 21px). 그 탓에 우측 플로팅 버튼도 화면 밖으로 밀렸다.
     밖으로 나간 부분을 잘라 없앤다. */
  overflow: hidden;
}
.drawer[data-open="1"] { opacity: 1; pointer-events: auto; }
.drawer__panel {
  position: absolute; top: 0; right: 0; width: min(300px, 84vw); height: 100%;
  background: #fff; padding: 22px; overflow-y: auto;
  transform: translateX(100%); transition: transform .22s;
}
.drawer[data-open="1"] .drawer__panel { transform: translateX(0); }
.drawer__close { position: absolute; top: 14px; right: 16px; font-size: 26px; background: none; border: 0; cursor: pointer; }
.drawer__group { border-bottom: 1px solid var(--ink-200); padding: 14px 0; }
.drawer__group > a { font-size: 17px; font-weight: 700; display: inline-block; }
.drawer__sub { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; padding-left: 10px; }
.drawer__sub a { font-size: 14px; color: var(--ink-600); }
/* 데스크탑 탭과 같은 규칙 — 누르는 중이거나 현재 화면이면 주황 밑줄.
   글자 폭만큼만 그어야 해서 항목을 inline-block 으로 둔다. */
.drawer__group > a, .drawer__sub a { border-bottom: 3px solid transparent; padding-bottom: 2px; }
.drawer__sub a { align-self: flex-start; border-bottom-width: 2px; }
.drawer__group > a:hover, .drawer__group > a[aria-current],
.drawer__sub a:hover, .drawer__sub a[aria-current] {
  color: var(--navy); border-bottom-color: var(--accent);
}

/* ── 히어로 (메인) ─────────────────────────────────────── */
.hero { position: relative; min-height: calc(100vh - var(--header-h)); display: flex; align-items: center; overflow: hidden; }
.hero__bg { position: absolute; inset: 0; background: #12212f center/cover no-repeat; }
/* 배경 영상은 잘려도 되지만 비어 보이면 안 된다 — 상자를 꽉 채우고 넘치는 만큼 자른다 */
.hero__video { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero__bg::after { content: ""; position: absolute; inset: 0; background: rgba(6, 18, 32, .55); }
.hero__inner { position: relative; z-index: 1; color: #fff; padding: 60px 0 40px; }
.hero h1 { font-size: clamp(26px, 4vw, 52px); font-weight: 800; line-height: 1.35; margin: 0 0 34px; letter-spacing: -.02em; }
.hero .btn-quote { background: var(--red); padding: 14px 30px; font-size: 16px; }
.hero .btn-quote:hover { filter: brightness(1.06); }

/* 카운터 */
.counts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: clamp(48px, 9vw, 110px); text-align: center; color: #fff; }
.counts h4 { font-size: clamp(15px, 2vw, 26px); font-weight: 700; margin: 0 0 14px; }
.counts .num { font-size: clamp(30px, 5.6vw, 64px); font-weight: 800; line-height: 1; letter-spacing: -.03em; }
.counts .num span { font-size: .45em; font-weight: 700; margin-left: 2px; }

/* ── 섹션 공통 ────────────────────────────────────────── */
.sec { padding: clamp(56px, 8vw, 110px) 0; }
.sec--navy { background: var(--navy); color: #fff; }
.sec--gray { background: var(--ink-50); }
.sec__eyebrow { font-size: 14px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--red); margin: 0 0 12px; }
.sec__title { font-size: clamp(22px, 3.2vw, 38px); font-weight: 800; margin: 0 0 16px; letter-spacing: -.02em; line-height: 1.35; }
.sec__lead { font-size: clamp(14px, 1.6vw, 18px); color: var(--ink-600); margin: 0; line-height: 1.85; }
.sec--navy .sec__lead { color: rgba(255, 255, 255, .82); }
.sec__center { text-align: center; }

/* 인트로 */
.intro p { font-size: clamp(15px, 2vw, 24px); font-weight: 600; line-height: 1.9; margin: 0 0 10px; text-align: center; }

/* 차별점 4칸 */
.diff { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px; margin-top: 46px; }
.diff__item { background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14); border-radius: 10px; padding: 28px; }
.diff__item h3 { font-size: clamp(16px, 1.9vw, 20px); font-weight: 700; margin: 0 0 12px; }
.diff__item p { font-size: 14.5px; line-height: 1.8; margin: 0; color: rgba(255, 255, 255, .78); }

/* 시공사례 카드 */
.cases { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 42px; }
.case { border-radius: 10px; overflow: hidden; background: #fff; box-shadow: 0 2px 14px rgba(0, 0, 0, .08); }
.case img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.case__body { padding: 16px 18px 20px; }
.case__body strong { display: block; font-size: 16px; font-weight: 700; }
.case__body span { display: block; font-size: 13px; color: var(--ink-400); margin-top: 4px; }

/* 리뷰 */
.reviews { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 42px; }
.review { background: #fff; border: 1px solid var(--ink-200); border-radius: 10px; padding: 26px; display: flex; flex-direction: column; }
.review p { font-size: 14.5px; line-height: 1.85; margin: 0 0 18px; color: var(--ink-600); flex: 1; }
.review footer { font-size: 13px; color: var(--ink-400); }
.review footer b { display: block; font-size: 14.5px; color: var(--ink-900); }

/* ── 서브페이지 배너 ──────────────────────────────────── */
/* 제목이 배너 사진 안에 흰 글자로 앉는다(목업). 높이도 목업 실측대로 —
   데스크탑 컷에서 168px, 360px 컷에서 96px 이라 그 두 점을 clamp 로 잇는다. */
.pagehero { position: relative; height: clamp(96px, 12.6vw, 168px); background: var(--navy) center/cover no-repeat; display: grid; place-items: center; }
.pagehero::after { content: ""; position: absolute; inset: 0; background: rgba(4, 18, 38, .5); }
.pagehero__inner { position: relative; z-index: 1; text-align: center; padding: 0 20px; }
.pagehero__eyebrow { font-size: clamp(11px, 1.1vw, 13px); font-weight: 700; letter-spacing: .12em; color: rgba(255, 255, 255, .78); margin: 0 0 6px; }
.pagehero h1 { font-size: clamp(24px, 2.3vw, 30px); font-weight: 800; color: #fff; margin: 0; letter-spacing: -.01em; }

/* 서브 탭 */
.subtabs { display: grid; margin: clamp(24px, 4vw, 40px) 0; border: 1px solid var(--ink-200); }
.subtabs a { text-align: center; padding: 14px 6px; font-size: clamp(12px, 1.4vw, 15px); font-weight: 600; border-right: 1px solid var(--ink-200); }
.subtabs a:last-child { border-right: 0; }
.subtabs a[aria-current] { background: var(--navy); color: #fff; font-weight: 700; }

/* 본문 */
.prose { font-size: clamp(14px, 1.6vw, 16.5px); line-height: 1.95; color: var(--ink-600); }
.prose p { margin: 0 0 16px; }
.prose strong { color: var(--ink-900); }

/* 정보 카드 2×2 */
.infocards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin: 34px 0; }
.infocard { background: var(--ink-50); border-radius: 8px; padding: 24px 26px; }
.infocard h3 { font-size: 17px; font-weight: 700; margin: 0 0 10px; }
.infocard p { font-size: 14px; line-height: 1.8; margin: 0; color: var(--ink-600); }

/* 갤러리 */
.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 34px 0 0; }
.gallery figure { margin: 0; }
.gallery img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; border-radius: 4px; }
.gallery figcaption { font-size: 12.5px; color: var(--ink-400); margin-top: 7px; }

/* 표 */
.table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.table th, .table td { border-bottom: 1px solid var(--ink-200); padding: 14px 12px; text-align: left; }
.table th { background: var(--ink-50); font-weight: 700; white-space: nowrap; }

/* 오시는길 */
.contactgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 30px 0; }
.contactgrid dt { font-size: 13px; color: var(--red); font-weight: 700; margin-bottom: 6px; }
.contactgrid dd { margin: 0; font-size: 15px; font-weight: 600; }
.mapbox { width: 100%; aspect-ratio: 16 / 7; border: 1px solid var(--ink-200); border-radius: 6px; overflow: hidden; background: var(--ink-50); display: grid; place-items: center; }
.mapbox iframe { width: 100%; height: 100%; border: 0; }

/* 폼 */
.form { max-width: 860px; margin: 0 auto; }
/* 문항 상자 — 회색 섹션 위에 흰 상자로 떠 있어야 한 문항씩 구분된다(대표님 지시).
   예전엔 배경이 없어 섹션 회색이 그대로 비쳤다. */
.formgroup {
  border: 1px solid var(--ink-200); box-shadow: 0 0 6px rgba(0, 0, 0, .06);
  padding: clamp(20px, 3.4vw, 38px); margin-bottom: 26px; background: #fff; border-radius: 8px;
}
.formgroup > label { display: block; font-weight: 700; font-size: clamp(14px, 1.7vw, 17px); margin-bottom: 16px; }
.formgroup input[type="text"], .formgroup input[type="tel"], .formgroup input[type="email"], .formgroup textarea {
  width: 100%; border: 1px solid var(--ink-200); border-radius: 6px; padding: 10px 12px;
  font-size: 15px; font-family: inherit; background: #fcfcfd;
}
.formgroup textarea { min-height: 120px; resize: vertical; }
.formgroup input:focus, .formgroup textarea:focus { outline: 0; border-color: var(--navy); box-shadow: 0 0 0 3px rgba(2, 31, 61, .08); }
.choices { display: flex; flex-wrap: wrap; gap: 12px 26px; }
.choices label { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; font-size: 14.5px; }
.consent { border: 1px solid var(--ink-200); background: var(--ink-50); padding: 18px; max-height: 190px; overflow-y: auto; font-size: 12.5px; line-height: 1.75; color: var(--ink-600); white-space: pre-line; }
.form__submit { display: block; margin: 34px auto 0; width: 280px; height: 64px; font-size: 20px; font-weight: 700; background: var(--navy); color: #fff; border: 1px solid gray; cursor: pointer; }

/* ── 푸터 ─────────────────────────────────────────────── */
.ftr { background: var(--navy); color: rgba(255, 255, 255, .75); padding: 44px 0 54px; font-size: 13px; }
.ftr__links { display: flex; gap: 20px; margin-bottom: 22px; }
.ftr__links a { font-size: 13px; }
.ftr__links a:last-child { font-weight: 700; color: #fff; }
.ftr__row { display: flex; justify-content: space-between; align-items: flex-start; gap: 30px; flex-wrap: wrap; }
.ftr p { margin: 0 0 6px; line-height: 1.8; }
.ftr__sns { display: flex; gap: 10px; }
.ftr__sns a { width: 30px; height: 30px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .35); display: grid; place-items: center; font-size: 11px; }
.ftr__copy { margin-top: 20px; font-size: 12px; color: rgba(255, 255, 255, .5); }

/* ── 우측 플로팅 SNS (원본 footercode.txt 재현) ─────────── */
.floating { position: fixed; top: 35%; right: 40px; z-index: 110; display: flex; flex-direction: column; gap: 15px; }
.floating a { width: 43px; height: 43px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: 15px; font-weight: 700; box-shadow: 0 2px 8px rgba(0, 0, 0, .18); }
.floating .yt { background: #c4302b; }
.floating .ig { background: linear-gradient(45deg, #f09433, #dc2743, #bc1888); }
.floating .kk { background: #fae100; color: #3c1e1e; }
.floating .nv { background: #03c75a; }
.floating svg { width: 21px; height: 21px; }

/* 화면 **가운데 아래**에 둔다(대표님 지시) — 오른쪽 끝은 플로팅 SNS와 겹쳐 눌리기 쉽다. */
#toTop {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: 34px; z-index: 110;
  width: 46px; height: 46px; border-radius: 50%; border: 0;
  background: rgba(2, 31, 61, .82); color: #fff; cursor: pointer;
  display: grid; place-items: center; backdrop-filter: blur(4px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, .22);
  opacity: 0; pointer-events: none; transition: opacity .2s, background-color .2s;
}
#toTop svg { width: 20px; height: 20px; }
#toTop:hover { background: var(--navy); }
#toTop[data-show="1"] { opacity: .9; pointer-events: auto; }

/* ── 반응형 ───────────────────────────────────────────── */
@media (max-width: 1024px) {
  .hdr__nav { gap: 22px; }
  .hdr__nav a { font-size: 15px; }
  .floating { right: 14px; gap: 10px; }
  .floating a { width: 36px; height: 36px; }
  /* 모바일은 하단에 상담 버튼이 고정돼 있어 그 위로 올린다 */
  #toTop { bottom: 74px; }
}

@media (max-width: 860px) {
  :root { --header-h: var(--header-h-mobile); }
  .hdr__logo img { height: 42px; }
  .hdr__nav, .hdr__login, .hdr__right .btn-quote { display: none; }
  .hdr__burger { display: block; margin-left: auto; }
  .hero { min-height: auto; padding: 54px 0 40px; }
  .counts { grid-template-columns: 1fr; gap: 26px; }
  .diff, .cases, .reviews, .infocards, .contactgrid { grid-template-columns: 1fr; }
  .trust--4 { grid-template-columns: repeat(2, 1fr); }
  .gallery { grid-template-columns: repeat(2, 1fr); }
  .subtabs { grid-template-columns: repeat(3, 1fr) !important; }
  .subtabs a { border-bottom: 1px solid var(--ink-200); }
  .ftr__row { flex-direction: column; }
  /* 모바일에서는 하단 고정 상담 버튼이 플로팅 SNS보다 중요하다 */
  /* 히어로의 상담 버튼이 보이는 동안에는 뜨지 않는다 — 같은 버튼이 두 개 보이면
     화면만 좁아진다. JS가 히어로 버튼을 지켜보다 data-show 를 켠다. */
  .mobile-cta {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 105;
    background: var(--red); color: #fff; text-align: center; font-weight: 700;
    padding: 15px; font-size: 16px; box-shadow: 0 -2px 12px rgba(0, 0, 0, .18);
    transform: translateY(100%); transition: transform .22s ease;
  }
  .mobile-cta[data-show="1"] { transform: translateY(0); }
  body { padding-bottom: 54px; }
  .floating { top: auto; bottom: 120px; }
}

@media (max-width: 480px) {
  .gallery { grid-template-columns: 1fr; }
  .subtabs { grid-template-columns: repeat(2, 1fr) !important; }
}

.mobile-cta { display: none; }
@media (max-width: 860px) { .mobile-cta { display: block; } }

/* ── 실적현황 — 원본과 같은 좌측 분류 + 우측 카드 격자 ─── */
.perflayout { display: grid; grid-template-columns: 200px 1fr; gap: 26px; align-items: start; }
.perfmain { min-width: 0; }
/* `display: grid` 가 브라우저 기본 `[hidden]{display:none}` 을 이긴다 — 명시해 준다 */
.perfgrid[hidden], .perfdetail[hidden] { display: none; }

.perfnav { display: flex; flex-direction: column; border: 1px solid var(--ink-200); border-radius: 4px; overflow: hidden; }
.perfnav button {
  text-align: left; padding: 13px 18px; font-size: 14px; font-weight: 600; cursor: pointer;
  background: #fff; border: 0; border-bottom: 1px solid var(--ink-200); color: var(--ink-600);
}
.perfnav button:last-child { border-bottom: 0; }
.perfnav button:hover { background: var(--ink-50); }
.perfnav button[aria-current] { background: var(--navy); color: #fff; font-weight: 700; }

.perfgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-left: 1px solid var(--ink-200); border-top: 1px solid var(--ink-200); }
.perf-msg { grid-column: 1 / -1; text-align: center; color: var(--ink-400); font-size: 14px; padding: 60px 0; line-height: 1.9; }

.perf { border-right: 1px solid var(--ink-200); border-bottom: 1px solid var(--ink-200); display: flex; flex-direction: column; background: #fff; }
.perf__thumb { aspect-ratio: 4 / 3; width: 100%; object-fit: cover; display: block; background: var(--ink-100); }
/* 본문이 있는 카드와 없는 카드가 섞여 줄 높이가 들쭉날쭉했다(대표님 지적).
   글이 없어도 자리를 비워 **카드 높이를 고정**한다 — 제목 2줄 + 발췌 4줄 기준. */
.perf__body {
  padding: 16px 15px 16px; display: flex; flex-direction: column; gap: 8px;
  flex: 1; min-height: 168px;
}
/* 제목도 두 줄까지만 — 세 줄이 되면 그 카드만 아래로 길어진다 */
.perf__title {
  font-size: clamp(13px, 3.6vw, 14.5px); font-weight: 700; color: var(--ink-900);
  line-height: 1.45; margin: 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* 본문은 넉 줄까지만 — 글마다 길이가 달라 카드 높이가 들쭉날쭉해진다 */
.perf__excerpt {
  font-size: 12.5px; line-height: 1.65; color: var(--ink-600); margin: 0;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.perf { cursor: pointer; transition: box-shadow .18s; }
.perf:hover { box-shadow: 0 4px 16px rgba(0, 0, 0, .10); }

@media (max-width: 1024px) { .perfgrid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 860px) {
  .perflayout { grid-template-columns: 1fr; gap: 16px; }
  /* 좁은 화면은 글자가 작아 같은 줄 수라도 덜 차지한다 */
  .perf__body { min-height: 150px; padding: 13px 12px; }
  /* 좁은 화면에서는 분류를 **격자로 눕힌다**(대표님 지시) — 가로 스크롤은 뒤쪽 분류가
     있는지조차 보이지 않는다. 사업분야 탭과 같은 방식이다. 6개라 3열이면 딱 2줄이다. */
  .perfnav { display: grid; grid-template-columns: repeat(3, 1fr); }
  .perfnav button {
    border-bottom: 1px solid var(--ink-200); border-right: 1px solid var(--ink-200);
    text-align: center; white-space: nowrap; padding: 12px 6px; font-size: 13px;
  }
  /* 격자에서는 "마지막 칸"이 아니라 **각 줄의 오른쪽 끝**에서 세로선을 없애야 한다 */
  .perfnav button:nth-child(3n) { border-right: 0; }
  .perfnav button:nth-last-child(-n + 3) { border-bottom: 0; }
  .perfgrid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  /* 한 줄에 한 장이면 스크롤만 길어진다 — 2열 3줄(6장)로 끊고 쪽을 나눈다(대표님 지시) */
  .perfgrid { grid-template-columns: repeat(2, 1fr); }
  /* 360px에서는 3열이 빡빡하다 — 2열이면 6개가 딱 3줄 */
  .perfnav { grid-template-columns: repeat(2, 1fr); }
  .perfnav button:nth-child(3n) { border-right: 1px solid var(--ink-200); }
  .perfnav button:nth-child(2n) { border-right: 0; }
  .perfnav button:nth-last-child(-n + 3) { border-bottom: 1px solid var(--ink-200); }
  .perfnav button:nth-last-child(-n + 2) { border-bottom: 0; }
}

/* ── 대표님 지시 반영분 ────────────────────────────────── */

/* 헤더 상담 버튼 — 마우스를 올리면 빨간색으로. 눈에 띄어야 누른다 */
.hdr .btn-quote { transition: background-color .18s ease, transform .18s ease; }
.hdr .btn-quote:hover { background: var(--red); transform: translateY(-1px); }

/* 비전·조직도·채용 안내는 이미지 한 장이 곧 본문이다 — 작으면 글씨가 안 읽힌다 */
.pageimg { width: 100%; max-width: 900px; height: auto; margin: 0 auto; }
/* 비전은 504x1400 세로 이미지다. 900px로 늘리면 높이가 2500px가 되어 화면을 다 먹는다
   (원본 504px ↔ 900px 의 중간). 가로형인 조직도는 900px 그대로 둔다. */
.pageimg--tall { max-width: 630px; }
.pageimg--wide { max-width: 770px; margin-top: 30px; }

/* 갤러리 확대 */
.gallery .zoom { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.gallery .zoom img { transition: transform .25s ease; }
.gallery .zoom:hover img { transform: scale(1.02); }

.lightbox {
  position: fixed; inset: 0; z-index: 300; background: rgba(0, 0, 0, .88);
  display: none; place-items: center; padding: 30px; cursor: zoom-out;
}
.lightbox[data-open="1"] { display: grid; }
.lightbox img { max-width: min(1400px, 94vw); max-height: 82vh; object-fit: contain; }
.lightbox__cap { color: rgba(255, 255, 255, .8); font-size: 14px; text-align: center; margin: 16px 0 0; }
.lightbox__close {
  position: absolute; top: 18px; right: 24px; width: 44px; height: 44px;
  background: none; border: 0; color: #fff; font-size: 34px; cursor: pointer; line-height: 1;
}

/* 입력폼 — 현장에서 장갑 낀 손으로도 눌러야 한다. 글자·칸·체크박스를 모두 키웠다 */
.formgroup > label { font-size: clamp(16px, 1.9vw, 19px); margin-bottom: 20px; }
.formgroup input[type="text"], .formgroup input[type="tel"],
.formgroup input[type="email"], .formgroup textarea {
  font-size: clamp(15px, 1.7vw, 17px); padding: 14px 14px;
}
.formgroup textarea { min-height: 170px; }
/* 파일 입력은 브라우저가 자기 폭("파일 선택 / 선택된 파일 없음")을 고집한다. 360px에서
   340px를 차지해 **문서 전체에 가로 스크롤**을 만들었다 — 우측 플로팅까지 밀려났다. */
.formgroup input[type="file"] { font-size: 14px; max-width: 100%; }
.choices { gap: 16px 30px; }
.choices label { font-size: clamp(15px, 1.7vw, 17px); gap: 11px; }
.choices input[type="checkbox"], .consent + label input[type="checkbox"] { width: 21px; height: 21px; accent-color: var(--navy); }
.consent { font-size: 13.5px; max-height: 230px; }
.consent strong { color: var(--ink-900); }

/* 연락처 세 칸 — 원본과 같은 구성 */
.phone3 { display: flex; align-items: center; gap: 10px; max-width: 420px; }
.phone3 input { text-align: center; }
.phone3 span { color: var(--ink-400); font-weight: 700; }

/* 푸터 SNS — 아이콘이 검정이라 네이비 배경에서 안 보였다(대표님 지적).
   각 서비스 색을 그대로 쓴다 — 우측 플로팅 버튼과 같은 색이라 같은 것임이 바로 보인다 */
.ftr__sns a { width: 32px; height: 32px; border: 0; color: #fff; }
.ftr__sns svg { width: 17px; height: 17px; }
.ftr__sns .yt { background: #c4302b; }
.ftr__sns .ig { background: linear-gradient(45deg, #f09433, #dc2743, #bc1888); }
.ftr__sns .kk { background: #fae100; color: #3c1e1e; }
.ftr__sns .nv { background: #03c75a; }

/* 문의 전화 — 폼을 채우기 전에 바로 걸고 싶은 사람이 많다. 원본 폼 머리에 있던 내용이다. */
.quote-tel { margin-top: 26px; }
.quote-tel p { margin: 0 0 4px; font-size: clamp(15px, 1.8vw, 17px); font-weight: 700; color: var(--navy); }
.quote-tel__h { color: var(--red) !important; font-size: 14px !important; margin-bottom: 8px !important; }
.quote-tel a { color: inherit; }
.quote-tel a:hover { text-decoration: underline; }

/* 입력칸을 밑줄 하나로 — 상자가 이미 흰색이라 칸마다 테두리를 두르면 선이 겹쳐 답답하다.
   밑줄은 브랜드 네이비로(대표님 지시). */
.formgroup input[type="text"], .formgroup input[type="tel"],
.formgroup input[type="email"], .formgroup textarea {
  border: 0; border-bottom: 2px solid var(--navy); border-radius: 0;
  background: transparent; padding: 12px 2px;
}
.formgroup textarea { border: 2px solid var(--navy); border-radius: 6px; padding: 14px; }
.formgroup input:focus, .formgroup textarea:focus {
  outline: 0; border-color: var(--red); box-shadow: none;
}
.formgroup input::placeholder, .formgroup textarea::placeholder { color: var(--ink-400); }
.phone3 input { text-align: center; }

/* ── 360px 정리 (대표님 지적) ─────────────────────────── */
@media (max-width: 860px) {
  /* 0. 햄버거를 오른쪽 끝으로. 로고 옆에 붙어 있어 눌러야 할 곳이 화면 가운데였다. */
  .hdr__inner { gap: 12px; }
  .hdr__right { margin-left: auto; }

  /* 1-1. 히어로 문구·버튼 가운데로. 왼쪽에 몰려 있으면 좁은 화면에서 균형이 안 맞는다. */
  .hero__inner { text-align: center; }
  .hero h1 { font-size: clamp(21px, 6.2vw, 30px); }
  .hero .btn-quote { padding: 11px 22px; font-size: 14px; }

  /* 1-3. Differentiation — 제목·본문이 화면 폭에 비해 컸다. 폭을 따라 줄인다. */
  .sec__title { font-size: clamp(18px, 5.2vw, 26px); }
  .sec__lead { font-size: clamp(13px, 3.6vw, 15px); }
  .sec__eyebrow { font-size: 12px; }
  .diff { gap: 14px; margin-top: 28px; }
  .diff__item { padding: 18px; }
  .diff__item h3 { font-size: clamp(14.5px, 4.2vw, 17px); margin-bottom: 8px; }
  .diff__item p { font-size: clamp(12.5px, 3.4vw, 14px); line-height: 1.75; }
  .intro p { font-size: clamp(14px, 4vw, 18px); }

  /* 1-4. 플로팅 SNS를 위로. 아래에 채널톡·상담 버튼이 겹쳐 쌓인다. */
  .floating { bottom: 190px; gap: 9px; }
  .floating a { width: 34px; height: 34px; }
  .floating svg { width: 17px; height: 17px; }

  /* 채널톡 기본 위치는 화면 바닥이라 하단 상담 버튼에 가린다. 그 위로 올린다.
     (채널톡이 자기 버튼에 붙이는 클래스·id 를 모두 잡는다 — 버전에 따라 다르다) */
  #ch-plugin-launcher, .ch-desk-messenger-launcher,
  [class*="launcher"][class*="ch-"], iframe#ch-plugin-launcher-frame {
    bottom: 74px !important;
  }
}

/* 3. (삭제) 2열 격자에서 홀수 항목의 마지막 칸을 두 칸으로 늘리던 규칙.
   860px 이하 서브탭은 이제 격자가 아니라 알약 flex 라 `grid-column` 은 무시되고,
   남은 `border-right: 0` 만 특이도로 이겨 5번째 알약의 오른쪽 변을 지웠다. */

/* 모바일에서 한 줄을 통째로 쓰는 버튼. 좁은 화면에서 행동 버튼이 글자 폭만큼만
   차지하면 엄지로 겨냥하기 어렵다 — 데스크탑은 원래 폭 그대로 둔다. */
@media (max-width: 860px) {
  .btn--mfull { display: block; width: 100%; text-align: center; }
}

/* 오시는길 — 데스크탑은 지도, 모바일은 지도 앱으로 넘기는 카드 */
.mapcard { display: none; }
@media (max-width: 860px) {
  .mapbox { display: none; }
  .mapcard {
    display: flex; align-items: center; gap: 14px;
    border: 1px solid var(--ink-200); border-radius: 10px; padding: 18px 16px; background: var(--ink-50);
  }
  /* 핀은 이모지(📍)였는데 이모지 폰트가 없는 환경에서 두부(□)로 깨진다.
     푸터 SNS 와 같은 네이버 아이콘 SVG 를 쓴다 — 초록 바탕에 흰 N. */
  .mapcard__pin {
    flex: none; width: 36px; height: 36px; border-radius: 9px;
    background: #03c75a; color: #fff; display: grid; place-items: center;
  }
  .mapcard__pin svg { width: 20px; height: 20px; display: block; }
  .mapcard__body { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
  .mapcard__body b { font-size: 14.5px; font-weight: 700; color: var(--ink-900); line-height: 1.5; }
  .mapcard__body em { font-style: normal; font-size: 13px; font-weight: 700; color: var(--navy); }
}

/* 채팅 상담 버튼 — 채널톡의 기본 버튼 대신 이것을 런처로 쓴다(customLauncherSelector).
   기본 버튼은 내부 구조가 버전마다 달라 위치를 옮기기 어렵고, 좁은 화면에서 하단 상담
   버튼과 겹쳤다. 여기서 위치·모양을 사이트가 정한다. */
#chatBtn {
  position: fixed; right: 40px; bottom: 40px; z-index: 108;
  width: 54px; height: 54px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--navy); color: #fff; display: grid; place-items: center;
  box-shadow: 0 6px 18px rgba(2, 31, 61, .35); transition: transform .18s, background-color .18s;
}
#chatBtn svg { width: 25px; height: 25px; }
#chatBtn:hover { background: var(--navy-700); transform: translateY(-2px); }

@media (max-width: 860px) {
  /* 대표님 지시 위치 — 우측 끝, 하단 상담 바 바로 위 */
  #chatBtn { right: 14px; bottom: 70px; width: 48px; height: 48px; }
  #chatBtn svg { width: 22px; height: 22px; }
}

/* ── 실적 상세 ─────────────────────────────────────────
   목록과 같은 화면에서 갈아 끼운다. 주소에 `?post=` 를 남겨 뒤로가기·링크 공유가 된다. */
.perfdetail__head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.perfdetail__cat { font-size: 15px; font-weight: 700; color: var(--navy); }
.perfdetail__title { font-size: clamp(15px, 1.9vw, 18px); font-weight: 700; color: var(--ink-900); margin: 0; }
.perfdetail__crumb { font-size: 12.5px; color: var(--ink-400); margin: 10px 0 0; }
.perfdetail hr { border: 0; border-top: 1px solid var(--ink-200); margin: 16px 0 24px; }
.perfdetail__photos { display: flex; flex-direction: column; gap: 14px; }
.perfdetail__photos img { width: 100%; height: auto; display: block; }
.perfdetail__body { font-size: 14.5px; line-height: 1.9; color: var(--ink-600); white-space: pre-line; margin: 24px 0 0; }
.perfdetail__nav { margin-top: 34px; border-top: 1px solid var(--ink-200); }
.perfdetail__nav a {
  display: flex; align-items: center; gap: 14px; padding: 14px 6px;
  border-bottom: 1px solid var(--ink-200); font-size: 13.5px; color: var(--ink-700);
}
.perfdetail__nav a:hover { background: var(--ink-50); }
.perfdetail__nav span { color: var(--ink-400); font-size: 12px; flex: none; width: 34px; text-align: center; }
.perfdetail__nav a[data-none] { color: var(--ink-300); pointer-events: none; }
.perfdetail__back {
  display: inline-block; margin-top: 20px; padding: 10px 26px; font-size: 13.5px; font-weight: 700;
  border: 1px solid var(--ink-300); background: #fff; color: var(--ink-900); cursor: pointer; border-radius: 3px;
}
.perfdetail__back:hover { background: var(--ink-50); }

/* ── 실적현황 쪽 나누기 ────────────────────────────────
   모바일은 한 쪽에 6장(2열 3줄). 데스크탑은 4열이라 12장이면 3줄로 떨어진다. */
.perfpager { display: flex; justify-content: center; align-items: center; gap: 6px; margin-top: 26px; flex-wrap: wrap; }
.perfpager button {
  min-width: 34px; height: 34px; padding: 0 9px; font-size: 13px; font-weight: 600;
  border: 1px solid var(--ink-200); background: #fff; color: var(--ink-600); cursor: pointer; border-radius: 3px;
}
.perfpager button:hover:not(:disabled) { background: var(--ink-50); }
.perfpager button[aria-current] { background: var(--navy); border-color: var(--navy); color: #fff; font-weight: 700; }
.perfpager button:disabled { opacity: .35; cursor: default; }
.perfpager[hidden] { display: none; }

/* ────────────────────────────────────────────────────────────────
   천지토건 홈페이지 — 개선안 CSS
   목업(천지토건 전체 페이지 목업.dc.html)을 기존 site.css 어휘로 옮긴 것.

   적용 방법: 이 파일 내용을 site.css **맨 아래에 이어 붙이면** 됩니다.
   기존 규칙을 지우지 않고 뒤에서 덮어쓰도록 짰습니다(같은 특정도면 뒤가 이김).
   단, ①번 토큰 블록만은 site.css 위쪽 :root 에 합쳐 넣으세요.
   ──────────────────────────────────────────────────────────────── */


/* ② 플로팅 요소 정리 ─────────────────────────────────────────
   모바일에서 SNS 4개 + 채널톡 + 맨위로 + 상담바가 bottom 0~224px 를
   나눠 쓰고 있었습니다. 남기는 것은 상담 바 하나와 맨 위로 하나. */
@media (max-width: 860px) {
  /* 푸터에 같은 4개가 이미 있습니다 — 중복이자, 문의 직전에 나가는 링크 */
  .floating { display: none; }

  /* 채팅 상담: 상담 바로 흡수. 채팅을 유지하려면 이 줄을 지우고
     아래 .mobile-cta 를 3분할(1fr 1fr 1.3fr)로 바꾸세요. */
  #chatBtn { display: none; }

  /* 가운데 하단은 엄지가 스크롤하며 스치는 자리 → 왼쪽으로 */
  #toTop {
    left: 14px;
    transform: none;
    bottom: 74px;
  }
}


/* ③ 하단 상담 바 — 전화 | 견적 2분할 ────────────────────────
   build.py 에서 마크업을 아래로 바꾸세요(⑦ 참고):
   <div class="mobile-cta" data-show="0">
     <a href="tel:0313550304">전화 상담</a>
     <a class="mobile-cta__quote" href="./inquiry">무료 견적 신청</a>
   </div>                                                        */
@media (max-width: 860px) {
  .mobile-cta {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    padding: 0;
    background: var(--navy);
    box-shadow: 0 -2px 12px rgba(0, 0, 0, .18);
  }
  .mobile-cta > a {
    padding: 15px 0;
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    text-align: center;
  }
  .mobile-cta__quote { background: var(--accent); }

  /* 바 높이가 커졌으니 본문 하단 여백도 맞춥니다 */
  body { padding-bottom: 56px; }
}


/* ④ 사진 — 하늘 크롭 + 색온도 통일 ──────────────────────────
   현장 사진이 4:3 원본 그대로라 하늘 면적과 색이 제각각이었습니다.
   16:10 으로 자르고 위(하늘)를 먼저 버립니다. */
.case img,
.perf__thumb,
.gallery img {
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: center 62%;
  filter: saturate(.94) contrast(1.04);
}

/* 카드 위에 배지·캡션을 얹기 위한 껍데기 */
.shot {
  position: relative;
  display: block;
  overflow: hidden;
}
.shot::after {                       /* 위아래 살짝 눌러 글자를 읽히게 */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(2, 31, 61, .30), rgba(2, 31, 61, 0) 46%, rgba(2, 31, 61, .50));
  pointer-events: none;
}
.shot__tag {
  position: absolute;
  left: 10px;
  top: 10px;
  z-index: 1;
  background: rgba(2, 31, 61, .90);
  color: #fff;
  font-size: 11.5px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
}
.shot__meta {
  position: absolute;
  left: 12px;
  bottom: 9px;
  z-index: 1;
  color: rgba(255, 255, 255, .92);
  font-size: 12px;
  font-weight: 600;
}


/* ⑤ 히어로 ──────────────────────────────────────────────────
   h1 에 지역·공법이 들어가고, 버튼이 두 개(견적 / 절차 안내)가 됩니다. */
.hero__eyebrow {
  font-size: clamp(12px, 1.4vw, 14px);
  font-weight: 700;
  letter-spacing: .1em;
  color: rgba(255, 255, 255, .78);
  margin: 0 0 12px;
}
.hero h1 { text-wrap: balance; }
.hero__sub {
  font-size: clamp(15px, 1.8vw, 18px);
  line-height: 1.8;
  color: rgba(255, 255, 255, .88);
  margin: 0 0 28px;
  text-wrap: pretty;
}
.hero__cta {
  display: flex;
  gap: 11px;
  flex-wrap: wrap;
}
.hero .btn-quote { background: var(--accent); }
.hero .btn-quote:hover { background: var(--accent-700); filter: none; }
.btn-ghost {
  border: 1px solid rgba(255, 255, 255, .62);
  color: #fff;
  font-weight: 700;
  font-size: 16px;
  padding: 14px 28px;
  border-radius: 3px;
  white-space: nowrap;
}
.btn-ghost:hover { background: rgba(255, 255, 255, .12); }

/* 카운터 밑에 근거 한 줄 — 검증 가능한 숫자로 보이게 */
.counts .note {
  font-size: 12.5px;
  color: rgba(255, 255, 255, .6);
  margin: 8px 0 0;
}

@media (max-width: 860px) {
  .hero__cta { flex-direction: column; }
  .hero__cta > * { text-align: center; }
}


/* ⑥ 진행 절차 5단계 ─────────────────────────────────────────
   메인에서는 가로 5칸(.steps--row), /process 에서는 세로 목록. */
.steps--row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
}
.steps--row .step {
  border-top: 3px solid var(--navy);
  padding-top: 16px;
}
.steps--row .step:last-child { border-top-color: var(--accent); }
/* `.step .step__no` — 클래스 하나로는 아래 `.step p` 에 색이 먹힌다(0,1,1 > 0,1,0).
   그래서 STEP 1~5 가 주황이 아니라 회색으로 나왔다(대표님 지적). */
.step .step__no {
  font-size: 12.5px;
  font-weight: 800;
  color: var(--accent);
  margin: 0 0 7px;
  letter-spacing: .06em;
}
.step h3 {
  font-size: clamp(15px, 1.7vw, 17px);
  font-weight: 700;
  margin: 0 0 5px;
  color: var(--ink-900);
}
.step p {
  font-size: 14px;
  line-height: 1.75;
  color: var(--ink-600);
  margin: 0;
}
/* 비전의 MISSION 01·02·03 은 주황이어야 한다(대표님 지시). 위의 `.step p` 가
   `.step__no` 를 회색으로 덮으므로 비전 쪽을 따로 못박아 둔다. */
.step--mission .step__no { color: var(--accent); }

/* /process 본문 — 번호 · 설명 · 기간 3열 */
.steps--list { display: flex; flex-direction: column; gap: 12px; }
.steps--list .step {
  display: grid;
  grid-template-columns: 52px 1fr 150px;
  gap: 20px;
  align-items: start;
  border: 1px solid var(--ink-200);
  padding: 20px 22px;
}
.steps--list .step:last-child { border-color: var(--accent); }
.step__badge {
  width: 52px;
  height: 52px;
  background: var(--navy);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 21px;
  font-weight: 800;
}
.steps--list .step:last-child .step__badge { background: var(--accent); }
.step .step__when { font-size: 14px; color: var(--ink-600); margin: 0; }
/* `.step p` 보다 약해 회색으로 눌려 있었다 — "비용 없음"은 주황이 맞다(대표님 지시). */
.step .step__free { font-size: 13px; font-weight: 700; color: var(--accent); margin: 0 0 4px; }
/* 비용이 드는 단계(3·4)의 우측 첫 줄. 자리는 "비용 없음"과 같고 색만 본문색이다. */
.step .step__cost { font-size: 13px; font-weight: 700; color: var(--ink-900); margin: 0 0 4px; }

@media (max-width: 860px) {
  .steps--row { grid-template-columns: 1fr; gap: 10px; }
  .steps--row .step { border-top: 0; border: 1px solid var(--ink-200); padding: 15px 16px; }
  .steps--list .step { grid-template-columns: 1fr; gap: 10px; padding: 15px 16px; }
  .steps--list .step__badge { width: 32px; height: 32px; font-size: 15px; }
}


/* ⑦ 신뢰 스트립 — 형용사 대신 숫자 ─────────────────────────── */
.trust {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
/* 카드가 넷이면 3열 그리드에서 마지막 하나가 아래 줄에 홀로 눕는다.
   첫 카드("한 곳")를 강조 테두리로 세운다 — 이 회사의 차별점은 장비 수가 아니라
   "전화할 곳이 하나"라는 점이라 맨 앞에 둔다(대표님 2026-08-02). */
.trust--4 { grid-template-columns: repeat(4, 1fr); }
.trust--4 .trust__item:first-child { border-color: var(--accent); }
.trust__item {
  border: 1px solid rgba(255, 255, 255, .16);
  padding: 22px;
}
/* `.trust__item p`(0,1,1)가 `.trust__num`(0,1,0)을 이겨 21대/30년/GPS 숫자가
   13.5px로 쪼그라들었다(HP-B 발견). 선택자 명시도를 한 단계 올려 되돌린다. */
.trust__item .trust__num {
  font-size: clamp(26px, 3.4vw, 32px);
  font-weight: 800;
  color: #fff;
  letter-spacing: -.03em;
  margin: 0 0 8px;
}
.trust__item h3 { font-size: 16px; font-weight: 700; color: #fff; margin: 0 0 8px; }
.trust__item p {
  font-size: 13.5px;
  line-height: 1.75;
  color: rgba(255, 255, 255, .72);
  margin: 0;
}
@media (max-width: 860px) { .trust { grid-template-columns: 1fr; gap: 12px; } }


/* ⑧ GPS 측량 장비 블록 ─────────────────────────────────────── */
.gps {
  background: var(--navy);
  padding: clamp(20px, 3vw, 28px);
  margin-bottom: 30px;
}
.gps__eyebrow {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--accent);
  margin: 0 0 8px;
}
.gps h2 {
  font-size: clamp(18px, 2.4vw, 22px);
  font-weight: 800;
  color: #fff;
  letter-spacing: -.025em;
  margin: 0 0 12px;
  line-height: 1.4;
}
.gps > p {
  font-size: 15px;
  line-height: 1.85;
  color: rgba(255, 255, 255, .85);
  margin: 0 0 20px;
  max-width: 640px;
}
/* 눈썹 글자는 주황이다(대표님 지시). 위의 `.gps > p` 가 같은 요소를 더 구체적으로
   집어 흰색으로 덮으므로, 같은 구체성으로 뒤에서 되돌린다. */
.gps > .gps__eyebrow { color: var(--accent); }
.gps__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.gps__grid > div {
  border: 1px solid rgba(255, 255, 255, .18);
  padding: 18px 20px;
}
.gps__grid h3 { font-size: 16px; font-weight: 800; color: #fff; margin: 0 0 6px; }
.gps__grid p {
  font-size: 14px;
  line-height: 1.75;
  color: rgba(255, 255, 255, .75);
  margin: 0;
}
@media (max-width: 860px) { .gps__grid { grid-template-columns: 1fr; gap: 9px; } }


/* ⑨ 보유 장비 표 ───────────────────────────────────────────── */
.eqtable { width: 100%; border-collapse: collapse; font-size: 15px; }
.eqtable thead th {
  background: var(--navy);
  color: #fff;
  font-weight: 700;
  text-align: left;
  padding: 12px 14px;
}
.eqtable td { padding: 11px 14px; border-bottom: 1px solid var(--ink-200); color: var(--ink-600); }
.eqtable td:first-child { font-weight: 600; color: var(--ink-900); }
/* 줄무늬는 **평범한 행에만** 준다. `tr:nth-child(even)`이 `.is-gps`보다 구체적이라,
   제외하지 않으면 GPS 행의 주황 배경이 줄무늬 회색에 덮인다. */
.eqtable tbody tr:nth-child(even):not(.is-gps):not(.is-total) { background: var(--ink-50); }
/* GPS 행은 **배경**을 연주황으로 깔아 다른 장비와 구분한다(대표님 지시·목업 equipment.png).
   글자는 다른 행과 같은 색이고, "부속"만 주황이다 — 행 전체를 주황 글자로 칠하면
   표가 읽히지 않는다. */
.eqtable .is-gps { background: #fdf0e6; }
.eqtable .is-gps td:nth-child(3) { color: var(--accent); font-weight: 700; }
.eqtable .is-total td { font-weight: 800; color: var(--navy); border-bottom: 0; }

/* 360px 에서는 표가 눕습니다 — 목업(equipment.png)의 카드로.
   1행은 "굴착기 08W · 06W" 와 오른쪽 큰 숫자, 2행은 주로 쓰는 공정.
   대수가 두 줄을 가로지르므로 라벨(규격/대수/공정)은 지웁니다 — 카드가 이미 읽힙니다. */
@media (max-width: 620px) {
  .eqtable, .eqtable tbody { display: block; width: 100%; }
  .eqtable thead { display: none; }
  .eqtable tr {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: baseline;
    column-gap: 8px;
    border: 1px solid var(--ink-200);
    padding: 13px 16px;
    margin-bottom: 10px;
  }
  .eqtable td { display: block; border: 0; padding: 0; }
  .eqtable td[data-label]::before { content: none; }
  .eqtable tbody tr:nth-child(even):not(.is-gps):not(.is-total) { background: transparent; }
  /* 칸을 하나도 빠짐없이 못박습니다 — 한 칸만 자동 배치로 두면 나머지가 밀려
     숫자가 이름 앞으로 올라옵니다(대수가 두 줄을 가로지르기 때문). */
  .eqtable td:nth-child(1) { grid-area: 1 / 1 / 2 / 2; font-size: 16px; font-weight: 800; color: var(--ink-900); }
  .eqtable td:nth-child(2) { grid-area: 1 / 2 / 2 / 3; justify-self: start; font-size: 13px; font-weight: 600; color: var(--ink-400); }
  .eqtable td:nth-child(3) {
    grid-area: 1 / 3 / 3 / 4;
    align-self: center;
    justify-self: end;
    font-size: 22px;
    font-weight: 800;
    color: var(--navy);
  }
  .eqtable td:nth-child(4) { grid-area: 2 / 1 / 3 / 3; font-size: 14px; margin-top: 5px; }
  /* GPS 는 대수 자리에 "부속" 이 들어가 숫자가 아니다 — 첫 줄에 맞춰 올립니다 */
  /* 데스크탑과 같이 배경으로 구분한다. 카드 레이아웃이라 테두리도 주황으로 둔다. */
  .eqtable .is-gps { background: #fdf0e6; border-color: var(--accent); }
  /* 바로 위 `td:nth-child(n)` 들이 칸마다 색을 주므로, "부속"의 주황은 같은 구체성으로
     뒤에서 다시 덮어야 한다 — 데스크탑 규칙만으로는 모바일에서 안 먹는다. */
  .eqtable .is-gps td:nth-child(3) { font-size: 14px; font-weight: 700; align-self: start; color: var(--accent); }
  /* 합계는 네이비 띠 */
  .eqtable .is-total {
    grid-template-columns: 1fr auto;
    background: var(--navy);
    border-color: var(--navy);
  }
  .eqtable .is-total td { color: #fff; font-size: 16px; font-weight: 800; }
  .eqtable .is-total td:nth-child(1) { grid-area: 1 / 1 / 2 / 2; }
  .eqtable .is-total td:nth-child(2) { grid-area: 1 / 2 / 2 / 3; justify-self: end; font-size: 20px; }
  .eqtable .is-total td:nth-child(3) {
    grid-area: 2 / 1 / 3 / -1;
    justify-self: start;
    margin-top: 4px;
    font-size: 13px;
    font-weight: 600;
    color: rgba(255, 255, 255, .72);
  }
}


/* ⑩ 실적현황 — 3열, 발췌 대신 배지 ─────────────────────────── */
.perfgrid { grid-template-columns: repeat(3, 1fr); gap: 16px; border: 0; }
.perf {
  border: 1px solid var(--ink-200);
}
/* 메인 시공사례 카드도 같은 클래스를 쓰는데 `.case__body span` 이 회색으로 덮고 있었다
   (0,1,1 > 0,1,0) — 지역 줄은 목록과 똑같이 주황이다(대표님 지시). */
.case__body .perf__region { color: var(--accent); font-weight: 700; margin: 0 0 5px; }
.perf__region {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--accent);
  margin: 0 0 5px;
}
/* 39건 중 33건은 본문이 없습니다 — 발췌를 쓰면 카드 높이가 들쭉날쭉해지고
   글 없는 카드가 미완성으로 보입니다. 항상 있는 정보(사진 수·날짜)로 대신합니다. */
.perf__excerpt { display: none; }

@media (max-width: 1024px) { .perfgrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) {
  /* 360px 에서 2열이면 사진이 103px 높이 — 공법이 구분되지 않습니다 */
  .perfgrid { grid-template-columns: 1fr; gap: 14px; }
}

/* 좌측 분류에 건수 표시 */
.perfnav button .cnt { color: var(--ink-300); font-weight: 600; }
.perfnav button[aria-current] .cnt { color: rgba(255, 255, 255, .6); }

/* 지역 필터(칩) — 분류 목록 아래 */
.perfregions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 22px; }
.perfregions button {
  border: 1px solid var(--ink-200);
  background: #fff;
  border-radius: 999px;
  font-size: 13.5px;
  color: var(--ink-600);
  padding: 6px 12px;
  cursor: pointer;
}
.perfregions button[aria-current] { background: var(--navy); border-color: var(--navy); color: #fff; font-weight: 700; }


/* ⑪ 실적 상세 — 공사 정보 표 ────────────────────────────────
   본문을 못 쓰는 글도 이 표만으로 완성돼 보입니다.
   ERP 가 이미 가진 값 + 규모·기간·용도 세 칸만 추가하면 채워집니다. */
.perfspec {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  border-top: 2px solid var(--navy);
  margin: 0 0 28px;
}
.perfspec th {
  text-align: left;
  padding: 11px 14px;
  background: var(--ink-50);
  font-weight: 700;
  color: var(--ink-900);
  width: 120px;
  border-bottom: 1px solid var(--ink-200);
}
.perfspec td { padding: 11px 14px; color: var(--ink-600); border-bottom: 1px solid var(--ink-200); }
/* 카드 글상자 — 발췌를 감췄으니 지역 한 줄 + 제목 두 줄이면 된다.
   목록 시절의 168px 를 그대로 두면 제목 아래가 손바닥만큼 빈다. */
.perf__body { min-height: 0; gap: 5px; padding: 13px 14px 15px; }

/* 본문이 있는 6건은 표 아래에 인용처럼 — 본문 없는 33건과 나란히 둬도 어색하지 않다 */
.perfdetail__body {
  margin: 0 0 28px;
  padding: 16px 18px;
  background: var(--ink-50);
  border-left: 3px solid var(--accent);
}

@media (max-width: 620px) {
  .perfspec th { width: 84px; padding: 10px 12px; }
  .perfspec td { padding: 10px 12px; }
  /* 네 칸을 두 줄로 접는다 — 360px 에서 4열이면 값이 글자마다 줄바꿈된다 */
  .perfspec, .perfspec tbody, .perfspec tr { display: block; }
  .perfspec tr { display: grid; grid-template-columns: 96px 1fr; }
  .perfspec th, .perfspec td { display: block; }
  /* 96px 은 "공사 기간" 이 한 줄로 들어가는 폭이다 — 84px 이면 두 줄로 접힌다 */
  .perfspec th { width: auto; white-space: nowrap; }
}

/* 모바일 공법 필터는 지역 칩과 같은 가로 칩으로 — 세로 목록을 그대로 두면
   화면 첫 판이 필터로만 채워져 사진이 한 장도 안 보인다(목업 ⑨ 모바일). */
@media (max-width: 860px) {
  .perfnav { display: flex; flex-direction: row; flex-wrap: wrap; gap: 7px; border: 0; border-radius: 0; overflow: visible; }
  .perfnav button {
    border: 1px solid var(--ink-200); border-radius: 999px;
    padding: 6px 12px; font-size: 13.5px; background: #fff; color: var(--ink-600);
  }
  .perfnav button[aria-current] { background: var(--navy); border-color: var(--navy); color: #fff; font-weight: 700; }
  .perfregions { margin-top: 10px; }
}


/* ⑫ 견적 폼 — 7문항 → 4문항, 상자 8개 → 1개 ────────────────
   기존 .formgroup(흰 상자 + 그림자)을 문항마다 두면 모바일에서
   화면 6~7개 분량이 됩니다. 한 상자 안에 필드만 쌓습니다. */
.form2 {
  max-width: 760px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid var(--ink-200);
  padding: clamp(20px, 3.4vw, 32px);
}
.form2 .field { margin-bottom: 22px; }
.form2 .field:last-of-type { margin-bottom: 0; }
.form2 label {
  display: block;
  font-size: 16px;
  font-weight: 700;
  color: var(--ink-900);
  margin: 0 0 8px;
}
.form2 .hint {
  font-size: 13.5px;
  color: var(--ink-400);
  margin: -4px 0 8px;
}
.form2 .req { color: var(--accent); }
.form2 input[type="text"],
.form2 input[type="tel"],
.form2 textarea {
  width: 100%;
  border: 0;
  border-bottom: 2px solid var(--navy);
  border-radius: 0;
  background: transparent;
  padding: 12px 2px;
  font-size: 16px;            /* iOS 확대 방지 — 16px 아래로 내리지 마세요 */
  font-family: inherit;
}
.form2 input:focus, .form2 textarea:focus { outline: 0; border-color: var(--accent); }
.form2 .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
@media (max-width: 620px) { .form2 .row2 { grid-template-columns: 1fr; gap: 22px; } }

/* 사진 첨부 — 별도 문항이 아니라 주소의 부속으로 */
.form2 .dropzone {
  margin-top: 12px;
  border: 1px dashed var(--ink-300);
  background: #fafbfc;
  padding: 16px;
  text-align: center;
  cursor: pointer;
}
.form2 .dropzone b { display: block; font-size: 15px; color: var(--navy); }
.form2 .dropzone span { font-size: 13.5px; color: var(--ink-400); }
.form2 .dropzone input[type="file"] { display: none; }

/* 공법 선택 — 체크박스 목록 대신 칩 */
.chips { display: flex; flex-wrap: wrap; gap: 9px; }
.chips label {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--ink-200);
  border-radius: 999px;
  padding: 9px 15px;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink-600);
  cursor: pointer;
  margin: 0;
}
.chips input { position: absolute; opacity: 0; width: 0; height: 0; }
.chips input:checked + span,
.chips label:has(input:checked) {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
  font-weight: 700;
}

/* 접히는 자유 메모 — 위아래로 숨을 준다(대표님 2026-08-02).
   공사종류 칩과 동의 문구 사이에 끼어 있어, 여백이 없으면 앞뒤에 달라붙어 보인다. */
.form2 details { margin: 26px 0; }
.form2 details summary {
  font-size: 15px;
  font-weight: 700;
  color: var(--navy);
  cursor: pointer;
  list-style: none;
  padding: 6px 0;
}
.form2 details summary::-webkit-details-marker { display: none; }
.form2 details summary::before { content: "＋ "; }
.form2 details[open] summary::before { content: "－ "; }

/* 동의 — 230px 스크롤 상자 대신 한 줄 + 링크 */
.consent-line {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 18px 2px 0;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink-600);
}
.consent-line input[type="checkbox"] {
  width: 21px;
  height: 21px;
  accent-color: var(--navy);
  flex: none;
  margin-top: 1px;
}
.consent-line a { font-weight: 700; text-decoration: underline; }

.form2 .form__submit {
  width: min(320px, 100%);
  border: 0;                          /* 팔레트에 없던 gray 테두리 제거 */
  background: var(--accent);
  border-radius: 0;
}
.form2 .form__submit:hover { background: var(--accent-700); }

/* 접수 후 흐름 안내 — 폼 옆(데스크탑) */
.form-aside { display: grid; gap: 16px; }
.form-aside__tel { background: var(--navy); color: #fff; padding: 24px 22px; }
.form-aside__tel b { display: block; font-size: 22px; font-weight: 800; letter-spacing: -.02em; margin: 0 0 6px; }
.form-aside__tel p { font-size: 14px; line-height: 1.75; color: rgba(255, 255, 255, .75); margin: 0; }
.form-aside__flow { border: 1px solid var(--ink-200); background: #fff; padding: 20px 22px; }
.form-aside__flow li {
  display: flex;
  gap: 11px;
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--ink-600);
  margin-bottom: 12px;
  list-style: none;
}
.form-aside__flow li:last-child { margin-bottom: 0; }
.form-aside__flow i {
  width: 22px;
  height: 22px;
  background: var(--navy);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  font-style: normal;
  display: grid;
  place-items: center;
  flex: none;
}
.form-aside__flow li:last-child i { background: var(--accent); }

.quote-layout { display: grid; grid-template-columns: 1fr 300px; gap: 32px; align-items: start; }
@media (max-width: 900px) { .quote-layout { grid-template-columns: 1fr; } }


/* ⑬ 사업분야 — "이런 경우에 필요합니다" + 공법 카드 ────────── */
.biz-lead { display: grid; grid-template-columns: 1.15fr 1fr; gap: 36px; align-items: start; margin-bottom: 36px; }
/* 인사말은 왼쪽이 사진이라 1.15fr 이면 화면 절반을 넘게 먹는다(대표님 지적).
   사진 칸만 절반으로 — 53% → 27%(4:11). 사업분야 쪽 비율은 건드리지 않는다. */
/* 인사말 2단 — 사진 칸.
   4fr/11fr(폭 26%)로 좁혔더니 넓은 항공사진의 좌우가 통째로 잘렸다. 현장 전경이
   보이게 다시 넓힌다(대표님 지시). 목업 greetings.png의 사진:글 = 35:62 에 맞춘다. */
.biz-lead--intro { grid-template-columns: 7fr 11fr; }
.biz-when {
  background: var(--ink-50);
  border: 1px solid var(--ink-200);
  padding: 22px 24px;
}
.biz-when h3 { font-size: 15px; font-weight: 800; color: var(--navy); margin: 0 0 14px; }
.biz-when ul { margin: 0; padding-left: 20px; font-size: 15px; line-height: 1.95; color: var(--ink-600); }
@media (max-width: 900px) { .biz-lead { grid-template-columns: 1fr; gap: 22px; } }

/* 공법 카드에 "언제 쓰나" 한 줄 — 설명만 있으면 비교가 안 됩니다 */
.infocard { background: #fff; border: 1px solid var(--ink-200); border-radius: 0; }
.infocard .when {
  font-size: 14px;
  font-weight: 600;
  color: var(--navy);
  margin: 8px 0 0;
}
.infocard .tag {
  background: var(--ink-50);
  color: var(--ink-600);
  font-size: 12px;
  font-weight: 700;
  padding: 3px 8px;
  margin-left: 8px;
  vertical-align: middle;
}
.infocards .is-wide { grid-column: 1 / -1; }   /* 5개일 때 마지막 칸 */


/* ⑭ 조직도 ─────────────────────────────────────────────────
   인허가·설계는 전문 설계사무소 대행이라 팀에서 뺐습니다. */
.orgchart { display: flex; flex-direction: column; align-items: center; margin-bottom: 40px; }
.orgchart__top {
  background: var(--navy);
  color: #fff;
  padding: 16px 40px;
  text-align: center;
}
.orgchart__top b { display: block; font-size: 17px; font-weight: 800; }
.orgchart__top span { font-size: 13.5px; color: rgba(255, 255, 255, .75); }
.orgchart__line { width: 2px; height: 26px; background: var(--ink-200); }
.orgchart__bar { width: 100%; height: 2px; background: var(--ink-200); }
.orgchart__teams {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  width: 100%;
}
.orgchart__teams > div { display: flex; flex-direction: column; align-items: center; }
.orgchart__teams .box {
  border: 1px solid var(--ink-200);
  padding: 18px 16px;
  width: 100%;
  text-align: center;
}
.orgchart__teams .box b { display: block; font-size: 16px; font-weight: 800; color: var(--ink-900); margin: 0 0 6px; }
.orgchart__teams .box p { font-size: 13.5px; line-height: 1.7; color: var(--ink-600); margin: 0; }
@media (max-width: 860px) {
  .orgchart__teams { grid-template-columns: 1fr; gap: 10px; }
  .orgchart__bar, .orgchart__teams .orgchart__line { display: none; }
}


/* ⑮ 인재채용 ───────────────────────────────────────────────
   포스터(recruit.png)는 860×5500 세로 이미지입니다.
   폭을 늘리면 높이가 6.4배로 터지므로 **높이 기준**으로 맞춥니다. */
/* 머리말·공고·지원방법을 각각 이름 붙인 칸으로 잡는다. 데스크탑 그림은 예전과 같고
   (좌 머리말+공고, 우 지원방법), 모바일에서 순서만 갈아끼우려고 이렇게 둔다.
   행 간격은 0 — 머리말 아래 여백은 지금까지처럼 `.sec__lead` 의 margin 이 맡는다. */
.jobs {
  display: grid;
  grid-template-columns: 1fr 300px;
  grid-template-areas: "intro aside" "list aside";
  gap: 36px;
  row-gap: 0;
  align-items: start;
}
.jobs__intro { grid-area: intro; }
.jobs__list { grid-area: list; }
.jobs > aside { grid-area: aside; }
.job { border: 1px solid var(--ink-200); padding: 22px 24px; margin-bottom: 14px; }
.job h3 { font-size: 19px; font-weight: 800; color: var(--ink-900); margin: 0 0 14px; }
.job .badge {
  background: var(--accent);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 9px;
  margin-left: 10px;
  vertical-align: middle;
}
.job table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.job th { text-align: left; padding: 7px 0; width: 90px; color: var(--ink-400); font-weight: 700; }
.job td { padding: 7px 0; color: var(--ink-600); }

.apply { background: var(--navy); padding: 24px 22px; }
.apply b { display: block; font-size: 19px; font-weight: 800; color: #fff; letter-spacing: -.02em; margin: 0 0 16px; line-height: 1.45; }
.apply p { font-size: 14.5px; line-height: 1.8; color: rgba(255, 255, 255, .82); margin: 0 0 18px; }
.apply .btn-quote { display: block; text-align: center; background: var(--accent); }
.apply .btn-ghost { display: block; text-align: center; margin-top: 9px; }

.poster { border-top: 1px solid var(--ink-200); margin-top: 34px; padding-top: 30px; }
/* 포스터는 860×5500 세로로 긴 한 장이다. 높이를 자르면 글씨가 못 읽을 만큼 작아져,
   개편 전처럼 폭에 맞춰 키우고 높이는 그대로 흘린다(`.pageimg--wide` 가 폭을 잡는다). */
.poster img {
  display: block;
  border: 1px solid var(--ink-200);
}
/* 모바일에서는 "전화 한 통이면 됩니다"(지원 방법)를 공고 카드 위로 올린다 — 지원하는
   방법을 먼저 보여주고 조건을 읽게 하는 쪽이 목업 모바일 컬럼의 순서다(대표님 확정).
   `display: contents` 로 aside 를 지워 그 안의 두 상자를 각각 칸에 배치한다. */
@media (max-width: 860px) {
  .jobs {
    grid-template-columns: 1fr;
    grid-template-areas: "intro" "apply" "list" "extra";
    gap: 22px;
    row-gap: 22px;
  }
  .jobs > aside { display: contents; }
  .jobs .apply { grid-area: apply; }
  .jobs > aside > .biz-when { grid-area: extra; }
}


/* ⑯ 404 ───────────────────────────────────────────────────── */
.notfound { padding: clamp(60px, 10vw, 100px) 0; text-align: center; }
.notfound__code { font-size: clamp(48px, 8vw, 64px); font-weight: 800; color: var(--navy); letter-spacing: -.04em; line-height: 1; margin: 0 0 10px; }
.notfound h1 { font-size: clamp(20px, 2.6vw, 24px); font-weight: 800; color: var(--ink-900); margin: 0 0 12px; }
/* :not() 이 없으면 이 규칙이 .notfound__code 를 이긴다(선택자가 한 단계 더 구체적이라).
   그러면 목업의 커다란 404 가 본문 글씨 크기로 찌그러진다 — 실제로 그랬다. */
.notfound > p:not(.notfound__code) { font-size: 15.5px; line-height: 1.8; color: var(--ink-500); margin: 0 0 34px; }
.notfound__links {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  max-width: 720px;
  margin: 0 auto;
  text-align: left;
}
.notfound__links a { border: 1px solid var(--ink-200); padding: 20px 16px; display: block; }
.notfound__links a:last-child { border-color: var(--accent); }
.notfound__links b { display: block; font-size: 15.5px; font-weight: 800; color: var(--navy); margin: 0 0 6px; }
.notfound__links a:last-child b { color: var(--accent); }
.notfound__links span { font-size: 13.5px; line-height: 1.7; color: var(--ink-600); }
@media (max-width: 860px) { .notfound__links { grid-template-columns: 1fr; gap: 10px; } }


/* ⑰ 약관 — 읽는 조건만 개선 (원문은 그대로) ────────────────── */
.policy-toc {
  background: var(--ink-50);
  border: 1px solid var(--ink-200);
  padding: 22px 24px;
  margin-bottom: 30px;
}
.policy-toc h2 { font-size: 15px; font-weight: 800; color: var(--navy); margin: 0 0 12px; }
.policy-toc div { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 24px; }
.policy-toc a { font-size: 14.5px; color: var(--ink-600); }
.policy-date { font-size: 14.5px; color: var(--ink-400); margin: 0 0 28px; }
.policy-archived {
  background: var(--ink-50);
  border-bottom: 1px solid var(--ink-200);
  padding: 12px 0;
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--ink-600);
}
/* 13.5px 는 40~60대 토지주에게 작습니다 */
.prose--policy { font-size: 15px !important; line-height: 1.95 !important; }
@media (max-width: 620px) { .policy-toc div { grid-template-columns: 1fr; } }


/* ⑱ 타이포 · 최소 크기 ─────────────────────────────────────── */
.sec__title, .pagehero h1, .hero h1 { text-wrap: balance; }
.prose p, .sec__lead, .infocard p, .diff__item p { text-wrap: pretty; }

/* 모바일에서 12.5px 로 떨어지던 것들을 올립니다 */
@media (max-width: 860px) {
  .diff__item p { font-size: 15px; }
  .gallery figcaption { font-size: 13.5px; }
  .perf__title { font-size: 16px; }
  /* 섹션 여백은 줄이고, 구분은 배경색이 맡습니다 */
  .sec { padding: 40px 0; }
}


/* ⑲ 강조색 사용 규칙 ───────────────────────────────────────
   강조색은 **누를 수 있는 것에만**. 라벨류는 회색으로 내립니다.
   (지금은 eyebrow·연락처 소제목까지 빨강이라 신호가 희석됩니다) */
.sec__eyebrow { color: var(--ink-400); }
.contactgrid dt { color: var(--ink-400); }
.quote-tel__h { color: var(--ink-400) !important; }
.hdr .btn-quote:hover { background: var(--accent); }


/* ⑳ 마감 폴리시 (목업 대조분) ─────────────────────────────── */

/* 배너에서 제목이 사라진 자리 — 본문이 배너에 바싹 붙지 않게 띄웁니다. */
.pagehero + .wrap { padding-top: clamp(26px, 4.7vw, 60px); }
/* 서브탭은 자기 위 여백을 이미 갖고 있다 — 둘을 더하면 배너가 두 배로 멀어진다 */
.pagehero + .wrap > .subtabs { margin-top: 0; }

/* 한국어 낱말이 줄 끝에서 가운데 잘리는 것("화성에/서")을 막습니다.
   word-break 는 상속되므로 body 한 줄이면 본문·제목·표가 모두 걸립니다.
   대신 끊을 데가 없는 긴 영문·URL 이 칸을 밀지 않도록 overflow-wrap 을 같이 겁니다. */
body { word-break: keep-all; overflow-wrap: break-word; }

/* 서브탭 — 모바일은 **밑줄 탭 한 줄**(대표님 지시).
   알약이었을 때는 5개가 4+1로 끊겨 마지막 하나가 둘째 줄에 외롭게 남았다.
   테두리·배경을 걷어내고 글자만 두면 360px에도 다섯 개가 여유 있게 들어간다.
   현재 탭은 주황 밑줄 — 상단 네비와 같은 문법이라 사이트가 한 몸으로 읽힌다. */
@media (max-width: 860px) {
  .subtabs {
    display: flex;
    justify-content: space-between;
    gap: 2px;
    border: 0;
    border-bottom: 1px solid var(--ink-200);
  }
  .subtabs a {
    flex: 1 1 0;
    min-width: 0;
    border: 0;
    border-radius: 0;
    padding: 12px 2px 11px;
    font-size: 13.5px;
    font-weight: 600;
    white-space: nowrap;
    text-align: center;
    color: var(--ink-500);
    /* 밑줄은 아래 테두리 위에 겹쳐 그린다 — 두께가 바뀌어도 탭 높이가 흔들리지 않는다 */
    box-shadow: inset 0 -3px 0 transparent;
  }
  /* 격자용 `.subtabs a:last-child { border-right: 0 }` 와 297행의 아래 테두리는
     밑줄 탭에서 필요 없다 — 같은 구체성으로 눌러 둔다. */
  .subtabs a:last-child { border-right: 0; }
  .subtabs a[aria-current] {
    background: none;
    color: var(--navy);
    font-weight: 800;
    box-shadow: inset 0 -3px 0 var(--accent);
  }
}

/* 360px 대에서는 글자만 한 단계 줄여 다섯 개가 넉넉히 들어가게 한다. */
@media (max-width: 400px) {
  .subtabs a { padding: 11px 1px 10px; font-size: 12.5px; letter-spacing: -.02em; }
}

/* 일반 표도 360px 에서는 카드로 접습니다 — 장비 표와 같은 문법(data-label). */
@media (max-width: 620px) {
  .table--stack, .table--stack tbody, .table--stack tr, .table--stack td { display: block; width: 100%; }
  .table--stack thead { display: none; }
  .table--stack tr {
    border: 1px solid var(--ink-200);
    padding: 13px 16px;
    margin-bottom: 10px;
  }
  .table--stack td { border: 0; padding: 2px 0; }
  .table--stack td:first-child { font-size: 16px; font-weight: 800; color: var(--ink-900); }
  .table--stack td[data-label]::before {
    content: attr(data-label) " ";
    color: var(--ink-400);
    font-weight: 700;
  }
}


/* 사업분야 하단 CTA ─────────────────────────────────────────
   데스크탑 모양은 예전 인라인 style 그대로다(왼쪽 문구, 오른쪽 버튼 줄).
   인라인이면 아래 미디어쿼리가 `align-items:center` 를 못 이겨 모바일에서 버튼이
   가운데 반 칸으로 쪼그라든다 — 그래서 배치를 전부 여기로 옮겼다. */
.biz-cta {
  padding: 26px 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.biz-cta__btns { display: flex; gap: 10px; flex-wrap: wrap; margin: 0; }

/* 모바일에서는 버튼을 화면 폭으로. 360px 에서 "진행 절차 보기"와 "무료 견적 상담"이
   나란히 서면 둘 다 반 칸이라 글씨가 접힌다(대표님 지적).
   갤러리 마지막 줄과 이 상자가 맞붙어 있어 위 여백도 함께 준다. */
@media (max-width: 860px) {
  .biz-cta { margin-top: 34px; flex-direction: column; align-items: stretch; }
  .biz-cta__btns { flex-direction: column; }
  .biz-cta__btns > a { display: block; width: 100%; text-align: center; }
}


/* 문의하기 모바일 머리말 — 목업 inquiry 모바일 컬럼의 폼 위 블록.
   데스크탑에는 우측 "바로 통화" 상자가 같은 말을 하므로 감춘다.
   경계는 `.quote-layout` 이 한 줄로 접히는 900px 과 같이 간다. */
.quote-mhead { display: none; }
@media (max-width: 900px) {
  .quote-mhead { display: block; text-align: center; margin-bottom: 22px; }
  .quote-mhead__title { font-size: 21px; font-weight: 800; color: var(--navy); letter-spacing: -.02em; margin: 0 0 8px; }
  .quote-mhead__lead { font-size: 14.5px; line-height: 1.75; color: var(--ink-500); margin: 0 0 16px; }
  .quote-mhead__tel {
    display: block;
    border: 1px solid var(--ink-300);
    padding: 14px;
    font-size: 16px;
    font-weight: 700;
    color: var(--navy);
    background: #fff;
  }
}

/* 재의뢰 배지 — 후기 카드에 값이 있을 때만 붙는다(build.py REVIEWS 마지막 칸).
   "다시 불렀다"는 사실이 형용사 열 개보다 강하다(대표님 2026-08-02). */
.review__repeat {
  align-self: flex-start;
  background: #fdf0e6;      /* 장비표 GPS 행과 같은 주황 배경 — 사이트 안에서 톤을 맞춘다 */
  color: var(--accent-700);
  font-size: 12px;
  font-weight: 700;
  border-radius: 6px;
  padding: 4px 9px;
  margin-bottom: 12px;
}

/* ⑫ "전화하실 곳은 한 곳입니다" 표 ─────────────────────────────
   공용 `.table` 을 쓰지 않고 따로 둔다 — 목업(3.png)은 헤더가 남색 바탕에 흰 글씨이고,
   좁은 화면에서는 `A → 천지토건이 챙김` 형태의 카드로 접힌다. 공용 표의 카드 접기
   (`data-label` 을 앞에 붙이는 방식)와는 모양이 아예 다르다. */
.who { width: 100%; border-collapse: collapse; margin-bottom: 44px; }
.who thead th {
  background: var(--navy);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  text-align: left;
  padding: 14px 18px;
  white-space: nowrap;
}
.who tbody td { padding: 15px 18px; font-size: 14.5px; color: var(--ink-600); }
.who tbody tr:nth-child(even) { background: #F5F7FA; }
.who tbody td:first-child { font-weight: 700; color: var(--ink-900); }
/* 오른쪽 열이 전부 "천지토건"인 것이 이 표의 메시지다 — 남색 굵게로 눈에 띄게 둔다 */
.who tbody td:last-child { font-weight: 700; color: var(--navy); }
.who tbody td .self { font-weight: 700; color: var(--ink-900); }

@media (max-width: 720px) {
  /* 카드로 접는다. 표 골격은 그대로 두고 보이기만 바꾼다 — 접근성·SEO 상 표가 맞다. */
  .who, .who tbody, .who tr, .who td { display: block; width: 100%; }
  .who thead { display: none; }
  .who { margin-bottom: 30px; }
  .who tbody tr {
    border: 1px solid var(--ink-200);
    border-radius: 8px;
    padding: 13px 15px;
    margin-bottom: 9px;
    background: #fff;
  }
  .who tbody tr:nth-child(even) { background: #fff; }
  .who tbody td { padding: 0; }
  .who tbody td:first-child { font-size: 15px; margin-bottom: 4px; }
  /* 둘째·셋째 칸을 한 줄로 합쳐 "전문 설계사무소 → 천지토건이 챙김" 으로 읽히게 한다 */
  .who tbody td:nth-child(2) { display: inline; font-size: 13.5px; }
  .who tbody td:last-child { display: inline; font-size: 13.5px; }
  .who tbody td:last-child::before { content: " → "; color: var(--ink-600); font-weight: 400; }
  /* 좁은 화면에서만 "이 챙김"을 덧붙인다 — 데스크탑 표는 목업대로 "천지토건" 만 둔다 */
  .who tbody td:last-child::after { content: "이 챙김"; }
  /* 우리가 직접 하는 줄은 넘길 곳이 없다 — 화살표를 빼고 테두리로 세운다 */
  .who tbody tr.is-self { border-color: var(--navy); }
  .who tbody tr.is-self td:last-child { display: none; }
}

/* ── 주소 검색 (우편번호 서비스) ─────────────────────
 * 화면 위에 덮어 띄운다. 폼 안에 끼워 넣으면 목록이 길어질 때 페이지가 통째로 늘어나
 * 아래 항목들이 저 밑으로 밀린다.
 * 360px 에서는 화면을 거의 다 쓴다 — 검색 결과가 좁으면 주소를 못 고른다. */
.addr__layer { position: fixed; inset: 0; z-index: 9000; display: flex;
  align-items: center; justify-content: center; padding: 16px; }
.addr__dim { position: absolute; inset: 0; background: rgba(16, 20, 26, 0.45); }
.addr__box { position: relative; width: 100%; max-width: 480px; height: min(560px, 86vh);
  background: #fff; border-radius: 10px; overflow: hidden;
  display: flex; flex-direction: column; box-shadow: 0 18px 48px rgba(0, 0, 0, 0.28); }
.addr__bar { display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; border-bottom: 1px solid var(--ink-200, #e2e5ea); font-size: 15px; }
.addr__x { border: 0; background: transparent; font-size: 22px; line-height: 1;
  color: var(--ink-400, #8a9099); cursor: pointer; padding: 0 4px; }
/* 높이를 안 주면 우편번호 화면이 0px 로 접혀 아무것도 안 보인다 */
.addr__host { flex: 1; min-height: 0; }
@media (max-width: 480px) {
  .addr__layer { padding: 0; }
  .addr__box { max-width: none; height: 100%; border-radius: 0; }
}