/* 매니지드ON — 클라우드 관리 화면 데모 (demo.js 짝). 모든 클래스 nd- 접두사, 변수도 .nd-root 안에서만 */
.nd-root {
  --nd-bg: #f4f6f4; --nd-card: #fff; --nd-line: #e2e6e2; --nd-text: #333; --nd-muted: #7d8389;
  --nd-g: #5aa831; --nd-gd: #3d8a1c; --nd-gl: #eef6e8; --nd-link: #1795d3; --nd-red: #e0393e; --nd-redl: #fff0f0;
  --nd-amber: #f2a516; --nd-blue: #3d8fe0; --nd-th: #646668;
  position: relative; display: flex; flex-direction: column; height: 100%; min-height: 600px;
  background: var(--nd-bg); color: var(--nd-text); font-family: inherit; font-size: 14px; line-height: 1.4;
  border: 1px solid var(--nd-line); border-radius: 10px; overflow: hidden; text-align: left;
  -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: 100%; word-break: keep-all; overflow-wrap: break-word;
}
.nd-root *, .nd-root *::before, .nd-root *::after { box-sizing: border-box; }
/* :where 로 특이도를 낮춰 아래 클래스 규칙이 이기게 한다 (호스트의 전역 button 규칙보다는 높음) */
.nd-root :where(button) { font: inherit; color: inherit; background: none; border: 0; margin: 0; padding: 0; cursor: pointer; text-align: inherit; line-height: inherit; box-shadow: none; text-transform: none; letter-spacing: inherit; border-radius: 0; width: auto; height: auto; }
.nd-root :where(button):focus-visible, .nd-root [tabindex]:focus-visible { outline: 2px solid var(--nd-link); outline-offset: 2px; }
.nd-root h2, .nd-root h4, .nd-root p, .nd-root ul, .nd-root dl, .nd-root dd { margin: 0; padding: 0; font: inherit; }
.nd-root ul { list-style: none; }
.nd-root table { border-collapse: collapse; border-spacing: 0; width: 100%; margin: 0; }
.nd-root input { font: inherit; }
.nd-ic { width: 20px; height: 20px; flex: none; display: inline-block; vertical-align: middle; }
.nd-muted { color: var(--nd-muted); }
.nd-red { color: var(--nd-red); font-weight: 600; }
.nd-mt { margin-top: 12px; }
.nd-empty { color: var(--nd-muted); text-align: center; padding: 18px !important; }

