@tailwind base;
@tailwind components;
@tailwind utilities;

@font-face {
  font-family: 'JalnanGothic';
  src: url('~/static/fonts/JalnanGothicTTF.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
*, html {
  font-family: 'Pretendard', 'JalnanGothic', 'sans-serif'; 
  box-sizing: border-box;
  scrollbar-width: none;
}
em{
  @apply not-italic;
}
.text-truncate{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.text-truncate2{
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important; 
  -webkit-box-orient: vertical !important;
}
.text-truncate3{
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important; 
  -webkit-box-orient: vertical !important;
}

/* 최대 사이즈 */
body{
  @apply w-full h-full bg-[#fff];
}
.container{
  @apply max-w-full;
}
.wrap{
  @apply !max-w-[674px] m-[0_auto] bg-[#fff];
}
.offcanvas-overlay, .chatModal, .chatVoiceAnimation, .navigationBar, .chatNavigationBar, .chatTimeOutWarning, .modal-overlay, .introHeader, .callingHeader, .chatInput, .kakaoHeader, .messagesHeader {
  @apply max-w-[674px] m-[0_auto];
}

/* 폰트사이즈 */
.zoom-13 { zoom: 1.3; }
.zoom-12 { zoom: 1.2; }
.zoom-11 { zoom: 1.1; }
.zoom-09 { zoom: 0.9; }
.zoom-08 { zoom: 0.8; }
.zoom-07 { zoom: 0.7; }

/* 인트로 로딩 */
.introLoading{
  @apply absolute top-0 left-0 w-full h-[100dvh] z-[9999] bg-[url(~/assets/img/intro/intro-bg01.png)] bg-center bg-cover bg-no-repeat overflow-hidden;
  transition: height 0.6s ease;
}
.introLoading::before {
  content: '';
  @apply absolute top-0 left-0 w-full h-full z-0;
  backdrop-filter: blur(4px);
  background-color: rgba(0, 0, 0, 0.3);
  opacity: 1;
  transition: opacity 0.6s ease;
}
.introLoading.loadingAni::before {
  opacity: 0;
}
.introLoading.loadingAni{
  @apply h-[calc(100dvh-185px)];
}
.introLoading svg{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(1.5);
  transition: transform 0.6s ease, top 0.6s ease, left 0.6s ease;
}
.introLoading.loadingAni svg{
  top: 20px;
  left: 16px; 
  transform: translate(0, 0) scale(1);
}

/* swiper css */
.swiper-pagination-bullet{
  @apply bg-[#fff] opacity-100;
}
.swiper-pagination-bullet-active{
  @apply bg-[#8539FF];
}

/* 사례 카테고리 css */
.cat{
  @apply absolute top-0 right-0 w-[82px] h-[24px] p-[5px_0px] rounded-[0px_16px] text-[#fff] text-[12px] font-extrabold leading-[14px] text-center z-[9];
}
.cat01{
  @apply bg-[#FF87AD];
}
.cat02{
  @apply bg-[#7139FF];
}
.cat03{
  @apply bg-[#FF9539];
}
.cat04{
  @apply bg-[#1DC8B6];
}
.cat05{
  @apply bg-[#E587FF];
}
.cat06{
  @apply bg-[#5996FF];
}
.cat07{
  @apply bg-[#FFC831];
}
.cat08{
  @apply bg-[#30CD42];
}
.cat09{
  @apply bg-[#AF76FF];
}
.cat10{
  @apply bg-[#FF667A];
}
.cat11{
  @apply bg-[#ECB602];
}

/* 메인 아코디언 효과 */
.ex-detail {
  overflow: hidden;
  transition: max-height 0.3s ease;
}
.more svg {
  transition: transform 0.3s ease;
}
.more svg.rotated {
  transform: rotate(180deg);
}

/* 애니메이션 커스텀 */
.animate__customBounceInUp {
  animation-name: customBounceInUp;
  animation-duration: 0.8s; /* 애니메이션 속도 */
  animation-fill-mode: both;
}
@keyframes customBounceInUp {
  from, 40%, 55%, 70%, to {
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }
  from {
    opacity: 0;
    transform: translate3d(0, 100px, 0);
  }
  40% {
    opacity: 1;
    transform: translate3d(0, -3px, 0);
  }
  55% {
    transform: translate3d(0, 3px, 0);
  }
  70% {
    transform: translate3d(0, -3px, 0);
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}
.animate__delay-01s{
  animation-delay: 0.1s
}
.animate__delay-02s{
  animation-delay: 0.2s
}
.animate__delay-03s{
  animation-delay: 0.3s
}
.animate__delay-04s{
  animation-delay: 0.4s
}
.animate__delay-26{
  animation-delay: 2.6s
}
.animate__delay-27{
  animation-delay: 2.7s
}
.animate__delay-33{
  animation-delay: 3.3s
}

/* 채팅화면 음성 애니메이션 */
.wave {
  position: absolute;
  background: rgba(160, 153, 255, 0.5);
  border-radius: 100%;
  /* filter: blur(1px); */
  z-index: 99;
}

.wave1 {
  width: 210px;
  height: 210px;
  top: -15px;
  left: -15px;
  animation: wobble1 0.7s infinite ease-in-out;
}

.wave2 {
  width: 170px;
  height: 230px;
  top: -20px;
  left: 0px;
  rotate: 150deg;
  animation: wobble2 0.9s infinite ease-in-out;
}

.wave3 {
  width: 170px;
  height: 230px;
  top: -20px;
  left: 10px;
  rotate: 50deg;
  animation: wobble3 1.1s infinite ease-in-out;
}

.wave4 {
  width: 170px;
  height: 210px;
  top: -20px;
  left: 0px;
  animation: wobble4 1.3s infinite ease-in-out;
}

@keyframes wobble1 {
  0% {
    transform: scale(1) rotate(0deg);
    border-radius: 50%;
  }

  50% {
    transform: scale(1.05) rotate(1deg);
    border-radius: 47% 53% 50% 50% / 50% 50% 53% 47%;
  }

  100% {
    transform: scale(1) rotate(0deg);
    border-radius: 50%;
  }
}

@keyframes wobble2 {
  0% {
    transform: scale(1) rotate(0deg);
    border-radius: 50%;
  }

  50% {
    transform: scale(1.03) rotate(-1deg);
    border-radius: 50% 52% 48% 50% / 49% 50% 51% 50%;
  }

  100% {
    transform: scale(1) rotate(0deg);
    border-radius: 50%;
  }
}

@keyframes wobble3 {
  0% {
    transform: scale(1) rotate(0deg);
    border-radius: 50%;
  }

  50% {
    transform: scale(1.04) rotate(1.5deg);
    border-radius: 49% 51% 53% 47% / 48% 52% 50% 50%;
  }

  100% {
    transform: scale(1) rotate(0deg);
    border-radius: 50%;
  }
}

@keyframes wobble4 {
  0% {
    transform: scale(1) rotate(0deg);
    border-radius: 50%;
  }

  50% {
    transform: scale(1.06) rotate(-2deg);
    border-radius: 48% 52% 46% 54% / 52% 48% 54% 46%;
  }

  100% {
    transform: scale(1) rotate(0deg);
    border-radius: 50%;
  }
}

/* UI 버튼 모음 */
.showButton{
  @apply fixed right-[20px] top-[70px] flex flex-col gap-[10px];
}
.showButton button{
  @apply w-[30px] py-[10px] text-[12px] font-normal rounded-full bg-[#67CE67] text-[#fff];
}

/* 데이터 css */
/* (결과화면) */
/* 시나리오별 배경이미지  */
.endPageContent__top.s001{
  @apply bg-[url(https://img.thinkpool.com/hama/img/end/end-bg01.png)];
}
.endPageContent__top.s002{
  @apply bg-[url(https://img.thinkpool.com/hama/img/end/end-bg02.png)];
}
.endPageContent__top.s003{
  @apply bg-[url(https://img.thinkpool.com/hama/img/end/end-bg03.png)];
}
.endPageContent__top.s004{
  @apply bg-[url(https://img.thinkpool.com/hama/img/end/end-bg04.png)];
}
.endPageContent__top.s005{
  @apply bg-[url(https://img.thinkpool.com/hama/img/end/end-bg05.png)];
}
.endPageContent__top.s006{
  @apply bg-[url(https://img.thinkpool.com/hama/img/end/end-bg06.png)];
}
.endPageContent__top.s007{
  @apply bg-[url(https://img.thinkpool.com/hama/img/end/end-bg07.png)];
}
.endPageContent__top.s008{
  @apply bg-[url(https://img.thinkpool.com/hama/img/end/end-bg08.png)];
}
.endPageContent__top.s009{
  @apply bg-[url(https://img.thinkpool.com/hama/img/end/end-bg09.png)];
}
.endPageContent__top.s010{
  @apply bg-[url(https://img.thinkpool.com/hama/img/end/end-bg10.png)];
}
.endPageContent__top.s011{
  @apply bg-[url(https://img.thinkpool.com/hama/img/end/end-bg11.png)];
}
.endPageContent__top.s012{
  @apply bg-[url(https://img.thinkpool.com/hama/img/end/end-bg12.png)];
}
.endPageContent__top.s013{
  @apply bg-[url(https://img.thinkpool.com/hama/img/end/end-bg13.png)];
}
.endPageContent__top.s014{
  @apply bg-[url(https://img.thinkpool.com/hama/img/end/end-bg14.png)];
}
.endPageContent__top.s015{
  @apply bg-[url(https://img.thinkpool.com/hama/img/end/end-bg15.png)];
}
.endPageContent__top.s016{
  @apply bg-[url(https://img.thinkpool.com/hama/img/end/end-bg16.png)];
}
.endPageContent__bottom .card-group .card .txtBox p{
  @apply w-full pl-[20px] relative font-medium text-[14px] leading-[17px] text-[#6B6D95] before:content-[''] before:absolute before:left-[7px] before:top-[7px] before:w-[3px] before:h-[3px] before:bg-[#6B6D95] before:rounded-full;
}
.endPageContent__bottom .top .box .title{
  @apply w-full flex justify-center items-center gap-[8px];
}
.endPageContent__bottom .top .box .title p{
  @apply font-[JalnanGothic] font-normal text-[18px] leading-[21px] text-[#fff];
}
.endPageContent__bottom .top .box .title span{
  @apply font-semibold text-[16px] leading-[19px] text-[#fff];
}
/* (채팅화면) */
.callingContent__chat .aiChat p button, .messagesContent__chat .aiChat p button, .kakaoContent__chat .aiChat p button, .callingContent__chat .aiChat p a, .messagesContent__chat .aiChat p a, .kakaoContent__chat .aiChat p a{
  @apply text-[#2687F5] underline text-left;
}

/* vDataContent */
.vDataContent{
  @apply min-h-[calc(100dvh-59px)] flex flex-col justify-center items-center;
}