@charset "utf-8";
/* 현장 모니터링. 멀리서 보는 화면이라 글자는 크고 진하게, 색은 상태 구분에만 쓴다 */

html, body.mon { height:100%; }
body.mon *, body.mon *::before, body.mon *::after { box-sizing:border-box; }
body.mon {
	margin:0;
	overflow:hidden;
	background:#e9edf3;
	color:#141a26;
	font-size:17px;
	line-height:1.35;
}
/* 큰 화면(가로 2200px 넘음)은 1920 배치를 그대로 키운다. --z 는 스크립트가 넣는 배율 */
.mon-app { --z:1; display:flex; flex-direction:column; height:calc(100vh / var(--z)); }

/* ---------- 상단 줄 ---------- */
.mon-top {
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	gap:10px 18px;
	padding:8px 16px;
	background:#1f2735;
	color:#fff;
}
.mon-title { margin:0; color:#fff; font-size:22px; font-weight:800; letter-spacing:-.5px; white-space:nowrap; }
.mon-field { display:flex; align-items:center; gap:8px; }
.mon-field > span { color:#aeb8c9; font-size:15px; font-weight:600; white-space:nowrap; }
.mon-top select.mon-proc {
	height:40px;
	min-width:190px;
	padding:0 10px;
	border:0;
	border-radius:4px;
	background:#fff;
	color:#141a26;
	font-size:19px;
	font-weight:800;
}
.mon-seg { display:inline-flex; border:1px solid #56627a; border-radius:4px; overflow:hidden; }
.mon-seg button {
	height:38px;
	padding:0 14px;
	border:0;
	border-left:1px solid #56627a;
	background:transparent;
	color:#d5dbe6;
	font-size:16px;
	font-weight:700;
	cursor:pointer;
}
.mon-seg button:first-child { border-left:0; }
.mon-seg button.on { background:#fff; color:#141a26; }
.mon-top .mon-spacer { flex:1; }
.mon-clock { display:inline-flex; align-items:center; line-height:1; font-size:26px; font-weight:800; font-variant-numeric:tabular-nums; white-space:nowrap; }
.mon-clock small { margin-right:10px; line-height:1; color:#aeb8c9; font-size:15px; font-weight:600; }
.mon-next { flex:none; min-width:236px; color:#d5dbe6; font-size:15px; font-variant-numeric:tabular-nums; text-align:right; white-space:nowrap; }
.mon-next b { color:#fff; font-size:18px; }
.mon-btn {
	height:38px;
	padding:0 14px;
	border:1px solid #56627a;
	border-radius:4px;
	background:transparent;
	color:#fff;
	font-size:15px;
	font-weight:700;
	cursor:pointer;
	white-space:nowrap;
}
.mon-btn:hover, .mon-seg button:hover { background:#2f3a4d; }
.mon-seg button.on:hover { background:#fff; }
.mon-btn.on { background:#fff; color:#141a26; }

/* ---------- 조건 패널: [조건] 버튼 아래에 뜬다 ---------- */
.mon-cond {
	position:fixed;
	top:64px;
	right:16px;
	z-index:60;
	display:none;
	width:min(640px, calc(100vw / var(--z, 1) - 24px));
	max-height:calc(100vh / var(--z, 1) - 90px);
	overflow:auto;
	border:1px solid #8d98aa;
	border-radius:6px;
	background:#fff;
	box-shadow:0 6px 18px rgba(20,26,38,.16);
	color:#141a26;
	font-size:15px;
}
.mon-cond.open { display:block; }
.mon-cond .cd-sec { padding:14px 18px 6px; border-bottom:1px solid #dde2ea; }
.mon-cond h4 { margin:0 0 8px; color:#141a26; font-size:16px; font-weight:800; }
.mon-cond h4 em { margin-left:6px; color:#5b6576; font-size:13px; font-style:normal; font-weight:600; }
.mon-cond .cd-row { display:grid; grid-template-columns:88px minmax(0, 1fr); align-items:center; gap:10px; min-height:40px; padding:4px 0; }
.mon-cond .cd-lb { margin:0; color:#3b4557; font-size:15px; font-weight:700; }

/* 켜고 끄는 버튼 (체크박스) */
.mon-cond .cd-tg { display:flex; flex-wrap:wrap; gap:6px; }
.mon-cond .cd-tg label { position:relative; margin:0; cursor:pointer; }
.mon-cond .cd-tg input { position:absolute; opacity:0; width:1px; height:1px; }
.mon-cond .cd-tg span { display:inline-flex; align-items:center; height:34px; padding:0 14px; border:1px solid #b9c2d0; border-radius:4px; background:#fff; color:#3b4557; font-weight:700; }
.mon-cond .cd-tg label:hover span { border-color:#46536b; }
.mon-cond .cd-tg input:checked + span { border-color:#1f2735; background:#1f2735; color:#fff; }
.mon-cond .cd-tg input:focus-visible + span { outline:2px solid #2f6feb; outline-offset:2px; }

.mon-cond select, .mon-cond input[type=text], .mon-cond input[type=date] {
	height:36px;
	padding:0 10px;
	border:1px solid #b9c2d0;
	border-radius:4px;
	background:#fff;
	color:#141a26;
	font-size:15px;
}
.mon-cond select:focus, .mon-cond input:focus { border-color:#2f6feb; outline:none; box-shadow:0 0 0 2px rgba(47,111,235,.18); }
.mon-cond #modelgroup { width:200px; }
.mon-cond .cd-q { width:100%; max-width:360px; }
.mon-cond .cd-date { display:flex; flex-wrap:wrap; align-items:center; gap:6px; }
.mon-cond .cd-date em { color:#5b6576; font-style:normal; }
.mon-cond .cd-date .mes-date-wd { margin-left:0; }
.mon-cond .cd-inline { display:flex; align-items:center; gap:8px; }
.mon-cond .cd-inline select { width:96px; }
.mon-cond .cd-inline span { color:#5b6576; font-size:14px; }
.mon-cond .cd-check { display:inline-flex; align-items:center; gap:8px; margin:0; font-weight:700; cursor:pointer; }
.mon-cond .cd-check input { width:18px; height:18px; margin:0; accent-color:#1f2735; }

.mon-cond .cd-foot { display:flex; align-items:center; gap:8px; padding:12px 18px; background:#f5f7fa; }
.mon-cond .cd-foot .hint { flex:1; color:#5b6576; font-size:13px; }
.mon-cond .cd-foot button { height:38px; padding:0 18px; border-radius:4px; font-size:15px; font-weight:700; cursor:pointer; }
.mon-cond .cd-cancel { border:1px solid #b9c2d0; background:#fff; color:#141a26; }
.mon-cond .go { border:0; background:#2f6feb; color:#fff; }
.mon-cond .go:hover { background:#1f5fd6; }
@media (max-width:560px) {
	.mon-cond .cd-row { grid-template-columns:1fr; gap:4px; }
	.mon-cond .cd-foot { flex-wrap:wrap; }
	.mon-cond .cd-foot .hint { flex-basis:100%; }
}

/* ---------- 본문 ---------- */
.mon-body { position:relative; flex:1; min-height:0; }
.mon-view { position:absolute; inset:0; display:none; padding:12px 14px; }
.mon-view.on { display:flex; }
.mon-msg { margin:auto; color:#4a5568; font-size:22px; font-weight:700; }
.mon-msg.err { color:#b3222e; }

/* 판 공통 */
.mon-panel {
	display:flex;
	flex-direction:column;
	min-height:0;
	border:1px solid #b9c2d0;
	background:#fff;
}
.mon-panel > h3 {
	display:flex;
	align-items:baseline;
	gap:10px;
	margin:0;
	padding:8px 12px;
	border-bottom:2px solid #1f2735;
	color:#141a26;
	font-size:19px;
	font-weight:800;
}
.mon-panel > h3 em { color:#4a5568; font-size:15px; font-style:normal; font-weight:600; }
.mon-panel > h3 .cnt { margin-left:auto; font-size:22px; font-variant-numeric:tabular-nums; }
.mon-scroll { flex:1; min-height:0; overflow:hidden; }

/* ---------- 현황판 ---------- */
#view-board { flex-direction:column; gap:12px; }
.mon-kpis { display:grid; grid-template-columns:repeat(5, 1fr); border:1px solid #b9c2d0; background:#fff; }
.mon-kpi { padding:10px 16px 12px; border-left:1px solid #d3d9e3; }
.mon-kpi:first-child { border-left:0; }
.mon-kpi > span { display:block; color:#3b4557; font-size:17px; font-weight:700; }
.mon-kpi > b { display:block; margin-top:2px; font-size:54px; font-weight:800; line-height:1; font-variant-numeric:tabular-nums; }
.mon-kpi > small { display:block; margin-top:4px; color:#5b6576; font-size:14px; }
.mon-kpi.k-ing > b { color:#1f5fd6; }
.mon-kpi.k-ready > b { color:#8a5a00; }
.mon-kpi.k-late { background:#fff; }
.mon-kpi.k-late.has { background:#b3222e; }
.mon-kpi.k-late.has > span, .mon-kpi.k-late.has > b, .mon-kpi.k-late.has > small { color:#fff; }

.mon-grid { flex:1; min-height:0; display:grid; grid-template-columns:minmax(0, 1.15fr) minmax(0, 1fr); grid-template-rows:minmax(0, 1fr) minmax(0, 1fr); gap:12px; }
.mon-grid .p-load { grid-row:1 / span 1; }

/* 공정별 부하표 */
.mon-load { width:100%; border-collapse:collapse; font-size:17px; }
.mon-load th { position:sticky; top:0; padding:6px 8px; border-bottom:1px solid #8d98aa; background:#eef1f6; color:#3b4557; font-size:14px; font-weight:700; text-align:right; white-space:nowrap; }
.mon-load th:first-child, .mon-load td:first-child { text-align:left; }
.mon-load td { padding:5px 8px; border-bottom:1px solid #dde2ea; font-variant-numeric:tabular-nums; text-align:right; white-space:nowrap; }
.mon-load td:first-child { font-weight:800; }
.mon-load tr.pick { cursor:pointer; }
.mon-load tr.pick:hover td { background:#eef3ff; }
.mon-load td.zero { color:#a3abb8; }
.mon-load td.n-ing { color:#1f5fd6; font-weight:800; }
.mon-load td.n-ready { color:#8a5a00; font-weight:800; }
.mon-load td.n-late { color:#b3222e; font-weight:800; }
.mon-load td.bar { width:34%; }
.mon-bar { display:flex; height:16px; background:#eef1f6; box-shadow:inset 0 0 0 1px #c3cad6; }
.mon-bar i { display:block; height:100%; }
.mon-bar i.b-ing { background:#2f6feb; }
.mon-bar i.b-ready { background:#e0a21b; }
.mon-bar i.b-wait { background:#b9c2d0; }
.mon-bar i.b-late { background:#b3222e; }
.mon-legend { display:flex; gap:12px; margin-left:auto; color:#3b4557; font-size:13px; font-weight:600; }
.mon-legend i { display:inline-block; width:12px; height:12px; margin-right:4px; vertical-align:-1px; }

/* 공정 하나를 골랐을 때: 날짜별 계획 부하 */
.mon-days { display:grid; grid-template-columns:repeat(10, 1fr); gap:6px; height:100%; padding:10px 12px 8px; }
.mon-day { display:flex; flex-direction:column; min-width:0; }
.mon-day .col { position:relative; flex:1; display:flex; flex-direction:column; justify-content:flex-end; background:#f3f5f9; }
.mon-day .col i { display:block; background:#7f8ba0; }
.mon-day .col i.late { background:#b3222e; }
.mon-day .n { padding:2px 0; font-size:22px; font-weight:800; text-align:center; font-variant-numeric:tabular-nums; }
.mon-day .d { padding-top:4px; border-top:2px solid #1f2735; color:#3b4557; font-size:14px; font-weight:700; text-align:center; white-space:nowrap; }
.mon-day.today .d { color:#1f5fd6; }
.mon-day.today .col { box-shadow:inset 0 0 0 2px #2f6feb; }
.mon-day .d .sun { color:#c0424a; }
.mon-day .d .sat { color:#2f6feb; }

/* 작업 목록 (작업중, 다음 작업, 지연) */
.mon-list { margin:0; padding:0; list-style:none; }
.mon-item {
	display:grid;
	grid-template-columns:118px minmax(0, 1fr) auto;
	align-items:center;
	gap:2px 12px;
	padding:7px 12px;
	border-bottom:1px solid #dde2ea;
}
.mon-item:nth-child(even) { background:#f5f7fa; }
.mon-item .proc { font-size:17px; font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mon-item .what { min-width:0; }
.mon-item .what b { display:block; overflow:hidden; font-size:18px; font-weight:800; text-overflow:ellipsis; white-space:nowrap; }
.mon-item .what span { display:block; overflow:hidden; color:#3b4557; font-size:15px; text-overflow:ellipsis; white-space:nowrap; }
.mon-item .side { text-align:right; white-space:nowrap; }
.mon-item .side b { display:block; font-size:18px; font-weight:800; font-variant-numeric:tabular-nums; }
.mon-item .side span { display:block; color:#3b4557; font-size:14px; }
.mon-item.is-late .side b { color:#b3222e; }
.mon-item.is-pause .side b { color:#94600a; }
.p-ing .mon-item .proc { color:#1f5fd6; }
.p-ready .mon-item .proc { color:#8a5a00; }
.p-late .mon-item .proc { color:#b3222e; }
.p-late > h3 { border-bottom-color:#b3222e; }
.mon-empty { padding:18px 12px; color:#5b6576; font-size:17px; }

/* ---------- 프로젝트 순환 ---------- */
#view-rotate { gap:12px; }
.mon-projects { width:330px; flex:none; }
.mon-proj {
	display:grid;
	grid-template-columns:minmax(0, 1fr) auto;
	gap:0 8px;
	padding:7px 10px 7px 12px;
	border-bottom:1px solid #dde2ea;
	cursor:pointer;
}
.mon-proj b { overflow:hidden; font-size:17px; font-weight:800; text-overflow:ellipsis; white-space:nowrap; }
.mon-proj span { overflow:hidden; color:#3b4557; font-size:14px; text-overflow:ellipsis; white-space:nowrap; }
.mon-proj .dd { font-size:15px; font-weight:800; text-align:right; font-variant-numeric:tabular-nums; }
.mon-proj .dd.late { color:#b3222e; }
.mon-proj .pct { color:#3b4557; font-size:14px; text-align:right; font-variant-numeric:tabular-nums; }
.mon-proj.cur { background:#1f2735; box-shadow:inset 6px 0 0 #2f6feb; }
.mon-proj.cur b, .mon-proj.cur span, .mon-proj.cur .dd, .mon-proj.cur .pct { color:#fff; }
.mon-proj.cur .dd.late { color:#ff9aa3; }

.mon-detail { flex:1; min-width:0; }
.mon-head {
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	gap:4px 22px;
	padding:10px 14px;
	border-bottom:2px solid #1f2735;
}
.mon-head .no { font-size:30px; font-weight:800; letter-spacing:-.5px; }
.mon-head .nm { min-width:0; font-size:22px; font-weight:700; }
.mon-head .meta { color:#3b4557; font-size:16px; }
.mon-head .meta b { color:#141a26; }
.mon-head .due { margin-left:auto; font-size:24px; font-weight:800; font-variant-numeric:tabular-nums; }
.mon-head .due.late { padding:2px 10px; border-radius:4px; background:#b3222e; color:#fff; }
.mon-sum { display:flex; flex-wrap:wrap; gap:6px 20px; padding:7px 14px; border-bottom:1px solid #c3cad6; background:#f3f5f9; font-size:16px; font-weight:700; }
.mon-sum b { font-size:20px; font-variant-numeric:tabular-nums; }
.mon-sum .s-ing b { color:#1f5fd6; }
.mon-sum .s-ready b { color:#8a5a00; }
.mon-sum .s-late b { color:#b3222e; }
.mon-sum .scope { margin-left:auto; color:#3b4557; font-weight:600; }
.mon-timebar { height:5px; background:#dde2ea; }
.mon-timebar i { display:block; width:0; height:100%; background:#2f6feb; }

.mon-parts { position:relative; }
.mon-part {
	display:grid;
	grid-template-columns:210px minmax(0, 1fr);
	border-bottom:1px solid #c3cad6;
}
.mon-part:nth-child(even) { background:#f5f7fa; }
.mon-part .pinfo { padding:8px 12px; border-right:1px solid #dde2ea; }
.mon-part .pinfo b { display:block; font-size:18px; font-weight:800; overflow-wrap:anywhere; }
.mon-part .pinfo span { display:block; color:#3b4557; font-size:15px; overflow-wrap:anywhere; }
.mon-part.st-ing { background:#e3ecff; box-shadow:inset 7px 0 0 #2f6feb; }
.mon-part.st-ready { background:#fff3d6; box-shadow:inset 7px 0 0 #e0a21b; }
.mon-part.st-late { background:#f7d4d8; box-shadow:inset 7px 0 0 #b3222e; }
.mon-part.off { opacity:.45; }
.mon-part.off .pinfo b::after { content:" (사용안함)"; color:#5b6576; font-size:14px; font-weight:600; }

.mon-flow { display:flex; flex-wrap:wrap; align-content:center; gap:6px; padding:7px 10px; }
.mon-step {
	width:112px;
	padding:4px 4px 3px;
	border:1px solid #9aa4b5;
	border-radius:4px;
	background:#fff;
	line-height:1.2;
	text-align:center;
}
.mon-step b { display:block; overflow:hidden; font-size:15px; font-weight:800; text-overflow:ellipsis; white-space:nowrap; }
.mon-step em { display:block; overflow:hidden; color:#30394b; font-size:13px; font-style:normal; text-overflow:ellipsis; white-space:nowrap; }
.mon-step.done { border-color:#46536b; background:#46536b; color:#fff; }
.mon-step.done em { color:#e3e7ee; }
.mon-step.wait { border-style:dashed; background:rgba(255,255,255,.7); color:#6b7486; }
.mon-step.wait em { color:#6b7486; }
.mon-step.ready { border:2px solid #e0a21b; padding:3px 3px 2px; background:#fff7e3; color:#6b4600; }
.mon-step.ing { border:2px solid #2f6feb; padding:3px 3px 2px; color:#1f5fd6; animation:mon-doing 1.1s ease-in-out infinite; }
.mon-step.pause { border:2px solid #94600a; padding:3px 3px 2px; color:#94600a; }
.mon-step.late:not(.done) { border-color:#b3222e; }
.mon-step.late:not(.done) em { color:#b3222e; font-weight:700; }
@keyframes mon-doing { 0%, 100% { background:#fff; } 50% { background:#dbe6ff; } }
@media (prefers-reduced-motion:reduce) { .mon-step.ing { animation:none; } }

/* 공정을 하나 골랐을 때: 그 공정 칸만 크게, 나머지는 흐리게 */
.mon-parts.focus .mon-step { opacity:.4; }
.mon-parts.focus .mon-step.me { width:150px; opacity:1; box-shadow:0 0 0 3px #1f2735; }
.mon-parts.focus .mon-step.me b { font-size:17px; }
.mon-parts.focus .mon-step.me em { font-size:14px; font-weight:700; }

/* 좁은 화면 (사무실 노트북, 태블릿) */
@media (max-width:1500px) {
	.mon-clock small, .mon-title { display:none; }
}
@media (max-width:1280px) {
	.mon-kpi > b { font-size:40px; }
	.mon-grid { grid-template-columns:minmax(0, 1fr); grid-template-rows:none; overflow:auto; }
	.mon-grid .mon-panel { min-height:320px; }
	.mon-projects { width:250px; }
	.mon-part { grid-template-columns:160px minmax(0, 1fr); }
}
@media (max-width:760px) {
	body.mon { overflow:auto; }
	.mon-app { height:auto; min-height:calc(100vh / var(--z)); }
	.mon-body { min-height:80vh; }
	.mon-kpis { grid-template-columns:repeat(2, 1fr); }
	.mon-kpi { border-top:1px solid #d3d9e3; }
	#view-rotate { flex-direction:column; }
	.mon-projects { width:auto; max-height:200px; }
	.mon-part { grid-template-columns:minmax(0, 1fr); }
	.mon-part .pinfo { border-right:0; }
	.mon-view { position:static; }
}

/* ---------- 테마: 흰 헤더, 로고, 파란 강조 ---------- */
.mon-top { background:#fff; color:var(--m2-ink); border-bottom:1px solid #b9c2d0; }
.mon-logo { font-size:26px; }
.mon-title { padding-left:16px; border-left:2px solid var(--m2-line); color:var(--m2-ink); }
.mon-field > span, .mon-clock small { color:var(--m2-muted); }
.mon-top select.mon-proc { border:2px solid var(--m2-blue); color:var(--m2-ink); }
.mon-seg { border-color:var(--mes-field-line); }
.mon-seg button { border-left-color:var(--mes-field-line); background:#fff; color:var(--m2-text); }
.mon-seg button.on, .mon-seg button.on:hover { background:var(--m2-blue); color:#fff; }
.mon-btn { border-color:var(--mes-field-line); background:#fff; color:var(--m2-text); }
.mon-btn:hover, .mon-seg button:hover { background:var(--m2-lavender); }
.mon-btn.on { background:var(--m2-blue); border-color:var(--m2-blue); color:#fff; }
.mon-clock { color:var(--m2-ink); }
.mon-next { color:var(--m2-muted); }
.mon-next b { color:var(--m2-blue-deep); }
body.mon { background:var(--m2-soft); }
.mon-panel > h3 { border-bottom-color:#d3d9e2; }
.mon-head { border-bottom-color:#d3d9e2; }
.mon-proj.cur { background:var(--m2-blue-deep); box-shadow:inset 6px 0 0 #0f2f73; }
.mon-proj.cur .dd.late { color:#ffd0d4; }
.mon-day .d { border-top-color:#d3d9e2; }
.mon-load th { background:var(--m2-lavender); }
@media (max-width:1500px) { .mon-logo { font-size:22px; } }

/* ---------- 종합 현황 (회의용): 공장 모형 + 차트 ---------- */
#view-exec { flex-direction:column; padding:12px 14px; }
.ex-grid {
	width:100%;
	flex:1;
	min-height:0;
	display:grid;
	grid-template-columns:minmax(0, 1.3fr) minmax(0, 1.3fr) minmax(0, 0.9fr) minmax(0, 0.9fr);
	grid-template-rows:minmax(0, 1fr) minmax(0, 1fr) minmax(0, 0.72fr);
	grid-template-areas:
		"model model status ontime"
		"model model capa   watch"
		"order trend trend  vendor";
	gap:12px;
}
.ex-model { grid-area:model; }
.g-status { grid-area:status; }
.g-ontime { grid-area:ontime; }
.g-capa { grid-area:capa; }
.g-watch { grid-area:watch; }
.g-order { grid-area:order; }
.g-trend { grid-area:trend; }
.g-vendor { grid-area:vendor; }
.ex-grid .mon-panel > h3 { padding:7px 12px; font-size:17px; }
.ex-grid .mon-panel > h3 em { font-size:13px; }
.ex-chart { flex:1; min-height:0; }

.ex-model { display:flex; flex-direction:column; min-height:0; border:1px solid #b9c2d0; background:#fff; }
.ex-model-head { display:flex; flex-wrap:wrap; align-items:center; gap:6px 16px; padding:8px 14px; border-bottom:1px solid var(--m2-line); background:#fff; }
.ex-model-head h2 { display:flex; align-items:center; gap:8px; margin:0; color:var(--m2-ink); font-size:20px; font-weight:800; }
.ex-legend { display:flex; flex-wrap:wrap; align-items:center; gap:4px 12px; color:var(--m2-text); font-size:13px; font-weight:700; }
.ex-legend i { display:inline-block; width:11px; height:11px; margin-right:4px; border-radius:2px; vertical-align:-1px; }
.ex-legend i.run { background:#2f6feb; }
.ex-legend i.ready { background:#e0a21b; }
.ex-legend i.idle { background:#9aa4b5; }
.ex-legend i.late { background:#c0424a; }
.ex-legend em { color:var(--m2-muted); font-style:normal; font-weight:600; }
.ex-kpis { display:flex; margin-left:auto; }
.ex-kpis > div { padding:0 14px; border-left:1px solid var(--m2-line); text-align:right; }
.ex-kpis span { display:block; color:#30394b; font-size:13px; font-weight:700; white-space:nowrap; }
.ex-kpis b { display:block; color:var(--m2-blue-deep); font-size:24px; font-weight:800; line-height:1.1; font-variant-numeric:tabular-nums; }
.ex-model-body { flex:1; min-height:0; padding:4px; }
.ex-model { position:relative; }
.ex-model .ex-legend { position:absolute; left:14px; bottom:10px; padding:6px 10px; border:1px solid var(--m2-line); border-radius:4px; background:rgba(255,255,255,.92); }
.ex-model-body svg { display:block; width:100%; height:100%; }

/* 모형 SVG */
.fm { font-family:"Pretendard", "Malgun Gothic", sans-serif; }
.fm polygon { stroke:#8d98aa; stroke-width:.5; stroke-linejoin:round; }
.fm .fm-slab { fill:#fbfcfd; stroke:#aab3c2; stroke-width:1; }
.fm .fm-zfloor { stroke:#c9d0db; stroke-width:1; }
.fm .fm-grid line { stroke:#dfe4eb; stroke-width:.6; }
.fm .fm-floorlabel { fill:#5b6576; font-size:17px; font-weight:800; }
.fm .fm-route-base { fill:none; stroke:#fff; stroke-width:14; stroke-linejoin:round; opacity:.9; }
.fm .fm-route { fill:none; stroke:#1d3f82; stroke-width:7; stroke-dasharray:16 10; stroke-linejoin:round; opacity:.55; animation:fm-route 2.2s linear infinite; }
.fm .fm-arrow { fill:#1d3f82; stroke:#fff; stroke-width:1.5; }
.fm .fm-step circle { fill:#1d3f82; stroke:#fff; stroke-width:2.5; }
.fm .fm-step text { fill:#fff; font-size:17px; font-weight:800; }
/* 이동 거리는 점선 한 무늬(16+10)의 배수여야 한 바퀴 돌 때 튀지 않는다 */
@keyframes fm-route { from { stroke-dashoffset:0; } to { stroke-dashoffset:-52; } }
.fm .fm-glow { fill:#2f6feb; stroke:none; opacity:.14; animation:fm-glow 1.8s ease-in-out infinite; }
@keyframes fm-glow { 0%, 100% { opacity:.08; } 50% { opacity:.28; } }
.fm .fm-lamp polygon { stroke:rgba(0,0,0,.25); }
.fm .fm-lamp.fm-run { animation:fm-blink 1.1s ease-in-out infinite; }
.fm .fm-lamp.fm-late { animation:fm-blink .7s ease-in-out infinite; }
@keyframes fm-blink { 0%, 100% { opacity:1; } 50% { opacity:.35; } }
@media (prefers-reduced-motion:reduce) { .fm .fm-route, .fm .fm-glow, .fm .fm-lamp { animation:none !important; } }

.fm-plate line { stroke:#46536b; stroke-width:1; }
.fm-plate circle { fill:#46536b; }
.fm-plate rect { fill:#fff; stroke:#9aa4b5; stroke-width:1; filter:drop-shadow(0 1px 1.5px rgba(23,29,43,.18)); }
.fm-plate .n { fill:var(--m2-ink); font-size:16px; font-weight:800; }
.fm-plate .v { fill:var(--m2-text); font-size:15px; font-weight:600; }
.fm-plate .v .ing { fill:var(--m2-ink); font-size:23px; font-weight:800; }
.fm-plate .v .of { fill:var(--m2-muted); }
.fm-plate .s { font-size:14px; font-weight:800; }
.fm-plate .late { fill:#c0424a; }
.fm-plate .rdy { fill:#a36d00; }
.fm-plate.st-run rect { stroke:#2f6feb; stroke-width:2; }
.fm-plate.st-run .v .ing { fill:#2f6feb; }
.fm-plate.st-run line, .fm-plate.st-run circle { stroke:#2f6feb; fill:#2f6feb; }
.fm-plate.st-ready rect { stroke:#e0a21b; stroke-width:1.5; }
.fm-plate.st-idle rect { fill:#f3f5f9; }
.fm-plate.st-idle .n { fill:#5b6576; }
.fm-hit { cursor:pointer; }
.fm-hit:hover rect { stroke:#1d3f82; stroke-width:2.5; }

.fm-zone rect { fill:#fff; stroke:#aab3c2; stroke-width:1; filter:drop-shadow(0 2px 3px rgba(23,29,43,.16)); }
.fm-zone.has-late rect { stroke:#c0424a; stroke-width:2; }
.fm-zone .nb { fill:#1d3f82; stroke:none; filter:none; }
.fm-zone .nbt { fill:#fff; font-size:15px; font-weight:800; }
.fm-zone .n { fill:var(--m2-ink); font-size:20px; font-weight:800; }
.fm-zone .u { fill:#5b6576; font-size:13px; font-weight:600; }
.fm-zone .big { fill:var(--m2-blue-deep); font-size:40px; font-weight:800; }
.fm-zone.done .big { fill:#46536b; }
.fm-zone .l { fill:#5b6576; font-size:13px; font-weight:700; }
.fm-zone.has-late .l { fill:#c0424a; }

.ex-watch { display:grid; grid-template-columns:auto minmax(0, 1fr) auto; align-items:center; gap:10px; padding:6px 12px; border-bottom:1px solid #dde2ea; }
.ex-watch b { font-size:16px; font-weight:800; }
.ex-watch span { overflow:hidden; font-size:15px; font-weight:600; text-overflow:ellipsis; white-space:nowrap; }
.ex-watch small { display:block; color:var(--m2-muted); font-size:13px; font-weight:500; }
.ex-watch strong { font-size:18px; font-weight:800; font-variant-numeric:tabular-nums; }
.ex-watch.late { background:#fbe3e6; }
.ex-watch.late strong { color:var(--mes-danger); }

/* 1500px 이하(노트북): 세로 스크롤, 모형은 한 줄 전체 */
@media (max-width:1500px) {
	#view-exec { overflow:auto; }
	.ex-grid {
		flex:none;
		grid-template-columns:repeat(2, minmax(0, 1fr));
		grid-template-rows:560px repeat(3, 290px);
		grid-template-areas:
			"model model"
			"status ontime"
			"capa watch"
			"order vendor"
			"trend trend";
		grid-auto-rows:290px;
	}
	.ex-kpis { margin-left:0; }
}
@media (max-width:760px) {
	.ex-grid { grid-template-columns:minmax(0, 1fr); grid-template-rows:420px; grid-template-areas:"model" "status" "ontime" "capa" "watch" "order" "trend" "vendor"; }
	.ex-kpis > div { padding:0 8px; }
}
@media (max-width:760px) {
	.mon-view .mon-scroll { overflow:auto; }
	.mon-panel > h3 em, .mon-legend { display:none; }
}

/* 번갈아 단계 표시: 지금 보여주는 쪽만 진하게.
   보기를 바꿀 때 옆 버튼이 움직이지 않게, 안 보일 때도 자리는 차지한다 */
.mon-mix { display:flex; flex:none; align-items:center; justify-content:center; gap:4px; min-width:172px; font-size:15px; font-weight:700; white-space:nowrap; }
.mon-mix[hidden] { display:flex; visibility:hidden; }
/* 좁은 화면은 줄이 넘어가니 안 보일 때 자리도 뺀다 */
@media (max-width:999px) {
	.mon-mix { min-width:0; }
	.mon-mix[hidden] { display:none; }
}
.mon-mix span { padding:5px 8px; border:1px solid transparent; border-radius:4px; color:#5b6576; }
.mon-mix span.on { border-color:#141a26; color:#141a26; font-weight:800; }
.mon-mix i { color:#5b6576; font-style:normal; }

/* 상단 줄 맞춤: 스크립트가 넘치는지 재서 c1 -> c2 -> c3 순서로 줄인다 (1000px 이상에서만 한 줄 고정) */
@media (min-width:1000px) {
	.mon-top { flex-wrap:nowrap; }
}
.mon-top.c1 { gap:8px 8px; padding:8px 12px; }
.mon-top.c1 .mon-field > span { display:none; }
.mon-top.c1 .mon-mix span { padding:5px 6px; }
.mon-top.c1 .mon-seg button, .mon-top.c1 .mon-btn { padding:0 10px; font-size:14px; }
.mon-top.c1 select.mon-proc { min-width:150px; font-size:17px; }
.mon-top.c2 .mon-title, .mon-top.c2 #clock_date { display:none; }
.mon-top.c3 .mon-next { display:none; }
.mon-top > *, .mon-seg button { flex-shrink:0; white-space:nowrap; }
.mon-top .mon-spacer { flex-shrink:1; min-width:0; }
.mon-top.c4 .mon-seg .lb { display:none; }
.mon-top.c4 .mon-seg button { min-width:40px; }

/* 제자리 새로고침으로 바뀐 줄: 잠깐 노란 바탕 */
.mon-item.is-updated, .ex-watch.is-updated { animation:mon-updated 2.4s ease-out; }
@keyframes mon-updated { 0%, 30% { box-shadow:inset 0 0 0 999px rgba(255,214,90,.45); } 100% { box-shadow:inset 0 0 0 999px rgba(255,214,90,0); } }
@media (prefers-reduced-motion:reduce) { .mon-item.is-updated, .ex-watch.is-updated { animation:none; } }

/* 상단 남은 시간, 데이터 기준 시각: 버튼과 같은 높이의 칸.
   보기를 바꿀 때 시계와 버튼이 움직이지 않게 폭을 고정하고 오른쪽으로 붙인다 */
.mon-top .mon-next { display:flex; flex:none; align-items:center; justify-content:flex-end; gap:6px; min-width:236px; text-align:right; }
.mon-next .nx { display:inline-flex; align-items:center; gap:4px; height:38px; padding:0 12px; border:1px solid #d3d9e2; border-radius:4px; background:#f5f7fa; color:#3b4557; font-size:14px; font-weight:600; }
.mon-next .nx b { color:#141a26; font-size:17px; font-weight:800; }
.mon-next .nx.base em { color:#5b6576; font-size:13px; font-style:normal; font-weight:700; }

/* 단계 짚기: 단계 말풍선과 바닥 번호가 부드럽게 커졌다 돌아온다 */
.fm .fm-zone, .fm .fm-step, .fm .fm-hit[data-hot] { transform-box:fill-box; transform-origin:center; transition:transform .45s cubic-bezier(.2, .7, .2, 1); cursor:default; }
.fm .fm-zone.is-hot { transform:scale(1.4); }
/* 공정 말풍선은 설비 쪽(아래 끝)을 붙인 채 위로 커진다 */
.fm .fm-hit[data-hot] { transform-origin:center bottom; }
.fm .fm-hit.is-hot { transform:scale(1.55); }
.fm .fm-hit.is-hot .fm-plate rect { stroke:#1d3f82; stroke-width:2; }
.fm .fm-zone.is-hot rect { stroke:#1d3f82; stroke-width:2; }
.fm .fm-zone.is-hot.has-late rect { stroke:#c0424a; }
.fm .fm-step.is-hot { transform:scale(1.8); }
.fm .fm-step.is-hot circle { fill:#2f6feb; }
@media (prefers-reduced-motion:reduce) { .fm .fm-zone, .fm .fm-step, .fm .fm-hit[data-hot] { transition:none; } }
.fm .fm-hit[data-hot] { cursor:pointer; }
/* 가장자리 말풍선이 커져도 잘리지 않게 */
.ex-model-body svg.fm { overflow:visible; }

/* 조건 패널: 모니터 고정 주소 */
.mon-cond .cd-url { display:flex; gap:6px; }
.mon-cond .cd-url input { flex:1; min-width:0; background:#f5f7fa; font-family:Consolas, "D2Coding", monospace; font-size:14px; }
.mon-cond .cd-url button { height:36px; padding:0 16px; border:1px solid #1f2735; border-radius:4px; background:#1f2735; color:#fff; font-size:15px; font-weight:700; cursor:pointer; }
.mon-cond .cd-url-now { margin:6px 0 10px; color:#141a26; font-size:14px; font-weight:700; }
.mon-cond .cd-ex { width:100%; margin-bottom:10px; border-collapse:collapse; font-size:14px; }
.mon-cond .cd-ex th { padding:5px 8px; border-bottom:1px solid #b9c2d0; background:#f5f7fa; color:#3b4557; font-size:13px; font-weight:700; text-align:left; }
.mon-cond .cd-ex td { padding:6px 8px; border-bottom:1px solid #e3e7ee; color:#141a26; }
.mon-cond .cd-ex code { padding:0; background:none; color:#1d3f82; font-family:Consolas, "D2Coding", monospace; font-size:14px; font-weight:700; white-space:nowrap; }

/* 조건 패널은 목록 화면의 검색 조건과 같은 모양이다 */
.mon-cond .cd-lb { color:#4a5568; font-weight:600; }
.mon-cond select, .mon-cond input[type=text], .mon-cond input[type=date] { border-color:#d3dae5; border-radius:4px; }
.mon-cond select:focus, .mon-cond input:focus { border-color:#2f6feb; box-shadow:0 0 0 3px rgba(47,111,235,.12); }
.mon-cond .cd-tg span { border-color:#d3dae5; color:#3d4759; font-weight:600; }
.mon-cond .cd-tg label:hover span { border-color:#2f6feb; color:#2f6feb; }
.mon-cond .cd-tg input:checked + span { border-color:#2f6feb; background:#2f6feb; color:#fff; }
.mon-cond .cd-check input { accent-color:#2f6feb; }
.mon-cond .cd-foot { border-top:1px solid #dfe3ea; background:#f8f9fb; }
.mon-cond .cd-foot button, .mon-cond .cd-url button { min-width:64px; border-radius:4px; font-weight:600; }
.mon-cond .go { background:#2f6feb; }
.mon-cond .go:hover { background:#2058c7; }
.mon-cond .cd-cancel, .mon-cond .cd-url button { border:1px solid #cfd6e1; background:#fff; color:#3d4759; }
.mon-cond .cd-cancel:hover, .mon-cond .cd-url button:hover { border-color:#2f6feb; color:#2f6feb; }
.mon-cond .cd-foot .hint.is-err { color:#b3222e; font-weight:700; }

/* ---------- 작은 화면 ---------- */
/* 폰으로 열어도 읽히고 눌리게, 페이지가 끝없이 길어지지 않게 한다 */

/* 태블릿 가로(1024 근처): 상단 한 줄이 아슬아슬해 마지막 단계에서 더 줄인다 */
.mon-top.c4 { gap:6px 8px; padding:8px 10px; }
.mon-top.c4 .mon-btn { padding:0 9px; font-size:13.5px; }
.mon-top.c4 select.mon-proc { min-width:120px; font-size:16px; }
.mon-top.c4 .mon-clock { font-size:22px; }

@media (max-width:760px) {
	/* ---------- 상단 줄: 두 줄 안에 담는다 ---------- */
	.mon-top { gap:6px 8px; padding:8px 10px; }
	.mon-logo, .mon-title { display:none; }
	.mon-top .mon-field > span { display:none; }
	.mon-top .mon-spacer { display:none; }
	.mon-top select.mon-proc { flex:1 1 140px; min-width:0; height:44px; font-size:16px; }

	/* 줄 순서를 정한다: 1줄 공정과 시계, 2줄 보기, 3줄 버튼 */
	.mon-top { align-items:stretch; }
	.mon-top .mon-field:first-of-type { order:1; flex:1 1 auto; }
	.mon-clock { order:2; }
	.mon-top .mon-field:has(.mon-seg) { order:3; flex:1 1 100%; }
	.mon-mix { order:4; }
	#btn_pause { order:5; }
	#btn_cond { order:6; }
	.mon-next { order:7; margin-left:auto; }
	#btn_close { order:8; }
	/* 폰에서 전체화면은 쓸 일이 없다 */
	#btn_full { display:none; }
	.mon-seg { display:flex; width:100%; }
	.mon-seg button { flex:1 1 0; min-width:0; height:44px; padding:0 4px; font-size:14px; }
	.mon-seg .lb { display:none; }

	.mon-btn { height:44px; padding:0 12px; font-size:14px; }
	.mon-clock { margin-left:auto; font-size:20px; }
	.mon-clock small { display:none; }
	.mon-next { flex:none; min-width:0; }
	.mon-next .nx { height:34px; padding:0 8px; font-size:13px; }
	.mon-next .nx b { font-size:15px; }

	/* ---------- 목록: 칸 안에서만 굴린다 ---------- */
	.mon-panel .mon-scroll { max-height:58vh; overflow:auto; -webkit-overflow-scrolling:touch; }
	.mon-panel > h3 { position:sticky; top:0; z-index:2; }

	/* ---------- 공정별 부하: 꼭 필요한 칸만 ---------- */
	.mon-load { font-size:15px; }
	.mon-load th { font-size:13px; }
	.mon-load th:nth-child(4), .mon-load td:nth-child(4),
	.mon-load th:nth-child(6), .mon-load td:nth-child(6) { display:none; }
	.mon-load td.bar { width:26%; }
	.mon-load th, .mon-load td { padding:7px 6px; }

	/* 줄을 눌러 고르는 곳은 손가락 크기로 */
	.mon-load tr.pick td { height:44px; }

	/* ---------- 작업 줄: 가로로 세 칸은 폰에 안 들어간다 ---------- */
	.mon-item {
		grid-template-columns:minmax(0, 1fr) auto;
		grid-template-areas:
			"what side"
			"proc side";
		gap:2px 10px;
		padding:9px 12px;
	}
	.mon-item .proc { grid-area:proc; font-size:14.5px; }
	.mon-item .what { grid-area:what; }
	.mon-item .side { grid-area:side; align-self:center; max-width:42vw; white-space:normal; }
	.mon-item .what b { font-size:16px; white-space:normal; }
	.mon-item .what span { font-size:13.5px; }
	.mon-item .side b { font-size:16px; }
	.mon-item .side span { font-size:13px; }
}

/* 아주 좁은 폰(390 이하): 글자만 한 단계 더 줄이고 칸은 그대로 둔다 */
@media (max-width:400px) {
	.mon-seg button { font-size:13px; }
	.mon-btn { padding:0 10px; font-size:13.5px; }
	.mon-clock { font-size:18px; }
	.mon-load { font-size:14.5px; }
}

/* 폰에서 4 MES 현황의 공장 모형: 화면 폭에 맞추면 글자가 안 읽힌다.
   원래 크기로 두고 손가락으로 밀어 보게 한다 */
@media (max-width:760px) {
	.ex-model-body { overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; scroll-behavior:smooth; }
	.ex-model-body svg { width:760px; max-width:none; height:auto; }
	.ex-model { min-height:300px; }
	.ex-model-head { flex-wrap:wrap; gap:4px 10px; }
	.ex-kpis { margin-left:0; }
	/* 범례가 그림 위에 떠 있으면 설비를 가리고 글자도 잘린다. 그림 아래 제 줄로 내린다 */
	.ex-model .ex-legend {
		position:static;
		margin:6px 2px 2px;
		padding:7px 10px;
		border:1px solid var(--m2-line);
		border-radius:4px;
		background:#fff;
		font-size:12.5px;
		line-height:1.5;
	}
	/* 손으로도 밀 수 있다는 것을 적어 둔다 */
	.ex-legend::after {
		content:"짚는 곳으로 따라갑니다. 손으로 밀어 봐도 됩니다";
		flex-basis:100%;
		color:#5b6576; font-size:12.5px; font-weight:600;
	}
}

/* 차트는 zoom 을 몰라 마우스 자리가 배율만큼 밀린다.
   차트 칸만 zoom 을 되돌리고 그만큼 크기를 키운다 */
.mon-app .ex-chart {
	zoom: calc(1 / var(--z, 1));
	height: calc(100% * var(--z, 1));
}