/* ============================================================
   card-new.css — New 카드 = "O₂ 링 다이얼" (구조 자체가 다름)
   · Before=기존 행스택 카드 / New=원형 산소 게이지 중심 구조
   · 마크업은 app.js upsertDeviceCard 의 newInner(nc-*) 가 생성
   · .device-grid.cards-new 스코프에서만 적용
   ============================================================ */
.device-grid.cards-new{
  --nc-ink:#0f1b2d; --nc-mut:#64748b; --nc-line:#e9eef5; --nc-soft:#f6f9fc;
  --nc-blue:#1070dd; --nc-led:#38bdf8; --nc-amber:#f5a623; --nc-red:#ed4545; --nc-gray:#cbd5e1;
}

/* ── 카드 컨테이너 (링 다이얼 레이아웃) ── */
.device-grid.cards-new .device-card{
  background:#fff; border:1px solid var(--nc-line); border-radius:18px;
  padding:15px 15px 15px; gap:11px; overflow:visible;
  display:flex; flex-direction:column; align-items:stretch;
  box-shadow:0 1px 2px rgba(15,23,42,.04), 0 12px 26px -18px rgba(15,23,42,.34);
  transition:box-shadow .18s ease, transform .12s ease;
}
.device-grid.cards-new .device-card:hover{ transform:translateY(-2px); box-shadow:0 2px 4px rgba(15,23,42,.05), 0 18px 34px -18px rgba(15,23,42,.42); }

