/* =============================================================
   집수리코리아 — 스타일 (에디토리얼/스위스 · 색면 블록 · 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?v=d55e3b13') format('woff2');
}
@font-face{
  font-family:'Pretendard';font-style:normal;font-weight:700;font-display:swap;
  src:url('/assets/fonts/Pretendard-Bold.woff2?v=9101b466') 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}
/* [AB-1] 항목/지역/조합 "목록" 3곳 전용 — 2열 카드가 들어갈 자리가 필요해 wrap--narrow(820px)
   보다 넓게 잡는다. wrap--narrow 자체는 그대로라 상세 페이지 등 다른 곳엔 영향 없음. */
.wrap--list{max-width:1080px}

/* mono 라벨 — 위계는 크기·색·굵기로만. 한글이 섞이므로 자간 0 */
.label{font-family:var(--sans);font-size:var(--fs-label);font-weight:400;letter-spacing:0}

/* 섹션 색면 */
.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)}
/* 섹션 헤더 */
.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)*2.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)}
/* [YY-1] 탭마다 항목 수가 달라 패널 높이가 다른 건 정상으로 둔다 — 항목 1~2개뿐인
   탭까지 6개짜리 탭 기준 min-height를 강제해 빈 여백이 생기던 문제라 지웠다. */
@media (min-width:1024px){
  .service-cards{grid-template-columns:1fr 1fr}
  /* [EE-10] 항목 홀수 탭은 마지막 카드가 1열만 차지해 빈 칸에 컨테이너 배경이
     카드 크기로 보였다 — 마지막+홀수번째 카드만 2열 전체로 넓힌다. */
  .service-cards > .service-card:last-child:nth-child(odd){grid-column:1/-1}
  .service-card .case-toggle{flex-basis:260px;width:260px}
}
.service-card{background:var(--paper);display:flex;flex-direction:column}
/* [SS-1] 카드 전체를 <a>로 감싸되 .service-card의 flex 자식 구조(사진/본문)는
   그대로 유지해야 해서, 링크 자신은 display:contents로 레이아웃에서 사라지고
   자식(.case-toggle/.service-card__body)이 이전처럼 직계 flex 자식으로 배치된다. */
.service-card__link{display:contents}
.service-card__body{padding:calc(var(--sp)*1) calc(var(--sp)*2.5) calc(var(--sp)*1)}
.service-card__body h3{font-size:1.1rem;margin-bottom:calc(var(--sp)*.5)}
/* [YY-1] 2줄 고정(line-clamp) — 부제 31~39자 어느 쪽이든 카드 높이가 같아지게 한다. */
.service-card__note{font-size:.92rem;color:var(--tx-soft);margin:calc(var(--sp)*.5) 0 calc(var(--sp)*1);line-height:1.5;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* [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 220px;width:220px;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}
  .service-card .btn{width:auto;align-self:flex-start;min-height:48px;padding:6px 16px}
}

/* [S-4→SS-1] 전후 전환 — 기본은 시공 후, hover 가능 기기(마우스)만 :hover로 시공 전을
   보여준다(터치 기기는 hover가 아예 없어 시공 후만 보이고, 그걸로 충분하다 — 카드
   전체가 이제 링크라 탭하면 바로 항목 페이지로 이동한다. 예전엔 터치 기기용 버튼
   클릭(aria-pressed) 토글이 있었지만, 카드가 링크가 된 뒤로는 그 토글 자체가 의미가
   없어져 제거했다). 사진 두 장 모두 항상 DOM에 있고 프레임 안에 절대배치로 겹쳐
   opacity만 바뀌므로 전환 시 레이아웃 이동이 없다(CLS 0, placeholder 상태에서도
   동일). hover는 카드 전체(.service-card__link)를 기준으로 건다 — 사진 밖(본문)에
   마우스가 있어도 전환되게 해 카드 전체가 하나의 상호작용 단위로 느껴지게 한다. */
