/* ============================================================================
   KBF 공개 화면 — 전체메뉴 · 통합검색 오버레이
   ----------------------------------------------------------------------------
   KBF-36 (KBA-37) · Paper `S62b`(LVR-0) · `S63b`(LZA-0) 실측
   `KBF-44` 가 그린 시안 4장(S62b·S63b·S62bm·S63bm)의 퍼블리싱이다.

   ⚠️ `D-44-01`(안 C) — 모바일 헤더 햄버거는 없다. Bottom Nav 「더보기」가 유일한 진입점.
   ⚠️ 딤 75%(#000000BF)는 KRDS 승계(`D-44-04`).
   ⚠️ 패널은 헤더 아래(top 122 = Skip Nav 30 + Header 92)에 붙는다. 그래서 **헤더는 딤 위에
      남고** 트리거 재클릭으로 닫을 수 있다(시안 각주 「닫기 4중」의 4번째).
   ========================================================================= */

/* 🚨 컨테이너는 화면 전체를 덮지만 **클릭을 받지 않는다.**
   딤과 패널은 top 122 부터라 헤더가 비어 보이지만, 컨테이너가 inset:0 이라
   그 투명한 영역이 헤더 버튼을 가로챈다 — 「트리거 재클릭으로 닫기」가 죽었다.
   증상이 `D-35-01`(#wrap inert)과 같다: **화면엔 정상인데 안 눌린다.**
   ⇒ 컨테이너는 pointer-events:none, 실제로 눌려야 하는 딤·패널만 auto. */
.kbf-overlay { position: fixed; inset: 0; z-index: 900; pointer-events: none; }
.kbf-overlay[hidden] { display: none; }
.kbf-overlay__scrim,
.kbf-overlay__panel { pointer-events: auto; }

.kbf-overlay__scrim {
  position: absolute;
  left: 0;
  top: 122px;                 /* Skip Nav 30 + Header 92 — 헤더는 덮지 않는다 */
  right: 0;
  bottom: 0;
  background-color: #000000BF;   /* 75% — KRDS 승계 */
}

.kbf-overlay__panel {
  position: absolute;
  left: 0;
  top: 122px;
  right: 0;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  max-height: calc(100vh - 122px);
  overflow-y: auto;
  background-color: var(--krds-color-light-gray-0);
  border-bottom: 1px solid var(--krds-color-light-gray-20);
}

/* ═══ 「관련 사이트」 바텀시트 — KBF-58 (KBA-59) · 2026-08-30 ═══════════════
   🚨 모바일 네이티브 드롭다운이 KRDS 와 이질적이고 셀렉트와 폭·위치가 어긋나
      우리가 그린 시트로 대체한다. **브라우저 UI 는 CSS 로 못 바꾼다.**

   ⚠️ **특이도를 일부러 높였다**(`.kbf-overlay__panel.kbf-related-sheet` = 0,2,0).
      기본 패널은 `top:122px`, 모바일에서는 `top:0; bottom:0` 으로 **풀스크린**이 된다
      (sitemap·search 가 그렇다). 한 겹으로는 그 둘 중 하나에 진다 —
      `D-41-01` 이 다섯 번 반복한 실수다. 덮기 전에 원본 두 선언을 모두 확인했다. */
.kbf-overlay__panel.kbf-related-sheet {
  top: auto;
  bottom: 0;
  max-height: 70vh;
  padding: 6px 16px 24px;
  border-bottom: 0;
  border-radius: 16px 16px 0 0;
}
.kbf-related-sheet__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: 10px 6px;
}
.kbf-related-sheet__tit {
  margin: 0;
  color: var(--krds-color-light-gray-90);
  font-size: 17px;
  font-weight: 700;
  line-height: 26px;
}
.kbf-related-sheet__list {
  margin: 0;
  padding: 0;
  list-style: none;
}
/* 터치 목표 56px — KRDS 권장(44px)보다 넉넉하다. 시트는 손가락으로만 쓴다. */
.kbf-related-sheet__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 56px;
  padding-inline: 4px;
  color: var(--krds-color-light-gray-90);
  font-size: 16px;
  line-height: 24px;
  text-decoration: none;
  border-bottom: 1px solid var(--krds-color-light-gray-10);
}
.kbf-related-sheet__list li:last-child .kbf-related-sheet__link { border-bottom: 0; }
.kbf-related-sheet__link > svg { flex-shrink: 0; color: var(--krds-color-light-gray-50); }

