/*
@media (max-width: 1500px) {
	#cyyFrame{left:5px !important; transform:translate(0,-50%) !important;}
}

@media (max-width: 1439px) {
	#cyyFrame{left:0px !important; top:0px !important; transform:translate(0,0) !important; width:100% !important; height:100% !important; max-width:100% !important;}
	#cyyFrame iframe{height:100% !important;}

	#cyyCloseBtn { right:auto; left:calc(100% - 25px - 40px - 6px); top:20px;  }

}
*/


/* 관리자 컨트롤 */
/*
#pageAdminDiv{overflow:hidden; text-align:right}
#pageAdminBtn{position:static; text-align:right; display:inline-block;}
#pageAdminBtn i{font-size:25px;}
#pageAdminBtn a, #pageAdminBtn button{vertical-align:middle; height:22px; line-height:22px; display:inline-block; }
#pageAdminBtn a{ vertical-align:middle; }
#pageAdminBtn a:hover{opacity:1;}
*/

.btn-role-manage {
    background-color: #111;
    color: white;
    border: none;
    padding: 3px 15px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
    transition: all 0.3s ease;

}
#selectedCount {color:#fff; position:relative;}
/*
#selectedCount:after{content:''; position:absolute; left:-2px; display:inline-block; width:1px; height:10px; top:5px; background-color:#fff;}
*/
.btn-role-manage:hover:not(:disabled) {
    background-color: #111;
}

.btn-role-manage:disabled {
    background-color: #6c757d !important;
    cursor: not-allowed;
    opacity: 0.7;
}




/*.search-popup a{display:inline-block; height:35px; line-height:35px; border:solid 1px #111; border-radius:25px; color:#111; padding:0px 10px; vertical-align:middle;}*/



