/* ============================================================
tokens.css — 카카오옐로우 디자인 시스템 정본 v2 · A항 토큰
D:\수한 에이전트\일수 홈페이지 배포\대구일수업체\닷홈\디자인시스템_정본_v2.md §A
전 사이트 :root 에 그대로 붙여 쓴다. 값을 사이트마다 바꾸지 않는다.
============================================================ */
:root{
/* 색 */
--ds-primary:#FEE500; /* 카카오 노랑 — 버튼·포인트 전용. 보라 계열 금지 */
--ds-ink:#191919; /* 기본 글자 / 노랑 위 글자 */
--ds-ink2:#2E2E2E; /* 보조 글자 */
--ds-off:#F6F5F1; /* 섹션 교대 배경(오프화이트) */
--ds-line:#ECECEC; /* 옅은 경계선 */
--ds-grey:#6b6b6b; /* 설명·서브타이틀 */
--ds-white:#FFFFFF;
/* 헤더 전용(다크 네이비 — eundev dg5head2 고정 배색). ★상단 띠(유틸 바)는 만들지
않는다(§23 2026-09-12 2차 확정) — eundev 실물은 직후 바로 header 뿐이다 */
--ds-header-bg:#141B2E;
--ds-header-line:#232C45;
--ds-header-fg:#F2F2F2;
/* 법정고지·형제링크 전용(다크 네이비 박스 — il-legal-fix 고정 배색) */
--ds-legal-bg:#0B1226;
--ds-legal-fg:#ECECEC;
--ds-legal-warn:#FFD4D4;
/* 치수 */
--ds-max:1280px; /* 바깥 컨테이너(container-full 안 여백 기준) */
--ds-content:1200px; /* §C-1: 모든 섹션 내용 컨테이너 폭 — 이 값 하나만 쓴다
(2026-09-12 사장님 「섹션 요소들의 가로사이즈를 1200px 로 통일해보자」) */
--ds-doc:720px; /* §C-4: **하위 페이지 콘텐츠 폭** — 본문·FAQ·형제 띠까지 이 폭
(2026-09-12 사장님 「하위페이지는 PC 기준 가로 720px · FAQ 섹션까지 포함 · 규칙을 그렇게 잡자」.
1200 이면 글줄이 1,150px 로 흘러 넓어 보인다 — 실측) */
--ds-gutter-pc:40px;
--ds-gutter-mo:12px; /* 2026-09-12 사장님 「좌우 여백은 일관성 있게, 좌 12px 우 12px」 */
/* ★컨테이너가 실제로 쓰는 여백은 이 하나다 — 미디어쿼리로 값만 갈아 끼운다.
(2026-09-12) 컨테이너마다 PC 규칙·모바일 규칙을 따로 쓰면 **파일 안 순서**로 승패가
갈린다 — 실측: 법정고지의 모바일 규칙이 PC 규칙보다 앞에 있어 져서, 모바일 여백만
40px(나머지 20px)로 남았다. 변수 하나면 순서와 무관하다. */
--ds-gutter:var(--ds-gutter-pc);
--ds-radius:14px;
--ds-sec-y-pc:96px; /* §C-2: 섹션 상하 padding(PC) — top=bottom */
--ds-sec-y-mo:48px; /* §C-2: 섹션 상하 padding(모바일) — top=bottom */
--ds-hero-h-pc:1080px; /* §C-5 / B-히어로: PC 히어로 고정 높이 */
/* 글꼴 */
--ds-font:'Pretendard Variable', Pretendard, 'Malgun Gothic', sans-serif;
}
/* jsdelivr dynamic-subset — 각 페이지 에 이 두 줄을 넣는다(토큰 파일이 대신 로드하지 않는다) :
*/
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}