/* /dashboard/css/dashboard.css */ :root{ /* UI 스케일 조절(4K 대응) - 1.00 : 기본(FHD) - 1.15~1.35 : 4K 전체화면에서 글자 크게 */ --ui-scale: 1.20; /* 컨테이너 좌우 여백(px). 4K에서 더 넓게/좁게 조절 */ --container-pad: 12px; --bg:#f5f7fb; --card:#ffffff; --text:#1f2937; --muted:#6b7280; --line:#e5e7eb; --brand:#2563eb; --ok:#10b981; --warn:#ef4444; --off:#9ca3af; } *{box-sizing:border-box} html{font-size:calc(16px * var(--ui-scale));} body{ margin:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif; background:var(--bg); color:var(--text); } a{color:var(--brand); text-decoration:none} a:hover{text-decoration:underline} .container{max-width:none; width:100%; margin:0 auto; padding:18px var(--container-pad)} .header{ display:flex; align-items:flex-end; justify-content:space-between; gap:12px; margin-bottom:14px; } .header h1{margin:0; font-size:1.5rem} .header .sub{color:var(--muted); margin-top:4px; font-size:0.8125rem} .header .right{ display:flex; align-items:center; gap:10px; color:var(--muted); font-size:0.8125rem; /* Theme helpers */ --card2: #fafafa; --input-bg: #ffffff; --btn-bg: #ffffff; --btn-hover: #f1f5f9; --notice-bg: #fffbeb; --notice-border: #fde68a; --notice-text: #92400e; --shadow: 0 10px 28px rgba(17,24,39,.10); } /* Dark mode: set */ html[data-theme="dark"]{ --bg:#0b1220; --card:#111827; --card2:#0f172a; --text:#e5e7eb; --muted:#9ca3af; --line:#1f2937; --brand:#60a5fa; --good:#34d399; --warn:#fbbf24; --danger:#f87171; --off:#6b7280; --input-bg:#0f172a; --btn-bg:#0f172a; --btn-hover:#111827; --notice-bg: rgba(251,191,36,.12); --notice-border: rgba(251,191,36,.28); --notice-text:#fcd34d; --shadow: 0 12px 34px rgba(0,0,0,.35); } .badge{ display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:999px; background:#eef2ff; color:#3730a3; } .card{ background:var(--card); border:1px solid var(--line); border-radius:14px; box-shadow:0 8px 20px rgba(0,0,0,.04); } .card .title{ padding:12px 14px; border-bottom:1px solid var(--line); font-weight:700; } .card .content{padding:14px} .filters{ display:flex; flex-wrap:wrap; gap:10px; padding:12px 14px; } .filters label{font-size:0.75rem; color:var(--muted); display:block; margin-bottom:6px} .filters .field{min-width:170px} .filters input,.filters select{ width:100%; padding:9px 10px; border:1px solid var(--line); border-radius:10px; background:var(--input-bg); } .btn{ padding:10px 14px; border:1px solid var(--line); border-radius:10px; background:var(--btn-bg); cursor:pointer; font-weight:600; } .btn.primary{ background:var(--brand); color:#fff; border-color:var(--brand); } .btn:active{transform:translateY(1px)} .kpis{ display:grid; grid-template-columns: repeat(4, minmax(160px, 1fr)); gap:10px; margin:12px 0 14px; } .kpi{ padding:12px 14px; display:flex; flex-direction:column; gap:6px; } .kpi .label{font-size:0.75rem; color:var(--muted)} .kpi .value{font-size:1.25rem; font-weight:800} .grid2{ display:grid; grid-template-columns: 1fr 1fr; gap:12px; align-items:start; } @media (max-width: 1100px){ .kpis{grid-template-columns: repeat(2, minmax(160px, 1fr))} .grid2{grid-template-columns:1fr} } #map{width:100%; height:800px; border-radius:12px} /* ================================ Main page only: Map/Latest card height match - 오른쪽(최근 센서 데이터) 높이에 맞춰 좌측 지도 카드가 늘어나도록 처리 - device.html(page-device)에는 영향 없음 ================================ */ body.page-main .grid2{ align-items: stretch; } body.page-main .grid2 > .card{ display:flex; flex-direction:column; } body.page-main .grid2 > .card > .content{ flex:1; display:flex; flex-direction:column; } body.page-main #map{ flex:1; height:auto; min-height:800px; } .latest-wrap{ display:grid; grid-template-columns: repeat(3, 1fr); gap:10px; } .latest-item{ border:1px solid var(--line); border-radius:12px; padding:10px; background:#fafafa; } .latest-item .k{font-size:0.75rem; color:var(--muted)} .latest-item .v{font-size:1rem; font-weight:800; margin-top:4px} .status-dot{width:10px; height:10px; border-radius:999px; display:inline-block} .dot-ok{background:var(--ok)} .dot-warn{background:var(--warn)} .dot-off{background:var(--off)} .chartbox{height:280px} .small{font-size:0.75rem; color:var(--muted)} .table-wrap{padding:14px} .table-wrap table{width:100%} .img-panel{ display:flex; gap:12px; align-items:flex-start; flex-wrap:wrap; } .img-panel img{ width:520px; max-width:100%; border-radius:12px; border:1px solid var(--line); background:var(--card); } .thumb-list{ display:flex; flex-direction:column; gap:8px; } .thumb-list img{ width:140px; height:90px; object-fit:cover; border-radius:10px; border:1px solid var(--line); cursor:pointer; } .notice{ padding:10px 14px; background:var(--notice-bg); border:1px solid var(--notice-border); border-radius:12px; color:var(--notice-text); font-size:0.8125rem; } /* ================================ 공통 데이터 테이블 스타일 (메인 / 상세 페이지 공용) ================================ */ .data-table { width: 100%; border-collapse: separate; border-spacing: 0; /* font-size: 13px; */ font-size: 1rem; /* ← ui-scale 자동 반영 */ background:var(--card); border-radius: 10px; overflow: hidden; box-shadow: 0 4px 12px rgba(0,0,0,0.06); } /* 헤더 */ .data-table thead th { background: #f1f5f9; color: #1f2937; font-weight: 600; padding: 10px 12px; text-align: center; border-bottom: 2px solid #e5e7eb; white-space: nowrap; } /* 본문 셀 */ .data-table tbody td { padding: 9px 12px; text-align: center; border-bottom: 1px solid #e5e7eb; color: #374151; white-space: nowrap; } /* 줄무늬 (zebra) */ .data-table tbody tr:nth-child(even) { background-color: #f9fafb; } /* hover 효과 */ .data-table tbody tr:hover { background-color: #e0f2fe; transition: background-color 0.15s ease-in-out; } /* 마지막 줄 border 제거 */ .data-table tbody tr:last-child td { border-bottom: none; } /* ================================ Live Dashboard Add-ons - 미니 라이브 차트 / 상태 스트림 ==================================*/ .mini-chart-wrap{ margin-top:12px; padding-top:10px; border-top:1px solid var(--line); } .mini-chart-title{ font-size:1rem; font-weight:700; margin-bottom:6px; display:flex; gap:8px; align-items:baseline; } #miniChart{ width:100%; height:140px; display:block; border:1px solid var(--line); border-radius:10px; background:var(--card); } .activity-wrap{ margin-top:12px; padding-top:10px; border-top:1px solid var(--line); } .activity-title{ font-size:1rem; font-weight:700; margin-bottom:6px; } .activity-feed{ height: 160px; overflow:auto; border:1px solid var(--line); border-radius:10px; padding:10px; background:var(--card); font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size:1rem; line-height: 1.35; } body.page-main .activity-feed{ font-size:0.85rem; } .activity-row{ display:flex; gap:10px; padding:3px 0; border-bottom:1px dashed rgba(0,0,0,0.08); } .activity-row:last-child{ border-bottom:none; } .activity-time{ opacity:0.65; white-space:nowrap; } .activity-msg{ flex:1; } .elapsed-time{ font-weight:800; } /* activity level colors */ .activity-ok{ color: var(--ok); font-weight:700; } .activity-warn{ color: var(--warn); font-weight:700; } .activity-off{ color: var(--muted); } /* ================================ DataTables 글자 크기/폼 요소도 전체 스케일 적용 ==================================*/ .dataTables_wrapper, table.dataTable, .dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_paginate { font-size: 1rem; } .dataTables_wrapper select, .dataTables_wrapper input { font-size: 1rem; padding: 6px 10px; } .mini-chart-summary { font-size: 0.95rem; font-weight: 600; color: #374151; margin-bottom: 6px; } /* device.html only */ body.device-page .map-wrap, body.device-page .sensor-wrap{height:100%;} /* ================================ Device page only ================================ */ .page-device .grid2{ align-items: stretch; } .page-device .grid2 > .card{ height: 100%; display:flex; flex-direction:column; } .page-device .grid2 > .card > .content{ flex:1; display:flex; flex-direction:column; } .page-device .map-wrap{ flex:1; min-height:320px; } .page-device #map{ width:100%; height:100%; min-height:320px; border-radius:12px; } .page-device .range-tabs{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px; } .page-device .range-btn{ border:1px solid var(--line); background:var(--btn-bg); color:#111827; padding:8px 10px; border-radius:10px; font-weight:800; cursor:pointer; } .page-device .range-btn:hover{ filter:brightness(0.98); } .page-device .range-btn.active{ background:#111827; color:#fff; border-color:#111827; } /* === Device image gallery (thumbnails) - added without changing existing styles === */ .img-gallery{ display:flex; gap:12px; align-items:flex-start; width:100%; } .img-main{ flex: 1 1 auto; min-width: 280px; } .img-main img{ width:100%; height:auto; max-height: 520px; object-fit: contain; border-radius: 10px; } .img-thumbs{ flex: 0 0 240px; display:none; gap:10px; grid-template-columns: repeat(2, minmax(0, 1fr)); } .img-thumb{ border:1px solid var(--line); background:var(--card); border-radius:10px; padding:4px; cursor:pointer; } .img-thumb img{ width:100%; height:74px; object-fit: cover; border-radius:8px; display:block; } .img-thumb.active{ outline:2px solid rgba(37,99,235,.7); border-color: rgba(37,99,235,.7); } @media (max-width: 900px){ .img-gallery{ flex-direction:column; } .img-thumbs{ flex: 1 1 auto; grid-template-columns: repeat(4, minmax(0, 1fr)); } .img-thumb img{ height:64px; } } /* ===== NS40 custom additions ===== */ .topKpis{ display:grid; grid-template-columns: repeat(6, minmax(180px, 1fr)); gap:12px; margin:12px 0 14px; } @media (max-width: 1400px){ .topKpis{grid-template-columns: repeat(4, minmax(160px, 1fr));} } .kpiBig{ padding:14px 16px; display:flex; flex-direction:column; gap:6px; min-height:96px; position:relative; } .kpiBig .labelRow{display:flex; align-items:baseline; justify-content:space-between; gap:10px;} .kpiBig .label{font-size:0.82rem; color:var(--muted); letter-spacing:0.06em; font-weight:800} .kpiBig .unit{font-size:0.78rem; color:var(--muted); font-weight:700} .kpiBig .value{font-size:var(--font-kpi-value, 2.0rem); font-weight:900; line-height:1;} .kpiBig .sub{font-size:0.78rem; color:var(--muted)} .kpiBig .flag{ position:absolute; right:12px; top:12px; padding:4px 8px; border-radius:999px; font-size:0.72rem; font-weight:900; border:1px solid var(--line); background:var(--card); } .kpiBig.ok .flag{color:var(--muted);} .kpiBig.warn{border:2px solid rgba(245, 158, 11, .65);} .kpiBig.warn .flag{color:#b45309; border-color:rgba(245,158,11,.45); background:rgba(245,158,11,.08);} .kpiBig.crit{border:2px solid rgba(239, 68, 68, .75); box-shadow:0 0 0 4px rgba(239, 68, 68, .10);} .kpiBig.crit .flag{color:#b91c1c; border-color:rgba(239,68,68,.45); background:rgba(239,68,68,.08);} .kpiBig.crit .value{animation:ns40Pulse 1.05s infinite;} @keyframes ns40Pulse{ 0%{transform:scale(1);} 50%{transform:scale(1.03);} 100%{transform:scale(1);} } .rightControls{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; } /* Trendline toggle (rolling median) */ .trendToggle{ display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border:1px solid var(--line); background:var(--btn-bg); border-radius:999px; cursor:pointer; user-select:none; font-weight:900; } .trendToggle input{position:absolute; opacity:0; pointer-events:none;} .trendTrack{ width:38px; height:20px; border-radius:999px; background:var(--line); position:relative; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); } .trendTrack::after{ content:""; width:16px; height:16px; border-radius:999px; background:var(--text); position:absolute; top:2px; left:2px; transition:transform .16s ease, background .16s ease; } .trendLabel{font-size:0.85rem; color:var(--text);} .trendToggle input:checked + .trendTrack{background:rgba(37,99,235,.35); border-color:rgba(37,99,235,.45);} .trendToggle input:checked + .trendTrack::after{transform:translateX(18px); background:#fff;} .chipBtn{ border:1px solid var(--line); background:var(--btn-bg); color:var(--text); padding:8px 10px; border-radius:999px; font-weight:800; font-size:0.85rem; cursor:pointer; } .chipBtn.active{border-color:rgba(37,99,235,.45); background:rgba(37,99,235,.08); color:var(--brand);} .tableWrap{overflow:auto; max-height:calc(100vh - 520px);} @media (min-width: 1900px){ .tableWrap{max-height:calc(100vh - 560px);} .kpiBig .value{font-size:2.15rem;} } .clockBig{ font-size:1.05rem; font-weight:900; display:flex; align-items:center; gap:10px; } .clockDot{ width:10px; height:10px; border-radius:999px; background:var(--ok); box-shadow:0 0 0 6px rgba(34,197,94,.12); animation:dotBlink 1.0s infinite; } @keyframes dotBlink{ 0%{opacity:.35} 50%{opacity:1} 100%{opacity:.35} } .agePill{ display:inline-flex; align-items:center; gap:8px; padding:8px 10px; border-radius:999px; border:1px solid var(--line); background:var(--btn-bg); font-weight:900; } .ageBar{ width:90px; height:8px; border-radius:999px; background:var(--line); overflow:hidden; } .ageBar > i{display:block; height:100%; width:0%;} #kpiWrap.flash{filter:brightness(1.02);} /* ================================ NS40 Dashboard additions - 상단 타이틀/섹션 헤더/카드 헤더 스타일 보강 - 작은 화면에서 그래프 잘림 방지(반응형) ================================ */ .title{ font-size: calc(26px * var(--ui-scale)); font-weight: 800; letter-spacing: -0.02em; color: var(--text); line-height: 1.05; margin: 0; } .subtitle{ font-size: calc(14px * var(--ui-scale)); color: var(--muted); font-weight: 600; margin-top: 4px; } .cardHeader{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding: 12px 14px; border-bottom: 1px solid var(--line); } .cardTitle{ font-size: calc(16px * var(--ui-scale)); font-weight: 800; color: var(--text); letter-spacing: -0.01em; } .cardSub{ margin-top: 4px; font-size: calc(12px * var(--ui-scale)); color: var(--muted); font-weight: 600; } .card .content{ padding: 12px 14px; } .footer{ padding: 10px 2px; font-size: calc(12px * var(--ui-scale)); } /* KPI value + unit */ .kpiBig .valueRow{ display:flex; align-items:flex-end; gap:8px; } .kpiBig .value{ font-size: calc(34px * var(--ui-scale)); font-weight: 900; letter-spacing: -0.03em; line-height: 1.0; } .kpiBig .valueUnit{ font-size: calc(16px * var(--ui-scale)); font-weight: 700; color: rgba(107,114,128,0.85); transform: translateY(-2px); } /* grid2: 작은 화면에서 자동 줄바꿈/축소 */ .grid2{ display:grid; grid-template-columns: 1.2fr 1fr; gap: 12px; align-items: stretch; } @media (max-width: 1500px){ .grid2{ grid-template-columns: 1fr; } } /* Chart responsiveness */ .chartBox{ width:100%; max-width:100%; min-width:0; overflow:hidden; } .chartCanvasWrap{ position: relative; width:100%; height: 420px; max-width:100%; min-width:0; } @media (min-width: 2200px){ .chartCanvasWrap{ height: 520px; } } @media (max-width: 1100px){ .chartCanvasWrap{ height: 340px; } } .chartCanvasWrap canvas{ width:100% !important; height:100% !important; } /* ================================ List Table 강화(구분선/제목 색상/가독성) ==================================*/ :root{ --tableHeadBg: rgba(11,18,32,1); --tableHeadColor: #ffffff; --tableHeadLine: rgba(255,255,255,.18); --tableRowLine: rgba(2,6,23,.14); --tableColLine: rgba(2,6,23,.10); } .table{ width:100%; border-collapse:separate; border-spacing:0; font-size:var(--font-list-value, 0.95rem); } .table thead th{ position:sticky; top:0; background:var(--tableHeadBg); color:var(--tableHeadColor); border-bottom:2px solid var(--tableHeadLine); padding:10px 10px; text-align:left; font-weight:800; } .table tbody td{ padding:10px 10px; border-bottom:1px solid var(--tableRowLine); } .table th:not(:last-child), .table td:not(:last-child){ border-right:1px solid var(--tableColLine); } .table tbody tr:hover td{ background:rgba(2,6,23,.04); } /* 새 데이터 도착 시 행 하이라이트(깜빡임 없이 부드럽게) */ @keyframes rowNewFlash{ 0%{ box-shadow: inset 0 0 0 999px rgba(59,130,246,.28); } 100%{ box-shadow: inset 0 0 0 999px rgba(59,130,246,0); } } .table tbody tr.rowNew td{ animation: rowNewFlash 1.6s ease-out 1; } .tableWrap{ border-top:1px solid rgba(2,6,23,.12); } /* Header Buttons */ .topbarBtns{ display:flex; gap:8px; justify-content:flex-end; margin-left:12px; flex-wrap:wrap; } .btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:10px 14px; border-radius:14px; border:1px solid rgba(0,0,0,.16); background:#0b1220; color:#fff; text-decoration:none; font-weight:800; cursor:pointer; } .btn:hover{ filter:brightness(1.05); } .btnSmall{ padding:8px 10px; border-radius:12px; font-size:0.92rem; } /* Slim select for list header */ .selectSlim{ padding:6px 10px; border-radius:12px; border:1px solid var(--line); background:var(--input-bg); font-weight:800; } /* Theme toggle */ .themeToggle{ display:inline-flex; gap:6px; align-items:center; } .themeToggle .seg{ display:inline-flex; border:1px solid var(--line); border-radius:999px; overflow:hidden; background:var(--btn-bg); } .themeToggle .seg button{ border:0; background:transparent; color:var(--muted); padding:6px 10px; font-size:0.85rem; cursor:pointer; } .themeToggle .seg button.active{ color:var(--text); background:var(--btn-hover); font-weight:700; } /* =============================== Dark Mode : form controls fix =============================== */ html[data-theme="dark"] input, html[data-theme="dark"] select, html[data-theme="dark"] textarea { background-color: #0f172a; /* 다크 배경 */ color: #e5e7eb; /* 텍스트 흰색 */ border: 1px solid #334155; } /* placeholder 색상 */ html[data-theme="dark"] input::placeholder { color: #94a3b8; } /* date / time picker 아이콘 */ html[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator, html[data-theme="dark"] input[type="time"]::-webkit-calendar-picker-indicator { filter: invert(1); opacity: 0.8; } /* select dropdown 옵션 */ html[data-theme="dark"] select option { background-color: #0f172a; color: #e5e7eb; } /* focus 상태 */ html[data-theme="dark"] input:focus, html[data-theme="dark"] select:focus, html[data-theme="dark"] textarea:focus { outline: none; border-color: #38bdf8; box-shadow: 0 0 0 1px rgba(56,189,248,0.6); } /* =============================== List filters (moved from top) =============================== */ .listFilters{ display:flex; gap:12px; flex-wrap:wrap; padding:12px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:rgba(255,255,255,0.02); } .listFilters .field{min-width:160px} .listFilters .field.actions{display:flex;align-items:flex-end;gap:10px;min-width:280px;flex:1} .listFilters label{display:block;margin-bottom:6px;color:var(--muted);font-size:0.85rem} .listFilters input, .listFilters select{width:100%} /* =============================== DataTables-like footer/paging =============================== */ .dtFooter{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 12px; border-top:1px solid var(--line); } .dtInfo{color:var(--muted);font-size:0.85rem} .dtPaging{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end} .dtPageBtn{ padding:6px 10px; border-radius:8px; border:1px solid var(--line); background:var(--btn-bg); color:var(--text); cursor:pointer; min-width:36px; } .dtPageBtn:hover{background:var(--btn-hover)} .dtPageBtn.active{ background:var(--brand); border-color:transparent; color:#fff; font-weight:700; } .dtPageBtn:disabled{ opacity:0.45; cursor:not-allowed; } .dtEllipsis{ display:inline-flex; align-items:center; padding:6px 10px; color:var(--muted); } @media (max-width: 860px){ .listFilters .field.actions{min-width:220px} .dtFooter{flex-direction:column;align-items:flex-start} .dtPaging{width:100%;justify-content:flex-start} } /* ================================ Page: index.html (NS40) - Vertical space optimization for 2K/4K + 150~200% scaling - Keep existing features unchanged (DB/API/JS 그대로) ==================================*/ body.page-dashboard .container{ /* allow the bottom split area to grow and consume remaining viewport height */ min-height: 100vh; display: flex; flex-direction: column; /* slightly tighter vertical padding to reduce unnecessary whitespace */ padding-top: 14px; padding-bottom: 14px; } body.page-dashboard .topbar{ margin-bottom: 10px; } body.page-dashboard .topKpis{ margin: 10px 0 12px; gap: 10px; } /* Make the bottom 2-column area fill the remaining height */ body.page-dashboard .grid2{ flex: 1 1 auto; align-items: stretch; min-height: 0; /* critical for nested overflow */ } /* Cards become flex columns so inner scrollers can expand */ body.page-dashboard .grid2 > .card{ display: flex; flex-direction: column; min-height: 0; } /* List card: table area grows; footer stays pinned */ body.page-dashboard .grid2 > .card .tableWrap{ flex: 1 1 auto; max-height: none; /* override calc(100vh - xxx) for large screens */ min-height: 220px; /* avoid collapsing on small screens */ } body.page-dashboard .grid2 > .card .dtFooter{ flex: 0 0 auto; } /* Chart card: height adapts to viewport; canvas takes the remaining space under period buttons */ body.page-dashboard .chartCanvasWrap{ height: clamp(320px, 46vh, 820px); display: flex; flex-direction: column; gap: 8px; } body.page-dashboard .chartCanvasWrap canvas{ flex: 1 1 auto; height: 100% !important; } /* ===== TEMP/HUMI 내부/외부 병렬 표시 ===== */ .kpiBig.dualIO .ioGrid{ display:grid; grid-template-columns: 1fr 1fr; gap:10px; margin-top: 2px; } .kpiBig.dualIO .ioCell{ padding:10px 10px 8px; border:1px solid var(--line); border-radius:12px; background: rgba(255,255,255,0.55); } .kpiBig.dualIO .ioHead{ display:flex; align-items:center; gap:6px; font-size: calc(12px * var(--ui-scale)); font-weight: 900; color: rgba(107,114,128,0.95); margin-bottom:6px; } .kpiBig.dualIO .ioValueRow{ display:flex; align-items:flex-end; gap:8px; } .kpiBig.dualIO .ioIn{ border-color: rgba(14,165,233,0.45); background: rgba(14,165,233,0.06); } .kpiBig.dualIO .ioOut .ioHead{ /* color: rgba(14,165,233,0.95); */ color: #0d508b; } .kpiBig.dualIO .dualSub{ margin-top:4px; display:block; } .kpiBig.dualIO .dualDt{ color: rgba(107,114,128,0.85); font-weight: 800; } /* Dark mode 대응 */ body.dark .kpiBig.dualIO .ioCell{ background: rgba(17,24,39,0.55); border-color: rgba(75,85,99,0.55); } body.dark .kpiBig.dualIO .ioHead{ color: rgba(156,163,175,0.95); } body.dark .kpiBig.dualIO .ioIn{ background: rgba(14,165,233,0.12); border-color: rgba(14,165,233,0.55); } body.dark .kpiBig.dualIO .dualDt{ color: rgba(156,163,175,0.9); } /* === KPI TEMP/HUMI internal vs external redesign === */ .kpi-temp-wrap{display:flex;gap:10px} .kpi-temp-in{flex:1;background:#1f2937;border-radius:10px;padding:10px} .kpi-temp-out{flex:1;background:#e5e7eb;border-radius:10px;padding:10px} .kpi-temp-in .label{color:#9ca3af;font-weight:600} .kpi-temp-out .label{color:#111827;font-weight:700} .kpi-temp-out .value{color:#111827;font-weight:800} /* External text contrast */ .kpiBig .ioOut .value{color:#111;font-weight:700} /* Delta row */ .deltaRow{margin-top:6px;font-size:0.9rem;color:#9CA3AE} .deltaValue{font-weight:700} /* Mobile stack */ @media(max-width:600px){ .ioGrid{display:flex;flex-direction:column;gap:8px} } /* External temp alerts */ .kpiBig.freeze .ioIn{background:#3b82f6;color:#fff} .kpiBig.heat .ioIn{background:#ef4444;color:#fff}