/* ═══════════════════════════════════════════════════════════════════════════
   components.css — InfraMate 공통 컴포넌트 (5단계, 카드 디자인 레퍼런스 기준)

   접두사: .im-  (InfraMate component)
   원칙: 4~6px+α radius, 얇은 보더, 섬세한 그림자, 의미 중심 색상.
   브랜드 강조는 --brand*, 상태 표현은 --status-* 토큰만 사용한다.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 카드 기본 ── */
.im-card {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 18px 20px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}

.im-card--hoverable:hover {
  border-color: var(--brand-border);
  box-shadow: 0 0 0 1px var(--brand-border);
}

/* IM-FE-043 D3 — 선택된 카드 테두리를 파랑(--primary)으로 통일한다(라디오와 동일).
   :hover 병기는 위 .im-card--hoverable:hover(:18)와 동률(0,2,0)이나 뒤에 선언돼 후순위 승 —
   선택 카드에 마우스를 올려도 반투명 --brand-border 로 흐려지지 않는다. 위치를 옮기지 말 것.
   비선택 카드의 hover(연초록)는 무변경이다. */
.im-card--selected,
.im-card--selected:hover {
  border-color: var(--primary);
  box-shadow: 0 0 0 1px var(--primary);
}

.im-card--disabled {
  opacity: 0.45;
  pointer-events: none;
}

/* ── 클릭 마킹 (IM-PM-050) — 표준 정본 SCREEN_REGISTRY.md §0.5 ──────────────
   「이 카드는 누를 수 있다」를 **상시** 알리는 표시다. 「선택됨」(.im-card--selected)과
   **다른 축**이며 한 카드가 둘을 동시에 가질 수 있다. 그래서 평상시 테두리를 건드리지
   않는다(사용자 확정 2026-08-05) — 테두리는 선택 표시가 이미 쓰고 있다.

   강조는 **커스텀 프로퍼티로 내려보낸다.** 화면별 KPI 클래스(.cr-kpi-label 등)는
   `.check-result-view .cr-kpi-icon` 처럼 (0,2,0) 스코프를 갖고 있어 유틸 클래스(0,1,0)로는
   덮을 수 없다. 커스텀 프로퍼티는 상속으로 전달되므로 **명시도 싸움 자체가 성립하지 않는다** —
   047-R1(표 셀 ↔ 레이아웃 클래스 명시도 동률 충돌)의 재발을 구조로 막는다.

   화면 쪽 계약: 강조 대상 선언을 `var(--im-mark-*, <기존값>)` 형태로 바꿔 둔다.
   클릭 마킹이 없는 카드에서는 fallback 이 그대로 쓰이므로 **기존 화면은 무변경**이다. */
.im-card--clickable {
  cursor: pointer;
  /* KPI 카드를 button 으로 바꿔도 모양이 변하지 않게 한다 */
  width: 100%;
  text-align: left;
  font: inherit;
  color: inherit;

  --im-mark-label: var(--primary);
  --im-mark-icon-bg: var(--primary-soft);
  --im-mark-icon-fg: var(--primary);
}

/* hover·focus 는 「누를 수 있음」의 즉각 피드백이다. 링(box-shadow)은 주지 않는다 —
   테두리+링 조합은 .im-card--selected 의 것이라 선택 상태와 헷갈린다. */
.im-card--clickable:hover {
  border-color: var(--primary);
}

.im-card--clickable:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* ── 카드 헤더 ── */
.im-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  font-size: 16.88px;
  font-weight: 600;
  color: var(--text);
}

.im-card-header svg {
  color: var(--text-muted);
  flex-shrink: 0;
}

.im-card-header .im-card-header-aux {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ── KPI 요약 카드 ── */
.im-kpi {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
}

.im-kpi-icon {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 6px;
  background: var(--brand-soft);
  border: 1px solid var(--brand-border);
  color: var(--brand);
}

.im-kpi-value {
  font-size: 30px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--text);
}

.im-kpi-label {
  font-size: 16.25px;
  font-weight: 500;
  color: var(--text-muted);
  margin-top: 3px;
}

.im-kpi-sub {
  font-size: 14.38px;
  color: var(--text-soft);
  margin-top: 2px;
}

/* ── 상태 뱃지 ── */
.im-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 4px;
  font-size: 14.38px;
  font-weight: 600;
  line-height: 1.5;
  border: 1px solid transparent;
  white-space: nowrap;
}

.im-badge--success {
  color: var(--status-success-text);
  background: var(--status-success-soft);
  border-color: var(--status-success-border);
}

.im-badge--info {
  color: var(--status-info);
  background: var(--status-info-soft);
  border-color: var(--status-info-border);
}

.im-badge--warning {
  color: var(--status-warning);
  background: var(--status-warning-soft);
  border-color: var(--status-warning-border);
}

