/* Practice PDT (PDT Commissioning Practice · 5-Way Manifold) — 화면 · 내부 구조(단면) 팝업
   Reference 대응: Reference WORK/common/common.css 의 PDT 실습 규칙
     89–92(밸브 그리드 · 압력원 · 압력 흐름 · 차압 방향 · Line-up 확인창) 676–700(중앙 도면 확대)
     703–880(글자 크기 덮어쓰기) 1021–1095(중앙 경고 · Line-up 표시) 1100–1311(TX 클릭 · 단면 팝업)
   Reference 규칙에서 PDT 선택자만 원래 순서 · 미디어 조건 · !important 그대로 옮겼다.
   PT와 함께 쓰던 규칙(#ptPracticePage …, #pdtPracticePage …)은 PT 쪽이 이미 practice/pt-practice.css에 있으므로 PDT 선택자만 남겼다.
   공통 구조(.ptpLayout · .ptpPanel · .ptpStep · .ptpValve · .valveHandle 등)는 practice/pt-practice.css를 그대로 쓴다. */

.pdtValveGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}
.pdtValveGrid .ptpSwitch{padding:6px 4px;font-size:8px}
.pdtSources{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.pdtSources .sourceBox{border:1px solid #234a65;border-radius:6px;padding:6px}
/* Reference 89행 .pdtSources label{margin:0 0 4px}는 뒤쪽 .ptpControl label(margin-bottom:5px)에 덮여 적용되지 않으므로 옮기지 않았다 (파일 순서가 바뀌어 적용되는 것을 막음) */
.pdtPressureFlow{fill:none;stroke:#526b7a;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;transition:stroke .25s,opacity .25s}
.pdtPressureFlow.venting{stroke:#ff9d42;stroke-width:3;stroke-dasharray:7 5}
.pdtPressureFlow.ventForward{animation:pdtVentForward .85s linear infinite}
.pdtPressureFlow.ventReverse{animation:pdtVentReverse .85s linear infinite}
.pdtPressureFlow.hpPressure{stroke:#ffd43b}
.pdtPressureFlow.lpPressure{stroke:#238cff}
.pdtDirectionFlow{display:none;fill:none;stroke:#ff3b3b;stroke-width:1.9;stroke-linecap:round;stroke-dasharray:3 8;pointer-events:none;filter:drop-shadow(0 0 2px #8e0000)}
.pdtDirectionFlow.toLp{display:block;animation:pdtFlowToLp .7s linear infinite}
.pdtDirectionFlow.toHp{display:block;animation:pdtFlowToHp .7s linear infinite}
@keyframes pdtFlowToLp{to{stroke-dashoffset:-22}}
@keyframes pdtFlowToHp{to{stroke-dashoffset:22}}
@keyframes pdtVentForward{to{stroke-dashoffset:-24}}
@keyframes pdtVentReverse{to{stroke-dashoffset:24}}
.pdtLineupCheck{cursor:pointer;outline:none}
.pdtLineupCheck line{stroke:#4e91b6;stroke-width:1.2;stroke-dasharray:3 2;pointer-events:none}
.pdtLineupCheck circle{fill:#31cfff;stroke:#082233;stroke-width:1;pointer-events:none}
.pdtLineupCheck rect{fill:#0b2639;stroke:#2d789f;stroke-width:1.5;transition:.18s}
.pdtLineupCheck text{fill:#b9d4e4;font:700 7px Arial,sans-serif;pointer-events:none}
.pdtLineupCheck:hover rect,
.pdtLineupCheck:focus rect{stroke:#31cfff;filter:drop-shadow(0 0 4px #31cfff88)}
.pdtLineupCheck.confirmed rect{fill:#0d6545;stroke:#3be39a}
.pdtLineupCheck.confirmed line{stroke:#3be39a}
.pdtLineupCheck.confirmed circle{fill:#3be39a}
.pdtLineupCheck.confirmed text{fill:#fff}
.pdtLineupCheck.wrong rect{fill:#671f29;stroke:#ff6673}
.pdtLineupCheck.locked{opacity:.42;cursor:default}
#pdtPracticePage .ptpScene{height:455px; padding:6px;}
#pdtPracticePage #pdtDiagram{width:100%; height:100%; display:block; transform:translateY(82px) scale(1.18); transform-origin:50% 50%;}
@media(max-width:1120px){  /* Reference 689 */
 #pdtPracticePage .ptpScene{height:420px}
 #pdtPracticePage #pdtDiagram{transform:translateY(58px) scale(1.13);transform-origin:50% 50%}
}
@media(max-width:700px){  /* Reference 693 */
 #pdtPracticePage .ptpScene{height:345px}
 #pdtPracticePage #pdtDiagram{transform:translateY(34px) scale(1.07);transform-origin:50% 50%}
}
#pdtPracticePage #pdtDiagram .pdt-ai-card{transform-box:fill-box;transform-origin:center;}
.pdtValveGrid .ptpSwitch{font-size:10px;}
#pdtPracticePage .ptpLayout > .ptpPanel:first-child,
#pdtPracticePage .ptpLayout > .ptpPanel:last-child{font-size:12px;}
#pdtPracticePage .ptpLayout > .ptpPanel:last-child .ptpAction{font-size:12px;}
#pdtPracticePage .ptpLayout > .ptpPanel:last-child .ptpMessage{font-size:11px; line-height:1.55;}
#pdtPracticePage .ptpLayout > .ptpPanel:last-child .ptpTrexOnly,
#pdtPracticePage .ptpLayout > .ptpPanel:last-child .ptpTrexTitle{font-size:11px;}
#pdtPracticePage .ptpLayout > .ptpPanel:last-child .ptpMiniTrex{font-size:11px;}
#pdtPracticePage .ptpLayout > .ptpPanel:first-child .ptpSteps button{font-size:11px;}
#pdtPracticePage .ptpLayout > .ptpPanel:first-child .ptpStep{font-size:12.5px; line-height:1.35;}
#pdtPracticePage .ptpLayout > .ptpPanel:first-child .ptpStep b{font-size:inherit;}
#pdtPracticePage .ptpLayout > .ptpPanel:first-child,
#pdtPracticePage .ptpLayout > .ptpPanel:last-child{font-size:12.5px;}
#pdtPracticePage .ptpLayout > .ptpPanel:first-child .ptpStep,
#pdtPracticePage .ptpLayout > .ptpPanel:last-child .ptpSwitch{font-size:12.5px; line-height:1.35;}
#pdtPracticePage .ptpLayout > .ptpPanel:last-child .ptpMessage b{font-size:12.5px; line-height:1.35;}
#pdtPracticePage .ptpLayout > .ptpPanel:last-child .ptpMessage{font-size:11.5px; line-height:1.5;}
#pdtPracticePage .ptpLayout > .ptpPanel:last-child .ptpAction{font-size:12.5px;}
#pdtPracticePage .ptpLayout > .ptpPanel:first-child .ptpStep > span{font-size:12.5px !important; line-height:1.35 !important; font-weight:500;}
#pdtPracticePage .ptpLayout > .ptpPanel:first-child .ptpStep > b{font-size:12px !important;}
#pdtPracticePage #pdtSequenceTitle{font-size:12.5px !important; line-height:1.35 !important; font-weight:800 !important;}
#pdtPracticePage #pdtSequenceGuide{font-size:11.5px !important; line-height:1.5 !important;}
#pdtPracticePage .ptpTrexOnly > b{font-size:12.5px !important;}
#pdtPracticePage .ptpTrexOnly{font-size:11.5px !important; line-height:1.5 !important;}
#pdtPracticePage .ptpLayout > .ptpPanel:last-child .ptpMessage{font-size:12.5px !important; line-height:1.5 !important;}
#pdtPracticePage .ptpLayout > .ptpPanel:last-child .ptpMessage b,
#pdtPracticePage #pdtSequenceTitle{font-size:12.5px !important; line-height:1.4 !important; font-weight:800 !important;}
#pdtPracticePage #pdtSequenceGuide{font-size:12.5px !important; line-height:1.5 !important;}
#pdtPracticePage .ptpLayout > .ptpPanel:last-child .ptpMessage.bad,
#pdtPracticePage .ptpLayout > .ptpPanel:last-child .ptpMessage.err{font-size:12.5px !important; line-height:1.5 !important;}
#pdtPracticePage .pdtCenterError{position:absolute; left:16%; right:7%; top:-38px; height:38px; padding:0; border:0; border-radius:0; background:transparent; color:#ff6673; font-size:15px; line-height:38px; font-weight:600; box-shadow:none; display:none; overflow:hidden; white-space:nowrap; z-index:30; pointer-events:none;}
#pdtPracticePage .pdtCenterError.show{display:flex; align-items:center; justify-content:center;}
#pdtPracticePage .pdtCenterError .ptpErrorTrack{display:inline-block; width:max-content; max-width:96%; padding:0; white-space:nowrap; height:38px; line-height:38px; text-align:center; transform:none; animation:ptpErrorBlink2 1.25s ease-in-out 1;}
@media(max-width:1120px){  /* Reference 1060 */
 #pdtPracticePage .pdtCenterError{left:18%; right:7%; top:-38px; font-size:14px;}
}
@media(max-width:700px){  /* Reference 1068 */
 #pdtPracticePage .pdtCenterError{left:10%; right:7%; top:-38px; font-size:12px; height:38px; line-height:38px;}
}
#pdtPracticePage .pdtCenterError .ptpErrorTrack{overflow:hidden; text-overflow:ellipsis;}
#pdtPracticePage .pdtCenterError.show .ptpErrorTrack{opacity:1;}
#pdtPracticePage [data-pdt-lineup]{display:none;}
#pdtPracticePage .pdtTxBody{cursor:pointer;outline:none}
#pdtPracticePage .pdtTxBody:hover rect:first-child,
#pdtPracticePage .pdtTxBody:focus rect:first-child{stroke:#31cfff; filter:drop-shadow(0 0 6px #31cfff88);}
.pdtCutawayOverlay{position:fixed; inset:0; z-index:12000; display:none; align-items:center; justify-content:center; background:#02070dbb; backdrop-filter:blur(3px);}
.pdtCutawayOverlay.show{display:flex}
.pdtCutawayCard{width:min(980px,94vw); max-height:92vh; overflow:auto; border:1px solid #2d5d7d; border-radius:14px; background:linear-gradient(180deg,#0b2031,#07131e); color:#d9edf8; box-shadow:0 22px 70px #000c;}
.pdtCutawayHead{height:52px; padding:0 16px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid #22465f; background:#0d2a40;}
.pdtCutawayHead b{font-size:16px;letter-spacing:.02em}
.pdtCutawayHead span{color:#83a7bb;font-size:12px}
.pdtCutawayClose{width:34px;height:34px;border:1px solid #376784;border-radius:7px; background:#0a1b28;color:#dcecf5;font-size:20px;cursor:pointer}
.pdtCutawayBody{padding:16px}
.pdtCutawayInfo{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:12px}
.pdtCutawayMetric{border:1px solid #244b64;border-radius:8px;background:#081a28; padding:9px 10px;text-align:center}
.pdtCutawayMetric small{display:block;color:#7898aa;font-size:10px;margin-bottom:3px}
.pdtCutawayMetric b{font:800 18px ui-monospace,monospace}
.pdtCutawayMetric.hp b{color:#ff8a8a}
.pdtCutawayMetric.lp b{color:#77c5ff}
.pdtCutawayMetric.dp b{color:#58e5a1}
.pdtCutawayMetric.ma b{color:#ffd27a}
.pdtCutawaySvgWrap{border:1px solid #244b64;border-radius:10px;background:#06131d;padding:10px}
#pdtCutawaySvg{width:100%;height:auto;display:block}
.pdtCutawayNote{margin-top:10px;border-left:3px solid #2e8fc8;background:#0a1b29; padding:9px 11px;color:#91acbc;font-size:11px;line-height:1.55}
.pdtCutawayLegend{display:flex;gap:16px;flex-wrap:wrap;margin-top:10px;color:#91acbc;font-size:11px}
.pdtCutawayLegend i{display:inline-block;width:16px;height:3px;vertical-align:middle;margin-right:5px}
@media(max-width:760px){  /* Reference 1161 */
 .pdtCutawayInfo{grid-template-columns:1fr 1fr}
 .pdtCutawayHead span{display:none}
}
#pdtPracticePage #pdtTxBody,
#pdtPracticePage #pdtTxBody *{pointer-events:all;}
.pdtCutawaySliderBox{margin:0 0 12px; padding:10px 12px; border:1px solid #244b64; border-radius:9px; background:#081a28;}
.pdtCutawaySliderHead{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:8px;}
.pdtCutawaySliderHead b{font-size:12px;color:#dcecf5}
.pdtCutawaySliderHead span{font-size:10px;color:#7f9bad}
.pdtCutawaySliderRow{display:grid; grid-template-columns:54px 1fr 72px; align-items:center; gap:8px;}
#pdtCutDpSlider{width:100%}
.pdtCutawaySliderMin,
.pdtCutawaySliderMax{color:#89a4b5; font-size:10px; font-family:ui-monospace,monospace;}
.pdtCutawaySliderMax{text-align:right}
.pdtCutawaySliderRead{display:flex; align-items:center; justify-content:flex-end; gap:8px; margin-top:7px; color:#8fa9b9; font-size:10px;}
#pdtCutDpSliderRead{color:#58e5a1; font:800 12px ui-monospace,monospace;}
#pdtCutDpReset{border:1px solid #315b73; border-radius:6px; background:#0b2638; color:#c9dce7; padding:5px 8px; font-size:10px; cursor:pointer;}
#pdtCutDpReset:hover{border-color:#31cfff}
.pdtCutawayImageStage{position:relative; width:52%; max-width:470px; margin:0 auto; border:1px solid #244b64; border-radius:10px; background:#07131d; overflow:hidden;}
#pdtCutawayImage{display:block; width:100%; height:auto; user-select:none; pointer-events:none;}
.pdtImgBadge{position:absolute; padding:6px 9px; border-radius:7px; font:800 12px ui-monospace,monospace; backdrop-filter:blur(3px); box-shadow:0 2px 10px #0008; white-space:nowrap;}
.pdtImgBadgeHp{left:4.5%; bottom:13%; color:#ffd9dc; background:#4a1018d9; border:1px solid #ff5664;}
.pdtImgBadgeLp{right:4.5%; bottom:13%; color:#d8efff; background:#0d2d46d9; border:1px solid #43aef1;}
.pdtImgBadgeDp{left:6%; top:45%; transform:none; color:#6ff1ad; background:#071923e8; border:1px solid #2d9f73;}
.pdtImgBadgeMa{right:3%; top:3%; color:#ffd47e; background:#20190bd9; border:1px solid #9d7c2c;}
.pdtImgSensorOverlay{position:absolute; left:0; top:0; width:100%; height:100%; pointer-events:none; overflow:visible;}
#pdtImgSensorPath{fill:#59f0a2cc; stroke:#b8ffd9; stroke-width:2; filter:drop-shadow(0 0 4px #59f0a299); transition:fill .16s ease, stroke .16s ease, filter .16s ease;}
@media(max-width:760px){  /* Reference 1302 */
 .pdtImgBadge{font-size:10px;padding:4px 6px}
}
@media(max-width:900px){  /* Reference 1307 */
 .pdtCutawayImageStage{width:66%;max-width:520px}
}
@media(max-width:680px){  /* Reference 1310 */
 .pdtCutawayImageStage{width:82%}
}