/* ============================================================
   소리튠 자동화 (SoriTune Automation) — Responsive Stylesheet
   Mobile-first breakpoints: 1200 / 992 / 768 / 576 / 375
   ============================================================ */

/* ----------------------------------------------------------
   Breakpoint: max-width 1200px — Large Tablets / Small Desktops
   ---------------------------------------------------------- */
@media (max-width: 1200px) {
  :root {
    --fs-6xl: 3.75rem;
    --fs-5xl: 3rem;
    --fs-4xl: 2.5rem;
  }

  .container {
    max-width: 960px;
  }

  .container-lg {
    max-width: 1100px;
  }

  /* Grid fallbacks */
  .catalog-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .feature-steps {
    gap: var(--space-lg);
  }

  .feature-step::after {
    left: calc(50% + 32px);
    width: calc(100% - 64px);
  }

  .footer__grid {
    grid-template-columns: 1.3fr 1fr 1fr 1fr;
    gap: var(--space-xl);
  }

  /* Pricing */
  .pricing-card--popular {
    transform: scale(1.03);
  }

  /* Timeline */
  .timeline__content {
    width: calc(50% - 32px);
  }
}

/* ----------------------------------------------------------
   Breakpoint: max-width 992px — Tablets
   ---------------------------------------------------------- */
@media (max-width: 992px) {
  :root {
    --fs-6xl: 3rem;
    --fs-5xl: 2.5rem;
    --fs-4xl: 2rem;
    --fs-3xl: 1.75rem;
  }

  .section {
    padding: var(--space-4xl) 0;
  }

  .container {
    max-width: 720px;
  }

  /* Header — show hamburger, hide nav */
  .nav {
    display: none;
  }

  .hamburger {
    display: flex;
  }

  .header__inner {
    height: 64px;
  }

  .header__cta {
    display: none;
  }

  /* Hero */
  .hero {
    min-height: 500px;
    max-height: 800px;
  }

  .hero__title {
    font-size: var(--fs-4xl);
    max-width: 540px;
  }

  .hero__arrow {
    width: 40px;
    height: 40px;
  }

  .hero__arrow--prev { left: 16px; }
  .hero__arrow--next { right: 16px; }

  /* Grids → 2 columns */
  .catalog-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-md);
  }

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

  .service-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-lg);
  }

  .feature-steps {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-2xl) var(--space-xl);
  }

  .feature-step::after {
    display: none;
  }

  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-lg);
  }

  .testimonial-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-lg);
  }

  .blog-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-lg);
  }

  .pricing-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-lg);
  }

  .pricing-card--popular {
    transform: none;
    grid-column: span 2;
    max-width: 400px;
    margin: 0 auto;
    width: 100%;
  }

  /* Contact */
  .contact-grid {
    grid-template-columns: 1fr;
    gap: var(--space-2xl);
  }

  /* Footer */
  .footer__grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-xl);
  }

  .footer__brand {
    grid-column: span 2;
  }

  /* App mockup */
  .app-mockup-wrapper {
    flex-direction: column;
    gap: var(--space-2xl);
    text-align: center;
  }

  /* Timeline → single column */
  .timeline::before {
    left: 20px;
  }

  .timeline__item,
  .timeline__item:nth-child(even) {
    flex-direction: row;
    padding-left: 52px;
  }

  .timeline__content {
    width: 100%;
  }

  .timeline__dot {
    left: 20px;
  }

  /* Page header */
  .page-header {
    padding: var(--space-4xl) 0 var(--space-3xl);
  }
}

/* ----------------------------------------------------------
   Breakpoint: max-width 768px — Small Tablets / Large Phones
   ---------------------------------------------------------- */
