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

:root {
  --bg: #e9eef9;   /* 옅은 하늘색 — 카드(흰색)와 대비가 생기도록 한 톤 진하게 */
  --surface: #fff;
  --surface-alt: #f9fafc;
  --surface-tint: #f2f4f6;

  --text: #232433;
  --text-2: #494b55;
  --text-3: #71747c;
  --text-4: #93959c;

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

  --accent: #006af9;
  --accent-soft: #e6edff;

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

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

  --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%; }

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

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

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

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

.site-head {
  background: var(--surface);
  border-bottom: 1px solid var(--border-soft);
}
.site-head .inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 12px 14px;
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
}
.site-head .brand { font-weight: 700; font-size: 17px; color: var(--text); }
.site-head nav { display: flex; gap: 12px; flex-wrap: wrap; }
.site-head nav a { color: var(--text-3); font-size: 13.5px; }

.site-foot {
  border-top: 1px solid var(--border-soft);
  background: var(--surface);
  color: var(--text-4);
  font-size: 12.5px;
}
.site-foot .inner { max-width: var(--maxw); margin: 0 auto; padding: 30px 14px 44px; }
.site-foot p { margin: 4px 0; }

.foot-cols {
  display: grid;
  gap: 24px;
  grid-template-columns: 1fr;
}
.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-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 { color: var(--accent); }

.foot-legal {
  margin-top: 26px;
  padding-top: 18px;
  border-top: 1px solid var(--border-soft);
}
.disclaimer {
  color: var(--text-4);
  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 { color: var(--accent); }
.foot-policy .copy { color: var(--text-4); margin-left: auto; }

@media (min-width: 641px) {
  .foot-cols { grid-template-columns: 2fr 1fr 1fr; gap: 32px; }
}

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

.crumbs { font-size: 12.5px; color: var(--text-4); padding: 14px 0 0; }
.crumbs a { color: var(--text-3); }
.crumbs span + span::before { content: "›"; margin: 0 6px; color: var(--border); }

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

.price-head {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 20px;
  margin-top: 14px;
}
.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: 6px 0 0; color: var(--text-3); font-size: 13.5px; }

.quote { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.quote .last { font-size: 32px; font-weight: 700; letter-spacing: -0.02em; }
.quote .delta { font-size: 15px; font-weight: 600; }
.quote .asof { color: var(--text-4); font-size: 12.5px; }

/* 확정 종가와 장중 시세의 구분을 밝히는 안내. JS 없이도 읽혀야 하므로 본문 텍스트다. */
.asof-note {
  margin: 8px 0 0;
  color: var(--text-4);
  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;
  gap: 1px;
  grid-template-columns: repeat(2, 1fr);
  background: var(--border-soft);
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  overflow: hidden;
}
.metrics li { background: var(--surface); padding: 11px 13px; }
.metrics .k { display: block; color: var(--text-4); font-size: 12px; }
.metrics .v { display: block; font-weight: 600; font-size: 15px; margin-top: 2px; }

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

.card {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 18px 20px;
  margin-top: 16px;
}
.card > h2 {
  margin: 0 0 4px;
  font-size: 15px;
  letter-spacing: -0.01em;
  display: flex;
  align-items: center;
  gap: 7px;
}
.card > .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;
}

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

table { border-collapse: collapse; width: 100%; font-size: 13.5px; }
caption { text-align: left; color: var(--text-4); font-size: 12.5px; padding-bottom: 8px; }
th, td {
  padding: 9px 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;
  top: 0;
}
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
td.name { white-space: normal; min-width: 9em; }
tbody tr:hover { background: var(--surface-tint); }

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

.badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; padding: 0; list-style: none; }
.badge {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 12px;
  background: var(--surface-tint);
  color: var(--text-2);
  border: 1px solid var(--border-soft);
}
.badge.on { background: var(--accent-soft); color: var(--accent); border-color: transparent; }

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

