/* 변호사 정재익 법률사무소 홈페이지 공통 스타일 · 랜딩과 분야 세부 페이지가 함께 쓴다 */

:root {
  --brand:        oklch(64% 0.125 72);
  --brand-strong: oklch(72% 0.13  74);
  --brand-deep:   oklch(54% 0.115 70);
  --brand-ink:    oklch(42% 0.10  68);
  --brand-soft:   oklch(93.5% 0.045 85);
  --brand-soft-2: oklch(89% 0.07 83);
  --ink:          oklch(21% 0.012 40);
  --ink-2:        oklch(32% 0.012 45);
  --ink-soft:     oklch(42% 0.016 55);
  --bg:           oklch(96.5% 0.016 85);
  --bg-gray:      oklch(89.5% 0.026 83);
  --bg-card:      oklch(98.3% 0.009 85);
  --line:         oklch(82% 0.02 80);
  --accent:       oklch(40% 0.135 20);
  --band:         oklch(22% 0.012 20);
  --band-2:       oklch(27% 0.015 30);
  --line-band:    oklch(36% 0.016 45);
  --ink-band:     oklch(93% 0.008 80);
  --muted-band:   oklch(74% 0.016 75);
  --focus:        oklch(58% 0.15 70);
  --focus-band:   oklch(74% 0.14 75);
  --shadow:   0 8px 28px oklch(30% 0.03 60 / 0.10);
  --shadow-h: 0 16px 40px oklch(30% 0.03 60 / 0.17);

  --font-body: "Pretendard Variable", Pretendard, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --font-en: "Lora", Georgia, serif;

  --text-sm:   0.875rem;
  --text-base: 1.0625rem;
  --text-md:   1.25rem;
  --text-2xl:  clamp(1.6rem, 1.5vw + 1.1rem, 2.3rem);
  --text-display: clamp(1.6rem, 2.5vw + 0.85rem, 2.85rem);

  --space-2xs: 0.25rem;
  --space-xs:  0.5rem;
  --space-sm:  0.75rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2.5rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;

  --r-sm: 13px;
  --r-md: 22px;
  --r-pill: 999px;
  --rule-hair: 1px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-micro: 120ms;
  --dur-short: 220ms;
  --page-gutter: clamp(1rem, 4vw, 2.5rem);
  --measure: 34em;
}

* { box-sizing: border-box; margin: 0; }

html { overflow-x: clip; scroll-behavior: smooth; }
body { overflow-x: clip; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 1ms !important;
    transition-duration: 1ms !important;
  }
  .rv { opacity: 1 !important; transform: none !important; }
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 400;
  line-height: 1.74;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.wrap {
  max-width: 66rem;
  margin-inline: auto;
  padding-inline: max(var(--page-gutter), env(safe-area-inset-left));
}

h1, h2, h3 {
  font-style: normal;
  line-height: 1.4;
  overflow-wrap: anywhere;
  min-width: 0;
  letter-spacing: -0.015em;
}

a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--line);
  text-underline-offset: 0.22em;
  transition: color var(--dur-micro) var(--ease-out), text-decoration-color var(--dur-micro) var(--ease-out);
}
a:hover { color: var(--brand-ink); text-decoration-color: var(--brand); }
a:active { color: var(--ink-2); }
a:focus-visible, .btn-cta:focus-visible, .pill:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: 4px;
}
.band a:hover { color: var(--brand-strong); text-decoration-color: var(--brand-strong); }
.band a:focus-visible, .band .btn-cta:focus-visible { outline-color: var(--focus-band); }

.rv { opacity: 0; transform: translateY(14px); transition: opacity 400ms var(--ease-out), transform 400ms var(--ease-out); }
.rv.on { opacity: 1; transform: none; }

/* ── 다크 밴드 공통 ─────────────────────────────── */
.band { background: var(--band); color: var(--ink-band); }
.band a { text-decoration-color: var(--line-band); }

/* ── 내비 ──────────────────────────────────────── */
.nav { padding-block: var(--space-lg); }
.nav-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm) var(--space-lg);
}
.logo { text-decoration: none; line-height: 1.2; }
.logo b { display: block; font-size: var(--text-md); font-weight: 800; letter-spacing: -0.01em; white-space: nowrap; }
.logo .en {
  display: block;
  font-family: var(--font-en);
  font-style: italic;
  font-weight: 500;
  font-size: var(--text-sm);
  color: var(--brand-strong);
  letter-spacing: 0.06em;
}
.hcall { display: inline-flex; align-items: baseline; gap: var(--space-xs); white-space: nowrap; text-decoration: none; }
.hcall .hlbl { font-size: var(--text-sm); color: var(--muted-band); }
.hcall b { font-size: var(--text-md); font-weight: 800; font-variant-numeric: tabular-nums; }
.nav-links { display: none; gap: var(--space-xs); }
@media (min-width: 60rem) { .nav-links { display: flex; } }
.nav-links a {
  text-decoration: none;
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--brand-strong);
  padding: 0.4em 1em;
  background: var(--band-2);
  border: var(--rule-hair) solid var(--brand-deep);
  border-radius: var(--r-pill);
  transition: color var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out), background var(--dur-micro) var(--ease-out);
}
.nav-links a:hover, .nav-links a:focus-visible { color: var(--band); border-color: var(--brand-strong); background: var(--brand-strong); }

