:root{--navy:#13233a;--ink:#172235;--muted:#6d7888;--line:#e5e9ef;--bg:#f4f6f9;--blue:#306be8;--cyan:#18a8ae;--red:#d94b54;--green:#16966c;--amber:#c57b13}
*{box-sizing:border-box}body{margin:0;font:14px/1.5 Inter,Pretendard,"Noto Sans KR",sans-serif;color:var(--ink);background:var(--bg)}button,input,select,textarea{font:inherit}.hidden{display:none!important}
.shell{min-height:100vh;display:grid;grid-template-columns:246px 1fr}aside{background:var(--navy);color:#cbd4e2;display:flex;flex-direction:column;position:fixed;width:246px;height:100vh;z-index:4}.brand{height:82px;display:flex;align-items:center;gap:12px;padding:0 25px;color:#fff;font-weight:800;letter-spacing:.5px}.brand>span,.brand-mark{display:grid;place-items:center;width:37px;height:37px;background:linear-gradient(145deg,#29b6ae,#3677e9);border-radius:10px;color:#fff;font-size:20px}.brand small{display:block;font-size:9px;letter-spacing:1.7px;color:#8291a8}
nav{padding:7px 12px;overflow:auto;flex:1}nav p{font-size:10px;font-weight:700;letter-spacing:1.2px;color:#64758e;padding:18px 14px 5px;margin:0}nav button{border:0;background:none;color:#b9c5d6;width:100%;height:43px;border-radius:8px;text-align:left;padding:0 14px;display:flex;align-items:center;gap:13px;cursor:pointer}nav button:hover,nav button.active{background:#213653;color:#fff}nav button.active{box-shadow:inset 3px 0 #35bfb6}.side-foot{border-top:1px solid #2b3d55;padding:17px;display:flex;align-items:center;gap:10px}.side-foot small{display:block;color:#718198;font-size:11px}.side-foot>button{margin-left:auto;background:none;border:0;color:#8e9cb0;cursor:pointer}.avatar{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:#2e496d;color:white}
main{grid-column:2;min-width:0}header{height:82px;background:white;border-bottom:1px solid var(--line);display:flex;align-items:center;padding:0 32px;gap:16px;position:sticky;top:0;z-index:3}header h1{font-size:20px;margin:0}header p{margin:2px 0 0;color:var(--muted);font-size:12px}.status{margin-left:auto;color:var(--green);font-size:12px;display:flex;align-items:center;gap:7px}.status i{width:7px;height:7px;border-radius:50%;background:var(--green)}.status span{color:#9aa3af;margin-left:8px}#menu{display:none;border:0;background:none;font-size:22px}
#content{padding:26px 30px;max-width:1600px;margin:auto}.hero{background:linear-gradient(120deg,#142944,#203b5e);color:white;border-radius:13px;padding:24px 28px;margin-bottom:20px;position:relative;overflow:hidden}.hero:after{content:"";position:absolute;width:260px;height:260px;border:50px solid #ffffff08;border-radius:50%;right:-50px;top:-110px}.hero h2{margin:0 0 4px;font-size:21px}.hero p{margin:0;color:#b9c7d9}.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.card,.panel{background:white;border:1px solid var(--line);border-radius:11px;box-shadow:0 2px 8px #17223508}.metric{padding:19px}.metric .label{color:var(--muted);font-size:12px}.metric strong{display:block;font-size:26px;margin-top:8px}.metric small{color:#98a1ad}.metric .icon{float:right;width:36px;height:36px;border-radius:9px;background:#edf3ff;color:var(--blue);display:grid;place-items:center;font-size:18px}
.panel{margin-top:16px;padding:20px}.panel-head{display:flex;align-items:center;margin-bottom:16px;gap:12px}.panel-head h2{font-size:16px;margin:0}.panel-head p{margin:0;color:var(--muted);font-size:12px}.panel-head .actions{margin-left:auto}.badge{display:inline-flex;padding:3px 8px;border-radius:12px;font-size:11px;font-weight:700;background:#eef1f5;color:#667181}.badge.success,.badge.Y,.badge.SUCCESS{background:#e8f7f1;color:var(--green)}.badge.fail,.badge.FAILED,.badge.N{background:#fdecee;color:var(--red)}.badge.RUNNING{background:#e9f1ff;color:var(--blue)}.badge.ADMIN{background:#e9f1ff;color:var(--blue)}.badge.CRAWL_TAG{background:#e8f7f1;color:var(--green)}
table{width:100%;border-collapse:collapse}th{text-align:left;color:#7a8492;font-size:11px;font-weight:700;background:#f8f9fb}th,td{padding:11px 12px;border-bottom:1px solid #edf0f3;vertical-align:top}tr:last-child td{border:0}.table-wrap{overflow:auto}.link{color:var(--blue);cursor:pointer}.muted{color:var(--muted)}.truncate{max-width:320px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
button.primary,.btn{border:0;border-radius:7px;padding:9px 14px;cursor:pointer;background:#edf1f6;color:#344157;font-weight:650}.primary,.btn.primary{background:var(--blue)!important;color:white}.btn.danger{background:#fdecee;color:var(--red)}.btn.small{padding:5px 9px;font-size:12px}.toolbar{display:flex;gap:8px;flex-wrap:wrap}.toolbar input,.toolbar select,input,select,textarea{border:1px solid #d9dee6;border-radius:7px;padding:9px 11px;background:white;outline:none}.toolbar input{min-width:240px}input:focus,textarea:focus,select:focus{border-color:#7399ee;box-shadow:0 0 0 3px #306be815}
.stages{display:grid;gap:10px}.stage{border:1px solid var(--line);padding:15px;border-radius:9px;display:flex;align-items:center;gap:13px}.stage .num{width:28px;height:28px;border-radius:7px;background:#edf3ff;color:var(--blue);display:grid;place-items:center;font-weight:bold}.stage strong{display:block}.stage small{color:var(--muted)}.stage .badge{margin-left:auto}.test-input{display:flex;gap:8px}.test-input input{flex:1}.trace{border-left:2px solid #dce3ed;margin:18px 0 0 12px}.trace-step{position:relative;padding:0 0 18px 24px}.trace-step:before{content:"";position:absolute;left:-6px;top:4px;width:10px;height:10px;background:white;border:2px solid var(--blue);border-radius:50%}.trace-step h3{margin:0;font-size:14px}.trace-step p{margin:4px 0;color:var(--muted)}
.quality-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.quality{padding:18px;display:flex;align-items:center}.quality strong{font-size:24px;margin-left:auto}.quality i{width:9px;height:9px;border-radius:50%;background:var(--green);margin-right:10px}.quality.warn i{background:var(--amber)}
.login-shell{min-height:100vh;display:grid;place-items:center;background:radial-gradient(circle at 70% 20%,#23466a,#102036 55%)}.login-card{width:min(400px,calc(100% - 32px));background:white;border-radius:15px;padding:38px;box-shadow:0 28px 80px #0005}.login-card .brand-mark{margin-bottom:25px}.login-card h1{margin:0;font-size:25px}.login-card p{color:var(--muted);margin:5px 0 25px}.login-card label{display:block;margin-top:13px;font-size:12px;font-weight:700}.login-card input{display:block;width:100%;margin-top:6px}.login-card button{width:100%;margin-top:22px;padding:11px;border-radius:8px;border:0}.error{color:var(--red);font-size:12px;margin-top:10px}
dialog{border:0;border-radius:12px;box-shadow:0 20px 70px #17223540;max-width:680px;width:calc(100% - 32px);padding:25px}dialog::backdrop{background:#0d192b99}.modal-close{float:right;border:0;background:none;font-size:24px;cursor:pointer}form .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px}form label{font-size:12px;font-weight:650}form label input,form label select,form label textarea{display:block;width:100%;margin-top:5px}form .full{grid-column:1/-1}#toast{position:fixed;right:22px;bottom:22px;background:#172235;color:white;padding:11px 16px;border-radius:8px;transform:translateY(80px);opacity:0;transition:.2s;z-index:20}#toast.show{transform:none;opacity:1}.loading{text-align:center;color:var(--muted);padding:70px}
@media(max-width:1000px){.grid{grid-template-columns:repeat(2,1fr)}.quality-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:720px){.shell{display:block}aside{transform:translateX(-100%);transition:.2s}.shell.menu-open aside{transform:none}.shell.menu-open:after{content:"";position:fixed;inset:0;background:#0005;z-index:3}main{width:100%}header{padding:0 16px}#menu{display:block}.status span{display:none}#content{padding:18px 13px}.grid,.quality-grid{grid-template-columns:1fr}.hero{padding:20px}.toolbar input{min-width:0;flex:1}.form-grid{grid-template-columns:1fr!important}.form-grid .full{grid-column:1}.truncate{max-width:190px}}