/* Isolated presentation layer. Existing data and event handlers are retained. */
:root{--menu-ink:#1c2b43;--menu-blue:#335deb;--menu-muted:#61718a;--menu-line:#dfe6f0;--side-width:280px}
body{background:#f4f6fb;color:var(--menu-ink);line-height:1.55;-webkit-font-smoothing:antialiased}
.workspace{background:#f4f6fb}
/* position은 style.css 것(PC: sticky, 폰: fixed로 화면 밖)을 그대로 쓴다 — 여기서 relative로 덮으면 폰에서 숨은 메뉴가 자리를 차지해 화면이 오른쪽으로 밀림 */
.sidebar{width:var(--side-width,254px);background:#14243c;border-right:1px solid #243650;color:#b9c7dc;display:flex;flex-direction:column}
/* 메뉴 안(스크롤 영역)에 두면 스크롤바·넘침 자르기에 가려 잡히지 않아서, 화면 기준으로 메뉴 오른쪽 끝에 세운다 */
.sidebar-resize{position:fixed;top:0;left:calc(var(--side-width,280px) - 5px);bottom:0;width:10px;cursor:col-resize;z-index:25;touch-action:none}
.sidebar-resize:hover,.sidebar-resize.on{background:rgba(145,179,255,.25)}
@media(max-width:900px){.sidebar-resize{display:none}}
@media print{.sidebar-resize{display:none!important}}
.sidebar-brand{padding:30px 24px 26px;gap:13px;font-size:calc(24px * var(--ui-zoom,1));letter-spacing:-.7px}
.sidebar-brand svg{width:35px;height:35px;color:#91b3ff;flex:none}
.sidebar-brand small{display:block;font-size:calc(14px * var(--ui-zoom,1));font-weight:400;color:#a8b9d2;margin-top:4px;letter-spacing:0}
.nav-caption{font-size:calc(13px * var(--ui-zoom,1));font-weight:700;letter-spacing:.07em;color:#91a5c4;padding:8px 26px 10px}
.sidebar-nav{gap:6px;padding:0 14px}
.sidebar-nav a{border:1px solid transparent;border-radius:11px;padding:13px 12px;gap:12px;color:#c5d1e3;min-height:68px}
.sidebar-nav a svg{width:21px;height:21px;flex:none;color:#9eb3d2}
.nav-copy{display:flex;flex-direction:column;gap:3px;flex:1;min-width:0}
.nav-copy b{font-size:calc(16px * var(--ui-zoom,1));font-weight:600;line-height:1.4}
.nav-copy small{font-size:calc(13px * var(--ui-zoom,1));color:#9db0cc;line-height:1.5}
.sidebar-nav a:hover{background:#213653;color:#fff}
.sidebar-nav a.on{background:#2e53c5;border-color:#5276e5;box-shadow:0 5px 16px #08173333;color:#fff}
.sidebar-nav a.on svg,.sidebar-nav a.on small{color:#e0e9ff}
.nav-chevron{font-size:21px;color:#829bbc}.sidebar-nav a.on .nav-chevron{color:#fff}
.nav-divider{padding:22px 12px 3px;margin-top:8px;border-top:1px solid #30415b}
.sidebar-note{margin:auto 24px 24px;padding-top:30px;color:#c0cee1;font-size:12px}.sidebar-note small{display:block;color:#8fa3c1;font-size:11px;margin-top:7px}
.test-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#94b5ff;margin-right:7px}
.test-tag{display:inline-block;vertical-align:middle;font-size:10px;letter-spacing:.08em;font-weight:750;color:#3153bd;background:#e8edff;border:1px solid #cdd9fc;border-radius:5px;padding:2px 6px;margin-right:8px}
header{padding:29px 34px 20px}header h1{font-size:calc(27px * var(--ui-zoom,1));letter-spacing:-1px;color:var(--menu-ink);margin:9px 0 6px}header .sub{color:var(--menu-muted);line-height:1.7}
.breadcrumb{color:#65758e;font-size:12px}main{padding:6px 34px 60px}
.controls{gap:12px;border:1px solid var(--menu-line);border-radius:14px;padding:20px;box-shadow:0 4px 16px #243f6b05}
.controls label{color:#55647b;font-size:12px;gap:6px}.controls input{border-color:#ced8e8;border-radius:8px;min-height:40px;color:#263c5e}
.controls button{border-radius:8px;background:var(--menu-blue);min-height:40px;padding:9px 15px;font-size:13px}.controls button:hover{background:#2448c4}
.controls .ghost-btn{border-color:#d8e0ed;color:#475b79;background:#fff}.controls .ghost-btn:hover{color:#2f55ce;background:#f0f4ff;border-color:#b4c5f7}
.controls .ops-link{color:#3158cb;text-decoration:none;font-weight:700;font-size:13px;padding:8px 4px;align-self:flex-end;min-height:40px}
.controls .status{flex-basis:100%;font-size:12px}.controls .status:empty{display:none}
.card,.panel,.biocide,.newBanner,.itemSettings,.corpGroupPanel,.attrFilter{border-color:var(--menu-line);border-radius:12px}
.seg,.view-seg{border-radius:9px}.seg-btn{min-height:36px}.seg-btn.on{box-shadow:0 2px 6px #24457512}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #769aff;outline-offset:3px}
.ops-test .top{background:#14243c;padding:17px 26px;gap:20px;border-bottom:1px solid #2d4160}.ops-test .top h1{font-size:22px;letter-spacing:-.6px}.ops-test .top .back{background:#223854;border:1px solid #425873;border-radius:8px}
.ops-test main{padding-top:26px}.ops-test .tabs{gap:6px;padding:7px;background:#fff;border:1px solid var(--menu-line);border-radius:13px;margin-bottom:22px;flex-wrap:wrap}
.ops-test .tabs button{margin:0;border:0;border-radius:8px;padding:11px 23px;color:#5a6c85;font-weight:600;min-height:44px}.ops-test .tabs button:hover{background:#edf2ff}.ops-test .tabs button.on{background:#3159d8;color:#fff;box-shadow:0 3px 8px #3159d82b}.ops-test .tabs .help-btn{margin-left:auto;padding:9px 13px}
.ops-test .toolbar{gap:10px}.ops-test .btn,.ops-test input,.ops-test select{border-radius:8px;min-height:40px;font-size:15.5px}.ops-test .btn.primary,.ops-test .auth button{background:#3159d8}.ops-test .auth{border-radius:16px;padding:28px;box-shadow:0 12px 32px #1834550a}.ops-test .auth h2{font-size:22px;margin-bottom:14px}
@media(max-width:1100px){.controls{gap:10px}.controls button{padding:9px 12px}}
@media(max-width:900px){.sidebar{width:264px}.sidebar-toggle{width:42px;height:42px;border-radius:11px;color:#3159d8}.workspace header{padding:23px 20px 20px 70px}.workspace header h1{font-size:22px}.workspace main{padding:6px 18px 40px}.sidebar-brand{padding-top:72px}.sidebar-note{margin-top:25px}}
@media(max-width:600px){.controls{padding:15px;gap:10px}.controls label{flex:1;min-width:110px}.controls input{width:100%;min-width:0}.controls button{flex:1 1 auto}.controls #loadBtn{flex-basis:100%}.controls .ops-link{flex-basis:100%;text-align:center;background:#edf2ff;border-radius:8px}.ops-test .top{padding:13px 16px;gap:10px;flex-wrap:wrap}.ops-test .top h1{font-size:18px;flex-basis:55%}.ops-test main{padding:16px 12px}.ops-test .tabs button{flex:1 0 22%;padding:10px}.ops-test .tabs .help-btn{margin-left:0}.ops-test .auth{margin:30px 16px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important}}
@media print{.test-tag,.sidebar-note{display:none!important}.ops-test .tabs{display:none!important}.workspace,body{background:#fff}.controls{box-shadow:none}}

/* Follow-up: clear section label and high-contrast operations entry. */
.corpGroupPanel .settings-title{margin:0 0 8px;font-size:calc(19px * var(--ui-zoom,1));font-weight:750;letter-spacing:-.4px;color:#1c2b43;line-height:1.5}
.controls a.ops-link,.controls a.ops-link:visited{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  background:linear-gradient(180deg,#598bff 0%,#2349bf 55%,#17308f 100%);color:#fff;
  border:1px solid #17308f;border-radius:12px;padding:9px 15px;min-height:42px;
  font-size:calc(14px * var(--ui-zoom,1));font-weight:700;text-decoration:none;line-height:1.5;
  box-shadow:0 5px 10px rgba(35,73,191,.28),inset 0 2px 2px rgba(255,255,255,.4),inset 0 -3px 3px rgba(10,30,90,.25);
  transition:transform .16s ease,box-shadow .16s ease,filter .16s ease;
}
.controls a.ops-link:hover{color:#fff;transform:translateY(-2px);filter:brightness(1.05);box-shadow:0 8px 14px rgba(35,73,191,.32),inset 0 2px 2px rgba(255,255,255,.4)}
.controls a.ops-link:active{color:#fff;transform:translateY(2px);filter:none;box-shadow:inset 0 3px 7px rgba(10,30,90,.3)}

/* Responsive category selection: includes labels added by the existing application. */
#itemSettings{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px 14px;align-items:stretch}
#itemSettings>label{display:flex;align-items:center;gap:10px;min-width:0;min-height:46px;margin:0;padding:10px 12px;border:1px solid #dfe6f0;border-radius:9px;background:#f8faff;color:#29405f;font-size:calc(12.6px * var(--ui-zoom,1));line-height:1.5;overflow-wrap:anywhere;cursor:pointer}
#itemSettings>label:hover{border-color:#a8bcef;background:#f0f4ff}
#itemSettings>label:has(input:checked){border-color:#91aaf0;background:#eaf0ff;color:#2349a9;font-weight:700}
#itemSettings>label:focus-within{outline:2px solid #769aff;outline-offset:2px}
#itemSettings>label input[type=checkbox]{flex:none;width:17px;height:17px;margin:0;accent-color:#2349bf}
#itemSettings>.itemSettings-add{grid-column:1/-1;min-width:0;display:flex;gap:8px;padding-top:14px;margin-top:4px}
#itemSettings .itemSettings-add input[type=text]{min-width:0;flex:1 1 240px;width:auto;min-height:40px;border-radius:8px}
#itemSettings .itemSettings-add button{min-height:40px;white-space:nowrap}
@media(max-width:1200px){#itemSettings{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:700px){#itemSettings{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:14px}#itemSettings>label{padding:10px;gap:8px}}
@media(max-width:380px){#itemSettings{grid-template-columns:minmax(0,1fr)}}
@media print{#itemSettings>label{break-inside:avoid}}