/* 페이지 레이아웃, 컨테이너, 그리드, 반응형 구조 (컴포넌트 스타일 금지) */

/* =========================================================
   브레이크포인트 기준
   480px  — 스몰 모바일 이상
   768px  — 태블릿 이상
   1024px — 데스크탑 이상
   1440px — 와이드 스크린 이상
   ========================================================= */

/* =========================================================
   컨테이너 — 수평 여백 + 최대 너비
   ========================================================= */
.container {
  width: 100%;
  max-width: var(--layout-max-width);
  margin-inline: auto;
  padding-inline: var(--space-4); /* 16px */
}

@media (min-width: 480px) {
  .container {
    padding-inline: var(--space-5); /* 20px */
  }
}

@media (min-width: 768px) {
  .container {
    padding-inline: var(--space-6); /* 24px */
  }
}

@media (min-width: 1024px) {
  .container {
    padding-inline: var(--space-8); /* 32px */
  }
}

/* =========================================================
   메인 페이지 — 전체 래퍼
   ========================================================= */
.page-main {
  max-width: var(--layout-max-width);
  margin-inline: auto;
}

/* =========================================================
   히어로 섹션 — 페이지 상단 소개 영역
   ========================================================= */
.hero-section {
  text-align: center;
  padding-block: var(--space-12); /* 48px */
}

@media (min-width: 768px) {
  .hero-section {
    padding-block: var(--space-16); /* 64px */
  }
}

@media (min-width: 1024px) {
  .hero-section {
    padding-block: var(--space-20); /* 80px */
  }
}

/* =========================================================
   계산기 목록 그리드
   ========================================================= */
.calc-grid {
  display: grid;
  grid-template-columns: 1fr; /* 모바일: 1열 */
  gap: var(--space-4); /* 16px */
}

@media (min-width: 480px) {
  .calc-grid {
    grid-template-columns: repeat(2, 1fr); /* 스몰 모바일+: 2열 */
  }
}

@media (min-width: 768px) {
  .calc-grid {
    gap: var(--space-5); /* 20px */
  }
}

@media (min-width: 1024px) {
  .calc-grid {
    grid-template-columns: repeat(3, 1fr); /* 데스크탑+: 3열 */
    gap: var(--space-6); /* 24px */
  }
}

/* =========================================================
   계산기 상세 페이지 — 래퍼
   ========================================================= */
.calc-page {
  max-width: var(--layout-max-width);
  margin-inline: auto;
  padding-inline: var(--space-4); /* 16px */
}

@media (min-width: 480px) {
  .calc-page {
    padding-inline: var(--space-5); /* 20px */
  }
}

@media (min-width: 768px) {
  .calc-page {
    padding-inline: var(--space-6); /* 24px */
  }
}

@media (min-width: 1024px) {
  .calc-page {
    padding-inline: var(--space-8); /* 32px */
  }
}

/* =========================================================
   계산기 상세 페이지 — 본문 레이아웃 (메인 + 사이드바)
   ========================================================= */
.calc-page__layout {
  display: flex;
  flex-direction: column;
  gap: var(--space-5); /* 20px */
  padding-block: var(--space-6); /* 24px */
}

@media (min-width: 768px) {
  .calc-page__layout {
    padding-block: var(--space-8); /* 32px */
    gap: var(--space-6); /* 24px */
  }
}

@media (min-width: 1024px) {
  .calc-page__layout {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--space-8); /* 32px */
    padding-block: var(--space-10); /* 40px */
  }
}

/* 계산기 본문 영역 */
.calc-page__main {
  width: 100%;
  min-width: 0; /* flex child 오버플로 방지 */
}

@media (min-width: 1024px) {
  .calc-page__main {
    flex: 1;
  }
}

/* 사이드바 영역 (광고 + 관련 계산기) */
.calc-page__sidebar {
  width: 100%;
  flex-shrink: 0;
}

@media (min-width: 1024px) {
  .calc-page__sidebar {
    width: var(--layout-sidebar-width); /* 300px */
    position: sticky;
    top: var(--layout-sticky-top); /* 80px */
    align-self: flex-start;
  }
}

/* =========================================================
   섹션 간격 유틸리티
   ========================================================= */
.section-gap {
  margin-block-end: var(--space-6); /* 24px */
}

@media (min-width: 768px) {
  .section-gap {
    margin-block-end: var(--space-8); /* 32px */
  }
}

/* =========================================================
   시각적으로 숨기기 (스크린 리더용)
   ========================================================= */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}