/* ==============================
   공통 레이아웃
   ============================== */

/* 헤더/푸터 사이 메인 영역 – 다른 페이지와 맞추기 위함 */
.page-main {
    margin: 20px auto 32px auto;
}

/* ▣ 헤더 전체 박스 높이 줄이기 */
.site-header {
    background: #0d1117;   /* 기존 색상 유지 */
    padding: 2px 0;        /* 상하 여백 최소화 */
}

/* ▣ 로고 + 텍스트 라인 높이 안정화 */
.header-inner {
    display: flex;
    align-items: center;     /* 세로 중앙 정렬 */
    gap: 12px;
}

/* 로고 아이콘 */
.header-logo img {
    width: 34px;
    height: 34px;
}

/* 사이트 제목 */
.header-title {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
}

/* 사이트 부제 */
.header-subtitle {
    margin: 0;
    font-size: 13px;
    color: #b9c0c8;
}

/* ▣ 메뉴바 높이 줄이기 */
.navbar {
    background: #0d1117;
    padding: 6px 0;        /* 기존보다 낮게 */
}

.navbar a {
    padding: 4px 10px;      /* 버튼 높이 축소 */
    font-size: 15px;
}


/* 업로드 전체 폭 */
.upload-wrap {
    max-width: 1150px;
    margin: 0 auto;
    padding: 0;
    box-sizing: border-box;
}

/* ==============================
   제목/설명
   ============================== */

.upload-header-title {
    margin: 6px 0 10px 0;     /* Top(6px), Right(0px), Bottom(10px), Left(0px) */
    font-size: 22px;
    font-weight: 700;
    color: #111827;
}

.upload-header-title .emoji {
    margin-left: 4px;
}

.upload-header-sub {
    font-size: 13px;
    line-height: 1.5;
    margin-bottom: 10px;
    color: #4b5563;
}

.upload-header-sub strong {
    color: #111827;
}

/* ==============================
   업로드 카드 박스
   ============================== */

.upload-card {
    background: #ffffff;
    border-radius: 14px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.06);
    padding: 18px 20px;
    margin-top: 8px;
}

/* 폼 행 간격 */
.upload-form-row {
    margin-bottom: 14px;
    font-size: 13px;
}

.upload-form-row label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 4px;
    color: #111827;
}

.upload-form-row small {
    display: block;
    margin-top: 3px;
    font-size: 12px;
    color: #6b7280;
}

/* ==============================
   입력 요소
   ============================== */

.upload-select {
    width: 100%;
    padding: 7px 9px;
    font-size: 14px;
    border-radius: 8px;
    border: 1px solid #d1d5db;
    background: #f8fafc;
    box-sizing: border-box;
}

.upload-select:focus {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 1px #2563eb1a;
}

/* 🔒 브라우저 기본 파일버튼 숨기기 */
.upload-file-input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

/* 파일 선택 */
.upload-file-input-old {
    width: 100%;
    padding: 10px 12px;
    font-size: 14px;
    border-radius: 8px;
    border: 1px solid #cbd5e1;
    background: #ffffff;
    box-sizing: border-box;
}

/* ==============================
   버튼
   ============================== */

.upload-submit {
    margin-top: 6px;
}

.upload-btn {
    width: 100%;
    padding: 10px 0;
    font-size: 14px;
    border-radius: 8px;
    border: none;
    background: #2563eb;
    color: #ffffff;
    cursor: pointer;
    font-weight: 600;
    letter-spacing: 0.02em;
    transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.05s ease;
}

/* “사진 파일 선택” 라벨 */
.upload-field-label {
    display: block;
    margin-bottom: 4px;
    font-size: 13px;
    font-weight: 500;
    color: #111827;   /* 짙은 회색 – 잘 보이게 */
}

/* 파일 인풋 주변 래퍼 */
.upload-file-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* ✅ 세련된 파일 선택 버튼 */
.upload-file-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 7px 18px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: #1d4ed8;                      /* 파란 글씨 */
    background: #ffffff;                 /* 흰 바탕 */
    border: 1px solid #93c5fd;          /* 부드러운 파란 테두리 */
    box-shadow: 0 4px 10px rgba(148, 163, 184, 0.35);
    cursor: pointer;
    text-decoration: none;               /* 밑줄 제거 */
    white-space: nowrap;
    transition:
        background 0.18s ease,
        border-color 0.18s ease,
        box-shadow 0.18s ease,
        transform 0.1s ease;
}

