/* 페이지 탭 바(D-029) — 밑줄형, 활성 굵게. 판(`.pane`)을 숨기고 보이는 규칙도 여기 산다.
   **좁은 화면 규칙은 없다** — 그건 `mobile-*.css` 의 등록된 폭 자리다(`mobile.css` 규약,
   이 파일에 미디어 쿼리를 두면 `tests/test_mobile_css.py` 가 막는다). */

.tabs {
  display: flex; gap: 4px; margin: 0 0 14px; border-bottom: 1px solid var(--line);
  overflow-x: auto;   /* 좁아도 페이지가 가로로 늘지 않는다 — 탭 바 안에서만 스크롤 */
}
.tab-btn {
  padding: 8px 14px; border: none; border-bottom: 2px solid transparent;
  background: none; color: var(--ink-soft); font: inherit; font-size: 14px;
  font-weight: 600; cursor: pointer; white-space: nowrap;
}
.tab-btn:hover { color: var(--ink); }
/* 고른 값은 색이 아니라 **색 + 굵기 + border** 로 말한다 — 색만으로 표시하면 흑백 화면·
   색약에서 활성 탭이 사라진다. */
.tab-btn[aria-selected="true"] {
  color: var(--accent); border-bottom-color: var(--accent); font-weight: 700;
}

/* 활성 판만 보인다 — 나머지는 `hidden` 속성(`js/tabs.js`). 이 화면은 iframe 스냅샷이 아니라
   실제 브라우저 기본 `[hidden]{display:none}` 으로도 충분하지만, 이 저장소의 다른 `[hidden]`
   자리와 같은 모양으로 명시해 둔다 — 나중에 `.pane` 에 `display` 를 얹는 사람이 이 규칙까지
   함께 보게 하기 위해서다. */
.pane[hidden] { display: none; }

/* **깜빡임 방지**(D-029, `web/pagetab.js` 머리말). `?tab=rank` 로 들어오면 그 스크립트가
   페인트 «전»에 `<html data-tab="rank">` 를 찍는다 — 모듈 스크립트(`js/pagetabs.js`)가
   `hidden` 을 뒤집기 전에 이미 CSS 만으로 맞는 판이 보이게 하려는 것이다.

   ⚠️ **두 번째 줄의 우선순위가 `.pane[hidden]`(위)을 반드시 이겨야 한다** — 순위검색
   판은 정적 마크업에서 여전히 `hidden` 이 붙어 있는 채로(모듈이 아직 그걸 못 지웠다)
   보여야 하기 때문이다. 아래 선택자가 특정도(0,4,1)로 `.pane[hidden]`(0,2,0)보다 높아
   `!important` 없이 이긴다 — 값을 바꿀 때 이 관계를 깨지 않는다. */
html[data-tab="rank"] .pane[data-tab="screener"] { display: none; }
html[data-tab="rank"] .pane[data-tab="rank"][hidden] { display: block; }

/* **설명문(lede)도 탭마다 다르다**(D-032). 둘 다 `index.html` 에 이미 있다(`data-lede`
   속성만 다르다, 마크업은 안 건드렸다) — 판과 같은 특정도 요령(0,4,1)으로 뒤집는다. */
html[data-tab="rank"] .lede[data-lede="screener"] { display: none; }
html[data-tab="rank"] .lede[data-lede="rank"][hidden] { display: block; }

/* 오실레이터 탭(D-185) — 위 두 쌍과 같은 요령. */
html[data-tab="osc"] .pane[data-tab="screener"] { display: none; }
html[data-tab="osc"] .pane[data-tab="osc"][hidden] { display: block; }
html[data-tab="osc"] .lede[data-lede="screener"] { display: none; }
html[data-tab="osc"] .lede[data-lede="osc"][hidden] { display: block; }

/* 컨센상향 탭(2026-10-02) — 같은 요령. */
html[data-tab="cons"] .pane[data-tab="screener"] { display: none; }
html[data-tab="cons"] .pane[data-tab="cons"][hidden] { display: block; }
html[data-tab="cons"] .lede[data-lede="screener"] { display: none; }
html[data-tab="cons"] .lede[data-lede="cons"][hidden] { display: block; }

/* High Tight Flag 패턴 탭(2026-10-12) — 같은 요령. */
html[data-tab="htf"] .pane[data-tab="screener"] { display: none; }
html[data-tab="htf"] .pane[data-tab="htf"][hidden] { display: block; }
html[data-tab="htf"] .lede[data-lede="screener"] { display: none; }
html[data-tab="htf"] .lede[data-lede="htf"][hidden] { display: block; }