/* ── 00-tokens.css ── */
/* ─────────────────────────────────────────────────────────────
   00-tokens — 화담 디자인 토큰 (최종 디자인 명세 2장)
   색·글자·폭·모서리·움직임은 여기서만 정한다. 다른 파일은 var(--…)만 쓴다.
   ───────────────────────────────────────────────────────────── */
:root {
  /* 색 — 바탕 */
  --white: #FFFFFF;
  --bg-soft: #F5F6F8;          /* 아주 옅은 회색 구간 */
  --bg-soft-2: #EDEFF3;        /* 회색 구간 안의 칸·사진 바탕 */
  --navy-900: #0E1A33;         /* 짙은 남색 구간(일하는 방식·상담) — 홈에서는 이 두 곳만 */
  --navy-850: #13223F;         /* 남색 위 칸 */
  --navy-800: #1A2B4D;         /* 남색 위 테두리·눌림 */
  --navy-950: #0B1220;         /* 푸터 먹색 */

  /* 색 — 글자 */
  --ink: #111827;              /* 제목 */
  --ink-2: #374151;            /* 본문 */
  --ink-3: #4B5563;            /* 보조(흰 바탕 7:1) */
  --on-dark: #FFFFFF;
  --on-dark-2: rgba(255, 255, 255, .84);   /* 남색 위 본문 */
  --on-dark-3: rgba(255, 255, 255, .78);   /* 남색 위 가장 옅은 글자 — 이보다 옅게 쓰지 않는다 */

  /* 색 — 선 */
  --line: #E5E7EB;
  --line-2: #D1D5DB;
  --line-input: #8B95A1;       /* 입력칸·선택 상자 경계(흰 바탕 약 3:1, WCAG 1.4.11) — 10-29 검토 5-10 */
  --line-strong: #111827;
  --line-dark: rgba(255, 255, 255, .16);
  --line-dark-2: rgba(255, 255, 255, .30);

  /* 색 — CI 금(선·번호·숫자 단위·작은 강조에만) */
  --gold: #AF954F;
  --gold-ink: #8A7136;         /* 흰 바탕 글자용(4.67:1) */
  --gold-ink-soft: #7C652E;    /* 옅은 회색 바탕 글자용(5.17:1) — .section--soft 등에서 --gold-ink 를 이것으로 바꿔 씀 */
  --gold-lt: #D2BB82;          /* 남색 바탕 글자용 */

  /* 색 — 분야(점·윗선·작은 꼬리표에만) */
  --f-comp: #2B4A8B;           /* 토지 수용·보상 = 남색 계열 */
  --f-comp-lt: #93A9E2;        /* 짙은 바탕 위 보상 점 */
  --f-build: #D9572B;          /* 하자·건설·집합건물 = 주황 */
  --f-build-lt: #F08E66;       /* 짙은 바탕 위 주황 점 */

  /* 글자 */
  --font: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", "맑은 고딕", system-ui, sans-serif;
  --font-mono: Consolas, "SFMono-Regular", ui-monospace, "D2Coding", "Pretendard Variable", Pretendard, monospace; /* 한글은 Pretendard 로(굴림체로 떨어지지 않게) */
  --fs-body: 17px;
  --fs-lead: 19px;
  --fs-small: 15px;
  --fs-note: 13px;             /* 각주 최소 — 이보다 작게 쓰지 않는다 */
  --fs-h1: 60px;
  --fs-h2: 42px;
  --fs-h3: 22px;
  --lh: 1.75;
  --lh-tight: 1.3;
  --ls-title: -0.025em;

  /* 폭·여백 */
  --container: 1280px;
  --gutter: 40px;
  --section-y: 120px;
  --header-top: 38px;          /* 위 작은 줄 */
  --header-main: 80px;         /* 주 줄 */
  --header-h: calc(var(--header-top) + var(--header-main));

  /* 모서리·그림자 */
  --r-card: 8px;
  --r-card-sm: 6px;
  --r-btn: 4px;
  --shadow-1: 0 1px 2px rgba(17, 24, 39, .06);
  --shadow-card: 0 18px 40px -24px rgba(11, 18, 32, .28);
  --shadow-float: 0 16px 40px rgba(11, 18, 32, .16);

  /* 움직임 */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --t-fast: .2s;
  --t: .3s;
  --t-slow: .4s;
}

@media (max-width: 1279px) {
  :root { --fs-h2: 38px; }
}

@media (max-width: 1023px) {
  :root {
    --fs-h1: 46px;
    --fs-h2: 34px;
    --section-y: 88px;
    --header-top: 0px;
    --header-main: 64px;
  }
}

