/* 3051S ERS LT 현장 실습 패널 (LT 실습 › ERS LT 화면) · 작업 창 보조 스타일
   패널 틀(제목 · 안내 · 슬라이더 · 읽음 · 주석)은 이전에 쓰던 Trex 좌측 패널 규칙(.trexPVPanel 계열)과 같은 값 */
/* 틀: .ersField는 display:contents — 중앙 FIELD LOOP(.ersVizPanel) · 오른쪽 FIELD CONTROLS(.ersCtrlPanel)가 실습 화면 격자(.ersLayout)의 칸이 된다 */
.ersField{display:contents;color:#dbe8f1}
.ersField .ersRange{width:100%;accent-color:#087fff;margin:4px 0 3px}
.ersField .ersReadBox{border:1px solid #1d4663;border-radius:8px;background:#081827;padding:10px;font-size:10px;line-height:1.8}
.ersField .ersReadBox b{color:#7f97ab}
.ersField .ersNote{padding:2px 2px 0;font-size:9px;color:#7d97ad;line-height:1.6}
.ersField .ersViz{min-width:0;display:flex;flex-direction:column;gap:8px;padding:10px 12px}
/* 그림 두 장(현장 440 · AI 카드/DCS 220)을 같은 배율로 나란히 — 4–20 mA 선이 경계에서 이어진다. 좁은 화면에서는 위아래 */
.ersField .ersScenes{display:flex;align-items:flex-start;width:100%;max-width:1000px;margin:0 auto}
.ersField .ersScene{height:auto;display:block;min-width:0}
.ersField .ersScene.field{flex:440 1 0}
.ersField .ersScene.dcs{flex:220 1 0}
.ersField .ersViz .ersRead{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));column-gap:14px}
.ersField .ersCtrl{min-width:0;padding:10px;display:grid;gap:8px;align-content:start}
.ersField .ersGroup{margin:0;border:1px solid #1d4663;border-radius:8px;padding:6px 8px 8px;display:grid;gap:6px;min-width:0;color:#dbe8f1}
.ersField .ersLevelRow{display:flex;align-items:baseline;justify-content:space-between;gap:6px;font-size:9.5px;color:#9fc6dd;line-height:1.5}
.ersField .ersLevelRow b{color:#eaf8ff;font-size:11px}
.ersField .ersAutoCell{display:flex;align-items:flex-end}
.ersField .ersAutoCell .ersMini{width:100%;height:30px}
.ersField .ersAutoCell .ersMini[hidden]{display:none}
.ersField label.ersInline{display:flex;align-items:center;justify-content:space-between;gap:8px}
.ersField label.ersInline select{width:auto;min-width:110px}
.ersField .ersMore{border:1px solid #1d4663;border-radius:8px;padding:6px 8px}
.ersField .ersMore summary{cursor:pointer;color:#9fc6dd;font-size:10px;font-weight:800}
.ersField .ersMore[open] summary{margin-bottom:6px}
.ersField .ersMore summary small{color:#7f97ab;font-weight:600;margin-left:4px}
.ersField .ersMini{flex:none;border:1px solid #2c668b;border-radius:5px;background:#0d3552;color:#e8f6ff;padding:4px 7px;font-size:9px;cursor:pointer}
.ersField .ersGroup legend{padding:0 4px;color:#9fc6dd;font-size:10px;font-weight:800}
.ersField .ersLoopState{padding:3px 8px;border-radius:5px;border:1px solid #2a5570;color:#dbe8f1}
.ersField .ersLoopState.ok{border-color:#1f8a5b;color:#45e196}
.ersField .ersLoopState.sat{border-color:#b7852a;color:#ffc35a}
.ersField .ersLoopState.alarm{border-color:#c0394a;color:#ff8a96;background:#2a0d12}
.ersField .ersLoopState.fixed{border-color:#6f58c9;color:#c6b8ff}
.ersField .ersTank{fill:#0a1c2c;stroke:#6f8fa6;stroke-width:1.6}
.ersField .ersLiquid{fill:#1b6fb0;opacity:.75}
.ersField .ersSurface{stroke:#6fd0ff;stroke-width:2}
.ersField .ersTap{stroke:#9fb6c7;stroke-width:4}
.ersField .ersMod{fill:#0d2f47;stroke:#35a8ea;stroke-width:1.2}
.ersField .ersCable{fill:none;stroke:#2fe18f;stroke-width:2}
.ersField .ersCable.off{stroke:#ff6b7a;stroke-dasharray:4 3}
.ersField .off .ersMod{stroke:#ff6b7a;stroke-dasharray:3 2}
.ersField .ersBad{font-style:normal;color:#ff8a96;font-weight:700}
.ersField .ersSvgText{fill:#cfe3f0;font:700 8px Inter,Arial,sans-serif}
.ersField .ersSvgText.b{font-size:8.5px;fill:#e8f6ff}
.ersField .ersSvgText.s{font-size:7.5px;fill:#9fc6dd}
.ersField .ersLcd{font:700 11px Consolas,monospace;color:#31cfff;background:#04101b;border:1px solid #1d4663;border-radius:6px;padding:6px 8px;text-align:center;min-height:16px;overflow-wrap:anywhere}
.ersField .ersLcd.alert{color:#ffb342}
.ersField .ersViz .ersLcd::before{content:'PRIMARY LCD  ';color:#5f7a8c;font-size:9px}
.ersField .ersGrid{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.ersField .ersTaps{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.ersField .ersTapBox{border:1px solid #1d4663;border-radius:7px;padding:6px;display:grid;gap:5px;min-width:0}
.ersField .ersTapBox b{font-size:10px;color:#cfe3f0}
.ersField label{display:grid;gap:3px;color:#aebfcd;font-size:9.5px;min-width:0}
.ersField input[type=number],.ersField select{width:100%;min-width:0;height:30px;background:#081624;color:#fff;border:1px solid #21445f;border-radius:6px;padding:0 6px;font:700 12px Consolas,monospace;box-sizing:border-box}
.ersField input:disabled{opacity:.45}
.ersField label.ersCheck{display:flex;align-items:center;gap:6px;font-size:10px}
.ersField .ersRead{margin-top:0}
.ersField .ersRead div{display:flex;gap:6px;min-width:0}
.ersField .ersRead b{flex:none;width:72px}
.ersField .ersRead span{min-width:0;overflow-wrap:anywhere}
.ersField .ersRead small{color:#7f97ab}
/* 작업 창 */
.ersCheck{display:flex;align-items:center;gap:6px;margin:4px 0}
.ersPair{display:grid;grid-template-columns:18px 1fr 1fr;gap:6px;align-items:center;margin:4px 0}
.ersPair .trexActionField{margin:0}
.ersTrend{width:100%;height:70px;background:#f3f7fa;border:1px solid #c9d6df;border-radius:4px;margin:6px 0}
@media(pointer:coarse){.ersField input[type=number],.ersField select{height:40px}}
/* LT 실습 › ERS LT FREE PRACTICE (practice/ers-practice.js) — PT 실습 틀(.ptPracticePage · .ptpTop · .ptpLayout · .ptpPanel) 위에 3열 폭만 따로 정한다 */
#ersPracticePage .ersLayout{grid-template-columns:220px minmax(0,1fr) 340px;align-items:start}
.ersItems{padding:7px;display:grid;gap:4px}
.ersItem{width:100%;text-align:left;border:1px solid transparent;border-radius:7px;background:#091a28;color:#9eb2c0;padding:9px 8px;font-size:10px;cursor:pointer}
.ersItem:hover{border-color:#2c668b;color:#e2f3ff}
.ersItem.active{border-color:#1987d6;background:#0b3150;color:#fff}
.ersGuide{margin:0 7px 8px;border:1px solid #315a73;border-radius:7px;background:#081a28;padding:9px;color:#9ab1c1;font-size:9.5px;line-height:1.55}
.ersGuide>b{display:block;color:#31cfff;font-size:11px;margin-bottom:4px}
.ersGuide dl{margin:0}
.ersGuide dt{color:#7fb3d1;font-weight:800;margin-top:6px}
.ersGuide dd{margin:1px 0 0}
.ersInject{margin:0 7px 8px;border:1px solid #6b4f1f;border-radius:7px;background:#1a1408;padding:8px;color:#d9c7a4;font-size:9.5px}
.ersInject b{color:#ffc35a;font-size:10px}
.ersInject .ptpAction{margin-top:5px;border-color:#9a6a12;background:#3a2a0a;color:#ffe2a8;font-weight:800}
.ersInjectState{margin-top:5px;line-height:1.5;color:#b9a47e}
.ersGuideFoot{margin-top:8px;border-top:1px solid #1f4057;padding-top:6px;color:#718ea2;font-size:9px}
/* 중앙 그림 요소 */
.ersField .ersVizPanel .ersSvgText{font-size:10px}
.ersField .ersVizPanel .ersSvgText.b{font-size:11px}
.ersField .ersVizPanel .ersSvgText.s{font-size:9px}
.ersField .ersTag{font:700 10px Consolas,monospace;fill:#cfe3f0}
.ersField .ersTag tspan+tspan{font-size:9px;fill:#8fb0c6}
.ersField .ersTag.bad tspan{fill:#ff8a96}
.ersField .ersLinkText{font:700 7.5px Inter,Arial,sans-serif;fill:#2fe18f;letter-spacing:.5px}
.ersField .ersBreak path{stroke:#ff4d5e;stroke-width:3;stroke-linecap:round}
.ersField .ersLoop{stroke:#31cfff;stroke-width:3;stroke-dasharray:9 6;animation:ersFlow 1.1s linear infinite}
.ersField .ersLoop.sat{stroke:#ffb342}
.ersField .ersLoop.alarm{stroke:#ff4d5e;animation-duration:.5s}
.ersField .ersLoop.idle{stroke:#5f7a8c;animation:none}
@keyframes ersFlow{to{stroke-dashoffset:-15}}
@media(prefers-reduced-motion:reduce){.ersField .ersLoop{animation:none}}
.ersField .ersLoopText{font:700 9px Inter,Arial,sans-serif;fill:#31cfff}
.ersField .ersDpBox rect{fill:#0c2132;stroke:#345c76}
.ersField .ersBig{font:800 17px Consolas,monospace;fill:#eaf8ff}
.ersField .ersBig.bad{fill:#ff8a96}
/* DCS 판넬 아래 한 줄: 수신 mA · % · 품질 (판넬 자체는 PT 실습과 같은 SVG 속성) */
.ersField .ersDcsSub{font:700 9px Arial,sans-serif;fill:#9fb5c4}
.ersField .ersDcsQText{font:800 10px Arial,sans-serif;fill:#45e196}
.ersField .ersDcsQText.sat{fill:#ffc35a}
.ersField .ersDcsQText.alarm{fill:#ff8a96}
/* 1199px 이하: 실습 항목을 위 한 줄(가로 버튼)로, 그 아래 FIELD LOOP · FIELD CONTROLS 2열 */
@media(max-width:1199px){
 #ersPracticePage .ersLayout{grid-template-columns:minmax(0,1fr) 320px}
 #ersPracticePage .ersItemsPanel{grid-column:1/-1}
 .ersItems{grid-template-columns:repeat(4,minmax(0,1fr))}
}
/* 899px 이하 (태블릿 세로 · 모바일): 1열 — 실습 항목 → FIELD LOOP → FIELD CONTROLS */
@media(max-width:899px){
 #ersPracticePage .ersLayout{grid-template-columns:minmax(0,1fr)}
 .ersItems{grid-template-columns:repeat(2,minmax(0,1fr))}
 #ersPracticePage .ersCtrl{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
 #ersPracticePage .ersTop{flex-wrap:wrap}
}
@media(max-width:700px){#ersPracticePage .ptpTop{flex-wrap:wrap}}
@media(max-width:640px){
 .ersField .ersScenes{flex-wrap:wrap;justify-content:center}
 .ersField .ersScene.field{flex:1 1 100%}
 .ersField .ersScene.dcs{flex:0 1 100%;max-width:240px}
 .ersField .ersVizPanel .ersSvgText{font-size:13px}
 .ersField .ersVizPanel .ersSvgText.b{font-size:13px}
 .ersField .ersVizPanel .ersSvgText.s{font-size:11px}
 .ersField .ersTag{font-size:12px}
 .ersField .ersTag tspan+tspan{font-size:11px}
 .ersField .ersLinkText,.ersField .ersLoopText{font-size:10px}
 .ersField .ersScene.dcs .ersLoop{display:none}
}
.ersTrexState{font-size:11px;color:#8fb0c6}
.ersNotice{margin:0 0 9px;padding:8px 10px;border:1px solid #c36a55;border-radius:7px;background:#2a0d12;color:#ffb3a6;font-size:12px}
/* LT 준비 중 페이지의 ERS LT 실습 카드: LT 실습에서만 표시 (.prc-card의 display가 hidden 속성을 덮지 않게) */
#practiceComingPage [data-sh-practice-ers][hidden]{display:none}