/* ============================================================
   하동 직배관 대시보드 — 보조 스타일 (원본 style.css 위에 추가)
   원본에 없는 커스텀 컴포넌트(overview hero, 진척바, 마일스톤 카드,
   태그, 자료실 카드, key-value 표)만 정의. 색/토큰은 원본 변수 재사용.
   ============================================================ */

/* 로고 텍스트 배지 (원본 posco_intl_logo.png 대체) */
.brand .logo-badge {
  height: 30px; padding: 0 10px; display: inline-flex; align-items: center;
  font-weight: 800; font-size: 15px; letter-spacing: .5px; color: #fff;
  background: rgba(255,255,255,.16); border-radius: 6px;
}

/* KPI 한 줄 배치 */
.kpi-row { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
@media (max-width: 1100px){ .kpi-row { grid-template-columns: repeat(3, 1fr); } }

/* Overview Hero */
.ov-hero {
  display: flex; align-items: center; gap: 26px;
  background: linear-gradient(135deg, var(--primary-tint), var(--surface));
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 16px 22px; box-shadow: var(--shadow-card);
}
.ov-hero-l { font-size: 13px; color: var(--text-muted); font-weight: 600; }
.ov-hero-v { font-size: 40px; font-weight: 800; color: var(--primary-dark); line-height: 1.05; letter-spacing: -.02em; }
.ov-hero-v span { font-size: 20px; margin-left: 2px; }
.ov-hero-s { font-size: 22px; font-weight: 800; color: var(--text-strong); }
.ov-hero-s.up { color: var(--success); }
.ov-hero-s.down { color: var(--danger); }
.ov-hero-sep { width: 1px; height: 44px; background: var(--border-strong); }
.ov-hero-tail { margin-left: auto; font-size: 13.5px; color: var(--text-muted); font-weight: 600; text-align: right; }

/* 공종 진척 행 */
.disc-row { display: grid; grid-template-columns: 130px 1fr 74px; align-items: center; gap: 10px; padding: 7px 0; }
.disc-n { font-size: 13.5px; font-weight: 600; color: var(--text-strong); }
.disc-plan { font-size: 12px; color: var(--text-muted); text-align: right; }
.pbar { position: relative; height: 18px; background: var(--surface-2); border-radius: 999px; overflow: hidden; }
.pbar-fill { position: absolute; left: 0; top: 0; bottom: 0; background: var(--primary); border-radius: 999px; }
.pbar-fill.green { background: var(--success); } .pbar-fill.orange { background: var(--orange); } .pbar-fill.red { background: var(--red); }
.pbar-txt { position: absolute; right: 8px; top: 0; line-height: 18px; font-size: 11.5px; font-weight: 700; color: var(--text-strong); }

/* 마일스톤 카드 */
.ms-card { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px dashed var(--border); }
.ms-card:last-child { border-bottom: none; }
.ms-date { font-size: 12.5px; font-weight: 700; color: var(--primary-dark); width: 66px; flex-shrink: 0; font-variant-numeric: tabular-nums; }
.ms-body { flex: 1; min-width: 0; }
.ms-disc { display: inline-block; font-size: 11px; font-weight: 700; color: var(--text-muted); background: var(--surface-2); padding: 1px 7px; border-radius: 4px; margin-bottom: 2px; }
.ms-title { font-size: 13.5px; color: var(--text-strong); font-weight: 500; }

/* 상태 태그 */
.tag { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.tag-s { background: var(--success-soft); color: var(--success-dark); border: 1px solid var(--success-border); }
.tag-w { background: var(--warning-soft); color: var(--warning-dark); border: 1px solid var(--warning-border); }
.tag-d { background: var(--danger-soft); color: var(--danger-dark); border: 1px solid var(--danger-border); }
.tag-n { background: var(--surface-2); color: var(--text-muted); border: 1px solid var(--border); }

/* 특이사항 */
.ov-act-sh { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 700; margin: 10px 0 6px; padding-left: 10px; border-left: 3px solid var(--text-soft); }
.ov-act-sh.d { border-left-color: var(--danger); color: var(--danger-dark); }
.ov-act-sh.w { border-left-color: var(--warning); color: var(--warning-dark); }
.ov-act-sh.s { border-left-color: var(--success); color: var(--success-dark); }
.ov-act-cnt { font-size: 11px; color: var(--text-muted); font-weight: 600; }
.ov-act-item { font-size: 13px; color: var(--text); padding: 5px 0 5px 13px; line-height: 1.45; }
.ov-ms-empty { font-size: 13px; color: var(--text-muted); padding: 14px 0; }

/* key-value 표 */
table.kv { width: 100%; border-collapse: collapse; }
table.kv th { text-align: left; width: 34%; padding: 9px 10px; font-size: 13px; color: var(--text-muted); font-weight: 600; border-bottom: 1px solid var(--border-soft); vertical-align: top; background: none; }
table.kv td { padding: 9px 10px; font-size: 13.5px; color: var(--text-strong); font-weight: 500; border-bottom: 1px solid var(--border-soft); }
table.kv tr:last-child th, table.kv tr:last-child td { border-bottom: none; }

/* 표 숫자/래퍼 */
.table-wrap { overflow-x: auto; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* 자료실 링크 카드 */
.link-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.link-card { display: flex; gap: 14px; align-items: flex-start; padding: 16px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-3); text-decoration: none; color: inherit; transition: .15s; }
.link-card:hover { border-color: var(--primary); box-shadow: var(--shadow-sm); }
.link-card.disabled { opacity: .75; cursor: not-allowed; }
.link-card .lc-ic { font-size: 26px; line-height: 1; }
.lc-label { font-weight: 700; font-size: 14px; margin-bottom: 3px; }
.lc-desc { font-size: 12.5px; color: var(--text-muted); }
.lc-path { font-size: 11.5px; color: var(--text-muted); margin-top: 8px; background: var(--surface); border: 1px solid var(--border); padding: 4px 8px; border-radius: 6px; word-break: break-all; font-family: ui-monospace, Consolas, monospace; }
.lc-warn { font-size: 11.5px; color: var(--warning-dark); margin-top: 6px; }

/* 빈 상태 안내 */
.empty-note { font-size: 13.5px; color: var(--text-muted); line-height: 1.7; padding: 12px 2px; }
.empty-note code { background: var(--surface-2); border: 1px solid var(--border); padding: 1px 6px; border-radius: 5px; font-size: 12.5px; }

/* 사이드바 아코디언 접기 */
.menu-section.collapsed .menu-items { display: none; }
.menu-section.collapsed .mg-caret { transform: rotate(-90deg); }
.mg-caret { transition: transform .15s; margin-left: auto; }

/* 패널 스크롤 */
.panels { overflow-y: auto; }
.panel { padding: 18px 22px; }