@media (max-width: 768px) {
  :root {
    --fs-6xl: 2.5rem;
    --fs-5xl: 2rem;
    --fs-4xl: 1.75rem;
    --fs-3xl: 1.5rem;
    --fs-2xl: 1.25rem;
  }

  .section {
    padding: var(--space-3xl) 0;
  }

  .section__header {
    margin-bottom: var(--space-2xl);
  }

  .container {
    padding: 0 var(--space-lg);
  }

  /* Hero */
  .hero {
    height: 80vh;
    min-height: 440px;
    max-height: 700px;
  }

  .hero__label {
    font-size: var(--fs-xs);
  }

  .hero__title {
    font-size: var(--fs-3xl);
  }

  .hero__desc {
    font-size: var(--fs-sm);
  }

  .hero__actions {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-sm);
  }

  .hero__actions .btn {
    width: 100%;
    justify-content: center;
  }

  .hero__pagination {
    bottom: 24px;
  }

  .hero__arrow {
    display: none;
  }

  /* Service cards */
  .service-card {
    padding: var(--space-xl);
  }

  /* Stats */
  .stat-item__number {
    font-size: var(--fs-4xl);
  }

  /* Phone mockup */
  .phone-frame {
    width: 240px;
    height: 500px;
    border-radius: 32px;
    padding: 10px;
  }

  .phone-frame__screen {
    border-radius: 24px;
  }

  .phone-frame__notch {
    width: 100px;
    height: 24px;
  }

  /* CTA */
  .cta-section {
    padding: var(--space-4xl) 0;
  }

  .cta-section__actions {
    flex-direction: column;
  }

  .cta-section__actions .btn {
    width: 100%;
  }

  /* Blog cards */
  .blog-card__body {
    padding: var(--space-md);
  }

  /* Testimonials */
  .testimonial-card {
    padding: var(--space-xl);
  }

  /* Pricing cards */
  .pricing-grid {
    grid-template-columns: 1fr;
    max-width: 400px;
    margin: 0 auto;
  }

  .pricing-card--popular {
    grid-column: auto;
    max-width: none;
  }

  /* Table horizontal scroll */
  .table-wrapper {
    border-radius: var(--radius-sm);
  }

  .table th,
  .table td {
    padding: var(--space-sm) var(--space-md);
    font-size: var(--fs-xs);
    white-space: nowrap;
  }

  /* Footer */
  .footer__grid {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }

  .footer__brand {
    grid-column: auto;
  }

  .footer__bottom {
    flex-direction: column;
    gap: var(--space-md);
    text-align: center;
  }

  .footer__bottom-links {
    flex-wrap: wrap;
    justify-content: center;
  }

  /* Modal */
  .modal {
    max-width: 100%;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    max-height: 85vh;
  }

  .modal-overlay {
    align-items: flex-end;
    padding: 0;
  }

  /* Toast */
  .toast-container {
    left: var(--space-md);
    right: var(--space-md);
    top: auto;
    bottom: 24px;
  }

  .toast {
    max-width: 100%;
  }

  /* Back to top */
  .back-to-top {
    bottom: 20px;
    right: 20px;
    width: 42px;
    height: 42px;
  }

  /* Accordion */
  .accordion__trigger {
    font-size: var(--fs-base);
    padding: var(--space-md) 0;
  }

  /* Breadcrumb */
  .breadcrumb {
    font-size: var(--fs-xs);
    overflow-x: auto;
    white-space: nowrap;
    padding-bottom: var(--space-sm);
  }
}

/* ----------------------------------------------------------
   Breakpoint: max-width 576px — Phones
   ---------------------------------------------------------- */
