/* DEV : 개발자가 임의로 CSS를 추가하는 곳 */
/* 플레이어 > 그룹 반복 버튼 */
.ico-player-group-repeat::before { background-image: url("../images/ico_player_group_repeat.svg"); } 
.player .music-control .btn-player .ico-player-group-repeat.on { opacity: 1; filter: invert(18%) sepia(72%) saturate(4101%) hue-rotate(237deg) brightness(104%) contrast(106%); } 

/* 내 플레이리스트 추가 팝업 취소 버튼 */
.popup-playlist-add .btn-concal { min-width:32px; max-width:72px; min-height:32px; flex-shrink:0; color:var(--color-accent); font-size:15px; font-weight:500; line-height:1.3; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden } 

/* AddToPlaylist 미리보기 이미지: 가로/세로 비율 관계없이 꽉 차게 */
.popup-playlist-add .playlist-item .thum img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; } 

/* 내플레이리스트 수정 페이지에서, AddToPlaylist를 열 경우, img file input 클릭되게 */
.page-myplaylist-edit .modal-overlay .thum { pointer-events: auto; } 

/* 가사 페이지에서, 제목만 있을 때, 링크 영역 세로 중앙 정렬 */
.music-item.lyrics-item.is-title-only .music-link { align-items: center !important; } 

/* 노래 목록 뷰 세로방향으로 표시 */
.music-list-view { grid-template-rows:repeat(4, 1fr); grid-auto-flow:column; } 
@media (max-width: 1480px){
 .music-list-view { grid-template-rows:repeat(5, 1fr); } 
 }

/* 플레이어 반복 버튼 */
.music-player .music-control .controls .btn-repeat .on, 
.music-player .music-control .controls .btn-shuffle .on { opacity:1 !important; } 

/* pdf viewer */
.pdf-viewer-container { display: flex; flex-direction: column; align-items: center; padding: 20px; position: relative; } 

