/* Eden Law Group: 사이트 공통 스타일 (디자인 시스템 v1, 2026-11-02)
   기준: B「노선」 아트보드(데스크톱 1440) → docs/style-guide.md. 부품 마크업은 src/templates/_components.j2.
   순서: 1 토큰 → 2 글꼴 → 3 기본 요소 → 4 머리말·푸터·하단 바(build.py 계약) → 5 배치 → 6 글자 → 7 부품 → 8 가족 부품 → 9 태블릿·휴대폰 → 10 보조.
   규칙: 인라인 style 없음. 색·크기는 토큰으로. ≤899 규칙은 9에만 있고 !important를 쓰지 않는다. */

/* ===== 1. 토큰 ===== */
:root{
  /* 색 */
  --ink:#0A0A0A;          /* 글자·검은 띠·노선·굵은 선 */
  --paper:#FFFFFF;        /* 바탕 */
  --mist:#F2F2F2;         /* 2차 면(회색 띠·패널) */
  --muted:#6B6B6B;        /* 보조 글자(캡션·법 고지 끝줄·조건 문구). 흰 바탕 5.33:1, mist 위 4.76:1 */
  --label:#5C5C5C;        /* 라벨·메타(휴대폰 라벨, 영업시간 줄, 푸터 라벨, 폼 끝 안내). 6.69:1. B에는 없는 색 — 2026-11-02 모바일 규격(현재 빌드)에서 왔다 */
  --rule-soft:#A5A5A5;    /* 장식선 전용(글자·정보선 금지) */
  --line-soft:#D6D6D6;    /* 메뉴 패널 행 구분. B에는 없는 색 — 현재 빌드 메뉴 패널에서 왔다 */
  --green:#099520;        /* 신호 녹색: 현재 단계 구간·정거장·현재 메뉴 표시만. 글자 금지 */
  /* 글꼴 */
  --font:'Atkinson Hyperlegible Next','Helvetica Neue',Arial,sans-serif;
  --font-ko:'Atkinson Hyperlegible Next','Noto Sans KR','Apple SD Gothic Neo','Malgun Gothic',sans-serif;
  --font-ko-only:'Noto Sans KR','Apple SD Gothic Neo','Malgun Gothic',sans-serif;
  /* 폭 */
  --gut:clamp(16px,4vw,56px);
  --max:1240px;           /* 기본 판형(Practice·How·Fees·About·Doc, 머리말) */
  --max-wide:1328px;      /* 넓은 판형(Home·Contact, 푸터) */
  --max-faq:calc(80rem + 2 * var(--gut)); /* FAQ 판형: 내용 폭 1280 */
  /* 선 */
  --rule-xl:10px;         /* 블록 머리 구획선 */
  --rule-l:8px;           /* 노선 본선(넓은 노선도는 10), 노트 왼쪽 띠 */
  --rule-m:2px;           /* 섹션·카드·입력 테두리 */
  --rule-s:1px;           /* 행 구분 */
  /* 제목 크기 (데스크톱 = B 실측 clamp) */
  --h1-xl:clamp(2.375rem,1.2rem + 4.2vw,4.75rem);   /* 76 @1440: How */
  --h1-l:clamp(2.5rem,1.3rem + 3.8vw,4.5rem);       /* 72: Fees */
  --h1-m:clamp(2.125rem,1.15rem + 3.6vw,4.25rem);   /* 68: Practice·About·FAQs·Contact */
  --h1-s:clamp(2.25rem,1.2rem + 3.4vw,4rem);        /* 64: 문서·결과 페이지 */
  --h1-home:clamp(2.125rem,1rem + 3.4vw,4rem);      /* 64: 홈 h1(띠 밖) */
  --h2:clamp(1.625rem,1.15rem + 1.3vw,2.25rem);     /* 36: 섹션 제목 */
  --h2-step:clamp(1.75rem,1.25rem + 1.2vw,2.5rem);  /* 37: How 단계판 */
  --h2-item:clamp(1.375rem,1.1rem + 0.9vw,1.875rem);/* 30: 업무 분야 항목 */
  --h2-q:clamp(1.375rem,1.1rem + 0.8vw,1.75rem);    /* 28: FAQ 질문·문서 절 */
  --h2-band-xl:clamp(2rem,1.2rem + 2.4vw,3.25rem);  /* 52: 홈 마감 띠 */
  --h2-band-l:clamp(2rem,1.3rem + 2.2vw,3.25rem);   /* 52: How 마감 띠 */
  --h2-band-m:clamp(2rem,1.3rem + 2vw,3rem);        /* 48: FAQ 마감 띠 */
  --h2-band-s:clamp(1.75rem,1.2rem + 2vw,2.75rem);  /* 44: Fees 마감 띠 */
  /* 본문 크기 */
  --fs-body:18px;
  --fs-lead:19px;
  --fs-note:17px;
  --fs-label:16px;
  --fs-cap:15px;
  --fs-fine:14px;
  --fs-intro:clamp(1.1875rem,1rem + 0.6vw,1.375rem); /* 22: 페이지 첫 문단(500) */
  --fs-disc-l:clamp(1.125rem,1rem + 0.4vw,1.3125rem);/* 21: 큰 고지 줄(홈·Fees) */
  /* 간격 (데스크톱 섹션 리듬) */
  --sp-sec-xl:clamp(56px,7vw,96px);
  --sp-sec-l:clamp(48px,6vw,80px);
  --sp-sec-m:clamp(40px,5vw,64px);
  --sp-sec-fees:clamp(56px,6vw,88px);
  /* 휴대폰·태블릿 잉크 간격 */
  --sp-ink:56px;
  --sp-band:48px;
  /* 탭 영역 */
  --tap:44px;
  --btn-h:56px;           /* 데스크톱 버튼 56(B·현재 빌드: 안 높이 52 + 테두리 2×2). ≤899는 52(모바일 규격) */
}

/* ===== 2. 글꼴 ===== */
@font-face{font-family:'Atkinson Hyperlegible Next';src:url(../fonts/atkinson-hyperlegible-next-latin.woff2) format('woff2');font-weight:200 800;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* 한국어: 실제 쓰인 글자만 담은 Noto Sans KR 부분 글꼴 (tools/make_ko_font.py가 만든다).
   옛 site.css에는 없던 선언이다(ko.css에만 있었다). B는 모든 페이지의 '한국어'(머리말·푸터·폼 라디오)를 Noto Sans KR로 그리므로
   여기에도 둔다 → en·es 페이지도 700 부분 글꼴(30KB)을 받는다(style-guide §12 D12). ko.css의 같은 선언은 빌드 계약상 그대로 둔다 */
@font-face{font-family:'Noto Sans KR';src:url(../fonts/noto-sans-kr-500-subset.woff2) format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Noto Sans KR';src:url(../fonts/noto-sans-kr-700-subset.woff2) format('woff2');font-weight:700;font-style:normal;font-display:swap}

/* ===== 3. 기본 요소 ===== */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font);font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased;overflow-x:clip}
html[lang="ko"] body{font-family:var(--font-ko);word-break:keep-all;overflow-wrap:break-word}
html[lang="ko"] [lang="en"],html[lang="ko"] [lang="es"]{overflow-wrap:break-word}
.ko-face,[lang="ko"] .ko-face{font-family:var(--font-ko-only)}
main{font-size:var(--fs-body);line-height:1.55}
h1,h2,h3{text-wrap:balance}
p,li,dd,figcaption,blockquote{text-wrap:pretty}
a{color:var(--ink)}
a:hover{color:var(--muted)}
.nw{white-space:nowrap}
.c-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* 키보드 포커스: 흰 바탕에는 검은 테, 검은 바탕 안에서는 흰 테 */
:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
:is(.on-dark,.c-hero,.c-sec--ink,.c-cta) :focus-visible{outline-color:var(--paper)}
.skip{position:absolute;left:8px;top:-80px;z-index:100;padding:12px 18px;background:var(--ink);color:var(--paper);font-weight:700;text-decoration:none}
.skip:focus{top:8px;color:var(--paper)}

.wrap{max-width:var(--max);margin:0 auto;box-sizing:border-box;padding-left:var(--gut);padding-right:var(--gut)}
.ico{display:block;flex:none}

/* ===== 4. 머리말·푸터·하단 바 (클래스 이름은 build.py header()/footer()/bottom_bar() 계약) ===== */
.sh{position:relative;z-index:20;background:var(--paper)}
.sh-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 28px;padding-top:18px;padding-bottom:18px}
.sh-logo{display:block;line-height:0}
.sh-logo img{display:block;width:min(210px,52vw);height:auto}
.sh-right{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:12px 20px}
.sh-lang{display:flex;align-items:center;gap:2px;font-size:16px;font-weight:700}
.sh-lang a{display:inline-flex;align-items:center;justify-content:center;min-width:var(--tap);min-height:var(--tap);padding:0 6px;box-sizing:border-box;text-decoration:none}
.sh-lang a[aria-current]{font-weight:800;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.3em}
.sh-lang>[aria-hidden="true"]{color:var(--muted)}  /* 언어 사이 구분점(build.py lang_switch) */
.sh-tel{display:inline-flex;align-items:center;gap:8px;min-height:var(--tap);font-size:17px;font-weight:700;text-decoration:none}
.btn-dark{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 22px;box-sizing:border-box;background:var(--ink);color:var(--paper);border:2px solid var(--ink);font-size:16px;font-weight:700;text-decoration:none}
.btn-dark:hover{background:var(--paper);color:var(--ink)}
.btn-dark:hover svg g{stroke:var(--ink)}
.sh-nav{display:flex;flex-wrap:wrap;gap:0 36px;border-top:2px solid var(--ink);font-size:16px;font-weight:700}
.sh-nav-in{display:flex;flex-wrap:wrap;gap:0 36px;margin:0;padding:0;list-style:none}
.sh-nav a{display:block;padding:14px 0 10px;border-bottom:6px solid transparent;text-decoration:none}
.sh-nav a[aria-current="page"]{border-bottom-color:var(--green);font-weight:800}
.sh-nav .en-mark{font-weight:400;color:var(--muted);font-size:14px}

