/* 관계 그래프: Figma-like — dark top bar, layers panel left, dotted canvas, properties panel right. */
body.studio{min-height:100vh;background:#eef0f3;--chrome:#202124;--panel:#ffffff;--edge:#e3e6ea;--select:#0d99ff;--l1:#5b6b85;--l1-bg:#e9eef6;--l2:#10846e;--l2-bg:#e3f5ef;--l3:#6e4bd8;--l3-bg:#f0ebfd}
.studio-top{position:sticky;top:0;z-index:5;display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;min-height:52px;padding:8px 16px;background:var(--chrome);color:#fff}
.studio-top h1{font-size:15px;font-weight:700;letter-spacing:-.2px;color:#fff}
.studio-back{font-size:12px;color:#c9ccd1;text-decoration:none;white-space:nowrap;padding:6px 8px;border-radius:6px}.studio-back:hover{background:#34363a;color:#fff}
#studio-tabs{display:flex;gap:2px;padding:3px;background:#34363a;border-radius:8px}
#studio-tabs button{min-height:30px;padding:4px 12px;font-size:12px;border:0;border-radius:6px;background:transparent;color:#c9ccd1}
#studio-tabs button:hover{color:#fff;background:#44474c}
#studio-tabs button[aria-selected=true]{background:#fff;color:var(--chrome);font-weight:700}
#studio-user{margin:0 0 0 auto;font-size:12px;color:#c9ccd1}
#studio-main{padding:0}
#studio-login{margin:24px;padding:24px;background:#fff;border:1px solid var(--edge);border-radius:10px}
.button-link{display:inline-block;padding:10px 14px;border-radius:8px;background:var(--chrome);color:#fff;text-decoration:none}
#toolbar{background:#fff;border-bottom:1px solid var(--edge);padding:10px 16px}
#toolbar:empty{display:none}
#toolbar form{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-end}
#toolbar label{font-size:11px;color:var(--muted);display:flex;flex-direction:column;gap:4px;min-width:0}
#toolbar input,#toolbar select{padding:7px 10px;border-radius:6px;font-size:13px;min-height:34px}
#toolbar button{min-height:34px;padding:6px 12px;border-radius:6px;font-size:13px}
#toolbar button.primary{background:var(--chrome);border-color:var(--chrome);color:#fff}
#toolbar .grow{flex:1 1 260px}
#toolbar .toggles{display:flex;gap:12px;flex-wrap:wrap;font-size:12px;color:var(--muted);align-items:center}
#toolbar .toggles label{flex-direction:row;align-items:center;gap:6px;font-size:12px}
#toolbar input[type=checkbox],#panel input[type=radio],#panel input[type=checkbox]{width:auto;min-width:0;min-height:0}
.chips{display:flex;flex-wrap:wrap;gap:6px;width:100%}
.chips label{flex-direction:row!important;align-items:center;gap:5px!important;border:1px solid var(--edge);border-radius:999px;padding:4px 10px;background:#fff;color:var(--text)!important;font-size:12px!important}
.chips label:has(input:checked){border-color:var(--l2);background:var(--l2-bg)}
#search-results{list-style:none;margin:8px 0 0;padding:0;border:1px solid var(--edge);border-radius:8px;background:#fff;max-height:240px;overflow:auto;box-shadow:0 8px 24px rgba(15,23,42,.08)}
#search-results:empty{display:none}
#search-results button{display:block;width:100%;text-align:left;border:0;border-bottom:1px solid var(--edge);border-radius:0;padding:8px 12px;min-height:0;font-size:13px;background:#fff}
#search-results button:hover{background:#f5f8ff}
#search-results small{display:block;color:var(--muted);font-size:11px}
#notice{margin:0;padding:0 16px;font-size:12px;color:var(--accent);background:#fff}
#notice:empty{display:none}
#notice:not(:empty){padding:8px 16px;border-bottom:1px solid var(--edge)}
#notice.error{color:var(--danger)}
.studio-body{display:grid;grid-template-columns:232px minmax(0,1fr) 340px;height:calc(100vh - 118px);min-height:520px}
/* Layers panel (left) */
#layers{background:var(--panel);border-right:1px solid var(--edge);overflow:auto;font-size:12px;padding:12px 0}
#layers h2{font-size:11px;font-weight:700;color:var(--muted);letter-spacing:.2px;margin:0 14px 8px}
.layer-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;padding-right:10px}
.layer-row:hover{background:#f3f6fb}
.layer-main{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:8px;padding:7px 8px 7px 14px;border:0;background:none;width:100%;text-align:left;min-height:0;border-radius:0;font-size:12px}
.layer-row.off{opacity:.45}
.layer-row .swatch{width:12px;height:12px;border-radius:3px;border:1px solid rgba(0,0,0,.08)}
.layer-row b{font-weight:700;color:var(--text)}
.layer-row .count{color:var(--muted);font-variant-numeric:tabular-nums}
.layer-row .eye{border:1px solid var(--edge);background:#fff;padding:1px 6px;min-height:0;font-size:10px;color:var(--muted);border-radius:4px}
.layer-row .eye:hover{background:#e8edf5}
.layer-groups{list-style:none;margin:0 0 6px;padding:0 14px 0 34px;color:var(--muted)}
.layer-groups li{display:flex;justify-content:space-between;gap:8px;padding:2px 0}
.layer-note{margin:10px 14px 0;padding-top:10px;border-top:1px solid var(--edge);color:var(--muted);font-size:11px;line-height:1.6}
/* Canvas (center) */
.canvas-wrap{position:relative;min-width:0;overflow:hidden;background-color:#f5f6f8;background-image:radial-gradient(#cfd4db 1px,transparent 1px);background-size:22px 22px}
#cy{position:absolute;inset:0}
#canvas-empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;padding:24px;color:var(--muted);pointer-events:none;font-size:13px}
#canvas-empty:empty{display:none}
.zoom-controls{position:absolute;right:14px;bottom:14px;display:flex;align-items:center;gap:2px;padding:4px;background:#fff;border:1px solid var(--edge);border-radius:10px;box-shadow:0 6px 18px rgba(15,23,42,.10)}
.zoom-controls button{min-height:28px;min-width:28px;padding:2px 8px;border:0;border-radius:6px;background:#fff;font-size:13px}
.zoom-controls button:hover{background:#f0f3f8}
#zoom-level{min-width:44px;text-align:center;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
#legend{position:absolute;left:14px;bottom:14px;display:flex;flex-wrap:wrap;gap:4px 12px;margin:0;padding:8px 12px;list-style:none;background:#fff;border:1px solid var(--edge);border-radius:10px;box-shadow:0 6px 18px rgba(15,23,42,.08);font-size:11px;color:var(--muted);max-width:calc(100% - 230px)}
#legend i{display:inline-block;width:16px;height:0;border-top:2px solid;vertical-align:middle;margin-right:5px}
#legend i.dash{border-top-style:dashed}
#legend i.band{height:10px;width:10px;border:0;border-radius:3px;margin-right:5px}
/* Properties panel (right) */
#panel{background:var(--panel);border-left:1px solid var(--edge);padding:14px 16px;min-width:0;overflow:auto;font-size:12px}
#panel h2{font-size:14px;margin-bottom:10px;display:flex;flex-wrap:wrap;align-items:center;gap:6px}
#panel h3{font-size:11px;font-weight:700;color:var(--muted);letter-spacing:.2px;margin:16px 0 8px;padding-top:12px;border-top:1px solid var(--edge)}
#panel dl{display:grid;grid-template-columns:88px minmax(0,1fr);gap:5px 10px;margin:0 0 10px}
#panel dt{color:var(--muted)}
#panel dd{margin:0;overflow-wrap:anywhere}
#panel form{display:grid;gap:10px;margin-top:8px}
#panel label{display:grid;gap:4px;font-size:11px;color:var(--muted)}
#panel input,#panel select,#panel textarea{padding:7px 9px;border-radius:6px;font-size:13px}
#panel fieldset{border:1px solid var(--edge);border-radius:8px;padding:8px 10px;margin:0}
#panel fieldset legend{font-size:11px;color:var(--muted);padding:0 4px}
#panel fieldset label{display:inline-flex;align-items:center;gap:6px;margin-right:12px;color:var(--text);font-size:12px}
#panel button{min-height:34px;padding:6px 12px;border-radius:6px;font-size:12px}
#panel .primary{background:var(--chrome);border-color:var(--chrome);color:#fff}
#panel .danger{border-color:var(--danger);color:var(--danger)}
#panel .hint{color:var(--muted);font-size:11px;line-height:1.6}
#panel ul{padding-left:16px;margin:6px 0}
#panel ul button{min-height:0;padding:2px 6px;border:0;background:none;color:var(--accent);text-align:left}
.badge{display:inline-block;padding:1px 7px;border-radius:999px;font-size:10px;font-weight:700;border:1px solid var(--edge);color:var(--muted);background:#fff}
.badge.owner{color:#6e4bd8;border-color:#cbbdf5;background:#f5f1ff}.badge.verified{color:#0f7a4f;border-color:#b5e3cb;background:#effaf4}.badge.displayed{color:#0b6fb8;border-color:#b9dcf6;background:#eff7fe}.badge.derived{color:#8a5a00;border-color:#f0d9a6;background:#fff8e8}.badge.retracted{color:#c2361c;border-color:#f3c0b5;background:#fff3f0}
.badge.l1{color:var(--l1);border-color:#c8d3e4;background:var(--l1-bg)}.badge.l2{color:var(--l2);border-color:#b7e2d6;background:var(--l2-bg)}.badge.l3{color:var(--l3);border-color:#d5c8f6;background:var(--l3-bg)}
/* Field layer stack */
.layer-stack{display:grid;gap:8px;margin:0 0 12px}
.layer-field{border:1px solid var(--edge);border-radius:8px;overflow:hidden}
.layer-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:6px;padding:7px 10px;background:#fafbfc;border-bottom:1px solid var(--edge)}
.layer-line{display:grid;grid-template-columns:104px minmax(0,1fr);gap:8px;padding:5px 10px;font-size:11px;color:var(--muted);border-left:3px solid transparent}
.layer-line .layer-value{overflow-wrap:anywhere;color:var(--text);font-size:12px}
.layer-line.l1 .layer-tag{color:var(--l1)}.layer-line.l2 .layer-tag{color:var(--l2)}.layer-line.l3 .layer-tag{color:var(--l3)}
.layer-line.effective .layer-value{font-weight:700}
.layer-line.l1.effective{border-left-color:var(--l1);background:var(--l1-bg)}.layer-line.l2.effective{border-left-color:var(--l2);background:var(--l2-bg)}.layer-line.l3.effective{border-left-color:var(--l3);background:var(--l3-bg)}
/* Tables (schema, preview) */
#below{padding:16px;background:#fff;border-top:1px solid var(--edge)}
#below:empty{display:none}
.table-wrap{overflow-x:auto;background:#fff;border:1px solid var(--edge);border-radius:8px}
.table-wrap table{border-collapse:collapse;width:100%;font-size:12px}
.table-wrap th,.table-wrap td{padding:8px 10px;border-bottom:1px solid var(--edge);text-align:left;vertical-align:top}
.table-wrap th{font-size:11px;color:var(--muted);font-weight:700;white-space:nowrap;background:#fafbfc}
.table-wrap td.num{white-space:nowrap;font-variant-numeric:tabular-nums}
.table-wrap td button{min-height:0;padding:0;border:0;background:none;color:var(--accent);text-decoration:underline;text-underline-offset:3px;font-size:12px;text-align:left}
.schema-table td b{font-size:12px}.schema-table small{display:block;color:var(--muted);font-size:10px;margin-top:2px}
@media(max-width:1100px){.studio-body{grid-template-columns:200px minmax(0,1fr) 300px}}
@media(max-width:900px){
 .studio-body{grid-template-columns:minmax(0,1fr);height:auto}
 #layers{border-right:0;border-bottom:1px solid var(--edge);padding:8px 0}
 .layer-groups,.layer-note{display:none}
 #panel{border-left:0;border-top:1px solid var(--edge)}
 .canvas-wrap{height:auto;display:flex;flex-direction:column}
 #cy{position:relative;inset:auto;height:62vh;min-height:360px}
 .zoom-controls{top:12px;bottom:auto;right:12px}
 #legend{position:static;max-width:none;margin:0 12px 12px;box-shadow:none}
 .studio-top{padding:8px 12px}#studio-user{margin-left:0;width:100%}
}