@charset "UTF-8";
/* ==========================================================================
   노동법률사무소 치유 — styles.css
   토큰의 근거는 DESIGN.md. 색상값은 브랜드 카드(nomoosa.png) 실측값이다.
   여기서 값을 즉흥적으로 만들지 말 것.
   ========================================================================== */

/* ── Tokens ───────────────────────────────────────────────────────────── */
:root {
  /* Brand green — 브랜드 카드 실측 */
  --green-900: #012C2F;
  --green-800: #0A3C35;
  --green-700: #014640;
  --green-600: #1F564D;
  --green-500: #2E7A6B;
  --green-100: #D9E5E1;
  --green-050: #EDF3F1;

  /* Gold — 브랜드 보조색 (선·구분자·소제목 전용) */
  /* 밝은 배경 위 소제목용. #8C6430 은 베이지 배경(#EAE6DD)에서 4.24:1 로 AA 미달이었다. */
  --gold-600: #86602E;
  --gold-500: #A4783C;
  /* 딥그린 위 텍스트로 쓰는 금색. #C4A16A 는 3.47:1 로 AA(4.5) 미달이었다.
     밝은 배경에는 쓰이지 않으므로(전부 green-600~800 위) 밝히는 쪽이 안전하다. */
  --gold-400: #D4BA92;

  /* Accent — 승인 도장 */
  --stamp-600: #B23A2E;
  --stamp-500: #C94F3D;

  /* Surface */
  --cream-050: #F5F3EE;
  --cream-100: #EAE6DD;
  --white: #FFFFFF;
  --line: #DFDACE;

  /* Text */
  --ink-900: #161A18;
  --ink-600: #4A544E;
  /* 주석·부가 안내에 쓰는 회색. #7C857F 는 배경에 따라 3.06~3.81:1 로 AA 미달이었다.
     주 이용자가 다친 노동자와 고령자라 여기서 타협하면 안 된다. */
  --ink-400: #626964;
  --on-dark: #F6F2EA;

  /* Semantic */
  --ok: #2E7D5B;
  --warn: #B4761F;
  --err: #B23A2E;

  --font-sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
               system-ui, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;

  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-full: 999px;

  --shadow-sm: 0 1px 2px rgba(1, 44, 47, .06);
  --shadow-md: 0 4px 16px rgba(1, 44, 47, .08);
  --shadow-lg: 0 12px 32px rgba(1, 44, 47, .14);

  --container: 1120px;
  --gutter: 20px;

  --ease: cubic-bezier(.2, .8, .2, 1);
  --dur: 180ms;

  /* ── 세로 리듬 ────────────────────────────────────────────────────
     "영역별 공백을 다 같이 줄여 달라"는 요청이 이 프로젝트에서 세 번 나왔다.
     그때마다 섹션 규칙을 하나씩 찾아 고쳤다. 여기 한 곳만 고치면 되게 한다.
     768px 부터는 아래에서 이 토큰 자체를 다시 정의한다 — 쓰는 쪽은 안 고친다. */
  --rhythm: 42px;      /* 섹션 위아래 여백 */
  --head-gap: 26px;    /* 섹션 제목 묶음과 그 아래 내용 사이 */

  --header-h: 68px;
  --mobilebar-h: 66px;
}

@media (min-width: 768px) { :root { --gutter: 32px; } }

/* ── Reset ────────────────────────────────────────────────────────────── */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  /* 모달이 열려 스크롤바가 사라질 때 본문이 밀리지 않도록 자리를 늘 비워둔다 */
  scrollbar-gutter: stable;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 20px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--cream-050);
  color: var(--ink-900);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.75;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
@media (min-width: 768px) { body { font-size: 17px; } }

img, svg { max-width: 100%; height: auto; display: block; }

h1,
h2,
h3,
h4 {
  margin: 0;
  word-break: keep-all;
  text-wrap: balance;
  letter-spacing: -0.02em;
  font-weight: 700;
  line-height: 1.4;
}

p { margin: 0; text-wrap: pretty; word-break: keep-all; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: var(--green-500); text-underline-offset: 3px; }
button { font: inherit; color: inherit; }

:focus-visible {
  outline: 2px solid var(--green-500);
  outline-offset: 2px;
  border-radius: 4px;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 300;
  background: var(--green-800); color: var(--on-dark);
  padding: 12px 20px; border-radius: 0 0 var(--r-md) 0;
}
.skip-link:focus { left: 0; }

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

/* ── Layout ───────────────────────────────────────────────────────────── */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }

.section { padding-block: var(--rhythm); }
@media (min-width: 768px) { :root { --rhythm: 64px; } }

.section--tint { background: var(--green-050); }

.section__head { max-width: 42rem; margin-bottom: var(--head-gap); }
.section__head--center { max-width: 48rem; margin-inline: 0; text-align: left; }

.eyebrow {
  display: inline-flex; align-items: center;
  font-size: 12.5px; font-weight: 700; letter-spacing: 0.14em;
  color: var(--gold-600); margin-bottom: 10px;
}

/* 제목은 본문과 같은 서체를 쓰고 굵기·크기·자간으로만 위계를 만든다.
   Pretendard 는 가변 서체라 800 까지 쓸 수 있다. */
.h2 { font-weight: 800; font-size: 26px; line-height: 1.3; letter-spacing: -0.03em; }
@media (min-width: 768px) { .h2 { font-size: 36px; } }

.section__lead { margin-top: 16px; color: var(--ink-600); font-size: 16px; }
@media (min-width: 768px) { .section__lead { font-size: 17px; } }
.section__head--center .section__lead { margin-inline: 0; max-width: 38rem; }

/* 이 문장은 두 가지를 한 호흡에 말한다(보상금은 당신 몫 / 어디로 새는지·누가 보는지).
   중간에서 접히면 두 덩어리로 읽혀 힘이 빠진다. 넓은 화면에서는 한 줄로 둔다.
   실측 필요폭 927px · 1024px 화면의 컨테이너 안쪽 948px — 1024px 부터 들어간다. */
@media (min-width: 1024px) {
  #why .section__head, #why .section__lead, #why .footnote { max-width: none; }
}

.measure { max-width: 34rem; }
.mt-4 { margin-top: 16px; } .mt-6 { margin-top: 24px; } .mt-8 { margin-top: 32px; }

/* ── Buttons ──────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 56px; padding: 12px 26px;
  border: 0; border-radius: var(--r-md);
  font-size: 16px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.3;
  text-decoration: none; cursor: pointer; text-align: center;
  transition: background-color var(--dur) var(--ease), transform var(--dur) var(--ease),
              border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
@media (min-width: 768px) { .btn { min-height: 52px; font-size: 17px; } }
.btn:hover { transform: translateY(-1px); }

.btn--primary { background: var(--green-800); color: var(--on-dark); }
.btn--primary:hover { background: var(--green-700); }

.btn--urgent { background: var(--stamp-600); color: #fff; }
.btn--urgent:hover { background: #9C3126; }

.btn--secondary { background: transparent; color: var(--green-800); border: 1px solid var(--green-800); }
.btn--secondary:hover { background: var(--green-800); color: var(--on-dark); }


.btn--ghost { background: transparent; color: var(--ink-600); padding-inline: 10px; }
.btn--ghost:hover { color: var(--green-800); }

/* 카카오톡은 **노란 바탕 자체가 식별 표시**다. 글자를 검정 85% 로 두는 것이
   카카오 공식 채널 버튼 규격이다. 우리 초록·붉은색 어디에도 없는 색이라
   "여기는 카카오톡" 이 글자를 읽기 전에 전달된다. */
.btn--kakao { background: #FEE500; color: rgba(0, 0, 0, .85); border: 0; }
.btn--kakao:hover { background: #F2DA00; }

/* 전화는 사이트 초록 계열. 가장 진한 초록(--green-800)은 1순위 버튼이 쓰므로
   한 단계 옅은 --green-600 을 쓴다. 흰 글자 대비 8.4:1 로 넉넉하다. */
.btn--call { background: var(--green-600); color: var(--on-dark); border: 0; }
.btn--call:hover { background: var(--green-700); }

/* ── 전화번호가 '누를 것'으로 보이게 ────────────────────────────────
   숫자만 있으면 그냥 글자로 읽힌다. 수화기 기호는 연령·언어와 무관하게
   통하는 유일한 표시다. 크기는 em 이라 번호 크기를 따라간다.

   히어로만 아이콘이 번호가 아니라 라벨에 붙어 있다 — 번호 앞에 두면
   좁은 칸에서 "02-858- / 9368" 로 깨지고, 줄이면 이름과 겹쳤다. */
.telico { width: 1em; height: 1em; flex: 0 0 auto; margin-right: .3em; vertical-align: -.12em; }
.telnum { white-space: nowrap; }          /* 하이픈에서 끊기는 것을 막는다 */

/* 번호 옆 '(클릭)'. 데스크톱에서 tel: 은 대개 아무 일도 안 하거나 낯선 프로그램을
   열어서 거짓말이 된다 — **모바일에서만** 보인다.
   히어로 녹색 카드와 소개 영역은 뺐다. 그 둘은 바로 옆에 상담 버튼이 있어
   무엇을 누르는 자리인지 이미 분명하다.

   숫자 span **밖**에 형제로 둔다. <a> 가 inline-flex 라 기본 align-items:center 로
   번호와 가운데가 맞고, 울림(숫자 span 에 걸려 있다)에도 휩쓸리지 않는다. */
.telclick { display: none; }
@media (max-width: 767.98px) {
  .telclick { display: inline; margin-left: .35em; font-size: .62em; font-weight: 600; opacity: .72; }

  /* '(클릭)'이 붙은 번호에만 밑줄. 링크라는 가장 오래된 신호다.
     짜치지 않게 하는 것은 세 가지다.
       · 굵기 1.5px — 글자 굵기의 절반쯤. 기본 밑줄은 너무 두껍고 촌스럽다.
       · 간격 5px — 숫자에 붙지 않게 띄운다. 붙으면 밑줄이 글자를 눌러 보인다.
       · 색은 글자색의 45% — 선이 글자보다 세면 밑줄이 주인공이 된다.
     color-mix 를 못 읽는 브라우저는 이 줄만 무시하고 currentColor 로 그린다(그래도 멀쩡하다).

     히어로의 「대표 노무사」 금색 밑줄과는 굵기·색·간격이 모두 달라 섞이지 않는다.
     그쪽은 강조, 이쪽은 링크다. */
  .mobilenav__tel .telnum__t,
  .seccall .telnum__t,
  .consult__tel .telnum__t,
  .footer__list .telnum .telnum__t {
    text-decoration: underline;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 5px;
    text-decoration-color: currentColor;
    text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
  }
  /* 누르는 순간에는 선을 진하게 — 눌렸다는 신호를 한 번 더 준다 */
  a[data-track="call"]:active .telnum__t { text-decoration-color: currentColor; }
}
/* 라벨 줄 — 왼쪽은 「산재 무료 상담」, 오른쪽 끝은 「(클릭)」(사용자 요청) */
.hero__callLabel { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.hero__callLabelT { display: flex; align-items: center; }
.hero__callLabelT .telico { width: 1.05em; height: 1.05em; }

/* 누를 때 반응. 아이콘이 '누를 수 있다'를 미리 알리고, 이것이 '눌렸다'를 확인시킨다. */
a[data-track="call"]:active { transform: translateY(1px); opacity: .85; }

/* ── 수화기가 짧게 울린다 ──────────────────────────────────────────────
   주 이용자가 고령 재해자라 "이 숫자를 누르면 전화가 걸린다"를 아이콘만으로
   놓칠 수 있다. 그렇다고 번호를 흔들면 스팸 배너가 된다. 네 가지로 선을 긋는다.

   1. **아이콘만** 움직인다. 숫자는 미동도 없다.
   2. **울리는 시간은 0.6초, 쉬는 시간은 4.4초.** 5초 중 88%는 정지 상태다.
      계속 떠는 것과 가끔 울리는 것은 전혀 다르게 읽힌다.
   3. **눌러야 할 자리에만.** 히어로 · 소개 2 · 섹션 끝 2 · 상담 · 모바일 메뉴.
      푸터와 퀵메뉴는 정지 상태로 둔다(목록 성격이다).
      **섹션 끝 두 곳은 숫자만 울리고 아이콘은 정지다** — 그 아이콘은 15px 짜리
      라벨 옆이라 13도로 돌면 글자가 떨리는 것처럼 보인다.
      전부 다 흔들리면 난장판이 된다.
   4. 회전각 최대 13도. 더 키우면 장난스러워진다.

   prefers-reduced-motion 을 켠 사용자에게는 아예 움직이지 않는다. */
@keyframes telRing {
  0%, 12%, 100% { transform: rotate(0); }
  2%  { transform: rotate(-13deg); }
  4%  { transform: rotate(11deg); }
  6%  { transform: rotate(-9deg); }
  8%  { transform: rotate(7deg); }
  10% { transform: rotate(-4deg); }
}
.hero__callLabelT .telico,
.consult__tel .telico,
.mobilenav__tel .telico,
#about .btn--ghost .telico {
  animation: telRing 5s ease-in-out infinite;
  transform-origin: 50% 60%;
}
/* 숫자도 같이 울린다. 다만 **각도를 6분의 1로** 낮춘다(13도 → 2도).
   글자는 폭이 넓어서 같은 각도로 돌리면 끝이 크게 튄다 —
   151px 짜리 번호를 2도만 돌려도 양 끝이 2.6px 움직인다. 그 정도면 충분하다.
   더 키우면 글자가 흔들리는 것으로 보이고, 그때부터 스팸 배너의 어법이 된다. */
@keyframes telRingSoft {
  0%, 12%, 100% { transform: rotate(0); }
  2%  { transform: rotate(-2deg); }
  4%  { transform: rotate(1.7deg); }
  6%  { transform: rotate(-1.4deg); }
  8%  { transform: rotate(1deg); }
  10% { transform: rotate(-.6deg); }
}
.hero__tel .telnum__t,
.consult__tel .telnum__t,
.seccall .telnum__t,
.mobilenav__tel .telnum__t,
#about .btn--ghost .telnum__t {
  animation: telRingSoft 5s ease-in-out infinite;
  transform-origin: 50% 50%;
}
/* 지금은 inline-flex 부모의 자식이라 자동으로 block 이 되지만, 부모가 flex 가
   아니게 되면 inline 으로 돌아가 transform 이 조용히 죽는다. 안전판으로 남긴다.
   (.hero__tel 은 아래 터치영역 규칙에서 이미 inline-flex 다) */
.hero__tel .telnum__t, .consult__tel .telnum__t, .seccall .telnum__t,
.mobilenav__tel .telnum__t, #about .btn--ghost .telnum__t { display: inline-block; }

@media (prefers-reduced-motion: reduce) {
  .hero__callLabelT .telico, .consult__tel .telico,
  .mobilenav__tel .telico, #about .btn--ghost .telico,
  .hero__tel .telnum__t, .consult__tel .telnum__t, .seccall .telnum__t,
  .mobilenav__tel .telnum__t, #about .btn--ghost .telnum__t { animation: none; }
}

.btn--block { width: 100%; }
.btn--sm { min-height: 44px; font-size: 15px; padding: 10px 18px; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

/* ── 좁은 화면에서 버튼 두 개를 한 줄에 ────────────────────────────────
   393px(iPhone 15) 기준 쓸 수 있는 폭은 353px 인데, 버튼이 글자를 한 줄로
   유지하려다 보니 두 개 합이 388~411px 이 되어 아랫줄로 밀렸다.
   격자로 폭을 반씩 나눠 주고, 글자는 버튼 안에서 접히게 한다.
   한글은 keep-all 로 어절 단위로만 끊는다. */
@media (max-width: 559px) {
  .btn-row--pair,
  .btn-row--steps {
    display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  }
  /* 진행 절차는 버튼이 셋이다. 첫 버튼(전화)이 가장 중요하니 한 줄을 다 쓰고,
     나머지 둘이 아래 한 줄을 나눠 갖는다. */
  .btn-row--steps > :first-child { grid-column: 1 / -1; }

  .btn-row--pair .btn,
  .btn-row--steps .btn {
    padding-inline: 8px; font-size: 15.5px;
    white-space: normal; word-break: keep-all;
  }
}
.btn-row--center { justify-content: center; }

/* 3단계 바로 아래에 붙어야 "이 단계에서 물어보세요"로 읽힌다. 32px 은 멀었다. */
#process .btn-row--steps { margin-top: 18px; }
/* FAQ 하단 블로그 버튼. 목록이 끝난 뒤 한 줄짜리 링크라 위아래가 넓으면 붕 뜬다.
   아래쪽은 섹션 여백(42/64px)이 이미 충분하므로 음수 여백으로 당긴다. */
.btn-row--tight { margin-top: 10px; margin-bottom: -14px; }

/* 진행 절차의 CTA 는 위 1~3단계 열과 같은 격자에 세운다.
   버튼 1은 1단계,
2는 2단계,
3은 3단계 아래에 오게 — .steps 와 같은 값을 쓴다.
   900px 미만에서는 단계가 한 줄씩 쌓이므로 기본 flex 줄바꿈을 그대로 둔다. */
@media (min-width: 900px) {
  .btn-row--steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
  .btn-row--steps > * { justify-self: start; }
}

/* ── Badge / stamp ────────────────────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px; border-radius: var(--r-full);
  font-size: 14px; font-weight: 600; line-height: 1.4;
}
.badge--free { background: var(--stamp-600); color: #fff; }

/* ── Header ───────────────────────────────────────────────────────────── */
.header {
  position: sticky; top: 0; z-index: 60;
  background: rgba(245, 243, 238, .92);
  backdrop-filter: saturate(1.4) blur(8px);
  border-bottom: 1px solid var(--line);
  transition: box-shadow var(--dur) var(--ease);
}
.header.is-scrolled { box-shadow: var(--shadow-sm); }

.header__inner {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: var(--header-h);
}

.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--green-900); }
.brand img { width: 30px; height: auto; border-radius: 4px; }
.brand__mark { font-size: 20px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.2; }
/* 줄높이를 여기서 눌러 준다. 본문값(1.75)을 물려받으면 11px 글자에 19.25px
   줄상자가 생겨 **글자 위로 4px 의 빈 공간**이 들어간다. 사무소 이름과 영문명은
   한 덩어리(로고)로 읽혀야 하는데 그만큼 떠 보였다. 실측 잉크 간격 7.3px → 3.4px. */
.brand__sub { display: block; font-size: 11px; line-height: 1.1; color: var(--ink-400); font-weight: 500; letter-spacing: 0.06em; }

.nav { display: none; }
@media (min-width: 1100px) {
  .nav { display: flex; align-items: center; gap: 2px; }
  .nav a, .nav__btn {
    display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px;
    border-radius: var(--r-sm); color: var(--ink-900);
    font-size: 15px; font-weight: 500; text-decoration: none;
    transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
  }
  .nav a:hover, .nav__btn:hover { background: var(--green-050); color: var(--green-800); }
}

.header__right { display: flex; align-items: center; gap: 8px; }

