/* 생성물 — 직접 고치지 마십시오. 정본: vc-dashboard/src/report/standalone_dashboard.py
   재생성: py -3.13 vc-dashboard/scripts/build_theme_bundle.py
   정본 지문(sha256): 7d03b3c081726d79496f8a217beb1d4206c6e0cacd35faa993f45878f95c163a */

/* ★기본값이 **블루**다(2026-08-04). 예전에는 퍼플이 기본이고 블루가 덮어쓰기였는데,
   Streamlit(딜 레이더)은 테마 속성을 iframe 안 스크립트가 **늦게** 붙인다. 그 사이 레일이
   기본색(퍼플)으로 한 번 그려졌다가 블루로 바뀌어, 앱을 오갈 때 레일이 깜빡였다.
   지금 쓰는 테마를 기본값으로 두면 첫 그림부터 맞는 색이라 깜빡임이 사라진다.
   ※ 퍼플로 바꿔 쓰면 반대 방향 깜빡임이 레이더에서만 생긴다 — 그때는 이 두 블록을 되바꾼다. */
/* ★기본 블록은 `base + blue` 를 **겹쳐** 넣는다. 블루 토큰 묶음은 '퍼플과 다른 키'만 갖고 있어서
   그것만 넣으면 퍼플에만 있던 키(예: --sx-text)가 통째로 사라진다. 실제로 그렇게 했다가
   앱마다 글자색이 갈렸다(투심·미팅 #e6ebf2 vs 레이더 #eef1fa). 겹쳐 넣으면 값은 블루이면서
   키는 하나도 안 빠진다. */
/* ★본문 글꼴을 **여기서** 싣는다(2026-09-02 사용자 결정 "네 앱 다 같은 폰트로").
   그전에는 앱마다 제각각이었다 — 미팅만 @font-face 로 Pretendard 를 싣고, 투심·프레젠테이션·
   레이더는 이름만 선언해 놓고 파일이 없어 맑은 고딕으로 떨어졌다. 그래서 **플랫폼 공용 레일**의
   브랜드 글자까지 앱마다 다른 글꼴로 그려졌다(실측 2026-09-02 — `.vcp-brand` 요소 클립 캡처
   픽셀 대조에서 보석 마크 차이 0, 글자 영역만 806픽셀).
   ★글꼴을 개별 앱이 아니라 **이 생성물**이 싣는 이유는 레일과 같다 — 한 곳에서 정하고 네 곳에
     배포해야 다시 갈리지 않는다. 앱이 각자 @font-face 를 적으면 그 순간 다시 네 벌이 된다.
   ★파일은 실사 **상세 리포트**가 임베드하는 것과 **같은 서브셋**이다(`-sub.woff2`,
     `src/report/fonts/`). 상세와 앱의 글자 모양을 맞추는 것이 이 변경의 목적이므로 다른 파일을
     쓰면 안 된다. 서브셋 범위(KS X 1001 완성형 2350자 + ASCII + 대시보드 특수문자) 밖의 드문
     음절은 대체 글꼴로 떨어진다 — 상세 리포트가 이미 받아들인 대가와 같다.
   ★전체 OTF(1.5MB×3)가 아니라 서브셋(약 180KB×3)이다. 레일 글자 하나 때문에 모든 화면이
     4.7MB 를 받게 할 수는 없다. */
@font-face{font-family:"Pretendard";font-style:normal;font-weight:400;font-display:block;src:url("fonts/Pretendard-Regular-sub.woff2") format("woff2")}
@font-face{font-family:"Pretendard";font-style:normal;font-weight:600;font-display:block;src:url("fonts/Pretendard-SemiBold-sub.woff2") format("woff2")}
@font-face{font-family:"Pretendard";font-style:normal;font-weight:700;font-display:block;src:url("fonts/Pretendard-Bold-sub.woff2") format("woff2")}

