/* =============================================================
   집수리코리아 — 스타일 (에디토리얼/스위스 · 색면 블록 · 1px 괘선)
   섀도우 없음 · 라운드 없음 · 대비 AA · 모바일 본문 16px+
   ============================================================= */

/* Pretendard 폴백 지표 보정 — Windows Malgun Gothic 실측(한글 '한' advance 기준)으로
   size-adjust 86.4%/ascent-override 110.1%/descent-override 27.9% 산출. [정정] 이 값
   자체는 LCP·CLS 개선 효과가 측정되지 않았음(그날 LCP 개선은 Nanum Myeongjo 렌더
   블로킹 제거 덕분) — 해롭지 않아 유지만, 더 튜닝 안 함. Android/iOS 실측치와는 다름. */
@font-face{
  font-family:'Pretendard Fallback';
  src:local('Malgun Gothic'),local('Apple SD Gothic Neo'),local('Arial');
  size-adjust:86.4%;
  ascent-override:110.1%;
  descent-override:27.9%;
  line-gap-override:0%;
}

/* [R-7/S-8] Pretendard 자체 호스팅(서브셋, 웨이트당 약 780KB→42KB), tnum 명시 보존.
   5웨이트→3웨이트(400/600/700) 축소. [T-10] 800/500 자동매칭(합성 아님) 대신 실제
   렌더링 값(700/400)을 직접 선언 — 시각적 변화 없음(측정치 동일).
   [BB-2] 3웨이트→2웨이트(400/700). guard는 원래 "웹폰트 패밀리 수"(Pretendard 1종)로
   이 제약을 검사해왔고 3웨이트도 항상 통과했지만, 요청에 따라 SemiBold(600)를 제거해
   요청 1개·42KB를 줄인다 — 600을 쓰던 9곳은 시각적 역할에 맞춰 400 또는 700으로
   재배정(아래 각 규칙 주석 참고). */
@font-face{
  font-family:'Pretendard';font-style:normal;font-weight:400;font-display:swap;
  src:url('/assets/fonts/Pretendard-Regular.woff2') format('woff2');
}
@font-face{
  font-family:'Pretendard';font-style:normal;font-weight:700;font-display:swap;
  src:url('/assets/fonts/Pretendard-Bold.woff2') format('woff2');
}

:root{
  /* --- 색면(surface) --- */
  --paper:#F4F1EA;      /* 웜 오프화이트 */
  --ink:#1A1A17;        /* 웜 니어블랙 */
  --signal:#C7431A;     /* 버밀리언 */
  --signal-deep:#A5360F;

  /* --- 텍스트 --- */
  --tx:#1A1A17;         /* paper 위 본문 */
  --tx-soft:#4A4438;    /* paper 위 보조 (대비 8.5:1) */
  --tx-invert:#F4F1EA;  /* ink 위 본문 */
  --tx-invert-soft:#CFC7B6; /* ink 위 보조 (대비 10.4:1) */
  --on-signal:#FFFFFF;  /* 어두운 색면(signal·ink) 위 흰 텍스트 전용 — signal 위 4.95:1, ink 위는 사실상 최대치라 별도 토큰을 안 둠 */

  /* --- 괘선 --- */
  --rule:#1A1A17;
  --rule-soft:#BCB19A;
  --rule-invert:rgba(244,241,234,.30);

  /* --- 파생/상태 색(2026-09-11 가드[B] 위반 정리 시 추가) --- */
  --ink-rgb:26,26,23;         /* --ink 와 동일 값의 숫자 트리플릿. rgba(var(--ink-rgb), 알파) 형태로 반투명 틴트에 사용 */
  --surface-error:#FBEAE5;    /* 폼 에러 상태 배경 */
  --surface-active:#FFFFFF;   /* 체크박스 hover/checked 강조 배경 — paper(#F4F1EA)보다 밝은 별도 상태색, signal/ink 텍스트색과는 무관 */
  --surface-photo:#2A2A25;    /* 사례 전후사진 figure 배경(로딩 전/여백) — ink보다 살짝 밝은 중립 회색으로 사진 영역을 구분 */

  /* [J-1/J-2] .btn--ghost 인라인 테두리색 — 텍스트(--fg)는 항상 불투명이라 4.5:1 텍스트 기준과 무관하고,
     이 토큰은 테두리(비텍스트 UI 경계, WCAG 1.4.11)에만 쓰여 3:1 기준 적용. signal 배경 위 계산상
     .55=2.49:1·.6=2.71:1 둘 다 미달, .7=3.18:1 통과 확인(H-3/J-1, 실측). 텍스트 색으로는 쓰지 말 것. */
  --border-ghost-invert:rgba(255,255,255,.7);

  /* --- 타이포 --- */
  --sans:Pretendard,'Pretendard Fallback',-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;
  /* [O-8] --serif(Nanum Myeongjo) 토큰 삭제됨 — 사용처 0개 확인 후 선언·로드 모두 제거.
     번호 마커는 이제 전부 --mono 사용(O-1/O-4). */
  --mono:ui-monospace,SFMono-Regular,"SF Mono","Cascadia Mono","Roboto Mono",Menlo,Consolas,"D2Coding",monospace;

  /* 라틴/숫자 라벨에만 넓은 자간. 한글에는 절대 쓰지 않음 */
  --track-latin:.08em;

  /* 본문 이상 크기는 전부 clamp() 유동 스케일(고정 px 지양). 라벨류(.label, mono 라벨)는
     의도적으로 고정 — 위치·문맥에 상관없이 같은 "메타 정보" 크기로 읽혀야 하기 때문. */
  --fs-label:.8125rem;
  --fs-body:1rem;
  --fs-lead:clamp(1.0625rem,1rem + .3vw,1.1875rem);     /* 17→19 */
  --fs-h3:clamp(1.2rem,1.13rem + .3vw,1.375rem);        /* 19.2→22 */
  --fs-h2:clamp(1.6875rem,1.15rem + 2.4vw,2.125rem);    /* 27→34 */
  --fs-h1:clamp(2rem,1.3rem + 3vw,3rem);                /* 32→48 */
  --fs-hero:clamp(2rem,1.3rem + 3.4vw,3.375rem);   /* [T-1] 하한 34→32px, 900~1100px 좁은 칼럼에서 여유 확보. 32→54 */
  /* [O-1] --fs-numeral 삭제됨 — .principle__no(원칙 섹션, N-6에서 진행방식에 흡수)가
     쓰던 값인데 그 섹션 자체가 없어지며 사이트 전체에서 참조하는 곳이 0개가 됨(고아 토큰). */

  /* --- 간격 --- */
  --sp:8px;
  --gap:24px;
  --maxw:1200px;
  --pad-x:clamp(20px,5vw,64px);
  --sect-y:clamp(56px,8vw,104px);
  --header-h:66px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--tx);
  font-family:var(--sans);font-size:16px;line-height:1.7;font-weight:400;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
  word-break:keep-all;          /* 한글은 어절 단위로만 줄바꿈 */
  overflow-wrap:break-word;     /* 긴 URL·영문은 강제 줄바꿈 */
}
@media (min-width:768px){ body{font-size:17px} }

h1,h2,h3,h4{margin:0;font-weight:700;line-height:1.16;letter-spacing:-.022em;color:inherit}
p{margin:0}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}
ul,ol{margin:0;padding:0;list-style:none}
strong{font-weight:700}
/* 이중 링 포커스: paper·ink 겹쳐 어떤 색면 위에서도 최소 한쪽은 보임(3:1 실측 통과,
   signal bg에서도 4.39:1/3.53:1). outline은 고대비 모드에서 OS가 다시 칠해줌. */
