/* ================================================================
   TNT 모바일 공용 스타일
   - PC 레이아웃은 건드리지 않음 (모든 규칙은 미디어쿼리 안 또는 모바일 전용 요소)
   - 드로어 메뉴: js/site-tools.js 가 주입하는 .st-nav-toggle / .st-drawer 짝
   ================================================================ */

/* ── 햄버거 버튼: 데스크톱에서는 숨김 ── */
.st-nav-toggle { display: none; }

/* ── 드로어 (모든 폭에서 정의, 열림은 모바일에서만) ── */
.st-drawer {
  position: fixed;
  inset: 0;
  z-index: 3000;
  pointer-events: none;
}
.st-drawer__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(18, 20, 22, 0.45);
  opacity: 0;
  transition: opacity 0.25s ease;
}
.st-drawer__panel {
  position: absolute;
  top: 0;
  right: 0;
  width: min(320px, 86vw);
  height: 100%;
  background: #fff;
  box-shadow: -18px 0 50px rgba(0, 0, 0, 0.18);
  transform: translateX(100%);
  transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.st-drawer.is-open { pointer-events: auto; }
.st-drawer.is-open .st-drawer__backdrop { opacity: 1; }
.st-drawer.is-open .st-drawer__panel { transform: none; }
html.st-drawer-lock, html.st-drawer-lock body { overflow: hidden; }

.st-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px 14px;
  border-bottom: 1px solid #eee;
}
.st-drawer__title {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.22em;
  color: #18709c;
}
.st-drawer__close {
  border: none;
  background: none;
  padding: 6px;
  cursor: pointer;
  color: #444;
  display: flex;
}
.st-drawer__list {
  list-style: none;
  margin: 0;
  padding: 8px 0 40px;
}
.st-drawer__item { border-bottom: 1px solid #f2f0ee; }
.st-drawer__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 15px 20px;
  border: none;
  background: none;
  cursor: pointer;
  font-size: 15.5px;
  font-weight: 600;
  color: #2e3230;
  text-align: left;
  text-decoration: none;
  font-family: inherit;
}
.st-drawer__link:active { background: #f6f4f1; }
.st-drawer__chev { transition: transform 0.22s ease; color: #9a938c; }
.st-drawer__item.is-open .st-drawer__chev { transform: rotate(180deg); }
.st-drawer__sub {
  list-style: none;
  margin: 0;
  padding: 0 0 0 0;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.28s ease;
  background: #faf8f5;
}
.st-drawer__item.is-open .st-drawer__sub { max-height: 480px; }
.st-drawer__sub a {
  display: block;
  padding: 11px 20px 11px 32px;
  font-size: 14px;
  font-weight: 500;
  color: #57534e;
  text-decoration: none;
}
.st-drawer__sub a:active { background: #f0ede8; }

/* ================================================================
   모바일 보정 (≤768px) — 데스크톱 규칙 위에 얹는 오버라이드
   ================================================================ */
@media (max-width: 768px) {
  /* 햄버거 표시 */
  .st-nav-toggle { display: flex; }

  /* 가로 스크롤 원천 차단 (장식 요소가 화면 밖으로 삐져나가는 것 방지)
     — html 에 걸면 position:sticky 가 깨지므로 body 에만: body 의 overflow-x 는
       뷰포트로 전파되어 차단 효과는 동일함 */
  body { overflow-x: hidden; max-width: 100vw; }

  /* 네비: 아이콘 4개(메뉴·언어·E-book·검색)가 375px에서도 들어가게 간격 축소 */
  .navbar__inner { padding: 0 14px; }
  .navbar__right { gap: 6px; }
  .navbar__icon-btn { padding: 7px; }
  .navbar__logo { margin: 0 10px; }
  .navbar__logo img { height: 36px; }

  /* 메가드롭다운은 모바일에서 완전 차단 (호버 잔상 방지) */
  .mega-dropdown { display: none !important; }

  /* 검색 오버레이 패널 여백 */
  .st-search__panel { margin-top: 8vh; border-radius: 12px; }

  /* 사양표 등 넓은 표: 표 자체가 아닌 래퍼에서 가로 스크롤 */
  .pd-spec { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .pd-spec__table { min-width: 460px; }

  /* 푸터: 세로 스택 (페이지별 인라인 푸터 공통 클래스) */
  .footer__grid, .site-footer__grid { grid-template-columns: 1fr !important; gap: 28px; }
  .footer__bottom, .site-footer__bottom { flex-direction: column; gap: 10px; text-align: center; }
}

@media (max-width: 600px) {
  /* index: 우측 진행 점(progress dots)이 본문 텍스트와 겹침 → 숨김 */
  .progress-dots { display: none !important; }

  /* index: 인트로 장식이 뷰포트보다 넓어 삐져나옴 */
  .intro-overlay { overflow: hidden; }

  /* 소분류 필터 알약(pill) 줄바꿈 허용 */
  #filterPills, #sub-category-filters { flex-wrap: wrap !important; }
}