/* ============================================================ ★섹션 감싸개는 계산식 하나만 쓴다 (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(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 →」· 모바일「전화 상담하기 →」「문자 상담하기 →」 (각각 별도 — 한 버튼 안에 두 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 — 사장님 「섹션별로 색감 구분은 있어야 할 것 같고 · 모든 템플릿 공통사항」. 옛 연노랑 #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 로 가운데 정렬인데, 안의 `