:focus-visible{
  outline:2px solid var(--ink);
  outline-offset:2px;
  box-shadow:0 0 0 2px var(--paper);
}
/* [V-10] signal 허용 용도: ①히어로 견적 칼럼 배경 ②전화 CTA(.btn--tel/.hd__mobile-call/
   .mbar__btn--cta)뿐 — ::selection은 둘 다 아니라 ink로. .sect--signal은 히어로 전용 유지. */
::selection{background:var(--ink);color:var(--on-signal)}
.sect--signal,.mbar__btn--cta{background:var(--signal);color:var(--on-signal)}

/* ---------- 레이아웃 유틸 ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding-left:var(--pad-x);padding-right:var(--pad-x)}
.wrap--narrow{max-width:820px}

/* mono 라벨 — 위계는 크기·색·굵기로만. 한글이 섞이므로 자간 0 */
.label{font-family:var(--sans);font-size:var(--fs-label);font-weight:400;letter-spacing:0}
.latin{letter-spacing:var(--track-latin);text-transform:uppercase}  /* 순수 영문/숫자 전용 */

/* 섹션 색면 */
.sect{padding-top:var(--sect-y);padding-bottom:var(--sect-y)}
.sect--paper{background:var(--paper);color:var(--tx)}
.sect--ink{background:var(--ink);color:var(--tx-invert)}
/* [U-18] 허브의 ink 색면을 0으로 줄이면서(ink 는 index #process 1곳에만) 카테고리 교차
   리듬을 잃지 않도록 대신 2px 테두리로 구분한다 — 인접 섹션(cat-demo/cat-bath)엔 이 클래스가
   없어 위아래로 선이 겹쳐 보이는 이중선 문제가 생기지 않는다. */
.cat--framed{border-top:2px solid var(--rule);border-bottom:2px solid var(--rule)}

/* 섹션 헤더 */
.sect__top{border-top:2px solid currentColor;padding-top:calc(var(--sp)*2);
  display:grid;grid-template-columns:auto 1fr;gap:var(--gap);align-items:start;margin-bottom:calc(var(--sp)*5)}
.sect__idx{font-family:var(--sans);font-size:var(--fs-label);font-weight:400;letter-spacing:0;padding-top:4px;line-height:1.55}
/* 숫자만 분리(한글 라벨은 --sans 유지). [R-7] --mono(OS별로 다른 폰트) 대신 Pretendard+
   tabular-nums — 실측상 0~9 폭이 14.75px로 고정됨(미지원 시 10.5~15px 들쭉날쭉). */
.sect__idx-no{font-family:var(--sans);font-variant-numeric:tabular-nums;letter-spacing:var(--track-latin)}
/* [X-13] .sect__idx--solo 삭제 — 히어로의 "01" 단독 인덱스 표시가 V-6에서 완전히
   빠지면서(히어로는 번호 매기는 흐름 밖) 24개 페이지 어디서도 안 쓰는 죽은 CSS가 됐다. */
.sect__title h2{font-size:var(--fs-h2)}
.sect__title .sect__sub{margin-top:calc(var(--sp)*1.5);font-size:var(--fs-lead);max-width:36ch}
@media (max-width:600px){ .sect__top{grid-template-columns:1fr;gap:calc(var(--sp)*1.5)} }

/* ---------- 버튼 (각짐 · 섀도우 없음 · 대괄호 큐) ---------- */
.btn{
  --bg:var(--ink);--fg:var(--paper);--bd:var(--ink);
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:52px;padding:14px 24px;
  font-family:var(--sans);font-size:1.0625rem;font-weight:700;line-height:1;
  background:var(--bg);color:var(--fg);border:2px solid var(--bd);border-radius:0;
  cursor:pointer;transition:background .15s,color .15s,border-color .15s;
}
/* [V-10] 기본 버튼 hover signal-deep→ink (.btn--tel만 자체 :hover로 signal-deep 유지) */
.btn:hover{--bg:var(--ink);--bd:var(--ink);--fg:var(--paper)}
.btn--lg{min-height:58px;padding:17px 28px;font-size:1.125rem}
.btn--sm{min-height:44px;padding:9px 16px;font-size:.92rem}
.btn--tel{--bg:var(--signal);--fg:var(--on-signal);--bd:var(--signal)}
.btn--tel:hover{--bg:var(--signal-deep);--bd:var(--signal-deep)}
.btn--ghost{--bg:transparent;--fg:currentColor;--bd:currentColor}
.btn--ghost:hover{--bg:var(--ink);--fg:var(--paper);--bd:var(--ink)}
.sect--ink .btn--solid,.sect--signal .btn--solid,.ft .btn--solid{--bg:var(--paper);--fg:var(--ink);--bd:var(--paper)}
.btn__arrow{display:inline-block;transition:transform .15s ease-out}
.btn:hover .btn__arrow{transform:translateX(4px)}
.btn--bracket::before{content:"[";font-family:var(--mono);font-weight:400;margin-right:6px;transition:margin .15s}
.btn--bracket::after{content:"]";font-family:var(--mono);font-weight:400;margin-left:6px;transition:margin .15s}
.btn--bracket:hover::before{margin-right:10px}
.btn--bracket:hover::after{margin-left:10px}
.ic{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}

.skip-link{position:absolute;left:8px;top:8px;z-index:200;background:var(--ink);color:var(--on-signal);padding:10px 16px;transform:translateY(-160%);transition:transform .15s}
.skip-link:focus{transform:none}

/* 스크롤 진행 표시 — 순수 상태 신호(aria-hidden), scaleX 는 GPU 합성이라 리플로우 없음 */
.scrollbar{position:fixed;top:0;left:0;right:0;height:2px;z-index:100;background:transparent;pointer-events:none}
.scrollbar__fill{height:100%;width:100%;background:var(--ink);transform:scaleX(0);transform-origin:0 0}

/* =========================================================
   헤더
   ========================================================= */
.hd{position:sticky;top:0;z-index:50;background:var(--paper);border-bottom:1px solid var(--rule)}
.hd--stuck{border-bottom-width:2px}
.hd__inner{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad-x);min-height:var(--header-h);
  display:flex;align-items:center;gap:var(--gap)}
.hd__logo{display:flex;flex-direction:column;line-height:1.05;flex:none;padding:6px 0}
.hd__logo-name{font-weight:700;font-size:1.15rem;letter-spacing:-.02em}
.hd__logo-sub{font-family:var(--sans);font-size:.7rem;letter-spacing:0;color:var(--tx-soft);margin-top:3px}
.hd__nav{display:flex;gap:calc(var(--sp)*3.5);margin-left:auto;align-items:center}
.hd__nav a{font-size:.95rem;font-weight:400;padding:6px 0;border-bottom:2px solid transparent}
.hd__nav a:hover{border-bottom-color:var(--ink)}
.hd__nav-cta{font-family:var(--sans);font-weight:700;letter-spacing:0}
.hd__call{margin-left:calc(var(--sp)*2);flex:none;min-height:48px;padding:11px 16px;font-size:.98rem}
.hd__toggle{display:none;margin-left:auto;width:48px;height:48px;align-items:center;justify-content:center;background:var(--paper);border:1.5px solid var(--rule);cursor:pointer}
.hd__toggle svg{width:22px;height:22px;fill:none;stroke:var(--ink);stroke-width:2}
.hd__mobile{display:none;flex-direction:column;border-top:1px solid var(--rule)}
.hd__mobile a{padding:15px var(--pad-x);border-bottom:1px solid var(--rule-soft);font-weight:400}
.hd__mobile a:last-child{border-bottom:0}
.hd__mobile-call{background:var(--signal);color:var(--on-signal)!important}
/* [S-2] 768px 미만에서는 "전화 상담 " 접두어를 숨기고 번호만 — 모바일 메뉴 폭에서 줄바꿈/
   잘림 방지. aria-label 은 너비와 무관하게 항상 전체 문구(위 header.html 참고). */
