:root { color-scheme: dark; --ink:#f4f1e8; --muted:#8c918e; --panel:#151918; --line:#2b302e; --acid:#d7ff3f; --acid-dark:#141a04; --danger:#ff716d; --blue:#78a9ff; font-family:Inter,Pretendard,"Noto Sans KR",system-ui,sans-serif; }
* { box-sizing:border-box; }
body { margin:0; min-width:320px; min-height:100vh; background:#0b0e0d; color:var(--ink); }
button,input { font:inherit; } button { cursor:pointer; } .hidden { display:none !important; }
.shell { width:min(1180px,calc(100% - 40px)); margin:0 auto; min-height:100vh; display:flex; flex-direction:column; }
.masthead { min-height:76px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; border-bottom:1px solid var(--line); }
.brand,.login-brand { color:var(--ink); text-decoration:none; font:750 13px/1 monospace; letter-spacing:.12em; display:flex; align-items:center; gap:11px; }
.brand-mark { width:19px; height:19px; border:2px solid var(--acid); transform:rotate(45deg); box-shadow:inset 0 0 0 4px #0b0e0d; background:var(--acid); flex:0 0 auto; }
.tabs { align-self:stretch; display:flex; gap:28px; }
.tab-button { position:relative; border:0; background:none; color:var(--muted); padding:0 2px; font-size:13px; }
.tab-button::after { content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px; background:transparent; }
.tab-button.active { color:var(--ink); } .tab-button.active::after { background:var(--acid); }
.badge { display:inline-grid; min-width:19px; height:19px; place-items:center; margin-left:5px; padding:0 5px; border-radius:10px; background:var(--acid); color:var(--acid-dark); font:700 10px/1 monospace; }
.account { justify-self:end; display:flex; align-items:center; gap:12px; color:var(--muted); font-size:11px; }
.text-button { color:var(--muted); background:none; border:0; font-size:11px; padding:4px; } .text-button:hover { color:var(--ink); }
.tab-panel { flex:1; }
.workspace { display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(44px,8vw,120px); align-items:center; padding:64px 0; }
.eyebrow { color:var(--acid); font:700 11px/1 monospace; letter-spacing:.18em; margin:0 0 24px; }
h1 { font-size:clamp(38px,3.9vw,52px); line-height:1.1; letter-spacing:-.045em; margin:0; font-weight:650; } h1 em { color:var(--acid); font-style:normal; white-space:nowrap; }
.lede { max-width:430px; color:var(--muted); font-size:14px; line-height:1.8; margin:26px 0 0; }
.system-status { color:var(--muted); font-size:11px; display:flex; align-items:center; gap:8px; margin-top:22px; }
.system-status span { width:7px; height:7px; background:#717673; border-radius:50%; } .system-status.online span { background:var(--acid); box-shadow:0 0 12px rgba(215,255,63,.55); } .system-status.error span { background:var(--danger); }
.panel { padding:22px; border:1px solid var(--line); background:var(--panel); box-shadow:0 24px 80px rgba(0,0,0,.28); }
.dropzone { min-height:250px; border:1px dashed #414744; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:9px; transition:border-color .2s,background .2s; }
.dropzone:hover,.dropzone.dragging { border-color:var(--acid); background:rgba(215,255,63,.035); } .dropzone input { position:absolute; opacity:0; pointer-events:none; }
.upload-icon { width:46px; height:46px; display:grid; place-items:center; background:var(--acid); color:#121609; font-size:25px; margin-bottom:8px; }
.dropzone strong { font-size:15px; } .dropzone>span:last-child { color:var(--muted); font-size:12px; }
.selection { margin-top:18px; border-top:1px solid var(--line); } .selection-head { display:flex; justify-content:space-between; align-items:center; padding:17px 0 12px; }
.selection-head div { display:flex; align-items:baseline; gap:10px; } .selection-head strong { font-size:13px; } .selection-head span { color:var(--muted); font-size:11px; }
.file-list { list-style:none; margin:0; padding:0; max-height:145px; overflow:auto; } .file-list li { display:grid; grid-template-columns:1fr auto; gap:16px; padding:10px 0; border-top:1px solid #232725; font-size:12px; } .file-list li span:last-child { color:var(--muted); }
.primary-button,.secondary-button,.danger-button { border:0; font-weight:700; }
.primary-button { width:100%; background:var(--acid); color:var(--acid-dark); padding:16px 18px; margin-top:18px; display:flex; justify-content:space-between; }
.primary-button:disabled { cursor:not-allowed; background:#303532; color:#727773; }
.secondary-button,.danger-button { padding:10px 13px; font-size:11px; background:#202523; color:var(--ink); border:1px solid var(--line); } .danger-button { color:var(--danger); }
.upload-message { min-height:16px; color:var(--muted); font-size:11px; margin:12px 0 0; } .upload-message.error,.form-error { color:var(--danger); }
.jobs-panel { padding:58px 0 72px; } .jobs-heading { display:flex; align-items:end; justify-content:space-between; gap:30px; padding-bottom:28px; border-bottom:1px solid var(--line); }
.jobs-heading .eyebrow { margin-bottom:16px; } .jobs-heading h2 { font-size:clamp(28px,3vw,40px); letter-spacing:-.035em; margin:0; } .jobs-heading p:last-child { color:var(--muted); font-size:12px; margin:12px 0 0; } .jobs-actions { display:flex; gap:8px; }
.jobs-list { border-bottom:1px solid var(--line); }
.job-row { display:grid; grid-template-columns:minmax(220px,1.5fr) minmax(160px,.8fr) 120px auto; gap:24px; align-items:center; min-height:105px; border-top:1px solid var(--line); padding:18px 4px; }
.job-row:first-child { border-top:0; } .job-name strong { display:block; font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .job-name span,.job-progress span { color:var(--muted); font-size:10px; }
.job-progress { min-width:0; } .job-progress-head { display:flex; justify-content:space-between; gap:12px; margin-bottom:9px; } .progress-track { height:3px; background:#292e2c; } .progress-track span { display:block; height:100%; background:var(--acid); }
.status-pill { justify-self:start; padding:6px 8px; border:1px solid var(--line); color:var(--muted); font:700 9px/1 monospace; letter-spacing:.04em; white-space:nowrap; }
.status-pill.completed { color:var(--acid); border-color:rgba(215,255,63,.35); } .status-pill.processing,.status-pill.queued { color:var(--blue); border-color:rgba(120,169,255,.35); } .status-pill.failed,.status-pill.calibration_required { color:var(--danger); border-color:rgba(255,113,109,.35); }
.job-actions { justify-self:end; display:flex; gap:7px; } .job-actions button { padding:9px 11px; border:1px solid var(--line); background:transparent; color:var(--muted); font-size:10px; } .job-actions button:hover { color:var(--ink); border-color:#4a514e; } .job-actions .download-action { background:var(--acid); color:var(--acid-dark); border-color:var(--acid); } .job-actions .delete-action { color:var(--danger); }
.job-warning { grid-column:1/-1; color:#c7aa69; font-size:10px; margin:-10px 0 0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.empty-state { min-height:310px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:9px; border-bottom:1px solid var(--line); color:var(--muted); } .empty-state strong { color:var(--ink); font-size:14px; } .empty-state span { font-size:11px; }
.login-view { min-height:100vh; display:grid; place-items:center; padding:24px; background:radial-gradient(circle at 50% 25%,#192019 0,#0b0e0d 42%); }
.login-card { width:min(430px,100%); padding:42px; border:1px solid var(--line); background:rgba(21,25,24,.94); box-shadow:0 30px 100px rgba(0,0,0,.45); }
.login-brand { margin-bottom:54px; } .login-card .eyebrow { margin-bottom:19px; } .login-card h1 { font-size:40px; }
.login-form { margin-top:36px; } .login-form label { display:block; color:var(--muted); font-size:10px; margin:15px 0 7px; } .login-form input { width:100%; border:1px solid var(--line); background:#0d100f; color:var(--ink); padding:13px; outline:none; } .login-form input:focus { border-color:var(--acid); } .form-error { min-height:16px; font-size:10px; margin:10px 0 0; }
.password-dialog { width:min(460px,calc(100% - 32px)); padding:0; color:var(--ink); border:1px solid var(--line); background:#151918; box-shadow:0 30px 100px rgba(0,0,0,.6); }
.password-dialog::backdrop { background:rgba(4,6,5,.78); backdrop-filter:blur(3px); }
.password-form { padding:30px; } .dialog-heading { display:flex; justify-content:space-between; align-items:flex-start; gap:24px; margin-bottom:25px; } .dialog-heading .eyebrow { margin-bottom:10px; } .dialog-heading h2 { margin:0; font-size:26px; letter-spacing:-.035em; }
.dialog-close { border:0; background:none; color:var(--muted); font-size:28px; line-height:1; padding:0 3px; } .dialog-close:hover { color:var(--ink); }
.password-form label { display:block; color:var(--muted); font-size:10px; margin:14px 0 7px; } .password-form input { width:100%; border:1px solid var(--line); background:#0d100f; color:var(--ink); padding:13px; outline:none; } .password-form input:focus { border-color:var(--acid); }
.password-help { color:var(--muted); font-size:10px; line-height:1.6; margin:12px 0 0; } .dialog-actions { display:grid; grid-template-columns:1fr 1.6fr; gap:9px; margin-top:8px; } .dialog-actions button { width:100%; margin:0; }
footer { border-top:1px solid var(--line); min-height:62px; display:flex; align-items:center; justify-content:space-between; gap:20px; color:var(--muted); font:10px/1.5 monospace; letter-spacing:.05em; }
@media (max-width:820px) { .shell{width:min(100% - 28px,660px)} .masthead{grid-template-columns:1fr auto;padding:14px 0;gap:14px}.tabs{grid-column:1/-1;grid-row:2;min-height:42px}.account{grid-column:2;grid-row:1}.workspace{grid-template-columns:1fr;padding:46px 0;gap:38px}.dropzone{min-height:215px}.jobs-heading{align-items:flex-start;flex-direction:column}.job-row{grid-template-columns:1fr auto;gap:14px}.job-progress{grid-column:1/-1}.job-actions{grid-column:1/-1;justify-self:start}.job-warning{margin-top:0;white-space:normal}footer{align-items:flex-start;flex-direction:column;justify-content:center} }