/*----------------------------------------------------
토큰
----------------------------------------------------*/
:root{
  /* color ---------- */
  --color-title:#151B26;
  --color-body:#292F36;
  --color-gray-a:#353C44;
  --color-gray-b:#4A5158;
  --color-gray-c:#6C747E;
  --color-gray-d:#81878E;
  --color-gray-e:#949CA4;
  --color-white:#FFFFFF;

  --color-primary:#22C55E;
  --color-secondary:#3182F6;
  --color-emphasis:#FA4A74;
  --color-red:#F71519;
  --color-accent:#05B646;
  /* bg */
  --color-bg:#F2F4F6;
  --color-white-bg:#FFFFFF;
  --color-light-bg:#F4F6F8;
  --color-lightgreen-bg:#EDFAF2;
  --color-lightblue-bg:#EFF5FF;
  --color-hover-bg:#E8ECF0;
  --color-hover-light-bg:#f9fafc;
  --overlay:rgba(15,17,22,0.3);
  --overlay-visual:rgba(15,17,22,0.6);
  --overlay-visual-light:rgb(255,255,255,0.6);
  /* border */
  --border:rgba(0,0,0,0.1);
  --border-80:rgba(0,0,0,0.08);
  --border-50:rgba(0,0,0,0.05);
  --border-thum:0 0 0 1px inset rgba(0,0,0,0.05);
  /* border */
  --data-co2:#FFA72C;
  --data-tree:#00BD6F;
  --data-bottle:#1D8FFD;
  --data-ice:#3EB1FF;

  /* unit ---------- */
  --unit:8px;
  --unit-50:calc(var(--unit)*0.5);   /* 4 */
  --unit-75:calc(var(--unit)*0.75);  /* 6 */
  --unit-150:calc(var(--unit)*1.5);  /* 12 */
  --unit-200:calc(var(--unit)*2);    /* 16 */
  --unit-250:calc(var(--unit)*2.5);  /* 20 */
  --unit-300:calc(var(--unit)*3);    /* 24 */
  --unit-350:calc(var(--unit)*3.5);  /* 28 */
  --unit-400:calc(var(--unit)*4);    /* 32 */
  --unit-500:calc(var(--unit)*5);    /* 40 */
  --unit-600:calc(var(--unit)*6);    /* 48 */
  --unit-700:calc(var(--unit)*7);    /* 56 */
  --unit-800:calc(var(--unit)*8);    /* 64 */
  --unit-900:calc(var(--unit)*9);    /* 72 */
  --unit-full:999px;
 /* radius */
  --br:var(--unit);         /* 8 */
  --br-md:var(--unit-150);  /* 12 */
  --br-lg:var(--unit-200);  /* 16 */
  --br-circle:var(--unit-full);
  /* space */
  --space-top:var(--unit-300);
  --space-bottom:var(--unit-300);
  --space-gap-y:var(--unit-400);
  --space-side:var(--unit-250);
  --header-padding:20px;
  /* gutter */
  --gutter-x:8px;
  /* thumbnail size */
  --thumb:88px;

  /* width ---------- */
  --width:1000px;
  --width-md:720px;
  --width-sm:600px;
}

@media(min-width:1070px){
  :root{
    --space-top:var(--unit-500);
    --space-bottom:var(--unit-500);
    --space-side:var(--unit-500);
    --space-gap-y:var(--unit-500);
  }
}


/* 컴포넌트 페이지 셋팅 */
.page-components .contents{display:flex; flex-direction:column; row-gap:80px; padding:40px}
.page-components .lists.row{width:100%}
.section-wrap{display:flex; flex-direction:column; row-gap:24px}
.section-component{display:flex; flex-direction:column; row-gap:16px}
.section-title{font-size:48px; font-weight:700; letter-spacing:-0.02em}
.sub-title{display:flex; align-items:center; gap:8px; font-size:20px; font-weight:700; margin-top:8px}
.sub-title span{padding:10px; font-size:14px; line-height:0.5; border-radius:999px; display:inline-block; background-color:var(--color-body); text-align:center; color:var(--color-white)}
.comp-inner{display:flex; flex-wrap:wrap; align-items:flex-start; gap:var(--unit); padding:32px; border:4px dotted rgba(0,0,0,0.1); border-radius:var(--br-lg)}
.comp-inner.large-gap{row-gap:24px; column-gap:48px}
.ta-center > *{text-align:center}
.ico{flex-shrink:0}



/*----------------------------------------------------
공통
----------------------------------------------------*/
body{overflow-x:hidden}
.section-divide{border:6px solid var(--color-bg); margin:0}
.ico-arrow-right{transition:all .1s ease}
.ico-arrow-right::before{margin-left:.1em; margin-right:.1em}
a:hover .ico-arrow-right{color:var(--color-gray-c)}

/* container */
.container,
.container-sm,
.container-md{width:100%; max-width:100%; padding-left:var(--space-side); padding-right:var(--space-side); margin-left:auto; margin-right:auto}

.container{max-width:var(--width)}
.container-md{max-width:var(--width-md)}
.container-sm{max-width:var(--width-sm)}

.container-mobile-full,
.container-md-mobile-full,
.container-sm-mobile-full{padding-left:0; padding-right:0; overflow:hidden}

@media(min-width:768px){
  .container-mobile-full,
  .container-md-mobile-full,
  .container-sm-mobile-full{width:100%; padding-left:var(--space-side); padding-right:var(--space-side); margin-left:auto; margin-right:auto}
  .container-mobile-full{max-width:var(--width)}
  .container-md-mobile-full{max-width:var(--width-md)}
  .container-sm-mobile-full{max-width:var(--width-sm)}
}

/* 로고 */
.site-logo{flex-shrink:0}
.site-logo .symbol{position:relative; left:-3px; width:36px; height:36px; background:url('/images/logo.svg') no-repeat center / cover; flex-shrink:0}
.site-logo .text{font-size:18px; font-weight:600; line-height:1.2; letter-spacing:-0.03em}
.site-logo .sub{font-size:12px; font-weight:500; color:var(--color-gray-c); line-height:1.2}

/* 마스코트 */
.spline{width:170px; height:120px; flex-shrink:0}

@media(min-width:768px){
  .spline{width:260px; height:180px}
}
@media(min-width:1070px){
  .spline{width:360px; height:260px}
}

/* 이미지 보더 */
.image-area,
.thum{position:relative}
.image-area::after,
.thum:not(.noimg)::after{content:''; position:absolute; top:0; left:0; right:0; bottom:0; box-shadow:var(--border-thum)}
.image-area{border-radius:var(--br-lg); overflow:hidden}
.image-area::after{border-radius:var(--br-lg); pointer-events:none; z-index:2}

/* 프로필 */
.profile-photo{width:20px; height:20px; border-radius:var(--br-circle); background:no-repeat center / cover; box-shadow:var(--border-thum); flex-shrink:0}

/* 삭제 버튼 */
.btn-delete{position:absolute; right:0px; top:0px; width:24px; height:24px; background:rgba(0, 0, 0, 0.6); backdrop-filter:blur(6px); border-radius:var(--br-circle); z-index:2; transition:all .1s ease}
.btn-delete:hover{background-color:var(--color-primary)}
.btn-delete .ico-close{display:flex; justify-content:center; align-items:center; height:100%}
.btn-delete .ico-close::before{font-size:10px; font-weight:700; color:var(--color-white)}

/* 섹션 카드 */
.section-card{border-radius:20px; box-shadow:0 1px 4px 0 rgba(0,0,0,0.06); background-color:var(--color-white-bg); overflow:hidden}
.section-card .contents{display:flex; flex-direction:column; gap:16px; padding:20px}

@media(min-width:1070px){
  .section-card .contents{justify-content:space-between; padding:28px}
}

