/* ===== Mobile GNB (<=767.98px): 폴더탭 + 서브메뉴 정리본 ===== */
@media (max-width: 767.98px) {
  /* ---------- 공통 변수 (필요시 여기 숫자만 조정) ---------- */
  #nt_menu_mobile {
    --bar-bg: #35b6ad; /* 메인바 배경 */
    --bar-grad: #2eb2a8; /* 메인바 그라데이션 하단톤 */
    --subbar-bg: #40c2ba; /* 서브바 배경(메인보다 살짝 밝게) */
    --accent: #ff3b30; /* 활성 탭 글자색(빨강) */

    --tab-r: 14px; /* 탭 라운드(윗모서리) */
    --tab-ov: 12px; /* 탭이 서브바 위로 겹치는 높이 */
    --tab-gap: 14px; /* 상단 탭 간격 */
    --tab-px: 14px; /* 탭 좌우 패딩 */
    --tab-py: 8px; /* 탭 상하 패딩 */
    --chip-bg: rgba(255, 255, 255, 0.16); /* 활성 탭 칩 배경(유리칩 느낌) */

    --pad-side: 16px; /* 좌우 패딩(메인/서브 공통) */
    --gap-sub: 12px; /* 서브메뉴 아이템 간격 */
  }

  /* ---------- 메인바(상단) ---------- */
  #nt_menu_mobile .bg-primary {
    background: linear-gradient(
      180deg,
      var(--bar-bg) 0%,
      var(--bar-grad) 100%
    ) !important;
    min-height: auto; /* 테마 기본값 신뢰, 높이 강제하지 않음 */
  }

  /* 메인바 내부 좌우 여백 */
  #nt_menu_mobile .bg-primary > .na-table .position-relative#mobile_nav {
    padding-left: var(--pad-side) !important;
    padding-right: var(--pad-side) !important;
  }

  /* 그라데이션 페이드(좌/우) 색 맞춤 */
  #nt_menu_mobile .gra-left-primary {
    background: linear-gradient(
      90deg,
      var(--bar-bg) 0%,
      rgba(53, 182, 173, 0) 100%
    ) !important;
    pointer-events: none;
  }
  #nt_menu_mobile .gra-right-primary {
    background: linear-gradient(
      270deg,
      var(--bar-bg) 0%,
      rgba(53, 182, 173, 0) 100%
    ) !important;
    pointer-events: none;
  }

  /* 상단 탭 리스트 간격 + 폴백(margin-left) */
  #nt_menu_mobile #mobile_nav ul.d-flex {
    gap: var(--tab-gap) !important;
    column-gap: var(--tab-gap) !important;
    align-items: center;
  }
  #nt_menu_mobile #mobile_nav ul.d-flex > li + li {
    margin-left: var(--tab-gap) !important;
  }

  /* 스크롤 끝 잘림 방지 스페이서 */
  #nt_menu_mobile #mobile_nav li.mo-spacer,
  #nt_menu_mobile #mobile_nav_sub1 .mo-spacer,
  #nt_menu_mobile #mobile_nav_sub2 .mo-spacer {
    flex: 0 0 14px !important;
    list-style: none;
  }

  /* ---------- 탭(상단) : 폴더탭 스타일 ---------- */
  #nt_menu_mobile #mobile_nav .mo-link {
    position: relative;
    display: inline-block;
    padding: var(--tab-py) var(--tab-px) !important;
    border-radius: var(--tab-r) var(--tab-r) 0 0; /* 위쪽만 둥글게 */
    background: transparent !important;
    color: #fff !important;
    font-weight: 800;
    line-height: 1.2;
    white-space: nowrap;
    text-decoration: none !important;
    letter-spacing: -0.2px;
    z-index: 2; /* 서브바보다 위 */
    transition: filter 0.15s ease, transform 0.15s ease;
  }
  #nt_menu_mobile #mobile_nav .mo-link:hover {
    filter: brightness(1.08);
  }
  #nt_menu_mobile #mobile_nav .mo-link:active {
    transform: translateY(1px);
  }

  /* 활성 탭: 텍스트 색 + 유리칩 배경 */
  #nt_menu_mobile #mobile_nav .mo-link.on {
    color: var(--accent) !important;
    background: var(--chip-bg) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22);
  }
  /* 폴더탭 스커트(아래로 부드럽게 이어짐) */
  #nt_menu_mobile #mobile_nav .mo-link.on::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: calc(var(--tab-ov) + 1px);
    bottom: calc(-1 * var(--tab-ov));
    background: var(--chip-bg);
    border-radius: 0 0 var(--tab-r) var(--tab-r);
    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.05);
    z-index: -1;
  }

  /* ---------- 서브바(탭 아래) ---------- */
  #nt_menu_mobile #mobile_nav_sub1,
  #nt_menu_mobile #mobile_nav_sub2 {
    position: relative;
    z-index: 1; /* 탭(z=2) 아래 */
    background: var(--subbar-bg) !important;
    padding-left: var(--pad-side) !important;
    padding-right: var(--pad-side) !important;

    /* 폴더탭 접합: 살짝 끌어올리고, 안쪽 위 여백은 얇게 */
    margin-top: calc(-1 * var(--tab-ov)) !important;
    padding-top: calc(var(--tab-ov) + 1px) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
  }

  /* 서브메뉴 리스트 간격 + 폴백 */
  #nt_menu_mobile #mobile_nav_sub1 ul.d-flex,
  #nt_menu_mobile #mobile_nav_sub2 ul.d-flex {
    align-items: center;
    gap: var(--gap-sub) !important;
    column-gap: var(--gap-sub) !important;
  }
  #nt_menu_mobile #mobile_nav_sub1 ul.d-flex > li + li,
  #nt_menu_mobile #mobile_nav_sub2 ul.d-flex > li + li {
    margin-left: var(--gap-sub) !important;
  }

  /* 서브메뉴 아이템(밑줄 제거, 글자만 반응) + 위쪽 여백 축소 */
  #nt_menu_mobile #mobile_nav_sub1 a,
  #nt_menu_mobile #mobile_nav_sub2 a {
    display: inline-block;
    padding-top: 0 !important; /* ← 글자 위 여백 줄임 */
    padding-bottom: 3px !important; /* ← 필요시 4~6px로 */
    padding-left: 6px !important;
    padding-right: 6px !important;
    color: #073c3f !important;
    font-weight: 700;
    background: transparent !important;
    border-radius: 0 !important;
    text-decoration: none !important; /* 밑줄 없음 */
    white-space: nowrap;
    transition: color 0.15s ease, opacity 0.15s ease;
  }
  #nt_menu_mobile #mobile_nav_sub1 a:hover,
  #nt_menu_mobile #mobile_nav_sub2 a:hover {
    color: #ffffff !important; /* 밑줄 대신 색상만 */
    opacity: 0.95;
  }
  #nt_menu_mobile #mobile_nav_sub1 a.text-primary,
  #nt_menu_mobile #mobile_nav_sub2 a.text-primary {
    color: #ffffff !important;
    font-weight: 800;
  }
}

