/* 보드 검수(board-inspection.js): 외관·결과 표, 검사 탭, 검사 블록. Jetson과 Raspberry Pi가 함께 쓴다. */

/* 가운데 목록: 검사 탭. 버튼을 줄이지 않고 목록을 스크롤한다. */
#parts:has(.board-part) {
  overflow-y: auto;
  scrollbar-width: thin;
}
.part-button.board-part {
  height: auto;
  min-height: 44px;
  flex-shrink: 0;
}
.part-button.review .status-circle {
  background: #fff4dc;
  color: #b7832b;
  border: 0;
}
.review-text {
  color: #b7832b;
}
.report-line .review-text {
  color: #b7832b;
}
.report-line span small {
  color: #a6a8b5;
  font-weight: 400;
}

/* 외관 일괄·구성품 결과 표(일반 구성품 표 모양을 쓴다) */
.board-warning {
  margin: 0;
  padding: 10px 14px;
  border: 1px solid #f0c27a;
  border-radius: 10px;
  background: #fff7e8;
  color: #8a5a12;
  font-size: 12px;
  line-height: 1.6;
}
.board-warning b {
  color: #7a4500;
}
.board-table-view .inline-photo-add,
.board-table-view .row-photo {
  margin-top: 4px;
}
.row-photo {
  display: flex;
  align-items: center;
  gap: 8px;
}
.row-photo img {
  width: 48px;
  height: 36px;
  object-fit: cover;
  border-radius: 5px;
  border: 1px solid #e5e7ef;
}
.check-chip {
  display: inline-block;
  margin: 2px 4px 2px 0;
  padding: 2px 7px;
  border-radius: 999px;
  background: #f1f2f6;
  color: #6d7183;
  font-size: 10px;
  white-space: nowrap;
}
.check-chip.pass {
  background: #e5f5ef;
  color: #3c8f73;
}
.check-chip.fail,
.check-chip.failing {
  background: #ffebe9;
  color: #c7655b;
}
.check-chip.not_run {
  background: #fff4dc;
  color: #a7772b;
}
.cell-note {
  display: block;
  color: #8b8fa0;
  font-size: 10px;
}
.result-cell b {
  font-size: 12px;
  white-space: nowrap;
}
.result-cell .good-text {
  color: #3c8f73;
}
.result-cell .bad-text {
  color: #c7655b;
}

/* 안내 카드의 구성품 사진은 그림 영역 높이에 맞춘다. */
.guide-card .device-illustration:has(.item-photo) {
  overflow: hidden;
}
.guide-card .device-illustration .item-photo {
  display: block;
  width: 100%;
  max-width: 160px;
  height: 100%;
  max-height: 150px;
  margin: 0 auto;
  object-fit: contain;
  border-radius: 8px;
}

/* 보드 상태 칸: 연결 상태와 자동 결과. 개발용 버튼은 WebSerial을 붙이면 없앤다. */
.board-status {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex-shrink: 0;
  margin: 0 0 10px;
  padding: 6px 12px;
  border: 1px solid #e5e7ef;
  border-radius: 10px;
  background: white;
  font-size: 11px;
}
.board-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  min-height: 22px;
}
.board-row.auto {
  padding-top: 4px;
  border-top: 1px solid #f0f1f5;
}
.board-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #c4c7d2;
}
.board-dot.on {
  background: #3fae8b;
}
.board-row .auto-label {
  color: #6d7183;
}
.board-row .good-text {
  color: #3c8f73;
}
.board-row .bad-text {
  color: #c7655b;
}
.board-meta {
  color: #9093a3;
}
.dev-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}
.dev-note {
  color: #b18a3e;
  font-size: 9px;
}
.dev-btn {
  padding: 3px 8px;
  border: 1px dashed #d9b46a;
  border-radius: 6px;
  background: #fffaf0;
  color: #8a6420;
  font: inherit;
  font-size: 10px;
  cursor: pointer;
}
.dev-btn:hover {
  background: #fff1d6;
}