/* ── 상단 바 ── */
.nd-top { display: flex; align-items: center; gap: 10px; height: 58px; padding: 0 14px 0 6px; background: #fff; border-bottom: 1px solid var(--nd-line); flex: none; }
.nd-ham { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 6px; color: #555; flex: none; }
.nd-ham:hover { background: #f2f4f2; }
.nd-logo { display: flex; flex-direction: column; line-height: 1.08; margin-right: 12px; color: #5d6166; white-space: nowrap; flex: none; }
.nd-logo-a { font-size: 17px; letter-spacing: .2px; }
.nd-logo-b { font-size: 13px; }
.nd-orgs { display: flex; align-items: center; gap: 6px; min-width: 0; flex: 1; font-size: 13px; }
.nd-orgl { font-weight: 600; white-space: nowrap; }
.nd-dd { display: inline-block; height: 32px; line-height: 30px; padding: 0 26px 0 9px; border: 1px solid #cfd3d6; border-radius: 3px; max-width: 230px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; position: relative; background: #fff; font-size: 12.5px; color: #333; vertical-align: middle; }
.nd-dd::after { content: ""; position: absolute; right: 9px; top: 13px; border: 4.5px solid transparent; border-top-color: #444; }
.nd-chev { color: #666; font-size: 20px; margin: 0 2px; }
.nd-icos { display: flex; align-items: center; gap: 15px; margin-left: auto; flex: none; }
.nd-icos i { width: 23px; height: 23px; border: 1.8px solid #4a4d50; border-radius: 50%; display: block; }
.nd-icos b { width: 32px; height: 32px; border-radius: 50%; background: #3b3e41; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; }
.nd-strip { display: flex; align-items: center; gap: 10px; padding: 6px 14px; background: #fff; border-bottom: 1px solid var(--nd-line); font-size: 12px; color: var(--nd-muted); flex: none; flex-wrap: wrap; }
.nd-badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; background: #fff6dc; border: 1px solid #f0d78e; color: #8a5c00; font-weight: 600; font-size: 12px; white-space: nowrap; }
.nd-badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--nd-amber); }
.nd-cisco { padding: 8px 14px; background: #eaf4fb; border-bottom: 1px solid #cfe3f2; border-left: 4px solid var(--nd-link); font-size: 13px; color: #1d4f73; flex: none; }

/* ── 본문 틀 ── */
.nd-body { display: flex; flex: 1; min-height: 0; }
.nd-side { width: 204px; flex: none; background: #fff; border-right: 1px solid var(--nd-line); padding: 8px 0; overflow-y: auto; }
.nd-side-g { font-size: 11px; color: #8a8f94; padding: 6px 16px 4px; }
.nd-nav { display: flex !important; align-items: center; gap: 10px; width: 100% !important; min-height: 44px; padding: 0 14px !important; font-size: 14px; color: #3a3d40; border-left: 3px solid transparent !important; white-space: nowrap; }
.nd-nav span { overflow: hidden; text-overflow: ellipsis; }
.nd-nav:hover { background: #f6f8f6; }
.nd-nav.nd-on { color: var(--nd-gd); font-weight: 600; background: var(--nd-gl); border-left-color: var(--nd-g) !important; }
.nd-nav-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--nd-amber); margin-left: auto; flex: none; }
.nd-mini .nd-side { width: 62px; }
.nd-mini .nd-side-g, .nd-mini .nd-nav span { display: none; }
.nd-mini .nd-nav { justify-content: center; padding: 0 !important; }
.nd-mini .nd-nav-dot { position: absolute; margin: -14px 0 0 18px; }
.nd-main { flex: 1; min-width: 0; overflow: auto; padding: 12px 16px 28px; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }

/* ── 공통 부품 ── */
.nd-ph { margin-bottom: 10px; }
.nd-crumb { font-size: 11.5px; color: var(--nd-gd); }
.nd-ph-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 2px; min-height: 30px; }
.nd-h { font-size: 17px !important; font-weight: 600 !important; color: #333; }
.nd-cap { font-size: 12.5px; color: var(--nd-muted); }
.nd-ph-r { margin-left: auto; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.nd-a { color: var(--nd-link); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
button.nd-a { text-decoration: underline; color: var(--nd-link); }
.nd-btn { display: inline-flex !important; align-items: center; justify-content: center; gap: 6px; min-height: 44px; min-width: 44px; padding: 0 14px !important; border-radius: 4px !important; border: 1px solid var(--nd-g) !important; background: #fff !important; color: var(--nd-gd) !important; font-size: 13px; font-weight: 600; white-space: nowrap; }
.nd-btn .nd-ic { width: 17px; height: 17px; }
.nd-btn-p { background: var(--nd-g) !important; color: #fff !important; }
.nd-btn-ghost { border-color: #cfd3d6 !important; color: #555 !important; }
.nd-back { margin-bottom: 6px; padding-left: 8px !important; }
.nd-seg { display: inline-flex; border: 1px solid var(--nd-g); border-radius: 4px; overflow: hidden; background: #fff; }
.nd-seg button { min-height: 44px; padding: 0 13px !important; font-size: 13px; color: var(--nd-gd); font-weight: 600; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
.nd-seg button + button { border-left: 1px solid var(--nd-g) !important; }
.nd-seg button.nd-on { background: var(--nd-g); color: #fff; }
.nd-badge-n { display: inline-flex; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--nd-red); color: #fff; font-size: 11.5px; align-items: center; justify-content: center; }
.nd-card { background: #fff; border: 1px solid var(--nd-line); border-radius: 4px; padding: 12px 14px; min-width: 0; }
.nd-ct { display: flex; align-items: center; gap: 7px; font-size: 13.5px; color: #333; margin-bottom: 8px; min-height: 24px; }
.nd-ct b { font-weight: 600; }
.nd-ct .nd-ic { width: 18px; height: 18px; color: #555; }
.nd-24h { margin-left: auto; font-style: normal; font-size: 9.5px; border: 1.5px solid #9aa0a6; border-radius: 50%; width: 25px; height: 25px; display: inline-flex; align-items: center; justify-content: center; color: #666; flex: none; }
.nd-pill { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 22px; padding: 0 8px; border: 1.5px solid #555; border-radius: 999px; font-size: 12px; }
.nd-ttool { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; font-size: 13px; }
.nd-ttool-r { margin-left: auto; }
.nd-tag { font-style: normal; font-size: 10.5px; padding: 1px 6px; border-radius: 3px; background: #fde8e8; color: #c62828; margin-left: 4px; font-weight: 600; vertical-align: 1px; }
.nd-tag-g { background: #e5f1fc; color: #1d6fb8; }
.nd-sq { display: inline-block; width: 15px; height: 15px; border-radius: 2px; vertical-align: middle; }
.nd-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: #4caf2a; }
.nd-foot { font-size: 12px; color: var(--nd-muted); margin-top: 8px !important; }
.nd-note { margin-top: 12px; padding: 10px 14px; border-radius: 4px; font-size: 13px; border: 1px solid; }
.nd-note-warn { background: #fff7e6; border-color: #f3d38a; color: #6b4a00; }
.nd-note-ok { background: var(--nd-gl); border-color: #bfdcaa; color: #2c6512; }
.nd-kv { display: grid; grid-template-columns: 82px minmax(0, 1fr); gap: 5px 10px; font-size: 13px; }
.nd-kv dt { color: var(--nd-muted); }
.nd-kv dd { min-width: 0; overflow-wrap: anywhere; }
.nd-chart { width: 100%; height: auto; display: block; }
.nd-gl { stroke: #d6dadd; stroke-dasharray: 3 3; }
.nd-axl { stroke: #9ea4a9; }
.nd-ax { font-size: 11px; fill: #666; }
.nd-donut { display: block; flex: none; max-width: 100%; height: auto; }
.nd-dc { font-size: 17px; fill: #333; font-weight: 500; }

/* ── 표 ── */
.nd-tw { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.nd-tbl th { background: var(--nd-th); color: #fff; font-weight: 500; font-size: 12.5px; text-align: left; padding: 8px 10px; white-space: nowrap; border: 0; }
.nd-tbl td { padding: 3px 10px; height: 44px; font-size: 13px; border: 0; border-bottom: 1px solid #eceeed; white-space: nowrap; vertical-align: middle; background: #fff; }
.nd-tbl tbody tr:nth-child(even) td { background: #f7f8f7; }
.nd-tbl tr.nd-tr { cursor: pointer; }
.nd-tbl tr.nd-tr:hover td { background: #eef6e8; }
.nd-tbl td .nd-ic { width: 16px; height: 16px; color: #777; margin-right: 2px; }
.nd-ell { max-width: 240px; overflow: hidden; text-overflow: ellipsis; }
.nd-st { width: 18px; height: 18px; display: block; }
.nd-act { display: inline-flex !important; align-items: center; gap: 4px; min-height: 44px; padding: 0 8px !important; color: var(--nd-gd); font-size: 13px; }
.nd-act .nd-ic { width: 16px; height: 16px; color: var(--nd-gd); }
.nd-act:hover span { text-decoration: underline; }
.nd-limv { font-weight: 600; color: #b26a00; font-size: 12.5px; }
.nd-tbl tr.nd-tr-blk td { background: #fff3f3 !important; transition: opacity .3s, background .2s; }
.nd-tbl tr.nd-tr-out td { opacity: .25; }
.nd-search { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 10px; border: 1px solid #cfd3d6; border-radius: 3px; background: #fff; color: #777; }
.nd-search input { border: 0; outline: 0; width: 150px; height: 36px; background: transparent; color: #333; font-size: 13px; padding: 0; }
.nd-search .nd-ic { width: 16px; height: 16px; }

/* ── 1) Dashboard ── */
.nd-chain { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); margin-top: 4px; }
.nd-cn { position: relative; display: flex; flex-direction: column; align-items: center; padding: 0 9px; min-width: 0; }
.nd-cn + .nd-cn::before { content: ""; position: absolute; top: 36px; left: -50%; width: 100%; height: 1.5px; background: #c3c8cc; }
.nd-cc { position: relative; z-index: 1; width: 72px !important; height: 72px !important; border-radius: 50% !important; border: 2px solid var(--nd-g) !important; background: #fff !important; display: flex !important; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-size: 11.5px; color: #333; line-height: 1.15; text-align: center !important; flex: none; }
.nd-cc .nd-ic { width: 24px; height: 24px; color: #444; }
button.nd-cc:hover { background: var(--nd-gl) !important; }
.nd-cn-off .nd-cc { border-color: #d3d7da !important; color: #888; }
.nd-cn-off .nd-cc .nd-ic { color: #999; }
.nd-cn-inet .nd-cc { border-color: transparent !important; }
.nd-cs { width: 100%; margin-top: 6px; }
.nd-csr { display: flex; justify-content: space-between; align-items: baseline; gap: 4px; padding: 3px 2px; border-bottom: 1px solid #d9dde0; font-size: 12px; color: #555; }
.nd-csr b { font-size: 17px; font-weight: 500; color: #222; white-space: nowrap; }
.nd-csr small { font-size: 11px; color: #555; font-weight: 400; }
.nd-cnote { font-size: 11.5px; color: #666; text-align: center; margin-top: 10px; line-height: 1.3; }
.nd-dg2 { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 12px; margin-top: 12px; }
.nd-appw { display: flex; align-items: center; gap: 16px; }
.nd-leg { display: grid; grid-template-rows: repeat(5, auto); grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 1px 16px; flex: 1; min-width: 0; }
.nd-li { display: flex; align-items: center; gap: 6px; font-size: 12.5px; min-height: 25px; min-width: 0; }
.nd-li i { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.nd-li span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nd-li b { font-weight: 400; color: #444; white-space: nowrap; font-size: 12px; }
.nd-bars { display: flex; flex-direction: column; }
.nd-bar { display: grid; grid-template-columns: minmax(0, 132px) minmax(0, 1fr) 62px; align-items: center; gap: 8px; min-height: 30px; font-size: 12.5px; width: 100%; position: relative; text-align: left; }
.nd-bar::after { content: ""; position: absolute; left: 0; right: 0; top: -7px; bottom: -7px; } /* 터치 영역 44px (줄 높이는 그대로) */
.nd-bar:hover .nd-bar-n { color: #0b6fa4; }
.nd-bar-n { text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nd-bart { height: 11px; background: #eceeee; position: relative; }
.nd-bart i { position: absolute; left: 0; top: 0; bottom: 0; }
.nd-tiles { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.nd-tile { background: #fff; border: 1px solid var(--nd-line); border-radius: 4px; padding: 9px 10px 10px; min-height: 140px; display: flex; flex-direction: column; min-width: 0; }
.nd-tile-h { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #333; line-height: 1.15; min-height: 30px; }
.nd-tile-h .nd-ic { width: 18px; height: 18px; color: #555; }
.nd-tile-b { flex: 1; display: flex; flex-direction: column; justify-content: space-evenly; align-items: center; text-align: center; gap: 4px; }
.nd-tv { font-size: 25px; font-weight: 300; color: #222; line-height: 1.05; white-space: nowrap; }
.nd-tv small { font-size: 13px; color: #444; }
.nd-tv em { font-style: normal; font-size: 18px; }
.nd-tv-xl { font-size: 32px; }
.nd-tl { font-size: 11.5px; color: #555; margin-top: 1px; }
.nd-7d { font-style: normal; font-size: 9px; border: 1.5px solid #8cc865; color: #5c9a35; border-radius: 50%; width: 21px; height: 21px; display: inline-flex; align-items: center; justify-content: center; margin-left: 2px; }
.nd-wan { display: flex; align-items: center; gap: 4px; }
.nd-wan > div { display: flex; flex-direction: column; gap: 6px; }
.nd-wan-c { font-size: 22px; color: #555; }

/* ── 2) Topology ── */
.nd-tleg { display: inline-flex; gap: 12px; font-size: 12px; color: #555; margin-left: auto; flex-wrap: wrap; }
.nd-tleg i { display: inline-block; width: 22px; height: 0; border-top: 2px solid; vertical-align: middle; margin-right: 5px; }
.nd-lg-wd { border-color: #8cc865 !important; }
.nd-lg-poe { border-color: #f1c84b !important; }
.nd-lg-wl { border-top-style: dashed !important; border-color: #4a9be3 !important; }
.nd-tscroll { position: relative; overflow-x: auto; background: #fbfcfb; border: 1px solid var(--nd-line); border-radius: 4px; -webkit-overflow-scrolling: touch; }
.nd-topo { display: block; }
.nd-topo text { font-family: inherit; }
.nd-tn { cursor: pointer; outline: none; }
.nd-tn:focus-visible .nd-tn-hl { stroke: var(--nd-link); stroke-width: 2; }
.nd-tn:hover .nd-tn-hl { fill: #f1f6ee; fill-opacity: 1; }
.nd-tn.nd-sel .nd-tn-hl { fill: #e9f5e0; fill-opacity: 1; stroke: var(--nd-g); stroke-width: 1.5; }
.nd-e { fill: none; }
.nd-e-wd { stroke: #9ccc76; stroke-width: 1.6; }
.nd-e-poe { stroke: #f1c84b; stroke-width: 1.8; }
.nd-e-wl { stroke: #4a9be3; stroke-width: 1.4; stroke-dasharray: 4 3; }
.nd-e-in { stroke: #b5b9bd; stroke-width: 1.6; }
.nd-tl1 { font-size: 10.5px; fill: #333; }
.nd-tl2 { font-size: 9.5px; fill: #8a9096; }
.nd-tcard { position: absolute; z-index: 3; width: 256px; background: #fff; border: 1px solid #d5dbd5; border-radius: 6px; box-shadow: 0 8px 24px rgba(0, 0, 0, .14); padding: 10px 12px 12px; font-size: 12.5px; animation: nd-pop .14s ease-out; }
.nd-tcard-h { display: flex; align-items: flex-start; gap: 6px; margin-bottom: 8px; }
.nd-tcard-h > div { flex: 1; min-width: 0; padding-top: 4px; }
.nd-tcard-h b { display: block; font-size: 14px; overflow-wrap: anywhere; }
.nd-tcard-h small { display: block; color: var(--nd-muted); font-size: 12px; }
.nd-tcard .nd-kv { grid-template-columns: 70px minmax(0, 1fr); font-size: 12.5px; }
.nd-tcard-a { margin-top: 10px; display: flex; justify-content: flex-end; }
.nd-x { width: 44px; height: 44px; margin: -8px -8px 0 0 !important; display: flex !important; align-items: center; justify-content: center; color: #666; border-radius: 6px !important; flex: none; }
.nd-x .nd-ic { width: 18px; height: 18px; }
.nd-on-t { color: #3d8a1c; font-weight: 600; }
@keyframes nd-pop { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* ── 3) Clients ── */
.nd-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.nd-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; background: #fff; border: 1px solid var(--nd-line); border-radius: 4px; font-size: 12.5px; }
.nd-chip small { color: var(--nd-muted); font-size: 11.5px; }
.nd-chip .nd-ic { width: 14px; height: 14px; }
.nd-path { display: flex; align-items: center; overflow-x: auto; padding: 14px 12px 10px; border: 1px solid #e6e9e6; border-radius: 4px; background: #fff; -webkit-overflow-scrolling: touch; }
.nd-pn { display: flex; flex-direction: column; align-items: center; gap: 5px; min-width: 76px; max-width: 130px; font-size: 12px; flex: none; text-align: center; }
.nd-pn span, .nd-pn button { overflow-wrap: anywhere; min-height: 22px; }
.nd-pn button.nd-a { font-size: 12px; text-align: center !important; }
.nd-pl { flex: 1 0 64px; display: flex; align-items: center; gap: 6px; font-size: 12px; color: #444; padding: 0 6px; margin-bottom: 26px; min-width: 64px; }
.nd-pl i { flex: 1; height: 0; border-top: 2px solid #8cc865; min-width: 24px; }
.nd-pl-wl i { border-top: 2.5px dotted #8cc865; }
.nd-cd2 { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 16px; align-items: center; }
.nd-cdl { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.nd-cdt { font-size: 13px; color: #333; }

/* ── 4) Applications ── */
.nd-tbl-apps td.nd-c-act { padding-top: 0; padding-bottom: 0; }
.nd-c-st { width: 56px; }

/* ── 5) Wi-Fi 분리 ── */
.nd-stat { font-size: 13px; font-weight: 700; padding: 6px 12px; border-radius: 999px; }
.nd-stat-ok { background: var(--nd-gl); color: var(--nd-gd); }
.nd-stat-bad { background: var(--nd-redl); color: var(--nd-red); animation: nd-blink 1.6s ease-in-out infinite; }
@keyframes nd-blink { 50% { opacity: .55; } }
.nd-wf-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.nd-wc { border-top: 4px solid var(--nd-g); }
.nd-wc-g { border-top-color: var(--nd-blue); }
.nd-wc-none { border-style: dashed; border-top-style: solid; }
.nd-wc-top { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.nd-wtag { font-size: 12px; font-weight: 700; padding: 2px 9px; border-radius: 3px; background: var(--nd-gl); color: var(--nd-gd); }
.nd-wtag-g { background: #e5f1fc; color: #1d6fb8; }
.nd-wc-name { font-size: 18px; font-weight: 700; margin: 6px 0 8px; overflow-wrap: anywhere; }
.nd-wc-off { font-size: 13px; color: var(--nd-red); background: var(--nd-redl); border-radius: 4px; padding: 10px 12px; margin-top: 4px; }
.nd-wf-main { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin-bottom: 12px; }
.nd-wfd { width: 100%; height: auto; display: block; }
.nd-wfd text { font-family: inherit; }
.nd-wf-t { font-size: 14px; fill: #333; font-weight: 600; }
.nd-wf-s { font-size: 12px; fill: #7d8389; }
.nd-wf-lb { font-size: 13px; font-weight: 700; }
.nd-wf-lb-ok { fill: #3d8a1c; }
.nd-wf-lb-x { fill: #e0393e; }
.nd-wf-lb-r { fill: #e0393e; }
.nd-wf-me { fill: #e8f2fb; }
.nd-wf-og { fill: #f0f3f5; stroke: #d0d6da; stroke-width: 1.5; transition: fill .3s, stroke .3s; }
.nd-wf-box { fill: #f7f8f9; stroke: #d0d6da; stroke-width: 1.5; transition: fill .3s, stroke .3s; }
.nd-wf-g0 .nd-wf-box { fill: #fff1f1; stroke: #e0393e; stroke-width: 2.5; }
.nd-wf-i0 .nd-wf-og { fill: #fff1f1; stroke: #e0393e; stroke-width: 2.5; }
.nd-wf .nd-wf-safe { opacity: 1; transition: opacity .3s; }
.nd-wf .nd-wf-risk { opacity: 0; transition: opacity .3s; }
.nd-wf-g0 .nd-wf-corp .nd-wf-risk, .nd-wf-i0 .nd-wf-iso .nd-wf-risk { opacity: 1; }
.nd-wf-g0 .nd-wf-corp .nd-wf-safe, .nd-wf-i0 .nd-wf-iso .nd-wf-safe { opacity: 0; }
.nd-wf-flow { stroke-dasharray: 11 7; animation: nd-flow 1s linear infinite; }
@keyframes nd-flow { to { stroke-dashoffset: -18; } }
.nd-wf:not(.nd-wf-g0) .nd-when-g0, .nd-wf.nd-wf-g0 .nd-when-g1,
.nd-wf:not(.nd-wf-i0) .nd-when-i0, .nd-wf.nd-wf-i0 .nd-when-i1,
.nd-wf.nd-wf-g0 .nd-when-safe, .nd-wf.nd-wf-i0 .nd-when-safe,
.nd-wf:not(.nd-wf-g0):not(.nd-wf-i0) .nd-when-risk { display: none !important; }
.nd-tgs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)) minmax(0, 1.15fr); gap: 10px; align-items: stretch; }
.nd-tg { display: flex !important; align-items: center; gap: 12px; width: 100% !important; min-height: 60px; padding: 8px 12px !important; border: 1px solid #dfe3df !important; border-radius: 6px !important; background: #fff !important; text-align: left !important; }
.nd-tg-sw { width: 48px; height: 28px; border-radius: 14px; background: #c3c8cc; position: relative; flex: none; transition: background .2s; }
.nd-tg-sw::after { content: ""; position: absolute; left: 3px; top: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); transition: transform .2s; }
.nd-tg[aria-checked="true"] .nd-tg-sw { background: var(--nd-g); }
.nd-tg[aria-checked="true"] .nd-tg-sw::after { transform: translateX(20px); }
.nd-tg[aria-checked="false"] { border-color: #f1b3b5 !important; background: #fffafa !important; }
.nd-tg-t { min-width: 0; }
.nd-tg-t b { display: block; font-size: 14px; font-weight: 600; }
.nd-tg-t small { display: block; font-size: 12px; color: var(--nd-muted); }
.nd-warns { display: flex; flex-direction: column; gap: 8px; }
.nd-warn { padding: 10px 12px 10px 38px; border-radius: 6px; background: var(--nd-redl); border: 1px solid #f3c2c3; color: #a61d22; position: relative; animation: nd-pop .2s ease-out; }
.nd-warn::before { content: "!"; position: absolute; left: 11px; top: 11px; width: 18px; height: 18px; border-radius: 50%; background: var(--nd-red); color: #fff; font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.nd-warn b { display: block; font-size: 14px; }
.nd-warn small { display: block; font-size: 12px; color: #8a3a3d; margin-top: 2px; }
.nd-warn-ok { background: var(--nd-gl); border-color: #c4e0b0; color: #2c6512; }
.nd-warn-ok::before { content: "✓"; background: var(--nd-g); }
.nd-warn-ok small { color: #4f7a3a; }

/* ── 6) Monitor ── */
.nd-mg2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; margin-top: 12px; }

/* ── 7) SecuReporter ── */
.nd-sr-h { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; font-size: 13px; }
.nd-sr-logo { display: inline-flex; align-items: center; gap: 6px; color: #1d6fb8; font-size: 17px; margin-right: 8px; }
.nd-sr-logo .nd-ic { width: 24px; height: 24px; }
.nd-sr-logo b { color: #333; font-weight: 600; }
.nd-sr-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 2fr); gap: 12px; }
.nd-sr-t { font-size: 13.5px; font-weight: 600; margin: 0 0 6px; display: flex; align-items: center; gap: 8px; }
.nd-sr-box { display: flex; align-items: center; gap: 12px; min-height: 62px; font-size: 13px; }
.nd-sr-big { font-size: 30px; font-weight: 600; }
.nd-st-l { width: 26px; height: 26px; }
.nd-sr-sum { border-color: #f1d77b; background: #fffdf3; }
.nd-sg { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); gap: 12px; margin-top: 14px; }
.nd-dd-s { height: 30px; line-height: 28px; font-weight: 400; margin-left: auto; }
.nd-ind { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid #dfe3df; border-radius: 4px; overflow: hidden; background: #fff; }
.nd-indc { border-right: 1px solid #e6e9e6; border-bottom: 1px solid #e6e9e6; text-align: center; min-height: 116px; display: flex; flex-direction: column; min-width: 0; }
.nd-indc:nth-child(4n) { border-right: 0; }
.nd-indc:nth-child(n+5) { border-bottom: 0; }
.nd-indc h4 { background: #f1f2f3; font-size: 11.5px !important; font-weight: 600 !important; padding: 8px 4px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nd-indc b { font-size: 28px; font-weight: 600; margin-top: auto; padding-top: 8px; }
.nd-indc small { font-size: 11px; color: #888; padding: 2px 4px 10px; min-height: 24px; }
.nd-indc-e { background: #fafbfa; }
.nd-sectabs { display: flex; gap: 2px; overflow-x: auto; margin: -4px -4px 6px; border-bottom: 1px solid #e3e6e3; scrollbar-width: none; }
.nd-sectabs button { min-height: 44px; padding: 0 12px !important; font-size: 12.5px; color: #555; white-space: nowrap; border-bottom: 2px solid transparent !important; }
.nd-sectabs button.nd-on { color: #222; font-weight: 600; border-bottom-color: #333 !important; }
.nd-sr-map { padding: 10px; }
.nd-map { position: relative; background: #c6d4db; border-radius: 4px; overflow: hidden; }
.nd-map svg { display: block; width: 100%; height: auto; }
.nd-mapz { position: absolute; left: 10px; top: 10px; display: flex; flex-direction: column; gap: 3px; }
.nd-mapz span { width: 20px; height: 20px; background: #fff; border-radius: 3px; display: flex; align-items: center; justify-content: center; font-size: 13px; color: #555; box-shadow: 0 1px 2px rgba(0, 0, 0, .15); }
.nd-mapleg { position: absolute; right: 8px; bottom: 8px; background: rgba(255, 255, 255, .9); border-radius: 4px; padding: 6px 9px; font-size: 11px; display: flex; flex-direction: column; gap: 2px; }
.nd-mapleg i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; vertical-align: 0; }
.nd-sr-ot { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0; margin-top: 10px; border: 1px solid #e3e6e3; border-radius: 4px; }
.nd-sr-ot > div { padding: 0 12px 8px; min-width: 0; }
.nd-sr-ot > div + div { border-left: 1px solid #e3e6e3; }
.nd-sr-ot h4 { font-size: 13px !important; font-weight: 600 !important; background: #f1f2f3; margin: 0 -12px 6px !important; padding: 9px 12px !important; }
.nd-cl li { display: flex; align-items: center; gap: 0; min-height: 30px; font-size: 12.5px; }
.nd-cl li span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nd-cl li b { font-weight: 400; color: #555; white-space: nowrap; font-size: 12px; }
.nd-flag { display: inline-block; width: 20px; height: 14px; border: 1px solid rgba(0, 0, 0, .15); border-radius: 2px; margin-right: 9px; flex: none; }
.nd-flag-x { background: #dfe2e5; }

/* ── 팝업 (Limit) ── */
.nd-pop { position: absolute; z-index: 20; width: 240px; background: #fff; border: 1px solid #d5dbd5; border-radius: 6px; box-shadow: 0 10px 28px rgba(0, 0, 0, .18); padding: 10px; animation: nd-pop .14s ease-out; }
.nd-pop-t { font-size: 13px; font-weight: 600; margin-bottom: 8px; }
.nd-pop-b { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.nd-pop-b .nd-btn { padding: 0 4px !important; }
.nd-pop-f { display: flex; justify-content: flex-end; gap: 6px; margin-top: 8px; }

/* ── 반응형: 폭은 demo.js 가 .nd-root 실제 폭으로 판정 (md <1080, sm ≤768, xs ≤540) ── */
.nd-md .nd-side { width: 176px; }
.nd-md .nd-nav { font-size: 13.5px; gap: 8px; padding: 0 10px !important; }
.nd-md .nd-icos i:nth-child(n+4) { display: none; }
.nd-md .nd-dd { max-width: 170px; }
.nd-md .nd-dg2, .nd-md .nd-sg, .nd-md .nd-mg2 { grid-template-columns: minmax(0, 1fr); }
.nd-md .nd-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.nd-md .nd-tgs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.nd-md .nd-warns { grid-column: 1 / -1; }
.nd-md .nd-cc { width: 66px !important; height: 66px !important; font-size: 11px; }
.nd-md .nd-cn + .nd-cn::before { top: 33px; }
.nd-md .nd-cn { padding: 0 6px; }
.nd-md .nd-csr b { font-size: 15px; }
.nd-md .nd-sr-top { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.nd-md .nd-sr-wide { grid-column: 1 / -1; }
.nd-md .nd-c-mac, .nd-md .nd-c-cat { display: none; }

.nd-sm .nd-body { flex-direction: column; }
.nd-sm .nd-side, .nd-sm.nd-mini .nd-side { width: auto; display: flex; overflow-x: auto; overflow-y: hidden; padding: 0 4px; border-right: 0; border-bottom: 1px solid var(--nd-line); scrollbar-width: none; flex: none; }
.nd-sm .nd-side::-webkit-scrollbar { display: none; }
.nd-sm .nd-side-g { display: none; }
.nd-sm .nd-nav, .nd-sm.nd-mini .nd-nav { width: auto !important; flex: none; border-left: 0 !important; border-bottom: 3px solid transparent !important; padding: 0 11px !important; gap: 6px; justify-content: flex-start; }
.nd-sm.nd-mini .nd-nav span { display: inline; }
.nd-sm .nd-nav .nd-ic { width: 17px; height: 17px; }
.nd-sm .nd-nav.nd-on { border-bottom-color: var(--nd-g) !important; background: none; }
.nd-sm .nd-nav-dot { position: static; margin: 0 0 0 2px; }
.nd-sm .nd-ham { display: none; }
.nd-sm .nd-logo { margin-left: 8px; }
.nd-sm .nd-orgl, .nd-sm .nd-chev { display: none; }
.nd-sm .nd-icos i { display: none; }
.nd-sm .nd-dd { max-width: 150px; }
.nd-sm .nd-main { padding: 10px 12px 24px; }
.nd-sm .nd-c-lim { display: none; }
.nd-sm .nd-cd2 { grid-template-columns: minmax(0, 1fr); }
.nd-sm .nd-wf-cards { grid-template-columns: minmax(0, 1fr); }

.nd-xs .nd-logo-b { display: none; }
.nd-xs .nd-strip-t { display: none; }
.nd-xs .nd-chain { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 14px; }
.nd-xs .nd-cn:nth-child(4)::before { display: none; }
.nd-xs .nd-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.nd-xs .nd-appw { flex-direction: column; align-items: stretch; }
.nd-xs .nd-appw .nd-donut { align-self: center; }
.nd-xs .nd-tgs { grid-template-columns: minmax(0, 1fr); }
.nd-xs .nd-ind { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.nd-xs .nd-indc:nth-child(n) { border-right: 1px solid #e6e9e6; border-bottom: 1px solid #e6e9e6; }
.nd-xs .nd-sr-top, .nd-xs .nd-sr-ot { grid-template-columns: minmax(0, 1fr); }
.nd-xs .nd-sr-ot > div + div { border-left: 0; border-top: 1px solid #e3e6e3; }
.nd-xs .nd-ph-r { margin-left: 0; }

@media (prefers-reduced-motion: reduce) {
  .nd-root *, .nd-root *::before, .nd-root *::after { animation: none !important; transition: none !important; }
}

/* Wi-Fi 분리 구성도 (실제 망 구조판) */
.nd-wf-dg { padding: 14px 16px 8px; }
.nd-wft .nd-wf-t { font-size: 15px; }
.nd-wft .nd-wf-s { font-size: 12.5px; }
.nd-wft .nd-tt rect { fill: #fff; stroke: #d6dbe0; stroke-width: 1.2; filter: drop-shadow(0 2px 5px rgba(0, 0, 0, .08)); transition: stroke .3s; }
.nd-wft .nd-td { fill: #fff; stroke: #d6dbe0; stroke-width: 1.2; transition: fill .3s, stroke .3s; }
.nd-wft .nd-tz { fill: var(--z); fill-opacity: .06; stroke: var(--z); stroke-opacity: .5; stroke-width: 1.4; stroke-dasharray: 5 5; }
.nd-wft .nd-tz-bad { fill: #e0393e; fill-opacity: .07; stroke: #e0393e; stroke-opacity: .7; stroke-width: 1.8; }
.nd-wft .nd-tzh { font-size: 13.5px; font-weight: 800; }
.nd-wft .nd-tv { font-size: 11.5px; font-weight: 700; letter-spacing: .2px; }
.nd-wft .nd-tcap { font-size: 11px; fill: #9aa0a6; }
.nd-wft .nd-tneb { fill: #fff; stroke: #cfe5c2; stroke-width: 1.4; filter: drop-shadow(0 2px 5px rgba(0, 0, 0, .07)); }
.nd-wft .nd-tnebt { font-size: 14px; font-weight: 700; fill: #333; }
.nd-wft .nd-tring { animation: nd-tring 1.6s ease-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes nd-tring { from { opacity: .9; transform: scale(1); } to { opacity: 0; transform: scale(2); } }
.nd-wft .nd-tlg text { font-size: 12px; fill: #7d8389; }
.nd-wft .nd-push-ok { opacity: 0; transition: opacity .3s; }
.nd-wft.nd-pushing .nd-push-ok { opacity: 1; }
.nd-wft.nd-pushing .nd-push path { stroke: #4caf2a; stroke-width: 2.4; animation: nd-push .5s linear infinite; }
.nd-wft.nd-pushing .nd-tt rect { stroke: #4caf2a; stroke-width: 2; }
@keyframes nd-push { to { stroke-dashoffset: -16; } }
.nd-wf-i0 .nd-wf-og-g .nd-td { fill: #fff1f1; stroke: #e0393e; stroke-width: 2; }