/* ============================================================
 * KSI-CTP-PM — 모바일 우선 스타일
 * Phase 0 골격 + Phase 2.1 (라우터·네비·상태 색상·카드 그리드)
 * ============================================================ */

* { box-sizing: border-box; }
:root {
  --c-bg:        #f5f6f8;
  --c-surface:   #fff;
  --c-border:    #e5e7eb;
  --c-text:      #1f2937;
  --c-muted:     #6b7280;
  --c-primary:   #2563eb;
  --c-primary-h: #1d4ed8;
}
body {
  margin: 0;
  font-family: system-ui, "Segoe UI", "Malgun Gothic", sans-serif;
  background: var(--c-bg);
  color: var(--c-text);
}

/* ── 상단 바 ──────────────────────────────────────────── */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
  padding: 8px 12px;
  padding-left:  max(12px, env(safe-area-inset-left));
  padding-right: max(12px, env(safe-area-inset-right));
  background: var(--c-surface); border-bottom: 1px solid var(--c-border);
}
.brand,
.brand:link,
.brand:visited,
.brand:hover,
.brand:active,
.brand:focus {
  font-size: 14px; font-weight: 700;
  display: inline-flex; align-items: center; gap: 6px;
  min-width: 0; flex: 1 1 auto;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  color: var(--c-text);                    /* <a> 기본 파란색 차단 */
  text-decoration: none;                   /* <a> 기본 밑줄 차단 */
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.brand-full, .brand-short { color: inherit; text-decoration: inherit; }
.brand:hover .brand-full,
.brand:hover .brand-short { color: var(--c-primary); }
.brand:active             { opacity: .8; }
.brand > span { overflow: hidden; text-overflow: ellipsis; }
.brand .muted { font-weight: 400; font-size: 12px; }
.brand-logo   { height: 24px; width: auto; display: block; flex-shrink: 0; }
/* 모바일: 짧은 제목(CTP관리) / 데스크톱(≥641px): 정식 제목 — CSS 로 토글 */
.brand-short  { display: inline; }
.brand-full   { display: none; }
@media (min-width: 641px) {
  .brand-short { display: none; }
  .brand-full  { display: inline; }
}
.muted        { color: var(--c-muted); }
.userbar {
  font-size: 12px; color: #374151;
  display: flex; align-items: center; gap: 6px;
  flex-shrink: 0; white-space: nowrap;
}
.userbar .ksi-name {
  max-width: 140px; overflow: hidden; text-overflow: ellipsis;
  display: inline-block; vertical-align: middle; font-weight: 600;
}
.userbar .badge { padding: 1px 6px; font-size: 11px; }
#ksiSignOut     { padding: 4px 8px !important; font-size: 12px !important; min-height: 32px !important; }

/* 모바일: [로그아웃] 버튼 위 / [이름·역할] 아래 — 세로 스택 */
@media (max-width: 640px) {
  .userbar {
    flex-direction: column-reverse;   /* DOM 순서: info(이름) → button(로그아웃) → reverse 로 button 위 */
    align-items: flex-end; gap: 3px;
  }
  #ksiUserInfo {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 11px;
  }
  .userbar .ksi-name { max-width: 100px; font-size: 11px; }
  .userbar .badge    { font-size: 10px; padding: 0 5px; }
}
.badge {
  display: inline-block; padding: 2px 8px; border-radius: 999px;
  font-size: 12px; font-weight: 600; background: #e0e7ff; color: #3730a3;
}