/* 검사 카드 */
/* 들여쓰기는 .reason-area(선택지와 같은 들여쓰기)를 함께 붙여 맞춘다. */
.blocked-note {
  margin: 0;
  padding: 12px 14px;
  border: 1px dashed #d6d8e2;
  border-radius: 10px;
  color: #7d8193;
  font-size: 12px;
  line-height: 1.6;
}
.temp-note {
  display: inline-block;
  margin: 6px 0 0;
  padding: 3px 8px;
  border-radius: 6px;
  background: #fff4dc;
  color: #93682a;
  font-size: 10px;
  line-height: 1.5;
}
.live-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 120px;
  border: 1px dashed #c9ccd8;
  border-radius: 10px;
  background: #f7f8fb;
  color: #7d8193;
  font-size: 12px;
}
.live-box small {
  color: #a6a8b5;
  font-size: 10px;
}
.prep-steps {
  margin: 0;
  padding-left: 20px;
  font-size: 13px;
  line-height: 1.9;
  color: #3d4152;
}
.prep-steps + .board-warning,
.board-warning + .prep-steps {
  margin-top: 10px;
}
.fail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}
.fail-actions .button {
  min-width: 120px;
}
.recorded-note {
  margin: 0;
  font-size: 12px;
  color: #b0776f;
}
.inline-photo-add {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  font-size: 11px;
  color: var(--purple);
  cursor: pointer;
}
.inline-photo-add input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.inline-photo-add:focus-within {
  outline: 2px solid var(--purple);
  outline-offset: 2px;
}
.inline-photo-add small {
  color: #a6a8b5;
}
.inline-photo {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
}
.inline-photo img {
  width: 64px;
  height: 48px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid #e5e7ef;
}

/* 화면 고정형 배치(presentation.css)의 검사 열은 행 높이가 정해진 grid다.
   보드 검수는 안내, 보드 상태 칸, 검사 카드를 쓰므로 보이는 칸에 맞춰 행을 다시 정한다. */
.checks-column:has(> .board-status:not([hidden])) {
  grid-template-rows: auto auto minmax(0, 1fr);
}
.checks-column:has(> .board-status[hidden]) {
  grid-template-rows: auto minmax(0, 1fr);
}
/* 메모·사진 칸이 열려 카드가 넘치면 카드 안에서 스크롤한다. */
.checks-column .check-card.board-card {
  overflow-y: auto;
  justify-content: safe center;
}
.check-card.board-card > * {
  flex-shrink: 0;
}
.board-table-view .kit-table thead th {
  white-space: nowrap;
}

