/* 사진/영상 화면 모양: 왼쪽 목록(날짜별 작은 그림), 오른쪽 도구 줄과 분할 보기 */
.photo { display: grid; grid-template-columns: 252px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); gap: 6px; }
.photo-list > .panel-body { display: flex; flex-direction: column; overflow: hidden; }
.photo-left { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.photo-filter { flex: 0 0 auto; display: flex; flex-direction: column; gap: 3px; padding: 4px 6px; border-bottom: 1px solid var(--line); background: #f4f6f9; }
.photo-filter label.row { gap: 3px; cursor: pointer; }
.photo-thumbs { flex: 1 1 auto; min-height: 0; overflow-y: auto; background: #2b313b; padding: 0 4px 4px; }
.photo-empty { color: #c5cdda; padding: 14px 8px; line-height: 1.6; }
.photo-date { color: #e8edf5; font-size: 11px; padding: 4px 2px 2px; position: sticky; top: 0; background: #2b313b; z-index: 1; }
.photo-date-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.photo-thumb { position: relative; height: 82px; border: 1px solid #5d6b82; background: #11151b; padding: 0; cursor: pointer; overflow: hidden; color: #dfe5ee; font-size: 11px; }
.photo-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-thumb span { position: absolute; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.62); padding: 0 3px; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.photo-thumb.on { outline: 2px solid #ffb347; outline-offset: -2px; }
.photo-pdf { height: 100%; display: flex; align-items: center; justify-content: center; font-weight: 700; color: #f0b7b0; background: #3a2526; }
.photo-view { display: flex; flex-direction: column; min-height: 0; min-width: 0; border: 1px solid var(--line); background: #fff; }
.photo-bar { flex: 0 0 auto; display: flex; flex-wrap: wrap; gap: 3px; align-items: center; padding: 3px 6px; min-height: 26px; background: var(--head); border-bottom: 1px solid var(--line); }
.photo-sep { width: 1px; height: 18px; background: var(--line); margin: 0 3px; }
.photo-range { width: 84px; height: 20px; margin: 0; }
.photo-grid { flex: 1 1 auto; min-height: 0; display: grid; gap: 2px; background: #3b424e; padding: 2px; }
.photo-cell { position: relative; overflow: hidden; background: #0d1014; display: flex; align-items: center; justify-content: center; border: 1px solid #0d1014; touch-action: none; cursor: grab; min-width: 0; min-height: 0; }
.photo-cell.on { border-color: #ffb347; }
.photo-cell.drop { border-color: #6fb1ff; background: #16202c; }
.photo-cell-empty { color: #8f99a9; cursor: default; padding: 0 12px; text-align: center; }
.photo-img { max-width: 100%; max-height: 100%; transform-origin: center center; user-select: none; -webkit-user-drag: none; pointer-events: none; }
.photo-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #fff; }
.photo-label { position: absolute; left: 6px; top: 4px; color: #f1f4f9; font-size: 11px; line-height: 1.45; background: rgba(0, 0, 0, 0.45); padding: 1px 6px; pointer-events: none; max-width: 70%; }
.photo-nav { position: absolute; left: 50%; bottom: 6px; transform: translateX(-50%); display: flex; gap: 6px; align-items: center; color: #f1f4f9; background: rgba(0, 0, 0, 0.5); padding: 2px 6px; }
.photo-hint { flex: 0 0 auto; padding: 2px 6px; font-size: 11px; color: var(--muted); background: #f4f6f9; border-top: 1px solid var(--line-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.photo-drop { border: 1px dashed var(--btn-line); background: #f6f8fb; padding: 18px 12px; text-align: center; color: #3a4352; cursor: pointer; }
.photo-drop.over { background: var(--blue-soft); border-color: var(--blue); }
.photo-up-list { max-height: 170px; overflow-y: auto; }
/* 사진의 원래 크기가 화면 틀의 높이 계산에 번지지 않게 한다(번지면 맨 위 제목 줄이 눌린다) */
.photo { contain: size; }