@charset "utf-8";

.flow-container{
  line-height: inherit;



  --create-btn-background: #0152E9;
  --create-btn-color: #FFFFFF;
}
.flow-container * {
  line-height: inherit;
}
.flow-container > .flow{
  display: none;
}

.flow{
  position: relative;
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 100% auto;
}

.flow-01{ 
  /* background-image: url(create/flow-01.png); */
  /* height: 2788px; */
}
.flow-02{ 
  background-image: url(create/flow-02.png);
  height: 1240px;
}
.flow-03{ 
  /* background-image: url(create/flow-03.png);
  height: 2184px; */
}
.flow-04{ 
  /* background-image: url(create/flow-04.png);
  height: 1042px; */
}
.flow-05{ 
  /* background-image: url(create/flow-05.png);
  height: 1031px; */
}

.flow-container[data-flow = 'flow-01'] .flow-01 ,
.flow-container[data-flow = 'flow-02'] .flow-02 ,
.flow-container[data-flow = 'flow-03'] .flow-03 ,
.flow-container[data-flow = 'flow-04'] .flow-04 ,
.flow-container[data-flow = 'flow-05'] .flow-05  {
  display: block;
}


.flow-01-02{
  position: relative;
}








.flow-input-checkbox{
  margin:0;
  appearance: none;
  width:1em;height: 1em;
  background-size: contain;
  background-image: url(./create/input-checkbox-deactive.png);
}

.flow-input-checkbox:checked{
  background-image: url(./create/input-checkbox-active.png);
}







.image-select-button{
  width: 240px;
  height: 300px;
  background: #FAFAFA;
  padding:0; margin:0;
  border: 1px solid #E5E5E5;
  border-radius: 17px;
  background-image: url(./create/image-select-box-plus.png);
  background-position: center center;
  background-repeat: no-repeat;
  cursor: pointer;
}
.image-select-button.hover:hover{
  filter: brightness(0.9);
}


.create-ui-conf-wrap{
  display: flex; 
  flex-direction: column;
  justify-content: space-between;
  /* height: 130px; */
  gap:20px
}

.create-ui-label{
  font-style: normal;
  font-weight: 700;
  font-size: 22px;
  line-height: 140%;
  letter-spacing: -0.02em;
  color: #404040;

  display: flex;
  align-items: center;
  width: 77px;
  flex: 0 0 77px;
}

.create-ui-conf{
  display: flex;
}
.create-ui-list{
  display: flex;
  gap: 8px;
  padding-bottom: 8px;
  user-select: none;
}
.create-ui-scrollbar-x{
  overflow-x: auto;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
}
.create-ui-list-color label{
  padding: 0;
  margin:0;
  display: block;
}
.create-ui-list-color input[type="radio"]{
  --color-tone:#ffffff;
  display: block;
  appearance: none;
  padding: 0;
  margin:0;
  /* color tone */
  width: 56px;
  height: 56px;
  border-radius: 9999vmin;

  background: var(--color-tone);
  cursor: pointer;

  border: 1px solid #9996;
}
.create-ui-list-color input[type="radio"]:checked{
  border: 2px solid #0152E9;
}

.create-ui-list-theme{
  gap: 8px;
}
.create-ui-list-theme label{
  position: relative;
  cursor: pointer;
}
.create-ui-list-theme label input[type="radio"]{
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  border: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}
.theme-text{
  /* Auto layout */
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  /* padding: 8px 12px; */
  width: 106px;
  height: 46px;
  
  /* white */
  background: #FFFFFF;
  /* gray/800 */
  border: 1px solid #A1A1A1;
  border-radius: 500px;

  font-style: normal;
  font-weight: 500;
  font-size: 20px;
  line-height: 150%;
  /* identical to box height, or 30px */
  text-align: center;
  letter-spacing: -0.02em;

  /* black */
  color: #121212;

  
}

.create-ui-list-theme label input[type="radio"]:checked + .theme-text{
  background: #0152E9;
  border: 1px solid #0152E9;
  color: #FFFFFF;
  border-width: 0px;
}


.agree-container{
  display: flex;
  flex-direction: column;
  gap:10px;
}
.agree-wrap{  
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 150%;
  letter-spacing: -0.6px;

  /* black */
  color: #121212;
  padding: 0 20px;
}

.agree-wrap.agree-item{
  padding-left: 42px;
  display: flex;
  justify-content:space-between;
}
.agree-wrap .text-required{
  color: #B6040C;
}
.agree-wrap input[type="checkbox"]{
  font-size: 20px;
  /* margin:0 4px; */
}
.agree-wrap > label {
  display: flex;
  gap:4px;
  align-items: center
}

