:root {
  --bg: #07090d;
  --panel: rgba(12, 15, 21, 0.86);
  --panel-2: rgba(17, 20, 28, 0.78);
  --line: rgba(255,255,255,.09);
  --line-strong: rgba(255,255,255,.16);
  --text: #f3f5f8;
  --muted: #888f9c;
  --muted-2: #5f6672;
  --accent: #d7a7ff;
  --accent-2: #9ec8ff;
  --danger: #ff99b8;
  --success: #9fe3c3;
  --warning: #f6d58f;
  --violet: #c49aff;
  --blue: #87bfff;
  --green: #8ed8b7;
  --yellow: #e9d07c;
  --pink: #ef9ec8;
  --red: #ec8f98;
  --radius: 18px;
}

* { box-sizing: border-box; }
html, body { margin:0; min-height:100%; background:var(--bg); color:var(--text); font-family: Inter, Pretendard, "Noto Sans KR", system-ui, sans-serif; }
body {
  min-height:100vh;
  background:
    radial-gradient(circle at 75% 18%, rgba(175,112,255,.09), transparent 26%),
    radial-gradient(circle at 20% 82%, rgba(88,153,255,.07), transparent 24%),
    linear-gradient(180deg,#090b10 0%, #06070a 100%);
}
button { font:inherit; }

.app-shell {
  min-height:100vh;
  display:grid;
  grid-template-columns: 250px minmax(0, 1fr) 340px;
}

.sidebar, .detail-panel {
  position:sticky; top:0; height:100vh;
  background:rgba(7,9,13,.82);
  backdrop-filter: blur(18px);
  border-color:var(--line);
}
.sidebar { border-right:1px solid var(--line); padding:22px 16px; }
.detail-panel { border-left:1px solid var(--line); padding:22px; overflow:auto; }

.brand { display:flex; align-items:center; gap:11px; margin-bottom:26px; padding:0 7px; }
.brand-mark { width:28px; height:28px; border:1px solid rgba(255,255,255,.18); border-radius:50%; position:relative; box-shadow:0 0 28px rgba(212,158,255,.15); }
.brand-mark::before { content:""; position:absolute; width:7px; height:7px; border-radius:50%; background:var(--accent); left:10px; top:10px; box-shadow:0 0 18px var(--accent); }
.brand-name { font-weight:760; letter-spacing:.08em; }
.brand-sub { color:var(--muted-2); font-size:11px; margin-top:2px; }

.nav-group-title { font-size:10px; color:var(--muted-2); letter-spacing:.14em; text-transform:uppercase; margin:24px 9px 8px; }
.nav-item { width:100%; border:0; background:transparent; color:var(--muted); border-radius:12px; padding:11px 12px; display:flex; align-items:center; justify-content:space-between; cursor:pointer; text-align:left; }
.nav-item:hover { background:rgba(255,255,255,.04); color:var(--text); }
.nav-item.active { background:rgba(255,255,255,.065); color:var(--text); }
.nav-dot { width:7px; height:7px; border-radius:50%; background:var(--muted-2); }
.nav-item.active .nav-dot { background:var(--accent); box-shadow:0 0 14px rgba(215,167,255,.8); }

.workspace { min-width:0; padding:26px 28px 40px; }
.topbar { display:flex; justify-content:space-between; gap:20px; align-items:flex-end; border-bottom:1px solid var(--line); padding-bottom:18px; }
.eyebrow { color:var(--muted-2); font-size:10px; letter-spacing:.18em; }
h1 { margin:7px 0 0; font-size:26px; letter-spacing:-.02em; }
.topbar-actions { display:flex; gap:8px; }
.ghost-button { border:1px solid var(--line); background:rgba(255,255,255,.025); color:var(--muted); padding:8px 11px; border-radius:10px; cursor:pointer; }
.ghost-button:hover { color:var(--text); border-color:var(--line-strong); }
.ghost-button.active { color:var(--text); border-color:rgba(215,167,255,.35); background:rgba(215,167,255,.08); }

.summary-strip { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin:18px 0; }
.metric { border:1px solid var(--line); background:var(--panel); border-radius:14px; padding:13px 14px; }
.metric-label { color:var(--muted-2); font-size:10px; text-transform:uppercase; letter-spacing:.1em; }
.metric-value { margin-top:7px; font-size:16px; }
.metric-note { color:var(--muted); font-size:11px; margin-top:3px; }

.main-view { min-height:calc(100vh - 160px); }
.architecture-stack { display:grid; gap:12px; }
.layer { border:1px solid var(--line); background:linear-gradient(180deg, rgba(14,17,23,.86), rgba(10,12,17,.86)); border-radius:var(--radius); padding:16px; position:relative; overflow:hidden; }
.layer::after { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(90deg, transparent, rgba(255,255,255,.014), transparent); }
.layer-head { display:flex; align-items:center; justify-content:space-between; gap:18px; margin-bottom:13px; }
.layer-title { display:flex; align-items:center; gap:9px; font-size:13px; font-weight:720; }
.layer-index { width:24px; height:24px; border:1px solid var(--line-strong); border-radius:8px; display:grid; place-items:center; font-size:10px; color:var(--muted); }
.layer-note { color:var(--muted-2); font-size:11px; }
.node-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:9px; }
.node { border:1px solid var(--line); background:rgba(255,255,255,.025); border-radius:13px; min-height:92px; padding:12px; cursor:pointer; transition:.16s ease; position:relative; }
.node:hover { transform:translateY(-1px); border-color:var(--line-strong); background:rgba(255,255,255,.04); }
.node.selected { border-color:rgba(215,167,255,.48); box-shadow:0 0 0 1px rgba(215,167,255,.08) inset, 0 0 28px rgba(153,92,211,.08); }
.node-top { display:flex; justify-content:space-between; gap:8px; align-items:flex-start; }
.node-name { font-weight:700; font-size:12px; }
.node-badge { font-size:9px; color:var(--muted); padding:3px 6px; border:1px solid var(--line); border-radius:999px; white-space:nowrap; }
.node-desc { margin-top:9px; color:var(--muted); font-size:11px; line-height:1.5; }
.node-permission { position:absolute; right:9px; bottom:8px; color:var(--muted-2); font-size:9px; }