.kbf-overlay__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 28px;
}
.kbf-overlay__tit {
  margin: 0;
  color: var(--krds-color-light-gray-90);
  font-size: 20px;
  font-weight: 700;
  line-height: 30px;
}
.kbf-overlay__close {
  display: inline-flex;
  padding: 0;
  border: 0;
  background: none;
  color: var(--krds-color-light-gray-90);
  cursor: pointer;
  flex-shrink: 0;
}
.kbf-overlay__note {
  margin: 0;
  padding-top: 20px;
  color: var(--krds-color-light-gray-50);
  font-size: 13px;
  font-weight: 400;
  line-height: 20px;
}


/* ── 전체메뉴 (S62b) ──────────────────────────────────────────────────────
   padding 36/48/32 · Columns gap 24 · 7컬럼 균등 → 1344 − 24×6 = 1200 ÷ 7 ≈ 171 */
.kbf-sitemap { padding: 36px var(--kbf-gutter) 32px; }

.kbf-sitemap__cols { display: flex; align-items: flex-start; gap: 24px; }
.kbf-sitemap__col {
  display: flex;
  flex-direction: column;
  /* flex 3속성을 세트로 준다 — basis 를 빼면 콘텐츠 폭이 비율을 이긴다(D-41-01 ⑤). */
  flex: 1 1 0;
  min-width: 0;
}
.kbf-sitemap__col-head {
  padding-bottom: 12px;
  border-bottom: 2px solid var(--krds-color-light-primary-60);
  color: var(--krds-color-light-gray-90);
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  text-decoration: none;
}
.kbf-sitemap__items { margin: 0; padding: 0; list-style: none; }
.kbf-sitemap__item {
  display: flex;
  align-items: center;
  height: 40px;
  color: var(--krds-color-light-gray-70);
  font-size: 15px;
  font-weight: 400;
  line-height: 23px;
  text-decoration: none;
}
.kbf-sitemap__item:hover,
.kbf-sitemap__col-head:hover { color: var(--krds-color-light-primary-60); }

.kbf-sitemap__utility {
  display: flex;
  align-items: center;
  margin-top: 32px;
  padding-top: 28px;
  gap: 28px;
  border-top: 1px solid var(--krds-color-light-gray-10);
}
.kbf-sitemap__util {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--krds-color-light-gray-50);
  font-size: 15px;
  font-weight: 400;
  line-height: 23px;
  text-decoration: none;
}


/* ── 통합검색 (S63b) ──────────────────────────────────────────────────────
   padding 44/48/36 · Search Row gap 28 · Input h64 · Suggestions pt 36 gap 80 */
.kbf-search { padding: 44px var(--kbf-gutter) 36px; }

.kbf-search__row { display: flex; align-items: center; gap: 28px; }
.kbf-search__input {
  display: flex;
  align-items: center;
  flex: 1 1 0;
  min-width: 0;
  height: 64px;
  padding-inline: 8px;
  gap: 14px;
  border-bottom: 2px solid var(--krds-color-light-primary-60);
}
.kbf-search__input svg { flex-shrink: 0; }
.kbf-search__field {
  flex: 1 1 0;
  min-width: 0;
  border: 0;
  background: none;
  color: var(--krds-color-light-gray-90);
  font-family: inherit;
  font-size: 20px;
  font-weight: 400;
  line-height: 30px;
}
.kbf-search__field::placeholder { color: var(--krds-color-light-gray-40); }
.kbf-search__field:focus { outline: none; }

