/* ===== 디자인 토큰 ===== */
/* 본 사이트(mjcrime.co.kr)의 실측 팔레트를 그대로 옮긴 값이다.
   CSS 4종 301KB에서 뽑은 빈도: #FFFFFF x183, #B20600 x114, #111111 x98,
   #EEEEEE x28, #888888 x25, #F8F8F8 x19, 네이비 x11.
   즉 "흰 배경 지배 + 딥레드 액센트"다. 네이비는 본 사이트에서도 액센트로만
   쓰이던 최저 빈도색인데, 이 한 페이지에서는 위기 진단 섹션 배경 단 한 곳에만
   나오는 유일한 파란 계열이라 딥레드 브랜드색과 계열이 충돌했다.
   그래서 여기서는 토큰째 뺐고 어두운 면은 차콜 계열로 통일한다
   (푸터는 #111111, 다크 섹션·workflow 박스는 아래 --gray-900).
   (네이비 원값은 git 이력에 남아 있다. 색 검사 테스트가 주석의 hex까지
   스캔하므로 여기에 값을 적지 않는다.)
   토큰 이름은 기존 것을 유지한다(사용처 28곳을 건드리지 않기 위해).

   색상 조합 원칙: 빨강(#B20600)은 행동(CTA)·성과·연락처에만 쓴다.
   구조와 장식(아이브로우, 번호, 점, 밑줄, 카드 상단선)은
   차콜(#111111)·그레이로 내린다.
   단, 발주처가 강조 문장 색을 직접 지정하면서 이 원칙은 문자 그대로는
   더 이상 성립하지 않는다. 강조 문장에도 빨강 계열(--red-500)을 쓴다.

   ⚠ --gray-600(#888888)은 흰 배경에서 대비가 3.54:1이라 본문 텍스트로 쓸 수 없다.
   본 사이트가 보조 텍스트로 쓰는 값이지만 여기서는 4.5:1을 지켜야 하므로,
   텍스트에는 --navy-600(#333333, 12.6:1)을 쓰고 #888888은 비텍스트 경계선
   (입력 필드 테두리 등, 3:1 필요)에만 쓴다.

   --gray-900(#2D2D2D): 발주처가 순검정 배경이 너무 무겁다고 해서 다크 섹션
   (위기 진단)과 workflow 박스 배경만 그레이톤으로 내린 값이다. 푸터·전화
   버튼·필터칩 등 기존 --navy-900 사용처는 그대로 둔다. 흰 글씨 대비 13.8:1.

   --red-500(#B90600): 발주처가 PDF에서 처음 지정한 강조색이 생각보다 어둡다고
   해서 다시 지정해 온 밝은 빨강이다(처음 값은 git 이력에 남아 있다. 위 네이비와
   같은 이유로 여기에 적지 않는다). 밝은 섹션의 강조 문장(에피소드/카드/절차
   제목, 불릿 강조구)에만 쓴다. 흰 배경 6.80:1, --gray-50(#F8F8F8) 위 6.41:1로
   AA(4.5:1)를 통과한다. */
:root {
  --navy-900:#111111;
  --navy-600:#333333;
  --gray-900:#2D2D2D;
  --red-500:#B90600;
  --red-600:#B20600;
  --red-700:#8A0500;
  --gray-50:#F8F8F8;
  --gray-300:#EEEEEE;
  --gray-600:#888888;
  --white:#FFFFFF;

  --font: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
          "Malgun Gothic", "맑은 고딕", sans-serif;
  --maxw: 1200px;
  --pad: 20px;
  --radius: 10px;
  --shadow: 0 6px 24px rgba(17,17,17,.10);
}

/* ===== 리셋 ===== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--navy-900);
  background: var(--white);
  word-break: keep-all;
  overflow-wrap: break-word;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3 { line-height: 1.35; margin: 0 0 .6em; letter-spacing: -.01em; }
h1 { font-size: clamp(2rem, 5vw, 3.5rem); }
h2 { font-size: clamp(1.5rem, 3.5vw, 2.5rem); }
h3 { font-size: clamp(1.125rem, 2vw, 1.375rem); }
p { margin: 0 0 1em; }
.num { font-variant-numeric: tabular-nums; }

/* ===== 레이아웃 유틸 ===== */
.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad); }
.section { padding-block: clamp(64px, 8vw, 120px); }
.section--dark { background: var(--gray-900); color: var(--white); }
.section--muted { background: var(--gray-50); }
.section__eyebrow {
  font-size: .8125rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--navy-600); margin-bottom: .75rem;
}
/* 다크 섹션이 #111111로 통일된 뒤에도 --red-600(#B20600)은 그 위에서 2.63:1이라
   여전히 읽히지 않는다. 핑크 액센트는 발주처가 지목해 제거했으므로 흰색을 쓴다.
   구조색인 --navy-600(#333333)도 다크 배경에서는 쓸 수 없다. */
