/* ══ 재질 3단 + 상태 카드 — 공용 정본 ══════════════════════════════════════════
   설계서: `dashboard/docs/design/20260908_stockhub_design_system.md` §1·§6.
   원문 근거: `dashboard/docs/design/apple-design_SKILL_emilkowalski.md` §12(재질·깊이).

   **재질은 세 단뿐이다.** 넷째를 만들면 「무엇이 위에 떠 있나」가 안 읽힌다.
     ① 툴바 `.matbar`  — 반투명, blur 20. 화면에 **하나**. 콘텐츠가 밑으로 지나간다.
     ② 카드  `.card`   — **불투명**. 표면일 뿐 떠 있지 않다(그림자 1단).
     ③ 알약  `.subtabs`/`.seg` — frosted 트랙 + **불투명 흰** 활성.
   §12 「never stack a light translucent surface on another」 — ①③ 은 겹치지 않고,
   활성 알약은 반투명이 아니다. ② 는 아예 반투명이 아니다.
   §12 「bigger surfaces read as thicker」 — blur 20(툴바) > 18(알약 트랙) > 0(카드).

   ⚠ 토큰은 여기서 선언하지 않는다 — `tokens.css`(허브는 자기 :root). 게이트 [7].
   ⚠ 간격·글자 크기의 **수**는 설계서 §2·§3 의 스케일이다. 여기 값은 그 스케일에서 왔다.
   ═════════════════════════════════════════════════════════════════════════════ */

/* ── ① 툴바 재질 ────────────────────────────────────────────────────────────
   하단 경계는 **1px 실선이 아니라 스크롤 엣지 페이드**이고, 콘텐츠가 실제로 겹칠
   때만 켠다(§12 「scroll edge effects, not hard dividers」).
   sticky·z-index·높이는 **문맥이 정한다** — 이 파일은 재질만 준다. */
.matbar {
  /* 🔴 09-09 — 여기 **리터럴 흰색**이 박혀 있었다. 다크에서 토큰은 검게 갔는데 이 밴드만
     밝게 남아 **헤더 회색 · 서브내비 검정 · 본문 밝은 회색**의 세 톤이 됐고 탭 글자가 안 읽혔다
     (CIO 스크린샷 실측). ⇒ 바탕은 **토큰에서 만든다** — 라이트/다크가 같이 따라온다. */
  background:color-mix(in srgb, var(--bg) 72%, transparent);
  backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7);
}
/* ⚠ content 는 **빈 문자열**이다 — 라벨·단위·값을 실으면 §3.3 위반이고 게이트 [5] 가
   잡는다. 순수 장식(그림자 대체)이다. */
.matbar::after {
  content:""; position:absolute; left:0; right:0; top:100%; height:14px;
  background:linear-gradient(180deg, color-mix(in srgb, var(--bg) 90%, transparent),
                                    color-mix(in srgb, var(--bg) 0%, transparent));
  opacity:0; transition:opacity .2s; pointer-events:none;
}
.matbar.sc::after { opacity:1; }

/* ── ② 카드 재질 ────────────────────────────────────────────────────────────
   **표면이지 부유물이 아니다.** 테두리 1px + 그림자 1단이고 **둘을 겹쳐 세게 쓰지
   않는다**(AI 티 회피 목록 §11-7). 밀도(padding·margin)는 화면이 정한다 — 재질이
   아니라 정보량의 문제라서, 여기서 고정하면 표 카드와 KPI 카드가 같은 여백을 쓴다. */
.card {
  background:var(--panel); border:1px solid var(--hair); border-radius:12px;
  box-shadow:0 1px 2px rgba(0,0,0,.03);
}
/* 눌러서 들어가는 카드만 뜬다. 안 눌리는 카드는 hover 에 반응하지 않는다 —
   §16-4 Familiarity: 같아 보이면 같게 동작해야 한다. */
.card.act { cursor:pointer; transition:transform .16s ease, box-shadow .16s ease, border-color .16s; }
.card.act:hover { transform:translateY(-2px); border-color:var(--hair2);
  box-shadow:0 2px 6px rgba(0,0,0,.05), 0 12px 28px rgba(0,0,0,.07); }
