/* 청산가리 웹 (PC 화면 그대로 · /app/) — 웹에서만 덧씌우는 화면 조정 (PC 화면 파일은 그대로) */
/* 웹에는 없는 것: 종료 버튼(주문 프로그램 끄기) · 새 버전 버튼(웹은 새로고침이 곧 새 버전) */
html.chsg-web #quitBtn, html.chsg-web #updBtn { display: none !important; }
/* 손가락: 차트·호가 사다리 위에서는 브라우저가 화면을 끌어가지 않게 (차트가 직접 처리 → 손절·익절선 끌기도 됨) · 길게 누를 때 글자 선택·아이폰 메뉴 안 뜨게 */
html.chsg-web #chartWrap, html.chsg-web #domCv { touch-action: none; }
html.chsg-web body { -webkit-touch-callout: none; overscroll-behavior: none; -webkit-tap-highlight-color: transparent; }
html.chsg-web #chartWrap, html.chsg-web aside canvas, html.chsg-web #tools, html.chsg-web header { -webkit-user-select: none; user-select: none; }
/* 아이폰 노치·홈 막대 */
html.chsg-web header { padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right)); padding-top: max(7px, env(safe-area-inset-top)); }
/* 화면 밖 바탕 = 아래 탭 색 (아이폰 홈 화면 앱이 화면 높이를 짧게 재서 아래에 띠가 남을 때 그 띠가 탭과 이어져 보이게 · 화면 안은 body가 덮음) */
html.chsg-web { background: var(--panel); }
html.chsg-web body { background: var(--bg); }

