/* =========================================================================
   법률사무소 표준 스타일 — style.css   (CSS 전부 이 한 파일)
   -------------------------------------------------------------------------
   구조: 단계가 진행될 때마다 아래에 섹션을 이어 붙입니다. 파일은 항상 하나.
     [1] BASE / 디자인 토큰      ← 1단계 (완료)
     [2] 헤더 · 푸터             ← 2단계 (이번)
     [3] 하위 페이지             ← 3단계 (예정)
     [4] 홈                      ← 4단계 (예정)

   값 출처: 토스(Toss) design.md 토큰 (시각 요소만 차용). 글꼴 Pretendard.
   ▷ [고정]      : 변수 이름·스케일·구조 → 사이트마다 그대로 재사용
   ▷ [사이트가변] : BRAND 블록의 강조색 계열만 교체
   ========================================================================= */


/* ═════════════════════════════════════════════════════════════════════════
   [1] BASE / 디자인 토큰
   ═════════════════════════════════════════════════════════════════════════ */

/* ── 웹폰트 (Pretendard) ─────────────────────────────────────────────────
   폰트는 이 파일의 @import가 아니라 WPCode 스니펫에서 <link>로 로드합니다.
   (@import는 캐시·플러그인 환경에서 로드 실패가 잦아 <link> 방식으로 이관) */

:root {

  /* ── 글꼴 [고정] ──────────────────────────────────────────────────────── */
  --font-sans:
    "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
    "SF Pro Text", "SF Pro", "Apple SD Gothic Neo", "Noto Sans KR",
    Roboto, "Helvetica Neue", Arial, sans-serif;

  /* ── BRAND — 단일 강조색 [사이트가변] ──────────────────────────────────
     새 사이트는 보통 이 블록만 교체. "화면당 강조색 하나" 규율 유지. */
  --brand:         #3182F6;   /* 강조색 — 핵심 CTA 1개에만 예약 */
  --brand-pressed: #2272EB;   /* 눌림(hover/active) */
  --brand-deep:    #1B64DA;   /* 더 짙은 단계 */
  --brand-weak:    #E8F3FF;   /* 강조색 옅은 배경 */

  /* ── 중성색 — 차가운 블루 톤 그레이스케일 [고정] ───────────────────────── */
  --grey-900: #191F28;   /* 기본 텍스트·제목 (순검정 아님) */
  --grey-800: #333D4B;
  --grey-700: #4E5968;   /* 보조 텍스트 */
  --grey-600: #6B7684;
  --grey-500: #8B95A1;   /* 흐린 텍스트·캡션 */
  --grey-400: #B0B8C1;   /* 비활성·강한 선 */
  --grey-300: #D1D6DB;
  --grey-200: #E5E8EB;   /* 기본 구분선·보더 */
  --grey-100: #F2F4F6;   /* 보조 면 */
  --grey-50:  #F9FAFB;   /* 가장 옅은 면 */
  --white:    #FFFFFF;

  /* ── 시맨틱 색 [고정] ─────────────────────────────────────────────────── */
  --red-500:    #F04452;   /* 오류·위험 */
  --green-500:  #15B76F;   /* 성공 */
  --orange-500: #FF8A00;   /* 경고 */

  /* ── 의미 별칭 [고정] ─────────────────────────────────────────────────── */
  --text-primary:   var(--grey-900);
  --text-secondary: var(--grey-700);
  --text-tertiary:  var(--grey-500);
  --text-inverse:   var(--white);
  --text-brand:     var(--brand);
  --bg-base:        var(--white);
  --bg-secondary:   var(--grey-100);
  --bg-weak:        var(--grey-50);
  --bg-brand-weak:  var(--brand-weak);
  --line-default:   var(--grey-200);
  --line-strong:    var(--grey-400);
  --line-subtle:    rgba(0, 0, 0, 0.08);

  /* ── 타입 램프 [고정] — 토스 값 그대로 (px→rem, 기준 16px) ─────────────── */
  --fs-display-1: 3.5rem;    /* 56 */
  --fs-display-2: 2.5rem;    /* 40 */
  --fs-h1:        1.75rem;   /* 28 */
  --fs-h2:        1.5rem;    /* 24 */
  --fs-h3:        1.375rem;  /* 22 */
  --fs-h4:        1.25rem;   /* 20 */
  --fs-title-1:   1.125rem;  /* 18 */
  --fs-title-2:   1.0625rem; /* 17 */
  --fs-body-1:    1.0625rem; /* 17 — 읽는 본문 기본 */
  --fs-body-2:    0.9375rem; /* 15 */
  --fs-body-3:    0.8125rem; /* 13 */
  --fs-caption:   0.75rem;   /* 12 */
  --fs-caption-s: 0.6875rem; /* 11 */

  /* 굵기 [고정] */
  --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700;

  /* 행간 [고정] */
  --lh-tight: 1.25; --lh-heading: 1.30; --lh-title: 1.45; --lh-body: 1.50;

  /* ── 여백 사다리 [고정] — 4px 기준 ─────────────────────────────────────── */
  --space-1: 0.25rem; --space-2: 0.5rem;  --space-3: 0.75rem; --space-4: 1rem;
  --space-5: 1.25rem; --space-6: 1.5rem;  --space-7: 1.75rem; --space-8: 2rem;
  --space-10: 2.5rem; --space-12: 3rem;   --space-16: 4rem;   --space-20: 5rem;

  /* ── 라운드 사다리 [고정] ─────────────────────────────────────────────── */
  --radius-xs: 4px;  --radius-s: 8px;   --radius-m: 12px; --radius-l: 14px;
  --radius-xl: 16px; --radius-2xl: 20px; --radius-3xl: 24px; --radius-4xl: 32px;
  --radius-full: 999px;

  /* ── 그림자 [고정] — 네이비 저알파 ────────────────────────────────────── */
  --shadow-rgb: 4, 21, 46;
  --shadow-1: 0 1px 2px rgba(var(--shadow-rgb), 0.04), 0 1px 1px rgba(var(--shadow-rgb), 0.04);
  --shadow-2: 0 4px 12px rgba(var(--shadow-rgb), 0.06), 0 1px 2px rgba(var(--shadow-rgb), 0.04);
  --shadow-3: 0 12px 32px rgba(var(--shadow-rgb), 0.10), 0 2px 6px rgba(var(--shadow-rgb), 0.06);
  --shadow-toast: 0 8px 24px rgba(var(--shadow-rgb), 0.16);

  /* ── 모션 [고정] ──────────────────────────────────────────────────────── */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 120ms; --dur-base: 200ms; --dur-slow: 320ms;

  /* ── 레이아웃 [고정] ──────────────────────────────────────────────────── */
  --container: 1200px;
  --container-narrow: 760px;
  --gutter: clamp(1rem, 4vw, 1.5rem);
  --header-h: 72px;
  --topbar-h: 44px;   /* 상단 안내 띠 높이 (17px 텍스트 수용) */
}

