/* 전체 사이트의 반응형 대응과 모바일 최적화를 담당 */
/* ===============================
   📐 Font Size Scaling
   =============================== */
@media (max-width: 1024px) {
  body {
    font-size: 15.5px;
  }
}
@media (max-width: 768px) {
  body {
    font-size: 15px;
    line-height: 1.6;
  }
}
@media (max-width: 640px) {
  body {
    font-size: 14.5px;
  }
}
@media (max-width: 480px) {
  body {
    font-size: 14px;
  }
}

/* ===============================
   📦 Section Padding Scaling
   =============================== */
@media (max-width: 1024px) {
  .content-section {
    padding: 72px 0;
  }
}
@media (max-width: 768px) {
  .content-section {
    padding: 56px 0;
  }
}
@media (max-width: 640px) {
  .content-section {
    padding: 48px 0;
  }
}
@media (max-width: 480px) {
  .content-section {
    padding: 40px 0;
  }
}

/* ===============================
   📱 Cursor Visibility on Mobile
   =============================== */
@media (max-width: 768px) {
  .cursor-circle {
    display: none !important;
  }
}

/* ===============================
   📱 Footer Stack — Mobile Layout
   =============================== */
@media (max-width: 768px) {
  footer .f-info {
    display: block;
  }
  footer .f-info .item {
    display: block !important;
    margin: 2px 0;
  }
  footer .f-info .sep {
    display: none !important;
  }
  .mobile-br {
    display: block !important;
  }

  .site-footer p {
    margin: 4px 0;
    line-height: 1.5;
  }
}

/* ===============================
   📱 Navigation Text Scaling
   =============================== */
@media (max-width: 768px) {
  .nav-links > li > a {
    font-size: 15px;
    padding: 14px 8px;
  }
}

/* ===============================
   📱 Mobile Nav Panel Layout
   =============================== */
@media (max-width: 768px) {
  .mobile-nav-links {
    gap: 8px;
  }
  .mobile-nav-links a {
    display: block;
    padding: 12px 10px;
    border-radius: 12px;
    background: var(--surface, #f6f8f9);
    font-size: 16px;
  }
}