/* ══════════════════════════════════════════════════════════════ COMPASS Space Monitoring — Design v3 · Grid Pulse 폰트: 시스템 폰트 스택 (Google Fonts 미사용) 모드: .dark 클래스를 에 토글 ══════════════════════════════════════════════════════════════ */ /* ── 디자인 토큰 (라이트 모드 기본) ── */ :root { --bg: #E8E9EF; --surface: #FFFFFF; --surface-2: #F5F5F8; --ink: #0B1220; --ink-2: #4B5668; --ink-3: #8B96A8; --line: #E2E8F1; --line-s: #D0DAE8; --primary: #0057E7; --primary-soft: #E8F0FF; --primary-ink: #FFFFFF; --accent: #FF8A00; --accent-soft: #FFF1E0; --good: #0FA968; --good-soft: #E6F8EF; --warn: #D97706; --warn-soft: #FFF6DD; --bad: #E4435A; --bad-soft: #FDE8EB; --shadow: 0 1px 3px rgba(15,23,42,.05), 0 8px 24px -8px rgba(15,23,42,.10); --shadow-sm: 0 1px 2px rgba(15,23,42,.04), 0 4px 12px -4px rgba(15,23,42,.07); --radius: 14px; --radius-lg: 20px; --r-pill: 999px; /* 사이드바는 항상 다크 */ --side-bg: #0F1B2D; --side-ink: rgba(255,255,255,.92); --side-muted: rgba(255,255,255,.44); --side-line: rgba(255,255,255,.09); --side-hover: rgba(255,255,255,.07); --side-active-bg: rgba(61,139,255,.2); --side-active-ink: #7BB8FF; --side-active-bar: #3D8BFF; /* HUD 유리 패널 */ --hud-bg: rgba(255,255,255,.88); --hud-blur: blur(18px); /* AI 자율제어 화면 4종(integration/autonomous-control 이식) 호환용 -- 원래 이 화면들은 지금은 삭제된 tokens.css를 공유해서 썼음. 이름을 우리 체계로 바꾸는 대신, 옛 tokens.css에 있던 값 그대로 여기 옮겨서 그 화면들의 CSS를 손 안 대고도 그대로 작동하게 함. */ --text: oklch(28% 0.055 250); --muted: oklch(56% 0.035 240); --blue: oklch(61% 0.13 255); --green: oklch(66% 0.1 160); --red: oklch(56% 0.13 30); --blue-ink: oklch(42% 0.12 255); --ease-ui: 0.18s ease; } /* ── 다크 모드 ── */ .dark { --bg: #070B14; --surface: #0D1320; --surface-2: #101828; --ink: #EAF0FB; --ink-2: #9FB0C9; --ink-3: #5E6E89; --line: #1B2536; --line-s: #232F42; --primary: #3D8BFF; --primary-soft: #0E2040; --primary-ink: #04122B; --accent: #FFA94D; --accent-soft: #2B1C0B; --good: #36D38F; --good-soft: #0D2B1E; --warn: #FFC53D; --warn-soft: #2C2108; --bad: #FF6B7E; --bad-soft: #2C1219; --shadow: 0 1px 2px rgba(0,0,0,.3), 0 12px 32px -10px rgba(0,0,0,.55); --shadow-sm: 0 1px 2px rgba(0,0,0,.25), 0 4px 16px -4px rgba(0,0,0,.4); --hud-bg: rgba(13,19,32,.88); /* AI 자율제어 화면 4종 호환용 (다크 모드) */ --text: #EAF0FB; --muted: #9FB0C9; --blue: #3D8BFF; --green: #36D38F; --red: #FF6B7E; --blue-ink: #9FC5FF; } /* ══ 리셋 & 베이스 ══ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html, body { height: 100%; overflow: hidden; } body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", sans-serif; background: var(--bg); color: var(--ink); transition: background .25s, color .25s; } button, input { font: inherit; cursor: pointer; } button { border: 0; background: transparent; } /* ══ 앱 쉘 ══ */ .app-shell { display: grid; grid-template-columns: 220px 1fr; width: 100vw; height: 100vh; } /* embed 모드 유지 */ body.embed-mode .app-shell { grid-template-columns: 1fr; } body.embed-mode .sidebar { display: none; } body.embed-mode .workspace { padding: 0; } body.embed-mode .workspace-frame { min-height: 100vh; } body.embed-mode .model-stage-shell { min-height: calc(100vh - 90px); } .file-protocol-notice { position: fixed; inset: 0; display: grid; place-items: center; padding: 24px; background: linear-gradient(160deg, #EFEFF3 0%, #E2E3EC 100%); z-index: 999; } .file-protocol-notice[hidden] { display: none !important; } .file-protocol-notice-card { width: min(760px, 100%); padding: 28px 30px; border: 1px solid var(--line-s); border-radius: 18px; background: #fff; box-shadow: 0 18px 38px rgba(15, 23, 42, .12); } .file-protocol-badge { display: inline-flex; align-items: center; justify-content: center; min-height: 28px; padding: 0 12px; border-radius: 999px; background: var(--primary-soft); color: var(--primary); font-size: 12px; font-weight: 700; } .file-protocol-notice-card h2 { margin-top: 16px; color: var(--ink); font-size: 28px; line-height: 1.3; } .file-protocol-notice-card p { margin-top: 12px; color: var(--ink-2); font-size: 15px; line-height: 1.7; } .file-protocol-links { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 22px; } .file-protocol-link { min-height: 38px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--line-s); background: var(--surface); color: var(--ink-2); font-size: 13px; font-weight: 700; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; } .file-protocol-link.is-primary { background: var(--primary); border-color: var(--primary); color: #fff; } .file-protocol-guide { margin-top: 20px; padding-left: 18px; color: var(--ink-2); font-size: 14px; line-height: 1.8; } .file-protocol-guide code, .file-protocol-notice-card code { padding: 2px 6px; border-radius: 6px; background: var(--surface-2); color: var(--ink); font-size: 13px; } body.is-file-protocol .app-shell { visibility: hidden; } /* ══ 사이드바 ══ */ .sidebar { display: flex; flex-direction: column; background: var(--side-bg); border-right: 1px solid var(--side-line); height: 100vh; overflow: hidden; } /* 브랜드 */ .brand-block { padding: 22px 18px 18px; border-bottom: 1px solid var(--side-line); flex-shrink: 0; } .brand-copy { display: grid; justify-items: center; gap: 0; } .brand-head { display: flex; align-items: center; gap: 9px; } .brand-mark { width: 28px; height: 28px; display: grid; place-items: center; flex-shrink: 0; } .brand-compass { width: 28px; height: 28px; } .brand-compass-ring { fill: none; stroke: var(--primary); stroke-width: 2.2; opacity: .75; } .brand-compass-inner { fill: rgba(61,139,255,.08); stroke: rgba(61,139,255,.2); stroke-width: 1; } .brand-compass-core { fill: var(--primary); } .brand-compass-needle-n { fill: var(--primary); } .brand-compass-needle-s { fill: rgba(255,255,255,.5); } .brand-compass-wing { fill: rgba(61,139,255,.35); } .brand-title { margin: 0; font-size: 21px; font-weight: 800; letter-spacing: .02em; color: #FFFFFF; line-height: 1; } .brand-subtitle { margin-top: 6px; font-size: 10.5px; color: var(--side-muted); letter-spacing: .04em; text-align: center; line-height: 1; } /* 네비게이션 */ .sidebar-nav { flex: 1; min-height: 0; overflow-y: auto; padding: 14px 10px; display: flex; flex-direction: column; gap: 8px; scrollbar-width: thin; scrollbar-color: rgba(123,184,255,.35) transparent; } .sidebar-nav::-webkit-scrollbar { width: 8px; } .sidebar-nav::-webkit-scrollbar-track { background: transparent; } .sidebar-nav::-webkit-scrollbar-thumb { background: rgba(123,184,255,.35); border-radius: 999px; } .nav-group { display: flex; flex-direction: column; gap: 6px; } .nav-children { display: flex; flex-direction: column; gap: 6px; } .nav-children[hidden] { display: none !important; } .nav-root, .nav-branch, .nav-leaf { display: block; width: 100%; text-align: left; border-radius: 9px; border: 1px solid transparent; color: var(--side-ink); font-size: 13px; transition: background .15s, color .15s, border-color .15s; position: relative; } .nav-root-row, .nav-branch-row, .nav-leaf-row { display: flex; align-items: center; gap: 8px; width: 100%; } .nav-root { padding: 10px 12px; font-weight: 700; background: rgba(255,255,255,.07); } .nav-root:hover { background: var(--side-hover); } .nav-root.active { background: var(--side-active-bg); color: var(--side-active-ink); } .nav-branch { padding: 8px 12px 8px 26px; font-weight: 500; color: var(--side-muted); } .nav-leaf { padding: 8px 12px 8px 42px; font-weight: 500; color: var(--side-muted); } .nav-branch:hover, .nav-leaf:hover { background: var(--side-hover); color: var(--side-ink); } .nav-branch.active, .nav-leaf.active { background: var(--side-active-bg); color: var(--side-active-ink); border-color: rgba(61,139,255,.2); } .nav-branch.active::before, .nav-leaf.active::before { content: ""; position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 3px; height: 14px; border-radius: 2px; background: var(--side-active-bar); } /* 사이드바 하단 */ .sidebar-footer { padding: 12px 12px 14px; border-top: 1px solid var(--side-line); flex-shrink: 0; } .user-card { background: rgba(255,255,255,.06); border: 1px solid var(--side-line); border-radius: 12px; padding: 12px; } .user-profile { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; } .user-avatar { width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg, var(--primary), #5AA9FF); color: #fff; font-weight: 800; font-size: 13px; display: grid; place-items: center; flex-shrink: 0; } .user-name { font-size: 13px; font-weight: 700; color: var(--side-ink); } .user-meta { font-size: 11px; color: var(--side-muted); margin-top: 2px; } .user-session { font-size: 11px; color: var(--side-muted); margin-bottom: 10px; } .logout-button { width: 100%; padding: 8px; border-radius: 8px; border: 1px solid rgba(228,67,90,.4); background: rgba(228,67,90,.12); color: #FF8B9A; font-size: 12px; font-weight: 700; transition: background .15s; } .logout-button:hover { background: rgba(228,67,90,.22); } /* 테마 토글 버튼 */ .theme-toggle { display: flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 8px; border: 1px solid var(--line-s); background: var(--surface-2); color: var(--ink-2); font-size: 12px; font-weight: 600; transition: background .15s, color .15s; } .theme-toggle:hover { background: var(--line); color: var(--ink); } /* ══ 워크스페이스 ══ */ .workspace { display: flex; flex-direction: column; overflow: hidden; min-width: 0; height: 100vh; } .workspace-frame { display: flex; flex-direction: column; height: 100%; position: relative; overflow: hidden; } /* 숨겨진 구 헤더 (JS 호환용) */ .hidden-app-header { display: none; } .workspace-top { display: none; } .monitoring-platform-bar { display: flex; align-items: center; gap: 12px; width: 100%; padding: 4px 0 10px; border: 0; background: transparent; flex-shrink: 0; } .monitoring-platform-bar-overlay { position: absolute; top: 18px; left: 24px; z-index: 12; width: auto; padding: 0; } .workspace-route-label { color: var(--ink-2); font-size: 13px; font-weight: 700; letter-spacing: .01em; white-space: nowrap; } .workspace-route-label[hidden] { display: none !important; } .platform-live { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; color: var(--ink-2); } .platform-live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--good); box-shadow: 0 0 0 3px rgba(15,169,104,.18); animation: livepulse 2.4s ease-in-out infinite; flex-shrink: 0; } @keyframes livepulse { 0%, 100% { opacity: 1; box-shadow: 0 0 0 3px rgba(15,169,104,.18); } 50% { opacity: .7; box-shadow: 0 0 0 5px rgba(15,169,104,.08); } } .platform-live strong { color: var(--good); font-weight: 700; } .platform-live-time { color: var(--ink-3); font-size: 11px; } .platform-title { position: absolute; left: 50%; transform: translateX(-50%); font-size: 14px; font-weight: 700; color: var(--ink); letter-spacing: -.01em; } .platform-meta { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--ink-3); margin-left: auto; } .platform-gear { width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface-2); color: var(--ink-3); font-size: 14px; display: grid; place-items: center; transition: background .15s; } .platform-gear:hover { background: var(--line); color: var(--ink-2); } /* 탭바/summary strip 제거됨 */ /* ══ 3D 뷰어 영역 ══ */ .model-stage-shell { position: relative; flex: 1; overflow: hidden; background: radial-gradient(ellipse 70% 60% at 55% 45%, rgba(80,90,120,.05), transparent 65%), linear-gradient(180deg, #EEEEF2 0%, #E7E8EF 100%); min-height: 0; } .dark .model-stage-shell { background: radial-gradient(ellipse 70% 60% at 55% 45%, rgba(61,139,255,.07), transparent 65%), linear-gradient(180deg, #07111D 0%, #060D18 100%); } /* 미묘한 그리드 배경 */ .model-stage-shell::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 48px 48px; opacity: .35; mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 0%, transparent 80%); pointer-events: none; } .dark .model-stage-shell::before { opacity: .18; } .menu-placeholder-shell { flex: 1; min-height: 0; display: grid; place-items: center; padding: 40px 32px 32px; background: radial-gradient(ellipse 70% 60% at 55% 45%, rgba(0,87,231,.05), transparent 65%), linear-gradient(180deg, #EBF2FB 0%, #E4EEF8 100%); } .dark .menu-placeholder-shell { background: radial-gradient(ellipse 70% 60% at 55% 45%, rgba(61,139,255,.07), transparent 65%), linear-gradient(180deg, #07111D 0%, #060D18 100%); } .menu-placeholder-shell[hidden], .model-stage-shell[hidden] { display: none !important; } .menu-placeholder-card { width: min(760px, 100%); padding: 36px 36px 34px; border: 1px solid rgba(0,87,231,.12); border-radius: 28px; background: rgba(255,255,255,.84); backdrop-filter: blur(18px); box-shadow: 0 24px 80px rgba(15,23,42,.12); } .dark .menu-placeholder-card { border-color: rgba(61,139,255,.18); background: rgba(13,19,32,.82); box-shadow: 0 24px 80px rgba(0,0,0,.35); } .menu-placeholder-badge { display: inline-flex; align-items: center; justify-content: center; min-height: 30px; padding: 0 12px; border-radius: 999px; background: var(--primary-soft); color: var(--primary); font-size: 12px; font-weight: 700; letter-spacing: .02em; } .menu-placeholder-eyebrow { margin-top: 18px; color: var(--ink-3); font-size: 13px; font-weight: 600; letter-spacing: .01em; } .menu-placeholder-title { margin-top: 10px; color: var(--ink); font-size: 34px; font-weight: 800; letter-spacing: -.03em; line-height: 1.08; } .menu-placeholder-description { margin-top: 16px; color: var(--ink-2); font-size: 15px; line-height: 1.75; } .menu-placeholder-notes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 28px; } .menu-placeholder-note { display: grid; gap: 8px; padding: 18px 18px 17px; border: 1px solid var(--line); border-radius: 18px; background: rgba(255,255,255,.66); } .dark .menu-placeholder-note { background: rgba(255,255,255,.03); } .menu-placeholder-note strong { color: var(--ink); font-size: 13px; font-weight: 700; } .menu-placeholder-note span { color: var(--ink-2); font-size: 13px; line-height: 1.65; } .system-line-shell { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; padding: 14px 24px 22px; background: linear-gradient(160deg, #EFEFF3 0%, #E2E3EC 100%); } .dark .system-line-shell { background: linear-gradient(160deg, #0C1526 0%, #091220 100%); } .system-line-shell[hidden] { display: none !important; } .system-line-page { flex: 1; min-height: 0; display: grid; grid-template-rows: auto 1fr; gap: 12px; } /* ── 카드 공통 ── */ .system-line-toolbar, .system-line-tree-card, .system-line-detail-card { border: 1px solid var(--line-s); border-radius: 10px; background: #fff; box-shadow: 0 1px 4px rgba(15,23,42,.06); } .dark .system-line-toolbar, .dark .system-line-tree-card, .dark .system-line-detail-card { background: #111b2e; border-color: var(--line); box-shadow: none; } /* ── 툴바 ── */ .system-line-toolbar { display: flex; align-items: flex-end; flex-wrap: nowrap; gap: 10px; padding: 12px 14px; position: relative; z-index: 8; overflow: visible; } .panel-field.system-line-toolbar-field { flex: 0 1 170px; margin-bottom: 0; min-width: 0; } .system-line-search-field { flex: 1 1 260px; min-width: 0; } .system-line-toolbar .lab-select { position: relative; z-index: 1; } .system-line-toolbar .lab-select.open { z-index: 24; } /* ── 레이아웃 ── */ .system-line-layout { min-height: 0; display: grid; grid-template-columns: minmax(280px, 340px) minmax(0, 1fr); gap: 12px; } .system-line-tree-card, .system-line-detail-card { min-height: 0; display: grid; align-content: start; } .system-line-tree-card { grid-template-rows: auto auto 1fr auto; overflow: hidden; } .system-line-detail-card { grid-template-rows: auto 1fr; overflow: hidden; } /* ── 카드 헤더 ── */ .system-line-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 14px; border-bottom: 1px solid var(--line-s); } .system-line-card-head h3 { color: var(--ink); font-size: 13px; font-weight: 700; } .system-line-card-actions, .system-line-footer-actions { display: flex; gap: 5px; flex-wrap: wrap; } .system-line-footer-actions { padding: 10px 14px; border-top: 1px solid var(--line-s); } /* ── 버튼 ── */ .system-line-action-button { height: 28px; padding: 0 10px; border-radius: 6px; border: 1px solid var(--line-s); background: transparent; color: var(--ink-2); font-size: 11px; font-weight: 600; transition: background .14s, border-color .14s; display: inline-flex; align-items: center; gap: 4px; } .system-line-action-button:hover { background: var(--surface-2); border-color: var(--line); } .system-line-action-button.is-primary { background: var(--primary); color: #fff; border-color: transparent; } .system-line-action-button.is-primary:hover { background: #0051d8; } .system-line-action-button.is-ghost { border-color: var(--line-s); color: var(--ink-3); } .system-line-action-button.is-danger-ghost { border-color: rgba(228,67,90,.20); color: var(--bad); } .system-line-action-button[hidden] { display: none !important; } .system-line-action-button:disabled { opacity: .38; cursor: not-allowed; } /* ── 상태 배너 ── */ .system-line-status-banner { margin: 10px 12px 0; padding: 9px 12px; border-radius: 6px; border: 1px solid rgba(0,87,231,.14); background: rgba(0,87,231,.05); color: var(--primary); font-size: 11px; font-weight: 600; line-height: 1.5; } .system-line-status-banner.is-warning { border-color: rgba(255,153,0,.22); background: rgba(255,153,0,.06); color: #b56b00; } .system-line-status-banner.is-danger { border-color: rgba(228,67,90,.20); background: rgba(228,67,90,.06); color: var(--bad); } .system-line-status-banner.hidden { display: none; } /* ── 스크롤 영역 ── */ .system-line-tree-scroll, .system-line-detail-body { min-height: 0; overflow-y: auto; padding: 10px 12px; } .system-line-tree-scroll::-webkit-scrollbar, .system-line-detail-body::-webkit-scrollbar { width: 4px; } .system-line-tree-scroll::-webkit-scrollbar-thumb, .system-line-detail-body::-webkit-scrollbar-thumb { border-radius: 999px; background: var(--line-s); } /* ── 폼 요소 ── */ .system-line-select, .system-line-input, .system-line-textarea { width: 100%; border: 1px solid var(--line-s); border-radius: 6px; padding: 0 10px; height: 32px; background: var(--surface-2); color: var(--ink); font-size: 12px; font-weight: 500; } .system-line-textarea { height: auto; min-height: 80px; padding: 8px 10px; resize: vertical; } .system-line-select:focus, .system-line-input:focus, .system-line-textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(0,87,231,.10); background: var(--surface); } /* ── 툴바 커스텀 셀렉트 ── */ .system-line-toolbar .lab-select-trigger { width: 100%; height: 32px; display: flex; align-items: center; justify-content: space-between; gap: 8px; border: 1px solid var(--line-s); border-radius: 6px; padding: 0 10px; background: var(--surface-2); color: var(--ink); font-size: 12px; font-weight: 500; } .system-line-toolbar .lab-select-trigger:hover { border-color: var(--line); } .system-line-toolbar .lab-select.open .lab-select-trigger, .system-line-toolbar .lab-select-trigger:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(0,87,231,.10); background: var(--surface); } .system-line-toolbar .lab-select-arrow { color: var(--ink-3); font-size: 10px; line-height: 1; transition: transform .16s ease; } .system-line-toolbar .lab-select-menu { position: absolute; left: 0; right: 0; top: calc(100% + 6px); display: none; padding: 4px; border: 1px solid var(--line-s); border-radius: 8px; background: var(--surface); box-shadow: 0 8px 24px rgba(15,23,42,.12); z-index: 40; } .system-line-toolbar .lab-select.open .lab-select-menu { display: grid; gap: 2px; } .system-line-toolbar .lab-select-option { width: 100%; min-height: 32px; padding: 6px 10px; border: 1px solid transparent; border-radius: 6px; background: transparent; color: var(--ink-2); text-align: left; font-size: 12px; font-weight: 500; } .system-line-toolbar .lab-select-option:hover, .system-line-toolbar .lab-select-option.active { background: var(--primary-soft); color: var(--primary); } /* ── 트리 ── */ .system-line-tree-root, .system-line-tree-children { display: grid; gap: 2px; } .system-line-tree-node { display: grid; gap: 2px; } .system-line-tree-children { padding-left: 14px; } .system-line-tree-children[hidden] { display: none; } .system-line-tree-button { width: 100%; display: flex; align-items: center; gap: 8px; min-height: 34px; padding: 5px 8px; border-radius: 6px; border: 1px solid transparent; background: transparent; text-align: left; transition: background .13s, border-color .13s; } .system-line-tree-button:hover { background: var(--surface-2); border-color: var(--line-s); } .system-line-tree-button.is-selected { background: var(--primary-soft); border-color: rgba(0,87,231,.16); } .system-line-tree-toggle { width: 18px; height: 18px; border-radius: 4px; border: 1px solid var(--line-s); background: var(--surface-2); color: var(--ink-3); font-size: 10px; font-weight: 700; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; } .system-line-tree-toggle.is-placeholder { opacity: 0; pointer-events: none; } .system-line-tree-meta { min-width: 0; flex: 1; display: grid; gap: 2px; } .system-line-tree-title-row, .system-line-tree-sub-row { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; } .system-line-tree-title { color: var(--ink); font-size: 12px; font-weight: 600; } .system-line-tree-button.is-selected .system-line-tree-title { color: var(--primary); font-weight: 700; } .system-line-tree-sub { color: var(--ink-3); font-size: 11px; font-weight: 500; } .system-line-node-badge, .system-line-state-badge { display: inline-flex; align-items: center; justify-content: center; height: 18px; padding: 0 6px; border-radius: 999px; font-size: 10px; font-weight: 600; } .system-line-node-badge { background: var(--primary-soft); color: var(--primary); } .system-line-state-badge.is-active { background: rgba(15,169,104,.10); color: var(--good); } .system-line-state-badge.is-inactive { background: rgba(228,67,90,.08); color: var(--bad); } /* ── 하위 노드 추가 버튼 (dashed) ── */ .system-line-footer-actions .system-line-action-button[data-action="add-child"] { width: 100%; justify-content: center; border-style: dashed; border-color: rgba(0,87,231,.22); background: var(--primary-soft); color: var(--primary); } /* ── 노드 정보 폼 섹션 라벨 ── */ .system-line-detail-body .panel-subsection-label { border-left: 2px solid var(--primary); padding-left: 6px; margin-top: 12px; } /* ── 빈 상태 ── */ .system-line-tree-empty, .system-line-empty-state { display: grid; place-items: center; gap: 8px; min-height: 160px; padding: 24px 16px; border: 1px dashed var(--line-s); border-radius: 8px; background: var(--surface-2); color: var(--ink-3); text-align: center; } .dark .system-line-tree-empty, .dark .system-line-empty-state { background: rgba(255,255,255,.03); } .system-line-empty-state strong, .system-line-tree-empty strong { color: var(--ink); font-size: 15px; } .system-line-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .system-line-form-grid .panel-field { margin-bottom: 0; } .system-line-form-grid .is-span-2 { grid-column: 1 / -1; } .system-line-detail-section + .system-line-detail-section { margin-top: 14px; } .system-line-detail-section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; } .system-line-detail-section-head p { color: var(--ink-3); font-size: 12px; font-weight: 600; } .system-line-detail-section-head .panel-subsection-label { margin-bottom: 0; } .system-line-required { color: var(--bad); font-weight: 700; } .system-line-inline-help { color: var(--ink-3); font-size: 11px; line-height: 1.55; } .system-line-readonly-notice { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; padding: 10px 12px; border: 1px solid rgba(0,87,231,.14); border-radius: 8px; background: rgba(0,87,231,.05); } .system-line-readonly-notice strong { display: block; color: var(--ink); font-size: 13px; font-weight: 700; } .system-line-readonly-notice p { margin-top: 4px; color: var(--ink-2); font-size: 12px; line-height: 1.6; } .dark .system-line-readonly-notice { background: rgba(61,139,255,.08); } [data-surface="system-line-management"] .panel-subsection-label { text-transform: none; letter-spacing: .02em; } .system-line-toolbar .panel-field-label, .system-line-detail-body .panel-field-label { color: var(--ink-2); } .building-management-shell { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; padding: 14px 24px 22px; background: linear-gradient(160deg, #EFEFF3 0%, #E2E3EC 100%); } .dark .building-management-shell { background: linear-gradient(160deg, #0C1526 0%, #091220 100%); } .building-management-shell[hidden] { display: none !important; } .building-management-page { flex: 1; min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 12px; } .building-management-toolbar, .building-management-list-card, .building-management-detail-card { border: 1px solid var(--line-s); border-radius: 10px; background: #fff; box-shadow: 0 1px 4px rgba(15,23,42,.06); } .dark .building-management-toolbar, .dark .building-management-list-card, .dark .building-management-detail-card { background: #111b2e; border-color: var(--line); box-shadow: none; } .building-management-toolbar { display: flex; align-items: flex-end; flex-wrap: nowrap; gap: 10px; padding: 12px 14px; } .panel-field.building-management-toolbar-field { flex: 0 1 190px; margin-bottom: 0; min-width: 0; } .building-management-toolbar-field:has(input[type="search"]) { flex: 1 1 320px; } .building-management-toolbar-field:first-child:last-of-type { flex: 0 1 400px; } .building-management-layout { min-height: 0; display: grid; grid-template-columns: minmax(360px, .95fr) minmax(0, 1.15fr); gap: 12px; } .object-management-shell .building-management-layout, .control-point-management-shell .building-management-layout { grid-template-columns: minmax(0, 1fr); } .building-management-list-card, .building-management-detail-card { min-height: 0; overflow: hidden; display: grid; } .building-management-list-card { grid-template-rows: auto auto 1fr; } .building-management-detail-card { grid-template-rows: auto 1fr; } .building-management-list-scroll, .building-management-detail-body { min-height: 0; overflow-y: auto; padding: 10px 12px; } .building-management-list-scroll::-webkit-scrollbar, .building-management-detail-body::-webkit-scrollbar { width: 4px; } .building-management-list-scroll::-webkit-scrollbar-thumb, .building-management-detail-body::-webkit-scrollbar-thumb { border-radius: 999px; background: var(--line-s); } .building-management-list-table { display: grid; gap: 6px; } .building-management-list-head, .building-management-list-row { display: grid; grid-template-columns: 26px minmax(110px, 1.3fr) minmax(72px, .9fr) minmax(92px, 1fr) minmax(92px, .9fr) 56px; gap: 10px; align-items: center; } .building-management-list-head { position: sticky; top: 0; z-index: 1; padding: 0 10px 8px; background: linear-gradient(180deg, rgba(255,255,255,.96) 0%, rgba(255,255,255,.92) 100%); border-bottom: 1px solid var(--line-s); } .dark .building-management-list-head { background: linear-gradient(180deg, rgba(17,27,46,.98) 0%, rgba(17,27,46,.94) 100%); } .building-management-list-head span { color: var(--ink-3); font-size: 11px; font-weight: 700; } .building-management-list-row { width: 100%; padding: 11px 10px; border: 1px solid transparent; border-radius: 8px; background: transparent; cursor: pointer; user-select: none; transition: background .14s, border-color .14s; } .building-management-list-row:hover { background: var(--surface-2); border-color: var(--line-s); } .building-management-list-row.is-selected { background: var(--primary-soft); border-color: rgba(0,87,231,.16); } .building-management-list-cell { min-width: 0; color: var(--ink-2); font-size: 12px; font-weight: 600; } .building-management-list-cell strong { display: block; color: var(--ink); font-size: 13px; font-weight: 700; } .building-management-list-cell small { display: block; margin-top: 3px; color: var(--ink-3); font-size: 11px; font-weight: 500; } .building-management-count { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; height: 22px; padding: 0 8px; border-radius: 999px; background: var(--surface-2); color: var(--ink-2); font-size: 11px; font-weight: 700; } .building-management-check-cell { display: inline-flex; align-items: center; justify-content: center; } .building-management-check-cell input { width: 15px; height: 15px; margin: 0; accent-color: var(--primary); cursor: pointer; } .building-management-chip { display: inline-flex; align-items: center; justify-content: center; min-height: 18px; padding: 0 7px; border-radius: 999px; font-size: 10px; font-weight: 700; } .building-management-chip.is-active { background: rgba(15,169,104,.10); color: var(--good); } .building-management-chip.is-pending { background: rgba(255,153,0,.10); color: #b56b00; } .building-management-chip.is-inactive { background: rgba(228,67,90,.08); color: var(--bad); } .building-management-detail-body .panel-subsection-label { border-left: 2px solid var(--primary); padding-left: 6px; margin-top: 12px; } .building-management-detail-summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; padding: 10px 12px; border: 1px solid rgba(0,87,231,.14); border-radius: 8px; background: rgba(0,87,231,.05); } .building-management-detail-summary strong { display: block; color: var(--ink); font-size: 13px; font-weight: 700; } .building-management-detail-summary p { margin-top: 4px; color: var(--ink-2); font-size: 12px; line-height: 1.55; } .dark .building-management-detail-summary { background: rgba(61,139,255,.08); } .building-management-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .building-management-form-grid .panel-field { margin-bottom: 0; } .building-management-form-grid .is-span-2 { grid-column: 1 / -1; } .building-management-inline-note { color: var(--ink-3); font-size: 11px; line-height: 1.55; } /* 관제점 관리 -- 열이 많아서 building-management-list-*(고정 6열 그리드) 대신 실제 을 쓰되, 톤앤매너(색상/타이포/hover/선택 상태)는 동일하게 맞춤. */ .control-point-list-card { min-width: 0; } .control-point-table-scroll { overflow-x: auto; padding-bottom: 4px; } .control-point-table { width: 100%; min-width: 1320px; border-collapse: separate; border-spacing: 0 6px; } .control-point-table thead th { position: sticky; top: 0; z-index: 1; padding: 0 10px 8px; background: var(--surface); border-bottom: 1px solid var(--line-s); color: var(--ink-3); font-size: 11px; font-weight: 700; text-align: left; white-space: nowrap; } .control-point-table tbody tr { cursor: pointer; user-select: none; transition: background .14s, border-color .14s; } .control-point-table tbody td { padding: 10px; border-top: 1px solid transparent; border-bottom: 1px solid transparent; color: var(--ink-2); font-size: 12px; font-weight: 600; white-space: nowrap; } .control-point-table tbody td:first-child { border-left: 1px solid transparent; border-top-left-radius: 8px; border-bottom-left-radius: 8px; } .control-point-table tbody td:last-child { border-right: 1px solid transparent; border-top-right-radius: 8px; border-bottom-right-radius: 8px; } .control-point-table tbody tr:hover td { background: var(--surface-2); border-color: var(--line-s); } .control-point-table tbody tr.is-selected td { background: var(--primary-soft); border-color: rgba(0,87,231,.16); } .control-point-table tbody td strong { color: var(--ink); font-size: 13px; font-weight: 700; } .control-point-code { color: var(--ink-3); font-size: 11px; font-weight: 600; } .control-point-unlinked { color: var(--ink-3); font-style: italic; } .control-point-check-cell { width: 32px; text-align: center !important; } .control-point-check-cell input { width: 15px; height: 15px; margin: 0; accent-color: var(--primary); cursor: pointer; } /* TD 불러오기 결과 리뷰 모달 -- 관제점 관리 모달과 톤은 맞추되, 매칭/검토/중복 3그룹을 한 화면에서 훑어볼 수 있도록 세로로 나열하는 전용 레이아웃. */ .td-import-modal-dialog { width: min(760px, calc(100vw - 40px)); } .td-import-file-field { margin-bottom: 14px; } .td-import-file-row { display: flex; align-items: center; gap: 10px; } .td-import-file-name { color: var(--ink-3); font-size: 12px; } .td-import-summary { display: flex; gap: 8px; margin-bottom: 14px; } .td-import-summary-item { padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; } .td-import-summary-item.is-matched { background: rgba(15,169,104,.10); color: var(--good); } .td-import-summary-item.is-review { background: rgba(255,153,0,.10); color: #b56b00; } .td-import-summary-item.is-duplicate { background: var(--surface-2); color: var(--ink-3); } .td-import-body { display: flex; flex-direction: column; gap: 16px; } .td-import-group-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .td-import-group.is-collapsed-tone { opacity: .7; } .td-import-row-list { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; } .td-import-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--line-s); border-radius: 8px; background: var(--surface); } .td-import-row.is-matched { cursor: pointer; } .td-import-row.is-matched input[type="checkbox"] { width: 15px; height: 15px; flex: none; accent-color: var(--primary); cursor: pointer; } .td-import-row.is-review { border-color: rgba(255,153,0,.24); background: rgba(255,153,0,.05); } .td-import-row.is-duplicate { background: var(--surface-2); } .td-import-row-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; } .td-import-row-tag { font-family: "SFMono-Regular", Consolas, monospace; font-size: 11px; font-weight: 700; color: var(--ink); overflow-wrap: anywhere; } .td-import-row-path { font-size: 11px; color: var(--ink-3); } .td-import-row-reason { font-size: 11px; color: #b56b00; } .td-import-row-meta { flex: none; font-size: 11px; color: var(--ink-3); white-space: nowrap; } .td-import-row-badge { flex: none; padding: 2px 8px; border-radius: 999px; background: rgba(255,153,0,.14); color: #b56b00; font-size: 10px; font-weight: 700; } .building-management-empty { display: grid; place-items: center; gap: 8px; min-height: 180px; padding: 24px 16px; border: 1px dashed var(--line-s); border-radius: 8px; background: var(--surface-2); color: var(--ink-3); text-align: center; } .building-management-empty strong { color: var(--ink); font-size: 15px; } .building-management-detail-body .panel-field-label, .building-management-toolbar .panel-field-label { color: var(--ink-2); } .code-management-shell { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; padding: 14px 24px 22px; background: linear-gradient(160deg, #EFEFF3 0%, #E2E3EC 100%); } .dark .code-management-shell { background: linear-gradient(160deg, #0C1526 0%, #091220 100%); } .code-management-shell[hidden] { display: none !important; } .code-management-page { flex: 1; min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 12px; } .code-management-layout { min-height: 0; display: grid; grid-template-columns: minmax(380px, .95fr) minmax(0, 1.15fr); gap: 12px; } .code-management-card, .code-management-editor-card { border: 1px solid var(--line-s); border-radius: 10px; background: #fff; box-shadow: 0 1px 4px rgba(15,23,42,.06); } .dark .code-management-card, .dark .code-management-editor-card { background: #111b2e; border-color: var(--line); box-shadow: none; } .code-management-card { min-height: 0; overflow: hidden; display: grid; grid-template-rows: auto 1fr; } .code-management-card-body { min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 10px; padding: 10px 12px 12px; } .panel-field.code-management-search-field { flex: 1 1 auto; margin-bottom: 0; } .code-management-search-row { display: flex; align-items: flex-end; gap: 8px; min-width: 0; } .code-management-list-scroll, .code-management-editor-body { min-height: 0; overflow-y: auto; } .code-management-list-scroll { padding-right: 2px; } .code-management-editor-body { padding: 10px 12px 12px; } .code-management-list-scroll::-webkit-scrollbar, .code-management-editor-body::-webkit-scrollbar { width: 4px; } .code-management-list-scroll::-webkit-scrollbar-thumb, .code-management-editor-body::-webkit-scrollbar-thumb { border-radius: 999px; background: var(--line-s); } .code-management-list-table { display: grid; gap: 6px; } .code-management-list-head, .code-management-list-row { display: grid; gap: 10px; align-items: center; } .code-management-list-head.is-group, .code-management-list-row.is-group { grid-template-columns: 26px minmax(86px, .8fr) minmax(150px, 1.45fr) minmax(108px, .95fr) minmax(72px, .75fr) 56px; } .code-management-list-head.is-code, .code-management-list-row.is-code { grid-template-columns: 26px minmax(88px, .8fr) minmax(150px, 1.3fr) minmax(120px, 1fr) minmax(92px, .8fr) 56px 72px; } .code-management-list-head { position: sticky; top: 0; z-index: 1; padding: 0 10px 8px; background: linear-gradient(180deg, rgba(255,255,255,.96) 0%, rgba(255,255,255,.92) 100%); border-bottom: 1px solid var(--line-s); } .dark .code-management-list-head { background: linear-gradient(180deg, rgba(17,27,46,.98) 0%, rgba(17,27,46,.94) 100%); } .code-management-list-head span { color: var(--ink-3); font-size: 11px; font-weight: 700; } .code-management-list-row { width: 100%; padding: 11px 10px; border: 1px solid transparent; border-radius: 8px; background: transparent; cursor: pointer; transition: background .14s, border-color .14s; } .code-management-list-row:hover { background: var(--surface-2); border-color: var(--line-s); } .code-management-list-row.is-selected { background: var(--primary-soft); border-color: rgba(0,87,231,.16); } .code-management-modal { position: fixed; inset: 0; z-index: 48; } .code-management-modal.hidden { display: none !important; } .code-management-modal-backdrop { position: absolute; inset: 0; background: rgba(9, 18, 32, .42); backdrop-filter: blur(6px); } .code-management-modal-dialog { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(860px, calc(100vw - 40px)); max-height: min(78vh, 780px); overflow: hidden; display: grid; grid-template-rows: auto minmax(0, 1fr); border: 1px solid var(--line-s); border-radius: 16px; background: #fff; box-shadow: 0 30px 60px rgba(15, 23, 42, .24); } .dark .code-management-modal-dialog { background: #111b2e; border-color: var(--line); box-shadow: 0 22px 44px rgba(0, 0, 0, .34); } .code-management-modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 16px 18px 14px; border-bottom: 1px solid var(--line-s); } .dark .code-management-modal-head { border-color: var(--line); } .code-management-modal-body { min-height: 0; overflow-y: auto; padding: 16px 18px 18px; } .code-management-modal-body::-webkit-scrollbar { width: 4px; } .code-management-modal-body::-webkit-scrollbar-thumb { border-radius: 999px; background: var(--line-s); } .code-management-editor-card { min-height: 0; overflow: hidden; display: grid; grid-template-rows: auto 1fr; } .system-line-card-head.is-subcard { padding: 11px 12px; } .code-management-head-note { margin-top: 4px; color: var(--ink-3); font-size: 11px; line-height: 1.5; } .code-management-editor-body .panel-field-label, .code-management-search-field .panel-field-label { color: var(--ink-2); } .drawing-space-shell { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; padding: 14px 24px 22px; background: linear-gradient(160deg, #EFEFF3 0%, #E2E3EC 100%); } .dark .drawing-space-shell { background: linear-gradient(160deg, #0C1526 0%, #091220 100%); } .drawing-space-shell[hidden] { display: none !important; } .drawing-space-page { flex: 1; min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 12px; min-width: 0; } .drawing-space-toolbar, .drawing-space-floor-card, .drawing-space-preview-card, .drawing-space-modal-dialog, .drawing-space-editor-side, .drawing-space-editor-stage-card, .drawing-space-editor-detail { border: 1px solid var(--line-s); border-radius: 10px; background: #fff; box-shadow: 0 1px 4px rgba(15,23,42,.06); } .dark .drawing-space-toolbar, .dark .drawing-space-floor-card, .dark .drawing-space-preview-card, .dark .drawing-space-modal-dialog, .dark .drawing-space-editor-side, .dark .drawing-space-editor-stage-card, .dark .drawing-space-editor-detail { background: #111b2e; border-color: var(--line); box-shadow: none; } .drawing-space-toolbar { display: flex; align-items: flex-end; flex-wrap: nowrap; gap: 10px; padding: 12px 14px; position: relative; z-index: 8; } .panel-field.drawing-space-toolbar-field { flex: 0 1 220px; margin-bottom: 0; min-width: 0; } .query-action-button { flex: 0 0 92px; justify-content: center; height: 32px; } .drawing-space-toolbar .lab-select { position: relative; z-index: 1; } .drawing-space-toolbar .lab-select.open { z-index: 24; } .drawing-space-toolbar .lab-select-menu { z-index: 30; } .drawing-space-toolbar .lab-select-trigger, .drawing-space-toolbar-chip, .drawing-space-toolbar-note { min-height: 32px; border: 1px solid var(--line-s); border-radius: 6px; background: var(--surface-2); color: var(--ink); padding: 0 10px; display: flex; align-items: center; font-size: 12px; font-weight: 500; } .drawing-space-layout { min-height: 0; overflow: auto; display: grid; grid-template-columns: minmax(280px, 330px) minmax(0, 1fr); gap: 12px; } .drawing-space-floor-card, .drawing-space-preview-card { min-height: 0; overflow: hidden; display: grid; } .drawing-space-floor-card { grid-template-rows: auto auto 1fr; } .drawing-space-preview-card { grid-template-rows: auto 1fr; } .drawing-space-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 14px; border-bottom: 1px solid var(--line-s); } .drawing-space-card-head h3 { color: var(--ink); font-size: 13px; font-weight: 700; } .drawing-space-card-actions { display: flex; gap: 5px; flex-wrap: wrap; align-items: center; } .drawing-space-action-sep { width: 1px; height: 20px; background: var(--line-s); margin: 0 4px; flex-shrink: 0; } .drawing-space-inline-status { font-size: 12px; font-weight: 600; color: var(--primary); white-space: nowrap; padding: 3px 8px; border-radius: 6px; background: color-mix(in srgb, var(--primary) 12%, transparent); animation: drawing-space-toast-in 0.2s ease; } .drawing-space-inline-status.is-warning { color: #9a5a00; background: rgba(180, 100, 0, 0.1); } .drawing-space-inline-status.is-danger { color: var(--bad); background: color-mix(in srgb, var(--bad) 10%, transparent); } @keyframes drawing-space-toast-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } } .drawing-space-inline-status.hidden { display: none; } .living-lab-inline-status { align-self: center; color: var(--primary); font-size: 12px; font-weight: 700; line-height: 1; margin-right: 4px; white-space: nowrap; animation: drawing-space-toast-in 0.2s ease; } .living-lab-inline-status.is-warning { color: #9a5a00; } .living-lab-inline-status.is-danger { color: var(--bad); } .living-lab-inline-status.hidden { display: none; } .drawing-space-preview-body { min-height: 0; padding: 10px 12px; } .drawing-space-preview-body { display: grid; grid-template-rows: auto 1fr; gap: 10px; overflow: hidden; } .drawing-space-preview-body::-webkit-scrollbar, .system-line-tree-scroll::-webkit-scrollbar, .drawing-space-editor-detail-body::-webkit-scrollbar { width: 4px; } .drawing-space-preview-body::-webkit-scrollbar-thumb, .system-line-tree-scroll::-webkit-scrollbar-thumb, .drawing-space-editor-detail-body::-webkit-scrollbar-thumb { border-radius: 999px; background: var(--line-s); } .drawing-space-floor-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 52px; height: 18px; padding: 0 6px; border-radius: 999px; font-size: 10px; font-weight: 700; } .drawing-space-floor-badge.is-linked { background: rgba(15,169,104,.10); color: var(--good); } .drawing-space-floor-badge.is-empty { background: rgba(228,67,90,.08); color: var(--bad); } .drawing-space-preview-meta { color: var(--ink-3); font-size: 12px; font-weight: 600; } .drawing-space-preview-stage { position: relative; min-height: 0; display: grid; place-items: center; padding: 20px; border: 1px dashed var(--line-s); border-radius: 8px; background: linear-gradient(180deg, rgba(255,255,255,.85) 0%, rgba(231,232,239,.92) 100%); overflow: hidden; } .drawing-space-preview-canvas { position: absolute; left: 50%; top: 50%; width: min(100%, 1120px); height: auto; aspect-ratio: var(--drawing-space-aspect); transform: translate(-50%, -50%); border-radius: 12px; overflow: hidden; background: #fff; box-shadow: 0 10px 30px rgba(15,23,42,.12); } .drawing-space-preview-image, .drawing-space-preview-document, .drawing-space-preview-overlay, .drawing-space-marker-layer, .drawing-space-editor-media, .drawing-space-editor-overlay, .drawing-space-editor-labels { position: absolute; inset: 0; width: 100%; height: 100%; } .drawing-space-preview-image { object-fit: contain; background: #fff; } .drawing-space-preview-document { border: 0; background: #fff; pointer-events: none; } .drawing-space-preview-overlay { overflow: visible; z-index: 2; } .drawing-space-marker-layer { z-index: 3; pointer-events: none; } .drawing-space-polygon { fill: transparent; stroke: rgba(0,87,231,.30); stroke-width: .22; pointer-events: auto; } .drawing-space-polygon.is-active { fill: rgba(0,87,231,.18); stroke: rgba(0,87,231,.82); stroke-width: .38; } .drawing-space-vertex, .drawing-space-anchor { stroke: none; } .drawing-space-vertex { fill: rgba(0,87,231,.72); pointer-events: auto; } .drawing-space-anchor { fill: rgba(228,67,90,.78); pointer-events: auto; } .drawing-space-vertex.is-active, .drawing-space-anchor.is-active { stroke-width: .75; } .drawing-space-snap-preview-line { stroke: rgba(0, 87, 231, .7); stroke-width: .32; stroke-dasharray: 1.2 1.1; fill: none; pointer-events: none; } .drawing-space-snap-preview-dot { fill: rgba(0, 87, 231, .9); stroke: #fff; stroke-width: .35; pointer-events: none; } .drawing-space-vertex-label { fill: var(--ink); font-size: 3px; font-weight: 700; paint-order: stroke; stroke: rgba(255,255,255,.95); stroke-width: .24; } .drawing-space-space-label, .drawing-space-editor-label { position: absolute; transform: translate(-50%, -50%); pointer-events: auto; text-align: center; } /* 도면 미리보기: 기본은 점만 보여주고, hover/포커스/선택 시에만 이름이 옆으로 펼쳐짐 -- 공간이 화면상 가까이 몰려있어도 이름표끼리 겹치거나 옆 공간을 침범해 보이지 않게 하기 위함. */ .drawing-space-space-label { display: inline-flex; align-items: center; width: 10px; height: 10px; padding: 0; border-radius: 999px; border: 2px solid var(--primary); background: #fff; overflow: hidden; box-shadow: 0 4px 16px rgba(15,23,42,.12); transition: width .16s ease, height .16s ease, padding .16s ease, background .16s ease; cursor: pointer; } .drawing-space-label-dot { flex: 0 0 auto; width: 5px; height: 5px; margin: 0 auto; border-radius: 50%; background: var(--primary); } .drawing-space-space-label .drawing-space-label-text { display: inline-block; flex: 0 0 auto; max-width: 0; overflow: hidden; opacity: 0; font-size: 11px; font-weight: 700; color: var(--ink); transition: max-width .18s ease, opacity .12s ease; } .drawing-space-space-label:hover, .drawing-space-space-label:focus-visible, .drawing-space-space-label.is-active { width: auto; height: 24px; padding: 0 10px; border-color: rgba(0,87,231,.4); background: rgba(233,241,255,.98); } .drawing-space-space-label:hover .drawing-space-label-dot, .drawing-space-space-label:focus-visible .drawing-space-label-dot, .drawing-space-space-label.is-active .drawing-space-label-dot { display: none; } .drawing-space-space-label:hover .drawing-space-label-text, .drawing-space-space-label:focus-visible .drawing-space-label-text, .drawing-space-space-label.is-active .drawing-space-label-text { max-width: 200px; opacity: 1; } /* 에디터 팝업: 공간 하나만 항상 표시하는 곳이라 겹칠 일이 없음 -- 점 없이 기존처럼 이름을 항상 펼쳐서 보여줌. */ .drawing-space-editor-label { max-width: 140px; padding: 6px 10px; border-radius: 999px; border: 1px solid rgba(15,23,42,.08); background: rgba(255,255,255,.92); color: var(--ink); font-size: 11px; font-weight: 700; line-height: 1.2; box-shadow: 0 4px 16px rgba(15,23,42,.12); } .drawing-space-editor-label .drawing-space-label-dot { display: none; } .drawing-space-editor-label.is-active { border-color: rgba(0,87,231,.25); background: rgba(233,241,255,.96); } .drawing-space-object-marker, .drawing-space-editor-marker, .drawing-space-tree-icon, .floor-sensor-button { --marker-color: #475569; --marker-border: rgba(71,85,105,.45); --marker-bg: rgba(71,85,105,.10); } .type-renewable { --marker-color: var(--good); --marker-border: rgba(15,169,104,.45); --marker-bg: var(--good-soft); } .type-controller { --marker-color: var(--primary); --marker-border: rgba(0,87,231,.45); --marker-bg: var(--primary-soft); } .type-sensor { --marker-color: var(--accent); --marker-border: rgba(255,138,0,.5); --marker-bg: var(--accent-soft); } .type-meter { --marker-color: #7C3AED; --marker-border: rgba(124,58,237,.45); --marker-bg: rgba(124,58,237,.10); } .type-gateway { --marker-color: #0891B2; --marker-border: rgba(8,145,178,.45); --marker-bg: rgba(8,145,178,.10); } .drawing-space-object-marker, .drawing-space-editor-marker { position: absolute; transform: translate(-50%, -50%); width: 14px; height: 14px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--marker-border); background: var(--surface); color: var(--marker-color); box-shadow: 0 2px 6px rgba(15,23,42,.16); pointer-events: auto; cursor: pointer; } .drawing-space-object-marker svg, .drawing-space-editor-marker svg { width: 9px; height: 9px; } .drawing-space-object-marker.is-active, .drawing-space-editor-marker.is-active { background: var(--marker-color); color: #fff; box-shadow: 0 0 0 3px var(--marker-bg), 0 4px 14px rgba(15,23,42,.16); } .drawing-space-tree-icon { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; flex: 0 0 auto; border-radius: 50%; background: var(--marker-bg); color: var(--marker-color); } .drawing-space-tree-icon svg { width: 11px; height: 11px; } .drawing-space-summary-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; } .drawing-space-summary-item { display: grid; gap: 3px; padding: 10px 12px; border-radius: 8px; border: 1px solid var(--line-s); background: var(--surface-2); } .drawing-space-summary-item span { color: var(--ink-3); font-size: 11px; font-weight: 600; } .drawing-space-summary-item strong { color: var(--ink); font-size: 12px; font-weight: 700; } [data-surface="drawing-space-management"] .panel-subsection-label { text-transform: none; letter-spacing: .02em; } .drawing-space-modal { position: fixed; inset: 0; z-index: 200; } .drawing-space-modal.hidden { display: none; } .drawing-space-modal-backdrop { position: absolute; inset: 0; background: rgba(8, 15, 30, .48); } .drawing-space-modal-dialog { position: absolute; inset: 28px; display: grid; grid-template-rows: auto 1fr; overflow: hidden; } .drawing-space-modal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--line-s); } .drawing-space-modal-head h3 { color: var(--ink); font-size: 15px; font-weight: 700; } .drawing-space-modal-layout { min-height: 0; display: grid; grid-template-columns: 260px minmax(0, 1fr) 320px; gap: 12px; padding: 12px; } .drawing-space-editor-side, .drawing-space-editor-stage-card, .drawing-space-editor-detail { min-height: 0; overflow: hidden; } .drawing-space-editor-side { display: grid; grid-template-rows: auto minmax(0, 1fr); } .drawing-space-editor-side-head { display: grid; gap: 4px; padding: 12px; border-bottom: 1px solid var(--line-s); } .drawing-space-editor-stage-card { display: grid; grid-template-rows: auto 1fr; padding: 12px; gap: 10px; } .drawing-space-editor-stage-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; } .drawing-space-editor-stage-meta strong { color: var(--ink); font-size: 14px; font-weight: 700; } .drawing-space-editor-stage-meta span { color: var(--ink-3); font-size: 12px; font-weight: 500; } .drawing-space-editor-stage { position: relative; min-height: 0; overflow: hidden; border: 1px solid var(--line-s); border-radius: 12px; background: radial-gradient(circle at center, rgba(255,255,255,.9) 0%, rgba(237,238,244,.96) 100%); cursor: grab; } .drawing-space-editor-stage.is-dragging { cursor: grabbing; } .drawing-space-editor-viewport { position: absolute; inset: 18px; overflow: hidden; border-radius: 12px; display: flex; align-items: center; justify-content: center; } .drawing-space-editor-canvas-shell { position: relative; width: min(100%, 1200px); aspect-ratio: var(--drawing-space-aspect); border-radius: 12px; overflow: hidden; background: #fff; box-shadow: 0 14px 40px rgba(15,23,42,.18); flex-shrink: 0; } .drawing-space-editor-canvas { position: absolute; inset: 0; transform-origin: center center; } .drawing-space-editor-media { object-fit: contain; background: #fff; pointer-events: none; } .drawing-space-editor-overlay { z-index: 2; overflow: visible; } .drawing-space-editor-labels, .drawing-space-editor-markers { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 3; pointer-events: none; } .drawing-space-editor-detail { display: grid; grid-template-rows: auto 1fr; } .drawing-space-editor-detail-head { display: grid; gap: 4px; padding: 12px 14px; border-bottom: 1px solid var(--line-s); } .drawing-space-editor-detail-head strong { color: var(--ink); font-size: 13px; font-weight: 700; } .drawing-space-editor-detail-body { min-height: 0; overflow-y: auto; padding: 12px 14px; } .drawing-space-point-list { display: grid; gap: 8px; } .drawing-space-point-row { display: grid; grid-template-columns: 24px 1fr 1fr 34px; gap: 6px; align-items: center; } .drawing-space-point-row strong { color: var(--ink-2); font-size: 11px; font-weight: 700; } .drawing-space-point-remove { min-width: 34px; padding: 0; justify-content: center; } /* 3D 캔버스 */ .space-model-viewer { position: absolute; inset: 0; width: 100%; height: 100%; background: transparent; overflow: hidden; } .space-model-viewer canvas { display: block; width: 100%; height: 100%; outline: none; } /* 로딩/에러 상태 */ .viewer-status { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2; max-width: 300px; padding: 14px 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); color: var(--ink); font-size: 13px; font-weight: 600; text-align: center; line-height: 1.5; } .viewer-status.is-hidden { display: none; } .viewer-status.is-error { border-color: rgba(228,67,90,.3); background: var(--bad-soft); color: var(--bad); } /* 공간 라벨 / 센서 오버레이 */ .standard-space-labels { position: absolute; inset: 0; z-index: 1; pointer-events: none; } .floor-sensor-overlay { position: absolute; inset: 0; z-index: 2; pointer-events: none; } /* 기본값: 공간마다 작은 점만 표시. 이름은 hover/포커스/선택 시에만 옆으로 펼쳐서 보여줌 -- 여러 공간이 화면상 가까이 있어도 이름표끼리 겹치거나 옆 공간을 침범해 보이지 않게 하기 위함. */ .standard-space-label { position: absolute; display: inline-flex; align-items: center; width: 14px; height: 14px; padding: 0; border: 2px solid var(--primary); border-radius: 999px; background: #fff; cursor: pointer; pointer-events: auto; overflow: hidden; text-align: center; white-space: nowrap; transform: translate(-50%, -50%); transition: width .16s ease, height .16s ease, padding .16s ease, background .16s ease, box-shadow .16s ease; box-shadow: var(--shadow-sm); z-index: 4; } .standard-space-label-dot { flex: 0 0 auto; width: 6px; height: 6px; margin: 0 auto; border-radius: 50%; background: var(--primary); } .standard-space-label-text { display: inline-block; flex: 0 0 auto; max-width: 0; overflow: hidden; opacity: 0; font-size: 12px; font-weight: 700; color: #fff; transition: max-width .18s ease, opacity .12s ease; } .standard-space-label:hover, .standard-space-label:focus-visible, .standard-space-label.active { width: auto; height: 28px; padding: 0 12px; border-color: rgba(0,87,231,.5); background: var(--primary); box-shadow: 0 8px 20px rgba(0,87,231,.25); z-index: 20; } .standard-space-label:hover .standard-space-label-dot, .standard-space-label:focus-visible .standard-space-label-dot, .standard-space-label.active .standard-space-label-dot { display: none; } .standard-space-label:hover .standard-space-label-text, .standard-space-label:focus-visible .standard-space-label-text, .standard-space-label.active .standard-space-label-text { max-width: 220px; opacity: 1; } .standard-space-label.hidden { opacity: 0; pointer-events: none; transform: translate(-50%, -44%); } /* 선택 공간 폴리곤 오버레이 -- 라벨(z-index:1)/센서·객체 아이콘(z-index:2)보다 아래에 있어야 함(면이 아이콘을 덮어 가리면 안 됨). */ .space-polygon-overlay { position: absolute; inset: 0; z-index: 0; pointer-events: none; width: 100%; height: 100%; overflow: visible; } .space-polygon-overlay-shape { fill: rgba(0, 96, 220, 0.16); stroke: none; } /* 센서 버튼 */ .floor-sensor-button { position: absolute; width: 20px; height: 20px; border-radius: 50%; border: 2px solid rgba(15,169,104,.5); background: rgba(255,255,255,.95); box-shadow: var(--shadow-sm); cursor: pointer; pointer-events: auto; transform: translate(-50%, -50%); transition: transform .16s, box-shadow .16s; } .floor-sensor-button:hover, .floor-sensor-button.is-active { transform: translate(-50%, -50%) scale(1.1); border-color: var(--good); box-shadow: 0 0 0 4px rgba(15,169,104,.18); } .floor-sensor-button.is-object { border-color: var(--marker-border); background: var(--surface); color: var(--marker-color); display: flex; align-items: center; justify-content: center; } .floor-sensor-button.is-object svg { width: 11px; height: 11px; } .floor-sensor-button.is-object:hover, .floor-sensor-button.is-object.is-active { background: var(--marker-color); color: #fff; border-color: var(--marker-color); box-shadow: 0 0 0 4px var(--marker-bg); } .floor-sensor-button.hidden, .floor-sensor-popup.hidden { opacity: 0; pointer-events: none; } /* 센서 팝업 */ .floor-sensor-popup { position: absolute; width: 172px; padding: 10px 11px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); pointer-events: auto; transform: translate(-50%, -50%); } .floor-sensor-popup-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; } .floor-sensor-popup-title { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--ink); } .floor-sensor-popup-title::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--good); box-shadow: 0 0 0 3px var(--good-soft); flex-shrink: 0; } .floor-sensor-popup-close { width: 20px; height: 20px; border: 1px solid var(--line); border-radius: 50%; background: var(--surface-2); color: var(--ink-3); font-size: 11px; font-weight: 700; display: grid; place-items: center; cursor: pointer; transition: background .15s; } .floor-sensor-popup-close:hover { background: var(--line); } .floor-sensor-popup-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; } .floor-sensor-popup-item { padding: 6px 8px; border-radius: 8px; background: var(--surface-2); border: 1px solid var(--line); } .floor-sensor-popup-item.full { grid-column: 1 / -1; } .floor-sensor-popup-item span { display: block; font-size: 9px; font-weight: 700; color: var(--ink-3); margin-bottom: 3px; white-space: nowrap; } .floor-sensor-popup-item strong { display: block; font-size: 12px; font-weight: 700; color: var(--ink); line-height: 1.2; } /* 건물 피크 */ .building-peek-hotspot { position: absolute; left: 39%; top: 31%; width: 29%; height: 47%; z-index: 2; border: 0; background: transparent; cursor: pointer; } .building-peek-hotspot.hidden { display: none; } .monitoring-not-ready { position: absolute; inset: 0; z-index: 1; display: flex; align-items: center; justify-content: center; background: var(--bg-1, #0b1220); padding: 24px; pointer-events: none; } .monitoring-not-ready.hidden { display: none; } .monitoring-not-ready .menu-placeholder-card { max-width: 420px; pointer-events: auto; } .building-peek-stage { position: absolute; inset: 7% 14% 10% 24%; z-index: 3; pointer-events: none; } .building-peek-stage.hidden { display: none; } .building-peek-energy-stack { position: relative; width: 100%; height: 100%; } .building-peek-energy-card { position: absolute; left: 3.5%; top: var(--peek-card-top, 14%); width: 13.2%; min-width: 100px; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius); background: rgba(255,255,255,.88); box-shadow: var(--shadow-sm); backdrop-filter: blur(10px); } .dark .building-peek-energy-card { background: rgba(13,19,32,.88); border-color: var(--line); } .building-peek-energy-card::after { content: ""; position: absolute; right: -13px; top: 50%; width: 13px; height: 1px; background: var(--line-s); } .building-peek-energy-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; margin-bottom: 3px; } .building-peek-energy-floor { color: var(--ink-3); font-size: 10px; font-weight: 700; } .building-peek-energy-main { color: var(--ink); font-size: 11px; font-weight: 800; letter-spacing: -.02em; } .building-peek-energy-row { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding-top: 4px; margin-top: 3px; border-top: 1px solid var(--line); color: var(--ink-3); font-size: 9px; font-weight: 700; } .building-peek-energy-row strong { color: var(--ink); font-size: 9px; font-weight: 800; } .building-peek-stack { position: relative; width: 100%; height: 100%; } .building-peek-floor { position: absolute; left: 54%; top: 72%; width: 28%; height: 19%; transform: translate(-50%,-50%) translateY(calc(var(--peek-depth)*-20%)) translateX(calc(var(--peek-depth)*1.1%)); border: 0; border-radius: 0; background: transparent; box-shadow: none; pointer-events: auto; transition: transform .22s, filter .22s; } .building-peek-floor:hover { transform: translate(-50%,-50%) translateY(calc(var(--peek-depth)*-20% - .8%)) translateX(calc(var(--peek-depth)*1.1% + .4%)); filter: brightness(1.04); } .building-peek-floor.active { filter: brightness(1.06); } .building-peek-label { position: absolute; left: -10px; bottom: 10px; color: var(--ink-2); font-size: 15px; font-weight: 800; letter-spacing: -.01em; text-shadow: 0 2px 8px rgba(255,255,255,.7); } .dark .building-peek-label { text-shadow: 0 2px 8px rgba(0,0,0,.6); } .building-peek-slab { position: absolute; inset: 0; background: transparent; overflow: visible; } .building-peek-floor-face { position: absolute; left: 14px; right: 22px; top: 12px; bottom: 18px; border-radius: 2px; background: linear-gradient(180deg, rgba(200,208,220,.98) 0%, rgba(178,186,198,.98) 100%); border: 1px solid rgba(140,148,160,.8); box-shadow: inset 0 2px 0 rgba(255,255,255,.4), 0 10px 20px rgba(30,50,90,.08); } .dark .building-peek-floor-face { background: linear-gradient(180deg, rgba(40,52,72,.98) 0%, rgba(30,42,62,.98) 100%); border-color: rgba(50,65,90,.8); } .building-peek-floor-front { position: absolute; left: 0; right: 0; bottom: 0; height: 18px; background: linear-gradient(180deg, rgba(0,87,231,.9) 0%, rgba(0,65,180,.9) 100%); border: 1px solid rgba(0,65,180,.9); box-shadow: 0 6px 14px rgba(0,65,180,.22); } .building-peek-floor-side { position: absolute; right: 0; top: 16px; bottom: 18px; width: 18px; transform: skewY(-34deg); transform-origin: top left; background: linear-gradient(180deg, rgba(168,172,184,.98) 0%, rgba(140,144,156,.98) 100%); border: 1px solid rgba(128,132,144,.9); border-left: 0; } .dark .building-peek-floor-side { background: linear-gradient(180deg, rgba(35,45,65,.98) 0%, rgba(25,35,55,.98) 100%); } .building-peek-balconies { display: none; } .building-peek-floor-shadow { position: absolute; left: 8%; right: 10%; bottom: -10px; height: 14px; border-radius: var(--r-pill); background: rgba(30,50,90,.1); filter: blur(8px); overflow: hidden; } /* 뷰어 그라디언트 */ .viewer-gradient { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at center, transparent 40%, rgba(235,242,251,.12) 80%, rgba(225,235,248,.22) 100%); } .dark .viewer-gradient { background: radial-gradient(circle at center, transparent 40%, rgba(7,11,20,.12) 80%, rgba(6,10,18,.28) 100%); } /* 제어 모드 스위치 */ .control-mode-switch { position: absolute; top: 16px; left: 50%; transform: translateX(-50%); z-index: 10; display: flex; gap: 3px; background: var(--hud-bg); border: 1px solid var(--line); border-radius: 10px; padding: 3px; backdrop-filter: var(--hud-blur); box-shadow: var(--shadow-sm); } .control-mode-button { padding: 6px 18px; border-radius: 7px; border: 0; background: transparent; color: var(--ink-3); font-size: 12px; font-weight: 700; transition: all .15s; font-family: inherit; } .control-mode-button.active { background: var(--primary); color: var(--primary-ink); } .dark .control-mode-button.active { color: #fff; } /* ══ HUD 패널 공통 ══ */ .hud-panel, .hud-bottom-bar { position: absolute; z-index: 2; } .hud-panel { border: 1px solid var(--line-s); background: var(--hud-bg); border-radius: var(--radius-lg); box-shadow: 0 2px 8px rgba(15,23,42,.08), 0 12px 32px -8px rgba(15,23,42,.16); backdrop-filter: var(--hud-blur); } .dark .hud-panel { box-shadow: 0 2px 8px rgba(0,0,0,.20), 0 12px 32px -8px rgba(0,0,0,.32); } /* HUD 좌측 */ .hud-left { left: 18px; top: 70px; width: 286px; padding: 16px; max-height: calc(100% - 88px); display: flex; flex-direction: column; overflow: hidden; } /* HUD 우측 (공간 상세) */ .hud-right { right: 18px; top: 18px; width: 340px; padding: 16px; } .hidden-building-detail { display: none; } /* HUD 헤더 */ .hud-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; flex-shrink: 0; } .hud-head h3 { margin: 0; font-size: 14px; font-weight: 700; color: var(--ink); display: flex; align-items: center; gap: 8px; letter-spacing: -.01em; } .card-title-icon { width: 22px; height: 22px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; background: var(--primary-soft); color: var(--primary); flex-shrink: 0; } .card-title-icon svg { width: 13px; height: 13px; display: block; } .card-title-icon--alert { background: var(--bad-soft); color: var(--bad); } /* JS 동적 생성 카드 아이콘 (icon-* 클래스) */ .icon-energy::before { content: ""; display:block; width:13px; height:13px; background: currentColor; mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.5' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 2L4 9h5l-2 5 7-8H9l2-4z' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat; -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.5' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 2L4 9h5l-2 5 7-8H9l2-4z' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat; } .icon-building::before { content: ""; display:block; width:13px; height:13px; background: currentColor; mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.5' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='2' y='5' width='12' height='10' rx='1'/%3E%3Cpath d='M5 15V9h6v6'/%3E%3Cpath d='M6 5V3a2 2 0 0 1 4 0v2'/%3E%3C/svg%3E") center/contain no-repeat; -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.5' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='2' y='5' width='12' height='10' rx='1'/%3E%3Cpath d='M5 15V9h6v6'/%3E%3Cpath d='M6 5V3a2 2 0 0 1 4 0v2'/%3E%3C/svg%3E") center/contain no-repeat; } .icon-control::before { content: ""; display:block; width:13px; height:13px; background: currentColor; mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.5' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='8' cy='8' r='2.5'/%3E%3Cpath d='M8 1v2M8 13v2M1 8h2M13 8h2M3.1 3.1l1.4 1.4M11.5 11.5l1.4 1.4M3.1 12.9l1.4-1.4M11.5 4.5l1.4-1.4'/%3E%3C/svg%3E") center/contain no-repeat; -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.5' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='8' cy='8' r='2.5'/%3E%3Cpath d='M8 1v2M8 13v2M1 8h2M13 8h2M3.1 3.1l1.4 1.4M11.5 11.5l1.4 1.4M3.1 12.9l1.4-1.4M11.5 4.5l1.4-1.4'/%3E%3C/svg%3E") center/contain no-repeat; } .icon-infra::before { content: ""; display:block; width:13px; height:13px; background: currentColor; mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.5' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 1l3 5H5l3-5z'/%3E%3Ccircle cx='4' cy='12' r='2.5'/%3E%3Ccircle cx='12' cy='12' r='2.5'/%3E%3Cpath d='M7 10.5H5M11 10.5h-2M8 6v3'/%3E%3C/svg%3E") center/contain no-repeat; -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.5' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 1l3 5H5l3-5z'/%3E%3Ccircle cx='4' cy='12' r='2.5'/%3E%3Ccircle cx='12' cy='12' r='2.5'/%3E%3Cpath d='M7 10.5H5M11 10.5h-2M8 6v3'/%3E%3C/svg%3E") center/contain no-repeat; } .icon-alert::before { content: ""; display:block; width:13px; height:13px; background: currentColor; mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.5' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 2L1.5 13h13L8 2z' stroke-linejoin='round'/%3E%3Cpath d='M8 6v3.5M8 11.5v.5' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat; -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.5' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 2L1.5 13h13L8 2z' stroke-linejoin='round'/%3E%3Cpath d='M8 6v3.5M8 11.5v.5' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat; } .card-title-icon.icon-alert { background: var(--bad-soft); color: var(--bad); } .reference-status-card.energy-card .card-title-icon { background: var(--accent-soft); color: var(--accent); } .reference-status-card.infra-card .card-title-icon { background: var(--surface-2); color: var(--ink-2); } .hud-head span { font-size: 11px; color: var(--ink-3); font-weight: 600; } /* 패널 카드 헤더 actions + collapse 버튼 */ .panel-card-header-actions { display: inline-flex; align-items: center; margin-left: auto; } .card-collapse-button { width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line-s); border-radius: var(--r-pill); background: var(--surface); color: var(--ink-3); padding: 0; flex-shrink: 0; transition: border-color .16s, color .16s, background .16s; } .card-collapse-button:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-soft); } .card-collapse-button::before { content: ""; width: 6px; height: 6px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: rotate(45deg) translateY(-1px); transition: transform .16s; } .reference-status-card.is-collapsed .card-collapse-button::before { transform: rotate(-135deg) translateY(-1px); } .panel-back-button { padding: 5px 12px; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--surface); color: var(--primary); font-size: 11px; font-weight: 700; transition: background .15s; } .panel-back-button:hover { background: var(--primary-soft); } .panel-back-button.hidden { display: none; } /* 패널 필드 */ .panel-field { display: grid; gap: 6px; margin-bottom: 12px; } .panel-field-label { font-size: 11px; color: var(--ink-3); font-weight: 600; letter-spacing: .02em; } .panel-subsection-label { font-size: 11px; color: var(--ink-3); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 8px; display: block; border-left: 2px solid var(--primary); padding-left: 6px; } /* 랩 셀렉트 */ .lab-select { position: relative; } .lab-select-trigger { width: 100%; display: flex; align-items: center; justify-content: space-between; border: 1px solid var(--line-s); border-radius: var(--radius); padding: 10px 14px; background: var(--surface); color: var(--ink); font-size: 13px; font-weight: 700; box-shadow: var(--shadow-sm); transition: border-color .15s, box-shadow .15s; } .lab-select-trigger:hover { border-color: var(--primary); } .lab-select-trigger.is-disabled { cursor: not-allowed; opacity: .6; } .lab-select-trigger.is-disabled:hover { border-color: var(--line-s); } .lab-select.open .lab-select-trigger, .lab-select-trigger:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(0,87,231,.12); } .lab-select-arrow { color: var(--ink-3); font-size: 12px; transition: transform .18s; } .lab-select.open .lab-select-arrow { transform: rotate(180deg); } .lab-select-menu { position: absolute; left: 0; right: 0; top: calc(100% + 6px); display: none; padding: 6px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); backdrop-filter: var(--hud-blur); z-index: 4; } .lab-select.open .lab-select-menu { display: grid; gap: 3px; } .lab-select-option { width: 100%; padding: 9px 12px; border: 1px solid transparent; border-radius: 9px; background: transparent; color: var(--ink-2); text-align: left; font-size: 13px; font-weight: 600; transition: background .15s; } .lab-select-option:hover, .lab-select-option.active { background: var(--primary-soft); border-color: rgba(0,87,231,.15); color: var(--primary); } /* 건물 요약 그리드 */ .building-summary-grid { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; } .building-summary-row { display: flex; align-items: center; justify-content: space-between; padding: 8px 10px; border-radius: 9px; background: var(--surface-2); border: 1px solid var(--line); font-size: 12px; } .building-summary-row span { color: var(--ink-3); } .building-summary-row strong { color: var(--ink); font-weight: 700; } /* 탭 로우 */ .tab-row { display: flex; gap: 0; margin: 10px 0 12px; background: transparent; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: 0; flex-shrink: 0; } .mini-tab { flex: 1; min-height: 30px; padding: 0 10px 6px; border-radius: 0; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--ink-3); font-size: 12px; font-weight: 700; transition: all .15s; margin-bottom: -1px; } .mini-tab.active { background: transparent; border-bottom-color: var(--primary); color: var(--primary); } /* 탭 패널 */ .tab-panel { display: none; min-height: 0; } .tab-panel.active { display: block; flex: 1; overflow-y: auto; padding-right: 2px; } .tab-panel.active::-webkit-scrollbar { width: 4px; } .tab-panel.active::-webkit-scrollbar-thumb { border-radius: 2px; background: var(--line-s); } /* 스페이스 트리 */ .tree-root { display: grid; gap: 6px; } .tree-group { display: grid; gap: 6px; } .tree-floor-button { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 9px 12px; border: 1px solid var(--line-s); border-radius: var(--radius); background: var(--surface); color: var(--ink); font-size: 13px; font-weight: 700; min-height: 38px; box-shadow: var(--shadow-sm); transition: all .15s; } .tree-floor-button:hover { border-color: var(--primary); } .tree-floor-button.active { background: var(--primary-soft); border-color: rgba(0,87,231,.25); color: var(--primary); } .dark .tree-floor-button.active { color: var(--primary); } .tree-floor-arrow { color: var(--ink-3); font-size: 16px; line-height: 1; } .tree-children { display: none; gap: 6px; padding-left: 4px; } .tree-children.expanded { display: grid; } .space-item, .facility-item { padding: 10px 12px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface); min-height: 38px; transition: all .15s; } .space-item { width: 100%; text-align: left; } .space-item:hover, .facility-item:hover { border-color: var(--primary); } .space-item.active, .facility-item.active { border-color: rgba(0,87,231,.3); background: var(--primary-soft); box-shadow: 0 4px 12px rgba(0,87,231,.12); } .space-item strong { display: block; font-size: 13px; color: var(--ink); } .space-item span { display: block; margin-top: 3px; font-size: 11px; color: var(--ink-3); } .facility-item { width: 100%; text-align: left; font-size: 12px; font-weight: 700; color: var(--ink-2); } .facility-item strong { display: block; font-size: 13px; color: var(--ink); } .facility-item span { display: block; margin-top: 3px; font-size: 11px; color: var(--ink-3); font-weight: 500; } .facility-space-group { display: grid; gap: 6px; } .facility-space-label { padding: 0 2px; font-size: 11px; font-weight: 700; color: var(--ink-3); } .facility-space-group + .facility-space-group { margin-top: 8px; } .facility-empty { padding: 10px 12px; font-size: 12px; color: var(--ink-3); } /* ══ 인사이트 패널 (우측 오버레이) ══ */ .building-insight-panel { position: absolute; top: 18px; right: 18px; bottom: 18px; width: 230px; z-index: 10; display: flex; flex-direction: column; gap: 8px; overflow-y: auto; scrollbar-width: none; } .building-insight-panel::-webkit-scrollbar { display: none; } .reference-status-card { background: var(--hud-bg); border: 1px solid var(--line); border-radius: var(--radius); backdrop-filter: var(--hud-blur); box-shadow: var(--shadow-sm); overflow: hidden; flex-shrink: 0; } .panel-card-header { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; border-bottom: 1px solid var(--line); } .panel-card-header h3 { font-size: 12px; font-weight: 700; color: var(--ink); display: flex; align-items: center; gap: 6px; } .panel-card-header > span { font-size: 10px; color: var(--primary); font-weight: 700; } /* 에너지 링 */ .reference-card-body { padding: 10px 12px; } .reference-ring { position: relative; width: 54px; height: 54px; float: left; margin-right: 10px; margin-bottom: 8px; } .reference-ring::before { content: attr(data-val); position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; color: var(--ink); } /* 링 SVG는 JS에서 생성하지 않으므로 CSS로 표현 */ .reference-ring { background: conic-gradient(var(--accent) 0% 82%, var(--line-s) 82% 100%); border-radius: 50%; } .reference-ring::after { content: ""; position: absolute; inset: 8px; background: var(--hud-bg); border-radius: 50%; } .reference-ring strong { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 1; font-size: 13px; font-weight: 800; color: var(--ink); flex-direction: column; line-height: 1; } .reference-ring strong span { font-size: 9px; color: var(--ink-3); font-weight: 600; } .reference-ring.orange { background: conic-gradient(var(--accent) 0% 82%, var(--line-s) 82% 100%); } .reference-metric-list { overflow: hidden; } .reference-metric-row { display: flex; justify-content: space-between; align-items: center; font-size: 11px; padding: 3px 0; } .reference-metric-row span { color: var(--ink-3); } .reference-metric-row strong { color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; } /* 미니 차트 */ .reference-mini-chart { padding: 8px 12px; border-top: 1px solid var(--line); } .reference-mini-chart > span { display: block; font-size: 10px; color: var(--ink-3); margin-bottom: 5px; font-weight: 600; } .reference-mini-chart svg { width: 100%; height: 32px; overflow: visible; } .reference-mini-chart svg path { fill: none; stroke: var(--primary); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } /* 제어 현황 */ .control-metric-list { padding: 8px 12px 4px; } .control-metric-row { display: flex; justify-content: space-between; font-size: 11px; color: var(--ink-2); margin-bottom: 8px; } .control-metric-row strong { color: var(--ink); font-weight: 700; } .control-mix-panel { padding: 0 12px 10px; } .control-mix-track { height: 8px; border-radius: 4px; overflow: hidden; display: flex; margin-bottom: 8px; border: 1px solid var(--line); } .control-mix-segment { height: 100%; } .control-mix-fcu { flex: 4; background: var(--primary); } .control-mix-light { flex: 3; background: var(--accent); } .control-mix-oau { flex: 1.5; background: var(--good); opacity: .85; } .control-mix-vent { flex: 1; background: var(--ink-3); opacity: .7; } .control-mix-legend { display: flex; flex-wrap: wrap; gap: 6px; } .control-mix-legend > span { display: flex; align-items: center; gap: 4px; font-size: 10px; color: var(--ink-2); } .control-mix-dot { display: inline-block; width: 7px; height: 7px; border-radius: 2px; flex-shrink: 0; } .control-mix-dot-fcu { background: var(--primary); } .control-mix-dot-light { background: var(--accent); } .control-mix-dot-oau { background: var(--good); } .control-mix-dot-vent { background: var(--ink-3); } /* 인프라 미터 */ .reference-meter-list { display: flex; flex-direction: column; gap: 8px; } .reference-meter-row { display: flex; flex-direction: column; gap: 4px; } .reference-meter-row > span { font-size: 11px; color: var(--ink-3); } .reference-meter-row > strong { font-size: 12px; color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; } .meter-fill { height: 5px; border-radius: 3px; background: var(--line-s); overflow: hidden; position: relative; } .meter-fill.wide { background: linear-gradient(90deg, var(--good) 98%, var(--line-s) 98%); } .meter-fill.medium { background: linear-gradient(90deg, var(--primary) 97%, var(--line-s) 97%); } .meter-fill.narrow { background: linear-gradient(90deg, var(--warn) 2%, var(--line-s) 2%); } /* 알람 */ .alert-badge { font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: var(--r-pill); background: var(--bad-soft); color: var(--bad); border: 1px solid rgba(228,67,90,.25); } .reference-alert-list { padding: 6px 12px 10px; display: flex; flex-direction: column; gap: 4px; } .reference-alert-row { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 8px; background: rgba(228,67,90,.05); border: 1px solid rgba(228,67,90,.1); font-size: 11px; } .alert-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--bad); flex-shrink: 0; } .reference-alert-row > span { color: var(--ink-2); flex: 1; } .reference-alert-row > strong { color: var(--bad); font-weight: 700; font-variant-numeric: tabular-nums; } .alert-critical { background: rgba(228,67,90,.08); border-color: rgba(228,67,90,.2); } .alert-critical .alert-dot { background: var(--bad); box-shadow: 0 0 0 3px rgba(228,67,90,.18); } .alert-critical > strong { color: var(--bad); } .alert-warn { background: rgba(217,119,6,.06); border-color: rgba(217,119,6,.15); } .alert-warn .alert-dot { background: var(--warn); } .alert-warn > strong { color: var(--warn); } .alert-info { background: var(--surface-2); border-color: var(--line); } .alert-info .alert-dot { background: var(--ink-3); } .alert-info > strong { color: var(--ink-2); } /* ══ 표준 공간 모델 수 확장 드롭다운 ══ */ .summary-expand-row { display: block !important; width: 100%; padding: 0 !important; overflow: hidden; flex-direction: unset !important; align-items: unset !important; justify-content: unset !important; } .summary-expand-trigger { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 8px 10px; background: transparent; border: 0; color: inherit; cursor: pointer; font-size: 12px; text-align: left; transition: background .15s; box-sizing: border-box; } .summary-expand-trigger:hover { background: var(--primary-soft); border-radius: 9px; } .summary-expand-trigger > span { color: var(--ink-3); flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .summary-expand-trigger > strong { color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; flex-shrink: 0; } .summary-expand-caret { color: var(--ink-3); font-size: 11px; font-style: normal; transition: transform .18s; flex-shrink: 0; } .summary-expand-row.is-open .summary-expand-caret { transform: rotate(180deg); } .summary-expand-content { display: none; border-top: 1px solid var(--line); padding: 4px 0 2px; } .summary-expand-row.is-open .summary-expand-content { display: block; } .summary-model-list { display: flex; flex-direction: column; gap: 1px; padding: 0 4px; } .summary-model-item { display: flex; align-items: center; justify-content: space-between; padding: 4px 8px; border-radius: 6px; font-size: 11px; transition: background .12s; white-space: nowrap; } .summary-model-item:hover { background: var(--surface-2); } .summary-model-item > span { color: var(--ink-2); } .summary-model-item > strong { color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; } /* ══ 우측 HUD — 공간 상세 ══ */ .info-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-bottom: 10px; } .info-card { padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-2); } .info-label { font-size: 10px; color: var(--ink-3); font-weight: 600; margin-bottom: 5px; letter-spacing: .02em; } .info-card strong { display: block; font-size: 13px; font-weight: 700; color: var(--ink); line-height: 1.3; } .metric-stack { display: grid; gap: 8px; } .metric-card { padding: 11px 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-2); } .metric-label { font-size: 10px; color: var(--ink-3); font-weight: 600; margin-bottom: 5px; } .metric-card strong { display: block; font-size: 20px; font-weight: 800; color: var(--ink); letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1; } .metric-card small { display: block; margin-top: 4px; font-size: 11px; color: var(--good); font-weight: 600; } .metric-bar { margin-top: 8px; height: 5px; border-radius: 3px; overflow: hidden; background: var(--line); } .metric-bar i { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--primary), var(--good)); } /* ══ 하단 KPI 바 — 사용 안 함 ══ */ .hud-bottom-bar { display: none !important; } .bottom-kpi-card { border: 1px solid var(--line); border-radius: var(--radius); background: var(--hud-bg); padding: 11px 13px; backdrop-filter: var(--hud-blur); box-shadow: var(--shadow-sm); } .bottom-kpi-card .info-label { margin-bottom: 6px; } .bottom-kpi-card strong { display: block; font-size: 20px; font-weight: 800; color: var(--ink); letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1; } .bottom-kpi-card small { display: block; margin-top: 4px; font-size: 10px; color: var(--ink-3); } /* ══ 패널 카드 타이틀 그룹 ══ */ .panel-card-title-group { display: inline-flex; align-items: center; gap: 8px; min-width: 0; flex-wrap: wrap; } /* ══ 카드 접힘 (is-collapsed) ══ */ .reference-status-card.is-collapsed > :not(.panel-card-header) { display: none !important; } .reference-status-card.is-collapsed .panel-card-header { margin-bottom: 0; } /* ══ 에너지 카드 상세 ══ */ .energy-stack { display: grid; gap: 10px; } .energy-metric-block { display: grid; gap: 8px; } .energy-metric-block + .energy-metric-block { padding-top: 10px; border-top: 1px solid var(--line); } .energy-row-primary, .energy-row-delta, .energy-row-peak { grid-template-columns: 1fr auto; } .energy-row-primary strong, .energy-row-peak strong { font-size: 18px; } .energy-submetrics { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .energy-submetric { padding: 10px 12px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--line); display: grid; gap: 4px; } .energy-submetric span { color: var(--ink-3); font-size: 11px; font-weight: 700; } .energy-submetric strong { color: var(--ink); font-size: 12px; font-weight: 800; } .delta-positive { color: var(--bad) !important; } .delta-negative { color: var(--good) !important; } /* ══ 제어 현황 보조 행 ══ */ .floor-control-metric-list .control-metric-row-secondary { color: var(--ink-3); font-size: 11.5px; } .floor-control-metric-list .control-metric-row-secondary strong { font-size: 12px; } /* ══ 환경 모니터링 카드 ══ */ .floor-environment-grid { display: grid; gap: 8px; } .reference-status-card.environment-card .floor-environment-grid { gap: 6px; } .floor-environment-item { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--line); color: var(--ink-2); font-size: 12px; } .reference-status-card.environment-card .floor-environment-item { padding: 9px 12px; } .floor-environment-item strong { color: var(--ink); font-size: 13px; font-weight: 800; white-space: nowrap; } /* ══ 에너지 트렌드 차트 ══ */ .energy-trend-chart { position: relative; } .energy-trend-chart svg { width: 140px; height: 44px; } .energy-trend-chart .chart-axis { display: none; } .energy-trend-chart .chart-label { display: none; } .energy-trend-chart .chart-line { fill: none; stroke: var(--accent); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; } .energy-trend-chart .chart-point { fill: var(--accent); stroke: var(--surface); stroke-width: 1.5; cursor: pointer; opacity: 0; transition: opacity .15s; } .energy-trend-chart:hover .chart-point { opacity: 1; } .energy-chart-tooltip { position: absolute; z-index: 4; padding: 6px 8px; border-radius: 8px; background: rgba(7,11,20,.92); color: #fff; font-size: 11px; font-weight: 700; white-space: nowrap; pointer-events: none; transform: translateY(-100%); box-shadow: 0 10px 24px rgba(0,0,0,.25); } /* ══ KPI 배지 ══ */ .card-kpi-badge { display: inline-flex; align-items: center; min-height: 24px; padding: 0 10px; border-radius: var(--r-pill); font-size: 11px !important; font-weight: 800 !important; white-space: nowrap; } .card-kpi-badge-energy { color: var(--warn) !important; background: var(--warn-soft); } .card-kpi-badge-environment { color: var(--good) !important; background: var(--good-soft); } .card-kpi-badge-control { color: var(--primary) !important; background: var(--primary-soft); } .card-kpi-badge-infra { color: var(--ink-2) !important; background: var(--surface-2); border: 1px solid var(--line); } /* ══ 카메라 디버그 패널 ══ */ .camera-debug-panel { position: absolute; left: 16px; bottom: 16px; z-index: 10; pointer-events: none; } .camera-debug-row { display: flex; align-items: center; gap: 6px; font-size: 9px; line-height: 1.6; color: var(--ink-3); font-variant-numeric: tabular-nums; } .camera-debug-row span { color: var(--ink-3); opacity: .7; } .camera-debug-row strong { color: var(--ink-2); font-weight: 600; } /* ══ 반응형 ══ */ @media (max-width: 1680px) { .hud-left { width: 260px; } .building-insight-panel { width: 210px; } .hud-right { width: 300px; } .hud-bottom-bar { left: 296px; right: 246px; } } @media (max-width: 1180px) { body, body.embed-mode { overflow: auto; } .workspace, body.embed-mode .workspace { height: auto; min-height: 100vh; overflow: visible; padding: 10px; } .workspace-frame, body.embed-mode .workspace-frame { min-height: auto; gap: 10px; } .drawing-space-toolbar, .drawing-space-layout, .system-line-toolbar, .building-management-toolbar, .code-management-layout, .system-line-layout, .building-management-layout, .system-line-form-grid { grid-template-columns: 1fr; } .drawing-space-summary-grid, .drawing-space-mode-switch, .drawing-space-space-list, .system-line-form-grid, .building-management-form-grid { grid-template-columns: 1fr; } .drawing-space-card-head, .system-line-card-head { flex-direction: column; } .model-stage-shell, body.embed-mode .model-stage-shell { display: grid; grid-template-columns: 1fr; gap: 10px; min-height: auto; padding-top: 10px; } .space-model-viewer { position: relative; order: 2; height: min(60vh, 520px); min-height: 380px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface-2); box-shadow: var(--shadow); } .standard-space-labels, .building-peek-hotspot, .building-peek-stage, .viewer-gradient { display: none; } .hud-panel, .hud-bottom-bar { position: relative; left: auto; right: auto; top: auto; bottom: auto; z-index: 3; width: 100%; max-height: none; backdrop-filter: none; } .hud-left { order: 1; padding: 14px; overflow: visible; } .hud-right { order: 3; padding: 14px; } .building-insight-panel { position: relative; right: auto; top: auto; bottom: auto; width: 100%; order: 4; flex-direction: row; flex-wrap: wrap; overflow: visible; } .reference-status-card { flex: 1 1 calc(50% - 4px); } .hud-bottom-bar { order: 5; position: relative; left: auto; right: auto; bottom: auto; grid-template-columns: repeat(2, 1fr); } .control-mode-switch { position: relative; transform: none; left: auto; top: auto; width: 100%; order: 1; } } @media (max-width: 640px) { .workspace, body.embed-mode .workspace { padding: 8px; } .monitoring-platform-bar { gap: 8px; flex-wrap: wrap; width: auto; margin: 0; padding: 10px 14px 0; } .workspace-route-label { white-space: normal; font-size: 12px; } .drawing-space-shell, .system-line-shell, .building-management-shell, .code-management-shell { padding: 14px 14px 14px; } .drawing-space-toolbar, .drawing-space-floor-card, .drawing-space-preview-card, .drawing-space-detail-card, .system-line-toolbar, .system-line-tree-card, .system-line-detail-card, .building-management-toolbar, .building-management-list-card, .building-management-detail-card, .code-management-card, .code-management-editor-card { padding: 16px; border-radius: 18px; } .building-management-list-head, .building-management-list-row { grid-template-columns: 24px minmax(100px, 1.2fr) minmax(74px, .8fr) minmax(84px, .95fr) minmax(84px, .9fr) 48px; } .code-management-list-head.is-group, .code-management-list-row.is-group { grid-template-columns: 24px repeat(5, minmax(72px, 1fr)); } .code-management-list-head.is-code, .code-management-list-row.is-code { grid-template-columns: 24px repeat(6, minmax(72px, 1fr)); } .code-management-modal-dialog { width: calc(100vw - 28px); max-height: calc(100vh - 32px); } .code-management-modal-head { flex-direction: column; align-items: stretch; } .space-model-viewer { min-height: 340px; height: 50vh; } .hud-panel { border-radius: var(--radius); padding: 13px; } .info-grid, .hud-bottom-bar { grid-template-columns: 1fr; } .metric-card strong, .bottom-kpi-card strong { font-size: 18px; } .reference-status-card { flex: 1 1 100%; } } /* ══ 접근성 ══ */ .floating-chip:focus-visible, .mini-tab:focus-visible, .tree-floor-button:focus-visible, .space-item:focus-visible, .facility-item:focus-visible, .standard-space-label:focus-visible, .panel-back-button:focus-visible, .lab-select-trigger:focus-visible, .lab-select-option:focus-visible, .monitoring-tab-chip:focus-visible, .control-mode-button:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } } /* ══ 스크롤바 ══ */ ::-webkit-scrollbar { width: 5px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--line-s); border-radius: 3px; } /* ══════════════════════════════════════════════════════════════ 통합 모니터링 (TOS 통합대시보드 이식) -- 옛 index.html/app.js/styles.css의 지도+KPI 카드 레이아웃을 이 파일의 디자인 토큰 체계로 재구성. ══════════════════════════════════════════════════════════════ */ .integrated-monitoring-shell { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; padding: 14px 24px 22px; background: linear-gradient(160deg, #EFEFF3 0%, #E2E3EC 100%); } .dark .integrated-monitoring-shell { background: linear-gradient(160deg, #0C1526 0%, #091220 100%); } .integrated-monitoring-shell[hidden] { display: none !important; } /* AI 자율제어 4화면(integration/autonomous-control 이식) 호스트 -- 안쪽 콘텐츠 (.module-page/.page-shell)가 자기 padding/배경을 이미 갖고 있어서 여기선 순수 flex 컨테이너 역할만 함(패딩/배경 중복 지정 안 함). */ .ai-screen-shell { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; } .ai-screen-shell[hidden] { display: none !important; } .ai-screen-shell > .monitoring-platform-bar { flex-shrink: 0; padding: 18px 24px 0; } .ai-screen-shell > .module-page, .ai-screen-shell > .page-shell { flex: 1; min-height: 0; overflow: auto; } /* .page-shell는 ai-module-management/ai-control-admin/ai-control-history 3개 파일이 각자 정의해서 이 페이지에선 셋이 뒤섞여 적용됨(같은 클래스, 나중에 로드된 파일이 이김) -- 그 중 아무도 grid-template-rows를 명시 안 해서 브라우저가 자동계산한 1행 높이가 필요 이상으로 커지는 문제가 있었음 (제목

지운 뒤 실측: 106px, 실제 내용은 34px). 명시적으로 지정해서 고침. */ .ai-screen-shell .page-shell { grid-template-rows: auto 1fr; } .integrated-monitoring-page { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 14px; overflow-y: auto; } .integrated-monitoring-filters { display: flex; flex-wrap: wrap; gap: 8px; } .filter-chip { padding: 8px 14px; border: 1px solid var(--line-s); border-radius: var(--r-pill); background: var(--surface); color: var(--ink-2); font-size: 12px; font-weight: 600; cursor: pointer; transition: background .14s, border-color .14s, color .14s; } .filter-chip:hover { background: var(--surface-2); } .filter-chip.active { background: var(--primary); border-color: var(--primary); color: var(--primary-ink); } .integrated-monitoring-layout { flex: 1; min-height: 560px; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(340px, 0.85fr); gap: 14px; align-items: stretch; } .integrated-map-panel { display: flex; flex-direction: column; min-height: 0; padding: 14px; border: 1px solid var(--line-s); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-sm); } .integrated-map-panel .panel-headline h3 { margin: 0 0 10px; font-size: 14px; font-weight: 700; color: var(--ink); } .integrated-map-stage { position: relative; flex: 1; min-height: 420px; border: 1px solid var(--line-s); border-radius: var(--radius); overflow: hidden; } .integrated-leaflet-map { position: absolute; inset: 0; } .integrated-map-loading, .integrated-map-fallback { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 20px; text-align: center; color: var(--ink-3); font-size: 12px; background: var(--surface-2); } .integrated-detail-panel { display: grid; grid-template-rows: repeat(3, minmax(0, auto)); gap: 14px; min-height: 0; overflow-y: auto; } .integrated-detail-card { padding: 14px; border: 1px solid var(--line-s); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-sm); } .integrated-detail-card .system-line-card-head { margin-bottom: 10px; } .integrated-profile-grid, .integrated-ops-card-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .integrated-infra-split-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .integrated-infra-split-head { margin: 0 0 6px; color: var(--ink-3); font-size: 11px; font-weight: 700; } .integrated-infra-card-grid { display: grid; gap: 8px; } .profile-item, .ops-stat, .infra-stat { padding: 12px; border: 1px solid var(--line-s); border-radius: var(--radius); background: var(--surface-2); } .profile-label, .ops-label, .infra-label { color: var(--ink-3); font-size: 11px; font-weight: 600; margin-bottom: 4px; } .profile-value, .ops-value, .infra-value { color: var(--ink); font-size: 16px; font-weight: 700; } .ops-value span, .infra-value span { margin-left: 3px; font-size: 11px; font-weight: 600; color: var(--ink-3); } .ops-sub, .infra-sub { margin-top: 4px; color: var(--ink-3); font-size: 11px; } .infra-gauge { margin-top: 8px; height: 4px; border-radius: var(--r-pill); background: var(--line); overflow: hidden; } .infra-gauge-fill { height: 100%; background: var(--primary); border-radius: var(--r-pill); } /* 리빙랩 지도 마커 -- Leaflet divIcon으로 렌더링됨 */ .compass-marker { position: relative; display: grid; justify-items: center; gap: 6px; cursor: pointer; } .compass-pin { width: 20px; height: 20px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: var(--marker-color, var(--primary)); box-shadow: 0 0 0 4px rgba(0, 87, 231, .14), 0 8px 14px rgba(15, 23, 42, .18); } .compass-marker-label { display: inline-flex; align-items: center; justify-content: center; min-width: 70px; max-width: 150px; padding: 3px 9px; border-radius: var(--r-pill); background: var(--surface); border: 1px solid var(--line-s); color: var(--ink); font-size: 11px; font-weight: 700; white-space: nowrap; box-shadow: var(--shadow-sm); } @media (max-width: 1180px) { .integrated-monitoring-layout { grid-template-columns: 1fr; min-height: auto; } .integrated-map-stage { min-height: 420px; } } @media (max-width: 760px) { .integrated-profile-grid, .integrated-ops-card-grid, .integrated-infra-split-grid { grid-template-columns: 1fr; } }