/* ── 모바일(<60rem) 헤더·히어로·아코디언 ─────────── */
@media (max-width: 60rem) {
  .nav { padding-block: var(--space-md); }
  .nav-inner { gap: var(--space-xs) var(--space-sm); }
  .logo b { font-size: 1rem; }
  .logo .en { display: none; }
  .hcall .hlbl { display: none; }
  .hcall {
    padding: 0.3em 0.75em;
    border: var(--rule-hair) solid var(--brand-deep);
    border-radius: var(--r-pill);
    background: var(--band-2);
  }
  .hcall b { font-size: 0.95rem; color: var(--brand-strong); }
  .nav-links {
    display: flex;
    order: 3;
    flex-basis: 100%;
    overflow-x: auto;
    gap: var(--space-xs);
    padding-bottom: 2px;
    scrollbar-width: none;
  }
  .nav-links::-webkit-scrollbar { display: none; }
  .nav-links a { font-size: var(--text-sm); padding: 0.35em 0.9em; white-space: nowrap; }
  .hero .hero-grid { gap: var(--space-md); }
  .hero-cta .link-quiet { display: none; }
  .sgroup h3 { cursor: pointer; }
  .sgroup h3::after { content: "▾"; color: var(--brand-ink); transition: transform var(--dur-short) var(--ease-out); }
  .sgroup.open h3::after { transform: rotate(180deg); }
  .sgroup:not(.open) .work-links { display: none; }
  .reviews .review:nth-child(n+5) { display: none; }
  .reviews.show-all .review:nth-child(n+5) { display: block; }
}
.rev-more-wrap { margin-top: var(--space-md); text-align: center; }
@media (min-width: 60rem) { .rev-more-wrap { display: none; } }
#rev-more {
  display: none;
  font: inherit;
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--ink-2);
  background: var(--bg-card);
  border: var(--rule-hair) solid var(--line);
  border-radius: var(--r-pill);
  padding: 0.5em 1.4em;
  cursor: pointer;
}
@media (max-width: 60rem) { #rev-more { display: inline-flex; } .reviews.show-all ~ .rev-more-wrap #rev-more { display: none; } }
@media (max-width: 60rem) { .hero-cta { justify-content: center; } .voices-cta { text-align: center; } }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

/* ── ① 두려움 — 다크 히어로 (카피 좌 · 인물 우) ── */
.hero { padding-block: var(--space-lg) 0; }
.hero-grid {
  display: grid;
  gap: var(--space-xl);
  align-items: end;
}
@media (min-width: 60rem) {
  .hero-grid { grid-template-columns: 8fr 4fr; gap: var(--space-2xl); }
}
.hero-grid > * { min-width: 0; }
.hero-copy { padding-bottom: var(--space-lg); }
@media (min-width: 60rem) { .hero-copy { align-self: center; padding-bottom: var(--space-xl); } }
.hero .name {
  font-size: var(--text-base);
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--brand-strong);
}
.hero h1 {
  margin-top: var(--space-md);
  font-size: var(--text-display);
  font-weight: 800;
  max-width: 18em;
}
.hero h1 .em { color: var(--brand-strong); }
.hero .sub {
  margin-top: var(--space-lg);
  max-width: var(--measure);
  font-size: var(--text-md);
  line-height: 1.85;
  color: var(--muted-band);
}
.hero .sub b { color: var(--ink-band); font-weight: 700; }
.hero-cta {
  margin-top: var(--space-xl);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-md) var(--space-lg);
}
.hero-photo {
  display: none;
  justify-self: center;
  align-self: end;
  background: radial-gradient(62% 46% at 50% 42%, var(--band-2) 0%, transparent 74%);
}
@media (min-width: 60rem) { .hero-photo { display: block; justify-self: end; } }
.hero-photo img {
  display: block;
  width: auto;
  max-width: 100%;
  height: min(42vh, 380px);
  object-fit: contain;
  object-position: bottom;
  margin-inline: auto;
  -webkit-mask-image: linear-gradient(180deg, #000 84%, transparent 99%);
  mask-image: linear-gradient(180deg, #000 84%, transparent 99%);
}
@media (min-width: 60rem) { .hero-photo img { height: min(66vh, 700px); } }

/* 히어로 하단 수치 스탯 밴드 */
.stats { padding-block: 0 var(--space-2xl); }
.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-lg) var(--space-md);
  border-top: var(--rule-hair) solid var(--line-band);
  padding-top: var(--space-xl);
}
@media (min-width: 60rem) { .stats-grid { grid-template-columns: repeat(4, 1fr); } }
.stat { margin: 0; text-align: center; }
.stat b {
  display: block;
  font-size: clamp(2rem, 1.6vw + 1.5rem, 2.75rem);
  font-weight: 800;
  color: var(--brand-strong);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.stat b .unit { font-size: 0.55em; font-weight: 700; margin-left: 0.1em; }
.stat .stat-k { display: block; margin-top: var(--space-2xs); font-size: var(--text-sm); color: var(--muted-band); letter-spacing: 0.06em; }

/* 주 CTA — 골드 필 버튼 */
.btn-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  padding: var(--space-md) var(--space-xl);
  min-height: 52px;
  background: var(--brand);
  color: var(--band);
  border: 0;
  border-radius: var(--r-sm);
  font-family: var(--font-body);
  font-size: var(--text-md);
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--dur-short) var(--ease-out), transform 100ms var(--ease-out);
}
.btn-cta:hover { background: var(--brand-strong); color: var(--band); }
.band .btn-cta:hover { color: var(--band); }
.btn-cta:active { transform: translateY(1px); }