.im-badge--danger {
  color: var(--status-danger);
  background: var(--status-danger-soft);
  border-color: var(--status-danger-border);
}

.im-badge--neutral {
  color: var(--status-neutral);
  background: var(--status-neutral-soft);
  border-color: var(--status-neutral-border);
}

/* ── 상태 점 ── */
.im-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--status-neutral);
  flex-shrink: 0;
}

.im-dot--success { background: var(--status-success); }
.im-dot--info    { background: var(--status-info); }
.im-dot--warning { background: var(--status-warning); }
.im-dot--danger  { background: var(--status-danger); }

/* ── 차트 범례 ── */
.im-legend {
  display: flex;
  flex-direction: column;
  gap: 9px;
  min-width: 0;
}

.im-legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15.63px;
}

.im-legend-label {
  color: var(--text-muted);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.im-legend-val {
  color: var(--text);
  font-weight: 600;
}

.im-legend-pct {
  color: var(--text-soft);
  font-size: 14.38px;
}

/* ── 도넛 중앙 라벨 ── */
.im-donut-wrap {
  position: relative;
  flex-shrink: 0;
}

.im-donut-center {
  position: absolute;
  inset: 0;
  z-index: 1; /* 차트 위, 툴팁 아래 */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.im-donut-center-value {
  font-size: 26.25px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.1;
}

.im-donut-center-label {
  font-size: 13.75px;
  color: var(--text-soft);
}

/* 툴팁은 중앙 라벨보다 항상 위에 표시 */
.im-donut-wrap .recharts-tooltip-wrapper {
  z-index: 5;
}

/* ── 차트 툴팁 ── */
.im-chart-tooltip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 11px;
  border-radius: 5px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  box-shadow: var(--shadow);
  font-size: 15px;
}

.im-chart-tooltip-label {
  color: var(--text-muted);
}

.im-chart-tooltip-val {
  color: var(--text);
  font-weight: 700;
}

/* ── 리소스 게이지 바 ── */
.im-gauge {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
}

.im-gauge-label {
  color: var(--text-muted);
  width: 48px;
  flex-shrink: 0;
}

.im-gauge-val {
  color: var(--text);
  font-weight: 600;
  width: 36px;
  text-align: right;
  flex-shrink: 0;
}

.im-gauge-track {
  flex: 1;
  height: 6px;
  border-radius: 999px;
  background: var(--status-neutral-soft);
  overflow: hidden;
}

.im-gauge-fill {
  height: 100%;
  border-radius: 999px;
  background: var(--brand);
  transition: width 0.3s ease;
}

.im-gauge-fill--warning { background: var(--status-warning); }
.im-gauge-fill--danger  { background: var(--status-danger); }

/* ── Empty State ── */
.im-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 36px 20px;
  text-align: center;
}

.im-empty-icon {
  color: var(--text-soft);
  margin-bottom: 6px;
}

.im-empty-title {
  font-size: 17.5px;
  font-weight: 600;
  color: var(--text);
}

.im-empty-copy {
  font-size: 15.63px;
  color: var(--text-soft);
  line-height: 1.6;
}

.im-empty-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

/* ── 공통 버튼 (컴포넌트 범위 한정) ── */
.im-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 8px 14px;
  border-radius: 5px;
  border: 1px solid var(--border-strong);
  background: transparent;
  color: var(--text);
  font-size: 16.25px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.im-btn:hover {
  border-color: var(--text-soft);
  background: var(--status-neutral-soft);
}

.im-btn--primary {
  background: var(--brand);
  border-color: var(--brand);
  color: #ffffff;
}

.im-btn--primary:hover {
  background: var(--brand-strong);
  border-color: var(--brand-strong);
}

/* ── 공통 테이블 (카드 내 리스트) ── */
.im-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 16.25px;
}

.im-table th {
  text-align: left;
  padding: 9px 12px;
  font-size: 14.38px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-soft);
  border-bottom: 1px solid var(--border);
}

.im-table td {
  padding: 11px 12px;
  border-bottom: 1px solid var(--border);
  color: var(--text-muted);
}

.im-table tbody tr:last-child td {
  border-bottom: none;
}

.im-table tbody tr:hover td {
  background: var(--table-row-hover);
}

.im-table .im-table-strong {
  color: var(--text);
  font-weight: 600;
}

/* ═══════════════════════════════════════════════════════════════════════════
   피드백 컴포넌트 (5-C, 알람 레퍼런스 기준)
   토스트 / 인라인 공지 배너 / 컴팩트 상태 배너
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 토스트 뷰포트 ── */
.im-toast-viewport {
  position: fixed;
  right: 24px;
  bottom: 24px; /* 우측 하단(5시 방향) — 새 토스트가 아래에 붙고 기존 것은 위로 밀림 */
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 400;
  pointer-events: none;
}