.pdf-toolbar { position: fixed; left: 50%; transform: translateX(-50%); bottom: 0; z-index: 1000; display: flex; align-items: center; width: 100%; max-width: min-content; background: rgba(255, 255, 255); padding: 5px; border-radius: 8px; box-shadow: 0 7px 14px rgba(0, 0, 0, 0.2); gap: 5px; } 
.pdf-toolbar .page-controls,
.pdf-toolbar .zoom-controls { display: flex; gap: 5px; align-items: center; } 
.pdf-toolbar button { color: var(--color-text); border: none; border-radius: 4px; cursor: pointer; font-size: 14px; width: max-content; height: max-content; padding:2px; min-width: 32px; min-height: 32px; transition: all 0.2s; } 
.pdf-toolbar button:hover:not(:disabled) { color: #2563eb; } 
.pdf-toolbar button:disabled { color: #cbd5e1; cursor: not-allowed; opacity: 0.6; } 
.pdf-toolbar .zoom-display { min-width: 60px; text-align: center; font-weight: 600; color: #1e293b; font-size: 16px; } 

.pdf-viewer { display: flex; align-items: center; width: 100%; height: 100%; position: fixed; } 

/* 스크롤 컨테이너 - 고정 크기 */
.pdf-scroll-container { flex: 1; overflow: auto; height: 100%; width: 100%; position: relative; user-select: none; } 
.pdf-scroll-container.is-draggable { cursor: grab; } 
.pdf-scroll-container.is-dragging { cursor: grabbing !important; } 

/* PDF 내부 래퍼 - 확대 시 크기 증가 */
.pdf-scroll-container .pdf-inner-wrapper { min-width: 100%; min-height: 100%; display: flex; justify-content: center; align-items: flex-start; } 
.pdf-viewer .pdf-pages { position: relative; display: flex; justify-content: center; } 
.pdf-viewer .pdf-pages .pdf-page-wrapper { position: relative; background: white; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); border-radius: 8px; overflow: hidden; pointer-events: none; /* 드래그를 위해 PDF 인터랙션 비활성화 */ } 
.pdf-viewer .pdf-pages .pdf-page { display: block; width: 100%; height: auto; } 

.pdf-viewer .nav-button { border: none; width: 40px; height: 65px; cursor: pointer; transition: all 0.3s ease; } 
.pdf-viewer .nav-button.prev { position: absolute; z-index: 1000; left: 20px; bottom: 50%; } 
.pdf-viewer .nav-button.next { position: absolute; z-index: 1000; right: 20px; bottom: 50%; } 
.pdf-viewer .nav-button:disabled { cursor: not-allowed; opacity: 0.5; } 

.pdf-pages .move-prev { position: absolute; left: 0; top: 0; width: 50%; height: 100%; background-color: transparent; z-index: 500; } 
.pdf-pages .move-next { position: absolute; right: 0; top: 0; width: 50%; height: 100%; background-color: transparent; z-index: 500; } 

.pdf-pages .toast-msg { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: rgba(0, 0, 0, 0.8); color: white; padding: 10px 15px; border-radius: 5px; z-index: 500; transition: all 0.5s ease-in-out; } 

@media (max-width: 768px){
 .nav-button { width: 50px; height: 50px; font-size: 20px; } 
 }
 
.ico-arrow-left::before { content: ""; width: 100%; height: 100%; display: inline-block; background: url("/images/ico_arrow_lg.svg") center/100% no-repeat; transform: rotate(0deg); } 
.ico-arrow-right::before { content: ""; width: 100%; height: 100%; display: inline-block; background: url("/images/ico_arrow_lg.svg") center/100% no-repeat; transform: rotate(180deg); } 
.ico-arrow-left-sm::before { content: ""; width: 100%; height: 100%; display: inline-block; background: url("/images/ico_arrow_open.svg") center/100% no-repeat; transform: rotate(90deg); } 
.ico-arrow-right-sm::before { content: ""; width: 100%; height: 100%; display: inline-block; background: url("/images/ico_arrow_open.svg") center/100% no-repeat; transform: rotate(-90deg); } 

/* 메인 공지사항 배너 */
.notice-banner.represent { padding-bottom:0 !important; padding-top:0 !important; position:relative; height:100px; } 
.notice-banner.represent .title-wrap { position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); display:flex; flex-direction:column; gap:5px; justify-content:center; width:320px; } 

/* Player: 오른쪽 → 왼쪽 무한 롤링 (넘칠 때만 is-rolling로 동작) */
.player .music-info .track .music-title,
.player .music-info .track .category-item { position: relative; overflow: hidden; } 

.player .music-info .track .music-title .marquee-track,
.player .music-info .track .category-item .marquee-track { display: inline-flex; white-space: nowrap; } 

.player .music-info .track .music-title.is-rolling .marquee-track,
.player .music-info .track .category-item.is-rolling .marquee-track { animation: marquee-rtl 10s linear infinite; } 

.player .music-info .track .music-title.is-rolling .marquee-text,
.player .music-info .track .category-item.is-rolling .marquee-text { margin-right: 35px; } 

@keyframes marquee-rtl { 
 0% { transform: translateX(0); } 
 100% { transform: translateX(-50%); } /* 텍스트 2개를 이어붙였기 때문에 -50%로 완전 루프 */ } 

/* 검색 > 가사 목록 > 가사*/
.music-list-view .music-item .music-info { max-width: 194px; } 

/* 성가대 툴팁 */
.choir-player .music-info .tip-wrap { position:relative; } 
.choir-player .music-info .tip-wrap .thumbnail-tip { max-width: 400px; min-height: 40px; width: max-content; position: absolute; display: inline-flex; gap: 8px; padding: 8px 12px; background-color: var(--color-bg-option); border-radius: var(--radius); color: var(--color-text-body); font-size: 13px; line-height: 1.4; backdrop-filter: blur(6px); z-index: 100; top: 58px; left: -40px; align-items: center; box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.1); border: 1px solid var(--color-border); } 
.choir-player .music-info .tip-wrap .thumbnail-tip .btn-tip-close { display:flex; align-items:center; justify-content:center; background:none; cursor:pointer; opacity:0.6 } 
.choir-player .music-info .tip-wrap .thumbnail-tip .ico-close { width:14px; height:14px } 
.choir-player .music-info .tip-wrap .thumbnail-tip .tip-arrow { content:''; position:absolute; top:-10px; left:6px; width:10px; height:10px; background-color: var(--color-bg-option); clip-path: polygon(50% 0%, 0 100%, 100% 100%); backdrop-filter:blur(6px); } 

/* 2차 비밀번호 오류 */
.login .text-wrap .login-desc.error { color:var(--color-accent) !important } 

/* 응모하기 성도 검색*/
.ms-root { position: relative; width: 250px; } 
.ms-root input { width: calc(100% - 18px); } 