:root {
  --sx-acc: rgba(155,135,255,1);
  --sx-acc-g: linear-gradient(135deg,rgba(178,150,255,1),rgba(103,79,235,1));
  --sx-acc-hover: linear-gradient(135deg,rgba(194,168,255,1),rgba(122,98,245,1));
  --sx-accent: #6d6bff;
  --sx-accent-border: #3f3f80;
  --sx-accent-deep: #33339c;
  --sx-accent-hover: #7f7dff;
  --sx-accent-lite: #adb2ff;
  --sx-accent-mid: #7d7cff;
  --sx-accent-soft-fg: #b6baff;
  --sx-border: #242a3d;
  --sx-brand: linear-gradient(135deg,rgba(184,156,255,1),rgba(96,74,228,1));
  --sx-ease: cubic-bezier(.22,.61,.36,1);
  --sx-ease-out: cubic-bezier(.16,1,.3,1);
  --sx-faint: #6b7692;
  --sx-glass: rgba(12,15,26,.72);
  --sx-glow1: rgba(109,107,255,.13);
  --sx-glow2: rgba(167,139,250,.10);
  --sx-glow3: rgba(60,224,166,.06);
  --sx-hair: rgba(150,160,255,.10);
  --sx-hi: rgba(255,255,255,.05);
  --sx-kv2: #cfd2ff;
  --sx-muted: #9aa6c2;
  --sx-neb1: rgba(146,116,255,.36);
  --sx-neb2: rgba(96,84,255,.22);
  --sx-neb3: rgba(84,68,190,.20);
  --sx-signal: #7c8cff;
  --sx-signal2: #a78bfa;
  --sx-space-bot: #0a0918;
  --sx-space-mid: #0d0a1e;
  --sx-space-top: #0b0820;
  --sx-spot: rgba(124,140,255,.10);
  --sx-star1: 255,255,255;
  --sx-star2: 168,181,255;
  --sx-star3: 117,107,255;
  --sx-surface: #10131f;
  --sx-text: #eef1fa;
  --sx-vign: rgba(3,2,10,.52);
  --sx-acc: rgba(123,162,255,1);
  --sx-acc-g: linear-gradient(135deg,rgba(122,170,255,1),rgba(46,107,245,1));
  --sx-acc-hover: linear-gradient(135deg,rgba(150,190,255,1),rgba(66,125,250,1));
  --sx-accent: #4d82ff;
  --sx-accent-border: #33528f;
  --sx-accent-deep: #1f3f9c;
  --sx-accent-hover: #5f8dff;
  --sx-accent-lite: #a7c4ff;
  --sx-accent-mid: #5b8dff;
  --sx-accent-soft-fg: #b0caff;
  --sx-brand: linear-gradient(135deg,rgba(130,175,255,1),rgba(40,95,225,1));
  --sx-glass: rgba(10,16,28,.72);
  --sx-glow1: rgba(80,130,255,.13);
  --sx-glow2: rgba(64,116,255,.10);
  --sx-glow3: rgba(60,180,224,.06);
  --sx-hair: rgba(120,160,255,.10);
  --sx-kv2: #c7dbff;
  --sx-neb1: rgba(86,140,255,.34);
  --sx-neb2: rgba(64,116,255,.20);
  --sx-neb3: rgba(48,92,210,.18);
  --sx-signal: #5b9dff;
  --sx-signal2: #4f86f7;
  --sx-space-bot: #071020;
  --sx-space-mid: #091428;
  --sx-space-top: #071022;
  --sx-spot: rgba(91,157,255,.10);
  --sx-star1: 255,255,255;
  --sx-star2: 168,200,255;
  --sx-star3: 96,150,255;
  --sx-vign: rgba(2,6,16,.54);
}