/* ── 네비 (모바일: 하단 고정 / 데스크톱: 헤더 아래 가로) ── */
.nav {
  position: fixed; bottom: 0; left: 0; right: 0;
  background: var(--c-surface); border-top: 1px solid var(--c-border);
  display: flex; justify-content: space-around;
  padding: 2px 0;
  padding-bottom: max(2px, env(safe-area-inset-bottom));
  z-index: 100;
}
.nav a {
  flex: 1 1 0; min-width: 0; min-height: 52px;
  padding: 4px 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; font-size: 11px; color: var(--c-muted); text-decoration: none;
  border-radius: 6px;
  white-space: nowrap; overflow: hidden;
  letter-spacing: -0.04em;
}
.nav a > :first-child { font-size: 18px; line-height: 1; }
.nav a > :last-child  { line-height: 1.1; }
.nav a.active         { color: var(--c-text); font-weight: 700; }
.nav a.active > :first-child { transform: scale(1.06); }
.nav a:active         { background: #f1f5f9; }

/* ── 본문(view) ───────────────────────────────────────── */
.view {
  max-width: 880px; margin: 16px auto 96px;
  padding: 0 12px;
}
.card {
  background: var(--c-surface); border: 1px solid var(--c-border);
  border-radius: 12px; padding: 18px 16px;
  box-shadow: 0 1px 6px rgba(0,0,0,.04);
  margin-bottom: 12px;
}
.card h2 { margin: 0 0 6px; font-size: 18px; }
.cards   { display: grid; gap: 12px; }

/* ── 상태 박스 ────────────────────────────────────────── */
.status {
  margin-top: 12px; padding: 12px 14px; border-radius: 8px;
  background: #f3f4f6; font-size: 14px; line-height: 1.6; white-space: pre-line;
}
.status.ok    { background: #ecfdf5; color: #065f46; }
.status.warn  { background: #fffbeb; color: #92400e; }
.status.error { background: #fef2f2; color: #991b1b; }

/* ── 정비 상태 4단계 (대시보드 카드용) ───────────────────── */
.pill {
  display: inline-block; padding: 3px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 600; line-height: 1.4;
}
.pill-normal   { background: #dcfce7; color: #166534; }
.pill-imminent { background: #fef3c7; color: #92400e; }
.pill-due      { background: #fed7aa; color: #9a3412; }
.pill-overdue  { background: #fee2e2; color: #991b1b; }

/* ── 폼 요소 (모바일 터치 친화) ───────────────────────── */
button, .btn {
  min-height: 44px; padding: 10px 16px;
  font-size: 14px; font-weight: 500;
  border: 1px solid #d1d5db; border-radius: 8px;
  background: #fff; cursor: pointer; color: var(--c-text);
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
button:hover, .btn:hover           { background: #f9fafb; }
button:active, .btn:active         { background: #f1f5f9; }
button:disabled, .btn:disabled     { opacity: .5; cursor: not-allowed; }
button.primary, .btn.primary       { background: var(--c-primary); color: #fff; border-color: var(--c-primary); }
button.primary:hover               { background: var(--c-primary-h); }
button.danger,  .btn.danger        { background: #dc2626; color: #fff; border-color: #dc2626; }
button.danger:hover                { background: #b91c1c; }

input[type="text"], input[type="number"], input[type="date"],
input[type="time"], input[type="email"], textarea, select {
  min-height: 44px; padding: 10px 12px;
  font-size: 14px; border: 1px solid #d1d5db; border-radius: 8px;
  width: 100%; background: #fff;
}
textarea { min-height: 80px; line-height: 1.5; }
label    { display: block; margin: 8px 0 4px; font-size: 13px; color: #374151; }

/* 모바일 전용 가시성 유틸 — 데스크톱은 그대로, 모바일에서만 숨김 */
@media (max-width: 640px) {
  .hide-mobile { display: none !important; }
}

/* ── 대시보드 (Phase 2.2) ────────────────────────────── */
.dash-meta {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px;
  margin: 0 0 12px;
}
.dash-asof { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.dash-asof input[type="date"] { padding: 4px 6px; font-size: 12px; width: 126px; }
.btn.small { padding: 4px 8px; font-size: 12px; }
.small { font-size: 12px; }

/* 호기 탭 (모바일에서만 표시 — ≥641px 에선 숨김) */
.proc-tabs {
  display: flex; gap: 6px; margin-bottom: 12px;
  background: var(--c-surface); border: 1px solid var(--c-border); border-radius: 10px;
  padding: 4px;
}
.proc-tabs .proc-tab {
  flex: 1; min-width: 0; min-height: 44px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; padding: 4px 6px;
  background: transparent; border: none; border-radius: 7px;
  cursor: pointer; color: var(--c-muted);
  font-weight: 500; font-size: 13px;
}
.proc-tabs .proc-tab.active {
  background: var(--c-primary); color: #fff; font-weight: 700;
}
.proc-tabs .proc-tab .proc-tab-meta { font-size: 11px; opacity: .85; font-variant-numeric: tabular-nums; }
.proc-tabs .proc-tab.has-alert::after {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: #dc2626; position: absolute; margin-top: -20px; margin-left: 40px;
}
.proc-tabs .proc-tab { position: relative; }
/* 데스크톱에선 호기 탭 숨김 (3열 그리드로 한 화면에 다 보임) */
@media (min-width: 641px) { .proc-tabs { display: none; } }
/* 모바일에선 cards 그리드 → 한 컬럼이지만, 선택된 호기만 표시 (JS 가 hidden 토글) */
@media (max-width: 640px) {
  .cards.proc-list .processor-card { display: none; }
  .cards.proc-list .processor-card.active { display: flex; }
}

.processor-card     { display: flex; flex-direction: column; gap: 10px; }
.proc-head          { padding-bottom: 4px; border-bottom: 1px solid var(--c-border); }
.proc-head h2       { margin: 0 0 2px; }
.proc-head .small   { display: block; }

.metric             { border: 1px solid var(--c-border); border-radius: 8px; overflow: hidden; }
.metric-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 12px; background: #f9fafb; font-size: 13px; font-weight: 600;
}
.metric-body        { padding: 10px 12px; font-size: 13px; line-height: 1.55; }
.metric-body .line  { margin: 2px 0; }
.metric-body b      { color: var(--c-text); }

.roller-list        { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; }
.roller-list li     {
  display: grid; grid-template-columns: 1fr auto auto; align-items: center;
  gap: 8px; padding: 4px 0;
}
.roller-name        { font-weight: 500; }
.roller-num         { color: var(--c-muted); font-variant-numeric: tabular-nums; font-size: 12px; }

.proc-actions       { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.proc-actions .btn  { flex: 1; min-width: 120px; }

/* ── 재작업 (Phase 3.3) ─────────────────────────────── */
.rework-banner {
  border: 1px solid #fecaca; background: #fff7f7;
}
.rework-head {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.rework-badge {
  background: #dc2626; color: #fff; padding: 4px 10px; border-radius: 6px;
  font-weight: 700; font-size: 13px;
}
.rework-count { font-weight: 600; color: #991b1b; }
.btn-link {
  min-height: 0; padding: 4px 8px; border: none; background: transparent;
  color: var(--c-primary); font-size: 13px; cursor: pointer; margin-left: auto;
}
.btn-link:hover { text-decoration: underline; background: transparent; }

.rework-list { list-style: none; margin: 12px 0 0; padding: 0;
               display: flex; flex-direction: column; gap: 8px; }
.rework-item { padding: 10px 12px; background: #fff; border: 1px solid #fecaca;
               border-radius: 8px; display: flex; flex-direction: column; gap: 6px; }
.rework-item-head { font-size: 14px; font-weight: 500; }
.rework-reason { font-size: 13px; color: #991b1b; line-height: 1.5; }
.rework-pick { align-self: flex-start; min-width: 150px; }

.rework-active {
  padding: 10px 12px; margin: 4px 0 12px; border-radius: 8px;
  background: #fef3c7; color: #92400e; font-size: 13px; line-height: 1.6;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.rework-active b { color: #78350f; }
.rework-active .btn-link { margin-left: auto; color: #b45309; }

/* ── 정비 입력 폼 (Phase 2.3) ───────────────────────── */
.type-tabs {
  display: flex; gap: 6px; flex-wrap: wrap;
  padding-bottom: 12px; border-bottom: 1px solid var(--c-border); margin-bottom: 12px;
}
.type-tabs .tab {
  flex: 1; min-width: 110px;
  background: #f3f4f6; border-color: #e5e7eb; color: #4b5563;
  font-weight: 500;
}
.type-tabs .tab.active {
  background: var(--c-primary); color: #fff; border-color: var(--c-primary);
}

/* 처리기/롤러 카드 선택 그리드 */
.select-grid {
  display: grid; gap: 8px; margin-bottom: 12px;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
.select-grid--proc   { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
.select-grid--roller { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }

.select-card {
  position: relative; min-height: 0; padding: 12px 14px;
  border: 2px solid var(--c-border); border-radius: 10px;
  background: #fff; cursor: pointer; text-align: left;
  display: flex; flex-direction: column; gap: 3px; line-height: 1.4;
  font-weight: 400; color: var(--c-text);
  transition: border-color .12s, background-color .12s;
}
.select-card:hover         { background: #f9fafb; border-color: #cbd5e1; }
.select-card.selected      {
  border-color: var(--c-primary); background: #eff6ff;
}
.select-card .sc-title     { font-size: 14px; font-weight: 600; }
.select-card .sc-sub       { font-size: 11px; color: var(--c-muted); }
.select-card .sc-meta      { font-size: 12px; color: #374151; font-variant-numeric: tabular-nums; }
.select-card .sc-meta b    { color: var(--c-text); }

/* 다중 선택 (체크 마크) */
.select-card.multi          { padding-left: 36px; }
.select-card.multi .sc-check {
  position: absolute; top: 12px; left: 12px;
  width: 18px; height: 18px; border: 2px solid #cbd5e1; border-radius: 4px;
  background: #fff;
}
.select-card.multi.selected .sc-check {
  background: var(--c-primary); border-color: var(--c-primary);
}
.select-card.multi.selected .sc-check::after {
  content: ''; position: absolute; top: 1px; left: 4px;
  width: 5px; height: 10px; border: solid #fff;
  border-width: 0 2px 2px 0; transform: rotate(45deg);
}

.check-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.check {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border: 1px solid var(--c-border); border-radius: 8px;
  background: #fff; cursor: pointer; font-size: 14px;
}
.check input[type="checkbox"] { width: 20px; height: 20px; margin: 0; cursor: pointer; }
.check input:checked + span    { color: #065f46; font-weight: 500; }
.check:has(input:checked)      { background: #ecfdf5; border-color: #6ee7b7; }

.photo-input { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.photo-grid {
  display: grid; gap: 8px; margin-bottom: 12px;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
}
.photo-thumb {
  position: relative; aspect-ratio: 1; border: 1px solid var(--c-border); border-radius: 8px;
  overflow: hidden; background: #f9fafb;
}
.photo-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-remove {
  position: absolute; top: 4px; right: 4px;
  width: 24px; height: 24px; min-height: 0; padding: 0;
  border-radius: 50%; background: rgba(0,0,0,.6); color: #fff;
  border: none; font-size: 14px; line-height: 1;
}
.photo-name {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 3px 6px; font-size: 10px; color: #fff; background: rgba(0,0,0,.55);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.form-actions {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--c-border);
}
.form-actions .btn { min-width: 180px; }

/* ── 농도 점검 (Phase 3.2) ──────────────────────────── */
.slot-tabs { display: flex; gap: 6px; margin-bottom: 12px; }
.slot-tabs .tab {
  flex: 1; background: #f3f4f6; border-color: #e5e7eb; color: #4b5563;
  font-weight: 600;
}
.slot-tabs .tab.active {
  background: var(--c-primary); color: #fff; border-color: var(--c-primary);
}
.slot-tabs .tab.active .muted { color: rgba(255,255,255,.8); }

.conc-preview {
  margin: 4px 0 12px; padding: 10px 12px; border-radius: 8px;
  font-size: 13px; line-height: 1.5;
}
.conc-preview.is-normal { background: #dcfce7; color: #166534; }
.conc-preview.is-alert  { background: #fee2e2; color: #991b1b; }

/* 측정값 편차 표시 (목표 대비 +/-N.NN%) */
.conc-dev {
  font-size: 12px; color: var(--c-muted); font-variant-numeric: tabular-nums;
  margin-top: 2px;
}
.conc-dev.over { color: #dc2626; font-weight: 700; }

/* 로그 사진 버튼 — Lightbox 트리거 */
.conc-photo-btn {
  min-height: 28px; padding: 3px 10px; font-size: 12px;
  border: 1px solid var(--c-border); border-radius: 6px;
  background: #fff; cursor: zoom-in; color: #1f2937;
  font-variant-numeric: tabular-nums;
}
.conc-photo-btn:hover { background: #f3f4f6; border-color: #94a3b8; }

/* ── 검증 큐 (Phase 3.1) ────────────────────────────── */
.verify-tabs {
  display: inline-flex; gap: 4px; margin-left: 8px; vertical-align: middle;
}
.verify-tabs .tab {
  padding: 6px 14px; border: 1px solid var(--c-border); background: #fff;
  border-radius: 999px; font-size: 14px; cursor: pointer;
}
.verify-tabs .tab.active {
  background: var(--c-primary, #2563eb); color: #fff; border-color: var(--c-primary, #2563eb);
}
.verify-tabs .tab-count {
  display: inline-block; min-width: 18px; padding: 0 6px; margin-left: 4px;
  background: #ef4444; color: #fff; border-radius: 999px;
  font-size: 11px; font-weight: 600;
}
.verify-tabs .tab.active .tab-count { background: #fff; color: var(--c-primary, #2563eb); }

.missed-toolbar input[type="date"] {
  padding: 4px 6px; font-size: 13px;
}
.missed-summary { margin: 8px 0; }
.miss-card .vi-resolved-info {
  margin-top: 8px; padding: 8px 10px; background: #f0fdf4;
  border-left: 3px solid #16a34a; border-radius: 4px;
}
.miss-row {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
}
.miss-row .miss-summary { flex: 1; }

.verify-filter {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  margin-top: 8px;
}
.flex-spacer { flex: 1; }
.chip {
  min-height: 36px; padding: 6px 14px; font-size: 13px;
  border: 1px solid var(--c-border); border-radius: 999px;
  background: #fff; cursor: pointer; color: #4b5563;
}
.chip:hover  { background: #f9fafb; }
.chip.active { background: var(--c-primary); color: #fff; border-color: var(--c-primary); }
.chip-sm     { min-height: 30px; padding: 4px 10px; font-size: 12px; }
.chip-row {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  margin: 4px 0 12px;
}
.period-meta { margin-left: auto; font-variant-numeric: tabular-nums; }
.period-custom label { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: 13px; }
.period-custom input[type="date"] { width: auto; min-width: 140px; }
.note-clip {
  max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.text-danger { color: #991b1b; }

.vi-card { display: flex; flex-direction: column; gap: 10px; }
.vi-head {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding-bottom: 8px; border-bottom: 1px solid var(--c-border);
}
.vi-type {
  padding: 4px 10px; border-radius: 6px; font-weight: 600; font-size: 13px;
  background: #eef2ff; color: #3730a3;
}
.vi-type.type-developer          { background: #dbeafe; color: #1e40af; }
.vi-type.type-roller-cleaning    { background: #cffafe; color: #155e75; }
.vi-type.type-roller-replacement { background: #fef3c7; color: #92400e; }
.vi-type.type-concentration      { background: #fce7f3; color: #9d174d; }

/* 날짜 그룹 */
.vi-day { margin-bottom: 16px; }
.vi-day-head {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 8px 14px; margin-bottom: 8px;
  background: #f1f5f9; border-radius: 8px;
  font-size: 14px; font-weight: 600; color: #1e293b;
}
.vi-day-date { font-variant-numeric: tabular-nums; }
.vi-day-counts { display: flex; gap: 8px; flex-wrap: wrap; margin-left: auto; }
.vi-daycount {
  font-size: 12px; font-weight: 500; color: #475569;
  background: #fff; padding: 2px 8px; border-radius: 999px;
}

/* 농도 검증 카드 */
.vi-conc-row { background: #fdf2f8; padding: 10px 12px; border-radius: 8px; }
.vi-conc-val { font-size: 16px; }
.vi-proc { font-weight: 600; color: var(--c-primary); font-size: 15px; }
.vi-when { margin-left: auto; white-space: nowrap; }
.vi-when-abs { display: none; }
@media (min-width: 641px) { .vi-when-abs { display: inline; } }
.vi-photo-badge {
  background: #f1f5f9; color: #334155; padding: 3px 8px; border-radius: 6px;
  font-size: 12px; font-weight: 600;
}
.vi-subhead {
  margin-top: -4px; padding-bottom: 6px;
  font-variant-numeric: tabular-nums; letter-spacing: 0.02em;
}

.vi-body  { display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.vi-row b { color: var(--c-text); font-variant-numeric: tabular-nums; }

.vi-check-summary {
  margin: 4px 0; padding: 6px 12px; border-radius: 6px;
  background: #ecfdf5; color: #166534; font-size: 13px; font-weight: 500;
  display: inline-block;
}

.vi-photos {
  display: grid; gap: 6px; margin-top: 4px;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
}
.vi-thumb {
  position: relative; aspect-ratio: 1; padding: 0; min-height: 0;
  border: 1px solid var(--c-border); border-radius: 6px; overflow: hidden;
  background: #f3f4f6; cursor: zoom-in;
}
.vi-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vi-thumb.broken::after { content: '🗙'; position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center; color: #9ca3af; }
.vi-thumb-loading {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  font-size: 11px; color: var(--c-muted);
}

.vi-note { background: #fffbeb; color: #78350f; padding: 8px 12px; border-radius: 8px; font-size: 13px; }

.vi-actions { display: flex; gap: 8px; padding-top: 10px; border-top: 1px solid var(--c-border); }
.vi-actions .btn { flex: 1; min-width: 0; }

.vi-reject {
  display: flex; flex-direction: column; gap: 8px;
  padding: 12px; background: #fef2f2; border-radius: 8px;
}
.vi-reject-reason { background: #fff; min-height: 60px; }
.vi-reject-actions { display: flex; gap: 8px; }
.vi-reject-actions .btn { flex: 1; }

/* 사진 라이트박스 (공유 — lightbox.js) */
.lightbox-locked { overflow: hidden; }
.lightbox {
  position: fixed; inset: 0; z-index: 10000;
  background: rgba(0,0,0,.92);
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
}
.lightbox img {
  max-width: 100%; max-height: 100%; object-fit: contain;
  border-radius: 6px; box-shadow: 0 8px 32px rgba(0,0,0,.5);
}
.lightbox-close,
.lightbox-prev,
.lightbox-next {
  position: absolute; min-height: 0; padding: 0;
  background: rgba(255,255,255,.15); color: #fff;
  border: 1px solid rgba(255,255,255,.3); cursor: pointer;
}
.lightbox-close:hover,
.lightbox-prev:hover,
.lightbox-next:hover { background: rgba(255,255,255,.3); }
.lightbox-close {
  top: 16px; right: 16px; width: 40px; height: 40px;
  border-radius: 50%; font-size: 20px;
}
.lightbox-prev, .lightbox-next {
  top: 50%; transform: translateY(-50%);
  width: 48px; height: 64px; border-radius: 8px;
  font-size: 32px; line-height: 1;
}
.lightbox-prev { left: 16px; }
.lightbox-next { right: 16px; }
.lightbox-counter {
  position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);
  background: rgba(0,0,0,.6); color: #fff;
  padding: 6px 14px; border-radius: 999px;
  font-size: 13px; font-variant-numeric: tabular-nums;
}

/* ── 관리자 설정 (Phase 5.1+5.2) ────────────────────── */
.admin-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin: 8px 0 12px; }
.admin-tabs .tab {
  flex: 1; min-width: 80px;
  background: #f3f4f6; border-color: #e5e7eb; color: #4b5563; font-weight: 600;
}
.admin-tabs .tab.active {
  background: var(--c-primary); color: #fff; border-color: var(--c-primary);
}

.table-scroll { overflow-x: auto; }
.perm-table {
  font-size: 13px; min-width: 720px;
}
.perm-table td, .perm-table th { padding: 6px 8px; }
.perm-table tr.editing { background: #eff6ff; }
.actions-cell { white-space: nowrap; }
.actions-cell .btn {
  padding: 5px 10px; min-height: 32px; font-size: 12px; margin-left: 4px;
}

.perm-new {
  display: grid; gap: 6px;
  grid-template-columns: 1fr; align-items: center;
  margin-bottom: 8px;
}
@media (min-width: 641px) {
  .perm-new { grid-template-columns: 2fr 1.5fr 1fr 1.5fr auto; }
}

.check.inline { display: inline-flex; gap: 6px; padding: 6px 10px; border: none; background: transparent; }
.check.inline input { margin: 0; }

/* 설비·롤러 카드 */
.fac-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.fac-card { border: 1px solid var(--c-border); border-radius: 10px; padding: 12px; }
.fac-head { display: flex; align-items: center; gap: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--c-border); margin-bottom: 8px; }
.fac-actions { display: flex; gap: 6px; margin-top: 10px; }
.fac-actions .btn { flex: 1; min-width: 0; }

.rk-list { display: flex; flex-direction: column; gap: 8px; }
.rk-row {
  display: grid; gap: 8px; align-items: center;
  grid-template-columns: 80px 100px auto 1fr auto;
}
.rk-name { font-weight: 600; }
@media (max-width: 640px) {
  .rk-row { grid-template-columns: 1fr 1fr; gap: 6px; }
  .rk-row .btn { grid-column: 1 / -1; }
}

/* 기준 키 폼 */
.cfg-list { display: flex; flex-direction: column; gap: 8px; }
.cfg-row {
  display: grid; gap: 8px; align-items: center;
  grid-template-columns: 1fr 180px 60px;
}
.cfg-label { margin: 0; font-size: 14px; font-weight: 500; }
.cfg-unit { font-size: 12px; }
@media (max-width: 640px) {
  .cfg-row { grid-template-columns: 1fr 110px 50px; }
  .cfg-label { font-size: 13px; }
}

/* 장치 인증 — 평문 키 노출 카드 */
.dk-reveal { border: 2px solid #f59e0b; background: #fffbeb; }
.dk-info { margin-bottom: 10px; font-size: 14px; }
.dk-key-box {
  display: grid; gap: 8px; grid-template-columns: 1fr auto;
  align-items: center; margin-bottom: 8px;
}
.dk-key-box input {
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  font-size: 13px; padding: 10px; word-break: break-all;
  background: #fff; border: 1px solid #d97706; border-radius: 6px;
}
@media (max-width: 640px) {
  .dk-key-box { grid-template-columns: 1fr; }
}

/* SOP 단계 편집 */
.sop-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.sop-item {
  display: grid; gap: 6px; align-items: center;
  grid-template-columns: 120px 1fr auto auto auto;
}
.sop-id { background: #f9fafb; font-family: monospace; font-size: 12px; }
.sop-item .btn { min-height: 36px; padding: 4px 10px; font-size: 12px; }
@media (max-width: 640px) {
  .sop-item { grid-template-columns: 80px 1fr auto auto auto; }
}

/* ── 생산성 분석 (Phase 5.4) ─────────────────────────── */
.prod-ctrl {
  display: grid; gap: 10px;
  grid-template-columns: 1fr;
  align-items: end; margin-bottom: 10px;
}
@media (min-width: 641px) {
  .prod-ctrl { grid-template-columns: 110px 150px 150px 130px 100px auto; }
}
.prod-ctrl .field { display: flex; flex-direction: column; gap: 4px; }
.prod-ctrl .field label { margin: 0; font-size: 12px; font-weight: 600; color: #374151; }
.prod-ctrl select, .prod-ctrl input[type="date"] { min-height: 38px; }

.prod-summary {
  display: grid; gap: 12px; margin-bottom: 16px;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}
.prod-card {
  background: #fff; border: 2px solid var(--c-border); border-radius: 10px;
  padding: 14px; cursor: pointer; position: relative;
  transition: transform .12s, box-shadow .12s, border-color .12s;
}
.prod-card:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,.08); }
.prod-card.active::after {
  content: '●'; position: absolute; top: 8px; right: 12px;
  color: var(--c-primary); font-size: 18px;
}
.prod-card .lbl { font-size: 13px; font-weight: 700; margin-bottom: 6px; }
.prod-card .val { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }
.prod-card .val .unit { font-size: 13px; font-weight: 600; margin-left: 4px; }
.prod-card .sub { font-size: 11px; color: var(--c-muted); margin-top: 4px; }
.prod-card.total { background: #fff; border-color: #e5e7eb; }
.prod-card.total .lbl { color: var(--c-muted); font-weight: 600; }
.prod-card.total .val { color: var(--c-primary); font-size: 26px; }
.prod-card.total.active { border-color: var(--c-primary); }
.prod-card.m-ctp1 { background: #dbeafe; color: #1e3a8a; border-color: #93c5fd; }
.prod-card.m-ctp2 { background: #d1fae5; color: #065f46; border-color: #6ee7b7; }
.prod-card.m-ctp3 { background: #fef3c7; color: #92400e; border-color: #fcd34d; }
.prod-card.m-ctp1.active { border-color: #1e3a8a; }
.prod-card.m-ctp2.active { border-color: #065f46; }
.prod-card.m-ctp3.active { border-color: #92400e; }

.chart-wrap { padding: 14px; margin-bottom: 12px; }
.chart-wrap h3 { margin: 0 0 10px; font-size: 15px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.chart-wrap h3 .active-label {
  font-size: 11px; padding: 3px 8px; border-radius: 999px;
  background: var(--c-primary); color: #fff; font-weight: 600;
}
.chart-wrap h3 .active-label.all { background: #6b7280; }
.chart-canvas-wrap { position: relative; height: 320px; }
.chart-canvas-wrap.small { height: 240px; }
.chart-2col { display: grid; gap: 12px; grid-template-columns: 1fr; margin-bottom: 12px; }
@media (min-width: 800px) { .chart-2col { grid-template-columns: 1fr 1fr; } }

.data-table-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 12px; gap: 12px; flex-wrap: wrap;
}
.data-table-header h3 { margin: 0; font-size: 15px; }
.data-table-header-left { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.data-table-header select {
  padding: 6px 12px; border: 1px solid var(--c-border); border-radius: 6px;
  font-size: 13px; min-height: 34px; width: auto;
}
.data-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.data-table th, .data-table td {
  padding: 8px 12px; border-bottom: 1px solid var(--c-border); white-space: nowrap;
}
.data-table th {
  background: #f9fafb; font-weight: 600; font-size: 12px; color: var(--c-muted); text-align: center;
}
.data-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.data-table td.period { font-weight: 600; }
.data-table tr.total-row { background: #f3f4f6; font-weight: 700; }
.data-table tr.total-row td { border-top: 2px solid var(--c-text); }

/* ── 공통 로그 테이블 ───────────────────────────────── */
.log-table {
  width: 100%; border-collapse: collapse; margin-top: 4px;
  font-size: 13px;
}
.log-table th, .log-table td {
  padding: 8px 10px; text-align: left;
  border-bottom: 1px solid var(--c-border); vertical-align: top;
}
.log-table th { background: #f9fafb; font-weight: 600; color: #374151; }
.log-table tr:last-child td { border-bottom: none; }
.log-table td b { color: var(--c-text); }

/* ── Toast + Confirm Dialog ──────────────────────────── */
.toast-root {
  position: fixed; right: 16px; top: 16px; z-index: 9000;
  display: flex; flex-direction: column; gap: 8px;
  pointer-events: none; max-width: calc(100vw - 32px);
}
.toast {
  display: flex; align-items: flex-start; gap: 8px;
  min-width: 260px; max-width: 420px;
  padding: 12px 14px; border-radius: 8px;
  background: #fff; color: var(--c-text);
  box-shadow: 0 8px 24px rgba(0,0,0,.15);
  border-left: 4px solid var(--c-border);
  pointer-events: auto;
  animation: toast-in .18s ease-out;
  font-size: 14px;
}
.toast-success { border-left-color: #16a34a; }
.toast-error   { border-left-color: #dc2626; background: #fff5f5; }
.toast-info    { border-left-color: #2563eb; }
.toast-warn    { border-left-color: #f59e0b; background: #fffbeb; }
.toast-icon {
  flex-shrink: 0; width: 22px; height: 22px;
  border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; color: #fff; font-size: 13px;
}
.toast-success .toast-icon { background: #16a34a; }
.toast-error   .toast-icon { background: #dc2626; }
.toast-info    .toast-icon { background: #2563eb; }
.toast-warn    .toast-icon { background: #f59e0b; }
.toast-msg { flex: 1; line-height: 1.4; word-break: keep-all; }
.toast-close {
  flex-shrink: 0; background: none; border: none; cursor: pointer;
  font-size: 18px; line-height: 1; color: #94a3b8; padding: 0 4px;
}
.toast-close:hover { color: var(--c-text); }
@keyframes toast-in { from { transform: translateX(40px); opacity: 0; } to { transform: none; opacity: 1; } }

.toast-overlay {
  position: fixed; inset: 0; z-index: 9100;
  background: rgba(15,23,42,.45);
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
}
.toast-dialog {
  background: #fff; border-radius: 12px; padding: 20px 22px;
  max-width: 420px; width: 100%;
  box-shadow: 0 20px 48px rgba(0,0,0,.25);
  animation: dialog-in .18s ease-out;
}
.toast-dialog h3 { margin: 0 0 10px 0; font-size: 16px; }
.toast-dialog-msg { margin: 0 0 18px 0; color: #475569; line-height: 1.5; word-break: keep-all; }
.toast-dialog-actions { display: flex; justify-content: flex-end; gap: 8px; }
.toast-dialog-actions .btn { min-height: 38px; padding: 6px 18px; }
.btn.danger { background: #dc2626; color: #fff; border-color: #dc2626; }
.btn.danger:hover { background: #b91c1c; }
@keyframes dialog-in { from { transform: scale(.96); opacity: 0; } to { transform: none; opacity: 1; } }

/* 모바일: 토스트 화면 하단 중앙 정렬 */
@media (max-width: 640px) {
  .toast-root { right: 8px; left: 8px; top: auto; bottom: 96px; max-width: none; align-items: center; }
  .toast { width: 100%; max-width: 100%; }
}

/* ── 이력 페이지 — 잘림 안내 + 더 보기 ───────────────── */
.hist-more {
  margin-top: 12px; padding: 10px 12px;
  background: #f8fafc; border: 1px solid var(--c-border); border-radius: 8px;
  display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap;
}
.hist-more b { color: var(--c-text); }
.hist-more .btn { min-height: 36px; padding: 4px 14px; }

/* ── 출력 이력 (output.js) ───────────────────────────── */
.out-ctrl {
  display: grid; gap: 10px;
  grid-template-columns: 1fr;
  align-items: end; margin-bottom: 8px;
}
@media (min-width: 641px) {
  /* 기간단위 / 시작 / 종료 / 호기 / 색상 / 구분 / 제작번호 / 조회 */
  .out-ctrl { grid-template-columns: 100px 140px 140px 130px 90px 1fr 1fr auto; }
}
.out-ctrl .field { display: flex; flex-direction: column; gap: 4px; }
.out-ctrl .field label { margin: 0; font-size: 12px; font-weight: 600; color: #374151; }
.out-ctrl select,
.out-ctrl input[type="date"],
.out-ctrl input[type="text"] { min-height: 38px; width: 100%; box-sizing: border-box; }
.out-ctrl .btn { min-height: 38px; padding: 0 18px; }

.out-result-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 10px; flex-wrap: wrap; gap: 8px;
}
.out-count { font-size: 14px; color: #374151; }
.out-count b { color: var(--c-text); font-size: 15px; }
.out-paging { display: flex; gap: 6px; }
.out-paging .btn { min-height: 32px; padding: 4px 12px; font-size: 13px; }

.out-table-wrap { overflow-x: auto; border: 1px solid var(--c-border); border-radius: 8px; }
.out-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.out-table thead th {
  background: #f9fafb; font-weight: 600; font-size: 12px; color: #6b7280;
  padding: 10px 8px; text-align: center; white-space: nowrap;
  border-bottom: 1px solid var(--c-border); letter-spacing: .02em;
}
.out-table tbody td {
  padding: 8px; border-bottom: 1px solid #f1f5f9;
  text-align: left; white-space: nowrap; vertical-align: middle;
}
.out-table tbody tr:last-child td { border-bottom: none; }
.out-table tbody tr:hover { background: #f8fafc; }
.out-table td.ctr  { text-align: center; }
.out-table td.num  { text-align: center; font-variant-numeric: tabular-nums; font-weight: 600; }
.out-table td.when { color: #475569; font-variant-numeric: tabular-nums; }
.out-table td.file { font-size: 11px; color: #94a3b8; max-width: 320px; overflow: hidden; text-overflow: ellipsis; }
.out-table th.file-col { text-align: left; }

/* 호기 배지 */
.m-badge {
  display: inline-block; padding: 2px 8px; border-radius: 4px;
  font-size: 11px; font-weight: 700; color: #fff;
  letter-spacing: .02em;
}
.m-badge.m-ctp1 { background: #3b82f6; }
.m-badge.m-ctp2 { background: #10b981; }
.m-badge.m-ctp3 { background: #f59e0b; }

/* 출력 페이지는 생산 페이지의 .prod-summary / .prod-card 스타일 재사용 */

/* 색상 (CMYK) 배지 */
.ink-badge {
  display: inline-block; min-width: 26px; padding: 2px 6px; border-radius: 4px;
  font-size: 11px; font-weight: 700; color: #fff; text-align: center;
}

/* ── 교체경고 버튼 (대시보드, Phase 2.4) ─────────────── */
.btn.alert-warning {
  background: #dc2626; color: #fff; border-color: #dc2626;
  font-weight: 600;
  animation: alert-pulse 1.6s ease-in-out infinite;
}
.btn.alert-warning:hover { background: #b91c1c; border-color: #b91c1c; }
@keyframes alert-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, .55); }
  50%      { box-shadow: 0 0 0 8px rgba(220, 38, 38, 0);   }
}

/* ── 강제 인지 모달 (Phase 2.4) ──────────────────────── */
.ack-locked { overflow: hidden; }
.ack-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(15, 23, 42, .6); backdrop-filter: blur(2px);
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
  padding-bottom: max(16px, env(safe-area-inset-bottom));
  animation: ack-fade-in .15s ease-out;
}
@keyframes ack-fade-in { from { opacity: 0; } to { opacity: 1; } }

.ack-modal {
  width: 100%; max-width: 520px; background: #fff; border-radius: 14px;
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
  display: flex; flex-direction: column; overflow: hidden;
  animation: ack-pop-in .18s cubic-bezier(.2,.9,.4,1.2);
}
@keyframes ack-pop-in { from { transform: scale(.94); } to { transform: scale(1); } }

.ack-header {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 18px; border-bottom: 1px solid var(--c-border);
}
.ack-icon       { font-size: 28px; line-height: 1; }
.ack-titles     { flex: 1; min-width: 0; }
.ack-kind       { font-size: 16px; font-weight: 700; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ack-processor  { font-size: 15px; font-weight: 600; color: var(--c-primary); margin-top: 4px; }
.ack-counter    { font-size: 12px; color: var(--c-muted); font-variant-numeric: tabular-nums; }

.ack-sev-pill   { font-size: 11px; padding: 2px 8px; border-radius: 999px; font-weight: 600; }
.ack-severity-imminent .ack-sev-pill { background: #fef3c7; color: #92400e; }
.ack-severity-due      .ack-sev-pill { background: #fed7aa; color: #9a3412; }
.ack-severity-overdue  .ack-sev-pill { background: #fee2e2; color: #991b1b; }

/* 헤더 좌측 색띠 */
.ack-modal.ack-severity-imminent .ack-header { border-left: 6px solid #f59e0b; }
.ack-modal.ack-severity-due      .ack-header { border-left: 6px solid #ea580c; }
.ack-modal.ack-severity-overdue  .ack-header { border-left: 6px solid #dc2626; }

.ack-body       { padding: 18px; }
.ack-detail     { font-size: 14px; line-height: 1.55; color: var(--c-text); }
.ack-meta       { margin-top: 10px; font-size: 12px; color: var(--c-muted); }

.ack-footer {
  display: flex; gap: 8px; padding: 14px 18px; border-top: 1px solid var(--c-border);
  background: #f9fafb;
}
.ack-footer .btn { flex: 1; min-width: 0; }

/* ── 반응형: 데스크톱 (≥641px) ────────────────────────── */
@media (min-width: 641px) {
  .topbar      { padding: 14px 24px; }
  .nav {
    position: sticky; top: 0; bottom: auto;
    border-top: none; border-bottom: 1px solid var(--c-border);
    justify-content: flex-start; padding: 0 16px;
  }
  .nav a {
    flex: 0 0 auto; min-height: 48px;
    flex-direction: row; gap: 8px;
    padding: 0 14px; font-size: 14px;
  }
  .nav a > :first-child { font-size: 18px; }
  .view {
    max-width: 1080px; margin: 24px auto 32px;
    padding: 0 20px;
  }
  .card { padding: 22px 24px; border-radius: 12px; margin-bottom: 16px; }
  .cards { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
}