@media (max-width:767px){ .hd__mobile-call-prefix{display:none} }
@media (max-width:940px){
  .hd__nav,.hd__call{display:none}
  .hd__toggle,.hd__mobile:not([hidden]){display:flex}
}

/* =========================================================
   히어로 — [S-1] 2단 재배치. ≥900px: 좌(paper, 텍스트) / 우(signal, 견적) 2칼럼.
   <900px: 1칼럼(배지→H1→안내문→견적, DOM 순서 그대로 쌓임). signal 은 우측 견적
   칼럼에만 적용(R-8 "페이지당 1개" 유지) — 좌측 텍스트는 계속 paper.
   ========================================================= */
.hero{border-bottom:2px solid var(--rule)}
.hero__grid{display:grid;grid-template-columns:1fr}
/* [T-1] 좌측 400px 최소 폭 — H1 어절 쪼개짐 방지(overflow-wrap:normal 과 함께).
   [X후속-E] signal 비율 축소로 좌측 컬럼 확대(H1 5줄·대표항목 뭉개짐 원인이었음) —
   1024~1279px 우측 ~57%, 1280px+ ~52%. */
@media (min-width:900px){ .hero__grid{grid-template-columns:minmax(400px,43fr) minmax(0,57fr)} }
@media (min-width:1280px){ .hero__grid{grid-template-columns:minmax(400px,48fr) minmax(0,52fr)} }

/* [Z-1] 왼쪽 padding이 뷰포트 폭 비례로 무한정 커지던 calc식 — border-box+56ch에서
   2200px+ 좌우 padding 합이 567px 넘어 content 0 붕괴(2560px 실측: H1 폭 0).
   1200px 미만은 이 식도 원래 var(--pad-x)와 같았으니(회귀 없음) 고정값으로. */
.hero__lead{background:var(--paper);color:var(--tx);max-width:56ch;
  padding:clamp(40px,7vw,72px) var(--pad-x) clamp(32px,6vw,56px) var(--pad-x)}
/* 지역 배지 — 좌상단(문서 흐름상 첫 요소=좌측 정렬로 배치, 별도 absolute 불필요) */
.hero__kicker{display:inline-block;font-family:var(--sans);font-size:var(--fs-label);font-weight:700;letter-spacing:0;
  color:var(--tx-soft);border:1px solid var(--rule);padding:6px 12px;margin:0 0 calc(var(--sp)*2.5)}
/* [T-1] 전역 overflow-wrap:break-word(긴 URL/영문 강제 줄바꿈용)가 word-break:keep-all
   보다 우선 적용돼 어절이 좁은 칼럼에 안 맞으면 글자 단위로 쪼개지던 버그 — H1 에서만
   overflow-wrap:normal 로 되돌려 어절 경계에서만 끊기게 한다(글자 안 쪼개짐 보장,
   대신 극단적으로 좁으면 칼럼을 넘칠 수 있음 — 위 hero__grid 최소폭으로 방지). */
.hero__title{font-size:var(--fs-hero);color:var(--tx);letter-spacing:-.03em;line-height:1.12;
  word-break:keep-all;overflow-wrap:normal;hyphens:none}
.hero__title span{display:block}
/* [X-8] 잘림 재현 안 됨(900~1024px 실측, 클리핑 없음) — .hero__title과 같은 안전장치만 추가 */
.hero__reassure{font-family:var(--sans);font-size:.82rem;letter-spacing:0;color:var(--tx-soft);line-height:1.7;
  margin-top:calc(var(--sp)*2.5);word-break:keep-all;overflow-wrap:normal}

/* [X-5→X후속-C] 대표 항목 6개 — 새 색상·radius·그림자 없음, 48px 터치·1rem 텍스트,
   900px 미만 숨김. 900~1279px는 컬럼폭이 좁아(400px 최소폭) 2단이면 글자가
   흐트러져 1단 유지, 1280px 이상만 2단. */
.hero__featured{display:none}
@media (min-width:900px){
  .hero__featured{display:grid;grid-template-columns:1fr;gap:8px;margin-top:calc(var(--sp)*3);max-width:56ch}
}
@media (min-width:1280px){
  .hero__featured{grid-template-columns:1fr 1fr}
}
.hero__featured-link{display:flex;align-items:center;min-height:48px;padding:10px 14px;
  border:1px solid var(--rule);font-size:1rem;color:var(--tx);text-decoration:none;
  word-break:keep-all;overflow-wrap:normal}
.hero__featured-link:hover,.hero__featured-link:focus-visible{border-color:var(--ink);text-decoration:underline}
.hero__reassure a{color:var(--tx);text-decoration:underline;text-underline-offset:3px}

/* [S-1] 우측 견적 칼럼 — signal 배경, 괘선 재도입 안 함(색 경계 자체가 구획선).
   [BB-2 부수 발견] Z-1과 동일한 무한증가 calc식이 오른쪽 padding에 남아있어 2560px에서
   744px까지 커짐 — max-width가 없어 0 붕괴는 아니지만 카드가 좌측으로 쏠리는 비대칭
   발생(스크린샷 확인). 1200px 미만은 원래도 var(--pad-x)와 같아 회귀 없음. */
.hero__quote-col{background:var(--signal);color:var(--on-signal);
  padding:clamp(32px,6vw,56px) var(--pad-x) clamp(40px,6vw,64px) var(--pad-x)}

/* =========================================================
   [S-3] 시공 항목 탭 4개 — 사이트1의 알약형·파란 탭 대신 1px 사각 탭 + ink/paper 반전.
   활성 탭은 색만으로 구분하지 않고 굵기(font-weight)도 같이 바꿔 색맹 사용자도 구분 가능.
   ========================================================= */
.stabs__list{display:flex;flex-wrap:wrap;border:1px solid var(--rule);margin-bottom:calc(var(--sp)*2)}
.stabs__list [role="tab"]{flex:1 1 auto;min-width:120px;min-height:48px;padding:12px 14px;
  font:inherit;font-size:.92rem;font-weight:400;color:var(--tx-soft);
  background:var(--paper);border:0;border-right:1px solid var(--rule);cursor:pointer}
.stabs__list [role="tab"]:last-child,.mbar__btn:last-child{border-right:0}
.stabs__list [role="tab"][aria-selected="true"]{background:var(--ink);color:var(--paper);font-weight:700}

/* [T-4] "02" 섹션 전용 여백 축소 — 카드를 가로형으로 바꿔도 상하 여백(--sect-y, 전 섹션
   공통 리듬 토큰)까지 합치면 900px 예산을 못 맞춰서, #services 하나에만 국한해 --sect-y와
   헤더 하단 여백을 줄인다(다른 섹션의 리듬은 그대로 유지 — O-1에서 통일한 값을 사이트
   전역에서 바꾸는 게 아니라 이 섹션만의 스코프 예외임을 명시). 그래도 정확히 900px에는
   못 미쳐 실측치를 있는 그대로 보고한다(본문 참고). */
