/* ============================================================
   모바일 전용 헤더 (≤900px) — Figma '모바일 헤더' / '모바일 헤더_메뉴'
   기본은 배경 없이 로고·다운로드·햄버거만, 햄버거를 누르면
   반투명 블러 패널이 아래로 펼쳐지며 메뉴가 나온다.
   ※ 이 파일은 <link media="(max-width: 900px)">로만 불러온다.
   ============================================================ */
@media (max-width: 900px) {

  /* PC 헤더는 감추고 모바일 헤더로 교체 */
  .site-header { display: none !important; }

  .m-nav {
    display: block;
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 200;
    border-radius: 0 0 14px 14px;
    transition: background-color .2s ease;
  }
  .m-nav.is-open {
    background: rgba(113, 113, 113, .27);
    -webkit-backdrop-filter: blur(7.6px);
    backdrop-filter: blur(7.6px);
    box-shadow: 0 4px 14px 0 rgba(0, 0, 0, .75);
  }

  .m-bar {
    height: 50px;
    padding: 0 24px;
    display: flex; align-items: center; justify-content: space-between;
  }
  .m-logo { position: relative; display: block; width: 179.009px; height: 22px; overflow: hidden; flex-shrink: 0; }
  .m-logo .a { position: absolute; inset: 0 3.57% 0 0; width: 96.43%; height: 100%; }
  .m-logo .b { position: absolute; left: 97.39%; top: 62.85%; width: 2.61%; height: 21.23%; }

  .m-acts { display: flex; align-items: center; gap: 8px; }
  .m-dl { display: flex; align-items: center; }
  .m-dl img { width: 20px; height: 20px; }
  .m-burger { width: 32px; height: 32px; padding: 0; display: flex; align-items: center; justify-content: center; }
  .m-burger img { width: 32px; height: 32px; }

  .m-menu { display: none; flex-direction: column; align-items: center; padding: 10px 0; }
  .m-nav.is-open .m-menu { display: flex; }
  .m-menu > a {
    width: 100%;
    padding: 20px 0;
    text-align: center; text-decoration: none;
    font-family: 'Montserrat', sans-serif; font-weight: 600; font-size: 16px; line-height: normal;
    transition: background-color .15s ease, color .15s ease;
  }
  /* 기본은 모두 같은 상태, 누르는 순간에만 파란 배경 + 흰 글씨 (대표 지시) */
  .m-menu > a:active,
  .m-menu > a.is-tap { background: #0e6dff; color: #fff; font-weight: 700; }

  .m-lang {
    width: 100%;
    display: flex; align-items: flex-end; justify-content: flex-end; gap: 20px;
    padding: 12px 30px 6px;
    font-family: 'Montserrat', sans-serif; font-weight: 600; font-size: 16px; line-height: normal;
  }
  .m-lang span { cursor: pointer; }

  /* ---- 어두운 표지 위 (COMPANY · SOLUTION · SERVICE) ---- */
  .m-nav .m-logo img,
  .m-nav .m-dl img { filter: brightness(0) invert(1); }
  .m-nav .m-menu > a { color: rgba(255, 255, 255, .3); }
  .m-nav .m-lang .kr { color: #fff; }
  .m-nav .m-lang .en { color: rgba(255, 255, 255, .3); }
  .m-nav .m-lang.is-en .kr { color: rgba(255, 255, 255, .3); }
  .m-nav .m-lang.is-en .en { color: #fff; }

  /* ---- 밝은 표지 위 (메인 홈 · HARDWARE) ----
     Figma 원본은 어두운 사진 기준이라 흰색이지만, 밝은 배경에서는 글자가 사라져
     같은 구조에 잉크 색만 반전해 쓴다 */
  .m-nav.on-light .m-logo img,
  .m-nav.on-light .m-dl img { filter: none; }
  .m-nav.on-light .m-burger img { filter: brightness(0); }
  .m-nav.on-light .m-menu > a { color: rgba(2, 2, 2, .3); }
  .m-nav.on-light .m-lang .kr { color: #020202; }
  .m-nav.on-light .m-lang .en { color: rgba(2, 2, 2, .3); }
  .m-nav.on-light .m-lang.is-en .kr { color: rgba(2, 2, 2, .3); }
  .m-nav.on-light .m-lang.is-en .en { color: #020202; }
  /* 메뉴가 열리면 패널이 어두워지므로 밝은 표지에서도 흰 글씨가 읽힌다 */
  .m-nav.on-light.is-open { background: rgba(20, 22, 26, .72); }
  .m-nav.on-light.is-open .m-logo img,
  .m-nav.on-light.is-open .m-dl img { filter: brightness(0) invert(1); }
  .m-nav.on-light.is-open .m-burger img { filter: none; }
  .m-nav.on-light.is-open .m-menu > a { color: rgba(255, 255, 255, .3); }
  .m-nav.on-light.is-open .m-lang .kr { color: #fff; }
  .m-nav.on-light.is-open .m-lang .en { color: rgba(255, 255, 255, .3); }
  .m-nav.on-light.is-open .m-lang.is-en .kr { color: rgba(255, 255, 255, .3); }
  .m-nav.on-light.is-open .m-lang.is-en .en { color: #fff; }
}