:root{
  --bg:#0e1320; --bg2:#0b0f1a; --panel:#151d2e; --panel2:#1b2540; --panel3:#202b4a;
  --line:#28324e; --line2:#33405f;
  --txt:#e9eefb; --muted:#93a1c0; --faint:#6b7899;
  --accent:#5b8cff; --accent-d:#3a63c0; --accent2:#25c98d; --new:#ff8f43; --warn:#ffce54;
  --ncbi:#5b8cff; --chebi:#c07bff; --food:#25c98d;
  --radius:16px; --radius-s:11px;
  --shadow:0 10px 30px rgba(0,0,0,.35);
  --sidebar:256px;
  /* 시맨틱 표면(테마 전환용) */
  --glow1:#17203a; --glow2:#142138; --side1:#0c111d; --side2:#0a0e18;
  --hover:#131b2c; --chip-bg:#111a2b; --grad-card:#131a2a; --topbar-bg:rgba(14,19,32,.72);
  --input-bg:#101828; --dz-hover:#12203a; --track:#2a3450; --knob:#8595b8; --knob-on:#fff;
  --progress-bg:#1a2338; --th-bg:#131c2e; --th-tx:#c9d5f0; --sub-bg:#182135;
  --notice-bg:#141d30; --code-bg:#0b1120; --cy-bg:#0b1120; --scroll:#28324e; --off:#576079;
  --active-tx:#ffffff; --btn-tx-hover:#ffffff; --leaf-tx:#cdd8f0;
  --ncbi-tx:#a9c4ff; --ncbi-bg:rgba(91,140,255,.16); --ncbi-bd:#3a63c0;
  --chebi-tx:#d9b9ff; --chebi-bg:rgba(192,123,255,.16); --chebi-bd:#7d4fbf;
  --food-tx:#8ff0c9; --food-bg:rgba(37,201,141,.16); --food-bd:#1f8f66;
  --keep-tx:#8ff0c9; --keep-bg:rgba(37,201,141,.13);
  --refine-tx:#ffce54; --refine-bg:rgba(255,206,84,.12);
  --newc-tx:#ffb083; --newc-bg:rgba(255,143,67,.14); --none-bg:#141d2f;
  --hero1:#182848; --hero2:#131c30;
}
:root[data-theme="light"]{
  --bg:#f4f6fb; --bg2:#eef1f8; --panel:#ffffff; --panel2:#eef2fb; --panel3:#e3e9f6;
  --line:#dde3f0; --line2:#cbd5ea;
  --txt:#1b2338; --muted:#586780; --faint:#8492ab;
  --accent:#2f6fe0; --accent-d:#2f6fe0; --accent2:#0f9d63; --new:#e06a1c; --warn:#b8860b;
  --ncbi:#2f6fe0; --chebi:#8a3fd6; --food:#0f9d63;
  --shadow:0 8px 22px rgba(30,50,90,.10);
  --glow1:#e2ecff; --glow2:#dcf5ea; --side1:#ffffff; --side2:#f3f6fc;
  --hover:#eef2fb; --chip-bg:#eef2fb; --grad-card:#f8faff; --topbar-bg:rgba(255,255,255,.82);
  --input-bg:#f4f7fd; --dz-hover:#e7effe; --track:#c9d3e8; --knob:#ffffff; --knob-on:#ffffff;
  --progress-bg:#e3e9f6; --th-bg:#eef2fb; --th-tx:#33405f; --sub-bg:#e8edf7;
  --notice-bg:#eef3fd; --code-bg:#f1f5fc; --cy-bg:#f7f9ff; --scroll:#c9d3e8; --off:#b3bccf;
  --active-tx:#14356e; --btn-tx-hover:#14356e; --leaf-tx:#33405f;
  --ncbi-tx:#2f6fe0; --ncbi-bg:rgba(47,111,224,.10); --ncbi-bd:#9cbcf5;
  --chebi-tx:#8a3fd6; --chebi-bg:rgba(138,63,214,.10); --chebi-bd:#d3b5f2;
  --food-tx:#0f9d63; --food-bg:rgba(15,157,99,.12); --food-bd:#9adcbf;
  --keep-tx:#0f9d63; --keep-bg:rgba(15,157,99,.12);
  --refine-tx:#a5730a; --refine-bg:rgba(201,138,0,.14);
  --newc-tx:#c85a12; --newc-bg:rgba(224,106,28,.12); --none-bg:#eef2fb;
  --hero1:#e5edff; --hero2:#eaf6f0;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:radial-gradient(1200px 700px at 78% -8%, var(--glow1) 0%, transparent 55%),
             radial-gradient(900px 600px at -10% 110%, var(--glow2) 0%, transparent 50%),
             var(--bg);
  color:var(--txt);
  transition:background-color .2s, color .2s;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  line-height:1.55; -webkit-font-smoothing:antialiased;
}
a{color:var(--accent);text-decoration:none}
button{font-family:inherit}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:var(--scroll);border-radius:8px}