/* 모바일 메뉴: JS 없이 열리는 details/summary */
.sh-menu{display:none}
.sh-menu>summary{display:inline-flex;align-items:center;gap:8px;min-height:var(--tap);padding:0 14px;box-sizing:border-box;border:2px solid var(--ink);background:var(--paper);font-size:16px;font-weight:700;cursor:pointer;list-style:none}
.sh-menu>summary::-webkit-details-marker{display:none}
.sh-menu[open]>summary{background:var(--ink);color:var(--paper)}
.sh-menu[open]>summary svg path{stroke:var(--paper)}
.sh-panel{position:absolute;left:0;right:0;top:100%;background:var(--paper);border-top:2px solid var(--ink);border-bottom:2px solid var(--ink);box-shadow:0 12px 24px rgba(10,10,10,.12)}
.sh-panel ul{list-style:none;margin:0;padding:8px var(--gut) 16px}
.sh-panel li a{display:flex;align-items:center;min-height:52px;border-bottom:1px solid var(--line-soft);font-size:18px;font-weight:700;text-decoration:none}
.sh-panel li a[aria-current="page"]{box-shadow:inset 6px 0 0 var(--green);padding-left:16px}
.sh-panel .en-mark{font-weight:400;color:var(--muted);font-size:15px;margin-left:6px}

/* 하단 고정 바 (≤899에서 보임) */
.site-bar{display:none;position:sticky;bottom:0;z-index:30;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:10px var(--gut);box-sizing:border-box;background:var(--paper);border-top:2px solid var(--ink)}
.site-bar a{display:flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 12px;box-sizing:border-box;border:2px solid var(--ink);font-size:16px;font-weight:700;line-height:1.2;text-decoration:none;text-align:center;white-space:nowrap}
.site-bar .bar-call{background:var(--paper);color:var(--ink)}
.site-bar .bar-req{grid-column:span 2;background:var(--ink);color:var(--paper)}

/* 푸터 */
.sf{background:var(--paper);padding:clamp(48px,6vw,72px) 0 clamp(32px,4vw,48px)}
.sf>.wrap{max-width:var(--max-wide)}  /* 푸터는 넓은 판형 1328 */
.sf-rule{display:block;width:100%;height:32px;margin:0 0 clamp(40px,5vw,56px)}
.sf-cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:40px 48px}
.sf p,.sf address,.sf li,.sf dd{font-size:18px;line-height:1.5}
/* 상호 24/800(B). .sf p(0,1,1)보다 세게 써야 24가 된다 — 옛 빌드는 데스크톱에서 .sf p에 져 18이었다 */
.sf .sf-name{margin:0;font-size:24px;font-weight:800;line-height:1.2}
.sf-lede{margin:8px 0 0}
.sf-702a{margin:20px 0 0;padding-top:16px;border-top:1px solid var(--ink)}  /* 줄간은 .sf p의 1.5(B 1.55 — 현재 빌드 값 유지, §12 D9) */
/* 라벨 16/700 #5C5C5C(모바일 규격, B는 14/#6B6B6B). 줄간 1.5 = 현재 빌드 실측(옛 .sf p가 1.4 선언을 이겼던 값) */
.sf .sf-label{margin:0 0 6px;font-size:16px;font-weight:700;line-height:1.5;color:var(--label);display:flex;gap:8px;align-items:center}
.sf-label>.nw{display:contents}  /* 라벨 안 괄호 묶음(D29)이 flex 항목으로 떨어져 나가지 않게 — 글자와 한 덩어리, nowrap은 유지 */
.sf-group{display:flex;flex-direction:column;gap:20px}
.sf-group>div>a{font-size:18px;font-weight:700}  /* 전화·메일 */
.sf-group>div>a[href^="mailto:"]{overflow-wrap:normal}  /* build.py가 @ 뒤에 <wbr>를 넣는다: 좁은 열(1023~1049)에서는 'atty@ / edenlawgroup.com'으로만 나뉘고 글자 중간은 찢지 않는다 */
.sf address{font-style:normal}
.sf ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px;font-weight:700}
.sf ul a,.sf-group a{display:inline-flex;align-items:center;min-height:32px;text-decoration:underline;text-underline-offset:.2em}
.sf-hours p{margin:0}
.sf-bottom{margin-top:48px;padding-top:20px;border-top:2px solid var(--ink);display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:12px 48px}
.sf-bottom p{margin:0;max-width:70ch;font-size:16px;line-height:1.55}

/* ===== 5. 배치 ===== */
.c-wrap{max-width:var(--max);margin:0 auto;box-sizing:border-box;padding-left:var(--gut);padding-right:var(--gut)}
.c-wrap--wide{max-width:var(--max-wide)}
.c-wrap--faq{max-width:var(--max-faq)}

/* 섹션: 위아래 여백만 갖는다. 데스크톱 값은 수식어로, ≤899는 9절의 56 체계로 덮인다 */
.c-sec{position:relative;padding:var(--sec-pt,0) 0 var(--sec-pb,0)}
.c-sec--mist{background:var(--mist);overflow:hidden}
.c-sec--ink{background:var(--ink);color:var(--paper)}
.c-sec--ink a{color:var(--paper)}
.c-sec--pt-xl{--sec-pt:var(--sp-sec-xl)} .c-sec--pb-xl{--sec-pb:var(--sp-sec-xl)}
.c-sec--pt-l{--sec-pt:var(--sp-sec-l)}   .c-sec--pb-l{--sec-pb:var(--sp-sec-l)}
.c-sec--pt-m{--sec-pt:var(--sp-sec-m)}   .c-sec--pb-m{--sec-pb:clamp(40px,5vw,56px)}
.c-sec--pt-48{--sec-pt:48px} .c-sec--pt-52{--sec-pt:52px} .c-sec--pt-56{--sec-pt:56px} .c-sec--pt-64{--sec-pt:64px} .c-sec--pt-72{--sec-pt:72px} .c-sec--pt-80{--sec-pt:80px} .c-sec--pt-88{--sec-pt:88px} .c-sec--pt-104{--sec-pt:104px}
.c-sec--pb-48{--sec-pb:48px} .c-sec--pb-56{--sec-pb:56px} .c-sec--pb-68{--sec-pb:68px} .c-sec--pb-72{--sec-pb:72px} .c-sec--pb-80{--sec-pb:80px} .c-sec--pb-88{--sec-pb:88px} .c-sec--pb-104{--sec-pb:104px}
.c-sec--mt-72{margin-top:72px} .c-sec--mt-fees{margin-top:var(--sp-sec-fees)} .c-sec--mt-band{margin-top:clamp(64px,8vw,104px)}

/* 블록 머리: 10px 구획선 + 정거장 점(.c-stop). 내용은 padding-top 아래에서 시작 */
.c-block{position:relative;border-top:var(--rule-xl) solid var(--ink);padding-top:var(--block-pt,28px)}
.c-block--pt24{--block-pt:24px} .c-block--pt20{--block-pt:20px} .c-block--pt18{--block-pt:18px} .c-block--ptf{--block-pt:clamp(18px,2vw,24px)}
.c-block--thin{border-top-width:var(--rule-m)}
.c-block--dashed{border-top:0;padding-top:calc(var(--rule-xl) + var(--block-pt,28px));background:repeating-linear-gradient(90deg,var(--ink) 0 18px,transparent 18px 30px) left top/100% var(--rule-xl) no-repeat}
.c-block--close{padding-bottom:36px;border-bottom:var(--rule-m) solid var(--ink)}  /* 닫는 블록(Practice 기한): 글 → 아래 2px 선 36 */
.c-block--mt{margin-top:var(--sp-sec-fees)}
.c-stop{position:absolute;left:0;top:-17px;display:block;width:24px;height:24px;z-index:1}
.c-stop circle{fill:var(--paper);stroke:var(--ink)}
.c-block--thin>.c-stop{top:-13px}
.c-block--dashed>.c-stop{top:-7px}

/* 3열 판: 제목 1열 + 본문 2열 */
.c-split{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--split-row,48px) var(--split-col,48px)}
.c-split--end{align-items:end}
.c-split--start{align-items:start}
.c-split--g24{--split-row:24px;--split-col:24px}
.c-split--item{--split-row:10px;--split-col:24px}
.c-split--time{--split-row:16px;--split-col:24px}
.c-split--fees{--split-row:14px;--split-col:48px}
.c-split--plate{--split-row:28px;--split-col:48px}
.c-span2{grid-column:span 2;min-width:0}
/* 12열 판(About): 5 + 7 */
.c-split12{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:2rem}
.c-span5{grid-column:span 5;min-width:0}
.c-span7{grid-column:span 7;min-width:0}
/* 2열 소개(How) */
.c-intro2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.25rem 3rem}

/* 노선 선행 홈: 넓은 화면에서만 띠 → 노선 → h1 순서로 보이고, 소스와 휴대폰은 h1이 먼저다 */
.c-railfirst{display:flex;flex-direction:column}

