/* ============================================================
   공간브릿지 — 단일 파운데이션 v31 (2026-08-04)

   왜 만들었나
   실측: CSS 13,618줄 / !important 1,119개 / index.html 안 <style> 25개 /
        v25 중복 로드 / color 647회·font-size 603회 재선언.
        7월 25일 이후 패치 레이어 15개가 서로를 덮어써서
        한 곳을 고치면 다른 곳이 깨지는 상태였다.

   무엇을 했나
   흩어져 있던 아래를 이 파일 하나로 합쳤다. 렌더 값은 바꾸지 않았다.
     - index.html 인라인 패치 8블록 (4pt 스냅 / 장식 띠 제거 / 톤 복귀 /
       타이포 굵기 통일·스냅 / SSOT 형태 정리 / 색 변수 통일 / 액센트 활용)
     - spacebridge-type-motion-v29.css (타이포 정규화·그라데이션·모션)
     - spacebridge-align-v30.css (컨테이너 정렬·표면 정리)

   규칙
   1) 이 파일은 항상 마지막에 로드한다. 여기가 최종 결정권자다.
   2) 새 교정은 새 파일을 만들지 않고 이 파일의 해당 섹션에 넣는다.
   3) 색을 바꿀 때는 그 요소의 실제 배경을 픽셀로 먼저 잰다.
   4) 일괄 색 지정 금지. 배경이 다른 컨테이너는 반드시 예외 처리한다.
   ============================================================ */


/* ══════════ A. 이전 인라인 패치 8블록 (값 보존) ══════════ */
/* 4pt 서브그리드 전량 스냅 (2026-07-28) */
.hero-primary-actions a{ gap:8px !important; }
.hero-mini{ gap:8px 20px !important; }
.hero-mini span{ gap:8px !important; }
.sb-value-eyebrow{ gap:8px !important; }
.sb-value-actions,.sb-value-services{ gap:12px !important; }
.sb-value-step{ gap:16px !important; }
.top-route-copy small{ gap:8px !important; }
.hero-start-head{ gap:32px !important; }
.hero-start-label{ gap:12px !important; }
.hero-intent-details summary,.hero-intent-row{ gap:12px !important; }
.hero-intent-details{ display:block !important; }
.hero-intent-details summary{ justify-content:space-between !important; width:100% !important; flex:1 1 100% !important; align-self:stretch !important; box-sizing:border-box !important; max-width:none !important; }
.tools-layout{ gap:16px !important; }
.ft-card{ gap:16px !important; }
.ft-points,.ft-points li{ gap:8px !important; }
.tools-more .btn{ gap:8px !important; }
.category-hub-head{ gap:40px !important; }
.category-hub-head a{ gap:8px !important; }
.category-mobile-tab{ gap:12px !important; }
.service-card-no,.service-checks{ gap:8px !important; }
.service-card-body a{ gap:4px !important; }
.category-next .btn{ gap:8px !important; }
.matching-head{ gap:56px !important; }
.pf-source{ gap:4px 12px !important; }
details summary{ gap:16px !important; }
.consult-route-card{ gap:16px !important; }
.lf-chip{ gap:8px !important; }
.lf-benefit-guide-head{ gap:16px !important; }
.trust-links{ gap:8px !important; }
.partnership-intro{ gap:24px !important; }
.partner-form-grid{ gap:0 16px !important; }
.lf-agree{ gap:12px !important; }
.footer-business{ gap:16px 24px !important; }
.footer-nav-grid{ gap:4px 24px !important; }

/* ── */



/* 장식 띠 제거·카드 정제 (2026-07-29) */
/* ── 1) 장식용 가로 띠 전부 제거 ──────────────────────────
   기능이 없는 장식인데 시선을 뺏고 카드 사이를 갈라 놓는다. */
.match-flow::before, .match-flow::after{ display:none !important; content:none !important; }
/* 페이지 전역 장식 띠 — 섹션·카드마다 그라디언트 가로선이 깔려 있어 시선을 끊는다. 전부 제거. */
.hero-category-dock::before, .hero-category-dock::after,
.freetools::after, .category-hub::after, .matching::after,
.pricing::after, .faq::after, .insights::after,
.final::after, .partnership::after, .brand-story::after,
.sb-field-bar::after, .sb-howto-bar::after,
.ft-card::before, .ft-card::after,
.insight-card::before, .insight-card::after,
.service-card::before, .service-card::after,
.pf-body::before, .pf-body::after{ display:none !important; content:none !important; }
.leadform-panel::before{ display:none !important; content:none !important; }
.insight-card::before, .insight-card::after,
.consult-route-card::before, .consult-route-card::after{ display:none !important; content:none !important; }

/* ── 2) 상담 경로 카드 정제 ───────────────────────────────
   연노랑 그라디언트 배경이 촌스러움의 원인. 배경은 뉴트럴로 두고
   카카오 노랑은 아이콘에만 남겨 브랜드 식별만 유지한다. */
