/* ========================================
   ADFLOW SKIN - responsive.css
   반응형 브레이크포인트
   ======================================== */

/* Tablet: 768px ~ 1023px */
@media (max-width: 1023px) {
  .stats-bar {
    grid-template-columns: repeat(2, 1fr);
  }
  .services-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .process-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Mobile: ~ 768px */
@media (max-width: 768px) {
  .nav-links { display: none; }
  .mobile-toggle { display: block; }

  /* Mobile menu open */
  .nav-links.open {
    display: flex !important;
    flex-direction: column;
    position: absolute;
    top: 64px; left: 0; right: 0;
    background: var(--bg);
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
    z-index: 200;
    gap: 12px;
  }

  .hero { padding: 100px 0 40px; }
  .hero h1 { font-size: clamp(22px, 6vw, 32px); }

  .stats-bar { grid-template-columns: repeat(2, 1fr); }

  .contact-section { grid-template-columns: 1fr; }

  .cta-banner { padding: 40px 20px; margin: 0 10px; }
}

/* Small Mobile: ~ 480px */
@media (max-width: 480px) {
  .form-grid { grid-template-columns: 1fr; }

  .stats-bar { grid-template-columns: 1fr 1fr; gap: 10px; }
  .stat-card { padding: 14px; }
  .stat-card .val { font-size: 22px; }

  .services-grid,
  .process-grid,
  .reviews-grid {
    grid-template-columns: 1fr;
  }

  .hero-btns { flex-direction: column; align-items: center; }
  .btn-primary, .btn-secondary { width: 100%; text-align: center; }

  footer .container { flex-direction: column; text-align: center; }
}

/* ========================================
   MONO SKIN - 반응형 보완
   ======================================== */
@media (max-width: 1023px) {
  .mono-portfolio-grid { grid-template-columns: 1fr 1fr; gap: 24px; }
  .mono-intro-text { font-size: 22px; }
  .mono-service-list .service-card { padding: 24px; }
}

@media (max-width: 768px) {
  .mono-hero { padding: 140px 0 80px; }
  .mono-hero h1 { font-size: clamp(24px, 6vw, 32px); }
  .mono-intro-text { font-size: 18px; line-height: 1.7; padding: 40px 0; }
  .mono-portfolio-grid { grid-template-columns: 1fr; gap: 20px; }
  .mono-folio-thumb { height: 220px; }
  .mono-folio-thumb img { width: 100%; height: 100%; object-fit: cover; }
  .mono-section-label { font-size: 10px; letter-spacing: 4px; margin-bottom: 12px; }
  .mono-timeline::before { left: 20px; }
  .mono-service-list .service-card { flex-direction: column; gap: 12px; }
}

@media (max-width: 480px) {
  .mono-hero h1 { font-size: 22px; }
  .mono-intro-text { font-size: 16px; padding: 30px 0; }
  .mono-folio-thumb { height: 180px; }
  .mono-folio-info h3 { font-size: 16px; }
  .mono-folio-info p { font-size: 13px; }
}