/* 파일: JinYuanFdcNext/wwwroot/css/app.css — 어두운 공정 모니터링 화면, 데이터 상태 색, 도면 애니메이션과 반응형 배치를 정의합니다. */
@font-face { font-family: 'JinYuan Sans'; src: url('/fonts/NotoSansCJKkr-Regular.otf') format('opentype'); font-weight: 400; font-display: swap; } /* 동봉한 Noto CJK 글꼴을 사용하여 외부 CDN 없이 한글·중국어를 표시합니다. */
:root { color-scheme: dark; --bg:#0b1320; --sidebar:#0d1725; --panel:#111e2e; --panel2:#152438; --stroke:#243247; --text:#e8eef6; --muted:#92a2b7; --teal:#64d9c7; --blue:#719ef7; --amber:#efb778; --red:#f18491; --font:'JinYuan Sans','Malgun Gothic','Microsoft YaHei','Noto Sans CJK KR',system-ui,sans-serif; } /* 배경·패널·상태 색상과 기본 글꼴을 공통 디자인 변수로 선언합니다. */
* { box-sizing:border-box; } /* 기본 HTML 요소 선택자 *의 테두리을 지정합니다. */
html,body { margin:0; min-height:100%; background:var(--bg); color:var(--text); font-family:var(--font); font-size:15px; line-height:1.6; -webkit-font-smoothing:antialiased; } /* 기본 HTML 요소 선택자 html,body의 글자·상태 색·배경·글꼴 크기·굵기·바깥 여백을 지정합니다. */
body { font-variant-numeric:tabular-nums; } /* 기본 HTML 요소 선택자 body의 글꼴 크기·굵기을 지정합니다. */
a { color:inherit; text-decoration:none; } /* 기본 HTML 요소 선택자 a의 글자·상태 색을 지정합니다. */
button,input,select,textarea { font:inherit; } /* 동작 버튼 선택자 button,input,select,textarea의 글꼴 크기·굵기을 지정합니다. */
button,a,input,select,textarea { -webkit-tap-highlight-color:transparent; } /* 동작 버튼 선택자 button,a,input,select,textarea의 글자·상태 색을 지정합니다. */
button { cursor:pointer; } /* 동작 버튼 선택자 button의 표시 속성을 지정합니다. */
button:disabled,input:disabled,select:disabled,fieldset:disabled { opacity:.55; cursor:not-allowed; } /* 동작 버튼 선택자 button:disabled,input:disabled,select:disabled,fieldset:disabled의 표시 속성을 지정합니다. */
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible { outline:2px solid var(--teal); outline-offset:3px; } /* 동작 버튼 선택자 button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible의 표시 속성을 지정합니다. */
input,select,textarea { min-width:0; border:1px solid #304159; border-radius:7px; color:var(--text); background:#0e1929; padding:9px 12px; min-height:40px; } /* 기본 HTML 요소 선택자 input,select,textarea의 글자·상태 색·배경·안쪽 여백·테두리을 지정합니다. */
input:hover,select:hover,textarea:hover { border-color:#526980; } /* 기본 HTML 요소 선택자 input:hover,select:hover,textarea:hover의 글자·상태 색·테두리을 지정합니다. */
input[type=checkbox] { accent-color:var(--teal); width:16px; height:16px; min-height:16px; padding:0; vertical-align:middle; } /* 기본 HTML 요소 선택자 input[type=checkbox]의 글자·상태 색·안쪽 여백·크기을 지정합니다. */
select { padding-right:30px; max-width:100%; } /* 기본 HTML 요소 선택자 select의 크기을 지정합니다. */
option { background:#142236; } /* 기본 HTML 요소 선택자 option의 배경을 지정합니다. */
textarea { resize:vertical; } /* 기본 HTML 요소 선택자 textarea의 표시 속성을 지정합니다. */
fieldset { border:0; padding:0; margin:0; min-width:0; } /* 입력 영역 선택자 fieldset의 안쪽 여백·바깥 여백·테두리·크기을 지정합니다. */
label { display:flex; flex-direction:column; gap:8px; color:#b6c4d5; font-size:14px; } /* 기본 HTML 요소 선택자 label의 배치 방식·글자·상태 색·글꼴 크기·굵기을 지정합니다. */
label+label { margin-top:16px; } /* 기본 HTML 요소 선택자 label+label의 바깥 여백을 지정합니다. */
h1,h2,h3,p { margin:0; } /* 기본 HTML 요소 선택자 h1,h2,h3,p의 바깥 여백을 지정합니다. */
h1 { font-size:35px; line-height:1.5; letter-spacing:-1px; font-weight:700; } /* 기본 HTML 요소 선택자 h1의 글꼴 크기·굵기을 지정합니다. */
h2 { font-size:18px; letter-spacing:-.25px; font-weight:700; } /* 기본 HTML 요소 선택자 h2의 글꼴 크기·굵기을 지정합니다. */
h3 { font-size:20px; letter-spacing:-.4px; } /* 기본 HTML 요소 선택자 h3의 글꼴 크기·굵기을 지정합니다. */
small { font-size:13px; } /* 기본 HTML 요소 선택자 small의 글꼴 크기·굵기을 지정합니다. */
.glyph { width:20px; height:20px; flex:0 0 20px; vertical-align:middle; } /* 공통 벡터 아이콘 선택자 .glyph의 크기을 지정합니다. */
.shell { display:grid; grid-template-columns:234px minmax(0,1fr); min-height:100vh; } /* 전체 화면 격자 선택자 .shell의 배치 방식·격자 열을 지정합니다. */
.sidebar { position:fixed; inset:0 auto 0 0; width:234px; display:flex; flex-direction:column; background:var(--sidebar); border-right:1px solid #202d40; z-index:50; padding:30px 17px 19px; } /* 왼쪽 메뉴 선택자 .sidebar의 배치 방식·배경·안쪽 여백·테두리을 지정합니다. */
.brand { display:flex; align-items:center; gap:12px; padding:0 14px; } /* 제품 식별 영역 선택자 .brand의 배치 방식·안쪽 여백을 지정합니다. */
.brand-symbol { font-family:Arial,sans-serif; display:flex; align-items:center; justify-content:center; width:39px; height:42px; background:#203646; border:1px solid #3b655e; border-radius:9px 3px 9px 3px; font-size:21px; font-weight:800; letter-spacing:-3px; padding-right:3px; color:#80dbc6; } /* 제품 식별 영역 선택자 .brand-symbol의 배치 방식·글자·상태 색·배경·글꼴 크기·굵기을 지정합니다. */
.brand-symbol span { color:#c7eee5; transform:translateY(4px); } /* 제품 식별 영역 선택자 .brand-symbol span의 글자·상태 색·좌표 변환을 지정합니다. */
.brand strong { display:block; font-family:Arial,sans-serif; font-size:28px; letter-spacing:-.7px; line-height:1.3; } /* 제품 식별 영역 선택자 .brand strong의 배치 방식·글꼴 크기·굵기을 지정합니다. */
.brand small { display:block; color:#8091a8; font-family:Arial,sans-serif; font-size:11px; letter-spacing:2.2px; margin-top:6px; } /* 제품 식별 영역 선택자 .brand small의 배치 방식·글자·상태 색·글꼴 크기·굵기·바깥 여백을 지정합니다. */
.brand-dot { color:var(--teal); } /* 제품 식별 영역 선택자 .brand-dot의 글자·상태 색을 지정합니다. */
.plant-switch { display:flex; align-items:center; gap:10px; margin:30px 2px 18px; padding:14px 10px; border:1px solid #2a384b; border-radius:8px; } /* 공장 선택 표시 선택자 .plant-switch의 배치 방식·안쪽 여백·바깥 여백·테두리을 지정합니다. */
.plant-switch strong { display:block; font:600 12px/1.5 Arial,sans-serif; letter-spacing:.2px; } /* 공장 선택 표시 선택자 .plant-switch strong의 배치 방식·글꼴 크기·굵기을 지정합니다. */
.plant-switch small { display:block; margin-top:3px; color:var(--muted); font-size:11px; } /* 공장 선택 표시 선택자 .plant-switch small의 배치 방식·글자·상태 색·글꼴 크기·굵기·바깥 여백을 지정합니다. */
.plant-mark { height:26px; width:26px; border:1px solid #3d5266; border-radius:5px; background:linear-gradient(90deg,transparent 42%,#46637c 42%,#46637c 49%,transparent 49%),linear-gradient(0deg,transparent 42%,#46637c 42%,#46637c 49%,transparent 49%); opacity:.8; } /* 공장 선택 표시 선택자 .plant-mark의 배경·테두리·크기을 지정합니다. */
.sidebar nav { overflow:auto; scrollbar-width:thin; } /* 왼쪽 메뉴 선택자 .sidebar nav의 크기·넘침 처리을 지정합니다. */
.nav-caption { padding:7px 14px 10px; color:#677b92; font-size:11px; letter-spacing:1.7px; font-weight:600; } /* 탐색 메뉴 선택자 .nav-caption의 글자·상태 색·글꼴 크기·굵기·안쪽 여백을 지정합니다. */
.nav-caption.spaced { margin-top:24px; } /* 탐색 메뉴 선택자 .nav-caption.spaced의 바깥 여백을 지정합니다. */
.nav-link { display:flex; gap:12px; align-items:center; padding:13px 14px; border-radius:7px; color:#a1b1c5; margin-bottom:5px; min-height:46px; position:relative; transition:background .15s,color .15s; white-space:nowrap; font-size:14px; } /* 탐색 메뉴 선택자 .nav-link의 배치 방식·글자·상태 색·글꼴 크기·굵기·안쪽 여백을 지정합니다. */
.nav-link .glyph { width:18px; height:18px; flex-basis:18px; } /* 탐색 메뉴 선택자 .nav-link .glyph의 크기을 지정합니다. */
.nav-link:hover { background:#17283b; color:#e0edf6; } /* 탐색 메뉴 선택자 .nav-link:hover의 글자·상태 색·배경을 지정합니다. */
.nav-link.active { color:#8ae4d3; background:linear-gradient(90deg,#1a3a40,#183038); box-shadow:inset 2px 0 0 #74d9c5; } /* 탐색 메뉴 선택자 .nav-link.active의 글자·상태 색·배경을 지정합니다. */
.nav-link b { margin-left:auto; display:grid; place-items:center; border-radius:4px; background:#5a343c; color:#eaa5ae; min-width:22px; height:22px; font:600 13px Arial,sans-serif; } /* 탐색 메뉴 선택자 .nav-link b의 배치 방식·글자·상태 색·배경·글꼴 크기·굵기을 지정합니다. */
.sidebar-bottom { margin-top:auto; padding:28px 10px 4px; } /* 왼쪽 메뉴 선택자 .sidebar-bottom의 안쪽 여백·바깥 여백을 지정합니다. */
.sidebar-bottom>small { display:block; color:#63758d; font-size:12px; line-height:1.9; margin-top:16px; } /* 왼쪽 메뉴 선택자 .sidebar-bottom>small의 배치 방식·글자·상태 색·글꼴 크기·굵기·바깥 여백을 지정합니다. */
.collector-health { border-top:1px solid var(--stroke); padding-top:17px; display:flex; gap:8px; align-items:center; font:600 11px Arial,sans-serif; letter-spacing:1px; color:#90a5ba; } /* 수집 상태 선택자 .collector-health의 배치 방식·글자·상태 색·글꼴 크기·굵기·테두리을 지정합니다. */
.collector-health strong { margin-left:auto; color:#657a91; font-size:11px; } /* 수집 상태 선택자 .collector-health strong의 글자·상태 색·글꼴 크기·굵기·바깥 여백을 지정합니다. */
.pulse-dot { display:inline-block; width:6px; height:6px; background:var(--teal); border-radius:50%; box-shadow:0 0 0 3px #64d9c712; } /* 상태 점 선택자 .pulse-dot의 배치 방식·배경·테두리·크기을 지정합니다. */
.workspace { grid-column:2; min-width:0; } /* 본문 영역 선택자 .workspace의 크기을 지정합니다. */
.topbar { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:0 34px; height:76px; border-bottom:1px solid #202c3e; background:#0e1725; } /* 상단 도구 모음 선택자 .topbar의 배치 방식·배경·안쪽 여백·테두리을 지정합니다. */
.top-left,.top-actions { display:flex; align-items:center; gap:22px; min-width:0; } /* 상단 항목 선택자 .top-left,.top-actions의 배치 방식·크기을 지정합니다. */
.breadcrumb { color:#a3b1c3; font-size:13px; white-space:nowrap; } /* 현재 위치 표시 선택자 .breadcrumb의 글자·상태 색·글꼴 크기·굵기을 지정합니다. */
.breadcrumb span { color:#475a71; margin:0 14px; } /* 현재 위치 표시 선택자 .breadcrumb span의 글자·상태 색·바깥 여백을 지정합니다. */
.top-actions { gap:18px; flex-shrink:0; } /* 상단 항목 선택자 .top-actions의 표시 속성을 지정합니다. */
.source-badge { display:inline-flex; gap:7px; align-items:center; padding:4px 9px; border:1px solid #33445a; border-radius:4px; font-size:12px; letter-spacing:.4px; color:#a7b7c9; white-space:nowrap; } /* 실측·시뮬레이션 구분 선택자 .source-badge의 배치 방식·글자·상태 색·글꼴 크기·굵기·안쪽 여백을 지정합니다. */
.source-badge.simulation { color:#e0b98b; background:#362f25; border-color:#4a402f; } /* 실측·시뮬레이션 구분 선택자 .source-badge.simulation의 글자·상태 색·배경·테두리을 지정합니다. */
.source-badge.real { color:var(--teal); border-color:#285a53; background:#19342f; } /* 실측·시뮬레이션 구분 선택자 .source-badge.real의 글자·상태 색·배경·테두리을 지정합니다. */
.source-badge i { width:5px; height:5px; border-radius:50%; background:currentColor; } /* 실측·시뮬레이션 구분 선택자 .source-badge i의 배경·테두리·크기을 지정합니다. */
.top-clock { font-family:ui-monospace,Consolas,monospace; font-size:14px; color:#b2c2d4; } /* 상단 항목 선택자 .top-clock의 글자·상태 색·글꼴 크기·굵기을 지정합니다. */
.top-clock small { font-size:11px; color:#6d8099; } /* 상단 항목 선택자 .top-clock small의 글자·상태 색·글꼴 크기·굵기을 지정합니다. */
.language-select { border:0; background:transparent; font-size:13px; min-height:30px; width:98px; padding:3px 16px 3px 7px; } /* 언어 선택 선택자 .language-select의 배경·글꼴 크기·굵기·안쪽 여백·테두리을 지정합니다. */
.avatar { display:grid; place-items:center; width:30px; height:30px; border-radius:50%; font:600 13px Arial,sans-serif; background:#27394f; border:1px solid #4c5f75; color:#cbd8e8; } /* 사용자 식별 표시 선택자 .avatar의 배치 방식·글자·상태 색·배경·글꼴 크기·굵기을 지정합니다. */
.main { padding:30px 34px 0; margin:auto; max-width:2100px; } /* 본문 여백 선택자 .main의 안쪽 여백·바깥 여백·크기을 지정합니다. */
.page-head { display:flex; align-items:center; justify-content:space-between; gap:24px; margin-bottom:26px; } /* 페이지 제목 선택자 .page-head의 배치 방식·바깥 여백을 지정합니다. */
.eyebrow { font-family:Arial,sans-serif; font-size:11px; color:#7790aa; letter-spacing:1.9px; font-weight:600; margin-bottom:8px; } /* 보조 제목 선택자 .eyebrow의 글자·상태 색·글꼴 크기·굵기·바깥 여백을 지정합니다. */
.page-head p { margin-top:5px; font-size:14px; color:var(--muted); } /* 페이지 제목 선택자 .page-head p의 글자·상태 색·글꼴 크기·굵기·바깥 여백을 지정합니다. */
.page-head p>span,.panel-head p>span { color:#4c5f76; margin:0 8px; } /* 페이지 제목 선택자 .page-head p>span,.panel-head p>span의 글자·상태 색·바깥 여백을 지정합니다. */
.page-head h1 { display:flex; align-items:center; gap:16px; flex-wrap:wrap; } /* 페이지 제목 선택자 .page-head h1의 배치 방식을 지정합니다. */
.live-label { font-size:12px; color:#8ec8bb; display:flex; gap:7px; align-items:center; letter-spacing:0; font-weight:400; } /* 실시간 상태 선택자 .live-label의 배치 방식·글자·상태 색·글꼴 크기·굵기을 지정합니다. */
.button { display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:10px 16px; border:1px solid transparent; border-radius:7px; min-height:40px; font-size:14px; line-height:1.4; font-weight:600; white-space:nowrap; } /* 동작 버튼 선택자 .button의 배치 방식·글꼴 크기·굵기·안쪽 여백·테두리을 지정합니다. */
.button .glyph { width:16px; height:16px; flex-basis:16px; } /* 동작 버튼 선택자 .button .glyph의 크기을 지정합니다. */
.button.primary { background:#72d9c6; color:#0a2725; border-color:#8be2d2; } /* 동작 버튼 선택자 .button.primary의 글자·상태 색·배경·테두리을 지정합니다. */
.button.primary:hover { background:#98e9da; } /* 동작 버튼 선택자 .button.primary:hover의 배경을 지정합니다. */
.button.secondary { background:#152235; border-color:#33435a; color:#b8c8db; } /* 동작 버튼 선택자 .button.secondary의 글자·상태 색·배경·테두리을 지정합니다. */
.button.secondary:hover { background:#1d3048; color:#ecf4fd; } /* 동작 버튼 선택자 .button.secondary:hover의 글자·상태 색·배경을 지정합니다. */
.button.small { min-height:30px; padding:6px 10px; font-size:13px; } /* 동작 버튼 선택자 .button.small의 글꼴 크기·굵기·안쪽 여백을 지정합니다. */
.button.danger { color:#ec9aab; background:#33232f; border-color:#573342; } /* 동작 버튼 선택자 .button.danger의 글자·상태 색·배경·테두리을 지정합니다. */
.icon-button { display:grid; place-items:center; background:transparent; color:#aec0d6; border:0; padding:5px; } /* 동작 버튼 선택자 .icon-button의 배치 방식·글자·상태 색·배경·안쪽 여백을 지정합니다. */
.head-actions { display:flex; gap:10px; flex-wrap:wrap; } /* 페이지 동작 모음 선택자 .head-actions의 배치 방식을 지정합니다. */
.kpi-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; margin-bottom:22px; } /* 요약 지표 카드 선택자 .kpi-grid의 배치 방식·격자 열·바깥 여백을 지정합니다. */
.kpi { background:linear-gradient(125deg,#142234,#101c2b); border:1px solid var(--stroke); border-radius:9px; padding:19px 21px 17px; min-width:0; position:relative; } /* 요약 지표 카드 선택자 .kpi의 배경·안쪽 여백·테두리·크기을 지정합니다. */
.kpi>div:first-child { display:flex; align-items:center; justify-content:space-between; gap:12px; color:#9faec2; font-size:13px; } /* 요약 지표 카드 선택자 .kpi>div:first-child의 배치 방식·글자·상태 색·글꼴 크기·굵기을 지정합니다. */
.kpi .glyph { color:#52677f; width:18px; height:18px; flex-basis:18px; } /* 요약 지표 카드 선택자 .kpi .glyph의 글자·상태 색·크기을 지정합니다. */
.kpi>strong { display:block; font-family:Arial,sans-serif; font-size:42px; font-weight:500; letter-spacing:-1.1px; line-height:1.4; margin:11px 0 6px; } /* 요약 지표 카드 선택자 .kpi>strong의 배치 방식·글꼴 크기·굵기·바깥 여백을 지정합니다. */
.kpi strong small { font-family:var(--font); margin-left:9px; font-size:13px; letter-spacing:0; color:#71879f; } /* 요약 지표 카드 선택자 .kpi strong small의 글자·상태 색·글꼴 크기·굵기·바깥 여백을 지정합니다. */
.kpi p { font-size:12px; color:#7e93aa; height:20px; white-space:nowrap; } /* 요약 지표 카드 선택자 .kpi p의 글자·상태 색·글꼴 크기·굵기을 지정합니다. */
.kpi-track { height:3px; background:#203247; border-radius:2px; margin-top:14px; overflow:hidden; } /* 요약 지표 카드 선택자 .kpi-track의 배경·바깥 여백·테두리·넘침 처리을 지정합니다. */
.kpi-track i { height:3px; display:block; background:#698bab; opacity:.8; } /* 요약 지표 카드 선택자 .kpi-track i의 배치 방식·배경을 지정합니다. */
.teal { color:var(--teal); } /* 기본 HTML 요소 선택자 .teal의 글자·상태 색을 지정합니다. */
.amber { color:var(--amber); } /* 기본 HTML 요소 선택자 .amber의 글자·상태 색을 지정합니다. */
.dot-separator { margin:0 8px; color:#53657d; } /* 기본 HTML 요소 선택자 .dot-separator의 글자·상태 색·바깥 여백을 지정합니다. */
.overview-middle { display:grid; grid-template-columns:minmax(0,1.95fr) minmax(280px,1fr); gap:20px; margin-bottom:28px; } /* 전체 현황 선택자 .overview-middle의 배치 방식·격자 열·바깥 여백을 지정합니다. */
.panel { background:var(--panel); border:1px solid var(--stroke); border-radius:9px; min-width:0; overflow:hidden; margin-bottom:22px; } /* 데이터 패널 선택자 .panel의 배경·바깥 여백·테두리·크기을 지정합니다. */
.overview-middle>.panel { margin-bottom:0; } /* 전체 현황 선택자 .overview-middle>.panel의 바깥 여백을 지정합니다. */
.panel-head { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:20px 22px; min-height:72px; } /* 데이터 패널 선택자 .panel-head의 배치 방식·안쪽 여백을 지정합니다. */
.panel-head p { color:#788ea7; font-size:12px; margin-top:4px; } /* 데이터 패널 선택자 .panel-head p의 글자·상태 색·글꼴 크기·굵기·바깥 여백을 지정합니다. */
.panel-head select { min-height:33px; font-size:13px; padding:5px 25px 5px 10px; max-width:220px; } /* 데이터 패널 선택자 .panel-head select의 글꼴 크기·굵기·안쪽 여백·크기을 지정합니다. */
.panel-head .glyph { color:#6f879f; } /* 데이터 패널 선택자 .panel-head .glyph의 글자·상태 색을 지정합니다. */
.chart-component { padding:0 14px 12px; } /* 시계열 차트 선택자 .chart-component의 안쪽 여백을 지정합니다. */
.chart-legend { display:flex; gap:18px; align-items:center; padding:2px 13px 15px; font-size:12px; color:#9fb0c4; min-height:40px; flex-wrap:wrap; } /* 시계열 차트 선택자 .chart-legend의 배치 방식·글자·상태 색·글꼴 크기·굵기·안쪽 여백을 지정합니다. */
.chart-legend>span { display:flex; align-items:center; gap:7px; } /* 시계열 차트 선택자 .chart-legend>span의 배치 방식을 지정합니다. */
.chart-legend i { width:12px; height:2px; border-radius:1px; } /* 시계열 차트 선택자 .chart-legend i의 테두리·크기을 지정합니다. */
.chart-legend>small { margin-left:auto; color:#637d98; font-size:12px; } /* 시계열 차트 선택자 .chart-legend>small의 글자·상태 색·글꼴 크기·굵기·바깥 여백을 지정합니다. */
.trend-chart { display:block; width:100%; height:auto; min-height:175px; } /* 시계열 차트 선택자 .trend-chart의 배치 방식·크기을 지정합니다. */
.trend-chart text { fill:#748ba5; font:12px var(--font); } /* 시계열 차트 선택자 .trend-chart text의 글꼴 크기·굵기을 지정합니다. */
.chart-grid { stroke:#27364b; stroke-dasharray:3 5; stroke-width:1; } /* 시계열 차트 선택자 .chart-grid의 크기을 지정합니다. */
.limit-line { stroke:#d89166; stroke-dasharray:5 5; opacity:.65; } /* 임계 기준선 선택자 .limit-line의 표시 속성을 지정합니다. */
.trend-chart .limit-label { fill:#d89c74; font-size:11px; } /* 시계열 차트 선택자 .trend-chart .limit-label의 글꼴 크기·굵기을 지정합니다. */
.alarm-panel .panel-head { border-bottom:1px solid #243347; min-height:76px; } /* 데이터 패널 선택자 .alarm-panel .panel-head의 테두리을 지정합니다. */
.count-pill { display:inline-flex; vertical-align:middle; margin-left:7px; min-width:22px; height:21px; align-items:center; justify-content:center; padding:0 6px; font:500 13px Arial,sans-serif; color:#92a8c0; background:#223247; border:1px solid #304058; border-radius:4px; letter-spacing:0; } /* 기본 HTML 요소 선택자 .count-pill의 배치 방식·글자·상태 색·배경·글꼴 크기·굵기을 지정합니다. */
.text-link { color:#93b6cd; font-size:12px; white-space:nowrap; } /* 기본 HTML 요소 선택자 .text-link의 글자·상태 색·글꼴 크기·굵기을 지정합니다. */
.text-link span { margin-left:5px; } /* 기본 HTML 요소 선택자 .text-link span의 바깥 여백을 지정합니다. */
.alarm-feed { padding:1px 20px 4px; } /* 알람 표시 선택자 .alarm-feed의 안쪽 여백을 지정합니다. */
.alarm-feed-item { display:flex; align-items:flex-start; gap:11px; padding:17px 0; border-bottom:1px solid #223246; } /* 알람 표시 선택자 .alarm-feed-item의 배치 방식·안쪽 여백·테두리을 지정합니다. */
.alarm-feed-item:last-child { border-bottom:0; } /* 알람 표시 선택자 .alarm-feed-item:last-child의 테두리을 지정합니다. */
.event-marker { width:7px; height:7px; border-radius:2px; margin-top:7px; flex:0 0 7px; background:var(--amber); box-shadow:0 0 0 4px #efb77812; } /* 기본 HTML 요소 선택자 .event-marker의 배경·바깥 여백·테두리·크기을 지정합니다. */
.event-marker.critical { background:var(--red); box-shadow:0 0 0 4px #f1849112; } /* 위험 상태 선택자 .event-marker.critical의 배경을 지정합니다. */
.alarm-feed-item strong { font:600 13px var(--font); color:#bfcbd9; display:flex; align-items:center; gap:10px; flex-wrap:wrap; } /* 알람 표시 선택자 .alarm-feed-item strong의 배치 방식·글자·상태 색·글꼴 크기·굵기을 지정합니다. */
.alarm-feed-item strong span { font-weight:400; color:#cba783; } /* 알람 표시 선택자 .alarm-feed-item strong span의 글자·상태 색·글꼴 크기·굵기을 지정합니다. */
.alarm-feed-item p { font-size:13px; color:#91a5be; margin-top:5px; } /* 알람 표시 선택자 .alarm-feed-item p의 글자·상태 색·글꼴 크기·굵기·바깥 여백을 지정합니다. */
.alarm-feed-item small { font:11px ui-monospace,Consolas,monospace; color:#627d98; margin-top:5px; display:block; } /* 알람 표시 선택자 .alarm-feed-item small의 배치 방식·글자·상태 색·글꼴 크기·굵기·바깥 여백을 지정합니다. */
.event-arrow { margin-left:auto; color:#68829e; font-size:18px; } /* 기본 HTML 요소 선택자 .event-arrow의 글자·상태 색·글꼴 크기·굵기·바깥 여백을 지정합니다. */
.section-toolbar { display:flex; justify-content:space-between; align-items:center; gap:20px; margin-bottom:17px; } /* 조회 도구 모음 선택자 .section-toolbar의 배치 방식·바깥 여백을 지정합니다. */
.section-toolbar p { font-size:12px; color:#6d849e; margin-top:5px; max-width:700px; } /* 조회 도구 모음 선택자 .section-toolbar p의 글자·상태 색·글꼴 크기·굵기·바깥 여백·크기을 지정합니다. */
.filters { display:flex; gap:10px; align-items:center; } /* 기본 HTML 요소 선택자 .filters의 배치 방식을 지정합니다. */
.filters select { font-size:12px; min-height:35px; } /* 기본 HTML 요소 선택자 .filters select의 글꼴 크기·굵기을 지정합니다. */
.search-box { position:relative; } /* 검색 입력 선택자 .search-box의 표시 속성을 지정합니다. */
.search-box .glyph { position:absolute; left:10px; top:10px; color:#6f85a0; width:15px; height:15px; } /* 검색 입력 선택자 .search-box .glyph의 글자·상태 색·크기을 지정합니다. */
.search-box input { width:190px; min-height:35px; padding:7px 9px 7px 32px; font-size:12px; } /* 검색 입력 선택자 .search-box input의 글꼴 크기·굵기·안쪽 여백·크기을 지정합니다. */
.equipment-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:17px; } /* 설비 카드 선택자 .equipment-grid의 배치 방식·격자 열을 지정합니다. */
.equipment-card { display:block; border:1px solid #29394d; border-radius:9px; background:linear-gradient(155deg,#142235,#0f1a29); overflow:hidden; transition:transform .15s,border-color .15s,background .15s; } /* 설비 카드 선택자 .equipment-card의 배치 방식·배경·테두리·넘침 처리을 지정합니다. */
.equipment-card:hover { border-color:#618e9c; transform:translateY(-3px); background:#18293c; } /* 설비 카드 선택자 .equipment-card:hover의 글자·상태 색·배경·테두리·좌표 변환을 지정합니다. */
.equipment-card.warning { border-color:#705539; } /* 설비 카드 선택자 .equipment-card.warning의 글자·상태 색·테두리을 지정합니다. */
.equipment-card.critical { border-color:#734551; } /* 설비 카드 선택자 .equipment-card.critical의 글자·상태 색·테두리을 지정합니다. */
.equipment-card.bad,.equipment-card.stale { border-color:#625575; } /* 설비 카드 선택자 .equipment-card.bad,.equipment-card.stale의 글자·상태 색·테두리을 지정합니다. */
.equipment-card-head { padding:17px 17px 0; display:flex; align-items:flex-start; justify-content:space-between; gap:8px; } /* 설비 카드 선택자 .equipment-card-head의 배치 방식·안쪽 여백을 지정합니다. */
.equipment-id { font-family:Arial,var(--font); font-size:11px; color:#7b93ad; letter-spacing:.5px; } /* 설비 카드 선택자 .equipment-id의 글자·상태 색·글꼴 크기·굵기을 지정합니다. */
.equipment-id>span { color:#415975; margin:0 5px; } /* 설비 카드 선택자 .equipment-id>span의 글자·상태 색·바깥 여백을 지정합니다. */
.equipment-card h3 { margin-top:4px; font:600 19px Arial,var(--font); letter-spacing:.15px; } /* 설비 카드 선택자 .equipment-card h3의 글꼴 크기·굵기·바깥 여백을 지정합니다. */
.status-pill { display:inline-flex; align-items:center; gap:5px; color:#94c9bc; background:#15332f; border:1px solid #29534c; border-radius:4px; padding:3px 7px; font-size:11px; line-height:1.5; white-space:nowrap; letter-spacing:0; font-weight:400; } /* 상태 배지 선택자 .status-pill의 배치 방식·글자·상태 색·배경·글꼴 크기·굵기을 지정합니다. */
.status-pill i,.status-dot { display:inline-block; width:5px; height:5px; border-radius:50%; background:currentColor; vertical-align:middle; } /* 상태 배지 선택자 .status-pill i,.status-dot의 배치 방식·배경·테두리·크기을 지정합니다. */
.status-dot { margin-right:5px; } /* 상태 배지 선택자 .status-dot의 바깥 여백을 지정합니다. */
.status-pill.warning { color:#e3b884; background:#382f25; border-color:#594832; } /* 상태 배지 선택자 .status-pill.warning의 글자·상태 색·배경·테두리을 지정합니다. */
.status-pill.critical { color:#eb9aa6; background:#3a2532; border-color:#603444; } /* 상태 배지 선택자 .status-pill.critical의 글자·상태 색·배경·테두리을 지정합니다. */
.status-pill.bad,.status-pill.stale { color:#b0a1d1; background:#2a2840; border-color:#454060; } /* 상태 배지 선택자 .status-pill.bad,.status-pill.stale의 글자·상태 색·배경·테두리을 지정합니다. */
.status-pill.offline,.status-pill.disabled { color:#8195ae; background:#1d2a3c; border-color:#3b4c61; } /* 상태 배지 선택자 .status-pill.offline,.status-pill.disabled의 글자·상태 색·배경·테두리을 지정합니다. */
.status-dot.normal { color:var(--teal); }.status-dot.critical,.status-dot.bad { color:var(--red); }.status-dot.warning { color:var(--amber); }.status-dot.stale,.status-dot.offline,.status-dot.disabled { color:#798ba5; } /* 상태 배지 선택자 .status-dot.normal의 글자·상태 색을 지정합니다. */
.equipment-visual { position:relative; padding:6px 6px 0; background:radial-gradient(ellipse at 48% 59%,#31527125,transparent 67%); } /* 설비 카드 선택자 .equipment-visual의 배경·안쪽 여백을 지정합니다. */
.source-mini { position:absolute; top:15px; right:17px; color:#647b94; font:11px Arial,sans-serif; letter-spacing:1.4px; } /* 실측·시뮬레이션 구분 선택자 .source-mini의 글자·상태 색·글꼴 크기·굵기을 지정합니다. */
.furnace { display:block; width:100%; height:auto; max-width:600px; margin:auto; } /* 설비 개념 도면 선택자 .furnace의 배치 방식·바깥 여백·크기을 지정합니다. */
.equipment-values { display:grid; grid-template-columns:1fr 1fr; padding:0 17px 16px; gap:7px; } /* 설비 카드 선택자 .equipment-values의 배치 방식·격자 열·안쪽 여백을 지정합니다. */
.equipment-values>div+div { padding-left:15px; border-left:1px solid #29394c; } /* 설비 카드 선택자 .equipment-values>div+div의 테두리을 지정합니다. */
.equipment-values span { display:block; color:#8197af; font-size:11px; } /* 설비 카드 선택자 .equipment-values span의 배치 방식·글자·상태 색·글꼴 크기·굵기을 지정합니다. */
.equipment-values strong { display:block; font-family:Arial,sans-serif; font-size:25px; font-weight:500; margin-top:4px; white-space:nowrap; } /* 설비 카드 선택자 .equipment-values strong의 배치 방식·글꼴 크기·굵기·바깥 여백을 지정합니다. */
.equipment-values small { font-family:var(--font); font-size:11px; color:#8297b0; font-weight:400; margin-left:5px; } /* 설비 카드 선택자 .equipment-values small의 글자·상태 색·글꼴 크기·굵기·바깥 여백을 지정합니다. */
.equipment-bottom { padding:10px 17px; border-top:1px solid #243449; display:flex; justify-content:space-between; align-items:center; color:#8197af; font-size:11px; } /* 설비 카드 선택자 .equipment-bottom의 배치 방식·글자·상태 색·글꼴 크기·굵기·안쪽 여백을 지정합니다. */
.equipment-bottom b { margin:0 5px; color:#415c79; } /* 설비 카드 선택자 .equipment-bottom b의 글자·상태 색·바깥 여백을 지정합니다. */
.equipment-bottom .glyph { width:15px; height:15px; flex-basis:15px; } /* 설비 카드 선택자 .equipment-bottom .glyph의 크기을 지정합니다. */
.pump-rotor { transform-box:fill-box; transform-origin:center; } /* 펌프 운전 애니메이션 선택자 .pump-rotor의 좌표 변환을 지정합니다. */
.spinning { animation:rotate 1.3s linear infinite; } /* 기본 HTML 요소 선택자 .spinning의 동작 효과을 지정합니다. */
.flow-line { stroke-dasharray:4 6; animation:flow 1.5s linear infinite; } /* 흐름 상태 선택자 .flow-line의 동작 효과을 지정합니다. */
@keyframes rotate { to { transform:rotate(360deg); } } /* 운전 상태를 나타내는 회전 또는 흐름 애니메이션의 시간별 변화를 정의합니다. */
@keyframes flow { to { stroke-dashoffset:-40; } } /* 운전 상태를 나타내는 회전 또는 흐름 애니메이션의 시간별 변화를 정의합니다. */
.page-footer { display:flex; justify-content:space-between; gap:20px; padding:25px 0 23px; color:#526b87; font:11px Arial,var(--font); letter-spacing:.8px; } /* 하단 안내 선택자 .page-footer의 배치 방식·글자·상태 색·글꼴 크기·굵기·안쪽 여백을 지정합니다. */
.page-footer b { padding:0 8px; color:#6f899e; } /* 하단 안내 선택자 .page-footer b의 글자·상태 색·안쪽 여백을 지정합니다. */
.notice { border:1px solid #33506b; background:#172b40; color:#a6c1da; border-radius:7px; padding:13px 17px; font-size:14px; margin-bottom:20px; overflow-wrap:anywhere; } /* 작업 결과 안내 선택자 .notice의 글자·상태 색·배경·글꼴 크기·굵기·안쪽 여백을 지정합니다. */
.notice.error { border-color:#793f53; background:#38222e; color:#f1a8b8; } /* 작업 결과 안내 선택자 .notice.error의 글자·상태 색·배경·테두리을 지정합니다. */
.notice.success { border-color:#36655a; background:#17372f; color:#98d3bd; } /* 작업 결과 안내 선택자 .notice.success의 글자·상태 색·배경·테두리을 지정합니다. */
.empty { min-height:130px; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:14px; color:#7f95af; font-size:14px; padding:20px; } /* 빈 데이터 안내 선택자 .empty의 배치 방식·글자·상태 색·글꼴 크기·굵기·안쪽 여백을 지정합니다. */
.empty .glyph { color:#557590; width:27px; height:27px; } /* 빈 데이터 안내 선택자 .empty .glyph의 글자·상태 색·크기을 지정합니다. */
.chart-empty { min-height:190px; } /* 시계열 차트 선택자 .chart-empty의 표시 속성을 지정합니다. */
.muted { color:var(--muted); } /* 보조 텍스트 선택자 .muted의 글자·상태 색을 지정합니다. */
.mono { font-family:ui-monospace,Consolas,var(--font),monospace; font-size:13px; } /* 고정폭 수치 선택자 .mono의 글꼴 크기·굵기을 지정합니다. */
.numeric { font-family:Arial,sans-serif; font-size:17px; font-variant-numeric:tabular-nums; } /* 기본 HTML 요소 선택자 .numeric의 글꼴 크기·굵기을 지정합니다. */
.table-scroll { overflow-x:auto; scrollbar-width:thin; scrollbar-color:#3c5169 #152235; } /* 표 배치 선택자 .table-scroll의 글자·상태 색·크기·넘침 처리을 지정합니다. */
table { border-collapse:collapse; width:100%; text-align:left; white-space:nowrap; } /* 표 배치 선택자 table의 테두리·크기을 지정합니다. */
th { font-size:12px; font-weight:500; color:#7e94af; background:#142237; padding:13px 20px; border-top:1px solid var(--stroke); border-bottom:1px solid var(--stroke); } /* 기본 HTML 요소 선택자 th의 글자·상태 색·배경·글꼴 크기·굵기·안쪽 여백을 지정합니다. */
td { padding:14px 20px; border-bottom:1px solid #203044; color:#b6c7d9; font-size:14px; vertical-align:middle; } /* 기본 HTML 요소 선택자 td의 글자·상태 색·글꼴 크기·굵기·안쪽 여백·테두리을 지정합니다. */
tr:last-child td { border-bottom:0; } /* 기본 HTML 요소 선택자 tr:last-child td의 테두리을 지정합니다. */
tbody tr:hover { background:#162639; } /* 기본 HTML 요소 선택자 tbody tr:hover의 배경을 지정합니다. */
td strong { font-weight:500; color:#c8d6e7; } /* 기본 HTML 요소 선택자 td strong의 글자·상태 색·글꼴 크기·굵기을 지정합니다. */
td small { display:block; margin-top:4px; color:#6885a3; font-size:12px; } /* 기본 HTML 요소 선택자 td small의 배치 방식·글자·상태 색·글꼴 크기·굵기·바깥 여백을 지정합니다. */
.table-caption { padding:12px 20px; color:#6f87a2; font-size:12px; border-top:1px solid var(--stroke); } /* 표 배치 선택자 .table-caption의 글자·상태 색·글꼴 크기·굵기·안쪽 여백·테두리을 지정합니다. */
.wrap-text { white-space:normal; max-width:250px; overflow-wrap:anywhere; } /* 긴 텍스트 줄바꿈 선택자 .wrap-text의 크기·넘침 처리을 지정합니다. */
.sensor-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; margin-bottom:24px; } /* 센서 표시 선택자 .sensor-grid의 배치 방식·격자 열·바깥 여백을 지정합니다. */
.sensor-card { background:#142236; border:1px solid #2b3b51; border-radius:8px; padding:20px 23px; } /* 센서 표시 선택자 .sensor-card의 배경·안쪽 여백·테두리을 지정합니다. */
.sensor-card>span { color:#99adc4; font-size:14px; } /* 센서 표시 선택자 .sensor-card>span의 글자·상태 색·글꼴 크기·굵기을 지정합니다. */
.sensor-card strong { display:block; font:500 35px Arial,sans-serif; margin:15px 0 9px; } /* 센서 표시 선택자 .sensor-card strong의 배치 방식·글꼴 크기·굵기·바깥 여백을 지정합니다. */
.sensor-card small { margin-left:7px; font-size:15px; color:#708da8; } /* 센서 표시 선택자 .sensor-card small의 글자·상태 색·글꼴 크기·굵기·바깥 여백을 지정합니다. */
.sensor-card p { font-size:12px; color:#6fa99a; } /* 센서 표시 선택자 .sensor-card p의 글자·상태 색·글꼴 크기·굵기을 지정합니다. */
.detail-grid { display:grid; grid-template-columns:minmax(0,2fr) minmax(270px,1fr); gap:22px; } /* 기본 HTML 요소 선택자 .detail-grid의 배치 방식·격자 열을 지정합니다. */
.schematic-stage { display:grid; grid-template-columns:minmax(100px,1fr) minmax(240px,3.5fr) minmax(100px,1fr); gap:4px; padding:30px 24px; background:radial-gradient(ellipse,#22405c30,transparent 72%); align-items:center; } /* 태그 표 선택자 .schematic-stage의 배치 방식·격자 열·배경·안쪽 여백을 지정합니다. */
.schematic-labels { display:flex; flex-direction:column; gap:38px; } /* 기본 HTML 요소 선택자 .schematic-labels의 배치 방식을 지정합니다. */
.schematic-labels>div { padding:11px 0; border-bottom:1px solid #3d576f; } /* 기본 HTML 요소 선택자 .schematic-labels>div의 안쪽 여백·테두리을 지정합니다. */
.schematic-labels span { font-size:12px; color:#8babc4; } /* 기본 HTML 요소 선택자 .schematic-labels span의 글자·상태 색·글꼴 크기·굵기을 지정합니다. */
.schematic-labels strong { display:block; margin-top:4px; font:500 20px Arial,sans-serif; } /* 기본 HTML 요소 선택자 .schematic-labels strong의 배치 방식·글꼴 크기·굵기·바깥 여백을 지정합니다. */
.schematic-labels small { font-size:11px; color:#7897ad; } /* 기본 HTML 요소 선택자 .schematic-labels small의 글자·상태 색·글꼴 크기·굵기을 지정합니다. */
.process-metadata { padding:16px 24px; border-top:1px solid #283b51; display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap; font-size:13px; color:#6d8ea9; } /* 기본 HTML 요소 선택자 .process-metadata의 배치 방식·글자·상태 색·글꼴 크기·굵기·안쪽 여백을 지정합니다. */
.process-metadata strong { color:#a7bdd4; margin-left:8px; } /* 기본 HTML 요소 선택자 .process-metadata strong의 글자·상태 색·바깥 여백을 지정합니다. */
.signal-list { padding:0 22px 12px; } /* 기본 HTML 요소 선택자 .signal-list의 안쪽 여백을 지정합니다. */
.signal-list>div { display:flex; align-items:center; justify-content:space-between; gap:15px; padding:13px 0; border-bottom:1px solid #26384b; color:#b8cadc; font-size:14px; } /* 기본 HTML 요소 선택자 .signal-list>div의 배치 방식·글자·상태 색·글꼴 크기·굵기·안쪽 여백을 지정합니다. */
.signal-list>div:last-child { border-bottom:0; } /* 기본 HTML 요소 선택자 .signal-list>div:last-child의 테두리을 지정합니다. */
.signal-list small { color:#64829e; display:block; font-size:11px; margin-top:3px; } /* 기본 HTML 요소 선택자 .signal-list small의 배치 방식·글자·상태 색·글꼴 크기·굵기·바깥 여백을 지정합니다. */
.signal-state { display:flex; align-items:center; gap:7px; color:#6a7e96; font:600 12px Arial,var(--font); } /* 기본 HTML 요소 선택자 .signal-state의 배치 방식·글자·상태 색·글꼴 크기·굵기을 지정합니다. */
.signal-state i { height:7px; width:7px; border-radius:50%; background:currentColor; } /* 기본 HTML 요소 선택자 .signal-state i의 배경·테두리·크기을 지정합니다. */
.signal-state.on { color:#74c7b5; } /* 기본 HTML 요소 선택자 .signal-state.on의 글자·상태 색을 지정합니다. */
.controls-panel { padding:20px 22px; } /* 데이터 패널 선택자 .controls-panel의 안쪽 여백을 지정합니다. */
.form-row { display:flex; gap:17px; flex-wrap:wrap; align-items:flex-start; } /* 편집 양식 선택자 .form-row의 배치 방식을 지정합니다. */
.form-row>label { flex:1; min-width:160px; margin:0; } /* 편집 양식 선택자 .form-row>label의 바깥 여백·크기을 지정합니다. */
.align-end { align-self:flex-end; } /* 기본 HTML 요소 선택자 .align-end의 표시 속성을 지정합니다. */
.tag-checks { display:flex; flex-wrap:wrap; gap:10px 22px; padding-top:20px; margin-top:20px; border-top:1px solid var(--stroke); } /* 태그 표 선택자 .tag-checks의 배치 방식·바깥 여백·테두리을 지정합니다. */
.tag-checks label { margin:0; flex-direction:row; align-items:center; font-size:13px; } /* 태그 표 선택자 .tag-checks label의 글꼴 크기·굵기·바깥 여백을 지정합니다. */
.tag-checks small { color:#6986a4; font-size:11px; } /* 태그 표 선택자 .tag-checks small의 글자·상태 색·글꼴 크기·굵기을 지정합니다. */
.legend-dot { display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:10px; } /* 기본 HTML 요소 선택자 .legend-dot의 배치 방식·바깥 여백·테두리·크기을 지정합니다. */
.segmented { padding:4px; display:flex; gap:4px; border:1px solid var(--stroke); border-radius:7px; background:#0e1b2b; } /* 필터 탭 선택자 .segmented의 배치 방식·배경·안쪽 여백·테두리을 지정합니다. */
.segmented button { background:transparent; border:0; border-radius:5px; color:#7c96b0; padding:8px 15px; font-size:13px; } /* 동작 버튼 선택자 .segmented button의 글자·상태 색·배경·글꼴 크기·굵기·안쪽 여백을 지정합니다. */
.segmented button.selected { background:#283d52; color:#a8e4d5; } /* 동작 버튼 선택자 .segmented button.selected의 글자·상태 색·배경을 지정합니다. */
.modal-backdrop { position:fixed; inset:0; display:grid; place-items:center; background:#040a15c9; backdrop-filter:blur(5px); z-index:100; padding:24px; } /* 확인 대화 상자 선택자 .modal-backdrop의 배치 방식·배경·안쪽 여백을 지정합니다. */
.modal { width:min(520px,100%); background:#162639; border:1px solid #3c526b; border-radius:12px; box-shadow:0 20px 100px #0009; padding:30px; } /* 확인 대화 상자 선택자 .modal의 배경·안쪽 여백·테두리·크기을 지정합니다. */
.modal h2 { font-size:26px; margin-bottom:10px; } /* 확인 대화 상자 선택자 .modal h2의 글꼴 크기·굵기·바깥 여백을 지정합니다. */
.modal p { color:#90a6bd; font-size:14px; margin-bottom:24px; } /* 확인 대화 상자 선택자 .modal p의 글자·상태 색·글꼴 크기·굵기·바깥 여백을 지정합니다. */
.modal-actions { display:flex; justify-content:flex-end; gap:10px; margin-top:22px; } /* 확인 대화 상자 선택자 .modal-actions의 배치 방식·바깥 여백을 지정합니다. */
.rule-layout { display:grid; grid-template-columns:270px minmax(0,1fr); gap:22px; align-items:start; } /* 알람 규칙 양식 선택자 .rule-layout의 배치 방식·격자 열을 지정합니다. */
.rule-navigation .panel-head select { width:100%; max-width:none; } /* 탐색 메뉴 선택자 .rule-navigation .panel-head select의 크기을 지정합니다. */
.rule-tags { max-height:780px; overflow:auto; scrollbar-width:thin; padding:0 10px 10px; } /* 태그 표 선택자 .rule-tags의 안쪽 여백·크기·넘침 처리을 지정합니다. */
.rule-tags button { display:flex; align-items:center; justify-content:space-between; width:100%; border:0; background:transparent; padding:12px; border-radius:5px; color:#9ab3cc; text-align:left; font-size:14px; } /* 동작 버튼 선택자 .rule-tags button의 배치 방식·글자·상태 색·배경·글꼴 크기·굵기을 지정합니다. */
.rule-tags button.active { background:#254148; color:#a3e2d5; } /* 동작 버튼 선택자 .rule-tags button.active의 글자·상태 색·배경을 지정합니다. */
.rule-tags small { display:block; font:11px Arial,sans-serif; color:#6887a1; margin-top:5px; } /* 태그 표 선택자 .rule-tags small의 배치 방식·글자·상태 색·글꼴 크기·굵기·바깥 여백을 지정합니다. */
.rule-count { border:1px solid #3d5265; border-radius:4px; padding:0 6px; font-size:12px; color:#779db6; } /* 알람 규칙 양식 선택자 .rule-count의 글자·상태 색·글꼴 크기·굵기·안쪽 여백·테두리을 지정합니다. */
.form-content { padding:2px 24px 24px; } /* 편집 양식 선택자 .form-content의 안쪽 여백을 지정합니다. */
.form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px; } /* 편집 양식 선택자 .form-grid의 배치 방식·격자 열을 지정합니다. */
.form-grid>label { margin:0; } /* 편집 양식 선택자 .form-grid>label의 바깥 여백을 지정합니다. */
.form-content>p { margin:12px 0 20px; font-size:14px; } /* 편집 양식 선택자 .form-content>p의 글꼴 크기·굵기·바깥 여백을 지정합니다. */
.checkbox-label { flex-direction:row; align-items:center; align-self:center; } /* 기본 HTML 요소 선택자 .checkbox-label의 표시 속성을 지정합니다. */
.rule-explainer { background:#122e38; border-top:1px solid #2f4d5c; padding:21px 24px; display:flex; gap:20px; align-items:center; color:#8bb3bd; } /* 알람 규칙 양식 선택자 .rule-explainer의 배치 방식·글자·상태 색·배경·안쪽 여백을 지정합니다. */
.rule-explainer>span { font:600 15px Arial,sans-serif; letter-spacing:2px; border:1px solid #436874; padding:14px 8px; } /* 알람 규칙 양식 선택자 .rule-explainer>span의 글꼴 크기·굵기·안쪽 여백·테두리을 지정합니다. */
.rule-explainer p { font-size:13px; line-height:2; } /* 알람 규칙 양식 선택자 .rule-explainer p의 글꼴 크기·굵기을 지정합니다. */
.connection-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; } /* PLC 연결 패널 선택자 .connection-grid의 배치 방식·격자 열을 지정합니다. */
.connection-card { margin:0; } /* PLC 연결 패널 선택자 .connection-card의 바깥 여백을 지정합니다. */
.connection-card .form-grid { gap:14px; } /* 편집 양식 선택자 .connection-card .form-grid의 표시 속성을 지정합니다. */
.connection-card input,.connection-card select { font-size:14px; } /* PLC 연결 패널 선택자 .connection-card input,.connection-card select의 글꼴 크기·굵기을 지정합니다. */
.span-two { grid-column:span 2; } /* 기본 HTML 요소 선택자 .span-two의 표시 속성을 지정합니다. */
.connection-stats { display:grid; grid-template-columns:1.3fr 1fr 1fr; padding:16px 20px; border-top:1px solid #2b3e52; gap:10px; } /* PLC 연결 패널 선택자 .connection-stats의 배치 방식·격자 열·안쪽 여백·테두리을 지정합니다. */
.connection-stats>div { font-size:11px; color:#6d8aa5; } /* PLC 연결 패널 선택자 .connection-stats>div의 글자·상태 색·글꼴 크기·굵기을 지정합니다. */
.connection-stats strong { display:block; color:#a5c0d8; font:500 21px Arial,sans-serif; margin-top:6px; } /* PLC 연결 패널 선택자 .connection-stats strong의 배치 방식·글자·상태 색·글꼴 크기·굵기·바깥 여백을 지정합니다. */
.connection-stats small { font-size:11px; } /* PLC 연결 패널 선택자 .connection-stats small의 글꼴 크기·굵기을 지정합니다. */
.connection-error { background:#382837; color:#d6a0b1; padding:12px 20px; font-size:13px; overflow-wrap:anywhere; } /* PLC 연결 패널 선택자 .connection-error의 글자·상태 색·배경·글꼴 크기·굵기·안쪽 여백을 지정합니다. */
.mapping-table { min-width:1000px; } /* 표 배치 선택자 .mapping-table의 크기을 지정합니다. */
.mapping-table input,.mapping-table select { width:100%; min-height:32px; font-size:13px; padding:5px 7px; } /* 표 배치 선택자 .mapping-table input,.mapping-table select의 글꼴 크기·굵기·안쪽 여백·크기을 지정합니다. */
.mapping-table td { padding:10px; } /* 표 배치 선택자 .mapping-table td의 안쪽 여백을 지정합니다. */
.mapping-table th { padding:12px 10px; } /* 표 배치 선택자 .mapping-table th의 안쪽 여백을 지정합니다. */
.mapping-table td:first-child { width:65px; text-align:center; } /* 표 배치 선택자 .mapping-table td:first-child의 크기을 지정합니다. */
.mapping-table input[type=checkbox] { width:15px; min-height:15px; } /* 표 배치 선택자 .mapping-table input[type=checkbox]의 크기을 지정합니다. */
.mapping-table td:nth-child(2) { width:250px; } /* 표 배치 선택자 .mapping-table td:nth-child(2)의 크기을 지정합니다. */
.mapping-table td:nth-child(2) input+input { margin-top:6px; } /* 표 배치 선택자 .mapping-table td:nth-child(2) input+input의 바깥 여백을 지정합니다. */
.mapping-table td:nth-child(3) { width:145px; } /* 표 배치 선택자 .mapping-table td:nth-child(3)의 크기을 지정합니다. */
.mapping-table td:nth-child(4) { width:135px; } /* 표 배치 선택자 .mapping-table td:nth-child(4)의 크기을 지정합니다. */
.mapping-table td:nth-child(5),.mapping-table td:nth-child(6),.mapping-table td:nth-child(7) { width:100px; } /* 표 배치 선택자 .mapping-table td:nth-child(5),.mapping-table td:nth-child(6),.mapping-table td:nth-child(7)의 크기을 지정합니다. */
.export-layout { display:grid; grid-template-columns:minmax(0,1.6fr) minmax(260px,1fr); gap:22px; } /* 기본 HTML 요소 선택자 .export-layout의 배치 방식·격자 열을 지정합니다. */
.export-info { padding:28px; background:linear-gradient(145deg,#17313e,#132237); } /* 기본 HTML 요소 선택자 .export-info의 배경·안쪽 여백을 지정합니다. */
.export-info h2 { margin:15px 0; font-size:26px; } /* 기본 HTML 요소 선택자 .export-info h2의 글꼴 크기·굵기·바깥 여백을 지정합니다. */
.export-info p { color:#7aa6b7; font:14px/2.2 ui-monospace,var(--font),monospace; margin-bottom:22px; } /* 기본 HTML 요소 선택자 .export-info p의 글자·상태 색·글꼴 크기·굵기·바깥 여백을 지정합니다. */
.system-grid { display:grid; grid-template-columns:1fr 1fr; gap:22px; } /* 기본 HTML 요소 선택자 .system-grid의 배치 방식·격자 열을 지정합니다. */
.storage-metrics { display:grid; grid-template-columns:1fr 1fr; gap:15px; margin-bottom:23px; } /* 기본 HTML 요소 선택자 .storage-metrics의 배치 방식·격자 열·바깥 여백을 지정합니다. */
.storage-metrics>div { color:#7598b2; font-size:13px; } /* 기본 HTML 요소 선택자 .storage-metrics>div의 글자·상태 색·글꼴 크기·굵기을 지정합니다. */
.storage-metrics strong { display:block; color:#a5cfdf; font:500 38px Arial,sans-serif; margin-top:12px; } /* 기본 HTML 요소 선택자 .storage-metrics strong의 배치 방식·글자·상태 색·글꼴 크기·굵기·바깥 여백을 지정합니다. */
.storage-metrics small { font-size:14px; color:#789db6; } /* 기본 HTML 요소 선택자 .storage-metrics small의 글자·상태 색·글꼴 크기·굵기을 지정합니다. */
.spaced-top { margin-top:20px; } /* 기본 HTML 요소 선택자 .spaced-top의 바깥 여백을 지정합니다. */
.audit-json { max-width:660px; max-height:240px; overflow:auto; padding:15px; background:#0d1725; white-space:pre-wrap; font-size:12px; } /* 감사 이력 선택자 .audit-json의 배경·글꼴 크기·굵기·안쪽 여백·크기을 지정합니다. */
details summary { cursor:pointer; max-width:650px; text-overflow:ellipsis; overflow:hidden; } /* 기본 HTML 요소 선택자 details summary의 크기·넘침 처리을 지정합니다. */
.login-page { min-height:100vh; display:grid; place-items:center; padding:30px; background:radial-gradient(ellipse at 74% 13%,#204b503b,transparent 50%),radial-gradient(ellipse at 20% 90%,#24496a30,transparent 50%),#0b1421; } /* 로그인 화면 선택자 .login-page의 배치 방식·배경·안쪽 여백을 지정합니다. */
.login-card { width:min(480px,100%); padding:42px; border:1px solid #33495d; border-radius:16px; background:#111e2ee8; box-shadow:0 30px 90px #0005; } /* 로그인 화면 선택자 .login-card의 배경·안쪽 여백·테두리·크기을 지정합니다. */
.login-card .brand { padding:0; margin-bottom:45px; } /* 제품 식별 영역 선택자 .login-card .brand의 안쪽 여백·바깥 여백을 지정합니다. */
.login-card h1 { font-size:45px; letter-spacing:-2px; margin:17px 0; } /* 로그인 화면 선택자 .login-card h1의 글꼴 크기·굵기·바깥 여백을 지정합니다. */
.login-card h1 span { color:var(--teal); } /* 로그인 화면 선택자 .login-card h1 span의 글자·상태 색을 지정합니다. */
.login-card>p { color:#8fa9c1; margin-bottom:28px; font-size:14px; } /* 로그인 화면 선택자 .login-card>p의 글자·상태 색·글꼴 크기·굵기·바깥 여백을 지정합니다. */
.login-card form .button { margin-top:28px; width:100%; justify-content:space-between; padding:13px 18px; } /* 동작 버튼 선택자 .login-card form .button의 안쪽 여백·바깥 여백·크기을 지정합니다. */
.login-card .notice { margin:16px 0 0; } /* 작업 결과 안내 선택자 .login-card .notice의 바깥 여백을 지정합니다. */
.login-help { display:block; color:#687f98; line-height:1.9; margin-top:24px; font-size:12px; } /* 로그인 화면 선택자 .login-help의 배치 방식·글자·상태 색·글꼴 크기·굵기·바깥 여백을 지정합니다. */
.login-card footer { border-top:1px solid #2a3b4f; padding-top:22px; margin-top:28px; font:11px Arial,sans-serif; letter-spacing:1px; color:#647b92; display:flex; justify-content:space-between; gap:10px; } /* 하단 안내 선택자 .login-card footer의 배치 방식·글자·상태 색·글꼴 크기·굵기·바깥 여백을 지정합니다. */
.menu-toggle,.menu-shade { display:none; } /* 기본 HTML 요소 선택자 .menu-toggle,.menu-shade의 배치 방식을 지정합니다. */
#components-reconnect-modal { display:none; position:fixed; inset:0; z-index:150; background:#07101dce; place-items:center; } /* 확인 대화 상자 선택자 #components-reconnect-modal의 배치 방식·배경을 지정합니다. */
#components-reconnect-modal.components-reconnect-show,#components-reconnect-modal.components-reconnect-failed,#components-reconnect-modal.components-reconnect-rejected { display:grid; } /* 확인 대화 상자 선택자 #components-reconnect-modal.components-reconnect-show,#components-reconnect-modal.components-reconnect-failed,#components-reconnect-modal.components-reconnect-rejected의 배치 방식을 지정합니다. */
.reconnect-card { padding:35px; background:#1b3045; border:1px solid #657b95; border-radius:9px; } /* 실시간 연결 복구 안내 선택자 .reconnect-card의 배경·안쪽 여백·테두리을 지정합니다. */
.reconnect-card button { margin-top:20px; border:1px solid #7197a8; background:#1a4b50; color:white; padding:10px 20px; } /* 동작 버튼 선택자 .reconnect-card button의 글자·상태 색·배경·안쪽 여백·바깥 여백을 지정합니다. */
#blazor-error-ui { display:none; position:fixed; bottom:0; left:0; right:0; padding:17px; z-index:200; background:#772d45; color:#ffe7ee; } /* 화면 실행 오류 안내 선택자 #blazor-error-ui의 배치 방식·글자·상태 색·배경·안쪽 여백을 지정합니다. */
#blazor-error-ui a { text-decoration:underline; margin-left:20px; } /* 화면 실행 오류 안내 선택자 #blazor-error-ui a의 바깥 여백을 지정합니다. */
@media(min-width:1700px) { .main { padding:35px 42px 0; } .topbar { padding:0 42px; } .kpi { padding:23px 25px 20px; } .equipment-card-head { padding:21px 21px 0; } .equipment-values { padding:2px 21px 20px; } .equipment-bottom { padding:12px 21px; } .panel-head { padding:23px 25px; } .alarm-feed-item { padding:22px 0; } .kpi>strong { font-size:47px; } } /* 화면 폭 또는 사용자 동작 감소 설정에 맞춰 카드·메뉴·양식 배치를 조정합니다. */
@media(max-width:1390px) { .equipment-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } .main { padding:25px 24px 0; } .topbar { padding:0 24px; } .connection-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .overview-middle { grid-template-columns:minmax(0,1.7fr) minmax(265px,1fr); gap:16px; } .kpi { padding:17px; } .kpi>strong { font-size:39px; } .top-actions { gap:11px; } .section-toolbar p { max-width:450px; } .alarm-feed-item { padding:16px 0; } .schematic-stage { grid-template-columns:90px minmax(180px,1fr) 90px; padding:25px 15px; } .detail-grid { grid-template-columns:minmax(0,1.6fr) minmax(230px,1fr); } } /* 화면 폭 또는 사용자 동작 감소 설정에 맞춰 카드·메뉴·양식 배치를 조정합니다. */
@media(max-width:1150px) { .shell { grid-template-columns:205px minmax(0,1fr); } .sidebar { width:205px; padding:27px 10px 18px; } .nav-link { font-size:13px; padding:12px; gap:10px; } .plant-switch strong { font-size:11px; } .plant-mark { flex:0 0 20px; width:20px; height:20px; } .top-clock { display:none; } .kpi-grid { gap:12px; } .kpi>div:first-child { font-size:12px; } .kpi .glyph { display:none; } .kpi>strong { font-size:35px; } .kpi p { font-size:11px; } .kpi { padding:15px 13px; } .overview-middle { grid-template-columns:minmax(0,1fr); } .alarm-feed { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; } .alarm-feed-item { border:0; } .alarm-feed-item strong { display:block; } .alarm-feed-item strong span { display:block; margin-top:5px; } .equipment-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .section-toolbar { align-items:flex-start; flex-direction:column; } .section-toolbar p { max-width:none; } .detail-grid { grid-template-columns:1fr; } .signal-list { display:grid; grid-template-columns:1fr 1fr; column-gap:30px; } .sensor-card { padding:18px; } .sensor-card strong { font-size:28px; } .rule-layout { grid-template-columns:215px minmax(0,1fr); gap:16px; } .rule-layout .form-grid { gap:15px; } .system-grid { grid-template-columns:1fr; gap:0; } .export-layout { grid-template-columns:1fr; gap:0; } .head-actions .button { font-size:13px; padding:9px 12px; } } /* 화면 폭 또는 사용자 동작 감소 설정에 맞춰 카드·메뉴·양식 배치를 조정합니다. */
@media(max-width:860px) { .shell { display:block; } .sidebar { width:230px; transform:translateX(-100%); transition:transform .2s; } .menu-open .sidebar { transform:translateX(0); } .menu-open .menu-shade { display:block; position:fixed; inset:0; background:#0008; border:0; z-index:40; } .menu-toggle { display:grid; } .topbar { height:64px; } .top-left { gap:12px; } .page-head h1 { font-size:31px; } .main { padding-top:24px; } .breadcrumb { font-size:12px; } .source-badge { font-size:11px; } .page-head { gap:15px; } .sensor-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .connection-grid { gap:17px; } .form-row>label { min-width:175px; } .panel-head { padding:18px 20px; } } /* 화면 폭 또는 사용자 동작 감소 설정에 맞춰 카드·메뉴·양식 배치를 조정합니다. */
@media(max-width:580px) { body { font-size:14px; } .topbar { padding:0 16px; gap:8px; } .top-left { gap:7px; } .breadcrumb { max-width:122px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .breadcrumb span { margin:0 6px; } .top-actions { gap:7px; } .top-actions>.source-badge { display:none; } .language-select { width:85px; font-size:13px; } .avatar { width:27px; height:27px; } .main { padding:22px 16px 0; } .page-head { align-items:flex-start; flex-wrap:wrap; margin-bottom:21px; } h1,.page-head h1 { font-size:30px; } .page-head p { font-size:13px; line-height:1.8; } .eyebrow { font-size:11px; } .page-head .button { min-height:34px; font-size:12px; padding:8px 12px; } .kpi-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-bottom:16px; } .kpi { padding:15px; } .kpi>strong { font-size:37px; margin-top:9px; } .kpi>div:first-child { font-size:12px; } .kpi-track { margin-top:9px; } .kpi strong small { margin-left:6px; font-size:11px; } .overview-middle { gap:16px; margin-bottom:22px; } .alarm-feed { display:block; padding:0 17px 4px; } .alarm-feed-item { border-bottom:1px solid #223246; padding:14px 0; } .alarm-feed-item strong { display:flex; } .alarm-feed-item strong span { display:inline; margin-top:0; } .panel-head { padding:16px 17px; min-height:64px; } .panel-head h2 { font-size:15px; } .panel-head select { max-width:125px; font-size:12px; } .chart-component { padding:0 6px 6px; } .chart-legend { gap:12px; font-size:11px; padding:2px 11px 5px; } .trend-chart { min-height:160px; } .chart-empty { min-height:160px; } .equipment-grid { grid-template-columns:1fr; gap:16px; } .equipment-card-head { padding:20px 21px 0; } .equipment-card h3 { font-size:24px; } .equipment-visual { padding:12px 17px 0; } .equipment-visual .furnace { max-width:380px; } .equipment-values { padding:0 23px 20px; } .equipment-values strong { font-size:31px; } .equipment-values span { font-size:13px; } .equipment-bottom { padding:13px 23px; font-size:12px; } .status-pill { font-size:12px; } .section-toolbar { gap:13px; } .filters { width:100%; } .search-box { flex:1; } .search-box input { width:100%; } .filters select { max-width:120px; } .page-footer { flex-direction:column; gap:9px; font-size:11px; } .sensor-grid { gap:11px; margin-bottom:17px; } .sensor-card { padding:17px; } .sensor-card strong { font-size:31px; margin:12px 0 8px; } .sensor-card>span { font-size:13px; } .schematic-stage { grid-template-columns:1fr 1fr; padding:8px 20px 23px; gap:15px; } .schematic-stage>.furnace { grid-column:span 2; grid-row:1; } .schematic-labels { flex-direction:row; justify-content:space-between; gap:10px; } .schematic-labels>div { flex:1; } .schematic-labels span { font-size:11px; } .schematic-labels strong { font-size:18px; } .signal-list { column-gap:18px; padding:0 18px 10px; } .signal-list>div { font-size:12px; } .process-metadata { padding:13px 18px; gap:12px; font-size:12px; } .form-row { gap:16px; } .form-row>label { flex-basis:100%; } .controls-panel { padding:19px 17px; } .tag-checks { gap:10px 15px; } .tag-checks label { font-size:12px; } .segmented { width:100%; } .segmented button { flex:1; font-size:12px; padding:7px 8px; } .rule-layout { grid-template-columns:1fr; gap:0; } .rule-navigation { margin-bottom:17px; } .rule-tags { display:flex; max-height:none; overflow-x:auto; gap:8px; } .rule-tags button { width:auto; white-space:nowrap; flex:0 0 auto; gap:15px; } .rule-tags small { font-size:11px; } .form-content { padding:2px 18px 20px; } .form-grid { gap:15px; } .form-grid label { font-size:12px; } .form-grid input,.form-grid select { padding:8px 10px; font-size:14px; } .connection-grid { grid-template-columns:1fr; } .head-actions { width:100%; } .head-actions .button { flex:1; } .modal { padding:25px 20px; } .modal h2 { font-size:25px; } .export-info { padding:24px; } .login-page { padding:16px; } .login-card { padding:29px; } .login-card h1 { font-size:38px; } .login-card .brand { margin-bottom:34px; } } /* 화면 폭 또는 사용자 동작 감소 설정에 맞춰 카드·메뉴·양식 배치를 조정합니다. */
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none !important; transition:none !important; scroll-behavior:auto !important; } } /* 화면 폭 또는 사용자 동작 감소 설정에 맞춰 카드·메뉴·양식 배치를 조정합니다. */

.pager { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; } /* 목록 페이지 이동 선택자 .pager의 배치 방식을 지정합니다. */
.pager>div { display:flex; gap:8px; } /* 목록 페이지 이동 선택자 .pager>div의 배치 방식을 지정합니다. */
.compare-toolbar { display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:0 22px 14px; } /* 비교 분석 선택 보조 버튼 줄 .compare-toolbar의 배치 방식·간격을 지정합니다. */
.compare-toolbar .button { padding:7px 14px; font-size:13px; } /* 비교 분석 보조 버튼 .compare-toolbar .button의 글자 크기·안쪽 여백을 지정합니다. */
.compare-bars { display:grid; gap:12px; padding:20px 22px 24px; } /* 평균 비교 막대 묶음 .compare-bars의 배치 방식·간격을 지정합니다. */
.compare-bar { display:grid; grid-template-columns:130px 1fr 110px; align-items:center; gap:14px; } /* 평균 비교 막대 한 줄 .compare-bar의 배치 방식·간격을 지정합니다. */
.compare-bar span { font-size:14px; color:var(--text-soft,#9fb3c8); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } /* 막대 왼쪽 설비 이름 .compare-bar span의 글자·줄임 처리를 지정합니다. */
.compare-bar i { height:12px; border-radius:6px; display:block; min-width:6px; } /* 막대 본체 .compare-bar i의 높이·모서리를 지정합니다. */
.compare-bar b { font-size:14px; text-align:right; font-variant-numeric:tabular-nums; } /* 막대 오른쪽 수치 .compare-bar b의 글자·정렬을 지정합니다. */
tr.baseline-row td { background:#ffffff0d; } /* 기준 설비 줄 tr.baseline-row td의 배경을 밝게 하여 구분합니다. */
@media(max-width:860px) { .compare-bar { grid-template-columns:96px 1fr 84px; gap:10px; } } /* 좁은 화면에서 평균 비교 막대의 열 너비를 줄입니다. */

/* ===== 이상 상태 점멸 표시 (0.5초 간격) ===== */
/* 점멸 주기는 1초이며 앞 0.5초는 강조, 뒤 0.5초는 평상 표시로 돌아가 0.5초 간격으로 깜빡입니다. */
.blink { --alert:var(--red); --alert-soft:#f1849138; animation:fdc-blink-card 1s steps(1,end) infinite; } /* 이상 요소에 0.5초 간격 점멸을 적용합니다. */
.warning.blink,.alert-warning.blink { --alert:var(--amber); --alert-soft:#efb77838; } /* 경고 단계는 주황색으로 점멸합니다. */
.critical.blink,.alert-critical.blink { --alert:var(--red); --alert-soft:#f1849138; } /* 위험 단계는 빨간색으로 점멸합니다. */
.bad.blink,.stale.blink,.alert-bad.blink,.alert-stale.blink { --alert:#b0a1d1; --alert-soft:#b0a1d138; } /* 품질 불량·표본 정체는 보라색으로 점멸합니다. */
.offline.blink { --alert:#8195ae; --alert-soft:#8195ae38; } /* 통신 두절은 회색으로 점멸합니다. */
@keyframes fdc-blink-card { 0%,49.9% { border-color:var(--alert); box-shadow:0 0 0 2px var(--alert-soft),0 0 22px var(--alert-soft); } 50%,100% { box-shadow:none; } } /* 테두리와 외곽 광을 0.5초마다 켜고 끕니다. */
.equipment-card.blink { position:relative; } /* 점멸 카드에 표식을 겹쳐 놓기 위한 기준 위치를 지정합니다. */
.equipment-card.blink::after { content:""; position:absolute; inset:0; border-radius:9px; pointer-events:none; background:var(--alert-soft); animation:fdc-blink-veil 1s steps(1,end) infinite; } /* 카드 전체에 옅은 경고색을 0.5초 간격으로 덧씌웁니다. */
@keyframes fdc-blink-veil { 0%,49.9% { opacity:1; } 50%,100% { opacity:0; } } /* 덧씌운 경고색을 0.5초마다 켜고 끕니다. */
.status-pill.blink { animation:fdc-blink-pill 1s steps(1,end) infinite; } /* 상태 배지는 글자와 배경이 함께 점멸합니다. */
@keyframes fdc-blink-pill { 0%,49.9% { color:#0b1320; background:var(--alert); border-color:var(--alert); } 50%,100% { } } /* 배지의 색을 0.5초마다 반전합니다. */
.sensor-card.blink,.schematic-labels>div.blink,.signal-list>div.blink { animation:fdc-blink-block 1s steps(1,end) infinite; } /* 상세 화면의 이상 부위만 점멸합니다. */
@keyframes fdc-blink-block { 0%,49.9% { border-color:var(--alert); background:var(--alert-soft); box-shadow:0 0 0 2px var(--alert-soft); } 50%,100% { box-shadow:none; } } /* 이상 부위의 테두리와 배경을 0.5초마다 강조합니다. */
.equipment-values>div.blink { border-radius:6px; padding:4px 6px; margin:-4px -6px; animation:fdc-blink-block 1s steps(1,end) infinite; } /* 카드 안의 이상 측정값 칸만 점멸합니다. */
tr.blink { animation:none; } /* 표 줄 자체에는 카드용 점멸을 적용하지 않습니다. */
tr.blink td { animation:fdc-blink-row 1s steps(1,end) infinite; } /* 측정값 표에서 이상 태그 줄만 점멸합니다. */
@keyframes fdc-blink-row { 0%,49.9% { background:var(--alert-soft); } 50%,100% { background:transparent; } } /* 표 줄 배경을 0.5초마다 켜고 끕니다. */
.signal-blink { animation:fdc-blink-lamp 1s steps(1,end) infinite; } /* 개념 도면의 신호등을 0.5초 간격으로 점멸합니다. */
@keyframes fdc-blink-lamp { 0%,49.9% { opacity:1; } 50%,100% { opacity:.15; } } /* 신호등 밝기를 0.5초마다 바꿉니다. */
@media(prefers-reduced-motion:reduce) { .blink,.blink::after,tr.blink td,.signal-blink { animation:none !important; border-color:var(--alert) !important; } .equipment-card.blink::after { opacity:1; } } /* 동작 감소 설정에서는 점멸 대신 경고색을 계속 표시합니다. */
/* ===== 글자 확대에 따른 간격 보정 ===== */
.count-pill { height:24px; min-width:25px; } /* 글자가 커진 개수 표시의 높이를 맞춥니다. */
.status-pill { padding:4px 9px; } /* 상태 배지의 안쪽 여백을 글자 크기에 맞춰 넓힙니다. */
.nav-link { min-height:50px; } /* 메뉴 글자가 커진 만큼 항목 높이를 넓힙니다. */
.search-box input { width:215px; } /* 검색 입력 폭을 글자 크기에 맞춰 넓힙니다. */
.kpi p { height:24px; } /* 지표 설명 줄의 높이를 글자 크기에 맞춰 넓힙니다. */

/* ===== V2.3 현장 가독성 및 알람 카드 강화 ===== */
/* 기본 글자 크기를 확대하여 PC·태블릿에서 장시간 감시할 때 작은 문자가 뭉개지는 문제를 줄입니다. */
html,body { font-size:17px; }
/* 제목과 주요 설명을 한 단계 키워 화면의 정보 계층을 더 명확하게 만듭니다. */
h1 { font-size:38px; }
h2 { font-size:21px; }
h3 { font-size:22px; }
small { font-size:14px; }
.page-head p { font-size:16px; }
.eyebrow { font-size:12px; }
/* 좌측 메뉴와 상단 상태 정보도 실제 운용 거리에서 읽기 쉽도록 확대합니다. */
.nav-link { font-size:16px; min-height:52px; }
.nav-caption { font-size:12px; }
.breadcrumb { font-size:15px; }
.source-badge,.language-select,.top-clock { font-size:14px; }
/* 버튼·입력·필터의 글자를 확대하여 조작 시 오독을 줄입니다. */
.button { font-size:16px; }
.button.small { font-size:14px; }
label { font-size:15px; }
input,select,textarea { font-size:16px; }
/* KPI와 패널의 보조 문구도 기존 11~13px 수준에서 확대합니다. */
.kpi>div:first-child { font-size:15px; }
.kpi p,.panel-head p,.chart-legend,.text-link,.section-toolbar p { font-size:14px; }
.kpi strong small { font-size:14px; }
/* 설비 카드의 ID·상태·측정명·단위·운전 상태를 크게 표시합니다. */
.equipment-id { font-size:13px; }
.status-pill { font-size:13px; font-weight:600; padding:5px 10px; }
.source-mini { font-size:12px; }
.equipment-values span { font-size:14px; }
.equipment-values strong { font-size:30px; font-weight:600; }
.equipment-values small { font-size:13px; }
.equipment-bottom { font-size:14px; }
/* 표는 FDC 운용자가 수치와 기준값을 빠르게 읽을 수 있도록 헤더와 본문을 확대합니다. */
th { font-size:14px; }
td { font-size:16px; }
td small,.mono { font-size:14px; }
.numeric { font-size:19px; }
/* Critical은 카드 전체가 선명한 적색 배경으로 점멸하도록 별도 애니메이션을 적용합니다. */
.equipment-card.critical.blink { --alert:#ff4d5f; --alert-soft:#ff334d66; animation:fdc-critical-card 1s steps(1,end) infinite; }
/* Warning은 위험과 혼동되지 않도록 주황색 카드 전체 점멸로 구분합니다. */
.equipment-card.warning.blink { --alert:#ffad42; --alert-soft:#ffad424d; animation:fdc-warning-card 1s steps(1,end) infinite; }
/* 카드 전체 배경색을 직접 바꾸므로 기존 반투명 오버레이는 제거합니다. */
.equipment-card.critical.blink::after,.equipment-card.warning.blink::after { display:none; }
/* 위험 상태는 0.5초 동안 강한 적색, 다음 0.5초 동안 원래 배경으로 돌아옵니다. */
@keyframes fdc-critical-card {
  0%,49.9% { background:#7a1624; border-color:#ff5b6b; box-shadow:0 0 0 3px #ff4d5f66,0 0 34px #ff334d80; }
  50%,100% { background:var(--panel); border-color:var(--stroke); box-shadow:none; }
}
/* 경고 상태는 동일한 방식으로 주황색을 사용합니다. */
@keyframes fdc-warning-card {
  0%,49.9% { background:#614018; border-color:#ffb451; box-shadow:0 0 0 3px #ffad4255,0 0 30px #ffad4255; }
  50%,100% { background:var(--panel); border-color:var(--stroke); box-shadow:none; }
}
/* 점멸 순간 카드 안의 문자 대비를 높여 붉은 배경에서도 값이 명확하게 보이게 합니다. */
.equipment-card.critical.blink .equipment-id,.equipment-card.critical.blink .equipment-values span,.equipment-card.critical.blink .equipment-values small,.equipment-card.critical.blink .equipment-bottom { color:#ffe7ea; }
.equipment-card.warning.blink .equipment-id,.equipment-card.warning.blink .equipment-values span,.equipment-card.warning.blink .equipment-values small,.equipment-card.warning.blink .equipment-bottom { color:#fff0d7; }
/* 모바일에서도 글자를 다시 지나치게 줄이지 않고 최소 가독성을 유지합니다. */
@media(max-width:580px) {
  body { font-size:16px; }
  .page-head p { font-size:15px; }
  .panel-head h2 { font-size:18px; }
  .equipment-card h3 { font-size:25px; }
  .equipment-values strong { font-size:33px; }
  .equipment-values span { font-size:14px; }
  .equipment-bottom,.status-pill { font-size:13px; }
  .form-grid label { font-size:14px; }
  .form-grid input,.form-grid select { font-size:16px; }
}

/* ===== V2.4 현장 감시 가독성 강화 ===== */
/* 대형 모니터에서 1~2m 거리로 보는 운전 화면을 기준으로 기본 글자를 확대합니다. */
html,body { font-size:18px; }
.nav-link { font-size:17px; font-weight:600; }
.nav-caption,.eyebrow,.source-mini { font-size:13px; }
.breadcrumb,.top-clock,.language-select,.source-badge { font-size:15px; }
.page-head p,.section-toolbar p,.panel-head p { font-size:16px; }
h1 { font-size:40px; }
h2 { font-size:22px; }
h3 { font-size:24px; }
.panel-head h2 { font-size:20px; }
.status-pill { font-size:14px; font-weight:700; }
.equipment-id { font-size:14px; }
.equipment-values span,.sensor-card>span,.schematic-labels span { font-size:15px; }
.equipment-values strong { font-size:32px; }
.sensor-card strong { font-size:34px; }
.schematic-labels strong { font-size:22px; }
.signal-list>div,.process-metadata { font-size:15px; }
th { font-size:15px; }
td { font-size:17px; }
td small,.mono { font-size:15px; }
.numeric { font-size:21px; font-weight:600; }
.button,input,select,textarea { font-size:16px; }

/* 통합 관제의 위험 설비는 카드 전체가 명확한 빨간색으로 점멸합니다. */
.equipment-card.critical.blink { animation:fdc-v24-critical 1s steps(1,end) infinite !important; }
.equipment-card.warning.blink { animation:fdc-v24-warning 1s steps(1,end) infinite !important; }
.equipment-card.critical.blink::after,.equipment-card.warning.blink::after { display:none !important; }
@keyframes fdc-v24-critical {
  0%,49.9% { background:#8b1728; border-color:#ff6372; box-shadow:0 0 0 3px #ff425866,0 0 38px #ff425888; }
  50%,100% { background:var(--panel); border-color:var(--stroke); box-shadow:none; }
}
@keyframes fdc-v24-warning {
  0%,49.9% { background:#674217; border-color:#ffb552; box-shadow:0 0 0 3px #ffad4255,0 0 32px #ffad4266; }
  50%,100% { background:var(--panel); border-color:var(--stroke); box-shadow:none; }
}
/* 상세 설비에서는 기준을 벗어난 센서 카드·계통도 수치·디지털 신호·측정 태그 행만 점멸합니다. */
.sensor-card.alert-critical.blink,.schematic-labels>div.alert-critical.blink,.signal-list>div.alert-critical.blink { --alert:#ff5264; --alert-soft:#ff304d73; }
.sensor-card.alert-warning.blink,.schematic-labels>div.alert-warning.blink,.signal-list>div.alert-warning.blink { --alert:#ffb24c; --alert-soft:#ffad4259; }
@keyframes fdc-blink-block {
  0%,49.9% { border-color:var(--alert); background:var(--alert-soft); box-shadow:0 0 0 3px var(--alert-soft),0 0 24px var(--alert-soft); }
  50%,100% { background:var(--panel); box-shadow:none; }
}
tr.alert-critical.blink td { --alert-soft:#ff304d55; }
tr.alert-warning.blink td { --alert-soft:#ffad4240; }
/* 4K/대형 화면에서도 글자가 지나치게 작아지지 않도록 고정 최소 크기를 유지합니다. */
@media(min-width:1700px) {
  .nav-link { font-size:17px; }
  .equipment-card h3 { font-size:25px; }
  .equipment-bottom { font-size:15px; }
  .sensor-card>span { font-size:16px; }
  .sensor-card strong { font-size:36px; }
  th { font-size:15px; }
  td { font-size:17px; }
}
/* 모바일은 화면 폭을 고려하되 기존보다 작은 11~12px 텍스트가 생기지 않도록 제한합니다. */
@media(max-width:580px) {
  body { font-size:16px; }
  .panel-head h2 { font-size:18px; }
  .equipment-values span,.sensor-card>span,.signal-list>div,.process-metadata { font-size:14px; }
  .equipment-bottom,.status-pill { font-size:13px; }
  th { font-size:13px; }
  td { font-size:15px; }
}
\n\n/* ===== V2.5 알람 판정 가시성 / 현장 가독성 수정 ===== */
/* 상세 센서 카드의 상태 문구는 통신 품질이 아니라 실제 FDC 감시 판정을 표시합니다. */
.sensor-card .sensor-decision { margin-top:10px; font-size:16px; font-weight:700; display:flex; align-items:center; gap:7px; }
.sensor-card .sensor-decision.normal { color:#65d7be; }
.sensor-card .sensor-decision.warning { color:#ffbd63; }
.sensor-card .sensor-decision.critical { color:#ff7583; }
.sensor-card .sensor-decision.bad,.sensor-card .sensor-decision.stale { color:#c5b5e4; }
.sensor-limits { margin-top:9px; padding-top:8px; border-top:1px solid #ffffff12; color:#8fa7bf; font-size:13px; line-height:1.45; font-variant-numeric:tabular-nums; }
/* 상세 센서 이상은 테두리만이 아니라 카드 배경 전체가 확실히 변하도록 합니다. */
.sensor-card.alert-critical.blink { animation:fdc-v25-sensor-critical 1s steps(1,end) infinite !important; }
.sensor-card.alert-warning.blink { animation:fdc-v25-sensor-warning 1s steps(1,end) infinite !important; }
@keyframes fdc-v25-sensor-critical {
  0%,49.9% { background:#86182a; border-color:#ff6574; box-shadow:0 0 0 3px #ff425866,0 0 28px #ff425877; }
  50%,100% { background:#142236; border-color:#2b3b51; box-shadow:none; }
}
@keyframes fdc-v25-sensor-warning {
  0%,49.9% { background:#654116; border-color:#ffb653; box-shadow:0 0 0 3px #ffad4255,0 0 25px #ffad4255; }
  50%,100% { background:#142236; border-color:#2b3b51; box-shadow:none; }
}
/* 1920×1080 운전 화면에서 보조 텍스트까지 한눈에 읽히도록 크기를 명시적으로 올립니다. */
.sidebar .nav-link { font-size:18px; }
.sidebar .nav-caption { font-size:14px; }
.page-head .eyebrow { font-size:14px; }
.page-head h1 { font-size:42px; }
.page-head p { font-size:17px; }
.sensor-card>span { font-size:17px; font-weight:600; }
.sensor-card strong { font-size:38px; }
.sensor-card small { font-size:16px; }
.panel-head h2 { font-size:22px; }
.panel-head p { font-size:15px; }
.schematic-labels span { font-size:15px; }
.schematic-labels strong { font-size:23px; }
.signal-list>div { font-size:16px; }
.process-metadata { font-size:16px; }
.status-pill { font-size:15px; }
th { font-size:16px; }
td { font-size:17px; }
/* 동작 감소 설정에서도 위험 여부는 색으로 계속 확인할 수 있게 합니다. */
@media(prefers-reduced-motion:reduce) {
  .sensor-card.alert-critical.blink { background:#86182a !important; border-color:#ff6574 !important; }
  .sensor-card.alert-warning.blink { background:#654116 !important; border-color:#ffb653 !important; }
}

/* 파일: wwwroot/css/app.css — 확정 알람과 별개로 지연 판정 대기를 표시한다. */
.status-pill.pending, .sensor-decision.pending { color: #f8c568; } /* 대기 문구를 황색으로 표시한다. */
.status-dot.pending { background: #f8c568; } /* 대기 상태 점의 색상이다. */
.equipment-card.pending, .sensor-card.alert-pending { border-color: #b58b42; } /* 확정 이상과 구분되는 테두리이다. */