.link-quiet { font-weight: 600; white-space: nowrap; }
.band .link-quiet { color: var(--ink-band); }

/* ── 섹션 공통 ─────────────────────────────────── */
section { scroll-margin-top: var(--space-lg); }
.sec { padding-block: var(--space-3xl); }
.sec--gray { background: var(--bg-gray); }
.sec--soft { background: var(--brand-soft); }
.sec-head { max-width: 44em; }
.sec-head .k {
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--brand-ink);
}
.sec-head h2 {
  margin-top: var(--space-xs);
  font-size: var(--text-2xl);
  font-weight: 800;
}
.sec-head p { margin-top: var(--space-sm); color: var(--ink-soft); }
.sec-body { margin-top: var(--space-xl); }
.hl { color: var(--accent); }
.cta-mid { margin-top: var(--space-xl); text-align: center; }
.band .hl, .sec--dark .hl { color: var(--brand-strong); }

/* ── 다크 반전 섹션 ─────────────────────────────── */
.sec--dark { background: var(--band); color: var(--ink-band); }
.sec--dark .sec-head .k { color: var(--brand-strong); }
.sec--dark .cases-panel { background: var(--band-2); border-color: var(--line-band); box-shadow: none; }
.sec--dark .cases li { border-color: var(--line-band); }
.sec--dark .case-tag { color: var(--muted-band); }
.sec--dark .case-result {
  background: var(--accent);
  color: var(--bg-card);
  padding: 0.2em 0.75em;
  border-radius: var(--r-pill);
  font-size: var(--text-base);
  justify-self: end;
}
.sec--dark .cases-note { color: var(--muted-band); }

/* ── ② 공감 — 상황 인용 카드 ────────────────────── */
.voices { display: grid; gap: var(--space-lg); max-width: 50rem; margin-inline: auto; }
.voices blockquote {
  background: var(--bg-card);
  border: var(--rule-hair) solid var(--line);
  border-left: 3px solid var(--brand);
  border-radius: var(--r-sm);
  padding: var(--space-lg) var(--space-xl);
  box-shadow: var(--shadow);
  font-size: var(--text-md);
  font-weight: 500;
  line-height: 1.7;
  color: var(--ink-2);
  min-width: 0;
}
.voices blockquote b { color: var(--ink); font-weight: 700; }
.voices-close {
  margin-top: var(--space-2xl);
  font-size: var(--text-2xl);
  font-weight: 800;
  line-height: 1.5;
  max-width: 30em;
}
.voices-close .gold { color: var(--accent); }
.voices-cta { margin-top: var(--space-lg); }

