/* ==========================================================================
   핫딜 라이브 — 모바일 우선 유틸리티 (4 영역 공통)
   - viewer / seller / admin / electron 모두 적용
   - 토큰 무관 (각 영역 자체 토큰과 호환), 순수 reset + responsive 유틸
   - 적용 규칙: <head> 의 viewport 다음 줄에 link rel=stylesheet href=/assets/mobile.css
   ========================================================================== */

/* ---- 1) viewport / safe-area ---- */
:root {
  --m-safe-t: env(safe-area-inset-top, 0px);
  --m-safe-r: env(safe-area-inset-right, 0px);
  --m-safe-b: env(safe-area-inset-bottom, 0px);
  --m-safe-l: env(safe-area-inset-left, 0px);
}

html, body { -webkit-text-size-adjust: 100%; overscroll-behavior-y: contain; }
/* ===== 한글 줄바꿈을 단어 기준으로 (2026-11-01 요청) =====
   ⚠️ 한글은 글자 사이에서도 줄이 바뀐다(CJK 기본값). 그냥 두면
      "방송목록" 이 "방송목 / 록" 으로 쪼개진다. keep-all 은 **띄어쓰기에서만**
      끊게 한다.
   ⚠️ overflow-wrap 을 반드시 함께 준다. keep-all 만 주면 띄어쓰기가 없는
      긴 문자열(URL·토큰·주문번호)이 한 줄로 뻗어 **가로 스크롤**을 만든다 —
      고치려던 것보다 나쁘다.
   ⚠️ 요소에 직접 선언한 word-break 는 이 상속을 이긴다. 그래서 URL·로그처럼
      글자 단위로 끊어야 하는 곳(code/pre/break-all)은 영향을 받지 않는다. */
html, body { word-break: keep-all; overflow-wrap: break-word; }

img, video, canvas, svg { max-width: 100%; height: auto; display: block; }

/* ---- 2) tap target 최소 44×44 (iOS HIG / WCAG 2.5.5) ---- */
@media (max-width: 768px) {
  .btn, .btn-sm, button, [role="button"], .form-control, .form-select,
  input[type="text"], input[type="email"], input[type="tel"], input[type="number"],
  input[type="password"], input[type="search"], input[type="url"], input[type="date"],
  input[type="datetime-local"], input[type="time"], select, textarea {
    min-height: 44px;
  }
  /* iOS 자동 zoom-in 방지 — 16px 미만이면 입력 시 줌됨 */
  input, select, textarea {
    font-size: 16px !important;
  }
  .btn-sm { padding: 8px 12px !important; font-size: 13.5px !important; }
}

/* ---- 3) 모바일 우선 반응형 유틸 ---- */
.m-hide-mobile { }
.m-show-mobile { display: none !important; }
@media (max-width: 768px) {
  .m-hide-mobile { display: none !important; }
  .m-show-mobile { display: block !important; }
  .m-show-mobile-flex { display: flex !important; }
  .m-show-mobile-inline { display: inline-block !important; }
}

/* 강제 1-col 스택 */
@media (max-width: 768px) {
  .m-stack > * + * { margin-top: 12px; }
  .m-stack-grid { display: block !important; grid-template-columns: 1fr !important; }
  .m-stack-flex { flex-direction: column !important; align-items: stretch !important; }
  .m-block-full { width: 100% !important; max-width: 100% !important; flex: 1 1 auto !important; }
}

/* ---- 4) 가로 스크롤 nav 스냅 (햄버거 메뉴 없는 경우 대안) ---- */
.m-scroll-x {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}
.m-scroll-x::-webkit-scrollbar { display: none; }
.m-scroll-x > * { scroll-snap-align: start; flex-shrink: 0; }

/* ---- 5) 모바일 테이블 → 카드 변환 (.m-table-card) ---- */
@media (max-width: 768px) {
  table.m-table-card,
  table.m-table-card thead,
  table.m-table-card tbody,
  table.m-table-card tr,
  table.m-table-card td,
  table.m-table-card th {
    display: block !important;
    width: 100% !important;
  }
  table.m-table-card thead { position: absolute; left: -9999px; top: -9999px; }
  table.m-table-card tr {
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 10px;
    padding: 12px;
    margin-bottom: 10px;
    background: white;
  }
  table.m-table-card td {
    border: 0 !important;
    padding: 6px 0 !important;
    text-align: left !important;
    display: grid !important;
    grid-template-columns: 100px 1fr;
    gap: 8px;
    align-items: center;
  }
  table.m-table-card td::before {
    content: attr(data-label);
    font-size: 11.5px;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }
  table.m-table-card td:empty,
  table.m-table-card td[data-label=""] { display: none !important; }
}

/* ---- 6) 풀폭 모달 (Bootstrap 호환) ---- */
@media (max-width: 768px) {
  .modal-dialog { margin: 0 !important; max-width: 100% !important; min-height: 100vh; }
  .modal-content { border-radius: 0 !important; min-height: 100vh; }
  /* ⚠️ 100vw 는 **스크롤바 폭을 포함한다** — 세로 스크롤바가 있는 화면에서
        모달이 화면보다 넓어져 가로 스크롤이 생긴다. 부모 기준 100% 로 둔다. */
  .modal-fullscreen-sm-down { width: 100%; height: 100vh; }
}

/* ---- 7) 안전영역 padding 유틸 ---- */
.m-safe-top    { padding-top:    max(var(--m-safe-t), 0px); }
.m-safe-bottom { padding-bottom: max(var(--m-safe-b), 12px); }
.m-safe-x      { padding-left:   max(var(--m-safe-l), 0px); padding-right: max(var(--m-safe-r), 0px); }

