@charset "UTF-8"; /* ===== Noto Sans KR ===== Loaded from the Google Fonts CDN via (with preconnect) in the HTML : https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;600;700&display=swap */ /* ===== Design tokens ===== */ :root { --brand: #47b8ff; --brand-soft: rgba(71, 184, 255, 0.2); --kakao: #fee500; --bg: #181818; --bg-deep: #0e0e0e; --surface: #202020; --surface-2: #262626; --line: rgba(255, 255, 255, 0.1); --text: #ffffff; --text-dim: rgba(255, 255, 255, 0.65); --text-faint: rgba(255, 255, 255, 0.45); --content: 1440px; --side: clamp(24px, calc((100vw - 1440px) / 2), 240px); } /* ===== Reset ===== */ *, *::before, *::after { box-sizing: border-box; } * { font-family: "Noto Sans KR", sans-serif; } html, body { margin: 0; padding: 0; } html { scroll-behavior: smooth; } /* 고정 헤더(80px) 높이만큼 앵커 이동 위치 보정 */ section[id] { scroll-margin-top: 88px; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { background-color: var(--bg); color: var(--text); overflow-x: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1, h2, h3, h4, h5, h6, p { margin: 0; word-break: keep-all; } a { color: inherit; text-decoration: none; } button { margin: 0; border: none; background: transparent; cursor: pointer; font: inherit; color: inherit; } img { display: block; max-width: 100%; } ul, li { margin: 0; padding: 0; list-style: none; } ::-webkit-scrollbar { display: none; } /* ===== Layout helpers ===== */ .v2_content { width: 100%; max-width: var(--content); margin: 0 auto; padding: 0 24px; } .v2_section { width: 100%; position: relative; } /* Section eyebrow / heading shared across feature blocks */ .v2_eyebrow { display: block; text-align: center; color: var(--brand); font-size: 20px; font-weight: 600; line-height: 1.4; } .v2_section_title { text-align: center; font-size: 48px; font-weight: 600; line-height: 1.4; margin-top: 16px; } .v2_section_desc { text-align: center; color: var(--text-dim); font-size: 22px; font-weight: 400; line-height: 1.4; margin-top: 20px; } .v2_btn_kakao { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--kakao); color: #000; font-weight: 500; border-radius: 8px; padding: 12px 24px; font-size: 20px; line-height: 1.4; transition: transform 0.15s ease, filter 0.15s ease; } .v2_btn_kakao:hover { filter: brightness(0.96); transform: translateY(-1px); } .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ===== Responsive type scale ===== */ @media (max-width: 1280px) { .v2_section_title { font-size: 40px; } } @media (max-width: 768px) { .v2_content { padding: 0 20px; } .v2_eyebrow { font-size: 16px; } .v2_section_title { font-size: 28px; margin-top: 12px; } .v2_section_desc { font-size: 16px; margin-top: 14px; } .v2_btn_kakao { font-size: 16px; padding: 12px 20px; } }