/* 탄소 저감 효과 */
.status .effect .data-wrap{flex-direction:column; gap:8px; margin-top:8px}
.status .effect .title{position:relative; font-size:15px; font-weight:600; color:var(--color-title); line-height:1.3}
.status .effect .list-standard{display:flex; flex-direction:column; gap:8px; margin-top:8px}
.status .effect .standard .title{font-size:14px; font-weight:600}
.status .effect .standard .text{display:flex; flex-direction:column; gap:2px}
.status .effect .btn-standard{display:inline-flex; align-items:center; gap:2px; font-size:12px; color:var(--color-gray-e); margin-left:4px; margin-bottom:2px; transition:all 0.1s ease}
.status .effect .btn-standard::before{content:''; display:inline-block; width:14px; height:14px; background:url('/images/ico_info.svg') no-repeat center / cover; flex-shrink:0}
.status .effect .btn-standard:hover{color:var(--color-gray-c)}
.status .effect .btn-standard:hover::before{background-color:var(--color-gray-c); -webkit-mask:url('/images/ico_info.svg') no-repeat center / cover; mask:url('/images/ico_info.svg') no-repeat center / cover; background-image:none}
.status .effect .pop-standard{position:absolute; left:0; right:0; padding:16px; background-color:var(--color-white-bg); border-radius:var(--br-md); box-shadow:0 0 15px 0 rgba(0, 0, 0, 0.1); margin-top:8px}
.status .effect .pop-standard .pop-tit{display:flex; justify-content:space-between; align-items:center; gap:12px; font-size:14px; font-weight:600}
.status .effect .pop-standard .btn-close::after{width:16px; height:16px; background-size:cover; opacity:0.5}

@media(min-width:1070px){
  .status .effect .pop-standard{padding:20px; border-radius:var(--br-lg)}
  .status .effect .pop-standard .btn-close::after{width:18px; height:18px}
}

/* co2 */
.co2{display:flex; flex-direction:column; align-items:center; gap:2px; width:100%; padding:20px 16px; border-radius:var(--br-lg); background-color:var(--color-lightgreen-bg); font-weight:600; line-height:1.3}
.co2::before{content:''; display:block; width:40px; height:24px; background:url(/images/ico_status_co2_v2.svg) no-repeat center / cover; margin-bottom:6px; flex-shrink:0}
.co2 .label{font-size:13px; color:var(--color-primary)}
.co2 .num{font-size:20px; color:rgba(0, 0, 0, 0.8); letter-spacing:-0.03em}

@media(min-width:1070px){
  .co2 .label{font-size:15px}
}

/* 슬라이드 */
.swiper{border-radius:var(--br-lg)}
.swiper-wrap .dots{display:flex; justify-content:center; gap:6px; margin-top:12px}
.swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet,
.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet{margin:0 !important}
.dots .swiper-pagination-bullet-active{width:25px; border-radius:var(--br-circle); background-color:var(--color-gray-d)}

@media(min-width:768px){
  .swiper-wrap .dots{margin-top:16px}
}

/* 안내 문구 */
.info-detail{display:flex; flex-direction:column; gap:8px}
.info-detail li{position:relative; padding-left:14px; font-size:13px; line-height:1.4; color:var(--color-gray-b)}
.info-detail li::before{content:'•'; position:absolute; left:0; top:-1px}
.info-detail li span{font-weight:500; color:var(--color-red)}

@media(min-width:1070px){
  .info-detail li{font-size:14px}
}