.section--dark .section__eyebrow { color: var(--white); }

/* ===== 버튼 ===== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 54px; padding: 0 28px; border: 0; border-radius: var(--radius);
  font-family: inherit; font-size: 1.0625rem; font-weight: 700;
  text-decoration: none; cursor: pointer;
  transition: background-color .18s ease, transform .18s ease;
}
.btn--primary { background: var(--red-600); color: var(--white); }
.btn--primary:hover { background: var(--red-700); }
/* 히어로에 빨간 채움(.btn--primary)과 빨간 아웃라인이 나란히 서면 어느 쪽이
   주행동인지 흐려진다. 빨강은 `상담 신청` 하나에만 남기고 이 버튼은 차콜로
   내린다. 글자·테두리 모두 흰 배경에서 18.9:1. */
.btn--ghost { background: var(--white); color: var(--navy-900); box-shadow: inset 0 0 0 2px var(--navy-900); }
.btn--ghost:hover { background: var(--gray-50); }
/* 밝은 섹션(--white, --gray-50)과 다크 섹션(--navy-900) 모두에서 비텍스트 대비 3:1 충족 */
.btn:focus-visible,
.accordion__trigger:focus-visible,
.casefilter__btn:focus-visible { outline: 3px solid #D93A42; outline-offset: 3px; }

/* ===== 접근성 ===== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-delay: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    transition-delay: .001ms !important;
  }
}

/* ===== (1) HERO ===== */
/* 발주처 요청: 첫 화면 배경을 화이트로, 모바일에서는 대표 얼굴이 우측에.
   데스크톱은 좌측 텍스트(흰 바탕) / 우측 인물 사진 2분할,
   모바일(≤900px)은 사진을 배경으로 깔고 좌→우로 빠지는 흰 오버레이를 얹는다.
   글자는 전 구간 --navy-900(#111111) 계열이다. */
.hero {
  position: relative; background: var(--white); color: var(--navy-900);
  min-height: min(88vh, 760px); display: flex; align-items: center; overflow: hidden;
}
/* 사진은 히어로 우측 48%를 채운다. 텍스트 컨테이너와 겹치지 않도록
   .hero__copy를 컨테이너의 46%로 묶었다(아래 참조). */
.hero__media { position: absolute; inset: 0 0 0 52%; z-index: 0; margin: 0; display: block; }
/* 원본은 세로 2:3(1280x1920) 창가 입식 포트레이트다. 원본에서 얼굴 중심은
   가로 38%, 세로 24% 지점에 있고 인물 몸통은 가로 16~63%를 차지한다.
   object-position의 퍼센트는 "이미지의 X% 지점을 상자의 X% 지점에 맞춘다"는
   뜻이라, 가로값을 얼굴의 원본 가로 위치(38%)와 같게 두면 상자 크기가
   어떻게 변해도 얼굴이 항상 사진 칼럼의 38% 자리에 온다. 다른 값을 쓰면
   화면이 좁아질수록(=cover 넘침이 커질수록) 얼굴이 옆으로 밀려 잘린다.
   세로값 20%는 머리 위 여백을 지키면서 손(원본 78%)까지 담는 절충이다:
   1440px에서 머리 위 100px·얼굴 25%·아래 78%까지, 2560px에서도 머리 위가
   붙지 않는다. 561px에서 2560px까지 실측으로 확인했다. */
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 38% 20%; }
/* 사진 좌측 경계를 흰색으로 흘려 이어붙인 티가 나지 않게 한다.
   16%까지만 흘린다. 1055px 초과 구간에서는 사진이 칼럼 폭에 정확히 맞아
   인물의 왼쪽 끝(원본 가로 16%)이 곧 이 정지점이 된다 — 팔을 먹지 않는다.
   그 이상으로 늘리면 좁은 화면에서 인물의 왼쪽 뺨까지 먹는다.
   Safari에서 transparent가 검정으로 보간되므로 rgba(255,255,255,0)을 쓴다. */
.hero__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--white) 0%, rgba(255,255,255,0) 16%);
}
.hero__inner { position: relative; z-index: 2; padding-block: clamp(72px, 10vw, 140px); }
.hero__copy { max-width: 46%; }
.hero__eyebrow { font-size: .9375rem; font-weight: 700; letter-spacing: .1em; color: var(--navy-600); margin-bottom: 1rem; }
/* <br> 대신 CSS로 2행 배치. 테스트가 원본 문자열 '형사사건은 지뢰밭입니다'를
   src에서 연속으로 찾으므로 h1에 <br>를 넣을 수 없다.
   8em은 최장 단어(지뢰밭입니다 ~5.2em)보다 넓고 전체(~9.7em)보다 좁아
   font-size가 clamp로 변해도 항상 어절 경계에서 줄바꿈된다. */
