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

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

   🔴 **아래 미디어쿼리 규칙은 `body.embed`·`body.embed .card`·`body.embed .plot`
   (`style.css`) 을 이기지 못한다 — 일부러다.** 미디어쿼리는 특정도를 더하지 않고,
   여기 선택자(`body`·`.card`·`.plot`)는 그 결합 선택자보다 특정도가 낮다. 임베드의
   `100vh` 높이 정책(D-027·D-028)은 그대로 둔다는 뜻이다 — `test_web_page.py` 가
   `body.embed` 를 덮어쓰는 선택자가 여기 없는지를 본다. */

.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` 가 만들어 넣는다 — 버튼은
   지우지 않고 숨기기만 한다(`clipboard.js`/`table_copy.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인 이유(D-053·D-054): 워드프레스 쪽 좌우 여백이 0이라 앱이 8px을 혼자 담당한다 —
     위아래는 그대로 둔다. */
  body { padding-left: 8px; padding-right: 8px; }
  /* 제목 옆 갱신 시각은 nowrap 이라 390px 폰에서 488px 로 넘쳐 문서에 가로 스크롤을 만들었다
     (실측 2026-09-05: scrollWidth 508 > 374). 좁은 폭에서는 제 줄로 내리고 줄바꿈을 허용한다. */
  .updated { display: block; white-space: normal; }
  .card { padding: 14px 10px; }

  /* 다섯 타일이 한 줄에 못 들어가면 style.css 의 150px 기준으로 하나씩 쌓인다 —
     140px 로 낮춰 좁은 내용 폭에서도 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; }

  /* 파이·종목별 막대의 고정 높이(`#plot-weight, #plot-holdings { min-height: 420px }`,
     `style.css`)를 걷어낸다 — 좁은 폭에서는 `charts.js` 가 폭에서 계산해 `layout.height`
     로 직접 준다(인라인이라 이 규칙보다 우선한다). */
  #plot-weight, #plot-holdings { min-height: 0; }
  .plot { min-height: 300px; min-width: 0; }

  /* 🔴 **`.two-up` 의 `1fr` 트랙이 자식에 밀려 늘어나는 것을 막는다** (3라운드 실측,
     Playwright + 실제 Plotly). `style.css` 의 900px 규칙(`grid-template-columns: 1fr`)
     은 `1fr` 이 `minmax(auto, 1fr)` 이라 자식의 min-content 를 못 이긴다 — 좁은 폭
     파이가(과거에) 고정 `layout.width` 를 줬을 때, 그 픽셀 값이 트랙을 그만큼 벌리고
     같은 트랙의 종목별 막대 카드까지 같이 늘어났다. 재렌더가 늘어난 폭을 다시 재서
     또 그 폭으로 그리는 **되먹임**이라 640px 경계를 넘기 전엔 줄지 않았다(실측: 390→
     500→390 왕복 뒤에도 462px 로 고정). `renderWeight` 는 이제 `layout.width` 를 아예
     안 주지만(`charts_weight.js`), 트랙 쪽도 방어적으로 막아 둔다 — `minmax(0, 1fr)` 은
     자식 크기와 무관하게 트랙을 컨테이너 폭에 딱 맞춘다. */
  .two-up { grid-template-columns: minmax(0, 1fr); }

  /* 설명 문단은 기본으로 접는다 — `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; }
}