.subnav { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; padding: 0; list-style: 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;
}

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

.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; }
.linklist .sub { color: var(--text-4); font-size: 12.5px; }

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

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

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

@media (min-width: 1025px) {
  .wrap { padding: 0 20px 72px; }
  .metrics { grid-template-columns: repeat(4, 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=""]),
th[title]:not([title=""]) {
  text-decoration: underline dotted var(--border);
  text-underline-offset: 3px;
  cursor: help;
}

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

/* ---- 검색 ---- */
.searchbar {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 16px 12px;
}

.searchform {
  position: relative;
  display: flex;
  gap: 6px;
}

.searchform input[type="search"] {
  flex: 1;
  min-width: 0;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  color: var(--text);
  font-size: 14px;
  font-family: inherit;
}
.searchform input[type="search"]:focus {
  outline: 2px solid var(--accent);
  outline-offset: -1px;
}

.searchform button {
  flex: 0 0 auto;
  padding: 9px 14px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface-alt);
  color: var(--text-2);
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
}
.searchform .btn-search { background: var(--accent); border-color: var(--accent); color: #fff; }
.searchform button:hover { filter: brightness(.95); }

/* 자동완성 — 폼 아래로 겹쳐 뜬다. */
/* 홈 히어로 검색창(.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;
  align-items: baseline;
  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); }
.searchform .suggest .s-name,
.hero-search .suggest .s-name { font-weight: 600; font-size: 13px; }
/* 이름이 안 겹치는데 뜻으로 걸린 종목. 표시가 없으면 "왜 이게 떴지"가 된다. */
.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;
}
.searchform .suggest .s-meta,
.hero-search .suggest .s-meta { color: var(--text-4); font-size: 11px; white-space: nowrap; }
.searchform .suggest .empty,
.hero-search .suggest .empty { padding: 9px; color: var(--text-4); font-size: 13px; }

.search-note { margin: 6px 2px 0; font-size: 12px; color: var(--text-4); }

@media (max-width: 640px) {
  .searchform .btn-ai { padding: 9px 10px; }
  .searchform input[type="search"] { font-size: 16px; } /* iOS 확대 방지 */
  .search-note { font-size: 11px; }
}

/* ---- 기간별 수익률 막대차트 ----
   0 선을 기준으로 위(상승·빨강)·아래(하락·파랑)로 갈린다. 좌표는 빌드 타임
   계산이라 여기서는 모양만 맡는다. 같은 수치의 표가 바로 아래 있다. */
.barchart {
  position: relative;
  display: flex;
  align-items: stretch;
  gap: 6px;
  height: 190px;
  margin: 14px 0 4px;
  padding-bottom: 20px;   /* 라벨 자리 */
}

.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 선 아래에 붙인다. */
.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;
}
.barchart .val.up   { 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: 150px; gap: 3px; }
  .barchart .val { font-size: 9px; }
  .barchart .lbl { font-size: 10px; }
  .barchart .bar { left: 8%; right: 8%; }
}

/* ---- 구성비중 트리맵 ----
   좌표는 빌드 타임에 계산돼 style 속성으로 들어온다. 여기서는 모양만 맡는다.
   비중 농도는 파랑 계열로 간다 — 빨강/파랑은 등락 의미로 이미 쓰고 있어
   그 색을 비중에 쓰면 "빨간 칸 = 오른 종목"으로 오독된다. */
.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);
  background: #dbe7f6;
  font-size: 12px;
  line-height: 1.2;
  cursor: help;
}

/* 이름만 들어가는 작은 칸은 여백·글자를 줄여 두 줄이 확보되게 한다. */
.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;
}

