*{box-sizing:border-box}
:root{--bg:#0b0d0f;--panel:#101315;--line:#292a28;--gold:#d0b275;--gold2:#e2c984;--muted:#85898a;--accent:#c49b48}
body{margin:0;background:var(--bg);color:#ddd;font-family:Arial,'Noto Sans KR',sans-serif;overflow:hidden}
button,input,textarea,select{font:inherit}
.app{height:100vh;display:grid;grid-template-rows:64px 42px 1fr 72px}
.top{display:flex;align-items:center;justify-content:space-between;padding:0 22px;border-bottom:1px solid var(--line);background:#101214;gap:16px}
.brand{font-weight:700;letter-spacing:3px;color:var(--gold);white-space:nowrap}.brand span{color:#888;font-weight:400;font-size:12px;margin-left:12px;letter-spacing:0}
.top-actions{display:flex;align-items:center;gap:8px}.build-name{width:180px;background:#0d1011;border:1px solid #454238;color:#d8c797;padding:9px 10px}.points{padding:8px 14px;border:1px solid #6e5a32;background:#15130f;color:var(--gold2)}
.btn{border:1px solid #5d5138;background:#181817;color:#cbb98d;padding:9px 13px;cursor:pointer}.btn:hover{border-color:#b99a55}.btn.active{background:#4a3214;border-color:#d7ae5b;color:#f2d693}.btn.danger{border-color:#69423a;color:#c99}
.main{display:grid;grid-template-columns:1fr 360px;min-height:0}.viewport{position:relative;overflow:hidden;background:radial-gradient(circle at 50% 45%,#1c1d1d 0,#111416 45%,#0c0f11 80%)}
.viewport:before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent 0 39px,#ffffff05 40px),repeating-linear-gradient(90deg,transparent 0 39px,#ffffff04 40px);pointer-events:none}
.canvas{position:absolute;width:3200px;height:1200px;transform-origin:0 0;cursor:grab}.canvas.dragging{cursor:grabbing}.canvas.editing{cursor:default}
.line{position:absolute;height:1px;background:#6c675c;transform-origin:left center;opacity:.65;pointer-events:none}.line.active{background:#b49456;opacity:.95}
.node{position:absolute;width:38px;height:38px;transform:translate(-50%,-50%) rotate(45deg);border:1px solid #73664b;background:#171918;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 0 0 3px #0b0c0c;user-select:none}
.node span{transform:rotate(-45deg);font-size:10px;color:#b9aa87}.node.square{transform:translate(-50%,-50%);border-color:#6b4b37;background:#26120e}.node.square span{transform:none}.node.core{width:48px;height:48px;border-color:#c49b48;box-shadow:0 0 12px #b4823344,0 0 0 3px #0b0c0c}.node.active{background:#4a3214;border-color:#e1bd68}.node.locked{opacity:.35}.node.selected{outline:2px solid #f1d07d;outline-offset:5px}.node.editable{cursor:move}.node .tag{position:absolute;top:42px;left:50%;transform:translateX(-50%) rotate(-45deg);white-space:nowrap;color:#9f967e;font-size:10px;display:none}.editing .node .tag{display:block}.node.square .tag{transform:translateX(-50%)}
.side{border-left:1px solid var(--line);background:var(--panel);padding:20px;overflow:auto}.side h2{font-size:18px;color:#d2b878;margin:0 0 18px}.empty{color:#6f7374;text-align:center;margin-top:150px}.detail h3{color:#e0c47e;margin:0 0 8px}.muted{color:var(--muted);font-size:13px}.effect{margin:16px 0;padding:13px;background:#171a1c;border:1px solid #292d2e}.controls{display:flex;gap:8px}
.form{display:grid;gap:11px}.field{display:grid;gap:5px}.field label{font-size:12px;color:#9c937f}.field input,.field textarea,.field select{width:100%;background:#0d1011;border:1px solid #34383a;color:#ddd;padding:9px}.field textarea{min-height:78px;resize:vertical}.row{display:grid;grid-template-columns:1fr 1fr;gap:8px}.editor-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px}.hint{font-size:11px;color:#777;line-height:1.5}.effects-list{display:grid;gap:6px}.effect-row{display:grid;grid-template-columns:44px 1fr;gap:6px;align-items:center}.effect-row span{font-size:11px;color:#817a6c}
.bottom{display:flex;align-items:center;justify-content:space-between;padding:0 18px;border-top:1px solid var(--line);background:#101214;gap:10px}.help{color:#777;font-size:12px}.zoom{display:flex;align-items:center;gap:8px}.badge{font-size:12px;color:#9e8a5e}.status{color:#807764;font-size:12px}.toolbar{position:absolute;top:14px;left:14px;z-index:3;display:flex;gap:7px;align-items:center;background:#111c;border:1px solid #4c4c45;padding:8px}.toolbar .small{font-size:11px;color:#aaa;padding:0 4px}
.modal-backdrop{position:fixed;inset:0;background:#0009;display:none;align-items:center;justify-content:center;z-index:30}.modal-backdrop.show{display:flex}.modal{width:min(760px,90vw);background:#111517;border:1px solid #514a3c;padding:18px}.modal h3{margin:0 0 10px;color:#d4b976}.modal textarea{width:100%;height:360px;background:#090b0c;color:#d8d8d8;border:1px solid #34383a;padding:12px;font-family:Consolas,monospace;font-size:12px}.modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:10px}
@media(max-width:900px){.main{grid-template-columns:1fr}.side{position:absolute;right:0;top:64px;bottom:72px;width:320px;z-index:5;background:#101315f5}.brand span{display:none}.top{padding:0 10px}.points{font-size:12px}.btn{padding:8px 10px}}

/* v6 service polish */
.top{backdrop-filter:blur(10px)}
.brand-sub{font-size:11px;color:#777;margin-left:10px;letter-spacing:.4px}
.searchbox{width:210px;background:#0d1011;border:1px solid #34383a;color:#ddd;padding:9px 10px}
.nav-pill{font-size:12px;color:#9b8a68;border:1px solid #403a30;padding:7px 9px;background:#121313}
.quickbar{position:absolute;top:14px;right:14px;z-index:4;display:flex;gap:6px;background:#111c;border:1px solid #4c4c45;padding:7px}
.quickbar .btn{padding:7px 9px;font-size:12px}
.legend{position:absolute;left:14px;bottom:14px;z-index:4;background:#0f1214df;border:1px solid #3b3a35;padding:10px 12px;font-size:11px;color:#8f8b81;line-height:1.8}
.legend b{color:#c8ad72;font-weight:600}
.legend-dot{display:inline-block;width:8px;height:8px;margin-right:6px;transform:rotate(45deg);border:1px solid #8b7650;background:#1c1e1d}
.minimap{position:absolute;right:14px;bottom:14px;width:220px;height:105px;background:#080a0bcc;border:1px solid #3a3933;z-index:4;overflow:hidden}
.minimap canvas{width:100%;height:100%;display:block}
.side-section-title{font-size:11px;text-transform:uppercase;letter-spacing:1.2px;color:#6f6a5f;margin:18px 0 8px}
.kpi{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:12px 0}.kpi>div{background:#151819;border:1px solid #282b2c;padding:10px}.kpi strong{display:block;color:#d4b976;font-size:18px}.kpi span{font-size:11px;color:#777}
.public-note{font-size:11px;color:#6e6e68;margin-left:8px}
@media(max-width:1100px){.searchbox{display:none}.nav-pill{display:none}.minimap{width:170px;height:85px}}
@media(max-width:760px){.legend,.minimap{display:none}.side{width:100%;left:0;top:auto;height:42%;bottom:72px;border-left:0;border-top:1px solid var(--line)}.build-name{display:none}.brand{font-size:13px;letter-spacing:2px}.top-actions .btn{font-size:11px;padding:7px 8px}}


/* v9 spreadsheet editor */
.sheet-backdrop{position:fixed;inset:0;background:#000c;display:none;z-index:50;padding:28px}.sheet-backdrop.show{display:block}.sheet-modal{height:100%;background:#101315;border:1px solid #5b503b;display:grid;grid-template-rows:auto 1fr;box-shadow:0 18px 60px #000}.sheet-head{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:14px 16px;border-bottom:1px solid #333;background:#121517}.sheet-head h3{margin:0;color:#d4b976}.sheet-head p{margin:5px 0 0;font-size:11px;color:#777}.sheet-actions{display:flex;gap:7px;flex-wrap:wrap;justify-content:flex-end}.sheet-scroll{overflow:auto}.sheet-table{border-collapse:separate;border-spacing:0;min-width:1700px;width:100%;font-size:12px}.sheet-table th{position:sticky;top:0;z-index:2;background:#181b1d;color:#bca878;border-right:1px solid #343638;border-bottom:1px solid #4b463b;padding:8px;white-space:nowrap}.sheet-table td{border-right:1px solid #292c2d;border-bottom:1px solid #292c2d;padding:0;background:#0f1213}.sheet-table input,.sheet-table select{width:100%;min-width:70px;border:0;background:transparent;color:#ddd;padding:9px 8px;outline:none}.sheet-table input:focus,.sheet-table select:focus{background:#1b1b16;box-shadow:inset 0 0 0 1px #a9894e}.sheet-table .wide{min-width:260px}.sheet-table .desc{min-width:220px}.sheet-table .idcol{min-width:120px}.sheet-table .namecol{min-width:140px}.sheet-table .reqcol{min-width:160px}.sheet-rownum{padding:0 8px!important;text-align:center;color:#666;background:#111416!important}.sheet-del{border:0;background:transparent;color:#a77;cursor:pointer;padding:8px 10px}.sheet-del:hover{color:#f99}.paste-box{position:fixed;inset:0;background:#000b;display:none;align-items:center;justify-content:center;z-index:60}.paste-box.show{display:flex}

.sheet-table tr.sheet-selected td{background:rgba(201,164,93,.12)}

/* v11 public interaction + result panel */
.line{background:#80796b;opacity:.8}
.node{border-color:#9a865b;background:#1d211f;box-shadow:0 0 0 3px #0b0c0c,0 0 8px #c9a85a14}
.node span{color:#d1bd8d}
.node.square{border-color:#986247;background:#311812}
.node.core{border-color:#d1a64f;background:#211c12;box-shadow:0 0 14px #b4823355,0 0 0 3px #0b0c0c}
.node.locked{opacity:.72}
.node.active{background:#5b3c17;border-color:#f0c86c;box-shadow:0 0 12px #d2a74b55,0 0 0 3px #0b0c0c}
.node.active.square{background:#552419}
.node.selected{outline-color:#ffe09a}
.side-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}
.side-head h2{margin:0}
.panel-close{display:none;width:30px;height:30px;align-items:center;justify-content:center;border:1px solid #5d5138;background:#181817;color:#cbb98d;font-size:20px;line-height:1;cursor:pointer}
.panel-close:hover{border-color:#c7a258;color:#f0d28d}
.effect-label{margin-bottom:8px}
.effect-lines{display:block;font-weight:700;line-height:1.65}
.effect-line{display:block;white-space:normal;overflow-wrap:anywhere}
.effect-divider{height:1px;background:#303334;margin:14px 0}
.detail-guide{margin-top:14px;padding:10px;border:1px dashed #474238;color:#a69673;font-size:12px;text-align:center}
.summary-tabs{display:grid;grid-template-columns:1fr 1fr 1fr;border-bottom:1px solid #3b3933;margin:-2px 0 18px}
.summary-tab{border:0;border-bottom:2px solid transparent;background:transparent;color:#8d8a83;padding:10px 5px;cursor:pointer;font-size:14px}
.summary-tab.active{color:#d7b763;border-bottom-color:#c99b42}
.summary-empty{color:#6f7374;text-align:center;padding:90px 10px}
.stat-list{display:grid;gap:2px}
.stat-row{display:grid;grid-template-columns:1fr auto;gap:16px;align-items:center;padding:6px 2px;border-bottom:1px solid #1c2021}
.stat-row span{color:#d7d0bd;font-size:14px}.stat-row strong{color:#e1bf5c;font-size:15px;font-weight:500}
.extra-list{display:grid;gap:8px}.extra-item{padding:10px;background:#151819;border:1px solid #282b2c;display:grid;gap:4px}.extra-item b{color:#c9ad70;font-size:12px}.extra-item span{color:#c6c6c1;font-size:13px;line-height:1.5}
.active-effect-list{display:grid;gap:10px}.active-effect-card{background:#151819;border:1px solid #292d2e;padding:12px}.active-effect-card h3{margin:0 0 8px;color:#d8b969;font-size:14px}.active-effect-card .effect-line{color:#d2d2cc;font-size:13px;line-height:1.55}


/* v13 class navigation */
.brand-link{text-decoration:none;display:flex;align-items:center}
.class-bar,.admin-classbar{height:42px;display:flex;align-items:center;gap:14px;padding:0 18px;background:#0e1112;border-bottom:1px solid var(--line);color:#a99b7a}
.class-bar strong{color:#d7ba73;font-size:14px}.class-bar span{font-size:11px;color:#9f7559;border:1px solid #5a4030;padding:3px 7px}
.class-switch{display:flex;align-items:center;gap:4px;flex-shrink:0}.class-switch button{border:1px solid #433e34;background:#111314;color:#8f8b81;padding:7px 10px;cursor:pointer}.class-switch button:hover{border-color:#8d7547;color:#c7b58c}.class-switch button.active{border-color:#d0aa59;background:#302511;color:#f0cf78}
.admin-classbar{justify-content:flex-start}.admin-classbar>div:first-child{display:flex;align-items:center;gap:10px}.admin-classbar strong{color:#e0c47e}.admin-classbar .class-switch{margin-left:auto}.publish-toggle{font-size:12px;color:#a59a84;white-space:nowrap}.publish-toggle input{accent-color:#c59b48}
.node.deemphasized{opacity:.18!important}.effect-search{width:150px}.top-actions{min-width:0;overflow-x:auto;scrollbar-width:thin}.top-actions::-webkit-scrollbar{height:4px}.top-actions::-webkit-scrollbar-thumb{background:#403a30}
.canvas{will-change:transform}.canvas.dragging .node{pointer-events:none}
@media(max-width:1200px){.effect-search{display:none}.top-actions{gap:5px}.class-switch button{padding:7px 8px;font-size:11px}}
@media(max-width:900px){.app{grid-template-rows:56px 42px 1fr 64px}.admin-classbar{overflow-x:auto}.class-bar{padding:0 10px}.class-switch button{font-size:10px;padding:6px}.side{top:98px}}
.brand-link{display:flex;align-items:center;gap:10px}.brand-link::before{content:"";display:inline-block;width:120px;height:48px;background:url('/Brand/logo/eclab-official-lockup-header.webp?v=20260924e') left center/contain no-repeat;flex-shrink:0}.brand-link{font-size:0}.brand-link span{font-size:12px}.brand-link .brand-sub{font-size:11px}

/* ECLAB controls; no game capture/icon assets used for public node details. */
.action-menu{position:relative;display:inline-block}.action-menu summary{list-style:none;cursor:pointer}.action-menu>div{position:absolute;z-index:50;min-width:210px;padding:10px;background:#161d26;border:1px solid #455468;border-radius:10px;display:grid;gap:8px;right:0}.bottom .action-menu>div{bottom:100%;left:0;right:auto}.reviewed-effects{display:grid;gap:10px;padding:16px;border:1px solid #44566e;border-radius:12px;background:#141d29}.reviewed-effects h4{color:#94c7f2;margin:8px 0 0}.reviewed-effects div{line-height:1.7;white-space:normal}

.panel-close{width:auto;min-width:28px;padding:6px 10px;font-size:12px}
/* Keep the public toolbar inside its grid row so it cannot cover detail controls. */
.simulator .app{grid-template-rows:auto 42px minmax(0,1fr) 72px;min-width:0}
.simulator .top{flex-wrap:wrap;padding:8px 18px}
.simulator .top-actions{flex:1 1 800px;flex-wrap:wrap;overflow:visible;min-width:0}
.simulator .top-actions>*{flex-shrink:0;white-space:nowrap}
.simulator .main{min-width:0;grid-template-columns:minmax(0,1fr) 360px}
.simulator .side{min-width:0}
@media(max-width:900px){.simulator .main{grid-template-columns:minmax(0,1fr) 300px}.simulator .side{position:static;width:auto;height:auto}}
.simulator .top,.simulator .bottom{position:relative;z-index:10}

/* Narrow screens keep the tree usable instead of reserving 300px for details. */
.mobile-trait-action{display:none}
@media(max-width:760px){.simulator .main{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(200px,1fr) minmax(130px,.65fr)}.simulator .side{position:static;width:auto;max-height:36vh;overflow:auto;padding:14px}.simulator .empty{margin-top:24px}.mobile-trait-action{display:inline-flex;min-height:44px;margin:10px 0}.mobile-trait-action[hidden]{display:none}}

/* Public brand skin only; node colors still encode existing trait states/types. */
.simulator{--bg:#060d16;--panel:#0b1928;--line:#223b51;--gold:#68baff;--gold2:#c5e7ff;--accent:#319fff;--muted:#9eafc1}
.simulator .brand-link{font-size:20px;color:#eef6ff;letter-spacing:2px}
.simulator .brand-link:before{width:44px;height:44px;background-image:url('/Brand/logo/eclab-official-lockup-header.webp?v=20260924e');background-size:contain;background-position:left center;background-repeat:no-repeat}
.simulator .top,.simulator .bottom,.simulator .class-bar{background:#081422;color:#adc4d9}
.simulator .side{background:#0b1928}.simulator .class-switch button.active{background:#103b5b;border-color:#409fe2;color:#e5f5ff}
.simulator .modal{max-width:calc(100vw - 28px);max-height:calc(100dvh - 36px);overflow:auto}.simulator .modal textarea{max-width:100%}
.simulator .btn,.simulator button,.simulator summary{touch-action:manipulation}.simulator .panel-close{height:auto;min-height:34px}
@media(max-width:760px){.simulator .brand-link span{font-size:10px}.simulator .brand-link{font-size:17px}.simulator .top-actions{gap:6px}.simulator .modal-actions{flex-wrap:wrap}.simulator .bottom{gap:6px}.simulator .bottom .status{min-width:0;overflow-wrap:anywhere}}
@media(max-width:900px){.simulator .top .action-menu>div{left:0;right:auto;max-width:calc(100vw - 36px);min-width:min(210px,calc(100vw - 36px))}}