/* ============================================================
   tokens.css — 카카오옐로우 디자인 시스템 정본 v2 · A항 토큰
   D:\수한 에이전트\일수 홈페이지 배포\대구일수업체\닷홈\디자인시스템_정본_v2.md §A
   전 사이트 :root 에 그대로 붙여 쓴다. 값을 사이트마다 바꾸지 않는다.
   ============================================================ */
:root{
  /* 색 */
  --ds-primary:#FEE500;   /* 카카오 노랑 — 버튼·포인트 전용. 보라 계열 금지 */
  --ds-ink:#191919;       /* 기본 글자 / 노랑 위 글자 */
  --ds-ink2:#2E2E2E;      /* 보조 글자 */
  --ds-off:#F6F5F1;       /* 섹션 교대 배경(오프화이트) */
  --ds-line:#ECECEC;      /* 옅은 경계선 */
  --ds-grey:#6b6b6b;      /* 설명·서브타이틀 */
  --ds-white:#FFFFFF;

  /* 헤더 전용(다크 네이비 — eundev dg5head2 고정 배색). ★상단 띠(유틸 바)는 만들지
     않는다(§23 2026-09-12 2차 확정) — eundev 실물은 <body> 직후 바로 header 뿐이다 */
  --ds-header-bg:#141B2E;
  --ds-header-line:#232C45;
  --ds-header-fg:#F2F2F2;

  /* 법정고지·형제링크 전용(다크 네이비 박스 — il-legal-fix 고정 배색) */
  --ds-legal-bg:#0B1226;
  --ds-legal-fg:#ECECEC;
  --ds-legal-warn:#FFD4D4;

  /* 치수 */
  --ds-max:1280px;          /* 바깥 컨테이너(container-full 안 여백 기준) */
  --ds-content:1200px;      /* §C-1: 모든 섹션 내용 컨테이너 폭 — 이 값 하나만 쓴다
                               (2026-09-12 사장님 「섹션 요소들의 가로사이즈를 1200px 로 통일해보자」) */
  --ds-doc:720px;            /* §C-4: **하위 페이지 콘텐츠 폭** — 본문·FAQ·형제 띠까지 이 폭
                               (2026-09-12 사장님 「하위페이지는 PC 기준 가로 720px · FAQ 섹션까지 포함 · 규칙을 그렇게 잡자」.
                                1200 이면 글줄이 1,150px 로 흘러 넓어 보인다 — 실측) */
  --ds-gutter-pc:40px;
  --ds-gutter-mo:12px;   /* 2026-09-12 사장님 「좌우 여백은 일관성 있게, 좌 12px 우 12px」 */
  /* ★컨테이너가 실제로 쓰는 여백은 이 하나다 — 미디어쿼리로 값만 갈아 끼운다.
     (2026-09-12) 컨테이너마다 PC 규칙·모바일 규칙을 따로 쓰면 **파일 안 순서**로 승패가
     갈린다 — 실측: 법정고지의 모바일 규칙이 PC 규칙보다 앞에 있어 져서, 모바일 여백만
     40px(나머지 20px)로 남았다. 변수 하나면 순서와 무관하다. */
  --ds-gutter:var(--ds-gutter-pc);
  --ds-radius:14px;
  --ds-sec-y-pc:96px;        /* §C-2: 섹션 상하 padding(PC) — top=bottom */
  --ds-sec-y-mo:48px;        /* §C-2: 섹션 상하 padding(모바일) — top=bottom */
  --ds-hero-h-pc:1080px;     /* §C-5 / B-히어로: PC 히어로 고정 높이 */

  /* 글꼴 */
  --ds-font:'Pretendard Variable', Pretendard, 'Malgun Gothic', sans-serif;
}

/* jsdelivr dynamic-subset — 각 페이지 <head> 에 이 두 줄을 넣는다(토큰 파일이 대신 로드하지 않는다) :
   <link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin>
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css">
*/

html,body{font-family:var(--ds-font)}
h1,h2,h3{word-break:keep-all}
h1{font-weight:800}
h2{font-weight:800}
h3{font-weight:700}
p,li,dd,dt,figcaption{word-break:keep-all}

/* §C-7 FAQ 아코디언(details/summary 표준 HTML — 스크립트 불필요, name 속성으로 하나만 열림) */
details.il-faq-item{border:1px solid var(--ds-line);border-radius:var(--ds-radius);overflow:hidden}
details.il-faq-item summary{cursor:pointer;list-style:none}
details.il-faq-item summary::-webkit-details-marker{display:none}

@media(max-width:768px){
  :root{--ds-gutter:var(--ds-gutter-mo)}
}

/* ★제목-줄균형-0912 */
/* h2·h3 가 두 줄로 접히면 **두 줄 글자수를 맞춘다** (2026-09-12 사장님 「모바일에서 보더라도
   줄바꿈과 두 줄의 글자수가 최대한 자연스러우면 · 규칙에 적용」). 실측: 390 에서
   「대구일수, 카카오 대구일수가 이렇게 / 안내해요」 — 둘째 줄이 4자 고아줄.
   text-wrap:balance 가 브라우저에서 줄 길이를 고르게 나눈다(크롬 114+ · 미지원이면 그대로).
   낱말 가운데는 안 끊는다(keep-all). 검사는 `시각검수.py` ⑥ 이 390 렌더에서 줄 수·줄 글자수 차를 잰다. */
h1,h2,h3,.sgw-head h2,.cta-title,.sgw-vs-card h3{word-break:keep-all;text-wrap:balance}
.sgw-head p,.cta-desc{word-break:keep-all;text-wrap:pretty}


/* ============================================================
   ★섹션 감싸개는 계산식 하나만 쓴다 (2026-09-12 사장님 확정)
   「1200px이든 1440px이든, PC에서 봤을 때 섹션들의 요소들이 가로폭 동일하게 내려가야 함」
   「모바일에서도 좌우 여백은 동일하게 내려가야 함」
   width:min(폭, 100% - 여백*2) + margin-inline:auto  ← 이 꼴 하나
   `max-width + padding` 꼴을 섞지 마라 — rect.width 가 화면 폭까지 차서 **좁은 PC 폭에서만**
   그 섹션이 넓어 보인다(2026-09-12 실측: 1100·1024 에서 법정고지만 1100·1024, 나머지는 1020·944).
   ============================================================ */
/* ============================================================
   chrome.css — 공통 껍데기 CSS (헤더·상단 띠·CTA·플로팅·푸터·법정고지)
   header.html·cta.html·float.html·footer.html·legal.html 과 짝이다.
   eundev.dothome.co.kr FTP index.html 에 누적된 패치(dg5head2·dg-float-kakao·
   il-legal-fix 등)를 최종 적용 상태 하나로 정리했다 — 패치 과정이 아니라 결과값.
   tokens.css 를 먼저 불러온 뒤에 이 파일을 붙인다.
   ============================================================ */

/* ---- 바깥 컨테이너(이미 프레임워크에 있으면 이 정의는 덮어써지지 않게 최소값만) ---- */
.container-full{width:min(var(--ds-max), 100% - var(--ds-gutter)*2);margin-inline:auto;box-sizing:border-box}
.container{width:min(var(--ds-content), 100% - var(--ds-gutter)*2);margin-inline:auto;box-sizing:border-box}
/* ============================================================
   헤더 — 다크 네이비 + 카카오 노랑(정본 배색, dg5head2 고정)
   ★상단 띠(유틸 바)는 만들지 않는다(정본 v2 §23 2차 확정 2026-09-12) — eundev 실물은
   <body> 직후 바로 header.th-layout-header 뿐이다. header.html 에 띠를 넣지 않는다.
   ============================================================ */
.il-site-header,.th-layout-header .il-site-header{background:var(--ds-header-bg);border-bottom:1px solid var(--ds-header-line)}
.header-container{display:flex;align-items:center;justify-content:space-between;height:72px;gap:16px}
.header-left,.header-title{flex:0 0 auto;min-width:0;white-space:nowrap}
.header-title a{display:inline-flex;align-items:center;white-space:nowrap;text-decoration:none}
.logo-text{color:var(--ds-primary);font-weight:800;font-size:18px;white-space:nowrap;display:inline-block}
.header-center{flex:1 1 auto;min-width:0;display:flex;justify-content:center} /* overflow:hidden 은 드롭다운을 가린다 — 2026-09-12 cf10-8 실측으로 뺌 */
.header-gnb{min-width:0}
.header-gnblist{display:flex;align-items:center;gap:44px;list-style:none;margin:0;padding:0;flex-wrap:nowrap} /* 44 — 2026-09-12 사장님 「허브메뉴 좌우 폭 여유」(§G-4) · 1365↓ 28 */
.header-gnbitem{position:relative}
.header-gnblink{color:var(--ds-header-fg);text-decoration:none;font-size:15px;font-weight:600;white-space:nowrap}
.header-gnbitem.has-dropdown:hover .dropdown-menu{display:block}
.dropdown-menu{display:none;position:absolute;top:100%;left:0;background:var(--ds-header-bg);border:1px solid var(--ds-header-line);border-radius:10px;padding:8px;margin:8px 0 0;list-style:none;min-width:168px;z-index:40}
.dropdown-menu li a{display:block;padding:8px 12px;color:var(--ds-header-fg);font-size:14px;text-decoration:none;border-radius:6px;white-space:nowrap}
.dropdown-menu li a:hover{background:rgba(254,229,0,.12);color:var(--ds-primary)}
.header-right{flex:0 0 auto;display:flex;align-items:center;gap:14px}
.btn-header-cta{background:var(--ds-primary);color:var(--ds-ink);font-weight:800;font-size:15px;border:1px solid var(--ds-primary);border-radius:999px;padding:10px 18px;text-decoration:none;white-space:nowrap}
.btn-momenu{display:none;flex-direction:column;gap:5px;background:none;border:0;padding:6px;cursor:pointer}
.ico-hamburger{display:block;width:22px;height:2px;background:var(--ds-primary);border-radius:2px}
@media(max-width:1365px){
  .header-container{padding-left:20px;padding-right:20px;gap:12px}
  .header-gnblist{gap:28px}
  .header-gnblink{font-size:14px}
  .btn-header-cta{padding:9px 14px;font-size:14px}
}
@media(max-width:900px){
  .header-center{display:none}
  .btn-header-cta{display:none}                /* §B 모바일: 전화 버튼 없음 */
  .btn-momenu{display:flex}
}