/* 언어 선택 (헤더) */
.langpick { display: inline-flex; border: 1px solid var(--line); border-radius: var(--r-full); overflow: hidden; background: var(--white); }
.langpick button {
  min-height: 36px; padding: 0 11px; border: 0; background: transparent;
  font-size: 13px; font-weight: 600; color: var(--ink-600); cursor: pointer;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.langpick button + button { border-left: 1px solid var(--line); }
.langpick button:hover { background: var(--green-050); }
.langpick button[aria-pressed="true"] { background: var(--green-800); color: var(--on-dark); }

.header__cta { display: none; }
@media (min-width: 1100px) { .header__cta { display: inline-flex; min-height: 44px; padding: 0 18px; font-size: 15px; } }

.hamburger {
  display: inline-grid; place-items: center; width: 44px; height: 44px;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-sm); cursor: pointer;
}
@media (min-width: 1100px) { .hamburger { display: none; } }

/* 모바일 시트 */
.mobilenav {
  position: fixed; inset: 0; z-index: 200; background: var(--cream-050);
  display: flex; flex-direction: column; padding: var(--gutter); overflow-y: auto;
}
.mobilenav[hidden] { display: none; }
/* 전화 블록이 여러 줄이라 가운데로 맞추면 닫기 버튼이 아래로 내려간다.
   윗선 기준으로 맞춰 X 를 오른쪽 위에 고정한다. */
.mobilenav__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; min-height: var(--header-h); padding-top: 4px; }
.mobilenav__close {
  flex: 0 0 auto;                    /* flex 안에서 눌리면 44 → 30px 이 된다 */
  width: 44px; height: 44px; display: grid; place-items: center;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-sm); cursor: pointer;
}
.mobilenav__list { margin-top: 18px; display: flex; flex-direction: column; }
.mobilenav__list a, .mobilenav__list .mobilenav__btn {
  display: flex; align-items: center; min-height: 56px;
  border-bottom: 1px solid var(--line); color: var(--ink-900);
  font-size: 18px; font-weight: 600; text-decoration: none;
}
/* 배지(14px)와 전화번호(30px)가 한 줄에 나란히 선다. 기본은 글줄 기준(baseline)
   정렬이라 크기가 두 배 넘게 차이 나면 배지가 8px 내려앉아 보인다.
   가로 배치를 명시하고 **가운데 기준**으로 맞춘다. 영업시간은 아랫줄로 내린다. */
/* 배지(14px)와 전화번호(30px)가 한 줄에 나란히 선다. 기본은 글줄 기준(baseline)
   정렬이라 크기가 두 배 넘게 차이 나면 배지가 8px 내려앉아 보인다.
   가로 배치를 명시하고 **가운데 기준**으로 맞춘다. 영업시간은 아랫줄로 내린다. */
.mobilenav__call {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; min-width: 0;
}
.mobilenav__call > .mobilenav__hours { flex-basis: 100%; margin: 0; font-size: 14px; color: var(--ink-400); }
.mobilenav__call .mobilenav__tel { margin-top: 0; font-size: 27px; }

/* 사무소 이름은 맨 아래로. 메뉴를 다 훑고 나서 누구인지 확인하는 자리다. */
.mobilenav__foot {
  margin-top: auto; padding-top: 28px; padding-bottom: 24px;
  display: flex; align-items: center; gap: 9px; color: var(--ink-600);
}
.mobilenav__foot img { flex: 0 0 auto; border-radius: 4px; }
.mobilenav__tel {
  display: block; margin-top: 8px; font-size: 30px; font-weight: 700;
  color: var(--green-800); text-decoration: none; letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

/* ── Hero (기획안 1번 이미지) ─────────────────────────────────────────── */
.hero { background: var(--cream-050); padding-block: 30px 44px; position: relative; overflow: hidden; }
@media (min-width: 1024px) { .hero { padding-block: 40px 58px; } }

/* ── 히어로와 '주요 업무' 사이를 좁힌다 ───────────────────────────────
   노무사님 요청의 핵심은 "주요 업무가 첫 화면에서 바로 보이도록" 이다.
   사진을 뺀 것만으로 375×812 에서는 보이지만, 375×667(구형 아이폰)에서는
   눈썹 라벨이 42px 아래로 밀려 있었다.

   글은 한 줄도 지우지 않고 여백만 줄여 그 42px 를 만든다. 히어로 아래
   44px 와 섹션 위 42px 가 붙어 86px 로 쌓이던 자리가 가장 컸다.
   두 섹션은 '문장 → 그 문장이 가리키는 목록' 으로 이어지므로,
   여기만 다른 섹션 사이보다 촘촘한 것이 뜻에도 맞는다. */
@media (max-width: 767.98px) {
  /* 모바일 하단 고정바(66px)가 화면 밑을 덮는다. '주요 업무' 눈썹 라벨이
     그 바 위로 올라오려면 375×667 기준 601px 안에 들어와야 한다. */
  /* 아래쪽은 카드까지 품게 됐으므로 예전처럼 바짝 줄이지 않는다 */
  .hero { padding-block: 20px 34px; }
}
/* ※ .callstatus · .reassure · .trustrow 의 여백과 눈금 조정은 이 파일 맨 끝에
   있다. 그 세 규칙의 본체가 여기보다 뒤에 있어서, 여기에 두면 미디어쿼리라도
   같은 특이도라 뒤쪽이 이긴다(미디어쿼리는 우선순위를 올려주지 않는다). */

.hero__title {
  /* 가운데 정렬 히어로는 제품 랜딩페이지의 문법이다. 방문자는 제품을 고르러
     온 것이 아니라 "내 병도 산재가 되나"를 물으러 온다. 왼쪽 세로선을 따라
     읽으면 제목 → 이름 → 전화번호가 순서대로 들어온다. */
  text-align: left; color: var(--green-800);
  font-weight: 800; letter-spacing: -0.035em;
  font-size: 27px; line-height: 1.32; margin-bottom: 28px;
  max-width: 20ch;
}
@media (min-width: 768px) { .hero__title { max-width: 24ch; } }

/* 강조는 색이 아니라 금색 밑줄로 한다. 제목에서 한 단어만 색을 바꾸는 건
   흔한 수법이고(AI티 진단서 01), 금색 선은 이미 눈썹 라벨과 인물 카드
   구분선에 쓰는 우리 언어다. 글자 색을 안 건드리므로 대비도 그대로다. */
.hero__title em {
  font-style: normal;
  /* 강조. 색을 안 쓰는 대신 크기로 준다. line-height 를 1 로 눌러
     이 줄만 높아지는 것을 막는다(안 그러면 첫 줄이 아래로 밀린다). */
  font-size: 1.18em; line-height: 1;
  text-decoration: underline;
  text-decoration-color: var(--gold-500);
  text-decoration-thickness: 3px;
  text-underline-offset: 8px;
  text-decoration-skip-ink: none;
}
@media (min-width: 768px) {
  .hero__title em { text-decoration-thickness: 4px; text-underline-offset: 10px; }
}
@media (min-width: 768px)  { .hero__title { font-size: 40px; } }
@media (min-width: 1024px) { .hero__title { font-size: 48px; margin-bottom: 36px; } }
/* ── 두 칸일 때 제목 눈금 ──────────────────────────────────────────────
   ── 두 칸일 때 제목 눈금: 카드 높이에 맞춰 키운다 ──────────────────────
   초록 카드 높이는 159px 인데 48px 제목 두 줄은 126px 이라 눈에 띄게 작았다.
   글자를 키워 두 덩어리의 높이를 맞춘다(사용자 요청).

   제한은 폭이다. 「치유는 대표 노무사가」 한 줄은 **글자 크기 × 8.67** 만큼을
   요구한다(실측: 48px → 416px). 제목 칸은 오른쪽 칸 450px 를 뺀 나머지라
   화면이 넓어질수록 늘어난다. 그래서 계단이 아니라 **유동값**으로 준다.

   실측한 제목 칸 폭(창 폭 기준, 오른쪽 칸 468px 일 때):
     1357→385  1450→431  1512→462  1600→506  1636 이상→524(고정)
   → 창 폭 1px 마다 0.5px 씩 늘어난다. 여유 10px 를 빼고 8.67 로 나누면

     clamp(40px, 5.767vw − 35px, 56px)
       1357px → 43.3px    1512px → 52.2px    1583px 이상 → 56px

   행간 1.42 를 함께 줘서 56px × 1.42 × 2줄 = **159px** — 카드 높이와 정확히 같다.
   1512px 에서는 154px 로 5px 모자라지만 눈에 띄지 않는다.

   ⚠️ **vw 는 세로 스크롤바를 포함한 창 폭**이고, 배치에 쓰이는 폭은 그보다 17px
   좁다. 두 값을 섞어 계산하면 임계점에서 제목이 네 줄로 접힌다. 위 실측값은
   전부 **창 폭** 기준이다.
   ⚠️ 위 1024px 규칙이 48px 를 넣으므로 반드시 그 뒤에 와야 한다.
   ⚠️ 오른쪽 칸 폭·gap·행간을 건드리면 이 계산이 전부 깨진다. 반드시 다시 잴 것. */
/* ⚠️ **2단이 시작되는 폭(1000px)과 같은 값**이어야 한다. 시작점보다 높게 걸면
   그 사이 구간에 위 1024px 규칙의 48px 가 그대로 남아, 좁아진 제목 칸보다 넓은
   폭을 요구해 제목이 네 줄로 접힌다. 실제로 두 번 그렇게 만들었다. */
@media (min-width: 1000px) {
  /* 카드 높이(165px)에 맞추려면 58px 이 필요하다 — 58 × 1.42 × 2줄 = 165.
     칸 폭이 허락하는 최대치를 실측해 기울기를 다시 잡았다(창 폭 기준):
       1400→최대 50.3  1440→52.6  1512→56.8  1600 이상→59.1
     1600px 이상에서 카드와 **정확히** 같아지고, 그 아래로는 폭이 허락하는 만큼 커진다. */
  .hero__title { font-size: clamp(34px, calc(5.767vw - 31px), 59px); line-height: 1.42; }
}

/* 리드를 뺐으므로(사용자 요청) 제목 아래 여백을 줄여 '주요 업무' 를 끌어올린다.
   ⚠️ 다만 0 으로 만들면 안 된다. 한 칸으로 쌓이는 화면에서 제목이 바로 아래
   전화 카드를 파고든다 — 제목의 금색 밑줄이 글자 아래로 11px 더 내려오기
   때문이다(밑줄 두께 3px + offset 8px). 실제로 0 으로 만들었다가 잡았다.
   두 칸으로 갈라지는 1200px 이상에서는 위아래로 붙지 않으므로 0 이어도 된다.
   ⚠️ 위 1024px 규칙이 margin-bottom:36px 를 다시 넣으므로 반드시 그 뒤에 와야 한다. */
/* ── 첫 화면 두 칸: 왼쪽 제목 / 오른쪽 전화 묶음 ──────────────────────
   세로로 쌓으면 첫 화면만 650px 을 먹어 '주요 업무' 8칸이 밖으로 밀린다.
   나란히 놓으면 둘 중 큰 쪽 높이만 차지한다.

   ⚠️ **오른쪽 칸이 퀵메뉴 밑으로 들어가면 안 된다.** 퀵메뉴는 position:fixed 로
   화면 **오른쪽 256px**(폭 236 + 여백 20, 실측)를 늘 차지한다. 컨테이너는
   1120px 로 묶여 있어 화면이 좁을수록 더 많이 덮인다. 미리 비켜 준다:

     비켜 줄 폭 = max(기본여백, 280px − 컨테이너 바깥 여백)
     컨테이너 바깥 여백 = max(0, (100vw − 1120) / 2)

   1680px 부근부터는 컨테이너 자체가 퀵메뉴를 피하므로 기본 여백만 남는다.

   오른쪽 칸 폭은 두 단계:
     1000~1339px  300px — 배지를 카드 **안 아래**로 쌓는다(번호 옆에 자리가 없다)
     1340px~      468px — 배지가 카드 **밖 오른쪽**으로 나온다
                          (카드 258 + gap 12 + 배지 칸 198)
   ──────────────────────────────────────────────────────────────────── */
.hero__grid { display: grid; gap: 0; }

@media (min-width: 1000px) {
  .hero__grid {
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 24px; align-items: start;
    /* 퀵메뉴(화면 오른쪽 256px) 회피. 1000~1339px 에서는 오른쪽 칸이 300px 뿐이고
       그 안에 전화번호가 바로 들어 있어서, 회피를 빼면 **번호가 직접 가린다**
       (실측: 1024px 174px, 1280px 102px 가림). 그래서 이 구간은 유지한다.
       1340px 이상은 아래 블록에서 걷어낸다 — 거기는 배지 칸이 완충해 준다. */
    padding-right: max(var(--gutter), calc(248px - max(0px, (100vw - var(--container)) / 2)));
  }
  /* ※ 이 구간에서 배지를 카드 안 아래로 쌓는 규칙은 **파일 맨 끝**에 있다.
     좁은 화면용 `.hero__actRow` 블록이 여기보다 뒤에 있어서, 여기 두면 덮인다. */
}

@media (min-width: 1340px) {
  /* 여기서만 퀵메뉴 회피를 걷어낸다(사용자 요청 — 제목을 카드 높이에 맞추기 위해).
     제목 칸이 564px 로 **고정**되어, 창 폭과 무관하게 59px 두 줄(166px)이 들어가
     오른쪽 녹색 카드(168px)와 높이가 맞는다.
     대가: CSS 폭 1568px 미만에서 신뢰 배지 오른쪽이 퀵메뉴에 조금 가린다
     (1366px 78px → 1440px 41px → 1512px 5px → 1600px 0px).
     배지 칸 198px 이 완충재라서 **전화번호 카드는 어느 폭에서도 가리지 않는다**
     (가장 좁은 1366px 에서도 133px 여유). 실측 확인. */
  /* 468 → 487px. 초록 카드 왼쪽 끝을 **아래 업무 카드 3번(폐질환) 왼쪽 끝**에
     맞춘다(사용자 요청). 그 전에는 어느 폭에서나 정확히 19px 오른쪽에 있었다 —
     `.hero__grid` 가 `.container` 안에 있는데 오른쪽에만 여백을 한 번 더 줘서
     오른쪽 칸이 업무 카드 격자보다 안쪽으로 들어와 있었기 때문이다. */
  .hero__grid { grid-template-columns: minmax(0, 1fr) 487px; padding-right: var(--gutter); }
  .hero__title { font-size: 59px; }
  /* ⚠️ 59px 은 **한국어 두 줄**에 맞춘 값이다. 다른 언어에 그대로 쓰면 무너진다 —
     영어는 다섯 줄 415px(카드 234px), 중국어는 네 줄 332px(카드 171px)이 됐다.
     언어마다 카드 높이에 가장 가까운 값을 실측해 고정한다(제목 칸 513px 기준).
       영어  42px → 네 줄 236px  (카드 234px, 2px 차)
       중국어 46px → 두 줄 130px  (카드 171px. 48px 이면 세 줄 204px 로 카드를
                                 넘어서므로, 넘치는 쪽보다 모자란 쪽을 택했다) */
  html[lang="en"] .hero__title { font-size: 42px; }
  html[lang="zh"] .hero__title { font-size: 46px; }
  /* 영어만 **퀵메뉴 회피를 되살린다.**
     회피를 걷어낸 건 한국어 제목 59px 을 카드 높이에 맞추려고 폭이 필요해서였는데,
     영어는 42px 이라 회피를 넣어도(제목 칸 452~513px) 그대로 네 줄이다 —
     즉 영어는 **잃을 것이 없다**.
     반대로 잃는 것은 컸다: 영어 배지는 두 줄로 접혀서, 잘리면
     「The principal attorney」에서 끊겨 뜻이 사라졌다(1366px 에서 69px 가림).
     ※ 중국어는 제외한다. 46px 에서 「从第一次咨询起亲自负责」가 506px 라
       회피를 넣으면 1366px(칸 452px)에서만 세 줄이 되어 폭마다 높이가 달라진다.
       한국어와 같은 조건으로 두는 편이 낫다. */
  html[lang="en"] .hero__grid {
    padding-right: max(var(--gutter), calc(248px - max(0px, (100vw - var(--container)) / 2)));
  }
}

/* 제목 아래 여백은 한 칸으로 쌓일 때만 필요하다(바로 아래가 '주요 업무' 줄).
   두 칸일 때는 옆으로 나란히 서므로 0. */
.hero .hero__title { margin-bottom: 0; }
/* 한 칸으로 쌓일 때 제목과 초록 카드 사이. 예전에는 제목 여백 26 + 격자 gap 22
   = 48px 이라 모바일에서 허전했다. 격자 gap 을 0 으로 두고 이 값 하나로만 준다. */
@media (max-width: 999.98px) { .hero .hero__title { margin-bottom: 20px; } }

/* 8칸 카드의 제목. 눈썹 모양이지만 h2 다(제목 위계 때문).
   위 여백이 없으면 왼쪽 칸의 신뢰 배지에 바짝 붙는다 — 그리드 gap 은
   그리드 안에서만 도는데 이 줄은 그리드 바깥이기 때문이다. */
/* '주요 업무' 와 24시간 안내를 한 줄에. 안내가 제 줄을 차지하지 않으므로
   아래 8칸 카드부터 그만큼 위로 올라온다(사용자 요청). */
/* 8칸 카드의 제목. 눈썹 모양이지만 h2 다(제목 위계 때문).
   24시간 안내는 배지 열 맨 아래로 갔으므로(사용자 요청) 이 줄은 제목 하나뿐이다. */
.hero__kicker { display: block; margin: 16px 0 12px; }
@media (min-width: 768px) { .hero__kicker { margin: 20px 0 14px; } }

/* ── 히어로 두 칸 ─────────────────────────────────────────────────────
   왼쪽은 하는 말(제목·리드), 오른쪽은 누를 것(전화·버튼·배지).
   세로로 쌓으면 히어로만 650px 을 먹어 '주요 업무' 가 첫 화면 밖으로 밀렸다.
   나란히 놓으면 둘 중 큰 쪽 높이(약 280px)만 차지한다.
   사진을 뺀 뒤 오른쪽이 비어 보이던 것도 이걸로 함께 해결된다.

   ⚠️ **오른쪽 칸은 절대 퀵메뉴 밑으로 들어가면 안 된다.**
   퀵메뉴는 position:fixed 로 화면 오른쪽 271px 를 늘 차지한다. 컨테이너는
   1120px 로 묶여 있어서, 화면이 좁을수록(1280px 등) 퀵메뉴가 컨테이너
   오른쪽을 최대 191px 까지 덮는다. 여기 들어가는 건 전화번호와 CTA —
   이 사이트의 1순위 전환 요소라 한 픽셀도 가려지면 안 된다.
   그래서 오른쪽 여백을 화면 폭에 따라 계산해 미리 비켜 준다:
     여백 = max(0, 290px − 컨테이너 바깥 여백)
   1280px → 210px 비움 / 1512px → 94px / 1700px 이상 → 0(퀵메뉴가 안 닿는다).
   ──────────────────────────────────────────────────────────────────── */
/* 모바일은 한 칸으로 쌓인다. gap 을 주면 안 된다 — 각 요소가 이미 자기
   위쪽 여백을 갖고 있어서, gap 을 더하면 '주요 업무' 가 22px 밀려난다. */



/* ── 히어로 본문 ──────────────────────────────────────────────────────
   인물 사진 패널을 걷어냈다(노무사님 요청). 첫 화면이 짧아야 바로 아래
   '주요 업무' 8칸이 스크롤 없이 눈에 들어온다 — 그게 이 변경의 목적이다.
   제목 아래로 리드 → 전화 → 버튼 → 배지 한 줄기로만 내려간다.
   ──────────────────────────────────────────────────────────────────── */
/* 전화번호는 이 사이트의 1순위 전환 요소다. 사진 패널이 있을 때는 패널 안에서
   자리를 얻었지만, 이제는 스스로 눈에 띄어야 한다 — 초록 판 위에 올린다. */
.hero__call {
  display: inline-flex; flex-direction: column; gap: 2px;
  padding: 12px 18px; border-radius: var(--r-lg);
  background: var(--green-700); color: var(--on-dark);
  box-shadow: var(--shadow-md);
}
.hero__callLabel {
  gap: 6px; font-size: 13px; font-weight: 600; color: var(--gold-400);
}
@media (min-width: 768px) { .hero__callLabel { font-size: 14px; } }
.hero__tel {
  font-size: 27px; font-weight: 800; letter-spacing: -0.02em;
  color: #fff; text-decoration: none; font-variant-numeric: tabular-nums;
}
@media (min-width: 768px) { .hero__tel { font-size: 32px; } }
.hero__tel:hover { text-decoration: underline; }
.hero__tel .telclick { color: var(--gold-400); }

/* ── 약력 — 소개 섹션으로 옮겨 왔다 ──────────────────────────────────
   히어로의 인물 패널(초록 바탕) 안에 있던 목록이다. 흰 바탕으로 내려왔으니
   글자색만 뒤집고, 금색 불릿은 그대로 둔다 — 사무소의 표시다. */
.creds { margin-top: 22px; }
.creds__title {
  font-size: 11px; font-weight: 700; letter-spacing: 0.12em;
  color: var(--gold-600); text-transform: uppercase;
}
.creds__list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 5px; }
.creds__list li {
  position: relative; padding-left: 13px;
  font-size: 13.5px; line-height: 1.55; color: var(--ink-600); word-break: keep-all;
}
.creds__list li::before { content: "·"; position: absolute; left: 2px; color: var(--gold-500); }
.creds__list li:last-child { color: var(--green-800); font-weight: 600; }