.relation-line { height:18px; display:grid; place-items:center; color:var(--muted-2); font-size:10px; }
.relation-line.hidden { visibility:hidden; }

.detail-empty { color:var(--muted); line-height:1.65; font-size:12px; padding-top:28px; }
.detail-kicker { color:var(--muted-2); text-transform:uppercase; letter-spacing:.14em; font-size:9px; }
.detail-title { font-size:21px; margin:8px 0 5px; }
.detail-desc { color:var(--muted); font-size:12px; line-height:1.65; }
.detail-section { border-top:1px solid var(--line); padding-top:15px; margin-top:17px; }
.detail-section h3 { margin:0 0 9px; font-size:11px; letter-spacing:.05em; }
.detail-list { display:grid; gap:7px; }
.detail-list-item { color:var(--muted); font-size:11px; line-height:1.55; padding-left:12px; position:relative; }
.detail-list-item::before { content:""; width:4px; height:4px; border-radius:50%; background:var(--muted-2); position:absolute; left:0; top:.62em; }
.tag-row { display:flex; flex-wrap:wrap; gap:6px; }
.tag { border:1px solid var(--line); color:var(--muted); padding:4px 7px; border-radius:999px; font-size:9px; }
.permission-pill { display:inline-flex; align-items:center; gap:6px; border:1px solid var(--line); border-radius:999px; padding:5px 8px; font-size:10px; color:var(--muted); }
.permission-pill::before { content:""; width:6px; height:6px; border-radius:50%; background:var(--accent); }
.io-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.io-box { border:1px solid var(--line); border-radius:11px; padding:10px; }
.io-label { color:var(--muted-2); font-size:9px; text-transform:uppercase; }
.io-value { color:var(--muted); font-size:10px; margin-top:5px; line-height:1.5; }

.pipeline { display:grid; gap:10px; }
.pipeline-group { border:1px solid var(--line); border-radius:16px; background:var(--panel); padding:15px; }
.pipeline-title { font-size:12px; font-weight:700; margin-bottom:10px; display:flex; justify-content:space-between; align-items:center; }
.pipeline-row { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.pipe-node { min-width:138px; max-width:210px; flex:1; border:1px solid var(--line); background:rgba(255,255,255,.025); border-radius:12px; padding:10px; cursor:pointer; }
.pipe-node:hover { border-color:var(--line-strong); }
.pipe-arrow { color:var(--muted-2); font-size:13px; }

.permission-board { display:grid; gap:12px; }
.permission-level { border:1px solid var(--line); background:var(--panel); border-radius:16px; padding:15px; display:grid; grid-template-columns:120px 1fr; gap:16px; }
.permission-level-name { font-weight:740; }
.permission-level-meta { color:var(--muted-2); font-size:10px; margin-top:5px; }
.permission-rules { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:8px; }
.rule { border:1px solid var(--line); border-radius:11px; padding:10px; color:var(--muted); font-size:11px; line-height:1.45; }

.map-board { display:grid; grid-template-columns:1.1fr .9fr; gap:12px; }
.map-canvas, .semantic-canvas { border:1px solid var(--line); border-radius:16px; background:var(--panel); padding:16px; min-height:420px; }
.map-node { border-left:3px solid var(--violet); padding:8px 10px; margin:8px 0; background:rgba(255,255,255,.02); border-radius:0 9px 9px 0; }
.map-node[data-color="blue"] { border-color:var(--blue); }
.map-node[data-color="green"] { border-color:var(--green); }
.map-node[data-color="yellow"] { border-color:var(--yellow); }
.map-node[data-color="pink"] { border-color:var(--pink); }
.map-node-title { font-size:11px; font-weight:700; }
.map-node-sub { font-size:10px; color:var(--muted); margin-top:3px; }
.semantic-card { border:1px solid var(--line); border-radius:12px; padding:12px; margin-bottom:9px; }
.semantic-card h4 { margin:0 0 7px; font-size:11px; }
.semantic-card p { margin:0; color:var(--muted); font-size:10px; line-height:1.5; }

.trace { display:grid; gap:8px; }
.trace-step { display:grid; grid-template-columns:84px 1fr 90px; gap:12px; align-items:center; border:1px solid var(--line); background:var(--panel); border-radius:13px; padding:11px 13px; }
.trace-time { color:var(--muted-2); font-size:10px; }
.trace-event { font-size:11px; }
.trace-target { color:var(--muted); font-size:10px; text-align:right; }

@media (max-width: 1180px) {
  .app-shell { grid-template-columns:220px minmax(0,1fr); }
  .detail-panel { position:fixed; right:0; width:330px; z-index:10; box-shadow:-20px 0 60px rgba(0,0,0,.35); }
}
@media (max-width: 820px) {
  .app-shell { grid-template-columns:1fr; }
  .sidebar { position:relative; height:auto; border-right:0; border-bottom:1px solid var(--line); }
  .workspace { padding:20px 14px; }
  .detail-panel { display:none; }
  .summary-strip { grid-template-columns:1fr 1fr; }
  .map-board { grid-template-columns:1fr; }
  .permission-level { grid-template-columns:1fr; }
}