/* Visionbay Workbench — MVP styles. 규칙과 token의 정본은 docs/visionbay/specs/DESIGN.md (IBM Carbon white theme 기반) */
:root{
  --background:#ffffff; --layer-01:#f4f4f4; --layer-02:#ffffff; --layer-hover:#e8e8e8; --layer-selected:#e0e0e0;
  --border-subtle:#e0e0e0; --border-strong:#8d8d8d;
  --text-primary:#161616; --text-secondary:#525252; --text-helper:#6f6f6f; --text-placeholder:#a8a8a8; --text-on-color:#ffffff;
  --interactive:#0f62fe; --interactive-hover:#0050e6; --interactive-active:#002d9c; --focus:#0f62fe;
  --shell:#161616; --button-secondary:#393939; --button-secondary-hover:#474747; --disabled-bg:#c6c6c6; --disabled-text:#8d8d8d;
  --highlight:#d0e2ff;
  --support-success:#24a148; --support-warning:#f1c21b; --support-error:#da1e28; --support-info:#0043ce;
  --info-bg:#edf5ff; --warning-bg:#fcf4d6;
  --code-bg:#262626; --code-text:#f4f4f4;
  --tag-gray-bg:#e0e0e0; --tag-gray-text:#161616; --tag-blue-bg:#d0e2ff; --tag-blue-text:#002d9c;
  --tag-purple-bg:#e8daff; --tag-purple-text:#6929c4; --tag-green-bg:#a7f0ba; --tag-green-text:#0e6027;
  --font-sans:"IBM Plex Sans","IBM Plex Sans KR","Microsoft JhengHei","PingFang TC","Noto Sans TC","Malgun Gothic","Segoe UI",system-ui,sans-serif;
  --font-mono:"IBM Plex Mono",Consolas,"Cascadia Mono",monospace;
  --sp-01:2px; --sp-02:4px; --sp-03:8px; --sp-04:12px; --sp-05:16px; --sp-06:24px; --sp-07:32px; --sp-08:40px; --sp-09:48px;
}
*{box-sizing:border-box}
body{margin:0;font-family:var(--font-sans);font-size:14px;line-height:20px;letter-spacing:.16px;color:var(--text-primary);background:var(--layer-01)}
a{color:var(--interactive);text-decoration:none}
a:hover{text-decoration:underline}
button{font:inherit;letter-spacing:inherit;cursor:pointer}
input,select,textarea{font:inherit;letter-spacing:inherit;color:inherit}
:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}

/* ---------- shell header (48px) ---------- */
.topbar{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:var(--sp-03);height:48px;padding:0 var(--sp-05);background:var(--background);border-bottom:1px solid var(--border-subtle)}
.topbar h1{font-size:14px;line-height:18px;margin:0 var(--sp-03) 0 0;font-weight:600}
.topbar h1 a{color:var(--text-primary)}
.topbar h1 a:hover{text-decoration:none}
.badge-mvp{font-size:12px;line-height:16px;letter-spacing:.32px;padding:var(--sp-02) var(--sp-03);border-radius:24px;background:var(--tag-gray-bg);color:var(--tag-gray-text)}
.topbar .spacer{flex:1}
.lang{height:32px;border:none;border-bottom:1px solid var(--border-strong);background:var(--layer-01);padding:0 var(--sp-03);font-size:14px}
.who{display:inline-flex;align-items:center;gap:var(--sp-03);font-size:12px;line-height:16px;letter-spacing:.32px;color:var(--text-secondary)}

/* ---------- buttons: primary / secondary / tertiary(default) / ghost ---------- */
.btn{display:inline-flex;align-items:center;min-height:40px;padding:0 var(--sp-05);border:1px solid var(--interactive);border-radius:0;background:transparent;color:var(--interactive);font-size:14px;font-weight:400;white-space:nowrap}
.btn:hover{background:var(--interactive);color:var(--text-on-color);text-decoration:none}
.btn.primary{background:var(--interactive);border-color:var(--interactive);color:var(--text-on-color)}
.btn.primary:hover{background:var(--interactive-hover);border-color:var(--interactive-hover)}
.btn.secondary{background:var(--button-secondary);border-color:var(--button-secondary);color:var(--text-on-color)}
.btn.secondary:hover{background:var(--button-secondary-hover)}
.btn.ghost{border-color:transparent;color:var(--interactive)}
.btn.ghost:hover{background:var(--layer-hover);color:var(--interactive-active)}
.btn.small{min-height:32px;padding:0 var(--sp-04)}
.btn:disabled,.btn:disabled:hover{background:var(--disabled-bg);border-color:var(--disabled-bg);color:var(--disabled-text);cursor:not-allowed}
.btn.ghost:disabled{background:transparent;border-color:transparent}
.hint{color:var(--text-secondary);font-size:12px;line-height:16px;letter-spacing:.32px;padding:var(--sp-04) var(--sp-05) 0}