/* ── 토스트 ── */
.im-toast {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 300px;
  min-width: 280px;
  max-width: min(340px, calc(100vw - 48px));
  min-height: 96px;
  padding: 18px 38px 18px 16px;
  border-radius: 6px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  box-shadow: var(--shadow);
  overflow: hidden;
  pointer-events: auto;
  animation: im-toast-in 0.18s ease-out;
}

/* 상단 상태색 accent bar */
.im-toast::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
}

.im-toast--success::before { background: var(--status-success); }
.im-toast--info::before    { background: var(--status-info); }
.im-toast--warning::before { background: var(--status-warning); }
.im-toast--error::before   { background: var(--status-danger); }

@keyframes im-toast-in {
  from { opacity: 0; transform: translateX(12px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* fade-out — Toast.tsx의 TOAST_EXIT_MS(160ms)와 일치 */
.im-toast--exiting {
  animation: im-toast-out 0.16s ease-in forwards;
}

@keyframes im-toast-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}

.im-toast-icon {
  flex-shrink: 0;
  margin-top: 1px;
}

.im-toast--success .im-toast-icon,
.im-toast--success .im-toast-title { color: var(--status-success-text); }
.im-toast--info .im-toast-icon,
.im-toast--info .im-toast-title { color: var(--status-info); }
.im-toast--warning .im-toast-icon,
.im-toast--warning .im-toast-title { color: var(--status-warning); }
.im-toast--error .im-toast-icon,
.im-toast--error .im-toast-title { color: var(--status-danger); }

.im-toast-body {
  min-width: 0;
  flex: 1;
}

.im-toast-title {
  font-size: 17.5px;
  font-weight: 700;
  line-height: 1.4;
}

.im-toast-message {
  font-size: 15.63px;
  line-height: 1.6;
  color: var(--text-muted);
  margin-top: 4px;
}

.im-toast-close {
  position: absolute;
  top: 11px;
  right: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border: none;
  border-radius: 4px;
  background: transparent;
  color: var(--text-soft);
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease;
}

.im-toast-close:hover {
  color: var(--text);
  background: var(--status-neutral-soft);
}

.im-toast-close:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 1px;
}

/* 하단 진행 바 — 남은 표시 시간 */
.im-toast-progress {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 100%;
  display: block;
  transform-origin: left;
  /* duration은 CSS에서 완결한다 (Toast.tsx TOAST_DURATION_MS=5000과 동기 유지).
     인라인 스타일 의존 시 duration 미적용 → 즉시 scaleX(0) 고정되는 문제 방지 */
  animation: im-toast-progress 5000ms linear forwards;
}

.im-toast--success .im-toast-progress { background: var(--status-success); }
.im-toast--info .im-toast-progress    { background: var(--status-info); }
.im-toast--warning .im-toast-progress { background: var(--status-warning); }
.im-toast--error .im-toast-progress   { background: var(--status-danger); }

@keyframes im-toast-progress {
  from { transform: scaleX(1); }
  to   { transform: scaleX(0); }
}

/* ── 인라인 공지 배너 ──
   IM-PM-039 — border 토큰화. rgba α 0.35 → 토큰 0.3 수렴 (NoticeBanner 페이지 사용처 0건) */
.im-notice {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--bg-panel);
  font-size: 16.25px;
  color: var(--text);
}

.im-notice--info    { border-color: var(--status-info-border); background: var(--status-info-soft); }
.im-notice--success { border-color: var(--status-success-border);  background: var(--status-success-soft); }
.im-notice--warning { border-color: var(--status-warning-border); background: var(--status-warning-soft); }
.im-notice--error   { border-color: var(--status-danger-border);  background: var(--status-danger-soft); }

.im-notice--info .im-notice-icon    { color: var(--status-info); }
.im-notice--success .im-notice-icon { color: var(--status-success-text); }
.im-notice--warning .im-notice-icon { color: var(--status-warning); }
.im-notice--error .im-notice-icon   { color: var(--status-danger); }

.im-notice-icon {
  flex-shrink: 0;
  display: flex;
}

.im-notice-body {
  flex: 1;
  min-width: 0;
  line-height: 1.5;
}

.im-notice-action {
  border: none;
  background: none;
  padding: 0;
  font-size: 15.63px;
  font-weight: 600;
  color: var(--status-info);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  white-space: nowrap;
}

.im-notice-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: none;
  border-radius: 4px;
  background: transparent;
  color: var(--text-soft);
  cursor: pointer;
  flex-shrink: 0;
  transition: color 0.15s ease;
}

.im-notice-close:hover {
  color: var(--text);
}

/* ── 컴팩트 상태 배너 ── */
.im-status-banner {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 12px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--bg-panel);
  font-size: 15.63px;
  color: var(--text);
}

