:root{
  --page:#9aa7b4; --win:#ececec; --win-border:#8c959e; --chrome:#f6f6f6; --line:#c4c9cf;
  --title1:#ececec; --title2:#dcdcdc; --title-text:#4a4a4a; --title-border:#b9b9b9; --menu-border:#ddd;
  --bg:#dde6ef; --band:#cfdcea; --band2:#c3d3e4; --band-border:#aebfd1; --band-text:#1b2a3a;
  --panel:#e9eff5; --surface:#fff; --grid-head:#e4e9ee; --row-alt:#f4f7fa;
  --input-border:#a9b1b9; --icon:#4c5a68; --sep:#c9c9c9; --btn2:#e6ebf0; --node-hover:#eef3f8; --caret:#555;
  --sec-border:#cdd6df; --box-h-text:#33404c; --tag-bg:#f1f6fb; --tag-border:#9fb3c8;
  --th-border:#d3d9df; --td-border:#e1e6eb; --key:#a8e0ee; --sel:#ffd978; --tree-sel:#ffcf63;
  --sel-row:#fff3cf; --hover-row:#fff8e2; --detail:#fbfcfd; --thumb1:#e7edf3; --thumb2:#dfe7ef;
  --badge-bg:#d9f2dc; --badge-text:#1f6b2a; --badge-border:#9dcfa4;
  --text:#1d2329; --muted:#5b6670; --accent:#0a6ed1; --ok:#2e9b3a;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --page:#0d1117; --win:#1d232a; --win-border:#000; --chrome:#232a32; --line:#3a4450;
  --title1:#2c333b; --title2:#232a32; --title-text:#c9d1d9; --title-border:#0f1317; --menu-border:#30383f;
  --bg:#1a2129; --band:#2a3a4d; --band2:#223142; --band-border:#3c5168; --band-text:#e6edf5;
  --panel:#1f262e; --surface:#262e37; --grid-head:#2d3640; --row-alt:#2a333d;
  --input-border:#4a5562; --icon:#aab6c2; --sep:#45505c; --btn2:#2d3640; --node-hover:#2f3944; --caret:#9aa6b2;
  --sec-border:#323c47; --box-h-text:#c9d4df; --tag-bg:#22303e; --tag-border:#3f5a75;
  --th-border:#3a4450; --td-border:#333c46; --key:#1d4f5e; --sel:#8a6514; --tree-sel:#8a6514;
  --sel-row:#3d3420; --hover-row:#333a2c; --detail:#212930; --thumb1:#28313b; --thumb2:#232b34;
  --badge-bg:#1e3a24; --badge-text:#8fd69c; --badge-border:#2f6a3a;
  --text:#e2e8ef; --muted:#97a3af; --accent:#4db1ff; --ok:#3fb950;
  color-scheme:dark;
}}
:root[data-theme="dark"]{
  --page:#0d1117; --win:#1d232a; --win-border:#000; --chrome:#232a32; --line:#3a4450;
  --title1:#2c333b; --title2:#232a32; --title-text:#c9d1d9; --title-border:#0f1317; --menu-border:#30383f;
  --bg:#1a2129; --band:#2a3a4d; --band2:#223142; --band-border:#3c5168; --band-text:#e6edf5;
  --panel:#1f262e; --surface:#262e37; --grid-head:#2d3640; --row-alt:#2a333d;
  --input-border:#4a5562; --icon:#aab6c2; --sep:#45505c; --btn2:#2d3640; --node-hover:#2f3944; --caret:#9aa6b2;
  --sec-border:#323c47; --box-h-text:#c9d4df; --tag-bg:#22303e; --tag-border:#3f5a75;
  --th-border:#3a4450; --td-border:#333c46; --key:#1d4f5e; --sel:#8a6514; --tree-sel:#8a6514;
  --sel-row:#3d3420; --hover-row:#333a2c; --detail:#212930; --thumb1:#28313b; --thumb2:#232b34;
  --badge-bg:#1e3a24; --badge-text:#8fd69c; --badge-border:#2f6a3a;
  --text:#e2e8ef; --muted:#97a3af; --accent:#4db1ff; --ok:#3fb950;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:var(--page);font:13px/1.45 -apple-system,BlinkMacSystemFont,"SF Pro Text","Apple SD Gothic Neo",sans-serif;color:var(--text);display:flex;justify-content:center;padding:24px}
.window{width:100%;max-width:1400px;height:calc(100vh - 48px);background:var(--win);border-radius:10px;box-shadow:0 20px 60px rgba(0,0,0,.35);display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--win-border)}