@media (max-width: 767px) {
  :root {
    --fs-body: 16px;
    --fs-lead: 17px;
    --fs-h1: 36px;
    --fs-h2: 28px;
    --fs-h3: 20px;
    --gutter: 20px;
    --section-y: 68px;
    --header-main: 60px;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root { --t-fast: 0s; --t: 0s; --t-slow: 0s; }
}


/* ── 10-base.css ── */
/* ─────────────────────────────────────────────────────────────
   10-base — 초기화·글자·컨테이너·공통 유틸리티·스크롤 등장
   ───────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { color-scheme: only light; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-main) + 20px); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: var(--lh);
  color: var(--ink-2);
  background: var(--white);
  word-break: keep-all;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
/* 투명 헤더를 쓰지 않는 페이지는 본문이 고정 헤더 아래에서 시작 */
body.no-hero { padding-top: var(--header-h); }
html.is-locked, html.is-locked body { overflow: hidden; }

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
h1, h2, h3, h4 { color: var(--ink); letter-spacing: var(--ls-title); line-height: var(--lh-tight); font-weight: 700; }
strong, b { font-weight: 700; color: inherit; }
code, kbd, samp, pre { font-family: var(--font-mono); }
address { font-style: normal; }
table { border-collapse: collapse; width: 100%; }
hr { border: 0; border-top: 1px solid var(--line); margin: 0; }
summary { cursor: pointer; list-style: none; }
summary::-webkit-details-marker { display: none; }
::selection { background: rgba(175, 149, 79, .28); }
[hidden] { display: none !important; }

/* 키보드 초점 — 모든 대화형 요소 */
:focus-visible { outline: 2px solid var(--gold-ink); outline-offset: 3px; border-radius: 2px; }
.section--dark :focus-visible, .on-dark :focus-visible { outline-color: var(--gold-lt); }
main:focus { outline: none; }

/* 숫자는 고정폭 숫자로 */
.num, .tnum { font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }

/* 본문 건너뛰기 */
.skip {
  position: fixed; left: 16px; top: -100px; z-index: 1000;
  background: var(--navy-900); color: #fff; padding: 12px 18px; border-radius: var(--r-btn);
  font-weight: 600; font-size: var(--fs-small);
}
.skip:focus { top: 12px; }

.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* 컨테이너·구간 */
.container { width: 100%; max-width: calc(var(--container) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }
.container--narrow { max-width: calc(980px + var(--gutter) * 2); }
.section { padding-block: var(--section-y); position: relative; }
.section--soft { background: var(--bg-soft); }
/* 옅은 회색 바탕 위 금색 글자는 대비 4.5:1 을 넘게 한 단계 짙게 */
.section--soft, .aib, .mega-guide, .pcard-more-in, .cf-consent, .ins-points { --gold-ink: var(--gold-ink-soft); }
.section--dark { background: var(--navy-900); color: var(--on-dark-2); }
.section--dark h2, .section--dark h3, .section--dark h4 { color: var(--on-dark); }
.section--tight { padding-block: calc(var(--section-y) * .62); }

/* 본문 링크(문단 안) */
.prose a, .link { color: var(--ink); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; text-decoration-thickness: 1px; }
.prose a:hover, .link:hover { text-decoration-color: var(--gold); }
.section--dark .link { color: #fff; text-decoration-color: var(--line-dark-2); }

/* 화살표 글자 링크 — "자세히 보기" */
.more {
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 600; font-size: var(--fs-small); color: var(--ink);
  padding-block: 6px; border-bottom: 1px solid currentColor;
  transition: color var(--t-fast) var(--ease);
}
.more svg { transition: transform var(--t-fast) var(--ease); flex: none; }
.more:hover { color: var(--gold-ink); }
.more:hover svg { transform: translateX(3px); }
.more:hover .ic-arrowUpRight { transform: translate(2px, -2px); }
.section--dark .more, .on-dark .more { color: #fff; }
.section--dark .more:hover { color: var(--gold-lt); }

/* 각주 글자 */
.note { font-size: var(--fs-note); line-height: 1.6; color: var(--ink-3); }
.section--dark .note, .on-dark .note { color: var(--on-dark-3); }
sup.fn { font-size: 13px; font-weight: 600; color: var(--gold-ink); margin-left: 3px; vertical-align: super; line-height: 0; font-variant-numeric: tabular-nums; }
.section--dark sup.fn, .on-dark sup.fn { color: var(--gold-lt); }

/* 아이콘 */
.ic { flex: none; }
.ic-flip { transform: scaleX(-1); }

/* 스크롤 등장 — html.js 일 때만(글은 JS 없이도 보임) */
html.js .rv { opacity: 0; transform: translateY(18px); transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease); }
html.js .rv.is-in { opacity: 1; transform: none; }
html.js .rv-d1 { transition-delay: .07s; }
html.js .rv-d2 { transition-delay: .14s; }
html.js .rv-d3 { transition-delay: .21s; }
@media (prefers-reduced-motion: reduce) {
  html.js .rv { opacity: 1; transform: none; transition: none; }
}

/* 인쇄 */
@media print {
  .hd, .mbar, .scta, .sheet, .mnav, .hero-toggle, .hero-media { display: none !important; }
  body { color: #000; padding-top: 0 !important; }
  .section--dark { background: #fff; color: #000; }
}


/* ── 20-layout.css ── */
/* ─────────────────────────────────────────────────────────────
   20-layout — 헤더·메가메뉴·모바일 전체 메뉴·푸터·모바일 하단 단추·전화 시트·고정 상담 카드
   ───────────────────────────────────────────────────────────── */

/* ── 헤더 ── */
.hd {
  position: fixed; inset: 0 0 auto; z-index: 100;
  color: var(--ink); background: var(--white);
  box-shadow: 0 1px 0 var(--line);
  transition: transform var(--t) var(--ease), background-color var(--t) var(--ease), color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.hd::before { /* 투명 상태에서 글자가 영상 위에서 읽히도록 */
  content: ""; position: absolute; inset: 0 0 -60px; pointer-events: none;
  background: linear-gradient(180deg, rgba(8, 14, 28, .62) 0%, rgba(8, 14, 28, .28) 55%, rgba(8, 14, 28, 0) 100%);
  opacity: 0; transition: opacity var(--t) var(--ease);
}
.hd.is-scrolled { transform: translateY(calc(var(--header-top) * -1)); }

.hd-top { position: relative; height: var(--header-top); border-bottom: 1px solid var(--line); font-size: 13px; color: var(--ink-3); }
.hd-top-in { display: flex; align-items: center; justify-content: space-between; height: 100%; }
.hd-top-l { display: flex; align-items: center; gap: 10px; letter-spacing: .02em; }
.hd-top-l [lang="en"] { font-weight: 600; letter-spacing: .14em; font-size: 13px; }
.hd-top-han { color: var(--gold-ink); font-weight: 600; }
/* 홈은 첫 화면 머리(hero-kicker)에 법인명·영문·한자가 있으므로 위 작은 줄에서는 사무소만(같은 장식이 300px 안에 두 번 나오지 않게) */
body.page-home .hd-top-l [lang="en"], body.page-home .hd-top-han, body.page-home .hd-top-sep { display: none; }
.hd-top-sep { width: 1px; height: 11px; background: currentColor; opacity: .35; margin-inline: 6px; }
.hd-top-r { display: flex; gap: 24px; }
.hd-top-r a { transition: color var(--t-fast); }
.hd-top-r a:hover { color: var(--ink); }

.hd-main { position: relative; }
.hd-main-in { display: flex; align-items: center; gap: 32px; height: var(--header-main); }
.hd-logo { position: relative; flex: none; display: block; width: 146px; height: 43px; }
.hd-logo img { position: absolute; inset: 0; width: 100%; height: 100%; transition: opacity var(--t) var(--ease); }
.hd-logo-light { opacity: 0; }

.gnb { flex: 1; display: flex; justify-content: center; height: 100%; }
.gnb-list { display: flex; height: 100%; gap: clamp(20px, 2.6vw, 44px); }
.gnb-item { height: 100%; }
.gnb-link {
  position: relative; display: flex; align-items: center; height: 100%;
  font-size: 17px; font-weight: 600; letter-spacing: -0.01em; white-space: nowrap;
}
.gnb-link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--gold);
  transform: scaleX(0); transform-origin: left; transition: transform var(--t) var(--ease);
}
.gnb-link:hover::after, .gnb-link.is-hot::after, .gnb-link[aria-current]::after { transform: scaleX(1); }

.hd-util { flex: none; display: flex; align-items: center; gap: 22px; }
.hd-tels { display: flex; flex-direction: column; gap: 1px; line-height: 1.35; }
.hd-tels a { display: flex; align-items: baseline; justify-content: flex-end; gap: 8px; }
.hd-tel-l { font-size: 13px; color: var(--ink-3); }
.hd-tel-n { font-size: 16px; font-weight: 700; letter-spacing: 0; }
.hd-tels a:hover .hd-tel-n { color: var(--gold-ink); }
.hd-cta {
  display: inline-flex; align-items: center; height: 46px; padding: 0 22px; border-radius: var(--r-btn);
  background: var(--navy-900); color: #fff; font-weight: 600; font-size: 16px; white-space: nowrap;
  border: 1px solid var(--navy-900);
  transition: background-color var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.hd-cta:hover { background: var(--navy-800); border-color: var(--navy-800); }
.hd-burger { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; margin-right: -10px; }

/* 투명 헤더(첫 화면 위) */
body.has-hero .hd:not(.is-solid) { background: transparent; color: #fff; box-shadow: none; }
body.has-hero .hd:not(.is-solid)::before { opacity: 1; }
body.has-hero .hd:not(.is-solid) .hd-top { border-color: rgba(255, 255, 255, .16); color: rgba(255, 255, 255, .84); }
body.has-hero .hd:not(.is-solid) .hd-top-han { color: var(--gold-lt); }
body.has-hero .hd:not(.is-solid) .hd-top-r a:hover { color: #fff; }
body.has-hero .hd:not(.is-solid) .hd-logo-dark { opacity: 0; }
body.has-hero .hd:not(.is-solid) .hd-logo-light { opacity: 1; }
body.has-hero .hd:not(.is-solid) .hd-tel-l { color: rgba(255, 255, 255, .8); }
body.has-hero .hd:not(.is-solid) .hd-tels a:hover .hd-tel-n { color: var(--gold-lt); }
body.has-hero .hd:not(.is-solid) .hd-cta { background: #fff; color: var(--navy-900); border-color: #fff; }
body.has-hero .hd:not(.is-solid) .hd-cta:hover { background: transparent; color: #fff; }
/* JS 가 없으면 투명 헤더는 첫 화면과 함께 위로 지나간다(흰 본문 위에 흰 글자가 남지 않게) */
html:not(.js) body.has-hero .hd { position: absolute; }

/* ── 메가메뉴: 메뉴에 올리면 전체 열이 한꺼번에 ── */
.mega {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--white); color: var(--ink);
  border-top: 1px solid var(--line);
  box-shadow: 0 30px 50px -30px rgba(11, 18, 32, .35);
  visibility: hidden; opacity: 0; transform: translateY(-8px);
  transition: opacity var(--t) var(--ease), transform var(--t) var(--ease), visibility 0s linear var(--t);
}
.hd.is-mega .mega { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
html:not(.js) .hd:hover .mega, html:not(.js) .hd:focus-within .mega { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
html:not(.js) body.has-hero .hd:hover, html:not(.js) body.has-hero .hd:focus-within { background: #fff; color: var(--ink); }
.mega-in { display: grid; grid-template-columns: 1fr 1.55fr .9fr 1.05fr 1.3fr 1.2fr; gap: 0; padding-block: 34px 42px; }
.mega-col { padding-inline: 22px; border-left: 1px solid var(--line); min-width: 0; }
.mega-col:first-child { border-left: 0; padding-left: 0; }
.mega-col:last-child { padding-right: 0; }
.mega-h { padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid var(--ink); }
.mega-h a { font-size: 16px; font-weight: 700; color: var(--ink); }
.mega-links { display: grid; gap: 4px; }
.mega-links--after { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.mega-links a { display: inline-flex; align-items: center; gap: 8px; padding: 4px 0; font-size: 15px; color: var(--ink-2); line-height: 1.5; }
.mega-links a:hover, .mega-fields a:hover .mega-field-name { color: var(--gold-ink); }
.mega-fields { display: grid; gap: 12px; }
.mega-fields a { display: grid; gap: 2px; }
.mega-field-name { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; color: var(--ink); line-height: 1.45; }
.mega-field-sub { padding-left: 16px; font-size: 13px; color: var(--ink-3); line-height: 1.5; }
.mega-guide { display: grid; gap: 6px; margin-top: 16px; padding: 14px 16px; background: var(--bg-soft); border-radius: var(--r-card-sm); }
.mega-guide-k { font-size: 13px; font-weight: 600; color: var(--gold-ink); }
.mega-guide-q { font-size: 14px; font-weight: 600; color: var(--ink); line-height: 1.55; }
.mega-guide-more { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-3); }
.mega-guide:hover .mega-guide-q { text-decoration: underline; text-underline-offset: 3px; }
.mega-phones { display: grid; gap: 10px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.mega-phones a { display: grid; }
.mega-phones span { font-size: 13px; color: var(--ink-3); }
.mega-phones strong { font-size: 19px; color: var(--ink); letter-spacing: 0; }
.mega-phones a:hover strong { color: var(--gold-ink); }

/* ── 모바일 전체 메뉴 ── */
.mnav {
  position: fixed; inset: 0; z-index: 200; display: none; flex-direction: column;
  background: var(--white); color: var(--ink); overflow-y: auto; overscroll-behavior: contain;
}
.mnav.is-open, .mnav:target { display: flex; }
.mnav-head { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; height: var(--header-main); padding-inline: var(--gutter); background: #fff; border-bottom: 1px solid var(--line); }
.mnav-logo img { width: 128px; height: auto; }
.mnav-close { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-right: -10px; }
.mnav-body { padding: 8px var(--gutter) 0; }
.mnav-group { border-bottom: 1px solid var(--line); }
.mnav-group summary { display: flex; align-items: center; justify-content: space-between; min-height: 60px; font-size: 19px; font-weight: 700; color: var(--ink); }
.mnav-group summary .ic { transition: transform var(--t) var(--ease); color: var(--ink-3); }
.mnav-group[open] summary .ic { transform: rotate(180deg); }
.mnav-group ul { display: grid; gap: 2px; padding: 0 0 18px; }
.mnav-group a { display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: 16px; color: var(--ink-2); }
.mnav-foot { display: grid; gap: 10px; padding: 24px var(--gutter) 40px; margin-top: auto; background: var(--bg-soft); }
.mnav-tel { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.mnav-tel span { font-size: 15px; color: var(--ink-3); }
.mnav-tel strong { font-size: 21px; color: var(--ink); letter-spacing: 0; }
.mnav-cta { margin-top: 10px; width: 100%; }
.mnav-links { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 8px; font-size: 14px; color: var(--ink-3); }

/* ── 푸터 ── */
.ft { background: var(--navy-950); color: rgba(255, 255, 255, .8); padding: 80px 0 40px; font-size: 15px; }
.ft a { transition: color var(--t-fast); }
.ft a:hover { color: #fff; }
.ft-top { display: grid; grid-template-columns: minmax(280px, 4fr) 8fr; gap: 56px; padding-bottom: 56px; border-bottom: 1px solid rgba(255, 255, 255, .12); }
.ft-logo img { width: 164px; height: auto; }
.ft-slogan { margin-top: 22px; color: #fff; font-size: 17px; font-weight: 600; line-height: 1.6; letter-spacing: -0.01em; }
.ft-tels { display: grid; gap: 10px; margin-top: 28px; }
.ft-tels a { display: grid; }
.ft-tels span { font-size: 13px; color: rgba(255, 255, 255, .78); }
.ft-tels strong { font-size: 22px; color: #fff; letter-spacing: 0; }
.ft-nav { display: grid; grid-template-columns: repeat(6, 1fr); gap: 24px; }
.ft-nav-h { margin-bottom: 14px; }
.ft-nav-h a { color: #fff; font-weight: 700; font-size: 15px; }
.ft-nav ul { display: grid; gap: 8px; }
.ft-nav li a { font-size: 14px; color: rgba(255, 255, 255, .78); line-height: 1.5; display: inline-block; }
.ft-offices { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; padding-block: 36px; border-bottom: 1px solid rgba(255, 255, 255, .12); }
.ft-office-name { color: #fff; font-weight: 700; font-size: 15px; margin-bottom: 6px; }
.ft-office-addr, .ft-office-tel { font-size: 14px; line-height: 1.65; color: rgba(255, 255, 255, .78); }
.ft-bottom { display: flex; justify-content: space-between; align-items: flex-start; gap: 40px; padding-top: 28px; }
.ft-legal { display: grid; gap: 6px; font-size: 14px; color: rgba(255, 255, 255, .8); }
.ft-sep { display: inline-block; width: 1px; height: 11px; background: rgba(255, 255, 255, .3); margin-inline: 12px; vertical-align: -1px; }
.ft-disclaimer { font-size: 13px; color: rgba(255, 255, 255, .78); }
.ft-copy { font-size: 13px; color: rgba(255, 255, 255, .78); }
.ft-links { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px 20px; font-size: 14px; max-width: 520px; }
.ft-links strong { color: #fff; }

/* ── 모바일 하단 3단추 ── */
.mbar { display: none; }
.sheet { display: none; }

/* ── 데스크톱 고정 상담 장치 ──
   컨테이너 오른쪽 여백에 카드(236px + 24px)가 들어가는 넓은 화면(1800px 이상)에서만 카드를 펼쳐 두고,
   그보다 좁은 화면(가장 흔한 1440 노트북 포함)에서는 오른쪽 아래 작은 탭(높이 44px)으로 접어 본문을 가리지 않는다.
   탭에 마우스를 올리거나 초점이 가거나 누르면 위로 펼친다. 상담 구간·푸터 등 data-scta-hide 구간에서는 숨긴다. */
.scta {
  position: fixed; right: 24px; bottom: 24px; z-index: 90;
  opacity: 0; visibility: hidden; transform: translateY(14px);
  transition: opacity var(--t) var(--ease), transform var(--t) var(--ease), visibility 0s linear var(--t);
}
.scta.is-on { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.scta-tab {
  display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 12px 0 16px;
  border-radius: var(--r-btn); background: var(--navy-900); color: #fff; font-size: 15px; font-weight: 600;
  box-shadow: var(--shadow-float); transition: background-color var(--t-fast);
}
.scta-tab:hover, .scta.is-open .scta-tab { background: var(--navy-800); }
.scta-tab-ic { transform: rotate(180deg); transition: transform var(--t) var(--ease); }
.scta.is-open .scta-tab-ic, .scta:hover .scta-tab-ic { transform: none; }
.scta-panel {
  position: absolute; right: 0; bottom: calc(100% + 8px); width: 236px;
  padding: 14px 16px 14px; background: var(--white); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-float);
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease), visibility 0s linear var(--t-fast);
}
.scta-panel::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 10px; } /* 탭과 카드 사이를 지날 때 접히지 않게 */
.scta.is-open .scta-panel, .scta:hover .scta-panel, .scta:focus-within .scta-panel { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
@media (min-width: 1800px) {
  .scta-tab { display: none; }
  .scta-panel { position: relative; bottom: auto; opacity: 1; visibility: inherit; transform: none; transition: none; }
}
.scta-h { font-size: 13px; font-weight: 600; color: var(--gold-ink); letter-spacing: .02em; margin-bottom: 2px; }
.scta-tel { display: grid; padding: 6px 0; border-bottom: 1px solid var(--line); }
.scta-tel span { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--ink-3); }
.scta-tel strong { font-size: 18px; letter-spacing: 0; line-height: 1.3; }
.scta-tel:hover strong { color: var(--gold-ink); }
.scta-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px; height: 40px; margin-top: 10px;
  border-radius: var(--r-btn); background: var(--navy-900); color: #fff; font-weight: 600; font-size: 15px;
}
.scta-btn:hover { background: var(--navy-800); }
.scta-x { position: absolute; top: 10px; right: 10px; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; color: var(--ink-3); border-radius: var(--r-btn); }
.scta-x:hover { background: var(--bg-soft); color: var(--ink); }

/* ── 반응형 ── */
@media (max-width: 1279px) {
  .hd-tels { display: none; }
  .mega-in { grid-template-columns: repeat(3, 1fr); row-gap: 28px; }
  .mega-col:nth-child(4) { border-left: 0; padding-left: 0; }
  .ft-nav { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 1023px) {
  .hd-top, .gnb, .mega { display: none; }
  .hd.is-scrolled { transform: none; }
  .hd-main-in { justify-content: space-between; gap: 12px; }
  .hd-logo { width: 122px; height: 36px; }
  .hd-cta { height: 40px; padding: 0 14px; font-size: 15px; }
  .hd-burger { display: inline-flex; }
  .hd-util { gap: 6px; }

  .scta { display: none; }

  body { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }
  .mbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 95;
    display: grid; grid-template-columns: 1fr 1.25fr 1fr;
    height: calc(64px + env(safe-area-inset-bottom, 0px)); padding-bottom: env(safe-area-inset-bottom, 0px);
    background: var(--white); border-top: 1px solid var(--line); box-shadow: 0 -8px 24px -16px rgba(11, 18, 32, .25);
  }
  .mbar-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: 13px; font-weight: 600; color: var(--ink); }
  .mbar-btn + .mbar-btn { border-left: 1px solid var(--line); }
  .mbar-btn--main { background: var(--navy-900); color: #fff; border-left: 0 !important; }
  .mbar-btn--main + .mbar-btn { border-left: 0; }

  .sheet { position: fixed; inset: 0; z-index: 300; }
  .sheet.is-open, .sheet:target { display: block; }
  .sheet-backdrop { position: absolute; inset: 0; background: rgba(11, 18, 32, .55); }
  .sheet-panel {
    position: absolute; left: 0; right: 0; bottom: 0; padding: 20px var(--gutter) calc(28px + env(safe-area-inset-bottom, 0px));
    background: #fff; border-radius: 12px 12px 0 0; animation: sheetUp var(--t) var(--ease);
  }
  .sheet-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
  .sheet-title { font-size: 18px; font-weight: 700; color: var(--ink); }
  .sheet-x { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-right: -10px; color: var(--ink-3); }
  .sheet-tel { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--line); }
  .sheet-tel-l { display: grid; row-gap: 2px; font-size: 16px; font-weight: 600; color: var(--ink); }
  .sheet-tel-l small { font-size: 13px; font-weight: 400; color: var(--ink-3); }
  .sheet-tel strong { font-size: 22px; color: var(--navy-900); letter-spacing: 0; white-space: nowrap; }
  .sheet-note { margin-top: 14px; font-size: 14px; color: var(--ink-3); }

  .ft { padding: 56px 0 32px; }
  .ft-top { grid-template-columns: 1fr; gap: 40px; padding-bottom: 40px; }
  .ft-offices { grid-template-columns: repeat(2, 1fr); }
  .ft-bottom { flex-direction: column; gap: 20px; }
  .ft-links { justify-content: flex-start; }
}

@media (max-width: 767px) {
  .ft-nav { grid-template-columns: repeat(2, 1fr); gap: 28px 20px; }
  .ft-offices { grid-template-columns: 1fr; gap: 20px; }
  .ft-sep { display: block; width: 0; height: 0; margin: 0; }
}

@keyframes sheetUp { from { transform: translateY(24px); opacity: .6; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .sheet-panel { animation: none; } }


/* ── 30-components.css ── */
/* ─────────────────────────────────────────────────────────────
   30-components — site/ui.mjs 공통 부품의 모양
   단추·구간 머리·분야 점·숫자 띠·각주·업무 카드·구성원 카드·거르기·가이드·영상·FAQ·상담 4단계·사무소·
   빵부스러기·하위 페이지 머리·사업지구(막대·목록·지도)·하자 대표 단지·일하는 방식·약속·진단 장비·AI 띠·상담 띠
   ───────────────────────────────────────────────────────────── */

/* ── 단추 (각진 4px, 알약 금지) ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 52px; padding: 0 24px; border-radius: var(--r-btn); border: 1px solid transparent;
  font-size: 16px; font-weight: 600; line-height: 1; white-space: nowrap; text-decoration: none;
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.btn .ic { transition: transform var(--t-fast) var(--ease); }
.btn:hover .ic-arrow { transform: translateX(3px); }
.btn:hover .ic-arrow.ic-flip { transform: scaleX(-1) translateX(3px); }
.btn--primary { background: var(--navy-900); border-color: var(--navy-900); color: #fff; }
.btn--primary:hover { background: var(--navy-800); border-color: var(--navy-800); }
.btn--secondary { background: #fff; border-color: var(--line-2); color: var(--ink); }
.btn--secondary:hover { border-color: var(--ink); }
.btn--light { background: #fff; border-color: #fff; color: var(--navy-900); }
.btn--light:hover { background: rgba(255, 255, 255, .88); }
.btn--ghost-light { background: transparent; border-color: rgba(255, 255, 255, .42); color: #fff; }
.btn--ghost-light:hover { border-color: #fff; }
.btn--text { height: auto; padding: 0; border: 0; color: var(--ink); }
.btn--sm { height: 42px; padding: 0 18px; font-size: 15px; }
.btn--lg { height: 58px; padding: 0 30px; font-size: 17px; }

/* ── 분야 점 ── */
.fdot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--ink-3); }
.fdot--comp { background: var(--f-comp); }
.fdot--build { background: var(--f-build); }
.section--dark .fdot--comp, .on-dark .fdot--comp, .hero .fdot--comp, .phero .fdot--comp, .cta-band .fdot--comp { background: var(--f-comp-lt); }
.section--dark .fdot--build, .on-dark .fdot--build, .hero .fdot--build, .phero .fdot--build, .cta-band .fdot--build { background: var(--f-build-lt); }

/* ── 구간 머리: 작은 영문 번호 머리 + 국문 h2(주인공) ── */
.sh { margin-bottom: 56px; }
.sh-eyebrow { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; font-size: 13px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; line-height: 1.4; }
.sh-no { color: var(--gold-ink); letter-spacing: .06em; font-variant-numeric: tabular-nums; }
.sh-rule { width: 36px; height: 1px; background: var(--line-2); }
.sh-en { color: var(--ink-3); }
.sh-title { font-size: var(--fs-h2); font-weight: 700; line-height: 1.28; letter-spacing: -0.032em; color: var(--ink); }
.sh-desc { font-size: var(--fs-body); color: var(--ink-3); line-height: 1.8; }
.sh-desc + .sh-desc { margin-top: 10px; }
.sh-desc strong { color: var(--ink); font-weight: 700; white-space: nowrap; }
.sh-more { margin-top: 22px; }
.sh--split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 540px); gap: 48px; align-items: end; }
.sh--split .sh-side { padding-bottom: 4px; }
.sh--left .sh-side { margin-top: 22px; max-width: 760px; }
.sh--center { text-align: center; }
.sh--center .sh-eyebrow { justify-content: center; }
.sh--center .sh-side { margin: 20px auto 0; max-width: 640px; }
.sh--dark .sh-no { color: var(--gold-lt); }
.sh--dark .sh-rule { background: var(--line-dark-2); }
.sh--dark .sh-en { color: var(--on-dark-3); }
.sh--dark .sh-title { color: #fff; }
.sh--dark .sh-desc { color: var(--on-dark-2); }
.sh--dark .sh-desc strong { color: #fff; }

/* ── 숫자 띠 ── */
.stats { display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); }
.stats--n2 { --cols: 2; } .stats--n3 { --cols: 3; } .stats--n4 { --cols: 4; } .stats--n5 { --cols: 5; } .stats--n6 { --cols: 6; }
.stat { display: flex; flex-direction: column; min-width: 0; padding: 2px 28px; border-left: 1px solid var(--line); }
.stat:first-child { border-left: 0; padding-left: 0; }
.stat-value { order: -1; display: flex; flex-wrap: wrap; align-items: baseline; margin-bottom: 12px; color: var(--ink); }
.stat-num { font-size: 50px; font-weight: 700; letter-spacing: -0.035em; line-height: 1; }
.stat-unit { margin-left: 5px; font-size: 18px; font-weight: 700; color: var(--gold-ink); letter-spacing: -0.01em; white-space: nowrap; }
.stat-label { font-size: 16px; font-weight: 600; color: var(--ink); line-height: 1.5; }
.stat-note { margin-top: 6px; font-size: 13px; line-height: 1.6; color: var(--ink-3); }
.stats--stack { grid-template-columns: 1fr; }
.stats--stack .stat { padding: 22px 0; border-left: 0; border-top: 1px solid var(--line); }
.stats--stack .stat:first-child { padding-top: 22px; }
.section--dark .stat { border-color: var(--line-dark); }
.section--dark .stat-value, .section--dark .stat-label { color: #fff; }
.section--dark .stat-unit { color: var(--gold-lt); }
.section--dark .stat-note { color: var(--on-dark-3); }

/* ── 각주 ── */
.fnotes { display: grid; gap: 3px; font-size: 13px; line-height: 1.65; color: var(--ink-3); }
.fnotes li { counter-increment: fn; position: relative; padding-left: 22px; }
.fnotes li::before { content: counter(fn) ")"; position: absolute; left: 0; color: var(--gold-ink); font-weight: 700; font-variant-numeric: tabular-nums; }
.section--dark .fnotes { color: var(--on-dark-3); }
.section--dark .fnotes li::before { color: var(--gold-lt); }

/* ── 업무분야 카드 ── */
.pa {
  position: relative; display: flex; flex-direction: column; flex: 1; min-width: 0;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden;
  transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.pa:hover { border-color: var(--line-2); box-shadow: var(--shadow-card); }
.pa-fig { aspect-ratio: 16 / 11; overflow: hidden; background: var(--bg-soft-2); }
.pa-fig img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.pa:hover .pa-fig img { transform: scale(1.04); }
.pa-body { display: flex; flex-direction: column; flex: 1; padding: 26px 26px 22px; }
.pa-kicker { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-size: 13px; font-weight: 600; color: var(--ink-3); letter-spacing: .02em; }
.pa-no { color: var(--gold-ink); margin-right: 4px; font-weight: 700; }
.pa-name { font-size: 23px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.35; }
.pa-link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.pa-ask { margin-top: 14px; font-size: 15px; color: var(--ink-3); line-height: 1.6; }
.pa-ans { margin-top: 4px; font-size: 16px; font-weight: 600; color: var(--ink); line-height: 1.55; }
.pa-items { display: grid; gap: 8px; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); }
.pa-items li { display: flex; gap: 9px; font-size: 15px; color: var(--ink-2); line-height: 1.5; }
.pa-items .ic { margin-top: 3px; color: var(--gold); }
.pa-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 24px; }
.pa-tel { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 7px; font-size: 16px; font-weight: 700; color: var(--ink); letter-spacing: 0; }
.pa-tel .ic { color: var(--ink-3); }
.pa-tel:hover { color: var(--gold-ink); }
.pa-more { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--ink-3); transition: color var(--t-fast); }
.pa-more .ic { transition: transform var(--t-fast) var(--ease); }
.pa:hover .pa-more { color: var(--ink); }
.pa:hover .pa-more .ic { transform: translateX(3px); }
.pa:focus-within { border-color: var(--line-2); }

/* ── 구성원 카드 ── */
.pcard { min-width: 0; }
.pcard-link { display: block; height: 100%; }
.pcard-photo { aspect-ratio: 720 / 832; overflow: hidden; border-radius: var(--r-card-sm); background: #E9EBEE; }
.pcard-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.pcard-link:hover .pcard-photo img { transform: scale(1.035); }
.pcard-body { padding: 16px 2px 0; }
.pcard-name { display: flex; align-items: baseline; gap: 8px; font-size: 20px; font-weight: 700; letter-spacing: -0.02em; }
.pcard-role { font-size: 14px; font-weight: 500; color: var(--ink-3); letter-spacing: 0; }
.pcard-focus { margin-top: 4px; font-size: 15px; color: var(--ink-2); line-height: 1.55; }
.pcard-reg { margin-top: 6px; font-size: 13px; font-weight: 600; color: var(--gold-ink); line-height: 1.5; }
.pcard-office { margin-top: 2px; font-size: 13px; color: var(--ink-3); line-height: 1.5; }
.pcard-link:hover .pcard-name { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
.pcard.is-hidden { display: none; }

/* ── 거르기 단추 ── */
.fbar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 36px; }
.fbar-btn {
  display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 18px;
  border: 1px solid var(--line-2); border-radius: var(--r-btn); background: #fff;
  font-size: 15px; font-weight: 600; color: var(--ink-2);
  transition: background-color var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.fbar-btn:hover { border-color: var(--ink); color: var(--ink); }
.fbar-btn[aria-pressed="true"] { background: var(--navy-900); border-color: var(--navy-900); color: #fff; }
.fbar-n { font-size: 13px; font-weight: 600; color: var(--ink-3); }
.fbar-btn[aria-pressed="true"] .fbar-n { color: var(--gold-lt); }
.fbar-btn[aria-pressed="true"] .fdot--comp { background: var(--f-comp-lt); }
html:not(.js) .fbar { display: none; }
.filter-empty { padding: 40px 0; text-align: center; color: var(--ink-3); }

/* ── 법률 정보: 대표 가이드 ── */
.ins-feature {
  display: flex; flex-direction: column;
  padding: 40px 44px 34px; background: var(--white);
  border: 1px solid var(--line); border-top: 3px solid var(--navy-900); border-radius: var(--r-card);
}
.ins-feature-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ins-field { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--ink-3); letter-spacing: .01em; }
.ins-badge { font-size: 13px; font-weight: 700; color: var(--gold-ink); }
.ins-feature-q { margin-top: 18px; font-size: 28px; line-height: 1.42; letter-spacing: -0.032em; }
.ins-feature-q a:hover { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }
.ins-feature-a { margin-top: 16px; font-size: 17px; color: var(--ink-2); line-height: 1.8; }
.ins-points { display: grid; gap: 10px; margin-top: 24px; padding: 22px 24px; background: var(--bg-soft); border-radius: var(--r-card-sm); }
.ins-points li { display: flex; gap: 10px; font-size: 15.5px; color: var(--ink); line-height: 1.6; }
.ins-points .ic { margin-top: 2px; color: var(--gold-ink); }
.ins-laws { display: flex; flex-wrap: wrap; gap: 4px 0; margin-top: 18px; font-size: 13px; color: var(--ink-3); line-height: 1.6; }
.ins-laws-h { font-weight: 700; color: var(--ink); margin-right: 12px; }
.ins-laws span:not(.ins-laws-h):not(:last-child)::after { content: "·"; margin: 0 8px; }
.ins-feature-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: auto; padding-top: 24px; }
.ins-feature-foot::before { content: ""; flex-basis: 100%; height: 1px; background: var(--line); margin: 4px 0 4px; order: -1; }
.ins-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 14px; color: var(--ink-3); }
.ins-meta a { color: var(--ink); font-weight: 600; }
.ins-meta a:hover { text-decoration: underline; text-underline-offset: 3px; }
/* 질문형 한 줄 */
.ins-row + .ins-row { border-top: 1px solid var(--line); }
.ins-row-link { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "field arrow" "q arrow"; gap: 4px 20px; align-items: center; padding: 18px 2px; }
.ins-row .ins-field { grid-area: field; }
.ins-q { grid-area: q; font-size: 17px; font-weight: 600; line-height: 1.55; letter-spacing: -0.02em; color: var(--ink); transition: color var(--t-fast); }
.ins-arrow { grid-area: arrow; color: var(--ink-3); transition: transform var(--t-fast) var(--ease), color var(--t-fast); }
.ins-row-link:hover .ins-q { color: var(--gold-ink); }
.ins-row-link:hover .ins-arrow { transform: translateX(3px); color: var(--ink); }

/* ── 화담TV 카드 ── */
.vcard-link { display: block; }
.vcard-thumb { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--r-card-sm); background: var(--bg-soft-2); }
.vcard-thumb img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.75); transition: transform .7s var(--ease), filter var(--t) var(--ease); }
/* 유튜브 썸네일은 채도만 살짝 낮춘다(명세: saturate(.75), 흑백 금지 — /insights/ 대표 영상과 같은 값). 마우스를 올리면 .9 */
.vcard-link:hover .vcard-thumb img, .vcard-link:focus-visible .vcard-thumb img { transform: scale(1.04); filter: saturate(.9); }
.vcard-play { z-index: 1; position: absolute; left: 14px; bottom: 14px; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: rgba(11, 18, 32, .76); color: #fff; }
.vcard-play .ic { margin-left: 2px; fill: currentColor; }
.vcard-body { padding-top: 14px; }
.vcard-cat { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: var(--ink-3); }
.vcard-date { margin-left: auto; font-weight: 400; }
.vcard-title { margin-top: 6px; font-size: 16px; font-weight: 600; line-height: 1.55; letter-spacing: -0.02em; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.vcard-link:hover .vcard-title { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
/* 홈 화담TV: 소개 영상 큰 카드(실사 포스터) + 한 줄 목록 */
.vfeat-link { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); height: 100%; background: var(--white); border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; transition: border-color var(--t-fast); }
.vfeat-link:hover { border-color: var(--line-2); }
.vfeat-fig { position: relative; min-height: 100%; aspect-ratio: 16 / 10; overflow: hidden; background: var(--bg-soft-2); }
.vfeat-fig img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.vfeat-link:hover .vfeat-fig img { transform: scale(1.03); }
.vfeat-play { position: absolute; left: 20px; bottom: 20px; display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; background: rgba(11, 18, 32, .78); color: #fff; }
.vfeat-play .ic { margin-left: 3px; fill: currentColor; }
.vfeat-body { display: flex; flex-direction: column; padding: 28px 28px 24px; }
.vfeat-k { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 13px; font-weight: 600; color: var(--ink-3); }
.vfeat-date { margin-left: auto; font-weight: 400; }
.vfeat-title { margin-top: 12px; font-size: 21px; line-height: 1.45; letter-spacing: -0.03em; }
.vfeat-sum { margin-top: 10px; font-size: 15px; line-height: 1.7; color: var(--ink-2); }
.vfeat-go { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 20px; font-size: 14px; font-weight: 600; color: var(--ink); }
.vfeat-link:hover .vfeat-title { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
.vrows { border-top: 1px solid var(--ink); }
.vrow + .vrow { border-top: 1px solid var(--line); }
.vrow-link { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "meta arrow" "title arrow"; gap: 4px 16px; align-items: center; padding: 16px 2px; }
.vrow-meta { grid-area: meta; display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: var(--ink-3); }
.vrow-date { margin-left: 6px; font-weight: 400; }
.vrow-title { grid-area: title; font-size: 16px; font-weight: 600; line-height: 1.55; letter-spacing: -0.02em; color: var(--ink); transition: color var(--t-fast); }
.vrow-arrow { grid-area: arrow; color: var(--ink-3); transition: transform var(--t-fast) var(--ease), color var(--t-fast); }
.vrow-link:hover .vrow-title { color: var(--gold-ink); }
.vrow-link:hover .vrow-arrow { color: var(--ink); transform: translate(2px, -2px); }

/* ── 자주 묻는 질문 ── */
.faq-search { margin-bottom: 26px; }
.faq-search-label { display: block; margin-bottom: 10px; font-size: 15px; font-weight: 700; color: var(--ink); }
.faq-search-box { position: relative; }
.faq-search-box .ic { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); color: var(--ink-3); pointer-events: none; }
.faq-search-box input {
  width: 100%; height: 58px; padding: 0 20px 0 52px;
  border: 1px solid var(--line-input); border-radius: var(--r-btn); background: #fff; font-size: 17px; color: var(--ink);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.faq-search-box input::placeholder { color: #6B7280; }
.faq-search-box input:focus { outline: none; border-color: var(--navy-900); box-shadow: 0 0 0 3px rgba(14, 26, 51, .12); }
.faq-search-hint { margin-top: 8px; font-size: 13px; color: var(--ink-3); }
.faq-tabs { display: flex; flex-wrap: wrap; border-bottom: 1px solid var(--line); }
.faq-tab {
  display: inline-flex; align-items: center; gap: 7px; height: 50px; padding: 0 16px; margin-bottom: -1px;
  border-bottom: 2px solid transparent; font-size: 15px; font-weight: 600; color: var(--ink-3);
  transition: color var(--t-fast), border-color var(--t-fast);
}
.faq-tab:first-child { padding-left: 4px; }
.faq-tab .num { font-size: 13px; font-weight: 500; color: var(--ink-3); }
.faq-tab:hover { color: var(--ink); }
.faq-tab[aria-pressed="true"] { color: var(--ink); border-color: var(--navy-900); }
html:not(.js) .faq-search, html:not(.js) .faq-tabs { display: none; }
.faq-items { border-top: 1px solid var(--ink); }
.faq-tabs + .faq-items { border-top: 0; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 22px 4px; }
.faq-item summary:hover .faq-q-text { color: var(--gold-ink); }
.faq-q { display: flex; align-items: baseline; gap: 14px; font-size: 18px; font-weight: 600; line-height: 1.55; letter-spacing: -0.02em; color: var(--ink); }
.faq-q-text { transition: color var(--t-fast); }
.faq-field { flex: none; min-width: 66px; font-size: 13px; font-weight: 600; color: var(--gold-ink); letter-spacing: 0; }
.faq-ic { flex: none; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; margin-top: -2px; color: var(--ink-3); transition: transform var(--t) var(--ease), color var(--t-fast); }
.faq-item[open] .faq-ic { transform: rotate(45deg); color: var(--ink); }
.faq-a { padding: 0 52px 26px 84px; font-size: 16px; color: var(--ink-2); line-height: 1.85; }
.faq-item.is-filtered { display: none; }
.faq-empty { padding: 36px 0; text-align: center; color: var(--ink-3); }

/* ── 상담 4단계 ── */
.cf { position: relative; }
.cf-prog { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 30px; }
.cf-prog li { display: flex; align-items: center; gap: 8px; padding-top: 12px; border-top: 2px solid var(--line); font-size: 14px; font-weight: 600; color: var(--ink-3); transition: color var(--t), border-color var(--t); }
.cf-prog li .num { font-size: 13px; }
.cf-prog li.is-current, .cf-prog li.is-done { border-color: var(--navy-900); color: var(--ink); }
.cf-prog li.is-done .num { color: var(--gold-ink); }
html:not(.js) .cf-prog { display: none; }
.cf-step { min-width: 0; margin: 0 0 30px; padding: 0; border: 0; }
html.js .cf-step:not(.is-current) { display: none; }
.cf-legend { display: flex; align-items: center; gap: 12px; padding: 0; font-size: 22px; font-weight: 700; color: var(--ink); letter-spacing: -0.025em; }
.cf-legend-no { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: var(--navy-900); color: #fff; font-size: 14px; }
.cf-hint { margin-top: 8px; font-size: 14px; color: var(--ink-3); }
.cf-opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 18px; }
.cf-opts.cf-branch { display: none; }
.cf-opts.cf-branch.is-on, html:not(.js) .cf-opts.cf-branch[data-for-field="unsure"] { display: grid; }
.cf-opt { position: relative; display: block; cursor: pointer; }
.cf-opt input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.cf-opt-box {
  position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; min-height: 58px; height: 100%;
  padding: 12px 40px 12px 16px; border: 1px solid var(--line-input); border-radius: var(--r-btn); background: #fff;
  transition: border-color var(--t-fast), box-shadow var(--t-fast), background-color var(--t-fast);
}
.cf-opt:hover .cf-opt-box { border-color: var(--ink-3); }
.cf-opt-l { font-size: 16px; font-weight: 600; color: var(--ink); line-height: 1.4; }
.cf-opt-d { width: 100%; font-size: 13px; color: var(--ink-3); line-height: 1.5; }
.cf-opt-box:has(.fdot) .cf-opt-d { padding-left: 16px; }
.cf-opt-box::after { content: ""; position: absolute; right: 14px; top: 50%; width: 18px; height: 18px; margin-top: -9px; border: 1px solid var(--line-input); border-radius: 50%; background: #fff; }
.cf-opt input[type="checkbox"] + .cf-opt-box::after { border-radius: 3px; }
.cf-opt input:checked + .cf-opt-box { border-color: var(--navy-900); box-shadow: inset 0 0 0 1px var(--navy-900); background: #F6F7FA; }
.cf-opt input:checked + .cf-opt-box::after { border-color: var(--navy-900); background: var(--navy-900) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 12px no-repeat; }
.cf-opt input:focus-visible + .cf-opt-box { outline: 2px solid var(--gold-ink); outline-offset: 2px; }
.cf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 18px; }
.cf-field { display: grid; gap: 6px; }
.cf-field--wide { grid-column: 1 / -1; margin-top: 14px; }
.cf-grid .cf-field--wide { margin-top: 0; }
.cf-label { font-size: 14px; font-weight: 600; color: var(--ink); }
.cf-opt-mark { font-weight: 400; color: var(--ink-3); }
.cf input[type="text"], .cf input[type="tel"], .cf select, .cf textarea {
  width: 100%; height: 50px; padding: 0 14px; border: 1px solid var(--line-input); border-radius: var(--r-btn);
  background: #fff; font-size: 16px; color: var(--ink); transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.cf textarea { height: auto; padding: 12px 14px; line-height: 1.6; resize: vertical; }
.cf input::placeholder, .cf textarea::placeholder { color: #6B7280; }
.cf input:focus, .cf select:focus, .cf textarea:focus { outline: none; border-color: var(--navy-900); box-shadow: 0 0 0 3px rgba(14, 26, 51, .12); }
.cf .is-invalid { border-color: #B4441E !important; }
.cf-consent { margin-top: 18px; padding: 16px 18px; background: var(--bg-soft); border-radius: var(--r-card-sm); }
.cf-check { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; font-weight: 600; color: var(--ink); cursor: pointer; }
.cf-check input { flex: none; width: 20px; height: 20px; margin: 3px 0 0; accent-color: var(--navy-900); }
.cf-req { font-weight: 500; color: var(--ink-3); }
.cf-consent-list { display: grid; gap: 2px; margin-top: 8px; padding-left: 30px; font-size: 13px; line-height: 1.65; color: var(--ink-3); }
.cf-consent-list li { position: relative; }
.cf-consent-list li::before { content: ""; position: absolute; left: -10px; top: .78em; width: 3px; height: 3px; border-radius: 50%; background: currentColor; }
.cf-error { margin-bottom: 16px; padding: 12px 14px; border-left: 3px solid #B4441E; background: #FCF2EE; font-size: 14px; color: #8A3416; }
.cf-foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; padding-top: 22px; border-top: 1px solid var(--line); }
.cf-call { font-size: 14px; color: var(--ink-3); }
.cf-call-one { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.cf-call-one a { font-size: 20px; font-weight: 700; color: var(--ink); letter-spacing: 0; }
.cf-call a:hover { color: var(--gold-ink); }
.cf-call-l { font-size: 13px; }
.cf-call-both { display: grid; gap: 2px; font-size: 13px; line-height: 1.55; }
.cf-call-pair { display: flex; flex-wrap: wrap; gap: 2px 16px; font-size: 14px; color: var(--ink-2); }
.cf-call-pair a { font-weight: 700; color: var(--ink); letter-spacing: 0; }
.cf-btns { display: flex; gap: 8px; margin-left: auto; }
.cf-note { margin-top: 12px; font-size: 14px; color: var(--ink-2); }
.cf-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.cf.is-sent > :not(.cf-done) { display: none; }
.cf-done { margin-top: 18px; padding: 18px 20px; border: 1px solid var(--line); border-left: 3px solid var(--gold); border-radius: var(--r-card-sm); background: var(--bg-soft); font-size: 15px; color: var(--ink-2); line-height: 1.7; }
.cf-done-h { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-weight: 700; color: var(--ink); }
.cf-done-h .ic { color: var(--gold-ink); }
.cf-done a { font-weight: 700; color: var(--ink); }

/* ── 사무소: 본사(사진) 왼쪽 크게 + 분사무소 3곳 오른쪽 줄 ── */
.offices { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 16px 20px; }
.office { display: flex; flex-direction: column; min-width: 0; background: var(--white); border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; }
.office--hq { grid-row: 1 / span 3; }
/* 본사 사진(film/seocho-street): 아래쪽(시계탑·유리 빌딩·거리)만 보이게 — 위쪽 건물 간판은 잘라 낸다 */
.office-photo { aspect-ratio: 16 / 5.4; overflow: hidden; background: var(--bg-soft-2); }
.office-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 30% 100%; }
.office-address { display: contents; }
.office-body { display: flex; flex-direction: column; flex: 1; gap: 8px; padding: 26px 28px 24px; }
.office-name { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; }
.office-addr { font-size: 15px; color: var(--ink-2); line-height: 1.65; }
.office-addr2 { display: block; font-size: 13px; color: var(--ink-3); }
.office-tel { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 17px; font-weight: 700; color: var(--ink); }
.office-tel .ic { color: var(--gold-ink); }
.office-tel a:hover { color: var(--gold-ink); }
.office-tel2 { flex-basis: 100%; padding-left: 24px; font-size: 14px; font-weight: 500; color: var(--ink-3); }
.office-tel2 a { font-weight: 700; color: var(--ink); }
.office-tel--none { display: block; font-size: 14px; font-weight: 400; color: var(--ink-3); line-height: 1.65; }
.office-tel--none a { font-weight: 600; color: var(--ink); }
.office-fax { font-size: 14px; color: var(--ink-3); }
.office-transit { display: grid; gap: 2px; font-size: 14px; color: var(--ink-3); line-height: 1.6; }
.office-transit li::before { content: "– "; }
.office-map { margin-top: auto; padding-top: 14px; }
.office-map a { display: inline-flex; align-items: center; gap: 6px; padding-bottom: 3px; border-bottom: 1px solid var(--line-2); font-size: 14px; font-weight: 600; color: var(--ink); }
.office-map a:hover { border-color: var(--ink); }
.office:not(.office--hq) .office-body {
  display: grid; grid-template-columns: 132px minmax(0, 1fr); grid-template-areas: "name addr" "name tel" "name map";
  align-content: center; column-gap: 24px; row-gap: 6px; padding: 24px 28px;
}
.office:not(.office--hq) .office-name { grid-area: name; align-self: start; font-size: 18px; line-height: 1.5; }
.office:not(.office--hq) .office-addr { grid-area: addr; }
.office:not(.office--hq) .office-tel { grid-area: tel; }
.office:not(.office--hq) .office-map { grid-area: map; margin-top: 4px; padding-top: 0; }

/* ── 빵부스러기 ── */
.crumbs ol { display: flex; flex-wrap: wrap; align-items: center; row-gap: 4px; font-size: 14px; color: var(--ink-3); }
.crumbs li { display: inline-flex; align-items: center; }
.crumbs li + li::before { content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 12px 0 8px; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; transform: rotate(45deg); opacity: .6; }
.crumbs a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.crumbs [aria-current] { font-weight: 600; color: var(--ink); }
.crumbs--dark ol { color: rgba(255, 255, 255, .82); }
.crumbs--dark a:hover, .crumbs--dark [aria-current] { color: #fff; }

/* ── 하위 페이지 머리(실사 띠) ── */
.phero { position: relative; display: flex; align-items: flex-end; min-height: 360px; overflow: hidden; background: var(--navy-900); color: #fff; }
.phero-bg { position: absolute; inset: 0; }
.phero-bg img { width: 100%; height: 100%; object-fit: cover; }
/* 글자 쪽(왼쪽 42%)만 진하게, 오른쪽은 실제 화담 사진이 보이게(첫 화면과 같은 방식) */
.phero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(14, 26, 51, .92) 0%, rgba(14, 26, 51, .72) 42%, rgba(14, 26, 51, .2) 100%), linear-gradient(0deg, rgba(11, 18, 32, .45) 0%, rgba(11, 18, 32, 0) 45%); }
.phero::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; z-index: 2; background: var(--gold); opacity: .9; }
.phero-in { position: relative; z-index: 1; padding-block: 40px 48px; }
.phero-kicker { display: flex; align-items: center; gap: 8px; margin-top: 26px; font-size: 14px; font-weight: 600; color: var(--gold-lt); letter-spacing: .02em; }
.phero-title { max-width: 22em; margin-top: 10px; font-size: 44px; color: #fff; line-height: 1.25; letter-spacing: -0.035em; text-wrap: balance; }
.phero-lead { max-width: 720px; margin-top: 14px; font-size: 18px; line-height: 1.7; color: rgba(255, 255, 255, .86); }

/* ── 공익사업지구: 유형 막대 ── */
.pbars { display: grid; gap: 2px; }
.pbar {
  display: grid; grid-template-columns: 118px minmax(0, 1fr) 38px; align-items: center; gap: 14px;
  margin-inline: -10px; padding: 8px 10px; border-radius: var(--r-btn); text-align: left; color: var(--ink);
  transition: background-color var(--t-fast), color var(--t-fast);
}
.pbar:hover { background: rgba(14, 26, 51, .05); }
.pbar[aria-pressed="true"] { background: var(--navy-900); color: #fff; }
.pbar-name { font-size: 15px; font-weight: 600; line-height: 1.4; }
.pbar-track { height: 8px; border-radius: 2px; background: #E2E5EB; overflow: hidden; }
.pbar-fill { display: block; height: 100%; border-radius: 2px; background: var(--navy-900); transition: background-color var(--t-fast); }
.pbar--gold .pbar-fill { background: var(--gold); }
.pbar[aria-pressed="true"] .pbar-track { background: rgba(255, 255, 255, .2); }
.pbar[aria-pressed="true"] .pbar-fill { background: #fff; }
.pbar-n { text-align: right; font-size: 15px; font-weight: 700; }
.pbars-note { margin-top: 12px; font-size: 13px; color: var(--ink-3); line-height: 1.6; }
html:not(.js) .pbar { pointer-events: none; }
html:not(.js) .pbars-note { display: none; }

/* ── 공익사업지구: 목록 ── */
.plist-items { columns: var(--cols, 2); column-gap: 36px; border-top: 1px solid var(--ink); }
.plist--c1 { --cols: 1; } .plist--c2 { --cols: 2; } .plist--c3 { --cols: 3; }
.plist-item { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: baseline; gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--line); break-inside: avoid; font-size: 15px; }
.plist-no { font-size: 13px; color: var(--ink-3); }
.plist-name { color: var(--ink); line-height: 1.5; }
.plist-cat { font-size: 13px; color: var(--ink-3); white-space: nowrap; }
.plist-item.is-gold .plist-no { color: var(--gold-ink); font-weight: 700; }
html.js .plist:not(.is-open) .plist-item.is-extra { display: none; }
html.js .plist .plist-item.is-filtered { display: none !important; }
.plist-more {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 50px; margin-top: 16px;
  border: 1px solid var(--line-2); border-radius: var(--r-btn); background: #fff; font-size: 15px; font-weight: 600; color: var(--ink);
  transition: border-color var(--t-fast);
}
.plist-more:hover { border-color: var(--ink); }
.plist-more .ic { transition: transform var(--t) var(--ease); }
.plist.is-open .plist-more .ic { transform: rotate(180deg); }
html:not(.js) .plist-more { display: none; }
.plist-empty { padding: 24px 0; color: var(--ink-3); }

/* ── 공익사업지구: 지도 ── */
.pmap { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.pmap--inset { grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); align-items: stretch; }
.pmap-main, .pmap-inset { margin: 0; padding: 18px; background: var(--white); border: 1px solid var(--line); border-radius: var(--r-card); }
.pmap-main { position: relative; }
.pmap-main svg, .pmap-inset svg { width: 100%; height: auto; max-height: 620px; }
.pmap-islands { position: absolute; top: 16px; right: 16px; width: 22%; margin: 0; padding: 6px 8px 4px; background: var(--white); border: 1px solid var(--line); border-radius: var(--r-btn); }
.pmap-islands svg { max-height: none; }
.pmap-islands .pmap-outline { fill: #C5CBD6; stroke: #8E96A4; stroke-width: .8; }
.pmap-shape path.is-seoul { fill: #D9DEE7; }
.pmap-label { fill: var(--ink-2); font-weight: 600; paint-order: stroke; stroke: rgba(255, 255, 255, .9); stroke-width: 3px; stroke-linejoin: round; vector-effect: non-scaling-stroke; pointer-events: none; letter-spacing: -0.02em; }
.pmap-label--gold { fill: var(--gold-ink); }
.pmap-label--nt { fill: var(--gold-ink); font-weight: 700; }
.pmap-label--city { fill: var(--ink-3); font-weight: 500; }
/* 지도 한 장(홈): 한 카드 안에 전국 지도(왼쪽)와 수도권 확대 삽입판(오른쪽 아래 — 지도를 가리지 않게), 울릉도·독도는 오른쪽 위 */
.pmap--overlay .pmap-main { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); align-items: end; gap: 16px; padding: 20px; }
.pmap--overlay .pmap-main > svg { max-height: 600px; }
.pmap--overlay .pmap-islands { width: 20%; }
.pmap--overlay .pmap-inset { padding: 10px 12px 8px; border-color: var(--line-2); }
.pmap--overlay .pmap-inset svg { max-height: none; }
/* 화면에 들어오면 점이 북쪽부터 차례로(html.js 일 때만, 움직임 줄이기면 끔) */
html.js .pmap--reveal:not(.is-in) .pmap-dot { opacity: 0; }
.pmap--reveal.is-in .pmap-dot { animation: dotIn .4s var(--ease) backwards; animation-delay: var(--d, 0s); transform-box: fill-box; transform-origin: center; }
@keyframes dotIn { from { opacity: 0; transform: scale(.2); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { html.js .pmap--reveal .pmap-dot { opacity: 1; animation: none; } }
.pmap-islands figcaption { font-size: 13px; color: var(--ink-3); text-align: center; line-height: 1.4; }
.pmap-inset { display: flex; flex-direction: column; }
.pmap-inset figcaption { margin-bottom: 8px; font-size: 13px; font-weight: 700; color: var(--ink-2); }
.pmap-inset svg { flex: 1; }
.pmap-outline { fill: #E6E9EF; stroke: #fff; stroke-width: 1.1; stroke-linejoin: round; }
.pmap-shape path { vector-effect: non-scaling-stroke; }
.pmap-frame { fill: rgba(175, 149, 79, .06); stroke: var(--gold); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.pmap-dot { fill: var(--navy-900); fill-opacity: .8; stroke: #fff; stroke-width: 1; vector-effect: non-scaling-stroke; transition: opacity var(--t-fast); }
.pmap-dot.is-gold { fill: var(--gold); fill-opacity: 1; }
.pmap.is-filtering .pmap-dot { opacity: .12; }
.pmap.is-filtering .pmap-dot.is-match { opacity: 1; }
.pmap-legend { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px 20px; font-size: 13px; color: var(--ink-3); }
.pmap-legend li { display: inline-flex; align-items: center; gap: 6px; }
.pmap-key { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--navy-900); opacity: .85; }
.pmap-key.is-gold { background: var(--gold); opacity: 1; }
.pmap-key--big { width: 16px; height: 16px; }
.pmap-note { grid-column: 1 / -1; font-size: 13px; color: var(--ink-3); line-height: 1.6; }

/* ── 하자 대표 단지 ── */
.drec { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.drec-card { padding: 20px 20px 18px; background: var(--white); border: 1px solid var(--line); border-radius: var(--r-card-sm); }
.drec-region { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: var(--ink-3); }
.drec-name { min-height: 2.9em; margin-top: 10px; font-size: 17px; font-weight: 700; line-height: 1.45; letter-spacing: -0.025em; }
.drec-units { margin-top: 10px; font-size: 14px; color: var(--ink-3); }
.drec-units .num { margin-right: 2px; font-size: 21px; font-weight: 700; color: var(--ink); }
.dregions { display: flex; flex-wrap: wrap; align-items: center; row-gap: 6px; margin-top: 22px; font-size: 15px; color: var(--ink-2); }
.dregions-h { margin-right: 16px; font-weight: 700; color: var(--ink); }
.dregions span:not(.dregions-h):not(:last-child)::after { content: "·"; margin: 0 10px; color: var(--ink-3); }

/* ── 일하는 방식: 분야 탭 + 가로 단계 흐름 (흰 바탕 기본, 남색 구간에서 반전) ── */
.wf { --wf-fg: var(--ink); --wf-fg2: var(--ink-2); --wf-fg3: var(--ink-3); --wf-line: var(--line); --wf-line2: var(--line-2); --wf-accent: var(--gold-ink); --wf-dot: var(--gold); }
.section--dark .wf { --wf-fg: #fff; --wf-fg2: var(--on-dark-2); --wf-fg3: var(--on-dark-3); --wf-line: var(--line-dark); --wf-line2: var(--line-dark-2); --wf-accent: var(--gold-lt); --wf-dot: var(--gold-lt); }
.wf-tabs { display: flex; margin-bottom: 44px; border-bottom: 1px solid var(--wf-line); overflow-x: auto; scrollbar-width: none; }
.wf-tabs::-webkit-scrollbar { display: none; }
.wf-tab {
  position: relative; display: inline-flex; align-items: center; gap: 10px; height: 66px; padding-right: 8px; margin-right: 44px;
  font-size: 19px; font-weight: 600; color: var(--wf-fg3); white-space: nowrap; transition: color var(--t-fast);
}
.wf-tab::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--wf-accent); transform: scaleX(0); transform-origin: left; transition: transform var(--t) var(--ease); }
.wf-tab:hover { color: var(--wf-fg); }
.wf-tab[aria-selected="true"] { color: var(--wf-fg); }
.wf-tab[aria-selected="true"]::after { transform: scaleX(1); }
.wf-tab-n { padding-left: 2px; font-size: 13px; font-weight: 500; color: var(--wf-fg3); }
html:not(.js) .wf-tabs { display: none; }
html.js .wf-panel[data-inactive] { display: none; }
html:not(.js) .wf-panel + .wf-panel { margin-top: 72px; }
.wf-panel { animation: wfIn var(--t-slow) var(--ease); }
.wf-panel-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 40px; }
.wf-title { font-size: 28px; font-weight: 700; line-height: 1.35; letter-spacing: -0.03em; color: var(--wf-fg); }
.wf-title-field { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 14px; font-weight: 600; color: var(--wf-fg3); letter-spacing: 0; }
.wf-panel-links { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 28px; }
.wf-tel { display: inline-flex; align-items: center; gap: 8px; font-size: 18px; font-weight: 700; color: var(--wf-fg); letter-spacing: 0; }
.wf-tel .ic { color: var(--wf-accent); }
.wf-tel:hover { color: var(--wf-accent); }
.wf-steps { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); }
.wf-step { position: relative; min-width: 0; }
.wf-no { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; font-size: 15px; font-weight: 700; color: var(--wf-accent); letter-spacing: .04em; }
.wf-no::before { content: ""; flex: none; width: 11px; height: 11px; border-radius: 50%; background: var(--wf-dot); box-shadow: 0 0 0 5px color-mix(in srgb, var(--wf-dot) 22%, transparent); order: -1; }
.wf-no::after { content: ""; flex: 1; height: 1px; background: var(--wf-line2); }
.wf-step:last-child .wf-no::after { background: linear-gradient(90deg, var(--wf-line2), transparent); }
.wf-name, .wf-what, .wf-out { padding-right: 30px; }
.wf-name { font-size: 21px; font-weight: 700; line-height: 1.4; letter-spacing: -0.025em; color: var(--wf-fg); }
.wf-sub { display: block; margin-top: 4px; font-size: 14px; font-weight: 500; color: var(--wf-fg3); letter-spacing: 0; }
.wf-what { margin-top: 14px; font-size: 15.5px; line-height: 1.78; color: var(--wf-fg2); }
.wf-out { margin-top: 20px; font-size: 14px; font-weight: 600; line-height: 1.55; color: var(--wf-fg); }
.wf-out-h { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; padding-top: 14px; border-top: 1px solid var(--wf-line); font-size: 13px; font-weight: 600; color: var(--wf-accent); }
@keyframes wfIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .wf-panel { animation: none; } }

/* ── 공통 약속 ── */
.promises { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.promise { padding: 0 36px; border-left: 1px solid var(--line); }
.promise:first-child { padding-left: 0; border-left: 0; }
.promise .ic { color: var(--gold-ink); }
.promise-h { margin-top: 16px; font-size: 19px; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); }
.promise-d { margin-top: 8px; font-size: 15.5px; line-height: 1.75; color: var(--ink-2); }
.section--dark .promise { border-color: var(--line-dark); }
.section--dark .promise .ic { color: var(--gold-lt); }
.section--dark .promise-h { color: #fff; }
.section--dark .promise-d { color: var(--on-dark-2); }

/* ── 하자 진단 장비 9종 ── */
.equip-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-bottom: 22px; }
.equip-title { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; }
.equip-list { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 12px; }
.equip-item figure { display: grid; gap: 10px; }
/* 장비 사진은 바탕·밝기가 제각각이라 같은 1:1 크롭 + 톤만 맞추고(흑백 금지) 1px 테두리로 정돈 */
.equip-item img { width: 100%; aspect-ratio: 1; object-fit: cover; object-position: center; border-radius: var(--r-card-sm); background: #fff; border: 1px solid var(--line); filter: saturate(.9) contrast(1.02); }
.equip-item figcaption { font-size: 13px; font-weight: 600; line-height: 1.45; color: var(--ink-2); }
.equip-item figcaption .num { display: block; margin-bottom: 2px; font-size: 13px; font-weight: 700; color: var(--gold-ink); }

/* ── AI가 읽는 홈페이지 띠 ── */
.aib { padding-block: 72px; background: var(--bg-soft); border-top: 1px solid var(--line); }
.aib-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 580px); gap: 64px; align-items: center; }
.aib-kicker { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; font-size: 13px; font-weight: 700; color: var(--gold-ink); letter-spacing: .04em; }
.aib-title { font-size: 30px; letter-spacing: -0.03em; }
.aib-desc { max-width: 620px; margin-top: 14px; font-size: 16px; line-height: 1.8; color: var(--ink-2); }
.aib-desc strong { color: var(--ink); }
.aib-links { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin-top: 22px; }
.aib-file { font-family: var(--font-mono); font-size: 14px; color: var(--ink-2); border-bottom: 1px solid var(--line-2); padding-bottom: 2px; }
.aib-file:hover { color: var(--ink); border-color: var(--ink); }
.aib-code { margin: 0; overflow: hidden; background: var(--white); border: 1px solid var(--line); border-radius: var(--r-card); }
.aib-code figcaption { display: flex; align-items: center; gap: 8px; padding: 11px 16px; border-bottom: 1px solid var(--line); background: #FAFAFB; font-family: var(--font-mono); font-size: 13px; color: var(--ink); }
.aib-cap-note { margin-left: auto; font-family: var(--font); color: var(--ink-3); }
.aib-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); }
.aib-code pre { margin: 0; padding: 16px 18px 18px; font-family: var(--font); font-size: 14px; line-height: 1.75; color: var(--ink-2); white-space: pre-wrap; word-break: break-all; }
.aib-code code { font: inherit; } /* 안쪽 <code> 가 UA 기본 고정폭(한글 굴림체)으로 떨어지지 않게 */

/* ── 하위 페이지 끝 상담 띠 ── */
.cta-band { padding-block: 64px; background: var(--navy-900); color: #fff; }
.cta-band-in { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1.25fr) auto; gap: 48px; align-items: center; }
.cta-band-kicker { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--gold-lt); }
.cta-band-title { margin-top: 10px; font-size: 28px; line-height: 1.4; color: #fff; }
.cta-band-phones { display: grid; gap: 12px; }
.cta-band-tel { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--line-dark); }
.cta-band-l { font-size: 14px; color: var(--on-dark-3); }
.cta-band-n { font-size: 26px; font-weight: 700; color: #fff; letter-spacing: 0; }
.cta-band-tel:hover .cta-band-n { color: var(--gold-lt); }
.cta-band-phones--one .cta-band-n { font-size: 30px; }
.cta-band-other { font-size: 15px; color: var(--on-dark-3); }
.cta-band-other a { margin-left: 4px; font-weight: 700; color: #fff; letter-spacing: 0; }
.cta-band-other a:hover { color: var(--gold-lt); }
.cta-band-btns { display: flex; flex-direction: column; gap: 10px; }

/* ── 반응형 ── */
@media (max-width: 1279px) {
  .equip-list { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .drec { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cta-band-in { grid-template-columns: 1fr 1fr; }
  .cta-band-btns { grid-column: 1 / -1; flex-direction: row; }
}

@media (max-width: 1023px) {
  .sh { margin-bottom: 40px; }
  .sh--split { grid-template-columns: 1fr; gap: 18px; align-items: start; }
  .stats { --cols: 2 !important; row-gap: 28px; }
  .stat:nth-child(odd) { border-left: 0; padding-left: 0; }
  .stats--stack { grid-template-columns: 1fr; }
  .wf-panel-head { flex-direction: column; align-items: flex-start; }
  .wf-steps { grid-template-columns: 1fr; }
  .wf-step { padding: 0 0 34px 36px; }
  .wf-step::before { content: ""; position: absolute; left: 5px; top: 22px; bottom: 0; width: 1px; background: var(--wf-line2); }
  .wf-step:last-child { padding-bottom: 0; }
  .wf-step:last-child::before { display: none; }
  .wf-no { position: relative; margin-bottom: 8px; }
  .wf-no::before { position: absolute; left: -36px; top: 50%; margin-top: -5.5px; }
  .wf-no::after { display: none; }
  .wf-name, .wf-what, .wf-out { padding-right: 0; }
  .promises { grid-template-columns: 1fr; gap: 28px; }
  .promise { padding: 0; border-left: 0; }
  .aib-in { grid-template-columns: 1fr; gap: 32px; }
  .pmap--inset { grid-template-columns: 1fr; }
  .offices { grid-template-columns: 1fr; }
  .office--hq { grid-row: auto; }
  .phero { min-height: 280px; }
  .phero-title { font-size: 34px; }
}

@media (max-width: 767px) {
  .btn { height: 50px; }
  .sh-title { letter-spacing: -0.03em; }
  .stat { padding: 0 16px; }
  .stat-num { font-size: 38px; }
  .stat-unit { font-size: 16px; }
  .stat-label { font-size: 15px; }
  .fbar { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scrollbar-width: none; }
  .fbar::-webkit-scrollbar { display: none; }
  .fbar-btn { flex: none; }
  .ins-feature { padding: 28px 22px 24px; }
  .ins-feature-q { font-size: 22px; }
  .ins-points { padding: 18px; }
  .faq-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .faq-tabs::-webkit-scrollbar { display: none; }
  .faq-tab { flex: none; }
  .faq-q { flex-direction: column; gap: 4px; font-size: 17px; }
  .faq-a { padding: 0 8px 22px 4px; }
  .cf-opts, .cf-grid { grid-template-columns: 1fr; }
  .cf-prog li { font-size: 13px; }
  .cf-legend { font-size: 19px; }
  .cf-btns { width: 100%; }
  .cf-btns .btn { flex: 1; }
  .cf-draft { text-align: left; }
  .office:not(.office--hq) .office-body { grid-template-columns: 1fr; grid-template-areas: "name" "addr" "tel" "map"; padding: 22px 20px; }
  .office-body { padding: 22px 20px; }
  .equip-list { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(var(--gutter) * -1); padding: 0 var(--gutter) 6px; scrollbar-width: none; }
  .equip-list::-webkit-scrollbar { display: none; }
  .equip-item { flex: 0 0 34%; scroll-snap-align: start; }
  .pmap--overlay .pmap-main { grid-template-columns: 1fr; }
  .pmap--overlay .pmap-islands { width: 26%; }
  .vfeat-link { grid-template-columns: 1fr; }
  .vfeat-body { padding: 20px 20px 18px; }
  .vfeat-title { font-size: 19px; }
  .cta-band-phones--one .cta-band-n { font-size: 26px; }
  .drec { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
  .drec-card { padding: 16px 14px 14px; }
  .drec-name { font-size: 15px; }
  .plist-items { columns: 1 !important; }
  .pbar { grid-template-columns: 100px minmax(0, 1fr) 34px; gap: 10px; }
  .aib { padding-block: 56px; }
  .aib-title { font-size: 24px; }
  .cta-band-in { grid-template-columns: 1fr; gap: 28px; }
  .cta-band-btns { flex-direction: column; }
  .cta-band-title { font-size: 23px; }
  .cta-band-n { font-size: 22px; }
  .phero-title { font-size: 30px; }
  .phero-lead { font-size: 16px; }
}

/* 2026-10-15 대표 지시: 분야 앞 색깔 점 없음(직접 쓴 span 포함) */
.fdot { display: none !important; }

/* 2026-10-29 변호사 요청 9번: 영상 재생 단추를 유튜브 빨간 마크로 */
.yt-mark { display: block; flex: none; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .28)); }
.vfeat-play, .vcard-play, .tvp-feature-play { background: none !important; border-radius: 0 !important; width: auto !important; height: auto !important; }
.vfeat-play { left: 50%; top: 50%; bottom: auto; transform: translate(-50%, -50%); }
.vcard-play { left: 50%; top: 50%; bottom: auto; transform: translate(-50%, -50%); }
.vfeat-link:hover .yt-mark, .vcard-link:hover .yt-mark, .tvp-feature:hover .yt-mark { transform: scale(1.06); transition: transform var(--t-fast) var(--ease); }
.tv-title .yt-mark { filter: none; margin-right: 10px; }
.tv-title { display: flex; align-items: center; }

/* 전문분야 등록증서 */
.certs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 28px 20px; }
.certs--profile { grid-template-columns: repeat(auto-fill, minmax(180px, 220px)); }
.cert { margin: 0; min-width: 0; }
.cert-img { display: block; border: 1px solid var(--line); background: #fff; transition: border-color var(--t-fast) var(--ease); }
.cert-img:hover { border-color: var(--line-strong); }
.cert-img img { display: block; width: 100%; height: auto; }
.cert figcaption { display: grid; gap: 2px; margin-top: 10px; font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.cert figcaption strong { color: var(--ink); font-size: 15px; }
.cert figcaption .num { font-size: 13px; color: var(--ink-3); }
@media (max-width: 1023px) { .certs { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 767px) { .certs, .certs--profile { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 14px; } }


/* ── 35-home.css ── */
/* ─────────────────────────────────────────────────────────────
   35-home — 홈 화면 구간 배치 (site/pages/home.mjs)
   ───────────────────────────────────────────────────────────── */

/* ── 첫 화면: 실사 영상 + 왼쪽에서 오른쪽으로 옅어지는 남색 ── */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 640px; min-height: max(640px, min(100svh, 1080px)); /* 높이를 고정하지 않는다 — 낮은 화면(노트북·창 모드)에서 글이 머리 메뉴 밑으로 밀려 올라가지 않게 */
  color: #fff; background: var(--navy-950) var(--hero-poster, none) center / cover no-repeat; /* 포스터 주소는 home.mjs 가 넣는다(폭별 사본) */
}
.hero-media { position: absolute; inset: 0; z-index: -2; }
.hero-video { width: 100%; height: 100%; object-fit: cover; }
.hero-shade {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(90deg, rgba(14, 26, 51, .93) 0%, rgba(14, 26, 51, .82) 26%, rgba(14, 26, 51, .5) 54%, rgba(14, 26, 51, .16) 82%, rgba(14, 26, 51, .08) 100%),
    linear-gradient(0deg, rgba(11, 18, 32, .74) 0%, rgba(11, 18, 32, .3) 30%, rgba(11, 18, 32, 0) 50%);
}
.hero-in { position: relative; padding-top: calc(var(--header-h) + 48px); padding-bottom: 156px; }
.hero-kicker { display: flex; align-items: center; gap: 12px; font-size: 14px; font-weight: 600; letter-spacing: .24em; color: var(--gold-lt); }
.hero-kicker-rule { width: 44px; height: 1px; background: var(--gold-lt); }
.hero-kicker-dot { letter-spacing: 0; opacity: .8; }
.hero-kicker-ko { letter-spacing: .04em; font-weight: 700; }
.hero-kicker [lang="zh-Hant"] { letter-spacing: .12em; }
.hero-title { margin-top: 24px; font-size: var(--fs-h1); font-weight: 700; line-height: 1.16; letter-spacing: -0.042em; color: #fff; text-wrap: balance; }
.hero-sub { display: block; margin-top: 14px; font-size: 34px; font-weight: 300; line-height: 1.3; letter-spacing: -0.03em; color: rgba(255, 255, 255, .94); }
.hero-lead { max-width: 720px; margin-top: 28px; font-size: 18px; line-height: 1.78; color: rgba(255, 255, 255, .86); }
.hero-doors { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 56px; border-top: 1px solid rgba(255, 255, 255, .3); }
.door { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 22px 28px 0 0; }
.door + .door { padding-left: 28px; border-left: 1px solid rgba(255, 255, 255, .16); }
.door::before { content: ""; position: absolute; top: -1px; left: 0; width: 0; height: 2px; background: var(--gold-lt); transition: width var(--t-slow) var(--ease); }
.door:hover::before, .door:focus-within::before { width: 100%; }
.door-link { display: block; }
.door-top { display: flex; align-items: center; gap: 9px; font-size: 18px; font-weight: 700; color: #fff; letter-spacing: -0.02em; }
.door-no { margin-right: 4px; font-size: 13px; font-weight: 700; color: var(--gold-lt); letter-spacing: .04em; }
.door-arrow { margin-left: auto; opacity: .7; transition: transform var(--t-fast) var(--ease), opacity var(--t-fast); }
.door-link:hover .door-arrow { transform: translateX(3px); opacity: 1; }
.door-ask { display: block; margin-top: 8px; font-size: 15px; line-height: 1.6; color: rgba(255, 255, 255, .86); }
.door-tel { display: inline-flex; align-items: center; gap: 7px; align-self: flex-start; margin-top: 12px; font-size: 16px; font-weight: 700; color: #fff; letter-spacing: 0; }
.door-tel .ic { color: var(--gold-lt); }
.door-tel:hover { color: var(--gold-lt); }
.hero-toggle {
  position: absolute; z-index: 2; top: calc(var(--header-h) + 22px); right: max(var(--gutter), calc((100% - var(--container)) / 2));
  display: inline-flex; align-items: center; height: 38px; padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, .42); border-radius: var(--r-btn); background: rgba(11, 18, 32, .38);
  color: #fff; font-size: 13px; font-weight: 600; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: background-color var(--t-fast), border-color var(--t-fast);
}
.hero-toggle:hover { background: rgba(11, 18, 32, .6); border-color: #fff; }
.hero-toggle > span { display: inline-flex; align-items: center; gap: 8px; }
.hero-toggle .ic-play { fill: currentColor; }
.hero-toggle .when-paused, .hero-toggle[aria-pressed="true"] .when-playing { display: none; }
.hero-toggle[aria-pressed="true"] .when-paused { display: inline-flex; }
html:not(.js) .hero-toggle { display: none; }
/* 2026-10-15: '동작 줄이기'(Windows 애니메이션 효과 끔·원격 접속 등)에서도 배경 영상은 재생한다 — 소리 없는 느린 배경 영상이고
   '영상 멈춤' 단추가 늘 보이므로(WCAG 2.2.2) 숨기지 않는다. 대표 PC 에서 영상이 사진처럼 멈춰 보이던 원인. */

/* 첫 화면 아래에 걸치는 숫자 카드 */
.hero-stats-wrap { position: relative; z-index: 3; margin-top: -108px; }
.hero-stats {
  padding: 36px 44px 32px; background: var(--white);
  border: 1px solid var(--line); border-radius: var(--r-card);
  box-shadow: 0 28px 56px -32px rgba(11, 18, 32, .5);
}
.hero-stats .stat-num { font-size: 50px; }

/* ── 01 업무분야 ── */
.home-practice { padding-top: 112px; }
.pa-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.pa-grid > div { display: flex; min-width: 0; }
.who {
  display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 32px; align-items: center;
  margin-top: 24px; padding: 24px 28px; background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--r-card);
}
.who-title { font-size: 19px; letter-spacing: -0.02em; }
.who-desc { margin-top: 4px; font-size: 14px; line-height: 1.6; color: var(--ink-3); }
.who-list { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.who-list li { min-width: 0; }
.who-list li + li { border-left: 1px solid var(--line-2); }
.who-list a { position: relative; display: grid; gap: 3px; padding: 6px 34px 6px 20px; }
.who-name { font-size: 16px; font-weight: 700; color: var(--ink); letter-spacing: -0.02em; transition: color var(--t-fast); }
.who-to { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.who-what { font-size: 13px; line-height: 1.5; color: var(--ink-3); }
.who-arrow { position: absolute; right: 10px; top: 50%; color: var(--ink-3); transform: translateY(-50%); transition: transform var(--t-fast) var(--ease), color var(--t-fast); }
.who-list a:hover .who-name { color: var(--gold-ink); }
.who-list a:hover .who-arrow { color: var(--ink); transform: translate(3px, -50%); }

/* ── 02 왜 화담인가 ── */
.team3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.team-card { display: flex; flex-direction: column; min-width: 0; overflow: hidden; background: var(--white); border: 1px solid var(--line); border-radius: var(--r-card); }
.team-fig { aspect-ratio: 16 / 9; overflow: hidden; background: var(--bg-soft-2); }
.team-fig img { width: 100%; height: 100%; object-fit: cover; }
.team-body { display: flex; flex-direction: column; flex: 1; padding: 28px 30px 26px; }
.team-role { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 700; color: var(--gold-ink); }
.team-lead { margin-top: 12px; font-size: 22px; line-height: 1.4; letter-spacing: -0.03em; }
.team-desc { margin-top: 12px; font-size: 15.5px; line-height: 1.78; color: var(--ink-2); }
.why-note { margin-top: 20px; }
.home-why .equip { margin-top: 64px; padding-top: 40px; border-top: 1px solid var(--line-2); }

/* ── 03 일하는 방식 (남색) ── */
.home-how { overflow: hidden; }
.how-bg {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(900px 420px at 88% -8%, rgba(43, 74, 139, .42), rgba(43, 74, 139, 0) 70%),
    radial-gradient(700px 360px at -6% 108%, rgba(175, 149, 79, .12), rgba(175, 149, 79, 0) 70%);
}
.home-how .container { position: relative; }
.how-promise { margin-top: 80px; padding-top: 44px; border-top: 1px solid var(--line-dark); }
.home-how .how-promise-h { margin-bottom: 28px; font-size: 15px; font-weight: 700; color: var(--gold-lt); letter-spacing: .02em; }

/* ── 04 구성원 ── */
.people-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 44px 20px; }
/* 접힌 상태(처음): 분야 주력 구성원 + 감정평가사 7명과 '화담 구성' 카드만 한 줄에. 거르기 단추를 누르면 모두 펼친다.
   17명 전원은 HTML 에 그대로 있다(검색엔진·AI·화면낭독기 기준 글은 같음 — 화면에서만 접음). */
.people-grid.is-collapsed { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 36px 16px; }
.people-grid.is-collapsed .pcard--rest { display: none; }
.people-grid.is-collapsed .pcard-name { font-size: 18px; flex-wrap: wrap; column-gap: 6px; }
.people-grid.is-collapsed .pcard-focus { font-size: 14px; }
.people-grid.is-collapsed .pcard-more-in { padding: 20px 16px; }
.people-grid.is-collapsed .pcard-more-n .num { font-size: 40px; }
.people-all { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 20px; margin-top: 36px; }
.people-all-d { font-size: 14px; color: var(--ink-3); }
html:not(.js) .people-all-d, .people-all.is-open .people-all-d { display: none; }
.pcard--more .pcard-link { display: flex; }
.pcard-more-in {
  display: flex; flex-direction: column; justify-content: flex-end; width: 100%; min-height: 100%;
  padding: 24px 22px; background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--r-card-sm);
  transition: border-color var(--t-fast);
}
.pcard--more .pcard-link:hover .pcard-more-in { border-color: var(--ink-3); }
.pcard-more-k { font-size: 14px; font-weight: 700; color: var(--gold-ink); }
.pcard-more-n { margin-top: 8px; font-size: 22px; font-weight: 700; color: var(--ink); line-height: 1; }
.pcard-more-n .num { font-size: 52px; letter-spacing: -0.04em; margin-right: 2px; }
.pcard-more-d { margin-top: 12px; font-size: 15px; color: var(--ink-2); line-height: 1.55; }
.pcard-more-note { margin-top: 10px; font-size: 13px; line-height: 1.55; color: var(--ink-3); }
.pcard-more-go { display: inline-flex; align-items: center; gap: 6px; margin-top: 18px; font-size: 14px; font-weight: 600; color: var(--ink); }
.pcard-more-go .ic { transition: transform var(--t-fast) var(--ease); }
.pcard--more .pcard-link:hover .pcard-more-go .ic { transform: translateX(3px); }

/* ── 05 수행 실적 ── */
.rec-tabs { display: flex; margin-bottom: 48px; border-bottom: 1px solid var(--line-2); overflow-x: auto; scrollbar-width: none; }
.rec-tabs::-webkit-scrollbar { display: none; }
.rec-tab {
  position: relative; display: inline-flex; align-items: center; gap: 10px; height: 66px; margin-right: 44px;
  font-size: 19px; font-weight: 600; color: var(--ink-3); white-space: nowrap; transition: color var(--t-fast);
}
.rec-tab::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--navy-900); transform: scaleX(0); transform-origin: left; transition: transform var(--t) var(--ease); }
.rec-tab:hover, .rec-tab[aria-selected="true"] { color: var(--ink); }
.rec-tab[aria-selected="true"]::after { transform: scaleX(1); }
.rec-tab-n { font-size: 14px; font-weight: 600; color: var(--gold-ink); }
html:not(.js) .rec-tabs { display: none; }
html.js .rec-panel[data-inactive] { display: none; }
html:not(.js) .rec-panel + .rec-panel { margin-top: 80px; }
.rec-panel { animation: wfIn var(--t-slow) var(--ease); }
.rec-comp, .rec-def { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 56px; }
.rec-side { min-width: 0; }
.rec-main { min-width: 0; }
.rec-h { font-size: 24px; line-height: 1.45; letter-spacing: -0.03em; }
.rec-h-field { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-size: 14px; font-weight: 600; color: var(--ink-3); letter-spacing: 0; }
.rec-big { display: flex; flex-wrap: wrap; align-items: baseline; margin-top: 28px; color: var(--ink); }
.rec-big .num { font-size: 112px; font-weight: 700; line-height: .9; letter-spacing: -0.055em; }
.rec-big-u { margin-left: 8px; font-size: 30px; font-weight: 700; color: var(--gold-ink); white-space: nowrap; }
.rec-big sup.fn { align-self: flex-start; margin-top: 6px; }
.rec-newtown { margin: 24px 0 26px; padding: 16px 0; border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); }
.rec-newtown-h { display: block; margin-bottom: 8px; font-size: 15px; font-weight: 700; color: var(--ink); }
.rec-newtown-h::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: var(--gold); vertical-align: 1px; }
.rec-newtown-list { display: flex; flex-wrap: wrap; row-gap: 2px; font-size: 14px; line-height: 1.7; color: var(--ink-2); }
.rec-newtown-list span:not(:last-child)::after { content: "·"; margin: 0 8px; color: var(--gold-ink); }
.rec-side .rec-all { margin-top: 28px; }
.rec-all { margin-top: 24px; }
.rec-notes { margin-top: 32px; }
.rec-photos { margin-top: 52px; }
.rec-photos-h { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; font-size: 15px; font-weight: 700; color: var(--ink); }
.rec-photos-h::before { content: ""; width: 28px; height: 1px; background: var(--ink); }
.rec-photos ul { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr; gap: 12px; }
.rec-photos figure { height: 210px; overflow: hidden; border-radius: var(--r-card-sm); background: var(--bg-soft-2); }
.rec-photos img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.rec-photos li:hover img { transform: scale(1.04); }
.rec-def-h { margin-bottom: 16px; font-size: 15px; font-weight: 700; color: var(--ink); }
.rec-def .stats--stack .stat:first-child { border-top: 1px solid var(--ink); }
.rec-def .rec-h + .stats { margin-top: 28px; }

/* ── 06 법률 정보 ── */
.ins-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px; align-items: start; }
.ins-list-h { padding-bottom: 14px; border-bottom: 1px solid var(--ink); font-size: 15px; font-weight: 700; color: var(--ink); }
.ins-list-more { margin-top: 20px; }
.tv { margin-top: 96px; padding-top: 48px; border-top: 1px solid var(--line); scroll-margin-top: 100px; }
.tv-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 28px; }
.tv-title { display: flex; align-items: center; gap: 10px; font-size: 26px; letter-spacing: -0.03em; }
.tv-title .ic { color: var(--gold-ink); }
.tv-desc { margin-top: 8px; font-size: 15px; color: var(--ink-3); }
.tv-desc strong { color: var(--ink); }
.tv-body { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px; align-items: stretch; }
.tv-list-h { padding-bottom: 14px; font-size: 15px; font-weight: 700; color: var(--ink); }
.tv-more { margin-top: 20px; }
.tv-note { margin-top: 20px; }

/* ── 상담 신청 (남색) ── */
.consult-in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 72px; align-items: start; }
.consult-side .sh { margin-bottom: 40px; }
.consult-side .sh-desc { font-size: 18px; color: #fff; }
.consult-phones { border-top: 1px solid var(--line-dark); }
.consult-phone { position: relative; display: grid; gap: 4px; padding: 24px 0; border-bottom: 1px solid var(--line-dark); transition: padding var(--t) var(--ease); }
.consult-phone::before { content: ""; position: absolute; left: 0; top: 24px; bottom: 24px; width: 3px; background: var(--gold-lt); transform: scaleY(0); transition: transform var(--t) var(--ease); }
.consult-phone.is-active { padding-left: 22px; }
.consult-phone.is-active::before { transform: scaleY(1); }
.consult-phone-l { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; color: var(--on-dark-2); }
.consult-phone-n { justify-self: start; font-size: 42px; font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; color: #fff; }
.consult-phone-n:hover { color: var(--gold-lt); }
.consult-phone-d { font-size: 14px; color: var(--on-dark-3); }
/* 본사 한 줄(사무소 4칸은 푸터·/contact/ 에) */
.consult-hq { display: grid; gap: 2px; margin-top: 28px; font-style: normal; font-size: 15px; line-height: 1.6; color: var(--on-dark-2); }
.consult-hq-l { font-size: 13px; font-weight: 600; color: var(--gold-lt); letter-spacing: .02em; }
.consult-hq-a { color: #fff; font-weight: 600; }
.consult-hq-t { font-size: 14px; color: var(--on-dark-3); }
.consult-visit { margin-top: 20px; font-size: 15px; line-height: 1.6; }
.consult-visit a { display: inline-flex; align-items: center; gap: 8px; padding-bottom: 4px; border-bottom: 1px solid var(--line-dark-2); color: #fff; font-weight: 600; }
.consult-visit a .ic:first-child { color: var(--gold-lt); }
.consult-visit a:hover { border-color: #fff; }
.consult-card { padding: 42px 44px 32px; background: var(--white); color: var(--ink-2); border-radius: var(--r-card); box-shadow: 0 32px 64px -32px rgba(0, 0, 0, .55); }
/* 흰 카드 안은 밝은 바탕 규칙으로 되돌림 */
.consult-card :focus-visible { outline-color: var(--gold-ink); }
.consult-card .link { color: var(--ink); text-decoration-color: var(--line-2); }
.consult-card .fdot--comp { background: var(--f-comp); }
.consult-card .fdot--build { background: var(--f-build); }
.consult-card .note { color: var(--ink-3); }

/* ── 반응형 ── */
@media (min-width: 1680px) {
  .hero-in { padding-bottom: 176px; }
}

@media (max-width: 1279px) {
  .hero-doors .door { padding-right: 18px; }
  .hero-doors .door + .door { padding-left: 18px; }
  .people-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .people-grid.is-collapsed { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px 20px; }
  .who { grid-template-columns: 1fr; gap: 16px; }
  .who-list li:first-child a { padding-left: 0; }
  .rec-photos figure { height: 170px; }
}

@media (max-width: 1023px) {
  .hero { height: auto; min-height: 100vh; min-height: 100svh; max-height: none; }
  .hero-in { padding-top: calc(var(--header-main) + 56px); padding-bottom: 96px; }
  .hero-sub { font-size: 26px; }
  .hero-doors { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 44px; }
  .hero-doors .door { padding: 18px 16px 18px 0; }
  .hero-doors .door:nth-child(2n) { padding-left: 16px; }
  .hero-doors .door:nth-child(3) { border-left: 0; padding-left: 0; }
  .hero-doors .door:nth-child(n+3) { border-top: 1px solid rgba(255, 255, 255, .16); }
  .hero-toggle { top: calc(var(--header-main) + 14px); }
  .hero-stats-wrap { margin-top: -56px; }
  .hero-stats { padding: 28px 28px 24px; }
  .home-practice { padding-top: 80px; }
  .pa-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .team3 { grid-template-columns: 1fr; }
  .team-card { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
  .team-fig { aspect-ratio: auto; height: 100%; }
  .people-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px 16px; }
  .rec-comp, .rec-def { grid-template-columns: 1fr; gap: 40px; }
  .rec-photos ul { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rec-photos li:nth-child(n+4) { display: none; }
  .ins-grid { grid-template-columns: 1fr; gap: 40px; }
  .tv-body { grid-template-columns: 1fr; gap: 32px; }
  .tv-head { flex-direction: column; align-items: flex-start; }
  .consult-in { grid-template-columns: 1fr; gap: 48px; }
}

@media (max-width: 767px) {
  .hero-in { padding-top: calc(var(--header-main) + 40px); padding-bottom: 76px; }
  .hero-kicker { font-size: 13px; letter-spacing: .18em; }
  .hero-kicker-rule { width: 28px; }
  .hero-title { margin-top: 18px; letter-spacing: -0.04em; }
  .hero-sub { margin-top: 10px; font-size: 22px; }
  .hero-lead { margin-top: 18px; font-size: 16px; line-height: 1.7; }
  .hero-lead br { display: none; } /* br 앞에 공백이 있어 두 문장이 붙지 않는다 */
  /* 휴대폰도 세로 영상(hero-city-m.mp4)을 튼다(10-16) — 위쪽은 영상이 보이게 옅게, 글자가 놓이는 가운데·아래는 짙게 */
  .hero-shade { background: linear-gradient(180deg, rgba(14, 26, 51, .38) 0%, rgba(14, 26, 51, .5) 24%, rgba(14, 26, 51, .74) 50%, rgba(11, 18, 32, .9) 78%, rgba(11, 18, 32, .95) 100%); }
  .hero-title { text-shadow: 0 2px 12px rgba(0, 0, 0, .35); }
  .hero-lead, .door-ask, .hero-sub { text-shadow: 0 1px 3px rgba(0, 0, 0, .5); }
  .hero-kicker-ko { letter-spacing: .02em; }
  .hero-kicker > span { white-space: nowrap; }
  .hero-kicker [lang="en"], .hero-kicker [lang="en"] + .hero-kicker-dot { display: none; } /* 좁은 화면은 '법무법인 화담 · 和談' 한 줄 */
  .hero-doors { margin-top: 32px; }
  .hero-doors .door { padding: 16px 12px 16px 0; }
  .hero-doors .door:nth-child(2n) { padding-left: 12px; }
  .door-top { font-size: 15px; gap: 7px; }
  .door-no { display: none; }
  .door-arrow { display: none; }
  .door-ask { font-size: 13px; line-height: 1.55; }
  .door-tel { margin-top: 8px; font-size: 15px; }
  .hero-toggle { height: 34px; padding: 0 11px; }
  .hero-stats-wrap { margin-top: -36px; }
  .hero-stats { padding: 22px 20px 20px; }
  .hero-stats .stats { grid-template-columns: 1fr; row-gap: 0; }
  .hero-stats .stat { display: grid; grid-template-columns: 112px minmax(0, 1fr); column-gap: 14px; padding: 14px 0; border-left: 0; border-top: 1px solid var(--line); }
  .hero-stats .stat:first-child { border-top: 0; padding-top: 2px; }
  .hero-stats .stat:last-child { padding-bottom: 0; }
  .hero-stats .stat-value { grid-row: 1 / span 2; margin: 0; align-self: start; }
  .hero-stats .stat-num { font-size: 34px; }
  .hero-stats .stat-value { flex-wrap: wrap; }
  .hero-stats .stat-unit { font-size: 15px; margin-left: 4px; }
  .hero-stats .stat-label { font-size: 15px; line-height: 1.45; }
  .hero-stats .stat-note { margin-top: 3px; }
  .home-practice { padding-top: 64px; }
  .pa-grid { grid-template-columns: 1fr; gap: 16px; }
  .who { padding: 20px; }
  .who-list { grid-template-columns: 1fr; }
  .who-list li + li { border-left: 0; border-top: 1px solid var(--line-2); }
  .who-list a { padding: 12px 34px 12px 0; }
  .team-card { display: flex; }
  .team-fig { aspect-ratio: 16 / 9; height: auto; }
  .team-body { padding: 22px 20px 20px; }
  .team-lead { font-size: 19px; }
  .people-grid, .people-grid.is-collapsed { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 12px; }
  .people-grid.is-collapsed .pcard:nth-child(n+7):not(.pcard--more) { display: none; } /* 휴대폰은 6명 + 화담 구성 카드 */
  .home-insights .ins-list .ins-row:nth-child(n+5) { display: none; } /* 질문 목록은 4개(나머지는 '법률 정보 전체 보기') */
  .pcard-name { font-size: 18px; flex-wrap: wrap; column-gap: 6px; }
  .pcard-focus { font-size: 14px; }
  .pcard-more-n .num { font-size: 42px; }
  .rec-tabs { margin-bottom: 32px; }
  .rec-tab { font-size: 16px; margin-right: 24px; height: 56px; }
  .rec-tab-n { display: none; }
  .rec-h { font-size: 20px; }
  .rec-big .num { font-size: 84px; }
  .rec-photos ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rec-photos li:nth-child(n+3) { display: none; }
  .rec-photos figure { height: 130px; }
  .tv { margin-top: 64px; padding-top: 36px; }
  .tv-body { gap: 24px; }
  .consult-phone-n { font-size: 32px; }
  .consult-card { padding: 26px 20px 22px; margin-inline: calc(var(--gutter) * -0.5); }
}

/* 2026-10-15 대표 "구성원 저렇게 나누지 말고 전체를 보여주는 것으로" — 거르기·접힘·큰 카드 구분 없이 전원 같은 크기 */
.people-grid--all { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 40px 20px; }
.people-grid--all .pcard { grid-column: auto !important; grid-row: auto !important; }
@media (max-width: 1279px) { .people-grid--all { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 767px) { .people-grid--all { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 14px; } }

/* ─────────────────────────────────────────────────────────────
   2026-10-15 추연종 변호사 의견 반영 — 구성원 한 화면에 한 명씩 · 토지 수용·보상 비중 키움
   ───────────────────────────────────────────────────────────── */

/* 첫 화면 입구: 토지 수용·보상 칸을 넓게 */
.hero-doors { grid-template-columns: 1.5fr repeat(3, minmax(0, 1fr)); }
.door--main .door-name { font-size: 21px; }
.door--main .door-tel { font-size: 18px; }
@media (max-width: 1023px) {
  .hero-doors { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hero-doors .door--main { grid-column: 1 / -1; padding-left: 0 !important; border-left: 0; }
  .hero-doors .door:nth-child(n+2) { border-top: 1px solid rgba(255, 255, 255, .16); }
  .hero-doors .door:nth-child(2) { border-left: 0; padding-left: 0; }
  .hero-doors .door:nth-child(3), .hero-doors .door:nth-child(4) { border-left: 1px solid rgba(255, 255, 255, .16); padding-left: 16px; }
}
@media (max-width: 767px) {
  .hero-doors .door:nth-child(n+2) .door-ask { display: none; }
  /* 하자·건설·집합건물 세 칸: 좁은 칸이라 전화기 그림 없이 번호만 작게, 한 줄로(11-06 대표 요청 — 전에는 번호를 숨겼음) */
  .hero-doors .door:nth-child(n+2) .door-tel { margin-top: auto; padding-top: 2px; font-size: clamp(11px, 3.4vw, 15px); letter-spacing: -0.02em; white-space: nowrap; }
  .hero-doors .door:nth-child(n+2) .door-tel .ic { display: none; }
  .hero-doors .door:nth-child(n+2) .door-link { padding-bottom: 4px; }
  .hero-doors .door:nth-child(n+2) .door-top { font-size: 14px; }
  .hero-doors .door:nth-child(3), .hero-doors .door:nth-child(4) { padding-left: 12px; }
}

/* 구성원: 한 화면에 한 명씩 */
.home-people { padding-top: 88px; padding-bottom: 96px; }
.home-people .sh { margin-bottom: 32px; }
.pro { --pro-gap: 72px; margin-top: 8px; }
.pro-stage { position: relative; }
.pro-track {
  display: grid; grid-auto-flow: column; grid-auto-columns: 100%;
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  scrollbar-width: none; outline-offset: 6px;
}
.pro-track::-webkit-scrollbar { display: none; }
.pro-slide {
  scroll-snap-align: start; scroll-snap-stop: always;
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--pro-gap); align-items: stretch;
  min-height: max(560px, min(calc(100svh - 230px), 760px)); /* 머리글과 함께 한 화면에 들어오게 */
}
.pro-photo { position: relative; overflow: hidden; border-radius: var(--r-card); background: var(--bg-soft-2); }
.pro-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; }
.pro-body { display: flex; flex-direction: column; justify-content: center; min-width: 0; padding: 24px 0; }
.pro-no { font-size: 14px; font-weight: 600; color: var(--ink-3); letter-spacing: .06em; }
.pro-no span { color: var(--gold-ink); font-weight: 700; }
.pro-fields { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.pro-fields span { padding: 5px 12px; font-size: 14px; font-weight: 600; color: var(--ink-2); border: 1px solid var(--line-2); border-radius: 999px; }
.pro-fields span:first-child { color: var(--white); background: var(--navy-900); border-color: var(--navy-900); }
.pro-name { display: flex; align-items: baseline; gap: 16px; margin-top: 22px; font-size: 76px; font-weight: 700; line-height: 1.05; letter-spacing: -0.045em; color: var(--ink); }
.pro-role { font-size: 24px; font-weight: 600; letter-spacing: -0.02em; color: var(--ink-2); }
.pro-en { margin-top: 12px; font-size: 15px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-ink); }
.pro-focus { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin-top: 36px; padding-top: 28px; border-top: 1px solid var(--line-2); font-size: 22px; font-weight: 600; line-height: 1.5; letter-spacing: -0.025em; color: var(--ink); }
.pro-focus-h { font-size: 14px; font-weight: 700; color: var(--ink-3); letter-spacing: .02em; }
.pro-reg { display: flex; align-items: center; gap: 8px; margin-top: 14px; font-size: 15px; font-weight: 600; color: var(--gold-ink); }
.pro-bio { display: grid; gap: 8px; margin-top: 26px; }
.pro-bio li { position: relative; padding-left: 16px; font-size: 16px; line-height: 1.6; color: var(--ink-2); }
.pro-bio li::before { content: ""; position: absolute; left: 0; top: .78em; width: 6px; height: 1px; background: var(--ink-3); }
.pro-go { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; margin-top: 36px; padding: 14px 22px; font-size: 16px; font-weight: 700; color: var(--white); background: var(--navy-900); border-radius: var(--r-btn); transition: background var(--t-fast); }
.pro-go:hover { background: var(--navy-800); }
.pro-go .ic { transition: transform var(--t-fast) var(--ease); }
.pro-go:hover .ic { transform: translateX(3px); }

/* 넘기기 단추는 사진 오른쪽 아래에 얹는다 — 머리글 오른쪽에 두면 긴 설명 글과 겹쳤다(11-02) */
.pro-ctrl { position: absolute; right: calc((100% - var(--pro-gap)) * 6 / 11 + var(--pro-gap) + 16px); bottom: 16px; display: flex; align-items: center; gap: 6px; padding: 5px; background: rgba(255, 255, 255, .94); border-radius: 999px; box-shadow: 0 4px 14px rgba(11, 18, 32, .18); }
html:not(.js) .pro-ctrl { display: none; }
.pro-btn { display: inline-grid; place-items: center; width: 46px; height: 46px; color: var(--ink); background: var(--white); border: 1px solid var(--line-2); border-radius: 50%; cursor: pointer; transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast); }
.pro-btn:hover:not(:disabled) { color: var(--white); background: var(--navy-900); border-color: var(--navy-900); }
.pro-btn:disabled { opacity: .35; cursor: default; }
.pro-btn--prev .ic { transform: scaleX(-1); }
.pro-count { min-width: 72px; text-align: center; font-size: 15px; color: var(--ink-3); }
.pro-count strong { font-size: 20px; color: var(--ink); }

.pro-index { display: flex; flex-wrap: wrap; gap: 6px 4px; margin-top: 32px; padding-top: 22px; border-top: 1px solid var(--line); }
.pro-index a { display: inline-flex; align-items: baseline; gap: 4px; padding: 6px 10px; font-size: 15px; font-weight: 600; color: var(--ink-3); border-radius: var(--r-btn); transition: color var(--t-fast), background var(--t-fast); }
.pro-index-r { font-size: 12px; font-weight: 500; }
.pro-index a:hover { color: var(--ink); background: var(--bg-soft); }
.pro-index a[aria-current="true"] { color: var(--white); background: var(--navy-900); }
.people-all-note { font-size: 14px; }

@media (max-width: 1279px) {
  .pro { --pro-gap: 48px; }
  .pro-name { font-size: 64px; }
}
@media (max-width: 1023px) {
  .pro-ctrl { position: static; justify-content: center; margin-top: 20px; padding: 0; background: none; box-shadow: none; }
  .pro-slide { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 36px; min-height: 0; }
  .pro-photo { aspect-ratio: 720 / 832; align-self: start; } /* 태블릿: 칸 높이에 맞춰 사진이 세로로 늘어나지 않게 */
  .pro-name { font-size: 52px; }
  .pro-focus { font-size: 19px; }
}
@media (max-width: 767px) {
  /* 휴대폰: 사진 크기를 사람마다 똑같이(약력 길이에 따라 사진 칸이 늘었다 줄었다 하던 것 — 10-15 대표 '모바일 인물 전환이 이상'),
     넘기기 단추는 사진 오른쪽 아래에 얹어 화면 안에서 바로 누르게 */
  .pro { container-type: inline-size; }
  .pro-slide { grid-template-columns: 1fr; grid-template-rows: auto 1fr; align-items: start; align-content: start; gap: 20px; }
  .pro-photo { aspect-ratio: 20 / 17; }
  .pro-photo img { object-position: 50% 12%; }
  .pro-en { display: none; }
  .pro-fields { gap: 6px; }
  .pro-fields span { padding: 4px 9px; font-size: 13px; } /* 분야 4개도 한 줄에 */
  .pro-bio li:nth-child(n+4) { display: none; }
  .pro-ctrl { position: absolute; top: calc(85cqw - 58px); right: 10px; bottom: auto; margin: 0; gap: 4px; padding: 4px; background: rgba(255, 255, 255, .94); border-radius: 999px; box-shadow: 0 4px 14px rgba(11, 18, 32, .18); }
  .pro-btn { width: 40px; height: 40px; border-color: transparent; }
  .pro-count { min-width: 50px; font-size: 13px; }
  .pro-count strong { font-size: 16px; }
  .pro-body { padding: 0; justify-content: flex-start; }
  .pro-fields { margin-top: 14px; }
  .pro-name { margin-top: 14px; font-size: 44px; gap: 10px; }
  .pro-role { font-size: 19px; }
  .pro-focus { margin-top: 22px; padding-top: 20px; font-size: 18px; }
  .pro-bio { margin-top: 18px; }
  .pro-bio li { font-size: 15px; }
  .pro-go { margin-top: 24px; }
  .pro-index { display: none; }
}

/* 업무분야: 토지 수용·보상 큰 판 + 나머지 세 분야 */
.paf {
  display: grid; grid-template-columns: minmax(0, 11fr) minmax(0, 12fr); overflow: hidden;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-card);
}
.paf-fig { position: relative; min-height: 100%; background: var(--navy-900); }
.paf-fig img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.paf-fig--fade img { opacity: 0; animation: paf-fade 18s infinite; }
.paf-fig--fade img:nth-of-type(1) { animation-delay: -1.08s; }
.paf-fig--fade img:nth-of-type(2) { animation-delay: 4.92s; }
.paf-fig--fade img:nth-of-type(3) { animation-delay: 10.92s; }
@keyframes paf-fade { 0% { opacity: 0; } 6% { opacity: 1; } 33% { opacity: 1; } 39% { opacity: 0; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .paf-fig--fade img { animation: none; } .paf-fig--fade img:not(:first-of-type) { display: none; } }
.paf-fig::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(11, 18, 32, .82) 0%, rgba(11, 18, 32, .2) 46%, rgba(11, 18, 32, 0) 70%); }
.paf-stat { position: absolute; left: 36px; right: 36px; bottom: 32px; z-index: 1; display: grid; gap: 6px; color: #fff; }
.paf-stat-n .num { font-size: 96px; font-weight: 700; line-height: 1; letter-spacing: -0.04em; }
.paf-stat-u { margin-left: 6px; font-size: 30px; font-weight: 700; }
.paf-stat-l { font-size: 16px; line-height: 1.5; color: rgba(255, 255, 255, .88); }
.paf-body { padding: 52px 56px 40px; }
.paf-kicker { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; color: var(--f-comp); letter-spacing: .02em; }
.paf-name { margin-top: 14px; font-size: 44px; line-height: 1.15; letter-spacing: -0.04em; }
.paf-name a:hover { color: var(--f-comp); }
.paf-ask { margin-top: 18px; font-size: 19px; font-weight: 600; color: var(--ink); letter-spacing: -0.02em; }
.paf-lead { margin-top: 12px; font-size: 16.5px; line-height: 1.78; color: var(--ink-2); }
.paf-steps { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }
.paf-steps li { position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px 8px 10px; font-size: 15px; font-weight: 600; color: var(--ink); background: var(--bg-soft); border-radius: var(--r-btn); }
.paf-steps .num { display: inline-grid; place-items: center; width: 22px; height: 22px; font-size: 12px; font-weight: 700; color: #fff; background: var(--f-comp); border-radius: 50%; }
.paf-who { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 20px; margin-top: 24px; }
.paf-who li { display: flex; align-items: center; gap: 8px; font-size: 15.5px; color: var(--ink-2); }
.paf-who .ic { color: var(--f-comp); }
.paf-guides { margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--line); }
.paf-guides-h { font-size: 14px; font-weight: 700; color: var(--ink-3); }
.paf-guides ul { margin-top: 6px; }
.paf-guides a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 0; font-size: 15.5px; font-weight: 600; color: var(--ink); border-bottom: 1px dashed var(--line); }
.paf-guides a:hover { color: var(--f-comp); }
.paf-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; margin-top: 28px; }
.paf-tel { display: inline-flex; align-items: center; gap: 10px; padding: 12px 20px; color: #fff; background: var(--f-comp); border-radius: var(--r-btn); font-size: 20px; font-weight: 700; }
.paf-tel:hover { background: var(--navy-900); }
.paf-tel-l { margin-right: 10px; font-size: 14px; font-weight: 600; opacity: .9; }
.paf-note { margin-top: 18px; }
.pa-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 20px; }
.who-list { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 14px; }
.who-list li:nth-child(4n+1) { border-left: 0; }
@media (max-width: 1023px) {
  .paf { grid-template-columns: 1fr; }
  .paf-fig { min-height: 320px; }
  .paf-body { padding: 36px 32px 32px; }
  .pa-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .who-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .who-list li:nth-child(odd) { border-left: 0; }
  .who-list li:nth-child(even) { border-left: 1px solid var(--line-2); }
}
@media (max-width: 767px) {
  .paf-fig { min-height: 260px; }
  .paf-stat { left: 22px; right: 22px; bottom: 22px; }
  .paf-stat-n .num { font-size: 68px; }
  .paf-body { padding: 28px 22px 26px; }
  .paf-name { font-size: 34px; }
  .paf-who { grid-template-columns: 1fr; }
  .pa-grid--3 { grid-template-columns: 1fr; }
  .who-list { grid-template-columns: 1fr; }
  .who-list li:nth-child(even) { border-left: 0; }
  .paf-tel { width: 100%; justify-content: center; }
}

/* ── 2026-10-29 변호사 요청 6·8번: 수행 실적을 위아래로(토지 수용·보상 → 아파트·집합건물 하자), 하자 쪽은 권역 지도 ── */
.rec--stack .rec-panel { animation: none; }
.rec--stack .rec-panel + .rec-panel { margin-top: 72px; padding-top: 64px; border-top: 1px solid var(--line-2); }
.drmap { margin: 0; }
.drmap svg { display: block; width: 100%; max-width: 680px; height: auto; margin: 0 auto; overflow: visible; }
.drmap-land path { fill: #E6E3DE; stroke: #fff; stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.drmap-halo { fill: var(--f-build); fill-opacity: .16; stroke: var(--f-build); stroke-opacity: .35; stroke-width: 1; vector-effect: non-scaling-stroke; }
.drmap-core { fill: var(--f-build); fill-opacity: .3; }
.drmap-pt { fill: var(--f-build); }
.drmap-line { stroke: var(--f-build); stroke-width: 1.4; vector-effect: non-scaling-stroke; }
.drmap-pill { fill: #fff; stroke: var(--f-build); stroke-width: 1.4; vector-effect: non-scaling-stroke; }
.drmap-name { font-size: 28px; font-weight: 700; fill: var(--ink); letter-spacing: -0.02em; }
.drmap-n { font-size: 36px; font-weight: 700; fill: var(--f-build); letter-spacing: -0.02em; }
.drmap-parts { font-size: 22px; fill: var(--ink-3); paint-order: stroke; stroke: #fff; stroke-width: 6px; stroke-linejoin: round; }
@media (max-width: 767px) {
  .rec--stack .rec-panel + .rec-panel { margin-top: 48px; padding-top: 40px; }
  .drmap-name { font-size: 31px; }
  .drmap-n { font-size: 42px; }
  .drmap-parts { font-size: 26px; }
}
/* 첫 화면 성공사례·언론보도(10-30) — 법률 가이드와 화담TV 사이 */
.hnews { margin-top: 72px; }
.hnews .news-list { margin-top: 20px; }
@media (max-width: 767px) { .hnews { margin-top: 48px; } }

/* 첫 화면 기고·칼럼(11-02) — 글자 목록 세 줄 */
.hcols { margin-top: 48px; }
.hcols-list { margin-top: 12px; border-top: 1px solid var(--line-2); }
.hcols-list li { border-bottom: 1px solid var(--line); }
.hcols-list a { display: grid; grid-template-columns: 170px minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 16px 2px; }
.hcols-meta { font-size: 14px; color: var(--ink-3); }
.hcols-t { font-size: 17px; font-weight: 600; line-height: 1.45; letter-spacing: -0.02em; color: var(--ink); }
.hcols-list a:hover .hcols-t { color: var(--gold-ink); }
@media (max-width: 767px) {
  .hcols-list a { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; }
  .hcols-meta { grid-column: 1 / -1; }
  .hcols-t { font-size: 16px; }
}

/* 구성원 구간 소개 문단 — 양쪽 맞춤(11-03 대표) */
#people-title ~ .sh-side .sh-desc, .sh:has(#people-title) .sh-desc { text-align: justify; }

/* 큰 숫자 단위('곳 사업지역') 안에 묶인 각주 번호 */
.rec-big-u sup.fn { margin-left: 4px; font-size: 13px; vertical-align: 1em; }


/* ── 40-about.css ── */
/* ─────────────────────────────────────────────────────────────
   40-about — 화담 소개(/about/)·AI가 읽는 화담(/ai/)  (site/pages/about.mjs)
   접두사: ab- = 화담 소개, aip- = AI가 읽는 화담. 색·모서리·글자는 00-tokens 의 var(--…)만 쓴다.
   ───────────────────────────────────────────────────────────── */

/* ═══ 화담 소개 ═══ */

/* 머리 사진 — 사진 배정표는 site/pages/insights.mjs 머리 주석.
   소개: film/seocho-street(서초 법조타운 거리). 건물 위쪽 교회 간판이 화면 밖으로 가게 아래쪽 띠를 쓴다.
   AI: film/office-team(모니터로 자료를 읽는 모습) — 인물이 왼쪽 글자 아래로 숨지 않게 */
.ab-hero .phero-bg img { object-position: 20% 62%; }
.aip-hero .phero-bg img { object-position: 30% 58%; }

/* 01 화담은 어떤 법무법인인가요 */
.ab-intro-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 80px; align-items: start; }
.ab-intro-head { position: sticky; top: calc(var(--header-h) + 32px); }
.ab-intro .sh { margin-bottom: 0; }
.ab-intro-slogan { display: grid; gap: 2px; margin-top: 36px; padding-left: 18px; border-left: 2px solid var(--gold); font-size: 17px; line-height: 1.6; color: var(--ink-2); }
.ab-intro-slogan span:first-child { font-weight: 700; color: var(--ink); }
.ab-toc { margin-top: 44px; padding-top: 20px; border-top: 1px solid var(--line); }
.ab-toc li + li { border-top: 1px solid var(--line); }
.ab-toc a { display: flex; align-items: center; gap: 14px; padding: 11px 0; font-size: 15px; font-weight: 600; color: var(--ink-2); transition: color var(--t-fast); }
.ab-toc .num { font-size: 13px; font-weight: 700; color: var(--gold-ink); }
/* 페이지 안 이동 링크 — 펼침(아코디언)으로 읽히는 꺾쇠는 두지 않고 번호와 제목만. 올리면 글자에 밑줄 */
.ab-toc a:hover { color: var(--ink); }
.ab-toc a:hover .ab-toc-t { text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 4px; }
.ab-intro-lead { font-size: 21px; font-weight: 500; line-height: 1.72; letter-spacing: -0.02em; color: var(--ink); }
.ab-intro-p { margin-top: 22px; font-size: 17px; line-height: 1.88; color: var(--ink-2); }
.ab-intro-p strong { color: var(--ink); }
.ab-intro-p--fact { margin-top: 28px; padding: 20px 24px; background: var(--bg-soft); border-radius: var(--r-card-sm); font-size: 16px; white-space: pre-line; --gold-ink: var(--gold-ink-soft); }
.ab-stats { margin-top: 88px; padding-top: 36px; border-top: 1px solid var(--line-strong); }
.ab-stats-h { margin-bottom: 30px; font-size: 14px; font-weight: 700; color: var(--ink); letter-spacing: .02em; }
.ab-stats-notes { margin-top: 30px; }
.ab-stats .stat-value, .aip-sum .stat-value { flex-wrap: nowrap; white-space: nowrap; }

/* 02 이름과 CI의 뜻 */
.ab-name-photo { position: relative; aspect-ratio: 1280 / 450; margin-bottom: 20px; overflow: hidden; border-radius: var(--r-card); background: var(--bg-soft-2); }
.ab-name-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 2%; filter: brightness(1.08); }
/* 사진은 밝게 두고, 글이 놓이는 왼쪽 아래만 어둡게 */
.ab-name-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(11, 18, 32, .86), rgba(11, 18, 32, .72) 36%, rgba(11, 18, 32, 0) 62%); -webkit-mask-image: linear-gradient(0deg, #000 26%, transparent 66%); mask-image: linear-gradient(0deg, #000 26%, transparent 66%); }
.ab-name-photo figcaption { position: absolute; left: 40px; right: 40px; bottom: 36px; z-index: 1; padding-left: 22px; border-left: 3px solid var(--gold); font-size: 27px; font-weight: 600; line-height: 1.5; color: #fff; letter-spacing: -0.025em; white-space: pre-line; }
.ab-name-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.ab-card { padding: 34px 40px 32px; background: var(--white); border: 1px solid var(--line); border-radius: var(--r-card); }
.ab-card-k { font-size: 13px; font-weight: 700; color: var(--gold-ink); letter-spacing: .06em; }
.ab-card-h { margin-top: 8px; font-size: 26px; letter-spacing: -0.03em; }
.ab-hanja { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 20px; }
.ab-hanja-i { display: flex; align-items: center; gap: 16px; padding: 14px 18px; border: 1px solid var(--line); border-radius: var(--r-card-sm); }
.ab-hanja dt { flex: none; font-size: 38px; font-weight: 500; line-height: 1; color: var(--ink); }
.ab-hanja dd { display: grid; gap: 2px; min-width: 0; }
.ab-hanja dd strong { font-size: 15px; color: var(--ink); }
.ab-hanja dd span { font-size: 14px; line-height: 1.5; color: var(--ink-3); }
.ab-card-d { margin-top: 18px; font-size: 16px; line-height: 1.82; color: var(--ink-2); }
.ab-ci-head { display: flex; align-items: center; gap: 14px; margin-top: 10px; }
.ab-ci-head .ab-card-h { margin-top: 0; }
.ab-ci-symbol { flex: none; width: 40px; height: 48px; }
.ab-ci-key { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 24px; margin-top: 18px; }
.ab-ci-key li { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 1.5; color: var(--ink-3); }
.ab-ci-key strong { display: block; color: var(--ink); }
.ab-ci-sw { flex: none; width: 12px; height: 12px; margin-top: 4px; border-radius: 2px; }
.ab-ci-sw--gold { background: var(--gold); }
.ab-ci-sw--ink { background: var(--ink); }


/* 03 표어에 담은 세 가지 (남색) */
.ab-values { overflow: hidden; }
.ab-values-bg {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(900px 420px at 90% -10%, rgba(43, 74, 139, .42), rgba(43, 74, 139, 0) 70%),
    radial-gradient(640px 320px at -4% 110%, rgba(175, 149, 79, .12), rgba(175, 149, 79, 0) 70%);
}
.ab-values .container { position: relative; }
.ab-values-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line-dark-2); }
.ab-value { padding: 40px 40px 0; border-left: 1px solid var(--line-dark); }
.ab-value:first-child { padding-left: 0; border-left: 0; }
.ab-value:last-child { padding-right: 0; }
.ab-value-no { font-size: 15px; font-weight: 700; color: var(--gold-lt); letter-spacing: .04em; }
.ab-value-h { margin-top: 16px; font-size: 26px; letter-spacing: -0.03em; color: #fff; }
.ab-value-d { margin-top: 14px; font-size: 16px; line-height: 1.86; color: rgba(255, 255, 255, .92); white-space: pre-line; }

/* 04 함께 보는 사람들 */
.ab-team-list { border-top: 1px solid var(--line-strong); }
.ab-team-row { display: grid; grid-template-columns: 176px minmax(0, 1fr) minmax(0, 1.14fr); gap: 36px; padding: 40px 0; border-bottom: 1px solid var(--line); }
.ab-team-role { display: flex; flex-direction: column; align-items: flex-start; align-self: start; gap: 14px; padding-bottom: 10px; border-right: 1px solid var(--line-2); }
.ab-team-ic { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border: 1px solid var(--line-2); border-radius: var(--r-card-sm); color: var(--gold-ink); }
.ab-team-h { font-size: 26px; letter-spacing: -0.03em; }
.ab-team-h::after { content: ""; display: block; width: 38px; height: 2px; margin-top: 14px; background: var(--gold); }
.ab-team-no { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 700; color: var(--gold-ink); letter-spacing: .04em; }
.ab-team-lead { margin-bottom: 14px; font-size: 20px; font-weight: 700; line-height: 1.5; letter-spacing: -0.025em; color: var(--ink); white-space: pre-line; }
.ab-team-d { font-size: 16px; line-height: 1.8; color: var(--ink-2); }
.ab-team-who-h { margin-bottom: 10px; font-size: 15px; font-weight: 700; color: var(--ink); letter-spacing: -0.01em; }
.ab-team-who-h .num { color: var(--ink); }
.ab-names { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 24px; border-top: 1px solid var(--line); }
.ab-names--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ab-names--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ab-names a { display: grid; gap: 1px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.ab-names-n { font-size: 15.5px; font-weight: 700; color: var(--ink); letter-spacing: -0.01em; transition: color var(--t-fast); }
.ab-names-f { font-size: 13px; line-height: 1.5; color: var(--ink-3); }
.ab-names a:hover .ab-names-n { color: var(--gold-ink); }
.ab-equip { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; border-top: 1px solid var(--line); }
.ab-equip li { display: flex; align-items: center; gap: 8px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 14px; font-weight: 600; color: var(--ink-2); line-height: 1.45; }
.ab-equip li::before { content: ""; flex: none; width: 5px; height: 5px; border-radius: 50%; background: var(--gold); }
.ab-team-link { margin-top: 18px; }
/* 02·04 머리글: 설명 왼쪽 세로줄(04는 금색), 설명 글자는 진하게 */
@media (min-width: 1280px) { .ab-name .sh--split, .ab-team .sh--split, .ab-values .sh--split { grid-template-columns: minmax(0, 1fr) minmax(0, 640px); } }
.ab-name .sh-side, .ab-team .sh-side { padding-left: 40px; border-left: 1px solid var(--line-2); }
.ab-team .sh-side { border-left-color: var(--gold); }
.ab-name .sh-desc, .ab-team .sh-desc { color: var(--ink-2); }
.ab-name .sh-desc, .ab-team .sh-desc { white-space: pre-line; }
.ab-values .sh-desc { color: rgba(255, 255, 255, .92); }
.ab-members {
  display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: center; gap: 20px 36px;
  margin-top: 40px; padding: 28px 36px; background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--r-card);
  --gold-ink: var(--gold-ink-soft);
}
.ab-members-k { font-size: 14px; font-weight: 700; color: var(--gold-ink); }
.ab-members-n { display: flex; align-items: baseline; color: var(--ink); }
.ab-members-n .num { font-size: 52px; font-weight: 700; line-height: 1; letter-spacing: -0.04em; }
.ab-members-u { margin-left: 4px; font-size: 19px; font-weight: 700; color: var(--gold-ink); }
.ab-members-d { font-size: 16px; line-height: 1.7; color: var(--ink-2); }
.ab-team-notes { margin-top: 18px; }

/* 05 연혁 — 왼쪽 '화담의 오늘'(지금의 사실), 오른쪽 연혁 한 줄씩(작은 글자, 큰 연도 숫자·가로 타임라인 없음) */
.ab-hist { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 72px; align-items: start; }
.ab-today { padding: 28px 32px 24px; background: var(--white); border: 1px solid var(--line); border-radius: var(--r-card); }
.ab-today-h, .ab-hist-h { font-size: 14px; font-weight: 700; color: var(--ink); letter-spacing: .02em; }
.ab-today-list { display: grid; margin-top: 6px; }
.ab-today-i { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 2px 16px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.ab-today-i:last-child { padding-bottom: 2px; border-bottom: 0; }
.ab-today-i dt { font-size: 15px; font-weight: 600; color: var(--ink-2); }
.ab-today-v { font-size: 15px; font-weight: 700; color: var(--gold-ink); white-space: nowrap; }
.ab-today-v .num { margin-right: 2px; font-size: 30px; letter-spacing: -0.03em; color: var(--ink); line-height: 1.1; }
.ab-today-note { grid-column: 1 / -1; font-size: 13px; line-height: 1.55; color: var(--ink-3); }
.ab-hist-main { --gold-ink: var(--gold-ink-soft); }
.ab-hist-h { padding-bottom: 14px; border-bottom: 1px solid var(--ink); }
.ab-hist-list li { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; align-items: baseline; gap: 4px 20px; padding: 16px 0; border-bottom: 1px solid var(--line-2); }
.ab-hist-when { font-size: 15px; font-weight: 700; color: var(--gold-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ab-hist-what { font-size: 16px; line-height: 1.6; color: var(--ink); }
.ab-hist-link .more { padding-block: 0; font-size: 14px; }

/* 07 사무소 — 이 페이지는 머리 사진과 겹치지 않게 본사 사진 없이(officeCards photo:false). 키 큰 본사 칸은 글을 가운데로 */
.ab-offices .office--hq .office-body { justify-content: center; padding: 32px 36px; }
.ab-offices .office--hq .office-name { font-size: 22px; }
.ab-offices .office--hq .office-map { margin-top: 10px; }

/* 06 자주 묻는 질문 */
.ab-faq-all { margin-top: 32px; text-align: center; }

/* ═══ AI가 읽는 화담 ═══ */
.aip-mono { font-family: var(--font-mono); letter-spacing: 0; }

/* 01 비교 */
.aip-sum { margin-bottom: 64px; padding: 34px 40px 30px; border: 1px solid var(--line); border-radius: var(--r-card); }
.aip-chart { margin: 0; }
.aip-chart-cap { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 10px 24px; padding-bottom: 16px; border-bottom: 1px solid var(--line-strong); }
.aip-chart-t { font-size: 19px; font-weight: 700; color: var(--ink); letter-spacing: -0.02em; }
.aip-chart-unit { margin-left: 10px; font-size: 13px; font-weight: 600; color: var(--ink-3); letter-spacing: 0; }
.aip-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 20px; font-size: 13px; color: var(--ink-3); }
.aip-legend > span { display: inline-flex; align-items: center; gap: 8px; }
.aip-key { display: inline-block; width: 16px; height: 8px; border-radius: 0 3px 3px 0; }
.aip-key--old, .aip-bar-fill--old { background: color-mix(in srgb, var(--ink-3) 45%, var(--white)); }
.aip-key--new, .aip-bar-fill--new { background: var(--navy-900); }
.aip-cmp { width: 100%; }
.aip-cmp thead th { padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 13px; font-weight: 600; color: var(--ink-3); text-align: left; }
.aip-cmp thead th:last-child { padding-left: 32px; }
.aip-cmp tbody { border-bottom: 1px solid var(--line); }
.aip-cmp-page { width: 230px; padding: 22px 24px 22px 0; vertical-align: top; text-align: left; font-size: 17px; font-weight: 700; color: var(--ink); letter-spacing: -0.02em; }
.aip-cmp-src { display: block; margin-top: 4px; font-size: 13px; font-weight: 400; line-height: 1.5; color: var(--ink-3); letter-spacing: 0; }
.aip-cmp td { padding: 8px 0; vertical-align: middle; }
.aip-cmp-old td { padding-top: 24px; }
.aip-cmp-new td { padding-bottom: 24px; }
.aip-cmp-who { width: 48px; font-size: 14px; font-weight: 600; color: var(--ink-3); }
.aip-cmp-new .aip-cmp-who { color: var(--ink); }
.aip-bar { position: relative; display: block; height: 14px; margin-right: 104px; }
.aip-bar-fill { position: absolute; left: 0; top: 0; bottom: 0; width: var(--w); min-width: 3px; border-radius: 0 4px 4px 0; transition: width .9s var(--ease); }
.aip-bar-n { position: absolute; top: 50%; left: calc(var(--w) + 12px); transform: translateY(-50%); font-size: 15px; font-weight: 700; color: var(--ink); white-space: nowrap; }
.aip-cmp-note { width: 360px; padding-left: 32px !important; font-size: 14px; line-height: 1.6; color: var(--ink-3); }
.aip-cmp-seen { display: block; margin-top: 3px; font-size: 13px; color: var(--ink-2); }
.aip-cmp-md { display: block; margin-top: 3px; font-size: 13px; color: var(--ink-2); }
html.js .aip-chart.rv:not(.is-in) .aip-bar-fill { width: 0; }
@media (prefers-reduced-motion: reduce) { .aip-bar-fill { transition: none; } }

.aip-vs { display: grid; grid-template-columns: minmax(0, 1fr) 56px minmax(0, 1.4fr); align-items: stretch; margin-top: 64px; }
.aip-vs-box { display: flex; flex-direction: column; min-width: 0; margin: 0; overflow: hidden; background: var(--white); border: 1px solid var(--line); border-radius: var(--r-card); }
.aip-vs-box figcaption { display: grid; gap: 2px; padding: 14px 22px; border-bottom: 1px solid var(--line); background: var(--bg-soft); --gold-ink: var(--gold-ink-soft); }
.aip-vs-who { font-size: 13px; font-weight: 700; color: var(--gold-ink); letter-spacing: .02em; }
.aip-vs-what { font-size: 14px; line-height: 1.5; color: var(--ink-2); overflow-wrap: anywhere; }
.aip-vs-old { display: flex; flex: 1; flex-direction: column; align-items: center; justify-content: center; gap: 10px; min-height: 240px; padding: 36px 28px; text-align: center; }
.aip-vs-seen { font-size: 22px; font-weight: 700; color: var(--ink); letter-spacing: -0.02em; }
.aip-vs-meta { max-width: 280px; font-size: 14px; line-height: 1.6; color: var(--ink-3); }
.aip-vs-arrow { display: flex; align-items: center; justify-content: center; color: var(--gold-ink); }
.aip-vs-md code, .aip-code code { font: inherit; }
.aip-vs-md { flex: 1; margin: 0; padding: 18px 22px; font-family: var(--font); font-size: 14px; line-height: 1.75; color: var(--ink-2); white-space: pre-wrap; overflow-wrap: anywhere; }
.aip-vs-more { padding: 12px 22px 15px; border-top: 1px solid var(--line); font-size: 14px; color: var(--ink-3); }
.aip-vs-more strong { color: var(--ink); }

.aip-cmp-foot { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: 24px 48px; align-items: start; margin-top: 40px; }
.aip-issues { border: 1px solid var(--line); border-radius: var(--r-card-sm); background: var(--white); }
.aip-issues summary, .aip-more summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; font-size: 15px; font-weight: 600; color: var(--ink); }
.aip-issues summary .ic, .aip-more summary .ic { flex: none; color: var(--ink-3); transition: transform var(--t) var(--ease); }
.aip-issues[open] summary .ic, .aip-more[open] summary .ic { transform: rotate(45deg); }
.aip-issues ul { display: grid; gap: 6px; padding: 0 18px 16px 18px; }
.aip-issues li { position: relative; padding-left: 14px; font-size: 14px; line-height: 1.65; color: var(--ink-2); }
.aip-issues li::before { content: ""; position: absolute; left: 0; top: .72em; width: 5px; height: 5px; border-radius: 50%; background: var(--ink-3); }

/* 02 AI가 받아 가는 것 */
.aip-block { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 56px; padding: 56px 0; border-top: 1px solid var(--line-2); }
.aip-recv .sh + .aip-block { border-top-color: var(--line-strong); }
.aip-block:last-child { padding-bottom: 0; }
.aip-block-side { position: sticky; top: calc(var(--header-h) + 28px); align-self: start; }
.aip-block-no { margin-bottom: 12px; font-size: 15px; font-weight: 700; color: var(--gold-ink); letter-spacing: .04em; }
.aip-block-h { font-size: 24px; letter-spacing: -0.03em; }
.aip-block-d { margin-top: 14px; font-size: 15.5px; line-height: 1.8; color: var(--ink-2); }
.aip-block-d--sm { font-size: 14px; color: var(--ink-3); }
.aip-block-d--sm:empty { display: none; }
.aip-block-d--sm .link { overflow-wrap: anywhere; }
.aip-block-main { min-width: 0; }
.aip-inline { padding: 1px 5px; border: 1px solid var(--line); border-radius: 3px; background: var(--white); font-family: var(--font-mono); font-size: 13px; color: var(--ink); overflow-wrap: anywhere; }
.aip-files { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.aip-file { display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 14px; border: 1px solid var(--line-2); border-radius: var(--r-btn); background: var(--white); font-family: var(--font-mono); font-size: 14px; color: var(--ink); transition: border-color var(--t-fast); }
.aip-file .ic { color: var(--gold-ink); }
.aip-file:hover { border-color: var(--ink); }

.aip-code { min-width: 0; margin: 0; overflow: hidden; background: var(--white); border: 1px solid var(--line); border-radius: var(--r-card); }
.aip-code figcaption { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 12px 18px; border-bottom: 1px solid var(--line); background: var(--bg-soft); font-size: 13px; color: var(--ink); }
.aip-code-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); }
.aip-code-note { margin-left: auto; color: var(--ink-3); }
.aip-code pre { margin: 0; padding: 14px 0 18px; counter-reset: ln; font-family: var(--font); font-size: 14px; line-height: 1.75; color: var(--ink-2); white-space: pre-wrap; overflow-wrap: anywhere; }
.aip-ln { position: relative; display: block; padding: 0 22px 0 58px; counter-increment: ln; }
.aip-ln::before { content: counter(ln); position: absolute; left: 0; width: 40px; text-align: right; font-family: var(--font-mono); font-size: 13px; color: var(--ink-3); -webkit-user-select: none; user-select: none; }
.aip-ln--h { font-weight: 700; color: var(--ink); }

.aip-tbl { overflow: hidden; background: var(--white); border: 1px solid var(--line); border-radius: var(--r-card); }
.aip-tbl table { width: 100%; }
.aip-tbl th, .aip-tbl td { padding: 12px 18px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; font-size: 14.5px; line-height: 1.55; }
.aip-tbl tbody tr:last-child > * { border-bottom: 0; }
.aip-tbl thead th { padding-block: 11px; background: var(--bg-soft); font-size: 13px; font-weight: 600; color: var(--ink-3); }
.aip-tbl thead th:last-child, .aip-tbl .aip-md-n, .aip-tbl .aip-ld-n { text-align: right; white-space: nowrap; }
.aip-tbl tbody th { font-weight: 600; color: var(--ink); }
.aip-md-kind { display: block; font-size: 13px; font-weight: 500; color: var(--ink-3); }
.aip-md-path a { font-family: var(--font-mono); font-size: 13px; color: var(--ink-2); overflow-wrap: anywhere; word-break: break-all; }
.aip-md-path a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.aip-md-n, .aip-ld-n { font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.aip-md-self { font-size: 13px; font-weight: 600; color: var(--ink-3); }
.aip-more { margin-top: 14px; background: var(--white); border: 1px solid var(--line); border-radius: var(--r-card); }
.aip-more-n { margin-left: 10px; font-size: 13px; font-weight: 500; color: var(--ink-3); }
.aip-more .aip-tbl { border: 0; border-top: 1px solid var(--line); border-radius: 0 0 var(--r-card) var(--r-card); }
.aip-ld-t { display: block; font-size: 14px; font-weight: 700; color: var(--ink); }
.aip-ld-ko { display: block; margin-top: 2px; font-size: 13px; font-weight: 500; color: var(--ink-3); }
.aip-ld th[scope="row"] { width: 200px; }
.aip-ld-what { color: var(--ink-2); }
.aip-ld-where { width: 190px; font-size: 13.5px !important; color: var(--ink-2); }

.aip-bots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.aip-bot-g--all { grid-column: 1 / -1; }
.aip-bot-g--all .aip-bot-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
.aip-bot-g--all .aip-bot-list li:last-child { border-bottom: 0; }
.aip-bot-g--all .aip-bot-list li { border-bottom: 0; }
.aip-bot-g { padding: 22px 24px 14px; background: var(--white); border: 1px solid var(--line); border-radius: var(--r-card); }
.aip-bot-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--line-strong); font-size: 16px; font-weight: 700; color: var(--ink); letter-spacing: -0.02em; }
.aip-bot-allow { flex: none; font-size: 13px; font-weight: 600; color: var(--gold-ink); letter-spacing: 0; }
.aip-bot-list li { display: grid; gap: 1px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.aip-bot-list li:last-child { border-bottom: 0; }
.aip-bot-list .aip-mono { font-size: 14px; color: var(--ink); overflow-wrap: anywhere; }
.aip-bot-site .aip-bot-who { color: var(--ink-2); overflow-wrap: anywhere; }
.aip-bot-who { font-size: 13px; line-height: 1.5; color: var(--ink-3); }

/* 03 원칙 */
.aip-rule-card { max-width: 900px; margin: 0 auto; padding: 56px 56px 52px; text-align: center; background: var(--white); border: 1px solid var(--line); border-top: 3px solid var(--navy-900); border-radius: var(--r-card); }
.aip-rule-k { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--gold-ink); letter-spacing: .04em; }
.aip-rule-h { margin-top: 18px; font-size: var(--fs-h2); line-height: 1.3; letter-spacing: -0.035em; text-wrap: balance; }
.aip-rule-h span { display: block; margin-top: 8px; font-weight: 400; color: var(--ink-2); }
.aip-rule-d { max-width: 640px; margin: 22px auto 0; font-size: 16.5px; line-height: 1.8; color: var(--ink-2); }
.aip-rule-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 56px; }
.aip-rule-i { min-width: 0; padding: 0 28px; border-left: 1px solid var(--line); }
.aip-rule-i:first-child { padding-left: 0; border-left: 0; }
.aip-rule-i:last-child { padding-right: 0; }
.aip-rule-i .ic { color: var(--gold-ink); }
.aip-rule-ih { margin-top: 14px; font-size: 18px; letter-spacing: -0.02em; }
.aip-rule-id { margin-top: 8px; font-size: 15px; line-height: 1.75; color: var(--ink-2); }

/* ═══ 반응형 ═══ */
@media (max-width: 1279px) {
  .ab-intro-grid { gap: 56px; }
  .ab-team-row { grid-template-columns: 150px minmax(0, 1fr) minmax(0, 1.1fr); gap: 28px; }
  .ab-names--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .aip-block { grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 40px; }
  .aip-cmp-note { width: 300px; }
  .aip-rule-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 0; }
  .aip-rule-i:nth-child(odd) { padding-left: 0; border-left: 0; }
  .aip-rule-i:nth-child(even) { padding-right: 0; }
}

@media (max-width: 1023px) {
  .ab-intro-grid { grid-template-columns: 1fr; gap: 32px; }
  .ab-intro-head { position: static; }
  .ab-intro-slogan { margin-top: 24px; }
  .ab-toc { display: none; }
  .ab-stats { margin-top: 64px; }
  .ab-name-cards { grid-template-columns: 1fr; }
  .ab-name-photo { aspect-ratio: 16 / 9; }
  .ab-name-photo figcaption { font-size: 22px; }
  .ab-name .sh-side, .ab-team .sh-side { padding-left: 18px; }
  .ab-values-list { grid-template-columns: 1fr; }
  .ab-value, .ab-value:first-child { padding: 32px 0; border-left: 0; border-bottom: 1px solid var(--line-dark); }
  .ab-value:last-child { padding-bottom: 0; border-bottom: 0; }
  .ab-team-row { grid-template-columns: 1fr; gap: 18px; padding: 32px 0; }
  .ab-team-role { flex-direction: row; align-items: center; padding-bottom: 0; border-right: 0; }
  .ab-team-who { margin-top: 6px; }
  .ab-members { grid-template-columns: auto minmax(0, 1fr); }
  .ab-members-d { grid-column: 1 / -1; }
  .ab-members-more { grid-column: 1 / -1; }
  .ab-hist { grid-template-columns: 1fr; gap: 40px; }

  .aip-block { grid-template-columns: 1fr; gap: 28px; padding: 44px 0; }
  .aip-block-side { position: static; }
  .aip-vs { grid-template-columns: 1fr; }
  .aip-vs-arrow { height: 48px; transform: rotate(90deg); }
  .aip-vs-old { min-height: 180px; }
  .aip-cmp-foot { grid-template-columns: 1fr; }
  .aip-cmp-note { width: 260px; }
}

@media (max-width: 767px) {
  /* 좁은 화면에서는 사진이 세로로 다 들어와 건물 위쪽 교회 간판이 보이므로, 조금 키워 아래쪽(시계탑·거리)만 남긴다 */
  .ab-hero .phero-bg img { transform: scale(1.4); transform-origin: 20% 100%; }
  .ab-intro-lead { font-size: 18px; }
  .ab-intro-p { font-size: 16px; }
  .ab-intro-p--fact { padding: 18px; font-size: 15px; }
  .ab-stats { margin-top: 52px; padding-top: 28px; }
  .ab-stats .stat, .aip-sum .stat { padding-inline: 14px; }
  .ab-stats .stat:nth-child(odd), .aip-sum .stat:nth-child(odd) { padding-left: 0; }
  .ab-stats .stat-num { font-size: 34px; }
  .ab-card { padding: 26px 22px 24px; }
  .ab-card-h { font-size: 23px; }
  .ab-hanja { grid-template-columns: 1fr; }
  .ab-name-photo figcaption { left: 18px; right: 18px; bottom: 16px; padding-left: 12px; font-size: 16px; }
  .ab-value-h { font-size: 23px; }
  .ab-value-d { font-size: 15.5px; }
  .ab-team-h { font-size: 22px; }
  .ab-team-lead { font-size: 18px; }
  .ab-team-d { font-size: 16px; }
  .ab-names { column-gap: 16px; }
  .ab-names--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .aip-bot-g--all .aip-bot-list { grid-template-columns: 1fr; }
  .aip-more-n { display: block; margin: 2px 0 0; }
  .ab-equip { column-gap: 16px; }
  .ab-members { padding: 24px 20px; gap: 14px 20px; }
  .ab-members-n .num { font-size: 44px; }
  .ab-today { padding: 22px 20px 18px; }
  .ab-hist-list li { grid-template-columns: 76px minmax(0, 1fr); }
  .ab-hist-link { grid-column: 2; }

  .aip-sum { margin-bottom: 44px; padding: 26px 20px 22px; }
  .aip-chart-t { font-size: 17px; }
  .aip-cmp, .aip-cmp tbody, .aip-cmp tr, .aip-cmp th, .aip-cmp td { display: block; }
  .aip-cmp thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .aip-cmp tbody { padding: 18px 0 16px; }
  .aip-cmp tr { display: grid; grid-template-columns: 36px minmax(0, 1fr); column-gap: 8px; align-items: center; }
  .aip-cmp-page { grid-column: 1 / -1; width: auto; padding: 0 0 10px; }
  .aip-cmp td, .aip-cmp-old td, .aip-cmp-new td { padding: 5px 0; }
  .aip-cmp-note { grid-column: 2; width: auto; padding: 0 0 8px !important; }
  .aip-bar { margin-right: 84px; height: 12px; }
  .aip-bar-n { font-size: 14px; }
  .aip-vs-md { padding: 16px; font-size: 13.5px; }
  .aip-vs-box figcaption, .aip-vs-more { padding-inline: 16px; }

  .aip-block-h { font-size: 21px; }
  .aip-code figcaption { padding: 11px 14px; }
  .aip-code-note { flex-basis: 100%; margin-left: 0; }
  .aip-code pre { font-size: 13.5px; }
  .aip-ln { padding: 0 14px 0 42px; }
  .aip-ln::before { width: 28px; }
  .aip-tbl thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .aip-tbl table, .aip-tbl tbody { display: block; }
  .aip-tbl tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "t n" "p p" "w w"; column-gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
  .aip-tbl tbody tr:last-child { border-bottom: 0; }
  .aip-tbl th, .aip-tbl td { display: block; padding: 0; border: 0; }
  .aip-tbl tbody th { grid-area: t; }
  .aip-md-n, .aip-ld-n { grid-area: n; }
  .aip-md-path { grid-area: p; margin-top: 4px; }
  .aip-ld th[scope="row"] { width: auto; }
  .aip-ld-what { grid-area: p; margin-top: 6px; }
  .aip-ld-where { grid-area: w; width: auto; margin-top: 4px; color: var(--ink-3) !important; }
  .aip-bots { grid-template-columns: 1fr; }
  .aip-bot-g--all { grid-column: auto; }
  .aip-bot-g { padding: 18px 18px 10px; }

  .aip-rule-card { padding: 36px 22px 34px; }
  .aip-rule-h { font-size: 25px; }
  .aip-rule-d { font-size: 15.5px; }
  .aip-rule-list { grid-template-columns: 1fr; gap: 28px; margin-top: 40px; }
  .aip-rule-i, .aip-rule-i:nth-child(even) { padding: 0; border-left: 0; }
}

.ab-certs { margin-top: 64px; scroll-margin-top: calc(var(--header-h) + 24px); }
.ab-certs-h { margin-bottom: 24px; font-size: 22px; letter-spacing: -0.03em; }


/* ── 40-insights.css ── */
/* ─────────────────────────────────────────────────────────────
   40-insights — 법률 정보 모음·가이드 글·자주 묻는 질문·상담·오시는 길·개인정보처리방침·404
   (site/pages/insights.mjs). 색·글자·모서리는 00-tokens 의 var(--…)만 쓴다.
   ───────────────────────────────────────────────────────────── */

/* 하위 머리 사진의 보이는 위치(사진 배정표는 site/pages/insights.mjs 머리 주석) */
.ig-hero .phero-bg img { object-position: 50% 30%; }   /* scene/gwangmyeong-meeting — 판서하는 변호사 */
/* 판서 글씨가 제목 뒤에서 어지럽지 않게 왼쪽(글자 쪽) 덧씌움을 조금 더 진하게 — 변호사가 있는 오른쪽은 그대로 */
.ig-hero::after { background: linear-gradient(90deg, rgba(14, 26, 51, .97) 0%, rgba(14, 26, 51, .94) 55%, rgba(14, 26, 51, .55) 100%); }
.fq-hero .phero-bg img { object-position: 60% 55%; }   /* film/signing — 펜을 쥔 손 */
.pv-hero .phero-bg img { object-position: 60% 40%; }   /* scene/desk-work */

/* ═════════ 1. 법률 정보 모음 /insights/ ═════════ */
.ig-top { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 32px; align-items: stretch; }
.ig-top--solo { grid-template-columns: minmax(0, 1fr); }
.ig-top-main, .ig-top-main .ins-feature { height: 100%; }

/* 가이드 원칙 */
.ig-rule { --gold-ink: var(--gold-ink-soft); display: flex; flex-direction: column; padding: 40px 36px 30px; background: var(--bg-soft); border-radius: var(--r-card); }
.ig-rule-h { font-size: 20px; letter-spacing: -0.025em; }
.ig-rule-list { display: grid; margin-top: 18px; }
.ig-rule-list li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; padding: 18px 0; border-top: 1px solid var(--line-2); }
.ig-rule-list li:first-child { border-top: 0; padding-top: 6px; }
.ig-rule-ic { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--r-card-sm); background: var(--white); color: var(--gold-ink); }
.ig-rule-t { display: flex; align-items: baseline; gap: 8px; font-size: 16px; font-weight: 700; color: var(--ink); line-height: 1.5; }
.ig-rule-t .num { font-size: 13px; color: var(--gold-ink); }
.ig-rule-d { margin-top: 4px; font-size: 15px; line-height: 1.7; color: var(--ink-2); }
.ig-figs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: auto; padding-top: 22px; border-top: 1px solid var(--ink); }
.ig-figs div { padding: 0 14px; border-left: 1px solid var(--line-2); }
.ig-figs div:first-child { padding-left: 0; border-left: 0; }
.ig-figs dt { font-size: 13px; color: var(--ink-3); line-height: 1.5; }
.ig-figs dd { margin-top: 4px; font-size: 15px; font-weight: 700; color: var(--gold-ink); }
.ig-figs dd .num { margin-right: 3px; font-size: 32px; letter-spacing: -0.03em; color: var(--ink); line-height: 1.1; }
.ig-figs-note { margin-top: 12px; font-size: 13px; color: var(--ink-3); }

/* 분야로 찾기 목록 */
.ig-browse { margin-top: 96px; }
.ig-browse-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 24px; }
.ig-browse-h { font-size: 26px; letter-spacing: -0.03em; }
.ig-browse-d { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin-top: 8px; font-size: 15px; color: var(--ink-3); }
.ig-browse-d .more { padding-block: 2px; }
.ig-fbar { margin-bottom: 0; justify-content: flex-end; }
.ig-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 56px; border-top: 1px solid var(--ink); }
.ig-item { min-width: 0; border-bottom: 1px solid var(--line); }
.ig-item.is-hidden, .tvp-item.is-hidden { display: none; }
.ig-card { display: flex; flex-direction: column; height: 100%; padding: 28px 2px 24px; }
.ig-card-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 13px; font-weight: 600; color: var(--ink-3); }
.ig-card-field { display: inline-flex; align-items: center; gap: 8px; }
.ig-card-date { font-weight: 400; }
.ig-card-q { margin-top: 12px; font-size: 21px; line-height: 1.45; letter-spacing: -0.03em; }
.ig-card-q a { transition: color var(--t-fast); }
.ig-card-q a:hover { color: var(--gold-ink); }
.ig-card-a { margin-top: 10px; font-size: 15.5px; line-height: 1.75; color: var(--ink-3); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ig-card-a strong { color: var(--ink-2); }
.ig-card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; margin-top: 14px; font-size: 13px; color: var(--ink-3); }
.ig-card-meta a { font-weight: 600; color: var(--ink); }
.ig-card-meta a:hover { text-decoration: underline; text-underline-offset: 3px; }
.ig-card-toc { margin-top: auto; padding-top: 14px; }
.ig-card-toc summary { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; font-size: 14px; font-weight: 600; color: var(--ink-2); }
.ig-card-toc summary .ic { color: var(--ink-3); transition: transform var(--t) var(--ease); }
.ig-card-toc[open] summary .ic { transform: rotate(180deg); }
.ig-card-toc summary:hover { color: var(--ink); }
.ig-card-toc ol { display: grid; gap: 2px; margin-top: 8px; padding: 12px 16px; background: var(--bg-soft); border-radius: var(--r-card-sm); }
.ig-card-toc a { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 6px; padding: 5px 0; font-size: 14px; line-height: 1.55; color: var(--ink-2); }
.ig-card-toc a .num { font-size: 13px; color: var(--gold-ink-soft); font-weight: 700; }
.ig-card-toc a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

/* 화담TV */
.tvp .sh-desc sup.fn { margin-left: 1px; }
.tvp-top { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px; align-items: center; margin-bottom: 64px; }
.tvp-feature { display: block; }
.tvp-feature-thumb { position: relative; aspect-ratio: 2.28 / 1; overflow: hidden; border-radius: var(--r-card); background: var(--bg-soft-2); }
.tvp-feature-thumb img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.75); transition: transform .7s var(--ease), filter var(--t) var(--ease); }
.tvp-feature:hover .tvp-feature-thumb img { transform: scale(1.03); filter: saturate(.9); }
.tvp-feature-play { position: absolute; left: 24px; bottom: 24px; display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 50%; background: rgba(11, 18, 32, .78); color: #fff; }
.tvp-feature-play .ic { margin-left: 3px; fill: currentColor; }
.tvp-feature-k { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: var(--gold-ink); }
.tvp-feature-k .num { margin-left: 6px; padding-left: 10px; border-left: 1px solid var(--line-2); font-weight: 400; color: var(--ink-3); }
.tvp-feature-t { margin-top: 12px; font-size: 28px; line-height: 1.4; letter-spacing: -0.032em; }
.tvp-feature-t a:hover { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }
.tvp-feature-d { margin-top: 12px; font-size: 16px; line-height: 1.75; color: var(--ink-2); }
.tvp-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--ink); }
.tvp-stats div + div { padding-left: 20px; border-left: 1px solid var(--line-2); }
.tvp-stats dt { font-size: 13px; color: var(--ink-3); }
.tvp-stats dd { margin-top: 2px; font-size: 24px; font-weight: 700; color: var(--ink); letter-spacing: -0.02em; }
.tvp-feature-more { margin-top: 24px; }
.tvp-fbar { margin-bottom: 28px; }
.tvp-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px 24px; }
.tvp-item { min-width: 0; }
.tvp-sum { margin-top: 6px; font-size: 14px; line-height: 1.65; color: var(--ink-3); }
.tvp-note { margin-top: 36px; }

/* ═════════ 2. 가이드 글 /insights/<slug>/ ═════════ */
.phero--article .phero-title { max-width: 980px; font-size: 40px; line-height: 1.32; }
.phero--article .phero-lead { font-size: 16px; color: rgba(255, 255, 255, .84); }
.ia-sec { padding-top: 72px; }
.ia { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 80px; align-items: start; }
.ia-main { min-width: 0; max-width: 800px; }

.ia-answer { padding: 30px 34px 32px; background: var(--bg-soft); border-top: 3px solid var(--navy-900); border-radius: var(--r-card); --gold-ink: var(--gold-ink-soft); }
.ia-answer-k { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; font-size: 14px; font-weight: 700; color: var(--gold-ink); letter-spacing: .02em; }
.ia-answer p:not(.ia-answer-k) { font-size: 18px; line-height: 1.85; color: var(--ink); }
.ia-answer p + p { margin-top: 12px; }

/* 차례(본문 안: 태블릿·모바일, 옆: 데스크톱) */
.ia-toc-h { font-size: 13px; font-weight: 700; color: var(--ink); letter-spacing: .02em; }
.ia-toc ol { display: grid; }
.ia-toc a { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 6px; font-size: 15px; line-height: 1.5; color: var(--ink-2); transition: color var(--t-fast); }
.ia-toc a .num { font-size: 13px; font-weight: 700; color: var(--gold-ink); padding-top: 1px; }
.ia-toc a:hover { color: var(--ink); }
.ia-toc--inline { margin-top: 36px; padding: 22px 24px; border: 1px solid var(--line); border-radius: var(--r-card); }
.ia-toc--inline ol { gap: 2px; margin-top: 10px; }
.ia-toc--inline a { padding: 6px 0; }
.ia-toc--side ol { margin-top: 12px; border-left: 1px solid var(--line); }
.ia-toc--side a { position: relative; padding: 7px 0 7px 16px; font-size: 14px; color: var(--ink-3); }
.ia-toc--side a::before { content: ""; position: absolute; left: -1px; top: 6px; bottom: 6px; width: 2px; background: var(--gold); transform: scaleY(0); transition: transform var(--t) var(--ease); }
.ia-toc--side a.is-on { color: var(--ink); font-weight: 600; }
.ia-toc--side a.is-on::before { transform: scaleY(1); }
.ia-toc-extra a .num { color: var(--ink-3); font-weight: 400; }

/* 본문 */
.ia-s { margin-top: 64px; }
.ia-h2 { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; padding-top: 22px; border-top: 1px solid var(--ink); font-size: 26px; line-height: 1.42; letter-spacing: -0.03em; }
.ia-h2-no { padding-top: 6px; font-size: 15px; font-weight: 700; color: var(--gold-ink); letter-spacing: .02em; }
.ia-s p { margin-top: 18px; font-size: 17px; line-height: 1.88; color: var(--ink-2); }
.ia-s strong { color: var(--ink); }
.ia-list { display: grid; gap: 10px; margin-top: 20px; }
.ia-list li { position: relative; padding-left: 24px; font-size: 16.5px; line-height: 1.8; color: var(--ink-2); }
.ia-list li::before { content: ""; position: absolute; left: 2px; top: .9em; width: 10px; height: 1px; background: var(--gold); }
.ia-tbl { margin-top: 26px; border-top: 1px solid var(--ink); }
.ia-tbl table { font-size: 15px; }
.ia-tbl th, .ia-tbl td { padding: 15px 16px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; line-height: 1.65; }
.ia-tbl thead th { background: var(--bg-soft); font-size: 14px; font-weight: 700; color: var(--ink); white-space: nowrap; }
.ia-tbl tbody th { width: 26%; font-weight: 700; color: var(--ink); }
.ia-tbl td { color: var(--ink-2); }
.ia-tbl td.is-law { width: 22%; font-size: 14px; color: var(--ink-3); }
.ia-tbl th:first-child, .ia-tbl td:first-child { padding-left: 4px; }

/* 한눈에 보기 */
.ia-key { margin-top: 72px; padding: 34px 38px 36px; background: var(--navy-900); color: var(--on-dark-2); border-radius: var(--r-card); }
.ia-key-h { font-size: 22px; color: #fff; }
.ia-key ul { display: grid; gap: 12px; margin-top: 18px; }
.ia-key li { display: flex; gap: 12px; font-size: 16.5px; line-height: 1.7; color: #fff; }
.ia-key li .ic { flex: none; margin-top: 3px; color: var(--gold-lt); }

/* 근거 법령 */
.ia-laws { margin-top: 64px; }
.ia-laws-h { display: flex; align-items: baseline; gap: 10px; padding-top: 22px; border-top: 1px solid var(--ink); font-size: 22px; }
.ia-laws-h .num { font-size: 15px; color: var(--gold-ink); }
.ia-laws-d { margin-top: 8px; font-size: 14px; color: var(--ink-3); }
.ia-laws ul { columns: 2; column-gap: 32px; margin-top: 16px; }
.ia-laws li { break-inside: avoid; }
.ia-laws a { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 15px; line-height: 1.55; color: var(--ink-2); transition: color var(--t-fast); }
.ia-laws a .ic { margin-top: 3px; color: var(--ink-3); transition: transform var(--t-fast) var(--ease); }
.ia-laws a:hover { color: var(--ink); }
.ia-laws a:hover .ic { transform: translate(2px, -2px); color: var(--gold-ink); }

/* 검토 변호사 */
.ia-review { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 24px; margin-top: 64px; padding: 26px 28px; border: 1px solid var(--line); border-radius: var(--r-card); }
.ia-review-photo { display: block; align-self: start; overflow: hidden; border-radius: var(--r-card-sm); background: #E9EBEE; aspect-ratio: 720 / 832; }
.ia-review-photo img { width: 100%; height: 100%; object-fit: cover; }
.ia-review-k { font-size: 13px; font-weight: 700; color: var(--gold-ink); letter-spacing: .02em; }
.ia-review-name { margin-top: 2px; font-size: 21px; font-weight: 700; color: var(--ink); letter-spacing: -0.02em; }
.ia-review-name span { margin-left: 8px; font-size: 14px; font-weight: 500; color: var(--ink-3); letter-spacing: 0; }
.ia-review-name a:hover { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
.ia-review-focus { margin-top: 2px; font-size: 15px; color: var(--ink-2); }
.ia-review-meta { margin-top: 10px; font-size: 14px; color: var(--ink-3); }
.ia-review-note { margin-top: 4px; font-size: 14px; color: var(--ink-3); }

/* 옆 칸 */
.ia-side-in { position: sticky; top: calc(var(--header-main) + 32px); display: grid; gap: 28px; }
.ia-call { padding: 22px 22px 22px; border: 1px solid var(--line); border-radius: var(--r-card); }
.ia-call-k { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--ink-3); }
.ia-call-n { display: block; margin-top: 4px; font-size: 26px; font-weight: 700; color: var(--ink); letter-spacing: 0; }
.ia-call-n:hover { color: var(--gold-ink); }
.ia-call-d { margin-top: 4px; font-size: 14px; color: var(--ink-3); line-height: 1.6; }
.ia-call-btn { width: 100%; margin-top: 16px; }

/* 관련 글·분야 */
.ia-rel-in { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 64px; align-items: start; }
.ia-rel-h { padding-bottom: 16px; border-bottom: 1px solid var(--ink); font-size: 22px; letter-spacing: -0.025em; }
.ia-rel-field .ia-rel-h { margin-bottom: 20px; }
.ia-rel-rows .ins-row + .ins-row { border-top-color: var(--line-2); }
.ia-rel-rows .ins-row-link { padding: 22px 2px; }
.ia-rel-more { display: flex; flex-wrap: wrap; gap: 12px 28px; margin-top: 24px; }

/* ═════════ 3. 자주 묻는 질문 /faq/ ═════════ */
.fq-sec { padding-top: 80px; }
.fq-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; }
.fq-search { flex: 1; max-width: 760px; margin-bottom: 0; }
.fq-count { padding-bottom: 32px; font-size: 15px; color: var(--ink-3); white-space: nowrap; }
.fq-count .num { font-weight: 700; color: var(--ink); }
.fq-tabs { margin-top: 32px; }
.fq-body { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 72px; align-items: start; margin-top: 56px; }
.fq-main { min-width: 0; }
.fq-group { scroll-margin-top: calc(var(--header-main) + 24px); }
.fq-group + .fq-group { margin-top: 72px; }
.fq-group-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px 24px; flex-wrap: wrap; padding-bottom: 16px; border-bottom: 1px solid var(--ink); }
.fq-group-h { display: flex; align-items: center; gap: 10px; font-size: 24px; letter-spacing: -0.03em; }
.fq-group-h .fdot { width: 9px; height: 9px; }
.fq-group-mark { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--gold); flex: none; }
.fq-group-n { margin-left: 2px; font-size: 15px; font-weight: 700; color: var(--gold-ink); }
.fq-group-links { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 24px; }
.fq-group-links .more { padding-block: 2px; font-size: 14px; }
.fq-group-tel { display: inline-flex; align-items: center; gap: 7px; font-size: 16px; font-weight: 700; color: var(--ink); letter-spacing: 0; }
.fq-group-tel .ic { color: var(--ink-3); }
.fq-group-tel:hover { color: var(--gold-ink); }
.fq .faq-items { border-top: 0; }
.fq .faq-q { gap: 16px; }
.fq-no { flex: none; min-width: 22px; font-size: 13px; font-weight: 700; color: var(--gold-ink); letter-spacing: .02em; }
.fq .faq-a { padding: 0 52px 26px 42px; }
.fq-side-in { position: sticky; top: calc(var(--header-main) + 32px); padding: 30px 28px 28px; background: var(--bg-soft); border-radius: var(--r-card); --gold-ink: var(--gold-ink-soft); }
.fq-side-h { font-size: 20px; letter-spacing: -0.025em; }
.fq-side-d { margin-top: 10px; font-size: 15px; line-height: 1.7; color: var(--ink-2); }
.fq-side-tels { margin-top: 18px; border-top: 1px solid var(--line-2); }
.fq-side-tels a { display: grid; gap: 2px; padding: 14px 0; border-bottom: 1px solid var(--line-2); }
.fq-side-tels span { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--ink-3); }
.fq-side-tels strong { font-size: 22px; color: var(--ink); letter-spacing: 0; line-height: 1.3; }
.fq-side-tels a:hover strong { color: var(--gold-ink); }
.fq-side-btn { width: 100%; margin-top: 20px; }
.fq-side-more { margin-top: 18px; }

/* ═════════ 4. 상담·오시는 길 /contact/ ═════════ */
.ct-in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 72px; align-items: start; }
.ct-side .sh { margin-bottom: 36px; }
.ct-phones { border-top: 1px solid var(--ink); }
.ct-phone { position: relative; display: grid; gap: 2px; padding: 22px 0; border-bottom: 1px solid var(--line-2); transition: padding var(--t) var(--ease); }
.ct-phone::before { content: ""; position: absolute; left: 0; top: 22px; bottom: 22px; width: 3px; background: var(--gold); transform: scaleY(0); transition: transform var(--t) var(--ease); }
.ct-phone.is-active { padding-left: 22px; }
.ct-phone.is-active::before { transform: scaleY(1); }
.ct-phone-l { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; color: var(--ink-2); }
.ct-phone-n { justify-self: start; font-size: 40px; font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; color: var(--ink); }
.ct-phone-n:hover { color: var(--gold-ink); }
.ct-phone-d { font-size: 14px; color: var(--ink-3); }
.ct-flow { display: grid; gap: 18px; margin-top: 36px; }
.ct-flow li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 14px; }
.ct-flow-no { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border: 1px solid var(--line-2); border-radius: 50%; background: var(--white); font-size: 14px; font-weight: 700; color: var(--ink); }
.ct-flow-h { font-size: 16px; font-weight: 700; color: var(--ink); line-height: 1.6; }
.ct-flow-d { margin-top: 2px; font-size: 15px; line-height: 1.7; color: var(--ink-2); }
.ct-card { padding: 42px 44px 32px; background: var(--white); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-card); }

.ct-hq { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); overflow: hidden; background: var(--white); border: 1px solid var(--line); border-radius: var(--r-card); scroll-margin-top: calc(var(--header-main) + 24px); }
/* 본사 사진: film/seocho-street(서초동 거리). 건물 위쪽 교회 간판이 보이지 않게 조금 키워 아래쪽(시계탑·거리)만 보인다 */
.ct-hq-photo { min-height: 100%; overflow: hidden; background: var(--bg-soft-2); }
.ct-hq-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 22% 100%; transform: scale(1.3); transform-origin: 22% 100%; }
.ct-hq-body { display: flex; flex-direction: column; padding: 40px 40px 36px; }
.ct-hq-k { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--ink-3); }
.ct-hq-k .ic { color: var(--gold-ink); }
.ct-hq-h { margin-top: 8px; font-size: 28px; letter-spacing: -0.03em; }
.ct-hq-addr { margin-top: 12px; font-size: 18px; font-weight: 600; line-height: 1.6; color: var(--ink); }
.ct-hq-addr2 { margin-top: 2px; font-size: 14px; color: var(--ink-3); }
.ct-hq-dl { display: grid; margin-top: 22px; border-top: 1px solid var(--line); }
.ct-hq-dl div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.ct-hq-dl dt { font-size: 14px; color: var(--ink-3); }
.ct-hq-dl dd { font-size: 19px; font-weight: 700; color: var(--ink); letter-spacing: 0; white-space: nowrap; }
.ct-hq-dl a:hover { color: var(--gold-ink); }
.ct-transit { margin-top: 22px; }
.ct-transit-h { display: flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 700; color: var(--ink); }
.ct-transit-h .ic { color: var(--gold-ink); }
.ct-transit ul { display: grid; gap: 4px; margin-top: 8px; }
.ct-transit li { position: relative; padding-left: 16px; font-size: 15px; line-height: 1.6; color: var(--ink-2); }
.ct-transit li::before { content: ""; position: absolute; left: 2px; top: .8em; width: 6px; height: 1px; background: var(--ink-3); }
.ct-map { margin-top: auto; padding-top: 26px; }
.ct-branches { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 20px; }
.ct-branch { display: flex; flex-direction: column; padding: 28px 28px 24px; border: 1px solid var(--line); border-radius: var(--r-card); scroll-margin-top: calc(var(--header-main) + 24px); }
.ct-branch-k { font-size: 13px; font-weight: 600; color: var(--ink-3); }
.ct-branch-h { margin-top: 4px; font-size: 20px; letter-spacing: -0.02em; }
.ct-branch-addr { margin-top: 10px; font-size: 15px; line-height: 1.65; color: var(--ink-2); }
.ct-branch-addr span { display: block; font-size: 13px; color: var(--ink-3); }
.ct-branch-tel { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 18px; font-weight: 700; color: var(--ink); }
.ct-branch-tel .ic { color: var(--gold-ink); }
.ct-branch-tel a:hover { color: var(--gold-ink); }
.ct-branch-none { margin-top: 12px; font-size: 14px; line-height: 1.65; color: var(--ink-3); }
.ct-branch-none a { font-weight: 600; color: var(--ink); }
.ct-branch-map { margin-top: auto; padding-top: 18px; }
.ct-branch-map a { display: inline-flex; align-items: center; gap: 6px; padding-bottom: 3px; border-bottom: 1px solid var(--line-2); font-size: 14px; font-weight: 600; color: var(--ink); }
.ct-branch-map a:hover { border-color: var(--ink); }

.ct-pv-in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 72px; align-items: start; }
.ct-pv-in .sh { margin-bottom: 0; }
.ct-pv-tbl, .pv-tbl { border-top: 1px solid var(--ink); background: var(--white); }
.ct-pv-tbl th, .ct-pv-tbl td, .pv-tbl th, .pv-tbl td { padding: 16px 20px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; font-size: 15px; line-height: 1.7; }
.ct-pv-tbl th, .pv-tbl th { width: 30%; font-weight: 700; color: var(--ink); background: #FAFAFB; }
.ct-pv-tbl td, .pv-tbl td { color: var(--ink-2); }

/* ═════════ 5. 개인정보처리방침 /privacy/ ═════════ */
.pv { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 80px; align-items: start; }
.pv-side { position: sticky; top: calc(var(--header-main) + 32px); }
.pv-toc-h { font-size: 13px; font-weight: 700; color: var(--ink); }
.pv-toc ol { margin-top: 12px; border-left: 1px solid var(--line); }
.pv-toc a { position: relative; display: grid; gap: 0; padding: 7px 0 7px 16px; font-size: 14px; line-height: 1.5; color: var(--ink-3); transition: color var(--t-fast); }
.pv-toc a .num { font-size: 13px; font-weight: 700; color: var(--gold-ink); }
.pv-toc a::before { content: ""; position: absolute; left: -1px; top: 6px; bottom: 6px; width: 2px; background: var(--gold); transform: scaleY(0); transition: transform var(--t) var(--ease); }
.pv-toc a:hover, .pv-toc a.is-on { color: var(--ink); }
.pv-toc a.is-on::before { transform: scaleY(1); }
.pv-main { min-width: 0; max-width: 820px; }
.pv-intro { margin-top: 36px; font-size: 17px; line-height: 1.85; color: var(--ink-2); }
.pv-art { margin-top: 48px; }
.pv-art-h { display: flex; align-items: baseline; gap: 12px; padding-top: 20px; border-top: 1px solid var(--line-2); font-size: 22px; letter-spacing: -0.025em; }
.pv-art-h .num { font-size: 15px; font-weight: 700; color: var(--gold-ink); letter-spacing: 0; white-space: nowrap; }
.pv-art p { margin-top: 14px; font-size: 16.5px; line-height: 1.85; color: var(--ink-2); }
.pv-art strong { color: var(--ink); }
.pv-art .pv-tbl { margin-top: 16px; }
.pv-list { display: grid; gap: 8px; margin-top: 14px; }
.pv-list li { position: relative; padding-left: 18px; font-size: 16px; line-height: 1.75; color: var(--ink-2); }
.pv-list li::before { content: ""; position: absolute; left: 2px; top: .85em; width: 8px; height: 1px; background: var(--gold); }
.pv-date { font-weight: 600; color: var(--ink) !important; }
.pv-back { margin-top: 56px; }

/* ═════════ 6. 404 ═════════ */
.nf { padding-block: 96px 128px; }
.nf-head { max-width: 760px; }
.nf-code { display: flex; align-items: center; gap: 14px; font-size: 13px; font-weight: 600; letter-spacing: .16em; color: var(--ink-3); }
.nf-code .num { font-size: 15px; letter-spacing: .06em; color: var(--gold-ink); font-weight: 700; }
.nf-rule { width: 36px; height: 1px; background: var(--line-2); }
.nf-title { margin-top: 20px; font-size: var(--fs-h2); letter-spacing: -0.032em; }
.nf-lead { margin-top: 16px; font-size: 18px; line-height: 1.75; color: var(--ink-3); }
.nf-btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 32px; }
.nf-doors { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 72px; }
.nf-door { position: relative; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--r-card); transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease); }
.nf-door:hover { box-shadow: var(--shadow-card); }
.nf-door > a:first-child { display: grid; gap: 10px; flex: 1; padding: 22px 22px 8px; }
.nf-door-top { display: flex; align-items: center; gap: 8px; font-size: 17px; font-weight: 700; color: var(--ink); letter-spacing: -0.02em; }
.nf-door-top .num { font-size: 13px; color: var(--gold-ink); }
.nf-door-ask { font-size: 15px; line-height: 1.6; color: var(--ink-3); }
.nf-door-arrow { color: var(--ink-3); transition: transform var(--t-fast) var(--ease); }
.nf-door:hover .nf-door-arrow { transform: translateX(3px); color: var(--ink); }
.nf-door-tel { display: inline-flex; align-items: center; gap: 7px; padding: 8px 22px 20px; font-size: 16px; font-weight: 700; color: var(--ink); letter-spacing: 0; }
.nf-door-tel .ic { color: var(--ink-3); }
.nf-door-tel:hover { color: var(--gold-ink); }
.nf-links { display: flex; flex-wrap: wrap; gap: 10px 32px; margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--line); }
.nf-links a { font-size: 15px; font-weight: 600; color: var(--ink-2); border-bottom: 1px solid var(--line-2); padding-bottom: 2px; }
.nf-links a:hover { color: var(--ink); border-color: var(--ink); }

