/* -------------------------------------------------------------
   photo-manage.css
   - 사진 관리(삭제/이동/썸네일) 페이지 전용 스타일
   - gallery.css / upload.css / site.css 와 톤을 맞춰 구성
-------------------------------------------------------------- */

/* 전체 레이아웃 보정 */
.photo-manage-main {
    padding: 20px 0 36px 0;
}

.photo-manage-wrap {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* -------------------------------------------------------------
   1) 상단 카드 (설명 + 필터 + 메시지)
-------------------------------------------------------------- */

.manage-header-card {
    margin-top: 6px;
    padding: 12px 16px !important;
}

/* 결과 메시지 박스 */
.manage-messages {
    margin-top: 10px;
    border-radius: 10px;
    padding: 8px 10px;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    max-height: 210px;
    overflow-y: auto;
}

.manage-msg {
    font-size: 12.5px;
    line-height: 1.4;
    padding: 4px 6px;
    border-radius: 6px;
    margin-bottom: 4px;
}

.manage-msg.success {
    background: #ecfdf5;
    border: 1px solid #6ee7b7;
    color: #166534;
}

.manage-msg.error {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #b91c1c;
}

/* 필터 폼 */
.manage-filter-form {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 6px;
    border-top: 1px dashed #e5e7eb;
}

.manage-filter-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.manage-filter-label {
    font-size: 13px;
    font-weight: 600;
    color: #4b5563;
    min-width: 70px;
}

.manage-filter-select {
    font-size: 13px;
    padding: 5px 9px;
    border-radius: 8px;
    border: 1px solid #d1d5db;
    background: #ffffff;
    min-width: 150px;
}

.manage-filter-select:focus {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.25);
}

/* -------------------------------------------------------------
   2) 사진 카드 (목록 + 액션)
-------------------------------------------------------------- */

.manage-photos-card {
    padding: 10px 12px !important;
}

/* 빈 상태 텍스트 */
.manage-empty-text {
    font-size: 13px;
    color: #6b7280;
    margin: 8px 2px 14px 2px;
}

/* 상단 툴바 (선택 개수 + 전체 작업 버튼) */
.manage-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid #e5e7eb;
}

.manage-selected-info {
    font-size: 13px;
    color: #4b5563;
}

.manage-selected-info #selectedCount {
    font-weight: 700;
    color: #1d4ed8;
}

.manage-toolbar-actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

/* 그리드: gallery.css 의 .gallery-grid를 기반으로 확장 */
.manage-grid {
    /* gallery.css 의 grid 정의를 그대로 사용하면서 spacing 보정 */
    gap: 10px;
}

/* 각 사진 카드 (gallery-item 에 추가 스타일) */
.manage-item {
    position: relative;
}

/* 체크박스 래퍼 */
.manage-checkbox-wrap {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 5;
}

/* 실제 체크박스 */
.manage-checkbox {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

/* 꾸민 표시용 (필요 시 디자인 확장 가능) */
.manage-checkbox-indicator {
    display: none; /* 기본 체크박스 사용, 커스텀 필요시 여기 구현 */
}

/* 파일명/시간 캡션 */
.manage-caption {
    padding: 6px 8px 7px 8px;
    border-top: 1px solid rgba(15,23,42,0.15);
    background: #0f172a;
}

.manage-caption-name {
    font-size: 12px;
    color: #e5e7eb;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.manage-caption-time {
    font-size: 11px;
    color: #9ca3af;
    margin-top: 1px;
}

/* -------------------------------------------------------------
   3) 하단 액션 영역 (이동 / 삭제)
-------------------------------------------------------------- */

.manage-actions-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 10px;
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid #e5e7eb;
    flex-wrap: wrap;
}

/* 이동 그룹 */
.manage-move-group {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.manage-move-label {
    font-size: 13px;
    color: #4b5563;
    font-weight: 500;
}

.manage-move-select {
    font-size: 13px;
    padding: 5px 9px;
    border-radius: 8px;
    border: 1px solid #d1d5db;
    background: #ffffff;
    min-width: 120px;
}

.manage-move-select:focus {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 2px rgba(37,99,235,0.25);
}

/* 삭제 그룹 */
.manage-delete-group {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

/* -------------------------------------------------------------
   4) 버튼 스타일 (upload.css 와 톤 맞추기)
-------------------------------------------------------------- */

.upload-btn {
    font-size: 13px;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid transparent;
    cursor: pointer;
    background: #1d4ed8;
    color: #f9fafb;
    transition: background 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.upload-btn:hover {
    background: #2563eb;
    box-shadow: 0 4px 10px rgba(37, 99, 235, 0.35);
}

/* 연한 서브 버튼 */
.subtle-btn {
    background: #f3f4f6;
    color: #111827;
    border-color: #d1d5db;
}

.subtle-btn:hover {
    background: #e5e7eb;
    box-shadow: 0 2px 6px rgba(148,163,184,0.35);
}

/* 세컨더리 (이동) 버튼 */
.secondary-btn {
    background: #0f172a;
    color: #e5e7eb;
    border-color: #111827;
}

.secondary-btn:hover {
    background: #111827;
    box-shadow: 0 3px 8px rgba(15,23,42,0.45);
}

/* 삭제(위험) 버튼 */
.danger-btn {
    background: #dc2626;
    color: #fef2f2;
    border-color: #dc2626;
}

.danger-btn:hover {
    background: #b91c1c;
    border-color: #b91c1c;
    box-shadow: 0 4px 10px rgba(220,38,38,0.5);
}

/* 연도 전체 삭제용 – 윤곽선만 붉은색 */
.danger-outline-btn {
    background: #ffffff;
    color: #b91c1c;
    border-color: #fca5a5;
}

.danger-outline-btn:hover {
    background: #fee2e2;
    border-color: #f97373;
}

/* 비활성 버튼 공통 */
.upload-btn:disabled {
    background: #9ca3af !important;
    border-color: #9ca3af !important;
    color: #f3f4f6 !important;
    cursor: not-allowed;
    box-shadow: none !important;
}

/* -------------------------------------------------------------
   5) 반응형 보정
-------------------------------------------------------------- */

@media (max-width: 768px) {
    .manage-toolbar {
        flex-direction: column;
        align-items: flex-start;
    }

    .manage-actions-row {
        flex-direction: column;
        align-items: stretch;
    }

    .manage-move-group,
    .manage-delete-group {
        justify-content: flex-start;
    }

    .manage-move-select,
    .manage-filter-select {
        min-width: 140px;
    }
}

@media (max-width: 480px) {
    .manage-grid {
        gap: 8px;
    }

    .upload-btn {
        width: auto;
    }
}