/**
 * Mobile compatibility layer — keeps legacy rem layout stable and prevents overflow.
 */
@media (max-width: 1200px) {
  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  .meibovue-page-root,
  #__nuxt {
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
  }

  .top-header,
  .dry-eye-container,
  .dry-eye-header,
  .dry-eye-section1,
  .dry-eye-section2,
  .site-footer,
  .site-footer-content,
  .inquiry-container {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  .dry-eye-content-main,
  .dry-eye-content-main.video-content,
  .contact-item,
  .flex-1,
  .flex-2 {
    min-width: 0;
    max-width: 100%;
  }

  /* Do NOT set `display` here — the .pc / .mobile variants toggle their own
     visibility in dry-eye.css. Forcing display:block used to reveal BOTH the
     desktop and mobile hero image at once (duplicate banner on phones). */
  .dry-eye-header-img,
  .dry-eye-content-img {
    width: 100%;
    max-width: 100%;
    height: auto;
  }

  .content-p {
    font-size: 16px;
    line-height: 1.65;
  }

  .feature-title {
    font-size: 22px;
    line-height: 1.35;
    text-align: center;
    width: 100%;
  }

  .feature-des {
    font-size: 16px;
    line-height: 1.6;
    text-align: center;
    width: 100%;
  }

  .inquiry-form-container {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .site-footer .inquiry-container {
    padding-left: 12px;
    padding-right: 12px;
  }

  .site-footer .site-footer-content {
    padding-left: 12px;
    padding-right: 12px;
  }

  .dry-eye-content-video {
    width: 100%;
    max-width: 100%;
  }

  .dry-eye-content-video iframe {
    width: 100%;
    max-width: 100%;
    min-height: 200px;
    aspect-ratio: 16 / 9;
    height: auto;
  }

  .site-header-mobile-top,
  .site-header-mobile-main {
    width: 100%;
    max-width: 100%;
  }

  .site-header-right-lan-content {
    max-width: calc(100vw - 24px);
  }
}

@media (max-width: 480px) {
  .content-p {
    font-size: 15px;
    line-height: 1.6;
  }

  .feature-title {
    font-size: 20px;
  }

  .dry-eye-header-buy {
    width: min(200px, 72vw);
    height: 48px;
    font-size: 16px;
  }

  .inquiry-form-title {
    font-size: 26px;
    line-height: 1.25;
    padding: 0 4px;
  }

  .meibovue-inquiry-form .submit-btn {
    width: min(150px, 100%);
  }
}