/* ── 헤더: 이름 + 상태칩 + 기어 ── */
.device-grid.cards-new .nc-head{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.device-grid.cards-new .nc-name{ font-size:15px; font-weight:700; color:var(--nc-ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
.device-grid.cards-new .nc-head-r{ display:flex; align-items:center; gap:7px; flex-shrink:0; }
.device-grid.cards-new .nc-chip{ font-size:11px; font-weight:700; padding:3px 9px; border-radius:999px; white-space:nowrap; }
.device-grid.cards-new .nc-chip--run{ background:#e7f7ee; color:#15a34a; }
.device-grid.cards-new .nc-chip--idle{ background:#eef1f5; color:#8a97a6; }
.device-grid.cards-new .nc-chip--err{ background:#fdecec; color:#dc2626; }
.device-grid.cards-new .btn-device-reserve{ width:24px; height:24px; border:none; background:transparent; color:#9aa7b6; cursor:pointer; font-size:14px; display:inline-flex; align-items:center; justify-content:center; padding:0; transition:color .15s, transform .15s; }
.device-grid.cards-new .btn-device-reserve:hover:not(.is-disabled):not(:disabled){ color:var(--nc-blue); transform:rotate(20deg); }
.device-grid.cards-new .btn-device-reserve.is-disabled, .device-grid.cards-new .btn-device-reserve:disabled{ opacity:.35; cursor:not-allowed; }

/* ── 시그니처: 원형 O₂ 다이얼 ── */
.device-grid.cards-new .nc-dial{ position:relative; align-self:center; width:130px; height:130px; margin:3px 0 1px; }
.device-grid.cards-new .nc-ring{ width:100%; height:100%; transform:rotate(-90deg); display:block; }
.device-grid.cards-new .nc-ring-bg{ fill:none; stroke:#eef2f6; stroke-width:8.5; }
.device-grid.cards-new .nc-ring-fg{ fill:none; stroke:var(--nc-gray); stroke-width:8.5; stroke-linecap:round; transition:stroke-dashoffset .45s cubic-bezier(.4,.1,.2,1), stroke .3s ease; }
.device-grid.cards-new .nc-ring.level-high .nc-ring-fg{ stroke:var(--nc-blue); }
.device-grid.cards-new .nc-ring.level-mid  .nc-ring-fg{ stroke:var(--nc-amber); }
.device-grid.cards-new .nc-ring.level-low  .nc-ring-fg{ stroke:var(--nc-red); }
.device-grid.cards-new .nc-ring.level-off  .nc-ring-fg{ stroke:var(--nc-gray); }

.device-grid.cards-new .nc-dial-c{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; }
.device-grid.cards-new .nc-o2{ font-size:35px; font-weight:800; color:var(--nc-ink); line-height:1; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.device-grid.cards-new .nc-o2 i{ font-style:normal; font-size:16px; font-weight:700; color:#9aa7b6; margin-left:1px; }
.device-grid.cards-new .nc-o2-lab{ font-size:11px; font-weight:600; color:#94a3b8; margin-top:3px; }
/* 정지/저농도 → 중앙 수치 색 동조 */
.device-grid.cards-new .nc-dial:has(.level-off) .nc-o2{ color:#9aa7b6; }
.device-grid.cards-new .nc-dial:has(.level-low) .nc-o2{ color:var(--nc-red); }

/* ── 메타: 타이머 / 예약 ── */
.device-grid.cards-new .nc-meta{ display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:17px; }
.device-grid.cards-new .nc-meta-mt{ font-size:11.5px; color:#aab6c4; }
.device-grid.cards-new .device-time-info{ font-size:11.5px; font-weight:500; font-variant-numeric:tabular-nums; white-space:nowrap; }
.device-grid.cards-new .device-time-info .time-value{ color:var(--nc-ink); font-weight:700; }
.device-grid.cards-new .device-time-info.is-remaining .time-label{ color:var(--nc-blue); }
.device-grid.cards-new .device-time-info.is-timer .time-label{ color:#99a1af; }
.device-grid.cards-new .device-time-info.is-short .time-value{ color:var(--nc-red); }
.device-grid.cards-new .device-reservation-badge{ display:inline-flex; align-items:center; gap:4px; font-size:11.5px; font-weight:600; color:var(--nc-blue); white-space:nowrap; }
.device-grid.cards-new .device-reservation-badge .badge-dot{ width:6px; height:6px; border-radius:50%; background:var(--nc-blue); }
.device-grid.cards-new .device-reservation-badge.is-manual{ color:#d97706; }
.device-grid.cards-new .device-reservation-badge.is-manual .badge-dot{ background:#d97706; }

/* ── 제어: 두 토글(산소 / LED) ── */
.device-grid.cards-new .nc-ctrls{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:1px; }
.device-grid.cards-new .nc-ctrl{ display:flex; flex-direction:column; align-items:center; gap:2px; padding:8px 6px; border-radius:12px; border:1.5px solid var(--nc-line); background:var(--nc-soft); cursor:pointer; transition:all .14s ease; }
.device-grid.cards-new .nc-ctrl-k{ font-size:11px; font-weight:600; color:var(--nc-mut); }
.device-grid.cards-new .nc-ctrl-v{ font-size:13px; font-weight:800; color:#9aa7b6; letter-spacing:.03em; }
.device-grid.cards-new .nc-ctrl--o2.is-on{ background:var(--nc-blue); border-color:var(--nc-blue); }
.device-grid.cards-new .nc-ctrl--led.is-on{ background:var(--nc-led); border-color:var(--nc-led); }
.device-grid.cards-new .nc-ctrl.is-on .nc-ctrl-k, .device-grid.cards-new .nc-ctrl.is-on .nc-ctrl-v{ color:#fff; }
.device-grid.cards-new .nc-ctrl:hover:not(:disabled){ border-color:var(--nc-blue); }
.device-grid.cards-new .nc-ctrl.is-on:hover:not(:disabled){ filter:brightness(1.05); }
.device-grid.cards-new .nc-ctrl:disabled{ opacity:.5; cursor:not-allowed; }

/* 오버레이(제어중/연결실패)는 기존 device-card.css 스타일 그대로 사용 */

/* ============================================================
   토폴로지 실외기 카드 헤더 "그래프 아이콘" (그래프 연결) — Before/New 공통
   ============================================================ */
.topo-root .unit-idwrap{ display:inline-flex; align-items:center; gap:8px; min-width:0; }
.topo-root .unit-graph-btn{ width:27px; height:24px; border:1px solid #d7e2f0; border-radius:7px; background:#f2f7ff; color:#1070dd; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; font-size:12px; padding:0; flex-shrink:0; transition:all .14s ease; }
.topo-root .unit-graph-btn:hover{ background:#1070dd; color:#fff; border-color:#1070dd; }
.topo-root .unit-graph-btn i{ pointer-events:none; }

@media (prefers-reduced-motion:reduce){
  .device-grid.cards-new .device-card{ transition:none; }
  .device-grid.cards-new .device-card:hover{ transform:none; }
  .device-grid.cards-new .nc-ring-fg{ transition:none; }
}