/* ── ③ 신뢰 — WHY 대표변호사 카드 ─────────────────────────── */
.law-card {
  background: var(--bg-card);
  border: var(--rule-hair) solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--shadow);
  max-width: 32rem;
  margin-inline: auto;
}
.law-card .ph {
  aspect-ratio: 3/3.7;
  background: linear-gradient(160deg, var(--brand-soft), var(--brand-soft-2));
  overflow: hidden;
}
.law-card .ph img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; display: block; }
.law-card .bd { padding: var(--space-lg) var(--space-xl) var(--space-xl); }
.law-card .role { font-size: var(--text-sm); font-weight: 800; letter-spacing: .08em; color: var(--brand-deep); }
.law-card h3 { margin-top: var(--space-2xs); font-size: var(--text-2xl); font-weight: 800; letter-spacing: -.02em; }
.law-card .intro { margin-top: var(--space-xs); font-size: var(--text-base); color: var(--ink-2); line-height: 1.8; }
.law-card .intro b { color: var(--ink); font-weight: 800; }
.law-card ul { list-style: none; padding: 0; margin-top: var(--space-md); padding-top: var(--space-md); border-top: var(--rule-hair) solid var(--line); }
.law-card li {
  position: relative;
  padding: var(--space-2xs) 0 var(--space-2xs) 16px;
  font-size: var(--text-base);
  color: var(--ink-2);
  line-height: 1.65;
}
.law-card li::before { content: ""; position: absolute; left: 2px; top: .72em; width: 5px; height: 5px; border-radius: 50%; background: var(--brand-soft-2); }
#why .principles { margin-top: var(--space-2xl); max-width: none; }
@media (min-width: 60rem) {
  #why .principles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #why .principle { padding: var(--space-lg); }
  #why .principle p { word-break: normal; }
}
#why .certs-lead { margin-top: var(--space-2xl); }
.principles { display: grid; gap: var(--space-md); max-width: 46rem; margin-top: var(--space-lg); }
.principle {
  background: var(--bg-card);
  border: var(--rule-hair) solid var(--line);
  border-radius: var(--r-sm);
  padding: var(--space-lg) var(--space-xl);
  min-width: 0;
}
.principle h3 { font-size: var(--text-md); font-weight: 800; }
.principle h3 .no { color: var(--brand-ink); margin-right: var(--space-xs); }
.principle p { margin-top: var(--space-xs); font-size: var(--text-base); color: var(--ink-2); }


/* 등록증서 2장 */
.certs-lead {
  margin-top: var(--space-2xl);
  font-size: var(--text-2xl);
  font-weight: 800;
  color: var(--ink);
  text-align: center;
}
.cert-badges {
  margin-top: var(--space-md);
  display: grid;
  gap: var(--space-md);
  max-width: 57rem;
  margin-inline: auto;
}
@media (min-width: 40rem) { .cert-badges { grid-template-columns: 1fr 1fr; } }
.cert-badge {
  background: var(--bg-card);
  border: var(--rule-hair) solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--r-sm);
  box-shadow: var(--shadow);
  padding: var(--space-lg) var(--space-xl);
  display: grid;
  gap: var(--space-2xs);
}
.cert-badge .cert-field { font-size: var(--text-md); font-weight: 800; }
.cert-badge .cert-no { font-size: var(--text-base); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.cert-badge .cert-date { font-size: var(--text-sm); color: var(--ink-soft); }

/* ── 사례 ──────────────────────────────────────── */
.cases-panel {
  background: var(--bg-card);
  border: var(--rule-hair) solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow);
  padding: var(--space-sm) var(--space-xl);
}
.cases { list-style: none; padding: 0; }
.cases li {
  display: grid;
  grid-template-columns: 4rem minmax(0, 1fr);
  gap: var(--space-2xs) var(--space-md);
  padding-block: var(--space-sm);
  border-bottom: var(--rule-hair) solid var(--line);
  align-items: baseline;
}
.cases li:last-child { border-bottom: 0; }
@media (min-width: 60rem) {
  .cases li { grid-template-columns: 4rem minmax(0, 1fr) auto; }
}
.case-tag { font-size: var(--text-sm); font-weight: 700; color: var(--ink-soft); letter-spacing: 0.06em; }
.case-result { font-weight: 800; color: var(--brand-ink); white-space: nowrap; }
@media (max-width: 60rem) { .cases li .case-result { grid-column: 2; } .sec--dark .cases li .case-result { justify-self: start; } }
.cases-note { margin-top: var(--space-md); font-size: var(--text-sm); color: var(--ink-soft); }

/* ── ③-3 신뢰 — 실제 후기 ───────────────────────── */
.reviews { display: grid; gap: var(--space-md); }
@media (min-width: 40rem) { .reviews { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.review {
  background: var(--bg-card);
  border: var(--rule-hair) solid var(--line);
  border-radius: var(--r-sm);
  box-shadow: var(--shadow);
  padding: var(--space-lg) var(--space-xl);
  min-width: 0;
  display: grid;
  align-content: space-between;
  gap: var(--space-md);
}
.review p {
  font-size: var(--text-base);
  font-weight: 500;
  line-height: 1.8;
  color: var(--ink-2);
}
.review p .qm { color: var(--brand-deep); font-weight: 800; }
.review .who { font-size: var(--text-sm); color: var(--ink-soft); }
.reviews-more { margin-top: var(--space-xl); display: flex; justify-content: center; flex-wrap: wrap; gap: var(--space-sm); }
.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  padding: var(--space-sm) var(--space-xl);
  min-height: 48px;
  border: 1.5px solid var(--accent);
  border-radius: var(--r-pill);
  background: var(--accent);
  color: var(--bg-card);
  font-weight: 700;
  text-decoration: none;
  transition: background var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out);
}
.btn-ghost:hover { background: var(--brand-ink); border-color: var(--brand-ink); }
.reviews-note { margin-top: var(--space-md); font-size: var(--text-sm); color: var(--ink-soft); max-width: 44em; }