/* ═════════ 반응형 ═════════ */
@media (max-width: 1279px) {
  .tvp-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ia { gap: 56px; grid-template-columns: minmax(0, 1fr) 260px; }
  .nf-doors { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1023px) {
  .ig-top { grid-template-columns: 1fr; }
  .ig-browse { margin-top: 72px; }
  .ig-browse-head { flex-direction: column; align-items: flex-start; }
  .ig-fbar { justify-content: flex-start; }
  /* 세로 쌓기 부모(align-items:flex-start) 안에서 단추 줄이 내용 폭만큼 커지지 않게 — 화면 폭에 맞춰 늘리고
     모바일에서는 공통 .fbar 의 음수 여백·가로 넘김으로 단추 줄만 옆으로 민다(문서 전체가 밀리지 않게) */
  .ig-browse-head > .ig-fbar { align-self: stretch; min-width: 0; max-width: none; }
  .tvp-top { grid-template-columns: 1fr; gap: 28px; }
  .tvp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 20px; }

  .ia { grid-template-columns: 1fr; }
  .ia-side { display: none; }
  .ia-main { max-width: none; }
  .ia-rel-in { grid-template-columns: 1fr; gap: 48px; }
  .ia-rel-field .pa { max-width: 520px; }

  .fq-head { flex-direction: column; align-items: stretch; gap: 8px; }
  .fq-count { padding-bottom: 0; }
  .fq-body { grid-template-columns: 1fr; gap: 56px; }
  .fq-side-in { position: static; }

  .ct-in { grid-template-columns: 1fr; gap: 48px; }
  .ct-hq { grid-template-columns: 1fr; }
  .ct-hq-photo { aspect-ratio: 16 / 7; min-height: 0; }
  .ct-branches { grid-template-columns: 1fr; }
  .ct-pv-in { grid-template-columns: 1fr; gap: 32px; }

  .pv { grid-template-columns: 1fr; gap: 40px; }
  .pv-side { position: static; padding: 20px 22px; border: 1px solid var(--line); border-radius: var(--r-card); }
  .pv-toc ol { columns: 2; column-gap: 24px; border-left: 0; }
  .pv-toc li { break-inside: avoid; }
  .pv-toc a { padding-left: 0; }
  .pv-toc a::before { display: none; }
}
@media (min-width: 1024px) {
  .ia-toc--inline { display: none; }
}