.agree-wrap a{
  font-family: 'SUIT Variable';
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 150%;
  /* identical to box height, or 21px */
  letter-spacing: -0.5px;

  color: #778088;
  text-decoration: none;

}


.btn-create{
  border-width: 0;
  padding: 0;
  margin:0;


  margin:0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 480px;
  height: 65px;

  background: var(--create-btn-background);
  border-radius: 8px;

  font-style: normal;
  font-weight: 700;
  font-size: 22px;
  line-height: 150%;
  text-align: center;
  letter-spacing: -0.02em;
  color: var(--create-btn-color);

  cursor: pointer;
}
.btn-create.data-daily-gen-image-able[data-daily-gen-image-able="0"]{
  filter: grayscale(1) brightness(0.5)
}


.imodal-create-wrap{
  width: 520px;
  /* popup */

  /* Auto layout */
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 48px 28px 40px;
  width: 520px;
  background: #FFFFFF;
  border-radius: 24px;

}

.imodal-agreed-wrap{

  /* 초상권동의 */

  /* Auto layout */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 20px 0px;

  position: relative;
  width: 360px;
  background: #FFFFFF;
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1);
  border-radius: 16px;


  display: flex;
  flex-direction: column;
  /* gap: 20px; */
}
.imodal-agreed-header{
  /* Title */

  width: 320px;
  height: 27px;
  font-weight: 700;
  font-size: 18px;
  line-height: 150%;
  /* identical to box height, or 27px */
  letter-spacing: -0.5px;

  /* black */
  color: #121212;
  display: flex;
  justify-content: space-between;
  align-items: center;

}

.imodal-agreed-body{
  padding:16px 20px 0 20px
}

.imodal-agreed-content{
    font-weight: 400;
    font-size: 14px;
    line-height: 140%;
    /* or 20px */
    letter-spacing: -0.5px;

    /* gray/500 */
    color: #737373;

    /* Container */
    
    padding: 12px;
    
    /* gray/50 */
    background: #FAFAFA;
    border-radius: 8px;
    
}


.imodal-agreed-header > div{
  flex: 1 1 auto;
}
.imodal-agreed-header > button{
  flex: 0 0 auto;
  padding:0;margin:0;border-width: 0;background-color: transparent;
  cursor: pointer;
}

.imodal-body-select-pattern{

  width: 464px;
  margin:0 auto;

  font-style: normal;
  font-weight: 700;
  font-size: 24px;
  line-height: 140%;
  text-align: center;
  letter-spacing: -0.02em;
  color: #121212;
  
  display: flex;
  flex-direction: column;
  align-items: stretch;
}


.plate-card{
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 0px;
  /* gap: 10px; */

  flex: 0 0 256px;

  text-align: center;
  /* width: 256px;
  height: 366px; */

  /* gray/200 */
  border: 1px solid #E5E5E5;
  border-radius: 16px;
  background-color: #fff;

  overflow: hidden;

  padding:0;margin:0;background-color: #fff;

  

}
.plate-card .plate-image{
  width: 100%;
  aspect-ratio: 1/1;

  display: flex;
  justify-content: center;
  align-items: center;
}
.plate-card .plate-image img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.plate-card  .plate-text-wrap{
  padding:16px 16px 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;;
}
.plate-card .plate-text-en{
  font-style: normal;
  font-weight: 700;
  font-size: 22px;
  line-height: 150%;
  text-align: center;
  letter-spacing: -0.02em;
  color: #262626;
}
.plate-card .plate-text-desc{

  font-style: normal;
  font-weight: 400;
  font-size: 18px;
  line-height: 150%;
  /* identical to box height, or 27px */
  text-align: center;
  letter-spacing: -0.02em;
  color: #262626;
}

.plate-card-container{
  display: flex;
  flex-direction: row;
  gap: 16px;

  overflow-x: auto;
  /* scrollbar-width: thin; */
  padding: 16px 0;
}






.imodal-body-select-pattern-btns{
  display: flex;
  gap: 16px;;
}
.imodal-body-select-pattern-btns button{
  flex:1 0 auto;
}

.label-plate-card{
  position: relative;
  cursor: pointer;
  min-width: 256px;
}
.label-plate-card input[type="radio"]{
  
  position: absolute;
  inset: 0;
  display: block;
  appearance: none;
  padding: 0;
  margin:0;
  cursor: pointer;
  pointer-events: none;
}
.label-plate-card input[type="radio"]:checked + .plate-card{
  border-color: #336699;
}

