@charset "utf-8";
/* ==========================================================================
   모바일 내비게이션 (2026-09-16)
   992px 미만에서만 동작한다. 데스크톱은 한 줄도 건드리지 않는다.

   구성
     .tgm-bar    헤더 로고 줄 오른쪽의 [검색] [메뉴] 버튼
     .tgm-chips  헤더 아래 가로 스크롤 카테고리 칩 줄 (지금 보는 곳이 파랗게)
     .tgm-sheet  [메뉴] 를 누르면 아래에서 올라오는 전체 메뉴 (접지 않는다)

   ⚠ 헤더 위에 얹히는 게 아니라 헤더 **안에** 들어간다. 그래서 테마의
     자동 숨김(navbar-sticky-moved-up: margin-top -100px)이 칩 줄 높이만큼
     모자라게 된다 — 아래 3절에서 -150px 로 늘려 놨다.
   ========================================================================== */

:root {
  --tgm-brand:      #1d98dc;
  --tgm-brand-dark: #0f6f9e;
  --tgm-brand-tint: #e9f5fc;
  --tgm-ink:        #0d1b24;
  --tgm-body:       #3d4c57;
  --tgm-soft:       #6b7a87;
  --tgm-line:       #e3e9ed;
  --tgm-ground:     #f2f5f7;
  --tgm-chip-bg:    #f1f5f8;
}

/* 데스크톱에서는 아예 없는 것으로 */
.tgm-bar,
.tgm-chips,
.tgm-sheet,
.tgm-scrim { display: none; }

@media (max-width: 991px) {

/* ── 1. 옛 메뉴를 걷는다 ────────────────────────────────────────────
   드로어(.navbar-inner)와 그 토글 버튼, 그리고 하단 플로팅 퀵메뉴.
   같은 메뉴가 두 벌이던 것을 한 벌로 줄인다.
   부트스트랩의 d-lg-none 을 이기려면 !important 가 필요하다.           */
.navbar .navbar-toggler,
.navbar .navbar-inner,
#quickNavFAB,
#quickNavModal,
#quickNavOverlay { display: none !important; }

/* ── 2. 헤더 오른쪽 버튼 ──────────────────────────────────────────── */
/* 로고가 줄지 않으면 좁은 기기(360px)에서 버튼이 아랫줄로 떨어져 헤더가
   169px 까지 높아졌다. 로고를 줄이고 버튼은 절대 줄지 않게 한다. */
.navbar .navbar-brand {
  flex: 0 1 auto;
  min-width: 0;
  margin-right: 8px;
}
/* max-width:100% 는 로고 자신의 폭을 기준으로 해 아무 소용이 없다(순환).
   화면 폭을 직접 기준으로 잡아야 줄어든다. */
.navbar .navbar-brand img {
  max-width: 48vw;
  height: auto;
}
.tgm-bar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}
.tgm-bar__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 44px;
  height: 40px;
  padding: 0 11px;
  border: 1px solid rgba(255, 255, 255, .5);
  border-radius: 9px;
  background: rgba(255, 255, 255, .16);
  color: #fff;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1;
  cursor: pointer;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: background .2s, color .2s, border-color .2s;
}
.tgm-bar__btn .material-symbols-outlined { font-size: 20px; }
.tgm-bar__btn--menu {
  border-color: var(--tgm-brand);
  background: var(--tgm-brand);
}
.tgm-bar__btn:active { transform: translateY(1px); }