/* ── 기본 리셋·타이포 ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: var(--font-sans);
  font-size: var(--fs-body-1);
  line-height: var(--lh-body);
  letter-spacing: -0.005em;
  color: var(--text-primary);
  background: var(--bg-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  word-break: keep-all;
  overflow-wrap: break-word;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-sans);
  color: var(--text-primary);
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
  margin: 0 0 var(--space-4);
  word-break: keep-all;
}
h1 { font-size: var(--fs-h1); letter-spacing: -0.02em; }
h2 { font-size: var(--fs-h2); letter-spacing: -0.02em; }
h3 { font-size: var(--fs-h3); letter-spacing: -0.015em; }
h4 { font-size: var(--fs-h4); line-height: var(--lh-title); letter-spacing: -0.015em; }

p { margin: 0 0 var(--space-4); }
a { color: var(--text-brand); text-decoration: none; transition: color var(--dur-base) var(--ease); }
a:hover { color: var(--brand-pressed); }
/* 사이트 전체 링크 밑줄 제거 — 테마가 강제하는 밑줄까지 확실히 무력화 */
a, a:link, a:visited, a:hover, a:focus, a:active { text-decoration: none !important; }
strong, b { font-weight: var(--fw-bold); }
img, svg { max-width: 100%; height: auto; }
::selection { background: var(--brand-weak); color: var(--grey-900); }

/* 테마 기본 폰트(GeneratePress 등)를 이기도록 사이트 전체 Pretendard 강제 */
body, button, input, select, textarea, optgroup,
h1, h2, h3, h4, h5, h6 { font-family: var(--font-sans) !important; }

/* ── 타입 램프 유틸리티 ───────────────────────────────────────────────── */
.display-1 { font-size: var(--fs-display-1); line-height: var(--lh-heading); letter-spacing: -0.005em; font-weight: var(--fw-bold); }
.display-2 { font-size: var(--fs-display-2); line-height: 1.2; letter-spacing: -0.02em; font-weight: var(--fw-bold); }
.title-1 { font-size: var(--fs-title-1); line-height: var(--lh-title); letter-spacing: -0.01em; font-weight: var(--fw-semibold); }
.title-2 { font-size: var(--fs-title-2); line-height: var(--lh-title); letter-spacing: -0.01em; font-weight: var(--fw-semibold); }
.body-1 { font-size: var(--fs-body-1); line-height: var(--lh-body); letter-spacing: -0.005em; }
.body-2 { font-size: var(--fs-body-2); line-height: var(--lh-body); letter-spacing: -0.005em; }
.body-3 { font-size: var(--fs-body-3); line-height: var(--lh-body); }
.label-l { font-size: var(--fs-body-1); line-height: var(--lh-tight); letter-spacing: -0.005em; font-weight: var(--fw-bold); }
.label-m { font-size: var(--fs-body-2); line-height: var(--lh-tight); letter-spacing: -0.005em; font-weight: var(--fw-semibold); }
.label-s { font-size: var(--fs-body-3); line-height: var(--lh-tight); font-weight: var(--fw-semibold); }
.caption { font-size: var(--fs-caption); line-height: 1.4; font-weight: var(--fw-medium); color: var(--text-tertiary); }