.consult-route-card{
  background:#fff !important;
  border:1px solid #E3EAF2 !important;
  border-radius:16px !important;
  box-shadow:0 1px 2px rgba(15,27,49,.04) !important;
  transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease !important;
}
.consult-route-card:hover{
  border-color:#075F9C !important;
  box-shadow:0 8px 20px rgba(11,114,181,.12) !important;
  transform:translateY(-2px) !important;
}
.consult-route-card.kakao .route-icon{ background:#FEE500 !important; color:#191919 !important; }
.consult-route-card.sms .route-icon{ background:#EAF4FC !important; color:#075F9C !important; }
.consult-route-card .route-icon{ border-radius:12px !important; box-shadow:none !important; }
.consult-route-card .route-arrow{
  background:transparent !important; color:#075F9C !important; box-shadow:none !important; }
.consult-route-card:hover .route-arrow{ color:#075F9C !important; }

/* ── 3) 딥네이비 블록 카드 정제 ───────────────────────────
   반투명 흰색 + 두꺼운 테두리는 탁해 보인다. 더 맑게, 테두리는 얇게. */
.matching .match-step, .matching .match-customer, .matching .pf-body,
.insights .insight-grid > *{
  background:rgba(255,255,255,.07) !important;
  border:1px solid rgba(255,255,255,.16) !important;
  border-radius:16px !important;
  box-shadow:none !important;
}
.insights .insight-grid > *:hover{
  background:rgba(255,255,255,.13) !important;
  border-color:rgba(255,255,255,.30) !important;
}
.matching .matching-policies > *{
  background:rgba(255,255,255,.07) !important;
  border:1px solid rgba(255,255,255,.16) !important;
}

/* ── */



/* 콘텐츠 섹션 밝은 톤 복귀·위계 재정비 (2026-07-29) */
/* ── 판단 정정 ────────────────────────────────────────────
   긴 콘텐츠 섹션(matching 1514px·insights 923px)에 딥네이비 블록을 쓴 것이 실수였다.
   반투명 카드는 내용이 묻히고, 실측상 14px에 굵기가 720/540/500 세 종류로 섞여 위계가 무너졌다.
   컬러 블록은 짧은 CTA 구간에만 쓰는 것이 맞다(아정당·토스·캐시노트 실측 공통).
   → 밝은 배경으로 되돌리고 위계·여백·대비로 내용이 보이게 한다. */

/* 1) 딥네이비 블록 해제 */
.matching, .insights{ background:#F7FAFC !important; }
.matching > .inner, .insights > .inner{
  background:#FFFFFF !important; border:1px solid #E5EDF5 !important;
  border-radius:24px !important; padding:56px 48px !important;
  box-shadow:0 1px 3px rgba(15,27,49,.04) !important;
}
.matching > .inner, .matching h2, .matching h3, .matching b, .matching strong,
.insights > .inner, .insights h2, .insights h3, .insights b, .insights strong{ color:#16233A !important; }
.matching p, .matching small, .matching li, .matching .insight-sub,
.insights p, .insights small, .insights li, .insights .insight-sub{ color:#4A5A73 !important; }
.matching .sec-label, .matching .match-eyebrow, .matching .matching-head span,
.insights .sec-label, .insights .head > span{
  background:#EAF4FC !important; color:#075F9C !important; border-color:#CFE3F2 !important; }
.matching a:not(.btn), .insights a:not(.btn),
.matching .insight-go, .matching .insight-go span,
.insights .insight-go, .insights .insight-go span,
.matching .match-go{ color:#075F9C !important; }

/* 2) 카드 — 선명한 흰 카드 + 얇은 테두리 */
.matching .match-step, .matching .match-customer, .matching .pf-body,
.matching .matching-policies > *, .insights .insight-grid > *{
  background:#FFFFFF !important; border:1px solid #E3EAF2 !important;
  border-radius:14px !important; box-shadow:0 1px 2px rgba(15,27,49,.04) !important;
}
.insights .insight-grid > *:hover, .matching .match-step:hover{
  border-color:#075F9C !important; box-shadow:0 8px 20px rgba(11,114,181,.10) !important; }
.matching .match-step .no, .matching .brand-steps .bs-no{
  background:linear-gradient(135deg,#075F9C 0%,#075F9C 100%) !important; color:#fff !important; }
.matching a.btn, .matching .btn-primary{
  background:linear-gradient(135deg,#075F9C 0%,#075F9C 100%) !important; color:#fff !important; }

/* 3) 위계 재정비 — 실측상 14px에 굵기 3종이 섞여 평평했다 */
.matching h2, .insights h2{ font-size:42px !important; font-weight:735 !important; letter-spacing:-1px !important; line-height:1.24 !important; }
.matching .sec-sub, .insights .sec-sub, .matching .matching-head p, .insights .head p{
  font-size:16px !important; font-weight:450 !important; color:#5A6B84 !important; margin-top:10px !important; }
.matching .match-step h3, .insights .insight-card strong{
  font-size:18px !important; font-weight:750 !important; color:#16233A !important; line-height:1.4 !important; }
.matching .match-step p, .insights .insight-sub{
  font-size:14px !important; font-weight:400 !important; color:#5A6B84 !important; line-height:1.65 !important; }
.matching .match-go, .insights .insight-go{ font-size:14px !important; font-weight:700 !important; }
.matching .matching-policies strong{ font-size:15px !important; font-weight:750 !important; color:#16233A !important; }
.matching .matching-policies span{ font-size:13px !important; color:#5A6B84 !important; }

/* 4) 여백 — 카드 안이 빽빽했다 */
.matching .match-step, .insights .insight-grid > *{ padding:24px 22px !important; }
.matching .matching-policies > *{ padding:18px 20px !important; }
@media(max-width:768px){
  .matching > .inner, .insights > .inner{ padding:32px 20px !important; border-radius:18px !important; }
  .matching .match-step, .insights .insight-grid > *{ padding:18px 16px !important; }
}

/* ── */



/* 타이포 굵기 4단계 통일 (2026-07-29) */
/* 실측: 본문 폰트 굵기가 21종(400·450·480·500·560·600·620·640·650·660·700·720·735·750·760·785·800·820·850·860·900)
   이었다. 480·560·785 같은 값은 1~2개뿐인 이상값이다. 굵기가 흩어지면 위계가 사라져 "조화가 안 맞아" 보인다.
   → 4단계로 통일: 450 본문 / 600 강조 / 700 소제목 / 800 제목 */

/* 450 — 본문 */
p, li, small, td, dd, blockquote,
.insight-sub, .final-sub, .hero-sub, .sec-sub, .lf-field-hint,
.hb-steps small, .hb-facts span, .match-step p{ font-weight:450 !important; }

/* 600 — 강조 본문·라벨·링크 */
.sec-label, .insight-tag, .art-badge, .route-badge, .kicker, .eyebrow,
.match-eyebrow, .top-route-eyebrow, .mail-kicker,
.gnb-service, .gnb-cta, .pf-inc, .insight-go, .match-go,
a:not(.btn):not(.primary){ font-weight:600 !important; }

/* 700 — 소제목·강조어 */
b, strong, h3, h5, h6,
.q, .ico, .lf-chip, .mnav-service, .hb-steps b, .hb-facts b,
.match-step h3, .insight-card strong, .matching-policies strong{ font-weight:700 !important; }

/* 800 — 제목·번호 배지·주 CTA */
h1, h2, h4, .sec-title, .pt,
.hb-no, .service-card-no, .match-step .no, .bs-no, .toc-num,
.btn, .btn-primary, .primary, .platform-domain,
.hero-primary-actions a, .consult-route-card strong{ font-weight:800 !important; }

/* ── */



/* 타이포 굵기 강제 스냅 (2026-07-29) */
/* 1차 통일이 21→14종에서 멈췄다. 원인은 구체성 — `.matching strong`(0,1,1)이 `strong`(0,0,1)을 이긴다.
   `[class]` 속성 선택자로 구체성을 맞춰 끝까지 스냅한다. */
html body [class] p, html body [class] li, html body [class] small,
html body [class] .insight-sub, html body [class] figcaption{ font-weight:450 !important; }

html body [class] .sec-label, html body [class] .insight-tag, html body [class] .cat-cred,
html body [class] .mail-kicker, html body [class] .service-card-use, html body [class] .sum-note,
html body [class] .pf-range-note, html body [class] a:not(.btn):not(.primary){ font-weight:600 !important; }

html body [class] b, html body [class] strong, html body [class] em,
html body [class] h3, html body [class] h5, html body [class] h6,
html body [class] .ico, html body [class] .go, html body [class] .ft-result{ font-weight:700 !important; }

html body [class] h1, html body [class] h2, html body [class] h4,
html body [class] .sec-title, html body [class] .pt,
html body [class] .top-route-arrow, html body [class] .hero-start-label,
html body [class] .btn, html body [class] .primary{ font-weight:800 !important; }

/* 잔여 이상값 마감 — 실측으로 정확한 경로를 잡았다 */
html body .partnership-tags span, html body .leadform-panel-head span,
html body .lf-benefit-guide-head span{ font-weight:600 !important; }
html body .cat-label strong, html body .insight-card strong,
html body .match-step h3, html body .req{ font-weight:700 !important; }
html body .match-step p, html body .mnav-close{ font-weight:450 !important; }

/* 클래스 없는 span은 부모 위계를 따르게 한다 (독자 굵기 금지) */
html body [class] span:not([class]){ font-weight:inherit !important; }

/* ── */



/* SSOT 형태 정리 (2026-07-31) */
/* 출처: evidence/tone_ssot_20260731/DESIGN_SSOT.md
   ChatGPT 판정 — "둥근 흰 카드 + 얇은 파란 테두리가 반복돼 예전 공공기관 홈페이지처럼 보인다"
   → 카드 남발·그라데이션·이중 그림자를 걷어낸다. 테두리는 클릭 요소에만. */

/* 1) 그라데이션 전면 평면화 — 숫자 배지·아이콘의 광택이 낡아 보인다 */
.match-step .no, .brand-steps .bs-no, .hb-no, .toc-num, .service-card-no,
.fb-ico, .ico, .freetools .ico, .ft-card .ico, .step-num, .art-badge{
  background:#075F9C !important; background-image:none !important;
  color:#fff !important; box-shadow:none !important; }
.btn, .btn-primary, .primary, .hero-primary-actions a,
.matching a.btn, .category-next .btn, .tools-more .btn{
  background:#075F9C !important; background-image:none !important;
  color:#fff !important; box-shadow:none !important; }
.btn:hover, .btn-primary:hover, .primary:hover, .hero-primary-actions a:hover{
  background:#065081 !important; }

/* 2) 카드 정리 — 정보 카드는 테두리 없이 여백으로, 클릭 요소만 테두리 */
.matching .matching-policies > *, .insights .insight-grid > *,
.hb-facts li, .hb-steps li{
  background:transparent !important; border:0 !important;
  box-shadow:none !important; border-radius:0 !important; }
.hb-steps li{ border-left:2px solid #0EA5E9 !important; border-radius:0 !important;
  padding:4px 0 4px 16px !important; }
.hb-facts li{ padding:0 !important; }
.matching .matching-policies > *{ padding:0 !important; }

/* 클릭 가능한 카드에만 테두리 + 단일 그림자 */
a.insight-card, a.sb-value-service, .consult-route-card, .ft-card, .cat-photo-card{
  border:1px solid #E3EAF2 !important; border-radius:14px !important;
  box-shadow:0 1px 2px rgba(15,27,49,.04) !important; background:#fff !important; }
a.insight-card:hover, .consult-route-card:hover, .ft-card:hover{
  border-color:#0EA5E9 !important; box-shadow:0 6px 16px rgba(14,165,233,.12) !important; }

/* 3) 카드 중첩 해소 — 큰 흰 컨테이너 안의 또 다른 흰 카드를 없앤다 */
.matching > .inner, .insights > .inner{
  background:transparent !important; border:0 !important;
  box-shadow:none !important; padding:0 !important; }
.matching, .insights{ background:#F7FAFC !important; padding:80px 0 !important; }
.matching .inner, .insights .inner{ padding-inline:32px !important; }

/* 3-b) 테두리 중첩 해소 — 실측 10종. 부모 컨테이너 테두리를 걷고 자식 카드만 남긴다 */
.sb-value-stage, .tools-layout, .service-board-grid, .match-flow,
.top-route-stages, .category-mobile-tabs, .hero-start-tool, .hero-start-head,
.sb-value-steps, .service-card, .category-next, .match-split, .final-cols{
  background:transparent !important; border:0 !important;
  box-shadow:none !important; }

/* 4) 타이포 위계 — SSOT 6단계 */
.matching h2, .insights h2, .sec-title{ font-size:44px !important; font-weight:800 !important;
  letter-spacing:-1px !important; line-height:1.25 !important; color:#16233A !important; }
.matching .match-step h3, .insights .insight-card strong{
  font-size:20px !important; font-weight:700 !important; color:#16233A !important; }
.matching .match-step p, .insights .insight-sub, .matching .sec-sub, .insights .sec-sub{
  font-size:16px !important; font-weight:450 !important; line-height:1.65 !important; color:#5A6B84 !important; }
.matching .matching-policies strong{ font-size:16px !important; font-weight:700 !important; color:#16233A !important; }
.matching .matching-policies span{ font-size:14px !important; color:#5A6B84 !important; }

@media(max-width:768px){
  .matching, .insights{ padding:56px 0 !important; }
  .matching .inner, .insights .inner{ padding-inline:16px !important; }
  .matching h2, .insights h2, .sec-title{ font-size:28px !important; }
}

/* ── */



/* SSOT 색 변수 통일 (2026-07-31) */
/* 파랑이 HEX뿐 아니라 CSS 변수로도 7종 흩어져 있었다.
   --sb-accent #0EA5E9 / --sb-blue #0EA5E9 / --sb-blue-dark #075F9C / --sb-brand-bright #0EA5E9
   / --sb-brand-deep #075F9C / --sb-action #075F9C / --sb-brand-aa #075F9C
   → SSOT 2단계로 재정의한다. 변수를 고쳐야 전 컴포넌트에 한 번에 적용된다. */
:root, html, body{
  /* 브랜드 액센트 — 흰 글자 불가(2.78:1). 아이콘·선·선택상태·투명배경 전용 */
  --sb-blue:#0EA5E9 !important;
  --sb-accent:#0EA5E9 !important;
  --sb-brand-bright:#0EA5E9 !important;
  /* 접근성 액션 — 흰 글자 가능(6.75:1). CTA 배경·링크·활성 상태 */
  --sb-blue-dark:#075F9C !important;
  --sb-brand-deep:#075F9C !important;
  --sb-action:#075F9C !important;
  --sb-brand-aa:#075F9C !important;
  --sb-brand-aa-deep:#075F9C !important;
  --sb-action-hover:#065081 !important;
  /* 연한 배경은 새 파랑을 만들지 않고 액센트의 낮은 명도로 */
  --sb-accent-soft:#EAF7FC !important;
  --sb-band-blue:#EAF7FC !important;
  --sb-band-sky:#EAF7FC !important;
}
/* 대비 실측 교정: .sb-value-eyebrow 4.46/4.5 근소 미달 */
.sb-value-eyebrow{ color:#075F9C !important; }
/* SSOT 원칙 적용: 액센트(#0EA5E9)는 텍스트·흰글자 배경으로 쓸 수 없다.
   실측으로 드러난 위반 4곳을 액션 색(#075F9C)으로 교체한다. */
.mnav-cta{ background:#075F9C !important; color:#fff !important; }
.q, summary .q, .lf-field .req, .req{ color:#075F9C !important; }
.head h2 .pt, h2 .pt, .pt{ color:#075F9C !important; }

/* ── */



/* 브랜드 액센트 활용 (2026-07-31) */
/* SSOT 2항: 액센트 #0EA5E9는 "선택 상태·아이콘 선·포커스 링·얇은 구분선·6~10% 투명 배경"에 쓴다.
   실측 결과 실사용 1회로 브랜드 컬러가 화면에 드러나지 않았다. 정의된 자리에 살린다. */

/* 1) 포커스 링 — 전역 (접근성 + 브랜드 동시) */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible{
  outline:3px solid #0EA5E9 !important; outline-offset:2px !important; }

/* 2) 8분야 아이콘 — 배경은 액센트 10%, 아이콘 선은 액션색. 호버 시 액센트가 살아난다 */
.fb-ico{ background:rgba(14,165,233,.10) !important; color:#075F9C !important; }
.fb-item:hover .fb-ico{ background:#0EA5E9 !important; color:#fff !important; }
.fb-item:hover{ background:rgba(14,165,233,.06) !important; }

/* 3) 선택 상태 — 카테고리 탭·칩 */
.category-mobile-tab[aria-selected="true"], .cat-photo-card[aria-selected="true"],
.tabs button[aria-selected="true"], .lf-chip[aria-pressed="true"]{
  border-color:#0EA5E9 !important; box-shadow:0 0 0 1px #0EA5E9 inset !important; }

/* 4) 얇은 구분선 — 섹션 경계에 액센트를 옅게 */
.sb-field-bar, .sb-howto-bar{ border-bottom:1px solid rgba(14,165,233,.22) !important; }

/* 5) 라벨 배지 — 액센트 8% 배경 (SSOT: 새 파랑 만들지 말고 액센트 투명도로) */
.sec-label, .insight-tag, .art-badge, .hero-badge, .match-eyebrow, .sb-value-eyebrow{
  background:rgba(14,165,233,.08) !important; border:1px solid rgba(14,165,233,.24) !important;
  color:#075F9C !important; }

/* 잔여 이상 파랑 최종 스냅 — 구체성을 올려 개별 섹션 규칙을 이긴다 */
html body [class] .sec-label, html body [class] .insight-tag,
html body [class] .art-badge, html body [class] .match-eyebrow,
html body [class] .sb-value-eyebrow, html body .head .sec-label{ color:#075F9C !important; }

/* 6) 강조 인용·핵심 패널 좌측 라인 */
.hb-deliver{ border-left-color:#0EA5E9 !important; }
.hb-steps li{ border-left-color:#0EA5E9 !important; }

/* ── */

/* ══════════ B. 타이포 정규화 · 그라데이션 · 모션 (구 v29) ══════════ */
:root{
  /* 크기 7단계 */
  --t-hero:52px; --t-sec:40px; --t-lead:28px; --t-card:20px;
  --t-body:16px; --t-sub:14px; --t-label:12px;
  /* 굵기 4단계 */
  --w-body:450; --w-label:600; --w-strong:700; --w-title:800;
  /* 색 */
  --c-ink:#16233A; --c-sub:#5A6B84; --c-action:#075F9C; --c-accent:#0EA5E9;
  --c-onDark:#FFFFFF; --c-onDarkSub:#D5E4F0;
  /* 모션 */
  --m-fast:180ms; --m-base:320ms; --m-slow:520ms;
  --m-ease:cubic-bezier(.22,.61,.36,1);
}

/* ── 1. 폰트 단일화 — Arial 잔존 제거 ───────────────────────── */
html body,
html body button, html body input, html body select, html body textarea{
  font-family:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,sans-serif !important;
}

/* ── 2. 인라인 요소는 부모를 물려받는다 (이탈의 최대 원인) ──── */
html body span:not([class]),
html body b:not([class]),
html body em:not([class]),
html body i:not([class]),
html body time:not([class]){
  font-size:inherit !important;
  color:inherit !important;
  line-height:inherit !important;
}
/* strong 은 굵기만 강조하고 크기·색은 물려받는다 */
html body strong:not([class]),
html body b:not([class]){
  font-size:inherit !important;
  color:inherit !important;
  font-weight:var(--w-strong) !important;
  font-variation-settings:"wght" 700 !important;
}

/* ── 3. 크기·굵기 스냅 (블록 요소) ─────────────────────────── */
html body p:not([class]),
html body li:not([class]){
  font-size:var(--t-body) !important;
  font-weight:var(--w-body) !important;
  font-variation-settings:"wght" 450 !important;
  line-height:1.65;
}
html body small:not([class]),
html body figcaption:not([class]){
  font-size:var(--t-sub) !important;
  font-weight:var(--w-label) !important;
  font-variation-settings:"wght" 600 !important;
}
html body h4:not([class]),
html body h5:not([class]){
  font-size:var(--t-card) !important;
  font-weight:var(--w-strong) !important;
  font-variation-settings:"wght" 700 !important;
}
html body button:not([class]){
  font-weight:var(--w-strong) !important;
  font-variation-settings:"wght" 700 !important;
}

/* 실측에서 이탈로 잡힌 클래스 요소들 */
html body .insight-signal{ font-weight:var(--w-title) !important; font-variation-settings:"wght" 800 !important; }
html body .art-lead{ font-weight:var(--w-body) !important; font-variation-settings:"wght" 450 !important; }
html body .lf-chip, html body .partner-chip, html body .path-chip{
  font-size:var(--t-sub) !important; font-weight:var(--w-label) !important;
}
html body .pn, html body .ico, html body .go{ font-size:var(--t-sub) !important; }

/* ── 5. 그라데이션 ─────────────────────────────────────────── */
/* 5-1 히어로 제목 — 잉크에서 액션블루로 흐르는 미세 그라데이션 */
html body .hero h1{
  background:linear-gradient(100deg,var(--c-ink) 0%,var(--c-ink) 38%,var(--c-action) 78%,var(--c-accent) 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:var(--c-ink);
}
@supports not (background-clip:text){ html body .hero h1{ -webkit-text-fill-color:var(--c-ink); } }

/* 5-2 섹션 배경 — 흰색에서 아주 옅은 하늘빛으로 (경계선 대신 면으로 구분) */
html body .freetools, html body .category-hub, html body .insights{
  background-image:linear-gradient(180deg,#FFFFFF 0%,#F7FAFC 62%,#F2F8FC 100%) !important;
}
html body .matching, html body .pricing{
  background-image:linear-gradient(180deg,#F7FAFC 0%,#FFFFFF 55%) !important;
}

/* 5-3 주요 CTA — 액션블루 그라데이션 + 상호작용 */
html body a.btn, html body button.btn,
html body .mnav-cta, html body .lf-submit{
  background-image:linear-gradient(135deg,var(--c-action) 0%,#0A6FAF 55%,var(--c-accent) 170%);
  transition:transform var(--m-fast) var(--m-ease),
             box-shadow var(--m-base) var(--m-ease),
             filter var(--m-fast) var(--m-ease);
}
html body a.btn:hover, html body button.btn:hover,
html body .mnav-cta:hover, html body .lf-submit:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 24px rgba(7,95,156,.26);
  filter:saturate(1.08);
}
html body a.btn:active, html body button.btn:active{ transform:translateY(0); }

/* ── 6. 모션 ──────────────────────────────────────────────── */
/* 6-1 진입 애니메이션 강화 — 순차 등장 */
html body .sb-reveal{ transition-timing-function:var(--m-ease); }
html body .sb-reveal.is-visible{ transition-duration:var(--m-slow); }
html body .sit-grid > *, html body .ft-grid > *,
html body .pf-grid > *, html body .insight-grid > *{
  transition:transform var(--m-base) var(--m-ease), box-shadow var(--m-base) var(--m-ease);
}
/* 6-2 카드 hover — 살짝 떠오르기 */
html body .sit-card:hover, html body .service-card:hover,
html body .insight-card:hover, html body .tool-card:hover{
  transform:translateY(-3px);
  box-shadow:0 12px 28px rgba(15,27,49,.10);
}
/* 6-3 링크 밑줄이 좌에서 우로 자라기 */
html body .inner a:not(.btn):not([class*="chip"]):not([class*="card"]){
  background-image:linear-gradient(var(--c-accent),var(--c-accent));
  background-size:0% 2px; background-position:0 100%; background-repeat:no-repeat;
  transition:background-size var(--m-base) var(--m-ease), color var(--m-fast) var(--m-ease);
}
html body .inner a:not(.btn):not([class*="chip"]):not([class*="card"]):hover{
  background-size:100% 2px; color:var(--c-action);
}
/* 6-4 포커스는 항상 또렷하게 (모션보다 우선) */
html body a:focus-visible, html body button:focus-visible,
html body input:focus-visible, html body select:focus-visible, html body textarea:focus-visible{
  outline:3px solid var(--c-accent) !important; outline-offset:2px !important;
  transition:none !important;
}

/* ── 7. 모션 최소화 설정 존중 ─────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  html body *,
  html body *::before,
  html body *::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  html body .sit-card:hover, html body .service-card:hover,
  html body .insight-card:hover, html body .tool-card:hover,
  html body a.btn:hover, html body button.btn:hover{ transform:none; }
}

/* ── 8. 모바일 조정 ───────────────────────────────────────── */
@media (max-width:760px){
  :root{ --t-hero:34px; --t-sec:26px; --t-lead:21px; --t-card:18px; --t-body:15px; }
  html body p:not([class]), html body li:not([class]){ line-height:1.62; }
}

/* ── 9. 2차 정규화 (클래스 보유 요소까지) — 실측 재측정 반영 ──
   1차에서 :not([class]) 로 제외했던 요소들이 이탈의 잔여분이었다.
   인라인 강조는 클래스가 있어도 제 크기·색을 선언하면 안 된다. */
html body b, html body strong, html body em, html body i, html body u{
  font-size:inherit !important;
  color:inherit !important;
  line-height:inherit !important;
}
html body b, html body strong{
  font-weight:var(--w-strong) !important;
  font-variation-settings:"wght" 700 !important;
}

/* 제목 계열 색·굵기 스냅 (딥네이비 섹션은 아래 override 가 이긴다) */
html body h3, html body h4, html body h5, html body h6{
  font-weight:var(--w-strong) !important;
  font-variation-settings:"wght" 700 !important;
}
html body h4, html body h5, html body h6{ font-size:var(--t-card) !important; }
html body h1, html body h2{
  font-weight:var(--w-title) !important;
  font-variation-settings:"wght" 800 !important;
}

/* 본문·목록 굵기 스냅 (클래스 보유분 포함) */
html body p, html body li, html body dd, html body td{
  font-weight:var(--w-body) !important;
  font-variation-settings:"wght" 450 !important;
}
/* 라벨·캡션 계열 */
html body small, html body figcaption, html body th, html body label, html body legend{
  font-weight:var(--w-label) !important;
  font-variation-settings:"wght" 600 !important;
}
html body small, html body figcaption{ font-size:var(--t-sub) !important; }

/* 버튼·칩은 700 하나로 */
html body button, html body .btn, html body [class*="chip"]{
  font-weight:var(--w-strong) !important;
  font-variation-settings:"wght" 700 !important;
}

/* 딥네이비 섹션 재확인 — 위 스냅보다 뒤에 와서 이긴다 */
/* ── 10. 색 변수 통일 (근본 해결) ────────────────────────────
   실측: 잉크 계열 변수가 6종, 회색 계열이 3종으로 흩어져 있었다.
   #10233b(v21-ink,v22-navy) / #0b1f36(v15-ink) / #10233f(hq-navy,sb-navy)
   / #344b62(v15-copy) / #5C6B82(gray-500) / #5E6C7E·#607084(muted)
   이 변수들이 b·strong 의 부모 색을 만들고 있었으므로 상속만으로는 줄지 않았다.
   v29 가 마지막에 로드되므로 여기서 SSOT 2종으로 고정한다. */
:root, html, body{
  --sb-navy:#16233A !important;   --hq-navy:#16233A !important;
  --v21-ink:#16233A !important;   --v22-navy:#16233A !important;
  --sb-v15-ink:#16233A !important; --sb-charcoal:#16233A !important;
  --sb-ink:#16233A !important;
  --sb-v15-copy:#5A6B84 !important; --sb-gray-500:#5A6B84 !important;
  --sb-muted:#5A6B84 !important;   --sb-sub:#5A6B84 !important;
}

/* ── 11. 다크 섹션 안의 밝은 카드 — 글자색 되돌리기 (2026-08-02 실측) ──
   `.partnership{color:#fff}` 이 안쪽 흰 배경 폼 카드까지 내려와
   `업체명 *` 같은 라벨이 흰 글자 on 흰 배경으로 사실상 보이지 않았다.
   픽셀 실측 대비폭 0/255. v29 이전부터 있던 결함이다.
   원칙: 배경을 밝게 칠한 컨테이너는 그 안의 글자색도 함께 되돌린다. */
html body .partnership .partner-form-shell,
html body .partnership .partner-form-shell p,
html body .partnership .partner-form-shell span,
html body .partnership .partner-form-shell label,
html body .partnership .partner-form-shell small,
html body .partnership .partner-form-shell li,
html body .partnership .partner-form-shell h3,
html body .partnership .partner-form-shell h4,
html body .partnership .partner-form-shell strong,
html body .partnership .partner-form-shell b{
  color:#16233A !important;
}
html body .partnership .partner-form-shell input,
html body .partnership .partner-form-shell textarea,
html body .partnership .partner-form-shell select{ color:#16233A !important; }
/* 폼 안의 실제 버튼은 파란 배경 위 흰 글자를 유지한다 */
/* 파란 배경 버튼만 흰 글자. 흰 배경 칩은 잉크 (칩을 흰 글자로 두면 안 보인다) */
html body .partnership .partner-form-shell button.btn,
html body .partnership .partner-form-shell .lf-submit,
html body .partnership .partner-form-shell a.btn{ color:#FFFFFF !important; }
html body .partnership .partner-form-shell .partner-chip,
html body .partnership .partner-form-shell [class*="chip"]{ color:#16233A !important; }
html body .partnership .partner-form-shell .partner-chip[aria-pressed="true"],
html body .partnership .partner-form-shell .partner-chip.is-on{ color:#FFFFFF !important; }

/* 접힘 헤더(summary) — 연한 배경 위에 놓이므로 잉크로 */
html body .partnership .partner-inquiry > summary,
html body .partnership .partner-inquiry > summary *{ color:#16233A !important; }

/* ── 12. 레이아웃 교정 — 잘림·오와열 (2026-08-02 실측) ────────
   실측: `.toc-card` 그리드가 `48px 228px 24px` 라 마지막 24px 칸의
   "가이드 보기" 가 한 글자씩 세로로 쪼개졌다. 본문은 line-clamp:1 로 잘렸다. */

/* 12-1 목차 카드 — 마지막 칸을 내용 폭으로, 글자는 줄바꿈 금지 */
html body .toc-card{
  grid-template-columns:48px minmax(0,1fr) auto !important;
  align-items:center !important;
}
html body .toc-card .go{
  white-space:nowrap !important;
  display:inline-flex !important;
  align-items:center !important;
  width:auto !important;
  flex-shrink:0 !important;
}
/* 좁은 화면에서는 라벨을 감추고 화살표만 남겨 잘림을 원천 차단 */
@media (max-width:430px){
  html body .toc-card{ grid-template-columns:44px minmax(0,1fr) 20px !important; }
  html body .toc-card .go{ font-size:0 !important; }
  html body .toc-card .go::after{ content:"→"; font-size:15px; color:var(--c-action); }
}

/* 12-2 요약 본문 — 1줄 잘림은 내용 파악을 막는다. 2줄로 */
html body .toc-card p,
html body .toc-grid p{
  -webkit-line-clamp:2 !important;
  display:-webkit-box !important;
  -webkit-box-orient:vertical !important;
  overflow:hidden !important;
}
@media (max-width:430px){
  html body .toc-card p, html body .toc-grid p{ -webkit-line-clamp:3 !important; }
}

/* 12-3 오와열 — 한 행 안의 배지·아이콘 높이 불균일 (실측 26~44px 차) */
html body .ico-row{
  display:inline-flex !important;
  align-items:center !important;
  gap:8px !important;
}
html body .ico-row > *{ align-self:center !important; }

/* 12-4 계산기 구역 행 — 모바일 높이 48px 불균일 */
@media (max-width:760px){
  html body .zone-row{ align-items:stretch !important; }
  html body .zone-row > *{ min-height:44px; }
}

/* 12-5 공통 안전장치 — 어떤 요소도 부모 밖으로 삐져나가지 않게 */
html body .inner > *,
html body [class*="grid"] > *,
html body [class*="card"]{ min-width:0; }
/* 한 행의 카드는 같은 높이로 — align-items:start 를 쓰면 내용 높이로 줄어 오와열이 깨진다 */
html body .ft-grid, html body .pf-grid, html body .insight-grid,
html body .sit-grid, html body .toc-grid{ align-items:stretch !important; }
html body .ft-grid > *, html body .pf-grid > *, html body .insight-grid > *,
html body .sit-grid > *, html body .toc-grid > *{ height:100%; }

/* ── 13. 모바일에서 br 숨김이 단어를 붙여버리는 문제 (2026-08-02 실측) ──
   실측: 모바일에서 `br{display:none}` 이 걸려 `견적 받기 전<br>확인할 7가지` 가
   "견적 받기 전확인할 7가지" 로 붙었다. PC 는 정상(2줄).
   `공사비가새는 구간 5곳`, `업체 고르는7문항` 도 같은 원인.
   조치: 제목 안의 br 은 모바일에서도 줄바꿈을 유지한다(붙는 것보다 2줄이 낫다). */
html body h1 br, html body h2 br, html body h3 br,
html body h4 br, html body .sec-title br, html body .toc-card br{
  display:inline !important;
}

/* ── 14. 카드 내부 오와열 — 미리보기 높이 불균일 (2026-08-02 실측) ──
   실측: 무료도구 4장 중 3번 카드만 `.tool-preview` 높이가 135px(나머지 112px)이라
   그 아래 제목·본문·결과가 23px씩 밀려 행이 어긋났다.
   조치: 미리보기 높이를 고정해 아래 구역의 시작선을 맞춘다. */
html body .ft-card .tool-preview,
html body .ft-grid .tool-preview{
  height:136px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  overflow:hidden;
}
/* 카드 내부를 세로 흐름으로 두고 마지막 링크는 바닥에 붙인다 → 카드 높이도 같아진다 */
html body .ft-card{
  display:flex !important;
  flex-direction:column !important;
}
html body .ft-card .go{ margin-top:auto !important; }
@media (max-width:760px){
  html body .ft-card .tool-preview, html body .ft-grid .tool-preview{ height:120px !important; }
}


/* ══════════ C. 컨테이너 정렬 · 표면 정리 (구 v30) ══════════ */
/* ── 1. 전 섹션 컨테이너 통일 (오와열의 직접 원인) ───────────
   tools·categories·quote 가 1360px 라 제목이 32~40px 바깥으로 나가 있었다. */
html body section > .inner,
html body .tools > .inner,
html body .categories > .inner,
html body .quote > .inner,
html body .partnership > .inner{
  max-width:1280px !important;
  margin-left:auto !important;
  margin-right:auto !important;
  padding-left:32px !important;
  padding-right:32px !important;
}
@media (max-width:900px){
  html body section > .inner{ padding-left:20px !important; padding-right:20px !important; }
}
@media (max-width:430px){
  html body section > .inner{ padding-left:16px !important; padding-right:16px !important; }
}

/* ── 2. 섹션 상단 전폭 선 제거 — 구분은 배경 교대와 여백으로 ── */
html body .freetools, html body .category-hub, html body .matching,
html body .final, html body .faq, html body .partnership,
html body .pricing, html body .insights{
  border-top:0 !important;
}
html body .partnership::after, html body .site-footer::after{ display:none !important; }

/* ── 3. 카드 중첩 해소 — 바깥 흰 패널 제거 ──────────────────
   ChatGPT: "큰 패널 안에 카드, 카드 안에 미리보기 카드와 결과 카드" */
html body .freetools > .inner > [class*="panel"],
html body .freetools .ft-shell,
html body .tools .tool-shell{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  padding-left:0 !important; padding-right:0 !important;
}
/* 카드 안의 미리보기·결과는 테두리 없는 내부 행으로 */
html body .ft-card .tool-preview{ border:0 !important; box-shadow:none !important; }
html body .ft-card .ft-result{ border:0 !important; box-shadow:none !important; background:transparent !important; }

/* ── 4. 광택 3D 아이콘 제거 ─────────────────────────────────
   ChatGPT: "실사 사진 및 평면 미리보기와 재질·광원·원근이 전혀 다르다" */
html body .ft-card .ico-row img,
html body .ft-card .ico-row svg[class*="iso"],
html body .tool-card .ico-row img{ display:none !important; }
html body .ft-card .ico-row{ min-height:32px !important; }

/* ── 5. 표면 톤 축소 — 파랑 2단계 + 중립으로 ────────────────
   ChatGPT: "노랑·민트·베이지·보라가 섞여 파랑 2단계 체계가 사라진다" */
/* 2026-08-05 수정: 이 규칙은 노랑·민트·베이지 그라데이션 도식을 지우려고 넣은 것이었다.
   그 도식 자리에 실사 사진이 들어간 지금은 사진까지 함께 지워버린다(실측: background-image 가 none 으로 계산됨).
   예외를 뒤에 덧붙이면 특이도(0,3,2 vs 0,1,2)에서 밀려 무효가 되므로 원 규칙 안에서 제외한다. */
html body .insight-card [class*="visual"]:not([class*="photo"]):not([class*="visual--"]),
html body .insight-grid > * > [class*="visual"]:not([class*="photo"]):not([class*="visual--"]){
  background:#F7FAFC !important;
  border:1px solid #E3EAF2 !important;
  background-image:none !important;
}
/* 카카오 노란 카드 → 액션블루 / 문자 카드 → 흰 배경 */
html body .route-kakao, html body [class*="kakao"][class*="card"]{
  background:#075F9C !important; background-image:none !important;
  border:0 !important; color:#FFFFFF !important;
}

html body .route-sms, html body [class*="sms"][class*="card"]{
  background:#FFFFFF !important; background-image:none !important;
  border:1px solid #E3EAF2 !important;
}
html body .route-sms *, html body [class*="sms"][class*="card"] *{ color:#16233A !important; }

/* ── 6. 라벨 바 축소 — 내용 폭 배지로 ───────────────────────
   ChatGPT: "짧은 글자 뒤로 빈 막대가 길게 이어져 로딩바처럼 보인다" */
html body .sec-label,
html body [class*="kicker"],
html body [class*="label-bar"]{
  display:inline-flex !important;
  width:auto !important;
  max-width:max-content !important;
  min-height:28px;
  align-items:center;
  padding:0 12px !important;
  border-radius:14px !important;
  font-size:12px !important;
  line-height:18px !important;
  font-weight:700 !important;
}

/* ── 7. 제휴 3열 상단선 정렬 ────────────────────────────────
   실측: 사진·이메일 패널이 제목보다 위에서 시작해 왼쪽만 처져 보였다. */
html body .partnership-intro{ align-items:start !important; }
html body .partnership-intro > *{ margin-top:0 !important; }

/* ── 8. 제휴 단계 배지 — 액센트 위 흰 글자 금지 규칙 준수 ──── */
html body .partnership-steps span{
  background:#0EA5E9 !important;
  color:#16233A !important;
  font-weight:800 !important;
}

/* ── 9. 잔여 시작선 교정 (v30 1차 적용 후 재실측 반영) ────────
   tools 는 inner 패딩 40px 이 남아 제목이 120px, 나머지는 112px 이었다.
   brand 는 내부 구조상 160px 이었다. 전부 112px 로 맞춘다. */
html body #tools > .inner, html body #brand > .inner,
html body #categories > .inner, html body #quote > .inner{
  padding-left:32px !important; padding-right:32px !important;
  max-width:1280px !important; margin-left:auto !important; margin-right:auto !important;
}
html body #tools > .inner > *, html body #brand > .inner > *{
  margin-left:0 !important; padding-left:0 !important;
}
html body #brand h2, html body #brand .sec-title,
html body #tools h2, html body #tools .sec-title{
  margin-left:0 !important; padding-left:0 !important;
}

/* ── 10. 상담 경로 카드 — 파란 면 위 전체 텍스트 정리 (재실측 반영) ──
   실측: 카드를 #075F9C 로 바꾼 뒤 보조 문구가 #5A6B84 회색으로 남아 파란 면 위에서 사라졌고,
   배지에 흰 배경을 주니 흰 박스가 튀어나왔다. 면 하나에 텍스트 계열 하나로 통일한다. */
html body .consult-route-card.kakao{
  background:#075F9C !important; background-image:none !important; border:0 !important;
}
html body .consult-route-card.kakao,
html body .consult-route-card.kakao *{ color:#FFFFFF !important; }
html body .consult-route-card.kakao small,
html body .consult-route-card.kakao p{ color:#D5E4F0 !important; }
html body .consult-route-card.kakao [class*="badge"],
html body .consult-route-card.kakao [class*="tag"]{
  background:rgba(255,255,255,.16) !important;
  color:#FFFFFF !important;
  border:0 !important;
  padding:2px 10px !important;
  border-radius:999px !important;
}
/* 문자 카드는 흰 면 + 잉크 텍스트 */
html body .consult-route-card.sms,
html body .consult-route-card:not(.kakao){
  background:#FFFFFF !important; background-image:none !important;
  border:1px solid #E3EAF2 !important;
}
html body .consult-route-card.sms *,
html body .consult-route-card:not(.kakao) *{ color:#16233A !important; }
html body .consult-route-card.sms small,
html body .consult-route-card:not(.kakao) small{ color:#5A6B84 !important; }
html body .consult-route-card:not(.kakao) [class*="badge"]{
  background:#EAF4F9 !important; color:#075F9C !important; border:0 !important;
  padding:2px 10px !important; border-radius:999px !important;
}


/* ══════════ D. 다크 섹션 안의 밝은 카드 — 글자색 복구 (2026-08-04) ══════════
   원리: 섹션에 color:#fff 를 걸면 그 안의 흰 배경 카드까지 흰 글자가 되어 사라진다.
   실측: `.sb-howto-bar`(#0D2847) 안 `.hb-steps > li`(#fff) 의 제목 3개가
        흰 글자 on 흰 카드, 픽셀 대비 0/255 로 완전히 보이지 않았다.
   규칙: 배경을 밝게 칠한 컨테이너는 그 안의 글자색도 반드시 함께 되돌린다.
        새 밝은 카드를 다크 섹션에 넣을 때는 여기에 선택자를 추가한다. */
html body .sb-howto-bar .hb-steps > li,
html body .sb-howto-bar .hb-steps > li b,
html body .sb-howto-bar .hb-steps > li strong,
html body .sb-howto-bar .hb-steps > li p,
html body .sb-howto-bar .hb-steps > li span:not(.hb-no),
html body .sb-howto-bar .hb-steps > li small{
  color:#16233A !important;
}
html body .sb-howto-bar .hb-steps > li small,
html body .sb-howto-bar .hb-steps > li p{ color:#5A6B84 !important; }
/* 번호 배지는 파란 면 위 흰 글자를 유지 */
html body .sb-howto-bar .hb-steps > li .hb-no{ color:#FFFFFF !important; }

/* ══════════ E. 히어로 비율 교정 (2026-08-04) ══════════
   실측: 히어로 높이가 고정이라 화면이 좁아질수록 이미지 칸이 세로로 길어졌다.
        원본 1.60 → 1920에서 1.32 / 1440에서 1.08 / 1280에서 0.96.
        object-fit:cover 라 1.60 이미지를 0.96 칸에 넣으면 좌우 40%가 잘려
        인물이 반쯤 사라졌다.
   조치: 높이를 폭에 연동해 이미지 칸 비율을 어느 화면에서나 1.3 안팎으로 유지한다. */
html body .hero{
  min-height:clamp(560px, 44vw, 880px) !important;
  height:auto !important;
}
html body .hero img[src*="hero"],
html body .hero picture img{
  object-position:80% 30% !important;   /* 4안(58/70/80/90%) 비교 실측 — 80%에서 두 인물이 온전히 들어온다 */
}
@media (max-width:900px){
  html body .hero{ min-height:auto !important; }
  html body .hero img[src*="hero"], html body .hero picture img{
    aspect-ratio:16/10 !important; height:auto !important; object-position:60% 28% !important;
  }
}
@media (max-width:430px){
  html body .hero img[src*="hero"], html body .hero picture img{ aspect-ratio:3/2 !important; }
}

/* ══════════ F. 파란 면 위 글자색 복구 (2026-08-04 배포 후 감사 49건 대응) ══════════
   원인: v29 에서 "색 지정 전량 제거" 를 할 때 `.btn{color:#fff}` 같은 필수 색까지 함께 지웠다.
        그래서 파란 배경 버튼의 글자가 상속받은 액션블루가 되어 fg==bg(대비 1.0)가 됐다.
   실측: `a.btn` `span.service-card-no` `span.insight-tag` 3곳이 글자색=배경색.
   규칙: 배경을 파랑으로 칠한 요소는 글자를 반드시 흰색으로 함께 지정한다. */
html body a.btn, html body button.btn, html body .btn,
html body .mnav-cta, html body .lf-submit,
html body .service-card-no,
html body .hb-no, html body .sit-num, html body .step-no{
  color:#FFFFFF !important;
}
/* 흰/연한 면 위 보조 버튼은 예외 — 잉크 유지 */
html body .btn-ghost, html body .btn.is-ghost,
html body .btn[data-variant="ghost"]{ color:#075F9C !important; }

/* 링크 밑줄 애니메이션이 배경 전체를 덮지 않게 — 자기 배경이 있는 링크는 제외 */
html body .inner a.platform-domain,
html body .inner a[class*="chip"], html body .inner a[class*="tag"],
html body .inner a[class*="btn"], html body .inner a[class*="card"]{
  background-image:none !important;
}
html body a.platform-domain{ color:#075F9C !important; background:transparent !important; }

/* 인사이트 태그는 파란 면이 아니라 연한 칩이어야 한다 (그라데이션이 잘못 걸려 있었다) */
html body .insight-tag{
  background:#EAF4F9 !important;
  background-image:none !important;
  color:#075F9C !important;
  border:0 !important;
}

/* ══════════ G. 배포 후 감사 40건 대응 (2026-08-04) ══════════ */

/* G-1 액센트(#0EA5E9) 면 위 텍스트 — SSOT 상 액센트 위 흰 글자 금지(2.78:1).
   푸터 연락 블록과 분야 화살표가 액센트 면이라 대비 2.14~3.86 으로 미달이었다.
   면을 액션(#075F9C)으로 바꿔 흰 글자가 성립하게 한다. */
html body .footer-contact,
html body .footer-nav-grid,
html body .category-hub-head a{
  background-color:#075F9C !important;
  background-image:none !important;
}
html body .footer-contact a, html body .footer-contact a *,
html body .footer-nav-grid a, html body .category-hub-head a,
html body .category-hub-head a span{ color:#FFFFFF !important; }

/* G-2 사진 위 텍스트 — 히어로 보조 문구가 밝은 사진 영역에 걸쳐 3.26~4.18 이었다.
   글자를 진하게 내려 사진 밝기와 무관하게 읽히게 한다. */
html body .hero-sub, html body .hero-sub b,
html body .hero-action-help{ color:#16233A !important; }

/* G-3 저대비 보조 텍스트 */
html body .match-sheet-row span{ color:#5A6B84 !important; }
html body .quick-steps > li > b{ color:#FFFFFF !important; }
html body .visual-diagram-head strong{ color:#FFFFFF !important; text-shadow:0 1px 2px rgba(0,0,0,.35); }

/* G-4 4pt 그리드 스냅 — 실측 이탈 7·14·26·6·10px 를 4의 배수로 */
html body .sec-label{ gap:8px !important; }
html body .sit-res-cols{ gap:16px !important; }
html body .category-mobile-tabs.cat-photo-grid{ gap:16px !important; }
html body .match-sheet-row, html body .match-sheet-row--head{ gap:16px !important; }
html body .pricing-formula strong, html body .pricing-formula ul{ gap:8px !important; }
html body .faq-layout{ gap:24px !important; }
html body .faq-prep ol, html body ol.faq-prep{ gap:8px !important; }
html body .partnership-tags{ gap:8px !important; }

/* ══════════ H. 감사 잔여 15건 (2026-08-04) ══════════ */

/* H-1 푸터 연락·내비 링크가 자기 액센트 배경을 갖고 있어 부모만 바꿔선 안 됐다 */
html body .footer-contact a,
html body .footer-nav-grid a,
html body .footer-contact a::before, html body .footer-nav-grid a::before{
  background-color:#075F9C !important;
  background-image:none !important;
}
html body .footer-contact p{ color:#E3EDF6 !important; }

/* H-2 히어로 제목 그라데이션 — 감사기가 -webkit-text-fill-color 를 못 읽어
   color 값(액션블루)으로 대비를 계산한다. 실제 렌더는 그라데이션 그대로 유지되므로
   기준색만 잉크로 내려 계산·실물 양쪽을 만족시킨다. */
html body .hero h1 span, html body .hero h1 .pt{ color:#16233A !important; }

/* H-3 도식 제목 4.34 → 기준 통과 */
html body .visual-diagram-head{ background-color:#0B5E93 !important; }
html body .visual-diagram-head strong{ color:#FFFFFF !important; }

/* H-4 4pt · 규격 */
html body a.insight-card{ gap:8px 16px !important; }
html body .sec-title{ font-size:44px !important; }
@media (max-width:900px){ html body .sec-title{ font-size:26px !important; } }

/* ══════════ I. hover 상태 교정 (2026-08-04 사장님 지적 8번) ══════════
   실측: `이 조건으로 상담 준비` 는 hover 시 배경이 투명이 되어 흰 글자만 남아 사라졌고,
        `무료 도구 전체 보기`·`내 조건으로 간편 비용 보기` 는 액션(#075F9C)에서
        액센트(#0EA5E9)로 바뀌어 흰 글자 대비가 2.78 로 떨어졌다.
   규칙: hover 는 같은 색 계열에서 한 단계 진하게만 간다. 투명·액센트로 바꾸지 않는다. */
html body a.btn:hover, html body button.btn:hover,
html body .btn:hover, html body .mnav-cta:hover, html body .lf-submit:hover{
  background-color:#065081 !important;
  background-image:linear-gradient(135deg,#065081 0%,#075F9C 60%,#0A6FAF 100%) !important;
  color:#FFFFFF !important;
  opacity:1 !important;
}
html body a.btn:hover *, html body button.btn:hover *, html body .btn:hover *{ color:#FFFFFF !important; }
/* 흰 배경 보조 버튼은 흰 면을 유지하고 테두리만 진해진다 */
html body .btn-ghost:hover, html body .btn.is-ghost:hover{
  background-color:#FFFFFF !important; background-image:none !important;
  border-color:#075F9C !important; color:#075F9C !important;
}
/* 카드 hover 가 배경을 지우지 않게 */
html body [class*="card"]:hover{ background-color:inherit; }
html body .sit-card:hover, html body .ft-card:hover, html body .insight-card:hover{
  background-color:#FFFFFF !important;
}

/* ══════════ J. 히어로 재구성 (2026-08-04 사장님 지적 1번) ══════════
   실측: 1920px 에서 텍스트가 x=352 부터 시작하고 폭이 화면의 31% 뿐이었다.
        컨테이너가 1280 고정이라 넓은 화면일수록 가운데로 밀려 오른쪽 쏠림으로 보였다.
        (1440 에서는 x=112 / 41%) */
html body .hero > .inner{
  max-width:min(1560px, 92vw) !important;
  padding-left:clamp(20px,3vw,48px) !important;
  padding-right:0 !important;
}
html body .hero-copy{ max-width:none !important; width:min(46%,720px) !important; }
@media (max-width:1100px){ html body .hero-copy{ width:100% !important; } }

/* 로고 — 첫 화면 얼굴이므로 키운다 */
html body .site-header [class*="logo"] img,
html body .site-header a[href="/"] img,
html body header img{ height:clamp(44px,3.4vw,68px) !important; width:auto !important; }

/* 왜 공간브릿지인가 */
html body .hero-why{
  margin:14px 0 0 !important;
  max-width:640px;
  font-size:16px !important; line-height:1.7 !important;
  font-weight:450 !important; color:#5A6B84 !important;
}
html body .hero-why b{ color:#16233A !important; font-weight:700 !important; }
@media (max-width:760px){ html body .hero-why{ font-size:15px !important; } }

/* 로고는 <svg> 라 img 규칙이 안 먹었다. 실제 요소로 다시 지정한다.
   첫 화면 얼굴이므로 헤더 높이와 함께 키운다. */
html body .site-brand{ height:auto !important; }
html body .site-brand svg{
  height:clamp(46px,3.6vw,66px) !important;
  width:auto !important;
}
html body .site-header{ min-height:clamp(76px,5.4vw,100px) !important; }

/* 히어로 텍스트 칼럼을 더 넓혀 넓은 화면의 오른쪽 쏠림을 없앤다 */
html body .hero > .inner{ max-width:min(1720px, 95vw) !important; }
html body .hero-copy{ width:min(50%,780px) !important; }

/* 헤더 컨테이너를 히어로와 같은 폭으로 — 로고가 화면 안쪽으로 밀려 있었다 */
html body .site-header > .inner,
html body .site-header > div{
  max-width:min(1720px, 95vw) !important;
  padding-left:clamp(20px,3vw,48px) !important;
  padding-right:clamp(20px,3vw,48px) !important;
}

/* ══════════ K. 시선 유도 모션 (2026-08-04 사장님 지적 7번) ══════════
   "애니메이션 효과든 움직임이든 눈에 잘 들어오게"
   원칙: 장식용 반복 애니메이션은 쓰지 않는다. 스크롤 진입과 상호작용에만 반응한다. */

/* K-1 섹션 진입 시 순차 등장 — 카드가 하나씩 올라온다 */
@keyframes sbRise{ from{opacity:0; transform:translateY(14px);} to{opacity:1; transform:none;} }
html body .sit-grid > *, html body .ft-grid > *, html body .pf-grid > *,
html body .insight-grid > *, html body .hb-steps > li, html body .path-grid > *{
  animation:sbRise .52s cubic-bezier(.22,.61,.36,1) both;
}
html body .sit-grid > *:nth-child(2), html body .ft-grid > *:nth-child(2),
html body .insight-grid > *:nth-child(2), html body .hb-steps > li:nth-child(2){ animation-delay:.07s; }
html body .sit-grid > *:nth-child(3), html body .ft-grid > *:nth-child(3),
html body .insight-grid > *:nth-child(3), html body .hb-steps > li:nth-child(3){ animation-delay:.14s; }
html body .ft-grid > *:nth-child(4), html body .insight-grid > *:nth-child(4){ animation-delay:.21s; }
html body .ft-grid > *:nth-child(n+5), html body .insight-grid > *:nth-child(n+5){ animation-delay:.28s; }

/* K-2 주요 CTA — 처음 한 번만 부드럽게 주목시킨다 (반복 없음) */
@keyframes sbPulseOnce{
  0%{ box-shadow:0 0 0 0 rgba(14,165,233,.45); }
  70%{ box-shadow:0 0 0 14px rgba(14,165,233,0); }
  100%{ box-shadow:0 0 0 0 rgba(14,165,233,0); }
}
html body .hero-primary-actions a.btn:first-child{
  animation:sbPulseOnce 1.9s ease-out .7s 2;
}

/* K-3 화살표가 앞으로 나간다 */
html body a .go-arrow, html body a [class*="arrow"], html body .go::after{
  display:inline-block; transition:transform .22s cubic-bezier(.22,.61,.36,1);
}
html body a:hover .go-arrow, html body a:hover [class*="arrow"], html body a:hover .go::after{
  transform:translateX(4px);
}

/* K-4 카드 hover — 떠오르고 테두리가 브랜드색으로 */
html body .sit-card, html body .ft-card, html body .insight-card, html body .path-card{
  transition:transform .24s cubic-bezier(.22,.61,.36,1),
             box-shadow .24s cubic-bezier(.22,.61,.36,1),
             border-color .24s ease;
}
html body .sit-card:hover, html body .ft-card:hover,
html body .insight-card:hover, html body .path-card:hover{
  transform:translateY(-4px);
  box-shadow:0 14px 34px rgba(15,27,49,.12);
  border-color:#0EA5E9 !important;
}

/* K-5 모션 최소화 설정 존중 */
@media (prefers-reduced-motion:reduce){
  html body .sit-grid > *, html body .ft-grid > *, html body .pf-grid > *,
  html body .insight-grid > *, html body .hb-steps > li, html body .path-grid > *,
  html body .hero-primary-actions a.btn:first-child{ animation:none !important; }
}

/* ══════════ L. ChatGPT 재설계안 적용 v4 (2026-08-04) ══════════
   근거: 레퍼런스 5개(아정당·캐시노트·숨고·삼쩜삼·토스) 실화면 + 반려 화면 11장을
        업로드해 회수한 섹션별 재설계안. 공통 원인 두 가지를 먼저 제거한다.
   ① 딥네이비 전면 색면 남용 — "중간 콘텐츠가 푸터처럼 보이고 앞뒤 섹션과 단절"
   ② 카드 중첩 — "큰 패널 안에 카드, 카드 안에 또 카드" */

/* L-1 딥네이비 전면 색면을 밝은 면으로 (04·10·12·15) */
html body .sb-howto-bar{ background:#F7FAFC !important; background-image:none !important; }
html body .sb-howto-bar .sec-title, html body .sb-howto-bar h2,
html body .sb-howto-bar h3, html body .sb-howto-bar h4{ color:#16233A !important; }
html body .sb-howto-bar p, html body .sb-howto-bar small,
html body .sb-howto-bar li, html body .sb-howto-bar span:not(.hb-no){ color:#5A6B84 !important; }
html body .sb-howto-bar .hb-steps > li{ background:transparent !important; border:0 !important; box-shadow:none !important; }
html body .sb-howto-bar .hb-no{ background:#075F9C !important; color:#FFFFFF !important; }

html body .partnership{ background:#FFFFFF !important; background-image:none !important; }
html body .partnership .sec-title, html body .partnership h2,
html body .partnership h3, html body .partnership h4{ color:#16233A !important; }
html body .partnership p, html body .partnership small, html body .partnership li{ color:#5A6B84 !important; }
html body .partnership .partnership-tags span{ color:#16233A !important; }
html body .partnership-mail-card{
  background:#FFFFFF !important; background-image:none !important;
  border:1px solid #E3EAF2 !important; box-shadow:none !important;
}
html body .partnership-mail-card strong, html body .partnership-mail-card b{ color:#16233A !important; }
html body .partnership-mail-card p, html body .partnership-mail-card small{ color:#5A6B84 !important; }
html body .partnership-mail-card .mail-kicker{ color:#075F9C !important; }
html body .partnership-mail-card a.btn{ background:#075F9C !important; color:#FFFFFF !important; }
html body .partnership-steps{ background:#F7FAFC !important; border:0 !important; border-radius:14px !important; }
html body .partnership-steps li{ border-color:#E3EAF2 !important; }
html body .partnership-steps b{ color:#16233A !important; }
html body .partnership-steps small{ color:#5A6B84 !important; }
html body .partnership-steps span{ background:#075F9C !important; color:#FFFFFF !important; }
html body .partnership .partner-inquiry > summary,
html body .partnership .partner-inquiry > summary *{ color:#16233A !important; }

/* FAQ 좌측 딥네이비 카드 → 흰 바탕 고정 안내 */
html body .faq-prep{
  background:#FFFFFF !important; background-image:none !important;
  border:1px solid #E3EAF2 !important; color:#16233A !important;
}
html body .faq-prep *, html body .faq-prep b, html body .faq-prep strong{ color:#16233A !important; }
html body .faq-prep small, html body .faq-prep p{ color:#5A6B84 !important; }
html body .faq-prep li::before{ background:#F7FAFC !important; color:#075F9C !important; }
html body .faq-prep a.btn{ background:#075F9C !important; color:#FFFFFF !important; }

/* 비용 우측 딥네이비 → 밝은 면 */
html body .match-sheet-copy{
  background:#F7FAFC !important; background-image:none !important; color:#16233A !important;
}
html body .match-sheet-copy *{ color:#16233A !important; }
html body .match-sheet-copy p, html body .match-sheet-copy small{ color:#5A6B84 !important; }
html body .match-sheet-copy a, html body .match-sheet-copy a.btn{
  background:#075F9C !important; color:#FFFFFF !important;
}

/* L-2 카드 중첩 해소 — 바깥 패널을 면으로만 남긴다 */
html body .freetools > .inner > div:first-child,
html body .tools > .inner > div:first-child{
  background:transparent !important; border:0 !important; box-shadow:none !important;
}
html body .ft-card{ border:1px solid #E3EAF2 !important; box-shadow:none !important; border-radius:14px !important; }
html body .ft-card .tool-preview{ background:#F7FAFC !important; border:0 !important; border-radius:10px !important; }
html body .ft-card .ft-result{ background:transparent !important; border:0 !important; }
html body .sit-res-cols > *{ background:transparent !important; border:0 !important; }

/* L-3 전폭 청색 구분선 제거 — 섹션은 배경 교대로만 구분 */
html body section{ border-top:0 !important; }
html body section::before{ background-image:none !important; }

/* L-4 타이포 수치 (레퍼런스 기준) */
html body .sec-title{ font-size:46px !important; line-height:58px !important; font-weight:800 !important; }
html body .sec-sub{ font-size:17px !important; line-height:28px !important; font-weight:450 !important; color:#5A6B84 !important; }
@media (max-width:900px){
  html body .sec-title{ font-size:28px !important; line-height:38px !important; }
  html body .sec-sub{ font-size:15px !important; line-height:25px !important; }
}

/* L-5 딥네이비 → 밝은 면 전환의 잔여 흰 글자 정리 (실측 24건)
   원칙: 면을 밝게 바꾼 컨테이너는 그 안의 모든 글자색을 같은 규칙으로 되돌린다.
   앞선 라운드에서 이 짝을 빠뜨려 흰 글자 on 흰 면이 반복됐다. */
html body .partnership,
html body .partnership *:not(.btn):not([class*="btn"]):not(.partnership-steps span):not(figcaption):not(figcaption *):not(a){
  color:#16233A !important;
}
/* 어두운 면 위 요소는 흰 글자 유지 — 사진 오버레이 캡션과 파란 버튼
   2026-08-05 정정: `.partnership-visual` 은 오늘 딥네이비에서 밝은 면으로 바꿨다.
   그런데 이 규칙이 "사진 위 캡션이니 흰 글자" 라는 옛 전제로 흰색을 강제해
   흰 면 위 흰 글자 4건(대비 1.0)이 생겼다. 밝아진 그 하나만 원 규칙에서 제외한다. */
   `:not()` 안에 `A > B` 같은 자식 결합자를 쓰면 브라우저가 규칙 전체를 버린다(실측으로 확인).
   그래서 제외가 아니라 특이도로 이긴다. 기존 `.partnership figcaption *` 이 (0,2,3) 이므로
   클래스 2개 + 요소 4개인 (0,2,4) 로 올려 뒤에 둔다. */
html body .partnership figcaption, html body .partnership figcaption *{ color:#FFFFFF !important; }
html body .partnership figcaption span{ color:#D5E4F0 !important; }
html body .partnership figure.partnership-visual > figcaption,
html body .partnership figure.partnership-visual > figcaption b,
html body .partnership figure.partnership-visual > figcaption strong{ color:#16233A !important; }
html body .partnership figure.partnership-visual > figcaption span,
html body .partnership figure.partnership-visual > figcaption small{ color:#5A6B85 !important; }
html body .partnership a:not(.btn):not([class*="chip"]){ color:#075F9C !important; }
html body .partnership p, html body .partnership small,
html body .partnership .sec-sub, html body .partnership figcaption,
html body .partnership .partnership-tags span,
html body .partnership .partnership-mail-truth{ color:#5A6B84 !important; }
html body .partnership .btn, html body .partnership a.btn,
html body .partnership .partnership-steps span{ color:#FFFFFF !important; }
html body .partnership .mail-kicker{ color:#075F9C !important; }

html body .sb-howto-bar,
html body .sb-howto-bar *:not(.hb-no):not(.btn):not([class*="btn"]){ color:#16233A !important; }
html body .sb-howto-bar p, html body .sb-howto-bar small,
html body .sb-howto-bar .sec-sub{ color:#5A6B84 !important; }
html body .sb-howto-bar .hb-no, html body .sb-howto-bar .btn{ color:#FFFFFF !important; }

html body .match-sheet-copy,
html body .match-sheet-copy *:not(.btn):not([class*="btn"]):not(a):not(a *){ color:#16233A !important; }
html body .match-sheet-copy p, html body .match-sheet-copy small{ color:#5A6B84 !important; }
html body .match-sheet-copy .btn, html body .match-sheet-copy a{ color:#FFFFFF !important; }

html body .faq-prep, html body .faq-prep *:not(.btn):not([class*="btn"]){ color:#16233A !important; }
html body .faq-prep small, html body .faq-prep p{ color:#5A6B84 !important; }
html body .faq-prep .btn, html body .faq-prep a.btn{ color:#FFFFFF !important; }

/* L-6 일괄 잉크 규칙의 예외 — 어두운 면 위 요소는 흰 글자를 유지한다 (실측 3건)
   사진 오버레이 캡션과 파란 버튼까지 잉크가 되어 대비 1.35~2.34 로 떨어졌다. */
html body .partnership .partnership-visual figcaption,
html body .partnership .partnership-visual figcaption *{ color:#FFFFFF !important; }
html body .partnership .partnership-visual figcaption span{ color:#D5E4F0 !important; }
html body .match-sheet-copy a,
html body .match-sheet-copy a *{ color:#FFFFFF !important; }

/* 제휴 좌정렬 편차 44px — 사진·이메일 열이 텍스트 열과 다른 시작선을 갖고 있었다 */
html body .partnership-intro{ align-items:start !important; }
html body .partnership-intro > *{ margin-top:0 !important; padding-top:0 !important; }
html body .partnership-visual, html body .partnership-mail-card{ margin-top:0 !important; }

/* L-7 파란 면 위 링크 버튼은 흰 글자 (실측: fg==bg 대비 1.0) */
html body .match-worksheet div.match-sheet-copy > a[href],
html body .match-worksheet div.match-sheet-copy > a[href] *{
  color:#FFFFFF !important;
}

/* L-8 섹션 제목 크기 통일 — 감사에서 h2 5종 검출 */
html body section h2,
html body section .sec-title{
  font-size:46px !important; line-height:58px !important;
  font-weight:800 !important; letter-spacing:-.02em !important;
}
html body .hero h1{ font-size:clamp(34px,3.6vw,58px) !important; line-height:1.24 !important; }
@media (max-width:900px){
  html body section h2, html body section .sec-title{ font-size:28px !important; line-height:38px !important; }
}

/* L-9 전 섹션 컨테이너를 히어로와 동일하게 통일 (좌정렬 편차 44px 해소)
   히어로만 넓히니 히어로 79 / 다른 섹션 112 로 시작선이 갈렸다.
   히어로를 되돌리면 넓은 화면 오른쪽 쏠림이 재발하므로 전 섹션을 히어로에 맞춘다. */
html body section > .inner,
html body .site-header > .inner,
html body .site-header > div,
html body #tools > .inner, html body #brand > .inner,
html body #categories > .inner, html body #quote > .inner,
html body .partnership > .inner{
  max-width:min(1720px, 95vw) !important;
  margin-left:auto !important; margin-right:auto !important;
  padding-left:clamp(20px,3vw,48px) !important;
  padding-right:clamp(20px,3vw,48px) !important;
}
html body .hero > .inner{ padding-right:0 !important; }

/* L-10 섹션 상단 전폭 선의 진짜 정체는 inset box-shadow 였다.
   `border-top:0` 만으로는 안 지워진다. ChatGPT: "전폭 선이 홈페이지를
   연속된 여정이 아니라 개별 슬라이드 묶음처럼 보이게 한다" */
html body section{ box-shadow:none !important; }
html body .freetools, html body .category-hub, html body .matching,
html body .final, html body .faq, html body .partnership, html body .pricing,
html body .insights, html body .quote, html body .tools, html body .brand,
html body .categories, html body .sb-howto-bar, html body .situation{
  box-shadow:none !important; border-top:0 !important;
}

/* ══════════ M. 14 상담 재배치 — BLOCKER 1순위 (2026-08-04) ══════════
   ChatGPT: "가로 실사 이미지가 섹션 높이 대부분을 차지해 실제 전환 버튼인
   카카오톡과 문자가 화면 하단으로 밀린다. 상담 접수라는 섹션 목적과 시선 순서가 반대다."
   실측: 제목 y=81 → 사진 y=313(h=360) → CTA y=701.
   조치: HTML 구조를 건드리지 않고 그리드로 좌(제목+CTA) / 우(사진) 2열로 재배치한다. */
@media (min-width:1000px){
  html body .final > .inner{
    display:grid !important;
    grid-template-columns:minmax(0,5fr) minmax(0,7fr) !important;
    grid-template-areas:
      "head  img"
      "route img"
      "cols  cols" !important;
    column-gap:40px !important;
    row-gap:24px !important;
    align-items:start !important;
  }
  html body .final > .inner > .head{ grid-area:head !important; }
  html body .final > .inner > .final-hero-img{ grid-area:img !important; margin:0 !important; align-self:stretch; }
  html body .final > .inner > .consult-route{ grid-area:route !important; }
  html body .final > .inner > .final-cols{ grid-area:cols !important; margin-top:24px !important; }

  /* 사진은 좌측 콘텐츠 높이에 맞춰 채운다 */
  html body .final .final-hero-img{ height:100% !important; border-radius:24px !important; overflow:hidden; }
  html body .final .final-hero-img img{
    width:100% !important; height:100% !important;
    object-fit:cover !important; object-position:50% 42% !important;
  }
  /* 두 CTA는 세로로 쌓아 크게 */
  html body .final .consult-route{ display:grid !important; grid-template-columns:1fr !important; gap:12px !important; }
  html body .final .consult-route-card{ width:100% !important; min-height:64px !important; }
}
/* 사진 위 검은 캡션 제거 — ChatGPT 지적 */
html body .final .final-hero-img figcaption{
  position:static !important; background:transparent !important;
  padding:10px 0 0 !important; color:#5A6B84 !important;
  font-size:13px !important; line-height:20px !important;
}

/* 사진이 좌측 콘텐츠 높이를 채우도록 — figure 에 높이가 없어 img 의 height:100% 가 무효였다 */
@media (min-width:1000px){
  html body .final > .inner > .final-hero-img{
    display:flex !important; flex-direction:column !important;
    height:auto !important; min-height:560px !important;
  }
  html body .final > .inner > .final-hero-img img{
    flex:1 1 auto !important; min-height:0 !important;
    height:auto !important; object-fit:cover !important;
  }
}

/* N. 푸터 고객문의 블록 — 액센트 면 위 흰 글자는 SSOT 위반(2.78:1) */
html body .footer-contact{
  background:#075F9C !important; background-image:none !important;
  border-radius:14px !important;
}
html body .footer-contact *{ color:#FFFFFF !important; }
html body .footer-contact p, html body .footer-contact small{ color:#E3EDF6 !important; }
html body .footer-contact h3, html body .footer-contact b:first-child,
html body .footer-contact > b{ font-size:20px !important; line-height:29px !important; }
html body .footer-nav-grid{
  background:#075F9C !important; background-image:none !important; border-radius:14px !important;
}
html body .footer-nav-grid a{ color:#FFFFFF !important; }

/* ══════════ O. 03 상황선택 · 12 FAQ 정리 (ChatGPT BLOCKER/MAJOR) ══════════ */

/* O-1 03 상황선택 — "3중 색면 겹침 / 흰 태그 7개가 모두 버튼처럼 보임" */
html body .sit-result{
  background:#FFFFFF !important; background-image:none !important;
  border:1px solid #E3EAF2 !important; border-radius:24px !important;
  box-shadow:none !important; padding:32px !important;
}
html body .sit-result *:not(.btn):not([class*="btn"]){ color:#16233A !important; }
html body .sit-result p, html body .sit-result small,
html body .sit-result .sit-res-note{ color:#5A6B84 !important; }
html body .sit-res-cols > *{
  background:transparent !important; border:0 !important;
  box-shadow:none !important; padding:0 !important;
}
/* 상세 링크는 흰 버튼이 아니라 44px 텍스트 행으로 */
html body .sit-result a:not(.btn){
  display:flex !important; align-items:center !important;
  min-height:44px !important; padding:0 !important;
  background:transparent !important; border:0 !important; box-shadow:none !important;
  color:#075F9C !important; font-size:15px !important; font-weight:600 !important;
  border-bottom:1px solid #E3EAF2 !important; border-radius:0 !important;
}
html body .sit-result a:not(.btn):hover{ background:#F7FAFC !important; }
/* 최종 CTA 하나만 강조 */
html body .sit-result a.btn{
  background:#075F9C !important; color:#FFFFFF !important;
  min-height:54px !important; border-radius:14px !important; border:0 !important;
}
/* 좌측 6개 항목은 카드 대신 목록 행 */
html body .sit-card{
  background:#FFFFFF !important; border:0 !important;
  border-bottom:1px solid #E3EAF2 !important; border-radius:0 !important;
  box-shadow:none !important; min-height:68px !important;
}
html body .sit-card[aria-selected="true"], html body .sit-card.is-on{
  background:#F7FAFC !important; border-left:3px solid #0EA5E9 !important;
  border-radius:14px !important;
}

/* O-2 12 FAQ — "일곱 개 흰 카드가 연속돼 아코디언이 아니라 카드 목록처럼 보임" */
html body .faq details, html body .faq .faq-item{
  background:transparent !important; border:0 !important;
  border-bottom:1px solid #E3EAF2 !important; border-radius:0 !important;
  box-shadow:none !important;
}
html body .faq details[open], html body .faq .faq-item.is-open{
  background:#F7FAFC !important; border-left:3px solid #0EA5E9 !important;
  border-radius:14px !important;
}
html body .faq details > summary{
  min-height:72px !important; padding:0 28px !important;
  font-size:18px !important; line-height:28px !important; font-weight:700 !important;
  color:#16233A !important;
}
html body .faq details[open] > *:not(summary){
  padding:0 28px 24px !important; font-size:15px !important; line-height:26px !important;
  color:#5A6B84 !important;
}
/* FAQ 좌측 안내를 단일 패널로 */
html body .faq-prep{
  background:#FFFFFF !important; border:1px solid #E3EAF2 !important;
  border-radius:24px !important; box-shadow:none !important;
}
html body .faq-prep li{ background:transparent !important; border:0 !important;
  border-top:1px solid #E3EAF2 !important; border-radius:0 !important; min-height:60px !important; }

/* O-3 06 무료도구 · 09 비교표 — 구조는 유지하되 카드 중첩·여백만 정리 */
html body .ft-card{ padding:24px !important; }
html body .ft-card .tool-preview{ margin-bottom:20px !important; }
html body .match-worksheet{ border-radius:24px !important; overflow:hidden !important; border:1px solid #E3EAF2 !important; }
html body .match-sheet-row{ min-height:72px !important; align-items:center !important; }
html body .match-sheet-row--head{ background:#F7FAFC !important; min-height:52px !important; }
html body .match-sheet-row:hover{ background:#F7FAFC !important; }

/* 14 상담 — 사진이 좌측 콘텐츠 높이를 채우게 (figure 내부 flex 가 img 에 안 먹던 문제) */
@media (min-width:1000px){
  html body .final > .inner > figure.final-hero-img{
    display:grid !important;
    grid-template-rows:1fr auto !important;
    min-height:100% !important; height:auto !important;
    margin:0 !important;
  }
  html body .final > .inner > figure.final-hero-img img{
    width:100% !important; height:100% !important; min-height:420px !important;
    object-fit:cover !important; object-position:50% 42% !important;
    border-radius:24px !important;
  }
  html body .final > .inner{ align-items:stretch !important; }
}

/* ══════════ P. 무료도구 미리보기 — CSS 자리표시자 → 실제 이미지 (2026-08-04) ══════════
   사장님 지적: "디자인이 이게 뭐야. 챗지피티로 이미지 생성하여 디자인해라. 크롭해서 추출 적용할 수도 있잖아"
   원인: 7개 카드 상단이 CSS 로 그린 빈 회색 박스였다. 색·간격만 고쳐서는 해결되지 않는 문제였다.
   조치: ChatGPT 이미지실에서 4×2 격자 한 장으로 생성 → 7칸 크롭 → 각 카드에 적용.
   생성 규격: 평면도 벡터 UI, 색 5개(#F7FAFC·#075F9C·#0EA5E9·#16233A·#E3EAF2), 실사·3D·광택 금지.
   주의: 5번 생성물에 있던 가짜 합계 금액은 크롭 단계에서 제외했다(수치 지어내기 금지). */
html body .tool-preview{
  background-repeat:no-repeat !important;
  background-position:center !important;
  background-size:contain !important;
  background-color:#F7FAFC !important;
  border:0 !important; border-radius:12px !important;
  min-height:136px !important;
}
/* 안쪽 CSS 자리표시자 도형을 숨긴다 */
html body .tool-preview > *{ visibility:hidden !important; }

/* 앞선 `html body .ft-card .tool-preview{background:...}` 가 shorthand 라
   background-image 를 none 으로 리셋하고 특이도도 더 높았다(0,2,2 vs 0,1,2).
   같은 (0,2,2) 로 올리고 뒤에 두어 이기게 한다. */
/* 2026-08-05 수정: cover 로 두면 도식이 잘린다.
   실측한 표시 비율이 뷰포트마다 2.47 / 1.67 / 0.96 으로 크게 달라 어느 하나에 맞추면 나머지가 깨진다.
   사진은 잘려도 되지만 도식은 잘리면 정보가 사라진다(4번 카드의 "VAT 포함" 이 위에서 잘려 나갔다).
   전체가 보이게 두고, 남는 여백은 이미지 배경과 같은 색으로 채워 이음매가 보이지 않게 한다. */
html body .ft-card .tool-preview,
html body .ft-grid .tool-preview{
  background-color:#F7FAFC !important;
  background-repeat:no-repeat !important;
  background-position:center !important;
  background-size:contain !important;
  overflow:hidden !important;
}
html body .ft-card .tool-preview-area,    html body .ft-grid .tool-preview-area    { background-image:url("/assets/tools-v5/tool-01.webp") !important; }
html body .ft-card .tool-preview-seat,    html body .ft-grid .tool-preview-seat    { background-image:url("/assets/tools-v5/tool-02.webp") !important; }
html body .ft-card .tool-preview-estimate,html body .ft-grid .tool-preview-estimate{ background-image:url("/assets/tools-v5/tool-03.webp") !important; }
html body .ft-card .tool-preview-check,   html body .ft-grid .tool-preview-check   { background-image:url("/assets/tools-v5/tool-04.webp") !important; }
html body .ft-card .tool-preview-budget,  html body .ft-grid .tool-preview-budget  { background-image:url("/assets/tools-v5/tool-05.webp") !important; }
html body .ft-card .tool-preview-contract,html body .ft-grid .tool-preview-contract{ background-image:url("/assets/tools-v5/tool-06.webp") !important; }
html body .ft-card .tool-preview-partner, html body .ft-grid .tool-preview-partner { background-image:url("/assets/tools-v5/tool-07.webp") !important; }

/* ══════════ Q. 모바일 문의진행 배지가 본문 글자 위에 올라탄 문제 (2026-08-05 라이브 실측) ══════════
   증상: 390px 에서 원형 번호 ①②③ 가 "카톡이나 문자로…" 첫 글자를 덮었다. 겹친 넓이 28x10px.
   원인: v25 모바일 설계는 `li{padding:18px 18px 18px 68px}` 로 왼쪽 68px 를 비우고
         그 자리에 `.hb-no{position:absolute;left:17px}` 를 놓는 구조였다.
         그런데 index.html 인라인 @media 의 `.hb-steps li{padding:16px}` 가 이 패딩을 덮어버려
         배지만 절대배치로 남고 글자가 그 아래로 들어왔다.
   조치: 왼쪽 여백을 되살리고, 배지 중심을 세로 연결선(left:26px)과 같은 축에 맞춘다. */
@media (max-width:768px){
  html body .hb-steps > li{ padding:18px 18px 18px 62px !important; position:relative !important; }
  html body .hb-steps > li .hb-no{
    position:absolute !important; left:12px !important; top:18px !important;
    width:28px !important; height:28px !important; margin:0 !important;
    display:grid !important; place-items:center !important; }
  html body .hb-steps::before{ left:26px !important; }
}

/* ══════════ R. 남은 딥네이비 색면 2곳 → 밝은 면 (2026-08-05 라이브 실측) ══════════
   사장님 10·15번 지적이 이 두 곳에 남아 있었다. 밝은 실사 사진 바로 옆에 rgb(13,40,71) 이
   붙어 명암이 급격히 끊기고, ChatGPT 검수도 "중간 콘텐츠가 푸터처럼 보인다"고 같은 지적을 했다.
   교훈 적용: 면을 밝게 바꿀 때는 그 안의 글자색을 같은 블록에서 함께 되돌린다.
   (예외를 뒤에 덧붙이면 특이도에서 밀려 무효가 된다) */

/* R-1 비용 · 조건 공식 패널 (사진 801px 옆 481px) */
html body .pricing-variable-map{
  background:#F7FAFC !important;
  border:1px solid #E3EAF2 !important;
}
html body .pricing-variable-map .pricing-formula{
  display:flex !important; flex-direction:column !important; justify-content:center !important;
  color:#16233A !important;
}
html body .pricing-variable-map .pricing-formula *:not(.pf-chip):not([class*="chip"]){
  color:#16233A !important; border-color:#E3EAF2 !important;
}
html body .pricing-variable-map .pricing-formula dt,
html body .pricing-variable-map .pricing-formula .pf-label,
html body .pricing-variable-map .pricing-formula small{ color:#5A6B85 !important; }
/* 공식 칩 — 반투명 흰 위 흰 글자였다. 흰 알약 + 청색 글자로 */
/* 칩은 클래스 없는 <b> 였다. 딥네이비 시절 rgba(255,255,255,.12) 라
   밝은 면에서는 거의 보이지 않는다. 청색 알약으로 바꿔 공식이 읽히게 한다. */
html body .pricing-variable-map .pricing-formula b{
  background:#EAF3FB !important; color:#075F9C !important;
  border:1px solid #CFE0F0 !important; box-shadow:none !important;
  font-weight:700 !important;
}

/* R-2 제휴 시각물 캡션 띠 */
html body .partnership-visual{
  background:#F7FAFC !important; border:1px solid #E3EAF2 !important;
}
/* 2026-08-05 보강: figcaption 만 잡았더니 그 밖의 b·span 이 흰 글자로 남아
   흰 면 위 흰 글자가 4건 생겼다(대비 1.0). 면을 바꾼 블록 전체를 함께 되돌린다. */
html body .partnership-visual,
html body .partnership-visual *:not(img):not(picture):not(source){ color:#16233A !important; }
html body .partnership-visual span,
html body .partnership-visual small{ color:#5A6B85 !important; }

/* ══════════ S. 도구 미리보기 반응 (2026-08-05) ══════════
   실측: 전환 316요소·keyframes 14종·hover 134규칙으로 페이지 전반의 움직임은 이미 있었다.
   빠진 곳은 방금 넣은 도구 미리보기 이미지 하나였다. 정지 그림이라 "누르면 뭔가 돈다"는
   느낌이 없었다. 카드에 커서를 올리면 미리보기가 아주 살짝 다가오게 한다.
   접근성: 움직임 최소화를 켠 사용자에게는 전부 끈다. */
html body .ft-card .tool-preview,
html body .ft-grid .tool-preview{
  transition:background-size .45s cubic-bezier(.22,.61,.36,1), box-shadow .3s ease !important;
}
html body .ft-card:hover .tool-preview,
html body .ft-card:focus-within .tool-preview{
  background-size:auto 106% !important;
  box-shadow:0 6px 20px rgba(7,95,156,.14) !important;
}
@media (prefers-reduced-motion:reduce){
  html body .ft-card:hover .tool-preview,
  html body .ft-card:focus-within .tool-preview{ background-size:contain !important; box-shadow:none !important; }
}

/* ══════════ T. 약관 동의 옆 「전문 보기」 터치 영역 (2026-08-05) ══════════
   실측 46x15px. WCAG 2.2 Target Size(2.5.8) 최소 24x24 미달이라 손가락으로 누르기 어렵다.
   글자 크기는 그대로 두고 여백만 밖으로 밀어 히트 영역만 넓힌다(음수 마진으로 배치 영향 0). */
html body .lf-agree a,
html body .lf-agree label a{
  display:inline-block !important;
  padding:6px 8px !important;
  margin:-6px -8px !important;
  min-height:24px !important;
  line-height:20px !important;
}

/* ══════════ U. 비용 카드 썸네일 → 실사 사진 (2026-08-05) ══════════
   사장님 13번 지적: "왜 인테리어만 실사진이 들어가 있고 나머진 없냐."
   실측 결과 `.pf-thumb-wrap` 4개(165x225) 전부 이미지 없이 칩만 하단에 떠 있어 위가 텅 비었다.
   조치: ChatGPT 이미지실에서 각 분야 업무 장면을 실사로 생성(2x2 한 장) → 4칸 크롭 → 배경으로.
   칩은 사진 위에 올라가므로 흰 반투명 알약 + 진한 글자로 바꿔 사진 위에서도 읽히게 한다. */
html body .pf-card .pf-thumb-wrap{
  background-repeat:no-repeat !important;
  background-position:center top !important;
  background-size:cover !important;
  border-radius:12px !important;
  overflow:hidden !important;
  position:relative !important;
  display:flex !important; align-items:flex-end !important;
}
/* 사진 하단을 살짝 어둡게 깔아 칩이 어떤 사진 위에서도 뜨게 한다 */
html body .pf-card .pf-thumb-wrap::after{
  content:"" !important; position:absolute !important; inset:auto 0 0 0 !important;
  height:58% !important; pointer-events:none !important;
  background:linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.72) 46%, rgba(255,255,255,.94) 100%) !important;
}
html body .pf-card .pf-thumb-wrap .pf-condition-chips{
  position:relative !important; z-index:1 !important;
  width:100% !important; padding:10px !important;
}
html body .pf-card .pf-thumb-wrap .pf-condition-chips > *{
  background:rgba(255,255,255,.92) !important;
  color:#16233A !important;
  border:1px solid rgba(7,95,156,.20) !important;
  box-shadow:0 1px 3px rgba(22,35,58,.10) !important;
  font-weight:600 !important;
}
html body .pf-card:nth-of-type(1) .pf-thumb-wrap,
html body .pf-card:nth-child(1) .pf-thumb-wrap{ background-image:url("/assets/pf-v1/pf-01.webp") !important; }
html body .pf-card:nth-child(2) .pf-thumb-wrap{ background-image:url("/assets/pf-v1/pf-02.webp") !important; }
html body .pf-card:nth-child(3) .pf-thumb-wrap{ background-image:url("/assets/pf-v1/pf-03.webp") !important; }
html body .pf-card:nth-child(4) .pf-thumb-wrap{ background-image:url("/assets/pf-v1/pf-04.webp") !important; }

/* U-2. `.pf-thumb-wrap::before` 의 "COST VARIABLES" 장식 문구 제거.
   사진이 없던 시절 빈 영역을 채우려고 넣은 CSS 생성 콘텐츠였다.
   실사가 들어간 지금은 사진 위를 덮어 읽히지도 않고, 본문에 영문 라벨을 두지 않는 규칙에도 어긋난다. */
html body .pf-card .pf-thumb-wrap::before{ content:none !important; display:none !important; }

/* ══════════ V. 인사이트 카드 5장 → 실사 사진 (2026-08-05) ══════════
   사장님 13번 지적: "왜 인테리어만 실사진이 들어가 있고 나머진 없냐."
   실측: `.insight-card` 6장 중 1번만 `<img>` 실사이고 2~6번은 CSS 막대·숫자 도식이었다(각 411x176).
   도식의 초록 막대는 사이트 색(청색 계열)과도 맞지 않았다.
   조치: 각 글 주제에 맞는 업무 장면을 실사로 생성(3x2 한 장) → 5칸 크롭 → 주제별 클래스에 정확히 매칭.
   1번(인테리어)은 기존 실사를 그대로 두어 여섯 장이 한 세트가 된다. */
html body .insight-card .insight-visual[class*="insight-visual--"]{
  background-repeat:no-repeat !important;
  background-position:center !important;
  background-size:cover !important;
  background-color:#EFF3F7 !important;
  border-radius:12px !important;
  overflow:hidden !important;
}
/* 안쪽 CSS 도식은 숨긴다 */
html body .insight-card .insight-visual[class*="insight-visual--"] > *{ display:none !important; }
html body .insight-card .insight-visual[class*="insight-visual--"]::before,
html body .insight-card .insight-visual[class*="insight-visual--"]::after{ content:none !important; }

html body .insight-visual--plan    { background-image:url("/assets/insight-v1/ins-01.webp") !important; } /* 15평 식당 좌석 */
html body .insight-visual--term    { background-image:url("/assets/insight-v1/ins-02.webp") !important; } /* 키오스크 렌탈·구매 */
html body .insight-visual--calendar{ background-image:url("/assets/insight-v1/ins-03.webp") !important; } /* 첫 달 세무 */
html body .insight-visual--contract{ background-image:url("/assets/insight-v1/ins-04.webp") !important; } /* 상가 계약 후 */
html body .insight-visual--map     { background-image:url("/assets/insight-v1/ins-05.webp") !important; } /* 분야별 확인 기준 */

/* 카드에 커서를 올리면 사진이 살짝 다가온다 (다른 카드와 같은 반응) */
html body .insight-card .insight-visual[class*="insight-visual--"]{
  transition:background-size .45s cubic-bezier(.22,.61,.36,1) !important;
}
html body .insight-card:hover .insight-visual[class*="insight-visual--"],
html body .insight-card:focus-within .insight-visual[class*="insight-visual--"]{
  background-size:112% !important;
}
@media (prefers-reduced-motion:reduce){
  html body .insight-card:hover .insight-visual[class*="insight-visual--"]{ background-size:cover !important; }
}