/* =========================================================
   SIA CROSS-BROWSER FINAL COMPATIBILITY LAYER
   Chrome / Samsung Internet / iOS Safari / older WebKit
   2026-09-16

   This file is loaded LAST. It intentionally contains only final
   compatibility/normalization rules, not page-specific redesign rules.
========================================================= */

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  color-scheme: light;
}

body,
button,
input,
select,
textarea {
  font-family: "Pretendard Variable", Pretendard, "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", Arial, sans-serif;
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

button,
input,
select,
textarea {
  font-size: 100%;
  font-weight: inherit;
  line-height: inherit;
}

button,
a,
input[type="button"],
input[type="submit"],
input[type="checkbox"],
input[type="radio"] {
  touch-action: manipulation;
}

img,
video,
svg,
canvas,
iframe {
  max-width: 100%;
}

/* Keep older WebKit from stretching replaced elements. */
img,
video {
  height: auto;
}

/* Safari versions that do not understand overflow:clip use hidden instead. */
@supports not (overflow: clip) {
  @media (max-width: 1440px) {
    html,
    body {
      overflow-x: hidden !important;
    }
  }
}

/* WebKit blur prefix. Browsers without backdrop-filter simply keep the solid
   fallback backgrounds already declared by the component styles. */
.site-header,
.header,
.theme-prism .site-header,
.theme-prism .header,
.theme-prism .sia-floating-consult::after,
.course-story-card {
  -webkit-backdrop-filter: blur(16px);
}

@media (max-width: 1440px) {
  body {
    min-width: 0 !important;
  }
}

/* Sticky needs the old WebKit value on older iOS Safari. */
@media (max-width: 1024px) {
  .site-header,
  .site-header.header,
  .site-header.sub-header,
  .header.site-header,
  .anchor-nav {
    position: -webkit-sticky !important;
    position: sticky !important;
  }
}

@media (max-width: 767px) {
  /* iOS Safari zooms the page when focused controls are below 16px. */
  input,
  select,
  textarea {
    font-size: 16px !important;
  }

  /* Final header/menu geometry. The source had a 64px header but one later
     hotfix still started the menu at 60px. Keep every browser on 64px. */
  .site-header,
  .site-header.header,
  .site-header.sub-header,
  .header.site-header {
    top: 0 !important;
    height: 64px !important;
    min-height: 64px !important;
  }

  .site-header .mobile-nav.open,
  .header.site-header .mobile-nav.open,
  .site-header.sub-header .mobile-nav.open {
    top: 64px !important;
    max-height: calc(100vh - 64px) !important;
    max-height: calc((var(--sia-vh, 1vh) * 100) - 64px) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* Horizontal section nav: one scroll owner, old WebKit momentum scrolling,
     no accidental body overflow. JS centers the active item when it changes. */
  .anchor-nav {
    top: 64px !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
  }

  .anchor-nav .wrap {
    display: -webkit-inline-box !important;
    display: -webkit-inline-flex !important;
    display: inline-flex !important;
    width: auto !important;
    min-width: 100% !important;
    max-width: none !important;
    -webkit-box-pack: start !important;
    -webkit-justify-content: flex-start !important;
    justify-content: flex-start !important;
  }

  .anchor-nav a {
    -webkit-box-flex: 0 !important;
    -webkit-flex: 0 0 auto !important;
    flex: 0 0 auto !important;
  }

  /* iPhone safe area: constant() covers early iOS 11, env() newer iOS. */
  .theme-prism .sia-floating-consult {
    bottom: 10px !important;
    bottom: calc(10px + constant(safe-area-inset-bottom)) !important;
    bottom: calc(10px + env(safe-area-inset-bottom, 0px)) !important;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }

  .theme-prism .site-footer {
    padding-bottom: 82px !important;
    padding-bottom: calc(82px + constant(safe-area-inset-bottom)) !important;
    padding-bottom: calc(82px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .theme-prism .sia-floating-consult__mobile {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }

  /* Prevent long Korean/URL-like strings from creating horizontal overflow. */
  .theme-prism main,
  .theme-prism section,
  .theme-prism article,
  .theme-prism .wrap,
  .theme-prism .content {
    min-width: 0;
  }

  .theme-prism p,
  .theme-prism h1,
  .theme-prism h2,
  .theme-prism h3,
  .theme-prism li,
  .theme-prism a,
  .theme-prism span {
    overflow-wrap: break-word;
  }
}

/* color-mix() is decorative on the modern stylesheet. Supply fixed-color
   fallbacks so older Safari/Samsung versions keep the same visual hierarchy. */
@supports not (color: color-mix(in srgb, #000 50%, transparent)) {
  .theme-prism .sia-floating-consult__submit {
    box-shadow: 0 10px 25px rgba(128, 89, 225, .23);
  }
  .theme-prism .sia-floating-consult select:focus,
  .theme-prism .sia-floating-consult input[type="text"]:focus,
  .theme-prism .sia-floating-consult input[type="tel"]:focus {
    border-color: #9b7bf2;
    box-shadow: 0 0 0 4px rgba(128, 89, 225, .10);
  }
  .mobile-ad-hero__badge i {
    box-shadow: 0 0 0 4px rgba(139, 92, 246, .13);
  }
  .mobile-ad-hero__cta {
    box-shadow: 0 13px 28px rgba(128, 89, 225, .24);
  }
}

/* Flex-gap fallback for engines before Safari 14.1 / older Android Chromium.
   Only common mobile flex rows are patched, so modern layouts are untouched. */
@media (max-width: 767px) {
  html.sia-no-flex-gap .mobile-ad-hero__chips > * + *,
  html.sia-no-flex-gap .mobile-ad-hero__cta > * + *,
  html.sia-no-flex-gap .course-story-more a > * + *,
  html.sia-no-flex-gap .course-field-more a > * + *,
  html.sia-no-flex-gap .college-field-more a > * + * {
    margin-left: 8px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto !important;
  }
}