.text-secondary { color: var(--text-secondary); }
.text-tertiary  { color: var(--text-tertiary); }
.text-brand     { color: var(--text-brand); }
.u-tnum { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

/* ── 레이아웃 헬퍼 ────────────────────────────────────────────────────── */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.container--narrow { max-width: var(--container-narrow); }
.section { padding-block: clamp(var(--space-12), 6vw, var(--space-20)); }
.section--alt  { background: var(--bg-secondary); }
.section--weak { background: var(--bg-weak); }
.reading { line-height: 1.7; }
.reading p { margin-bottom: var(--space-5); }

/* ── 반복 UI 유틸리티 ─────────────────────────────────────────────────── */
.eyebrow { display: inline-block; font-size: var(--fs-body-3); font-weight: var(--fw-bold); letter-spacing: -0.005em; color: var(--text-brand); margin: 0 0 var(--space-3); }
.lead { font-size: var(--fs-title-1); line-height: var(--lh-title); color: var(--text-secondary); }

/* ★ 마케팅 강조 문구 전용 [네이버 SEO 규칙] — 시각은 제목급, 마크업은 <p> */
.mkt-title { font-size: var(--fs-h2); line-height: var(--lh-heading); letter-spacing: -0.02em; font-weight: var(--fw-bold); color: var(--text-primary); margin: 0 0 var(--space-4); }
.mkt-title--lg { font-size: var(--fs-display-2); letter-spacing: -0.02em; line-height: 1.2; }

.rule-accent { width: 40px; height: 3px; background: var(--brand); border: 0; border-radius: var(--radius-full); margin: var(--space-4) 0; }

/* 버튼 — 토스 사이즈/라운드 페어링 (XL16 / L14 / M12 / S10) */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); font-family: var(--font-sans); line-height: 1; white-space: nowrap; border: 1px solid transparent; cursor: pointer; transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease); }
.btn--xl { height: 56px; padding: 0 var(--space-6); border-radius: var(--radius-xl); font-size: var(--fs-body-1); font-weight: var(--fw-bold); }
.btn--l  { height: 48px; padding: 0 var(--space-5); border-radius: var(--radius-l); font-size: var(--fs-body-1); font-weight: var(--fw-bold); }
.btn--m  { height: 40px; padding: 0 var(--space-4); border-radius: var(--radius-m); font-size: var(--fs-body-2); font-weight: var(--fw-semibold); }
.btn--s  { height: 32px; padding: 0 var(--space-3); border-radius: 10px; font-size: var(--fs-body-3); font-weight: var(--fw-semibold); }
.btn--pill { border-radius: var(--radius-full); }
.btn--primary { background: var(--brand); color: var(--text-inverse); }
.btn--primary:hover, .btn--primary:focus, .btn--primary:active { color: var(--text-inverse); }
.btn--primary:hover { background: var(--brand-pressed); }
.btn--primary:active { background: var(--brand-deep); }
.btn--neutral { background: var(--grey-100); color: var(--grey-800); }
.btn--neutral:hover, .btn--neutral:focus, .btn--neutral:active { color: var(--grey-800); }
.btn--neutral:hover { background: var(--grey-200); }
.btn--ghost { background: transparent; color: var(--grey-700); border-color: var(--line-default); }
.btn--ghost:hover, .btn--ghost:focus, .btn--ghost:active { color: var(--grey-900); }
.btn--ghost:hover { border-color: var(--line-strong); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.30; pointer-events: none; }

.bottom-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 900; padding: var(--space-4) var(--gutter) calc(var(--space-4) + env(safe-area-inset-bottom)); background: linear-gradient(to top, var(--white) 72%, transparent); }
.bottom-cta .btn { width: 100%; }

.card { background: var(--bg-base); border: 1px solid var(--line-default); border-radius: var(--radius-xl); padding: var(--space-6); }
.card--3xl { border-radius: var(--radius-3xl); }

/* ── 접근성·모션 최소 기준 ────────────────────────────────────────────── */
:where(a, button, input, select, textarea, [tabindex]):focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: var(--radius-xs); }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } }


/* ═════════════════════════════════════════════════════════════════════════
   [2] 헤더 · 푸터
   ═════════════════════════════════════════════════════════════════════════ */

/* 테마 기본 헤더/푸터 숨김 (GeneratePress: #masthead / .site-footer) — 우리 뼈대로 대체 */
#masthead, .site-footer { display: none !important; }

/* 짧은 페이지에서도 푸터가 위로 뜨지 않게(선택적 안전장치) */
html, body { min-height: 100%; }

/* 상단 안내 띠 (헤더 위, 헤더와 함께 sticky) — 모든 화면 표시 */
.kch-topbar { display: flex; position: sticky; top: 0; z-index: 1001; align-items: center; justify-content: center; height: var(--topbar-h); background: var(--grey-900); color: var(--white); padding-inline: var(--gutter); text-align: center; }
.kch-topbar p { margin: 0; font-size: var(--fs-body-1); letter-spacing: -0.02em; line-height: 1.3; }
.kch-topbar strong { font-weight: var(--fw-bold); }

/* ── 헤더 ─────────────────────────────────────────────────────────────── */
.kch-header {
  position: sticky; top: var(--topbar-h); z-index: 1000;
  background: var(--white);
  border-bottom: 1px solid var(--line-default);
  transition: box-shadow var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease);
}
.kch-header.is-scrolled { box-shadow: var(--shadow-2); border-bottom-color: transparent; }

.kch-inner {
  display: flex; align-items: center; gap: var(--space-4);
  height: var(--header-h);
  max-width: var(--container); margin-inline: auto;
  padding-inline: var(--gutter);
}

.kch-logo { display: inline-flex; align-items: center; margin-right: auto; }
.kch-logo img { height: 40px; width: auto; display: block; }

/* PC 텍스트 메뉴 (JS로 채움) */
.kch-nav { display: flex; align-items: center; gap: var(--space-1); }
.kch-nav a {
  display: inline-flex; align-items: center; height: 40px; padding: 0 var(--space-3);
  font-size: var(--fs-body-1); font-weight: var(--fw-semibold); letter-spacing: -0.01em;
  color: var(--grey-800); white-space: nowrap; border-radius: var(--radius-s);
  transition: color var(--dur-base) var(--ease), background var(--dur-base) var(--ease); cursor: pointer;
}
.kch-nav a:hover { color: var(--grey-900); background: var(--grey-50); }

/* 전화 박스 — 헤더 유일의 강조 요소 */
.kch-phone {
  display: inline-flex; align-items: center; gap: var(--space-2);
  height: 44px; padding: 0 var(--space-4);
  background: var(--brand); color: var(--text-inverse);
  border-radius: var(--radius-m); font-weight: var(--fw-bold);
  font-size: var(--fs-body-1); letter-spacing: -0.01em; white-space: nowrap;
  transition: background var(--dur-fast) var(--ease);
}
.kch-phone:hover { background: var(--brand-pressed); color: var(--text-inverse); }
.kch-phone svg { width: 20px; height: 20px; fill: currentColor; flex: 0 0 auto; }
.kch-phone-num { font-variant-numeric: normal; }

/* 햄버거 (PC에선 숨김) */
.kch-burger { display: none; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; margin: 0; background: none; border: 0; cursor: pointer; color: var(--grey-900); }
.kch-burger svg { width: 26px; height: 26px; }
.kch-burger .kch-icon-close { display: none; }
.kch-burger.is-open .kch-icon-open { display: none; }
.kch-burger.is-open .kch-icon-close { display: block; }

