/* Shared by delivery confirmations and order product photos. */
.file-picker { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.file-picker-backdrop { position: absolute; inset: 0; background: #0008; }
.file-picker-dialog { position: relative; width: 100%; max-width: 42rem; max-height: 90vh; overflow-y: auto; }
.file-picker-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: .75rem; }
.file-picker-subtitle { font-size: .875rem; color: #6b7280; margin-bottom: .75rem; }
.file-picker-toolbar { margin-bottom: .75rem; }
.file-picker-search { display: flex; gap: .5rem; margin-bottom: .25rem; }
.file-picker-form { display: flex; flex-direction: column; gap: .25rem; }
.file-picker-selection { font-size: .875rem; color: #4b5563; overflow-wrap: anywhere; }
.file-picker-selection:empty, .file-picker [hidden] { display: none; }
.file-picker-list { max-height: 52vh; overflow: auto; }
.file-picker-table { width: 100%; font-size: .875rem; }
.file-picker-table thead { position: sticky; top: 0; background: #fff; color: #6b7280; text-align: left; z-index: 1; }
.file-picker-table th, .file-picker-table td { padding: .5rem; }
.file-picker-table thead tr { border-bottom: 1px solid #e5e7eb; }
.file-picker-table tbody tr + tr { border-top: 1px solid #e5e7eb; }
.file-picker-table .file-picker-empty { padding: 1.5rem .5rem; text-align: center; color: #6b7280; }
.file-picker-row { cursor: pointer; }
.file-picker-row:hover { background: #fffbeb; }
.file-picker-row:has(input:checked) { background: #fef3c7; }
.file-picker-actions { display: flex; justify-content: flex-end; gap: .5rem; padding-top: .75rem; }
.file-picker-preview { position: fixed; z-index: 70; pointer-events: none; width: min(420px, calc(100vw - 16px)); height: min(520px, calc(100vh - 16px)); padding: .5rem; border: 1px solid #d1d5db; border-radius: .5rem; background: #fff; box-shadow: 0 8px 30px #0005; }
.file-picker-preview { display: flex; flex-direction: column; gap: .375rem; }
.file-picker-preview-title { flex: none; font-size: .875rem; font-weight: 600; text-align: center; overflow-wrap: anywhere; }
.file-picker-preview img, .file-picker-preview iframe { width: 100%; height: 100%; flex: 1; min-height: 0; object-fit: contain; border: 0; }
.file-picker-preview-message { height: 100%; display: flex; align-items: center; justify-content: center; overflow-wrap: anywhere; padding: 1rem; }
.dark .file-picker-subtitle, .dark .file-picker-table thead, .dark .file-picker-empty { color: #9ca3af; }
.dark .file-picker-selection { color: #d1d5db; }
.dark .file-picker-table thead { background: #1f2937; }
.dark .file-picker-table tr { border-color: #374151; }
.dark .file-picker-row:hover { background: #37415199; }
.dark .file-picker-row:has(input:checked) { background: #78350f; }
.dark .file-picker-preview { background: #1f2937; border-color: #4b5563; }
@media (max-width: 639px) { .file-picker-preview { display: none; } }

/* 품목 사진 모달: '파일 선택' 아래 구분선 + ERP에 있는 품목·수주 썸네일 그리드 (2026-10-20). 타일 클릭 = 선택, 호버 = 큰 미리보기(.file-picker-preview). */
.file-picker-divider { border: 0; border-top: 1px solid #e5e7eb; margin: .75rem 0 .5rem; }
.photo-grid-heading { font-size: .8125rem; font-weight: 600; color: #4b5563; margin: .5rem 0 .375rem; }
.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr)); gap: .5rem; }
.photo-grid-tile { position: relative; display: flex; flex-direction: column; align-items: center; gap: .25rem; padding: .375rem; border: 2px solid transparent; border-radius: .5rem; background: #f9fafb; cursor: pointer; }
.photo-grid-tile img { width: 4rem; height: 4rem; object-fit: cover; border-radius: .25rem; display: block; }
.photo-grid-caption { width: 100%; font-size: .6875rem; line-height: 1.2; color: #4b5563; text-align: center; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
.photo-grid-tile:hover, .photo-grid-tile:focus-visible { background: #fffbeb; outline: none; }
.photo-grid-tile:has(input:checked) { border-color: #f59e0b; background: #fef3c7; }
.dark .file-picker-divider { border-color: #374151; }
.dark .photo-grid-heading, .dark .photo-grid-caption { color: #d1d5db; }
.dark .photo-grid-tile { background: #111827; }
.dark .photo-grid-tile:hover, .dark .photo-grid-tile:focus-visible { background: #37415199; }
.dark .photo-grid-tile:has(input:checked) { border-color: #f59e0b; background: #78350f; }

/* 품목 사진 모달 2단계 슬라이드: 그리드 ↔ 썸네일 편집 (2026-10-20). 안 보이는 단계는 JS가 전환 뒤 hidden 처리. */
.photo-steps { display: flex; align-items: flex-start; overflow: hidden; transition: height .25s ease; }
.photo-step { flex: 0 0 100%; min-width: 0; transition: transform .25s ease; }
.file-picker.is-anchored { align-items: flex-start; }
.file-picker.is-anchored .file-picker-dialog { transition: margin-top .25s ease; }
.photo-steps.is-crop .photo-step { transform: translateX(-100%); }
.photo-step[hidden] { display: none; }
.photo-steps.is-still, .photo-steps.is-still .photo-step { transition: none; }
.photo-steps.is-sliding { pointer-events: none; }
.photo-step-back { display: flex; align-items: center; gap: .5rem; margin-top: .5rem; }
@media (prefers-reduced-motion: reduce) { .photo-steps, .photo-step, .file-picker.is-anchored .file-picker-dialog { transition: none; } }

/* 제품 사진만: 업로드/기존 수주 사진의 정사각형 썸네일 편집. */
.photo-crop-editor { display: flex; align-items: center; gap: 1rem; margin-top: .75rem; padding-top: .75rem; border-top: 1px solid #e5e7eb; }
.photo-crop-editor[hidden] { display: none; }
.photo-crop-frame { position: relative; flex: 0 0 220px; width: 220px; aspect-ratio: 1; overflow: hidden; background: #000; border-radius: .25rem; cursor: grab; touch-action: none; user-select: none; }
.photo-crop-frame:active { cursor: grabbing; }
.photo-crop-frame:focus-visible { outline: 2px solid #f59e0b; outline-offset: 3px; }
.photo-crop-frame img { position: absolute; max-width: none; pointer-events: none; }
.photo-crop-controls { display: flex; flex: 1; min-width: 0; flex-direction: column; align-items: flex-start; gap: .5rem; }
.photo-crop-controls input[type=range] { width: 100%; min-height: 28px; accent-color: #f59e0b; }
.dark .photo-crop-editor { border-color: #374151; }
@media (max-width: 479px) {
  .photo-crop-editor { flex-direction: column; }
  .photo-crop-frame { flex-basis: auto; width: min(220px, 100%); }
  .photo-crop-controls { width: 100%; }
}