:root{--bg:#F3F5F7;--surface:#FFFFFF;--ink:#1B2530;--muted:#5C6B78;--line:#D6DDE4;--accent:#125F6E;--accent-ink:#0D4652;--accent-soft:#E1EDEF;--code-bg:#EAEEF1;--dim:#B8C2CB;--warn:#8A5A00;--warn-soft:#F6ECD2;--danger:#8A3B3B;--danger-soft:#F4E1E1}
@media (prefers-color-scheme: dark){:root{--bg:#0F161B;--surface:#161F27;--ink:#E3E9EE;--muted:#98A7B3;--line:#2A3743;--accent:#5DB9C8;--accent-ink:#8FD3DE;--accent-soft:#15313A;--code-bg:#1D2731;--dim:#3A4956;--warn:#E2B95A;--warn-soft:#3A2F12;--danger:#E08A8A;--danger-soft:#3E1F1F}}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:"Noto Sans KR",-apple-system,"Apple SD Gothic Neo",sans-serif;font-size:14.5px;line-height:1.7;word-break:keep-all}
h1,h2,h3,h4{font-family:"IBM Plex Sans KR","Noto Sans KR",sans-serif;font-weight:600;margin:0}
button,.button{font:inherit;font-size:13.5px;padding:6px 12px;border:1px solid var(--line);border-radius:6px;background:var(--surface);color:var(--ink);cursor:pointer;text-decoration:none;line-height:1.4}
button:hover,.button:hover{border-color:var(--accent)}
button:focus-visible,.button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
button.primary{background:var(--accent);border-color:var(--accent);color:#fff}
button.danger{color:var(--danger);border-color:var(--danger)}
button.small{padding:2px 8px;font-size:12.5px}
button[disabled]{opacity:.5;cursor:not-allowed}
input,select,textarea{font:inherit;font-size:13.5px;padding:5px 8px;border:1px solid var(--line);border-radius:5px;background:var(--surface);color:var(--ink)}
input[readonly],textarea[readonly]{background:var(--code-bg);color:var(--muted)}
code,.mono{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.9em}

.top{display:flex;align-items:center;gap:20px;flex-wrap:wrap;padding:12px 22px;border-bottom:1px solid var(--line);background:var(--surface);position:sticky;top:0;z-index:5}
.brand{display:flex;align-items:baseline;gap:10px}
.brand h1{font-size:22px;letter-spacing:-.01em}
.brand .sub{color:var(--muted);font-size:13px}
.mark{display:inline-block;width:14px;height:14px;border-radius:50%;border:3px solid var(--accent);align-self:center}
.meta{margin:0;color:var(--muted);font-size:13px;flex:1;min-width:200px}
.actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.dirty{font-size:12.5px;color:var(--warn);background:var(--warn-soft);padding:2px 9px;border-radius:999px}

.shell{display:grid;grid-template-columns:240px minmax(0,1fr);min-height:calc(100vh - 58px)}
.shell.with-versions{grid-template-columns:240px minmax(0,1fr) 320px}
.side{border-right:1px solid var(--line);padding:14px;background:var(--surface);display:flex;flex-direction:column;gap:10px;position:sticky;top:58px;height:calc(100vh - 58px);overflow:auto}
.search{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--muted)}
.classlist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.classlist li{display:flex;justify-content:space-between;align-items:baseline;gap:8px;padding:5px 8px;border-radius:5px;cursor:pointer}
.classlist li:hover{background:var(--accent-soft)}
.classlist li.on{background:var(--accent-soft);color:var(--accent-ink);font-weight:500}
.classlist li .id{font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--muted)}
.classlist li.hidden{display:none}
.add{margin-top:auto}

.main{padding:14px 22px 60px;min-width:0}
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);margin-bottom:14px}
.tabs button{border:none;border-bottom:2px solid transparent;border-radius:0;background:none;padding:8px 12px;color:var(--muted)}
.tabs button[aria-selected="true"]{color:var(--accent-ink);border-bottom-color:var(--accent);font-weight:500}
.hint{color:var(--muted);font-size:13px;margin:0 0 10px;max-width:80ch}
.graphwrap{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:8px;overflow-x:auto}
svg{display:block;margin:0 auto;width:100%;max-width:900px;height:auto;font-family:"IBM Plex Sans KR",sans-serif}
.edge{fill:none;stroke:var(--dim);stroke-width:1.2;opacity:.85}
.edge.on{stroke:var(--accent);stroke-width:2;opacity:1}
.edge.off{opacity:.1}
.node circle{fill:var(--surface);stroke:var(--accent);stroke-width:1.6;cursor:pointer}
.node.on circle{fill:var(--accent-soft);stroke-width:2.4}
.node.off{opacity:.3}
.node text{fill:var(--ink);font-size:12.5px;font-weight:500;pointer-events:none}
.node .en{fill:var(--muted);font-size:10px;font-weight:400}
.node .cnt{fill:var(--accent-ink);font-size:10px;font-family:"IBM Plex Mono",monospace}