#services{--sect-y:clamp(28px,3vw,40px)}
#services .sect__top{margin-bottom:calc(var(--sp)*2)}
.qfield{margin-bottom:calc(var(--sp)*1.25)}
/* [X-4→X후속-A] 지역·시공 항목 2단 배치. min-width:1024px였는데 실제 창은 세로
   스크롤바만큼(~15px) 좁게 판정돼 1024px 창에서 2단이 안 걸렸다(실측 확인) —
   스크롤바 폭만큼 여유를 두고 1000px로 낮췄다. */
.qfield-row{margin-bottom:calc(var(--sp)*1.25)}
.qfield-row .qfield{margin-bottom:0}
@media (min-width:1000px){
  .qfield-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap)}
}

/* [R-5→T-4] 시공 항목 카드 — 1px 괘선 격자, radius/그림자/파란 강조 없음.
   [T-4] 1280px에서 "02" 섹션 전체를 900px 이내에 넣기 위해 세로 카드(사진 위/본문 아래) 대신
   가로 카드(사진 좌 200px 고정/본문 우)로 바꿨다 — 카드 1개당 목표 높이 ~170px, 최대 카테고리
   (주방 6개) 기준 2열×3행=510px로 예산(≤540px) 안에 들어온다. <768px는 폭이 좁아 사진을
   가로로 욱여넣으면 사진이 너무 작아지므로 기존 세로 배치(사진 위 전체폭)를 유지한다. */
.service-cards{display:grid;grid-template-columns:1fr;gap:1px;background:var(--rule-soft);
  border-top:2px solid var(--rule)}
/* [U-2] 탭마다 항목 수(5/6/3/2)가 달라 패널 높이가 최대 300px 넘게 들쭉날쭉해 탭 전환 시
   레이아웃이 튀는 문제 — 항목이 가장 많은 패널(주방 6개) 기준 높이를 min-height 로 고정한다.
   <768px(세로 카드, 폭이 좁아 항목당 실사용 공간이 더 필요)에서는 값이 안 맞아 자연 높이로 둔다. */
@media (min-width:768px) and (max-width:1023px){ .service-cards{min-height:933px} }
@media (min-width:1024px){
  .service-cards{grid-template-columns:1fr 1fr;min-height:467px}
}
.service-card{background:var(--paper);display:flex;flex-direction:column}
.service-card__body{padding:calc(var(--sp)*1.5) calc(var(--sp)*2.5) calc(var(--sp)*1.25)}
.service-card__body h3{font-size:1.1rem;margin-bottom:calc(var(--sp)*.75)}
.service-card__note{font-size:.92rem;color:var(--tx-soft);margin:calc(var(--sp)*.75) 0 calc(var(--sp)*1);line-height:1.5}
/* [U-3] .btn--sm 은 min-height 44px 라 48×48 터치 타깃 기준에 못 미친다 — 카드의 견적 버튼은
   여기서 48px 로 못박아 전역 .btn--sm 값을 따르지 않게 한다(사전 발견, 압축과 무관하게 필수 수정). */
.service-card .btn{width:100%;justify-content:center;min-height:48px}
@media (min-width:768px){
  .service-card{flex-direction:row}
  .service-card .case-toggle{flex:0 0 180px;width:180px;border-right:0;border-top:0;border-bottom:0}
  .service-card .case-toggle__label{min-height:0;padding:1px 8px;font-size:.76rem}
  .service-card__body{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;
    padding:calc(var(--sp)*.75) calc(var(--sp)*2.25);border-left:1px solid var(--rule-soft)}
  .service-card__body h3{font-size:1rem;margin-bottom:3px}
  .service-card__note{margin:2px 0 calc(var(--sp)*.75);font-size:.85rem;display:-webkit-box;
    -webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .service-card .btn{width:auto;align-self:flex-start;min-height:48px;padding:6px 16px}
}

/* [S-4] 전후 전환 — 기본은 시공 후. hover 가능 기기(마우스)는 :hover 로, 그 외(터치·키보드)는
   버튼 클릭(aria-pressed 토글)으로 시공 전을 보여준다. 사진 두 장 모두 항상 DOM에 있고
   프레임 안에 절대배치로 겹쳐 opacity 만 바뀌므로 전환 시 레이아웃 이동이 없다(CLS 0,
   placeholder 상태에서도 동일하게 동작). R-1① 배지-캡션 겹침 버그는 이 구조에 겹침
   배지 자체가 없어(라벨은 사진 "아래" 별도 줄) 재발 구조가 아니다. */
.case-toggle{display:block;width:100%;padding:0;border:1px solid var(--rule);background:var(--paper);
  cursor:pointer;text-align:left;border-radius:0}
.case-toggle__frame{display:block;position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--surface-photo)}
.case-toggle__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;opacity:0;transition:opacity .15s ease}
.case-toggle__img[data-state="after"],
.case-toggle[aria-pressed="true"] .case-toggle__img[data-state="before"]{opacity:1}
.case-toggle[aria-pressed="true"] .case-toggle__img[data-state="after"]{opacity:0}
@media (hover:hover) and (pointer:fine){
  .case-toggle:hover .case-toggle__img[data-state="before"]{opacity:1}
  .case-toggle:hover .case-toggle__img[data-state="after"]{opacity:0}
}
.case-toggle__label{display:flex;align-items:center;min-height:48px;padding:0 10px;
  font-size:.82rem;font-weight:700;color:var(--tx-soft)}
.case-toggle[aria-pressed="true"] .case-toggle__label{color:var(--ink)}
/* 라벨 문구 4종(터치×hover / 시공전×시공후) — JS 문구 분기 없이 CSS만으로 선택.
   기본(터치, 미디어쿼리 밖)은 lbl--touch 만 노출, hover 가능 기기에서는 lbl--hover 만. */
.lbl,.service-cards[hidden],.qmore summary::-webkit-details-marker,
.faq__item summary::-webkit-details-marker,.sheet[hidden]{display:none}
.case-toggle:not([aria-pressed="true"]) .lbl--touch.lbl--after{display:inline}
.case-toggle[aria-pressed="true"] .lbl--touch.lbl--before{display:inline}
@media (hover:hover) and (pointer:fine){
  .lbl--touch{display:none!important}
  .case-toggle:not([aria-pressed="true"]) .lbl--hover.lbl--after{display:inline}
  .case-toggle[aria-pressed="true"] .lbl--hover.lbl--before{display:inline}
}

/* =========================================================
   시공 분야 — 스펙 리스트 (/services/ 허브 전용, 비대화형)
   [T-8] R-5에서 시공 항목 아코디언(.spec-item/.spec-row__btn/.spec-panel*,
   app.js의 window.openSpecItem 포함)을 제거하면서 CSS 쪽만 안 지워지고 남아있던 걸
   확인해(src/ 어디서도 미사용) 전부 지웠다 — 남은 건 허브가 실제로 쓰는
   .spec-row-static 계열뿐. */