/* ---------- diagram (index) ---------- */
.canvas{overflow:auto;padding-bottom:var(--sp-03)}
.diagram{display:flex;align-items:stretch;padding:var(--sp-04) var(--sp-05);min-width:1600px}
.col{display:flex;flex-direction:column;gap:var(--sp-03)}
.col-head{background:var(--shell);color:var(--text-on-color);text-align:center;padding:var(--sp-03) var(--sp-02);font-weight:600;font-size:14px;line-height:18px;min-height:48px;display:flex;align-items:center;justify-content:center}
.box{background:var(--layer-02);border:1px solid var(--border-subtle);padding:var(--sp-03)}
.box-title{font-weight:600;padding:var(--sp-02);text-align:center;line-height:18px}
.item{background:var(--layer-01);border-bottom:2px solid transparent;padding:var(--sp-02) var(--sp-03);margin-top:var(--sp-02);font-size:12px;line-height:16px;letter-spacing:.32px;text-align:center}
a.item,a.box-title,a.proto{display:block;color:var(--text-primary);text-decoration:none}
a.item:hover,a.box-title:hover,a.proto:hover{background:var(--layer-hover);border-bottom-color:var(--interactive)}
.hl{background:var(--highlight)!important;box-shadow:inset 0 0 0 2px var(--interactive)}
.box.hl{background:var(--layer-02)!important;box-shadow:0 0 0 2px var(--interactive)}
.src-row{display:flex;gap:var(--sp-03);align-items:stretch}
.src-row .box{width:220px}
.protos{width:128px;display:flex;flex-direction:column;justify-content:center;gap:var(--sp-01)}
.proto{font-size:12px;line-height:16px;letter-spacing:.32px;padding:var(--sp-01) var(--sp-03);border-bottom:2px solid transparent;white-space:nowrap}
.proto::before{content:"→ ";color:var(--text-helper)}
.conn{width:64px;flex:0 0 64px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--sp-02);color:var(--text-helper);padding-top:48px}
.conn .num{width:24px;height:24px;border-radius:50%;background:var(--shell);color:var(--text-on-color);display:flex;align-items:center;justify-content:center;font-weight:600;font-size:12px}
.conn .arrow{font-size:20px;line-height:1}
.conn .lbl{font-size:12px;line-height:16px;text-align:center}
.cyl{border-radius:50% / 14px;padding:var(--sp-05) var(--sp-03) var(--sp-04);margin-top:0;background:var(--layer-02);border:1px solid var(--border-subtle)}
.cyl .sub{display:block;color:var(--text-helper);font-size:12px}
.w-collect{width:208px}.w-process{width:224px}.w-store{width:168px}.w-use{width:224px}.w-user{width:200px}
.strip{display:flex;align-items:stretch;margin:0 var(--sp-05) var(--sp-03);min-width:1568px;background:var(--layer-02);border:1px solid var(--border-subtle)}
.strip-head{background:var(--shell);color:var(--text-on-color);padding:var(--sp-03) var(--sp-04);width:208px;font-weight:600;display:flex;align-items:center}
.strip .item{flex:1;margin:var(--sp-02);display:flex;align-items:center;justify-content:center}
.strip.feedback .item+.item::before{content:"→";margin-right:var(--sp-03);color:var(--text-helper)}
.hl-banner{margin:var(--sp-04) var(--sp-05) 0;padding:var(--sp-02) var(--sp-04);background:var(--info-bg);border-left:3px solid var(--support-info);display:flex;gap:var(--sp-03);align-items:center}

/* ---------- FR-9 knowledge level (색은 데이터의 colorToken → --kl) ---------- */
.kbar{display:flex;align-items:center;gap:var(--sp-05);flex-wrap:wrap;padding:var(--sp-03) var(--sp-05) 0;font-size:12px;line-height:16px;letter-spacing:.32px;color:var(--text-secondary)}
.kbar label{display:inline-flex;align-items:center;gap:var(--sp-03)}
.legend{display:inline-flex;align-items:center;gap:var(--sp-02);color:var(--text-primary)}
.swatch{display:inline-block;width:12px;height:12px;background:var(--kl)}
a.kl{box-shadow:inset 4px 0 0 var(--kl)}
.kl-tag{display:inline-flex;align-items:center;justify-content:center;min-width:16px;height:16px;margin-left:var(--sp-02);padding:0 var(--sp-02);background:var(--kl);color:var(--text-primary);font-size:12px;line-height:16px;font-weight:600;vertical-align:middle}
.kn-row{display:flex;gap:var(--sp-04);align-items:baseline;padding:var(--sp-03) 0;border-bottom:1px solid var(--border-subtle)}
.kn-row .lv{flex:0 0 112px;display:inline-flex;align-items:center;gap:var(--sp-02);font-weight:600}
.kn-row .nm{flex:0 0 160px}
.kn-row .cm{color:var(--text-secondary)}
.kn-form{margin-top:var(--sp-05);background:var(--layer-01);padding:var(--sp-05)}
.kn-form .opts{margin-bottom:var(--sp-04)}

