*{box-sizing:border-box}body{margin:0;font-family:Arial,Malgun Gothic,sans-serif;background:#f7f7f7;color:#1d2d3e;font-size:14px}main{max-width:1180px;margin:0 auto;padding:0 24px 32px}header{display:flex;justify-content:space-between;align-items:center;height:56px;margin:0 -24px 20px;padding:0 24px;background:#354a5f;color:#fff;border-bottom:1px solid #20384f}header strong{font-size:18px;font-weight:700}header span{color:#d3dce6}.panel,.grid article{background:white;border:1px solid #d9e0e7;border-radius:2px;padding:16px}.panel{display:grid;grid-template-columns:1fr 240px;gap:10px 12px;margin-bottom:16px}.panel textarea,.selector,.line-list,.primary,.message{grid-column:1/-1}input,textarea{font:inherit;border:1px solid #b8c4d0;border-radius:2px;background:white;padding:8px 10px;color:#1d2d3e}input:focus,textarea:focus{outline:2px solid #91c8f6;outline-offset:-1px;border-color:#0a6ed1}input[readonly]{background:#eef1f4;color:#5b6b7a}textarea{min-height:86px;resize:vertical}button{font:inherit;cursor:pointer;border-radius:2px}.primary{justify-self:start;border:1px solid #085caf;background:#0a6ed1;color:#fff;padding:8px 18px;font-weight:700}.message{margin:0;color:#0a6ed1;font-weight:700}.selector{display:grid;gap:6px}.selector label{font-size:12px;font-weight:700;color:#556b82;text-transform:uppercase}.results{display:grid;border:1px solid #d9e0e7;border-bottom:0}.person-row{display:grid;grid-template-columns:1fr auto;align-items:center;gap:8px;border-bottom:1px solid #d9e0e7;background:#fff;padding:8px 10px}.person-row:hover{background:#f5faff}.person-row div{display:flex;gap:6px}.person-row button{min-width:52px;border:1px solid #0a6ed1;background:white;color:#0a6ed1;padding:6px 10px;font-weight:700}.line-list{display:grid;border:1px solid #d9e0e7;border-bottom:0;min-height:37px}.line-list div{display:grid;grid-template-columns:42px 70px minmax(120px,auto) 1fr 32px;align-items:center;column-gap:10px;border-bottom:1px solid #d9e0e7;background:#fff;padding:8px 10px;cursor:grab}.line-list div:hover{background:#f5faff}.line-list div:active{cursor:grabbing}.line-list span{font-weight:700;color:#354a5f}.line-list em,.approval-chip b{display:inline-flex;align-items:center;justify-content:center;border:1px solid #b8c4d0;border-radius:2px;background:#eef1f4;color:#354a5f;font-style:normal;font-size:12px;font-weight:700;padding:3px 8px}.line-list em.approver-badge{border-color:#0a6ed1;background:#eaf4ff;color:#0a6ed1}.line-list em.notifier-badge{border-color:#6a7d90;background:#f3f5f7;color:#445b70}.line-list button{border:0;background:transparent;color:#0a6ed1;font-weight:700}.line-list small{color:#5b6b7a}.grid{display:grid;grid-template-columns:420px 1fr;gap:16px}h2{font-size:16px;margin:0 0 12px;color:#1d2d3e}.approval-row{width:100%;display:grid;gap:3px;border:0;border-bottom:1px solid #d9e0e7;border-radius:0;background:white;text-align:left;color:#1d2d3e;padding:10px 8px}.approval-row:hover,.approval-row.selected{background:#eaf4ff}.approval-row span{color:#5b6b7a;font-size:12px}.approval-detail dl{display:grid;grid-template-columns:92px 1fr;gap:10px 12px;margin:0}.approval-detail dt{font-weight:700;color:#556b82}.approval-detail dd{margin:0;white-space:pre-wrap}.approval-detail-line{display:grid;border:1px solid #d9e0e7;border-bottom:0}.approval-chip{display:grid;grid-template-columns:58px 1fr;align-items:center;gap:10px;border-bottom:1px solid #d9e0e7;background:white;padding:8px 10px}.approval-chip>span{display:inline-flex;align-items:center;justify-content:center;min-width:44px;height:24px;border-radius:2px;border:1px solid #b8c4d0;background:#f3f5f7;color:#354a5f;font-size:12px;font-weight:800}.approval-chip.done>span{border-color:#107e3e;background:#f1fdf6;color:#107e3e}.approval-chip.pending>span{border-color:#b8c4d0;background:#f3f5f7;color:#5b6b7a}.approval-chip strong{display:block;margin-top:3px;color:#1d2d3e}.approval-chip small{display:block;margin-top:1px;color:#5b6b7a}.detail-title{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}.detail-title h2{margin:0}.cancel-button{border:1px solid #bb0000;background:white;color:#b00;padding:7px 12px;font-weight:700}.cancel-button:hover{background:#fff1f1}@media (max-width:860px){main{padding:0 14px 24px}header{margin:0 -14px 16px;padding:0 14px}.panel,.grid{grid-template-columns:1fr}.line-list div{grid-template-columns:32px 64px 1fr 32px}.line-list small{grid-column:3/5}}.approval-chip.pending>span{width:42px;height:42px;min-width:42px;border-radius:50%;font-size:11px}.approval-row small{display:block;color:#6b7a89;font-size:12px;margin-top:2px}.file-uploader,.attachment-list{grid-column:1/-1}.file-uploader{display:grid;grid-template-columns:120px 1fr auto;align-items:center;gap:10px;border:1px solid #d9e0e7;background:#f9fbfd;padding:10px}.file-uploader span{font-size:12px;font-weight:800;color:#556b82;text-transform:uppercase}.file-uploader small{color:#5b6b7a}.attachment-list{display:grid;border:1px solid #d9e0e7;border-bottom:0}.attachment-list div{display:flex;align-items:center;justify-content:space-between;gap:10px;border-bottom:1px solid #d9e0e7;background:white;padding:8px 10px}.attachment-list b{font-weight:700}.attachment-list span{color:#5b6b7a;font-size:12px}.attachment-list.compact{border-bottom:0}@media (max-width:860px){.file-uploader{grid-template-columns:1fr}}.attachment-list a{border:1px solid #0a6ed1;color:#0a6ed1;background:white;text-decoration:none;font-size:12px;font-weight:800;padding:4px 8px}.person-link{border:0;background:transparent;color:#0a6ed1;padding:0;font:inherit;font-weight:800;text-decoration:underline;text-underline-offset:2px}.person-modal{position:fixed;inset:0;display:grid;place-items:center;background:rgba(16,30,44,.35);z-index:20}.person-modal section{width:min(360px,calc(100vw - 32px));border:1px solid #b8c4d0;background:white;box-shadow:0 18px 40px #101e2c38}.modal-title{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #d9e0e7;background:#eef1f4;padding:12px 14px}.modal-title b{font-size:18px}.modal-title button{border:0;background:transparent;color:#0a6ed1;font-size:18px;font-weight:900;padding:0 4px}.person-modal dl{display:grid;grid-template-columns:80px 1fr;gap:10px 12px;margin:0;padding:14px}.person-modal dt{font-weight:800;color:#556b82}.person-modal dd{margin:0;color:#1d2d3e}