/* page-contest */

body article .section:last-child{padding-bottom:60px}
@media(min-width:1070px){
  body article .section:last-child{padding-bottom:100px}
}

:root{--color-green:#00AF4F}
.page-contest-2025-letter .wrap{max-width:var(--width-md)}



/*----------------------------------------------------
intro
----------------------------------------------------*/
/* visual ---------- */
.page-contest header,
.contest-visual{background-color:#FFFAE0}
/* .page-contest header.scrolled{background-color:rgba(255, 250, 224, 0.9)} */
.page-contest header.scrolled{background-color:rgba(252, 249, 244, 0.9)}

/* img */
.contest-visual{text-align:center; padding-bottom:80px; position:relative}
.contest-visual::before, .contest-visual::after{content:''; position:absolute; bottom:0; width:200px; height:100%; background-repeat:no-repeat; background-size:contain}
.contest-visual::before{left:15px; background-image:url('/images/contest_2025_visual1.png'); background-position:left bottom}
.contest-visual::after{right:15px; background-image:url('/images/contest_2025_visual2.png'); background-position:right bottom}

/* text */
.contest-visual .wrap{max-width:500px; display:flex; flex-direction:column; align-items:center; gap:10px; position:relative; z-index:1}
.contest-visual .closed{font-size:14px; padding:10px 16px; margin-bottom:12px; color:#FFF; background-color:#222; display:inline-block; border-radius:999px; line-height:1.6}
.contest-visual .sub{font-size:18px; color:var(--color-green); letter-spacing:-0.03em; font-weight:500}
.contest-visual .title{font-size:32px; line-height:1.25; color:#FFBB00; font-weight:700; letter-spacing:-0.02em} /*ko32*/
.contest-visual .title span{color:#A06E34}
.contest-visual .title br{display:block}
.contest-visual .desc{font-size:15px; color:#635545; line-height:1.5; margin-top:0}
.contest-visual .date{font-size:16px; margin-top:12px; color:#FFF; font-weight:500; background-color:var(--color-green); display:inline-block; padding:13px 24px; border-radius:999px}

@media(min-width:768px){
  .contest-visual{padding-top:30px; padding-bottom:120px}
  .contest-visual::before, .contest-visual::after{width:400px}
  .contest-visual::before{left:40px}
  .contest-visual::after{right:40px}
  .contest-visual .wrap{max-width:580px; gap:18px}
  .contest-visual .closed{font-size:17px; padding:13px 24px}
  .contest-visual .sub{font-size:22px}
  .contest-visual .title{font-size:50px; line-height:1.2} /*ko64*/
  .contest-visual .desc{font-size:18px}
  .contest-visual .date{font-size:18px; margin-top:10px; padding:17px 30px}
}
@media(min-width:1070px){
  .contest-visual{padding-top:60px}
  .contest-visual::before, .contest-visual::after{width:600px}
  .contest-visual .wrap{gap:24px; max-width:800px}
  .contest-visual .sub{font-size:24px}
  .contest-visual .title{font-size:56px; line-height:1.1} /*ko82*/
  .contest-visual .desc{font-size:19px; max-width:var(--width-md)}
  .contest-visual .date{font-size:20px; margin-top:20px; padding:19px 32px}
}
@media(min-width:1400px){
  .contest-visual::before{left:70px}
  .contest-visual::after{right:70px}
}


/* detail ---------- */
/* summary */
.contest-summary{background-color:#FFDB60; padding:56px 30px}
.contest-summary .wrap{background-color:#FFF; border-radius:15px; padding:24px 20px; display:flex; flex-direction:column; gap:24px}

.contest-summary .detail{display:flex; flex-direction:column; gap:16px; line-height:1.7}
.contest-summary .detail dl{display:flex; gap:8px; flex-direction:column}
.contest-summary .detail dt{flex-shrink:0}
.contest-summary .detail h3{background-color:#A06E34; font-size:14px; color:#FFF; border-radius:999px; padding:7.5px 12px; display:inline-block; line-height:1.3}
.contest-summary .detail dd{font-size:15px; color:#444}
.contest-summary .detail dd li{padding-left:15px; position:relative}
.contest-summary .detail dd li:not(:first-child){margin-top:5px}
.contest-summary .detail dd li::before{content:'•'; position:absolute; left:0; margin-right:5px}

/* notice */
.contest-summary .notice{background-color:#F8F8F8; border-radius:16px; padding:20px; line-height:1.7}
.contest-summary .notice .title{font-size:17px; font-weight:500; margin-bottom:10px}
.contest-summary .notice ul{font-size:15px; color:#444}
.contest-summary .notice ul li{padding-left:15px; position:relative}
.contest-summary .notice ul li:not(:first-child){margin-top:5px}
.contest-summary .notice ul li::before{content:'•'; position:absolute; left:0; margin-right:5px}

/* btn */
.btn-contest-write{width:100%; background-color:var(--color-green); color:#FFF; border-radius:12px; font-size:16px; padding:14px 20px}
.btn-contest-write:hover{background-color:#029f49}
.btn-contest-write::before{content:''; display:inline-block; width:20px; height:20px; background:url('/images/ico_pencil.svg') no-repeat center / contain}

.btn-contest-write.closed{background-color:#CCC}
.btn-contest-write.closed::before{display:none}

@media(min-width:768px){
  .contest-summary{padding-top:80px; padding-bottom:80px}
  .contest-summary .wrap{border-radius:24px; padding:40px; gap:32px}
  /* summary */
  .contest-summary .detail{gap:24px}
  .contest-summary .detail dl{gap:20px; flex-direction:row}
  .contest-summary .detail h3{font-size:16px; padding:11px 14px}
  /* 다국어 길이를 미리 짐작할 수가 없어서 우선 초기 세팅을 취소함 */
  .contest-summary .detail dt{width:220px}
  .contest-summary .detail dd{font-size:17px; padding-top:6px}
  /* notice */
  .contest-summary .notice{padding:24px}
  .contest-summary .notice ul{font-size:16px}
  /* btn */
  .btn-contest-write{font-size:20px; padding:16px 20px; border-radius:16px}
}



/*----------------------------------------------------
list
----------------------------------------------------*/
/* page header ---------- */
.page-header .theme{font-size:15px; color:#9E7B6D; font-weight:500; line-height:1.4}
/* index */
.page-contest .page-header{padding-top:30px}
@media(min-width:1070px){
  .page-header .theme{font-size:23px}
  /* index */
  .page-contest .page-header{padding-top:40px}
  .page-contest .page-header .theme{font-size:20px}
  .page-contest .page-header .title{font-size:44px}
  .page-contest .page-header .desc{font-size:17px}
}
:is(.page-contest, .page-write) .page-header .wrap::after{background-image:url('/images/img_visual_contest.svg')}


/* list ---------- */
.list-contest .list-item{border-bottom:0; padding-top:5px; padding-bottom:5px}
.list-contest .list-link{border-radius:12px; background-color:#FFF; padding:20px; height:100%; position:relative; box-shadow:inset 0 0 0 1px rgba(0, 0, 0, 0.06)}
.list-contest .draft{background-color:#A06E34; color:#FFF; border-radius:20px; font-size:13px; padding:4px 10px; display:inline-block; margin-top:10px}

@media(min-width:1070px){
  .list-contest{margin-left:-12px; margin-right:-12px; gap:0}
  .list-contest .list-item{padding:12px}
  .list-contest .list-link{border-radius:20px; flex-direction:column; padding:0; gap:0; overflow:hidden}
  .list-contest .list-link::after{border-radius:20px}
  .list-contest .post-excerpt{margin-top:10px; font-size:15px}
  .list-contest .list-item .info{width:100%; padding:32px}
  .list-contest .post-info{margin-top:8px}
  .list-contest .post-info .detail{margin-top:7px}
  .list-contest .draft{font-size:14px; margin-top:14px}
}



/*----------------------------------------------------
write
----------------------------------------------------*/
@media(min-width:1070px){
  .page-contest-write .page-header .title{line-height:1.2}
}


.page-contest-write .form-label{display:flex; flex-wrap:wrap; gap:8px; align-items:center}
.page-contest-write .form-guide{color:var(--color-brown); font-size:15px; line-height:1.5; margin:10px 0}


/* member authentication ---------- */
.check-member-done{color:#777}
.check-member-done .result{margin-right:5px; font-size:18px}
.check-member-done .church{color:#AAA; font-size:18px}
.check-member{display:flex; align-items:center; gap:10px}
.check-member .btn-auth{border:1px solid var(--color-primary); border-radius:999px; padding:4px 8px; color:var(--color-primary); font-size:14px; background-color:#FFF}


/* select country ---------- */
.page-contest-write .input-bg-inline{display:flex; gap:8px}
.page-contest-write .input-bg-inline > *{flex:1 1 0%}
.page-contest-write .droplayer .dropwrap::before{top:20px}
.page-contest-write .droplayer input{width:100%; font-size:16px; border-radius:8px; padding:15px; background:#FFF; border:1px solid rgba(0, 0, 0, 0.15); transition:all 0.2s ease; outline:none; box-shadow:none; -webkit-appearance:none; -moz-appearance:none; appearance:none; height:50px !important}
.page-contest-write .droplayer input::placeholder{color:#888}
.page-contest-write .droplayer input:hover{border-color:rgba(0, 0, 0, 0.2)}
.page-contest-write .droplayer .dropdown-lists{border:1px solid rgba(0, 0, 0, 0.15); z-index:100; top:49px}
.page-contest-write .droplayer .real-search{border-bottom: 1px solid rgba(0, 0, 0, 0.15) !important}
@media(max-width:767px){
  .input-bg-inline{flex-direction:column; gap:30px !important}
}

/* Check Box ---------- */
.form-check{margin-top:8px; margin-bottom:8px}
.form-check input{display:none !important}
.form-check .form-check-label{display:flex; align-items:center; cursor:pointer; -webkit-user-select:none; -webkit-user-select:none; webkit-tap-highlight-color:transparent}
.form-check .form-check-label > span{display:inline-block; vertical-align:middle; transform:translate3d(0, 0, 0)}
.form-check .form-check-label .check-ico{position:relative; width:22px; height:22px; border-radius:50%; transform:scale(1); vertical-align:middle; border:2px solid #d1d6db; transition:all 0.2s ease}
.form-check .form-check-input[type=checkbox] + .form-check-label .check-ico{border-radius:50%}
.form-check .form-check-label .check-ico svg{position:absolute; z-index:1; width:12px; height:9px; top:50%; left:50%; margin-top:-4px; margin-left:-6px; fill:none; stroke:white; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:16px; stroke-dashoffset:16px; transition:all 0.3s ease; transition-delay:0.1s; transform:translate3d(0, 0, 0)}
.form-check .form-check-label .check-ico:before{content:""; width:100%; height:100%; background-color:var(--color-primary); display:block; transform:scale(0); opacity:1; border-radius:50%; transition-delay:0.2s}
.form-check .form-check-label .cb-label{margin-left:8px; font-size:18px; color:#666}
.form-check .form-check-label .cb-label:after{content:""; position:absolute; bottom:0px; left:0; height:1px; width:100%; background-color:var(--color-primary); transform-origin:0 0; transform:scaleX(0)}
.form-check .form-check-label:hover .check-ico{border-color:var(--color-primary)}
.form-check .form-check-input:checked + .form-check-label .check-ico {flex-shrink:0; border-color:var(--color-primary); background-color:var(--color-primary); animation:checkbox-ani 0.6s ease}
.form-check .form-check-input:checked + .form-check-label .check-ico svg{stroke-dashoffset:0}
.form-check .form-check-input:checked + .form-check-label .check-ico:before{transform:scale(2.2); opacity:0; transition:all 0.6s ease}
.form-check .form-check-input:checked + .form-check-label .cb-label{color:var(--color-primary); transition:all 0.3s ease}
.form-check .form-check-input:checked + .form-check-label .cb-label:after{transform:scaleX(1); transition:all 0.3s ease}
.form-check-inline{display:inline-block; margin-right:24px}


/* file ---------- */
.input-group{position:relative; display:flex; flex-wrap:wrap; align-items:stretch; width:100%}
.input-field[type="file"]{position:absolute; top:0; left:0; width:0; height:0; opacity:0; padding:inherit}
.input-label-file{color:#8B95A1; cursor:pointer; width:100%; height:100%; display:flex;  align-items:center; overflow:hidden; white-space:nowrap; text-overflow:ellipsis}
.input-label-file > .ico{margin-right:4px}
.input.upload-name{padding-left:18px; padding-right:18px; color:#9da6b0}
/**/
.file-upload .btn-delete-file{position:absolute; right:2px; top:50%; width:48px; height:100%; color:rgba(0,0,0,0.3); font-size:17px; transform:translateY(-50%)}
.file-upload .btn-delete-file:hover{color:rgba(0,0,0,0.6)}
.file-upload .btn{width:48px; height:48px; cursor:pointer; border-radius:8px; padding:10px}
.file-upload .input-group > *:not(:last-child){margin-right:0}
.file-upload .input-group{margin-bottom:8px; gap:8px}
.file-upload .input.disabled{background-color:rgba(0,0,0,0.07); opacity:0.5}
.file-upload .input.upload-name{color:inherit; padding-left:16px; padding-right:45px; flex:1 1 auto; border-radius:8px}
.file-guide{color:#999; font-size:14px; line-height:1.5; margin:16px 0}
.file-guide li{padding-left:10px; position:relative}
.file-guide li:not(:first-child){margin-top:5px}
.file-guide li::before{content:'•';position:absolute; left:0; margin-right:5px}


/* agreement ---------- */
.page-contest-write .agreement{text-align:left}
.page-contest-write .agreement .text{box-shadow:inset 0 0 0 1px rgba(0, 0, 0, 0.15);
  border-radius:10px; background-color:#FFF; padding:15px 20px}
.page-contest-write .agreement .form-check{margin-top:10px; margin-bottom:10px}
.page-contest-write .agreement .form-check-input:checked + label{background-color:transparent}


/* popup - member checking ---------- */
.pop-member-checking{background-color:transparent; z-index:201}
.pop-member-checking .popin{max-width:400px; padding:60px 40px 50px; background-color:#FFF}
.pop-member-checking .pop-con{width:100%}
.pop-member-checking .pop-con .title{font-size:20px; font-weight:600; text-align:center}
@media(max-width:767px){
  .pop-member-checking .popin{display:block; height:100%; max-width:100%; max-height:100%; border-radius:0}
  .pop-member-checking .pop-con .title{text-align:left}
}
/* attach file */
.attached-file{background:rgba(0, 0, 0, 0.03); border-radius:16px; margin-bottom:30px; padding:12px 16px}
.attached-file li a{display:flex; align-items:center; gap:4px; font-size:14px; color:rgba(0, 0, 0, 0.6); line-height:1.6; padding:4px 0}
.attached-file li a .ico{width:20px; height:20px; background-image:url('../images/ico_clip.svg'); background-size:100%; background-repeat:no-repeat; background-position:center; flex-shrink:0}
.attached-file li a:hover{color:var(--color-primary)}
@media (min-width:1070px){
  .attached-file{margin-bottom:40px}
  .attached-file li a{gap:5px; font-size:15px; padding:5px 0}
}