/* 2026.06 캠페인송 뮤직비디오 공모전 */


/*----------------------------------------------------
Index
----------------------------------------------------*/
.page-contest-music-video .page-header + *:not(.no-data){padding-top:24px !important}
@media(min-width:768px){
  .page-contest-music-video .page-header + *:not(.no-data){padding:40px !important}
}

/* common : 다운로드 버튼 */
.download-btns{display:flex; gap:6px; flex-wrap:wrap; margin-top:4px}
.btn-download-resource{display:inline-block; box-shadow:0 0 0 1px inset var(--color-primary); font-size:15px; line-height:1.4; font-weight:500; width:auto; padding:15px 18px 15px 40px; background:#FFF url('/images/contest/music-video/ico_download.svg') no-repeat left 14px center / 22px; text-align:left}
.btn-download-resource:hover{background-color:var(--color-lightgreen-bg)}
.btn-download-resource.song{background-image:url('/images/contest/music-video/ico_song.svg')}
.btn-download-resource.sheet{background-image:url('/images/contest/music-video/ico_sheet.svg')}
@media(max-width:393px){
  .btn-download-resource{width:100%}
}


/* 비주얼 ---------- */
/* 다운로드 버튼 */
.musicvideo-visual .download-btns{justify-content:center}

.musicvideo-visual{position:relative; min-height:470px; display:flex; flex-direction:column; align-items:center; padding-top:20px; padding-bottom:0; box-sizing:border-box; overflow:hidden; background-color:#fff}
.musicvideo-visual .comp-heading{position:relative; z-index:2;row-gap:16px; align-items:center}
.musicvideo-visual .title{color:#444}
.musicvideo-visual .sub{font-size:16px; line-height:1.3; letter-spacing:-0.02em; font-weight:500; color:var(--color-gray-b)}
.musicvideo-visual .primary{color:var(--color-primary)}
.musicvideo-visual .desc{line-height:1.6; font-weight:400; color:var(--color-gray-b); max-width:100%}
.musicvideo-visual .desc span{font-weight:500; color:var(--color-primary)}
.musicvideo-visual .period{font-size:14px; color:#FFF; font-weight:500; background-color:var(--color-primary); display:inline-block; padding:10px 18px; border-radius:999px; align-self:center}
.musicvideo-visual br{display:block}
/* 배경이미지 */
.musicvideo-visual .visual-img{position:relative; width:100%; height:300px; margin-top:-80px; z-index:1; background:url('/images/contest/music-video/visual.jpg') no-repeat center bottom / cover}
.musicvideo-visual .visual-img::before{content:''; position:absolute; left:0; top:0; right:0; height:180px; display:block; width:100%; background:linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0.9) 40%, rgba(255,255,255,0) 100%)}

@media(max-width:559px){
  .musicvideo-visual .visual-img{height:250px; background-size:155% auto; background-position:right bottom}
  .musicvideo-visual .visual-img::before{background:linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 42%, rgba(255,255,255,0.9) 54%, rgba(255,255,255,0) 90%)}
}
@media(min-width:768px){
  .musicvideo-visual .visual-img{height:320px; margin-top:-30px}
}
@media(min-width:1070px){
  /* 다운로드 버튼 */
  .musicvideo-visual .download-btns{margin-top:8px}
  
  .musicvideo-visual{min-height:860px; padding-top:60px; padding-bottom:180px}
  .musicvideo-visual .comp-heading{row-gap:24px}
  .musicvideo-visual .title{font-size:56px}
  .musicvideo-visual .sub{font-size:20px}
  .musicvideo-visual .desc{font-size:18px}
  .musicvideo-visual .period{font-size:18px; padding:12px 24px}
  /* 배경이미지 */
  .musicvideo-visual .visual-img{position:absolute; left:50%; top:0; right:0; bottom:0; height:100%; margin-top:0; background-position:center bottom; background-size:cover; transform:translateX(-50%)}
  .musicvideo-visual .visual-img::before{content:''; position:absolute; left:0; top:0; right:0; bottom:0; width:100%; height:100%; background:linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0.96) 22%, rgba(255,255,255,0.72) 38%, rgba(255,255,255,0) 62%)}
}
/* 1920보다 크면 좌우에 흰색 그라데이션 추가 */
@media(min-width:1921px){
  .musicvideo-visual .visual-img{width:1920px;
  background:linear-gradient(to right, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 10%, rgba(255,255,255,0) 90%, rgba(255,255,255,1) 100%), url('/images/contest/music-video/visual.jpg'); background-position:left center, center bottom; background-repeat:no-repeat, no-repeat; background-size:cover, cover}
}

/* @2x */
@media only screen and (-webkit-min-device-pixel-ratio:1.5), only screen and (min-resolution:1.5dppx), (-webkit-min-device-pixel-ratio:1.5), (min-resolution:144dpi){
  .musicvideo-visual .visual-img{background-image:url('/images/contest/music-video/visual@2x.jpg')}
  /* 1920보다 크면 좌우에 흰색 그라데이션 추가 */
  @media(min-width:1921px){
    .musicvideo-visual .visual-img{background:linear-gradient(to right, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 10%, rgba(255,255,255,0) 90%, rgba(255,255,255,1) 100%), url('/images/contest/music-video/visual@2x.jpg'); background-position:left center, center bottom; background-repeat:no-repeat, no-repeat; background-size:cover, cover}
  }
}


