/* ============================================================
   공용 상단 네비게이션 (.jc-global-nav) — 전 페이지 공통, 딱 한 곳에서만 렌더링됨(이중헤더 방지).
   PC: 가로 메뉴 그대로. 모바일(768px 이하): 햄버거 버튼 + 체크박스 트릭으로 토글 (JS 없음).
   ============================================================ */
.jc-global-nav {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 28px;
  padding: 18px 28px;
  background: #111827;
  color: #fff;
}

.jc-global-nav .jc-nav-brand {
  font-weight: 900;
  color: #fff;
  text-decoration: none;
  font-size: 30px;
  letter-spacing: -0.02em;
  justify-self: start;
}

.jc-global-nav .jc-nav-links {
  display: grid;
  grid-template-columns: repeat(5, auto);
  align-items: center;
  justify-content: center;
  gap: 8px 26px;
  grid-column: 2;
  min-width: 0;
}

.jc-global-nav .jc-nav-links > a {
  color: #e5e7eb;
  text-decoration: none;
  font-size: 17px;
  font-weight: 700;
  padding: 8px 4px;
  white-space: nowrap;
}

.jc-global-nav .jc-nav-links > a:hover,
.jc-global-nav .jc-nav-links > a.active {
  color: #facc15;
}

.jc-nav-toggle {
  display: none;
}

.jc-nav-burger {
  display: none;
  cursor: pointer;
  font-size: 30px;
  line-height: 1;
  padding: 6px 12px;
  border-radius: 8px;
  order: 2;
}

.jc-nav-burger:hover {
  background: rgba(255, 255, 255, 0.08);
}

/* ── 서비스 전체 드롭다운 (10종 아이템) — 여행/맛집과는 분리된 별도 그룹 ── */
.jc-nav-dropdown {
  position: relative;
}

.jc-nav-items-toggle {
  display: none;
}

.jc-nav-dropdown-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #e5e7eb;
  font-size: 17px;
  font-weight: 700;
  padding: 8px 4px;
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
}

.jc-nav-dropdown-label:hover {
  color: #facc15;
}

.jc-caret {
  font-size: 11px;
  transition: transform 0.15s ease;
}

.jc-nav-dropdown-panel {
  display: none;
}

.jc-nav-dropdown-panel a {
  color: #e5e7eb;
  text-decoration: none;
  font-weight: 600;
  white-space: nowrap;
}

/* 카테고리 체크박스는 항상 화면에서 숨김 — PC에서는 각 칸이 항상 펼쳐진 상태로 보이고
   (모바일 아코디언용 상태만 담당), 모바일에서만 아래 max-width:768px 블록이 열고 닫는 용도로 씀. */
.jc-nav-cat-toggle {
  display: none;
}

@media (min-width: 769px) {
  /* 바깥(.jc-nav-dropdown-panel): 위치 + "다리" 역할만 함.
     예전엔 margin-top:10px 로 라벨-패널 사이에 빈 공간을 뒀는데,
     그 10px 구간은 .jc-nav-dropdown 박스 밖이라 마우스가 지나가는 순간
     :hover 가 풀려서 패널이 display:none 이 돼버림 (그래서 하위메뉴 클릭이 안 됐던 것).
     → padding-top 으로 그 구간을 패널 "안"으로 편입시켜서 마우스가 계속 hover 상태를 유지하게 함.
     display:none 토글도 없앰 — opacity/visibility 로만 여닫아서 hover 체인이 절대 끊기지 않게 함. */
  .jc-nav-dropdown-panel {
    display: block;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translate(-50%, -4px);
    padding-top: 10px;
    z-index: 30;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .15s ease, transform .15s ease, visibility .15s ease;
  }

  /* 안쪽(.jc-nav-dropdown-panel-inner): 실제로 보이는 배경/보더는 여기서 담당.
     padding-top 다리 구간은 투명하게 남아서 시각적으로는 예전과 똑같이 10px 간격으로 보임.
     대표그룹 10개를 메가메뉴 그리드(.jc-nav-mega)로 한번에 펼쳐서 보여준다 — 카테고리마다
     따로 호버해야 하는 다단 플라이아웃 방식은 오작동(호버 체인 끊김) 위험이 커서 지양. */
  .jc-nav-dropdown-panel-inner {
    background: #1f2937;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 18px;
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.4);
  }

  .jc-nav-mega {
    display: grid;
    grid-template-columns: repeat(2, minmax(220px, 1fr));
    gap: 4px 22px;
    width: min(560px, 90vw);
    max-height: 74vh;
    overflow-y: auto;
    overflow-x: hidden;
  }

  /* 카테고리 칸: PC에서는 항상 펼쳐진 상태 — 체크박스/캐럿은 모바일 아코디언 전용이라 여기서는 숨김. */
  .jc-nav-cat-title {
    display: block;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .5px;
    color: #facc15;
    text-transform: uppercase;
    margin: 14px 0 6px;
    padding: 0 10px;
    cursor: default;
  }

  .jc-nav-cat:first-child .jc-nav-cat-title {
    margin-top: 0;
  }

  .jc-nav-cat-title .jc-cat-caret {
    display: none;
  }

  .jc-nav-cat-items {
    display: flex;
    flex-direction: column;
  }

  .jc-nav-dropdown:hover .jc-nav-dropdown-panel,
  .jc-nav-dropdown:focus-within .jc-nav-dropdown-panel,
  .jc-nav-items-toggle:checked ~ .jc-nav-dropdown-panel {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate(-50%, 0);
  }

  .jc-nav-dropdown:hover .jc-nav-dropdown-label .jc-caret,
  .jc-nav-items-toggle:checked ~ .jc-nav-dropdown-label .jc-caret {
    transform: rotate(180deg);
  }

  .jc-nav-dropdown-panel a {
    font-size: 14px;
    padding: 7px 10px;
    border-radius: 8px;
  }

  .jc-nav-dropdown-panel a:hover,
  .jc-nav-dropdown-panel a.active {
    background: rgba(250, 204, 21, 0.12);
    color: #facc15;
  }
}

