/* 좁은 화면(모바일) 전용 규칙 — `style.css` 는 이미 200줄이라 한 줄도 못 늘린다.
   기준 폭은 **`(max-width: 640px)`** 다. `narrow.js` 의 `NARROW_QUERY` 와 반드시 같은
   값이어야 한다 — 갈리면 CSS 는 좁은 레이아웃인데 JS 는 아직 데스크톱 값(고정 높이·
   세로 막대·모드바 켬)을 쓰는 화면이 생긴다.

   표의 첫 열 고정과 스크롤 힌트는 아래 두 블록만 폭과 무관하다 — 데스크톱 창을 좁혀도
   같은 문제(표가 넘친다)가 생기므로 굳이 가둘 이유가 없다. */

.table-wrap { position: relative; }
/* 첫 열(종목코드·날짜)을 고정한다 — 옆으로 밀어도 "무엇의 줄인지" 는 남아야 한다.
   줄무늬(`tbody tr:nth-child(even)`)는 `<tr>` 배경이라 `<td>` 만 sticky 로 띄우면
   투명해서 뒤 칸이 비친다 — 명시적으로 다시 칠한다. */
.table-wrap td:first-child, .table-wrap th:first-child {
  position: sticky; left: 0; z-index: 2; background: var(--card);
}
.table-wrap tbody tr:nth-child(even) td:first-child { background: #fafbfc; }
/* 오른쪽에 더 있다는 힌트. `.is-scrollable`·`.at-end` 는 `table_scroll_hint.js` 가
   스크롤·리사이즈·표가 다시 그려질 때마다(`MutationObserver`) 잰다. 스크롤 끝에 닿으면
   `.at-end` 가 붙어 그림자가 사라진다 — "더 있다" 는 사실이 아닐 때는 안 그린다. */
.table-wrap.is-scrollable:not(.at-end)::after {
  content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 28px; z-index: 3;
  background: linear-gradient(to right, transparent, rgba(31, 41, 51, .16));
  pointer-events: none;
}

/* 카드 툴바 접기. `.js-toolbar-toggle` 은 `narrow_ui.js` 가 만들어 넣는다 — 버튼은
   지우지 않고 숨기기만 한다(`chart_export.js`/`table_export.js` 가 클래스로 찾는다).
   토글은 **좁은 폭이 아니면 항상 숨긴다** — `.is-collapsible` 이 안 붙는 한 desktop 은
   지금과 같아 보여야 한다. */
.js-toolbar-toggle { display: none; }

/* summary 는 desktop 에서 항상 숨긴다 — `open` 은 JS 가 늘 켜 두므로(`narrow_ui.js`)
   내용은 그대로 보이고, 접었다 펴는 토글 글자만 안 보인다(예전 `<p class="note">` 와
   같은 모양). 좁은 폭에서는 아래 미디어쿼리가 **뒤에 오는 같은 특정도 규칙**으로 다시
   보이게 덮어쓴다 — 순서가 바뀌면 desktop 규칙이 이긴다. */
.note-details > summary { display: none; }

@media (max-width: 640px) {
  /* 8px인 이유: 2026-09-05부터 워드프레스 대시보드 쪽 좌우 여백이 0이라 앱이 8px을
     혼자 담당한다 — 위아래는 그대로 둔다. */
  body { padding-left: 8px; padding-right: 8px; }
  .card { padding: 14px 10px; }

  /* 다섯 타일이 한 줄에 못 들어가면 style.css 의 150px 기준으로 하나씩 쌓인다 —
     140px 로 낮춰 308px 내용 폭에서도 2열이 나오게 한다. */
  .metric-grid { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }

  /* 터치 권장 높이 44px. 버튼은 기본으로 글자만큼만 높아서(패딩 6px) 손가락으로 못
     누른다 — `.btn` 안의 글자가 위로 붙지 않게 flex 로 가운데를 잡는다. */
  .btn, .more-btn {
    min-height: 44px; display: inline-flex; align-items: center; justify-content: center;
  }

  .toolbar.is-collapsible .js-toolbar-toggle { display: inline-flex; }
  .toolbar.is-collapsible .btn:not(.js-toolbar-toggle) { display: none; }
  .toolbar.is-collapsible.is-open .btn:not(.js-toolbar-toggle) { display: inline-flex; }

  /* 560px 고정을 걷어낸다 — 높이는 `charts_weight.js`/`charts_holdings.js` 가 폭에서
     계산해 `layout.height` 로 직접 준다(인라인이라 이 규칙보다 우선한다). */
  #plot-weight, #plot-holdings { min-height: 0; }
  .plot { min-height: 300px; }

  /* 설명 문단은 기본으로 접는다 — `narrow_ui.js` 가 `open` 을 뗀다. summary 는 여기서만
     보인다(desktop 은 항상 숨겨 예전과 같은 문단으로 보이게 한다, 아래 공통 규칙). */
  .note-details > summary { display: list-item; cursor: pointer; color: var(--muted);
                            font-size: 13px; margin: 10px 0 0; }
  .note-details .note { margin-top: 4px; }
}