/* ============================================================
   PVOS Design System — Bootstrap 5 위에 얹는 토큰·컴포넌트 (모든 페이지 공유)
   로드 순서: bootstrap.min.css → 이 파일 → 페이지 <style> (뒤가 우선).
   레퍼런스: shadcn/ui New York — zinc 중성 팔레트, 1px 테두리 중심,
   그림자 최소(shadow-xs), 라운드 md(8px)/xl(12px), 세미볼드 타이포.
   ============================================================ */
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");
:root{
  /* Bootstrap 컴포넌트도 우리 액센트 따르게 */
  --bs-primary:#2563eb; --bs-link-color:#2563eb; --bs-link-hover-color:#1d4ed8;
  --bs-body-font-family:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Noto Sans KR",sans-serif;
  /* shadcn zinc 스케일 — 중성 회색 + 프라이머리 블루(blue-600) */
  --bg:#fafafa; --panel:#fff; --ink:#09090b; --ink-soft:#3f3f46; --muted:#71717a;
  --line:#e4e4e7; --line-2:#f4f4f5; --accent:#2563eb; --accent-soft:#eff6ff;
  --ring:#2563eb; --ring-track:#e4e4e7;
  --rail:#fafafa; --rail-2:#e9e9eb;
  --g-s:#6d40d6; --g-a:#15924a; --g-b:#c5790a; --g-c:#d23b35; --g-d:#9a2520; --g-x:#9a98a3;
  /* 상태 표면(알림·칩) — 페이지마다 하드코딩하던 색을 토큰화 */
  --ok-bg:#f0fdf4; --ok-fg:#15803d; --warn-bg:#fffbeb; --warn-fg:#b45309;
  --danger-bg:#fef2f2; --danger-fg:#b91c1c; --danger-bd:#fecaca; --warn-bd:#fde68a; --ok-bd:#bbf7d0;
  --danger:#dc2626;
  --shadow:0 1px 2px 0 rgba(0,0,0,.05);
  --shadow-lg:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1);
  --rail-w:236px; --top-h:54px;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);
  font:14px/1.6 "Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Noto Sans KR",sans-serif}
