:root { --ink:#14213a; --muted:#66758a; --line:#dfe7f1; --paper:#fff; --canvas:#f4f7fb; --blue:#1769e0; --blue-deep:#0e3e89; --soft:#edf5ff; --danger:#ba3434; }
* { box-sizing:border-box; }
body { margin:0; min-width:320px; color:var(--ink); background:var(--canvas); font-family:"Noto Sans KR","Microsoft YaHei",Arial,sans-serif; }
button,input,select { font:inherit; }
button { cursor:pointer; }
.portal-shell { min-height:100vh; display:grid; grid-template-columns:244px minmax(0,1fr); }
.portal-aside { padding:26px 16px; color:#eaf1ff; background:linear-gradient(180deg,#10284d,#142044); display:flex; flex-direction:column; gap:28px; }
.brand { display:flex; align-items:center; gap:10px; min-width:0; }
.brand img { width:40px; height:40px; object-fit:contain; background:#fff; border-radius:10px; padding:5px; }
.brand strong { display:block; font-size:15px; letter-spacing:.02em; }
.brand small { display:block; color:#9bb0d4; margin-top:3px; font-size:11px; }
.nav-label { color:#7f98c3; padding:0 10px; font-size:11px; letter-spacing:.08em; }
.portal-nav { display:grid; gap:6px; }
.portal-nav a { color:#cbd8ee; text-decoration:none; padding:11px 12px; border-radius:9px; font-size:14px; }
.portal-nav a.active,.portal-nav a:hover { background:#244c83; color:#fff; }
.aside-note { margin-top:auto; padding:13px; border:1px solid rgba(175,205,255,.18); border-radius:10px; color:#aabdde; font-size:12px; line-height:1.6; }
.portal-main { min-width:0; }
.portal-top { height:72px; padding:0 34px; display:flex; align-items:center; justify-content:space-between; gap:16px; background:rgba(255,255,255,.92); border-bottom:1px solid var(--line); }
.crumb { color:var(--muted); font-size:13px; }.crumb b { color:var(--ink); }
.identity { display:flex; align-items:center; gap:10px; }.avatar { width:34px; height:34px; display:grid; place-items:center; border-radius:50%; background:var(--soft); color:var(--blue); font-weight:800; }.identity-name { font-size:13px; font-weight:700; }.identity-role { color:var(--muted); font-size:11px; margin-top:2px; }
.link-button { padding:8px 11px; border:1px solid var(--line); border-radius:8px; color:#40516a; background:#fff; font-size:12px; }
.page { max-width:1280px; padding:32px 34px 56px; margin:0 auto; }
.page-head { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; margin-bottom:24px; }.page-head h1 { margin:0; font-size:26px; letter-spacing:-.03em; }.page-head p { margin:8px 0 0; color:var(--muted); font-size:13px; }
.eyebrow { color:var(--blue); font-size:12px; font-weight:700; letter-spacing:.08em; }
.metric-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }.metric { padding:18px; border:1px solid var(--line); border-radius:12px; background:var(--paper); }.metric span { color:var(--muted); font-size:12px; }.metric b { display:block; margin-top:8px; font-size:25px; }.metric small { color:var(--muted); font-size:11px; }
.panel { margin-top:18px; padding:20px; border:1px solid var(--line); border-radius:12px; background:var(--paper); }.panel-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px; }.panel h2 { margin:0; font-size:16px; }.panel p { color:var(--muted); font-size:12px; line-height:1.6; }
.card-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }.work-card { min-height:146px; padding:17px; border:1px solid var(--line); border-radius:11px; background:linear-gradient(145deg,#fff,#f9fbff); }.work-card h3 { margin:0; font-size:15px; }.work-card .ko { margin-top:4px; color:var(--blue); font-size:12px; }.work-card p { margin:14px 0 0; }.tag { display:inline-block; padding:4px 7px; border-radius:99px; color:#265b9d; background:#edf5ff; font-size:11px; }
.split { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(310px,.75fr); gap:18px; }.status-list,.audit-list { display:grid; gap:10px; }.status-row,.audit-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:11px 0; border-bottom:1px solid #edf1f6; }.status-row:last-child,.audit-row:last-child { border-bottom:0; }.status-row b,.audit-row b { font-size:13px; }.status-row span,.audit-row span { color:var(--muted); font-size:12px; }.state { white-space:nowrap; padding:4px 7px; border-radius:99px; background:#f1f4f8; color:#57677d; font-size:11px; }.state.active { background:#e8f8ed; color:#237341; }
.admin-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(330px,.75fr); gap:18px; }.table-wrap { overflow:auto; }.data-table { width:100%; border-collapse:collapse; font-size:13px; }.data-table th { color:var(--muted); text-align:left; font-size:11px; font-weight:700; }.data-table th,.data-table td { padding:11px 8px; border-bottom:1px solid #edf1f6; vertical-align:top; }.role-pills { display:flex; flex-wrap:wrap; gap:5px; }.role-pills span { padding:4px 6px; border:1px solid #dce8fb; border-radius:6px; color:#2c5eaa; background:#f4f8ff; font-size:10px; }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }.field { display:grid; gap:6px; }.field.full { grid-column:1/-1; }.field label { color:#526176; font-size:12px; font-weight:700; }.field input,.field select { width:100%; padding:10px 11px; border:1px solid #ccd8e8; border-radius:8px; outline:none; background:#fff; }.field input:focus,.field select:focus { border-color:var(--blue); box-shadow:0 0 0 3px rgba(23,105,224,.12); }.role-checks { display:grid; grid-template-columns:1fr 1fr; gap:7px; max-height:210px; overflow:auto; padding:10px; border:1px solid #d9e2ef; border-radius:8px; }.role-checks label { display:flex; align-items:flex-start; gap:7px; color:#40516a; font-size:12px; }.primary { padding:10px 14px; border:0; border-radius:8px; color:#fff; background:var(--blue); font-weight:700; }.primary:hover { background:var(--blue-deep); }.notice { display:none; margin-top:12px; padding:10px; border-radius:8px; font-size:12px; }.notice.error { display:block; color:#a52e2e; background:#fff0f0; }.notice.success { display:block; color:#166438; background:#ebf8ef; }
.login-body { min-height:100vh; display:grid; place-items:center; padding:24px; background:radial-gradient(circle at 10% 10%,#dcecff,transparent 34%),linear-gradient(135deg,#eef4fb,#f7f9fc 54%,#e7f0fd); }.login-card { width:min(960px,100%); min-height:530px; display:grid; grid-template-columns:1.08fr .92fr; overflow:hidden; border:1px solid #dce6f3; border-radius:18px; background:#fff; box-shadow:0 28px 70px rgba(31,67,116,.16); }.login-intro { padding:48px; color:#fff; background:linear-gradient(145deg,#0b3468,#1769c8); }.login-intro .brand img { background:rgba(255,255,255,.97); }.login-intro h1 { margin:46px 0 12px; font-size:31px; line-height:1.25; }.login-intro p { max-width:390px; color:#cbe1ff; line-height:1.8; }.login-list { display:grid; gap:12px; margin-top:34px; }.login-list div { padding:11px 0; border-top:1px solid rgba(255,255,255,.15); color:#d9e9ff; font-size:13px; }.login-form { display:flex; flex-direction:column; justify-content:center; padding:48px; }.login-form h2 { margin:0; font-size:25px; }.login-form .sub { margin:8px 0 28px; color:var(--muted); font-size:13px; }.login-form form { display:grid; gap:15px; }.login-form .primary { margin-top:4px; }.login-foot { margin-top:22px; color:var(--muted); font-size:11px; line-height:1.7; }
@media (max-width:850px) { .portal-shell { grid-template-columns:1fr; }.portal-aside { display:none; }.portal-top,.page { padding-left:18px; padding-right:18px; }.metric-grid,.card-grid { grid-template-columns:1fr 1fr; }.split,.admin-grid,.login-card { grid-template-columns:1fr; }.login-intro { display:none; }.login-form { min-height:520px; padding:30px; }.page-head { display:block; }.role-checks { grid-template-columns:1fr; } }
@media (max-width:520px) { .metric-grid,.card-grid,.form-grid { grid-template-columns:1fr; }.field.full { grid-column:auto; }.portal-top { height:auto; min-height:64px; }.identity-role { display:none; } }