/* 검색 팝업 */
.search-popup { display:none ; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); z-index: 1000; color: #555; }
.search-popup-content { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: #fff; border-radius: 25px; padding: 20px 20px 50px 20px; width: 90%; max-width: 500px; max-height: 80vh; overflow-y: auto; overflow-x: hidden; border: solid 1px #999; }
.popup-header { display: flex; justify-content: space-between; align-items: center; padding-bottom: 10px; border-bottom: 2px solid #333; }
.popup-title { font-size: 18px; color: #111; }
.popup-close { background: none; border: none; color: #222; font-size: 35px; cursor: pointer; padding: 0; }
.popup-close:hover { color: #000; }

.search-form .table{display:table;  table-layout:fixed; width:100%; }
.search-form .form-row {display:table-row; width:100%;}
.search-form .form-label {display:table-cell; vertical-align:middle; width:90px; color: #555; vertical-align:middle;padding:20px 0px;	border-bottom: 1px solid #bfbfbf; font-size:14px;}
body.en .search-form .form-label {width:110px;}
.search-form .form-content {display:table-cell;padding:20px 0px;border-bottom: 1px solid #bfbfbf;}
.search-form .date-range {display: flex;align-items: center;gap: 10px;}

.search-form .date-input {width: 100%; font-size:14px !important;}
.search-form .date-separator {color: #666;}
.search-form .checkbox-group {display: flex;flex-wrap: wrap;gap: 20px;font-size:14px;}
.search-form .image-checkbox{font-size:14px;}
.search-form input[name=search]{width:100%;}
.search-form .form-buttons{margin-top:30px}
.search-form .form-buttons button{font-size:14px !important}
.search-form .btn-secondary2{background-color:#fff;}
@media (max-width: 480px) {

	.search-form .table{display:block;}
	.search-form .form-row {display:block; }
	.search-form .form-label {display:block; width:100%; border:none; padding:20px 0px 0px 0px;}
	body.en .search-form .form-label {width:100%;}
	.search-form .form-content {display:block;width:100%; padding:10px 0px 20px 0px}
	.search-form .checkbox-group{display:block;}
	.search-form .checkbox-group .image-checkbox{font-size:14px; display:block;padding-bottom:10px;}
	.search-form .btn2{padding:10px 0px; flex:1;}
}


/* 앨벌별 보기 곡별보기  와   초기 보이는 검색폼 */
.album-top{ display:flex;  justify-content: space-between;  flex-direction: row-reverse; width:100%; margin-top:100px; margin-bottom:20px;  border-bottom:solid 1px #111; line-height:1em; }
.albumtrack{ width:369px; display:flex; vertical-align:bottom; overflow:hidden; } 
.albumtrack a{ color:#111; display:inline-block; float:left; padding:10px 0px;  word-break:keep-all; border:solid 1px #999; color:#888; border-bottom:none; border-top-left-radius:5px; border-top-right-radius:5px; width:180px;  text-align:Center;}
.albumtrack a:first-child{margin-right:5px;}
.albumtrack a.sel{ background-color:#111; color:#fff; border-color:#111;}



/* 작곡 음악감독 솔로&밴드활동 대표이력 상세검색버튼 */
.serch-div{ flex:1; padding-left:10px;}
.serch-div-content{display:flex; align-items:center;  justify-content: right; gap:10px;}
.checkbox-container{  display:flex;  flex-direction:row; justify-content:flex-end; gap:10px; }
.serch-div-content .toggle{position:relative; height:35px; line-height:35px; padding:0px 7px;}
.serch-div-content .toggle:before{content:''; width:1px; height:20px; background-color:#555; position:absolute; left:0px; top:8px;}
.serch-div-content .toggle:after{content:''; width:1px; height:20px; background-color:#555; position:absolute; right:0px; top:8px;}
.serch-div-content .toggle a{display:inline-block;  flex:1; text-align:center; height:25px; line-height:25px; }
.serch-div-content .toggle a.sel{background-color:#111; color:#fff; background-color:#111; border-radius:5px; padding:0px 5px; }
.serch-div-content .serchtxt{padding:0; width:190px;  overflow:hidden;}
.serch-div-content .serchtxt input[type=text]{width:calc(100% - 45px); background-color:#fff; border:solid 1px #111; border-radius:5px;  text-align:Center; font-family:'Pretendard','Malgun Gothic', dotum, sans-serif; }
.serch-div-content button{padding:0px; height:35px; width:40px; text-align:center; border-radius:5px; border:solid 1px #111;  background-color:#111; color:#fff; float:right; }
.detail_serchgo{display:none; margin-left:5px; height:35px; line-height:33px; border-radius:5px; border:solid 1px #111; padding:0px 10px; float:left;}



/* 연도별 섹션 */
.year-section {margin-bottom: 70px; position:relative; }
.year-header {  color: #aaa;font-size: 4rem;line-height: 1em;  width: 1em;  position: absolute;  left: -80px;  top: 190px; }
.year-header span{  display: inline-block;  transform-origin: top left;transform: rotate(-90deg); white-space: nowrap;}




@media (max-width: 1512px) {

	#container_title {position: relative;top: 50px;margin:60px auto;	}
	#wrapper > .cy-container { position: static; }
	
	.albumtrack{ padding:0px; display:flex; gap:40px; width:100%; justify-content: center; margin:0px; border:none;  position:absolute; top:79px; left:0px; background-color: #464646; text-align:center; border:none; height:50px; }
	.albumtrack a{ border:none; background-color:none; width:auto; margin:0px !important; color:#ccc; display:inline-block !important; border:none !important; height:50px; line-height:50px; padding:0px;}
	.albumtrack a.sel{ background-color:#464646 !important; color:#fff; border:none !important; position:relative !important; padding-right:15px;}
	.albumtrack a.sel:after{position:absolute; right:0px; top:10px; content:''; display:inline-block; width:5px; height:5px; color:#eee; background-color:#fff; border-radius:50%;}

	.album-top {border:none;}
	.serch-div{position:relative; z-index:10; bottom:-60px}
	.serch-div-content{display:flex; align-items:center;  justify-content: right; }

	

	.year-header{ position:static; width:100%; font-size:2.5rem; line-height:1em; padding-bottom:5px; margin-bottom:15px; border-bottom:solid 1px #ccc;  }
	.year-header span{transform:rotate(0);}
}

/*
@media (max-width: 1279px) {
	.serch-div{position:relative; bottom:0px; padding:0px;}
	.serch-div-content {position:relative;  justify-content:space-between;}
	.checkbox-container{min-width:calc(100% - 345px); justify-content:space-between;}
}
*/
@media (max-width: 1180px) {
	.checkbox-container{display:none;}

	.detail_serchgo{display:inline-block;}
	.serch-div-content .toggle{border:solid 1px #111; border-radius:5px;}
	.serch-div-content .toggle:after{display:none;}
	.serch-div-content .toggle:before{display:none;}
}

@media (max-width: 639px) {
	.serch-div{bottom:0px; padding:0px}
	.serch-div-content{flex-wrap:wrap; padding:0px;}
	.serch-div-content .serchtxt{flex:1; }
}

@media (max-width: 479px) {
	.serch-div-content .detail_serchgo{margin-left:0px;}
	.serch-div-content .toggle{flex:1; display:flex; padding:5px 10px}
	.serch-div-content .toggle a{flex:1;}
	.serch-div-content .serchtxt{flex:1; min-width:100%}



}


/*
@media (max-width: 767px) {
	
	#container_title {
		position: relative;
		top: 50px;
		margin:60px auto;
	}
	#wrapper > .cy-container { position: static; }
	
	.album-top{position:static; padding:0px; margin:0px 0px 50px 0px; border:none; }
	.albumtrack{ padding:0px; display:flex; gap:40px; width:100%; justify-content: center; margin:0px; border:none;  position:absolute; top:79px; left:0px; background-color: #464646; text-align:center; border:none; height:50px; }
	.albumtrack a{ border:none; background-color:none; width:auto; margin:0px !important; color:#ccc; display:inline-block !important; border:none !important; height:50px; line-height:50px; padding:0px;}
	.albumtrack a.sel{ background-color:#464646 !important; color:#fff; border:none !important; position:relative !important; padding-right:15px;}
	.albumtrack a.sel:after{position:absolute; right:0px; top:10px; content:''; display:inline-block; width:5px; height:5px; color:#eee; background-color:#fff; border-radius:50%;}

	.searchh-section{display:block;}
	.checkbox-container .checkboxs{display:none;}
	.checkbox-container .twobtn{ position:static; width:100%; text-align:left; padding-left:20px;}
	
}
*/
@media (max-width: 380px) {
	.year-header {font-size:2rem; letter-spacing:-2px;}
	.checkbox-container .twobtn{bottom:-78px; }
}
/*
@media (max-width: 468px) {
    .year-header {
        font-size: 20px;
        margin-bottom: 15px;
    }
    
    .year-count {
        font-size: 14px;
        display: block;
        margin-left: 0;
        margin-top: 5px;
    }
}
*/

/*

@media (max-width:600px) {
	
	.album-top{display:block; text-align:center;}
	.albumtrack{margin:0px auto;}
	.searchh-section{margin-top:20px; text-align:center; display:inline-block;}
	

}
@media (max-width: 500px) {
	.album-top{position:relative; height:32px; font-size:14px;}
	.album-top a{height:30px; line-height:30px; padding:0px;}
	.albumtrack{position:absolute; left:0px; top:0px; width:300px}
	body.en .albumtrack{width:340px;}
	.searchh-section .checkbox-item{display:none;}
	.searchh-section .mobile-search-btn{display:inline-block; position:absolute; right:0px; top:0px; font-size:14px; height:32px; line-height:32px; padding:0px 15px; border:solid 1px #1E90FF !important; color:#1E90FF !important; background-color:transparent !important;}
}
@media (max-width: 639px) {
	.album-top{height:auto; margin-top:25px;}
	.albumtrack{position:static; width:100% !important; border:none;}
	.albumtrack a{position:relative;}
	.albumtrack a.sel{background-color:transparent;}
	.albumtrack a:nth-child(1):after{content:''; display:inline-block; width:1px; height:15px; position:absolute; right:0px; top:5px; background-color:#ccc;}
	.searchh-section{width:100%; margin-top:5px;}
	.searchh-section .mobile-search-btn{position:static; width:100% !important;}
}

*/






/* 결과 정보 스타일 개선 
.result-info .years-info {
    color: #00bfff;
    font-weight: bold;
}
*/



/* 앨범 그리드 */
.albums-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; margin-bottom: 40px; }
.album-card { background-color: rgba(255,255,255,0.07); border-radius: 8px; overflow: hidden; transition: transform 0.3s, box-shadow 0.3s; cursor:pointer; }
.album-card:hover { transform: scale(1.05);  }
.album-card.hide_album {opacity:0.5;}
.album-thumb { width: 100%; aspect-ratio: 1; 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; border-radius: 25px; }
.album-thumb img { width: 100%; height: 100%; object-fit: cover; }
.album-info { padding: 15px; }
.album-title { color: #111; font-size: 18px; font-weight: 700; margin-bottom: 8px; line-height: 1.3; max-height:2.6em; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.album-title .artist{color:#444; font-weight:400; font-size:0.9em;}
.album-meta {  font-size:15px; color: #888; margin-bottom: 5px; }
.album-company { font-size: 13px; color: #aaa; margin-bottom: 8px; }
.album-badges { display: flex; gap: 4px; flex-wrap: wrap; }
.badge { color: white; font-size: 13px; padding: 3px 8px; border-radius: 12px; }

.badge.composer { background-color: #ff6b6b; }
.badge.director { background-color: #4ecdc4; }
.badge.band { background-color: #ffe66d; color: #333; }


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

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

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

@media (max-width: 800px) {
	.albums-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 15px;
	}
	
	.search-form {
		flex-direction: column;
		align-items: stretch;
	}
	
	
	.filter-options {
		flex-wrap: wrap;
	}
}

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

/* 빈 상태 */
.empty-state {
	text-align: center;
	padding: 60px 20px;
	color: #666;
}

.empty-state .icon {
	font-size: 48px;
	margin-bottom: 20px;
}





/* 기존 CSS에 추가할 내용 */



/* 앨범 체크박스 */
.album-checkbox {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 10;
	border:solid 1px #555;
	line-height:1px;
	border-radius:4px;
	overflow:hidden;
}

.album-checkbox input[type="checkbox"] {
    width: 20px;
    height: 20px;
    cursor: pointer;
    accent-color: #fff;
}

/* 대표곡 표시 */
.representative-tracks {
    font-size: 12px;
    color: #999;
    margin-bottom: 5px;
    line-height: 1.3;
    min-height: 16px;
}

.no-representative {
    font-style: italic;
    color: #666;
}



/* 역할분류설정 팝업 */
.role-manage-popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
}
.selected-info {
    color: #111;
    margin-bottom: 20px;
    font-size: 14px;
    text-align: center;
}


.role-actions {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.role-action-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px;
    background-color: rgba(0, 0, 0, 0.05);
    border-radius: 6px;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.role-name {
    font-weight: bold;
    font-size: 14px;
}

.role-buttons {
    display: flex;
    gap: 8px;
}

.btn-assign,
.btn-remove {
    padding: 6px 12px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 500;
    transition: all 0.3s ease;
}

.btn-assign {
    background-color:#aaa;
    color: white;
}

.btn-assign:hover {
	background-color:#888; 
}

.btn-remove {
    background-color: #dc3545;
    color: white;
}

.btn-remove:hover {
    background-color: #c82333;
}

.popup-footer {
    padding: 15px 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    text-align: center;
}

/* 데스크톱에서만 보이는 역할 체크박스 
@media (max-width: 767px) {
    .desktop-only {
        display: none;
    }
}
*/
/* 반응형: 역할분류설정 팝업 */
@media (max-width: 480px) {
    .role-manage-content {
        width: 95%;
        margin: 20px;
    }
    
    .role-action-item {
        flex-direction: column;
        gap: 10px;
        text-align: center;
    }
    
    .role-buttons {
        justify-content: center;
    }
    
    .admin-controls {
        margin-left: 0 !important;
        margin-top: 10px;
        text-align: center;
    }
}