/* ===== 6. 글자 ===== */
.c-h1{margin:0;font-size:var(--h1,var(--h1-m));font-weight:800;line-height:1.04;letter-spacing:-0.015em}
.c-h2{margin:0;font-size:var(--h2);font-weight:700;line-height:1.15}
.c-h2--heavy{font-weight:800;letter-spacing:-0.01em}
.c-h2--item{font-size:var(--h2-item);line-height:1.2}
.c-h2--q{font-size:var(--h2-q);line-height:1.2;letter-spacing:-0.005em}
.c-h2--step{margin-top:.375rem;font-size:var(--h2-step);font-weight:800;line-height:1.08;letter-spacing:-0.01em}
.c-h2--22ch{max-width:22ch}  /* Contact '연락 뒤 일어나는 일' */
.h2-band,.c-h2--band{margin:0;font-size:var(--band-h2,var(--h2-band-xl));font-weight:800;line-height:1.05;letter-spacing:-0.01em}
.c-h3{margin:0;font-size:var(--h3,21px);font-weight:700;line-height:1.3}
.c-h3--s{--h3:20px}
.c-h3--l{--h3:22px;line-height:1.25}
.c-p{margin:0}
.c-lead{margin:0;font-size:var(--fs-lead);line-height:1.55;max-width:40em}
.c-lead--44{max-width:44em}    /* 홈 노선 섹션 리드 */
.c-lead--full{max-width:none}  /* 홈 업무 분야 안내문 */
.c-intro{margin:0;font-size:var(--fs-intro);font-weight:500;line-height:1.45}
.c-intro--fees{max-width:50ch;font-size:clamp(1.1875rem,1rem + .6vw,1.5rem);line-height:1.5}
.c-intro--practice{max-width:38em;font-size:20px;font-weight:400;line-height:1.55}  /* Practice 첫 문단(B 20/400) */
.c-label{margin:0;font-size:var(--fs-label);font-weight:700;line-height:1.3}
.c-kicker{margin:0 0 .5rem;font-size:var(--fs-cap);font-weight:700;line-height:1.4}  /* About 키커 → h2 8 */
.c-kicker--muted{margin:0;color:var(--muted)}                                         /* Practice 키커: 아래 0, h2가 위 6 */
.c-kicker--muted + .c-h2{margin-top:6px}
.c-fine{margin:0;font-size:var(--fs-fine);line-height:1.5;color:var(--muted)}
.c-fine--rule{margin-top:clamp(40px,5vw,56px);padding-top:12px;border-top:var(--rule-m) solid var(--ink);font-size:var(--fs-cap)}  /* Fees 끝줄 */
.c-meta{margin:0;font-size:var(--fs-label);line-height:1.5;color:var(--label)}
.c-measure{margin:0;max-width:40em}
.c-measure--62{margin:0;max-width:62ch}
.c-tel{font-weight:700;text-decoration-thickness:2px;text-underline-offset:.2em}  /* 본문 전화 링크 밑줄 2px/.2em — 이 시스템의 규칙(현재 빌드는 auto, D27) */
.c-inlink{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.2em}  /* 본문 안 일반 링크 */
.c-mt-12{margin-top:12px} .c-mt-16{margin-top:16px} .c-mt-20{margin-top:20px} .c-mt-24{margin-top:24px} .c-mt-28{margin-top:28px} .c-mt-32{margin-top:32px} .c-mt-40{margin-top:40px} .c-mt-48{margin-top:clamp(28px,4vw,48px)}

/* ===== 7. 부품 ===== */

/* 7-1 아이콘·칩: 48 그리드, 선 굵기 5(칩 안 4), 직각 끝. 색은 currentColor, 칩 바탕은 rect */
.c-ico{display:block;flex:none;width:20px;height:20px}
.c-ico--16{width:16px;height:16px} .c-ico--28{width:28px;height:28px}
.c-chip{display:block;flex:none;color:var(--paper)}
.c-chip>rect{fill:var(--ink)}
.c-chip--green>rect{fill:var(--green)}
.c-chip--inverse{color:var(--ink)}
.c-chip--inverse>rect{fill:var(--paper)}
.c-chip--branch{color:var(--ink)}
.c-chip--branch>rect{fill:var(--paper);stroke:var(--ink);stroke-width:4;stroke-dasharray:7 4;stroke-dashoffset:3.5}
.pl-s{width:32px;height:32px}
.pl-m{width:40px;height:40px}
.pl-r{width:56px;height:56px}
.pl-l{width:72px;height:72px}
.pl-xl{width:96px;height:96px}
.c-h2>.pl-l{margin:0 0 20px}
.c-chip--lead{margin:0 0 20px}  /* 제목 밖에 따로 선 72 칩(Practice 우리가 하는 일 · About 책임 변호사 · Contact 폼): 아래 20 */
.c-h2--item>.pl-l{margin-bottom:16px}
.c-h2--band>.pl-l,.h2-band>.pl-l{margin-bottom:24px}
.c-chip__num{font-family:var(--font);font-variant-numeric:tabular-nums}
.c-chip-pair{display:flex;gap:8px;margin:0 0 16px}
.c-bullet{display:block;flex:none;width:14px;height:14px;margin-top:.35em}
.c-bullet circle{fill:var(--paper);stroke:var(--ink)}

