/*
 * responsive.css — 블로그 글수집 반응형 (mobile-first 보정)
 */

@media (max-width: 1024px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .hero-grid { gap: 40px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 880px) {
  section { padding: 62px 0; }

  /* 헤더 → 모바일 내비 */
  .nav-toggle { display: block; }
  .main-nav {
    position: fixed; top: 68px; right: 0; left: 0; z-index: 99;
    background: rgba(11, 16, 38, .97); backdrop-filter: blur(16px);
    max-height: 0; overflow: hidden; transition: max-height .35s ease;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
  }
  .main-nav.open { max-height: 480px; }
  .main-nav ul { flex-direction: column; align-items: stretch; padding: 18px 22px 26px; gap: 4px; }
  .main-nav a { padding: 13px 16px; font-size: 16px; }
  .main-nav .nav-cta { margin: 10px 0 0; text-align: center; justify-content: center; display: block; }
  .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

  /* 홈 히어로 1열 */
  .hero-cosmos { padding: 64px 0 48px; }
  .hero-grid { grid-template-columns: 1fr; gap: 42px; }
  .hero-copy > p { max-width: none; }
  .hero-stats { gap: 24px; }

  .grid-3 { grid-template-columns: 1fr; }
  .grid-2 { grid-template-columns: 1fr; }
  .steps .card { margin-top: 14px; }

  .page-hero { padding: 62px 0 52px; }
  .cta-band { padding: 46px 24px; }
}

@media (max-width: 560px) {
  .container { padding: 0 16px; }
  .grid-4 { grid-template-columns: 1fr; }
  .hero-copy h1 { font-size: 30px; }
  .collect-form { flex-direction: column; }
  .collect-form button { width: 100%; justify-content: center; }
  .hero-stats .stat b { font-size: 22px; }
  .bd-arrow { width: 38px; height: 38px; }
  .footer-grid { grid-template-columns: 1fr; gap: 28px; }
  .footer-bottom { flex-direction: column; text-align: center; }
  .price-card .amount { font-size: 34px; }
  .logo-text { font-size: 17px; }
}