*{box-sizing:border-box}
:root{--bg:#07111f;--panel:#0d1b2a;--panel2:#11243a;--line:#20364f;--text:#eef6ff;--muted:#8fa3b8;--cyan:#21d4fd;--green:#27d17f;--yellow:#ffc857;--orange:#ff9f43;--red:#ff5263;--purple:#a875ff;--gray:#607286}
html,body{margin:0;min-height:100%;background:radial-gradient(circle at 85% 0,#11365b 0,transparent 28%),linear-gradient(135deg,#06101d,#091827 60%,#07111f);color:var(--text);font-family:"Malgun Gothic","Segoe UI",sans-serif}
body{padding:14px}.app-shell{max-width:1920px;margin:auto}
.topbar{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;background:rgba(13,27,42,.94);border:1px solid var(--line);border-radius:14px;box-shadow:0 14px 35px rgba(0,0,0,.28);backdrop-filter:blur(12px)}
.brand{display:flex;align-items:center;gap:13px}.brand-mark{width:48px;height:48px;border-radius:13px;display:grid;place-items:center;font-weight:900;font-size:18px;color:#04111e;background:linear-gradient(135deg,var(--cyan),#6effd0);box-shadow:0 0 24px rgba(33,212,253,.25)}
.brand h1{margin:0;font-size:25px;letter-spacing:.4px}.brand p{margin:3px 0 0;color:var(--muted);font-size:10px;letter-spacing:2px}
.topbar-right{display:flex;align-items:center;gap:18px}.live-badge{padding:7px 11px;border-radius:20px;background:rgba(39,209,127,.12);color:#68f1ad;font-size:12px;font-weight:800;border:1px solid rgba(39,209,127,.25)}
.live-badge span{display:inline-block;width:8px;height:8px;margin-right:6px;border-radius:50%;background:var(--green);box-shadow:0 0 10px var(--green);animation:pulse 1.5s infinite}
@keyframes pulse{50%{opacity:.35}}.clock-area{text-align:right}.clock-area strong{display:block;font-size:17px}.clock-area small{color:var(--muted);font-size:10px}
.kpi-grid{display:grid;grid-template-columns:repeat(10,1fr);gap:10px;margin:12px 0}
.kpi-card{position:relative;overflow:hidden;min-height:88px;padding:12px 14px;background:linear-gradient(145deg,rgba(18,38,61,.97),rgba(11,25,40,.97));border:1px solid var(--line);border-radius:12px}
.kpi-card:before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--gray)}
.kpi-card span{display:block;color:var(--muted);font-size:11px}.kpi-card strong{display:block;margin-top:5px;font-size:28px;line-height:1}.kpi-card strong em{font-size:12px;font-style:normal;color:var(--muted)}.kpi-card small{display:block;margin-top:7px;color:#6f8297;font-size:9px}
.kpi-card.wide{grid-column:span 2}.accent-run:before{background:var(--green)}.accent-idle:before{background:var(--cyan)}.accent-setup:before{background:var(--purple)}.accent-alarm:before{background:var(--red)}.accent-offline:before{background:var(--gray)}.accent-production:before{background:var(--yellow)}.accent-rate:before{background:#39e6d7}
.mini-progress{height:5px;margin-top:10px;border-radius:10px;background:#203347;overflow:hidden}.mini-progress i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--cyan),var(--green));transition:width .6s ease}
.toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 12px;margin-bottom:12px;background:rgba(13,27,42,.9);border:1px solid var(--line);border-radius:12px}
.status-filters{display:flex;gap:6px;flex-wrap:wrap}.status-filters button,.outline-btn{border:1px solid #29425d;background:#102238;color:#9db0c3;border-radius:9px;padding:8px 12px;font-weight:700;font-size:11px;cursor:pointer}
.status-filters button.active{color:#06111d;background:linear-gradient(135deg,var(--cyan),#6effd0);border-color:transparent}
.toolbar-right{display:flex;gap:7px}#searchInput{width:240px;border:1px solid #29425d;background:#091827;color:#fff;border-radius:9px;padding:8px 12px;outline:none}#searchInput:focus{border-color:var(--cyan)}
.line-section{margin-bottom:14px;background:rgba(10,24,39,.78);border:1px solid var(--line);border-radius:15px;overflow:hidden}
.line-header{display:grid;grid-template-columns:190px 1fr 130px;align-items:center;gap:14px;padding:13px 16px;background:linear-gradient(90deg,#102b46,#0c1e31)}
.line-title strong{font-size:20px}.line-title span{display:block;margin-top:2px;color:var(--muted);font-size:10px}
.line-work{display:flex;align-items:center;gap:18px;min-width:0}.line-work div{min-width:0}.line-work label{display:block;color:var(--muted);font-size:9px}.line-work b{display:block;margin-top:2px;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.line-progress{text-align:right}.line-progress strong{font-size:20px}.line-progress small{display:block;color:var(--muted);font-size:9px}
.line-progress-track{height:7px;margin-top:6px;background:#203347;border-radius:8px;overflow:hidden}.line-progress-track i{display:block;height:100%;background:linear-gradient(90deg,var(--cyan),var(--green))}
.machine-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:10px;padding:11px}
.machine-card{position:relative;min-height:255px;padding:12px;border:1px solid #223b55;border-radius:12px;background:linear-gradient(155deg,#11273d,#0a1827);cursor:pointer;transition:.2s ease;overflow:hidden}
.machine-card:hover{transform:translateY(-2px);border-color:#3d668e;box-shadow:0 12px 25px rgba(0,0,0,.28)}
.machine-card:before{content:"";position:absolute;left:0;top:0;width:5px;height:100%;background:var(--gray)}
.machine-card.run:before{background:var(--green)}.machine-card.idle:before{background:var(--cyan)}.machine-card.setup:before{background:var(--purple)}.machine-card.hold:before{background:var(--orange)}.machine-card.alarm:before,.machine-card.emergency:before{background:var(--red)}.machine-card.offline:before{background:var(--gray)}
.card-head{display:flex;justify-content:space-between;gap:8px}.machine-code{font-size:17px;font-weight:900}.machine-name{margin-top:3px;color:var(--muted);font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.status-pill{height:25px;padding:5px 9px;border-radius:15px;background:#24384c;color:#aebdca;font-size:10px;font-weight:900}
.status-pill.run{background:rgba(39,209,127,.16);color:#62eea7}.status-pill.idle{background:rgba(33,212,253,.14);color:#65e6ff}.status-pill.setup{background:rgba(168,117,255,.16);color:#c5a6ff}.status-pill.alarm,.status-pill.emergency{background:rgba(255,82,99,.16);color:#ff7d8a;animation:alarmBlink 1.2s infinite}.status-pill.hold{background:rgba(255,159,67,.16);color:#ffba78}.status-pill.offline{background:#273747;color:#91a0ad}
@keyframes alarmBlink{50%{opacity:.45}}.program-item{display:flex;justify-content:space-between;align-items:end;padding:11px 0 8px;border-bottom:1px solid #1c354e}
.program-item label,.item-code label{color:var(--muted);font-size:9px}.program-item strong{font-size:22px}.item-code{padding:9px 0}.item-code strong{display:block;margin-top:2px;font-size:15px;color:#f8d77a}
.qty-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:7px 0}.qty-box{padding:8px 5px;text-align:center;border-radius:8px;background:#0a1929;border:1px solid #1d3650}.qty-box label{display:block;color:var(--muted);font-size:8px}.qty-box strong{display:block;margin-top:3px;font-size:17px}.qty-box.today strong{color:#68f1ad}
.progress-row{display:flex;justify-content:space-between;align-items:center;margin-top:9px}.progress-row span{color:var(--muted);font-size:9px}.progress-row strong{font-size:13px}
.progress-track{height:8px;margin-top:5px;background:#203347;border-radius:9px;overflow:hidden}.progress-track i{display:block;height:100%;background:linear-gradient(90deg,var(--cyan),var(--green));transition:width .6s}
.card-foot{display:flex;justify-content:space-between;margin-top:10px;color:#71869b;font-size:9px}
.loading-panel,.empty-panel{padding:60px;text-align:center;color:var(--muted);background:#0c1b2b;border:1px solid var(--line);border-radius:14px}
footer{display:flex;justify-content:space-between;padding:7px 3px;color:#63788d;font-size:9px}
.modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;padding:20px;background:rgba(0,0,0,.7);z-index:100}.modal.open{display:flex}
.modal-panel{position:relative;width:min(650px,96vw);padding:22px;border:1px solid #31516f;border-radius:16px;background:#0c1e31;box-shadow:0 30px 80px rgba(0,0,0,.6)}
.modal-close{position:absolute;right:12px;top:8px;border:0;background:none;color:#fff;font-size:28px;cursor:pointer}.modal-title{font-size:25px;margin:0}.modal-status{display:inline-block;margin:7px 0 15px;padding:5px 10px;border-radius:15px;background:#19314a;font-size:11px}
.detail-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.detail-item{padding:10px;border-radius:9px;background:#0a1929}.detail-item label{display:block;color:var(--muted);font-size:9px}.detail-item strong{display:block;margin-top:4px}
@media(max-width:1350px){.kpi-grid{grid-template-columns:repeat(5,1fr)}.kpi-card.wide{grid-column:span 2}}
@media(max-width:850px){body{padding:8px}.topbar,.toolbar{align-items:flex-start}.topbar,.toolbar{flex-direction:column}.kpi-grid{grid-template-columns:repeat(2,1fr)}.kpi-card.wide{grid-column:span 2}.line-header{grid-template-columns:1fr}.line-progress{text-align:left}.toolbar-right,#searchInput{width:100%}.machine-grid{grid-template-columns:1fr}}

/* =============================================================
   DST SmartMES readability refresh v0.7 (2026-09-18)
   UI only: original HTML, JS, Flask API and data logic unchanged.
   Append-only overrides allow easy rollback.
   ============================================================= */
:root {
  --bg:#081421; --panel:#102235; --panel2:#173049;
  --line:#304961; --text:#f4f8ff; --muted:#acc0d2;
}
body { padding:16px; line-height:1.45; }
.app-shell { max-width:1920px; }
.topbar { padding:15px 19px; border-radius:12px; }
.brand h1 { font-size:24px; }
.brand p { font-size:11px; letter-spacing:1.2px; }
.clock-area strong { font-size:16px; }
.clock-area small { font-size:11px; }
.kpi-grid { gap:9px; margin:12px 0; }
.kpi-card { min-height:94px; padding:13px 14px; border-radius:10px; }
.kpi-card span { font-size:12px; }
.kpi-card strong { font-size:29px; margin-top:6px; }
.kpi-card small { font-size:11px; margin-top:8px; color:var(--muted); }
.toolbar { padding:10px 12px; }
.status-filters button,.outline-btn { font-size:12px; padding:9px 13px; }
#searchInput { font-size:12px; min-height:35px; }
.line-section { margin-bottom:14px; border-radius:12px; }
.line-header { grid-template-columns:145px minmax(0,1fr) 125px; padding:12px 15px; gap:15px; }
.line-title strong { font-size:20px; }
.line-title span { font-size:11px; }
.line-work { gap:22px; flex-wrap:wrap; row-gap:6px; }
.line-work label { font-size:11px; }
.line-work b { font-size:13px; margin-top:3px; }
.line-progress strong { font-size:21px; }
.line-progress small { font-size:10px; }
.machine-grid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; padding:10px; }
.machine-card { min-height:265px; padding:13px 14px; border-radius:10px; background:linear-gradient(155deg,#142b40,#0c1d2e); }
.machine-code { font-size:18px; }
.machine-name { font-size:11px; max-width:100%; }
.status-pill { font-size:11px; min-height:26px; height:auto; flex-shrink:0; padding:5px 10px; }
.program-item { padding:13px 0 9px; }
.program-item label,.item-code label { font-size:11px; }
.program-item strong { font-size:21px; }
.item-code { min-height:49px; padding:8px 0; }
.item-code strong { font-size:14px; }
.qty-grid { margin:7px 0; gap:6px; }
.qty-box { padding:8px 3px; }
.qty-box label { font-size:10px; }
.qty-box strong { font-size:18px; }
.progress-row span { font-size:11px; }
.progress-row strong { font-size:14px; }
.card-foot { font-size:10px; margin-top:9px; color:#9fb4c8; }
footer { font-size:11px; }
.modal-panel { max-height:min(90vh,900px); overflow-y:auto; }
.detail-item label { font-size:11px; }
.detail-item strong { font-size:13px; overflow-wrap:anywhere; }
/* Keep four columns on standard desktop; scale down for smaller monitors. */
@media(max-width:1100px) and (min-width:851px) {
  .machine-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .line-header { grid-template-columns:120px minmax(0,1fr) 115px; }
  .line-work { gap:12px; }
}
@media(max-width:850px) {
  .machine-grid { grid-template-columns:1fr; }
  .line-header { grid-template-columns:1fr; }
  .line-work { gap:12px; }
  .toolbar-right,#searchInput { width:100%; }
  .kpi-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .kpi-card.wide { grid-column:span 2; }
}
@media(min-width:1600px) {
  .machine-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .machine-card { min-height:275px; }
}
@media(prefers-reduced-motion:reduce) {
  .machine-card,.progress-track i,.mini-progress i { transition:none; }
  .live-badge span,.status-pill.alarm,.status-pill.emergency { animation:none; }
}

/* =============================================================
   DST SmartMES v0.8 — 현장 가독성 / 가변 카드 레이아웃
   2026-09-18 | CSS only; Flask API / dashboard.js unchanged
   ============================================================= */
/* auto-fit collapses unused columns: A1 4 cards, B1 2 cards at half width. */
.machine-grid {
  grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr));
  gap:12px;
  padding:12px;
}
.machine-card {
  min-width:0;
  min-height:286px;
  padding:15px 17px;
  display:flex;
  flex-direction:column;
}
.card-head { align-items:flex-start; }
.machine-code { font-size:21px; line-height:1.2; letter-spacing:.15px; }
.machine-name { font-size:12px; line-height:1.5; color:#b7cadb; }
.status-pill { font-size:12px; padding:6px 11px; }
.program-item { padding:14px 0 10px; }
.program-item label,.item-code label { font-size:12px; letter-spacing:.25px; }
.program-item strong { font-size:24px; line-height:1.1; }
.item-code { min-height:55px; padding:10px 0; }
.item-code strong { font-size:17px; }
.qty-grid { gap:8px; margin:9px 0; }
.qty-box { padding:9px 5px; }
.qty-box label { font-size:11px; }
.qty-box strong { font-size:22px; line-height:1.3; font-variant-numeric:tabular-nums; }
.progress-row { margin-top:auto; padding-top:9px; }
.progress-row span { font-size:12px; }
.progress-row strong { font-size:17px; font-variant-numeric:tabular-nums; }
.progress-track { height:10px; margin-top:6px; }
.card-foot { font-size:11px; margin-top:10px; }
.line-header { grid-template-columns:140px minmax(0,1fr) 130px; min-height:65px; padding:12px 16px; }
.line-title strong { font-size:21px; }
.line-work { gap:23px; }
.line-work label { font-size:12px; }
.line-work b { font-size:15px; font-variant-numeric:tabular-nums; }
.line-progress strong { font-size:24px; }
.kpi-card span { font-size:12px; }
.kpi-card strong { font-size:31px; }
.kpi-card small { font-size:11px; }
/* Make long IDs and names wrap safely without stretching a card. */
.machine-code,.program-item strong,.item-code strong { overflow-wrap:anywhere; }
/* Retain a single column for phones and two for medium screens. */
@media (max-width:1100px) and (min-width:851px) {
  .machine-grid { grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr)); }
  .line-header { grid-template-columns:120px minmax(0,1fr) 120px; }
  .line-work { gap:14px; }
}
@media (max-width:850px) {
  .machine-grid { grid-template-columns:1fr; }
  .line-header { grid-template-columns:1fr; }
  .line-work { gap:12px; }
  .machine-card { min-height:275px; }
}
/* Override v0.7's fixed four-column TV rule: keep auto-fit behavior. */
@media (min-width:1600px) {
  .machine-grid { grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr)); }
  .machine-card { min-height:300px; }
}


/* ==========================================================
   DST SmartMES v0.9 | 전체 글꼴 확대 + 상세 팝업 개선
   v0.8 기반 CSS 전용 패치. API / JS / HTML 수정 없음.
   ========================================================== */
html,body { font-size:15px; }
body { padding:12px; }
.topbar { padding:14px 18px; }
.brand h1 { font-size:27px; }
.brand p { font-size:12px; letter-spacing:1.2px; }
.brand-mark { font-size:19px; }
.live-badge { font-size:14px; padding:8px 12px; }
.clock-area strong { font-size:18px; }
.clock-area small { font-size:12px; }
.kpi-grid { gap:9px; }
.kpi-card { min-height:94px; padding:13px 14px; min-width:0; }
.kpi-card span { font-size:14px; }
.kpi-card strong { font-size:34px; }
.kpi-card strong em { font-size:15px; }
.kpi-card small { font-size:12px; }
.toolbar { padding:10px 12px; }
.status-filters button,.outline-btn { font-size:13px; padding:9px 12px; }
#searchInput { font-size:14px; width:245px; padding:10px 12px; }
.line-header { grid-template-columns:140px minmax(0,1fr) 140px; gap:15px; min-height:78px; }
.line-title strong { font-size:23px; }
.line-title span { font-size:12px; }
.line-work { gap:19px; flex-wrap:wrap; }
.line-work label { font-size:13px; }
.line-work b { font-size:16px; }
.line-progress strong { font-size:26px; }
.line-progress small { font-size:12px; }
.machine-grid { gap:12px; padding:12px; }
.machine-card { min-height:320px; padding:17px; }
.machine-code { font-size:23px; }
.machine-name { font-size:14px; line-height:1.4; white-space:normal; }
.status-pill { font-size:14px; padding:7px 12px; }
.program-item label,.item-code label { font-size:13px; }
.program-item strong { font-size:26px; }
.item-code { min-height:62px; }
.item-code strong { font-size:19px; }
.qty-box { padding:10px 4px; min-width:0; }
.qty-box label { font-size:12px; }
.qty-box strong { font-size:24px; overflow-wrap:anywhere; }
.progress-row span { font-size:13px; }
.progress-row strong { font-size:19px; }
.card-foot { font-size:12px; color:#b4c5d5; gap:6px; }
footer { font-size:12px; gap:10px; }
.loading-panel,.empty-panel { font-size:17px; }
/* 팝업: 더 넓은 4열 그리드로 화면 높이 사용량 절감 */
.modal { padding:16px; }
.modal-panel {
  width:min(980px,calc(100vw - 32px));
  max-height:calc(100dvh - 32px);
  overflow-y:auto;
  padding:24px;
  scrollbar-width:thin;
  scrollbar-color:#456884 #0c1e31;
}
.modal-panel::-webkit-scrollbar { width:9px; }
.modal-panel::-webkit-scrollbar-track { background:#0c1e31; }
.modal-panel::-webkit-scrollbar-thumb { background:#456884; border-radius:9px; }
.modal-title { font-size:28px; padding-right:32px; }
.modal-status { font-size:14px; padding:6px 12px; }
.modal-close { font-size:32px; right:15px; top:10px; }
.detail-grid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
.detail-item { min-width:0; padding:13px 12px; }
.detail-item label { font-size:13px; line-height:1.4; }
.detail-item strong { font-size:16px; line-height:1.45; overflow-wrap:anywhere; }
@media (max-width:1350px) {
  .kpi-card { padding:12px; }
  .line-header { grid-template-columns:125px minmax(0,1fr) 125px; }
  .line-work { gap:12px; }
}
@media (max-width:1100px) {
  .detail-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width:850px) {
  .machine-grid { grid-template-columns:1fr; }
  .line-header { grid-template-columns:1fr; }
  .line-work { gap:12px 18px; }
  .line-progress { text-align:left; }
  .detail-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .modal-panel { padding:18px; }
  .toolbar-right,#searchInput { width:100%; }
}
@media (max-width:420px) {
  .detail-grid { grid-template-columns:1fr; }
  .topbar-right { flex-wrap:wrap; }
  .machine-card { padding:13px; }
}


/* ==========================================================
   DST SmartMES v1.0 | 관리자 바로가기 버튼
   2026-10-16
   ========================================================== */
.admin-link{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:36px;
    padding:8px 14px;
    border:1px solid #35597a;
    border-radius:9px;
    background:#102238;
    color:#d9e8f6;
    font-size:13px;
    font-weight:800;
    text-decoration:none;
    white-space:nowrap;
    transition:.18s ease;
}
.admin-link:hover{
    border-color:var(--cyan);
    color:#fff;
    background:#173450;
    box-shadow:0 0 16px rgba(33,212,253,.16);
}
.admin-link:focus-visible{
    outline:2px solid var(--cyan);
    outline-offset:2px;
}
@media(max-width:850px){
    .topbar-right{
        width:100%;
        gap:10px;
        flex-wrap:wrap;
    }
    .admin-link{
        min-height:40px;
        padding:9px 14px;
    }
}