/* sns */
.sns-group{display:flex; gap:12px}
.sns-group .item{display:inline-block; width:56px; height:56px; border-radius:var(--br-circle); background:no-repeat center / cover}
.sns-group .item i{width:100%; height:100%; display:flex; justify-content:center; align-items:center}
.sns-group .item i:before{content:''; display:block; width:24px; height:24px; background:no-repeat center / contain}
.sns-group .cog{background-image:url("/images/ico_cog.svg")}
.sns-group .sns-watv{background:#4F67ED}
.sns-group .sns-watv .icon-watv:before{background-image:url("/images/sns_watv.svg")}
.sns-group .sns-kakao .icon-kakao:before{background-image:url("/images/sns_kakao.svg")}
.sns-group .sns-google .icon-google:before{background-image:url("/images/sns_google.svg")}
.sns-group .sns-apple .icon-apple:before{background-image:url("/images/sns_apple.svg")}
.sns-group .sns-kakao{background:#ffeb3b}
.sns-group .sns-google{border:1px solid var(--border); background-color:#FFF}
.sns-group .sns-apple{background:#0F1219}



/*----------------------------------------------------
헤딩 타이틀
----------------------------------------------------*/
.comp-heading{display:flex; flex-direction:column; row-gap:6px; width:100%}
.comp-heading .title{font-size:24px; font-weight:700; color:var(--color-title); line-height:1.3; letter-spacing:-0.02em}
.comp-heading .desc{font-size:14px; color:var(--color-gray-d); line-height:1.4; max-width:400px}
.comp-heading .badge{margin-bottom:4px}

@media(min-width:768px){
  .comp-heading .title{font-size:28px; font-weight:800}
  .comp-heading .desc{font-size:15px; line-height:1.5}
}
@media(min-width:1070px){
  .comp-heading .title{font-size:32px}
  .comp-heading .desc{max-width:560px; font-size:16px}
}

/* page-header ---------- */
[class*="page-header"]{padding-top:var(--header-padding); padding-bottom:var(--header-padding); align-items:center}
.page-header .title{font-size:28px; font-weight:800; line-height:1.3}
.page-header .desc{font-size:14px}

@media(min-width:768px){
  .page-header .title{font-size:36px}
  .page-header .desc{font-size:15px}
}
@media(min-width:1070px){
  .page-header{--header-padding:40px}
  .page-header-sm{--header-padding:28px}
  .page-header .title{font-size:48px; font-weight:900}
  .page-header .desc{font-size:16px}
}

/* action-header ---------- */
.action-header{align-items:flex-start}
.action-header .sub{font-size:13px; font-weight:600; color:var(--color-gray-b); line-height:1.3}
.action-header .title{background:linear-gradient(to right, #500303 0%, #A63E3E 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent}

@media(min-width:768px){
  .action-header{gap:10px}
  .action-header .sub{font-size:14px}
  .action-header .desc + .desc{margin-top:-4px}
}
@media(min-width:1070px){
  .action-header{gap:12px}
  .action-header .sub{font-size:16px}
  .action-header .desc + .desc{margin-top:-6px}
}

/* section-header ---------- */
.section-header .title{font-size:20px; font-weight:700}
.section-header-sm{row-gap:4px}
.section-header-sm .title{font-size:18px; font-weight:700}
.section-header-sm .desc{font-size:13px; line-height:1.4}
/* 버튼 */
.btn-view{display:flex; align-items:center; gap:1px; font-size:13px; font-weight:500; color:var(--color-gray-e); line-height:1.3; flex-shrink:0; margin-top:4px; transition:all .1s ease}
.btn-view:hover{color:var(--color-primary)}
.btn-view:hover .ico-arrow-right{color:var(--color-primary)}


@media(min-width:768px){
  .section-header .title{font-size:22px}
  .section-header-sm .title{font-size:19px}
  .section-header-sm .desc{font-size:14px; line-height:1.5}
}
@media(min-width:1070px){
  .section-header .title{font-size:24px}
  .section-header-sm .title{font-size:20px}
  .section-header-sm .desc{font-size:15px}
  .btn-view{font-size:14px}
}

/* single-header ---------- */
.single-header{width:100%}
.single-header .comp-heading{align-items:center}
.single-header .user{display:flex; flex-wrap:wrap; justify-content:center; gap:6px; font-size:15px; color:var(--color-gray-b); line-height:1.4}
.single-header .info{display:flex; justify-content:center; align-items:center; column-gap:4px}
.single-header .info > *{font-size:14px; color:var(--color-gray-e); line-height:1.3}

/* single-header visual ---------- */
.single-header.visual{position:relative; display:flex; align-items:flex-end; min-height:360px; padding-top:32px; padding-bottom:32px; background-color:var(--color-light-bg); background-repeat:no-repeat; background-position:center; background-size:cover}
.single-header.visual::before{content:''; position:absolute; left:0; top:0; right:0; bottom:0; display:block; width:100%; height:100%; background:linear-gradient(0deg, var(--overlay-visual-light), transparent)}
.single-header .comp-heading{row-gap:8px}
.single-header.visual .comp-heading > *{z-index:2}
.single-header.visual .date{font-size:14px; color:var(--color-gray-e); line-height:1.3}
.anniversary{display:flex; flex-wrap:wrap; justify-content:center; align-items:center; row-gap:4px; column-gap:8px}
.anniversary .tag{font-size:14px; color:var(--color-gray-b); line-height:1.3; transition:all .1s ease; cursor:pointer}
.anniversary .tag::before{content:'#'; display:inline-block}
.anniversary .tag:hover{color:var(--color-primary) !important}
/* dark */
.single-header.visual.dark::before{background:linear-gradient(0deg, var(--overlay-visual), transparent)}
.single-header.visual.dark .title{color:var(--color-white)}
.single-header.visual.dark .anniversary .tag{color:rgba(255,255,255,0.8)}
.single-header.visual.dark .date{color:rgba(255,255,255,0.6)}

@media(min-width:768px){
  .single-header .title{font-size:30px}
  .single-header.visual.dark .title{font-weight:700}
  .single-header .anniversary .tag{text-align:center}
}
@media(min-width:1070px){
  .single-header.visual{min-height:460px}
  .single-header .comp-heading{row-gap:10px}
  .single-header .title{font-size:36px}
  .single-header .anniversary{column-gap:10px}
  .single-header .anniversary .tag{font-size:16px}
}

/* feedback-header ---------- */
.feedback-header .comp-heading{justify-content:center; align-items:center; gap:8px}
.feedback-header .comp-heading::before{content:''; display:block; width:80px; height:80px; background:url('/images/ico_3d_letter.svg') no-repeat center / contain; margin-bottom:16px}
.feedback-header .info{font-size:14px; color:var(--color-gray-e); line-height:1.4}
.feedback-header .info a{color:var(--color-secondary)}



/*----------------------------------------------------
컴포넌트 UI
----------------------------------------------------*/
/* 버튼 ---------- */
.btn{position:relative; display:inline-block; min-width:88px; padding:17px 24px; font-size:17px; font-weight:600; color:var(--color-body); line-height:1.3; letter-spacing:-0.01em; text-align:center; background-color:var(--color-light-bg); border-radius:var(--br-lg); overflow:hidden; flex-shrink:0; transition:all .1s ease; cursor:pointer}
.btn:hover{background-color:var(--color-hover-bg)}
.btn.size-mini{padding:10px 14px; font-size:15px; border-radius:var(--br)}
.btn.line{background-color:var(--color-white-bg); box-shadow:0 0 0 1px inset var(--border-80)}
.btn.line:hover{background-color:var(--color-hover-light-bg)}
.btn.primary{color:var(--color-white); background-color:var(--color-primary)}
.btn.primary:hover{background-color:#1cbb56}
.btn.emphasis{color:var(--color-white); background-color:var(--color-emphasis)}
.btn.emphasis:hover{background-color:#f1416b}
.btn.light-green{color:var(--color-primary); background-color:var(--color-lightgreen-bg)}
.btn.light-green:hover{background-color:#e4f5ec}
.btn.light-blue{color:var(--color-secondary); background-color:var(--color-lightblue-bg)}
.btn.light-blue:hover{background-color:#e5efff}
.btn.btn-more{display:flex; justify-content:center; align-items:center; column-gap:2px; min-height:56px; padding:16px; background-color:var(--color-white-bg); font-size:15px; font-weight:500; color:var(--color-gray-c); border-radius:0}
.btn.btn-more:hover{background-color:var(--color-hover-light-bg)}
.btn.btn-more .ico::before{margin:0}
.btns{width:100%; display:flex; justify-content:center; align-items:center; gap:var(--unit)}

@media(max-width:767px){
  .btns > *{width:100%}
}

/* 토글 버튼 ---------- */
/* btn-action */
.btn-action{position:relative; display:flex; justify-content:space-between; align-items:center; gap:8px; min-width:240px; padding:18px 56px 18px 18px; font-size:16px; font-weight:500; line-height:1.35; text-align:inherit; background-color:var(--color-white-bg); box-shadow:0 0 0 1px inset var(--color-primary); border-radius:var(--br-lg)}
.other-action .btn-action{box-shadow:0 0 0 1px inset var(--color-secondary)}
.btn-action .ico{position:absolute; right:18px; display:flex; justify-content:center; align-items:center; width:20px; height:20px; font-size:12px; font-weight:600; border-radius:var(--br-circle)}
.btn-action[class*="active"] .ico{display:flex}
.btn-action .ico::before{content:none}
.btn-action .ico::after{content:''; display:block; width:24px; height:24px; background:url(/images/ico_check_b.svg) no-repeat center / 26px; opacity:0.2; flex-shrink:0; transition:all .1s ease}
.btn-action:hover .ico::after{opacity:0.6}
.btn-action.active-green{box-shadow:0 0 0 1.5px inset var(--color-primary); background-color:#EDFAF2}
.btn-action.active-blue{box-shadow:0 0 0 1.5px inset var(--color-secondary); background-color:#EFF5FE}
.btn-action.active-green .ico{background-color:var(--color-primary)}
.btn-action.active-blue .ico{background-color:var(--color-secondary)}
.btn-action[class*="active"] .ico::after{width:20px; height:20px; background-size:cover; opacity:1; filter:invert(99%)}

@media(min-width:1070px){
  .btn-action{font-size:17px}
}

/* btn-like */
.btn-like{display:flex; justify-content:center; align-items:center; column-gap:4px; min-width:100px; padding:16px 24px; font-size:16px; font-weight:600; color:#B5BAC1; line-height:1; box-shadow:0 0 0 1px inset var(--border-80); border-radius:var(--br-circle); transition:all .1s ease}
.btn-like:hover{background-color:var(--color-hover-light-bg)}
.btn-like .ico::before{content:none}
.btn-like .ico::after{content:''; display:flex; width:20px; height:20px; background:url(/images/ico_like.svg) no-repeat left center / cover}
.btn-like.active{color:var(--color-emphasis); background-color:#FFF7F9; box-shadow:0 0 0 1px inset rgba(250,74,116,0.08)}
.btn-like.active .ico::after{background-position:right center}

/* 뱃지 ---------- */
.badge{padding:8px 14px; font-size:14px; font-weight:600; color:var(--color-white); line-height:1.3; background-color:var(--color-body); border-radius:var(--br-circle)}
.badge.size-mini{padding:4px 8px; font-size:11px; line-height:1.2}
.badge.ongoing{background-color:var(--color-red)}
.badge.state{background-color:var(--color-gray-b)}
.badge.draft{color:var(--color-primary); background-color:var(--color-white-bg); border:1px solid var(--color-primary)}

@media(min-width:768px){
  .badge{font-size:15px}
  .badge.size-mini{font-size:12px}
}

/* 데이터 ---------- */
.icons{display:flex; gap:4px}
.data{display:flex; align-items:center; width:100%}
.data-text{display:flex; flex-direction:column; width:100%; gap:2px}
.data .label{font-size:12px; font-weight:500; color:var(--color-gray-c); line-height:1.3; flex:1}
.data .num{font-size:16px; font-weight:600; line-height:1.3; letter-spacing:-0.03em}
.data-wrap{display:flex; align-items:flex-start; gap:12px}

@media(min-width:1070px){
  .data .label{font-size:13px}
  .data .num{font-size:18px}
}

/* icon */
[class*="data"][class*="ico"]::before{content:''; display:block; width:20px; height:20px; background-repeat:no-repeat; background-position:center; background-size:cover; margin:0; flex-shrink:0}
.ico-burger::before{background-image:url(/images/ico_status_burger.svg)}
.ico-co2::before{background-image:url(/images/ico_status_co2.svg)}
.ico-broomstick::before{background-image:url(/images/ico_status_broomstick.svg)}
.ico-tree::before{background-image:url(/images/ico_status_tree.svg)}
.ico-trash::before{background-image:url(/images/ico_status_trash.svg)}
.ico-bottle::before{background-image:url(/images/ico_status_bottle.svg)}
.ico-car::before{background-image:url(/images/ico_status_car.svg)}

/* 리스트 */
.data.list{gap:4px}
.data.list .data-text{flex-direction:row; align-items:center; gap:12px}
.data.list .data-text .label{font-size:14px; color:var(--color-gray-b); line-height:1.4}
.data.list .num{font-size:15px; text-align:right; line-height:1.4}

@media(min-width:1070px){
  .data.list .data-text .label{font-size:15px}
  .data.list .num{font-size:16px}
}

/* 카드 */
.data.card{gap:8px; padding:18px; background-color:var(--color-light-bg); border-radius:var(--br-lg)}
.data.card:not(.data-my)[class*="ico"]::before{width:24px; height:24px}

/* 환경 보전 활동 */
.data-action{flex-direction:column; justify-content:center}

/* 마이 */
.data.data-my{justify-content:space-between; gap:4px; padding:10px; border-radius:var(--br-md)}
.data.data-my .num{font-size:14px; text-align:right}

@media(min-width:1070px){
  .data.data-my{padding:16px; border-radius:var(--br-lg)}
  .data.data-my .num{font-size:16px}
}

/* 산출 기준 */
.data.standard{align-items:flex-start; gap:6px}
.data.standard[class*="ico"]::before{width:16px; height:16px}
.data.standard .data-text{display:inline-block}
.data.standard .text{font-size:13px; font-weight:500; color:var(--color-gray-b); line-height:1.4}
.data.standard .text .source{font-size:11px; color:var(--color-gray-e); line-height:1.3; flex-shrink:0}

@media(min-width:1070px){
  .data.standard[class*="ico"]::before{width:20px; height:20px}
  .data.standard .text{font-size:14px}
  .data.standard .text .source{font-size:12px}
}



/*----------------------------------------------------
폼
----------------------------------------------------*/
.selectbox{transition:all .2s ease}
.selectbox:hover{background-color:var(--color-hover-light-bg)}
/* 인풋 ---------- */
.input-item{width:100%; max-width:200px}
[class*=input]:not(.active-input, .form-check-input){display:flex; gap:8px; width:100%; height:56px; padding:18px; background-color:var(--color-white-bg); box-shadow:0 0 0 1px inset var(--border-80); border-radius:var(--br-lg); font-size:17px; font-weight:500; line-height:1.2; letter-spacing:-0.02em; transition:all .1s ease}
[class*=input]:not(.active-input, .form-check-input, .dropdown .drop-input-search):hover{box-shadow:0 0 0 1.5px inset #90E2AE}
[class*=input]:not(.active-input, .form-check-input, .dropdown .drop-input-search):focus{box-shadow:0 0 0 1.5px inset var(--color-primary)}
[class*=input]:disabled{pointer-events:none}
input::placeholder,
.input-date{color:var(--color-gray-e)}
.form-item.error input:not(.drop-input-search),
.form-item.error input:not(.drop-input-search):hover,
.form-item.error input:not(.drop-input-search):focus{box-shadow:0 0 0 1.5px inset var(--color-red)}
.form-item.error.dropdown .toggle-dropdown::after{transform:translateY(calc(-50% - 13.5px)) rotate(-90deg)}

/* 상태 메세지 ---------- */
.status-message{font-size:14px; color:var(--color-primary); line-height:1.4; margin-top:8px}
.form-item.error .status-message,
.status-message.error{color:var(--color-red)}

/* 드롭다운 */
.dropdown{position:relative}
.dropdown .toggle-dropdown::after{content:''; position:absolute; top:50%; right:18px; display:block; width:16px; height:16px; background:url('/images/ico_arrow.svg') no-repeat center / cover; transform:translateY(-50%) rotate(-90deg); opacity:0.4}
.dropdown .toggle-dropdown.active::after{transform:translateY(-50%) rotate(90deg)}
.dropdown .toggle-dropdown::after,
.dropdown .input-dropdown{cursor:pointer}
.dropdown .list-wrap{position:absolute; left:0; top:64px; display:block; width:100%; border-radius:var(--br-lg); background-color:var(--color-white-bg); box-shadow:rgba(0, 27, 55, 0.1) 0px 2px 10px, rgba(2, 32, 71, 0.05) 0px 3px 20px; z-index:20}
.dropdown .drop-input-search{width:100%; box-shadow:none; border-bottom:1px solid var(--border); border-radius:0; height:48px; background:url('/images/ico_search.svg') no-repeat right 16px center / 18px; padding-right:44px !important; opacity:0.7}
.dropdown .list-box{max-height:300px; overflow-y:auto; padding:6px 2px 6px 6px}
.dropdown .list-box::-webkit-scrollbar{width:14px}
.dropdown .list-box::-webkit-scrollbar-thumb{background-clip:padding-box; border:4px solid transparent; background-color:rgba(0,0,0,0.1); border-radius:var(--br-circle); transition:background-color .2s ease}
.dropdown .list-box::-webkit-scrollbar-button:vertical:end:decrement{display:block; height:4px}
.dropdown .list-box span{display:block; padding:8px 12px; border-radius:var(--br-md); cursor:pointer}
.dropdown .list-box span:hover{background-color:var(--color-light-bg)}
.dropdown .list-wrap.show{display:block}

/* 날짜 선택 */
.input-date{display:block !important; cursor:pointer}
.input-date.filled{color:var(--color-body)}

/* 검색 */
.search{position:relative}
.search .input-search{gap:4px; padding-right:40px}
.search .btn-search{position:absolute; right:18px; top:50%; transform:translateY(-50%); padding:0}
.search .btn-search::before{content:''; display:block; width:18px; height:18px; background:url('/images/ico_search.svg') no-repeat center / cover}

/* 닉네임 랜덤 */
.random{position:relative}
.random .input-random{padding-right:56px}
.random .btn-random{position:absolute; right:var(--unit); top:50%; transform:translateY(-50%); display:flex; align-items:center; justify-content:center; padding:0; width:40px; height:40px; border-radius:var(--br-md); background-color:var(--color-light-bg)}
.random .btn-random::before{content:''; display:block; width:16px; height:16px; background:url('/images/ico_random.svg') no-repeat center / cover; transition:all .1s ease; flex-shrink:0}
.random .btn-random:hover{background-color:var(--color-hover-bg)}

/* 체크 ---------- */
.checkbox-group{display:flex; flex-direction:column; gap:20px}
.form-check input{display:none}
.form-check .form-check-label{display:flex; align-items:center; cursor:pointer; -webkit-user-select:none; -webkit-tap-highlight-color:transparent}
.form-check .form-check-label .check-ico{position:relative; width:22px; height:22px; border-radius:var(--br-circle); border:1px solid var(--border); transition:all .1s ease}
.form-check .form-check-input[type=checkbox] + .form-check-label .check-ico{border-radius:6px}
.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 .1s ease; transition-delay:.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:.2s}
.form-check .form-check-label .cb-label{font-size:16px; line-height:1.3; margin-left:var(--unit)}
.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); background-color:var(--color-lightgreen-bg)}
.form-check .form-check-input:checked + .form-check-label .check-ico {flex-shrink:0; border-color:var(--color-primary); background-color:var(--color-primary)}
.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 .6s ease}
.form-check .form-check-input:checked + .form-check-label .cb-label{color:var(--color-primary); transition:all .3s ease}

/* disabled */
.form-check .form-check-input:disabled + .form-check-label{opacity:0.5; cursor:not-allowed}
.form-check .form-check-input:disabled:not([checked]) + .form-check-label:hover .check-ico{border-color:#d1d6db; background-color:transparent}

/* 동의하기 */
.agree{display:flex; flex-direction:column; gap:8px}
.agree .form-check input{display:none}
.agree .form-check .form-check-label{align-items:flex-start; gap:4px}
.agree .form-check .form-check-label .cb-label{font-size:15px; font-weight:500; line-height:1.4; margin-left:0; transition:all .1s ease}
.agree .form-check .form-check-label .check-ico{width:22px; height:22px; background:url('/images/ico_check.svg') no-repeat center left / cover; border:none; border-radius:0; flex-shrink:0; transition:none}
.agree .form-check .form-check-label .check-ico:before{display:none}
.agree .form-check .form-check-label:hover .check-ico{border-color:inherit; background-color:inherit}
.agree .form-check:has(.form-check-input:checked) .check-ico{background-position-x:right; border-color:inherit; background-color:inherit}
.agree .form-check .form-check-input:checked + .form-check-label .cb-label{color:var(--color-secondary); transition:none}
.agree .info{font-size:13px; color:var(--color-gray-e); line-height:1.45}

@media(min-width:1070px){
  .agree .form-check .form-check-label .cb-label{font-size:16px}
}

/* 서명하기 ---------- */
.form-sign{display:flex; flex-direction:column; gap:20px; width:100%; scroll-margin-top:var(--nav-height)}
.form-sign .form-group{display:flex; flex-direction:column; gap:8px}

/* 서명 후 */
.form-sign .btn-sign-date{cursor:auto}
.form-sign .btn-sign-date:hover{background-color:var(--color-lightgreen-bg)}

@media(min-width:1070px){
  .form-sign .section-header .num{font-size:16px}
}

/* 목록 건수 ---------- */
.list-count{display:flex; justify-content:space-between; align-items:center; gap:12px; width:100%}
.list-count .num{font-size:14px; font-weight:500; color:var(--color-gray-d); line-height:1.3;white-space:nowrap; text-overflow:ellipsis; overflow:hidden}
.list-count .num span{color:var(--color-body)}
.select-country{display:flex; flex-wrap:wrap; align-items:center; gap:6px}
.select-country .btn-remove{display:flex; align-items:center; justify-content:center; width:14px; height:14px; border-radius:var(--br-circle); background-color:var(--color-primary); flex-shrink:0}
.select-country .ico-close{display:flex; align-items:center; justify-content:center}
.select-country .ico-close:before{font-size:8px; font-weight:700; color:var(--color-white)}
.select-country .selectbox{display:flex; align-items:center; gap:4px; padding:10px 12px; box-shadow:0 0 0 1px inset var(--border-80); border-radius:var(--br); font-size:14px; white-space:nowrap; overflow:hidden}
.select-country .selectbox::after{content:''; top:50%; right:18px; display:block; width:16px; height:16px; background:url('/images/ico_arrow.svg') no-repeat center / cover; transform:rotate(-90deg); opacity:0.4}
.select-country .select-item{display:flex; align-items:center; gap:4px; padding:10px 12px; background-color:var(--color-lightgreen-bg); border-radius:var(--br); max-width:120px}
.select-country .select-item img{width:21px; flex-shrink:0}
.select-country .country-name{font-size:14px; font-weight:500; line-height:1.25;white-space:nowrap; text-overflow:ellipsis; overflow:hidden}

@media(min-width:375px){
  .select-country .select-item{max-width:180px}
}
@media(min-width:1070px){
  .list-count .num{font-size:15px}
}

/* 언어 선택 ---------- */
.language-list{width:100%}
.language-item{position:relative; display:flex; flex-direction:column; gap:2px; padding:8px 40px 8px 0; border-bottom:1px solid var(--border-50); cursor:pointer}
.language-item .native{font-size:16px; font-weight:500; line-height:1.4; letter-spacing:-0.01em}
.language-item .display{font-size:13px; color:var(--color-gray-e); line-height:1.3}
.language-item.active::after{content:''; position:absolute; right:0; top:50%; display:inline-block; width:24px; height:24px; background-color:var(--color-primary); -webkit-mask:url('/images/ico_check.svg') no-repeat center right / cover; mask:url('/images/ico_check.svg') no-repeat center right / cover; transform:translateY(-50%)}
.language-item.active .native{color:var(--color-primary)}
.language-list li:last-child .language-item{border-bottom:none}

/* 스위치 ---------- */
.form-switch .form-check-label{position:relative; display:block; width:52px; height:30px; cursor:pointer; -webkit-tap-highlight-color:transparent; transform:translate3d(0, 0, 0)}
.form-switch .form-check-label:before{content:''; position:relative; top:0; left:0; width:100%; height:100%; display:block; background:var(--color-light-bg); border-radius:var(--br-circle); transition:background .2s ease}
.form-switch .form-check-label .pin{position:absolute; top:50%; left:2px; margin-top:-12px; width:24px; height:24px; display:block; transition:all .2s ease}
.form-switch .form-check-label .pin::after{content:''; position:absolute; top:0; left:0; width:100%; height:100%; background-color:white; border-radius:50%; box-shadow:0 3px 8px rgba(154, 153, 153, 0.5)}
.form-switch .form-check-label .pin::before{content:''; position:absolute; display:block; width:46px; height:46px; top:50%; left:50%; margin-top:-23px; margin-left:-23px; background-color:var(--color-primary); border-radius:50%; transform:scale(0); opacity:1; pointer-events:none}
.form-switch .form-check-input:checked + .form-check-label::before{background-color:var(--color-primary)}
.form-switch .form-check-input:checked + .form-check-label .pin{transform:translateX(100%); transition:all .2s cubic-bezier(0.8, 0.4, 0.3, 1.25), background .15s ease}
.form-switch .form-check-input:checked + .form-check-label .pin::after{box-shadow:0 3px 8px rgba(79, 46, 220, 0.2)}
.form-switch .form-check-input:checked + .form-check-label .pin::before{transform:scale(1); opacity:0; transition:all .4s ease}



/*----------------------------------------------------
리스트
----------------------------------------------------*/
.lists{row-gap:16px}
.lists.row{margin-left:calc(var(--gutter-x) * -1); margin-right:calc(var(--gutter-x) * -1)}
.lists.row > *{padding-left:var(--gutter-x); padding-right:var(--gutter-x)}
.lists .list-link{display:flex; flex-direction:column; align-items:center; gap:12px}
.lists .list-link:hover .title{color:var(--color-primary)}
.lists .thum{position:relative; width:100%; border-radius:var(--br-lg); flex-shrink:0; overflow:hidden}
.lists .thum::after{border-radius:var(--br-md)}
.lists .thum-img{width:100%; height:auto; padding-bottom:60%; background-color:var(--color-light-bg); background-size:cover; background-position:center; background-repeat:no-repeat; transition:all .3s ease}
[class*="list-review"] .thum-img,
[class*="list-nav"] .thum-img{background-image:url(/images/ico_3d_letter.svg)}
[class*="list-review"] .thum.noimg .thum-img,
[class*="list-nav"] .thum.noimg .thum-img{background-size:20%}
.lists a:hover .thum-img{transform:scale(1.05)}
.lists .text-wrap{display:flex; flex-direction:column; align-items:flex-start; gap:4px; width:100%}
.lists .text-wrap > *:not(.title, .badge){font-size:13px; line-height:1.4}
.lists .text-wrap .sub,
.lists .text-wrap .user{display:-webkit-box !important; -webkit-line-clamp:2; overflow:hidden; text-overflow:ellipsis; -webkit-box-orient:vertical}
.lists .title{font-size:16px; font-weight:500; color:var(--color-title); line-height:1.4; letter-spacing:-0.02em; display:-webkit-box !important; -webkit-line-clamp:2; overflow:hidden; text-overflow:ellipsis; -webkit-box-orient:vertical; transition:all .15s ease}
.lists .sub{display:flex; gap:5px; color:var(--color-gray-c)}
.lists .sub .ico-arrow-left::before{margin-left:-3px}
.lists .sub .ico-arrow-right::before{margin-right:-3px}
.lists .user,
.lists .cate{color:var(--color-secondary)}
.lists .detail{display:flex; flex-wrap:wrap; column-gap:6px; row-gap:2px; color:var(--color-gray-e)}
.lists .detail .ico::before{margin-left:0}
.lists.no-gap{gap:0}
.lists.no-gap .list-link{padding-top:16px; padding-bottom:16px}

@media(min-width:768px){
  .lists .thum::after{border-radius:var(--br-lg)}
}
@media(min-width:1070px){
  .lists .list-link{gap:16px}
  .lists .title{font-size:17px}
}

/* 포토 리뷰 ---------- */
.list-photo{--photo-padding:0.5px; row-gap:calc(var(--photo-padding) * 2)}
.list-photo.row{margin-left:calc(var(--photo-padding) * -1); margin-right:calc(var(--photo-padding) * -1)}
.list-photo.row > *{padding-left:var(--photo-padding); padding-right:var(--photo-padding)}
.list-photo .thum,
.list-photo .thum::after{border-radius:0}
.list-photo .thum-img{padding-bottom:100%}
.list-photo .photo-num{position:absolute; right:0; bottom:0; display:flex; justify-content:center; align-items:center; min-width:24px; height:24px; padding:6px; background:rgba(0, 0, 0, 0.6); backdrop-filter:blur(6px); font-size:12px; font-weight:600; color:var(--color-white); line-height:1.3; z-index:2}

@media(min-width:768px){
  .list-photo{--photo-padding:2px}
}

/* 가로형 리스트 ---------- */
@media(max-width:767px){
  .list-lateral .list-link{flex-direction:row; gap:16px}
  .list-lateral .thum{width:var(--thumb); height:var(--thumb); border-radius:var(--br-md)}
  .list-lateral .thum-img{padding-bottom:100%}
  .list-lateral .thum.noimg .thum-img{background-size:45%}
}

/* 이전, 다음 글 */
.list-nav .list-link{flex-direction:row; gap:16px; border-top:1px solid var(--border-50)}
.list-nav .thum{width:var(--thumb); height:var(--thumb); border-radius:var(--br-md)}
.list-nav .thum-img{padding-bottom:100%}
.list-nav .thum.noimg .thum-img{background-size:45%}
.list-nav .sub{margin-bottom:2px}

@media(min-width:1070px){
  .list-nav .thum{--thumb:100px; width:var(--thumb); height:var(--thumb)}
}

/* 캠페인 */
.list-campaign .badge{position:absolute; top:8px; left:8px; z-index:2}
.list-campaign .sub{flex-wrap:wrap; row-gap:2px}
.list-campaign .anniversary{justify-content:flex-start; pointer-events:none}
.list-campaign .anniversary .tag{font-size:13px; color:var(--color-gray-c)}

/* 캠페인 상단 고정형 */
.top-campaign{width:100%}
.top-campaign .top-item{position:relative; display:flex; justify-content:center; align-items:flex-end; width:100%; min-height:240px; border-radius:24px; overflow:hidden}
.top-campaign .text-wrap{display:flex; flex-direction:column; align-items:flex-start; gap:8px; width:100%; padding:24px; z-index:2}
.top-campaign .thum{position:absolute; top:0; right:0; bottom:0; left:0; width:100%; height:100%}
.top-campaign .thum-img{width:100%; height:100%; padding-bottom:inherit; background-size:cover; background-position:center; background-repeat:no-repeat; transition:all .3s ease}
.top-campaign .thum::after{content:''; position:absolute; left:0; top:0; right:0; bottom:0; display:block; width:100%; height:100%; border-radius:24px; background:linear-gradient(0deg, var(--overlay-visual), transparent)} 
.top-campaign:hover .thum-img{transform:scale(1.05)}
.top-campaign .badge{margin-bottom:4px}
.top-campaign .title{font-size:24px; font-weight:700; color:var(--color-white); line-height:1.3; letter-spacing:-0.02em}
.top-campaign .anniversary .tag{color:rgba(255,255,255,0.8); pointer-events:none}
.top-campaign .date{font-size:14px; color:rgba(255,255,255,0.6); line-height:1.3}

@media(max-width:767px){
  .top-campaign .anniversary{justify-content:flex-start}
}
@media(min-width:768px){
  .top-campaign .top-item{min-height:360px}
  .top-campaign .text-wrap{align-items:center; padding:36px}
  .top-campaign .text-wrap > *{text-align:center}
  .top-campaign .title{font-size:28px}
  .list-campaign .badge{top:12px; left:12px; padding:6px 10px; font-size:12px; line-height:1.3}
  .list-campaign .anniversary .tag{font-size:14px}
}
@media(min-width:1070px){
  .top-campaign .top-item{min-height:460px}
  .top-campaign .title{font-size:32px}
}

/* 알림 */
.list-feed .list-link{flex-direction:row; align-items:flex-start; gap:8px; padding-left:18px; padding-right:18px}
.list-feed .list-link::before{content:''; display:inline-block; width:18px; height:18px; background:url('/images/ico_feed.svg') no-repeat center / cover}
.list-feed .new .list-link{background-color:var(--color-light-bg)}
.list-feed .text-wrap{gap:6px}
.list-feed .text-wrap .sub{font-weight:600}

/* 자료실, 내 댓글 ---------- */
.list-achive .list-link,
.list-comment .list-link{border-bottom:1px solid var(--border-50)}
.list-comment .sub{font-weight:500}
.list-achive .list-item:last-child .list-link,
.list-comment .list-item:last-child .list-link{border-bottom:0}



/*----------------------------------------------------
피드백
----------------------------------------------------*/
/* 팝업 ---------- */
body:has(.pop.active){overflow-y:hidden}
.pop{background:var(--overlay); position:fixed; top:0; left:0; width:100%; height:100%; transition:all .15s ease; z-index:9999}
.pop .popin{position:absolute; left:0; bottom:0; display:flex; flex-direction:column; gap:20px; padding:20px; border-radius:24px 24px 0 0; background:var(--color-white-bg); box-shadow:0 12px 25px 0 rgba(0,0,0,0.15); text-align:center; width:100%; transition:all .2s ease; transform:translateY(100%); overflow:hidden}
.pop.active .popin{transform:translateY(0)}
.pop .pop-txt{display:flex; flex-direction:column; gap:8px}
.pop .pop-tit{display:flex; flex-direction:column; align-items:center; gap:20px; font-size:20px; font-weight:700; color:var(--color-title); line-height:1.4; letter-spacing:-0.02em}
.pop .pop-tit::before{content:''; display:block; width:48px; height:48px; background:no-repeat center / contain; margin-top:8px}
.pop .pop-desc{font-size:15px; color:var(--color-gray-d)}
.pop .btns{justify-content:center; margin-top:4px}
/* .pop .btns .btn{width:100%} */

/* icon */
.pop-delete .pop-tit::before{background-image:url('/images/ico_3d_delete.svg')}
.pop-exit .pop-tit::before{background-image:url('/images/ico_3d_exit.svg')}

@media(min-width:460px){
  .pop{align-items:center; padding:20px; transition:none}
  .pop.active{display:flex; align-items:center; justify-content:center}
  .pop .popin{position:relative; width:360px; padding:24px; border-radius:24px; transition:none; transform:translateY(0)}
}

/* 선택 팝업 ----- */
.pop-select .popin{max-height:100%; padding-bottom:0; text-align:left; gap:0}
.pop-select .pop-tit{display:flex; flex-direction:row; justify-content:space-between; align-items:flex-start}
.pop-select .pop-tit::before{display:none}
.btn-close::after{content:''; display:block; width:24px; height:24px; background:url('/images/ico_close.svg') no-repeat center / 20px}
.pop-select .select-list{display:flex; flex-direction:column; gap:20px; padding-top:20px; padding-bottom:24px; max-height:460px; overflow-y:scroll}
.pop-select .select-list::-webkit-scrollbar{display:none}

@media(min-width:460px){
  .pop-select .popin{width:500px}
  .pop-select .select-list{max-height:600px}
}

/* 활동 체크 */
.pop-active .pop-txt{gap:16px}
.pop-active .pop-tit{font-size:16px; font-weight:500; color:var(--color-gray-d); line-height:1.4}
.pop-active .select-list{gap:32px; mask-image:linear-gradient(to bottom, rgba(255, 255, 255, 0) 1%, rgba(255, 255, 255, 1) 4%); -webkit-mask-image:linear-gradient(to bottom, rgba(255, 255, 255, 0) 1%, rgba(255, 255, 255, 1) 4%)}
.pop-active .banner{flex-shrink:0}
.pop-active .active-col{display:flex; flex-direction:column; gap:16px}
.pop-active .list-wrap{display:flex; flex-direction:column; gap:8px}
.ico-calendar{display:flex; align-items:flex-start; gap:6px; font-size:18px; font-weight:600; line-height:1.3; letter-spacing:-0.02em}
.ico-calendar::before{content:''; display:inline-block; width:24px; height:24px; background:url('/images/ico_calendar.svg') no-repeat center / 20px; flex-shrink:0; margin:0}

@media(min-width:460px){
  .ico-calendar{font-size:19px}
}
@media(min-width:1070px){
  .pop-active .banner .sub{font-size:13px}
  .pop-active .banner .title{font-size:17px}
  .ico-calendar{font-size:20px}
}

/* 국가 선택 */
.pop-country .search{margin-top:20px}
.pop-country .search .input-search{padding-right:18px}
.pop-country .search .btn-search{display:none}
.pop-country .select-list{mask-image:linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 4%); -webkit-mask-image:linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 4%)}
.pop-country .country-col{display:flex; flex-direction:column; gap:4px}
.pop-country .country-tit{padding-left:6px; font-size:16px; font-weight:700; line-height:1.5; letter-spacing:-0.02em}
.pop-country .list-wrap{display:flex; flex-wrap:wrap}
.pop-country .list-wrap li{width:50%}
.pop-country .country-item{display:flex; align-items:flex-start; gap:4px; padding:8px; border-radius:var(--br); cursor:pointer}
.pop-country .country-item:hover,
.pop-country .country-item.active{background-color:var(--color-lightgreen-bg)}
.pop-country .country-item .image-area{width:21px; height:14px; margin-top:3px; margin-right:4px; border-radius:0; flex-shrink:0}
.pop-country .country-item .image-area::after{border-radius:0}
.pop-country .country-item .image-area img{position:absolute; top:0; left:0; right:0; bottom:0}
.pop-country .country-item .country-name{font-size:15px; font-weight:500; line-height:1.35}
.pop-country .country-item .country-num{font-size:13px; color:var(--color-gray-d); margin-left:4px}
.pop-country .country-item:hover .country-name,
.pop-country .country-item:hover .country-num,
.pop-country .country-item.active .country-name,
.pop-country .country-item.active .country-num{color:var(--color-primary)}

@media(min-width:768px){
  .pop-country .country-tit{padding-left:8px}
  .pop-country .country-item{padding:8px 12px}
}

/* 토스트 ---------- */
/* 기본 스타일은 omposables > useToast.ts에 작성되어 있음. 해당 파일만 가져다쓰면 되도록.
커스텀하려면 여기에 추가로 작성하면 됨 */
#toast .link{color:#FFDF6E; text-decoration:underline; cursor:pointer}

/* 배너 ---------- */
.banner{display:flex; align-items:center; gap:12px; width:100%; padding:20px 18px; background-color:var(--color-light-bg); border-radius:var(--br-lg)}
.banner .text{display:flex; flex-direction:column; gap:4px; flex:1}
.banner .sub{font-size:13px; color:var(--color-gray-d); line-height:1.4}
.banner .title{font-size:16px; font-weight:600; color:var(--color-gray-a); line-height:1.3; letter-spacing:-0.02em}
.banner .ico{font-size:0px; color:var(--color-gray-e)}
.banner .ico::before{font-size:16px; margin:0}
.banner:hover .ico::before{color:var(--color-gray-b)}
.banners .banner:not(:first-child){margin-top:6px}

@media(min-width:1070px){
  .banner .sub{font-size:14px}
  .banner .title{font-size:18px}
}

/* 이미지 배너 */
.banner.bg-img{position:relative; flex-direction:column; gap:8px; align-items:flex-start; overflow:hidden; cursor:pointer}
.banner.bg-img .img{position:absolute; left:0; top:0; right:0; bottom:0; width:100%; height:100%; background-repeat:no-repeat; background-position:center; background-size:cover; transition:all .3s ease}
.banner.bg-img .img::before{content:''; position:absolute; left:0; top:0; right:0; bottom:0; display:block; width:100%; height:100%; background-color:rgba(15,17,22,0.5); transition:all .1s ease}
.banner.bg-img > *{z-index:2}
.banner.bg-img .badge{padding:7px 10px; font-size:14px; font-weight:500; line-height:1}
.banner.bg-img .title{color:var(--color-white)}
.banner.bg-img .sub{font-size:13px; color:rgba(255,255,255,0.8); line-height:1.3}
.banner.bg-img .btn-more{display:flex; align-items:center; gap:2px; font-size:14px; color:rgba(255,255,255,0.8); line-height:1.2}
.banner.bg-img .ico{color:rgba(255,255,255,0.8)}
.banner.bg-img:hover .btn-more, 
.banner.bg-img:hover .ico::before{color:var(--color-white)}
.banner.bg-img:hover .img{transform:scale(1.03)}

/* asez */
.banner.asez .img::before{background:linear-gradient(90deg, rgba(17,105,209,1) 10%, rgba(17,105,209,0.8) 40%, rgba(17,105,209,0) 70%)}
.banner.asezwao .img::before{background:linear-gradient(90deg, rgba(9, 171, 172,1) 10%, rgba(9, 171, 172,0.8) 40%, rgba(9, 171, 172,0) 70%)}
.banner.asezstar .img::before{background:linear-gradient(90deg, rgba(6, 171, 121,1) 10%, rgba(6, 171, 121,0.8) 40%, rgba(6, 171, 121,0) 70%)}
.banner.supporters .img::before{background:linear-gradient(90deg, rgba(62, 113, 255,1) 10%, rgba(62, 113, 255,0.8) 40%, rgba(6, 171, 121,0) 70%)}
.banner.bg-grad .text{max-width:50%}
/* 본문 배너 */
.post-banner{font-size:15px; font-weight:500; color:var(--color-gray-a); line-height:1.3; padding:12px 16px; border-radius:var(--br-md); background-color:var(--color-bg)}
.post-banner.save-draft{color:var(--color-primary); background-color:var(--color-lightgreen-bg)}
.post-banner.trans{color:var(--color-secondary); background-color:var(--color-lightblue-bg)}



/*----------------------------------------------------
네비게이션
----------------------------------------------------*/
/* 탭 ---------- */
/* tab-fill */
.tab-fill{position:relative; width:100%}
.tab-fill .items{display:flex; flex-wrap:nowrap; gap:var(--unit-50); overflow:hidden; overflow-x:auto; padding-right:64px}
.tab-fill .items::-webkit-scrollbar{display:none}
.tab-fill .fill-item{display:flex; align-items:center; padding:10px 16px; background-color:var(--color-light-bg); border-radius:var(--br-circle); font-size:14px; font-weight:500; color:var(--color-gray-c); line-height:1.3; flex-shrink:0; transition:all .2s ease; cursor:pointer}
.tab-fill .fill-item:hover{background-color:var(--color-hover-bg)}
.tab-fill .fill-item.current{background-color:var(--color-primary); color:var(--color-white)}
.tab-fill .fill-item.current .count{opacity:1}
.tab-fill .btn-toggles{position:absolute; top:0; right:0; width:64px; height:40px; cursor:pointer}
.tab-fill .btn-toggles::before{content:''; position: absolute; right:0; display:flex; justify-content:center; align-items:center; width:40px; height:40px; background:#FFF url('/images/ico_arrow.svg') no-repeat center / 16px; box-shadow:0 0 0 1px inset rgba(0,0,0,0.1); border-radius:var(--br-circle); opacity:0.9; margin:0; transform:rotate(-90deg); z-index:2}
.tab-fill .btn-toggles::after{content:''; display:block; position:absolute; top:0; right:0; width:100%; height:100%; background:linear-gradient(to right, rgba(255, 255, 255, 0.00) 0%, #FFF 30%); z-index:1}
.tab-fill .btn-toggles.active::before{transform:rotate(90deg)}
.tab-fill .btn-toggles.active::after{display:none}
.tab-fill .btn-toggles.active + .items{flex-direction:inherit; overflow-x:inherit; flex-wrap:wrap}

@media(max-width:767px){
  .tab-fill .items{padding-left:var(--space-side)}
  .tab-fill .btn-toggles::before{right:var(--space-side)}
}

@media(min-width:768px){
  .tab-fill{max-width:var(--width); padding-left:var(--space-side); padding-right:var(--space-side); margin-left:auto; margin-right:auto}
  .tab-fill .items{padding-right:44px}
  .tab-fill .fill-item{font-size:15px}
  .tab-fill .btn-toggles{right:var(--space-side); width:44px}
}

/* tab-line */
.tab-line{display:flex; align-items:center; width:100%; box-shadow:0 -1px 0 0 inset var(--border-50)}
.tab-line .line-item{flex:1; min-height:48px; padding:14px 20px; font-size:14px; font-weight:600; color:var(--color-gray-c); line-height:1.4; text-align:center; cursor:pointer}
.tab-line .line-item.current{color:var(--color-gray-a); box-shadow:0 -2px 0 0 inset var(--color-gray-a)}

@media(min-width:768px){
  .tab-line .line-item{font-size:16px}
}

/* 페이지네이션 ---------- */
.pagination{display:flex; justify-content:center; align-items:center; gap:var(--unit-400)}
.pagination .page-arrow{display:flex; justify-content:center; align-items:center; width:40px; height:40px; background-color:var(--color-light-bg); border-radius:var(--br-circle); transition:all .2s ease}
.pagination .page-arrow::before{content:''; width:16px; height:16px; background:url('/images/ico_arrow.svg') no-repeat center / contain; opacity:0.7}
.pagination .page-arrow.prev::before{margin-right:1px}
.pagination .page-arrow.next::before{transform:rotate(180deg); margin-left:1px}
.pagination .page-arrow:hover{background-color:var(--color-hover-bg)}
.pagination .page-arrow.disabled{pointer-events:none; opacity:0.5}
.pagination .field{display:flex; align-items:center; gap:5px}
.pagination .field .current{width:32px; height:32px; border:1px solid var(--border); border-radius:var(--br); font-size:15px; line-height:1.35; text-align:center}
.pagination .field .total{font-size:15px; line-height:1.35}

/* 노 데이터 ---------- */
.no-data{display:flex; flex-direction:column; align-items:center; gap:20px; width:100%; --data-padding:80px; padding-top:var(--data-padding); padding-bottom:var(--data-padding)}
.no-data .text{display:flex; flex-direction:column; align-items:center; gap:16px; max-width:560px; font-size:16px; color:var(--color-gray-d); text-align:center}
.no-data .text::before{content:''; display:block; width:60px; height:60px; background:url('/images/ico_3d_nodata.svg') no-repeat center / contain}

[class*="page-header"] + .no-data{padding-top:calc( var(--data-padding) - var(--header-padding) )}

@media(min-width:1070px){
  .no-data{--data-padding:160px}
}



/*----------------------------------------------------
본문
----------------------------------------------------*/
/* 캠페인 실천 항목 ---------- */
.task-box{display:flex; flex-direction:column; gap:12px; padding:20px; background-color:var(--color-light-bg); border-radius:var(--br-lg)}
.task-box .task-item{display:flex; gap:8px}
.task-box .task-item .num{display:flex; justify-content:center; align-items:center; width:20px; height:20px; background-color:var(--color-primary); border-radius:6px; font-size:12px; font-weight:700; color:var(--color-white); line-height:1.4; margin-top:1px; flex-shrink:0}
.task-box .task-item .text{font-size:15px}
.task-box .task-item .title{font-size:16px; font-weight:600; line-height:1.4}
.task-box .task-item .info{font-size:13px; color:var(--color-gray-d); line-height:1.4; margin-top:4px}

@media(min-width:1070px){
  .task-box .task-item .num{margin-top:2px}
  .task-box .task-item .text{font-size:16px; line-height:1.6}
  .task-box .task-item .title{font-size:17px}
}

/* 캠페인 결과 ---------- */
.result{display:flex; flex-direction:column; gap:20px; width:100%}
.result .section-header{gap:8px}
.result .section-header span{color:var(--color-accent)}
.result .sub{font-size:18px; font-weight:700; color:var(--color-title); line-height:1.3; letter-spacing:-0.02em}
.result-list{display:flex; flex-direction:column; gap:8px; width:100%; padding:18px; box-shadow:0 0 0 1px inset var(--border-80); border-radius:var(--br-lg); background-color:var(--color-white-bg)}

@media(min-width:1070px){
  .result .sub{font-size:20px}
}

/* 첨부 파일 ---------- */
.attached-file{display:flex; flex-direction:column; gap:8px; padding:18px; background-color:var(--color-light-bg); border-radius:var(--br-lg)}
.attached-file .file-item{display:flex; gap:4px; font-size:15px; line-height:1.4; transition:all .15s ease}
.attached-file .file-item .ico{color:var(--color-primary)}
.attached-file .file-item .ico:before{transform:rotate(180deg)}
.attached-file .file-item:hover{color:var(--color-primary)}

@media(min-width:1070px){
  .attached-file .file-item{font-size:16px; line-height:1.5}
}

/* 환경 보전 활동 본문 ---------- */
/* 활동 내용 */
.action-list{width:100%; padding:12px 16px; background-color:var(--color-light-bg); border-radius:var(--br-lg)}
.action-list .info-detail{gap:4px}
.action-list .info-detail li{font-size:14px; font-weight:500; color:var(--color-body)}

/* 활동 링크 */
.action-link{display:flex; justify-content:space-between; align-items:center; gap:12px; width:100%; padding:14px 16px; background-color:var(--color-light-bg); border-radius:var(--br-lg); transition:all .1s ease}
.action-link:hover{background-color:var(--color-hover-bg)}
.action-link:not([href]),
.action-link[href=""],
.action-link[href="#"]{pointer-events:none}
.action-link .text{display:flex; flex-direction:column; gap:2px; width:100%}
.action-link .title{font-size:14px; font-weight:600; line-height:1.3}
.action-link .sub{font-size:12px; color:var(--color-gray-c); line-height:1.2}
.action-link .btn-link{display:inline-flex; align-items:center; font-size:12px; font-weight:500; color:var(--color-primary); line-height:1.25; flex-shrink:0}
.action-link .icon-wrap{display:flex; align-items:center; justify-content:center; gap:6px; width:18px; height:18px; overflow:hidden}
.action-link .ico-link{font-size:0; transition:all .4s ease}
.action-link .ico-link::before{display:none}
.action-link .ico-link::after{content:''; display:inline-block; width:12px; height:12px; background:url('/images/ico_link.svg') no-repeat center / contain; flex-shrink:0}
.action-link .ico-link:nth-child(1){transform:translateX(-4px) translateY(14px)}
.action-link .ico-link:nth-child(2){transform:translateX(-9px) translateY(0px)}
.action-link:hover .icon-wrap .ico-link:nth-child(1){transform:translateX(9px) translateY(0px)}
.action-link:hover .icon-wrap .ico-link:nth-child(2){transform:translateX(4px) translateY(-14px)}
.action-link.internal .ico-link::after{background-image:url('/images/ico_arrowtail.svg')}
.action-link.internal .ico-link:nth-child(1){transform:translateX(-8px)}
.action-link.internal .ico-link:nth-child(2){transform:translateX(-8px)}
.action-link.internal:hover .icon-wrap .ico-link:nth-child(1){transform:translateX(8px)}
.action-link.internal:hover .icon-wrap .ico-link:nth-child(2){transform:translateX(8px)}

@media(min-width:1070px){
  /* 활동 내용 */
  .action-list{padding:16px 20px}
  .action-list .info-detail li{font-size:15px}
  /* 활동 링크 */
  .action-link{padding:16px 20px}
  .action-link .title{font-size:16px}
  .action-link .sub{font-size:13px}
  .action-link .btn-link{font-size:14px}
  .action-link .btn-link::after{width:14px; height:14px}
}