/* 퍼플 토글 — 세 앱의 토글 속성명이 달라 둘 다 받는다(dashboard=data-space, copilot=data-accent). */
:root[data-space="purple"],
:root[data-accent="purple"] {
  --sx-acc: rgba(155,135,255,1);
  --sx-acc-g: linear-gradient(135deg,rgba(178,150,255,1),rgba(103,79,235,1));
  --sx-acc-hover: linear-gradient(135deg,rgba(194,168,255,1),rgba(122,98,245,1));
  --sx-accent: #6d6bff;
  --sx-accent-border: #3f3f80;
  --sx-accent-deep: #33339c;
  --sx-accent-hover: #7f7dff;
  --sx-accent-lite: #adb2ff;
  --sx-accent-mid: #7d7cff;
  --sx-accent-soft-fg: #b6baff;
  --sx-border: #242a3d;
  --sx-brand: linear-gradient(135deg,rgba(184,156,255,1),rgba(96,74,228,1));
  --sx-ease: cubic-bezier(.22,.61,.36,1);
  --sx-ease-out: cubic-bezier(.16,1,.3,1);
  --sx-faint: #6b7692;
  --sx-glass: rgba(12,15,26,.72);
  --sx-glow1: rgba(109,107,255,.13);
  --sx-glow2: rgba(167,139,250,.10);
  --sx-glow3: rgba(60,224,166,.06);
  --sx-hair: rgba(150,160,255,.10);
  --sx-hi: rgba(255,255,255,.05);
  --sx-kv2: #cfd2ff;
  --sx-muted: #9aa6c2;
  --sx-neb1: rgba(146,116,255,.36);
  --sx-neb2: rgba(96,84,255,.22);
  --sx-neb3: rgba(84,68,190,.20);
  --sx-signal: #7c8cff;
  --sx-signal2: #a78bfa;
  --sx-space-bot: #0a0918;
  --sx-space-mid: #0d0a1e;
  --sx-space-top: #0b0820;
  --sx-spot: rgba(124,140,255,.10);
  --sx-star1: 255,255,255;
  --sx-star2: 168,181,255;
  --sx-star3: 117,107,255;
  --sx-surface: #10131f;
  --sx-text: #eef1fa;
  --sx-vign: rgba(3,2,10,.52);
}

/* ── 앱 사이 이동을 부드럽게 ────────────────────────────────────────────────
   ★메뉴를 누르면 **페이지 전체가 다시 로드**된다(세 앱이 각자 다른 서버다). 그래서 화면이
     한 번 비었다가 다시 그려지고, 그것이 깜빡임으로 보인다. 두 겹으로 줄인다.

   (1) 첫 바이트부터 어두운 배경 — 새 문서는 기본이 **흰색**이라, 스타일이 붙기 전 한 프레임이
       하얗게 번쩍인다. 어두운 화면에서 이게 가장 눈에 띈다. html 배경을 미리 깔아 없앤다.
   (2) 문서 간 화면 전환(View Transitions) — 같은 출처일 때만 동작한다. 세 앱은 리버스
       프록시(:8080) 뒤에서 같은 출처라 성립한다(컴포넌트 포트로 직접 들어오면 그냥 무시된다).
       레일에 이름을 붙여 **레일만은 이어진 것처럼** 두고 본문만 교차 페이드시킨다.
   ※ 미지원 브라우저는 이 두 규칙을 통째로 무시한다 — 예전과 같은 동작으로 되돌아갈 뿐이다. */
