/*
 * ONSOFT DS B — pages v0.1 (페이지 전용 배치)
 * 의존: tokens.css, base.css, components.css (이 파일은 마지막에 로드)
 * 규칙: 토큰만 사용, HEX 직접 기입 금지 (DS §4-1)
 */

/* ===== 페이지 골격: 짧은 페이지에서도 푸터를 하단에 고정 ===== */
body {
  display: flex;
  flex-direction: column;
}
main {
  flex: 1 0 auto;
}
/* 본문 바로가기로 main에 포커스가 옮겨질 때 영역 전체 테두리는 표시하지 않음 */
#main:focus,
#main:focus-visible {
  outline: none;
}

/* 심볼 SVG 비율(약 2.2:1)을 DS 브랜드 마크 상자(52×26)에 맞춤 */
.brand__mark {
  object-fit: contain;
}

/* ===== 간격 보조 (stack 간격 변형) ===== */
.stack--sm {
  --stack-gap: var(--sp-4);
}
.stack--md {
  --stack-gap: var(--sp-8);
}
.stack--lg {
  --stack-gap: var(--sp-10);
}

/* ===== 히어로 ===== */
.hero {
  padding-block: var(--section-y-hero) var(--section-y);
}
.hero__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-7);
  text-align: center;
}
.hero__inner h1 {
  max-width: 900px;
}
.hero__lead {
  max-width: 640px;
  font-size: var(--fs-lead);
  color: var(--text-muted);
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-3);
}
.hero__code {
  max-width: 760px;
  margin-top: var(--sp-6);
}
@media (max-width: 479.98px) {
  .hero__lead {
    font-size: var(--fs-body);
  }
  .hero__actions {
    width: 100%;
  }
  .hero__actions .btn {
    flex: 1 1 auto;
  }
}

/* ===== 섹션별 여백 (목업 실측: features 32/96, company 0/88) ===== */
.features {
  padding-block: var(--sp-8) var(--section-y-lg);
}
.company {
  padding-block: 0 var(--section-y);
}

/* 동작 구조 4단계: 태블릿 폭에서 3+1 배치 대신 2×2 */
@media (min-width: 560px) and (max-width: 1023.98px) {
  .steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* 고객사 워드마크: 데스크톱 7열 2행(components.css), 좁은 화면 2열 */
@media (max-width: 859.98px) {
  .logo-wall {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
@media (max-width: 479.98px) {
  .logo-wall {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ===== 하위 페이지 (demo · support · 404) ===== */
.page {
  padding-block: var(--section-y-hero) var(--section-y-lg);
}
.page__title {
  font-size: var(--fs-h2);
  line-height: 1.3;
  letter-spacing: -0.01em;
}
.card h2 {
  font-size: var(--fs-h3);
  font-weight: var(--fw-semibold);
}
.card__action {
  margin-top: auto;
  padding-top: var(--sp-2);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
}
.card__path {
  overflow-wrap: anywhere;
}

/* [확정 필요] 표지 — 미확정 사실 표기용 소형 배지 */
.badge--todo {
  padding: 2px 8px;
  gap: 0;
  font-size: var(--fs-label);
  border-style: dashed;
}

/* ===== 영상 캡션 (한 줄) ===== */
.video-caption {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

/* ===== 푸터 ===== */
.site-footer__inner {
  align-items: center;
}
.site-footer__inner > p {
  margin: 0;
}
.site-footer__brand {
  margin-right: var(--sp-2);
}