.case-toggle{display:block;width:100%;padding:0;border:1px solid var(--rule);background:var(--paper);
  cursor:pointer;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"]{opacity:1}
@media (hover:hover) and (pointer:fine){
  .service-card__link:hover .case-toggle__img[data-state="before"]{opacity:1}
  .service-card__link: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)}
/* [SS-1] hover 안내 문구는 hover가 되는 기기에서만 보인다(터치 기기는 hover가 없어
   숨겨야 함 — 지시사항). */
.lbl,.service-cards[hidden],.qmore summary::-webkit-details-marker,
.faq__item summary::-webkit-details-marker,.sheet[hidden]{display:none}
@media (hover:hover) and (pointer:fine){ .lbl--hover{display:inline} }

/* =========================================================
   [SS-4] /services/ 허브 폐지로 허브 전용 스펙 리스트(.spec-list/.spec-row-static
   계열)·축소 히어로(.subhero 계열)·"16개 항목 전체 보기" 링크(.spec-list__more*) CSS를
   전부 지웠다 — src/ 어디서도 더는 안 쓴다. .faq/.link-list/.hero__title .hero__accent는
   다른 페이지가 계속 쓰므로 유지. */
.faq{border-top:2px solid var(--rule)}
.faq__item{border-bottom:1px solid var(--rule-soft)}
/* [Y-3] 지역↔시공 항목 상호 링크 목록(area/item 템플릿 공용). 새 색상 없음, 48px 터치. */
/* [GG-22 [1]] 실측 원인: .link-list가 display:flex인데 align-items를 지정하지
   않아 기본값 stretch가 적용됐다 — <a>는 자기 안쪽에서 inline-flex;align-items:
   center로 스스로 중앙 정렬하지만, 일반 텍스트인 <span>은 그런 자기 정렬이 없어
   stretch로 늘어난 flex item 박스 안에서 텍스트가 위쪽에 붙어(기본 동작) 링크보다
   들려 보였다(안양처럼 링크만 있는 줄엔 span이 없어 증상이 안 보였을 뿐). 컨테이너에
   align-items:center를 주면 태그 종류와 무관하게 모든 항목이 같은 기준으로 가운데
   정렬된다. */
.link-list{margin-top:calc(var(--sp)*4);display:flex;flex-wrap:wrap;align-items:center;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}
/* [GG-22 [2]/[4]] /areas/ 허브 권역 카드 — 테두리 박스 대신 카드 사이 구분선 하나로만
   나눈다(요청사항: 박스 남용 금지). 세로 여백은 항목 간 표준 간격(--sp*3)보다
   좁게 둬서(권역 카드 7개가 연속으로 이어지므로) 페이지가 늘어지지 않게 한다.
   카드 안의 지역명 줄은 기존 .link-list(위 규칙, [1] baseline 수정 포함)를 그대로
   재사용한다 — 새 클래스를 여기 또 만들지 않는다. */
.area-cards{margin-top:calc(var(--sp)*3);display:flex;flex-direction:column}
.area-card{padding:calc(var(--sp)*2) 0;border-bottom:1px solid var(--rule-soft)}
.area-card:first-child{padding-top:0}
.area-card:last-child{border-bottom:none}
.area-card h2{margin:0 0 4px;font-size:1.05rem}
.area-card .link-list{margin-top:8px}
.area-card__dong{margin:6px 0 0;font-size:.85rem;color:var(--tx-soft)}
/* [WW-3] /services/{항목}/ 사례 미리보기 — 최신 3건, 시공 후 사진만(간단 미리보기). */
.item-cases{margin-top:calc(var(--sp)*4)}
.item-cases__list{list-style:none;margin:16px 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.item-cases__list img{width:100%;height:auto;object-fit:cover;aspect-ratio:4/3;display:block}
.item-cases__list p{margin:6px 0 0;font-size:.82rem;color:var(--tx-soft)}
/* [DD-2] .doc li(라인 630)가 체크리스트용 "—" 앞머리·좌측 여백·밑줄을 모든 .doc
   내부 li에 붙이는데, 이 그리드 카드도 .doc 안에 있어 그대로 물려받아 사진 왼쪽에
   짧은 선이 보였다(실측 발견, 사례 1건일 때 특히 눈에 띔). 카드 li에서만 되돌린다 —
   specificity를 .doc li보다 높여(클래스 2개+태그) 소스 순서와 무관하게 이긴다. */
.doc .item-cases__list li{padding:0;border-bottom:none}
.doc .item-cases__list li::before{content:none}
/* [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)}

/* [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"]{border-color:var(--ink)}
/* [SS-1] .service-card__link는 display:contents라 그 자신은 테두리를 그릴 박스가
   없다 — 포커스 표시를 자식(.case-toggle, 사진 프레임)에 대신 준다. */
.service-card__link:focus-visible .case-toggle{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);
}