/* 본문 ---------- */
.musicvideo-contents .item .item-title{font-size:18px; font-weight:700; line-height:1.4; letter-spacing:-0.02em; color:var(--color-title)}
.musicvideo-contents .item .desc{font-size:16px; font-weight:300; line-height:1.6; letter-spacing:-0.01em; color:var(--color-body); margin-top:8px}

.musicvideo-contents .task-box{margin-top:14px; gap:16px}
.musicvideo-contents .task-box .task-item{display:inline-block}
.musicvideo-contents .task-box .task-item .step{color:var(--color-primary); font-size:13px; line-height:1.4; letter-spacing:-0.01em; font-weight:500}
.musicvideo-contents .task-box .task-item .text{display:flex; flex-direction:column; gap:4px}
.musicvideo-contents .task-box .task-item .text .info{margin-top:0px}
.musicvideo-contents .task-box .task-item .btns{margin-top:12px; width:100%; display:flex; gap:8px}
.musicvideo-contents .task-box .task-item .btns .btn{flex:1; width:100%}
.musicvideo-contents .task-box .task-item .btns .btn.line{display:inline-flex; align-items:center; justify-content:center; gap:6px; box-shadow:0 0 0 1px inset var(--color-primary); font-size:15px; line-height:1.4; font-weight:500}
/* 다운로드 버튼 */
.task-box .download-btns{margin-top:10px}
/* guide */
.musicvideo-contents .guide{display:flex; flex-direction:column; gap:6px; margin-top:8px}
.musicvideo-contents .guide .link{text-decoration:underline; text-underline-offset:3px; transition:color .3s ease}
.musicvideo-contents .guide .link:hover{color:var(--color-primary)}
.musicvideo-contents .guide li{padding-left:15px; position:relative}
.musicvideo-contents .guide li::before{content:'•'; position:absolute; left:0; top:0}

@media(min-width:768px){
  .musicvideo-contents .task-box .task-item .text .info{font-size:14px}
}
@media(min-width:1070px){
  .musicvideo-contents .item .item-title{font-size:24px}
  .musicvideo-contents .task-box{padding:32px}
  .musicvideo-contents .task-box .task-item .title{font-size:16px}
}


/* 내가쓴글---------- */
/* title */
.musicvideo-mypost .title-wrap .title{font-size:18px; font-weight:700; line-height:1.4; letter-spacing:-0.02em; color:var(--color-title)}
.musicvideo-mypost .title-wrap .desc{font-size:16px; font-weight:300; line-height:1.6; letter-spacing:-0.01em; color:var(--color-body); margin-top:8px}
/* list */
.musicvideo-mypost .lists .text-wrap{gap:6px}
.musicvideo-mypost .lists .text-wrap .period{font-size:13px; line-height:1.3; letter-spacing:-0.02em; color:var(--color-gray-e)}
.musicvideo-mypost .lists .text-wrap .badge{color:var(--color-primary); background-color:transparent; border:1px solid var(--color-primary); line-height:1.3}
.musicvideo-mypost{gap:20px}

@media(min-width:768px){
  .musicvideo-mypost{padding:40px}
}
@media(min-width:1070px){
  .musicvideo-mypost .title-wrap .title{font-size:24px}
  .musicvideo-mypost .lists .text-wrap{gap:8px}
  .musicvideo-mypost .lists .text-wrap .desc{font-size:15px}
  .musicvideo-mypost .lists .text-wrap .date{font-size:14px}
}



/*----------------------------------------------------
View
----------------------------------------------------*/
.page-contest-view .badge.target{background-color:var(--color-primary)}
.page-contest-view .writer-info{display:flex; justify-content:center; column-gap:8px; flex-wrap:wrap; row-gap:2px; font-size:14px; line-height:1.3; color:var(--color-gray-c)}

.teammate-info{margin-bottom:24px}
.teammate-info .title{font-size:16px; line-height:1.4; font-weight:500; color:var(--color-primary); margin-bottom:8px}
.teammate-info .teammate-list{font-size:16px; line-height:1.4; display:flex; flex-direction:column; gap:4px}
.teammate-info .teammate-list li{position:relative; padding-left:14px;}
.teammate-info .teammate-list li::before{content:'•'; position:absolute; left:0; top:1px}

/* 공모전 성도인증 -------------------- */
.pop-member-checking .pop-tit::before{background-image:url('/images/ico_3d_check.svg')}
.pop-member-checking .pop-con{text-align:left; display:flex; gap:12px; flex-direction:column}
.pop-member-checking .form-label-sub{font-size:14px}
.pop-member-checking .status-message{margin:0}
.pop-member-checking .btn-auth-link{display:block; width:100%; font-size:14px; line-height:1.4; color:var(--color-gray-c); text-align:center; margin-top:4px}
.pop-member-checking .btn-auth-link:hover{color:var(--color-primary)}



/*----------------------------------------------------
Write
----------------------------------------------------*/
.page-contest-write .form-group{display:flex; flex-direction:column; gap:24px}
.page-contest-write .checkbox-group{gap:10px}

/* 성도여부 */
.check-member{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.check-member .btn-auth{border:1px solid var(--color-primary); border-radius:999px; padding:4px 8px; color:var(--color-primary); font-size:13px; background-color:#FFF}
.check-member-done{color:var(--color-gray-e)}
.check-member-done .status{margin-right:5px}
.check-member-done .church{color:#AAA}

/* 팀원 참가자 */
.teammate{display:flex; flex-direction:column; gap:10px; margin-top:6px}
.teammate-title{font-size:15px; line-height:1.5;  color:var(--color-primary)}
.btn-add-member{margin-top:6px}