/* 모바일 드롭다운 (JS로 채움) */
.kch-dropdown {
  position: fixed; left: 0; right: 0; top: calc(var(--topbar-h) + var(--header-h)); z-index: 999;
  background: var(--white); box-shadow: var(--shadow-3); border-top: 1px solid var(--line-default);
  max-height: calc(100vh - var(--topbar-h) - var(--header-h)); overflow-y: auto;
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity var(--dur-base) var(--ease), transform var(--dur-base) var(--ease), visibility var(--dur-base);
}
.kch-dropdown.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
.kch-dropdown a { display: block; padding: var(--space-4) var(--gutter); font-size: var(--fs-body-1); font-weight: var(--fw-semibold); color: var(--grey-800); border-bottom: 1px solid var(--line-default); cursor: pointer; }
.kch-dropdown a:last-child { border-bottom: 0; }
.kch-dropdown a:hover { background: var(--grey-50); }

body.kch-menu-open { overflow: hidden; }

/* PC(>1024): 드롭다운 항상 숨김 */
@media (min-width: 1025px) { .kch-dropdown { display: none; } }

/* 모바일/태블릿(≤1024): 햄버거 모드 + 3분할 [햄버거][로고 중앙][전화 아이콘] */
@media (max-width: 1024px) {
  :root { --header-h: 58px; --topbar-h: 38px; }
  .kch-topbar p { font-size: var(--fs-body-3); }
  .kch-nav { display: none; }
  .kch-burger { display: inline-flex; order: 1; }
  .kch-logo { order: 2; margin: 0 auto; }
  .kch-logo img { height: 30px; }
  .kch-phone { order: 3; padding: 0; width: 44px; justify-content: center; }
  .kch-phone-num { display: none; }
  .kch-inner { gap: var(--space-2); }
}

/* ── 푸터 ─────────────────────────────────────────────────────────────── */
.kch-footer { background: var(--grey-50); border-top: 1px solid var(--line-default); padding-block: var(--space-12); color: var(--text-secondary); }
.kch-footer-inner { max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.kch-footer-name { font-size: var(--fs-title-2); font-weight: var(--fw-bold); color: var(--grey-900); margin: 0 0 var(--space-4); }
.kch-footer-info { font-size: var(--fs-body-3); line-height: 1.7; margin: 0 0 var(--space-3); color: var(--text-secondary); }
.kch-footer-contact { font-size: var(--fs-body-3); line-height: 1.7; margin: 0 0 var(--space-5); }
.kch-footer-contact a { color: var(--text-secondary); }
.kch-footer-contact a:hover { color: var(--grey-900); }
.kch-footer-copy { font-size: var(--fs-caption); color: var(--text-tertiary); margin: 0; }
.kch-sep { color: var(--grey-300); margin: 0 var(--space-1); }

/* 푸터 상호링크 — 접이식(details), 속은 실제 링크 */
.kch-footer-dd { margin-top: var(--space-5); max-width: 220px; }
.kch-footer-dd summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); cursor: pointer; list-style: none; min-width: 160px; padding: 8px 12px; font-size: var(--fs-body-3); font-weight: var(--fw-semibold); color: var(--grey-700); background: var(--white); border: 1px solid var(--line-default); border-radius: var(--radius-s); transition: border-color var(--dur-base) var(--ease); }
.kch-footer-dd summary::-webkit-details-marker { display: none; }
.kch-footer-dd summary::after { content: ""; width: 7px; height: 7px; border-right: 2px solid var(--grey-500); border-bottom: 2px solid var(--grey-500); transform: rotate(45deg); transition: transform var(--dur-base) var(--ease); flex: 0 0 auto; margin-bottom: 2px; }
.kch-footer-dd[open] summary::after { transform: rotate(-135deg); margin-bottom: -2px; }
.kch-footer-dd summary:hover { border-color: var(--line-strong); }
.kch-footer-dd-list { display: flex; flex-direction: column; margin-top: var(--space-2); border: 1px solid var(--line-default); border-radius: var(--radius-s); overflow: hidden; }
.kch-footer-dd-list a { padding: 10px 12px; font-size: var(--fs-body-3); color: var(--grey-700); background: var(--white); border-bottom: 1px solid var(--line-default); transition: background var(--dur-base) var(--ease), color var(--dur-base) var(--ease); }
.kch-footer-dd-list a:last-child { border-bottom: 0; }
.kch-footer-dd-list a:hover { background: var(--grey-50); color: var(--grey-900); }


/* ── 테마 기본 버튼 상태색 무력화 ────────────────────────────────────────
   GeneratePress는 button:hover/:focus 에 회색 배경(#3f4047)을 강제함.
   우리 버튼은 자기 색을 유지하고, 키보드 포커스는 위의 :focus-visible
   파란 외곽선으로만 표시되게 함. (탭 시 회색 박스 잔상 제거) */
* { -webkit-tap-highlight-color: transparent; }

/* 아이콘 전용 버튼(햄버거·X)은 어떤 상태에서도 배경 없음 */
.kch-burger,
.kch-burger:hover,
.kch-burger:focus,
.kch-burger:active { background: none; color: var(--grey-900); box-shadow: none; }

/* .btn 계열: focus 상태에서도 자기 배경 유지 (hover/active는 기존 규칙대로) */
.btn:focus:not(:hover) { box-shadow: none; }
.btn--primary:focus:not(:hover) { background: var(--brand); color: var(--text-inverse); }
.btn--neutral:focus:not(:hover) { background: var(--grey-100); color: var(--grey-800); }
.btn--ghost:focus:not(:hover)   { background: transparent; color: var(--grey-700); }


/* ── 플로팅: 빠른 상담 (PC 우측 퀵메뉴 / 모바일 하단 바) ─────────────────── */

