/* ===============================
   미리24 전역 반응형 확장 (2025-10-30)
   - 헤더/내비 모바일 패널
   - 드롭다운 터치 대응
   - 히어로/배너 꽉 차게
   - 공통 레이아웃 세분화
=================================*/

/* 헤더 컨테이너 */
.site-header .nav-container{max-width:1200px;margin:0 auto;padding:10px 16px;display:flex;align-items:center;justify-content:space-between;}
/* 햄버거 */
.hamburger{display:none; width:40px;height:36px;border:1px solid rgba(255,255,255,.3); border-radius:10px; background:transparent; cursor:pointer;}
.hamburger span{display:block; height:2px; margin:7px 8px; background:#fff}

/* 기본 내비 */
#primaryNav .nav-menu{display:flex; gap:20px; list-style:none; margin:0; padding:0;}
#primaryNav .dropdown{display:none; position:absolute; left:0; top:100%; min-width:180px; background:#fff; border:1px solid #eee; border-radius:10px; box-shadow:0 8px 24px rgba(0,0,0,.08);}
#primaryNav li:hover > .dropdown{display:block;}

/* ===== 모바일 내비 오버레이 위치/레이어 고정 ===== */
@media (max-width:1024px){
  /* 헤더가 항상 맨 위에 오도록 */
  .site-header{ z-index: 3000 !important; }

  /* 오버레이: 화면 밖으로 완전히 올려두고, 헤더 높이에 정확히 붙임 */
  #primaryNav{
    position: fixed !important;
    inset: calc(var(--nav-h, 64px)) 0 0 0 !important; /* 헤더 바로 아래부터 시작 */
    background: #111 !important;
    transform: translateY(-110%) !important;          /* -100%보다 더 올려 '잔상 띠' 제거 */
    transition: transform .25s ease !important;
    z-index: 2500 !important;                          /* 헤더(3000) 아래, 배너(기본) 위 */
    padding: 12px 16px 24px !important;
  }
  body.nav-open #primaryNav{ transform: translateY(0) !important; }

  /* 햄버거 버튼이 오버레이보다 위에서 항상 보이도록 */
  .hamburger{ z-index: 3200 !important; }
}

/* 히어로/배너 이미지 꽉 차게 */
.hero-image .hero-img{ display:block; width:100%; height:auto; }
@media (max-width:640px){
  .hero h1{ font-size:24px !important; }
  .hero .btn{ padding:10px 14px !important; }
}

/* 퀵바: 너무 작을 때 겹침 방지 */
@media (max-width:480px){
  .fixed-quickbar .qcard{ grid-template-columns: repeat(2, 1fr) !important; }
}

/* 공지/인포 스트립 1열화 */
@media (max-width:960px){
  .info-grid{ grid-template-columns: 1fr !important; row-gap:16px; }
}
/* ===== 메인 배너 모바일 축소 (img 배너용) ===== */

/* 태블릿 이하 */
@media (max-width: 1024px){
  /* 배너 컨테이너 높이를 적정 수준으로 제한 */
  #hero .media,
  .hero .media,
  .hero-image,
  .hero-banner,
  .main-banner {  /* 너희 프로젝트에 쓰는 배너 래퍼가 있다면 같이 포함 */
    --hero-h: clamp(200px, 35vh, 340px);  /* 화면 높이 기준으로 자연스런 높이 */
    height: var(--hero-h) !important;
    min-height: 0 !important;
    overflow: hidden;
  }

  /* 배너 이미지가 영역 안에서만 보이도록 */
  #hero img,
  .hero img,
  .hero-image img,
  .hero-banner img,
  .main-banner img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;      /* 넘치는 부분은 잘라서 균형 잡힘 */
    object-position: center;/* 중앙 기준으로 크롭 */
    display: block;
  }
}

/* 모바일(폰) */
@media (max-width: 640px){
  #hero .media,
  .hero .media,
  .hero-image,
  .hero-banner,
  .main-banner {
    --hero-h: clamp(140px, 28vh, 220px); /* 폰에서는 더 얕게 */
  }
}

@media (max-width: 640px){
  body > header + * {
    --hero-h: clamp(140px, 28vh, 220px); /* 폰에서는 더 얕게 */
  }
}
@media (max-width: 1024px){
  body > header + * {
    background-size: cover !important;
    background-position: center center !important;
  }
}
/* 닫힌 모바일 내비는 완전히 숨겨 레이어/클릭 차단 */
@media (max-width:1024px){
  #primaryNav{
    visibility: hidden !important;
    pointer-events: none !important;
  }
  body.nav-open #primaryNav{
    visibility: visible !important;
    pointer-events: auto !important;
  }

  /* 배너가 내비보다 아래로 깔리는 것을 방지 */
  .home-banner{ position: relative !important; z-index: 1 !important; }
}
/* 배너가 다음 섹션 위에 올라오게 */
.home-banner{ position: relative !important; z-index: 3 !important; }

