/* ==========================================================================
   모바일 / 태블릿 대응 (PC·모바일 동시 지원)
   - 기존 PC 레이아웃은 그대로 두고, 좁은 화면에서만 규칙을 덮어쓴다
   ========================================================================== */

/* --- 태블릿 (1024px 이하) --- */
@media (max-width: 1024px) {
  .wrap { padding: 0 12px; }
  .mpwrap { max-width: 100%; }
  .mpgrid { grid-template-columns: 1fr !important; }
  .chartctl { grid-template-columns: 1fr !important; }
  .authwrap { max-width: 100%; }
  .admin { grid-template-columns: 1fr !important; }
  aside { position: static !important; }
}

/* --- 모바일 (768px 이하) --- */
@media (max-width: 768px) {

  /* 기본 타이포 */
  body { font-size: 13px; -webkit-text-size-adjust: 100%; }
  .wrap { padding: 0 12px; }

  /* ---------- 상단 헤더 ---------- */
  .top-in {
    height: auto !important;
    min-height: 52px;
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px 0;
  }
  .logo { font-size: 16px !important; }
  .logo .tag { display: none; }

  /* GNB: 가로 스크롤 탭으로 변환 */
  nav.gnb {
    order: 3;
    width: 100%;
    display: flex !important;
    gap: 0 !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    border-top: 1px solid var(--line);
    margin-top: 4px;
  }
  nav.gnb::-webkit-scrollbar { display: none; }
  nav.gnb a {
    flex: 0 0 auto;
    padding: 11px 14px !important;
    font-size: 13.5px !important;
    border-bottom: 2px solid transparent;
  }
  nav.gnb a.on { border-bottom-color: var(--fg) !important; }

  .top-right {
    margin-left: auto;
    gap: 8px !important;
    font-size: 11.5px !important;
  }
  .top-right #clock { display: none; }
  .top-right .status { max-width: 92px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  /* 로그인 / 회원가입 초록 버튼 (모바일 크기) */
  .top-right a[href="/login/"],
  .top-right a[href="/signup/"] {
    padding: 6px 11px !important;
    font-size: 12px !important;
    min-height: 30px;
  }

  /* ---------- 시세 바 ---------- */
  .pairs {
    gap: 14px !important;
    padding: 8px 0 !important;
    -webkit-overflow-scrolling: touch;
  }
  .pair b { font-size: 12.5px !important; }
  .pair .p { font-size: 12px; }

  /* ---------- 거래소 3단 → 세로 스택 ---------- */
  .grid {
    display: block !important;
  }
  .col {
    border-right: 0 !important;
    border-bottom: 1px solid var(--line);
    min-height: auto !important;
    display: block !important;
  }
  .sym { padding: 14px 12px 10px !important; }
  .sym h1 { font-size: 18px !important; }
  .sym .now { font-size: 26px !important; }
  .stats { grid-template-columns: repeat(2, 1fr) !important; padding: 12px !important; gap: 10px 12px !important; }

  /* 차트 높이 축소 */
  #chart { height: 260px !important; }
  canvas { max-width: 100%; }
  .chartbox { padding: 6px 0 0 !important; }

  /* 호가 테이블: 폰트/패딩 축소 */
  .ob th, .ob td { padding: 4px 12px !important; font-size: 12px; }
  .ob .mid td { font-size: 14px !important; padding: 8px 12px !important; }
  .trades th, .trades td { padding: 5px 12px !important; font-size: 11.5px; }
  .trades td:nth-child(4), .trades th:nth-child(4) { display: none; }  /* 금액 열 숨김 */

  /* 주문 폼: 하단 고정 느낌으로 */
  .orderbox { padding: 14px 12px !important; }
  .qbtns { grid-template-columns: repeat(4, 1fr) !important; }
  .submit { padding: 14px !important; font-size: 15px !important; }

  /* ---------- 메인 시세 표 → 카드형 리스트 ---------- */
  .mktbar input { width: 100% !important; }
  .mktbar select { flex: 1 1 120px; }
  .mktbar .sp { width: 100%; text-align: right; }

  table.mkt thead { display: none; }
  table.mkt, table.mkt tbody { display: block; width: 100%; max-width: 100%; }
  table.mkt tr {
    display: flex;                 /* ★ grid 대신 flex: 좁은 화면에서 넘침이 없다 */
    align-items: center;
    gap: 8px;
    padding: 11px 2px;
    border-bottom: 1px solid #f0f1f3;
    width: 100%;
    box-sizing: border-box;
  }
  table.mkt td {
    border: 0 !important;
    padding: 1px 0 !important;
    text-align: right !important;
    width: auto !important;
    white-space: nowrap;
    flex: 0 0 auto;
  }
  table.mkt td:nth-child(1) { display: none; }                 /* # */
  table.mkt td:nth-child(2) { flex: 1 1 auto; min-width: 0; text-align: left !important; white-space: normal; }
  table.mkt td:nth-child(3) { font-size: 15px; font-weight: 700; }
  table.mkt td:nth-child(4) { display: none; }                 /* 전일대비 */
  table.mkt td:nth-child(5) { flex: 0 0 64px; font-size: 12.5px; }
  table.mkt td:nth-child(6),
  table.mkt td:nth-child(7),
  table.mkt td:nth-child(8),
  table.mkt td:nth-child(9),
  table.mkt td:nth-child(10) { display: none; }
  table.mkt .coin { min-width: 0; }
  table.mkt .coin > span:last-child { min-width: 0; overflow: hidden; }
  .coin { gap: 9px; }
  .coin .sym { font-size: 14.5px; }
  .coin .nm { font-size: 11.5px; }

  /* ---------- 마이페이지 ---------- */
  .mphead { padding: 16px !important; gap: 12px !important; }
  .mphead .av { width: 46px !important; height: 46px !important; font-size: 17px !important; }
  .mphead .who b { font-size: 16px !important; }
  .mphead .sp { width: 100%; }
  .milecard { padding: 18px !important; }
  .milecard .big2 { font-size: 27px !important; }
  .mpgrid { grid-template-columns: 1fr !important; gap: 14px !important; }
  .tabs3 { gap: 0 !important; }
  .tabs3 button { padding: 11px 12px !important; font-size: 13px !important; }
  .infotbl th { width: 104px !important; font-size: 12.5px; padding: 9px 0 !important; }
  .infotbl td { font-size: 12.5px; padding: 9px 0 !important; }
  .wdgrid { grid-template-columns: 1fr !important; }
  .stat2 { grid-template-columns: 1fr !important; }
  .coinpick { grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)) !important; max-height: 220px; }
  .buyrow > div { flex: 1 1 100% !important; }
  .buyrow > div:last-child { flex: 0 0 100% !important; }
  .buyrow button { width: 100%; }
  .pane table.t { font-size: 12px !important; }
  .pane table.t th, .pane table.t td { padding: 7px 5px !important; }
  /* 출금 내역 등 컬럼이 많은 표: 모바일에서 가로 스크롤 (글자 세로깨짐 방지) */
  .pane table.t {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }
  .pane table.t::-webkit-scrollbar { height: 0; }
  .pane table.t th, .pane table.t td { white-space: nowrap; }

  /* ---------- 회원가입 / 로그인 ---------- */
  .authwrap { margin: 16px auto 30px !important; }
  .authwrap h1 { font-size: 21px !important; }
  .fld input { padding: 13px !important; font-size: 15px !important; }
  .rrnrow { grid-template-columns: 1fr 10px 1fr !important; }
  .submit { padding: 15px !important; }
  .grid2, .grid3 { grid-template-columns: 1fr !important; }

  /* ---------- 고객지원 채팅 ---------- */
  .cw-wrap { grid-template-columns: 1fr !important; }
  .cw { height: 70vh !important; min-height: 420px; }
  .cw-bub { max-width: 86% !important; }
  .cw-in { padding: 10px !important; }
  .cw-side { display: none; }

  /* ---------- 관리자 콘솔 ---------- */
  .admin { display: block !important; }
  aside { padding: 12px 0 !important; }
  aside .brand { padding: 0 14px 12px !important; font-size: 15px !important; }
  aside nav { display: flex; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  aside nav::-webkit-scrollbar { display: none; }
  aside nav a {
    flex: 0 0 auto; padding: 10px 14px !important; font-size: 13px !important;
    border-left: 0 !important; border-bottom: 3px solid transparent; white-space: nowrap;
  }
  aside nav a.on { border-bottom-color: var(--accent) !important; }
  aside nav .grp { display: none; }
  main { padding: 14px 12px !important; }
  .hd { flex-wrap: wrap; gap: 8px; }
  .hd h1 { font-size: 18px !important; }
  .stat { grid-template-columns: repeat(2, 1fr) !important; }
  .stat .s b { font-size: 20px !important; }
  .card { padding: 13px !important; }
  .toolbar { gap: 6px !important; }
  .toolbar input.q { width: 100% !important; }
  .toolbar select, .toolbar button { flex: 1 1 auto; }
  .chartwrap, .cw-wrap { grid-template-columns: 1fr !important; }

  /* 관리자 표: 가로 스크롤 허용 (데이터 표는 스크롤이 안전) */
  .card > table.t { display: block; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; }
  #ccCanvas { height: 260px !important; }
  .modal .box { width: 100% !important; padding: 16px !important; }
  .fgrid { grid-template-columns: 1fr !important; }
  .modal { padding: 14px 10px !important; }

  /* ---------- 공통 ---------- */
  .hero2 h1 { font-size: 21px !important; }
  .hero2 .cta { flex-wrap: wrap; }
  .hero2 .cta a { flex: 1 1 46%; text-align: center; }
  .hero h1 { font-size: 20px !important; }
  .foot { font-size: 10.5px !important; line-height: 1.75 !important; }
  .pager button { padding: 9px 14px !important; }
  .note { font-size: 11px !important; }
}