/* PC 우측 세로 퀵메뉴 — 항상 표시 */
.kch-quick {
  position: fixed; right: 16px; top: 44%; transform: translateY(-50%); z-index: 950;
  width: 90px; overflow: hidden; display: flex; flex-direction: column;
  background: var(--white); border: 1px solid var(--line-default);
  border-radius: var(--radius-2xl); box-shadow: var(--shadow-3);
}
.kch-quick-tel { text-align: center; background: var(--brand); color: var(--white); padding: var(--space-3) var(--space-1); }
.kch-quick-tel-label { display: block; font-size: var(--fs-body-2); font-weight: var(--fw-semibold); letter-spacing: -0.02em; margin-bottom: var(--space-2); }
.kch-quick-tel-num { display: block; font-size: var(--fs-body-2); font-weight: var(--fw-bold); line-height: 1.25; letter-spacing: -0.02em; }
.kch-quick-item { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: var(--space-3) var(--space-1); color: var(--grey-700); transition: background var(--dur-base) var(--ease), color var(--dur-base) var(--ease); }
.kch-quick-item:hover { background: var(--grey-50); color: var(--grey-900); }
.kch-quick-ico { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; }
.kch-quick-ico svg { width: 30px; height: 30px; display: block; }
.kch-ico-brand svg { border-radius: 8px; }
.kch-quick-label { font-size: var(--fs-body-3); font-weight: var(--fw-semibold); letter-spacing: -0.02em; }

/* 모바일 하단 바 — 기본 숨김, ≤1024에서 표시 */
.kch-mobilebar { display: none; }

@media (max-width: 1024px) {
  .kch-quick { display: none; }

  .kch-mobilebar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 950;
    display: flex; gap: var(--space-2);
    background: var(--white); border-top: 1px solid var(--line-default);
    box-shadow: 0 -2px 12px rgba(var(--shadow-rgb), 0.08);
    padding: var(--space-2);
    padding-bottom: calc(var(--space-2) + env(safe-area-inset-bottom));
  }
  body { padding-bottom: 88px; }   /* 하단 바에 콘텐츠가 가리지 않도록 */

  .kch-mbar-kakao, .kch-mbar-phone { height: 54px; border-radius: var(--radius-m); display: flex; align-items: center; justify-content: center; }
  .kch-mbar-kakao { flex: 0 0 54px; background: transparent; border-radius: 0; padding: 0; }
  .kch-mbar-kakao .kch-mbar-ico { width: 54px; height: 54px; display: flex; align-items: center; justify-content: center; }
  .kch-mbar-kakao .kch-mbar-ico svg { width: 54px; height: 54px; display: block; border-radius: 14px; }
  .kch-mbar-phone { flex: 1 1 auto; gap: var(--space-2); background: var(--brand); color: var(--white); }
  .kch-mbar-kakao:hover, .kch-mbar-kakao:focus, .kch-mbar-kakao:active,
  .kch-mbar-phone:hover, .kch-mbar-phone:focus, .kch-mbar-phone:active { color: var(--white); }
  .kch-mbar-phone .kch-mbar-ico svg { width: 30px; height: 30px; display: block; fill: currentColor; }
  .kch-mbar-phone .kch-mbar-txt { display: flex; align-items: center; gap: 6px; line-height: 1; }
  .kch-mbar-phone .kch-mbar-pre { font-size: var(--fs-body-1); font-weight: var(--fw-semibold); }
  .kch-mbar-phone .kch-mbar-txt strong { font-size: 1.25rem; font-weight: var(--fw-bold); letter-spacing: -0.02em; }
}

/* ═════════════════════════════════════════════════════════════════════════
   [3] 하위 페이지
   ═════════════════════════════════════════════════════════════════════════ */

/* ── 변호사 소개 (/lawyer) — 920px 단일 폭, 좌측 기준선 통일 ─────────────── */
.lw-inner { max-width: 920px; margin-inline: auto; padding-inline: var(--gutter); padding-block: clamp(var(--space-10), 6vw, var(--space-16)); }

.lw-hero { display: grid; grid-template-columns: 300px 1fr; gap: clamp(var(--space-6), 4vw, var(--space-8)); align-items: start; }
.lw-hero-media img { width: 100%; height: auto; display: block; border-radius: var(--radius-2xl); box-shadow: var(--shadow-2); }
.lw-hero-body { padding-top: var(--space-1); }
.lw-hero-body h1 { font-size: var(--fs-display-2); margin: var(--space-2) 0 var(--space-4); }
.lw-hero-role { font-size: var(--fs-title-1); font-weight: var(--fw-semibold); color: var(--grey-800); line-height: 1.45; margin: 0 0 var(--space-4); }
.lw-hero-desc { font-size: var(--fs-title-2); line-height: 1.65; color: var(--text-secondary); margin: 0; }

.lw-section { margin-top: clamp(var(--space-8), 5vw, var(--space-10)); padding-top: clamp(var(--space-8), 5vw, var(--space-10)); border-top: 1px solid var(--line-default); }
.lw-section h2 { font-size: var(--fs-h3); margin: 0 0 var(--space-4); }

.lw-list { list-style: none; margin: 0; padding: 0; }
.lw-list li { position: relative; padding: var(--space-3) 0 var(--space-3) var(--space-5); border-bottom: 1px solid var(--line-default); font-size: var(--fs-body-1); color: var(--grey-800); }
.lw-list li:last-child { border-bottom: 0; }
.lw-list li::before { content: ""; position: absolute; left: 2px; top: 50%; width: 6px; height: 6px; border-radius: 50%; background: var(--brand); transform: translateY(-50%); }
.lw-list--plain li::before { background: var(--grey-400); }

@media (max-width: 768px) {
  .lw-hero { grid-template-columns: 1fr; gap: var(--space-6); }
  .lw-hero-media { max-width: 220px; }
  .lw-hero-body h1 { font-size: var(--fs-h1); }
}

