/* 상세 화면의 탭 바(D-063) — 밑줄형, 활성 굵게. 판(`.pane`)을 숨기고 보이는 규칙도
   여기 산다. **좁은 화면 규칙은 없다** — 그건 `mobile-detail.css` 의 480/600 규칙
   자리다(`mobile.css` 규약, 이 파일에 미디어 쿼리를 두면 검사가 막는다). */

.tabs {
  display: flex; gap: 4px; margin: 0 0 12px; 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(--muted); font: inherit; font-size: 14px;
  font-weight: 600; cursor: pointer; white-space: nowrap;
}
.tab-btn:hover { color: var(--fg); }
/* 고른 값은 색이 아니라 **색 + 굵기 + border** 로 말한다(`buttons.css` 의 `.btn-toggle.is-on` 과 같은
   이유 — 색만으로 표시하면 흑백 화면·색약에서 활성 탭이 사라진다). */
.tab-btn[aria-selected="true"] {
  color: var(--accent); border-bottom-color: var(--accent); font-weight: 700;
}

/* 활성 판만 보인다 — 나머지는 `hidden` 속성(`tabs/index.js`). `.pane` 자체는 `display`
   를 안 정하므로 브라우저 기본 `[hidden]{display:none}` 으로 충분하지만, 이 저장소의
   다른 `[hidden]` 자리(`detail.css` 의 `.back-link[hidden]` 등)와 같은 모양으로 명시해
   둔다 — 나중에 `.pane` 에 `display` 를 얹는 사람이 이 규칙까지 함께 보게 하기 위해서다. */
.pane[hidden] { display: none; }