/* 7-2 버튼: 높이 --btn-h(데스크톱 56 = B·현재 빌드, 홈만 52(home.css), ≤899 52), 2px 테, 17/700. 기본(검정)·보조(흰색)·띠 위 반전 두 가지 */
.c-btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.c-btns--wide{gap:12px 16px;margin-top:28px}
.c-btns--col{flex-direction:column;flex-wrap:nowrap;margin-top:0}
.c-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:var(--btn-h);padding:0 24px;box-sizing:border-box;border:2px solid var(--ink);border-radius:0;font-family:inherit;font-size:17px;font-weight:700;line-height:1.2;text-decoration:none;text-align:center;cursor:pointer}
.c-btn--primary{background:var(--ink);color:var(--paper)}
.c-btn--primary:hover{background:var(--paper);color:var(--ink)}
.c-btn--secondary{background:var(--paper);color:var(--ink)}
.c-btn--secondary:hover{background:var(--ink);color:var(--paper)}
.c-btn--inverse{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.c-btn--inverse:hover{background:var(--ink);color:var(--paper)}
.c-btn--ghost{background:var(--ink);color:var(--paper);border-color:var(--paper)}
.c-btn--ghost:hover{background:var(--paper);color:var(--ink)}
.c-sec--ink .c-btn--inverse,.c-cta .c-btn--inverse{color:var(--ink)}
.c-btn--s{min-height:48px;padding:0 22px;font-size:16px}
.c-btns--col>.c-btn{display:flex;padding:0 20px}
.c-btn--strong{font-weight:800}
.c-btn--send{min-height:56px;padding:0 32px;gap:12px}

/* 7-3 화살표 링크: 밑줄 2px + 28 화살표 칩. 마지막 단어와 칩은 .nw로 묶는다 */
.c-arrow{display:inline-flex;align-items:center;gap:10px;font-size:18px;font-weight:700;line-height:1.3;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px}
.c-arrow--s{font-size:17px}
.c-arrow>.nw{display:contents}
.c-arrow svg{display:block;flex:none;width:28px;height:28px}
.c-arrow-p{margin:28px 0 0}
.c-arrow-p--24{margin-top:24px}
.c-arrow-p--20{margin-top:20px}
.c-arrow-p--32{margin-top:32px}
.c-arrow-p--16{margin-top:16px}

/* 7-4 히어로 띠: 검은 띠 + 흰 h1. 종류(kind)마다 B 실측 여백·크기를 변수로 갖는다 */
.c-hero{position:relative;overflow:hidden;background:var(--ink);color:var(--paper)}
.c-hero a{color:var(--paper)}
.c-hero__route{position:absolute;top:0;right:0;display:block;width:clamp(0px,calc(100% - 960px),600px);height:100%;pointer-events:none}
.c-hero--doc .c-hero__route{width:clamp(0px,calc(100% - 900px),520px)}
.c-hero__route path{stroke:var(--muted)}
.c-hero__route circle{fill:var(--ink);stroke:var(--paper)}
.c-hero__route circle.is-green{stroke:var(--green)}
.c-hero__in{position:relative;z-index:1;max-width:var(--hero-max,var(--max));margin:0 auto;box-sizing:border-box;padding:var(--hero-pt,44px) var(--gut) var(--hero-pb,50px)}
.c-hero__title{margin:0;font-size:var(--h1,var(--h1-m));font-weight:800;line-height:var(--h1-lh,1.04);letter-spacing:-0.015em;max-width:var(--h1-max,none)}
.c-hero__lede{margin:var(--lede-mt,1.25rem) 0 0;max-width:var(--lede-max,46rem);font-size:var(--lede-fs,20px);font-weight:500;line-height:var(--lede-lh,1.55)}
.c-hero__sub{margin:12px 0 0;max-width:40em;font-size:var(--fs-body);line-height:1.5}
.c-hero__lede a{font-weight:700;text-decoration-thickness:2px;text-underline-offset:.2em}
.c-hero--practice{--h1:var(--h1-m);--hero-pt:44px;--hero-pb:50px}
.c-hero--how{--h1:var(--h1-xl);--h1-lh:1.02;--hero-pt:44px;--hero-pb:48px}
.c-hero--fees{--h1:var(--h1-l);--h1-lh:1.02;--hero-pt:clamp(28px,4vw,52px);--hero-pb:clamp(30px,4.2vw,56px)}
.c-hero--about{--h1:var(--h1-m);--h1-max:18ch;--hero-pt:clamp(2.25rem,1.25rem + 3vw,4rem);--hero-pb:clamp(2.5rem,1.25rem + 3.5vw,4.5rem)}
.c-hero--faqs{--h1:var(--h1-m);--h1-max:16ch;--hero-max:var(--max-faq);--hero-pt:48px;--hero-pb:52px;--lede-max:40rem;--lede-lh:1.5}
.c-hero--contact{--h1:var(--h1-m);--h1-max:18ch;--hero-max:var(--max-wide);--hero-pt:clamp(32px,4.5vw,64px);--hero-pb:clamp(32px,4.5vw,64px);--lede-mt:18px;--lede-max:40em;--lede-fs:clamp(1.0625rem,.9rem + .5vw,1.375rem);--lede-lh:1.45}
.c-hero--doc{--h1:var(--h1-s);--h1-max:20ch;--hero-pt:clamp(28px,4vw,52px);--hero-pb:clamp(30px,4.2vw,56px)}
/* 홈 브랜드 띠: 상호 + 지역 (h1이 아니다) */
.c-hero--brand{--hero-max:var(--max-wide);--hero-pt:clamp(24px,3vw,40px);--hero-pb:clamp(24px,3vw,40px)}
.c-hero__name{margin:0;font-size:clamp(2rem,1rem + 2.8vw,3.25rem);font-weight:800;line-height:1.05;letter-spacing:-0.01em}
.c-hero__place{margin:12px 0 0;font-size:clamp(1.0625rem,.9rem + .5vw,1.375rem);font-weight:500;line-height:1.4}

/* 7-5 홈 h1 판 (띠 밖, 2px 선 + 점) */
.c-homehero__grid{padding-top:clamp(32px,4vw,48px);align-items:end}
.c-homehero .c-h1{grid-column:span 2;--h1:var(--h1-home)}
.c-hours{display:flex;gap:8px;align-items:flex-start;margin:16px 0 0;font-size:var(--fs-label);line-height:1.5;color:var(--label)}
.c-hours .c-ico{margin-top:1px;color:var(--ink)}  /* 시계 아이콘은 B·현재 빌드처럼 검정(글자만 라벨색) */

/* 7-6 노선도: 넓은(svg) · 압축(svg) · 단계 목록(범례). 넓은 화면에서 목록은 보조기기 전용 */
.c-rail{display:block;width:100%;height:auto;overflow:visible}
.c-rail line{stroke:var(--ink)}
.c-rail .is-green{stroke:var(--green)}
.c-rail text{fill:var(--ink);font-family:var(--font);font-variant-numeric:tabular-nums}
.c-rail .c-rail__note{fill:var(--muted)}
.c-rail-compact{display:none;width:100%;max-width:420px;height:auto;overflow:visible}
.c-rail-mini{display:block;width:15rem;max-width:100%;height:auto;margin-top:1.5rem}
.c-rail-mini line{stroke:var(--ink)} .c-rail-mini .is-green{stroke:var(--green)}
.c-rail-wrap{margin-top:clamp(28px,4vw,48px)}
.c-rail-wrap--how{margin-top:3rem}
.legend{list-style:none;margin:0;padding:0;border-bottom:1px solid var(--ink)}
.c-legend{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.c-legend>li{display:flex;align-items:center;gap:12px;padding:11px 0;border-top:1px solid var(--ink);font-size:var(--fs-body);font-weight:700;line-height:1.3}
.c-legend__n{flex:none;width:1.6em;font-weight:800}
.c-legend>li[aria-current]{box-shadow:-6px 0 0 var(--green)}
.c-legend>li.is-cond{flex-wrap:wrap;row-gap:4px;padding-left:1.4em;border-top:2px dashed var(--ink);font-weight:500}
.c-legend__sub{flex-basis:100%;padding-left:calc(1.6em + 44px);font-size:var(--fs-cap);font-weight:500;color:var(--muted)}  /* 500: 현재 빌드(li에서 상속) */
.c-legend a{text-decoration:none}

/* 7-7 단계 정거장 줄(가로 번호 + 눈금): Contact 3단계, Fees 회수 2단계, Practice 4단계 */
.c-stops{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(var(--stops,3),minmax(0,1fr))}
.c-stops>li{min-width:0;position:relative}
.c-stops__n{display:block;font-size:var(--stops-n,clamp(2rem,1.4rem + 1.6vw,2.75rem));font-weight:800;line-height:1}
.c-stops__rail{position:relative;display:block;height:40px;margin:12px 0 22px;font-size:var(--stops-n,clamp(2rem,1.4rem + 1.6vw,2.75rem))}
.c-stops__rail::before{content:"";position:absolute;left:calc(.3em - 4px);right:calc(4px - .3em);top:16px;height:8px;background:var(--ink)}
.c-stops>li:last-child .c-stops__rail::before{display:none}
.c-stops__rail::after{content:"";position:absolute;left:calc(.3em - 4px);top:0;width:8px;height:40px;background:var(--ink)}
.c-stops>li[aria-current] .c-stops__rail::after{background:var(--green)}
.c-stops .pl-m{margin:0 0 14px}
.c-stops__text{display:block;padding-right:40px;font-size:var(--fs-lead);line-height:1.5}
/* Contact: 연락 뒤 3단계(제목 → 줄 48) */
.c-stops--contact{margin-top:clamp(32px,4vw,48px)}
/* Fees: 회수 시 순서 2단계 */
.c-stops--fees{--stops:2;max-width:620px;--stops-n:clamp(2rem,1.6rem + 1vw,2.5rem)}
.c-stops--fees .c-stops__n{width:32px;text-align:center}
.c-stops--fees .c-stops__rail{height:36px;margin:10px 0 0;font-size:inherit}
.c-stops--fees .c-stops__rail::before{left:16px;right:-16px;top:14px}
.c-stops--fees .c-stops__rail::after{left:12.5px;width:7px;height:36px}
.c-stops--fees .c-stops__text{margin-top:14px;padding-right:24px;font-size:clamp(1.0625rem,1rem + .3vw,1.25rem);font-weight:700;line-height:1.35}
.c-stops--fees>li:last-child .c-stops__text{padding-right:8px}
/* Practice: '우리가 하는 일' 4단계(마지막 구간 점선) */
.c-stops--route4{--stops:4;margin-top:72px}
.c-stops--route4>li{padding:34px 28px 0 0;border-top:8px solid var(--ink)}
.c-stops--route4>li:nth-child(3){border-top-color:transparent;background:repeating-linear-gradient(90deg,var(--ink) 0 14px,transparent 14px 24px) left top/100% 8px no-repeat;background-origin:border-box}
.c-stops--route4>li:nth-child(4){border-top-color:transparent}
.c-stops--route4>li::before{content:"";position:absolute;left:0;top:-24px;width:7px;height:40px;background:var(--ink)}
.c-stops--route4 .c-stops__n{margin:0 0 12px;font-size:40px}
.c-stops--route4 .c-stops__text{padding-right:0;font-size:var(--fs-body)}

/* 7-8 고지 블록(7.02). 줄 크기는 블록 안에서 하나다(첫 줄 강조는 굵기만). 휴대폰에서도 크기를 바꾸지 않는다 */
.c-disclosure{font-size:var(--disc-fs,18px);line-height:var(--disc-lh,1.5)}
.c-disclosure ul{list-style:none;margin:0;padding:0}
.c-disclosure p{margin:0}
.c-disclosure__lead{padding:16px 0 14px}
.c-disclosure__lead--strong{font-weight:700}
.c-disclosure li{padding:12px 0;border-top:1px solid var(--ink)}
.c-disclosure li.is-cond{border-top:2px dashed var(--ink)}
/* rows: How·FAQ 답 안 (10px 머리선) */
.c-disclosure--rows{border-top:var(--rule-xl) solid var(--ink);border-bottom:var(--rule-m) solid var(--ink)}
.c-disclosure--rows.is-thin-end{border-bottom-width:1px}
.c-disclosure--rows.is-thin-end .c-disclosure__lead{line-height:1.55}  /* FAQ 답 첫 줄(B 1.55) */
.c-disclosure--how{margin-top:2.25rem;max-width:46rem}
.c-disclosure--how li.is-cond{padding-bottom:.875rem}
/* card: Practice 문의 (흰 카드, 칸 여백 24) */
.c-disclosure--card{background:var(--paper);border-top:var(--rule-xl) solid var(--ink)}
.c-disclosure--card li{padding:14px 24px}
.c-disclosure--card li:first-child{border-top:0}
/* mist: Contact (회색 판, 19px) */
.c-disclosure--mist{--disc-fs:19px;--disc-lh:1.55;max-width:880px;margin-top:clamp(32px,4vw,48px);background:var(--mist);border-top:var(--rule-xl) solid var(--ink)}
.c-disclosure--mist .c-disclosure__lead{padding:18px clamp(16px,2.4vw,28px) 16px;line-height:1.5}
.c-disclosure--mist li{padding:13px clamp(16px,2.4vw,28px)}
.c-disclosure--mist li:last-child{padding-bottom:16px}
/* list: About 문의 (첫 줄 위 선 없음) */
.c-disclosure--list{--disc-lh:1.55;border-bottom:1px solid var(--ink)}
.c-disclosure--list li{padding:.875rem 0}
.c-disclosure--list li:first-child{padding-top:0;border-top:0}
.c-disclosure--list li.is-cond{padding-left:1.5rem}
/* band: 검은 띠 위 (FAQ 마감) */
.c-disclosure--band{border-bottom:1px solid var(--paper)}
.c-disclosure--band li{padding:.875rem 0;border-top-color:var(--paper)}
/* para: 홈 비용 (한 문단, 큰 글자). <p> 자체가 블록이므로 기본 여백을 지운다 */
.c-disclosure--para{--disc-fs:var(--fs-disc-l);--disc-lh:1.6;margin:0;max-width:40em}
/* rows-l: Fees 요약 (큰 글자 500) */
.c-disclosure--rowsl{--disc-fs:var(--fs-disc-l);--disc-lh:1.45;font-weight:500;border-bottom:var(--rule-m) solid var(--ink)}
.c-disclosure--rowsl li{padding:14px 0}
.c-disclosure--rowsl li:first-child{border-top-width:2px}
.c-disclosure--rowsl li:last-child{padding-bottom:16px}
/* 7.02(a) 한 줄 */
.c-disclosure--a{--disc-fs:var(--fs-lead);--disc-lh:1.55;margin:20px 0 0;padding-top:20px;border-top:1px solid var(--ink);max-width:40em}
.c-disclosure--a-s{--disc-fs:var(--fs-body);--disc-lh:1.55;margin:0;padding-top:.875rem;border-top:1px solid var(--ink)}
.c-disclosure--a-s,.c-disclosure--a{color:var(--ink)}

/* 7-9 노트: aside(Fees 법 고지) · box(Practice 기한) · panel(How 법 고지 묶음) */
.c-note{margin-top:24px;padding:clamp(18px,2.4vw,28px);background:var(--mist);border-left:var(--rule-l) solid var(--ink)}
.c-note__label{display:flex;align-items:center;gap:8px;margin:0 0 8px;font-size:var(--fs-cap);font-weight:800;line-height:1.3}
.c-note__body{margin:0;max-width:64ch;font-size:var(--fs-note);line-height:1.55}
.c-note__body .c-cite{color:var(--muted)}
.c-note__meta{margin:16px 0 0;padding-top:12px;border-top:1px solid var(--rule-soft);font-size:var(--fs-fine);line-height:1.45;color:var(--muted)}
.c-note--box{margin-top:20px;max-width:40em;padding:16px 20px 18px}
.c-note--box .c-note__body strong{font-weight:800}
.c-note--top{margin-top:1.5rem;padding:1rem 1.25rem 1.125rem;border-left:0;border-top:var(--rule-xl) solid var(--ink)}
.c-note--top .c-note__label{margin:0;line-height:1.4}
.c-note--top .c-note__body{margin-top:.5rem}
.c-note--top .c-note__meta{margin-top:.875rem;padding-top:.625rem;line-height:1.5}
/* FAQ 6번 답: 단계 블록(10px 위 + 점) · 늘 보이는 압축 노선 · 단계 줄 목록 */
.c-faqsteps{position:relative;margin-top:1.25rem;border-top:var(--rule-xl) solid var(--ink)}
.c-rail-compact--always{display:block;max-width:22rem;margin:1.5rem 0 1rem}
.c-steplist{list-style:none;margin:0;padding:0;border-bottom:1px solid var(--ink)}
.c-steplist>li{display:grid;grid-template-columns:2.25rem 32px minmax(0,1fr);column-gap:10px;align-items:start;padding:.75rem 0;border-top:1px solid var(--ink);font-size:var(--fs-note);line-height:1.5}
.c-steplist>li>span:first-child{font-weight:800}
.c-steplist>li>svg{margin-top:-3px}
.c-steplist>li>span:last-child{min-width:0}
.c-steplist strong{font-weight:700}
.c-steplist>li.is-cond{padding:.75rem 0 .875rem 2rem;border-top:2px dashed var(--ink)}
.c-panel{margin-top:2.5rem;padding:1.5rem 1.75rem 1.625rem;background:var(--mist);border-top:var(--rule-m) solid var(--ink)}
.c-panel__label{display:flex;align-items:center;gap:8px;margin:0;font-size:var(--fs-label);font-weight:700;line-height:1.3}
.c-panel ul{list-style:none;margin:.75rem 0 0;padding:0}
.c-panel li,.c-panel__one{padding:.875rem 0;border-top:1px solid var(--ink);font-size:var(--fs-note);line-height:1.55}
.c-panel__one{margin:.75rem 0 0}
.c-panel__meta{margin:0;padding-top:.875rem;border-top:1px solid var(--ink);font-size:var(--fs-cap);line-height:1.5;color:var(--muted)}

/* 7-10 마감 띠(CTA): 검은 띠 + 큰 제목 + 반전 버튼 */
.c-cta{background:var(--ink);color:var(--paper)}
.c-cta a{color:inherit}
.c-cta__in{padding:var(--cta-pt,clamp(56px,7vw,96px)) var(--gut) var(--cta-pb,clamp(56px,7vw,96px))}
.c-cta__lede{margin:0;font-size:var(--fs-lead);line-height:1.55}
.c-cta--split .c-cta__grid{align-items:end}
.c-cta--split .h2-band{grid-column:span 2}
.c-cta--how{--band-h2:var(--h2-band-l);--cta-pt:4rem;--cta-pb:4.25rem}
.c-cta--how .c-cta__in{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:1.75rem 3rem}
.c-cta--how .c-cta__text{min-width:0;max-width:40rem}
.c-cta--how .h2-band{letter-spacing:-0.012em}
.c-cta--how .h2-band>.pl-l{margin-bottom:1.5rem}
.c-cta--how .c-cta__lede{margin-top:1rem}
.c-cta--how .c-btns{margin-top:0;gap:.75rem 1rem}
.c-cta--fees{--band-h2:var(--h2-band-s);--cta-pt:clamp(36px,5vw,56px);--cta-pb:clamp(36px,5vw,56px)}
.c-cta--fees .c-cta__grid{--split-row:24px;align-items:end}
.c-cta--fees .h2-band{line-height:1.1}
.c-cta--fees .h2-band>.pl-l{margin-bottom:20px}
.c-cta--fees .c-cta__lede{margin-top:12px;max-width:56ch;font-size:clamp(1.0625rem,1rem + .3vw,1.25rem)}
.c-cta--faqs{--band-h2:var(--h2-band-m);--cta-pt:4rem;--cta-pb:4.25rem;margin-top:4.5rem}
.c-cta--faqs .c-cta__grid{display:grid;grid-template-columns:4rem minmax(0,5fr) minmax(0,7fr);column-gap:2.5rem;row-gap:2rem}
.c-cta--faqs .h2-band{grid-column:1 / span 2;grid-row:1;max-width:12ch;letter-spacing:-0.012em}
.c-cta--faqs .h2-band>.pl-l{margin-bottom:20px}
.c-cta--faqs .c-disclosure{grid-column:3;grid-row:1 / span 2;min-width:0}
.c-cta--faqs .c-cta__acts{grid-column:1 / span 2;grid-row:2;align-self:end}
.c-cta--faqs .c-btns{margin-top:0;gap:.75rem 1rem}

/* 7-11 카드 3열 (홈 첫 질문 3 · About 일하는 방식) */
.c-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;margin-top:clamp(28px,3vw,40px)}
.c-card{min-width:0;border-top:var(--rule-m) solid var(--ink);padding-top:20px}
.c-card>.pl-m{margin:0 0 16px}
.c-card__body{margin:12px 0 0;font-size:var(--fs-body);line-height:1.55}
.c-cards--about{gap:2rem;margin-top:2rem}  /* About h2 → 카드 32 */
.c-cards--about .c-card{padding-top:1.125rem}
.c-cards--about .c-h3{display:flex;gap:12px;align-items:center}
.c-cards--about .c-card__body{margin-top:.625rem}
.c-cards--about .c-arrow-p{margin-top:1rem}

/* 7-12 업무 분야 목록 (홈 3열, 칩 + 링크) */
.c-areas{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:32px}
.c-areas>li{position:relative;display:flex;align-items:center;gap:14px;border-top:1px solid var(--ink);padding:14px 0;font-size:var(--fs-lead);font-weight:700;line-height:1.3}
.c-areas a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}