/* ---- 8) 모바일 하단 고정 액션바 ---- */
.m-bottom-bar {
  position: sticky; bottom: 0;
  background: white;
  border-top: 1px solid rgba(0,0,0,0.08);
  padding: 10px 14px max(10px, var(--m-safe-b));
  display: flex; gap: 8px;
  z-index: 40;
  box-shadow: 0 -2px 12px rgba(0,0,0,0.04);
}
.m-bottom-bar > * { flex: 1; }

/* ---- 9) 햄버거 토글 (드로어 트리거) ---- */
.m-burger {
  display: none;
  width: 40px; height: 40px;
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 0;
  align-items: center; justify-content: center;
  border-radius: 8px;
  margin-left: auto;
  color: inherit;
}
.m-burger:hover { background: rgba(0,0,0,0.05); }
.m-burger i { font-size: 20px; }
@media (max-width: 1024px) {
  .m-burger { display: inline-flex; }
}

/* ---- 10) 드로어 (offcanvas) — Bootstrap 의존 X ---- */
.m-drawer {
  position: fixed;
  top: 0; right: 0;
  width: min(320px, 80vw);
  height: 100vh; height: 100dvh;
  background: white;
  box-shadow: -8px 0 32px rgba(0,0,0,0.18);
  transform: translateX(110%);
  transition: transform 240ms cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 999;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: max(20px, var(--m-safe-t)) 20px max(20px, var(--m-safe-b));
}
.m-drawer.open { transform: translateX(0); }
.m-drawer-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.45);
  opacity: 0; pointer-events: none;
  transition: opacity 200ms;
  z-index: 998;
}
.m-drawer-backdrop.open { opacity: 1; pointer-events: auto; }
.m-drawer .m-drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 16px; padding-bottom: 12px;
  border-bottom: 1px solid rgba(0,0,0,0.08);
}
.m-drawer .m-drawer-close {
  width: 36px; height: 36px;
  border: 0; background: transparent;
  border-radius: 8px;
  cursor: pointer;
  font-size: 20px;
  color: #475569;
}
.m-drawer .m-drawer-close:hover { background: #f1f5f9; }
.m-drawer .m-drawer-nav { display: flex; flex-direction: column; gap: 2px; }
.m-drawer .m-drawer-nav a, .m-drawer .m-drawer-nav button {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px;
  border-radius: 10px;
  font-size: 14.5px; font-weight: 600;
  color: #0f172a;
  text-decoration: none;
  border: 0;
  background: transparent;
  cursor: pointer;
  text-align: left;
  min-height: 48px;
}
.m-drawer .m-drawer-nav a:hover, .m-drawer .m-drawer-nav button:hover { background: #f1f5f9; }
.m-drawer .m-drawer-nav a.active { background: #0f172a; color: white; }
.m-drawer .m-drawer-nav i { width: 18px; text-align: center; opacity: 0.7; }
.m-drawer .m-drawer-section {
  font-size: 11px; font-weight: 700; color: #94a3b8;
  text-transform: uppercase; letter-spacing: 0.06em;
  padding: 14px 14px 6px;
}
body.m-drawer-open { overflow: hidden; }

/* ---- 11) 다크 영역 (viewer / electron) 드로어 변종 ---- */
.m-drawer.m-dark {
  background: hsl(222 22% 9%);
  color: hsl(210 20% 95%);
  border-left: 1px solid hsl(222 14% 18%);
}
.m-drawer.m-dark .m-drawer-head { border-bottom-color: hsl(222 14% 18%); }
.m-drawer.m-dark .m-drawer-close { color: hsl(215 16% 70%); }
.m-drawer.m-dark .m-drawer-close:hover { background: hsl(222 18% 13%); }
.m-drawer.m-dark .m-drawer-nav a, .m-drawer.m-dark .m-drawer-nav button { color: hsl(210 20% 95%); }
.m-drawer.m-dark .m-drawer-nav a:hover, .m-drawer.m-dark .m-drawer-nav button:hover { background: hsl(222 18% 13%); }
.m-drawer.m-dark .m-drawer-nav a.active { background: hsl(142 71% 45%); color: hsl(150 80% 6%); }
.m-drawer.m-dark .m-drawer-section { color: hsl(215 16% 55%); }

/* ---- 12) viewport 단위 보정 (iOS 100vh 버그) ---- */
.m-vh-100 { height: 100vh; height: 100dvh; }
.m-min-vh-100 { min-height: 100vh; min-height: 100dvh; }

/* ---- 13) 이미지 lazy + 종횡비 슬롯 ---- */
.m-aspect-16x9 { aspect-ratio: 16 / 9; background: #000; overflow: hidden; }
.m-aspect-9x16 { aspect-ratio: 9 / 16; background: #000; overflow: hidden; }
.m-aspect-1x1  { aspect-ratio: 1 / 1; background:#fff; overflow: hidden; }
.m-aspect-16x9 > video, .m-aspect-16x9 > iframe, .m-aspect-16x9 > img,
.m-aspect-9x16 > video, .m-aspect-9x16 > iframe, .m-aspect-9x16 > img,
.m-aspect-1x1  > video, .m-aspect-1x1  > iframe, .m-aspect-1x1  > img {
  width: 100%; height: 100%; object-fit: cover;
}

/* ---- 14) PC 전용 / 모바일 전용 텍스트 ---- */
@media (max-width: 480px) {
  .m-text-xs-only { display: inline !important; }
  .m-text-lg-only { display: none !important; }
}
@media (min-width: 481px) {
  .m-text-xs-only { display: none !important; }
  .m-text-lg-only { display: inline !important; }
}

/* ---- 15) 카드/그리드 자동 1-col ---- */
@media (max-width: 600px) {
  .row > [class*="col-"] { margin-bottom: 10px; }
}