.editor{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:16px 18px}
.editor h3{font-size:18px;display:flex;gap:10px;align-items:baseline;margin-bottom:8px}
.editor h3 .id{font-family:"IBM Plex Mono",monospace;font-size:12px;color:var(--muted);font-weight:400}
.editor h4{font-size:11.5px;letter-spacing:.08em;color:var(--muted);margin:16px 0 6px}
.field{display:grid;grid-template-columns:110px 1fr;gap:8px 12px;align-items:start;margin:6px 0}
.field label{color:var(--muted);font-size:13px;padding-top:6px}
.field input,.field textarea{width:100%}
.field textarea{min-height:60px;resize:vertical}
table.edit{border-collapse:collapse;width:100%;font-size:13px}
table.edit th{text-align:left;font-family:"IBM Plex Sans KR",sans-serif;font-size:11.5px;letter-spacing:.04em;color:var(--muted);padding:4px 6px;border-bottom:1px solid var(--line);font-weight:600}
table.edit td{padding:3px 6px 3px 0;vertical-align:top;border-bottom:1px dashed var(--line)}
table.edit input,table.edit select{width:100%;min-width:60px}
table.edit td.w-s{width:110px}
table.edit td.w-m{width:170px}
table.edit td.w-x{width:34px;text-align:center}
table.edit td.w-c{width:52px;text-align:center}
.rowtools{display:flex;gap:8px;margin-top:8px;align-items:center;flex-wrap:wrap}
.refs{font-size:12.5px;color:var(--muted)}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{font-size:12px;padding:1px 9px;border-radius:999px;background:var(--accent-soft);color:var(--accent-ink);cursor:pointer;border:none}
.raw{width:100%;min-height:60vh;font-family:"IBM Plex Mono",monospace;font-size:12.5px;line-height:1.5;resize:vertical}
.row{display:flex;gap:10px;align-items:center;margin-top:8px}
.row.end{justify-content:flex-end}
.msg{font-size:13px;color:var(--muted)}
.msg.err{color:var(--danger)}
.errors{margin:6px 0 0;padding-left:1.2em;color:var(--danger);font-size:13px}

.versions{border-left:1px solid var(--line);background:var(--surface);padding:14px;position:sticky;top:58px;height:calc(100vh - 58px);overflow:auto}
.vhead{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.vhead h2{font-size:15px}
#versionlist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
#versionlist li{border:1px solid var(--line);border-radius:6px;padding:8px 10px;font-size:13px}
#versionlist li.current{border-color:var(--accent)}
#versionlist .vt{display:flex;justify-content:space-between;gap:8px;color:var(--muted);font-size:12px}
#versionlist .vm{margin:2px 0 4px}

dialog{border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--ink);padding:20px 22px;max-width:440px;width:calc(100% - 40px)}
dialog::backdrop{background:rgba(10,20,30,.45)}
dialog h2{font-size:17px;margin-bottom:6px}
dialog p{margin:0 0 10px;color:var(--muted);font-size:13.5px}
dialog label{display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--muted)}
dialog input{width:100%}
.toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);background:var(--ink);color:var(--bg);padding:8px 16px;border-radius:8px;font-size:13.5px;z-index:9;max-width:90vw}

@media (max-width: 860px){.shell,.shell.with-versions{grid-template-columns:1fr}.side{position:static;height:auto;border-right:none;border-bottom:1px solid var(--line)}.versions{position:static;height:auto}}

/* 사례 */
.entities{display:grid;grid-template-columns:300px minmax(0,1fr);gap:14px;align-items:start}
.ent-side{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:12px;display:flex;flex-direction:column;gap:8px;max-height:calc(100vh - 170px);overflow:auto}
.ent-side .row{margin:0}.ent-side select,.ent-side input{width:100%}
.entlist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.entlist li{padding:6px 8px;border-radius:5px;cursor:pointer;display:flex;flex-direction:column;gap:1px}
.entlist li:hover{background:var(--accent-soft)}.entlist li.on{background:var(--accent-soft);color:var(--accent-ink)}
.entlist li.old .lbl{text-decoration:line-through;color:var(--muted)}
.entlist .lbl{font-weight:500;font-size:13.5px}.entlist .sub{font-size:11.5px;color:var(--muted)}
.entlist .empty{color:var(--muted);cursor:default}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:0 14px}
.grid3 .field{grid-template-columns:70px 1fr}
.field label small{display:block;font-size:10.5px;color:var(--muted);font-weight:400}
.field label.req{color:var(--accent-ink);font-weight:600}
.targets{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.chip.tgt{background:var(--code-bg);color:var(--ink);cursor:default;font-family:"IBM Plex Mono",monospace;font-size:11.5px}
.chip .x{border:none;background:none;color:var(--danger);cursor:pointer;padding:0 2px;font-size:13px}
.addtgt{min-width:220px;font-size:12px}
.hist{font-size:12.5px;color:var(--muted);padding-left:1.2em}
.guide pre{white-space:pre-wrap}
.editor h4 small{font-weight:400;letter-spacing:0;text-transform:none;margin-left:6px}
@media (max-width: 860px){.entities{grid-template-columns:1fr}.grid3{grid-template-columns:1fr}}