.ms-root .search-box { width: 100%; max-width: none; display: flex; } 
.ms-root .search-box { border: 1px solid var(--color-border); padding: 0 8px; background: #fff; height: 36px; border-radius: 6px; } 
.search-box input { line-height: 1.4; background: transparent; font-size: 15px; } 
.ms-root .search-box button { width: 18px; cursor: pointer; padding: 0; } 
.ms-root .size-md { width: 20px; } 
.ms-root .size-sm { width: 16px; } 

.ms-root .search-result { display: flex; max-width: none; align-items: center; justify-content: space-between; } 
.ms-root ul { position: absolute; z-index: 10; background-color: #fff; border: 1px solid #dcdee7; border-radius: 6px; white-space: nowrap; min-width: 100%; } 

.ms-root li:hover { background-color: #F2F7FF; cursor: pointer; } 
.ms-root li:last-of-type { padding-bottom: 8px; } 
.ms-root li:first-of-type { padding-top: 8px; } 
.ms-root li { display: block; padding: 4px 10px; font-size: 14px; } 

.ms-root .text-title { font-size: 13px; line-height: 1.6; } 
.ms-root .text-desc { font-size: 12px; line-height: 1.5; color: var(--color-text-sub); } 

.main:has(.side-panel-wrapper) .apply-wrap .table td.col-title[data-category]:not([data-category=""])[data-subject=""]::after { content: attr(data-category); } 
.main:has(.side-panel-wrapper) .apply-wrap .table td.col-title[data-subject]:not([data-subject=""])[data-category=""]::after { content: attr(data-subject); } 
.main:has(.side-panel-wrapper) .apply-wrap .table td.col-title[data-category=""][data-subject=""]::after { content: none; } 

@media (max-width: 1480px) {/* category만 있을 때 */
.apply-wrap .table td.col-title[data-category]:not([data-category=""])[data-subject=""]::after { content: attr(data-category); } 

/* subject만 있을 때 */
.apply-wrap .table td.col-title[data-subject]:not([data-subject=""])[data-category=""]::after { content: attr(data-subject); } 
/* category와 subject 모두 없는 경우 */
 .apply-wrap .table td.col-title[data-category=""][data-subject=""]::after { content: none; } 
 }

/* 사용방법 가이드 */
.page-apply .guide-title { display: flex; align-items: center; gap: 1px; font-size: 14px; font-weight: 500; line-height: 1.3; color: var(--color-text-desc); } 
.page-apply .guide-title .ico-tip::before { width: 16px; height: 16px; } 

.tg-tooltip-max,
.tg-overlay-max { z-index: 2147483647 !important; } 

.tg-tooltip-max { max-width: fit-content !important; } 
.tg-dialog-body { white-space: pre-line; p { font-size: 14px; font-weight: 500; line-height: 1.3; color: var(--color-text-desc); } 
 }

/* 모바일 apply 페이지 */
.main-content-mobile { width:100%; height:100vh; position:relative; margin:0 auto; padding: 20px; overflow-y:auto; scrollbar-width:thin; -ms-overflow-style:thin } 
.page-title-mobile { display:flex; align-items:center; gap:8px; font-size:22px; font-weight:600; line-height:1.3; color:var(--color-text-primary) } 
.page-title-mobile.close { display:flex; justify-content:space-between; align-items:center; } 
.page-title-mobile .ico-arrow { display:none; background-image:url('../images/ico_arrow.svg'); background-size:14px 22px; rotate:180deg; flex-shrink:0 } 
.page-title-mobile.arrow .ico-arrow { display:inline-block; margin-left:-5px } 

/* 모바일 apply 페이지 배너 */
.apply-banner-wrap-mobile { margin-top:24px; } 
.page-mobile .apply-banner .banner-wrap { width:100%; background-position:center; background-size:100%; background-repeat:no-repeat; position:relative; z-index:1; overflow:hidden } 
.page-mobile .apply-banner-wrap .apply-banner-03 .banner-img { background-image:url('../images/banner_apply_03.png'); top:50%; transform:translateY(-50%); right:-90px } 
.page-mobile .apply-banner-wrap .apply-banner-04 .banner-img { background-image:url('../images/banner_apply_04.png'); top:50%; transform:translateY(-50%); right:-90px } 

/* 모바일 apply 페이지 메뉴 */
.page-mobile .menu-tab.mobile { margin-top:24px; } 
.page-mobile .menu-tab, .page-mobile .list-toolbar { margin: 16px 0; font-size:15px; } 

/* 모바일 apply 페이지 검색 */
.page-mobile .list-toolbar .btn-option { padding:5px; font-size:12px; line-height:1.3 } 
.page-mobile .list-toolbar .ico-search { width:20px; height:20px; background-repeat:no-repeat; background-position:center; opacity:0.7 } 
.page-mobile .list-toolbar .search-input { position:absolute; width:100%; left:0; right:0 } 
.page-mobile .list-toolbar .search-input .btn-cancel { display:inline-block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis } 
.page-mobile .list-toolbar .search-input .btn-delete,
.page-mobile .list-toolbar .search-input .btn-cancel { flex-shrink:0 } 

/* 모바일 apply 페이지 테이블 */
.page-mobile .apply-wrap .table thead th.col-title,
.page-mobile .apply-wrap .table thead th.col-date { padding: 10px; } 
.page-mobile .apply-wrap .table thead th { padding: 2px; } 
.page-mobile .apply-wrap .table tbody td { padding: 10px 5px; font-size:14px; line-height:1.3; } 
.page-mobile .apply-wrap .table tbody td.col-title { display: flex; flex-direction: column; gap: 4px; } 
.page-mobile .apply-wrap .table tbody td.col-title .info { display: flex; align-items: center; gap: 8px; } 
.page-mobile .apply-wrap .table tbody td.col-title .info .status { display:inline-flex; align-items:center; } 
.page-mobile .apply-wrap .table tbody td.col-title .date { font-size:13px; font-weight:400; line-height:1.4; color:var(--color-text-sub); white-space:nowrap; overflow:hidden; text-overflow:ellipsis } 
.page-mobile .apply-wrap .table tbody td.col-title .category { font-size:13px; font-weight:400; line-height:1.4; color:var(--color-text-sub); white-space:nowrap; overflow:hidden; text-overflow:ellipsis } 
.page-mobile .apply-wrap .table tbody td.col-title::after { content:none; } 

/* 모바일 apply 페이지 리스트 */
.page-mobile .apply-wrap .apply-item { display:flex; align-items:center; gap:8px; } 
.page-mobile .apply-wrap .apply-list-item { width:100%; display:flex; justify-content:space-between; align-items:center; gap:8px; padding:12px; border-bottom:1px solid var(--color-border-list); } 
.page-mobile .apply-wrap .apply-list-item:first-of-type { border-top:1px solid var(--color-border-list); } 

.page-mobile .apply-wrap .apply-item-content { display:flex; flex-direction:column; gap:4px; } 
.page-mobile .apply-wrap .apply-item-content .title { font-size:15px; line-height:1.3; color:var(--color-text-primary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis } 
.page-mobile .apply-wrap .apply-item-content .apply-detail { display:flex; flex-direction: column; font-size:13px; font-weight:400; line-height:1.4; color:var(--color-text-sub); white-space:nowrap; overflow:hidden; text-overflow:ellipsis } 

/* 모바일 apply view 리스트 */
.page-mobile .apply-wrap .date { font-size:13px; font-weight:400; line-height:1.4; color:var(--color-text-sub); white-space:nowrap; overflow:hidden; text-overflow:ellipsis } 
.page-mobile .apply-wrap .apply-num { width:fit-content; max-width:100%; height:24px; display:inline-flex; margin-right:8px; align-items:center; justify-content:center; padding:2px 8px; border-radius:var(--radius-circle); border:1px solid var(--color-primary); color:var(--color-primary); font-size:13px; line-height:1.5; text-align:center; } 
.page-mobile .apply-wrap .d-day { height:24px; display:inline-flex; align-items:center; justify-content:center; padding:2px 10px; border-radius:var(--radius-circle); background-color:#FFF0F5; font-size:13px; font-weight:600; line-height:1.3; color:#FF0043 } 
.page-mobile .apply-wrap .applicant { height:24px; margin-right:8px; display:inline-flex; align-items:center; justify-content:center; padding:2px 10px; border-radius:var(--radius-circle); background-color:#F0F3FF; font-size:13px; font-weight:600; line-height:1.3; color:var(--color-primary) } 


/* 모바일 apply view 버튼 */
.page-mobile.page-apply-view .apply-title { font-size:30px; } 
.page-mobile.page-apply-view .btn-wrap { display:flex; gap:8px; justify-content:center; } 
.page-mobile.page-apply-view .btn { min-width: 100px; } 
.page-mobile.page-apply-write .btn-wrap { display:flex; gap:8px; justify-content:center; } 
.page-mobile.page-apply-write .btn { min-width: 100px; } 

/* 모바일 apply footer 페이지 */
.footer-mobile { min-width:auto; padding-left: 0px; padding-right: 0px; } 

/* 모바일 apply write 페이지 */
.page-mobile.page-apply-write .tip-box.mobile { margin-top:5px; } 

/* 모바일 apply compose view 페이지 */
.page-mobile.page-apply-view .apply-head { display: flex; flex-direction: column; gap: 12px; } 
.page-mobile.page-apply-compose-view .my-apply .apply-title { font-size:24px; } 

.eq-line.stop { animation-play-state: paused; } 

/* 중지 상태에서 각 막대를 다른 높이로 */
.eq-line.stop:nth-child(1) { transform: scaleY(0.35); } 
.eq-line.stop:nth-child(2) { transform: scaleY(0.65); } 
.eq-line.stop:nth-child(3) { transform: scaleY(0.9); } 
.eq-line.stop:nth-child(4) { transform: scaleY(0.5); } 
.eq-line.stop:nth-child(5) { transform: scaleY(0.75); }

/* 가사 없음 */
.modal-popup .popup-lyrics{height: 100%;}