/* 모바일 풀메뉴(아코디언) */
.header-fullmenu{position:fixed;top:0;right:-100%;width:min(86vw,360px);height:100%;background:var(--ds-header-bg);z-index:10000;transition:right .28s ease;overflow-y:auto}
.header-fullmenu.active{right:0}
.fullmenu-wrapper{padding:20px}
.fullmenu-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.fullmenu-title a{display:inline-flex;align-items:center;color:var(--ds-header-fg);text-decoration:none}
.fullmenu-gnblist{list-style:none;margin:0;padding:0}
.fullmenu-gnbitem{border-bottom:1px solid var(--ds-header-line)}
.fullmenu-gnblink{display:block;padding:14px 4px;color:var(--ds-header-fg);text-decoration:none;font-size:15px;font-weight:700}
.fullmenu-close{position:absolute;top:18px;right:18px;background:none;border:0;color:var(--ds-header-fg);font-size:26px;line-height:1;cursor:pointer}
.header-overlay{position:fixed;inset:0;background:rgba(11,18,38,.55);z-index:9999;opacity:0;pointer-events:none;transition:opacity .25s}
.header-overlay.active{opacity:1;pointer-events:auto}
/* GNB 하위메뉴 → 모바일 아코디언(kk-group) */
.fullmenu-gnblist .kk-group{display:flex;flex-wrap:wrap;align-items:center}
.fullmenu-gnblist .kk-group > .fullmenu-gnblink{flex:1 1 auto}
.fullmenu-gnblist .kk-arrow{flex:0 0 auto;background:none;border:0;color:var(--ds-primary);font-size:20px;line-height:1;padding:10px 10px;cursor:pointer;transition:transform .2s}
.fullmenu-gnblist .kk-group.open .kk-arrow{transform:rotate(180deg)}
.fullmenu-gnblist .kk-sub{display:none;width:100%;margin:0;padding:0 0 6px 14px;list-style:none}
.fullmenu-gnblist .kk-group.open .kk-sub{display:block}
.fullmenu-gnblist .kk-sub li a{display:block;padding:9px 0;font-size:14px;color:var(--ds-header-fg);opacity:.88;text-decoration:none}

/* ============================================================
   CTA — 중간/하단(§B "이미지형": 좌 문안·버튼 / 우 1:1 이미지)
   cta.html 은 바이트 그대로(문구·라벨·href 고정) — 배포 관문 canon_gate 대조 대상.
   라벨 3종: PC「010-2252-8599 →」· 모바일「전화 상담하기 →」「문자 상담하기 →」
   (각각 별도 <a> — 한 버튼 안에 두 span 을 넣지 않는다. CTA_A 라벨 추출기가
   버튼 하나의 텍스트를 통째로 읽어서, span 토글을 쓰면 두 라벨이 섞여 버린다)
   ============================================================ */
/* ── 중간 CTA (2026-09-12 사장님 「저런 형태는 보기 불편해 · 배경색을 깔고 텍스트 + 버튼으로만」)
   하단 CTA(.cta-section)는 카카오옐로우 이미지형 그대로 두고, 본문 사이에 넣는 중간 CTA 만
   이미지 없이 **배경 띠 + 글 + 버튼**으로 낸다. 부품 파일은 cta_mid.html.
   ★두 CTA 가 연달아 서지 않는다(중간은 본문 섹션 사이 · 하단은 푸터 위 하나). */