.card.act:active { transform:none; }   /* §1 — 피드백은 누르는 **순간**에 */

/* ── ③ 알약 재질 (하위탭·뷰 전환·세그먼트) ──────────────────────────────────
   출처: `modules/investor_flow/webapp/static/index.html`(정본 실측판) — CIO 09-07
   「반투명 버튼 디자인 디테일은 살려주고」. **값을 바꾸지 않았다.**
   `.subtabs`(앱·허브 하위) · `.dm-tabs`(허브 옛 이름) · `.seg`(허브 상위 6) 셋이
   **한 컴포넌트**다. 세 층이 세 얼굴이던 것이 CIO 09-07 지적의 본체다. */
.subtabs, .dm-tabs, .seg {
  display:inline-flex; gap:1px; padding:3px;
  /* 세그먼트 트랙 — 밴드 색을 쓰지 않는다(CIO 「밴드 색 없음」). 바탕보다 아주 조금만 뜬다. */
  background:color-mix(in srgb, var(--tint) 78%, transparent);
  border-radius:11px;
  backdrop-filter:saturate(180%) blur(18px);
  -webkit-backdrop-filter:saturate(180%) blur(18px);
  box-shadow:inset 0 0 0 .5px rgba(0,0,0,.05), 0 4px 18px rgba(0,0,0,.10);
}
.subtabs button, .dm-tabs button, .seg button {
  padding:6px 16px; font:600 13px var(--font);
  color:var(--ink2); border:0; background:transparent; cursor:pointer;
  border-radius:8.5px; white-space:nowrap; letter-spacing:0;
  transition:color .16s, background .16s, box-shadow .16s;
}
.subtabs button.on, .dm-tabs button.on,
.subtabs button[aria-selected="true"], .dm-tabs button[aria-selected="true"] {
  background:var(--panel); color:var(--ink);
  box-shadow:0 .5px 2px rgba(0,0,0,.14), 0 2px 8px rgba(0,0,0,.08);
}
.subtabs button:hover:not(.on), .dm-tabs button:hover:not(.on), .seg button:hover { color:var(--ink); }
.subtabs button:active, .dm-tabs button:active, .seg button:active { transform:scale(.985); }

/* 세그먼트 — 활성 알약이 **떠 있는 요소 하나**(`.seg-ind`)이고 스프링이 몬다(tabs.js).
   ⚠ transition 을 **일부러 안 건다** — CSS 전이는 중단·역전이 안 된다(§3). */
.seg { position:relative; }
.seg button { position:relative; z-index:1; transition:color .16s; }
.seg button[aria-selected="true"] { color:var(--ink); }
.seg-ind {
  position:absolute; top:3px; bottom:3px; left:0; width:0;
  background:var(--panel); border-radius:8.5px; pointer-events:none;
  box-shadow:0 .5px 2px rgba(0,0,0,.14), 0 2px 8px rgba(0,0,0,.08);
}
/* 툴바 **안**의 트랙은 깊은 그림자를 뺀다 — 떠 있는 줄이 아니라 chrome 안의 컨트롤이다.
   큰 면(툴바)이 두껍고 작은 면(트랙)이 얇다는 위계를 지킨다(§12). */
.matbar .subtabs, .matbar .seg { box-shadow:inset 0 0 0 .5px rgba(0,0,0,.06); }
/* 알약 줄의 **배치**(재질이 아니라 자리). 스티키 top 은 렌더 문맥이 정한다:
   허브 셸이 직접 그리는 화면은 헤더 아래(6px), iframe 안 앱은 10px. */
.subrow { display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  margin:16px auto; position:sticky; top:6px; z-index:45; }
/* 넘칠 때 — 가로 스크롤은 되지만 「더 있다」는 신호가 없었다(폰 실측). */
.subtabs.ovf, .seg.ovf { max-width:100%; overflow-x:auto; overflow-y:clip; scrollbar-width:none; }
.subtabs.ovf::-webkit-scrollbar, .seg.ovf::-webkit-scrollbar { display:none; }