/* ── 하위 페이지/홈: GeneratePress 콘텐츠 래퍼 무력화 → 우리 레이아웃이 전체폭 통제 ──
   (제목 h1·사이드바는 스니펫 PHP가 소스에서 제거. 대표이미지는 페이지에서 미지정.) */
body { background: var(--bg-base) !important; }   /* 테마 회색 배경 → 흰 캔버스 */
.page #page,
.page .site-content,
.page .content-area,
.page .site-main { max-width: none !important; width: 100% !important; margin: 0 !important; padding: 0 !important; }
.page .inside-article { margin: 0 !important; padding: 0 !important; background: none !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important; }
.page .entry-content { margin: 0 !important; padding: 0 !important; }

/* ── 업무사례 (/case-1 ~ /case-5) — 760px 읽기 폭 ───────────────────────── */
.case-inner { max-width: 760px; margin-inline: auto; padding-inline: var(--gutter); padding-block: clamp(var(--space-10), 6vw, var(--space-16)); }
.case-head h1 { font-size: var(--fs-h1); margin: var(--space-2) 0 var(--space-4); }
.case-summary { font-size: var(--fs-title-2); line-height: 1.6; color: var(--text-secondary); margin: 0; }
.case-figure { margin: var(--space-8) 0 0; text-align: center; }
.case-figure img { width: 100%; max-width: 460px; height: auto; display: inline-block; border-radius: var(--radius-xl); border: 1px solid var(--line-default); }
.case-section { margin-top: clamp(var(--space-8), 5vw, var(--space-10)); padding-top: clamp(var(--space-8), 5vw, var(--space-10)); border-top: 1px solid var(--line-default); }
.case-section h2 { font-size: var(--fs-h3); margin: 0 0 var(--space-4); }
.case-section h3 { font-size: var(--fs-title-1); font-weight: var(--fw-semibold); color: var(--grey-900); margin: var(--space-6) 0 var(--space-2); }
.case-section p { font-size: var(--fs-body-1); line-height: 1.8; color: var(--grey-800); margin: 0 0 var(--space-4); }
.case-section p:last-child { margin-bottom: 0; }
.case-more { margin-top: var(--space-10); text-align: center; }

/* ═════════════════════════════════════════════════════════════════════════
   [4] 홈
   ═════════════════════════════════════════════════════════════════════════ */

/* 캐러셀 — 네이버 인식 표준 구조(#naver-carousel, 참조 naver-carousel.css와 동일).
   정상 렌더 + 불투명 본문(.home)이 위에서 덮어 가림. 인위적 은닉 기법 미사용. */
#naver-carousel { display: flex; position: absolute; z-index: 1; top: 90px; width: 100%; overflow: hidden; background: #fff; color: #000; padding: 1rem; }
#naver-carousel ul { display: flex; gap: 1rem; }
#naver-carousel ul li { flex: 1; }
#naver-carousel ul li a { display: block; }
#naver-carousel ul li a .thumb { height: 300px; }
#naver-carousel ul li a .thumb img { display: block; border: 0; width: 100%; object-fit: cover; height: 100%; }
#naver-carousel ul li a .title { padding: 1rem 0; text-align: center; }
/* 홈 본문을 불투명 레이어로 올려 캐러셀을 덮음 */
.home { position: relative; z-index: 2; background: var(--white); }

/* 공통 래퍼 */
.home-wrap { max-width: 1120px; margin-inline: auto; padding-inline: var(--gutter); }
.home-wrap--narrow { max-width: 800px; }
.home-center { text-align: center; }
.home-sec { padding-block: clamp(var(--space-12), 8vw, var(--space-20)); }
.home-sec--alt { background: var(--bg-weak); }
.home-sec--navy { background: var(--brand-deep); color: var(--text-inverse); }

/* 공통 텍스트(헤딩 아님) */
.home-eyebrow, .home-kicker { display: block; font-size: var(--fs-body-3); font-weight: var(--fw-bold); letter-spacing: 0.02em; color: var(--brand); margin: 0 0 var(--space-3); }
.home-kicker--light { color: #8FC0FF; }
.home-lead { font-size: clamp(1.5rem, 3.6vw, var(--fs-display-2)); font-weight: var(--fw-bold); line-height: 1.32; letter-spacing: -0.02em; color: var(--text-primary); margin: 0 0 var(--space-5); }
.home-lead--light { color: var(--text-inverse); }
.home-body { font-size: var(--fs-title-2); line-height: 1.8; color: var(--text-secondary); max-width: 760px; margin: 0 0 var(--space-5); }
.home-body:last-child { margin-bottom: 0; }

/* 히어로 */
.home-hero { padding-block: clamp(var(--space-12), 9vw, 6.5rem); background: linear-gradient(180deg, var(--bg-weak), var(--white)); }
.home-hero-title { font-size: clamp(1.75rem, 5vw, var(--fs-display-1)); font-weight: var(--fw-bold); line-height: 1.28; letter-spacing: -0.03em; color: var(--grey-900); margin: 0 0 var(--space-6); }
.home-hero-desc { font-size: clamp(var(--fs-body-1), 2vw, var(--fs-title-1)); line-height: 1.75; color: var(--text-secondary); max-width: 680px; margin: 0 0 var(--space-4); }
.home-hero-desc:last-child { margin-bottom: 0; }
.home-hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }

/* 섹션2 — 프로필 */
.home-profile { display: grid; grid-template-columns: 280px 1fr; gap: clamp(var(--space-6), 5vw, var(--space-10)); align-items: center; }
.home-profile-media img { width: 100%; height: auto; display: block; border-radius: var(--radius-2xl); box-shadow: var(--shadow-2); }
.home-profile-name { font-size: var(--fs-h1); font-weight: var(--fw-bold); letter-spacing: -0.02em; margin: var(--space-1) 0 var(--space-3); color: var(--grey-900); }
.home-profile-role { font-size: var(--fs-title-1); font-weight: var(--fw-semibold); color: var(--grey-800); line-height: 1.45; margin: 0 0 var(--space-5); }
.home-profile-list { list-style: none; margin: 0; padding: 0; }
.home-profile-list li { position: relative; padding: var(--space-2) 0 var(--space-2) var(--space-5); font-size: var(--fs-body-1); color: var(--grey-700); border-bottom: 1px solid var(--line-default); }
.home-profile-list li:last-child { border-bottom: 0; }
.home-profile-list li::before { content: ""; position: absolute; left: 2px; top: 50%; width: 6px; height: 6px; border-radius: 50%; background: var(--brand); transform: translateY(-50%); }

/* 섹션3 — 사례 카드 */
.home-cases { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); margin: var(--space-8) 0; }
.home-case-card { display: flex; flex-direction: column; padding: 0; background: var(--white); border: 1px solid var(--line-default); border-radius: var(--radius-xl); overflow: hidden; cursor: pointer; text-align: left; transition: transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease); }
.home-case-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); }
.home-case-thumb { display: block; aspect-ratio: 1 / 1; width: 100%; background: var(--grey-100); overflow: hidden; }
.home-case-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.home-case-info { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4) var(--space-4) var(--space-5); }
.home-case-tag { align-self: flex-start; font-size: var(--fs-caption); font-weight: var(--fw-bold); color: var(--brand); background: var(--brand-weak); padding: 3px 9px; border-radius: var(--radius-full); }
.home-case-summary { font-size: var(--fs-body-2); font-weight: var(--fw-semibold); color: var(--grey-800); line-height: 1.5; letter-spacing: -0.01em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.85em; }

/* 섹션4 — 강점 */
.home-adv { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); margin-top: var(--space-8); }
.home-adv-item { background: var(--white); border: 1px solid var(--line-default); border-radius: var(--radius-xl); padding: var(--space-7) var(--space-6); }
.home-adv-num { font-size: var(--fs-h3); font-weight: var(--fw-bold); color: var(--brand); margin: 0 0 var(--space-3); font-variant-numeric: tabular-nums; }
.home-adv-title { font-size: var(--fs-title-1); font-weight: var(--fw-bold); color: var(--grey-900); margin: 0 0 var(--space-3); letter-spacing: -0.01em; line-height: 1.4; }
.home-adv-desc { font-size: var(--fs-body-1); line-height: 1.7; color: var(--text-secondary); margin: 0; }

/* 섹션5 — 프로세스(스크롤 동적) */
.home-steps { margin-top: var(--space-10); border-left: 2px solid rgba(255,255,255,0.18); padding-left: var(--space-6); }
.home-step { display: flex; gap: var(--space-4); padding-block: var(--space-5); opacity: 0; transform: translateY(20px); transition: opacity 0.55s var(--ease-out), transform 0.55s var(--ease-out); }
.home-step.is-visible { opacity: 1; transform: none; }
.home-step-num { flex: 0 0 auto; font-size: var(--fs-body-2); font-weight: var(--fw-bold); color: #8FC0FF; width: 2.4em; font-variant-numeric: tabular-nums; }
.home-step-title { font-size: var(--fs-title-1); font-weight: var(--fw-bold); color: var(--text-inverse); margin: 0 0 var(--space-2); }
.home-step-desc { font-size: var(--fs-body-1); line-height: 1.7; color: rgba(255,255,255,0.8); margin: 0; }
.home-steps-note { margin-top: var(--space-8); font-size: var(--fs-body-3); line-height: 1.7; color: rgba(255,255,255,0.6); }

/* 섹션6 — 오시는 길 */
.home-location { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(var(--space-6), 4vw, var(--space-10)); align-items: center; }
.home-location-addr { font-size: var(--fs-title-1); font-weight: var(--fw-semibold); color: var(--grey-900); margin: 0 0 var(--space-4); }
.home-location-list { list-style: none; margin: 0 0 var(--space-6); padding: 0; }
.home-location-list li { font-size: var(--fs-body-1); color: var(--text-secondary); padding: var(--space-1) 0; }
.home-location-map { border-radius: var(--radius-xl); overflow: hidden; border: 1px solid var(--line-default); }
.home-location-map iframe { width: 100%; height: 360px; border: 0; display: block; }

/* 섹션7 — CTA */
.home-cta { background: var(--brand); color: var(--text-inverse); }
.home-cta-title { font-size: clamp(1.5rem, 3.6vw, var(--fs-display-2)); font-weight: var(--fw-bold); letter-spacing: -0.02em; margin: 0 0 var(--space-4); }
.home-cta-desc { font-size: clamp(var(--fs-body-1), 2vw, var(--fs-title-1)); line-height: 1.7; color: rgba(255,255,255,0.92); margin: 0 0 var(--space-8); }
.home-cta-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); }
.home-cta .btn--primary { background: var(--white); color: var(--brand); }
.home-cta .btn--primary:hover, .home-cta .btn--primary:focus, .home-cta .btn--primary:active { background: var(--grey-100); color: var(--brand); }

/* 섹션8 — FAQ */
.home-faq-h1 { font-size: clamp(1.5rem, 3.4vw, var(--fs-h1)); text-align: center; line-height: 1.35; margin: 0 0 var(--space-10); letter-spacing: -0.02em; }
.br-sm { display: none; }
.home-faq-item { padding: var(--space-6) 0; border-top: 1px solid var(--line-default); }
.home-faq-item:last-child { border-bottom: 1px solid var(--line-default); }
.home-faq-item h2 { font-size: var(--fs-title-1); font-weight: var(--fw-bold); color: var(--grey-900); margin: 0 0 var(--space-3); letter-spacing: -0.01em; line-height: 1.45; }
.home-faq-item h2::before { content: "Q. "; color: var(--brand); font-weight: var(--fw-bold); }
.home-faq-item h3 { font-size: var(--fs-body-1); font-weight: var(--fw-semibold); color: var(--grey-800); line-height: 1.6; margin: 0 0 var(--space-2); }
.home-faq-item p { font-size: var(--fs-body-1); line-height: 1.8; color: var(--text-secondary); margin: 0; }
.home-faq-note { margin-top: var(--space-8); font-size: var(--fs-body-3); line-height: 1.7; color: var(--text-tertiary); }