/* 스크롤해서 헤더가 흰 바탕이 되면 버튼도 밝은 테마로 */
.navbar.navbar-sticky-on .tgm-bar__btn {
  border-color: #dde5ea;
  background: #fff;
  color: var(--tgm-ink);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.navbar.navbar-sticky-on .tgm-bar__btn--menu {
  border-color: var(--tgm-brand);
  background: var(--tgm-brand);
  color: #fff;
}

/* ── 3. 카테고리 칩 줄 ────────────────────────────────────────────── */
/* ⚠ <header class="navbar"> 는 flex 다. flex 항목의 min-width 기본값이 auto 라
   칩 8개의 최소 폭(약 627px)이 그대로 헤더를 밀어 화면 밖으로 넘겼다.
   그러면 layout viewport 까지 390 -> 643 으로 늘어나 window.innerWidth·100vw·
   position:fixed 의 100% 가 전부 어긋난다(실제로 그렇게 됐다).
   → 한 줄을 통째로 차지하게(flex-basis:100%) 하고 min-width 를 0 으로 푼다. */
.tgm-chips {
  flex: 1 0 100%;
  min-width: 0;
  max-width: 100%;
  display: block;
  margin-top: 6px;
  padding-bottom: 2px;
}
.tgm-chips ul {
  display: flex;
  gap: 6px;
  margin: 0;
  min-width: 0;
  padding: 0 16px 6px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  list-style: none;
}
.tgm-chips ul::-webkit-scrollbar { display: none; }
.tgm-chips li { flex: 0 0 auto; }
.tgm-chip {
  display: inline-flex;
  align-items: center;
  height: 33px;
  padding: 0 13px;
  border: 1px solid rgba(255, 255, 255, .34);
  border-radius: 999px;
  background: rgba(255, 255, 255, .15);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -.02em;
  white-space: nowrap;
  text-decoration: none;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.tgm-chip:hover,
.tgm-chip:focus { color: #fff; text-decoration: none; }
.tgm-chip.is-on {
  border-color: #fff;
  background: #fff;
  color: var(--tgm-brand-dark);
  font-weight: 700;
}

/* 흰 헤더일 때 */
.navbar.navbar-sticky-on .tgm-chip {
  border-color: transparent;
  background: var(--tgm-chip-bg);
  color: #41525e;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.navbar.navbar-sticky-on .tgm-chip:hover,
.navbar.navbar-sticky-on .tgm-chip:focus { color: #41525e; }
.navbar.navbar-sticky-on .tgm-chip.is-on {
  background: var(--tgm-brand);
  color: #fff;
  box-shadow: 0 2px 7px rgba(29, 152, 220, .35);
}

/* 칩 줄만큼 헤더가 높아졌으니 자동 숨김 거리도 늘린다 (테마 기본 -100px).
   ⚠ :not(.navbar-sticky-on) 이 반드시 필요하다. 테마의
   '.navbar.navbar-sticky-on { margin-top: 0 }' 과 무게가 (0,2,0) 로 같은데
   이 파일이 나중에 로드되므로, 빼지 않으면 헤더가 다시 내려오지 않는다
   (실제로 스크롤을 올려도 메뉴가 영영 안 보였다). */
.navbar.navbar-sticky-moved-up:not(.navbar-sticky-on) { margin-top: -150px; }

/* ── 4. 전체 메뉴 시트 ────────────────────────────────────────────── */
.tgm-scrim {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 1100;
  background: rgba(13, 27, 36, .42);
  opacity: 0;
  transition: opacity .26s ease;
}
.tgm-scrim.is-open { opacity: 1; }
.tgm-scrim[hidden] { display: none; }

.tgm-sheet {
  display: flex;
  flex-direction: column;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  /* 위쪽을 넉넉히 비워 둔다 — 바깥을 눌러 닫는 게 폰에서 가장 흔한 동작이라
     닫기 버튼만 믿으면 안 된다. 44px 로 뒀더니 너무 좁았다. */
  top: 84px;
  z-index: 1101;
  background: #fff;
  border-radius: 18px 18px 0 0;
  box-shadow: 0 -10px 34px rgba(13, 27, 36, .24);
  transform: translateY(102%);
  transition: transform .3s cubic-bezier(.32, .72, 0, 1);
}
.tgm-sheet.is-open { transform: translateY(0); }
.tgm-sheet[hidden] { display: none; }

.tgm-sheet__head {
  position: relative;
  flex: 0 0 auto;
  padding: 10px 52px 12px 16px;
  border-bottom: 1px solid var(--tgm-line);
}
.tgm-sheet__grip {
  display: block;
  width: 36px;
  height: 4px;
  margin: 0 auto 11px;
  border-radius: 2px;
  background: #dde5ea;
}
.tgm-sheet__close {
  position: absolute;
  right: 10px;
  bottom: 12px;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid var(--tgm-line);
  border-radius: 9px;
  background: #fff;
  color: var(--tgm-body);
  cursor: pointer;
}
.tgm-sheet__close .material-symbols-outlined { font-size: 20px; }

.tgm-search {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 40px;
  padding: 0 4px 0 11px;
  border: 1px solid var(--tgm-line);
  border-radius: 10px;
  background: #f4f7f9;
}
.tgm-search > .material-symbols-outlined { font-size: 19px; color: #8b9aa6; flex: 0 0 auto; }
.tgm-search input[type="search"] {
  flex: 1 1 auto;
  min-width: 0;
  height: 36px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--tgm-ink);
  font-family: inherit;
  font-size: 14px;
}
.tgm-search input[type="search"]:focus { outline: none; }
.tgm-search input::-webkit-search-cancel-button { -webkit-appearance: none; }
.tgm-search button {
  flex: 0 0 auto;
  height: 32px;
  padding: 0 12px;
  border: 0;
  border-radius: 7px;
  background: var(--tgm-brand);
  color: #fff;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
}

.tgm-sheet__body {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 12px 14px calc(22px + env(safe-area-inset-bottom, 0px));
}

.tgm-cat {
  border: 1px solid #e7edf1;
  border-radius: 11px;
  padding: 10px 12px 11px;
  margin-bottom: 9px;
  background: #fff;
}
.tgm-cat.is-on {
  border-color: var(--tgm-brand);
  background: #f5fbfe;
}
.tgm-cat__head {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--tgm-ink);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -.02em;
  text-decoration: none;
}
.tgm-cat__head:hover,
.tgm-cat__head:focus { color: var(--tgm-ink); text-decoration: none; }
.tgm-cat__ic {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: var(--tgm-brand-tint);
  color: var(--tgm-brand-dark);
  font-size: 17px;
}
.tgm-cat.is-on .tgm-cat__ic { background: var(--tgm-brand); color: #fff; }
.tgm-cat__name { flex: 1 1 auto; min-width: 0; }
.tgm-cat__go { flex: 0 0 auto; color: #b6c4cd; font-size: 19px; }

.tgm-cat__subs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}
.tgm-cat__subs li { display: block; }
.tgm-cat__subs a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 11px;
  border-radius: 8px;
  background: #f3f6f8;
  color: #44545f;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.35;
  text-decoration: none;
}
.tgm-cat.is-on .tgm-cat__subs a { background: var(--tgm-brand-tint); color: var(--tgm-brand-dark); }
/* ⚠ 바로 위 '.tgm-cat.is-on .tgm-cat__subs a' 가 (0,3,1) 이라 같은 무게로 쓰지 않으면
   조용히 무시된다. 실제로 '지금 이 항목' 이 형제들과 똑같이 보였다. */
.tgm-cat__subs a.is-here,
.tgm-cat.is-on .tgm-cat__subs a.is-here {
  background: var(--tgm-brand);
  color: #fff;
  font-weight: 700;
}
.tgm-cat__subs a:hover,
.tgm-cat__subs a:focus { text-decoration: none; }

/* 시트가 열려 있는 동안 뒤 페이지가 같이 스크롤되지 않게 */
body.tgm-locked { overflow: hidden; }

} /* /max-width 991px */

@media (max-width: 991px) and (prefers-reduced-motion: reduce) {
  .tgm-sheet,
  .tgm-scrim { transition: none; }
}