.imodal-body-select-pattern-btn-close{
  padding:0;
  margin:0;
  border-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 65px;

  /* gray/100 */
  background: #F5F5F5;
  border-radius: 8px;

  font-weight: 500;
  font-size: 22px;
  line-height: 150%;
  /* identical to box height, or 33px */
  text-align: center;
  letter-spacing: -0.02em;

  color: #525252;

  cursor: pointer;

}

.imodal-body-select-pattern-btn-select{
  padding:0;
  margin:0;
  border-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  height: 65px;

  /* gray/700 */
  background: #404040;
  border-radius: 8px;


  font-weight: 700;
  font-size: 22px;
  line-height: 150%;
  /* identical to box height, or 33px */
  text-align: center;
  letter-spacing: -0.02em;

  /* gray/50 */
  color: #FAFAFA !important;


  cursor: pointer;

}


.image-select-button .plate-text-wrap{
  padding: 0px 8px 5px 8px;
}
.plate-card .plate-text-en{
  font-size: 18px;
}
.plate-card .plate-text-desc{
  font-size: 16px;
}
.image-select-button input[type="radio"]:checked + .plate-card{
  border-width: 0px;
}











#image-select-button-upload{
  position: relative;
  overflow: hidden;
}
#image-select-button-upload input[type="file"]{
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}
.image-select-button-upload-preview{
  height: 100%;
  width: 100%;
}
.image-select-button-upload-preview canvas{
  height: 100%;
  width: 100%;
  object-fit: cover;
}

#image-select-button-pattern{
  position: relative;
}
#image-select-button-pattern > input[type="radio"]{
  position: absolute;
  appearance: none;
  inset: 0;
  pointer-events: none;
}










.loader {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: block;
  margin:15px auto;
  position: relative;
  color: #eb4343;
  box-sizing: border-box;
  animation: animloader 1s linear infinite alternate;
}

@keyframes animloader {
  0% {
    box-shadow: -38px -12px ,  -14px 0,  14px 0, 38px 0;
  }
  33% {
    box-shadow: -38px 0px, -14px -12px,  14px 0, 38px 0;
  }
  66% {
    box-shadow: -38px 0px , -14px 0, 14px -12px, 38px 0;
  }
  100% {
    box-shadow: -38px 0 , -14px 0, 14px 0 , 38px -12px;
  }
}



















.result-image-wrap{
  padding-top:32px;
}
.result-image-resize-wrap{
  width: 480px;
  height: 600px;
  background: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 16px;

  margin:0 auto;

  overflow: hidden;
}


.result-btns{
  margin-top: 40px;
  

  display: flex;
  flex-direction: column;
  gap: 20px;;
}


.result-btns-01{
  display: flex;
  gap: 20px;
}
.result-btn{
  flex:1 0 0;
  margin:0;padding:0;

  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 8px;

  height: 65px;

  font-weight: 700;
  font-size: 22px;
  line-height: 150%;
  text-align: center;
  letter-spacing: -0.02em;
  text-decoration: none;
  cursor: pointer;
}
.result-btn-retry{
  /* gray/100 */
  background: #F5F5F5;
  /* gray/300 */
  border: 1px solid #D4D4D4;
  border-radius: 8px;
  color: #525252;

}


.result-btn-download{

  /* gray/100 */
  background: #404040;
  /* gray/300 */
  /* border: 1px solid #D4D4D4; */
  border-width: 0;
  border-radius: 8px;

  color: #FAFAFA;
}

.result-btns-02{
  display: flex;
  gap: 20px;
}
.result-btn-share{
  flex:1 0 0;
  margin:0;padding:0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  height: 65px;

  /* gray/100 */
  background: var(--create-btn-background);

  /* gray/300 */
  /* border: 1px solid #D4D4D4; */
  border-radius: 8px;
  border-width: 0;

  
  font-weight: 700;
  font-size: 22px;
  line-height: 150%;
  text-align: center;
  letter-spacing: -0.02em;

  color: var(--create-btn-color);
  text-decoration: none;
  cursor: pointer;
}

.result-image-resize-wrap img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}











.hashtag-box{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 8px 8px 8px 24px;
  gap: 8px;

  width: 439px;
  height: 68px;
  background: #FAFAFA;  
  border: 1px solid #525252;
  border-radius: 10000px;

  margin:0 auto;

}