/* ── 3가지 약속 ───────────────────────────────────────────────────────
   히어로에 있을 때는 사진 자리를 두고 다투느라 데스크톱/모바일 사본이
   따로 있었다. 소개 섹션으로 내려오면서 그 다툼이 없어져 하나로 합쳤다.
   번호는 장식이 아니라 약속이 셋이라는 사실을 말한다. */
.promise {
  counter-reset: promise; list-style: none;
  margin: 22px 0 0; padding: 0;
  display: grid; gap: 10px;
}
.promise li {
  counter-increment: promise;
  display: flex; align-items: flex-start; gap: 10px;
  padding: 13px 15px;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-md);
  font-size: 13.5px; line-height: 1.55; color: var(--ink-900); word-break: keep-all;
}
.promise li::before {
  content: counter(promise);
  flex: 0 0 auto;
  /* 첫 줄 상자(13.5 × 1.55 = 20.9px) 안에서 17px 원을 가운데 놓는 값 */
  margin-top: 2px;
  width: 17px; height: 17px; border-radius: var(--r-full);
  display: grid; place-items: center;
  background: var(--green-700); color: var(--white);
  font-size: 11px; font-weight: 700; line-height: 1;
}

/* ── 승인 사례 (기획안 2번 이미지) ────────────────────────────────────── */
.approve { background: var(--cream-100); }
.approve__slogan {
  text-align: left; color: var(--green-800);
  font-weight: 800; letter-spacing: -0.03em; max-width: 22ch;
  font-size: 22px; line-height: 1.45; margin-bottom: 36px;
}
@media (min-width: 768px)  { .approve__slogan { font-size: 32px; margin-bottom: 48px; } }
@media (min-width: 1024px) { .approve__slogan { font-size: 38px; } }

/* ── 3단계 절차 ───────────────────────────────────────────────────────── */
.steps { display: grid; gap: 0; }
@media (min-width: 900px) { .steps { grid-template-columns: repeat(3, 1fr); gap: 24px; } }

.step { position: relative; padding: 0 0 32px 56px; }
@media (min-width: 900px) { .step { padding: 0; } }
.step::before { content: ""; position: absolute; left: 19px; top: 46px; bottom: 0; width: 2px; background: var(--green-100); }
.step:last-child::before { display: none; }
@media (min-width: 900px) { .step::before { display: none; } }

.step__num {
  position: absolute; left: 0; top: 0; width: 40px; height: 40px;
  display: grid; place-items: center; border-radius: var(--r-full);
  background: var(--green-800); color: var(--gold-400); font-weight: 700; font-variant-numeric: tabular-nums;
}
@media (min-width: 900px) { .step__num { position: static; margin-bottom: 16px; } }
.step__title { font-size: 20px; color: var(--green-800); }
.step__body { margin-top: 10px; font-size: 15px; color: var(--ink-600); line-height: 1.75; }

/* ── 30초 진단 훅 ─────────────────────────────────────────────────────── */
.hook {
  background: var(--green-800); color: var(--on-dark);
  /* 제목 위 여백은 넉넉히, 줄 사이는 좁게(사용자 요청).
     결과적으로 블록 높이는 조금 줄어든다 — 위를 8px 늘리고 줄 사이에서
     10px 남짓을 회수한다. */
  border-radius: var(--r-lg); padding: 24px 20px 14px; text-align: center;
  position: relative; overflow: hidden;
}
@media (min-width: 768px) { .hook { padding: 30px 28px 18px; } }
.hook__t {
  font-size: 23px; color: #fff;
  font-weight: 800; line-height: 1.15; letter-spacing: -0.02em;
  word-break: keep-all; text-wrap: balance;
}
@media (min-width: 768px) { .hook__t { font-size: 30px; } }
.hook__s { margin-top: 3px; font-size: 17px; line-height: 1.35; color: var(--gold-400); font-weight: 600; }
.hook .btn { margin-top: 10px; }

/* ── Cards / grid ─────────────────────────────────────────────────────── */
.grid { display: grid; gap: 16px; }
@media (min-width: 768px) { .grid { gap: 20px; } }
.grid--2 { grid-template-columns: 1fr; }
@media (min-width: 900px) { .grid--2 { grid-template-columns: 1fr 1fr; } }

/* ── 소개 섹션 인물 사진 ──────────────────────────────────────────────
   폭을 제한하지 않으면 칸을 그대로 채운다. 900px 미만은 1열이라 390px 화면에서
   350px, 768px 화면에서는 704px 짜리 덩어리가 되어 섹션을 뒤덮었다.
   데스크톱에서도 열을 꽉 채워 컨테이너 오른쪽 끝(32px)에 붙어 보였다.
   폭을 묶고 왼쪽 정렬로 두면 글과 나란히 서고, 오른쪽에 숨 쉴 자리가 생긴다. */
/* ── 소개 섹션 인물 ────────────────────────────────────────────────────
   1열(900px 미만): 사진을 작게 두고 이름·직함과 한 줄로 묶는다.
   크게 두면 섹션을 덮고(390px 에서 350×438), 작게만 두면 오른쪽이 비어
   외따로 놓인 것처럼 보인다. 짝을 지어 줄을 채우면 둘 다 피한다. */
/* ── 소개 섹션 격자 ──────────────────────────────────────────────────
   좁은 화면 — 사진이 '약력' 오른쪽 칸에 온다(사용자 요청).
   넓은 화면 — 사진이 오른쪽 칸 전체를 차지한다.
   두 배치를 마크업 하나에서 내려고 자리를 grid-template-areas 로 잡는다. */
.about__grid {
  display: grid; gap: 0 16px;
  grid-template-columns: minmax(0, 1fr) 132px;
  grid-template-areas:
    "head  head"
    "b1    b1"
    "b2    b2"
    "creds photo"
    "promise promise"
    "cta   cta";
}
.about__head { grid-area: head; }
.about__b1 { grid-area: b1; }
.about__b2 { grid-area: b2; }
.about__grid > .creds { grid-area: creds; }
.about__sign { grid-area: photo; align-self: start; }
.about__grid > .promise { grid-area: promise; }
.about__ctaRow { grid-area: cta; margin-top: 24px; }
/* 좁은 화면에서는 두 버튼을 가운데로 모은다(사용자 요청).
   번호 쪽에는 「(클릭)」 힌트를 붙였다 — 손가락으로 누르는 화면이라서다. */
@media (max-width: 899.98px) {
  .about__ctaRow { justify-content: center; row-gap: 0; }
  /* ⚠️ 번호 상자는 터치 기준 56px 인데 글자는 27px 이다. 배경이 없어 위아래
     14px 씩이 **보이지 않는 여백**이 된다. 그래서 상자는 12px 떨어졌는데 눈에는
     26px 로 보였다. 터치 영역은 그대로 두고 음수 여백으로 그만큼 끌어올린다. */
  .about__ctaRow .btn--ghost { margin-top: -6px; }
  /* 다음 섹션까지의 여백도 줄인다(사용자 요청) */
  #about { padding-bottom: 26px; }
}
@media (min-width: 900px) { .about__ctaRow .telclick { display: none; } }
/* 이 번호만 버튼 글꼴(16px)을 물려받아 다른 섹션 번호(21px)보다 작았다.
   같은 눈금으로 맞추고, 「(클릭)」이 번호에서 떨어져 보이지 않게 붙인다.
   ⚠️ 버튼의 `gap: 8px` 이 아이콘·번호·힌트 사이에 모두 들어간다. 힌트 쪽만
   음수 여백으로 되돌려야 번호에 붙는다(아이콘 간격은 그대로 둔다). */
.about__ctaRow .telnum__t { font-size: 21px; }
.about__ctaRow .telclick { margin-left: -4px; font-size: 13px; }

@media (min-width: 900px) {
  .about__grid {
    grid-template-columns: 1fr 1fr; gap: 0 32px; align-items: start;
    grid-template-areas:
      "head    photo"
      "b1      photo"
      "b2      photo"
      "creds   photo"
      "promise photo"
      "cta     photo";
  }
  /* 사진이 오른쪽 칸 전체를 세로로 채운다 */
  .about__sign { align-self: center; }
}

.about__sign { display: flex; flex-direction: column; gap: 8px; }
.about__photo {
  width: 100%; display: block;
  border-radius: var(--r-md); box-shadow: var(--shadow-md);
}
.about__who { margin: 0; line-height: 1.35; text-align: center; }
/* 예전에는 좁은 화면에서 사진 옆에 작은 CTA(.about__cta)를 따로 두고 본문 쪽
   버튼을 숨겼다. 이제 사진이 '약력' 옆 좁은 칸에 들어가 그 자리가 없다.
   버튼은 폭 전체를 쓰는 .about__ctaRow 하나로 통일했다(문구 중복도 사라진다). */
.about__who b {
  display: block; font-size: 18px; font-weight: 800;
  color: var(--green-800); letter-spacing: -0.03em;
}
.about__who span { font-size: 14.5px; color: var(--ink-600); }

/* 2열에서는 옆에 본문이 있으므로 사진만 크게 세운다. 이름은 본문이 이미 말한다. */
@media (min-width: 900px) {
  .about__sign { display: block; }
  .about__who { display: none; }
  .about__photo { width: 100%; max-width: 420px; border-radius: var(--r-lg); }
}

/* ── FAQ ──────────────────────────────────────────────────────────────── */
.faq { border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 64px; padding: 16px 4px; background: transparent; border: 0;
  text-align: left; font-size: 17px; font-weight: 600; letter-spacing: -0.01em;
  line-height: 1.5; word-break: keep-all; cursor: pointer;
}
.faq__q:hover { color: var(--green-800); }
.faq__icon { flex: 0 0 24px; width: 24px; height: 24px; display: grid; place-items: center; color: var(--green-500); transition: transform var(--dur) var(--ease); }
.faq__q[aria-expanded="true"] .faq__icon { transform: rotate(45deg); }
.faq__a { padding: 0 4px 24px; }
.faq__a[hidden] { display: none; }
.faq__a p { font-size: 15px; color: var(--ink-600); line-height: 1.85; max-width: 40rem; }
.faq__a .btn { margin-top: 16px; }
.ext-icon { font-size: 13px; }

/* ── 자료실 ───────────────────────────────────────────────────────────── */
.docs { display: grid; gap: 12px; }
@media (min-width: 768px) { .docs { grid-template-columns: repeat(3, 1fr); gap: 20px; } }
.doc {
  display: flex; align-items: center; gap: 14px; min-height: 76px; padding: 16px 18px;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-md);
  text-decoration: none; color: var(--ink-900);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.doc:hover { border-color: var(--green-500); box-shadow: var(--shadow-sm); }
.doc__ico { flex: 0 0 auto; color: var(--gold-600); }
.doc__name { font-size: 16px; font-weight: 600; line-height: 1.4; display: block; }
.doc__hint { font-size: 13px; color: var(--ink-400); margin-top: 2px; display: block; }
.footnote { margin-top: 20px; font-size: 13px; color: var(--ink-400); line-height: 1.75; max-width: 46rem; }
/* 승인 사례의 고지는 법적 안내라 있어야 하지만 주인공이 아니다.
   전화 한 줄과 20px 떨어진 데다 아래로 섹션 여백까지 붙어 혼자 떠 보였다. */