.im-status-banner--success .im-status-banner-icon { color: var(--status-success-text); }
.im-status-banner--info .im-status-banner-icon    { color: var(--status-info); }
.im-status-banner--warning .im-status-banner-icon { color: var(--status-warning); }
.im-status-banner--error .im-status-banner-icon   { color: var(--status-danger); }
.im-status-banner--neutral .im-status-banner-icon { color: var(--status-neutral); }

.im-status-banner-icon {
  flex-shrink: 0;
  display: flex;
}

.im-status-banner-body {
  flex: 1;
  min-width: 0;
  line-height: 1.5;
}

.im-status-banner-meta {
  font-size: 14.38px;
  color: var(--text-soft);
  white-space: nowrap;
}

.im-status-banner-action {
  padding: 4px 10px;
  border: 1px solid var(--border-strong);
  border-radius: 4px;
  background: transparent;
  color: var(--text);
  font-size: 14.38px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.im-status-banner-action:hover {
  border-color: var(--text-soft);
  background: var(--status-neutral-soft);
}

.im-status-banner-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border: none;
  border-radius: 4px;
  background: transparent;
  color: var(--text-soft);
  cursor: pointer;
  flex-shrink: 0;
  transition: color 0.15s ease;
}

.im-status-banner-close:hover {
  color: var(--text);
}

/* ═══════════════════════════════════════════════════════════════════════════
   모달 셸 (5-D, 모달 레퍼런스 기준)
   크기: sm 420 / md 640 / lg 960 (max-width, 좁은 화면에서 100vw-48px)
   ═══════════════════════════════════════════════════════════════════════ */

.modal-v2__overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(5, 10, 18, 0.62);
  z-index: var(--z-modal); /* IM-PM-052 — 하드코딩 300 을 토큰으로 치환 (값 동일, 레이어 변화 0) */
}

.modal-v2__dialog {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-height: calc(100vh - 64px);
  background: var(--bg-panel);
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  box-shadow: 0 24px 60px rgba(2, 6, 23, 0.45);
  outline: none;
}

.modal-v2__dialog--sm { max-width: min(420px, calc(100vw - 48px)); }
.modal-v2__dialog--md { max-width: min(640px, calc(100vw - 48px)); }
.modal-v2__dialog--lg { max-width: min(960px, calc(100vw - 48px)); }

.modal-v2__header {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.modal-v2__icon {
  display: flex;
  align-items: center;
  color: var(--text-muted);
}

.modal-v2__dialog--danger .modal-v2__icon {
  color: var(--status-warning);
}

.modal-v2__title {
  font-size: 18.13px;
  font-weight: 700;
  color: var(--text);
  flex: 1;
  min-width: 0;
}

.modal-v2__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: none;
  border-radius: 5px;
  background: transparent;
  color: var(--text-soft);
  cursor: pointer;
  flex-shrink: 0;
  transition: color 0.15s ease, background 0.15s ease;
}

.modal-v2__close:hover {
  color: var(--text);
  background: var(--status-neutral-soft);
}

.modal-v2__close:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 1px;
}

.modal-v2__body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 18px 20px;
}

.modal-v2__footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}

/* ── 위험 작업 확인 변형 ── */
.modal-v2__danger-hero {
  display: flex;
  justify-content: center;
  color: var(--status-danger);
  margin: 6px 0 14px;
}

.modal-v2__danger-headline {
  text-align: center;
  font-size: 18.75px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 8px;
}

.modal-v2__danger-desc {
  text-align: center;
  font-size: 15.63px;
  line-height: 1.65;
  color: var(--text-muted);
  margin-bottom: 16px;
}

.modal-v2__info-table {
  margin: 0 0 16px;
  border: 1px solid var(--border);
  border-radius: 5px;
  overflow: hidden;
}

.modal-v2__info-row {
  display: flex;
  gap: 12px;
  padding: 9px 12px;
  font-size: 15.63px;
  border-bottom: 1px solid var(--border);
}

.modal-v2__info-row:last-child {
  border-bottom: none;
}

.modal-v2__info-row dt {
  width: 86px;
  flex-shrink: 0;
  color: var(--text-soft);
  margin: 0;
}

.modal-v2__info-row dd {
  flex: 1;
  min-width: 0;
  color: var(--text);
  margin: 0;
}

.modal-v2__ack {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 15.63px;
  color: var(--text-muted);
  cursor: pointer;
  user-select: none;
  line-height: 1.5;
}

/* accent-color: var(--brand) 제거 (IM-FE-041 D2) — base.css 전역 파랑으로 수렴한다. */
.modal-v2__ack input {
  width: 15px;
  height: 15px;
  margin-top: 1px;
  cursor: pointer;
}