/* ============================================
   responsive.css
   공통 반응형 스타일 (common.css에서 분리)
   ============================================ */

/* --- min-width: 961px (Desktop) --- */
@media (min-width: 961px){
  .has-sub:hover .sub{display:none;}
  .has-sub:focus-within .sub{display:none;}
}

/* --- max-width: 980px --- */
@media (max-width: 980px){
  .hero-vb .hero-shell{grid-template-columns:1fr; min-height:auto;}
  .vb-title{font-size:36px;}
  .vb-mag-grid, .vb-mag-grid.reverse{grid-template-columns:1fr;}
  .vb-cards{grid-template-columns:1fr;}
}

/* --- max-width: 960px (Mobile Navigation + Content) --- */
@media (max-width: 960px){
  /* Mobile Navigation */
  body.nav-open {overflow: hidden;}
  body.nav-open .fixed-cta {display:none;}
  .nav-toggle{display:block}
  .nav{
    position:fixed; left:0; right:0; top:64px; bottom:0;
    width: 100vw;
    height: 100vh;
    background:#ffffff;
    border-top:1px solid var(--line);
    padding:18px;
    flex-direction:column;
    align-items:stretch;
    transform: translateY(-8px);
    opacity:0; pointer-events:none;
    transition:.18s ease;
  }
  .nav.is-open{opacity:1; pointer-events:auto; transform:none}
  .nav-list{flex-direction:column; align-items:stretch}
  .has-sub:hover .sub{display:none}
  .sub{position:static; display:none; padding:8px; margin:6px 0 0}
  .sub-open .sub{display:block}
  .nav-cta{margin-top:10px}

  /* Mobile Content */
  .grid-4{grid-template-columns:repeat(2, 1fr)}
  .grid-3{grid-template-columns:1fr}
  .grid-2{grid-template-columns:1fr}
  h1{font-size:30px}
}

/* --- max-width: 920px --- */
@media (max-width: 920px){
  .mag, .mag.reverse{grid-template-columns: 1fr;}
  .mag .mag-title{font-size:30px;}
  .mag .mag-media img{aspect-ratio: 16/10;}
  .mag-split{grid-template-columns:1fr;}
}

/* --- max-width: 880px --- */
@media (max-width: 880px){
  .footer-top{grid-template-columns:1fr; gap:36px;}
  .footer-brand-area{padding-right:0;}
}

/* --- max-width: 860px --- */
@media (max-width: 860px){
  .consultation-guide-grid{ grid-template-columns:1fr !important; }
}

/* --- max-width: 720px --- */
@media (max-width: 720px){
  .section{padding:52px 0;}
  .grid-4{grid-template-columns:1fr;}
}

/* --- max-width: 680px --- */
@media (max-width: 680px){
  .footer-nav-group{grid-template-columns:1fr 1fr; gap:20px;}
  .footer-nav-col:last-child{grid-column:1 / -1;}
  .line{grid-template-columns:1fr;}
  .line-label{margin-bottom:6px;}
  .line-two-inputs{grid-template-columns:1fr;}
}

/* --- max-width: 520px --- */
@media (max-width: 520px){
  footer.site-footer{padding:36px 0 0;}
  .footer-bottom{flex-direction:column; align-items:flex-start; gap:12px; padding:16px 0 20px;}
  .fixed-cta__inner{ padding: 10px 14px; }
  .fixed-cta__desc{ display:none; }
  .fixed-cta__actions a{ width: 100%; justify-content:center; }
}