/* 7-13 분야 색인 (Practice 상단, 아래 화살표) */
.c-index{position:relative;margin-top:40px}
.c-index>.c-stop{top:-11px}
.c-index ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:24px;border-top:var(--rule-m) solid var(--ink)}
.c-index li{border-bottom:1px solid var(--ink)}
.c-index a{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:76px;padding:10px 0;box-sizing:border-box;font-size:var(--fs-body);font-weight:700;line-height:1.3;text-decoration:none}
.c-index a svg{flex:none;width:18px;height:18px}

/* 7-14 업무 분야 항목 (Practice 본문) */
.c-practice{border-top:var(--rule-xl) solid var(--ink);border-bottom:var(--rule-m) solid var(--ink);position:relative}
.c-practice__item{padding:26px 0 30px}
.c-practice__item>h2{scroll-margin-top:40px}  /* 색인 링크(#auto-accidents 등)의 목표는 h2다: 화면 맨 위에서 40 띄운다 */
.c-practice__item+.c-practice__item{border-top:var(--rule-m) solid var(--ink)}
.c-practice__item:last-child{padding-bottom:34px}
.c-practice__desc{margin:0;max-width:40em;line-height:1.6}
.c-practice__item .c-fine{margin-top:12px}
.c-split--time .c-fine{margin-top:14px}  /* Practice 기한 블록 끝줄 */

/* 7-15 FAQ: 번호 + 질문(h2) + 답(.qa). li#qN.qrow 계약 */
.c-faq{list-style:none;margin:0;padding:0;border-bottom:var(--rule-m) solid var(--ink)}
.qrow{position:relative;display:grid;grid-template-columns:4rem minmax(0,5fr) minmax(0,7fr);column-gap:2.5rem;row-gap:.75rem;padding:1.75rem 0 2.25rem;border-top:var(--rule-m) solid var(--ink)}
.qrow>.c-stop{top:-13px}
.qrow__n{font-size:var(--h2-q);font-weight:800;line-height:1.2}
.qrow>h2{display:flex;gap:14px;align-items:flex-start}
.qrow>h2>.pl-m{margin-top:2px}
.qa{min-width:0}
.qa>p{margin:0}
.qa>p+p{margin-top:1rem}
.qa .c-arrow-p{margin-top:1.25rem}
.c-faq-wrap{padding-top:3.5rem}

/* 7-16 사실 목록 (About 한눈에 · Contact 연락처) */
.c-facts{margin:0}
.c-facts__row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.5rem;align-items:baseline;padding:1rem 0;border-top:1px solid var(--ink)}
.c-facts__row:first-child{padding-top:0;border-top:0}
.c-facts__row:last-child{padding-bottom:0}
.c-facts dt{display:flex;gap:8px;align-items:baseline;font-size:var(--fs-label);font-weight:700;line-height:1.4}  /* About 사실 라벨 16(B는 15 — D15: D8·D10과 같이 라벨 16으로 통일, 현재 빌드와 같다) */
.c-facts dt>.c-ico{align-self:flex-start}
.c-facts dd{grid-column:span 2;min-width:0;margin:0;font-size:var(--fs-lead);line-height:1.5}
.c-facts--cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 28px}
.c-facts--cards .c-facts__row{display:block;padding:12px 0 22px;border-top:1px solid var(--ink)}
.c-facts--cards .c-facts__row:nth-child(-n+2){border-top-width:2px}
.c-facts--cards dt{align-items:center;margin:0 0 6px;font-size:var(--fs-cap);color:var(--muted)}
.c-facts--cards dd{font-size:var(--fs-lead)}
.c-facts__big{font-size:clamp(1.75rem,1.2rem + 1.6vw,2.5rem);font-weight:800;line-height:1.15;text-decoration-thickness:3px;text-underline-offset:6px}
.c-facts__mid{font-size:clamp(1.25rem,1rem + .7vw,1.5rem);font-weight:700;line-height:1.3;overflow-wrap:anywhere;text-decoration-thickness:2px;text-underline-offset:5px}
.c-facts address{font-style:normal}
.c-facts__after{margin:8px 0 0;padding-top:18px;border-top:1px solid var(--ink);max-width:44em}

