*{box-sizing:border-box}
body{margin:0;font:14px/1.5 -apple-system,"Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;background:#f4f5f7;color:#1f2328}
button{font:inherit;padding:7px 14px;border:1px solid #c9ced6;border-radius:6px;background:#fff;cursor:pointer;color:#1f2328}
button:hover{background:#f0f2f5}
button.primary{background:#2f6fed;border-color:#2f6fed;color:#fff}
button.primary:hover{background:#255ed1}
button.big{padding:10px 28px;font-size:15px;font-weight:600}
button.sm{padding:4px 10px;font-size:12px}
button:disabled{opacity:.5;cursor:default}
textarea,input{font:inherit;width:100%;padding:9px 11px;border:1px solid #c9ced6;border-radius:6px;background:#fff;color:inherit}
textarea{resize:vertical;line-height:1.55}
textarea:focus,input:focus{outline:2px solid #9dbcf7;border-color:#2f6fed}
label{display:block;font-weight:600;margin:12px 0 5px}
label small{font-weight:400;color:#6b7280;margin-left:6px}
.sp{flex:1}
.muted{color:#6b7280}
.small{font-size:12px;margin-top:6px}
.err{color:#d33;font-size:13px;min-height:18px}

#login{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:#f4f5f7}
#login .box{width:320px;background:#fff;padding:28px;border-radius:10px;box-shadow:0 4px 24px rgba(0,0,0,.08);text-align:center}
#login h1{font-size:18px;margin:0 0 4px}
#login p{margin:0 0 14px;color:#6b7280}
#login input{text-align:center;font-size:22px;letter-spacing:6px;margin-bottom:10px}
#login button{width:100%}

header{display:flex;align-items:center;gap:8px;padding:10px 20px;background:#fff;border-bottom:1px solid #e3e6ea;position:sticky;top:0;z-index:5}
.brand{font-weight:700;font-size:16px}
.brand small{font-weight:400;color:#6b7280;margin-left:8px;font-size:12px}
.status{font-size:13px;color:#2f6fed}

main{max-width:1000px;margin:20px auto;padding:0 16px;display:flex;flex-direction:column;gap:16px}
.card{background:#fff;border:1px solid #e3e6ea;border-radius:10px;padding:18px 20px}
.row{margin-bottom:6px}
.row.two{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:720px){.row.two{grid-template-columns:1fr}}
.actions{display:flex;align-items:center;gap:8px;margin-top:14px}
.bar{display:flex;align-items:center;gap:10px;margin-bottom:10px}
#output{font-size:14px;background:#fbfbfc}

.modal{position:fixed;inset:0;background:rgba(0,0,0,.35);display:flex;align-items:flex-start;justify-content:center;padding:40px 16px;z-index:10;overflow:auto}
.dlg{background:#fff;border-radius:10px;padding:20px 22px;width:100%;max-width:640px;box-shadow:0 8px 40px rgba(0,0,0,.2)}
.inline{display:flex;gap:8px;align-items:center}
.list{list-style:none;margin:0;padding:0;max-height:60vh;overflow:auto}
.list li{display:flex;gap:10px;align-items:center;padding:9px 6px;border-bottom:1px solid #eee;cursor:pointer}
.list li:hover{background:#f6f8fb}
.list li .t{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.list li .d{color:#6b7280;font-size:12px;white-space:nowrap}