@media (max-width: 767px) {
  .ig-rule { padding: 28px 22px 24px; }
  .ig-figs dd .num { font-size: 26px; }
  .ig-list { grid-template-columns: 1fr; }
  .ig-card { padding: 24px 0 20px; }
  .ig-card-q { font-size: 19px; }
  .ig-browse-h { font-size: 22px; }
  .tvp-feature-t { font-size: 22px; }
  .tvp-feature-play { left: 14px; bottom: 14px; width: 52px; height: 52px; }
  .tvp-grid { grid-template-columns: 1fr; gap: 32px; }

  .phero--article .phero-title { font-size: 26px; line-height: 1.38; }
  .phero--article .phero-lead { font-size: 15px; }
  .ia-sec { padding-top: 40px; }
  .ia-answer { padding: 22px 20px 24px; }
  .ia-answer p:not(.ia-answer-k) { font-size: 17px; line-height: 1.8; }
  .ia-toc--inline { padding: 18px 18px; }
  .ia-s { margin-top: 52px; }
  .ia-h2 { gap: 10px; font-size: 21px; padding-top: 18px; }
  .ia-h2-no { padding-top: 4px; font-size: 14px; }
  .ia-s p { font-size: 16px; line-height: 1.85; }
  .ia-list li { font-size: 16px; }
  /* 표: 모바일에서는 줄마다 한 덩어리로 */
  .ia-tbl thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .ia-tbl table, .ia-tbl tbody, .ia-tbl tr, .ia-tbl th, .ia-tbl td { display: block; width: auto !important; }
  .ia-tbl tr { padding: 16px 0 14px; border-bottom: 1px solid var(--line); }
  .ia-tbl th, .ia-tbl td { padding: 0 !important; border: 0; }
  .ia-tbl tbody th { font-size: 16px; }
  .ia-tbl td { margin-top: 8px; font-size: 15px; }
  .ia-tbl td::before { content: attr(data-label); display: block; font-size: 13px; font-weight: 600; color: var(--ink-3); line-height: 1.5; }
  .ia-key { margin-top: 56px; padding: 26px 20px 28px; }
  .ia-key li { font-size: 16px; }
  .ia-laws ul { columns: 1; }
  .ia-review { grid-template-columns: 64px minmax(0, 1fr); gap: 16px; padding: 20px 18px; }
  .ia-rel-h { font-size: 20px; }

  .fq-sec { padding-top: 48px; }
  .fq-tabs { margin-top: 20px; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); }
  .fq-body { margin-top: 36px; }
  .fq-group + .fq-group { margin-top: 56px; }
  .fq-group-h { font-size: 21px; }
  .fq .faq-q { flex-direction: row; gap: 10px; }
  .fq .faq-a { padding: 0 8px 22px 32px; }
  .fq-side-in { padding: 24px 20px; }

  .ct-card { padding: 26px 20px 22px; margin-inline: calc(var(--gutter) * -0.5); }
  .ct-phone-n { font-size: 32px; }
  .ct-hq-body { padding: 26px 20px 24px; }
  .ct-hq-h { font-size: 24px; }
  .ct-hq-addr { font-size: 17px; }
  .ct-hq-dl div { flex-direction: column; align-items: flex-start; gap: 0; }
  .ct-branch { padding: 22px 20px 20px; }
  .ct-pv-tbl th, .ct-pv-tbl td, .pv-tbl th, .pv-tbl td { display: block; width: auto; padding: 12px 14px; }
  .ct-pv-tbl th, .pv-tbl th { padding-bottom: 4px; border-bottom: 0; }

  .pv-toc ol { columns: 1; }
  .pv-art-h { flex-direction: column; gap: 2px; font-size: 20px; }
  .pv-art p { font-size: 16px; }

  .nf { padding-block: 64px 80px; }
  .nf-lead { font-size: 16px; }
  .nf-doors { grid-template-columns: 1fr; margin-top: 48px; }
  .nf-links { gap: 10px 20px; }
}