/* 항상 2열 고정이라 태블릿 폭에서도 그대로 유지 (좁은 화면에서 살짝만 더 줄임) */
@media (min-width: 769px) and (max-width: 620px) {
  .jc-nav-mega { grid-template-columns: repeat(2, minmax(140px, 1fr)); width: min(400px, 90vw); }
}

@media (max-width: 768px) {
  .jc-global-nav {
    display: flex;
    flex-wrap: wrap;
  }

  .jc-global-nav .jc-nav-brand {
    margin-right: auto;
  }

  .jc-global-nav .jc-nav-links,
  .jc-nav-dropdown-panel,
  .jc-nav-dropdown-panel-inner {
    overflow-x: hidden;
  }

  .jc-nav-burger {
    display: block;
  }

  .jc-global-nav .jc-nav-links {
    display: none;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    order: 3;
  }

  .jc-global-nav .jc-nav-links > a {
    font-size: 17px;
    padding: 16px 6px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
  }

  .jc-nav-toggle:checked ~ .jc-nav-links {
    display: flex;
  }

  /* 모바일에서는 드롭다운이 아코디언으로 동작 (호버가 없으므로 체크박스로 열고 닫음) */
  .jc-nav-dropdown {
    border-top: 1px solid rgba(255, 255, 255, 0.12);
  }

  .jc-nav-dropdown-label {
    display: flex;
    justify-content: space-between;
    font-size: 17px;
    padding: 16px 6px;
    width: 100%;
  }

  .jc-nav-items-toggle:checked ~ .jc-nav-dropdown-label .jc-caret {
    transform: rotate(180deg);
  }

  .jc-nav-items-toggle:checked ~ .jc-nav-dropdown-panel {
    display: flex;
    flex-direction: column;
    max-height: 70vh;
    overflow-y: auto;
  }

  .jc-nav-dropdown-panel-inner {
    display: flex;
    flex-direction: column;
  }

  /* 대표그룹 10개를 아코디언으로: 카테고리 제목을 탭하면 그 칸만 펼쳐진다(카테고리별 체크박스). */
  .jc-nav-cat + .jc-nav-cat {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
  }

  .jc-nav-cat-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: .3px;
    color: #facc15;
    padding: 14px 20px;
    background: rgba(255, 255, 255, 0.04);
    cursor: pointer;
  }

  .jc-nav-cat-items {
    display: none;
    grid-template-columns: repeat(2, 1fr);
  }

  .jc-nav-cat-toggle:checked ~ .jc-nav-cat-items {
    display: grid;
  }

  .jc-nav-cat-toggle:checked ~ .jc-nav-cat-title .jc-cat-caret {
    transform: rotate(180deg);
  }

  .jc-nav-dropdown-panel a {
    font-size: 15px;
    padding: 14px 10px;
    background: rgba(255, 255, 255, 0.04);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    text-align: left;
    white-space: normal;
    word-break: keep-all;
    line-height: 1.35;
  }

  .jc-nav-cat-items a:nth-child(2n) {
    border-right: none;
  }
}

@media (max-width: 380px) {
  .jc-nav-dropdown-panel a {
    font-size: 14px;
    padding: 12px 6px;
  }
}