/* [SS-2] 항목별 사례 목록 페이지(/works/item/*) 카드 — 지역·행정동·소요시간·전후
   썸네일 최소 레이아웃. 사진 배지·비율 통일 등 정식 디자인은 TT-3에서 다룬다 —
   여기선 CLS 방지(width/height)와 최소 가독성만 맞춘다. */
.work-list{list-style:none;margin:0;padding:0;display:grid;gap:16px}
/* [AB-1] 961px 이상 2열 — wrap--list(1080px)와 짝을 이룬다. */
@media (min-width:961px){ .work-list{grid-template-columns:1fr 1fr} }
.work-card a{display:block;border:1px solid var(--rule);padding:12px;text-decoration:none}
.work-card__photos{display:flex;gap:8px;margin-bottom:8px}
/* [GG-12] 상세 페이지(.work-photos)와 같은 근거로 4/3→1/1 — 목록 카드 썸네일도
   같은 사진(원본)을 쓰므로 잘림 기준이 어긋나 있으면 안 된다. 그리드 컬럼 폭은
   .work-list의 media query가 결정하므로 사진 비율 변경은 카드 높이만 늘릴 뿐
   줄바꿈·컬럼 수에는 영향이 없다(실측 확인). */
.work-card__photos img{width:50%;height:auto;object-fit:cover;aspect-ratio:1/1}
.work-card__title{display:block;font-weight:700}
.work-card__meta,.work-card__badge{display:block;font-size:.85rem;color:var(--tx-soft)}
.work-card__excerpt{font-size:.85rem;color:var(--tx-soft);line-height:1.5;margin:4px 0 0}
/* [GG-21 [2] 문제 B] 테두리 박스 6개 나열(버튼처럼 보이지만 클릭 결과가 라벨과
   달라 혼란을 줬다) 대신, 제목이 있는 한 줄 텍스트 링크 그룹으로 바꾼다. 마크업
   (ul/li/a)은 그대로 두고 CSS만 바꿨다 — li 사이 구분점(·)은 ::after로 넣어 새
   클래스 없이 처리하고, 터치 영역은 보이는 테두리 없이 a의 min-height로만 44px
   이상 확보한다(요청 기준 그대로, 기존 48px에서 살짝 줄였지만 여전히 상회). */
.work-region-filters h2{margin-top:calc(var(--sp)*4)}
.work-region-filters__note{margin:4px 0 0;font-size:.85rem;color:var(--tx-soft)}
.work-region-filters ul{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-wrap:wrap;align-items:center}
.work-region-filters li{display:flex;align-items:center}
.work-region-filters li:not(:last-child)::after{content:"·";margin:0 10px;color:var(--tx-soft)}
.work-region-filters a{display:inline-flex;align-items:center;min-height:44px;color:var(--ink);text-decoration:underline;text-underline-offset:2px}
/* [GG-16] 항목 허브 "이런 증상이면 확인해보세요" — 새 클래스는 여백용 하나만 두고
   안쪽 목록은 일반 ul/li/p/strong 기본 스타일에 최소한만 얹는다. /services/{항목}/
   (stamp.mjs)은 .doc 안에서 재사용되는데 .doc li가 체크리스트용 "—"·좌측 여백을
   강제하므로(DD-2와 같은 문제) .doc 컨텍스트용 규칙을 specificity 높여 따로 둔다. */