/* ── 1차 다듬기: 관련 글 줄(요약 포함)·404 화살표 ── */
.ia-relrow + .ia-relrow { border-top: 1px solid var(--line-2); }
.ia-relrow-link { position: relative; display: block; padding: 24px 56px 24px 2px; }
.ia-relrow-top { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--ink-3); }
.ia-relrow-top span { margin-left: 8px; padding-left: 10px; border-left: 1px solid var(--line-2); font-weight: 400; }
.ia-relrow-q { margin-top: 8px; font-size: 19px; line-height: 1.5; letter-spacing: -0.025em; transition: color var(--t-fast); }
.ia-relrow-a { margin-top: 6px; font-size: 15px; line-height: 1.7; color: var(--ink-3); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ia-relrow-arrow { position: absolute; right: 8px; top: 50%; margin-top: -10px; color: var(--ink-3); transition: transform var(--t-fast) var(--ease), color var(--t-fast); }
.ia-relrow-link:hover .ia-relrow-q { color: var(--gold-ink); }
.ia-relrow-link:hover .ia-relrow-arrow { transform: translateX(3px); color: var(--ink); }
.nf-door-arrow { position: absolute; right: 20px; top: 25px; }
.nf-door-top { padding-right: 28px; }
@media (max-width: 767px) {
  .ia-relrow-link { padding: 20px 36px 20px 0; }
  .ia-relrow-q { font-size: 17px; }
  .ia-relrow-top span { display: none; }
  .ia-relrow-arrow { right: 0; }
}

/* ── 2차 다듬기: 모바일 화담TV 줄 목록 · 상담 순서(폼을 전화 다음으로) · 조항 차례 한 줄 ── */
@media (max-width: 1023px) {
  .ct-in { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  .ct-side { display: contents; }
  .ct-side .sh { order: 1; }
  .ct-phones { order: 2; }
  .ct-card { order: 3; margin-top: 36px; }
  .ct-flow { order: 4; margin-top: 40px; }
  .pv-toc a { display: flex; align-items: baseline; gap: 10px; padding: 6px 0; }
  .pv-toc a .num { flex: none; min-width: 42px; }
}
@media (max-width: 767px) {
  .tvp-grid { gap: 0; border-top: 1px solid var(--line-2); }
  .tvp-item { position: relative; min-height: 112px; padding: 16px 0 16px 148px; border-bottom: 1px solid var(--line-2); }
  .tvp-item .vcard-thumb { position: absolute; left: 0; top: 16px; width: 134px; border-radius: var(--r-btn); }
  .tvp-item .vcard-play { left: 8px; bottom: 8px; width: 30px; height: 30px; }
  .tvp-item .vcard-play .ic { width: 16px; height: 16px; }
  .tvp-item .vcard-body { padding-top: 0; }
  .tvp-item .vcard-title { margin-top: 4px; font-size: 15px; line-height: 1.5; }
  .tvp-sum { margin-top: 4px; font-size: 13px; line-height: 1.6; }
  .pv-toc ol { display: grid; gap: 0; }
}

/* ── 3차 다듬기: 옆 칸이 본문 높이만큼 늘어나야 sticky 가 따라온다 ── */
.ia-side, .fq-side { align-self: stretch; }
@media (max-height: 760px) and (min-width: 1024px) {
  .ia-call { display: none; }
}
html:not(.js) .fq-head { display: none; }
@media (max-width: 1023px) {
  .fq-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .fq-tabs::-webkit-scrollbar { display: none; }
  .fq-tabs .faq-tab { flex: none; }
}

/* 2026-10-29: 소개 영상 그림은 마지막 로고 장면, 유튜브 빨간 마크는 가운데 */
.tvp-feature-play { left: 50%; top: 50%; bottom: auto; transform: translate(-50%, -50%); }
@media (max-width: 767px) { .tvp-feature-play { left: 50%; bottom: auto; } }

/* ── 2026-10-29 변호사 요청 10번: 성공사례·언론보도 ── */
.news-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.news-item { display: flex; flex-direction: column; gap: 10px; padding: 26px 28px 24px; background: var(--white); border: 1px solid var(--line); border-radius: var(--r-card); }
.news-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-size: 14px; color: var(--ink-3); }
.news-type { padding: 3px 10px; font-size: 13px; font-weight: 700; color: var(--white); background: var(--navy-900); border-radius: 999px; }
.news-item--case .news-type { background: var(--gold-ink); }
.news-outlet { font-weight: 600; color: var(--ink-2); }
.news-title { font-size: 19px; line-height: 1.45; letter-spacing: -0.02em; }
.news-title a:hover { color: var(--gold-ink); }
.news-sum { font-size: 15.5px; line-height: 1.7; color: var(--ink-2); }
.news-person { margin-top: auto; padding-top: 6px; font-size: 14px; font-weight: 600; }
.news-person a { display: inline-flex; align-items: center; gap: 6px; color: var(--ink); }
.news-person a:hover { color: var(--gold-ink); }
.news-pending { display: flex; align-items: center; gap: 8px; margin-top: 20px; font-size: 15px; color: var(--ink-2); }
.news-note { margin-top: 10px; }
.news-item--img { overflow: hidden; }
.news-fig { margin: -26px -28px 4px; border-bottom: 1px solid var(--line); }
.news-fig img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; background: var(--navy-900); }
.news-fig figcaption { padding: 6px 14px; font-size: 12px; text-align: right; color: var(--ink-3); }
@media (max-width: 767px) {
  .news-list { grid-template-columns: 1fr; gap: 14px; }
  .news-item { padding: 20px; }
  .news-fig { margin: -20px -20px 6px; }
  .news-title { font-size: 17px; }
}