.spec-list,.faq{border-top:2px solid var(--rule)}
.spec-list__more{margin-top:calc(var(--sp)*1);text-align:right}
.spec-list__more-link{font-weight:700;font-size:1rem;border-bottom:2px solid var(--ink);padding-bottom:2px}
.faq__item{border-bottom:1px solid var(--rule-soft)}
.spec-row__name{font-size:1.15rem;font-weight:700;letter-spacing:-.02em}
.spec-row__check{font-size:.96rem;color:var(--tx-soft);line-height:1.55;font-weight:400}
.spec-row__time{font-family:var(--sans);font-size:.88rem;font-weight:400;text-align:right;white-space:nowrap;color:var(--tx-soft)}
/* [Y-3] 16개 항목 전부에 개별 상세 페이지 링크 — grid-column:1/-1로 데스크톱 4열·
   900px 이하 2열 레이아웃 둘 다에서 손대지 않고 맨 아래 새 줄로 걸침. */
.spec-row__link{grid-column:1/-1;margin-top:8px;display:inline-flex;align-items:center;
  min-height:48px;font-size:1rem;font-weight:700;color:var(--ink);text-decoration:none;
  border-bottom:1px solid transparent;width:fit-content}
.spec-row__link:hover,.spec-row__link:focus-visible{border-bottom-color:var(--ink)}
/* [Y-3] 지역↔시공 항목 상호 링크 목록(area/item 템플릿 공용). 새 색상 없음, 48px 터치. */
.link-list{margin-top:calc(var(--sp)*4);display:flex;flex-wrap:wrap;gap:4px 20px}
.link-list h2{flex-basis:100%;margin:0 0 4px}
.link-list a{display:inline-flex;align-items:center;min-height:48px;font-size:1rem;
  color:var(--ink);text-decoration:underline;text-underline-offset:2px}
/* [V-10→W-7] hero__accent를 ink로 내렸다가(강조 효과 소실 보고) W-7에서 복원 — signal의
   허용 용도를 "①히어로 견적 칼럼 배경 ②전화 CTA ③히어로 H1 강조 텍스트 1곳"으로
   재정의했다(그 외는 여전히 ink, docs/migration-plan.md §20). */
.hero__title .hero__accent{color:var(--signal)}
.spec-list__more-link:hover{color:var(--ink)}

@media (max-width:900px){
  .spec-row-static{grid-template-columns:2.5rem 1fr;column-gap:14px;row-gap:6px;padding:calc(var(--sp)*2.75) 30px calc(var(--sp)*2.75) 0}
  .spec-row-static .spec-row__no{grid-column:1;grid-row:1}
  .spec-row-static .spec-row__name{grid-column:2;grid-row:1}
  .spec-row-static .spec-row__check{grid-column:2;grid-row:2}
  .spec-row-static .spec-row__time{grid-column:2;grid-row:3;text-align:left;white-space:normal}
  .spec-row-static .spec-row__check::before{content:"확인  ";font-family:var(--sans);font-size:.82em;color:var(--tx-soft)}
  .spec-row-static .spec-row__time::before{content:"소요  "}
}

/* 서비스 허브 전용 비대화형(아코디언 아님) 스펙 행 — 여기는 16개 전체를 실제 순서대로
   보여주므로 번호(spec-row__no)가 진짜 순서를 나타냄 → [O-4]에 따라 그대로 유지.
   [O-4] 번호 타이포를 나눔명조(--serif)에서 --mono 로 통일(사례 카드 번호·타임라인
   번호와 같은 체계로 맞춤 — O-1 참고). */
.spec-row-static{
  display:grid;width:100%;
  grid-template-columns:2.75rem minmax(0,1fr) minmax(0,1.5fr) max-content;
  column-gap:20px;row-gap:2px;align-items:baseline;
  padding:calc(var(--sp)*3) 0;border-bottom:1px solid var(--rule-soft);
  scroll-margin-top:calc(var(--header-h) + 16px); /* #앵커로 점프 시 헤더에 안 가리게 */
}
/* [R-7] --mono(시스템 폰트) 대신 Pretendard+tabular-nums — 위 sect__idx-no 와 동일 근거 */
.spec-row-static .spec-row__no{font-family:var(--sans);font-variant-numeric:tabular-nums;letter-spacing:var(--track-latin);font-size:1.15rem;font-weight:700;color:var(--tx-soft)}

/* 서비스 허브 축소 히어로(subhero) — 메인 히어로의 축소 변주. paper 배경.
   [R-8→V-10] 예전엔 "signal 페이지당 1개"라 finalcta 가 그 자리라 paper 였음. 지금은
   signal 자체가 더 좁게 재정의(§20)돼 근거는 바뀌었지만 장식 목적 색면 추가는 여전히
   금지라 그대로 paper 유지. */
.subhero{background:var(--paper);color:var(--tx);border-bottom:2px solid var(--rule)}
.subhero__in{padding-top:clamp(48px,7vw,88px);padding-bottom:clamp(48px,7vw,88px);
  display:flex;flex-wrap:wrap;gap:calc(var(--sp)*6);justify-content:space-between;align-items:flex-end}
.subhero__lead{max-width:34ch}
.subhero__kicker{font-size:var(--fs-label);font-weight:700;margin-bottom:calc(var(--sp)*2);color:var(--tx-soft)}
.subhero__title{font-size:var(--fs-h1);color:var(--tx)}
.subhero__sub{margin-top:calc(var(--sp)*2);font-size:1.05rem;color:var(--tx-soft)}
.subhero__jump{display:flex;flex-direction:column;gap:calc(var(--sp)*1.5);flex:none}
.subhero__jump a{font-weight:700;font-size:1rem;border-bottom:2px solid transparent;color:var(--tx)}
.subhero__jump a:hover{border-bottom-color:var(--ink);color:var(--ink)}
/* [R-7] --mono(시스템 폰트) 대신 Pretendard+tabular-nums — sect__idx-no 와 동일 근거.
   기본 .latin 유틸리티(줄 122)는 대문자 변환용 범용 클래스라 안 건드리고, 숫자로만
   쓰이는 이 조합(.subhero__jump .latin, 01~04 카테고리 점프 링크)만 범위를 좁혀 적용. */
.subhero__jump .latin{font-family:var(--sans);font-variant-numeric:tabular-nums;letter-spacing:var(--track-latin);margin-right:6px;opacity:.85}

/* [R-5] 사례 섹션(.cases/.case/.case__*, O/N단계에서 쓰던 2×2 그리드) 폐지 — 시공 항목
   카드(.service-cards/.case-toggle, 위쪽 참고)로 흡수돼 이 규칙들은 더 이상 쓰이지 않아
   삭제함(죽은 CSS 방지, R-10 용량 절감에도 기여). flags.casesHubLive 가 나중에 켜지고
   실제 /cases/ 허브를 새로 만들 때는 git 이력(O단계 커밋 이전)에서 이 블록을 되살리거나
   .service-cards 패턴을 재사용하면 된다. */

/* =========================================================
   절차 — 줄자 타임라인
   ========================================================= */
.ruler{border-top:2px solid var(--rule);padding-top:calc(var(--sp)*3);
  display:grid;grid-template-columns:repeat(5,1fr);gap:0}
