:root { --blue:#0072bc; --deep:#00457c; --line:#cfd7df; --panel:#f5f6f7; --text:#263746; --muted:#687886; }
* { box-sizing:border-box; }
html,body { height:100%; }
body { margin:0; overflow:hidden; color:var(--text); background:#dfe4e8; font:13px "Segoe UI","Noto Sans KR",Arial,sans-serif; letter-spacing:0; }
button,input,select { font:inherit; }
button { color:inherit; }
.menu-bar { height:46px; display:flex; align-items:center; gap:18px; padding:0 12px; background:#fff; border-bottom:1px solid #bfc8d0; }
.editor-brand { display:flex; align-items:center; gap:8px; color:var(--deep); text-decoration:none; white-space:nowrap; }
.brand-mark { width:27px; height:27px; display:grid; place-items:center; border-radius:4px; color:#fff; background:var(--blue); font-weight:800; }
.menu-bar nav { display:flex; align-self:stretch; }
.menu-bar nav button { border:0; padding:0 10px; background:transparent; }
.menu-bar nav button:hover { background:#edf3f7; }
.document-title { min-width:0; margin-left:auto; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--muted); }
.save-button { min-height:31px; border:1px solid var(--deep); border-radius:3px; padding:0 16px; color:#fff; background:var(--deep); font-weight:700; }
.tool-bar { height:42px; display:flex; align-items:center; gap:3px; padding:0 9px; background:#f8f9fa; border-bottom:1px solid #bdc7cf; }
.tool-bar button { width:31px; height:30px; border:1px solid transparent; border-radius:3px; background:transparent; font-size:16px; }
.tool-bar button:hover { border-color:#bec9d1; background:#fff; }
.separator { width:1px; height:24px; margin:0 5px; background:#cbd3d9; }
.zoom-value { min-width:42px; text-align:center; color:var(--muted); }
.tool-context { margin-left:auto; max-width:34vw; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--muted); }
.editor-layout { height:calc(100vh - 112px); display:grid; grid-template-columns:210px minmax(520px,1fr) 230px; }
.shape-panel,.format-panel { overflow:auto; background:#f8f9fa; }
.shape-panel { border-right:1px solid #bac5cd; }
.format-panel { border-left:1px solid #bac5cd; }
.shape-search { display:block; padding:10px; color:var(--muted); font-weight:600; }
.shape-search input { width:100%; height:31px; margin-top:6px; border:1px solid #b8c3cc; border-radius:3px; padding:0 8px; background:#fff; }
.shape-panel section { border-top:1px solid #d4dbe0; }
.shape-panel h2,.format-panel h2 { margin:0; padding:9px 10px; font-size:12px; }
.shape-grid { display:grid; grid-template-columns:1fr 1fr; gap:6px; padding:4px 8px 12px; }
.shape-item { min-height:73px; border:1px solid transparent; border-radius:3px; display:grid; place-items:center; gap:3px; padding:6px; background:transparent; font-size:11px; }
.shape-item:hover { border-color:#8fb8d3; background:#eaf5fb; }
.shape-preview { width:55px; height:31px; display:grid; place-items:center; border:1px solid #527286; background:#fff; font-size:9px; }
.shape-preview.rounded,.shape-preview.gateway,.shape-preview.queue,.shape-preview.container { border-radius:9px; }
.shape-preview.database,.shape-preview.storage { border-radius:50%; }
.shape-preview.cloud { border-radius:50%; border-style:dashed; }
.shape-preview.actor { width:34px; border-radius:50%; }
.canvas-viewport { overflow:auto; padding:34px; background:#dfe3e6; }
.diagram-page { position:relative; width:1000px; height:620px; margin:0 auto; transform-origin:top left; background-color:#fff; background-image:linear-gradient(#e9edf0 1px,transparent 1px),linear-gradient(90deg,#e9edf0 1px,transparent 1px); background-size:16px 16px; box-shadow:0 2px 10px rgba(25,45,58,.24); }
.diagram-title { position:absolute; top:28px; left:38px; right:38px; display:flex; justify-content:space-between; padding-bottom:12px; border-bottom:2px solid var(--blue); font-size:18px; }
.diagram-title span { color:var(--muted); font-size:12px; }
.diagram-zone { position:absolute; left:42px; right:42px; border:1px dashed #aac0cf; background:rgba(241,247,250,.58); pointer-events:none; }
.diagram-zone span { position:absolute; left:8px; top:6px; color:#708494; font-size:10px; text-transform:uppercase; }
.channel-zone { top:95px; height:150px; }.service-zone { top:260px; height:150px; }.data-zone { top:425px; height:150px; }
.diagram-node { position:absolute; z-index:3; width:160px; min-height:72px; padding:14px 10px; border:2px solid #718b9d; border-radius:5px; display:grid; place-items:center; text-align:center; background:#fff; cursor:move; user-select:none; box-shadow:0 2px 4px rgba(20,53,75,.12); }
.diagram-node strong { font-size:13px; }.diagram-node small { margin-top:5px; color:var(--muted); }
.diagram-node.selected { outline:2px solid #2f9ee5; outline-offset:3px; }
.gateway-node { border-color:var(--blue); background:#eaf5fb; }.service-node { border-color:#36866b; background:#edf8f3; }.database-node { border-radius:50%; border-color:#8a65ad; background:#f5effa; }.queue-node { border-color:#d08a27; background:#fff6e7; }.external-node { border-color:#5c76a8; background:#eef2f9; }
.wire { position:absolute; z-index:2; background:#668294; }.wire.horizontal { height:2px; }.wire.vertical { width:2px; }
.wire-1 { left:250px;top:176px;width:65px; }.wire-2 { left:475px;top:176px;width:65px; }.wire-3 { left:700px;top:176px;width:60px; }.wire-4 { left:619px;top:213px;height:137px; }.wire-5 { left:700px;top:386px;width:60px; }
.diagram-note { position:absolute; z-index:2; width:270px; min-height:100px; padding:14px; border-left:4px solid var(--blue); background:#f4f8fb; box-shadow:0 1px 3px rgba(0,0,0,.1); }
.diagram-note p { margin:8px 0 0; color:var(--muted); line-height:1.5; }
.format-tabs { display:grid; grid-template-columns:repeat(3,1fr); border-bottom:1px solid #cbd3d9; }
.format-tabs button { height:38px; border:0; border-bottom:2px solid transparent; background:transparent; }
.format-tabs button.active { border-bottom-color:var(--blue); color:var(--blue); font-weight:700; }
.format-panel section { padding-bottom:10px; border-bottom:1px solid #d7dde2; }
.format-panel label { display:block; padding:5px 10px; color:var(--muted); }
.format-panel input[type=text],.format-panel select { width:100%; height:31px; margin-top:5px; border:1px solid #b8c3cc; border-radius:3px; padding:0 7px; background:#fff; }
.color-row { display:grid; grid-template-columns:42px 1fr; gap:7px; padding:0 10px; }.color-row input[type=color] { width:42px; height:31px; padding:2px; border:1px solid #b8c3cc; background:#fff; }
.delete-button { width:calc(100% - 20px); min-height:34px; margin:14px 10px; border:1px solid #c44747; border-radius:3px; color:#b33a3a; background:#fff; }.delete-button:disabled { opacity:.4; }
.status-bar { height:24px; display:flex; align-items:center; gap:22px; padding:0 10px; border-top:1px solid #bcc6ce; background:#f8f9fa; color:var(--muted); font-size:11px; }
.status-bar span:first-child { margin-right:auto; }
.toast { position:fixed; right:24px; bottom:40px; padding:11px 16px; border-radius:4px; color:#fff; background:#1b5e46; opacity:0; transform:translateY(8px); transition:.2s; pointer-events:none; }.toast.show { opacity:1; transform:translateY(0); }
@media(max-width:900px){.editor-layout{grid-template-columns:170px minmax(500px,1fr)}.format-panel{display:none}.menu-bar nav{display:none}.tool-context{display:none}}