/* ===================================================================
   HMI (GOT2000) 화면 · 편집기
   =================================================================== */
.hv { position: relative; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: #0b0f14; overflow: hidden; }
.hv-wrap { position: relative; }
.hv-svg { display: block; width: 100%; height: 100%; border-radius: 4px; box-shadow: 0 0 0 4px #1f2937, 0 0 0 6px #111827, 0 8px 24px rgba(0, 0, 0, .45); font-family: var(--sans); }
.hv-obj.touchable { cursor: pointer; }
.hv-obj.touchable:active .hv-body { filter: brightness(1.25); }
.hv-obj.edit { cursor: move; }
.hv-selbox { fill: none; stroke: #38bdf8; stroke-width: 2; stroke-dasharray: 5 3; }
.hv-h { fill: #38bdf8; stroke: #0b1220; stroke-width: 1; cursor: nwse-resize; }
.hv-h[data-hs="n"], .hv-h[data-hs="s"] { cursor: ns-resize; }
.hv-h[data-hs="e"], .hv-h[data-hs="w"] { cursor: ew-resize; }
.hv-h[data-hs="ne"], .hv-h[data-hs="sw"] { cursor: nesw-resize; }

/* 터치 키패드 */
.hv-pad { position: absolute; inset: 0; background: rgba(2, 6, 12, .6); display: flex; align-items: center; justify-content: center; z-index: 20; }
.hv-pad.hidden { display: none; }
.pad-box { background: #111827; border: 1px solid #334155; border-radius: 12px; padding: 12px; width: 240px; box-shadow: 0 20px 50px rgba(0, 0, 0, .5); }
.pad-head { font-size: 12.5px; color: #cbd5e1; font-weight: 700; margin-bottom: 6px; }
.pad-head .muted { color: #64748b; font-weight: 500; }
.pad-in { width: 100%; font: 700 20px var(--mono); text-align: right; padding: 6px 10px; border-radius: 8px; border: 1px solid #334155; background: #0b1220; color: #7ee787; }
.pad-keys { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 8px 0; }
.pad-keys button { padding: 10px 0; font: 700 16px var(--mono); border-radius: 8px; border: 1px solid #334155; background: #1f2937; color: #e5e7eb; cursor: pointer; }
.pad-keys button:hover { border-color: #58a6ff; }
.pad-keys button.wide { grid-column: span 2; }
.pad-act { display: flex; gap: 6px; justify-content: flex-end; }

/* ---------------------------------------------------------------- 강좌 속 HMI 카드 */
.plc-block .pb-hmi { position: relative; height: var(--hmi-h, 320px); background: #0b0f14; border-bottom: 1px solid var(--line); }
.plc-block .pb-tabs { display: flex; gap: 4px; padding: 5px 10px 0; background: var(--card2); border-bottom: 1px solid var(--line); }
.plc-block .pb-tabs button { border: 1px solid transparent; border-bottom: none; background: transparent; color: var(--muted); font-weight: 600; font-size: 12.5px; padding: 4px 12px; border-radius: 8px 8px 0 0; cursor: pointer; }
.plc-block .pb-tabs button.active { background: var(--card); color: var(--fg); border-color: var(--line); margin-bottom: -1px; }

/* ---------------------------------------------------------------- HMI 편집기 화면 */
.hm-layout { display: grid; grid-template-columns: 210px minmax(0, 1fr) 286px; grid-template-rows: auto minmax(160px, 1fr) var(--hm-bottom, 260px); height: 100vh; overflow: hidden; }
.hm-top { grid-column: 1 / 4; display: flex; align-items: center; gap: 6px; padding: 7px 10px; border-bottom: 1px solid var(--line); background: var(--pane); flex-wrap: wrap; }
.hm-top .brand-logo { width: 32px; height: 32px; font-size: 18px; }
.hm-title { font-weight: 700; font-size: 14px; padding: 4px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--card2); min-width: 150px; }
.hm-left { grid-row: 2 / 4; grid-column: 1; border-right: 1px solid var(--line); background: var(--pane); overflow-y: auto; padding: 7px; display: flex; flex-direction: column; gap: 8px; }
.hm-left .bd { padding: 6px 8px; gap: 5px; font-size: 12px; }
.hm-tools button { padding: 5px 6px; font-size: 11.5px; }
.hm-center { grid-row: 2; grid-column: 2; min-width: 0; min-height: 0; position: relative; background: #0b0f14; }
.hm-center .hv { padding: 10px; }
.hm-right { grid-row: 2 / 4; grid-column: 3; border-left: 1px solid var(--line); background: var(--pane); overflow-y: auto; padding: 7px 9px; }
.hm-right .hm-props .row > label { min-width: 92px; font-size: 12px; }
.hm-bottom { grid-row: 3; grid-column: 2; border-top: 1px solid var(--line); background: var(--bg); display: flex; flex-direction: column; min-height: 0; }
.hm-gutter { grid-row: 3; grid-column: 2; height: 5px; margin-top: -5px; cursor: row-resize; z-index: 5; }
.hm-gutter:hover { background: var(--accent); opacity: .6; }
.hm-sec { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--card); }
.hm-sec > h4 { margin: 0; padding: 6px 10px; font-size: 12px; font-weight: 800; color: var(--muted); background: var(--card2); border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 6px; }
.hm-sec > h4 .spacer { flex: 1; }
.hm-sec .bd { padding: 7px 9px; display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; }
.hm-screens { display: flex; flex-direction: column; gap: 3px; }
.hm-screens button { display: flex; align-items: center; gap: 6px; text-align: left; padding: 5px 8px; border: 1px solid var(--line); border-radius: 7px; background: var(--card); cursor: pointer; font-size: 12.5px; }
.hm-screens button.active { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); font-weight: 700; }
.hm-screens button .no { font: 700 11px var(--mono); color: var(--muted); }
.hm-tools { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px; }
.hm-tools button { display: flex; align-items: center; gap: 5px; padding: 6px 7px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); cursor: pointer; font-size: 12px; text-align: left; }
.hm-tools button:hover { border-color: var(--accent); }
.hm-tools button.on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.hm-props { display: flex; flex-direction: column; gap: 7px; }
.hm-props .row { display: flex; align-items: center; gap: 6px; font-size: 12.5px; }
.hm-props .row > label { min-width: 104px; color: var(--muted); font-weight: 600; }
.hm-props input[type=text], .hm-props input[type=number], .hm-props select { flex: 1; min-width: 0; padding: 3px 6px; border: 1px solid var(--line); border-radius: 6px; background: var(--card2); color: var(--fg); font: 12.5px var(--mono); }
.hm-props .colors { display: flex; flex-wrap: wrap; gap: 3px; flex: 1; }
.hm-props .colors i { width: 18px; height: 18px; border-radius: 4px; border: 1px solid var(--line); cursor: pointer; display: inline-block; }
.hm-props .colors i.on { outline: 2px solid var(--accent); outline-offset: 1px; }
.hm-props .alarm-item { display: flex; gap: 4px; align-items: center; }
.hm-props .hint { font-size: 11.5px; color: var(--muted); }
.hm-empty { color: var(--muted); font-size: 12.5px; padding: 10px 2px; }
.hm-bottom .tabs { display: flex; gap: 2px; padding: 4px 8px 0; background: var(--pane); border-bottom: 1px solid var(--line); }
.hm-bottom .tabs button { border: 1px solid transparent; border-bottom: none; background: transparent; color: var(--muted); font-weight: 600; font-size: 12.5px; padding: 4px 10px; border-radius: 8px 8px 0 0; cursor: pointer; }
.hm-bottom .tabs button.active { background: var(--bg); color: var(--fg); border-color: var(--line); margin-bottom: -1px; }
.hm-bottom .panes { flex: 1; min-height: 0; position: relative; }
.hm-bottom .panes > div { position: absolute; inset: 0; overflow: auto; }
.hm-bottom .panes > div.hidden { display: none; }
.hm-status { font-size: 12px; color: var(--muted); }
.hm-status.bad { color: var(--danger); }
.hm-status.ok { color: var(--ok); }
@media (max-width: 1100px) {
  .hm-layout { grid-template-columns: 180px minmax(0, 1fr) 240px; }
}