/* 사이트 공통 바탕 스타일. 값은 모두 디자인 시스템 토큰에서 가져온다. */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--background-normal);
  color: var(--label-normal);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  word-break: keep-all; /* 한글을 단어 중간에서 끊지 않는다 */
  overflow-wrap: anywhere;
}
h1, h2, h3, p { margin: 0; }
a { color: inherit; }
img { max-width: 100%; }

.wrap { max-width: 1100px; margin: 0 auto; padding-inline: var(--space-20); }
.section { padding-block: calc(var(--space-48) * 2); }
.section--alt { background: var(--background-alternative); }
.muted { color: var(--label-alternative); }
.accent-text { color: var(--primary-text); }
.num { font-family: var(--font-display); }

/* 늘 네이비인 띠(히어로·마무리). 다크 테마에서는 바탕과 같아지므로 경계선을 둔다 */
.band-navy { background: var(--startus-navy); color: var(--static-white); }
.band-navy .muted { color: var(--slate); }
.band-navy .eyebrow { color: var(--primary-normal); }
:root[data-theme="dark"] .band-navy { box-shadow: inset 0 -1px 0 var(--line-alternative); }

/* 로고: 지면에 맞는 파일만 보이게 한다 */
.logo-dark { display: none; }
:root[data-theme="dark"] .logo-light { display: none; }
:root[data-theme="dark"] .logo-dark { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .logo-light { display: none; }
  :root:not([data-theme="light"]) .logo-dark { display: block; }
}

/* GNB 위에 고정 */
.st-gnb { position: sticky; top: 0; z-index: 10; }
.st-gnb .st-ibtn { width: 40px; height: 40px; }

/* 공통 카드 */
.panel {
  background: var(--background-elevated);
  border-radius: var(--radius-16);
  box-shadow: var(--shadow-normal);
  padding: var(--space-24);
}
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-20); }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-20); }
.icon-tile {
  width: 48px; height: 48px; border-radius: var(--radius-12);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--fill-normal); color: var(--label-normal);
}
.list-check { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-8); }
.list-check li { display: flex; gap: var(--space-8); align-items: flex-start; }
.list-check svg { color: var(--label-alternative); margin-top: 2px; }

/* 고정 메뉴에 섹션 제목이 가리지 않게 */
section[id] { scroll-margin-top: 60px; }

@media (max-width: 860px) {
  .section { padding-block: calc(var(--space-32) * 2); }
  .grid-3, .grid-2 { grid-template-columns: 1fr; }
  .st-gnb__menu { display: none; }
}