/* ══ 세그먼트 알약(3단 선택) — 공용 정본 (2026-09-12, CIO 「선택하는건 세번째 레벨만 할거고」) ══
   iOS 세그먼트 컨트롤 꼴: 둥근 트랙 안에서 **선택된 칸만 흰 알약 + 옅은 그림자**.
   ⚠ 이 파일은 토큰(`--`)을 **선언하지 않는다** — 값은 `tokens.css` 정본에서 온다.
   ⚠ 알약은 **3단에만** 쓴다. 1단(A~E)은 상단 바 텍스트 링크, 2단은 서브 바 밑줄이다.
     세 단이 다 알약이면 어느 단을 고르는 중인지 화면이 못 말한다. */
.seg { display:flex; gap:2px; padding:2px; border-radius:9px; background:rgba(0,0,0,.05);
  overflow-x:auto; overflow-y:clip; -webkit-overflow-scrolling:touch; scrollbar-width:none; max-width:100%; }
.seg::-webkit-scrollbar { display:none; }
.seg > a, .seg > button { flex:0 0 auto; appearance:none; border:0; background:transparent;
  font:inherit; font-size:13px; font-weight:500; color:var(--ink2); padding:6px 14px;
  border-radius:7px; cursor:pointer; white-space:nowrap; text-decoration:none;
  transition:color .15s ease, background-color .15s ease, box-shadow .15s ease; }
.seg > a:hover, .seg > button:hover { color:var(--ink); text-decoration:none; }
.seg > .on, .seg > .on:hover { background:#ffffff; color:var(--ink);
  box-shadow:0 1px 3px rgba(0,0,0,.12), 0 0 0 .5px rgba(0,0,0,.04); font-weight:600; }
/* 미구축 잎 — 알약은 뜨되 흐리고, 왜 비었는지는 본문 카드가 말한다(라벨에 표시 안 한다). */
.seg > .todo { color:var(--ink4); }
.segwrap { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin:18px 0 14px; }
.segwrap .segnote { color:var(--ink3); font-size:12px; }
:root[data-theme="dark"] .seg { background:rgba(255,255,255,.08); }
:root[data-theme="dark"] .seg > .on, :root[data-theme="dark"] .seg > .on:hover {
  background:#3a3a3c; color:#f5f5f7; box-shadow:0 1px 3px rgba(0,0,0,.5); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .seg { background:rgba(255,255,255,.08); }
  :root:not([data-theme="light"]) .seg > .on,
  :root:not([data-theme="light"]) .seg > .on:hover {
    background:#3a3a3c; color:#f5f5f7; box-shadow:0 1px 3px rgba(0,0,0,.5); }
}
@media (max-width:680px) { .seg > a, .seg > button { padding:6px 11px; font-size:12px; } }

/* ══ 밑줄 탭 폐지 — 전환은 세그먼트 토글 하나로 (CIO 2026-09-13 23:5x 「걍 토글을 써」) ══
   낱장 6장이 자기 `<style>` 안에 `.tabs{border-bottom:1px solid}` +
   `.tabs button[aria-selected=true]{border-bottom-color:var(--ink)}` 로 **밑줄 탭**을
   따로 그리고 있었다(buyback_calendar 7개·gapmap·ficc_board·etf_flows·per_band·허브).
   같은 일을 두 벌의 모양으로 하면 화면마다 「고르는 것」이 달라 보인다.
   ⇒ `page_head.js` 의 `sweepLegacy()` 가 그 바에 `.seg` 를 더하고 `data-ph-seg` 도장을
     찍는다. 여기서는 **페이지가 그린 밑줄만 지운다** — 페이지 `<style>` 이 나중에 링크돼
     특이도로는 못 이기므로 `!important` 다(이 자리가 그것을 쓰는 유일한 이유).
   ⚠ 상태·핸들러는 안 건드린다. 페이지는 계속 `aria-selected` 를 치고, 쓸기는 그것을
     `.on` 으로 비추기만 한다 — 「바꿔 끼웠다」가 아니라 「같은 옷을 입혔다」.
   ⚠ 좁은 화면(390)에서는 위 `.seg` 의 `overflow-x:auto; overflow-y:clip` 이 그대로 받는다
     — 7개짜리 바가 줄바꿈 대신 **가로로 스크롤**된다(CIO 09-13 23:5x). */
.seg[data-ph-seg] { border-bottom:0 !important; }
.seg[data-ph-seg] > button, .seg[data-ph-seg] > a { border-bottom:0 !important; }
.seg[data-ph-seg] > button[aria-selected="true"], .seg[data-ph-seg] > a[aria-selected="true"] {
  border-bottom:0 !important; }