html { background-color: var(--sx-space-bot, #0a0e17); }

/* ── 성운 배경(세 앱 공통) ────────────────────────────────────────────────
   ★정본은 standalone_dashboard.studio_nebula_css 다 — 투심 상세 화면과 같은 하늘을 쓴다.
     예전에는 세 앱이 각자 손으로 베낀 그라데이션을 갖고 있어 앱을 넘어갈 때 배경이 갈렸다
     (2026-08-05 사용자 지적). 여기서 한 번 내보내고 각 앱의 손복사는 지운다.
   ★색은 전부 토큰(--sx-neb*·--sx-space-*)이라 테마를 바꾸면 배경도 함께 따라간다.
   ★배경만 공용이고 **내용 영역(카드·패널)은 각 앱이 자기 것을 쓴다** — 하늘은 같고 그 위에
     놓이는 것은 앱마다 다르다는 것이 이 플랫폼의 시각 규칙이다. */
body{background-color:var(--sx-space-bot);background-image:radial-gradient(ellipse 70% 55% at 62% 8%,var(--sx-neb1),transparent 55%),radial-gradient(ellipse 55% 50% at 18% 50%,var(--sx-neb2),transparent 50%),radial-gradient(ellipse 60% 55% at 88% 82%,var(--sx-neb3),transparent 52%),radial-gradient(ellipse at 50% 42%,transparent 52%,var(--sx-vign) 100%),linear-gradient(180deg,var(--sx-space-top) 0%,var(--sx-space-mid) 42%,var(--sx-space-bot) 100%);background-attachment:fixed;background-repeat:no-repeat}
@view-transition { navigation: auto; }
.vcp-appbar { view-transition-name: vcp-rail; }
/* 레일은 페이지가 바뀌어도 그 자리에 있어야 한다 — 페이드 대상에서 뺀다. */
::view-transition-old(vcp-rail),
::view-transition-new(vcp-rail) { animation: none; mix-blend-mode: normal; }
::view-transition-old(root) { animation-duration: .12s; }
::view-transition-new(root) { animation-duration: .16s; }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}

/* ── 공용 앱 레일(세로 고정 앱 스위처) ─────────────────────────────────
   일체감의 실제 원천(D2). 리버스 프록시는 주소만 통일할 뿐 화면을 통일하지 못한다.

   ★가로 상단바가 아니라 **세로 레일**인 이유 —
     (1) 세 앱의 왼쪽 창은 성격이 서로 다르다(대시보드=업무 흐름 네비, 딜 레이더=필터,
         코파일럿=미팅 목록). 하나로 합칠 수 없으므로 **바깥에 한 겹 더** 두어야 한다.
         레일(플랫폼) → 앱별 사이드바(그 앱) → 본문 의 3단이 정답이다.
     (2) 레일은 화면 왼쪽 끝에 붙어 세 앱에서 정확히 같은 자리를 차지한다. 앱을 넘어가도
         눈에는 안쪽만 바뀐다.
     (3) 가로 바는 모든 화면에서 세로 공간 46px 을 영구히 먹는다. 세로 공간이 가로보다 귀하다.

   ★마크업 계약(세 앱 공통):
       .vcp-appbar > .vcp-brand > .vcp-logo
                   > .vcp-appname + .vcp-appver        (앱 이름·버전 — 앱마다 다른 값)
                   > nav.vcp-apps > .vcp-grp > .n      (단계 제목: 1발굴 … 5보고서 · 설정)
                                  > a.vcp-app[.on] > .vcp-ico + .vcp-lab + .vcp-out
                   > .vcp-right
                   > .vcp-acct > .pfp + .who > .nm + .em
     클래스명을 바꾸면 세 앱을 동시에 고쳐야 한다. 각 앱은 본문에 `padding-left: 188px` 만
     주면 된다(레일이 fixed 라 문서 흐름에서 빠지므로 자리를 직접 비워줘야 한다).

   ★레일이 56px → 188px 로 넓어진 이유(2026-08-04) — 예전에는 왼쪽에 창이 두 겹이었다.
     바깥은 앱 스위처(레일), 안쪽은 각 앱의 업무 흐름 메뉴였는데 둘 다 같은 성격이라
     "프로그램이 두 개"처럼 보였다. 심사 5단계 흐름을 레일로 끌어올려 한 겹으로 합쳤다. */
.vcp-appbar {
  position: fixed; top: 0; left: 0; bottom: 0; z-index: 900;
  width: 188px; padding: 12px 10px 10px;
  display: flex; flex-direction: column; align-items: stretch; gap: 6px;
  background: var(--sx-glass);
  border-right: 1px solid var(--sx-hair);
  box-shadow: inset -1px 0 0 var(--sx-hi);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  font-family: "Pretendard", "Inter", "Malgun Gothic", system-ui, sans-serif;
  font-size: 13px;
}
.vcp-appbar .vcp-brand {
  display: flex; flex-direction: row; align-items: center; gap: 9px; min-width: 0;
  font-size: 0; /* "VC Platform" 글자는 앱 이름과 겹친다 — 로고만 남긴다. */
}
/* ★앱 이름은 로고와 **같은 줄**이다(2026-08-04). 아래로 내리면 레일 위쪽이 두 줄을 먹고,
   로고와 이름이 따로 노는 덩어리로 보인다. .vcp-brand 의 font-size:0 을 여기서 되살린다. */
.vcp-appbar .vcp-brand .vcp-appname { font-size: 15.5px; }
/* ★브랜드가 링크다(2026-08-28) — 누르면 Deals 로 간다. 어느 앱에 있든 왼쪽 위 로고가 홈으로
   돌아가는 자리라는 것이 SaaS 공통 규약이고, 이 플랫폼의 홈은 Deals 다. 링크가 되어도 배치는
   그대로여야 하므로 밑줄·색 상속만 끊고, 눌리는 곳임은 호버 반응으로 알린다. */
/* ★밑줄 끄기를 **모든 링크 상태에** 건다(2026-08-30). 예전에는 기본 상태에만 걸어서, 각 앱이
     자기 CSS 에 `a:hover { text-decoration: underline }` 을 갖고 있으면 마우스를 올릴 때
     브랜드에 밑줄이 그어졌다(같은 특정도에서 나중 규칙이 이긴다). 밑줄은 `text-decoration` 이
     조상에서 자손으로 **전파**되므로 안쪽 span 에서 되돌릴 수도 없다 — 링크 쪽에서 끊어야 한다. */
.vcp-appbar a.vcp-brand,
.vcp-appbar a.vcp-brand:link,
.vcp-appbar a.vcp-brand:visited,
.vcp-appbar a.vcp-brand:hover,
.vcp-appbar a.vcp-brand:focus,
.vcp-appbar a.vcp-brand:active { text-decoration: none; color: inherit; border-radius: 11px; }
.vcp-appbar a.vcp-brand:focus-visible { outline: 2px solid var(--sx-accent); outline-offset: 3px; }
.vcp-appbar .vcp-logo {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 34px; height: 34px;
  /* ★배지 타일을 걷어냈다(2026-08-30, 블랙모드). 예전에는 파란 그라데이션 사각형을 깔고 그 안에
     흰 마크를 얹었는데, 파란 면이 30px 을 통째로 차지해 **마크가 배지의 무늬로** 읽혔다 —
     주인공이 배지였다. 배지를 없애면 마크 자체가 브랜드 아이콘이 된다.
     ★대신 두 가지를 마크 쪽으로 옮겼다 — ①굵기 1.8 → 2.5(배지가 받쳐 주지 않으면 얇은 획은
     그대로 빈약해 보인다) ②입체(음각·그라데이션)를 CSS 가 아니라 SVG 안에서 만든다.
     그래서 여기 남는 것은 **자리와 크기뿐**이고, 색·입체는 한 줄도 없다. */
  color: #fff; font-size: 14px; font-weight: 700;
  transition: transform .15s;
}
/* 마크는 인라인 SVG 다 — 글자 V 는 폰트마다 굵기·기울기가 달라 제각각으로 앉는다.
   ★32px 다(배지 시절 18px → 배지 제거 때 28px → 지금 32px). 28px 은 실기기에서 "잘 안 보인다"는
     피드백을 받았다 — 배지라는 파란 면이 사라지면 눈에 잡히는 것은 획 두께뿐이라, 배지 있을 때의
     체감 크기를 되찾으려면 마크 자체가 더 커야 한다. 34px 그릇에 32px 이면 여백 1px 씩이다.
   크기를 여기서 주므로 배포처 여섯 곳의 마크업은 <svg> 안쪽만 같으면 된다. */
.vcp-appbar .vcp-logo > svg { display: block; width: 32px; height: 32px; }
.vcp-appbar a.vcp-brand:hover .vcp-logo { transform: translateY(-1px); }
/* 호버 반응은 마크가 1px 뜨는 것으로 충분하다 — 예전에는 앱 이름을 통째로 흰색으로 올렸는데,
   그러면 `Dashboard` 까지 흰색이 되어 두 톤 워드마크가 호버 때마다 한 톤으로 무너졌다. */
.vcp-appbar a.vcp-brand:hover .vcp-appname { opacity: .88; }
.vcp-appbar a.vcp-brand:active .vcp-logo { transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .vcp-appbar .vcp-logo, .vcp-appbar a.vcp-brand:hover .vcp-logo { transition: none; transform: none; }
}
/* 앱 이름·버전 — 지금 어느 프로그램에 있는지. 값은 앱마다 다르게 채운다.
   ★색에 **리터럴 대체값**을 붙인다(2026-08-29) — `var(--sx-text)` 만 쓰면 그 변수가 비었을 때
     선언이 계산 시점에 무효가 되고, CSS 규칙상 색은 `unset`(=상속)으로 떨어진다. 위 `a.vcp-brand`
     가 `color: inherit` 이므로 상속은 문서 기본색(검정)까지 거슬러 올라가 **흰 앱 이름이 검게**
     보인다. 레일은 자기 토큰이 없는 화면 위에도 얹히므로(`src/dashboard/shell.py` 가 딜 상세
     화면의 `--text`·`--accent` 로 `--sx-*` 를 다시 묶는다) 이 대체값이 마지막 방어선이다.
     같은 이유로 `.vcp-logo` 의 배지 바탕(--sx-accent)에도 대체값을 붙였다 — 그쪽은 var 가 비면
     `background` 축약 선언 전체가 버려져 그라데이션까지 같이 사라진다. */
/* ★두 톤 워드마크다(2026-08-30) — `VC` 는 굵은 흰색, `Dashboard` 는 가는 회색이다. 한 톤으로
     전부 굵게 쓰면 레일 위쪽에서 메뉴 제목(SOURCE·EVALUATE…)과 무게가 같아져 브랜드로 안 읽힌다.
     ★기본값이 **가는 회색**이고 `b` 만 흰색으로 올린다 — 마크업은 `<b>VC</b> Dashboard` 다.
       배포처 여섯 곳이 같은 구조를 렌더한다 — 손사본이 아니라 rail_menu.py 가 써 넣는
       생성물이다(2026-08-31 94097f5, 목록은 _appbar.html 주석). */
.vcp-appname { font-size: 15.5px; font-weight: 500; color: var(--sx-muted, #9aa6c2); line-height: 1.2; letter-spacing: -.015em; }
.vcp-appname b { font-weight: 800; color: var(--sx-text, #eef1fa); }
.vcp-appver { font-size: 10px; color: var(--sx-muted); margin-top: 1px; }
/* 메뉴 — 항목이 많아 넘칠 수 있다. 목록만 스크롤하고 브랜드·계정은 고정한다. */
.vcp-appbar .vcp-apps {
  display: flex; flex-direction: column; align-items: stretch; gap: 1px;
  width: 100%; margin-top: 8px; overflow-y: auto; min-height: 0;
}
.vcp-appbar a.vcp-app {
  display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: 9px;
  width: auto; padding: 6px 9px;
  border-radius: 8px; text-decoration: none; color: var(--sx-muted); font-weight: 600;
  border: 1px solid transparent; transition: color .15s, background .15s, border-color .15s;
}
.vcp-appbar a.vcp-app .vcp-ico { font-size: 14px; line-height: 1; width: 16px; text-align: center; flex: none; }
.vcp-appbar a.vcp-app .vcp-lab { font-size: 12px; letter-spacing: -.01em; line-height: 1.25;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vcp-appbar a.vcp-app:hover { color: var(--sx-text); background: rgba(255,255,255,.045); }
/* 활성 표시가 좌측 스파인이 아니라 **채운 배경 + 테두리**인 이유 — 레일 자체가 화면 왼쪽
   끝에 붙어 있어 좌측 인셋 선이 테두리에 묻혀 안 보인다. */
.vcp-appbar a.vcp-app.on {
  color: var(--sx-text); background: var(--sx-spot); border-color: var(--sx-hair);
  box-shadow: inset 0 1px 0 var(--sx-hi);
}
/* 그룹 제목 — 번호 칩을 뺐다(2026-08-05). 숫자는 "순서를 지켜야 한다"는 신호를 주는데 실제로는
   아무 순서로나 드나든다. 대신 대문자 소형 라벨 + 위쪽 여백으로 묶음만 표시한다(SaaS 표준 패턴).
   여백이 곧 구분선 역할을 하므로 선을 긋지 않는다 — 좁은 레일에서 선이 많으면 답답해진다. */
.vcp-grp { display: block; margin: 14px 0 3px; padding-left: 10px;
  font-size: 9.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--sx-faint, var(--sx-muted)); }
.vcp-grp:first-child { margin-top: 4px; }
.vcp-grp.set { border-top: 1px solid var(--sx-hair); padding-top: 12px; margin-top: 16px; }
/* 이 앱을 떠나는 링크에는 ↗ 를 단다 — 눌렀을 때 화면이 통째로 바뀌는 것을 미리 알린다. */
.vcp-out { margin-left: auto; font-size: 9px; color: var(--sx-muted); opacity: .55; flex: none; }
.vcp-appbar a.vcp-app:hover .vcp-out { opacity: .9; }
/* ★퍼플/블루 토글을 감췄다(2026-08-04) — Streamlit(딜 레이더)은 저장된 테마를 **첫 그림 전에**
   붙일 수 없어(스크립트가 iframe 안에서 부모 문서를 늦게 고친다), 퍼플을 고르면 그 앱에서만
   파랑으로 한 번 그려졌다가 보라로 튄다. 고를 수 없게 만들어 경로 자체를 없앴다.
   되살리려면 이 규칙과 아래 토글 JS 의 강제 블루를 함께 되돌린다. */
.vcp-appbar .vcp-right { display: none; }
.vcp-appbar .vcp-right.__unused {
  margin-top: auto; display: flex; flex-direction: column; align-items: stretch; gap: 8px;
}
.vcp-appbar .vcp-right .spacetog { flex-direction: row; gap: 3px; }
.vcp-appbar .vcp-right .spacetog .stog { padding: 5px 8px; font-size: 11px; gap: 5px; }
.vcp-appbar .vcp-right .spacetog .stog .sw { width: 11px; height: 11px; }
/* 계정 — 레일 맨 아래. .vcp-right 가 margin-top:auto 라 그 뒤에 자연히 붙는다. */
.vcp-acct { display: flex; align-items: center; gap: 8px; padding-top: 9px; margin-top: auto;
  border-top: 1px solid var(--sx-hair); min-width: 0; }
.vcp-acct .pfp { flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--sx-signal);
  color: #fff; display: grid; place-items: center; font-size: 11px; font-weight: 700; }
.vcp-acct .who { min-width: 0; line-height: 1.3; }
.vcp-acct .nm { font-size: 11.5px; font-weight: 600; color: var(--sx-text, #eef1fa); display: block; }
.vcp-acct .em { font-size: 10px; color: var(--sx-muted); overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; display: block; }

/* 각 앱이 레일 자리를 비우는 공통 규칙. 레일은 fixed 라 문서 흐름에서 빠진다. */
.vcp-shellpad { padding-left: 188px; }

/* 좁은 화면에서는 아이콘 전용(56px)으로 되돌린다 — 188px 가 그대로면 본문이 잘려 나간다. */
@media (max-width: 720px) {
  .vcp-appbar { width: 56px; align-items: center; padding: 10px 0 8px; gap: 10px; }
  .vcp-appname, .vcp-appver, .vcp-acct .who, .vcp-out { display: none; }
  .vcp-appbar .vcp-brand { flex-direction: column; }
  .vcp-appbar .vcp-apps { align-items: center; margin-top: 6px; gap: 3px; }
  .vcp-appbar a.vcp-app { flex-direction: column; justify-content: center; width: 46px; padding: 6px 0 5px; gap: 2px; }
  /* ★이름표를 **자르지 않고 감는다**(2026-08-08). 예전에는 `max-width: 44px` 로 잘라
     `Market R…`·`Presenta…`·`Compan…` 처럼 뜻이 끊긴 글자가 남았다 — 레이아웃이 깨진 게
     아니라, 들어가지 않는 글자를 굳이 한 줄에 넣고 자른 것이었다(실측 390·344px 넘침 0).
     ★아이콘만 남기는 안은 버렸다 — 터치 화면에는 hover 툴팁이 없어 이름을 알 방법이
       사라진다. 레일은 세로 스트립이라 두 줄을 감당할 수 있다.
     ★`hyphens` 없이 단어 단위로만 감는다. 46px 칸에서 한 낱말이 넘치면
       `overflow-wrap` 이 글자 단위로 쪼개 준다(`Presentation` 같은 긴 낱말). */
  /* ★이름표 자리를 **항상 두 줄만큼** 잡는다(2026-08-11, 사용자 신고). 감기 시작하면서
     이름이 두 줄인 항목(Market Radar·Presentation·Fund Mandate·Company Data)만 10px 더
     높아졌고, 그래서 아이콘 간격이 **44 ↔ 54px 로 번갈아 뛰었다**(실측 375px). 항목 사이
     여백은 전부 3px 로 같은데도 눈에는 "여기만 벌어졌다"로 읽힌다 — 세로로 선 아이콘 9개는
     간격의 규칙성이 곧 정렬감이기 때문이다.
     ★값 21px = 9px × 1.15 × 2줄. `min-height` 라서 세 줄짜리 이름이 생기면 그때는 늘어난다.
     ★대가는 메뉴 묶음 높이 431 → 486px(+55). 세로 600px 짜리 짧은 화면에서도 스크롤 없이
       들어가는 것을 실측으로 확인했다(계정 줄 위치 불변). */
  .vcp-appbar a.vcp-app .vcp-lab { font-size: 9px; line-height: 1.15; text-align: center;
    white-space: normal; overflow-wrap: anywhere; text-overflow: clip; min-height: 21px; }
  /* ★좁은 화면에서는 그룹 구분을 **아예 뺀다**(2026-08-08). 예전에는 글자를 지우고
     1px 실선으로 바꿔 남겼는데(`font-size: 0` + `height: 1px`), 선 자체보다 그 위아래
     여백이 문제였다 — 구분선 하나가 위 8px · 아래 2px · 세로 묶음 칸 간격 3px 씩 두 번을
     달고 있어 **버튼 사이가 17px, 설정 묶음 앞은 21.7px** 로 벌어졌다(실측 375px).
     아이콘 9개가 세로로 서는 56px 스트립에서 그 간격은 "묶음이 다르다"가 아니라
     "여기서 목록이 끝났다"로 읽힌다.
   ★넓은 화면은 그대로 둔다 — 거기서는 SOURCE·EVALUATE 가 **실제로 읽히는 글자**라
     앱을 묶어 주는 값을 한다. 이 규칙은 720px 이하에만 걸린다.
   ★`display: none` 을 쓴다. 구분선은 자식이 없는 빈 상자라 지워도 잃을 것이 없고,
     세로 묶음(flex)에서 사라진 요소는 칸 간격도 받지 않는다 — 높이만 0 으로 접으면
     간격은 그대로 남는다. */
  .vcp-grp { display: none; }
  .vcp-appbar .vcp-right { align-items: center; }
  .vcp-appbar .vcp-right .spacetog { flex-direction: column; gap: 3px; }
  .vcp-appbar .vcp-right .spacetog .stog { padding: 5px 6px; font-size: 0; gap: 0; }
  .vcp-acct { justify-content: center; border-top: none; padding-top: 4px; }
  .vcp-shellpad { padding-left: 56px; }
}

/* ── 퍼플/블루 토글 ─────────────────────────────────────────────────────
   ★세 앱이 각자 자기 토글을 갖고 있었다(대시보드=상단, 딜 레이더=사이드바 세그먼트,
     코파일럿=자체 버튼). 누르는 자리가 앱마다 다르면 "설정은 플랫폼 것"이라는 감각이 안 생긴다.
     토글은 레일(플랫폼 계층) 하나로 모으고, 앱별 토글은 제거한다.
   ★계약: #spaceToggle > button[data-theme="studio"|"studio-blue"], 루트에 data-space="blue",
     저장키 localStorage["vcSpaceTheme"]. vc-dashboard 의 space_theme 정본과 같은 계약이라
     기존 화면과 설정이 그대로 이어진다. */
.spacetog { display: inline-flex; align-items: center; gap: 2px; padding: 2px;
  border-radius: 12px; background: rgba(255,255,255,.035);
  box-shadow: inset 0 0 0 1px var(--sx-hair); }
.spacetog .stog { display: inline-flex; align-items: center; gap: 5px; font-family: inherit;
  font-size: 11px; font-weight: 600; line-height: 1; color: var(--sx-muted);
  background: transparent; border: 0; padding: 6px 9px; border-radius: 9px;
  cursor: pointer; transition: .15s; }
.spacetog .stog .sw { width: 8px; height: 8px; border-radius: 50%; }
.spacetog .stog .sw.pu { background: radial-gradient(circle at 30% 30%, rgba(182,162,255,.95), rgba(109,107,255,.95)); }
.spacetog .stog .sw.bl { background: radial-gradient(circle at 30% 30%, rgba(167,196,255,.95), rgba(77,130,255,.95)); }
.spacetog .stog:hover { color: var(--sx-text); }
.spacetog .stog.on { color: var(--sx-text); background: var(--sx-spot); }

/* ── 앱별 사이드바 공통 폭 ───────────────────────────────────────────────
   ★폭이 앱마다 달라(220 / 300 / 236) 앱을 넘어갈 때 본문 시작 위치가 밀렸다. 이것이
     "위치가 다르다"는 인상의 물리적 실체다. 한 값으로 못박는다. */
.vcp-sidepane { width: 240px; flex: 0 0 240px; }