.ruler__step{position:relative;padding:calc(var(--sp)*5) var(--sp) 0;border-left:1px solid var(--rule-soft)}
.ruler__step:first-child{border-left:0}
.ruler__step::before{content:"";position:absolute;left:-1px;top:0;width:1px;height:calc(var(--sp)*3);background:var(--rule)}
.ruler__step::after{content:"";position:absolute;left:0;right:0;top:calc(var(--sp)*3);height:2px;background:var(--rule)}
.ruler__tick{position:absolute;top:calc(var(--sp)*3 - 3px);left:-4px;width:8px;height:8px;background:var(--ink)}
/* [R-7] --mono(시스템 폰트) 대신 Pretendard+tabular-nums — sect__idx-no 와 동일 근거 */
.ruler__n{font-family:var(--sans);font-variant-numeric:tabular-nums;font-size:.8rem;letter-spacing:var(--track-latin);color:var(--tx-soft)}
.ruler__step h3{font-size:1.05rem;margin:6px 0}
.ruler__step p{font-size:1rem;color:var(--tx-soft);line-height:1.5}
/* [O-3] 이전엔 여기서 세로 괘선(border-left 2px)으로 타임라인 축을 표현했는데, 360px에서
   세로 구분선을 금지하는 지시에 따라 다른 목록(시공 항목·FAQ·푸터)과 같은 가로 1px 구분선
   방식으로 바꿨다. 틱 닷은 절대좌표 대신 번호 앞에 인라인으로 붙여 같은 "1px 선 + signal
   틱" 조합을 세로선 없이 유지한다. */
@media (max-width:820px){
  .ruler{grid-template-columns:1fr;border-top:0}
  .ruler__step{border-left:0;padding:calc(var(--sp)*3) 0;border-bottom:1px solid var(--rule-soft)}
  .ruler__step:last-child{border-bottom:0}
  .ruler__step::before,.ruler__step::after{content:none}
  .ruler__tick{position:static;display:inline-block;width:8px;height:8px;margin-right:8px;vertical-align:middle}
}
/* [T-3] #process 를 ink 색면으로 반전 — var(--rule)은 ink 색과 같아 배경 위에서 사라지므로
   줄자의 가로선·짧은 세로 틱만 --paper 로, 보조 텍스트(번호·본문)는 --tx-invert-soft 로 교체.
   --rule-soft(세로/가로 얇은 선)는 ink 위에서도 7.5:1로 그대로 통과해 변경 불필요. */
.sect--ink .ruler{border-top-color:var(--paper)}
.sect--ink .ruler__step::before,.sect--ink .ruler__step::after{background:var(--paper)}
/* [V-10] ruler__tick signal→ink인데 #process 자체가 ink 배경이라 안 보임 — 형제 규칙처럼 뒤집음 */
.sect--ink .ruler__tick{background:var(--paper)}
.sect--ink .ruler__n,.sect--ink .ruler__step p{color:var(--tx-invert-soft)}

/* [X-13] .band/.band__in/.band__text/.band__cta("중간 CTA 밴드") 삭제 — src/ 어디서도
   쓰이지 않는 죽은 CSS였다(grep 확인, T-8의 .area-row 삭제와 같은 종류). X-4/X-5로
   늘어난 CSS 용량을 상한 인상 없이 확보하기 위한 정리(지시사항: 병합·삭제 먼저). */

/* [T-8] "출동 지역" 섹션(.area-row 등)은 O-6에서 본문 삭제된 뒤 CSS만 죽은 채 남아 있던
   것을 확인해 지웠다(src/ 어디서도 쓰이지 않음, grep 확인) — 향후 /areas/ 페이지(T-7 §19
   문서화)는 실제로 만들 때 새로 설계한다. */

/* =========================================================
   견적 폼 — [N-4] 3필드 축약형(연락처/지역/시공 항목) + 동의 + 버튼 1개.
   기존 3단계 위저드의 나머지 필드(성함·주거형태·희망시기·상세상황·연락방법·사진)는
   삭제하지 않고 .qmore <details> 접기 안에 "선택 정보"로 보존 — 데이터 수집 능력은
   그대로 두되, 기본 노출 시 보이는 입력은 정확히 3개+버튼 1개가 되도록 함.
   ========================================================= */
/* [X-4] 카드 높이 축소: padding·전화버튼(HTML)·intro/qfield/qconsent/qsubmit 간격 절감폭은
   docs/migration-plan.md 표 참고. */
.quote{background:var(--paper);color:var(--tx);padding:clamp(20px,4vw,24px);border:2px solid var(--ink)}
.quote a:not(.btn){color:var(--ink);text-decoration:underline;text-underline-offset:2px}
.quote .btn{text-decoration:none}
.quote__intro h2{font-size:var(--fs-h2);margin-bottom:calc(var(--sp)*1)}
.quote__intro p{color:var(--tx-soft);margin-bottom:calc(var(--sp)*1)}
.quote__intro strong{color:var(--tx)}
.qhint{font-size:.88rem;color:var(--tx-soft);margin:0 0 calc(var(--sp)*1)}

.qform__hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.qstep__err{color:var(--ink);font-size:.9rem;font-weight:700;margin:calc(var(--sp)*1) 0 0}

/* [N-4] 밑줄 입력 → 1px 테두리 박스. min-height 48px 로 터치 타깃 확보(패딩+테두리 포함). */
.qfield>label{display:block;font-family:var(--sans);font-size:.82rem;letter-spacing:0;font-weight:400;margin-bottom:8px;color:var(--tx-soft)}
.qfield input[type=text],.qfield input[type=tel],.qfield select,.qfield textarea{
  width:100%;min-height:48px;padding:12px 14px;font:inherit;font-size:1rem;color:var(--tx);
  background:var(--paper);border:1px solid var(--rule);border-radius:0;box-sizing:border-box;
  transition:border-color .15s ease}
.qfield textarea{min-height:88px;resize:vertical}
.qfield__note{font-size:.88rem;color:var(--tx-soft);margin:8px 0 0}
/* [V-10] blur 검증: 통과=signal/오류=signal-deep 두 색 구분 → ink로 통일(aria-invalid +
   .qstep__err 텍스트로 여전히 구분 가능, 색만으로 구분하던 게 아니라 정보 손실 아님) */
.qfield input:focus,.qfield select:focus,.qfield textarea:focus,
.qfield input[data-valid="true"],.qfield select[data-valid="true"],
.case-toggle:focus-visible{border-color:var(--ink)}
.qfield input[aria-invalid="true"],.qfield select[aria-invalid="true"]{border-color:var(--ink)}
/* [V-4] 파일 선택 버튼은 검증 상태(맞다/틀리다)가 없는 그냥 버튼이라 signal/signal-deep
   의미가 애초에 안 맞았다 — V-9 재정의(signal은 히어로 견적 칼럼·전화 CTA 전용)에 맞춰
   ink 계열 1px 테두리로 변경. */
.qfield > .qfile-label:hover,.qfield > .qfile-label:focus-visible{border-color:var(--ink)}

/* [X-13] .qradio(*) 삭제 — V-2에서 폼을 3필드로 줄이며 라디오 그룹 필드 자체가 없어져
   src/ 어디서도 안 쓰는 죽은 CSS였다(grep 확인). */

.qconsent{display:flex;gap:10px;align-items:flex-start;font-size:.95rem;margin:calc(var(--sp)*1) 0 0}
.qconsent input{width:20px;height:20px;flex:none;margin-top:3px;accent-color:var(--ink)}

/* [N-4] 수집 항목·목적을 담은 한 줄 고지 — /privacy/ 실제 문구와 일치, 보유기간은 아직
   [보유기간 예: 1년] 상태(미확정 대괄호)라 숫자를 지어내지 않고 방침 페이지로 안내함 */
