/* /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:10px var(--container-pad)} .header{ display:flex; align-items:flex-end; justify-content:space-between; gap:10px; margin-bottom:8px; } .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:var(--font-kpi-label, 0.82rem); color:var(--muted); letter-spacing:0.06em; font-weight:800} .kpiBig .unit{font-size:var(--font-kpi-label, 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: var(--font-card-title, 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{ /* 지도(.map)와 동일한 높이 규칙을 적용하여 차트가 지도를 절대 초과하지 않도록 고정 */ position: relative; width:100%; height: clamp(420px, 46vh, 980px); max-width:100%; min-width:0; /* 기간 버튼 + 캔버스를 고정 높이 내부에서만 배치 */ display:grid; grid-template-rows: auto minmax(0, 1fr); gap:10px; /* 무한확장/overflow 방지 */ overflow:hidden; } @media (max-width: 1100px){ .chartCanvasWrap{ height: 360px; } } .chartCanvasBox{ position:relative; height:100%; min-height:0; /* grid 1fr 영역에서 overflow 방지 */ } .chartCanvasBox canvas{ display:block; 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: 6px; padding-bottom: 6px; } 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} /* ========================================================= Added (AI + Map + Device page) ========================================================= */ .grid2{display:grid; grid-template-columns: 1.35fr 1fr; gap:14px; align-items:start;} .stack{display:flex; flex-direction:column; gap:14px;} .mapWrap{padding:0 12px 12px;} .map{width:100%; height:clamp(420px, 46vh, 980px); border-radius:14px; border:1px solid var(--line); background:var(--card2);} @media (max-width: 1100px){ .grid2{grid-template-columns:1fr;} .map{height:360px;} } /* index.html: 2K/4K 전체화면에서 세로 공간을 최대 활용 (스크롤 최소화) */ body.page-dashboard .grid2{align-items:stretch; min-height:0;} body.page-dashboard .grid2 > .stack{min-height:0;} body.page-dashboard .grid2 > .stack > .card{flex:1 1 0; min-height:0; display:flex; flex-direction:column;} body.page-dashboard .deviceSummary{flex:0 0 auto;} body.page-dashboard .deviceList{flex:1 1 auto; overflow:auto; max-height:none;} body.page-dashboard .aiCards{flex:1 1 auto; overflow:auto; max-height:none;} body.page-dashboard .mapWrap{flex:1 1 auto; min-height:0;} body.page-dashboard .map{height:100%; min-height:clamp(520px, 55vh, 1100px);} .badgeLegend{display:inline-flex; align-items:center; gap:6px; font-size:0.82rem; color:var(--muted);} .badgeLegend .dot{width:10px; height:10px; border-radius:999px; display:inline-block;} .dot.grade-good{background:#10b981;} .dot.grade-warn{background:#fbbf24;} .dot.grade-crit{background:#ef4444;} .dot.grade-unk{background:#9ca3af;} .deviceList{padding:8px;} .deviceRow{ display:flex; justify-content:space-between; gap:10px; padding:12px 12px; border-radius:12px; border:1px solid var(--line); background:var(--card2); margin:8px; } .deviceRow:hover{filter:brightness(1.02);} .deviceRow .name{font-weight:800;} .deviceRow .right{display:flex; flex-direction:column; align-items:flex-end; gap:6px;} .small{font-size:0.78rem;} .aiCards{padding:8px; display:grid; grid-template-columns: 1fr; gap:12px;} .aiCard{ border:1px solid var(--line); border-radius:14px; background:var(--card2); padding:12px; } .aiHead{display:flex; justify-content:space-between; gap:10px; align-items:flex-start;} .aiTitle{font-weight:900;} .aiSub{font-size:0.82rem;} .aiGrid{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:10px;} .kv{display:flex; flex-direction:column; gap:4px;} .kv .k{font-size:0.78rem; color:var(--muted);} .kv .v{font-size:0.92rem;} .aiActions{margin-top:10px; display:flex; justify-content:flex-end;} .gradePill{ display:inline-flex; align-items:center; justify-content:center; padding:6px 10px; border-radius:999px; font-weight:800; font-size:0.82rem; border:1px solid rgba(0,0,0,.06); } html[data-theme="dark"] .gradePill{border-color: rgba(255,255,255,.08);} .grade-good{background:rgba(16,185,129,.16); color:#065f46;} .grade-warn{background:rgba(251,191,36,.18); color:#92400e;} .grade-crit{background:rgba(239,68,68,.18); color:#7f1d1d;} .grade-unk{background:rgba(156,163,175,.18); color:#374151;} html[data-theme="dark"] .grade-good{color:#a7f3d0;} html[data-theme="dark"] .grade-warn{color:#fde68a;} html[data-theme="dark"] .grade-crit{color:#fecaca;} html[data-theme="dark"] .grade-unk{color:#e5e7eb;} .pill{ display:inline-flex; align-items:center; padding:6px 10px; border-radius:999px; background:rgba(99,102,241,.12); color:var(--text); font-weight:700; font-size:0.82rem; border:1px solid rgba(0,0,0,.06); } html[data-theme="dark"] .pill{border-color: rgba(255,255,255,.08);} .simPanel{ margin:0 14px 14px; padding:12px; border-radius:14px; border:1px dashed rgba(148,163,184,.6); background:rgba(148,163,184,.10); } /* Google Maps InfoWindow readability (dark text, good contrast) */ .mapInfo{color:#111827; font-weight:600; line-height:1.25;} .mapInfo .h{font-weight:900; font-size:1.05rem; margin-bottom:2px;} .mapInfo .s{font-weight:800; font-size:0.85rem; color:#374151;} .mapInfo .muted{color:#374151 !important;} .mapInfo .pillRow{display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-top:8px;} .gm-style .gm-style-iw-d{overflow:hidden !important;} .gm-style .gm-style-iw{ padding:10px 12px !important; border-radius:14px !important; } html[data-theme="dark"] .gm-style .gm-style-iw{background:#ffffff !important;} html[data-theme="dark"] .gm-style .gm-style-iw-d{color:#111827 !important;} .simTitle{font-weight:900; margin-bottom:10px;} .simGrid{display:grid; grid-template-columns: 1.2fr 1fr 1fr 1fr; gap:10px;} .simGrid .field{min-width:0;} .simGrid label{font-size:0.75rem; color:var(--muted); display:block; margin-bottom:6px;} .simGrid input[type="range"]{width:100%;} .simGrid .actions{display:flex; gap:8px; align-items:flex-end;} .simNote{margin-top:8px; font-size:var(--font-index-sim-text, 0.78rem);} @media (max-width: 1100px){ .simGrid{grid-template-columns:1fr 1fr;} } /* Modal */ .modal{position:fixed; inset:0; display:none; z-index:9999;} .modal.open{display:block;} .modalBack{position:absolute; inset:0; background:rgba(0,0,0,.5);} .modalPanel{ position:relative; width:min(980px, calc(100% - 24px)); max-height:calc(100% - 24px); margin:12px auto; background:var(--card); border:1px solid var(--line); border-radius:16px; box-shadow: var(--shadow); overflow:hidden; } .modalHead{display:flex; justify-content:space-between; gap:10px; align-items:flex-start; padding:12px 14px; border-bottom:1px solid var(--line);} .modalTitle{font-weight:900;} .modalSub{font-size:0.82rem; color:var(--muted); margin-top:2px;} .modalClose{border:0; background:transparent; font-size:1.3rem; cursor:pointer; color:var(--muted);} .modalBody{padding:14px; overflow:auto; max-height:calc(100vh - 150px);} .aiSummaryInner{padding:14px;} .aiBadges{display:flex; flex-wrap:wrap; gap:8px; align-items:center;} .aiBrief{margin-top:10px; padding:12px; border-radius:12px; border:1px solid var(--line); background:var(--card2); line-height:1.4;} .aiDetailTop{margin-bottom:10px;} .aiSection{margin-top:12px; border:1px solid var(--line); border-radius:14px; overflow:hidden;} .aiSectionTitle{padding:10px 12px; font-weight:900; border-bottom:1px solid var(--line); background:var(--card2);} .aiSectionBody{margin:0; padding:12px; white-space:pre-wrap;} .jsonBox{margin-top:12px; border:1px solid var(--line); border-radius:14px; padding:10px; background:var(--card2);} .jsonBox pre{margin:10px 0 0; white-space:pre; overflow:auto;} /* ====== Summary cards (index) ====== */ .topSummary{ display:grid; grid-template-columns: repeat(2, minmax(220px, 1fr)); gap:12px; margin:12px 0 14px; } .summaryCard{ background:var(--card); border:1px solid var(--line); border-radius:14px; padding:14px 16px; box-shadow:0 8px 20px rgba(0,0,0,.04); display:flex; align-items:flex-end; justify-content:space-between; min-height:78px; } .summaryCard .label{color:var(--muted); font-size:var(--font-card-title, calc(0.95rem * var(--ui-scale)));} .summaryCard .value{font-size:var(--font-card-value, calc(2.1rem * var(--ui-scale))); font-weight:800; letter-spacing:-0.02em;} .summaryCard .value .sub{margin-left:10px; font-size:calc(0.95rem * var(--ui-scale)); color:var(--muted); font-weight:600;} /* ====== Device list summary ====== */ .deviceSummary{ padding:10px 8px 6px; display:grid; grid-template-columns: repeat(2, minmax(160px, 1fr)); gap:10px; } .deviceSummary .miniCard{ border:1px solid var(--line); border-radius:12px; padding:10px 12px; background:rgba(0,0,0,.02); display:flex; justify-content:space-between; align-items:flex-end; } .page-dashboard.dark .deviceSummary .miniCard{ background:rgba(255,255,255,.06); } .deviceSummary .miniCard .k{ color:var(--muted); font-size:calc(0.9rem * var(--ui-scale)); } .deviceSummary .miniCard .v{ font-size:calc(1.45rem * var(--ui-scale)); font-weight:800; } /* ====== Device row enhancements ====== */ .deviceRow .icon{ width:38px; height:38px; border-radius:12px; border:1px solid var(--line); display:flex; align-items:center; justify-content:center; background:rgba(37,99,235,.08); margin-right:12px; flex:0 0 auto; } .page-dashboard.dark .deviceRow .icon{ background:rgba(96,165,250,.14); } .deviceRow .left{ display:flex; align-items:center; } .deviceRow .left .txt{ display:flex; flex-direction:column; gap:2px; } .deviceRow .left .name{ font-weight:800; } .deviceRow .left .meta{ font-size:calc(0.82rem * var(--ui-scale)); } /* ====== device.html layout (Map | Chart) + full-width list ====== */ .page-device .deviceTopGrid{ grid-template-columns: 1fr 1fr; } .page-device .aiMini{ display:flex; flex-direction:column; align-items:flex-end; margin-right:10px; line-height:1.1; } .page-device .aiMiniTitle{ font-size:calc(0.85rem * var(--ui-scale)); color:var(--muted); } .page-device .aiMiniMeta{ font-size:calc(0.95rem * var(--ui-scale)); font-weight:700; } .page-device .aiMapCombo{ padding:12px; } .page-device .dividerLine{ height:1px; background:var(--line); margin:12px 0; opacity:.9; } /* List toggle button */ .iconBtn{ border:1px solid var(--line); background:transparent; border-radius:10px; padding:8px 10px; cursor:pointer; font-size:calc(1rem * var(--ui-scale)); line-height:1; } .iconBtn[aria-pressed="false"]{ opacity:.6; } .rawListBody{ overflow:hidden; } .rawListBody.is-hidden{ max-height:0; opacity:0; transform:translateY(-4px); transition:max-height .22s ease, opacity .18s ease, transform .18s ease; } .rawListBody.is-shown{ max-height:2000px; opacity:1; transform:translateY(0); transition:max-height .28s ease, opacity .22s ease, transform .22s ease; } /* Period buttons (CSS 중심) */ .chart-period-buttons{ display:flex; flex-wrap:wrap; gap:8px; padding:10px 12px 0; } .period-btn{ border:1px solid var(--line); background:transparent; color:var(--text); border-radius:999px; padding:8px 12px; font-weight:700; font-size:calc(0.92rem * var(--ui-scale)); cursor:pointer; opacity:.55; transition:opacity .15s ease, transform .15s ease, box-shadow .15s ease; } .period-btn:hover{ opacity:.85; transform:translateY(-1px); } .period-btn.active{ opacity:1; border-color:rgba(37,99,235,.55); box-shadow:0 8px 18px rgba(37,99,235,.18); } .page-dashboard.dark .period-btn.active, .page-device.dark .period-btn.active{ border-color:rgba(96,165,250,.6); box-shadow:0 8px 18px rgba(96,165,250,.18); } /* --- Google Map Marker Pulse (custom icon via JS scale animation fallback) --- */ @keyframes ns40Pulse { 0%{transform:scale(1);} 50%{transform:scale(1.12);} 100%{transform:scale(1);} } /* Raw list toggle button (ON/OFF) */ .togglePill{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border-radius:999px;border:1px solid var(--line);background:var(--card);font-weight:800;cursor:pointer;user-select:none;} .togglePill .dot{width:10px;height:10px;border-radius:999px;background:var(--ok);box-shadow:0 0 0 0 rgba(16,185,129,.35);} .togglePill[aria-pressed="false"] .dot{background:var(--off);box-shadow:none;} .togglePill .txt{font-size:0.85rem;color:var(--text);} /* AI human-readable blocks */ .aiPara{padding:10px 12px;line-height:1.55;color:var(--text);} .aiList{margin:8px 0 0 18px;padding:0;color:var(--text);line-height:1.55;} .aiList li{margin:6px 0;} .aiSectionBodyHuman{padding:8px 2px;} /* ===== Font Config (expanded) ===== */ .topbar .brand .title{font-size:var(--font-index-title, 1.25rem); font-weight:900; padding:0; border:0;} .topbar .brand .subtitle{font-size:var(--font-index-subtitle, 0.90rem); padding:0; border:0; color:var(--muted);} .table thead th{font-size:var(--font-list-header, inherit);} .table{font-size:var(--font-list-value, 0.95rem);} /* DEVICE page specifics */ .page-device .topbar .brand .title{font-size:var(--font-device-title, 1.20rem);} .page-device .kpiBig .label{font-size:var(--font-device-kpi-label, var(--font-kpi-label, 0.82rem));} .aiSectionTitle{font-size:var(--font-ai-title, 1.00rem);} .aiSectionBody{font-size:var(--font-ai-body, 0.95rem);} /* 최근 데이터 리스트(원본DB) - device.html */ .page-device .table thead th{font-size:var(--font-device-list-header, var(--font-list-header, inherit));} .page-device .table{font-size:var(--font-device-list-value, var(--font-list-value, 0.95rem));} /* [FONT CONFIG - INDEX 확장 적용] */ #deviceListTitle{font-size:var(--font-index-device-list-title, var(--font-card-title, inherit));} .deviceList .deviceRow .name{font-size:var(--font-index-device-name, inherit);} #aiSummaryTitle{font-size:var(--font-index-ai-summary-title, var(--font-card-title, inherit));} #aiCards{font-size:var(--font-index-ai-summary-text, inherit);} #simTitle{font-size:var(--font-index-sim-title, inherit);} /* ------------------------------------------------------------------ Font config fixes (Index page only) - Ensure AI summary key/value text and Simulation control labels inherit the configured CSS variables from /inc/font_config.html - Scoped to body.page-dashboard to avoid impacting other pages -------------------------------------------------------------------*/ body.page-dashboard #aiCards .kv .k, body.page-dashboard #aiCards .kv .v{ font-size:1em; /* inherit from #aiCards (var(--font-index-ai-summary-text)) */ } body.page-dashboard .simPanel{ font-size:var(--font-index-sim-text, inherit); } body.page-dashboard .simPanel .simGrid{ font-size:inherit; } body.page-dashboard .simPanel .simGrid label{ font-size:1em; /* inherit from .simPanel (var(--font-index-sim-text)) */ } /* ========================================================= KMA Weather Layer (Map Overlay) - glass effect card + toggle button ========================================================= */ .kmaWeatherToggle{ display:flex; align-items:center; gap:8px; padding:10px 12px; border-radius:999px; border:1px solid rgba(0,0,0,.10); box-shadow: var(--shadow); background: rgba(255,255,255,.72); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: var(--text); font-size:0.9rem; user-select:none; margin:12px; } html[data-theme="dark"] .kmaWeatherToggle{ border-color: rgba(255,255,255,.12); background: rgba(17,24,39,.62); } .kmaWeatherToggle input{ width:18px; height:18px; accent-color: var(--brand); } .kmaWeatherCard{ min-width: 220px; max-width: min(320px, 88vw); padding:12px 14px; border-radius:16px; border:1px solid rgba(0,0,0,.10); box-shadow: var(--shadow); background: rgba(255,255,255,.72); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); color: var(--text); margin:12px; } html[data-theme="dark"] .kmaWeatherCard{ border-color: rgba(255,255,255,.12); background: rgba(17,24,39,.62); } .kmaWeatherCard .kmaTitle{ display:flex; align-items:center; justify-content:space-between; gap:10px; font-weight:800; letter-spacing:-0.01em; margin-bottom:8px; font-size:0.95rem; } .kmaWeatherCard .kmaGrid{ display:grid; grid-template-columns: 1fr 1fr; gap:10px 14px; } .kmaWeatherCard .kmaItem{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:8px 10px; border-radius:12px; background: rgba(255,255,255,.45); border:1px solid rgba(0,0,0,.06); } html[data-theme="dark"] .kmaWeatherCard .kmaItem{ background: rgba(15,23,42,.55); border-color: rgba(255,255,255,.08); } .kmaWeatherCard .kmaItem .kmaLabel{ color: var(--muted); font-size:0.82rem; } .kmaWeatherCard .kmaItem .kmaValue{ font-weight:900; font-size:0.95rem; } .kmaWeatherCard .kmaFoot{ margin-top:8px; color: var(--muted); font-size:0.78rem; } /* small screens */ @media (max-width: 520px){ .kmaWeatherCard{ min-width: 180px; padding:10px 12px; } .kmaWeatherToggle{ padding:8px 10px; } .kmaWeatherCard .kmaGrid{ grid-template-columns: 1fr; } } /* Prevent KMA weather label wrapping (fix wind speed line break) */ .kmaWeatherCard .kmaItem .kmaLabel{ white-space: nowrap; } /* ========================================================= FIX: device.html Map | Chart equal height sync (no JS, no vh) - Map rendered height is the baseline (mapWrap height) - Chart area and canvas never exceed map height ========================================================= */ body.page-device .deviceTopGrid{ align-items:stretch; /* grid items same row height */ } body.page-device .deviceTopGrid > .card{ height:100%; min-height:0; display:flex; flex-direction:column; } /* Map card: let mapWrap define the rendered height (baseline) */ body.page-device .aiMapCombo{ flex:1 1 auto; min-height:0; display:flex; flex-direction:column; } body.page-device .aiSummary{ flex:0 0 auto; } body.page-device .mapWrap{ flex:1 1 auto; min-height:0; /* baseline height: responsive to screen width (no vh) */ height: clamp(420px, calc(320px + 12vw), 980px); padding:0 12px 12px; } body.page-device .mapWrap .map{ width:100%; height:100%; max-height:100%; min-height:0; } /* Chart card: fill remaining height but never exceed map baseline */ body.page-device .chartCanvasWrap{ flex:1 1 auto; min-height:0; height:100%; max-height:100%; overflow:hidden; display:flex; flex-direction:column; padding-bottom:0; } body.page-device .chartCanvasWrap .chart-period-buttons{ flex:0 0 auto; margin-bottom:8px; } body.page-device .chartCanvasWrap canvas{ flex:1 1 auto; min-height:0; height:100% !important; max-height:100% !important; width:100% !important; display:block; } /* Remove any accidental extra spacing under the chart on device page */ body.page-device .deviceTopGrid .card{ margin-bottom:0; } /* ================= Advanced Weather Overlay Panel (ADD-ON) ================= */ .mapWrap{position:relative;} .weatherAdvPanel{ position:absolute; top:14px; left:14px; z-index:5; width:min(360px, calc(100% - 28px)); background:rgba(20,22,28,0.78); border:1px solid rgba(255,255,255,0.18); backdrop-filter: blur(10px); border-radius:14px; padding:10px 12px; color:#fff; } body.light .weatherAdvPanel{ background:rgba(255,255,255,0.82); border:1px solid rgba(0,0,0,0.10); color:#111; } .weatherAdvPanel .wapHeader{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:6px;} .weatherAdvPanel .wapTitle{font-weight:800; font-size:14px; letter-spacing:-0.2px;} .weatherAdvPanel .wapStatus{font-size:12px; opacity:0.85; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:55%;} .weatherAdvPanel .wapToggles{display:grid; grid-template-columns:1fr 1fr; gap:6px; margin:6px 0 10px;} .weatherAdvPanel .wapToggle{display:flex; align-items:center; gap:8px; font-size:13px; user-select:none;} .weatherAdvPanel input[type="checkbox"]{transform: translateY(1px);} .weatherAdvPanel .wapTimeRow{display:flex; align-items:center; gap:10px;} .weatherAdvPanel .wapBtn{ width:34px; height:34px; border-radius:10px; border:1px solid rgba(255,255,255,0.22); background:rgba(0,0,0,0.15); color:inherit; cursor:pointer; } body.light .weatherAdvPanel .wapBtn{ border:1px solid rgba(0,0,0,0.10); background:rgba(255,255,255,0.6); } .weatherAdvPanel #wapSlider{flex:1; min-width:120px;} .weatherAdvPanel .wapTs{font-variant-numeric: tabular-nums; font-size:12px; min-width:64px; text-align:right; opacity:0.92;} .weatherAdvPanel .wapSubRow{display:flex; align-items:center; justify-content:space-between; margin-top:6px;} .weatherAdvPanel .wapHint{font-size:11px; opacity:0.8;}