/* ============================================================
tokens.css — 카카오옐로우 디자인 시스템 정본 v2 · A항 토큰
D:\수한 에이전트\일수 홈페이지 배포\대구일수업체\닷홈\디자인시스템_정본_v2.md §A
전 사이트 :root 에 그대로 붙여 쓴다. 값을 사이트마다 바꾸지 않는다.
============================================================ */
:root{
/* 색 */
--ds-primary:#F5D2DF; /* 카카오 노랑 — 버튼·포인트 전용. 보라 계열 금지 */
--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 실물은 직후 바로 header 뿐이다 */
--ds-header-bg:#421B36;
--ds-header-line:#421B36;
--ds-header-fg:#F2F2F2;
/* 법정고지·형제링크 전용(다크 네이비 박스 — il-legal-fix 고정 배색) */
--ds-legal-bg:#421B36;
--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 — 각 페이지 에 이 두 줄을 넣는다(토큰 파일이 대신 로드하지 않는다) :
*/
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 실물은
직후 바로 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(245,210,223,.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 →」· 모바일「전화 상담하기 →」「문자 상담하기 →」
(각각 별도 — 한 버튼 안에 두 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 */
/* 표 이 모바일에서 폭 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 — 사장님 「섹션별로 색감 구분은 있어야 할 것 같고 · 모든 템플릿 공통사항」.
옛 연노랑 #FCF3F6 는 흰색과 밝기 차 2.32 라 「교대를 넣은 자리도 눈에는 같은 색」이었다(eb 실측 42쪽에서 「옅게만 다름」 182건).
#FCF3F6 는 차 4.27 — 눈에 보이면서 카카오 노랑의 결은 지킨다.
(정정 밤) 빌드는 킷 다음에 사이트 CSS 를 붙이므로 「뒤에서 덮는다」는 틀렸다 — 사이트에 옛 :root 값이 남으면 그쪽이 이긴다(2f 실측 7·8번).
그래서 순서가 아니라 무게로 이긴다: html:root 는 :root 보다 한 칸 무겁다. */
html:root{--ds-alt:#FCF3F6}
/* ★하위쪽-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 로 가운데 정렬인데, 안의 `