.kbf-search__sugg { display: flex; padding-top: 36px; gap: 80px; }
.kbf-search__block { display: flex; flex-direction: column; flex: 1 1 0; min-width: 0; gap: 14px; }
.kbf-search__block-head { display: flex; align-items: center; justify-content: space-between; }
.kbf-search__block-head--pb8 { padding-bottom: 8px; }
.kbf-search__block-tit {
  margin: 0;
  color: var(--krds-color-light-gray-90);
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
}
.kbf-search__clear {
  color: var(--krds-color-light-gray-50);
  font-size: 14px;
  line-height: 21px;
}
.kbf-search__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.kbf-search__chip {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding-inline: 14px;
  border: 1px solid var(--krds-color-light-gray-20);
  border-radius: 18px;
  color: var(--krds-color-light-gray-70);
  font-size: 15px;
  line-height: 23px;
}
.kbf-search__popular { margin: 0; padding: 0; list-style: none; }
.kbf-search__pop-row { display: flex; align-items: center; height: 34px; gap: 14px; }
.kbf-search__pop-rank {
  width: 18px;
  flex-shrink: 0;             /* 고정폭 슬롯 — 순위가 두 자리여도 세로 레인이 유지된다 */
  color: var(--krds-color-light-primary-60);
  font-size: 14px;
  font-weight: 700;
  line-height: 21px;
}
.kbf-search__pop-kw {
  color: var(--krds-color-light-gray-70);
  font-size: 15px;
  line-height: 23px;
}


/* ── 태블릿 768~1439 ──────────────────────────────────────────────────── */
@media (min-width: 768px) and (max-width: 1439px) {
  .kbf-sitemap        { padding: 28px 24px 24px; }
  .kbf-sitemap__cols  { flex-wrap: wrap; gap: 16px 20px; }
  .kbf-sitemap__col   { flex: 1 1 150px; }
  .kbf-search         { padding: 32px 24px 28px; }
  .kbf-search__sugg   { gap: 40px; }
}


/* ── 모바일 ≤767 — 전체화면 (S62bm 390×1322 · S63bm) ─────────────────────
   ⚠️ 헤더 햄버거가 없으므로(D-44-01 안 C) 딤을 헤더 아래로 물릴 이유가 없다.
      전체화면으로 덮고 닫기 X 를 패널 안에 둔다.
   ⚠️ 08 Public Mobile 정밀 실측은 Phase 2 에서 하고 그때 교정한다. */
@media (max-width: 767px) {
  .kbf-overlay__scrim { top: 0; }
  .kbf-overlay__panel {
    top: 0;
    bottom: 0;
    max-height: none;
    border-bottom: 0;
  }
  /* ⚠️ 바로 위 규칙이 패널을 **풀스크린**으로 만든다. 바텀시트는 그러면 안 되므로
     같은 블록 안에서 다시 덮는다 — 두 겹 셀렉터라 특이도로 이긴다. */
  .kbf-overlay__panel.kbf-related-sheet {
    top: auto;
    bottom: 0;
    max-height: 70vh;
    border-radius: 16px 16px 0 0;
  }
  .kbf-sitemap { padding: 20px 16px 32px; }
  .kbf-search  { padding: 20px 16px 32px; }

  .kbf-sitemap__cols { flex-direction: column; gap: 0; }
  .kbf-sitemap__col  { flex: 0 0 auto; width: 100%; }
  .kbf-sitemap__col-head { padding-block: 14px 10px; }
  .kbf-sitemap__items    { padding-bottom: 6px; }

  .kbf-sitemap__utility { flex-direction: column; align-items: flex-start; gap: 14px; margin-top: 24px; padding-top: 20px; }

  .kbf-search__row   { gap: 12px; }
  .kbf-search__input { height: 52px; }
  .kbf-search__field { font-size: 17px; line-height: 26px; }
  .kbf-search__sugg  { flex-direction: column; gap: 28px; padding-top: 28px; }
}