:root { --bg:#f5f6f8; --side:#1f2a37; --side-text:#d7dde5; --accent:#2f6fdb; --line:#dfe3e8; --text:#1b2430; --muted:#6b7684; }
* { box-sizing:border-box; }
body { margin:0; font-family:"Malgun Gothic","맑은 고딕",system-ui,sans-serif; color:var(--text); background:var(--bg); font-size:14px; }
.app { display:flex; min-height:100vh; }
.sidebar { width:220px; background:var(--side); color:var(--side-text); display:flex; flex-direction:column; padding:16px 12px; }
.brand { display:flex; flex-direction:column; gap:2px; padding:4px 8px 16px; border-bottom:1px solid rgba(255,255,255,.12); }
.brand-logo { display:block; width:170px; height:auto; }
.brand-name { font-size:12px; color:#9fb3c8; letter-spacing:.2em; }
.menu { display:flex; flex-direction:column; gap:2px; margin-top:12px; flex:1; }
.menu a { color:var(--side-text); text-decoration:none; padding:9px 10px; border-radius:6px; display:flex; justify-content:space-between; }
.menu a:hover, .menu a.active { background:rgba(255,255,255,.1); color:#fff; }
.menu a .tag { font-size:11px; color:#8fa3bf; }
.who { font-size:12px; color:#9fb3c8; padding:8px; border-top:1px solid rgba(255,255,255,.12); }
.who button { margin-left:8px; font-size:11px; }
.main { flex:1; padding:24px 28px; }
.view h1 { font-size:20px; margin:0 0 16px; }
.card { background:#fff; border:1px solid var(--line); border-radius:8px; padding:20px; max-width:520px; }
.card label { display:block; margin:10px 0 4px; color:var(--muted); font-size:12px; }
.card input { width:100%; padding:8px; border:1px solid var(--line); border-radius:6px; font-size:14px; }
button.primary { margin-top:16px; background:var(--accent); color:#fff; border:0; border-radius:6px; padding:9px 16px; font-size:14px; cursor:pointer; }
.error { color:#b42318; margin-top:10px; font-size:13px; }
.muted { color:var(--muted); }
table { border-collapse:collapse; width:100%; background:#fff; }
th, td { border-bottom:1px solid var(--line); padding:8px 10px; text-align:left; }
th { background:#f0f2f5; font-weight:600; }
.toolbar { display:flex; gap:8px; margin-bottom:12px; }
.toolbar input { padding:7px 10px; border:1px solid var(--line); border-radius:6px; min-width:260px; }
.placeholder { background:#fff; border:1px dashed var(--line); border-radius:8px; padding:28px; color:var(--muted); }
@media (max-width: 760px) { .app { flex-direction:column; } .sidebar { width:auto; } .main { padding:16px; } }