.upload-file-button:hover {
    background: #e5f2ff;                 /* 아주 연한 파란 배경 */
    border-color: #60a5fa;
    box-shadow: 0 6px 14px rgba(148, 163, 184, 0.45);
    transform: translateY(-1px);
}

.upload-file-button:active {
    transform: translateY(0);
    box-shadow: 0 3px 8px rgba(148, 163, 184, 0.35);
}

/* 안내 문구(기존 small 대체용) */
.upload-file-note {
    font-size: 12px;
    color: #6b7280;
}

.upload-btn:hover {
    background: #1d4ed8;
    box-shadow: 0 2px 6px rgba(37, 99, 235, 0.35);
}

.upload-btn:active {
    transform: scale(0.99);
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.35);
}

/* ==============================
   업로드 결과 메시지
   ============================== */

.upload-messages {
    margin-top: 16px;
}

.upload-messages h3 {
    margin: 0 0 6px 0;
    font-size: 14px;
    color: #111827;
}

.upload-success,
.upload-error {
    border-radius: 8px;
    padding: 8px 10px;
    font-size: 12px;
    margin-bottom: 6px;
}

.upload-success {
    background: #ecfdf3;
    border: 1px solid #bbf7d0;
    color: #166534;
}

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

/* ============================================
   손주 선택 전용 행 (.grandkid-row)
   - 기본 .upload-form-row 와 동일 레이아웃
   - 손주 선택 영역임을 살짝 강조
   ============================================ */
.grandkid-row {
    margin-top: 6px;                 /* 위와 약간 간격 */
    padding: 8px 10px;               /* 살짝 박스 느낌 */
    border-radius: 10px;
    background: #f9fafb;             /* 은은한 회색 */
    border: 1px dashed #cbd5e1;      /* 점선 테두리로 구분 */
}

.grandkid-row label {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 4px;
    display: block;
}

.grandkid-row small {
    display: block;
    margin-top: 3px;
    font-size: 12px;
    color: #6b7280;
}
/* ============================================
   하단 바로가기 버튼 영역 (.upload-shortcuts)
   - 가운데 정렬, 2개 버튼 가로 배치
   ============================================ */
.upload-shortcuts {
    margin-top: 18px;
    display: flex;
    justify-content: center;
    gap: 10px;                       /* 버튼 사이 간격 */
    flex-wrap: wrap;                 /* 모바일에서 줄바꿈 허용 */
}

/* 공통 버튼 스타일 */
.upload-shortcut-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 180px;
    padding: 8px 18px;               /* 직사각형 + 모서리 둥글게 */
    border-radius: 999px;            /* pill 형태(둥근 직사각형) */
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    box-sizing: border-box;
    border: 1px solid #2563eb;
    background: #2563eb;
    color: #ffffff;
    box-shadow: 0 1px 4px rgba(37, 99, 235, 0.4);
    transition: background 0.15s ease, color 0.15s ease,
                box-shadow 0.15s ease, transform 0.1s ease;
}

.upload-shortcut-btn:hover {
    background: #1d4ed8;
    border-color: #1d4ed8;
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(37, 99, 235, 0.45);
}

.upload-shortcut-btn:active {
    transform: translateY(0);
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.3);
}

/* 보조 버튼(secondary) - 흰 배경 + 파란 글씨 */
.upload-shortcut-btn.secondary {
    background: #ffffff;
    color: #2563eb;
    border-color: #2563eb;
    box-shadow: 0 1px 3px rgba(15,23,42,0.15);
}

.upload-shortcut-btn.secondary:hover {
    background: #eff6ff;
}

/* 중앙부 전체 레이아웃 */
.upload-main {
    padding: 18px 0 32px;
    background: inherit;         /* site-main 배경 그대로 사용 */
}

.upload-page {
    max-width: 1150px;           /* ✅ 요청하신 1150px */
    margin: 0 auto;              /* 중앙 정렬 */
    padding: 0 20px;             /* 좌우 여유 */
}

/* 상단 제목/설명 영역 */
.upload-header {
    margin-bottom: 10px;
}

.upload-title {
    margin: 0 0 4px 0;
    font-size: 20px;
    font-weight: 700;
    color: #111827;
}