/* ================= 레이아웃 ================= */
.app{display:flex;min-height:100vh}
.sidebar{
  width:var(--sidebar);flex:0 0 var(--sidebar);position:sticky;top:0;height:100vh;
  background:linear-gradient(180deg,var(--side1),var(--side2));border-right:1px solid var(--line);
  display:flex;flex-direction:column;padding:18px 14px;gap:6px;z-index:20;
}
.brand{display:flex;align-items:center;gap:11px;padding:6px 8px 14px}
.brand .logo{width:34px;height:34px;border-radius:10px;flex:0 0 auto;
  background:conic-gradient(from 210deg,#5b8cff,#25c98d,#c07bff,#5b8cff);
  box-shadow:0 4px 14px rgba(91,140,255,.4)}
.brand .bt{font-weight:800;font-size:15px;letter-spacing:-.2px;line-height:1.2}
.brand .bs{font-size:11px;color:var(--muted)}
.nav{display:flex;flex-direction:column;gap:3px;margin-top:4px}
.nav-item{
  display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:11px;
  color:var(--muted);font-weight:600;font-size:13.5px;cursor:pointer;border:1px solid transparent;
  background:none;text-align:left;width:100%;transition:.12s}
.nav-item .ic{width:18px;text-align:center;font-size:15px}
.nav-item:hover{background:var(--hover);color:var(--txt)}
.nav-item.active{background:linear-gradient(90deg,rgba(91,140,255,.18),rgba(91,140,255,.04));
  color:var(--active-tx);border-color:rgba(91,140,255,.45)}
.nav-sep{height:1px;background:var(--line);margin:10px 4px}
.side-foot{margin-top:auto;display:flex;flex-direction:column;gap:9px;padding-top:10px}
.stat{display:flex;align-items:center;justify-content:space-between;font-size:12px;color:var(--muted)}
.dot{width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:6px}
.dot.on{background:var(--accent2);box-shadow:0 0 8px var(--accent2)}
.dot.off{background:var(--off)}
.doc-link{display:flex;align-items:center;gap:8px;justify-content:center;padding:10px;border-radius:11px;
  border:1px solid var(--line2);background:var(--chip-bg);color:var(--txt);font-weight:700;font-size:13px}
.doc-link:hover{border-color:var(--accent);color:var(--btn-tx-hover)}
.theme-btn{display:flex;align-items:center;gap:8px;justify-content:center;padding:9px 10px;border-radius:11px;
  border:1px solid var(--line2);background:var(--chip-bg);color:var(--txt);font-weight:700;font-size:13px;cursor:pointer;width:100%}
.theme-btn:hover{border-color:var(--accent)}

.main{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{position:sticky;top:0;z-index:15;backdrop-filter:blur(10px);
  background:var(--topbar-bg);border-bottom:1px solid var(--line);
  padding:16px 30px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.topbar h1{margin:0;font-size:19px;font-weight:800;letter-spacing:-.3px}
.topbar .sub{color:var(--muted);font-size:13px;margin-top:2px;max-width:720px}
.topbar .right{display:flex;gap:10px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.content{padding:26px 30px 70px;max-width:1200px;width:100%}

/* ================= 공통 요소 ================= */
.card{background:linear-gradient(180deg,var(--panel),var(--grad-card));border:1px solid var(--line);
  border-radius:var(--radius);padding:20px 22px;box-shadow:var(--shadow)}
.card + .card{margin-top:18px}
.card h2{margin:0 0 3px;font-size:16px}
.card .desc{color:var(--muted);font-size:13px;margin:0 0 14px}
.grid{display:grid;gap:16px}
.section-title{display:flex;align-items:center;gap:10px;font-size:13px;font-weight:800;
  letter-spacing:.04em;text-transform:uppercase;color:var(--faint);margin:26px 2px 12px}
.section-title::after{content:"";flex:1;height:1px;background:var(--line)}

.chip{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:800;border-radius:20px;
  padding:4px 11px;border:1px solid var(--line2);color:var(--muted);background:var(--chip-bg);white-space:nowrap}
.chip.green{color:var(--food-tx);border-color:var(--food-bd);background:var(--food-bg)}
.chip.blue{color:var(--ncbi-tx);border-color:var(--ncbi-bd);background:var(--ncbi-bg)}
.chip.gray{color:var(--muted)}

.btn{display:inline-flex;align-items:center;gap:8px;border-radius:11px;border:1px solid var(--line2);
  background:var(--panel2);color:var(--txt);font-weight:700;font-size:13.5px;padding:10px 16px;cursor:pointer;
  transition:.12s}
.btn:hover{border-color:var(--accent);color:var(--btn-tx-hover)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn-primary{background:linear-gradient(135deg,var(--accent-d),var(--accent));border:none;color:#fff;
  box-shadow:0 6px 18px rgba(91,140,255,.32)}
.btn-primary:hover{filter:brightness(1.08)}
.btn-ghost{background:transparent}
.btn-sm{padding:7px 12px;font-size:12.5px}

/* KPI 타일 */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px}
.kpi{background:linear-gradient(180deg,var(--panel),var(--grad-card));border:1px solid var(--line);
  border-radius:14px;padding:16px 18px;position:relative;overflow:hidden}
.kpi::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--accent)}
.kpi.g::before{background:var(--accent2)} .kpi.o::before{background:var(--new)}
.kpi.p::before{background:var(--chebi)}
.kpi .v{font-size:27px;font-weight:850;letter-spacing:-.5px}
.kpi .l{color:var(--muted);font-size:12.5px;font-weight:600;margin-top:2px}
.kpi .s{color:var(--faint);font-size:11px;margin-top:3px}

/* 파이프라인 미니 플로우 */
.flow{display:flex;align-items:stretch;gap:8px;flex-wrap:wrap}
.flow .step{flex:1;min-width:96px;background:var(--chip-bg);border:1px solid var(--line);border-radius:12px;
  padding:11px 12px;position:relative}
.flow .step .n{font-size:11px;font-weight:800;color:var(--accent)}
.flow .step.new{border-color:var(--new)}
.flow .step.new .n{color:var(--new)}
.flow .step .t{font-size:12.5px;font-weight:700;margin-top:3px}
.flow .step .d{font-size:11px;color:var(--muted);margin-top:2px}

/* 드롭존 */
.dropzone{border:1.5px dashed var(--line2);border-radius:14px;padding:30px;text-align:center;
  background:var(--input-bg);cursor:pointer;transition:.15s}
.dropzone:hover,.dropzone.drag{border-color:var(--accent);background:var(--dz-hover)}
.dropzone .big{font-size:15px;font-weight:700}
.dropzone .small{color:var(--muted);font-size:12.5px;margin-top:5px}
.filelist{display:flex;flex-direction:column;gap:8px;margin-top:14px}
.fileitem{display:flex;align-items:center;gap:10px;background:var(--chip-bg);border:1px solid var(--line);
  border-radius:10px;padding:9px 12px;font-size:13px}
.fileitem .rm{margin-left:auto;color:var(--faint);cursor:pointer;font-weight:800}
.fileitem .rm:hover{color:#ff7676}

/* 옵션 토글 */
.switch{display:inline-flex;align-items:center;gap:9px;font-size:13px;color:var(--muted);cursor:pointer;user-select:none}
.switch input{display:none}
.switch .track{width:38px;height:22px;border-radius:20px;background:var(--track);position:relative;transition:.15s}
.switch .track::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;
  background:var(--knob);transition:.15s}
.switch input:checked + .track{background:var(--accent)}
.switch input:checked + .track::after{left:19px;background:var(--knob-on)}

/* 진행바 */
.progress{height:9px;border-radius:8px;background:var(--progress-bg);overflow:hidden;margin:10px 0}
.progress-fill{height:100%;width:0;background:linear-gradient(90deg,var(--accent),var(--accent2));
  border-radius:8px;transition:width .3s}

/* 탭 */
.tabs{display:flex;gap:6px;border-bottom:1px solid var(--line);margin:4px 0 18px;flex-wrap:wrap}
.tab{padding:9px 15px;border-radius:11px 11px 0 0;border:1px solid transparent;border-bottom:none;
  color:var(--muted);font-weight:700;font-size:13px;cursor:pointer;background:none}
.tab:hover{color:var(--txt)}
.tab.active{background:var(--panel2);color:var(--active-tx);border-color:var(--line2)}

/* 표 */
.tbl{width:100%;border-collapse:collapse;font-size:13px;overflow:hidden;border-radius:12px}
.tbl th,.tbl td{padding:10px 13px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
.tbl th{background:var(--th-bg);color:var(--th-tx);font-weight:700;font-size:12px;text-transform:uppercase;letter-spacing:.03em;
  position:sticky;top:0}
.tbl tr:hover td{background:var(--hover)}
.tbl .num{text-align:right;font-variant-numeric:tabular-nums}
.tbl-wrap{max-height:520px;overflow:auto;border:1px solid var(--line);border-radius:12px}

/* 막대 차트 */
.bars{display:flex;flex-direction:column;gap:9px}
.bar-row{display:grid;grid-template-columns:180px 1fr 46px;align-items:center;gap:12px;font-size:12.5px}
.bar-row .lb{color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar-track{background:var(--sub-bg);border-radius:7px;height:16px;overflow:hidden}
.bar-fill{height:100%;background:linear-gradient(90deg,var(--accent-d),var(--accent));border-radius:7px}
.bar-row .vv{text-align:right;font-weight:700;font-variant-numeric:tabular-nums}

/* 배지 */
.badge{display:inline-block;font-size:11px;font-weight:800;border-radius:8px;padding:2px 8px;white-space:nowrap}
.badge.ncbi{color:var(--ncbi-tx);background:var(--ncbi-bg);border:1px solid var(--ncbi-bd)}
.badge.chebi{color:var(--chebi-tx);background:var(--chebi-bg);border:1px solid var(--chebi-bd)}
.badge.food{color:var(--food-tx);background:var(--food-bg);border:1px solid var(--food-bd)}
.badge.none{color:var(--faint);background:var(--none-bg);border:1px solid var(--line)}
.badge.keep{color:var(--keep-tx);background:var(--keep-bg)}
.badge.refine{color:var(--refine-tx);background:var(--refine-bg)}
.badge.newc{color:var(--newc-tx);background:var(--newc-bg)}

/* 아코디언 */
.acc{border:1px solid var(--line);border-radius:12px;overflow:hidden;margin-bottom:10px;background:var(--panel)}
.acc-head{display:flex;align-items:center;gap:12px;padding:13px 16px;cursor:pointer}
.acc-head:hover{background:var(--hover)}
.acc-head .code{font-family:ui-monospace,monospace;font-size:12px;color:var(--accent);font-weight:700}
.acc-head .nm{font-weight:700}
.acc-head .meta{margin-left:auto;color:var(--muted);font-size:12px}
.acc-head .arw{color:var(--faint);transition:.15s}
.acc.open .acc-head .arw{transform:rotate(90deg)}
.acc-body{padding:0 16px;max-height:0;overflow:hidden;transition:max-height .2s}
.acc.open .acc-body{max-height:1400px;padding:6px 16px 16px}
.concept-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.ctag{font-size:12px;background:var(--sub-bg);border:1px solid var(--line);border-radius:7px;padding:3px 9px;color:var(--leaf-tx)}
.ctag.gr{border-color:var(--ncbi-bd)}

/* 검색 */
.search{width:100%;background:var(--input-bg);border:1px solid var(--line2);border-radius:12px;padding:12px 15px;
  color:var(--txt);font-size:14px;outline:none}
.search:focus{border-color:var(--accent)}

/* 온톨로지 그래프 범례 + 계층 트리 */
.legend-dot{width:11px;height:11px;border-radius:50%;background:var(--c,#8595b8);display:inline-block;margin:0 4px 0 8px;vertical-align:-1px}
.tree-node{margin:1px 0}
.tree-row{display:flex;align-items:center;gap:7px;padding:6px 10px;border-radius:9px;cursor:pointer;font-size:13.5px}
.tree-row:hover{background:var(--hover)}
.tree-row.leaf{cursor:default}
.tree-row.leaf:hover{background:transparent}
.tree-row.lv1{margin-left:20px;font-size:13px}
.tree-row.lv2{margin-left:44px;color:var(--leaf-tx)}
.tree-row .tw{width:14px;color:var(--faint);font-size:11px;flex:0 0 auto}
.tree-row .li{color:var(--accent2);flex:0 0 auto}
.tree-row .code{font-family:ui-monospace,monospace;font-size:12px;color:var(--accent);font-weight:700}
.tree-children{margin-left:2px;border-left:1px solid var(--line);padding-left:4px}
a.badge{cursor:pointer;text-decoration:none}
a.badge:hover{filter:brightness(1.15)}

.muted{color:var(--muted)}
.small{font-size:12px}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px}
.notice{background:var(--notice-bg);border:1px solid var(--line);border-left:3px solid var(--accent);
  border-radius:11px;padding:13px 16px;color:var(--leaf-tx);font-size:13px}
.notice.warn{border-left-color:var(--warn)}
.notice.ok{border-left-color:var(--ok,#25c98d)}
input[type=number]{background:var(--input-bg,#0e1526);color:inherit;border:1px solid var(--line);
  border-radius:8px;padding:5px 8px;font-size:13px}
.spinner{width:16px;height:16px;border:2px solid rgba(127,140,170,.35);border-top-color:var(--accent);
  border-radius:50%;display:inline-block;animation:spin .8s linear infinite;vertical-align:-3px}
.spinner.on-primary{border-color:rgba(255,255,255,.3);border-top-color:#fff}
@keyframes spin{to{transform:rotate(360deg)}}
.empty{color:var(--faint);text-align:center;padding:26px;font-size:13px}
.hidden{display:none!important}
.nav-label{color:var(--faint);font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  padding:14px 12px 6px;margin-top:4px}
.desc{color:var(--muted);font-size:13px;margin:0 0 14px;line-height:1.55}
.pill{display:inline-flex;align-items:center;gap:4px;background:var(--notice-bg);border:1px solid var(--line);
  border-radius:999px;padding:2px 10px;font-size:11.5px;color:var(--muted);white-space:nowrap}
.pill.ok{border-color:var(--ok,#25c98d);color:var(--ok,#25c98d)}
.mini-card{background:var(--notice-bg);border:1px solid var(--line);border-radius:11px;padding:11px 13px}

@media (max-width:820px){
  .sidebar{position:fixed;left:0;transform:translateX(-100%);transition:.2s}
  .sidebar.show{transform:none}
  .content,.topbar{padding-left:18px;padding-right:18px}
  .bar-row{grid-template-columns:120px 1fr 40px}
}