*{box-sizing:border-box;margin:0;padding:0}
body{
  background:#ECEEF2;
  font-family:'Pretendard','Apple SD Gothic Neo','Noto Sans KR','Malgun Gothic',sans-serif;
  padding:20px;color:#222;
}
.container{max-width:1280px;margin:0 auto;background:#FFF;border-radius:18px;
  padding:24px;box-shadow:0 4px 20px rgba(0,0,0,.10);}
header{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;}
header h1{font-size:18px;color:#3A2890;letter-spacing:.04em;}
header .user-info{font-size:12px;color:#666;}
header .user-info button{margin-left:8px;border:1px solid #BBB;background:#FFF;
  padding:4px 10px;border-radius:6px;cursor:pointer;}

.section{border-radius:13px;padding:14px;margin-bottom:14px;}
.s-input{background:#EBF7F2;border:1.5px solid #3DBFA0;}
.s-progress{background:#FBFAFE;border:1.5px solid #C0B0E0;}
.s-result{background:#FFF8E4;border:1.5px solid #C8A030;}
.section h2{font-size:13px;color:#555;margin-bottom:10px;}

.dropzone{border:2px dashed #80B0E0;border-radius:10px;padding:18px;text-align:center;
  background:#F4F8FE;color:#4070A0;cursor:pointer;}
.dropzone.drag{background:#DBEAFE;}
.file-list{margin-top:10px;display:flex;flex-direction:column;gap:6px;}
.file-card{display:flex;align-items:center;gap:8px;padding:6px 10px;
  background:#FFF;border:1px solid #DDD;border-radius:8px;font-size:12px;}
.file-card .rm{margin-left:auto;color:#A40;cursor:pointer;border:0;background:none;}
.template-row{display:flex;align-items:center;margin-top:10px;padding:6px 8px;
  background:#FFF;border:1px solid #DDD;border-radius:8px;}
.prompt{width:100%;min-height:60px;margin-top:10px;padding:10px;border:1px solid #C0D0E0;
  border-radius:8px;font-family:inherit;font-size:13px;}
.btn-primary{margin-top:10px;background:#5840B8;color:#FFF;border:0;
  padding:10px 20px;border-radius:8px;cursor:pointer;font-weight:600;}
.btn-primary:disabled{opacity:.5;cursor:not-allowed;}

.progress-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
@media(max-width:900px){.progress-grid{grid-template-columns:1fr;}}

.diagram-pane{background:#FFF;border:1px solid #DDD;border-radius:10px;padding:14px;
  min-height:420px;}
.tree-pane{background:#FFF;border:1px solid #DDD;border-radius:10px;padding:14px;
  font-family:'JetBrains Mono','Consolas',monospace;font-size:12px;line-height:1.7;
  min-height:420px;overflow:auto;}
.tree-node{margin-left:0;}
.tree-children{margin-left:18px;}
.tree-icon{display:inline-block;width:18px;}
.icon-pending{color:#999;}
.icon-running{color:#C04010;}
.icon-done{color:#187838;}
.icon-error{color:#D02020;}
.tree-meta{color:#888;font-size:11px;margin-left:6px;}

.result-row{display:flex;align-items:center;gap:14px;margin-top:8px;}
.result-row a.btn{background:#3DBFA0;color:#FFF;padding:8px 16px;border-radius:8px;
  text-decoration:none;font-weight:600;}
.server-path{font-family:monospace;font-size:11px;color:#666;background:#F0F0F0;
  padding:6px 10px;border-radius:6px;}
.copy-btn{border:1px solid #999;background:#FFF;border-radius:5px;padding:2px 8px;
  font-size:10px;cursor:pointer;}

/* Live diagram */
.diagram-svg{width:100%;height:auto;display:block;}
.node-box{stroke-width:1.5;rx:8;ry:8;}
.node-orch{fill:#EBF7F2;stroke:#3DBFA0;}
.node-orch.active{fill:#C8F0E0;stroke:#1D8060;
  animation:pulse 1.2s ease-in-out infinite;}
.node-orch.done{fill:#A0E8C0;stroke:#187838;}
.node-cap{fill:#EEEAFE;stroke:#7868D8;}
.node-cap.active{fill:#D0C0F8;stroke:#4030A0;
  animation:pulse 1.2s ease-in-out infinite;}
.node-cap.done{fill:#B8A0E8;stroke:#4030A0;}
.node-prov{fill:#DBEAFE;stroke:#80B0E8;}
.node-label{font-size:11px;fill:#222;text-anchor:middle;font-weight:600;}
.node-sub{font-size:9px;fill:#666;text-anchor:middle;}
.flow-arrow{stroke:#888;stroke-width:1.5;fill:none;}
.flow-arrow.active{stroke:#5040B0;stroke-width:2;
  stroke-dasharray:4,3;animation:flow 1s linear infinite;}
@keyframes pulse{0%,100%{opacity:.85;}50%{opacity:1;}}
@keyframes flow{to{stroke-dashoffset:-14;}}

/* Login */
.login-card{max-width:360px;margin:80px auto;background:#FFF;border-radius:14px;
  padding:30px;box-shadow:0 4px 20px rgba(0,0,0,.10);}
.login-card h1{text-align:center;margin-bottom:24px;color:#3A2890;}
.login-card label{display:block;font-size:12px;color:#444;margin-top:12px;}
.login-card input{width:100%;padding:8px 10px;border:1px solid #BBB;
  border-radius:7px;margin-top:4px;font-size:13px;}
.login-card .btn-primary{width:100%;margin-top:18px;}
.login-error{color:#C03030;font-size:12px;margin-top:10px;}

/* === Stage timeline === */
.stage-timeline{display:flex;align-items:center;gap:8px;margin-bottom:14px;
  padding:10px 14px;background:#FFF;border:1px solid #DDD;border-radius:10px;}
.stage-node{display:flex;flex-direction:column;align-items:center;flex:0 0 auto;}
.stage-node .name{font-size:11px;color:#333;font-weight:600;margin-top:4px;
  white-space:nowrap;}
.stage-node .meta{font-size:10px;color:#888;margin-top:2px;height:13px;}
.stage-dot{width:24px;height:24px;border-radius:50%;border:2.5px solid #BBB;
  background:#FFF;display:flex;align-items:center;justify-content:center;
  font-size:13px;color:#888;line-height:1;transition:all .25s ease;}
.stage-dot.active{border-color:#5840B8;background:#EEEAFE;color:#3A2890;
  box-shadow:0 0 0 6px rgba(88,64,184,.12);
  animation:stagePulse 1.4s ease-in-out infinite;}
.stage-dot.done{border-color:#187838;background:#E0F4E5;color:#187838;}
.stage-dot.error{border-color:#D02020;background:#FDE0E0;color:#D02020;}
.stage-conn{flex:1;height:3px;background:#DDD;border-radius:2px;position:relative;
  overflow:hidden;}
.stage-conn .fill{position:absolute;left:0;top:0;bottom:0;width:0%;
  background:linear-gradient(90deg,#5840B8,#187838);transition:width .4s ease;}
.stage-conn.done .fill{width:100%;}
@keyframes stagePulse{
  0%,100%{box-shadow:0 0 0 6px rgba(88,64,184,.12);}
  50%{box-shadow:0 0 0 10px rgba(88,64,184,.22);}
}

/* === Skill chip badge === */
.diagram-pane g.cap-chip{cursor:pointer;}
.cap-badge{font-size:10px;font-weight:700;fill:#FFF;}
.cap-badge-bg{fill:#C04010;}

/* === Cross-pane hover/active highlight === */
.diagram-pane .cap-chip rect.node-box.hovered{
  stroke:#FF6B00 !important;stroke-width:3 !important;}
.tree-node.hover{background:#FFF3D0;border-radius:4px;outline:1px dashed #C8A030;}
.tree-node.cross-active{background:#EEEAFE;border-radius:4px;
  outline:1px solid #5840B8;}

/* === Active flow line from synthesizer to invoked chip === */
.flow-active-link{stroke:#5040B0;stroke-width:3;fill:none;
  stroke-dasharray:8,5;animation:flowActive 0.9s linear infinite;
  filter:drop-shadow(0 0 4px rgba(80,64,176,.55));}
@keyframes flowActive{to{stroke-dashoffset:-26;}}

/* Diagram chip data attribute target */
.diagram-pane g[data-cap].is-active rect.node-box{
  stroke-width:3;filter:drop-shadow(0 0 6px rgba(64,48,160,.55));}

/* === Sidebar (slim/expanded) === */
.layout-with-sidebar{display:flex;min-height:100vh;}
.sidebar{flex:0 0 220px;background:#FFF;border-right:1px solid #DDD;
  display:flex;flex-direction:column;transition:flex-basis .15s ease;
  position:sticky;top:0;height:100vh;overflow:hidden;}
.sidebar.slim{flex:0 0 64px;}
.sidebar-toggle{padding:12px;border:0;background:transparent;cursor:pointer;
  font-size:14px;color:#5840B8;text-align:left;border-bottom:1px solid #EEE;}
.sidebar-section-title{font-size:10px;color:#999;font-weight:700;
  letter-spacing:.05em;padding:10px 14px 4px;text-transform:uppercase;}
.sidebar.slim .sidebar-section-title{display:none;}
.sidebar-item{display:flex;align-items:center;gap:10px;padding:10px 14px;
  text-decoration:none;color:#333;font-size:13px;cursor:pointer;
  position:relative;border:0;background:transparent;width:100%;text-align:left;}
.sidebar-item:hover{background:#F4F0FE;}
.sidebar-item[aria-current="page"]{background:#EEEAFE;color:#3A2890;font-weight:700;}
.sidebar-item .icon{flex:0 0 24px;font-size:16px;text-align:center;}
.sidebar-item .label{flex:1 1 auto;}
.sidebar.slim .sidebar-item .label{display:none;}
.sidebar.slim .sidebar-item:hover::after{
  content:attr(data-label);position:absolute;left:64px;top:50%;transform:translateY(-50%);
  background:#222;color:#FFF;padding:4px 8px;border-radius:4px;font-size:11px;
  white-space:nowrap;z-index:100;pointer-events:none;}
.sidebar-divider{height:1px;background:#EEE;margin:8px 0;}
.sidebar form{margin:0;}
.main-area{flex:1 1 auto;display:flex;flex-direction:column;}

/* Landing cards */
.landing{padding:40px 24px;}
.landing h1{font-size:20px;color:#3A2890;text-align:center;margin-bottom:32px;}
.landing-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:18px;max-width:900px;margin:0 auto;}
.landing-card{background:#FFF;border:1px solid #DDD;border-radius:14px;
  padding:24px;cursor:pointer;transition:all .15s ease;text-decoration:none;color:inherit;
  display:block;}
.landing-card:hover{border-color:#5840B8;box-shadow:0 4px 14px rgba(88,64,184,.15);
  transform:translateY(-2px);}
.landing-card .lc-icon{font-size:36px;margin-bottom:10px;}
.landing-card .lc-title{font-size:16px;font-weight:700;color:#3A2890;margin-bottom:6px;}
.landing-card .lc-desc{font-size:12px;color:#666;line-height:1.5;}
.landing-card .lc-cta{margin-top:14px;color:#5840B8;font-size:12px;font-weight:600;}
.landing-admin{margin:32px auto 0;max-width:900px;text-align:center;
  border-top:1px dashed #DDD;padding-top:18px;}
.landing-admin a{display:inline-block;margin:0 10px;color:#666;font-size:12px;
  text-decoration:none;padding:6px 14px;border:1px solid #DDD;border-radius:6px;}
.landing-admin a:hover{border-color:#5840B8;color:#5840B8;}