/* ── 업무 6그리드 ──────────────────────────────── */
.works { display: grid; gap: var(--space-md); }
@media (min-width: 40rem) { .works { grid-template-columns: 1fr 1fr; } }
@media (min-width: 60rem) { .works { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.work {
  background: var(--bg-card);
  border: var(--rule-hair) solid var(--line);
  border-radius: var(--r-sm);
  padding: var(--space-lg);
  min-width: 0;
}
.work h3 { font-size: var(--text-base); font-weight: 800; }
.work p { margin-top: var(--space-xs); font-size: var(--text-sm); color: var(--ink-soft); }
.work-links { margin-top: var(--space-md); padding-top: var(--space-md); border-top: var(--rule-hair) solid var(--line); display: grid; gap: var(--space-xs); }
.work-links a { font-size: var(--text-sm); font-weight: 600; color: var(--brand-ink); text-decoration: none; }
.work-links a:hover { text-decoration: underline; text-decoration-color: var(--brand); }

/* ── ③-5 신뢰 — 성공사례 아카이브 ────────────────── */
.success-groups { columns: 2; column-gap: var(--space-md); }
@media (max-width: 40rem) { .success-groups { columns: 1; } }
.sgroup {
  break-inside: avoid;
  margin-bottom: var(--space-md);
  background: var(--bg-card);
  border: var(--rule-hair) solid var(--line);
  border-radius: var(--r-sm);
  box-shadow: var(--shadow);
  padding: var(--space-lg) var(--space-xl);
}
.sgroup h3 {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-sm);
  font-size: var(--text-md);
  font-weight: 800;
}
.sgroup .work-links a { font-size: var(--text-base); }
.columns-note { margin-top: var(--space-md); font-size: var(--text-sm); }

/* ── ④ 선택 — 다크 CTA 밴드 ─────────────────────── */
.choose { padding-block: var(--space-3xl); text-align: center; }
.choose h2 {
  font-size: var(--text-2xl);
  font-weight: 800;
  max-width: 22em;
  margin-inline: auto;
}
.choose .terms {
  margin-top: var(--space-md);
  font-size: var(--text-base);
  color: var(--muted-band);
  max-width: 40em;
  margin-inline: auto;
}
.choose .cta-row { margin-top: var(--space-xl); }
.choose .btn-cta { min-width: min(28rem, 100%); font-size: var(--text-md); }
.tiles {
  margin-top: var(--space-xl);
  display: grid;
  gap: var(--space-md);
  grid-template-columns: 1fr 1fr;
  max-width: 40rem;
  margin-inline: auto;
}
@media (min-width: 60rem) { .tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: none; } }
.tile {
  display: block;
  background: var(--band-2);
  border: var(--rule-hair) solid var(--line-band);
  border-radius: var(--r-sm);
  padding: var(--space-md);
  text-decoration: none;
  min-width: 0;
}
.tile .t-k { display: block; font-size: var(--text-sm); color: var(--muted-band); }
.tile .t-v {
  display: block;
  margin-top: var(--space-2xs);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--ink-band);
  overflow-wrap: anywhere;
}
.choose .fine {
  margin-top: var(--space-lg);
  font-size: var(--text-sm);
  color: var(--muted-band);
}

/* ── 오시는길 — 사무실 사진 + 안내 ───────────────── */
.visit { display: grid; gap: var(--space-xl); align-items: start; }
@media (min-width: 60rem) { .visit { grid-template-columns: 6fr 6fr; gap: var(--space-2xl); } }
.visit > * { min-width: 0; }
.visit-media { display: grid; min-width: 0; }
#office-map {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: var(--r-md);
  overflow: hidden;
  border: var(--rule-hair) solid var(--line);
  box-shadow: var(--shadow);
  background: var(--bg-gray);
}
#office-map .map-fallback { padding: var(--space-md); font-size: var(--text-sm); color: var(--ink-soft); }
.visit .addr { font-size: var(--text-md); font-weight: 800; line-height: 1.6; }
.visit ul { list-style: none; padding: 0; margin-top: var(--space-md); }
.visit li {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr);
  gap: var(--space-sm);
  padding-block: var(--space-xs);
  border-bottom: var(--rule-hair) solid var(--line);
  font-size: var(--text-base);
  color: var(--ink-2);
}
.visit .k { font-size: var(--text-sm); font-weight: 700; color: var(--brand-ink); letter-spacing: 0.06em; }
.visit .map-link { margin-top: var(--space-md); }
.visit .channels {
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-top: var(--rule-hair) solid var(--line);
}
.visit .channels-lead { font-size: var(--text-md); font-weight: 800; color: var(--ink); }
.visit .channel-btns { margin-top: var(--space-sm); display: flex; flex-wrap: wrap; gap: var(--space-sm); }
@media (min-width: 60rem) {
  .visit-info { display: flex; flex-direction: column; align-self: stretch; }
  .visit-info .channels { margin-top: auto; }
  .visit-media { align-self: stretch; }
  #office-map { aspect-ratio: auto; height: 100%; min-height: 460px; }
}
.chan {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-md) var(--space-xs) var(--space-xs);
  min-height: 48px;
  border: var(--rule-hair) solid var(--line);
  border-radius: var(--r-pill);
  text-decoration: none;
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--ink-2);
  white-space: nowrap;
  transition: background-color var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out);
}
.chan:hover { background: var(--brand-soft); border-color: var(--brand-deep); color: var(--ink); }
.chan-ic {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--brand-soft);
  color: var(--brand-ink);
  flex: none;
}