/* ── 40-people.css ── */
/* ─────────────────────────────────────────────────────────────
   40-people — 구성원 모음(/people/)과 개인 페이지(/people/<slug>/)
   site/pages/people.mjs 의 모양. 카드·거르기 단추·구간 머리·상담 띠는 30-components.css 그대로 쓰고,
   여기서는 이 페이지만의 배치(찾기 칸·무리 머리·전문가 구간·분야별 목록·프로필 머리·약력·담당 분야)만 정한다.
   색·모서리·글꼴은 00-tokens.css 의 변수만 쓴다.
   ───────────────────────────────────────────────────────────── */

/* ══ /people/ ══════════════════════════════════════════════ */

/* 하위 머리 — film/seminar(변호사가 직접 설명하는 장면). 인물이 오른쪽에 보이게 */
.phero--people .phero-bg img { object-position: 70% 8%; }

.pdir { padding-top: 72px; }

/* ── 찾기 칸: 이름·분야 낱말 + 분야·직함 거르기 ── */
.pdir-finder {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px;
  padding: 26px 30px 28px; margin-bottom: 72px;
  background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--r-card);
}
html:not(.js) .pdir-finder { display: none; } /* 스크립트가 없으면 찾기 칸 없이 모두 보인다 */
.pdir-finder-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.pdir-search { display: grid; gap: 8px; width: min(100%, 420px); }
.pdir-label { font-size: 14px; font-weight: 700; color: var(--ink); letter-spacing: -0.01em; }
.pdir-search-box {
  display: flex; align-items: center; gap: 10px; height: 50px; padding: 0 16px;
  background: var(--white); border: 1px solid var(--line-2); border-radius: var(--r-btn);
  color: var(--ink-3); transition: border-color var(--t-fast);
}
.pdir-search-box:focus-within { border-color: var(--ink); }
.pdir-search-box input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; font-size: 16px; color: var(--ink); }
.pdir-search-box input::placeholder { color: var(--ink-3); opacity: 1; }
.pdir-search-box:has(input:focus-visible) { outline: 2px solid var(--gold-ink); outline-offset: 3px; }
.pdir-count { font-size: 15px; color: var(--ink-3); white-space: nowrap; padding-bottom: 12px; }
.pdir-count strong { font-size: 20px; font-weight: 700; color: var(--ink); margin: 0 1px 0 3px; }
.pdir-finder-bars { display: flex; flex-wrap: wrap; gap: 18px 44px; padding-top: 22px; border-top: 1px solid var(--line); }
.pdir-filter { display: flex; align-items: center; gap: 16px; min-width: 0; }
.pdir-filter .pdir-label { flex: none; }
.pdir-finder .fbar { margin: 0; }
.pdir-finder .fbar-btn { height: 42px; padding: 0 16px; }
.pdir-select { display: none; } /* 직함 고르기 상자 — 모바일에서만 */

/* ── 무리 머리(01 변호사 · 02 감정평가사·고문) — 번호·영문 작은 제목은 공통 구간 머리(sh-eyebrow)와 같은 모양 ── */
.pdir-group-main { min-width: 0; }
.pdir-group-main .sh-eyebrow { margin-bottom: 12px; }
.pdir-group-head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 32px;
  padding-bottom: 20px; margin-bottom: 36px; border-bottom: 1px solid var(--ink);
}
.pdir-group-title { display: flex; align-items: baseline; gap: 14px; font-size: 32px; letter-spacing: -0.03em; }
.pdir-group-n { font-size: 17px; font-weight: 600; color: var(--ink-3); letter-spacing: 0; }
.pdir-group-n .num { color: var(--gold-ink); font-size: 22px; font-weight: 700; margin-right: 1px; }
.pdir-group-desc { max-width: 560px; font-size: 15px; line-height: 1.7; color: var(--ink-3); text-align: right; }

.pdir-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 52px 24px; }
.pdir-grid .pcard-name { font-size: 21px; }
.pdir-empty { padding: 56px 0 8px; text-align: center; font-size: 16px; color: var(--ink-3); }

/* ── 함께 일하는 전문가(감정평가사·고문) — 변호사 무리와 같은 머리·같은 카드 크기 ── */
.pdir-roles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 56px; margin: -8px 0 44px; }
.pdir-role dt { display: flex; align-items: baseline; gap: 2px; font-size: 16px; font-weight: 700; color: var(--ink); }
.pdir-role-n { margin-left: 8px; font-weight: 600; color: var(--ink-3); }
.pdir-role-n .num { color: var(--gold-ink); font-weight: 700; margin-right: 1px; }
.pdir-role dd { margin: 6px 0 0; font-size: 16px; line-height: 1.75; color: var(--ink-2); }

/* 화담 구성 60명+ 카드 */
.pdir-more { min-width: 0; }
.pdir-more-link {
  display: flex; flex-direction: column; justify-content: flex-end; height: 100%; min-height: 100%;
  aspect-ratio: auto; padding: 24px 22px;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-card-sm);
  transition: border-color var(--t-fast);
}
.pdir-more-link:hover { border-color: var(--ink-3); }
.pdir-more-k { font-size: 14px; font-weight: 700; color: var(--gold-ink); }
.pdir-more-n { margin-top: 8px; font-size: 22px; font-weight: 700; color: var(--ink); line-height: 1; }
.pdir-more-n .num { font-size: 52px; letter-spacing: -0.04em; margin-right: 2px; }
.pdir-more-d { margin-top: 14px; font-size: 15px; line-height: 1.55; color: var(--ink-2); }
.pdir-more-note { margin-top: 10px; font-size: 13px; line-height: 1.55; color: var(--ink-3); }
.pdir-more-go { display: inline-flex; align-items: center; gap: 6px; margin-top: 18px; font-size: 14px; font-weight: 600; color: var(--ink); }
.pdir-more-go .ic { transition: transform var(--t-fast) var(--ease); }
.pdir-more-link:hover .pdir-more-go .ic { transform: translateX(3px); }

/* ── 분야별 구성원(글자 목록) ── */
.pdir-index-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
.pdir-col { position: relative; min-width: 0; padding: 26px 28px 30px; border-left: 1px solid var(--line); border-top: 1px solid var(--line); }
.pdir-col:first-child { border-left: 0; padding-left: 0; }
.pdir-col::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: var(--ink-3); }
.pdir-col:not(:first-child)::before { left: -1px; }
.pdir-col-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.pdir-col-h { font-size: 18px; line-height: 1.45; letter-spacing: -0.02em; }
.pdir-col-h a { display: inline-flex; align-items: center; gap: 8px; }
.pdir-col-h a .ic { color: var(--ink-3); transition: transform var(--t-fast) var(--ease); }
.pdir-col-h a:hover { color: var(--gold-ink); }
.pdir-col-h a:hover .ic { transform: translateX(3px); }
.pdir-col-n { flex: none; font-size: 14px; color: var(--ink-3); }
.pdir-col-n .num { font-weight: 700; color: var(--ink); margin-right: 1px; }
.pdir-col-tel { margin-top: 6px; }
.pdir-col-tel a { display: inline-flex; align-items: center; gap: 6px; font-size: 16px; font-weight: 700; color: var(--ink); letter-spacing: 0; }
.pdir-col-tel a .ic { color: var(--ink-3); }
.pdir-col-tel a:hover { color: var(--gold-ink); }
.pdir-col-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 12px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.pdir-col-list a, .pdir-etc-list a { display: inline-flex; align-items: baseline; gap: 7px; padding: 4px 0; }
.pdir-col-name { font-size: 16px; font-weight: 600; color: var(--ink); }
.pdir-col-role { font-size: 14px; color: var(--ink-3); }
.pdir-col-list a:hover .pdir-col-name, .pdir-etc-list a:hover .pdir-col-name { color: var(--gold-ink); text-decoration: underline; text-underline-offset: 4px; }
.pdir-col-sub { margin-top: 4px; font-size: 14px; line-height: 1.6; color: var(--ink-3); }
.pdir-col-focus { display: block; font-size: 14px; line-height: 1.5; color: var(--ink-3); }

