:root{--navy:#12243d;--blue:#2563eb;--line:#dfe6ef;--bg:#f3f6fa;--text:#172033;--muted:#667085;--ok:#16835b;--warn:#d97706;--bad:#c93636}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-family:"Malgun Gothic","Apple SD Gothic Neo",Arial,sans-serif}header{background:linear-gradient(120deg,#10233f,#1c3e68);color:#fff;padding:28px max(24px,calc((100% - 1080px)/2));display:flex;gap:16px;align-items:center}.brand-mark{width:50px;height:50px;border:1px solid #ffffff55;border-radius:13px;display:grid;place-items:center;font-weight:800;background:#ffffff12}h1{font-size:25px;margin:0 0 5px}header p{margin:0;color:#d2dceb;font-size:14px}main{max-width:1080px;margin:26px auto;padding:0 18px 40px}.card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:28px;box-shadow:0 8px 22px #1b34570b;margin-bottom:22px}.section-title{display:flex;gap:13px;align-items:flex-start;margin-bottom:24px}.section-title>span{background:#eaf1ff;color:var(--blue);font-size:12px;font-weight:800;padding:7px;border-radius:7px}.section-title h2{font-size:20px;margin:1px 0 5px}.section-title p{margin:0;color:var(--muted);font-size:13px}.grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}label{display:flex;flex-direction:column;gap:7px;font-size:13px;font-weight:700}input,select{width:100%;border:1px solid #cad4e1;border-radius:9px;padding:12px;background:#fff;font:inherit;color:var(--text)}input:focus,select:focus{outline:2px solid #bdd0ff;border-color:var(--blue)}.upload{margin-top:18px;border:2px dashed #bdc9d9;border-radius:12px;min-height:150px;align-items:center;justify-content:center;cursor:pointer;background:#fafcff;transition:.2s}.upload:hover,.upload.drag{border-color:var(--blue);background:#f1f6ff}.upload input{display:none}.upload strong{font-size:16px}.upload span,.upload small{font-weight:400;color:var(--muted)}.preview{margin-top:18px;background:#101828;border-radius:12px;overflow:hidden;text-align:center}.preview canvas{max-width:100%;max-height:440px;vertical-align:middle}.preview div{background:#fff;color:var(--muted);padding:8px;font-size:12px}.primary{width:100%;border:0;border-radius:10px;margin-top:18px;padding:14px;background:var(--blue);color:white;font-weight:800;font-size:15px;cursor:pointer}.primary:disabled{background:#aeb9c9;cursor:not-allowed}.progress{margin-top:15px;position:relative;background:#e7edf5;border-radius:9px;overflow:hidden;text-align:center;height:34px}.progress div{position:absolute;height:100%;width:35%;background:#ccdcff;animation:move 1.1s infinite}.progress span{position:relative;line-height:34px;font-size:12px}@keyframes move{from{transform:translateX(-100%)}to{transform:translateX(300%)}}.result-top{display:grid;grid-template-columns:auto auto 1fr;gap:22px;align-items:center;border-bottom:1px solid var(--line);padding-bottom:22px}.badge{padding:11px 16px;border-radius:9px;font-weight:800}.badge.ok{background:#e4f6ef;color:var(--ok)}.badge.warn{background:#fff3dc;color:var(--warn)}.badge.bad{background:#fee9e7;color:var(--bad)}.score{font-size:30px;font-weight:900}.muted{color:var(--muted);font-size:12px}.gauge{height:13px;background:#e8edf3;border-radius:20px;overflow:hidden}.gauge div{height:100%;border-radius:20px;transition:width .8s}.summary{margin:20px 0;padding:17px;background:#f7f9fc;border-left:4px solid var(--blue);line-height:1.7;font-size:14px}.card h3{font-size:15px;margin:22px 0 12px}.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.metric{border:1px solid var(--line);border-radius:10px;padding:13px}.metric span{display:block;color:var(--muted);font-size:11px;margin-bottom:6px}.metric strong{font-size:18px}.findings{display:grid;gap:8px}.finding{display:flex;justify-content:space-between;gap:15px;padding:12px 14px;background:#f7f9fc;border-radius:9px;font-size:13px}.finding em{font-style:normal;font-weight:800}.notice{margin-top:20px;font-size:12px;color:#6e5313;background:#fff8df;border:1px solid #f1dfa4;padding:12px;border-radius:9px}.actions{display:flex;gap:8px;margin-top:18px}.actions button{padding:10px 16px;border:1px solid #c7d0dc;border-radius:8px;background:#fff;font-weight:700;cursor:pointer}.hidden{display:none!important}footer{text-align:center;color:#98a2b3;font-size:11px;padding:20px}@media(max-width:700px){.grid,.metrics{grid-template-columns:1fr}.result-top{grid-template-columns:1fr;gap:10px}.card{padding:20px}}@media print{header,.input-card,.actions,footer{display:none}body{background:#fff}.card{box-shadow:none;border:0}}
