/*----------------------------------------------------
토큰
----------------------------------------------------*/
:root{
  --nav-height:52px;
}
@media(min-width:1070px){
  :root{
    --nav-height:80px;
  }
}

/* iOS Webivew 터치 효과 제거 */
body { 
  -webkit-tap-highlight-color: transparent;
}



/*----------------------------------------------------
헤더
----------------------------------------------------*/
.header{position:sticky; background-color:transparent; top:0; transition:all .25s ease-in-out; will-change:transform; z-index:999}
.header.scrolled.hide{transform:none}
.header.scrolled{transform:translateY(0); background-color:rgba(255,255,255,1)}
.header.scrolled::after{content:''; width:100%; height:1px; background-color:rgba(0,0,0,0.05); display:block; position:absolute; bottom:-1px}
.header .site-nav{position:relative; display:flex; align-items:center; height:var(--nav-height)}
.header .site-logo{display:inline-flex; margin-right:auto}

/* 네비 */
.header .nav{position:fixed; top:var(--nav-height); left:0; display:none; width:100%; height:calc(100% - var(--nav-height)); padding-left:var(--space-side); padding-right:var(--space-side); overflow-y:auto; background-color:#FFF; overflow-x:hidden}
.header .nav > .menu{display:flex; flex-direction:column; width:100%}
.header .nav > .menu > .menu-item{position:relative; padding-top:var(--unit-200); padding-bottom:var(--unit-200)}
.header .nav > .menu > .menu-item:not(:last-child){border-bottom:1px solid var(--border-50)}
.header .nav > .menu > .menu-item > a{display:block; padding-top:var(--unit); padding-bottom:var(--unit); font-size:17px; font-weight:600; color:var(--color-body); line-height:1.2; letter-spacing:-0.01em; cursor:pointer}
.header .nav > .menu > .menu-item:hover > a,
.header .nav > .menu > .menu-item > a.router-link-active,
.header .nav > .menu > .menu-item:has(.router-link-active) > a{color:var(--color-primary)}

/* 서브 메뉴 */
.header .nav > .menu .sub-menu{display:flex; flex-wrap:wrap; column-gap:8px}
.header .nav > .menu .sub-menu .menu-item{flex:0 0 calc(50% - 4px)}
.header .nav > .menu .sub-menu a{display:block; padding-top:var(--unit); padding-bottom:var(--unit); font-size:16px; color:var(--color-gray-c); line-height:1.25; letter-spacing:-0.01em}
.header .nav > .menu .sub-menu > .menu-item:hover a,
.header .nav > .menu .sub-menu > .menu-item > a.router-link-active{color:var(--color-primary)}

/* 모바일 : 네비 오픈 */
body.nav-open{overflow:hidden}
body.nav-open .header{position:fixed; left:0; right:0; bottom:0; background-color:var(--color-white-bg); transition:none}
body.nav-open .header .nav{display:flex; flex-direction:column; align-items:flex-start; row-gap:8px; padding-top:var(--unit-150); padding-bottom:var(--unit-500)}

/* 모바일 : 페이지 타이틀 */
.header .page-title{display:none; flex-grow:1; margin-right:40px; font-size:16px; font-weight:600; line-height:1.2; letter-spacing:-0.02em; text-align:center}

/* 모바일 : 버튼 */
.header .btn-mobile-nav{background-image:url('/images/ico_menu.svg')}
.header .btn-mobile-nav.active{background-image:url('/images/ico_close.svg')}
.header .btn-wrap{display:flex}
.header .btn-back,
.header .btn-my,
.header .btn-mobile-nav{width:40px; height:40px; background-repeat:no-repeat; background-position:center; background-size:24px; cursor:pointer; flex-shrink:0}
.header .btn-back{position:relative; left:-14px; display:none; background-image:url('/images/ico_arrow.svg'); margin-right: auto; cursor:pointer}
.header .btn-my{display:flex; background-image:url('/images/ico_my.svg')}
.header .btn-my.login{position:relative; justify-content:center; align-items:center; background-image:none}
.header .btn-my .profile-photo{width:32px; height:32px}
.feed-badge{display:flex; min-width:17px; height:17px; padding:5px; background-color:var(--color-emphasis); font-size:10px; font-weight:600; color:#FFF; line-height:1.3; border-radius:var(--br-circle); justify-content:center; align-items:center}
.header .btn-my .feed-badge{position:absolute; top:0px; right:0px}
.header .btn-logout{display:inline-flex; align-items:center; gap:4px; flex-shrink:0; font-weight:500}
.header .btn-logout::before{content:''; display:block; width:14px; height:14px; background-image:url('/images/ico_logout.svg'); background-repeat:no-repeat; background-position:center; background-size:cover; flex-shrink:0}

/* 모바일 : 마이 */
.header .my-box{display:flex; align-items:center; column-gap:10px; width:100%; padding:var(--unit-250); background:var(--color-light-bg); border-radius:var(--br-lg)}
.header .my-box .profile-photo{width:40px; height:40px}
.header .my-box .text{display:flex; flex-direction:column; align-items:flex-start; row-gap:2px; flex-grow:1}
.header .my-box .text .title{font-size:17px; font-weight:700; line-height:1.3; letter-spacing:-0.01em}
.header .my-box .text .sub{display:inline-block; font-size:13px; color:rgba(0,0,0,0.4); line-height:1.3}
.my-box .ico-arrow-right{font-size:20px; color:var(--color-gray-e)}

@media(max-width:1069px){
  [class*="page-back"] .header .site-logo{display:none}
  [class*="page-back"] .header .btn-back{display:block}
  .page-back-tit .header .page-title{display:-webkit-box !important; -webkit-line-clamp:2; overflow:hidden; text-overflow:ellipsis; -webkit-box-orient:vertical}
  .page-back-tit .header .btn-wrap{display:none}
}

@media(min-width:1070px){
  .header.scrolled.hide{transform:translateY(-100%)}
  .header .site-nav{gap:32px}
  .header .site-logo .blind{position:inherit; overflow:inherit; margin:0; width:auto; height:auto; clip:inherit}

  /* 네비 */
  .header .nav{position:static; display:block; width:auto; height:inherit; overflow:inherit; background-color:inherit}
  .header .nav{display:inherit; max-width:inherit; height:100%; padding:0}
  .header .nav > .menu{height:100%; padding-bottom:inherit; flex-direction:row; align-items:center; column-gap:32px}
  .header .nav > .menu > .menu-item > a{height:100%; font-size:18px}

  /* 서브 메뉴 */
  .header .nav > .menu > .menu-item{border-bottom:none !important}
  .header .nav > .menu > .menu-item:hover > .sub-menu{display:block !important}
  .header .nav > .menu .sub-menu{display:none; position:absolute; top:60px; left:-16px; background-color:rgba(8,8,8,0.93); padding:14px 0; background-color:#FFF; box-shadow:0 0 5px 0 rgba(0,0,0,0.2); border-radius:var(--br-md); min-width:160px; z-index:1}
  .header .nav > .menu .sub-menu a{padding:var(--unit-75) var(--unit-250); cursor:pointer}
  .header .nav > .menu .sub-menu .menu-item{width:100%}

  /* 모바일 */
  .header .btn-back,
  .header .btn-mobile-nav,
  .header .btn-logout,
  .header .btn-setting,
  .header .page-title,
  .header .my-box{display:none}

  .header .btn-wrap{gap:8px}
}



/*----------------------------------------------------
푸터
----------------------------------------------------*/
.footer{background-color:var(--color-bg)}
.footer .container{display:flex; flex-direction:column; align-items:flex-start; row-gap:24px; padding-top:var(--unit-500); padding-bottom:var(--unit-500)}
.footer hr{width:100%; margin:0; opacity:0.15}

/* 링크 */
.footer .links{display:flex; flex-direction:column; align-items:flex-start; row-gap:16px}
.footer .links a:hover{color:var(--color-primary)}
.footer .links .title{display:flex; align-items:center; column-gap:2px; flex-shrink:0; font-size:16px; font-weight:600; color:var(--color-title); line-height:1.4; transition:all .15s ease}
.footer .links .title .ico{font-size:14px; transition:all .15s ease}
.footer .links .title:hover .ico{transform:translateX(2px)}
.footer .family-site{display:flex; flex-direction:column; row-gap:10px}
.footer .family-site ul{display:flex; flex-direction:column; row-gap:8px}
.footer .family-site ul li{font-size:0}
.footer .family-site ul li a{font-size:14px; color:var(--color-gray-c); line-height:1.4; transition:all .15s ease}

/* sns */
.sns{display:flex; column-gap:8px}
.sns li{width:44px; height:44px; background-color:rgba(0,0,0,0.05); border-radius:var(--br); transition:all .2s ease}
.sns li:hover{background-color:rgba(0,0,0,0.1)}
.sns li a{display:block; height:100%; background-position:center; background-repeat:no-repeat}
.sns .kakaotalk a{background-image:url('/images/ico_sns_kakao.svg')}
.sns .facebook a{background-image:url('/images/ico_sns_facebook.svg')}
.sns .twitter a{background-image:url('/images/ico_sns_twitter.svg')}
.sns .sms a{background-image:url('/images/ico_sns_sms.svg')}
.sns .link a{background-image:url('/images/ico_sns_link.svg')}

/* 컨택 정보 */
.footer .contact{display:flex; flex-direction:column; row-gap:10px}
.footer .address li{font-size:13px; color:var(--color-gray-d)}
.footer .copy{font-size:12px; color:var(--color-gray-e)}
.footer .copy a:hover{color:var(--color-body) !important}

/* gotop */
.btn-gotop{position:fixed; right:20px; bottom:20px; display:flex; justify-content:center; align-items:center; width:50px; height:50px; border-radius:var(--br-circle); background-color:rgba(255,255,255,0.6); z-index:10; -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); box-shadow:0 0 0 1px inset rgba(0,0,0,0.1); transition:all .1s ease; cursor:pointer}
.btn-gotop:hover{background-color:rgba(255,255,255,1)}
.btn-gotop .ico::before{margin:0; opacity:0.6}
.btn-gotop.hide{display:none}

.no-footer .footer{display:none}

@media(min-width:1070px){
  .footer .container{position:relative}
  .footer .family-site{flex-direction:row; align-items:flex-start; gap:16px}
  .footer .family-site ul{flex-wrap:wrap; flex-direction:row; column-gap:16px; row-gap:4px; padding:2px 0}
  .footer .sns{position:absolute; right:var(--space-side); bottom:var(--space-side)}
  .footer .contact{max-width:700px}
}



/*----------------------------------------------------
로그인
----------------------------------------------------*/
.page-login > div#__nuxt{height:100%}
.page-login article{display:table; width:100%; height:calc(100% - var(--nav-height))}
.page-login .login-wrapper{display:table-cell; vertical-align:middle; padding-bottom:var(--nav-height)}
.login-area{margin:0 auto; display:flex; flex-direction:column; gap:28px}

/* logo */
.login-area .site-logo{display:flex; flex-direction:column; justify-content:center; align-items:center; gap:8px}
.login-area .site-logo .mascot{width:88px; height:88px; background-repeat:no-repeat; background-position:center; background-size:cover}
.login-area .site-logo .text{font-size:22px; text-align:center; line-height:1.3}
.login-area .site-logo .text .sub{font-size:15px; margin-bottom:4px; line-height:1.3}

@media(min-width:1070px){
  .login-area .site-logo .mascot{width:104px; height:104px}
}

/* form */
.login-area .form-content{display:flex; flex-direction:column; gap:8px}
.login-area .form-check .form-check-label .check-ico{border-radius:var(--br-circle) !important}
.login-area .save-id{margin-top:4px}
.login-area .btn-login{margin-top:8px}

/* social */
.login-area .social-login{margin-top:12px}
.login-area .social-login .sns-group{margin-top:24px; justify-content:center}
.login-area .social-login .title{position:relative; display:flex; align-items:center; gap:8px; font-size:15px}
.login-area .social-login .title::before,
.login-area .social-login .title::after{content:''; width:100%; height:1px; background-color:var(--border-50)}
.login-area .social-login .title div{flex-shrink:0; max-width:80%; text-align:center}

/* copy */
.page-login .copy{font-size:13px; line-height:1.4; color: var(--color-gray-e); text-align:center; display:flex; flex-direction:column; align-items:center; gap:4px}
.page-login .copy a:hover{color:var(--color-body)}



/*----------------------------------------------------
페이지 : 공통
----------------------------------------------------*/
[class*="page"] .section{display:flex; flex-direction:column; gap:var(--space-gap-y); padding-top:var(--space-top); padding-bottom:var(--space-bottom)}
[class*="page"] .section + .section{padding-top:0}
[class*="page"] .section:first-child:not([class*="header"]){padding-top:8px}
[class*="page"] [class*="page-header"] + *:not(.no-data){padding-top:8px}
.page-back-tit [class*="page-header"]{display:none}

.page-list .pagination + .search{width:100%; max-width:360px; margin:0 auto}
.page-list .section:last-child{padding-bottom:40px}

.page-feedback .header{display:none}
.page-feedback .feedback-header{min-height:100vh; justify-content:center; align-items:center}

@media(max-width:767px){
  .page-list .tab .items{padding-left:var(--space-side)}
  .page-feedback .feedback-header{height:calc(100vh - var(--nav-height))}
  .page-feedback .feedback-header .comp-heading{height:100%}
  .page-feedback .footer{display:none}
}
@media(min-width:768px){
  .page-list .section:last-child{padding-bottom:60px}
  .page-list .lists:not(.no-gap, .list-photo){row-gap:24px}
  .page-feedback .feedback-header{padding-bottom:160px}
}
@media(min-width:1070px){
  .page-back-tit [class*="page-header"]{display:flex}
  .page-list .section:last-child{padding-bottom:100px}
}

/* 개발 모듈 확인용 */
.dev{min-height:200px; padding:100px 40px; text-align:center; background-color:var(--color-light-bg); border-radius:var(--br-lg)}



/*----------------------------------------------------
페이지 : 본문
----------------------------------------------------*/
.image-item{display:flex; flex-direction:column; gap:12px}
.image-item img{width:100%}
:root{
  --space-sentence:8px;
  --space-paragraph:16px;
}

article:has(> .single-contents:last-child) > .single-contents:last-child{padding-bottom:var(--space-bottom)}
.page-view .single-contents > *:first-child{margin-top:0 !important}
.page-view .single-contents > *:last-child{margin-bottom:0 !important}
.page-view .single-contents h3,
.we-contents h3{font-size:18px; font-weight:700; color:var(--color-title); line-height:1.4; letter-spacing:-0.03em; margin-top:32px; margin-bottom:var(--space-sentence)}
.page-view .single-contents p,
.we-contents p{font-size:16px; line-height:1.6; letter-spacing:-0.01em}
.we-contents h3 + p{margin-top:var(--space-sentence)}
.page-view .single-contents .post-cite{font-size:12px; color:var(--color-gray-e); line-height:1.5; margin-top:var(--space-sentence); margin-bottom:28px}
.page-view .single-contents .copyright{font-size:14px; color:var(--color-gray-e); line-height:1.3; letter-spacing:-0.02em; text-align:center; margin-top:32px}

@media(min-width:1070px){
  :root{
    --space-sentence:12px;
    --space-paragraph:24px;
  }
  .image-item{gap:20px}
  .page-view .single-contents h3,
  .we-contents h3{font-size:20px}
  .page-view .single-contents p,
  .we-contents p{font-size:17px; line-height:1.7}
}


/* 캠페인 본문 ---------- */
.page-campaign-view section:not(.section, .no-data){padding-top: var(--space-top); padding-bottom: var(--space-bottom)}
.page-campaign-view .no-contents{padding-bottom:40px}
@media(min-width:768px){ .page-campaign-view .no-contents{padding-bottom:60px} }
@media(min-width:1070px){ .page-campaign-view .no-contents{padding-bottom:100px} }

/* 실천 서약 */
.ended .form-group,
.ended .agree{opacity:0.5; pointer-events:none; cursor:default}
.ended .btn:not(.light-green){color:var(--color-gray-e); background-color:var(--color-light-bg); pointer-events:none; cursor:default}

/* 다운로드 */
.card-news .swiper-wrap{width:100%}

/* 공유하기 */
.page-campaign-view .share.section{align-items:center; gap:20px; padding-top:40px; padding-bottom:0}
.page-campaign-view .share::after{content:''; display:block; width:130px; height:130px; background:url('/images/ico_3d_phone.png') no-repeat center / cover; margin-top:4px}
.page-campaign-view .share .comp-heading{align-items:center}
.page-campaign-view .share .sns{justify-content:center}
.page-campaign-view .share .sns li{position:relative; border-radius:var(--br-circle); overflow:hidden}
.page-campaign-view .share .sns li::before{content:''; position:absolute; left:0; right:0; top:0; bottom:0; display:block; width:100%; height:100%; background-color:rgba(0,0,0,0.15); opacity:0; transition:all .2s ease}
.page-campaign-view .share .sns li:hover::before{opacity:1}
.page-campaign-view .share .sns .kakaotalk{background-color:#FEE500}
.page-campaign-view .share .sns .kakaotalk::before{background-color:rgba(0,0,0,0.06)}
.page-campaign-view .share .sns .kakaotalk a{background-color:#1A1408; -webkit-mask:url('/images/ico_sns_kakao.svg') no-repeat center / 24px; mask:url('/images/ico_sns_kakao.svg') no-repeat center / 24px; background-image:none}
.page-campaign-view .share .sns .facebook{background-color:#3875EA}
.page-campaign-view .share .sns .twitter{background-color:#1A1408}
.page-campaign-view .share .sns .twitter::before{background-color:rgba(255,255,255,0.1)}
.page-campaign-view .share .sns .link{background-color:#4A5158}
.page-campaign-view .share .sns li:not(.kakaotalk) a{filter:brightness(100)}

@media(min-width:1070px){
  .page-campaign-view .share.section{padding-top:60px}
  .page-campaign-view .share::after{width:180px; height:180px; margin-top:16px}
  .page-campaign-view .share .comp-heading .title{font-size:26px}
  .page-campaign-view .share .comp-heading .desc{font-size:16px}
  .page-campaign-view .share .sns li{width:48px; height:48px}
}

/* 관련 후기 */
.page-campaign-view .related-review{gap:20px}
.page-campaign-view .related-review .review-heading{display:flex; flex-direction:column; gap:6px}
.page-campaign-view .campaign-contents .no-data{--data-padding:80px}

@media(min-width:768px){
  .page-campaign-view .related-review .lists{row-gap:20px}
}
@media(min-width:1070px){
  .page-campaign-view .related-review .review-heading{flex-direction:row; align-items:flex-end; gap:16px}
}


/* 후기 본문 ---------- */
.page-review-view .single-header{align-items:center}
.page-review-view .single-header .post-banner{margin-bottom:16px}
.page-review-view .contents{align-items:center}
.page-review-view .single-contents{width:100%}
.page-review-view .single-contents .photo-slide{margin-bottom:32px}
.page-review-view .single-contents .btn-like{margin:0 auto}

/* 댓글 모듈 커스텀 */
.wc-root *, .we-contents, .we-contents input{font-family:inherit !important; line-height:1.6 !important}
.wc-clsummary, .wc-writecomment.wc-clwrite, .wc-clbody-listopts{padding-left:0 !important; padding-right:0 !important}
.wc-loading-shape{background:var(--color-primary) !important}
.wc-root hr{visibility:hidden !important}
.we-contents li{padding-top:4px}
.article-contents p{font-size:18px !important; line-height:1.6 !important}
.wc-wcbody-covermsg br{display:block}

/* summary ---------- */
.wc-clsummary{margin-bottom:11px !important}
.wc-clsummary-opt{display:none}
/*count*/
.wc-clcount{font-size:0; color:#222 !important}
.wc-clcount span{font-size:14px; vertical-align:middle}
.wc-clcount::before{content:''; display:inline-block; background:url('/images/ico_comment.svg') no-repeat center; background-size:20px; width:24px; height:24px; vertical-align:middle; margin-right:3px}
.wc-clcount > span{color:#333 !important}

/* wirte ---------- */
#comment .we-toolbar{display:none}
.we-toolbar{border:0 !important}
.wc-wchead{display:none !important}
.we-editor-container{padding:16px !important}
.we-template-ctn{background:var(--color-white-bg) !important; border:0 !important}
.wc-wcopts{padding:4px 16px 16px !important; background-color:#F9FAFB !important}
.wc-wctarget{display:none}
.wc-wctarget + div{margin-left:3px}
.wc-wccommit{min-width:54px !important; background-color:var(--color-primary) !important; color:#FFF !important; border-radius:var(--br) !important; padding:6px 9px !important}
.wc-wccommit:hover{background-color:#1cbb56 !important}
.wc-wcbody{border-color:var(--border-80) !important; border-radius:var(--br-lg) !important}
.wc-root button{font-size:15px; font-weight:500 !important}
/* cover */
.wc-wcbody-box.disable .wc-wcbody{filter:none !important}
.wc-wcbody-box.disable .wc-wcbody-cover{background-color:#F9FAFB; border-radius:var(--br-lg); border-color:var(--border-80); box-shadow:none; padding:20px}
.wc-wcbody-covermsg button{padding:8px 12px !important; border-radius:var(--br) !important}
.we-contents [we-vtype-html] p{font-size:17px !important}
.we-root{border-radius:var(--br-lg); border:1px solid var(--border-80)}
.wc-writecomment .we-template-ctn{background-color:#F9FAFB !important}

/* filter ---------- */
.wc-clbody + hr{display:none}
.wc-clbody-listopts{border-top:none !important}
.wc-clbody-listopts button{display:none}

/* list ---------- */
.wc-ccontent{gap:3px !important}
.wc-clnouser{color:#999 !important; font-size:14px !important}
.wc-clnouser svg{fill:#AAA !important}
.wc-root .wc-clbody{display:flex; flex-direction:column; align-items:start; gap:10px; padding:0 40px !important}
.wc-clbody > li{display:inline-block; border-top:none !important; max-width:500px; margin-left:0 !important; margin-right:0 !important; position:relative; background:var(--color-light-bg); border-radius:16px; padding:12px 15px !important}
.wc-clbody > li .wc-cthumb{position:absolute; margin-right:0 !important; left:-40px; top:0; width:32px; height:32px}
.wc-clbody > li .wc-cthumb img{width:32px !important; height:32px !important}
.wc-clbody > li.me{align-self:end; background-color:#F0FBF5}
.wc-clbody > li.me .wc-cthumb{left:auto; right:-33px}

@media(min-width:768px){
  .wc-root .wc-clbody{padding:0 33px !important}
  .wc-clbody > li .wc-cthumb img{width:32px !important; height:32px !important}
  .wc-clbody > li .wc-cthumb{left:-40px}
  .wc-clbody > li.me .wc-cthumb{right:-40px}
}

/*chead*/
.wc-chead{margin-bottom:0 !important}
.wc-cinfo + div{margin-left:10px}
.wc-cname{display:inline-block; margin-right:7px; font-weight:700 !important; font-size:14px !important; color:#666 !important}
.wc-cname > *{font-size:14px !important}
.wc-cdate{display:inline-block; margin-right:7px; font-size:13px !important; color:#999 !important}
.wc-del-year, .wc-del-month, .wc-del-day{font-size:0px}
.wc-del-year:before, .wc-del-month:before, .wc-del-day:before{content:'.'; font-size:13px}
.wc-sec{display:none !important}
.wc-cnew{font-size:0 !important; background-color:transparent !important; background:url('/images/ico_new_mini.svg') no-repeat center !important; border-radius:0 !important; background-size:contain; width:7px; height:8px; margin-left:2px; vertical-align:middle; text-indent:-99999px}

/*cfoot*/
.wc-cfoot{margin-top:2px}
.wc-coptionbtn{color:#999 !important; margin-right:8px !important; font-size:13px !important; padding:0 !important; background:transparent !important; border:none !important}
.wc-coptionbtn:hover{color:#777 !important}
.wc-cfoot .wc-coptionbtn:not(:last-child):after{display:none !important}
.wc-coption-translating{color:var(--color-primary) !important; margin-top:-1px}
.wc-coption-translating .dot{background-color:var(--color-primary) !important}

/* list : modify ----------*/
.wc-comment.wc-ceditmode .wc-wcbody{border-radius:0 !important; border:none !important}
.wc-comment.wc-ceditmode .wc-wcbody .wc-we{border:solid 1px #eeeeee; border-radius:10px; overflow:hidden; margin-bottom:5px}
.wc-comment.wc-ceditmode .wc-wcbody .wc-wcopts{padding:0 !important; background:transparent !important}
.wc-comment.wc-ceditmode .wc-wcbody .wc-wcopts button{border:none; background:none !important; color:#93a7aa !important; font-size:14px; padding:2px 5px !important; margin-right:0; position:relative; cursor:pointer; min-width:auto !important}
.wc-comment.wc-ceditmode .wc-wcbody .wc-wcopts button.wc-wccommit{color:var(--color-primary) !important}
.wc-comment.wc-ceditmode .wc-wcbody .wc-wcopts button.wc-wccommit::before{content:''; display:inline-block; width:10px; height:10px; background:url('/images/ico_check_comment.svg') no-repeat center; background-size:contain; vertical-align:middle; margin-right: 2px; margin-top:-4px}
.wc-comment.wc-ceditmode .wc-cfoot{display:none !important}

/* btn more ---------- */
.wc-clll-btn{background:none !important; margin-top:20px !important; color:#666 !important; font-size:14px !important}
.wc-clll-btn:hover{color:#888 !important}
.wc-clll-btn::after{content:'\a012'; font-family:"fontello"; margin-left:4px; font-size:0.8em}

/* toast ---------- */
.wc-toast-msg{bottom:30px !important; box-shadow:none !important; border:none !important; color:#FFF !important; background-color:rgba(0,0,0,0.8) !important; border-radius:8px !important; max-width:700px !important; padding:11px 20px !important; width:100% !important; text-align:center !important; font-size:14px !important}
.wc-toast-msg::before{display:none}

@media(min-width:1070px){
  .page-review-view .single-contents .photo-slide{margin-bottom:40px}
}


/* 자료실 본문 ---------- */
.page-archive-view .single-contents figure{margin-top:var(--space-paragraph); margin-bottom:var(--space-paragraph)}
.page-archive-view .single-contents .attached-file{margin-top:var(--space-paragraph)}



/*----------------------------------------------------
페이지 : 소개
----------------------------------------------------*/
.bg-gray{background-color:var(--color-light-bg)}
.join-campaign .text-wrap{display:flex; align-items:center; gap:12px}

@media(max-width:767px){
  .join-campaign .section-header{gap:4px}
  .join-campaign .section-header .title{font-size:18px}
  .join-campaign .section-header .desc{font-size:13px}
}
@media(min-width:768px){
  .join-campaign .text-wrap{flex-direction:column; gap:16px; text-align:center}
  .join-campaign .comp-heading{align-items:center}
}
@media(min-width:1070px){
  .join-campaign .text-wrap{gap:20px}
  .join-campaign .text-wrap .btn{padding:17px 24px; font-size:17px; border-radius:var(--br-lg)}
}

/* 캠페인 소개 ---------- */
.page-about .section{--space-top:var(--unit-400); --space-bottom:var(--unit-400); padding-top:var(--space-top) !important}
.page-about .visual{display:flex; flex-direction:column; align-items:center}
.page-about .page-header:last-child{padding-bottom:32px}
.page-about .page-header .sub{font-size:18px; font-weight:600; color:var(--color-gray-c); line-height:1.3; letter-spacing:-0.02em}
.page-about .page-header .title{font-weight:800}
.page-about .page-header .highlight{display:flex; flex-direction:column; font-size:21px; font-weight:700; line-height:1.3; letter-spacing:-0.03em; margin-bottom:4px}
.page-about .page-header .highlight .grad{display:inline-block; -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent}
.page-about .page-header .highlight .h1{background-image:linear-gradient(90deg, #0091F8 0%, #886EFB 35%, #C75CF8 65%, #EC459D 100%)}
.page-about .page-header .highlight .h2{background-image:linear-gradient(90deg, #EC459D 0%, #F44447 45%, #F45409 100%)}
.page-about .page-header .highlight .ico-footstep{display:inline-block; width:1em; height:1em; background-color:#EC459D; -webkit-mask:url('/images/ico_footstep.svg') no-repeat center / cover; mask:url('/images/ico_footstep.svg') no-repeat center / cover; background-image:none; margin:0 3px; vertical-align:-0.06em}
.page-about .visual img{max-width:240px; padding-top:0 !important}
.page-about .family{align-items:center; gap:20px}
.page-about .family .section-header{align-items:center}
.page-about .family img{max-width:160px}

@media(min-width:768px){
  .page-about .page-header .sub{font-size:20px}
  .page-about .section-header .desc{margin-top:4px}
  .page-about .visual img{max-width:260px}
  .page-about .family img{max-width:180px}
}
@media(min-width:1070px){
  .page-about .section{--space-top:var(--unit-800); --space-bottom:var(--unit-800)}
  .page-about .page-header:last-child{padding-bottom:64px}
  .page-about .page-header .sub{font-size:22px}
  .page-about .page-header .title{font-size:40px}
  .page-about .page-header .highlight{font-size:24px; margin-bottom:8px}
  .page-about .section-header .desc{margin-top:6px}
  .page-about .visual img{max-width:280px; margin-top:-16px; margin-bottom:-16px}
  .page-about .family{gap:24px}
  .page-about .family img{max-width:200px}
}

/* 캠페인 현황 ---------- */
.page-status .section{--space-top:var(--unit-400); --space-bottom:var(--unit-400); gap:16px}
.page-status .section:not(.page-header + *:not(.no-data)){padding-top:var(--space-top) !important}
.page-status .card-warp{display:flex; flex-direction:column; gap:8px}
.page-status .card-warp .card{position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:8px; width:100%; padding:16px; border-radius:var(--br-lg); background-color:var(--color-primary)}
.page-status .card-warp .card::before{content:''; position:absolute; left:0; bottom:15px; display:block; width:70px; height:70px; background:url('/images/card_shape_1.svg') no-repeat center / cover}
.page-status .card-warp .card.total{background-color:var(--color-secondary)}
.page-status .card .badge{padding:6px 12px; font-size:13px; background-color:transparent; border:1.5px solid rgba(255,255,255,0.3)}
.page-status .card-warp .card.total::before{background-image:url('/images/card_shape_2.svg'); left:-12px}
.page-status .card .date{font-size:13px; font-weight:600; color:rgba(255,255,255,0.7)}
.page-status .card ul{width:100%; height:100%; display:flex; flex-direction:column; justify-content:flex-end; align-items:flex-end; gap:4px; margin-top:6px}
.page-status .card ul li{font-size:17px; font-weight:600; color:var(--color-white); line-height:1.3}
.page-status .card ul li span{color:rgba(255,255,255,0.5)}

.page-status .data.card .label{font-size:13px}
.page-status .data.card .num{font-size:18px; font-weight:600}

.page-status .effect{display:flex; flex-direction:column; gap:16px}

@media(min-width:768px){
  .page-status [class*="section-header"] .title{font-size:22px}
  .page-status [class*="section-header"] .desc{font-size:15px; margin-top:4px}
  .page-status .card-warp{flex-direction:row}
}
@media(min-width:1070px){
  .page-status .section{--space-top:var(--unit-800); --space-bottom:var(--unit-800)}
  .page-status [class*="section-header"] .title{font-size:24px}
  .page-status [class*="section-header"] .desc{font-size:16px}
  .page-status .effect{gap:24px; margin-top:8px}
  .page-status .carbon-cut .title{font-size:17px}
  .page-status .status .effect .standard .title{font-size:16px}
  .page-status .card-warp .card::before{width:75px; height:75px}
  .page-status .card .badge,
  .page-status .card .date{font-size:14px}
  .page-status .card ul li{font-size:19px}
}



/*----------------------------------------------------
페이지 : 참여하기
----------------------------------------------------*/
/* 데일리 체크 ---------- */
.page-daily-check{background-color:var(--color-bg)}
.page-daily-check .active-col{display:flex; flex-direction:column; gap:16px}
.page-daily-check .active-col:not(.past-date) .banner{background-color:rgba(255,255,255,0.5)}
.page-daily-check .list-wrap{display:flex; flex-direction:column; gap:8px}
.page-daily-check .past-date{padding:24px; background-color:var(--color-white-bg); border-radius:20px; box-shadow:0 1px 4px 0 rgba(0,0,0,0.06)}
.page-daily-check .past-date .banner .title{flex:1; gap:4px; font-size:16px}
.page-daily-check .past-date .banner .ico-calendar::before{width:22px; height:22px; background-image:url('/images/ico_calendar_blue.svg'); background-size:18px}

/* 태그 ---------- */
.page-tag-list .page-header-sm{padding:20px; border-radius:var(--br-lg); background-color:var(--color-light-bg)}
.page-tag-list .page-header-sm .date{padding:6px 10px; border-radius:var(--br-circle); background-color:var(--color-white-bg); font-size:12px; font-weight:700; color:var(--color-gray-b); line-height:1.3; margin-bottom:4px}
.page-tag-list .page-header-sm .title::before{content:'#'; display:inline-block; color:var(--color-primary); margin-right:4px}

@media(max-width:767px){
  .page-tag-list .page-header-sm .title{font-size:20px}
}
@media(min-width:768px){
  .page-tag-list .page-header-sm{padding:40px}
  .page-tag-list .page-header-sm .date{font-size:14px; padding:8px 12px}
}
@media(min-width:1070px){
  .page-tag-list .page-header-sm{padding:56px}
}



/*----------------------------------------------------
페이지 : 후기
----------------------------------------------------*/
.list-head.section{gap:24px}
.list-head.section{--count-padding:16px; padding-bottom:var(--count-padding)}

/* Index ---------- */
.page-review-list article{position:relative; overflow-x:hidden}
.page-review-list .section:not(.list-contents){gap:16px}
.page-review-list .best-review .swiper-wrap .dots{margin-top:16px}
.page-review-list .photo-review .comp-heading{flex-direction:row; justify-content:space-between; align-items:center; gap:12px}
.page-review-list .photo-review .list-photo{--photo-padding:2px; flex-wrap:nowrap}
.page-review-list .photo-review .list-photo .thum,
.page-review-list .photo-review .list-photo .thum::after{border-radius:var(--br-md)}

@media(max-width:767px){
  .page-review-list .best-review .comp-heading{padding-left:var(--space-side); padding-right:var(--space-side)}
  .page-review-list .best-review .swiper{padding-left:var(--space-side); padding-right:var(--space-side)}
}
@media(min-width:768px){
  .page-review-list .section-divide{display:none}
  .list-head.section{--count-padding:24px}
}
@media(max-width:1069px){
  .page-review-list .photo-review{padding-left:0; padding-right:0}
  .page-review-list .photo-review .comp-heading{padding-left:var(--space-side); padding-right:var(--space-side)}
  .page-review-list .photo-review .photo-wrap{padding-left:var(--space-side); padding-right:var(--space-side); overflow:hidden; overflow-x:auto; scrollbar-width:none}
  .page-review-list .photo-review .list-item:last-child{margin-right:var(--space-side)}
}
@media(min-width:1070px){
  .page-review-list .section:not(.list-contents){gap:20px}
  .page-review-list .banner{padding:24px}
  .page-review-list .banner .btn{padding:17px 24px; font-size:17px; border-radius:var(--br-lg)}
  .page-review-list .best-review .swiper-wrap .dots{margin-top:20px}
  .page-review-list .photo-review .row-cols-lg-8 > *{flex:0 0 auto; width:12.5%}
}

/* 사진만 보기 ---------- */
.page-photo-list article{position:relative; overflow-x:hidden}
.page-photo-list .lists{row-gap:var(--photo-padding)}

@media(max-width:767px){
  .page-photo-list .list-photo.row{margin-left:calc( (var(--space-side) + var(--photo-padding)) * -1); margin-right:calc( (var(--space-side) + var(--photo-padding)) * -1)}
}
@media(min-width:768px){
  .page-photo-list .lists{row-gap:calc(var(--photo-padding) * 2)}
}

/* 작성 ---------- */
.page-review-write .contents.section{padding-bottom:16px}
.page-review-write .form-group{display:flex; flex-direction:column; gap:16px}
.page-review-write .guide-text{font-size:14px; color:var(--color-gray-c)}
.page-review-write .upload{position:relative}
.page-review-write .input-field[type="file"]{position:absolute; top:0; left:0; width:0; height:0; opacity:0; padding:inherit}
.page-review-write .btn-upload{display:flex; justify-content:center; align-items:center; gap:4px; font-weight:500; color:var(--color-white); background-color:var(--color-gray-a); cursor:pointer}
.page-review-write .btn-upload .ico-plus{display:inline-flex}
.page-review-write .btn-upload .ico-plus:before{margin:0; font-size:13px; font-weight:900}
.page-review-write .section + .section{padding-top:16px !important}

/* 사진 업로드 */
.page-review-write .photo-upload{display:flex; flex-direction:column; justify-content:center; gap:16px}
.page-review-write .photo-wrap .lists{display:flex; flex-wrap:nowrap; gap:8px}
.page-review-write .photo-wrap .thum{position:relative; flex:0 0 auto; width:30%; border-radius:var(--br-md); overflow:hidden}
.page-review-write .photo-wrap .thum::after{border-radius:var(--br-md)}
.page-review-write .photo-wrap .thum-img{width:100%; height:auto; padding-bottom:100%; background-image:url(/images/ico_3d_letter.svg); background-color:var(--color-light-bg); background-size:cover; background-position:center; background-repeat:no-repeat; transition:all .3s ease}
.page-review-write .photo-wrap .btn-delete{right:6px; top:6px}
.page-review-write .photo-wrap .main-photo{position:absolute; bottom:0px; width:100%; height:auto; padding:4px; background:rgba(0, 0, 0, 0.6); backdrop-filter:blur(6px); font-size:10px; font-weight:500; color:var(--color-white); text-align:center; z-index:2}

@media(max-width:767px){
  .photo-upload{padding:0}
  .page-review-write .photo-wrap{padding-left:var(--space-side);  padding-right:var(--space-side); overflow:hidden; overflow-x:auto; scrollbar-width:none}
}
@media(min-width:768px){
  .page-review-write section{max-width:720px; margin-left:auto; margin-right:auto}
  .page-review-write .photo-wrap .thum{flex:1; width:100%; max-width:130px}
}
@media(min-width:1070px){
  .page-review-write .agree{gap:12px}
}



/*----------------------------------------------------
페이지 : 환경보전활동
----------------------------------------------------*/
@media(min-width:1070px){
  .page-activity .data .label,
  .page-activity-view .data .label{font-size:14px}
  .page-activity .data .num,
  .page-activity-view .data .num{font-size:18px}
}

/* 활동 소개 ---------- */
.page-activity .section{display:flex; flex-direction:column; gap:20px}
.page-activity .section.activity-status{padding-top:var(--space-top)}
.activity-visual{min-height:400px; padding-bottom:140px; position:relative; background:url('/images/visual_activity@2x.jpg') no-repeat center bottom / cover}
.activity-visual::before{content:''; position:absolute; left:0; top:0; right:0; bottom:0; display:block; width:100%; height:100%; background:linear-gradient(180deg, rgba(255,255,255,1) 25%, rgba(255,255,255,0.75) 40%, rgba(255,255,255,0) 80%); pointer-events:none}
.activity-visual .comp-heading{position:relative; align-items:center; row-gap:12px; z-index:2}
.activity-visual .title{background:linear-gradient(to right, #03502A 0%, #3EA672 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent}
.activity-visual .intro{font-size:16px; font-weight:700; line-height:1.45; letter-spacing:-0.01em}
.activity-visual .intro span{color:var(--color-accent)}
.activity-visual .desc{color:rgba(29,36,46,0.6)}

/* 활동 내용 */
.activity-project .act-list{display:grid; grid-template-columns:repeat(2, 1fr); gap:8px}
.activity-project .act-list li a{display:flex; justify-content:center; align-items:center; height:100%; font-size:14px; min-height:70px; padding:14px 24px}

/* 서포터즈, 아세즈 */
.page-activity .banners{margin-top:8px}
.page-activity .section-header.ta-center{gap:12px; align-items:center}
.page-activity .section-header.ta-center .title{display:flex; flex-direction:column; justify-content:center; align-items:center; gap:4px; text-align:center}
.page-activity .section-header.ta-center .desc span{font-weight:500; color:var(--color-body)}

@media(min-width:768px){
  .activity-visual{min-height:500px; padding-bottom:200px}
  .activity-visual .intro{font-size:17px}
  .activity-visual .comp-heading{row-gap:16px}
  .activity-project .act-list li a{font-size:15px}
  .page-activity .banner{padding:20px}
}
@media(min-width:1070px){
  .activity-visual{min-height:600px; padding-bottom:240px}
  .activity-visual .intro{font-size:18px}
  .activity-project .act-list li a{min-height:80px; font-size:16px}
  .page-activity .banner{padding:22px}
}


/* 활동 내용 ---------- */
.page-activity-view .page-header{display:block}
.page-activity-view .section{gap:20px; position:relative}
.page-activity-view .comp-heading .desc{max-width:460px}

@media(min-width:768px){
  .page-activity-view .section{--space-top:var(--unit-500); --space-bottom:var(--unit-500); gap:28px; min-height:450px}
  .page-activity-view .comp-heading .desc{max-width:500px}
}
@media(min-width:1070px){
  .page-activity-view .comp-heading .desc{max-width:560px}
}

/* 탭 + 섹션 */
.mysticky{position:relative; background:var(--color-white-bg); box-shadow:0 1px 0 0 var(--border-80); padding-top:0 !important; transition:all .25s ease-in-out; position:sticky; top:52px; z-index:9; left:0; right:0}
.mysticky .inner{display:flex; gap:20px; flex-wrap:nowrap; overflow:hidden; overflow-x:auto; scrollbar-width:none; -ms-overflow-style:none; padding:0 20px}
.tab-item{padding:14px 0; cursor:pointer; text-decoration:none; color:#333; transition:color 0.3s; flex-shrink:0; opacity:0.7; font-size:14px; font-weight:500; line-height:1.3; position:relative}
.tab-item.active{opacity:1}
.tab-item::before{content:''; position:absolute; width:0%; height:2px; left:0; bottom:0; background-color:var(--color-body); transition:all .2s ease}
.tab-item.active::before,
.tab-item:hover::before{width:100%}
/* anchor : index에서 링크해오는 경우에 사용 */
.slide-item .anchor{position:absolute; top:-98px}

@media(min-width:1070px){
  .mysticky{top:initial}
  .header.scrolled + article .mysticky{top:80px; position:fixed}
  .header.scrolled.hide + article .mysticky.top{top:0}
  .mysticky .inner{max-width:var(--width); margin:0 auto; padding-left:var(--space-side); padding-right:var(--space-side); justify-content:center}
  .tab-item{flex-shrink:initial; text-align:center; font-size:13px; display:flex; align-items:center; justify-content:center}
  .page-activity-view .section{--space-top:var(--unit-900); --space-bottom:var(--unit-900); gap:32px}
  .header.scrolled + article .project-climate{padding-top:45px}
  .slide-item .anchor{top:-170px}
}

/* 타이틀 그라데이션 */
.page-activity-view .action-header .title{font-weight:800}
.project-climate .action-header .title{background-image:linear-gradient(90deg, #500303 0%, #A63E3E 100%)}
.project-plastic .action-header .title{background-image:linear-gradient(90deg, #032650 0%, #3E6DA6 100%)}
.project-forest .action-header .title{background-image:linear-gradient(90deg, #03502C 0%, #3EA675 100%)}
.project-ecosystem .action-header .title{background-image:linear-gradient(90deg, #034C50 0%, #3EA1A6 100%)}
.project-daily .action-header .title{background-image:linear-gradient(90deg, #500331 0%, #A63E7B 100%)}
.project-awareness .action-header .title{background-image:linear-gradient(90deg, #060350 0%, #3E3EA6 100%)}

/* 포토 */
.page-activity-view .swiper img{border-radius:var(--br-lg)}
.page-activity-view .swiper .caption{font-size:12px; color:var(--color-gray-d); line-height:1.3; letter-spacing:-0.01em; text-align:center; margin-top:8px; padding-left:12px; padding-right:12px}

@media(min-width:768px){
  .page-activity-view .swiper .caption{font-size:13px}
}

/* 활동 현황 */
.activity-status{display:flex; flex-direction:column; gap:20px}
.action-amount{display:grid; grid-template-columns:repeat(2, 1fr); gap:6px}
.action-amount .data.full{grid-column:1 / 3}

/* 활동 자세히 보기 */
.action-detail .action-detail-title{font-size:14px; line-height:1.4; font-weight:500; color:var(--color-gray-c)}
.action-detail .links{margin-top:12px}
.action-detail .links a:not(:first-child){margin-top:6px}


/* 지지서명 ---------- */
.page-signature{background-color:var(--color-bg)}
.page-signature .sign-box{padding:24px; border:1px solid var(--border-80); background-color:var(--color-white-bg); border-radius:var(--br-lg)}
.page-signature .text-wrap >*:not(:first-child){margin-top:var(--space-paragraph)}
.page-signature .text-wrap p{font-size:16px; line-height:1.6; letter-spacing:-0.01em}
.page-signature .text-wrap h3{font-size:18px; font-weight:700; color:var(--color-title); line-height:1.4; letter-spacing:-0.03em; margin-top:20px; margin-bottom:var(--space-sentence)}
.page-signature .text-wrap h3 + .task-box{margin-top:8px}
.page-signature .form-sign{margin-top:12px}

@media(min-width:768px){
  .page-signature .sign-box{padding:32px; border-radius:24px}
  .page-signature .text-wrap p{font-size:17px; line-height:1.7}
  .page-signature .text-wrap h3{font-size:20px; margin-top:24px}
  .page-signature .text-wrap h3 + .task-box{margin-top:12px}
  .page-signature .form-sign{margin-top:20px}
}



/*----------------------------------------------------
페이지 : 자료실
----------------------------------------------------*/
.page-archive-list .tab{padding-bottom:8px} 
.page-archive-list .tab-fill{max-width:var(--width-md)}
.page-archive-list .lists.no-gap .list-item:first-child .list-link{padding-top:0}
.page-archive-list .lists.no-gap .list-item:last-child .list-link{padding-bottom:0}



/*----------------------------------------------------
페이지 : 404
----------------------------------------------------*/
.page-not-found .comp-heading::before{width:120px; height:120px; background-image:url('/images/ico_404.gif'); margin-bottom:8px}

@media(min-width:1070px){
  .page-not-found .comp-heading::before{width:140px; height:140px}
}