/* --- 소형 모바일 (420px 이하) --- */
@media (max-width: 420px) {
  .wrap { padding: 0 10px; }
  .sym .now { font-size: 23px !important; }
  .stats { grid-template-columns: 1fr 1fr !important; }
  .stat { grid-template-columns: 1fr !important; }
  table.mkt td:nth-child(5) { font-size: 13px; }
  .milecard .big2 { font-size: 24px !important; }
  .tabs3 button { padding: 10px !important; font-size: 12.5px !important; }
  .logo { font-size: 15px !important; }
  nav.gnb a { padding: 10px 11px !important; font-size: 13px !important; }
}

/* --- 터치 기기 공통: 탭 영역 확대 + 호버 제거 --- */
@media (hover: none) and (pointer: coarse) {
  a, button, .cp, .symitem, .titem { -webkit-tap-highlight-color: rgba(23,114,248,.12); }
  .btn, .submit, nav.gnb a, .tabs3 button, .qbtns button { min-height: 40px; }
  table.mkt tbody tr:hover { background: none; }
  .symitem:hover { background: none; }
  .cp:hover { background: none; }
}

/* --- 인쇄 --- */
@media print {
  header.top, .pairs, .foot, aside, .qbtns, .submit { display: none !important; }
}

/* ==========================================================================
   가로 넘침 방지 (모바일 필수)
   ========================================================================== */