/* 7-17 상담 요청 폼 (form.consult-form · .f2 · .form-status · .btn-send 계약) */
.consult-form{position:relative;min-width:0;margin:0}
.c-form__req{margin:0 0 22px;font-size:var(--fs-note);line-height:1.5}
.f2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 28px}
.c-field{min-width:0}
.c-field>label,.c-radios>legend{display:flex;align-items:center;gap:8px;margin:0 0 8px;padding:0;font-size:var(--fs-label);font-weight:700;line-height:1.35}
.c-input{display:block;width:100%;box-sizing:border-box;height:56px;margin:0;padding:0 14px;border:2px solid var(--ink);border-radius:0;background:var(--paper);color:var(--ink);font-family:inherit;font-size:var(--fs-body)}
.c-select{position:relative}
.c-select .c-input{padding-right:48px;-webkit-appearance:none;appearance:none;cursor:pointer}
.c-select svg{position:absolute;right:16px;top:18px;width:20px;height:20px;pointer-events:none;stroke:var(--ink)}
.c-radios{min-width:0;margin:0;padding:0;border:0}
.c-radios__row{display:flex;flex-wrap:wrap;gap:8px}
.c-radio{flex:1 1 6.5em;display:flex;align-items:center;gap:10px;min-height:56px;padding:0 12px;box-sizing:border-box;border:2px solid var(--ink);background:var(--paper);font-size:var(--fs-note);font-weight:700;cursor:pointer}
.c-radio[lang="ko"]{font-family:var(--font-ko-only);font-size:var(--fs-label)}
.c-radio input{flex:none;width:20px;height:20px;margin:0;accent-color:var(--ink)}
.c-check{margin-top:32px;padding:18px 20px;background:var(--paper);border:2px solid var(--ink)}
.c-check+.c-check{margin-top:16px}
.c-check label{display:flex;align-items:flex-start;gap:14px;font-size:var(--fs-body);font-weight:700;line-height:1.45;cursor:pointer}
.c-check--sms label{font-size:var(--fs-note);font-weight:400;line-height:1.5}
.c-check input{flex:none;width:24px;height:24px;margin:1px 0 0;accent-color:var(--ink)}
.c-form__note{margin:28px 0 0;max-width:44em;font-size:var(--fs-body);line-height:1.55}
.c-form__fine{margin:12px 0 0;max-width:52em;font-size:var(--fs-label);line-height:1.5;color:var(--label)}
.c-form__fine small{font-size:inherit}
.c-form__fine a{text-decoration-thickness:1px;text-underline-offset:3px}
.c-form__send{margin-top:24px}
.form-status{margin:18px 0 0;font-size:var(--fs-body);font-weight:700;line-height:1.5}
.form-status a{color:inherit}
.c-hp{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.c-aside-rule{margin:20px 0 0;padding-left:16px;border-left:6px solid var(--ink);font-size:var(--fs-body);font-weight:500;line-height:1.55;max-width:30em}

/* 7-18 문서 페이지 (Privacy·Disclaimer·SMS·결과·404) */
.c-doc{max-width:var(--max);margin:0 auto;box-sizing:border-box;padding:clamp(28px,4vw,48px) var(--gut) clamp(56px,7vw,96px)}
.c-doc__lede{margin:0;max-width:46rem;font-size:var(--fs-body);font-weight:500;line-height:1.6}  /* 문서 첫 문단 18/500/1.6(B·현재 빌드 실측) */
.c-doc__sec{max-width:46rem;margin-top:clamp(36px,4vw,56px);border-top:var(--rule-xl) solid var(--ink);padding-top:18px}
.c-doc__sec>h2{margin:0 0 12px;font-size:var(--h2-q);font-weight:700;line-height:1.2}
.c-doc__sec p,.c-doc__sec li{font-size:var(--fs-body);line-height:1.6}
.c-doc__sec p{margin:0 0 14px}
.c-doc__sec ul{margin:0 0 14px;padding-left:1.25em}
.c-doc__sec li{margin:0 0 8px}
.c-doc .meta{margin-top:14px;color:var(--label);font-size:var(--fs-label)}
.c-doc__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}

/* ===== 8. 가족 부품 ===== */

/* 8-1 How 단계판 (plate) */
.c-plate{scroll-margin-top:1.5rem;margin-top:4.5rem}
.c-plate:first-child{margin-top:1.5rem}
.c-plate__body{min-width:0}
.c-plate__body>.c-label{margin:0 0 .5rem}
.c-plate__p{margin:0;max-width:40rem;font-size:var(--fs-lead);line-height:1.55}
.c-plate__p+.c-plate__p{margin-top:1rem}
.c-plate__body>.c-h3{margin-top:2.25rem}
.c-plate__body>.c-arrow{margin-top:1rem;min-height:2.75rem;gap:.75rem;text-underline-offset:.3em}
.c-plate__branch{display:block;width:96px;height:56px;margin-top:1rem}
.c-plate__branch path{stroke:var(--ink)}
.c-plates{padding-bottom:5rem}
.c-checklist{list-style:none;margin:1rem 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:2rem;border-bottom:1px solid var(--ink)}
.c-checklist>li{display:flex;align-items:flex-start;gap:.75rem;padding:.75rem 0;border-top:1px solid var(--ink);font-size:var(--fs-note);line-height:1.45}
.c-checklist>li>span{min-width:0}
.c-checklist+p{margin:1rem 0 0}
.c-numlist{list-style:none;margin:1rem 0 0;padding:0;max-width:46rem;border-bottom:1px solid var(--ink)}
.c-numlist>li{display:flex;align-items:baseline;gap:.75rem;padding:.875rem 0;border-top:1px solid var(--ink);font-size:var(--fs-body);line-height:1.5}
.c-numlist__n{flex:0 0 1.75rem;font-size:22px;font-weight:800;line-height:1.1}
.c-numlist .c-ico{position:relative;top:3px}
.c-numlist>li>span:last-child{min-width:0}
.c-lawline{margin:2.5rem 0 0;padding-top:1rem;border-top:var(--rule-m) solid var(--ink);font-size:var(--fs-label);line-height:1.5}

/* 8-2 Fees: 요약 회색 판 · 3열 짧은 블록 · 그림 */
.c-short{position:relative;margin-top:clamp(40px,5vw,64px);background:var(--mist);border-top:var(--rule-xl) solid var(--ink)}
.c-short__grid{--split-row:16px;padding:clamp(20px,3vw,32px) clamp(16px,3vw,32px) clamp(24px,3vw,36px)}
.c-fig{display:block;flex:none;width:96px;height:48px}
.c-fig path{stroke:var(--ink)}
.c-fig circle{fill:var(--paper);stroke:var(--ink)}
.c-fig--56{height:56px}
.c-fig--short{margin:20px 0 0}
.c-fig--rec{margin:0 0 20px}
.c-fig--norec{margin:4px 0 40px}
.c-fig--trial{margin:16px 0 20px}
.c-trio{--split-row:48px;margin-top:var(--sp-sec-fees)}
.c-trio>section{position:relative;min-width:0}
.c-trio p{margin:14px 0 0}
.c-after{margin:28px 0 0;padding-top:14px;border-top:1px solid var(--ink);max-width:62ch}

/* 8-3 장식 노선 조각 (회색 띠 오른쪽 아래) */
.c-panel-route{position:absolute;right:0;bottom:0;display:block;width:360px;height:200px;pointer-events:none}
.c-panel-route path{stroke:var(--paper)}
.c-panel-route circle{fill:var(--mist);stroke:var(--paper)}
.c-sec--mist>.c-wrap,.c-sec--mist>.c-sec__in{position:relative;z-index:1}