/* 타이틀바 */
.titlebar{height:30px;display:flex;align-items:center;justify-content:center;position:relative;background:linear-gradient(var(--title1),var(--title2));border-bottom:1px solid var(--title-border);font-weight:600;color:var(--title-text)}
.lights{position:absolute;left:12px;display:flex;gap:8px}
.lights i{width:12px;height:12px;border-radius:50%;display:block}
.lights i:nth-child(1){background:#ff5f57}.lights i:nth-child(2){background:#febc2e}.lights i:nth-child(3){background:#28c840}

/* 메뉴바 + 툴바 */
.menubar{display:flex;gap:18px;padding:4px 14px;background:var(--chrome);border-bottom:1px solid var(--menu-border)}
.menubar span{cursor:default}.menubar span:hover{color:var(--accent)}
.toolbar{display:flex;align-items:center;gap:6px;padding:6px 14px;background:var(--chrome);border-bottom:1px solid var(--line)}
.ok{width:20px;height:20px;border-radius:50%;background:var(--ok);color:#fff;display:grid;place-items:center;font-size:12px;font-weight:700}
.cmd{width:170px;height:22px;border:1px solid var(--input-border);background:var(--surface);color:var(--text);border-radius:3px;padding:0 6px;font:inherit;text-transform:uppercase}
.tb{width:24px;height:22px;border:1px solid transparent;border-radius:3px;display:grid;place-items:center;color:var(--icon);cursor:pointer;background:none;font-size:14px}
.tb:hover{border-color:var(--input-border);background:var(--surface)}
.sep{width:1px;height:18px;background:var(--sep);margin:0 4px}
.status-pill{margin-left:auto;display:flex;align-items:center;gap:6px;color:var(--muted)}
.theme-btn{font-size:15px}
.status-pill b{width:8px;height:8px;border-radius:50%;background:#28c840;display:block}

/* 앱 타이틀 밴드 */
.app{flex:1;display:flex;flex-direction:column;background:var(--bg);padding:12px;min-height:0}
.band{background:linear-gradient(var(--band),var(--band2));border:1px solid var(--band-border);padding:8px 16px;font-size:22px;font-weight:700;font-style:italic;color:var(--band-text);margin-bottom:10px}
.split{flex:1;display:flex;gap:8px;min-height:0}

/* 왼쪽 트리 */
.tree{width:270px;flex-shrink:0;background:var(--surface);border:1px solid var(--line);display:flex;flex-direction:column;min-height:0}
.tree-tools{display:flex;gap:4px;padding:6px;background:var(--panel);border-bottom:1px solid var(--line)}
.tree ul{list-style:none;margin:0;padding:0}
.tree-body{overflow:auto;padding:6px 0;flex:1}
.node{display:flex;align-items:center;gap:6px;padding:2px 8px;cursor:pointer;white-space:nowrap;font-family:"SF Mono",Menlo,monospace;font-size:12.5px}
.node:hover{background:var(--node-hover)}
.node.active{background:var(--tree-sel)}
.node .caret{width:10px;color:var(--caret);font-size:9px}
.lv1{padding-left:8px}.lv2{padding-left:26px}.lv3{padding-left:44px}
.ico{font-size:13px}

/* 오른쪽 메인 */
.main{flex:1;overflow:auto;background:var(--panel);border:1px solid var(--line);scroll-behavior:smooth}
.grid-tools{position:sticky;top:0;z-index:2;display:flex;gap:4px;align-items:center;padding:6px 10px;background:var(--panel);border-bottom:1px solid var(--line)}
.grid-tools .tb{border-color:var(--input-border);background:linear-gradient(var(--surface),var(--btn2))}
section{padding:22px 24px 30px;border-bottom:1px solid var(--sec-border)}
.sec-title{font-weight:600;margin:0 0 4px;font-size:15px}
.sec-desc{color:var(--muted);margin:0 0 14px}

/* Hero */
.hero{display:grid;grid-template-columns:1.6fr 1fr;gap:16px}
.box{background:var(--surface);border:1px solid var(--line)}
.box-h{background:var(--grid-head);border-bottom:1px solid var(--line);padding:4px 10px;font-weight:600;font-size:12px;color:var(--box-h-text)}
.box-b{padding:14px 16px}
.eyebrow{font-family:"SF Mono",Menlo,monospace;color:var(--muted);font-size:12px;letter-spacing:.08em}
.hero h1{font-size:34px;line-height:1.25;margin:10px 0 12px;letter-spacing:-.02em}
.hero h1 em{font-style:normal;background:var(--sel);padding:0 6px}
.meta{display:flex;gap:18px;color:var(--muted);font-family:"SF Mono",Menlo,monospace;font-size:12px;margin-top:14px}
.kv{display:grid;grid-template-columns:90px 1fr;row-gap:6px;font-size:12.5px}
.kv dt{color:var(--muted)}.kv dd{margin:0}
.tags{display:flex;flex-wrap:wrap;gap:4px}
.tag{border:1px solid var(--tag-border);background:var(--tag-bg);padding:1px 7px;border-radius:2px;font-size:12px;font-family:"SF Mono",Menlo,monospace}

/* ALV 그리드 */
table.alv{width:100%;border-collapse:collapse;background:var(--surface);border:1px solid var(--line);font-size:12.5px}
.alv th{background:var(--grid-head);text-align:left;font-weight:500;padding:4px 8px;border:1px solid var(--th-border);white-space:nowrap}
.alv td{padding:4px 8px;border:1px solid var(--td-border);vertical-align:top}
.alv tr:nth-child(even) td{background:var(--row-alt)}
.alv td.key{background:var(--key)!important;font-family:"SF Mono",Menlo,monospace;white-space:nowrap}
.alv tr.sel td{background:var(--sel-row)}
.alv tr.sel td.key{background:var(--sel)!important}
.alv tbody tr{cursor:pointer}
.alv tbody tr:hover td{background:var(--hover-row)}
.alv .rs{width:18px;background:var(--grid-head)!important;padding:0}

/* 경력 상세 (펼침) */
.detail td{background:var(--detail)!important;padding:12px 16px}
.detail ul{margin:0 0 10px;padding-left:18px}
.detail li{margin:3px 0}
.hidden{display:none}

/* 프로젝트 */
.projects{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
.thumb{aspect-ratio:16/9;background:repeating-linear-gradient(45deg,var(--thumb1) 0 10px,var(--thumb2) 10px 20px);display:grid;place-items:center;color:var(--muted);font-family:"SF Mono",Menlo,monospace;border-bottom:1px solid var(--line)}
.proj h3{margin:0 0 4px;font-size:15px;display:flex;align-items:center;gap:8px}
.badge{font-size:11px;font-weight:500;background:var(--badge-bg);color:var(--badge-text);border:1px solid var(--badge-border);padding:0 6px}
.proj p{margin:0 0 8px;color:var(--muted)}

/* 상태바 */
.statusbar{display:flex;justify-content:space-between;padding:4px 14px;background:var(--chrome);border-top:1px solid var(--line);color:var(--muted);font-size:12px}
.statusbar .msg::before{content:"✔ ";color:var(--ok)}

@media (max-width:860px){
  body{padding:0}.window{height:100vh;border-radius:0}
  .tree{display:none}.hero{grid-template-columns:1fr}
  .menubar{overflow-x:auto}.cmd{width:110px}
  section{padding:18px 16px}
}

/* 프로젝트 카드 링크 + 상세 페이지 */
a.proj{display:block;color:inherit;text-decoration:none;transition:border-color .15s}
a.proj:hover{border-color:var(--accent)}
.proj-org{font-size:12px;color:var(--muted);margin-bottom:4px}
a.node,a.tb{color:inherit;text-decoration:none}
.detail-title{font-size:26px;margin:8px 0 6px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.bullets{margin:0;padding-left:18px}
.bullets li{margin:4px 0}

.prose p{margin:0 0 10px;line-height:1.7}
.prose p:last-child{margin:0}

.demo{display:block;width:100%;min-height:480px;border:0;background:var(--panel)}
.prose p:has(+ ul){margin-bottom:4px}
.prose ul{margin:0;padding-left:20px;line-height:1.7}
.thumb{overflow:hidden}
.thumb img{width:100%;height:100%;object-fit:cover;object-position:top left;display:block}

/* 회고 단락: 번호 + 소제목 */
.note{padding:12px 0;border-top:1px solid var(--td-border)}
.note:first-child{padding-top:0;border-top:0}
.note:last-child{padding-bottom:0}
.note h3{display:flex;align-items:center;gap:8px;margin:0 0 6px;font-size:13.5px}
.note .no{background:var(--key);border:1px solid var(--line);padding:0 6px;font:600 12px "SF Mono",Menlo,monospace}
.note p{margin:0}