.hero__title { max-width: 8em; margin-bottom: 1.25rem; }
.hero__sub { font-size: clamp(1.0625rem, 1.8vw, 1.3125rem); max-width: 46ch; color: var(--navy-600); }
.hero__badges { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; padding: 0; margin: 1.75rem 0 2.25rem; }
/* 모바일에서는 사진 위에 올라가므로 반투명이 아니라 불투명 흰색이라야
   배지 글자 대비(18.9:1)가 사진 밝기와 무관하게 보장된다. */
.hero__badges li {
  padding: 8px 16px; border-radius: 999px; font-size: .9375rem; font-weight: 600;
  background: var(--white); color: var(--navy-900); box-shadow: inset 0 0 0 1px var(--gray-600);
}
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; }

/* ===== (2) 위기 진단 ===== */
/* 배경 이미지는 장식이므로 오버레이 불투명도를 .95 이상으로 유지한다.
   흰 텍스트 대비가 이미지 밝기와 무관하게 12:1 이상으로 확보된다. */
.crisis { position: relative; overflow: hidden; }
.crisis__bg { position: absolute; inset: 0; z-index: 0; }
.crisis__bg img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.crisis::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(45,45,45,.95) 0%, rgba(45,45,45,.97) 100%);
}
.crisis__inner { position: relative; z-index: 2; }

/* 화이트 지배로 바뀌면서 .lead의 기본값은 밝은 배경 기준이다.
   유일하게 남은 다크 섹션(#crisis)에서만 흰색으로 되돌린다. */
.lead { font-size: clamp(1.0625rem, 1.6vw, 1.1875rem); max-width: 62ch; color: var(--navy-600); }
.section--dark .lead { color: rgba(255,255,255,.86); }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; list-style: none; padding: 0; margin: 3rem 0 .75rem; }
.stat {
  padding: 32px 24px; border-radius: var(--radius); text-align: center;
  background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14);
}
.stat--accent { background: rgba(178,6,0,.24); box-shadow: inset 0 0 0 1px rgba(178,6,0,.70); }
.stat__num { font-size: clamp(2.25rem, 5vw, 3.5rem); font-weight: 800; line-height: 1; }
.stat__unit { font-size: clamp(1.25rem, 2.4vw, 1.75rem); font-weight: 800; margin-left: 2px; }
.stat__label { display: block; margin-top: 14px; font-size: .9375rem; line-height: 1.6; color: rgba(255,255,255,.82); }
.stats__source { font-size: .8125rem; color: rgba(255,255,255,.58); }
/* 발주처 요청: 소제목을 빨간 박스 + 흰 글씨로 강조하고 폰트를 2px 올린다.
   #B20600 위 흰 글씨는 7.19:1이라 AA를 넘긴다(새 색을 들이지 않는다).
   display:inline-block이라 아래 .accordion과의 간격은 margin-bottom만 남는다.
   그래서 .accordion에 margin-top을 따로 준다. */
.crisis__subhead {
  display: inline-block;
  margin-top: 3.5rem;
  font-size: clamp(1.25rem, 2.2vw, 1.5rem);
  background: var(--red-600);
  color: var(--white);
  padding: .45em .8em;
  border-radius: 6px;
}

.accordion { border-top: 1px solid rgba(255,255,255,.18); margin-top: 1.25rem; }
.accordion__item { border-bottom: 1px solid rgba(255,255,255,.18); }
/* 발주처 요청으로 위기 진단 섹션 폰트를 2px씩 올렸다(16->18). */
.accordion__head { margin: 0; font-size: 1.125rem; }
.accordion__trigger {
  width: 100%; display: flex; align-items: center; gap: 16px;
  padding: 22px 4px; background: none; border: 0; cursor: pointer;
  font: inherit; font-weight: 700; color: var(--white); text-align: left;
}
.accordion__no { color: var(--white); font-size: 1.0625rem; flex: none; }
.accordion__title { flex: 1; }
.accordion__icon { flex: none; width: 14px; height: 14px; position: relative; }
.accordion__icon::before, .accordion__icon::after {
  content: ""; position: absolute; background: var(--white); transition: transform .2s ease;
}
.accordion__icon::before { inset: 6px 0; height: 2px; }
.accordion__icon::after { inset: 0 6px; width: 2px; }
.accordion__trigger[aria-expanded="true"] .accordion__icon::after { transform: scaleY(0); }
.accordion__panel { padding: 0 4px 24px; color: rgba(255,255,255,.84); max-width: 78ch; }
.accordion__panel[hidden] { display: none; }

/* ===== (3) 구속 피하는 방법 ===== */
.howto__grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(32px, 5vw, 72px); align-items: start; }
.pullquote {
  margin: 0 0 2rem; padding: 24px 28px; border-left: 5px solid var(--red-600);
  background: var(--gray-50); border-radius: 0 var(--radius) var(--radius) 0;
  font-size: clamp(1.125rem, 2.2vw, 1.5rem); font-weight: 600; line-height: 1.55;
}
.principles { list-style: none; counter-reset: p; padding: 0; margin: 0 0 2.25rem; }
.principle { counter-increment: p; padding: 24px 0; border-top: 1px solid var(--gray-300); }
.principle h3 { display: flex; gap: 12px; }
.principle h3::before {
  content: "0" counter(p); color: var(--navy-900); font-variant-numeric: tabular-nums; flex: none;
}
.principle p { color: var(--navy-600); margin: 0; }
.howto__figure { margin: 0; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }

