@charset "euc-kr";

:root {--color-main: #f7455d; }

.headerWrap.aiColoringForm{width: 100%; height: 80px; padding: 0 20px; border-bottom: 1px solid #eee; position: sticky; top: 0; background-color: #fff; z-index: 2; }
.headerWrap.aiColoringForm .header{height: 80px; display: flex; align-items: center; justify-content: space-between; max-width: 1920px; margin: 0 auto;}
.headerWrap.aiColoringForm .header .header__logoWrap{display: flex; align-items: center; justify-content: flex-start; gap: 10px; }
.headerWrap.aiColoringForm .header .header__logoWrap a{font-size: 20px; color: #000; font-weight: var(--weight-bold); margin-top: 0;}
.headerWrap.aiColoringForm .header .rightWrap{gap: 13px !important;}
.headerWrap.aiColoringForm .header .rightWrap .btn-chip  { font-size: 13px; border-radius: 50px; padding: 0px 18px; height: 28px; line-height: 26px; border: 1px solid #c2c2c2; color: #666; }
.headerWrap.aiColoringForm .header .rightWrap .info{color: #666;}
.headerWrap.aiColoringForm .header .rightWrap .info strong{color: #666;}
.headerWrap.aiColoringForm .header .rightWrap .credits{border: 1px solid #fa8f9e; color: var(--color-main); font-size: 13px; border-radius: 50px; padding: 6px 18px; }
.headerWrap.aiColoringForm .header .rightWrap .credits *{color: inherit; font-size: inherit; }

.content.aiColoringForm{max-width: 1920px;}
.content.aiColoringForm .leftWrap{width: 20%; max-width: 370px; padding: 33px 30px 33px 0; border-right: 1px solid #eee; position: sticky; top: 80px; height: calc(100vh - 81px); z-index: 1 /* height: calc(100vh - 113px); overflow: auto; scrollbar-width: none;*/}
.content.aiColoringForm .rightWrap{width: 80%; max-width: 1520px; padding: 33px 30px; overflow-y: auto; position: sticky; top: 80px; }
.content.aiColoringForm .rightWrap::-webkit-scrollbar {
    display: none; /* ½ºÅ©·Ñ¹Ù ¼û±â±â */
}
.content.aiColoringForm .rightWrap .container{}
.content.aiColoringForm .rightWrap .docSec{ max-width: 1280px; margin: 0 auto 50px;}
.content.aiColoringForm .rightWrap .docSec:last-child{margin-bottom: 0px;}

.content.aiColoringForm .rightWrap .docSec .section__list.max-5 .list__item:nth-child(n+6){display: none;}
.content.aiColoringForm .rightWrap .docSec .section__list.max-10 .list__item:nth-child(n+11){display: none;}
.content.aiColoringForm .rightWrap .docSec .section__list .list__item{position: relative; /* width: 232px; height: 327px; */}
.content.aiColoringForm .rightWrap .docSec .section__list .list__item.loading .combine-thum{border: 0;}
.content.aiColoringForm .rightWrap .docSec .section__list .list__item.loading .list__thumb::before  { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-repeat: no-repeat; background-position: center; z-index: 1; background-image: -webkit-linear-gradient( -56deg, rgb(254,236,238) 0%, rgb(249,240,252) 100%); border-radius: 5px; }
.content.aiColoringForm .rightWrap .docSec .section__list .list__item.loading .list__thumb::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: url('https://www.yesform.com/z_n/imgs/2025/speechAi/loading.gif'); /* ·Îµù À̹ÌÁö °æ·Î */
background-repeat: no-repeat; background-position: center; background-size: 50px; z-index: 2; }
.content.aiColoringForm .rightWrap .docSec .section__list .list__item .mouse-over{z-index: 3;}
.section__list .list__thumb{aspect-ratio: 3 / 4;}
/* .section__list .list__thumb img{padding: 10px;} */




/* ÇÊÅÍ */
.content.aiColoringForm .filterRight{padding-top: 0; overflow: unset; top: 80px; height: calc(100vh - 80px); }
.content.aiColoringForm .filter > div:not(.filter__top){border-top: none; padding: 40px 0 0;}
.content.aiColoringForm .filter > div:first-child{padding-top: 0;}
/* .content.aiColoringForm .filter > div.filter__btn{padding-top: 30px;} */
.content.aiColoringForm .filter > div.filter__btn .credit-deduction{margin-right: -4px;}

.content.aiColoringForm .filter__title{margin-bottom: 15px;}
.content.aiColoringForm .filter__singleline .filter__title{margin-bottom: 0px;}
.content.aiColoringForm .form--dg .form-control:focus, .form--dg .form-control:focus-within{border-color: var(--color-main);}

.content.aiColoringForm .filter__view .filter__viewBtn--ty{flex-wrap: nowrap; gap: 5px; min-height: 90px; height: auto; background-color: #f5f5f5; border-radius: 5px; align-items: center; padding: 8px; position: relative;}
.content.aiColoringForm .filter__view .filter__viewBtn--ty input + label{color: #999; font-size: 13px; z-index: 1;}
.content.aiColoringForm .filter__view .filter__viewBtn--ty input + label strong{color: #666;font-size: 15px;}
.content.aiColoringForm .filter__view .filter__viewBtn--ty input:hover + label{width: 25%; height: 70px; background-color: #eaeaea; border: 0 !important}
.content.aiColoringForm .filter__view .filter__viewBtn--ty input:checked:hover + label{background-color: unset;}
/* .content.aiColoringForm .filter__view .filter__viewBtn--ty input:checked:hover + label{border: 2px solid var(--color-main) !important;} */
.content.aiColoringForm .filter__view .filter__viewBtn--ty .bg-checked{position: absolute; background-color: #fff; border: 2px solid var(--color-main); border-radius: 5px; transition: all .3s ease; z-index: 0; }

.content.aiColoringForm .filter__view .filter__viewBtn--ty.age input + label{flex-direction: column; gap: 2px; width: 25%; height: 70px; border: 0;}
/* .content.aiColoringForm .filter__view .filter__viewBtn--ty.age input:checked + label{width: 25%; height: 70px; color: var(--color-main); border: 2px solid var(--color-main); background-color: #fff;} */
.content.aiColoringForm .filter__view .filter__viewBtn--ty.age input:checked + label strong{color: var(--color-main);}
/* .content.aiColoringForm .filter__view .filter__viewBtn--ty.age input:hover + label strong{color: var(--color-main);} */

.content.aiColoringForm .filter__view .filter__viewBtn--ty.size input + label{height: 70px; border: 0; width: 33.333%; text-align: center; }
.content.aiColoringForm .filter__view .filter__viewBtn--ty.size input + label i{border: 1px solid #6e6e6e; background-color: #dedede; }
.content.aiColoringForm .filter__view .filter__viewBtn--ty.size input + label i + div{display: flex; flex-direction: column; align-items: center; color: #999; font-size: 13px;}
.content.aiColoringForm .filter__view .filter__viewBtn--ty.size input:checked + label{width: 33.333%; height: 70px; color: var(--color-main);}
.content.aiColoringForm .filter__view .filter__viewBtn--ty.size input:checked + label strong{color: var(--color-main);}
.content.aiColoringForm .filter__view .filter__viewBtn--ty.size input:checked + label i{border-color: #fbd2d7; background-color: #fbd2d7; }
/* .content.aiColoringForm .filter__view .filter__viewBtn--ty.size input:hover + label *{color: var(--color-main);} */
/* .content.aiColoringForm .filter__view .filter__viewBtn--ty.size input:hover + label i{border-color: #fbd2d7; background-color: #fbd2d7; } */
/* .content.aiColoringForm .filter__view .filter__viewBtn--ty.size input:hover + label{width: 33.333%; height: 70px; color: var(--color-main); border: 2px solid var(--color-main); background-color: #fff;} */


.content.aiColoringForm .filter__view .filter__viewBtn--ty input + label i.ty1{width: 22px; height: 30px;}
.content.aiColoringForm .filter__view .filter__viewBtn--ty input + label i.ty2{width: 30px; height: 22px;}
.content.aiColoringForm .filter__view .filter__viewBtn--ty input + label i.ty3{width: 23px; height: 23px;}

.content.aiColoringForm .filter__count .filter__count-txt{color: #929292; font-size: 13px;}
.content.aiColoringForm .filter__count .filter__count-wrap{display: flex; align-items: center; flex-wrap: nowrap; justify-content: space-between; gap: 0; width: 100%; height: 45px; background-color: #f5f5f5; border-radius: 5px; align-items: center; padding: 10px; }
.content.aiColoringForm .filter__count .filter__count-wrap > button{width: 26px; height: 26px; border-radius: 3px; display: flex; align-items: center; justify-content: center; }
.content.aiColoringForm .filter__count .filter__count-wrap > button .gicon{width: 20px; height: 20px;}
.content.aiColoringForm .filter__count .filter__count-wrap > button:hover{background-color: #dedede;}
.content.aiColoringForm .filter__count .filter__count-wrap .filter__count-num {width: 80%; text-align: center; text-align: center; background-color: transparent;}

.content.aiColoringForm .filter__title:has(.info-Bubble){position: relative; cursor: pointer; width: fit-content; display: flex; align-items: center; gap: 3px; }
.content.aiColoringForm .filter__title:hover .info-Bubble{display: flex !important;}
.content.aiColoringForm .filter__title .info-Bubble{display: none; position: absolute; top: 0px; margin-top: 34px; border: 1px solid #e7e7e7; border-radius: 5px; padding: 23px; background-color: #fff; box-shadow: 3.536px 3.536px 10px 0px rgba(0, 0, 0, 0.1); z-index: 3; gap: 20px; width: max-content;}
.content.aiColoringForm .filter__title .info-Bubble::after{content: ""; position: absolute; top: -13px; left: 24px; width: 28px; height: 13px; background-image: url("https://img.chamjal.com/images/aiColoringForm/info-Bubble--tail.png"); z-index: 1;}

.content.aiColoringForm .filter__title .info-Bubble.topic{ flex-direction: column; align-items: flex-start;}
.content.aiColoringForm .filter__title .info-Bubble.topic b{font-size: 15px; color: #666;}
.content.aiColoringForm .filter__title .info-Bubble.topic ul{margin-top: 5px;}
.content.aiColoringForm .filter__title .info-Bubble.topic ul li{font-size: 13px; color: #929292;}

.content.aiColoringForm .filter__title .info-Bubble.age{flex-direction: row; }
.content.aiColoringForm .filter__title .info-Bubble.age ul{display: flex; align-items: center; justify-content: center; gap: 20px; }
.content.aiColoringForm .filter__title .info-Bubble.age ul li b{text-align: center; display: block; color: #666;}
.content.aiColoringForm .filter__title .info-Bubble.age ul li b span{color: #929292; font-size: 13px;}
.content.aiColoringForm .filter__title .info-Bubble.age ul li .imgBox{margin-top: 10px; border: 1px solid #e7e7e7; border-radius: 5px; width: 111px; height: 111px; display: flex; align-items: center; justify-content: center; overflow: hidden;}

.content.aiColoringForm .filter__title .info-Bubble.preview{flex-direction: column; gap: 0; width: fit-content;}
.content.aiColoringForm .filter__title .info-Bubble.preview > div{color: #929292; font-size: 13px;}
.content.aiColoringForm .filter__title .info-Bubble.preview ul{margin-top: 10px; flex-direction: row; display: flex; align-items: center; justify-content: center; gap: 20px; }
.content.aiColoringForm .filter__title .info-Bubble.preview ul li .imgBox{ border: 1px solid #e7e7e7; border-radius: 5px; width: 137px; height: 137px; display: flex; align-items: center; justify-content: center; overflow: hidden; padding: 5px; }

.content.aiColoringForm .filter__singleline{margin-bottom: -10px;}
.content.aiColoringForm .filter__singleline .filter__title .info-Bubble.preview{top: 10px;}

.section__list .list__title a{color: #666;}



/* À¯·áÀüȯ À¯µµ·¹À̾î */
.free_Layer:has(.pay-layer){position: fixed; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%); }
.pay-layer {
  width: 383px;
  *width: 400px;
  margin-top: 60px;
  padding: 16px 20px;
  border: solid 3px #cc3333;
  background: #fff;
  position: relative;
  z-index: 9999;
}
.pay-layer .title {
  margin: 0;
  padding: 10px 0;
  color: #000;
  font-size: 26px;
  text-align: center;
}
.pay-layer .title span {
  color: #cc3333;
}
.pay-layer .text {
  margin: 0;
  padding: 0 0 20px 0;
  text-align: center;
}
.pay-layer .text span {
  color: #3163ca;
}
.pay-layer .border {
  padding: 15px 7px;
  border-top: solid 1px #eaeaea;
  border-bottom: solid 1px #eaeaea;
}
.pay-layer .border .benefit-title {
  float: left;
  width: 90px;
  padding: 10px 0;
  text-align: center;
  color: #fff;
  background: #e98f9a;
}
.pay-layer .border .benefit-text {
  float: left;
  margin: 2px 0 0 15px;
  color: #666;
}
.pay-layer .btn {
  padding: 20px 0 10px 0;
  text-align: center;
}
.pay-layer .btn a {
  display: inline-block;
  margin: 0 auto;
  padding: 5px 10px 7px 10px;
  color: #fff;
  text-decoration: none;
  background: #cc3333;
}
.pay-layer .close {
  position: absolute;
  top: -50px;
  right: 0;
}
/* //À¯·áÀüȯ À¯µµ·¹À̾î */

@media (max-width: 1920px) {
  .content.aiColoringForm{padding: 0 20px;}
}


@media (min-width: 768px) and (max-width: 1600px) {
  .content.aiColoringForm .filter__view .filter__viewBtn--ty{flex-wrap: wrap;}
  .content.aiColoringForm .filter__view .filter__viewBtn--ty.age input + label,
  .content.aiColoringForm .filter__view .filter__viewBtn--ty.age input:hover + label,
  .content.aiColoringForm .filter__view .filter__viewBtn--ty.age input:checked + label{width: 100%;}

  .content.aiColoringForm .filter__view .filter__viewBtn--ty.size input:checked + label,
  .content.aiColoringForm .filter__view .filter__viewBtn--ty.size input:hover + label,
  .content.aiColoringForm .filter__view .filter__viewBtn--ty.size input + label{width: 100%;}

  
  .content.aiColoringForm .filterRight{overflow-y: scroll;}
}


@media (min-width: 768px) and (max-width: 1300px) {
    .content.aiColoringForm .filter .filter__singleline{display: flex ; flex-direction: column; align-items: flex-start; gap: 10px; }

}


@media (max-width: 768px) {
  .headerWrap.aiColoringForm .rightWrap{position: unset;}
  .headerWrap.aiColoringForm .header .rightWrap .credits{padding: 2px 14px; cursor: pointer;}

  .content.aiColoringForm{padding-top: 30px; flex-direction: column;}
  .content.aiColoringForm .leftWrap{position: relative; top: 0; width: 100%; max-width: 100%; height: auto; padding: 0; border: 0; }
  .content.aiColoringForm .leftWrap form{display: inline;}
  .content.aiColoringForm .leftWrap .filterRight{display: inline;}
  .content.aiColoringForm .filter{display: block; position: unset; height: unset; overflow: unset; }
  .content.aiColoringForm .filterRight{position: unset;}
  .content.aiColoringForm .filter > div.filter__btn{position: sticky; bottom: 0; z-index: 2;}

  .content.aiColoringForm .rightWrap{position: unset; height: auto; margin-top: 80px;}
  .content.aiColoringForm .rightWrap{width: 100%; max-width: 100%; padding: 33px 0px 0;}


}