/* ── 상태 카드 3종 — 빈 / 낡음 / 오류 ───────────────────────────────────────
   설계서 §6. **침묵 금지**: 값이 없는 자리는 비워 두지 않고 왜 없는지 말한다.
   ⚠ 클래스 이름을 바꾸지 마라 — `check_screen_render.py`·`check_regroup.py` 가
   `class="degwarn"` / `class="degwarn wait"` 를 **요소로** 재고 있다(미끼 기준).
     · `.degwarn wait` = **빈**   — 아직 안 왔다/놓을 것이 없다 (무채, 중립)
     · `.upwarn`       = **낡음** — 원천이 멈췄다/기준일이 뒤처졌다 (amber)
     · `.degwarn`      = **오류** — 우리가 못 걷었다 (red)
   세 얼굴이 갈려야 한다. 한 칸에 몰면 둘 다 빨강이라 아무도 안 본다. */
.degwarn { margin:10px 0 4px; padding:9px 12px; font-size:12px; line-height:1.55;
  border-radius:6px; background:var(--red-bg); border-left:3px solid var(--red); }
.degwarn.wait { background:var(--tint); border-left-color:var(--ink4); }
.degwarn > b:first-child { color:var(--red); }
.degwarn.wait > b:first-child { color:var(--ink2); }
.degwarn .why { color:var(--ink2); }
.upwarn { margin:10px 0 4px; padding:9px 12px; font-size:12px; line-height:1.55;
  color:var(--ink); background:var(--amb-bg); border-left:3px solid var(--amb); border-radius:6px; }
.upwarn > b:first-child { color:var(--amb); }
.upwarn ul { margin:4px 0; padding-left:17px; }
.upwarn li { margin:3px 0; }
/* 상태 카드 안의 다음 걸음 — 「집은 다른 곳」·「여기서 보기」 */
.degwarn .lnk, .upwarn .lnk { font:700 11.5px var(--font); padding:3px 9px; border-radius:8px;
  border:1px solid var(--hair2); background:var(--panel); color:var(--ink2); cursor:pointer; margin-top:4px;
  transition:background .15s, color .15s; }
.degwarn .lnk:hover, .upwarn .lnk:hover { background:var(--ink); color:var(--bg); border-color:var(--ink); }

/* ── 접근성 3신호 (§14) — 축소 모션 / 축소 투명 / 고대비 ────────────────────
   축소 모션은 **피드백을 없애는 게 아니라** 전정계 자극을 없애는 것이다.
   ⚠ 블러는 **유지한다** — 재질은 모션이 아니다. */
@media (prefers-reduced-motion: reduce) {
  .subtabs button, .dm-tabs button, .seg button, .card.act { transition:none; }
  .subtabs button:active, .dm-tabs button:active, .seg button:active { transform:none; }
  .card.act:hover { transform:none; }
  .matbar::after { transition:none; }
}
@media (prefers-reduced-transparency: reduce) {
  .matbar { background:var(--bg); backdrop-filter:none; -webkit-backdrop-filter:none; }
  .subtabs, .dm-tabs, .seg { background:#ececed; backdrop-filter:none; -webkit-backdrop-filter:none; }
}
@media (prefers-contrast: more) {
  .matbar { background:var(--panel); box-shadow:inset 0 -1px 0 var(--ink3); }
  .subtabs, .dm-tabs, .seg { box-shadow:inset 0 0 0 1px var(--ink3); }
  .card { border-color:var(--ink4); }
}

/* ── 중단점은 680 / 430 둘뿐 (§3.1) — 새 값을 만들지 않는다 ─────────────── */
@media (max-width: 680px) {
  .subrow { top:4px; margin:12px auto; }
  .subtabs, .dm-tabs, .seg { overflow-x:auto; overflow-y:clip; max-width:100%; scrollbar-width:none; }
  .subtabs::-webkit-scrollbar, .dm-tabs::-webkit-scrollbar, .seg::-webkit-scrollbar { display:none; }
  .subtabs button, .dm-tabs button, .seg button { padding:6px 12px; font-size:12px; }
}