/* ===== 반응형 ===== */
@media (max-width: 900px) {
  /* 히어로 2분할은 561px까지 그대로 유지한다. 이 구간에서 사진을 전체 배경으로
     돌리면 cover 넘침이 작아 얼굴이 화면 중앙(=텍스트 자리)에 오고 흰
     오버레이에 그대로 지워진다. 실측으로 확인한 뒤 되돌린 결정이다. */
  .stats { grid-template-columns: 1fr; }
  .howto__grid { grid-template-columns: 1fr; }
  .howto__figure { order: -1; }
}
/* ---- 모바일 히어로 ---- */
/* 발주처 요청: "첫 페이지 모바일에서 대표님 얼굴 우측에, 텍스트 조금 겹치더라도".
   세로 2:3 원본으로 바꾼 뒤로는 사진을 화면 전체(inset:0)에 깔 수 없다.
   390x658 상자에 2:3을 cover하면 높이 기준으로 맞아 가로 넘침이 48px밖에
   안 남고, 얼굴(원본 가로 38%)이 아무리 당겨도 화면 45% 아래로 못 간다 —
   글자 자리에 얼굴이 겹친다. 그래서 사진 칼럼을 우측 70%로 두어
   가로 넘침을 167px까지 벌렸다. 그 위에서 6%로 당기면 얼굴이 화면
   ~70%(390px 기준)에 온다. 6%는 0%보다 얼굴을 조금 왼쪽으로 미는 대신
   320px처럼 히어로가 세로로 길어지는(=가로 넘침이 커지는) 화면에서 얼굴
   오른쪽이 화면 밖으로 밀려나지 않게 하는 안전 여유다.
   실측: 320px 80%, 360px 73%, 390px 70%, 560px 63%. 전 구간에서
   인물(원본 가로 16~63%)의 얼굴은 온전히 보인다.
   세로값은 의미가 없다(높이 기준 cover라 원본 세로 전체가 그대로 보인다). */
@media (max-width: 560px) {
  .hero__media { inset: 0 0 0 30%; }
  .hero__media img { object-position: 6% 50%; }
  /* 정지점은 사진 칼럼 기준이다(칼럼은 화면 30%에서 시작한다).
     새 사진은 창가 역광이라 얼굴 뒤가 밝다 — 예전 어두운 벽 배경과 달리
     흰 오버레이가 조금만 얹혀도 이목구비가 날아간다. 그래서 얼굴이 시작되는
     지점(칼럼 47% = 화면 63%)까지만 .72를 유지하고 그 뒤로 급히 떨어뜨린다.
     얼굴 중심(칼럼 61%)에서 알파는 .24까지 내려간다.
     .72는 아이브로우가 --red-600(#B20600)이던 시절, 그 글자가 인물 얼굴의
     그늘진 쪽 위에 걸리는 최악 지점에서도 4.5:1을 넘기는 하한이었다
     (.64에서는 4.02:1로 떨어졌다). 이제 아이브로우는 --navy-600(#333333,
     흰 배경 12.6:1)이라 더 어두워졌고, 이 하한은 여유가 더 커졌다.
     그래도 .72와 정지점은 그대로 둔다 — 제목·본문 텍스트 가독성의 근거이기도
     하기 때문이다.
     칼럼 왼쪽(화면 0~30%)은 사진이 없는 흰 바탕이라 이음매가 없다. */
  /* 각도 88deg — 발주처가 "대표님 얼굴이 뿌옇다"고 한 원인이 여기 있었다(2026-09-03).
     기존 95deg 는 90deg(정수평)에서 **아래쪽으로** 기운 값이라, 그라데이션 진행이
     오른쪽-아래로 갔다. 얼굴은 칼럼 위쪽(세로 24%)에 있으므로 진행이 덜 된 자리,
     즉 **더 불투명한 자리**에 놓였다. 정지점을 아무리 손봐도 이 5도가 되돌린다.
     실측(390px, 실제 사진에 오버레이를 합성해 잼): 얼굴 영역 평균 알파
       95deg .550 → 90deg .425 → 85deg .344.  정지점만 완화하면 95deg 에서 .483 —
     각도가 정지점보다 큰 레버다.
     88deg 로 위쪽으로 살짝 기울이고 정지점을 함께 낮춰 .316 까지 내렸다(-43%).
     ⚠️ 더 기울이지 마라. 텍스트도 칼럼 위쪽에 있어 같이 옅어진다 —
     전 폭 구간(320·360·390·430·480·560px) 실측 최저 대비:
       88deg+이 정지점 6.55:1 / 85deg+더완화 4.67:1 / 80deg+더완화 3.92:1(AA 미달).
     6.55:1 은 #111111 기준이고 AA(4.5:1) 대비 45% 여유다. */
  .hero__media::after {
    background: linear-gradient(88deg,
      rgba(255,255,255,.96) 0%,
      rgba(255,255,255,.94) 25%,
      rgba(255,255,255,.68) 47%,
      rgba(255,255,255,.18) 60%,
      rgba(255,255,255,.06) 78%,
      rgba(255,255,255,.04) 100%);
  }
  /* 오버레이 알파가 .72 이상인 구간(화면 0~63%) 안에 글자를 묶는다.
     64%는 그 경계에 맞춘 값이다(390px에서 글자 오른쪽 끝 245px = 화면 63%).
     버튼·배지는 자체 배경이 있어 이 제한을 받지 않는다(아래 .hero__cta 참조). */
  .hero__copy { max-width: 100%; }
  .hero__eyebrow, .hero__title, .hero__sub { max-width: 64%; }
}
@media (max-width: 480px) {
  :root { --pad: 16px; }
  .hero { min-height: min(78vh, 660px); }
  .hero__cta { max-width: 84%; }
  .hero__cta .btn { width: 100%; }
}