@media (max-width: 576px) {
  :root {
    --fs-6xl: 2rem;
    --fs-5xl: 1.75rem;
    --fs-4xl: 1.5rem;
    --fs-3xl: 1.25rem;
    --fs-2xl: 1.125rem;
  }

  .section {
    padding: var(--space-2xl) 0;
  }

  .container {
    padding: 0 var(--space-md);
  }

  /* Header */
  .header__inner {
    height: 56px;
  }

  .header__logo img {
    height: 28px;
  }

  .header__logo-text {
    font-size: var(--fs-base);
  }

  /* Hero */
  .hero {
    height: 70vh;
    min-height: 380px;
    max-height: 600px;
  }

  .hero__content {
    padding-top: 60px;
  }

  .hero__title {
    font-size: var(--fs-2xl);
  }

  /* Catalog grid → single column */
  .catalog-grid,
  .catalog-grid--3,
  .catalog-grid--2 {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }

  /* Service grid → single column */
  .service-grid {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }

  .service-card {
    padding: var(--space-lg);
  }

  .service-card__icon {
    width: 48px;
    height: 48px;
  }

  /* Feature steps → single column */
  .feature-steps {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }

  /* Stats → single column */
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-md);
  }

  .stat-item {
    padding: var(--space-md);
  }

  .stat-item__number {
    font-size: var(--fs-3xl);
  }

  /* Testimonials → single column */
  .testimonial-grid {
    grid-template-columns: 1fr;
  }

  .testimonial-card {
    padding: var(--space-lg);
  }

  /* Blog → single column */
  .blog-grid {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }

  /* Buttons */
  .btn--lg {
    padding: 14px 28px;
    font-size: var(--fs-sm);
  }

  /* Form */
  .form-input,
  .form-textarea,
  .form-select {
    padding: 14px 16px;
    font-size: var(--fs-sm);
  }

  .form-label {
    left: 16px;
    font-size: var(--fs-sm);
  }

  /* Footer newsletter */
  .footer__newsletter-form {
    flex-direction: column;
  }

  .footer__newsletter-btn {
    width: 100%;
    text-align: center;
    padding: 12px;
  }

  /* Mobile nav */
  .mobile-nav {
    width: 100%;
    max-width: 100%;
  }

  /* CTA section */
  .cta-section {
    padding: var(--space-3xl) 0;
  }

  /* Section header */
  .section__title {
    font-size: var(--fs-2xl);
  }

  .section__desc {
    font-size: var(--fs-sm);
  }

  /* Timeline */
  .timeline__item,
  .timeline__item:nth-child(even) {
    padding-left: 44px;
  }

  .timeline::before {
    left: 14px;
  }

  .timeline__dot {
    left: 14px;
    width: 12px;
    height: 12px;
  }

  .timeline__content {
    padding: var(--space-lg);
  }

  /* Page header */
  .page-header {
    padding: var(--space-3xl) 0 var(--space-2xl);
  }

  .page-header__title {
    font-size: var(--fs-2xl);
  }
}

/* ----------------------------------------------------------
   Breakpoint: max-width 375px — Small Phones
   ---------------------------------------------------------- */
@media (max-width: 375px) {
  :root {
    --fs-6xl: 1.75rem;
    --fs-5xl: 1.5rem;
    --fs-4xl: 1.375rem;
    --fs-3xl: 1.125rem;
  }

  .container {
    padding: 0 var(--space-sm);
  }

  .hero__content {
    padding-left: var(--space-sm);
    padding-right: var(--space-sm);
  }

  .hero__title {
    font-size: var(--fs-xl);
    line-height: 1.3;
  }

  .hero__desc {
    font-size: var(--fs-xs);
  }

  .hero__label {
    font-size: 0.65rem;
  }

  /* Service card */
  .service-card {
    padding: var(--space-md);
  }

  .service-card__title {
    font-size: var(--fs-base);
  }

  /* Stat */
  .stat-item__number {
    font-size: var(--fs-2xl);
  }

  .stat-item__label {
    font-size: var(--fs-xs);
  }

  /* Testimonial */
  .testimonial-card__quote {
    font-size: var(--fs-sm);
  }

  /* Accordion */
  .accordion__trigger {
    font-size: var(--fs-sm);
  }

  /* CTA */
  .cta-section__title {
    font-size: var(--fs-xl);
  }

  .cta-section__desc {
    font-size: var(--fs-xs);
  }

  /* Pricing */
  .pricing-card {
    padding: var(--space-lg);
  }

  .pricing-card__price {
    font-size: var(--fs-3xl);
  }

  /* Phone mockup */
  .phone-frame {
    width: 200px;
    height: 420px;
    border-radius: 28px;
  }

  .phone-frame__screen {
    border-radius: 20px;
  }

  /* Footer */
  .footer {
    padding-top: var(--space-2xl);
  }

  .footer__heading {
    font-size: var(--fs-xs);
  }

  .footer__links a {
    font-size: var(--fs-xs);
  }

  .footer__bottom {
    font-size: 0.65rem;
  }

  /* Modal */
  .modal__header {
    padding: var(--space-lg) var(--space-lg) 0;
  }

  .modal__body {
    padding: var(--space-lg);
  }

  .modal__footer {
    padding: 0 var(--space-lg) var(--space-lg);
  }
}

