/* Tablet layout; desktop mouse and mobile rules retain their existing styling. */
@media (min-width:1121px) and (max-width:1366px) and (hover:none) and (pointer:coarse) {

body.menu-locked{overflow:hidden}
.util{display:none}
.hd{height:64px}
.hd .wrap{gap:14px}
.gnb{position:absolute;left:0;right:0;top:100%;display:block;height:calc(100vh - 64px);padding:8px 20px 34px;overflow-y:auto;background:#fff;box-shadow:0 18px 34px rgba(22,38,76,.13);opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .2s ease,visibility .2s ease,transform .2s ease}
.hd.menu-open .gnb{opacity:1;visibility:visible;transform:none}
.gnb-item{display:block;border-bottom:1px solid #edf0f5}
.gnb-link{justify-content:space-between;width:100%;height:58px;font-size:17px}
.gnb-item.is-open>.gnb-link{color:var(--blue)}
.submenu{position:static;min-width:0;max-height:0;padding:0;border:0;border-radius:10px;background:#f6f8fc;box-shadow:none;opacity:1;visibility:hidden;overflow:hidden;transform:none;transition:max-height .28s ease,padding .28s ease}
.gnb-item.is-open>.submenu{max-height:520px;padding:8px 0;visibility:visible}
.submenu a{padding:9px 16px;font-size:14px}
.submenu a:hover,.submenu a:focus-visible{padding-left:20px}
.menu-toggle{display:flex}
.hd.menu-open .menu-toggle span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.hd.menu-open .menu-toggle span:nth-child(2){opacity:0}
.hd.menu-open .menu-toggle span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

  .hd .gnb {height:calc(100dvh - 64px);overscroll-behavior:contain}
  .hd .gnb-item>.submenu {transform:none;visibility:hidden}
  .hd .gnb-item.is-open>.submenu {visibility:visible;transform:none}
  .hd .gnb-link:before {display:none}
}

@media (min-width:768px) and (max-width:1199px),
       (min-width:1200px) and (max-width:1366px) and (hover:none) and (pointer:coarse) {
  body.greeting-page, body:has(.hero-slide.is-active) {padding-bottom:calc(94px + env(safe-area-inset-bottom,0px))}
  body.greeting-page .fab, body:has(.hero-slide.is-active) .fab {
    top:auto;bottom:calc(10px + env(safe-area-inset-bottom,0px));
    left:50%;right:auto;transform:translateX(-50%);
    width:min(740px,calc(100% - 32px));display:flex;justify-content:center;
    border-radius:16px;
  }
  body.greeting-page .fab a, body:has(.hero-slide.is-active) .fab a {
    display:flex;flex:1;width:auto;min-width:0;gap:4px;padding:9px 4px;
    border-top:0;border-left:1px solid var(--line);font-size:11px;
  }
  body.greeting-page .fab a:first-child, body:has(.hero-slide.is-active) .fab a:first-child {border-left:0}
  body.greeting-page .fab .ic, body:has(.hero-slide.is-active) .fab .ic {width:30px;height:30px}
  body.greeting-page .fab .ic .ico, body:has(.hero-slide.is-active) .fab .ic .ico {width:16px;height:16px}
  .quick {height:auto}
  .quick .box {padding:20px 8px}
  .quick a {min-width:0;flex-direction:column;gap:10px;padding:0 8px;text-align:center}
  .quick b {font-size:16px;white-space:nowrap}
  .quick small {font-size:12px;white-space:nowrap}
  .quick .arr {display:none}
  .quick .ic {width:46px;height:46px}
  /* Replace the inline spacing that compensated for the old overlapping shortcut strip. */
  .quick + .pass {padding-top:80px!important}
}

/* The notebook gutter is only needed with the vertical quick menu. */
@media (min-width:1200px) and (max-width:1366px) and (hover:none) and (pointer:coarse) {
  body .wrap:not(.hd .wrap, .util .wrap, .wrap .wrap) {max-width:var(--container,1320px);margin-left:auto;margin-right:auto}
  body .hero-nav-wrap {left:50%;transform:translateX(-50%);margin-left:0}
}

@media (min-width:768px) and (max-width:1000px) {
  .pass .grid {grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
  .teach .grid {grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
  .teach .ph {height:280px}
  .teach .tx {padding:18px 14px 22px}
  .teach .nm {font-size:22px}
  .community-grid {grid-template-columns:repeat(3,minmax(0,1fr));gap:28px 18px}
  .hero .signature-slide .copy {max-width:59%;padding-bottom:40px}
  .hero .signature-slide h1 {font-size:clamp(68px,8.6vw,86px)}
  .hero .signature-slide h1 small {font-size:36px;margin-top:8px}
  .hero .signature-slide .hero-model {right:-55px;bottom:0;width:48%;height:91%;opacity:1}
  .hero .signature-slide ol {margin:24px 0 28px;gap:14px}
  .hero .signature-slide ol li {align-items:flex-start;gap:10px}
  .hero .signature-slide ol b {font-size:18px}
  .hero .signature-slide ol span:not(.n) {display:block;margin:3px 0 0;font-size:13px;line-height:1.5;max-width:330px;word-break:keep-all}
  .hero .signature-slide .btns {gap:10px}
  .hero .signature-slide .btns .btn {padding-left:22px;padding-right:22px;font-size:15px}
}
@media (min-width:768px) and (max-width:800px) {
  .hero .nav {left:20px;right:20px;bottom:58px}
}
/* Keep the slider controls above the fixed quick menu on short landscape screens. */
@media (min-width:801px) and (max-width:1199px) {
  .hero {--tablet-header-height:108px}
  .hero .nav {bottom:max(72px,calc(100% + var(--tablet-header-height) + 100px - 100svh))}
}
@media (min-width:801px) and (max-width:1120px),
       (min-width:1121px) and (max-width:1199px) and (hover:none) and (pointer:coarse) {
  .hero {--tablet-header-height:64px}
}
@media (min-width:801px) and (max-width:1000px) {
  .hero .experience-abc-badge {left:23%;top:80px;width:185px;height:185px}
  .hero .experience-flight {left:-4%;width:51%}
  .hero .experience-plane {left:-40px;top:280px;width:54vw;height:270px}
  .hero .experience-copy {width:51%;padding-right:0}
  .hero .experience-copy h2 {font-size:42px}
  .hero .experience-brandline {gap:10px}
  .hero .experience-eastar-mark {width:125px}
  .hero .experience-brandline strong {font-size:18px}
  .hero .experience-exclusive-copy strong {font-size:18px}
  .hero .experience-lead {font-size:14px;word-break:keep-all}
}

/* Center campaign banners when the quick menu sits below the page. */
@media (min-width:768px) and (max-width:1199px),
       (min-width:1200px) and (max-width:1366px) and (hover:none) and (pointer:coarse) {
  .hero .lecture-slide>.wrap,
  .hero .univ-slide>.wrap,
  .hero .why-slide>.wrap,
  .hero .results-slide>.wrap,
  .hero .admissions-slide>.wrap,
  .hero .assessment-slide>.wrap,
  .hero .support-campaign>.wrap,
  .hero .fair-slide>.wrap {padding-inline:clamp(24px,3vw,40px)}
  .hero .lecture-slide .lecture-gallery {right:0}

  /* Subpage sections also no longer need a gutter for the vertical quick menu. */
  body.greeting-page main>section:not(.subpage-hero):not(.quick-consult)>.wrap:not(.passed-roll),
  body.greeting-page .next-page>.wrap {padding-right:20px}
  body.greeting-page .interview-detail-wrap {padding-right:30px}
  /* Match the left gutter despite the page's legacy important declaration. */
  body.greeting-page .ai-finish>.wrap {padding-right:20px!important}
}

@media (min-width:768px) and (max-width:800px) {
  .hero .why-slide .campaign-copy {top:10px}
}