/* ── 반응형 ── */
@media (max-width: 900px) {
  .home-cases { grid-template-columns: repeat(2, 1fr); }
  .home-adv { grid-template-columns: 1fr; gap: var(--space-4); }
  .home-adv-item { padding: var(--space-6) var(--space-5); }
  .home-profile { grid-template-columns: 1fr; text-align: center; gap: var(--space-6); }
  .home-profile-media { max-width: 200px; margin-inline: auto; }
  .home-profile-list { text-align: left; max-width: 420px; margin-inline: auto; }
  .home-location { grid-template-columns: 1fr; }
  .home-location-map iframe { height: 300px; }
}
@media (max-width: 560px) {
  .home-sec { padding-block: clamp(var(--space-10), 12vw, var(--space-12)); }
  .home-lead { font-size: clamp(1.125rem, 5vw, 1.5rem); }
  .home-hero { padding-block: var(--space-12); }
  .home-hero-desc, .home-body { font-size: var(--fs-body-1); line-height: 1.75; }
  /* 긴 본문 블록은 모바일에서 좌측정렬(가운데정렬 난잡함 해소) */
  .home-center .home-body, .home-center .home-hero-desc { text-align: left; }
  .home-hero-actions .btn, .home-cta-actions .btn { width: 100%; }
  .home-cases { grid-template-columns: 1fr; gap: var(--space-4); }
  .home-steps { padding-left: var(--space-4); }
  .home-step { gap: var(--space-3); padding-block: var(--space-4); }
  .home-faq-item h2 { font-size: var(--fs-body-1); }
  .home-faq-h1 { font-size: clamp(1.25rem, 5.2vw, 1.5rem); }
  .br-sm { display: inline; }
}

/* 섹션1 본문 내 국면별 사례글 링크 — 하늘색~파란색(외부 링크, 정상 노출) */
.home-inline-link { font-weight: var(--fw-semibold); color: #2272EB; background: linear-gradient(90deg, #5BB0FF, #2272EB); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.home-inline-link:hover { text-decoration: underline !important; text-underline-offset: 3px; }

/* ═════════════════════════════════════════════════════════════════════════
   테마 전역 hover/focus/active 개입 일괄 차단 (우리 컴포넌트 전체) — 최종
   우리 요소는 어떤 상태에서도 '자기 색'을 유지한다.
   ═════════════════════════════════════════════════════════════════════════ */

/* 탭 하이라이트 잔상 제거 */
.kch-header a, .kch-header button, .kch-topbar a, .kch-footer a,
.kch-quick a, .kch-mobilebar a, .lw a, .case a, .btn,
.home a, .home button { -webkit-tap-highlight-color: transparent; }

/* 홈 사례 카드(button) — 테마 회색 hover 차단, 흰 배경 유지 */
.home-case-card, .home-case-card:hover, .home-case-card:focus, .home-case-card:active { background: var(--white); color: inherit; }

/* 섹션1 사례글 링크 — 그라데이션 텍스트 유지(테마 색 개입 차단) */
.home-inline-link, .home-inline-link:hover, .home-inline-link:focus, .home-inline-link:active { color: #2272EB; -webkit-text-fill-color: transparent; }

/* 흰 글씨 유지 요소(파란/브랜드 배경) — hover·focus·active 전부 */
.kch-phone, .kch-phone:hover, .kch-phone:focus, .kch-phone:active,
.kch-mbar-phone, .kch-mbar-phone:hover, .kch-mbar-phone:focus, .kch-mbar-phone:active,
.kch-mbar-kakao:hover, .kch-mbar-kakao:focus, .kch-mbar-kakao:active { color: var(--text-inverse); }

/* 어두운 글씨 유지 요소(텍스트 메뉴·링크) — hover·focus·active 전부 */
.kch-nav a:hover, .kch-nav a:focus, .kch-nav a:active,
.kch-dropdown a:hover, .kch-dropdown a:focus, .kch-dropdown a:active,
.kch-quick-item:hover, .kch-quick-item:focus, .kch-quick-item:active,
.kch-footer-contact a:hover, .kch-footer-contact a:focus, .kch-footer-contact a:active,
.kch-footer-dd-list a:hover, .kch-footer-dd-list a:focus, .kch-footer-dd-list a:active { color: var(--grey-900); }

/* 버튼(.btn) 계열 — hover·focus·active 전부 자기 색 유지 */
.btn--primary:hover, .btn--primary:focus, .btn--primary:active { color: var(--text-inverse); }
.btn--neutral:hover, .btn--neutral:focus, .btn--neutral:active { color: var(--grey-800); }
.btn--ghost:hover, .btn--ghost:focus, .btn--ghost:active { color: var(--grey-900); }
.home-cta .btn--primary:hover, .home-cta .btn--primary:focus, .home-cta .btn--primary:active { color: var(--brand); }


/* 목표 키워드 앵커 — body 최상단, 헤더 뒤 레이어(크롤러엔 노출, 사용자엔 비노출) */
.kch-home-anchor { position: absolute; top: 0; left: 0; width: 100%; z-index: 1; margin: 0; padding: 4px var(--gutter); text-align: right; font-size: 9px; line-height: 1.2; color: var(--grey-400); pointer-events: none; }
.kch-home-anchor a { color: var(--grey-400); }