/* pro_dashboard.css — 프리미엄 테마(PRO). 전부 .pro-root 스코프로 격리(운영 CSS 무충돌). keyframes 접두사 pro-. 딥 네이비 컨트롤룸 + 아이스 시안. 폰트=Pretendard(운영에서 CDN 로드됨). */ /* PRO 활성 시 하단 크롬 숨김(오버레이가 덮지만 안전장치) */ body.pro-active { overflow: hidden; } body.pro-active .page-header, body.pro-active footer { display: none !important; } /* ⚠ hidden 속성이 반드시 이기게 한다. 브라우저 기본 규칙 [hidden]{display:none} 은 특이도 0-0-1 이라 .pro-root .sv-msg{display:grid} / .badge{display:grid} / .chapter{display:grid} 같은 규칙에 진다. 그 결과 el.hidden = true 로 숨긴 요소가 화면에 그대로 남아, 앞 질문의 AI 답변이 다음 질문의 전사 위에 겹쳐 보였고 알람 0건에도 배지가 떴다. display 를 지정하는 규칙을 새로 추가할 때마다 재발하므로 여기서 한 번에 막는다. */ .pro-root [hidden] { display: none !important; } /* PRO 활성 시 기본 테마의 로딩 오버레이 숨김(테마 전환 깜빡임 방지) */ body.pro-active #loading-overlay{ display:none !important; } /* 부팅 프리페인트: 인라인 스크립트가 캐시(PRO) 확인 시 html에 부여 — 첫 페인트부터 구 대시보드/오버레이 차단 */ html.boot-pro, html.boot-pro body{ background:#0a1220; } html.boot-pro #loading-overlay, html.boot-pro .page{ display:none !important; } .pro-root{ position:fixed; inset:0; z-index:2000; overflow-y:auto; overflow-x:hidden; /* ground — deep navy control room */ --bg:#0a1220; --bg-2:#0e1a2e; --glow:rgba(90,217,255,.12); --glow-2:rgba(90,217,255,.05); --card:rgba(190,214,255,.055); --card-2:rgba(190,214,255,.08); --card-hi:rgba(190,214,255,.12); --stroke:rgba(170,200,255,.11); --stroke-2:rgba(170,200,255,.18); --ink:#eaf1fb; --ink-2:#9fb0cc; --ink-3:#647698; --acc:#5ad9ff; --acc-deep:#2596d6; --acc-ink:#03121d; --acc-glow:rgba(90,217,255,.42); --good:#5ad9ff; --warn:#f5b441; --crit:#ff6a6a; --off:#4c5a78; --r:18px; --r-sm:12px; --r-xs:9px; --mono:ui-monospace,"SF Mono","SFMono-Regular",Menlo,Consolas,monospace; --sans:'Pretendard',-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,"Malgun Gothic","Apple SD Gothic Neo",sans-serif; font-family:var(--sans); color:var(--ink); letter-spacing:.1px; background: radial-gradient(1200px 620px at 82% -12%, var(--glow), transparent 60%), radial-gradient(900px 520px at 4% 6%, var(--glow-2), transparent 62%), var(--bg); -webkit-font-smoothing:antialiased; } .pro-root.hidden{ display:none; } .pro-root *{ box-sizing:border-box; } .pro-root svg text{ font-family:var(--sans); } .pro-root .num{ font-variant-numeric:tabular-nums; letter-spacing:-.02em; } .pro-root .code{ font-family:var(--mono); letter-spacing:.02em; } .pro-root .eyebrow{ font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3); font-weight:600; } /* ---------- shell ---------- */ .pro-root .shell{ display:grid; grid-template-columns:84px 1fr; min-height:100vh; } /* ---------- rail ---------- */ .pro-root .rail{ display:flex; flex-direction:column; align-items:center; gap:8px; padding:18px 12px; border-right:1px solid var(--stroke); background:linear-gradient(180deg, rgba(120,170,255,.04), transparent 42%); position:sticky; top:0; height:100vh; } .pro-root .brand{ width:46px; height:46px; border-radius:14px; display:grid; place-items:center; background:#fff; margin-bottom:10px; box-shadow:0 8px 24px var(--acc-glow); overflow:hidden; } .pro-root .brand img{ width:36px; height:36px; object-fit:contain; display:block; } .pro-root .rail-label{ font-size:9px; color:var(--ink-3); letter-spacing:.16em; text-transform:uppercase; margin:4px 0 2px; font-weight:700; } .pro-root .znav + .znav{ margin-top:12px; } .pro-root .znav{ width:58px; padding:11px 0 9px; border-radius:16px; display:flex; flex-direction:column; align-items:center; gap:6px; color:var(--ink-2); cursor:pointer; position:relative; background:var(--card); border:1px solid var(--stroke); transition:background .18s,color .18s,border-color .18s,transform .18s,box-shadow .18s; } .pro-root .znav svg{ width:22px; height:22px; opacity:.92; } .pro-root .znav span{ font-size:10px; line-height:1; letter-spacing:.02em; font-weight:600; text-align:center; } .pro-root .znav:hover{ background:var(--card-hi); color:var(--ink); border-color:var(--stroke-2); transform:translateY(-1px); } .pro-root .znav.on{ background:color-mix(in srgb,var(--acc) 17%,transparent); color:#eaf7ff; border-color:color-mix(in srgb,var(--acc) 50%,transparent); box-shadow:0 6px 20px color-mix(in srgb,var(--acc) 22%,transparent); } .pro-root .znav.on svg{ color:var(--acc); opacity:1; } .pro-root .zdot{ position:absolute; top:8px; right:10px; width:7px; height:7px; border-radius:50%; } .pro-root .zdot.run{ background:var(--good); box-shadow:0 0 8px var(--acc-glow); } .pro-root .zdot.alarm{ background:var(--crit); box-shadow:0 0 8px rgba(255,106,106,.55); } .pro-root .rail-sp{ flex:1; min-height:10px; } .pro-root .rail-btn{ width:46px; height:46px; border-radius:14px; display:grid; place-items:center; color:var(--ink-2); cursor:pointer; background:var(--card); border:1px solid var(--stroke); transition:.18s; } .pro-root .rail-btn:hover{ background:var(--card-hi); color:var(--ink); border-color:var(--stroke-2); } .pro-root .rail-btn svg{ width:20px; height:20px; } /* ---------- main ---------- */ .pro-root .main{ padding:20px 26px 34px; min-width:0; } .pro-root .topbar{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:20px; flex-wrap:wrap; } .pro-root .crumb{ display:flex; align-items:center; gap:12px; min-width:0; } .pro-root .crumb h1{ font-size:21px; margin:0; font-weight:700; letter-spacing:-.01em; white-space:nowrap; } .pro-root .chip{ display:inline-flex; align-items:center; gap:7px; padding:6px 11px; border:1px solid var(--stroke); border-radius:999px; background:var(--card); font-size:12px; color:var(--ink-2); } .pro-root .chip .code{ color:var(--ink); } .pro-root .live-dot{ width:7px; height:7px; border-radius:50%; background:var(--good); box-shadow:0 0 8px var(--acc-glow); flex:none; } .pro-root .tb-right{ display:flex; align-items:center; gap:10px; } .pro-root .icon-btn{ position:relative; width:40px; height:40px; border-radius:12px; border:1px solid var(--stroke); background:var(--card); color:var(--ink-2); display:grid; place-items:center; cursor:pointer; transition:.16s; } .pro-root .icon-btn:hover{ color:var(--ink); border-color:var(--stroke-2); } .pro-root .icon-btn svg{ width:18px; height:18px; } .pro-root .badge{ position:absolute; top:-5px; right:-5px; min-width:17px; height:17px; padding:0 4px; border-radius:9px; background:var(--crit); color:#fff; font-size:10px; font-weight:700; display:grid; place-items:center; border:2px solid var(--bg); } .pro-root .user{ display:flex; align-items:center; gap:9px; padding:5px 12px 5px 6px; border:1px solid var(--stroke); border-radius:999px; background:var(--card); cursor:pointer; color:var(--ink); font-family:var(--sans); text-align:left; } .pro-root .avatar{ width:30px; height:30px; border-radius:50%; background:linear-gradient(150deg,var(--acc),var(--acc-deep)); color:var(--acc-ink); display:grid; place-items:center; font-weight:800; font-size:13px; } .pro-root .user .nm{ font-size:12.5px; font-weight:600; line-height:1.15; } .pro-root .user .sub{ font-size:10.5px; color:var(--ink-3); } /* ---------- bento grid ---------- */ .pro-root .grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; align-items:stretch; grid-auto-flow:row dense; } .pro-root .span2{ grid-column:span 2; } .pro-root .span4{ grid-column:span 4; } .pro-root .card{ background:var(--card); border:1px solid var(--stroke); border-radius:var(--r); padding:18px; position:relative; backdrop-filter:blur(8px); transition:border-color .2s,background .2s,transform .2s; } .pro-root .card.pad-lg{ padding:22px; } .pro-root .card-h{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:14px; } .pro-root .card-h .t{ display:flex; align-items:center; gap:9px; font-size:13px; font-weight:600; color:var(--ink-2); } .pro-root .card-h .t svg{ width:16px; height:16px; color:var(--ink-3); } /* hero */ .pro-root .hero{ grid-column:span 2; grid-row:span 2; display:flex; flex-direction:column; background:radial-gradient(520px 320px at 78% 12%, var(--glow), transparent 70%), var(--card-2); overflow:hidden; } .pro-root .live{ display:inline-flex; align-items:center; gap:8px; font-size:11.5px; font-weight:700; letter-spacing:.14em; color:var(--acc); text-transform:uppercase; } .pro-root .live .rec{ width:8px; height:8px; border-radius:50%; background:var(--acc); box-shadow:0 0 0 0 var(--acc-glow); animation:pro-pulse 2.4s infinite; } @keyframes pro-pulse{ 0%{box-shadow:0 0 0 0 var(--acc-glow)} 70%{box-shadow:0 0 0 12px transparent} 100%{box-shadow:0 0 0 0 transparent} } .pro-root .hero-top{ display:flex; align-items:center; justify-content:space-between; gap:12px; } .pro-root .stage-sel{ background:var(--card); border:1px solid var(--stroke); color:var(--ink-2); padding:7px 13px; border-radius:999px; font-size:12px; cursor:pointer; font-family:var(--mono); } .pro-root .stage-sel:hover{ color:var(--ink); border-color:var(--stroke-2); } .pro-root .stage{ position:relative; flex:none; aspect-ratio:16/10; width:100%; min-height:270px; max-height:50vh; margin:14px 0 16px; border-radius:16px; overflow:hidden; border:1px solid var(--stroke); display:grid; place-items:center; background:radial-gradient(460px 300px at 50% 22%, rgba(255,255,255,.05), transparent 68%), linear-gradient(180deg, rgba(0,0,0,.12), rgba(0,0,0,.34)); } .pro-root .spot{ position:absolute; left:50%; top:2%; width:66%; height:70%; transform:translateX(-50%); background:radial-gradient(circle at 50% 40%, var(--glow), transparent 68%); filter:blur(6px); pointer-events:none; } .pro-root .scene3d{ position:absolute; inset:0; width:100%; height:100%; border:0; z-index:0; display:block; background:#0e1726; } .pro-root .scene-shade{ position:absolute; inset:0; z-index:1; pointer-events:none; background:radial-gradient(130% 100% at 50% -6%, transparent 52%, rgba(10,18,32,.55) 100%), linear-gradient(180deg, rgba(10,18,32,.30), transparent 26%, rgba(10,18,32,.10) 70%, rgba(10,18,32,.42)); } .pro-root .ph-tag{ position:absolute; left:14px; bottom:12px; z-index:2; font-size:10.5px; color:var(--ink-3); background:rgba(0,0,0,.4); border:1px solid var(--stroke); border-radius:8px; padding:4px 9px; backdrop-filter:blur(6px); } .pro-root .stage-o2{ position:absolute; right:14px; top:14px; z-index:2; display:flex; align-items:center; gap:11px; background:rgba(0,0,0,.4); border:1px solid var(--stroke); border-radius:14px; padding:8px 14px 8px 9px; backdrop-filter:blur(7px); } .pro-root .o2ring{ width:48px; height:48px; flex:none; } .pro-root .o2read b{ font-size:19px; font-weight:750; line-height:1; } .pro-root .o2read span{ display:block; font-size:10px; color:var(--ink-3); margin-top:2px; } .pro-root .stage-bar{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; } .pro-root .quick{ display:flex; align-items:center; gap:8px; } .pro-root .stage-stat{ font-size:12px; color:var(--ink-2); margin-left:4px; } .pro-root .stage-stat b{ color:var(--ink); } .pro-root .stage-actions{ display:flex; gap:10px; } .pro-root .btn{ flex:1; display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:13px 16px; border-radius:13px; font-family:var(--sans); font-size:13.5px; font-weight:650; cursor:pointer; border:1px solid var(--stroke-2); background:var(--card-hi); color:var(--ink); transition:.16s; } .pro-root .btn svg{ width:17px; height:17px; } .pro-root .btn:hover{ border-color:var(--stroke-2); transform:translateY(-1px); } .pro-root .btn.primary{ background:linear-gradient(150deg,var(--acc),var(--acc-deep)); color:var(--acc-ink); border-color:transparent; box-shadow:0 10px 26px var(--acc-glow); } .pro-root .btn.ghost{ background:var(--card); } .pro-root .stage-actions .btn{ flex:none; padding:11px 18px; } /* connection — 카드 세로 플렉스: 시그널 바가 하단에 붙고 남은 높이만큼 커짐 */ .pro-root .card.conn{ display:flex; flex-direction:column; } .pro-root .conn .state{ display:flex; align-items:center; gap:10px; font-size:20px; font-weight:700; } .pro-root .conn .state .d{ width:11px; height:11px; border-radius:50%; background:var(--good); box-shadow:0 0 12px var(--acc-glow); } .pro-root .conn .state.off .d{ background:var(--off); box-shadow:none; } .pro-root .conn .meta{ color:var(--ink-3); font-size:12px; margin-top:8px; } .pro-root .bars{ display:flex; align-items:flex-end; gap:4px; height:52px; min-height:34px; margin-top:auto; padding-top:14px; } .pro-root .bars i{ flex:1; background:var(--acc); border-radius:3px; opacity:.9; } .pro-root .bars i:nth-child(1){ height:40%; } .pro-root .bars i:nth-child(2){ height:60%; } .pro-root .bars i:nth-child(3){ height:80%; } .pro-root .bars i:nth-child(4){ height:100%; } .pro-root .bars i:nth-child(5){ height:72%; opacity:.3; background:var(--ink-3); } /* trend — 카드 세로 플렉스: 스파크 차트가 남은 높이를 채움 */ .pro-root .card.trend{ display:flex; flex-direction:column; } .pro-root .trend .big{ font-size:34px; font-weight:750; line-height:1; } .pro-root .trend .delta{ font-size:12px; color:var(--good); font-weight:600; margin-left:8px; } .pro-root .spark{ width:100%; flex:1; min-height:80px; height:auto; display:block; } /* led — 카드 세로 플렉스: 상태 칩이 남은 공간을 채우고 버튼은 하단 고정 */ .pro-root .card.led{ display:flex; flex-direction:column; } .pro-root .led .big{ font-size:30px; font-weight:750; } .pro-root .led .big small{ font-size:14px; color:var(--ink-2); font-weight:500; } .pro-root .unit-dots{ display:flex; align-items:center; flex:1; gap:10px; margin-top:14px; } .pro-root .unit-dots .u{ flex:1; padding:12px 10px; border:1px solid var(--stroke); border-radius:var(--r-xs); text-align:center; font-size:12px; color:var(--ink-3); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; } .pro-root .unit-dots .u .dd{ width:11px; height:11px; border-radius:50%; margin:0 auto; background:var(--off); } .pro-root .unit-dots .u.on .dd{ background:var(--acc); box-shadow:0 0 8px var(--acc-glow); } .pro-root .unit-dots .u.on{ color:var(--ink-2); border-color:var(--stroke-2); } .pro-root .led-actions{ display:flex; gap:9px; margin-top:auto; padding-top:15px; } .pro-root .mini-btn{ flex:1; padding:10px 12px; border-radius:11px; border:1px solid var(--stroke-2); background:var(--card-hi); color:var(--ink); font-family:var(--sans); font-size:12.5px; font-weight:650; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:7px; transition:transform .16s,border-color .16s,color .16s,background .16s; } .pro-root .mini-btn svg{ width:15px; height:15px; } .pro-root .mini-btn:hover{ transform:translateY(-1px); } .pro-root .mini-btn.on{ background:linear-gradient(150deg,var(--acc),var(--acc-deep)); color:var(--acc-ink); border-color:transparent; box-shadow:0 6px 16px var(--acc-glow); } .pro-root .mini-btn.off{ background:var(--card); } .pro-root .mini-btn.off:hover{ color:var(--crit); border-color:color-mix(in srgb,var(--crit) 45%,transparent); } /* device mini (실외기 · per-unit) */ .pro-root .dev .row{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; } .pro-root .dev-o2{ font-size:26px; font-weight:750; line-height:1; } .pro-root .dev-o2 small{ font-size:13px; color:var(--ink-2); font-weight:500; margin-left:1px; } .pro-root .dev .sub{ font-size:11.5px; color:var(--ink-3); margin-top:4px; } .pro-root .ring-sm{ width:74px; height:74px; flex:none; } .pro-root .filters{ display:flex; flex-direction:column; gap:13px; margin-top:17px; padding-top:15px; border-top:1px solid var(--stroke); } .pro-root .filter-head{ display:flex; align-items:center; justify-content:space-between; font-size:12px; color:var(--ink-2); margin-bottom:7px; } .pro-root .filter-head b{ font-size:13px; color:var(--ink); } .pro-root .pbar{ height:7px; border-radius:6px; background:var(--card-hi); overflow:hidden; } .pro-root .pbar i{ display:block; height:100%; border-radius:6px; background:linear-gradient(90deg,var(--acc-deep),var(--acc)); } .pro-root .pbar i.warn{ background:linear-gradient(90deg,#b9791f,var(--warn)); } .pro-root .pbar i.crit{ background:linear-gradient(90deg,#b23b3b,var(--crit)); } .pro-root .filter-sub{ font-size:10.5px; color:var(--ink-3); margin-top:5px; } .pro-root .filter-sub.warn{ color:var(--warn); } /* control card (컨트롤러 제어) */ .pro-root .ctl{ display:flex; flex-direction:column; } .pro-root .ctl-led{ display:grid; grid-template-columns:1fr 1fr; gap:22px; flex:1; align-items:stretch; } .pro-root .led-side{ display:flex; flex-direction:column; border-left:1px solid var(--stroke); padding-left:22px; } .pro-root .led-side .led-h{ display:flex; align-items:center; gap:8px; font-size:12.5px; font-weight:600; color:var(--ink-2); margin-bottom:6px; } .pro-root .led-side .led-h svg{ width:15px; height:15px; color:var(--ink-3); } .pro-root .led-side .big{ font-size:26px; font-weight:750; } .pro-root .led-side .big small{ font-size:13px; color:var(--ink-2); font-weight:500; } .pro-root .ctl-body{ display:grid; grid-template-columns:auto 1fr; gap:20px; align-items:center; margin:2px 0 4px; flex:1; } .pro-root .ctl-info{ width:100%; text-align:left; } .pro-root .ctl-gauge{ width:156px; height:156px; position:relative; } .pro-root .resv-chip{ display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:650; color:var(--acc); border:1px solid color-mix(in srgb,var(--acc) 40%,transparent); background:color-mix(in srgb,var(--acc) 10%,transparent); padding:5px 11px; border-radius:999px; white-space:nowrap; } .pro-root .resv-chip svg{ width:13px; height:13px; } .pro-root .ctl-btns{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:12px; } .pro-root .nm-sub{ font-size:12px; color:var(--ink-3); font-weight:500; margin-left:8px; } .pro-root .tb-btn{ flex:none; height:40px; padding:0 16px; font-size:12.5px; border-radius:12px; } .pro-root .tb-btn svg{ width:14px; height:14px; } .pro-root .ctl-gauge .center{ position:absolute; inset:0; display:grid; place-content:center; text-align:center; } .pro-root .ctl-gauge .center b{ font-size:30px; font-weight:750; } .pro-root .ctl-gauge .center small{ font-size:11px; color:var(--ink-3); letter-spacing:.1em; text-transform:uppercase; } .pro-root .ctl-info .nm{ font-size:16px; font-weight:700; } .pro-root .ctl-info .cd{ font-size:12px; color:var(--ink-3); margin-top:2px; } .pro-root .ctl-info .kv{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:12px; } .pro-root .ctl-info .kv > div{ background:var(--card-hi); border:1px solid var(--stroke); border-radius:10px; padding:8px 6px; } .pro-root .ctl-info .kv .k{ font-size:11px; color:var(--ink-3); } .pro-root .ctl-info .kv .v{ font-size:15px; font-weight:700; margin-top:3px; } .pro-root .ctl-info .kv .v small{ font-size:11px; color:var(--ink-2); font-weight:500; } .pro-root .pills{ display:flex; gap:9px; margin-top:12px; flex-wrap:wrap; } .pro-root .ctl .pills{ gap:8px; } .pro-root .ctl .pill{ flex:1; justify-content:center; } .pro-root .pill{ display:inline-flex; align-items:center; gap:7px; padding:9px 13px; border-radius:11px; border:1px solid var(--stroke); background:var(--card); color:var(--ink-2); font-size:12.5px; font-weight:600; cursor:pointer; transition:.16s; } .pro-root .pill svg{ width:15px; height:15px; } .pro-root .pill:hover{ color:var(--ink); border-color:var(--stroke-2); } .pro-root .pill.on{ color:var(--acc-ink); border-color:transparent; background:linear-gradient(150deg,var(--acc),var(--acc-deep)); font-weight:700; box-shadow:0 4px 14px var(--acc-glow); } .pro-root .status-pill{ display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:600; padding:4px 10px; border-radius:999px; } .pro-root .status-pill.run{ color:var(--acc); background:color-mix(in srgb,var(--acc) 12%,transparent); } .pro-root .status-pill.run .d{ width:7px; height:7px; border-radius:50%; background:var(--acc); } .pro-root .status-pill.alarm{ color:var(--crit); background:color-mix(in srgb,var(--crit) 14%,transparent); } .pro-root .status-pill.alarm .d{ width:7px; height:7px; border-radius:50%; background:var(--crit); } /* all outdoor units grid */ .pro-root .unit-grid{ display:grid; grid-template-columns:repeat(6,1fr); gap:12px; } .pro-root .unit-mini{ background:var(--card); border:1px solid var(--stroke); border-radius:var(--r-sm); padding:13px; transition:border-color .18s,transform .18s; cursor:pointer; } .pro-root .unit-mini:hover{ border-color:var(--stroke-2); transform:translateY(-2px); } .pro-root .unit-mini.off{ opacity:.6; } .pro-root .um-top{ display:flex; align-items:center; gap:7px; margin-bottom:11px; } .pro-root .um-dot{ width:8px; height:8px; border-radius:50%; flex:none; } .pro-root .um-dot.run{ background:var(--good); box-shadow:0 0 7px var(--acc-glow); } .pro-root .um-dot.stop{ background:var(--off); } .pro-root .um-dot.warn{ background:var(--warn); box-shadow:0 0 7px rgba(245,180,65,.5); } .pro-root .um-name{ font-size:12px; font-weight:600; color:var(--ink); flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .pro-root .um-led{ width:8px; height:8px; border-radius:50%; background:var(--off); flex:none; } .pro-root .um-led.on{ background:var(--acc); box-shadow:0 0 7px var(--acc-glow); } .pro-root .um-o2{ font-size:22px; font-weight:750; line-height:1; } .pro-root .um-o2 small{ font-size:11px; color:var(--ink-2); font-weight:500; } .pro-root .um-code{ font-size:10.5px; color:var(--ink-3); margin-top:5px; } .pro-root .um-filters{ margin-top:10px; padding-top:9px; border-top:1px solid var(--stroke); display:flex; flex-direction:column; gap:6px; } .pro-root .um-f{ display:flex; align-items:center; gap:7px; } .pro-root .um-f-k{ font-size:10px; color:var(--ink-3); width:46px; flex:none; } .pro-root .um-f-bar{ flex:1; height:4px; border-radius:2px; background:var(--card-hi); overflow:hidden; } .pro-root .um-f-bar i{ display:block; height:100%; border-radius:2px; background:var(--acc); } .pro-root .um-f-bar i.warn{ background:#f5b14b; } .pro-root .um-f-bar i.crit{ background:#f47069; } .pro-root .um-f-v{ font-size:10px; color:var(--ink-2); min-width:36px; text-align:right; flex:none; } /* 실내 환경 스트립 */ .pro-root .env-strip{ margin-top:14px; padding-top:14px; border-top:1px solid var(--stroke); } .pro-root .env-title{ font-size:12px; font-weight:600; color:var(--ink-2); margin-bottom:10px; } .pro-root .env-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:12px; } .pro-root .env-tile{ background:var(--card); border:1px solid var(--stroke); border-radius:var(--r-sm); padding:12px; } .pro-root .env-tile .k{ font-size:11px; color:var(--ink-3); white-space:nowrap; } .pro-root .env-tile .v{ font-size:20px; font-weight:750; margin-top:6px; } .pro-root .env-tile .v small{ font-size:10.5px; color:var(--ink-2); font-weight:500; margin-left:3px; } /* 실외기 상세 내비게이션 화살표 */ .pro-root .dev-nav{ display:flex; align-items:center; gap:7px; } .pro-root .dev-pos{ font-size:11px; color:var(--ink-3); } .pro-root .dev-arrow{ width:26px; height:26px; border-radius:8px; border:1px solid var(--stroke); background:var(--card); color:var(--ink-2); cursor:pointer; display:grid; place-items:center; transition:.16s; } .pro-root .dev-arrow:hover{ color:var(--ink); border-color:var(--stroke-2); } .pro-root .dev-arrow svg{ width:14px; height:14px; } /* comparison chart */ .pro-root .legend{ display:flex; gap:14px; flex-wrap:wrap; } .pro-root .lg{ display:flex; align-items:center; gap:6px; font-size:11.5px; color:var(--ink-2); } .pro-root .lg i{ width:11px; height:3px; border-radius:2px; display:inline-block; } .pro-root .card.chart{ display:flex; flex-direction:column; } .pro-root .chart-svg{ width:100%; flex:1; min-height:130px; height:auto; display:block; } .pro-root .chart-x{ display:flex; justify-content:space-between; font-size:10.5px; color:var(--ink-3); margin-top:8px; } .pro-root .ywrap{ position:relative; flex:1; display:flex; margin-top:10px; } .pro-root .ywrap > svg{ flex:1; margin-top:0; } .pro-root .ylabels{ position:absolute; inset:0; pointer-events:none; } .pro-root .ylabels span{ position:absolute; left:4px; transform:translateY(-50%); font-size:9.5px; color:var(--ink-3); } /* events / alarms log */ .pro-root .link-btn{ display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600; color:var(--acc); background:none; border:0; cursor:pointer; font-family:var(--sans); } .pro-root .link-btn svg{ width:14px; height:14px; } .pro-root .evt{ display:flex; flex-direction:column; } .pro-root .evt-row{ display:flex; align-items:center; gap:12px; padding:11px 0; border-top:1px solid var(--stroke); } .pro-root .evt-row:first-child{ border-top:0; } .pro-root .evt-ic{ width:32px; height:32px; border-radius:9px; display:grid; place-items:center; flex:none; } .pro-root .evt-ic svg{ width:16px; height:16px; } .pro-root .evt-ic.crit{ background:color-mix(in srgb,var(--crit) 16%,transparent); color:var(--crit); } .pro-root .evt-ic.warn{ background:color-mix(in srgb,var(--warn) 16%,transparent); color:var(--warn); } .pro-root .evt-ic.ok{ background:color-mix(in srgb,var(--acc) 14%,transparent); color:var(--acc); } .pro-root .evt-main{ flex:1; min-width:0; } .pro-root .evt-main b{ display:block; font-size:13px; font-weight:600; color:var(--ink); } .pro-root .evt-main span{ font-size:11.5px; color:var(--ink-3); } .pro-root .evt-time{ font-size:11.5px; color:var(--ink-3); flex:none; } .pro-root .evt-empty{ color:var(--ink-3); font-size:12.5px; padding:14px 2px; } /* ══════════ 씬 모드 — 스크롤 없이 한 화면에 ══════════ 카드가 12장이라 세로 2,700px(=2.5화면)이 되어 녹화가 불가능했다. 씬 3개로 나누고, .main 을 100vh 플렉스로 잡아 .grid 가 남은 높이를 정확히 채운다. */ .pro-root{ overflow:hidden; } .pro-root .shell{ height:100vh; min-height:0; } .pro-root .main{ display:flex; flex-direction:column; height:100vh; padding:16px 22px 18px; overflow:hidden; } .pro-root .topbar{ margin-bottom:12px; flex:none; } .pro-root .sim-bar{ flex:none; } .pro-root .grid{ flex:1; min-height:0; } .pro-root .card{ min-height:0; overflow:hidden; } .pro-root .ywrap{ min-height:0; } .pro-root .spark, .pro-root .chart-svg, .pro-root .flow-chart, .pro-root .comp-chart, .pro-root .fl-chart{ min-height:0; } .pro-root .hero .stage{ min-height:0; margin:12px 0 10px; } /* 씬별 행 높이. 앞 네 씬은 시연 대본의 네 챕터다. hero 는 1~2행을 세로로 잇는다. access / multi : hero(2×2) | 카드 2장이 오른쪽 2열에 위아래로 co2 / dust : 카드 2장이 1행, 공기질(span4)이 2행 */ .pro-root .grid[data-scene="access"]{ grid-template-rows:1fr 1fr; } .pro-root .grid[data-scene="multi"] { grid-template-rows:1fr 1fr; } .pro-root .grid[data-scene="co2"] { grid-template-rows:.92fr 1.08fr; } .pro-root .grid[data-scene="dust"] { grid-template-rows:.92fr 1.08fr; } .pro-root .grid[data-scene="ops"] { grid-template-rows:1.15fr .85fr; } .pro-root .grid[data-scene="ops"] .events{ grid-column:span 4; } /* 설비 씬: 실외기 현황·알람이 남는 세로 공간을 채우게 한다(아래쪽 빈칸 방지) */ .pro-root .card.units, .pro-root .card.events{ display:flex; flex-direction:column; } .pro-root .card.units .unit-grid{ flex:1; } .pro-root .unit-mini{ display:flex; flex-direction:column; } .pro-root .unit-mini .um-filters{ margin-top:auto; padding-top:10px; } .pro-root .card.events .evt{ flex:1; } .pro-root .card.events .evt-row{ flex:1; min-height:44px; } /* 공기질 카드: 타일(고정) → CO₂ 추이(가변) → 알림(바닥 고정) */ .pro-root .card.air{ display:flex; flex-direction:column; } .pro-root .card.air .air-grid{ flex:none; } .pro-root .card.air .env-tile{ display:flex; flex-direction:column; } .pro-root .air-chartwrap{ flex:1; min-height:0; display:flex; flex-direction:column; margin-top:14px; } .pro-root .air-chart-h{ display:flex; align-items:center; gap:6px; font-size:11.5px; font-weight:600; color:var(--ink-2); margin-bottom:6px; } .pro-root .air-chart-h span{ font-size:10.5px; color:var(--ink-3); font-weight:500; } .pro-root .air-chart-h em{ font-style:normal; font-size:10.5px; font-weight:600; display:inline-flex; align-items:center; gap:5px; } .pro-root .air-chart-h em::before{ content:''; width:14px; height:0; border-top:1px dashed currentColor; opacity:.8; } .pro-root .air-chart-h em.s2{ margin-left:auto; color:var(--ink-3); } .pro-root .air-chart-h em.s3{ margin-left:12px; color:var(--warn); } .pro-root .air-chart-h em.s4{ margin-left:12px; color:var(--crit); } .pro-root .air-chart-h em.fire{ margin-left:12px; color:#ff8a5c; } .pro-root .air-chart{ width:100%; flex:1; min-height:52px; height:auto; display:block; } .pro-root .co2-line{ fill:none; stroke:var(--acc); stroke-width:2; stroke-linejoin:round; stroke-linecap:round; } .pro-root .co2-area{ fill:color-mix(in srgb,var(--acc) 10%,transparent); stroke:none; } .pro-root .air-chartwrap[data-level="warn"] .co2-line{ stroke:var(--warn); } .pro-root .air-chartwrap[data-level="warn"] .co2-area{ fill:color-mix(in srgb,var(--warn) 10%,transparent); } .pro-root .air-chartwrap[data-level="crit"] .co2-line, .pro-root .air-chartwrap[data-level="fire"] .co2-line{ stroke:var(--crit); } .pro-root .air-chartwrap[data-level="crit"] .co2-area, .pro-root .air-chartwrap[data-level="fire"] .co2-area{ fill:color-mix(in srgb,var(--crit) 11%,transparent); } .pro-root .co2-lim{ stroke-width:1; stroke-dasharray:5 4; } .pro-root .co2-lim.s2{ stroke:var(--ink-3); opacity:.35; } .pro-root .co2-lim.s3{ stroke:var(--warn); opacity:.5; } .pro-root .co2-lim.s4{ stroke:var(--crit); opacity:.55; } .pro-root .co2-lim.fire{ stroke:#ff8a5c; opacity:.7; stroke-dasharray:2 3; } .pro-root .air-chart-x{ display:flex; justify-content:space-between; font-size:10px; color:var(--ink-3); margin-top:6px; } .pro-root .card.air .air-alerts{ margin-top:14px; display:flex; flex-direction:column; gap:8px; } /* 재실 인원 변화 알림 — 경고가 아니라 상태 변화 고지라 액센트 톤으로 */ .pro-root .alert.occ{ background:color-mix(in srgb,var(--acc) 11%,transparent); border:1px solid color-mix(in srgb,var(--acc) 32%,transparent); color:var(--acc); } /* CO₂/미세먼지 씬에서는 공기질 카드가 가로 전체를 쓰므로 타일을 키운다 */ .pro-root .grid[data-scene="co2"] .env-tile, .pro-root .grid[data-scene="dust"] .env-tile{ padding:14px 15px; } .pro-root .grid[data-scene="co2"] .env-tile .v b, .pro-root .grid[data-scene="dust"] .env-tile .v b{ font-size:26px; } .pro-root .grid[data-scene="co2"] .env-tile .k, .pro-root .grid[data-scene="dust"] .env-tile .k{ font-size:12px; } .pro-root .grid[data-scene="co2"] .env-tile .g, .pro-root .grid[data-scene="dust"] .env-tile .g{ font-size:12px; margin-top:5px; } .pro-root .grid[data-scene="co2"] .pico, .pro-root .grid[data-scene="dust"] .pico{ width:14px; height:14px; } .pro-root .grid[data-scene="co2"] .alert, .pro-root .grid[data-scene="dust"] .alert{ font-size:14.5px; padding:13px 17px; } /* ══════════ 씬 탭 + 재생 컨트롤 ══════════ */ .pro-root .scene-tabs{ display:flex; align-items:center; gap:8px; flex:none; margin-bottom:12px; } .pro-root .scene-tabs button[data-act="scene"]{ background:var(--card); border:1px solid var(--stroke); color:var(--ink-3); border-radius:11px; padding:9px 18px; cursor:pointer; font-family:var(--sans); font-size:13px; font-weight:600; transition:border-color .18s,color .18s,background .18s; } .pro-root .scene-tabs button[data-act="scene"]:hover{ color:var(--ink-2); border-color:var(--stroke-2); } .pro-root .scene-tabs button[data-act="scene"].on{ border-color:var(--acc); color:var(--acc); background:color-mix(in srgb,var(--acc) 12%,var(--card)); box-shadow:0 0 14px color-mix(in srgb,var(--acc) 14%,transparent); } /* 시나리오 재생 버튼 4개. 재생이 시작되면 통째로 사라지고, 끝나면(또는 ESC) 돌아온다. 화면에 조작 UI가 남으면 심사 영상에서 연출로 읽힌다. */ .pro-root .ch-launch{ margin-left:auto; display:flex; align-items:center; gap:7px; } .pro-root .ch-launch button{ background:linear-gradient(150deg,var(--acc),var(--acc-deep)); color:var(--acc-ink); border:0; border-radius:10px; padding:9px 14px; font-family:var(--sans); font-size:12.5px; font-weight:700; cursor:pointer; box-shadow:0 6px 16px var(--acc-glow); transition:transform .14s, filter .14s; white-space:nowrap; } .pro-root .ch-launch button:hover{ transform:translateY(-1px); filter:brightness(1.06); } .pro-root .ch-launch button:active{ transform:translateY(0); } .pro-root.playing .ch-launch{ display:none; } /* 재생 중에는 씬 탭이 대본을 따라 움직인다 — 사람이 누르는 것처럼 보이면 안 된다 */ .pro-root.playing .scene-tabs button[data-act="scene"]{ pointer-events:none; } /* ══════════ 자막(캡션) ══════════ */ .pro-root .caption{ position:fixed; left:50%; bottom:34px; transform:translateX(-50%) translateY(8px); z-index:20; max-width:min(880px,84vw); text-align:center; padding:14px 26px; border-radius:14px; background:rgba(10,18,32,.86); border:1px solid var(--stroke-2); backdrop-filter:blur(10px); color:var(--ink); font-size:16px; font-weight:600; letter-spacing:-.01em; opacity:0; pointer-events:none; transition:opacity .35s ease,transform .35s ease; } .pro-root .caption.show{ opacity:1; transform:translateX(-50%) translateY(0); } .pro-root .caption .step{ display:block; font-size:10.5px; font-weight:700; letter-spacing:.16em; color:var(--acc); text-transform:uppercase; margin-bottom:5px; } /* 화면이 너무 낮으면(노트북 등) 씬 강제 맞춤을 포기하고 스크롤을 허용한다 */ @media (max-height:660px){ .pro-root{ overflow-y:auto; } .pro-root .shell{ height:auto; min-height:100vh; } .pro-root .main{ height:auto; overflow:visible; } .pro-root .grid[data-scene]{ grid-template-rows:none; } } /* ══════════ 시연 컨트롤 바 ══════════ */ .pro-root .sim-bar{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; background:var(--card-2); border:1px solid var(--stroke); border-radius:var(--r-sm); padding:9px 12px; margin-bottom:14px; font-size:12px; } .pro-root .sim-bar.folded > *:not(.sim-fold):not(.sim-tag):not(.sim-clock){ display:none; } .pro-root .sim-tag{ font-weight:800; letter-spacing:.12em; color:var(--acc); font-size:10.5px; } .pro-root .sim-fold{ width:24px; height:24px; padding:0; line-height:1; } .pro-root .sim-seg, .pro-root .sim-scn{ display:flex; gap:4px; } .pro-root .sim-bar button{ background:var(--card-hi); border:1px solid var(--stroke); color:var(--ink-2); border-radius:8px; padding:5px 10px; cursor:pointer; font-family:var(--sans); font-size:11.5px; transition:border-color .15s,color .15s,background .15s; } .pro-root .sim-bar button:hover{ border-color:var(--stroke-2); color:var(--ink); } .pro-root .sim-bar button.on{ border-color:var(--acc); color:var(--acc); background:color-mix(in srgb,var(--acc) 12%,var(--card-hi)); } .pro-root .sim-occ{ display:flex; align-items:center; gap:8px; color:var(--ink-3); } .pro-root .sim-occ input{ width:130px; accent-color:var(--acc); } .pro-root .sim-occ b{ color:var(--ink); min-width:38px; } .pro-root .sim-clock{ margin-left:auto; color:var(--ink-3); font-size:12.5px; } /* ══════════ 신규 카드 공통 ══════════ */ .pro-root .flow, .pro-root .target, .pro-root .trend, .pro-root .comp, .pro-root .filter{ grid-column:span 2; display:flex; flex-direction:column; } .pro-root .chip{ font-size:10.5px; font-weight:700; letter-spacing:.06em; padding:4px 9px; border-radius:999px; } .pro-root .chip.auto{ background:color-mix(in srgb,var(--acc) 14%,transparent); color:var(--acc); } .pro-root .chip.manual{ background:color-mix(in srgb,var(--warn) 14%,transparent); color:var(--warn); } .pro-root .chip.sim{ background:var(--card-hi); color:var(--ink-3); font-weight:600; letter-spacing:.02em; } .pro-root .chart-empty{ position:absolute; inset:auto 0 46% 0; text-align:center; font-size:12px; color:var(--ink-3); pointer-events:none; } .pro-root .trend{ position:relative; } /* ══════════ 유량 단계 자동제어 ══════════ */ .pro-root .flow-steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin:8px 0 12px; } .pro-root .fstep{ background:var(--card-hi); border:1px solid var(--stroke); border-radius:var(--r-sm); padding:10px 6px; text-align:center; color:var(--ink-3); cursor:default; font-family:var(--sans); transition:border-color .22s,color .22s,background .22s; } .pro-root .fstep.clickable{ cursor:pointer; } .pro-root .fstep.clickable:hover{ border-color:var(--stroke-2); color:var(--ink-2); } .pro-root .fstep b{ display:block; font-size:14px; font-weight:750; } .pro-root .fstep span{ display:block; font-size:10.5px; } .pro-root .fstep em{ display:block; font-style:normal; font-size:9.5px; font-weight:600; margin-top:3px; color:var(--ink-3); opacity:.75; letter-spacing:-.01em; white-space:nowrap; } .pro-root .fstep i{ display:block; height:3px; margin-top:7px; border-radius:2px; background:var(--stroke-2); transition:background .22s,box-shadow .22s; } .pro-root .fstep.on{ border-color:var(--acc); color:var(--ink); background:color-mix(in srgb,var(--acc) 10%,var(--card-hi)); } .pro-root .fstep.on em{ color:var(--acc); opacity:1; } .pro-root .fstep.on i{ background:var(--acc); box-shadow:0 0 8px var(--acc-glow); } /* 안전 정지(목표 도달·화재)한 카드는 테두리로 즉시 알아볼 수 있게 */ .pro-root .card.flow.stopped{ border-color:color-mix(in srgb,var(--crit) 45%,var(--stroke)); } .pro-root .flow-read{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px; } .pro-root .flow-read .k{ font-size:11px; color:var(--ink-3); } .pro-root .flow-read .v{ font-size:13px; color:var(--ink-2); } .pro-root .flow-read .v b{ font-size:24px; font-weight:750; color:var(--ink); } .pro-root .flow-read .v small{ font-size:12px; color:var(--ink-2); margin-left:3px; } .pro-root .flow-chart{ width:100%; flex:1; min-height:76px; height:auto; display:block; } .pro-root .stage-area{ fill:color-mix(in srgb,var(--acc) 13%,transparent); stroke:none; } .pro-root .purity-line{ fill:none; stroke:var(--acc); stroke-width:2; stroke-linejoin:round; stroke-linecap:round; } .pro-root .flow-hint{ font-size:11.5px; color:var(--ink-3); margin-top:9px; } /* ══════════ 실내 목표 산소 농도 ══════════ */ .pro-root .tgt-rows{ display:flex; flex-direction:column; gap:9px; margin:8px 0 4px; } .pro-root .tgt-row{ display:grid; grid-template-columns:10px 1fr auto 14px auto 80px 40px 118px; align-items:center; gap:9px; font-size:12px; } .pro-root .tgt-swatch{ width:10px; height:10px; border-radius:3px; } .pro-root .tgt-nm{ color:var(--ink-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .pro-root .tgt-now{ font-size:15px; font-weight:700; } .pro-root .tgt-now small, .pro-root .tgt-goal small{ font-size:11px; color:var(--ink-3); margin-left:1px; } .pro-root .tgt-arrow{ color:var(--ink-3); text-align:center; } .pro-root .tgt-goal{ font-size:14px; font-weight:650; color:var(--acc); white-space:nowrap; } .pro-root .tgt-goal.none{ font-size:11.5px; font-weight:500; color:var(--ink-3); } .pro-root .tgt-goal.none b{ font-weight:500; } /* 히어로 3D 무대: 오른쪽 열(유량/목표)이 길어지면 함께 늘어난다 */ .pro-root .hero .stage{ flex:1 1 auto; max-height:none; } .pro-root .tgt-pct{ font-size:11.5px; color:var(--ink-3); text-align:right; } .pro-root .tgt-row .pbar{ height:6px; } .pro-root .pbar i.done{ background:linear-gradient(90deg,var(--acc-deep),var(--acc)); box-shadow:0 0 8px var(--acc-glow); } .pro-root .tgt-row.no-target .pbar{ background:var(--card); } /* 존별 상태 — '복수 공간 독립 제어'의 증거라 한 줄에 나란히 보여야 한다 */ .pro-root .tgt-state{ font-size:11px; font-weight:650; text-align:right; color:var(--ink-3); white-space:nowrap; } .pro-root .tgt-state.run{ color:var(--acc); } .pro-root .tgt-state.done{ color:var(--good,#4ade80); } .pro-root .tgt-state.crit{ color:var(--crit); } /* ══════════ 압축 모듈 ══════════ */ .pro-root .comp-body{ display:grid; grid-template-columns:80px 1fr; gap:16px; align-items:center; margin:6px 0 10px; } .pro-root .comp-fig{ width:80px; height:80px; color:var(--ink-3); opacity:.9; } .pro-root .comp-fig.run{ color:var(--acc); } .pro-root .comp-fig.run .piston{ animation:pro-piston 1.1s ease-in-out infinite; transform-origin:center; } @keyframes pro-piston{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-3.5px) } } .pro-root .comp-kv{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; } .pro-root .comp-kv > div{ background:var(--card-hi); border:1px solid var(--stroke); border-radius:10px; padding:8px 9px; } .pro-root .comp-kv .k{ font-size:10.5px; color:var(--ink-3); white-space:nowrap; } .pro-root .comp-kv .v{ font-size:12px; color:var(--ink-2); margin-top:2px; } .pro-root .comp-kv .v b{ font-size:18px; font-weight:700; color:var(--ink); } .pro-root .comp-kv .v small{ font-size:11px; margin-left:2px; } .pro-root .comp-chart{ width:100%; flex:1; min-height:70px; height:auto; display:block; } .pro-root .limit-line{ stroke:var(--crit); stroke-width:1; stroke-dasharray:4 4; opacity:.55; } .pro-root .comp-line{ fill:none; stroke:var(--acc); stroke-width:2; stroke-linejoin:round; stroke-linecap:round; } .pro-root .comp-area{ fill:color-mix(in srgb,var(--acc) 9%,transparent); stroke:none; } .pro-root .card.comp.overheat{ border-color:color-mix(in srgb,var(--crit) 55%,transparent); } .pro-root .card.comp.overheat .comp-line{ stroke:var(--crit); } .pro-root .card.comp.overheat .comp-area{ fill:color-mix(in srgb,var(--crit) 10%,transparent); } .pro-root .card.comp.overheat .comp-fig{ color:var(--crit); } .pro-root .comp-alert{ margin-top:9px; font-size:11.5px; color:var(--crit); background:color-mix(in srgb,var(--crit) 10%,transparent); border-radius:9px; padding:9px 11px; } /* ══════════ 필터 수명 · AI 예측 ══════════ */ .pro-root .fl-item{ margin:9px 0; } .pro-root .fl-head{ display:flex; align-items:center; justify-content:space-between; font-size:12px; color:var(--ink-2); margin-bottom:6px; } .pro-root .fl-head b{ font-size:13.5px; color:var(--ink); } .pro-root .fl-item.warn .fl-head b{ color:var(--warn); } .pro-root .fl-item.crit .fl-head b{ color:var(--crit); } .pro-root .fl-sub{ display:flex; justify-content:space-between; font-size:10.5px; color:var(--ink-3); margin-top:5px; } .pro-root .fl-why{ font-size:10.5px; color:var(--ink-3); margin-top:3px; opacity:.85; } .pro-root .fl-item.crit .fl-why, .pro-root .fl-item.warn .fl-why{ color:var(--warn); opacity:1; } .pro-root .fl-chart{ width:100%; flex:1; min-height:70px; height:auto; display:block; } .pro-root .fl-line{ fill:none; stroke-width:1.9; stroke-linejoin:round; } .pro-root .fl-line.z{ stroke:var(--acc); } .pro-root .fl-line.i{ stroke:var(--warn); } .pro-root .fl-line.dashed{ stroke-dasharray:4 4; opacity:.62; } .pro-root .now-line{ stroke:var(--stroke-2); stroke-width:1; stroke-dasharray:3 3; } /* '오늘'은 -30~+90일 축에서 25% 지점이다. space-between 으로 놓으면 가운데로 가버린다. */ .pro-root .fl-x{ position:relative; display:block; height:14px; } .pro-root .fl-x span{ position:absolute; top:0; } .pro-root .fl-x span:first-child{ left:0; } .pro-root .fl-x span.now{ left:25%; transform:translateX(-50%); color:var(--ink-2); } .pro-root .fl-x span:last-child{ right:0; } /* ══════════ 공기질 센싱 · 재실 인원 ══════════ */ .pro-root .air-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:12px; } .pro-root .env-tile .g{ font-size:10.5px; margin-top:5px; color:var(--ink-3); } .pro-root .env-tile .g.ok{ color:var(--acc); } .pro-root .env-tile .g.warn{ color:var(--warn); } .pro-root .env-tile .g.crit{ color:var(--crit); } .pro-root .env-tile .v b{ font-size:22px; font-weight:750; color:var(--ink); } .pro-root .env-tile .v small{ font-size:11px; color:var(--ink-2); margin-left:2px; } .pro-root .env-tile.co2.hot{ border-color:color-mix(in srgb,var(--crit) 55%,transparent); } .pro-root .env-tile .rate{ font-size:10px; color:var(--ink-3); margin-top:2px; } .pro-root .env-tile.occ{ grid-column:span 1; } .pro-root .env-tile.occ .grade{ display:inline-block; margin-left:5px; padding:1px 6px; border-radius:6px; font-size:10px; font-weight:750; background:color-mix(in srgb,var(--acc) 16%,transparent); color:var(--acc); } .pro-root .env-tile.occ[data-grade="empty"] .grade{ background:var(--card-hi); color:var(--ink-3); } .pro-root .env-tile.occ[data-grade="D"] .grade{ background:color-mix(in srgb,var(--warn) 16%,transparent); color:var(--warn); } .pro-root .env-tile.occ[data-grade="E"] .grade, .pro-root .env-tile.occ[data-grade="E+"] .grade{ background:color-mix(in srgb,var(--crit) 16%,transparent); color:var(--crit); } .pro-root .env-tile.occ[data-grade="E+"]{ border-color:color-mix(in srgb,var(--crit) 45%,transparent); } .pro-root .people{ display:flex; flex-wrap:wrap; gap:3px; margin-top:7px; min-height:13px; } .pro-root .pico{ width:11px; height:11px; fill:var(--acc); opacity:.92; } .pro-root .people[data-grade="D"] .pico{ fill:var(--warn); } .pro-root .people[data-grade="E"] .pico, .pro-root .people[data-grade="E+"] .pico{ fill:var(--crit); } .pro-root .env-tile.occ .grade:empty{ display:none; } .pro-root .air-alerts{ margin-top:14px; display:grid; gap:8px; } .pro-root .air-alerts:empty{ display:none; } .pro-root .alert{ font-size:12.5px; border-radius:10px; padding:10px 12px; } .pro-root .alert.vent{ color:var(--warn); background:color-mix(in srgb,var(--warn) 10%,transparent); } .pro-root .alert.vent.crit{ color:var(--crit); background:color-mix(in srgb,var(--crit) 10%,transparent); } .pro-root .alert.fire{ color:var(--crit); background:color-mix(in srgb,var(--crit) 12%,transparent); border:1px solid color-mix(in srgb,var(--crit) 38%,transparent); font-weight:600; animation:pro-fire 1.4s ease-in-out infinite; } @keyframes pro-fire{ 0%,100%{ opacity:1 } 50%{ opacity:.7 } } /* ---------- responsive ---------- */ @media (max-width:1180px){ .pro-root{ overflow-y:auto; } .pro-root .shell{ height:auto; min-height:100vh; } .pro-root .main{ height:auto; overflow:visible; } .pro-root .grid[data-scene]{ grid-template-rows:none; } .pro-root .grid[data-scene="ops"] .events{ grid-column:span 2; } .pro-root .grid{ grid-template-columns:repeat(2,1fr); } .pro-root .hero{ grid-column:span 2; grid-row:auto; } .pro-root .ctl, .pro-root .span2{ grid-column:span 2; } .pro-root .span4{ grid-column:span 2; } .pro-root .flow, .pro-root .target, .pro-root .trend, .pro-root .comp, .pro-root .filter{ grid-column:span 2; } .pro-root .unit-grid{ grid-template-columns:repeat(3,1fr); } .pro-root .air-grid{ grid-template-columns:repeat(4,1fr); } } @media (max-width:760px){ .pro-root .shell{ grid-template-columns:1fr; } .pro-root .rail{ flex-direction:row; height:auto; position:static; width:100%; overflow-x:auto; border-right:0; border-bottom:1px solid var(--stroke); } .pro-root .rail .brand{ margin-bottom:0; } .pro-root .rail-label{ display:none; } .pro-root .rail-sp{ flex:0; } .pro-root .grid{ grid-template-columns:1fr; } .pro-root .hero, .pro-root .ctl, .pro-root .span2, .pro-root .span4, .pro-root .flow, .pro-root .target, .pro-root .trend, .pro-root .comp, .pro-root .filter{ grid-column:1 / -1; } .pro-root .unit-grid{ grid-template-columns:repeat(2,1fr); } .pro-root .air-grid{ grid-template-columns:repeat(2,1fr); } .pro-root .tgt-row{ grid-template-columns:10px 1fr auto 14px auto; } .pro-root .tgt-row .pbar, .pro-root .tgt-pct, .pro-root .tgt-state{ display:none; } .pro-root .main{ padding:16px 15px 28px; } } @media (prefers-reduced-motion:reduce){ .pro-root *{ animation:none!important; transition:none!important; } } .pro-root :focus-visible{ outline:2px solid var(--acc); outline-offset:2px; border-radius:8px; } /* ══════════ 공기정화 레벨(미세먼지 기반) ══════════ */ .pro-root .card.purify{ display:flex; flex-direction:column; } .pro-root .pl-head{ display:flex; align-items:center; gap:18px; margin:10px 0 12px; } .pro-root .pl-now{ display:flex; align-items:baseline; gap:5px; flex:none; } .pro-root .pl-now b{ font-size:44px; font-weight:750; line-height:1; color:var(--acc); transition:color .3s; } .pro-root .pl-now small{ font-size:13px; color:var(--ink-3); } .pro-root .pl-desc{ margin-left:8px; align-self:center; font-size:11px; font-weight:650; padding:3px 9px; border-radius:999px; background:color-mix(in srgb,var(--acc) 14%,transparent); color:var(--acc); } .pro-root .card.purify[data-lv="3"] .pl-now b, .pro-root .card.purify[data-lv="3"] .pl-desc{ color:var(--warn); } .pro-root .card.purify[data-lv="3"] .pl-desc{ background:color-mix(in srgb,var(--warn) 14%,transparent); } .pro-root .card.purify[data-lv="4"] .pl-now b, .pro-root .card.purify[data-lv="4"] .pl-desc{ color:var(--crit); } .pro-root .card.purify[data-lv="4"] .pl-desc{ background:color-mix(in srgb,var(--crit) 14%,transparent); } .pro-root .pl-kv{ display:grid; grid-template-columns:1fr 1fr; gap:12px; flex:1; } .pro-root .pl-kv .k{ font-size:11px; color:var(--ink-3); } .pro-root .pl-kv .v{ display:flex; align-items:baseline; gap:3px; margin-top:2px; } .pro-root .pl-kv .v b{ font-size:20px; font-weight:700; } .pro-root .pl-kv .v small{ font-size:10.5px; color:var(--ink-3); } .pro-root .pl-kv .g{ margin-left:6px; font-size:10.5px; font-weight:650; color:var(--ink-3); } .pro-root .pl-kv .g.ok{ color:var(--acc); } .pro-root .pl-kv .g.warn{ color:var(--warn); } .pro-root .pl-kv .g.crit{ color:var(--crit); } .pro-root .pl-steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:7px; margin-bottom:12px; } .pro-root .pl-step{ text-align:center; } .pro-root .pl-step i{ display:block; height:8px; border-radius:4px; background:var(--card-hi); border:1px solid var(--stroke); transition:background .28s,box-shadow .28s,border-color .28s; } .pro-root .pl-step b{ display:block; margin-top:5px; font-size:10.5px; font-weight:650; color:var(--ink-3); } .pro-root .pl-step.on i{ background:var(--acc); border-color:transparent; box-shadow:0 0 8px var(--acc-glow); } .pro-root .pl-step.cur b{ color:var(--ink); } .pro-root .card.purify[data-lv="3"] .pl-step.on i{ background:var(--warn); box-shadow:0 0 8px rgba(245,177,75,.45); } .pro-root .card.purify[data-lv="4"] .pl-step.on i{ background:var(--crit); box-shadow:0 0 8px rgba(244,112,105,.45); } .pro-root .pm-chart{ width:100%; flex:1; min-height:44px; height:auto; display:block; } .pro-root .pm-line{ fill:none; stroke:var(--acc); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke; } .pro-root .pm-area{ fill:color-mix(in srgb,var(--acc) 9%,transparent); stroke:none; } .pro-root .card.purify[data-lv="4"] .pm-line{ stroke:var(--crit); } .pro-root .card.purify[data-lv="4"] .pm-area{ fill:color-mix(in srgb,var(--crit) 10%,transparent); } .pro-root .pm-lim{ stroke:var(--crit); stroke-width:1; stroke-dasharray:5 4; opacity:.5; } .pro-root .pl-alert{ margin-top:12px; padding:12px 15px; border-radius:var(--r-sm); font-size:13.5px; font-weight:650; background:color-mix(in srgb,var(--crit) 12%,transparent); border:1px solid color-mix(in srgb,var(--crit) 34%,transparent); color:var(--crit); animation:pro-plpulse 1.6s ease-in-out infinite; } @keyframes pro-plpulse{ 0%,100%{ opacity:1; } 50%{ opacity:.72; } } /* ══════════ 녹화 모드(?rec=1) ══════════ 조작 흔적을 지운다. 심사 영상에서 진행 바·스텝 번호·개발용 힌트가 보이면 화면이 연출된 것으로 읽힌다. 시뮬레이션 고지는 .demo-tag 하나로 남긴다. */ .pro-root.rec .caption .step{ display:none; } .pro-root.rec .caption{ padding:16px 30px; } .pro-root.rec .ph-tag{ display:none; } /* 녹화 중엔 씬 탭이 필요 없다 — 대본이 씬을 몰고, 시나리오 버튼이 이름을 이미 갖고 있다. (탭을 남기면 같은 이름이 두 줄로 겹쳐 보인다) 높이는 반드시 고정한다: 재생을 누르면 시나리오 버튼도 사라져 이 줄이 비는데, 높이가 무너지면 아래 카드가 통째로 위로 튄다 — 녹화 중 레이아웃이 흔들린다. */ .pro-root.rec .scene-tabs button[data-act="scene"]{ display:none; } .pro-root.rec .scene-tabs{ min-height:38px; } .pro-root.rec .ch-launch{ margin-left:0; } /* 자막은 position:fixed 라 카드 위를 덮는다. 그만큼 아래 여백을 비워 둔다 — 안 그러면 CO₂ 씬에서 자막이 '환기 알림' 배너 뒷부분을 가린다. */ .pro-root.rec .main{ padding-bottom:104px; } /* 시뮬레이션 고지 배지 — 실운영 데이터로 오인되지 않게. ?tag=0 이면 숨김 */ .pro-root .demo-tag{ margin-left:10px; font-size:10.5px; font-weight:650; letter-spacing:.04em; padding:3px 9px; border-radius:999px; color:var(--ink-3); background:var(--card-hi); border:1px solid var(--stroke); } /* ══════════ 세이비타 — AI 음성 비서 팝업 ══════════ 음성은 내지 않는다. 대사를 띄우고 파형으로 발화 구간만 표시한다(클로바더빙 타이밍용). */ /* 왼쪽에 둔다. 오른쪽은 필터·목표 카드 자리라, AI가 말하는 바로 그 카드를 팝업이 가린다. */ .pro-root .savita{ position:fixed; left:96px; bottom:118px; z-index:24; width:min(460px,34vw); border-radius:16px; background:rgba(10,18,32,.92); border:1px solid var(--stroke-2); backdrop-filter:blur(14px); box-shadow:0 20px 60px rgba(0,0,0,.5); opacity:0; transform:translateY(14px) scale(.98); transition:opacity .4s ease,transform .4s ease; } .pro-root .savita.in{ opacity:1; transform:translateY(0) scale(1); } .pro-root .sv-head{ display:flex; align-items:center; gap:8px; padding:12px 16px; border-bottom:1px solid var(--stroke); } .pro-root .sv-orb{ width:9px; height:9px; border-radius:50%; background:var(--acc); box-shadow:0 0 10px var(--acc-glow); animation:pro-plpulse 1.8s ease-in-out infinite; } .pro-root .sv-nm{ font-size:13px; font-weight:750; letter-spacing:-.01em; } .pro-root .sv-head em{ font-style:normal; font-size:10.5px; color:var(--ink-3); } .pro-root .sv-badge{ margin-left:auto; font-size:9.5px; font-weight:700; letter-spacing:.1em; padding:3px 7px; border-radius:5px; background:color-mix(in srgb,var(--acc) 14%,transparent); color:var(--acc); } .pro-root .sv-body{ padding:14px 16px 16px; display:flex; flex-direction:column; gap:11px; } .pro-root .sv-msg{ display:grid; grid-template-columns:26px 1fr; gap:10px; align-items:start; } /* 전사가 시작되기 전 빈 문장이라도 말풍선 높이가 무너지면 안 된다 */ .pro-root .sv-msg p{ margin:0; font-size:13.5px; line-height:1.55; color:var(--ink-2); min-height:1.55em; } .pro-root .sv-who{ width:26px; height:26px; border-radius:8px; display:grid; place-items:center; background:var(--card-hi); border:1px solid var(--stroke); color:var(--ink-3); } .pro-root .sv-who svg{ width:14px; height:14px; } .pro-root .sv-who.ai{ background:color-mix(in srgb,var(--acc) 16%,transparent); border-color:transparent; color:var(--acc); } .pro-root .sv-msg.ai p{ color:var(--ink); font-weight:600; } /* 듣는 중(STT 전사) — 마이크가 뛰고, 파형이 흔들리고, 문장이 한 글자씩 채워진다 */ .pro-root .sv-listen{ grid-column:2; display:none; align-items:center; gap:3px; margin-top:8px; height:14px; } .pro-root .sv-msg.user.listening .sv-listen{ display:flex; } .pro-root .sv-listen i{ width:3px; height:4px; border-radius:2px; background:var(--ink-3); animation:pro-wave .8s ease-in-out infinite; } .pro-root .sv-listen i:nth-child(2){ animation-delay:.1s; } .pro-root .sv-listen i:nth-child(3){ animation-delay:.2s; } .pro-root .sv-listen i:nth-child(4){ animation-delay:.3s; } .pro-root .sv-listen i:nth-child(5){ animation-delay:.4s; } .pro-root .sv-listen em{ margin-left:7px; font-style:normal; font-size:10.5px; font-weight:600; color:var(--ink-3); } .pro-root .sv-msg.user.listening .sv-who{ color:var(--acc); border-color:color-mix(in srgb,var(--acc) 40%,transparent); background:color-mix(in srgb,var(--acc) 12%,transparent); animation:pro-plpulse 1.1s ease-in-out infinite; } /* 전사 커서 */ .pro-root .sv-msg.user.listening p::after{ content:'▍'; margin-left:1px; color:var(--acc); animation:pro-caret .9s steps(1) infinite; } @keyframes pro-caret{ 0%,49%{ opacity:1; } 50%,100%{ opacity:0; } } /* 인식 완료 — 문장이 확정됐음을 체크로 알린다 */ .pro-root .sv-recog{ grid-column:2; display:none; align-items:center; gap:5px; margin-top:7px; color:var(--acc); } .pro-root .sv-msg.user.recognized .sv-recog{ display:flex; animation:pro-pop .28s ease-out; } .pro-root .sv-recog svg{ width:12px; height:12px; } .pro-root .sv-recog em{ font-style:normal; font-size:10.5px; font-weight:650; } @keyframes pro-pop{ from{ opacity:0; transform:translateY(3px); } to{ opacity:1; transform:none; } } /* 처리 중 — '음성 인식 중' → '명령 처리 중'. 사람 대화처럼 즉답하면 AI 로 안 보인다. */ .pro-root .sv-msg.think p{ display:flex; align-items:center; gap:8px; color:var(--ink-3); font-size:12.5px; font-weight:600; min-height:1.55em; } .pro-root .sv-msg.think .sv-who{ animation:pro-spin 1.8s linear infinite; } @keyframes pro-spin{ to{ transform:rotate(360deg); } } .pro-root .sv-msg.think .dots{ display:inline-flex; gap:3px; font-style:normal; } .pro-root .sv-msg.think .dots i{ width:4px; height:4px; border-radius:50%; background:var(--acc); opacity:.35; animation:pro-dot 1.2s ease-in-out infinite; } .pro-root .sv-msg.think .dots i:nth-child(2){ animation-delay:.18s; } .pro-root .sv-msg.think .dots i:nth-child(3){ animation-delay:.36s; } @keyframes pro-dot{ 0%,100%{ opacity:.28; transform:translateY(0); } 45%{ opacity:1; transform:translateY(-3px); } } .pro-root .sv-wave{ grid-column:2; display:flex; align-items:flex-end; gap:3px; height:0; overflow:hidden; transition:height .25s; } .pro-root .sv-msg.speaking .sv-wave{ height:14px; margin-top:8px; } .pro-root .sv-wave i{ width:3px; height:4px; border-radius:2px; background:var(--acc); opacity:.75; } .pro-root .sv-msg.speaking .sv-wave i{ animation:pro-wave .9s ease-in-out infinite; } .pro-root .sv-wave i:nth-child(2){ animation-delay:.12s; } .pro-root .sv-wave i:nth-child(3){ animation-delay:.24s; } .pro-root .sv-wave i:nth-child(4){ animation-delay:.36s; } .pro-root .sv-wave i:nth-child(5){ animation-delay:.48s; } @keyframes pro-wave{ 0%,100%{ height:4px; } 50%{ height:14px; } } /* ══════════ 챕터 타이틀 오버레이 ══════════ */ .pro-root .chapter{ position:fixed; inset:0; z-index:30; display:grid; place-items:center; background:radial-gradient(700px 420px at 50% 45%, rgba(8,14,26,.86), rgba(6,10,20,.94)); opacity:0; transition:opacity .55s ease; pointer-events:none; } .pro-root .chapter.in{ opacity:1; } .pro-root .ch-in{ text-align:center; max-width:min(1000px,86vw); transform:translateY(12px); transition:transform .55s ease; } .pro-root .chapter.in .ch-in{ transform:translateY(0); } .pro-root .ch-rule{ width:56px; height:3px; border-radius:2px; margin:0 auto 22px; background:linear-gradient(90deg,var(--acc-deep),var(--acc)); box-shadow:0 0 14px var(--acc-glow); } .pro-root .ch-t{ font-size:clamp(24px,2.6vw,40px); font-weight:750; letter-spacing:-.02em; line-height:1.32; color:var(--ink); } .pro-root .ch-s{ margin-top:16px; font-size:clamp(12px,1.05vw,16px); font-weight:650; letter-spacing:.06em; color:var(--acc); }