/* ==========================================================================
   PerpDEX 대시보드 전용 스타일 (2단계)
   --------------------------------------------------------------------------
   색은 **전부 --pagu-* 에서 파생**시킨다. 고정색(#…)과 반투명 흰색
   rgba(255,255,255,…) 은 쓰지 않는다 — 다크 모드에서 어두운 배경 위 어두운
   글자가 되거나 흰 띠로 남는다 (docs/architecture.md §5 "색을 새로 쓸 때").

   공통 부품(src/components.css)의 .pagu-card / .pagu-table / .pagu-bento 를
   그대로 쓰고, 여기에는 이 화면에만 필요한 것만 둔다.
   ========================================================================== */

.pdx-shell > section + section {
  margin-top: var(--pagu-space-5);
}

/* --- 요약 숫자 카드 ------------------------------------------------------ */

.pdx-stat {
  display: flex;
  flex-direction: column;
  gap: var(--pagu-space-1);
}

.pdx-stat__label {
  color: var(--pagu-muted);
  font-size: var(--pagu-text-sm);
  font-weight: 600;
}

.pdx-stat__sub {
  color: var(--pagu-muted);
  font-size: var(--pagu-text-xs);
}

/* --- 고르는 줄 (지표·프로젝트) ------------------------------------------ */

.pdx-controls {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pagu-space-3);
  margin-bottom: var(--pagu-space-4);
}

.pdx-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 160px;
  flex: 1 1 200px;
}

.pdx-field > span {
  color: var(--pagu-muted);
  font-size: var(--pagu-text-xs);
  font-weight: 600;
}

.pdx-field select {
  min-height: var(--pagu-touch-min);
  padding: 0 var(--pagu-space-3);
  border: 1px solid var(--pagu-line-strong);
  border-radius: var(--pagu-radius-md);
  background: var(--pagu-panel);
  color: var(--pagu-fg);
  font: inherit;
  font-weight: 600;
}

/* 카드 안에서 쓰는 작은 제목과 간격 (인라인 style 대신 클래스로 둔다) */
.pdx-subtitle {
  margin: var(--pagu-space-5) 0 0;
  color: var(--pagu-fg);
  font-size: var(--pagu-text-base);
  font-weight: 700;
}

.pdx-gap-3 {
  margin-top: var(--pagu-space-3);
}

.pdx-gap-4 {
  margin-top: var(--pagu-space-4);
}

/* --- 표 보조 ------------------------------------------------------------- */

/* 가로로 긴 표에서 첫 칸(프로젝트 이름)을 왼쪽에 붙여 둔다. */
.pdx-table th.pdx-sticky,
.pdx-table td.pdx-sticky {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--pagu-panel);
  font-weight: 600;
}

.pdx-table thead th.pdx-sticky {
  background: var(--pagu-bg-subtle);
}

/* 지표 묶음 머리글 (by 1M Vol / by OI …) */
.pdx-table thead th.pdx-group {
  text-align: center;
  border-left: 1px solid var(--pagu-line);
  color: var(--pagu-fg);
}

.pdx-table tbody tr:hover td {
  background: var(--pagu-bg-subtle);
}

.pdx-table tbody tr:hover td.pdx-sticky {
  background: var(--pagu-bg-subtle);
}

.pdx-empty {
  color: var(--pagu-muted);
  font-size: var(--pagu-text-sm);
}

/* 막대: 시계열이 아닌 "지금 크기 비교"는 차트 대신 CSS 막대로 본다
   (Lightweight Charts 는 시계열 전용 — architecture.md §4). */
.pdx-bar {
  position: relative;
  min-width: 72px;
  height: 8px;
  border-radius: var(--pagu-radius-full);
  background: var(--pagu-accent-weak);
  overflow: hidden;
}

.pdx-bar > i {
  position: absolute;
  inset: 0 auto 0 0;
  display: block;
  border-radius: var(--pagu-radius-full);
  background: var(--pagu-accent);
}

/* --- 주의 상자 / 각주 --------------------------------------------------- */

.pdx-caution {
  border: 1px solid var(--pagu-warn);
  border-left-width: 4px;
  border-radius: var(--pagu-radius-md);
  background: var(--pagu-warn-weak);
  padding: var(--pagu-space-4);
  color: var(--pagu-fg);
  font-size: var(--pagu-text-sm);
}

.pdx-caution strong {
  color: var(--pagu-fg);
}

.pdx-notes {
  margin: var(--pagu-space-3) 0 0;
  padding-left: 1.1em;
  color: var(--pagu-muted);
  font-size: var(--pagu-text-xs);
  line-height: 1.7;
}

.pdx-notes li + li {
  margin-top: 2px;
}

/* 본문으로 읽는 각주(출처·한계)는 조금 크게 */
.pdx-notes--body {
  font-size: var(--pagu-text-sm);
}

/* 글자색을 반드시 못박는다. 색을 지정한 상자 안에 들어가면 색을 물려받아
   연회색 배경 위 밝은 글자가 될 수 있다 (components.html 에서 겪은 문제). */
.pdx-shell code {
  font-family: var(--pagu-font-mono);
  font-size: 0.92em;
  background: var(--pagu-bg-subtle);
  color: var(--pagu-fg);
  border: 1px solid var(--pagu-line);
  border-radius: 6px;
  padding: 1px 5px;
}

.pdx-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pagu-space-2) var(--pagu-space-4);
  align-items: center;
}

.pdx-source-link {
  color: var(--pagu-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* 작은 화면: 카드 안쪽 여백과 글자를 조금 줄인다 */
@media (max-width: 420px) {
  .pdx-field {
    flex-basis: 100%;
  }
  .pdx-table th,
  .pdx-table td {
    padding: var(--pagu-space-2);
  }
}