#cases .footnote { margin-top: 10px; line-height: 1.6; }
#cases { padding-bottom: 30px; }
@media (min-width: 768px) { #cases { padding-bottom: 44px; } }

/* ── 상담 신청 ────────────────────────────────────────────────────────── */
.consult { background: var(--green-800); color: var(--on-dark); }
.consult__inner { display: grid; gap: 32px; }
@media (min-width: 900px) { .consult__inner { grid-template-columns: 1fr 1.1fr; gap: 56px; align-items: start; } }
.consult h2 { color: #fff; font-size: 26px; }
@media (min-width: 768px) { .consult h2 { font-size: 36px; } }
.consult__lead { margin-top: 16px; color: #CFE0DA; font-size: 16px; max-width: 27rem; }
.consult__tel {
  margin-top: 28px; display: inline-block; color: #fff; font-size: 30px; font-weight: 700;
  letter-spacing: -0.02em; text-decoration: none; font-variant-numeric: tabular-nums;
}
.consult__hours { margin-top: 6px; font-size: 14px; color: var(--gold-400); }

.form { background: var(--cream-050); color: var(--ink-900); border-radius: var(--r-lg); padding: 24px; }
@media (min-width: 768px) { .form { padding: 32px; } }

.field { margin-bottom: 20px; }
.field label { display: block; margin-bottom: 8px; font-size: 15px; font-weight: 600; }
.req { color: var(--stamp-600); margin-left: 2px; }

.field input,
.field select,
.field textarea,
.calc input,
.calc select {
  width: 100%; min-height: 52px; padding: 12px 14px;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-sm);
  font: inherit; font-size: 16px; color: var(--ink-900);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.field textarea { min-height: 108px; resize: vertical; line-height: 1.7; }
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible,
.calc input:focus-visible,
.calc select:focus-visible {
  outline: none; border-color: var(--green-500); box-shadow: 0 0 0 3px rgba(46, 122, 107, .18);
}
.field .error, .calc .error { display: block; margin-top: 6px; font-size: 14px; color: var(--err); }
.field .error[hidden], .calc .error[hidden] { display: none; }
.field.is-invalid input, .field.is-invalid select { border-color: var(--err); }

.consent { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: var(--ink-600); line-height: 1.6; }

/* ── 동의 안 함 오류 ───────────────────────────────────────────────────
   이 오류만 .field 밖에 있어서 `.field .error` 가 안 걸렸다. 색도 굵기도
   없는 맨 글씨로 떠서 오류로 보이지 않았다. 제출을 막는 유일한 항목이므로
   눈에 확실히 걸리게 한다 — 붉은 띠 + 경고 아이콘 + 체크박스 강조. */
.error--consent {
  display: flex; align-items: center; gap: 9px;
  margin-top: 8px; padding: 11px 13px;
  background: #FBEDEB; border: 1px solid var(--err); border-left-width: 3px;
  border-radius: var(--r-sm);
  color: var(--err); font-size: 14px; font-weight: 700; line-height: 1.5;
}
.error--consent[hidden] { display: none; }
.error--consent::before {
  content: "!"; flex: 0 0 auto;
  width: 19px; height: 19px; border-radius: var(--r-full);
  background: var(--err); color: #fff;
  display: grid; place-items: center;
  font-size: 13px; font-weight: 700; line-height: 1;
}
/* 어디를 눌러야 하는지 함께 가리킨다. 문구만 붉으면 정작 체크박스를 못 찾는다. */
.consent.is-invalid input { outline: 2px solid var(--err); outline-offset: 3px; }
.consent.is-invalid { color: var(--ink-900); }
.consent input { width: 20px; height: 20px; min-height: 0; margin: 1px 0 0; accent-color: var(--green-800); flex: 0 0 auto; }
.consent-detail { margin-top: 10px; font-size: 13px; color: var(--ink-400); }
.consent-detail summary { cursor: pointer; min-height: 32px; display: flex; align-items: center; }
.consent-detail p { margin-top: 8px; line-height: 1.75; }
.form__status { margin-top: 16px; font-size: 15px; font-weight: 600; color: var(--ok); }
.form__status[hidden] { display: none; }
.subnote { font-size: 13px; color: var(--ink-400); text-align: center; margin-top: 10px; line-height: 1.6; }

/* ── Footer ───────────────────────────────────────────────────────────── */
.footer { background: var(--green-900); color: var(--on-dark); padding-block: 40px 34px; }
.footer__grid { display: grid; gap: 32px; }
@media (min-width: 768px) { .footer__grid { grid-template-columns: 1.3fr 1fr 1fr; } }
.footer__brand { display: flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 700; letter-spacing: -0.02em; }
.footer__brand img { width: 28px; border-radius: 4px; }
.footer__desc { margin-top: 12px; font-size: 14px; color: #9DB5AE; line-height: 1.85; }
.footer h3 { font-size: 15px; font-weight: 600; color: #fff; margin-bottom: 10px; }
.footer__list { display: grid; gap: 4px; font-size: 14px; color: #9DB5AE; }
.footer__list a { color: #9DB5AE; text-decoration: none; display: inline-flex; min-height: 34px; align-items: center; }
.footer__list a:hover { color: #fff; text-decoration: underline; }
.footer__bottom {
  margin-top: 40px; padding-top: 24px; border-top: 1px solid rgba(246,242,234,.14);
  font-size: 13px; color: #7E958E; line-height: 1.75;
}
/* 푸터 언어 선택 (majungforeign 방식 참고) */
.footerlang { margin-top: 32px; padding-top: 24px; border-top: 1px solid rgba(246,242,234,.14); }
.footerlang__t { font-size: 14px; color: var(--gold-400); margin-bottom: 12px; }
.footerlang__row { display: flex; flex-wrap: wrap; gap: 10px; }
.footerlang__row button {
  min-height: 44px; padding: 0 18px; border-radius: var(--r-md);
  background: transparent; border: 1px solid rgba(246,242,234,.3); color: var(--on-dark);
  font-size: 15px; font-weight: 600; cursor: pointer;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.footerlang__row button:hover { background: rgba(246,242,234,.1); }
.footerlang__row button[aria-pressed="true"] { background: var(--gold-500); border-color: var(--gold-500); color: #1A1200; }

/* ── 퀵메뉴 (기획안 3번 이미지) ───────────────────────────────────────── */
.quick { position: fixed; z-index: 80; }

@media (min-width: 900px) {
  .quick { right: 20px; top: 50%; transform: translateY(-50%); width: 236px; }

  .quick__panel {
    background: var(--green-700); border-radius: 14px; padding: 8px;
    box-shadow: var(--shadow-lg); border: 3px solid var(--white); position: relative; overflow: hidden;
  }
  .quick__panel[hidden] { display: none; }

  .quick__head {
    background: var(--white); border-radius: 8px; padding: 9px 10px; margin-bottom: 8px;
    display: flex; align-items: center; gap: 8px; justify-content: center; position: relative; z-index: 1;
  }
  .quick__head img { width: 22px; border-radius: 3px; }
  .quick__head span { font-size: 13.5px; font-weight: 700; color: var(--green-800); letter-spacing: -0.03em; }

  .quick__list { display: grid; gap: 8px; position: relative; z-index: 1; }

  /* 「먼저 확인해보기(진단·계산기)」와 「바로 연락하기(문의·카톡·전화)」는
     성격이 다르다. 캡션과 실선으로 나눠 훑을 때 바로 구분되게 한다. */
  .quick__group {
    display: flex; align-items: center; gap: 8px;
    margin: 6px 2px 0; font-size: 11px; font-weight: 700;
    letter-spacing: 0.08em; color: #9FBDB4; text-transform: none;
  }
  .quick__group::after {
    content: ""; flex: 1 1 auto; height: 1px; background: rgba(255,255,255,.16);
  }
  .quick__group:first-child { margin-top: 0; }
  .quick__item {
    display: flex; align-items: center; gap: 10px; min-height: 60px; padding: 9px 12px;
    background: var(--green-600); border: 1px solid rgba(196,161,106,.35); border-radius: 8px;
    text-decoration: none; color: var(--on-dark); text-align: left;
    cursor: pointer; font: inherit; width: 100%;
    transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
  }
  .quick__item:hover { background: #27665A; border-color: var(--gold-400); }
  .quick__ico {
    flex: 0 0 34px; width: 34px; height: 34px; border-radius: var(--r-full);
    background: var(--white); color: var(--green-700); display: grid; place-items: center;
  }
  .quick__tx { display: block; min-width: 0; }
  .quick__t { display: block; font-size: 14px; font-weight: 700; color: var(--gold-400); line-height: 1.35; letter-spacing: -0.02em; }
  .quick__t--short { display: none; }
  .quick__s { display: block; font-size: 11.5px; color: #C6D8D2; line-height: 1.4; margin-top: 1px; }

  /* 화살표(46px 원) 대신 글자를 담는 알약. 무엇이 닫히는지 글로 말한다. */
  .quick__toggle {
    margin-top: 10px; margin-left: auto; min-height: 40px; padding: 0 16px;
    border-radius: var(--r-full);
    border: 0; background: var(--green-800); color: var(--gold-400);
    box-shadow: var(--shadow-lg); cursor: pointer; display: grid; place-items: center;
    font-size: 13px; font-weight: 700; letter-spacing: -0.02em; white-space: nowrap;
    transition: background-color var(--dur) var(--ease);
  }
  .quick__toggle:hover { background: var(--green-700); }
}

/* 모바일: 하단 고정 4분할 바 */
@media (max-width: 899px) {
  .quick {
    left: 0; right: 0; bottom: 0;
    background: var(--green-700);
    border-top: 3px solid var(--white);
    padding-bottom: env(safe-area-inset-bottom);
    box-shadow: 0 -4px 16px rgba(1, 44, 47, .18);
  }
  .quick__toggle, .quick__head { display: none; }
  .quick__panel { padding: 0; }
  .quick__panel[hidden] { display: block; }
  .quick__list { display: grid; grid-template-columns: repeat(5, 1fr); }
  .quick__group { display: none; }
  /* 390px 기준 한 칸이 78px 뿐이다. 긴 이름은 두 줄로 깨지므로 짧은 이름을 쓴다. */
  .quick__item .quick__t { display: none; }
  .quick__item .quick__t--short { display: block; }
  .quick__item {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    min-height: var(--mobilebar-h); padding: 6px 2px;
    background: transparent; border: 0; border-right: 1px solid rgba(196,161,106,.28);
    color: var(--on-dark); text-decoration: none; cursor: pointer; font: inherit; width: 100%;
  }
  .quick__item:last-child { border-right: 0; }
  .quick__item:active { background: var(--green-600); }
  .quick__ico { color: var(--gold-400); display: grid; place-items: center; }
  .quick__t {
    display: block; font-size: 11px; font-weight: 700; color: #fff;
    letter-spacing: -0.04em; line-height: 1.15; text-align: center;
    word-break: keep-all; overflow-wrap: anywhere; hyphens: auto;
  }
  html[lang="en"] .quick__t, html[lang="zh"] .quick__t { letter-spacing: 0; font-size: 10.5px; }
  .quick__s { display: none; }

  body { padding-bottom: calc(var(--mobilebar-h) + env(safe-area-inset-bottom)); }
}

/* ── Modal (자가진단 / 계산기 / 언어선택) ─────────────────────────────── */
.modal {
  position: fixed; inset: 0; z-index: 250;
  background: rgba(1, 28, 31, .55);
  display: grid; place-items: center; padding: 16px;
  overflow-y: auto;
}
.modal[hidden] { display: none; }

.modal__box {
  background: var(--cream-050); border-radius: var(--r-lg);
  width: 100%; max-width: 560px; max-height: calc(100vh - 32px);
  display: flex; flex-direction: column; overflow: hidden; box-shadow: var(--shadow-lg);
}
.modal__box--wide { max-width: 680px; }
/* 모달 안에서 끝까지 스크롤했을 때 뒤 페이지가 따라 밀리는 것을 막는다 */
.modal__box { overscroll-behavior: contain; }

.modal__head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 18px 20px; background: var(--green-800); color: #fff; flex: 0 0 auto;
}
.modal__title { font-size: 18px; color: #fff; }
.modal__sub { font-size: 13px; color: var(--gold-400); margin-top: 2px; }
.modal__close {
  width: 40px; height: 40px; flex: 0 0 40px; display: grid; place-items: center;
  background: rgba(246,242,234,.12); border: 0; border-radius: var(--r-sm); color: #fff; cursor: pointer;
}
.modal__close:hover { background: rgba(246,242,234,.24); }
.modal__body { padding: 20px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
@media (min-width: 768px) { .modal__body { padding: 28px; } }

/* 진행 막대 */
.progress { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.progress__bar { flex: 1; height: 6px; background: var(--green-100); border-radius: var(--r-full); overflow: hidden; }
.progress__fill { height: 100%; background: var(--green-600); border-radius: var(--r-full); transition: width 240ms var(--ease); }
.progress__n { font-size: 13px; font-weight: 700; color: var(--ink-600); font-variant-numeric: tabular-nums; flex: 0 0 auto; }

/* 진단 질문 */
.qtitle { font-size: 20px; margin-bottom: 16px; color: var(--green-800); }
.qlist { display: grid; gap: 10px; }
.qopt {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px;
  padding: 12px 16px; text-align: left;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-md);
  font-size: 15.5px; line-height: 1.5; cursor: pointer;
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.qopt:hover { border-color: var(--green-500); background: var(--green-050); }
.qopt[aria-pressed="true"] { border-color: var(--green-700); background: var(--green-050); box-shadow: inset 0 0 0 1px var(--green-700); }
.qopt__dot { flex: 0 0 20px; width: 20px; height: 20px; border: 2px solid var(--line); border-radius: var(--r-full); display: grid; place-items: center; }
.qopt[aria-pressed="true"] .qopt__dot { border-color: var(--green-700); background: var(--green-700); }
.qopt[aria-pressed="true"] .qopt__dot::after { content: ""; width: 7px; height: 7px; border-radius: var(--r-full); background: #fff; }

/* ── 계산기 ───────────────────────────────────────────────────────────── */
.calc .field { margin-bottom: 18px; }
.calc__hint { margin-top: 6px; font-size: 12.5px; color: var(--ink-400); line-height: 1.6; }
.seg { display: flex; gap: 8px; }
.seg button {
  flex: 1; min-height: 52px; padding: 10px 8px; border-radius: var(--r-sm); line-height: 1.35;
  background: var(--white); border: 1px solid var(--line);
  font-size: 15px; font-weight: 600; color: var(--ink-600); cursor: pointer;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.seg button:hover { border-color: var(--green-500); }
.seg button[aria-pressed="true"] { background: var(--green-800); border-color: var(--green-800); color: var(--on-dark); }
.seg button:disabled { opacity: .4; cursor: not-allowed; }

.calc__notes { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12.5px; color: var(--ink-400); }

.calcout { margin-top: 4px; }
.calcout[hidden] { display: none; }
.calcout__row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding: 14px 0; border-bottom: 1px solid var(--line);
}
.calcout__k { font-size: 15px; color: var(--ink-600); }
.calcout__v { font-size: 19px; font-weight: 700; color: var(--green-800); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; text-align: right; }
.calcout__v small { display: block; font-size: 13px; font-weight: 500; color: var(--ink-400); letter-spacing: 0; }
.calcout__row--total { border-bottom: 0; padding-top: 18px; }
.calcout__row--total .calcout__k { font-weight: 700; color: var(--ink-900); font-size: 16px; }
.calcout__row--total .calcout__v { font-size: 26px; color: var(--stamp-600); }
.calcout__warn {
  margin-top: 16px; padding: 14px 16px; border-radius: var(--r-md);
  background: #FCF4E8; border: 1px solid #EBD9B8;
  font-size: 13px; line-height: 1.75; color: #6B4E1E;
}
.calcout__note { margin-top: 10px; font-size: 12.5px; color: var(--ink-400); line-height: 1.7; }

/* ── 언어 선택 오버레이 ───────────────────────────────────────────────── */
.langmodal .modal__box { max-width: 440px; }
.langlist { display: grid; gap: 10px; }
.langlist button {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; min-height: 60px; padding: 12px 18px;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-md);
  font-size: 17px; font-weight: 600; cursor: pointer; text-align: left;
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.langlist button:hover { border-color: var(--green-700); background: var(--green-050); }
.langlist small { font-size: 13px; font-weight: 500; color: var(--ink-400); }

/* ── Reveal ───────────────────────────────────────────────────────────── */
.reveal { opacity: 0; transform: translateY(8px); transition: opacity 400ms var(--ease), transform 400ms var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }

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

/* ══ 30초 자가진단 ═══════════════════════════════════════════════════════
   흐름: 진입 분기 → 질문 3개 → 분석중 → 진단 리포트
   ════════════════════════════════════════════════════════════════════ */
.chk__lead { font-size: 15.5px; color: var(--ink-600); line-height: 1.75; margin-bottom: 20px; }
.chk__note { margin-top: 16px; font-size: 12.5px; color: var(--ink-400); text-align: center; line-height: 1.6; }

.chk__empathy {
  display: flex; gap: 8px; margin-bottom: 16px; padding: 12px 14px;
  background: var(--green-050); border-left: 3px solid var(--green-500); border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-size: 14px; line-height: 1.65; color: var(--green-800); word-break: keep-all;
}

.chk__controls { display: flex; justify-content: space-between; gap: 8px; margin-top: 20px; }

/* 분석중 */
.chk__analyzing { padding: 32px 8px; text-align: center; }
.chk__spinner {
  width: 40px; height: 40px; margin: 0 auto 18px;
  border: 3px solid var(--green-100); border-top-color: var(--green-700);
  border-radius: var(--r-full); animation: chk-spin 800ms linear infinite;
}
@keyframes chk-spin { to { transform: rotate(360deg); } }
.chk__analyzingT { font-size: 17px; font-weight: 700; color: var(--green-800); margin-bottom: 14px; }
.chk__analyzingBar { width: 20%; animation: chk-fill 1400ms var(--ease) forwards; }
@keyframes chk-fill { to { width: 100%; } }
.chk__analyzingS { margin-top: 12px; font-size: 13px; color: var(--ink-400); }

@media (prefers-reduced-motion: reduce) {
  .chk__spinner { animation: none; border-top-color: var(--green-100); }
  .chk__analyzingBar { animation: none; width: 100%; }
}

/* ── 진단 리포트 ─────────────────────────────────────────────────────── */
.report {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg);
  overflow: hidden; box-shadow: var(--shadow-sm);
}
.report__bar { height: 5px; background: linear-gradient(90deg, var(--green-700) 0%, var(--green-500) 55%, var(--gold-500) 100%); }

.report__head {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 10px;
  padding: 18px 20px; border-bottom: 1px solid var(--line);
}
.report__brand { font-size: 16px; font-weight: 700; color: var(--green-800); letter-spacing: -0.03em; }
.report__en { font-size: 11px; font-weight: 600; letter-spacing: 0.16em; color: var(--gold-600); margin-top: 2px; }
.report__meta { font-size: 11.5px; color: var(--ink-400); text-align: right; line-height: 1.7; }
.report__meta b { color: var(--ink-600); font-weight: 600; font-variant-numeric: tabular-nums; }

.report__summary { padding: 22px 20px; background: var(--green-050); border-bottom: 1px solid var(--line); }
.report__seclabel { font-size: 11.5px; font-weight: 700; letter-spacing: 0.12em; color: var(--gold-600); margin-bottom: 8px; }
.report__title { font-size: 22px; color: var(--green-800); }
.report__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }

/* 진단 결과의 두 버튼. 나란히 두면 모달 폭에서 각각 절반씩만 받아 글자가
   두 줄로 깨지고 눌러야 할 것이 작아 보인다. 세로로 쌓아 한 줄씩 온전히 보이게 한다.
   위가 상담 신청(주), 아래가 다시 진단(부) — 순서로 무게를 말한다. */
.report__cta { flex-direction: column; align-items: stretch; gap: 8px; }
.report__cta .btn { width: 100%; }
.report__tag {
  font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: var(--r-full);
  background: var(--white); border: 1px solid var(--green-100); color: var(--green-700);
}
.report__desc { margin-top: 12px; font-size: 14.5px; line-height: 1.75; color: var(--ink-600); }

.report__section { padding: 20px; border-bottom: 1px solid var(--line); }
.report__section:last-child { border-bottom: 0; }
.report__secnum {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 700; color: var(--ink-900); margin-bottom: 12px;
}
.report__secnum span {
  display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: var(--r-sm);
  background: var(--green-800); color: var(--gold-400); font-size: 11px; font-variant-numeric: tabular-nums;
}
.report__opinion { font-size: 14.5px; line-height: 1.85; color: var(--ink-600); }

.report__urgent {
  display: flex; gap: 10px; margin-top: 14px; padding: 14px 16px; border-radius: var(--r-md);
  background: #FCF0EE; border: 1px solid #EBC7C1; color: #7A2A20;
  font-size: 13.5px; line-height: 1.75; word-break: keep-all;
}
.report__urgent span:first-child { flex: 0 0 auto; font-weight: 700; }

.report__svc { padding: 16px; border-radius: var(--r-md); background: var(--green-050); border: 1px solid var(--green-100); }
.report__svcT { font-size: 16px; font-weight: 700; color: var(--green-800); letter-spacing: -0.02em; }
.report__svcD { margin-top: 8px; font-size: 14px; line-height: 1.75; color: var(--ink-600); }

.report__crossLabel { margin-top: 18px; margin-bottom: 8px; font-size: 13px; font-weight: 700; color: var(--gold-600); }
.report__cross { display: grid; gap: 8px; }
.report__cross li {
  position: relative; padding-left: 18px; font-size: 13.5px; line-height: 1.7; color: var(--ink-600); word-break: keep-all;
}
.report__cross li::before { content: "+"; position: absolute; left: 2px; color: var(--gold-500); font-weight: 700; }

.report__section--next { background: var(--cream-050); }
.report__next { font-size: 14.5px; line-height: 1.8; color: var(--ink-900); }
.report__foot { margin-top: 16px; font-size: 12px; color: var(--ink-400); line-height: 1.7; }

/* ── 계산기 결과 보강 ───────────────────────────────────────────────── */
.calcout__year {
  font-size: 12.5px; color: var(--ink-400); padding-bottom: 12px;
  border-bottom: 1px solid var(--line); margin-bottom: 4px; line-height: 1.7;
}
.calcout__year b { color: var(--ink-600); font-variant-numeric: tabular-nums; }
.calcout__adj {
  display: flex; gap: 8px; margin: 12px 0; padding: 12px 14px; border-radius: var(--r-md);
  background: var(--green-050); border: 1px solid var(--green-100);
  font-size: 13px; line-height: 1.7; color: var(--green-800); word-break: keep-all;
}
.calcout__adj span:first-child { flex: 0 0 auto; }
.calcout__k small { display: block; font-weight: 400; font-size: 12.5px; color: var(--ink-400); margin-top: 2px; }

/* ══ 차별점 (약정비 / 직접 상담) ═════════════════════════════════════ */
/* ── 치유가 다른 점 — 진초록 판 ───────────────────────────────────────
   주요 업무가 베이지로 올라오면서 페이지 전체가 밝은 색으로만 이어졌다.
   여기서 한 번 어둡게 끊어 준다. 내용상으로도 '우리가 어떤 곳인지' 를 말하는
   자리라 톤이 바뀌는 편이 읽기에 낫다.
   흰 카드는 그대로 두고(진초록 위에서 더 또렷하다) 바깥 글자만 뒤집는다. */
/* ⚠️ 훅(.hook)이 바로 위에서 --green-800 을 쓴다. 섹션까지 같은 색이면
   '진초록 훅 → 베이지 띠 50px → 진초록 섹션' 이 되어 섹션이 잘못 시작된 것처럼
   보인다. 여기만 한 단계 더 어둡게 해서 둘을 갈라 놓는다(사용자 선택). */
#why { background: var(--green-900); }
#why .eyebrow { color: var(--gold-400); }
#why .h2 { color: var(--on-dark); }
#why .section__lead { color: rgba(246, 242, 234, .84); }
#why .footnote { color: rgba(246, 242, 234, .62); }
/* 카드 위 금색 선은 진초록 위에서 한 톤 밝은 쪽이 맞다.
   옆·아래 테두리는 진초록 위에서 보이지 않으므로 지운다. */
#why .why { border-color: transparent; border-top: 3px solid var(--gold-400); }

.whys { display: grid; gap: 16px; }
@media (min-width: 860px) { .whys { grid-template-columns: repeat(3, 1fr); gap: 20px; } }

.why {
  display: flex; flex-direction: column;
  padding: 24px 22px;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg);
  border-top: 3px solid var(--gold-500);
  transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.why:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.why__t { font-size: 19px; color: var(--green-800); }
.why__b { margin-top: 12px; font-size: 14.5px; line-height: 1.8; color: var(--ink-600); }
.why__b b { color: var(--stamp-600); font-weight: 700; }
.why__cta { margin-top: auto; align-self: flex-start; }
/* 본문과 버튼 사이 최소 간격. 위 margin-top:auto 를 덮지 않도록 본문 쪽에 준다. */
.why__b { margin-bottom: 20px; }

/* ══ 언어별 타이포그래피 ══════════════════════════════════════════════
   한글 기준으로 잡은 규칙(keep-all, 음수 자간)을 한자·라틴에 그대로 쓰면
   오히려 깨진다. 로케일별로 예외를 둔다.
   ════════════════════════════════════════════════════════════════ */

/* ── 중국어 ─────────────────────────────────────────────────────────
   폰트는 app.js가 lang=zh 로 바뀔 때 Noto Sans SC를 주입한다.
   (항상 불러오면 한국어 사용자에게 불필요한 CJK 폰트 트래픽이 발생한다) */
html[lang="zh"] {
  --font-sans: "Noto Sans SC", "PingFang SC", "Hiragino Sans GB",
               "Microsoft YaHei", "微软雅黑", -apple-system, system-ui, sans-serif;
}
html[lang="zh"] body { line-height: 1.8; }

/* 한자는 어느 글자에서든 줄바꿈이 자연스럽다. keep-all 을 풀어야 한다.
   ⚠️ 예전에는 여기에 요소 목록을 하나씩 적어 뒀는데, **새 컴포넌트를 만들 때마다
   빠졌다**. 실제로 `.fcard__ex`(업무분야 설명)와 승인 사례 카드가 빠져서
   중국어 360px 에서 가로 스크롤이 생겼다 — 「上班路上、下班路上发生的事故也属于工伤」이
   한 덩어리로 안 접혀 161px 카드 밖으로 219px 만큼 삐져나왔다.
   목록으로 관리할 수 없는 규칙이므로 **중국어 전체**에 건다.
   keep-all 은 애초에 한국어 전용(어절 단위 줄바꿈)이라 중국어에는 쓸 일이 없다. */
html[lang="zh"] * { word-break: normal; }

/* 라틴 문자가 섞인 긴 토막(주소·URL 등)은 글자 단위로도 끊게 둔다.
   ⚠️ overflow-wrap 은 최소 폭(min-content) 계산까지 바꾸므로 격자 칸이
   내용 때문에 벌어지는 것을 막아 준다 — 승인 사례 격자가 그래서 벌어졌다. */
html[lang="zh"] h1,
html[lang="zh"] h2,
html[lang="zh"] h3,
html[lang="zh"] h4,
html[lang="zh"] p,
html[lang="zh"] li,
html[lang="zh"] .faq__q,
html[lang="zh"] .qopt,
html[lang="zh"] .chk__empathy,
html[lang="zh"] .report__urgent,
html[lang="zh"] .report__cross li,
html[lang="zh"] .sit__l,
html[lang="zh"] .calcout__adj,
html[lang="zh"] .why__b,
html[lang="zh"] .fcard__ex,
html[lang="zh"] .case__type,
html[lang="zh"] .case__result,
html[lang="zh"] .case__verdict {
  overflow-wrap: anywhere;
}

/* 음수 자간은 한자를 뭉개 보이게 한다 */
html[lang="zh"] h1,
html[lang="zh"] h2,
html[lang="zh"] h3,
html[lang="zh"] h4,
html[lang="zh"] .btn,
html[lang="zh"] .hero__title,
html[lang="zh"] .calcout__v {
  letter-spacing: 0;
}

/* 굵기 700은 한자에서 지나치게 뭉친다. 한 단계 낮춘다 */
html[lang="zh"] .hero__title,
html[lang="zh"] .approve__slogan,
html[lang="zh"] .h2 {
  font-weight: 600;
}

/* ── 영어 ─────────────────────────────────────────────────────────── */
html[lang="en"] h1,
html[lang="en"] h2,
html[lang="en"] h3,
html[lang="en"] h4,
html[lang="en"] p,
html[lang="en"] li {
  word-break: normal;
  overflow-wrap: break-word;
}
html[lang="en"] { --font-sans: "Pretendard Variable", Pretendard, -apple-system,
                  BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; }
html[lang="en"] body { line-height: 1.7; }

/* 퀵메뉴 패널은 본문 컨테이너(1120px) 바깥 여백에 들어가야 한다.
   여백이 부족한 폭에서는 펼쳤을 때만 잠깐 겹치도록, 그림자를 강하게 줘 레이어를 분명히 한다. */
@media (min-width: 900px) and (max-width: 1399px) {
  .quick__panel { box-shadow: 0 16px 44px rgba(1, 44, 47, .28); }
}

/* ══ 헤더 — 영문·중문 길이 대응 ═══════════════════════════════════════
   "治愈劳动法律事务所",
"Chiyu Labor Law Office" 는 한국어보다 길어
   브랜드명과 메뉴가 2줄로 접히면서 헤더가 무너진다.
   ════════════════════════════════════════════════════════════════ */
.brand__mark,
.brand__sub,
.nav a,
.langpick button,
.header__cta { white-space: nowrap; }
/* 브랜드는 줄어들면 안 된다. nowrap 이라 폭이 모자라면 글자가 밖으로 삐져나와
   메뉴와 겹쳐 보인다 (예전엔 메뉴가 7개라 안 드러났다). 양보는 메뉴가 한다. */
.brand { flex: 0 0 auto; }

/* 메뉴가 8개(문의 남기기 추가)로 늘어 예전 1100px 기준으로는 로고를 침범한다.
   실측한 최소 폭 — 구분선과 굵은 버튼이 더해져 한국어 기준 1300px 로 늘었다.
   영문은 원래 1580 이 필요했는데 메뉴 라벨을 줄여 맞췄다.
   가장 큰 한국어 기준 하나로 통일한다. 모자라면 햄버거로 내린다. */
@media (max-width: 1299px) { .nav { display: none; } }

/* 중문·영문은 같은 메뉴가 훨씬 넓어진다. 데스크톱 메뉴를 더 늦게 보여주고
   그전까지는 햄버거를 유지한다. */
@media (max-width: 1399px) {
  html[lang="zh"] .hamburger, html[lang="en"] .hamburger { display: inline-grid; }
  html[lang="zh"] .header__cta, html[lang="en"] .header__cta { display: none; }
}
@media (min-width: 1400px) {
  html[lang="zh"] .nav a, html[lang="en"] .nav a { padding: 0 9px; font-size: 14px; }
  html[lang="zh"] .brand__mark { font-size: 17.5px; }
  html[lang="en"] .brand__mark { font-size: 18px; }
}

/* ── 4대 업무분야 카드 ───────────────────────────────────────────────
   모바일 2×2. 세로 4단으로 쌓으면 화면을 통째로 차지해 아래 내용이 안 보인다. */
/* ── 주요 업무 8칸 ────────────────────────────────────────────────────
   4분류에서 8분류로 늘렸다(노무사님 확정). 칸이 두 배가 됐으므로 칸마다
   담는 정보를 줄였다 — 그림 · 이름 · 한 줄 예시, 그게 전부다.
   예전처럼 목록 두 줄과 '더 보기' 링크까지 넣으면 8칸이 화면을 삼킨다.

   카드 전체가 링크다. 예전에는 카드 안 작은 링크 하나만 눌렸는데,
   8칸이 되면서 각 칸이 작아져 그 링크가 더 작아졌다. 칸 전체를 과녁으로
   삼으면 375px 에서도 손가락이 빗나가지 않는다.
   ──────────────────────────────────────────────────────────────────── */
.fieldcards + .hook { margin-top: 20px; }
@media (min-width: 768px) { .fieldcards + .hook { margin-top: 44px; } }

.fieldcards { display: grid; gap: 10px; grid-template-columns: 1fr 1fr; }
@media (min-width: 768px) { .fieldcards { gap: 14px; grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1024px) { .fieldcards { gap: 18px; } }

.fcard {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 14px 12px 16px; display: flex; flex-direction: column; align-items: center;
  min-width: 0; text-align: center; text-decoration: none;
  transition: box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
@media (min-width: 768px) { .fcard { padding: 18px 16px 20px; } }
.fcard:hover { box-shadow: var(--shadow-md); border-color: var(--green-100); transform: translateY(-2px); }

/* 그림 뒤에 연한 초록 판을 깐다. 여덟 장의 SVG 는 여백이 제각각이라
   판 없이 늘어놓으면 그림 크기가 들쭉날쭉해 보인다. 같은 크기의 판이
   기준선 노릇을 해서 여덟 칸이 한 세트로 읽힌다. */
.fcard__art {
  display: grid; place-items: center;
  width: 84px; height: 84px; border-radius: var(--r-full);
  background: radial-gradient(circle at 34% 28%, var(--white), var(--green-050) 62%, var(--green-100));
  box-shadow: inset 0 1px 2px rgba(255,255,255,.9), 0 2px 8px rgba(1,44,47,.07);
}
@media (min-width: 768px) { .fcard__art { width: 104px; height: 104px; } }
.fcard__art img { display: block; width: 72%; height: auto; }

.fcard__title {
  display: block; margin-top: 11px;
  font-size: 14.5px; font-weight: 700; line-height: 1.35;
  color: var(--green-800); word-break: keep-all;
}
@media (min-width: 768px) { .fcard__title { font-size: 17px; margin-top: 13px; } }
.fcard__en { display: block; font-size: 10px; font-weight: 500; color: var(--ink-400); letter-spacing: 0; margin-top: 3px; }
@media (min-width: 768px) { .fcard__en { font-size: 11.5px; } }
/* 영어 화면에서는 제목 자체가 영어라 부제와 글자까지 똑같아진다
   ("Lung Disease" 가 두 줄). 영어일 때만 감춘다.
   중국어는 제목이 중국어라 영문 부제가 제 역할을 하므로 그대로 둔다. */
html[lang="en"] .fcard__en { display: none; }

/* 예시 한 줄. 병명이 먼저 읽히도록 한 단계 아래 크기로 둔다.
   word-break: keep-all 이 없으면 "회전근개 파/열" 처럼 단어가 쪼개진다. */
.fcard__ex {
  display: block; margin-top: 7px;
  font-size: 11.5px; line-height: 1.5; color: var(--ink-600);
  word-break: keep-all;
}
@media (min-width: 768px) { .fcard__ex { font-size: 12.5px; margin-top: 9px; } }


@media (max-width: 699px) {
  .approve__slogan { margin-bottom: 24px; }
}

/* ── 헤더: 모바일에서 로고와 언어 토글이 붙어 보이는 문제 ──────────── */
@media (max-width: 1099px) {
  .brand { margin-right: auto; }
  .header__right { gap: 6px; margin-left: 12px; }
  .brand img { width: 26px; }
  .brand__mark { font-size: 17px; }
  .brand__sub { font-size: 9.5px; letter-spacing: 0.04em; }
  .langpick button { min-height: 30px; padding: 0 7px; font-size: 11px; }
  .hamburger { width: 40px; height: 40px; }
}
@media (max-width: 400px) {
  .brand__mark { font-size: 15px; }
  .brand__sub { display: none; }
  .langpick button { padding: 0 6px; font-size: 10.5px; }
}

/* ══ 「주요 업무」 섹션 내부 수직 리듬 ═════════════════════════════════
   측정값: 카드 간 gap 10px(모바일)/20px(데스크톱) 인데
   카드 묶음 ↔ 자가진단 훅 간격이 8px 이었다.
   그룹 사이가 그룹 안보다 더 좁아 하나의 덩어리로 읽혔다(근접성 원칙 위반).

   섹션 안 간격 위계 (DESIGN.md 4px 스케일):
     카드 간           10 / 20
     헤드 → 카드 묶음   40
     카드 묶음 → 훅     48 / 64   ← 그룹 간. 헤드 여백보다 크고
     섹션 상하 패딩     64 / 96      섹션 경계보다는 작게 둔다
   ════════════════════════════════════════════════════════════════ */

/* ── 접근성: 터치 타깃 (WCAG 2.5.8 최소 24×24, Apple HIG 권장 44×44) ──── */

/* 개인정보 동의 체크박스가 20×20 이라 WCAG 2.5.8 을 위반하고 있었다.
   상담 폼의 필수 항목이라 놓치면 제출 자체가 막힌다. */
.consent { align-items: center; gap: 12px; }
.consent input { width: 24px; height: 24px; margin: 0; }

/* 전화번호는 이 사이트의 1순위 전환 요소다. 높이 29px 로는 엄지로 누르기 어렵다. */
.hero__tel,
.consult__tel,
.mobilenav__tel {
  min-height: 44px; display: inline-flex; align-items: center;
}


/* ── 자가진단 1단계: 상황 선택지 ────────────────────────────────────
   문항을 순서대로 통과시키는 대신 자기 상황을 목록에서 고르게 한다.
   라벨에 기한·요건을 심어 두어 고르는 순간 사안의 급박함이 전달된다. */
.sitlist { display: grid; gap: 8px; margin-top: 4px; }
.sit {
  display: grid; grid-template-columns: 30px 1fr 14px; align-items: center; gap: 12px;
  width: 100%; min-height: 56px; padding: 12px 14px; text-align: left; cursor: pointer;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-md);
  font-size: 15px; line-height: 1.45; color: var(--ink-900);
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.sit:hover { border-color: var(--green-700); background: var(--green-050); transform: translateX(2px); }
.sit__ico { font-size: 19px; line-height: 1; text-align: center; }
.sit__l { min-width: 0; word-break: keep-all; }
.sit__go { color: var(--ink-400); font-size: 17px; text-align: right; }
.sit:hover .sit__go { color: var(--green-700); }

/* 선택 항목 표기 */
.field label .opt { font-weight: 400; color: var(--ink-400); font-size: 13.5px; }

/* ── 퀵메뉴: 전화 상담만 승인 도장 빨강 ──────────────────────────────
   전화는 이 사이트의 1순위 전환이다. 현장직·고령 재해자는 폼보다 전화를 쓴다.
   DESIGN.md 에서 --stamp-600 을 긴급 CTA 전용으로 정해뒀고, 여기가 그 자리다.
   퀵메뉴 4개 중 하나만 빨강이라 아껴 쓸수록 강해진다는 원칙도 지킨다. */
@media (min-width: 900px) {
  .quick__item--call { background: var(--stamp-600); border-color: var(--stamp-500); }
  .quick__item--call:hover { background: #9C3126; border-color: #fff; }
  .quick__item--call .quick__ico { background: #fff; color: var(--stamp-600); }
  .quick__item--call .quick__t { color: #fff; }
  .quick__item--call .quick__s { color: #FBE7E4; }
}
@media (max-width: 899px) {
  .quick__item--call { background: var(--stamp-600); border-right: 0; }
  .quick__item--call:active { background: #9C3126; }
  .quick__item--call .quick__ico { color: #fff; }
  .quick__item--call .quick__t { color: #fff; }
  /* 빨강 칸 왼쪽의 구분선은 배경이 바뀌는 지점이라 불필요하다 */
  .quick__item--call { box-shadow: -1px 0 0 var(--stamp-600); }
}

/* ══ 통화 유도 보강 ═══════════════════════════════════════════════════
   전화를 망설이는 이유는 두 가지다 — "지금 걸어도 받나" 와 "압박당하지 않을까".
   배지가 첫째를, 안심 문구가 둘째를 없앤다.
   ════════════════════════════════════════════════════════════════ */
.callstatus {
  display: inline-flex; align-items: center; gap: 8px;
  margin: 18px auto 0; padding: 7px 15px; border-radius: var(--r-full);
  font-size: 14px; font-weight: 600; line-height: 1.4;
}
.callstatus[hidden] { display: none; }
/* 버튼 바로 아래에 붙는 것 — 위 간격을 줄이고 왼쪽에 맞춘다.
   기본값(margin: 18px auto)은 섹션 한가운데 놓이는 용도라 여기서는 뜬다. */
.callstatus--under { margin: 8px 0 0; align-self: start; }
.callstatus__dot { width: 8px; height: 8px; border-radius: var(--r-full); flex: 0 0 auto; }
.callstatus.is-open { background: #E6F4EC; color: #1F6B4A; }
.callstatus.is-open .callstatus__dot { background: var(--ok); box-shadow: 0 0 0 3px rgba(46,125,91,.18); }
/* 실시간이라는 신호. 켜졌다 꺼졌다 하는 깜박임은 스팸 배너의 어법이라 쓰지 않는다.
   고리가 천천히 번져 사라지는 쪽이 '살아 있다'로 읽힌다.

   점만이 아니라 배지 전체가 함께 숨쉰다. 같은 주기·같은 이징이라 두 고리가
   한 호흡으로 읽힌다. 배지 쪽은 더 크고 옅게 — 점이 주인공이고 배지는 울림이다.

   네 경우(점/배지 × 밝은 배경/딥그린 배경)가 색과 번지는 거리만 다르다.
   전에는 같은 모양의 키프레임을 네 벌 두었는데, 주기를 손보려면 네 곳을 고쳐야 했다.
   고리는 하나로 두고 --pulse-c(시작 색) 와 --pulse-r(번지는 거리)만 바꾼다. */
@keyframes livePulse {
  0%   { box-shadow: 0 0 0 0 var(--pulse-c); }
  70%  { box-shadow: 0 0 0 var(--pulse-r) transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
.callstatus.is-open {
  --pulse-c: rgba(46,125,91,.22); --pulse-r: 12px;
  animation: livePulse 1.3s ease-out infinite;
}
.callstatus.is-open .callstatus__dot {
  --pulse-c: rgba(46,125,91,.30); --pulse-r: 8px;
  animation: livePulse 1.3s ease-out infinite;
}
/* 딥그린 배경 위에서는 같은 초록이 묻힌다. 밝은 쪽으로 바꾼다. */
.callstatus--dark.is-open { --pulse-c: rgba(169,229,199,.26); }
.callstatus--dark.is-open .callstatus__dot { --pulse-c: rgba(169,229,199,.42); }
@media (prefers-reduced-motion: reduce) {
  .callstatus.is-open, .callstatus.is-open .callstatus__dot { animation: none; }
}

/* 딥그린 배경 위 (상담 섹션) */
.callstatus--dark.is-open { background: rgba(111,199,158,.16); color: #A9E5C7; }

.reassure {
  margin: 12px auto 0; font-size: 13.5px; color: var(--ink-400);
  line-height: 1.7; max-width: 32rem;
}
/* 절 하나는 통째로 움직인다. 이러면 접히는 자리가 가운뎃점밖에 없다.
   (이 장치가 없으면 "대표 노무사가 / 직접 받습니다" 처럼 절 한가운데서 끊긴다) */
.reassure span { white-space: nowrap; }

/* ── 즉시 문의 두 줄 (자가진단 결과 · 문의 모달) ────────────────────────
   폼을 끝까지 채우기 어려운 사람의 출구다. 좁은 화면에서는 세로로 쌓아
   글자가 한 줄로 보이게 한다 — 눌러야 할 것이 접히면 작아 보인다. */
.btn-row--now { display: grid; gap: 8px; margin-top: 10px; }
.btn-row--now .btn {
  width: 100%; min-height: 48px; font-size: 15px;
  white-space: normal; word-break: keep-all;
}
/* 다시 진단하기는 가장 약한 동작이라 맨 아래에 얇게 둔다 */
.report__cta--restart { margin-top: 8px; }

/* ── 모바일에서만 나오는 줄바꿈 ────────────────────────────────────────
   같은 문장을 넓은 화면에서는 한 줄로, 좁은 화면에서는 뜻 단위로 끊고 싶을 때 쓴다.
   <br> 을 display:none 으로 두면 줄상자가 만들어지지 않아 줄이 안 바뀐다.
   768px 미만에서만 되살린다. (문구를 두 벌 두지 않아도 되는 것이 이 방식의 이점) */
.br-m { display: none; }
@media (max-width: 767.98px) { .br-m { display: inline; } }

/* CTA 바로 아래 신뢰 배지 줄 — 불안이 가장 큰 지점 */
.trustrow {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 10px;
  margin: 18px 0 0; padding: 0; list-style: none;
}
.trustrow li {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 13px; border-radius: var(--r-full);
  background: var(--white); border: 1px solid var(--line);
  font-size: 13px; font-weight: 600; color: var(--green-800);
}
.trustrow li::before { content: "✓"; color: var(--ok); font-weight: 700; }

/* 섹션 끝 전화 한 줄 — 읽고 마음이 움직인 그 자리에 번호가 있어야 한다 */
.seccall {
  /* 위의 제목·1~3단계가 전부 왼쪽 기준이라 이 줄만 가운데면 어긋나 보인다 */
  margin-top: 16px; text-align: left;
  font-size: 15px; color: var(--ink-600);
  /* 라벨 15px · 아이콘 · 번호 21px 을 **가운데** 기준으로 맞춘다.
     밑선에 맞추면 작은 라벨이 5px 내려앉아 보인다. */
  display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px;
}
/* ⚠️ flex + align-items:center 로 바꾼 적이 있는데 되돌렸다.
   라벨(15px)과 번호(21px)가 **밑선을 공유하는** 것이 이 줄의 원래 조판이고,
   가운데로 맞추면 그 관계가 사라진다. 어긋나 보였던 것은 라벨과 숫자가 아니라
   **아이콘**이었다 — 아이콘만 밑선에 맞춘다(아래 .seccall .telico). */
.seccall > span { font-weight: 600; color: var(--gold-600); }
/* 아이콘은 라벨과 같은 글줄에 앉는다(라벨 색·크기를 따른다).
   ⚠️ 기본 리셋에 `img, svg { display: block }` 이 있다. flex 안에서는 문제가 없지만
   여기처럼 글줄에 놓으면 아이콘이 제 줄을 차지한다 — 실측 라벨보다 31px 위에 떴다. */
.seccall > .telico { color: var(--gold-600); }
.seccall a {
  display: inline-flex; align-items: center; min-height: 44px;
  font-size: 21px; font-weight: 700; color: var(--green-800);
  text-decoration: none; letter-spacing: -0.02em; font-variant-numeric: tabular-nums;
}
.seccall a:hover { text-decoration: underline; }
/* 559px 이하에서는 위 버튼 줄이 2열 격자로 폭을 꽉 채운다. 좌우 대칭인 덩어리
   아래 캡션이므로 가운데가 맞다. 그 위 폭에서는 버튼이 왼쪽에 모이므로 왼쪽. */
@media (max-width: 559px) { .seccall { text-align: center; justify-content: center; } }

/* 히어로 안에서는 가운데 정렬 */
.hero .btn-row--pair { margin-top: 22px; }
.hero .callstatus { display: inline-flex; justify-content: flex-start; text-align: left; margin-inline: 0; }
.hero .reassure { display: block; text-align: left; margin-inline: 0; }
.hero .trustrow { justify-content: flex-start; margin-inline: 0; }

/* ── 자세히 문의 남기기 ────────────────────────────────────────────────
   전화가 어려운 사람 — 야간·주말,
근무 중,
한국어가 서툰 분 — 을 위한 경로다.
   그래서 입력이 아니라 '고르기'로 설계했고,
손가락으로 누르는 것을 전제로
   모든 칩이 44px 이상이다. 다친 손으로도 누를 수 있어야 한다. */

/* 봇 차단용 칸. 화면에도,
스크린리더에도 잡히지 않게 완전히 치운다.
   display:none 은 일부 봇이 건너뛰므로 위치로 밀어낸다. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.inq__entry {
  margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 10px; font-size: 14px; color: var(--ink-600); text-align: center;
}

.inq__promise {
  display: flex; gap: 10px; align-items: flex-start;
  background: var(--green-050); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 14px 16px;
  font-size: 14px; line-height: 1.7; color: var(--green-800);
  font-weight: 600;
}
.inq__sla { margin-top: 10px; font-size: 13px; line-height: 1.7; color: var(--ink-400); }
#inquiryForm { margin-top: 22px; }

/* 칩 = 라디오. 같은 것을 다시 누르면 풀린다 (전부 선택 항목이므로). */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.chips button {
  min-height: 44px; padding: 10px 16px;
  border: 1px solid var(--line); border-radius: var(--r-full);
  background: var(--white); color: var(--ink-900);
  font-size: 15px; font-weight: 600; line-height: 1.3;
  cursor: pointer; transition: background .15s, border-color .15s, color .15s;
}
.chips button:hover { border-color: var(--green-700); }
.chips button[aria-pressed="true"] {
  background: var(--green-800); border-color: var(--green-800); color: var(--on-dark);
}
.chips button:focus-visible { outline: 2px solid var(--gold-500); outline-offset: 2px; }

.form__status.is-error { color: var(--err); }

@media (max-width: 640px) {
  /* 좁은 화면에서 칩이 한 줄에 하나씩 늘어지면 스크롤이 길어진다.
     글자 크기는 유지하고 좌우 여백만 줄여 두 개씩 들어가게 한다. */
  .chips button { padding: 10px 13px; font-size: 14.5px; }
  .inq__promise { font-size: 13.5px; }
}

/* ── 문의 진입점: 상단 메뉴 · 모바일 메뉴 ───────────────────────────────
   게시판을 두지 않기로 했으니 게시판이 있었을 자리를 이 버튼이 대신한다.
   상담 폼 맨 아래에만 두면 사실상 아무도 찾지 못한다. */
/* 크기·여백·글꼴은 위쪽 `.nav a, .nav__btn` 공용 규칙이 정한다.
   여기서 font/padding 을 다시 쓰면 그 규칙을 덮어 링크와 다르게 보인다 (실제로 그랬다). */
.nav__btn {
  background: none; border: 0; cursor: pointer;
  font-family: inherit;
  /* 줄바꿈을 허용하면 폭이 부족할 때 한 글자씩 세로로 쪼개진다 */
  white-space: nowrap; flex: 0 0 auto;
}

/* 「소개~자료실」은 읽을거리, 「문의 남기기」는 행동이다. 실선으로 가른다. */
.nav__sep {
  width: 1px; align-self: center; height: 18px;
  background: var(--line); margin-inline: 6px; flex: 0 0 auto;
}
/* 행동이라는 것만 색으로 알린다. 전화 버튼(주 CTA)과 경쟁하지 않게 채우지는 않는다. */
.nav__btn { color: var(--green-700); font-weight: 600; }
/* 크기·여백·글꼴·구분선은 위 `.mobilenav__list a, .mobilenav__list .mobilenav__btn`
   공용 규칙이 정한다. 여기서 font/color 를 다시 쓰면 그걸 덮어 링크와 달라 보인다
   (데스크톱 .nav__btn 에서 이미 한 번 겪은 실수다). */
.mobilenav__btn {
  background: none; border: 0; cursor: pointer;
  font-family: inherit; width: 100%; padding: 0; text-align: left;
}
/* 행동이라는 것만 색으로 알린다 — 데스크톱 메뉴와 같은 규칙 */
.mobilenav__btn { color: var(--green-700); }

/* ── 퀵메뉴 전화 상담: 지금 받을 수 있는지 신호등 ────────────────────────
   눌러도 안 받는 시간에 걸었다가 포기하는 것이 가장 아까운 이탈이다.
   초록 = 지금 통화 가능 / 노랑 = 상담 시간 아님. */
.callstatus--quick {
  margin: 5px 0 0; padding: 3px 8px 3px 7px; gap: 6px;
  font-size: 11.5px; font-weight: 700; letter-spacing: -0.01em;
  align-self: flex-start;
}
.callstatus--quick .callstatus__dot { width: 7px; height: 7px; }

/* 딥그린 패널 위라 밝은 배경을 그대로 쓰면 눈이 아프다. 톤을 낮춘다. */
/* 두 상태 모두 빨강 위에 놓이므로 글자는 흰색으로 통일하고, 상태는 점 색과 문구가 함께 알린다 (색만으로 구분하지 않는다). */
.callstatus--quick.is-open { background: rgba(255,255,255,.12); color: #FFFFFF; }
.callstatus--quick.is-open .callstatus__dot {
  background: #6FE3A6; box-shadow: 0 0 0 3px rgba(111,227,166,.22);
}

/* 통화 가능할 때만 천천히 깜빡인다. 닫혀 있을 때 깜빡이면 재촉으로 읽힌다. */
@media (prefers-reduced-motion: no-preference) {
  .callstatus--quick.is-open .callstatus__dot { animation: quickPulse 2.4s ease-in-out infinite; }
}
@keyframes quickPulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(111,227,166,.22); }
  50% { box-shadow: 0 0 0 6px rgba(111,227,166,.06); }
}

@media (max-width: 900px) {
  /* 하단 고정 바는 칸이 좁아 글자가 안 들어간다. 점만 남긴다. */
  .callstatus--quick {
    position: absolute; top: 6px; right: 50%; transform: translateX(30px);
    margin: 0; padding: 0; background: none !important;
  }
  /* display:none 이면 스크린리더에서도 사라져 점 색만 남는다 = 색이 유일한 단서.
     화면에서만 감추고 읽히기는 하게 한다. */
  .callstatus--quick span:not(.callstatus__dot) {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
  .callstatus--quick .callstatus__dot { width: 8px; height: 8px; }
  .quick__item--call { position: relative; }
}

/* 접힌 퀵메뉴 토글 위의 신호등.
   패널이 접혀 있어도 지금 전화를 받는지는 보여야 한다. */
.quick__toggle { position: relative; }
/* 두 문구 중 상태에 맞는 쪽만 보인다. 숨긴 쪽은 display:none 이라
   스크린리더도 한 번만 읽는다. */
.quick__toggle[aria-expanded="true"] .quick__togglet--open,
.quick__toggle[aria-expanded="false"] .quick__togglet--close { display: none; }
.quick__toggledot {
  position: absolute; top: 4px; right: 4px;
  width: 11px; height: 11px; border-radius: var(--r-full);
  border: 2px solid var(--green-800); display: none;
}
/* 펼쳐져 있으면 패널 안 신호등과 겹치므로 접혔을 때만 보인다 */
.quick__toggle[aria-expanded="false"] .quick__toggledot { display: block; }
.quick__toggle.is-open .quick__toggledot { background: #6FE3A6; }

@media (prefers-reduced-motion: no-preference) {
  .quick__toggle[aria-expanded="false"].is-open .quick__toggledot {
    animation: quickPulse 2.4s ease-in-out infinite;
  }
}

/* ── 폼 주변 안심 문구 ─────────────────────────────────────────────────
   산재 상담에서 가장 큰 망설임은 "회사에 알려질까"다. 폼 옆에서 답해야 한다. */
.form__promise {
  display: flex; gap: 10px; align-items: flex-start;
  margin-bottom: 18px; padding: 12px 14px;
  background: var(--green-050); border: 1px solid var(--line); border-radius: var(--r-md);
  font-size: 13.5px; line-height: 1.65; color: var(--green-800); font-weight: 600;
}

/* ── 접수 완료 / 실패 화면 ──────────────────────────────────────────────
   폼 하단 한 줄로는 접수됐는지 확신이 안 선다. 화면을 덮어 확실히 알린다. */
.modal__box--narrow { max-width: 420px; }
.done { padding: 34px 26px 26px; text-align: center; }
.done__icon {
  display: none; width: 64px; height: 64px; margin: 0 auto 18px;
  border-radius: var(--r-full); place-items: center;
}
.done__icon--ok { background: #E6F4EC; color: var(--ok); }
.done__icon--fail { background: var(--stamp-050, #FBEDEB); color: var(--stamp-600); }
.modal-done--ok   .done__icon--ok { display: grid; }
.modal-done--fail .done__icon--fail { display: grid; }

.done__title { font-size: 23px; line-height: 1.35; color: var(--green-800); }
.modal-done--fail .done__title { color: var(--stamp-600); }
.done__body { margin-top: 12px; font-size: 15.5px; line-height: 1.75; color: var(--ink-600); }
.done__hint { margin-top: 10px; font-size: 13.5px; color: var(--ink-400); line-height: 1.6; }
.done__call { margin-top: 22px; gap: 8px; font-variant-numeric: tabular-nums; }
/* 성공했을 때 전화는 '급하면' 쓰는 보조 수단이라 덜 튀게 둔다 */
.modal-done--ok .done__call { background: var(--white); color: var(--stamp-600); border: 1.5px solid var(--stamp-600); }
.modal-done--ok .done__call:hover { background: #FBEDEB; }

@media (prefers-reduced-motion: no-preference) {
  .modal-done--ok .done__icon--ok { animation: donePop .34s cubic-bezier(.2,.8,.3,1.2); }
}
@keyframes donePop { from { transform: scale(.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* ══ 2026-09-01 재설계 — 새로 생긴 규칙 ═══════════════════════════════
   기존 규칙을 고친 것은 각자 제자리에 있다. 여기는 새 컴포넌트만 둔다.
   근거: AI티 진단서 (진단 03 아이콘 · 06 리듬 · 07 사건기록 · 08 딥그린)
   ═══════════════════════════════════════════════════════════════════ */

/* 정렬 — 한 섹션 안에서 정렬이 왔다갔다 하지 않게 한다.
   승인 사례가 슬로건(가운데) → 안내문(왼쪽) → 버튼(가운데) → 전화(왼쪽) →
   각주(가운데) 로 네 번 튀어서 "정렬이 불안"하게 읽혔다.
   모달은 <main> 밖이라 영향받지 않는다. */
main .btn-row--center { justify-content: flex-start; }
main .footnote { margin-inline: 0; text-align: left; }

/* 진단 08 — 딥그린을 바탕으로 크게 쓴다.
   팔레트를 바꾸는 게 아니라 쓰는 법을 바꾼다. 크림이 거의 전 구간의 바탕이라
   섹션 경계가 사라져 있었다. 주요 업무 한 구간을 딥그린으로 깔면 흰 카드
   네 장이 떠오르고, 히어로와 다음 섹션이 분리된다. */
/* class="section" 이 이미 세로 여백을 준다. 여기서는 배경만 바꾼다
   (예전엔 42/64 를 그대로 다시 적어 둬서, 여백을 줄일 때 이 섹션만 남았다). */
/* 주요 업무는 히어로와 한 덩어리(베이지)가 됐다. 예전에는 진초록 섹션이라
   글자를 밝은 색으로 뒤집고 카드 테두리를 지웠는데, 이제 다 필요 없다.
   흰 카드가 베이지 위에서 스스로 떠 보이므로 테두리만 남긴다. */

/* ── 승인 사례 — 실제 결정통지서 ──────────────────────────────────────
   노무사님께 받은 공단 결정통지서 7장. 예전에는 CSS 로 통지서 모양을 그린
   목업이었다 — 이제 진짜가 있으니 목업은 지웠다.

   썸네일은 일부러 작다. 이 자리에서 본문을 읽히려는 게 아니라 '공문서가
   존재한다' 는 사실만 전한다. 읽고 싶은 사람은 눌러서 크게 본다.
   그래서 카드 전체가 버튼이고, 통지서 위에 돋보기 신호를 얹는다.
   ──────────────────────────────────────────────────────────────────── */
.cases { display: grid; gap: 10px; grid-template-columns: 1fr 1fr; }
@media (min-width: 640px) { .cases { gap: 14px; grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .cases { gap: 18px; grid-template-columns: repeat(4, 1fr); } }

.case {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 10px 10px 14px;
  display: flex; flex-direction: column; gap: 3px;
  text-align: left; font: inherit; color: inherit; text-decoration: none;
  transition: box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
@media (min-width: 640px) { .case { padding: 12px 12px 16px; } }
.case:hover { box-shadow: var(--shadow-md); border-color: var(--green-100); transform: translateY(-2px); }

/* 통지서 자리. 원본은 세로 비율이 조금씩 달라(370~650px) 그대로 두면
   카드 높이가 들쭉날쭉해진다. 4:3 상자에 가두고 위쪽을 기준으로 자른다 —
   '요양·보험급여결정통지서' 제목과 결정사항이 통지서 윗부분에 있다. */
.case__shot {
  display: block; position: relative; overflow: hidden;
  aspect-ratio: 4 / 3; border-radius: var(--r-sm);
  background: var(--white); border: 1px solid var(--line);
  margin-bottom: 8px;
}
.case__shot img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
/* 돋보기 — 누르면 커진다는 신호. 통지서 위에 얹되 글자를 가리지 않는 구석에. */
.case__shot::after {
  content: "⤢"; position: absolute; right: 5px; bottom: 5px;
  width: 22px; height: 22px; border-radius: var(--r-sm);
  display: grid; place-items: center;
  background: rgba(1,44,47,.72); color: #fff; font-size: 12px; line-height: 1;
}

.case__type { font-size: 10.5px; font-weight: 700; letter-spacing: 0.04em; color: var(--gold-600); }
@media (min-width: 640px) { .case__type { font-size: 11.5px; } }
.case__result {
  font-size: 13px; font-weight: 700; line-height: 1.35;
  color: var(--green-800); word-break: keep-all;
}
@media (min-width: 640px) { .case__result { font-size: 14.5px; } }
/* 금액이 이 섹션에서 가장 설득력 있는 한 줄이다. 굵기와 자간으로 세운다. */
.case__amount {
  font-size: 12.5px; font-weight: 700; color: var(--stamp-600);
  letter-spacing: -0.01em; word-break: keep-all;
}
@media (min-width: 640px) { .case__amount { font-size: 13.5px; } }

.case__verdict {
  margin-top: auto; padding-top: 9px;
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  font-size: 11px; color: var(--ink-400);
}
.case__chip {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; color: var(--white);
  background: var(--green-700); padding: 2px 8px; border-radius: var(--r-sm);
}

/* 8번째 칸 — 7장이면 격자가 한 칸 빈다. 비워 두느니 물어볼 자리로 쓴다. */
.case--cta {
  background: var(--green-700); border-color: var(--green-700); color: var(--on-dark);
  justify-content: center; gap: 6px; padding: 16px 14px;
}
.case--cta:hover { background: var(--green-800); border-color: var(--green-800); }
.case__ctaT { font-size: 15px; font-weight: 800; line-height: 1.35; word-break: keep-all; }
@media (min-width: 640px) { .case__ctaT { font-size: 17px; } }
.case__ctaS { font-size: 11.5px; line-height: 1.5; color: var(--green-100); word-break: keep-all; }
.case__ctaB { margin-top: 6px; font-size: 12.5px; font-weight: 700; color: var(--gold-400); }

/* 크게 보기 모달 안의 통지서 */
.casezoom {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--white);
}
#modal-case .footnote { margin-top: 10px; }

/* ── 아주 좁은 화면(320px대) ──────────────────────────────────────────
   브랜드는 nowrap 이라 줄지 않고, 언어 3개 + 햄버거가 고정 폭이라
   320px 에서 헤더가 28px 넘쳤다. 여기서만 눈금을 한 단계 줄인다. */
.langpick__t--short { display: none; }

@media (max-width: 380px) {
  /* 320px 기준 헤더가 49px 넘쳤다. 브랜드는 nowrap 이라 줄지 않고
     언어 3개 + 햄버거가 고정 폭이라 어느 하나만 줄여서는 안 맞는다.
     네 군데에서 조금씩 회수한다. 버튼 높이 36px 은 그대로라 터치 기준
     (WCAG 2.5.8, 24px)은 지켜진다. */
  :root { --gutter: 14px; }
  /* 영어에서 7px 모자라 좌우 여백을 2px씩 더 회수한다.
     다만 '中' 은 한 글자라 여백을 줄이면 20px 이 되어 터치 최소치(WCAG 2.5.8, 24px)에
     걸린다. 최소 너비를 24px 로 묶어 그 버튼만 지켜 준다. */
  .langpick button { padding: 0 4px; font-size: 12.5px; min-width: 24px; }
  .brand img { width: 24px; }
  .langpick__t { display: none; }
  .langpick__t--short { display: inline; }
  /* .brand__mark 는 위 max-width:400px 블록이 이미 15px 로 내려 둔다 */
  .header__right { gap: 4px; }

  /* 그래도 320px 에서 영어가 34px, 중국어가 14px 넘쳤다. 사무소 이름이 한국어보다
     길어서다("Chiyu Labor Law Office" 154px vs "노동법률사무소 치유" 116px).
     처음엔 nowrap 을 풀어 접게 했는데, 그러면 자리가 남는 한국어까지 3줄로
     접혔다(.brand 를 줄어들게 만들어야 접히는데, 그 순간 한국어도 같이 접힌다).
     그래서 접지 않고 **넘치는 언어의 글자 크기만** 내린다. 한국어는 손대지 않는다. */
  html[lang="en"] .brand__mark { font-size: 12.5px; }
  html[lang="zh"] .brand__mark { font-size: 13px; }

  /* 중국어는 버튼에서도 넘쳤다. 버튼에 word-break:keep-all 을 걸어 뒀는데
     중국어에는 띄어쓰기가 없어서 문장 전체가 한 덩어리가 된다 → 칸보다 넓어진다.
     중국어는 글자 사이에서 끊는 것이 정상 조판이므로 여기서만 푼다. */
  html[lang="zh"] .btn { word-break: normal; }
}


/* ── 히어로 아래쪽을 좁혀 '주요 업무' 를 첫 화면 안으로 ─────────────────
   ⚠️ 이 블록은 .callstatus / .reassure / .trustrow 의 본체 규칙보다 반드시
   **뒤에** 있어야 한다. 앞에 두면 뒤쪽 본체가 이겨서 아무 효과가 없다
   (미디어쿼리는 특이도를 올려주지 않는다 — 같으면 파일 뒤가 이긴다).
   위쪽 .hero 여백 조정과 짝을 이루는 규칙이라 거기에 표시를 남겨 뒀다. */
@media (max-width: 767.98px) {
  .callstatus { margin-top: 13px; }
  .reassure { margin-top: 7px; }
  .trustrow { margin-top: 10px; }
}

/* 신뢰 배지 세 개가 375px 에서 두 줄로 접히며 42px 를 먹었다 — 위에서 아낀
   여백을 도로 뱉는 셈이었다. 좁은 화면에서만 눈금을 한 단계 낮춰 한 줄에
   앉힌다. 문구는 그대로 둔다 — 줄이면 뜻이 약해진다. */
@media (max-width: 419.98px) {
  .trustrow { gap: 6px; }
  .trustrow li { font-size: 11px; padding: 4px 8px; gap: 3px; }
}


/* ── 전화 묶음: 넓은 화면과 좁은 화면이 서로 다르게 모인다 ────────────
   넓은 화면 — 초록 카드 옆에 [24시간 안내 / 신뢰 배지 셋] 이 세로로 선다.
   좁은 화면 — 신뢰 배지가 **초록 카드 안** 오른쪽으로 들어가고,
              24시간 안내만 카드 밖 아래에 남는다(사용자 요청).
              그래야 아래가 깔끔해지고 '주요 업무' 가 그만큼 위로 올라온다.

   마크업은 하나다: .hero__actRow(카드 + 배지) 와 그 뒤의 .callstatus.
   두 배치의 차이는 전부 여기서 만든다.
   ⚠️ 이 블록은 파일 맨 끝에 있어야 한다 — 위쪽 `.reassure` · `.trustrow` 본체
   규칙과 좁은 화면 규칙(≤419px 눈금 축소)을 덮어야 하기 때문이다.
   ──────────────────────────────────────────────────────────────────── */

/* 카드 안으로 들어온 안심 문구 — 글자색을 뒤집는다(밖에서는 회색이었다) */
.hero__call .reassure {
  /* ⚠️ width:0 + min-width:100% — 칸 폭을 잴 때(max-content) 이 문장을 0 으로
     쳐서 번호가 칸 폭을 정하게 한다. 그러지 않으면 이 긴 문장이 칸을 넓혀
     배지가 멀어진다. 실제 표시는 min-width 로 칸을 꽉 채워 접힌다. */
  width: 0; min-width: 100%;
  margin: 9px 0 0; max-width: none; text-align: left;
  font-size: 12.5px; line-height: 1.55;
  color: rgba(246, 242, 234, .76);
}
@media (min-width: 768px) { .hero__call .reassure { font-size: 13px; } }
.hero__call .reassure span { white-space: nowrap; }

/* ── 좁은 화면(≤1339px): .hero__actRow 자체가 초록 카드가 된다 ───────── */
@media (max-width: 1339.98px) {
  .hero__actRow {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px 22px; align-items: center;
    padding: 11px 18px; border-radius: var(--r-lg);
    background: var(--green-700); color: var(--on-dark);
    box-shadow: var(--shadow-md);
  }
  /* 번호 위아래가 헐렁해 보였다. 실측해 보니 라벨·번호·안심문구 사이 간격보다
     **번호 상자 자체**가 컸다 — 엄지로 누르기 좋게 min-height 44px 를 준 탓에
     27px 글자 위아래로 8px 씩 남았다. 상자를 40px 로 줄이고(여전히 넉넉한
     터치 영역이다) 위아래 간격도 함께 좁힌다.
     ⚠️ 40px 아래로는 내리지 말 것 — 주 이용자가 고령 재해자다. */
  .hero__actRow .hero__call { gap: 0; }
  .hero__actRow .hero__tel { min-height: 40px; }
  /* 「(클릭)」이 번호 위로 올라가 번호 아래가 비었다. 그 줄로 끌어올린다. */
  .hero__actRow .hero__call .reassure { margin-top: 2px; }
  /* 좁은 화면에서는 안심 문구를 통째로 지운다(사용자 요청).
     「상담료 없습니다」는 오른쪽 배지 「상담료 0원」과 같은 말이었고,
     「통화만 하고 끊으셔도 됩니다」까지 빼면 번호 아래가 정리된다.
     ⚠️ display:none 이라 스크린리더에서도 사라진다 — 같은 뜻이 배지
     「상담료 0원」·「대표 노무사 직접 상담」에 남아 있어 정보 손실은 없다.
     1340px 이상(PC)에서는 그대로 보인다. */
  .hero__actRow .hero__call .reassure { display: none; }
  /* 카드 껍데기는 바깥으로 옮겨졌으니 안쪽은 맨몸이 된다 */
  .hero__actRow > .hero__call {
    background: none; box-shadow: none; border-radius: 0;
    padding: 0; min-width: 0;
  }
  /* 배지는 진초록 위에 올라간다. 흰 알약은 무거워서 테두리를 벗기고
     글자만 남긴다 — 체크 표시는 금색으로 살려 목록임을 유지한다. */
  .hero__actRow .trustrow {
    display: grid; gap: 7px; margin: 0; justify-content: start;
  }
  .hero__actRow .trustrow li {
    background: none; border: 0; padding: 0; border-radius: 0;
    gap: 6px; font-size: 12px; font-weight: 600; color: var(--on-dark);
    white-space: nowrap;
  }
  .hero__actRow .trustrow li::before { color: var(--gold-400); }
  /* 24시간 안내도 같은 열에 들어왔다. 진초록 카드 안이므로 배지와 같은 옷을 입힌다
     — 알약 배경을 벗기고 밝은 글자 + 금색 점만 남긴다. */
  .hero__actRow .hero__side { display: grid; gap: 7px; align-content: center; }
  .hero__actRow .callstatus {
    background: none; padding: 0; margin: 0; border-radius: 0;
    font-size: 12px; font-weight: 600; color: var(--on-dark);
    white-space: nowrap;
  }
  /* 신호등 — 진초록 카드 위에서도 또렷하게. 기본 파장(rgba(169,229,199,.42))은
     이 배경에서 거의 안 보였다. 밝은 초록으로 더 크고 진하게 퍼지게 한다.
     위 세 줄(금색 체크 + 글자)과 어우러지도록 글꼴·굵기·색·간격을 같게 맞추고,
     점 크기도 체크 글리프 폭에 맞춰 같은 세로선에서 시작하게 한다. */
  .hero__actRow .callstatus { gap: 6px; }
  .hero__actRow .callstatus .callstatus__dot {
    width: 8px; height: 8px; background: #6FE3A6; box-shadow: none;
    margin-left: 2px; margin-right: 2px;
  }
  @keyframes cardPulse {
    0%   { box-shadow: 0 0 0 0 rgba(111, 227, 166, .55); }
    70%  { box-shadow: 0 0 0 9px rgba(111, 227, 166, 0); }
    100% { box-shadow: 0 0 0 0 rgba(111, 227, 166, 0); }
  }
  .hero__actRow .callstatus.is-open .callstatus__dot { animation: cardPulse 1.6s ease-out infinite; }
  .hero__actRow .callstatus.is-open { animation: none; }
  @media (prefers-reduced-motion: reduce) {
    .hero__actRow .callstatus.is-open .callstatus__dot { animation: none; }
  }
  /* ⚠️ 배지가 옆에 붙으면서 번호가 쓸 수 있는 폭이 줄었다.
     375px 에서 카드 안 왼쪽 칸은 약 180px 인데 27px 번호가 딱 그만큼이라
     「(클릭)」까지 붙으면 배지 위로 넘쳐 글자가 겹쳤다.
     번호를 화면 폭에 따라 유동으로 주고, 자리가 없는 구간에서만 힌트를 숨긴다.
     번호 자체는 여전히 tel: 링크이고 크기도 24px 아래로는 내려가지 않는다. */
  .hero__actRow .hero__tel { font-size: clamp(23px, 6.3vw, 32px); }
  /* 「(클릭)」 힌트 — 번호 옆에는 자리가 없다(배지가 옆에 붙어 있다).
     번호 **아래**, 번호 오른쪽 끝에 맞춰 붙인다(사용자 요청).
     주 이용자가 고령 재해자라 "누르면 걸린다" 는 신호를 없앨 수 없다. */
  .hero__actRow .hero__tel {
    min-height: 0; gap: 0; line-height: 1.05;
    /* ⚠️ align-self 가 없으면 링크가 칸 폭만큼 늘어나고, 그러면 위의
       align-items:flex-end 가 **번호까지** 오른쪽으로 민다. 폰에서는 칸이
       번호 폭이라 티가 안 났는데 768px 에서 번호가 카드 오른쪽에 붙었다.
       내용만큼만 차지하게 해서 번호는 왼쪽, (클릭)만 그 오른쪽 끝에 맞춘다. */
    align-self: flex-start;
  }
  /* 「(클릭)」은 이제 라벨 줄 오른쪽에 있다(마크업에서 옮겼다). */
  .hero__callLabel .telclick { font-size: 12px; font-weight: 600; }
  /* 1000px 부터는 2단이라 카드가 300px 다. 번호 아래에 붙이므로 폭 문제는
     없지만, 마우스로 쓰는 화면에서 "클릭" 안내는 군더더기다. 그때는 숨긴다. */
  @media (min-width: 1000px) { .hero__actRow .telclick { display: none; } }

  /* 24시간 안내만 카드 밖 아래에 */
  .hero__act > .callstatus { margin: 10px 0 0; }

  /* ⚠️ 폰에서만 배지를 번호 쪽으로 당긴다. 왼쪽 칸이 1fr 이면 남는 폭을 전부
     먹어 배지가 카드 오른쪽 끝까지 밀리고 가운데가 휑해 보인다(사용자 지적).
     왼쪽 칸을 번호 폭(max-content)에 맞추고 남는 폭은 오른쪽에 남긴다.
     560px 이상에서는 카드가 넓어져서, 이렇게 하면 오른쪽에 큰 빈자리가 생긴다.
     그래서 폰 구간에만 건다. */
  @media (max-width: 559.98px) {
    /* ⚠️ 여기가 오래 틀려 있었다. 예전에는 `max-content auto` + `justify-content:start`
       로 배지를 번호 쪽으로 당겼는데, 두 칸 모두 내용보다 좁아질 수 없는 값이라
       **카드가 화면 밖으로 넘쳤다** — 360px 33px, 375px 24px, 414px 8px.
       그래서 「24시간 상담 문의 접수 가능」 오른쪽이 잘려 보였다(사용자 지적).
       산수로 확인: 좌우 패딩 36 + 번호 165 + 배지칸 148 = 349 > 375px 폰의 347.
       **칸 사이 간격을 0 으로 해도 안 들어간다.** 배지칸에 24시간 줄이 있는 한
       폰에서 나란히 놓는 것은 불가능하다.
       → 24시간 줄을 배지칸에서 빼내 **카드 폭을 꽉 채우는 아랫줄**로 내린다.
         배지칸은 세 줄만 남아 119px 이 되어 넉넉히 들어가고,
         24시간 줄은 카드 패딩이 좌우 여백을 만들어 준다 —
         왼쪽 18 · 오른쪽 18 로 「통화만 하고 끊으셔도 됩니다」의 왼쪽 여백과
         정확히 같아진다(사용자 요청). 배지 세 줄도 오른쪽 18 에 맞춘다. */
    .hero__actRow {
      /* ⚠️ 왼쪽 칸의 최소를 **min-content(번호 폭)** 로 잡는 것이 핵심이다.
         minmax(0,1fr) 이면 왼쪽이 0 까지 찌부러져 번호가 칸 밖으로 삐져나오고
         배지 위에 겹친다 — 영어판에서 실제로 그랬다(배지 196px vs 한국어 119px).
         번호 폭을 바닥으로 두면 대신 **배지 쪽이 줄어들어 줄바꿈**한다.
         한국어는 356px 부터 줄바꿈 없이 들어가고, 영어·중국어만 접힌다. */
      /* 오른쪽 칸을 1fr 로 두고 배지를 그 안에서 **가운데**에 놓는다.
         예전에는 왼쪽이 1fr 이라 남는 폭이 전부 번호 오른쪽에 쌓이고
         배지는 카드 오른쪽 끝에 붙어 「너무 오른쪽」으로 보였다(사용자 지적).
         남는 폭을 배지 양옆으로 반씩 나누면 폭마다 알아서 균형이 잡힌다 —
         375px 에서 7px, 414px 에서 18px 왼쪽으로 온다.
         ⚠️ 고정값(margin-right: 12px 같은)으로 밀면 안 된다. 360px 은 여유가
         4px 뿐이라 배지가 두 줄로 접힌다. 가운데 정렬은 남는 만큼만 쓰므로 안전하다. */
      grid-template-columns: minmax(min-content, max-content) 1fr; justify-content: normal;
      /* 칸 사이 22 → 14. 360px 에서 한국어 배지가 한 줄에 남으려면 6px 이 모자랐고,
         기기마다 글자 폭이 조금씩 달라서 여유를 더 뒀다(360px 기준 4px 남음). */
      column-gap: 14px;
      /* 두 칸 모두 **위에서 시작**한다. 예전에는 center 여서 왼쪽 묶음만
         가운데 떠 있고 배지는 위에 붙어, 두 칸이 서로 어긋나 보였다. */
      align-items: start;
    }
    /* ⚠️ display:contents 라 상자는 사라지지만 **선택자는 여전히 DOM 을 따른다**.
       그래서 아래는 모두 후손 선택자여야 한다(`>` 로 썼다가 배지가 떨어진 적 있다). */
    .hero__actRow .hero__side { display: contents; }
    /* 정렬 축을 **둘**로 줄인다. 예전에는 셋이었다 —
       왼쪽 글(18) · 배지(210) · 그리고 카드 폭을 혼자 쓰던 24시간 줄.
       24시간 줄을 번호 아래로 넣어 왼쪽 축에 합치면,
       왼쪽은 [라벨+(클릭) / 번호 / 24시간] 세 줄, 오른쪽은 배지 세 줄이 되어
       두 칸 높이가 비슷해지고 위아래가 나란히 맞는다. */
    .hero__actRow .hero__call    { grid-area: 1 / 1; justify-self: start; }
    .hero__actRow .callstatus    { grid-area: 2 / 1; align-self: end; }
    .hero__actRow .trustrow      { grid-area: 1 / 2 / 3 / 3; align-self: start; justify-self: center; }
    /* ⚠️ align-self:end 가 핵심이다. 왼쪽 세 줄(72px)이 오른쪽 배지(79px)보다
       조금 짧은데, 남는 높이를 24시간 줄 **아래**가 아니라 위에 두어야
       두 칸의 **아랫줄이 딱 맞는다**. 글자 크기가 폭마다 달라지므로
       고정 여백으로는 못 맞춘다. */
    /* 라벨 줄 — 「(클릭)」을 오른쪽 끝으로 밀지 않고 라벨 바로 옆에 붙인다.
       예전에는 space-between 이라 「산재 무료 상담」과 「(클릭)」 사이에
       50px 구멍이 뚫려 있었다. */
    .hero__actRow .hero__callLabel { justify-content: flex-start; gap: 8px; }
    /* 안심 문구가 빠지면서 배지 세 줄이 카드 세로를 혼자 정한다.
       그래서 위아래 여백을 눈으로 맞춘다 — 배지 묶음 **위 11 · 아래 11**
       (위는 카드 패딩, 아래는 24시간 줄까지의 간격)로 대칭을 만들고,
       줄 사이는 그보다 좁은 8 로 두어 「묶음 하나」로 읽히게 한다.
       ⚠️ 줄 사이를 11 이상으로 벌리면 세 줄이 따로 놀아 보인다. */
    .hero__actRow { row-gap: 6px; }
    .hero__actRow .trustrow { gap: 8px; }
    /* 영어는 배지 문구가 길어서(「The principal attorney handles it」) 번호 옆에
       두면 한 칸에 **세 줄씩** 접힌다 — 실측 배지 한 개 높이 60px(한국어 21px).
       폰에서는 번호 아래로 쌓는다. 320~355px 에서 한국어에 쓰는 것과 같은 처리다. */
    html[lang="en"] .hero__actRow { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    html[lang="en"] .hero__actRow .hero__call  { grid-area: 1 / 1; }
    html[lang="en"] .hero__actRow .trustrow    { grid-area: 2 / 1; grid-auto-flow: row; justify-self: stretch; }
    html[lang="en"] .hero__actRow .callstatus  { grid-area: 3 / 1; align-self: auto; }
    /* 카드 안에서는 줄바꿈을 허용한다 — 위 minmax 가 배지 칸을 줄일 수 있어야
       번호가 안 밀린다. 한국어는 폭이 남아 어차피 한 줄로 남는다. */
    .hero__actRow .trustrow li,
    .hero__actRow .callstatus { white-space: normal; }
  }

  /* 320~355px 에서는 번호(최소 23px)와 배지를 한 줄에 놓을 폭이 아예 없다.
     이 구간만 카드 **안에서** 배지를 아래로 내린다 — 카드 밖으로 빼지 않는다. */
  @media (max-width: 355.98px) {
    .hero__actRow { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    /* 한 칸이 되었으니 세 줄로 다시 쌓는다(위 두 칸 배치를 덮는다) */
    .hero__actRow .hero__call { grid-area: 1 / 1; }
    .hero__actRow .trustrow   { grid-area: 2 / 1; }
    .hero__actRow .callstatus { grid-area: 3 / 1; }
    .hero__actRow .trustrow { grid-auto-flow: row; }
  }
}

/* ── 넓은 화면(≥1340px): 카드 옆에 24시간 안내 + 배지 세로줄 ─────────── */
@media (min-width: 1340px) {
  /* .hero__actRow 를 투명하게 만들어 그 자식을 바깥 격자에 그대로 앉힌다.
     display:contents 라 상자가 사라지고 .hero__call 과 .trustrow 가
     .hero__act 격자의 칸이 된다. */
  .hero__actRow { display: contents; }
  .hero__act {
    display: grid; grid-template-columns: 258px auto;
    /* 12 → 31px. 위에서 오른쪽 칸을 19px 넓혔는데, 그대로 두면 그 19px 을
       배지 알약이 먹어 폭이 넓어진다. 칸 사이로 흘려보내 **카드만 왼쪽으로
       19px 옮기고 배지는 제자리**에 둔다(258 + 31 + 198 = 487). */
    column-gap: 31px; align-items: start;
  }
  /* ⚠️ 자식 선택자(>)를 쓰면 안 된다. display:contents 로 격자 '항목' 이 되어도
     선택자는 여전히 DOM 을 따르므로 .hero__call · .trustrow 는 .hero__actRow 의
     자식이다. 후손 선택자로 잡아야 규칙이 걸린다 — 그렇게 만들었다가
     grid-column 이 auto 로 남아 배지가 카드 아래로 떨어졌다. */
  /* 오른쪽 열: 신뢰 배지 3개 + 그 아래 24시간 안내.
     카드는 그 열 높이에 맞춰 늘어난다(위는 「상담료 0원」, 아래는 24시간 안내와
     같은 선 — 사용자 요청). 늘어난 만큼 안쪽 글은 세로 가운데로 모은다. */
  .hero__act { align-items: stretch; }
  .hero__act .hero__call {
    grid-column: 1; justify-content: center;
  }
  .hero__act .hero__side { grid-column: 2; display: grid; gap: 8px; align-content: start; }
  /* ⚠️ `.trustrow` 기본값에 `justify-content: center` 가 있다(가로 배치용).
     격자로 바뀌면 이게 **트랙 폭**을 최대내용(166px)으로 좁히고 가운데 놓는다.
     그래서 li 에 width:100% 를 줘도 166px 였다. 트랙을 1fr 로 펴야 한다. */
  .hero__act .trustrow {
    display: grid; grid-template-columns: minmax(0, 1fr);
    justify-content: stretch; gap: 8px; margin: 0;
  }
  /* 흰 알약(166px)이 24시간 배지(198px)보다 좁아 오른쪽 끝이 들쭉날쭉했다.
     넷의 폭을 열 폭에 맞춰 오른쪽 선을 맞춘다(사용자 요청). */
  .hero__act .trustrow li,
  .hero__act .callstatus { width: 100%; margin: 0; }
  /* ⚠️ 흰 알약은 36px, 24시간 블록은 33px 이었다(사용자 지적).
     원인이 둘이다 — 글꼴/행간이 다르고(14/19.6 대 13/22.75), 알약에는 1px 테두리가
     있는데 24시간에는 없다. 눈금을 맞추고 **투명 테두리**를 줘 상자 계산까지 같게 한다. */
  .hero__act .callstatus {
    font-size: 13px; line-height: 1.75;
    padding: 6px 18px; border: 1px solid transparent;
  }
  /* 알약을 칸 폭에 맞춰 늘리면 가장 긴 「대표 노무사 직접 상담」 이 오른쪽
     여백을 다 먹어 왼쪽보다 좁아 보인다. 좌우 여백을 키워 균형을 맞춘다. */
  .hero__act .trustrow li { justify-content: flex-start; padding: 6px 18px; }
}


/* ── 1000~1339px: 배지를 카드 안 아래로 ───────────────────────────────
   이 구간은 2단이라 오른쪽 칸이 300px 다. 번호 옆에 배지가 설 자리가 없어
   카드 **안에서** 아래로 쌓는다(카드 밖으로 빼지 않는다).
   ⚠️ 반드시 위 `@media (max-width: 1339.98px)` 블록보다 **뒤에** 있어야 한다.
   앞에 두면 그 블록이 두 칸으로 되돌려 번호와 배지가 겹친다. */
@media (min-width: 1000px) and (max-width: 1339.98px) {
  .hero__actRow { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .hero__actRow .trustrow { grid-auto-flow: row; justify-items: start; }
}


/* ══════════════════════════════════════════════════════════════════════
   A/B 시안 B — 노무사님 자료 반영 전(2026-09-03 이전) 첫 화면
   ══════════════════════════════════════════════════════════════════════
   사진·이름·약력·3가지 약속이 들어간 옛 디자인. 시안 A(지금 디자인)와
   **제목만 함께 쓰고** 나머지는 전부 따로다.

   ⚠️ 이 파일 **맨 끝**에 있어야 한다. 위쪽 `.hero__title` · `.hero__grid` 규칙과
      `html[lang="en"]` 언어별 규칙을 덮어야 하는데, 특정도가 같아 순서로만 이긴다.
   ⚠️ 클래스를 `hb-` 로 새로 지었다. 옛 이름(`.person` · `.promise`)을 그대로 쓰면
      지금 소개 영역이 쓰는 `.promise` 와 부딪힌다.
   ⚠️ 기본값은 **감춤**이다. JS 가 꺼져 있으면 data-ab 가 안 붙고 시안 A 만 보인다.
   ══════════════════════════════════════════════════════════════════════ */

.heroB { display: none; }

html[data-ab="b"] .hero__act { display: none; }
html[data-ab="b"] .heroB { display: block; }

/* 시안 B 는 한 열이다 — 제목이 위, 인물 패널이 그 아래. */
html[data-ab="b"] .hero__grid {
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
  /* ⚠️ 0 이어야 한다. 시안 A 는 여기에 `var(--gutter)` 를 주지만 옛 디자인의
     `.hero__grid` 에는 여백이 없었다 — `.container` 가 이미 32px 을 준다.
     그대로 두면 인물 패널이 원본보다 32px 좁아지고(1056 → 1024),
     사진 폭이 패널의 38% 라 사진까지 12px 줄어 비율이 달라진다. */
  padding-right: 0;
}
html[data-ab="b"] .hero { padding-block: 30px 44px; }
@media (min-width: 1024px) { html[data-ab="b"] .hero { padding-block: 40px 58px; } }

/* 퀵메뉴 회피 — **옛 디자인에는 없던 것을 새로 넣었다.**
   옛 디자인 그대로 두면 인물 패널이 퀵메뉴 밑으로 들어가 사진이 잘렸다
   (실측 1024px 166px · 1280px 95px · 1440px 15px, 1512px 부터 0).
   그 상태로 시안 B 를 돌리면 "옛 디자인이 나쁘다"가 아니라 "잘린 화면이 나쁘다"를
   재게 되어 A/B 결과가 왜곡된다. 그래서 여기서만 비켜 준다.
     · 1184px 미만: 컨테이너가 화면을 꽉 채우므로 필요한 값은 236px 로 일정하다.
     · 1184px 이상: 컨테이너가 가운데 정렬돼 화면이 넓어질수록 덜 필요하다 → 836 - 50vw.
     · 1648px 부터는 아예 안 겹쳐 기본 여백(--gutter)으로 돌아간다.
   50vw 를 쓰는 이유: vw 는 스크롤바를 포함해서, 실제 폭보다 17px 크게 잡힌다.
   그만큼을 상수(828 → 836)에 미리 얹어 두었다. */
@media (min-width: 1000px) {
  html[data-ab="b"] .hero__grid {
    /* ⚠️ 바닥은 `var(--gutter)` 가 아니라 **0** 이다. gutter 로 두면 넓은 화면
       (퀵메뉴에 안 겹치는 1608px 이상)에서도 32px 이 남아 원본보다 좁아진다. */
    padding-right: max(0px, min(236px, calc(836px - 50vw)));
  }
}

/* 제목 — 옛 크기로 되돌린다. 지금 값(59px)은 오른쪽 초록 카드 높이에 맞춘 것이라
   카드가 없는 시안 B 에서는 혼자만 거대해진다. */
html[data-ab="b"] .hero__title {
  font-size: 27px; line-height: 1.32; margin-bottom: 28px; max-width: 20ch;
}
@media (min-width: 768px)  { html[data-ab="b"] .hero__title { font-size: 40px; max-width: 24ch; } }
@media (min-width: 1024px) { html[data-ab="b"] .hero__title { font-size: 48px; margin-bottom: 36px; } }

/* 신뢰 배지·안심 문구는 시안 B 에서 가운데로 온다(옛 디자인). */
html[data-ab="b"] .heroB .trustrow { justify-content: center; }
html[data-ab="b"] .heroB .reassure { text-align: center; margin-inline: auto; }
html[data-ab="b"] .heroB .callstatus { margin-inline: auto; }

/* 아래 '주요 업무' 가 배지에 바짝 붙지 않게 */
html[data-ab="b"] .hero__kicker { margin-top: 30px; }

/* ── 인물 패널 ─────────────────────────────────────────────────────────
   모바일: 정보(이름·전화)를 사진 옆에 둔다. 사진만 화면을 채우면 전화번호와
           CTA 가 스크롤 아래로 밀린다.
   720px~: 정보 왼쪽 / 인물 오른쪽(기획안 배치).
   ──────────────────────────────────────────────────────────────────── */
.hbPerson {
  position: relative; border-radius: var(--r-lg); overflow: hidden;
  background: var(--green-700); color: var(--on-dark);
  padding: 20px;
  display: grid;
  /* 왼쪽 최소 154px 는 전화번호 한 줄(152px)이 정한다 — 이건 못 줄인다.
     2×2 로, 전화번호가 오른쪽 위로 올라와 첫눈에 들어오고 사진은 한 줄 내려와
     약력과 같은 선에서 시작한다. */
  grid-template-columns: minmax(154px, 1fr) minmax(0, 172px);
  grid-template-areas: "call head" "profile photo";
  column-gap: 14px; row-gap: 14px; align-items: end;
}
.hbPerson picture { display: contents; }
@media (min-width: 480px) { .hbPerson { grid-template-columns: minmax(0, 1fr) 168px; padding: 22px; } }
@media (min-width: 720px) {
  .hbPerson {
    /* 사진을 격자에서 빼내 카드 오른쪽 모서리에 붙인다. 칸 안에 가운데로 두면
       좌우 여백이 거의 같아져 '떠 있는 사각형'으로 읽힌다.
       ※ 격자 칸에 두고 높이를 풀면 사진 고유 높이가 행 높이를 정해 카드가
         632px 까지 부푼다. 그래서 절대 배치다. */
    grid-template-columns: minmax(0, 540px);
    grid-template-areas: "head" "call" "profile" "promise";
    padding: 32px;
    padding-right: calc(max(38%, 300px) + 52px);
    row-gap: 0;
  }
}

/* 모서리 금색 사선 장식 */
.hbPerson::before, .hbPerson::after {
  content: ""; position: absolute; width: 64px; height: 64px; pointer-events: none;
  border: 1px solid rgba(196, 161, 106, .55);
}
.hbPerson::before { top: 9px; left: 9px; border-right: 0; border-bottom: 0; }
.hbPerson::after { bottom: 9px; right: 9px; border-left: 0; border-top: 0; }
@media (min-width: 720px) {
  .hbPerson::before, .hbPerson::after { width: 84px; height: 84px; }
}

.hbPerson__head {
  grid-area: head; position: relative; z-index: 1; align-self: end; min-width: 0;
  padding-top: 6px;
}
.hbPerson__call { grid-area: call; position: relative; z-index: 1; min-width: 0; align-self: end; }
/* 모바일은 이름과 전화가 좌우로 나뉘어 구분선이 할 일이 없다.
   ⚠️ 숨기는 쪽을 미디어쿼리로 감싸야 한다 — 그냥 display:none 이면 뒤에 오는
      규칙을 덮어써 넓은 화면에서도 사라진다. */
@media (max-width: 719.98px) { .hbPerson__rule { display: none; } }

.hbPerson__profile {
  grid-area: profile; position: relative; z-index: 1; min-width: 0; align-self: start;
  margin-top: 6px;
}

.hbPerson__photo {
  grid-area: photo; position: relative; z-index: 1;
  /* 약력이 사진보다 길다. 사진을 내려 바닥을 맞추면 위에 빈 녹색이 생기므로
     내리는 대신 **늘려서** 맞춘다.
     ⚠️ img 는 대체 요소라 align-self:stretch 만으로는 안 늘어난다 — height 필수. */
  align-self: stretch; justify-self: center;
  width: 100%; height: 100%; max-height: 300px;
  margin-top: 6px;
  object-fit: cover; object-position: 50% 18%;
  border-radius: var(--r-md);
  box-shadow: 0 10px 28px rgba(1, 28, 31, .38);
}
@media (min-width: 480px) { .hbPerson__photo { max-height: 340px; } }
@media (min-width: 720px) {
  .hbPerson__photo {
    /* grid-area 를 auto 로 되돌리지 않으면 절대 배치의 기준 상자가 '사라진 photo
       영역'이 되어 사진이 13×26 으로 쪼그라든다. */
    grid-area: auto;
    position: absolute; top: 26px; right: 26px;
    width: max(38%, 300px); height: calc(100% - 52px);
    max-width: none; max-height: none;
    border-radius: var(--r-md);
    box-shadow: 0 10px 28px rgba(1, 28, 31, .34);
    margin: 0;
  }
}

.hbPerson__name { font-size: 27px; font-weight: 800; color: #fff; letter-spacing: -0.04em; line-height: 1.12; }
@media (min-width: 480px) { .hbPerson__name { font-size: 32px; } }
@media (min-width: 720px) { .hbPerson__name { font-size: 40px; } }
.hbPerson__role { font-size: 15px; font-weight: 600; line-height: 1.35; color: var(--gold-400); margin-top: 5px; }
@media (min-width: 720px) { .hbPerson__role { font-size: 18px; } }

.hbPerson__rule { height: 1px; background: rgba(196,161,106,.5); margin: 16px 0; }

.hbPerson__freeLabel {
  display: flex; align-items: center;
  font-size: 13px; font-weight: 600; line-height: 1.35; color: var(--gold-400);
  margin-bottom: -6px;   /* 아래 전화번호의 보이지 않는 여백(7.6px)을 상쇄 */
}
.hbPerson__freeLabel .telico { width: 1.05em; height: 1.05em; margin-right: 5px; }
.hbPerson__tel {
  display: inline-block; color: #fff; font-size: 23px; font-weight: 700;
  letter-spacing: -0.02em; text-decoration: none; font-variant-numeric: tabular-nums; line-height: 1.25;
}
@media (min-width: 720px) { .hbPerson__tel { font-size: 26px; } }
.hbPerson__tel:hover { text-decoration: underline; }

.hbPerson__profileTitle {
  display: inline-block; background: var(--green-600); color: var(--gold-400);
  font-size: 12px; font-weight: 700; padding: 3px 12px; border-radius: var(--r-sm);
  letter-spacing: 0.04em;
}
.hbPerson__profile ul { margin: 8px 0 0; padding: 0; list-style: none; display: grid; gap: 5px; }
.hbPerson__profile li {
  font-size: 13px; line-height: 1.5; color: #DCE7E2; padding-left: 11px; position: relative;
  word-break: keep-all;
}
.hbPerson__profile li::before { content: "·"; position: absolute; left: 2px; color: var(--gold-400); }

/* ── 3가지 약속 — 넓은 화면: 카드 안 ────────────────────────────────── */
.hbPerson__promise {
  grid-area: promise; position: relative; z-index: 1; display: none;
  margin: 14px 0 0; padding: 13px 15px; list-style: none;
  background: rgba(255, 255, 255, .95); border-radius: var(--r-md);
  counter-reset: hbpromise; gap: 7px;
}
@media (min-width: 720px) { .hbPerson__promise { display: grid; } }
.hbPerson__promise li {
  counter-increment: hbpromise;
  position: relative; padding-left: 21px;
  font-size: 13px; line-height: 1.5; color: var(--ink-900); word-break: keep-all;
}
.hbPerson__promise li::before {
  content: counter(hbpromise) "."; position: absolute; left: 0; top: 0;
  color: var(--green-700); font-weight: 700;
}

/* ── 3가지 약속 — 좁은 화면: 카드 밖 ────────────────────────────────
   카드 안에 두면 카드가 길어져 사진 자리를 먹는다. 밖으로 빼서 사진에 공간을 준다. */
.hbPromise {
  counter-reset: hbpromise; list-style: none;
  margin: 0; padding: 0;
  display: grid; gap: 10px;
}
@media (min-width: 720px) { .hbPromise { display: none; } }
.hbPromise li {
  counter-increment: hbpromise;
  display: flex; align-items: flex-start; gap: 10px;
  padding: 13px 15px;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-md);
  font-size: 13.5px; line-height: 1.55; color: var(--ink-900); word-break: keep-all;
}
.hbPromise li::before {
  content: counter(hbpromise);
  flex: 0 0 auto;
  /* 첫 줄 상자(13.5 × 1.55 = 20.9px) 안에서 17px 원을 가운데 놓는 값 */
  margin-top: 2px;
  width: 17px; height: 17px; border-radius: var(--r-full);
  display: grid; place-items: center;
  background: var(--green-700); color: var(--white);
  font-size: 11px; font-weight: 700; line-height: 1;
}

/* ── 시안 B 의 인물 패널 아래 묶음 ────────────────────────────────────
   [버튼 둘] · [24시간 안내] · [안심 문구] · [신뢰 배지 셋]
   ⚠️ 이 네 개는 시안 A 히어로를 고치며 바뀐 규칙에 휩쓸려 정렬 축이 넷으로
      흩어져 있었다 — 버튼 왼쪽 / 24시간 왼쪽 / 안심문구 가운데 / 배지 가운데.
      특히 `main .btn-row--center { justify-content: flex-start }` 가 파일 뒤에
      있어서 `.btn-row--center` 를 무력화하고 있었다.
      옛 디자인대로 **넷 다 가운데**로 되돌리고 세로 간격을 고른다. */
html[data-ab="b"] .heroB .btn-row--center { justify-content: center; }

/* 24시간 안내는 inline-flex 라 margin:auto 로는 안 가운데 온다.
   폭을 내용만큼 잡은 뒤 좌우 auto 로 민다. */
html[data-ab="b"] .heroB .callstatus {
  display: flex; width: fit-content; margin: 18px auto 0;
}
html[data-ab="b"] .heroB .reassure {
  text-align: center; max-width: none; margin: 10px auto 0;
}
html[data-ab="b"] .heroB .trustrow { justify-content: center; margin-top: 18px; }

/* 좁은 화면: 두 버튼을 위아래로 쌓는다.
   375px 에서 나란히 두면 칸이 170px 뿐이라 「30초 자가진단 먼저 해보기」가
   두 줄로 접혀 버튼 높이가 66px 로 튀고 왼쪽 버튼과 어긋나 보였다. */
@media (max-width: 479.98px) {
  html[data-ab="b"] .heroB .btn-row--pair { grid-template-columns: minmax(0, 1fr); }
  html[data-ab="b"] .heroB .btn-row--pair .btn { width: 100%; }
}