/* **공용 버튼**(D-076, 2026-09-04) — 같은 타입의 버튼은 어느 화면·어느 파일이 만들든 여기
   변형 하나를 쓴다. 두 페이지(`index.html`·`stock.html`) 모두 `styles.css` 바로 뒤에 싣는다.

   ## 왜 한 파일인가 (사용자 요청 2026-09-03)
   «차트의 기간 선택 버튼이 다른 차트와 다르다» — 상세 화면의 기간 버튼(`detail.css` 의
   `.mo-btn`, 알약)·실적 막대의 지표 토글(`bars.css` 의 `.fb-btn`, 모서리 6px + 꽉 찬 파랑)·
   재무제표의 분기/연간(`financials.css`)·순위검색의 거래대금 칩(`rank.css`)이 **네 파일에
   네 벌**이었고, 순위검색 판의 기간 버튼은 같은 부품(`js/detail/months.js`)을 쓰면서도
   `index.html` 이 `detail.css` 를 안 실어 **아무 규칙도 없이** 떴다. 한 벌만 있으면 한쪽만
   고쳐진 날 두 화면이 갈리는 사고 자체가 없다.

   ## 변형 넷 — 이름이 곧 «무슨 타입인가»
   - `.btn-toggle`  골라 두는 알약. 켜짐은 `.is-on` **또는** `aria-pressed="true"` (모든 토글이
                    aria-pressed 를 쓰므로 둘 중 하나만 있어도 같은 모양이다). 기간(3개월…3년)·
                    지표(매출…EPS)·기간(연간/분기/TTM)·재무제표 분기/연간·거래대금 칩·저점 배수 프리셋
   - `.btn-action`  한 번 누르는 테두리 버튼. 이미지 복사·PNG 저장·HTML 복사·표시할 칸 고르기·
                    전체 선택/해제·드로어 닫기. `<summary>` 에도 붙는다(칸 고르기).
   - `.btn-more`    표 아래 «더보기/접기» 반투명 알약 — 그라데이션 컨테이너 `.btn-more-wrap` 과 한 쌍
   - `.btn-group`   토글이 서는 줄(flex·wrap·6px). 토글은 늘 이 안에 선다
   탭 바(`.tab-btn`, `tabs.css`)는 밑줄형이라 **여기 없다** — 같은 토큰(`--accent`·`--muted`·
   `--line`)만 나눠 쓴다. 오류색 «다시 시도»(`.retry-btn`)·표 머리 정렬(`.sort-btn`)·
   페이지 이동(`.pager-btn`)도 생김새가 아니라 뜻이 달라 제 파일에 남는다 — 허용 목록은
   `checks/buttons.checks.mjs`.

   ## 규칙
   - **색은 `styles.css` 토큰뿐이다.** 여기 16진수는 한 글자도 없다(검사가 막는다). 반투명 흰색
     둘만 아래 `:root` 에 이름을 붙였다 — 알파는 토큰으로 못 만들어서다.
   - **좁은 화면 규칙은 여기 없다**(`mobile.css` 규약). 480px 의 지표 토글 축소·600px 의 내보내기
     버튼 반투명은 `mobile-detail.css` 가 **컨테이너로 좁혀서**(`.fb-group .btn-toggle` 등) 얹는다.
   - **켜짐은 색만으로 말하지 않는다** — 테두리·굵기·`aria-pressed` 가 함께 바뀐다(흑백·색약).
   - 기준 모양은 상세 화면의 기간 버튼(옛 `.mo-btn`)이다 — 사용자가 «다르다»고 가리킨 그 버튼은
     한 픽셀도 안 움직이고 나머지가 그쪽으로 맞춰졌다. D-050(데스크톱 불변)은 이 요청으로
     실적 토글·거래대금 칩·닫기·프리셋에서 깬다(D-076 결과 참조). */

:root {
  /* 더보기 알약의 유리 바탕과 그 아래 표를 흐리는 그라데이션 — 옛 `holders.css`·`rank.css` 의
     같은 값이다. 흰 배경 전제라 `--bg` 에 알파를 못 얹어 따로 이름을 뒀다. */
  --btn-glass: rgba(255, 255, 255, 0.7);
  --btn-fade-from: rgba(255, 255, 255, 0);
  --btn-fade-to: rgba(255, 255, 255, 0.92);
}