/* ===== (4) 대표인사말 ===== */
.greeting__grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(32px, 5vw, 72px); align-items: start; }
/* 대표인사말은 다크에서 --gray-50으로 바뀌었다. 아래 요소들은 원래
   흰 반투명 전제라 밝은 배경에서는 보이지 않으므로 전부 다시 잡았다. */
.greeting__figure { margin: 0; border-radius: var(--radius); overflow: hidden; position: sticky; top: 32px; }
.timeline { list-style: none; padding: 0; margin: 2rem 0; border-left: 2px solid var(--gray-300); }
.timeline li { position: relative; padding: 10px 0 10px 24px; }
/* 점 둘레의 링은 섹션 배경색과 같아야 선을 끊어 보이게 한다. */
.timeline li::before {
  content: ""; position: absolute; left: -7px; top: 20px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--navy-900); box-shadow: 0 0 0 3px var(--gray-50);
}
.timeline__org { font-weight: 700; margin-right: 10px; }
.timeline__role { color: var(--navy-600); font-size: .9375rem; }
.episodes { display: grid; gap: 20px; margin: 2rem 0; }
.episode {
  padding: 24px; border-radius: var(--radius); background: var(--white);
  box-shadow: var(--shadow), inset 0 0 0 1px var(--gray-300);
}
.episode h3 { color: var(--red-500); }
.episode p { margin: 0; color: var(--navy-600); }
.pullquote--dark { background: var(--white); color: var(--navy-900); }