/* ===== 9. 태블릿·휴대폰 ===== */
@media (min-width:900px){
  .c-railfirst>.is-first{order:-2}
  .c-railfirst>.is-second{order:-1}
  /* 넓은 화면의 단계 목록은 보조기기 전용이지만, 링크(How)에 키보드 포커스가 들어오면 보이게 한다(WCAG 2.4.7) */
  .c-legend:focus-within{position:static;width:auto;height:auto;margin:20px 0 0;overflow:visible;clip:auto;clip-path:none;white-space:normal}
}
@media (min-width:900px) and (max-width:959px){
  .sh-tel{display:none}
}
@media (max-width:1179px){
  /* 장식 노선은 조각만 보이는 폭에서 숨긴다 */
  .c-hero__route,.c-panel-route{display:none}
}
@media (max-width:1023px){
  .sf-cols{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width:899px){
  /* 머리말·하단 바 */
  .sh-nav,.sh-tel,.sh-cta{display:none}
  .sh-menu{display:block}
  .site-bar{display:grid}
  .sh:has(.sh-menu[open]) ~ .site-bar{display:none}
  .sh-panel li a[aria-current="page"]{box-shadow:-10px 0 0 var(--green);padding-left:0}
  html{scroll-padding-bottom:96px}

  /* 배치: 한 열 */
  .c-split,.c-split12,.c-intro2{grid-template-columns:minmax(0,1fr);row-gap:20px}
  /* 여러 열을 차지하던 칸은 한 열로. 홈 h1(span 2)을 풀지 않으면 폭 0인 둘째 열 + 간격 48이 생겨 리드·버튼이 48 좁아진다 */
  .c-span2,.c-span5,.c-span7,.c-homehero .c-h1{grid-column:auto}
  .c-railfirst>*{order:0}
  :root{--btn-h:52px}
  .nw-m{white-space:nowrap}  /* 휴대폰·태블릿에서만 묶는 글자(번역 줄바꿈 보정). .nw는 모든 폭에서 묶는다(상호·전화·시각) */

  /* 섹션 리듬: 앞 잉크 → 다음 잉크 56. 색 띠는 안쪽 48 */
  .c-sec{padding-top:0;padding-bottom:var(--sp-ink)}
  /* 머리선 블록(.c-stop, 블록 위로 17)으로 시작하는 섹션의 보정은 앞 블록의 끝 모양에 따라 다르므로 가족 CSS가 맡는다(home·about·practice) */
  /* 아래를 닫는 선이 있는 섹션: 글 → 선 안쪽 여백(기한 36 · 분야 목록 34) + 선 + 섹션 아래 = 다음 잉크까지 56.
     띠 앞 16 규칙(바로 아래)이 이기도록 그보다 앞에 둔다 */
  .c-sec:has(.c-block--close){padding-bottom:25px}
  .c-sec:has(.c-practice){padding-bottom:27px}
  .c-sec--mist,.c-sec--ink,.c-cta{padding-top:0;padding-bottom:0}
  .c-sec--mist>.c-wrap,.c-sec--ink>.c-wrap{padding-top:var(--sp-band);padding-bottom:var(--sp-band)}
  .c-sec:has(+ :is(.c-sec--mist,.c-sec--ink,.c-cta)){padding-bottom:16px}
  :is(.c-sec--mist,.c-sec--ink,.c-cta) + .c-sec{padding-top:24px}
  .c-hero + .c-sec:where(:not(.c-sec--mist,.c-sec--ink,.c-cta)),.c-hero + .c-wrap{padding-top:28px}  /* 색 띠는 안쪽 48만(위 규칙). :where 로 세기 (0,2,0) 유지 → 아래 홈·FAQ 예외가 이긴다 */
  .c-hero + .c-homehero{padding-top:22px}  /* 홈 h1 판: 히어로 뒤 22 + 판 안쪽 32(현재 빌드) */
  .c-hero + .c-faq-wrap{padding-top:36px}  /* FAQ 히어로 → 질문 목록 36 */
  .c-intro--fees{margin-top:0}  /* Fees 첫 문단: 히어로 뒤 28만(c-mt-48과 겹치지 않게) */
  .c-sec--mt-72,.c-sec--mt-fees,.c-cta--faqs{margin-top:0}
  .c-sec--mt-band{margin-top:16px}  /* Fees 끝줄 → 마감 띠 16(띠 앞 16 규칙과 같다) */
  .c-block--mt,.c-trio{margin-top:var(--sp-ink)}
  .c-short{margin-top:var(--sp-ink)}

  /* 히어로 */
  .c-hero__in{padding:clamp(28px,4vw,52px) var(--gut) clamp(30px,4.2vw,56px)}
  .c-hero--brand .c-hero__in{padding:24px var(--gut)}
  .c-hero__lede{margin-top:16px;font-size:var(--fs-lead)}
  .c-homehero__grid{padding-top:32px}

  /* 제목 */
  .c-h1,.c-hero__title{font-size:clamp(2.125rem,1.15rem + 3.6vw,3.125rem);line-height:1.06;letter-spacing:-0.015em}
  .c-h2,.c-h2--item,.c-h2--q,.c-h2--step,.c-doc__sec>h2,.qrow__n{font-size:clamp(1.5rem,1.25rem + 1vw,1.75rem);font-weight:700;line-height:1.2}
  .c-h2--step{margin-top:.375rem;letter-spacing:-0.01em}  /* 현재 빌드 휴대폰 값. 0이면 ko 4단계 제목 '(Demand and negotiation)'이 320에서 여백을 5px 넘는다 */
  .h2-band,.c-h2--band{font-size:clamp(2rem,1.2rem + 2.4vw,2.375rem);font-weight:800;line-height:1.05}
  .c-h3{font-size:20px;line-height:1.3}
  html[lang="ko"] :is(.c-h1,.c-hero__title){line-height:1.22;letter-spacing:-0.02em}
  html[lang="ko"] :is(.c-h2,.c-h2--item,.c-h2--q,.c-h2--step,.c-doc__sec>h2){line-height:1.3}
  html[lang="ko"] :is(.h2-band,.c-h2--band){line-height:1.2}
  html[lang="ko"] .c-h3{line-height:1.4}
  html[lang="ko"] main p{line-height:1.6}
  /* ko 고지 줄간: 현재 빌드에서 1.6이던 두 변형만(Fees 요약 rowsl · Contact 회색 판). card·list 변형은 1.5~1.55 그대로 */
  html[lang="ko"] .c-disclosure--rowsl{--disc-lh:1.6}
  html[lang="ko"] .c-disclosure--mist :is(.c-disclosure__lead,li){line-height:1.6}
  html[lang="ko"] .c-disclosure .c-disclosure__lead{line-height:1.6}  /* 고지 앞 문단은 ko 문단과 같은 1.6(변형 규칙 (0,2,0)보다 세게) */

  /* 본문: 18 / 리드 19·500 / 노트 17 / 라벨 16·700 / 캡션 14~15 */
  .c-lead,.c-plate__p,.c-stops__text,.c-cta__lede,.c-facts dd,.c-areas>li,.c-cards--about .c-h3+p{font-size:var(--fs-body)}
  .c-intro,.c-intro--fees,.c-doc__lede{font-size:var(--fs-lead);font-weight:500}
  .c-kicker,.c-label,.c-facts dt{font-size:var(--fs-label);font-weight:700;color:var(--label)}
  .c-note__label{font-size:var(--fs-label);font-weight:700}  /* 법 노트 제목: 색은 검정 그대로(현재 빌드·B). FAQ 노트는 faqs.css가 15/800 */
  .c-plate__body>.c-label{color:var(--label)}
  .c-checklist>li{font-size:var(--fs-body);line-height:1.5}
  .c-note__meta{font-size:var(--fs-cap)}
  .c-doc__sec p{line-height:1.55}
  .c-doc__sec li{line-height:1.5}

  /* 칩 */
  .c-h2>.pl-l,.c-h2--item>.pl-l,.h2-band>.pl-l,.c-cta .pl-l,.c-plate .pl-l,.c-chip--lead,
  .c-cta .h2-band>.pl-l,.c-cta--how .h2-band>.pl-l,.c-cta--faqs .h2-band>.pl-l,.c-cta--fees .h2-band>.pl-l{margin-bottom:16px}  /* 띠별 데스크톱 규칙(0,3,0)을 같은 세기로 덮는다 */
  .c-cta--fees .h2-band{line-height:1.05}
  .c-cta--fees .c-cta__lede,.c-stops--fees .c-stops__text{font-size:var(--fs-body)}
  .pl-xl{width:56px;height:56px}

  /* 버튼: 52, 한 줄 */
  .c-btn,.c-btn--s,.c-btns--col>.c-btn{min-height:var(--btn-h);padding:0 24px;font-size:17px;justify-content:center;white-space:nowrap}
  .c-btn--send{min-height:56px}  /* 폼 보내기 버튼은 모든 폭에서 56(현재 빌드·B) */
  .c-btns--col{flex-direction:row;flex-wrap:wrap}
  .c-btns--col>.c-btn{display:inline-flex}

  /* 화살표 링크: 글 끝에 붙는 인라인 */
  .c-arrow,.c-arrow--s{display:inline;padding:10px 0;font-size:var(--fs-body)}  /* 인라인 탭 영역 44(현재 빌드) */
  .c-arrow--s{font-size:var(--fs-note);padding:11px 0}  /* 작은 화살표(FAQ 더 보기·About 카드)는 17 유지 — 18이면 es FAQ 2번 링크가 390에서 두 줄이 된다. 위아래 11로 탭 44 */
  .c-arrow>.nw{display:inline}
  .c-arrow svg{display:inline-block;vertical-align:middle;margin-left:10px}
  .c-plate__body>.c-arrow{display:block;width:fit-content;max-width:100%;min-height:0;padding:8px 0}  /* 8+28+8=44(현재 빌드) */

  /* 노선도: 넓은 그림 숨김, 압축 노선(≤420) + 단계 목록 */
  .c-rail{display:none}
  .c-rail-compact{display:block}
  .c-rail-compact--always{max-width:420px}
  .c-rail-compact--faq{margin-left:calc(min(100%, 420px) * -0.0588)}  /* B-FAQ 도안(정거장 x 20/340)의 첫 정거장을 글 왼쪽 끝에 맞춘다(현재 빌드와 같다) */
  .c-steplist>li{grid-template-columns:1.25rem 32px minmax(0,1fr);column-gap:8px}
  .c-steplist>li.is-cond{padding-left:1.4em}
  .c-legend{position:static;width:auto;height:auto;margin:20px 0 0;overflow:visible;clip:auto;clip-path:none;white-space:normal}
  .c-legend>li.is-cond{display:grid;grid-template-columns:1.6em 32px minmax(0,1fr);column-gap:12px}
  .c-legend__sub{grid-column:3;padding-left:0}
  .c-legend a{display:block;padding:11px 0;margin:-11px 0}
  .c-rail-mini{order:0;margin:-16px 0 1rem -12px}
  .c-plate>div:first-of-type{display:flex;flex-direction:column;align-items:flex-start}
  .c-plate>div:first-of-type>.c-rail-mini{order:0}
  .c-plate>div:first-of-type>.c-chip-pair{order:1}
  .c-plate>div:first-of-type>.c-label{order:2}
  .c-plate>div:first-of-type>h2{order:3}
  .c-plate__branch{display:none}
  .c-plate{margin-top:3rem}
  .c-plate:first-child{margin-top:0}  /* 소개 섹션 아래 56이 이미 있다(넓은 화면의 첫 판 24를 끈다) */
  .c-plates{padding-bottom:0}

  /* 정거장 줄 */
  .c-stops{grid-template-columns:minmax(0,1fr);row-gap:24px}
  .c-stops__rail::before{display:none}
  .c-stops--fees{grid-template-columns:repeat(2,minmax(0,1fr))}
  .c-stops--fees .c-stops__n{text-align:left}
  .c-stops--fees .c-stops__rail::before{display:block;left:3.5px;right:-3.5px}
  .c-stops--fees>li:last-child .c-stops__rail::before{display:none}
  .c-stops--fees .c-stops__rail::after{left:0}
  .c-stops--route4{margin-top:20px;row-gap:0}
  .c-stops--route4>li{display:grid;grid-template-columns:2.2em minmax(0,1fr);align-items:baseline;padding:14px 0;border-top:1px solid var(--ink);background:none}
  .c-stops--route4>li:nth-child(3){background:none;border-top:1px solid var(--ink)}
  .c-stops--route4>li:nth-child(4){border-top:2px dashed var(--ink)}
  .c-stops--route4>li::before{display:none}
  .c-stops--route4 .c-stops__n{margin:0;font-size:20px;line-height:1.3}

  /* 카드·목록 */
  .c-cards{grid-template-columns:minmax(0,1fr)}
  .c-cards--about{margin-top:1rem}  /* About 제목 → 카드 16(현재 빌드 휴대폰) */
  .c-areas{grid-template-columns:repeat(2,minmax(0,1fr))}
  .c-areas>li>a::after{content:"";position:absolute;inset:0}
  .c-areas>li:last-child:nth-child(odd){grid-column:1 / -1}
  .c-index ul{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:24px;padding-top:12px}
  .c-index li:last-child:nth-child(odd){grid-column:1 / -1}
  .c-index a{min-height:56px;padding:8px 0}
  .c-checklist{grid-template-columns:minmax(0,1fr)}
  .c-facts__row{grid-template-columns:minmax(0,1fr);gap:4px}
  .c-facts dd{grid-column:auto}

  /* FAQ */
  .qrow{grid-template-columns:1.75rem minmax(0,1fr);column-gap:.5rem}
  .qa{grid-column:1 / -1}
  .qrow>h2{gap:10px}
  .qrow>h2>.pl-m{margin-top:calc((1.2em - 40px) / 2)}
  html[lang="ko"] .qrow>h2>.pl-m{margin-top:calc((1.3em - 40px) / 2)}
  .c-faq-wrap{padding-top:36px}
  .c-faq>li:last-child{padding-bottom:16px}

  /* 노트·패널 */
  .c-note,.c-note--box,.c-note--top,.c-panel{padding:18px 20px}
  /* 고지 카드 행 안쪽 16은 ≤599 블록(600~899는 24 그대로 — 현재 빌드) */

  /* 마감 띠 */
  .c-cta__in,.c-cta--how .c-cta__in{padding-top:var(--sp-band);padding-bottom:var(--sp-band)}
  .c-cta__grid,.c-cta--faqs .c-cta__grid{grid-template-columns:minmax(0,1fr);row-gap:16px}
  .c-cta__grid>*,.c-cta--faqs .c-cta__grid>*{grid-column:1;grid-row:auto}
  .c-cta--split .h2-band{grid-column:auto}
  .c-cta__acts{margin-top:12px}
  .c-cta--how .c-cta__in{gap:24px}  /* How 띠: 리드 → 버튼 24(홈·Fees와 같다) */
  .c-cta--how .c-btns{margin-top:0}
  .c-cta--fees .c-cta__grid{row-gap:24px}

  /* 폼: 600~899는 두 열 그대로(현재 빌드), 한 열은 ≤599 블록 */
  .c-radio{flex:1 1 0;min-width:0}

  /* 문서 */
  .c-doc{padding-top:28px}
  .c-doc__sec{margin-top:36px}
  html[lang="ko"] .c-doc :is([lang="en"],[lang="es"]){word-break:keep-all}

  /* 푸터 (라벨은 기본 규칙이 .sf .sf-label이므로 같은 세기로 덮는다 — .sf-label만 쓰면 져서 아이콘이 2.5px 내려간다) */
  .sf .sf-label{align-items:flex-start}
  .sf-label svg{margin-top:3px}
  .sf ul{gap:0}
  .sf ul a,.sf-group a{min-height:var(--tap)}
}

@media (min-width:600px) and (max-width:899px){
  .c-cards--about{grid-template-columns:minmax(0,1fr)}
  /* 폼 두 열에서 두 칸짜리 줄(이메일 칸·회신 언어 라디오 묶음)은 그대로 두 칸, 칸 아래 정렬(현재 빌드) — ≤899 공통의 .c-span2{grid-column:auto}를 폼에서만 되돌린다 */
  .f2{align-items:end}
  .f2>.c-span2,.f2>.c-radios,.f2>.c-field:has(> #b-email){grid-column:1 / -1}
}

@media (max-width:599px){
  /* 머리말: 로고 + 메뉴 한 줄, 언어 전환 둘째 줄 */
  .sh-top{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px 12px;padding-top:12px;padding-bottom:10px}
  .sh-right{display:contents}
  .sh-logo{grid-column:1;grid-row:1}
  .sh-logo img{width:min(190px,52vw)}
  .sh-menu{grid-column:2;grid-row:1;justify-self:end}
  .sh-lang{grid-column:1 / -1;grid-row:2;justify-content:flex-start;gap:0}
  .sh-lang a{padding:0 10px}
  .sf-cols{grid-template-columns:minmax(0,1fr);row-gap:28px}

  /* 폼·연락처 칸: 한 열(현재 빌드 — 600~899는 두 열). 고지 카드 행 안쪽 16 */
  .f2{grid-template-columns:minmax(0,1fr)}
  .c-facts--cards{grid-template-columns:minmax(0,1fr)}
  .c-disclosure--card li{padding-left:16px;padding-right:16px}

  /* 버튼 전폭 */
  .c-btns>.c-btn,.c-doc__actions>.c-btn,.c-form__send>.c-btn{display:flex;flex:1 1 100%;width:100%}
  .c-cta__acts .c-btns{flex-direction:column;align-items:stretch}
  .c-cta--how .c-btns{flex:1 1 100%}  /* How 띠는 줄바꿈 flex라 버튼 묶음 자체도 한 줄을 다 쓴다 */

  /* 칩 */
  .pl-m{width:32px;height:32px}
  .pl-l{width:56px;height:56px}
  .pl-xl{width:56px;height:56px}
  .qrow>h2>.pl-m{margin-top:calc((1.2em - 32px) / 2)}
  html[lang="ko"] .qrow>h2>.pl-m{margin-top:calc((1.3em - 32px) / 2)}

  /* 목록 한 열 */
  .c-areas,.c-index ul{grid-template-columns:minmax(0,1fr)}

  /* 홈 h1(es·ko는 긴 문장) · 브랜드 띠 */
  html[lang="es"] .c-homehero .c-h1{font-size:clamp(1.75rem,1rem + 3vw,2.125rem)}
  html[lang="ko"] .c-homehero .c-h1{font-size:clamp(1.875rem,1.05rem + 2.6vw,2.125rem)}
  .c-hero__name{font-size:1.5rem;font-weight:700;line-height:1.15}
  html[lang="ko"] .c-hero__name{line-height:1.15}  /* ≤899의 html[lang=ko] main p 1.6을 이긴다 */
}

@media (max-width:389px){
  .site-bar{grid-template-columns:auto minmax(0,1fr);padding-left:12px;padding-right:12px}
  .site-bar .bar-req{grid-column:auto}
  .site-bar a{padding:0 10px;gap:8px}
}
@media (max-width:359px){
  .site-bar a svg{display:none}
  .c-note,.c-note--box,.c-panel{padding:14px}
  .c-note,.c-note--box{border-left-width:6px}
}

/* ===== 10. 보조 ===== */
@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important;scroll-behavior:auto !important}
}
@media print{
  .sh-menu,.site-bar,.skip{display:none !important}
}

