/* ──────── src/styles/global.css ──────── */ :root { /* Brand */ --red: #ed1e24; --red-deep: #df0006; --red-flat: #f30000; --red-soft: #fff2f2; --red-tint: #f44336; /* Ink */ --ink: #202020; --ink-strong: #232323; --ink-body: #727272; --ink-muted: #a8a8a8; --ink-footer: #757a83; /* Surface */ --surface: #ffffff; --surface-gray: #f8f9fa; --surface-pink: #fff4f4; --surface-footer: #000000; --surface-frame: #eff0f0; /* State — 폼 피드백과 차트에서 쓰는 의미 색상 */ --ok: #10803f; --warn: #9a6b00; --required: #f00; --ink-answer: #686868; --chart-base: #e6e6e6; /* Line */ --line: #dadada; --line-soft: #dedede; --line-faq: #dfdfdf; --line-header: #dcdfe4; /* Layout */ /* * 본문 섹션 사이의 세로 여백. 한 값으로 통일해 섹션 간 리듬을 맞춘다. * * 최솟값 88px — 모바일에서 적용되는 값이다. 일반 권장치(40~64px)보다 넓게 잡았다. * "한 화면에 글이 너무 많이 들어온다"는 피드백을 반영한 것이라 좁히지 말 것. * 최댓값 230px — 시안 폭(1920px)에서의 값. 12vw × 1920 = 230.4 이라 * 시안 폭까지는 화면을 따라 늘고 그 위로는 230px 에서 멈춘다. */ --section-pad-min: 88px; --section-pad: clamp(var(--section-pad-min), 12vw, 230px); --container: 1180px; --container-wide: 1340px; --container-xwide: 1580px; --gutter: 24px; --header-h: 76px; color-scheme: light; } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); } body { margin: 0; background: var(--surface); color: var(--ink); font-family: 'Pretendard Variable', Pretendard, 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', system-ui, sans-serif; font-size: 16px; line-height: 1.5; letter-spacing: -0.02em; /* 한국어는 어절 단위로 끊는다. 끊을 데가 없는 긴 토큰만 강제로 넘긴다 */ word-break: keep-all; overflow-wrap: break-word; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; /* 디자인 폭(1920)보다 좁은 화면에서도 가로 스크롤이 생기지 않게 한다 */ overflow-x: hidden; } img, svg, iframe { max-width: 100%; } img { display: block; height: auto; } h1, h2, h3, h4, p, figure, blockquote { margin: 0; } ul, ol { margin: 0; padding: 0; list-style: none; } a { color: inherit; text-decoration: none; } button, input, textarea, select { font: inherit; letter-spacing: inherit; color: inherit; } button { cursor: pointer; } /* outline 은 요소의 border-radius 를 따라가므로 여기서 radius 를 건드리면 포커스 순간 모서리 모양이 바뀐다 */ :focus-visible { outline: 2px solid var(--red); outline-offset: 2px; } /* ── Layout ───────────────────────────────────────────── */ .container { width: 100%; /* 콘텐츠 폭이 시안 값과 정확히 같아지도록 좌우 여백을 max-width 에 더해 준다 */ max-width: calc(var(--container) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); } .container--wide { max-width: calc(var(--container-wide) + var(--gutter) * 2); } .container--xwide { max-width: calc(var(--container-xwide) + var(--gutter) * 2); } /* ── Type ─────────────────────────────────────────────── */ .t-eyebrow { margin: 0; color: var(--red); font-size: clamp(15px, 1.5vw, 22px); font-weight: 800; } .t-display { font-size: clamp(28px, 3.6vw, 44px); font-weight: 700; line-height: 1.25; color: var(--ink); } .t-section { font-size: clamp(20px, 2.4vw, 30px); font-weight: 700; line-height: 1.37; color: var(--ink); } /* ── Buttons ──────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: 9px; font-weight: 700; text-align: center; } .btn--primary { background: var(--red); color: #fff; } .btn--soft { background: var(--red-soft); color: var(--red-tint); } .btn--dark { background: #000; color: #fff; } .btn--lg { height: 55px; padding-inline: 28px; font-size: clamp(15px, 1.2vw, 18px); } .btn--md { height: 47px; padding-inline: 24px; font-size: 16px; } /* ── Scroll reveal ──────────────────────────────────────── 숨김 상태는 이 켠다. 스크립트가 없거나 죽으면 index.html 의