/* 에코114 고객 웹 공통 스타일 — 디자인 v2 (2026-10-19) 기준: 시안 v2 `_design/04_리디자인_시안/index.html` — 사장님 "너무 마음에 들어"(커밋 85056fc · fb8bc88). 옛 기준(_design/03_상세화면/기준안_홈.html · 기준안_시스템.html · 2026-09-23 2차)은 v2 부터 쓰지 않는다. 지키는 것 - 치수·색·굵기·비율은 tokens.css 의 변수만 쓴다. 여기에 숫자나 색을 새로 적지 않는다. 반투명은 토큰 색을 color-mix 로 섞어 만든다(섞는 비율도 토큰 — --glass-mix · --overlay-mix …). - 한글은 어절 단위로 줄을 바꾼다(word-break: keep-all; overflow-wrap: anywhere). 본문 폭을 ch 단위나 좁은 max-width 로 묶지 않는다. - 모바일 우선. PC 는 가운데 480px 한 줄로 같은 화면을 보여 준다(개발문서 §8-4). - 숲색(--color-forest) 판은 넓은 정보판(숫자 띠 · 강조 단계 · 바닥)에만 쓴다. 작은 상자·화살표로 단추처럼 보이게 하지 않는다 (9/27 사장님 "검은 칸이 버튼으로 착각돼" — 그래서 '약속 칸'은 숲색이 아니라 옅은 미색 카드다 · 색토큰 §1). - 홈과 랜딩 열여덟 장이 같은 부품을 쓴다(머리 · 약속 칸 · 진행 순서 · 자주 물으시는 것 · 바닥 · 상담 띠) — 모양은 여기 한 곳에서 정한다. 상담 띠(개발문서 §8-4 "상담 버튼 (하단 상담 띠)") - 일반 문서 스크롤을 쓰고, 상담 띠를 본문 흐름의 맨 끝에 두어 화면 아래에 붙인다(position: sticky). 띠가 본문 흐름 안에 자리를 차지하므로, 버튼 글자가 두 줄이 되어도 끝까지 내리면 마지막 내용이 띠 위에 온다. - 이 때문에 html·body 에 overflow 를 주지 않는다(주면 sticky 가 풀린다). */ /* ── 1. 기본 ─────────────────────────────────────────── */ * { box-sizing: border-box; } /* --dock-reserve: 키보드 초점이 상담 띠 뒤로 숨지 않게 화면 아래에 비워 두는 높이(토큰으로 계산한 값). 띠 높이 = 윗선 + 위 여백 + 상담 버튼 + 아래 여백 + 아이폰 홈 막대 영역. 상담 버튼 글자("24시간 상담")는 많아야 두 줄이다. 1em 은 상담 버튼 글자 크기다. html 글자 크기를 본문 크기로 맞춰 두어 html 에서도 1em 이 같은 뜻이 된다. */ html { --dock-reserve: calc(var(--border-width) + var(--space-3) + max(var(--button-secondary-height), 1em * var(--line-height-button) * var(--two) + var(--space-3) * var(--two) + var(--border-width) * var(--two)) + var(--space-3) + env(safe-area-inset-bottom)); background: var(--color-surface); color-scheme: light; font-size: var(--font-size-body); scroll-padding-bottom: var(--dock-reserve); } body { width: var(--full); max-width: var(--page-max); margin: var(--zero) auto; background: var(--color-bg); color: var(--color-text); font-family: var(--font-family); font-size: var(--font-size-body); font-weight: var(--font-weight-normal); line-height: var(--line-height-body); letter-spacing: var(--letter-spacing-body); word-break: keep-all; overflow-wrap: anywhere; -webkit-font-smoothing: antialiased; } h1,h2,h3,h4,p,ol,ul,dl,dd,figure { margin: var(--zero); } h1,h2,h3,h4,strong { font-weight: var(--font-weight-strong); color: var(--color-text-strong); } h1,h2 { font-weight: var(--font-weight-heavy); } h1 { font-size: var(--font-size-display); line-height: var(--line-height-display); letter-spacing: var(--letter-spacing); } h2 { font-size: var(--font-size-title); line-height: var(--line-height-title); letter-spacing: var(--letter-spacing); } h3 { font-size: var(--font-size-section); line-height: var(--line-height-section); letter-spacing: var(--letter-spacing); } h4 { font-size: var(--font-size-body); line-height: var(--line-height-body); } ul,ol { list-style: none; padding: var(--zero); } img { display: block; max-width: var(--full); } button,input,textarea,select { font: inherit; color: inherit; } button { cursor: pointer; } button,input,a,summary { -webkit-tap-highlight-color: var(--color-clear); } button,a,input,summary { touch-action: manipulation; } button:disabled,input:disabled { cursor: not-allowed; } a { color: inherit; text-underline-offset: var(--space-1); } button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible { outline: var(--border-width-strong) solid var(--color-primary-strong); outline-offset: var(--space-1); } /* 선 그림(화면에 바로 넣은 svg path) — 둥근 끝 선 */ svg { width: var(--icon-size); height: var(--icon-size); flex-shrink: var(--zero); fill: none; stroke: currentColor; stroke-width: var(--icon-stroke); stroke-linecap: round; stroke-linejoin: round; } /* 면 그림 — 아이콘 묶음(/assets/img/icons.svg · Material Symbols Rounded = 앱 아이콘과 같은 모양) */ svg.ms { fill: currentColor; stroke: none; } .small { font-size: var(--font-size-small); line-height: var(--line-height-small); color: var(--color-text-weak); } .eyebrow { font-size: var(--font-size-small); line-height: var(--line-height-small); font-weight: var(--font-weight-medium); color: var(--color-text-weak); } .gutter { padding-inline: var(--page-gutter); } /* 낱말 묶음. 제목처럼 꼭 어절째 내려야 하는 곳에 붙인다("철거·" / "원상복구"). */ .word { display: inline-block; } /* ── 2. 버튼 ─────────────────────────────────────────── */ /* 주 버튼: 화면에서 가장 중요한 행동 하나에만 쓴다. 와