/* ---------- FR-10 description edit + AI translation ---------- */
.desc-ed{border:1px solid var(--border-subtle);padding:var(--sp-05);margin-bottom:var(--sp-05)}
.desc-ed .row{display:flex;gap:var(--sp-03);flex-wrap:wrap;align-items:center;margin-top:var(--sp-04)}
.desc-ed textarea.code{min-height:160px}
.tr-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(288px,1fr));gap:var(--sp-05);margin-top:var(--sp-04)}
.tr-grid .card h4{margin:0 0 var(--sp-03);font-size:14px;line-height:18px;font-weight:600}
.tr-grid label.f{margin-top:var(--sp-03)}

/* ---------- detail page ---------- */
.crumbs{padding:var(--sp-04) var(--sp-06) 0;color:var(--text-secondary);font-size:12px;line-height:16px;letter-spacing:.32px}
.crumbs .sep{margin:0 var(--sp-03);color:var(--text-helper)}
.page{display:grid;grid-template-columns:256px minmax(0,1fr);gap:var(--sp-05);padding:var(--sp-04) var(--sp-06) var(--sp-07);max-width:1600px}
.side{display:flex;flex-direction:column;gap:var(--sp-05)}
.card{background:var(--layer-02);border:1px solid var(--border-subtle);padding:var(--sp-05)}
.side h4,.label-h{margin:0 0 var(--sp-03);font-size:14px;line-height:18px;font-weight:600;color:var(--text-primary)}
.parent-link{display:block;padding:var(--sp-03);background:var(--layer-01);font-weight:600}
.child-list{list-style:none;margin:0 calc(-1 * var(--sp-05));padding:0}
.child-list li a{display:flex;align-items:center;min-height:32px;padding:var(--sp-02) var(--sp-05) var(--sp-02) calc(var(--sp-05) - 3px);color:var(--text-primary);border-left:3px solid transparent}
.child-list li a:hover{background:var(--layer-hover);text-decoration:none}
.child-list li a.on{background:var(--layer-selected);border-left-color:var(--interactive);font-weight:600}
.child-list .cnt{margin-left:auto;font-size:12px;color:var(--text-helper);font-weight:400}
.main{min-width:0}
.head-card{background:var(--layer-02);border:1px solid var(--border-subtle);border-bottom:none;padding:var(--sp-05) var(--sp-06) 0}
.head-card h2{font-size:28px;line-height:36px;font-weight:400;margin:var(--sp-03) 0 var(--sp-02)}
.head-card .crumb{color:var(--text-secondary);font-size:12px;line-height:16px;letter-spacing:.32px;margin-bottom:var(--sp-05)}
.body-card{background:var(--layer-02);border:1px solid var(--border-subtle);border-top:1px solid var(--border-subtle);padding:var(--sp-06)}
.body-card h3{font-size:14px;line-height:18px;font-weight:600;margin:var(--sp-06) 0 var(--sp-03);color:var(--text-primary)}
.summary{font-size:16px;line-height:24px;margin:0 0 var(--sp-04)}
.body{max-width:880px}
.body p,.body li{font-size:16px;line-height:24px}
.chips{display:flex;flex-wrap:wrap;gap:var(--sp-03)}
.child-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(224px,1fr));gap:var(--sp-01)}
.child-grid a{display:block;background:var(--layer-01);padding:var(--sp-05);color:var(--text-primary);border-bottom:2px solid transparent;min-height:96px}
.child-grid a:hover{background:var(--layer-hover);border-bottom-color:var(--interactive);text-decoration:none}
.child-grid b{font-weight:600}

/* tabs (line) */
.tabs{display:flex;border-bottom:1px solid var(--border-subtle)}
.head-card .tabs{border-bottom:none;margin:0 calc(-1 * var(--sp-05))}
.tab{border:none;border-bottom:2px solid transparent;background:none;padding:var(--sp-04) var(--sp-05);color:var(--text-secondary);font-size:14px}
.tab:hover{color:var(--text-primary);border-bottom-color:var(--border-strong);text-decoration:none}
.tab.on{border-bottom-color:var(--interactive);color:var(--text-primary);font-weight:600}

