/* =========================================================
   MAGICNARA MOBILE TYPOGRAPHY & LAYOUT REFINEMENT
   Desktop design is unchanged. Applies only to mobile/tablet.
   ========================================================= */

@media (max-width: 780px){

  html{
    -webkit-text-size-adjust:100%;
    text-size-adjust:100%;
  }

  body{
    overflow-x:hidden;
  }

  /* Korean typography: avoid unnatural syllable-by-syllable wrapping */
  h1,h2,h3,h4,p,li,span,strong,a,label,figcaption{
    word-break:keep-all;
    overflow-wrap:break-word;
  }

  h1,h2,h3{
    text-wrap:balance;
  }

  p{
    text-wrap:pretty;
  }

  .container{
    width:calc(100% - 36px) !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }

  /* Header */
  .site-header{
    min-height:68px !important;
  }

  .header-inner{
    min-height:68px !important;
    gap:12px !important;
  }

  .brand{
    gap:6px !important;
  }

  .brand strong{
    font-size:20px !important;
    letter-spacing:-.8px !important;
    line-height:1.1 !important;
  }

  .brand span{
    font-size:9px !important;
    letter-spacing:1px !important;
  }

  .menu-toggle{
    font-size:24px !important;
    line-height:1 !important;
    padding:8px !important;
  }

  .main-nav.open{
    top:68px !important;
    padding:22px 20px !important;
    gap:17px !important;
  }

  .main-nav.open a{
    width:100%;
  }

  .main-nav.open small{
    font-size:8px !important;
  }

  .main-nav.open b{
    font-size:14px !important;
  }

  /* Common typography rhythm */
  .eyebrow{
    margin-bottom:14px !important;
    font-size:10px !important;
    line-height:1.4 !important;
    letter-spacing:1.1px !important;
  }

  section h1,
  section h2{
    letter-spacing:-1.2px !important;
  }

  section h3{
    letter-spacing:-.5px !important;
  }

  .btn{
    min-height:50px !important;
    padding:0 18px !important;
    font-size:13px !important;
    line-height:1.3 !important;
  }

  /* Body copy: fixed desktop <br> should not force awkward mobile breaks */
  .hero-desc br,
  .intro br,
  .section-head > p br,
  .contact-box p br,
  .real-desc br,
  .production-copy > p br,
  .inquiry p br{
    display:none;
  }

  /* Footer */
  .global-site-footer{
    padding:30px 0 !important;
  }

  .global-footer-inner{
    gap:24px !important;
  }

  .global-footer-brand strong{
    font-size:17px !important;
  }

  .global-footer-brand p{
    font-size:11px !important;
    line-height:1.7 !important;
  }

  .global-footer-nav{
    gap:10px 16px !important;
  }

  .global-footer-contact{
    gap:7px !important;
  }
}

/* ---------- HOME ---------- */
@media (max-width: 650px){
  .page-home .hero{
    min-height:620px !important;
  }

  .page-home .hero-inner{
    min-height:620px !important;
    padding:58px 0 44px !important;
    display:flex !important;
    align-items:flex-end !important;
  }

  .page-home .hero-copy{
    width:100% !important;
    max-width:none !important;
  }

  .page-home .hero-copy h1{
    font-size:clamp(36px,10.2vw,44px) !important;
    line-height:1.22 !important;
    letter-spacing:-1.8px !important;
  }

  .page-home .hero-categories{
    margin-top:20px !important;
    font-size:13px !important;
    line-height:1.75 !important;
  }

  .page-home .hero-desc{
    margin-top:16px !important;
    font-size:14px !important;
    line-height:1.75 !important;
  }

  .page-home .hero-actions{
    margin-top:24px !important;
    gap:9px !important;
  }

  .page-home .trust-panel{
    margin-top:28px !important;
    gap:15px !important;
    padding:18px !important;
  }

  .page-home .programs,
  .page-home .about,
  .page-home .portfolio,
  .page-home .contact{
    padding:56px 0 !important;
  }

  .page-home .program-card{
    min-height:auto !important;
    padding:23px 21px !important;
  }

  .page-home .program-card h2{
    font-size:23px !important;
  }

  .page-home .about h2,
  .page-home .portfolio h2,
  .page-home .contact h2{
    font-size:30px !important;
    line-height:1.38 !important;
  }

  .page-home .about-layout,
  .page-home .section-head{
    gap:28px !important;
  }
}