/* ── 상담 팝업 ─────────────────────────────────── */
/* ── 상담 신청 폼 ─────────────────────────────── */
.consult-form { max-width: 46rem; margin-inline: auto; display: grid; gap: var(--space-md); }
.consult-form .f-row { display: grid; gap: var(--space-md); }
.consult-form .f-field { display: grid; gap: var(--space-2xs); font-size: var(--text-sm); font-weight: 700; color: var(--brand-ink); }
.consult-form input[type="text"], .consult-form input[type="tel"], .consult-form select, .consult-form textarea {
  width: 100%;
  padding: var(--space-sm) var(--space-md);
  border: var(--rule-hair) solid var(--line);
  border-radius: var(--r-sm);
  background: var(--bg);
  font: inherit;
  font-size: var(--text-base);
  font-weight: 400;
  color: var(--ink);
}
.consult-form textarea { min-height: 9rem; resize: vertical; }
.consult-form .f-radios { display: flex; gap: var(--space-md); flex-wrap: wrap; padding-top: var(--space-2xs); }
.consult-form .f-radios label { display: inline-flex; gap: var(--space-2xs); align-items: center; font-size: var(--text-base); font-weight: 400; color: var(--ink); }
.consult-privacy {
  border: var(--rule-hair) solid var(--line);
  border-radius: var(--r-sm);
  background: var(--bg-gray);
  padding: var(--space-md);
  font-size: var(--text-sm);
  color: var(--ink-soft);
}
.consult-privacy ul { margin: var(--space-2xs) 0; padding-left: 1.2em; }
.consult-privacy p { margin: 0; }
.consult-consent { display: flex; gap: var(--space-xs); align-items: center; font-size: var(--text-base); }
.consult-form .btn-cta { width: 100%; }
.consult-form .btn-cta:disabled { opacity: .45; cursor: not-allowed; }
.consult-form .btn-cta:disabled:hover { background: var(--brand); }
.consult-msg { display: none; padding: var(--space-md); border-radius: var(--r-sm); background: var(--brand-soft); color: var(--brand-ink); font-weight: 700; }
.consult-msg.on { display: block; }
.consult-note { font-size: var(--text-sm); color: var(--ink-soft); text-align: center; }
.hp { position: absolute !important; left: -9999px; }
@media (min-width: 60rem) { .consult-form .f-row { grid-template-columns: 1fr 1fr; } }

#contact-modal {
  margin: auto;
  max-height: calc(100dvh - 2rem);
  overflow: auto;
  border: 0;
  border-radius: var(--r-md);
  box-shadow: var(--shadow-h);
  padding: 0;
  width: min(26rem, calc(100vw - 2rem));
  background: var(--bg-card);
  color: var(--ink);
}
#contact-modal::backdrop { background: oklch(15% 0.01 40 / 0.55); }
#contact-modal[open] { animation: cm-in 300ms var(--ease-out); }
@keyframes cm-in { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: none; } }
#contact-modal .cm-wrap { padding: var(--space-xl); }
#contact-modal .cm-head { display: flex; justify-content: space-between; align-items: center; }
#contact-modal .cm-head b { font-size: var(--text-md); font-weight: 800; }
#contact-modal .cm-close {
  border: 0; background: none; cursor: pointer;
  font-size: var(--text-md); color: var(--ink-soft);
  min-width: 44px; min-height: 44px; border-radius: 4px;
}
#contact-modal .cm-close:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
#contact-modal .cm-sub { margin-top: var(--space-2xs); font-size: var(--text-sm); color: var(--ink-soft); }
#contact-modal .cm-list { margin-top: var(--space-md); display: grid; gap: var(--space-sm); }
#contact-modal .cm-item {
  display: grid; gap: var(--space-2xs);
  padding: var(--space-sm) var(--space-md);
  border: var(--rule-hair) solid var(--line);
  border-radius: var(--r-sm);
  text-decoration: none;
  transition: background-color var(--dur-micro) var(--ease-out);
}
#contact-modal .cm-item:hover { background: var(--brand-soft); color: inherit; }
#contact-modal .cm-item .k { font-size: var(--text-sm); font-weight: 700; color: var(--brand-ink); }
#contact-modal .cm-item b { font-weight: 800; font-variant-numeric: tabular-nums; }