/* tags */
.chip,.status{display:inline-flex;align-items:center;height:24px;padding:0 var(--sp-03);border-radius:24px;font-size:12px;line-height:16px;letter-spacing:.32px;background:var(--tag-gray-bg);color:var(--tag-gray-text);white-space:nowrap}
.chip.blue,a.chip{background:var(--tag-blue-bg);color:var(--tag-blue-text)}
a.chip:hover{background:#b8d3ff;text-decoration:none}
.st-Draft{background:var(--tag-gray-bg);color:var(--tag-gray-text)}
.st-InReview{background:var(--tag-purple-bg);color:var(--tag-purple-text)}
.st-Approved{background:var(--tag-green-bg);color:var(--tag-green-text)}

/* inline notifications */
.note{font-size:12px;line-height:16px;letter-spacing:.32px;color:var(--text-primary);background:var(--info-bg);border-left:3px solid var(--support-info);padding:var(--sp-03) var(--sp-04);margin-top:var(--sp-03)}
.note.warn{background:var(--warning-bg);border-left-color:var(--support-warning)}
.meta{color:var(--text-helper);font-size:12px;line-height:16px;letter-spacing:.32px;margin-top:var(--sp-02)}

/* ---------- datasets ---------- */
.ds-card{display:block;background:var(--layer-01);padding:var(--sp-05);margin-bottom:var(--sp-01);color:var(--text-primary);border-bottom:2px solid transparent}
.ds-card:hover{background:var(--layer-hover);border-bottom-color:var(--interactive);text-decoration:none}
.ds-card .top{display:flex;align-items:center;gap:var(--sp-03)}
.ds-card .name{font-weight:600}

/* ---------- editor ---------- */
.ed-bar{display:flex;align-items:center;gap:var(--sp-03);flex-wrap:wrap;padding-bottom:var(--sp-05);border-bottom:1px solid var(--border-subtle);margin-bottom:var(--sp-05)}
.ed-bar .title{font-size:20px;line-height:28px}
.ed-bar .spacer{flex:1}
.ed-bar .btn{margin:0}
.ed-cols{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:var(--sp-05);align-items:start}
.ed-aside{position:sticky;top:64px}
fieldset{border:1px solid var(--border-subtle);padding:var(--sp-04) var(--sp-05) var(--sp-05);margin:0 0 var(--sp-05);min-width:0}
legend{font-weight:600;padding:0 var(--sp-02)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(192px,1fr));gap:var(--sp-05)}
label.f{display:flex;flex-direction:column;gap:var(--sp-03);font-size:12px;line-height:16px;letter-spacing:.32px;color:var(--text-secondary)}
label.f input,label.f select,label.f textarea{min-height:40px;border:none;border-bottom:1px solid var(--border-strong);background:var(--layer-01);padding:var(--sp-03) var(--sp-05);font-size:14px;letter-spacing:.16px;color:var(--text-primary)}
label.f textarea{padding:var(--sp-03) var(--sp-05);resize:vertical}
label.f input:focus,label.f select:focus,label.f textarea:focus,textarea.code:focus,table.fields input:focus,table.fields select:focus{outline:2px solid var(--focus);outline-offset:-2px}
.calc{display:flex;gap:var(--sp-01);flex-wrap:wrap;margin-top:var(--sp-05)}
.calc div{background:var(--layer-01);padding:var(--sp-03) var(--sp-05);font-size:12px;line-height:16px;color:var(--text-secondary);min-width:136px}
.calc b{display:block;font-size:20px;line-height:28px;font-weight:400;color:var(--text-primary)}
.opts{display:grid;grid-template-columns:repeat(auto-fill,minmax(208px,1fr));gap:var(--sp-01)}
.opt{background:var(--layer-01);padding:var(--sp-04) var(--sp-05);font-size:12px;line-height:16px;border:1px solid transparent}
.opt.on{background:var(--layer-02);border-color:var(--interactive);box-shadow:inset 0 0 0 1px var(--interactive)}
.opt .t{font-weight:600;font-size:14px;line-height:18px}
.opt .d{color:var(--text-secondary);margin-top:var(--sp-02)}
.opt .ctl{display:flex;gap:var(--sp-05);margin-top:var(--sp-03);font-size:14px}
.opt input{accent-color:var(--interactive)}
.toggle{display:inline-flex;align-items:center;height:32px;padding:0 var(--sp-05);margin:0 var(--sp-03) var(--sp-03) 0;border:1px solid var(--border-strong);background:var(--layer-02);font-size:14px;cursor:pointer;user-select:none}
.toggle:hover{background:var(--layer-hover)}
.toggle.on{background:var(--interactive);border-color:var(--interactive);color:var(--text-on-color)}
textarea.code{width:100%;min-height:128px;font-family:var(--font-mono);font-size:12px;line-height:16px;letter-spacing:.32px;border:none;border-bottom:1px solid var(--border-strong);background:var(--layer-01);padding:var(--sp-03) var(--sp-05)}
table.fields{width:100%;border-collapse:collapse;margin-top:var(--sp-03);font-size:14px}
table.fields th{text-align:left;background:var(--layer-selected);font-weight:600;height:40px;padding:0 var(--sp-05)}
table.fields td{height:40px;padding:0 var(--sp-05);border-bottom:1px solid var(--border-subtle)}
table.fields tbody tr:hover{background:var(--layer-hover)}
table.fields input,table.fields select{width:100%;height:32px;border:none;border-bottom:1px solid var(--border-strong);background:var(--layer-01);padding:0 var(--sp-03);font-size:14px}
table.fields input[type=checkbox]{width:auto;height:auto;accent-color:var(--interactive)}
pre.out{background:var(--code-bg);color:var(--code-text);font-family:var(--font-mono);font-size:12px;line-height:16px;letter-spacing:.32px;padding:var(--sp-05);overflow:auto;max-height:520px;margin:0;white-space:pre}
.out-bar{display:flex;gap:var(--sp-02);align-items:center;margin:var(--sp-03) 0}
.ai-item{background:var(--layer-01);padding:var(--sp-04) var(--sp-05);margin-bottom:var(--sp-01)}
.ai-item .cat{font-size:12px;line-height:16px;color:var(--text-secondary);font-weight:600}
.ai-item .acts{display:flex;gap:var(--sp-02);align-items:center;margin-top:var(--sp-03)}
.cmt{border-left:3px solid var(--border-subtle);padding:var(--sp-02) var(--sp-04);margin-bottom:var(--sp-03)}
.cmt .who{font-size:12px;line-height:16px;color:var(--text-helper)}
.path-step{display:flex;gap:var(--sp-03);align-items:flex-start;padding:var(--sp-03) 0;border-bottom:1px solid var(--border-subtle)}
.path-step:last-child{border-bottom:none}
.path-step .n{flex:0 0 auto;width:24px;height:24px;border-radius:50%;background:var(--shell);color:var(--text-on-color);font-size:12px;font-weight:600;display:flex;align-items:center;justify-content:center}
.path-step .l{font-size:12px;line-height:16px;color:var(--text-secondary)}
.path-step .chips{margin-top:var(--sp-02);gap:var(--sp-02)}
.path-step a.chip{background:var(--highlight);color:var(--tag-blue-text)}