/* ── 공통 밑바탕 ──────────────────────────────────────────────────────
   `font: inherit` 이 빠지면 브라우저 기본 버튼 글꼴(system-ui)이 끼어들어 옆 글씨와 어긋난다 —
   옛 «더보기»가 실제로 그랬다. 포커스 테두리는 셋이 같아야 키보드 방문자가 «지금 어디»를
   같은 모양으로 읽는다. */
.btn-toggle, .btn-action, .btn-more {
  font: inherit; color: var(--fg); cursor: pointer;
  border: 1px solid var(--line); background: var(--bg);
}
.btn-toggle:focus-visible, .btn-action:focus-visible, .btn-more:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}

/* ── 토글 줄 ──────────────────────────────────────────────────────── */
.btn-group { display: flex; flex-wrap: wrap; gap: 6px; }
/* 기간 버튼 줄(`js/detail/months.js`) — 상세·순위검색 **두 화면이 같은 부품**을 쓰므로 그 여백도
   여기다(`detail.css` 에 두면 순위검색 판에는 안 실린다). 결과가 아닐 때 숨기는 규칙은 상세
   화면 것이라 `detail.css` 에 남아 있다. */
.months { margin: 0 0 12px; }

/* ── .btn-toggle ─────────────────────────────────────────────────── */
.btn-toggle { padding: 6px 12px; border-radius: 999px; font-size: 13px; }
.btn-toggle:hover { background: var(--row-hover); }
.btn-toggle.is-on,
.btn-toggle[aria-pressed="true"] {
  border-color: var(--accent); background: var(--accent-weak);
  color: var(--accent); font-weight: 700;
}
/* 저점 배수 프리셋(`js/xlow.js`)은 필터가 꺼져 있으면 눌리지 않는다 — 숨기지 않고 흐린다
   (`controls.css` 의 일괄 버튼과 같은 이유: 있다는 것은 보여야 한다). */
.btn-toggle:disabled { cursor: default; opacity: .5; }

/* ── .btn-action ─────────────────────────────────────────────────── */
/* `display: inline-block`·`list-style: none` 은 `<summary>` 를 위한 것이다 — 기본 `list-item`
   이면 ▸ 표시가 붙고 줄을 통째로 차지한다(`filterbar.css` 의 `.fchip-head` 와 같은 처치). */
.btn-action {
  display: inline-block; padding: 4px 10px; border-radius: 6px; font-size: 12px;
  list-style: none;
}
.btn-action::-webkit-details-marker { display: none; }
.btn-action:hover { background: var(--row-hover); }
/* 눌러도 아무 일이 없을 때 — «전체 선택»이 이미 전부일 때. hover 보다 뒤에 둬 이긴다. */
.btn-action:disabled { cursor: default; opacity: .5; background: var(--bg); }

/* ── .btn-more + .btn-more-wrap ───────────────────────────────────── */
/* 컨테이너 — **CSS 로 표 높이를 자르지 않는다**(행은 JS 가 `hidden` 을 준다). 이 그라데이션은
   순전히 장식이라 접힌 표 바로 아래에 «더 있다»는 신호만 준다. 순위검색은 버튼 아래 상태
   문구(`.rank-more-status`)를 한 줄 더 세우므로 세로 flex 다 — 13F 는 자식이 하나라 같은 모양. */
.btn-more-wrap {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding-top: 14px; margin-top: -14px;
  background: linear-gradient(to bottom, var(--btn-fade-from), var(--btn-fade-to) 70%);
}
/* `display: flex` 가 브라우저 기본 `[hidden]{display:none}` 을 이긴다 — 짝을 직접 적는다
   (2026-08-08 에 같은 사고가 실제로 났다, `checks/wiring.checks.mjs`). */
.btn-more-wrap[hidden] { display: none; }
.btn-more {
  padding: 5px 14px; border-radius: 999px; background: var(--btn-glass);
  font-size: 12px; font-weight: 600;
}
.btn-more:hover { background: var(--head-bg); }
/* 다음 100행을 받는 동안(`js/rank/rankmore.js`) — 두 번 눌리지 않게 끄되 자리는 지킨다. */
.btn-more:disabled { cursor: default; opacity: .7; }