/* Peacemaker */

/* --------------------------------------------------------------
Intro
-------------------------------------------------------------- */
:root{
  --color-peacemaker-pink:#F8606B;
  --color-peacemaker-brown:#9E7B6D;
  --color-peacemaker-green:#00AF4F;
  --color-peacemaker-blue:#3C82F3;
}

section:not(.visual){padding-top:30px; padding-bottom:30px}
@media(min-width:1070px){
  section:not(.visual){padding-top:50px; padding-bottom:50px}
}


/* Visual -------------------- */
.page-peacemaker .visual{padding-top:20px; padding-bottom:20px; position:relative; overflow:hidden}
.page-peacemaker .visual .visual-img{max-width:320px; margin:16px auto}
.page-peacemaker .visual .visual-img img{width:100%; height:auto}

/* text */
.page-peacemaker .visual .texts{text-align:center; display:flex; flex-direction:column; align-items:center; gap:16px}
.page-peacemaker .visual .title{position:relative; font-size:34px; font-weight:800; line-height:1.2; letter-spacing:-0.02em; color:#695447; max-width:270px}
.page-peacemaker .visual .title::before,
.page-peacemaker .visual .title::after{content:''; position:absolute; background-repeat:no-repeat; background-position:center; background-size:contain}
.page-peacemaker .visual .title::before{width:46px; height:56px; left:-54px; top:-10px; background-image:url('/images/peacemaker/visual_deco_left@2x.png')}
.page-peacemaker .visual .title::after{width:38px; height:38px; right:-54px; top:10px; background-image:url('/images/peacemaker/visual_deco_right@2x.png')}
.page-peacemaker .visual .title .pink{color:#F9B5AD}
.page-peacemaker .visual .title .blue{color:#9BA3E7}
.page-peacemaker .visual .title br{display:block}
.page-peacemaker .visual .desc{margin:0 auto; font-size:15px; line-height:1.8; letter-spacing:-0.01em; color:#455263; max-width:540px}
.page-peacemaker .visual .desc p:not(:first-of-type){margin-top:0.8em}
/* guide */
.page-peacemaker .visual .desc .guide{color:#999}
.page-peacemaker .visual .desc .guide .link{color:#888; text-decoration:none}
.page-peacemaker .visual .desc .guide .link:hover{color:#6d78d1}
/* btn */
.btn-write{display:inline-flex; align-items:center; justify-content:center; border-radius:999px; color:#FFF; text-decoration:none; box-shadow:inset 0 0 0 2px rgba(0,0,0,0.1); transition:all .2s ease-in-out}
.btn-write::after{content:''; display:inline-block; width:16px; height:14px; background:url('/images/ico_btn_about.svg') no-repeat center / contain; flex-shrink:0; transition:all 0.2s ease-in-out}
.btn-write:hover::after{transform:translateX(5px)}
.btn-write:hover{box-shadow:inset 0 0 0 2px rgba(0,0,0,0.2), 0 8px 8px -2px rgba(0,0,0,0.15)}
.page-peacemaker .visual .btn-write{gap:8px; padding:14px 24px; font-size:15px; font-weight:500; position:relative; overflow:hidden; background:linear-gradient(90deg,#59C36A,#6C8DFF,#9B6BFF,#59C36A); background-size:600%; animation:glow 20s linear infinite}
@keyframes glow{
  0%{background-position:0% 50%}
  100%{background-position:600% 50%}
}

@media (max-width:320px){
  .page-peacemaker .visual .title{font-size:30px; max-width:200px}
}
@media (min-width:768px){
  .page-peacemaker .visual .title{max-width:400px}
  .page-peacemaker .visual .title::before{left:-64px}
  .page-peacemaker .visual .title::after{right:-64px}
}
@media(min-width:1070px){
  .page-peacemaker .visual{padding-top:40px; padding-bottom:40px}
  .page-peacemaker .visual .visual-img{max-width:676px; margin-bottom:24px}
  .page-peacemaker .visual .texts{gap:32px}
  .page-peacemaker .visual .title{font-size:82px; line-height:1.2; max-width:660px}
  .page-peacemaker .visual .desc{font-size:18px}
  .page-peacemaker .visual .title::before{width:88px; height:105px; left:-240px; top:30px}
  .page-peacemaker .visual .title::after{width:88px; height:88px; right:-240px; top:0}
  .page-peacemaker .visual .btn-write{padding:16px 32px; font-size:18px}
}


/* Live -------------------- */
.live{text-align:center}
.live .wrap{max-width:var(--width-md)}
.live .title{font-size:18px; line-height:1.6; font-weight:500; color:var(--color-body)}
.live .live-list{margin-top:20px; padding:0 16px; background:#FFF; border-radius:12px; height:436px; overflow:hidden}
.live .live-list li{display:flex; align-items:center; gap:10px; padding:16px 0; border-bottom:1px solid #EEE}
.live .live-list li:nth-child(6){border-bottom:0}
/* img */
.live .live-list .thumb-wrap{display:flex; align-items:center; gap:6px; flex-shrink:0}
.live .live-list .profile-photo{position:relative; width:22px; height:22px; border-radius:999px; background:no-repeat center / cover; flex-shrink:0}
.live .live-list .flag{position:relative; width:21px; height:14px; border-radius:2px; background:#FFF no-repeat center / cover; flex-shrink:0}
.live .live-list .profile-photo::before,
.live .live-list .flag::before{content:''; position:absolute; inset:0; border-radius:inherit; box-shadow:inset 0 0 0 1px rgba(0,0,0,0.06)}
/* title */
.live .live-list .text-wrap{min-width:0; text-align:left}
.live .live-list .title{font-size:15px; font-weight:500; line-height:1.5; letter-spacing:-0.005em; color:#222; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.live .live-list .time{margin-top:2px; font-size:11px; line-height:1.4; color:#777}

@media(min-width:1070px){
  .live .title{font-size:20px}
  .live .live-list{margin-top:24px; height:402px; border-radius:30px; padding:0 24px}
  .live .live-list li{padding:20px 0}
  .live .live-list .thumb-wrap{gap:8px}
  .live .live-list .profile-photo{width:26px; height:26px}
  .live .live-list .text-wrap{display:flex; align-items:center; gap:10px; flex:1}
  .live .live-list .title{font-size:15px}
  .live .live-list .time{margin-top:0; flex-shrink:0}
}


/* Status -------------------- */
.status{text-align:center; word-break:break-word}
.status .wrap{max-width:var(--width-md)}
/* title */
.status .title-wrap .title{font-size:24px; font-weight:700; line-height:1.4; letter-spacing:-0.03em; color:var(--color-body)}
.status .title-wrap .desc{font-size:15px; line-height:1.7; letter-spacing:-0.01em; color:#777; margin:8px auto 0}
.status .count-wrap{display:flex; justify-content:center; column-gap:32px; row-gap:20px; margin-top:24px; flex-wrap:wrap}
/* count */
.status .count-wrap .text{text-align:center}
.status .count-wrap .text .title{font-size:14px; font-weight:500; line-height:1.6; color:#464646}
.status .count-wrap .text .count{font-size:38px; font-weight:900; line-height:1.2; letter-spacing:-0.04em; color:var(--color-peacemaker-pink); margin-top:8px}

@media (max-width:767px){
  .status .title-wrap .desc{max-width:370px}
}
@media(min-width:1070px){
  .status .title-wrap .title{font-size:44px}
  .status .title-wrap .desc{font-size:17px}
  .status .count-wrap{column-gap:56px; row-gap:32px; margin-top:40px}
  .status .count-wrap .text .title{font-size:16px}
  .status .count-wrap .text .count{font-size:80px}
}


/* Cards -------------------------------------------------------------- */
.cards .wrap{display:flex; flex-direction:column; gap:20px}
.cards .card{display:flex; align-items:center; position:relative; overflow:hidden; padding:30px; background:#FFF; border-radius:12px}
/* text */
.cards .card .text-wrap{max-width:400px; position:relative; z-index:2; text-align:left; display:flex; flex-direction:column; align-items:flex-start; gap:16px}
.cards .card .title-wrap .title{font-size:20px; font-weight:700; line-height:1.4; letter-spacing:-0.04em}
.cards .card .title-wrap .desc{margin-top:6px; max-width:330px; font-size:14px; line-height:1.7; letter-spacing:-0.01em; color:#464646}
.cards .card .count-wrap{display:flex; align-items:center; column-gap:24px; row-gap:14px; flex-wrap:wrap; max-width:60%}
.cards .card .count-wrap .title{font-size:12px; line-height:1.6; letter-spacing:-0.01em; color:#464646}
.cards .card .count-wrap .count{margin-top:4px; font-size:18px; font-weight:800; line-height:1.2; letter-spacing:-0.03em; color:var(--color-body); overflow-wrap:anywhere; word-break:break-all}
/* btn */
.cards .card .btn-write{padding:10px 18px; gap:6px; font-size:13px; line-height:1.4}
.cards .card .btn-write::after{width:14px; height:12px}
.cards .card .card-img{position:absolute; right:16px; bottom:0; width:150px; height:124px; background-repeat:no-repeat; background-position:right bottom; background-size:contain}

/* pledge ----- */
.cards .pledge .title-wrap .title{color:var(--color-peacemaker-green)}
.cards .pledge .btn-write{background-color:var(--color-peacemaker-green)}
.cards .pledge .card-img{background-image:url('/images/peacemaker/banner_peace.png')}
/* share ----- */
.cards .share .title-wrap .title{color:#FFBB00}
.cards .share .btn-write{background-color:#A06E34}
.cards .share .card-img{background-image:url('/images/peacemaker/banner_share.png'); width:140px; bottom:20px}
/* volunteer ----- */
.cards .volunteer .title-wrap .title{color:var(--color-peacemaker-blue)}
.cards .volunteer .btn-write{background-color:var(--color-peacemaker-blue)}
.cards .volunteer .card-img{background-image:url('/images/peacemaker/banner_volunteer.png')}

@media(max-width:374px){
  .cards .card{padding-bottom:120px}
  .cards .card .count-wrap{max-width:initial}
}
@media (min-width:600px){
  .cards .card .count-wrap{max-width:initial}
}
@media (min-width:768px){
  .cards .card .title-wrap .desc{max-width:initial}
  .cards .pledge .card-img,
  .cards .volunteer .card-img{width:250px; height:180px; right:30px}
  .cards .share .card-img{width:200px; height:160px; right:70px; bottom:48px}
}
@media(min-width:1070px){
  .cards{gap:48px}
  .cards .card{min-height:500px; padding:70px 120px; border-radius:30px}
  .cards .card .text-wrap{gap:40px}
  .cards .card .title-wrap .title{font-size:48px; font-weight:800; line-height:1.3; letter-spacing:-0.01em}
  .cards .card .title-wrap .desc{font-size:18px; line-height:1.6}
  .cards .card .count-wrap{max-width:none; row-gap:18px}
  .cards .card .count-wrap .title{font-size:15px}
  .cards .card .count-wrap .count{margin-top:8px; font-size:40px}
  .cards .card .btn-write{padding:16px 32px; gap:8px; font-size:18px; letter-spacing:-0.01em}
  .cards .card .btn-write::after{width:20px; height:16px}

  .cards .pledge .card-img,
  .cards .volunteer .card-img{right:50px; width:544px; height:374px}
  .cards .share .card-img{width:433px; height:342px; right:110px; bottom:80px}
}
@media(min-width:1200px){
  .cards .card .text-wrap{max-width:500px}
}


/* @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){
  .cards .card.pledge .card-img{background-image:url('/images/peacemaker/banner_peace@2x.png')}
  .cards .card.share .card-img{background-image:url('/images/peacemaker/banner_share@2x.png')}
  .cards .card.volunteer .card-img{background-image:url('/images/peacemaker/banner_volunteer@2x.png')}
}



/* --------------------------------------------------------------
Write
-------------------------------------------------------------- */
.page-header .wrap::after{background-image:url('/images/img_visual_peacemaker.svg')}
@media(min-width:1070px){
  .page-header .wrap::after{width:180px}
}

/* 직접 입력 인풋 위 마진 추가 */
.places .input-text{margin-top:10px}

/* 인원 */
.input-text.unit::after{content:attr(data-unit); margin-right:16px; color:#999}

/* 선택사항 */
.proof-part{margin-top:40px !important}
.proof-part .title{font-size:21px; font-weight:600}
.proof-part .guide-text{font-size:13px; color:#777; margin-top:10px}
.proof-part .guide-text li{position:relative; padding:3px 0 3px 14px}
.proof-part .guide-text li:before{position:absolute; content:'*'; left:0; top:7px}
@media(min-width:1070px){
  .proof-part{margin-top:60px !important}
  .proof-part .guide-text{font-size:14px}
}

/* 탭 선택 시 안내 문구 */
.activity-desc{color:#888; font-size:15px; line-height:1.7; margin-top:12px}

/* 후기 등록 동의 */
.agreement.review-yn{background-color:#F7F0E4; border-radius:12px; padding:20px; display:flex; flex-direction:column; align-items:flex-start; gap:6px; margin-top:40px !important}
.agreement.review-yn .title{font-weight:600}
.agreement.review-yn .form-checks{margin-top:8px}
@media(min-width:1070px){
  .agreement.review-yn{border-radius:20px; padding:30px; margin-top:60px !important}
}

/* 후기 동의에 맞춰 기존 유의사항 체크박스도 왼쪽 정렬 */
/* .agreement{text-align:initial} */