/* === 서브메뉴 좌/우 그라디언트 색을 서브바와 동일하게 === */
@media (max-width: 767.98px) {
  /* 이미 정리본에서 쓰는 변수 그대로 사용 */
  #nt_menu_mobile {
    --subbar-bg: #40c2ba;
  } /* 필요시 다른 톤으로 바꾸면 즉시 반영 */

  /* LEFT fade */
  #nt_menu_mobile #mobile_nav_sub1 .gra-left-white,
  #nt_menu_mobile #mobile_nav_sub2 .gra-left-white {
    background: linear-gradient(
      90deg,
      var(--subbar-bg) 0%,
      rgba(0, 0, 0, 0) 100%
    ) !important;
    pointer-events: none !important;
  }

  /* RIGHT fade */
  #nt_menu_mobile #mobile_nav_sub1 .gra-right-white,
  #nt_menu_mobile #mobile_nav_sub2 .gra-right-white {
    background: linear-gradient(
      270deg,
      var(--subbar-bg) 0%,
      rgba(0, 0, 0, 0) 100%
    ) !important;
    pointer-events: none !important;
  }
}

/* == 모바일(≤767px)에서 '좌: 대형 카드' 하단 과도 여백 제거 == */
@media (max-width: 767.98px) {
  /* 1) 그리드가 자식 칸을 강제로 늘이지 않도록 */
  .hf-root .hf-hero {
    align-items: start !important; /* stretch → start */
  }

  /* 2) 카드 자체는 콘텐츠에 딱 맞게 */
  .hf-root .hf-hero .left {
    min-height: 0 !important; /* 데스크탑용 최소높이 무력화 */
    height: auto !important;
  }

  /* 3) 마지막 패딩 래퍼(위젯 담긴 div)의 float 잔여로 인한 높이 붕괴 방지 */
  .hf-root .hf-hero .left > div:last-child {
    overflow: hidden; /* float clearfix 대용 */
  }

  /* 4) 위젯들이 남기는 바깥 여백/구분선 제거(스킨별 클래스 폭넓게 커버) */
  .hf-root .hf-hero .left .na-list,
  .hf-root .hf-hero .left .na-item,
  .hf-root .hf-hero .left [class*="list-"],
  .hf-root .hf-hero .left [class*="gallery"],
  .hf-root .hf-hero .left .na-garo,
  .hf-root .hf-hero .left .na-garo * {
    margin-bottom: 0 !important;
    border-bottom: 0 !important;
  }

  /* 5) 캐러셀·리스트 내부 float 요소가 있을 때 부모가 확실히 높이를 갖도록 */
  .hf-root .hf-hero .left .na-list::after,
  .hf-root .hf-hero .left .na-garo::after,
  .hf-root .hf-hero .left [class*="list-"]::after,
  .hf-root .hf-hero .left [class*="gallery"]::after {
    content: "";
    display: block;
    clear: both;
  }

  /* 6) 카드 안쪽 마지막 요소가 불필요하게 더 내려앉지 않도록 패딩 보정(선택) */
  .hf-root .hf-hero .left > div:last-child {
    padding-bottom: 10px !important; /* 필요하면 0~12px로 조절 */
  }
}

/* 모바일: hero 그리드 행을 내용 높이에 맞추고, 늘이기(stretch) 해제 */
@media (max-width: 767.98px) {
  .hf-root .hf-hero {
    grid-template-columns: 1fr !important; /* 이미 있으나 확실히 고정 */
    grid-auto-rows: auto !important; /* ← 핵심: 1fr → auto */
    align-items: start !important; /* stretch → start */
    row-gap: 12px !important; /* 필요시 10~16px로 조절 */
  }
  .hf-root .hf-hero .left,
  .hf-root .hf-hero .right {
    min-height: 0 !important;
    height: auto !important;
  }

  /* float 잔여로 부모 높이 붕괴/여백 착시 방지 */
  .hf-root .hf-hero .left > div:last-child,
  .hf-root .hf-hero .right > .hf-card:last-child {
    overflow: hidden; /* clearfix 대용 */
  }
}