/* ===== (5) 일하는 방식 ===== */
.method__intro { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.method__intro-body > :last-child { margin-bottom: 0; }
.method__figure { margin: 0; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
/* .lead의 기본값이 이미 밝은 배경용이라 남겨두기만 한다. */
.lead--dark { color: var(--navy-600); }
.cards { display: grid; gap: 20px; margin: 2.5rem 0; }
.cards--4 { grid-template-columns: repeat(2, 1fr); }
/* 흰 섹션 위에도 카드가 뜨도록 그림자에 1px 헤어라인을 더한다. */
.card {
  padding: 28px; background: var(--white); border-radius: var(--radius);
  box-shadow: var(--shadow), inset 0 0 0 1px var(--gray-300);
}
.card h3 { color: var(--red-500); }
.card p { margin: 0; color: var(--navy-600); }
.workflow { padding: 32px; border-radius: var(--radius); background: var(--gray-900); color: var(--white); }
.workflow h3 { color: var(--white); }
.workflow__steps { margin: 0 0 1rem; padding-left: 1.25rem; color: rgba(255,255,255,.86); }
.workflow__steps li { margin-bottom: .5rem; }
.workflow__note { margin: 0; color: rgba(255,255,255,.86); }

/* ===== (6) 절차별 서비스 ===== */
/* 데스크톱에서는 사진을 왼쪽에 두되, DOM 순서는 제목이 먼저다.
   (좁은 화면에서 스택될 때 제목이 사진보다 위에 오게 하기 위함) */
.process__intro { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.process__intro-body { grid-column: 2; grid-row: 1; }
.process__intro-body > :last-child { margin-bottom: 0; }
.process__figure { grid-column: 1; grid-row: 1; margin: 0; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.process { list-style: none; padding: 0; margin: 2.5rem 0 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
/* 섹션 배경이 --gray-50이라 스텝 카드는 흰색이라야 구분된다. */
.process__step {
  padding: 26px 22px; border-radius: var(--radius);
  background: var(--white); box-shadow: inset 0 0 0 1px var(--gray-300);
}
.process__no { display: block; font-size: .875rem; font-weight: 800; color: var(--navy-900); margin-bottom: 10px; }
.process__step h3 { font-size: 1.0625rem; color: var(--red-500); }
.process__step p { margin: 0; font-size: .9375rem; color: var(--navy-600); }

@media (max-width: 1024px) {
  .process { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .greeting__grid { grid-template-columns: 1fr; }
  .greeting__figure { position: static; max-width: 360px; }
  .cards--4 { grid-template-columns: 1fr; }
  .method__intro, .process__intro { grid-template-columns: 1fr; }
  .process__intro-body, .process__figure { grid-column: 1; grid-row: auto; }
}
@media (max-width: 560px) {
  .process { grid-template-columns: 1fr; }
}

/* ===== (7) 3대 전문분야 ===== */
.fields__intro { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.fields__intro-body > :last-child { margin-bottom: 0; }
.fields__figure { margin: 0; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }

.field {
  padding: clamp(28px, 4vw, 44px); margin-top: 28px;
  background: var(--white); border-radius: var(--radius);
  box-shadow: var(--shadow), inset 0 0 0 1px var(--gray-300);
}
.field h3 { color: var(--navy-900); border-bottom: 3px solid var(--navy-900); padding-bottom: .5rem; display: inline-block; }
.field__lead { color: var(--navy-600); }
.field__points { list-style: none; padding: 0; margin: 1.5rem 0; }
.field__points li { position: relative; padding: 10px 0 10px 26px; border-top: 1px solid var(--gray-300); color: var(--navy-600); }
.field__points li::before {
  content: ""; position: absolute; left: 6px; top: 21px;
  width: 7px; height: 7px; border-radius: 50%; background: var(--gray-600);
}
.field__points strong { color: var(--red-500); }
/* 발주처 요청(2026-09-03): 불릿 안의 강조는 두 종류인데 둘 다 빨강이라
   한 줄에 빨강이 셋씩 박혀 강조가 강조로 안 읽혔다. 문두에서 문장 전체를
   이끄는 강조는 빨강으로 두고, 문장 **안**에 박힌 법률 용어(사기/횡령/배임,
   경영 판단 원칙)만 검정 볼드로 되돌린다. 굵기는 <strong> 기본값을 그대로 쓴다 —
   색만 본문색으로 돌리는 것이지 강조를 없애는 것이 아니다. */
.field__points strong.term { color: var(--navy-900); }
.field > :last-child { margin-bottom: 0; }

/* 표는 자체적으로 가로 스크롤한다. 페이지 전체에 가로 스크롤이 생기면 안 된다.
   display:block이라야 overflow-x가 먹는다(display:table은 overflow를 무시한다). */
.lawtable {
  width: 100%; border-collapse: collapse; margin-top: 1.25rem;
  font-size: .9375rem; display: block; overflow-x: auto;
}
.lawtable caption { text-align: left; font-weight: 700; padding-bottom: .5rem; color: var(--navy-900); }
.lawtable th, .lawtable td { border: 1px solid var(--gray-300); padding: 10px 12px; text-align: left; vertical-align: top; }
.lawtable thead th { background: var(--gray-50); white-space: nowrap; }
/* 근거 법령은 표 밖 일반 흐름에 둔다. <caption>은 표의 max-content 폭을 물려받아
   좁은 화면에서 스크롤 영역 밖으로 잘리므로, 긴 법령명을 캡션에 넣지 않는다. */
.lawtable__src { margin: .5rem 0 0; font-size: .8125rem; color: var(--navy-600); }
.disclaimer { margin: 2rem 0 0; font-size: .875rem; color: var(--navy-600); }

/* ===== (8) 형사 전반 ===== */
.allfields__grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(32px, 5vw, 64px); align-items: start; }
.allfields__body > :last-child { margin-bottom: 0; }
.taggrid { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; padding: 0; margin: 0; }
.taggrid__item {
  padding: 10px 18px; border-radius: 999px; font-weight: 600; font-size: .9375rem;
  background: var(--white); color: var(--navy-900); box-shadow: inset 0 0 0 1px var(--gray-300);
}

@media (max-width: 900px) {
  .fields__intro { grid-template-columns: 1fr; }
  .allfields__grid { grid-template-columns: 1fr; }
}

/* ===== (9) 해결사례 ===== */
/* 포커스 표시는 위 .btn:focus-visible 그룹에서 #D93A42로 함께 처리한다. */
.casefilter { display: flex; flex-wrap: wrap; gap: 8px; margin: 2rem 0 1.75rem; }
.casefilter__btn {
  padding: 10px 20px; border: 0; border-radius: 999px; cursor: pointer;
  font: inherit; font-size: .9375rem; font-weight: 600;
  background: var(--white); color: var(--navy-600); box-shadow: inset 0 0 0 1px var(--gray-600);
  transition: background-color .18s ease, color .18s ease;
}
.casefilter__btn.is-active { background: var(--navy-900); color: var(--white); box-shadow: none; }

.cases { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.case {
  display: flex; flex-direction: column; gap: 10px;
  padding: 26px 24px; background: var(--white);
  border-radius: var(--radius); box-shadow: var(--shadow), inset 0 0 0 1px var(--gray-300);
  border-top: 4px solid var(--gray-300);
}
/* 필터는 DOM에서 카드를 빼지 않고 이 클래스만 토글한다. 18건 전체가 마크업에
   남아야 검색 인덱싱이 유지된다. .case의 display:flex보다 뒤에 와야 이긴다. */
.case--hidden { display: none; }
.case__badge {
  align-self: flex-start; padding: 5px 12px; border-radius: 6px;
  background: var(--red-600); color: var(--white);
  font-size: .8125rem; font-weight: 700;
}
.case__crime { font-size: 1rem; margin: 0; color: var(--navy-900); }
.case__summary { margin: 0; font-size: .9375rem; color: var(--navy-600); }
.cases__more { display: flex; justify-content: center; margin-top: 2rem; }

/* ===== (10) 언론 ===== */
.press { list-style: none; padding: 0; margin: 2rem 0 0; }
.press__item {
  display: grid; grid-template-columns: 140px 1fr auto; gap: 20px; align-items: baseline;
  padding: 20px 0; border-top: 1px solid var(--gray-300);
}
.press__outlet { font-weight: 700; color: var(--navy-600); }
.press__title { margin: 0; font-weight: 600; }
.press__date { color: var(--navy-600); font-size: .875rem; white-space: nowrap; }

@media (max-width: 1024px) { .cases { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px) {
  .cases { grid-template-columns: 1fr; }
  .press__item { grid-template-columns: 1fr; gap: 6px; }
}

/* ===== (11) 상담신청 폼 ===== */
.consult { position: relative; overflow: hidden; }
.consult__bg { position: absolute; inset: 0; z-index: 0; }
.consult__bg img { width: 100%; height: 100%; object-fit: cover; }
/* 사진 질감은 남기되 배경은 흰색이 되게 한다. 알파 .95면 사진의 가장 어두운
   픽셀(순수 검정)조차 합성 결과가 밝은 회색이라 --navy-900 글자가 16.9:1을 보장한다. */
.consult::after { content: ""; position: absolute; inset: 0; z-index: 1; background: rgba(255,255,255,.95); }
.consult__inner { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: start; }
.consult__tel { margin-top: 1.5rem; font-size: clamp(1.75rem, 4vw, 2.5rem); font-weight: 800; }
.consult__tel a { text-decoration: none; color: var(--red-600); }

.cform { background: var(--white); color: var(--navy-900); padding: clamp(24px, 4vw, 36px); border-radius: var(--radius); box-shadow: var(--shadow); }
.cform__row { margin-bottom: 18px; }
.cform__row label { display: block; font-weight: 700; font-size: .9375rem; margin-bottom: 8px; }
.cform__row label span { color: var(--red-600); }
.cform input[type="text"], .cform input[type="tel"], .cform select {
  width: 100%; min-height: 52px; padding: 0 14px;
  border: 1px solid var(--gray-600); border-radius: 8px;
  font: inherit; color: var(--navy-900); background: var(--white);
}
.cform input:focus-visible, .cform select:focus-visible {
  outline: 3px solid var(--red-600); outline-offset: 1px; border-color: var(--red-600);
}
.cform .is-invalid { border-color: var(--red-600); background: #FFF6F6; }
.cform__error { display: block; margin-top: 6px; font-size: .875rem; color: var(--red-600); }

.cform__consent { margin: 20px 0; padding: 16px; background: var(--gray-50); border-radius: 8px; }
.cform__consent label { font-size: .9375rem; }
.cform__consent label span { color: var(--red-600); }
.cform__policy { margin-top: 10px; font-size: .8125rem; color: var(--navy-600); }
.cform__policy summary { cursor: pointer; font-weight: 600; }
.cform__policy p { margin: .6em 0 0; }

/* 허니팟. aria-hidden만으로는 화면에 남으므로 시각적으로도 지운다.
   display:none을 쓰면 일부 봇이 건너뛰므로 클립 방식으로 숨긴다.
   주의: 위의 .cform input[type="text"](0,2,1)가 .cform__hp(0,1,0)를 이겨서
   !important 없이는 width:100%/min-height:52px가 그대로 남는다. 실제로
   헤드리스 측정에서 1200x52로 보였다. 진짜 사용자가 채우면 스팸으로 걸러져
   문의가 조용히 사라지므로 크기 관련 선언을 전부 강제한다. */
.cform__hp {
  position: absolute !important;
  width: 1px !important; height: 1px !important; min-height: 0 !important;
  padding: 0 !important; border: 0 !important;
  margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.cform__submit { width: 100%; }
.cform__submit[disabled] { opacity: .6; cursor: progress; }
.cform__status { margin-top: 14px; font-size: .9375rem; min-height: 1.5em; }
.cform__status.is-ok { color: #1B7F3B; font-weight: 700; }
.cform__status.is-error { color: var(--red-600); font-weight: 700; }

/* ===== (12) FOOTER ===== */
.footer { background: var(--navy-900); color: rgba(255,255,255,.78); padding-block: clamp(48px, 6vw, 80px) 32px; font-size: .9375rem; }
.footer a { color: rgba(255,255,255,.9); }
.footer__grid { display: grid; grid-template-columns: 1fr 1.4fr 1fr; gap: 32px; }
.footer__name { font-size: 1.25rem; font-weight: 800; color: var(--white); margin: 0 0 .25em; }
.footer__lead { margin: 0; }
.footer__head { font-size: .875rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--white); margin-bottom: .75em; }
.footer__col p { margin: 0 0 .4em; }
.footer__legal { margin-top: 40px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.16); font-size: .8125rem; color: rgba(255,255,255,.58); }
.footer__links { display: flex; flex-wrap: wrap; gap: 16px; }
.footer__copy { margin: 0; }

/* ===== 플로팅 ===== */
.floating { position: fixed; right: 20px; bottom: 20px; z-index: 900; display: flex; flex-direction: column; gap: 10px; }
.floating__btn {
  width: 56px; height: 56px; border: 0; border-radius: 50%; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font: inherit; font-size: .8125rem; font-weight: 700; text-decoration: none;
  box-shadow: 0 4px 16px rgba(17,17,17,.24);
  transition: transform .18s ease;
}
.floating__btn:hover { transform: translateY(-2px); }
.floating__btn:focus-visible { outline: 3px solid var(--red-600); outline-offset: 3px; }
.floating__btn--top { background: var(--white); color: var(--navy-900); box-shadow: 0 4px 16px rgba(17,17,17,.24), inset 0 0 0 1px var(--gray-600); }
/* #to-top은 .btn이 아니라 아래 .btn[hidden] 규칙이 닿지 않는다.
   .floating__btn{display:flex}가 UA 기본 [hidden]을 이기므로 같은 처리를 따로 해준다. */
.floating__btn--top[hidden] { display: none; }
/* 전화 버튼은 navy-900이라 푸터(같은 navy-900) 위에서 배경과 완전히 같은 색이
   된다. 다크 섹션은 이제 gray-900으로 내려가 미세한 차이가 생겼지만, 푸터 위에서는
   여전히 흰색 반투명 링이 유일한 경계다. 알파 .28은 #111111 위에서
   2.48:1이라 비텍스트 경계 기준 3:1에 못 미친다. .40으로 올리면 3.83:1이다.
   새 색을 들이지 않으면서 경계를 세우는 방법이라 값만 조정한다. */
.floating__btn--tel {
  background: var(--navy-900); color: var(--white);
  box-shadow: 0 4px 16px rgba(17,17,17,.24), inset 0 0 0 1px rgba(255,255,255,.40);
}
.floating__btn--consult { display: none; background: var(--red-600); color: var(--white); }

@media (max-width: 900px) {
  .consult__inner { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr; }
}
/* 모바일: 우측 세로 스택 -> 하단 고정 2분할 바 (설계 스펙 플로팅 UI)
   엄지가 닿는 위치에 전화/상담신청을 나란히 둔다.
   .floating__btn{flex:1}이라 칸 수가 줄어도 폭은 자동으로 2등분된다. */
@media (max-width: 560px) {
  .floating {
    right: 0; left: 0; bottom: 0;
    flex-direction: row;
    gap: 0;
    box-shadow: 0 -2px 12px rgba(17,17,17,.18);
  }
  .floating__btn {
    flex: 1; width: auto; height: 58px; border-radius: 0;
    font-size: .9375rem;
  }
  .floating__btn:hover { transform: none; }
  .floating__btn--consult { display: flex; }
  /* 위로가기는 하단 바 위에 원형으로 띄운다 */
  .floating__btn--top {
    position: fixed; right: 12px; bottom: 70px;
    flex: none; width: 46px; height: 46px; border-radius: 50%;
  }
  /* 하단 바가 푸터 마지막 줄을 가리지 않도록 여백을 준다 */
  body { padding-bottom: 58px; }
}

/* ===== [hidden] 강제 ===== */
/* .btn의 display:inline-flex가 UA 기본 [hidden]{display:none}을 이겨서
   main.js가 el.hidden = true 로 숨겨도 버튼이 그대로 보인다.
   ⑨ 해결사례의 #cases-more가 실제로 이 문제를 겪는다. */
.btn[hidden] { display: none; }

/* ===== 스크롤 리빌 (main.js initReveal) ===== */
/* main.js가 .reveal / .is-visible 클래스를 붙이지만 대응 스타일이 없으면
   리빌이 아무 효과도 내지 않는다. transform/opacity만 사용한다. */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .5s ease, transform .5s ease; }
.reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
}