/* 메인 컨테이너 */
.profile-container {    margin:0px auto;  padding-top:100px;}
.profile-container h2{}



#profileSections{padding-top:30px;}
/* 밴드 */
.band-wrapper{ display:flex;  width:100%;   margin-bottom:150px; position:relative;  padding-left:50%; min-height:500px; align-items:center; }
.band-wrapper .band-image{ position:absolute; left:0px; top:0px; width:calc(50% - 30px); height:100%; border-radius:45px; overflow:hidden; }
.band-wrapper .band-text{ text-align:left;  animation: fadeInUp 0.8s ease-out; animation-delay: 0.2s;   padding:10px 0px;}
.band-wrapper .band-text h2{text-align:left;  font-size: 2.3rem; font-weight: 800; color: #212121; margin-bottom: 20px; letter-spacing: -1px; }
.band-wrapper .band-text div{ font-size: 17px; line-height:1.5em; text-align:justify; word-break: keep-all;  overflow-wrap: break-word; font-weight: 400; color:#333333; transition: all 0.5s ease;}
.band-wrapper .band-text div p{ word-break:keep-all; }
.band-wrapper .band-text div p.bigfont{font-size:1.1em; margin-top:10px; font-weight:700;}
.band-wrapper:nth-child(even){ padding-right:50%; padding-left:0px;  }
.band-wrapper:nth-child(even) .band-text h2{text-align:left;   }
.band-wrapper:nth-child(even) .band-image{left:auto; right:0px;}
.band-wrapper.adminBox:hover{ /*border:solid 1px rgba(255,255,255,0.05);*/}


/*앨범 */

.profile-daepyo { text-align: center; display: block; width: 100%;  margin-top: 40px;  }
.profile-daepyo h2 { font-size: 2.3rem; color: #212121; margin-bottom:30px;}

.admin-notice { display: block; animation: pulse 2s infinite; margin-top:5px;}

.albumGrid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; }


.album-card { background-color: rgba(255,255,255,0.07);  transition: transform 0.3s, box-shadow 0.3s; cursor: pointer; }
.album-card:hover { transform: scale(1.05);  }
.album-card .admin-controls{display:none;}
.album-card:hover .admin-controls{display:block;}

.album-thumb { width: 100%; aspect-ratio: 1; border-radius: 25px; overflow: hidden; background-color: #333; background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="%23666" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 14.5v-9l6 4.5-6 4.5z"/></svg>'); background-size: 60px; background-repeat: no-repeat; background-position: center; position: relative; overflow: hidden; }

.album-thumb img { width: 100%; height: 100%; object-fit: cover; }

.album-info { padding: 15px; }

.album-title { color: #000; font-size: 1.2rem; font-weight: bold;  line-height: 1.2; max-height: 2.4em; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break:keep-all; }
.album-title .artist{color:#444; font-weight:400; font-size:0.9em;}
.album-meta { font-size: 17px; color: #999; margin-top: 5px; }



/* 반응형 디자인 - 태블릿 */
@media (max-width: 1023px) {
	.profile-container {font-size:14px; padding-top:50px;}

	.band-wrapper{  gap: 50px; }
	.band-wrapper .band-image{flex:0.7; }

	.band-wrapper{ display:block; padding:0px !important; max-width:500px; max-width:500px; margin:0px auto 80px auto;}
	.band-wrapper .band-image{width:100%;  position:relative; background-size:cover; }
	.band-wrapper .band-image:after{content:''; display:inline-block; padding-top:100%;}
	.band-wrapper .band-text{text-align:left; }
	.band-wrapper .band-text h2{margin-top:30px; text-align:left !important;}
	
	.profile-daepyo{margin-top:100px;}
	
}


/* 반응형 디자인 - 작은 모바일 */
@media (max-width: 479px) {
	
	.band-wrapper .band-text h2{font-size:2rem; text-align:center;}
	.band-wrapper .band-text div p{ margin-bottom:7px; text-align:left;}
}





/* 반응형 */
@media (max-width: 1600px) {
	.albumGrid {
		grid-template-columns: repeat(5, 1fr);
	}
}

@media (max-width: 1300px) {
	.albumGrid {
		grid-template-columns: repeat(4, 1fr);
	}
}

@media (max-width: 1000px) {
	.albumGrid {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 800px) {
	.albumGrid {
		grid-template-columns: repeat(2, 1fr);
		gap: 15px;
	}
}

@media (max-width: 500px) {
	.albumGrid {
		grid-template-columns: 1fr;
	}	
}





/* 애니메이션 효과 */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}














/* 기존 드래그 관련 스타일들 제거 */
/* .sortable-albums, .drag-handle, .ui-sortable-helper 등 모두 제거 */

/* 순서 변경 버튼 스타일 */
.sort-order-btn {
    position: absolute;
    top: 5px;
    right: 5px;
    background: rgba(0, 0, 0, 0.6);
    color: #00bfff;
    border: none;
    padding: 6px 10px;
    border-radius: 4px;
    cursor: pointer;
    z-index: 10;
    opacity: 0;
    transition: opacity 0.3s ease;
    font-size: 11px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.sort-order-btn:hover {
    background: #111;
 
}

.album-card:hover .sort-order-btn {
    opacity: 1;
}

.sort-number {
    font-weight: bold;
    font-size: 12px;
}

/* 모바일에서도 터치로 버튼 사용 가능하도록 */
@media (max-width: 768px) {
    .sort-order-btn {
        opacity: 1;
        position: absolute;
        top: 3px;
        right: 3px;
        padding: 4px 6px;
        font-size: 10px;
    }
}




@keyframes pulse {
    0% { opacity: 0.5; }
    50% { opacity: 1; }
    100% { opacity: 0.5; }
}

/* 드래그 중일 때 클릭 이벤트 방지 */
.ui-sortable-helper .album-thumb, .ui-sortable-helper .album-info { pointer-events: none; }

/* CSS 추가 */
.admin-controls { position: absolute; top: 5px; right: 5px; z-index: 10; }

.mobile-controls { display: flex; flex-direction: column; gap: 2px; }

.mobile-controls button { background: rgba(0, 0, 0, 0.7); color: #00bfff; border: none; padding: 4px 6px; border-radius: 3px; cursor: pointer; font-size: 10px; }

.mobile-controls button:hover { background: rgba(0, 191, 255, 0.8); color: white; }








/* 프로필 관리 관련 스타일 */

/* 토스트 알림 스타일 */
.toast {
    position: fixed;
    top: 20px;
    right: 20px;
    background: rgba(0, 191, 255, 0.9);
    color: white;
    padding: 12px 20px;
    border-radius: 6px;
    z-index: 10000;
    opacity: 0;
    transform: translateX(100%);
    transition: all 0.3s ease;
}

.toast.show {
    opacity: 1;
    transform: translateX(0);
}

.toast.toast-success {
    background: rgba(40, 167, 69, 0.9);
}

/* 프로필 관리 관련 스타일 */
.admin-toolbar {
    text-align: right;
}

.admin-toolbar a {
   
    color: #00bfff;
    border: none;

    border-radius: 5px;
    margin: 0 10px;
    cursor: pointer;
    font-size: 30px;
    transition: all 0.3s ease;
}

.admin-toolbar button:hover {
    background: #0099cc;
    transform: translateY(-2px);
}

.profile-admin-controls {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 10;
    display: flex;
    gap: 5px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* 관리자 모드에서 마우스 오버시 항상 보이도록 수정 */
.admin-mode .band-wrapper:hover .profile-admin-controls {
    opacity: 1;
}

.profile-admin-controls button,
.drag-handle-profile {
    background: rgba(0, 0, 0, 0.6);
    color: #00bfff;
    border: none;
    padding: 8px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    transition: all 0.3s ease;
}

.profile-admin-controls button:hover,.drag-handle-profile:hover {  background: #111;  }
.profile-admin-controls i{font-size:20px;}

.drag-handle-profile {
    cursor: move;
    display: none; /* 기본적으로 숨김 */
}

/* 순서 변경 모드일 때만 드래그 핸들 표시 */
.sort-mode .drag-handle-profile {
    display: block;
}

/* 순서 입력 필드 스타일 */
.order-input {
    width: 40px;
    padding: 4px 6px;
    border: 1px solid #444;
    border-radius: 4px;
    background-color: rgba(0, 0, 0, 0.8);
    color: #00bfff;
    font-size: 12px;
    text-align: center;
}

.order-input:focus {
    outline: none;
    border-color: #00bfff;
    background-color: rgba(0, 191, 255, 0.2);
}

/* 데스크톱과 모바일 구분 */
.desktop-controls {
    display: flex;
    gap: 5px;
    align-items: center;
}

.mobile-controls {
    display: none;
}

@media (max-width: 768px) {
    .desktop-controls {
        display: none;
    }
    
    .mobile-controls {
        display: flex;
        gap: 5px;
        align-items: center;
        flex-wrap: wrap;
    }
    
    .order-input {
        width: 35px;
        font-size: 11px;
    }
}

/* 순서 변경 모드 관련 스타일 수정 */
.sort-mode .band-wrapper {
    position: relative;
    border: 2px dashed transparent;
    transition: border-color 0.3s ease;
}

.sort-mode .band-wrapper:hover {
    border-color: #00bfff;
}

/* 데스크톱에서만 순서 변경 모드 표시 */
@media (min-width: 769px) {
    .sort-mode-btn {
        display: inline-block;
    }
}

@media (max-width: 768px) {
    .sort-mode-btn {
        display: none;
    }
}

.profile-sortable-placeholder {
    background-color: rgba(0, 191, 255, 0.2);
    border: 2px dashed #00bfff;
    border-radius: 15px;
    margin-bottom: 150px;
    height: 200px;
    visibility: visible !important;
}