/* 그 밖의 분야 — 아래 한 줄로 넓게 */
.pdir-etc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); gap: 28px; padding: 28px 0 30px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.pdir-etc-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px 28px; }
.pdir-etc-list a { padding: 0; }

/* ══ /people/<slug>/ ═══════════════════════════════════════ */
/* 머리: 남색 띠(하위 머리와 같은 언어 — 남색 + 아래 금색 선) 위에 큰 사진이 아래 흰 본문으로 걸쳐 내려온다 */
.pprof-hero {
  --hang: 200px;               /* 사진이 띠 아래로 걸치는 길이(띠 아래 여백 포함) */
  --hp: 56px;                  /* 띠 아래 여백 */
  position: relative; z-index: 2;
  padding: 30px 0 var(--hp);
  background: var(--navy-900); color: #fff;
}
.pprof-hero::before { /* 아래 금색 선 */
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--gold); opacity: .9;
}
.pprof-hero::after { /* 오른쪽으로 옅어지는 결 — 영상 첫 화면과 같은 방향 */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(11, 18, 32, 0) 30%, rgba(26, 43, 77, .55) 100%);
}
.pprof-hero .container { position: relative; z-index: 1; }
.pprof-hero-grid {
  display: grid; grid-template-columns: 420px minmax(0, 1fr); gap: 72px; align-items: end;
  margin-top: 32px;
}
.pprof-photo {
  position: relative; z-index: 3;
  margin-bottom: calc(var(--hang) * -1);
  aspect-ratio: 720 / 832; overflow: hidden;
  border-radius: var(--r-card-sm); background: #E9EBEE;
  box-shadow: 0 30px 60px -36px rgba(11, 18, 32, .55);
}
.pprof-photo img { width: 100%; height: 100%; object-fit: cover; }
.pprof-id { padding-bottom: 6px; }
.pprof-kicker { display: flex; align-items: center; gap: 12px; font-size: 14px; font-weight: 600; letter-spacing: .02em; color: var(--gold-lt); }
.pprof-kicker [lang="en"] { font-size: 13px; letter-spacing: .14em; }
.pprof-kicker > span:last-child { font-size: 14px; color: rgba(255, 255, 255, .86); }
.pprof-kicker-rule { width: 28px; height: 1px; background: var(--line-dark-2); }
.pprof-name { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 16px; margin-top: 18px; font-size: 56px; line-height: 1.12; letter-spacing: -0.04em; color: #fff; }
.pprof-role { font-size: 22px; font-weight: 500; letter-spacing: -0.01em; color: rgba(255, 255, 255, .86); }
.pprof-en { margin-top: 10px; font-size: 15px; font-weight: 500; letter-spacing: .08em; color: var(--on-dark-3); }
.pprof-facts { display: grid; gap: 10px; margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--line-dark); max-width: 720px; }
.pprof-fact { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 16px; align-items: baseline; }
.pprof-fact dt { font-size: 14px; font-weight: 600; color: var(--on-dark-3); }
.pprof-fact dd { margin: 0; font-size: 18px; font-weight: 600; color: #fff; line-height: 1.55; }
.pprof-fact-fields { display: flex; flex-wrap: wrap; gap: 4px 22px; }
.pprof-fact-fields a { display: inline-flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 600; color: #fff; border-bottom: 1px solid var(--line-dark-2); padding-bottom: 1px; transition: border-color var(--t-fast), color var(--t-fast); }
.pprof-fact-fields a:hover { color: var(--gold-lt); border-color: var(--gold-lt); }
.pprof-hero .fdot--comp { background: var(--f-comp-lt); }
.pprof-hero .fdot--build { background: var(--f-build-lt); }
.pprof-reg {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 22px; padding: 8px 14px;
  border: 1px solid rgba(210, 187, 130, .55); border-radius: var(--r-btn);
  font-size: 15px; font-weight: 600; color: var(--gold-lt); line-height: 1.4;
}

/* 본문: 왼쪽(사진 아래) 상담 카드 · 오른쪽 약력·담당 분야·검토한 글 */
.pprof-body { padding-top: 72px; }
.pprof-grid { display: grid; grid-template-columns: 420px minmax(0, 1fr); gap: 32px 72px; align-items: start; }
.pprof-aside {
  grid-column: 1; grid-row: 1;
  /* 사진이 띠 아래로 걸친 길이(hang − hp)만큼 비우고 시작 */
  margin-top: calc(200px - 56px - 72px + 28px);
}
.pprof-aside--sticky { position: sticky; top: calc(var(--header-main) + 24px); }
.pprof-main { grid-column: 2; grid-row: 1; min-width: 0; display: grid; gap: 64px; }

.pprof-contact { padding: 22px 24px 20px; background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--r-card); }
.pprof-contact-h { font-size: 14px; font-weight: 700; color: var(--gold-ink-soft); letter-spacing: .02em; }
.pprof-tels { margin-top: 6px; }
.pprof-tel { display: grid; gap: 2px; padding: 10px 0; border-bottom: 1px solid var(--line-2); }
.pprof-tel-l { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink-3); }
.pprof-tel-n { font-size: 22px; font-weight: 700; color: var(--ink); letter-spacing: 0; line-height: 1.3; }
.pprof-tel:hover .pprof-tel-n { color: var(--gold-ink-soft); }
.pprof-contact-btn { width: 100%; height: 48px; margin-top: 16px; }
.pprof-contact-note { margin-top: 10px; font-size: 14px; line-height: 1.6; color: var(--ink-3); }
.pprof-meta { display: grid; gap: 12px; margin-top: 22px; padding-inline: 2px; }
.pprof-md { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink-3); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; }
.pprof-md:hover { color: var(--ink); text-decoration-color: var(--gold); }

.pprof-block { min-width: 0; }
.pprof-h {
  display: flex; align-items: center; gap: 14px;
  padding-bottom: 16px; margin-bottom: 8px; border-bottom: 1px solid var(--ink);
  font-size: 26px; letter-spacing: -0.03em;
}
.pprof-block-desc { margin: 14px 0 4px; font-size: 15px; color: var(--ink-3); }

/* 약력 — 원고 그대로 한 줄씩(어떤 줄도 강조하지 않는다). 7줄 이상만 두 단 */
.pprof-bio--cols { columns: 2; column-gap: 40px; }
.pprof-bio li { break-inside: avoid; position: relative; padding: 14px 0 14px 18px; border-bottom: 1px solid var(--line); font-size: 17px; line-height: 1.6; color: var(--ink-2); }
.pprof-bio li::before { content: ""; position: absolute; left: 2px; top: 1.45em; width: 6px; height: 1px; background: var(--ink-3); }

/* 담당 분야 */
.pprof-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 20px; }
.pprof-fields--n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pprof-fields--n3 .pprof-field-link { padding-inline: 20px; }
.pprof-field {
  position: relative; display: flex; flex-direction: column;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-card);
  transition: border-color var(--t-fast);
}
.pprof-field::before { content: ""; position: absolute; left: -1px; right: -1px; top: -1px; height: 3px; border-radius: var(--r-card) var(--r-card) 0 0; background: var(--ink-3); }
.pprof-field:hover { border-color: var(--line-2); }
.pprof-field-link { flex: 1; display: flex; flex-direction: column; gap: 6px; padding: 24px 24px 22px; }
.pprof-field-name { display: flex; align-items: center; gap: 9px; font-size: 19px; font-weight: 700; color: var(--ink); letter-spacing: -0.02em; }
.pprof-field-ask { margin-top: 6px; font-size: 16px; line-height: 1.6; color: var(--ink-2); }
.pprof-field-ans { font-size: 15px; line-height: 1.6; color: var(--ink-3); }
.pprof-field-go { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 12px; font-size: 14px; font-weight: 600; color: var(--ink-3); transition: color var(--t-fast); }
.pprof-field-go .ic { transition: transform var(--t-fast) var(--ease); }
.pprof-field-link:hover .pprof-field-name { color: var(--gold-ink); }
.pprof-field-link:hover .pprof-field-go { color: var(--ink); }
.pprof-field-link:hover .pprof-field-go .ic { transform: translateX(3px); }

/* 검토한 법률 정보 */
.pprof-rev { margin-top: 18px; }
.pprof-rev + .pprof-rev { margin-top: 26px; }
.pprof-rev-h { display: flex; align-items: baseline; gap: 4px; padding-bottom: 4px; font-size: 14px; font-weight: 700; color: var(--ink-3); }
.pprof-rev-n { margin-left: 8px; color: var(--ink-3); }
.pprof-rev-n .num { color: var(--gold-ink); font-size: 15px; margin-right: 1px; }
.pprof-rev-list { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.pprof-rev-prac { margin-top: 18px; font-size: 15px; line-height: 1.7; color: var(--ink-3); }
.pprof-rev-prac a { font-weight: 600; color: var(--ink-2); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; }
.pprof-rev-prac a:hover { color: var(--ink); text-decoration-color: var(--gold); }

/* 같은 분야 구성원 3명 — 작은 사진 카드(각진 모서리). 왼쪽(사진·상담 카드 아래)은 세로 목록, 오른쪽 본문 끝은 3칸 */
.pprof-peers { min-width: 0; }
.pprof-peers--side { margin-top: 36px; padding-top: 22px; border-top: 1px solid var(--ink); }
.pprof-peers-h { font-size: 17px; font-weight: 700; color: var(--ink); letter-spacing: -0.02em; }
.pprof-peers--main .pprof-peers-h { padding-bottom: 16px; border-bottom: 1px solid var(--ink); font-size: 26px; letter-spacing: -0.03em; }
.pprof-peers-list { display: grid; margin-top: 10px; }
.pprof-peers--main .pprof-peers-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 20px; }
.pprof-peer { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 14px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); }
.pprof-peers--main .pprof-peer { padding: 14px; border: 1px solid var(--line); border-radius: var(--r-btn); transition: border-color var(--t-fast); }
.pprof-peers--main .pprof-peer:hover { border-color: var(--ink-3); }
.pprof-peer-photo { display: block; width: 64px; aspect-ratio: 720 / 832; overflow: hidden; border-radius: 2px; background: #E9EBEE; }
.pprof-peer-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pprof-peer-body { display: grid; gap: 3px; min-width: 0; }
.pprof-peer-name { font-size: 17px; font-weight: 700; color: var(--ink); letter-spacing: -0.02em; transition: color var(--t-fast); }
.pprof-peer-role { margin-left: 2px; font-size: 14px; font-weight: 500; color: var(--ink-3); letter-spacing: 0; }
.pprof-peer-focus { font-size: 14px; line-height: 1.5; color: var(--ink-3); }
.pprof-peer:hover .pprof-peer-name { color: var(--gold-ink); }
.pprof-peers-all { margin-top: 16px; }

/* ── 반응형 ── */
@media (max-width: 1279px) {
  .pdir-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pdir-col { padding-inline: 22px; }
  .pdir-col-list { grid-template-columns: 1fr; }
  .pdir-etc-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pprof-hero-grid, .pprof-grid { grid-template-columns: 340px minmax(0, 1fr); gap: 32px 48px; }
  .pprof-hero { --hang: 170px; }
  .pprof-aside { margin-top: calc(170px - 56px - 72px + 28px); }
  .pprof-name { font-size: 50px; }
  .pprof-bio--cols { columns: 1; }
  .pprof-fields--n3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1023px) {
  .pdir { padding-top: 56px; }
  .pdir-finder { margin-bottom: 56px; }
  .pdir-finder-bars { flex-direction: column; gap: 16px; }
  .pdir-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 16px; }
  .pdir-experts-grid > .pdir-more { grid-column: span 1; }
  .pdir-group-head { flex-direction: column; align-items: flex-start; gap: 10px; }
  .pdir-group-desc { text-align: left; }
  .pdir-roles { grid-template-columns: 1fr; gap: 18px; margin-bottom: 36px; }
  .pdir-index-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pdir-col:nth-child(odd) { border-left: 0; padding-left: 0; }
  .pdir-col-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pdir-etc { grid-template-columns: 1fr; gap: 16px; }
  .pdir-etc-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .pprof-hero { padding-bottom: 44px; }
  .pprof-hero-grid { grid-template-columns: 280px minmax(0, 1fr); gap: 36px; margin-top: 28px; }
  .pprof-photo { margin-bottom: 0; }
  .pprof-name { font-size: 44px; }
  .pprof-body { padding-top: 56px; }
  .pprof-grid { grid-template-columns: 1fr; gap: 48px; }
  .pprof-aside { grid-column: 1; grid-row: 2; margin-top: 0; position: static; }
  .pprof-main { grid-column: 1; grid-row: 1; gap: 52px; }
  .pprof-peers--side .pprof-peers-list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; }
}

@media (max-width: 767px) {
  .pdir { padding-top: 40px; }
  .pdir-finder { gap: 16px; padding: 18px 16px 18px; margin-bottom: 44px; margin-inline: calc(var(--gutter) * -0.5); }
  /* 낱말 칸 이름과 인원 수를 한 줄에 */
  .pdir-finder-top { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "label count" "box box"; align-items: center; gap: 8px 12px; }
  .pdir-search { display: contents; }
  .pdir-search .pdir-label { grid-area: label; }
  .pdir-search-box { grid-area: box; }
  .pdir-count { grid-area: count; padding-bottom: 0; font-size: 14px; }
  .pdir-count strong { font-size: 18px; }
  .pdir-finder-bars { padding-top: 16px; gap: 14px; }
  /* 이름표와 거르기를 한 줄에 — 분야는 칩 한 줄을 옆으로 넘기고(찾기 칸 오른쪽 끝까지), 직함은 고르기 상자 하나 */
  .pdir-filter { flex-direction: row; align-items: center; gap: 12px; width: 100%; }
  .pdir-filter .pdir-label { flex: none; width: 30px; }
  .pdir-finder .fbar {
    display: flex; flex: 1; flex-wrap: nowrap; min-width: 0; overflow-x: auto; scroll-snap-type: x proximity;
    gap: 6px; margin: 0 -16px 0 0; padding: 0 16px 0 0; scrollbar-width: none;
  }
  .pdir-finder .fbar::-webkit-scrollbar { display: none; }
  .pdir-finder .fbar-btn { flex: none; height: 40px; padding: 0 14px; font-size: 14px; gap: 6px; scroll-snap-align: start; }
  .pdir-filter--role .fbar { display: none; }
  .pdir-filter--role .pdir-select { display: block; position: relative; flex: 1; min-width: 0; }
  .pdir-select select {
    width: 100%; height: 44px; padding: 0 40px 0 14px; appearance: none; -webkit-appearance: none;
    background: var(--white); border: 1px solid var(--line-2); border-radius: var(--r-btn);
    font: inherit; font-size: 16px; font-weight: 600; color: var(--ink);
  }
  .pdir-select select:focus-visible { outline: 2px solid var(--gold-ink); outline-offset: 2px; }
  .pdir-select .ic { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: var(--ink-3); pointer-events: none; }
  .pdir-group-head { margin-bottom: 26px; padding-bottom: 16px; }
  .pdir-group-title { font-size: 26px; }
  .pdir-group-desc { font-size: 14px; }
  .pdir-grid, .pdir-experts-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 12px; }
  .pdir-grid .pcard-name { font-size: 18px; }
  .pdir .pcard-name, .pdir-experts .pcard-name { flex-wrap: wrap; column-gap: 6px; font-size: 18px; }
  .pdir .pcard-focus, .pdir-experts .pcard-focus { font-size: 14px; }
  .pdir-more-link { padding: 18px 16px; }
  .pdir-more-n .num { font-size: 42px; }
  .pdir-more-d { font-size: 14px; }
  .pdir-index-grid { grid-template-columns: 1fr; }
  .pdir-col, .pdir-col:nth-child(odd) { border-left: 0; padding: 22px 0 24px; }
  .pdir-col::before, .pdir-col:not(:first-child)::before { left: 0; width: 56px; right: auto; }
  .pdir-col-list { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 10px; }
  .pdir-col-list a { flex-wrap: wrap; column-gap: 5px; }
  .pdir-etc-list { grid-template-columns: 1fr 1fr; gap: 14px 12px; }

  .pprof-hero { padding: 20px 0 36px; }
  .pprof-hero-grid { grid-template-columns: 1fr; gap: 26px; margin-top: 22px; }
  .pprof-photo { width: 64%; max-width: 280px; }
  .pprof-kicker { font-size: 13px; }
  .pprof-name { margin-top: 12px; font-size: 38px; gap: 4px 12px; }
  .pprof-role { font-size: 19px; }
  .pprof-facts { margin-top: 22px; padding-top: 18px; }
  .pprof-fact { grid-template-columns: 1fr; gap: 2px; }
  .pprof-fact dd { font-size: 17px; }
  .pprof-reg { margin-top: 18px; font-size: 14px; }
  .pprof-body { padding-top: 44px; }
  .pprof-h { font-size: 23px; padding-bottom: 14px; }
  .pprof-bio li { font-size: 16px; padding-block: 12px; }
  .pprof-fields { grid-template-columns: 1fr; }
  .pprof-field-link { padding: 22px 20px 20px; }
  .pprof-contact { padding: 20px 20px 18px; }
  .pprof-tel-n { font-size: 22px; }
  .pprof-peers--side .pprof-peers-list, .pprof-peers--main .pprof-peers-list { grid-template-columns: 1fr; gap: 0; }
  .pprof-peers--main .pprof-peer { padding: 12px 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; }
  .pprof-peers--main .pprof-peers-h { font-size: 23px; padding-bottom: 14px; }
}


/* ── 40-practice.css ── */
/* ─────────────────────────────────────────────────────────────
   40-practice — 업무분야(/practice/·/practice/<slug>/)·수행 실적(/records/) (site/pages/practice.mjs)
   접두사: pd-(업무 상세) · pidx-(업무분야 모음) · recs-(수행 실적). 색·모서리·글자는 00-tokens 만 쓴다.
   ───────────────────────────────────────────────────────────── */

/* ═════════ 업무 상세: 본문 + 오른쪽 따라오는 안내 ═════════ */
.pd { padding-block: 88px 112px; }
.pd-layout { display: grid; grid-template-columns: minmax(0, 1fr) 288px; gap: 0 72px; align-items: start; }
.pd-main { grid-column: 1; grid-row: 1; min-width: 0; }
.pd-side { position: relative; z-index: 2; grid-column: 2; grid-row: 1; align-self: stretch; }
.pd-side-in {
  position: sticky; top: calc(var(--header-h) + 24px);
  max-height: calc(100vh - var(--header-h) - 40px); overflow-y: auto; scrollbar-width: thin;
  padding-bottom: 4px;
}

/* 분야 전화 카드 */
.pd-call { padding: 22px 22px 20px; background: var(--white); border: 1px solid var(--line); border-radius: var(--r-card); }
.pd-call-l { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--ink-3); line-height: 1.5; }
.pd-call-n { display: block; margin-top: 6px; font-size: 27px; font-weight: 700; line-height: 1.25; letter-spacing: -0.01em; color: var(--ink); transition: color var(--t-fast); }
.pd-call-n:hover { color: var(--gold-ink); }
.pd-call-d { margin-top: 6px; font-size: 14px; line-height: 1.6; color: var(--ink-3); }
.pd-call-btn { width: 100%; margin-top: 16px; }

/* 목차 */
.pd-toc { margin-top: 30px; }
.pd-toc-h { padding-bottom: 12px; border-bottom: 1px solid var(--ink); font-size: 14px; font-weight: 700; color: var(--ink); letter-spacing: -0.01em; }
.pd-toc-list { position: relative; margin-top: 12px; border-left: 1px solid var(--line); }
.pd-toc-list a {
  display: flex; align-items: baseline; gap: 10px; margin-left: -1px; padding: 6px 0 6px 16px;
  border-left: 2px solid transparent; font-size: 15px; line-height: 1.45; color: var(--ink-3);
  transition: color var(--t-fast), border-color var(--t-fast);
}
.pd-toc-list a:hover { color: var(--ink); }
.pd-toc-list a[aria-current="true"] { color: var(--ink); font-weight: 600; border-left-color: var(--gold); }
.pd-toc-no { flex: none; width: 20px; font-size: 13px; font-weight: 600; color: var(--gold-ink); }
.pd-toc-t { flex: 1; min-width: 0; }
.pd-toc-n { flex: none; font-size: 13px; font-weight: 500; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.pd-side-rev { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 14px; color: var(--ink-3); line-height: 1.6; }
.pd-side-rev a { margin-left: 6px; font-weight: 600; color: var(--ink); }
.pd-side-rev a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* 블록 공통 */
.pd-block { padding-block: 60px; border-top: 1px solid var(--line); scroll-margin-top: 28px; }
.pd-block:first-child { padding-top: 0; border-top: 0; }
.pd-block:last-child { padding-bottom: 0; }
.pd-bh { margin-bottom: 30px; }
.pd-bh-no { margin-bottom: 10px; font-size: 13px; font-weight: 600; letter-spacing: .06em; color: var(--ink-3); }
.pd-bh-title { font-size: 32px; line-height: 1.32; letter-spacing: -0.032em; color: var(--ink); text-wrap: balance; }
.pd-nw { white-space: nowrap; }
.pd-bh-desc { max-width: 720px; margin-top: 12px; font-size: 16px; line-height: 1.75; color: var(--ink-3); }

/* 01 개요 */
.pd-block--overview .pd-bh-title { font-size: 40px; line-height: 1.26; letter-spacing: -0.038em; }
.pd-lead { max-width: 820px; }
.pd-lead p { font-size: var(--fs-lead); line-height: 1.85; color: var(--ink-2); }
.pd-lead p + p { margin-top: 16px; }
.pd-lead strong { color: var(--ink); }
.pd-facts { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr) minmax(0, 1.35fr) minmax(0, .9fr); margin-top: 40px; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--line); }
.pd-fact { min-width: 0; padding: 16px 18px 18px; border-left: 1px solid var(--line); }
.pd-fact:first-child { padding-left: 0; border-left: 0; }
.pd-fact dt { font-size: 13px; font-weight: 600; color: var(--ink-3); line-height: 1.5; }
.pd-fact dd { margin-top: 4px; font-size: 16px; font-weight: 700; color: var(--ink); line-height: 1.45; }
.pd-fact dd .num { margin-right: 1px; font-size: 22px; letter-spacing: -0.02em; }
.pd-fact dd a { transition: color var(--t-fast); }
.pd-fact dd a:hover { color: var(--gold-ink); }
.pd-fact--tel dd a { font-size: 20px; letter-spacing: 0; white-space: nowrap; }
.pd-facts-notes { margin-top: 12px; }

/* 02 이런 분께 */
.pd-aud { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 40px; border-top: 1px solid var(--ink); }
.pd-aud-item { padding: 22px 0 24px; border-bottom: 1px solid var(--line); }
.pd-aud-h { display: flex; align-items: center; gap: 10px; font-size: 19px; line-height: 1.4; letter-spacing: -0.02em; }
.pd-aud-h .ic { color: var(--gold-ink); }
.pd-aud-d { margin-top: 8px; padding-left: 30px; font-size: 15.5px; line-height: 1.75; color: var(--ink-2); }

/* 03 절차 — 세로 타임라인 */
/* 요약 띠: 핵심 단계 이름·기간 한 줄 (누르면 아래 그 단계 상세가 펼쳐진다) */
.pd-flow-wrap { margin-bottom: 44px; }
.pd-flow { display: grid; grid-template-columns: repeat(var(--n, 6), minmax(0, 1fr)); border-top: 2px solid var(--line-2); border-bottom: 1px solid var(--line); }
.pd-flow li { position: relative; min-width: 0; }
.pd-flow li + li { border-left: 1px solid var(--line); }
.pd-flow li + li::before { content: ""; position: absolute; left: -5px; top: 26px; width: 9px; height: 9px; border-top: 1px solid var(--line-2); border-right: 1px solid var(--line-2); background: var(--white); transform: rotate(45deg); }
.pd-flow a { display: flex; flex-direction: column; gap: 4px; height: 100%; padding: 18px 14px 20px 18px; transition: background-color var(--t-fast); }
.pd-flow li:first-child a { padding-left: 0; }
.pd-flow a:hover { background: var(--bg-soft); }
.pd-flow li:first-child a:hover { background: none; }
.pd-flow-no { font-size: 13px; font-weight: 700; color: var(--gold-ink); letter-spacing: .04em; }
.pd-flow-name { font-size: 18px; font-weight: 700; line-height: 1.4; letter-spacing: -0.025em; color: var(--ink); transition: color var(--t-fast); }
.pd-flow a:hover .pd-flow-name { color: var(--gold-ink); }
.pd-flow-per { font-size: 14px; line-height: 1.55; color: var(--ink-2); }
.pd-flow-note { margin-top: 10px; font-size: 13px; line-height: 1.6; color: var(--ink-3); }

/* 단계별 상세 — 세로 타임라인, 단계마다 <details> */
.pd-steps-head { display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--ink); }
.pd-steps-h { font-size: 17px; letter-spacing: -0.02em; }
.pd-steps-h .num { margin-left: 4px; color: var(--gold-ink); }
html:not(.js) .pd-steps-head .pd-expand { display: none; }
.pd-steps { padding-top: 6px; }
.pd-step { position: relative; padding-bottom: 12px; scroll-margin-top: calc(var(--header-h) + 24px); }
.pd-step::before { content: ""; position: absolute; left: 23.5px; top: 52px; bottom: 0; width: 1px; background: var(--line-2); }
.pd-step:last-child { padding-bottom: 0; }
.pd-step:last-child::before { display: none; }
.pd-step-sum { display: grid; grid-template-columns: 48px minmax(0, 1fr) 32px; column-gap: 24px; align-items: center; list-style: none; cursor: pointer; }
.pd-step-sum::-webkit-details-marker { display: none; }
.pd-step-no {
  display: flex; align-items: center; justify-content: center; width: 48px; height: 48px;
  border: 1px solid var(--line-2); border-radius: 50%; background: var(--white);
  font-size: 15px; font-weight: 700; color: var(--gold-ink); transition: border-color var(--t-fast), background-color var(--t-fast), color var(--t-fast);
}
.pd-step-sum:hover .pd-step-no, .pd-step-d[open] .pd-step-no { border-color: var(--navy-900); background: var(--navy-900); color: var(--white); }
.pd-step-name { min-width: 0; font-size: 20px; line-height: 1.4; letter-spacing: -0.025em; transition: color var(--t-fast); }
.pd-step-sum:hover .pd-step-name { color: var(--gold-ink); }
.pd-step-ic { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; color: var(--ink-3); transition: transform var(--t) var(--ease), color var(--t-fast); }
.pd-step-d[open] .pd-step-ic { transform: rotate(45deg); color: var(--ink); }
.pd-step-body { min-width: 0; padding: 4px 0 22px 72px; }
.pd-step-meta { display: grid; gap: 4px; margin-top: 6px; }
.pd-step-meta > div { display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 8px; font-size: 14.5px; line-height: 1.6; }
.pd-step-meta dt { display: flex; align-items: center; gap: 6px; height: 1.6em; font-weight: 600; color: var(--ink); }
.pd-step-meta dt .ic { color: var(--gold-ink); }
.pd-step-meta dd { color: var(--ink-3); }
.pd-step-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; margin-top: 18px; align-items: start; }
.pd-step-desc { font-size: 16px; line-height: 1.8; color: var(--ink-2); }
.pd-step-desc strong { color: var(--ink); }
.pd-step-hw { padding: 18px 20px 20px; background: var(--bg-soft); border-left: 2px solid var(--gold); border-radius: 0 var(--r-card-sm) var(--r-card-sm) 0; }
.pd-step-hw-h { font-size: 13px; font-weight: 700; color: var(--gold-ink-soft); letter-spacing: .02em; }
.pd-step-hw-d { margin-top: 6px; font-size: 15.5px; line-height: 1.75; color: var(--ink); }

/* 04 꼭 지킬 기한 — 표 */
.pd-table-wrap { border-top: 2px solid var(--ink); }
.pd-dl { width: 100%; font-size: 15.5px; line-height: 1.65; }
.pd-dl thead th { padding: 11px 16px; background: var(--bg-soft); border-bottom: 1px solid var(--line-2); font-size: 13px; font-weight: 700; color: var(--ink-2); text-align: left; letter-spacing: .02em; }
.pd-dl tbody th, .pd-dl td { padding: 16px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.pd-dl tbody th { width: 30%; font-weight: 700; color: var(--ink); }
.pd-dl td { color: var(--ink-2); }
.pd-dl td.pd-dl-law { width: 25%; font-size: 14px; color: var(--ink-3); }
html.js .pd-table-wrap:not(.is-open) tr.pd-dl-extra { display: none; }
.pd-dl-more {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 50px; margin-top: 16px;
  border: 1px solid var(--line-2); border-radius: var(--r-btn); background: var(--white);
  font-size: 15px; font-weight: 600; color: var(--ink); transition: border-color var(--t-fast);
}
.pd-dl-more:hover { border-color: var(--ink); }
.pd-dl-more .ic { transition: transform var(--t) var(--ease); }
.pd-table-wrap.is-open .pd-dl-more .ic { transform: rotate(180deg); }
html:not(.js) .pd-dl-more { display: none; }
.pd-dl tbody tr { transition: background-color var(--t-fast); }
.pd-dl tbody tr:hover { background: var(--bg-soft); }

/* 05 화담이 맡는 일 — 묶음별 접힘 */
.pd-tools { display: flex; justify-content: flex-end; margin: -14px 0 12px; }
.pd-expand {
  display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 14px;
  border: 1px solid var(--line-2); border-radius: var(--r-btn); background: var(--white);
  font-size: 14px; font-weight: 600; color: var(--ink-2); transition: border-color var(--t-fast), color var(--t-fast);
}
.pd-expand:hover { border-color: var(--ink); color: var(--ink); }
.pd-expand[aria-pressed="true"] .ic { transform: rotate(45deg); }
.pd-expand .ic { transition: transform var(--t) var(--ease); }
html:not(.js) .pd-tools { display: none; }
.pd-svc { border-top: 1px solid var(--ink); }
.pd-svc-g { border-bottom: 1px solid var(--line); }
.pd-svc-g summary { display: flex; align-items: center; gap: 16px; padding: 20px 4px; }
.pd-svc-h { display: flex; align-items: baseline; gap: 14px; flex: 1; min-width: 0; font-size: 19px; line-height: 1.45; letter-spacing: -0.02em; }
.pd-svc-no { flex: none; width: 24px; font-size: 13px; font-weight: 700; color: var(--gold-ink); letter-spacing: .02em; }
.pd-svc-name { transition: color var(--t-fast); }
.pd-svc-sub { display: block; margin-top: 2px; font-size: 14px; font-weight: 500; line-height: 1.55; color: var(--ink-3); letter-spacing: 0; }
.pd-svc-g summary:hover .pd-svc-name { color: var(--gold-ink); }
.pd-svc-n { flex: none; font-size: 13px; color: var(--ink-3); }
.pd-svc-n .num { font-weight: 700; color: var(--ink-2); }
.pd-svc-ic { flex: none; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; color: var(--ink-3); transition: transform var(--t) var(--ease), color var(--t-fast); }
.pd-svc-g[open] .pd-svc-ic { transform: rotate(45deg); color: var(--ink); }
.pd-svc-list { padding: 0 4px 24px 42px; }
.pd-svc-list li { padding: 12px 0; border-top: 1px solid var(--line); }
.pd-svc-list li:first-child { border-top: 0; padding-top: 4px; }
.pd-svc-list li.has-term { display: grid; grid-template-columns: 188px minmax(0, 1fr); gap: 24px; }
.pd-svc-list li.no-term { display: flex; gap: 10px; }
.pd-svc-list li.no-term .ic { margin-top: 5px; color: var(--gold-ink); }
.pd-svc-t { font-size: 15.5px; font-weight: 700; line-height: 1.65; color: var(--ink); }
.pd-svc-d { font-size: 15.5px; line-height: 1.78; color: var(--ink-2); }
.pd-svc-checks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 32px; padding: 4px 4px 26px 42px; }
.pd-svc-checks li { display: flex; gap: 10px; font-size: 15.5px; line-height: 1.65; color: var(--ink-2); }
.pd-svc-checks .ic { margin-top: 4px; color: var(--gold-ink); }