/* 회신 언어 라디오(현재 빌드 휴대폰): ≤599 안쪽 10·간격 8, ≤389는 세 칸이 한 줄에 들어가지 않아 세로로 쌓는다(style-guide §10 '라디오 한 줄'의 예외) */
@media (max-width:599px){
  .c-radio{padding:0 10px;gap:8px}
}
@media (max-width:389px){
  .c-radios__row{flex-direction:column}
  .c-radio{flex:none}
}

/* ===== 11. MVC 추가분 (시안에 없음) ===== */
/* 서버 검증 메시지 (자바스크립트 없이 보낸 폼이 되돌아왔을 때만 보인다) */
.f-err{display:block;margin-top:6px;font-size:15px;font-weight:700;line-height:1.4;color:#B3261E}
.f-err:empty{display:none}

/* 꼬리말 저작권 아래 제작사 줄 */
.sf-right{max-width:70ch}
.sf-right p+p{margin-top:6px}
.sf-credit{font-size:15px;color:var(--label)}
.sf-credit a{color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.sf-credit a:hover{color:var(--ink)}

/* 시안 CSS 버그 수정(웹팀에 알림 예정): 7-2의 ".c-cta .c-btn--inverse{color:var(--ink)}"가 ".c-btn--inverse:hover"보다 뒤에 있어
   검은 띠 위 흰 버튼(Request a consultation)이 호버 때 검은 바탕에 검은 글씨가 된다. 홈·FAQ·비용·사건 진행의 띠 4곳. */
.c-sec--ink .c-btn--inverse:hover,.c-cta .c-btn--inverse:hover{color:var(--paper)}

/* 버튼 두 개 묶음은 항상 같은 크기(2026-11-03 요청). 시안은 나란히 설 때 글자 폭대로(265/243), 홈 히어로·마감 띠처럼 좁은 칸에서
   줄바꿈되면 서로 다른 폭으로 쌓였고, Fees 띠(.c-btns--col)만 칸을 꽉 채운 같은 폭이었다. 여기서는 묶음을 2열 그리드로 두어
   나란히 설 때는 둘 다 같은 폭(칸이 넓으면 최대 18.5rem; 스페인어 묶음이 37rem 아래에서 쌓이므로 그보다 넓게 둔다), 묶음이 좁아 한 줄에 하나씩 설 때는 Fees 띠처럼 칸을 꽉 채운다.
   ≤599는 시안이 이미 전부 100% 폭으로 쌓는다. */
@media (min-width:600px){
  .c-btns,.c-doc__actions{container-type:inline-size;display:grid;grid-template-columns:repeat(2,minmax(max-content,1fr));max-width:calc(37rem + 12px)}
  .c-btns--wide,.c-cta--faqs .c-btns,.c-cta--how .c-btns{max-width:calc(37rem + 16px)}  /* 열 간격 16인 묶음 */
  .c-cta--how .c-btns{flex:1 1 100%}  /* How 띠는 줄바꿈 flex: 600~899에서는 글 아래 한 줄을 다 쓴다 */
}
@media (min-width:900px) and (max-width:1023px){
  .c-btns--col>.c-btn{padding:0 12px}  /* Fees 띠의 좁은 칸(≈257~277px)에서 버튼이 칸 밖으로 나오지 않게(home.css의 900~1023 처리와 같다) */
}
@media (min-width:900px) and (max-width:1039px){
  html[lang="es"] .c-btns--col .c-btn>.c-ico{display:none}  /* 스페인어 'Llamar al 855-456-6777'은 그래도 길어 아이콘을 숨긴다(home.css의 es 처리와 같다) */
}
@media (min-width:900px){
  /* How 띠의 묶음은 flex 항목이라 inline-size 격리를 쓰면 폭이 0이 된다: 격리 없이 넓은 쪽 글자 폭에 둘을 맞춘다 */
  .c-cta--how .c-btns{flex:0 1 auto;container-type:normal;grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:1fr;width:max-content;max-width:100%}
}
/* 두 버튼이 한 줄에 같은 폭으로 들어가지 않는 폭(영어·한국어 < 35rem, 스페인어는 글자가 길어 < 37rem)에서는 한 줄에 하나씩, 칸 폭 전체 */
@container (width < 35rem){
  .c-btns>.c-btn,.c-doc__actions>.c-btn{grid-column:1 / -1}
}
@container (width < 37rem){
  html[lang="es"] .c-btns>.c-btn,html[lang="es"] .c-doc__actions>.c-btn{grid-column:1 / -1}
}