.qnotice{font-size:.82rem;color:var(--tx-soft);margin:calc(var(--sp)*2) 0 0;line-height:1.6}
.qconsent a,.qnotice a,.ft__legal a{border-bottom:1px solid currentColor}

.req{font-family:var(--sans);color:var(--ink);font-size:.72rem;font-weight:700;letter-spacing:0}
.opt{font-family:var(--sans);color:var(--tx-soft);font-size:.72rem;letter-spacing:0;margin-left:5px}

.qsubmit{margin-top:calc(var(--sp)*1.5)}
.qsubmit .btn{width:100%;justify-content:center;min-height:52px}
/* [R-4] flags.quoteFormLive=false 대체 블록의 전화 버튼 — 실제 제출 버튼과 같은 자리·너비 */
.qsubmit__tel{width:100%;justify-content:center;min-height:52px;margin-top:calc(var(--sp)*3)}

/* 선택 정보(성함·주거형태·희망시기·상세상황·연락방법·사진) 접기 */
.qmore{border:1px solid var(--rule);margin-top:calc(var(--sp)*1)}
.qmore summary{list-style:none;cursor:pointer;min-height:48px;display:flex;align-items:center;
  padding:0 16px;font-weight:700;font-size:.95rem}
.qmore summary::after{content:"+";margin-left:auto;font-family:var(--mono);font-size:1.05rem;color:var(--ink)}
.qmore[open] summary::after{content:"–"}
.qmore__body{padding:calc(var(--sp)*3) 16px 4px}

/* [T-2/U-10] 현장 사진 첨부 — 네이티브 file input은 브라우저마다 스타일 편차가 커서
   시각적으로 숨기고 라벨을 버튼처럼 스타일링(label의 for 연결로 클릭하면 그대로 파일
   선택창이 뜸, JS 불필요). ".qfield > label"(색 tx-soft) 보다 우선하도록
   ".qfield > .qfile-label" 형태로 특정도를 높여 어긋나지 않게 함. */
.qfield > .qfile-label{display:inline-flex;align-items:center;justify-content:center;
  min-height:48px;padding:10px 18px;border:1px solid var(--rule);background:var(--paper);
  color:var(--tx);font-weight:700;font-size:.95rem;cursor:pointer}
.qfile-input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* [U-10] 선택한 사진 목록 — 썸네일 없이 파일명·용량 텍스트 + 삭제 버튼(48px 타깃)만.
   min-height 는 빈 상태(0장)에서도 높이를 예약해 첫 장 추가 시 레이아웃이 크게
   튀지 않도록 한다(0장→3장 실제 변화량은 U-20 실측 참고 — 파일선택은 사용자 입력
   직후라 CLS 계산에서 대부분 제외되지만, 완전히 없애기 위해 최소 폭을 둔다). */
.qphoto-list{margin-top:8px;min-height:1px}
.qphoto-item{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:8px 10px;border:1px solid var(--rule-soft);margin-top:-1px;font-size:.88rem;color:var(--tx-soft)}
.qphoto-item__name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.qphoto-item__del{flex:none;min-width:48px;min-height:48px;padding:4px 12px;border:1px solid var(--rule);
  background:var(--paper);color:var(--tx);font-size:.82rem;cursor:pointer}
.qphoto-item__del:focus-visible{border-color:var(--ink)}

.qstatus{margin-top:calc(var(--sp)*4);padding:calc(var(--sp)*3);font-weight:700;border:2px solid var(--ink)}
.qstatus--sending{border-color:var(--tx-soft)}
.qstatus--ok{border-color:var(--ink);border-left-width:6px}
.qstatus--err{border-color:var(--ink);border-left-width:6px;background:var(--surface-error)}
.qstatus .btn{margin-top:calc(var(--sp)*2)}

/* =========================================================
   FAQ
   ========================================================= */
.faq__item summary{list-style:none;cursor:pointer;padding:calc(var(--sp)*2.5) 44px calc(var(--sp)*2.5) 0;
  font-weight:700;font-size:1.05rem;position:relative}
.faq__item summary::after{
  content:"+";position:absolute;right:6px;top:50%;transform:translateY(-50%);
  font-family:var(--mono);font-size:1.3rem;font-weight:400;color:var(--ink);line-height:1;
}
.faq__item[open] summary::after{content:"–"}
.faq__a{padding:0 0 calc(var(--sp)*3)}
.faq__a p{color:var(--tx-soft)}

/* =========================================================
   최종 CTA
   ========================================================= */
/* [R-8/S-1→V-10] 예전엔 견적 영역 없는 페이지에서 .finalcta 가 signal 자리였다. [V-10]
   signal 허용 용도를 히어로 견적 칼럼+전화 CTA로 좁히면서 섹션 배경은 ink 로 바꾸고,
   안의 전화 상담 버튼만 btn--tel(전화 CTA)로 남겨 signal 1군데는 유지. 글자색은 하드코딩
   대신 부모(.sect--ink) 색 상속으로 index(hero)/나머지(ink) 양쪽에 다 맞춘다. */
.finalcta{text-align:left}
.finalcta h2{font-size:var(--fs-h1);max-width:18ch;margin-bottom:calc(var(--sp)*4)}
.finalcta__row{display:flex;flex-wrap:wrap;gap:calc(var(--sp)*1.5);align-items:center}

/* =========================================================
   푸터 (ink)
   ========================================================= */
.ft{background:var(--ink);color:var(--tx-invert);padding:var(--sect-y) 0 calc(var(--sect-y) + 76px)}
.ft__inner{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad-x);
  display:grid;gap:calc(var(--sp)*5);grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  border-top:2px solid var(--rule-invert);padding-top:calc(var(--sp)*5)}
.ft__name{font-weight:700;font-size:1.2rem;display:block;margin-bottom:calc(var(--sp)*2)}
.ft__brand p{font-size:.88rem;color:var(--tx-invert-soft);margin-bottom:6px}
.ft__call{margin:calc(var(--sp)*2) 0}
.finalcta__note,.ft__channels{font-family:var(--sans);font-size:.82rem;letter-spacing:0}
.ft__h{font-family:var(--sans);font-size:.8rem;letter-spacing:0;color:var(--tx-invert-soft);margin-bottom:calc(var(--sp)*1.5)}
.ft__col a{display:block;padding:6px 0;font-size:.92rem;border-bottom:1px solid var(--rule-invert)}
.ft__col a:hover{color:var(--on-signal)}
/* [U-7 부수 발견] 위 .ft__col a{display:block} 이 .ft__channels 안 링크에도 적용돼
   " · "로 이어붙인 채널 목록이 한 줄씩 쪼개지고 가운뎃점만 혼자 남는 버그가 있었다 —
   동일 명시도(class+요소)라 소스 순서상 나중에 오는 이 규칙으로 되돌린다. */
.ft__channels a{display:inline;border-bottom:1px solid var(--rule-invert)}
.ft__legal{max-width:var(--maxw);margin:calc(var(--sp)*5) auto 0;padding:calc(var(--sp)*3) var(--pad-x) 0;
  border-top:1px solid var(--rule-invert);font-family:var(--sans);font-size:.78rem;letter-spacing:0;color:var(--tx-invert-soft)}
.ft__legal p{margin-bottom:5px}
@media (max-width:940px){ .ft{padding-bottom:calc(var(--sect-y) + 78px)} }

/* =========================================================
   모바일 하단 바 + 톡 시트
   ========================================================= */
