/* etfWeb 테마 — 한국 금융 서비스 관습(funETF 계열)을 따르되 구조는 독자 설계.
 *
 * 원칙: HTML 은 CSS 없이도 위→아래로 읽히는 완결된 문서여야 한다.
 * 이 파일은 그 위에 보기 좋게 얹기만 한다. 수치는 절대 CSS(배경이미지·아이콘)로만 표현하지 않는다.
 *
 * 색 관습: 상승=빨강 / 하락=파랑 (한국. 미국식 초록/빨강 아님)
 */

:root {
  /* ⚠ **지금 이 값을 읽는 규칙이 하나도 없다.** 마지막 소비처였던 랭킹 판
     (.rk-card)·발줄(.rk-foot)·칸 발줄(.rk-cellfoot)이 2026-09-17 에 /rank/ 허브가
     타일 격자로 바뀌며 함께 사라졌다. 값과 좁은 화면 분기(아래 @media)는 남겨 둔다 —
     이 파일 여러 곳의 주석이 '판 안여백' 규약을 이 값으로 설명하고 있고, 판이 다시
     설 때 숫자를 새로 고르지 않기 위해서다. 아래는 그 시절의 근거다.

     랭킹 화면의 판(.rk-card)과 그 발줄(.rk-foot) 안여백. 2026-08-31 부터 판의
     **왼쪽은 이 값을 읽지 않는다** — 홈과 같이 0 으로 두어 목록이 제목 줄에 선다.
     오른쪽은 둘이 함께 읽어야 '전체' 가 값 열에 맞는다.
     **한 곳에서 정한다.** 좁은 화면에서 이 값만 12px 로 줄면 판도 발줄도 함께
     따라간다 — 예전에는 판만 줄고 발줄은 36px 을 그대로 써서 '전체' 버튼이
     값 열보다 8px 왼쪽에 섰다(2026-08-28 실측, 641px 미만 전 구간).
     홈의 판(.tabs·.mvwrap·.hi-card·.card.idx·.card.panel)은 2026-08-31 부터
     이 값을 읽지 않는다 — 좌우 0 으로 두어 목록이 제목 줄에 선다. */
  --panel-pad: 20px;
  /* 고정된 메뉴줄의 높이. sticky 로 붙는 것들(표 머리글 등)이 이만큼 내려와야
     메뉴 뒤로 숨지 않는다. 실측값이라 메뉴 글꼴·여백을 바꾸면 같이 손봐야 한다. */
  /* 메뉴줄이 화면에서 차지하는 **전체 높이**(아래 1px 테두리 포함).
     이 값을 쓰는 쪽(#list 의 scroll-margin-top)이 알고 싶은 것은 "얼마나 가리나"
     이므로 테두리까지 포함해야 한다. .inner 는 여기서 테두리만 뺀 값을
     min-height 로 쓴다 — 선언과 실제가 따로 놀지 않게 한쪽에서만 정한다.
     예전에는 눈대중(52·56px)이라 실제(57·60px)와 4~5px 어긋났다. */
  --head-h: 59px;
  --bg: #e9eef9;   /* 옅은 하늘색 — 카드(흰색)와 대비가 생기도록 한 톤 진하게 */
  --surface: #fff;
  --surface-alt: #f9fafc;
  --surface-tint: #f2f4f6;
  /* 섹션 사이 간격. 좌우 쌍(.sect-2up)도 이 값을 쓴다 — 한 곳만 바꾸면 페이지
     전체 리듬이 함께 움직인다. 좁은 화면은 아래 분기에서 한 단계 줄인다. */
  --sect-gap: 32px;

  /* ---- 글자 농도 네 단계 (사이트 전역 규칙) ----
     축은 '기능이 있는가' 가 아니라 **'먼저 읽어야 하는가'** 다. 조작 가능성은
     모양과 반응(채움·테두리·커서·hover)이 말한다 — 색에 둘을 겹쳐 지우면 한 축이
     두 가지를 뜻하게 되고, 그때부터 화면이 거짓말을 한다.

       #111318   18.6:1   제목 (h1·h2)
       --text    15.3:1   읽는 값 — 가격·종목명·표의 수치
       --text-2   8.7:1   보조 설명, 링크 글자
       --text-3   4.7:1   라벨. **읽는 글이 설 수 있는 가장 옅은 단계**
       --text-4   3.0:1   읽지 않아도 되는 것 — 기준일 도장·각주·저작권

     --text-4 는 본문 기준(4.5:1) 아래다. 사람이 읽어야 하는 글은 여기 두지 않는다 —
     한때 푸터·유의문·기준일 설명이 여기 있었다. */
  --text: #232433;
  --text-2: #494b55;
  --text-3: #71747c;
  --text-4: #93959c;

  --border: #d4d8e2;
  --border-soft: #e6eaf1;

  --accent: #006af9;
  --accent-soft: #e6edff;
  /* 그라데이션의 아래쪽 끝. accent 에서 뽑아 두면 파랑을 바꿀 때 함께 따라온다.
     위쪽 끝은 accent 그대로다 — 밝은 쪽을 더 밝히면 흰 바탕에서 대비가 떨어진다. */
  --accent-deep: color-mix(in srgb, #000 22%, #006af9);

  --up: #f14e4e;    /* 상승 */
  --down: #336aff;  /* 하락 */
  --flat: #71747c;

  /* NAV 선. 등락색(빨강·파랑)과 겹치지 않아야 '값의 방향' 으로 오독되지 않는다.
     차분한 녹색으로 둔다 — 채도가 높으면 주인공인 종가선을 이긴다. */
  --nav: #1a9b6c;
  --flow: #ef7d15;    /* 누적 순유입 곡선. 등락(빨강/파랑)과 겹치지 않는 색 */

  /* 같은 분류 막대에서 '순자산' 축이 쓰는 녹색. 축이 총보수(파랑)와 순자산(녹색)으로
     갈리면 알약을 갈아 끼운 것을 색만으로 알아챈다 — 길이만 바뀌면 무엇이 바뀌었는지
     모른 채 숫자를 다시 읽어야 한다.
     파란 짝(#9db8e0 보통 · --accent 주인공)과 **명도 관계를 그대로 옮겼다**. 색상은
     --nav 의 158°, 채도는 파란 짝 그대로(52% · 100%), 명도만 상대휘도가 파랑과
     같아지는 자리로 내렸다 — 녹색은 같은 HSL 명도에서 파랑보다 훨씬 밝게 보여
     명도를 그대로 두면 막대가 트랙에 묻힌다(대비 1.84 → 1.37 로 떨어졌다).
     실측 상대휘도: 보통 0.468(파랑 0.468) · 주인공 0.174(파랑 0.172).
     대비비도 따라온다 — 보통:트랙 1.84(파랑 1.84) · 주인공:트랙 4.25(파랑 4.30) ·
     보통:주인공 2.31(파랑 2.34). */
  --bar-aum: #57caa0;
  --bar-aum-me: #008554;

  /* 같은 막대에서 '총보수' 축이 쓰는 버건디. 이 축만 파랑이었는데, 파랑은 이 사이트
     에서 링크(--accent)와 하락(--down)이 이미 쓰는 색이라 '보수' 라는 뜻을 실어
     나르지 못했다. 보수는 내가 내는 돈이니 붉은 쪽으로 옮긴다.
     짝 짓는 방식은 녹색과 같다 — 색상(353°)만 갈고 휘도를 앞의 두 짝에 맞췄다.
     실측 상대휘도: 보통 0.466(파랑·녹색 0.468) · 주인공 0.110.
     대비비: 보통:트랙 1.84(파랑·녹색과 같다) · 주인공:트랙 5.96 · 보통:주인공 3.23.
     주인공이 다른 축(4.25~4.30)보다 진한데, 버건디가 본래 어두운 색이라 그렇다 —
     대비가 커지는 쪽이라 그대로 둔다.
     상승색 --up(#f14e4e)과 헷갈릴 여지는 휘도가 갈라 준다(0.110 대 0.312). */
  --bar-fee: #e3a6ad;
  --bar-fee-me: #b71c1c;

  /* 주의 표시용. --up(빨강)·--down(파랑)은 등락을 뜻하므로 여기 쓰면 '올랐다' 로
     읽힌다. 등락과 겹치지 않는 호박색을 따로 둔다. */
  --warn-soft: #fdf0dd;
  --warn-text: #96590f;
  /* 연금 배지 색. **한 축을 색으로 말한다** — 연금계좌에 담을 수 있는가, 한도가
     있는가. 초록은 담을 수 있다는 뜻이고, 노랑은 담을 수 있으나 한도가 있다는
     뜻이며, 100%(안전자산)는 한도가 없으므로 더 진한 초록이다.
     글자는 셋 다 바탕과 4.5:1 을 넘긴다(실측 4.75 · 6.41 · 4.79). 예전에 쓰던
     파랑(#e6edff/#006af9)은 4.05 로 그 선 아래였다.
     색만으로 뜻을 지지 않는다 — 알약 안에 '개인'·'70%'·'100%' 가 늘 적힌다. */
  /* 머리 그림의 최고·최저 점. 선 색(--up/--down)과 일부러 다르다 — 선은 '이 기간에
     올랐나' 를 말하고 이 둘은 기간의 양 끝값이라 뜻이 다르다. 같은 색이면 선의
     일부로 보인다. 최저는 파랑(--down)과 같은 계열이라 값이 낮다는 뜻과 어긋나지 않는다. */
  --spark-hi: #00a86b;
  --spark-lo: #2f6fe4;
  /* 장중 1분봉 선. **오르내림으로 색을 가르지 않는다** — 그 그림에는 전일 종가
     가로선이 있어 선이 그 위인지 아래인지로 이미 읽힌다. 색까지 같은 말을 하면
     색은 정보가 아니라 장식이 된다. 장후 일봉 그림에는 기준선이 없어 그쪽은
     지금대로 --up/--down 이다.
     그래서 이 그림의 최고점은 --up(빨강)이 맡는다. 녹색이면 선의 일부로 보인다. */
  --spark-live: #00a86b;
  --pen-p-soft: #e3f6ec;   /* 개인연금(연금저축) */
  --pen-p-text: #0f7a52;
  /* 퇴직연금 100% — 한도 없음. **70% 와 같은 노랑이다.** 초록이었는데, 그러면 색상이
     '어느 연금인가'(개인=초록·퇴직=노랑)와 '한도가 있는가'를 동시에 말해 축이 둘 섞였다.
     퇴직 100% 가 개인연금과 같은 초록이라 같은 것으로 읽혔다.

     이제 색상은 어느 연금인지만 말하고, 한도는 **채도·밝기**로만 갈린다.
     70% 는 옅게(S 91 · L 91), 100% 는 짙게(S 100 · L 85) — 색상 차는 0.3도다.
     짙은 쪽이 더 단단해 보이므로 '한도 없음' 이 안정감을 갖는다.
     대비는 오히려 올라간다(4.79 → 6.03:1). */
  --pen-f-soft: #ffedb2;
  --pen-f-text: #74530d;
  --pen-r-soft: #fdf3d3;   /* 퇴직연금 70% — 한도 있음 */
  --pen-r-text: #8a6516;
  --lev-soft: #ffeadb;     /* 레버리지·인버스 — 연금 불가. 노랑과 21° 벌린 주황 */
  --lev-text: #9a4a06;
  /* 액티브 — 운용 방식. **레몬 쪽 노랑이다**(2026-09-05, 파랑에서 옮겨 왔다).
     파랑(--accent)은 AI 표시 전용으로 예약됐다.

     이 배지는 이름 칸 하나에 `개인 퇴직 액티브` 로 나란히 서므로, 그 자리의 노랑·주황
     셋과 모두 갈려야 한다. 그런데 그 언저리는 이미 차 있다 —
     퇴직 70% H45.7 · 퇴직 100% H46.0 · 레버리지 H25.0(위 주석의 "노랑과 21° 벌린").
     배경끼리의 명도 대비는 셋 다 1.00~1.05 라, 이 무리는 **오직 색상각으로만** 갈린다.
     그러니 새 노랑이 설 수 있는 자리는 21° 규약(레버리지가 노랑에서 물러난 그 각)을
     양쪽으로 지키는 곳뿐이다. 25 아래는 빨강(--up·거래정지)이 있고, 25~46 사이는
     기껏 10° 씩이라 못 들어간다. 남는 것은 46 **위**다.

     그래서 H67.5 다 — 퇴직에서 21.5°, 레버리지에서 42.5°, 개인연금(H148.4)에서
     80.9° 다. 46 의 금빛보다 시원한 레몬이라 옆에 붙어도 갈린다(3배 확대 실측).
     대비 4.75:1 로 개인연금과 같은 값이고 이 무리의 4.5 선 위다.

     **--warn(H35.6)을 다시 쓰지 않는다.** 재 봤더니 퇴직에서 10.1° · 레버리지에서
     10.6° 로 딱 가운데라, 한 칸에 `퇴직 액티브 인버스` 가 서면 셋이 한 덩어리로
     뭉친다(스크린샷 확인). 레버리지가 예전에 --warn 을 떠난 이유와 같은 이유다. */
  /* 월배당 — 남은 색은 보라뿐이다. 초록(개인)·노랑(퇴직)·주황(레버리지)·
     연두(액티브)가 이미 서 있고, **빨강 계열은 이 사이트에서 '상승' 이며
     파랑은 AI 전용**이라 배지에 쓸 수 없다. */
  --div-m-soft: #efe6fb;
  --div-m-text: #5b3a8e;
  --act-soft: #f1fab2;
  --act-text: #65730d;

  --radius: 10px;
  --gap: 16px;
  --maxw: 1120px;

  /* ---- 접기 손잡이 삼각형과 글자 사이 (2026-09-13) ----
     지시 — "화살표가 텍스트하고 여백이 심함 바싹붙이는걸 기본으로". '기본으로'
     라서 값이 한 곳이다. 손잡이가 늘어도 이 토큰을 물려받으면 자리마다 갈라지지
     않는다(.serieswrap 은 margin 5px, .yearfold 는 flex gap 7px 으로 각각 벌리고
     있어 실제로 갈라져 있었다 — 눈에 보이는 간격이 7px 대 9px 이었다).

     **눈에 보이는 간격은 이 값보다 크다.** 이건 상자 사이이고, 그 사이에 글꼴이
     주는 여백(side bearing)이 양쪽에서 더 들어간다 — 그래서 값을 고르기 전에
     잉크를 직접 재야 한다(아래 --fold-bearing 주석). 상자 1px 일 때 스크린샷
     픽셀로 잰 잉크 사이는 4.0~5.0px 이다(글자 첫 자에 따라 갈린다: '기' 5.0 ·
     '구' 4.0 · 연도 4.25). 전에는 8.0~10.25px 이었다. */
  --fold-gap: 3px;
  /* 29px 짜리 글리프의 **오른쪽 side bearing 실측 2px.** 삼각형은 17px 짜리 글자
     상자(advance) 안에 11.25px 로 그려지고, 남은 5px 이 잉크 좌우에 붙어 나온다
     (왼쪽 3 · 오른쪽 2). getBoundingClientRect 로는 잡히지 않는다 — canvas
     measureText 의 width(17) - actualBoundingBoxRight(15) 로 재야 나온다.
     여백이 실제보다 크게 보인 까닭의 절반이 이것이다(나머지 절반은 글자 쪽
     bearing 이다). 그래서 margin 은 --fold-gap 에서 이 값을 뺀 만큼만 준다 —
     지금 계산으로 margin-right 는 1px 이다. */
  --fold-bearing: 2px;

  --font: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
    "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
}

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

/* **화면 바깥은 흰색이다.** 아이폰 가로보기에서 노치 쪽 좌우 띠가 하늘색으로
   보였다(사용자 실측). 뷰포트 메타에 viewport-fit 이 없어 페이지가 안전영역
   안에만 놓이고, 그 바깥은 브라우저가 **문서 배경색**으로 칠하는데 그 색이
   body 의 --bg(#e9eef9) 였다.

   html 에 제 배경을 주면 캔버스로 올라가는 색이 이쪽이 된다 — body 의 --bg 는
   그대로라 화면 안(옅은 띠·카드 대비)은 하나도 바뀌지 않는다. 바뀌는 것은
   **레이아웃 밖**뿐이다: 노치 좌우 띠, 그리고 위아래로 당겼을 때 튀어나오는 자리.
   둘 다 맞닿는 것이 흰색(머리줄·푸터)이라 흰색이 맞다.

   viewport-fit=cover 로 가는 길도 있지만 그러면 내용이 노치 밑으로 들어가
   좌우 env(safe-area-inset) 여백을 곳곳에 대야 한다 — 지금 필요한 것은
   띠 색 하나다. */
html { background: var(--surface); }

/* 페이지는 절대 가로로 스크롤되지 않는다(손으로 좌우로 끌어도 움직이지 않음).
   표처럼 넓은 것은 자기 컨테이너 안에서만 스크롤한다(.table-scroll).

   hidden 이 아니라 clip 을 쓴다. hidden 은 스크롤 컨테이너를 새로 만들어
   내부의 position:sticky(표 헤더)를 깨뜨린다. clip 은 잘라내기만 한다.
   clip 을 모르는 구형 브라우저는 앞줄의 hidden 으로 떨어진다.

   안전망이지 원인 해결이 아니다 — 가로 넘침이 보이면 이걸 믿지 말고
   무엇이 삐져나오는지 찾을 것. */
html, body {
  overflow-x: hidden;
  overflow-x: clip;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.6;
  word-break: keep-all;
  overflow-wrap: anywhere;
  font-feature-settings: "tnum" 1;   /* 숫자 폭 고정 — 자릿수가 세로로 맞는다 */
}

/* 그리드·플렉스 자식이 내용보다 작아질 수 있게 한다.
   기본값 auto 는 "내용보다 작아질 수 없음"이라 긴 종목명이 레이아웃을 밀어낸다. */
*, *::before, *::after { min-width: 0; }

/* **링크는 주변 글자색을 그대로 쓴다(검정).** 강조색과 밑줄은 올렸을 때만이다.
   예전에는 기본이 강조색이라 덮어쓴 자리만 검정이었고, 새 목록을 만들 때마다
   덮어쓰기를 빠뜨려 그 화면만 파래졌다(/compare 의 추종 지수별 70개가 그랬다).
   기본을 inherit 로 두면 빠뜨릴 것이 없어진다 — 예외를 두려면 그때 명시한다. */
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline;  text-decoration-color: var(--text);}

.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 14px 56px;
}

/* ---------- 헤더 / 푸터 ---------- */

/* 메뉴줄은 스크롤해도 남는다. 종목 페이지는 표가 길어서, 아래까지 내려간 사람이
   다른 갈래로 가려면 맨 위로 되돌아가야 했다.

   **검색창은 이 안에 없다**(base.html 에서 헤더 밖으로 뺐다). sticky 는 부모 안에서만
   붙으므로 검색창이 같이 있으면 헤더 전체를 고정하게 되는데, 실측하면 메뉴줄만
   51~55px(화면의 6%)인 반면 헤더 전체는 127~150px(15~17%) 다. 모바일에서 본문이
   그만큼 밀린다.

   z-index 는 자동완성 목록(.suggest)보다 낮아야 한다 — 검색 결과가 메뉴 뒤로
   숨으면 고르지 못한다. */
.site-head {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--surface);
  border-bottom: 1px solid var(--border-soft);
}
.site-head .inner {
  max-width: var(--maxw);
  margin: 0 auto;
  /* 세로 여백은 최소만 두고 높이는 min-height 가 정한다. 그래야 모바일에서 글꼴이
     커져도(브랜드 17→18px, 메뉴 13.5→14.5px) 줄 높이가 뛰지 않는다 —
     예전에는 640px 경계에서 57→60px 로 3px 튀었다. */
  padding: 10px 14px;
  min-height: calc(var(--head-h) - 1px);   /* 테두리 1px 은 헤더가 따로 갖는다 */
  box-sizing: border-box;
  display: flex;
  align-items: baseline;
  /* 남는 세로 공간을 위아래로 나눠 줄을 가운데 세운다. flex-wrap:wrap 이라
     한 줄일 때도 align-content 가 먹는다. 없으면 내용이 위로 붙어 머리가 무겁다. */
  align-content: center;
  gap: 14px;
  flex-wrap: wrap;
}
.site-head .brand {
  font-weight: 700; font-size: 22px; color: var(--text); letter-spacing: -0.4px;
  white-space: nowrap;
}
/* 알약은 **인라인**이라 글자와 같은 줄 흐름에 얹힌다. flex 컨테이너로 만들면
   브랜드가 자기 baseline 을 잃어 헤더의 align-items:baseline 이 안 먹고,
   메뉴 글자와 아랫줄이 어긋난다.

   교체 요소(svg)의 기준선은 아래끝이다. vertical-align:baseline 이면 알약
   아래끝이 글자 베이스라인에 놓이고, 높이 16px 이 22px 글자의 대문자 높이
   (≈15.6px)와 거의 같으므로 **윗끝이 글자 꼭대기와 나란해진다.**
   크기가 고정이라 글꼴이 무엇이든 이 관계가 유지된다. */
.site-head .brand .beta {
  display: inline-block; vertical-align: baseline;
  height: 16px; width: 40px; margin-left: 7px;
}
.site-head nav { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
/* 헤더 글자 크기는 화면 폭과 무관하게 하나다. 예전에는 좁은 화면에서만 키웠는데,
   경계를 넘을 때 글자가 커졌다 작아졌다 했고 그 탓에 줄 높이까지 흔들렸다.
   큰 쪽(모바일 값)으로 맞춘다 — 데스크톱에서도 읽기 편한 크기다.
   세로 여백은 summary 와 같아야 한다. 한쪽에만 주면 'ETF' 와 '연금 ETF' 의
   누를 수 있는 높이가 달라진다. */
.site-head nav a { color: var(--text-3); font-size: 14.5px; padding: 4px 0; }

/* ---- ETF 메뉴 ----
   <details> 라 JS 없이 열린다. 링크는 접혀 있어도 HTML 안에 그대로 있어서
   크롤러가 여섯 페이지로 가는 길을 본다. */
.navmenu { position: relative; }
.navmenu > summary {
  list-style: none;              /* 기본 삼각형 제거 */
  cursor: pointer;
  color: var(--text-3);
  /* 옆의 '연금 ETF'(.site-head nav a)와 같은 값이어야 한다. 여기에만 모바일
     override 가 없어서, 좁은 화면에서 'ETF' 13.5px · '연금 ETF' 14.5px 로
     한 줄 안에서 크기가 달랐다. */
  font-size: 14.5px;
  padding: 4px 0;
}
.navmenu > summary::-webkit-details-marker { display: none; }
.navmenu > summary::after {
  content: "";
  display: inline-block;
  width: 5px; height: 5px;
  margin-left: 5px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}
.navmenu[open] > summary::after { transform: translateY(1px) rotate(-135deg); }
.navmenu[open] > summary { color: var(--accent); }
@media (hover: hover) and (pointer: fine) {
  .navmenu > summary:hover { text-decoration: underline; text-decoration-color: var(--text);}
}

.navmenu-panel {
  position: absolute;
  top: calc(100% + 8px);
  left: -10px;
  z-index: 40;
  min-width: 168px;
  display: flex;
  flex-direction: column;
  padding: 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 8px 22px rgba(20, 30, 60, .10);
}
.navmenu-panel a {
  padding: 7px 10px;
  border-radius: 6px;
  color: var(--text-2);
  font-size: 13.5px;
  white-space: nowrap;
}
@media (hover: hover) and (pointer: fine) {
  .navmenu-panel a:hover { background: var(--surface-alt); text-decoration: underline;  text-decoration-color: var(--text);}
}

/* ---- 좁은 화면: 세로 구분선이 사라진 자리를 가로선이 대신한다 ----
   900px 아래에서는 좌우 쌍(.sect-2up)이 세로로 풀린다. 그러면 가운데 세로
   구분선도 같이 사라지고, 섹션들이 여백만 두고 줄줄이 쌓여 어디서 하나가 끝나고
   다음이 시작하는지 보이지 않는다. 데이터 섹션이 여덟이라 특히 그렇다.

   총 간격은 여전히 --sect-gap 이 정한다. 선 위아래로 절반씩 나눠 가지므로
   변수를 바꾸면 이쪽도 함께 움직인다 — 선을 넣느라 간격 규칙이 갈라지지 않는다. */
@media (max-width: 899px) {
  .sect,
  .sect-2up { margin-bottom: calc(var(--sect-gap) / 2); }
  .sect:last-child,
  .sect-2up:last-child { margin-bottom: 0; }

  .b-white > .wrap > .sect,
  .b-white > .wrap > .sect-2up,
  .sect-2up > .sect + .sect {
    border-top: 1px solid var(--border-soft);
    padding-top: calc(var(--sect-gap) / 2);
  }
  /* **범위는 등락 상위부터 신규 상장까지다.** 그 위(시장 지수·테마)와 아래
     (개발자)는 성격이 다르다 — 시장 지수는 바로 위가 히어로라 선이 뜬금없고,
     테마는 히트맵 한 판이라 목록들과 같은 리듬으로 끊을 것이 아니며, 개발자는
     어두운 밴드여서 밝은 선이 튄다.
     첫 흰 밴드(시장 지수·테마)를 통째로 뺀다. 어두운 밴드는 선택자가 .b-white
     라 애초에 걸리지 않는다. */
  .b-tint + .b-white > .wrap > * {
    border-top: 0;
    padding-top: 0;
  }
}

@media (max-width: 640px) {
  /* 예전에는 여기서 제자리 펼침(position:static + width:100%)을 썼다. 절대배치가
     화면 밖으로 밀릴까 봐 택한 길인데, 실제로는 그 반대가 났다 — 열면 패널이 헤더
     안에서 폭을 차지해 nav 가 둘째 줄로 내려가고, 로고만 남은 첫 줄과 메뉴 일곱 개가
     통째로 페이지를 밀어냈다. 여는 순간 헤더가 다른 물건이 됐다.

     그래서 데스크탑과 같은 절대배치로 되돌린다 — 뜨는 패널은 헤더를 밀지 않는다.

     다만 왼쪽 기준(left:-10px)은 좁은 화면에서 넘친다. 'ETF' 글자가 로고 오른쪽에
     있어 패널이 x=152 에서 시작하는데 최소 폭이 168px 이라 320px 화면에서 오른쪽
     끝에 딱 닿는다(실측 152~320). 오른쪽 기준으로 바꿔 왼쪽으로 펼친다 — 옆의
     햄버거 패널(.allmenu-panel)이 쓰는 방식과 같다.

     좁은 화면은 손가락으로 누르는 곳이라 글자와 여백도 한 단계 키운다. */
  .navmenu-panel { left: auto; right: 0; }
  .navmenu-panel a { font-size: 15px; padding: 10px 12px; }
}

.site-foot {
  border-top: 1px solid var(--border-soft);
  background: var(--surface);
  color: var(--text-3);   /* 읽는 글이라 AA(4.5:1) 아래로 두지 않는다 */
  font-size: 12.5px;
}
.site-foot .inner { max-width: var(--maxw); margin: 0 auto; padding: 30px 14px 44px; }
.site-foot p { margin: 4px 0; }

/* 좁은 화면에서도 링크 묶음 둘은 **나란히** 둔다. 셋을 다 세로로 쌓으면
   '개발자·에이전트' 가 화면 한참 아래로 밀려 아무도 닿지 않는다. 목록이 짧아
   두 칸으로 나눠도 넉넉하다. 소개 글만 한 줄을 통째로 쓴다(문장이라 좁으면 못 읽는다).
   641px 이상에서는 아래 미디어쿼리가 세 칸으로 되돌린다. */
.foot-cols {
  display: grid;
  gap: 24px;
  grid-template-columns: 1fr 1fr;
}
.foot-brand { grid-column: 1 / -1; }
.foot-name { font-weight: 700; font-size: 15px; color: var(--text-2); margin-bottom: 6px; }
.foot-brand p { max-width: 44em; line-height: 1.7; }
.foot-asof { color: var(--text-4); }
/* 발행 주체·등록 자격. 본문보다 한 단계 낮추되 읽을 수는 있어야 한다 —
   검색엔진이 신호로 세려면 화면에 실제로 보여야 하기 때문이다. */
.foot-publisher { color: var(--text-4); font-size: 12px; line-height: 1.6; }

.foot-h {
  font-weight: 600;
  color: var(--text-3);
  font-size: 12.5px;
  margin-bottom: 8px;
}
.foot-col ul { list-style: none; margin: 0; padding: 0; }
.foot-col li { margin: 5px 0; }
.foot-col a { color: var(--text-3); }
.foot-col a:hover { text-decoration: underline; text-decoration-color: var(--text);}

.foot-legal {
  margin-top: 26px;
  padding-top: 18px;
  border-top: 1px solid var(--border-soft);
}
.disclaimer {
  color: var(--text-3);   /* 읽는 글이라 AA(4.5:1) 아래로 두지 않는다 */
  font-size: 12px;
  line-height: 1.75;
  max-width: 70em;
}
.foot-policy {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 16px;
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
}
.foot-policy a { color: var(--text-2); font-weight: 500; }
.foot-policy a:hover { text-decoration: underline; text-decoration-color: var(--text);}
.foot-policy .copy { color: var(--text-4); margin-left: auto; }

@media (min-width: 641px) {
  .foot-cols { grid-template-columns: 2fr 1fr 1fr; gap: 32px; }
  .foot-brand { grid-column: auto; }   /* 세 칸일 때는 소개 글도 제 칸만 쓴다 */
}

/* ---------- 빵부스러기 ---------- */

/* 검색줄 아래 빈 자리가 44px(밴드 30 + 여기 14)이나 됐다. 첫 글자가 화면 한참
   아래에서 시작해 페이지가 늦게 열리는 것처럼 보였다. 합쳐 18px 로 줄인다. */
.crumbs { font-size: 12.5px; color: var(--text-4); padding: 6px 0 0; }
/* 목록 쪽 장에서는 이 위여백을 지운다. 빵부스러기 위에는 밴드가 제 안여백을 이미
   갖고 있어(`.band.b-page` 12px · 좁은 화면 8px) 6px 을 더 얹으면 18/14px 이 된다 —
   목록은 머리부터 표까지를 최대한 붙이는 장이라 그 6px 이 그대로 낭비다.
   **목록만이다.** 상세(4,816장)에서는 이 줄이 큰 시세 판의 머리라 밴드 여백만으로는
   빵부스러기가 밴드 경계에 붙는다. 그래서 아래 머리를 보고 고른다 —
   `:has()` 는 이 파일이 이미 쓰는 선택자다(.metrics:has(…) · .card > h2:has(…)).
   모르는 옛 브라우저는 6px 을 그대로 쓴다: 깨지지 않고 예전과 같을 뿐이다. */
.crumbs:has(+ .price-head:not([data-etf-code])) { padding-top: 0; }
.crumbs a { color: var(--text-3); }
.crumbs span + span::before { content: "›"; margin: 0 6px; color: var(--border); }

/* ---------- 가격 헤더 ---------- */

/* 테두리를 두르지 않는다. 이 카드는 페이지의 **머리**라 아래 카드들과 나란한
   '열넷 중 하나' 가 아니다 — 선을 두르면 그 중 하나로 보인다. 흰 바탕과 여백만으로
   서고, 본문과의 경계는 바로 아래 알약 줄이 긋는다. */
.price-head {
  background: var(--surface);
  border: 0;
  border-radius: var(--radius);
  /* **왼쪽은 0 이다.** 판의 안여백을 왼쪽에도 주면 제목이 그 위 빵부스러기('홈 > …')
     보다 20px 안으로 들어가, 페이지 왼쪽선이 두 개가 된다(실측 1100px 에서
     빵부스러기 20 · h1 40). 홈은 2026-08-31 에 같은 이유로 판의 좌우를 0 으로
     바꿨고, 이건 나머지 페이지를 그 줄에 맞추는 것이다.
     **오른쪽도 같다.** 값이 오른끝에 붙는 표들이 판보다 20px 안에서 끝나 오른쪽에도
     줄이 둘 생겼다(실측 판 1080 · 표 1060). 판에 테두리가 없어(border: 0) 0 으로 둬도
     숫자가 모서리에 닿아 보이지 않는다. */
  /* **위는 8px, 아래는 16px 이다** (2026-09-07). 예전에는 margin-top 14 +
     padding-top 16 = 30px 이라, 같은 빵부스러기 아래인데 상세만 제목이 22px 더
     내려가 있었다 — /etf/ 목록은 이 자리가 8px 하나뿐이다. 위 여백은 margin
     하나로 잰다(바로 아래 `:not([data-etf-code])` 주석과 같은 이유: 판에 테두리도
     다른 배경도 없어 위 여백을 둘로 나눠 가질 이유가 없다).
     아래 16px 은 남긴다 — 이 판 다음은 알약 줄이라, 0 으로 두면 탭이 시세 판에
     달라붙어 한 덩어리로 읽힌다.
     **이 두 줄이 닿는 것은 상세뿐이다.** 목록 장은 아래 `:not([data-etf-code])`
     가 margin·padding 을 통째로 다시 잡아 여기에 걸리지 않는다. */
  padding: 0 0 16px;
  margin-top: 8px;
}
/* ---- 목록 쪽 머리의 위아래 여백 (2026-09-05) ----
   `.price-head` 는 목록 2,501장과 상세 4,816장이 함께 쓰는데, 두 판의 성격이 다르다.
   상세는 종목명·시세·배지·차트가 든 260px(1,280px 실측)짜리 큰 판이라 16px 안여백이
   그 덩어리에 맞다. 목록은 그 안에 h1 한 줄(33.8px)뿐이라, 같은 16px 이 제목 하나를
   위아래로 32px 씩 띄워 놓는다 — 빵부스러기↔h1 30px · h1↔카드 32px 로, 첫 화면에서
   표가 그만큼 밀린다.

   **가르는 표는 `data-etf-code` 다.** 상세와 그 부속 장(보수·구성종목·분배금)의
   머리에만 이 속성이 붙는다(시세 갱신 JS 가 쓰는 값이다). 목록·순위·운용사·분류·
   연금·안내는 전부 속성이 없다. `#list` 카드 유무로 가르면 순위·운용사 장이 빠지고,
   `:has(.ph-main)` 은 같은 것을 더 약한 표로 말하는 것이다.

   **padding-top 을 0 으로 두고 margin-top 하나로 잰다.** 판에 테두리도 다른 배경도
   없어(border: 0 · 배경이 흰 카드와 같은 --surface) 위 여백을 둘로 나눠 가질 이유가
   없다 — 나눠 두면 다음 사람이 어느 쪽을 고칠지 헷갈린다.
   아래는 6px 만 남긴다. 카드가 제 margin-top: 16px 을 갖고 있어 h1↔카드는 22px 이
   된다(0 으로 두면 16px 이고, 그건 위 8px 과의 균형이 깨진다).
   실측: 빵부스러기↔h1 30 → 8px · h1↔카드 32 → 22px · 판 높이 65.8 → 39.8px.
   8px 은 h1 이 빵부스러기에 붙어 보이지 않는 최소값이다 — 빵부스러기 상자 아래에
   글자 아랫부분 여유가 이미 3~4px 들어 있어, 눈에 보이는 사이는 12px 쯤 된다. */
.price-head:not([data-etf-code]) {
  margin-top: 8px;
  padding: 0;
}
/* ---- 2차 축소: 제목 아래 40px 을 16px 으로 (2026-09-05) ----
   1차(위)는 머리 자신만 조였는데, 그 **바로 아래에서 다시 40px 이 벌어져** 있었다.
   실측으로 그 40 은 셋이 겹친 값이다 — `.price-head` padding-bottom 6 · 첫 카드의
   margin-top 16 · 그 카드의 padding-top 18. 머리를 8px 으로 조여 놓고 아래에서
   40px 을 비우니, 줄인 티가 안 나고 제목만 공중에 뜬 꼴이 됐다.

   **여기서 카드는 눈에 보이지 않는다.** 배경이 흰 밴드와 같은 --surface 이고
   테두리도 없다(border: 0). 그러니 이 40px 은 '카드 사이의 간격' 이 아니라 그냥
   제목과 첫 조작 사이의 빈 자리다 — 셋으로 나눠 가질 이유가 없다.
   **한 숫자로 모은다**: 머리 padding 0 · 카드 margin 0 · 카드 padding-top 16px.
   **16px 을 고른 근거는 위여백과의 비다.** 이 h1 위는 8px(빵부스러기까지)이다.
   12px 도 재 봤고 깨지지 않았지만(실측 h1 아래 12px, 스크린샷 확인) 그러면 위 8 ·
   아래 12 로 위아래가 거의 같아져, 제목이 아래 알약줄을 **이끄는** 것이 아니라 두
   덩어리 사이에 떠 있는 것으로 읽힌다. 16 이면 아래가 위의 두 배라 제목과 알약줄이
   한 덩어리로 묶인다. 40 → 16 은 그 조건에서 갈 수 있는 가장 아래다.

   **`.card` 를 전역으로 건드리지 않는다.** 사이트 전 화면의 카드 간격이 따라 움직인다.
   머리 **바로 뒤** 첫 카드만 고른다 — 배포본 2,501장을 훑어보면 목록 쪽 머리의 다음
   형제는 `section.card` 1,469장 · `ul.subnav` 963장 · `section.card#list` 68장 ·
   `input.sr-only` 1장이고, **`.card.table-scroll` 은 0장**이라 padding: 0 인 표 카드가
   이 규칙에 걸릴 일이 없다. 상세는 속성으로 이미 빠지고, 다음 형제도 `.subnav` 라
   두 겹으로 안 걸린다. */
/* 제목 아래 여백은 8px 이다 (2026-09-07 지시). 예전 16px 은 판의 윗선이 경계로
   보인다는 전제였는데, 이 판은 **흰 바탕 위 흰 판**이라(카드 #fff · 밴드 .b-white
   #fff · 테두리 0 · 그림자 없음) 경계가 아니라 그냥 빈 띠로 읽힌다. 실측으로
   확인하고 줄였다 — /provider/ 를 먼저 0 으로 줄인 뒤 나머지도 같게 맞춘 것이다.
   판 자신의 안여백(.card padding 18px 0)을 위쪽만 이 값으로 덮는다. */
.price-head:not([data-etf-code]) + .card {
  margin-top: 0;
  padding-top: 8px;
}
.price-head h1 {
  margin: 0;
  font-size: 22px;
  line-height: 1.3;
  letter-spacing: -0.01em;
}
.price-head .code {
  color: var(--text-3);
  font-weight: 500;
  font-size: 15px;
  margin-left: 6px;
}
.price-head .tagline { margin: 4px 0 0; color: var(--text-3); font-size: 13.5px; }
/* h1 안의 기준일 도장 (2026-09-05). 표 제목에 있던 '2026.09.04 종가 기준' 이 제목
   옆으로 올라온다.
   **자리는 .code, 농도는 .asof 다.** 자리는 h1 옆 6px 으로 종목코드와 같고(그쪽이
   이미 h1 옆 보조 정보의 자리다), 색·크기는 `.price-head .asof`(--text-4 · 12.5px)를
   그대로 가져온다 — 상세 페이지에서 **같은 문장**을 그 값으로 찍고 있고, 그 규칙에
   '이 줄은 어디에 서든 같은 무게여야 한다' 고 적혀 있다. 같은 말을 자리만 옮겼다고
   15px --text-3(.code)로 진해지면 그 약속이 깨진다.
   --text-4 는 흰 바탕에서 2.99:1 이라 AA 아래다. 읽는 글(.asof-note)에는 쓰지 않는
   색이지만, 이 문장은 표 전체에 한 번 찍히는 날짜 도장이고 같은 값이 표 제목에도
   글로 남는다 — 읽어야 알 수 있는 유일한 자리가 아니다.
   **크기·굵기·자간을 반드시 적는다.** h1 안이라 안 적으면 26px·굵게·-0.01em 을
   물려받는다(.alt 가 같은 이유로 letter-spacing: 0 을 둔다).
   날짜는 중간에서 쪼개지면 안 되므로 nowrap 이다. */
/* 기준일 왼쪽의 물음표. 공용 도움말 매크로(.help)를 그대로 쓴다 — 탭으로 열리고
   본문이 처음부터 HTML 에 있어 크롤러도 읽는다.
   **h1 을 기준칸으로 세워야 한다.** `.help` 자신은 position:static 이라(의도된
   것이다 — 말풍선이 감싼 블록 폭을 그대로 쓰게 하려고) 말풍선은 위로 올라가
   가장 가까운 배치된 조상에 붙는다. 여기서는 그게 없어 페이지 한참 아래
   (실측 y=908, 화면 밖)에 열렸다. h1 을 기준으로 삼으면 제목 왼쪽 끝에서
   시작해 390px 에서도 넘치지 않는다(말풍선 폭 min(440, 100vw-32)). */
.price-head h1 { position: relative; }
.price-head h1 .head-asof .help { margin-right: 4px; }
/* 물음표가 날짜보다 1.1px 아래로 처진다(실측 390·1280 동일). `vertical-align:
   middle` 은 상자 한가운데를 **글자 x-높이의 절반**에 맞추는데, 18px 짜리
   동그라미를 13px 글자 옆에 세우면 그 기준점이 글자 한가운데보다 아래다.
   버튼만 1px 올린다. `.help` 를 건드리면 안 된다 — 그 요소가 position:static
   이라서 말풍선이 h1 을 기준칸으로 삼는다(바로 위 규칙). */
.price-head h1 .head-asof .help-btn { position: relative; top: -1px; }

/* 이 말풍선은 길다 — 사용법·공식·출처를 한 판에 담아 390px 에서 1,135px 이
   된다(실측). 여기 있던 높이 상한(`max-height: min(70vh, 560px)`)은 2026-09-15 에
   **모든 말풍선이 함께 쓰는 규칙**으로 올라갔다(`.help-body` 의 상한 주석). 긴 것이
   이것 하나가 아니었기 때문이다 — 전수로 재니 홈의 '자금 순유입이란'(885px)이 이보다
   더 길게 서는 자리도 있었다. 이 자리에만 따로 둘 이유가 없어졌다. */

.price-head h1 .head-asof {
  display: inline-block;
  /* **제목 한가운데에 선다** (2026-09-06 지시 "제목 ? 기준날짜 가운데 정렬").
     기본값(baseline)은 작은 글자를 큰 글자의 **밑선**에 맞춘다. 26px 제목 옆에
     12.5px 날짜를 그렇게 두면 눈에는 아래로 처져 보인다 — 실측으로 물음표와
     날짜가 제목 중심보다 4.6·4.5px 아래였다. middle 로 두면 +1.0·+0.8px 이다.
     **position 이나 transform 으로 더 당기지 않는다.** 둘 다 이 상자를
     기준칸으로 만들어, 말풍선이 h1 이 아니라 여기에 붙어 화면 밖으로 나간다
     (오늘 그 함정을 한 번 밟았다). 남은 1px 은 그 값을 치를 만하지 않다. */
  vertical-align: middle;
  margin-left: 6px;
  color: var(--text-4);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0;
  white-space: nowrap;
}


.quote { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 8px 0 0; }
/* 줄높이를 글자에 붙인다. 본문 기본값(1.6)이 그대로 걸려 38px 글자가 60.8px 줄을
   쓰고 있었다 — 위아래로 11px 씩, 가격 한 줄이 22px 을 헛되이 먹었다. */
.quote .last { font-size: 32px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.12; }
.quote .delta { font-size: 19px; font-weight: 600; }   /* 가격 옆에서 너무 작았다 — 15 → 17 → 19. 옆의 .last 38px 의 절반이다 */
/* 자리가 아니라 **요소**에 건다. `.quote .asof` 로 두었더니 기준일 줄을 배지 위로
   옮기는 순간 규칙이 통째로 떨어져 나가 12.5px 회색이 15.5px 검정이 됐다 — 옮긴 것은
   자리인데 모양까지 바뀌었다. 이 줄은 어디에 서든 같은 무게여야 한다. */
.price-head .asof {
  display: block;
  margin: 4px 0 0;
  color: var(--text-4);
  font-size: 12.5px;
}

/* 확정 종가와 장중 시세의 구분을 밝히는 안내. JS 없이도 읽혀야 하므로 본문 텍스트다. */
.asof-note {
  margin: 8px 0 0;
  color: var(--text-3);   /* 읽는 글이라 AA(4.5:1) 아래로 두지 않는다 */
  font-size: 12.5px;
  line-height: 1.6;
}

.up { color: var(--up); }
.down { color: var(--down); }
.flat { color: var(--flat); }

/* ---------- 지표 그리드 ---------- */

.metrics {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: grid;
  /* 선은 **바탕을 깔고 1px 씩 벌려** 그 틈으로 보이게 한다. box-shadow 로 칸마다
     긋는 방법으로 바꿨다가 되돌렸다 — 크롬에서는 멀쩡했지만 아이폰에서 선이
     사라져 보였다(사용자 확인). 1px 그림자는 서브픽셀에서 지워질 수 있고, 이
     틈 방식은 실제 레이아웃이라 그럴 일이 없다.
     빈 칸이 회색으로 남는 문제는 아래에서 **칸을 채워** 없앤다. */
  gap: 1px;
  grid-template-columns: repeat(2, 1fr);
  background: var(--border-soft);
  /* 카드가 이미 테두리를 갖고 있다. 표에 또 두르면 **박스 안에 박스**가 된다 —
     선이 두 겹으로 겹쳐 보이고 안쪽이 바깥쪽보다 작아 답답해진다. */
  border: 0;
  border-radius: 8px;
  overflow: hidden;
}
.metrics li { background: var(--surface); padding: 11px 13px; }
/* 빈 칸이 회색으로 칠해지는 일은 위에서 없앴지만, 칸 수 자체는 여전히 맞춘다 —
   지표가 3개인데 칸이 4개면 마지막이 빈 자리로 남아 표가 한쪽으로 쏠려 보인다.
   auto-fit 으로 바꿔 봤더니 이번엔 지표 8개인 상세 페이지가 4+4 가 아니라
   6+2 로 어긋났다 — 칸 수는 고정하되, 한 줄에 못 미치는 경우만 줄인다. */
.metrics:has(li:nth-child(2):last-child) { grid-template-columns: repeat(2, 1fr); }
.metrics:has(li:only-child) { grid-template-columns: 1fr; }
/* 3개면 3칸이다 (2026-09-21). 위 기본이 2열이라 셋은 2+1 로 서고, 선을 틈으로 그리는
   방식이라 둘째 줄의 빈 자리가 회색 판으로 남는다. 아래 641px·1025px 블록에는 같은
   규칙이 이미 있었는데 640px 아래(2열 구간)만 빠져 있었다. 운용사 장(/provider/<코드>)의
   머리 지표가 셋(순자산 합계 · 점유율 · 운용 종목)이라 폰에서 그 회색 칸이 드러났다.
   여기 한 번 적으면 모든 폭에 걸리고(넓은 폭의 .metrics 3·4열 기본보다 특이도가 높다)
   위 두 블록의 같은 줄은 남겨 둔다. 셋인 다른 장(/pension/ · /pension/irp)도 폰에서
   2+1 이 3칸 한 줄로 바뀐다. 그쪽도 회색 칸이 남던 자리라 같은 고침이다. */
.metrics:has(li:nth-child(3):last-child) { grid-template-columns: repeat(3, 1fr); }
.metrics .k { display: block; color: var(--text-3); font-size: 12px; }
.metrics .v { display: block; font-weight: 600; font-size: 15px; margin-top: 2px; }

/* ---------- 섹션 카드 ---------- */

/* **테두리를 두르지 않는다.** 카드는 흰 밴드(.b-white) 위에 흰색으로 서므로 선을
   두르면 그 선만 남아 상자가 층층이 겹쳐 보인다. 홈이 이미 이 길을 갔다
   (.card.idx / .card.panel 이 border: 0 이었다) — 사이트에서 카드는 한 모양이어야
   해서 나머지도 맞춘다. 카드끼리의 구분은 제목과 margin-top(16px)이 한다. */
.card {
  background: var(--surface);
  border: 0;
  border-radius: var(--radius);
  /* 좌우 0 — .price-head 와 같은 이유. 페이지의 모든 글이 같은 두 줄 사이에 든다. */
  padding: 18px 0;
  margin-top: 16px;
}
.card > h2,
/* /theme/ 의 「분류별 기간수익률」(2026-09-15). 카드 제목인데 알약·표와 한 상자로
   묶여 있어(`#theme-table`) `.card > h2` 가 한 단계 못 닿는다. 값을 베끼지 않고
   **이름만 더한다** — 카드 제목이 장마다 다른 크기로 서면 안 된다.
   아래 여백만 예외다(`#theme-table > h2` 규칙, 이 파일 표 단락). */
#theme-table > h2,
.yearfold > summary > h2 {
  margin: 0 0 4px;
  font-size: 15px;
  letter-spacing: -0.01em;
  display: flex;
  align-items: center;
  /* 제목과 물음표 사이 (2026-09-07). 7px 이었는데, 기준일 도장(.head-asof)이
     물음표를 안고 제목 옆에 서면서 그 안여백이 더해져 13px 이 됐다 — 한 화면에서
     ? 만 붙은 제목은 7px, 도장까지 붙은 제목은 13px 로 갈렸다. 도장 쪽 margin 을
     0 으로 빼고 간격은 여기 하나로 잰다. 카드 제목은 전부 같은 4px 이다. */
  gap: 4px;
}
/* ---- 카드 제목 옆의 기준일 도장 (2026-09-07) ----
   수익률·자금 순유입·구성종목 세 카드가 제목 **아래** `.note` 한 줄로 말하던
   '2026.09.04 기준' 을 제목 **옆**으로 올린다. `/etf/` 목록의 h1 이 이미 쓰는
   꼴이라(`.price-head h1 .head-asof`) 그 규칙을 h2 로 옮긴 것이고, 값도 그대로
   가져온다 — 같은 말이 자리만 옮겼다고 무게가 달라지면 안 된다(--text-4 · 12.5px).
   **h2 를 기준칸으로 세우는 일은 하지 않아도 된다** — 위 `.sect-head, .card > h2,
   .ch { position: relative }` 가 이미 잡아 놓았다. 말풍선은 그 h2 에 붙는다. */
.card > h2 .head-asof {
  display: inline-block;
  vertical-align: middle;
  /* h1 쪽은 6px 인데 여기는 0 이다. h2 가 flex 라 위 gap 이 그 몫을 이미 낸다. */
  margin-left: 0;
  color: var(--text-4);
  font-size: 12.5px;
  font-weight: 500;
}
.card > h2 .head-asof .help { margin-right: 4px; }
/* 물음표가 날짜보다 1px 처져 보이는 것은 h1 쪽과 같은 일이다(`.price-head h1
   .head-asof .help-btn` 주석에 그 계산이 있다). 버튼만 올린다 — `.help` 는
   건드리지 않는다. 그 요소가 position: static 이라야 말풍선이 제목 칸을
   기준으로 뜬다. */
.card > h2 .head-asof .help-btn { position: relative; top: -1px; }

/* ---- 카드 안 소제목(h3.subhead)의 도장 (2026-09-13) ----
   「최근 분배금」에 물음표가 붙었다(지시 "최근 분배금 옆에도 ?가 있어야 하고").
   도장이 h1·h2 밖으로 나가는 첫 자리라 두 가지를 새로 대야 한다 —

   1) **기준칸.** `.help-body` 는 절대배치고 `.help` 자신은 position: static 이다
      (의도된 것이다 — 말풍선이 감싼 블록 폭을 그대로 쓰게 하려고). h3 를 세워 두지
      않으면 기준이 위로 올라가 `.card:has(> h2 .help)` 가 세운 **카드**에 붙는다.
      그러면 말풍선이 카드 맨 위, 즉 h2 밑에 열려 누른 자리에서 한참 떨어진다.
      h1 에서 겪은 것과 같은 함정이다(`.price-head h1 { position: relative }` 주석).
   2) **판 폭.** 폭을 카드에 묶는 규칙은 `.card:has(> h2 .help) > h2 .help-body` 라
      h3 를 집지 않는다. 그대로 두면 공용값(min(440px, 100vw - 32px))이 걸려 카드
      안여백만큼 오른쪽으로 넘친다 — h2 에서 2026-09-07 에 실측한 일이다.

   `.card > h2` 와 달리 h3.subhead 는 flex 가 아니라 그냥 블록 소제목이다(1287행).
   그래서 제목과 도장 사이는 h2 의 gap 이 아니라 margin-left 로 낸다 — h1 쪽과
   같은 6px 이다. */
.card > h3.subhead:has(.help) { position: relative; }
.card > h3.subhead .head-asof {
  display: inline-block;
  vertical-align: middle;
  margin-left: 6px;
  color: var(--text-4);
  /* h2(15px) 옆에서는 12.5px 이다. 소제목은 14px 이라 같은 값을 쓰면 도장이 제목과
     거의 같은 크기로 보인다 — 제목과의 차이를 h2 쪽과 같게 두려면 12px 이다. */
  font-size: 12px;
  font-weight: 500;
}
.card > h3.subhead .head-asof .help { margin-right: 4px; }
/* 물음표가 날짜보다 1px 처지는 것은 h1·h2 와 같은 계산이다(위 주석 참조).
   버튼만 올린다 — `.help` 는 건드리지 않는다. */
.card > h3.subhead .head-asof .help-btn { position: relative; top: -1px; }
.card > h3.subhead .help-body { max-width: 100%; }

/* 제목 바로 아래 오는 표는 제목에 붙인다. 「주요 지표」 h2 와 표 사이 18px 은 제목이
   표를 이고 있는 것이 아니라 따로 떠 보이게 했다.
   **전역으로 0 을 주면 안 된다** — /etf/ 목록과 /directory/ 의 .metrics 는 .price-head 안
   `<p class="tagline">` 바로 아래에 서고, 보수·분배금·폐지 페이지는 h2 와 표 사이에
   `<p class="note">` 를 낀다. 거기서 0 이 되면 문단과 표가 달라붙는다.
   h2 의 **바로 다음 형제**일 때만 건다 — 지금 그 자리에 있는 것은 상세 페이지의
   「주요 지표」 하나뿐이다. */
.card > h2 + .metrics { margin-top: 0; }
/* 여백은 양쪽에 있다. 표의 18px 만 지우면 h2 의 margin-bottom 4px 이 남아 실측 4px 이
   벌어졌다 — 둘 다 지워야 0 이다. 이 h2 는 표를 데리고 있을 때만 붙는다. */
.card > h2:has(+ .metrics) { margin-bottom: 0; }

/* `.serieswrap > .note` 를 함께 건다. 접힌 표 안에도 설명 한 줄이 서는 자리가
   생겼는데(상세의 편입·편출), 그건 `.card` 의 직계 자식이 아니라 위 규칙을 못 받아
   혼자 본문 크기·본문 색으로 커져 있었다. 접힘 안이라고 설명 줄의 성격이 달라지는
   것은 아니다 — 같은 회색 12.5px 이어야 카드 안에서 한 종류로 읽힌다. */
.card > .note,
.serieswrap > .note,
.yearfold > summary > .note { margin: 0 0 12px; color: var(--text-4); font-size: 12.5px; }
.card > p { color: var(--text-2); }

/* ---------- 표 ---------- */

/* 컬럼을 숨기지 않는다 — 숨기면 크롤러가 읽을 텍스트가 줄어든다.
   모바일에서는 표만 가로 스크롤하고 페이지 본문은 절대 가로 스크롤되지 않게 한다. */
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0 -20px;
  padding: 0 20px;
  /* **기준칸을 반드시 세운다.** 표 안의 `.sr-only` 는 position:absolute 인데,
     그 안에 배치된 조상이 없으면 기준이 문서 전체가 되어 `overflow-x: auto` 의
     잘라내기를 빠져나간다. 그러면 가로로 굴러야 할 표 대신 **페이지가 통째로
     끌린다** — 머리띠·검색줄이 화면 밖으로 밀리고 오른쪽에 흰 여백이 생긴다.
     실측(/stock/, 390px): 문서 폭 1,043px → 이 한 줄로 390px.
     /etf/ 에서 안 드러난 것은 그 장의 sr-only 가 고정된 첫 칸(왼쪽 190px) 안에만
     있어 화면 밖으로 나갈 일이 없었기 때문이다. 이름 칸이 여럿인 표가 생기면서
     (대표 ETF 셋의 배지 sr-only) 처음 드러났다. */
  position: relative;
}

/* 카드 자신이 스크롤 컨테이너인 경우(홈 순자산 표). 위의 음수 마진은 "카드
   안쪽 여백을 상쇄한다"는 뜻인데, 카드 자신에 걸리면 카드가 좌우로 20px 씩
   삐져나가 페이지에 가로 스크롤을 만든다 — 모바일에서 화면이 좌우로 끌리던 원인. */
.card.table-scroll { margin: 16px 0 0; padding: 0; }

/* ---- 표를 이고 있는 줄과 표 사이 (2026-09-13) ----
   상세 장의 화면용 표 이름(.tablecap) 여덟 줄을 걷었다 — 칸 제목이 이미 같은 말을
   하고 있었다(사용자: "제목이 있어서 표제목은 중복임"). 그 줄이 자리와 함께 잡고
   있던 여백까지 사라져 제목·손잡이가 표에 바로 붙었다(실측 h2 4px · summary 6px).
   **한 곳에서 한 번에 준다** — 칸마다 다른 값을 주면 같은 자리가 여덟 갈래로 갈린다.
   설명 문단(.note)이 앞에 서는 칸은 그 문단의 12px 이 이미 벌리고 있어 대상이 아니다. */
.card > h2 + .table-scroll,
.serieswrap > summary + .table-scroll { margin-top: 8px; }
/* /theme/ 의 「분류별 기간수익률」은 위 선택자가 안 닿는다 — 제목과 표 사이에 자산군
   알약 줄(.listfilter)과 표 이름 줄(.tablecap)이 끼어 `+` 가 건너뛰지 못한다.
   **값은 위와 같은 8px 이다**(새 치수를 만들지 않는다). 다만 거는 자리가 뒤가 아니라
   앞이라, 제목의 아래 여백으로 준다 — 알약이 있는 장도 없는 장도(asset_facets 가 빌
   때는 .tablecap 이 바로 온다) 둘 다 margin-top 0 이라 결과가 같은 8px 로 떨어진다.
   위 `.card > h2` 가 준 4px 을 덮는 것이고, 겹치는 값은 이 한 줄뿐이다. */
#theme-table > h2 { margin-bottom: 8px; }

table { border-collapse: collapse; width: 100%; font-size: 13.5px; }

/* 칸 수가 적은 표(/theme/ 전체 테마)의 폭 배분.

   처음에는 남는 폭을 **전부 첫 칸이** 먹었다(1280px 에서 테마명 721px = 표의 69%).
   가장 긴 테마명이 7자인데 그랬다. 그래서 표에 폭 상한을 걸어 봤더니 이번엔 표가
   카드 절반만 채우고 오른쪽이 휑해졌다 — 문제를 옆으로 옮긴 것뿐이었다.

   답은 좁히는 게 아니라 **나눠 갖는 것**이다. colgroup 을 백분율로 주고
   table-layout:fixed 로 그 비율을 확정한다. 폭이 얼마든 다섯 칸이 같은 비율로
   늘고 줄어서, 넓은 화면에서는 표가 카드를 그대로 채우고 좁은 화면에서는
   어느 칸도 혼자 굶지 않는다.

   em 폭 + fixed 조합이었다면 좁은 화면에서 숫자 칸이 자리를 다 차지하고 이름만
   잘렸을 것이다. 백분율이라 그 일이 없다. */
/* **선택자를 .fixed 같은 범용 이름으로 두면 안 된다.** 2026-08-10 에 그렇게 걸었다가
   같은 이름이 붙어 있던 홈 순자산 표까지 끌려갔다 — 그쪽은 px 고정폭 칸 + 이름칸 auto
   라 table-layout:fixed 아래에서 **이름칸이 0px 로 접혔고** 모바일 홈에서 종목명이
   통째로 사라졌다. 그 표는 이후 목록으로 바뀌어 지금은 없지만 교훈은 남는다:
   CSS 없이 붙어 있던 이름에 규칙을 거는 순간 남의 화면이 함께 바뀐다. */
table.theme-tbl { table-layout: fixed; }

/* 비율만으로는 부족하다. '-29.96%' 는 여백까지 72px 가 필요한데 비율만 주면 좁은
   화면에서 그 아래로 눌린다. 하한을 줘서 칸이 굶지 않게 하고, 넘치는 만큼은
   .table-scroll 이 자기 안에서 가로로 굴린다(페이지 본문은 안 흔들린다).

   구간이 셋(일·주·월)에서 일곱(+3개월·6개월·연초·1년)으로 늘어 칸이 아홉이다.
   폭은 실측으로 잡았다(모바일 390px, 표 글자 13.5px):
     등락 칸은 '+53.68%' 에 63px 가 필요한데 46em 에서는 60px 라 24칸이 넘쳤다.
     테마 칸은 '종합주식' 에 155px 가 필요한데 149px 라 짧은 이름까지 말줄임됐다.
   49em(=661px)이면 등락 64px · 테마 159px 로 둘 다 들어간다.
   좁은 화면에서만이 아니라 항상 건다 — 데스크톱 카드(약 1,078px)에서는 이 하한이
   걸리지 않으므로 해가 없고, 태블릿 폭에서 칸이 눌리는 것을 함께 막는다.
   칸을 숨겨 자리를 만들지 않는다(기획서: 숨기면 봇이 읽을 텍스트가 줄어든다). */
table.theme-tbl { min-width: 49em; }

/* 칸을 밀어내는 대신 말줄임한다. 전체 이름은 title 속성에 남는다. */
.clip { max-width: 16em; overflow: hidden; text-overflow: ellipsis; }
/* 표 제목. 보이는 제목은 표 **밖**(.tablecap)에 두고 여기 caption 은 sr-only 다.
   caption 을 CSS 로 붙박으려 display 를 바꿨더니 표 상자에서 빠져나와 머리행 아래로
   들어갔다 — table-caption 이 아니면 표 위라는 자리를 잃는다. 자리를 옮기는 일은
   CSS 가 아니라 마크업이 해야 했다. */
caption { text-align: left; color: var(--text-3); font-size: 12.5px; padding-bottom: 8px; }

/* 표 밖 제목. .table-scroll 형제라 가로 스크롤을 따라가지 않는다. */
.tablecap { margin: 0 0 8px; color: var(--text-3); font-size: 12.5px; line-height: 1.6; }
/* 목록 장에서는 4px 이다. 이 줄은 바로 아래 표가 몇 줄인지 세는 말이라 표에 붙을수록
   한 벌로 읽힌다. **`#list` 로 좁힌다** — `.tablecap` 은 7,296장이 쓰고 그중 상세도
   있는데, `#list` 는 목록 1,101장에만 있고 상세에는 없다. */
#list .tablecap { margin-bottom: 4px; }
/* 정렬 기준을 인 표 이름도 같은 4px 이다 (2026-09-13). 「종목을 담은 ETF」
   (/stock/<코드>/etf)가 이 꼴로 들어왔는데 그 카드에는 `#list` 가 없어 혼자 8px
   이었다 — 같은 모양의 줄이 장마다 다른 자리에 서면 안 된다. **더하는 것이지
   위 규칙을 바꾸는 것이 아니다**: `#list` 인데 `.cap-sort` 가 없는 장이 있어
   선택자를 갈아 끼우면 그쪽이 8px 으로 벌어진다. 값은 하나(4px)뿐이라 두 규칙이
   겹쳐도 결과가 갈리지 않는다. */
.tablecap:has(.cap-sort) { margin-bottom: 4px; }

/* ---- 떠 있는 표 머리글 (2026-09-06) ----
   `.table-scroll` 이 overflow-x:auto 라 그 상자가 스크롤 기준이 되고, 세로로는
   굴러가지 않아 `thead th { position: sticky }` 가 붙을 데가 없다(실측 계산값
   `overflow: auto auto`). 그래서 진짜 머리글은 두고 복제한 띠를 띄운다 —
   만드는 일은 stickyhead.js 가 하고 여기서는 모양만 준다.

   **누를 수 없다.** aria-hidden 안에 눌리는 것을 두면 보조기기 사용자만 못 누르는
   조작이 생긴다. 정렬은 진짜 머리글이 계속 맡는다.

   z-index 는 메뉴줄(20)보다 낮다 — 띠가 메뉴를 덮으면 안 된다. */
.fixhead {
  position: fixed;
  z-index: 15;
  overflow: hidden;
  pointer-events: none;
  background: var(--surface-alt);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 2px 6px rgba(20, 30, 60, .06);
}
.fixhead-slide { overflow: hidden; }
/* 복제본은 tbody 가 없다. 폭은 스크립트가 진짜 표에서 재어 박는다. */
.fixhead table { table-layout: fixed; }
.fixhead th { border-bottom: 0; }
/* **고정 칸은 띠에서도 고정이다.** `.table-scroll th.pin` 규칙은 그 조상이 있어야
   걸리는데 복제본은 `.fixhead` 안에 있다 — 안 걸리면 표를 옆으로 밀 때 진짜
   첫 칸은 왼쪽에 남고 띠의 첫 칸만 같이 밀려 나간다(실측 가로 300 에서 -286).
   왼쪽 덮개(::before)까지 같이 옮긴다. 안 그러면 밀어 놓은 자리에서 그 밑으로
   지나가는 칸이 고정 칸 왼쪽 모서리로 비친다 — `.table-scroll` 이 같은 이유로
   두고 있는 장치다. */
.fixhead th.pin {
  position: sticky;
  left: 0;
  z-index: 3;
  background: var(--surface-alt);
}
.fixhead th.pin::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0; right: 100%;
  width: 20px;
  background: inherit;
  pointer-events: none;
}
/* 종목 수는 왼쪽, 정렬 기준은 오른쪽. 표 밖이라 가로 스크롤을 안 타고 늘 보인다 —
   좁은 화면에서 정렬된 열이 밀려 나가도 무엇으로 세운 표인지 읽힌다.
   비어 있을 때(JS 없음) 자리만 차지하지 않도록 gap 대신 margin-left:auto 를 쓴다. */
/* **정렬 기준 칸이 있을 때만** flex 로 바꾼다. 이 줄은 순위·분류 장에도 있는데
   거기는 글자 하나뿐이라(span 도 없다) flex 로 만들면 익명 상자가 하나 끼어든다 —
   보기에는 같아도 이유 없이 상자 구조가 달라진다. `:has()` 는 이 파일이 이미 쓴다.
   **판 id 로 좁히지 않는다**(2026-09-07). 예전에는 `#list` 를 앞세웠는데, 그 id 가
   없는 목록 장이 생기자(/theme/ 의 분류표·종목 표) 두 글자가 그냥 붙어 나왔다 —
   '기타 귀금속 ETF 1종목순자산 큰 순'. 좁히는 일은 `:has(.cap-sort)` 가 이미 한다:
   그 span 은 목록 장 다섯 곳만 낸다(상세 7,296장은 글자 한 줄뿐이라 안 걸린다). */
.tablecap:has(.cap-sort) { display: flex; align-items: baseline; }
.tablecap .cap-sort { margin-left: auto; padding-left: 10px; color: var(--text-4); white-space: nowrap; }

/* ---- 긴 표를 50행부터 보여 준다 ('더 보기', 2026-09-05) ----
   /etf/ 는 1,167행 한 장이고 390px 에서 71,909px — 약 85화면이다. 화면에는 50행만
   두고 나머지는 버튼으로 50씩 연다.

   ############  `.js` 를 절대 지우지 마라  ############
   조상 선택자 `.js` 가 쓸모없어 보이지만 **이 규칙의 전부**다. 표 앞의 인라인
   스크립트가 `<html class="js">` 를 붙이므로, 스크립트가 도는 브라우저에서만 이
   규칙이 켜진다.
   `.js` 를 빼면 **JS 를 안 돌리는 수집기에서도 1,117행이 사라진다.** 이 사이트가
   재는 것이 AI·검색 인용이고, 원문 HTML 만 읽고 자바스크립트를 실행하지 않는
   수집기(GPTBot·ClaudeBot 류)가 이 장의 주 독자다. 그들에게 50행짜리 장을 내주면
   이 장의 존재 이유가 무너진다. HTML 에는 1,167행이 그대로 있고, 감추는 일은
   **브라우저에서만** 일어나야 한다.
   (이 파일에서 `.js` 조상을 쓰는 것은 여기가 처음이다. 다른 규칙이 안 쓴다고
   오타로 보지 마라.)

   **이것은 첫 페인트용 장치다.** 페이지가 뜨면 more.js 가 `over` 를 걷어내고
   그때부터 보이고 안 보이고를 스스로 관리한다. 그러니 이 규칙이 실제로 일하는
   시간은 스크립트가 붙기 전 한 프레임뿐이다 — 그 한 프레임이 없으면 1,167행이
   먼저 그려졌다가 접히면서 화면이 튄다.
   `tr.lev`(레버리지 필터용 행)는 세지 않으므로 여기 안 걸린다. */
.js table[data-row-limit] tbody tr.over { display: none; }

/* '더 보기' 줄. **JS 가 없으면 보이지 않는다** — 그때는 이미 전량이 깔려 있어
   눌러도 열 것이 없는 죽은 버튼이 된다. 위 규칙과 짝이라 조건도 같아야 한다.

   **왼끝에 세운다. 셋을 다 만들어 보고 골랐다.**
   이 카드 안의 모든 것이 한 왼쪽 선에 서 있다 — 실측 1,280px 에서 '운용사 전체'
   받침 · 거르기 칸 · 표 제목 · 표 첫 칸 · 카드가 전부 x=100 이고, 390px 에서는
   전부 14 다. 왼끝에 두면 버튼도 그 x 를 받는다.
   가운데로 두면 x=585.78(1,280px) · 140.78(390px) 이라 그 기둥에서 이것 하나만
   빠져나오고, 바로 아래 '상장폐지된 ETF … 보기' 링크는 다시 왼끝이라 줄이 끊긴다.
   폭을 다 쓰게 하면 1,080px 짜리 띠 한가운데에 글자 넉 자가 놓여, 방금 240px 로
   줄인 `.lf-q` 와 같은 '빈 상자' 가 다시 생긴다.
   이 파일이 카드 좌우를 0 으로 만든 것도(.price-head · .card 주석) "페이지의 모든
   글이 같은 두 줄 사이에 든다" 는 같은 이유였다.

   위 10px 은 표 마지막 행의 밑선과 버튼 사이다. 이 카드의 다른 간격(표제목 4 ·
   알약줄 6)보다 넓은 이유는, 그것들은 **한 벌 안의** 사이인데 이것은 표가 끝나고
   다음 것이 시작되는 자리이기 때문이다. 아래는 안 준다 — 카드가 제 18px 을 갖는다. */
/* 줄 안에 버튼이 둘이다 — '전체 보기' 가 왼쪽에 제 폭만큼, '더 보기' 가 남는 폭을
   다 쓴다. 200씩 늘려도 전량(1,064행)을 보려면 여섯 번을 눌러야 해서 한 번에 다
   펴는 길을 옆에 뒀다.

   **간격 6px 은 같은 카드의 `.listfilter` gap 에서 가져왔다.** 이 줄과 거르기 상자가
   한 카드 안에 있으므로 사이 간격이 둘일 이유가 없다.

   `nowrap` 을 못 박는다 — 줄이 바뀌면 왼쪽 버튼이 위, 긴 버튼이 아래로 떨어져
   '왼쪽에 하나, 나머지를 길게' 라는 배치 자체가 사라진다. **390px 에서도 한 줄에
   든다**: 실측 전체 보기 88.52 + 간격 6 + 더 보기 267.48 = 362 = 칸 폭이고, 왼쪽
   버튼은 글자 넉 자라 어느 폭에서도 88.52px 로 같다(좁아지는 것은 오른쪽뿐이다).

   줄의 좌우는 표가 아니라 **카드**에 맞는다. 이 줄은 `.table-scroll` 바깥이라
   가로 스크롤을 타지 않는다 — 1,280px 에서는 표와 오른끝이 같지만(둘 다 1,180),
   390px 에서는 표가 674.72 까지 뻗어도 이 줄은 376 에서 끝난다. 그게 맞다:
   버튼은 화면에 늘 보여야 하는 조작이고, 표만 옆으로 굴러가야 한다. */
.morerow { display: none; margin-top: 10px; }
.js .morerow { display: flex; flex-wrap: nowrap; gap: 6px; align-items: stretch; }
/* 왼쪽은 제 글자만큼, 오른쪽이 남는 폭을 전부 먹는다. `min-width: 0` 은 아주 좁은
   칸에서도 긴 쪽이 먼저 줄어 왼쪽 버튼의 글자를 밀어내지 않게 하는 안전장치다. */
.morebtn-all { flex: 0 0 auto; }
.morebtn-more { flex: 1 1 auto; min-width: 0; }

/* 모양은 **거르기 알약의 박스형**을 그대로 쓴다. 같은 카드 안에서 같은 일(보는 것을
   바꾸는 조작)을 하므로 새 어휘를 만들지 않는다 — 테두리 --border · 바탕 --surface ·
   글자 --text-2 · 12.5px 은 `.pill` 에서, 모서리 8px 은 이 카드의 `.lf-q`·거르기
   알약에서 가져왔다. 호버도 `.pill:hover` 와 같다.

   **높이만 44px 으로 다르다.** `.pill` 은 22.5px 인데, 이 버튼은 전량을 보려면
   23번 눌러야 하는 자리다(1,167행 ÷ 50). 반복해 누르는 표적이라 손가락 기준
   44px 을 지킨다 — 이 파일이 `.allmenu > summary` 에서 든 그 값이다. 거기서는
   헤더 높이(--head-h)가 묶여 있어 음수 마진으로 물려야 했지만, 이 버튼은 제 줄에
   혼자 서므로 그냥 44px 이면 된다. 굵기만 600 으로 올린다 — 이 줄에서 유일하게
   누를 것이라 `.pill.on` 과 같은 무게를 준다.

   **두 버튼의 무게를 다르게 하지 않는다.** 무게를 갈랐다면 주된 조작인 '더 보기' 를
   검정으로 채웠을 텐데(--text 바탕 + 흰 글자), **이 카드에서 검정 채움은 이미 뜻이
   있다** — 바로 위 거르기 알약의 `.pill.on`, 곧 '지금 켜져 있다' 이다. 상태가 아닌
   버튼에 그 채움을 쓰면 화면이 거짓말을 한다. 새 색조를 만들어 피하는 길은
   막혀 있다(파랑 --accent 는 AI 표시 전용, 2026-09-05 지시).
   그래서 서열은 **길이가 말한다**: 남는 폭을 다 쓰는 쪽이 주된 조작이고, 제 글자만큼
   서 있는 쪽이 지름길이다. 색을 안 쓰고도 한눈에 갈린다. */
.morebtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text-2);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
}
.morebtn:hover { border-color: var(--text); text-decoration: underline; text-decoration-color: var(--text); }
.morebtn:active { transform: scale(.98); }

/* 남은 개수. 11px · --text-4 · 기울임 없음. 한때 거르기 알약도 같은 치수로 제
   개수를 달고 있었는데 그 숫자는 걷어냈다(2026-09-06) — 남은 것은 이 자리뿐이다.
   10px(.rowtags .badge)은 이름 뒤 표시용이라 이 자리보다 작고, 11.5px(.lead-sub)은
   기준값 아래 붙는 보조 '값' 이다.

   등폭 숫자를 쓴다. 이 숫자는 누를 때마다 1,034 → 834 → … 로 줄어드는데, 등폭이
   아니면 자릿값마다 글자 폭이 달라 버튼이 눌릴 때마다 좌우로 흔들린다. */
.morebtn i {
  font-style: normal;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-4);
  font-variant-numeric: tabular-nums;
}
.morebtn:hover i { color: var(--text-3); }

/* 알약 아래 첫 줄 — 그 장만의 한 줄 설명. 가격 머리가 공통이 되면서 각 장의
   tagline 이 여기로 내려왔다. 카드 밖이라 여백을 스스로 갖는다. */
.pagelead { margin: 0 0 14px; padding: 0 2px; color: var(--text-3);   /* 읽는 글이라 AA(4.5:1) 아래로 두지 않는다 */ font-size: 12.5px; line-height: 1.7; }
/* 세로 안여백 9 → 6px (2026-09-05). 표 행이 위아래로 넓다는 지적이 두 번 왔다.
   **가로 10px 은 그대로다** — 지적은 위아래였고, 좌우를 줄이면 열끼리 붙는다.

   6px 인 이유. 이 파일이 이미 쓰는 값이고(`.listfilter` gap · `.badges` gap ·
   `.price-head` 아래 여백이 전부 6px), 8px 로는 행마다 2px 밖에 안 줄어 두 번째
   지적에 답이 안 된다(실측 390px 두 줄 행 68.78 → 66.78). 7px 은 이 파일에 없는
   숫자다.
   더 내리지 않는 근거: 글자 줄상자가 21.6px(13.5px × 1.6)이고 그 안에서 글자는
   13.5px 이라 위아래로 4px 씩 이미 비어 있다. 안여백 6px 이면 **글자에서 선까지
   10px** 이 남는다 — 이보다 내리면 그 여백이 줄상자 안의 4px 과 같은 자리가 되어
   행과 행이 붙어 읽힌다. 배지가 든 줄도 마찬가지다: 배지(18px)는 21.6px 줄상자
   안에서 아래로 2.8px 이 남으므로 선까지 8.8px 이다.

   **손가락 표적은 이 여백이 정하지 않는다.** 행에서 누를 수 있는 것은 종목명
   링크뿐이고, 그 상자는 인라인이라 **14px**(실측)이다 — 안여백을 9 로 두든 6 으로
   두든 그대로다. `.allmenu > summary` 가 44px 을 든 것은 그 자체가 표적인 버튼이라
   그렇고, 여기는 여백을 키워도 표적이 안 커진다. 그러니 44px 을 이 값의 바닥으로
   삼을 근거가 없다.

   **전역이다(`th, td`).** 이 값 하나가 사이트의 표 리듬이라, `#list` 로 좁히면
   같은 종류의 표가 목록에서는 6px · 상세에서는 9px 로 갈린다. 상세의 구성종목 표
   85행도 같은 9px 을 쓰고 있었고 같은 지적이 그대로 적용된다. */
th, td {
  padding: 6px 10px;
  border-bottom: 1px solid #f0f2f5;   /* 행 구분선은 카드 테두리보다 연하게 */
  white-space: nowrap;
  text-align: left;
}
thead th {
  background: var(--surface-alt);
  color: var(--text-3);
  font-weight: 600;
  font-size: 12.5px;
  border-bottom: 1px solid var(--border);
  position: sticky;
  /* **0 이어야 한다.** 메뉴줄 높이만큼 내려 보려 했지만(top: var(--head-h)) 그러면
     머리글이 첫 행 위로 24px 겹쳐 1행이 헤더에 묻힌다.

     내려도 얻는 게 없다. sticky 는 가장 가까운 스크롤 컨테이너를 기준으로 붙는데,
     .table-scroll 이 overflow-x:auto 라 세로도 auto 로 계산돼(실측 y=auto) 그
     컨테이너가 기준이 된다. 컨테이너는 세로로 스크롤되지 않으므로 **머리글은
     애초에 화면에 고정되지 않는다** — 스크롤 1200 에서 머리글 y 가 -687 로
     같이 흘러간다. 메뉴 뒤에 숨을 일 자체가 없다.

     여기서 살아 있는 건 .pin 칸의 가로 고정(left:0)뿐이고 그건 컨테이너가 실제로
     가로 스크롤되므로 정상 동작한다. 세로 고정을 원하면 표를 가로 스크롤
     컨테이너 밖으로 빼야 하는데, 그건 별개의 큰 작업이다. */
  top: 0;
}
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
/* **.num 은 표 밖에서도 숫자다.** 이 규칙이 td·th 로만 걸려 있어서 목록의
   <span class="num"> 은 등폭 숫자도, 오른쪽 정렬도 받지 못했다. 자릿수가 다른
   값들이 왼쪽에 붙어 세로줄이 어긋나 보인 이유다.
   등폭은 어디서나 옳으므로 여기서 준다. 정렬은 칸의 성격에 달렸으므로 값 칸에만
   따로 준다(아래) — 목록 맨 앞의 날짜 칸을 오른쪽으로 밀면 이름에 달라붙는다. */
.num { font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
/* 숫자 값 칸은 오른쪽 정렬이다. 자릿수가 달라도 소수점과 단위가 한 줄에 선다. */
.lst li .v,
.mv li .p,
.idx-v { text-align: right; }
td.name { white-space: normal; min-width: 9em; }
tbody tr:hover { background: var(--surface-tint); }

/* ---------- 배지 ---------- */

/* 머리 안의 세로 간격을 한 벌로 조인다. 12·14·10 이 제각각이라 같은 판 안에서
   줄 사이가 넓었다 좁았다 했고, 그만큼 판이 길어져 탭이 밀렸다. 8px 로 통일한다 —
   같은 종목의 같은 시점을 말하는 줄들이라 서로 붙어 있는 편이 한 덩어리로 읽힌다. */
/* margin 을 **네 방향 다** 적는다. margin-top 만 주면 ul·p 의 브라우저 기본
   아래여백(1em = 15.5px)이 그대로 남아, 위는 8px 인데 아래는 16px 인 줄이 된다.
   실제로 배지↓가격·가격↓NAV 가 16px 로 벌어져 있었다. */
.badges { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0; padding: 0; list-style: none; }
/* 머리의 배지는 한 치수 작다. 여기서는 38px 가격 바로 위에 서므로 다른 자리와 같은
   크기면 값보다 배지가 먼저 눈에 든다 — 배지는 '어떤 상품인가' 를 거드는 표시이지
   읽으러 온 값이 아니다. 머리 안으로만 좁힌다(다른 장의 배지는 그대로). */
.price-head .badge { font-size: 11px; padding: 2px 8px; }
/* ---------- 표시 ----------
   누를 수 없는 것. 테두리를 빼서 알약(누르는 것)과 갈라 놓는다 — 예전에는
   테두리와 배경이 다 있어 화면에서 가장 알약다워 보였다. 안에 링크가 든 배지는
   그 글자만 링크색을 받으므로 누를 수 있다는 것은 여전히 보인다. */
.badge {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 12px;
  background: var(--surface-tint);
  color: var(--text-2);
  border: 1px solid transparent;
}
.badge.on { background: var(--accent-soft); color: var(--accent); border-color: transparent; }
/* 연금 배지 — 파랑 하나로 뭉쳐 있던 것을 뜻대로 나눈다. 자동완성의 알약(.s-pen)과
   같은 색을 쓴다. 목록에서 한 색으로 보이다가 눌러 들어가면 다른 색이면 같은 것을
   두 번 다르게 말하는 꼴이다. */
.badge.pen-p { background: var(--pen-p-soft); color: var(--pen-p-text); border-color: transparent; font-weight: 600; }
.badge.pen-r { background: var(--pen-r-soft); color: var(--pen-r-text); border-color: transparent; font-weight: 600; }
.badge.pen-r.full { background: var(--pen-f-soft); color: var(--pen-f-text); }
/* 거래정지. 하락색(파랑)을 쓰지 않는다 — 등락과 무관한 상태다. 경고색으로 둔다. */
.badge.susp { background: #fdecec; color: #c0392b; border-color: transparent; font-weight: 600; }
.asof.susp { color: #c0392b; }

/* ---------- 서브 네비 ---------- */

/* 종목 다섯 장을 오가는 알약 줄. **스크롤해도 머리줄 바로 아래에 붙어 있는다** —
   구성종목 199행처럼 긴 표를 보다 다른 장으로 넘어가려면 맨 위까지 되돌아가야 했다.

   top 은 머리줄 높이다(.site-head 가 top:0 에 붙어 있다). z-index 는 그보다 낮게
   둬 메뉴가 위에 오게 한다. 배경을 깔지 않으면 아래 내용이 알약 사이로 비쳐 지나간다.

   좁은 화면에서는 줄바꿈 대신 가로로 민다 — 다섯 개가 두 줄이 되면 붙박이 줄이
   화면의 두 배를 먹는다. */
.subnav {
  display: flex; flex-wrap: nowrap; gap: 8px; list-style: none;
  margin: 14px 0 0; padding: 8px 0;
  position: sticky; top: var(--head-h); z-index: 15;
  /* 흰색이다. 이 줄은 흰 밴드(.b-white) 안에 있는데 배경만 페이지 바탕색(--bg)이라
     혼자 옅은 남보라 띠로 떠 있었다 — 알약은 흰색인데 그 뒤판만 다른 색이었다.
     sticky 라 배경은 반드시 불투명해야 한다(투명하면 스크롤할 때 목록이 비친다).
     밴드와 같은 --surface 로 두면 불투명하면서 띠가 사라진다. */
  background: var(--surface);
  overflow-x: auto; scrollbar-width: none;
}
.subnav::-webkit-scrollbar { display: none; }
.subnav li { flex: none; }
.subnav a {
  display: inline-block;
  padding: 7px 13px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-2);
  font-size: 13.5px;
}
.subnav a[aria-current="page"] {
  background: var(--text);
  border-color: var(--text);
  color: #fff;
}

/* ---- 절 이동 메뉴는 밑줄 탭이다 (2026-09-22) ----
   상세 장의 `.subnav.capsule#tabs` 하나만 쓴다. 전에는 회색 판(--surface-tint) 에
   둥근 모서리와 6px 흰 테를 두르고 현재 절을 검은 알약으로 칠했다. 사용자가
   그 모양을 물렸다: "수익률, 순유입, 지표... 중간 메뉴가 알약으로 되어 있어서
   메뉴느낌이 안나" (A 밑줄 탭 · B 텍스트 메뉴 · C 폴더 탭을 견주고 A 로 정했다).

   모양은 셋으로 끝난다.
     · 글자 줄 아래 1px 실선(--border). 판도 모서리도 테도 없다.
     · 현재 절은 굵은 글자(700) + 3px 밑줄(--text). 항목마다 3px 투명 밑줄을 미리
       깔아 두고 색만 바꾸므로 켜고 끌 때 높이가 안 흔들린다. margin-bottom -1px 로
       밑줄이 아래 실선 위에 겹쳐 앉는다.
       두께는 2px 로 잡았다가 3px 로 올렸다: "아래 밑줄이 아직 즘 얇은거 같아 덜
       티가 나니까 더 두껍게 해줘봐".
     · 알약은 아니라서 li 는 늘리지 않는다(flex: 0 0 auto). 글자 폭만큼만 차지하고
       남는 폭은 오른쪽에 비운다. 줄 자체는 칸을 다 써서(width 100%) 실선이 머리와
       본문을 가르는 띠가 된다.

   글자와 여백은 폭을 따라 연속이다(clamp). 고정값 한 벌은 폰에 맞추면 데스크탑이
   작아 보이고 데스크탑에 맞추면 폰에서 넘친다: "지금은 모바일 간격이거든...
   데스크탑에서는 폰트를 더 키워도 되니까. 간격을 동적으로 하자", "화면이 커질 수 록
   폰트 사이즈가 작게 느껴짐".
     font-size  clamp(12.5px, 10px + 0.55vw, 17px)
     좌우 여백   clamp(8px, 2.1vw, 27px)
     위 여백     clamp(9px, 6px + 0.55vw, 13px)
     아래 여백   clamp(8px, 5px + 0.55vw, 12px)
   실측(글자·좌우·줄 높이): 390 → 12.5px·8px·40, 760 → 14.2·16·45,
   1024 → 15.6·21.5·50, 1280 이상 → 17·27·55. 390 폰에서 일곱 항목이 한 줄에
   든다(362/362, 넘침 0). 더 좁으면 .subnav 의 overflow-x 가 옆으로 민다.
   전에 있던 640px 미만 분기는 뺐다. 그 분기가 하던 일(좁을 때 글자와 좌우를
   조이기)을 clamp 의 아래끝이 대신한다.

   sticky·overflow·불투명 배경은 위 `.subnav` 기본 규칙이 그대로 진다. 여기서는
   `.subnav a` 의 알약 모양(테두리·999px·안여백)을 벗기고 탭 모양을 입힐 뿐이다. */
.subnav.capsule {
  gap: 0;
  padding: 0;
  margin: 14px 0 0;
  background: var(--surface);
  border-radius: 0;
  box-shadow: none;
  border-bottom: 1px solid var(--border);
  width: 100%;
}
.subnav.capsule li { flex: 0 0 auto; }
.subnav.capsule a {
  display: block;
  text-align: center;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--text-2);
  font-weight: 500;
  white-space: nowrap;
  font-size: clamp(12.5px, 10px + 0.55vw, 17px);
  padding: clamp(9px, 6px + 0.55vw, 13px) clamp(8px, 2.1vw, 27px) clamp(8px, 5px + 0.55vw, 12px);
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;
}
.subnav.capsule a[aria-current="page"],
.subnav.capsule a.on {
  background: transparent;
  color: var(--text);
  /* 굵기를 바꿔도 이 글꼴에서 한글 항목의 폭은 0.0px 변한다(390·1280 실측, 일곱
     항목 모두). 켜진 항목이 스크롤을 따라 옮겨 다녀도 줄이 출렁이지 않으므로
     폭을 예약하는 장치는 두지 않는다. */
  font-weight: 700;
  border-bottom-color: var(--text);
}

/* 메뉴 줄이 sticky 로 떠 있으므로, 앵커로 내려갈 때 그 높이만큼 미리 비워 둔다.
   안 그러면 목적지 제목이 메뉴 줄 뒤에 가려진 채 멈춘다.

   높이는 고정값이 아니라 `--subnav-h` 다 (2026-09-22). 전에는 62px 로 박혀 있었는데
   메뉴 실제 높이(캡슐 40, 새 탭 40~55)와 달라, 메뉴 바로 아래 첫 절 #sec-return
   만 메뉴가 붙기 전에 멈췄다(라이브 실측: 수익률을 누르면 메뉴 윗선 navTop 81,
   나머지 절은 59). 다른 절은 문서가 충분히 길어 sticky 가 스크롤을 받아 주니
   여분 22px 이 드러나지 않았을 뿐이다. 이제 sectabs.js 가 메뉴의 offsetHeight 를
   `--subnav-h` 로 넣고(처음과 resize 때), 여기는 그 값을 읽는다. 스크립트가 안
   돌면 62px 로 물러난다. 고친 뒤 실측: 네 절 모두 navTop 59, 절 윗선 = 메뉴 아랫선. */
[id^="sec-"] { scroll-margin-top: calc(var(--head-h) + var(--subnav-h, 62px)); }

/* ---------- 링크 목록 ---------- */

.linklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px;
            grid-template-columns: 1fr; }
.linklist li { border-bottom: 1px solid var(--border-soft); padding-bottom: 8px; }
/* 부제는 한 덩어리로 다룬다.
   예전에는 nowrap 만 걸어 뒀는데, 부제가 한 줄보다 길어지자(수익률 순위의 수록
   범위 + 구간 나열) 접히지 못한 부제가 자리를 다 차지하고 **링크 글자가 대신
   쪼개졌다** — "수익률" / "순위" 로.

   링크와 부제를 **둘 다** inline-block 으로 둔다. inline-block 은 제 폭을 스스로
   정하는 한 덩어리라, 짧은 부제는 지금처럼 링크 옆에 붙고 자리가 모자라면 통째로
   아랫줄로 내려간다. 링크 글자는 그 과정에서 절대 쪼개지지 않는다.

   nowrap 이 답이 아닌 이유는 폭이 컨테이너를 넘어도 그냥 넘겨 버리기 때문이다 —
   긴 부제든 27자짜리 종목명('KODEX 금융채1~2년(AA-이상)PLUS액티브')이든 화면
   밖으로 삐져나가 가로 스크롤을 만든다. inline-block 은 컨테이너 폭에서 접힌다. */
/* .nolink 은 링크가 없는 항목(상장폐지 이력 중 개별 페이지가 없는 종목)이다.
   링크와 같은 자리·같은 접힘 규칙을 쓰되 색으로만 구분한다 — 줄 높이가 달라지면
   같은 목록 안에서 두 종류의 줄이 어긋나 보인다. */
.linklist li > a,
.linklist li > .nolink,
.linklist .sub { display: inline-block; }
.linklist li > .nolink { color: var(--text-3); }
/* 링크와 부제 사이 간격은 **CSS 로** 준다. inline-block 은 앞뒤 공백을 먹어서
   'S&P 500' + '23종목' 이 "S&P 50023종목" 으로 붙어 버린다 — 마크업의 빈칸에
   기대면 안 되는 이유다. 부제가 아랫줄로 내려갔을 때는 왼쪽 여백이 필요 없으므로
   위쪽 여백도 함께 준다. */
.linklist .sub { color: var(--text-4); font-size: 12.5px; margin: 2px 0 0 8px; }

.prose { color: var(--text-2); font-size: 14px; white-space: pre-wrap; }

/* ---------- 레버리지 포함 토글 (전 종목 목록) ----------
   홈의 토글과 같은 조작이지만 구현이 다르다. 홈은 다섯 줄짜리 목록이라 두 벌을
   찍어 갈아 끼우는데, 이 표는 1,163행 607KB 라 두 벌이면 1.2MB 가 된다.
   그래서 한 벌만 찍고 레버리지 행을 감춘다.

   감춘 행도 HTML 에는 남는다. 이 목록이 전 종목 상세로 들어가는 주 경로라
   링크가 사라지면 파생형 103종목이 고아가 된다. */
#levall:not(:checked) ~ .table-scroll tr.lev { display: none; }

/* 번호는 CSS 카운터가 매긴다. 서버가 찍은 숫자로는 두 상태를 다 맞출 수 없다 —
   감출 때와 펼칠 때 같은 행의 번호가 달라진다. display:none 인 행은 카운터를
   올리지 않으므로, 감춘 상태에서도 1·2·3 이 이어진다.

   원래 숫자는 span 으로 남겨 두고 화면에서만 감춘다. 크롤러와 스크린리더가
   읽을 것이 줄지 않아야 한다(::before 로 만든 글자는 읽히지 않는다). */

/* ---------- 수익률 기여 / 편입·편출 ----------
   기여는 '플러스' 와 '마이너스' 를 각각 제 표로 낸다.

   한때 한 표 안에서 tbody 를 갈라 소제목 줄(.grouphead)을 끼웠다. 같은 단위(%p)를
   두 번 설명하지 않으려던 것인데, 그러면 소제목이 열 머리글(종목명·비중·…) **아래**로
   들어간다 — 제목이 자기가 이끄는 머리글 뒤에 오는 셈이라 읽는 순서가 뒤집힌다.
   머리글을 한 번 더 찍는 값을 치르더라도 제목이 맨 위에 오는 편이 맞다.
   단위 설명은 어차피 두 표 위의 문단이 한 번에 맡는다. */
.subhead { margin: 18px 0 8px; font-size: 14px; font-weight: 600; color: var(--text-2); }
/* 첫 소제목은 위 문단과 이미 간격이 있어 덧붙이지 않는다. */
.card > .note + .subhead { margin-top: 10px; }

/* 편입·편출은 두 목록이 나란해야 '무엇이 무엇으로 바뀌었나'가 한눈에 들어온다.
   좁은 화면에서는 auto-fit 이 알아서 한 줄로 접는다. */
.turnover { display: grid; gap: 18px;
            grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.turnover h3 { margin: 0 0 10px; font-size: 14px; color: var(--text-2); }
.turnover .cnt { color: var(--text-4); font-weight: 400; font-size: 12.5px;
                 margin-left: 4px; }

/* ---------- 누적 순유입 곡선 ----------
   선 하나짜리 그림이라 범례를 두지 않는다. 끝점에 값을 직접 적는 편이 짧다. */
/* **높이를 224px 로 박아 둔다. 비율(aspect-ratio)로 바꾸지 마라** (2026-09-07).
   한 번 비율로 바꿨다가 되돌렸다. 시안에서는 좁은 화면에 위아래 빈 띠가 보였고
   (390px: 그림 84px · 띠 70px 씩) 비율로 묶으면 그 띠가 0 이 되는 것이 맞아 보였다.
   그런데 그 띠는 **시안에만 있는 것**이었다 — 시안은 스크립트를 떼어낸 복제본이라
   서버가 구운 viewBox(1040×224)가 그대로 남는다. 실제 화면에서는 flowview.js 가
   그릴 때마다 실제 픽셀 폭을 재서 viewBox 를 `<실제폭>×224` 로 다시 잡으므로
   배율이 1 이고 띠가 애초에 없다(라이브 390px 실측: 상자 362×224 · viewBox 362×224 ·
   그림 320×100, 띠 0).
   여기에 `aspect-ratio: 1040/224` 를 걸면 상자만 362×78 로 납작해지는데 viewBox 는
   여전히 362×224 라, preserveAspectRatio 기본값(meet)이 그림을 0.35배로 줄여
   한가운데 몰아넣는다(실측: 그림 111×35, 좌우 121px 씩 빔). 고치려던 것보다 나쁘다.
   비율로 묶고 싶으면 flowview.js 의 `H` 도 함께 폭에서 파생시켜야 하는데, 그러면
   390px 에서 그림이 78px 로 낮아져 일별 막대를 못 읽는다. 두 파일이 한 쌍이다. */
.flowwrap .flowline { display: block; width: 100%; height: 224px; }
/* 순유입 카드의 읽기 줄은 **수익률 카드와 같은 줄**이다(2026-09-08 지시).
   하루 전에는 이 줄을 0 으로 접고 값이 뜨면 그림 위에 겹치게 했는데, 그건 줄이
   평소에 비어 있다는 전제였다. 이제 평소에도 '1년 누적 순유입 +4.6조원' 을 적으므로
   접으면 그 글자가 그림에 겹친다. 공용 `.chart-readout` 을 그대로 쓴다. */
/* 선 굵기는 수익률 차트와 같은 규약이다 — 1px, 화면 픽셀에 못 박음.
   두 그림이 한 장에 나란히 서므로 굵기가 다르면 그것만으로 위계가 생긴다. */
.flowline .cum { fill: none; stroke: var(--flow); stroke-width: 1;
                 vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.flowline .cdot { fill: var(--flow); }
.flowline .cv { fill: var(--flow); font-size: 11px; font-weight: 600; font-family: var(--font); }
.flowline .g0 { stroke: var(--border); stroke-width: 1;
                vector-effect: non-scaling-stroke; }
.flowline .gl, .flowline .dl { fill: var(--text-4); font-size: 11px; font-family: var(--font); }
/* 일별 막대는 곡선의 배경이다 — 옅게 깔아 곡선을 가리지 않는다.
   등락과 같은 관행(유입 빨강·유출 파랑)을 쓴다. */
.flowline .fb { opacity: .38; }
.flowline .fb.up { fill: var(--up); }
.flowline .fb.down { fill: var(--down); }
.flownote { margin-top: 6px; }

/* 그림·표 위의 제목 한 줄. 무엇을 보고 있는지 지나치기 전에 알려 준다.
   섹션 제목(h2)보다 작고, 그 아래 설명(.note)보다는 진하다. */
.charttitle { margin: 10px 0 6px; font-size: 13px; font-weight: 600; color: var(--text-2); }
/* 제목 줄이 데리고 있는 끝값. 곡선과 같은 색이라 어느 선의 값인지 색이 잇는다 —
   그림 안에 적던 것을 여기로 옮겨서(chart.py FLOW_PAD_R) 그 연결이 필요해졌다. */
.charttitle .flow-v { color: var(--flow); font-variant-numeric: tabular-nums; }

/* 기간별 순유입 표(.flowtbl) — 한 구간이 한 줄. 구간 이름이 줄의 머리라
   <th scope="row"> 이고, 머리행(thead)이 없으므로 이 표에는 회색 띠가 없다.
   이름은 라벨 단계로 낮춘다 — 읽으러 온 것은 옆의 금액이다. th 의 기본 굵기(bold)를
   그대로 두면 이름이 값보다 진해져 무엇을 읽어야 하는지가 뒤집힌다.
   폭은 값 쪽에 몰아 준다. 이름은 가장 긴 '연초 이후' 가 들어가면 충분하다.

   **수익률 표(.rettbl)가 같은 규칙을 쓴다** (2026-09-11). 상세 수익률 카드의 접힌
   표가 주간 종가 53줄에서 기간별 수익률로 바뀌면서 순유입 표와 같은 꼴(구간 일곱 ×
   한 줄)이 됐다. 규칙을 베껴 두 벌로 두면 한쪽만 고쳐질 자리라 선택자만 늘린다 —
   값의 종류(금액·퍼센트)만 다르고 표의 모양은 같기 때문이다. */
.flowtbl th,
.rettbl th {
  width: 1%;
  white-space: nowrap;
  color: var(--text-3);
  font-weight: 400;
}
.flowtbl td,
.rettbl td { font-weight: 600; }
/* 넓은 화면에서는 폭을 묶는다. 표가 카드를 가득 채우면 '1일' 과 '-1,285.9억원'
   사이가 1,040px 이 되어, 한 줄인데도 이름에서 값까지 눈이 화면을 건너간다.
   좁은 화면에서는 칸이 이 값보다 작으므로 그대로 100% 다(390px 에서 322px). */
.flowtbl,
.rettbl { max-width: 380px; }
/* 마지막 줄 밑선은 걷는다. 접힌 판의 끝이라 아래에 아무것도 오지 않는다 —
   선만 남으면 표가 끊긴 것처럼 보인다. */
.flowtbl tr:last-child th,
.flowtbl tr:last-child td,
.rettbl tr:last-child th,
.rettbl tr:last-child td { border-bottom: 0; }

/* ---- 넓은 화면에서는 구간을 옆으로 눕힌다 (2026-09-13) ----
   지시 — "수익률에서 화면사이즈가 커지면 옆으로 나열되게... 모바일에서만 세로로
   유지, 태블릿은 2줄로... 자금 순유입도 동일". 1,040px 짜리 카드에 380px 짜리 표가
   일곱 줄로 서면 오른쪽 660px 이 빈다.

   **세로로 세운 이유(위 주석)는 폐기하지 않는다.** 그건 390px 에서 일곱 열이 들어가지
   않는다는 실측이었고(2026-08-31 지적) 그 폭은 그대로다. 그래서 좁은 화면은 아래
   규칙이 **아예 건드리지 않는다** — 기본값이 지금까지의 세로 한 줄씩이고, 눕히는
   것은 min-width 로만 얹는다. 되돌릴 일이 생기면 이 두 @media 만 지우면 된다.

   **중단점은 새로 만들지 않았다.** 이 파일이 이미 쓰는 641px(8곳)·900px(3곳)을
   그대로 쓴다. 641 은 이 사이트가 '모바일 아님' 을 가르는 선이고(max-width: 640
   묶음의 짝), 900 은 칸 일곱이 들어가기 시작하는 폭이다 — 900px 화면의 카드 폭
   860px 을 일곱으로 나누면 칸마다 111px 이고, 가장 긴 값(`+2,708.8억원` 류)이 그
   안에 든다. 열 수를 폭마다 재지 않고 641/900 두 계단으로만 두는 이유는, 두 표가
   **같은 폭에서 같은 열 수**여야 위아래로 놓고 볼 때 어긋나지 않기 때문이다.

   **표 구조는 role 로 지킨다.** display 를 갈면 브라우저가 표 역할을 잃으므로
   마크업에 role(table·rowgroup·row·rowheader·cell)을 명시해 뒀다(etf_detail.html).
   접근성 트리에서 구간 이름이 여전히 rowheader 로 읽히는 것을 확인했다. */
@media (min-width: 641px) {
  /* 폭 상한을 푼다. 380px 은 '한 줄에 이름 하나 · 값 하나' 일 때 눈이 건너가지 않게
     잡은 값이라(위 주석) 눕힌 뒤에는 그 상한이 2열·7열을 380px 안에 쑤셔 넣는다. */
  .flowtbl,
  .rettbl { max-width: none; display: block; }
  .flowtbl tbody,
  .rettbl tbody {
    display: grid;
    /* minmax(0, …) 이 아니면 nowrap 인 값이 1fr 의 최소폭을 밀어 그리드가 칸을
       넘는다. 값은 잘리지 않고 칸이 늘어나는 쪽이 기본이라 그걸 막아야 한다. */
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 28px;
  }
  .flowtbl tr,
  .rettbl tr {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    /* 밑선을 칸(th·td)에서 줄(tr)로 옮긴다. 칸마다 그으면 열 사이 빈틈
       (column-gap)에서 선이 끊겨 계단처럼 보인다. 값은 그대로 #f0f2f5 다. */
    border-bottom: 1px solid #f0f2f5;
  }
  .flowtbl th,
  .flowtbl td,
  .rettbl th,
  .rettbl td { border-bottom: 0; padding: 6px 0; }
  /* `width: 1%` 는 표 레이아웃 알고리즘에만 듣는 값이다. flex 줄에서는 이름 칸을
     1% 로 찌그러뜨려 '연초 이후' 가 세로로 쪼개진다. 제 글자 폭을 쓰게 둔다. */
  .flowtbl th,
  .rettbl th { width: auto; }
}
@media (min-width: 900px) {
  .flowtbl tbody,
  .rettbl tbody {
    /* 구간이 일곱보다 적은 종목(상장 한 달 미만)도 있다. 칸을 일곱으로 고정해 두면
       그런 표도 같은 격자에 앉아, 위아래 두 표의 이름이 같은 세로줄에 선다. */
    grid-template-columns: repeat(7, minmax(0, 1fr));
    column-gap: 14px;
  }
  /* 일곱 칸이면 111~150px 이라 이름과 값을 한 줄에 나란히 놓을 자리가 없다.
     이름을 값 위에 얹는다 — 위아래로 붙어 있어 어느 이름의 값인지는 그대로 읽힌다.
     밑선은 걷는다. 값 일곱 개 밑에 그어진 선은 표의 행 구분이 아니라 그냥 줄이다. */
  .flowtbl tr,
  .rettbl tr { display: block; border-bottom: 0; }
  .flowtbl th,
  .rettbl th { display: block; padding: 0 0 2px; }
  /* 값도 왼쪽 정렬이다. 칸마다 오른쪽으로 밀면 이름과 값이 서로 다른 세로줄에
     서서 한 덩이로 안 읽힌다. 등폭 숫자(.num 의 tabular-nums)는 그대로 살아 있어
     자릿수가 달라도 칸 사이 자리가 맞는다. */
  .flowtbl td,
  .rettbl td { display: block; padding: 0; text-align: left; font-size: 14.5px; }
}

/* ---- 순유입 카드의 발줄 (2026-09-07) ----
   '순유입 순위 전체 보기 →' 링크와 '▸ 기간별 순유입 보기' 접기가 두 줄로 서서
   카드 끝에 26px 을 먹고 있었다. 둘 다 카드를 마무리하는 조작이라 한 줄에 세운다 —
   왼쪽이 나가는 링크, 오른쪽 끝이 펴는 것이다.
   **미는 쪽은 접기(summary)다.** 반대로 링크를 흐름에 두고 summary 를 절대배치하면
   펼친 표가 링크 **옆**에서 시작한다 — details 는 제 자리에서 아래로 펴지기
   때문이다. summary 만 오른끝으로 밀면 표는 그 줄 아래에 전체 폭으로 펴진다. */
#sec-flow .flowfoot { position: relative; margin-top: 12px; }
#sec-flow .flowfoot > .serieswrap { margin-top: 0; }
/* 수익률 카드의 손잡이도 같은 자리에 세운다 (2026-09-11 사용자 지시: "기간별 수익률
   보기는 오른쪽으로 이동"). 두 카드가 잇달아 서 있는데 한쪽 손잡이만 오른끝이면
   같은 조작이 좌우로 어긋나 보인다. **한 규칙으로 묶어 둔다** — 한쪽만 고치면
   다시 어긋난다. 수익률 쪽에는 .flowfoot 같은 감싸개가 없다(그 카드에는 왼쪽에
   얹을 링크가 없다). 그래서 여기 두 줄만으로 끝난다: 흐름에서 폭을 글자만큼 줄이고
   왼쪽 여백으로 밀면 오른끝에 서고, 펼친 표는 그 줄 아래에 전체 폭으로 펴진다. */
/* 구성종목 카드의 손잡이도 이 묶음에 든다 (2026-09-13 지시 "지금왼쪽에 있는데...
   오른쪽으로 정렬"). 구조는 수익률 쪽과 같다 — `.flowfoot` 같은 감싸개가 없고
   details 가 카드의 직계 자식이며, 그 줄 왼쪽에 얹힌 `.cardfoot` 도 없다.
   **선택자만 늘린다.** 이 묶음이 있는 이유가 한쪽만 고쳐 손잡이가 좌우로 갈리는
   것을 막는 것이라, 여기서 새 규칙을 따로 쓰면 그 뜻이 무너진다. */
#sec-flow .flowfoot > .serieswrap > summary,
#sec-holdings > .serieswrap > summary,
#sec-return .retfoot > .serieswrap > summary { width: max-content; margin-left: auto; }
/* 링크는 그 줄 왼쪽에 얹는다. 알약이라 글자 줄보다 키가 커서 2px 을 내려 눈으로 맞춘다. */
#sec-flow .flowfoot > .cardfoot { position: absolute; left: 0; top: 2px; }
#sec-flow .flowfoot > .cardfoot .morelink { margin-top: 0; }

/* ---- 수익률 카드의 발줄 (2026-09-13) ----
   순유입과 **같은 일**이다: 범례 줄(KODEX 200 · NAV · 코스피200)은 왼쪽만, 손잡이
   줄은 오른쪽만 차서 반쪽짜리 두 줄이 쌓여 있었다. 사용자 지시 — 기간별 수익률
   보기를 "kodex 200 nav가 있는 위치로 올리기". 감싸개 `.retfoot` 하나에 둘을 담고
   한 줄에 세운다. 오른끝은 위 묶음이 정하므로 여기서 다시 적지 않는다.

   **얹는 쪽만 순유입과 반대다.** 순유입은 왼쪽 링크를 절대배치로 얹는데, 여기서
   왼쪽에 서는 것은 종목명이 든 범례라 길이가 제각각이다 — 390px 에서
   'KODEX 금융채1~2년(AA-이상)PLUS액티브' 류는 두 줄이 된다. 절대배치는 부모를
   늘리지 못하므로 그 두 번째 줄이 아래 표 위로 넘친다. 그래서 범례를 흐름에 두고
   **손잡이를 얹는다**. 그래도 순유입의 규칙은 지켜진다: details 는 흐름에 남은
   전체 폭 블록이라 펼친 표가 찌그러지지 않는다(summary 만 흐름에서 뺀다).

   겹침은 자리를 미리 비워 막는다 — 범례의 오른쪽 padding 이 곧 손잡이 자리다.
   글자가 그 선에 닿으면 가로로 밀리는 대신 다음 줄로 내려간다. 값 132px 은
   손잡이 실측폭(1280px·390px 모두 119px)에 13px 을 띄운 것이다.

   min-height 는 닫혔을 때의 한 줄이다 — summary 가 흐름 밖이라 닫힌 details 의
   높이는 0 이고, 손잡이 한 줄(실측 32px)을 감싸개가 대신 잡지 않으면 손잡이가
   카드 아래로 새어 다음 칸과 붙는다. */
#sec-return .retfoot { position: relative; min-height: 32px; }
#sec-return .retfoot > .chart-legend { padding-right: 132px; }
#sec-return .retfoot > .serieswrap { margin-top: 0; }
/* top 은 범례 첫 줄의 글자와 눈으로 맞춘 값이다. summary 는 위아래 6px 안여백이
   있고 범례는 margin-top 6px 이 부모로 빠져나가 감싸개 위끝이 곧 글자 위끝이다. */
#sec-return .retfoot > .serieswrap > summary { position: absolute; right: 0; top: -6px; }

/* ---- 「정보」 칸의 두 표를 넓은 화면에서 두 칸으로 (2026-09-14) ----
   `#sec-info` 에는 표가 둘이다 — '기본 정보'(이름/값 14행)와 소제목 아래의
   '보수와 비용'(머리행 + 10행). 둘 다 한 칸으로 서서 카드 폭을 통째로 먹고 있었다.
   기본 정보는 값 오른쪽이 529px 비었고(1280px·069500 실측), 보수 표는 값이 오른끝
   정렬이라 빈 자리가 이름과 값 **사이**에 있었다. 사용자 지시 "넓은화면에서 2열로".
   실측 효과: 기본 정보 484 → 243px, 보수 379 → 207px. 오른쪽 빈 폭 529 → 178px.

   **다단(columns)이지 격자(grid)가 아니다.** 시안은 `table`·`tr`·`th` 의 display 를
   block/grid 로 눕혔는데, display 를 바꾸는 순간 브라우저가 table·row·rowheader·cell
   의 암묵 역할을 뗀다 — 이 사이트는 표마다 `caption.sr-only` 로 이름을 지켜 온 곳이라
   그 캡션이 가리킬 표가 사라진다. 이 파일의 `.flowtbl`·`.rettbl` 이 그 길을 갔고,
   그래서 `etf_detail.html` 의 그 두 표는 `role="table"`·`role="row"`·`role="rowheader"`·
   `role="cell"` 을 손으로 달고 있다. 다단은 표를 그대로 둔 채 **상자만 쪼갠다** —
   계산된 display 가 table/table-row/table-cell 그대로다. 실측(1024px·069500):
   적용 전후 이 장의 AX 트리가 같다(table 5·caption 5·rowgroup 4·row 41·cell 77·
   rowheader 26·columnheader 9, 표 이름 다섯 개 모두 그대로). 마크업은 한 글자도
   안 건드린다.

   **900px 는 잰 값이다.** 이 파일이 이미 쓰는 경계(640·641·899·900) 중 하나다.
   641px 부터도 넘침 없이 두 칸이 서지만 그 아래에서는 값이 많이 접힌다 — 기본 정보
   표에서 두 줄 이상이 된 행 수 실측: 0049K0 이 641px 4행 · 768px 3행 · 860px 2행 ·
   900px 2행 · 1024px 2행, 463690 이 5 · 3 · 2 · 2 · 2. 900px 에서 바닥을 치고 그
   위로는 더 줄지 않는다. 넓은 폭을 얻자고 행을 접는 것은 문제를 옆으로 옮기는 것이다.
   좁은 화면(390px)은 이 묶음 밖이라 한 픽셀도 달라지지 않는다.

   선택자는 `#sec-info` 안으로만 좁힌다. 전역 `table`·`th`·`td` 에 걸면 이 사이트
   7,000여 장의 표가 전부 함께 움직인다. */
@media (min-width: 900px) {
  #sec-info .table-scroll { columns: 2; column-gap: 40px; }
  /* **값은 접혀야 한다.** 칸이 절반이 되면 `white-space: nowrap` 인 값이 제 칸 밖으로
     넘치는데, 다단은 넘친 것을 잘라 주지 않아 **오른쪽 칸 글자 위로 올라탄다**
     (실측 1024px·0049K0: 기초지수가 74자라 가로로 176px 넘쳤고 오른쪽 칸의
     '지수 산출기관'·'시장 분류' 값과 겹쳐 찍혔다). 넓은 화면에서만 값을 접는다.
     **이름 칸(th)은 그대로 nowrap 이다** — 이름은 짧고, 한 줄로 서야 두 칸의 값이
     같은 세로줄에 선다. 덤으로 첫 칸이 남는 폭을 독차지하던 것도 줄었다
     (1280px·069500 이름 칸 405 → 195px). */
  #sec-info .table-scroll td { white-space: normal; }
  /* 접혀서 두 줄이 된 행은 칸 경계에서 제가 쪼개진다 — 윗줄은 왼쪽 칸, 아랫줄은
     오른쪽 칸에 떨어져 한 값이 두 군데로 갈린다(실측 860px·0049K0: 한 행의 상자가
     300px, 곧 두 칸에 걸쳐 있었다). 행은 통째로 한 칸에 둔다. */
  #sec-info .table-scroll tr { break-inside: avoid; }
  /* 보수 표에는 머리행이 있는데 다단은 그것을 **왼쪽 칸에만** 놓는다(오른쪽 칸은
     첫 행부터 시작). 두 칸에 다 세울 수는 없다 — `column-span` 은 다단 상자의 직계
     자식에만 듣고 여기서 그 자식은 `table` 이다. thead 를 감추는 길은 버렸다:
     '연 보수율' 은 화면에서 읽어야 할 말이고, 이 사이트는 칸을 숨기지 않는다.
     남는 문제는 행 구분선이 두 칸 사이에서 어긋나는 것이었다 — 머리띠(32.5px)와
     본문 행(34.09px)의 키가 달라 최대 2.1px 틀어졌다(실측). 머리글의 줄상자를
     본문 행과 같은 21.6px(= 13.5px × 1.6)으로 맞추면 띠가 34.09px 이 되어 두 칸이
     한 리듬에 앉는다 — 어긋남 0.5px 이하. 글자 크기(12.5px)는 그대로다.

     **마지막 행의 밑선은 그대로 둔다.** 두 칸의 길이가 다르면(접힌 행·홀수 행)
     오른쪽 칸이 한 행 먼저 끝나 밑선이 계단처럼 보이는데, 한 칸일 때도 마지막 행에
     밑선이 있었고(전역 `th, td` 규칙) 칸 사이에 세로선이 없어 두 칸은 각자 끝나는
     것으로 읽힌다. 마지막 행만 골라 선을 지우면 이 표만 사이트의 표 리듬에서 빠진다. */
  #sec-info .table-scroll thead th { line-height: 21.6px; }
}

/* ---------- 1년 시세 차트 ----------
   빌드 때 구운 SVG 다. viewBox 안에서 좌표가 정해져 있고, 화면 폭은 여기서 정한다
   (preserveAspectRatio=none 이라 가로만 늘어나고 세로는 고정된다). */
/* 232 → 180px (2026-09-07). 이 카드가 첫 화면을 통째로 먹어, 아래 순유입·지표로
   눈이 이어지지 않았다. 선 하나짜리 그림이라 세로를 줄여도 읽히는 것은 그대로다.
   **viewBox 도 1040×180 으로 함께 다시 잡는다**(chart.py). 이 svg 는
   preserveAspectRatio="none" 이라 CSS 높이만 줄이면 눈금 글자까지 세로로 눌린다. */
.chartcard .sparkline { display: block; width: 100%; height: 180px; }
/* 0% 가 아닌 눈금은 **점선**이다(2026-09-08 지시: "점선도 있음").
   실선이면 0% 선(.g0)과 굵기·색만 다른 같은 종류의 선이라, 어느 것이 기준선인지
   눈으로 세어야 한다. 결 자체를 갈라 두면 셀 필요가 없다 — 실선은 하나뿐이다.
   **2 4 는 배율 1 기준이다.** 사람이 보는 그림은 chartview.js 가 실제 픽셀 폭으로
   다시 그리므로(배율 1) 늘 이 값 그대로다. 빌드 때 구운 SVG 만 좁은 화면에서
   가로로 눌려 점이 촘촘해지는데, 그 그림을 보는 것은 JS 를 안 돌리는 수집기뿐이라
   그대로 둔다. vector-effect 로 화면 단위에 고정하면 지금 거의 안 보이는 좁은 화면
   눈금이 갑자기 진해진다 — 이번 지시는 결이지 굵기가 아니다. */
/* 차트의 선은 **모두 1px 이고, 화면 픽셀에 못 박는다**(2026-09-08 지시 "선들 최대한
   얇게 · 두꺼우면 촌스러워"). viewBox 단위로 두면 폭에 따라 굵기가 따라 움직인다 —
   1040 짜리 그림을 1280px 에 펴면 1.23px, 390px 에 접으면 0.38px 이 된다.
   `vector-effect: non-scaling-stroke` 가 그 배율을 끊어 어디서든 1px 로 만든다.
   위계는 굵기가 아니라 **색과 면**이 진다: 종가선만 빨강·파랑으로 짙고 그 아래가
   옅게 칠해져 있어, 굵기를 같이 줘도 무엇이 주인공인지 흐려지지 않는다. */
.sparkline .g { stroke: var(--border-soft); stroke-width: 1; stroke-dasharray: 2 4;
                vector-effect: non-scaling-stroke; }
.sparkline .gl,
.sparkline .dl { fill: var(--text-4); font-size: 11px; font-family: var(--font); }
/* 0% 선은 다른 눈금보다 진하다. 원금 대비 어디인지가 이 차트의 기준선이다. */
.sparkline .g0 { stroke: var(--border); stroke-width: 1;
                 vector-effect: non-scaling-stroke; }
/* NAV. 실선 녹색이다 — 등락을 뜻하는 빨강·파랑과 겹치지 않는 색이라 '이건 다른
   계열' 이 바로 읽힌다. 점선이었을 때는 종가선과 얽혀 어느 쪽이 어느 선인지
   구분이 잘 안 됐다.
   둘이 붙어 다니는 것이 정상이고 벌어지는 구간이 곧 시장가격이 실제 가치에서
   떨어진 때다. 수익률 축이라 원 단위일 때(0.26px)와 달리 실제로 보인다. */
.sparkline .nav { fill: none; stroke: var(--nav); stroke-width: 1;
                  vector-effect: non-scaling-stroke; stroke-linejoin: round; }
/* 비교 지수. ETF 선보다 얇고 흐리게 — 주인공은 종목이고 지수는 배경이다. */
.sparkline .bm { fill: none; stroke: var(--text-4); stroke-width: 1;
                 vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.sparkline .px { fill: none; stroke-width: 1; vector-effect: non-scaling-stroke;
                 stroke-linejoin: round; stroke-linecap: round; }
/* **여기에 stroke 를 쓰지 마라**(2026-09-08). 종가선은 0% 를 경계로 위 빨강(--up)·
   아래 파랑(--down)으로 갈리는데, 그 색은 세로 그라디언트라 0 의 y 자리를 아는
   쪽 — `chart.py price_chart()` 와 `static/chartview.js` — 이 `stroke="url(#px-line)"`
   attribute 로 낸다. CSS 는 presentation attribute 를 언제나 이기므로 여기 한 줄만
   되살려도 그라디언트가 조용히 무시되고 선이 다시 한 색이 된다.
   CSS 쪽에서 `stroke: url(#px-line)` 로 주는 길도 막혀 있다 — 외부 스타일시트의
   url(#…) 은 브라우저에 따라 **CSS 파일 주소**를 기준으로 풀려 아무것도 안 칠해진다.

   (이 사이트에서 파랑은 AI 전용이지만 **등락의 파랑은 예외다** — 상승 빨강·하락
   파랑은 한국 시장의 관례이고, 같은 화면의 수익률 숫자·순유입 막대가 이미 그 규칙을
   쓴다. 그래서 새 색을 만들지 않고 --up/--down 을 그대로 가져온다.) */
/* 그라데이션 면. **선과 0% 선 사이**를 채우고 0 에서 멀수록 진하다(가장 진한 곳 .26).
   fill 도 attribute 로 온다(위와 같은 이유). 여기서는 획을 지우기만 한다 —
   폴리곤에 획이 생기면 0선을 따라 가짜 가로선이 하나 그어진다.
   면은 **주 선(.px) 것 하나뿐이다.** NAV(초록)·지수(회색)에는 면을 깔지 않는다 —
   반투명 면이 둘 이상 겹치면 그 색이 무슨 뜻인지 아무도 못 읽는다. */
.sparkline .pxa { stroke: none; }

/* 구간 알약 + 지수 토글. 누르면 chartview.js 가 그 구간으로 다시 그린다.
   JS 가 없으면 알약은 눌려도 아무 일이 없고 기본 그림(1년·지수 켬)이 남는다 —
   잃는 정보가 없으므로 숨기지 않는다. */
.chartctl { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 10px; }
/* 캡슐 안의 알약은 껍데기가 묶고 있으므로 제 테두리를 벗는다. 홈의 .mv-bar .tab 과
   같은 값이다 — 클래스 이름이 다른 이유는 차트 쪽이 button(JS 가 .pill 로 잡는다)이고
   홈은 label(라디오)이라서다. 모양은 하나여야 한다. */
.mv-bar .pill {
  border: 0;
  background: transparent;
  margin: 0;
  padding: 4px 10px;
  font-family: inherit;
  transition: background .16s ease, color .16s ease;
}
.mv-bar .pill:hover { background: var(--surface); }
/* 켜진 것은 검정 채움(.pill.on 공용값). 껍데기 안여백 2px 이 남도록 모서리를 둥글게. */
.mv-bar .pill.on { border-radius: 999px; }
/* 차트 구간 알약은 위 .pill 을 그대로 쓴다. 예전에는 여기서만 패딩 11px 에
   테두리가 흐려(--border-soft) 같은 화면의 다른 알약보다 옅게 보였다.
   button 요소라 글꼴이 상속되지 않는 것만 되돌린다. */
.chartctl .pill { font-family: inherit; }
/* 구간 알약 바로 옆. 앞의 알약들과 살짝 띄워 '다른 종류의 버튼' 임을 보인다. */
.chartctl .bmtoggle { margin-left: 8px; cursor: pointer; }
.chartctl .bmtoggle.on { background: var(--text); border-color: var(--text); color: #fff; }
.chartctl .bmtoggle.on::before { background: currentColor; border-color: currentColor; }

/* 지수 범례는 기본으로 감춘다 — 기본 그림에 지수선이 없다. 토글을 켜면
   chartview.js 가 style 로 되살린다. */
.chart-legend .lg-bm { display: none; }
.chart-legend { margin: 6px 0 0; font-size: 12px; color: var(--text-4); }

.chart-legend span { margin-right: 12px; }
.chart-legend span::before {
  content: ""; display: inline-block; width: 14px; height: 0;
  margin-right: 5px; vertical-align: 3px;
}
.chart-legend .lg-px::before { border-top: 2px solid var(--up); }
/* 읽기줄의 값은 **선 색을 따라간다.** 종가선은 빨강(--up), NAV 선은 녹색(--nav),
   비교 지수는 회색(--text-4) — 범례를 보지 않아도 어느 숫자가 어느 선인지 읽힌다.
   그림 아래 범례가 이미 같은 색으로 이름을 달고 있으므로, 읽기줄에서 색을 다르게
   쓰면 그 둘이 서로 다른 말을 하게 된다. */
/* 종가선이 0% 를 경계로 빨강↔파랑으로 갈리게 된 뒤(2026-09-08)로는, 읽기줄의
   종가 값도 **읽고 있는 그 지점의 선 색**을 따른다. 한 색으로 고정하면 값이
   마이너스인데 숫자만 빨간, 선과 어긋난 읽기줄이 된다. */
.chart-readout .ro-px { color: var(--up); }
.chart-readout .ro-px.down { color: var(--down); }
.chart-readout .ro-px.flat { color: var(--flat); }
.chart-readout .ro-nav { color: var(--nav); }
.chart-readout .ro-bm { color: var(--text-4); }
/* 순유입 누적값. 부호가 있는 금액이라 방향색이 아니라 순유입 고유색을 쓴다. */
.chart-readout .ro-flow { color: var(--flow); font-weight: 600; }

/* 십자선 읽기줄 — **그림 위**에 놓는다. 아래에 두면 휴대폰에서 문지르는 손에
   값이 가린다(2026-09-01 지적).

   **자리를 미리 비워 둔다.** 값이 생길 때 줄이 늘어나면 그림이 아래로 밀려
   문지르는 중에 그림이 손 밑에서 움직인다(390px 실측: 예전 범례 줄이 19 → 38px).
   빈 줄 한 칸이 그 값이고, 비어 있을 때는 그냥 간격으로 읽힌다.

   한 줄을 넘기지 않는다. 가장 긴 문구가 순유입 쪽 '2026.01.23 그날 -73억원 ·
   누적 +1.2조원' 인데 390px 화면의 칸(322px)에 들어간다. 그래도 넘치면 줄을
   늘리지 않고 말줄임한다 — 여기서 한 줄이 늘어나는 것이 곧 그림이 밀리는 것이다. */
.chart-readout {
  margin: 0 0 4px;
  /* **줄 높이와 최소 높이를 같은 값으로 못 박는다.** min-height 만 주면 빈 줄은
     그 값이고 글자가 들어간 줄은 제 줄 간격(12px × 1.6 = 19.2)이라 2px 이 늘어
     난다 — 문지르는 순간 그림이 2px 내려앉았다(실측). 둘을 붙여 0 으로 만든다. */
  line-height: 19px;
  min-height: 19px;
  font-size: 12px;
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* 십자선. 선은 얇게, 점은 각 계열 색으로. */
.sparkline .xh line,
.flowline .xh line { stroke: var(--border); stroke-width: 1; }
.flowline .xh circle { fill: var(--flow); }
.sparkline .xh circle { fill: var(--up); }
.sparkline .xh circle.c-bm { fill: var(--text-4); }
/* 그림 위에서는 손가락 움직임을 '값 읽기' 로 쓴다. touch-action 을 주지 않으면
   브라우저가 먼저 세로 스크롤로 가로채 pointermove 가 오다 만다.
   **그림에만 건다** — 카드 전체에 걸면 알약·설명문 위에서도 스크롤이 막힌다.
   높이가 180px 라 손가락이 안 먹히는 구간은 그만큼이고, 값을 읽을 수 있는 것과
   맞바꾼 결과다. */
.chartwrap, .flowwrap { cursor: crosshair; touch-action: none; }
.chart-legend .lg-nav::before { border-top: 2px solid var(--nav); }
.chart-legend .lg-bm::before { border-top: 2px solid var(--text-4); }

/* 표는 접어 둔다. 52줄을 늘 펼치면 페이지가 길어지는데, 접어도 HTML 에는 그대로
   있어 봇과 스크린리더는 읽는다. */
.serieswrap { margin-top: 12px; }
.serieswrap > summary {
  cursor: pointer; color: var(--text-3); font-size: 12.5px;
  padding: 6px 0; list-style: none;
}
.serieswrap > summary::-webkit-details-marker { display: none; }
/* 삼각형 표식은 .yearfold 와 **한 벌**이다 — 아래 '접기 손잡이 삼각형' 규칙이 둘을
   함께 키운다. 여기서 크기·색을 따로 주면 두 자리가 다시 갈라진다. */
.serieswrap > summary:hover { text-decoration: underline; text-decoration-color: var(--text);}

/* ---------- 접기 손잡이 삼각형 (.serieswrap · .yearfold 공용) ----------
   2026-09-11 사용자 지시 — "아래로 화살표가 너무 작아서 안보임... 2배이상으로".
   안 보이던 이유가 둘이었다.
   (1) 표식에 제 크기가 없어 summary 의 글자 크기를 그대로 물려받았다
       (.serieswrap 12.5px → 잉크 6.0×6.0px, .yearfold 15.5px → 7.0×7.0px).
   (2) 색이 --text-4 — 이 사이트에서 가장 옅은 단계라 글자(--text-3)보다도 연했다.
       크기만 키우면 '크지만 여전히 흐린' 삼각형이 된다.
   → 크기 29px(잉크 12×13px · 자리폭 17px — 전 6×6px · 8px 이었으니 2.0~2.2배),
     색은 글자와 같은 --text-3 까지만.
     손잡이지 제목이 아니므로 그 위로는 올리지 않는다.

   **줄 높이는 표식이 정하지 않는다.** line-height: 0 인 inline-block 이라 상자 높이가
   0 이고 글자만 그 밖으로 넘쳐 그려진다 — 줄 높이를 재는 쪽은 옆의 글자다. 29px 짜리
   표식을 달고도 .serieswrap 줄은 접힘·펼침 모두 32.0px 로 전과 같다(실측).
   .yearfold 만 24.8 → 24.0px 로 0.8px 낮아졌다. 전에는 그 줄에서 **표식이 제일 컸다**
   (15.5px × 1.6 = 24.8px). 이제 높이 0 이라 h2 의 줄(24.0px)이 그 줄의 키가 된다.

   **두 자리를 묶어 둔다.** 규칙이 갈라져 있던 탓에 지금까지 두 삼각형의 크기가 서로
   달랐다(6px 대 7px). 한 사이트에서 접기 손잡이가 자리마다 다른 크기면 같은 조작으로
   읽히지 않는다. */
.serieswrap > summary::before,
.yearfold > summary::before {
  content: "▸";
  color: var(--text-3);
  display: inline-block;
  font-size: 29px;
  line-height: 0;
  vertical-align: -0.13em;
}
.serieswrap[open] > summary::before,
.yearfold[open] > summary::before { content: "▾"; }
/* 옛 규칙은 content 안의 공백으로 글자와 띄웠다("▸ "). inline-block 은 content 끝의
   공백을 먹지 않으므로 여백으로 대신한다.

   **두 자리가 한 값을 쓴다** (2026-09-13). 예전에는 .serieswrap 만 여기서 margin 을
   받고 .yearfold 는 summary 의 flex gap: 7px 으로 벌려, 같은 손잡이인데 간격이
   7px 대 9px 로 갈려 있었다(잉크 기준 실측). 지금은 .yearfold 쪽 gap 을 0 으로
   내리고(아래 `.yearfold > summary`) 두 손잡이가 모두 이 margin 하나로 띈다.
   값은 --fold-gap 에서 글리프의 오른쪽 side bearing 을 뺀 것이다 — 그 계산의
   근거는 :root 의 두 토큰 주석에 있다.

   잉크로 잰 전후(스크린샷 픽셀 · 1280px · 4배 확대) —
     .serieswrap 수익률·순유입  9.00 → 5.00px   · 구성종목 8.00 → 4.00px
     .yearfold  (/etf/delisted/) 10.25 → 4.25px
   여닫아도 흔들리지 않는다(▸ 와 ▾ 의 advance 가 둘 다 17px 이다 — 실측). */
.serieswrap > summary::before,
.yearfold > summary::before { margin-right: calc(var(--fold-gap) - var(--fold-bearing)); }
/* flex 줄에서는 vertical-align 이 듣지 않는다. 높이 0 인 상자를 줄 가운데에 놓아
   h2 글자와 눈으로 맞춘다 — baseline 정렬로 두면 삼각형이 기준선에 반쯤 걸린다. */
.yearfold > summary::before { align-self: center; }

/* 여는 글자와 닫는 글자를 갈아 끼운다.

   손잡이 글자가 늘 '펼쳐보기' 면, 열어 둔 채 표를 읽다가 그 줄로 눈이 돌아왔을 때
   무엇을 누르는 줄인지 어긋난다 — 열려 있는데 '펼쳐보기' 라고 적혀 있다.
   **두 글자를 모두 마크업에 싣고 CSS 가 하나만 보인다.** JS 로 글자를 바꾸지 않는
   이유는 이 사이트가 <details> 를 쓰는 이유와 같다: 스크립트가 없어도 동작해야 하고,
   접힌 것까지 원문 HTML 에 남아 있어야 크롤러가 읽는다.
   `display: inline` 으로 되돌리는 것은 열렸을 때다 — 초기값 대신 명시해 둬야
   `[hidden]` 류의 다른 규칙과 섞이지 않는다. */
.serieswrap > summary > .fold-less { display: none; }
.serieswrap[open] > summary > .fold-more { display: none; }
.serieswrap[open] > summary > .fold-less { display: inline; }

/* 연도 묶음 접기. 상장폐지 이력 248종목을 12개 연도로 나눠 두고 최신 연도만
   펼친다 — 나머지 11개를 늘 펼치면 246줄이 한 화면에 쏟아진다. .serieswrap 과
   같은 삼각형 표식을 쓴다: 사이트 안에서 '접힌 것' 의 생김새가 한 가지여야
   어디를 눌러야 하는지 배우지 않아도 안다. */
.yearfold > summary {
  cursor: pointer; list-style: none;
  display: flex; align-items: baseline;
  /* **gap 을 걷었다** (2026-09-13). 이 gap 이 삼각형과 제목 사이를 7px 로 벌려
     .serieswrap 의 margin 5px 과 어긋나 있었다. 간격은 위 공용 margin 하나가
     정하게 두고, 여기서 gap 이 하던 나머지 일(제목↔덧말)은 아래 줄이 대신한다 —
     gap 을 남겨 두면 삼각형 쪽에도 함께 걸려 두 번 띄운다. */
  gap: 0;
}
.yearfold > summary::-webkit-details-marker { display: none; }
/* 삼각형 표식은 위 '접기 손잡이 삼각형' 에서 .serieswrap 과 함께 정한다. 여기에
   다시 적지 않는다 — 한쪽만 고쳐 크기가 갈라지는 것이 2026-09-11 전까지의 상태였다. */
.yearfold > summary:hover > h2 { text-decoration: underline; text-decoration-color: var(--text);}
/* 접힌 줄은 한 줄로 앉아야 하므로 아래 여백을 걷는다. 펼치면 목록과의 간격이
   필요해 다시 준다 — .card > h2 의 4px·note 의 12px 를 여기서 대신한다. */
.yearfold > summary > h2,
.yearfold > summary > .note { margin: 0; }
/* 제목과 덧말 사이는 summary 의 flex gap 이 내던 몫이다. 그 gap 을 걷었으므로
   (삼각형까지 함께 벌어져서다) 여기서만 되돌려 준다 — 값은 그때의 7px 그대로다.
   위 `margin: 0` 과 특이도가 같아 **뒤에 와야** 이긴다. */
.yearfold > summary > .note { margin-left: 7px; }
.yearfold[open] > .linklist { margin-top: 10px; }

/* ---------- 자주 묻는 질문 ----------
   JSON-LD 의 FAQPage 와 같은 내용을 화면에도 싣는다. 구조화 데이터만 넣고 본문에
   없으면 지침 위반이고, 사람이 읽을 것도 안 늘어난다. */
.faq { margin: 0; }
.faq dt {
  margin-top: 14px;
  font-weight: 600;
  font-size: 14.5px;
}
.faq dt:first-child { margin-top: 0; }
.faq dd {
  margin: 5px 0 0;
  color: var(--text-2);
  font-size: 14px;
  line-height: 1.65;
}

/* ---------- 반응형 ---------- */

@media (min-width: 641px) {
  body { font-size: 15.5px; }
  .metrics { grid-template-columns: repeat(3, 1fr); }
  .metrics:has(li:nth-child(3):last-child) { grid-template-columns: repeat(3, 1fr); }
  .price-head h1 { font-size: 26px; }
  .quote .last { font-size: 38px; }
  .linklist { grid-template-columns: repeat(2, 1fr); }
}

/* **빈 칸을 남기지 않는다.** 선을 틈으로 그리므로 남는 자리는 회색 판이 된다.
   빈 칸이 생기는 곳은 3열 구간뿐이다 — 좁은 화면(2열)과 넓은 화면(4열)에서는
   실제로 쓰이는 칸 수 2·4·8 이 모두 딱 떨어진다. 안 떨어지는 둘만 마지막 칸을
   늘려 줄을 채운다: 4칸은 2행에 혼자라 3칸, 8칸은 3행에 둘이라 2칸.

   **위·아래 경계를 둘 다 적어야 한다.** min-width 만 걸어 641px 블록에 넣었더니
   1280px(4열)까지 따라와 8칸의 마지막이 2칸을 먹고 오히려 두 칸이 비었다.
   새 칸 수가 생기면 최악이라도 예전처럼 회색 칸이 보일 뿐이라 눈에 띈다. */
@media (min-width: 641px) and (max-width: 1024px) {
  /* **넷은 3+1 이 아니라 2+2 다** (2026-09-06 지시 — "4칸에서 2칸으로 줄어드는데
     배포된 건 3칸으로 될 때가 있음, 그럴 필요가 없는데").
     예전에는 마지막 칸을 3칸 폭으로 늘려 줄을 채웠다. 빈 칸은 안 생기지만 넷째
     지표만 혼자 넓어져 다른 셋과 무게가 달라 보인다. 넷은 2×2 로 딱 떨어지므로
     늘릴 것 없이 열을 줄이면 된다. 폭이 커지는 순서도 2+2 → 4 로 단순해진다
     (전에는 2+2 → 3+1 → 4 로 중간에 한 단계가 더 있었다).
     라이브 2,335장에 걸린다(상세의 보수·분배·구성종목 장 등). */
  .metrics:has(li:nth-child(4):last-child) { grid-template-columns: repeat(2, 1fr); }
  .metrics:has(li:nth-child(8):last-child) > li:last-child { grid-column: span 2; }
}

/* 아홉 칸 (2026-09-07). 주요 지표에 '분배금 지급(연)' 이 들어와 여덟이 아홉이 됐다.
   3열 구간(641~1024)은 3×3 으로 딱 떨어져 적을 것이 없고, 나머지 둘만 적는다.
   2열은 2×4 뒤에 하나가 남으므로 마지막 칸을 두 칸으로 늘린다 — 여덟 칸의
   3열 처리와 같은 방식이다. */
@media (max-width: 640px) {
  .metrics:has(li:nth-child(9):last-child) > li:last-child { grid-column: span 2; }
}

@media (min-width: 1025px) {
  .wrap { padding: 0 20px 72px; }
  .metrics { grid-template-columns: repeat(4, 1fr); }
  .metrics:has(li:nth-child(3):last-child) { grid-template-columns: repeat(3, 1fr); }
  /* 아홉은 4+4+1 이 아니라 **3×3** 이다 (2026-09-07). 마지막 줄에 한 칸만 서면
     지표 하나가 혼자 넓어져 다른 여덟과 무게가 달라 보인다 — 넷을 3+1 이 아니라
     2+2 로 두는 것과 같은 판단이다. */
  .metrics:has(li:nth-child(9):last-child) { grid-template-columns: repeat(3, 1fr); }
  .linklist { grid-template-columns: repeat(3, 1fr); }
}

/* 스크린리더 전용 — display:none 이 아니라 클리핑(봇/보조기기는 읽을 수 있어야 함) */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---- 설명이 달린 항목 ----
   title 속성이 있는 라벨·수치는 점선 밑줄로 "여기 설명이 있다"를 알린다.
   [title] 속성 선택자를 쓰므로 템플릿에서 title 을 달면 자동으로 표시가 붙고,
   글로서리에 정의가 없어 title="" 이 되면 :not([title=""]) 로 걸러진다. */
.metrics .k[title]:not([title=""]),
/* ---- 설명이 딸린 글자 (사이트 전역 규칙) ----
   **점선은 쓰지 않는다.** 밑줄은 이 사이트에서 '더 있다' 하나만 뜻해야 한다 —
   점선·실선으로 나누면 규칙이 둘이 되고, 읽는 사람이 둘을 구별해 외워야 한다.

   평소에는 아무 것도 그리지 않는다. 커서(help)가 마우스에게 말하고, 다가가면
   실선이 뜬다. 자리마다 적지 않고 여기 한 번만 적는다 — th·.k·.v·.s 어디에 붙든
   title 이 달린 글자는 같은 규칙을 따른다.

   a·button·label·summary 는 뺀다. 그것들은 이미 제 hover 규칙을 갖고 있고,
   여기 걸면 밑줄이 두 번 그어진다. */
:where(span, td, th, dt, dd, b, i, em, strong, abbr, p, li)[title]:not([title=""]) {
  cursor: help;
}
:where(span, td, th, dt, dd, b, i, em, strong, abbr, p, li)[title]:not([title=""]):hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* 축약된 금액 — 정확한 원 단위가 title 에 들어 있다는 표시.
   숫자 열에서 밑줄은 시끄러우므로 커서만 바꾼다. */
.metrics .v[title]:not([title=""]),
td[title]:not([title=""]) { cursor: help; }

/* ---- 검색 ---- */
/* 전체 메뉴 — 오른쪽 끝. 인라인 메뉴와 같은 곳을 가리키지만 한 자리에 모아 둔다.

   오른쪽 묶음(전체메뉴 + 돋보기)의 **첫 요소**가 margin-left:auto 를 갖는다.
   돋보기는 스크롤에 따라 나타났다 사라지므로 그쪽에만 auto 를 두면 돋보기가
   숨은 동안 전체메뉴가 왼쪽으로 끌려온다. */
/* 오른쪽 묶음 — 돋보기·전체메뉴를 한 상자에 담고 여기에 auto 를 준다.
   돋보기가 스크롤에 따라 사라지므로 개별 요소에 auto 를 두면 그 순간 정렬이 튄다. */
/* align-self 도 center 다. 넓은 화면에서는 이 묶음이 진짜 상자로 서는데, 헤더가
   baseline 정렬이라 묶음째 밑선에 걸려 아이콘이 브랜드보다 5px 위로 떴다. */
.head-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  align-self: center;
  gap: 2px;
  /* 남는 폭을 이 상자가 받는다(flex:1) + 안의 것은 오른쪽 끝에 붙인다(flex-end).
     헤더 검색이 열렸을 때 입력칸이 자랄 자리가 여기서 나온다. 전에는 이 상자가
     내용 크기(입력칸의 고유 폭 + 버튼 둘)만큼이어서 입력칸이 자랄 데가 없었고,
     Safari 는 검색 입력칸의 고유 폭을 Chromium 보다 좁게 잡아 가로 폰에서
     '종목명 또는 6자리 코드' 가 잘렸다(2026-09-18 사용자 캡처). flex-end 라
     닫혀 있을 때 돋보기·햄버거의 자리는 전과 같다. */
  flex: 1 1 auto;
  min-width: 0;
  justify-content: flex-end;
}
/* 헤더는 baseline 정렬이다(글자끼리 밑선을 맞추려고). 그런데 이 버튼은 글자가 아니라
   그림이라 밑선이라는 것이 없어, baseline 에 걸면 아이콘이 브랜드 글자보다 위로 뜬다
   (실측 중심 25 vs 29). 이것만 가운데로 맞춘다. */
.allmenu { position: relative; align-self: center; }
/* 누르는 자리는 44px 이다(아이콘 22 + 여백 11×2). 30×30 이었는데 손가락으로 누르는
   유일한 메뉴 버튼이라 그 크기로는 빗나간다 — 애플·구글 지침이 둘 다 44 를 말한다.
   아이콘만 키우면 여백이 줄어 눌리는 느낌이 답답해지므로 둘 다 키운다. */
.allmenu > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  /* 위아래로 7px 씩 물린다. 누르는 자리는 44 인데 **줄 높이에는 30 만 얹는다** —
     안 그러면 헤더가 59 → 66px 로 자라고, 그 높이를 읽는 것들(--head-h 로 붙는
     .subnav 의 sticky top)이 함께 어긋난다. 손가락에는 크고 화면에는 그대로다. */
  margin-top: -7px;
  margin-bottom: -7px;
  padding: 0;
  border-radius: 10px;
  color: var(--text-3);
  -webkit-tap-highlight-color: transparent;   /* 우리 배경색으로 대신 말한다 */
}

/* 눌린 동안 살짝 눌러앉는다 — 손가락 아래에서 반응이 있어야 '먹었다' 를 안다. */
.allmenu > summary:active { transform: scale(.92); }

/* **햄버거는 모양이 안 바뀐다.** 열려 있어도 세 줄 그대로이고, 열렸다는 것은
   버튼의 하이라이트가 말한다(2026-09-02 요청).

   예전에는 세 줄이 X 로 접혔다. '지금 무엇을 하는 버튼인가' 를 모양이 말하게
   하려던 것인데, 그 X 가 보기 좋지 않다는 지적을 받았다. 접는 길을 바꿔도(도는
   방식으로 한 번 바꿔 봤다) 끝 모양이 X 인 이상 같은 지적이 남는다.

   모양을 안 바꿔도 잃는 것이 적다 — 이 메뉴는 <details> 라 바깥을 누르면 닫히고,
   열려 있는 동안은 패널이 화면에 떠 있어 열린 상태가 이미 눈에 보인다. 버튼이
   그것을 한 번 더 말할 뿐이다.

   그래서 아래에는 transform 도 transition 도 없다. 열림 표시는
   `.allmenu[open] > summary` 의 색·바탕 한 쌍이 전부다(파일 뒤쪽, 어두운 머리줄
   묶음). 그 규칙을 지우면 열림 표시가 통째로 사라진다. */
.burger line {
  transform-box: view-box;
  transform-origin: 10px 10px;
}

@media (prefers-reduced-motion: reduce) {
  .allmenu > summary:active { transform: none; }
}
.allmenu > summary::-webkit-details-marker { display: none; }
/* hover 는 **마우스가 있는 기기에서만**. 터치에서는 탭한 뒤에도 hover 가 남아,
   메뉴를 닫아도 버튼이 계속 눌린 것처럼 보인다(실제로 그 지적을 받았다).

   대신 '열림' 자체를 표시로 쓴다 — [open] 이 붙어 있는 동안만 강조되므로
   닫는 즉시 사라진다. 마우스·터치 어디서든 상태와 표시가 어긋나지 않는다. */
@media (hover: hover) and (pointer: fine) {
  .allmenu > summary:hover { background: var(--surface-tint); text-decoration: underline; text-decoration-color: var(--text);}
}
.allmenu[open] > summary { color: var(--accent); background: var(--surface-tint); }

.allmenu-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;                       /* 오른쪽 끝이라 왼쪽으로 펼친다 — 화면 밖으로 안 나가게 */
  z-index: 40;
  min-width: 190px;
  display: flex;
  flex-direction: column;
  padding: 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 8px 22px rgba(20, 30, 60, .10);
}
.allmenu-panel a {
  padding: 7px 10px;
  border-radius: 6px;
  color: var(--text-2);
  font-size: 13.5px;
  white-space: nowrap;
}
@media (hover: hover) and (pointer: fine) {
  .allmenu-panel a:hover { background: var(--surface-tint); text-decoration: underline;  text-decoration-color: var(--text);}
}
/* 묶음 이름 — 링크가 아니다. 'ETF'(묶음)와 'ETF 전체'(링크)가 나란히 있어서
   글자만으로는 구분이 안 됐다. 그래서 세 가지를 함께 준다:
     · 위쪽 구분선 — 묶음이 어디서 시작하는지가 선으로 먼저 보인다
     · 자간을 벌리고 색을 낮춰 링크와 결이 다르게
     · 링크보다 확실히 작은 크기
   눌리는 것과 안 눌리는 것이 한눈에 갈려야 한다. */
.allmenu-panel .grp {
  margin: 10px 0 2px;
  padding: 9px 10px 0;
  border-top: 1px solid var(--border-soft);
  color: var(--text-4);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .08em;
}
/* 첫 묶음 위에는 선을 긋지 않는다 — 패널 테두리와 겹쳐 두 줄로 보인다. */
.allmenu-panel .grp:first-child { margin-top: 2px; padding-top: 0; border-top: 0; }

/* 규칙 순서가 곧 우선순위다 — 기본 .allmenu-panel 규칙 **뒤**에 와야 한다.
   앞에 두면 같은 특정도의 기본값이 덮어써서 아무 효과가 없다(오늘 .topstrip 에서 겪었다).

   모바일에서 13.5px 은 작다. 사이트가 이미 인라인 메뉴를 14.5px 로 키우고 있는데
   패널만 그대로였다. 손가락으로 누르는 곳이라 여백도 함께 늘려 누를 칸을 키운다. */
@media (max-width: 640px) {
  .allmenu-panel { min-width: 210px; padding: 8px; }
  .allmenu-panel a { font-size: 15px; padding: 10px 12px; }
  .allmenu-panel .grp { font-size: 11.5px; margin: 12px 0 3px; padding: 11px 12px 0; }
  .allmenu-panel .grp:first-child { margin-top: 2px; padding-top: 0; }
}

/* 목록 페이지에서 ?q= 로 걸렀을 때의 안내줄. 표 바로 위에 붙는다. */
.qfilter {
  margin: 0 0 10px;
  padding: 9px 12px;
  border-radius: 8px;
  background: var(--surface-alt);
  color: var(--text-3);
  font-size: 13px;
}
.qfilter b { color: var(--text); font-weight: 600; }
.qfilter .n { color: var(--accent); }

/* 하나도 못 찾았을 때 — 표를 감추고 이 자리가 화면을 받는다. */
.qfilter.none { padding: 18px 16px; text-align: center; }
.qfilter.none p { margin: 0 0 4px; font-size: 14.5px; }
.qfilter.none .sub { color: var(--text-4); font-size: 13px; margin-bottom: 12px; }
.qfilter.none .btn-ai { margin-right: 8px; }

/* 메뉴줄의 돋보기 — 아래 검색창이 화면에서 사라졌을 때만 JS 가 hidden 을 벗긴다.
   메뉴 링크들과 반대쪽 끝에 세운다(.inner 가 flex 라 margin-left:auto 로 민다). */
.headsearch-btn {
  display: flex;
  align-items: center;
  padding: 6px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--text-3);
  cursor: pointer;
}
@media (hover: hover) and (pointer: fine) {
  .headsearch-btn:hover { background: var(--surface-tint); text-decoration: underline; text-decoration-color: var(--text);}
}
.headsearch-btn[hidden] { display: none; }

/* 같은 버튼이 닫혀 있으면 돋보기, 열려 있으면 X 다(2026-09-18 결정). 열린 뒤에도
   돋보기가 그대로 남아 "검색 버튼이 하나 더 있나" 로 읽혔다. 상태는 search.js 가
   버튼에 적는 aria-expanded 하나에서 읽는다 — 클래스를 따로 두면 둘이 어긋난다. */
.headsearch-btn .ic-close { display: none; }
.headsearch-btn[aria-expanded="true"] .ic-open { display: none; }
.headsearch-btn[aria-expanded="true"] .ic-close { display: block; }

/* 펼쳐진 헤더 검색 — 메뉴줄 폭을 넘지 않게 잡고, 좁으면 한 줄을 통째로 쓴다.

   order:-1 은 열렸을 때 X 가 **입력칸 오른쪽, 햄버거 바로 왼쪽**에 서게 하는 수다.
   .head-right 의 DOM 순서는 [버튼][폼][햄버거]라 그대로 두면 열려도 버튼이 입력칸
   왼쪽에 남는다. 폼을 -1 로 당기면 [폼][버튼][햄버거]가 되고, 닫혀 있을 때는 폼이
   display:none 이라 order 가 아무 일도 하지 않는다 — 버튼·햄버거는 0 그대로다.
   버튼을 DOM 에서 옮기지 않는다: search.js 와 포커스 순서가 그대로다.
   좁은 화면(≤640px)은 아래 미디어 규칙이 order:9·폭 100% 로 덮어 폼이 제 줄을
   쓰고, 버튼은 첫 줄 햄버거 왼쪽에 그대로 있다 — 거기서는 이미 원하는 자리다. */
.headsearch {
  order: -1;
  /* 기본 폭 300px 에서 남는 자리만큼 자라 최대 420px. 좁아질 때도 260px 아래로는
     안 줄어 '종목명 또는 6자리 코드' 가 잘리지 않는다(글자 183px + 돋보기 42px +
     여백). 641px 에서 남는 폭이 약 320px 이라 넘치지 않는다(실측). */
  flex: 1 1 300px;
  min-width: 260px;
  max-width: 420px;
}
.headsearch[hidden] { display: none; }

.searchbar {
  max-width: 1120px;
  margin: 0 auto;
  /* 위 여백은 메뉴줄이 sticky 가 되면서 필요해졌다. 예전에는 검색창이 헤더 **안**
     이라 헤더의 아래 여백을 나눠 썼는데, 밖으로 빼면서 간격이 0 이 됐다 —
     메뉴줄 테두리에 입력칸이 그대로 붙어 한 덩어리처럼 보였다.

     한때 이 자리를 배너 슬롯(90/50px)으로 비워 뒀다가 되돌렸다. 아무것도 없는
     90px 은 본문을 그만큼 밀어내기만 한다 — 채울 것이 정해지면 그때 다시 연다.

     배너를 접은 뒤로도 위 28px 이 남아 있었다. 띠 하나가 118px(입력칸 54 + 안내문
     18 + 여백 46)이라, 검색을 쓰지 않는 사람에게는 모든 페이지 첫 화면이 그만큼
     아래로 밀린 채 열렸다. 위 12 · 아래 8 로 줄여 96px 로 만들었고(-22px),
     2026-09-06 에 위 6 · 아래 4 로 한 번 더 조여 82px 이 됐다(-36px, -30%).
     6px 이어도 메뉴줄 테두리와 붙어 보이지 않는다 — 그 사이에는 띠의 짙은
     바탕이 있어 선 둘이 겹쳐 읽히지 않는다. 아래 4px 이 좁아 보이지 않는 것은
     바로 밑 안내문이 제 위여백 4px 을 갖기 때문이다(합 8px). */
  padding: 6px 16px 4px;
}

/* 종목 찾기 창 — **홈 히어로와 같은 차림이다.** 예전에는 입력칸이 테두리를 두르고
   버튼이 옆에 따로 선 상자였는데, 같은 사이트에서 검색창이 화면마다 다르게 생겼다.
   여기서는 폼이 상자이고 입력칸·버튼이 그 안에 든다(홈과 같은 구조).
   position:relative 는 자동완성 목록이 이 상자를 기준으로 뜨기 때문에 남긴다. */
.searchform {
  position: relative;
  display: flex;
  align-items: center;
  /* 세로 3px (2026-09-06, 5 → 3). 상자 높이가 54 → 50px 이 된다.
     **50px 이 바닥이다** — 안에 든 돋보기 버튼이 42px 이고 그 위아래로 3px 씩,
     테두리 1px 씩이 붙어 딱 50 이다. 입력칸 안여백을 더 줄여도 버튼이 높이를
     정하므로 한 픽셀도 안 줄어든다(실측 8·9px 둘 다 50px).
     버튼 42px 은 손가락으로 누르는 자리라 건드리지 않는다.
     같은 선언이 `.hero-search`(홈 히어로)에도 있는데 그쪽은 건드리지 않는다. */
  padding: 3px 5px 3px 0;
  background: var(--surface);
  border: 1px solid var(--accent);
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(20, 30, 60, .06);
  transition: box-shadow .15s ease;
}
.searchform:hover,
.searchform:focus-within {
  box-shadow: 0 2px 10px rgba(20, 30, 60, .06),
              0 0 18px 4px rgba(0, 106, 249, .30);
}
@media (prefers-reduced-motion: reduce) {
  .searchform { transition: none; }
}

.searchform input[type="search"] {
  flex: 1;
  min-width: 0;
  /* 세로 8px (2026-09-06, 11 → 8). 상자 높이는 옆 버튼(42px)이 정하므로 이 값이
     높이를 줄이지는 않는다. 그래도 함께 줄이는 것은, 11px 을 남겨 두면 글자가
     상자 한가운데가 아니라 위로 떠 보이기 때문이다. */
  padding: 8px 18px;
  border: 0;
  background: transparent;
  color: var(--text);
  /* 16px 은 모바일 값이다(그 미만이면 iOS 가 포커스 때 화면을 확대한다).
     폭에 따라 크기가 바뀌지 않도록 데스크톱에도 같은 값을 쓴다 — 14px 과 큰 차이가
     없고, 경계를 넘을 때 입력칸이 커졌다 작아졌다 하는 편이 더 눈에 거슬린다. */
  font-size: 16px;
  font-family: inherit;
}
/* 안내 글자를 테두리와 같은 파랑으로. 회색이면 '비어 있는 칸' 으로만 보이는데,
   테두리와 같은 색이면 창과 한 덩어리로 읽혀 무엇을 치는 곳인지가 먼저 눈에 든다.
   opacity 를 1 로 못 박는다 — 브라우저 기본이 반투명이라 색을 지정해도 흐려진다. */
.searchform input[type="search"]::placeholder {
  color: var(--accent);
  opacity: 1;
}

.searchform input[type="search"]:focus {
  outline: 2px solid var(--accent);
  outline-offset: -1px;
}

.searchform button {
  flex: 0 0 auto;
  padding: 7px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--accent);
  font-size: 18px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  transition: filter .15s ease;
}
.searchform button:focus { outline: none; }
.searchform input[type="search"]:focus { outline: none; }
/* 아이콘 크기·간격은 홈과 같은 값이다. 다르게 두면 화면을 옮길 때 같은 창이
   다른 것으로 보인다. 아이콘에 width/height 속성을 안 붙이고 여기서 정하는 이유는
   접이식 헤더 검색만 작게 쓰기 위해서다(아래 .headsearch). */
.searchform .btn-search svg { width: 26px; height: 26px; display: block; }
.searchform .btn-ai {
  display: inline-flex; align-items: center; gap: 0;
  padding: 7px 3px 7px 6px;
  margin-left: 5px;
}
.searchform .btn-ai svg { width: 26px; height: 26px; flex: none; margin-left: -3px; }
.searchform .btn-ai .btn-lbl {
  background: linear-gradient(180deg, var(--accent), var(--accent-deep));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.searchform button:hover,
.searchform button:focus-visible,
.searchform button:active {
  filter: brightness(1.28) saturate(1.35);
}

/* 접이식 헤더 검색만 작게. 메뉴줄 안에 드는 자리라 홈 크기 그대로면 머리가
   두꺼워진다. 색·모양·반응은 같고 치수만 줄인다 — 같은 창으로 읽히는 건
   크기가 아니라 생김새다. */
.headsearch { padding: 3px 3px 3px 0; }
.headsearch input[type="search"] { padding: 7px 12px; }
.headsearch button { padding: 5px; }
.headsearch .btn-search svg { width: 20px; height: 20px; }
/* AI 검색은 글자가 짧아 좌우 여백을 조금 줄인다. 예전에는 좁은 화면에서만 그랬는데
   폭에 따라 버튼 크기가 달라져 통일했다. */

/* 자동완성 — 폼 아래로 겹쳐 뜬다. */
/* 홈 히어로 검색창(.hero-search)에도 반드시 함께 걸어야 한다.
   빠뜨리면 position:absolute 가 안 잡혀 드롭다운이 플렉스 항목으로 끼어들고,
   입력창을 옆으로 밀어 검색바가 통째로 깨진다(모바일에서 특히 심함). */
.searchform .suggest,
.hero-search .suggest {
  position: absolute;
  top: calc(100% + 4px);
  left: 0; right: 0;
  z-index: 30;
  margin: 0;
  padding: 4px;
  list-style: none;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .12);
  max-height: 340px;
  overflow-y: auto;
}
.searchform .suggest li a,
.hero-search .suggest li a {
  display: flex;
  justify-content: space-between;
  /* **가운데 정렬이다.** 왼쪽 덩어리가 두 줄이 되어도 종목코드는 행의 세로
     한가운데에 선다. baseline 이면 코드가 첫 줄 글자에 붙어 위로 딸려 올라가고,
     stretch 면 아래로 눌린다 — 오른쪽 열은 줄 수와 무관하게 같은 자리여야 한다. */
  align-items: center;
  gap: 10px;
  padding: 7px 9px;
  border-radius: 4px;
  color: var(--text);
  text-decoration: none;
}
.searchform .suggest li a:hover,
.searchform .suggest li.on a,
.hero-search .suggest li a:hover,
.hero-search .suggest li.on a { background: var(--surface-alt); }
/* 왼쪽 덩어리 — 이름 + 알약. **줄바꿈은 여기서만 일어난다.**
   한 줄에 다 들어가면 한 줄로 두고, 이름이 길어 알약이 못 들어갈 때만 알약이
   아랫줄로 내려간다. 전부 두 줄로 고정하면 짧은 이름까지 행이 35→55px 이 되어
   한눈에 보이는 결과가 줄어든다 — 대가를 긴 이름에만 치르게 한다. */
.searchform .suggest .s-main,
.hero-search .suggest .s-main {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 6px;
  flex: 1 1 auto;
  min-width: 0;
}
.searchform .suggest .s-name,
.hero-search .suggest .s-name {
  font-weight: 600;
  font-size: 13px;
  /* 알약이 늘면서 긴 이름이 오른쪽 묶음을 밀어내지 않도록. min-width:0 이 없으면
     flex 항목이 내용 폭 아래로 줄지 않아 ellipsis 가 걸리지 않는다. */
  min-width: 0;
  /* 아랫줄로 내려보낼 수 있게 됐으니 이름을 자르지 않는다. 이름이 정말 길면
     이름 자신이 두 줄로 접힌다 — 고르는 사람이 보는 것은 이름이다. */
  overflow: hidden;
  white-space: normal;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
/* 이름이 안 겹치는데 뜻으로 걸린 종목. 표시가 없으면 "왜 이게 떴지"가 된다. */
.searchform .suggest .s-tag,
.hero-search .suggest .s-tag {
  margin-left: 5px; padding: 1px 4px; border-radius: 3px;
  font-size: 9px; font-weight: 700; line-height: 1.4; letter-spacing: .3px;
  color: var(--accent); background: var(--accent-soft); vertical-align: 1px;
}
/* 알약 묶음 — **이름 바로 옆**이다. 오른쪽 끝에 두었더니 알약과 코드가 194px 를
   고정으로 가져가, 좁은 화면에서 이름 몫이 128px(390px 화면)·58px(320px 화면)
   까지 줄어 여덟 줄이 전부 잘렸다. 사람이 고르는 것은 이름인데 이름이 제일 먼저
   잘리고 있었다.

   `.s-name` **안**에 넣지 않는 이유가 따로 있다. 안에 있으면 이름의 ellipsis 에
   같이 잘린다 — 지금 AI 표시가 그렇고, 이름이 긴 줄에서는 표시가 통째로 사라진다.
   옆 칸에 두면 이름이 잘려도 알약은 남는다. flex: none 이 그것을 보장한다. */
.searchform .suggest .s-badges,
.hero-search .suggest .s-badges {
  display: flex;
  align-items: baseline;
  gap: 4px;
  flex: none;
}
/* 오른쪽 묶음 — 이제 종목코드만 남는다.
   코드에 고정폭을 주고 마지막에 두면 코드가 줄마다 같은 열에 선다. */
.searchform .suggest .s-meta,
.hero-search .suggest .s-meta {
  margin-left: auto;
  display: flex;
  align-items: baseline;
  gap: 5px;
  flex: none;
  color: var(--text-4);
  font-size: 11px;
  white-space: nowrap;
}
.searchform .suggest .s-code,
.hero-search .suggest .s-code {
  flex: none;
  width: 4.4em;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
/* 배수 알약 — 레버리지·인버스. **주황이다.** 예전 노랑(--warn)은 퇴직연금 70% 가
   가져갔다 — 한 목록 안에 뜻이 다른 노랑이 둘 설 수는 없다. 레버리지는 연금계좌에
   아예 못 담는 상품이라 '한도 있음'(노랑)과 같은 층이 아니다.
   빨강은 쓰지 않는다. 이 사이트에서 빨강은 거래정지(.badge.susp)와 상승(--up)이
   이미 쓰고 있어, 배수 표기에 얹으면 '멈춘 종목' 이나 '오른 종목' 으로 읽힌다.
   글자 대비 5.38, 노랑과 색상각 21° 차이다(실측). */
.searchform .suggest .s-lev,
.hero-search .suggest .s-lev {
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--lev-soft);
  color: var(--lev-text);
  font-weight: 600;
  /* 연금 알약과 **같은 급이다.** 이름 옆으로 옮기면서 .s-pen 에만 10px 를 주었더니
     이 알약만 13px 로 남아 이름보다 커 보였다. 알약은 이름의 곁말이다. */
  font-size: 10px;
  white-space: nowrap;
}
/* 100% 는 퇴직연금 안전자산 — 한도가 없다. 70%(노랑)보다 진한 초록으로 올린다. */
.searchform .suggest .s-pen.full,
.hero-search .suggest .s-pen.full { background: var(--pen-f-soft); color: var(--pen-f-text); }
.searchform .suggest .s-pen.psn,
.hero-search .suggest .s-pen.psn { background: var(--pen-p-soft); color: var(--pen-p-text); }
/* 연금 배지 — 종목코드 옆. 운용사 텍스트가 있던 자리다.
   코드보다 진하게 두되 종목명보다는 약하게 — 읽는 순서가 이름 → 배지 → 코드다. */
.searchform .suggest .s-pen,
.hero-search .suggest .s-pen {
  padding: 1px 6px;
  border-radius: 999px;
  /* 상세 페이지의 연금 배지(.badge.pen-*)와 **같은 토큰**을 쓴다. 목록에서 한 색으로
     보이다가 눌러 들어가면 다른 색이면 같은 것을 두 번 다르게 말하는 꼴이다.
     회색은 '없는 값' 자리로 남겨 둔다 — 종목코드가 그 회색이다. */
  background: var(--pen-r-soft);
  color: var(--pen-r-text);
  font-weight: 600;
  /* 이름 옆으로 오면서 글자를 한 급 낮춘다. 이름과 같은 줄에 서므로 여기서
     크면 이름과 경쟁한다 — 읽는 순서는 이름이 먼저다. */
  font-size: 10px;
  white-space: nowrap;
}

.searchform .suggest .empty,
.hero-search .suggest .empty { padding: 9px; color: var(--text-4); font-size: 13px; }

/* 홈의 .hero-note 와 같이 가운데로. 검색창은 화면 폭을 다 쓰는데 그 아래 한 줄만
   왼쪽에 붙어 있어 검색창에 딸린 말로 안 읽혔다. 좌우 2px 여백도 뗀다 — 가운데
   정렬에서는 한쪽으로만 미는 값이 된다.
   위 여백은 6px 이었는데, 띠 전체를 줄이면서 4px 로 맞춘다 — 글자가 11px 이라
   4px 이면 입력칸에 붙지 않고 여전히 떨어져 읽힌다(실측 안내문 높이 18px). */
.search-note { margin: 4px 0 0; font-size: 11px; color: var(--text-4); text-align: center; }

/* 'Finance AI Data Hub' 는 홈과 같은 무게로 선다(.hero-note a 와 같은 값). 여기서는
   링크에 아무 규칙이 없어 안내문과 똑같은 회색 400 이었다 — 문장 안에 묻혀서 누를
   곳이라는 것도, 다른 서비스로 간다는 것도 보이지 않았다. 검정+굵게가 이 줄에서
   유일하게 눌리는 곳임을 말한다. */
.search-note a { color: var(--text); font-weight: 700; }



/* ---- 기간별 수익률 막대차트 ----
   0 선을 기준으로 위(상승·빨강)·아래(하락·파랑)로 갈린다. 좌표는 빌드 타임
   계산이라 여기서는 모양만 맡는다. 같은 수치의 표가 바로 아래 있다. */
.barchart {
  position: relative;
  display: flex;
  align-items: stretch;
  gap: 6px;
  height: 170px;
  /* 위는 값 글자 자리, 아래는 기간 라벨 자리. 둘 다 padding 이 아니라 margin 으로
     비운다 — 0 선(.zero)은 .barchart 기준 absolute 라 % 가 padding box 로 풀리는데,
     막대는 .plot(=content box) 기준이다. padding 을 주면 그만큼 0 선만 내려가
     막대가 만나는 지점과 어긋난다(20px padding 에 9px 어긋났다). */
  margin: 30px 0 24px;
}

.barchart .zero {
  position: absolute;
  left: 0; right: 0;
  height: 1px;
  background: var(--border);
  z-index: 0;
}

.barchart .col {
  position: relative;
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
}

.barchart .plot { position: relative; flex: 1; }

.barchart .bar {
  position: absolute;
  left: 15%; right: 15%;
  min-height: 2px;        /* 0 에 가까운 값도 흔적은 남긴다 */
  border-radius: 2px;
  z-index: 1;
}
.barchart .bar.up   { background: var(--up); }
.barchart .bar.down { background: var(--down); }

/* 값 표기 — 상승·하락 모두 막대 **위쪽 바깥**에 둔다.
   하락 막대는 0 선에서 아래로 자라므로, 0 선에 맞춘 글자를 그대로 두면 글자가
   막대 안으로 흘러든다. 글자색과 막대색이 같은 파랑이라 그러면 아예 안 보인다.
   위로 올리면 하락 막대 위는 늘 빈 공간이라 어떤 데이터에서도 겹치지 않는다. */
.barchart .val {
  position: absolute;
  left: 0; right: 0;
  text-align: center;
  font-size: 10px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  z-index: 2;
  /* 본문 줄간격(1.6)을 물려받으면 줄상자가 글자보다 6px 커서, 올려 놔도 아래쪽이
     막대에 걸친다. 상자를 글자에 맞춰야 -13px 이 그대로 여백이 된다. */
  line-height: 1;
  transform: translateY(-13px);
}

.barchart .lbl {
  position: absolute;
  bottom: -18px;
  left: 0; right: 0;
  text-align: center;
  font-size: 11px;
  color: var(--text-4);
}

@media (max-width: 640px) {
  .barchart { height: 130px; gap: 3px; }
  .barchart .val { font-size: 9px; }
  .barchart .lbl { font-size: 10px; }
  .barchart .bar { left: 8%; right: 8%; }
}

/* ---- 구성비중 트리맵 ----
   좌표는 빌드 타임에 계산돼 style 속성으로 들어온다. 여기서는 모양만 맡는다.
   비중 농도는 녹색 계열로 간다 — 빨강/파랑은 등락 의미로 이미 쓰고 있어
   그 색을 비중에 쓰면 "빨간 칸 = 오른 종목"으로 오독된다. 파랑도 하락(--down)과
   링크(--accent)가 함께 쓰는 색이라 같은 함정이 있었다. 색상각 158° 는 순자산
   막대(--bar-aum-me: #008554)와 같은 계열이라, 두 그림이 한 가족으로 읽힌다. */
.treemap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  min-height: 240px;
  margin-top: 12px;
  background: var(--surface-alt);
  overflow: hidden;
}

.treemap .tile {
  position: absolute;
  overflow: hidden;
  padding: 4px 5px;
  border: 1px solid var(--bg);
  /* 사다리에 들지 못한 나머지 칸. 아래 다섯 단계와 같은 158° 에서 가장 옅은 자리다
     (실측 상대휘도 0.794) — 글자색을 따로 주지 않아도 본문색이 그대로 읽힌다. */
  background: #c8efe1;
  font-size: 12px;
  line-height: 1.2;
  cursor: help;

  /* 글자를 칸 한가운데에 놓는다. 세로 가운데는 flex 로, 가로 가운데는
     text-align 으로 잡는다 — align-items: center 를 쓰면 자식이 내용만큼만
     넓어져서, 한 줄로 눕히는 칸(lv-thin)의 말줄임이 걸릴 폭을 잃는다.
     자식이 칸 폭을 그대로 쓰게 두고 그 안에서 가운데 정렬하는 편이 안전하다. */
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* 내용이 칸보다 높으면 가운데 정렬은 위아래를 함께 잘라 첫 줄이 사라진다.
     safe 는 그럴 때만 위쪽 정렬로 물러선다. 미지원 브라우저는 위 줄이 남아
     지금까지와 같이 동작한다. */
  justify-content: safe center;
  text-align: center;
}

/* 이름만 들어가는 작은 칸은 여백·글자를 줄여 두 줄이 확보되게 한다. */
.treemap .tile.lv-name { padding: 2px 3px; font-size: 10px; line-height: 1.15; }
/* 세로로 긴 칸은 줄 수를 더 준다 — 좁은 폭에서 두 줄이면 이름이 잘린다. */
.treemap .tile.lv-name .tl-name { -webkit-line-clamp: 4; }

/* 가로로 길고 납작한 칸 — 접을 세로가 없으니 한 줄로 눕힌다. */
.treemap .tile.lv-thin { padding: 0 3px; font-size: 9px; line-height: 1; }
.treemap .tile.lv-thin .tl-name {
  display: block;
  -webkit-line-clamp: none;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-weight: 500;
}

/* 앞쪽 칸일수록 진하게 — 문서 순서가 곧 비중 순서다(빌드 시 내림차순 정렬).
   파랑에서 녹색으로 옮기면서 **칸마다 휘도를 맞춰** 걸었다. 색만 갈아 끼우면 녹색은
   같은 명도에서 더 밝게 보여 단계가 뭉개진다 — '앞쪽이 진하다' 가 이 그림의 전부다.
   실측 상대휘도: 0.120 / 0.173 / 0.229 / 0.313 / 0.409 (파랑 0.118 / 0.170 /
   0.226 / 0.312 / 0.415 와 같은 자리). */
.treemap .tile:nth-child(1) { background: #007047; }
.treemap .tile:nth-child(2) { background: #0b8458; }
.treemap .tile:nth-child(3) { background: #23956b; }
.treemap .tile:nth-child(4) { background: #3caa81; }
.treemap .tile:nth-child(5) { background: #62bc9b; }
.treemap .tile:nth-child(-n+3) { color: #fff; }
.treemap .tile:nth-child(-n+3) a { color: #fff; }
/* 4·5번 칸 글자. 남색(#10243c)은 녹색 바탕 위에서 겉돌아 같은 계열의 어두운 녹색
   으로 옮긴다. 대비는 그대로다 — 4번 5.24 · 5번 6.63 (남색은 5.43 · 6.86). */
.treemap .tile:nth-child(n+4):nth-child(-n+5) { color: #0d2b21; }

/* 이름은 두 줄까지 접는다 — 한 줄 말줄임이면 '삼성바이오로직스' 같은 이름이
   대부분 잘려서 어느 종목인지 알 수 없다. 세로가 있으면 접어서 보여준다. */
.treemap .tl-name {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-weight: 600;
  overflow-wrap: anywhere;
}
.treemap .tl-pct {
  display: block;
  font-variant-numeric: tabular-nums;
  opacity: .85;
}

/* 큰 칸일수록 큰 글자. 등급은 빌드 타임에 칸의 가로·세로로 정한다(treemap.py
   size_level). 칸 넓이가 이미 비중을 말하는데 글자까지 같은 크기면 그림이
   한 번밖에 말하지 않는다 — 25% 짜리와 3% 짜리가 같은 무게로 읽힌다. */
.treemap .tile.sz-md { font-size: 15px; }
.treemap .tile.sz-lg { font-size: 19px; padding: 8px 10px; }
.treemap .tile.sz-xl { font-size: 24px; padding: 10px 12px; }
/* 비중 숫자는 이름보다 한 단계 작게 — 이름이 먼저 읽혀야 한다. */
.treemap .tile.sz-lg .tl-pct,
.treemap .tile.sz-xl .tl-pct { font-size: .78em; margin-top: 2px; }

@media (max-width: 640px) {
  /* 좁은 화면에서 16:9 는 칸이 눌려 글자가 안 들어간다. 정사각에 가깝게 편다. */
  .treemap { aspect-ratio: 4 / 3; }
  .treemap .tile { font-size: 11px; padding: 4px 5px; }
  /* 등급은 그대로 두되 폭이 절반 이하라 실제 픽셀은 줄여야 한다.
     같은 22% 칸이 데스크톱 198px, 모바일 79px 이다. */
  .treemap .tile.sz-md { font-size: 12px; }
  .treemap .tile.sz-lg { font-size: 14px; padding: 5px 6px; }
  .treemap .tile.sz-xl { font-size: 17px; padding: 6px 7px; }
}

@media print {
  .site-head nav, .subnav { display: none; }
  body { background: #fff; }
}

/* ============================================================
   홈 — 절제된 금융 정보형 (개선안 v2)

   배경 밴드로 구역을 나눈다. 전체가 한 톤이면 섹션이 끝없이 이어져 보인다.
   톤은 4개까지만 — 더 늘리면 정보가 아니라 배경이 눈에 띄기 시작한다.
   다크 밴드는 페이지에 딱 한 번(개발자 구역)만 쓴다.
   ============================================================ */

/* 밴드 안쪽 여백. 배경색이 이미 "구역이 바뀌었다"를 말해주므로 여백까지 크게
   줄 필요가 없다 — 색과 여백이 같은 말을 두 번 하면 화면만 길어진다.
   밴드 사이(위+아래)가 섹션 사이보다 넉넉하기만 하면 위계는 유지된다. */
.band { padding: 30px 0; }

/* 본문 밴드(홈이 아닌 모든 페이지)의 **위쪽만** 줄인다. 바로 위가 검색줄이라 그 아래
   30px 은 빈 띠로만 보였다 — 빵부스러기까지 44px(밴드 30 + .crumbs 14)이 비어
   페이지가 늦게 열리는 것처럼 읽혔다. 아래쪽 30px 은 푸터와의 간격이라 그대로 둔다.

   `.b-page` 만으로는 안 통한다. 아래 두 미디어쿼리가 `.band { padding }` 를 다시
   선언하는데(641px 이상 30px, 640px 이하 20px) 둘 다 이 줄보다 뒤에 있어 같은
   특이도로 이긴다. 클래스 둘을 붙여 특이도로 이긴다. */
.band.b-page { padding-top: 12px; }
.band > .wrap > .sect:last-child,
.sect-2up:last-child { margin-bottom: 0; }

/* 히어로 그라디언트는 아래쪽이 본문 배경색으로 끝나야 경계선이 안 보인다. */
/* 히어로 밴드는 밴드 여백(30px)과 히어로 자신의 padding 이 겹쳐 위아래가 두 번
   비었다. 밴드 쪽을 걷어내고 히어로가 자기 여백만 갖게 한다 — 아래는 더 조인다.
   첫 화면에 목록이 들어오는 만큼이 곧 이 페이지의 값이다. */
.b-tint {
  /* 세로 그라데이션만으로는 거의 안 보였다 — 세 색이 다 옅은 데다 밴드가 낮아
     변화가 눌린다. 위에서 퍼지는 빛을 한 겹 얹는다. 가운데 위가 살짝 밝고 양옆으로
     흩어져, 평면이 아니라 면이 선 느낌이 난다.
     세기는 10%다. 더 올리면 파랑이 배경이 아니라 요소로 읽히기 시작한다. */
  /* 볼륨감은 **빛이 한 방향으로만 흐르지 않을 때** 생긴다. 버튼이 서 보이는 이유도
     위가 밝고 아래가 진해서가 아니라, 맨 위 1px 이 빛을 받고 가장자리가 눌리기
     때문이다. 여기에 같은 세 겹을 쓴다.
       1) 맨 위 1px 흰 선 — 빛을 정면으로 받는 모서리
       2) 위 가운데에서 퍼지는 밝은 덩어리 — 여기가 가장 솟은 곳
       3) 아래 가장자리에 눌린 그늘 — 면이 뒤로 말려 들어간다
     세로 그라데이션은 바탕으로 깔고 마지막을 페이지 배경색으로 끝낸다.
     그래야 밴드가 끝나는 자리에 경계선이 안 생긴다. */
  background:
    radial-gradient(120% 90% at 50% 6%, rgba(255, 255, 255, .62) 0%, rgba(255, 255, 255, 0) 58%),
    radial-gradient(100% 62% at 50% 100%, rgba(24, 52, 108, .07) 0%, transparent 72%),
    linear-gradient(180deg, #dbe6ff 0%, #e9effb 58%, var(--bg) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .75);
  padding-top: 6px; padding-bottom: 0;
}
/* ★ 알약과 첫 섹션 사이가 계속 벌어져 있던 진짜 원인. .wrap 은 페이지 바닥
   여백으로 padding-bottom 56~72px 을 갖는데, 히어로 밴드의 wrap 도 그 값을
   그대로 써서 알약 **아래**에 그만큼이 깔려 있었다. 히어로에는 필요 없다. */
.b-tint > .wrap { padding-bottom: 0; }
/* 같은 함정이 흰 밴드에도 있었다. .wrap 의 padding-bottom 56~72px 은 **페이지
   맨 아래** 여백이지 밴드마다 필요한 값이 아닌데, 밴드마다 그걸 물고 있어서
   섹션 끝과 다음 밴드 사이가 130px 넘게 벌어졌다(테마 아래가 특히 눈에 띄었다).
   밴드 간격은 .band 의 위아래 30px 이 맡는다. */
.band > .wrap { padding-bottom: 0; }
.b-white { background: var(--surface); border-top: 1px solid var(--border-soft); border-bottom: 1px solid var(--border-soft); }
/* 흰 밴드가 연달아 오면 **같은 흰 판**이다. 사이에 선을 그을 이유가 없다 —
   경계는 카드 테두리가 말한다.

   예전에는 아래쪽 밴드의 border-top 만 걷어 위쪽 밴드의 border-bottom 1px 을
   남겼다. 위아래로 30px 씩 있을 때는 가운데 놓인 구분선처럼 보였는데, 위 여백을
   걷고 나니 그 선이 다음 섹션 제목에 딱 붙어 버렸다 — 위 카드의 아래 테두리와
   같이 보여 "테두리 둘이 패딩 없이 붙었다"가 됐다. 선 자체를 없앤다. */
.b-white:has(+ .b-white) { border-bottom: 0; }
.b-white + .b-white { border-top: 0; }
/* 선이 없으면 두 밴드는 한 판이다. 한 판 안에서 60px(아래 30 + 위 30)이 벌어질
   이유가 없다 — 위쪽을 걷어 30px 한 번만 남긴다. 섹션 사이(22px)보다 넓어서
   "구역이 바뀌었다"는 여전히 읽힌다. */
.b-white + .b-white { padding-top: 0; }
/* 히어로 바로 뒤 밴드는 위 여백을 줄인다. 히어로 아래 여백 + 밴드 위 여백이
   더해져 빠른이동 알약과 첫 섹션 사이가 크게 벌어져 있었다.
   밴드 사이가 아니라 **히어로와 본문 사이**라 이 한 곳만 조인다. */
.b-tint + .b-white { padding-top: 8px; }
.b-gray { background: #eff3fb; }
.b-dark { background: #151a24; color: #98a1b3; }

/* 회색 밴드 위의 카드는 살짝 띄워야 배경과 갈린다.
   같은 카드가 밴드에 따라 다르게 읽혀야 밴드가 제 역할을 한다. */
.b-gray .card { box-shadow: 0 1px 2px rgba(20, 30, 60, .04); }

/* ---- 히어로 ---- */
/* 히어로는 인사이지 화면의 주인이 아니다. 여백을 줄여 첫 화면에 목록이 더
   들어오게 한다(40/24 → 24/14, 검색창 26→16, 빠른이동 22→14). */
.hero { text-align: center; padding: 14px 0 0; margin: 0; }
.hero h1 {
  margin: 0;
  font-size: 30px;
  line-height: 1.3;          /* 1.6 이면 제목이 붕 뜬다 — 크기보다 행간이 원인이었다 */
  font-weight: 700;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.hero-sub {
  margin: 7px auto 0;
  max-width: 640px;          /* 좁으면 "연금 편입 가능 / 여부를" 처럼 어색하게 끊긴다 */
  font-size: 15px;
  line-height: 1.55;
  color: var(--text-3);
  text-wrap: balance;
}

.hero-search {
  position: relative;
  display: flex;
  align-items: center;
  max-width: 720px;
  margin: 16px auto 0;
  padding: 5px 5px 5px 0;
  background: var(--surface);
  /* 테두리를 검색 버튼과 같은 색으로 둔다 — 창과 버튼이 한 덩어리로 읽힌다.
     회색 테두리는 입력창을 '배경의 일부' 로 보이게 해 첫 화면에서 눈에 안 걸렸다. */
  border: 1px solid var(--accent);
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(20, 30, 60, .06);
  transition: box-shadow .15s ease;
  text-align: left;
}
/* 호버·포커스 모두 파랑이 번지되 **세기를 다르게** 둔다. 평소 테두리가 이미
   accent 라 색만으로는 두 상태가 구분되지 않는다 — 번짐의 굵기·진하기가 그 구분을
   진다. 바닥 그림자는 두 상태에서도 남긴다(빼면 창이 눌린 것처럼 내려앉는다). */
/* 호버와 포커스에 **같은 번짐**을 준다. 세기를 달리해 두 상태를 갈랐었는데,
   포커스 쪽이 커서 커서를 넣는 순간 화면이 출렁였다.
   구별을 잃어도 실무에서 문제가 없다 — 검색창은 화면에 하나뿐이라, 키보드로 들어온
   사람에게는 번짐이 떠 있다는 사실 자체가 '여기에 있다' 는 신호가 된다. */
.hero-search:hover,
.hero-search:focus-within {
  box-shadow: 0 2px 10px rgba(20, 30, 60, .06),
              0 0 18px 4px rgba(0, 106, 249, .30);
}
@media (prefers-reduced-motion: reduce) {
  .hero-search { transition: none; }
}
.hero-search input[type="search"] {
  flex: 1;
  min-width: 0;
  padding: 11px 18px;
  border: 0;
  background: transparent;
  color: var(--text);
  font-size: 16px;   /* 모바일 값으로 통일 — iOS 확대 방지 하한이기도 하다 */
  font-family: inherit;
}
.hero-search input[type="search"]:focus { outline: none; }
/* 위 .searchform 과 같은 파랑이다. 크기만 이 창의 값을 쓴다. */
.hero-search input[type="search"]::placeholder { color: var(--accent); opacity: 1; font-size: 15px; }
.hero-search button {
  flex: 0 0 auto;
  padding: 9px 15px;      /* 모바일 값으로 통일 */
  border: 1px solid transparent;
  border-radius: 8px;
  font-size: 14px;        /* 모바일 값으로 통일 */
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
}
/* AI 검색은 같은 페이지에서 답하지만 '다른 기능'임을 테두리로 표시한다. 채우지는
   않아 위계는 검색 버튼이 위에 있게 둔다. 회색으로 두면 비활성처럼 보인다. */
.hero-search .btn-ai {
  /* 글자와 별은 한 낱말처럼 붙여 둔다 — 떨어져 있으면 별이 옆에 놓인 다른
     아이콘처럼 보인다. gap 0 에 svg 를 3px 당겨 실제로 맞닿게 했다. */
  display: inline-flex; align-items: center; gap: 0;
  /* 상자를 "AI★" 크기에 바짝 붙인다. 위아래 9px 은 그대로 둔다 — 줄이면 옆의
     [검색] 과 높이가 어긋나 두 버튼이 다른 줄에 선 것처럼 보인다.
     오른쪽이 왼쪽보다 3px 작다: 별 그림이 판 안에서 오른쪽으로 4 비어 있어,
     같은 숫자로 두면 오른쪽이 그만큼 더 넓어 보인다. */
  padding: 7px 3px 7px 6px;
  margin-left: 5px;   /* 뒤에 오는 쪽이 간격을 갖는다 — 버튼 순서를 바꾸면 함께 옮긴다 */
  background: transparent;
  color: var(--accent);
  /* 평소엔 테두리를 안 보인다 — 옆의 [검색] 이 채워진 버튼이라, 이쪽까지 테두리를
     두르면 나란히 선 두 상자가 되어 위계가 사라진다. 손이 닿을 때만 상자가 된다.
     .hero-search button 이 1px 투명 테두리를 이미 잡아 두므로 자리는 안 흔들린다. */
  border-color: transparent;
}
/* 호버·키보드 포커스·누르는 중 — 셋 다 같은 표시를 준다. 누를 때만 빠지면
   터치 기기에서 눌린 티가 안 난다(터치에는 호버가 없다).

   **상자를 그리지 않고 글자가 빛난다.** 테두리를 두르면 옆의 채워진 [검색] 과
   나란히 선 상자 두 개가 되어 위계가 사라진다. 번지는 빛은 자리를 차지하지
   않으므로 그 문제가 아예 생기지 않는다.
   별은 SVG 라 text-shadow 가 닿지 않는다 — drop-shadow 로 따로 걸어야 글자와
   별이 같이 빛난다(하나만 걸면 별만 죽은 것처럼 보인다). */
/* 손이 닿으면 **밝아진다**. 상자도 빛도 그리지 않는다 — 글자와 별의 색만 또렷해진다.
   brightness 를 버튼에 한 번 걸면 글자(color)와 별(SVG fill)이 같이 밝아진다.
   따로 걸면 둘의 밝기가 어긋나 별만 뜨거나 죽어 보인다.
   saturate 를 같이 올리는 이유: brightness 만 키우면 흰 바탕에서 파랑이 옅어져
   '밝다' 가 아니라 '흐리다' 로 읽힌다. 채도를 함께 올려야 선명해진다. */
.hero-search .btn-ai {
  transition: filter .15s ease;
  /* 글자를 키운다. 옆의 [검색] 은 아이콘뿐이라 글자 크기로 다툴 상대가 없다.
     입력칸 글자(16px)보다 크지만 진한 파랑에 굵기 600 이라 입력 영역과 안 헷갈린다. */
  font-size: 18px;
}
/* 글자에 그라데이션 — 배경을 글자 모양으로 오려낸다. 채워진 버튼이 아니라서
   배경 그라데이션을 쓸 수 없다(쓰면 [검색] 과 같은 종류의 버튼이 되어 위계가 깨진다).
   위쪽 끝을 accent 그대로 두어 대비가 지금보다 나빠지지 않게 한다.
   별은 SVG 라 이 방식이 안 닿는다 — 자체 linearGradient 로 같은 두 색을 쓴다. */
.hero-search .btn-ai .btn-lbl {
  background: linear-gradient(180deg, var(--accent), var(--accent-deep));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;   /* 사파리는 color:transparent 만으로는 안 뚫린다 */
}
.hero-search .btn-ai:hover,
.hero-search .btn-ai:focus-visible,
.hero-search .btn-ai:active {
  filter: brightness(1.28) saturate(1.35);
}
@media (prefers-reduced-motion: reduce) {
  .hero-search .btn-ai { transition: none; }
}

/* gap:0 만으로는 안 붙는다 — 별 path 가 24 viewBox 안에서 좌우 4씩 비어 있어
   20px 로 그리면 글자 쪽에 3px 남는다. 그만큼 당겨 실제로 맞닿게 한다. */
.hero-search .btn-ai svg { width: 26px; height: 26px; flex: none; margin-left: -3px; }
/* 아이콘 하나만 든 정사각 버튼. 여백을 위아래와 같은 9px 로 두면 18px 아이콘과
   합쳐 36px 정사각이 된다 — [AI] 와 높이가 어긋나지 않는다.
   아이콘은 **헤더 돋보기와 같은 18px** 이다. 키우면 선 굵기까지 굵어져 접혔을 때
   메뉴의 그것과 다른 아이콘으로 보인다 — '이어지는 듯' 을 만드는 건 이 값이다. */
.hero-search .btn-search {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 7px;
  /* [AI] 와 같은 방식 — 배경 없이 그림만 남는다. 그라데이션은 돋보기 **선**에
     걸린다(SVG 안 linearGradient). 선에 거는 것이라 CSS 로는 안 되고 마크업에 있다.
     채웠다 비웠다 하면 두 버튼의 위계가 사라지지만, 검색창 자체가 이미 파란
     테두리로 서 있어 '여기가 검색' 이라는 신호는 창이 진다. */
  background: transparent;
  color: var(--accent);
}
/* [AI] 와 **같은 반응**을 준다 — 나란히 선 두 버튼이 다르게 반응하면 한쪽이
   고장 난 것처럼 보인다. 값도 전환 시간도 같은 것을 쓴다.
   채워진 버튼이라 밝아지면 파랑이 옅어지는데, 채도를 함께 올려 색이 죽지 않게 한다.
   흰 아이콘 대비는 밝아진 뒤에도 3:1 을 넘어 아이콘 기준을 지킨다. */
.hero-search .btn-search { transition: filter .15s ease; }
.hero-search .btn-search:hover,
.hero-search .btn-search:focus-visible,
.hero-search .btn-search:active {
  filter: brightness(1.28) saturate(1.35);
}
@media (prefers-reduced-motion: reduce) {
  .hero-search .btn-search { transition: none; }
}

.hero-note { margin: 9px 0 0; font-size: 12.5px; color: var(--text-4); }
/* 문장은 옅은 회색인데 링크만 먹색·굵게 세운다. 이 줄에서 누를 수 있는 건 이것
   하나뿐이라, 같은 회색으로 두면 안내 문구에 묻혀 아무도 안 누른다.
   파랑을 안 쓰는 건 사이트 규칙이다(글 속 링크는 색으로 튀지 않는다) —
   대신 굵기와 명도로 세운다. */
.hero-note a { color: var(--text); font-weight: 700; }


/* ---- 섹션 ---- */
/* **섹션 사이 간격은 --sect-gap 하나가 정한다.**
   한때 네 규칙(.sect · .sect:last-child · .sect-2up > .sect:last-child · 좁은 화면
   .sect)이 22 · 0 · 22 · 18 을 서로 덮고 있었다. 그래서 "간격을 조금 늘리자" 가
   어느 값을 바꾸는 일인지 화면만 보고는 알 수 없었다.

   좌우 쌍(.sect-2up)은 **묶음이 간격을 갖고 안쪽 섹션은 0** 이다. 안쪽이 각자
   갖고 있으면 좌우 칸 높이가 달라질 때 아래 여백도 따라 달라진다. */
.sect { margin-bottom: var(--sect-gap); }
.sect-2up { margin-bottom: var(--sect-gap); }
.sect-2up > .sect { margin-bottom: 0; }

/* ---- 발줄 — 목록을 보고 나서 하는 것 ----
   '레버리지 포함'(범위 넓히기)과 '전체 →'(더 보기)는 목록을 읽은 뒤에 누른다.
   제목 줄에는 보는 것(제목·설명·기준일·구간)만 두고 이 둘은 아래로 내렸다.

   위는 붙이고 아래는 벌린다. 예전처럼 위아래가 20:22 로 비슷하면 위아래 어느
   판의 조작인지 읽히지 않는다 — 붙은 쪽이 주인이라는 것이 한눈에 보여야 한다.
   아래 여백은 .sect 의 padding 으로 준다. 발줄에 margin-bottom 을 걸면
   .sect 의 margin-bottom(22px)과 상쇄돼 큰 쪽만 남아 값이 늘지 않는다. */
.sect-foot {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 0;
  /* 오른쪽 끝을 목록의 값 열에 맞춘다 — 판 여백 + 행 여백 16px.
     발줄은 .sect 의 직계 자식이라 그냥 두면 섹션 끝까지 나가 값보다 그만큼 튄다.
     판 여백은 이제 0 이므로(위 .tabs/.mvwrap/.hi-card) 남는 것은 행 여백뿐이다.
     예전에는 판 여백 + 16 이었고, 판을 0 으로 당긴 뒤에도 그 계산을 두면 발줄만
     값보다 20px(좁은 화면 12px) 왼쪽에 선다. */
  padding-right: 16px;
}
.sect:has(.sect-foot) { padding-bottom: 12px; }
/* 테마는 히트맵 칸이 판 안쪽 끝까지 차서 행 여백이 없다 — 판 여백만큼만. */
.sect:has(.panel-tight) .sect-foot { padding-right: 16px; }
.sect:last-child,
.sect-2up:last-child { margin-bottom: 0; }
/* 제목 줄과 그 아래 판 사이 간격은 **여기 하나가 정한다**(margin-bottom).
   판 쪽 margin-top 은 0 이다 — 두 곳이 나눠 가지면 화면에서 본 값과 고칠 값이
   따로 놀아 매번 엉뚱한 데를 조이게 된다. */
.sect-head {
  display: flex;
  align-items: center;      /* 제목·버튼 높이가 달라 baseline 이면 어긋난다 */
  flex-wrap: wrap;
  gap: 8px;
  /* 알약이 이 줄로 올라오면서 제목과 목록이 한 덩어리로 읽혀야 한다.
     예전 14px 은 알약 줄이 목록 위에 따로 있을 때의 값이다. */
  margin-bottom: 4px;
}
/* 섹션 제목 옆 기준일. 값이 '지금 시세' 로 오해되지 않게 붙인다.
   제목·도움말과 같은 줄에 두되 눈에 먼저 들지 않도록 작고 흐리게. */
.sect-asof {
  color: var(--text-4);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.sect-head h2 {
  margin: 0;
  margin-right: 2px;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #111318;           /* 검정. 본문 잉크(#232433)보다 한 단계 더 진하게 */
}
.sect-desc { font-size: 12.5px; color: var(--text-3); }
.sect-link { margin-left: auto; font-size: 12.5px; color: var(--text-3); }
.sect-link:hover { text-decoration: underline; text-decoration-color: var(--text);}
.sect-note { margin: 12px 0 0; font-size: 12px; line-height: 1.7; color: var(--text-3); }
.b-dark .sect-head h2 { color: #fff; }
.b-dark .sect-desc { color: #78829a; }

.foot-note {
  padding: 10px 16px;
  margin: 0;
  border-top: 1px solid var(--border-soft);
  background: #fcfcfd;
  border-radius: 0 0 var(--radius) var(--radius);
  font-size: 11.5px;
  line-height: 1.7;
  color: var(--text-3);
}

/* 카드 **맨 위**에 붙는 같은 성격의 줄. 테두리와 둥근 모서리만 위아래를 뒤집는다. */
/* 히트맵 아래의 색 범례 한 줄. 왼쪽 끝을 타일과 맞춘다 — 판 여백(8) + 히트맵
   여백(8) = 16px 이다. 가운데 정렬로 두었더니 어느 것에도 걸리지 않아 떠 보였다. */
.heat-legend {
  /* 히트맵 **위**에 선다(2026-09-08). 여백을 뒤집었다 — 위는 머리줄이 이미
     간격을 갖고 있고, 아래는 타일과 붙지 않게 띄운다. */
  padding: 2px 16px 6px;
  margin: 0;
  text-align: left;
  font-size: 11.5px;
  line-height: 1.7;
  color: var(--text-4);
}
/* 색띠 양 끝의 경계값("-3% 미만", "+3% 이상"). 색과 붙어 있어야 무엇의 값인지
   읽히므로 띠 바로 옆에 두고, 숫자가 색보다 세지 않게 흐린 글씨로 둔다. */
.legend .lg-end { font-weight: 400; color: var(--text-4); white-space: nowrap; }

/* ---- 시장 지수 ---- */
.idx { display: grid; grid-template-columns: minmax(0, 1fr); }
/* 이름·값·등락률을 세로로만 쌓으면 오른쪽이 통째로 비고, 그 빈 자리 때문에
   줄 간격이 실제보다 벌어져 보인다. 이름은 왼쪽·값은 오른쪽에 두어 폭을 쓰고,
   등락률은 아래에서 양끝으로 펼친다. */
.idx > .idxcard {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 3px 10px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--border-soft);
}
.idx > .idxcard:last-child { border-bottom: 0; }
/* 카드가 <a> 다(2026-09-09). 링크 기본꼴을 지운다 — 안에 등락색(빨강·파랑)이
   이미 있어 링크색이 얹히면 그 뜻이 흐려지고, 이 사이트에서 파랑은 AI 자리다.
   누를 수 있다는 것은 색이 아니라 **바탕이 도는 것**으로 알린다(표 행과 같은 방식).
   `a` 는 기본이 inline 이라 위 규칙의 display:grid 가 반드시 있어야 한다. */
.idx > .idxcard { color: inherit; text-decoration: none; }
.idx > .idxcard:hover { background: var(--surface-tint); }
.idx > .idxcard:hover .idx-nm { text-decoration: underline;
                                text-decoration-color: var(--text); }
/* 이름과 값을 같은 크기로 둔다. 한 줄에 나란히 서면 크기가 다른 순간
   한쪽이 부속처럼 보이는데, 둘 다 읽어야 하는 정보라 위계를 두지 않는다. */
.idx-nm,
.idx-v { margin: 0; font-size: 19px; font-weight: 700; letter-spacing: -0.02em; }
.idx-nm { grid-column: 1; color: var(--text); }
.idx-v { grid-column: 2; }
.idx-chg {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;          /* 자리가 모자라면 **쌍 단위로** 다음 줄로 내려간다 */
  justify-content: space-between;
  gap: 8px;
  row-gap: 3px;
  margin: 2px 0 0;
  font-size: 13px;
}
/* 라벨과 숫자는 한 덩어리다. 줄바꿈을 막지 않으면 좁은 폭에서 '일' 만 남고 값이
   다음 줄로 떨어져, 위 칸의 값과 아래 칸의 라벨이 짝지어 보인다 — 태블릿 세로에서
   실제로 그랬다. flex 아이템이 줄어들지 않게 두는 것도 같은 이유다. */
.idx-chg span {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  flex: 0 0 auto;
  white-space: nowrap;
}
.idx-chg em { font-style: normal; color: var(--text-4); font-size: 11.5px; }
.idx-chg b { font-weight: 700; }

/* ---- 테마 히트맵 ---- */
/* **최대 세 줄이다.** 한 줄에 몇 칸이 들어가는지는 폭이 정하고(auto-fill), 줄 수는
   여기가 정한다. 좁아지면 칸이 아래로 밀리는 대신 상자가 세 줄에서 잘린다.

   높이를 calc 로 못 박는다. grid-auto-rows:0 으로 넘침 줄을 접는 방법도 있지만
   줄 간격은 그대로 남아 좁은 화면에서 빈 띠가 20px 까지 생긴다.
   타일 이름은 말줄임이라 두 줄이 되지 않으므로 줄 높이가 흔들리지 않는다. */
.heat {
  --heat-row: 72px;
  --heat-gap: 4px;
  --heat-pad: 8px;   /* 타일 자체가 이미 여백을 갖는다 — 카드가 한 겹 더 두를 이유가 없다 */
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: var(--heat-gap);
  padding: var(--heat-pad);
}
/* **홈에서만 세 줄이다.** /theme/ 는 같은 .heat 를 쓰면서 분류를 전부 보여주는 게
   일이라, 여기에 걸면 72칸이 세 줄로 잘린다 — 실제로 그렇게 잘랐다가 되돌렸다.
   그래서 표식(.heat-3)을 단 곳에만 건다.

   세 줄만 실제 높이를 갖고 넘치는 줄은 0 으로 접는다. max-height 만으로는 계산이
   몇 px 만 어긋나도 넷째 줄이 살짝 비친다. 둘을 겹쳐 걸면 접힌 줄에 보여줄 높이가
   없어 계산이 어긋나도 비칠 것이 없다. */
/* **홈 히트맵은 세 줄까지다.** /theme/ 는 같은 .heat 로 분류를 전부 보여주는 게
   일이라 표식(.heat-3)을 단 곳에만 건다.

   ★ 잘라내지 않고 **없앤다.** 앞서 세 번 잘라내기로 시도했고 세 번 다 넷째 줄이
   비쳤다 — max-height 계산, 넘침 줄 접기, 타일 min-height 풀기. 셋 다 "어디서 자를지"
   를 픽셀로 맞추는 방식이라, 맞는 폭에서는 멀쩡하고 어긋나는 폭·기기에서만 샜다.
   내가 재본 자리에서는 늘 맞아 보였다.

   그래서 넘치는 타일을 display:none 으로 레이아웃에서 뺀다. 없는 것은 비칠 수 없다.
   폭 구간마다 한 줄에 드는 칸 수가 정해지므로(아래 값은 실측), 3줄치만 남기고 끊는다.

   **minmax 값이나 gap 을 바꾸면 이 숫자들도 다시 재야 한다.** 전환 폭이 움직인다. */
/* 구간마다 **되살린 뒤 다시 끊는다.** display:none 은 겹쳐 쌓이기만 하고 저절로
   풀리지 않는다 — 넓은 구간에서 'n+10 부터 숨김' 만 쓰면 앞 구간이 숨긴 7·8·9 가
   그대로 숨어 있어 어느 폭에서나 6개만 남는다(실제로 그렇게 났다).

   되살림에도 :nth-child 를 붙인다. 안 붙이면 특이도가 (0,1,1) 이라 숨김 규칙
   (0,2,1) 에 진다 — 미디어쿼리 안에 있어도 마찬가지다. 조건은 특이도를 안 올린다.
   둘을 같은 (0,2,1) 로 맞춰야 **자리 순서**로 갈려서 의도대로 동작한다. */
.heat-3 > a:nth-child(n+7) { display: none; }                        /* 2칸 × 3줄 = 6 */
@media (min-width: 380px) { .heat-3 > a:nth-child(n+1) { display: flex; }  .heat-3 > a:nth-child(n+10) { display: none; } }  /* 3칸 */
@media (min-width: 483px) { .heat-3 > a:nth-child(n+1) { display: flex; }  .heat-3 > a:nth-child(n+13) { display: none; } }  /* 4칸 */
@media (min-width: 586px) { .heat-3 > a:nth-child(n+1) { display: flex; }  .heat-3 > a:nth-child(n+16) { display: none; } }  /* 5칸 */
@media (min-width: 641px) { .heat-3 > a:nth-child(n+1) { display: flex; }  .heat-3 > a:nth-child(n+13) { display: none; } }  /* 4칸 — 최소폭이 120px 로 커진다 */
@media (min-width: 676px) { .heat-3 > a:nth-child(n+1) { display: flex; }  .heat-3 > a:nth-child(n+16) { display: none; } }  /* 5칸 */
@media (min-width: 800px) { .heat-3 > a:nth-child(n+1) { display: flex; }  .heat-3 > a:nth-child(n+19) { display: none; } }  /* 6칸 */
/* **7칸으로 못 박는다**(2026-09-08 지시: "히트맵 3줄 다 채워주고").
   auto-fill 로 두면 판이 988px 을 넘는 순간(뷰포트 약 1,060px) 여덟 칸이 되는데,
   타일이 21개라 8+8+5 로 마지막 줄이 세 칸 빈다. 21 = 7 × 3 이라 일곱 칸이면
   어느 넓은 폭에서든 세 줄이 정확히 찬다.
   타일 수를 늘려 여덟 칸을 채우는 길도 있었지만, 그러려면 3종목 미만 분류까지
   끌어와야 한다(3종목 이상이 22개뿐이다) — 두 종목의 평균을 한 칸으로 세우면
   히트맵이 말하는 '이 분류가 움직였다' 가 흔들린다. 칸을 줄이는 쪽이 맞다.
   **_HOME_THEME_MAX 를 바꾸면 이 7 도 함께 봐야 한다.** 21 = 7 × 3 이 전제다. */
@media (min-width: 924px) {
  .heat-3 > a:nth-child(n+1) { display: flex; }
  .heat-3 { grid-template-columns: repeat(7, minmax(0, 1fr)); }
}
.heat a {
  display: flex; flex-direction: column; justify-content: space-between;
  min-height: var(--heat-row);
  padding: 10px 11px 11px;
  border-radius: 6px;
  transition: transform .12s ease, filter .12s ease;
}
.heat a:hover { transform: translateY(-1px); filter: brightness(.97); text-decoration: underline; text-decoration-color: currentColor; }
/* 이름 줄: 이름(줄어듦) + 종목 수(고정). 이름만 말줄임한다. */
.heat .t {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.3;
  overflow: hidden;
  white-space: nowrap;
}
.heat .t > .c { flex: 0 0 auto; font-size: 10.5px; font-weight: 500; opacity: .72; }
/* 등락률은 한 줄을 통째로 쓴다. 숫자가 쪼개지면 읽을 수 없다. */
.heat .p {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

/* 발산형 7단계 — 중간값은 반드시 무채색(무지개 금지) */
.h-d3 { background: #1b4fa8; color: #fff; }
.h-d2 { background: #5c8ad1; color: #fff; }
.h-d1 { background: #bfd1e9; color: #12325c; }
.h-n0 { background: #edeff2; color: var(--text-2); }
.h-u1 { background: #f4ccc7; color: #6b1a15; }
.h-u2 { background: #de8a80; color: #fff; }
.h-u3 { background: #b32b23; color: #fff; }

/* 범례는 카드 하단(foot-note)으로 내렸다. 제목 줄은 "제목 + 물음표 + 오른쪽 액션"
   하나로 통일했고, 범례까지 넣으면 그 규칙이 깨진다. */
.foot-note { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.foot-note a { margin-left: auto; }
.legend { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; color: var(--text-4); }
.legend i { width: 18px; height: 9px; border-radius: 2px; display: inline-block;
            cursor: help; }   /* 올리면 그 색이 몇 %인지 나온다 */

/* ---- 탭 ---- */
/* **카드 껍데기를 탭 묶음이 쓴다.** 예전에는 알약 줄이 카드 밖 허공에 떠 있고
   그 아래에 카드가 따로 있었다 — 무엇을 고르는 알약인지 묶여 보이지 않는다.
   껍데기를 여기로 올리면 알약이 카드 안 맨 위에 앉는다.

   라디오·라벨·패널은 형제여야 `~` 선택자가 동작하므로 DOM 은 그대로 두고,
   껍데기만 .tabs 로 옮기고 안쪽 .card 에서는 벗긴다. 좌우 여백은 옮겨도 총합이
   같다 — 예전 20(카드)+16(li) = 지금 20(.tabs)+0(카드)+16(li). */
/* **껍데기는 한 겹이다.** .tabs 가 그 껍데기이고 안쪽 .card 는 아무 것도 두르지
   않는다. 한때 안쪽에도 판을 씌워 두 겹이 됐고, 그게 화면에서 이중 테두리로
   보였다 — 바깥 흰 판 위에 안쪽 회색 판이 얹힌 모양이었다.

   판은 흰색이고 테두리는 없다. 회색 바탕을 깔아 본 적이 있는데, 판을 세우는 게
   아니라 목록 전체를 어둡게 만들어 값이 뒤로 물러났다. 구조는 안쪽 구분선과
   섹션 제목이 이미 말한다. */
.tabs,
.mvwrap,
.hi-card {
  position: relative;
  background: var(--surface);
  border: 0;
  border-radius: var(--radius);
  /* **0 이다.** 판 위 간격은 .sect-head 의 margin-bottom 이 혼자 갖는다.
     한때 16px 이 여기 있었고, 그러는 동안 제목 줄 여백(14→4)과 판 안여백(14→4)만
     조여졌다 — 조인 쪽이 공간을 먹는 쪽이 아니어서 제목과 첫 줄 사이가 31px 로
     남아 있었다. 여백을 두 곳이 나눠 가지면 어느 쪽을 고쳐야 하는지가 매번
     불분명해진다. 한 곳이 갖는다. */
  margin-top: 0;
  /* 윗여백은 4px 만. 제목 줄이 이미 4px 을 띄우고, 예전에는 여기 14px 과
     안쪽 .ch 의 12px 이 겹쳐 글자 위에 26px 이 쌓였다.

     **좌우는 0 이다.** 판이 좌우 안여백을 가지면 목록 행이 제목(h2)보다 그만큼
     안쪽에서 시작한다 — 1280px 실측으로 제목 100px / 행 120px 이었고, 행 자신의
     좌우 여백(.lst li 16px)까지 더해 글자는 136px 에서 섰다. 화면에서는 제목만
     왼쪽으로 튀어나온 것처럼 보인다. 오른쪽 칼럼은 제목에도 같은 20px 을 줘서
     이미 맞아 있었으므로(둘 다 661px), 왼쪽을 제목 쪽으로 당겨 맞춘다.
     들여쓰기는 행이 갖는다(.lst li 16px) — 판과 행이 겹쳐 갖지 않는다.
     --panel-pad 는 그대로 둔다(위 :root 주석 참고). */
  padding: 4px 0 0;
  overflow: hidden;          /* 둥근 모서리 밖으로 행 호버 배경이 삐져나오지 않게 */
}

/* ---- 목록 판 — 바깥은 바탕으로, 안쪽은 선으로 ----
   판을 두르던 테두리를 걷고 옅은 바탕(#f2f4f6)이 그 일을 맡는다. 흰 밴드 위라
   바탕만으로 "여기부터 목록"이 읽히고, 화면에서 선 한 겹이 줄어 목록이 먼저 보인다.

   안쪽 구분선은 남긴다. 짝을 이루는 두 목록(상승|신고가, 순유입|순유출 …)은
   서로 다른 값이라 어디서 갈리는지가 분명해야 한다.

   구분선은 --border-soft 다. 판이 흰색이므로 옅은 선으로 충분하다. */
/* 껍데기 안쪽 카드는 껍데기가 없다 — 위 .tabs/.mvwrap 이 이미 판이다. */
.tabs > .tabpane > .card,
.mvwrap > .card {
  background: transparent;
  border: 0;
  border-radius: 0;
  margin-top: 0;
  padding: 0;
}
/* 탭이 없는 판(시장 지수·테마·신규 상장)은 카드 자신이 껍데기다. */
.card.idx,
.card.panel {
  background: var(--surface);
  border: 0;
  border-radius: var(--radius);
  overflow: hidden;
  margin-top: 0;   /* 위 .tabs 와 같은 이유 — 간격은 .sect-head 가 갖는다 */
  /* **안여백은 목록 판(.tabs 등)과 같은 값이다.** 여기만 14px 이었고, 그래서
     시장 지수는 제목 줄에서 첫 값까지 31px 인데 아래 목록 섹션들은 15px 이었다 —
     같은 페이지에서 제목이 한 칸에서만 동떨어져 보였다.
     판 규칙이 두 갈래로 나뉘어 있으면 한쪽만 조이는 일이 반복된다. 값을 맞춘다.
     아래 여백은 내용이 갖는다(.idx > .idxcard 13px · .lst li 8px).
     좌우 0 인 이유는 위 .tabs/.mvwrap/.hi-card 와 같다 — 내용이 제목 줄에 선다. */
  padding: 4px 0 0;
}
/* 테마 히트맵은 타일이 이미 자기 여백을 갖는다 — 판이 한 겹 더 두를 이유가 없다. */
.card.panel-tight { padding: 8px; }
/* 탭은 .pill 과 같은 모양이다(위). 줄바꿈 여백만 여기서 준다. */
/* ---- 구간 고르기 — 알약 하나 안에서 알약이 움직인다 ----
   예전에는 일간·주간·월간이 각자 테두리를 가진 알약 셋이었다. 셋 다 같은 무게로
   보여서 "지금 무엇을 보고 있는가" 가 눌린 색 하나에만 달려 있었다.

   껍데기를 하나 두고 안쪽 알약은 테두리를 벗는다. 그러면 켜진 칸의 진한 알약이
   껍데기 안을 옮겨 다니는 모양이 된다 — 고르는 것이 셋 중 하나라는 사실이
   모양으로 읽힌다.

   칸 너비는 1fr 씩 같다. 글자 수가 달라도 알약이 같은 폭으로 움직여야 미끄러지는
   느낌이 난다. 눌린 표시는 기존 .sect:has(...) 규칙이 그대로 맡는다. */
.mv-bar {
  display: inline-grid;
  grid-auto-flow: column;
  /* 칸을 **글자에 맞춘다**(auto). 1fr 로 똑같이 나누면 글자가 짧은 칸에 여백만 쌓인다 —
     차트 구간에서 '1개월'(31px)과 '1년'(19px)이 같은 51px 칸을 써서, '1년' 을 고르면
     19px 글자를 51px 검정이 감쌌다. 여백이 20 vs 32px 이라 같은 알약으로 안 보였다.

     홈은 일·주·월이 모두 12px 이라 auto 와 1fr 이 같은 그림이다 — 바꿔도 그대로다.
     칸이 선택에 따라 늘거나 줄지 않으므로 껍데기 폭도 흔들리지 않는다. */
  grid-auto-columns: auto;
  background: var(--surface-tint);
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  padding: 2px;
}
.mv-bar .tab {
  border: 0;
  background: transparent;
  margin: 0;
  /* 좌우는 필요한 만큼만. 껍데기가 셋을 묶고 있어 알약끼리 떨어질 이유가 없다 —
     테두리가 있던 시절의 여백(13px)을 그대로 두면 묶음이 쓸데없이 길어진다. */
  padding: 4px 10px;
  justify-content: center;
  transition: background .16s ease, color .16s ease;
}
.mv-bar .tab:hover { background: var(--surface); text-decoration: underline; text-decoration-color: var(--text); }

/* 신고가 목록은 종목명 · 일자 · 가격 셋뿐이다. 좁은 화면에서 한 줄에 들어가야
   하므로 오른쪽 두 칸을 필요한 만큼만 준다 — 목록 공통값(날짜 82 · 값 76)은
   네 칸짜리 목록에 맞춘 것이라 여기서는 헐겁다. */
.hi-card .lst li .lst-date { width: 56px; text-align: right; }
.hi-card .lst li .v { min-width: 62px; }
/* 머리줄 오른쪽에 붙이되, **끝선은 아래 숫자 열에 맞춘다.**
   그냥 오른쪽 끝에 두면 알약이 칼럼 경계(좌우 쌍의 구분선)에 붙는다. 눈에는 그
   선이 아니라 그 안쪽 숫자들이 이루는 세로줄이 "오른쪽" 으로 보인다.
   들여쓰는 값은 판 안여백 + 행 좌우여백(16) 이다 — 목록 값의 오른쪽 끝이 서는
   자리와 같고, 아래 .sect-foot 이 쓰는 계산과 같다.
   판 안여백은 이제 0 이라(위 .tabs/.mvwrap/.hi-card) 남는 것은 행 여백 16px 뿐이다.
   판 여백을 여기 더하면 알약만 값보다 20px(좁은 화면 12px) 왼쪽에 선다 —
   641px 미만에서 8px 어긋나 있던 예전 사고와 같은 모양이 된다. */
.sect-head .mv-bar { margin-left: auto; margin-right: 16px; }
.tabpane { display: none; }

/* 패널 전환 — 라디오와 패널은 여전히 .tabs 안 형제라 `~` 가 그대로 듣는다.
   블록을 새로 만들면 여기에 세 줄을 반드시 더한다. 규칙이 키마다 열거돼 있어
   빠뜨리면 패널이 영영 열리지 않는다 — 마크업도 데이터도 멀쩡한데 화면만
   비어서 원인을 찾기 어렵다(2026-08-26 괴리율·추적오차 섹션에서 실제로 겪음). */
#ftab-fd:checked ~ .tabpane-fd,
#ftab-fw:checked ~ .tabpane-fw,
#ftab-fm:checked ~ .tabpane-fm,
#otab-od:checked ~ .tabpane-od,
#otab-ow:checked ~ .tabpane-ow,
#otab-om:checked ~ .tabpane-om,
#ttab-td:checked ~ .tabpane-td,
#ttab-tw:checked ~ .tabpane-tw,
#ttab-tm:checked ~ .tabpane-tm,
#stab-sd:checked ~ .tabpane-sd,
#stab-sw:checked ~ .tabpane-sw,
#stab-sm:checked ~ .tabpane-sm,
#qtab-qd:checked ~ .tabpane-qd,
#qtab-qw:checked ~ .tabpane-qw,
#qtab-qm:checked ~ .tabpane-qm,
#rtab-rd:checked ~ .tabpane-rd,
#rtab-rw:checked ~ .tabpane-rw,
#rtab-rm:checked ~ .tabpane-rm { display: block; }

/* 눌린 표시 — 라벨이 제목 줄로 나가면서 라디오의 형제가 아니게 됐다.
   `~` 도 `+` 도 못 닿으므로 둘을 함께 품는 .sect 를 기준으로 올린다.
   **블록을 새로 만들면 여기와 위 패널 규칙 두 곳 모두에 추가한다.** */
.sect:has(#mvtab-d:checked) .sect-head label[for="mvtab-d"],
.sect:has(#mvtab-w:checked) .sect-head label[for="mvtab-w"],
.sect:has(#mvtab-m:checked) .sect-head label[for="mvtab-m"],
.sect:has(#ftab-fd:checked) .sect-head label[for="ftab-fd"],
.sect:has(#ftab-fw:checked) .sect-head label[for="ftab-fw"],
.sect:has(#ftab-fm:checked) .sect-head label[for="ftab-fm"],
.sect:has(#ttab-td:checked) .sect-head label[for="ttab-td"],
.sect:has(#ttab-tw:checked) .sect-head label[for="ttab-tw"],
.sect:has(#ttab-tm:checked) .sect-head label[for="ttab-tm"],
.sect:has(#qtab-qd:checked) .sect-head label[for="qtab-qd"],
.sect:has(#qtab-qw:checked) .sect-head label[for="qtab-qw"],
.sect:has(#qtab-qm:checked) .sect-head label[for="qtab-qm"],
.sect:has(#stab-sd:checked) .sect-head label[for="stab-sd"],
.sect:has(#stab-sw:checked) .sect-head label[for="stab-sw"],
.sect:has(#stab-sm:checked) .sect-head label[for="stab-sm"],
.sect:has(#rtab-rd:checked) .sect-head label[for="rtab-rd"],
.sect:has(#rtab-rw:checked) .sect-head label[for="rtab-rw"],
.sect:has(#rtab-rm:checked) .sect-head label[for="rtab-rm"],
.sect:has(#otab-od:checked) .sect-head label[for="otab-od"],
.sect:has(#otab-ow:checked) .sect-head label[for="otab-ow"],
.sect:has(#otab-om:checked) .sect-head label[for="otab-om"] {
  border-color: var(--text); background: var(--text); color: #fff; font-weight: 600;
}
/* 키보드 초점. 예전 input:focus-visible + .tab 은 인접형이라 더는 안 걸린다. */
.sect:has(#mvtab-d:focus-visible) .sect-head label[for="mvtab-d"],
.sect:has(#mvtab-w:focus-visible) .sect-head label[for="mvtab-w"],
.sect:has(#mvtab-m:focus-visible) .sect-head label[for="mvtab-m"],
.sect:has(#ftab-fd:focus-visible) .sect-head label[for="ftab-fd"],
.sect:has(#ftab-fw:focus-visible) .sect-head label[for="ftab-fw"],
.sect:has(#ftab-fm:focus-visible) .sect-head label[for="ftab-fm"],
.sect:has(#ttab-td:focus-visible) .sect-head label[for="ttab-td"],
.sect:has(#ttab-tw:focus-visible) .sect-head label[for="ttab-tw"],
.sect:has(#ttab-tm:focus-visible) .sect-head label[for="ttab-tm"],
.sect:has(#qtab-qd:focus-visible) .sect-head label[for="qtab-qd"],
.sect:has(#qtab-qw:focus-visible) .sect-head label[for="qtab-qw"],
.sect:has(#qtab-qm:focus-visible) .sect-head label[for="qtab-qm"],
.sect:has(#stab-sd:focus-visible) .sect-head label[for="stab-sd"],
.sect:has(#stab-sw:focus-visible) .sect-head label[for="stab-sw"],
.sect:has(#stab-sm:focus-visible) .sect-head label[for="stab-sm"],
.sect:has(#rtab-rd:focus-visible) .sect-head label[for="rtab-rd"],
.sect:has(#rtab-rw:focus-visible) .sect-head label[for="rtab-rw"],
.sect:has(#rtab-rm:focus-visible) .sect-head label[for="rtab-rm"],
.sect:has(#otab-od:focus-visible) .sect-head label[for="otab-od"],
.sect:has(#otab-ow:focus-visible) .sect-head label[for="otab-ow"],
.sect:has(#otab-om:focus-visible) .sect-head label[for="otab-om"] { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---- 등락 상위 — 알약 두 묶음, 판 하나 ---- */
/* 상승(일·주·월)과 신고가(3·6개월·1년)는 축이 달라 알약을 나눠 갖지만, 목록은 한
   테두리 안에서 세로 구분선으로만 갈린다(순유입|순유출과 같은 모양).

   `~` 대신 `:has()` 를 쓴다. `~` 는 형제만 훑어서 라디오·알약·목록이 한 줄에
   늘어서야 하는데, 그러면 좌우 칼럼을 만들 수가 없다. `:has()` 는 그 제약이 없어
   라디오를 판 바깥에 두고도 안쪽 패널을 켤 수 있다. */
.mvwrap .pane { display: none; }
.mvwrap:has(#mvtab-d:checked) .pane-d,
.mvwrap:has(#mvtab-w:checked) .pane-w,
.mvwrap:has(#mvtab-m:checked) .pane-m { display: block; }
/* 등락 알약의 눌린 표시는 위 .sect:has() 묶음이 함께 맡는다.
   모양(껍데기 하나 + 안쪽 알약)은 '구간 고르기' 절에서 한 번만 정한다 —
   여기에 또 적어 두었더니 뒤에 와서 그 규칙을 덮고 있었다. */

/* 신고가 기준일("2026.05.28 이후 최고"). 한때 목록 위에 한 줄을 통째로 썼는데,
   그 줄이 신고가 쪽에만 있어 좌우 칼럼의 첫 종목 높이가 어긋났다. 제목 줄에
   붙여 "무엇의 신고가인지" 를 설명 버튼 바로 뒤에서 말한다. */
.board .ch .hcn { font-size: 11.5px; font-weight: 400; color: var(--text-4); }

/* 카드 제목 옆 구간 표시("1개월 합계"). 제목과 같은 줄에 작게 붙어, 지금 보고 있는
   탭이 무엇인지 탭 버튼을 다시 올려다보지 않아도 알게 한다. */
.ch .cn { margin-left: 4px; font-size: 11.5px; font-weight: 400; color: var(--text-4); }

/* ---- 등락 상위 ---- */
/* 한 장의 카드 안에 두 목록을 나란히 놓는 판. 등락 상위(상승|하락)가 쓰던 모양을
   순유입|순유출, 거래대금|괴리율에도 쓴다 — 짝을 이루는 두 목록을 카드 두 장으로
   나누면 배경이 끊겨 서로 다른 이야기처럼 보인다. 좁은 화면에서는 위아래로 쌓이고
   구분선이 가로줄로 바뀐다.
   .mv 는 이 판 위에 목록 스타일만 얹는다(제목·순번·값). */
.board { display: grid; grid-template-columns: minmax(0, 1fr); }
/* 좁은 화면에서는 한 카드 안에 목록이 세로로 쌓이므로 구분선이 필요하다.
   2단으로 갈라지는 900px 이상에서는 카드 테두리가 그 일을 하므로 아래에서 끈다. */
.board > div { border-bottom: 1px solid var(--border-soft); }
.board > div:last-child { border-bottom: 0; }
/* 상승·신고가 카드의 제목도 다른 섹션과 같은 .ch 를 쓴다. 예전에는 .mv h3 로
   따로 두었는데(11.5px 회색), 선택자 우선순위가 .ch 보다 높아 클래스를 바꿔도
   크기가 안 바뀌는 함정이 됐다 — 규칙 자체를 지운다. */
/* ---- 목록 행의 왼쪽 안여백은 0 이다 (사이트 전체) ----
   행에 좌우 16px 을 주면 **종목명이 제목보다 16px 안쪽에서 시작한다.** 판의 여백을
   0으로 당겨 놓고도 이 값이 남아 여전히 들어가 보였다 — 좁은 화면만이 아니라
   데스크탑에서도 그랬다(1280 에서 제목 100 · 이름 116).

   **0 이 아니라 1px 이다.** 완전히 0으로 두면 글자가 판 밖으로 반 픽셀 삐져나온 것처럼
   보인다 — 글꼴의 왼쪽 사이드베어링이 글자마다 달라서, 'K' 처럼 세로획으로 시작하는
   이름은 상자 경계에 딱 붙고 그게 밀려나온 것처럼 읽힌다. 1px 이면 그 착시가 사라지고
   제목 줄과의 어긋남은 눈에 띄지 않는다.

   오른쪽은 값이 끝에 붙지 않도록 그대로 둔다. 행 배경(:hover)이 왼쪽 끝까지 닿는
   것도 의도한 결과다.

   카드 제목(.ch)도 함께 0 으로 한다 — 이것만 16px 이 남으면 행이 제목보다
   왼쪽으로 튀어나온다. */
.mv ol { list-style: none; margin: 0; padding: 0 0 10px; }
.mv li { display: flex; align-items: center; gap: 10px; padding: 7px 16px 7px 1px; font-size: 13px; }
.mv li:hover { background: #fafbfd; }
/* 종목명 자체는 아래 공통 규칙(.lst li .n, .mv li .n)이 맡는다 — 목록마다 따로
   적으면 한쪽만 고쳐지고, 실제로 홈은 랭크가 이미 푼 '두 줄로 넘기기' 를 못 받고
   있었다. 강조색을 입지 않는 것도 거기서 한 번에 정한다. */
.mv li .n:hover { text-decoration: underline; text-decoration-color: var(--text);}
.mv li .p { flex: none; font-weight: 600; font-size: 13px; }

/* ---- 거래대금 · 괴리율 ---- */

/* 짝 없는 카드가 폭을 다 쓸 때(신규 상장) 목록을 두 단으로 흘린다. 한 단으로 두면
   이름과 값 사이가 800px 넘게 비어 옆 2단 카드들과 리듬이 어긋난다.
   기본값은 손대지 않는다(좁은 화면 = 한 단). 두 단은 아래 641px 분기에서만 켠다.

   순자산 블록이 홈에서 빠질 때 한 번 지웠다가 여기서 되살렸다 — 쓰는 곳이 곧
   생길 걸 알면서 지운 것이 잘못이었다. */
.lst-2col { padding-bottom: 0; }

/* 신규 상장 목록의 상장일. 목록 맨 앞의 좁은 칸을 쓴다.
   시간순 목록이라 등수를 붙이지 않는다(다른 목록도 이제 등수를 쓰지 않는다 —
   순위는 위에서 아래라는 배치가 이미 말하고, 그 칸은 종목명이 쓰는 편이 낫다). */
/* 날짜는 한 줄이다. 폭이 모자라면 줄바꿈이 나는데, 그러면 그 행만 높이가 달라져
   목록이 어긋난다 — 넘치면 잘리는 쪽이 낫다(전체 날짜는 title 에 있다). */
.lst li .lst-date { flex: none; width: 56px; color: var(--text-4); font-size: 11.5px;
                    white-space: nowrap; }
.board > div > .ch:first-child { padding-top: 0; }   /* 껍데기 여백과 겹치던 몫 */
.ch { margin: 0; padding: 12px 16px 4px 1px; font-size: 17px; font-weight: 700; letter-spacing: -0.02em; color: #111318; }
.lst { list-style: none; margin: 0; padding: 0 0 10px; }
.lst li { display: flex; align-items: center; gap: 10px; padding: 8px 16px 8px 1px; font-size: 13px; }
.lst li:hover { background: #fafbfd; }
/* ---- 종목명은 한 규칙이다 ----
   홈·랭크 허브의 목록 종목명(.lst · .mv)이 모두 이 규칙 하나를 쓴다. 예전에는
   목록마다 따로 적혀 있었고, 그래서 랭크에서 푼 '두 줄로 넘기기' 가 홈에는
   들어가지 않은 채로 남았다 — 390px 홈에서 46개 이름 중 16개가 말줄임으로
   끝났다(랭크는 0개). 이름이 잘리면 무엇을 담은 상품인지가 사라진다.
   'KODEX ESG종합채권(A-이상)액티브' 에서 뒤쪽 괄호가 곧 내용이다.

   **두 줄까지만 허용한다.** 세 줄이 되면 그 행만 눈에 띄게 커져 목록이
   들쭉날쭉해지고, 세 줄이 필요한 이름은 드물다. 그때는 그대로 말줄임이다.

   넓은 화면에서는 이름이 한 줄에 다 들어가므로(실측: 1280px 홈·랭크 모두 잘림 0)
   이 규칙이 켜져 있어도 화면은 그대로다. 그래서 폭으로 나누지 않는다 — 구간을
   나누면 경계마다 '어느 쪽 규칙인가' 를 다시 따져야 한다.
   줄 간격만 좁은 화면에서 조인다(아래 640px 이하). */
.lst li .n,
.mv li .n {
  flex: 1; min-width: 0;
  color: var(--text);        /* 종목명은 강조색을 입지 않는다 */
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  /* 줄을 **끝까지 채워서** 넘긴다. 기본 규칙은 낱말 경계에서만 끊어서, 첫 줄이
     'KODEX' 하나만 남고 뒤 덩어리가 통째로 둘째 줄로 갔다 — 첫 줄이 비었는데
     둘째 줄이 넘쳐 말줄임이 났다. 빈자리를 두고 잘리는 셈이다.
     한글은 글자 단위로 끊어도 읽히므로 break-all 이 맞다. */
  word-break: break-all;
}

/* 홈 목록의 이름 뒤 배지(개인·퇴직·액티브 …). 표(.table-scroll td.name)가 쓰는
   것과 **같은 치수**다 — 같은 뜻의 표시가 장마다 달라 보이면 안 된다.
   `.n` 이 두 줄 클램프에 `word-break: break-all` 이라, 배지에는 그것을 풀어
   '레버 / 리지' 로 쪼개지지 않게 한다(표 쪽에 건 규칙과 짝이다).
   이름이 길어 두 줄을 다 쓰면 배지가 클램프 밖으로 밀려 안 보인다. 그건 받아들인다 —
   배지는 이름을 밀어내고 설 만큼 중요하지 않고, 같은 값이 종목 상세와 목록 장에
   그대로 있다. */
.lst li .n .rowtags,
.mv li .n .rowtags { display: inline; word-break: normal; }
.lst li .n .rowtags .badge,
.mv li .n .rowtags .badge {
  display: inline-block;
  margin-left: 4px;
  padding: 0 5px;
  font-size: 10px;
  line-height: 1.6;
  white-space: nowrap;
  word-break: normal;
  vertical-align: 1px;
}
/* 배지 사이 1px — 표(.table-scroll td.name)에 건 것과 **같은 값**이다. 위 주석의
   "같은 치수다" 가 여기서도 유효한 근거는 잰 값이다: 글자 10px·패딩 0 5px 이 표와
   한 글자도 다르지 않고, 고치기 전 사이도 표 4.00px · 홈 4.00px 로 같았다. 한쪽만
   조이면 같은 배지 세 개가 홈에서는 4px, 목록 장에서는 1px 로 벌어져 보인다.
   홈은 이름이 그냥 텍스트라 이름↔첫 배지에 빈칸이 없고(실측 4.00px), 표는
   .row-code 뒤 줄바꿈 때문에 7.78px 이다. 그 차이는 원래 있던 것이고 이번에
   건드리지 않았다 — 줄인 것은 배지 사이 하나다. */
.lst li .n .rowtags .badge + .badge,
.mv li .n .rowtags .badge + .badge { margin-left: 1px; }
.lst li .n:hover { text-decoration: underline; text-decoration-color: var(--text);}
/* 값 칸은 **폭이 고정**이라야 세로줄이 맞는다. auto 로 두면 글자 수에 따라
   칸이 늘고 줄어 그 왼쪽에 있는 것들까지 행마다 밀린다. .num 이 오른쪽 정렬과
   tabular-nums 를 주므로, 폭만 고정하면 소수점까지 한 줄에 선다. */
.lst li .v { flex: none; min-width: 76px; font-weight: 600; font-size: 13px; cursor: help; }
.lst li .s { flex: none; width: 74px; text-align: right; font-size: 11.5px; color: var(--text-4); white-space: nowrap; }
/* **주요 값(.v)이 판 오른쪽 끝에 붙는다** (2026-09-08 지시). 보조 값(.s)이 뒤에
   붙는 목록에서는 주요 값이 그만큼(74px) 안쪽에 서서, 보조 값이 없는 목록
   (신고가 — 날짜와 종가뿐)과 숫자 세로줄이 어긋났다. 어느 쪽에 맞출지는 신고가
   쪽이다: 판 끝에 붙은 숫자가 기준선이고, 보조 값은 그 앞으로 들어간다.

   **마크업이 아니라 화면 순서만 바꾼다.** 원문 HTML 은 `종목명 → 주요값 → 보조값`
   그대로다 — 이 사이트가 재는 것이 원문을 읽는 수집기라, 종목명 바로 뒤에 주요
   숫자가 오는 순서를 화면 사정으로 흐트러뜨리지 않는다. 화면에서 둘의 자리를
   바꾸는 일은 flex 의 order 가 한다(둘 다 같은 줄의 형제다).

   날짜 칸(.lst-date)과 순위 문장(.sr-only)은 order 0 이라 지금 자리 그대로다. */
.lst li .s { order: 1; }
.lst li .v { order: 2; }

/* ---- 개발자 (다크 밴드) ---- */
.agent { display: grid; grid-template-columns: minmax(0, 1fr); }
.b-dark .card { background: #1d2331; border-color: #2b3244; }
.agent > div { padding: 20px 22px; }
.agent > div:first-child { border-bottom: 1px solid #2b3244; }
.agent h3 { margin: 0 0 8px; font-size: 13.5px; font-weight: 700; color: #fff; }
.agent p { margin: 0 0 12px; font-size: 13px; line-height: 1.7; color: #98a1b3; }
.agent .agent-links { margin: 0; }
.agent code { background: #2b3244; color: #d7dce6; border-radius: 4px; padding: 1px 6px; font-size: 12px; }
.agent a { color: #8fb0ff; }
.agent a:hover { color: #b6cbff; }
/* 이름 칸은 **가장 긴 이름에 맞춰** 정해진다(2026-09-30). 예전에는 96px 고정이라
   「종목 종합 JSON」(약 105px)만 두 줄로 꺾였다(사용자 지적 "종목종합 JSON 나오는데 즘
   이상한거 같은데"). ul 을 두 칸 격자로 두고 li 를 display: contents 로 풀어 이름·주소가
   그 격자에 바로 앉게 한다. 그래서 주소 칸의 왼쪽 끝이 세 줄 모두 같은 자리에 선다.
   이름은 꺾지 않고, 주소는 좁은 폭에서 넘치면 어디서든 끊는다. */
.agent ul { margin: 0; padding: 0; list-style: none; font-size: 12.5px;
            display: grid; grid-template-columns: max-content minmax(0, 1fr); column-gap: 14px; }
.agent ul li { display: contents; }
.agent ul li > * { padding: 4px 0; }
.agent ul li b { font-weight: 600; color: #dde2ec; white-space: nowrap; }
.agent .mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; color: #7a8497;
               overflow-wrap: anywhere; }

@media (min-width: 641px) {
  .band { padding: 30px 0; }
  .hero { padding: 16px 0 0; }
  .idx { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .idx > .idxcard { border-bottom: 0; border-right: 1px solid var(--border-soft); }
  .idx > .idxcard:last-child { border-right: 0; }
  /* 3열이 되면 칸이 좁아진다. 양끝 정렬 대신 왼쪽에 모아 붙인다. */
  .idx-chg { justify-content: flex-start; gap: 13px; }
  /* 아랫줄을 왼쪽에 모았으면 윗줄도 같은 규칙을 따라야 한다. 값만 칸 오른쪽 끝으로
     밀면 두 줄의 오른쪽 끝이 100px 어긋나(등락률은 430, 값은 530에서 끝났다)
     칸 가운데가 통째로 비어 보인다. 값을 이름 바로 옆에 붙인다. */
  .idx > .idxcard { grid-template-columns: auto minmax(0, 1fr); }
  /* grid-auto-flow:column + 5행 고정 → 앞 5개가 왼쪽 단을 채우고 나머지가 오른쪽으로
     넘어간다. 위→아래로 읽히는 순서 그대로다(좌→우로 지그재그가 아니다). */
  .lst-2col {
    display: grid;
    grid-auto-flow: column;
    /* 6종목을 3+3 으로 흘린다(pages._NEW_LISTING_ROWS). 개수의 절반이다.
       CSS 는 개수를 모르므로 그쪽을 바꾸면 이 값과 아래 구분선 위치도 같이
       고쳐야 한다. 홀수면 오른쪽 단이 짧아져 좌우가 어긋난다. */
    grid-template-rows: repeat(3, auto);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding-bottom: 8px;
  }
  /* 두 단의 경계. 없으면 오른쪽 값과 왼쪽 이름이 한 줄처럼 붙어 읽힌다. */
  .lst-2col li:nth-child(n+4) { border-left: 1px solid var(--border-soft); }
  .agent { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
  .agent > div:first-child { border-bottom: 0; border-right: 1px solid #2b3244; }
}

/* 등락 2열은 900px 부터. 641px 에서 바로 2열로 가면 긴 종목명이 뭉개진다. */
@media (min-width: 900px) {
  /* 두 섹션을 좌우에 세우되 **박스 모양은 그대로 둔다** — 사이를 세로 구분선
     하나로 가른다. 다른 블록(순유입|순유출 …)의 좌우 칼럼과 같은 모양이라,
     섹션이 둘로 갈렸다는 사실이 화면에서는 드러나지 않는다.
     선은 판이 아니라 섹션에 긋는다. 판에만 그으면 머리줄 옆이 비어 선이 중간에
     끊긴 것처럼 보인다 — 머리줄부터 목록 끝까지 한 줄로 내려가야 한 상자다. */
  .sect-2up { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0;
              align-items: stretch; grid-template-rows: auto 1fr auto; }
  /* 두 칸이 판의 같은 행을 쓰게 한다. 각자 [머리줄·목록·발줄] 을 따로 쌓으면
     한쪽 머리줄이 접히거나 알약 줄이 하나 더 있을 때 그만큼 목록 시작이 내려가
     좌우 행이 어긋난다(실측 34.5px). subgrid 면 머리줄 행 높이가 둘 중 큰 쪽으로
     함께 정해져 목록이 언제나 같은 높이에서 시작한다.
     .sect 가 상자를 유지하므로 가운데 구분선(border-left)도 그대로 산다. */
  .sect-2up > .sect { display: grid; grid-template-rows: subgrid; grid-row: span 3; }
  /* 머리줄이 늘어난 행을 채워도 글자는 위에 붙는다. */
  .sect-2up > .sect > .sect-head { align-content: flex-start; }
  /* 판이 남은 높이를 채워야 두 칸 높이가 같아지고 구분선이 아래까지 닿는다. */
  .sect-2up > .sect > .mvwrap,
  .sect-2up > .sect > .hi-card { flex: 1; }
  .sect-2up > .sect + .sect { border-left: 1px solid var(--border-soft); }
  /* 오른쪽 칼럼은 구분선에 붙지 않게 띄운다. **머리줄과 판을 같은 값으로** 띄운다 —
     판 좌우 여백을 0 으로 당긴 뒤(위 .tabs/.mvwrap/.hi-card) 머리줄에만 20px 을
     두면 제목은 661px, 목록은 641px 에 서서 이번에는 오른쪽이 어긋난다.
     왼쪽 칼럼은 왼쪽에 구분선이 없으므로 띄울 이유가 없다 — 페이지 여백이 이미 있다.
     여기서는 --panel-pad 를 읽지 않는다. 이 구간(900px 이상)에서 그 값은 항상
     20px 이고, 이 20px 이 뜻하는 것은 판 안여백이 아니라 구분선과의 거리다.

     **이 목록은 판의 종류를 하나하나 적는다 — 새 판이 오른쪽 칸에 서면 여기에
     반드시 더해야 한다.** 2026-09-08 에 신규 상장(.card.panel)을 오른쪽 칸으로
     옮기면서 이 줄에 안 넣어, 위 주석이 경고한 그 어긋남이 그대로 났다
     (제목 661px · 목록 641px).
     같은 사고를 한 번 더 막으려고 `.card` 를 통째로 넣는다 — 홈에서 오른쪽 칸에
     설 수 있는 판은 결국 이 넷과 카드뿐이다. */
  .sect-2up > .sect + .sect > .sect-head,
  .sect-2up > .sect + .sect > .mvwrap,
  .sect-2up > .sect + .sect > .hi-card,
  .sect-2up > .sect + .sect > .card,
  .sect-2up > .sect + .sect > .tabs { padding-left: 20px; }
  .board { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .board > div { border-bottom: 0; border-right: 1px solid var(--border-soft); }
  .board > div:last-child { border-right: 0; }


  /* 좌우 칼럼은 **한 판 안에서 구분선**으로 가른다 — 신규 상장(.lst-2col)과 같은
     방식이다. 카드를 따로 쓰면 화면에 상자가 여덟 개 생겨 목록보다 상자가 먼저
     보인다. 선 하나면 족하다.

     상승·신고가는 각자 알약을 갖지만 그것은 카드 머리에서 갈리므로,
     판까지 나눌 이유는 없다. */
  /* 상승과 신고가는 알약이 서로 달라 탭 묶음이 둘일 수밖에 없다. 그래도 화면에는
     테두리가 **한 겹**으로 보여야 한다 — 두 카드의 테두리를 맞붙여 하나처럼 잇고,
     가운데 남는 한 줄이 곧 구분선이 된다(다른 블록의 border-right 와 같은 역할).

     높이가 다르면 이어붙인 테두리가 어긋나므로 두 칸을 같은 높이로 늘린다. */
}

/* 카드가 둘이라 알약 줄도 둘이다. 오른쪽 줄이 왼쪽과 같은 높이에서 시작해야
   두 카드의 윗변이 맞는다. */


@media (max-width: 640px) {
  .band { padding: 20px 0; }
  .band.b-page { padding-top: 8px; }
  .hero { padding: 12px 0 0; }
  .hero h1 { font-size: 22px; line-height: 1.35; }
  .hero-sub { font-size: 14px; }
  /* 모바일도 한 줄로 둔다. 예전에는 두 줄로 나눠 입력 칸을 넓게 줬는데, 그러면
     히어로가 세로로 한 줄 더 길어져 첫 화면에서 아래 내용이 그만큼 밀린다.
     대신 'AI 검색' 의 글자를 떼고 아이콘만 남겨 버튼 폭을 줄였다 — 거기서 아낀
     폭이 그대로 입력창으로 간다(360px 기준 약 154px → 233px).
     641px 이상은 한 줄이 넉넉하므로 글자를 그대로 둔다. */
  .hero-search input[type="search"] { padding: 10px 12px; }
  /* 라벨이 'AI' 두 글자라 좁은 화면에서도 그대로 보인다 — 숨길 필요가 없다.
     예전에는 'AI 검색' 이 길어 글자를 숨겼는데, 숨긴 글자는 결국 안 읽힌다. */
  /* 값만 바꾸면 위의 max-height 계산이 그대로 따라온다 — 세 줄 규칙이 한 곳에 있다. */
  /* 검색을 열어도 **햄버거는 첫 줄 오른쪽에 그대로 있어야 한다.**
     .head-right 안에서만 줄을 바꾸게 했더니 부족했다 — 그 묶음 자체가 폭을 요구해
     헤더가 통째로 둘째 줄로 내려갔다(로고 줄 아래에 돋보기·햄버거가 따로 섰다).

     묶음을 없앤다. display:contents 로 세 아이템(돋보기·검색창·햄버거)을 헤더의
     직접 자식으로 만들면, 로고와 같은 줄에서 자리를 다투고 검색창만 order 로 뒤로
     밀려 제 줄을 쓴다. 묶음이 사라지면서 잃는 두 가지는 각각 되살린다 —
     오른쪽 정렬과, 둘 사이 좁은 간격(음수 여백).

     **오른쪽 정렬은 돋보기에 걸면 안 된다.** 그 버튼은 hidden 으로 시작해서
     search.js 가 스크롤을 보고서야 푼다. 페이지를 열자마자는 없는 요소라 auto 여백이
     설 자리가 없고, 햄버거가 '연금 ETF' 바로 옆에 붙어 오른쪽에 96px 이 비었다.
     스크롤을 내리면 그제야 제자리로 뛰었다(실측 96 → 14px).

     늘 있는 nav 에 margin-right:auto 를 준다. 남는 폭을 nav 가 먹으므로 뒤따르는
     것들이 통째로 오른끝으로 간다 — 돋보기가 있든 없든 같다. 641px 이상에서는
     .head-right 가 진짜 상자라 제 margin-left:auto 로 붙으므로 여기서만 건다
     (양쪽에 auto 를 두면 남는 폭을 반씩 나눠 가운데로 온다). */
  .head-right { display: contents; }
  .site-head .inner > nav { margin-right: auto; }
  .allmenu { margin-left: -12px; }   /* 헤더 gap 14px 을 되돌려 2px 로 붙인다 */
  .headsearch { order: 9; flex: 1 0 100%; max-width: none; }

  .heat { --heat-row: 62px; --heat-gap: 3px; --heat-pad: 11px;
          grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); }
  .heat a { padding: 8px 9px; }
  .legend { margin-left: 0; }
  /* 좁은 화면은 세로로 쌓이므로 같은 간격이 더 넓어 보인다. 한 단계 줄인다. */
  :root { --sect-gap: 24px; --panel-pad: 12px; }

  /* 값이 둘인 목록(순유입·순유출·거래 급증)은 좁은 화면에서 두 줄로 편다.
     한 줄에 이름·금액·기준·비율을 다 넣으면 360px 기준으로 쓸 수 있는 260px 중
     228px 을 값이 가져가 이름 몫이 32px 남는다 — 종목명이 사실상 사라진다.

     이름이 한 줄을 통째로 쓰고, 값 둘이 다음 줄에서 양 끝으로 갈린다.
     값이 하나뿐인 목록(거래대금·괴리율·추적오차·신규 상장)은 한 줄로 충분하므로
     건드리지 않는다 — 다 펴면 모바일에서 페이지가 배로 길어진다. */
  /* **한 행은 한 줄이다.** 값은 모두 보이고, 넘치는 것은 종목명뿐이다(말줄임).
     한때 이름을 따로 한 줄 내렸는데 목록이 배로 길어져 훑기 어려웠다.

     그래서 칸을 실측 최대 폭에 맞춘다. 넓은 화면 기준 폭을 그대로 쓰고 있어
     좁은 화면에서 이름 몫을 과하게 먹고 있었다(실측: 보조 칸은 46px 이면 되는데
     74px 을 잡고 있었다).

     안여백도 함께 줄인다. 360px 에서 판 20 + 행 16 이 좌우로 72px 을 가져간다 —
     넓은 화면에서는 여백이지만 좁은 화면에서는 이름이 사라지는 값이다. */
  /* 판마다 padding 을 덮어쓰지 않는다 — 위 :root 의 --panel-pad 하나만 바꾼다.
     덮어쓰기 방식은 "이 줄이 shorthand 보다 뒤에 있어야 이긴다" 는 순서 조건을
     달고 있었고, 무엇보다 **발줄이 이 갱신에서 빠져 있었다**. 한 곳에 두면
     빠질 곳이 없다.

     히트맵 판만 예외로 남긴다. 덮어쓰기 시절 이 판은 .card.panel 규칙이 뒤에 와서
     8px 이 아니라 12px 을 받고 있었다 — 사고였지만 그 12px 위에서 타일 폭과
     세 줄 제한(.heat-3 의 폭별 칸수)이 맞춰졌다. 지금 8px 으로 되돌리면 타일이
     넓어져 어느 폭에서 넷째 줄이 다시 비칠 수 있다. 화면을 바꾸지 않는 것이
     이 수정의 범위다. */
  .card.panel-tight { padding-left: 12px; padding-right: 12px; }
  .mv li, .lst li { padding-left: 1px; padding-right: 10px; gap: 6px; }
  /* **최소 폭(76px)을 여기서 풀지 않는다**(2026-09-08). 예전에는 `min-width: 0` 이라
     '5.4배' 같은 짧은 값이 칸을 안 먹고 그 자리를 이름이 썼다. 그때는 값(.v)이
     보조값(.s) **앞**에 서 있어서, 값의 폭이 들쭉날쭉해도 오른쪽 끝은 뒤 칸이
     고정 폭이라 저절로 맞았다.
     지금은 순서가 뒤집혀 값이 줄 맨 오른쪽이다(2026-09-08, 신고가에 맞춘 정렬).
     그러면 값의 폭이 곧 **그 앞 보조값의 오른쪽 끝**을 정한다 — 폭을 풀어 두니
     보조값 오른끝이 390px 에서 13가지로 흩어졌다(실측 298·290·281·294·286·302…).
     넓은 화면과 같은 76px 로 둔다. 지금 홈의 최대 값 폭이 정확히 76px 이라
     ('9,604.3억원') 모든 행이 한 값으로 맞는다.
     이름이 그만큼 좁아지는 것은 받아들인다 — 실측 360~640px 에서 세 줄로 넘어가는
     이름 0, 말줄임 0 이다. (2026-09-17 까지는 /rank/ 허브의 순위 카드가 제 값
     62px 을 따로 가져 이 규칙 밖에 있었다 — 그 카드는 이제 없다.) */
  .lst li .v { font-size: 12.5px; }
  .lst li .s { width: 60px; }        /* 실측 최대 58px ('디스카운트') */
  .lst li .lst-date { width: 52px; } /* 짧은 날짜 26.08.25 는 46px */
  /* 좁은 화면에서 구간 알약이 아래 줄로 밀렸다. 머리줄 한 줄에 제목·설명·기준일·
     알약이 다 들어가야 하는데 360px 에서 약 400px 을 쓰고 있었다.
     알약을 더 조이고(10 → 7px, 12.5 → 11.5px) 머리줄 간격도 8 → 6px 로 줄인다.
     세로 높이와 터치 영역은 건드리지 않는다 — 손가락으로 누르는 것이라 위아래를
     줄이면 안 된다. */
  /* 알약 글자가 한 글자(일·주·월)가 된 뒤로는 여백을 억지로 줄일 이유가 없다.
     오히려 한 글자짜리 알약이 너무 좁으면 누르기 어렵다 — 좌우를 조금 돌려준다.
     제목 크기와 머리줄 간격은 줄인 채로 둔다(머리줄이 아직 빡빡하다). */
  .mv-bar .tab { padding: 4px 11px; }
  .sect-head { gap: 6px; }
  .sect-head h2 { font-size: 18px; }
}

/* ---- 물음표 도움말 ----
   긴 설명을 접어 둔다. 홈은 클릭해 들어온 사람이 보는 화면이라 설명이 길게
   깔리면 정작 데이터가 뒤로 밀린다. 필요한 사람만 열어보게 한다.

   JS 를 쓰지 않는다. button 이 탭하면 focus 를 받으므로 :focus 로 열고,
   다른 곳을 누르면 focus 가 빠지며 닫힌다 — 휴대폰에서도 그대로 동작한다. */
/* 말풍선은 버튼이 아니라 "콘텐츠 칸"에 매단다. 버튼 기준으로 띄우면 화면
   가장자리의 버튼에서 말풍선이 밖으로 삐져나가고, 그만큼 가로 스크롤이 생겨
   모바일에서 화면이 좌우로 흔들린다. 칸에 매달면 절대 칸을 넘지 않는다. */
.sect-head,
.card > h2,
.ch { position: relative; }
/* 칼럼 제목 줄은 [제목] [?] ……… [전체] 세 조각이다. 예전에는 '전체' 가 섹션
   머리(flex + gap)에 있어 간격이 저절로 생겼는데, 칼럼으로 내리면서 글자에 그대로
   붙었다. 제목 줄 자체를 flex 로 만들어 간격을 주고 '전체' 는 오른쪽 끝으로 민다. */
/* 칼럼 제목은 제목 · 설명 · 기준일이 한 줄에 선다. '전체' 는 섹션 머리(레버리지
   토글 옆)로 올라가 여기 없다 — 판마다 두 개씩 있으면 목록보다 버튼이 먼저 보인다. */
.board .ch { display: flex; align-items: center; gap: 8px; }

.help { position: static; display: inline-flex; vertical-align: middle; }

.help-btn {
  width: 16px; height: 16px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: transparent;
  color: var(--text-4);
  font: 600 10px/1 var(--font);
  cursor: help;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.help-btn:hover { border-color: var(--text); text-decoration: underline; text-decoration-color: var(--text);}
.help-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* 지표 묶음 위의 물음표 한 개. 라벨마다 붙이지 않고 블록에 하나만 둔다 —
   여덟 개 라벨에 물음표가 줄줄이 붙으면 값보다 물음표가 먼저 보인다. */

/* 말풍선 — 흰 판. 예전에는 어두운 배경에 평문 한 덩어리였는데, 설명이 길어지면
   (히트맵 여섯 문장, 순유입 다섯 문장) 글이 뭉쳐 아무도 안 읽었다. 흰 판 + 굵은
   용어 + 줄 나눔이라야 여러 개념을 나란히 놓을 수 있다. */
.help-body {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 40;
  width: max-content;
  max-width: min(440px, calc(100vw - 32px));
  /* ---- 화면 아래로 넘치지 않게 (2026-09-15) ----
   **왜 지금인가.** 오늘 본문 끝에 44px 짜리 「닫기」를 더하면서 말풍선이 하나같이
   63px 씩 커졌다. 그 63px 이 경계를 넘긴 것이 상세의 구성종목 판이다 — 768·1280px
   에서 474.4 → 537.4px 이 되어 화면 아래로 46px 이 잘렸다(실측, 물음표를 화면
   한가운데 두고 열었을 때).

   **한 판에만 걸지 않는다.** 아홉 장 90개를 전수로 재 보니(390·768·1280 세 폭)
   화면 밖으로 나가는 것이 11개였고 종류로는 다섯이다 — 홈 '자금 순유입이란'
   712~885px · 상세 '구성종목 공개 범위' 537~833px · 상세 '보수와 비용의 뜻' 685px ·
   상세 '기준가와 시장가격' 553px · 목록 '이 페이지 보는 법' 560px(이미 상한에 걸려
   있던 값, 안 걸렸으면 1,135px). 구성종목만 고치면 나머지 넷은 다음 사람이 다시
   만난다. 상한은 **키를 넘는 것만** 깎으므로 짧은 말풍선(대부분 200~400px)에는
   아무 일도 일어나지 않는다.

   **왜 min(44vh, 460px) 인가.** 말풍선은 물음표 바로 아래 8px 에서 열리므로,
   물음표가 화면 한가운데 있을 때 남는 높이는 화면의 절반 남짓(1024px 화면에서
   492px)이다. 그보다 낮아야 열자마자 안 잘린다. 44vh 는 1024px 화면에서 450.6px
   이라 42px 이 남고, 화면이 낮아져도 절반의 88% 라 같은 비율로 남는다. 460px 은
   큰 화면에서 판이 한없이 길어지지 않게 하는 천장이다.
   **둘 다 이 파일이 이미 쓰는 값이다** — 챗 패널(.chat)의 `min(52vh, 460px)` 과
   좁은 화면의 `44vh` 에서 그대로 가져왔다. 새 치수를 만들지 않았다.
   (예전 h1 판의 `min(70vh, 560px)` 을 그대로 올리지 않은 이유: 1024px 화면에서
   560 은 남는 492 보다 커서 **구성종목 판이 그대로 잘린다**. 고치라고 한 바로 그
   증상이 안 고쳐진다 — 실측 537.4px 는 560 에 걸리지도 않는다.)

   **안에서 굴린다.** 넘치는 부분은 판 안 스크롤로 읽는다. 구석 ×는 굴리면 위로
   밀려나지만 본문 끝에 「닫기」가 있고(_help.html), 말풍선 **밖을 누르면 닫히는
   것**이 터치의 기본 동작이라(help.js) 닫을 길은 늘 둘 이상이다.
   `overscroll-behavior: contain` 은 빼먹지 마라 — 없으면 판 스크롤이 끝에 닿는
   순간 뒤 페이지가 따라 움직여, 읽던 자리가 통째로 밀린다. */
  max-height: min(44vh, 460px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 14px 16px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text-2);
  font-size: 13.5px;
  font-weight: 400;
  line-height: 1.65;
  letter-spacing: 0;
  text-align: left;
  white-space: normal;
  box-shadow: 0 10px 28px rgba(15, 25, 50, .16);
  opacity: 0;
  visibility: hidden;
  transition: opacity .12s ease;
}
.help-body .hh { display: block; margin-bottom: 6px; padding-right: 20px;
                 font-size: 14px; font-weight: 700; color: var(--text); }
.help-body .hp { display: block; }
/* 문단이 여럿인 말풍선(분류 상세의 '한눈에'). 붙여 두면 세 문단이 한
   덩어리로 읽혀 접은 보람이 없다. 아래 .hl 규칙과 같은 9px 을 쓴다. */
.help-body .hp + .hp { margin-top: 9px; }
.help-body .hp + .hl { margin-top: 9px; padding-top: 9px; border-top: 1px solid var(--border-soft); }

/* 항목 목록. 나란한 규칙을 한 문단에 이어 붙이지 않고 줄로 나눈다.
   점은 .ht 와 같은 자리·같은 색이라 두 목록이 한 판에 서도 결이 같다.
   용어 목록과 달리 굵은 머리말이 없다 — 이건 정의가 아니라 항목이다. */
.help-body .hb { display: block; }
.help-body .hbi {
  position: relative;
  display: block;
  margin-top: 5px;
  padding-left: 10px;
}
.help-body .hb > .hbi:first-child { margin-top: 0; }
.help-body .hbi::before { content: "·"; position: absolute; left: 0; color: var(--text-4); }
.help-body .hp + .hb { margin-top: 9px; }
.help-body .hb + .hl { margin-top: 9px; padding-top: 9px; border-top: 1px solid var(--border-soft); }

/* 용어 목록. 용어를 굵게 앞세우고 정의를 그 아래 들여쓴다 — 어느 줄이 용어이고
   어느 줄이 설명인지 눈으로 바로 갈린다.
   전부 <span> 이라 display:block 으로 세운다(왜 그런지는 _help.html 주석 참고). */
.help-body .hl { display: block; }
.help-body .ht {
  position: relative;
  display: block;
  margin-top: 8px;
  padding-left: 10px;
  font-weight: 700;
  color: var(--text);
}
.help-body .hl > .ht:first-child { margin-top: 0; }
.help-body .ht::before { content: "·"; position: absolute; left: 0; color: var(--text-4); }
.help-body .hd { display: block; margin: 1px 0 0 10px; }

/* 닫기. 길어진 설명은 '내가 닫는다' 는 통제감이 있어야 한다 — hover 로만 닫히면
   마우스가 조금만 벗어나도 사라져 읽던 자리를 잃는다. */
.help-x {
  position: absolute;
  top: 4px; right: 4px;
  /* 22 → 32px (2026-09-15 지시 "X도 작아서 쓰기 힘드니 키워줘"). 손가락 표적의
     기준값은 이 파일이 쓰는 44px 인데(`.morebtn`·`.allmenu > summary`), 44px 네모를
     그대로 모서리에 넣으면 판 안쪽으로 40px 을 먹어 제목 글자 위에 앉는다
     (`.hh` 가 비워 둔 오른쪽 자리는 20px 뿐이다). 그래서 **보이는 네모는 32px,
     누를 자리는 40px** 로 가른다 — 아래 ::before 가 사방으로 넓힌다.
     글리프(×)는 16px 그대로다. 크게 키우면 옆의 제목과 크기를 다툰다. */
  width: 32px; height: 32px;
  padding: 0;
  border: 0;
  /* 모서리 6 → 8px. 32px 네모에 6px 은 각져 보인다. 8px 은 이 파일이 이미 쓰는
     값이다(`.morebtn`·`.lf-q`). 새 치수를 만들지 않는다. */
  border-radius: 8px;
  background: transparent;
  color: var(--text-4);
  font: inherit;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}
/* 표적만 넓힌다 — 보이는 것은 32px, 눌리는 것은 40px(32 + 사방 4px).
   **40px 인 이유는 그 이상 키울 데가 없기 때문이다.** 바깥으로는 판 테두리까지가
   4px 이고(top·right 가 4px), 그보다 더 나가면 판 밖에 있는 링크의 클릭을 이
   보이지 않는 표적이 가로챈다. 안쪽으로는 4px 을 넘어서면 글자 위에 앉는다 —
   제목(`.hh`)이 비워 둔 오른쪽 자리가 20px + 판 안여백 16px = 36px 이라
   32px 네모에 4px 을 더하면 거기서 끝난다. 그래서 44px 이 아니라 40px 이다.
   `:not(.help-btm)` 로 구석 × 에만 건다. 아래 닫기 버튼의 ::before 는 구분선이다. */
.help-x:not(.help-btm)::before {
  content: '';
  position: absolute;
  top: -4px; right: -4px; bottom: -4px; left: -4px;
}
.help-x:hover { background: var(--surface-tint); color: var(--text); }
.help-x:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* 본문 맨 아래의 닫기. 왜 하나 더 두는가는 _help.html 주석에 있다 — 긴 말풍선은
   판 안에서 굴러가(`.price-head h1 … .help-body` 의 max-height) 끝까지 읽고 나면
   위 × 가 스크롤 밖으로 밀려난다. 실측: 390px 에서 그 말풍선의 안쪽 높이는
   900px 을 넘고 보이는 높이는 560px 이라, 끝에서 × 는 340px 위에 있다.

   **모양은 `.morebtn` 에서 그대로 가져왔다** — 테두리 --border · 모서리 8px ·
   바탕 --surface · 글자 --text-2 12.5px/600 · 호버에 border-color: --text + 밑줄.
   같은 일(눌러서 보는 것을 바꾼다)을 하는 자리라 새 어휘를 만들지 않는다.
   파랑(--accent)은 AI 표시 전용이라 여기 쓰지 않는다.

   **높이 44px · 폭 100%.** 이 저장소가 손가락 표적에 쓰는 값이고(`.morebtn` ·
   `.allmenu > summary`), 오른쪽에 제 글자만큼만 세우면 위 × (22×22)와 다를 바
   없는 작은 표적이 된다. 남는 폭을 다 먹는 것은 `.morebtn-more` 와 같은 선택이다.
   짧은 말풍선에서 이 버튼이 본문보다 커 보이는 것은 감수한다 — 누르기 쉬운 쪽을
   택했다(2026-09-15 지시 "x 말고 누르기 쉽게 버튼으로").

   **붙박이(sticky)로 띄우지 않는다.** 띄우면 늘 보이는 대신 판 아래 한 줄을 늘
   가려, 용어 목록의 마지막 정의가 버튼 뒤로 들어간다. 스크롤 끝에 두면 다 읽은
   자리가 곧 닫는 자리다.

   `.help-x` 의 구석 배치·크기·글자를 여기서 되돌린다(position·width·height·
   border·background·font). 그 클래스는 닫기 **동작**을 잇는 고리이고, 생김새는
   이 규칙이 진다. */
.help-x.help-btm {
  position: relative;   /* ::before 구분선의 기준칸. 구석 × 의 absolute 와 무관하다. */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: auto;
  min-height: 44px;
  /* 위 9px · 선 · 아래 9px. 말풍선 안 다른 구분선(.hp + .hl)이 쓰는 리듬 그대로다. */
  margin-top: 19px;
  padding: 0 18px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text-2);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1;
}
/* 구분선. 버튼이 용어 목록의 마지막 항목처럼 읽히면 안 된다 — 판의 내용과
   판을 닫는 조작은 다른 층이다. 색은 판 안의 다른 구분선과 같은 --border-soft. */
.help-x.help-btm::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: -10px;
  border-top: 1px solid var(--border-soft);
}
.help-x.help-btm:hover {
  background: var(--surface);
  color: var(--text-2);
  border-color: var(--text);
  text-decoration: underline;
  text-decoration-color: var(--text);
}
.help-x.help-btm:active { transform: scale(.98); }

/* 여는 것은 help.js 가 맡는다 — 누르면 열리고 다른 곳을 누르거나 ×를 누르면 닫힌다. */
.help.open > .help-body { opacity: 1; visibility: visible; }

/* 키보드로 탭했을 때, 그리고 JS 가 없을 때의 폴백. */
.help-btn:focus + .help-body { opacity: 1; visibility: visible; }

/* **hover 로 열지 않는다.** 예전에는 마우스만 올려도 열렸는데, 용어 서너 개가
   담긴 판을 읽는 동안 마우스가 벗어나면 그대로 닫혀 버린다. 눌러서 열고 ×나
   바깥 클릭으로 닫는다 — 짧은 용어 정의는 표 머리글의 title 이 계속 맡는다. */

/* ---- 터치 기기의 title 툴팁 ----
   title 속성(용어 정의·정확한 원 단위)은 브라우저 기본 툴팁이라 hover 로만
   열린다. 휴대폰에는 hover 가 없어 상세 화면의 NAV·괴리율 설명이 통째로 보이지
   않았다. help.js 가 터치 기기에서만 이 말풍선을 띄운다.

   화면 좌표 고정(fixed)인 이유는 설명이 표 셀·라벨 등 아무 데나 붙어 있어,
   형제 요소 기준 절대배치로는 기준 칸을 잡아 줄 방법이 없기 때문이다. */
.tapinfo {
  display: none;
  position: fixed;
  z-index: 60;
  max-width: min(320px, calc(100vw - 16px));
  padding: 10px 13px;
  border-radius: 8px;
  background: #1f2433;
  color: #e6eaf3;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.65;
  letter-spacing: 0;
  text-align: left;
  box-shadow: 0 6px 20px rgba(15, 25, 50, .28);
}

/* 설명이 있다는 표시. 데스크톱에는 붙이지 않는다 — 거기서는 hover 하면 나오고,
   점선을 그으면 지금 화면만 지저분해진다.
   용어(라벨·머리글)에만 긋는다. 숫자 칸까지 그으면 표가 점선밭이 된다. */
@media (hover: none), (pointer: coarse) {
  /* 점선을 그리던 자리다. 터치에서는 hover 가 없으니 유일한 신호라고 두었는데,
     **title 툴팁은 hover 전용이라 터치에서는 탭해도 뜨지 않는다.** 되지 않는 조작을
     밑줄로 광고하고 있었던 셈이다. 신호를 지우는 것이 아니라 거짓 신호를 지운다.
     터치에서 정말 필요한 설명은 물음표(.help-btn)가 맡는다 — 그건 탭으로 열린다. */
}



/* ---- 레버리지 포함 토글 ----
   정적 사이트라 두 벌을 모두 찍어두고 여기서 갈아 끼운다. 서버에 다시 묻지
   않으므로 즉시 바뀌고, JS 도 필요 없다. */
/* 알약 높이는 행간이 결정한다. 본문 행간(1.6)을 물려받으면 11px 글자에도
   상자가 25px 이 넘어 섹션 제목(20px)보다 커 보인다. line-height 를 1 로 고정한다. */
.toggle {
  /* 크기는 고르기 알약과 같다. 홈 섹션 머리에서 '레버리지 포함'(켜기) 옆에
     '전체'(이동)가 나란히 서는데, 예전에는 높이가 서로 달라 줄이 들쭉날쭉했다. */
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  /* 속은 흰색이다 — 옅은 하늘색 배경 위에서 속이 비면 알약이 아니라 테두리만
     그려 놓은 자국처럼 보인다. 고르기 알약(.pill·.tab)과 같다.
     켜지면 검정으로 덮인다(input:checked ~ * .toggle). */
  background: var(--surface);
  color: var(--text-2);
  font-size: 12.5px;
  line-height: 1;
  font-weight: 500;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
/* 켜고 끄는 표시. **동그라미는 알약 테두리와 같은 색으로 간다.** 예전에는 꺼진
   상태에서도 강조색 테두리에 옅은 파랑을 채웠는데, 알약 자체는 회색이라 그 안에서
   점 하나만 파랗게 떠 따로 놀았다.
   테두리를 currentColor 로 두면 꺼짐(회색)·올림(강조색)·켜짐(흰색)이 알약을 그대로
   따라온다. 속은 비운다 — 빈 원이 꺼짐, 채워진 원이 켜짐으로 읽힌다. */
.toggle::before {
  content: "";
  display: inline-block;
  width: 7px; height: 7px;
  margin-right: 6px;
  border-radius: 50%;
  border: 1px solid currentColor;
  background: transparent;
  vertical-align: 1px;
}
/* **커서가 있는 기기에만 건다.** 손가락으로 누르면 :hover 가 탭 뒤에도 남아,
   끈 상태인데 강조색이 남아 켜진 것처럼 보인다. 폰에서는 눌린 그대로(검정)와
   안 눌린 그대로(회색) 두 모습만 있으면 된다. */
@media (hover: hover) and (pointer: fine) {
  .toggle:hover { border-color: var(--text); text-decoration: underline; text-decoration-color: var(--text);}
  .toggle:hover::before { border-color: var(--text); background: var(--text); text-decoration: underline; text-decoration-color: var(--text);}
}
/* **id 로도, 감싼 요소 이름으로도 적지 않는다.**

   처음에는 #levmv·#levflow 만 적혀 있었는데, 순유입 블록에 #levin 을 새로 달자
   그 토글만 눌러도 모양이 그대로였다 — 켜고 끈 것이 구분되지 않으니 눌리지 않는
   버튼으로 보인다. 그래서 id 를 걷어내고 `.sect-head .toggle` 로 바꿨는데, 이번엔
   전 종목 목록의 토글이 `.card > h2` 안에 붙으면서 같은 일이 되풀이됐다.

   감싼 요소를 아예 묻지 않는다(`~ * .toggle`). 토글을 어디에 두든 켜진 모양이
   따라오고, 새로 달 때 이 규칙을 같이 고칠 일이 없다. `.toggle` 은 이 토글에만
   쓰는 클래스라 다른 것을 잘못 물지 않는다. */
input[type="checkbox"]:checked ~ * .toggle {
  background: var(--text);
  border-color: var(--text);
  color: #fff;
}
/* 켜지면 알약이 검게 깔리고 글자가 흰색이 된다. 동그라미도 흰 점으로 채우되
   **테두리까지 currentColor 로 맞춘다** — 강조색 테두리만 남으면 어두운 배경
   위에 파란 링이 떠 지저분하다. */
input[type="checkbox"]:checked ~ * .toggle::before {
  background: currentColor; border-color: currentColor;
}
input[type="checkbox"]:focus-visible ~ * .toggle {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
/* 제목 안에 들어간 토글은 제목 글자와 붙지 않게 띄우고, 제목의 큰 글꼴·굵기를
   물려받지 않게 한다(.toggle 이 이미 정한 값이 h2 상속에 밀리지 않도록). */
h2 > .toggle { margin-left: 10px; vertical-align: 2px; font-weight: 600; }

/* 전체보기 — 토글과 같은 알약이지만 성격이 다르다(하나는 상태, 하나는 이동).
   화살표로 "여기서 벗어난다"를 표시해 구분한다. */
/* 카드 밖으로 나가는 이동은 홈 섹션 머리든 카드 바닥이든 같은 알약을 쓴다.
   성격이 같은 조작에 모양을 따로 주면 화면의 어휘만 늘어난다.
   .morelink 는 카드 바닥에 혼자 놓이므로 조금 크고 여백을 갖는다. */
.sect-all,
.morelink {
  /* 글자는 .pill·.toggle 과 같아야 한다 — 홈 섹션 머리에서 '레버리지 포함' 옆에
     '전체' 가 나란히 서는데, 굵기 600 vs 500 · 색 --text-3 vs --text-2 로 갈려
     같은 크기인데도 다른 글꼴처럼 보였다. 이동임을 알리는 것은 화살표 하나로 족하다. */
  /* 테두리도 --border 다. --border-soft(#e6eaf1)는 옅은 하늘색 배경 위에서 거의
     안 보여, 옆의 토글(#d4d8e2)과 나란히 두면 한쪽만 테두리가 없는 것처럼 보였다. */
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text-2);
  line-height: 1;
  font-weight: 500;
  white-space: nowrap;
}
/* inline 인 <a> 에 min-height 를 주면 아무 일도 일어나지 않는다. 알약 높이를
   맞추려면 inline-flex 여야 한다 — 그래서 홈의 '전체' 만 계속 낮았다. */
.sect-all { display: inline-flex; align-items: center; padding: 4px 12px; font-size: 12.5px; }

/* 부모가 inline-flex 라 ::after 도 **flex 항목**이 된다. 기본값이 flex-shrink:1
   이라 자리가 모자라면 글리프 칸이 눌리고, content 앞의 공백은 flex 항목이 되면서
   사라져 글자에 딱 붙는다. 여백은 margin 으로 주고 줄어들지 않게 막는다. */
.sect-all::after,
.morelink::after {
  /* '›' 는 같은 크기에서 글자보다 작게 그려져 키워 써야 했고, 그래도 따옴표처럼
     보였다. 화살표는 '여기서 나간다' 를 그대로 말하므로 손볼 것이 없다. */
  content: "→";
  flex: none;
  margin-left: 5px;
  line-height: 1;
}
.sect-all:hover,
.morelink:hover { border-color: var(--text); text-decoration: underline;  text-decoration-color: var(--text);}

/* 표·차트 바로 아래에 붙는 '전체 보기'. 예전에는 본문 글씨 크기의 맨 링크라
   설명문(.note)과 구분되지 않았다 — 읽을 문장인지 누를 것인지가 안 보였다.
   누를 것은 누를 것처럼 생겨야 하고, 탭 영역도 글자 높이가 아니라 알약 크기여야 한다. */
.morelink { display: inline-flex; align-items: center;
            margin-top: 14px; padding: 4px 12px; font-size: 12.5px; }
.cardfoot { margin: 0; }

.lev-on { display: none; }
#levmv:checked ~ .mvwrap .lev-off,
#levhi:checked ~ .hi-card .lev-off,
#levin:checked ~ .tabs .lev-off,
#levq:checked ~ .tabs .lev-off,
#levflow:checked ~ .tabs .lev-off,
#levout:checked ~ .tabs .lev-off,
#levsurge:checked ~ .tabs .lev-off,
#levterr:checked ~ .tabs .lev-off { display: none; }
/* **보이는 쪽에 display 를 씌울 때는 그 요소의 원래 값과 같아야 한다.**
   여기에 둘 다 block 을 주고 있었는데, 등락 상위 카드(.mv)는 900px 이상에서
   상승|하락 2단 그리드라 block 이 그 grid 를 덮어썼다 — '레버리지 포함' 을 누르는
   순간 두 단이 세로로 무너졌다. 감춰진 쪽(.lev-off)은 grid 그대로였으니 토글 전후로
   모양이 달라 보였다.
   .mv 는 grid, .lst 는 ul 이라 block 이다. 새 토글을 붙일 때도 대상의 원래
   display 를 확인하고 적어야 한다. */
/* 등락 상위가 한 판이 된 뒤로 .lev-* 는 카드가 아니라 목록(<ol>)이다 — block 이다.
   판이 grid 인 것은 카드 쪽이고 목록은 아니라, 예전처럼 grid 를 주면 목록이 깨진다. */
#levmv:checked ~ .mvwrap .lev-on,
#levhi:checked ~ .hi-card .lev-on,
#levq:checked ~ .tabs .lev-on,
#levin:checked ~ .tabs .lev-on,
#levflow:checked ~ .tabs .lev-on,
#levout:checked ~ .tabs .lev-on,
#levsurge:checked ~ .tabs .lev-on,
#levterr:checked ~ .tabs .lev-on { display: block; }

/* ============================================================
   글자 크기 — 화면 폭과 무관하게 하나다

   예전에는 "화면이 좁을수록 글자는 커져야 한다"는 규칙으로 좁은 화면에서만 키웠다.
   그러다 보니 640px 경계를 넘을 때마다 본문·표·목록이 통째로 커졌다 작아졌고,
   창을 줄이는 것만으로 화면이 다른 사이트처럼 보였다. 그 정책을 접고 **큰 쪽(옛
   모바일 값)으로 맞춘다** — 데스크톱에서도 읽기 편한 크기다.

   이 묶음이 파일 뒤쪽에 있어야 앞의 규칙들을 덮는다. 위치를 옮기지 말 것.
   ============================================================ */
body { font-size: 15.5px; }

/* 섹션 제목·설명 */
.sect-head h2 { font-size: 19px; }
.sect-all { font-size: 12.5px; padding: 4px 12px; }
.sect-desc { font-size: 13px; }
.sect-note { font-size: 13px; }
.sect-link { font-size: 13.5px; }
.foot-note { font-size: 12.5px; padding: 11px 14px; }

/* 시장 지수 */
.idx > .idxcard { padding: 14px 16px; }
.idx-chg { font-size: 14px; }
.idx-chg em { font-size: 12.5px; }

/* 테마 히트맵 */
.heat .t { font-size: 13px; }
.heat .p { font-size: 16px; }
.heat .c { font-size: 11.5px; }

/* 등락 상위 · 거래대금 · 괴리율 목록 */
.mv li,
.lst li { font-size: 14.5px; padding: 9px 16px 9px 1px; }
.mv li .p,
.lst li .v { font-size: 14px; }

/* 탭·토글 — 손가락으로 누르는 것이라 넉넉히. 마우스에도 과하지 않다. */
.tab { font-size: 13px; padding: 8px 14px; }
.toggle { font-size: 12.5px; padding: 4px 12px; }

/* 도움말 */
.help-btn { width: 18px; height: 18px; font-size: 11px; }
.help-body { font-size: 14.5px; line-height: 1.7; padding: 13px 15px; }

/* 분류 칩 */

/* 개발자 구역 */
.agent h3 { font-size: 14.5px; }
.agent p { font-size: 14px; }
.agent ul { font-size: 13.5px; }
.agent .mono { font-size: 12.5px; }
.ep li { font-size: 13.5px; padding: 11px 14px; }

/* 푸터 */
.site-foot { font-size: 13.5px; }
.disclaimer { font-size: 12.5px; }
.foot-policy { font-size: 13px; }
.foot-h { font-size: 13px; }


/* ============================================================
   좁은 화면에서만 달라지는 것 — 크기가 아니라 **동작**이다.
   위 묶음과 달리 이건 폭에 따라 갈려야 한다.
   ============================================================ */
@media (max-width: 640px) {
  /* 보조 칸을 좁은 화면에서 **숨기지 않는다.** 한때 클리핑으로 화면에서 뺐다 —
     값이 둘이면 종목명이 '…' 로 잘린다는 이유였다. 그런데 그 칸이 곧 답인
     목록이 있다: 괴리율의 '디스카운트/프리미엄', 순유입의 '얼마 대비 몇 %'.
     주인공을 감춘 셈이었다. 감추는 대신 줄을 하나 더 쓴다(아래). */


  /* 18px 짜리 동그라미는 손가락으로 겨냥하기엔 너무 작다. 보이는 크기는 그대로
     두고 눌리는 범위만 사방으로 넓힌다. 마우스에는 필요 없고, 넓히면 옆 요소의
     클릭을 가로챌 수 있어 여기서만 한다.
     형제인 .help-body 는 바깥 칸을 기준으로 배치되므로 position 을 줘도
     말풍선 위치는 그대로다. */
  .help-btn { position: relative; }
  .help-btn::after { content: ''; position: absolute; top: -11px; right: -11px; bottom: -11px; left: -11px; }
}

/* 섹션 제목 링크 — 누르면 그 섹션의 전체보기로 간다.
   평소엔 링크처럼 보이지 않게 두고(제목이 파랗게 물들면 화면이 시끄럽다),
   마우스를 올렸을 때만 링크임을 드러낸다. 화살표로 "더 있다"를 알린다. */
.ch > a { color: inherit; }
.ch > a::after {
  content: "→";
  margin-left: 5px;
  color: var(--text-4);
  font-weight: 400;
}
.ch > a:hover { text-decoration: underline;  text-decoration-color: var(--text);}
.ch > a:hover::after { text-decoration: underline; text-decoration-color: var(--text);}

/* ---- 페이저 ----
   랭킹을 100종목씩 끊어 전부 싣는다. 상위 N 만 보여주고 자르면 "전체 순위"가
   아니다. 번호는 현재 페이지 주변과 양끝만 남기고 접는다(site.py 의 _page_numbers). */
.pager {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 18px;
}
.pager a,
.pager span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 34px;
  padding: 0 9px;
  border: 1px solid var(--border-soft);
  border-radius: 6px;
  color: var(--text-2);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.pager a:hover { border-color: var(--text); text-decoration: underline;  text-decoration-color: var(--text);}
.pager .on { background: var(--text); border-color: var(--text); color: #fff; font-weight: 600; }
.pager .off { color: var(--text-4); border-color: transparent; }
.pager .pg-gap { border: 0; min-width: 18px; padding: 0; color: var(--text-4); }
.pg-note { margin: 10px 0 0; text-align: center; font-size: 12.5px; color: var(--text-3); }

@media (max-width: 640px) {
  .pager a, .pager span { min-width: 38px; height: 38px; font-size: 13.5px; }
  .pg-note { font-size: 13px; }
}

/* h1 안의 보조 식별자(영문명·ISIN). 한글명이 주인공이고 나머지는 딸린 정보라
   크기·색을 낮춘다. 검색에는 h1 전체가 쓰이므로 작아도 값은 그대로다. */
.price-head h1 .alt {
  display: inline-block;
  margin-left: 7px;
  color: var(--text-4);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
  vertical-align: 2px;
}
.price-head h1 .alt.isin { font-variant-numeric: tabular-nums; }

@media (max-width: 640px) {
  /* 좁은 화면에서는 줄을 바꿔 내린다 — 한 줄에 밀어넣으면 한글명이 쪼개진다. */
  .price-head h1 .alt { display: block; margin-left: 0; margin-top: 2px; font-size: 13.5px; }
}

/* 테마 전체 히트맵 정렬 전환. 두 순서를 미리 찍어두고 여기서 갈아 끼운다. */
.heat.sort-return { display: none; }
#thsort-return:checked ~ .heat.sort-count { display: none; }
#thsort-return:checked ~ .heat.sort-return { display: grid; }
/* 켜진 탭. 라벨이 h2 안에 있던 것을 `.sect-head > .mv-bar` 로 옮겼으므로
   (2026-09-07) 선택자도 그 자리를 가리켜야 한다 — 안 고치면 켜짐 표시가
   아예 안 뜬다(실측). 홈의 일·주·월 탭과 같은 검은 채움이다. */
#thsort-count:checked ~ .sect-head .mv-bar label[for="thsort-count"],
#thsort-return:checked ~ .sect-head .mv-bar label[for="thsort-return"] {
  border-color: var(--text); background: var(--text); color: #fff; font-weight: 600;
}
input[name="thsort"]:focus-visible ~ .sect-head .mv-bar label { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---- 표에서 종목명 열 고정 ----
   가로로 밀면 종목명이 화면 밖으로 나가 "지금 보는 숫자가 어느 종목 것인지"를
   알 수 없게 된다. 종목명 칸을 왼쪽에 붙여 둔다.

   left:0 이면 되고 앞 칸(순위) 폭을 알 필요가 없다 — 처음에는 제자리에 있다가
   왼쪽 끝에 닿는 순간부터 붙고, 순위 칸은 그 아래로 지나간다.
   배경색을 반드시 깔아야 한다. 투명하면 지나가는 내용이 글자에 겹쳐 보인다. */
.table-scroll th.pin,
.table-scroll td.pin {
  position: sticky;
  left: 0;
  z-index: 2;
  background: var(--surface);
}
/* 헤더는 세로로도 고정돼 있어 겹침 순서를 한 단계 더 올린다. */
.table-scroll thead th.pin {
  z-index: 3;
  background: var(--surface-alt);
}
/* 고정 칸은 자기 배경을 갖고 있어 행 hover 색이 가려진다 — 따로 칠한다. */
.table-scroll tbody tr:hover td.pin,
.table-scroll tbody tr:hover th.pin { background: var(--surface-tint); }

/* 비교표에서 지금 보고 있는 종목 줄. 남과 견주는 표에서 내 자리가 안 보이면
   비교가 성립하지 않는다 — 굵게만 하면 스크롤 중에 놓친다. */
.table-scroll tr.self > td,
.table-scroll tr.self > th { background: var(--surface-tint); }
.table-scroll tr.self td.pin,
.table-scroll tr.self th.pin { background: var(--surface-tint); }

/* 고정 칸 **왼쪽**으로 새는 숫자를 막는다.

   `.table-scroll` 은 `margin: 0 -20px / padding: 0 20px` 로 표를 카드 끝까지 넓힌다.
   그런데 잘라내기는 padding box 에서 일어나고(왼쪽 끝 -6px) sticky 칸은 content box
   에 붙는다(14px) — 그 사이 20px 이 **덮개 없는 창**으로 남아, 밑으로 지나가는
   종가·등락률 칸의 숫자 꼬리가 종목명 왼쪽에 그대로 비쳤다
   (2026-09-05, /etf/ 를 끝까지 밀면 본문에 '5,7' '5,9', 머리행에 '종ㄱ').

   배경을 깐 것만으로는 안 막힌다 — 그 배경이 칸 안쪽에만 있기 때문이다.
   칸이 자기 왼쪽 20px 을 함께 덮게 한다. `background: inherit` 이라 행 hover
   (--surface-tint)·머리행(--surface-alt)·비교표 자기 줄까지 저절로 따라온다.

   **box-shadow 로는 안 된다.** `-20px 0 0 0` 그림자로 같은 자리를 덮어 봤는데,
   이 표들이 `border-collapse: collapse` 라 크로미움이 칸의 그림자를 아예 그리지
   않는다 — 계산값에는 그림자가 있는데 화면에는 숫자가 그대로 샜다(실측).

   폭은 위 padding 과 같은 값이라야 한다. 한쪽만 고치면 다시 샌다. */
.table-scroll td.pin::before,
.table-scroll th.pin::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0; right: 100%;
  width: 20px;
  background: inherit;
  pointer-events: none;
}

/* 칸에 `overflow: hidden` 이 걸려 있으면 위 덮개까지 잘린다 — /theme/ 의 분류 칸이
   `.clip.pin` 이라 그 표에서만 다시 샜다(실측 최저휘도 107).
   말줄임은 칸이 아니라 **안의 링크**가 맡게 옮긴다. 잘리는 모양은 그대로이고
   칸 밖 덮개는 살아남는다. */
.table-scroll td.clip.pin,
.table-scroll th.clip.pin { overflow: visible; }
.table-scroll td.clip.pin > a,
.table-scroll th.clip.pin > a {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 고정 칸 오른쪽에 6px 그라데이션 그림자(td.pin::after)를 그려 경계를 내던 규칙은
   2026-09-21 사용자 지시로 걷었다. 경계는 칸 사이 선으로 충분하다. */

/* ---- AI 검색 챗 패널 ----
   검색창 "위"에 쌓인다. 페이지를 떠나지 않고 여기서 답이 나오며, 답변의 종목은
   모두 /etf/{코드} 로 이어진다 — 밖으로 내보내는 대신 안으로 끌어들이는 창구다. */
.chat {
  max-width: 720px;
  /* 높이를 고정하고 안에서만 스크롤한다. 안 그러면 대화가 쌓일수록 패널이
     자라 검색창을 화면 밖으로 밀어낸다 — 이어서 물어볼 수가 없어진다. */
  max-height: min(52vh, 460px);
  overflow-y: auto;
  overscroll-behavior: contain;   /* 끝에 닿아도 페이지가 따라 움직이지 않게 */
  -webkit-overflow-scrolling: touch;
  margin: 0 auto 12px;
  padding: 12px 14px;
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  background: var(--surface);
  text-align: left;
}
.chat:empty { display: none; }
/* 마지막 답변이 아래 테두리에 붙지 않게 */
.chat > :last-child { margin-bottom: 0; }

/* 내 질문 — 메신저처럼 오른쪽에 붙인다. */
.chat-q { display: flex; justify-content: flex-end; margin-bottom: 8px; }
.chat-q span {
  max-width: 85%;
  padding: 9px 14px;
  border-radius: 14px 14px 3px 14px;
  background: var(--accent);
  color: #fff;
  font-size: 14px;
  line-height: 1.55;
}

/* 답변 — 왼쪽. 카드로 감싸 질문과 층을 나눈다. */
.chat-a {
  margin-bottom: 16px;
  padding: 12px 14px;
  border-radius: 14px 14px 14px 3px;
  background: var(--surface-alt);
  font-size: 14px;
  line-height: 1.7;
}
.chat-a p { margin: 0; }
.chat-a a { font-weight: 500; }
.chat-err { color: var(--text-3); }

/* 기다리는 동안. 20초 안팎 걸리므로 살아 있다는 표시가 필요하다. */
.chat-wait { display: flex; align-items: center; gap: 4px; color: var(--text-4); }
.chat-wait i {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: currentColor;
  animation: chatdot 1.2s infinite ease-in-out;
}
.chat-wait i:nth-child(2) { animation-delay: .15s; }
.chat-wait i:nth-child(3) { animation-delay: .3s; }
.chat-wait i + i { margin-left: 1px; }
@keyframes chatdot { 0%, 60%, 100% { opacity: .25; } 30% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .chat-wait i { animation: none; opacity: .6; } }

/* 답에 등장한 종목 — 바로 누를 수 있게 칩으로 한 번 더 준다. */
/* 물을 거리 — 빈 칸에서 'AI 검색' 을 눌렀을 때 뜬다.
   .chat-chip 을 재활용하지 않는 이유는 그쪽이 white-space:nowrap 이기 때문이다.
   종목명은 짧아서 알약이 맞지만 예시 질문은 20~30자라 한 줄로 밀려 삐져나간다.
   세로로 쌓고 줄바꿈을 허용한다. */
.chat-hint { margin: 0 0 10px; color: var(--text-3); font-size: 13px; line-height: 1.6; }
.chat-asks { display: flex; flex-direction: column; gap: 6px; }
.chat-ask {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  background: var(--surface-alt);
  color: var(--text-2);
  font: inherit;
  font-size: 13.5px;
  line-height: 1.5;
  text-align: left;
  cursor: pointer;
}
.chat-ask:hover { border-color: var(--text); text-decoration: underline; text-decoration-color: var(--text);}

.chat-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 11px; }
.chat-chip {
  padding: 5px 11px;
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  background: var(--surface-alt);
  color: var(--text-2);
  font-size: 12.5px;
  line-height: 1;
  white-space: nowrap;
}
.chat-chip:hover { border-color: var(--text); text-decoration: underline;  text-decoration-color: var(--text);}

/* 결과 표 — 넓으면 자기 안에서만 가로 스크롤한다(페이지는 흔들리지 않는다). */
.chat-tbl { overflow-x: auto; margin-top: 12px; }
.chat-tbl table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.chat-tbl th, .chat-tbl td {
  padding: 7px 9px;
  border-bottom: 1px solid var(--border-soft);
  text-align: left;
  white-space: nowrap;
}
.chat-tbl th { color: var(--text-3); font-weight: 600; font-size: 11.5px; }

@media (max-width: 640px) {
  /* 폰은 세로가 짧고 키보드가 절반을 먹는다 — 더 낮게 잡아야 검색창이 남는다. */
  .chat { max-height: 44vh; padding: 10px 12px; }
  .chat-q span, .chat-a { font-size: 14.5px; }
  .chat-chip { font-size: 13px; padding: 6px 12px; }
  .chat-tbl table { font-size: 13px; }
}


/* ---- 로그인 ----
   헤더 메뉴 끝에 붙는 작은 버튼. 링크들과 같은 높이·색을 쓰되 눌리는 것임을 테두리로만
   표시한다 — 데이터 사이트에서 로그인은 주된 행동이 아니라 AI 검색 한 곳의 부가 기능이다. */
/* nav 는 내용 폭이라 그 안에서 margin-left:auto 를 걸어도 밀 공간이 없다.
   헤더 줄(.inner)에서 밀어야 오른쪽 끝으로 간다. */
.site-head .inner > .authslot { margin-left: auto; }
.authslot { display: inline-flex; align-items: center; }
.authbtn {
  padding: 3px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text-3);
  font-size: 12.5px;
  font-family: inherit;
  line-height: 1.5;
  cursor: pointer;
}
.authbtn:hover { border-color: var(--text); text-decoration: underline; text-decoration-color: var(--text);}
.authwho { margin-right: 8px; font-size: 12.5px; color: var(--text-4); }
a.authbtn { text-decoration: none; display: inline-block; }
/* 안내 페이지의 이동 버튼 — 여기서는 주된 행동이라 채운다. */
.btn-go {
  padding: 10px 18px; border: 0; border-radius: 8px;
  background: var(--accent); color: #fff;
  font-size: 14px; font-weight: 600; font-family: inherit; cursor: pointer;
}
.btn-go:hover { filter: brightness(.94); }
.btn-go:disabled { background: var(--text-4); cursor: not-allowed; }
@media (max-width: 640px) { .authwho { display: none; } }
@media (max-width: 640px) {
  .authslot { margin-left: 0; }
}


/* ---- 로그인 화면 ----
   사이트 껍데기를 벗은 전용 화면(base 의 bare 플래그). 두 단으로 나누어 왼쪽은 폼,
   오른쪽은 "로그인 없이도 되는 것" 을 둔다 — 오른쪽을 비우면 폼이 화면 왼편에 붙어
   균형이 깨지고, 마침 이 사이트는 로그인 없이 쓰는 게 기본이라 그 얘기가 어울린다. */
.loginsplit {
  display: grid;
  grid-template-columns: minmax(0, 400px) minmax(0, 1fr);
  gap: 56px;
  align-items: start;
  padding: 56px 0 72px;
}
.loginbox { margin: 0; padding: 28px; }
.loginbox h1 { margin: 0 0 6px; font-size: 22px; letter-spacing: -0.02em; }
.loginbox form { display: flex; flex-direction: column; gap: 4px; margin: 20px 0 14px; }
.loginbox label { font-size: 12.5px; color: var(--text-3); }
.loginbox input {
  padding: 11px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  font-size: 16px;              /* 16px 미만이면 iOS 가 포커스 때 화면을 확대한다 */
  font-family: inherit;
  margin-bottom: 10px;
}
.loginbox input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(0, 106, 249, .12);
}
.loginbox .btn-go { width: 100%; margin-top: 4px; }
.loginerr { margin: 0 0 8px; color: var(--up); font-size: 13px; }
.loginfoot { margin-top: 14px; }
.loginfoot .sep { margin: 0 6px; color: var(--text-4); }
.loginhint { margin-top: 4px; color: var(--text-3); font-size: 12px; }

.loginside { padding-top: 10px; }
.loginside .eyebrow {
  margin: 0 0 10px;
  font-size: 11.5px; font-weight: 600; letter-spacing: .14em;
  color: var(--text-4);
}
.loginside h2 { margin: 0 0 14px; font-size: 30px; line-height: 1.25; letter-spacing: -0.03em; }
.loginside .lead { margin: 0 0 22px; font-size: 15px; line-height: 1.7; color: var(--text-2); }
.loginfeat { margin: 0 0 22px; padding: 0; list-style: none; }
.loginfeat li {
  position: relative;
  padding: 5px 0 5px 26px;
  font-size: 14px;
  color: var(--text);
}
/* 체크 표시는 배경 이미지가 아니라 글자로 그린다 — CSS 가 없어도 목록으로 읽힌다. */
.loginfeat li::before {
  content: "✓";
  position: absolute; left: 0; top: 5px;
  color: var(--accent); font-weight: 700;
}
.loginctas { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 0; }
.btn-ghost {
  display: inline-block;
  padding: 8px 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text-2);
  font-size: 13px;
}
.btn-ghost:hover { border-color: var(--text); text-decoration: underline;  text-decoration-color: var(--text);}

@media (max-width: 900px) {
  /* 한 단으로 접되 폼을 먼저 둔다 — 로그인하러 온 사람이 스크롤하지 않게. */
  .loginsplit { grid-template-columns: minmax(0, 1fr); gap: 32px; padding: 28px 0 48px; }
  .loginside h2 { font-size: 24px; }
}


/* ---------- 표 열 정렬 ----------
   서버가 낸 순서는 그대로 두고 브라우저에서만 다시 늘어놓는다(sort.js).
   누를 수 있다는 것이 보여야 하므로 커서와 화살표 자리를 만든다 — 자리를 미리
   비워 두지 않으면 정렬할 때마다 열 너비가 흔들린다. */
th.sortable { cursor: pointer; user-select: none; white-space: nowrap; }
/* 밑줄은 **글자색을 따라간다**(currentColor). 본문 링크는 밑줄을 --text 로
   어둡게 긋는 것이 이 사이트의 관습인데, 정렬 머리글에서는 그러면 안 된다 —
   정렬이 걸린 열은 글자 농도가 --text 로 올라가므로, 밑줄만 따로 적으면 한 낱말에
   두 색이 그어진다(실측: 글자 rgb(0,106,249) / 밑줄 rgb(35,36,51)).
   선언을 아예 빼도 currentColor 가 기본값이지만, 위 a:hover 규칙을 보고
   "여기도 --text 로 맞춰야 하나" 하고 되돌리는 일이 없게 적어 둔다. */
th.sortable:hover { text-decoration: underline; text-decoration-color: currentColor; }
th.sortable::after,
th[aria-sort]::after {
  content: "";
  display: inline-block;
  width: 8px;
  margin-left: 4px;
  color: var(--text-4);
}
/* 선택자를 `[aria-sort]` 로 잡는다 — `.sortable` 은 sort.js 가 붙이는 표시라
   거기에 걸어 두면 **서버가 찍어 둔 기준 칸이 JS 가 뜨기 전까지 안 보인다**.
   속성 하나로 잡으면 서버가 찍은 것과 사람이 눌러 옮긴 것이 저절로 같아진다.
   화살표는 색과 함께 간다 — 색만으로 표시하면 색을 못 보는 사람에게 남는 것이 없다. */
/* 정렬된 열은 **색조가 아니라 농도**로 선다 (2026-09-05).
   한때 --accent(파랑)였는데 파랑은 AI 쪽 표시로 예약한다. 새 색조를 들이지도
   않는다 — 이 표에서 빨강은 상승(--up), 파랑은 하락(--down), 녹색은 NAV,
   주황은 순유입으로 **이미 뜻이 있어**, 정렬 상태에 색을 하나 더 얹으면 값의
   색과 헷갈린다. 이 사이트의 글자 농도 축("먼저 읽어야 하는가")을 그대로 쓴다:
   정렬된 머리글만 --text, 나머지는 --text-3. 화살표는 currentColor 라 따라온다. */
th[aria-sort] { color: var(--text); }
th[aria-sort="ascending"]::after { content: "\2191"; color: currentColor; }
th[aria-sort="descending"]::after { content: "\2193"; color: currentColor; }
th.sortable:focus-visible { outline: 2px solid var(--text); outline-offset: -2px; }

/* ---- 쪼개진 머리글 — 한 칸에 키가 둘 (2026-09-05) ----
   /etf/ 는 등락률을 제 칸에서 빼내 종가 칸 아랫줄로 넣었다(.chg). 칸이 줄었으니
   머리글도 줄어, **등락률로 정렬할 길이 사라졌다.** 답은 머리글이 칸을 그대로
   비추는 것이다 — 칸이 두 줄이니 머리글도 두 줄이고 각 줄이 제 키로 정렬한다.

   마크업은 `th.num.col-close.sortsplit[aria-sort]` 안에 `.sortkey` 둘이고,
   켜진 줄에 `data-active` 가 붙는다. `aria-sort`(오름/내림)는 **여전히 th 에**
   있으므로 방향은 조상에서 읽어 내린다.

   **아랫줄은 11.5px 이다 — `.chg` 와 같은 값이다.** 머리글의 '등락률' 과 그 아래
   칸의 등락률 숫자가 같은 크기로 서면, 이 줄이 저 값을 가리킨다는 것이 크기만으로
   읽힌다. 윗줄은 머리글 기본 12.5px 그대로다(thead th). 줄 사이 1px 도 `.chg` 의
   margin-top 을 그대로 가져왔다 — 칸과 머리글의 위아래 간격이 같아야 두 덩어리가
   겹쳐 읽힌다. 새 숫자는 없다.

   **표적은 줄 전체다(display: block).** 예전에는 th 하나가 통째로 표적이었다.
   그 사각형을 가로로 둘로 나눈 것뿐이라 누를 수 있는 넓이는 그대로이고, 보이는
   줄과 눌리는 줄이 정확히 같은 사각형이다. 글자만 표적으로 두면 12.5px·11.5px
   글자 넉 자를 겨냥해야 해서, 머리글 화살표를 손가락으로 겨냥하게 만들었다가
   물린 적이 있는 그 실수(아래 '순위표의 정렬 조작' 주석)를 되풀이하게 된다.
   커서는 `.sortable` 이 붙은 뒤에만 준다 — sort.js 가 뜨기 전에는 눌러도
   달라지는 것이 없어 손 모양이 거짓말이 된다.

   **줄높이 1.35 도 `.chg` 에서 가져왔다.** 물려받은 1.6 을 그대로 두면 두 줄이
   20 + 18.4px 을 써서 머리글이 38.5 → 57.89px 이 된다. 1.35 면 16.88 + 15.52 로
   **51.89px**(+13.39)이고, 그러면 머리글 내용(33.4px)이 아래 칸 내용(21.6 + 1 +
   15.52 = 38.1px)과 거의 같은 덩어리로 서서 위아래가 한 벌로 읽힌다.
   `.chg` 가 같은 값을 쓰는 이유도 같다 — 1.6 은 이 크기 글자에 과하다. */
.sortsplit .sortkey {
  display: block;
  white-space: nowrap;
  user-select: none;
  line-height: 1.35;
}
/* 아랫줄도 **윗줄과 같은 크기**다(2026-09-06, 11.5 → 물려받음).
   한때 아래 칸의 `.chg`(등락률 11.5px)에 맞춰 작게 뒀는데, 이제 그 칸의 아랫줄이
   무엇이냐에 따라 크기가 갈린다 — 등락률은 11.5px 이고 거래수량은 13.5px 이다.
   머리글이 어느 한쪽만 따라가면 나머지 칸에서 어긋나므로, 머리글은 머리글끼리
   같은 크기로 두고 아래 칸의 사정과 분리한다.
   두 줄은 자리(블록·위 1px)로 갈리고, 어느 줄이 켜졌는지는 색과 화살표가 말한다. */
.sortsplit .sortkey + .sortkey { margin-top: 1px; }
.sortsplit .sortkey.sortable { cursor: pointer; }
.sortsplit .sortkey.sortable:hover { text-decoration: underline; text-decoration-color: currentColor; }
.sortsplit .sortkey:focus-visible { outline: 2px solid var(--text); outline-offset: -2px; }

/* **th 수준의 표시를 끈다.** 위 `th[aria-sort]` 규칙은 색과 화살표를 th 에 주는데,
   쪼갠 머리글에서 그대로 두면 두 줄이 **다 켜진 것**으로 보이고 화살표는 칸 오른쪽
   아래 어중간한 자리에 하나 뜬다. 색은 머리글 기본값(--text-3, thead th)으로
   되돌린다 — `inherit` 로 두면 thead 가 아니라 table 에서 물려받아 다른 색이 된다.
   `.sortsplit[aria-sort]`(0,2,0)이 `th[aria-sort]`(0,1,1)을 이기므로 순서와
   무관하게 걸린다. **`sortsplit` 이 아닌 머리글은 이 블록에 한 글자도 안 걸린다** —
   1,100여 장의 순위·분류 표가 쓰는 표시라 건드리면 안 된다. */
.sortsplit[aria-sort] { color: var(--text-3); }
.sortsplit[aria-sort]::after { content: none; }

/* 켜진 줄에만 색과 화살표를 준다. 값·방향·자리 잡는 법은 전부 위 th 규칙에서
   그대로 가져왔다(농도 --text · \2191/\2193 · width 8px + margin-left 4px).
   **화살표 자리는 두 줄 다 미리 비운다.** 안 그러면 켜진 줄을 옮길 때마다 그 줄만
   12px 넓어져 열 너비가 흔들린다 — 위 th 규칙이 빈 `content: ""` 를 두는 것과
   같은 이유다. 색은 화살표와 함께 간다: 색만으로 표시하면 색을 못 보는 사람에게
   남는 것이 없다. */
.sortsplit .sortkey::after {
  content: "";
  display: inline-block;
  width: 8px;
  margin-left: 4px;
  color: var(--text-4);
}
.sortsplit .sortkey[data-active] { color: var(--text); }
.sortsplit[aria-sort="ascending"] .sortkey[data-active]::after { content: "\2191"; color: currentColor; }
.sortsplit[aria-sort="descending"] .sortkey[data-active]::after { content: "\2193"; color: currentColor; }


/* ---------- 순위표의 정렬 조작 ----------
   순위표는 50개씩 나뉘어 있어 브라우저 정렬(sort.js)을 달 수 없다 — 보이는 50줄만
   다시 늘어놓으면 '전체 순위'가 아니게 된다. 그래서 조작은 **전체를 다시 줄 세운
   주소로 가는 링크**다. JS 없이도 정렬이 되는 이유이기도 하다.

   한때 이 링크를 열 머리글 안에 ▼▲ 로 박아 뒀다. 정렬처럼 보이지만 실제로는
   페이지 이동이고, 모바일에서 11px 화살표 여덟 개를 손가락으로 겨냥해야 했으며,
   화살표가 차지한 만큼 열이 넓어져 정작 숫자가 밀렸다. 조작을 표 밖으로 뺀다. */
/* 정렬·페이지 이동은 #list 로 표에 떨어진다. 메뉴줄이 sticky 라 그냥 떨어지면
   표 제목이 그 뒤에 깔린다 — 그만큼 미리 띄워 둔다. */
#list { scroll-margin-top: calc(var(--head-h) + 12px); }
/* 알약 줄로 열리는 앵커. 붙박이 머리줄에 가리지 않게 그만큼 띄운다(#list 와 같다). */
#tabs { scroll-margin-top: calc(var(--head-h) + 12px); }
/* 탭 줄의 위아래 여백은 0 이다 (2026-09-07). 위는 `.subnav.capsule` 의 margin-top
   14px, 아래는 다음 카드의 margin-top 16px 이라, 알약 한 줄이 30px 을 끼고 시세
   판과 본문 사이에 떠 있었다. 이 줄은 머리와 본문을 **가르는 띠**라 양쪽에
   붙어 있는 편이 맞다.
   머리 판의 padding-bottom(16)과 다음 카드의 padding-top(18)은 그대로 둔다 —
   그건 카드 자신의 안여백이고, 그 둘만으로 알약과 글이 붙지 않는다.
   **`#tabs` 로만 건다.** 같은 `.subnav.capsule` 을 쓰는 줄이 다른 장에 생겨도
   따라오지 않는다(id 라 캡슐 규칙보다 세다). */
#tabs { margin-top: 0; }
#tabs + .card { margin-top: 0; }

.sortbar { margin: 0 0 12px; display: flex; flex-direction: column; gap: 6px; }
.sortrow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* 라벨 폭을 맞춰 두 줄의 알약이 같은 자리에서 시작하게 한다. 어긋나면 두 줄이
   한 덩어리로 안 읽히고 각각 다른 것처럼 보인다. */
.sortlab { flex: 0 0 auto; min-width: 28px; color: var(--text-3); font-size: 12px; }
.pills { display: flex; flex-wrap: wrap; gap: 6px; }
/* ---------- 고르기 ----------
   여럿 중 하나를 고르는 자리. 순위표의 구간·정렬, 차트 구간, 자리 기준, 홈 탭이
   전부 같은 일을 하므로 모양도 하나다.

   예전에는 .pill(5/12·--border) · .chartctl .pill(5/11·--border-soft) ·
   .tab(6/12·모서리 6px) 셋이 미묘하게 달랐다. 같은 조작에 세 모양이면 사용자는
   그것들이 다른 것이라고 배운다.

   선택은 **검정 채움**이다. 강조색으로 채우면 링크·호버와 같은 파랑이라 '지금
   고른 것' 과 '누를 수 있는 것' 이 같은 색이 된다. 호버는 파랑 + 밑줄로 따로 둔다. */
/* **min-height 를 두지 않는다.** 32px 을 박아 두었더니 자연 높이(패딩 5+글자
   12.5+패딩 5+테두리 2 = 24.5px)보다 7.5px 이 더 붙어 위아래로 뚱뚱해 보였다.
   높이는 패딩이 정하게 두면 다섯 알약이 같은 패딩을 쓰므로 저절로 같아진다.
   손가락으로 누르는 크기는 파일 끝 (pointer: coarse) 규칙이 따로 책임진다. */
.pill, .tab {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text-2);
  font-size: 12.5px;
  line-height: 1;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
}
.pill:hover, .tab:hover { border-color: var(--text); text-decoration: underline;  text-decoration-color: var(--text);}
.pill.on, .tab.on { border-color: var(--text); background: var(--text); color: #fff; font-weight: 600; }
/* 이미 고른 것에는 호버 강조를 하지 않는다 — 눌러도 달라지는 것이 없다. */
/* 켜진 알약은 검은 바탕에 흰 글자다. 여기서만 밑줄을 글자색(흰색)으로 둔다 —
   검은 밑줄은 검은 바탕에 묻혀 안 보인다. 규칙이 다른 게 아니라 바탕이 다르다. */
.pill.on:hover, .tab.on:hover {
  border-color: var(--text); background: var(--text); color: #fff;
  text-decoration: underline; text-decoration-color: currentColor;
}

/* 지금 기준인 열은 표에서도 티가 나야 한다 — 알약과 표가 따로 놀면 무엇으로
   줄 세웠는지 다시 위를 봐야 한다.

   **알약이 구간을 고르는 표(.period-pick, /rank/inflow/)에만 건다**(2026-09-15).
   /rank/return/ 이 한 장으로 접히며 알약이 없어지고 정렬을 머리글 클릭(sort.js)이
   맡게 됐는데, 거기서도 서버가 기본 정렬 칸(1개월)에 .cur 를 찍어 둔다. sort.js 는
   aria-sort 만 옮기고 .cur 는 모르므로, 3개월을 누르면 1개월이 이 규칙으로 여전히
   파랗고(`th.flow-col.cur` 0,2,1 이 `th[aria-sort]` 0,1,1 을 이긴다) 3개월에는
   화살표가 붙어 머리글 둘이 '기준' 처럼 보인다 — 칸의 굵기도 1개월에 영영 남는다.
   그 표는 /etf/ 와 같이 `th[aria-sort]` 하나로 기준을 알린다. */
table.period-pick th.flow-col.cur { color: var(--accent); }
table.period-pick td.flow-col.cur { font-weight: 600; }
.flow-col { white-space: nowrap; }

/* 손가락으로 누르는 화면에서는 알약을 44px 로 키운다. */
/* **알약도 한 크기다.** 예전에는 손가락 기기에서 44px·13.5px 로 키웠는데, 이는
   글자에서 이미 접은 "화면이 좁을수록 크게" 정책이 알약에만 남아 있던 것이다.
   글자 크기를 폭과 무관하게 하나로 둔 이상 알약도 같아야 한다 — 안 그러면 폰에서
   섹션 머리의 '레버리지 포함' 이 부풀어 '전체' 가 다음 줄로 밀려났다(실측 96px).
   손가락 기기의 여백은 줄 간격(.sortbar gap)으로만 조금 둔다. */
@media (hover: none), (pointer: coarse) {
  .sortbar { gap: 8px; }
}


/* ---------- 표의 종목코드 ----------
   코드는 빼지 않는다 — "curl 원문만 읽고도 코드를 알 수 있어야 한다" 가 이 사이트의
   수용 기준이고, 종목코드 검색어도 실제로 들어온다.

   다만 **한 칸을 통째로 내주지는 않는다.** 예전에는 넓은 화면에서만 별도 열(82~97px)을
   쓰고 좁은 화면에서는 이름 아래로 내렸는데, 같은 값을 폭에 따라 다른 자리에 그리느라
   규칙이 둘이었고 넓은 화면의 이름 칸만 그만큼 굶었다. 좁은 화면이 쓰던 방식으로
   통일한다 — 이름 아래 작은 글씨. 사람은 이름을 넓게 보고, 코드는 그대로 읽힌다. */
/* 종목코드는 이름 **옆 괄호**로 붙인다. 아랫줄로 내리면 줄 높이가 두 배가 되어
   표가 성기게 늘어지고, 정작 이름과 코드가 한 덩어리로 안 읽힌다.
   괄호는 CSS 로 만든다 — 마크업에 넣으면 코드가 없는 행에 빈 괄호가 남는다. */
.row-code::before { content: " ("; }
.row-code::after { content: ")"; }
.row-code {
  display: inline;
  color: var(--text-4);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

/* ---- 종가 아래 등락률 (2026-09-05) — 당시의 기록 ----
   **크기·굵기에 관한 부분은 2026-09-14 에 뒤집혔다**(바로 아래 규칙 주석이 현행이다).
   지우지 않고 남기는 것은 왜 한때 작았는지를 알아야 다시 작게 만들지 않기 때문이다.
   자리(종가 칸 아랫줄)·색·줄높이 1.35 의 판단과 행 높이 예산의 셈법은 그대로 유효하다.

   등락률이 제 칸을 버리고 종가 칸 **안 아랫줄**로 들어온다. 표가 한 칸 좁아지고,
   "얼마인데 오늘 얼마나 움직였나" 가 한 덩어리로 읽힌다 — 종목코드를 이름 옆으로
   들인 것(.row-code)과 같은 수다.

   **크기는 11.5px.** 이 사이트의 보조 글자는 셋뿐이고 각자 맡은 것이 다르다 —
   11px(.row-code)은 식별자, 10px(.rowtags .badge)은 표시, 11.5px(.lead-col .lead-sub)만
   **기준값 아래 붙는 보조 값**이다. 등락률은 읽으러 온 숫자라 셋 중 값을 맡은
   치수를 그대로 가져온다. 새 숫자를 만들지 않는다.

   **색은 여기서 만들지 않는다.** 템플릿이 `.chg up|down|flat` 으로 찍고
   `.up/.down/.flat`(0,1,0)이 이미 --up/--down/--flat 을 준다. 이 규칙에 color 를
   적지 않으므로 그 규칙이 그대로 걸린다 — 칸(td.num)에도 색 규칙이 없어 특이도를
   올릴 일이 없다. 실측 up rgb(241,78,78) · down rgb(51,106,255) · flat rgb(113,116,124).

   **줄높이를 글자에 붙인다(1.35 = 15.5px).** 본문 기본(1.6)을 물려받으면 18.4px 을
   써서 행마다 3px 을 더 먹는다. .quote .last 가 같은 이유로 1.12 를 갖는다.

   오른쪽 정렬·등폭 숫자는 적지 않는다 — 칸이 `td.num` 이라 둘 다 물려받는다.

   **행 높이 예산(전부 실측).** 행 높이는 `18(안여백) + 1(선) + 가장 높은 칸의 내용`
   이다. 종가 칸 내용은 첫 줄 21.6px(13.5px 글자 × 1.6) 하나였고, 이 줄이 16.5px
   (margin 1 + 줄 15.52)을 더해 38.1px 이 된다.

   - 이름이 **두 줄**인 행: 이름 칸 내용이 49.8px 이라 종가 칸 38.1px 이 그 아래로
     들어간다 → 행 68.78px 그대로, **0px 증가.**
   - 이름이 **한 줄**인 행: 이름 칸 내용이 28.2px 이고(배지가 줄상자를 21.6 → 28.2 로
     밀어 올린다) 종가 칸이 그것을 넘어선다 → 47.19 → 57.11px, **+9.92px.**

   1,167행 전량 실측(등락률 칸을 접은 마크업으로):
     390px  — 0px 936행 · +9.92px 128행 (두 줄 이름이 다수라 표는 1.8% 만 길어진다)
     768px  — 0px 517행 · +9.92px 417행 · **−11.67px 116행** (칸이 하나 줄어 이름 칸이
              넓어지면서 두 줄이던 이름이 한 줄로 돌아온 행들이다)
     1,280px — +9.92px 1,064행 (이 폭에서는 이름이 거의 다 한 줄이라 전부 늘어난다)

   즉 **아랫줄이 공짜로 서는 한계**는 두 가지다. 두 줄 행에서는 종가 칸이 49.8px 까지
   써도 되므로 이 줄에 28.2px(49.8 − 21.6)까지 쓸 수 있다 — 지금 16.5px 이니 11.7px
   이 남는다. 한 줄 행에서는 이름 칸의 28.2px 이 천장이라 6.6px(28.2 − 21.6)까지만
   공짜다. 그 6.6px 은 배지가 이미 벌어 둔 자리라, 16.5px 중 실제로 행을 미는 것은
   9.9px 뿐이다. 크기를 더 키우고 싶다면 두 줄 행이 안 늘어나는 한계가
   font-size 20px(= (28.2 − 1) / 1.35) 이고, 한 줄 행은 어느 값에서든 늘어난다. */
/* 칸 안의 **아랫줄 값**. `.chg` 는 방향이 있는 파생값(등락률·3개월 수익률·추적오차),
   `.subval` 은 방향이 없는 곁값(거래수량·시가총액·TER·지급 횟수)이다.

   **글자는 윗줄과 같다 — 크기도 굵기도(2026-09-14 사용자 결정 "동일한게 기본이야").**
   한 규칙에 둘을 묶어 둔 것은 다음에 한쪽만 어긋나지 않게 하기 위해서다. 남는
   차이는 **색뿐**이고, 그것은 이 규칙이 아니라 템플릿이 붙이는 방향 클래스가 만든다.

   ---- 뒤집힌 판단 (옛 근거를 지우지 않고 남긴다) ----
   2026-09-05 `.chg` 를 들일 때의 근거는 이랬다: "등락률은 종가에 딸린 파생값이라
   한 단계 작고 옅은 것이 맞다" — 그래서 11.5px · font-weight 500 을 박았다.
   2026-09-06 `.subval`(거래수량)을 들일 때는 그 반대로 갔다: "같은 거래를 돈으로
   재느냐 주식 수로 재느냐의 차이일 뿐이라 둘의 무게가 같아야 한다. 한쪽을 옅게
   두면 그쪽이 곁다리로 읽힌다."

   그 결과 **같은 표 안에서 아랫줄의 크기가 칸마다 갈렸다** — 순자산/시가총액·
   총보수/TER·분배율/횟수는 윗줄과 같고, 종가/등락률·1개월/3개월·괴리율/추적오차만
   작았다. 2026-09-14 사용자가 /compare/{지수} 화면을 보며 "위,아래쪽 데이터의
   폰트크기가 달라 동일하게 위의폰트 크기로하자 / 동일한게 기본이야" 라고 결정해,
   **「두 줄 칸의 아랫줄은 윗줄과 같다」가 기본 규약**이 됐다. `.subval` 이 이미
   그 규약이었고 `.chg` 만 예외였던 셈이라, `.chg` 에서 font-size 와 font-weight
   를 걷어 냈다. 파생값이라는 관계는 크기가 아니라 **자리**(같은 칸 아랫줄)가
   이미 말한다.

   ---- 이 규칙이 정하는 것 ----
   **색은 여기서 만들지 않는다.** 템플릿이 `.chg up|down|flat` 으로 찍고
   `.up/.down/.flat`(0,1,0)이 이미 --up/--down/--flat 을 준다. 이 규칙에 color 를
   적지 않으므로 그 규칙이 그대로 걸린다 — 칸(td.num)에도 색 규칙이 없어 특이도를
   올릴 일이 없다. 실측 up rgb(241,78,78) · down rgb(51,106,255) · flat rgb(113,116,124).
   `.subval` 에 방향색이 안 붙는 것도 그대로다 — 거래수량은 오르내림이 아니라
   수량이라, 색을 주면 없는 방향을 말하게 된다.

   **줄높이를 글자에 붙인다(1.35).** 본문 기본(1.6)을 물려받으면 13.5px 글자가
   21.6px 을 써서 행마다 3px 을 더 먹는다. .quote .last 가 같은 이유로 1.12 를 갖는다.

   오른쪽 정렬·등폭 숫자는 적지 않는다 — 칸이 `td.num` 이라 둘 다 물려받는다.

   **행 높이는 1px 도 안 늘어난다 — 전부 실측이다.** 09-05 주석이 계산해 둔
   "한 줄 행은 +9.92px" 예산은 그때의 이야기다. 그 뒤 `.subval` 칸(순자산/시가총액·
   총보수/TER·분배율/횟수)이 **13.5px 아랫줄로 이미 서 있어서**, 두 줄 칸의 바닥을
   그쪽이 정하고 있었다. 11.5px 이던 `.chg` 칸은 그 바닥보다 **낮은** 칸이었다.

   1280px `/etf/` 한 행의 칸별 내용 높이(실측):
     이름 23.14 · 운용사 14 · **종가 35.11 → 37.81** · 1개월 35.11 → 37.81 ·
     순자산 37.81(변화 없음) · 총보수 37.81 · 분배율 37.81   → 행 53.31px 그대로.
   즉 `.chg` 칸이 바닥과 **맞닿을 뿐** 그 위로 올라서지 않는다.

   전 행 실측(숨은 행까지 다 펴서 전후 비교, 390 · 1280px 두 폭):
     /etf/ 1,168행 · /theme/0101999 433행 · /stock/005930/etf 220행 ·
     /rank/dividend-yield 50행 · /compare/kospi-200 22행
     → **표 총높이 변화 +0.0px (0.000%)**, 행 높이 종류(53.31·53.81·56.19·77.78)도
       그대로, **열 폭 0.1px 도 안 움직임**, 세 줄로 접힌 칸 0 → 0,
       390px 에서 documentElement.scrollWidth === clientWidth (390/390) 유지.

   **공짜인 한계는 13.5px 이 정확히 그 끝이다.** 두 줄 칸 내용은
   `윗줄 18.59 + 1 + 글자×1.35` 라, 글자가 13.5px 일 때 37.81px 로 `.subval` 바닥과
   같아진다. 더 키우면 두 클래스가 함께 올라가 행이 밀린다(24px 로 눌러 보면
   51.98px, 행 53.31 → 67.48px). 그러니 이 규칙의 크기를 물려받기(13.5px)에서
   **올려 박지 않는다.**

   **아직 규약 밖에 있는 아랫줄이 하나 있다 — `.lead-sub`**(기준 칸의 곁값,
   아래 `.lead-col .lead-sub`). 11.5px · font-weight 500 이라 09-05 의 옛 판단이
   그대로 남아 있고, /rank/surge · /rank/new-high 48장에서만 쓰인다. 그 표에서는
   기준 칸 아랫줄만 작고 나머지 칸 아랫줄은 이 규칙대로 같은 크기라 한 표 안에서
   갈린다. 여기서 함께 고치지 않은 것은 그 규칙이 이 구역 밖이기 때문이다 —
   다음에 손대는 사람이 규약에 맞출 자리다.

   머리글(`.sortsplit .sortkey`)은 이 규약을 따르지 않아도 된다. 09-06 에 머리글은
   머리글끼리 같은 크기(12.5px)로 두고 아래 칸의 사정과 분리하기로 이미 정했다. */
.chg,
.subval {
  display: block;
  margin-top: 1px;
  line-height: 1.35;
}

@media (max-width: 640px) {
  /* 여기 '순위표의 총보수·순자산을 접는다'(table.mobile-lean) 규칙이 있었다.
     2026-09-17 에 걷었다(사용자 지적: /rank/newest 가 데스크탑과 모바일에서 칸이
     다르다). 같은 사이트 안에서 /etf/ 와 /rank/dividend-yield 는 좁은 화면에서도
     전 칸을 가로 스크롤로 보여 주는데 순위 다섯 장만 두 칸을 감춰, 표마다 칸 수가
     달라 보였다. 이제 모든 표가 같은 규칙이다: 칸은 폭과 무관하게 같고, 넘치는
     몫은 .table-scroll 이 진다. */

  /* 구간 칸이 여럿인 순위는 좁은 화면에서 칸이 넘친다. 이름 옆 두어 칸
     말고는 어차피 보이지 않는데, 가로로 끌어야 보이는 칸을 잔뜩 달고 있으면 표가
     끊긴 것처럼만 보인다. 지금 고른 구간 하나만 남긴다 — 순위 · ETF · 그 구간.

     다른 구간과 종가·등락률을 접어도 길이 막히지 않는다. 구간은 표 위 알약이
     고르고, 종가·등락률은 종목을 눌러 상세로 가면 있다. 예전처럼 머리글 화살표가
     조작을 맡고 있었다면 이 칸들을 접는 순간 갈 곳이 사라졌을 것이다.

     **그래서 알약이 있는 표(.period-pick)에만 건다**(2026-09-15). /rank/return/ 이
     한 장으로 접히며 구간 알약이 없어지고 정렬은 머리글 클릭(sort.js)이 맡게 됐다 —
     위 문단이 말한 바로 그 상태라, 거기서 이 규칙이 살아 있으면 폰에서 1개월 말고
     여섯 구간에 닿을 길이 없다. `.period-pick` 은 _listtable.html 이 sort_groups 가
     있을 때만 찍는 표식이라 지금은 /rank/inflow/ 만 받는다. /rank/return/ 은
     `.rank-periods` 만 받아 이 규칙에 안 걸리고, 폰에서는 /etf/ 처럼 이름 칸을
     고정한 채(.table-scroll 의 th.pin · td.name.pin) 가로로 끌어 종가 + 구간 일곱,
     여덟 칸을 다 본다. 종가·등락률 줄은 그 두 칸을 내보내는 알약 표가 생기면 다시
     일한다 — 지금 /rank/inflow/ 는 둘 다 drop 이라 그 줄이 잡는 칸이 없다.

     HTML 에는 구간이 모두 그대로 있다 — 접는 것은 화면일 뿐이다. */
  table.rank-periods.period-pick th.flow-col:not(.cur), table.rank-periods.period-pick td.flow-col:not(.cur),
  table.rank-periods.period-pick th.col-close, table.rank-periods.period-pick td.col-close,
  table.rank-periods.period-pick th.col-change, table.rank-periods.period-pick td.col-change { display: none; }
}


/* ---------- 표 본문의 링크 ----------
   표 한 화면에 종목명이 50~1,000줄 들어차는데 전부 파란 링크면 화면이 파랗게
   물들어 정작 값(수익률·보수)이 안 읽힌다. 링크는 본문 색으로 두고, 누를 수
   있다는 것은 hover·focus 의 밑줄로 알린다 — 표 안에서는 위치 자체가 링크임을
   말해 주므로 색까지 쓸 필요가 없다.

   **칸 클래스를 집지 않는다.** 예전에는 td.name 만 적혀 있었는데, /theme/ 의
   분류 칸(td.clip)이 빠져 그 39줄만 파랗게 남았다. 칸이 하나 늘 때마다 여기를
   같이 고쳐야 하는 구조 자체가 빠뜨리기 쉬웠다.
   th 는 넣지 않는다 — 열 머리글의 정렬 링크는 파란색이 곧 '누를 수 있다' 는
   표시라, 본문과 달리 색을 빼면 정렬이 되는 줄 모른다. */
.table-scroll td a { color: var(--text); }
.table-scroll td a:hover,
.table-scroll td a:focus-visible { text-decoration: underline;  text-decoration-color: var(--text);}

/* 구간 칸이 여럿인 표(수익률·자금 순유입)에서 종목명 칸이 접히는 것.

   td.name 의 바닥값은 9em(약 122px)인데, 자금 순유입 표는 구간 칸이 일곱이라
   (1일·1주·1개월·3개월·6개월·연초이후·1년) 그 일곱이 폭을 다 가져가고 이름이
   정확히 바닥값까지 눌린다 — 실측(1280px)에서 50행 중 41행이 두세 줄로 접혔다.
   같은 화면의 /rank/aum 은 이름 칸이 378px 다.

   칸을 숨겨 자리를 만들지 않는다(기획서: 숨기면 봇이 읽을 텍스트가 줄어든다).
   이름에 쓸 만한 바닥값을 주고, 넘치는 폭은 .table-scroll 이 가로로 굴린다 —
   페이지 본문은 그대로 넘치지 않는다.

   좁은 화면은 건드리지 않는다. 알약이 구간을 고르는 표(/rank/inflow/)는 거기서
   고른 구간만 남기고 나머지를 접으므로(위 @media 의 `.rank-periods.period-pick`
   규칙) 애초에 눌리지 않는다. 알약이 없는 /rank/return/ 은 접지 않고 여덟 칸을
   그대로 두지만, 그 폭에서는 `.table-scroll td.name.pin` 의 190px 바닥·상한
   (0,3,1)이 이 규칙(0,1,2)을 이겨 이름 칸이 190px 로 고정되고 나머지는 가로로
   굴린다 — 여기 17em 은 641px 위에서만 일한다.

   한때 15em 으로 줄였다. 종목코드 전용 열을 되살리며 그 자리를 떼어 오려던
   것인데, 코드 열 자체가 없어지고 이름 밑으로 들어가면서(.row-code) 떼어 줄
   상대가 사라졌다. 재 봤을 때 17em → 15em 은 접히는 줄이 둘 느는 값이라
   (50행 중 39 → 37) 얻는 것 없이 잃기만 한다. 17em 으로 되돌린다. */
table.rank-periods td.name { min-width: 17em; }

/* 이름 열 최소 폭 (모바일).
   코드 열을 접어 82px 을 비웠는데 표 자동 배분이 그걸 순번·종가 칸으로 흘려보내
   이름은 122px 그대로였다. 실측: 122px 이면 60행 중 12행만 한 줄이고 최대 5줄까지
   접힌다. 190px 이면 46행이 한 줄에 들어간다(가로 스크롤 226→294px).
   더 넓히면 한 줄 비율은 조금 오르지만(210px 52행) 이 칸이 sticky 라 늘린 만큼
   데이터 칸의 가시 폭을 영구히 뺏는다 — 360px 화면에서 190px 이 한계선이다. */
@media (max-width: 640px) {
  .table-scroll td.name.pin, .table-scroll th.pin,
  .table-scroll td.rep, .table-scroll th.rep { min-width: 190px; }
  /* 폭 상한. 세로 상한을 푼 뒤로는 이것이 없으면 칸이 긴 이름 쪽으로 넓어진다. */
  .table-scroll td.name.pin, .table-scroll td.rep { max-width: 190px; }
}

/* 이름 열 최소 폭 (641px 위) — **바닥이 좁은 화면에서만 있었다.**
   위 규칙은 `@media (max-width: 640px)` 안에만 있고, 그 위에서는 이름 칸이 남는
   폭을 받는 구조였다. 그래서 창을 줄이면 640px 에 닿기 전까지 계속 작아진다.
   실측(/etf/, 수정 전): 1280px 456px · 1024px 420px · 900px 308px · 834px 242px
   → **768px 176px**. 좁은 화면의 바닥값(190px)보다도 좁고 전 구간에서 가장 좁은
   지점이다 — 아이패드 세로가 정확히 거기다. 150행 표본에서 두 줄로 접힌 행 138,
   배지가 클램프에 잘린 행 16으로 둘 다 그 폭이 최악이었다.

   값은 **17em 이다 — 새 치수를 만들지 않는다.** 바로 위 .rank-periods 가 같은
   문제(구간 칸 일곱이 폭을 다 가져가 이름이 바닥까지 눌린다)에 이미 쓰는 값이고,
   그래서 그 표들은 이 규칙이 들어와도 폭이 그대로다.
   재 보면 768px 에서 접힌 행 138 → 87, 잘린 배지 16 → 0 이다(이름 뒤에 배지가
   셋까지 붙고 그 셋이 약 137px 이다).

   **좁은 화면은 건드리지 않는다.** 이 칸은 sticky 라 늘린 만큼 데이터 칸의 가시
   폭을 영구히 뺏는다 — 위 주석의 '360px 에서 190px 이 한계선' 이라는 판단을
   뒤집을 근거가 없어 그대로 둔다(641px 을 경계로 둘이 만난다).
   834px 부터는 이름 칸이 저절로 242px 이상이라 이 규칙은 거기서 일을 하지 않는다.
   무는 구간은 641~833px 하나다.

   대가: 768px 에서 가로 스크롤이 0 → 53px 생기고 총보수가 첫 화면 밖으로 나간다.
   그 폭에서 이름이 176px 이던 것과 맞바꾼 값이다. */
@media (min-width: 641px) {
  /* /stock/ 의 대표 ETF 칸도 같은 값을 쓴다. ETF 이름이 서는 칸은 이 폭이
     정본이라(2026-09-06 지시) 장마다 다른 수를 두지 않는다. */
  .table-scroll td.name.pin, .table-scroll th.pin,
  .table-scroll td.rep, .table-scroll th.rep { min-width: 17em; }
  .table-scroll td.name.pin, .table-scroll td.rep { max-width: 17em; }
}




/* 말풍선은 position:relative 를 가진 가장 가까운 조상을 기준으로 뜬다. 기준이 없으면
   엉뚱한 데 걸리고, 너무 먼 조상이면 누른 자리에서 한참 아래에 나타난다.

   가격 머리의 물음표는 걷어냈다(묻고 싶은 말들이 아래 '주요 지표' 로 갔다). 그 카드가
   제 기준을 갖게 한다 — 물음표가 제목 옆이라 말풍선이 바로 밑에 붙는다. */
.card:has(> h2 .help) { position: relative; }
/* 기준이 카드이므로 폭도 카드에 맞춘다. 공용값(min(440px, 100vw - 32px))은 화면 기준이라
   카드 안여백만큼 오른쪽으로 넘쳤다(실측 우 393 vs 화면 390). 100% 면 카드 오른끝에
   정확히 선다 — 카드 폭이 바뀌어도 따라온다. */
/* **자식(`>`)이 아니라 자손이다** (2026-09-07). 수익률·자금 순유입·구성종목 세
   카드에서 물음표가 기준일 도장(`.head-asof`) 안으로 들어가면서 `> h2 > .help`
   가 더는 맞지 않게 됐다 — 그대로 두면 그 셋만 말풍선이 공용값(min(440px,
   100vw-32))으로 좁아져, 같은 페이지에서 카드마다 판 너비가 갈린다. */
.card:has(> h2 .help) > h2 .help-body { max-width: 100%; }

/* 말풍선 안의 링크 (2026-09-07). 예전 값 #9fc0ff 는 **어두운 말풍선** 시절의
   색이다. 판이 흰색으로 바뀐 뒤로는 그 옅은 파랑이 흰 바탕에 떠 대비가 2:1 도
   안 됐다. 이 사이트에서 **파랑은 AI 관련 요소 전용**이라 본문 링크색으로
   되돌리는 길도 없다 — 글자색은 문장 그대로 두고 밑줄이 링크를 말한다.
   마우스를 올리면 밑줄만 진해진다(.morelink·.help-btn 이 이미 쓰는 방식이다). */
.help-body a { color: inherit; text-decoration: underline; text-decoration-color: var(--text-4); }
.help-body a:hover { color: inherit; text-decoration-color: var(--text); }

/* ---------- 같은 분류에서의 자리 (순자산 막대) ----------
   표를 걷어내고 막대로 바꾼 자리다. 이 카드가 답하는 질문은 "이 ETF 가 같은
   분류에서 어느 정도 규모인가" 하나인데, 숫자만 늘어놓으면 '3.2조' 와 '8,900억'
   의 차이가 눈에 들어오지 않는다. 길이는 한눈에 읽힌다.

   grid 로 이름·막대·값 세 칸을 고정한다. 이름 폭을 고정해야 막대의 시작점이
   줄마다 같아지고, 그래야 길이 비교가 성립한다. */
.peerbars { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 9px; }
.peerbars li {
  display: grid;
  /* 이름이 남는 폭을 갖고 막대는 상한을 둔다. 예전에는 막대가 1fr 이라
     긴 종목명이 13em 에서 잘리는데 막대만 화면 절반을 먹었다. */
  /* 마지막 칸을 auto 로 두면 안 된다. li 마다 그리드가 따로라 그 줄의 값 길이에
     맞춰지고, 값이 길이가 제각각인 축(순자산: '9.4조원' vs '2,269.5억원')에서는
     막대 시작점이 줄마다 어긋난다(실측 916·936·944px). 고정 칸으로 잡고 값은
     그 안에서 오른쪽 정렬한다 — 어느 축이든 막대가 같은 x 에서 시작한다. */
  grid-template-columns: 2.2em minmax(0, 1fr) minmax(56px, 160px) 7.2em;
  align-items: center;
  gap: 10px;
  font-size: 13px;
}
/* 등수. 자기가 상위 5 밖이면 1·2·3·4·5·47 처럼 번호가 건너뛰는데, 그 간극이
   바로 "한참 아래" 라는 뜻이라 굳이 메우지 않는다. */
.peerbars .rk { color: var(--text-4); font-variant-numeric: tabular-nums; text-align: right; }
.peerbars .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-2); }
.peerbars .nm a { color: var(--text-2); }
.peerbars .nm a:hover { text-decoration: underline; text-decoration-color: var(--text);}
.peerbars .bar { height: 10px; border-radius: 999px; background: var(--surface-tint); overflow: hidden; }
.peerbars .bar i { display: block; height: 100%; border-radius: 999px; background: #9db8e0; }
.peerbars .v { color: var(--text-3); font-variant-numeric: tabular-nums; white-space: nowrap;
               text-align: right; }

/* 한 줄로 서는 폭(641px 이상)에서는 막대에 자리를 더 준다. 1fr 을 이름이 다
   먹어 1,280px 에서 이름 726px · 막대 160px 였는데, 이름은 그만큼 필요하지도
   않고(가장 긴 종목명도 잘리지 않는다) 정작 이 카드의 주인공인 막대가 오른쪽에
   몰려 짧아 보였다. 이름에 상한을 두고 남는 폭을 막대가 가져간다.

   분기를 1025px 로 잡았다가 641px 로 내렸다 — 987px 창처럼 그 사이 폭에서
   여전히 이름만 넓고 막대는 160px 로 남아 있었다.
   640px 이하는 아래 블록에서 두 줄로 쌓으므로 여기 규칙이 필요 없다. */
@media (min-width: 641px) {
  .peerbars li { grid-template-columns: 2.2em minmax(0, 20em) minmax(160px, 1fr) 7.2em; }
}

/* 주인공 줄. 남들 사이에서 어디인지가 이 카드의 전부라 색과 굵기를 함께 준다. */
.peerbars .me { font-weight: 700; }
.peerbars .me .nm, .peerbars .me .v { color: var(--text); }
.peerbars .me .bar i { background: var(--accent); }

/* 순자산 창에서만 막대를 녹색으로 바꾼다. 축은 라디오 + :checked 로 갈리고 각 창이
   .paxpane-fee / .paxpane-aum 을 갖는다 — 창 클래스로 집으면 JS 없이 색까지 따라온다.
   주인공 줄도 함께 진한 녹색으로 옮긴다. 여기만 파랑으로 남으면 한 카드 안에 색이
   둘 섞여 '주인공' 이 아니라 '다른 것' 으로 읽힌다. */
.paxpane-aum .peerbars .bar i { background: var(--bar-aum); }
.paxpane-aum .peerbars .me .bar i { background: var(--bar-aum-me); }

/* 총보수 창은 같은 방식으로 버건디다. 파랑이었는데, 파랑은 링크(--accent)와
   하락(--down)이 이미 쓰는 색이라 이 막대에서만 다른 뜻을 지지 못했다.
   기본값(.peerbars .bar i 의 파랑)은 남겨 둔다 — 지금은 두 축이 모두 자기 색을
   덮어 쓰므로 화면에 나오지 않지만, 축이 하나 더 붙으면 그때 받아 주는 자리다. */
.paxpane-fee .peerbars .bar i { background: var(--bar-fee); }
.paxpane-fee .peerbars .me .bar i { background: var(--bar-fee-me); }

@media (max-width: 640px) {
  /* 좁은 화면에서 이름 13em 은 막대가 설 자리를 남기지 않는다. 이름을 윗줄로
     올리고 막대·값을 아랫줄에 둔다 — 막대 시작점은 여전히 줄마다 같다. */
  /* 좁은 화면도 같은 이유로 값 칸을 고정한다. */
  .peerbars li { grid-template-columns: 2.2em 1fr 6.6em; grid-template-areas: "rk nm nm" "rk bar v"; gap: 4px 8px; }
  .peerbars .rk { grid-area: rk; align-self: center; }
  .peerbars .nm { grid-area: nm; white-space: normal; }
  .peerbars .bar { grid-area: bar; }
  .peerbars .v { grid-area: v; }
}

/* 막대 기준 알약(총보수·순자산). 라디오 + :checked 라 JS 없이 갈아 끼운다.
   두 벌 모두 HTML 에 있어 크롤러는 둘 다 읽는다. */
.paxpane { display: none; }
#pax-fee:checked ~ .paxpane-fee,
#pax-aum:checked ~ .paxpane-aum { display: block; }
/* 지금 고른 기준을 알약으로 알린다. label 이라 :checked 를 직접 못 받으므로
   앞선 라디오에서 형제 선택자로 집는다.

   **집는 칸이 `.paxbar` 에서 `h2` 로 바뀌었다** (2026-09-11). 알약이 제목 줄로
   올라가면서 알약 줄 자체가 없어졌다. `~` 는 뒤에 오는 형제만 닿으므로 라디오도
   h2 앞으로 옮겨 두었다(마크업) — 안 그러면 이 두 규칙과 아래 판 갈아 끼우기가
   조용히 죽어 알약을 눌러도 아무 일이 없다. */
#pax-fee:checked ~ h2 label[for="pax-fee"],
#pax-aum:checked ~ h2 label[for="pax-aum"] {
  border-color: var(--text); background: var(--text); color: #fff; font-weight: 600;
}
#pax-fee:focus-visible ~ h2 label[for="pax-fee"],
#pax-aum:focus-visible ~ h2 label[for="pax-aum"] {
  outline: 2px solid var(--accent); outline-offset: 2px;
}
#sec-peers > h2 .pill { cursor: pointer; user-select: none; }
/* 알약을 **제목 줄** 오른쪽 끝으로 (2026-09-11 지시 "?는 제목옆으로 가고 동일한
   줄 오른쪽에 총보수, 순자산 버튼 나란히"). 예전에는 알약이 제목 아래 자기 줄
   (`.sortbar.paxbar > .sortrow`)에 서서, 제목 줄은 왼쪽만 · 알약 줄은 오른쪽만
   차 있어 두 줄이 각각 반쪽씩 비었다. 지금은 알약이 h2 안으로 올라와 그 한 줄을
   같이 쓴다 — 마크업의 `.sortbar.paxbar`·`.sortrow` 감싸개는 걷었다(그 클래스
   자체는 목록 장의 걸러내기 줄이 계속 쓰므로 규칙은 남아 있다).

   `.card > h2` 는 이미 `display: flex; align-items: center; gap: 4px`(705행)다.
   그래서 여기서 더할 것은 두 가지뿐이다 — **줄바꿈 허용**과 **알약을 오른끝으로**.
   `margin-left: auto` 는 앞의 두 조각(제목 글자 · 물음표)을 왼쪽에 붙여 둔 채
   알약만 민다. `justify-content: flex-end` 로 하면 물음표까지 오른쪽으로 끌려가
   제목과 알약 사이에 떠 버린다.

   좁아지면 알약이 **아랫줄로 내려간다**. h2 는 카드 폭에 묶여 있으므로 넘치는
   대신 줄이 늘어난다 — 가로 스크롤이 생기지 않는다(390px 관문). 내려간 줄에서도
   `margin-left: auto` 가 살아 알약은 오른끝에 선다.

   **말풍선 기준칸은 그대로 `.card > h2` 다**(3449행 position: relative). 물음표가
   제목 옆으로 돌아왔으니 다른 카드와 같은 기준이고, 판 폭도 공용
   `.card:has(> h2 .help) > h2 .help-body`(4643행)가 카드 폭으로 묶는다 —
   `#sec-peers` 만의 예외 처방은 필요 없다. */
#sec-peers > h2 { flex-wrap: wrap; }
/* 위아래 2px 은 줄이 둘로 갈렸을 때 알약이 제목 글자에 달라붙지 않게 하는 몫이다.
   한 줄일 때는 알약(24.5px)이 제목 줄높이보다 커서 이 값이 카드 제목 줄 높이를
   그만큼 늘리는데, 4px 이라 눈에 걸리지 않는다. */
#sec-peers > h2 .paxpills { margin-left: auto; }

/* ---- 알약 묶음을 캡슐 하나에 담는다 (2026-09-13) ----
   지시 — "큰셀안에 알약이 있는 스타일로 변경". 낱개 알약이 저마다 테두리를 갖고
   떠 있던 것을 껍데기 하나에 담는다. 값은 새로 고르지 않고 이 파일에 이미 있는
   `.listfilter .pillcap`(목록 걸러내기)에서 가져온다: --surface-tint 껍데기 ·
   반지름 999px · 안여백 3px · 알약 사이 2px · 안쪽 알약은 제 테두리와 바탕을
   벗는다. 사이트에서 '고르는 줄' 은 한 모양이어야 하므로 **새 색도 새 치수도
   만들지 않는다.**

   (처음 만들 때는 상세 장의 절 이동 띠 `.subnav.capsule` 도 같은 캡슐이라 거기서도
   가져왔다. 그 띠는 2026-09-22 에 밑줄 탭으로 바뀌어 더는 캡슐이 아니다. 이 묶음의
   값은 그대로다. 캡슐 규약의 원본은 이제 `.listfilter .pillcap` 하나다.)

   그 띠와 달리 여기 없는 것 둘.
     · `position: sticky` 와 바깥 흰 테 : 그 띠가 sticky 라 껍데기 바깥 경계를
       만들려고 뒀던 처방이다. 여기는 카드 안 제목 줄이고 흰 카드 위에 옅은
       --surface-tint 가 그대로 드러난다.
     · `width: 100%` : 그 띠는 줄 전체를 채우는 목차지만 이 묶음은 둘뿐이고
       **제목 줄 오른쪽 끝에 붙어 있어야 한다**(2026-09-11 지시 "동일한 줄 오른쪽에
       총보수, 순자산 버튼 나란히"). 위 `margin-left: auto` 가 미는 일을 하려면
       껍데기 폭이 내용만큼이어야 한다 — 늘리면 제목을 밀어낸다.

   글자는 그대로 12.5px(`.pill` 공용값)다.

   위아래 안여백은 껍데기의 3px 이 이전 `padding: 2px 0` 을 대신한다 — 줄이 둘로
   갈렸을 때 알약이 제목 글자에 달라붙지 않게 하던 몫이라 없어지면 안 된다. */
#sec-peers > h2 .paxpills {
  align-items: center;
  gap: 2px;
  padding: 3px;
  background: var(--surface-tint);
  border-radius: 999px;
}
/* 캡슐 안이므로 낱개 테두리와 바탕을 벗는다(`.listfilter .pillcap .pill` 과 같다).
   **고른 것을 칠하는 규칙은 이것에 지지 않는다** — `#pax-fee:checked ~ h2
   label[for="pax-fee"]`(위)이 특이도 (1,2,2)로 이 규칙 (1,2,1)보다 무겁다.
   껍데기를 씌우면서 그 선택자를 건드리지 않았으므로 검정 채움과 포커스 링이
   그대로 돈다(눌러서 표가 갈아 끼워지는 것까지 실측 확인).
   호버 배경은 주지 않는다 — 주면 특이도가 :checked 규칙을 넘어서 **고른 검은
   알약이 마우스만 올려도 흰색으로 되돌아간다.** 호버 표시는 공용 `.pill:hover` 의
   밑줄이 그대로 낸다(`.listfilter .pillcap .pill` 도 같은 선택이다). */
#sec-peers > h2 .paxpills .pill { border-color: transparent; background: transparent; }
/* 제목 줄과 첫 판 사이. 예전에는 알약 줄(.paxbar margin-top 12 · margin-bottom 12)
   이 그 틈을 내고 있었는데 그 줄이 없어졌다. h2 의 margin-bottom 4px 만 남으면
   막대 목록이 제목에 붙는다. */
#sec-peers > .paxpane { margin-top: 10px; }
/* 판 끝의 설명문과 '전체 보기' 사이 (2026-09-07). 설명문의 margin-bottom 12 와
   링크의 margin-top 14 가 겹쳐 26px 이 비어 있었다 — 링크가 카드 바닥에 혼자
   떨어져 어느 판에 딸린 것인지 안 보였다. 둘 다 걷어 판에 붙인다.
   판 안 **마지막** 문단에만 건다: 문단이 여럿인 판에서 문단 사이 12px 은 그대로다. */
#sec-peers .paxpane > .note:last-child { margin-bottom: 0; }
#sec-peers > .cardfoot .morelink { margin-top: 0; }

/* 신고가가 0 종목인 날의 자리. 칸을 접으면 좌우 균형이 깨져 고장난 것처럼 보인다 —
   자리를 지키고 사실을 적는다(연금 미분류 가드와 같은 결). 목록 5행이 차지하던
   높이를 대략 맞춰 두어 탭을 오갈 때 화면이 튀지 않게 한다. */
/* 신고가가 0종목인 날. 칸을 접으면 옆 섹션과 높이가 어긋나 고장난 것처럼
   보이므로 자리를 지키고 사실을 적는다(실측 12거래일 중 하루). */
.board .board-empty,
.hi-card .board-empty {
  margin: 0; padding: 10px 16px 0;
  color: var(--text-3); font-size: 13.5px; line-height: 1.6;
  min-height: 132px;
}

/* 순위표 기준 칸의 보조 줄. 신고가 순위처럼 기준값 하나로는 말이 안 되는
   순위가 쓴다 — 날짜 아래에 '현재 대비' 를 붙여 한 쌍으로 읽히게 한다. */
/* 기준 칸의 아랫줄. **크기·굵기를 정하지 않는다** — 윗줄을 그대로 물려받는다
   (2026-09-14 사용자 결정 "동일한게 기본이야"). 같은 날 `.chg`·`.subval` 이 그
   규약으로 합쳐졌는데 이 자리만 11.5px·500 으로 남아, /rank/surge · /rank/new-high
   48장에서 **기준 칸 아랫줄만 작고 나머지 칸은 같은 크기**가 되어 한 표 안에서
   갈렸다. 그래서 함께 걷는다.

   **머리글은 따로 둔다.** 아래 `th` 규칙이 크기를 제 손으로 정한다 — 머리글끼리
   같은 치수로 두고 아래 칸의 사정과 분리하는 것은 2026-09-06 에 정한 별개 축이다. */
.lead-col .lead-sub { display: block; margin-top: 2px; }
th.lead-col .lead-sub { color: var(--text-4); font-weight: 400; font-size: 11.5px; }

/* ---------- /rank/ 허브의 타일 ----------
   2026-09-17 에 이 자리의 규칙이 통째로 바뀌었다. 옛 화면은 좌우 두 칸짜리 줄을
   묶음 다섯으로 접은 것이었고(.rk-group/.rk-row/.rk-cell + 칸마다 파생 토글),
   지금은 격자 하나에 타일만 선다 — 줄도, 좌우 짝도, 토글도 없다.

   색·글꼴·간격은 **기존 토큰만** 쓴다. 이 장만의 색을 새로 들이면 사이트에서 이
   화면만 다른 규칙으로 산다.

   격자는 1px 간격 + 1px 안여백 위에 칸마다 outline 1px 을 얹어 **선 한 겹**으로
   보이게 한다. 칸에 border 를 주면 이웃한 칸 사이에서 선이 두 겹으로 겹친다.

   **한 줄 폭(wide) 타일을 두지 않는다.** 시안에는 상장폐지 타일이 wide 였는데,
   그 근거가 '타일이 열둘이라 끝에 혼자 남는다' 였다. 축 둘이 합쳐져 열하나가 되면서
   전제가 사라졌다 — 3열에서 3·3·3·2 로 빈자리가 한 칸뿐이다(2026-09-17 사용자 결정).
   시안의 `.dcard.wide`·`.dcard.w3`·`.dgrid.c4` 와 타일 속 링크 줄(`.lk`)도 같은
   이유로 들이지 않았다. 쓰지 않는 규칙은 '언젠가 쓸 것' 이 아니라 읽는 사람을
   헷갈리게 하는 것이다. */
.dsect { margin-top: 22px; }
.dsect:first-of-type { margin-top: 14px; }
.dgrid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1px; margin-top: 8px; padding: 1px; }
@media (min-width: 641px) { .dgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .dgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* 칸은 세 열이다 — [아이콘 | 이름 | 값]. 설명은 둘째 열부터 끝까지 걸쳐 아이콘
   오른쪽에서 시작한다. `position: relative` 는 모양이 아니라 아래 `.nm a::after`
   가 칸 전체를 누를 자리로 덮기 위한 기준칸이다. */
.dcard {
  background: var(--surface);
  outline: 1px solid var(--border-soft);
  padding: 14px 16px 13px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 4px 10px;
  align-content: start;
  position: relative;
}
.dcard:hover { background: var(--surface-tint); }
.dcard .ic {
  grid-column: 1;
  grid-row: 1 / span 2;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: var(--surface-tint);
  color: var(--text-2);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}
.dcard .ic svg { width: 19px; height: 19px; }
/* 칸이 밝아질 때 아이콘 바탕은 반대로 간다 — 그래야 칸 안에서 아이콘이 계속 보인다. */
.dcard:hover .ic { background: var(--surface); }
.dcard .nm { grid-column: 2; margin: 0; font-size: 17px; font-weight: 700; letter-spacing: -0.02em; }
.dcard .nm a { color: var(--text); text-decoration: none; }
/* 칸 전체가 누를 자리다. 타일 안에 링크가 이름 하나뿐이라 이 덮개가 다른 링크를
   가릴 일이 없다 — 둘째 링크를 들이려면 이 규칙부터 다시 생각해야 한다. */
.dcard .nm a::after { content: ""; position: absolute; inset: 0; }
.dcard:hover .nm a { text-decoration: underline; text-decoration-color: var(--text); }
/* 값은 이름과 같은 크기·굵기로 오른끝에 선다. 단위는 그 뒤에 작게 붙어, 숫자만
   보고도 무엇의 몇인지 읽힌다. `nowrap` 이라 '±1% 밖' 같은 라벨이 줄을 안 바꾼다. */
.dcard .vl { grid-column: 3; margin: 0; font-size: 17px; font-weight: 700; letter-spacing: -0.02em; white-space: nowrap; text-align: right; }
.dcard .vl small { font-size: 12px; font-weight: 500; color: var(--text-3); margin-left: 3px; letter-spacing: 0; }
.dcard .ds { grid-column: 2 / -1; margin: 0; font-size: 13px; line-height: 1.5; color: var(--text-3); }

/* 관리종목. 거래정지(.susp)보다 가볍다 — 대개 반년 뒤 풀리지만 정지는 살 수 없다는
   뜻이다. 이 배지를 다는 곳은 이제 종목 상세의 머리(_price_head.html) 하나다 —
   같은 클래스를 쓰던 /rank/ 허브의 순위 줄이 2026-09-17 에 없어졌다. */
.badge.warn { background: #fff4e5; color: #9a5b00; border-color: transparent; font-weight: 600; }

/* ---- 살아 있는 줄 (머리) ----
   장중에 바뀌는 값만 모은다. 이름표는 작고 흐리게, 값은 본문 잉크로 — 읽는 사람이
   찾는 것은 이름표가 아니라 숫자다. 가격 줄 바로 아래라 제목을 따로 두지 않는다. */
.livebar {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin: 8px 0 0;
  font-size: 13px;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.livebar .lv { white-space: nowrap; }
/* 시·고·저는 셋이 한 덩어리다. 낱개로 흩으면 좁은 화면에서 '고' 만 다음 줄로
   넘어가 어느 값의 이름인지 흐려진다. 이름이 한 글자씩이라 값과 더 붙인다. */
/* 시·고·저는 **자기 줄을 쓴다.** 앞에 두기만 하면 뒤 묶음과 한 줄에 섞여서,
   '시 고' 다음에 NAV·괴리율이 붙고 거래대금만 다음 줄로 떨어졌다(1280 실측).
   두 묶음은 성격이 다르다 — 앞은 오늘 거래된 값이고 뒤는 그 값이 제값인지 따지는
   값이다. 줄로 갈라 두면 어느 쪽을 보는지가 눈에 먼저 들어온다. */
/* **flex 줄을 통째로 차지하게 한다.** `.livebar` 가 display:flex 라 display:block 은
   무시된다(flex 항목은 어차피 블록화된다) — 처음에 그렇게 썼다가 넓은 화면에서만
   안 먹어 한 줄에 섞였다. 줄을 끊는 것은 flex-basis 다. */
.livebar .ohlc { flex: 0 0 100%; }
.livebar .ohlc b { margin-left: 7px; margin-right: 3px; }
.livebar .ohlc b:first-child { margin-left: 0; }
/* 기준가(전일 종가) 대비 빨강·파랑. 값 셋이 나란히 있어도 어느 것이 기준을 넘었는지
   숫자를 비교하지 않고 색으로 읽힌다. 보합은 물들이지 않는다 — 색이 뜻을 가지려면
   '아무 일 없음' 이 무색이어야 한다. */
.livebar .ohlc .up { color: var(--up); }
.livebar .ohlc .down { color: var(--down); }

/* ---- 머리 오른쪽의 한 달 그림 ----
   좁은 화면에서는 두지 않는다. 글만으로도 폭이 차고, 그림을 밑에 깔면 첫 화면에서
   가격이 밀린다 — 이 자리의 값은 '남는 폭' 이지 '그림' 이 아니다. */
.ph-spark { display: none; }

/* **이 블록은 641px 부터다 — 목록 2,501장의 머리가 여기서 두 칸이 된다**(제목 왼쪽 ·
   부제 오른쪽, 실측 /rank/aum 700px 에서 370 + 274). 그래서 경계를 옮기지 않는다.

   **상세의 그림만 715px 부터다**(2026-09-15 지시). 사용자가 715px 폭 화면을 캡처해
   보내며 "이걸 최소 사이즈로 하자, 이거보다 작아지면 사라지는 걸로" 라고 골랐다.
   715 는 이 파일에 없던 숫자지만 계산으로 나온 값이 아니라 **실측 화면을 보고 고른
   값**이다: 그 폭에서 칸 279px · svg 227px 이다. 641~714px 을 덜어 내는 규칙은 이
   블록 바로 뒤에 있다(`@media (min-width: 641px) and (max-width: 714px)`) — 블록
   자체를 715 로 올리면 목록 장의 두 칸까지 함께 늦어진다.

   예전 기록: 처음에 900px 으로 잡았더니 아이패드 세로(768·810·834)가 통째로 빠졌고,
   641px 에서도 글은 안 깨졌다(가장 긴 이름으로 재도 한 줄, 그림 231px). 이번에 경계를
   올린 것은 글이 깨져서가 아니라 **그림이 너무 작아서**다 — 641px 에서 칸 205 · svg
   153px 이라 400 거래일이 손톱만 하게 눌린다. */
@media (min-width: 641px) {
  /* 글과 그림을 좌우로. 그림 쪽은 고정 폭이 아니라 비율이다 — 글이 길어지는 종목
     (긴 이름·긴 추종지수)에서도 글이 먼저 자리를 갖고 남는 만큼을 그림이 쓴다. */
  .price-head {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    column-gap: 28px;
    align-items: start;
  }
  /* ---- 상세의 글 칸은 **내용 폭**만 갖는다 (2026-09-07) ----
     1.35fr 은 글이 끝난 뒤에도 폭을 쥐고 있다. 가격 줄이 서는 데 약 345px 이면
     되는데 칸은 1,280px 화면에서 604px 이라, 글과 그림 사이에 260px 짜리 빈 띠가
     남았다. 글 칸을 가장 긴 줄(가격 줄)에 맞추고 남는 폭은 전부 그림에 넘긴다 —
     그림은 520:225 비율이라 넓어진 만큼 높아진다.
     `fit-content(57%)` 다. 상한이 없으면 이름이 긴 종목에서 글 칸이 화면을 다
     먹고, 57% 는 지금 값(1.35 / 2.35 = 57.4%)이 서던 자리라 최악에서도 예전과 같다.

     **`.livebar` 와 `.tagline` 은 칸 폭 계산에서 뺀다.** 시·고·저 줄과 운용사·
     추종지수 줄은 max-content 가 한 줄 600px 이다 — 그냥 두면 fit-content 가 도로
     상한(57%)까지 커져 아무것도 달라지지 않는다. 폭은 0 으로 재게 하고 실제로는
     min-width: 100% 로 칸을 채운다. 줄바꿈은 그대로 일어난다.

     **상세에만 건다.** `.price-head` 는 목록 2,501장이 함께 쓰고 그쪽 `.tagline`
     은 부제 한 줄이라 width: 0 을 걸 이유가 없다. 위 격자 규칙은 목록도 함께
     쓰던 값이라 손대지 않고, 새 값만 `[data-etf-code]`(0,2,0)로 좁혀 덮는다. */
  .price-head[data-etf-code] { grid-template-columns: fit-content(57%) minmax(0, 1fr); }
  .price-head[data-etf-code] .livebar,
  .price-head[data-etf-code] .tagline { width: 0; min-width: 100%; }
  /* 부제 없는 목록 머리에서 지표를 제목 아래 왼쪽으로 (2026-09-21). 위 격자는 목록 장도
     함께 타므로, 목록 머리의 자식은 h1 → 첫째 칸, 부제(.tagline) → 둘째 칸, 지표(.metrics)
     → 둘째 줄 첫째 칸으로 자동 배치된다. 부제가 없는 장(운용사 장 /provider/<코드>)은
     지표가 부제 자리인 **제목 오른쪽**으로 올라간다. 첫째 칸으로 못 박아 부제가 있는
     장과 같은 자리(둘째 줄 왼쪽)에 세운다. 부제가 있는 장은 원래 그 자리라 안 바뀌고,
     상세는 `[data-etf-code]` 로 빠진다. 640px 아래는 격자가 아니라 이 선언이 하는 일이 없다. */
  .price-head:not([data-etf-code]) > .metrics { grid-column: 1; }
  /* **글 칸에 하한을 준다**(2026-09-08 지시: "왼쪽 사이즈를 보장하고 차트 크기를
     조정"). 칸 폭은 가격 줄이 정하는데 그 줄이 종목마다 293~413px 로 들쭉날쭉하고,
     아래 'NAV · 괴리율 · 거래대금' 줄은 늘 332~359px 이 필요하다. 그래서 가격이
     짧은 종목에서만 거래대금이 다음 줄로 떨어졌다(실측 0091P0 305 < 340,
     360750 293 < 351). 하한을 두면 그림이 그만큼 좁아질 뿐 글은 안 접힌다.
     380px = 실측 최대 필요폭 359 + 여유. 이 규칙은 641px 이상에서만 산다
     (그 아래는 한 칸으로 쌓이고 그림이 숨는다) — 안 그러면 390px 화면이 넘친다. */
  .ph-main { min-width: 380px; }
  /* 세로 가운데. 글 쪽은 위에서부터 쌓이는 것이 맞지만(읽는 순서가 있다) 그림은
     순서가 없는 한 덩어리라, 위에 붙여 두면 아래에 빈 자리가 남아 카드가 기울어
     보인다. 칸 하나만 가운데로 내린다 — align-items 를 통째로 바꾸면 글까지 따라간다. */
  .ph-spark {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    align-self: center;
    gap: 4px;
    min-width: 0;
    /* **오른끝을 아래 수익률 차트에 맞춘다**(2026-09-13 지시: "차트 오른쪽 정렬은
       수익률 차트에서 보이는 정도가 좋겠어"). 한 장에 세로로 놓이는 그림 셋 —
       머리 일봉·수익률·순유입 — 의 **그려진 선이 같은 세로선에서 끝나야** 한다.

       그 전에는 셋이 이랬다(실측, 선 오른끝에서 화면 오른끝까지):
         일봉 14.2px · 수익률 66px · 순유입 48px      ← 일봉만 카드 끝까지 갔다
       수익률·순유입에 틈이 있는 것은 **오른쪽 눈금 이름**('+14%'·'일별')이 그 자리를
       쓰기 때문이다. 머리 일봉에는 그 글자가 없어 선이 틀 끝까지 간다.

       **틈은 폭을 따라 커지지 않는다.** chartview.js·flowview.js 가 그릴 때마다
       viewBox 를 실제 픽셀 폭으로 다시 잡으므로(`viewBox="0 0 740 180"` 처럼) 그
       PAD_R 은 어느 폭에서든 그대로 픽셀이다 — 641~1440 에서 재도 수익률 52px ·
       순유입 34px 로 한 값이다. 그래서 여기도 **고정 픽셀**로 맞춘다. (JS 가 죽은
       채 보는 크롤러는 구운 viewBox 가 늘어나 조금 어긋나지만, 그 화면은 사람이
       보는 것이 아니다.)

       52 는 수익률 차트의 `PAD_R` 그 값이다. 이 칸의 오른끝은 수익률 차트 svg 의
       오른끝과 같은 자리(카드 오른끝)이므로, 여기서 52 를 들이면 이 그림의 틀
       오른쪽 선이 수익률 차트의 선이 끝나는 자리에 정확히 선다 — 실측 셋 다
       66.2/66/(순유입은 flowview.js 가 34→52 로 가야 맞다).

       **틀째 줄인다.** 선만 안으로 들이면 틀과 선 사이에 빈 띠가 생기는데, 이 그림은
       안쪽 여백을 두지 않는 것이 규약이다(chart.py SPARK_PAD_X 주석). 칸에 padding 을
       주면 svg 가 통째로 좁아져 틀·선·연도 글자가 함께 따라온다.
       아래 설명 줄(.spark-cap)도 같이 들어와 오른끝이 가지런하다 — 그 줄이 한 줄
       늘어나는 종목이 641px 7/50 · 768px 23/50 있지만, 이 칸은 글 칸보다 짧고
       세로 가운데로 서 있어 **머리 판 높이는 어느 폭에서도 그대로다**(실측 0/50). */
    padding-right: 52px;
    /* ---- 위 오른끝 정렬은 2026-09-15 오후에 뒤집혔다. 그래도 이 52px 은 남긴다 ----
       946px 부터는 그림이 카드 오른끝이 아니라 **글 바로 옆**에 선다(아래
       `@media (min-width: 946px)` 의 뒤집힘 기록). 그래서 이 값이 원래 하던 일 —
       머리 일봉의 선 오른끝을 아래 수익률·순유입 차트에 맞추는 것 — 은 이미 끝났다
       (실측 1280px: 머리 964.6 · 수익률 1128 · 순유입 1128).

       **그런데도 빼지 않는 이유는 그림 크기가 바뀌기 때문이다.** 빼고 재 보면
       (069500·1280px) svg 가 457×140.6 → 509×156.6 으로 커지고 칸도 509×175 → 509×191 로
       16px 높아진다. 509 라는 크기는 **이 52 가 들어 있는 채로** 사용자가 945px 화면을
       보고 고른 값이다("이 크기가 좋겠다") — 빼면 승인받지 않은 크기가 된다. 그리고 이
       그림은 안여백을 두지 않는 규약이라(chart.py SPARK_PAD_X) 52 를 빼면 틀의 오른쪽 선이
       칸 끝에 그대로 닿는다.
       **945px 이하에서는 이 값이 여전히 제 일을 한다** — 거기서는 그림이 아직 카드
       오른끝에 서므로 09-13 의 정렬이 그대로 살아 있다.
       나중에 그림을 키우기로 하면 여기를 0 으로 두는 것이 아니라 칸 상한(509)을 먼저
       정하고 그 안에서 다시 재라. */
    /* ---- 폭은 여기서 잡지 않는다 (2026-09-15) ----
       그림의 상한(509px)도, 글과 그림 사이 간격도 **칸이 정한다** — 이 파일 아래
       `@media (min-width: 946px)` 의 `grid-template-columns` 하나가 둘 다 쥐고
       있고, 왜 항목(.ph-spark)에 `max-width` 로 걸면 안 되는지도 거기 적었다.
       여기 남은 것은 오른끝 정렬(위 padding-right)과 그림 자체의 생김새뿐이다.
       칸을 그대로 채우므로 width 를 적지 않는다 — 격자 항목의 기본값
       (justify-self: stretch)이 칸 폭을 그대로 준다(실측 1280px 509px). */
  }
  .ph-spark .spark {
    width: 100%;
    /* 높이를 픽셀로 박지 않는다. 이 svg 는 xMidYMid meet 이라 상자의 비율이
       viewBox 와 어긋나면 그림은 짧은 쪽에 맞춰 줄고 남는 쪽에 빈 띠가 생긴다 —
       177px 로 박았더니 아이패드(칸 313px)에서 42px 이 죽은 자리였다.
       비율로 묶으면 어느 폭에서든 빈 띠 0 이다.
       **이 값은 chart.py 의 `SPARK_W:SPARK_H` 와 같아야 한다**(2026-09-07 에
       520:225 → 520:160). 셋이 한 벌이다 — chart.py 가 굽는 viewBox, 장중에
       갈아 끼우는 intraday.js 의 `W`·`H`, 그리고 상자 비율인 여기. 하나만 옮기면
       그 즉시 빈 띠가 생긴다(같은 날 순유입 그림에서 실제로 겪었다). */
    aspect-ratio: 520 / 160;
    height: auto;
    display: block;
    /* **잘라 낸다**(2026-09-08). 네 변을 두른 뒤로는 틀 밖으로 나가는 획이 있으면
       안 된다 — 좌우 안여백이 0 이라 값 선의 첫·마지막 점이 틀의 좌우 선 위에
       얹히고, 굵기 1.6 의 절반(0.8)이 viewBox 밖으로 0.3 단위쯤 삐져나간다.
       visible 이던 것은 예전에 최고·최저 점(반지름 2.6 + 흰 테두리)을 여백 밖까지
       그리던 시절의 값이고, 그 점은 2026-09-08 에 뺐다. */
    overflow: hidden;
  }
  /* 그림에 눈금이 없으므로 무엇을 보고 있는지는 글자가 말한다.
     **왼쪽이다.** 가운데로 놓아 봤는데 그림의 선은 왼쪽 끝에서 시작하는데 설명만
     한가운데 떠 있어 어디에 붙은 글자인지 흐렸다. 읽기 시작하는 자리와 그림이
     시작하는 자리를 맞춘다. */
  /* 최고·최저 값. 그림에서 뺀 숫자가 여기로 왔다 — 이 크기의 그림에 얹으면
     선과 겹쳐 둘 다 안 읽힌다. 라벨 단계(--text-3)다: 눈금이 없는 그림에서
     폭을 읽게 하는 유일한 두 숫자라 기준일 도장처럼 흐리게 두지 않는다. */
  /* **이름과 값은 절대 갈라지지 않는다.** 예전에는 인라인 span 을 여백으로만
     띄워 두어, 줄이 모자라면 '최고' 가 줄 끝에 남고 '107,435원' 이 다음 줄로
     넘어갔다(900px 실측). 아래 .spark-cap 을 flex 로 두고 각 조각을 nowrap 으로
     묶으면 줄바꿈은 **조각과 조각 사이**에서만 일어난다. */
  .ph-spark .spark-when,
  .ph-spark .spark-base-k,
  .ph-spark .spark-hi,
  .ph-spark .spark-lo { white-space: nowrap; }
  .ph-spark .spark-base-k,
  .ph-spark .spark-hi,
  .ph-spark .spark-lo {
    color: var(--text-3);
    font-variant-numeric: tabular-nums;
  }
  /* 해가 바뀌는 자리. 값 눈금은 두지 않지만 '언제쯤' 은 있어야 한다 —
     400 거래일은 한 해 반이 넘어 왼쪽 끝이 언제인지 짐작할 수가 없었다.
     선보다 먼저 보이면 안 되므로 가장 옅은 경계색으로만 긋는다. */
  /* --border-soft 로 그었더니 흰 바탕 대비 1.21:1 이라 사실상 안 보였다.
     --text-4(2.99:1)로 올린다 — 이 사이트에서 '읽지 않아도 되는 것' 의 단계라
     선이 눈에 들어오면서도 가격 선(짙은 빨강·파랑)보다 먼저 보이지는 않는다.
     연도 글자는 한 단계 더 진한 라벨 단계(--text-3, 5.02:1)다: 선은 안내이고
     글자는 읽는 것이라 같은 농도면 무엇을 읽어야 할지가 흐려진다. */
  /* 연도 눈금선. 틀과 **같은 종류의 선**이라 같은 색·같은 굵기로 간다 —
     틀만 얇게 내리고 이걸 두면 안쪽 눈금이 바깥 틀보다 진해져 위계가 뒤집힌다. */
  .ph-spark .spark-yr { stroke: var(--border); stroke-width: 0.5;
                        vector-effect: non-scaling-stroke; }
  /* 그림의 틀 (2026-09-08). 머리 그림 둘 — 장 밖의 400 거래일 일봉(chart.py 의
     sparkline)과 장중의 오늘 1분봉(intraday.js) — 이 **같은 rect 한 겹**으로
     이 class 를 쓴다. 그 전에는 상자가 서로 달랐다: 일봉은 네 변이되 위 선만
     옅은 --border(.spark-gy)였고 나머지가 --text-4(.spark-ax/.spark-yr), 1분봉은
     위 선이 아예 없는 세 변이었다. 같은 자리에서 갈아 끼우는 그림 둘이라
     장중에 화면이 한 번 흔들렸다("박스모양이 제각각이네").

     **색은 연도 눈금선(.spark-yr)과 같은 --text-4 다.** 한 단계 옅은 --border 로
     두는 길도 있었지만, 그러면 바깥 틀이 그 안을 나누는 눈금보다 흐려져 위계가
     뒤집힌다 — 틀과 눈금은 한 벌이라 갈리면 눈금이 틀에 붙어 있다는 것이 안 읽힌다
     (아래 .spark-yr 주석의 그 이유 그대로다). 더 옅은 --border-soft 는 흰 바탕
     대비 1.21:1 이라 사실상 안 보인다(실측). --text-4 는 2.99:1 로, 눈에 들어오되
     가격 선(짙은 빨강·파랑·녹색)보다 먼저 보이지는 않는다.

     **굵기는 여기서 잡지 않는다.** chart.py 의 `SPARK_BOX` / intraday.js 의 `BOX` 가
     attribute 로 낸다 — 틀을 반 굵기만큼 안으로 들여 그리는 계산이 그 값에 걸려
     있어서, 굵기만 CSS 로 빼 두면 한쪽을 고쳤을 때 틀이 viewBox 밖으로 반쯤
     잘려 나간다. 여기서 stroke-width 를 다시 잡으면 그 계산을 조용히 깬다. */
  /* **가장 얇게, 가장 약하게**(2026-09-08 지시). 색은 --text-4(#93959c)에서
     --border(#d4d8e2)로 한 단계 내렸다 — 틀은 그림을 가두는 테두리일 뿐이고
     읽어야 할 것은 안의 선이다. 굵기는 두 파일이 attribute 로 내되
     `vector-effect: non-scaling-stroke` 라 그림이 늘어나도 0.5px 그대로다.
     --border-soft 까지 내리지 않는 이유는 흰 바탕 대비 1.21:1 이라 사실상
     안 보이기 때문이다(아래 .spark-yr 주석의 실측과 같은 근거). */
  .ph-spark .spark-box { fill: none; stroke: var(--border); }

  /* 값 선. **가장 얇게, 흐리게**(2026-09-08 지시). 굵기가 뷰박스 단위(1.6)였던
     탓에 1280px 화면에서 2.2px 로 그려져 두꺼웠고, 폭이 바뀌면 굵기도 따라
     움직였다(641px 에서는 0.8px). 틀과 같은 방식으로 화면 픽셀에 못 박는다 —
     어디서든 1px 이다. 0.5px 까지 내리지 않는 이유는 이건 테두리가 아니라
     **읽어야 할 값**이라, 틀과 같은 굵기가 되면 둘이 구분되지 않기 때문이다.
     흐리기는 색을 바꾸지 않고 불투명도로 준다 — 선 색은 오른/내림(초록·빨강)을
     지고 있어서 색을 손대면 그 뜻이 흐트러진다. 면(polygon)은 그대로다. */
  .ph-spark .spark polyline {
    vector-effect: non-scaling-stroke;
    stroke-width: 1;
    stroke-opacity: .72;
  }
  /* 전일 종가 기준선. 연도 선과 같은 농도지만 **점선**이다 — 하나는 세로로 시간을
     끊고 하나는 가로로 값을 긋는데, 같은 실선이면 같은 종류의 선으로 읽힌다.
     가격 선보다 먼저 보이면 안 되므로 굵기와 색은 그대로 둔다. */
  /* 전일 종가 기준선. 굵기는 틀과 같은 0.5px 실선 규약을 따르되 **색은 안 내린다** —
     이 선은 테두리가 아니라 값이다(위가 상승·아래가 하락이라는 축이 여기서 나온다).
     틀(--border)보다 한 단계 진한 --text-4 라 둘이 구분된다. */
  .ph-spark .spark-base {
    stroke: var(--text-4);
    stroke-width: 0.5;
    vector-effect: non-scaling-stroke;
    stroke-dasharray: 3 3;
  }
  /* 연도 글자는 그림 위에 **HTML 로** 얹는다. svg 안에 두면 그림과 함께 줄어들어
     좁은 화면일수록 작아진다(834 에서 8px 까지 내려갔다). 여기 12px 은 어느 폭에서든
     12px 이다. 자리는 %라 그림이 줄어도 선과 어긋나지 않는다. */
  /* 아래 여백이 **가로축 글자가 서는 띠**다. 그림 밖도 아니고 선 위도 아닌,
     축을 위해 비워 둔 자리다.

     여기까지 두 번 돌아왔다. 처음에는 그림 밖에 그냥 띄웠더니 어디에 붙은
     글자인지 흐렸고("외부에 빠져 있다"), 그림 안으로 들였더니 선과 겹쳤다
     ("선 위에 텍스트가 있다"). 답은 자리를 **미리 비워 두는 것**이었다 —
     겹칠 일이 없고, 틀의 아래 선(.spark-box)이 바로 위에 있어 어디에 붙은
     글자인지도 분명하다.

     띠 높이는 px 다. 그림은 폭따라 줄지만 글자는 13.5px 로 고정이라, 띠까지
     줄면 좁은 화면에서 글자가 띠 밖으로 넘친다. */
  .ph-spark .spark-plot {
    position: relative;
    display: block;
    padding-bottom: 12px;
  }
  .ph-spark .spark-yl {
    position: absolute;
    /* 위에서 비워 둔 띠 안에 앉는다. 축선 바로 아래라 겹칠 일이 없다.

       **글자는 HTML 이다.** svg 안에 넣으면 viewBox 가 화면 폭에 맞춰 통째로
       줄어 글자도 같이 작아진다(14px 지정이 834px 화면에서 8px 로 찍혔다).
       여기 13.5px 는 어느 폭에서든 13.5px 다. 자리는 %라 그림이 줄어도
       세로 눈금선과 어긋나지 않는다. */
    bottom: 1px;
    color: var(--text-3);
    /* 축을 세우기 전에는 이 글자가 '언제쯤' 을 혼자 말해야 해서 13.5px 까지
       키웠다. 이제 틀과 눈금선이 구조를 말하므로 글자는 그 눈금에 붙는 이름이면
       된다 — 한 단계가 아니라 네 단계를 내린다(2026-09-01). */
    font-size: 9.5px;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    pointer-events: none;
  }
  .ph-spark .spark-cap {
    /* flex 인 이유는 위 nowrap 주석에 있다. 조각 사이 여백도 여기서 한 번에 준다 —
       조각마다 margin-left 를 달면 줄이 바뀔 때 그 여백이 새 줄 앞에 남는다.
       세로 간격은 0 이다: 두 줄이 되더라도 제 줄 간격만큼만 벌어진다. */
    display: flex;
    flex-wrap: wrap;
    gap: 0 10px;
    color: var(--text-4);
    font-size: 11.5px;
  }
}

/* ---- 그림이 서지 않는 폭: 641~714px (2026-09-15 지시) ----
   **그림을 감추는 것만으로는 모자라다.** 위 블록이 `.price-head` 를 두 칸 격자로
   세워 두었으므로, 그림만 `display: none` 으로 지우면 오른쪽 칸(minmax(0, 1fr))이
   빈 채로 폭을 쥐고 남는다 — 글 칸은 57% 에 갇히고 오른쪽 43% 가 빈 띠가 된다.
   그래서 상세의 머리 판을 640px 아래와 같은 **한 칸(block)** 으로 되돌린다. 글이
   폭을 다 쓴다(실측 700px 에서 글 칸 370 → 686px).

   **목록 장은 건드리지 않는다.** `[data-etf-code]` 가 상세에만 붙고, 목록의 제목·부제
   두 칸은 641px 부터 그대로다. 그림이 없는 장에서 이 규칙이 하는 일도 없다.

   `.ph-spark` 를 여기서 한 번 더 감추는 이유: 위 블록의 `display: flex` 와 셈이
   같으므로(둘 다 0,1,0) **뒤에 오는 이 규칙이 이긴다**. 순서를 믿는 규칙이라 블록
   바로 뒤에 붙여 둔다 — 사이에 다른 것을 끼워 넣지 마라.

   실측(069500) — 714px 에서 `display: block` · 그림 없음 · 글 칸 686px,
   715px 에서 격자 · 그림 칸 279×123(svg 227×70) · 글 칸 380 · 간격 28.
   1px 사이로 갈린다. 641~714px 에서는 그림이 있던 자리가 비지 않고 글이 그대로
   먹으며, 설명 줄이 두 줄로 접히던 것도 함께 사라져 머리 판이 낮아진다. */
@media (min-width: 641px) and (max-width: 714px) {
  .price-head[data-etf-code] { display: block; }
  .ph-spark { display: none; }
}

/* ---- 그림을 글 바로 옆에 붙인다: 946px 부터 ----

   **2026-09-15 오후에 뒤집혔다.** 이 블록은 같은 날 오전에 '그림은 오른끝에 두고 글 칸을
   늘린다' 로 서 있었다(그 기록은 지우지 않고 아래에 그대로 둔다). 그 방식으로는 **글자와
   그림 사이의 흰 자리가 안 줄었다** — 글이 왼쪽 정렬이라 칸을 넓혀도 마지막 글자와 그림
   사이는 그대로다(1280·1920px 스크린샷이 전후 바이트까지 같았다). 사용자에게 둘을 냈다.
   ① 지금 그대로(흰 자리 남음) ② 그림을 왼쪽으로 당김(흰 자리 사라짐, 대신 세 차트
   오른끝 정렬이 깨짐). **사용자가 ②를 골랐다 — 정렬이 깨지는 것을 알고 고른 것이다.**

   **고치는 데 한 줄이면 된다: `justify-content: start`.** 격자의 `auto` 칸은 컨테이너에
   남는 폭이 있으면 스스로 늘어난다(Stretch auto Tracks) — 그래서 오전 규칙은 글 칸이
   남는 폭을 다 먹고 그림이 오른끝에 붙었다. 그 늘림은 `justify-content` 가 normal/stretch
   일 때만 일어나므로, start 로 못을 박으면 **글 칸은 제 내용만큼만 서고 남는 폭은 오른쪽에
   남는다.** 칸 정의(`auto minmax(0, 509px)`)는 손대지 않는다 — 실측으로 확인한 이유는
   아래 '왜 auto 인가' 와 '왜 상한이 칸에 있나' 가 그대로 살아 있기 때문이다.
   (`max-content` 로 바꾸지 마라. 946~1119px 구간에서는 긴 이름 종목의 글 칸이 남는 폭보다
   넓어 **카드 밖으로 넘친다**. `auto` 는 그 구간에서 예전처럼 그림이 먼저 양보한다 —
   실측 946px·0008S0 에서 글 554.2 + 사이 28 + 그림 335.8 = 918 로 컨테이너와 정확히 같다.)

   **실측 — 글자 오른끝에서 그림 상자 왼끝까지** (칸끼리가 아니라 **글자 기준**이다.
   1280px, 뒤집기 전 → 후):
     069500 226.5 → 63.5 · 0091P0 186.8 → 53.0 · 0000Y0 125.6 → 28.0
     0000D0  28.0 → 28.0 · 0008S0  28.0 → 28.0   ← 이름이 긴 둘은 전부터 붙어 있었다
   946·1024·1280·1440·1920·2560 전 폭에서 뒤집은 뒤 값이 한 종목 안에서는 한 값이다
   (069500 63.5 · 0091P0 53.0 · 0000Y0 28.0 — 폭이 넓어져도 안 벌어진다).
   64종목 표본(1280px)에서 28.0~92.0 · 중앙값 44.0 · 24종목이 정확히 28.0.

   **28 을 넘는 잔여는 이 규칙이 만든 것이 아니다.** 칸과 칸 사이는 64종목 전부 예외 없이
   28.0px 다. 남는 것은 **글 칸 안의 오른쪽 여백**이고, 그 임자는 `.ph-main { min-width: 380px }`
   이다(2026-09-08, 'NAV · 괴리율 · 거래대금' 줄이 접히지 않게 둔 하한). 글이 380 보다
   짧으면 그 차이가 마지막 글자 뒤에 남는다 — 069500 은 가격 줄이 344.5px 이라 35.5px 이
   남아 63.5 가 된다. 이 잔여를 없애려면 380 하한을 걷어야 하는데 그러면 거래대금이
   다음 줄로 떨어진다. **하한은 그대로 둔다.**

   **치른 값 셋 — 사용자가 알고 고른 것이지만 크기는 적어 둔다.**
   ① 세 차트 오른끝이 어긋난다(1280px, 선 오른끝 x): 뒤집기 전 머리 1127.6 · 수익률 1128 ·
      순유입 1128 로 셋이 한 줄이었다. 뒤집은 뒤 머리만 왼쪽으로 물러난다 —
      069500·0091P0 964.6(163.4px 어긋남) · 0000Y0 1030.0(98.0px) · 0000D0·0008S0 1127.6(0).
      **어긋남의 최대는 163px 이고 그보다 커지지 않는다** — 카드 폭이 1,080px 에서 멈추므로
      (1280·1440·1920·2560 다 같다) 최악이 1080 − (380 + 28 + 509) = 163 이다.
   ② 그림 시작 x 가 종목마다 다르다. 64종목 1280px 에서 508.0(짧은 이름) ~ 682.2(0008S0) —
      **편차 174.2px**. 뒤집기 전에는 671.0~682.2 로 11.2px 이었다. 상세 장을 연달아 넘기면
      그만큼 그림이 좌우로 튄다.
   ③ 오전에 낮아졌던 머리 판이 일부 되돌아온다. 글 칸이 다시 내용 폭이라 줄이 도로 접힌다 —
      60종목 표본에서 1280px 9종목 · 1024px 6종목이 237 → 258.6px 로 한 줄 높아졌다
      (낮아진 종목은 0). 나머지는 그대로다.

   **그림 크기·좁은 화면은 건드리지 않았다.** 509×175 그대로다(64종목 중 62종목,
   1024~2560 전 폭 동일. 나머지 둘 497.8×171.5 · 500.9×172.5 는 이름이 길어 전부터 509 에
   못 닿던 종목이고 전후가 같다). 641~945px 은 이 블록 밖이라 전후가 픽셀로 같다
   (390·700·715·768·900·945 실측 동일). 946px 만 1px 다르다(글 칸 381 → 380) — 그 폭에서
   남던 1px 이 이제 오른쪽에 남는다.

   ────────────────────────────────────────────────────────────────────────
   아래는 **2026-09-15 오전의 기록**이다. 값(509·28·946·auto)의 근거는 지금도 그대로 살아
   있으므로 지우지 않는다. 다만 '그림을 오른끝에 둔다' 는 판단만 위에서 뒤집혔다.

   **증상.** 그림에 상한(509px)을 걸자 넓은 화면에서 글과 그림 사이가 벌어졌다.
   칸은 1fr 이라 계속 넓어지는데 안의 그림만 509 에서 멈추니, 남는 폭이 그림
   **왼쪽**에 빈 띠로 남는다. 1,280px 실측 — 069500 은 191px · 0000Y0 은 125.6px ·
   0000D0 은 28px 이었다(종목마다 달랐다. 이름이 길수록 글 칸이 넓어 덜 벌어진다).

   **고친 방식: 그림을 옮기지 않고 글 칸을 늘린다.** 그림을 왼쪽으로 당겨 간격을
   좁히면 2026-09-13 에 맞춰 둔 오른끝 정렬이 깨진다 — 한 장에 세로로 놓이는 그림
   셋(머리 일봉·수익률·순유입) 중 아래 둘은 카드 폭을 다 쓰는데 머리 그림만 물러나
   혼자 왼쪽에서 끝난다. 그림은 오른끝에 그대로 두고 왼쪽 글 칸이 남는 폭을 먹으면
   사이 간격은 저절로 **칸 사이 값 하나**로 고정된다.

   **간격 값은 28px 이다 — 새로 고른 숫자가 아니다.** 이 판이 이미 쓰는
   `column-gap: 28px` 그 값이고(위 `.price-head`), 규칙이 하는 일은 '칸 사이 말고는
   아무 데도 빈 자리를 두지 않는다' 뿐이다. 실측 946~2560px 전 구간에서 28.0px.
   (--gap 16 · --sect-gap 32 · --panel-pad 20 을 쓰지 않은 이유: 그 값들은 이 자리에
   없던 값이라 들이는 순간 간격이 **달라진다**. 지금 값을 그대로 두는 것이 가장 작은
   변화다.)

   **왜 `auto` 인가 — `1fr` 로 하지 마라.** 둘 다 남는 폭을 먹지만 가는 길이 다르다.
   `1fr` 은 칸 폭을 제 내용과 무관하게 정하므로 글 칸이 max-content 를 잃는다:
   1,280px 에서 어느 종목이든 543px 로 깎이는데, 이름이 긴 종목은 그 폭에서 제목이
   접힌다(실측 `.ph-main` 의 max-content 는 148종목 중 최대 554.2px — 0008S0).
   `auto` 는 제 내용만큼 먼저 서고(=예전 fit-content 와 같은 자리), 그러고도 남는
   폭이 있으면 그때 늘어난다(격자의 Stretch auto Tracks). 그래서 이름이 긴 종목은
   예전 그대로이고(0000D0 1280px 글 551.1 · 그림 500.9 — 전후 동일) 짧은 종목만
   글 칸이 늘어난다(069500 380 → 543).

   **왜 그림 상한이 칸(minmax)에 있고 항목에 없나.** 항목에 `max-width: 509px` 로
   걸면 칸은 그대로 넓어 남는 폭이 그림 왼쪽에 남는다 — 그게 위에 적은 바로 그
   증상이다. 칸을 509 로 묶어야 남는 폭이 글 칸으로 간다. 값 509 는 2026-09-15 에
   사용자가 945px 폭 화면을 캡처해 고른 크기다("이 크기가 좋겠다"). 높이는 따로
   잡지 않는다 — `.ph-spark .spark` 의 aspect-ratio 가 따라와 509 를 들이면 175 가
   나온다(실측 509×175 · svg 457×141, 1024~2560 동일).

   **`justify-self: end` 로 하지 마라 — 해 봤고 틀렸다.** 격자 항목은 정렬값이
   stretch 가 아니게 되는 순간 칸 폭이 아니라 제 내용 폭(fit-content)으로 재어진다.
   상한 509 가 아니라 설명 줄(.spark-cap)의 글자 폭이 크기를 정해 버려 종목마다
   그림이 들쭉날쭉해졌다(실측 352×127).

   **왜 946px 부터인가.** 그 아래에서는 이 규칙이 할 일이 없다 — 어느 종목에서도
   그림이 509 에 닿지 못한다. 글 칸 하한 380 + 칸 사이 28 + 그림 509 = 917px 이
   그림이 상한에 닿는 가장 좁은 본문 폭이고, 본문은 화면 폭 − 28(좌우 여백 14씩)
   이라 화면 **945px** 에서 정확히 917 이다(실측 945px·069500 에서 그림 509 · 간격
   28). 그래서 945 까지는 위 블록 그대로 두고 946 부터 이 규칙이 선다 — 641~945px
   구간은 전후가 픽셀 단위로 같다(실측 641·768·900·945 · 세 종목 전부 동일).

   **크기는 CSS 로만 줄인다 — viewBox 는 건드리지 않았다.** 이 그림은 장 밖에
   chart.py 의 `sparkline()` 이 굽고 장중에 `static/intraday.js` 가 같은 칸에서 갈아
   끼우는데, 둘의 기하(viewBox 520×160 · 틀 굵기 · 안여백)가 같아야 장중과 장후의
   그림이 어긋나지 않는다. 표시 폭만 줄이면 두 그림이 같은 비율로 함께 줄어 그 계약이
   그대로 산다. **여기 숫자를 고치려고 저 두 파일의 viewBox·여백을 따라 고치지 마라.**
   선 굵기·틀 굵기는 `vector-effect: non-scaling-stroke` 라 그림이 줄어도 화면 픽셀
   그대로다(값 선 1px · 틀 0.5px). 머리 그림에 점(circle)은 없다(2026-09-08).

   **무엇이 눈에 보이나.** 그림은 한 픽셀도 움직이지 않는다 — 전에도 오른끝에
   붙어 있었고 지금도 같은 자리다(1280·1920 에서 머리 판 스크린샷이 전후 바이트까지
   같은 종목이 있다, 069500). 달라지는 것은 글 칸이 넓어져 **줄이 덜 접히는** 쪽이다:
   1,280px 40종목 표본에서 14종목의 머리 판이 258.6 → 237px 로 한 줄만큼 낮아졌다
   (1,024px 에서는 10종목). 2026-09-08 에 `.ph-main` 에 하한 380 을 준 것과 같은
   문제를 넓은 화면에서 마저 푼 셈이다.
   **글자와 그림 사이의 흰 자리 자체는 이 규칙으로 줄지 않는다.** 글이 왼쪽 정렬이라
   마지막 글자와 그림 사이는 글줄 길이가 정한다. 그것을 줄이려면 그림을 왼쪽으로
   당겨야 하는데 그러면 09-13 오른끝 정렬이 깨진다 — 고르지 않은 쪽이다.
   ← **이 마지막 줄이 같은 날 오후에 뒤집혔다.** 사용자가 흰 자리를 없애는 쪽을 골랐다
   (맨 위 참조). 그래서 지금은 그림을 왼쪽으로 당기고 정렬을 포기한 상태다. */
@media (min-width: 946px) {
  .price-head[data-etf-code] {
    grid-template-columns: auto minmax(0, 509px);
    justify-content: start;
  }
}
.livebar b {
  margin-right: 5px;
  color: var(--text-4);
  font-size: 11.5px;
  font-weight: 600;
}

/* '없다' 고 말하는 한 줄. 이름은 옛 랭킹 칸(.rk-*)에서 왔지만 **지금 쓰는 곳은
   종목 상세의 분배금 칸(etf_detail.html)** 하나다 — 그 칸이 이 클래스를 쓰고 있어
   /rank/ 허브가 사라진 2026-09-17 에도 살아남았다. 이름만 옛 자리를 가리킨다. */
.rk-empty { margin: 0; padding: 10px 4px 10px 1px; color: var(--text-3); font-size: 13.5px; }

/* ---- 당겨서 새로고침 표시 (pull.js) ----
   홈 화면 앱에서만 붙는다. 화면 위 가장자리에 점 하나가 따라 내려오고, 놓으면
   돌아간다 — 글자를 두지 않는 이유는 이 몸짓이 이미 널리 알려진 것이라서다.
   설명이 필요한 조작이면 몸짓이 아니라 버튼이어야 한다. */
.ptr {
  position: fixed;
  top: -62px;   /* 점이 커진 만큼 더 위에서 시작한다 */ left: 0; right: 0;
  z-index: 60;
  display: flex; justify-content: center;
  pointer-events: none;              /* 손가락은 아래 화면으로 그대로 간다 */
}
.ptr.back { transition: transform .2s ease; }
.ptr-dot {
  /* 26 → 52px. 손가락으로 당기는 동안 보는 유일한 표시인데, 26px 은 화면 위 가장자리
     에서 눈에 잘 안 들어왔다. 당김 자체가 큰 몸짓이라 표시도 그만해야 짝이 맞는다. */
  width: 52px; height: 52px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: 0 2px 8px rgba(20, 30, 60, .12);
  position: relative;
}
/* 가운데 파란 호(弧). 임계에 닿으면 색이 진해지고, 놓으면 돈다. */
.ptr-dot::after {
  content: "";
  position: absolute; inset: 14px;   /* 점이 두 배라 안쪽 호도 두 배 */
  border-radius: 999px;
  border: 2px solid var(--border);
  border-top-color: var(--accent);
}
.ptr.ready .ptr-dot { border-color: var(--accent); }
.ptr.spin .ptr-dot::after { animation: ptrspin .6s linear infinite; }
@keyframes ptrspin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .ptr.back { transition: none; }
  .ptr.spin .ptr-dot::after { animation: none; }
}

@media (max-width: 640px) {
  /* 두 줄로 넘기는 것 자체는 위 공통 규칙(.lst li .n, .mv li .n)이 한다.
     여기서는 **줄 간격만** 조인다. 좁은 화면은 두 줄이 실제로 나는 폭이고,
     본문 줄 간격(1.6)을 그대로 쓰면 두 줄짜리 행이 8px 더 높아 목록이
     들쭉날쭉해진다. 랭크가 이 값으로 맞춰져 있어 홈도 같은 값을 쓴다.

     넓은 화면에서 이 값을 함께 쓰지 않는 이유: 거기서는 이름이 한 줄이라
     줄 간격이 곧 행 높이가 되고, 값을 바꾸면 잘리지도 않는 목록의 행 높이만
     0.8px 씩 움직인다(랭크 60행 실측). 화면을 바꾸지 않는 것이 이 수정의 범위다.

     라틴 낱말이 반토막 날 걱정은 재 봤다 — 60개 이름 중 줄바꿈이 라틴·숫자
     한가운데로 떨어진 것은 0건이다(브랜드 이름이 짧아 첫 줄에 들어간다). */
  .lst li .n,
  .mv li .n { line-height: 1.32; }
}

/* ============================================================
   어두운 머리줄 + 히어로 (KG제로인 CI)

   **파일 끝이어야 한다.** 위의 밝은 머리줄 규칙들과 같은 특이도라 순서로 이긴다.
   이 묶음을 위로 옮기면 앞 규칙에 그대로 덮인다(글자 크기 묶음이 파일 끝에
   있는 것과 같은 이유).

   범위가 둘로 갈린다. **머리줄은 전 페이지**(.site-head 는 base.html 하나다)이고
   **히어로는 홈뿐**(.hero 는 home.html 에만 있다). 그래서 머리줄 쪽은 밝은 본문
   위에 어두운 띠 하나가 서는 그림이고, 홈에서만 그 띠가 히어로로 이어진다.

   **높이와 정렬은 건드리지 않는다.** 목업은 좌우를 화면 끝까지 쓰고 높이도
   56/67px 로 갈렸는데, 이 사이트의 머리줄은 본문과 같은 가운데 1120px 기둥에
   서 있고 높이 59px 은 --head-h 로 다섯 곳이 읽는다(.subnav 의 sticky top,
   [id^=sec-]·#list·#tabs 의 scroll-margin-top, .inner 의 min-height, sectabs.js).
   색만 바꾸면 그 연쇄를 하나도 건드리지 않는다.
   ============================================================ */

:root {
  --head-bg: #20103d;
  --head-line: #2f1a55;
  /* 머리줄 글자. 어두운 바탕에서 --text-3(#71747c)은 1.9:1 이라 사실상 안 보인다 —
     밝은 바탕용 네 단계는 여기서 쓸 수 없고 따로 둔다. */
  --head-fg: #cdc2e6;
  /* '지금 열려 있다' 를 뜻하는 색. --accent(#006af9)는 이 바탕에서 2.0:1 이라
     쓸 수 없다. CI 의 노랑을 쓴다 — 브랜드 색이면서 대비가 넉넉하다. */
  --head-on: #fdb934;
  --head-panel: #2a1550;
  --head-panel-line: #3d2168;
  --head-panel-fg: #ddd4f0;
}

.site-head { background: var(--head-bg); border-bottom-color: var(--head-line); }
.site-head .brand { color: #fff; }

/* beta 알약 — 속을 채운다. SVG 는 currentColor + opacity 로 그려져 있어 그대로
   두면 흰 테두리만 남은 알약이 된다. 마크업이 아니라 CSS 로 덮는 이유는
   presentation attribute 가 스타일시트에 지기 때문이다(마크업은 손대지 않는다). */
.site-head .brand .beta rect { fill: var(--head-on); stroke: none; }
.site-head .brand .beta text { fill: var(--head-bg); fill-opacity: 1; }

.site-head nav a,
.navmenu > summary,
.allmenu > summary,
.headsearch-btn { color: var(--head-fg); }
.navmenu[open] > summary,
/* **열림 표시는 이 두 줄이 전부다.** 햄버거가 X 로 접히던 것을 걷어낸 뒤로
   (파일 앞쪽 .burger 주석 참고) 버튼이 열렸다고 말하는 수단이 색과 바탕뿐이다.
   그래서 바탕을 hover(.10)보다 한 단계 진하게 둔다 — 같으면 마우스를 올린 것과
   열린 것이 구분되지 않는다. */
.allmenu[open] > summary { color: var(--head-on); background: rgba(255, 255, 255, .18); }

/* 밑줄 색이 --text(거의 검정)라 어두운 바탕에서는 그은 자리가 안 보인다.
   글자색을 그대로 쓴다 — 규칙이 다른 게 아니라 바탕이 다르다(켜진 알약과 같은 처리). */
@media (hover: hover) and (pointer: fine) {
  .site-head nav a:hover,
  .navmenu > summary:hover { text-decoration-color: currentColor; }
  .allmenu > summary:hover,
  .headsearch-btn:hover {
    background: rgba(255, 255, 255, .10);
    text-decoration-color: currentColor;
  }
}

/* 펼침 판도 어둡게. 흰 판을 떨어뜨리면 머리줄만 어둡고 그 아래로 흰 상자가
   튀어나와, 띠와 판이 서로 다른 화면의 물건처럼 보인다. */
.navmenu-panel,
.allmenu-panel {
  background: var(--head-panel);
  border-color: var(--head-panel-line);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .45);
}
.navmenu-panel a,
.allmenu-panel a { color: var(--head-panel-fg); }
@media (hover: hover) and (pointer: fine) {
  .navmenu-panel a:hover,
  .allmenu-panel a:hover {
    background: rgba(255, 255, 255, .09);
    text-decoration-color: currentColor;
  }
}
.allmenu-panel .grp { color: #a496c9; border-top-color: var(--head-panel-line); }

.authbtn {
  background: transparent;
  border-color: rgba(255, 255, 255, .30);
  color: var(--head-fg);
}
.authbtn:hover {
  border-color: var(--head-on);
  color: var(--head-on);
  text-decoration-color: currentColor;
}
.authwho { color: #a496c9; }

/* ---- 히어로 (홈) ----
   밝은 하늘색 그라데이션이던 자리를 CI 의 보라로 바꾼다. 아래쪽 끝을 --bg 로
   맞춰 두던 장치는 걷는다 — 어두운 띠는 흰 밴드와 경계가 분명한 편이 맞다. */
.band.b-tint {
  position: relative;
  background: radial-gradient(96% 130% at 16% 8%, #3a1c6b 0%, #20103d 60%, #180b30 100%);
  box-shadow: none;   /* 밝은 시절의 윗면 하이라이트(흰 1px)는 여기서 자국이 된다 */
}
.b-tint > .wrap { position: relative; z-index: 1; }

/* **자르는 층을 따로 둔다.** 밴드 자신에 overflow:hidden 을 걸면 검색 자동완성
   목록(.suggest, 최대 340px)이 밴드 밖으로 못 나가 잘린다 — 이 화면에서 제일
   많이 쓰는 조작이 그것이다. 그림만 담은 층을 깔고 그 층만 자른다. */
.hero-art {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

/* CI 심볼 — 실제 도형 그대로. 접힘점은 한 점(55% 51%)에서 만난다. */
.hero__ci {
  --ci-h: 118%;
  position: absolute;
  top: 34%;
  left: 0;
  height: var(--ci-h);
  aspect-ratio: 95 / 166;        /* 원본 CI 비율 */
  transform: translateY(-50%);
  filter: drop-shadow(0 0 60px rgba(237, 2, 129, .35));
}
.hero__ci i { position: absolute; inset: 0; display: block; }
.hero__ci .y { clip-path: polygon(100% 0%, 100% 34%, 0% 34%);   background: #fdb934; }
.hero__ci .o { clip-path: polygon(0% 34%, 100% 34%, 55% 51%);   background: #f68620; }
.hero__ci .d { clip-path: polygon(0% 34%, 55% 51%, 0% 68%);     background: #5b2a96; }
.hero__ci .p { clip-path: polygon(0% 68%, 100% 68%, 55% 51%);   background: #862991; }
.hero__ci .m { clip-path: polygon(0% 68%, 100% 68%, 100% 100%); background: #ed0281; }

/* 글자 가독성용 베일. **왼쪽이 열리고 오른쪽이 덮인다** — CI 가 왼쪽 끝에서
   잘려 들어오므로 열린 쪽이 그림 위여야 한다. 270deg 는 0% 가 오른쪽이다
   (그래서 .96 이 오른쪽·.34 가 왼쪽으로 간다). 그림을 반대쪽으로 옮기면
   이 각도도 함께 뒤집어야 한다. */
.hero__veil {
  --veil-mid: 62%;
  position: absolute;
  inset: 0;
  background: linear-gradient(270deg,
    rgba(24, 11, 48, .96) 0%,
    rgba(24, 11, 48, .90) var(--veil-mid),
    rgba(24, 11, 48, .34) 100%);
}

/* 넓은 화면도 좁은 화면과 같은 구도다 — 왼쪽 끝에 붙고 위아래로 잘려 나가며
   제목 뒤까지 파고든다. 높이를 키우는 것으로 그 인상을 맞춘다: 118% 를 그대로
   쓰면 폭이 160px 밖에 안 돼 '잘려 들어온 심볼' 이 아니라 '작게 놓인 로고' 로
   보인다(1280 실측). */
@media (min-width: 760px)  { .hero__ci { --ci-h: 200%; } .hero__veil { --veil-mid: 56%; } }
@media (min-width: 1200px) { .hero__ci { --ci-h: 215%; } .hero__veil { --veil-mid: 52%; } }

.hero h1 { color: #fff; }
.hero-sub { color: #c5b9de; }
.hero-note { color: #a99cc6; }
/* 이 줄에서 유일하게 누르는 곳. 밝은 시절에는 --text(검정)+700 이 그 일을 했는데
   어두운 바탕에서는 묻힌다 — 머리줄의 강조와 같은 노랑을 쓴다. */
.hero-note a { color: var(--head-on); }

/* ---- 종목찾기 띠 (홈이 아닌 전 페이지) ----
   머리줄과 같은 바탕으로 이어 붙이고 CI 를 왼쪽 끝에서 잘라 넣는다. 홈의 히어로가
   하는 일을 이 짧은 띠가 대신한다 — 홈에는 이 줄이 없고(히어로 검색창이 있다),
   나머지 장에는 히어로가 없다.

   그림 층·심볼·베일은 홈과 **같은 클래스**를 쓴다(.hero-art / .hero__ci / .hero__veil).
   구현을 두 벌로 두면 한쪽만 고쳐지고, 두 화면의 CI 가 서로 다른 각도로 앉는다. */
.searchband {
  position: relative;
  background: radial-gradient(96% 130% at 16% 8%, #3a1c6b 0%, #20103d 60%, #180b30 100%);
}
/* **자동완성 목록이 목록 화면의 붙박이들 위에 서야 한다**(2026-09-09 지적).
   이 줄이 `z-index: 1` 로 쌓임 맥락을 만들기 때문에, 그 안의 `.suggest` 가
   z-index 30 이어도 바깥에서는 **이 1 로만 겨룬다.** 목록 화면에는 그보다 큰
   붙박이가 여럿이라(알약 받침 .pillstick 2 · 표 고정 칸 td.pin 2 · th.pin 3)
   검색 결과가 그것들 뒤로 숨었다 — 종목을 치는 중에 고를 수가 없다.

   값은 **머리줄(.site-head 20) 바로 아래**로 둔다. 목록이 덮어야 할 것은 그
   아래 본문뿐이고, 스크롤한 머리줄은 여전히 이 띠 위로 지나가야 한다.
   16 은 그 사이에서 이 화면의 붙박이(최대 3)와 떠 있는 표 머리(.fixhead 15)를
   모두 넘는 값이다. 새 붙박이를 15 위로 올릴 일이 생기면 여기도 함께 봐야 한다. */
.searchband > .searchbar { position: relative; z-index: 16; }

/* **띠 높이에 맞춰 접힘점이 보이게 한다.** 홈은 245px 짜리 띠에 527px 심볼이라
   가운데 46% 가 보이는데, 여기는 띠가 97px 뿐이라 같은 배율(420%)로 키우면 심볼의
   24% 만 지나간다 — 화면에서는 그냥 색 얼룩이었다(네 값을 대 보고 골랐다).
   170% 면 위아래 날개가 살짝 잘리면서 X 로 만나는 접힘점이 띠 안에 들어와,
   작아도 CI 로 읽힌다.
   top 도 50% 다. 홈의 34% 는 큰 그림에서 위쪽을 보여 주려는 값인데, 낮은 띠에서
   그대로 쓰면 접힘점이 아래로 밀려 나간다. */
/* 10px 은 **픽셀로** 올린다(2026-09-02 요청). top 을 % 로 깎으면 띠 높이가
   폭마다 달라(데스크톱 97 · 모바일 114px) 올라가는 거리도 함께 달라진다 —
   눈으로 맞춘 값은 그 거리이지 비율이 아니다. */
.searchband .hero__ci {
  /* 170% → 340%. 두 배다(2026-09-02 요청). 폭이 94 → 188px 이 되므로 아래
     '왼쪽에 붙는 자리' 상수도 함께 커져야 한다 — 그 값은 심볼 폭이다. */
  --ci-h: 340%;
  top: 50%;
  /* 10 → 30px. 두 배로 키우면 접힘점 아래쪽이 그만큼 내려앉아, 같은 자리에 두면
     띠에 보이는 것이 아래 날개 쪽으로 치우친다. */
  transform: translateY(calc(-50% - 30px));
}

/* 안내문. 밝은 시절의 --text-4(#93959c)는 이 바탕에서 2.6:1 이라 읽히지 않는다. */
.searchband .search-note { color: #a99cc6; }
/* 이 줄에서 유일하게 누르는 곳 — 머리줄·히어로와 같은 노랑이다. */
.searchband .search-note a { color: var(--head-on); }

/* ---- CI 는 검색창을 따라간다 ----
   `left: 0` 만 두면 넓은 화면에서 **검색창은 가운데로 가는데 CI 만 왼쪽 끝에
   남는다.** 1280 에서는 둘이 붙어 있어 안 보이던 문제가, 2560 에서는 642px 이
   벌어져 왼쪽 구석에 심볼 하나가 덩그러니 놓인다(2026-09-02 지적).

   그래서 왼쪽 끝이 아니라 **검색창 왼쪽 모서리**를 기준으로 세운다. 오른쪽 값에
   min() 을 걸어 두 규칙을 한 줄에 담는다.

     · calc(50% + N)      — 검색창 왼쪽에서 10px 떨어진 자리. 넓은 화면에서 이 값이
                            이긴다. N = 콘텐츠 기둥 절반 + 10.
     · calc(100% - W)     — 화면 왼쪽에 딱 붙은 자리(W 는 심볼 폭). 좁은 화면에서는
                            검색창이 화면 끝에 가까워 10px 을 띄울 자리가 아예 없다.
                            그때는 이쪽이 이겨 지금까지처럼 왼쪽에 붙고, 검색창이
                            심볼 위로 조금 올라탄다 — 좁은 화면의 원래 모습이다.

   좁은 화면(<760px)은 left:0 그대로다. 거기서는 검색창이 화면을 다 쓰므로
   기준으로 삼을 모서리가 없다. */

/* 홈 히어로 — .hero__inner 가 720px 기둥이라 검색창 왼쪽은 50% - 360px 이다.
   W 는 그 폭에서 실제로 그려지는 심볼 폭이다(--ci-h 가 폭마다 달라 함께 바뀐다). */
@media (min-width: 760px) {
  .hero__ci { left: auto; right: min(calc(50% + 370px), calc(100% - 281px)); }
}
@media (min-width: 1200px) {
  .hero__ci { right: min(calc(50% + 370px), calc(100% - 302px)); }
}


/* ---- CI 왼쪽선을 머리줄 'ETF Web' 에 맞춘다 (2026-09-02 요청) ----
   앞의 min() 배치(검색창에서 10px)를 대신한다. 기준을 검색창이 아니라 **로고**로
   옮기면 머리줄과 그 아래 그림이 한 세로선에 서서, 폭이 바뀌어도 그 선이 안 흔들린다.

   로고 왼쪽선은 max(14px, 50% - 546px) 이다 — .site-head .inner 가 1120px 기둥에
   좌우 14px 이므로 W/2 - 560 + 14 이다.
   **546 이지 553 이 아니다.** 창 1280 에서 로고를 재면 87px 이라 640-87=553 으로
   보이는데, CSS 의 50% 는 창이 아니라 **담는 상자**(세로 스크롤바를 뺀 1265px)를
   기준으로 푼다. 553 을 쓰면 CI 가 로고보다 7px 왼쪽에 선다(실측). */
.hero__ci { left: max(14px, calc(50% - 546px)); right: auto; }

/* 종목찾기 띠도 **같은 선**을 쓴다(2026-09-02 요청). 히어로와 머리줄과 이 띠의
   심볼이 한 세로선에 서고, CI 가 1120px 기둥 밖으로 나가지 않는다.

   이 띠는 검색창이 기둥을 통째로 써서 왼쪽 모서리가 로고에서 2px 뿐이다. 그래서
   심볼의 대부분은 흰 검색창 **뒤로** 들어가고, 검색창 위아래로 남는 자리에서만
   보인다 — 심볼을 두 배로 키우고(340%) 위로 올린 것이 그 자리를 채우기 위해서다. */
.searchband .hero__ci { left: max(14px, calc(50% - 546px)); right: auto; }


/* ---- 표의 종목명도 두 줄까지 (2026-09-02 요청) ----
   목록(.lst·.mv)은 이미 두 줄 규칙을 쓰는데 표만 빠져 있었다. 390px 에서 이름이
   세 줄 넘게 늘어지는 행이 /etf/ 에 있었고, 한 행만 키가 커지면 표가 들쭉날쭉해진다.

   **칸이 아니라 안쪽 상자에 건다.** td 에 display:-webkit-box 를 주면 table-cell 이
   풀려 표 배치가 통째로 무너진다.

   줄 나눔 규칙도 목록과 같은 것을 쓴다. 낱말 경계에서만 끊으면 첫 줄에 'KODEX'
   하나만 남고 뒤가 통째로 둘째 줄로 가, 빈자리를 두고 잘린다.

   ---- 클램프를 링크에서 .nm 으로 옮긴다 (2026-09-05) ----
   예전에는 이 규칙이 **링크**에 걸려 있었다. 그러면 링크가 통째로 하나의 덩어리
   (atomic inline)가 되어, 이름이 두 줄인 행에서는 그 옆에 코드가 설 자리가 없어
   종목코드가 셋째 줄로 떨어졌다. 이제 이름·코드·배지를 함께 감싼 상자(.nm,
   _rowname.html 이 찍는다)가 클램프를 지고, 링크는 평범한 인라인으로 돌아간다.
   셋이 한 흐름이라 코드와 배지는 늘 이름 마지막 낱말 바로 뒤에 붙고, 두 줄
   상한은 그대로다(셋째 줄로 넘어가는 대신 잘린다). */
.table-scroll td.name > a {
  display: inline;
  word-break: normal;
}
/* ---- 이름 칸은 **아무것도 자르지 않는다** (2026-09-07 지시) ----
   "2줄로 한다는 것도 모바일에서 텍스트 줄임 표시 안 나오도록 한다는 게 목적이야."
   이름은 칸 폭에서 자연스럽게 접히고, 배지는 이름 마지막 낱말 뒤에 인라인으로
   이어 붙는다. 대개 두 줄이 되지만 **두 줄이 상한은 아니다** — 이름+배지가
   길면 셋째 줄로 선다(실측 /theme/0101999 390px 427행 중 6행).

   그래서 상한(max-height)과 잘라내기(overflow:hidden)를 둘 다 없앤다. 말줄임도
   쓰지 않는다. `-webkit-line-clamp` 는 2026-09-05 에 이미 걷어냈다 — WebKit 이
   줄 수가 한도에 닿기만 하면 `…` 을 그려서, 잘린 것이 없는 행에도 붙었다
   (아이폰 실측 1,119행). 그 뒤 max-height 로 상한만 남겨 뒀는데, 이번 지시로
   그 상한마저 없앴다. 이제 이 칸에서 글자가 사라지는 경우는 없다.

   대신 **폭 상한(max-width)은 필요하다.** 세로 상한을 풀면 표 자동 배분이
   긴 이름 쪽으로 칸을 넓히려 하고, 이 칸은 sticky 라 늘어난 만큼 데이터 칸의
   가시 폭을 영구히 뺏는다(어제 실측: nowrap 만 걸었을 때 폰에서 190 → 295px).

   `line-height` 는 건드리지 않는다. 상속값 21.6px(13.5px × 1.6) 그대로다 —
   함께 1.45 를 준 판을 재 봤더니 1,167행 중 1,064행의 칸 높이가 2px 씩 줄었다. */
.table-scroll td.name > .nm {
  display: inline-block;
  /* **줄 안에서도 가운데다.** 칸은 이미 vertical-align:middle 인데 이름이 위로
     붙어 보였다(실측 390px 한 줄 행: 위 11 / 아래 18.1). 이 상자가 overflow:hidden
     인 인라인블록이라 **아래끝이 곧 기준선**이 되고, 그 밑으로 줄상자의 내림
     (descender)이 남기 때문이다. 배지가 줄상자를 21.6 → 28.2px 로 밀어 올려
     그 차이가 더 벌어졌다.
     middle 로 두면 상자가 줄 가운데에 서서 위아래가 같아진다 —
     실측 14.5 / 14.5, 두 줄 행 6.5 / 6.5. 덤으로 두 줄 행 높이가 62.8 → 56.2px
     로 줄어든다(기준선 밑에 남던 자리가 없어진다). */
  vertical-align: middle;
  overflow: visible;
  word-break: break-all;
}

/* ---- 이름 칸의 종목코드와 배지 (2026-09-05) ----
   **종목코드는 화면에서만 감춘다.** HTML 에서 지우지 않고 sr-only 와 같은 클리핑을
   건다 — 이 사이트의 수용 기준이 "curl 원문만 읽고도 코드를 알 수 있어야 한다"
   이고, 종목코드 검색어가 실제로 들어온다(위 .row-code 주석). 순위 숫자를
   <span class="sr-only">1위 </span> 로 둔 것과 같은 처리다.
   `display:none` 이 아니라 클리핑이라 텍스트가 살아 있다.

   **`.nm` 안에 있는 코드만** 감춘다. 그 상자는 _rowname.html 매크로만 찍으므로,
   ETF 를 줄로 싣는 다섯 표에만 걸린다. 구성종목·상장폐지 표(etf_holdings ·
   etf_delisted)의 코드는 종목명 옆 괄호 그대로 보인다 — 거기서 코드는 이 사이트가
   아니라 남의 종목을 가리키는 값이라, 이름만 남기면 무엇을 담았는지가 흐려진다. */
.table-scroll td.name > .nm .row-code {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* 배지는 이름과 **같은 인라인 흐름**에 있다. 아랫줄에 블록으로 두면 이름이 짧아
   자리가 남아도 반드시 줄이 바뀌어, 한 줄이면 될 행이 두 줄이 된다. 인라인이면
   이름 마지막 낱말 바로 뒤에 이어 붙고 자리가 모자랄 때만 넘어간다 —
   종목코드가 서던 방식 그대로다. 그래서 .rowtags 는 .nm **안**에 들어간다. */
.table-scroll td.name .rowtags {
  display: inline;
  word-break: normal;
}
/* 배지 치수. 이름 뒤에 셋까지 붙으므로 순위 줄(11px)보다 한 치수 더 줄인다.
   10px 밑으로는 한글 획이 뭉개진다(실측). 세로 여백은 0 으로 두고 line-height 로
   높이를 잡는다 — 인라인이라 위아래 패딩은 줄 높이를 밀지 않고 겹칠 뿐이다.
   .nm 의 break-all 이 배지 글자까지 물어 '레버 / 리지' 로 쪼개지 못하게 한다
   (.row-code 에 같은 이유로 건 규칙과 짝이다). */
.table-scroll td.name .rowtags .badge {
  display: inline-block;
  margin-left: 4px;
  padding: 0 5px;
  font-size: 10px;
  line-height: 1.6;
  white-space: nowrap;
  word-break: normal;
  vertical-align: 1px;
}
/* 배지 **사이**만 1px 이다(2026-09-14 지시 "ETF 종목명 안에 배지 사이 여백은
   1픽셀만 주자"). 줄인 것은 배지끼리의 사이 하나뿐이고 이름↔첫 배지는 위의 4px
   그대로 둔다 — 셋이 한 덩이로 보이면서도 그 덩이가 이름에 달라붙지는 않아야
   '…액티브' 로 끝나는 이름과 '개인' 배지가 한 낱말로 읽히지 않는다. 그래서
   margin-left 를 .badge 전체에서 내리지 않고 **둘째 배지부터**(.badge + .badge)
   덮는다.
   이 한 줄이 듣는 것은 **마크업에 배지 사이 빈칸이 없기 때문**이다. inline-block
   은 앞뒤 공백을 글자 한 칸으로 그리므로(.linklist .sub 주석의 그 함정), 빈칸이
   남아 있었으면 margin 을 1px 로 내려도 보이는 사이는 4~5px 에서 꿈쩍하지 않는다.
   _rowname.html 의 row_tags 가 {%- -%} 로 줄바꿈을 다 먹어 원문이
   `</span><span class="badge` 로 붙어 나온다(실측 /etf/: 붙은 경계 1,533곳,
   빈칸 0곳). 반대로 이름↔첫 배지는 row_name 이 .row-code 와 .rowtags 사이에
   줄바꿈을 남겨 실측 7.78px = margin 4px + 빈칸 3.78px 이다. 그 자리는 손대지
   않았으므로 7.78px 그대로다.
   실측(1280·390 공통, 배지 4개 행): 이름↔1 7.78 / 1↔2 4→1 / 2↔3 4→1 / 3↔4 4→1. */
.table-scroll td.name .rowtags .badge + .badge { margin-left: 1px; }

/* 유형 배지. 색은 **이미 있는 토큰만** 쓴다.
     레버리지·인버스 = 연금 불가를 뜻하는 주황(--lev-*). theme 의 그 토큰 뜻이
       그대로 "레버리지·인버스 — 연금 불가" 라, 색이 그 무리를 가리키고 글자가 둘을 가른다.
     액티브 = 레몬 노랑(--act-*). 2026-09-05 에 강조 파랑에서 옮겼다 — 파랑은
       AI 표시 전용이다. 왜 이 각의 노랑인지는 :root 의 --act-soft 주석에 있다.
   패시브는 배지를 달지 않는다 — 약 740행에 붙는 다수라 늘 켜져 있는 표시였고,
   배지가 없는 것이 곧 패시브다. 클래스만 남겨 둔다. */
.badge.kind-lev,
.badge.kind-inverse { background: var(--lev-soft); color: var(--lev-text); border-color: transparent; font-weight: 600; }
.badge.kind-active { background: var(--act-soft); color: var(--act-text); border-color: transparent; font-weight: 600; }
.badge.div-m { background: var(--div-m-soft); color: var(--div-m-text); border-color: transparent; font-weight: 600; }

/* ---- 전 종목 목록 거르기 상자 (2026-09-03) ----
   1,167행을 한 표에 내는 화면이라 좁힐 손잡이가 필요했다. 정렬 알약(.sortbar)과
   같은 부품(.sortrow · .sortlab · .pills · .pill)을 쓴다 — 같은 자리에서 같은 일을
   하는 조작에 모양을 따로 주면 화면의 어휘만 늘어난다. */
/* 세로 간격 8 → 6px, 아래 12 → 6px (2026-09-05). 이 `gap` 이 알약줄1↔알약줄2 와
   알약줄2↔거르기칸 두 자리를 한꺼번에 정한다(실측 8px 씩). 세 줄이 **같은 조작 한
   벌**이라 서로 붙어 있는 편이 한 덩어리로 읽히고, 줄끼리는 알약의 테두리·캡슐의
   바탕색이 이미 갈라 준다 — 6px 밑으로 내리면 캡슐 바탕이 위아래로 이어져 두 줄이
   한 줄로 뭉쳐 보인다.
   아래 12px 은 이 상자와 표 제목 사이다. 표 제목은 이 거르기의 **결과**를 세는 줄
   (aria-live 로 개수가 바뀐다)이라 멀 이유가 없다. 이 상자는 한 장(/etf/)만 쓴다. */
.listfilter { margin: 0 0 6px; display: flex; flex-direction: column; gap: 6px; }

/* ---- 거르기 알약은 스위치다 (2026-09-05) ----
   운용사·연금·유형 알약은 눌러서 켜고 끄는 것인데, 밑의 정렬 알약(주소를 바꿔
   이동)과 생김새가 똑같아 무엇이 스위치인지 구분되지 않았다. `.toggle` 이 쓰는
   동그라미를 그대로 붙인다 — 빈 원이 꺼짐, 채워진 원이 켜짐.
   `.pill` 이 inline-flex 라 동그라미는 flex 항목이 된다(vertical-align 대신 flex: none).
   켜짐 판정은 filter.js 가 붙이는 `.on` 을 그대로 쓴다. */
.listfilter .pill::before {
  content: "";
  display: inline-block;
  flex: none;
  width: 7px; height: 7px;
  margin-right: 6px;
  border-radius: 50%;
  border: 1px solid currentColor;
  background: transparent;
}
.listfilter .pill.on::before { background: currentColor; border-color: currentColor; }
/* 손가락 기기에서는 :hover 가 탭 뒤에도 남아 꺼진 알약이 켜진 것처럼 보인다.
   (.toggle 이 같은 이유로 커서 있는 기기에만 건다) */
@media (hover: hover) and (pointer: fine) {
  .listfilter .pill:hover::before { border-color: var(--text); background: var(--text); }
  .listfilter .pill.on:hover::before { border-color: currentColor; background: currentColor; }
}

/* **'전체' 에는 동그라미를 달지 않는다.** 스위치가 아니기 때문이다 — KODEX 를
   켜면 '전체' 는 스스로 꺼진다. 켜고 끄는 것이 아니라 **그 축의 거르기를 지우는
   자리**라서, 같은 표시를 달면 나머지와 같은 종류로 읽힌다.
   **표식은 축 이름이 아니라 클래스로 단다.** 예전에는 여기에
   `[data-brand=""]`·`[data-pen=""]`·`[data-kind=""]` 를 열거했는데, 축이 하나
   늘 때마다 이 줄을 같이 고쳐야 하는 것을 템플릿 쪽에서는 알 길이 없다.
   실제로 다른 장에서 새 축('시장')을 만들자 그 '전체' 알약에 동그라미가 붙었다.
   `.pillabel`·`.lf-go` 가 이미 클래스로 빼는 것과 같은 방식으로 맞춘다. */
.listfilter .pill.pill-all::before { content: none; }

/* 거르는 칸은 사이트의 검색창과 **다르게** 생겨야 한다. 그쪽은 눌러서 다른 페이지로
   가는 문이고 이것은 보고 있는 표를 좁히는 손잡이다 — 같은 파란 테두리를 두르면
   화면에 검색창이 둘 있는 것으로 읽힌다. 표 위의 조용한 입력칸으로 둔다. */
.listfilter .lf-q {
  width: 100%;
  max-width: 320px;
  /* 세로는 3px 이다(8px 이던 것을 줄였다 — 높이 38 → 28px). 표를 좁히는 손잡이지
     글을 쓰는 칸이 아니라, 알약 줄과 같은 두께로 서 있는 편이 한 벌로 읽힌다.
     손가락 표적 권장값 44px 아래로 더 내려가는 것은 감수한 변경이다(원래도 38px).
     **가로와 글자 크기는 그대로다** — 16px 미만이면 iOS 가 확대한다(아래 참고). */
  padding: 3px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  font-size: 16px;   /* 16px 미만이면 iOS 가 포커스 때 화면을 확대한다 */
  font-family: inherit;
}
/* ---- 넓은 화면에서는 **작은 칸**이다 (2026-09-05) ----
   알약이 박스형으로 바뀌자 이 칸만 혼자 커 보였다. 알약 두 줄 밑에 320px 짜리 빈
   상자가 한 줄을 통째로 차지하는데, 실제로 담는 글은 종목명 한두 낱말이다.

   **폭 240px 은 재서 고른 값이다.** 자리표시 글자('종목명 또는 코드로 거르기')가
   이 칸의 글꼴·크기에서 178.89px 이고, 좌우 안여백 24 + 테두리 2 를 더하면 잘리지
   않는 최소 폭이 204.9px 이다. 240px 은 그 위로 17% 여유다 — Pretendard 가 안 내려온
   기기에서 대체 글꼴(Malgun Gothic · Apple SD Gothic Neo)이 더 넓게 그려도 안 잘린다.
   기존 320px 대비 25% 좁다.

   **높이는 건드리지 않는다 — 이미 알약과 같다.** 이 칸은 28px 이고 바로 위
   '유형별 전체' 알약이 28.5px 이다(줄의 높이를 정하는 것은 캡슐 안 맨몸 알약 22.5px
   이 아니라 그 '전체' 알약이다). 22.5px 에 맞춰 위여백을 0 으로 내려 봤더니 22px 이
   되기는 하는데, 글자가 16px 이라 위아래로 3px 씩밖에 안 남아 눈에 띄게 옹색했다
   (실측 스크린샷). 그리고 글자를 줄일 수도 없다 — 16px 미만이면 iOS 가 포커스 때
   화면을 확대하고, 아이패드 가로(1,024·1,180px)는 이 미디어쿼리 **안**에 있다.

   **좁은 화면은 손대지 않는다.** 390px 에서 이 칸은 320px 이고 칸(362px)이 거의 다
   차 남는 자리가 42px 뿐이라, 지적의 원인인 '빈 상자' 가 아니다.

   왼쪽 선은 저절로 맞는다 — 이 칸도 위 두 줄도 `.listfilter` 라는 같은 세로 flex 의
   자식이라 왼끝이 하나다(실측 셋 다 left 100 · 390px 에서 14). */
@media (min-width: 641px) {
  .listfilter .lf-q { width: 240px; }
}
.listfilter .lf-q:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(0, 106, 249, .12);
}

/* 알약 안의 개수. 이름보다 한 단계 낮춘다 — 고르는 것은 운용사이고 숫자는 곁말이다.
   켜진 알약은 검은 바탕이라 회색이 묻힌다: 거기서는 글자색을 물려받아 흰색으로 간다. */
/* ---- 키워드 줄 — 눌러야 펴진다 (2026-09-06) ----
   입력칸이 평소에 한 줄을 통째로 먹는 것이 여러 번 지적됐다. 이제 유형별 줄 맨 앞의
   `키워드` 알약이 이 줄을 펴고, 펴진 줄은 **위 두 줄과 같은 꼴**이다 —
   왼쪽에 받침 하나, 그 오른쪽에 내용.

   ############  `[hidden]` 이 이겨야 한다  ############
   이 상자에는 `sortrow` 가 함께 붙는데 그 규칙이 `display: flex` 다. 작성자 규칙은
   브라우저 기본 `[hidden] { display: none }` 보다 세므로, **가만히 두면 서버가 찍은
   `hidden` 이 통째로 무시되고 줄이 늘 펴져 있다.** 그래서 `[hidden]` 을 되살리는
   규칙을 명시한다 — 이 파일이 `.headsearch[hidden]`·`.headsearch-btn[hidden]` 에서
   이미 쓰는 그 수다. 클래스+속성(0,2,0)이 `.sortrow`(0,1,0)를 이긴다.
   `display: flex` 를 이 상자에 직접 걸지 않는 것도 같은 이유다 — `sortrow` 가 이미
   준다. */
.listfilter .lf-qwrap[hidden] { display: none; }
/* 줄 안의 간격만 6px 로 맞춘다. `.sortrow` 기본은 8px 인데, 위 두 줄은 `.pills`
   (gap 6px)가 받침과 캡슐 사이를 정하고 있어 그대로 두면 이 줄만 2px 벌어진다.
   **줄 사이** 간격은 `.listfilter { gap: 6px }` 가 이미 셋을 한꺼번에 정한다.
   `nowrap` 은 이 줄이 접히지 않게 한다 — 접히면 '검색' 이 아랫줄로 떨어져
   왼쪽 받침 하나에 내용 하나라는 세 줄의 꼴이 깨진다. 좁아지면 입력칸이 줄어든다. */
.listfilter .lf-qwrap { gap: 6px; flex-wrap: nowrap; }

/* 왼쪽 `키워드 검색` 은 **글자표다.** 위 두 줄의 '운용사 전체'·'유형별 전체' 와
   생김새는 같지만 span 이고 누르는 것이 아니다. 그래서 `.pill` 에서 온 것 중
   **누를 수 있다고 말하는 것만** 되돌린다 — 손 모양과 호버다.
   스위치 동그라미(`.listfilter .pill::before`)도 지운다. 그 표는 '켜고 끈다' 는
   뜻인데 이 상자는 켜지지 않는다 — '전체' 알약들이 같은 이유로 이미 빠져 있고
   (`[data-brand=""]` 등), 이쪽은 가려낼 데이터 속성이 없어 클래스로 적는다. */
/* **검은 채움이다 — 위 두 줄의 '운용사 전체'·'유형별 전체' 와 같은 모양**(2026-09-06 요청).
   그 둘은 `.pill.on` 이라 검은데, 이 자리는 상태가 아니라 글자표라 `.on` 을 붙일 수
   없다(`on` 은 '지금 켜져 있다' 는 뜻이고 JS 가 그 값으로 판단한다). 그래서 같은
   값(--text 채움 · 흰 글자 · 600)을 여기서 직접 적는다. 4019행 `.pill.on` 과 짝이다.
   한쪽을 바꾸면 이쪽도 함께 봐야 세 줄의 왼쪽 상자가 같은 모양으로 남는다. */
.listfilter .pillabel {
  cursor: default;
  border-color: var(--text);
  background: var(--text);
  color: #fff;
  font-weight: 600;
}
.listfilter .pillabel::before { content: none; }
/* 누를 수 없으니 hover 로 달라지는 것이 없어야 한다. */
.listfilter .pillabel:hover { border-color: var(--text); background: var(--text); text-decoration: none; }

/* 입력칸은 이 줄에서 **남는 폭을 쓴다.** 혼자 서던 때의 240px 고정은 왼쪽에 받침이
   생긴 지금 맞지 않는다 — 받침·입력칸·검색이 한 줄이므로 가운데가 늘고 줄어야 한다.
   상한 320px 은 이 규칙이 원래 갖고 있던 값이다(더 늘리면 1,280px 에서 다시
   '빈 상자' 가 된다 — 그 지적으로 320 → 240 을 했었다).
   `min-width: 0` 이 있어야 390px 에서 입력칸이 먼저 줄고 '검색' 이 안 밀린다. */
.listfilter .lf-qwrap .lf-q { flex: 1 1 auto; width: auto; min-width: 0; max-width: 320px; }
/* 좌우 안여백만 12 → 8px. 390px 에서 이 줄은 `키워드 검색`(88.27) + 6 + 입력칸 + 6 +
   `검색`(50) 으로 꽉 차서, 입력칸 속 자리표시 글자가 쓸 수 있는 폭이 185.73px 이고
   그 글자가 178.89px 이다 — 여유 6.84px 은 **Pretendard 가 안 내려온 기기**에서
   대체 글꼴(Malgun Gothic · Apple SD Gothic Neo)이 조금만 넓어도 잘린다.
   8px 로 줄이면 193.73px 이 되어 8% 더 넓은 글꼴까지 버틴다. 왼쪽 여백이 줄어도
   허전해 보이지 않는다 — 이 줄에는 바로 왼쪽에 `키워드 검색` 상자가 있어 그 사이
   6px 이 이미 글자를 띄운다(혼자 서 있던 때와 다른 점이다).
   넓은 화면에서는 입력칸이 320px 이라 어차피 남는다. 8px 은 이 파일이 쓰는 값이다. */
.listfilter .lf-qwrap .lf-q { padding-left: 8px; padding-right: 8px; }
/* '검색' 은 진짜 알약이라 모양을 그대로 쓰되, 줄 높이에 맞춰 선다 — 맨몸 알약
   22.5px 로 두면 옆의 입력칸(28px)보다 낮아 한 벌로 안 읽힌다. 받침이 같은 수
   (align-self: stretch)로 제 알약을 캡슐 높이에 맞추고 있다.
   **동그라미는 여기서도 지운다.** 이 상자의 동그라미는 '켜고 끈다' 는 표인데
   '검색' 은 눌러서 **실행**하는 것이라 켜지지 않는다 — 안 지우면 `○ 검색` 으로
   그려져(실측) 스위치로 읽힌다. 옆의 `키워드` 알약은 반대다: 글자가 들어 있으면
   켜지는 진짜 스위치라 동그라미를 그대로 둔다. */
.listfilter .lf-go { align-self: stretch; }
.listfilter .lf-go::before { content: none; }


/* 결과 개수는 **표 제목 안**이다. 검색칸 아래에 따로 두던 .lf-count 줄은 없앴다 —
   설명줄(.note)·결과 줄·표 제목 셋이 각자 '몇 종목인가' 를 말하고 있었다.
   자리를 미리 비워 둘 일도 없어졌다: 표 제목은 늘 글자가 있어 한 줄로 서 있고,
   거르는 동안 그 앞부분만 갈아 끼워진다. */
.tablecap [data-lf-count].none { color: var(--warn-text); font-weight: 600; }

/* 좁은 화면에서는 거르기 알약을 **한 줄로 눕혀 옆으로 굴린다.** 운용사 열셋이
   접히면 다섯 줄이 되고(390px 실측), 거르기 상자만 340px 을 먹어 정작 표가 첫
   화면에서 밀려난다 — 좁히려고 온 사람이 좁힐 대상을 못 보게 된다.
   유형 줄도 같은 규약으로 둔다: 접히는 줄에서는 '전체' 의 왼쪽 고정이 성립하지
   않는다(밀 것이 없다). 줄마다 제 .pills 가 스크롤 컨테이너라 따로 굴러간다. */
@media (max-width: 640px) {
  .listfilter .pills {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 2px;
  }
  .listfilter .pills::-webkit-scrollbar { display: none; }
  .listfilter .pill { flex: none; }
}

/* ---- '전체' 는 붙박이, 나머지는 캡슐 하나 (2026-09-05) ----
   줄의 기본은 세로 가운데다. '전체' 받침만 아래에서 stretch 로 되돌려 캡슐 높이를
   따라간다 — 그 예외는 받침에 적어 둔다.

   **줄바꿈은 끈다(nowrap).** `.pills` 기본값 wrap 이면 캡슐의 가정 크기(max-content,
   1,280px 실측 1,175px)가 남은 칸을 넘는 순간 캡슐이 통째로 아랫줄로 떨어진다 —
   줄 안에서 줄이는 것은 그 다음 일이라 좁혀 볼 기회 자체가 없다. 그래서 운용사
   줄만 알약과 캡슐이 위아래로 갈라져 있었다(알약 x=100 · 캡슐 x=100).
   nowrap 이면 캡슐이 그 줄에 남아 남은 폭으로 줄고, 넘치는 알약은 **캡슐 안에서**
   접힌다(아래 flex-wrap: wrap). 두 줄 다 알약 오른쪽에 캡슐이 붙는다.
   좁은 화면(≤640px)은 원래 nowrap + 옆으로 굴리기라 달라지는 것이 없다. */
.listfilter .pills { align-items: center; flex-wrap: nowrap; }

/* **알약 자신을 sticky 로 두면 안 된다.** 알약은 999px 짜리 둥근 상자라 네 귀퉁이가
   투명하고, 밑으로 지나가는 캡슐이 그 홈으로 그대로 비친다 — 형광색으로 물들여
   재 봤더니 줄마다 1,400~1,700 device px(4배 확대 기준)이 샜다.
   그래서 **불투명한 네모 받침**을 하나 두고 그것을 고정한다. 알약은 그 안에 그냥
   놓인다(표 고정 칸을 고친 것과 같은 수다).
   오른쪽 6px 은 알약 사이 틈이다 — 받침이 그 틈까지 덮되(padding-right) 레이아웃은
   그대로여야 하므로 같은 값만큼 음수 margin 으로 되돌린다. */
.listfilter .pillstick {
  position: sticky;
  left: 0;
  z-index: 2;
  flex: none;
  display: flex;
  /* 받침은 **줄 높이를 그대로 받는다**(align-self: stretch). 그래야 안의 '전체'
     알약이 옆 캡슐과 같은 두께로 선다 — 캡슐이 넓은 화면에서 안으로 접혀 두 줄이
     되면 그 높이(1,280px 실측 57px)를 알약도 그대로 따라간다. 알약을 stretch 로
     채우려면 받침 자신도 center 가 아니라 stretch 여야 한다.
     불투명한 네모가 줄 높이를 꽉 채우니, 좁은 화면에서 밑으로 지나가는 캡슐이
     위아래로 새던 것도 함께 막힌다. */
  align-self: stretch;
  align-items: stretch;
  background: var(--surface);
  padding-right: 4px;
  margin-right: -4px;
}

/* 캡슐 규약의 원본이다: --surface-tint 껍데기 · 999px · 안쪽 알약은 제 테두리를
   벗고 배경 투명. **새 색도 새 치수도 만들지 않는다.** (처음에는 상세 장의 절 이동
   띠 `.subnav.capsule` 규약을 그대로 가져왔는데, 그 띠는 2026-09-22 에 밑줄 탭으로
   바뀌어 더는 캡슐이 아니다. 값은 여기 그대로 남고, 분류 칸의 `.paxpills` 가 이것을
   따른다.)
   폭은 내용만큼이다(width:100% 아님) — 그 줄이 스크롤 컨테이너라 껍데기가 칸을
   다 쓰면 스크롤 길이가 껍데기 하나로 고정돼 버린다. */
.listfilter .pillcap {
  display: flex;
  align-items: center;
  /* 알약 사이 2px (2026-09-06, 6 → 4 → 2). 캡슐 안 알약은 테두리도 바탕도 없어
     (아래 `.pillcap .pill`) 사이를 벌려 놓아도 경계가 생기지 않는다 — 나누는 일은
     알약마다 붙은 동그라미가 이미 한다. 그래서 틈은 '붙지만 않을 만큼' 이면 된다.
     글자와 글자 사이로 재면 2 + 안여백 7 + 7 = 16px 이다.
     받침(.pillstick)의 오른쪽 틈은 4px 그대로 둔다 — 그 사이에는 캡슐 자신의
     안여백 3px 이 더 들어가고(합 12px), 검은 상자와 옅은 캡슐은 색이 이미 갈라
     놓아서 알약끼리처럼 벌릴 이유가 없다. */
  gap: 2px;
  flex: none;
  padding: 3px;
  background: var(--surface-tint);
  border-radius: 999px;
}
.listfilter .pillcap .pill { border-color: transparent; background: transparent; }

/* ---- '키워드' 알약 앞은 **삼각형**이다 (2026-09-06) ----
   나머지 알약은 켜고 끄는 스위치라 동그라미(빈 원=꺼짐 / 채운 원=켜짐)를 단다.
   이것은 스위치가 아니라 **아래 줄을 여는** 알약이라 같은 표를 쓰면 거짓말이 된다.
   아래를 향한 세모가 '여기 밑에 더 있다' 는 뜻이고, 열리면 뒤집혀 접힘을 가리킨다.

   **글자(▾)가 아니라 테두리로 그린다.** 글리프는 글꼴이 정하는 크기라 10px 로는
   너무 작고(실측 6×10 상자에 실제로 칠해지는 부분은 그보다 더 작다), 키우면
   줄상자가 함께 자라 알약 높이가 23 → 24 → 26px 로 밀린다(실측). 테두리로 그리면
   9×5px 을 정확히 잡으면서 상자 높이가 5px 이라 옆 동그라미(7px)보다 낮아 알약
   높이를 건드리지 않는다. 이 파일이 `.navmenu > summary::after` 에서 이미 쓰는 수다.

   **특이도를 맞춘다.** 위의 `.listfilter .pill.on::before`(0,3,1)와 hover 규칙
   (0,4,1)이 동그라미의 배경·테두리를 칠하므로, 여기서 `.pill.lf-kw` 로 같은 무게를
   주고 뒤에 둬야 세모가 지워지거나 물들지 않는다. hover 에서 `border: 0` 을 쓰면
   **세모 자체가 사라진다** — 테두리가 곧 그림이라 색만 되돌린다. */
.listfilter .pill.lf-kw::before {
  content: "";
  width: 0; height: 0;
  margin-right: 6px;
  border-radius: 0;
  background: none;
  border-left: 4.5px solid transparent;
  border-right: 4.5px solid transparent;
  border-top: 5px solid currentColor;
  border-bottom: 0;
}
.listfilter .pill.lf-kw[aria-expanded="true"]::before {
  border-top: 0;
  border-bottom: 5px solid currentColor;
}
.listfilter .pill.lf-kw.on::before { background: none; }
@media (hover: hover) and (pointer: fine) {
  .listfilter .pill.lf-kw:hover::before,
  .listfilter .pill.lf-kw.on:hover::before {
    background: none;
    border-left-color: transparent;
    border-right-color: transparent;
    border-top-color: currentColor;
    border-bottom-color: currentColor;
  }
}

/* ---- 거르기 알약만 **살짝 둥근 박스** (2026-09-05) ----
   `.pill` 의 999px 은 높이가 23px 일 때 쓰던 값이다. '운용사 전체' 가 캡슐 높이를
   따라가면서 1,280px 에서 57px 까지 자라자, 위아래가 통째로 반원인 스타디움이 되어
   알약이 아니라 캡슐 하나가 잘못 늘어난 것처럼 보인다.

   **값은 8px 이다. 이 상자가 이미 쓰는 숫자다** — 바로 아래 붙은 거르기 입력칸
   `.listfilter .lf-q` 가 8px 이다(지표 그리드·표도 같은 8px). 알약과 입력칸이 한 상자
   안에 나란히 서므로 여기서는 그 값이 유일하게 맞는 선택이다. 10px(--radius)는 카드의
   값이라 알약이 작은 카드처럼 보이고, 6px(메뉴 항목)은 22.5px 알약에서 거의 각진다.

   **캡슐과 알약이 같은 8px 이어도 안쪽이 삐져나오지 않는다.** 캡슐 안여백이 3px 이라
   안쪽 알약의 모서리 원(중심 (11,11)·반지름 8)에서 캡슐 모서리 원 중심 (8,8)까지
   가장 먼 점이 5.83px 이다 — 캡슐 반지름 8 안이므로 어느 각도에서도 닿지 않는다.
   그래서 안쪽을 5px(8−3)로 따로 줄이지 않고 요청대로 같은 값을 쓴다.

   **받침(.pillstick)은 0 그대로다.** 그 네모는 모양이 아니라 **가림막**이다 — 좁은
   화면에서 밑으로 지나가는 캡슐이 모서리 홈으로 새는 것을 막으려고 일부러 각졌다
   (위 주석의 실측 1,400~1,700 device px). 배경이 카드와 같은 흰색(--surface)이라
   각진 채로도 화면에 보이지 않는다.

   **범위는 `.listfilter` 안뿐이다.** theme.css 의 999px 18곳 중 이 상자에 걸리는 것은
   `.pill`(3706)과 `.listfilter .pillcap`(4848) 둘이고, 나머지 열여섯은 다른 화면이
   쓴다 — 손대지 않는다. */
.listfilter .pill,
.listfilter .pillcap { border-radius: 8px; }

/* 거르기 알약의 **좌우 안여백만** 조인다 (2026-09-06, 12 → 9px).
   키워드 줄에 알약이 아홉이라 12px 이면 캡슐이 766px 이었다. 두 번 조여 7px 이고,
   틈(2px)까지 합치면 운용사 줄 915 → 839px · 키워드 줄 766 → 660px 이다.
   어느 폭에서도 글자는 잘리지 않는다(390·1280 실측 잘림 0).

   **위아래는 그대로다.** 알약 높이 23px 은 옆 받침·캡슐과 맞물려 있고, 손가락으로
   누르는 자리이기도 하다. 전역 `.pill` 을 건드리지 않는 것도 같은 이유다 —
   상세의 구간 알약과 탭줄이 같은 규칙을 쓴다. */
.listfilter .pill { padding-left: 7px; padding-right: 7px; }

/* '전체' 는 캡슐과 **같은 크기의 덩어리**로 선다. 두 줄('운용사 전체' 와 그 아래
   캡슐)이 서로 다른 두께로 서 있으면 한 벌로 안 읽힌다 — 맨몸 알약 23px 대 캡슐
   29px 이었다. 캡슐이 안쪽 알약에 두르는 3px 을 이 알약이 제 몸에 두른다:
   새 치수를 만들지 않고 4px(.pill) + 3px(.pillcap) 이다.
   **높이만이다.** 캡슐 폭(1,280px 에서 1,175px)까지 따라가면 화면 가로를 다 쓰는
   검은 막대가 된다 — 늘리는 것은 두께지 길이가 아니다.
   왼쪽 끝은 건드리지 않는다(받침에 왼쪽 패딩 없음) — '전체' 알약과 캡슐 껍데기가
   같은 x 에서 시작해야 두 줄이 한 기둥으로 선다.
   덤으로 받침이 줄 높이를 꽉 채운다: 좁은 화면에서 캡슐이 같은 줄로 돌아와 밑으로
   지나갈 때, 23px 받침 위아래로 3px 씩 새던 것이 사라진다. */
.listfilter .pillstick > .pill {
  padding-top: calc(4px + 3px);
  padding-bottom: calc(4px + 3px);
}
/* 켜짐은 그대로 검정 채움이다. 위 규칙이 .pill.on(0,2,0)보다 특이도가 높아
   그냥 두면 켜진 알약까지 투명해진다. */
.listfilter .pillcap .pill.on { border-color: var(--text); background: var(--text); }
@media (hover: hover) and (pointer: fine) {
  .listfilter .pillcap .pill:hover { background: var(--surface); }
  .listfilter .pillcap .pill.on:hover { background: var(--text); }
}
/* 주제 알약 안 종목 수(2026-09-17, /topic/ 의 lf-topics 줄). `_listfilter.html` 의
   pillrow(counts=true) 가 글자 뒤에 <i class="pn"> 으로 찍는다. 더 보기 버튼의 개수
   글자(.morebtn i)와 같은 치수다(11px · --text-4 · 등폭 · 기울임 없음). 알약 글자
   (12.5px · 500, 켜지면 600)보다 한 단 작고 옅어 이름이 먼저 읽히고 수는 뒤따른다.
   앞 틈 6px 은 글자와 수 사이가 알약 안여백(7px)보다 좁아야 한 덩이로 읽히기 때문이다.
   켜진 알약은 검정 채움에 흰 글자(.pill.on)라 수도 흰 글자를 옅게 낸다. */
.listfilter .pillcap .pill .pn { font-style: normal; font-size: 11px; font-weight: 500; margin-left: 6px; color: var(--text-4); font-variant-numeric: tabular-nums; }
.listfilter .pillcap .pill.on .pn { color: rgba(255,255,255,.75); }

/* ---- 넓은 화면에서는 캡슐이 **안에서 접힌다** ----
   실측(1280px): 운용사 캡슐은 알약 열셋이 1,175px 을 써서 칸(1,080px)을 넘고,
   그 줄은 wrap 이라 스크롤도 안 한다 — '기타' 가 카드 밖으로 잘려 나갔다.
   좁은 화면에서는 옆으로 미는 것이 답이지만(위 블록), 넓은 화면에서는 **다 보이는
   것**이 답이다. 껍데기 하나는 그대로 두고 그 안에서 줄을 바꾼다.
   `flex: none` 도 풀어야 한다 — 안 풀면 줄이지 못해 여전히 넘친다. */
.listfilter .pillcap { flex: 0 1 auto; flex-wrap: wrap; }

/* 좁은 화면은 위 블록의 규약으로 되돌린다. 미디어쿼리는 특이도를 올리지 않으므로
   **이 자리(뒤)** 여야 위의 기본 규칙을 이긴다. */
@media (max-width: 640px) {
  .listfilter .pillcap { flex: none; flex-wrap: nowrap; }
}

/* ---- /stock/ 종목보유 ETF 표 (2026-09-06) ----
   이름 칸의 폭은 **여기서 정하지 않는다.** ETF 이름이 서는 칸은 /etf/ 의 이름 칸이
   정본이고(사용자 지시), 그 값은 위쪽 두 규칙이 이미 갖고 있다 — 641px 위 17em,
   그 아래 190px. 대표 ETF 칸도 그 선택자에 얹어 같은 값을 쓴다.
   새 치수(29em 따위)를 만들면 같은 이름이 장마다 다른 폭에서 접힌다.
   줄바꿈도 `.table-scroll td.name > .nm` 그대로다(두 줄 상한). 대표 칸이
   `class="rep name"` 인 것은 그 규칙에 걸리기 위해서다 — nowrap 을 주지 않는다. */

/* 비중은 이름에 딸린 근거값이다. 크기는 안 줄이고(13.5px 그대로) 위계는 색으로만
   낸다 — `--text-4` 는 흰 바탕에서 2.99:1 이라 없어도 뜻이 통하는 것에만 쓴다.
   세로로 셋이 설 때 소수점이 어긋나면 눈이 걸리므로 tabular-nums 를 준다. */
.table-scroll td.wt {
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* 거래소 목록으로 가는 줄. 표 아래에 조용히 둔다 — 이 링크가 없으면 하위 15장이
   사이트맵으로만 닿는 고아가 된다. */
.stock-ex { margin-top: 14px; }

/* ---- /provider/ 운용사별 (2026-09-06) ----
   점유율 띠. 한 줄이 시장 전체이고 칸 하나가 운용사 하나다. 표의 점유율 칸과
   같은 수를 그림으로 한 번 더 말하는 자리다.
   **테두리를 두르지 않는다**(블록에 상자를 안 그리는 규칙). 칸끼리는 1px 흰 틈으로
   갈린다 — 선을 긋는 대신 벌리는 방식은 .metrics 가 이미 쓰는 것이다. */
.sharebar {
  display: flex;
  gap: 1px;
  margin: 14px 0 0;
  height: 26px;
  border-radius: 6px;
  overflow: hidden;
  background: var(--surface);
}
.sharebar .sh {
  display: flex; align-items: center; justify-content: center;
  min-width: 2px;
  overflow: hidden;
  color: #fff;
  font-size: 11px; font-weight: 600; letter-spacing: -0.01em;
  white-space: nowrap;
  text-decoration: none;
}
/* 여섯 단계. --bar-aum 을 밝기로만 나눈다 — 색상을 돌리면 순위가 아니라 종류가
   다른 것처럼 읽힌다. 나머지 한 칸은 색을 안 쓰고 회색으로 물러선다. */
.sharebar .sh-1 { background: var(--bar-aum-me); }
.sharebar .sh-2 { background: color-mix(in srgb, var(--bar-aum-me) 78%, var(--bar-aum)); }
.sharebar .sh-3 { background: color-mix(in srgb, var(--bar-aum-me) 56%, var(--bar-aum)); }
.sharebar .sh-4 { background: color-mix(in srgb, var(--bar-aum-me) 34%, var(--bar-aum)); }
.sharebar .sh-5 { background: var(--bar-aum); }
.sharebar .sh-6 { background: color-mix(in srgb, var(--bar-aum) 62%, #fff); color: var(--text-2); }
.sharebar .sh-rest { background: var(--border-soft); color: var(--text-3); }
.sharebar .sh:hover { filter: brightness(1.06); }
.sharebar .sh:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
/* **좁은 화면에서는 아주 넓은 칸만 글자를 진다.** 잘라 쓰지 않고 아예 안 쓴다 —
   이름은 아래 범례가 지므로 잃는 것이 없다.

   경계가 1024px 인 것은 재 보고 정했다. 칸 폭은 띠 폭의 몇 %라 화면이 좁아지면
   같이 준다. 라벨 한 줄('ACE 7.3%')이 53px 인데,
     650px  띠 622px → 7% 칸이 45px   ← 안 들어간다(실측 잘림)
    1024px  띠 984px → 7% 칸이 69px   ← 들어간다
   그래서 1024px 아래에서는 15% 이상(KODEX·TIGER)만 글자를 진다.
   문턱을 6 → 7% 로 올린 것도 같은 이유다 — 1024px 에서 6% 는 59px 이라
   여유가 6px 뿐이고, 점유율은 배치마다 움직이는 값이다. */
@media (max-width: 1023px) {
  .sharebar .sh:not(.sh-w2) span { display: none; }
}

/* 띠 제목. 이것이 없으면 색 조각 한 줄이 무엇인지 화면 어디에도 없다. */
.shlab {
  margin: 16px 0 0;
  font-size: 13px; font-weight: 600; color: var(--text-2);
}
.shlab .hint { margin-left: 6px; font-weight: 400; color: var(--text-4); }

/* 범례. 띠 안에 글자가 들어가는 칸은 넓은 둘뿐이라 나머지 이름은 여기가 진다.
   테두리 없이 흐르는 목록이다 — 블록에 상자를 그리지 않는 규칙. */
.shlegend {
  display: flex; flex-wrap: wrap; gap: 4px 14px;
  list-style: none; margin: 8px 0 0; padding: 0;
  font-size: 12px; color: var(--text-3);
}
.shlegend li { display: flex; align-items: center; gap: 5px; }
.shlegend a { color: var(--text-2); text-decoration: none; }
.shlegend a:hover { text-decoration: underline; text-decoration-color: var(--text); }
.shlegend b { font-weight: 600; color: var(--text); }
.shlegend .sw { width: 9px; height: 9px; border-radius: 2px; flex: none; }
.shlegend .sw-1 { background: var(--bar-aum-me); }
.shlegend .sw-2 { background: color-mix(in srgb, var(--bar-aum-me) 78%, var(--bar-aum)); }
.shlegend .sw-3 { background: color-mix(in srgb, var(--bar-aum-me) 56%, var(--bar-aum)); }
.shlegend .sw-4 { background: color-mix(in srgb, var(--bar-aum-me) 34%, var(--bar-aum)); }
.shlegend .sw-5 { background: var(--bar-aum); }
.shlegend .sw-6 { background: color-mix(in srgb, var(--bar-aum) 62%, #fff); }
.shlegend .sw-rest { background: var(--border-soft); }

/* ---- /provider/ 표 ----
   **브랜드 칩은 늘 둘째 줄이다**(2026-09-06 지시 "2줄로 나오도록"). 이름 뒤에
   붙이면 긴 이름(NH-Amundi·마이다스에셋)만 접혀 행 높이가 43·44·56px 로
   들쭉날쭉해진다. 줄을 고정하면 스물여덟 줄이 같은 높이로 선다. */
.provtable td.name.pin .rowtags { display: block; margin-top: 2px; }
/* 여기는 칩이 줄 맨 앞에 서므로 0 이다. 목록 표의 "배지 사이 1px"(2026-09-14)은
   이 자리에 오지 않는다 — .provtable 도 .table-scroll 안이라 위 선택자가 닿긴
   하지만 특정도가 같고 이 줄이 뒤에 있어 이 값이 이긴다. 그 승부를 줄 순서에만
   맡기지 않으려고 `+ .badge` 를 같은 모양으로 한 번 더 적어 둔다. */
.provtable td.name.pin .rowtags .badge,
.provtable td.name.pin .rowtags .badge + .badge { margin-left: 0; }

/* 순자산 칸은 막대와 값이 **같은 오른쪽 기준**으로 선다. 막대가 왼쪽에서 자라고
   값이 오른쪽에 붙으면 둘이 어긋나 보인다. 막대 120px 이 들어갈 폭을 확보한다. */
.provtable td.col-aum, .provtable th.col-aum { min-width: 148px; }
.provtable td.col-aum .abar { max-width: 120px; }

/* 이름 열이 남는 폭을 다 먹지 않게 한다. `width:1%` 는 표에게 "이 열은 최소로"
   라고 말하는 관용 표현이라, 실제 폭은 min-width 가 정한다. */
.provtable td.rep, .provtable th.rep { width: 1%; }

/* **운용사 칸은 공용 폭(17em)을 쓰지 않는다** (2026-09-06 코멘트 "이 컬럼 넓이
   줄여도 되겠다"). 그 값은 **ETF 이름**이 서는 칸의 규약이고, 여기 서는 것은
   운용사 이름이다. 재 보니 가장 긴 이름이 146px 이라(안여백 20px 을 더해도
   166px) 190~266px 은 남아돌았다.
   13em(175.5px)이면 스물여덟 줄이 한 줄로 서고(실측 접힘 0) 여유가 9px 남는다.
   `width:1%` 를 함께 줘서 남는 폭을 이 칸이 빨아들이지 않게 한다 — 그 폭은
   좁아서 답답하던 숫자 칸들이 가져간다(1280px 실측: 종목 95 → 110 · 순자산
   172 → 199 · 점유율 78 → 90 · 보수 122 → 141).
   폰에서는 190 → 176px 이라 sticky 칸이 데이터에서 뺏는 폭도 14px 줄어든다. */
.provtable td.name.pin, .provtable th.pin { min-width: 13em; width: 1%; }

/* 순자산 칸의 막대. 값 위에 눕는다 — 스물여덟 줄을 훑을 때 자릿수를 세는 것보다
   길이를 견주는 편이 빠르다. 값은 그대로 남긴다(원문을 읽는 쪽이 수를 잃지 않게).
   길이는 1위를 100 으로 놓은 상대값이다. */
.table-scroll td .abar {
  display: block;
  height: 6px;
  margin: 0 0 3px auto;
  width: 100%;
  max-width: 120px;
  border-radius: 999px;
  background: var(--surface-tint);
  overflow: hidden;
}
.table-scroll td .abar i { display: block; height: 100%; border-radius: 999px; background: var(--bar-aum); }

/* 브랜드 칩. 이름 칸의 배지 자리를 그대로 쓰되 색은 중립이다 — 연금·유형 배지가
   색으로 뜻을 지는 자리라, 뜻이 없는 이 칩까지 색을 쓰면 그 약속이 흐려진다. */
.table-scroll td.name .rowtags .badge.brand {
  background: var(--surface-tint);
  color: var(--text-3);
}


/* ---- /compare/ 보수 스트립 (2026-09-06) ----
   최저·최고 두 숫자만으로는 "싼 것 하나와 비싼 것 하나" 인지 "고르게 퍼져 있는지"
   를 알 수 없다. 점 하나가 ETF 하나이고 왼쪽이 쌀수록이다.
   축은 모든 줄이 0~1% 로 같다 — 줄마다 축을 다시 잡으면 그림은 예뻐지지만
   줄끼리 견줄 수 없게 되고, 이 표의 목적이 바로 그 비교다.
   JS 를 안 쓴다. 툴팁은 <title>, 크롤러가 읽을 요약은 <svg> 의 aria-label 이다. */
.feewrap { display: inline-flex; align-items: center; gap: 6px; }
.feestrip { flex: none; }

/* 띠를 감싼 링크 (2026-09-15). 점 하나하나는 표적이 될 수 없어서(지름 5.2px ·
   256점 중 103점이 좌표가 겹친다) 띠 전체가 그 묶음의 비교 장으로 간다 —
   `pages._fee_strip` 주석이 근거의 정본이다.

   **껍데기가 그림 크기를 그대로 가져야 한다.** 인라인 `<a>` 로 두면 줄상자
   (line-height)가 높이를 정해 표적이 그림보다 작거나 커진다. `inline-flex` +
   `line-height: 0` 이면 상자가 svg 에 정확히 붙어 150×16px 이 그대로 표적이
   된다. `flex: none` 은 `.feestrip` 에 있던 값을 그대로 옮겨 온 것이다 —
   이제 `.feewrap` 의 flex 항목이 svg 가 아니라 이 링크다.

   **밑줄을 막는다.** 전역 규칙이 `a:hover { text-decoration: underline }` 이고
   표 안에는 그것을 다시 적은 `.table-scroll td a:hover`(특이도 0,2,2)가 또 있다 —
   그대로 두면 띠 밑에 줄이 하나 더 그어져, 축을 그린 가로선이 둘로 보인다.
   그래서 밑줄을 막는 규칙은 **그 표 안 규칙보다 특이도가 높아야 한다**
   (`.table-scroll td a.feestriplink:hover` = 0,3,2). 실측으로 한 번 졌다:
   `.feestriplink:hover`(0,2,0) 만 적었을 때 hover 의 계산값이 underline 이었다.
   색은 건드리지 않는다 — 점·선 색은 `.feestrip circle`·`line` 이 그대로 진다. */
.feestriplink {
  flex: none;
  display: inline-flex;
  line-height: 0;
  color: inherit;
  text-decoration: none;
}
.table-scroll td a.feestriplink:hover,
.table-scroll td a.feestriplink:focus-visible { text-decoration: none; }
/* 키보드 초점은 보여야 한다. 그림에 딱 붙으면 점과 겹쳐 안 읽히므로 2px 띄운다. */
.feestriplink:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
.feestrip line { stroke: var(--border); stroke-width: 1; }
/* 점에 바탕색 테두리를 둘러 겹친 점끼리 붙어 보이지 않게 한다. `paint-order` 로
   테두리를 먼저 칠해야 안쪽 색이 안 먹힌다. */
.feestrip circle {
  fill: var(--text-2);
  stroke: var(--surface);
  stroke-width: 2;
  paint-order: stroke;
}
.feestrip circle:hover { fill: var(--text); }

/* 최저·최고 두 값은 **가운데 그림을 향해** 선다(왼쪽 값은 오른쪽 정렬, 오른쪽
   값은 왼쪽 정렬). 그래야 셋이 한 덩어리로 읽힌다. 폭을 고정해 줄끼리 그림의
   시작점이 어긋나지 않게 한다 — 어긋나면 축이 같다는 사실이 안 보인다. */
.table-scroll td.fee b {
  display: inline-block;
  min-width: 4.6em;
  font-weight: 400;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}
.table-scroll td.fee b.lo { text-align: right; }
.table-scroll td.fee b.hi { text-align: left; }

/* ---- /provider/ 카드 안 세로 리듬 (2026-09-06 코멘트 둘) ----
   "여백 최대한 줄여" 와 "위 섹션하고 조금 여백을 주자" 는 서로 반대가 아니다.
   위쪽 네 덩어리(지표 띠·소제목·점유율 띠·범례)는 한 묶음인데 사이가 넓어
   따로 노는 넷처럼 보였고(18+16+14+8 = 56px), 정작 그 묶음과 표 사이는
   0px 이라 붙어 있었다. 안쪽을 조이고 경계에 준다.

     지표 띠 18 → 10 · 소제목 16 → 10 · 점유율 띠 14 → 6 · 범례 8 → 5
     범례 → 표 제목 0 → 10   (여기가 '위 섹션과의 여백')
     표 → 꼬리 문장 0 → 10

   합은 56 → 31px 이고 경계 둘에 20px 을 새로 준다. `/etf/` 는 거르기 상자가
   제 안여백으로 6px 을 내고 있어 이 문제가 없다 — 그쪽 값은 손대지 않는다.
   이 장에만 걸리게 `.provcard` 로 좁힌다: `.metrics`·`.tablecap` 은 공용이라
   전역으로 고치면 상세 8칸 지표와 1,100여 장의 표 제목이 함께 움직인다. */
/* 카드 위 안여백. `.price-head:not([data-etf-code]) + .card` 가 16px 을 주고
   있어(0,3,0) 클래스 하나로는 못 이긴다 — 같은 무게로 맞추고 뒤에 둔다. */
/* 제목 바로 아래 여백을 걷는다 (2026-09-07 지시). 이 장은 다른 목록과 달리
   판의 윗선이 h1 에 붙어 있고(그쪽은 16px 떨어져 있다) 첫 내용이 거르기 상자가
   아니라 지표 띠다. 그래서 판 안여백 10 + 띠 위여백 10 = 20px 이 제목 바로 밑에
   **판 색만 깔린 빈 띠**로 보인다 — 폰에서 특히 그렇다.
   0 으로 두어도 글자가 선에 붙지 않는다: 칸이 제 안여백 7px 을 갖고 있어
   '운용사' 글자는 제목 아래 7px 에 선다. */
.price-head:not([data-etf-code]) + .provcard { padding-top: 0; }
.provcard .metrics { margin-top: 0; }
.provcard .metrics li { padding: 7px 12px; }
.provcard .metrics .v { margin-top: 1px; }
.provcard .shlab { margin-top: 8px; line-height: 1.3; }
.provcard .sharebar { margin-top: 5px; height: 22px; }
.provcard .shlegend { margin-top: 4px; line-height: 1.4; gap: 2px 14px; }
/* 점유율 블록(띠 + 범례)이 끝나고 표가 시작하는 자리라 경계가 필요하다.
   8px 이면 범례 마지막 줄과 표 제목이 한 덩어리로 읽혀 어디까지가 그림이고
   어디부터가 표인지 안 갈린다. 위 지표 띠와 소제목들이 10px 로 붙어 있는 것과
   달리 여기는 성격이 바뀌는 경계다 — 42px 을 준다(2026-09-07 지시). */
.provcard .tablecap { margin-top: 42px; }
.provcard .table-scroll + .note { margin-top: 10px; }

/* 폰에서는 범례에서 **운용사 정식명을 뺀다.** 일곱 줄이 넉 줄로 접혀 범례
   하나가 158px 을 먹고 있었다(390px 실측) — 표가 화면 두 번째 스크롤에서야
   나온다. 색을 이름과 잇는 일은 브랜드(KODEX·TIGER)가 이미 한다. 정식명은
   바로 아래 표의 첫 칸에 그대로 있고, HTML 에서 지우는 것이 아니라 화면에서만
   감추므로 크롤러·보조기기는 읽는다.
   실측 390px: 범례 130 → 73px · 카드 위에서 표까지 361 → 304px. */
@media (max-width: 640px) {
  .provcard .shlegend .co { display: none; }
}

/* 히트맵 머리줄. 제목 글자는 sr-only 라 이 줄에 서는 것은 **왼쪽 색 범례와
   오른쪽 정렬 탭** 둘이다(2026-09-07 지시). 범례는 카드 아래 .foot-note 에
   있다가 여기로 올라왔다 — 히트맵을 읽는 법이라 그림보다 뒤에 있을 이유가 없고,
   양 끝에 하나씩 서면 히트맵의 두 세로선과 맞아떨어진다.
   카드 좌우 여백이 0 이라 이 줄의 양 끝이 곧 히트맵 상자의 양 끝이다. */
.heat-head { justify-content: space-between; margin-bottom: 2px; }
.heat-head .legend { margin-right: auto; }
/* 홈의 섹션 머리줄은 `.sect-head .mv-bar` 에 오른쪽 여백 16px 을 준다 — 거기서는
   섹션이 제 좌우 여백을 갖기 때문이다. 이 장의 카드는 좌우 여백이 0 이라 그
   16px 이 히트맵 오른쪽 선보다 안으로 들어가 보인다(실측 탭 1164 · 히트맵 1180). */
.heat-head .mv-bar { margin-right: 0; }

/* 여기 있던 `.heat a.on`(지금 고른 블록의 테두리)은 2026-09-15 에 걷었다 — 그 `.on`
   을 붙이던 themepick.js 와 함께 갔다. 이제 블록은 '고르는 손잡이' 가 아니라 그냥
   링크라(누르면 /theme/<코드> 로 간다) 고른 상태라는 것이 없다. */

/* 히트맵 → 분류별 수익률 표. 2026-09-15 까지는 그 사이에 접기 한 줄이 있고 표 아래에
   '고른 분류의 종목 표' 카드가 또 있었다. 카드를 걷고 접기를 없앴으니 이 카드 하나에
   히트맵과 표가 잇달아 선다.
   **카드 아래 안여백을 되돌린다.** 여기 있던 `padding-bottom: 0` 은 접기 한 줄이
   다음 카드와 34px 이나 벌어져 허공에 뜨는 것을 막던 값인데(2026-09-07), 이제는 표가
   카드의 마지막이라 그대로 두면 표 아랫줄이 카드 끝에 붙는다. `.card` 의 18px 을 쓴다.
   대신 접기 한 줄이 지던 세로 간격(실측 32px)을 표 쪽이 받는다 — 히트맵 바로 밑에
   알약이 붙지 않게 `#theme-table` 이 위 여백을 든다. */
#theme-table { margin-top: 18px; }

/* 행 전체가 링크다(rowlink.js). 누를 수 있다는 것은 손 모양으로만 말한다 — 줄에
   색을 더 쓰면 등락 색과 다투고, 행 배경은 `tbody tr:hover` 가 이미 칠한다.
   **`html.js` 아래에만 건다**: JS 가 없으면 행은 안 눌리고 분류 이름 링크만 눌리는데,
   그 자리에 손 모양이 뜨면 거짓말이 된다(base.html 이 문서 최상단에서 `js` 를 단다). */
.js table[data-rowlink] tbody tr { cursor: pointer; }

/* ---- 상장폐지 ETF 개별 장의 제목부 지표 (2026-09-22 정리, 사용자 결정) ----
   제목 옆에 있던 코드를 지표 상자로 내렸다(사용자 원문 "코드도 의미 없음 제거 → 아니
   아래 지표에 넣자"). 그래서 이 장의 머리 지표는 종목코드 · 상장폐지일 · 운용사 ·
   마지막 종가 · 첫 거래일 대비 다섯이고, 운용사가 비면 넷이다.

   **`.price-head.delisted` 로만 좁힌다.** 시안의 선택자는 `.price-head:not([data-etf-code])`
   였는데 그건 목록·운용사 장(/provider/<코드>, 지표 셋)도 타는 머리라 그대로 넣으면 그
   장의 지표가 제목 오른쪽 칸을 잃고 제목 아래로 내려간다. 위 641px 블록의
   `.price-head:not([data-etf-code]) > .metrics { grid-column: 1; }` 와 특이도가 같아
   (둘 다 0,3,0) **이 블록은 그보다 뒤에 있어야 이긴다.** 파일 끝에 둔 이유다.

   세 규칙: 641px 이상에서 머리가 두 칸 격자(제목 · 부제 자리)가 되므로 지표를 첫 줄
   전체 폭으로 편다. 다섯이면 641px 이상은 한 줄 5칸(기본 3열·4열이면 3+2 · 4+1 로
   회색 칸이 남는다), 640px 이하는 2열 2+2+1 이라 마지막 칸을 두 칸으로 늘린다.
   넷(운용사 없음)은 기존 격자가 이미 2+2(640 이하·641~1024) · 4(1025 이상)로 딱
   떨어지므로 적을 것이 없다. */
.price-head.delisted > .metrics { grid-column: 1 / -1; }
@media (min-width: 641px) {
  .price-head.delisted > .metrics:has(li:nth-child(5):last-child) { grid-template-columns: repeat(5, 1fr); }
}
@media (max-width: 640px) {
  .price-head.delisted > .metrics:has(li:nth-child(5):last-child) > li:last-child { grid-column: span 2; }
}