/* ---------- ABOUT ---------- */
@media (max-width: 780px){
  .page-about .about-hero{
    padding:56px 0 62px !important;
  }

  .page-about .hero-grid{
    gap:34px !important;
  }

  .page-about .hero-copy h1{
    font-size:clamp(35px,9.5vw,42px) !important;
    line-height:1.3 !important;
    letter-spacing:-1.6px !important;
  }

  .page-about .fields{
    margin-top:20px !important;
    font-size:13px !important;
    line-height:1.75 !important;
  }

  .page-about .intro{
    margin-top:16px !important;
    font-size:14px !important;
    line-height:1.85 !important;
  }

  .page-about .capabilities{
    margin-top:28px !important;
    gap:13px !important;
  }

  .page-about .approach,
  .page-about .fields-section{
    padding:56px 0 !important;
  }

  .page-about .approach h2,
  .page-about .fields-section h2{
    font-size:30px !important;
    line-height:1.4 !important;
  }

  .page-about .steps{
    margin-top:34px !important;
    gap:25px !important;
  }

  .page-about .steps h3{
    font-size:23px !important;
    line-height:1.4 !important;
  }

  .page-about .experience{
    padding:56px 0 !important;
  }
}

/* ---------- PERFORMANCE ---------- */
@media (max-width: 700px){
  .page-performance .hero{
    min-height:570px !important;
  }

  .page-performance .hero-inner{
    min-height:570px !important;
  }

  .page-performance .hero-copy{
    padding:52px 0 40px !important;
  }

  .page-performance .hero-copy h1{
    font-size:clamp(34px,9vw,40px) !important;
    line-height:1.32 !important;
    letter-spacing:-1.5px !important;
  }

  .page-performance .hero-fields{
    margin-top:20px !important;
    font-size:13px !important;
    line-height:1.75 !important;
  }

  .page-performance .hero-desc{
    margin-top:15px !important;
    font-size:14px !important;
    line-height:1.8 !important;
  }

  .page-performance .signature,
  .page-performance .category,
  .page-performance .process,
  .page-performance .cta{
    padding-top:56px !important;
    padding-bottom:56px !important;
  }

  .page-performance .signature h2,
  .page-performance .category h2,
  .page-performance .process h2,
  .page-performance .cta h2{
    font-size:29px !important;
    line-height:1.4 !important;
  }
}

/* ---------- EDUCATION ---------- */
@media (max-width: 780px){
  .page-education .edu-hero{
    padding-top:0 !important;
  }

  .page-education .hero-copy{
    padding:52px 0 28px !important;
  }

  .page-education .hero-copy h1{
    font-size:clamp(34px,9.2vw,40px) !important;
    line-height:1.32 !important;
    letter-spacing:-1.5px !important;
  }

  .page-education .hero-fields{
    margin-top:20px !important;
    font-size:13px !important;
    line-height:1.75 !important;
  }

  .page-education .hero-desc{
    margin-top:15px !important;
    font-size:14px !important;
    line-height:1.8 !important;
  }

  .page-education .approach,
  .page-education .programs,
  .page-education .real-performance,
  .page-education .why,
  .page-education .cta{
    padding-top:56px !important;
    padding-bottom:56px !important;
  }

  .page-education section h2{
    font-size:29px !important;
    line-height:1.42 !important;
  }
}

/* ---------- PORTFOLIO ---------- */
@media (max-width: 780px){
  .page-portfolio .hero{
    min-height:auto !important;
  }

  .page-portfolio .hero-inner{
    min-height:560px !important;
  }

  .page-portfolio .hero-copy{
    padding:52px 0 40px !important;
  }

  .page-portfolio .hero-copy h1{
    font-size:clamp(34px,9.2vw,40px) !important;
    line-height:1.32 !important;
    letter-spacing:-1.5px !important;
  }

  .page-portfolio .hero-fields,
  .page-portfolio .hero-desc{
    font-size:14px !important;
    line-height:1.8 !important;
  }

  .page-portfolio .featured-projects,
  .page-portfolio .performance-field,
  .page-portfolio .project-archive,
  .page-portfolio .experience,
  .page-portfolio .cta{
    padding-top:56px !important;
    padding-bottom:56px !important;
  }

  .page-portfolio section h2{
    font-size:29px !important;
    line-height:1.42 !important;
  }
}