.hashtag-text{
  font-weight: 600;
  font-size: 22px;
  line-height: 140%;
  /* identical to box height, or 31px */
  text-align: center;
  letter-spacing: -0.02em;

  /* black */
  color: #121212;
}

.btn-hashtag{
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  
  width: 109px;
  height: 52px;

  background: #262626;
  border-radius: 1000px;

  border-width: 0;
  cursor: pointer;
  /* 복사하기 */

  font-family: 'SUIT Variable';
  font-style: normal;
  font-weight: 600;
  font-size: 20px;
  line-height: 140%;
  /* identical to box height, or 28px */
  text-align: center;
  letter-spacing: -0.02em;

  color: #FFFFFF;

}

.flow-share-btns{
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 480px;
  margin:0 auto;
}
.flow-share-btn-wrap{
  display: flex;
  flex-direction: column;

  gap: 12px;
}

.flow-share-btn{
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 16px 24px;
  gap: 10px;
  

  height: 65px;
  
  background: #FFFFFF;
  border: 1px solid #D4D4D4;
  border-radius: 8px;
  
  font-weight: 700;
  font-size: 22px;
  line-height: 150%;
  text-align: center;
  letter-spacing: -0.02em;
  color: #404040;

  cursor: pointer;

  text-decoration: none !important;
}
.flow-share-btn *{
  text-decoration: none !important;
  font-weight: 700;
  font-size: 22px;
  line-height: 150%;
  text-align: center;
  letter-spacing: -0.02em;
  color: #404040;
}
.flow-share-input{
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 12px 16px;
  gap: 8px;

  height: 56px;
  background: #FFFFFF;
  border: 1px solid #D0D4D9;
  border-radius: 8px;
}
.flow-share-input:disabled{
  display: none;
}

.btn-end-share , .btn-flow-next{
  margin:0;padding:0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  width: 100%;
  height: 65px;

  /* gray/100 */
  background: var(--create-btn-background);

  /* gray/300 */
  /* border: 1px solid #D4D4D4; */
  border-radius: 8px;
  border-width: 0;

  
  font-weight: 700;
  font-size: 22px;
  line-height: 150%;
  text-align: center;
  letter-spacing: -0.02em;

  color: var(--create-btn-color);
  text-decoration: none;
  cursor: pointer;
}






.flow-input-group{
  
  display: flex;
  flex-direction: column;
  gap: 0px;

}

.flow-input-label{
  font-weight: 600;
  font-size: 14px;
  line-height: 150%;
  letter-spacing: -0.6px;
  color: #121212;

  display: flex;
  align-items: center;
  gap: 4px;
  

}
.flow-input-label em{
  vertical-align: super;
  font-weight: 500;
  font-size: 13px;
  line-height: 120%;
  letter-spacing: -0.3px;
  color: #FD636B;
  /* font-style: normal; */
  margin-top:-0.5em;
}
.flow-input{

  padding: 12px 16px;

  width: 100%;
  height: 48px;

  background: #FFFFFF;
  border: 1px solid #0088FF;
  /* border: 1px solid #0088FF; */
  border-radius: 8px;

}
.flow-input:invalid{
  border: 1px solid #D0D4D9;
}
.flow-descarea{
  text-align: start;
  padding: 12px 16px;

  width: 100%;
  height: 48px;

  background: #FFFFFF;
  /* border: 1px solid #0088FF; */
  border: 1px solid #D0D4D9;
  border-radius: 8px;

  font-weight: 500;
  font-size: 16px;
  line-height: 150%;
  /* or 24px */
  letter-spacing: -0.5px;

  color: #778088;

  height: 144px;

  overflow: hidden;
}

.flow-descarea-content{
  height: 100%;
  overflow: hidden;
  overflow-y: auto;
}
.flow-checkbox-agreed{
  padding-top:26px;
  font-weight: 500;
  font-size: 16px;
  line-height: 150%;
  letter-spacing: -0.5px;

  color: #262626;

  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
}
.flow-checkbox-agreed input[type="checkbox"]{
  font-size:20px;
}
.flow-checkbox-agreed em{
  vertical-align: super;
  font-weight: 500;
  font-size: 13px;
  line-height: 120%;
  letter-spacing: -0.3px;
  color: #FD636B;
  font-style: normal;
  margin-top:-0.5em;
}
form[data-valid="false"] .btn-flow-next{
  background: #A1A1A1;
}









.pointer-event-scrollbar-x{
  user-select: none;
  scroll-behavior: auto;
}
.pointer-event-scrollbar-x img{
  -webkit-user-drag: none; /* 크롬, 사파리 */
  -webkit-user-select: none;
}