/* /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; } /* 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:var(--font-ui-label,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:var(--font-ui-label,0.75rem); color:var(--muted)} .kpi .value{ font-size: var(--font-kpi-value, 2.0rem); 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} } /* ============================= ✅ New main layout: 3~4 columns (Map / Latest / AI) + Snapshots - 2K/4K + 브라우저 80%에서도 '스냅샷'까지 한 화면에 들어오도록 상단 영역 높이를 제한 ============================= */ .dash-grid{ display:grid; gap:12px; align-items:stretch; /* 기본(데스크탑): 3열 + 2행(스냅샷은 하단 전체폭) */ grid-template-columns: 1.05fr 0.95fr 1.0fr; grid-template-areas: "map latest ai" "snap snap snap"; } .dash-map{ grid-area: map; } .dash-latest{ grid-area: latest; } .dash-ai{ grid-area: ai; } .dash-snap{ grid-area: snap; } /* 작은 화면: 1열로 스택 */ @media (max-width: 1200px){ .dash-grid{ grid-template-columns: 1fr; grid-template-areas: "map" "latest" "ai" "snap"; } } .title-flex{ display:flex; align-items:center; justify-content:space-between; gap:10px; } .btn.btn-xs{ padding:6px 10px; border-radius:999px; font-size:0.78rem; } /* 지도 카드: content padding 최소화 + 고정 높이 */ .map-card-content{ padding:10px; } #mapWrap{ position:relative; width:100%; height:100%; } #map{width:100%; height:100%; min-height:340px; border-radius:12px; position:relative} /* 상단 1행 높이 제한(4K/2K에서 스냅샷까지 보이게) */ body.page-main .dash-grid > .card{ display:flex; flex-direction:column; } body.page-main .dash-grid .dash-map .content{ flex:1; } body.page-main .dash-grid .dash-latest .content{ max-height:520px; overflow:auto; } body.page-main .dash-grid .dash-ai .content{ max-height:520px; overflow:auto; } /* 스냅샷은 1행보다 짧게 */ body.page-main .dash-grid .dash-snap .content{ padding-top:10px; } /* ============================= 🗺️ 지도 확대(모달) ============================= */ .map-modal{ position:fixed; inset:0; background: rgba(0,0,0,.65); display:none; z-index: 9999; } .map-modal.open{ display:flex; } .map-modal-inner{ margin:auto; width:min(1280px, calc(100% - 26px)); height:min(820px, calc(100% - 26px)); background: var(--card); border:1px solid var(--line); border-radius:16px; box-shadow: var(--shadow, 0 18px 44px rgba(0,0,0,.35)); display:flex; flex-direction:column; overflow:hidden; } .map-modal-head{ display:flex; justify-content:space-between; align-items:center; gap:10px; padding:10px 12px; border-bottom:1px solid var(--line); font-weight:800; } .map-modal-body{ flex:1; padding:10px; } .map-modal-body #map{ min-height: 100% !important; border-radius:12px; } /* ============================= Open-Meteo (Dalat) Weather Overlay Card (inside Google Map) - 진한 배경 카드박스로 온도/습도/풍속을 표시 ============================= */ .map-weather-card{ position:absolute; top:12px; left:12px; z-index: 5; min-width: 220px; max-width: 320px; padding: 12px 14px; border-radius: 14px; border: 1px solid rgba(255,255,255,0.18); background: rgba(15, 23, 42, 0.78); /* slate-900 느낌 */ color: rgba(255,255,255,0.95); box-shadow: 0 10px 24px rgba(0,0,0,0.35); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); pointer-events: auto; } .map-weather-card .w-title{ font-weight: 900; font-size: 0.95rem; letter-spacing: 0.2px; margin-bottom: 8px; } .map-weather-card .w-row{ display:flex; justify-content:space-between; gap:12px; margin: 6px 0; } .map-weather-card .w-k{ color: rgba(255,255,255,0.78); font-size: 0.80rem; } .map-weather-card .w-v{ font-weight: 800; font-size: 0.92rem; } .map-weather-card .w-sub{ margin-top: 8px; font-size: 0.72rem; color: rgba(255,255,255,0.70); } .map-weather-card .w-err{ margin-top: 8px; font-size: 0.78rem; color: #fecaca; } /* ================================ 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; } /* 메인(index.html)에서는 지도 높이를 줄여 '현장 스냅샷' UI와 함께 보이도록 */ body.page-main #map{ flex:1; height:380px; min-height:360px; } /* ============================= Google Maps Marker InfoWindow (카드박스) 가독성 개선 - 다크모드에서 기본 InfoWindow 배경(흰색) + 전역 텍스트(밝은색) 조합으로 글자가 잘 안보이는 문제를 방지 ============================= */ .gm-style .gm-style-iw-c{ background: var(--card) !important; color: var(--text) !important; border-radius: 14px !important; } .gm-style .gm-style-iw-d{ color: var(--text) !important; } .gm-style .gm-style-iw-t::after{ background: var(--card) !important; } /* 닫기(X) 버튼이 다크모드에서 흐리게 보일 수 있어 보정 */ html[data-theme="dark"] .gm-style .gm-ui-hover-effect{ filter: invert(1) hue-rotate(180deg); } .map-iw{min-width:230px; padding:10px 12px; color:var(--text); font-size:0.78rem; line-height:1.5} .map-iw-title{font-weight:800; font-size:0.9rem; margin-bottom:6px; color:var(--text)} /* ============================= Main page: Today Snapshots (index.html) - 장치별 "오늘 전송된 최신 이미지" 썸네일 갤러리 ============================= */ .today-snap-head{ display:flex; justify-content:space-between; align-items:center; gap:12px; } .today-snap-sub{ font-size: 0.80rem; color: var(--muted); } .today-snap-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; } .snap-tile{ border: 1px solid var(--border); border-radius: 14px; overflow:hidden; background: rgba(0,0,0,0.02); position:relative; } html[data-theme="dark"] .snap-tile{ background: rgba(255,255,255,0.04); } .snap-img{ width:100%; height: 140px; object-fit: cover; display:block; } .snap-meta{ padding: 10px 10px; display:flex; justify-content:space-between; align-items:center; gap:10px; } .snap-name{ font-weight: 900; font-size: 0.86rem; color: var(--text); } .snap-time{ font-size: 0.78rem; color: var(--muted); white-space:nowrap; } .snap-badge{ display:inline-block; margin-left:6px; padding:2px 6px; border-radius:999px; border:1px solid var(--border); font-size:0.70rem; color: var(--muted); background: rgba(0,0,0,0.03); } html[data-theme="dark"] .snap-badge{ background: rgba(255,255,255,0.06); } .snap-link{ text-decoration:none; color: inherit; display:block; } .snap-empty{ padding: 18px 12px; text-align:center; color: var(--muted); font-size: 0.90rem; } .map-iw-time{color:var(--muted); margin-bottom:6px} .map-iw-body{color:var(--text)} .map-iw-footer{margin-top:10px} .map-iw-link{color:var(--brand); font-weight:700} .latest-wrap{ display:grid; grid-template-columns: repeat(3, 1fr); gap:10px; } .latest-flex{ display:flex; gap:12px; align-items:flex-start; } .latest-flex .latest-wrap{ flex:1 1 auto; min-width:0; } .qr-box{ flex:0 0 260px; width:260px; display:flex; flex-direction:column; align-items:center; gap:6px; } .qr-label{ font-weight:900; font-size:.95rem; } .qr-code{ width:140px; height:140px; border:1px solid rgba(255,255,255,.15); border-radius:10px; background:#fff; display:flex; align-items:center; justify-content:center; overflow:hidden; } .qr-code img, .qr-code canvas{ width:140px !important; height:140px !important; } .qr-url-wrap{ width:100%; max-width:260px; text-align:center; } .qr-url{ display:block; font-size:.82rem; opacity:.9; word-break:break-all; line-height:1.15; } @media (max-width: 820px){ .latest-flex{flex-direction:column;} .qr-box{flex:0 0 auto; width:100%; max-width:360px; margin:0 auto;} .qr-url{word-break:break-all;} } .latest-item{ border:1px solid var(--line); border-radius:12px; padding:10px; background:var(--card); } .latest-item .k{font-size:var(--font-ui-label,0.75rem); color:var(--muted)} .latest-item .v{ font-size: var(--font-mid-value, 1.0rem); 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:var(--font-ui-label,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: var(--font-list-value,0.95rem); 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; font-size: var(--font-list-header, calc(var(--font-list-value,0.95rem) * 0.95)); 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; font-size: var(--font-list-value,0.95rem); 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:var(--font-status-title,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:var(--font-status-title,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:var(--font-status-text,0.85rem); line-height: 1.35; } body.page-main .activity-feed{ font-size:var(--font-status-text,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; } .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: 1fr 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); } .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); } /* Font scaling (via /inc/font_config.html) */ #dataTable tbody td{ font-size: var(--font-list-value, 0.95rem); } #dataTable thead th{ font-size: var(--font-list-header, calc(var(--font-list-value,0.95rem) * 0.95)); } /* ===== Dark mode fixes for device page ===== */ html[data-theme="dark"] .data-table tbody tr:nth-child(even), html[data-theme="dark"] .data-table tbody tr:nth-child(odd){ background-color: var(--card2); } html[data-theme="dark"] .data-table tbody tr:hover{ background-color: #1e293b; } html[data-theme="dark"] .page-device .range-btn{ background: var(--card2); color: var(--muted); border-color: var(--line); } html[data-theme="dark"] .page-device .range-btn.active{ background: #020617; color: #e5e7eb; } /* device.html 최근 데이터 리스트 메인페이지 스타일 통일 */ body.page-device .data-table thead th { background:#1f2933; color:#ffffff; } body.page-device .data-table tbody td { color:#ffffff; } /* ========================================================= AI Report (index.html) ========================================================= */ .ai-head{display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap;} .ai-title{display:inline-flex; align-items:center; gap:10px;} .ai-icon{display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:10px; background:rgba(37,99,235,0.10); color:var(--brand); border:1px solid rgba(37,99,235,0.18); } html[data-theme="dark"] .ai-icon{background:rgba(96,165,250,0.12); border-color:rgba(96,165,250,0.24);} .ai-badge{font-size:0.72rem; font-weight:800; letter-spacing:0.6px; padding:3px 8px; border-radius:999px; background:rgba(37,99,235,0.12); color:var(--brand); border:1px solid rgba(37,99,235,0.18); } html[data-theme="dark"] .ai-badge{background:rgba(96,165,250,0.12); border-color:rgba(96,165,250,0.24);} .ai-sub{color:var(--muted); font-size:0.82rem;} .ai-grid{display:grid; grid-template-columns:repeat(3, minmax(220px, 1fr)); gap:10px;} @media (max-width: 1100px){ .ai-grid{grid-template-columns:repeat(2, minmax(220px, 1fr));} } @media (max-width: 720px){ .ai-grid{grid-template-columns:1fr;} } .ai-item{border:1px solid var(--line); border-radius:14px; overflow:hidden; background:linear-gradient(180deg, rgba(37,99,235,0.05), rgba(37,99,235,0.01));} html[data-theme="dark"] .ai-item{background:linear-gradient(180deg, rgba(96,165,250,0.10), rgba(96,165,250,0.02));} .ai-item-head{display:flex; justify-content:space-between; align-items:flex-start; gap:10px; padding:12px 12px 10px;} .ai-item-title{display:flex; flex-direction:column; gap:3px;} .ai-device{font-weight:800; font-size:1.02rem;} .ai-meta{color:var(--muted); font-size:0.80rem;} .ai-status{display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:999px; font-weight:800; font-size:0.78rem; border:1px solid var(--line); background:var(--card); } .ai-dot{width:8px; height:8px; border-radius:50%; background:var(--off);} .ai-status.ok .ai-dot{background:var(--ok);} .ai-status.warn .ai-dot{background:var(--warn);} .ai-status.danger .ai-dot{background:var(--warn);} .ai-summary{padding:0 12px 12px; font-size:var(--font-status-text,0.85rem); color:var(--text); line-height:1.35;} .ai-actions{display:flex; gap:8px; padding:0 12px 12px;} .ai-actions button{padding:8px 12px; border-radius:10px; border:1px solid var(--brand); background:var(--brand); color:#fff; cursor:pointer; font-weight:700;} .ai-actions button:hover{filter:brightness(1.03);} .ai-details{border-top:1px dashed var(--line); padding:10px 12px 12px; display:none;} .ai-details.open{display:block;} .ai-details .ai-block-title{font-weight:800; margin:6px 0 6px; font-size:0.92rem;} .ai-details .ai-text{color:var(--text); font-size:var(--font-status-text,0.85rem); line-height:1.4;} .ai-reco{margin:6px 0 0; padding-left:18px; color:var(--text); font-size:var(--font-status-text,0.85rem);} .ai-pulse{position:relative;} .ai-pulse:after{content:""; position:absolute; inset:0; border-radius:14px; border:2px solid rgba(37,99,235,0.55); animation:aiPulse 1.2s ease-out 0s 2; pointer-events:none;} html[data-theme="dark"] .ai-pulse:after{border-color:rgba(96,165,250,0.65);} @keyframes aiPulse{0%{transform:scale(0.98); opacity:0.0;} 20%{opacity:0.9;} 100%{transform:scale(1.01); opacity:0.0;}} .ai-empty{color:var(--muted); padding:8px 2px;} /* ================================ Layout FIX v4 (2026-01-27) - page-main: remove scroll on latest KPI card, match map height - page-device: rearrange blocks (map+graph / AI / image / list) ================================ */ /* MAIN (index.html) */ @media (min-width: 1201px){ body.page-main .dash-grid .dash-map, body.page-main .dash-grid .dash-latest, body.page-main .dash-grid .dash-ai{ height: clamp(520px, 60vh, 780px); } /* remove scroll bar from latest card background block */ body.page-main .dash-grid .dash-latest .content{ max-height: none !important; overflow: visible !important; flex: 1; } /* AI card can keep internal scroll if content too long */ body.page-main .dash-grid .dash-ai .content{ max-height: none !important; overflow: auto; flex: 1; } /* map should fill full height */ body.page-main .dash-grid .dash-map .content{ flex: 1; } body.page-main .dash-grid .dash-map #mapWrap, body.page-main .dash-grid .dash-map #map{ height: 100%; min-height: 0 !important; } } /* DEVICE (device.html) new layout */ body.page-device .device-grid{ display:grid; gap:12px; grid-template-columns: 1fr 1fr; grid-template-areas: "map graph" "ai ai" "image image" "list list"; align-items: stretch; } body.page-device .device-map{ grid-area: map; } body.page-device .device-graph{ grid-area: graph; } body.page-device .device-ai{ grid-area: ai; } body.page-device .device-image{ grid-area: image; } body.page-device .device-list{ grid-area: list; } /* make cards stretch */ body.page-device .device-grid > .card{ display:flex; flex-direction:column; } body.page-device .device-grid > .card > .content{ flex:1; } /* top row heights */ @media (min-width: 1201px){ body.page-device .device-grid .device-map, body.page-device .device-grid .device-graph{ height: clamp(360px, 42vh, 520px); } body.page-device .device-grid .device-map #mapWrap, body.page-device .device-grid .device-map #map{ height: 100%; min-height: 0 !important; } } /* mobile stack */ @media (max-width: 1200px){ body.page-device .device-grid{ grid-template-columns: 1fr; grid-template-areas: "map" "graph" "ai" "image" "list"; } } /* AI report JSON box */ .jsonbox{ margin:10px 0 0; padding:10px; border-radius:10px; background: rgba(0,0,0,0.06); border: 1px solid rgba(0,0,0,0.10); max-height: 360px; overflow:auto; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 0.85rem; line-height: 1.35; white-space: pre-wrap; word-break: break-word; } body.dark .jsonbox{ background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.12); } /* === AI 분석 리포트 2단 분리(상단:농장별 / 하단:관리자) === */ .ai-split{display:flex;flex-direction:column;gap:10px} .ai-section-title{font-weight:700;margin:2px 0 6px 0;color:var(--text)} .ai-section-body{width:100%} .ai-farm-scroll{max-height:240px;overflow:auto;padding-right:4px} .ai-divider{height:1px;background:var(--line);margin:2px 0} .ai-manager-controls{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:4px 0 8px 0} .ai-manager-label{color:var(--muted);font-size:0.9em} .ai-manager-select{padding:6px 10px;border:1px solid var(--line);border-radius:10px;background:var(--card);color:var(--text)} .ai-manager-updated{color:var(--muted);font-size:0.9em;margin-left:auto} .ai-pre{max-height:240px;overflow:auto;border:1px solid var(--line);border-radius:12px;padding:10px;background:#0b1220;color:#e5e7eb;font-size:0.9em;line-height:1.35} /* === FIX: constrain miniChart inside Recent Sensor Data card === */ body.page-main .dash-grid .dash-latest { overflow: hidden; } body.page-main .dash-grid .dash-latest .content { max-height: none !important; overflow: hidden !important; } #miniChart { max-width: 100%; display: block; } /* === Device: yesterday min/max badge (온도/습도) === */ .yday-badge{ display:inline-block; margin-top:6px; padding:4px 10px; border-radius:999px; font-size:12px; font-weight:800; line-height:1.2; letter-spacing:-0.2px; border:1px solid rgba(0,0,0,0.18); box-shadow: 0 2px 8px rgba(0,0,0,0.08); } .yday-temp{ background: rgba(255, 228, 181, 0.75); } .yday-hum{ background: rgba(173, 216, 230, 0.65); } #imgDownload.disabled{ opacity:0.5; pointer-events:none; } /* ========================================================= Trendline toggle (rolling median) - ns40 스타일 이식 - device.html detailRange 내부에 label.trendToggle 삽입용 ========================================================= */ .trendToggle{ display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border:1px solid var(--line); background:var(--btn-bg, #ffffff); 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;}