/* ----------------------------------------------------------
   Touch-Friendly & Accessibility Enhancements
   ---------------------------------------------------------- */
@media (pointer: coarse) {
  /* Ensure minimum 44px tap targets */
  .nav__link,
  .nav__dropdown-link,
  .mobile-nav__link,
  .footer__links a,
  .breadcrumb__item a,
  .accordion__trigger,
  .blog-card__read-more {
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  .btn {
    min-height: 44px;
  }

  .btn--sm {
    min-height: 36px;
  }

  .hero__dot {
    width: 14px;
    height: 14px;
  }

  .hero__dot--active {
    width: 36px;
  }

  /* Disable hover effects that don't work well on touch */
  .catalog-card:hover {
    transform: none;
  }

  .service-card:hover {
    transform: none;
  }

  .testimonial-card:hover {
    transform: none;
  }

  .blog-card:hover {
    transform: none;
  }
}

/* ----------------------------------------------------------
   Landscape phones
   ---------------------------------------------------------- */
@media (max-width: 768px) and (orientation: landscape) {
  .hero {
    height: 100vh;
    min-height: 320px;
    max-height: 500px;
  }

  .hero__title {
    font-size: var(--fs-2xl);
  }

  .hero__desc {
    display: none;
  }

  .hero__actions {
    flex-direction: row;
  }

  .hero__actions .btn {
    width: auto;
  }
}

/* ----------------------------------------------------------
   High-resolution (retina) screens
   ---------------------------------------------------------- */
@media (-webkit-min-device-pixel-ratio: 2),
       (min-resolution: 192dpi) {
  .header__logo img {
    image-rendering: -webkit-optimize-contrast;
  }
}

/* ----------------------------------------------------------
   Print Styles
   ---------------------------------------------------------- */
@media print {
  .header,
  .footer,
  .back-to-top,
  .toast-container,
  .modal-overlay,
  .hero__arrow,
  .hero__pagination,
  .hamburger,
  .mobile-nav,
  .mobile-nav-overlay,
  .cta-section {
    display: none !important;
  }

  body {
    color: #000;
    background: #fff;
    font-size: 12pt;
    line-height: 1.5;
  }

  .container {
    max-width: 100%;
    padding: 0;
  }

  .section {
    padding: 1rem 0;
    page-break-inside: avoid;
  }

  a {
    color: #000;
    text-decoration: underline;
  }

  a[href]::after {
    content: ' (' attr(href) ')';
    font-size: 0.8em;
    color: #555;
  }

  img {
    max-width: 100% !important;
  }

  .catalog-grid,
  .service-grid,
  .blog-grid,
  .testimonial-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}



/* ============================================================
   HOME PAGE & ABOUT PAGE — Responsive Rules for New Classes
   ============================================================ */

/* --- max-width 1200px --- */
@media (max-width: 1200px) {
  .catalog-card--wide { grid-column: span 2; }
  .values-grid { grid-template-columns: repeat(2, 1fr); }
  .team-grid { grid-template-columns: repeat(2, 1fr); }
  .app-preview-grid { gap: 48px; }
}

/* --- max-width 992px --- */
@media (max-width: 992px) {
  .slider-viewport { height: 70vh; min-height: 420px; max-height: 700px; }
  .slide-content { padding: 0 32px; }
  .process-timeline { flex-direction: column; gap: 0; }
  .process-step { flex-direction: row; text-align: left; gap: 16px; }
  .process-step__connector { flex-direction: column; width: 48px; min-width: 48px; margin-bottom: 0; }
  .process-step__line { width: 2px; height: 24px; flex: none; }
  .process-step__card { flex: 1; }
  .app-preview-grid { grid-template-columns: 1fr; gap: 40px; }
  .app-preview__device { order: -1; }
  .overview-grid { grid-template-columns: 1fr; gap: 40px; }
  .overview-visual { order: -1; }
  .history-timeline { padding-left: 60px; }
  .history-timeline::before { left: 44px; }
  .catalog-card--wide { grid-column: span 1; }
  .values-grid { grid-template-columns: repeat(2, 1fr); }
  .team-grid { grid-template-columns: repeat(2, 1fr); }
}

/* --- max-width 768px --- */
@media (max-width: 768px) {
  .slider-viewport { height: 65vh; min-height: 380px; max-height: 600px; }
  .slide-content { padding: 0 24px; }
  .slide-content h1,
  .slide-content h2,
  .slide-heading-alt { font-size: clamp(24px, 6vw, 40px); }
  .slide-desc { font-size: 15px; }
  .slider-controls { bottom: 20px; gap: 16px; }
  .slider-btn { width: 40px; height: 40px; }
  .slider-dots { bottom: 70px; }
  .stat-card { padding: 28px 20px; }
  .stat-card__number { font-size: clamp(28px, 5vw, 40px); }
  .cta-buttons { flex-direction: column; gap: 12px; }
  .cta-buttons .btn { width: 100%; justify-content: center; }
  .btn-glow, .btn-outline, .btn-outline-light { padding: 14px 28px; font-size: 14px; }
  .btn-lg { padding: 16px 32px; font-size: 15px; }
  .device-frame--phone { width: 180px; height: 360px; }
  .device-frame--tablet { width: 240px; height: 320px; }
  .feature-list__item { gap: 12px; padding: 12px 0; }
  .overview-stats-inline { flex-direction: column; gap: 16px; align-items: flex-start; }
  .history-timeline { padding-left: 40px; }
  .history-timeline::before { left: 24px; }
  .history-item__year-wrap { left: -40px; }
  .values-grid { grid-template-columns: 1fr; }
  .team-grid { grid-template-columns: 1fr; }
}

/* --- max-width 576px --- */
@media (max-width: 576px) {
  .slider-viewport { height: 60vh; min-height: 340px; max-height: 500px; }
  .slide-content { padding: 0 16px; }
  .slide-tag { font-size: 11px; padding: 5px 14px; }
  .slider-dots { bottom: 60px; }
  .process-step__dot { width: 36px; height: 36px; min-width: 36px; font-size: 14px; }
  .process-step__icon { width: 48px; height: 48px; }
  .stats-grid { grid-template-columns: 1fr; }
  .stat-card { padding: 24px 16px; }
  .trust-logo-track { gap: 16px; }
  .blog-grid { grid-template-columns: 1fr; }
  .app-preview__device { flex-direction: column; align-items: center; }
  .device-frame--phone { width: 160px; height: 320px; }
  .device-frame--tablet { width: 200px; height: 260px; }
  .history-timeline { padding-left: 0; }
  .history-timeline::before { display: none; }
  .history-item { flex-direction: column; gap: 8px; }
  .history-item__year-wrap { position: static; }
  .history-item__connector { display: none; }
}

/* --- max-width 375px --- */
@media (max-width: 375px) {
  .slider-viewport { height: 55vh; min-height: 300px; }
  .slide-content h1,
  .slide-content h2,
  .slide-heading-alt { font-size: 24px; }
  .slide-desc { font-size: 13px; margin-bottom: 20px; }
  .btn-glow, .btn-outline, .btn-outline-light { padding: 12px 24px; font-size: 13px; }
}

/* ============================================================
   END responsive.css
   ============================================================ */