@font-face{font-family:Pretendard;src:url('/assets/PretendardVariable.woff2') format('woff2');font-weight:100 900;font-display:swap}

:root{font-family:Pretendard,Inter,'Segoe UI',sans-serif;color:#213c45;background:#f4f7f8;font-synthesis:none;--accent:#087c73;--accent-soft:#e8f5f2;--border:#e3e9ed;--muted:#627984;--green:#158566;--amber:#ba7b14;--red:#c64849;--radius:14px}

.modec-stages{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-bottom:24px;user-select:none}
.modec-stage{position:relative;display:flex;flex-direction:column;padding:26px;background:#fff;border:1px solid var(--border);border-radius:var(--radius);min-width:0}
.modec-stage:not(:last-child)::after{content:'›';position:absolute;z-index:1;right:-18px;top:46%;display:grid;place-items:center;width:16px;color:#94abae;font-size:24px}
.modec-stage-top{display:flex;align-items:center;gap:12px;margin-bottom:22px}
.modec-stage-number{font-size:12px;font-weight:650;color:#8c9da4;font-variant-numeric:tabular-nums}
.modec-stage-icon,.modec-rule-icon,.modec-summary-icon{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:var(--accent-soft);color:var(--accent);flex-shrink:0}
.modec-budget{margin-left:auto;font-size:11px;color:var(--muted);white-space:nowrap}
.modec-stage h2{font-size:20px;margin-bottom:10px}
.modec-stage>p{min-height:44px;max-width:28em}
.modec-stage-model{display:grid;gap:7px;margin:24px 0;min-height:44px;align-content:start;overflow-wrap:anywhere}
.modec-stage-model strong{font-size:14px;font-weight:600}.modec-stage-model span{font-size:12px;color:var(--muted)}
.modec-stage>.button{margin-top:auto}
.modec-rules{padding:8px 16px;max-height:430px;overflow:auto}
.modec-rule{display:flex;align-items:center;gap:14px;width:100%;padding:15px 10px;border:0;border-radius:9px;background:transparent;color:inherit;text-align:center;user-select:none;min-width:0}
.modec-rule:hover{background:#f3f8f7}.modec-rule>span:not(.modec-avatar):not(.modec-rule-icon){flex:1;min-width:0}
.modec-rule strong,.modec-rule small{display:block;overflow-wrap:anywhere}.modec-rule strong{font-size:13px;font-weight:550;line-height:1.5}.modec-rule small{color:var(--muted);font-size:11px;margin-top:5px}
.modec-rule>.icon{margin-left:auto;color:#93a6ac;width:16px}.modec-rule-icon{width:34px;height:34px;border-radius:10px}
.modec-empty-note{padding:24px 10px}.modec-chips{display:flex;flex-wrap:wrap;gap:7px}.modec-chips>span{display:inline-flex;padding:6px 9px;border-radius:6px;background:#eef4f5;color:#526f78;font-size:11px}
.modec-detail-section{margin:28px 0}.modec-detail-section h3{margin-bottom:13px}.modec-detail-section h4{font-size:12px;color:var(--muted);font-weight:550}
.modec-recovery-list{display:grid;gap:12px;list-style:none;padding:0;margin:0}.modec-recovery-list li{padding:16px 18px;border:1px solid var(--border);border-radius:10px}.modec-recovery-list li>div{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:11px}.modec-recovery-list p{margin:10px 0 0;white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.7;font-size:13px}
.modec-value{overflow-wrap:anywhere;white-space:pre-wrap;line-height:1.7;font-size:12px}.modec-values{padding-left:19px;margin:0;display:grid;gap:7px}.modec-metadata{margin:0;display:grid;gap:0}.modec-metadata>div{padding:11px 0;border-bottom:1px solid #edf1f3;display:grid;gap:7px}.modec-metadata dt{font-size:11px;color:var(--muted)}.modec-metadata dd{margin:0;font-size:12px;min-width:0}.modec-metadata .modec-metadata{padding-left:12px;border-left:2px solid #e5efee}.modec-metadata .modec-metadata>div:last-child{border-bottom:0}
.modec-form{display:grid;gap:17px}.modec-form label{margin:0;display:grid;gap:8px}.modec-form textarea{resize:vertical;line-height:1.6;min-height:120px}.modec-form fieldset{border:0;margin:0;padding:0 0 25px;display:grid;gap:16px}.modec-form legend{font-size:18px;font-weight:600;margin-bottom:10px}.modec-form fieldset+fieldset{border-top:1px solid var(--border);padding-top:24px}
.modec-example{display:flex;align-items:flex-start;gap:12px;padding:12px 0;border-bottom:1px solid #edf1f3}.modec-example .badge{flex-shrink:0}.modec-check{margin-top:8px;padding:12px 14px;background:#f7f9fa;border:1px solid var(--border);border-radius:9px}.modec-check summary{display:flex;align-items:center;justify-content:space-between;gap:12px;cursor:pointer;font-size:12px;user-select:none}.modec-check[open] summary{margin-bottom:16px}
.modec-directory{border:1px solid var(--border);border-radius:10px;padding:18px;margin-top:15px}.modec-directory h3{display:flex;align-items:center;gap:10px}.modec-directory>p{margin-top:10px;overflow-wrap:anywhere}.modec-directory dl>div,.modec-import-review>div{display:flex;gap:16px;justify-content:space-between;font-size:12px;margin-top:13px}.modec-directory dt{color:var(--muted)}.modec-directory dd{margin:0}.modec-import-review>div{padding:13px 0;margin:0;border-bottom:1px solid var(--border)}.modec-import-review strong{text-align:center;overflow-wrap:anywhere;font-weight:550;min-width:0}.modec-import-review+form{margin-top:24px}
.modec-identity{margin:16px 0}.modec-identity>span{display:flex;align-items:center;gap:10px;font-size:12px;font-weight:550}.modec-identity p{margin:8px 0 0 29px;overflow-wrap:anywhere}
.modec-attachments{list-style:none;padding:0;margin:14px 0 0;display:grid;gap:10px}.modec-attachments li{min-width:0}.modec-attachments li>button{display:flex;align-items:center;gap:13px;padding:14px;background:#fff;border:1px solid var(--border);border-radius:10px;min-width:0;width:100%;text-align:center;color:inherit;cursor:pointer}.modec-attachments li>button:hover{background:#f3f7f8;border-color:var(--accent)}.modec-attachments li>button>.icon{margin-left:auto;flex-shrink:0}.modec-attachments .file-emoji{font-size:25px;flex-shrink:0}.modec-attachments button>span:nth-child(2){display:grid;gap:6px;min-width:0}.modec-attachments strong{font-size:12px;font-weight:550;overflow-wrap:anywhere}.modec-attachments small{font-size:11px;color:var(--muted)}
.modec-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-bottom:24px}.modec-summary>div{display:flex;align-items:center;gap:17px;padding:22px 24px;background:#fff;border:1px solid var(--border);border-radius:var(--radius)}.modec-summary>div>span+span{display:grid;gap:8px}.modec-summary small{font-size:12px;color:var(--muted)}.modec-summary strong{font-size:26px;font-weight:600;font-variant-numeric:tabular-nums}.modec-summary-icon.red{background:#fff0ef;color:var(--red)}
.modec-inbox{display:grid;grid-template-columns:240px minmax(0,1fr);min-height:430px}.modec-channel-list{display:flex;flex-direction:column;gap:6px;padding:18px 14px;border-right:1px solid var(--border);background:#fafcfc;user-select:none}.modec-channel-filter{display:flex;align-items:center;gap:10px;border:0;border-radius:8px;background:transparent;color:#5a737c;font-size:12px;text-align:center;padding:13px 12px;min-width:0}.modec-channel-filter.active{background:#e7f3f0;color:var(--accent)}.modec-channel-filter:hover{background:#eff5f3}.modec-channel-filter>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.modec-channel-filter>small{margin-left:auto;color:#8a9a9e;font-variant-numeric:tabular-nums}.modec-conversations{min-width:0}.modec-conversations .panel-head{min-height:70px}.modec-message-list{padding:0 16px}.modec-message{display:flex;align-items:center;gap:16px;width:100%;padding:20px 10px;border:0;border-bottom:1px solid #edf1f3;background:transparent;color:inherit;text-align:center;user-select:none}.modec-message:hover{background:#f8fbfa}.modec-message:last-child{border-bottom:0}.modec-avatar{display:grid;place-items:center;background:#eef3f6;color:#6b858f;width:38px;height:38px;border-radius:12px;flex-shrink:0}.modec-message-body{display:grid;gap:9px;flex:1;min-width:0}.modec-message-heading{display:flex;align-items:center;gap:14px;justify-content:space-between}.modec-message-heading strong{font-weight:600;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.modec-message-heading time{color:#8a9ca4;font-size:11px;white-space:nowrap}.modec-message-text{font-size:12px;color:#617c85;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.modec-message-foot{display:flex;align-items:center;gap:16px;font-size:10px;color:#8a9ca4}.modec-message-foot .status{font-size:10px}.modec-message>.icon{width:16px;color:#97aab0}.modec-empty{display:grid;justify-items:center;text-align:center;padding:64px 24px;gap:14px}.modec-empty>span{display:grid;place-items:center;width:58px;height:58px;border-radius:18px;background:#eef6f4;color:#6f9c95}.modec-empty>span>.icon{width:28px;height:28px}.modec-empty h2{margin-top:4px;font-size:16px}
.modec-conversation-meta{display:flex;gap:14px;justify-content:space-between;font-size:11px;color:var(--muted);margin-bottom:24px}.modec-bubble{background:#f4f7f8;border:1px solid #e7eef0;border-radius:12px;padding:19px;margin:16px 0}.modec-bubble.sent{background:#edf7f3;border-color:#daeee5}.modec-bubble.attention{background:#fff6f4;border-color:#f4ded7}.modec-bubble h3{font-size:12px;margin-bottom:11px}.modec-bubble p{white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.85}.modec-bubble time{display:block;font-size:10px;color:var(--muted);margin-top:13px}.modec-evidence{padding-left:18px;display:grid;gap:10px;font-size:12px;line-height:1.7;color:var(--muted)}
@media(max-width:1100px){.modec-stage{padding:21px}.modec-stage-top{gap:8px}.modec-budget{font-size:10px}.modec-inbox{grid-template-columns:190px minmax(0,1fr)}}
@media(max-width:760px){.modec-stages{grid-template-columns:1fr;gap:14px}.modec-stage:not(:last-child)::after{display:none}.modec-stage>p{min-height:0}.modec-stage-model{margin:17px 0}.modec-summary{gap:9px}.modec-summary>div{padding:15px 12px;gap:10px}.modec-summary-icon{display:none}.modec-summary strong{font-size:22px}.modec-inbox{display:block}.modec-channel-list{flex-direction:row;border-right:0;border-bottom:1px solid var(--border);overflow:auto;padding:10px}.modec-channel-filter{flex-shrink:0;max-width:220px}.modec-message-list{padding:0 10px}.modec-message{gap:10px;padding:18px 6px}.modec-message-heading{gap:8px}.modec-message-heading time{font-size:10px}.modec-message>.icon{display:none}.modec-stage-top{margin-bottom:15px}}

*{box-sizing:border-box}
body{margin:0}
button,input,select,textarea{font:inherit}
button,a{touch-action:manipulation}
button{cursor:pointer}
button:disabled{cursor:not-allowed;opacity:.48}
a{color:var(--accent);text-decoration:none}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:3px solid #8dcac3;outline-offset:3px}
[hidden],.hidden{display:none!important}
.icon{width:19px;height:19px;display:inline-block;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
h1,h2,h3,p{margin:0}
h1{font-size:28px;font-weight:650;letter-spacing:-.8px;line-height:1.3}
h2{font-size:15px;font-weight:640;letter-spacing:-.2px}
h3{font-size:14px;font-weight:600}
p{color:var(--muted);font-size:13px;line-height:1.7}
.muted{color:var(--muted);font-size:12px}
.eyebrow{font-size:10px;font-weight:650;letter-spacing:1.5px;color:#87959e;margin-bottom:7px}
.support-note{font-size:12px;margin-top:18px;line-height:1.7}
.sidebar{position:fixed;inset:0 auto 0 0;width:224px;padding:27px 16px 22px;background:#14262d;color:#bbccce;display:flex;flex-direction:column;z-index:10}
.brand{display:flex;align-items:center;gap:11px;padding:0 12px;color:#f0f7f6;font-size:20px;font-weight:610;letter-spacing:-.4px}
.mark{display:grid;place-items:center;width:34px;height:38px;border-radius:11px;background:#2a6261;color:#e8fff9;font-size:26px}
.brand-sub{display:block;font-size:9px;font-weight:500;letter-spacing:2.4px;color:#7d9c9d;margin-top:4px}
.workspace-label{margin:37px 14px 15px;font-size:11px;font-weight:650;letter-spacing:1.7px;color:#6f9092}
nav{display:grid;gap:5px}
.nav{display:flex;align-items:center;gap:12px;min-height:46px;border:0;background:transparent;border-radius:9px;padding:12px 15px;text-align:center;font-size:14px;font-weight:500;color:#a0b8ba;white-space:nowrap}
.nav:hover{background:#213c42;color:white}
.nav.active{background:#24494b;color:#e6fbf6}
.nav.active .icon{color:#81d5bb}
.nav-count{margin-left:auto;background:#38595f;color:#e1eeed;border-radius:5px;min-width:23px;text-align:center;font-size:10px;padding:2px 5px}
.sidebar-bottom{margin-top:auto;padding:22px 13px 0}
.connection{display:flex;align-items:center;gap:9px;font-size:11px;line-height:1.5}
.dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#d7a04b;flex-shrink:0}
.connected .dot{background:#5bcb9b}
.sidebar-link{border:0;padding:12px 0;background:none;color:#b2d5cf;font-size:11px}
.sidebar-rule{height:1px;background:#2b4248;margin:8px 0 16px}
.runtime-note{font-size:11px;color:#a1b9ba}
.runtime-note span{display:block;font-size:10px;color:#5f8186;margin-top:7px}
.app{margin-left:224px;min-height:100vh;display:flex;flex-direction:column}
.topbar{height:68px;flex-shrink:0;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:0 30px;background:#fff;border-bottom:1px solid var(--border)}
.breadcrumb{display:flex;align-items:center;gap:12px;font-size:12px;color:#98a6af}
.breadcrumb strong{color:#435762;font-weight:550}
.account{display:flex;align-items:center;gap:10px;font-size:12px}
.account>#user-name{margin:0 5px;color:#586c76}
.button{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:9px 14px;min-height:40px;border:1px solid #dce4e8;border-radius:8px;background:#fff;color:#49616b;font-size:12px;font-weight:520;white-space:nowrap;line-height:1.35;transition:background .15s,border-color .15s}
.button:not(:disabled):hover{background:#f2f6f7;border-color:#c3d3d5}
.button.primary{color:#fff;background:var(--accent);border-color:var(--accent)}
.button.primary:not(:disabled):hover{background:#07665f}
.button.subtle{background:var(--accent-soft);color:var(--accent);border-color:#cfebe4}
.button.small{padding:7px 12px;min-height:36px;font-size:12px}
.button.icon-button{padding:8px;position:relative;min-width:36px}
.button.danger{color:var(--red)}
.button.wide{width:100%}
.actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
/* 교시: "모든 UI 는 가로 정렬을 원칙으로 하되, 가독성을 자체 판단하여 정렬 기준을 재량껏 바꿀 수 있다." */
.benchmark-fields{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.benchmark-fields input,.benchmark-fields select{width:100%;min-width:0}.benchmark-results{margin-top:26px}.benchmark-results h3{margin-bottom:12px}.benchmark-results table{width:100%;min-width:0;font-size:12px;font-variant-numeric:tabular-nums}.benchmark-results th,.benchmark-results td{padding:12px 6px;text-align:right}.benchmark-results th:first-child{text-align:left}.benchmark-progress{display:block;width:100%;height:4px;margin-top:26px;accent-color:var(--accent)}
.text-button{border:0;background:transparent;color:inherit;padding:0;text-align:center;cursor:pointer}
.text-button:hover{color:var(--accent)}
main{width:100%;max-width:1840px;margin:0 auto;padding:24px 32px 32px;flex:1;text-align:center}
.page-heading{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:20px;margin-bottom:24px;min-height:44px;text-align:center}
.page-heading>:first-child{grid-column:2}.page-heading>.actions{grid-column:3;justify-self:end}
.page-heading h1{margin:0}
.page-heading>.actions{justify-content:flex-end}
.panel{background:white;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;margin-bottom:20px;box-shadow:0 2px 4px #17343f02}
.panel-head{padding:16px 24px;display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:1px solid #edf1f3;min-height:62px}
.panel-head p{font-size:11px;margin-top:4px}
.panel-body{padding:24px}
.panel-foot{padding:12px 24px}
.badge{display:inline-flex;align-items:center;gap:6px;padding:4px 8px;font-size:11px;border-radius:5px;background:#ebf6f1;color:var(--green)}
.badge.blue{background:#edf3ff;color:#5073b1}
.badge.gray{background:#f1f4f6;color:#7b8c96}
.status{display:inline-flex;align-items:center;gap:7px;white-space:nowrap;font-size:12px;font-weight:500}
.status.green{color:#427867}
.status.amber{color:#987024}
.status.red{color:#a64f51}
.status-dot{display:inline-block;width:7px;height:7px;border-radius:50%;flex-shrink:0}
.status-dot.green{background:var(--green);box-shadow:0 0 0 3px #15856610}
.status-dot.amber{background:var(--amber);box-shadow:0 0 0 3px #ba7b1410}
.status-dot.red{background:var(--red);box-shadow:0 0 0 3px #c6484910}
.sample-time{display:grid;gap:6px;justify-items:end;color:#8c9ba3;font-size:10px}
.dashboard{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:18px}
.dashboard .panel{margin:0}
.gauges{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.gauge-card{padding:19px 22px 16px;background:#fff;border:1px solid var(--border);border-radius:var(--radius)}
.gauge-heading{display:flex;align-items:center;justify-content:center;gap:9px;color:#627783}
.gauge-heading h2{font-size:13px;font-weight:550;color:#506670}
.gauge-heading .icon{width:17px;height:17px}
.gauge-content{display:grid;grid-template-columns:114px minmax(0,1fr);align-items:center;justify-content:center;gap:16px;margin-top:8px}
.gauge{width:114px;height:114px;flex-shrink:0;overflow:visible}
.gauge circle{fill:none;stroke-width:8}
.gauge-track{stroke:#edf2f5}
.gauge-value{stroke:currentColor;stroke-linecap:round}
.gauge.blue{color:#5487d4}
.gauge.violet{color:#8f79c6}
.gauge.teal{color:#3a9e8c}
.gauge.orange{color:#d59a52}
.gauge-number{fill:#2c414d;font-size:28px;font-weight:650;letter-spacing:-.8px}
.gauge-unit{font-size:12px;font-weight:450;fill:#8c9ba3}
.gauge.unknown .gauge-track{stroke-dasharray:3 3}
.gauge-caption{min-width:0;display:flex;flex-direction:column;gap:7px}
.gauge-caption strong{font-size:18px;font-weight:610;letter-spacing:-.3px;white-space:nowrap}
.gauge-caption span{font-size:12px;line-height:1.6;color:#8b9aa4}
.overview-categories{grid-column:1/-1;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:1px;background:var(--border);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
.overview-category{padding:17px 18px;display:flex;gap:13px;align-items:center;text-align:center;background:#fff;border:0;color:#8a9ba4}
.overview-category:hover{background:#f7fbfa}
.overview-category>.icon{width:22px;height:22px;color:#73958f}
.overview-category>span{font-size:12px;line-height:1.5}
.overview-category strong{display:block;color:#294951;font-size:19px;font-weight:600;line-height:1.3;margin-top:4px}
.overview-network{grid-column:1/7;grid-row:3/5;display:flex;flex-direction:column;min-height:340px;max-height:390px}
.overview-attention{grid-column:7/10;grid-row:3/5;min-height:340px;max-height:390px}
.overview-storage{grid-column:10/13;grid-row:3/5;min-height:340px;max-height:390px}
.network-preview{flex:1;min-height:0;padding:5px 16px}
.network-preview .topology{height:100%;width:100%;min-height:245px}
.graph-legend{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;padding:10px 16px 15px;color:#90a0a8;font-size:10px}
.topology-stage{height:calc(100vh - 285px);min-height:450px;background:radial-gradient(#e8eef0 .65px,transparent .65px);background-size:15px 15px}
.topology{width:100%;height:100%;display:block;touch-action:none}
.graph-link{stroke:#afc5ce;stroke-width:1;opacity:.65}
.graph-link.management{stroke:#b9c6cb;stroke-dasharray:4 4;opacity:.6}
.graph-node{cursor:pointer}
.graph-node circle{fill:#f3f8f6;stroke:#76ac9b;stroke-width:1.4;transition:fill .15s}
.graph-node.red circle{fill:#fff0ee;stroke:#ce8b8b}
.graph-node.amber circle{fill:#fff9e9;stroke:#c5a86e}
.graph-node:hover circle,.graph-node:focus circle{fill:#bfe7da;stroke:#1b8b6c;stroke-width:2}
.graph-node text{font-size:9px;fill:#71868f;pointer-events:none}
.attention-list{padding:7px 17px}
.attention-item{width:100%;display:flex;align-items:flex-start;gap:12px;padding:16px 0;text-align:center;color:#526975;background:none;border:0;border-bottom:1px solid #edf1f4;font-size:12px;line-height:1.4}
.attention-item>.status-dot{margin-top:5px}
.attention-item>span:nth-child(2){flex:1;min-width:0}
.attention-item strong{font-weight:550;display:block}
.attention-item small{display:block;margin-top:6px;color:#90a0a8;font-size:11px;line-height:1.55}
.attention-item:last-child{border-bottom:0}
.all-clear{padding:52px 4px;text-align:center;display:grid;gap:15px;justify-items:center}
.all-clear strong{font-size:13px;font-weight:520;color:#607e78}
.all-clear p{font-size:11px;max-width:200px}
.storage-summary{padding:4px 20px}
.storage-summary-row{width:100%;border:0;border-bottom:1px solid #edf1f3;background:none;text-align:center;padding:16px 0;display:block;color:#536d77;font-size:12px}
.storage-summary-row:last-child{border-bottom:0}
.storage-summary-row>span{display:flex;justify-content:space-between;align-items:center;font-weight:550;gap:12px}
.storage-summary-row small{font-size:10px;font-weight:400;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#92a0a7}
.capacity{margin-top:12px;min-width:130px;max-width:320px}
.capacity-label{display:flex;justify-content:space-between;gap:12px;align-items:center;font-size:11px;color:#6b848b}
.capacity-label strong{font-size:11px;font-weight:550;color:#546f76}
.capacity meter{display:block;appearance:none;width:100%;height:6px;margin:7px 0;border:0;border-radius:8px;overflow:hidden;background:#ecf1f3}
.capacity meter::-webkit-meter-bar{background:#ecf1f3;border:0;height:6px;box-shadow:none}
.capacity meter::-webkit-meter-optimum-value{background:#58a997}
.capacity meter::-webkit-meter-suboptimum-value{background:#d4a04b}
.capacity meter::-webkit-meter-even-less-good-value{background:#ce6c70}
.capacity meter::-moz-meter-bar{background:#58a997}
.capacity.unknown meter{background:repeating-linear-gradient(120deg,#e7edef,#e7edef 5px,#f4f7f8 5px,#f4f7f8 10px)}
.capacity-total{font-size:11px;color:#72878f}
.quiet-empty{padding:22px 0;font-size:12px}
.table-wrap{overflow:auto;scrollbar-width:thin}
table{width:100%;border-collapse:collapse;font-size:12px;text-align:center;table-layout:fixed}
th{padding:13px 22px;background:#f9fbfc;border-bottom:1px solid var(--border);font-weight:500;color:#8b9ba4;font-size:11px;white-space:nowrap}
td{padding:18px 22px;border-bottom:1px solid #edf1f3;color:#647b85;vertical-align:middle}
tr:last-child td{border-bottom:0}
tbody tr:hover{background:#fcfdfd}
.resource-icon{display:flex;gap:12px;align-items:center;min-width:180px}
.resource-icon>span{display:flex;align-items:center;justify-content:center;width:35px;height:35px;border-radius:10px;background:#eff6f5;color:#6e9a91;flex-shrink:0}
.resource-name{font-size:14px;font-weight:550;color:#364e59;line-height:1.5}
.resource-meta{font-size:12px;color:#758b95;margin-top:3px;max-width:360px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.toolbar{display:flex;gap:14px;justify-content:space-between;align-items:center;flex-wrap:wrap;padding:15px 21px;border-bottom:1px solid var(--border)}
.toolbar input{width:270px}
.group-title{padding:13px 22px;background:#f7fafb;border-bottom:1px solid var(--border);font-size:12px;font-weight:550;color:#6b818d}
input,select,textarea{padding:10px 12px;border:1px solid #d9e2e7;border-radius:8px;background:white;color:#465e69;font-size:13px;max-width:100%;min-width:0}
input[type=checkbox]{width:15px;height:15px;accent-color:var(--accent);padding:0}
label{display:grid;gap:8px;font-size:12px;color:#728892;margin-top:16px}
label input,label select,label textarea{width:100%}
.check-label{display:flex;align-items:center;gap:9px}
.check-label input{width:15px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
.span-two{grid-column:1/-1}
.profile-form{max-width:540px}
.profile-form>.actions{margin-top:20px}
.info-row{display:flex;justify-content:space-between;gap:25px;padding:15px 0;border-bottom:1px solid #edf1f3;font-size:12px}
.info-row>span:first-child{color:#91a1aa}
.profile-form>a.button{margin:17px 0 9px}
.controller-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:19px}
.controller-grid>.device-card{content-visibility:auto;contain-intrinsic-block-size:auto 336px}
.device-card .panel-head{border:0;padding-bottom:0}
.device-card .panel-body>p{margin-top:7px}
.device-symbol{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;color:#68998d;background:#eef7f3}
.device-symbol .icon{width:24px;height:24px}
.device-facts{display:flex;gap:20px;padding:20px 0 24px;color:#8b9da4;font-size:10px}
.device-facts strong{display:block;color:#4c6871;font-size:16px;font-weight:550;margin-bottom:4px}
.device-card .device-updated{margin-top:19px;font-size:10px;color:#9cacb2}
.detail-panel{position:fixed;inset:68px 0 0 auto;width:420px;max-width:100%;z-index:25;background:#fff;border-left:1px solid #dfe8ec;box-shadow:-12px 0 35px #16384710;display:flex;flex-direction:column}
/* 교시: "우측 패널의 등장과 퇴장에 항상 애니메이션이 있어야 한다." */
.detail-panel{transform:translateX(0);opacity:1;transition:transform 160ms cubic-bezier(.2,.7,.2,1),opacity 160ms,display 160ms allow-discrete}
.detail-panel[hidden]{transform:translateX(100%);opacity:0}
@starting-style{.detail-panel{transform:translateX(100%);opacity:0}}
.detail-head{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:73px;padding:20px 25px;border-bottom:1px solid var(--border);flex-shrink:0}
.detail-head h2{font-size:16px;overflow-wrap:anywhere}
.detail-body{padding:24px;overflow:auto;scrollbar-gutter:stable both-edges;overscroll-behavior:contain;flex:1}
.detail-summary{display:flex;align-items:center;gap:15px;margin-bottom:18px}
.detail-summary:has(>.detail-symbol){display:grid;grid-template-columns:54px minmax(0,1fr) 54px}
.detail-summary h3{font-size:17px;margin-bottom:7px;font-weight:600;word-break:break-word}
.detail-symbol{display:grid;place-items:center;width:54px;height:54px;border-radius:14px;background:#edf6f3;color:#4e9a84;flex-shrink:0}
.detail-symbol .icon{width:28px;height:28px}
.detail-description{font-size:13px;line-height:1.8;padding-bottom:16px;color:#82949c}
.properties{margin:6px 0 0}
.properties>div{display:grid;grid-template-columns:100px minmax(0,1fr);gap:18px;padding:13px 0;border-bottom:1px solid #eff3f5;font-size:12px;line-height:1.7}
.properties dt{color:#74878f}
.properties dd{color:#4b6671;word-break:break-word;margin:0}
.detail-section{margin-top:25px}
.detail-section>h3{margin-bottom:14px}
.detail-volume{padding:13px 0;border-bottom:1px solid var(--border);font-size:12px}
.condition{display:flex;align-items:center;justify-content:space-between;padding:11px 0;border-bottom:1px solid #eff3f5;font-size:12px;color:#6e8590}
.drawer-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}
.notification-stack{position:fixed;top:82px;right:22px;width:370px;max-width:calc(100vw - 30px);z-index:60;display:grid;gap:10px;pointer-events:none}
.toast-stack{display:grid;gap:10px;pointer-events:none}
.toast-stack:empty{display:none}
.toast{display:flex;gap:12px;align-items:center;padding:12px 14px 12px 18px;border:1px solid #dce9e4;border-radius:11px;background:#fff;box-shadow:0 7px 26px #123c3b18;font-size:12px;line-height:1.7;color:#4d6a66;pointer-events:none}
.toast>span:nth-child(2){flex:1;overflow-wrap:anywhere;text-align:center}
.toast.error{border-color:#f0d9d8;color:#9a5a5c}
.toast-close{border:0;background:none;color:#9baeb2;padding:0;display:flex;align-items:center;justify-content:center;width:20px;min-width:20px;height:20px;cursor:pointer;pointer-events:auto}
.toast .toast-close,.toast .toast-action{width:32px;min-width:32px;height:32px;min-height:32px;padding:6px;flex-shrink:0;pointer-events:auto}
.toast-close .icon{width:15px;height:15px}
.notification-count{position:absolute;top:-4px;right:-4px;min-width:15px;height:15px;padding:0 4px;display:grid;place-items:center;background:#ba5558;border:2px solid white;border-radius:8px;color:white;font-size:8px}
.notification-history{display:grid}
.notification-entry{display:flex;align-items:flex-start;gap:13px;padding:17px 0;border-bottom:1px solid #edf2f4}
.notification-entry>.status-dot{margin-top:7px}
.notification-entry p{font-size:12px;color:#586f7a;overflow-wrap:anywhere}
.notification-entry time{display:block;font-size:10px;color:#9baab1;margin-top:7px}
.notification-history+.button{margin-top:18px}
.activity:empty{display:none}
.activity{display:flex;align-items:center;gap:12px;background:#eef8f5;border:1px solid #cfe7df;border-radius:10px;padding:12px 14px;font-size:12px;color:#46746b;box-shadow:0 3px 12px #193c3010;pointer-events:none}
.activity button{pointer-events:auto}
.activity [data-activity-text]{flex:1;min-width:0;overflow-wrap:anywhere}
.spinner{width:15px;height:15px;border:2px solid #b9d6ce;border-top-color:#358c75;border-radius:50%;display:inline-block;animation:spin .8s linear infinite;flex-shrink:0}
.empty{text-align:center;padding:55px 24px}
.empty-symbol{color:#b3c9cc;font-size:32px;margin-bottom:15px}
.empty h3{font-weight:550;color:#748c97;margin-bottom:10px}
.empty p{font-size:12px;max-width:380px;margin:0 auto}
.empty .button{margin-top:20px}
/* 교시: "환영 페이지, 컨트롤러 설치 안내 페이지에도 정렬을 준수하라. 이미지로 확인하라." */
.intro{display:grid;grid-template-columns:1.1fr 1fr;align-items:center;gap:55px;padding:48px;background:#fff;border:1px solid var(--border);border-radius:18px;margin:0 0 23px}
.intro>div:first-child{display:flex;flex-direction:column;align-items:center;text-align:center}
.intro h1{font-size:37px;line-height:1.3;margin:20px 0;color:#264840;letter-spacing:-1.2px}
.intro p{max-width:450px;margin-left:auto;margin-right:auto;font-size:14px}
.intro .actions{margin-top:27px}
.intro .support-note{font-size:12px;margin-top:21px}
.intro-network{display:flex;align-items:center;justify-content:center;gap:0;padding:25px}
.intro-device,.intro-cloud{display:grid;justify-items:center;gap:18px;padding:30px 20px;border:1px solid #d6e9e2;border-radius:16px;box-shadow:0 14px 40px #3185700c;font-size:12px;color:#61887d;min-width:114px}
.intro-device .icon,.intro-cloud .icon{width:38px;height:38px;color:#63a38d}
.intro-cloud{background:#f3faf6}
.intro-line{height:1px;background:#b4d9c8;width:38px}
.intro-branches{display:grid;gap:16px;border-left:1px solid #c6e1d5;padding-left:25px;margin-left:25px}
.intro-branches span{display:flex;align-items:center;gap:8px;font-size:11px;color:#799c8f}
.features{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.feature{display:flex;flex-direction:column;align-items:center;padding:28px;background:#fff;border:1px solid var(--border);border-radius:14px;text-align:center}
.feature>.icon{color:#5c9b88;width:25px;height:25px;margin-bottom:20px}
.feature h3{margin-bottom:9px;font-size:14px}
.feature p{font-size:12px}
main:has(>.login-panel){display:flex;align-items:center;justify-content:center}
.login-panel{display:flex;flex-direction:column;align-items:center;width:100%;max-width:580px;margin:0;padding:50px;text-align:center}
.login-panel h1{margin:12px 0 19px;word-break:keep-all;overflow-wrap:anywhere}
.login-panel .button{margin-top:26px}
.login-panel .support-note{font-size:11px}
.desktop-workspace{border:1px solid #d8e3e6;border-radius:13px;overflow:hidden;background:#152328}
.desktop-toolbar{padding:12px 16px;display:flex;align-items:center;justify-content:space-between;gap:14px;background:#fff;border-bottom:1px solid var(--border)}
.desktop-screen{position:relative;height:calc(100vh - 300px);min-height:360px;display:flex;align-items:center;justify-content:center;background:#162329}
.desktop-screen canvas{max-width:100%;max-height:100%;width:auto;height:auto;outline:none;object-fit:contain}
.desktop-screen:fullscreen{width:100vw;height:100vh}
.desktop-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:15px;color:#a9bfc1;font-size:13px;pointer-events:none}
.desktop-status{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;color:#8da3a6;font-size:10px;gap:15px}
.upload-button{display:inline-flex;margin:0;cursor:pointer}
.file-list{display:grid;gap:0}
.file-row{display:flex;align-items:center;width:100%;gap:13px;padding:14px 7px;border:0;border-bottom:1px solid #edf2f4;background:white;text-align:center;color:#526e7b;font-size:12px}
.file-row:hover{background:#f5faf8}
.file-row .icon{color:#80a79b}
.file-row>span{flex:1;overflow:hidden;text-overflow:ellipsis}
.file-row small{color:#9aabb3}
.history-context{display:flex;align-items:center;gap:10px;font-size:11px;color:#8a8068;padding:12px 16px;background:#fffcf3;border:1px solid #eee7d1;border-radius:8px;margin-bottom:16px}
.history-list{display:grid;gap:12px}
.history-item{display:flex;align-items:center;gap:15px;padding:17px;border:1px solid var(--border);border-radius:10px;background:#fff;color:#69828d;text-align:center}
.history-item .icon{color:#89aa9d}
.history-item span{display:grid;gap:7px;font-size:12px}
.history-item small{font-size:10px;color:#98aab1}
dialog{border:1px solid var(--border);border-radius:15px;padding:28px;width:500px;max-width:calc(100% - 32px);max-height:90vh;box-shadow:0 25px 90px #172e3b35;color:#395460}
dialog::backdrop{background:#17292f61;backdrop-filter:blur(2px)}
dialog h2{margin-bottom:10px;font-size:18px;text-align:center}
dialog p{font-size:12px;text-align:center}
.dialog-actions{display:flex;gap:10px;justify-content:center;margin-top:27px}
.dialog-actions .button{min-width:80px}
#dialog .checkbox-field{display:grid;grid-template-columns:16px minmax(0,1fr) 16px;gap:10px;min-height:40px}
#dialog .checkbox-field>input{grid-column:3;grid-row:1;margin:0}
#dialog .checkbox-field>span{grid-column:2;grid-row:1}
footer{padding:15px 30px;color:#a0b0b9;font-size:10px;display:flex;justify-content:space-between}
body:has(.overview-main) footer{padding-top:2px}
.error-panel{border-color:#ebd4d5}
.error-panel h2{color:#aa666a}
.error-panel p{margin-top:10px}
.grid{display:grid;grid-template-columns:1.5fr 1fr;gap:22px}

@keyframes spin{to{transform:rotate(360deg)}
}
@media(min-width:1800px){main{padding:32px 36px}
.gauge-content{gap:28px}
.gauge{width:128px;height:128px}
.gauge-caption strong{font-size:19px}
.overview-network,.overview-attention,.overview-storage{min-height:390px;max-height:440px}
.overview-category{padding:22px}
.dashboard{gap:22px}
.gauges{gap:22px}
}

@media(max-width:1430px){.gauge-card{padding:16px}
.gauge-content{gap:9px}
.gauge{width:96px;height:96px}
.gauge-caption strong{font-size:14px}
.gauge-caption span{font-size:9px}
.overview-network{grid-column:1/7}
.overview-attention{grid-column:7/10}
.overview-storage{grid-column:10/13}
.panel-head{padding:16px}
.storage-summary{padding:4px 15px}
.overview-category{padding:16px 12px;gap:8px}
.overview-category strong{font-size:15px}
.overview-categories .icon{width:19px}
.topbar{padding:0 24px}
main{padding:24px}
.intro{gap:20px;padding:35px}
.intro-network{padding:10px}
.intro-branches{padding-left:15px;margin-left:15px}
}

@media(max-width:1150px){.sidebar{width:192px;padding:25px 11px}
.app{margin-left:192px}
.brand{font-size:18px}
.gauges{grid-template-columns:repeat(2,1fr)}
.gauge-content{justify-content:space-around}
.overview-network{grid-column:1/8;grid-row:3}
.overview-attention{grid-column:8/13;grid-row:3}
.overview-storage{grid-column:1/-1;grid-row:4;min-height:150px;max-height:none}
.storage-summary{display:flex;gap:25px}
.storage-summary-row{flex:1;border-bottom:0}
.overview-categories{grid-template-columns:repeat(3,1fr)}
.intro{grid-template-columns:1fr}
.intro-network{padding:25px}
.features{gap:13px}
.grid{grid-template-columns:1fr}
}

@media(max-width:760px){.sidebar{position:static;width:100%;padding:15px 17px;display:block}
.brand{font-size:17px}
.mark{width:29px;height:33px;font-size:23px}
.brand-sub{font-size:8px}
.workspace-label,.sidebar-bottom{display:none}
nav{display:flex;overflow-x:auto;gap:3px;margin-top:15px}
.nav{padding:9px 12px;font-size:11px;flex-shrink:0}
.nav>.icon{width:15px;height:15px}
.nav-count{display:none}
.app{margin-left:0}
.topbar{height:60px;padding:0 17px;gap:10px}
.breadcrumb{font-size:10px;gap:8px}
.account{gap:7px}
.account>#user-name{display:none}
main{padding:23px 17px}
.page-heading{align-items:flex-start;flex-direction:column;gap:15px}
.page-heading>.actions{justify-content:flex-start}
.page-heading .eyebrow{font-size:9px}
h1{font-size:24px}
.gauges{gap:11px}
.gauge-card{padding:14px 12px}
.gauge{width:88px;height:88px}
.gauge-content{flex-direction:column;gap:4px}
.gauge-caption{text-align:center;gap:4px}
.gauge-caption strong{font-size:14px}
.gauge-caption span{font-size:9px}
.dashboard{gap:13px}
.overview-category{padding:14px 10px}
.overview-category>.icon{display:none}
.overview-network,.overview-attention,.overview-storage{grid-column:1/-1;grid-row:auto;min-height:260px;max-height:none}
.overview-network{height:360px}
.overview-storage{min-height:200px}
.storage-summary{display:block}
.storage-summary-row{border-bottom:1px solid var(--border)}
.features{grid-template-columns:1fr}
.intro{padding:28px 23px}
.intro h1{font-size:30px}
.intro p{font-size:12px}
.intro-network{padding:20px 0}
.intro-branches{display:none}
.intro-line{width:45px}
.detail-panel{inset:0 0 0 auto;width:100vw;z-index:40}
.detail-body{padding:24px}
.notification-stack{top:15px;right:15px;width:calc(100vw - 30px)}
.toolbar{padding:13px}
.toolbar input{width:100%}
.table-wrap th,.table-wrap td{padding:14px}
.controller-grid{grid-template-columns:1fr}
.topology-stage{height:65vh;min-height:350px}
.graph-legend{font-size:9px;gap:9px}
.desktop-toolbar{align-items:flex-start;flex-direction:column}
.desktop-screen{min-height:260px;height:50vh}
.desktop-toolbar .button{font-size:10px}
.desktop-status{font-size:9px;flex-wrap:wrap}
.panel-body{padding:20px}
.login-panel{padding:30px;margin:30px auto}
footer{padding:15px 17px}
.sample-time{justify-items:start}
}

/* 교시: "우측 패널의 등장과 퇴장에 항상 애니메이션이 있어야 한다." */
@media(prefers-reduced-motion:reduce){*:not(.detail-panel),*::before,*::after{animation:none!important;transition:none!important}
}


.file-breadcrumb{display:flex;align-items:center;gap:8px;font-size:12px;color:#8da2aa;flex-wrap:wrap}
.file-breadcrumb .button{border-color:transparent;background:none}
.file-name{display:flex;align-items:center;gap:12px;font-size:14px;max-width:520px}
.file-name span{overflow-wrap:anywhere}
.file-name .icon{color:#7ca993}
.loading{padding:70px;text-align:center;color:#89a0a9;font-size:12px}
.loading .spinner{margin-right:10px;vertical-align:middle}

@media(min-width:1151px){body:has(.overview-main) footer{display:none}
.overview-main .overview-network,.overview-main .overview-attention,.overview-main .overview-storage{height:clamp(310px,calc(100vh - 560px),430px);min-height:0;max-height:none}
.overview-main .network-preview .topology{min-height:0}
.overview-main .storage-summary-row{padding:12px 0}
.overview-main .storage-summary-row .capacity{margin-top:8px}
.overview-main .panel-head{min-height:58px}
}


/* Connection map: readable cards, observed links and explicit status. */
.mark .icon{width:24px;height:24px;stroke-width:1.5}
.notification-label{margin:0 3px;font-size:12px}
.topology-toolbar{display:flex;align-items:center;gap:24px;padding:18px 22px;border-bottom:1px solid var(--border);flex-wrap:wrap}
.graph-summary{display:flex;align-items:center;gap:13px}
.graph-summary strong{font-size:14px;font-weight:650}
.graph-summary>span{font-size:12px;color:var(--muted)}
.graph-states{display:flex;gap:15px;margin-left:auto}
.graph-search{margin:0;display:flex;align-items:center;gap:9px;border:1px solid var(--border);border-radius:8px;padding:0 11px;background:#fbfcfc;min-height:38px}
.graph-search input{border:0;background:none;padding:8px 0;width:165px;font-size:12px;outline:none}
.graph-search:focus-within{outline:2px solid #8dcac3;outline-offset:2px}
.graph-search .icon{width:16px;height:16px;color:#6f8a92}
.graph-search [data-graph-results]{font-size:11px;color:var(--accent);white-space:nowrap}
.topology-stage{position:relative;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;height:calc(100dvh - 300px);min-height:380px;background-color:#fbfcfd;background-image:radial-gradient(#cbd9df .7px,transparent .7px);background-size:18px 18px;overflow:hidden}
.topology{cursor:grab}
.topology.dragging{cursor:grabbing}
.graph-region{fill:#f3f7f9;fill-opacity:.6;stroke:#e4ecef;stroke-width:1}
.graph-link{fill:none;stroke:#8eaab7;stroke-width:1.5;opacity:.85;vector-effect:non-scaling-stroke;transition:opacity .15s}
.graph-link.management{stroke:#9eafb9;stroke-dasharray:4 5;opacity:.8}
/* 교시: "VPN 활성화 시 네트워크 토폴로지에도 점선으로 표기해야 한다." */
.graph-link.vpn{stroke:#168c83;stroke-width:2;stroke-dasharray:4 5;opacity:1}
.graph-link.highlighted{stroke:#168c83;stroke-width:2.2;opacity:1}
.graph-node{cursor:pointer;outline:none;transition:opacity .15s}
.graph-node-body{fill:#fff;stroke:#d9e3e8;stroke-width:1;filter:drop-shadow(0 2px 2px #233c4910)}
.graph-node.major .graph-node-body{stroke:#b8d0d3;fill:#fafffe;stroke-width:1.3}
.graph-node-symbol{fill:#eef4f7}
.graph-node .icon{color:#6a8896}
.graph-node.major .graph-node-symbol{fill:#e6f4f0}
.graph-node.major .icon{color:#318e80}
.graph-node .graph-title{font-family:Pretendard,sans-serif;font-size:12px;font-weight:570;fill:#304d5c;pointer-events:none}
.graph-node.major .graph-title{font-size:14px;font-weight:650}
.graph-node .graph-caption{font-family:Pretendard,sans-serif;font-size:10px;fill:#778e99;pointer-events:none}
.graph-node .graph-status{fill:var(--green);stroke:#fff;stroke-width:2}
.graph-node.amber .graph-status{fill:var(--amber)}
.graph-node.red .graph-status{fill:var(--red)}
.graph-node:hover .graph-node-body,.graph-node:focus-visible .graph-node-body,.graph-node.selected .graph-node-body{stroke:#168c83;stroke-width:2;fill:#f4fcf9}
.graph-node.search-match .graph-node-body{stroke:#168c83;stroke-width:2.5;fill:#e8f8f1}
.graph-node:hover .graph-status,.graph-node:focus .graph-status{stroke:#fff;stroke-width:2}
.graph-node.dimmed,.graph-link.dimmed{opacity:.28}
.graph-controls{justify-self:center;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:3px;max-width:calc(100% - 32px);margin:0 16px 16px;border:1px solid #dce6e9;background:white;padding:5px;border-radius:10px;box-shadow:0 3px 10px #2540510b}
.graph-controls .button{border:0;background:transparent;min-height:32px}
.graph-controls .button:not(:disabled):hover{background:#eef6f3}
.graph-controls .icon-button{font-size:20px;padding:0 9px;min-width:30px}
.graph-controls>span{width:1px;height:21px;background:var(--border);margin:0 6px}
.graph-controls output{width:48px;text-align:center;font-size:12px;color:#6a808c;font-variant-numeric:tabular-nums}
.graph-legend{justify-content:flex-start;align-items:center;padding:14px 22px;font-size:11px;color:#6c838f;border-top:1px solid #edf1f3;background:white}
.graph-legend>span{display:inline-flex;align-items:center;gap:8px}
.graph-help{margin-left:auto;color:#83949c}
.legend-line{display:inline-block;width:25px;height:0;border-top:2px solid #8eaab7}
.legend-line.management{border-top-style:dashed}
.legend-line.vpn{border-top:2px dashed #168c83}
.network-preview{padding:12px 16px;background:linear-gradient(180deg,#fcfefe,#f8fbfb)}
.overview-network .graph-legend{border-top:0;justify-content:center}
.overview-network .panel-head p{font-size:12px}
.attention-item{font-size:13px}
.attention-item small{font-size:12px;color:#708791}
.storage-summary-row{font-size:13px}
body:has(.topology-main) footer{display:none}
@media(min-width:1151px){
  .overview-main{height:calc(100dvh - 68px);min-height:680px;flex:none;display:flex;flex-direction:column;padding-bottom:26px}
  .overview-main .page-heading{flex-shrink:0;margin-bottom:22px}
  .dashboard{flex:1;min-height:0;grid-template-rows:auto auto minmax(0,1fr)}
  .overview-main .overview-network,.overview-main .overview-attention,.overview-main .overview-storage{height:auto;grid-row:3;min-height:0;max-height:none;overflow:hidden}
  .overview-main .overview-attention,.overview-main .overview-storage{display:flex;flex-direction:column}
  .overview-main .storage-summary,.overview-main .attention-list{overflow:auto;scrollbar-width:thin;min-height:0}
  .overview-main .network-preview .topology{min-height:0}
  .gauge-card{padding:19px 20px}
  .gauge{width:116px;height:116px}
  .gauge-content{gap:17px}
  .overview-category{padding:17px}
  .topology-main{display:flex;flex:none;flex-direction:column;height:calc(100dvh - 68px);min-height:650px;padding-bottom:26px}
  .topology-main .page-heading{flex-shrink:0}
  .topology-panel{flex:1;min-height:0;display:flex;flex-direction:column;margin:0}
  .topology-stage{flex:1;min-height:0;height:auto}
}
@media(min-width:1151px) and (max-width:1550px){
  .gauge-content{gap:10px}
  .gauge{width:92px;height:92px}
  .gauge-card{padding:16px}
  .gauge-caption strong{font-size:15px}
  .gauge-caption span{font-size:11px}
  .graph-states{gap:10px}
  .topology-toolbar{gap:14px}
  .graph-summary{flex-direction:column;align-items:flex-start;gap:4px}
  .overview-category{padding:15px 11px;gap:8px}
}
@media(max-width:1150px){
  .graph-search{margin-left:auto}
  .graph-states{margin-left:0}
  .graph-help{display:none}
}
@media(max-width:720px){
  .app{margin-left:0}
  .notification-label{display:none}
  .graph-summary{flex-direction:column;align-items:flex-start;gap:4px}
  .graph-states{gap:10px}
  .graph-states .status{font-size:10px}
  .graph-search{width:100%;margin:0}
  .graph-search input{flex:1;width:auto}
  .graph-controls{max-width:calc(100% - 24px);margin:0 12px 12px}
}

/* Remote workspace and the same right-hand inspector used throughout. */
.desktop-summary{display:flex;align-items:center;gap:24px;margin:-5px 0 24px;color:#6a818c;font-size:12px;flex-wrap:wrap}
.desktop-summary>span{display:flex;align-items:center;gap:8px}
.desktop-summary .icon{width:16px;height:16px}
.desktop-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:22px}
.remote-card{margin:0}
.desktop-grid>.remote-card{content-visibility:auto;contain-intrinsic-block-size:auto 360px}
.remote-card-head{display:flex;align-items:center;justify-content:space-between;padding:21px 24px}
.remote-card-head h2{font-size:16px}
.remote-card-head p{margin-top:6px;font-size:12px}
.remote-card-screen{background:linear-gradient(140deg,#e9f3f3,#f1f5f9);min-height:195px;margin:0 24px;border:1px solid #e3ecef;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:24px}
.remote-display{display:grid;place-items:center;gap:8px;color:#4c7f85;font-size:12px}
.remote-display>.icon{width:74px;height:60px;stroke-width:1}
.remote-capabilities{display:flex;gap:18px;color:#6b8b93;font-size:10px}
.remote-capabilities>span{display:flex;gap:5px;align-items:center}
.remote-capabilities .icon{width:14px;height:14px}
.remote-card-foot{padding:19px 24px 24px}
.remote-card-foot>p{font-size:12px;margin-bottom:16px}
.remote-card-foot .actions .primary{flex:1}
.desktop-settings-section{padding:20px 0;border-bottom:1px solid var(--border)}
.desktop-settings-section:first-child{padding-top:0}
.desktop-settings-section>h3{font-size:13px;margin-bottom:14px}
.monitor-picker{display:grid;gap:8px}
.monitor-option{margin:0;display:grid;grid-template-columns:26px minmax(0,1fr) 26px;align-items:center;gap:12px;padding:16px;border:1px solid var(--border);border-radius:9px;cursor:pointer}
.monitor-option:has(:checked){border-color:#78b6a7;background:#f2faf7}
.monitor-option input{grid-column:3;grid-row:1;justify-self:center;width:15px;accent-color:var(--accent)}
.monitor-option>.icon{grid-column:1;grid-row:1;width:26px;height:26px;color:#6b9994}
.monitor-option>span{grid-column:2;grid-row:1;min-width:0;overflow-wrap:anywhere}
.monitor-option strong{display:block;font-size:12px;color:#3c5b65;font-weight:550}
.monitor-option small{display:block;color:#7c929c;font-size:11px;margin-top:5px}
.monitor-option em{font-style:normal;font-size:9px;margin-left:4px;background:#e1f1ea;color:#3f8b73;padding:2px 4px;border-radius:4px}
.setting-switch{display:grid;grid-template-columns:19px minmax(0,1fr) 19px;align-items:center;gap:12px;min-height:40px;font-size:12px;margin-top:12px}
.setting-switch>span{grid-column:1/3;display:grid;grid-template-columns:19px minmax(0,1fr);align-items:center;gap:12px}
.setting-switch input{grid-column:3;justify-self:center;width:16px;height:16px}
.drawer-form-actions{position:sticky;bottom:-24px;background:white;padding:20px 0 6px;margin-top:5px}
.desktop-permission{font-size:12px;padding-top:18px}
.desktop-toolbar button[aria-pressed=false]{color:#94a3ab;background:#f4f6f7}
.desktop-workspace:fullscreen{display:flex;flex-direction:column;background:#10222c;border:0;border-radius:0}
.desktop-workspace:fullscreen .desktop-screen{flex:1;height:auto;min-height:0}
.desktop-workspace:fullscreen .desktop-toolbar{background:#fff}
.desktop-workspace:fullscreen .desktop-status{color:#c7d8df}
.desktop-overlay.ended .spinner{display:none}
.desktop-overlay.ended{background:#10222cbf;color:#d3e1e8}
@media(max-width:720px){.desktop-grid{grid-template-columns:1fr}.desktop-summary{gap:12px}.drawer-form-actions{bottom:-24px}}

.file-retry{display:flex;align-items:center;justify-content:center;gap:16px;padding:28px}
.file-drawer-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
.file-drawer-tools{display:flex;gap:10px;margin:16px 0}
.file-drawer-location{display:flex;align-items:center;gap:14px;width:100%;padding:18px 0;border:0;border-bottom:1px solid var(--border);background:none;text-align:center;color:inherit;cursor:pointer}
.file-drawer-location>span{flex:1;min-width:0}
.file-drawer-location strong,.file-drawer-location small{display:block}
.file-drawer-location small{font-size:12px;color:var(--muted);margin-top:5px}
.file-drawer-row{display:flex;align-items:center;border-bottom:1px solid var(--border)}
.file-drawer-row>.file-row{flex:1;min-width:0;border:0}
.file-drawer-row .file-row>span{overflow-wrap:anywhere}
.capacity-status{padding:10px 0}
.desktop-screen.dragging::after {content:"바탕 화면에 업로드";position:absolute;inset:16px;display:grid;place-items:center;border:2px dashed #9bbcff;border-radius:12px;background:#163a70d9;color:#fff;font-size:20px;font-weight:650;pointer-events:none;z-index:4;}

.network-preview .graph-node.major .graph-title{font-size:12px}
.network-preview .graph-node .graph-caption{font-size:9px}

/* Shared spacing; gesture surfaces keep text selectable only in inspectors. */
button,.button,.nav,.topology,.topology-toolbar,.graph-legend,.graph-controls,.file-table,.file-breadcrumb,.desktop-screen{user-select:none;-webkit-user-select:none}
input:not([type=checkbox]):not([type=radio]),select{min-height:40px;line-height:20px}
input[type=checkbox],input[type=radio]{width:16px;height:16px;min-height:0;flex-shrink:0;accent-color:var(--accent)}
.checkbox-field{display:flex;align-items:center;gap:8px}
.upload-button:has(input:disabled){opacity:.48;cursor:not-allowed}
.mount-path{max-width:260px;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
.file-toolbar{position:relative;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 24px;flex-wrap:wrap;border-bottom:1px solid var(--border)}
.file-breadcrumb{display:flex;align-items:center;gap:4px;flex-wrap:wrap;margin:0;min-width:0}
.file-breadcrumb .button{min-width:36px;min-height:36px;max-width:240px;overflow:hidden;text-overflow:ellipsis;border-color:transparent}
.file-breadcrumb .button[aria-current][aria-current]{background:var(--accent-soft);color:var(--accent);font-weight:600}
.file-table{width:100%;table-layout:fixed}
.file-table th:first-child{width:42%}
.file-table th:nth-child(2){width:26%}
.file-table th:nth-child(3),.file-table th:nth-child(4){width:16%}
.file-table th{padding:8px 16px}
.file-table td{padding:16px 24px;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.file-table tbody tr{cursor:pointer}
.file-table tbody tr:hover{background:#f5f9fa}
.file-table tbody tr.selected{background:#eaf5f3;box-shadow:inset 3px 0 var(--accent)}
.file-table .inventory-spacer>td{padding:0;border:0;background:transparent}
.sort-button{border:0;background:transparent;justify-content:flex-start;padding:8px;font-size:12px;gap:12px;color:var(--muted)}
.sort-button>span{color:#8aa3ad}
.file-name{font-size:14px;gap:12px;min-height:24px;min-width:0}
.file-name>span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.file-emoji{width:28px;flex-shrink:0;font-size:22px;line-height:1.2;text-align:center}
.file-preview{height:210px;display:grid;place-items:center;border-radius:12px;background:#f3f7f8;border:1px solid var(--border);margin-bottom:24px;overflow:hidden}
.file-preview img,.file-preview video{width:100%;height:100%;object-fit:contain}
.file-preview audio{max-width:calc(100% - 32px)}
.file-hero-emoji{font-size:68px}
.file-summary{justify-content:space-between;gap:16px}
.file-summary:has(>.status){display:grid;grid-template-columns:16px minmax(0,1fr) 16px}
.file-summary:has(>.status)>div{grid-column:2}
.file-summary>.status{grid-column:3;justify-self:center}
.file-summary h3{overflow-wrap:anywhere}
.file-actions .button{flex:1 1 130px;justify-content:center}
.file-context-menu{position:fixed;z-index:100;width:230px;padding:8px;border:1px solid #dce6e9;border-radius:12px;background:#fff;box-shadow:0 10px 36px #18343f29;display:grid;gap:2px}
.file-context-menu .menu-item{border:0;justify-content:flex-start;gap:12px;width:100%;padding:10px 12px}
.file-context-menu .menu-item[data-action=file-delete]{border-top:1px solid var(--border);border-radius:0 0 6px 6px;margin-top:4px;color:var(--red)}
.metadata-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:8px}
.metadata-fields{margin:0}
.metadata-field{padding:14px 0;border-bottom:1px solid var(--border)}
.metadata-field dt{font-size:12px;color:var(--muted);margin-bottom:6px;overflow-wrap:anywhere}
.metadata-field dd{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0;font-size:14px;line-height:1.5}
.metadata-field dd>span:first-child{min-width:0;overflow-wrap:anywhere;white-space:pre-wrap}
.metadata-field .actions{flex-shrink:0;gap:4px;flex-wrap:nowrap}
.folder-picker{max-height:320px;overflow:auto;margin-top:16px}
.folder-choice{width:100%;display:grid;grid-template-columns:24px minmax(0,1fr) 24px;align-items:center;justify-items:center;text-align:center;gap:12px;background:none;border:0;border-bottom:1px solid var(--border);padding:14px 8px;color:inherit}
.folder-choice>span:nth-child(2){min-width:0;overflow-wrap:anywhere}
.folder-choice:not(:disabled):hover{background:var(--accent-soft)}
.folder-empty{display:flex;align-items:center;justify-content:center;gap:10px;min-height:96px;margin:0;padding:24px;color:var(--muted);font-size:13px}
.folder-more{margin:12px auto;display:flex}
.file-browser{position:relative;min-height:260px}
.drop-target{outline:2px solid #17998c!important;outline-offset:-2px;background:#e4f6f0!important}
.file-toolbar:has(.file-drop-hint:not([hidden]))>.actions{visibility:hidden}
.file-drop-hint{position:absolute;z-index:2;bottom:16px;right:24px;max-width:min(440px,calc(100% - 48px));padding:10px 16px;border:1px solid #a4d9c9;border-radius:9px;background:#e4f6f0;color:#086f62;font-size:13px;font-weight:600;line-height:20px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-shadow:0 4px 16px #18343f14;pointer-events:none}
/* 교시: "파일시스템, 파일 목록, 화면 열기 설정창을 포함하여 무엇을 누르든 즉각 반응해야 한다." */
/* The fixed inspector leaves file rows in place throughout a double click. */
@media(max-width:760px){.file-toolbar{padding:16px;gap:12px}.file-table th:nth-child(2){width:32%}.file-table th:first-child{width:48%}.file-table th:nth-child(3){width:20%}.file-table th:nth-child(4),.file-table td:nth-child(4){display:none}.file-table td{padding:14px 16px}.file-table th{padding:8px}.file-table td:nth-child(2){font-size:11px}.file-breadcrumb .button{max-width:160px}.file-preview{height:190px}}

.gauge,.overview-category,.desktop-toolbar,.desktop-status,.monitor-picker,.remote-card-screen{user-select:none;-webkit-user-select:none}

/* User layouts share the same twelve-column grid as the built-in dashboard. */
.sidebar-navigation{min-height:0;overflow:auto;scrollbar-width:thin;scrollbar-color:#395059 transparent}
.sidebar-bottom{flex-shrink:0}
.dashboard-menu-section{margin-top:24px}
.dashboard-menu-section .workspace-label{margin:0 12px 10px}
#dashboard-menu{border:1px dashed transparent;border-radius:10px;min-height:44px;padding:3px}
#dashboard-menu.empty::after{content:"대시보드를 여기로 끌어 놓으세요";display:block;padding:12px 10px;font-size:11px;line-height:1.6;color:#91a9ad}
#dashboard-menu.accepting{border-color:#668d8a;background:#203c43}
#dashboard-menu.drop-target{border-color:#9ccec3;background:#294a50}
#dashboard-menu .nav{position:relative;min-width:0}
#dashboard-menu .nav>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#dashboard-menu .insert-before::before,#dashboard-menu .insert-after::after{content:"";position:absolute;left:7px;right:7px;height:2px;background:#8fd3c4;border-radius:2px}
#dashboard-menu .insert-before::before{top:-2px}
#dashboard-menu .insert-after::after{bottom:-2px}
.dashboard-layout{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:repeat(var(--dashboard-rows,12),minmax(0,1fr));gap:18px;flex:1;min-height:0}
.dashboard-widget{position:relative;display:flex;flex-direction:column;min-width:0;min-height:0;border-radius:var(--radius)}
.dashboard-widget-content{height:100%;min-height:0;min-width:0;container-type:inline-size}
.dashboard-widget-content>.panel,.dashboard-widget-content>.gauge-card{height:100%;margin:0;min-height:0}
.dashboard-widget-content>.panel{display:flex;flex-direction:column;overflow:hidden}
.dashboard-widget .panel-head{flex-shrink:0;padding:16px 20px;min-height:58px}
.dashboard-widget .panel-head h2{overflow-wrap:anywhere;min-width:0}
.dashboard-widget .panel-head>.button{flex-shrink:0}
.dashboard-widget .attention-list,.dashboard-widget .storage-summary,.widget-device-list{flex:1;min-height:0;overflow:auto;scrollbar-width:thin}
.dashboard-widget .storage-summary-row{content-visibility:auto;contain-intrinsic-block-size:auto 70px}
.dashboard-widget .attention-item{content-visibility:auto;contain-intrinsic-block-size:auto 40px}
.widget-device-row{content-visibility:auto;contain-intrinsic-block-size:auto 44px}
.dashboard-widget .attention-item>.icon{width:14px;height:14px;flex-shrink:0;margin-top:4px}
.dashboard-widget .gauge-card{display:flex;flex-direction:column;justify-content:center;overflow:auto;scrollbar-width:thin;padding:18px 22px}
.dashboard-widget .gauge-content{flex:1;align-items:center;margin-top:8px;gap:16px}
.dashboard-widget .gauge-caption strong{font-size:clamp(14px,4.8cqw,19px);white-space:normal;overflow-wrap:anywhere}
.dashboard-widget .gauge-heading h2{overflow-wrap:anywhere}
.widget-resource-summary{height:100%;display:flex;flex-direction:column;min-height:0}
.widget-resource-summary>h2{font-size:13px;margin:0 0 8px}
.widget-resource-summary .overview-categories{height:100%;min-height:0;grid-template-columns:repeat(auto-fit,minmax(min(150px,100%),1fr));overflow:auto;scrollbar-width:thin}
.dashboard-widget .overview-category{padding:14px 18px}
.widget-network .network-preview{padding:8px 14px}
.widget-network .network-preview .topology{min-height:0}
.widget-network .graph-legend{flex-shrink:0;border:0;padding:10px 18px 16px;font-size:10px}
.widget-empty{padding:22px;color:var(--muted);font-size:13px;line-height:1.7}
.widget-device-list{padding:0 20px}
.widget-device-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:17px 0;border-bottom:1px solid #edf1f3}
.widget-device-row:last-child{border-bottom:0}
.widget-device-row>button:first-child{border:0;background:none;color:inherit;display:flex;align-items:center;gap:12px;min-width:0;padding:0;text-align:center;flex:1}
.widget-device-row>button:first-child>span:last-child{min-width:0}
.widget-device-row strong{display:block;font-size:13px;overflow-wrap:anywhere;font-weight:550}
.widget-device-row small{display:block;margin-top:6px;color:var(--muted);font-size:11px;line-height:1.5}
.widget-device-row>.button{flex-shrink:0}
.widget-security-summary{display:flex;gap:14px;align-items:center;padding:22px;border-bottom:1px solid #edf1f3}
.widget-security-summary>.icon{color:var(--green);width:32px;height:32px;flex-shrink:0}
.widget-security-summary strong,.widget-security-summary span{display:block;overflow-wrap:anywhere}
.widget-security-summary span{font-size:12px;color:var(--muted);margin-top:5px}
.dashboard-layout.editing{border-radius:14px;background:radial-gradient(#bccdcf 1px,transparent 1px);background-size:18px 18px}
.editing .dashboard-widget{outline:1px solid #a4c5bf;background:#fff}
.editing .dashboard-widget-content{flex:1;height:auto}
.editing .dashboard-widget-content>.panel,.editing .dashboard-widget-content>.gauge-card{border-top-left-radius:0;border-top-right-radius:0;border-top:0}
.widget-edit-bar{height:33px;flex-shrink:0;display:flex;align-items:center;gap:4px;background:#edf6f3;border-radius:14px 14px 0 0;border-bottom:1px solid #cfe0dc;padding:2px 6px}
.widget-move,.widget-tool{color:#51766e;border:0;background:transparent;display:flex;align-items:center;justify-content:center;border-radius:5px;height:27px}
.widget-move{justify-content:flex-start;gap:8px;min-width:0;flex:1;padding:0 6px;cursor:grab;touch-action:none;font-size:10px}
.widget-move>span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.widget-move>span:first-child{font-size:20px}
.widget-tool{width:27px;padding:4px;flex-shrink:0}
.widget-tool .icon{width:14px;height:14px}
.widget-tool:hover,.widget-move:hover{background:#d9ece5}
.widget-resize{position:absolute;right:2px;bottom:2px;width:24px;height:24px;border:0;border-radius:8px 0 10px 0;background:#e2eeea;cursor:nwse-resize;touch-action:none;color:#578476}
.widget-resize::after{content:"";position:absolute;right:5px;bottom:5px;width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor}
.widget-dragging{z-index:2;outline:2px solid var(--accent)!important;box-shadow:0 8px 30px #173b4324}
.widget-dragging .widget-move{cursor:grabbing}
.widget-dragging.widget-blocked{outline-color:var(--red)!important}
.dashboard-edit-label{font-size:12px;color:var(--accent);font-weight:600;margin-right:4px}
.dashboard-library>h2{font-size:15px;margin:8px 0 18px}
.dashboard-library>h2:not(:first-child){margin-top:34px}
.dashboard-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:20px}
.dashboard-card{border:1px solid var(--border);background:#fff;border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;min-width:0}
.dashboard-card[draggable=true]{cursor:grab}
.dashboard-card:hover{border-color:#b1cbc5;box-shadow:0 4px 20px #233f4908}
.dashboard-card-open{display:flex;flex-direction:column;align-items:flex-start;width:100%;background:none;border:0;padding:18px;text-align:center;color:inherit;gap:9px;flex:1}
.dashboard-preview{display:block;width:100%;height:145px;background:#f2f6f6;border:1px solid #e6eeee;border-radius:8px;padding:14px;fill:#cbded9;flex-shrink:0}
.dashboard-preview .preview-topology{fill:#a0c2b8}
.dashboard-preview .preview-cpu{fill:#b6cce7}
.dashboard-preview .preview-memory{fill:#c8bfe0}
.dashboard-preview .preview-storage,.dashboard-preview .preview-volumes{fill:#a9d1c7}
.dashboard-preview .preview-traffic,.dashboard-preview .preview-attention{fill:#e7d1ac}
.dashboard-card-title{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:600;overflow-wrap:anywhere}
.dashboard-card-title small{font-size:10px;font-weight:500;background:var(--accent-soft);color:var(--accent);padding:3px 7px;border-radius:5px;white-space:nowrap}
.dashboard-card .muted{font-size:12px}
.dashboard-card-actions{border-top:1px solid #edf1f3;padding:12px 18px;display:flex;gap:10px;justify-content:space-between}
.dashboard-empty{grid-column:1/-1;grid-row:1/-1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;min-height:240px;padding:28px;background:#fff;border:1px dashed #cbdcd8;border-radius:var(--radius);text-align:center}
.dashboard-empty>.icon{width:34px;height:34px;color:#6f9990}
.dashboard-empty h2{font-size:16px}
.dashboard-empty p{color:var(--muted);font-size:13px}
.widget-catalog{display:flex;flex-direction:column;gap:10px}
.widget-choice{display:flex;align-items:center;gap:14px;text-align:center;padding:16px;border:1px solid var(--border);border-radius:10px;background:#fff;color:inherit}
.widget-choice:hover{border-color:#9ebeb6;background:#f5faf8}
.widget-choice>span:first-child{width:36px;height:36px;border-radius:9px;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center;flex-shrink:0}
.widget-choice>span:nth-child(2){flex:1;min-width:0}
.widget-choice strong{display:block;font-size:13px;font-weight:550}
.widget-choice small{display:block;margin-top:5px;color:var(--muted);font-size:11px;line-height:1.6}
.widget-choice>.icon{width:15px;color:#7c9690;flex-shrink:0}
.range-labels{display:flex;justify-content:space-between;font-size:11px;color:var(--muted)}
.detail-body>form[id^=dashboard-]{margin-top:24px}
.detail-body input[type=range]{accent-color:var(--accent);padding:0;height:28px}
.detail-body .checkbox-field{display:flex;align-items:center;gap:10px}
.detail-body .checkbox-field input{width:16px;height:16px;accent-color:var(--accent)}
.dashboard-layout.editing,.dashboard-gallery,.dashboard-menu-section{user-select:none;-webkit-user-select:none}
@container(max-width:280px){
  .dashboard-widget .gauge-card{padding:14px}
  .dashboard-widget .gauge{width:80px;height:80px}
  .dashboard-widget .gauge-content{gap:10px}
  .dashboard-widget .gauge-caption span{font-size:11px}
  .dashboard-widget .panel-head{padding:12px;gap:8px;flex-wrap:wrap}
  .dashboard-widget .panel-head h2{font-size:12px}
  .widget-device-row{flex-wrap:wrap}
}
@container(max-width:200px){
  .dashboard-widget .gauge{width:60px;height:60px}
  .dashboard-widget .gauge-card{padding:10px}
  .dashboard-widget .gauge-caption strong{font-size:12px}
  .dashboard-widget .gauge-caption span{font-size:10px}
  .dashboard-widget .gauge-heading h2{font-size:11px}
}
@media(min-width:1151px){
  .overview-main.dashboard-overflow{height:auto;min-height:calc(100dvh - 68px)}
  .dashboard-overflow .dashboard-layout{flex:none;height:calc(max(500px,100dvh - 218px)*var(--dashboard-scale))}
}
@media(max-width:1150px){
  .dashboard-layout{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:none;grid-auto-rows:auto;gap:16px}
  .dashboard-widget{grid-column:auto!important;grid-row:auto!important;min-height:200px}
  .dashboard-widget[data-width="12"],.dashboard-widget.widget-topology,.dashboard-widget.widget-resources{grid-column:1/-1!important}
  .dashboard-widget.widget-topology{height:420px}
  .dashboard-widget.widget-resources{height:180px;min-height:0}
  .dashboard-widget-content>.panel{max-height:480px}
  .widget-resize{display:none}
  .widget-move{cursor:default}
}
@media(max-width:760px){
  .sidebar-navigation{overflow:visible}
  .dashboard-menu-section{margin-top:10px}
  #dashboard-menu{padding:0;min-height:0;border:0}
  #dashboard-menu.empty{display:none}
  .dashboard-layout{gap:12px}
  .dashboard-widget:not(.widget-cpu):not(.widget-memory):not(.widget-storage):not(.widget-traffic){grid-column:1/-1!important}
  .dashboard-widget.widget-resources{height:240px}
  .dashboard-widget .gauge-content{align-items:flex-start;flex-direction:column;gap:7px}
  .dashboard-widget .gauge-card{padding:14px}
  .dashboard-widget .gauge{width:76px;height:76px}
  .dashboard-widget .gauge-caption strong{font-size:14px}
  .dashboard-widget .gauge-caption span{font-size:10px}
  .dashboard-gallery{grid-template-columns:1fr}
  .dashboard-card-open{padding:18px}
  .dashboard-edit-label{width:100%}
}

.file-browser .table-wrap{min-height:184px}
.file-browser[aria-busy="true"]{min-height:250px}
@media(min-width:761px){body:has(#detail-panel:not([hidden])) .notification-stack{right:442px;max-width:calc(100vw - 464px)}}
@media(max-width:760px){body:has(#detail-panel:not([hidden])) .notification-stack{top:88px}}

.modec-inbox{height:calc(100dvh - 350px)}
.modec-channel-list{overflow:auto}
.modec-conversations{display:flex;flex-direction:column;min-height:0}
.modec-conversations>.panel-head,.modec-conversations>.panel-foot{flex-shrink:0}
.modec-message-list{flex:1;min-height:0;overflow:auto;scrollbar-gutter:stable both-edges}
.modec-message{display:grid;grid-template-columns:38px minmax(0,1fr) 38px}
.modec-message>.icon{justify-self:center}
.modec-conversations>.panel-foot{border-top:1px solid var(--border)}
@media(max-width:760px){.modec-inbox{height:auto;min-height:0}.modec-conversations{height:calc(100dvh - 350px);min-height:390px}.modec-channel-list{overflow-x:auto}.modec-message-heading{flex-wrap:wrap;gap:5px}}

.icon-sprite{position:absolute;width:0;height:0;overflow:hidden;pointer-events:none}

.file-text-preview{margin:0;padding:20px;width:100%;height:100%;overflow:auto;white-space:pre-wrap;overflow-wrap:anywhere;box-sizing:border-box;font:13px/1.7 Pretendard,Inter,sans-serif;color:inherit;user-select:text}.folder-choice>span:has(strong){display:grid;gap:5px;min-width:0}.folder-choice strong{font-size:13px;font-weight:550;overflow-wrap:anywhere}.folder-choice small{font-size:11px;color:var(--muted)}

.modec-form-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:start}
.modec-form input:not([type=checkbox]){height:44px;box-sizing:border-box}
.modec-form .checkbox-field{justify-content:center}.modec-form .checkbox-field input{flex-shrink:0;margin:0}
.modec-contact-heading,.modec-contact-entry-head{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px}
.modec-contact-heading h3,.modec-contact-entry-head>span{grid-column:2;margin:0;justify-self:center}
.modec-contact-heading>.button,.modec-contact-entry-head>.button{grid-column:3;justify-self:end}
.modec-contact-heading{margin:10px 0 14px}.modec-contact-entry{display:grid;gap:12px;padding:16px;border:1px solid var(--border);border-radius:12px;background:#fafcfc}
[data-contact-list]{display:grid;gap:14px}.modec-form [data-modec-choice]{display:grid;gap:12px;min-width:0}
.modec-form .modec-contact-entry textarea{min-height:44px}.modec-form [data-choice-custom][hidden]{display:none}
.modec-form[data-modec-form=contact] select{height:44px;box-sizing:border-box}
.modec-form[data-modec-form=policy] select{height:44px;box-sizing:border-box;min-width:0;width:100%}
.modec-policy-rows,.modec-value-field,.modec-value-body,[data-value-children]{display:grid;gap:14px;min-width:0}
.modec-value-field>h3{text-align:center;margin:0}.modec-value-node{border:1px solid var(--border);border-radius:12px;background:#fafcfc;padding:14px;min-width:0;display:grid;gap:14px}
.modec-value-head{display:grid;grid-template-columns:36px minmax(0,1fr) 36px;gap:12px;align-items:end}.modec-value-head>label{min-width:0}
.modec-value-head:has([data-value-key]){grid-template-columns:36px minmax(0,1fr) minmax(0,1fr) 36px}.modec-value-head:has([data-value-key])::before{content:""}
.modec-value-mark{display:grid;place-items:center;min-height:44px;color:var(--muted)}.modec-value-head>.button{align-self:end;margin-bottom:4px}
.modec-value-body>.drawer-actions{margin:0;justify-content:center}.modec-form .modec-value-node textarea{min-height:60px}.modec-value-node input,.modec-value-node textarea{min-width:0;width:100%}
.modec-access{display:flex;justify-content:center;align-items:center;gap:24px}.modec-policy-rows .checkbox-field{min-height:44px}
.modec-policy-rows [data-modec-choice] select{height:44px}.modec-directory dl>div{display:grid;grid-template-columns:1fr 1fr;align-items:center}.modec-directory dd{display:flex;gap:8px;justify-content:center}
.modec-form [data-policy-fields]{padding:0;border:0}
/* 교시: "사용자 설정, 응답체계, 원격 데스크톱 등 나열형은 Flex 정렬 혹은 좌측 정렬한다." */
.modec-rule{display:flex;text-align:left}.modec-rule:has(>.icon)>.icon,.modec-rule:has(>.icon)>.modec-rule-icon{margin:0;flex-shrink:0}
@media(max-width:480px){.modec-value-node{padding:10px}.modec-value-head{gap:8px}.modec-value-head:has([data-value-key]){grid-template-columns:36px minmax(0,1fr) 36px}.modec-value-head:has([data-value-key])::before{grid-column:1;grid-row:2}.modec-value-head:has([data-value-key])>label:first-child{grid-column:1 / -1;grid-row:1}.modec-value-head:has([data-value-key])>label:nth-child(2){grid-column:2;grid-row:2}.modec-value-head:has([data-value-key])>.button{grid-column:3;grid-row:2}.modec-value-head input,.modec-value-head select{padding-left:8px;padding-right:8px}}
.modec-phonebook .modec-rule{display:flex}.modec-phonebook .modec-rule>.icon{margin:0;flex-shrink:0}
.modec-contact-details .modec-identity>span{justify-content:center}.modec-contact-details .modec-identity p{margin:8px 0 0}
.modec-contact-details .modec-chips{justify-content:center}
.modec-channel-filter{align-items:flex-start}.modec-channel-filter>span{white-space:normal;line-height:1.6;overflow-wrap:anywhere}.modec-channel-filter>.icon{margin-top:3px;flex-shrink:0}
.modec-conversations .panel-head .button{gap:10px;flex-shrink:0}.modec-conversations .panel-head p{overflow-wrap:anywhere;line-height:1.6}
.modec-contact-list .status{flex-shrink:0}
@media(max-width:760px){.modec-form-pair{grid-template-columns:1fr}.modec-conversations .panel-head{align-items:flex-start;gap:12px}.modec-conversations .panel-head .button{padding:10px}}

.modec-source-alerts{display:flex;flex-wrap:wrap;gap:12px;margin:0 0 18px}

.modec-channel-filter{align-items:center}.modec-channel-name{flex:1;min-width:0;display:grid;gap:5px}.modec-channel-name strong{font-weight:550;font-size:12px}.modec-channel-name small{font-size:10px;color:var(--muted)}.modec-channel-count{display:grid;gap:6px;text-align:center;flex-shrink:0}.modec-channel-count>.status{font-size:0;justify-content:flex-end}.modec-channel-count>.status .status-dot{margin:0}.modec-channel-count>small{font-size:10px;color:var(--muted)}

/* 교시: "모든 정렬은 가운데 정렬을 원칙으로 한다." */
:root{--space-card:24px;--space-grid:20px;--space-control:12px}
input,select,textarea,th,td,label,.detail-panel,.modal{text-align:center}
.page-heading .actions,.panel-head .actions,.drawer-actions,.detail-summary,.gauge-caption,.overview-category,.desktop-summary,.remote-card-foot .actions,.modec-stage-top,.modec-summary>div,.resource-icon,.file-name,.file-breadcrumb{justify-content:center;align-items:center}
.panel-head{padding:16px var(--space-card);min-height:64px;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)}
.panel-head>:first-child{grid-column:2;justify-self:center;min-width:0}
.panel-head>:last-child:not(:first-child){grid-column:3;justify-self:end}
.panel-body,.detail-body{padding:var(--space-card)}
.detail-head{padding:20px var(--space-card);display:grid;grid-template-columns:36px minmax(0,1fr) 36px}
.detail-summary>div{min-width:0}
.detail-head h2{grid-column:2;text-align:center}.detail-head>.button{grid-column:3}
.form-grid{gap:16px}.form-grid>label{margin-top:0;min-width:0}
.form-grid input,.form-grid select{min-width:0}
.desktop-grid,.controller-grid,.modec-summary,.modec-stages{gap:var(--space-grid);align-items:stretch;justify-content:center}
.desktop-grid{display:flex;flex-wrap:wrap}.desktop-grid>.remote-card{flex:1 1 310px;max-width:390px;min-width:0}
.controller-grid{grid-template-columns:repeat(auto-fit,minmax(310px,390px))}
.inventory-table{table-layout:fixed;min-width:760px}
.inventory-table.storage-table{min-width:920px}
.inventory-table td{text-align:center;vertical-align:middle;overflow-wrap:anywhere}
.inventory-table .resource-name,.inventory-table .resource-meta,.inventory-table .mount-path{overflow:hidden;overflow-wrap:anywhere}
.inventory-table .resource-name,.inventory-table .resource-meta,.inventory-table .resource-host,.inventory-table .mount-path>span{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}
.inventory-table .resource-icon>div{min-width:0}
.inventory-table .inventory-spacer>td{padding:0;border:0;background:transparent}
.inventory-table .inventory-group{padding:8px 20px;text-align:center;background:#f5f8fa;font-size:12px;font-weight:600}
.inventory-table .inventory-group>span{margin-left:8px;color:var(--muted);font-weight:400}
.file-table .sort-button{justify-content:center;width:100%}
/* 교시: "가령, 파일시스템에서 파일/폴더는 좌측 정렬이 옳다." */
.file-table th:first-child,.file-table td:first-child,.file-row{text-align:left}
/* 교시: "가독성을 자체 판단하여 정렬 기준을 재량껏 바꿀 수 있다." */
.file-text-preview{text-align:left}
.file-table th:first-child .sort-button,.file-name{justify-content:flex-start}
.file-name{width:100%;min-width:0}.file-name>span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* 교시: "사용자 설정, 응답체계, 원격 데스크톱 등 나열형은 Flex 정렬 혹은 좌측 정렬한다." */
.modec-stage{text-align:left}.modec-stage>p{margin-left:0;margin-right:0}.modec-stage-model{align-content:start}
.modec-rules,.modec-form,.modec-form label,.modec-form input,.modec-form select,.modec-form textarea,.modec-metadata,.modec-values{text-align:left}
.modec-summary>div{justify-content:center}
.remote-card-head{display:flex;gap:12px;text-align:left}.remote-card-head>div{flex:1;min-width:0}.remote-card-head>.status{flex-shrink:0}.remote-card-foot>p{display:none}
.remote-card-foot{justify-content:center}
.desktop-settings-section>h3,.desktop-settings-section label,.desktop-settings-section input,.desktop-settings-section select{text-align:left}
.setting-switch,.setting-switch>span{display:flex;align-items:center}.setting-switch{justify-content:space-between}.setting-switch input{flex-shrink:0}
.monitor-option{min-height:72px;padding:16px;align-items:center}
.sidebar{text-align:center}.brand,.connection{justify-content:center}.nav{display:grid;grid-template-columns:20px minmax(0,1fr) 20px;gap:8px}.nav>.icon{grid-column:1}.nav-count{grid-column:3;margin:0;min-width:20px}
.controller-grid .actions,.graph-legend,.graph-states{justify-content:center}
/* 교시: "가독성을 자체 판단하여 정렬 기준을 재량껏 바꿀 수 있다." */
.modec-message-body,.modec-channel-name{text-align:left}
.modec-message-heading{justify-content:space-between}.modec-message-foot{justify-content:flex-start}
.topology-toolbar{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)}.graph-summary{justify-content:center}.graph-states{margin:0}.graph-search{justify-self:end}
.storage-summary-row>span{justify-content:center;flex-wrap:wrap;gap:8px}.storage-summary-row .capacity-label{justify-content:center;gap:8px}
.capacity{margin-left:auto;margin-right:auto}.dashboard-card-open{align-items:center}.modec-directory h3,.device-facts{justify-content:center}
.page-heading>:not(:first-child){grid-column:3;justify-self:end}.page-heading p{display:none}
.actions{justify-content:center}.profile-form{margin:0 auto;text-align:left}.profile-form form{display:grid}.profile-form form>label{width:100%}.profile-form label,.profile-form input,.profile-form select{text-align:left}.profile-form .actions{justify-content:flex-start}.profile-form form>.button{margin-top:20px}
.info-row{display:flex;gap:20px;text-align:left}.info-row>span{min-width:0;overflow-wrap:anywhere}.info-row>span:first-child{flex:0 0 112px}.info-row>span:last-child{flex:1}
.profile-form form>.actions{margin-top:20px}.dashboard-gallery{grid-template-columns:repeat(auto-fit,minmax(250px,320px));justify-content:center}.dashboard-card-actions{justify-content:center}
.modec-stage>.button{width:100%}.modec-stage-top{display:flex;justify-content:flex-start}.modec-stage-top>.modec-budget{margin-left:auto}
.dashboard-widget .gauge-content{grid-template-columns:repeat(2,minmax(0,1fr));justify-items:center}
@media(min-width:1001px){.panel-head,.dashboard-widget .panel-head{height:70px;min-height:70px;padding:16px var(--space-card)}}
@media(max-width:1000px){.topology-toolbar{grid-template-columns:minmax(0,1fr);gap:16px}.graph-search{justify-self:center}.panel-head{grid-template-columns:minmax(0,1fr);justify-items:center}.panel-head>:first-child,.panel-head>:last-child:not(:first-child){grid-column:1;justify-self:center}.modec-conversations .panel-head{align-items:center}}
@media(max-width:760px){main{padding:20px 16px}.page-heading{grid-template-columns:minmax(0,1fr);gap:12px}.page-heading>:first-child,.page-heading>:not(:first-child){grid-column:1;justify-self:center}.desktop-grid>.remote-card{flex-basis:100%;max-width:none}.dashboard-widget .gauge-content{grid-template-columns:minmax(0,1fr)}}

/* 교시: "파일시스템 탭의 루트 디렉토리 화면도 일반 디렉토리처럼 구성해야 한다." */
.file-roots .capacity{margin:0 auto;min-width:0}
.file-roots .file-host{display:flex;justify-content:center;align-items:center;gap:12px}
.file-toolbar>input[type=search]{width:min(320px,100%);margin:0}
.file-roots th:first-child{width:36%}.file-roots th:nth-child(2){width:20%}.file-roots th:nth-child(3){width:28%}.file-roots th:nth-child(4){width:16%}
@media(max-width:760px){.file-roots th:first-child{width:44%}.file-roots th:nth-child(2){width:24%}.file-roots th:nth-child(3){width:32%}}

/* 교시: "채널에는 응답을 시험할 기능이 존재해야 한다." */
.modec-talk{flex:1;min-height:0;overflow:auto;padding:20px;display:flex;flex-direction:column;gap:14px;scroll-behavior:smooth}
.modec-talk .modec-bubble{margin:0;max-width:90%;align-self:flex-end}.modec-talk .sent,.modec-talk .attention{align-self:flex-start}
.modec-talk .modec-bubble p{white-space:pre-wrap;overflow-wrap:anywhere;margin:0}
.modec-composer{display:grid;grid-template-columns:minmax(0,1fr) 44px;align-items:center;gap:12px;border-top:1px solid var(--border);padding:16px}
.modec-composer textarea{width:100%;min-height:48px;max-height:160px;resize:vertical;box-sizing:border-box;border:1px solid var(--border);border-radius:12px;padding:12px;font:inherit}
.modec-composer .button{width:44px;height:44px;padding:0;justify-content:center}