.item-symptoms{margin-top:calc(var(--sp)*4)}
.item-symptoms ul{list-style:none;margin:16px 0 0;padding:0}
.item-symptoms li{padding:14px 0;border-bottom:1px solid var(--rule-soft)}
.item-symptoms li:first-child{border-top:1px solid var(--rule-soft)}
.item-symptoms li p:first-child{margin-bottom:4px}
.item-symptoms li p:last-child{color:var(--tx-soft);margin-bottom:0}
.doc .item-symptoms li{padding:14px 0;border-bottom:1px solid var(--rule-soft)}
.doc .item-symptoms li::before{content:none}/* [GG-16→GG-21] 작업분야 태그 — 테두리 박스가 링크처럼 보이는데 클릭이 안 되는
   잘못된 어포던스였다(실측 지적). 테두리를 없애고 연한 배경(var(--rule-soft),
   구분선에 이미 쓰던 색 재사용 — 새 색 없음)만으로 "칩"임을 표시한다. 구분점
   나열 대신 칩을 택한 이유: 태그 자체가 검색어 변형(키워드) 묶음이라 시각적으로
   서로 분리된 단위로 보이는 게 자연스럽고, 위 work-region-filters(문장형 링크
   나열)와 모양을 다르게 둬야 "이건 링크, 이건 태그"가 구분된다. */
.item-tags{margin-top:24px;display:flex;flex-wrap:wrap;gap:8px}
.item-tags span{display:inline-block;border:none;border-radius:4px;background:var(--rule-soft);padding:6px 12px;font-size:.85rem;color:var(--tx-soft)}
/* [GG-5] 상세 페이지(/works/{슬러그}/) — 사진을 본문 위로 올리고 2열 그리드로,
   "시공 전"/"시공 후"는 figcaption을 지우지 않고 위치만 사진 좌상단 배지로
   옮긴다(.skip-link와 같은 위치 지정 방식, var(--ink)/var(--on-signal) 재사용,
   새 색 없음). 메타 3줄은 .work-meta 하나로 묶어 세로 나열 대신 가로 스트립으로. */
.work-photos{display:grid;gap:16px}
@media (min-width:961px){ .work-photos{grid-template-columns:1fr 1fr} }
.work-photos figure{position:relative;margin:0}
/* [GG-12] 전/후 사진 비율 통일 — 실사례 100장 실측 결과 91장이 거의 정사각형
   (0.95~1.05, 평균 1.004)이고 4:3에 해당하는 사진은 0장이었다. .work-card__photos와
   같은 4/3을 쓰면 96장이 20%+ 잘려(평균 24.7%, 최대 30%) 위아래를 크게 잘라내는
   반면, 1/1은 심하게 잘리는 사진이 0장(평균 1.5%, 최대 13.5%)이라 실제 사진 모양에
   맞는 값으로 택했다. width/height="900" HTML 속성은 CLS 방지용 크기 힌트일 뿐이고
   이 aspect-ratio 선언이 우선 적용되므로 로딩 전후 레이아웃 이동은 늘지 않는다. */
.work-photos img{width:100%;height:auto;object-fit:cover;aspect-ratio:1/1}
.work-photos figcaption{position:absolute;top:8px;left:8px;background:var(--ink);color:var(--on-signal);padding:4px 10px;font-size:.85rem}
.work-meta{display:flex;flex-wrap:wrap;gap:8px 24px;padding:12px 0;margin-bottom:1em;border-top:1px solid var(--rule-soft);border-bottom:1px solid var(--rule-soft)}
.work-meta p{margin-bottom:0}

@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;
  }
}