/* =========================================================
   ARTISH · responsive.css
   Breakpoints: 1280 / 1024 / 768 / 480
   Mobile-first 보완
   ========================================================= */

/* ---------- LARGE TABLET (≤ 1280px) ---------- */
@media (max-width: 1280px) {
  :root {
    --container-pad-x: 32px;
    --section-y: 96px;
  }
  .header-inner { gap: 16px; }
  .nav ul { gap: 4px 18px; }
  .header-search { display: none; }

  .hero-title { font-size: 48px; }
  .final-title { font-size: 36px; }
}

/* ---------- TABLET (≤ 1024px) ---------- */
@media (max-width: 1024px) {
  :root {
    --container-pad-x: 32px;
    --section-y: 80px;
  }

  .section { padding: var(--section-y) 0; }
  .section-head { margin-bottom: 40px; }
  .section-title { font-size: 32px; }

  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .insta-grid { grid-template-columns: repeat(3, 1fr); }

  .nav { display: none; }
  .menu-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px;
    border-radius: 50%;
    transition: background var(--t);
  }
  .menu-toggle:hover { background: var(--bg-soft); }
  .menu-toggle img, .menu-toggle svg { width: 22px; height: 22px; }

  .artist-feature { grid-template-columns: 1fr; }
  .footer-inner { grid-template-columns: 1fr; gap: 40px; }
  .footer-links { justify-content: flex-start; gap: 60px; }

  .hero { min-height: 70vh; }
  .hero-title { font-size: 40px; }
  .hero-content { padding: 80px 0; }

  .decision-fields { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; }

  .toolbar { flex-direction: column; align-items: stretch; }
  .toolbar-sort { align-self: flex-end; }
}

/* ---------- MOBILE (≤ 768px) ---------- */
@media (max-width: 768px) {
  :root {
    --container-pad-x: 20px;
    --section-y: 64px;
    --header-height: 60px;
    --header-offset: 76px;
  }

  .section { padding: var(--section-y) 0; }
  .section-head { margin-bottom: 32px; max-width: 100%; }
  .section-title { font-size: 24px; }
  .section-desc { font-size: 14px; }
  .section-more { margin-top: 32px; }

  .grid, .grid-2, .grid-3, .grid-4, .product-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .insta-grid { grid-template-columns: repeat(2, 1fr); }

  /* HERO */
  .hero { min-height: 64vh; }
  .hero-content { padding: 56px 0; max-width: 100%; }
  .hero-title { font-size: 28px; }
  .hero-desc { font-size: 14px; margin-bottom: 24px; }
  .hero-cta { flex-direction: column; align-items: stretch; gap: 8px; }
  .hero-cta .btn { width: 100%; }
  .hero-scroll { display: none; }

  /* CARDS */
  .card { padding: 14px; }
  .product-card { padding: 14px; }
  .product-card .actions { flex-wrap: wrap; }
  .product-card .actions .btn.primary { flex: 1 0 100%; order: 3; margin-top: 8px; }

  /* PATH */
  .path-card { padding: 24px 20px; }

  /* TRUST */
  .trust-number { font-size: 32px; }
  .trust-card { padding: 28px 16px; }

  /* DECISION */
  .decision-field { padding: 18px; }
  .decision-actions { flex-direction: column; align-items: stretch; }
  .decision-actions .btn { width: 100%; }
  .decision-reset { width: 100%; }

  /* FINAL CTA */
  .final-title { font-size: 28px; }
  .final-cta-actions { flex-direction: column; align-items: stretch; }
  .final-cta-actions .btn { width: 100%; }

  /* COMPARE BAR */
  .compare-inner {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding: 0 20px;
  }
  .compare-info, .compare-list, .compare-actions { width: 100%; }
  .compare-actions { justify-content: stretch; }
  .compare-actions .btn { flex: 1; min-width: 0; }
  .compare-live-msg { position: static; margin-top: 4px; }

  /* FOOTER */
  .footer { padding: 56px 0 32px; }
  .footer-links { flex-direction: column; gap: 32px; }
  .footer-legal-strip { grid-template-columns: 1fr; gap: 12px; }

  /* HEADER — touch target WCAG 2.5.5 AAA 권장 (44px) 근접화 */
  .header-inner { min-height: var(--header-height); }
  .logo a { font-size: 20px; letter-spacing: 0.1em; }
  .icon-btn { width: 44px; height: 44px; }
  .icon-btn img, .icon-btn svg { width: 20px; height: 20px; }
  .header-icons { gap: 2px; }

  /* TOOLBAR */
  .toolbar-filters { width: 100%; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; }
  .filter-btn { white-space: nowrap; }

  /* BACK TO TOP */
  .back-to-top {
    right: 16px; bottom: 80px;
    width: 40px; height: 40px;
    font-size: 10px;
  }
  body.compare-bar-open .back-to-top { bottom: 200px; }

  /* SEARCH DIALOG */
  .search-dialog { width: calc(100vw - 32px); }
  .search-dialog-inner { padding: 24px 18px 18px; }
}

/* ---------- SMALL MOBILE (≤ 480px) ---------- */
@media (max-width: 480px) {
  :root { --container-pad-x: 16px; }
  .hero-title { font-size: 24px; }
  .section-title { font-size: 22px; }
  .final-title { font-size: 24px; }
}

/* ---------- PRINT ---------- */
@media print {
  .header, .compare-bar, .back-to-top, .hero-scroll, .menu-toggle, .header-icons { display: none !important; }
  .section { padding: 24px 0; }
  body { background: #fff; color: #000; }
}