.consult-route-card{ gap:16px !important; }
.lf-chip{ gap:8px !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; }

/* ── */



/* 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-color:#075F9C;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-color:#075F9C;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-color:#065081;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; }
/* 대비 실측 교정: .sb-value-eyebrow 4.46/4.5 근소 미달 */
.sb-value-eyebrow{ color:#075F9C !important; }
/* SSOT 원칙 적용: 액센트(#0EA5E9)는 텍스트·흰글자 배경으로 쓸 수 없다.
   실측으로 드러난 위반 4곳을 액션 색(#075F9C)으로 교체한다. */
.mnav-cta{ background-color:#075F9C;background:#075F9C!important; color:#fff !important; }
.q, summary .q, .lf-field .req, .req{ color:#075F9C !important; }

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

/* 5) 라벨 배지 — 액센트 8% 배경 (SSOT: 새 파랑 만들지 말고 액센트 투명도로) */
.sec-label, .insight-tag, .art-badge, .hero-badge, .match-eyebrow, .sb-value-eyebrow{
  background-color:rgba(14,165,233,.08);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 Variable Full",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-color:var(--c-ink);background-color:var(--c-ink);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); } }
html body .matching, html body .pricing{
  background-image:linear-gradient(180deg,#F7FAFC 0%,#FFFFFF 55%) !important;
}
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); }
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);
}
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; }
}
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;
}` 이 안쪽 흰 배경 폼 카드까지 내려와
   `업체명 *` 같은 라벨이 흰 글자 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 .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; }
html body .toc-card .go{
  white-space:nowrap !important;
  display:inline-flex !important;
  align-items:center !important;
  width:auto !important;
  flex-shrink:0 !important;
}

/* 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 .go{ margin-top:auto !important; }
@media (max-width:760px){
  html body .ft-card .tool-preview, html body .ft-grid .tool-preview{ height:120px !important; }
}
html body .partnership::after, html body .site-footer::after{ display:none !important; }
html body .ft-card .ft-result{ border:0 !important; box-shadow:none !important; background:transparent !important; }
html body .ft-card .ico-row{ min-height:32px !important; }

html body .route-sms, html body [class*="sms"][class*="card"]{
  background-color:#FFFFFF;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; }
html body .partnership-intro > *{ margin-top:0 !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;
}
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.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-color:#EFF3F7;background:#EFF3F7!important; color:#075F9C !important; border:0 !important;
  padding:2px 10px !important; border-radius:999px !important;
}
html body .sb-howto-bar .hb-steps > li small,
html body .sb-howto-bar .hb-steps > li p{ color:#5A6B84 !important; }
html body .hero img[src*="hero"],
html body .hero picture img{
  object-position:80% 30% !important;   /* 4안(58/70/80/90%) 비교 실측 — 80%에서 두 인물이 온전히 들어온다 */
}
html body a.platform-domain{ color:#075F9C !important; background:transparent !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; }
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); }
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; }
html body .visual-diagram-head strong{ color:#FFFFFF !important; }
html body .sec-title{ font-size:44px !important; }
html body a.btn:hover *, html body button.btn:hover *, html body .btn:hover *{ color:#FFFFFF !important; }
html body .sit-card:hover, html body .ft-card:hover, html body .insight-card:hover{
  background-color:#FFFFFF !important;
}
html body .hero-copy{ max-width:none !important; width:min(46%,720px) !important; }
html body .hero-why b{ color:#16233A !important; font-weight:700 !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-copy{ width:min(50%,780px) !important; }
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;
}
html body a:hover .go-arrow, html body a:hover [class*="arrow"], html body a:hover .go::after{
  transform:translateX(4px);
}
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;
}

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

/* L-1 딥네이비 전면 색면을 밝은 면으로 (04·10·12·15) */
html body .sb-howto-bar{ background-color:#F7FAFC;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-color:#075F9C;background:#075F9C!important; color:#FFFFFF !important; }

html body .partnership{ background-color:#FFFFFF;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-color:#FFFFFF;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-color:#075F9C;background:#075F9C!important; color:#FFFFFF !important; }
html body .partnership-steps{ background-color:#F7FAFC;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-color:#075F9C;background:#075F9C!important; color:#FFFFFF !important; }
html body .partnership .partner-inquiry > summary,
html body .partnership .partner-inquiry > summary *{ 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-color:#F7FAFC;background:#F7FAFC!important; color:#075F9C !important; }
html body .faq-prep a.btn{ background-color:#075F9C;background:#075F9C!important; color:#FFFFFF !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-color:#075F9C;background:#075F9C!important; color:#FFFFFF !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-color:#F7FAFC;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; }
html body section::before{ background-image:none !important; }
html body .sec-sub{ font-size:17px !important; line-height:28px !important; font-weight:450 !important; color:#5A6B84 !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:#5A6B84 !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; }
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; }
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; }
html body .hero h1{ font-size:clamp(34px,3.6vw,58px) !important; line-height:1.24 !important; }
html body .hero > .inner{ padding-right:0 !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; }
}
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-color:#075F9C;background:#075F9C!important; background-image:none !important; border-radius:14px !important;
}
html body .footer-nav-grid a{ color:#FFFFFF !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;
}
html body .sit-result a:not(.btn).__off__:hover{ background-color:#F7FAFC;background:#F7FAFC!important; }
html body .sit-card[aria-selected="true"], html body .sit-card.is-on{
  background-color:#F7FAFC;background:#F7FAFC!important; border-left:3px solid #0EA5E9 !important;
  border-radius:14px !important;
}
html body .faq details[open], html body .faq .faq-item.is-open{
  background-color:#F7FAFC;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;
}
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; }
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-color:#F7FAFC;background:#F7FAFC!important; min-height:52px !important; }
html body .match-sheet-row:hover{ background-color:#F7FAFC;background:#F7FAFC!important; }
html body .ft-card .tool-preview-area.sb-bg-ready,    html body .ft-grid .tool-preview-area.sb-bg-ready    { background-image:url("/assets/tools-v5/tool-01.webp") !important; }
html body .ft-card .tool-preview-seat.sb-bg-ready,    html body .ft-grid .tool-preview-seat.sb-bg-ready    { background-image:url("/assets/tools-v5/tool-02.webp") !important; }
html body .ft-card .tool-preview-estimate.sb-bg-ready,html body .ft-grid .tool-preview-estimate.sb-bg-ready{ background-image:url("/assets/tools-v5/tool-03.webp") !important; }
html body .ft-card .tool-preview-check.sb-bg-ready,   html body .ft-grid .tool-preview-check.sb-bg-ready   { background-image:url("/assets/tools-v5/tool-04.webp") !important; }
html body .ft-card .tool-preview-budget.sb-bg-ready,  html body .ft-grid .tool-preview-budget.sb-bg-ready  { background-image:url("/assets/tools-v5/tool-05.webp") !important; }
html body .ft-card .tool-preview-contract.sb-bg-ready,html body .ft-grid .tool-preview-contract.sb-bg-ready{ background-image:url("/assets/tools-v5/tool-06.webp") !important; }
html body .ft-card .tool-preview-partner.sb-bg-ready, html body .ft-grid .tool-preview-partner.sb-bg-ready { background-image:url("/assets/tools-v5/tool-07.webp") !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:#5A6B84 !important; }
html body .partnership-visual span,
html body .partnership-visual small{ color:#5A6B84 !important; }
html body .ft-card:hover .tool-preview,
html body .ft-card:focus-within .tool-preview{
  background-size:112% !important;
  box-shadow:0 6px 20px rgba(7,95,156,.14) !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-color:rgba(255,255,255,.92);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.sb-bg-ready,
html body .pf-card:nth-child(1) .pf-thumb-wrap.sb-bg-ready{ background-image:url("/assets/pf-v1/pf-01.webp") !important; }
html body .pf-card:nth-child(2) .pf-thumb-wrap.sb-bg-ready{ background-image:url("/assets/pf-v1/pf-02.webp") !important; }
html body .pf-card:nth-child(3) .pf-thumb-wrap.sb-bg-ready{ background-image:url("/assets/pf-v1/pf-03.webp") !important; }
html body .pf-card:nth-child(4) .pf-thumb-wrap.sb-bg-ready{ background-image:url("/assets/pf-v1/pf-04.webp") !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.sb-bg-ready    { background-image:url("/assets/insight-v1/ins-01.webp") !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;
}
html body .partnership-visual > img{
  display:block !important; width:100% !important; height:auto !important;
  border-radius:12px 12px 0 0 !important;
}
html body .partnership-visual > figcaption{
  position:static !important; inset:auto !important;
  padding:12px 16px 14px !important; margin:0 !important;
  background-color:#FFFFFF;background:#FFFFFF!important; border-top:1px solid #E3EAF2 !important;
}
html body .pf-card .pf-thumb-wrap::after{
  height:46% !important;
  background-color:rgba(255,255,255,0);background:linear-gradient(180deg, rgba(255,255,255,0)0%, rgba(255,255,255,.90) 52%, rgba(255,255,255,1) 100%) !important;
}
html body .pf-card .pf-thumb-wrap .pf-condition-chips{
  padding:8px 8px 9px !important;
  display:flex !important; flex-wrap:wrap !important; gap:5px !important; justify-content:center !important;
}
html body .pf-card .pf-thumb-wrap .pf-condition-chips > *{
  background-color:#FFFFFF;background:#FFFFFF!important; color:#16233A !important;
  border:1px solid #CFE0F0 !important; box-shadow:none !important;
  font-size:12px !important; padding:3px 8px !important; border-radius:999px !important;
  white-space:nowrap !important;
}
html body .sb-sec-visual{ grid-column:1 / -1; }
html body footer h3, html body .site-footer h3{
  font-size:clamp(13px,1vw,14.5px) !important; font-weight:700 !important; margin:0 0 8px !important;
}
html body .sb-step-ico{
  flex:0 0 auto !important;
  display:inline-block !important; vertical-align:-6px !important;
  width:26px !important; height:26px !important; margin-right:9px !important;
  background-repeat:no-repeat !important; background-position:center !important;
  background-size:contain !important;
}
html body .sb-step-ico-1.sb-bg-ready{ background-image:url("/assets/icons-v1/step1.webp") !important; }
html body .sb-step-ico-2.sb-bg-ready{ background-image:url("/assets/icons-v1/step2.webp") !important; }
html body .sb-step-ico-3.sb-bg-ready{ background-image:url("/assets/icons-v1/step3.webp") !important; }
html body .consult-route-card.kakao:hover{ background-color:#16456E !important; }
html body .consult-route-card.kakao strong,
html body .consult-route-card.kakao p,
html body .consult-route-card.kakao small{ color:#FFFFFF !important; }
html body .consult-route-card.kakao .route-badge{ color:#9FD4F5 !important; }
html body .consult-route-card.sms .route-badge{ color:#075F9C !important; }
html body .site-footer .footer-nav-grid a{ color:#C9D8E8 !important; }
html body .site-footer .footer-nav-grid a:hover{ color:#FFFFFF !important; }
html body .site-footer .footer-contact{
  background-color:rgba(255,255,255,.07);background:rgba(255,255,255,.07)!important;
  border:1px solid rgba(255,255,255,.16) !important;
}
html body .site-footer .footer-contact h2{ color:#FFFFFF !important; }
html body .site-footer .footer-contact dt,
html body .site-footer .footer-contact .label{ color:#9FB4CC !important; }
html body .site-footer .footer-contact dd,
html body .site-footer .footer-contact a{ color:#FFFFFF !important; }
html body .site-footer dt{ color:#8FA6BF !important; }
html body .site-footer dd{ color:#E8EFF7 !important; }
@keyframes sbSonar{
  0%{ transform:translate(-50%,-50%) scale(.55); opacity:.55; }
  70%{ opacity:.12; }
  100%{ transform:translate(-50%,-50%) scale(1.85); opacity:0; }
}
html body .sb-howto-bar .hb-steps > li:nth-child(1) .hb-no{ animation-delay:0s !important; }
html body .sb-howto-bar .hb-steps > li:nth-child(2) .hb-no{ animation-delay:1.8s !important; }
html body .sb-howto-bar .hb-steps > li:nth-child(3) .hb-no{ animation-delay:3.6s !important; }
html body .sb-fixbar-cta::after{
  content:""; position:absolute; left:50%; top:50%;
  width:100%; height:100%; border-radius:10px;
  border:2px solid rgba(14,165,233,.75); pointer-events:none;
  animation:sbSonar 2.6s cubic-bezier(.22,.61,.36,1) infinite;
}
html body .hero-actions > a.btn:first-child,
html body a.btn.primary:first-of-type{ position:relative; }
html body .hero-actions > a.btn:first-child::after{
  content:""; position:absolute; left:50%; top:50%;
  width:100%; height:100%; border-radius:12px;
  border:2px solid rgba(14,165,233,.6); pointer-events:none;
  animation:sbSonar 3s cubic-bezier(.22,.61,.36,1) infinite;
}
html body .sit-result > div:nth-of-type(1) a:hover{
  background-color:#075F9C;background:#075F9C!important; border-color:#075F9C !important; color:#FFFFFF !important;
}
html body .sit-result > div:nth-of-type(2) a.__off__:hover{
  border-color:#075F9C !important; color:#075F9C !important;
}
html body .sit-grid > * [class*="no"],
html body .sit-grid > * b + span{ color:#075F9C !important; }
html body .pf-condition-chips > *,
html body .pf-card .pf-thumb-wrap .pf-condition-chips > *{ font-size:12.5px !important; }
html body .partnership-mail-truth{ font-size:12.5px !important; line-height:1.55 !important; }
html body [style*="font-weight:700"], html body [style*="font-weight: 700"]{ font-weight:700 !important; }
html body [style*="font-weight:700"], html body [style*="font-weight: 700"]{ font-weight:700 !important; }
html body [style*="font-weight:800"], html body [style*="font-weight: 800"]{ font-weight:800 !important; }
html body [style*="font-weight:800"], html body [style*="font-weight: 800"]{ font-weight:800 !important; }

/* ══════════ AL. 비용 카드 — 사진 위 칩을 걷어내고 항목 목록으로 (2026-08-06 사장님 5번) ══════════
   사장님 지적: "이미지 안에 들어가 있는 면적·철거·설비·자재를 다른 방식으로 알아차릴 수 있게.
   지금 이건 지저분하다."
   실측: 칩 4개(40x29)가 사진 위에 2줄로 흩어져 사진도 가리고 글자도 안 읽혔다.
   조치: 사진 위에서 완전히 걷어내고, 사진 아래 제목 옆에 **가로 한 줄 목록**으로 옮긴다.
   "무엇에 따라 금액이 갈리는가"를 나열하는 항목이므로 알약보다 구분점 나열이 읽기 쉽다. */
html body .pf-card .pf-thumb-wrap::after{ content:none !important; }
html body .pf-card .pf-thumb-wrap .pf-condition-chips{
  position:absolute !important; left:0 !important; right:0 !important; bottom:0 !important;
  padding:0 !important; margin:0 !important;
  display:flex !important; flex-wrap:nowrap !important; gap:0 !important;
  background-color:rgba(13,40,71,.72);background:rgba(13,40,71,.72)!important;
  justify-content:center !important; align-items:center !important;
}
html body .pf-card .pf-thumb-wrap .pf-condition-chips > *{
  background:none !important; background-color:transparent !important;
  border:0 !important; box-shadow:none !important;
  color:#FFFFFF !important; font-size:12px !important; font-weight:600 !important;
  padding:6px 0 !important; margin:0 !important;
  flex:1 1 0 !important; text-align:center !important; white-space:nowrap !important;
  position:relative !important;
}
html body .pf-card .pf-thumb-wrap .pf-condition-chips > * + *::before{
  content:"" !important; position:absolute !important; left:0 !important; top:22% !important;
  width:1px !important; height:56% !important; background-color:rgba(255,255,255,.28);background:rgba(255,255,255,.28)!important;
}

/* ══════════ AM. 무료 도구 레이아웃 (2026-08-06 사장님 2번) ══════════
   사장님 지적: "레이아웃이나 전개 방식을 바꿔봐. 전혀 눈에 안 들어오고 무엇을 표현하는지 모르겠다."
   실측: 카드 277x541 로 세로가 과했다. 도식이 작고 그 아래 글이 길게 쌓여 훑을 때 눈이 멈추지 않았다.

   1차 시도(가로형 2열)는 되돌렸다 — 카드 자식 구조를 모른 채 grid 를 걸었더니
   번호 배지가 사진 밖으로 튀고 글자 열이 좁게 눌려 더 나빠졌다(실측 402x635 · 864x357 · 425x461 제각각).
   구조를 바꾸는 대신 **세로 카드를 유지하되 밀도를 낮춘다**: 도식을 키우고, 설명을 두 줄로 자르고,
   카드 높이를 통일해 오와열을 맞춘다. 같은 폭에서 훑기가 쉬워진다. */
@media (min-width:900px){
  html body .ft-card{ padding:18px !important; }
  /* 도식을 키운다 — 무엇을 하는 도구인지 그림이 먼저 말하게 */
  html body .ft-card .tool-preview{ margin-bottom:14px !important; }
  /* 설명은 두 줄로 잘라 카드 높이를 맞춘다 */
  html body .ft-card > p{
    display:-webkit-box !important; -webkit-line-clamp:2 !important;
    -webkit-box-orient:vertical !important; overflow:hidden !important;
    min-height:42px !important; margin-bottom:10px !important;
  }
  /* 카드 높이 통일 — 오와열 */
  html body .ft-grid{ align-items:stretch !important; }
  html body .ft-card{ display:flex !important; flex-direction:column !important; }
  html body .ft-card .go,
  html body .ft-card > a:last-child{ margin-top:auto !important; }
}
html body .site-footer{ border-top:0 !important; }
html body .sb-popup-box{
  width:min(440px, 92vw) !important;
  max-height:min(620px, 78vh) !important;
  border-radius:20px !important;
  box-shadow:0 32px 80px rgba(13,40,71,.28), 0 4px 16px rgba(13,40,71,.10) !important;
  border:1px solid rgba(255,255,255,.9) !important;
  backdrop-filter:none !important;
}
html body .sb-popup-head h2{ font-size:clamp(19px,1.9vw,23px) !important; margin-bottom:8px !important; }
html body .sb-popup-head p{ font-size:13.5px !important; line-height:1.6 !important; }
html body .sb-popup-steps{ padding:0 24px !important; margin-top:16px !important; gap:7px !important; }
html body .sb-popup-steps li{ padding:10px 12px 10px 42px !important; }
html body .sb-popup-steps b{ font-size:13.5px !important; }
html body .sb-popup-steps span{ font-size:12px !important; }
html body .sb-popup-note{ margin:13px 24px 0 !important; padding:9px 11px !important; font-size:12px !important; }
html body .sb-popup-cta{ padding:15px 24px 0 !important; gap:7px !important; }
html body .sb-popup-go{ padding:13px !important; font-size:14.5px !important; }
html body .sb-popup-sub{ padding:11px !important; font-size:13.5px !important; }
html body .sb-popup-foot{ margin-top:16px !important; }
html body .sb-popup-foot button{ padding:12px 4px !important; font-size:12.5px !important; }

/* ══════════ AP. 스크롤 진입 애니메이션 (2026-08-06 사장님 2·3·4·5·7·8·10·12·13·17번) ══════════
   같은 지적이 10건이었다: "움직임이 없어 주목되지 않는다."
   실측: 스크롤 진입 애니가 17개뿐이고 대부분 정지 화면이었다.
   조치: 구간이 화면에 들어올 때 살짝 올라오며 나타나게 한다.
   과하면 촌스러워지므로 수치를 좁게 잡았다 — 이동 14px, 0.5초, 형제 간 70ms 간격(최대 350ms).
   크게 움직이거나 오래 끌면 스크롤이 느리게 느껴진다. */
.sb-reveal{
  opacity:0;
  transform:translateY(24px);
  transition:opacity .6s cubic-bezier(.16,1,.3,1), transform .6s cubic-bezier(.16,1,.3,1);
  will-change:opacity, transform;
}
html body .ft-card:hover, html body .pf-card:hover, html body .insight-card:hover,
html body .service-card:hover, html body .toc-card:hover{
  transform:translateY(-6px) !important;
  box-shadow:0 16px 32px rgba(22,35,58,.08) !important;
  border-color:#CFE0F0 !important;
}
html body .ft-card:hover .go, html body .insight-card:hover a{
  color:#075F9C !important;
}

/* 8·9번 — 상황 선택 우측 패널이 아래로 비는 문제 */
@media (min-width:1000px){
  html body .sit-result{
    display:flex !important; flex-direction:column !important;
    justify-content:space-between !important;
    padding:clamp(22px,2.2vw,32px) clamp(20px,2vw,28px) !important;
    gap:clamp(14px,1.6vw,22px) !important;
  }
  html body .sit-result > *{ margin:0 !important; }
  html body .sit-result a{ padding:11px 15px !important; }
}

/* AQ-2 카드 높이 통일 — 폭은 맞췄는데 높이가 653/561 로 갈렸다.
   첫 줄 4장이 둘째 줄 3장보다 92px 높아 아래 줄이 떠 보인다.
   설명 줄 수를 고정하고 버튼을 바닥에 붙여 두 줄을 같게 만든다. */
@media (min-width:900px){
  html body .ft-card{ display:flex !important; flex-direction:column !important; }
  html body .ft-card > p{
    display:-webkit-box !important; -webkit-line-clamp:2 !important;
    -webkit-box-orient:vertical !important; overflow:hidden !important;
    min-height:44px !important;
  }
  html body .ft-card ul{
    display:-webkit-box !important; -webkit-line-clamp:3 !important;
    -webkit-box-orient:vertical !important; overflow:hidden !important;
    min-height:66px !important;
  }
  html body .ft-card .go,
  html body .ft-card > a:last-child,
  html body .ft-card > button:last-child{ margin-top:auto !important; }
}
html body .sb-popup.is-in .sb-popup-box{ transform:scale(1) !important; opacity:1 !important; }
html body .insight-card:hover .insight-visual[class*="insight-visual--"]{ background-size:105% !important; }
html body .service-card:hover [class*="media"] img{ transform:scale(1.05) !important; }
html body .pf-card:hover .pf-thumb-wrap{ background-size:105% !important; }
html body a.btn:hover, html body .sb-fixbar-cta:hover, html body .sb-popup-go:hover{
  transform:translateY(-2px) !important;
  box-shadow:0 4px 12px rgba(7,95,156,.2) !important;
}
html body a.btn:active, html body .sb-fixbar-cta:active, html body .sb-popup-go:active,
html body .go:active{ transform:scale(.96) !important; }
html body .sb-popup-dim{ z-index:9000 !important; }
html body .insight-card .insight-visual > img{
  width:100% !important; height:100% !important;
  object-fit:cover !important; object-position:center 42% !important;
  display:block !important;
}

/* AT-2 v25 의 `body .insight-card:first-child .insight-visual{height:176px !important}` 가
   내 규칙(0,2,3)보다 특이도가 같고 뒤에 있어 이겼다.
   클래스 3개 + 요소 3개(0,3,3)로 올려 확실히 넘긴다. */
html body div.insight-grid a.insight-card:first-child span.insight-visual,
html body div.insight-grid a.insight-card span.insight-visual{
  height:auto !important;
  aspect-ratio:16 / 9 !important;
  min-height:0 !important; max-height:none !important;
}
html body .final-hero-img > img{
  width:100% !important; height:100% !important;
  object-fit:cover !important; object-position:center 45% !important; display:block !important;
}
html body .final-hero-img > figcaption{
  position:absolute !important; left:0 !important; right:0 !important; bottom:0 !important; top:auto !important;
  margin:0 !important; padding:14px 18px !important;
  background:linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.88) 42%, rgba(255,255,255,.97) 100%) !important;
  color:#16233A !important; font-size:12.5px !important; line-height:1.55 !important;
}
html body section.final figure.final-hero-img > img{
  height:100% !important; width:100% !important; object-fit:cover !important;
}
html body .final > .inner > figure.final-hero-img > img{
  max-height:none !important;
  height:100% !important;
  width:100% !important;
  object-fit:cover !important;
}
html body .final > .inner > figure.final-hero-img > figcaption{
  position:absolute !important; left:0 !important; right:0 !important;
  bottom:0 !important; top:auto !important; margin:0 !important;
}
html body figure.partnership-visual > img{
  width:100% !important; height:100% !important; max-height:none !important;
  object-fit:cover !important; object-position:center 40% !important; display:block !important;
}
html body figure.partnership-visual > figcaption{
  position:absolute !important; left:0 !important; right:0 !important; bottom:0 !important; top:auto !important;
  margin:0 !important; padding:12px 16px !important;
  background:linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.88) 42%, rgba(255,255,255,.97) 100%) !important;
  border-top:0 !important;
}
html body .final > .inner{ align-items:start !important; }
html body .final > .inner > figure.final-hero-img > figcaption{
  background:linear-gradient(180deg, rgba(13,40,71,0) 0%, rgba(13,40,71,.62) 45%, rgba(13,40,71,.82) 100%) !important;
  color:#FFFFFF !important; padding:20px 18px 14px !important;
}
html body .final > .inner > figure.final-hero-img > figcaption *{ color:#FFFFFF !important; }
html body footer.site-footer .footer-brand-logo text tspan{ fill:#075F9C; }
html body footer.site-footer .footer-brand-logo text:nth-of-type(2){ fill:#5A6B84; }

html body footer.site-footer .footer-identity p{ color:#5A6B84 !important; }
html body footer.site-footer dt,
html body footer.site-footer .footer-business dt{
  color:#5A6B84 !important; font-size:12.5px !important; font-weight:600 !important;
  letter-spacing:-.01em !important;
}
html body footer.site-footer dd,
html body footer.site-footer .footer-business dd{
  color:#16233A !important; font-size:14px !important; font-weight:600 !important;
}
html body footer.site-footer .footer-contact *{ color:#16233A !important; }
html body footer.site-footer .footer-contact h2{
  color:#16233A !important; margin-bottom:12px !important;
}
html body footer.site-footer .footer-contact a{
  background-color:transparent !important; background:transparent !important;
  background-image:none !important;
  display:flex !important; align-items:center !important; justify-content:space-between !important;
  gap:12px !important; padding:9px 0 !important; min-height:44px !important;
  border-radius:0 !important; border-bottom:1px solid #EEF3F8 !important;
}
html body footer.site-footer .footer-contact a::before{
  background-color:transparent !important; background:transparent !important;
}
html body footer.site-footer .footer-contact a span{
  color:#5A6B84 !important; font-size:13px !important; font-weight:600 !important;
}
html body footer.site-footer .footer-contact a strong{
  color:#075F9C !important; font-size:14.5px !important; font-weight:700 !important;
}
html body footer.site-footer .footer-contact a:hover strong{ color:#0A76C0 !important; }
html body footer.site-footer .footer-contact p{
  color:#5A6B84 !important; font-size:13px !important; margin-top:10px !important;
}

html body footer.site-footer .footer-scope-note{ color:#5A6B84 !important; }

/* 링크 — 알약을 벗긴다. 푸터 링크가 버튼일 이유가 없다 */
html body footer.site-footer .footer-nav-grid{
  display:flex !important; flex-wrap:wrap !important;
  gap:2px 26px !important;
  border-top:1px solid #DDE6EF !important; padding-top:14px !important;
  background:transparent !important;
}
html body footer.site-footer .footer-nav-grid a,
html body footer.site-footer .footer-nav-grid a::before{
  background-color:transparent !important; background:transparent !important;
  background-image:none !important;
}
html body footer.site-footer .footer-nav-grid a{
  color:#075F9C !important; font-size:13.5px !important; font-weight:600 !important;
  display:inline-flex !important; align-items:center !important;
  min-height:44px !important; padding:0 !important; border-radius:0 !important;
  text-decoration:none !important;
}
html body footer.site-footer .footer-nav-grid a:hover{
  color:#0A76C0 !important; text-decoration:underline !important;
}
html body footer.site-footer .footer-copy-row strong{ color:#16233A !important; }
html body footer.site-footer .footer-copy-row span{ color:#5A6B84 !important; }
html body footer.site-footer .footer-contact a strong{
  text-align:right !important; word-break:break-all !important;
}
html body footer.site-footer .footer-main{ align-items:stretch !important; }
html body footer.site-footer .footer-business,
html body footer.site-footer .footer-contact{ align-self:stretch !important; }
html body footer.site-footer{ padding-top:48px !important; padding-bottom:36px !important; }
html body footer.site-footer{ position:relative !important; }
html body footer.site-footer .footer-brand-logo text tspan{ fill:#38BDF8; }
html body footer.site-footer .footer-brand-logo text:nth-of-type(2){ fill:#9FB4C7; }
html body footer.site-footer .footer-identity p{ color:#AFC0D0 !important; }
html body footer.site-footer .footer-contact *{ color:#E6EEF6 !important; }
html body footer.site-footer dt,
html body footer.site-footer .footer-business dt{ color:#8FA9C4 !important; }
html body footer.site-footer dd,
html body footer.site-footer .footer-business dd{ color:#F2F7FC !important; }
html body footer.site-footer .footer-contact h2{ color:#FFFFFF !important; }
html body footer.site-footer .footer-contact a{ border-bottom:1px solid #1A4064 !important; }
html body footer.site-footer .footer-contact a span{ color:#8FA9C4 !important; }
html body footer.site-footer .footer-contact a strong{ color:#7CC5F5 !important; }
html body footer.site-footer .footer-contact a:hover strong{ color:#A9DBFB !important; }
html body footer.site-footer .footer-contact p{ color:#AFC0D0 !important; }

html body footer.site-footer .footer-scope-note{ color:#9FB4CC !important; }
html body footer.site-footer .footer-nav-grid{ border-top:1px solid #17395A !important; }
html body footer.site-footer .footer-nav-grid a{ color:#9FD4F5 !important; }
html body footer.site-footer .footer-nav-grid a:hover{ color:#FFFFFF !important; }
html body footer.site-footer .footer-copy-row{
  border-top:1px solid #17395A !important; color:#9FB4CC !important;
}
html body footer.site-footer .footer-copy-row strong{ color:#FFFFFF !important; }
html body footer.site-footer .footer-copy-row span{ color:#9FB4CC !important; }

/* ══════ AU-4. 푸터 배경 = ChatGPT 이미지실 생성물 (2026-08-07 사장님 지시) ══════
   사장님: "챗지피티에게 시켜서 이미지생성하고 편집하고 크롭 가능하게 해서
            너가 추출해서 쓰면 되잖아"
   등록 이미지실에서 2172x724 생성 → 데스크톱 비(1440/565=2.55)에 맞게 크롭 →
   1920x753 webp 25KB / 모바일 상단 밴드용 820x594 webp 14KB.
   글자가 올라가는 오른쪽 영역의 실제 픽셀 밝기를 재서 흰 글자 대비 15.55:1 확인했다.
   추정이 아니라 이미지 픽셀을 직접 샘플링한 값이다. */
html body footer.site-footer{
  background-color:#081A2D !important;
  background-image:
    linear-gradient(180deg, rgba(8,26,45,0) 0%, rgba(8,26,45,.35) 72%, rgba(8,26,45,.72) 100%),
    url("footer-v1/footer-bg-pc.webp") !important;
  background-size:100% 100%, cover !important;
  background-position:center, left center !important;
  background-repeat:no-repeat, no-repeat !important;
}
/* 모바일은 세로로 길다(390x1163). 가로 긴 이미지를 cover 하면 도면이 뭉개진다.
   상단 밴드로만 깔고 아래는 단색으로 받는다 */
@media (max-width:760px){
  html body footer.site-footer{
    background-image:
      linear-gradient(180deg, rgba(8,26,45,0) 0%, rgba(8,26,45,.55) 34%, #081A2D 46%),
      url("footer-v1/footer-bg-mo.webp") !important;
    background-size:100% 100%, 100% auto !important;
    background-position:center, top left !important;
  }
}

/* ══════ AW. hq eye 실측 잔여 (2026-08-08) ══════
   도구 오탐 15건을 걷어낸 뒤 남은 진짜 결함만. 실제 캡처 픽셀로 확인했다. */

/* AW-1 취소 — 도구가 대비 3.06 이라 했지만 캡처를 확대해 보니 밝은 도면 위
   파란 글자로 또렷했다. 색을 바꾸니 오히려 1.65 로 나빠졌다.
   이 요소는 스크롤 아래라 뷰포트 캡처에 안 잡혀 픽셀 재판정이 못 걸러낸 건이다.
   근거 없는 규칙은 넣지 않는다. 폰트 크기만 12px 기준으로 맞춘다. */
html body .preview-room i, html body .preview-room b{
  font-size:12.5px !important;
}

/* AW-2 로고 태그라인 — 10.5px 로 올렸지만 여전히 12px 미만이다.
   로고 비율은 유지하고 자간만 더 줄여 폭을 맞춘다 */
html body .footer-brand-logo text:nth-of-type(2),
html body svg text[aria-hidden="true"]{
  font-size:12px; letter-spacing:1.1px;
}

/* ══════════ AX. 사장님 캡처 6건 (2026-08-10) ══════════
   원리: 첫 화면에서 3초 안에 "여기서 뭘 하는지" 가 보여야 하고,
   시선이 위에서 아래로 끊기지 않고 흘러야 한다. 지금은 정지 화면이라
   눈이 머물 곳을 못 찾는다. 움직임은 장식이 아니라 시선 유도 장치다. */

/* ── 1번 팝업 ─────────────────────────────────────────
   실측: 박스 440x620 인데 내용이 656px — 36px 이 박스 밖으로 나갔다.
   딤에 backdrop-filter:blur(8px) 이 걸려 뒷페이지가 통째로 흐려졌다. */

/* 1-a 뒷페이지를 흐리게 하지 않는다. 원래 보이는 대로 둔다 */
html body .sb-popup-dim{
  backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
  background-color:rgba(16,32,52,.34) !important; background:rgba(16,32,52,.34) !important;
}
html body .sb-popup-box > *{ flex:0 0 auto; }
@keyframes sbPopupPanelIn{
  from{ opacity:0; transform:translateY(14px) scale(.985); }
  to{ opacity:1; transform:none; }
}
html body .hb-steps > li{
  background:linear-gradient(135deg,#FFFFFF 0%,#F7FAFC 100%) !important;
  border:1px solid #E1E9F0 !important; border-radius:14px !important;
  transition:transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s ease !important;
}
html body .hb-steps > li:hover{
  transform:translateY(-3px) !important;
  box-shadow:0 10px 26px rgba(13,40,71,.10) !important;
}
/* 번호 뱃지에 브랜드 그라데이션 */
html body .hb-steps > li .hb-no{
  background:linear-gradient(135deg,#0A76C0 0%,#38BDF8 100%) !important;
  color:#FFFFFF !important; box-shadow:0 4px 12px rgba(10,118,192,.28) !important;
}
/* 단계를 잇는 선이 흐르게 — 세 칸이 하나의 흐름으로 읽힌다 */
html body .hb-steps{ position:relative !important; }
html body .hb-steps::before{
  content:"" !important; position:absolute !important; left:8% !important; right:8% !important; top:34px !important;
  height:2px !important; z-index:0 !important;
  background:linear-gradient(90deg,rgba(10,118,192,0) 0%,#9FD4F5 18%,#38BDF8 50%,#9FD4F5 82%,rgba(10,118,192,0) 100%) !important;
  background-size:220% 100% !important;
  animation:sbFlow 5.5s linear infinite !important;
}
@keyframes sbFlow{ from{ background-position:0% 0; } to{ background-position:220% 0; } }
html body .sb-value-steps > *:hover, html body .sb-value-stage > *:hover{
  transform:translateY(-2px) !important;
}
html body .hero-copy > .hero-badge{ animation-delay:.10s; }
html body .hero-copy > h1{ animation-delay:.24s; }
html body .hero-copy > .hero-sub{ animation-delay:.44s; }
html body .hero-copy > .hero-why{ animation-delay:.58s; }
html body .hero-copy > .hero-primary-actions{ animation-delay:.72s; }
html body .hero-copy > .hero-action-help{ animation-delay:.86s; }
@keyframes sbHeroUp{ to{ opacity:1; transform:none; } }
html body .hero-copy h1::after{
  content:"" !important; display:inline-block !important;
  width:3px !important; height:.82em !important; margin-left:6px !important;
  vertical-align:-.08em !important; border-radius:2px !important;
  background:#0A76C0 !important;
  animation:sbCaret 1.05s steps(1) .95s 6 !important;
  opacity:0 !important;
}
@keyframes sbCaret{ 0%,49%{opacity:1} 50%,100%{opacity:0} }
html body .hero-primary-actions > a:first-child::before,
html body .hero-primary-actions > button:first-child::before{
  content:"" !important; position:absolute !important; inset:0 !important;
  background:linear-gradient(105deg,transparent 34%,rgba(255,255,255,.42) 50%,transparent 66%) !important;
  transform:translateX(-120%) !important; pointer-events:none !important;
  animation:sbSheen 3.6s ease-in-out 1.6s infinite !important;
}
@keyframes sbSheen{ 0%{transform:translateX(-120%)} 26%,100%{transform:translateX(120%)} }
html body .hero-media img{
  animation:sbHeroSlide 1.15s cubic-bezier(.16,1,.3,1) both,
            sbHeroPan 22s ease-in-out 1.2s infinite alternate !important;
  will-change:transform !important;
}
@keyframes sbHeroSlide{ from{ opacity:0; transform:translateX(38px) scale(1.06); } to{ opacity:1; transform:none; } }
@keyframes sbHeroPan{ from{ transform:scale(1); } to{ transform:scale(1.055); } }
html body .sit-grid > *:nth-child(1){ animation-delay:.05s }
html body .sit-grid > *:nth-child(2){ animation-delay:.13s }
html body .sit-grid > *:nth-child(3){ animation-delay:.21s }
html body .sit-grid > *:nth-child(4){ animation-delay:.29s }
html body .sit-grid > *:nth-child(5){ animation-delay:.37s }
html body .sit-grid > *:nth-child(6){ animation-delay:.45s }
html body .sit-grid > *:hover{
  transform:translateX(4px) !important;
  border-color:#9FD4F5 !important;
  box-shadow:0 6px 18px rgba(13,40,71,.09) !important;
}
html body .sit-result .sit-res-cols a:nth-child(1){ animation-delay:.04s }
html body .sit-result .sit-res-cols a:nth-child(2){ animation-delay:.10s }
html body .sit-result .sit-res-cols a:nth-child(3){ animation-delay:.16s }
html body .sit-result .sit-res-cols a:nth-child(4){ animation-delay:.22s }
html body .sit-result .sit-res-cols a:nth-child(5){ animation-delay:.28s }
html body .sit-result .sit-res-cols a:nth-child(6){ animation-delay:.34s }
html body .sit-result .sit-res-cols a:hover,
html body .sit-result .sit-res-cols button:hover{
  background:linear-gradient(135deg,#0A76C0 0%,#0968AB 100%) !important;
  border-color:#0A76C0 !important; color:#FFFFFF !important;
  transform:translateY(-2px) !important;
  box-shadow:0 8px 20px rgba(10,118,192,.26) !important;
}
html body .sit-result .sit-res-head{
  border-bottom:1px solid #EDF3F8 !important;
}
html body .sb-popup-box{
  box-shadow:0 32px 80px rgba(8,26,45,.30), 0 4px 14px rgba(8,26,45,.14) !important;
  border:1px solid rgba(255,255,255,.9) !important;
}
html body .sit-result a[href]:hover,
html body .sit-result .sit-col a:hover,
html body .sit-result li > a:hover{
  background-image:linear-gradient(135deg,#0A76C0 0%,#0968AB 100%) !important;
  background-color:#0A76C0 !important;
  border-color:#0A76C0 !important; color:#FFFFFF !important;
  transform:translateY(-2px) !important;
  box-shadow:0 8px 20px rgba(10,118,192,.26) !important;
}
html body .sit-result::after{
  content:"" !important; position:absolute !important; inset:0 !important; pointer-events:none !important;
  background:linear-gradient(115deg,transparent 38%,rgba(56,189,248,.16) 50%,transparent 62%) !important;
  transform:translateX(-120%) !important;
  animation:sbShine 6.5s ease-in-out 1.2s infinite !important;
}
@keyframes sbShine{ 0%{transform:translateX(-120%)} 22%,100%{transform:translateX(120%)} }
html body .tools-more{
  clear:both !important;
  position:relative !important;
  margin-top:24px !important;
}
html body .preview-room i,
html body .preview-room b{
  color:#16233A !important;
  background:#FFFFFF !important;
  border-radius:4px !important;
  padding:1px 3px !important;
}
html body .hero-media picture,
html body .hero-media img{
  object-fit:cover !important;
  object-position:center !important;
}
html body .hero-media-legend{
  position:absolute !important;
  left:clamp(12px,2vw,24px) !important;
  right:clamp(12px,2vw,24px) !important;
  bottom:14px !important;
  z-index:3 !important;
  display:grid !important;
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:8px !important;
  margin:0 !important;
  padding:9px !important;
  list-style:none !important;
  border:1px solid rgba(7,95,156,.14) !important;
  border-radius:12px !important;
  background:rgba(255,255,255,.90) !important;
  box-shadow:0 10px 28px rgba(8,26,45,.10) !important;
  backdrop-filter:blur(8px) !important;
}
html body .hero-media-legend li{
  min-width:0 !important;
  padding:5px 4px !important;
  border-radius:7px !important;
  background:#F1F8FD !important;
  color:#075F9C !important;
  font-size:12px !important;
  font-weight:750 !important;
  line-height:1.25 !important;
  text-align:center !important;
  word-break:keep-all !important;
}
html body .sb-popup-media{
  height:68px !important;
  margin:14px 50px 0 18px !important;
  overflow:hidden !important;
  border:1px solid #DCEAF4 !important;
  border-radius:12px !important;
  background:#F4F8FB !important;
}
html body .sb-popup-media img{
  display:block !important;
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:center !important;
}
html body .sb-popup-media + .sb-popup-head{
  padding-top:14px !important;
}
html body .sb-howto-bar .hb-steps > li .hb-no{
  background-color:#075F9C !important;
  background:#075F9C !important;
  color:#FFFFFF !important;
}
html body .sb-popup-steps,
html body .sb-popup-cta{ gap:8px !important; }
html body .sit-result{ gap:24px !important; }
html body .tools-layout{ gap:16px !important; }
html body .pricing-formula{ gap:24px !important; }
html body footer.site-footer .footer-nav-grid{ gap:4px 24px !important; }
html body .sb-fixbar-agree{ gap:8px !important; }
html body .closing .eyebrow{
  color:#9FD4F5 !important;
  background:#0F2C48 !important;
  border-color:#5AA9DA !important;
}
html body:has(:focus-visible) a.sb-kfab:not(:focus-visible),
html body:has(:focus-visible) .kakao-float:not(:focus-visible){
  opacity:0 !important;
  pointer-events:none !important;
}
html body .sb-fixbar-f input,
html body .sb-fixbar-cta{ height:44px !important; }
html body .sb-fixbar-agree a{
  display:inline-flex !important;
  min-width:40px !important;
  min-height:40px !important;
  align-items:center !important;
  justify-content:center !important;
}
html body .sb-fixbar-close{
  width:44px !important;
  min-width:44px !important;
  height:44px !important;
}