/* 배너 바로 다음 섹션(카드/인트로 등)이 배너를 덮지 않도록 */
.home-banner + *{
  position: relative !important;
  z-index: 1 !important;
  margin-top: 0 !important;      /* 혹시 음수 마진/과한 상단 여백이 있으면 제거 */
  padding-top: clamp(8px, 1.5vh, 16px); /* 살짝 띄움(원치 않으면 지워도 됨) */
  background: inherit;            /* 회색 덮개 방지(섹션마다 다르면 생략 가능) */
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
}
/* 트랙/슬라이드 기본값 정리 */
.home-banner .track{ 
  position: relative !important; 
  height: var(--banner-h) !important; 
  overflow: hidden !important; 
}
.home-banner .track > img{
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center top !important;
  opacity: 0 !important;          /* 기본은 보이지 않게 */
  z-index: 0 !important;
  transition: opacity .35s ease !important;
}
/* 활성 슬라이드만 보이고 가장 위로 */
.home-banner .track > img.active,
.home-banner .track > img.is-active,
.home-banner .track > img[data-active="1"]{
  opacity: 1 !important;
  z-index: 2 !important;
  pointer-events: auto !important;
}
/* 비활성 슬라이드는 클릭 막기 */
.home-banner .track > img:not(.active):not(.is-active):not([data-active="1"]){
  pointer-events: none !important;
}
/* === 배너가 다음 섹션을 절대 덮지 않도록 (모바일/태블릿) === */
@media (max-width:1024px){
  /* 배너는 레이어 가장 아래로 */
  .home-banner{
    position: relative !important;
    z-index: 0 !important;
    margin-bottom: 0 !important;
  }
  .home-banner .track{
    height: var(--banner-h) !important;
    overflow: hidden !important; /* 배너 내부만 자름 */
  }

  /* 내비 닫힘 상태는 완전 비활성화(잔상 레이어 차단) */
  #primaryNav{
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateY(-110%) !important; /* 혹시 남은 트랜스폼 대비 */
  }
  body.nav-open #primaryNav{
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateY(0) !important;
  }

  /* 배너 '바로 다음' 섹션은 배너 위로 띄우고, 어떤 자식도 잘리지 않게 */
  .home-banner + *{
    position: relative !important;
    z-index: 2 !important;
    margin-top: 0 !important;
    padding-top: 12px !important;     /* 살짝 띄워 겹침 방지(원치 않으면 줄여도 됨) */
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
  }
  /* 다음 섹션과 그 자식들의 잘림 해제 */
  .home-banner + *, .home-banner + * *{
    overflow: visible !important;
  }

  /* 섹션 첫 제목이 배너에 붙어서 들어가면 여백 보강 */
  .home-banner + * h1:first-child,
  .home-banner + * h2:first-child{
    margin-top: 8px !important;
  }
}

/* === 배너 슬라이드 쌓임 고정(3번째가 항상 위에서 보이게) === */
.home-banner .track{ position: relative !important; }
.home-banner .track > img{
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important; height: 100% !important;
  object-fit: cover !important; object-position: center top !important;
  opacity: 0 !important; z-index: 0 !important; transition: opacity .3s ease !important;
}
.home-banner .track > img.active,
.home-banner .track > img.is-active,
.home-banner .track > img[data-active="1"]{
  opacity: 1 !important; z-index: 2 !important; pointer-events: auto !important;
}
.home-banner .track > img:not(.active):not(.is-active):not([data-active="1"]){
  pointer-events: none !important;
}
/* === 데스크톱(>1024px) 드롭다운 가독성/레이어 보정 === */
@media (min-width:1025px){
  /* 드롭다운 기본 */
  .site-header .nav-menu .dropdown{
    display: none;
    position: absolute;
    left: 0; top: 100%;
    min-width: 180px;
    background: #ffffff !important;          /* 흰 배경 고정 */
    border: 1px solid #eee;
    border-radius: 10px;
    box-shadow: 0 12px 30px rgba(0,0,0,.08);
    z-index: 2600;                            /* 헤더 아래, 배너 위 */
    padding: 6px 0;
  }
  .site-header .nav-menu li:hover > .dropdown{ display: block; }

  /* 항목 텍스트/호버 컬러 */
  .site-header .nav-menu .dropdown a{
    display: block;
    padding: 10px 12px;
    color: #111 !important;                   /* 기본 글자: 진회색 */
    text-decoration: none;
    white-space: nowrap;
  }
  .site-header .nav-menu .dropdown a:hover{
    background: #ef4444 !important;           /* 빨간 배경 */
    color: #fff !important;                    /* 흰 글자 */
  }
}