/* Practice PT (PT Commissioning Practice) — 화면 · 내장 TREX compact 표시
   Reference 대응: Reference WORK/common/common.css 의 PT 실습 규칙 (84–104행 기본 · 615행 · 659–1100행 글자 크기·중앙 경고 덮어쓰기)
   Reference 규칙을 원래 순서 · 미디어 조건 · !important 그대로 옮겼다 (덮어쓰기 순서가 결과를 정하므로 합치지 않음).
   PDT 전용 선택자는 뺐다 (PDT는 다음 단계).
   WORK Trex(T6)와 맞추기 위해 바꾼 점은 "WORK 보정" 주석으로 표시한다. */

.ptPracticePage{display:none;padding:10px;min-height:calc(100vh - 102px);background:radial-gradient(circle at 48% -20%,#123451,#06111d 50%)}
.ptPracticePage.active{display:block}
.ptpTop{display:flex;align-items:center;gap:10px;margin-bottom:9px}
.ptpTop h2{margin:0;font-size:18px}
.ptpTop .grow{flex:1}
.ptpBtn{border:1px solid #286084;border-radius:7px;background:#102b40;color:#e2f3ff;padding:8px 12px}
.ptpBtn.primary{background:#087fff;border-color:#2b9bff;color:#fff;font-weight:800}
.ptpBtn.ok{background:#0f6e4a;border-color:#29d68c}
.ptpProgress{width:180px;height:8px;background:#0a1925;border:1px solid #27465c;border-radius:9px;overflow:hidden}
.ptpProgress i{display:block;height:100%;width:0;background:linear-gradient(90deg,#087fff,#2de2b5);transition:.25s}
.practiceInstrumentTabs{display:flex;gap:5px;margin-left:18px}
.practiceInstrumentTab{min-width:72px;border:1px solid #2b5a79;border-radius:7px;background:#091b2a;color:#8fa9bb;padding:8px 16px;font-weight:900;cursor:pointer}
.practiceInstrumentTab:hover{border-color:#31cfff;color:#fff}
.practiceInstrumentTab.active{background:#0b6eb4;border-color:#39b5ff;color:#fff;box-shadow:0 0 14px #168cff33}
.ptpLayout{display:grid;grid-template-columns:210px minmax(560px,1fr) 315px;gap:8px}
.ptpPanel{background:linear-gradient(180deg,#0a1d2e,#071522);border:1px solid #1b4260;border-radius:8px;overflow:hidden}
.ptpHead{height:38px;padding:0 11px;border-bottom:1px solid #183951;display:flex;align-items:center;justify-content:space-between;color:#9db4c5;font-size:10px;font-weight:800}
.ptpSteps{padding:7px}
.ptpStep{width:100%;display:flex;gap:8px;align-items:center;text-align:left;border:1px solid transparent;border-radius:7px;background:#091a28;color:#9eb2c0;padding:9px 7px;margin-bottom:4px;font-size:10px}
.ptpStep b{display:grid;place-items:center;width:23px;height:23px;border:1px solid #31536c;border-radius:50%;color:#7ea0b7}
.ptpStep.active{border-color:#1987d6;background:#0b3150;color:#fff}
.ptpStep.done b{background:#158657;border-color:#2ada91;color:#fff}
.ptpScene{height:355px;position:relative;padding:12px}
.ptpScene svg{width:100%;height:100%;display:block}
.ptpModelBox{position:absolute;left:10px;top:10px;z-index:4;width:165px;border:1px solid #286084;border-radius:7px;background:#081b2a;padding:7px 8px;box-shadow:0 8px 20px #0006}
.ptpModelBox label{display:block;color:#7896aa;font-size:9px;margin-bottom:4px}
.ptpModelBox select{width:100%;border:1px solid #315a76;border-radius:5px;background:#0d2b42;color:#fff;padding:6px;font-size:10px;font-weight:700}
.ptpLive{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:#1d4059;border-top:1px solid #1d4059}
.ptpLive div{background:#081927;padding:9px}
.ptpLive label{display:block;color:#718da1;font-size:9px}
.ptpLive b{font:800 16px ui-monospace,monospace;color:#eaf8ff}
.ptpLive .green{color:#45e196}
.ptpLive .cyan{color:#31cfff}
.ptpControl{padding:10px}
.ptpControl .row{padding:8px 0;border-bottom:1px solid #16364e}
.ptpControl label{display:flex;justify-content:space-between;color:#9fb5c4;font-size:10px;margin-bottom:5px}
.ptpControl input,
.ptpControl select{width:100%;background:#061522;color:#fff;border:1px solid #29506a;border-radius:6px;padding:7px;font-size:10px}
.ptpControl input[type=range]{padding:0;accent-color:#118cff}
.ptpSwitch{display:flex!important;align-items:center;justify-content:space-between!important;border:1px solid #244862;border-radius:6px;padding:7px;background:#0a1b29}
.ptpSwitch input{width:auto}
.ptpAction{width:100%;border:1px solid #2c668b;border-radius:6px;background:#0d3552;color:#e8f6ff;padding:8px;margin-top:6px;font-size:10px}
.ptpAction:hover{border-color:#32cfff}
.ptpAction.success{background:#0c5d3d;border-color:#29bb7c}
.ptpThree{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}
.ptpThree .ptpSwitch{padding:6px 5px;font-size:9px}
.ptpValve{cursor:pointer;outline:none}
.valveHit,
.ptpValve:hover .valveHit,
.ptpValve:focus .valveHit,
.ptpValve:active .valveHit{fill:transparent!important;stroke:transparent!important;opacity:1!important;pointer-events:all;transition:none}
.valveHandle{transform-box:fill-box;transform-origin:center;transition:transform .85s ease-in-out,filter .2s}
.valveState{font:800 8px ui-monospace,monospace;pointer-events:none}
.valveLabel{font:700 8px Arial,sans-serif;fill:#91aabb;pointer-events:none}
.valveOpenGlow{filter:drop-shadow(0 0 4px #35e59a)}
.ptpMessage{margin-top:7px;min-height:43px;border:1px solid #24475f;border-radius:6px;background:#071624;padding:8px;color:#94aebe;font-size:9px;line-height:1.5}
.ptpTestGrid{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;margin-top:6px}
.ptpTestGrid button{border:1px solid #2a5470;border-radius:5px;background:#0c2436;color:#c8dae5;padding:7px 2px;font-size:9px}
.ptpTestGrid button.done{background:#126b49;border-color:#28c981;color:#fff}
.ptpTrexOnly{border:1px solid #315a73;border-radius:6px;background:#081a28;padding:8px;color:#9ab1c1;font-size:9px;line-height:1.55}
.ptpTrexOnly b{color:#31cfff;font-size:10px}
.ptpTrexTitle{display:flex;align-items:center;justify-content:space-between;gap:7px;margin-bottom:3px}
.ptpMiniTrex{border:1px solid #2584bd;border-radius:5px;background:#0b4c75;color:#fff;padding:5px 9px;font-size:9px;font-weight:800;white-space:nowrap}
.ptpMiniTrex:hover{background:#0d659d;border-color:#31cfff}
.ptpRangeDisplay{display:grid;grid-template-columns:1fr auto 1fr;gap:5px;align-items:center;text-align:center;margin-top:6px}
.ptpRangeDisplay span{border:1px solid #28506a;border-radius:5px;background:#061522;color:#fff;padding:7px;font:700 10px ui-monospace,monospace}
.ptpTrexContext{display:none;align-self:stretch;width:100%;min-height:600px;border:1px solid #28506d;border-radius:9px;background:#071522;color:#dceaf3;overflow:hidden}
.trexOverlay.pt-practice-compact .trexPVPanel,
.trexOverlay.pt-practice-compact .trexDevicePanel{display:none!important}
.trexOverlay.pt-practice-compact .ptpTrexContext{display:block}
.trexOverlay.pt-practice-compact .trexShell{width:min(930px,97vw);height:min(820px,96vh)}
.trexOverlay.pt-practice-compact .trexArea{grid-template-columns:265px minmax(520px,1fr)!important;gap:14px!important;padding:12px!important}
.trexOverlay.pt-practice-compact .trexTop span{display:none}
.ptpcHead{padding:12px;background:#0d2538;border-bottom:1px solid #24506d;font-size:12px;font-weight:800}
.ptpcBody{padding:11px}
.ptpcTarget{border:1px solid #2b5874;border-radius:7px;background:#0a1d2c;padding:10px;margin-bottom:12px}
.ptpcTarget small{display:block;color:#7291a6;font-size:9px}
.ptpcTarget b{display:block;color:#31cfff;font:800 19px ui-monospace,monospace;margin:5px 0}
.ptpcCurrent{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:4px;color:#6f8ca0;font-size:9px}
.ptpcCurrent span{background:#061520;border:1px solid #294e67;border-radius:5px;color:#e7f4fb;text-align:center;padding:6px}
.deltaFace{width:210px;margin:0 auto;border:3px solid #7d858a;border-radius:3px;background:#c6c9c8;color:#111;box-shadow:0 9px 22px #0008;font-family:Arial,sans-serif}
.deltaTitle{height:27px;display:flex;align-items:center;justify-content:space-between;background:linear-gradient(#176c9f,#0b4e78);color:#fff;padding:0 7px;font-size:10px;font-weight:700}
.deltaTitle i{font-style:normal;color:#d8f5ff}
.deltaMain{display:grid;grid-template-columns:42px 1fr;background:#dedfdd;border:2px solid #575d60;min-height:255px}
.deltaBar{position:relative;margin:17px auto;width:17px;background:#25292a;border:2px inset #858a8a}
.deltaBarFill{position:absolute;left:2px;right:2px;bottom:2px;height:0;background:linear-gradient(#65ef9e,#12a85f);transition:.2s}
.deltaScale{position:absolute;inset:0;color:#222;font-size:7px}
.deltaScale span:first-child{position:absolute;left:19px;top:-3px}
.deltaScale span:last-child{position:absolute;left:19px;bottom:-3px}
.deltaData{padding:15px 8px;text-align:center}
.deltaMode{display:flex;justify-content:space-between;font-size:9px}
.deltaMode b{color:#0871ad}
.deltaPV{font:900 31px ui-monospace,monospace;margin:23px 0 0}
.deltaUnit{font-size:11px}
.deltaQuality{display:inline-block;margin:12px 0 8px;border:1px solid #157a47;background:#2dcc78;padding:3px 11px;font-size:9px;font-weight:800}
.deltaRows{border-top:1px solid #777;padding-top:8px;text-align:left;font-size:9px;line-height:1.8}
.deltaRows b{float:right;font-family:ui-monospace,monospace}
.deltaFoot{height:25px;display:flex;align-items:center;justify-content:space-between;background:#aeb2b1;border-top:1px solid #686d6e;padding:0 6px;font-size:8px}
.deltaLogo{font-weight:900;color:#084e77}
.ptpcNote{margin-top:11px;border-top:1px solid #1f4057;padding-top:9px;color:#718ea2;font-size:9px;line-height:1.55}
.deltaScale span{white-space:nowrap}
.deltaTicks{position:absolute;right:100%;top:-1px;bottom:-1px;width:9px;margin-right:2px;display:flex;flex-direction:column;align-items:flex-end;justify-content:space-between;pointer-events:none}
.deltaTicks i{display:block;width:5px;height:1px;background:#202425}
.deltaTicks i:nth-child(1),
.deltaTicks i:nth-child(6),
.deltaTicks i:nth-child(11){width:9px;height:2px}
.deltaPV{margin-top:44px}
.deltaQuality{margin-top:20px}
@media(max-width:820px){.trexOverlay.pt-practice-compact .trexArea{grid-template-columns:1fr!important}}
@media(max-width:820px){.trexOverlay.pt-practice-compact .ptpTrexContext{min-height:auto}}
@media(max-width:820px){.deltaFace{margin-bottom:8px}}
@media(max-width:1120px){.ptpLayout{grid-template-columns:180px 1fr}}
@media(max-width:1120px){.ptpLayout>.ptpPanel:last-child{grid-column:1/-1}}
@media(max-width:1120px){.ptpControl{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}}
@media(max-width:1120px){.ptpControl .row{border:1px solid #183951;border-radius:6px;padding:8px}}
@media(max-width:700px){.ptpLayout{grid-template-columns:1fr}}
@media(max-width:700px){.ptpLayout>.ptpPanel:last-child{grid-column:auto}}
@media(max-width:700px){.ptpSteps{display:grid;grid-template-columns:1fr 1fr}}
@media(max-width:700px){.ptpScene{height:300px}}
@media(max-width:700px){.ptpLive{grid-template-columns:1fr 1fr}}
@media(max-width:700px){.ptpControl{grid-template-columns:1fr}}
@media(max-width:700px){.ptpTop{flex-wrap:wrap}}
.trexOverlay.pt-practice-compact .trexArea{gap:8px!important;padding:8px!important}
#ptPracticePage .ptpScene{height:555px; padding:4px;}
#ptPracticePage .ptpScene > svg{width:100%; height:100%; display:block;}
@media(max-width:1120px){#ptPracticePage .ptpScene{height:495px}}
@media(max-width:700px){#ptPracticePage .ptpScene{height:375px}}
.ptpSteps .ptpStep{font-size:12px;}
.ptpSteps .ptpStep b{font-size:12px;}
.ptpLayout > .ptpPanel:first-child .ptpHead,
.ptpLayout > .ptpPanel:last-child .ptpHead{font-size:12px;}
.ptpLayout > .ptpPanel:last-child .ptpControl label{font-size:12px;}
.ptpLayout > .ptpPanel:last-child .ptpControl input,
.ptpLayout > .ptpPanel:last-child .ptpControl select{font-size:12px;}
.ptpLayout > .ptpPanel:last-child .ptpSwitch{font-size:11px;}
#ptPracticePage .ptpLayout > .ptpPanel:first-child,
#ptPracticePage .ptpLayout > .ptpPanel:last-child{font-size:12px;}
#ptPracticePage .ptpLayout > .ptpPanel:last-child .ptpAction{font-size:12px;}
#ptPracticePage .ptpLayout > .ptpPanel:last-child .ptpMessage{font-size:11px; line-height:1.55;}
#ptPracticePage .ptpLayout > .ptpPanel:last-child .ptpTrexOnly,
#ptPracticePage .ptpLayout > .ptpPanel:last-child .ptpTrexTitle{font-size:11px;}
#ptPracticePage .ptpLayout > .ptpPanel:last-child .ptpMiniTrex{font-size:11px;}
#ptPracticePage .ptpLayout > .ptpPanel:first-child .ptpSteps button{font-size:11px;}
#ptPracticePage .ptpLayout > .ptpPanel:first-child .ptpStep{font-size:12.5px; line-height:1.35;}
#ptPracticePage .ptpLayout > .ptpPanel:first-child .ptpStep b{font-size:inherit;}
#ptPracticePage .ptpLayout > .ptpPanel:first-child,
#ptPracticePage .ptpLayout > .ptpPanel:last-child{font-size:12.5px;}
#ptPracticePage .ptpLayout > .ptpPanel:first-child .ptpStep,
#ptPracticePage .ptpLayout > .ptpPanel:last-child .ptpSwitch{font-size:12.5px; line-height:1.35;}
#ptPracticePage .ptpLayout > .ptpPanel:last-child .ptpMessage b{font-size:12.5px; line-height:1.35;}
#ptPracticePage .ptpLayout > .ptpPanel:last-child .ptpMessage{font-size:11.5px; line-height:1.5;}
#ptPracticePage .ptpLayout > .ptpPanel:last-child .ptpAction{font-size:12.5px;}
#ptPracticePage .ptpLayout > .ptpPanel:first-child .ptpStep > span{font-size:12.5px !important; line-height:1.35 !important; font-weight:500;}
#ptPracticePage .ptpLayout > .ptpPanel:first-child .ptpStep > b{font-size:12px !important;}
#ptPracticePage .ptpTrexOnly > b{font-size:12.5px !important;}
#ptPracticePage .ptpTrexOnly{font-size:11.5px !important; line-height:1.5 !important;}
#ptPracticePage .ptpLayout > .ptpPanel:last-child .ptpMessage{font-size:12.5px !important; line-height:1.5 !important;}
#ptPracticePage .ptpLayout > .ptpPanel:last-child .ptpMessage b{font-size:12.5px !important; line-height:1.4 !important; font-weight:800 !important;}
#ptPracticePage .ptpLayout > .ptpPanel:last-child .ptpMessage.bad,
#ptPracticePage .ptpLayout > .ptpPanel:last-child .ptpMessage.err{font-size:12.5px !important; line-height:1.5 !important;}
#ptPracticePage .ptpLayout > .ptpPanel:last-child{font-size:12.5px !important;}
#ptPracticePage .ptpLayout > .ptpPanel:last-child label,
#ptPracticePage .ptpLayout > .ptpPanel:last-child button,
#ptPracticePage .ptpLayout > .ptpPanel:last-child .ptpSwitch,
#ptPracticePage .ptpLayout > .ptpPanel:last-child .ptpAction,
#ptPracticePage .ptpLayout > .ptpPanel:last-child input,
#ptPracticePage .ptpLayout > .ptpPanel:last-child select{font-size:12.5px !important; line-height:1.35 !important;}
#ptPracticePage .ptpLayout > .ptpPanel:last-child .ptpTrexOnly,
#ptPracticePage .ptpLayout > .ptpPanel:last-child .ptpTrexTitle,
#ptPracticePage .ptpLayout > .ptpPanel:last-child .ptpMiniTrex,
#ptPracticePage .ptpLayout > .ptpPanel:last-child .ptpTrexOnly b,
#ptPracticePage .ptpLayout > .ptpPanel:last-child .ptpTrexOnly strong{font-size:12.5px !important; line-height:1.45 !important;}
#ptPracticePage .ptpLayout > .ptpPanel:last-child .ptpMessage,
#ptPracticePage .ptpLayout > .ptpPanel:last-child small,
#ptPracticePage .ptpLayout > .ptpPanel:last-child .hint,
#ptPracticePage .ptpLayout > .ptpPanel:last-child .help{font-size:12px !important; line-height:1.5 !important;}
#ptPracticePage .ptpLayout > .ptpPanel:last-child h3,
#ptPracticePage .ptpLayout > .ptpPanel:last-child h4{font-size:12.5px !important;}
#ptPracticePage .ptpLayout > .ptpPanel:last-child [style*="font-size:8"],
#ptPracticePage .ptpLayout > .ptpPanel:last-child [style*="font-size: 8"],
#ptPracticePage .ptpLayout > .ptpPanel:last-child [style*="font-size:9"],
#ptPracticePage .ptpLayout > .ptpPanel:last-child [style*="font-size: 9"],
#ptPracticePage .ptpLayout > .ptpPanel:last-child [style*="font-size:10"],
#ptPracticePage .ptpLayout > .ptpPanel:last-child [style*="font-size: 10"],
#ptPracticePage .ptpLayout > .ptpPanel:last-child [style*="font-size:11"],
#ptPracticePage .ptpLayout > .ptpPanel:last-child [style*="font-size: 11"]{font-size:12px !important; line-height:1.45 !important;}
#ptPracticePage .ptpLayout > .ptpPanel:last-child .ptpMiniTrex{font-size:12.5px !important; font-weight:500 !important; line-height:1.35 !important;}
#ptPracticePage .ptpLayout > .ptpPanel:last-child .ptpMiniTrex b,
#ptPracticePage .ptpLayout > .ptpPanel:last-child .ptpMiniTrex strong{font-size:inherit !important; font-weight:inherit !important;}
#ptPracticePage .ptpCenterError{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;}
#ptPracticePage .ptpCenterError.show{display:flex; align-items:center; justify-content:center;}
#ptPracticePage .ptpCenterError .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;}
@keyframes ptpErrorBlink2{0%,24%,50%,74%,100%{opacity:1} 12%,62%{opacity:.10}}
@media(max-width:1120px){#ptPracticePage .ptpCenterError{left:18%; right:7%; top:-38px; font-size:14px;}}
@media(max-width:700px){#ptPracticePage .ptpCenterError{left:10%; right:7%; top:-38px; font-size:12px; height:32px; line-height:32px;}}
#ptPracticePage .ptpCenterError .ptpErrorTrack{overflow:hidden; text-overflow:ellipsis;}
#ptPracticePage .ptpCenterError.show .ptpErrorTrack{opacity:1;}

/* WORK 보정 (compact TREX)
   - Reference 615행의 overflow:hidden!important는 옮기지 않았다: T6에서 좁은 화면에 본체·하드키가 잘리지 않게 한 스크롤을 유지
   - T6(1250px 이하)의 grid 영역 이름(pv · unit · dev)을 compact에서는 쓰지 않는다: 영역 이름이 남아 있으면 열이 하나 더 생겨
     Reference 배치(작업 정보 패널 → 본체, 820px 이하 1열)가 되지 않는다 */
.trexOverlay.pt-practice-compact .trexArea{grid-template-areas:none!important}
.trexOverlay.pt-practice-compact .trexUnit{grid-area:auto!important}