/* ---------- modal + toast (그림자를 쓰는 유일한 곳) ---------- */
.modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(22,22,22,.5);z-index:20;padding:var(--sp-05)}
.modal.open{display:flex}
.modal .mcard{background:var(--layer-02);width:min(912px,100%);max-height:90vh;display:flex;flex-direction:column;box-shadow:0 2px 6px rgba(0,0,0,.3)}
.modal .hd{display:flex;align-items:center;padding:var(--sp-05) var(--sp-05) var(--sp-04)}
.modal .hd h2{font-size:20px;line-height:28px;font-weight:400;margin:0}
.modal .bd{padding:0 var(--sp-05) var(--sp-05);overflow:auto}
.x{margin-left:auto;border:none;background:none;font-size:20px;line-height:1;width:48px;height:48px}
.x:hover{background:var(--layer-hover)}
.toast{position:fixed;left:50%;bottom:var(--sp-06);transform:translateX(-50%);background:var(--shell);color:var(--text-on-color);border-left:3px solid var(--support-success);padding:var(--sp-04) var(--sp-05);opacity:0;transition:opacity .2s;z-index:30;pointer-events:none;box-shadow:0 2px 6px rgba(0,0,0,.3)}
.toast.show{opacity:1}

@media (max-width:1100px){.ed-cols{grid-template-columns:1fr}.ed-aside{position:static}}
@media (max-width:760px){.page{grid-template-columns:1fr;padding:var(--sp-04) var(--sp-05) var(--sp-06)}.crumbs{padding:var(--sp-04) var(--sp-05) 0}.topbar{flex-wrap:wrap;height:auto;padding:var(--sp-03) var(--sp-05)}}