/* ── 푸터 ──────────────────────────────────────── */
.foot { background: var(--bg-gray); padding-block: var(--space-xl) var(--space-2xl); }
.foot-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-md) var(--space-lg);
  border-top: var(--rule-hair) solid var(--line);
  padding-top: var(--space-lg);
  font-size: var(--text-sm);
  color: var(--ink-soft);
}
.foot-inner p { margin: 0; }

/* ── 세부 페이지(분야 페이지) 공통 · v44 ─────────────── */
/* body.detail: drunk-driving.html 등 분야 세부 페이지. 섹션 패딩 축소, 주 CTA 전폭(최대 28rem) 통일. 히어로 사진·지도는 랜딩과 동일 */
body.detail .sec, body.detail .choose { padding-block: clamp(4rem, 8vw, 6rem); }
body.detail .btn-cta { display: flex; width: 100%; max-width: 28rem; margin-inline: auto; }
@media (min-width: 60rem) { body.detail .hero-cta .btn-cta { margin-inline: 0; } }

/* 라벨 + 본문 행 (hairline) */
.kv { list-style: none; padding: 0; margin: 0; max-width: 50rem; }
.kv li {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr);
  gap: var(--space-sm);
  padding-block: var(--space-xs);
  border-bottom: var(--rule-hair) solid var(--line);
  color: var(--ink-2);
}
.kv .k { font-size: var(--text-sm); font-weight: 700; color: var(--brand-ink); letter-spacing: 0.06em; }
.kv b { color: var(--ink); font-weight: 700; }
.kv--wide li { grid-template-columns: 5.5rem minmax(0, 1fr); }
.kv-lead { margin-top: var(--space-xl); font-size: var(--text-sm); font-weight: 700; letter-spacing: 0.06em; color: var(--brand-ink); }
.kv-lead + .kv { margin-top: var(--space-xs); }

/* 법정형 표 */
.law-src { margin-top: var(--space-xl); font-size: var(--text-sm); font-weight: 700; letter-spacing: 0.06em; color: var(--brand-ink); }
.law-panel {
  margin-top: var(--space-xs);
  background: var(--bg-card);
  border: var(--rule-hair) solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow);
  padding: var(--space-sm) var(--space-lg);
  overflow-x: auto;
}
.law-table { width: 100%; border-collapse: collapse; min-width: 18rem; }
.law-table th {
  text-align: left;
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  padding: var(--space-sm) 0;
  border-bottom: var(--rule-hair) solid var(--line);
}
.law-table td {
  padding: var(--space-sm) 0;
  border-bottom: var(--rule-hair) solid var(--line);
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
  vertical-align: top;
}
.law-table th + th, .law-table td + td { padding-left: var(--space-md); }
.law-table tr:last-child td { border-bottom: 0; }
.law-table td b { color: var(--ink); font-weight: 700; }
.law-table .nw { white-space: nowrap; }
.law-table--3 { min-width: 19rem; }
@media (max-width: 40rem) { .law-panel { padding-inline: var(--space-md); } }
.law-src + .law-panel, .kv + .law-src { margin-top: var(--space-xs); }
.kv + .law-src { margin-top: var(--space-xl); }
.law-panel + .kv { margin-top: var(--space-lg); }
.law-note { margin-top: var(--space-md); font-size: var(--text-sm); color: var(--ink-soft); }

/* 진행 3단계 */
.steps { margin-top: var(--space-xl); display: grid; gap: var(--space-md); }
@media (min-width: 60rem) { .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.step {
  background: var(--bg-card);
  border: var(--rule-hair) solid var(--line);
  border-radius: var(--r-sm);
  padding: var(--space-lg);
  min-width: 0;
}
.step-k { font-size: var(--text-sm); font-weight: 700; letter-spacing: 0.06em; color: var(--brand-ink); }
.step h3 { margin-top: var(--space-2xs); font-size: var(--text-md); font-weight: 800; }
.step h3 .no { color: var(--brand-ink); margin-right: var(--space-xs); }
.step p { margin-top: var(--space-xs); color: var(--ink-2); }
.step ul {
  list-style: none;
  margin-top: var(--space-md);
  padding: var(--space-md) 0 0;
  border-top: var(--rule-hair) solid var(--line);
  display: grid;
  gap: var(--space-2xs);
  font-size: var(--text-sm);
  color: var(--ink-soft);
}

/* 신뢰: 단독 배지 · 사례 고지 링크 */
.cert-badge--solo { margin-top: var(--space-xl); max-width: 28rem; margin-inline: auto; }
.cases-note a { color: var(--brand-ink); }

/* 모바일 하단 고정 상담 바 */
.sticky-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 10;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--page-gutter) calc(var(--space-xs) + env(safe-area-inset-bottom, 0px));
  background: var(--band);
  border-top: var(--rule-hair) solid var(--line-band);
}
.sticky-bar a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  min-height: 48px;
  border-radius: var(--r-sm);
  font-size: var(--text-base);
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
}
.sticky-bar .sb-call { background: var(--brand); color: var(--band); }
.sticky-bar .sb-kakao { background: var(--band-2); color: var(--brand-strong); border: var(--rule-hair) solid var(--brand-deep); }
.sticky-bar a:focus-visible { outline: 2px solid var(--focus-band); outline-offset: 2px; }
@media (max-width: 60rem) { body.detail { padding-bottom: 72px; } }
@media (min-width: 60rem) { .sticky-bar { display: none; } }

