/* 파일명: www/css/style.css */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;700&display=swap');

html { font-size: 85%; }
:root {
    --primary-color: #7263f6; /* 💡 [수정] 파랑색 버튼: rgb(114, 99, 246) */
    --light-gray: #f8f9fa; 
    --gray: #e9ecef; 
    --dark-gray: #6c757d; 
    --success-color: #28a745; 
    --danger-color: #f15f9e; /* 💡 [수정] 빨강색 버튼: rgb(241, 95, 158) */
    --border-radius: 8px; 
    --text-color: #212529; 
    --bg-color: #e8e8e8; 
    --card-bg: #ffffff; 
    --card-border-color: #dee2e6; 
    --input-bg: #ffffff; 
    --input-border-color: #ced4da; 
    --shadow-color: rgba(0,0,0,0.05); 
    --orange-border: #fd7e14;
    /* 💡 [추가] 상단 안전 영역 변수 추가 */
    --safe-area-top: env(safe-area-inset-top, 0);
    /* 💡 [추가] 상단 상태 표시줄 배경색 (밝은 모드) */
    --status-bar-bg: #6c757d; 
}
body.dark-mode {
    --primary-color: #7263f6; /* 💡 [수정] 파랑색 버튼: rgb(114, 99, 246) - 다크 모드에서 통일 */
    --light-gray: #121212; 
    --gray: #343a40; 
    --dark-gray: #adb5bd; 
    --success-color: #198754; 
    --danger-color: #f15f9e; /* 💡 [수정] 빨강색 버튼: rgb(241, 95, 158) */
    --text-color: #dee2e6; 
    --bg-color: #212529; 
    --card-bg: #2b3035; 
    --card-border-color: #495057; 
    --input-bg: #343a40; 
    --input-border-color: #495057; 
    --shadow-color: rgba(0,0,0,0.2); 
    --orange-border: #ff8c00;
    /* 💡 [추가] 상단 안전 영역 변수 추가 */
    --safe-area-top: env(safe-area-inset-top, 0);
    /* 💡 [추가] 상단 상태 표시줄 배경색 (다크 모드) */
    --status-bar-bg: #121212; 
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body { 
    font-family: 'Noto Sans KR', sans-serif; 
    /* 💡 [수정] body 배경색을 상태 표시줄 배경색으로 변경 (상단 padding 영역에 표시됨) */
    background-color: var(--status-bar-bg); 
    color: var(--text-color); 
    display: flex; 
    justify-content: center; 
    transition: background-color 0.2s, color 0.2s; 
    line-height: 1.4;
    /* 💡 [유지] safe-area-top을 body에 적용하여 콘텐츠를 아래로 밀어냄 */
    padding-top: var(--safe-area-top);
}
.container { 
    width: 100%; 
    max-width: 600px; 
    min-height: 100vh; 
    /* 💡 [유지] container의 배경색은 본문 배경색을 사용하여 안전 영역 아래의 본문 색상을 유지 */
    background-color: var(--bg-color); 
    box-shadow: 0 0 10px rgba(0,0,0,0.1); 
    transition: background-color 0.2s;
}
header { display: flex; justify-content: space-between; align-items: center; padding: 1rem; background-color: var(--primary-color); color: white; }
.header-left { display: flex; align-items: center; gap: 1rem; }
header h1 { font-size: 1.25rem; }
.header-title-link { text-decoration: none; color: inherit; }
main { padding: 1rem 1.5rem; }
.theme-btn { background: none; border: 2px solid white; color: white; font-size: 1.2rem; cursor: pointer; border-radius: 50%; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; transition: transform 0.2s, background-color 0.2s; }
.theme-btn:hover { transform: scale(1.1); background-color: rgba(255,255,255,0.2); }
.search-section { position: relative; margin-bottom: 1.5rem; display: flex; gap: 0.5rem; }
.search-section input[type="text"] { flex-grow: 1; }
.search-section button { padding: 0 1.2rem; border: 1px solid var(--primary-color); background-color: var(--primary-color); color: white; border-radius: var(--border-radius); font-weight: 500; cursor: pointer; }
input, textarea, select { width: 100%; padding: 0.8rem; border: 1px solid var(--input-border-color); border-radius: var(--border-radius); font-size: 1rem; font-family: 'Noto Sans KR', sans-serif; background-color: var(--input-bg); color: var(--text-color); transition: border-color 0.2s, background-color 0.2s; }
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--primary-color); box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25); }
.search-results-box { display: none; position: absolute; top: 100%; margin-top: 4px; left: 0; right: 0; background-color: var(--card-bg); border: 1px solid var(--card-border-color); border-radius: var(--border-radius); z-index: 10; max-height: 200px; overflow-y: auto; box-shadow: 0 4px 6px var(--shadow-color); }
.search-result-item { padding: 0.8rem; cursor: pointer; color: var(--text-color); }
.search-result-item:hover { background-color: var(--gray); }
hr { border: 0; height: 1px; background-color: var(--card-border-color); margin: 0.5rem 0; }
.restaurant-card { background-color: var(--card-bg); border: 1px solid var(--card-border-color); border-radius: var(--border-radius); padding: 1rem; margin-bottom: 1rem; box-shadow: 0 1px 3px var(--shadow-color); transition: background-color 0.2s, border-color 0.2s; }
.card-header { margin-bottom: 0.25rem; }
.card-header h3 { color: #9c91f9; /* 💡 [수정] 파스텔톤 파랑: rgb(156, 145, 249) */ font-size: 1.4rem; word-break: break-all; line-height: 1.3; margin: 0; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
body.dark-mode .card-header h3 { color: #c5c0fa; /* 💡 [수정] 파스텔톤 밝은 파랑: rgb(197, 192, 250) */ }
.card-subheader { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.75rem; min-height: 28px; }
.subheader-left { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.subheader-left .location-dong { font-size: 0.9rem; color: var(--dark-gray); }
.restaurant-card .info-item { margin-bottom: 0.5rem; color: var(--dark-gray); }
.restaurant-card .info-item strong { color: var(--text-color); margin-right: 0.5rem; }
.rating { margin-top: 0.5rem; padding-top: 0.5rem; border-top: 1px solid var(--card-border-color); }
.rating-content { display: flex; }
.rating-content strong { white-space: nowrap; margin-right: 0.5rem; }
.rating-content p { margin: 0; white-space: pre-wrap; word-break: break-all; }
.placeholder, .info-text { color: var(--dark-gray); padding: 2rem 0; text-align: center; }
.add-form-section input, .add-form-section textarea, .add-form-section select { margin-bottom: 1rem; }
.btn-save { width: 100%; padding: 0.8rem; font-size: 1.1rem; font-weight: 700; background-color: var(--primary-color); color: white; border: none; border-radius: var(--border-radius); cursor: pointer; }
.list-section { margin-top: 1rem; }
.filter-container { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.filter-btn { padding: 0.5rem 0.8rem; border: 1px solid var(--card-border-color); background-color: transparent; color: var(--dark-gray); border-radius: 20px; cursor: pointer; font-size: 0.9rem; }
.filter-btn.active { background-color: var(--primary-color); color: white; border-color: var(--primary-color); }
.sort-container { display: flex; justify-content: flex-end; margin-top: 0.5rem; padding: 0; }
.sort-dropdown { padding: 0.4rem 0.6rem; font-size: 0.9rem; border-radius: var(--border-radius); border: 1px solid var(--card-border-color); background-color: var(--card-bg); color: var(--text-color); cursor: pointer; width: auto; }
#toast-container { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 1001; }
.toast { background-color: rgba(0,0,0,0.8); color: white; padding: 10px 20px; border-radius: 20px; margin-bottom: 5px; font-size: 14px; opacity: 0; transition: opacity 0.3s ease-in-out; box-shadow: 0 2px 10px rgba(0,0,0,0.2); }
.toast.show { opacity: 1; }
.toast.success { background-color: var(--success-color); }
.toast.error { background-color: var(--danger-color); }
.header-buttons { display: flex; gap: 0.5rem; align-items: center; }
.btn-add, .btn-back, .btn-login, .btn-logout, .btn-register { background-color: white; color: var(--primary-color); padding: 0.5rem 1rem; text-decoration: none; border-radius: var(--border-radius); font-weight: 500; transition: background-color 0.2s; white-space: nowrap; border: none; font-size: 1rem; font-family: 'Noto Sans KR', sans-serif; cursor: pointer; }
.btn-add:hover, .btn-back:hover, .btn-login:hover, .btn-logout:hover, .btn-register:hover { background-color: #e9ecef; }
.login-form-inline { display: flex; gap: 0.5rem; align-items: center; }
.login-form-inline input { padding: 0.5rem; width: 100px; font-size: 0.9rem; margin-bottom: 0; }
.login-form-inline button { padding: 0.5rem 1rem; border: none; background-color: white; color: var(--primary-color); border-radius: var(--border-radius); font-weight: 500; cursor: pointer; }
.welcome-message { font-size: 0.9rem; font-weight: 500; margin-right: 0.5rem; }
.address-edit-area, .rating-edit-area, .jibun-edit-area, .detail-edit-area { width: 100%; min-height: 40px; padding: 0.5rem; border: 1px solid var(--primary-color); border-radius: var(--border-radius); font-size: 1rem; font-family: 'Noto Sans KR', sans-serif; margin-top: 0.25rem; }
.info-group textarea { vertical-align: top; width: calc(100% - 60px); display: inline-block; }
.card-actions { display: flex; gap: 0.3rem; align-items: center; }
.card-actions button { border: none; padding: 0.3rem 0.6rem; font-size: 0.8rem; border-radius: var(--border-radius); cursor: pointer; font-weight: 500; }
.card-actions span { font-size: 0.8rem; color: var(--dark-gray); }
.btn-favorite { font-size: 1.6rem !important; padding: 0 0.2rem 0 0; background: none; border: none; cursor: pointer; color: var(--card-bg); -webkit-text-stroke-width: 1.5px; -webkit-text-stroke-color: var(--dark-gray); transition: color 0.2s, transform 0.2s, -webkit-text-stroke-color 0.2s; line-height: 1; }
.btn-favorite:hover { transform: scale(1.2); -webkit-text-stroke-color: #000; }
.btn-favorite.is-favorite { color: #e74c3c; -webkit-text-stroke-width: 0; }
.btn-share { background-color: #17a2b8; color: white; }
.btn-edit { background-color: var(--primary-color); color: white; }
.btn-delete { background-color: var(--danger-color); color: white; }
.btn-save-edit { background-color: var(--success-color); color: white; }
.btn-cancel-edit, .btn-cancel { background-color: var(--dark-gray); color: white; }
.btn-confirm-yes { background-color: var(--danger-color); color: white; }
.btn-confirm-no { background-color: var(--dark-gray); color: white; }
.btn-toggle-jibun, .btn-view-photo { font-size: 0.8rem; padding: 0.2rem 0.5rem; background-color: var(--gray); color: var(--text-color); border: 1px solid var(--card-border-color); border-radius: 10px; cursor: pointer; white-space: nowrap; align-self: center; }
body.dark-mode .btn-toggle-jibun, body.dark-mode .btn-view-photo { background-color: var(--dark-gray); color: var(--text-color); }
.hidden, .jibun-address.hidden { display: none !important; }
.star-rating-input { margin-bottom: 1rem; }
.star-instruction { font-size: 0.8rem; color: var(--dark-gray); margin-bottom: 0.25rem; }
.star-input-group { display: flex; align-items: center; gap: 1rem; }
.stars { display: flex; font-size: 2.5rem; color: var(--gray); }
.stars .star { cursor: pointer; transition: transform 0.1s; -webkit-text-stroke-width: 0.8px; -webkit-text-stroke-color: #b48c00; }
.stars .star:active { transform: scale(0.9); }
.star.filled { color: #ffc107; -webkit-text-stroke-width: 0; }
.star.half { background: linear-gradient(90deg, #ffc107 50%, var(--gray) 50%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; color: #ffc107; }
.btn-zero-star, .btn-zero-star-edit { padding: 0.4rem 0.8rem; border: 1px solid var(--orange-border); background-color: transparent; color: var(--text-color); border-radius: var(--border-radius); cursor: pointer; font-size: 0.9rem; font-weight: 500; margin-left: auto; }
.current-star-rating { font-size: 0.9rem; color: var(--dark-gray); font-weight: 500; min-width: 60px; text-align: right; }
.star-display { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.5rem; }
.star-display .star { font-size: 1.2rem; -webkit-text-stroke-width: 0; }
.star-display .star-text { font-size: 0.9rem; font-weight: 500; color: var(--dark-gray); }
.no-rating-text { font-size: 0.9rem; font-style: italic; color: var(--dark-gray); }

/* 💡 [수정] 주소 검색/파일 선택 공용 스타일 */
.address-search-group { position: relative; display: flex; gap: 0.5rem; margin-bottom: 1rem; }
.address-search-group input { flex-grow: 1; margin-bottom: 0 !important; }
.address-search-group button { padding: 0 1rem; border: 1px solid var(--primary-color); background-color: var(--primary-color); color: white; border-radius: var(--border-radius); font-weight: 500; cursor: pointer; white-space: nowrap; }
.address-search-group button:disabled { background-color: var(--dark-gray); border-color: var(--dark-gray); cursor: not-allowed; }
#address-results-container { border: 1px solid var(--card-border-color); border-radius: var(--border-radius); padding: 1rem; margin: -0.5rem 0 1rem 0; background-color: var(--gray); }
#address-results-container p { margin-bottom: 0.5rem; color: var(--text-color); font-size: 0.9rem; word-break: keep-all; }
#address-results-container p:last-child { margin-bottom: 0; }
#address-results-container p strong { color: var(--primary-color); margin-right: 0.5rem; display: inline-block; width: 50px; }
#address-results-container .info-text { text-align: left; padding: 0; margin-top: 0.75rem; font-size: 0.9rem; color: var(--primary-color); }
input[readonly] { background-color: var(--gray); cursor: not-allowed; color: var(--dark-gray); font-weight: 500; }
.pagination-container { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 0.5rem; padding: 1rem 0; }
.pagination-container:empty { padding: 0; }
.pagination-btn { padding: 0.5rem 0.8rem; border: 1px solid var(--card-border-color); background-color: var(--card-bg); color: var(--dark-gray); border-radius: var(--border-radius); cursor: pointer; font-size: 0.9rem; font-weight: 500; transition: background-color 0.2s, color 0.2s; }
.pagination-btn:hover:not(:disabled) { background-color: var(--gray); }
.pagination-btn.active { background-color: var(--primary-color); color: white; border-color: var(--primary-color); font-weight: 700; }
.pagination-btn:disabled { color: #ccc; cursor: not-allowed; background-color: transparent; }
body.dark-mode .pagination-btn:disabled { color: #555; }
#detail-address-container { margin-bottom: 1rem; }
.address-selectable { cursor: pointer; text-decoration: underline; color: var(--primary-color); }
.address-selectable:hover { font-weight: bold; }
.modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.7); display: flex; justify-content: center; align-items: center; z-index: 1000; }
.modal-content { background-color: var(--card-bg); padding: 1.5rem; border-radius: var(--border-radius); box-shadow: 0 5px 15px rgba(0,0,0,0.3); width: 90%; max-width: 400px; }
.modal-content h2 { margin-top: 0; margin-bottom: 1rem; font-size: 1.2rem; }
.modal-content p { margin-bottom: 1rem; }
#duplicate-list { background-color: var(--gray); border: 1px solid var(--card-border-color); border-radius: var(--border-radius); padding: 1rem; margin-bottom: 1.5rem; max-height: 150px; overflow-y: auto; }
.duplicate-item { font-size: 0.9rem; border-bottom: 1px solid var(--card-border-color); padding-bottom: 0.5rem; margin-bottom: 0.5rem; }
.duplicate-item:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.modal-actions { display: flex; justify-content: flex-end; gap: 0.5rem; }
.modal-actions button { padding: 0.6rem 1rem; border: none; border-radius: var(--border-radius); cursor: pointer; font-weight: 500; }
.dark-mode-loading body { background-color: #212529; color: #dee2e6; }
.owner-info { font-size: 0.8rem; color: var(--success-color); font-weight: 500; padding: 0.2rem 0.5rem; background-color: rgba(40, 167, 69, 0.1); border-radius: 4px; display: inline-block; margin-top: 0.5rem; }
#share-user-list { max-height: 200px; overflow-y: auto; border: 1px solid var(--card-border-color); border-radius: var(--border-radius); padding: 0.5rem; margin-bottom: 1rem; }
.share-user-item { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem; border-radius: 4px; }
.share-user-item:hover { background-color: var(--gray); }
.share-user-item input { width: auto; }
.share-user-item label { flex-grow: 1; cursor: pointer; }
#share-modal h2 { color: var(--text-color); }
#pull-to-refresh-indicator { position: fixed; top: -50px; left: 0; width: 100%; height: 50px; display: flex; justify-content: center; align-items: center; background-color: var(--bg-color); color: var(--text-color); font-size: 24px; z-index: 999; transition: top 0.2s; }
#pull-to-refresh-indicator .spinner { display: none; border: 4px solid var(--gray); border-top: 4px solid var(--primary-color); border-radius: 50%; width: 24px; height: 24px; animation: spin 1s linear infinite; }
#pull-to-refresh-indicator.refreshing .arrow { display: none; }
#pull-to-refresh-indicator.refreshing .spinner { display: block; }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
/* 사진 추가 관련 스타일 */
.photo-upload-section { margin-bottom: 1rem; }
.photo-upload-section label { display: block; margin-bottom: 0.5rem; font-weight: 500; color: var(--text-color); }

/* 💡 [수정] 모바일 클릭 이슈 해결: 실제 input이 버튼 영역을 덮도록 설정 */
.file-overlay-input {
    /* 실제 클릭 이벤트를 받을 투명한 input */
    position: absolute;
    top: 0;
    left: 0;
    /* 래퍼의 높이/너비를 꽉 채우도록 설정 */
    width: 100%; 
    height: 100%;
    /* 투명하게 만듭니다. */
    opacity: 0; 
    /* 파일 선택 다이얼로그가 뜨도록 허용합니다. */
    cursor: pointer;
    /* 래퍼 내에서 가장 위에 오도록 합니다. */
    z-index: 10; 
}

/* 💡 [수정] 커스텀 버튼 디자인을 위한 래퍼 스타일 (add.php/main.js 공통) */
#custom-file-wrapper, .custom-file-wrapper {
    position: relative; 
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
    /* 높이를 명시하여 input[type="file"]이 덮을 영역을 정의 */
    height: 48px; 
}

#custom-file-wrapper input[type="text"], .custom-file-wrapper input[type="text"] {
    /* 파일명 표시 input: z-index가 낮아 클릭이 방지됨 (file-overlay-input이 z-index: 10) */
    pointer-events: none;
    height: 100%;
}
#custom-file-wrapper button, .custom-file-wrapper button {
    /* 커스텀 버튼: z-index가 낮아 클릭이 방지됨 (file-overlay-input이 z-index: 10) */
    pointer-events: none;
    z-index: 2; 
    
    /* 💡 [수정] 모든 커스텀 버튼을 파랑색으로 통일 */
    border: 1px solid var(--primary-color);
    background-color: var(--primary-color);
    color: white;
}
/* ---------------------------------------------------------------- */

#thumbnail-preview { position: relative; margin-top: 1rem; max-width: 150px; }
#thumbnail-image { display: block; width: 100%; height: auto; border-radius: var(--border-radius); border: 1px solid var(--card-border-color); }
#remove-photo-btn { position: absolute; top: -10px; right: -10px; background-color: var(--danger-color); color: white; border: none; border-radius: 50%; width: 24px; height: 24px; font-size: 1.2rem; line-height: 22px; text-align: center; cursor: pointer; font-weight: bold; }
/* 사진 보기 모달 스타일 (단일 이미지에서 슬라이더로 변경) */
#photo-modal .photo-modal-content { 
    position: relative; 
    width: 90%; 
    max-width: 600px; /* 슬라이더에 맞게 크기 키움 */
    padding: 0; 
    background: none; 
    border-radius: var(--border-radius);
    overflow: hidden;
}
#photo-modal .photo-modal-close { 
    position: absolute; 
    top: 10px; 
    right: 10px; 
    color: white; 
    font-size: 2.5rem; 
    font-weight: bold; 
    cursor: pointer; 
    text-shadow: 0 0 5px black; 
    z-index: 20; 
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 1;
    transition: background-color 0.2s;
}
#photo-modal .photo-modal-close:hover {
    background-color: rgba(0, 0, 0, 0.7);
}

/* 💡 [추가] 슬라이더 관련 스타일 */
.slider-container {
    position: relative;
    width: 100%;
    overflow: hidden; /* 슬라이드 영역 벗어나는 요소 숨김 */
    background-color: var(--card-bg);
    border-radius: var(--border-radius);
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}
.modal-slider {
    display: flex;
    transition: transform 0.4s ease-in-out;
    width: 100%;
}
.modal-slider .slide {
    display: flex;
    justify-content: center;
    align-items: center;
    height: auto;
    /* 이미지 크기 제한은 JS에서 img 태그에 직접 적용 */
}

.slider-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    padding: 10px;
    cursor: pointer;
    z-index: 10;
    font-size: 2rem;
    line-height: 1;
    transition: background 0.3s;
}
.slider-btn:hover:not(:disabled) {
    background: rgba(0, 0, 0, 0.7);
}
.slider-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}
.slider-btn.prev { left: 0; border-top-right-radius: var(--border-radius); border-bottom-right-radius: var(--border-radius); }
.slider-btn.next { right: 0; border-top-left-radius: var(--border-radius); border-bottom-left-radius: var(--border-radius); }

.slider-pagination {
    position: absolute;
    bottom: 10px;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 8px;
    z-index: 10;
}
.slider-pagination .dot {
    width: 10px;
    height: 10px;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.3s;
}
.slider-pagination .dot.active {
    background: var(--primary-color);
    box-shadow: 0 0 5px white;
}

/* 다중 파일 추가 영역 스타일 조정 */
.photo-upload-section input[type="file"] {
    padding: 0;
    height: auto;
}
/* 💡 [수정] 파일 입력 필드를 버튼 크기에 맞게 덮고, 투명하게 만듭니다. */
.photo-upload-section #custom-file-wrapper-multiple input[type="file"] {
    height: 100%; /* 부모 높이(48px)를 덮도록 수정 */
    width: 100%;
    opacity: 0; /* 투명하게 */
    position: absolute; /* 버튼 위에 덮기 */
    top: 0;
    left: 0;
    z-index: 10;
}
.photo-upload-section #custom-file-wrapper-multiple {
    height: 48px;
    position: relative;
    margin-bottom: 0.5rem;
    /* 💡 [추가] input이 버튼을 덮으므로 버튼 클릭 핸들러는 필요 없습니다. */
    overflow: hidden; 
}
/* 💡 [수정] 커스텀 버튼 (실제 클릭되지 않는) 스타일 수정 */
.photo-upload-section #custom-file-wrapper-multiple button {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 5;
    margin-top: 0 !important; /* 인라인 스타일 덮어쓰기 */
    padding: 0.8rem; /* 버튼 크기 통일 */
    font-size: 1.1rem;
}
.photo-edit-group {
    border: 1px solid var(--card-border-color);
    padding: 10px;
    border-radius: var(--border-radius);
    margin-bottom: 10px !important;
}
.photo-edit-group label {
    font-size: 0.9rem;
    font-weight: 700;
    margin-bottom: 5px;
    color: var(--primary-color);
}
.photo-edit-group .custom-file-wrapper {
    margin-bottom: 0;
}
.photo-edit-group .thumbnail-preview {
    margin-top: 10px;
    max-width: 150px;
    display: block; /* block으로 변경하여 숨김 처리 가능하도록 */
}