/* ---------- CONTACT ---------- */
@media (max-width: 780px){
  .page-contact .contact-hero{
    padding-top:0 !important;
  }

  .page-contact .hero-copy{
    padding:52px 0 28px !important;
  }

  .page-contact .hero-copy h1{
    font-size:clamp(35px,9.4vw,41px) !important;
    line-height:1.3 !important;
    letter-spacing:-1.5px !important;
  }

  .page-contact .hero-fields{
    margin-top:20px !important;
    font-size:13px !important;
    line-height:1.75 !important;
  }

  .page-contact .hero-desc{
    margin-top:15px !important;
    font-size:14px !important;
    line-height:1.8 !important;
  }

  .page-contact .hero-desc.secondary{
    margin-top:9px !important;
  }

  .page-contact .consultation,
  .page-contact .consultation-process,
  .page-contact .production-system{
    padding-top:56px !important;
    padding-bottom:56px !important;
  }

  .page-contact section h2{
    font-size:29px !important;
    line-height:1.42 !important;
  }

  .page-contact .guide-grid{
    gap:0 !important;
  }

  .page-contact .guide-grid article{
    padding:22px 16px !important;
  }

  .page-contact .form-panel{
    padding:24px 18px !important;
  }

  .page-contact .form-panel h2{
    font-size:27px !important;
  }

  .page-contact .quick-heading h2{
    font-size:27px !important;
    line-height:1.42 !important;
  }

  .page-contact .quick-card{
    padding-top:22px !important;
    padding-bottom:22px !important;
  }

  .page-contact .production-copy > p:not(.eyebrow){
    font-size:14px !important;
    line-height:1.8 !important;
  }
}

/* ---------- POWPOW ---------- */
@media (max-width: 580px){
  .page-powpow .hero{
    height:auto !important;
    min-height:610px !important;
  }

  .page-powpow .hero-inner{
    min-height:610px !important;
    align-items:flex-end !important;
    padding-top:58px !important;
    padding-bottom:44px !important;
  }

  .page-powpow .hero-copy{
    width:100% !important;
  }

  .page-powpow .hero h1{
    font-size:clamp(45px,13vw,54px) !important;
    line-height:.92 !important;
    letter-spacing:-2px !important;
  }

  .page-powpow .hero h2{
    margin-top:22px !important;
    font-size:21px !important;
    line-height:1.55 !important;
    letter-spacing:-.8px !important;
  }

  .page-powpow .hero-desc{
    margin-top:15px !important;
    font-size:14px !important;
    line-height:1.8 !important;
  }

  .page-powpow .hero-actions{
    margin-top:22px !important;
    gap:9px !important;
  }

  .page-powpow .value-grid{
    grid-template-columns:1fr 1fr !important;
    padding:18px 0 !important;
  }

  .page-powpow .value-grid > div{
    min-height:96px !important;
    padding:17px 10px !important;
  }

  .page-powpow .value-grid strong{
    font-size:34px !important;
  }

  .page-powpow .overview,
  .page-powpow .design,
  .page-powpow .real,
  .page-powpow .inquiry{
    padding-top:54px !important;
    padding-bottom:54px !important;
  }

  .page-powpow .overview-copy h2{
    font-size:39px !important;
    line-height:1.05 !important;
  }

  .page-powpow .overview-copy .lead{
    font-size:18px !important;
    line-height:1.65 !important;
  }

  .page-powpow .overview-copy > p:not(.eyebrow):not(.lead){
    font-size:14px !important;
    line-height:1.85 !important;
  }

  .page-powpow .design h2,
  .page-powpow .real h2,
  .page-powpow .inquiry h2{
    font-size:28px !important;
    line-height:1.42 !important;
  }

  .page-powpow .recommended li{
    font-size:13px !important;
    line-height:1.65 !important;
  }

  .page-powpow .flow{
    margin-top:30px !important;
  }

  .page-powpow .flow span{
    padding:8px 9px !important;
    font-size:10px !important;
  }

  .page-powpow .criteria{
    font-size:11px !important;
    line-height:1.9 !important;
  }

  .page-powpow .real-desc{
    font-size:14px !important;
    line-height:1.8 !important;
  }

  .page-powpow .contact-block>a[href^="tel"]{
    font-size:27px !important;
  }
}