@media (max-width: 768px) {
  html, body { overflow-x: hidden; max-width: 100%; }
  .wrap, .grid, .col, .mpgrid, .chartctl, .admin, main, .card, .panel { max-width: 100%; box-sizing: border-box; }
  img, canvas, svg, table, pre { max-width: 100%; }
  pre.raw { white-space: pre-wrap; word-break: break-all; }
  .mktbar { max-width: 100%; }
  .mktbar select { max-width: 46%; }
  .hero2 .cta a { min-width: 0; }
  .sym h1, .sym .now { word-break: break-all; }
  .mphead .sp a, .mphead .sp span { flex: 0 0 auto; }
  .tabs3 { scrollbar-width: none; }
  .cw-msgs { max-width: 100%; }
  .coinpick { max-width: 100%; }
  table.t { max-width: 100%; }
}

/* ==========================================================================
   신규 컴포넌트 모바일 대응 (상단 사용자 위젯 · 차트 코인선택 · 매수/매도 · 매도목록)
   ========================================================================== */
@media (max-width: 768px) {

  /* ---- 상단 사용자 위젯 (아이디 드롭다운) ---- */
  .uw-wrap { position: relative; }
  .uw-chip { padding: 5px 9px !important; font-size: 12px !important; gap: 5px !important; }
  .uw-chip > span:nth-child(2) {
    max-width: 76px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .uw-av { width: 19px !important; height: 19px !important; font-size: 10px !important; }
  .uw-panel {
    width: min(300px, calc(100vw - 20px)) !important;
    right: -6px !important;
    max-height: calc(100vh - 80px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .uw-menu { padding: 12px 16px !important; }
  .uw-out { padding: 13px 16px !important; }

  /* ---- 차트 페이지: 코인 선택기 ---- */
  #cSearch { width: 100% !important; }
  #cSelect { width: 100% !important; min-width: 0 !important; flex: 1 1 100%; }
  #cGo { width: 100% !important; }

  /* ---- 거래소: 주문 패널 보유 현황 표 ---- */
  #holdList { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  #holdList table { font-size: 11px !important; min-width: 100%; }
  #holdList th, #holdList td { padding: 3px 2px !important; }
  .orderbox .row { font-size: 12.5px; }
  .orderbox input { font-size: 15px !important; }

  /* ---- 마이페이지: 보유 코인 매도 목록 ---- */
  #sellList > div { flex-wrap: wrap !important; row-gap: 6px; }
  #sellList .btnSell {
    flex: 1 1 100% !important; margin-top: 6px;
    padding: 12px 14px !important; font-size: 13.5px !important;
  }

  /* ---- 관리자: 차트 컨트롤 % UI ---- */
  .pctbox { grid-template-columns: 1fr !important; }
  .pctnow .val { font-size: 19px !important; }
  .pctpick { grid-template-columns: repeat(4, 1fr) !important; }
  .pctpick button { padding: 11px 2px !important; min-height: 42px; }
  #ccRange { width: 100%; }
  #ccPct { width: 88px !important; }

  /* ---- 관리자: 주문/거래 내역 요약 ---- */
  .note { word-break: keep-all; }
}

@media (max-width: 420px) {
  .uw-chip > span:nth-child(2) { max-width: 62px; }
  .pctpick { grid-template-columns: repeat(3, 1fr) !important; }
  #holdList th:nth-child(3), #holdList td:nth-child(3) { display: none; }  /* 평단 숨김 */
}