/* 06 왜 화담인가 — 흰 바탕(바로 다음 07 실적이 전폭 회색 띠라 상자를 겹치지 않는다) */
.pd-str { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 32px; }
.pd-str--n4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pd-str-item { padding: 22px 0 28px; border-top: 1px solid var(--ink); }
.pd-str-no { font-size: 14px; font-weight: 700; color: var(--gold-ink); letter-spacing: .04em; }
.pd-str-h { margin-top: 10px; font-size: 19px; line-height: 1.45; letter-spacing: -0.025em; }
.pd-str-d { margin-top: 10px; font-size: 15.5px; line-height: 1.78; color: var(--ink-2); }
.pd-photos { margin: 24px 0 0; }
.pd-photos ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.pd-photos img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-card-sm); background: var(--bg-soft-2); }
.pd-photos figcaption { margin-top: 10px; font-size: 13px; color: var(--ink-3); }
.pd-equip { margin-top: 24px; padding-top: 32px; border-top: 1px solid var(--line-2); }
.pd-equip .equip-list { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px 12px; }

/* 07 수행 실적 — 본문 폭을 넘는 전폭 회색 띠(보상은 지도, 하자는 대표 단지가 들어간다) */
.pd-block--records { background: var(--bg-soft); box-shadow: 0 0 0 100vmax var(--bg-soft); clip-path: inset(0 -100vmax); border-top: 0; }
.pd-block--records + .pd-block { border-top: 0; }
.pd-block--records .pd-rec-top { border-bottom-color: var(--line-2); }
.pd-rec-top { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px 44px; align-items: center; margin-bottom: 32px; padding-bottom: 28px; border-bottom: 1px solid var(--line); }
.pd-rec-big { display: flex; flex-wrap: wrap; align-items: baseline; font-size: 96px; font-weight: 700; line-height: 1; letter-spacing: -0.05em; color: var(--ink); }
.pd-rec-top .pd-rec-big { grid-row: span 2; }
.pd-rec-u { margin-left: 6px; font-size: 26px; letter-spacing: -0.01em; color: var(--gold-ink); white-space: nowrap; }
.pd-rec-big sup.fn { align-self: flex-start; margin-top: 10px; }
.pd-rec-items { display: grid; gap: 6px; }
.pd-rec-items li { display: flex; gap: 8px; font-size: 15.5px; line-height: 1.6; color: var(--ink-2); }
.pd-rec-items .ic { margin-top: 4px; color: var(--gold-ink); }
.pd-rec-nt { display: flex; flex-wrap: wrap; align-items: baseline; row-gap: 2px; font-size: 14px; line-height: 1.7; color: var(--ink-3); }
.pd-rec-nt-h { margin-right: 12px; font-weight: 700; color: var(--ink); }
.pd-rec-nt > span:not(.pd-rec-nt-h):not(:last-child)::after { content: "·"; margin: 0 7px; }
.pd-rec-comp { display: grid; gap: 28px; }
.pd-rec-comp .pbars { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 44px; }
.pd-rec-comp .pbars-note { grid-column: 1 / -1; }
.pd-block--records .fnotes { margin-top: 22px; }
.pd-rec-more { margin-top: 24px; }
.pd-rec-def { margin-top: 44px; }
.pd-rec-def-head { margin-bottom: 4px; }
.pd-rec-h { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; font-size: 20px; letter-spacing: -0.02em; }
.pd-rec-sub { margin-top: 4px; font-size: 14px; line-height: 1.6; color: var(--ink-3); }
.pd-rec-def .dregions { margin: 10px 0 16px; }
.pd-rec-one { display: flex; align-items: center; gap: 40px; padding: 30px 34px; border: 1px solid var(--line); border-radius: var(--r-card); }
.pd-rec-one .pd-rec-big { flex: none; font-size: 72px; }
.pd-rec-one-l { font-size: 18px; font-weight: 700; line-height: 1.5; color: var(--ink); }
.pd-rec-one-t .note { margin-top: 6px; }

/* 08 함께하는 구성원 — 회색 배경 프로필 사진을 맞붙인 가로 띠(긴 본문 사이의 시각적 쉼표) */
.pd-people { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0 2px; }
.pd-people--n4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pd-people--n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pd-people .pcard-photo { aspect-ratio: 720 / 780; border-radius: 0; }
.pd-people .pcard:first-child .pcard-photo { border-radius: var(--r-card-sm) 0 0 var(--r-card-sm); }
.pd-people .pcard:last-child .pcard-photo { border-radius: 0 var(--r-card-sm) var(--r-card-sm) 0; }
.pd-people .pcard-body { padding: 14px 14px 0 2px; }
.pd-people .pcard-name { flex-wrap: wrap; column-gap: 6px; font-size: 18px; }
.pd-people .pcard-focus { font-size: 14.5px; }
.pd-people-foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px 24px; margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--line); }
.pd-reviewer { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 15px; color: var(--ink-3); }
.pd-reviewer .ic { color: var(--gold-ink); }
.pd-reviewer a { font-weight: 700; color: var(--ink); }
.pd-reviewer a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* 09 비용 */
.pd-fees { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 28px; }
.pd-fee { padding-top: 20px; border-top: 1px solid var(--ink); }
.pd-fee-no { font-size: 14px; font-weight: 700; color: var(--gold-ink); letter-spacing: .04em; }
.pd-fee-d { margin-top: 10px; font-size: 16px; line-height: 1.8; color: var(--ink-2); }

/* 10 자주 묻는 질문 — 분야 꼬리표가 없으니 답 들여쓰기를 줄인다 */
.pd-block--faq .faq-a { padding: 0 52px 26px 4px; }
.pd-block--faq .faq-search { max-width: 640px; }

/* 11 관련 가이드 */
.pd-guides--many { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 36px; align-items: start; }
.pd-guides-h { padding-bottom: 10px; border-bottom: 1px solid var(--ink); font-size: 14px; font-weight: 700; color: var(--ink); }
.pd-guides .ins-feature { padding: 34px 36px 30px; }
.pd-guides .ins-feature-q { font-size: 25px; }

/* 12 근거 법령(접힘) */
.pd-src { border-top: 1px solid var(--ink); border-bottom: 1px solid var(--line); }
.pd-src summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 4px; font-size: 17px; font-weight: 600; color: var(--ink); }
.pd-src summary:hover .pd-src-s { color: var(--gold-ink); }
.pd-src-s { display: inline-flex; align-items: center; gap: 10px; transition: color var(--t-fast); }
.pd-src-s .ic { color: var(--gold-ink); }
.pd-src-ic { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; color: var(--ink-3); transition: transform var(--t) var(--ease); }
.pd-src[open] .pd-src-ic { transform: rotate(45deg); color: var(--ink); }
.pd-src-groups { columns: 2; column-gap: 44px; padding: 0 4px 28px; }
.pd-src-g { padding-top: 18px; }
.pd-src-h { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 4px; padding-bottom: 8px; border-bottom: 1px solid var(--line-2); font-size: 15px; letter-spacing: -0.01em; break-after: avoid; }
.pd-src-h .num { font-size: 13px; font-weight: 500; color: var(--ink-3); }
.pd-src-g li { break-inside: avoid; }
.pd-src-g li a { display: block; padding: 4px 0; font-size: 14px; line-height: 1.55; color: var(--ink-2); }
.pd-src-g li a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--gold); }

/* 13 상담 전화 */
.pd-callout { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 24px 32px; padding: 32px 36px; border: 1px solid var(--line); border-radius: var(--r-card); }
.pd-callout-l { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; color: var(--ink-3); }
.pd-callout-n { display: inline-flex; align-items: center; gap: 12px; margin-top: 6px; font-size: 40px; font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; color: var(--ink); transition: color var(--t-fast); }
.pd-callout-n .ic { color: var(--gold-ink); }
.pd-callout-n:hover { color: var(--gold-ink); }
.pd-callout-d { margin-top: 6px; font-size: 15px; color: var(--ink-3); }
.pd-callout-btns { display: flex; flex-wrap: wrap; gap: 10px; }
.pd-disclaimer { margin-top: 16px; }

/* 다른 업무분야 */
.pd-others { padding-block: 64px; background: var(--bg-soft); border-top: 1px solid var(--line); }
.pd-others-title { margin-bottom: 20px; font-size: 22px; letter-spacing: -0.025em; }
.pd-others-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.pd-other { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 22px 24px 20px; background: var(--white); border: 1px solid var(--line); border-radius: var(--r-card-sm); transition: border-color var(--t-fast), box-shadow var(--t) var(--ease); }
.pd-other:hover { box-shadow: var(--shadow-card); }
.pd-other-link { display: grid; gap: 6px; padding-right: 30px; }
.pd-other-link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.pd-other-name { display: flex; align-items: center; gap: 8px; font-size: 18px; font-weight: 700; line-height: 1.4; color: var(--ink); letter-spacing: -0.02em; }
.pd-other-ask { font-size: 15px; line-height: 1.6; color: var(--ink-3); }
.pd-other-arrow { position: absolute; right: 22px; top: 26px; color: var(--ink-3); transition: transform var(--t-fast) var(--ease), color var(--t-fast); }
.pd-other:hover .pd-other-arrow { transform: translateX(3px); color: var(--ink); }
.pd-other-tel { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 7px; align-self: flex-start; margin-top: 14px; font-size: 16px; font-weight: 700; color: var(--ink); letter-spacing: 0; }
.pd-other-tel .ic { color: var(--gold-ink); }
.pd-other-tel:hover { color: var(--gold-ink); }

/* ═════════ 업무분야 모음 /practice/ ═════════ */
.pidx-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.pidx-card { position: relative; display: flex; flex-direction: column; min-width: 0; overflow: hidden; background: var(--white); border: 1px solid var(--line); border-radius: var(--r-card); transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease); }
.pidx-card:hover, .pidx-card:focus-within { border-color: var(--line-2); box-shadow: var(--shadow-card); }
.pidx-fig { aspect-ratio: 16 / 7; overflow: hidden; background: var(--bg-soft-2); }
.pidx-fig img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.pidx-card:hover .pidx-fig img { transform: scale(1.03); }
.pidx-body { display: flex; flex-direction: column; flex: 1; padding: 30px 36px 28px; }
.pidx-kicker { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--ink-3); letter-spacing: .02em; }
.pidx-no { margin-right: 4px; font-weight: 700; color: var(--gold-ink); }
.pidx-name { margin-top: 10px; font-size: 30px; line-height: 1.3; letter-spacing: -0.034em; }
.pidx-link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.pidx-ask { margin-top: 14px; font-size: 16px; line-height: 1.6; color: var(--ink-3); }
.pidx-ans { margin-top: 4px; font-size: 18px; font-weight: 600; line-height: 1.5; color: var(--ink); }
.pidx-svcs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 24px; margin-top: 22px; margin-bottom: 4px; padding-top: 20px; border-top: 1px solid var(--line); }
.pidx-svcs li { display: flex; gap: 8px; min-width: 0; font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.pidx-svcs .ic { margin-top: 3px; color: var(--gold-ink); }
.pidx-facts { display: flex; flex-wrap: wrap; row-gap: 12px; margin-top: auto; padding-top: 26px; }
.pidx-facts > div { padding: 0 22px; border-left: 1px solid var(--line); }
.pidx-facts > div:first-child { padding-left: 0; border-left: 0; }
.pidx-facts dt { font-size: 13px; font-weight: 600; color: var(--ink-3); }
.pidx-facts dd { margin-top: 2px; font-size: 15px; font-weight: 700; color: var(--ink); }
.pidx-facts dd .num { margin-right: 1px; font-size: 21px; letter-spacing: -0.02em; }
.pidx-foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line); }
.pidx-tel { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 8px; font-size: 20px; font-weight: 700; color: var(--ink); letter-spacing: 0; }
.pidx-tel .ic { color: var(--gold-ink); }
.pidx-tel:hover { color: var(--gold-ink); }
.pidx-more { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 600; color: var(--ink-3); transition: color var(--t-fast); }
.pidx-more .ic { transition: transform var(--t-fast) var(--ease); }
.pidx-card:hover .pidx-more { color: var(--ink); }
.pidx-card:hover .pidx-more .ic { transform: translateX(3px); }

/* 입장으로 찾기 — 4열 글자 목록 */
.pidx-who { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 28px; }
.pidx-who-col { display: flex; flex-direction: column; min-width: 0; padding-top: 22px; border-top: 2px solid var(--line-2); }
.pidx-who-h { display: flex; align-items: center; gap: 8px; padding-bottom: 14px; border-bottom: 1px solid var(--line-2); font-size: 18px; line-height: 1.4; letter-spacing: -0.02em; }
.pidx-who-list a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 15.5px; font-weight: 600; line-height: 1.5; color: var(--ink); transition: color var(--t-fast); }
.pidx-who-list .ic { flex: none; color: var(--ink-3); transition: transform var(--t-fast) var(--ease), color var(--t-fast); }
.pidx-who-list a:hover { color: var(--gold-ink); }
.pidx-who-list a:hover .ic { transform: translateX(3px); color: var(--ink); }
.pidx-who-tel { display: inline-flex; align-items: center; gap: 7px; align-self: flex-start; margin-top: 18px; font-size: 16px; font-weight: 700; color: var(--ink); letter-spacing: 0; }
.pidx-who-tel .ic { color: var(--gold-ink); }
.pidx-who-tel:hover { color: var(--gold-ink); }

/* 업무분야 카드 아래 각주 */
.pidx-notes { margin-top: 22px; }
.pidx-disclaimer { margin-top: 6px; }
.pidx-facts sup.fn a { position: relative; z-index: 2; }

/* 숫자 */
.pidx-num-card { padding: 36px 44px 32px; background: var(--white); border: 1px solid var(--line); border-radius: var(--r-card); }

/* ═════════ 수행 실적 /records/ ═════════ */
.recs-jump { background: var(--white); border-bottom: 1px solid var(--line); }
.recs-jump-in { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.recs-jump-a { position: relative; display: grid; gap: 4px; padding: 26px 64px 26px 0; transition: background-color var(--t-fast); }
.recs-jump-a + .recs-jump-a { padding-left: 40px; border-left: 1px solid var(--line); }
.recs-jump-a::before { content: ""; position: absolute; top: -1px; left: 0; width: 56px; height: 2px; background: var(--gold); transition: width var(--t-slow) var(--ease); }
.recs-jump-a + .recs-jump-a::before { left: 40px; }
.recs-jump-a:hover::before { width: calc(100% - 64px); }
.recs-jump-k { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--ink-3); }
.recs-jump-v { font-size: 19px; font-weight: 600; line-height: 1.45; letter-spacing: -0.02em; color: var(--ink); }
.recs-jump-v strong { font-size: 24px; letter-spacing: -0.02em; }
.recs-jump-ic { position: absolute; right: 24px; top: 50%; color: var(--ink-3); transform: translateY(-50%) rotate(90deg); transition: transform var(--t-fast) var(--ease), color var(--t-fast); }
.recs-jump-a:hover .recs-jump-ic { color: var(--ink); transform: translateY(-40%) rotate(90deg); }

.recs-grid { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 56px; align-items: start; }
.recs-side { align-self: stretch; }
.recs-side-in { position: sticky; top: calc(var(--header-h) + 24px); }
.recs-big { display: flex; flex-wrap: wrap; align-items: baseline; font-size: 104px; font-weight: 700; line-height: .95; letter-spacing: -0.05em; color: var(--ink); }
.recs-big-u { margin-left: 6px; font-size: 26px; letter-spacing: -0.01em; color: var(--gold-ink); white-space: nowrap; }
.recs-big sup.fn { align-self: flex-start; margin-top: 8px; }
.recs-big-l { margin-top: 12px; font-size: 16px; font-weight: 600; line-height: 1.5; color: var(--ink); }
.recs-nt { display: flex; flex-wrap: wrap; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 14px; line-height: 1.7; color: var(--ink-3); }
.recs-nt-h { flex-basis: 100%; margin-bottom: 2px; font-weight: 700; color: var(--ink); }
.recs-nt > span:not(.recs-nt-h):not(:last-child)::after { content: "·"; margin: 0 7px; }
.recs-bars-h { margin: 28px 0 10px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 15px; letter-spacing: -0.01em; }
.recs-main { min-width: 0; }
.recs-main .pmap { margin-bottom: 44px; }
.recs-list-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px 16px; margin-bottom: 14px; }
.recs-list-h { font-size: 22px; letter-spacing: -0.025em; }
.recs-status { font-size: 15px; color: var(--ink-3); }
.recs-status strong { color: var(--ink); }
.recs-reset {
  display: inline-flex; align-items: center; gap: 6px; height: 36px; margin-left: auto; padding: 0 12px;
  border: 1px solid var(--line-2); border-radius: var(--r-btn); background: var(--white);
  font-size: 14px; font-weight: 600; color: var(--ink); transition: border-color var(--t-fast);
}
.recs-reset:hover { border-color: var(--ink); }
.recs-notes { margin-top: 28px; }
.recs-photos { margin: 52px 0 0; }
.recs-photos ul { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.recs-photos img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-card-sm); background: var(--bg-soft-2); }
.recs-photos figcaption { margin-top: 10px; font-size: 13px; color: var(--ink-3); }

.recs-def-stats { padding: 36px 44px 32px; background: var(--white); border: 1px solid var(--line); border-radius: var(--r-card); }
.recs-def-top { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 32px; align-items: stretch; }
.recs-def-top .stats--stack .stat:first-child { padding-top: 0; border-top: 0; }
.recs-def-map { padding: 28px 32px; background: var(--white); border: 1px solid var(--line); border-radius: var(--r-card); }
.recs-def-maph { margin-bottom: 8px; font-size: 15px; font-weight: 700; color: var(--ink); }
@media (max-width: 1023px) { .recs-def-top { grid-template-columns: 1fr; gap: 20px; } .recs-def-map { padding: 22px 16px; } }
.recs-def-body { margin-top: 48px; }
.recs-def-head { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 10px 24px; margin-bottom: 16px; }
.recs-def-h { font-size: 22px; letter-spacing: -0.025em; }
.recs-def-sub { margin-top: 4px; font-size: 14px; line-height: 1.6; color: var(--ink-3); }
.recs-def-head .dregions { margin-top: 0; }
.recs-disclaimer { margin-top: 8px; }

/* 수행 실적 공익사업지구 목록: 화면 크기와 관계없이 30곳 뒤는 '더 보기'로 접는다(439곳, 10-30 대표) */

/* ═════════ 하자 대표 단지 — 표형 목록(단지명 | 권역 | 세대수) ═════════ */
.drows { container: drows / inline-size; padding: 4px 24px 6px; background: var(--white); border: 1px solid var(--line); border-radius: var(--r-card-sm); }
.drows-heads, .drows-list { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 48px; }
.drows-head, .drows-item { display: grid; grid-template-columns: minmax(0, 1fr) 96px 92px; gap: 12px; }
.drows-head { padding: 12px 0 10px; border-bottom: 1px solid var(--ink); font-size: 13px; font-weight: 700; color: var(--ink-3); }
.drows-head span:last-child { text-align: right; }
.drows-head--2 { display: none; }
.drows-item { align-items: baseline; padding: 13px 0; border-bottom: 1px solid var(--line); }
.drows-item:last-child { border-bottom: 0; }
.drows-name { min-width: 0; font-size: 16px; font-weight: 700; line-height: 1.45; letter-spacing: -0.025em; color: var(--ink); }
.drows-region { font-size: 14px; color: var(--ink-3); white-space: nowrap; }
.drows-units { font-size: 14px; color: var(--ink-3); text-align: right; white-space: nowrap; }
.drows-units .num { margin-right: 2px; font-size: 18px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
@container drows (min-width: 900px) {
  .drows-heads, .drows-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .drows-head--2 { display: grid; }
  .drows-list { grid-auto-flow: column; grid-template-rows: repeat(var(--rows, 4), auto); }
  .drows-item:last-child { border-bottom: 1px solid var(--line); }
  .drows-item:nth-child(4n) { border-bottom: 0; }
}
@container drows (max-width: 520px) {
  .drows-head, .drows-item { grid-template-columns: minmax(0, 1fr) auto; column-gap: 14px; row-gap: 2px; }
  .drows-head span:nth-child(2) { display: none; }
  .drows-region { grid-column: 1; grid-row: 2; font-size: 13.5px; }
  .drows-units { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
}

/* ═════════ 각주 링크·줄바꿈 묶음 ═════════ */
:is(.pd, .pidx, .recs-jump, .recs-comp, .recs-def) .nowrap { white-space: nowrap; }
:is(.pd, .pidx, .recs-comp, .recs-def) sup.fn { letter-spacing: 0; }
:is(.pd, .pidx, .recs-comp, .recs-def) sup.fn a { color: inherit; text-decoration: none; }
:is(.pd, .pidx, .recs-comp, .recs-def) sup.fn a:hover { text-decoration: underline; text-underline-offset: 2px; }
:is(.pd, .pidx, .recs-comp, .recs-def) .fnotes li { scroll-margin-top: calc(var(--header-h) + 96px); }
:is(.pd, .pidx, .recs-comp, .recs-def) .fnotes li:target { background: rgba(175, 149, 79, .14); border-radius: 2px; }

/* 머리 사진 위치 */
.phero--pidx .phero-bg img { object-position: 20% 50%; }

/* ═════════ 반응형 ═════════ */
@media (max-width: 1279px) {
  .pd-layout { grid-template-columns: minmax(0, 1fr) 256px; gap: 0 48px; }
  .pd-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pd-fact:nth-child(3) { padding-left: 0; border-left: 0; }
  .pd-fact:nth-child(n+3) { border-top: 1px solid var(--line); }
  .pd-block--overview .pd-bh-title { font-size: 34px; }
  .pd-str { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pd-people .pcard-name { font-size: 16.5px; }
  .pd-people .pcard-role { font-size: 13px; }
  .pd-people .pcard-focus { font-size: 13.5px; }
  .pd-flow { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pd-flow li::before { display: none; }
  .pd-flow li:nth-child(3n+1) { border-left: 0; }
  .pd-flow li:nth-child(3n+1) a { padding-left: 0; }
  .pd-flow li:nth-child(3n+1) a:hover { background: none; }
  .pd-flow li:nth-child(n+4) { border-top: 1px solid var(--line); }
  .pd-rec-big { font-size: 80px; }
  .pidx-body { padding: 28px 28px 24px; }
  .recs-grid { grid-template-columns: 300px minmax(0, 1fr); gap: 40px; }
  .recs-big { font-size: 88px; }
}

@media (max-width: 1199px) {
  .pd-step-cols { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .pd-fees { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .pd-fee { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 12px; padding-block: 18px; }
  .pd-fee-d { margin-top: 0; }
  .pd-guides--many { grid-template-columns: minmax(0, 1fr); }
  .pd-svc-list li.has-term { grid-template-columns: 150px minmax(0, 1fr); gap: 18px; }
}

@media (max-width: 1023px) {
  /* 목차는 머리 바로 아래에 붙는 가로 띠로, 분야 전화는 본문 끝과 하단 단추로 */
  .pd { padding-block: 0 72px; }
  .pd-layout { grid-template-columns: minmax(0, 1fr); }
  .pd-side {
    grid-column: 1; grid-row: auto; align-self: start; position: sticky; top: var(--header-main); z-index: 20;
    margin-inline: calc(var(--gutter) * -1); background: var(--white); border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-1);
  }
  .pd-side-in { position: static; max-height: none; overflow: visible; padding: 0; }
  .pd-call, .pd-side-rev, .pd-toc-h { display: none; }
  .pd-toc { margin: 0; }
  .pd-toc-list { display: flex; margin: 0; padding-inline: calc(var(--gutter) - 10px); border: 0; overflow-x: auto; scrollbar-width: none; }
  .pd-toc-list::-webkit-scrollbar { display: none; }
  .pd-toc-list li { flex: none; }
  .pd-toc-list a { padding: 14px 10px 12px; margin: 0; border-left: 0; border-bottom: 2px solid transparent; white-space: nowrap; }
  .pd-toc-list a[aria-current="true"] { border-bottom-color: var(--gold); }
  .pd-toc-no, .pd-toc-n { display: none; }
  .pd-main { grid-column: 1; grid-row: auto; padding-top: 56px; }
  .pd-block { scroll-margin-top: 64px; padding-block: 60px; }
  .pd-others-list { grid-template-columns: minmax(0, 1fr); }

  .pidx-grid { grid-template-columns: minmax(0, 1fr); }
  .pidx-who { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 28px; }

  .recs-jump-a { padding-right: 48px; }
  .recs-jump-ic { right: 12px; }
  .recs-grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .recs-side-in { position: static; }
  .recs-side-in .pbars { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
  .recs-side-in .pbars-note { grid-column: 1 / -1; }
  .recs-photos ul { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .recs-photos li:nth-child(n+4) { display: none; }
}

@media (max-width: 767px) {
  .pd-main { padding-top: 44px; }
  .pd-block { padding-block: 52px; }
  .pd-bh { margin-bottom: 26px; }
  .pd-bh-title { font-size: 26px; }
  .pd-block--overview .pd-bh-title { font-size: 28px; }
  .pd-bh-desc { font-size: 15px; }
  .pd-lead p { font-size: 17px; line-height: 1.8; }
  .pd-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 30px; }
  .pd-fact, .pd-fact:nth-child(4) { padding: 14px 12px 14px; border-left: 1px solid var(--line); border-top: 0; }
  .pd-fact:nth-child(odd) { padding-left: 0; border-left: 0; }
  .pd-fact:nth-child(n+3) { border-top: 1px solid var(--line); }
  .pd-aud { grid-template-columns: minmax(0, 1fr); }
  .pd-aud-d { padding-left: 0; }
  .pd-flow-wrap { margin-bottom: 36px; }
  .pd-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pd-flow li, .pd-flow li:nth-child(3n+1) { border-left: 1px solid var(--line); }
  .pd-flow li:nth-child(odd) { border-left: 0; }
  .pd-flow li a, .pd-flow li:nth-child(3n+1) a { padding: 14px 10px 16px 14px; }
  .pd-flow li:nth-child(odd) a { padding-left: 0; }
  .pd-flow li:nth-child(n+3) { border-top: 1px solid var(--line); }
  .pd-flow-name { font-size: 16.5px; }
  .pd-flow-per { font-size: 13.5px; }
  .pd-step { padding-bottom: 10px; }
  .pd-step::before { left: 17.5px; top: 42px; }
  .pd-step-sum { grid-template-columns: 36px minmax(0, 1fr) 28px; column-gap: 14px; }
  .pd-step-no { width: 36px; height: 36px; font-size: 13px; }
  .pd-step-name { font-size: 17.5px; }
  .pd-step-ic { width: 28px; }
  .pd-step-body { padding: 4px 0 18px 50px; }
  .pd-step-meta > div { grid-template-columns: 56px minmax(0, 1fr); font-size: 14px; }
  .pd-step-desc { font-size: 15.5px; }
  .pd-step-hw { padding: 16px 16px 18px; }
  /* 표 → 줄마다 한 덩어리 */
  .pd-dl thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .pd-dl, .pd-dl tbody, .pd-dl tr, .pd-dl tbody th, .pd-dl td { display: block; width: auto !important; }
  .pd-dl tr { padding: 16px 0; border-bottom: 1px solid var(--line); }
  .pd-table-wrap { border-top-width: 2px; }
  .pd-dl tbody th, .pd-dl td { padding: 0; border: 0; }
  .pd-dl tbody th { font-size: 15.5px; }
  .pd-dl td { margin-top: 4px; font-size: 15px; }
  .pd-dl td.pd-dl-law { margin-top: 6px; font-size: 13px; }
  .pd-tools { margin: -6px 0 10px; }
  .pd-svc-g summary { gap: 10px; padding: 18px 0; }
  .pd-svc-h { gap: 10px; font-size: 17px; }
  .pd-svc-no { width: auto; }
  .pd-svc-n { display: none; }
  .pd-svc-list { padding: 0 0 20px; }
  .pd-svc-list li.has-term { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .pd-svc-checks { grid-template-columns: minmax(0, 1fr); padding: 0 0 22px; }
  .pd-str, .pd-str--n4 { grid-template-columns: minmax(0, 1fr); }
  .pd-photos ul { gap: 8px; }
  .pd-equip .equip-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 10px; }
  .pd-rec-top { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .pd-rec-top .pd-rec-big { grid-row: auto; }
  .pd-rec-big { font-size: 68px; }
  .pd-rec-u { font-size: 22px; }
  .pd-rec-comp .pbars { grid-template-columns: minmax(0, 1fr); }
  .pd-rec-one { flex-direction: column; align-items: flex-start; gap: 12px; padding: 24px 20px; }
  .pd-rec-one .pd-rec-big { font-size: 60px; }
  /* 구성원 사진 띠: 모바일은 옆으로 넘겨 보는 한 줄 */
  .pd-people, .pd-people--n4, .pd-people--n3 {
    display: flex; gap: 2px; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter);
    overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); scrollbar-width: none;
  }
  .pd-people::-webkit-scrollbar { display: none; }
  .pd-people .pcard { flex: 0 0 40%; scroll-snap-align: start; }
  .pd-people .pcard-name { font-size: 16.5px; }
  .pd-people-foot { flex-direction: column; align-items: flex-start; }
  .pd-block--faq .faq-a { padding: 0 4px 22px; }
  .pd-guides .ins-feature { padding: 26px 20px 22px; }
  .pd-guides .ins-feature-q { font-size: 21px; }
  .pd-src summary { font-size: 16px; }
  .pd-src-groups { columns: 1; }
  .pd-callout { padding: 26px 20px; }
  .pd-callout-n { gap: 10px; font-size: 31px; }
  .pd-callout-n .ic { width: 22px; height: 22px; }
  .pd-callout-btns, .pd-callout-btns .btn { width: 100%; }
  .pd-others { padding-block: 48px; }

  .pidx-fig { aspect-ratio: 16 / 9; }
  .pidx-body { padding: 24px 20px 22px; }
  .pidx-name { font-size: 25px; }
  .pidx-ans { font-size: 17px; }
  .pidx-svcs { grid-template-columns: minmax(0, 1fr); }
  .pidx-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 14px; }
  .pidx-facts > div { padding: 0 14px; }
  .pidx-facts > div:nth-child(odd) { padding-left: 0; border-left: 0; }
  .pidx-who { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .pidx-num-card { padding: 28px 20px 24px; }

  .recs-jump-in { grid-template-columns: minmax(0, 1fr); }
  .recs-jump-a, .recs-jump-a + .recs-jump-a { padding: 20px 44px 20px 0; border-left: 0; }
  .recs-jump-a + .recs-jump-a { border-top: 1px solid var(--line); }
  .recs-jump-a + .recs-jump-a::before { left: 0; }
  .recs-jump-v { font-size: 17px; }
  .recs-jump-v strong { font-size: 21px; }
  .recs-big { font-size: 76px; }
  .recs-big-u { font-size: 24px; }
  .recs-side-in .pbars { grid-template-columns: minmax(0, 1fr); }
  .recs-reset { margin-left: 0; }
  .recs-photos ul { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .recs-photos li:nth-child(n+3) { display: none; }
  .recs-def-stats { padding: 26px 20px 22px; }
  .drows { padding: 2px 16px 4px; }
  .phero--pidx .phero-bg img { position: absolute; left: 0; bottom: 0; height: 135%; }
}

@media (max-width: 767px) {
  /* 숫자 카드: 모바일은 한 줄에 하나 */
  .recs-def-stats .stats { --cols: 1 !important; row-gap: 0; }
  .recs-def-stats .stat { padding: 16px 0; border-left: 0; border-top: 1px solid var(--line); }
  .recs-def-stats .stat:first-child { padding-top: 0; border-top: 0; }
  .recs-def-stats .stat:last-child { padding-bottom: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .pd-step-no, .pidx-fig img, .recs-jump-a::before { transition: none; }
}
@media print {
  .pd-side, .pd-tools, .pd-others { display: none !important; }
  .pd-layout { grid-template-columns: 1fr; }
}

/* 소송 단계별 역할표 */
.pd-roles { margin-top: 40px; }
.pd-roles .pd-steps-h { margin-bottom: 14px; }
.pd-roles-t { width: 100%; table-layout: fixed; border-top: 2px solid var(--ink); font-size: 14.5px; line-height: 1.6; }
.pd-roles-t thead th { padding: 11px 12px; background: var(--bg-soft); border-bottom: 1px solid var(--line-2); font-size: 13px; font-weight: 700; color: var(--ink-2); text-align: left; }
.pd-roles-t thead th:first-child { width: 14%; }
.pd-roles-t tbody th, .pd-roles-t td { padding: 14px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.pd-roles-t tbody th { font-weight: 700; color: var(--ink); }
.pd-roles-t td { color: var(--ink-2); }
@media (max-width: 767px) {
  .pd-roles-t, .pd-roles-t tbody, .pd-roles-t tr, .pd-roles-t tbody th, .pd-roles-t td { display: block; width: 100%; }
  .pd-roles-t thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .pd-roles-t tr { padding: 14px 0; border-bottom: 1px solid var(--line); }
  .pd-roles-t tbody th { padding: 0 0 8px; border: 0; font-size: 16px; }
  .pd-roles-t td { display: grid; grid-template-columns: 96px minmax(0, 1fr); column-gap: 12px; padding: 6px 0; border: 0; }
  .pd-roles-t td::before { content: attr(data-label); font-size: 13px; font-weight: 700; color: var(--ink-3); }
}

/* 큰 숫자 단위('곳 사업지역') 안에 묶인 각주 번호 — 줄이 바뀌어도 단위와 함께 움직인다 */
.recs-big-u sup.fn, .pd-rec-u sup.fn { margin-left: 4px; font-size: 13px; vertical-align: 1em; letter-spacing: 0; }