/* 두 화면에 함께 쓰는 틀: 왼쪽에서 밀려 나오는 연결 상태 칸 */
#links-tab{position:fixed;left:0;top:50%;z-index:60;transform:translateY(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;
  padding:14px 9px;border:1px solid var(--line,#22304D);border-left:0;border-radius:0 12px 12px 0;background:var(--panel,#0F1729);color:var(--text,#EAF0FB);
  font:700 12px 'Noto Sans KR',sans-serif;cursor:pointer;transition:left .28s cubic-bezier(.2,.7,.2,1)}
#links-tab span{writing-mode:vertical-rl;letter-spacing:.12em}
#links-tab i,#links .dot{width:9px;height:9px;border-radius:50%;background:var(--muted,#9BAAC6);flex:none}
#links-tab i.ok,#links .dot.ok{background:var(--accent,#35D6B8)}
#links-tab i.warn,#links .dot.warn{background:var(--warn,#F4B94C)}
#links-tab:focus-visible,#links button:focus-visible{outline:3px solid var(--accent,#35D6B8);outline-offset:2px}
#links{position:fixed;left:0;top:0;bottom:0;z-index:59;width:300px;max-width:86vw;box-sizing:border-box;padding:28px 22px;overflow:auto;
  background:var(--panel,#0F1729);color:var(--text,#EAF0FB);border-right:1px solid var(--line,#22304D);box-shadow:24px 0 48px rgba(0,0,0,.28);
  font-family:'Noto Sans KR',sans-serif;transform:translateX(-102%);visibility:hidden;transition:transform .28s cubic-bezier(.2,.7,.2,1),visibility 0s .28s}
body.links-open #links{transform:none;visibility:visible;transition:transform .28s cubic-bezier(.2,.7,.2,1)}
body.links-open #links-tab{left:min(300px,86vw)}
#links h2{margin:0 0 4px;font-size:16px;font-weight:900}
#links .note{margin:0 0 18px;font-size:12px;line-height:1.6;color:var(--muted,#9BAAC6)}
#links ul{list-style:none;margin:0;padding:0}
#links li{display:grid;grid-template-columns:9px minmax(0,1fr) auto;align-items:center;column-gap:12px;padding:13px 0;border-bottom:1px solid var(--line,#22304D)}
#links .name{font-size:14px;font-weight:700}
#links .sub{grid-column:2 / 4;margin-top:3px;font-size:12px;color:var(--muted,#9BAAC6)}
#links .state{font-size:12px;font-weight:700;white-space:nowrap}
#links .state.ok{color:var(--accent,#35D6B8)}
#links .state.warn{color:var(--warn,#F4B94C)}
#links .state.plan{color:var(--muted,#9BAAC6)}
@media (prefers-reduced-motion:reduce){#links,#links-tab{transition:none}}