:root {
  --bg: #2B2B2B;
  --panel: #3C3F41;
  --border: #323232;
  --text: #A9B7C6;
  --muted: #808080;
  --accent: #4A88C7;
  --accent-active: #5A9BDC;
  --select: #214283;
  --cyan: #22D3EE;
  --orange: #FFA500;
  --green: #4CAF50;
  --red: #EF5350;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Malgun Gothic", "맑은 고딕", sans-serif;
  font-size: 13px;
}

a { color: var(--accent); }

.page {
  /* 종목 설정 표가 컬럼이 많아 1300px 에서는 가로 스크롤이 생긴다.
     화면이 좁으면 max-width 라 자동으로 줄어든다. */
  max-width: 1600px;
  margin: 0 auto;
  padding: 12px 16px 40px;
}

header.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 0;
}

header.top .nav a {
  color: var(--text);
  margin-left: 16px;
  text-decoration: none;
  border: 1px solid var(--border);
  padding: 4px 10px;
  border-radius: 4px;
}
header.top .nav a.active { border-color: var(--accent); color: var(--accent); }

#mode-badge {
  font-weight: bold;
  padding: 3px 10px;
  border-radius: 4px;
  border: 1px solid var(--border);
}
#mode-badge.mainnet { color: #fff; background: #7a2020; border-color: #c62828; }
#mode-badge.testnet { color: var(--text); background: var(--panel); }

/* 코스피 지수 (참고용). 등락 색은 이 화면의 다른 손익 표시와 같은 규칙(오름=초록)을 따른다 */
#kospi-badge, #clock-badge {
  padding: 3px 10px; border-radius: 4px;
  border: 1px solid var(--border); background: var(--panel);
  font-size: 12px; white-space: nowrap;
}
#clock-badge { font-family: Consolas, monospace; color: var(--cyan); }
#kospi-badge .kospi-val { font-weight: bold; }
#kospi-badge .kospi-chg { margin-left: 6px; }
#kospi-badge.stale { opacity: 0.55; }