/* 검사 탭: 묶인 검사를 위에서부터 블록으로 보여 준다(2.2.3절). */
.checks-column .check-card.board-tab {
  justify-content: flex-start;
  gap: 10px;
  padding: 16px 18px;
}
.board-run {
  margin: 0;
}
.bblock {
  padding: 12px 14px;
  border: 1px solid #e5e7ef;
  border-radius: 10px;
  background: white;
}
.bblock.active {
  border-color: var(--purple);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--purple) 12%, transparent);
}
.bblock.fail {
  border-color: #efb3ab;
  background: #fffaf9;
}
.bblock.disabled {
  opacity: 0.6;
}
.bblock-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}
.bblock-num {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #eef0f6;
  color: #6d7183;
  font-size: 10px;
  font-weight: 700;
}
.bstatus {
  margin-left: auto;
  padding: 2px 8px;
  border-radius: 999px;
  background: #f1f2f6;
  color: #7d8193;
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
}
.bstatus.pass {
  background: #e5f5ef;
  color: #3c8f73;
}
.bstatus.fail {
  background: #ffebe9;
  color: #c7655b;
}
.bstatus.not_run {
  background: #fff4dc;
  color: #a7772b;
}
.bstatus.active {
  background: color-mix(in srgb, var(--purple) 12%, white);
  color: var(--purple);
}
.bblock-note {
  margin: 6px 0 0 28px;
  color: #7d8193;
  font-size: 11px;
  line-height: 1.6;
}
.bblock-q {
  margin: 8px 0 0 28px;
  font-size: 14px;
  font-weight: 700;
  color: #252837;
}
.bblock-q.muted {
  color: #9093a3;
}
.bblock-q .temp-note {
  margin: 0 0 0 6px;
  vertical-align: middle;
  font-weight: 400;
}
.check-card .choices.bblock-choices {
  margin: 8px 0 0 28px;
}
.check-card .bblock-choices .choice {
  height: 40px;
  padding: 8px 12px;
  font-size: 13px;
}
.bblock .live-box {
  height: 96px;
  margin: 8px 0 0 28px;
}
.bblock-fail {
  margin: 8px 0 0 28px;
  font-size: 11px;
  color: #b0776f;
}
.bblock-fail p {
  margin: 0;
}
.bblock-fail label {
  display: block;
  margin-bottom: 4px;
  font-size: 11px;
}
.bblock-fail textarea {
  width: 100%;
  min-height: 56px;
  padding: 8px 10px;
  border: 1px solid #e3c5c0;
  border-radius: 8px;
  font: inherit;
  font-size: 12px;
  resize: vertical;
}
.bblock-fail .fail-actions {
  margin-top: 8px;
}
.bblock .fail-actions {
  margin-left: 28px;
}
.bblock-fail .fail-actions,
.bblock .prep-box + .fail-actions {
  margin-left: 0;
}
.bblock .prep-box + .fail-actions {
  margin: 8px 0 0 28px;
}
.bblock > .dev-actions {
  margin: 6px 0 0 28px;
}
.prep-box {
  margin: 6px 0 0 28px;
  font-size: 11px;
  color: #6d7183;
}
.prep-box summary {
  cursor: pointer;
}
.prep-box .prep-steps {
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.8;
}
.stage-lines {
  margin: 6px 0 0 28px;
  padding: 0;
  list-style: none;
  font-size: 11px;
}
.stage-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  padding: 4px 0;
  border-top: 1px solid #f0f1f5;
}
.stage-line:first-child {
  border-top: 0;
}
.stage-name {
  min-width: 110px;
  color: #6d7183;
}
.stage-line .good-text {
  color: #3c8f73;
}
.stage-line .bad-text {
  color: #c7655b;
}
.active-text {
  color: var(--purple);
}
.wait-text {
  color: #9093a3;
}
@media (max-width: 760px) {
  .bblock-note,
  .bblock-q,
  .check-card .choices.bblock-choices,
  .bblock .live-box,
  .bblock-fail,
  .prep-box,
  .stage-lines,
  .bblock > .dev-actions,
  .bblock .prep-box + .fail-actions {
    margin-left: 0;
  }
}
/* 탭에 묶인 구성품이 많으면(구동 탭 6개) 안내 카드가 넘치므로 카드 안에서 스크롤한다. */
.inspection-layout:has(.board-card) .guide-card {
  overflow-y: auto;
  scrollbar-width: thin;
}
.inspection-layout:has(.board-card) .guide-card > * {
  flex-shrink: 0;
}
.inspection-layout:has(.board-card) .guide-card .device-illustration {
  flex-shrink: 1;
}

/* 마무리 탭 잠금: 보드 검사가 모두 끝나야 시작할 수 있다(2.3.3절). */
.board-lock {
  margin: 0;
  padding: 10px 14px;
  border: 1px dashed #c9ccd8;
  border-radius: 10px;
  background: #f7f8fb;
  color: #5d6173;
  font-size: 12px;
  line-height: 1.6;
}

