/* 사이트 공통 휴대폰 규칙. 모든 페이지에서 가장 마지막에 불러와 앞선 화면별 규칙보다 우선한다. */
/* 휴대폰 공통 (2026-09-23 소유자 요청: "각 화면을 돌아다니면서 버튼 크기나 화면들도 잘 나오게").
   - 누르는 것은 손가락 크기(최소 38~40px)로 키운다. 작은 버튼(29px)이 모든 화면에 있었다.
   - 머리글이 있고 칸이 4개 이상인 표는 칸마다 항목 이름을 붙인 카드로 바꾼다(mobile-tables.js가
     mobile-cards 클래스와 이름을 붙인다). 좁은 칸에서 글자가 세로로 꺾이던 문제를 없앤다.
   - 두 칸 격자는 내용이 길어도 화면 폭을 넘지 않게 minmax(0, 1fr)로 쌓는다.
   - 제목과 보조 설명이 나란한 머리는 줄바꿈해 제목이 한 글자씩 꺾이지 않게 한다. */
@media (max-width: 820px) {
  .grid-2, .grid-3 { grid-template-columns: minmax(0, 1fr); }
  .grid-2 > *, .grid-3 > *, .panel { min-width: 0; }
  .panel-head { flex-wrap: wrap; align-items: flex-start; }
  .panel-head > h2, .panel-head > div:first-child { flex: 0 1 auto; min-width: 0; word-break: keep-all; }
  .panel-head > small { flex: 1 1 220px; min-width: 0; }
  .panel table:not(.mobile-cards) { display: block; max-width: 100%; overflow-x: auto; }
}
@media (max-width: 760px) {
  .button, .button.small { min-height: 40px; }
  .button.small { padding: 0 14px; font-size: 13px; }
  .icon-button, .widget-icon { min-width: 40px; min-height: 40px; }
  select, input:not([type=checkbox]):not([type=radio]):not([type=range]) { min-height: 42px; }
  .wl-seg button, .admin-tab, .market-tabs .button { min-height: 38px; }
  table.mobile-cards thead { display: none; }
  table.mobile-cards, table.mobile-cards tbody { display: block; width: 100%; min-width: 0; }
  table.mobile-cards tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; padding: 12px; border-bottom: 1px solid var(--line); }
  table.mobile-cards td { display: block; height: auto; min-width: 0; padding: 0; border: 0; text-align: left; white-space: normal; overflow-wrap: anywhere; word-break: keep-all; }
  table.mobile-cards td[data-label]::before { content: attr(data-label); display: block; margin-bottom: 2px; color: var(--faint, var(--muted)); font-size: 11px; font-weight: 400; }
  table.mobile-cards td:first-child, table.mobile-cards td[colspan], table.mobile-cards td:last-child:has(button) { grid-column: 1 / -1; }
  table.mobile-cards td:last-child:has(button) { display: flex; flex-wrap: wrap; gap: 6px; }
  table.mobile-cards td:last-child:has(button)::before { flex: 0 0 100%; }
  .market-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .market-card { padding: 10px; }
  .market-card strong { font-size: 16px; }
  /* 관심 종목: 별 버튼만 둘째 줄에 있어 줄마다 빈 공간이 컸다. 첫 줄 오른쪽 끝으로 올린다. */
  .wl-row, .wl-list.with-metric .wl-row { grid-template-columns: minmax(0, 1fr) auto auto auto; grid-template-areas: "name price rate actions" "nums nums nums nums"; column-gap: 8px; row-gap: 0; }
  .wl-actions button, .wl-icon { min-width: 38px; min-height: 38px; }
  .dashboard-scale-control button { min-width: 40px; min-height: 40px; }
}

/* Plan 관제실 옛 규칙의 html{min-width:1180px}가 휴대폰에서 가로 스크롤을 만들지 않게 한다. */
@media (max-width: 820px) { html { min-width: 0; } }

/* 휴대폰의 종목 상세: 1320px 창을 화면 전체로 펴고 세로로 쌓는다. 차트 주기 버튼은 줄바꿈한다.
   소유자 2026-09-23: "종목 상세는 모바일에서 아예 보는 것 자체가 힘듦". */
@media (max-width: 820px) {
  .modal.stock-modal { width: 100vw; max-width: 100vw; max-height: 100dvh; margin: 0; border-radius: 0; }
  .stock-modal-card { min-height: 100dvh; }
  .stock-layout { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; padding: 10px; gap: 10px; }
  .stock-chart-panel { min-height: 260px; }
  .stock-side-panel, .stock-evidence-panel { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .stock-toolbar { min-height: 0; flex-wrap: wrap; gap: 8px; padding: 10px; }
  .interval-group { flex-wrap: wrap; gap: 6px; }
  .interval-group button { min-width: 52px; min-height: 36px; }
  /* 닫기(×)는 항상 오른쪽 위에, 현재가는 한 줄로 */
  .stock-modal .modal-header { position: relative; flex-wrap: wrap; padding-right: 56px; }
  .stock-modal .modal-header > .icon-button { position: absolute; top: 12px; right: 12px; }
  .stock-modal .quote-price { white-space: nowrap; }
  .stock-modal .quote-summary { gap: 4px 10px; flex-wrap: wrap; }
  .stock-modal .stock-chart-panel > header { flex-wrap: wrap; gap: 2px 8px; }
  .key-value-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .compact-table-wrap { max-height: 320px; }
}
/* 관심 종목 줄은 눌러서 종목 상세로 간다. */
.wl-row { cursor: pointer; }