/* ===== N·TOKTOK MOBILE RESPONSIVENESS FIXES ===== */
/* Critical mobile improvements based on frontend-excellence audit */

/* ===== 1. WCAG 2.5.5 Touch Target Compliance (CRITICAL) ===== */
@media (pointer: coarse) {
  .menu-button {
    padding: 14px 20px;
    min-height: 44px;
    min-width: 44px;
  }

  .btn {
    padding: 14px 28px;
    min-height: 44px;
    min-width: 120px;
  }

  .site-nav a {
    padding: 12px 16px;
    min-height: 44px;
    width: 100%;
    display: flex;
    align-items: center;
  }

  .footer-links a {
    padding: 12px 8px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
}

/* ===== 2. Mobile Typography Refinements ===== */
@media (max-width: 768px) {
  /* h1 크기는 styles.css에서 관리 - 중복 제거 */
  .hero h1 {
    margin-bottom: 24px;
  }

  .lead, .section-lead {
    font-size: 1rem;
    line-height: 1.75;
  }

  .story-text p {
    line-height: 1.9;
    font-size: 1rem;
  }

  .story-text h2 {
    font-size: 1.5rem;
    line-height: 1.35;
  }
}

/* ===== 3. Layout Consistency - LEFT ALIGN on Mobile ===== */
@media (max-width: 768px) {
  /* 한국어 텍스트 좌측 정렬 최적화 */
  .story-text {
    text-align: left;
    padding: 0 4px;
    margin: 0;
  }

  .story-text p,
  .story-text h2,
  .story-tag,
  .story-note {
    text-align: left;
    margin-left: 0;
    margin-right: 0;
  }

  /* Remove card offsets on mobile */
  .feature-card:nth-child(2),
  .feature-card:nth-child(3) {
    transform: translateY(0);
  }

  .feature-card:hover {
    transform: translateY(-4px);
  }
}

/* ===== 4. Performance Optimizations (CRITICAL) ===== */
@media (max-width: 768px) {
  /* Reduce expensive blur effects - 성능 최적화 (keep !important for override) */
  body::before,
  body::after {
    animation: none !important;
    filter: blur(20px) !important;
    opacity: 0.4 !important;
  }

  /* Disable particle system on mobile for performance */
  .stars-container {
    display: none !important;
  }

  /* Reduce hero animation complexity */
  .hero-beam {
    filter: blur(24px) !important;
    opacity: 0.6 !important;
  }

  .hero-stardust {
    filter: blur(12px) !important;
    opacity: 0.5 !important;
  }

  /* Simplify decorative elements */
  .hero::before,
  .hero::after,
  .story::before {
    display: none !important;
  }
}

/* ===== 5. Very Small Screens (<480px) ===== */
@media (max-width: 480px) {
  /* Remove all background effects for performance */
  body::before,
  body::after {
    display: none !important;
  }

  /* Tighter container */
  .container {
    width: 96vw;
    padding: 0 2vw;
  }

  /* Reduce card padding */
  .work-card,
  .principle-card,
  .feature-card,
  .form-card {
    padding: 18px 14px;
  }

  /* Adjust vertical spacing */
  .hero {
    padding: clamp(60px, 12vh, 100px) 0;
  }

  .story {
    padding: clamp(64px, 14vh, 120px) 0;
  }

  /* Smaller hero title on very small screens */
  .hero h1 {
    font-size: clamp(1.75rem, 9vw, 2.5rem);
  }
}

/* ===== 6. Button Layout Improvements ===== */
@media (max-width: 720px) {
  .cta-group {
    flex-direction: column;
    width: 100%;
    gap: 16px;
  }

  .cta-group .btn {
    width: 100%;
    min-width: 200px;
  }

  /* Ensure buttons are accessible */
  .btn {
    font-size: 1rem;
    padding: 16px 24px;
    min-height: 48px;
  }
}

/* ===== 7. Prevent Horizontal Scroll (CRITICAL) ===== */
@media (max-width: 768px) {
  .hero-beam,
  .hero-visual,
  .story::before,
  section {
    max-width: 100vw;
    overflow-x: clip;
  }

  /* Ensure no element causes overflow */
  * {
    max-width: 100%;
  }

  img, svg {
    max-width: 100%;
    height: auto;
  }
}

/* ===== 8. Improved Focus States for Accessibility ===== */
@media (max-width: 768px) {
  /* 접근성 중요: !important 유지 */
  button:focus-visible,
  a:focus-visible,
  .btn:focus-visible {
    outline: 3px solid var(--accent-gold) !important;
    outline-offset: 4px;
    border-radius: 8px;
  }
}

/* ===== 9. Navigation Menu Improvements ===== */
@media (max-width: 768px) {
  .site-nav {
    padding: 24px 20px;
  }

  .site-nav a {
    padding: 14px 12px;
    font-size: 1rem;
    min-height: 48px;
  }

  .menu-button {
    font-size: 0.9rem;
    font-weight: 600;
  }
}

/* ===== 10. Footer Mobile Centering ===== */
@media (max-width: 768px) {
  .site-footer {
    text-align: center;
  }

  .footer-content {
    align-items: center;
    text-align: center;
  }

  .footer-logo,
  .footer-copy,
  .footer-contact {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }

  .footer-links {
    justify-content: center;
  }

  .footer-note {
    text-align: center;
  }
}

/* ===== 11. Card Grid Layouts ===== */
@media (max-width: 768px) {
  .feature-grid,
  .principle-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .feature-card,
  .principle-card {
    margin: 0;
  }
}

/* ===== 12. Reduce Motion for Performance & Accessibility ===== */
@media (prefers-reduced-motion: reduce) {
  /* 애니메이션 감소 - 접근성 중요: !important 유지 */
  .feature-card:nth-child(2),
  .feature-card:nth-child(3),
  .feature-card:hover {
    transform: none !important;
  }

  .parallax-element,
  [data-parallax] {
    transform: none !important;
  }

  .reveal {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ===== 13. Epilogue CTA Buttons ===== */
@media (max-width: 768px) {
  .epilogue-cta {
    flex-direction: column;
    gap: 16px;
    width: 100%;
  }

  .epilogue-cta .btn {
    width: 100%;
    max-width: 320px;
    margin: 0 auto;
  }
}

/* ===== 14. Manifesto Quote Responsive ===== */
@media (max-width: 768px) {
  .manifesto-quote {
    font-size: clamp(1.25rem, 4vw, 1.75rem);
    padding-left: 20px;
    border-left-width: 2px;
  }
}

/* ===== 15. Section Intro Centering ===== */
@media (max-width: 768px) {
  .section-intro {
    text-align: center;
  }

  .section-intro h2 {
    margin-left: auto;
    margin-right: auto;
  }

  .section-intro .section-lead {
    margin-left: auto;
    margin-right: auto;
  }
}

/* ===== 16. Touch-Friendly Spacing ===== */
@media (max-width: 768px) {
  /* Increase spacing between interactive elements */
  .site-nav a + a {
    margin-top: 4px;
  }

  .footer-links a {
    margin: 8px 6px;
  }

  /* Ensure adequate tap targets */
  a, button {
    position: relative;
  }

  a::after, button::after {
    content: '';
    position: absolute;
    top: -8px;
    left: -8px;
    right: -8px;
    bottom: -8px;
    min-width: 44px;
    min-height: 44px;
  }
}

/* ===== 17. Optimize Font Loading for Performance ===== */
@media (max-width: 768px) {
  /* Reduce font weights loaded */
  body {
    font-weight: 400;
  }

  strong, b, .story-tag, h1, h2, h3 {
    font-weight: 600;
  }
}

/* ===== 18. QR & Consult Pages Mobile ===== */
@media (max-width: 768px) {
  .qr-card {
    padding: 32px 24px;
    text-align: center;
  }

  .qr-title {
    font-size: 1.75rem;
  }

  .qr-button {
    width: 100%;
    max-width: 280px;
  }
}