/* Trex 공통 틀 (T1): 오버레이 · 본체 · 화면 · 전원 표시 · Home · 시스템 앱 · 하드키 · 키패드
   Reference 대응: Reference WORK/common/common.css 의 Trex 규칙.
   Reference는 같은 선택자를 여러 번 덮어쓴다(.trexArea, .trexShell, .trex-home-grid, .tpowerDialog 등).
   여기에는 최종 적용되는 값만 모았다. T2 이후 화면(Field Communicator, 계기 패널, PV 패널, 메뉴 트리, 작업 대화상자)의 규칙은 넣지 않는다.
   모든 규칙은 .trexOverlay 아래로 한정한다. */

.trexOverlay{position:fixed;inset:0;background:#02070dcc;z-index:200;display:grid;place-items:center;padding:6px}
.trexOverlay[hidden]{display:none!important}
.trexOverlay .trexShell{width:min(1400px,calc(100vw - 12px));height:min(920px,calc(100vh - 12px));background:#071522;border:1px solid #28506d;border-radius:14px;box-shadow:0 30px 80px #000;display:grid;grid-template-rows:44px minmax(0,1fr);overflow:hidden}
.trexOverlay .trexTop{display:flex;align-items:center;padding:0 14px;background:#0a1b2b;border-bottom:1px solid #214965;color:var(--text)}
.trexOverlay .trexTop b{font-size:14px}
.trexOverlay .trexTop span{font-size:10px;color:#8199ae;margin-left:10px}
.trexOverlay .trexClose{margin-left:auto;border:1px solid #31536a;background:#10283d;color:#fff;border-radius:6px;padding:6px 12px}
/* 좌측 PV 입력 · 가운데 본체 · 우측 연결 계기 선택 (1251px 이상 3열 — Reference 최종값)
   T6 수정: 본체 열은 줄어들 수 있게 minmax(0,1fr) — 본체는 trex-core.js가 열 크기에 맞춰 비율 축소한다.
   영역이 모자라면 잘라내지 않고 스크롤한다 (Reference는 overflow:hidden이라 좁은 화면에서 패널·하드키가 잘렸다).
   1250px 이하 · 640px 이하 배치는 파일 끝 "T6 반응형"에 둔다 (패널 규칙보다 뒤에 있어야 적용됨) */
.trexOverlay .trexArea{display:grid;grid-template-columns:260px minmax(0,1fr) 280px;gap:8px;align-items:center;justify-items:center;padding:8px;overflow:auto;min-width:0;min-height:0;background:radial-gradient(circle,#334047,#10171b)}

/* 본체 */
.trexOverlay .trexUnit{position:relative;width:500px;background:linear-gradient(145deg,#33383b,#202426);border-radius:38px;padding:30px 40px 28px;box-shadow:0 25px 60px #000a,inset 0 0 0 2px #444a4d}
.trexOverlay .trexPower{position:absolute;left:-7px;top:70px;width:16px;height:54px;border:0;border-radius:5px 0 0 5px;background:#f29b21;touch-action:none;user-select:none}
.trexOverlay .trexFrame{background:#141719;border-radius:8px;padding:7px 7px 18px;box-shadow:inset 0 0 0 2px #0a0b0c}
.trexOverlay .trexScreen{position:relative;width:100%;aspect-ratio:3/4;background:#dfe4e6;overflow:hidden;color:#333}
.trexOverlay .trexBrand{text-align:center;font-weight:bold;letter-spacing:1px;color:#e9ecee;font-size:14px;margin-top:5px;border-top:4px solid #e99b16;padding-top:4px}

/* 화면 페이지 */
.trexOverlay .tpage{position:absolute;inset:0;display:none;background:#e7ebed}
.trexOverlay .tpage.on{display:block}
.trexOverlay #toff{background:#050607}
.trexOverlay .tboot{height:100%;background:#080a0b;color:#fff;display:grid;place-items:center;text-align:center}
.trexOverlay .tboot b{font-size:34px}

/* 전원 표시 · 전원 메뉴 · Suspend · Shutdown
   층 순서 수정: Reference는 키패드(120)가 전원 메뉴(40)·Suspend(45)·Shutdown(46)보다 위에 있어 키패드가 열린 채
   Suspend하면 키패드가 검은 화면 위에 남았다. 키패드 120 < 전원 메뉴 130 < Suspend 140 < Shutdown 141 < 누름 표시 150 */
.trexOverlay .tpowerHold{position:absolute;left:8px;top:8px;width:132px;height:24px;background:#0b1720e8;border:1px solid #49606f;border-radius:12px;color:#d8e8f2;font-size:9px;display:none;align-items:center;padding:0 8px;z-index:150}
.trexOverlay .tpowerHold.show{display:flex}
.trexOverlay .tpowerHoldBar{height:4px;background:#f29b21;width:0%;position:absolute;left:7px;right:7px;bottom:3px;border-radius:3px}
.trexOverlay .tpowerDialog{position:absolute;inset:0;background:rgba(20,24,27,.38);z-index:130;display:none;align-items:center;justify-content:center}
.trexOverlay .tpowerDialog.show{display:flex}
.trexOverlay .photoPowerCard{width:100%;margin:0 10px;background:#eef0ef;border:1px solid #8f999e;border-radius:0;box-shadow:0 8px 22px #0006;color:#24323b;overflow:hidden}
.trexOverlay .photoPowerQuestion{padding:18px 18px 10px;text-align:center;font-family:Georgia,serif;font-size:22px;font-weight:700;color:#405a74}
.trexOverlay .photoPowerWarning{padding:0 16px 20px;text-align:center;font-size:11px;color:#9aa0a4;border-bottom:1px solid #aeb7bc}
.trexOverlay .photoPowerButtons{display:grid;grid-template-columns:repeat(3,1fr);background:#edf0f2}
.trexOverlay .photoPowerButtons .tpowerOption{width:100%;height:58px;border:0;border-right:1px solid #aeb7bc;background:linear-gradient(#f5f7f7,#e3e8ea);color:#26343d;text-align:center;padding:0;font-family:Georgia,serif;font-size:18px;font-weight:700}
.trexOverlay .photoPowerButtons .tpowerOption:last-child{border-right:0}
.trexOverlay .photoPowerButtons .tpowerOption:active,.trexOverlay .photoPowerButtons .tpowerOption.sel{background:#d6e7f1}
.trexOverlay .tsuspend{position:absolute;inset:0;background:#030405;z-index:140;display:none;cursor:pointer}
.trexOverlay .tsuspend.show{display:block}
.trexOverlay .tshutdown{position:absolute;inset:0;background:#07090a;color:#fff;z-index:141;display:none;align-items:center;justify-content:center;text-align:center;font-size:12px}
.trexOverlay .tshutdown.show{display:flex}

/* Home */
.trexOverlay .trex-real-home{position:absolute;inset:0;background:linear-gradient(145deg,#f5f5ef 0%,#e8eceb 48%,#dce7ec 100%);color:#222;font-family:Arial,sans-serif;overflow:hidden}
.trexOverlay .trex-home-top{height:31px;background:linear-gradient(#343738,#515456);color:#f4f0df;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 8px;font-size:11px;font-weight:700;box-shadow:0 1px 3px #777}
.trexOverlay .trex-home-top b{background:#554f47;padding:2px 8px;border-radius:0 0 8px 8px;font-size:11px}
.trexOverlay .trex-battery{justify-self:end;font-size:17px;transform:rotate(90deg)}
.trexOverlay .trex-home-grid{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:13px 8px;height:calc(100% - 31px);padding:34px 14px 20px;box-sizing:border-box}
.trexOverlay .trex-app{border:0;background:transparent;color:#222;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:5px;font-size:13px;line-height:1.08;cursor:pointer;padding:2px;font-family:"Segoe UI",Arial,sans-serif}
.trexOverlay .trex-app:active,.trexOverlay .trex-app.focus{background:#b8dbe466;border-radius:7px}
.trexOverlay .trex-ico{position:relative;display:flex;align-items:center;justify-content:center;font-family:Arial,sans-serif}
.trexOverlay .fieldico:before{content:"";width:43px;height:43px;border-radius:50%;border:7px solid #7dc5c6;box-shadow:0 0 0 4px #cfd8d3;transform:rotate(45deg)}
.trexOverlay .fieldico i{position:absolute;width:25px;height:25px;border:2px solid #777;transform:rotate(45deg)}
.trexOverlay .calcico{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:3px;width:55px;height:55px}
.trexOverlay .calcico i{display:flex;align-items:center;justify-content:center;background:#c99a65;color:#fff;font-style:normal;font-size:28px;border-radius:2px;box-shadow:0 1px 2px #777}
.trexOverlay .fieldbusico{background:#222;border:3px solid #aaa;box-sizing:border-box;width:47px;height:40px;margin-top:5px}
.trexOverlay .fieldbusico i{color:#4fdf70;font-size:31px;font-style:normal}
.trexOverlay .fieldbusico em{position:absolute;right:-14px;bottom:-10px;width:27px;height:22px;background:linear-gradient(#b12c3a 0 22%,transparent 22% 30%,#b12c3a 30% 52%,transparent 52% 60%,#b12c3a 60% 82%);transform:skew(-18deg)}
.trexOverlay .loopico{background:#4d3828;border:4px solid #d5a84f;box-sizing:border-box;width:50px;height:50px;display:block;margin-top:3px}
.trexOverlay .loopico i{display:block;color:#55e575;background:#18211d;height:23px;font-size:25px;line-height:18px;font-style:normal}
.trexOverlay .loopico b{display:block;color:#5df06e;background:#17221a;font-size:14px;margin-top:3px}
.trexOverlay .pdfico{border:2px solid #aaa;border-radius:4px;width:47px;height:55px}
.trexOverlay .pdfico:before{content:"";position:absolute;left:5px;top:3px;width:31px;height:42px;background:#eee;border:1px solid #aaa;transform:rotate(-8deg)}
.trexOverlay .pdfico i{position:relative;background:#c73547;color:#fff;font-weight:700;font-style:normal;font-size:19px;padding:4px 5px;transform:rotate(3deg)}
.trexOverlay .gearico{font-size:57px;color:#9da5aa;text-shadow:1px 1px 0 #666}
.trexOverlay .helpico{width:53px;height:53px;border-radius:50%;background:#78c7ca;color:#f1f1e8;font-size:43px;font-weight:700;box-shadow:0 0 0 5px #d3d8d4}
.trexOverlay .vlico{width:44px;height:55px;border-radius:4px;background:linear-gradient(#0d5079,#05253c);color:#fff;box-shadow:0 2px 3px #777;display:flex;flex-direction:column;gap:0}
.trexOverlay .vlico b{font-size:36px;line-height:34px}
.trexOverlay .vlico small{font-size:8px;background:#2782a2;padding:1px 3px}
/* Reference는 개별 아이콘 규칙 뒤에 .trex-ico 크기를 다시 선언해 모든 아이콘이 64×62가 된다 (최종 적용값) */
.trexOverlay .trex-ico{width:64px;height:62px}
.trexOverlay .trex-home-dot{position:absolute;bottom:3px;left:50%;width:13px;height:13px;border-radius:50%;background:#d7c3a6;border:1px solid #aaa;transform:translateX(-50%)}

/* 시스템 앱 화면 (Calculator · Fieldbus · Loop Diagnostics · PDF · Settings · Help · ValveLink) */
.trexOverlay .trexAppPage{position:absolute;inset:0;background:#eef0ed;color:#25313a;font-family:Arial,sans-serif}
.trexOverlay .trex-fc-topbar{height:30px;background:linear-gradient(#343738,#515456);color:#f7f2e7;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 8px;font-size:11px;font-weight:700;box-shadow:0 1px 2px #777}
.trexOverlay .trex-fc-topbar b{background:#403b34;padding:2px 8px;border-radius:0 0 7px 7px;font-size:10px}
.trexOverlay .fc-battery{justify-self:end;font-size:14px;transform:rotate(90deg)}
.trexOverlay .trex-fc-header{height:67px;background:linear-gradient(150deg,#9fc5dc,#6a9bb9);display:flex;align-items:stretch;border-bottom:1px solid #557d94}
.trexOverlay .fc-exit{width:70px;border:0;border-right:1px solid #829aaa;background:#f4f4ef;color:#4b5960;display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:Georgia,serif;cursor:pointer;clip-path:polygon(0 0,82% 0,100% 50%,82% 100%,0 100%);padding-right:10px}
.trexOverlay .fc-exit span:last-child{font-size:12px}
.trexOverlay .fc-x{font-family:Arial,sans-serif;font-size:25px;font-weight:900;line-height:22px}
.trexOverlay .fc-head-main{padding:7px 10px;color:#f2f6f8;flex:1}
.trexOverlay .fc-head-title{font-size:17px;font-weight:700}
.trexOverlay .fc-head-sub{font-size:12px;margin-top:5px;color:#e4eef4}
.trexOverlay .trexAppBody{padding:14px;overflow:auto;height:calc(100% - 92px)}
.trexOverlay .trexAppTile{border:1px solid #aeb8bd;background:linear-gradient(#fff,#e7ebea);padding:13px;margin-bottom:7px;font-size:12px}
.trexOverlay .trexAppTile b{display:block;color:#315d77;margin-bottom:4px}
.trexOverlay .tloopBarWrap{margin:8px 0 3px;height:14px;background:#dfe4e6;border:1px solid #aeb8bd;border-radius:3px;overflow:hidden}
.trexOverlay .tloopBarFill{height:100%;background:linear-gradient(90deg,#4d94bd,#2c76a5);transition:width .3s}
.trexOverlay .tloopBarScale{display:flex;justify-content:space-between;font-size:9px;color:#7c8b92;margin-bottom:8px}
.trexOverlay .tcalcDisplay{background:#0d1a22;color:#dff1ff;font:700 26px ui-monospace,SFMono-Regular,Consolas,monospace;text-align:right;padding:14px 12px;border-radius:6px;min-height:26px;overflow:hidden;white-space:nowrap;margin-bottom:10px}
.trexOverlay .tcalcGrid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.trexOverlay .tcalcGrid button{height:44px;border:1px solid #b9c2c5;border-radius:6px;background:linear-gradient(#fff,#e6ebec);color:#33434b;font-size:15px;font-weight:700;cursor:pointer}
.trexOverlay .tcalcGrid button:active{background:#d9e6ea}
.trexOverlay .tcalcGrid button.op{background:linear-gradient(#3f94c9,#2c76a5);color:#fff;border-color:#215d80}
.trexOverlay .tcalcGrid button.wide{grid-column:span 2}

/* 하드키 */
.trexOverlay .trexKeys{display:flex;justify-content:center;align-items:center;gap:18px;margin-top:20px}
.trexOverlay .trexKey{border:0;background:linear-gradient(#f3f1e9,#d6d3c8);color:#3a91c0;box-shadow:0 2px 3px #0008,inset 0 0 0 1px #aaa79d;border-radius:7px;width:36px;height:36px;font-weight:bold}
.trexOverlay .tdpad{display:grid;grid-template-columns:repeat(3,34px);grid-template-rows:repeat(3,26px)}
.trexOverlay .tdpad button{border:0;background:#e5e2d8;color:#4b9ac2}
.trexOverlay .tdpad .u{grid-column:2}
.trexOverlay .tdpad .l{grid-row:2;grid-column:1}
.trexOverlay .tdpad .c{grid-row:2;grid-column:2}
.trexOverlay .tdpad .r{grid-row:2;grid-column:3}
.trexOverlay .tdpad .d{grid-row:3;grid-column:2}

/* 화면 키패드 (숫자 / 문자) */
.trexOverlay .trexKpOverlay{position:absolute;inset:0;background:rgba(20,25,28,.52);z-index:120;display:none;align-items:center;justify-content:center}
.trexOverlay .trexKpOverlay.show{display:flex}
.trexOverlay .trexKpCard{width:292px;background:#eef0ed;border:1px solid #87949a;color:#27363e;box-shadow:0 12px 30px #0009;font-family:Arial,sans-serif}
.trexOverlay .trexKpHead{background:linear-gradient(#a9cee4,#729fba);color:#fff;padding:9px 11px;font-size:12px;font-weight:700;border-bottom:1px solid #64879d}
.trexOverlay .trexKpDisplayWrap{padding:10px 11px 5px}
.trexOverlay .trexKpLabel{font-size:9px;color:#6b7a81;margin-bottom:4px}
.trexOverlay .trexKpDisplay{height:38px;background:#fff;border:1px solid #8d9aa0;padding:7px 9px;font:700 18px Consolas,monospace;text-align:right;overflow:hidden;white-space:nowrap}
.trexOverlay .trexKpUnit{text-align:right;font-size:9px;color:#75848a;padding:2px 11px 7px}
.trexOverlay .trexNumPad{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;padding:7px 10px 10px}
.trexOverlay .trexNumPad button,.trexOverlay .trexAlphaPad button{border:1px solid #9da7aa;background:linear-gradient(#fff,#e2e6e5);color:#25343c;border-radius:2px;height:42px;font:700 16px Arial,sans-serif}
.trexOverlay .trexNumPad button:active,.trexOverlay .trexAlphaPad button:active{background:#cfe4ef}
.trexOverlay .trexNumPad .wide{grid-column:span 2}
.trexOverlay .trexNumPad .func{font-size:12px;color:#4f6875}
.trexOverlay .trexAlphaPad{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;padding:7px 8px 9px}
.trexOverlay .trexAlphaPad button{height:32px;font-size:11px}
.trexOverlay .trexKpBtns{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid #a9b2b6}
.trexOverlay .trexKpBtns button{height:46px;border:0;border-right:1px solid #a9b2b6;background:linear-gradient(#fafafa,#e3e7e7);font:700 14px Georgia,serif;color:#34454e}
.trexOverlay .trexKpBtns button:last-child{border-right:0;background:#d9edf8;color:#1d6488}

/* ===== T2: 좌우 패널 · Field Communicator · Scan · 연결 후 머리글 · 작업 대화상자 (Reference 최종 적용값) ===== */

/* 좌측 PV 입력 · 우측 연결 계기 선택 */
.trexOverlay .trexPVPanel,.trexOverlay .trexDevicePanel{align-self:stretch;width:100%;height:100%;min-height:0;max-height:100%;background:#071522;border:1px solid #28506d;border-radius:10px;color:#dbe8f1;overflow:hidden;display:flex;flex-direction:column}
.trexOverlay .trexPVPanel h3,.trexOverlay .trexDevicePanel h3{margin:0;padding:12px 13px;background:#0d2133;border-bottom:1px solid #214965;font-size:13px}
.trexOverlay .trexPVPanel .hint,.trexOverlay .trexDevicePanel .hint{padding:9px 12px;color:#7994a7;font-size:10px;line-height:1.55;border-bottom:1px solid #173650}
.trexOverlay .trexPVBody{padding:12px}
.trexOverlay .trexPVBody label{display:flex;justify-content:space-between;color:#aebfcd;font-size:10px;margin-bottom:6px}
.trexOverlay .trexPVBody label b{color:#2fe18f;font-size:15px}
.trexOverlay .trexPVBig{font:900 27px Consolas,monospace;color:#31cfff;text-align:center;padding:13px 5px 8px}
.trexOverlay .pvKeyboardRow{display:grid;grid-template-columns:1fr 62px;gap:6px;margin-top:8px}
.trexOverlay .pvKeyboardRow input{width:100%;height:38px;background:#081624;color:#fff;border:1px solid #21445f;border-radius:7px;padding:0 9px;font:700 15px Consolas,monospace}
.trexOverlay .pvKeyboardRow input:focus{outline:2px solid #1689d4;border-color:#1689d4}
.trexOverlay .pvKeyboardRow button{border:1px solid #2a5e80;background:#0b3652;color:#d9efff;border-radius:7px;font-size:10px;font-weight:700}
.trexOverlay .pvKeyboardHelp{margin-top:4px;font-size:9px;color:#70899c}
.trexOverlay .trexPVRange{width:100%;accent-color:#087fff;margin:12px 0 3px}
.trexOverlay .trexPVTicks{display:flex;justify-content:space-between;font-size:9px;color:#6f879b}
.trexOverlay .trexPVQuick{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:10px}
.trexOverlay .trexPVQuick button{border:1px solid #244a65;background:#0b1c2c;color:#b9d0df;border-radius:6px;padding:7px;font-size:9px}
.trexOverlay .trexPVQuick button:hover{border-color:#3c80aa}
.trexOverlay .trexPVRead{margin-top:12px;border:1px solid #1d4663;border-radius:8px;background:#081827;padding:10px;font-size:10px;line-height:1.8}
.trexOverlay .trexPVRead b{display:inline-block;width:82px;color:#7f97ab}
.trexOverlay .trexPVState{margin-top:auto;border-top:1px solid #173650;padding:10px 12px;font-size:9px;color:#7d97ad;line-height:1.6}
.trexOverlay .trexDeviceList{padding:8px;display:grid;gap:6px;min-height:0;overflow:auto}
.trexOverlay .trexDevBtn{text-align:left;border:1px solid #244a65;border-radius:7px;background:#0a1b2a;color:#bad0df;padding:9px;cursor:pointer}
.trexOverlay .trexDevBtn:hover{border-color:#3c80aa}
.trexOverlay .trexDevBtn.active{background:#0b5f9a;border-color:#35a8ea;color:#fff}
.trexOverlay .trexDevBtn b{display:block;font-size:12px}
.trexOverlay .trexDevBtn small{display:block;color:#7f9aae;font-size:9px;margin-top:3px}
.trexOverlay .trexDevBtn.active small{color:#d4efff}
.trexOverlay .trexSelected{margin:8px;border:1px solid #1f5f43;background:#09261c;border-radius:7px;padding:10px;font-size:10px;line-height:1.65}
.trexOverlay .trexSelected b{color:#42df92}
.trexOverlay .trexConnectLegend{margin-top:auto;padding:10px 12px;border-top:1px solid #173650;font-size:9px;color:#7e99ad;line-height:1.7}

/* Field Communicator (Connect – Select) */
.trexOverlay .trex-fc-photo{position:absolute;inset:0;background:#efefea;color:#242424;font-family:Arial,Helvetica,sans-serif;overflow:hidden}
.trexOverlay .trex-fc-body{padding:0 15px 14px}
.trexOverlay .fc-status-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:14px 2px 6px}
.trexOverlay .fc-status{text-align:center;min-height:124px}
.trexOverlay .fc-status-label{font-family:Georgia,serif;font-size:13px;margin-bottom:4px}
.trexOverlay .fc-status-text{font-family:Georgia,serif;font-size:13px;font-weight:700;margin-top:7px}
.trexOverlay .fc-power-icon{width:58px;height:58px;box-sizing:border-box;margin:2px auto 0;position:relative;border-radius:50%;border:5px solid #6fc3c2;border-right-color:#d0d0c8}
.trexOverlay .fc-bolt{position:absolute;left:16px;top:1px;color:#d49b46;font-size:28px;font-weight:700}
.trexOverlay .fc-plug{position:absolute;right:-3px;bottom:-4px;width:18px;height:15px;background:#6b6d86;border-radius:2px}
.trexOverlay .fc-comm-icon{height:48px;position:relative;margin-top:3px}
.trexOverlay .fc-comm-icon .arr{position:absolute;color:#4caa8f;font-size:40px;line-height:35px}
.trexOverlay .fc-comm-icon .right{left:50%;top:-6px;transform:translateX(-55%)}
.trexOverlay .fc-comm-icon .left{left:50%;top:17px;transform:translateX(-45%) rotate(180deg)}
.trexOverlay .fc-status.connected .fc-status-text{color:#1f7b55}
.trexOverlay .fc-status.connected .fc-comm-icon .arr{color:#2e9b76}
.trexOverlay .fc-separator{height:1px;background:#c8c8c3;margin:0 -13px}
.trexOverlay .fc-connect-text{text-align:center;font-family:Georgia,serif;font-size:15px;font-weight:700;line-height:1.1;padding:21px 0 18px}
.trexOverlay .fc-bottom-area{display:grid;grid-template-columns:148px 1fr;gap:16px;align-items:center}
.trexOverlay .fc-hart-buttons{display:grid;gap:10px}
.trexOverlay .fc-hart-btn{height:61px;border:1px solid #9fa4a6;background:#f4f2eb;color:#333;display:grid;grid-template-columns:56px 1fr;align-items:center;font-family:Georgia,serif;font-size:14px;cursor:pointer;transform:skew(-2deg)}
.trexOverlay .fc-hart-btn:active{background:#dcebf3}
.trexOverlay .hart-mark{color:#b85f66;font-family:Arial,sans-serif;font-size:13px;font-weight:900;font-style:italic;opacity:.75}
.trexOverlay .fc-fieldbus-note{text-align:center;font-family:Georgia,serif;font-size:15px;line-height:1.08;color:#1d1d1d}

/* Scan */
.trexOverlay .tstatus{height:30px;background:linear-gradient(#666f75,#4a545a);color:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 10px;font-size:11px}
.trexOverlay .thead{height:64px;background:linear-gradient(#a9d4ee,#5e9fc7);color:#fff;display:flex}
.trexOverlay .texit{width:74px;border:0;border-right:1px solid #9eb0ba;background:#f6f8f8;color:#333;font-size:22px}
.trexOverlay .theadtext{padding:9px 12px}
.trexOverlay .theadtext b{font-size:17px}
.trexOverlay .theadtext small{display:block;margin-top:5px}

/* 연결 후 화면 머리글 (메뉴 트리는 T3) */
.trexOverlay .tddScreen{position:absolute;inset:0;background:#eceeea;color:#28343b;font-family:Arial,sans-serif}
.trexOverlay .tddTop{height:28px;background:linear-gradient(#414749,#606566);color:#f2efe6;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 8px;font-size:9px;font-weight:700}
.trexOverlay .tddTop span:last-child{text-align:right}
.trexOverlay .tddHead{height:58px;background:linear-gradient(145deg,#9cc5de,#6497b7);display:flex;color:#fff;border-bottom:1px solid #5a8096}
.trexOverlay .tddExit{width:62px;border:0;border-right:1px solid #89a0ad;background:#f0f1ed;color:#44535a;font-family:Georgia,serif;font-size:11px;display:flex;flex-direction:column;align-items:center;justify-content:center;clip-path:polygon(0 0,82% 0,100% 50%,82% 100%,0 100%);padding-right:8px}
.trexOverlay .tddExit b{font-size:21px;line-height:18px}
.trexOverlay .tddHeadText{padding:7px 10px}
.trexOverlay .tddHeadText b{font-size:14px}
.trexOverlay .tddHeadText small{display:block;margin-top:4px;font-size:9px}
.trexOverlay .tddInfo{height:46px;background:#f7f7f3;border-bottom:1px solid #c7cbca;padding:6px 11px;font-size:10px;line-height:1.55}
.trexOverlay .tddPath{color:#75838a;font-size:9px}
.trexOverlay .tddRows{position:absolute;top:132px;left:0;right:0;bottom:47px;padding:7px 9px;overflow:auto;height:auto;box-sizing:border-box}

/* 작업 대화상자 (층: 화면 < 대화상자 92 < 키패드 120 < 전원 메뉴 130) */
.trexOverlay .tactionOverlay{position:absolute;inset:0;background:rgba(25,31,34,.48);z-index:92;display:none;align-items:center;justify-content:center}
.trexOverlay .tactionOverlay.show{display:flex}
.trexOverlay .tactionCard{width:300px;background:#f0f2ef;border:1px solid #8f9ba1;color:#293840;box-shadow:0 10px 30px #0008;font-family:Arial,sans-serif}
.trexOverlay .tactionHead{padding:10px 12px;background:linear-gradient(#a8cee5,#719fbb);color:#fff;font-weight:700;font-size:13px}
.trexOverlay .tactionBody{padding:13px;font-size:11px;line-height:1.55}
.trexOverlay .tactionBody h4{margin:0 0 8px;font-size:14px;color:#38576a}
.trexOverlay .tactionBody input,.trexOverlay .tactionBody select{width:100%;height:34px;border:1px solid #9da9ae;background:#fff;color:#26343b;padding:0 8px;margin:5px 0 9px}
.trexOverlay .tactionStatus{margin:8px 0;padding:8px;background:#fff;border:1px solid #c3c9cc;font-family:Consolas,monospace}
.trexOverlay .tactionBtns{display:grid;grid-template-columns:repeat(2,1fr);border-top:1px solid #aeb8bd}
.trexOverlay .tactionBtns button{height:46px;border:0;border-right:1px solid #aeb8bd;background:linear-gradient(#fafafa,#e4e8e9);font-family:Georgia,serif;font-size:13px;font-weight:700;color:#33444d}
.trexOverlay .tactionBtns button:last-child{border-right:0}
.trexOverlay .tactionBtns .primary{background:#dceef8;color:#1d6286}

/* ===== T3: 메뉴 트리 행 · 2051 Device Dashboard · 하단 바 (Reference 최종 적용값) ===== */
.trexOverlay .tddRow{min-height:43px;border:1px solid #b7c0c4;background:linear-gradient(#fff,#e8ebea);margin-bottom:5px;border-radius:2px;display:grid;grid-template-columns:27px 1fr auto;align-items:center;padding:0 10px 0 5px;font-size:11px;cursor:pointer}
.trexOverlay .tddRow.sel{outline:3px solid #6ba7c8;background:#e3f3fb}
.trexOverlay .tddNum{color:#75848b;text-align:center}
.trexOverlay .tddValue{font-weight:700;color:#315f75;margin-left:8px}
.trexOverlay .tddArrow{color:#718087;font-size:16px}
.trexOverlay .tddActionHint{display:block;color:#2877a4;font-size:8px;margin-top:2px;font-weight:700}
.trexOverlay .trexFieldButton{min-width:104px;min-height:28px;border:1px solid #8e9ba1;background:#fff;color:#26343b;padding:4px 7px;font:700 11px Consolas,monospace;text-align:right;cursor:pointer}
.trexOverlay .trexFieldButton.pending{background:#fff7cf;border-color:#d7aa35}
.trexOverlay .trexFieldButton:active{background:#dcebf3}
.trexOverlay .tddPendingTag{display:block;color:#b47700;font-size:8px;margin-top:2px;font-weight:700}
.trexOverlay .tddSendBtn{border:1px solid #6c8da0;background:linear-gradient(#f5f7f7,#dce5e9);color:#2d4654;border-radius:3px;padding:5px 15px;font:700 11px Georgia,serif}
.trexOverlay .tddSendBtn.ready{background:linear-gradient(#7fbadd,#4d94bd);color:#fff;border-color:#3d7fa6}
.trexOverlay .tddSendBtn:disabled{opacity:.45}
.trexOverlay .tddSendState{color:#f1c24e;font-size:9px;font-weight:700}
.trexOverlay .tddBottom{position:absolute;left:0;right:0;bottom:0;height:38px;background:#3b4449;border-top:4px solid #dd9624;color:#eee;display:flex;align-items:center;justify-content:space-around;font-size:9px}

.trexOverlay .trex2051Dash{position:absolute;inset:0;background:#eef0ed;color:#222;font-family:Arial,Helvetica,sans-serif;overflow:hidden}
.trexOverlay .trex2051Dash .tddRows{display:none!important}
.trexOverlay .trex2051Dash .tddHead{position:relative}
.trexOverlay .trex2051Alerts{position:absolute;right:7px;top:7px;height:43px;min-width:54px;border:0;border-left:1px solid #7fa0b4;background:transparent;color:#fff;font-size:9px;display:flex;flex-direction:column;align-items:center;justify-content:center}
.trexOverlay .trex2051Alerts b{font-size:15px;line-height:14px}
.trexOverlay .trex2051OverviewBody{position:absolute;left:0;right:0;top:132px;bottom:43px;padding:7px 10px 5px;background:#f0f1ee;overflow:hidden}
.trexOverlay .trex2051StatusStrip{height:62px;display:grid;grid-template-columns:1fr 1fr;gap:8px;border-bottom:1px solid #c5cac8;padding-bottom:8px;margin-bottom:5px}
.trexOverlay .trex2051StatusBox{border:1px solid #b6bfc0;background:#fafaf7;display:grid;grid-template-columns:34px 1fr auto;align-items:center;padding:5px 6px;font-size:8px;color:#586569;min-width:0}
.trexOverlay .trex2051StatusIcon{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:#80bdd8;color:#fff;font-weight:900;font-size:14px}
.trexOverlay .trex2051StatusText b{display:block;color:#314a59;font-size:9px;margin-bottom:1px}
.trexOverlay .trex2051StatusAction{border:1px solid #aab7ba;background:#edf1f1;color:#3e626f;padding:3px 5px;font-size:7px}
.trexOverlay .trex2051GaugeGrid{display:grid;grid-template-columns:1fr 1fr;gap:2px;align-items:start;margin-top:1px;padding:0 2px}
.trexOverlay .trex2051Gauge{height:204px;text-align:center;padding:0 1px;position:relative}
.trexOverlay .trex2051GaugeTitle{font:700 13px Georgia,"Times New Roman",serif;color:#242424;margin:2px 0 0}
.trexOverlay .trex2051Gauge svg{display:block;width:164px;height:128px;margin:0 auto -7px;overflow:visible}
.trexOverlay .trex2051GaugeArc{fill:none;stroke:#c7c9c4;stroke-width:13;stroke-linecap:butt}
.trexOverlay .trex2051GaugeArc2{fill:none;stroke:#858985;stroke-width:1.4}
.trexOverlay .trex2051GaugeInner{fill:none;stroke:#e8e9e5;stroke-width:1}
.trexOverlay .trex2051Tick{stroke:#555a57;stroke-width:1}
.trexOverlay .trex2051Tick.major{stroke-width:1.8}
.trexOverlay .trex2051ScaleText{fill:#595d5a;font:8px Arial,sans-serif;text-anchor:middle}
.trexOverlay .trex2051Needle{stroke:#315f78;stroke-width:4;stroke-linecap:round;transform-origin:80px 84px;transition:transform .55s cubic-bezier(.2,.7,.2,1)}
.trexOverlay .trex2051Needle.ao{stroke:#80662d}
.trexOverlay .trex2051Hub{fill:#3a3e3d}
.trexOverlay .trex2051GaugeRead{font:700 18px Georgia,"Times New Roman",serif;color:#2c2c2c;line-height:20px;margin-top:-1px}
.trexOverlay .trex2051GaugeUnit{font-size:9px;color:#575e60;margin-top:0}
.trexOverlay .trex2051More{position:absolute;right:11px;bottom:4px;border:0;background:transparent;color:#405d69;font:700 9px Arial,sans-serif;display:flex;align-items:center;gap:4px}
.trexOverlay .trex2051More span{font-size:16px;line-height:12px}
.trexOverlay .trex2051AppBar{position:absolute;left:0;right:0;bottom:0;height:43px;display:grid;grid-template-columns:repeat(4,1fr);border-top:4px solid #d89522;background:#3b4448;color:#e7ebeb}
.trexOverlay .trex2051AppTab{border:0;border-right:1px solid #697276;background:#3b4448;color:#e8eded;font:700 9px Arial,sans-serif;padding:2px 1px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px}
.trexOverlay .trex2051AppTab:last-child{border-right:0}
.trexOverlay .trex2051AppTab.active{background:#6b787d;color:#fff}
.trexOverlay .trex2051AppTab span{font-size:15px;line-height:14px}
.trexOverlay .trex2051AppTab:disabled{opacity:.7;cursor:default}

/* ===== T4: 쓰기 메시지 · 설정 입력 버튼 · Discard 버튼 (Reference 최종값) · 검토 창 안 오류 표시 ===== */
.trexOverlay .twriteMsg{position:absolute;left:50%;top:38%;transform:translate(-50%,-50%);min-width:220px;background:#eff2f1;border:1px solid #87959b;color:#33434b;padding:18px;text-align:center;z-index:85;display:none;box-shadow:0 10px 24px #0007;font-size:12px}
.trexOverlay .twriteMsg.show{display:block}
.trexOverlay .trexActionField{width:100%;min-height:35px;border:1px solid #9aa7ad;background:#fff;color:#26343b;padding:8px;font:700 13px Consolas,monospace;text-align:right;cursor:pointer;margin:5px 0 9px}
.trexOverlay .trexActionField:active{background:#dcebf3}
.trexOverlay .teditUnit{font-size:10px;color:#78868c;margin-top:5px}
.trexOverlay .trexWizardChoice{width:100%;display:block;border:1px solid #9aa7ad;background:#fff;color:#26343b;padding:12px;margin:7px 0;text-align:left;font:700 13px Georgia,serif}
/* 검증 오류: Reference는 alert() 창 — WORK는 검토 창 안에 표시 (색은 Reference Zero Trim 거부 표시와 같은 계열) */
.trexOverlay .tactionError{margin:8px 0;padding:8px;border:1px solid #c36a55;background:#fff0eb;color:#9a3e2b;font-weight:700}

/* ===== T6 반응형: 노트북 · 태블릿 · 모바일 =====
   PC(1251px 이상)는 3열 배치 그대로. 본체 크기는 trex-core.js가 본체 열의 폭(과 높이)에 맞춰 zoom으로 줄인다(최대 1배).
   패널 내용이 칸보다 길면 잘리지 않고 패널 안에서 스크롤한다 (PC 1400×1000에서는 내용이 다 들어가 변화 없음). */
.trexOverlay .trexPVPanel,.trexOverlay .trexDevicePanel{overflow-y:auto}
/* 641–1250px: 좌측 열에 PV 입력 · 계기 선택을 위아래로 쌓고, 본체는 오른쪽 열 (Reference는 계기 패널을 아래 줄에 두어
   높이가 모자라면 2px로 눌렸다). 영역이 모자라면 영역 전체를 스크롤 */
@media(max-width:1250px){
 .trexOverlay .trexArea{grid-template-columns:230px minmax(0,1fr);grid-template-areas:"pv unit" "dev unit";grid-template-rows:auto 1fr;align-items:start;align-content:start}
 /* min-height:auto: 기본 규칙의 min-height:0이면 행이 영역 높이 안으로 눌린다 */
 .trexOverlay .trexPVPanel{grid-area:pv;height:auto;min-height:auto;max-height:none;overflow:visible}
 .trexOverlay .trexDevicePanel{grid-area:dev;height:auto;min-height:auto;max-height:none;overflow:visible;align-self:start}
 .trexOverlay .trexUnit{grid-area:unit;align-self:start}
}
/* 본체가 영역 높이 안에 들어가는 화면: 좌측 열을 스크롤해도 본체가 위에 계속 보이게 (2열일 때만 — 1열에서는 아래 패널을 덮는다) */
@media(min-width:641px) and (max-width:1250px) and (min-height:640px){
 .trexOverlay .trexUnit{position:sticky;top:0}
}
/* 640px 이하 (모바일 세로 등): 1열 — 본체 → PV 입력 → 계기 선택 순서, 영역 전체를 세로 스크롤.
   본체 테두리(베젤)만 줄여 화면 크기를 최대한 확보한다 (화면 폭 406px 그대로 → 비율 축소가 덜 됨) */
@media(max-width:640px){
 .trexOverlay{padding:0}
 .trexOverlay .trexShell{width:100vw;height:100vh;height:100dvh;border-radius:0;border:0;grid-template-rows:40px minmax(0,1fr)}
 .trexOverlay .trexTop{padding:0 8px}
 .trexOverlay .trexTop b{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
 .trexOverlay .trexTop span{display:none}
 .trexOverlay .trexClose{flex:none;padding:8px 12px}
 .trexOverlay .trexArea{grid-template-columns:minmax(0,1fr);grid-template-areas:"unit" "pv" "dev";grid-template-rows:auto;padding:8px 6px;gap:10px}
 .trexOverlay .trexPVPanel,.trexOverlay .trexDevicePanel{align-self:stretch}
 .trexOverlay .trexUnit{width:452px;padding:18px 16px 16px;border-radius:26px}
 .trexOverlay .trexPower{top:52px}
 .trexOverlay .trexKeys{margin-top:14px}
}
/* 높이가 낮은 화면 (모바일 가로 등): Trex 창을 화면 전체로 쓰고 머리줄을 줄여 본체가 보이는 높이를 늘린다 */
@media(max-height:500px){
 .trexOverlay{padding:0}
 .trexOverlay .trexShell{width:100vw;height:100vh;height:100dvh;border-radius:0;border:0;grid-template-rows:36px minmax(0,1fr)}
 .trexOverlay .trexTop span{display:none}
 .trexOverlay .trexClose{padding:5px 12px}
}
/* 터치 기기: 하드키를 키워 축소된 본체에서도 누르기 쉽게 (CLAUDE.md 45.4) */
@media(pointer:coarse){
 .trexOverlay .trexKey{width:46px;height:46px;font-size:18px}
 .trexOverlay .tdpad{grid-template-columns:repeat(3,44px);grid-template-rows:repeat(3,36px)}
 .trexOverlay .trexDevBtn,.trexOverlay .trexPVQuick button{min-height:44px}
}