/* ── 세부 페이지 데스크톱 폭·정렬 · v45 (2026-10-07 캡처 피드백) ── */
/* 주 CTA는 데스크톱 22rem 고정, 본문 블록(표·행·사례)은 52rem 가운데, 사례 행은 데스크톱 3열(태그 7rem / 사건 / 결과) */
@media (min-width: 60rem) { body.detail .btn-cta { width: 22rem; min-width: 0; } }
body.detail .law-src, body.detail .law-panel, body.detail .kv, body.detail .kv-lead, body.detail .law-note,
body.detail .cases-panel, body.detail .cases-note { max-width: 52rem; margin-inline: auto; }
body.detail .cases li { grid-template-columns: 4.5rem minmax(0, 1fr); }
@media (min-width: 60rem) { body.detail .cases li { grid-template-columns: 7rem minmax(0, 1fr) auto; } }
.law-table--crime th:first-child { width: 42%; }
.law-table .src { display: block; font-size: 0.8rem; font-weight: 400; color: var(--ink-soft); }
.kv--wider li { grid-template-columns: 7rem minmax(0, 1fr); }

/* ── 세부 페이지 한 줄 유지 · v45 (2026-10-07 사용자 요청) ── */
/* 성명 줄(등록번호 포함 46자)과 진행 과정 h2는 데스크톱에서 줄바꿈하지 않는다. 모바일은 폭이 부족해 자연 줄바꿈 */
@media (min-width: 60rem) {
  body.detail .hero .name { white-space: nowrap; font-size: 0.95rem; letter-spacing: 0.06em; }
  body.detail #steps .sec-head, body.detail #trust .sec-head { max-width: none; }
  body.detail #steps .sec-head h2, body.detail #trust .sec-head h2 { white-space: nowrap; font-size: clamp(1.6rem, 1.5vw + 1.1rem, 2rem); }
}

/* ── 세부 페이지 상속 · v46 (2026-10-08) ─────────────── */
/* 법리 패널 안의 kv 행, 진행 단계 아래 마무리 문장, 배지 대신 쓰는 변호사 약력 카드 */
.law-panel .kv li { padding-block: var(--space-sm); }
.law-panel .kv li:last-child { border-bottom: 0; }
.steps-note { margin-top: var(--space-xl); max-width: 52rem; margin-inline: auto; font-size: var(--text-md); font-weight: 700; line-height: 1.6; color: var(--ink-2); }
.profile-card {
  margin-top: var(--space-xl);
  max-width: 28rem;
  margin-inline: auto;
  background: var(--bg-card);
  border: var(--rule-hair) solid var(--line);
  border-left: 3px solid var(--brand);
  border-radius: var(--r-sm);
  box-shadow: var(--shadow);
  padding: var(--space-lg) var(--space-xl);
  display: grid;
  gap: var(--space-2xs);
  color: var(--ink-2);
}
.profile-card .k { font-size: var(--text-sm); font-weight: 700; letter-spacing: 0.06em; color: var(--brand-ink); }
.profile-card .pname { font-size: var(--text-md); font-weight: 800; color: var(--ink); }
.profile-card a { margin-top: var(--space-xs); font-size: var(--text-sm); color: var(--brand-ink); }

/* 세부 페이지 네비 5칩: 60~72rem에서는 칩을 줄이고 '대표전화' 라벨을 숨겨 전화 버튼이 둘째 줄로 내려가지 않게 한다 */
@media (min-width: 60rem) and (max-width: 72rem) {
  body.detail .nav-links { gap: var(--space-2xs); }
  body.detail .nav-links a { font-size: var(--text-sm); padding: 0.35em 0.8em; }
  body.detail .hcall .hlbl { display: none; }
}
/* 모바일: 법리 패널의 라벨은 윗줄에, 사례 결과는 줄바꿈 허용(긴 결과 문구가 열을 넘지 않게) */
@media (max-width: 40rem) {
  body.detail .law-panel .kv li { grid-template-columns: 1fr; gap: var(--space-2xs); }
}
@media (max-width: 60rem) {
  body.detail .case-result { white-space: normal; }
}

/* 상속 개정 규정의 적용 범위(작은 글씨 별도 줄), 랜딩 업무 카드의 세부 페이지 링크 */
.kv .apply { display: block; margin-top: 0.25rem; font-size: var(--text-sm); color: var(--ink-soft); }
.work-links .work-more { font-weight: 800; }