/* ============================================================
   QQ Market Board — Responsive (모바일 별도 UIUX)
   데스크톱: 표 + LNB.  모바일: 카드 리스트 + 하단 탭바 + 드로어 LNB
   ============================================================ */

/* 태블릿 */
@media (max-width: 1100px) {
  .hero-strip { grid-template-columns: repeat(2, 1fr); }
  :root { --lnb-w: 200px; }
}

/* ---------- 모바일 (≤ 760px) ---------- */
@media (max-width: 760px) {
  :root { --gnb-h: 52px; }

  .gnb { padding: 0 var(--sp-3); gap: var(--sp-2); }
  .gnb__nav { display: none; }
  .gnb__search { min-width: 0; flex: 1 1 60px; }
  .gnb__brand { min-width: 0; flex: 0 1 auto; overflow: hidden; }
  .gnb__brand span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .gnb__brand small { display: none; }
  .gnb #clock { display: none; }                 /* 모바일 GNB 공간 확보(시계 숨김) */
  .live-pill .txt { display: none; }              /* 라이브 점만 표시 */
  .live-pill { padding: 0 8px; }
  .hamburger { display: grid !important; }

  /* LNB → 슬라이드 드로어 */
  .layout { grid-template-columns: 1fr; }
  .lnb {
    position: fixed; top: 0; left: 0; bottom: 0; z-index: 200;
    width: 82vw; max-width: 320px; height: 100vh;
    transform: translateX(-100%); transition: transform .25s ease;
    box-shadow: var(--shadow-2); padding-top: var(--sp-5);
  }
  body.lnb-open .lnb { transform: translateX(0); }
  body.lnb-open .lnb-backdrop { display: block; position: fixed; inset: 0; z-index: 150; background: rgba(0,0,0,.5); }

  .main { padding: var(--sp-4) var(--sp-3) calc(var(--bottom-nav-h) + var(--sp-5)); }
  .page-head h1 { font-size: var(--fs-xl); }
  .hero-strip { grid-template-columns: 1fr; gap: var(--sp-2); margin-bottom: var(--sp-4); }
  .hero-card ol { flex-direction: row; overflow-x: auto; gap: var(--sp-4); }
  .hero-card li { flex: none; }

  /* 표 → 카드 리스트 */
  html, body { overflow-x: hidden; }            /* 가로 오버플로우 안전망 */
  .table-wrap { background: none; border: none; }
  .table-wrap > div { overflow-x: visible !important; } /* 데스크톱용 가로스크롤 래퍼 해제 */
  .section-title { padding: 0 4px var(--sp-2); border: none; }
  .coin-table thead { display: none; }
  .coin-table, .coin-table tbody, .coin-table tr, .coin-table td { display: block; width: 100%; }
  .coin-table tbody tr {
    background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--r-md);
    margin-bottom: 10px; padding: 12px 14px;
    display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name price" "vol chg"; gap: 6px 10px;
  }
  .coin-table td[data-col="name"] { min-width: 0; }
  .coin-ident { min-width: 0; }
  .coin-table tbody tr:hover { background: var(--bg-elev); }
  .coin-table tbody td { border: none !important; padding: 0; }
  .coin-table td[data-col="name"]  { grid-area: name; text-align: left; }
  .coin-table td[data-col="price"] { grid-area: price; text-align: right; font-size: var(--fs-lg); }
  .coin-table td[data-col="chg"]   { grid-area: chg;   text-align: right; }
  .coin-table td[data-col="vol"]   { grid-area: vol;   text-align: left; color: var(--text-3); font-size: var(--fs-xs); }
  .coin-table td[data-col="range"] { display: none; }
  .coin-table td[data-col="vol"]::before { content: "거래대금 "; color: var(--text-3); }

  /* 하단 탭바 */
  .mobile-bottom-nav {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 120;
    height: var(--bottom-nav-h); background: var(--bg-elev); border-top: 1px solid var(--border);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .mobile-bottom-nav a {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    color: var(--text-3); font-size: 10px; font-weight: 700;
  }
  .mobile-bottom-nav a .ic { font-size: 19px; }
  .mobile-bottom-nav a.is-active { color: var(--qq-gold); }
}

@media (max-width: 380px) {
  .coin-ident .ko { font-size: var(--fs-sm); }
}

/* 데스크톱에서 모바일 전용 컨트롤 숨김 */
.hamburger { display: none; width: 36px; height: 36px; place-items: center; border-radius: var(--r-sm); background: var(--surface); border: 1px solid var(--border); color: var(--text); font-size: 18px; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}