이라 **한 번도 먹은 적이 없었다** — 맨 글 두 단으로 보였다.
두 단은 격자 칸이라 높이가 같다(stretch). */
.sgw-duo>div,.sgw-duo>article{background:#fff;border:1px solid var(--ds-line);
border-radius:var(--ds-radius);padding:28px 26px}
.sgw-duo h3{font-size:19px;margin:0 0 10px}
.sgw-duo p{font-size:14.5px;line-height:1.75;color:var(--ds-ink2);margin:0}
/* ── 상담 방법 3카드 — 버튼 높이 동일(§22: 세로 flex + margin-top:auto) ── */
.sgw-ways{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.sgw-way{display:flex;flex-direction:column;background:#fff;border:1px solid var(--ds-line);
border-radius:var(--ds-radius);padding:28px 24px 24px}
.sgw-way h3{font-size:18px;margin:14px 0 8px}
.sgw-way p{font-size:14.5px;line-height:1.7;color:var(--ds-ink2);margin:0 0 18px}
.sgw-way .il-cta-btns{margin-top:auto}
.sgw-way .il-cta-btn{min-width:0;width:100%}
/* ── 확인 항목 표 ─────────────────────────────────────────────────────── */
.sgw-tb{width:100%;border-collapse:collapse;margin:0 0 24px;font-size:15px}
.sgw-tb th,.sgw-tb td{border:1px solid var(--ds-line);padding:12px 14px;text-align:left;vertical-align:top;line-height:1.7}
.sgw-tb thead th{background:var(--ds-primary);color:var(--ds-ink);font-weight:800}
.sgw-tb tbody th{background:var(--ds-off);color:var(--ds-ink);font-weight:700;width:30%}
.sgw-tb3 tbody th{width:22%}
/* 핵심 포인트 박스 */
.sgw-point{display:flex;gap:16px;align-items:flex-start;background:#fff;
border:1px solid var(--ds-line);border-radius:var(--ds-radius);padding:18px 20px;margin:0 0 22px}
.sgw-point p{margin:0;font-size:15.5px;line-height:1.7;color:var(--ds-ink)}
.sgw-point .sgw-point-t{display:block;font-size:12px;font-weight:800;letter-spacing:.14em;color:var(--ds-grey);margin-bottom:4px}
/* ── 본문 문서 (하위 · 1단 780) ───────────────────────────────────────── */
/* 내용 폭이 780 이 되게 거터를 더한 값을 max-width 로(모바일은 화면 폭 100%). 이미지 폭 = 문서 폭 한 종류. */
.sgw-doc{max-width:calc(var(--ds-doc) + var(--ds-gutter) * 2);margin:0 auto;padding:56px var(--ds-gutter) 72px}
.sgw-doc figure{margin:14px 0 20px;width:100%}
.sgw-doc figure img{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;object-position:top;
border-radius:var(--ds-radius);display:block}
.sgw-doc h2{margin:64px 0 14px}
.sgw-doc h2:first-of-type{margin-top:36px}
.sgw-doc h3{font-size:20px;margin:28px 0 10px}
.sgw-doc p{font-size:16.5px;line-height:1.85;color:var(--ds-ink2);margin:0 0 18px}
/* ★섹션 머리의 부제는 글 섹션 안에서도 **가운데 상자**다 (2026-09-13 사장님 「가운데 정렬 좀」).
바로 위 `.sgw-doc p` 가 뒤에 있어 `.sgw-head p{margin:12px auto 0}` 의 auto 를 덮었고,
그래서 상자가 왼쪽(left 40)에 붙어 글자가 왼쪽으로 보였다.
`text-align` 은 center 라 **정렬만 재던 검사에는 안 걸렸다** — 상자 위치까지 재야 잡힌다. */
.sgw-doc .sgw-head p{margin:12px auto 0;font-size:16px;line-height:1.75;color:var(--ds-grey)}
.sgw-doc strong{font-weight:800;color:var(--ds-ink)}
.sgw-doc p a{font-weight:800;color:var(--ds-ink);box-shadow:inset 0 -8px 0 var(--ds-primary)}
.sgw-hl{background:linear-gradient(to bottom,transparent 52%,rgba(254,229,0,.62) 52%)}
/* 이동 경로 */
.sgw-crumb{margin:0 0 8px;font-size:13.5px;color:var(--ds-grey)}
.sgw-crumb ol{display:flex;flex-wrap:wrap;gap:4px 6px}
.sgw-crumb li+li::before{content:"›";margin-right:6px;color:var(--ds-grey)}
.sgw-crumb a{color:var(--ds-ink2)}
.sgw-crumb span{color:var(--ds-ink);font-weight:700}
/* 진행 순서 목록(본문 안) */
.sgw-flow{display:grid;gap:12px;margin:0 0 24px;counter-reset:flow}
.sgw-flow li{position:relative;padding:16px 18px 16px 58px;background:var(--ds-off);
border-radius:var(--ds-radius);font-size:15.5px;line-height:1.7}
.sgw-flow li::before{counter-increment:flow;content:counter(flow,decimal-leading-zero);
position:absolute;left:16px;top:14px;width:30px;height:30px;border-radius:50%;
background:var(--ds-primary);color:var(--ds-ink);font-weight:800;font-size:13px;
display:flex;align-items:center;justify-content:center}
.sgw-flow b{display:block;font-size:16px;margin-bottom:2px}
/* 체크리스트 */
.sgw-check{display:grid;gap:10px;margin:0 0 24px}
.sgw-check li{position:relative;padding:12px 16px 12px 44px;border:1px solid var(--ds-line);
border-radius:var(--ds-radius);font-size:15.5px;background:#fff;line-height:1.7}
.sgw-check li::before{content:"✔";position:absolute;left:16px;top:12px;color:var(--ds-ink);
font-weight:800;background:var(--ds-primary);border-radius:50%;width:20px;height:20px;
display:flex;align-items:center;justify-content:center;font-size:12px}
.sgw-check-wide li b{display:block;font-size:16px;margin-bottom:2px}
/* 허브 — 번호 목록(절차) · 문답(직장인) */
.sgw-hubsteps{display:grid;gap:16px;margin:0 0 24px;counter-reset:hub}
.sgw-hubsteps li{position:relative;padding:22px 22px 18px 74px;border:1px solid var(--ds-line);
border-radius:var(--ds-radius);background:#fff}
.sgw-hubsteps li::before{counter-increment:hub;content:counter(hub);position:absolute;left:20px;top:22px;
width:38px;height:38px;border-radius:50%;background:var(--ds-primary);color:var(--ds-ink);
font-weight:800;font-size:17px;display:flex;align-items:center;justify-content:center}
.sgw-hubsteps h3{margin:0 0 8px;font-size:19px}
.sgw-hubsteps p{margin:0 0 8px;font-size:15.5px}
.sgw-hubnote{font-size:14px !important;color:var(--ds-ink) !important;font-weight:700;
background:var(--ds-off);border-radius:8px;padding:8px 12px;display:inline-block}
.sgw-qa{margin:0 0 24px;display:grid;gap:14px}
.sgw-qa dt{font-size:17px;font-weight:800;padding:14px 18px;background:var(--ds-primary);
border-radius:var(--ds-radius) var(--ds-radius) 0 0;margin:0}
.sgw-qa dd{margin:0;padding:14px 18px 18px;border:1px solid var(--ds-line);border-top:0;
border-radius:0 0 var(--ds-radius) var(--ds-radius);font-size:15.5px;line-height:1.8;color:var(--ds-ink2)}
/* 동 카드(구 페이지) · 행정동 칩 · 형제 링크 띠 · 메인 바로가기 */
.sgw-dong-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:0 0 24px}
.sgw-dong-cards a{display:block;padding:14px 16px;border:1px solid var(--ds-line);border-radius:var(--ds-radius);background:#fff}
.sgw-dong-cards a:hover{border-color:var(--ds-ink)}
.sgw-dong-cards b{display:block;font-size:16px;margin-bottom:2px}
.sgw-dong-cards span{display:block;font-size:13px;color:var(--ds-grey)}
.sgw-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 24px}
.sgw-chips li{font-size:14px;padding:6px 12px;border-radius:999px;background:var(--ds-off);border:1px solid var(--ds-line)}
.sgw-gu-strip{margin:8px 0 24px;padding:18px 20px;background:var(--ds-off);border-radius:var(--ds-radius)}
.sgw-gu-strip p{margin:0 0 10px;font-size:13px;font-weight:800;letter-spacing:.08em;color:var(--ds-grey)}
.sgw-gu-strip ul{display:flex;flex-wrap:wrap;gap:8px}
.sgw-gu-strip a{display:inline-block;padding:7px 14px;border-radius:999px;background:#fff;
border:1px solid var(--ds-line);font-size:14px;font-weight:700}
.sgw-gu-strip a:hover,.sgw-gu-strip a.up{background:var(--ds-primary);border-color:var(--ds-primary)}
.il-home{margin:32px 0 20px;text-align:center}
/* ── FAQ (details/summary 배타 아코디언 · name="faq") ────────────────── */
.sgw-faq{background:var(--ds-off);padding:var(--ds-sec-y) var(--ds-gutter)}
/* 앞 섹션이 연회색(.sgw-alt)이면 FAQ 는 흰 바탕으로 — 두 섹션이 한 덩어리로 보이지 않게 */
.sgw-faq.sgw-faq-plain{background:#fff}
.sgw-faq-in{max-width:var(--ds-content);margin:0 auto}
.sgw-faq h2{margin:0 0 24px;text-align:center}
.sgw-faq-list{max-width:var(--ds-doc);margin:0 auto}
.sgw-faq-item{background:#fff;border:1px solid var(--ds-line);border-radius:var(--ds-radius);margin-bottom:12px;overflow:hidden}
.sgw-faq-item summary{display:block;cursor:pointer;list-style:none;font-size:17px;font-weight:700;color:var(--ds-ink);
line-height:1.6;padding:18px 52px 18px 22px;position:relative}
.sgw-faq-item summary::-webkit-details-marker{display:none}
.sgw-faq-item summary::after{content:"+";position:absolute;right:20px;top:50%;transform:translateY(-50%);
font-size:22px;font-weight:800;color:var(--ds-ink)}
.sgw-faq-item[open] summary::after{content:"−"}
.sgw-faq-a{padding:0 22px 22px;font-size:15.5px;line-height:1.85;color:var(--ds-ink2)}
.sgw-faq-a p{margin:0 0 10px}
.sgw-faq-a strong{color:var(--ds-ink);font-weight:800}
/* ── 내부링크 띠 (그리드 4열) ─────────────────────────────────────────── */
.sgw-sib{padding:var(--ds-sec-y) var(--ds-gutter)}
.sgw-sib-in{max-width:var(--ds-content);margin:0 auto}
.sgw-sib h3{font-size:22px;margin:0 0 18px;text-align:center}
.sgw-sib ul{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;
grid-auto-rows:1fr} /* ★칸 높이를 줄마다가 아니라 **띠 전체**에서 같게 — 두 줄로 접힌 칸이 있어도 들쭉날쭉하지 않다 */
.sgw-sib a{display:flex;align-items:center;justify-content:center;text-align:center;
min-height:64px;padding:14px 12px;background:var(--ds-primary);color:var(--ds-ink);
border-radius:var(--ds-radius);font-size:15px;font-weight:700;line-height:1.5}
.sgw-sib a.home{background:var(--ds-ink);color:var(--ds-primary)}
/* 줄 높이는 같아졌는데 링크가 칸을 안 채워 64/73 으로 보였다 — 링크가 칸(li) 높이를 따라가게 */
.sgw-sib li{display:flex}
.sgw-sib li>a{flex:1 1 auto;width:100%}
/* ── 3열 안내 띠 ──────────────────────────────────────────────────────── */
.sgw-cs{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;
padding:34px 0 40px;border-top:1px solid var(--ds-line);font-size:13.5px;color:var(--ds-ink2)}
.sgw-cs b{display:block;font-size:11px;letter-spacing:.18em;color:var(--ds-grey);margin-bottom:6px}
/* ── 아이콘 (공용 세트 CSS 와 같은 규격) ─────────────────────────────── */
.ds-ico{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;flex:0 0 44px;
border-radius:50%;background:var(--ds-primary);color:var(--ds-ink);line-height:0;vertical-align:middle}
.ds-ico svg{width:24px;height:24px;display:block}
.ds-svg{display:inline-block;vertical-align:middle}
/* ── 반응형 ───────────────────────────────────────────────────────────── */
@media (max-width:1000px){
.sgw-head h2,.sgw-doc h2,.sgw-faq h2{font-size:24px}
.sgw-doc h2{margin-top:44px}
.sgw-dong-cards{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:900px){
body{padding-top:73px}
/* ★모바일(<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%}
.sgw-btn,.sgw-btn-line{font-size:15px;padding:13px 22px}
.sgw-steps{grid-template-columns:repeat(2,1fr);gap:14px}
.sgw-duo{grid-template-columns:1fr;gap:14px}
.sgw-ways{grid-template-columns:1fr;gap:14px}
.sgw-cs{grid-template-columns:repeat(2,1fr);gap:16px}
.sgw-sib ul{grid-template-columns:repeat(2,1fr)}
.sgw-doc{padding:40px var(--ds-gutter) 48px}
.sgw-doc h2{margin-top:44px}
.sgw-faq-item summary{font-size:16px}
.sgw-tiles{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding-bottom:6px}
.sgw-tiles > .sgw-tile{flex:0 0 78%;scroll-snap-align:center}
.mo-br{display:block}
.ds-ico{width:40px;height:40px;flex:0 0 40px}
.ds-ico svg{width:22px;height:22px}
}
@media (max-width:560px){
.sgw-hero h1{font-size:24px}
.sgw-steps{grid-template-columns:1fr}
.sgw-dong-cards{grid-template-columns:1fr}
.sgw-tb thead{display:none}
.sgw-tb,.sgw-tb tbody,.sgw-tb tr,.sgw-tb th,.sgw-tb td{display:block;width:100%}
.sgw-tb tbody th{border-bottom:0}
.sgw-tb tr{margin-bottom:10px}
.sgw-cs{grid-template-columns:1fr}
.sgw-hubsteps li{padding-left:64px}
}
/* 문서 구획 · 강조 (2026-09-12 골격 다양화 — figcaption · hr · mark · aside) */
.sgw-doc figcaption{font-size:13px;color:var(--ds-grey);margin-top:8px;text-align:center}
.sgw-doc hr{border:0;border-top:1px dashed var(--ds-line);margin:40px 0 0}
.sgw-doc mark{background:linear-gradient(to bottom,transparent 52%,rgba(254,229,0,.62) 52%);color:inherit;font-weight:800}
.sgw-sum em{font-style:normal;font-weight:700}
.sgw-tb caption{caption-side:top;text-align:left;font-size:13px;color:var(--ds-grey);padding:0 0 8px}
.sgw-steps{counter-reset:none}
.sgw-tile figure{margin:0}
/* ───── 레퍼런스에서 짜임만 빌려 온 세 블록 (2026-09-13 · `_설계\레스토랑섹션_0913\목업.html`) ─────
색·글꼴·문안은 전부 우리 것. 원본 HTML/CSS 는 가져오지 않았다(1호와 같은 킷이라 닮으면 안 된다).
접두사 pt- (1호 butti- · 우리 sgw-/ic24- 와 겹치지 않는다). */
.pt-tag{display:inline-block;font-size:13px;font-weight:800;color:var(--ds-ink);
background:var(--ds-primary);border-radius:999px;padding:5px 12px;margin-bottom:12px}
/* 1. 진행 과정 — 번호 카드 넉 장(카드 위 노랑 4px 바) */
.pt-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.pt-step{background:#fff;border:1px solid var(--ds-line);border-radius:var(--ds-radius);
padding:24px 22px 26px;position:relative;overflow:hidden}
.pt-step::after{content:"";position:absolute;left:0;top:0;width:100%;height:4px;background:var(--ds-primary)}
.pt-num{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;
background:var(--ds-ink);color:var(--ds-primary);font-weight:800;margin-bottom:14px}
.pt-step h3{font-size:17px;margin:0 0 8px}
.pt-step p{color:var(--ds-ink2);font-size:15px;margin:0}
/* 2. 상황 카드 — 왼쪽 원 + 오른쪽 글, 가로 카드 석 장 */
.pt-cases{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.pt-case{display:grid;grid-template-columns:64px 1fr;gap:16px;align-items:start;
background:#fff;border:1px solid var(--ds-line);border-radius:var(--ds-radius);padding:22px}
.pt-icon{width:64px;height:64px;border-radius:50%;background:var(--ds-primary);
display:grid;place-items:center;font-size:12px;font-weight:800;color:var(--ds-ink);text-align:center;line-height:1.25}
.pt-case b{display:block;margin-bottom:6px}
.pt-case p{margin:0;color:var(--ds-ink2);font-size:15px}
/* 3. 짙은 좌우 2분할 핵심 띠 — 왼쪽 한 문장, 오른쪽 숫자 세 줄 */
.pt-band{background:var(--ds-ink);color:#fff;border-radius:var(--ds-radius);overflow:hidden;
display:grid;grid-template-columns:1.1fr 1fr}
.pt-band .left{padding:44px 40px;display:grid;align-content:center}
.pt-band .pt-band-h{font-size:clamp(24px,3.1vw,38px);line-height:1.3;font-weight:800;margin:0;color:#fff;
letter-spacing:-.02em;word-break:keep-all}
/* 설명은 **문장마다 한 줄** — PC 에서도 끊긴다(2026-09-13 사장님 「PC 버전에서도 줄바꿈」). */
.pt-band .left p+p{margin-top:8px}
/* 이 띠의 주인공은 왼쪽 제목이다(2026-09-13 사장님 「이것도 소구점인데」) — 오른쪽 숫자보다 크고
가장 굵다. 짙은 바탕이라 형광펜 대신 **노랑 글자**로 한 낱말만 세운다(강조는 덩어리에 하나). */
.pt-band .pt-hl{color:var(--ds-primary);font-weight:900}
/* ★제목도 라 이 규칙이 제목까지 15px 로 눌렀다(선택자 무게 0,2,1 > 제목 0,2,0).
CSS 에는 38px 이 적혀 있었지만 화면에선 숫자보다 작았다 — 눈으로 보고서야 잡혔다. 제목은 뺀다. */
.pt-band .left p:not(.pt-band-h){color:#c9cdd3;margin:12px 0 0;font-size:15px}
.pt-band .right{background:#222;padding:36px 40px;display:grid;align-content:center;gap:14px}
.pt-band .right div{display:flex;gap:12px;align-items:baseline;border-bottom:1px solid #333;padding-bottom:12px}
.pt-band .right div:last-child{border-bottom:0;padding-bottom:0}
.pt-band .right b{color:var(--ds-primary);font-size:20px;min-width:92px}
.pt-band .right span{color:#dde1e6;font-size:15px}
/* 빠른 이동 칩 — 네 칸 크기가 같다(2026-09-13 사장님 「모바일에서 2 × 2 · 텍스트박스 사이즈 동일」).
폭은 글자 수가 아니라 격자 칸이 정하고, 높이는 줄 수가 달라도 칸끼리 같다(grid 기본 stretch). */
.sgw-quick{margin:-8px auto 22px}
.sgw-quick ul{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;max-width:720px;margin:0 auto}
.sgw-quick a{display:flex;align-items:center;justify-content:center;text-align:center;min-height:44px;
padding:9px 12px;border-radius:999px;background:#fff;border:1px solid var(--ds-line);font-size:14px;font-weight:700;
word-break:keep-all}
.sgw-quick a:hover{background:var(--ds-primary);border-color:var(--ds-primary)}
.sgw-way hgroup{margin:0}
.sgw-duo ul{margin:12px 0 0;display:grid;gap:4px}
.sgw-duo li{font-size:14px;color:var(--ds-ink);padding-left:18px;position:relative}
.sgw-duo li::before{content:"·";position:absolute;left:4px;font-weight:800}
.sgw-quote{margin:8px 0 20px;padding:18px 22px;border-left:5px solid var(--ds-primary);background:var(--ds-off);border-radius:var(--ds-radius)}
.sgw-quote p{margin:0 0 6px;font-weight:700;color:var(--ds-ink)}
.sgw-quote cite{font-style:normal;font-size:13px;color:var(--ds-grey)}
.sgw-cs address{font-style:normal}
.sgw-dong-cards small{display:block;font-size:13px;color:var(--ds-grey)}
.sgw-steps hgroup{margin:0}
.sgw-glance{display:grid;grid-template-columns:120px 1fr;gap:6px 12px;margin:0 0 24px;padding:16px 18px;background:#fff;border:1px solid var(--ds-line);border-radius:var(--ds-radius);font-size:15px}
.sgw-glance dt{font-weight:800;color:var(--ds-ink)}
.sgw-glance dd{margin:0;color:var(--ds-ink2)}
.sgw-links{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin:6px 0 0;font-size:15px}
.sgw-links b{color:var(--ds-grey);font-weight:700}
.sgw-links ul{display:flex;flex-wrap:wrap;gap:8px 14px}
/* ★히어로-캡션-숨김 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}
/* ★index-섹션폭-1200-0912 */
/* index 의 모든 섹션 요소는 1200 (2026-09-12 사장님 「왜 FAQ 섹션 밑으로만 가로 공백이 생기지?」).
FAQ 목록·SEO 글이 문서 본문 폭(--ds-doc 780)을 쓰고 있어 그 아래만 좁아 보였다.
index 에서는 --ds-content(1200) 하나로. 하위 문서의 긴 글 본문은 읽기 폭을 두되
그 섹션 감싸개는 1200 — 좌우 공백이 아니라 글 열이 안에서 좁은 것으로 보이게. */
.sgw-faq-list,.sgw-intro-in{max-width:var(--ds-content)}
/* ★하단CTA-원본 킷라이브-0912 */
/* ── 하단 CTA = 원본 킷 **라이브** 그대로 (2026-09-12 사장님 「하단 CTA섹션은 10개 모두
https://원본 킷/ 의 이미지와 형태를 사용 · 텍스트만 좀 달라지면 될 듯」).
★처음 킷은 원본 킷 **로컬 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}
@media(max-width:768px){.cta-title{font-size:26px}.cta-desc{font-size:16px}.ctaimg-btns{flex-direction:column;gap:12px}}
/* ★섹션-교대배경-0912 */
:root{--ds-alt:#FFF9DB} /* 연노랑 — 카카오 노랑을 아주 옅게. 교대 배경 전용 */
/* 본문 섹션을 흰 / 연노랑 으로 번갈아. 배경은 감싸개 폭이 아니라 화면 끝까지 퍼진다. */
.ds-band-w{background:var(--ds-white) !important;box-shadow:0 0 0 100vmax var(--ds-white);clip-path:inset(0 -100vmax)}
.ds-band-y{background:var(--ds-alt) !important;box-shadow:0 0 0 100vmax var(--ds-alt);clip-path:inset(0 -100vmax)}
/* ★사장님지적묶음2-0912 */
/* ③ 세 단 안내 띠는 푸터 맨 위 — 어두운 바탕 위라 글자색을 밝게 */
footer.footer .sgw-cs{border-top:0;border-bottom:1px solid #2a2a2a;padding:0 0 28px;margin:0 0 20px;color:#c9ced9}
footer.footer .sgw-cs b{color:var(--ds-primary)}
/* ④ 푸터 저작권 아래 여백 */
footer.footer{padding-bottom:48px}
.footer-bottom{padding-bottom:0}
/* ⑤ 헤더 메뉴 좌우 간격 여유 (사장님 「허브메뉴의 좌우 폭을 좀 더 여유있게」) */
.header-gnblist{gap:44px}
.header-gnblink{padding:6px 2px}
@media(max-width:1365px){.header-gnblist{gap:28px}}
/* ⑥ 하위 문서 본문도 섹션 폭 1200 — 「모든 섹션 요소 가로 1200」 */
.sgw-doc{max-width:none;width:min(var(--ds-content), 100% - var(--ds-gutter)*2);padding-left:0;padding-right:0}
/* ⑦ 하위 부속(메인 바로가기 · 다른 구)은 본문 끝에 붙는 조각 — 띠가 아니다 */
.il-home{margin:40px 0 18px;text-align:center;background:none}
.sgw-gu-strip{margin:0 0 8px}
/* ★푸터-세단띠-0912 */
/* 세 단 안내 띠(CONTACT/AREA/HOURS) — 푸터 맨 위 (2026-09-12 사장님 「푸터 섹션 아래에 들어가야 하는 내용」)
★고지와 겹치는 문구는 여기 넣지 않는다 — 상용구 반복은 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}
@media(max-width:768px){.footer-cs{grid-template-columns:1fr;gap:16px}.footer-content{grid-template-columns:1fr}}
/* ★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 */
/* 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}
/* ★표캡션-모바일-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}
}
/* ★CTA이미지-모바일폭-0912 */
/* 킷 `.ctaimg-btns img{max-width:92vw}` 는 390 에서 359px — 그림 자리(컨테이너 350 · 계열에 따라 310)보다 커서
넘친다(5번 실측 문서 399px 가로 스크롤 · 1번 9px). 킷 다음 판에서 `max-width:100%` 로 고치기 전 임시. */
.ctaimg-btns img{max-width:100% !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}
/* ★메인버튼-아래틈-0912 */
/* 「품티켓 메인 페이지 →」 버튼과 그 아래 「함께 보면 좋은 안내」 박스가 18px 로 붙어 있었다
(2026-09-12 사장님 「버튼과 아래 메뉴들의 간격을 조금 넓혀줄래? 너무 딱 붙어 있는 것 같아 ·
하위페이지들도 다 그렇게」). 버튼 아래 40px 로 띄운다 — 하위 전 쪽 공통. */
.il-home{margin:40px 0 40px !important}
.sgw-gu-strip,.sgw-sib,[class$="-gu-strip"]{margin-top:0}
@media(max-width:768px){.il-home{margin:32px 0 28px !important}}
/* ★하위-머리와이미지-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}
.sgw-tb tbody th{width:34% !important;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 사장님 「섹션의 가로 요소들 가로 사이즈 맞추기 —
전체적으로 균일하게」). 히어로·하단 CTA·고지·푸터는 껍데기라 따로.
· 홈 = --ds-content(1200) 하나. 원인: 홈 SEO 섹션에 .sgw-doc 이 있어 하위용 `body:has(.sgw-doc)` 720 규칙이
홈에도 걸려 소개·FAQ·내부링크 띠·SEO 글만 720(FAQ 목록 640)으로 섰다. 홈 표식은 `.sgw-seo`(홈에만 있다).
· 하위 = --ds-doc(720) 하나(9-12 사장님 규칙 그대로). FAQ 목록만 720 안에서 다시 −80 되어 640 이던 것을 720 으로.
폭 값은 토큰 두 개에서만 나온다 — 블록마다 픽셀을 적지 않는다. 부모가 이미 여백을 뺀 자리는 100%. */
html body:has(.sgw-seo) .sgw-seo .sgw-doc{
width:min(var(--ds-content), 100% - var(--ds-gutter)*2) !important;max-width:none !important;margin-inline:auto}
html body:has(.sgw-seo) .sgw-faq-in,html body:has(.sgw-seo) .sgw-faq-list,
html body:has(.sgw-seo) .sgw-intro-in,html body:has(.sgw-seo) .sgw-sib-in,
html body:has(.sgw-seo) .sgw-intro .sgw-head,html body:has(.sgw-seo) .sgw-doc .sgw-head,
html body:has(.sgw-seo) .sgw-faq .sgw-head{
width:100% !important;max-width:var(--ds-content) !important;margin-inline:auto}
html body:not(:has(.sgw-seo)) .sgw-faq-list{width:100% !important;max-width:none !important}
/* 홈 30초 요약은 이제 FAQ(옅은 바탕) 바로 아래 — 제 띠를 깔면 FAQ 와 붙어 한 덩어리로 보인다. 흰 바탕 위 상자로 */
.sgw-sum-sec.sgw-sum-plain{background:transparent;box-shadow:none;clip-path:none}
.sgw-sum-sec.sgw-sum-plain .sgw-sum{background:var(--ds-off)}
/* ★본문확장-0913 */
/* 하위 15쪽 본문 확장 (2026-09-13 사장님 「h2 섹션 더 · 디자인도 예쁘면서」).
섹션마다 — 흰 / 연노랑(.sgw-band-y) 교대 띠, 안쪽은 .sgw-doc(720 · 기존 폭 규칙 그대로).
짜임 여섯 가지(표 · 단계 · 체크 · 비교 · 아이콘 · 문답)를 번갈아 — 같은 짜임이 연달아 서지 않게(문안 검사기가 막는다).
글 벽 금지: lead · 설명 한 덩어리 ≤170자(PC 4줄) · 긴 설명은 칸을 나눠 담는다. 색은 토큰만. */
:root{--sgw-band-y:72px}
@media(max-width:768px){:root{--sgw-band-y:44px}}
.sgw-band{padding:var(--sgw-band-y) 0;background:#fff}
.sgw-band.sgw-band-y{background:var(--ds-alt)}
html body .sgw-band > .sgw-doc{padding-top:0;padding-bottom:0}
html body .sgw-band > .sgw-doc > .sgw-head{width:100% !important;max-width:none;margin:0 0 22px}
.sgw-band .sgw-head h2{margin:0}
.sgw-band .sgw-head h2::after{margin-top:12px}
.sgw-band .sgw-head .en{margin-bottom:6px}
.sgw-band .sgw-crumb{margin:0 0 18px}
.sgw-doc p.sgw-lead{font-size:16px;line-height:1.8;color:var(--ds-ink2);margin:0 0 22px}
.sgw-doc p.sgw-note{margin:18px 0 0;padding:14px 18px;border-left:4px solid var(--ds-primary);
border-radius:0 var(--ds-radius) var(--ds-radius) 0;background:var(--ds-off);font-size:15px;line-height:1.75;color:var(--ds-ink)}
.sgw-band-y .sgw-doc p.sgw-note{background:#fff}
.sgw-band .sgw-doc figure{margin:0 0 22px}
.sgw-band .sgw-doc figure img{box-shadow:0 10px 26px rgba(0,0,0,.08)}
.sgw-txt .sgw-doc p:last-of-type{margin-bottom:0}
.sgw-txt .il-home{margin:32px 0 0 !important}
/* ① 요약 카드 — 첫 화면에서 눈에 걸리게(노랑 강조 · 큰 글자 · 짧은 결론) · PC·모바일 모두 2×2 */
html body .sgw-keysum .sgw-sum{background:none;border:0;border-radius:0;padding:0;margin:0}
.sgw-keysum .sgw-keys{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin:0 0 16px}
html body .sgw-keysum .sgw-keys li{position:relative;display:flex;flex-direction:column;gap:2px;background:#fff;
border:1px solid var(--ds-line);border-top:5px solid var(--ds-primary);border-radius:var(--ds-radius);
padding:18px 20px 18px;font-size:14px;line-height:1.6;box-shadow:0 8px 22px rgba(0,0,0,.05)}
.sgw-keys .k{display:inline-block;align-self:flex-start;font-size:40px;line-height:1.12;font-weight:900;letter-spacing:-.02em;
color:var(--ds-ink);margin:0 0 8px;padding:0 3px;background:linear-gradient(to bottom,transparent 58%,rgba(254,229,0,.8) 58%)}
html body .sgw-keys strong{font-size:16px;font-weight:800;color:var(--ds-ink);margin:0}
.sgw-keys span{font-size:14px;line-height:1.6;color:var(--ds-ink2)}
.sgw-doc p.sgw-keyline{display:flex;gap:12px;align-items:center;margin:0;padding:14px 18px;background:var(--ds-primary);
border-radius:var(--ds-radius);font-size:16px;font-weight:700;line-height:1.6;color:var(--ds-ink)}
.sgw-keyline span{flex:0 0 auto;background:var(--ds-ink);color:var(--ds-primary);font-size:12px;font-weight:800;
letter-spacing:.08em;padding:4px 10px;border-radius:999px}
/* ② 단계 — 먹색 번호 원 + 노랑 잇는 선 */
.sgw-stepx{display:grid;gap:14px;margin:0;counter-reset:sx}
.sgw-stepx li{position:relative;background:#fff;border:1px solid var(--ds-line);border-radius:var(--ds-radius);padding:18px 20px 18px 78px}
.sgw-stepx li::before{counter-increment:sx;content:counter(sx,decimal-leading-zero);position:absolute;left:18px;top:18px;
width:42px;height:42px;border-radius:50%;background:var(--ds-ink);color:var(--ds-primary);font-weight:800;font-size:15px;
display:flex;align-items:center;justify-content:center}
.sgw-stepx li:not(:last-child)::after{content:"";position:absolute;left:38px;top:60px;bottom:-15px;width:2px;background:var(--ds-primary)}
.sgw-doc .sgw-stepx h3{font-size:17px;line-height:1.5;margin:0 0 4px}
.sgw-doc .sgw-stepx p{font-size:15px;line-height:1.75;margin:0;color:var(--ds-ink2)}
/* ③ 체크 — 노랑 체크 원 · 카드 */
.sgw-checkx{margin:0}
.sgw-checkx li{padding:14px 18px 14px 50px;font-size:15px;line-height:1.75;color:var(--ds-ink2)}
.sgw-checkx li::before{top:16px;left:18px;width:22px;height:22px}
.sgw-checkx li b{color:var(--ds-ink);font-size:16px;margin-bottom:3px}
/* ④ 비교 — 두 카드(오른쪽 노랑 윗선) */
.sgw-cmp{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:stretch}
.sgw-cmp-card{background:#fff;border:1px solid var(--ds-line);border-top:5px solid var(--ds-line);border-radius:var(--ds-radius);padding:22px 20px 20px}
.sgw-cmp-card.is-us{border-top-color:var(--ds-primary);box-shadow:0 12px 28px rgba(0,0,0,.07)}
.sgw-cmp-card .tag{display:inline-block;font-size:12.5px;font-weight:800;padding:3px 11px;border-radius:999px;background:var(--ds-off);color:var(--ds-ink2);margin:0 0 10px}
.sgw-cmp-card.is-us .tag{background:var(--ds-primary);color:var(--ds-ink)}
.sgw-doc .sgw-cmp-card h3{font-size:18px;line-height:1.45;margin:0 0 12px;padding:0 0 12px;border-bottom:1px solid var(--ds-line)}
.sgw-cmp-card dl{margin:0;display:block}
.sgw-cmp-card dt{font-size:12.5px;font-weight:800;color:var(--ds-grey);margin:14px 0 0}
.sgw-cmp-card dt:first-child{margin-top:0}
.sgw-cmp-card dd{margin:2px 0 0;font-size:14.5px;line-height:1.65;color:var(--ds-ink)}
.sgw-cmp-card.is-us dd{font-weight:600}
/* ⑤ 아이콘 격자 2열 */
.sgw-icox{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:0}
.sgw-icox li{background:#fff;border:1px solid var(--ds-line);border-radius:var(--ds-radius);padding:20px 20px 18px}
.sgw-icox .ds-ico{margin:0 0 10px}
.sgw-doc .sgw-icox h3{font-size:17px;line-height:1.45;margin:0 0 6px}
.sgw-doc .sgw-icox p{font-size:14.5px;line-height:1.7;margin:0;color:var(--ds-ink2)}
/* ⑥ 문답 — 기존 .sgw-qa 에 여백만 */
.sgw-qax{margin:0;gap:0}
.sgw-qax dt{font-size:16px}
.sgw-qax dd{background:#fff;margin:0 0 14px}
.sgw-qax dd:last-child{margin-bottom:0}
/* 표 — 띠 안에서 바탕 흰색 */
.sgw-band .sgw-tbx{margin:0;background:#fff}
/* 내부링크 띠 여섯 칸(하위) — 3열 2줄 · 모바일 2열 3줄 */
.sgw-sib ul:has(> li:nth-child(6):last-child){grid-template-columns:repeat(3,1fr)}
@media(max-width:768px){
.sgw-doc p.sgw-lead{font-size:15.5px;line-height:1.75;margin-bottom:18px}
.sgw-keysum .sgw-keys{gap:10px;margin-bottom:12px}
html body .sgw-keysum .sgw-keys li{padding:14px 12px 14px}
.sgw-keys .k{font-size:28px;margin-bottom:6px}
html body .sgw-keys strong{font-size:14.5px}
.sgw-keys span{font-size:13px;line-height:1.55}
.sgw-doc p.sgw-keyline{font-size:15px;padding:12px 14px;align-items:flex-start}
.sgw-stepx li{padding:16px 14px 16px 62px}
.sgw-stepx li::before{left:12px;top:16px;width:38px;height:38px;font-size:14px}
.sgw-stepx li:not(:last-child)::after{left:30px;top:54px}
.sgw-doc .sgw-stepx p,.sgw-doc .sgw-icox p{font-size:14.5px}
.sgw-checkx li{padding:12px 14px 12px 46px;font-size:14.5px}
.sgw-checkx li::before{left:14px;top:14px}
.sgw-cmp{grid-template-columns:1fr;gap:12px}
.sgw-cmp-card{padding:18px 16px}
.sgw-icox{grid-template-columns:1fr;gap:10px}
.sgw-icox li{padding:16px 14px}
.sgw-sib ul:has(> li:nth-child(6):last-child){grid-template-columns:repeat(2,1fr)}
/* 3열 설명 표는 모바일에서 줄마다 카드로 — 좁은 칸에 설명이 열 줄 넘게 쌓이던 「표 속 글 벽」 방지(0913).
2열 표는 9-12 사장님 규칙대로 표 그대로 한눈에. 칸 이름은 data-th 로 칸 위에 작게. */
html body .sgw-tbx.sgw-tb3,html body .sgw-tbx.sgw-tb3 tbody,html body .sgw-tbx.sgw-tb3 tr{display:block !important;width:100% !important}
html body .sgw-tbx.sgw-tb3 thead{display:none !important}
html body .sgw-tbx.sgw-tb3 caption{display:block !important}
html body .sgw-tbx.sgw-tb3 tr{background:#fff;border:1px solid var(--ds-line);border-radius:var(--ds-radius);margin:0 0 10px;overflow:hidden}
html body .sgw-tbx.sgw-tb3 th,html body .sgw-tbx.sgw-tb3 td{display:block !important;width:100% !important;border:0;padding:8px 14px;font-size:14px;line-height:1.65}
html body .sgw-tbx.sgw-tb3 tbody th{background:var(--ds-primary);font-size:15px;padding:10px 14px}
html body .sgw-tbx.sgw-tb3 td::before{content:attr(data-th);display:block;font-size:11.5px;font-weight:800;color:var(--ds-grey);margin:0 0 2px}
html body .sgw-tbx.sgw-tb3 td+td{border-top:1px dashed var(--ds-line)}
}
/* ★메인섹션-0913 */
/* 메인 새 섹션 셋 (2026-09-13 사령탑 확정 · 목업 `_보고서\메인섹션후보\0N_시안.html` 의 새 CSS 를 옮김)
01 3분 진행 막대 = 메인의 요약 카드(히어로 바로 다음 · 벤토는 1호와 같은 배치라 폐기) · 02 비교 VS(확인 표 뒤) · 03 문의 문구 만들기(FAQ 앞 마지막) */
/* 01 3분 진행 막대(ic24-) — 가로 단계 막대 4칸 + 끝 「3분」 + 얇은 숫자 한 줄. 카드 격자가 아니다(1호 숫자 패널과 짜임을 가른다) */
.ic24-clock{display:flex;align-items:stretch;gap:0;background:#fff;border:1px solid var(--ds-line);border-radius:var(--ds-radius);overflow:hidden}
.ic24-track{flex:1 1 auto;display:grid;grid-template-columns:repeat(4,1fr);margin:0;padding:30px 12px 26px;position:relative;counter-reset:none}
.ic24-track::before{content:"";position:absolute;left:12.5%;right:12.5%;top:52px;height:3px;background:var(--ds-ink)}
.ic24-track li{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 8px}
.ic24-dot{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:50%;
background:var(--ds-primary);color:var(--ds-ink);font-weight:900;font-size:18px;box-shadow:0 0 0 6px #fff;margin:0 0 14px}
.ic24-track b{font-size:18px;font-weight:800;color:var(--ds-ink);line-height:1.4}
.ic24-track small{display:block;margin-top:4px;font-size:14px;color:var(--ds-grey);line-height:1.5}
.ic24-total{flex:0 0 230px;margin:0;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:2px;
background:var(--ds-ink);color:var(--ds-primary);padding:20px}
.ic24-total span{font-size:14px;font-weight:700;color:#fff}
.ic24-total strong{font-size:64px;line-height:1;font-weight:900;letter-spacing:-.03em;color:var(--ds-primary)}
.ic24-facts{display:grid;grid-template-columns:repeat(4,1fr);margin:18px 0 0;border-top:2px solid var(--ds-ink);border-bottom:1px solid var(--ds-line)}
.ic24-facts li+li{border-left:1px solid var(--ds-line)}
.ic24-facts a{display:flex;align-items:baseline;justify-content:center;gap:10px;padding:14px 10px}
.ic24-facts a:hover{background:var(--ds-off)}
.ic24-facts b{font-size:19px;font-weight:900;color:var(--ds-ink);white-space:nowrap;box-shadow:inset 0 -8px 0 var(--ds-primary)}
.ic24-facts span{font-size:13.5px;color:var(--ds-ink2)}
.ic24-end{margin:22px 0 0;text-align:center;font-size:16px;font-weight:700;color:var(--ds-ink)}
.ic24-end .sgw-btn-line{margin-left:12px;padding:9px 18px;font-size:14px;vertical-align:middle}
.sgw-vs{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:stretch}
.sgw-vs-card{background:#fff;border:1px solid var(--ds-line);border-top:5px solid var(--ds-line);border-radius:var(--ds-radius);padding:30px 30px 26px}
.sgw-vs-card.is-us{border-top-color:var(--ds-primary);box-shadow:0 14px 34px rgba(0,0,0,.07)}
.sgw-vs-card .tag{display:inline-block;font-size:13px;font-weight:800;padding:4px 12px;border-radius:999px;background:var(--ds-off);color:var(--ds-ink2);margin-bottom:12px}
.sgw-vs-card.is-us .tag{background:var(--ds-primary);color:var(--ds-ink)}
.sgw-vs-card h3{font-size:22px;margin:0 0 6px}
.sgw-vs-card>p{font-size:15px;color:var(--ds-ink2);margin:0 0 16px;padding-bottom:16px;border-bottom:1px solid var(--ds-line)}
.sgw-vs-card dl{margin:0;display:grid;gap:12px}
.sgw-vs-card dt{font-size:12.5px;font-weight:800;color:var(--ds-grey);letter-spacing:.02em}
.sgw-vs-card dd{margin:2px 0 0;font-size:16px;color:var(--ds-ink);line-height:1.6}
.sgw-vs-card.is-us dd{font-weight:700}
.sgw-vs-card.is-us dd b{background:linear-gradient(to bottom,transparent 52%,rgba(254,229,0,.62) 52%)}
.sgw-vs-mark{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:52px;height:52px;border-radius:50%;
background:var(--ds-ink);color:var(--ds-primary);font-weight:900;font-size:16px;display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 6px #fff}
.sgw-vs-note{text-align:center;font-size:15px;color:var(--ds-grey);margin:22px 0 0}
@media(max-width:768px){
/* 3분 진행 막대 — 모바일: 막대는 세로 4단(번호 원 + 선) · 「3분」은 아래 띠 · 숫자 줄은 2×2 */
.ic24-clock{flex-direction:column}
.ic24-track{grid-template-columns:1fr;row-gap:18px;padding:20px 16px 18px}
.ic24-track::before{left:38px;right:auto;top:32px;bottom:40px;width:3px;height:auto}
.ic24-track li{flex-direction:row;flex-wrap:wrap;align-items:center;text-align:left;padding:0;column-gap:14px}
.ic24-dot{width:40px;height:40px;font-size:16px;margin:0;box-shadow:0 0 0 5px #fff}
.ic24-track b{font-size:16px}
.ic24-track small{flex:1 1 100%;margin:0 0 0 54px;font-size:13px}
.ic24-total{flex:0 0 auto;flex-direction:row;justify-content:center;gap:12px;padding:14px}
.ic24-total strong{font-size:40px}
.ic24-facts{grid-template-columns:1fr 1fr}
.ic24-facts li:nth-child(odd){border-left:0}
.ic24-facts li:nth-child(n+3){border-top:1px solid var(--ds-line)}
.ic24-facts a{flex-direction:column;align-items:center;gap:2px;padding:12px 6px;text-align:center}
.ic24-facts b{font-size:17px}
.ic24-facts span{font-size:12.5px}
.ic24-end{font-size:15px}
.ic24-end .sgw-btn-line{display:block;margin:12px auto 0;width:max-content}
.sgw-vs{grid-template-columns:1fr;gap:0}
.sgw-vs-card{padding:22px 18px 20px}
.sgw-vs-card:first-of-type{order:1}
.sgw-vs-mark{order:2;position:relative;left:auto;top:auto;transform:none;margin:-10px auto;z-index:1;width:44px;height:44px;font-size:14px}
.sgw-vs-card.is-us{order:3}
.sgw-quick ul{grid-template-columns:1fr 1fr} /* 칩 2 × 2 · 네 칸 같은 크기 */
.pt-steps,.pt-cases{grid-template-columns:1fr}
.pt-band{grid-template-columns:1fr}
.pt-band .left{padding:32px 24px}
.pt-band .right{padding:24px}
}
/* ============================================================
_브랜드.css — 품티켓 infocashpoom24 전용 덧칠
킷(tokens.css · chrome.css)과 사이트 CSS(site.src.css) 뒤에 붙는다.
바꾸는 것은 **상담 채널 부품**뿐이다 — 색·치수·배치 규격은 킷 그대로.
① 플로팅 배너(#floating-chat-icons · 이미지 아이콘 3개)
② 하단 CTA 이미지 버튼(.ctaimg-btns)
③ 고지 한 줄(.il-legal 표가 1행이라 표 꼴을 한 줄 꼴로)
============================================================ */
/* ── ① 플로팅 배너 (카카오 → 전화 → 문자) ───────────────────── */
#floating-chat-icons{
position:fixed;
right:calc(24px + env(safe-area-inset-right, 0px));
bottom:calc(28px + env(safe-area-inset-bottom, 0px));
z-index:99999;
display:flex;
flex-direction:column;
gap:12px;
}
#floating-chat-icons a{display:inline-block;line-height:0;text-decoration:none;
transition:transform .3s cubic-bezier(.22,1,.36,1)}
#floating-chat-icons a:hover{transform:translateY(-3px) scale(1.04)}
#floating-chat-icons img{width:64px;height:64px;display:block;border-radius:50%;
box-shadow:0 4px 14px rgba(0,0,0,.18)}
@media (max-width:768px){
#floating-chat-icons{right:calc(14px + env(safe-area-inset-right, 0px));
bottom:calc(18px + env(safe-area-inset-bottom, 0px));gap:10px}
#floating-chat-icons img{width:54px;height:54px}
}
/* ── ② 하단 CTA 이미지 버튼 — 원본 610×252 를 폭 380 으로(비율 그대로) ── */
.ctaimg-btns{display:flex;gap:14px;justify-content:center;align-items:center;
flex-wrap:wrap;margin-top:26px}
.ctaimg-btns a{line-height:0;display:inline-block}
.ctaimg-btns img{width:380px;max-width:min(92vw,380px);height:auto;display:block}
/* 노랑 바탕 위 노랑 카카오 그림이 묻혀 경계가 안 보였다 (2026-09-13 사장님 「바탕과 이미지가 구분이 잘 안 되니
얇은 테두리」 → 1px 을 보시고 「살짝만 더 굵게」 → 2px · 조금 더 진하게). 바탕색은 그대로.
border 가 아니라 **안쪽 outline**(offset −2px) — 레이아웃 상자·그림 크기·두 그림 간격이 1px 도 안 바뀐다.
카카오·전화 두 그림 같은 두께 · 그림 모서리가 각져 있어 둥글기 0 · 그림자 없음 · PC·모바일 같은 규칙. */
.cta-section .ctaimg-btns img{outline:2px solid rgba(25,25,25,.30);outline-offset:-2px;border:0;border-radius:0;box-shadow:none}
/* ── ③ 고지 한 줄 — 표가 1행이라 dt/dd 를 한 줄로 흐르게 ─────── */
.il-legal-tbl{display:block}
.il-legal-tbl dt{display:block;margin-bottom:8px}
.il-legal-tbl dd{display:block;margin:0}
/* ── ④ 가운데 CTA 띠의 카카오 알약도 같은 알약 꼴 ─────────────── */
.il-cta-btns a[href^="https://pf.kakao.com"]{background:var(--ds-primary);color:var(--ds-ink)}
/* ── ⑤ FAQ 머리 아래 한 줄 — h2 는 짧게 두고 라벨을 여기서 받는다 ─── */
.sgw-faq-lead{text-align:center;margin:-14px 0 24px;color:var(--ds-grey);
font-size:15.5px;line-height:1.6;word-break:keep-all;text-wrap:pretty}
@media(max-width:768px){ .sgw-faq-lead{font-size:14.5px;margin:-10px 0 20px} }