/* ───────── 휴대폰 · 세로 태블릿 (900px 이하 — PC 화면은 여기서 오른쪽 칸을 숨김) ───────── */
#mTabs { display: none; }
@media (max-width: 900px) {
  html.chsg-web { --m-tab: calc(52px + env(safe-area-inset-bottom)); }
  html.chsg-web header { gap: 6px 8px; padding: max(6px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) 6px max(8px, env(safe-area-inset-left)); }
  html.chsg-web .brand { margin-right: 0; }
  html.chsg-web .brand .wm { display: none; }
  html.chsg-web .set-btn span { display: none; }
  html.chsg-web .set-btn { padding: 6px 8px; }
  html.chsg-web #tps, html.chsg-web #themeGrp, html.chsg-web header .spacer { display: none !important; }
  html.chsg-web .px { margin-left: auto; gap: 6px; }
  html.chsg-web #lastPx { font-size: 16px; }
  html.chsg-web #exPx { font-size: 11px; padding: 1px 6px; }
  html.chsg-web .tf-wrap { order: 20; flex: 1 1 100%; min-width: 0; }
  html.chsg-web #tfGrp { overflow-x: auto; scrollbar-width: none; }
  html.chsg-web #tfGrp::-webkit-scrollbar { display: none; }
  html.chsg-web .tf-menu { position: fixed; left: 8px; right: 8px; top: var(--m-top, 90px); width: auto; }
  html.chsg-web main { padding-bottom: var(--m-tab); }
  /* 그리기 도구: [그리기] 탭에서 아래쪽 가로 막대로 */
  html.chsg-web #tools { display: none; }
  html.chsg-web.m-tools #tools { display: flex; position: fixed; z-index: 43; left: 0; right: 0; bottom: var(--m-tab); width: auto; height: 46px; flex-direction: row; justify-content: flex-start;
    overflow-x: auto; padding: 0 max(8px, env(safe-area-inset-left)); border-right: 0; border-top: 1px solid var(--line); box-sizing: border-box; scrollbar-width: none; }
  html.chsg-web.m-tools #tools::-webkit-scrollbar { display: none; }
  html.chsg-web.m-tools #tools button { flex: none; width: 40px; height: 40px; }
  html.chsg-web.m-tools #tools i { width: 1px; height: 22px; margin: 0 5px; flex: none; }
  html.chsg-web #rbar { display: none; }
  /* [주문] · [호가]: 오른쪽 칸을 화면 가득 */
  html.chsg-web.m-trade aside, html.chsg-web.m-dom aside { display: flex !important; position: fixed; z-index: 41; left: 0; right: 0; top: var(--m-top, 90px); bottom: var(--m-tab);
    width: auto; border-left: 0; padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); box-sizing: border-box; }
  html.chsg-web.m-trade aside { overflow-y: auto; -webkit-overflow-scrolling: touch; }
  html.chsg-web.m-trade aside .dom-head, html.chsg-web.m-trade aside #domCv, html.chsg-web.m-trade aside #tape, html.chsg-web.m-trade aside .dom-foot { display: none !important; }
  html.chsg-web.m-dom aside #trade, html.chsg-web.m-dom aside #pnlBox { display: none !important; }
  /* 주문 칸: 손가락 크기 · 글자 16px(아이폰이 입력할 때 확대하지 않게) */
  html.chsg-web #trade { font-size: 12.5px; padding: 10px 12px 16px; }
  html.chsg-web #trade .t-btns button { min-height: 42px; }
  html.chsg-web #trade input[type=number] { font-size: 16px; width: 92px; padding: 6px 8px; }
  html.chsg-web #trade select { font-size: 16px; }
  html.chsg-web .t-log { max-height: 120px; font-size: 11px; }
  /* 설정 · 레이어: 화면 가득 */
  html.chsg-web #cfg:not([hidden]), html.chsg-web #layers:not([hidden]) { position: fixed; z-index: 41; left: 0; right: 0; top: var(--m-top, 90px); bottom: var(--m-tab); width: auto; border-left: 0; }
  html.chsg-web #cfg select, html.chsg-web #cfg input:not([type=checkbox]):not([type=color]):not([type=range]) { font-size: 16px; }
  /* 창: 입력칸 16px · 화면 높이(주소창 빼고)에 맞춤 */
  html.chsg-web .win input:not([type=checkbox]):not([type=radio]), html.chsg-web .win select, html.chsg-web .win textarea { font-size: 16px !important; }
  html.chsg-web #keyWin .win, html.chsg-web #acctWin .win { max-height: calc(100dvh - 24px); }
  /* 풋프린트 설정 · 지표(MA) 설정 창: PC는 버튼 밑으로 펼쳐서 휴대폰에선 화면 옆으로 나감 → 메뉴줄 아래 화면 폭에 맞춤 · 길면 안에서 스크롤 */
  html.chsg-web .pop { position: fixed; z-index: 44; top: calc(var(--m-top, 90px) + 6px); left: max(8px, env(safe-area-inset-left)); right: max(8px, env(safe-area-inset-right));
    min-width: 0; max-height: calc(100dvh - var(--m-top, 90px) - var(--m-tab) - 14px); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; box-sizing: border-box; }
  html.chsg-web .pop .row { grid-template-columns: 52px minmax(0, 1fr); }
  html.chsg-web .pop .grp, html.chsg-web .pop .grp.tog { width: auto; max-width: 100%; flex-wrap: wrap; box-sizing: border-box; }
  html.chsg-web .pop .grp button { padding: 7px 10px; }
  html.chsg-web .pop select { font-size: 16px; }
  html.chsg-web #maStyle { position: static; width: auto; box-shadow: none; }
  /* 아이폰 홈 화면 앱이 화면 높이를 짧게 잴 때(touch.js가 m-short): 아래 탭이 이미 홈 막대 위에 떠 있으니 탭 아래 여백은 뺌 */
  html.chsg-web.m-short { --m-tab: 52px; }
  /* 거래소 연결 창: 키 만드는 법의 [열기 ↗] · [IP 복사] 버튼은 글 아래 줄로 (옆에 두면 좁은 화면에서 글이 한두 단어씩 꺾임) */
  html.chsg-web .ksteps li { flex-wrap: wrap; }
  html.chsg-web .ksteps li > div { flex: 1 1 calc(100% - 28px); }
  html.chsg-web .ksteps li > .kbtn, html.chsg-web .krow .ksteps li > button { margin-left: 28px; padding: 6px 12px; }
  /* 오른쪽 클릭 메뉴(길게 누르기): 손가락 크기 · 화면 밖으로 안 나가게 */
  html.chsg-web .ctx { max-width: calc(100vw - 16px); }
  html.chsg-web .ctx button { min-height: 38px; }
  /* 아래 탭 (창·메뉴들(z 50~)보다는 아래, 꺼낸 칸(41)보다는 위) */
  html.chsg-web #mTabs { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; z-index: 42; left: 0; right: 0; bottom: 0; height: var(--m-tab);
    padding: 0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); box-sizing: border-box; background: var(--panel); border-top: 1px solid var(--line); }
  html.chsg-web #mTabs button { all: unset; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; cursor: pointer;
    font: 600 10.5px 'IBM Plex Sans KR', system-ui, sans-serif; color: var(--dim); }
  html.chsg-web #mTabs button.on { color: var(--acc); }
  html.chsg-web #mTabs svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: square; stroke-linejoin: miter; }
  html.chsg-web #mTabs i { font-style: normal; position: relative; }
  html.chsg-web #mTabs i.pos::after { content: ''; position: absolute; top: -1px; right: -7px; width: 7px; height: 7px; border-radius: 50%; background: var(--buy); }
  html.chsg-web #mTabs i.pos.dn::after { background: var(--sell); }
}