/* 앞쪽 칸일수록 진하게 — 문서 순서가 곧 비중 순서다(빌드 시 내림차순 정렬). */
.treemap .tile:nth-child(1) { background: #1b5fb5; }
.treemap .tile:nth-child(2) { background: #2a72c8; }
.treemap .tile:nth-child(3) { background: #4088d6; }
.treemap .tile:nth-child(4) { background: #5b9ce0; }
.treemap .tile:nth-child(5) { background: #79b0e8; }
.treemap .tile:nth-child(-n+3) { color: #fff; }
.treemap .tile:nth-child(-n+3) a { color: #fff; }
.treemap .tile:nth-child(n+4):nth-child(-n+5) { color: #10243c; }

/* 이름은 두 줄까지 접는다 — 한 줄 말줄임이면 '삼성바이오로직스' 같은 이름이
   대부분 잘려서 어느 종목인지 알 수 없다. 세로가 있으면 접어서 보여준다. */
.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;
}

@media (max-width: 640px) {
  /* 좁은 화면에서 16:9 는 칸이 눌려 글자가 안 들어간다. 정사각에 가깝게 편다. */
  .treemap { aspect-ratio: 4 / 3; }
  .treemap .tile { font-size: 11px; padding: 4px 5px; }
}

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

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

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

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

/* 히어로 그라디언트는 아래쪽이 본문 배경색으로 끝나야 경계선이 안 보인다. */
.b-tint { background: linear-gradient(180deg, #e3ecff 0%, #eef2fb 62%, var(--bg) 100%); padding-bottom: 8px; }
.b-white { background: var(--surface); border-top: 1px solid var(--border-soft); border-bottom: 1px solid var(--border-soft); }
.b-gray { background: #eff3fb; }
.b-dark { background: #151a24; color: #98a1b3; }

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

/* ---- 히어로 ---- */
.hero { text-align: center; padding: 40px 0 24px; 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: 9px auto 0;
  max-width: 640px;          /* 좁으면 "연금 편입 가능 / 여부를" 처럼 어색하게 끊긴다 */
  font-size: 15px;
  line-height: 1.55;
  color: var(--text-3);
  text-wrap: balance;
}
.hero-asof { margin: 10px 0 0; font-size: 12.5px; color: var(--text-4); }

.hero-search {
  position: relative;
  display: flex;
  align-items: center;
  max-width: 720px;
  margin: 26px auto 0;
  padding: 5px 5px 5px 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(20, 30, 60, .06);
  text-align: left;
}
.hero-search:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(0, 106, 249, .12);
}
.hero-search input[type="search"] {
  flex: 1;
  min-width: 0;
  padding: 14px 18px;
  border: 0;
  background: transparent;
  color: var(--text);
  font-size: 17px;
  font-family: inherit;
}
.hero-search input[type="search"]:focus { outline: none; }
.hero-search input[type="search"]::placeholder { color: var(--text-4); font-size: 15px; }
.hero-search button {
  flex: 0 0 auto;
  padding: 10px 16px;
  border: 1px solid transparent;
  border-radius: 8px;
  font-size: 13.5px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
}
/* AI 검색은 같은 페이지에서 답하지만 '다른 기능'임을 테두리로 표시한다. 채우지는
   않아 위계는 검색 버튼이 위에 있게 둔다. 회색으로 두면 비활성처럼 보인다. */
.hero-search .btn-ai {
  display: inline-flex; align-items: center; gap: 6px;
  margin-left: 5px;   /* 뒤에 오는 쪽이 간격을 갖는다 — 버튼 순서를 바꾸면 함께 옮긴다 */
  background: transparent;
  color: var(--accent);
  border-color: rgba(0, 106, 249, .35);
}
.hero-search .btn-ai:hover { background: #f4f7ff; border-color: var(--accent); }
.hero-search .btn-ai svg { width: 13px; height: 13px; flex: none; }
.hero-search .btn-search { background: var(--accent); color: #fff; }
.hero-search .btn-search:hover { filter: brightness(.94); }

.hero-note { margin: 12px 0 0; font-size: 12.5px; color: var(--text-4); }

.quicknav { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 22px 0 0; }
.quicknav a {
  display: inline-flex; align-items: baseline; gap: 6px;
  padding: 8px 14px;
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text-2);
  font-size: 13.5px;
}
.quicknav a:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }
.quicknav a span { color: var(--text-4); font-size: 12px; }

/* ---- 섹션 ---- */
.sect { margin-bottom: 34px; }
.sect:last-child { margin-bottom: 0; }
.sect-head {
  display: flex;
  align-items: center;      /* 제목·버튼 높이가 달라 baseline 이면 어긋난다 */
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}
.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-4); }
.sect-link { margin-left: auto; font-size: 12.5px; color: var(--text-3); }
.sect-link:hover { color: var(--accent); }
.sect-note { margin: 12px 0 0; font-size: 12px; line-height: 1.7; color: var(--text-4); }
.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-4);
}

/* ---- 시장 지수 ---- */
.idx { display: grid; grid-template-columns: minmax(0, 1fr); }
/* 이름·값·등락률을 세로로만 쌓으면 오른쪽이 통째로 비고, 그 빈 자리 때문에
   줄 간격이 실제보다 벌어져 보인다. 이름은 왼쪽·값은 오른쪽에 두어 폭을 쓰고,
   등락률은 아래에서 양끝으로 펼친다. */
.idx > div {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 3px 10px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--border-soft);
}
.idx > div:last-child { border-bottom: 0; }
/* 이름과 값을 같은 크기로 둔다. 한 줄에 나란히 서면 크기가 다른 순간
   한쪽이 부속처럼 보이는데, 둘 다 읽어야 하는 정보라 위계를 두지 않는다. */
.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;
  justify-content: space-between;
  gap: 8px;
  margin: 2px 0 0;
  font-size: 13px;
}
.idx-chg span { display: inline-flex; align-items: baseline; gap: 4px; }
.idx-chg em { font-style: normal; color: var(--text-4); font-size: 11.5px; }
.idx-chg b { font-weight: 700; }

/* ---- 테마 히트맵 ---- */
.heat {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 4px;
  padding: 14px;
}
.heat a {
  display: flex; flex-direction: column; justify-content: space-between;
  min-height: 72px;
  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: none; }
/* 이름 줄: 이름(줄어듦) + 종목 수(고정). 이름만 말줄임한다. */
.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; }

/* ---- 탭 ---- */
.tabs { position: relative; }
.tab {
  display: inline-block;
  padding: 6px 12px;
  margin: 0 4px 12px 0;
  line-height: 1;
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--text-4);
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  user-select: none;
}
.tab:hover { color: var(--text); }
.tabpane { display: none; }
#mvtab-d:checked ~ .tabpane-d,
#mvtab-w:checked ~ .tabpane-w,
#mvtab-m:checked ~ .tabpane-m { display: block; }
#mvtab-d:checked ~ label[for="mvtab-d"],
#mvtab-w:checked ~ label[for="mvtab-w"],
#mvtab-m:checked ~ label[for="mvtab-m"] {
  background: #eef1f6; color: var(--text); font-weight: 600;
}
input[name="mvtab"]:focus-visible + .tab { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---- 등락 상위 ---- */
.mv { display: grid; grid-template-columns: minmax(0, 1fr); }
.mv > div { border-bottom: 1px solid var(--border-soft); }
.mv > div:last-child { border-bottom: 0; }
.mv h3 {
  margin: 0; padding: 12px 16px 8px;
  font-size: 11.5px; font-weight: 600; letter-spacing: .02em;
  color: var(--text-4);
}
.mv h3 span { font-weight: 400; }
.mv ol { list-style: none; margin: 0; padding: 0 0 6px; }
.mv li { display: flex; align-items: center; gap: 10px; padding: 7px 16px; font-size: 13px; }
.mv li:hover { background: #fafbfd; }
.mv li .i { flex: none; width: 14px; color: var(--text-4); font-size: 11.5px; }
.mv li .n {
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--text);        /* 종목명은 강조색을 입지 않는다 */
}
.mv li .n:hover { color: var(--accent); }
.mv li .p { flex: none; font-weight: 600; font-size: 13px; }

/* ---- 거래대금 · 괴리율 ---- */
.duo { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.card > .ch { margin: 0; padding: 14px 16px 4px; font-size: 17px; font-weight: 700; letter-spacing: -0.02em; color: #111318; }
.card > .cd { margin: 0; padding: 0 16px 8px; font-size: 11.5px; color: var(--text-4); }
.lst { list-style: none; margin: 0; padding: 0 0 8px; }
.lst li { display: flex; align-items: center; gap: 10px; padding: 8px 16px; font-size: 13px; }
.lst li:hover { background: #fafbfd; }
.lst li .i { flex: none; width: 14px; color: var(--text-4); font-size: 11.5px; }
.lst li .n {
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--text);
}
.lst li .n:hover { color: var(--accent); }
.lst li .v { flex: none; 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; }

/* ---- 순자산 표 ---- */
.home-tbl td, .home-tbl th { overflow: hidden; text-overflow: ellipsis; }
.home-tbl thead th { position: static; background: transparent; }
.home-tbl td.rank { color: var(--text-4); font-size: 12px; }
.home-tbl td.nm { white-space: nowrap; }
.home-tbl td.nm a { font-weight: 600; color: var(--text); }
.home-tbl td.nm a:hover { color: var(--accent); }
.home-tbl td.nm small { display: block; margin-top: 1px; font-weight: 400; font-size: 11.5px; color: var(--text-4); }
.home-tbl td.bar { position: relative; cursor: help; }
.home-tbl td.bar i { position: absolute; right: 16px; bottom: 6px; width: 110px; height: 3px; border-radius: 2px; }
.home-tbl td.bar i b { position: absolute; right: 0; top: 0; bottom: 0; background: #c7ceda; border-radius: 2px; }

/* ---- 개발자 (다크 밴드) ---- */
.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; }
.agent ul { margin: 0; padding: 0; list-style: none; font-size: 12.5px; }
.agent ul li { display: flex; gap: 10px; padding: 4px 0; }
.agent ul li b { flex: 0 0 96px; font-weight: 600; color: #dde2ec; }
.agent .mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; color: #7a8497; }

@media (min-width: 641px) {
  .band { padding: 30px 0; }
  .hero { padding: 56px 0 30px; }
  .idx { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .idx > div { border-bottom: 0; border-right: 1px solid var(--border-soft); }
  .idx > div:last-child { border-right: 0; }
  /* 3열이 되면 칸이 좁아진다. 양끝 정렬 대신 왼쪽에 모아 붙인다. */
  .idx-chg { justify-content: flex-start; gap: 13px; }
  /* 아랫줄을 왼쪽에 모았으면 윗줄도 같은 규칙을 따라야 한다. 값만 칸 오른쪽 끝으로
     밀면 두 줄의 오른쪽 끝이 100px 어긋나(등락률은 430, 값은 530에서 끝났다)
     칸 가운데가 통째로 비어 보인다. 값을 이름 바로 옆에 붙인다. */
  .idx > div { grid-template-columns: auto minmax(0, 1fr); }
  .duo { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  .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) {
  .mv { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mv > div { border-bottom: 0; border-right: 1px solid var(--border-soft); }
  .mv > div:last-child { border-right: 0; }
}

@media (max-width: 640px) {
  .band { padding: 20px 0; }
  .hero { padding: 26px 0 18px; }
  .hero h1 { font-size: 22px; line-height: 1.35; }
  .hero-sub { font-size: 14px; }
  /* 모바일은 두 줄로 나눈다. 한 줄에 입력창과 버튼 둘을 욱여넣으면 정작 검색어
     칸이 손가락 두 개 폭밖에 안 남아, 종목명을 치는 동안 앞이 안 보인다.
     위는 입력만 쓰고, 버튼은 아랫줄 오른쪽 — 엄지가 닿는 자리 — 로 몰았다.
     641px 이상은 한 줄이 넉넉하므로 그대로 둔다. */
  .hero-search { flex-wrap: wrap; padding: 6px; }
  .hero-search input[type="search"] {
    flex: 1 0 100%;
    padding: 12px 10px 8px;
    font-size: 16px;   /* iOS 확대 방지 — 16px 미만이면 포커스 때 화면이 확대된다 */
  }
  .hero-search button { padding: 9px 15px; font-size: 13px; }
  /* 첫 버튼을 오른쪽으로 밀면 뒤따르는 버튼도 함께 딸려 간다. */
  /* 아랫줄 버튼 묶음을 오른쪽으로 민다. 첫 버튼에 걸어야 뒤따르는 버튼도 딸려 간다 —
     순서가 바뀌면 이 선택자도 함께 바꿔야 한다. */
  .hero-search .btn-search { margin-left: auto; }
  .quicknav { gap: 6px; }
  .quicknav a { padding: 7px 12px; font-size: 12.5px; }
  .heat { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 3px; padding: 11px; }
  .heat a { min-height: 62px; padding: 8px 9px; }
  .legend { margin-left: 0; }
  .sect { margin-bottom: 26px; }
}

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

   JS 를 쓰지 않는다. button 이 탭하면 focus 를 받으므로 :focus 로 열고,
   다른 곳을 누르면 focus 가 빠지며 닫힌다 — 휴대폰에서도 그대로 동작한다. */
/* 말풍선은 버튼이 아니라 "콘텐츠 칸"에 매단다. 버튼 기준으로 띄우면 화면
   가장자리의 버튼에서 말풍선이 밖으로 삐져나가고, 그만큼 가로 스크롤이 생겨
   모바일에서 화면이 좌우로 흔들린다. 칸에 매달면 절대 칸을 넘지 않는다. */
.sect-head,
.card > h2,
.card > .ch { position: relative; }

.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(--accent); color: var(--accent); }
.help-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.help-body {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 40;
  width: auto;
  max-width: 460px;
  padding: 13px 15px;
  border-radius: 8px;
  background: #1f2433;
  color: #e6eaf3;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: 0;
  text-align: left;
  white-space: normal;
  box-shadow: 0 6px 20px rgba(15, 25, 50, .22);
  opacity: 0;
  visibility: hidden;
  transition: opacity .12s ease;
}
.help-btn:hover + .help-body,
.help-btn:focus + .help-body,
.help-body:hover { opacity: 1; visibility: visible; }



/* ---- 레버리지 포함 토글 ----
   정적 사이트라 두 벌을 모두 찍어두고 여기서 갈아 끼운다. 서버에 다시 묻지
   않으므로 즉시 바뀌고, JS 도 필요 없다. */
/* 알약 높이는 행간이 결정한다. 본문 행간(1.6)을 물려받으면 11px 글자에도
   상자가 25px 이 넘어 섹션 제목(20px)보다 커 보인다. line-height 를 1 로 고정한다. */
.toggle {
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-3);
  font-size: 11.5px;
  line-height: 1;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
.toggle:hover { border-color: var(--accent); color: var(--accent); }
.toggle::before {
  content: "";
  display: inline-block;
  width: 7px; height: 7px;
  margin-right: 6px;
  border-radius: 50%;
  border: 1px solid currentColor;
  vertical-align: 1px;
}
#levmv:checked ~ .sect-head .toggle,
#levflow:checked ~ .sect-head .toggle {
  background: var(--text);
  border-color: var(--text);
  color: #fff;
}
#levmv:checked ~ .sect-head .toggle::before,
#levflow:checked ~ .sect-head .toggle::before { background: currentColor; }
input[type="checkbox"]:focus-visible ~ .sect-head .toggle {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* 전체보기 — 토글과 같은 알약이지만 성격이 다르다(하나는 상태, 하나는 이동).
   화살표로 "여기서 벗어난다"를 표시해 구분한다. */
.sect-all {
  padding: 4px 10px;
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  color: var(--text-3);
  font-size: 11.5px;
  line-height: 1;
  font-weight: 600;
  white-space: nowrap;
}
.sect-all::after { content: " ›"; }
.sect-all:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }

.lev-on { display: none; }
#levmv:checked ~ .tabs .lev-off,
#levflow:checked ~ .duo .lev-off { display: none; }
#levmv:checked ~ .tabs .lev-on,
#levflow:checked ~ .duo .lev-on { display: block; }

/* ============================================================
   모바일 글자 크기 보정

   본문·표·목록 크기를 데스크톱 기준(11.5~13.5px)으로 잡아두면 폰에서 너무 작다.
   화면이 좁을수록 글자는 커져야 한다 — 보는 거리는 같은데 화면만 작기 때문이다.
   이 블록이 마지막에 와야 앞의 규칙들을 덮는다.
   ============================================================ */
@media (max-width: 640px) {
  body { font-size: 15.5px; }

  /* 섹션 제목·설명 */
  .sect-head h2 { font-size: 19px; }
  .sect-all { font-size: 12.5px; padding: 5px 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 > div { 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 h3 { font-size: 13px; padding: 13px 16px 8px; }
  .mv li,
  .lst li { font-size: 14.5px; padding: 9px 16px; }
  .mv li .p,
  .lst li .v { font-size: 14px; }
  .mv li .i,
  .lst li .i { font-size: 12px; width: 16px; }
  .lst li .s { font-size: 12.5px; width: 68px; }

  /* 순자산 표 */
  .home-tbl th, .home-tbl td { font-size: 14.5px; padding: 12px 14px; }
  .home-tbl thead th { font-size: 12.5px; }
  .home-tbl td.nm small { font-size: 12.5px; }
  .home-tbl td.rank { font-size: 13px; }

  /* 탭·토글은 손가락으로 누르는 것이라 넉넉히 */
  .tab { font-size: 13px; padding: 8px 14px; }
  .toggle { font-size: 12.5px; padding: 5px 12px; }

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

  /* 분류 칩 — 터치 대상이 최소 44px 높이가 되게 */
  .quicknav a { font-size: 13.5px; padding: 10px 14px; }

  /* 개발자 구역 */
  .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-head nav a { font-size: 14.5px; padding: 4px 0; }
  .site-head .brand { font-size: 18px; }

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

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

/* ---- 페이저 ----
   랭킹을 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(--accent); color: var(--accent); text-decoration: none; }
.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-4); }

@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; }
#thsort-count:checked ~ h2 label[for="thsort-count"],
#thsort-return:checked ~ h2 label[for="thsort-return"] {
  background: #eef1f6;
  color: var(--text);
  font-weight: 600;
}
input[name="thsort"]:focus-visible ~ h2 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); }
/* 홈·테마 표는 헤더가 sticky 가 아니다(.home-tbl thead th{position:static}) —
   그 경우에도 가로 고정은 살아 있어야 하므로 다시 sticky 로 되돌린다. */
.table-scroll thead th.pin { position: sticky; }

/* 붙어 있는 동안 경계가 보이게. 그림자가 없으면 어디까지가 고정 칸인지 모른다. */
.table-scroll td.pin::after,
.table-scroll th.pin::after {
  content: "";
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 6px;
  transform: translateX(100%);
  background: linear-gradient(90deg, rgba(20, 30, 60, .07), transparent);
  pointer-events: none;
}

/* ---- 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; } }

/* 답에 등장한 종목 — 바로 누를 수 있게 칩으로 한 번 더 준다. */
.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(--accent); color: var(--accent); text-decoration: none; }

/* 결과 표 — 넓으면 자기 안에서만 가로 스크롤한다(페이지는 흔들리지 않는다). */
.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-4); 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; }
}