:root {
  color-scheme: light;
  --nav:#123b66; --nav-deep:#0c2e52; --primary:#0962b2; --primary-hover:#074e8e;
  --text:#203245; --muted:#52677b; --border:#dce4ec; --background:#f3f6fa;
  --surface:#fff; --soft:#eef4fb; --danger:#a82e37; --danger-bg:#fff2f3;
  --warning:#785313; --warning-bg:#fff8e9; --success:#276b54; --success-bg:#eff9f4;
  --radius:8px; --space:8px;
  font-family:"Malgun Gothic","맑은 고딕",system-ui,sans-serif;
  font-synthesis:none;
}
* { box-sizing:border-box; }
body { margin:0;background:var(--background);color:var(--text);font-size:14px;line-height:1.6; }
button,input,select,textarea { font:inherit; }
button,a,input,select { touch-action:manipulation; }
button { cursor:pointer; }
button:disabled { cursor:default; }
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible { outline:3px solid #e7ae36;outline-offset:3px; }
a { color:var(--primary);text-underline-offset:3px; }
[hidden] { display:none!important; }
.skip-link { position:fixed;left:16px;top:-80px;z-index:9;background:var(--surface);padding:12px 16px;border-radius:var(--radius); }
.skip-link:focus { top:16px; }
.sidebar { width:224px;position:fixed;inset:0 auto 0 0;background:var(--nav);color:white;display:flex;flex-direction:column;padding:32px 16px 24px; }
.brand { padding:0 16px 32px;border-bottom:1px solid #ffffff30; }
.brand-name { display:block;font-size:22px;font-weight:700;letter-spacing:-.6px; }
.brand-sub { display:block;font-size:12px;color:#c4d7e9;margin-top:4px; }
.nav-group-label { color:#bed2e5;font-size:11px;letter-spacing:.08em;padding:24px 16px 8px; }
nav { display:grid;gap:8px; }
nav button { width:100%;min-height:44px;display:flex;align-items:center;gap:12px;border:0;border-radius:6px;padding:12px 16px;text-align:left;background:transparent;color:#edf4fb;font-weight:600; }
nav button span { width:16px;font-size:18px;line-height:1; }
nav button[aria-current=page] { background:white;color:var(--nav); }
nav button:not(:disabled):not([aria-current=page]):hover { background:#ffffff18; }
nav button:disabled { color:#bed0e1;font-weight:400; }
nav small { margin-left:auto;font-size:10px;font-weight:400;white-space:nowrap; }
.sidebar-foot { margin-top:auto;padding:24px 16px 0;color:#bfd1e1;font-size:12px; }
.sidebar-foot p { margin:12px 0 0; }
.sidebar { overflow-y:auto; }
.management-grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-bottom:24px; }
.management-grid .field { min-width:0; }
.helper { font-size:12px;color:var(--muted);overflow-wrap:anywhere; }
textarea { width:100%;border:1px solid #bdcbd8;border-radius:6px;padding:10px 12px;color:var(--text);resize:vertical; }
textarea:focus-visible { outline:3px solid #e7ae36;outline-offset:3px; }
.reference-search { display:flex;gap:8px; }
.reference-search .button { flex:none; }
.reference-field .field { margin-top:12px; }
.fee-menu { display:flex;gap:8px;flex-wrap:wrap;margin-top:24px; }
.mode-tag { border:1px solid #9bb6d2;padding:4px 8px;border-radius:4px;color:#e7f1fa;font-size:11px; }
.workspace { margin-left:224px; }
.topbar { min-height:64px;padding:16px 40px;background:var(--surface);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:16px;color:var(--muted);font-size:12px; }
.connection { border:1px solid var(--border);border-radius:20px;padding:4px 12px;font-size:11px; }
.connection.ready { color:var(--success);background:var(--success-bg);border-color:#d3e8dd; }
.session-controls { display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end; }
main { max-width:1440px;margin:auto;padding:40px; }
.page-heading { display:flex;justify-content:space-between;gap:24px;align-items:center;margin-bottom:24px; }
.eyebrow { font-size:12px;color:var(--primary);margin:0 0 8px; }
h1 { margin:0;font-size:28px;letter-spacing:-.8px;line-height:1.35; }
.page-heading p:not(.eyebrow) { margin:12px 0 0;color:var(--muted); }
.page-badge,.badge { display:inline-flex;align-items:center;gap:4px;white-space:nowrap;border-radius:4px;padding:4px 8px;font-size:11px;background:var(--soft);color:var(--nav); }
.page-badge { background:var(--surface);border:1px solid var(--border); }
.panel { background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);margin-top:24px;overflow:hidden; }
.panel-head { padding:20px 24px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:16px; }
.panel-head h2 { font-size:16px;margin:0;letter-spacing:-.3px; }
.panel-head p { color:var(--muted);font-size:12px;margin:4px 0 0; }
.panel-body { padding:24px; }
.steps { display:flex;gap:32px;color:var(--muted);font-size:12px;padding:0;list-style:none;margin:0; }
.steps li { display:flex;align-items:center;gap:8px; }
.step-number { border:1px solid var(--border);width:24px;height:24px;border-radius:50%;display:inline-grid;place-items:center;background:white;color:var(--muted);font-size:11px; }
.steps .active { color:var(--primary);font-weight:700; }
.steps .active .step-number { background:var(--primary);color:white;border-color:var(--primary); }
.form-grid { display:grid;grid-template-columns:200px minmax(200px,1fr);gap:24px; }
.field label { display:block;font-size:12px;font-weight:700;margin-bottom:8px; }
input,select { min-height:44px;border:1px solid #bdcbd8;border-radius:6px;padding:10px 12px;background:white;color:var(--text);width:100%; }
input:disabled,select:disabled { background:var(--background);color:var(--muted); }
input[type=checkbox] { min-height:0;width:18px;height:18px;flex:none;accent-color:var(--primary); }
.upload { border:1px dashed #b8c9dc;border-radius:var(--radius);background:#fbfdff;padding:24px;margin-top:24px; }
.upload-title { font-weight:700;margin:0 0 8px; }
.upload p { color:var(--muted);font-size:12px;margin:8px 0; }
.upload input[type=file] { padding:12px;background:white; }
.upload input::file-selector-button { border:1px solid var(--border);border-radius:4px;padding:8px 12px;margin-right:16px;background:var(--surface);color:var(--primary);cursor:pointer; }
.actions { display:flex;align-items:center;gap:12px;justify-content:flex-end;margin-top:24px;flex-wrap:wrap; }
.actions .helper { margin-right:auto;color:var(--muted);font-size:12px; }
.button { min-height:42px;padding:10px 20px;border:1px solid var(--border);border-radius:6px;color:var(--text);background:white;font-weight:600;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:8px; }
.button:hover { background:var(--background); }
.button.primary { color:white;background:var(--primary);border-color:var(--primary); }
.button.primary:hover { background:var(--primary-hover); }
.button:disabled { color:#66798b;background:#eaf0f6;border-color:#dce4ed; }
.button.small { min-height:36px;padding:6px 12px;font-size:12px; }
.notice { border:1px solid #d0deed;background:var(--soft);border-radius:6px;padding:16px 20px;margin:16px 0;color:var(--nav);font-size:13px; }
.notice.warning { color:var(--warning);background:var(--warning-bg);border-color:#eadbb7; }
.notice.danger { color:var(--danger);background:var(--danger-bg);border-color:#efd2d6; }
.notice.success { color:var(--success);background:var(--success-bg);border-color:#d1e8dc; }
.notice p { margin:0; }
.summary-grid { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;border-bottom:1px solid var(--border);padding-bottom:20px;margin-bottom:20px; }
.summary-grid dt { font-size:12px;color:var(--muted); }
.summary-grid dd { margin:4px 0 0;font-size:20px;font-weight:700;letter-spacing:-.5px; }
.summary-grid dd.small-value { font-size:14px; }
.ack { display:flex;align-items:flex-start;gap:12px;margin-top:20px;color:var(--muted);font-size:13px; }
.ack input { margin:3px 0 0; }
.table-scroll { overflow:auto;max-height:520px;overscroll-behavior:contain; }
table { width:100%;border-collapse:collapse;white-space:nowrap;text-align:left;font-size:12px; }
caption { text-align:left;padding:12px 24px;color:var(--muted);font-size:12px; }
th { position:sticky;top:0;z-index:1;background:#f4f7fa;font-weight:600;color:var(--muted); }
th,td { padding:12px 16px;border-bottom:1px solid var(--border);vertical-align:middle; }
tr:last-child td { border-bottom:0; }
tbody tr:hover { background:#f8fafc; }
.summary-row { background:var(--warning-bg); }
.filename { max-width:380px;white-space:normal;overflow-wrap:anywhere;font-weight:600; }
.numeric { text-align:right;font-variant-numeric:tabular-nums; }
.empty { padding:48px 24px;text-align:center;color:var(--muted); }
.empty strong { display:block;color:var(--text);font-size:16px;margin-bottom:8px; }
.pager { display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 24px;border-top:1px solid var(--border);color:var(--muted);font-size:12px; }
.pager-controls { display:flex;gap:8px; }
.filters { display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap; }
.filters .field { min-width:160px;flex:1; }
.filters .button { flex:none; }
.file-meta { display:flex;gap:24px;flex-wrap:wrap;color:var(--muted);font-size:12px; }
.file-meta span { overflow-wrap:anywhere; }
.file-meta .hash { font-family:ui-monospace,monospace;font-size:11px; }
.issues { margin:12px 0 0;padding-left:20px;font-size:12px; }
details { border-top:1px solid var(--border);padding:16px 24px; }
summary { cursor:pointer;color:var(--muted);font-size:12px;font-weight:600; }
.page-footer { margin-top:32px;font-size:11px;color:var(--muted);text-align:center; }
@media (max-width:1024px) {
  .sidebar { width:192px;padding:24px 12px; }
  .workspace { margin-left:192px; }
  .topbar { padding:16px 24px; }
  main { padding:24px; }
  .brand { padding-left:12px;padding-right:12px; }
  .brand-name { font-size:20px; }
  .page-heading { align-items:flex-start; }
  .summary-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:768px) {
  .sidebar { position:static;width:auto;padding:16px; }
  .brand { padding:0 0 12px;border:0;display:flex;align-items:center;justify-content:space-between;gap:16px; }
  .brand-sub { margin:0; }
  nav { display:flex;overflow:auto;gap:8px;padding-bottom:4px; }
  nav button { width:auto;white-space:nowrap;min-width:max-content; }
  nav button:disabled { display:none; }
  .nav-group-label,.sidebar-foot { display:none; }
  .workspace { margin:0; }
  .topbar { min-height:48px;padding:12px 16px; }
  main { padding:24px 16px; }
  .page-heading { flex-wrap:wrap;gap:12px; }
  h1 { font-size:24px; }
  .panel-head,.panel-body { padding:16px; }
  .form-grid { grid-template-columns:1fr;gap:16px; }
  .management-grid { grid-template-columns:1fr;gap:16px; }
  .reference-search { flex-wrap:wrap; }
  .upload { padding:16px;margin-top:16px; }
  .steps { gap:16px;font-size:11px; }
  .summary-grid { gap:16px; }
  .summary-grid dd { font-size:18px; }
  .pager { padding:16px;flex-wrap:wrap; }
  .actions { margin-top:16px; }
  .actions .helper { width:100%; }
  .button { padding:10px 16px; }
  details { padding:16px; }
}
@media (prefers-reduced-motion:reduce) { * { scroll-behavior:auto!important; } }

.delivery-attendance { min-width:0; }
.delivery-attendance .button,.delivery-attendance .attendance-result { min-height:44px; }
.attendance-date-controls { display:grid;grid-template-columns:minmax(160px,220px) minmax(160px,220px) auto;align-items:end;gap:16px; }
.attendance-date-controls .field { min-width:0; }
.attendance-date-controls .date-range-control { justify-self:start; }
.attendance-connection-row { display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px;background:var(--soft);border:1px solid var(--border);border-radius:var(--radius);margin-top:20px; }
.attendance-connection-row p { margin:4px 0 0;color:var(--muted);font-size:12px; }
.attendance-connection-row .button { flex-shrink:0; }
.attendance-validation { color:var(--danger);font-size:13px; }
.attendance-steps { display:flex;flex-wrap:wrap;gap:8px 24px;padding-left:20px;color:var(--muted);font-size:12px; }
.attendance-summary { font-weight:600;overflow-wrap:anywhere; }
.delivery-attendance .table-scroll { max-width:100%;border:1px solid var(--border);border-radius:var(--radius); }
.delivery-attendance table { min-width:520px; }
.attendance-result { display:inline-flex;align-items:center; }
.attendance-result-list { list-style:none;padding:0;margin:0;display:grid;gap:12px; }
.attendance-result-list li { display:flex;align-items:center;justify-content:space-between;gap:16px;border:1px solid var(--border);border-radius:var(--radius);padding:16px; }
.attendance-result-list li > div { display:flex;align-items:center;gap:12px;flex-wrap:wrap; }
.attendance-result-list time { font-weight:600; }
.attendance-progress { margin-top:24px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius); }
.attendance-progress > summary { cursor:pointer;min-height:44px;font-weight:600; }
@media(max-width:760px) {
  .attendance-date-controls { grid-template-columns:repeat(2,minmax(0,1fr));gap:12px; }
  .attendance-date-controls .date-range-control { grid-column:1/-1; }
  .attendance-connection-row { flex-direction:column;align-items:stretch;gap:12px; }
  .attendance-result-list li { align-items:stretch;flex-direction:column; }
  .attendance-result-actions .button { flex:1; }
}
@media(max-width:380px) {
  .attendance-date-controls { grid-template-columns:minmax(0,1fr); }
}


/* The existing design tokens are shared by web and the prepared Android assets. */
.connection-control { border:1px solid var(--border);padding:8px 12px;background:var(--surface);border-radius:6px;min-height:36px;font-family:inherit; }
.connection-dialog { width:min(560px,calc(100vw - 32px));max-width:calc(100vw - 32px);max-height:calc(100dvh - 32px);padding:0;border:1px solid var(--border);border-radius:var(--radius);color:var(--text);background:var(--surface);overflow:auto; }
.connection-dialog::backdrop { background:#0c2e5280; }
.connection-dialog-head { padding:20px 24px;border-bottom:1px solid var(--border); }
.connection-dialog-head h2 { margin:0;font-size:20px; }
.connection-dialog-body { padding:20px 24px; }
.connection-rows { display:grid;gap:16px; }
.connection-row { display:flex;align-items:flex-start;justify-content:space-between;gap:16px; }
.connection-row > div { min-width:0; }
.connection-row strong { font-size:14px; }
.connection-row p { margin:4px 0 0;font-size:12px;color:var(--muted);overflow-wrap:anywhere; }
.connection-state { flex:none;padding:4px 8px;border-radius:4px;background:var(--background);font-size:12px;color:var(--muted);white-space:nowrap; }
.connection-state.confirmed { color:var(--success);background:var(--success-bg); }
.connection-dialog-actions { display:flex;justify-content:flex-end;gap:12px;padding:16px 24px;border-top:1px solid var(--border);flex-wrap:wrap; }
@media(max-width:480px) {
  .connection-dialog-head,.connection-dialog-body { padding:16px; }
  .connection-dialog-head h2 { font-size:18px; }
  .connection-dialog-actions { padding:16px; }
  .connection-row { gap:8px; }
}