a{color:var(--accent);text-decoration:none}
a:hover{color:#1d4ed8}
h1{font-size:20px;font-weight:600;letter-spacing:-.025em;margin:0}
h2{font-weight:600;letter-spacing:-.02em}
b,strong{font-weight:600}
:focus-visible{outline:2px solid var(--ring);outline-offset:2px}

/* ---- App Shell: 좌측 사이드바(shadcn sidebar 풍 라이트) + 상단 바 ---- */
body.pvos{padding-left:var(--rail-w);padding-top:var(--top-h)}
.pvos-rail{position:fixed;top:0;left:0;bottom:0;width:var(--rail-w);background:var(--rail);
  border-right:1px solid var(--line);display:flex;flex-direction:column;
  padding:14px 12px 20px;overflow-y:auto;z-index:50}
.pvos-rail .brand{display:flex;align-items:center;gap:9px;color:var(--ink);font-weight:600;font-size:14.5px;
  padding:2px 6px 12px;white-space:nowrap;overflow:hidden;letter-spacing:-.01em}
.pvos-rail .brand .logo{width:26px;height:26px;border-radius:8px;background:var(--ink);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600}
.pvos-rail .alt{font-size:11px;color:var(--muted);font-weight:400;padding:0 8px 6px}
.pvos-rail .grp{font-size:11px;color:var(--muted);font-weight:500;letter-spacing:.01em;
  padding:14px 8px 4px}
.pvos-rail a{display:flex;align-items:center;gap:9px;padding:6px 9px;border-radius:8px;
  color:var(--ink-soft);font-size:13.5px;font-weight:400;position:relative;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-decoration:none}
.pvos-rail a:hover{background:var(--line-2);color:var(--ink)}
.pvos-rail a.on{background:var(--rail-2);color:var(--ink);font-weight:600}
.pvos-rail .spacer{flex:1}

.pvos-top{position:fixed;top:0;left:var(--rail-w);right:0;height:var(--top-h);background:var(--panel);
  border-bottom:1px solid var(--line);display:flex;align-items:center;gap:14px;padding:0 20px;z-index:40}
.pvos-top .title{font-weight:600;color:var(--ink);font-size:14px;letter-spacing:-.01em}
.pvos-top .title small{font-weight:400;color:var(--muted);margin-left:8px;font-size:12px}
.pvos-top .search{flex:1;max-width:440px;margin-left:auto;position:relative}
.pvos-top .search input{width:100%;border:1px solid var(--line);border-radius:8px;padding:7px 12px;
  font:inherit;font-size:13.5px;background:var(--bg)}
.pvos-top .persona{font-size:13px;color:var(--muted);display:flex;align-items:center;gap:7px;margin-left:auto}
.pvos-top .persona .av{width:26px;height:26px;border-radius:99px;background:var(--line-2);
  color:var(--ink-soft);display:flex;align-items:center;justify-content:center;font-weight:600;font-size:12px}

/* 햄버거(모바일에서만 노출) + 드로어 스크림 */
.pvos-burger{display:none;flex-direction:column;justify-content:center;gap:4px;width:34px;height:34px;
  border:1px solid var(--line);border-radius:8px;background:var(--panel);cursor:pointer;padding:0 8px;flex-shrink:0}
.pvos-burger span{display:block;height:2px;border-radius:2px;background:var(--ink-soft)}
.pvos-scrim{display:none;position:fixed;inset:0;background:rgba(9,9,11,.32);z-index:45}
body.rail-open .pvos-scrim{display:block}

@media (max-width:860px){
  body.pvos{padding-left:0}
  .pvos-rail{transform:translateX(-100%);transition:transform .22s ease;width:min(82vw,300px);
    box-shadow:var(--shadow-lg)}
  body.rail-open .pvos-rail{transform:none}
  .pvos-top{left:0}
  .pvos-burger{display:flex}
  .pvos-top .persona .nm{display:none}
  .wrap{padding:16px}
  /* 페이지별 고정컬럼 그리드를 중앙에서 반응형화(페이지 <style>가 뒤에 로드되므로 !important) */
  .grid-4,.kpi-grid,.kpis,.big-row,.mod-grid,.hl-row,.team-grid,.fm,.grid-3{grid-template-columns:repeat(2,1fr)!important}
  table{font-size:12.5px}
  /* 표·탭은 잘리지 말고 가로 스크롤(중구난방 방지의 핵심 규칙) */
  .wrap table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;white-space:nowrap}
  .tabs{flex-wrap:nowrap!important;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .tabs::-webkit-scrollbar{display:none}
}
@media (max-width:640px){
  html,body{overflow-x:hidden}   /* 한 요소의 폭 초과가 페이지 전체를 밀어 우측을 자르는 것 방지(표·차트는 자체 스크롤 보유) */
  .grid-2,.grid-3,.grid-4,.kpi-grid,.kpis,.big-row,.mod-grid,.hl-row,.team-grid,.fm,
  .subs,.grid2,.examples,.panel-row,.row{grid-template-columns:1fr!important}
  /* 큰 KPI 숫자가 그리드 컬럼을 밀어내지 않도록(min-width:auto 블로우아웃 방지) */
  .kpis>*,.meta>*,.subcards>*,.kpi-grid>*,.big-row>*,.gdist>*,.gbar{min-width:0!important}
  .kpi .v,.meta .v,.subcard .big{font-size:20px!important}
  /* 페이지 헤더(.head)는 모바일에서 줄바꿈·세로 적층 — 우측 배지/서브텍스트 잘림 제거 */
  .head{flex-wrap:wrap!important}
  .head .sub{flex-basis:100%!important;margin:2px 0 0 0!important}
  .head .src,.head .vtoggle,.head .btn,.head .refresh{margin-left:0!important}
  /* flex 리스트 행(.row/.match/.flag)은 우측 블록을 아래로 내려 적층 */
  .row,.match,.flag{flex-wrap:wrap}
  .row .det,.match .why,.flag .det{margin-left:0!important;width:100%;max-width:none!important;text-align:left!important;margin-top:6px}
  .tbar .ttl{display:none}   /* 챗 상단 설명 텍스트는 모바일에서 숨김 */
  /* 인라인 flex 행(페이지마다 style="display:flex"로 박힌 것)이 모바일에서 줄바꿈되도록 — 페이지 폭 초과/텍스트 잘림 방지 */
  .panel [style*="display:flex"],.card [style*="display:flex"]{flex-wrap:wrap}
  .panel [style*="flex:1"],.card [style*="flex:1"]{min-width:0}
}

/* 콘텐츠 컨테이너 */
.wrap{max-width:1060px;margin:0 auto;padding:24px}

/* ---- 컴포넌트 ---- */
.card{display:block;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:16px 18px;
  box-shadow:var(--shadow)}   /* display:block — Bootstrap .card flex 중화 */
.card h3{margin:0 0 12px;font-size:13px;letter-spacing:-.01em;
  color:var(--ink);font-weight:600}
.chip{display:inline-block;font-size:12px;padding:2px 9px;border-radius:8px;background:var(--line-2);
  border:1px solid transparent;color:var(--ink-soft);font-weight:500;cursor:default}
.chip.click{cursor:pointer;background:#fff;border:1px solid var(--line);color:var(--muted)}
.chip.click.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.chip.pilot{background:var(--ok-bg);color:var(--ok-fg)}
.btn{background:var(--accent);color:#fff;border:1px solid transparent;border-radius:8px;padding:7px 14px;font:inherit;
  font-size:13.5px;font-weight:500;cursor:pointer;box-shadow:var(--shadow)}
.btn:hover{background:#1d4ed8}
.btn:disabled{opacity:.5;cursor:default}
.btn.ghost{background:#fff;color:var(--ink);border:1px solid var(--line)}
.btn.ghost:hover{background:var(--line-2)}
.pill{font-size:11px;padding:2px 8px;border-radius:6px;background:var(--accent-soft);color:var(--accent);
  margin-left:6px;font-weight:600}
.mock{font-size:11px;color:var(--warn-fg);background:var(--warn-bg);border:1px solid var(--warn-bd);border-radius:6px;
  padding:1px 6px;margin-left:8px}
.src{font-size:12px;padding:3px 9px;border-radius:8px;background:var(--accent-soft);color:var(--accent);font-weight:500}
.src.live{background:var(--ok-bg);color:var(--ok-fg)}
/* 데이터 로딩 실패 표시(핫픽스 2026-09-16) — 실패를 '샘플'로 위장하지 않는다 */
.src.danger{background:var(--danger-bg,#fef2f2);color:var(--danger,#b91c1c)}

/* 폼 요소 기본형(shadcn input) — 페이지 <style>가 뒤에 오므로 필요 시 재정의 가능 */
.wrap input:not([type=checkbox]):not([type=radio]):not([type=range]),.wrap select,.wrap textarea{
  border:1px solid var(--line);border-radius:8px;padding:6px 11px;font:inherit;font-size:13.5px;
  background:#fff;color:var(--ink)}
.wrap input:focus,.wrap select:focus,.wrap textarea:focus{
  outline:none;border-color:var(--ring);box-shadow:0 0 0 3px rgba(37,99,235,.15)}

/* 등급 배지 */
.grade{display:inline-flex;align-items:center;justify-content:center;border-radius:8px;color:#fff;
  font-weight:700}
.grade.g-S{background:var(--g-s)} .grade.g-A{background:var(--g-a)} .grade.g-B{background:var(--g-b)}
.grade.g-C{background:var(--g-c)} .grade.g-D{background:var(--g-d)} .grade.g-x{background:var(--g-x)}
.grade.g-U{background:var(--g-x)} /* U=판단 불가(자료 부족) — 회색 */

/* 도넛 링 */
.rings{display:flex;flex-wrap:wrap;gap:10px}
.ring{text-align:center;width:88px}
.ring svg{width:64px;height:64px}
.ring small{display:block;font-size:11px;color:var(--muted);margin-top:2px;font-weight:500}

/* SABCD 스테퍼 */
.stepper{display:flex;align-items:center}
.step{width:36px;height:36px;border-radius:8px;display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:14px;background:var(--line-2);color:var(--muted)}
.step.on{background:var(--c);color:#fff;box-shadow:var(--shadow);transform:scale(1.12)}
.step-sep{flex:1;height:2px;background:var(--line);margin:0 6px;min-width:12px}

/* 메타 그리드 */
.meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:14px}
.meta .k{font-size:11px;color:var(--muted);font-weight:500;letter-spacing:.01em}
.meta .v{font-size:15px;font-weight:600;color:var(--ink);margin-top:2px;font-variant-numeric:tabular-nums}
.meta .v.warn{color:var(--g-c)}

/* 탭 */
.tabs{display:flex;gap:2px;flex-wrap:wrap;border-bottom:1px solid var(--line)}
.tab{padding:9px 13px;font-size:13.5px;color:var(--muted);cursor:pointer;border-bottom:2px solid transparent;
  white-space:nowrap;font-weight:500}
.tab:hover{color:var(--ink)}
.tab.on{color:var(--ink);border-bottom-color:var(--ink);font-weight:600}
.tab.soft{opacity:.5}
.panel{background:var(--panel);border:1px solid var(--line);border-top:none;border-radius:0 0 12px 12px;
  padding:20px;box-shadow:var(--shadow)}

/* key-value / table / soft-note */
.kv{display:grid;grid-template-columns:auto 1fr;gap:7px 16px;font-size:14px}
.kv .k{color:var(--muted)}
table{width:100%;border-collapse:collapse;font-size:13px}
th,td{text-align:left;padding:9px 11px;border-bottom:1px solid var(--line-2)}
th{color:var(--muted);font-size:12px;font-weight:500}
tbody tr:hover>td{background:rgba(244,244,245,.5)}
.soft-note{color:var(--muted);background:var(--bg);border:1px dashed var(--line);border-radius:10px;
  padding:26px;text-align:center}
.trig{color:var(--g-c);font-size:13px;font-weight:500}
.empty{color:var(--muted);padding:40px;text-align:center}

/* 재무·밸류 (회사 360) */
.num{text-align:right;font-variant-numeric:tabular-nums}
tr.hl td{background:var(--accent-soft)}
.subcards{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin:10px 0 4px}
.subcard{border:1px solid var(--line);border-radius:10px;padding:11px 13px;background:var(--bg)}
.subcard .lab{font-size:11px;color:var(--muted);font-weight:500;margin-bottom:3px}
.subcard .big{font-size:17px;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}

/* ============================================================
   하모나이제이션 레이어 — 페이지 인라인 중복을 대체하는 공용 컴포넌트.
   신규 페이지는 인라인 재정의 금지: 아래 클래스를 그대로 쓸 것.
   ============================================================ */
/* 가로 스크롤 래퍼: 넓은 표·차트(히트맵·바차트)는 잘리지 말고 스크롤 */
.table-wrap,.chart-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.table-wrap table{white-space:nowrap}

/* 페이지 헤더(공용) — 인라인 .head 재정의 대신 이걸로 */
.head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.head h1{font-size:20px;font-weight:600;letter-spacing:-.025em}
.head .sub{color:var(--muted);font-size:13px}
.head .src{margin-left:auto}

/* 등급 배지 크기 변형 — .tg/.gb/.sc 제각각 대신 .grade.sm/.lg */
.grade.sm{width:22px;height:22px;border-radius:6px;font-size:12px}
.grade.md{width:30px;height:30px;border-radius:8px;font-size:14px}
.grade.lg{width:56px;height:56px;border-radius:12px;font-size:24px}

/* 상태 알림 배너(공용) — 인라인 #fef6f6/#fde68a/#f0fdf4 하드코딩 대체 */
.note{border:1px solid var(--line);border-radius:10px;padding:12px 14px;font-size:13px;color:var(--ink-soft)}
.note.ok{background:var(--ok-bg);border-color:var(--ok-bd);color:var(--ok-fg)}
.note.warn{background:var(--warn-bg);border-color:var(--warn-bd);color:var(--warn-fg)}
.note.danger{background:var(--danger-bg);border-color:var(--danger-bd);color:var(--danger-fg)}

/* 상태 칩(신선도·플래그) — 하드코딩 색쌍 대체 */
.chip.ok{background:var(--ok-bg);color:var(--ok-fg)}
.chip.warn{background:var(--warn-bg);color:var(--warn-fg)}
.chip.danger{background:var(--danger-bg);color:var(--danger-fg)}

/* 표준 KPI 타일(공용) — cockpit/funds/valuation/report 인라인 3~4종 통일.
   신규 페이지는 .kpis>.kpi(.k/.v/.s) 사용. 기존 인라인 정의는 점진 제거. */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:16px}
.kpi{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:15px 16px;box-shadow:var(--shadow)}
.kpi .k{font-size:12px;color:var(--muted);font-weight:500}
.kpi .v{font-size:22px;font-weight:600;letter-spacing:-.02em;margin-top:5px;color:var(--ink);
  font-variant-numeric:tabular-nums}
.kpi .s{font-size:12px;color:var(--muted);margin-top:2px}

/* 인쇄·PDF: 좌측 셸(레일·상단바) 제외 — 영업보고서 PDF에 네비 안 찍히게 */
@media print{
  .pvos-rail,.pvos-top,.pvos-scrim{display:none!important}
  body.pvos{padding-left:0!important;padding-top:0!important}
}

/* 마이 영역 — 페르소나 버튼 + 드롭다운(내 정보·역할·로그아웃) */
.pvos-top .persona{margin-left:auto;background:none;border:0;cursor:pointer;padding:4px 7px;border-radius:8px;display:flex;align-items:center;gap:7px}
.pvos-top .persona:hover{background:var(--line-2)}
.pvos-me{position:fixed;top:calc(var(--top-h) - 2px);right:12px;min-width:230px;background:var(--panel);
  border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow-lg);padding:6px;z-index:60;display:none}
.pvos-me.show{display:block}
.pvos-me .av{width:30px;height:30px;border-radius:99px;background:var(--line-2);color:var(--ink-soft);
  display:flex;align-items:center;justify-content:center;font-weight:600;font-size:13px;flex:0 0 auto}
.pvos-me .me-head{display:flex;gap:10px;align-items:center;padding:8px;border-bottom:1px solid var(--line);margin-bottom:6px}
.pvos-me .me-id{display:flex;flex-direction:column;min-width:0}
.pvos-me .me-id b{font-size:14px;color:var(--ink);line-height:1.3}
.pvos-me .me-id small{font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:186px}
.pvos-me a,.pvos-me>button{display:block;width:100%;text-align:left;padding:8px 10px;border:0;background:none;
  border-radius:8px;font:inherit;color:var(--ink);cursor:pointer;text-decoration:none}
.pvos-me a:hover,.pvos-me>button:hover{background:var(--line-2)}
.pvos-me #pvosLogout{color:var(--danger)}

/* 2뎁스 하위 탭(2026-08-23) — 상위 페이지 안의 형제 페이지 */
.pvos-sub{display:flex;gap:2px;flex-wrap:nowrap;overflow-x:auto;border-bottom:1px solid var(--line);margin:0 0 16px;scrollbar-width:none}
.pvos-sub::-webkit-scrollbar{display:none}
.pvos-sub a{padding:9px 13px;font-size:13.5px;color:var(--muted);border-bottom:2px solid transparent;white-space:nowrap;font-weight:500}
.pvos-sub a:hover{color:var(--ink)}
.pvos-sub a.on{color:var(--ink);border-bottom-color:var(--ink);font-weight:600}

/* 요청·의견(개선 요청) — 상단 바 버튼 + 접수 다이얼로그 (2026-08-26) */
.pvos-top .fbbtn{margin-left:10px;font:inherit;font-size:12.5px;font-weight:500;color:var(--ink-soft);
  background:#fff;border:1px solid var(--line);border-radius:8px;padding:5px 11px;cursor:pointer;flex-shrink:0}
.pvos-top .fbbtn:hover{background:var(--line-2);color:var(--ink)}
.pvos-fbm{display:none;position:fixed;inset:0;background:rgba(9,9,11,.32);z-index:70}
.pvos-fbm.show{display:flex;align-items:flex-start;justify-content:center;padding-top:12vh}
.pvos-fbm .bx{width:min(92vw,460px);background:var(--panel);border:1px solid var(--line);border-radius:12px;
  box-shadow:var(--shadow-lg);padding:16px 18px}
.pvos-fbm b{font-size:14px}
.pvos-fbm p{margin:6px 0 10px;font-size:12.5px;color:var(--muted);line-height:1.55}
.pvos-fbm textarea{width:100%;border:1px solid var(--line);border-radius:8px;padding:8px 11px;
  font:inherit;font-size:13.5px;resize:vertical;background:#fff;color:var(--ink)}
.pvos-fbm textarea:focus{outline:none;border-color:var(--ring);box-shadow:0 0 0 3px rgba(37,99,235,.15)}
.pvos-fbm .row{display:flex;gap:8px;align-items:center;margin-top:10px}
.pvos-fbm .row .sp{flex:1}
.pvos-fbm #pvosFbMsg{font-size:12px;color:var(--muted)}
@media (max-width:640px){.pvos-top .fbbtn{padding:5px 8px;margin-left:4px}}