/* ══════════════════════════════════════════
   Responsive — KYH ANR Landing Page
   Breakpoints: 1024px (tablet), 768px (mobile)
   ══════════════════════════════════════════ */

/* ─── Tablet (≤1024px) ───────────────────── */
@media (max-width: 1024px) {

  /* Base */
  :root {
    --container-px: 32px;
    --section-padding-v: 96px;
  }

  /* Nav */
  nav {
    padding: 16px 32px;
  }
  .nav-cta-hint { display: none; }

  /* S4 grid: 1열 */
  .s4-grid {
    grid-template-columns: 1fr;
  }

  /* S5 elevator 숨김 */
  .s5-rcolumn { display: none; }
  .s5-layout  { grid-template-columns: 1fr; }

  /* S6B text 중앙 정렬 */
  .s6b-text {
    left: 50%;
    top: 50%;
  }
}

/* ─── Mobile (≤768px) ────────────────────── */
@media (max-width: 768px) {

  /* ── Variables ── */
  :root {
    --container-px: 20px;
    --section-padding-v: 72px;
  }

  /* ── Base ── */
  .section {
    padding: var(--section-padding-v) var(--container-px);
  }
  .section-heading {
    font-size: clamp(28px, 7vw, 48px);
  }

  /* ── Nav ── */
  nav {
    padding: 12px 20px;
  }
  .logo-icon  { width: 44px; height: 44px; }
  .logo-text  { font-size: 15px; }
  .nav-mid    { display: none; }
  .nav-cta-hint { display: none; }
  .nav-cta {
    font-size: 11px;
    padding: 10px 20px 10px 22px;
    letter-spacing: 0.1em;
    white-space: nowrap;
  }

  /* ── S1 Hero ── */
  .hero-video {
    object-position: 50% 30%;
  }
  .hero-final {
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    width: 90%;
  }
  .hero-final-line {
    font-size: clamp(28px, 8vw, 60px);
  }
  .hero-clock-time {
    font-size: clamp(52px, 15vw, 100px);
  }
  .scroll-hint-text {
    font-size: 13px;
  }

  /* ── S2 Problem ── */
  .s2-tabs {
    gap: 16px;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .s2-tabs::-webkit-scrollbar { display: none; }
  .s2-tab {
    font-size: 14px;
    white-space: nowrap;
  }
  .s2-card {
    width: 260px;
    min-height: 240px;
    padding: 20px;
  }
  .s2-footer-copy {
    font-size: clamp(15px, 4vw, 22px);
  }

  /* ── S3 Solution ── */
  .s3-stat-number {
    font-size: clamp(64px, 18vw, 120px);
  }
  .s3-stat-word {
    font-size: clamp(32px, 9vw, 60px);
  }
  .s3-callout { display: none; }
  .s3-statement-copy {
    font-size: clamp(20px, 5vw, 38px);
  }
  .s3-mobile-br { display: inline; }
  .s3-blink-text {
    font-size: clamp(24px, 6.5vw, 48px);
  }

  /* ── S4 Results ── */
  #s4 { padding: var(--section-padding-v) 0; }
  .s4-grid {
    grid-template-columns: 1fr;
  }
  .s4-tab-row {
    flex-wrap: wrap;
    padding: 0 var(--container-px);
    gap: 8px;
  }
  .s4-tab-btn {
    padding: 10px 24px;
  }
  .s4-hint-spacer { display: none; }
  .s4-after-hint  { display: none; }
  .s4-reviews-header,
  .s4-reviews {
    padding: 0 var(--container-px);
  }

  /* ── S5 Roadmap ── */
  #s5 { padding-bottom: var(--sp-10); }
  .s5-layout {
    grid-template-columns: 1fr;
  }
  .s5-rcolumn { display: none; }
  .s5-cert-imgs {
    grid-template-columns: 1fr;
  }

  /* ── S6 Attraction ── */
  .s6-tab-row {
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .s6-tab-row::-webkit-scrollbar { display: none; }
  .s6-tab {
    font-size: 13px;
    padding: 10px 18px;
    white-space: nowrap;
  }
  .s6-subtab {
    font-size: 13px;
    padding: 9px 16px;
  }
  /* 테이블 가로 스크롤 */
  .s6-subpanel,
  .s6-panel > div {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .s6-table,
  .s6-core-table {
    min-width: 540px;
  }
  .s6-table-caption {
    font-size: 13px;
  }
  .s6-network-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  /* ── S6B Video ── */
  .s6b-text {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    width: 90%;
  }
  .s6b-text-line {
    font-size: clamp(18px, 5vw, 32px);
  }
  #s6bL2a { margin-right: 0.2em; }
  .s6b-clock {
    top: 20px;
    left: 20px;
  }
  .s6b-clock-time {
    font-size: clamp(28px, 8vw, 48px);
  }

  /* ── S7 Vision ── */
  .s7-inner {
    max-width: 100%;
    padding: 0 var(--container-px);
  }
  .s7-heading {
    font-size: clamp(22px, 5.5vw, 40px);
    white-space: normal;
  }
  .s7-fade-line {
    white-space: normal;
  }
  .s7-cta-primary {
    font-size: 13px;
    padding: 15px 36px;
  }
  .s7-invite {
    font-size: 13px;
    letter-spacing: 0.04em;
  }
  .s7-footer {
    text-align: center;
  }

  /* ── Modal ── */
  .modal-card {
    max-height: 92vh;
    padding: 28px 20px 24px;
    width: 92vw;
  }
}

/* ─── Small Mobile (≤480px) ─────────────── */
@media (max-width: 480px) {

  nav {
    padding: 10px 16px;
  }
  .logo-icon { width: 36px; height: 36px; }
  .logo-text  { font-size: 13px; }
  .nav-cta {
    font-size: 10px;
    padding: 9px 16px;
  }

  .hero-clock-time {
    font-size: clamp(44px, 18vw, 80px);
  }

  .s4-state-header {
    grid-template-columns: 44px 1fr 1fr 1fr 1fr 1fr;
  }
  .s4-bar-label { width: 44px; font-size: 9px; }

  .s6b-text-line {
    font-size: clamp(16px, 5vw, 26px);
  }

  .s7-heading {
    font-size: clamp(20px, 6vw, 36px);
  }
}