/* ========================================
   PD-One Website - Responsive Styles
======================================== */

/* ========================================
   Tablet (768px ~ 1023px)
======================================== */
@media (max-width: 1023px) {
  .values-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .main-nav {
    gap: 25px;
  }
  
  .main-nav a {
    font-size: 15px;
  }
}

/* ========================================
   Mobile (~ 767px)
======================================== */
@media (max-width: 767px) {
  
  /* Header */
  .main-nav {
    display: none;
  }
  
  .btn-kakao-header {
    display: none;
  }
  
  .menu-toggle {
    display: flex;
  }
  
  /* Hero Section */
  .hero {
    padding: 60px 20px;
  }
  
  .hero-logo {
    width: 150px;
  }
  
  .hero-title {
    font-size: 24px;
  }
  
  .hero-subtitle {
    font-size: 14px;
  }
  
  .hero-product {
    max-width: 350px;
  }
  
  .hero-buttons {
    flex-direction: column;
    gap: 15px;
  }
  
  .btn-primary,
  .btn-secondary {
    width: 100%;
    max-width: 300px;
  }
  
  /* Values Section */
  .values {
    padding: 60px 20px;
  }
  
  .section-title {
    font-size: 20px;
  }
  
  .values-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  
  .value-card {
    padding: 30px 20px;
  }
  
  /* Spec Summary */
  .spec-summary {
    padding: 40px 20px;
  }
  
  /* CTA Section */
  .cta-home {
    padding: 60px 20px 100px;
  }
  
  .btn-cta-large {
    width: 100%;
    max-width: 350px;
    font-size: 18px;
    padding: 18px 30px;
  }
  
  /* Mobile Bottom Bar */
  .mobile-bottom-bar {
    display: block;
  }
  
  /* Footer */
  .footer-top {
    flex-direction: column;
    gap: 20px;
    text-align: center;
  }
  
  .footer-nav {
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
  }
  
  .footer-info {
    text-align: center;
  }
  
  .footer-info .company-info {
    display: flex;
    flex-direction: column;
    gap: 5px;
  }
  
  .footer-info .divider {
    display: none;
  }
  
  /* Contact Page - Mobile */
  .page-title {
    font-size: 28px;
  }
  
  .purchase-steps {
    flex-direction: column;
  }
  
  .step-arrow {
    transform: rotate(90deg);
  }
  
  .kakao-content {
    flex-direction: column;
    gap: 40px;
  }
  
  .qr-placeholder {
    width: 200px;
    height: 200px;
  }
  
  .qr-placeholder p:first-child {
    font-size: 60px;
  }
  
  .btn-kakao-large {
    width: 100%;
    max-width: 350px;
    font-size: 18px;
  }
  
  .benefits-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  
  .sample-card {
    padding: 40px 30px;
  }
  
  .sample-card h2 {
    font-size: 24px;
  }
  
  .info-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  
  .map-buttons {
    flex-direction: column;
  }
  
  .btn-map {
    width: 100%;
    max-width: 300px;
  }
  
  /* Product Page - Mobile */
  .product-layout {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  
  .product-images {
    position: static;
  }
  
  .product-name {
    font-size: 28px;
  }
  
  .product-cta {
    flex-direction: column;
  }
  
  .btn-product-contact,
  .btn-product-spec {
    width: 100%;
    justify-content: center;
  }
  
  .compat-grid {
    grid-template-columns: 1fr;
    gap: 25px;
  }
  
  .comparison-table {
    font-size: 13px;
  }
  
  .comparison-table th,
  .comparison-table td {
    padding: 10px 8px;
  }
  
  .spec-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  
  .features-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  
  .product-cta-section h2 {
    font-size: 24px;
  }
  
  .cta-buttons {
    flex-direction: column;
    align-items: center;
  }
  
  .cta-buttons .btn-cta-large,
  .cta-buttons .btn-secondary {
    width: 100%;
    max-width: 350px;
  }
}

/* ========================================
   Small Mobile (~ 480px)
======================================== */
@media (max-width: 480px) {
  .hero-title {
    font-size: 22px;
  }
  
  .hero-product {
    max-width: 280px;
  }
  
  .section-title {
    font-size: 18px;
  }
  
  .value-icon img {
    width: 60px;
    height: 60px;
  }
  
  .btn-cta-large {
    font-size: 16px;
    padding: 16px 24px;
  }
}

  /* Guide Page - Mobile */
  .guide-tabs {
    flex-direction: column;
    gap: 15px;
  }
  
  .guide-tab {
    flex-direction: row;
    padding: 15px;
  }
  
  .tab-icon {
    font-size: 32px;
  }
  
  .tab-text {
    font-size: 15px;
  }
  
  .guide-card {
    padding: 25px;
  }
  
  .guide-header {
    gap: 10px;
  }
  
  .guide-icon {
    font-size: 28px;
  }
  
  .guide-header h2 {
    font-size: 20px;
  }
  
  .info-grid-4 {
    grid-template-columns: 1fr;
    gap: 15px;
  }
  
  .step-box {
    flex-direction: column;
    padding: 15px;
  }
  
  .step-num {
    width: 40px;
    height: 40px;
    font-size: 20px;
  }
  
  .step-info h3 {
    font-size: 16px;
  }
  
  .step-info p {
    font-size: 15px;
  }
  
  .alert-box {
    flex-direction: column;
    gap: 10px;
  }
  
  .temp-table {
    font-size: 14px;
  }
  
  .temp-table th,
  .temp-table td {
    padding: 10px 8px;
  }
  
  .download-grid {
    grid-template-columns: 1fr;
  }
  
  .guide-cta h2 {
    font-size: 24px;
  }
  
  .guide-cta .cta-buttons {
    flex-direction: column;
    align-items: center;
  }
  
  .guide-cta .btn-cta-large,
  .guide-cta .btn-secondary {
    width: 100%;
    max-width: 350px;
  }

@media (min-width: 768px) {
  .guide-card {
    padding: 40px;
  }
}

  /* Digital Guide - Mobile */
  .resin-list {
    grid-template-columns: 1fr;
    gap: 15px;
  }
  
  .schedule-title {
    font-size: 16px;
  }