/* 📱 핸드폰 화면 — 가독성 + 햄버거 메뉴 (2026-10-08) — Work/patch-mobile-v1.md 참고. mobile-v1.js 와 짝.
   폭 768px 이하에서만 적용된다. 데스크톱은 그대로. */
.mb-btn,.mb-ov,.mb-dr{display:none}

/* 카카오톡 등 인앱 브라우저는 position:fixed 층이 실제 보이는 폭·높이보다 크게 잡힌다. 앱은 그 차이를 html 의
   --fix-r / --fix-b 로 재서 모달·우하단 ☰ 에 반영하는데, 보고서 창(#tb-rpt, 앱이 DOM 으로 직접 띄움)은 빠져 있어
   오른쪽이 잘리고 [✕ 닫기] 가 화면 밖으로 밀렸다 (2026-10-08). 같은 보정을 준다. 인라인 inset:0 을 !important 로 이긴다. */
#tb-rpt{inset:0 var(--fix-r,0px) var(--fix-b,0px) 0!important}

@media (max-width:768px){
  html{-webkit-text-size-adjust:100%}
  .app{padding:8px 8px calc(92px + env(safe-area-inset-bottom,0px));gap:10px}

  /* 머리줄: 제목 한 줄 + 우측 ☰ — 상태·사용자·로그아웃·봇 버튼은 메뉴 안으로 */
  .hdr{position:sticky;top:0;z-index:50;background:var(--bg);padding:8px 52px 8px 2px;margin:0 -2px;
    border-bottom:1px solid var(--border);flex-wrap:nowrap;min-height:40px}
  .hdr h1{font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
  .hdr .hdr-r{display:none}

  .mb-btn{display:flex;align-items:center;justify-content:center;position:fixed;z-index:60;
    top:calc(6px + env(safe-area-inset-top,0px));right:calc(8px + var(--fix-r,0px));width:40px;height:40px;padding:0;border-radius:10px;
    background:var(--bg2);border:1px solid var(--border);color:var(--text);font-size:20px;line-height:1;cursor:pointer}
  .mb-btn[hidden]{display:none}
  .mb-btn:active{transform:scale(.94)}

  .mb-ov{display:block;position:fixed;inset:0 var(--fix-r,0px) var(--fix-b,0px) 0;z-index:2000;background:rgba(0,0,0,.55);
    opacity:0;pointer-events:none;transition:opacity .2s}
  .mb-dr{display:flex;flex-direction:column;position:fixed;z-index:2001;top:0;right:var(--fix-r,0px);bottom:var(--fix-b,0px);width:min(84vw,320px);
    background:var(--bg2);border-left:1px solid var(--border);box-shadow:-10px 0 30px rgba(0,0,0,.45);
    padding:env(safe-area-inset-top,0px) 0 env(safe-area-inset-bottom,0px);
    transform:translateX(102%);transition:transform .22s ease;overflow-y:auto;-webkit-overflow-scrolling:touch}
  body.mb-open .mb-ov{opacity:1;pointer-events:auto}
  body.mb-open .mb-dr{transform:none}
  body.mb-open{overflow:hidden}

  .mb-dh{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--border);
    font-size:14px;font-weight:800;color:var(--text)}
  .mb-x{width:36px;height:36px;border-radius:9px;border:1px solid var(--border);background:var(--bg3);color:var(--text);font-size:18px;cursor:pointer}
  .mb-st{padding:10px 16px;font-size:12px;line-height:1.6;color:var(--text2);border-bottom:1px solid var(--border);word-break:keep-all}
  .mb-sec{padding:10px 16px 4px;font-size:10.5px;font-weight:800;letter-spacing:1px;color:var(--text2)}
  .mb-it{display:flex;align-items:center;gap:10px;width:100%;box-sizing:border-box;padding:13px 16px;border:none;border-bottom:1px solid var(--border);
    background:transparent;color:var(--text);font-size:14px;font-weight:700;text-align:left;cursor:pointer;min-height:48px}
  .mb-it:active{background:var(--bg3)}
  .mb-it .mb-i{width:22px;text-align:center;flex:none}
  .mb-it.danger{color:var(--red)}
  .mb-it[disabled]{opacity:.45}

  /* 가독성 — 원본이 너무 작은 글자 */
  .card{padding:12px}
  .card-t{font-size:11.5px;letter-spacing:1px;margin-bottom:8px}
  .tbl{font-size:11px}
  .tbl th{font-size:10.5px}
  .tbl th,.tbl td{padding:6px 5px}
  .g2:has(> .log-card) .hist-scroll .tbl{font-size:11px}
  .log-box,.g2:has(> .log-card) .log-box{font-size:11px;line-height:1.5}
  .stats{gap:6px}
  .st-v{font-size:15px}
  .btn-sm,.tf-btn{font-size:12px}
  /* 표가 폭을 넘으면 카드 안에서 가로로 민다 (화면 전체가 옆으로 밀리지 않게) */
  .hist-scroll,.rep-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
  body{overflow-x:hidden}
}
@media (max-width:380px){
  .hdr h1{font-size:14px}
  .tbl{font-size:10.5px}
}

/* 🪙 코인 선택 — 폰에서 5개를 한 줄에 같은 폭으로 (2026-10-09). 줄은 인라인 flex-wrap:wrap 이라 !important 로 덮는다. */
@media (max-width:768px){
  div:has(> .coin-btn){flex-wrap:nowrap!important;gap:6px!important;justify-content:stretch!important}
  .coin-btn{flex:1 1 0;min-width:0;padding:8px 2px;gap:4px}
  .coin-btn svg{width:min(38px,100%);height:auto;aspect-ratio:1}
  .coin-btn div{font-size:11px;white-space:nowrap}
}
@media (max-width:380px){
  div:has(> .coin-btn){gap:4px!important}
  .coin-btn svg{width:min(32px,100%)}
  .coin-btn div{font-size:10.5px}
}
/* 🚪 처음 화면에서 뒤로가기 → «Tbot 을 종료하시겠습니까?» (2026-10-09) — mobile-v1.js. 인앱 브라우저의 fixed 보정(--fix-r/--fix-b) 포함. */
.mb-exit{position:fixed;inset:0 var(--fix-r,0px) var(--fix-b,0px) 0;z-index:2147483600;display:flex;align-items:center;justify-content:center;
  padding:16px;background:rgba(0,0,0,.6)}
.mb-exit-box{width:min(88vw,340px);box-sizing:border-box;padding:20px 18px 16px;border-radius:14px;background:var(--bg2);
  border:1px solid var(--border);box-shadow:0 18px 50px rgba(0,0,0,.55);color:var(--text);text-align:center}
.mb-exit-t{font-size:16px;font-weight:800;line-height:1.45;margin-bottom:16px;word-break:keep-all}
.mb-exit-b{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.mb-exit-b button{min-height:46px;border-radius:10px;font-size:15px;font-weight:800;cursor:pointer;border:1px solid var(--border);background:var(--bg3);color:var(--text)}
.mb-exit-b .mb-exit-yes{background:#e53935;border-color:#e53935;color:#fff}