/* [S-6] 스크롤 위치 표시 — 장식 금지(O-3) 예외: 현재 위치 "정보"라 허용, 색면·그림자·
   그라데이션 없이 텍스트+1px 테두리만. 1280px 미만은 전부 숨김(360px 숨김 요건 +
   940px 이하 고정 하단바(mbar)와 안 겹치게). scroll 리스너 대신 IntersectionObserver로
   갱신(app.js) — 값이 바뀔 뿐 이동 애니메이션은 없음. */
/* [X-7] top:50% 고정이 히어로 견적 칼럼과 겹쳐 보였다(1280px+, pointer-events:none이라
   클릭 차단은 없었음) — 화면 하단 우측 고정으로 바꿔 겹칠 폭 자체를 없앴다. */
.scrollpos{display:none;position:fixed;right:calc(var(--sp)*3);bottom:calc(var(--sp)*3);
  z-index:40;margin:0;padding:8px 12px;background:var(--paper);border:1px solid var(--rule);
  pointer-events:none}
.scrollpos__no{font-family:var(--sans);font-variant-numeric:tabular-nums;font-size:.85rem;
  letter-spacing:var(--track-latin);color:var(--tx-soft)}
@media (min-width:1280px){ .scrollpos{display:block} }
.scrollpos:has(.scrollpos__no:empty){display:none} /* [V-6] 히어로 구간(번호 없음)에서는 빈 테두리 박스가 안 보이게 */

/* [V-10] 위 테두리 signal→ink 는 배경(이미 ink)과 같아져 안 보임 — 푸터와 같은
   ink-위-테두리 토큰(--rule-invert)으로 맞춤 */
.mbar{position:fixed;left:0;right:0;bottom:0;z-index:60;display:none;
  grid-template-columns:1fr 1fr 1.2fr;background:var(--ink);border-top:2px solid var(--rule-invert);
  padding-bottom:env(safe-area-inset-bottom)}
.mbar__btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  min-height:56px;padding:6px;border:0;background:transparent;color:var(--paper);
  font-family:var(--sans);font-size:.74rem;letter-spacing:0;text-decoration:none;cursor:pointer;
  border-right:1px solid var(--rule-invert)}
.mbar__btn .ic{width:19px;height:19px;stroke:var(--paper)}
.mbar__btn--cta .ic{stroke:var(--on-signal)}
@media (max-width:940px){ .mbar{display:grid} }

.sheet{position:fixed;inset:0;z-index:70;display:flex;align-items:flex-end}
.sheet__backdrop{position:absolute;inset:0;background:rgba(var(--ink-rgb),.55)}
.sheet__panel{position:relative;width:100%;background:var(--paper);border-top:2px solid var(--ink);
  padding:calc(var(--sp)*3) var(--pad-x) calc(var(--sp)*3 + env(safe-area-inset-bottom));max-height:82vh;overflow:auto}
.sheet__title{font-size:1.2rem;margin-bottom:6px}
.sheet__desc{font-size:.92rem;color:var(--tx-soft);margin-bottom:calc(var(--sp)*3)}
.sheet__opt{display:flex;justify-content:space-between;align-items:center;padding:15px 0;
  border-bottom:1px solid var(--rule-soft);font-weight:700}
.sheet__opt span:last-child{font-family:var(--mono);color:var(--ink)}
.sheet__close{width:100%;margin-top:calc(var(--sp)*2);min-height:50px;background:var(--ink);color:var(--paper);
  border:0;font:inherit;font-weight:700;cursor:pointer}

/* =========================================================
   문서 페이지 (개인정보)
   ========================================================= */
.doc{padding:var(--sect-y) 0}
.doc h1{font-size:var(--fs-h1);margin-bottom:calc(var(--sp)*3);border-bottom:2px solid var(--rule);padding-bottom:calc(var(--sp)*2)}
.doc h2{margin-top:calc(var(--sp)*5);font-size:1.2rem}
.doc p{margin-bottom:1em}
.doc__note{font-family:var(--sans);font-size:.85rem;letter-spacing:0;border:1px solid var(--rule);padding:12px 14px;color:var(--tx-soft)}
.doc ul{list-style:none;padding:0}
.doc li{padding:6px 0 6px 18px;position:relative;border-bottom:1px solid var(--rule-soft)}
.doc li::before{content:"—";position:absolute;left:0;color:var(--ink)}

/* =========================================================
   스크롤 진입 (JS 있을 때만 · 최소)
   ========================================================= */
.js .reveal{opacity:0;transform:translateY(12px)}
.js .reveal.in{opacity:1;transform:none;transition:opacity .45s ease,transform .45s ease}

/* =========================================================
   시각 효과 2단계 (2026-09-11) — 효과별로 클래스를 분리해 개별 제거 가능하게 함.
   전부 하드코딩 색상·그림자·그라데이션·radius 없이 기존 토큰(var(--*))만 사용.
   ========================================================= */

/* [효과 1] 폴드 아래 섹션 순차 등장 — JS(app.js)가 .reveal-hide 추가/제거.
   위 .reveal/.in(섹션 헤더 전용)과 별개 클래스라 이 효과만 따로 뗄 수 있음. */
[data-reveal]{transition:opacity .22s ease,transform .22s ease}
.js [data-reveal].reveal-hide{opacity:0;transform:translateY(8px)}

/* [효과 2] 1px 괘선 좌→우 드로잉 — 적용 범위: .sect__top 상단 괘선만(섹션 전체 구분선 중 "일부"로
   한정 — .sect__idx--solo 변형과 .cases/.principles 등 개별 컴포넌트의 자체 border-top은 이번 범위 밖).
   실제 border 대신 pseudo-element로 그려서 scaleX 로 드로잉(폭/높이 애니메이션 아님, CLS 0). */
.sect__top{border-top:0;position:relative}
.sect__top::before{
  content:"";position:absolute;top:0;left:0;right:0;height:2px;background:currentColor;
  transform:scaleX(1);transform-origin:left;transition:transform .22s ease;
}
.js [data-reveal].reveal-hide .sect__top::before{transform:scaleX(0)}


/* [L-0] 효과 4(링크 밑줄 드로잉)와 효과 6(고정 섹션 번호)은 제거했습니다 — .link-draw/.section-tracker
   클래스는 HTML에서도 뗐고, app.js의 효과 6 스크립트 블록도 제거했습니다. */

/* [효과 5] 버튼 누름 시 테두리→면 반전(120ms), .btn--ghost만 대상(다른 버튼은 이미 채움).
   [V-10] 반전색 signal→ink(.btn--ghost:hover와 동일). on-signal(#fff) on ink 명도비는
   기존 signal 조합(4.95:1)보다 여유 있음. 포커스링은 전역 :focus-visible 그대로 사용. */
.btn--ghost:active{
  transition:background .12s ease,color .12s ease,border-color .12s ease;
  background:var(--ink);color:var(--on-signal);border-color:var(--ink);
}

@media (prefers-reduced-motion:reduce){
  .js .reveal,.js [data-reveal].reveal-hide{opacity:1;transform:none}
  html{scroll-behavior:auto}
  /* 일괄 무력화 — 아코디언 grid-rows, 밑줄 색 전환, 버튼 화살표/대괄호, 행 hover,
     2단계 시각 효과 중 남은 1·2·5(섹션 등장·괘선 드로잉·버튼 반전) 전부를
     개별 예외 없이 즉시 전환으로 만듦(3·4·6은 L-0에서 제거) */
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
    scroll-behavior:auto!important;
  }
}