:root{
  --ct-bg:#0f1720; --ct-panel:#182430; --ct-panel2:#1f2e3c; --ct-border:#2b3d4d;
  --ct-text:#dce6ef; --ct-muted:#8299ac; --ct-accent:#4a90d9; --ct-accent2:#2fb6a3;
  --ct-warn:#d9534f; --ct-head:#111c26; --ct-canvas:#0b1118;
  --ct-control-bg:rgba(24,36,48,.9); --ct-hud-bg:rgba(15,23,32,.78); --ct-drop-bg:rgba(10,16,23,.92);
}
html[data-theme="blueprint"]{
  --ct-bg:#071b2d; --ct-panel:#0a2740; --ct-panel2:#0d3452; --ct-border:#235a7c;
  --ct-text:#edf8ff; --ct-muted:#8db9d4; --ct-accent:#58c8ff; --ct-accent2:#74e1bb;
  --ct-warn:#ff7d86; --ct-head:#061525; --ct-canvas:#082744;
  --ct-control-bg:rgba(10,39,64,.92); --ct-hud-bg:rgba(6,24,42,.8); --ct-drop-bg:rgba(5,25,43,.93);
}
html[data-theme="graphite"]{
  --ct-bg:#15171a; --ct-panel:#1d2024; --ct-panel2:#272b30; --ct-border:#41464d;
  --ct-text:#f2f3f4; --ct-muted:#a1a6ad; --ct-accent:#8fc6ff; --ct-accent2:#e0b45a;
  --ct-warn:#e1747d; --ct-head:#111315; --ct-canvas:#202225;
  --ct-control-bg:rgba(39,43,48,.92); --ct-hud-bg:rgba(20,22,25,.82); --ct-drop-bg:rgba(20,22,25,.94);
}
html[data-theme="solar"]{
  --ct-bg:#1a1005; --ct-panel:#29190a; --ct-panel2:#35220f; --ct-border:#67451e;
  --ct-text:#fff4d6; --ct-muted:#c9a76c; --ct-accent:#ffbd45; --ct-accent2:#9fd75b;
  --ct-warn:#ed6d76; --ct-head:#140c04; --ct-canvas:#101a22;
  --ct-control-bg:rgba(53,34,15,.92); --ct-hud-bg:rgba(26,16,5,.82); --ct-drop-bg:rgba(24,14,4,.94);
}
html[data-theme="light"]{
  --ct-bg:#eaf0f6; --ct-panel:#ffffff; --ct-panel2:#f4f7fa; --ct-border:#b8c5d2;
  --ct-text:#162232; --ct-muted:#607286; --ct-accent:#0879b8; --ct-accent2:#287d54;
  --ct-warn:#b83d49; --ct-head:#dce6ee; --ct-canvas:#e7eef3;
  --ct-control-bg:rgba(255,255,255,.92); --ct-hud-bg:rgba(255,255,255,.82); --ct-drop-bg:rgba(231,238,243,.94);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
.ct-body{font-family:'Segoe UI',system-ui,'Malgun Gothic',sans-serif;background:var(--ct-bg);color:var(--ct-text);display:flex;flex-direction:column;height:100vh;height:100dvh;overflow:hidden}

#ct-header{background:var(--ct-head);border-bottom:1px solid var(--ct-border);flex-shrink:0}
.ct-title{display:flex;align-items:center;gap:14px;padding:8px 14px;font-size:13px}
.ct-logo{font-size:16px;color:var(--ct-accent)}
.ct-logo b{color:var(--ct-text)}
#ct-file-name{color:var(--ct-muted)}
#ct-menu-bar{display:flex;align-items:center;gap:2px;padding:0 10px;border-top:1px solid var(--ct-border);background:var(--ct-head)}
.ct-menu-tab{border:0;border-bottom:2px solid transparent;background:transparent;color:var(--ct-muted);padding:7px 13px;cursor:pointer;font-size:12px}
.ct-menu-tab:hover,.ct-menu-tab.active{color:var(--ct-text);border-bottom-color:var(--ct-accent);background:var(--ct-panel2)}
#ct-ribbon{min-height:45px;border-top:1px solid var(--ct-border);background:var(--ct-panel)}
.ct-toolbar{display:none;align-items:center;gap:6px;padding:6px 12px;flex-wrap:wrap}
.ct-toolbar.active{display:flex}
.ct-btn{background:var(--ct-panel2);color:var(--ct-text);border:1px solid var(--ct-border);border-radius:6px;padding:6px 11px;font-size:12px;cursor:pointer;display:inline-flex;align-items:center;gap:6px;text-decoration:none;transition:.15s}
.ct-btn:hover{background:var(--ct-accent);border-color:var(--ct-accent);color:#fff}
.ct-btn.active{background:var(--ct-accent2);border-color:var(--ct-accent2);color:#fff}
.ct-inline-field{display:inline-flex;align-items:center;gap:5px;color:var(--ct-muted);font-size:11px;white-space:nowrap}
.ct-inline-field input{width:58px;background:var(--ct-bg);border:1px solid var(--ct-border);border-radius:4px;color:var(--ct-text);padding:5px 6px}
.ct-btn.ct-link{background:transparent;border-color:transparent;color:var(--ct-muted)}
.ct-btn.ct-link:hover{color:#fff;background:var(--ct-panel2)}
.ct-sep{width:1px;height:20px;background:var(--ct-border);margin:0 4px}

#ct-workspace{flex:1;display:flex;min-height:0}
#ct-left,#ct-right{width:280px;background:var(--ct-panel);border-right:1px solid var(--ct-border);display:flex;flex-direction:column;overflow-y:auto}
#ct-right{border-right:none;border-left:1px solid var(--ct-border)}
.ct-panel{border-bottom:1px solid var(--ct-border)}
.ct-panel-head{padding:9px 12px;font-size:12px;font-weight:600;background:var(--ct-panel2);color:var(--ct-text);display:flex;align-items:center;gap:8px}
.ct-panel-head i{color:var(--ct-accent)}
.ct-badge{margin-left:auto;background:var(--ct-accent);color:#fff;border-radius:10px;padding:1px 8px;font-size:11px}
.ct-panel-body{padding:10px 12px}

.ct-table{width:100%;border-collapse:collapse;font-size:11px}
.ct-table th{text-align:left;color:var(--ct-muted);font-weight:500;padding:4px 3px;border-bottom:1px solid var(--ct-border)}
.ct-table td{padding:3px;border-bottom:1px solid color-mix(in srgb,var(--ct-border) 45%,transparent)}
#ct-deck-rows tr[data-code]{cursor:pointer;transition:background .15s,box-shadow .15s}
#ct-deck-rows tr[data-code]:hover{background:color-mix(in srgb,var(--ct-accent) 12%,transparent)}
#ct-deck-rows tr[data-code].active{background:color-mix(in srgb,var(--ct-accent) 22%,transparent);box-shadow:inset 3px 0 var(--ct-accent)}
.ct-table input,.ct-sel{background:var(--ct-bg);border:1px solid var(--ct-border);color:var(--ct-text);border-radius:4px;padding:3px 5px;font-size:11px;width:100%}
.ct-table input[type=checkbox]{width:auto}
.ct-deck-dot{display:inline-block;width:11px;height:11px;border-radius:3px;margin-right:5px;vertical-align:middle}

.ct-mini{background:var(--ct-panel2);border:1px solid var(--ct-border);color:var(--ct-text);border-radius:5px;padding:6px 9px;font-size:11px;cursor:pointer;margin-top:8px;width:100%;display:inline-flex;align-items:center;justify-content:center;gap:6px;transition:.15s}
.ct-mini:hover{background:var(--ct-accent);border-color:var(--ct-accent);color:#fff}
.ct-mini.ct-warn:hover{background:var(--ct-warn);border-color:var(--ct-warn)}
.ct-mini.active{background:var(--ct-accent2);border-color:var(--ct-accent2);color:#fff}

.ct-cable-list{list-style:none;max-height:280px;overflow-y:auto}
.ct-cable-list li{padding:6px 8px;font-size:11px;border-radius:5px;cursor:pointer;display:flex;align-items:center;gap:7px;margin-bottom:2px}
.ct-cable-list li:hover{background:var(--ct-panel2)}
.ct-cable-list li.active{background:var(--ct-accent);color:#fff}
.ct-cable-list li .ct-cdot{width:9px;height:9px;border-radius:50%;flex-shrink:0}
.ct-cable-list li .ct-cname{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ct-cable-list li .ct-clen{color:var(--ct-muted);font-size:10px}
.ct-cable-list li.active .ct-clen{color:rgba(255,255,255,.8)}
.ct-empty{color:var(--ct-muted);font-style:italic;text-align:center;padding:14px!important;cursor:default!important}

#ct-canvas-wrap{flex:1;position:relative;min-width:0;background:var(--ct-canvas);overflow:hidden}
#ct-canvas{display:block;width:100%;height:100%}
#ct-view-controls{position:absolute;right:14px;top:14px;display:flex;flex-direction:column;gap:6px}
#ct-view-controls button{width:34px;height:34px;border-radius:7px;background:var(--ct-control-bg);border:1px solid var(--ct-border);color:var(--ct-text);cursor:pointer;font-size:13px;transition:.15s}
#ct-view-controls button:hover{background:var(--ct-accent);border-color:var(--ct-accent);color:#fff}
#ct-opacity-ctrl{position:absolute;left:14px;bottom:14px;background:var(--ct-control-bg);border:1px solid var(--ct-border);border-radius:7px;padding:8px 12px;font-size:11px}
#ct-opacity-ctrl input{vertical-align:middle;width:110px}
#ct-hud{position:absolute;left:14px;top:14px;font-size:11px;color:var(--ct-muted);background:var(--ct-hud-bg);padding:6px 10px;border-radius:6px;pointer-events:none;line-height:1.6}
#ct-drop{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;gap:12px;background:var(--ct-drop-bg);color:var(--ct-accent);font-size:16px;border:3px dashed var(--ct-accent);z-index:20}
#ct-drop.show{display:flex}
#ct-drop i{font-size:44px}
.ct-context-menu{position:fixed;z-index:80;min-width:210px;padding:5px;background:var(--ct-panel);border:1px solid var(--ct-border);border-radius:8px;box-shadow:0 12px 30px rgba(0,0,0,.45)}
.ct-context-menu[hidden]{display:none}
.ct-context-menu button{display:flex;width:100%;align-items:center;gap:8px;border:0;background:transparent;color:var(--ct-text);padding:8px 10px;border-radius:5px;text-align:left;cursor:pointer;font-size:12px}
.ct-context-menu button:hover{background:var(--ct-accent);color:#fff}
.ct-context-menu button:disabled{opacity:.38;cursor:not-allowed;background:transparent}
.ct-context-menu button.danger:hover{background:var(--ct-warn)}
.ct-context-menu i{width:15px;text-align:center;color:var(--ct-accent)}
.ct-context-menu button:hover i{color:#fff}

.ct-info{font-size:12px;line-height:1.8;color:var(--ct-text)}
.ct-info .ct-k{color:var(--ct-muted);display:inline-block;min-width:70px}
.ct-info-empty{color:var(--ct-muted);font-style:italic}
.ct-edit-row{display:flex;align-items:center;gap:8px;font-size:11px;margin-bottom:6px}
.ct-edit-row label{color:var(--ct-muted);min-width:56px}
.ct-route-result{margin-top:10px;font-size:11px;line-height:1.7;color:var(--ct-accent2)}
.ct-route-result .ct-hop{color:var(--ct-text)}
.ct-route-path{margin-top:4px;overflow-wrap:anywhere}
.ct-route-error{color:var(--ct-warn)}
.ct-junction{color:#f0ad4e}
.ct-editor-help{color:var(--ct-muted);font-size:11px;line-height:1.55;margin-bottom:8px}
.ct-integration-state{margin-top:9px;padding:6px 8px;border:1px dashed var(--ct-border);border-radius:5px;color:var(--ct-muted);font-size:10px}
.ct-integration-state.connected{border-color:var(--ct-accent2);color:var(--ct-accent2)}

#ct-status{background:var(--ct-head);border-top:1px solid var(--ct-border);display:flex;gap:18px;min-width:0;padding:6px 14px;font-size:11px;color:var(--ct-muted);flex-shrink:0;white-space:nowrap;overflow:hidden}
#ct-status>span{flex:0 0 auto}
#ct-status .grow{flex:1 1 auto;min-width:0}
#ct-st-msg{color:var(--ct-accent2);overflow:hidden;text-overflow:ellipsis}

/* ── 반응형 배치 ──
   ≤1100px: 좌/우 패널 220px 축소 / ≤760px: 패널을 오버레이 드로어로 전환 */
.ct-panel-toggle{display:none;background:var(--ct-panel2);border:1px solid var(--ct-border);color:var(--ct-muted);border-radius:6px;width:32px;height:28px;cursor:pointer;font-size:12px}
.ct-panel-toggle:hover{color:#fff;border-color:var(--ct-accent)}
@media (max-width:1100px){
  #ct-left,#ct-right{width:220px}
}
@media (max-width:760px){
  .ct-panel-toggle{display:inline-flex;align-items:center;justify-content:center}
  #ct-workspace{position:relative;overflow:hidden}
  #ct-workspace.drawer-open::after{content:'';position:absolute;inset:0;z-index:29;background:rgba(0,0,0,.48)}
  #ct-left,#ct-right{position:absolute;top:0;bottom:0;z-index:30;width:min(82vw,280px);transform:translateX(-100%);transition:transform .18s ease;box-shadow:4px 0 18px rgba(0,0,0,.45)}
  #ct-left{left:0}
  #ct-right{right:0;transform:translateX(100%);box-shadow:-4px 0 18px rgba(0,0,0,.45)}
  #ct-left.open,#ct-right.open{transform:translateX(0)}
  #ct-menu-bar{overflow-x:auto}
  #ct-ribbon{min-height:43px}
  .ct-toolbar{overflow-x:auto;flex-wrap:nowrap}
  .ct-btn{white-space:nowrap}
  #ct-file-name{display:none}
  #ct-status{gap:9px;padding-inline:8px}
  #ct-st-view{display:none}
  #ct-view-controls{right:8px;top:8px}
  #ct-hud{left:8px;top:8px;max-width:calc(100% - 62px)}
  #ct-opacity-ctrl{left:8px;bottom:8px;max-width:calc(100% - 16px)}
}
@media (max-height:620px){
  .ct-title{padding-block:5px}
  .ct-menu-tab{padding-block:5px}
  .ct-toolbar{padding-block:4px}
  .ct-btn{padding-block:5px}
}