.upload-subtitle {
    margin: 0;
    font-size: 13px;
    line-height: 1.6;
    color: #374151;              /* 조금 더 진한 회색 */
}

.upload-subtitle-secondary {
    margin: 4px 0 12px 0;
    font-size: 12px;
    line-height: 1.5;
    color: #6b7280;
}

/* 업로드 폼 카드 */
.upload-card {
    background: #ffffff;
    border-radius: 16px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.18);
    padding: 16px 20px 18px 20px;
}

/* 하단 버튼 줄 */
.upload-actions-row {
    margin-top: 18px;
    display: flex;
    justify-content: center;     /* 가운데 정렬 (원하시면 flex-end 로 바꾸기) */
    gap: 12px;
}

/* 버튼 공통 스타일 */
.upload-btn {
    width: 160px;                     /* ✅ 동일한 폭(원하시면 160~200px 조절 가능) */
    padding: 9px 0;                   /* 세로 패딩 균일화 */
    border-radius: 999px;
    border: 1px solid #1d4ed8;
    font-size: 12px;                  /* 글씨 조금 키워서 가독성 향상 */
    font-weight: 600;
    text-align: center;               /* ✅ 글씨 중앙 정렬 */
    text-decoration: none;            /* ✔ 밑줄 제거 */
    cursor: pointer;
    display: inline-block;
    transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

/* Primary 버튼 (파랑) */
.upload-btn-primary {
    background: #1d4ed8;
    color: #ffffff;
    border: 1px solid #1d4ed8;
}
.upload-btn-primary:hover {
    background: #1e40af;
}

/* Secondary 버튼 (흰색+파랑 테두리) */
.upload-btn-secondary {
    background: #ffffff;
    color: #1d4ed8;
    border: 1px solid #1d4ed8;
}
.upload-btn-secondary:hover {
    background: #eff6ff;
}

/* Danger 버튼 (삭제·관리용) */
.upload-btn-danger {
    background: #fee2e2;
    color: #b91c1c;
    border: 1px solid #fecaca;
}
.upload-btn-danger:hover {
    background: #fecaca;
}

/* ######################## 미리보기(썸네일) 스타일(CSS) ####################### */

.upload-preview-area {
    margin-top: 18px;
    padding: 10px 5px;
    background: #f9fafb;
    border-radius: 10px;
    border: 1px solid #e5e7eb;
}

.preview-guide {
    font-size: 12px;
    color: #6b7280;
    margin: 0 0 8px 6px;
}

.preview-image-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.preview-image-list img {
    width: 120px;
    height: 120px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid #d1d5db;
    box-shadow: 0 2px 4px rgba(0,0,0,0.08);
}


/* ==============================
   모바일 최적화
   ============================== */

@media (max-width: 640px) {
    .page-main {
        margin: 16px auto 24px auto;
    }
    .upload-wrap {
        max-width: 100%;
        padding: 0 8px;
    }
    .upload-card {
        padding: 14px 12px 16px 12px;
        border-radius: 12px;
    }
    .upload-header-title {
        font-size: 20px;
        margin-bottom: 3px;
    }
    .upload-header-sub {
        font-size: 13px;
        margin-bottom: 8px;
    }
    .upload-form-row {
        margin-bottom: 10px;
    }
    .upload-form-row label {
        font-size: 13px;
    }
    .upload-form-row small {
        font-size: 11px;
    }
    .upload-select {
        padding: 6px 8px;
        font-size: 13px;
    }
    .upload-file-input {
        padding: 11px;
        font-size: 14px;
    }
    .upload-btn {
        padding: 9px 0;
        font-size: 14px;
    }

    .grandkid-row {
        padding: 6px 8px;
        margin-top: 4px;
    }

    .upload-shortcuts {
        margin-top: 14px;
        gap: 8px;
    }

    .upload-shortcut-btn {
        width: 100%;                 /* 한 줄 전체 사용 */
        max-width: 280px;            /* 너무 넓어지지 않도록 */
        padding: 9px 0;
        font-size: 14px;
    }
    .upload-page {
        padding: 0 10px;
    }

    .upload-card {
        padding: 12px 12px 14px;
    }

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

    .upload-btn {
        width: 100%;
        justify-content: center;
    }

}