/* ---------------- 로그인 화면 ---------------- */
.login-wrap {
  min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px;
}
.login-box {
  width: 100%; max-width: 380px;
  background: var(--panel); border: 1px solid var(--border);
  border-top: 3px solid var(--accent); border-radius: 8px; padding: 22px 20px;
}
.login-box h3 { margin: 0 0 6px; color: var(--accent); font-size: 15px; }
.login-note {
  font-size: 12px; margin: 0 0 16px; line-height: 1.5;
  border-left: 3px solid var(--orange); padding-left: 8px;
}
.login-row { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
.login-row span { font-size: 12px; color: var(--muted); }
.login-row input { min-height: 38px; font-size: 14px; padding: 6px 10px; }
.login-error {
  font-size: 12px; margin-bottom: 12px; padding: 8px 10px; border-radius: 6px;
  color: var(--red); background: rgba(239, 83, 80, 0.1);
  border: 1px solid rgba(239, 83, 80, 0.5);
}
.login-submit {
  width: 100%; min-height: 40px; font-size: 14px; font-weight: bold;
  background: var(--accent); color: #fff; border-color: var(--accent);
}
.login-submit:hover:not(:disabled) { background: var(--accent-active); }

hr.divider {
  border: none;
  border-top: 2px solid var(--orange);
  margin: 10px 0;
}

.card {
  background: var(--panel);
  border: 1px solid var(--border);
  /* border 축약 뒤에 와야 지워지지 않는다 */
  border-top: 2px solid rgba(74, 136, 199, 0.35);
  border-radius: 6px;
  padding: 10px;
  margin-bottom: 12px;
}
.card > h3 {
  margin: 0 0 8px 0;
  color: var(--accent);
  font-size: 13px;
  /* 흑백 느낌을 줄이려고 제목 앞에 강조 바를 둔다 */
  border-left: 3px solid var(--accent);
  padding-left: 7px;
}

.row { display: flex; gap: 8px; flex-wrap: wrap; }
.tab-row { display: flex; gap: 4px; margin: 8px 0; border-bottom: 1px solid var(--border); }
.tab-btn {
  border: none; border-radius: 0; background: transparent; color: var(--muted);
  padding: 6px 14px; border-bottom: 2px solid transparent;
}
.tab-btn:hover:not(:disabled) { background: transparent; color: var(--text); }
.tab-btn.active { color: var(--accent); border-bottom-color: var(--accent); font-weight: bold; }
.row.between { justify-content: space-between; align-items: center; }
.btn-row { display: flex; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }

button {
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--border);
  padding: 6px 12px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
}
button:hover:not(:disabled) { background: var(--accent); color: #fff; }
/* 휴대폰에서 잘못 누르는 걸 막는 게 목적이라, 비활성 상태가 눈에 확실히 보여야 한다 */
button:disabled {
  color: var(--muted);
  cursor: not-allowed;
  opacity: 0.45;
  border-style: dashed;
  background: transparent;
}
button:disabled.danger { border-color: var(--border); }
button.danger:hover:not(:disabled) { background: #b23c3c; }
button.flex { flex: 1; }

input, select {
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 4px 6px;
  font-size: 12px;
}

table { width: 100%; border-collapse: collapse; }
th, td {
  border-bottom: 1px solid var(--border);
  padding: 5px 6px;
  text-align: center;
  white-space: nowrap;
}
th {
  color: var(--accent); background: var(--border); font-weight: bold;
  border-bottom: 2px solid var(--accent);
}
tbody tr { cursor: pointer; }
tbody tr:hover { background: rgba(255,255,255,0.04); }
tbody tr.selected { background: var(--select); color: #fff; }
td.editable:hover { outline: 1px dashed var(--accent); }
/* 자동 계산값이 들어가는 셀 (직접 입력도 가능) */
td.computed { color: var(--cyan); }
th .th-sub { font-weight: normal; font-size: 10px; color: var(--muted); }
.table-scroll { max-height: 320px; overflow-y: auto; }
.table-scroll thead th { position: sticky; top: 0; z-index: 1; }
th.sortable { cursor: pointer; user-select: none; }
th.sortable:hover { color: var(--accent); }

.muted { color: var(--muted); }
.asset-inline { display: flex; gap: 20px; flex-wrap: wrap; padding: 6px 0; }

#log-box {
  background: var(--bg);
  border: 1px solid var(--border);
  height: 260px;
  overflow-y: auto;
  padding: 6px 8px;
  font-family: Consolas, monospace;
  font-size: 12px;
  white-space: pre-wrap;
}
#log-box .line { margin-bottom: 2px; }

.pnl-pos { color: #6FCF6F; }
.pnl-neg { color: #EF5350; }
.price-cell { color: var(--cyan); font-weight: bold; }

.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 8px 16px;
  padding: 8px 0;
}
.stat { display: flex; flex-direction: column; gap: 2px; }
.stat.stat-wide { grid-column: span 2; }
.stat-label { color: var(--muted); font-size: 11px; }
.stat-value { font-size: 15px; font-weight: bold; }
.stat-value.stat-danger { color: var(--red); }

.chart-wrap { position: relative; }
canvas#chart { width: 100%; height: 460px; background: var(--bg); border: 1px solid var(--border); border-radius: 4px; }

.modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.6);
  display: flex; align-items: center; justify-content: center; z-index: 1000;
}
.modal-box {
  background: var(--panel); border: 1px solid var(--border); border-radius: 8px;
  padding: 16px; width: 90%; max-width: 900px; max-height: 85vh; overflow-y: auto;
}
/* History 는 왼쪽 달력 + 오른쪽 9컬럼 표라서 900px 로는 표가 눌려 가로 스크롤이 생긴다.
   이 목록에서까지 좌우로 밀 이유가 없으니 표가 통째로 들어갈 만큼 넓힌다. */
#history-modal .modal-box { max-width: 1240px; }
.history-body { display: flex; gap: 16px; margin-top: 12px; flex-wrap: wrap; }
.history-left { flex: 0 0 280px; display: flex; flex-direction: column; gap: 12px; }
.history-summary {
  background: var(--bg); border: 1px solid var(--border); border-radius: 6px; padding: 10px 12px;
}
.hs-title { font-weight: bold; color: var(--accent); margin-bottom: 6px; }
.hs-line { font-size: 12px; margin-bottom: 4px; }
.hs-line .stat-value { font-size: 15px; font-weight: bold; margin-left: 4px; }
.history-calendar {}
.history-list { flex: 1; min-width: 320px; }
.history-list .table-scroll { max-height: 60vh; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-cell {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  min-height: 48px; border-radius: 4px; cursor: pointer;
  font-size: 12px; background: var(--bg); border: 1px solid var(--border);
}
.cal-cell.empty { visibility: hidden; cursor: default; }
.cal-cell .cal-daynum { font-size: 12px; }
.cal-cell .cal-daypnl { font-size: 10px; font-weight: bold; }
.cal-cell .cal-daycount { font-size: 9px; }
.cal-cell.today .cal-daynum { text-decoration: underline; }
.cal-cell.has-trades { border-color: var(--accent); }
.cal-cell.selected { background: var(--select); color: #fff; }
.cal-cell:hover:not(.empty) { background: var(--accent); color: #fff; }
.cal-head { text-align: center; font-size: 11px; color: var(--muted); padding-bottom: 2px; }
.cal-head.sun { color: var(--red); }
.cal-head.sat { color: var(--accent); }
.side-long { color: var(--green); font-weight: bold; }
.side-short { color: var(--red); font-weight: bold; }

/* History 구분 배지: 진입 / 전량청산 / 이득만청산 / 손절청산 */
.hkind {
  display: inline-block; padding: 1px 7px; border-radius: 3px;
  font-size: 11px; white-space: nowrap;
}
.hkind.hk-entry   { background: #2e3440; color: var(--muted); }
.hkind.hk-full    { background: #1f3a2e; color: #6FCF6F; }
.hkind.hk-partial { background: #1f2e3a; color: var(--cyan); }
.hkind.hk-stop    { background: #3a1f1f; color: var(--red); }

/* 실행 중 값과 설정값이 다른 Lot 매수금액 셀 표시.
   ::after 를 쓰는 이유: 셀 텍스트(td.textContent)를 편집 시 값으로 읽기 때문에
   마커를 텍스트로 넣으면 수정이 깨진다. */
td.lot-pending { color: var(--accent); font-weight: bold; }
td.lot-pending::after { content: " ⚠"; }

/* 부분체결된 미체결 주문의 수량 셀.
   미체결 목록의 상태는 사실상 늘 New 라 열을 없애고, 예외 상황만 여기서 눈에 띄게 한다. */
td.qty-partial { color: var(--orange); font-weight: bold; }
td.qty-partial::after { content: " ⚠"; }

/* ---------------- 종목 설정 편집 팝업 ---------------- */
/* 더블클릭 대신 아이콘 -> 팝업. 휴대폰에서도 한 번에 열리도록. */
.edit-icon {
  background: none; border: none; margin-left: 2px;
  cursor: pointer; font-size: 15px; line-height: 1; color: var(--accent);
  /* 폰에서 손가락으로 정확히 누를 수 있게 탭 영역을 확보한다 (권장 최소 ~32px) */
  padding: 8px 10px; min-width: 34px; min-height: 34px;
  display: inline-flex; align-items: center; justify-content: center;
  vertical-align: middle;
}
.edit-icon:hover { background: none; color: var(--accent-active); }
/* 표 안의 아이콘 버튼은 탭 영역만 같으면 되므로 ✎ 와 규칙을 공유한다 */
.chart-icon { font-size: 13px; }

/* ---------------- 수수료·펀딩피 팝업 ---------------- */
#ledger-modal .modal-box { max-width: 900px; }
.ledger-summary {
  margin-top: 12px; padding: 10px 12px; border-radius: 6px; font-size: 12px; line-height: 1.8;
  background: var(--bg); border: 1px solid var(--border); border-left: 3px solid var(--orange);
}
.ledger-summary .v { color: var(--orange); font-weight: bold; font-size: 14px; }
.ledger-summary .k { color: var(--muted); margin-right: 4px; }
h3.ledger-h {
  margin: 14px 0 4px; font-size: 12px; color: var(--accent);
  border-left: 3px solid var(--accent); padding-left: 7px;
}
#ledger-modal td.fee { color: var(--orange); }

/* ---------------- 단타 팝업 ---------------- */
#scalp-modal .modal-box { border-top: 3px solid var(--orange); }
#scalp-title { color: var(--orange); }
.scalp-account {
  margin-top: 12px; padding: 8px 10px; border-radius: 6px; font-size: 12px;
  background: var(--bg); border: 1px solid var(--border); border-left: 3px solid var(--cyan);
}
.scalp-account .v { color: var(--cyan); font-weight: bold; }
.scalp-form { margin-top: 12px; display: flex; flex-direction: column; gap: 4px; }
.scalp-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 6px 8px; border-radius: 4px;
}
.scalp-row:nth-child(odd) { background: rgba(255, 255, 255, 0.025); }
.scalp-row > span:first-child { font-size: 12px; flex: 1; }
.scalp-row input { width: 160px; flex: 0 0 160px; text-align: right; min-height: 34px; }
/* 직접 입력만 쓴다 */
.scalp-form input[type=number] { -moz-appearance: textfield; appearance: textfield; }
.scalp-form input[type=number]::-webkit-outer-spin-button,
.scalp-form input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* 종목 확인 결과 (입력하면 거래소에 실제로 있는 종목인지 바로 확인) */
.scalp-check { font-size: 11px; padding: 2px 8px 4px; min-height: 16px; }
.scalp-check.ok { color: var(--green); }
.scalp-check.bad { color: var(--red); }
.scalp-check.busy { color: var(--muted); }

/* 진입하면 얼마가 나가는지를 누르기 전에 보여준다 */
.scalp-calc {
  margin-top: 12px; padding: 8px 10px; border-radius: 6px; font-size: 12px; line-height: 1.7;
  background: rgba(255, 165, 0, 0.08); border: 1px solid rgba(255, 165, 0, 0.4);
}
.scalp-calc .v { color: var(--orange); font-weight: bold; }
.scalp-calc .warn { color: var(--red); font-weight: bold; }

.scalp-positions { margin-top: 12px; font-size: 12px; }
.scalp-positions table { width: 100%; }
.scalp-positions th, .scalp-positions td { padding: 4px 6px; font-size: 11px; }
.scalp-positions .empty { color: var(--muted); padding: 6px 2px; }

.scalp-result {
  margin-top: 12px; padding: 8px 10px; border-radius: 6px; font-size: 12px;
  background: var(--bg); border: 1px solid var(--border); white-space: pre-wrap;
}
.scalp-result.ok { border-left: 3px solid var(--green); }
.scalp-result.bad { border-left: 3px solid var(--red); }

#btn-scalp-buy { background: var(--green); color: #fff; border-color: var(--green); font-weight: bold; min-width: 130px; min-height: 36px; }
#btn-scalp-buy:hover:not(:disabled) { background: #5cbf60; }
#btn-scalp-sell { min-width: 130px; min-height: 36px; }
#btn-scalp-close-modal { min-width: 90px; min-height: 36px; }

/* ---------------- 가격 알림 ---------------- */
/* 종목 셀: 아이콘이 붙어 있어 가운데 정렬이면 종목명 위치가 행마다 흔들린다.
   왼쪽 정렬하되 테두리에 딱 붙지 않게 여백을 준다. */
td.sym-cell { text-align: left; padding-left: 12px; }
/* 금액/가격은 자릿수를 눈으로 맞출 수 있게 오른쪽 정렬.
   여백을 넉넉히 줘서, 가운데 정렬된 머리글 밑에서 너무 오른쪽으로 치우쳐 보이지 않게 한다.
   (완전히 가운데로 맞추려면 값 길이마다 여백이 달라야 해서, 자릿수 정렬이 깨진다) */
td.num-cell { text-align: right; padding-right: 32px; }
/* 이 둘은 값이 짧아서(2~4자리) 같은 여백이면 유독 오른쪽에 몰려 보인다 -> 더 밀어준다 */
td.num-cell[data-key="order_usd_amount"] { padding-right: 48px; }
td.num-cell[data-key="total_capital"] { padding-right: 44px; }

/* 종 아이콘: 켜둔 알림이 있으면 주황, 없으면 눈에 안 띄게 */
.alert-icon { font-size: 13px; color: var(--muted); }
.alert-icon.on { color: var(--orange); }
.alert-icon:hover { background: none; color: var(--accent-active); }

.alert-form { margin-top: 6px; display: flex; flex-direction: column; gap: 4px; }
.alert-row {
  display: flex; align-items: center; gap: 10px;
  padding: 5px 8px; border-radius: 4px;
}
.alert-row:nth-child(odd) { background: rgba(255, 255, 255, 0.025); }
.alert-row .alert-price { flex: 1 1 auto; min-height: 34px; text-align: right; }
.alert-row .alert-armed { flex: 0 0 auto; width: 18px; height: 18px; }
.alert-row .ar-sent { flex: 0 0 128px; font-size: 11px; color: var(--muted); text-align: right; }
.alert-row .ar-sent.hit { color: var(--orange); }
/* 직접 입력만 쓰므로 브라우저 기본 스피너를 없앤다 (▲▼ 버튼도 두지 않는다) */
.alert-form input[type=number] { -moz-appearance: textfield; appearance: textfield; }
.alert-form input[type=number]::-webkit-outer-spin-button,
.alert-form input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.alert-note {
  margin-top: 10px; font-size: 11px; padding: 8px 10px; border-radius: 6px;
  background: var(--bg); border-left: 3px solid var(--orange);
}
/* 팝업 하단 버튼은 손가락으로 누르기 좋게 넉넉히 */
#btn-alert-cancel, #btn-alert-save { min-width: 120px; min-height: 36px; }
#btn-alert-save { background: var(--accent); color: #fff; border-color: var(--accent); font-weight: bold; }
#btn-alert-save:hover { background: var(--accent-active); }

/* ---------------- 종목 차트 팝업 ---------------- */
#chart-modal .modal-box { max-width: 1240px; }
canvas#live-chart {
  width: 100%; height: 420px;
  background: var(--bg); border: 1px solid var(--border); border-radius: 4px;
}
#chart-info .v { color: var(--cyan); font-weight: bold; }
#chart-info .est { color: var(--orange); }
.chart-legend { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 8px; font-size: 12px; }
.chart-legend .lg-entry { color: var(--green); }
.chart-legend .lg-full { color: var(--red); }
.chart-legend .lg-partial { color: var(--cyan); }
.chart-legend .lg-stop { color: var(--orange); }

#edit-modal .modal-box { border-top: 3px solid var(--accent); }
#edit-title { color: var(--accent); }

.edit-info {
  background: var(--bg); border: 1px solid var(--border);
  border-left: 3px solid var(--cyan); border-radius: 6px;
  padding: 10px 12px; margin-top: 12px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 6px 14px;
}
.edit-info div { font-size: 12px; }
.edit-info .k { color: var(--muted); margin-right: 4px; }
.edit-info .v { color: var(--cyan); font-weight: bold; }

.edit-form { margin-top: 14px; display: flex; flex-direction: column; gap: 4px; }
.edit-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 6px 8px; border-radius: 4px;
  position: relative;
}
/* 변경된 항목은 팝업 크기를 흔들지 않도록 하단 목록 대신 행 오른쪽 체크로 표시한다.
   빈 상태에서도 자리를 차지해야 체크가 생길 때 레이아웃이 밀리지 않는다. */
.row-mark {
  flex: 0 0 18px; text-align: center;
  color: var(--green); font-weight: bold; font-size: 14px; line-height: 1;
}
.edit-row.changed { background: rgba(76, 175, 80, 0.10); }
.edit-row:nth-child(odd) { background: rgba(255, 255, 255, 0.025); }
.edit-row:hover { background: rgba(74, 136, 199, 0.10); }
.edit-row > span:first-child { font-size: 12px; flex: 1; }
/* 스테퍼 행(▲▼ 버튼 34px)과 높이를 맞춘다. 안 맞추면 줄마다 높이가 달라 보인다 */
.edit-row input, .edit-row select {
  width: 150px; flex: 0 0 150px; text-align: right;
  min-height: 34px;
}
.edit-row select { text-align: left; }
.edit-row.calc { background: rgba(34, 211, 238, 0.07); }
.edit-row.calc #edit-lot-auto { color: var(--cyan); }

/* 브라우저 기본 스피너 제거 - 폰에서 누르기 너무 작다. ▲/▼ 버튼으로 대체 */
.edit-form input[type=number] { -moz-appearance: textfield; appearance: textfield; }
.edit-form input[type=number]::-webkit-outer-spin-button,
.edit-form input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ▲ 올리기 / ▼ 내리기 */
.stepper { display: flex; align-items: stretch; flex: 0 0 auto; gap: 0; }
.stepper input {
  width: 92px !important; flex: 0 0 92px !important;
  border-radius: 0; text-align: center;
}
.step-btn {
  width: 40px; min-height: 34px; padding: 0;
  font-size: 12px; font-weight: bold; line-height: 1;
  border: 1px solid var(--border); background: var(--panel); color: var(--accent);
  cursor: pointer;
}
.step-btn.up { border-radius: 4px 0 0 4px; border-right: none; }
.step-btn.down { border-radius: 0 4px 4px 0; border-left: none; }
.step-btn:hover { background: var(--accent); color: #fff; }
.step-btn:active { background: var(--accent-active); color: #fff; }

.edit-warn {
  margin-top: 12px; padding: 8px 10px; border-radius: 6px; font-size: 12px;
  background: rgba(255, 165, 0, 0.12); border: 1px solid rgba(255, 165, 0, 0.5);
  border-left: 3px solid var(--orange); color: var(--text);
}
.edit-warn b { color: var(--orange); }

.edit-diff {
  margin-top: 12px; padding: 8px 10px; border-radius: 6px; font-size: 12px;
  background: var(--bg); border: 1px solid var(--border);
  /* 내용이 바뀌어도 팝업 높이가 흔들리지 않게 두 줄 분량을 고정 확보 */
  min-height: 44px; display: flex; align-items: center;
}
.edit-diff.has-diff { color: var(--green); border-left: 3px solid var(--green); }
.edit-diff.pnl-neg { border-left: 3px solid var(--red); }

#btn-edit-apply:not(:disabled) {
  background: var(--accent); color: #fff; border-color: var(--accent); font-weight: bold;
}
#btn-edit-apply:not(:disabled):hover { background: var(--accent-active); }

/* 폰에서도 좁은 화면용 세로 배치를 쓰지 않는다.
   페이지 전체가 좌우로 밀리는 방식이라 팝업도 웹과 같은 폭으로 그리고,
   라벨 오른쪽에 입력, 그 오른쪽에 변경 체크가 오는 한 줄 배치를 유지한다. */

/* 실행 중 값과 설정값이 다른 Lot 매수금액 셀 표시.
   ::after 를 쓰는 이유: 셀 텍스트(td.textContent)를 편집 시 값으로 읽기 때문에
   마커를 텍스트로 넣으면 수정이 깨진다. */
td.lot-pending { color: var(--orange); font-weight: bold; }
td.lot-pending::after { content: " ⚠"; }

/* ---------------- 폰 화면 ---------------- */
/* 표마다 상자 안에서 따로 스크롤하면 폰에서 손가락으로 다루기 힘들다.
   상자를 풀고 예전처럼 페이지 전체를 좌우로 미는 방식으로 되돌린다. */
@media (max-width: 768px) {
  /* 가장 넓은 표(관심 종목, 13컬럼 ≈ 1270px)가 카드 밖으로 삐져나가지 않을 만큼.
     이 폭 덕분에 카드/버튼/표가 어긋나지 않고 한 덩어리로 같이 밀린다.
     relative 는 아래 팝업이 이 폭을 기준으로 놓이게 하기 위한 것. */
  .page { min-width: 1300px; position: relative; }
  /* 세로 높이 제한과 자체 스크롤을 없애야 표가 페이지 스크롤에 그대로 실린다.
     팝업 안의 표(History/인출)는 제외 — 거기는 팝업 자체가 스크롤 범위다. */
  .card .table-scroll { max-height: none; overflow: visible; }

  /* fixed 면 오버레이가 뷰포트(≈375px)에 갇혀 팝업도 그만큼밖에 못 커진다.
     .page 기준 absolute 로 바꿔야 팝업이 웹과 같은 폭을 쓰고, 페이지를 좌우로 밀어 볼 수 있다.
     (여는 순간 팝업 위치로 스크롤하는 건 app.js 의 showModal) */
  .modal-overlay { position: absolute; align-items: flex-start; padding: 12px 0; }
}

/* 팝업 제목도 색을 준다 (History / 인출 히스토리 / 종목 설정 공통) */
.modal-box > .row > h3 { color: var(--accent); }
.modal-box { border-top: 3px solid var(--accent); }

/* ---------------- 관리자 대시보드 ---------------- */
.admin-cards {
  display: grid; gap: 10px; margin-top: 10px;
  /* 안에 '전체 포지션' 표가 들어가므로 좁으면 못 읽는다 */
  grid-template-columns: repeat(auto-fill, minmax(620px, 1fr));
}
.admin-card {
  background: var(--panel); border: 1px solid var(--border);
  border-top: 2px solid rgba(74, 136, 199, 0.35);
  border-radius: 6px; padding: 10px 12px;
}
.ac-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ac-name {
  color: var(--accent); font-weight: bold; font-size: 14px;
  background: transparent; border: 1px solid transparent; padding: 2px 6px; border-radius: 4px;
}
.ac-name:hover:not(:disabled) { border-color: var(--accent); background: transparent; }
.ac-badge { font-size: 10px; padding: 2px 6px; border-radius: 3px; border: 1px solid var(--border); }
.ac-badge.mainnet { color: var(--red); border-color: var(--red); }
.ac-badge.testnet { color: var(--muted); }
.ac-sub { font-size: 11px; margin-top: 3px; }
.ac-sub .run-on { color: var(--green); font-weight: bold; }
.ac-grid {
  margin-top: 8px; display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 2px 12px; font-size: 12px;
}
.ac-grid > div { display: flex; justify-content: space-between; gap: 8px; padding: 1px 0; }
.ac-label { color: var(--muted); }
.ac-value { font-family: Consolas, monospace; }
.ac-warn { margin-top: 8px; font-size: 11px; color: var(--red); }
.ac-section {
  margin: 10px 0 4px; font-size: 11px; color: var(--muted);
  border-bottom: 1px solid var(--border); padding-bottom: 3px;
}
.ac-empty { font-size: 11px; padding: 4px 2px; }
/* 좁은 화면에서 카드가 페이지를 밀지 않도록 표만 따로 스크롤 */
.ac-table-wrap { overflow-x: auto; }
.ac-table { width: 100%; border-collapse: collapse; font-size: 11px; }
.ac-table th, .ac-table td { padding: 3px 6px; white-space: nowrap; text-align: right; }
.ac-table th { color: var(--muted); font-weight: normal; border-bottom: 1px solid var(--border); }
.ac-table td:first-child, .ac-table th:first-child,
.ac-table td:nth-child(2), .ac-table th:nth-child(2) { text-align: left; }
.ac-table tbody tr:nth-child(odd) { background: rgba(255, 255, 255, 0.02); }