/* 공통 토큰·기본 스타일. 섹션별 스타일은 sections-*.css 에 둔다. */
@font-face { font-family: 'NanumSquare Neo'; font-weight: 400; font-display: swap; src: url(../assets/fonts/NanumSquareNeoTTF-bRg.woff2) format('woff2'); }
@font-face { font-family: 'NanumSquare Neo'; font-weight: 700; font-display: swap; src: url(../assets/fonts/NanumSquareNeoTTF-cBd.woff2) format('woff2'); }
@font-face { font-family: 'NanumSquare Neo'; font-weight: 800; font-display: swap; src: url(../assets/fonts/NanumSquareNeoTTF-dEb.woff2) format('woff2'); }
@font-face { font-family: 'NanumSquare Neo'; font-weight: 900; font-display: swap; src: url(../assets/fonts/NanumSquareNeoTTF-eHv.woff2) format('woff2'); }

:root {
  --blue: #1E5CF7;
  --navy: #0B2056;
  --cyan: #1EB2F7;
  --orange: #F75B1E;
  --orange-hover: #E04F15;
  --orange-pressed: #C9440F;
  --blue-hover: #1A50D8;
  --blue-pressed: #1645BB;
  --blue-tint: #E9EFFE;
  --sky-tint: #E9F7FE;
  --bg-canvas: #F3F4F6;
  --bg-subtle: #EDEFF1;
  --text: #0B1E33;
  --text-2: #656E79;
  --text-3: #8793A1;
  --border: #DADEE2;
  --white: #FFFFFF;

  --font-title: 'NanumSquare Neo', 'Pretendard Variable', sans-serif;
  --font-body: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, sans-serif;

  --gutter: 120px;
  --section-y: 180px;
  --section-gap: 80px;
  --card-gap: 20px;
  --gnb-h: 72px;
}
@media (max-width: 1439px) { :root { --gutter: 48px; --section-y: 140px; } }
@media (max-width: 1023px) { :root { --gutter: 32px; --section-y: 120px; --card-gap: 16px; } }
@media (max-width: 767px)  { :root { --gutter: 20px; --section-y: 80px; --section-gap: 40px; --card-gap: 12px; --gnb-h: 56px; } }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--gnb-h); -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--white); color: var(--text); font-family: var(--font-body); font-size: 16px; line-height: 1.5; word-break: keep-all; -webkit-font-smoothing: antialiased; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img, video, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }

.container { width: 100%; max-width: calc(1200px + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section-y); }
.section--navy { background: var(--navy); color: var(--white); }
.section--canvas { background: var(--bg-canvas); }
.section--tint { background: var(--blue-tint); }

.section-title { font-family: var(--font-title); font-size: 48px; font-weight: 400; line-height: 1.3; letter-spacing: -0.02em; text-align: center; }
.section-title strong, .em { font-weight: 900; }
.em--blue { color: var(--blue); }
.em--cyan { color: var(--cyan); }
.em--orange { color: var(--orange); }
.section-lead { margin-top: 16px; color: var(--text-2); font-size: 19px; line-height: 1.6; text-align: center; }
.section-head { margin-bottom: var(--section-gap); }
@media (max-width: 1439px) { .section-title { font-size: 42px; } }
@media (max-width: 1023px) { .section-title { font-size: 36px; } }
@media (max-width: 767px)  { .section-title { font-size: 24px; } .section-lead { font-size: 14px; } }

/* 버튼 */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 56px; padding-inline: 32px; border-radius: 10px; border: 1px solid transparent; font-family: var(--font-body); font-size: 17px; font-weight: 700; line-height: 1; white-space: nowrap; transition: background-color .15s, border-color .15s; }
.btn--m { height: 40px; padding-inline: 16px; font-size: 15px; }
.btn--block { width: 100%; }
.btn--primary { background: var(--orange); color: var(--white); }
.btn--primary:hover { background: var(--orange-hover); }
.btn--primary:active { background: var(--orange-pressed); }
.btn--blue { background: var(--blue); color: var(--white); }
.btn--blue:hover { background: var(--blue-hover); }
.btn--blue:active { background: var(--blue-pressed); }
.btn--ghost-dark { color: var(--white); border-color: rgba(255,255,255,.5); }
.btn--ghost-dark:hover { background: rgba(255,255,255,.10); }
.btn--ghost-dark:active { background: rgba(255,255,255,.18); }
.btn--ghost-light { color: var(--text); border-color: var(--text-3); background: var(--white); }
.btn--ghost-light:hover { background: var(--bg-canvas); }
.btn--ghost-light:active { background: var(--bg-subtle); }
.btn[disabled], .btn[aria-disabled="true"] { background: var(--border); color: var(--text-3); border-color: transparent; cursor: not-allowed; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; box-shadow: 0 0 0 2px var(--white); }

/* 네이비 위 글라스 카드 (S2-2, S5 공용) */
.glass { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.12); border-radius: 16px; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }

.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}