/* 보드 연결(3.4절): 연결 버튼, 안내, 출력 정리 확인 */
.board-actions {
  margin-left: auto;
  display: flex;
  gap: 6px;
}
.board-actions .button {
  min-height: 30px;
  padding: 4px 14px;
  font-size: 12px;
}
.board-notice {
  margin: 4px 0 0;
  font-size: 11px;
  line-height: 1.5;
  color: #6d7183;
}
.board-notice.bad {
  color: #c7655b;
}
.board-cleanup {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  padding: 8px 10px;
  border: 1px solid #f0c27a;
  border-radius: 8px;
  background: #fff7e8;
  color: #7a4500;
  font-size: 12px;
}
.board-cleanup .button {
  min-height: 28px;
  padding: 4px 12px;
  font-size: 12px;
}
.button.danger {
  color: #c7655b;
  border-color: #efb3ab;
}
/* 진행 중인 검사의 실시간 값과 카메라 영상 */
.live-values {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 4px 12px;
  margin: 8px 0 0 28px;
  padding: 8px 12px;
  border-radius: 8px;
  background: #f7f8fb;
  font-size: 12px;
}
.live-values dt {
  color: #7d8193;
}
.live-values dd {
  margin: 0;
  font-weight: 700;
  color: #252837;
  font-variant-numeric: tabular-nums;
}
.live-video {
  margin: 8px 0 0 28px;
}
.live-video img {
  display: block;
  max-width: 100%;
  max-height: 220px;
  border-radius: 8px;
  background: #111;
}
.bblock .fail-actions small.bblock-note {
  margin: 0;
  align-self: center;
}
/* 자동 판정 진행 표시(inspect.accepted의 automatic_seconds) */
.auto-progress {
  height: 6px;
  margin: 10px 0 0 28px;
  border-radius: 999px;
  background: var(--tint, #edf4ff);
  overflow: hidden;
}
.auto-progress-bar {
  display: block;
  height: 100%;
  width: 100%;
  border-radius: inherit;
  background: var(--accent, #0a4da5);
  transform-origin: left center;
  animation: auto-fill linear forwards;
}
.auto-progress.over .auto-progress-bar {
  animation: auto-wait 1.2s ease-in-out infinite alternate;
}
.auto-progress-label {
  margin: 4px 0 0 28px;
  font-size: 12px;
  color: #7d8193;
}
@keyframes auto-fill {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}
@keyframes auto-wait {
  from {
    opacity: 1;
  }
  to {
    opacity: 0.45;
  }
}
@media (prefers-reduced-motion: reduce) {
  .auto-progress.over .auto-progress-bar {
    animation: none;
  }
}
@media (max-width: 760px) {
  .live-values,
  .live-video,
  .auto-progress,
  .auto-progress-label {
    margin-left: 0;
  }
}

/* 개발용 모의 보드 조작 패널(?mock=1) */
.mock-panel {
  position: fixed;
  left: 12px;
  bottom: 12px;
  z-index: 50;
  width: 270px;
  padding: 8px 10px;
  border: 1px dashed #d9b46a;
  border-radius: 10px;
  background: #fffaf0;
  box-shadow: 0 6px 20px rgb(0 0 0 / 12%);
  color: #6b4d16;
  font-size: 11px;
}
.mock-panel summary {
  cursor: pointer;
  font-weight: 700;
}
.mock-panel summary small {
  font-weight: 400;
}
.mock-panel .mock-note {
  margin: 4px 0;
  color: #a1803f;
}
.mock-panel .mock-row {
  display: flex;
  gap: 4px;
  margin: 4px 0;
}
.mock-panel select {
  flex: 1;
  min-width: 0;
  font: inherit;
}
.mock-panel button {
  padding: 2px 6px;
  border: 1px solid #d9b46a;
  border-radius: 5px;
  background: white;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.mock-panel label {
  display: block;
  margin: 2px 0;
}
/* 접어 두면 작은 표시만 남긴다. 좁은 화면에서는 오른쪽 위에 두어 아래 버튼을 가리지 않는다. */
.mock-panel:not(:has(details[open])) {
  width: auto;
  padding: 4px 8px;
}
@media (max-width: 760px) {
  .mock-panel {
    top: 8px;
    right: 8px;
    bottom: auto;
    left: auto;
    max-width: calc(100vw - 16px);
  }
}

/* 시작 화면: 팀코드에서 읽은 지역·반·팀 */
.team-hint {
  display: block;
  margin-top: 6px;
  color: #8b8fa0;
  font-size: 11px;
}
.team-hint.bad {
  color: #c7655b;
}

/* 초기화(3.2절): 보드 상태 칸의 "이 보드 다시 검수", 확인 대화상자 */
.board-actions {
  align-items: center;
}
.board-reset {
  font-size: 12px;
  color: #7d8193;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.board-reset[aria-disabled='true'] {
  opacity: 0.45;
  cursor: not-allowed;
}
.reset-dialog {
  max-width: 520px;
}
.reset-save {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
}
.reset-save .button {
  min-height: 30px;
  padding: 4px 14px;
  font-size: 12px;
}
.reset-keep {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-top: 16px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.reset-keep[hidden] {
  display: none;
}
.reset-keep input {
  margin-top: 3px;
  accent-color: var(--accent);
}
.reset-keep small {
  display: block;
  margin-top: 2px;
  font-weight: 400;
  color: #7d8193;
}
/* 상단 바: 검수자 정보 옆 [수정] [새 검수] */
.top-actions .header-session {
  grid-template-columns: minmax(0, 1fr) auto auto;
}
.top-actions .header-session #newInspection {
  grid-column: 3;
}