.cta-mid{padding:var(--ds-sec-y-pc) 0;margin-top:0;background:var(--ds-ink)}
.cta-mid-in{width:min(var(--ds-content), 100% - var(--ds-gutter)*2);margin-inline:auto;box-sizing:border-box;text-align:center}
.cta-mid-title{font-size:32px;font-weight:800;margin:0 0 12px;color:#fff;text-align:center;word-break:keep-all}
.cta-mid-desc{font-size:16px;margin:0;color:#D8D8D8;text-align:center;word-break:keep-all}
.cta-mid .il-cta-btns{margin-top:26px}

/* ── 하단 CTA = eundev **라이브** 그대로 (2026-09-12 사장님 「하단 CTA섹션은 10개 모두
   https://eundev.dothome.co.kr/ 의 이미지와 형태를 사용 · 텍스트만 좀 달라지면 될 듯」).
   ★처음 킷은 eundev **로컬 FTP**(미배포 수정본 · 사람 사진형)를 정본으로 잡아 틀렸다 —
   사장님이 보시는 것은 라이브다. 라이브 = 노란 그라데이션 띠 · 제목·설명 가운데 ·
   전화·문자 **카드 이미지 두 장**(cta-call.png · cta-sms.png 600×250 · 킷에 받아 둠 →
   각 사이트 FTP/images/ 로 복사해 자기 도메인에서 서빙). h2·설명만 사이트별로 글자수 맞춰 다르게. */
.cta-section{padding:var(--ds-sec-y-pc) 0;margin-top:0;text-align:center;
  background:linear-gradient(180deg,var(--ds-primary) 0%,var(--ds-primary) 50%,#ECECEC 100%);color:var(--ds-ink)}
.cta-container{width:min(var(--ds-content), 100% - var(--ds-gutter)*2);margin-inline:auto;box-sizing:border-box;text-align:center}
/* 옛 사람사진형 규칙 `.cta-section .cta-container(display:flex)` 가 남아 제목·설명이 가로로 섰다(9-12 실측) — 구체도 맞춰 세로로 */
.cta-section .cta-container{display:block;gap:0}
.cta-section .cta-title{font-size:32px;margin:0 0 12px}
.cta-section .cta-desc{font-size:18px;margin:0}
.cta-title{font-size:32px;font-weight:800;margin:0 0 12px;text-align:center;color:var(--ds-ink)}
.cta-desc{font-size:18px;color:var(--ds-ink);margin:0;text-align:center;word-break:keep-all}
.ctaimg-btns{display:flex;gap:14px;justify-content:center;align-items:center;flex-wrap:wrap;margin-top:26px}
.ctaimg-btns a{display:block;line-height:0;transition:transform .18s ease}
.ctaimg-btns a:hover{transform:translateY(-3px)}
.ctaimg-btns img{width:380px;max-width:92vw;height:auto;display:block}
/* 중간 CTA·히어로가 쓰는 알약 버튼(하단 CTA 는 이제 이미지 버튼이라 안 쓴다) */
.il-cta-btns{display:flex;gap:14px;justify-content:center;align-items:center;flex-wrap:wrap;margin-top:26px}
.il-cta-btn{display:inline-flex;align-items:center;justify-content:center;min-width:240px;height:56px;padding:0 28px;border-radius:999px;background:var(--ds-primary);color:var(--ds-ink);font-weight:800;font-size:16px;text-decoration:none;box-sizing:border-box}
a.il-cta-btn-mo[href^="sms:"]{background:var(--ds-white);border:2px solid var(--ds-primary)} /* :nth-of-type(2) 는 형제 a 중 2번째 = 모바일 tel 버튼을 물어 두 버튼이 다 흰 바탕이 됐다 — 2026-09-12 dh-ilsudaechul 실측으로 뺌 */
.cta-imgbox{flex:0 0 280px;width:280px;aspect-ratio:1/1;border-radius:var(--ds-radius);overflow:hidden}
.cta-imgbox img{width:100%;height:100%;object-fit:cover;display:block}
.il-cta-btn-mo{display:none}
@media(max-width:768px){
  .cta-section{padding:var(--ds-sec-y-mo) 0}
  .cta-title{font-size:26px}
  .cta-desc{font-size:16px}
  .ctaimg-btns{flex-direction:column;gap:12px}
  .cta-mid{padding:var(--ds-sec-y-mo) 0}
  .cta-mid-title{font-size:24px}
  .il-cta-btn-pc{display:none}
  .il-cta-btn-mo{display:inline-flex}
  .cta-imgbox{flex:0 0 auto;width:min(70vw,280px)}
}

/* ============================================================
   플로팅 — ★정본 배색: 노란 알약 · **먹색 아이콘 원** · 노란 아이콘선
   (2026-09-12 사장님 「플로팅 배너에서 아이콘이 안 보이는 문제 해결 · 모든 페이지 다 수정」)
   라이브 1번 실측 — 알약 흰색 · 원 노랑 · 선 노랑 = **노란 원에 노란 선이라 아이콘이 묻혔다**.
   배색 두 벌(사이트 폴더의 가짜 `_플로팅정본.css` + 이 킷)이 섞여 원만 뒤집힌 것이 원인.
   그래서 여기서 **원 배경과 선 색을 짝으로** 못 박고, 어느 쪽을 쓰든 대비가 나게 한다:
   먹색 원이면 노란 선 · 노란 원이면 먹색 선. 둘 중 하나만 바뀌면 안 보인다.
   ★대비 검수는 `디자인시스템_검사.py --플로팅` 이 렌더로 잰다(원 배경 vs 선 색 ΔRGB).
   ★플로팅은 **모든 템플릿 공통**이다(사장님) — 사이트마다 다시 칠하지 않는다.
   ============================================================ */
.fm2-float{position:fixed;right:28px;bottom:32px;z-index:99999;display:flex;flex-direction:column;gap:12px;font-family:var(--ds-font)}
.fm2-float a{display:flex;align-items:center;gap:13px;background:var(--ds-primary);color:var(--ds-ink);border:1px solid var(--ds-ink);border-radius:999px;padding:13px 26px 13px 15px;box-shadow:0 4px 14px rgba(0,0,0,.18);font-size:15px;font-weight:800;text-decoration:none;line-height:1.25;transition:transform .3s cubic-bezier(.22,1,.36,1)}
.fm2-float a:hover{transform:translateX(-5px) scale(1.03)}
.fm2-float .fm2-ic{width:46px;height:46px;display:flex;align-items:center;justify-content:center;flex-shrink:0;border-radius:50%;background:var(--ds-ink);color:var(--ds-primary)}
.fm2-float .fm2-ic svg{width:24px;height:24px;display:block;stroke:var(--ds-primary);fill:none}
/* 텍스트 — ★PC·모바일 모두 「말 / 번호」 두 줄로 같게 보인다
   (2026-09-12 사장님 「모바일에서도 PC처럼 텍스트·전화번호 이렇게 보이게 통일」).
   예전엔 640px 아래에서 .fm2-tx 를 감춰 모바일엔 **동그란 아이콘만** 떴다 — 그 규칙을 뺐다. */
.fm2-tx{white-space:nowrap;letter-spacing:-.02em;color:var(--ds-ink);display:inline-flex;flex-direction:column;line-height:1.15}
.fm2-tx b{display:block;font-weight:800;font-size:12px;opacity:.85}
@media(max-width:768px){
  .fm2-float{right:14px;bottom:18px;gap:10px}
  .fm2-float a{padding:9px 16px 9px 9px;font-size:13px;gap:8px;border-width:1px}
  .fm2-float .fm2-ic{width:34px;height:34px}
  .fm2-float .fm2-ic svg{width:17px;height:17px}
  .fm2-tx b{font-size:11px}
}
@media(max-width:400px){
  .fm2-float a{padding:8px 13px 8px 8px;font-size:12px;gap:7px}
  .fm2-float .fm2-ic{width:30px;height:30px}
  .fm2-float .fm2-ic svg{width:15px;height:15px}
}

/* ============================================================
   푸터
   ============================================================ */
footer.footer{background:#141414;color:#ececec;margin-top:0;padding-top:56px;padding-bottom:48px} /* 저작권 아래 여백 — 2026-09-12 사장님 */
.footer-top{border-bottom:1px solid #2a2a2a;padding-bottom:18px;margin-bottom:28px}
/* ★모달 링크(이메일 무단 수집 거부·개인정보처리방침)는 **좌측 정렬**
   (2026-09-12 사장님 「푸터섹션의 모달 텍스트도 좌측 배열이 낫겠다」) — 오른쪽 끝에 붙으면
   그 줄만 다른 섹션과 시작선이 달라 보인다. 아래 본문 4칸과 같은 왼쪽 선에 선다. */
.footer-links{display:flex;gap:18px;justify-content:flex-start;flex-wrap:wrap}
.footer-links a{color:#aeb5c6;font-size:13px;text-decoration:none}
.footer-links a:hover{color:var(--ds-primary)}
/* 세 단 안내 띠(CONTACT/AREA/HOURS) — 푸터 맨 위 (2026-09-12 사장님 「푸터 섹션 아래에 들어가야 하는 내용」)
   ★법정고지와 겹치는 문구(연 20%·중개수수료)는 여기 넣지 않는다 — 상용구 반복은 SEO 에 불리 */
.footer-cs{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;padding:0 0 28px;margin:0 0 20px;border-bottom:1px solid #2a2a2a;font-size:13.5px;line-height:1.7;color:#c9ced9}
.footer-cs b{display:block;font-size:11px;letter-spacing:.18em;color:var(--ds-primary);margin-bottom:6px}
.footer-cs address{font-style:normal}
.footer-content{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:32px}
.footer-section h3{color:#ffffff;font-size:16px;margin:0 0 12px}
.footer-section p,.footer-section li{color:#d5d9e4;font-size:13.5px;line-height:1.7}
.footer-hub-links{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.footer-hub-links a{color:#d5d9e4;text-decoration:none;font-size:13.5px}
.footer-hub-links a:hover{color:var(--ds-primary)}
.footer-bottom{border-top:1px solid #2a2a2a;margin-top:32px;padding:20px 0 0}
.footer-bottom p{color:#8a90a0;font-size:12.5px;margin:0}
@media(max-width:900px){.footer-content{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.footer-content{grid-template-columns:1fr}.footer-links{justify-content:flex-start}}

/* 약관 모달(정본 공용 고정 문안 — footer.html 내 고정) */
.policy-modal{display:none;position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:100000;align-items:center;justify-content:center;padding:24px}
.policy-modal-content{background:#fff;color:#222;max-width:640px;max-height:80vh;overflow-y:auto;border-radius:var(--ds-radius);padding:28px}
.policy-modal-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.policy-modal-close{background:none;border:0;font-size:22px;line-height:1;cursor:pointer}
.policy-modal-body h3{font-size:16px;margin:18px 0 8px}
.policy-modal-body h4{font-size:14px;margin:14px 0 6px}
.policy-modal-body p,.policy-modal-body li{font-size:13.5px;line-height:1.7;color:#333}

/* ============================================================
   법정고지 — 다크 네이비 박스 · dl.il-legal-tbl 2열(dt 140px · dd 한 줄)
   ============================================================ */
.il-legal{background:var(--ds-legal-bg);margin-top:0;padding:48px 0}
.il-legal-in{width:min(var(--ds-content), 100% - var(--ds-gutter)*2);margin-inline:auto;box-sizing:border-box}
.il-ltit{color:#ffffff;font-size:18px;font-weight:800;margin:0 0 18px}
.il-legal-tbl{display:grid;grid-template-columns:140px 1fr;row-gap:10px;column-gap:16px;margin:0}
.il-legal-tbl dt{color:#ffffff;font-size:13.5px;font-weight:700;margin:0}
.il-legal-tbl dd{color:var(--ds-legal-fg);font-size:13.5px;line-height:1.6;margin:0}
.il-warn{color:var(--ds-legal-warn);font-size:12.5px;margin:22px 0 0;padding-top:18px;border-top:1px solid rgba(255,255,255,.12)}
@media(max-width:768px){
  .il-legal-tbl{grid-template-columns:1fr}
  .il-legal-tbl dt{margin-top:6px}
}

/* ★히어로-캡션-숨김 0912 */
/* 히어로 사진의 캡션은 **화면에서 감춘다** (2026-09-12 사장님 「알트텍스트가 삐져나온 것
   같은데, 그러니까 상하 밸런스가 안 맞아 · 다른 페이지도 같은 문제 있을 수 있음」).
   히어로는 왼쪽 글 상자와 오른쪽 사진이 **같은 정사각**이라야 하는데, 사진 밑에 캡션이
   한 줄(실측 23~31px) 붙으면 오른쪽만 길어져 좌우 중심이 어긋난다(하위 27쪽 580x611).
   마크업은 그대로 둔다 — 검색·화면낭독기에는 남는다. 본문 섹션 사진 캡션은 그대로. */
.sgw-hero-card figcaption,.sgw-hero figcaption,.il-hero figcaption,
.sgw-rep.sgw-hero-card figcaption{
  position:absolute !important;width:1px !important;height:1px !important;margin:-1px !important;
  padding:0 !important;overflow:hidden !important;clip-path:inset(50%) !important;
  white-space:nowrap !important;border:0 !important}
.sgw-hero-in,.sgw-hero-inner{align-items:center}

/* ★CTA-하단여백-0912 */
/* 하단 CTA 는 아래 여백을 위보다 조금 더 (2026-09-12 사장님 「h2 의 윗쪽 여백 때문인지 섹션의 위아래가
   시각적으로 상하 정중앙이 아닌 것처럼 보여 · h2 여백만큼 하단 여백을 조금 더」).
   위: 96 + h2 line-height 여분 ≈ 12 · 아래: 카드 그림자에 붙어 보인다 → 아래에 +20px. 모바일 +12px. */
.cta-section{padding-bottom:calc(var(--ds-sec-y-pc) + 20px) !important}
@media(max-width:768px){.cta-section{padding-bottom:calc(var(--ds-sec-y-mo) + 12px) !important}}

/* ★표캡션-모바일-0912 */
/* 표 <caption> 이 모바일에서 폭 12px 로 무너져 글자가 세로로 흘렀다 (2026-09-12 사장님 「모바일에서
   해당 부분이 css 가 깨진다 · 계약 전에 이것만 확인하세요 섹션」). table 이 overflow-x 블록으로
   바뀌면 caption 이 폭을 잃는다 — 폭 100% 블록으로 못 박는다. 검색엔진용 글이라 감추지 않는다. */
table caption,.sgw-tb caption{display:block;width:100%;caption-side:top;text-align:left;
  font-size:13px;color:var(--ds-grey);padding:0 0 8px;white-space:normal;word-break:keep-all}
/* 히어로 체크 3줄 — 390 에서 한 줄(줄당 공백 포함 ≤20자) · 줄바꿈 나면 문안을 줄인다 */
.sgw-hero li{white-space:normal}

/* ★케러셀-모바일-세로-0912 */
/* 모바일 케러셀은 슬라이드가 아니라 **한 줄에 한 장씩 세로로** 전부 보여준다 (2026-09-12 사장님
   「모바일에서는 슬라이드 말고 한 줄에 한 개씩 · 카드뉴스를 이용자들에게 쭉 보여주기 위해서」).
   가로 스크롤은 손을 대야 다음 장이 보이지만 세로 1열은 스크롤만 내리면 12장을 다 본다. */
@media(max-width:768px){
  .sgw-tiles,.k-tiles,.card-rail,.cards-track{display:grid !important;grid-template-columns:1fr !important;gap:16px !important;
    overflow:visible !important;scroll-snap-type:none !important;padding-bottom:0 !important}
  .sgw-tiles > .sgw-tile,.k-tiles > *,.card-rail > *,.cards-track > *{flex:none !important;width:100% !important;scroll-snap-align:none !important}
}

/* ★하위폭-720-0912 */
/* 하위 페이지(구·동·허브)의 **콘텐츠 폭 720** — 본문 · FAQ · 형제 띠까지.
   껍데기(헤더 · 히어로 · 하단 CTA · 법정고지 · 푸터)는 1200 그대로 — 브랜드 축이라 안 좁힌다.
   판정: `body.sub`(빌더가 붙인다) + `body:has(.sgw-doc)` 폴백 둘 다.
   모바일은 손대지 않는다(사장님 「모바일은 문제 없어 보이고」) — min() 이라 자동으로 화면 폭 - 여백. */
body.sub .sgw-doc,body.sub .sgw-faq-in,body.sub .sgw-faq-list,body.sub .sgw-intro-in,body.sub .sgw-sib-in,
body:has(.sgw-doc) .sgw-doc,body:has(.sgw-doc) .sgw-faq-in,body:has(.sgw-doc) .sgw-faq-list,
body:has(.sgw-doc) .sgw-intro-in,body:has(.sgw-doc) .sgw-sib-in{
  width:min(var(--ds-doc), 100% - var(--ds-gutter)*2) !important;max-width:none !important;margin-inline:auto}
@media(max-width:768px){
  /* 모바일은 좌우 여백을 껍데기와 같게 — 720 규칙이 부모 여백 위에 또 빼면 310px(여백 40)이 된다.
     사장님 「모바일은 문제 없어 보이고」 — 350px(여백 20) 그대로. */
  body.sub .sgw-doc,body.sub .sgw-faq-in,body.sub .sgw-faq-list,body.sub .sgw-intro-in,body.sub .sgw-sib-in,
  body:has(.sgw-doc) .sgw-doc,body:has(.sgw-doc) .sgw-faq-in,body:has(.sgw-doc) .sgw-faq-list,
  body:has(.sgw-doc) .sgw-intro-in,body:has(.sgw-doc) .sgw-sib-in{width:100% !important}
}

/* ★드롭다운-마우스틈-0912 */
/* 허브 메뉴 → 드롭다운으로 마우스를 내릴 때 hover 가 끊기던 것 (2026-09-12 사장님 「여백이 있어서
   제대로 이동이 안 되」). 원인: `.dropdown-menu(margin:8px 0 0)` 의 8px 틈에서 :hover 가 풀린다.
   틈의 생김새는 그대로 두고(디자인), **투명 브릿지**로 마우스 경로만 잇는다.
   ★키보드도 같이 — :focus-within 으로 열린다(크롤러는 DOM 에 링크가 있으니 무관). */
.header-gnbitem.has-dropdown{padding-bottom:2px}
.header-gnbitem.has-dropdown::after{content:"";position:absolute;left:0;right:0;top:100%;height:14px;background:transparent}
.header-gnbitem.has-dropdown:hover .dropdown-menu,
.header-gnbitem.has-dropdown:focus-within .dropdown-menu{display:block}
.dropdown-menu:hover{display:block}

/* ★하위-머리와이미지-720-0912 */
/* 하위 본문의 **머리(.sgw-head)** 도 콘텐츠 폭 720 안에 둔다 — 감싸개 밖이라 1200 으로 서서
   「대구 서구 일수대출, 구 전체를 이렇게 안내해요」 같은 25자 안팎 머리가 PC 에서 한 줄로 길게 흘렀다
   (2026-09-12 사장님 「PC 에서도 이런 건 두 줄로 가는 게 좋겠네 · 나머지 페이지들도」). 720 이면 두 줄로 접힌다.
   ★본문 그림은 720 **꽉** (사장님 「하위 페이지 메뉴의 이미지들은 가로폭을 720px 로 맞춰줘야지」) —
   앞서 460 으로 좁혔던 조치는 되돌렸다. */
body.sub .sgw-intro .sgw-head,body.sub .sgw-doc .sgw-head,body.sub .sgw-faq .sgw-head,
body:has(.sgw-doc) .sgw-intro .sgw-head,body:has(.sgw-doc) .sgw-doc .sgw-head,body:has(.sgw-doc) .sgw-faq .sgw-head{
  width:min(var(--ds-doc), 100% - var(--ds-gutter)*2);max-width:none;margin-inline:auto}
body.sub .sgw-doc figure,body.sub .sgw-doc img,body.sub .sgw-doc table,
body:has(.sgw-doc) .sgw-doc figure,body:has(.sgw-doc) .sgw-doc img,body:has(.sgw-doc) .sgw-doc table{
  width:100% !important;max-width:100% !important;margin-left:0;margin-right:0}
@media(max-width:768px){
  body.sub .sgw-intro .sgw-head,body.sub .sgw-doc .sgw-head,body.sub .sgw-faq .sgw-head,
  body:has(.sgw-doc) .sgw-intro .sgw-head,body:has(.sgw-doc) .sgw-doc .sgw-head,body:has(.sgw-doc) .sgw-faq .sgw-head{width:100%}
}

/* ★모바일-여백12-표한눈에-0912 */
/* ① 모바일 좌우 여백 12px 로 통일 (2026-09-12 사장님). 토큰 --ds-gutter-mo 가 12 이므로
   min() 을 쓰는 모든 감싸개가 자동으로 따라온다. 하위 본문(.sgw-doc)만 부모에 여백이 없어
   `width:100%` 보정이 화면을 꽉 채웠다(390/좌0) — min() 으로 되돌린다. */
@media(max-width:768px){
  body.sub .sgw-doc,body:has(.sgw-doc) .sgw-doc{
    width:min(var(--ds-doc), 100% - var(--ds-gutter)*2) !important;margin-inline:auto}
  /* ② 표는 모바일에서도 **한눈에** — 세로로 쪼개던 규칙 폐기(사장님 「표는 한눈에 보여도 되니까」).
     머리행을 살리고 글자만 줄여 두 열이 한 화면에 들어가게. 넘치면 그 표만 가로 스크롤. */
  .sgw-tb thead{display:table-header-group !important}
  .sgw-tb{display:table !important;table-layout:fixed;font-size:12.5px;width:100% !important}
  .sgw-tb tbody{display:table-row-group !important}
  .sgw-tb tr{display:table-row !important}
  .sgw-tb th,.sgw-tb td{display:table-cell !important;width:auto !important;padding:8px 9px;
    word-break:keep-all;line-height:1.5;vertical-align:top}
  /* ★고정 레이아웃은 **정해지지 않은 칸을 다시 균등 분배**한다 — 첫 칸만 34% 로 정하면
     3열 표에서 크롬이 남는 둘을 33/33 으로 펴 다시 50:50 처럼 보인다(5번 실측).
     그래서 **남는 칸도 정한다**: 2열 34/66 · 3열 26/37/37. `tbody th` 로 잡으면 머리 행이
     th 둘인 표에서 양쪽에 다 먹어 50:50 이 된다(2번 실측) — `tr>:first-child` 로만 잡는다. */
  .sgw-tb tr>:first-child{width:34% !important}
  .sgw-tb tr>:first-child ~ *{width:66% !important}
  .sgw-tb3 tr>:first-child{width:26% !important}
  .sgw-tb3 tr>:first-child ~ *{width:37% !important}
  table tr>:first-child ~ *{width:auto}
  .sgw-tb tbody th{background:var(--ds-off)}
  .sgw-tb3 tbody th{width:26% !important}
}

/* ★표캡션-맨위-0912 */
/* 표 캡션이 머리행 **아래**로 끼어 들어갔다 — `display:block` 을 주면 표 흐름 안으로 들어간다
   (2026-09-12 사장님 「표가 이상하게 보이고」). `table-caption` + `caption-side:top` 으로 맨 위에.
   앞서 「표캡션-모바일」 블록이 폭 붕괴를 막으려 block 을 준 것이 원인 — 그 규칙을 이것으로 덮는다. */
table caption,.sgw-tb caption{display:table-caption !important;caption-side:top !important;
  width:auto !important;text-align:left;font-size:13px;color:var(--ds-grey);
  padding:0 0 8px;white-space:normal;word-break:keep-all}

/* ★히어로-글-좌측정렬-0913 */
/* 히어로 글은 **왼쪽 선 하나**에 맞춘다 (2026-09-13 사장님 「히어로섹션 위치는 그대로 두되, 텍스트는
   좌측 배열로 · 가운데 배열이 들쭉날쭉해 보여서」). 가운데 정렬이면 체크 세 줄의 왼쪽 끝이 줄마다
   달라져 눈에 어긋나 보인다 — 눈썹·h1·구분선·체크·버튼 묶음이 같은 자리에서 시작한다.
   버튼 **안** 글자만 가운데(알약 꼴이라 그게 맞다). 계열마다 클래스가 달라 꼴로 잡고, 계열 CSS 의
   구체도가 더 높아 `!important` 로 이긴다(먼저 넣은 판이 안 먹어 실측으로 확인 · 메모리 「값이
   이상하면 식보다 누가 이기는지 먼저」). */
[class*="hero"] [class*="-tx"],[class*="hero"] [class*="-content"],
[class*="hero"] [class*="-copy"],[class*="hero"] [class*="-body"]{text-align:left !important}
[class*="hero"] h1,[class*="hero"] h2,[class*="hero"] p,[class*="hero"] ul,[class*="hero"] ol,
[class*="hero"] li,[class*="hero"] dl,[class*="hero"] .eb,[class*="hero"] .en,
[class*="hero"] [class*="eyebrow"],[class*="hero"] [class*="kicker"]{text-align:left !important}
[class*="hero"] ul,[class*="hero"] ol{padding-left:0;list-style:none}
[class*="hero"] li{justify-content:flex-start !important;text-indent:0}
[class*="hero"] [class*="btns"],[class*="hero"] [class*="cta"]{justify-content:flex-start !important}
/* ★버튼-안-가운데-0914 — 위 [class*="cta"] 가 버튼 상자(.il-cta-btns)뿐 아니라 **버튼 자체**(.il-cta-btn · inline-flex)까지 물어
   알약 안 글자가 왼쪽으로 몰렸다(사장님 9-14 「전화번호+화살표가 버튼 안에서 좌우 정중앙이 아니다」 · 8번 실측 텍스트 148~289 / 버튼 120~360). 버튼 안은 가운데 */
[class*="hero"] a[class*="btn"],[class*="hero"] button{justify-content:center !important}
/* ★구분선만은 가운데 (2026-09-13 사장님 「가운데 선 같은 건 위치를 가운데쪽이나 텍스트들의
   가운데쪽으로 잡는 게 좋을 거 같구」) — 글을 왼쪽으로 몰면서 선까지 왼쪽 끝으로 보냈더니
   선 하나만 덩그러니 떨어져 보였다. 글 상자 **안에서 가운데**로 둔다. */
[class*="hero"] [class*="rule"],[class*="hero"] hr{margin-left:auto !important;margin-right:auto !important}
[class*="hero"] a[class*="btn"],[class*="hero"] button{text-align:center !important}
/* 사진은 그대로 — 자리(위치)는 손대지 않는다는 지시대로 */

/* ★히어로 글은 가장자리에서 한 뼘 더 (2026-09-13 사장님 「배열은 좌측으로 하는데 너무 좌측에서
   여백이 없다 요소들이」). 모바일 좌우 여백 12px 은 **섹션 감싸개**의 규칙이고 그대로 둔다 —
   히어로는 배경이 꽉 찬 섹션이라 같은 12px 이라도 글이 화면에 붙어 보인다. 글 상자 **안쪽**에만
   더해 총 24px 로 띄운다(감싸개는 12 그대로라 「모든 블록 같은 여백」 검사에 안 걸린다). */
/* ★「더한다」가 아니라 「최종 값을 못 박는다」 (2026-09-13 fc 실측) — 처음엔 `padding:12px` 를
   **더했는데**, 감싸개가 이미 24 인 계열은 12 가 더해져 **36px** 이 됐다(5번). 계열마다 감싸개
   값이 달라 「더하기」는 값을 못 정한다. 그래서 **글 상자의 왼쪽 끝을 화면에서 24px** 로 못 박는다
   — 감싸개가 12 면 12 를 더하고, 24 면 0 을 더하는 셈이다.
   ★잴 때는 **글자 left(Range)** 로 잰다 — 상자는 24 인데 글자가 36 인 경우를 못 본다. */
@media(max-width:768px){
  [class*="hero"] [class*="-tx"],[class*="hero"] [class*="-content"],
  [class*="hero"] [class*="-copy"],[class*="hero"] [class*="-body"]{
    padding-left:max(0px, 24px - var(--ds-gutter)) !important;
    padding-right:max(0px, 24px - var(--ds-gutter)) !important;
    box-sizing:border-box}
}

/* ★STEP배지-아이콘-간격-0913 */
/* STEP 배지(검정 알약)와 아이콘(노란 원)이 딱 붙어 아이콘이 배지에 올라탄 것처럼 보였다
   (2026-09-13 사장님 「step박스와 아이콘 간격을 모바일에서 좀 더 넓히기」 → 「PC도 그렇긴 하네」).
   `.ds-ico` 는 계열을 가리지 않는 킷 공통 클래스라 한 곳에서 잡힌다. 두 조각이 한 줄에 설 때만
   띄운다 — 세로로 쌓인 계열은 건드리지 않는다. */
[class*="step"] [class*="no"] + .ds-ico,
[class*="step"] .no + [class*="ico"],
[class*="steps"] li > span + .ds-ico{margin-left:12px !important}
@media(max-width:768px){
  [class*="step"] [class*="no"] + .ds-ico,
  [class*="step"] .no + [class*="ico"],
  [class*="steps"] li > span + .ds-ico{margin-left:14px !important}
}

/* ★30초요약-모바일-줄바꿈-0913 */
/* 모바일에서 「누가 — 설명」이 한 줄로 흘러 설명 둘째 줄이 제목 아래로 파고들었다.
   제목을 한 줄, 설명을 다음 줄로 내린다 (2026-09-13 사장님 「누가 / - 설명 / 무엇 / - 설명 …」).
   PC 는 지금 꼴이 좋아 그대로 둔다. */
/* ★`!important` 는 꼭 있어야 한다 (2026-09-13 fc 실측) — 계열 CSS(`.dsn-sum li strong`)가
   킷(`[class*="sum"] li strong`)과 **같은 무게**라 뒤에 오는 쪽이 이긴다. 5번이 그래서
   390 에서 「누가 — 내당·비산…」이 붙어 있었다. 확인은 **줄 글자로** 센다 — 상자 top 으로
   재면 거짓 통과가 난다. */
@media(max-width:768px){
  [class*="sum"] li strong,[class*="sum"] li b,[class*="summary"] li strong{
    display:block !important;margin-bottom:2px}
  [class*="sum"] li,[class*="summary"] li{display:block !important}
}

/* ★헤더-방문링크-색-0913 — 사장님 「헤더섹션의 버튼을 클릭하면 어두운색으로 바뀌어서 안 보여」(2번 8942/dalseonggun).
   원인: 사이트 기본 CSS 의 `a:visited(color:inherit)` 가 (0,1,1)이라 킷 `.header-gnblink(color:var(--ds-header-fg))` (0,1,0)을
   이긴다 — **한 번 누른(방문한) 메뉴만** 부모 글자색(검정)을 물려받아 어두운 헤더에 묻힌다. 누르기 전엔 멀쩡해 검수에서 샜다.
   CF10 1·2·3·5·6·7·9·10 + 닷홈 셋의 site.src.css 에 같은 줄이 있다. 헤더·전체메뉴·드롭다운 링크는 방문 여부와 무관하게 같은 색. */
.header-gnblink:visited,.header-gnblink:focus,.header-gnblink:active,
.fullmenu-gnblink:visited,.fullmenu-gnblink:focus,.fullmenu-gnblink:active,
.fullmenu-gnblist .kk-sub li a:visited{color:var(--ds-header-fg) !important}
.dropdown-menu li a:visited{color:var(--ds-header-fg) !important}
.dropdown-menu li a[aria-current="page"],.dropdown-menu li a:hover{color:var(--ds-primary) !important}
.header-gnbitem:hover > .header-gnblink,.header-gnbitem:focus-within > .header-gnblink{color:var(--ds-primary) !important}

/* ★푸터-한줄-0913 — 푸터를 연락처 · 운영 시간 · 안내 링크 한 줄 + 맨 아래(저작권 · 정책 링크) 한 줄로 (사장님 「난잡하다 · 꼭 저렇게 다 필요한가」).
   옛 마크업이 남은 쪽도 같은 모양이 되게 옛 칸(AREA · 소개 · 확인해 두면 좋은 점)은 숨긴다 — 새 킷으로 다시 지으면 마크업에서도 빠진다. */
.footer .footer-content > .footer-section:not(.footer-section-links){display:none !important}
.footer .footer-top{display:none !important}
.footer .footer-cs .footer-hub-links{gap:6px}
.footer .footer-cs .footer-hub-links a{font-size:13.5px}
.footer .footer-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px 24px}
.footer .footer-bottom .footer-links{display:flex;gap:16px;margin:0}
.footer .footer-bottom .footer-links a{color:#8a90a0;font-size:12.5px;text-decoration:none}
@media(max-width:768px){.footer .footer-cs{grid-template-columns:1fr !important;gap:18px}.footer .footer-bottom{flex-direction:column;align-items:flex-start}}

/* ★교대색-진하게-0913 — 사장님 「섹션별로 색감 구분은 있어야 할 것 같고 · 모든 템플릿 공통사항」.
   옛 연노랑 #FFF9DB 는 흰색과 밝기 차 2.32 라 「교대를 넣은 자리도 눈에는 같은 색」이었다(eb 실측 42쪽에서 「옅게만 다름」 182건).
   #FFF3C4 는 차 4.27 — 눈에 보이면서 카카오 노랑의 결은 지킨다.
   (정정 밤) 빌드는 킷 다음에 사이트 CSS 를 붙이므로 「뒤에서 덮는다」는 틀렸다 — 사이트에 옛 :root 값이 남으면 그쪽이 이긴다(2f 실측 7·8번).
   그래서 순서가 아니라 무게로 이긴다: html:root 는 :root 보다 한 칸 무겁다. */
html:root{--ds-alt:#FFF3C4}

/* ★하위쪽-CTA·법정고지-폭-0913 — **걷었다(2026-09-13 저녁)**. `body:has([class$="-doc"])` 로 하위 쪽을 가르려 했으나
   index 에도 `*-doc` 감싸개가 있는 계열(9번 `sg-seo-doc` · 6번 `slb-doc-home`)에서 index CTA 까지 720 으로 줄었다(2f 실측).
   킷은 CTA·법정고지를 `--ds-content` 로 두고, **하위 쪽 축소는 사이트 CSS**(그 계열의 하위 표시자)에서 한다. */

/* ★CTA↔법정고지-빈틈-0913 — 둘 사이가 338~397px 로 벌어져 있었다(42쪽 전부). CTA 아래 덧padding 을 걷고 법정고지 위를 줄인다. */
.cta-section{padding-bottom:var(--ds-sec-y-pc) !important}
.il-legal{padding-top:40px}
@media(max-width:768px){.cta-section{padding-bottom:var(--ds-sec-y-mo) !important}.il-legal{padding-top:28px}}

/* ★아이콘-원안-가운데-0913 — 사장님 「섹션 보면 아이콘이 원형 중앙에 위치하지 않는데」(7번 CHECKLIST·HOW IT WORKS·GUIDE).
   `.ds-ico` 는 inline-flex 로 가운데 정렬인데, 안의 `<svg>` 가 inline 이라 글꼴 baseline 만큼 아래·왼쪽으로 밀린다. svg 를 block 으로 놓고 줄높이를 0 으로. */
.ds-ico,[class*="-ico"]:not([class*="float"]){line-height:0}
.ds-ico > svg,[class*="-ico"]:not([class*="float"]) > svg{display:block;margin:0}

/* ★CTA-이미지버튼-가로-0913 — PC 에서 전화·문자 이미지 버튼이 아래위로 쌓였다(7번). 버튼 고정 380px 가 좁아진 CTA 폭(하위 720)에서 줄바꿈된 탓.
   PC 는 한 줄(두 칸), 모바일은 지금처럼 세로. */
@media(min-width:769px){
  .ctaimg-btns{flex-wrap:nowrap}
  .ctaimg-btns img{width:min(380px, calc(50vw - 40px));max-width:100%}
}

/* ★아이콘-원안-가운데-2차-0913 — 1차(svg block)로도 8번 WHO 카드 아이콘이 원 밖으로 나갔다.
   원인은 따로 있었다: 계열 CSS 의 `.sjk-card span(display:block)`(0,1,1)이 `.ds-ico(display:inline-flex)`(0,1,0)를 이겨
   **원 상자가 flex 가 아니게** 되어 가운데 정렬이 통째로 꺼졌다. 카드·타일·단계 상자 안의 아이콘은 제 줄에 서므로
   flex(블록)로 되돌리고 가운데 정렬을 못 박는다 — margin:0 auto 는 블록이어야 먹는다. */
:is([class*="card"],[class*="tile"],[class*="step"],[class*="-item"],[class*="-box"]) > .ds-ico,
:is([class*="card"],[class*="tile"],[class*="step"],[class*="-item"],[class*="-box"]) > span.ds-ico{
  display:flex !important;align-items:center !important;justify-content:center !important}
.ds-ico{align-items:center;justify-content:center}

/* ★하위쪽-머리·꼬리-index와-같게-0913 — 사장님(8번 8948): 「index 는 멀쩡하게 해 놨네」 · 법정고지는 「푸터 CONTACT 의 좌측 라인에」 ·
   하위쪽 CTA 그림 버튼이 PC 에서 위아래로 쌓임 · 「푸터·헤더·CTA 는 하위페이지들도 다 공통으로」.
   오후에 사이트마다 넣은 `body.sub …(width:var(--ds-doc))`(720) 가 원인 — 하위쪽 CTA·법정고지를 index 와 같은 폭으로 되돌린다.
   사이트 규칙이 (0,3,1)·!important 라 html:root body 로 한 칸 더 무겁게. 본문 글 상자(-doc)는 그대로 720. */
html:root body .il-legal .il-legal-in,
html:root body .il-legal-in{width:min(var(--ds-content), 100% - var(--ds-gutter)*2) !important;max-width:none !important;margin-inline:auto !important}
html:root body .cta-section .cta-container{width:min(var(--ds-content), 100% - var(--ds-gutter)*2) !important;max-width:none !important;margin-inline:auto !important}


/* ============================================================
   CTA — 중간/하단(§B "이미지형": 좌 문안·버튼 / 우 1:1 이미지)
   cta.html 은 바이트 그대로(문구·라벨·href 고정) — 배포 관문 canon_gate 대조 대상.
   라벨 3종: PC「010-2252-8599 →」· 모바일「전화 상담하기 →」「문자 상담하기 →」
   (각각 별도 <a> — 한 버튼 안에 두 span 을 넣지 않는다. CTA_A 라벨 추출기가
   버튼 하나의 텍스트를 통째로 읽어서, span 토글을 쓰면 두 라벨이 섞여 버린다)
   ============================================================ */
/* ── 중간 CTA (2026-09-12 사장님 「저런 형태는 보기 불편해 · 배경색을 깔고 텍스트 + 버튼으로만」)
   하단 CTA(.cta-section)는 카카오옐로우 이미지형 그대로 두고, 본문 사이에 넣는 중간 CTA 만
   이미지 없이 **배경 띠 + 글 + 버튼**으로 낸다. 부품 파일은 cta_mid.html.
   ★두 CTA 가 연달아 서지 않는다(중간은 본문 섹션 사이 · 하단은 푸터 위 하나). */
.cta-mid{padding:var(--ds-sec-y-pc) 0;margin-top:0;background:var(--ds-ink)}
.cta-mid-in{width:min(var(--ds-content), 100% - var(--ds-gutter)*2);margin-inline:auto;box-sizing:border-box;text-align:center}
.cta-mid-title{font-size:32px;font-weight:800;margin:0 0 12px;color:#fff;text-align:center;word-break:keep-all}
.cta-mid-desc{font-size:16px;margin:0;color:#D8D8D8;text-align:center;word-break:keep-all}
.cta-mid .il-cta-btns{margin-top:26px}
/* 중간 CTA·히어로가 쓰는 알약 버튼(하단 CTA 는 이제 이미지 버튼이라 안 쓴다) */
.il-cta-btns{display:flex;gap:14px;justify-content:center;align-items:center;flex-wrap:wrap;margin-top:26px}
.il-cta-btn{display:inline-flex;align-items:center;justify-content:center;min-width:240px;height:56px;padding:0 28px;border-radius:999px;background:var(--ds-primary);color:var(--ds-ink);font-weight:800;font-size:16px;text-decoration:none;box-sizing:border-box}
a.il-cta-btn-mo[href^="sms:"]{background:var(--ds-white);border:2px solid var(--ds-primary)}
.il-cta-btn-mo{display:none}
@media(max-width:768px){
  .cta-mid{padding:var(--ds-sec-y-mo) 0}
  .cta-mid-title{font-size:24px}
  .il-cta-btn-pc{display:none}
  .il-cta-btn-mo{display:inline-flex}}
/* ★히어로-캡션-숨김 0912 */
/* 히어로 사진의 캡션은 **화면에서 감춘다** (2026-09-12 사장님 「알트텍스트가 삐져나온 것
   같은데, 그러니까 상하 밸런스가 안 맞아 · 다른 페이지도 같은 문제 있을 수 있음」).
   히어로는 왼쪽 글 상자와 오른쪽 사진이 **같은 정사각**이라야 하는데, 사진 밑에 캡션이
   한 줄(실측 23~31px) 붙으면 오른쪽만 길어져 좌우 중심이 어긋난다(하위 27쪽 580x611).
   마크업은 그대로 둔다 — 검색·화면낭독기에는 남는다. 본문 섹션 사진 캡션은 그대로. */
.sgw-hero-card figcaption,.sgw-hero figcaption,.il-hero figcaption,
.sgw-rep.sgw-hero-card figcaption{
  position:absolute !important;width:1px !important;height:1px !important;margin:-1px !important;
  padding:0 !important;overflow:hidden !important;clip-path:inset(50%) !important;
  white-space:nowrap !important;border:0 !important}
.sgw-hero-in,.sgw-hero-inner{align-items:center}
/* 히어로 체크 3줄 — 390 에서 한 줄(줄당 공백 포함 ≤20자) · 줄바꿈 나면 문안을 줄인다 */
.sgw-hero li{white-space:normal}
.mo-br{display:none}
.sgw-hero{position:relative;background:var(--ds-off);
  border-bottom:3px solid var(--ds-primary);padding:var(--sgw-hero-y) var(--ds-gutter)}
.sgw-hero-in{max-width:var(--ds-content);margin:0 auto;width:100%;
  display:flex;align-items:center;justify-content:space-between;gap:var(--sgw-hero-gap)}
/* 두 박스는 같은 폭을 나눠 갖고(1 1 0) aspect-ratio 로 정사각이 된다 — 창이 좁아져도 비율 1.000 */
.sgw-hero-tx{flex:1 1 0;min-width:0;max-width:var(--sgw-hero-sq);aspect-ratio:1/1;box-sizing:border-box;
  display:flex;flex-direction:column;justify-content:center;align-items:flex-start;
  padding:clamp(22px,3vw,40px);border-radius:var(--ds-radius);
  background:#fff;border:1px solid var(--ds-line);box-shadow:0 12px 30px rgba(0,0,0,.06)}
.sgw-eyebrow{display:inline-block;font-size:13px;font-weight:800;letter-spacing:.18em;
  text-transform:uppercase;background:var(--ds-primary);color:var(--ds-ink);
  padding:6px 12px;border-radius:999px;margin-bottom:clamp(10px,1.4vw,18px)}
.sgw-hero h1{font-size:clamp(25px,2.35vw,38px);line-height:1.34;margin:0 0 clamp(12px,1.6vw,20px);
  font-weight:800;text-wrap:initial;color:var(--ds-ink)}
.sgw-hero ul{margin:0 0 clamp(14px,2vw,26px);display:grid;gap:clamp(5px,.7vw,8px);max-width:34em}
.sgw-hero li{font-size:clamp(14px,1.15vw,17px);line-height:1.65;padding-left:24px;position:relative;
  color:var(--ds-ink2)}
.sgw-hero li::before{content:"✔";position:absolute;left:0;color:var(--ds-ink);font-weight:800}
.sgw-hero .il-cta-btns{margin-top:2px;justify-content:flex-start}
/* index = 인물 정사각 컷 · 하위 = 그 쪽 대표 카드. 둘 다 같은 정사각 상자를 쓴다 */
.sgw-hero-flat{background:linear-gradient(180deg,#FFF6B8 0%,var(--ds-off) 100%)}
.sgw-hero-card{flex:1 1 0;min-width:0;max-width:var(--sgw-hero-sq);margin:0}
.sgw-hero-card img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;
  border-radius:var(--ds-radius);box-shadow:0 18px 40px rgba(0,0,0,.12);background:#fff}
.sgw-hero-card figcaption{font-size:13px;color:var(--ds-grey);margin-top:8px;text-align:center}
.sgw-way .il-cta-btns{margin-top:auto}
.sgw-way .il-cta-btn{min-width:0;width:100%}
@media (max-width:900px){
  /* ★모바일(<900) = 세로로 쌓는다 — 글 위 · 정사각 이미지 아래(이 계열의 흐름 그대로).
     글상자는 더 이상 정사각이 아니고(내용만큼), 이미지는 가로 100% 정사각. 좌우 여백 = --ds-gutter 20px. */
  .sgw-hero-in{flex-direction:column;align-items:stretch;gap:22px}
  .sgw-hero-tx{flex:0 0 auto;max-width:none;aspect-ratio:auto;padding:24px 20px}
  .sgw-hero-card{flex:0 0 auto;max-width:none;width:100%;margin:0}
  .sgw-hero{padding-top:32px;padding-bottom:36px}
  .sgw-hero h1{font-size:26px}
  .sgw-hero li{font-size:15.5px}
  .sgw-hero .il-cta-btns{width:100%}
  .sgw-hero .il-cta-btn{width:100%}
  .mo-br{display:block}}
@media (max-width:560px){
  .sgw-hero h1{font-size:24px}}
/* ★히어로-캡션-숨김 0912 */
/* 히어로 사진의 캡션은 **화면에서 감춘다** (2026-09-12 사장님 「알트텍스트가 삐져나온 것
   같은데, 그러니까 상하 밸런스가 안 맞아 · 다른 페이지도 같은 문제 있을 수 있음」).
   히어로는 왼쪽 글 상자와 오른쪽 사진이 **같은 정사각**이라야 하는데, 사진 밑에 캡션이
   한 줄(실측 23~31px) 붙으면 오른쪽만 길어져 좌우 중심이 어긋난다(하위 27쪽 580x611).
   마크업은 그대로 둔다 — 검색·화면낭독기에는 남는다. 본문 섹션 사진 캡션은 그대로. */
.sgw-hero-card figcaption,.sgw-hero figcaption,.il-hero figcaption,
.sgw-rep.sgw-hero-card figcaption{
  position:absolute !important;width:1px !important;height:1px !important;margin:-1px !important;
  padding:0 !important;overflow:hidden !important;clip-path:inset(50%) !important;
  white-space:nowrap !important;border:0 !important}
.sgw-hero-in,.sgw-hero-inner{align-items:center}
/* 히어로 체크 3줄 — 390 에서 한 줄(줄당 공백 포함 ≤20자) · 줄바꿈 나면 문안을 줄인다 */
.sgw-hero li{white-space:normal}


/* ===== 이 사이트(아임웹 복제본) 덮어쓰기 — kit_retrofit.py 가 만든다. 킷 규칙은 위 tokens/chrome 이 정본 ===== */
body{font-family:var(--ds-font)!important;color:var(--ds-ink)}
#doz_header_wrap,#mobile_slide_menu_wrap,.il-menu-cta{display:none!important}
/* 헤더·푸터 글자색 — page.css 의 a 색이 이긴다 */
.il-site-header a.header-gnblink,.il-site-header .header-gnblink span,.il-site-header .dropdown-menu li a,.fullmenu-gnblist a{color:var(--ds-header-fg)!important}
.il-site-header a.btn-header-cta{color:var(--ds-ink)!important;background:var(--ds-primary)!important}
.il-site-header .logo-text{color:var(--ds-primary)!important}
footer.footer a,footer.footer p,footer.footer b,footer.footer address{color:var(--ds-legal-fg)!important}
footer.footer .footer-cs b{color:var(--ds-primary)!important}
/* 아임웹 그라데이션 글자·그림자 잔재 */
:is(.ds-band-w,.ds-band-y) *{-webkit-text-fill-color:currentColor!important;-webkit-text-stroke:0!important;text-shadow:none!important}
.viz-clock-center{width:auto!important;min-width:64px}
/* 본문 띠 — 흰/연노랑 교대 · 배경사진·어두운 배경 제거 · 글자는 먹색 */
.ds-band-w{background:#fff!important}.ds-band-y{background:#FFF9DB!important}
.ds-band-w .section_bg,.ds-band-y .section_bg,.ds-band-w .section_bg_color,.ds-band-y .section_bg_color{display:none!important}
.ds-band-w,.ds-band-y{padding:var(--ds-sec-y-pc) 0!important;margin:0!important;position:relative}
.ds-band-w .widget.padding,.ds-band-y .widget.padding{display:none!important}
:is(.ds-band-w,.ds-band-y) :where(h1,h2,h3,h4,h5,h6,p,li,dt,dd,td,th,blockquote,figcaption,label,strong,em,b,small,span,div):not(.il-cta-btn):not(.il-cta-btns *):not(.dgcr-cap):not([class*="btn"]):not(.cta-mid *):not(.viz-clock-center *):not(.cs9-phone *):not(.viz-card-mini.b):not(.viz-card-mini.b *):not(.il-legal):not(.il-legal-tbl *):not(.il-sib-wrap *){color:var(--ds-ink)!important}
:is(.ds-band-w,.ds-band-y) :where(p,li,dd,small,.why-pro-card-sub,.dgfaq-sub,.dgproc-sub,.cs9-desc){color:var(--ds-ink2)!important}
:is(.ds-band-w,.ds-band-y) :where(.p3,.sub,.desc,.dgfaq-sub,.why-pro-subtitle,[class*="subtitle"],[class*="-sub"]){color:var(--ds-grey)!important}
:is(.ds-band-w,.ds-band-y) :where(h2){font-size:38px!important;line-height:1.3!important;text-align:center!important;font-weight:800!important}
:is(.ds-band-w,.ds-band-y) :where(.why-pro-card,.dgsvc-card,.dgproc-card,.dgn-card,.card,[class*="-card"]){background:#fff!important;border:1px solid var(--ds-line)!important;box-shadow:none!important}
:is(.ds-band-w,.ds-band-y) :where(a):not(.il-cta-btn):not(.dgcr-c){color:var(--ds-ink)!important}
/* 폭 1200 하나 (하위 720) — 계산식 하나 */
.ds-band-w>main>.inside,.ds-band-y>main>.inside,.ds-band-w .inside,.ds-band-y .inside,.why-pro-container,.cs9-inner,.dgsvc-inner,.dgproc-inner,.dgfaq-inner,.dgn-inner,#dgnew>div,.il-inner,.dgcr-row-wrap,.dgcr .dgcr-title,.il-sib{width:min(var(--ds-content),100% - var(--ds-gutter)*2)!important;max-width:none!important;margin-inline:auto!important;padding-inline:0!important;box-sizing:border-box}
body.sub .why-pro-container,body.sub .cs9-inner,body.sub .dgsvc-inner,body.sub .dgproc-inner,body.sub .dgfaq-inner,body.sub .dgn-inner,body.sub #dgnew>div,body.sub .il-inner,body.sub .ds-band-w>main>.inside,body.sub .ds-band-y>main>.inside,body.sub .ds-band-w .inside,body.sub .ds-band-y .inside{width:min(var(--ds-doc),100%)!important}
/* ★감싸개가 여러 겹이라 gutter 가 겹쳐 쌓여 720 이 612 로 눌렸다 —
   여백은 바깥 감싸개(section>main)에서 한 번만 준다. */
/* 아임웹 행(doz_row 음수 여백)·안쪽 상자들이 컨테이너보다 넓어지지 않게 */
:is(.ds-band-w,.ds-band-y) .doz_row{margin-inline:0!important;width:100%!important}
:is(.ds-band-w,.ds-band-y) :is(.col-dz,.cs9-layout,.dgn-head,.dgn-grid,.why-pro-grid,.dgproc-grid,.dgfaq-list,.cs9-inner,.dgn-in){width:100%!important;max-width:none!important;padding-inline:0!important;margin-inline:0!important;box-sizing:border-box}
.il-article img{width:100%!important;height:auto;margin:32px 0 16px!important;border-radius:var(--ds-radius)}
/* 카드 케러셀(히어로 아래) */
.dgcr{background:var(--ds-off)!important;padding:var(--ds-sec-y-pc) 0!important;--dgcr-pt:0!important;--dgcr-pt-mo:0!important}
.dgcr .dgcr-title{font-size:26px!important;font-weight:800!important;color:var(--ds-ink)!important;text-align:center!important;padding:0 0 22px!important}
.dgcr-row{width:min(var(--ds-content),100% - var(--ds-gutter)*2);margin-inline:auto}
.dgcr-cap{color:var(--ds-ink)!important}
/* FAQ details */
.dgfaq-list{display:grid;gap:12px}
details.il-faq-item{background:#fff}
details.il-faq-item summary.dgfaq-q{display:block;width:100%;padding:18px 22px;font-size:17px;font-weight:700;color:var(--ds-ink)!important;background:#fff;border:0;text-align:left;position:relative;padding-right:44px}
details.il-faq-item summary.dgfaq-q::after{content:"+";position:absolute;right:20px;top:50%;transform:translateY(-50%);font-size:22px;font-weight:400;color:var(--ds-grey)}
details.il-faq-item[open] summary.dgfaq-q::after{content:"–"}
details.il-faq-item .dgfaq-a{display:block!important;max-height:none!important;opacity:1!important;padding:0 22px 20px}
details.il-faq-item .dgfaq-a p{margin:0;line-height:1.85;color:var(--ds-ink2)!important}
details.il-faq-item .dgfaq-a p+p{margin-top:1em}
/* 문단 간격 p+p 1em (사장님 규칙) */
:is(.ds-band-w,.ds-band-y) p+p{margin-top:1em!important}

/* ── 9-23 검사 어긋남 보정 (CSS 만 · 문안·메뉴·타이틀·메타는 건드리지 않는다) ── */
/* (1) 본문 카드 사진이 1.60 비율 → 1:1 (히어로는 제외) */
.dgn-ph,.dgn-card .dgn-ph,:is(.ds-band-w,.ds-band-y) .dgn-card img{aspect-ratio:1/1!important;object-fit:cover!important;width:100%!important;height:auto!important}
/* (2) 서브타이틀 두 줄이 3자씩 벌어진다 → 줄을 고르게 (사장님 400px 규칙) */
.cta-desc,.why-pro-subtitle,.dgfaq-sub,.dgproc-sub,.cs9-desc,[class*="-subtitle"]{text-wrap:balance!important;word-break:keep-all!important}
/* (3) h1 두 줄 균형 */
:is(.ds-band-w,.ds-band-y) h1,.il-hero h1,.hero h1{text-wrap:balance!important;word-break:keep-all!important}
/* (4) 푸터 CONTACT 의 전화 링크(16px)가 「모바일 버튼」으로 세어진다 →
       버튼이 아니라 글 링크임을 분명히 한다 */
footer a[href^="tel:"],.footer a[href^="tel:"],#footer a[href^="tel:"]{display:inline!important;padding:0!important;border:0!important;border-radius:0!important;background:none!important;min-height:0!important;line-height:inherit!important}
/* (4-b) 아임웹 원본 텍스트 위젯에 남은 전화 버튼 —
       안에 .dgc-pc / .dgc-mo 두 벌이 들어 있는데 분기 CSS 가 없어져 **같은 번호가 두 번** 보인다.
       바로 옆에 킷 CTA 버튼이 이미 있어 중복이므로 감춘다(문안·메뉴는 건드리지 않는다). */
a[href^="tel:"]:has(.dgc-pc):not(.il-cta-btn){display:none!important}
.dgc-mo{display:none}
@media(max-width:767px){.dgc-pc{display:none}.dgc-mo{display:inline}}
/* (6) ★어두운 배경 위 글자까지 먹색으로 덮여 글씨가 사라졌다 (9-23 실측 12건)
       위쪽 ink 강제 규칙이 .cs9-* 폰 목업·캔버스와 viz 카드의 흰 글씨를 지웠다.
       그 자리는 배경이 어두우니 밝은 글자가 맞다 — 되돌린다. */
:is(.ds-band-w,.ds-band-y) :is(.cs9-phone,.cs9-canvas,.cs9-statusbar,.cs9-live,.viz-cards-stack) *,
:is(.ds-band-w,.ds-band-y) :is(.cs9-node,.viz-card-mini,.cs9-live-text,.cs9-statusbar .lbl){color:#eef3f0!important}
/* 반대로 연노랑 배경 위 흰 글자는 먹색으로 */
:is(.ds-band-w,.ds-band-y) .cs9-btn-hub{color:var(--ds-ink)!important}
/* 헤더 CTA 는 네이비 배경 위라 흰 글자 */
.il-site-header .btn-header-cta,.header-right .btn-header-cta{color:#fff!important}
/* (7) 남은 대비 세 자리 (9-23 실측)
       · .viz-card-mini 는 카드마다 배경이 다르다 — .b 만 어둡다. 흰 카드(.a/.c)는 먹색으로 되돌린다
       · p.il-legal 은 네이비 띠 위라 밝은 글자가 맞다
       · 「혹시 이런 생각…」 은 il-custom.css 가 !important 로 연민트를 박아 흰 배경에서 안 보인다 */
:is(.ds-band-w,.ds-band-y) :is(.viz-card-mini.a,.viz-card-mini.c),
:is(.ds-band-w,.ds-band-y) :is(.viz-card-mini.a,.viz-card-mini.c) *{color:var(--ds-ink)!important}
:is(.ds-band-w,.ds-band-y) .viz-card-mini.b,
:is(.ds-band-w,.ds-band-y) .viz-card-mini.b *{color:#eef3f0!important}
html body :is(.ds-band-w,.ds-band-y) p.il-legal,
html body :is(.ds-band-w,.ds-band-y) p.il-legal *{color:var(--ds-legal-fg)!important}
html body :is(.ds-band-w,.ds-band-y) p strong span,
html body :is(.ds-band-w,.ds-band-y) p span strong span,
html body :is(.ds-band-w,.ds-band-y) p span span{color:var(--ds-ink)!important}
/* (8) 「혹시 이런 생각…」 — il-custom.css 가 **ID 선택자 + !important** 로 연민트를 박았다.
       원래 어두운 배경 전제였는데 킷이 배경을 흰색으로 바꿔 글씨가 사라졌다. 같은 무게로 덮는다. */
html body :is(#s20230322f57b316b0b5bc,#s2023032244b4c1cb8c715) .fr-view,
html body :is(#s20230322f57b316b0b5bc,#s2023032244b4c1cb8c715) .fr-view *{color:var(--ds-ink)!important;text-shadow:none!important}
/* (9) 다크 모드에서 배경이 #1c1c1c 로 뒤집혀 먹색 글자가 사라진다.
       이 킷은 밝은 화면 기준이라 다크에서도 밝은 화면을 유지한다. */
@media (prefers-color-scheme:dark){
  /* ★배경 강제는 본문 띠에만. 푸터·법정고지(네이비)까지 흰색으로 덮으면
     거기 흰 글씨가 통째로 사라진다(9-23 실측 54건). */
  html body .ds-band-w{background:#fff!important}
  html body .ds-band-y{background:#FFF9DB!important}
  html body :is(.ds-band-w,.ds-band-y) :is(.card,.box,details,[class*="-card"]){background:#fff!important}
  /* 본문 섹션 중 띠가 아닌 것도 다크에서 #1c1c1c 로 뒤집힌다 —
     푸터·법정고지·형제띠·중간CTA 는 원래 어두운 자리라 건드리지 않는다. */
  html body section:not(.cta-mid):not(.il-sib-wrap):not([class*="legal"]):not(footer):not(.footer),
  html body article:not([class*="legal"]){background:#fff!important}
  html body :is(.ds-band-w,.ds-band-y) :where(h1,h2,h3,h4,h5,p,li,dt,dd,td,th,span,div):not(.cs9-phone *):not(.viz-card-mini.b):not(.viz-card-mini.b *):not(.il-legal):not(.il-sib-wrap *){color:var(--ds-ink)!important}
}
/* (5) 섹션 안 main 이 전폭이라 「섹션 폭 = 뷰포트」로 잡힌다 */
/* (12) ★아임웹이 1024 이하에서 body{zoom:.85} 로 페이지를 통째로 줄인다.
       그래서 720 폭 본문이 612 로 보이고 섹션 폭이 두 종류로 갈린다(9-23 실측).
       킷은 min(1200, 100%-여백) 으로 이미 유연하니 이 축소는 해가 된다. */
html body{zoom:1!important}
/* 법정고지 문단 간격이 13px 로 1px 모자란다 — 규칙은 1em(14px 이상) */
p.il-legal+p.il-legal,.il-inner p+p.il-legal{margin-top:1em!important}
/* (10) 모바일 플로팅 — 킷은 「전화문의 / 010-2252-8599 →」 두 줄이 보여야 하는데
       .fm2-tx 가 display:none 이라 아이콘만 남았다(사장님 「플로팅 이상」). */
@media (max-width:767px){
  .fm2-float .fm2-tx{display:block!important;white-space:normal!important;width:auto!important}
}
/* (11) cs9 버튼이 1px 넘쳐 가로 스크롤을 만든다 */
.cs9-btn,.cs9-btn-hub,.cs9-grid,.cs9-canvas{max-width:100%!important;box-sizing:border-box!important}
/* ★그리드 아이템은 min-width:auto 라 내용이 길면 부모를 넘는다 — 0 으로 풀어야 넘침이 멎는다 */
.cs9-grid,.cs9-layout,.cs9-content{min-width:0!important}
.cs9-grid>*{min-width:0!important;max-width:100%!important}
.cs9-btn,.cs9-btn-hub{width:100%!important}
/* 고정 110px×3 격자가 좁은 화면에서 넘친다 — 화면에 맞게 나눈다.
   .cs9-active 의 확대(transform)도 1px 넘침을 만든다. */
@media (max-width:767px){.cs9-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}}
.cs9-btn.cs9-active,.cs9-btn-hub.cs9-active{transform:none!important;outline-offset:-2px!important}
/* 좁은 화면(1100·1024)에서 히어로와 cs9 만 여백이 달라 섹션 폭이 2종이 된다 — 계산을 하나로 */
.sgw-hero-in,.cs9-container{width:min(var(--ds-content),100% - var(--ds-gutter)*2)!important;margin-inline:auto!important;box-sizing:border-box}
/* .dgn-merit / .dgn-promise / .dgn-step-sec 는 띠 밖이라 .dgn-in 이 전폭(1366)으로 남는다 */
.dgn-merit>.dgn-in,.dgn-promise>.dgn-in,.dgn-step-sec>.dgn-in,section>.dgn-in{width:min(var(--ds-content),100% - var(--ds-gutter)*2)!important;margin-inline:auto!important;box-sizing:border-box}
section>main,.ds-band-w>main,.ds-band-y>main{width:min(var(--ds-content),100% - var(--ds-gutter)*2)!important;margin-inline:auto!important;box-sizing:border-box}
body.sub :is(.ds-band-w,.ds-band-y)>main{width:min(var(--ds-doc),100%)!important}

/* 하단 CTA 이미지 버튼은 킷 chrome.css · 플로팅 fm2-float 도 chrome.css */
/* 형제 띠 */
.il-sib-wrap{background:var(--ds-legal-bg)!important;color:var(--ds-legal-fg)}
.il-sib-wrap *{color:var(--ds-legal-fg)!important}
.il-sib-wrap a{border:1px solid #2a3350!important;border-radius:999px;padding:6px 12px;display:inline-block;margin:4px}
/* 히어로 h1 은 3줄 그대로 · 모바일 */
@media(max-width:768px){
  :is(.ds-band-w,.ds-band-y){padding:var(--ds-sec-y-mo) 0!important}
  :is(.ds-band-w,.ds-band-y) :where(h2){font-size:26px!important}
  .dgcr{padding:var(--ds-sec-y-mo) 0!important}
  .dgcr .dgcr-title{font-size:22px!important}
  details.il-faq-item summary.dgfaq-q{font-size:15.5px;padding:16px 40px 16px 16px}
}