@font-face {
    font-family: 'Pretendard Variable';
    font-weight: 45 920;
    font-style: normal;
    font-display: swap;
    src: url('../font/PretendardVariable.woff2') format('woff2-variations');
}

@font-face {
    font-family: 'DungGeunMo';
    font-weight: 45 920;
    font-style: normal;
    font-display: swap;
    src: url('../font/DungGeunMo.woff2') format('woff2-variations');
}

@font-face {
    font-family: 'Jalnan';
    font-weight: normal;
    font-style: normal;
    src: url('../font/Jalnan.woff') format('woff');
}

.text-noto-sans-kr {
  font-family: "Noto Sans KR", sans-serif;
  font-optical-sizing: auto;
  font-weight: 900;
  font-style: normal;
}

/*---------------------------------------------------------------------*/

html,
body,
input,
select,
textarea,
a,
button {
    font-family: "Pretendard Variable", Pretendard, sans-serif;
}

.text-dgm {
    font-family: "DungGeunMo", "Pretendard Variable", Pretendard, sans-serif;
}

.text-jalnan {
    font-family: "Jalnan", "Pretendard Variable", Pretendard, sans-serif;
}

/*------ 스크롤 관련 css -----------------------------------------------------------*/

.scrollCustom_purple::-webkit-scrollbar {
    width: 10px;
}

.scrollCustom_purple::-webkit-scrollbar-thumb {
    background-color: #7b87f2;
    border-radius: 10px;
    background-clip: padding-box;
    cursor: pointer;
    border: 2px solid transparent;
}

.scrollCustom_purple::-webkit-scrollbar-track {
    background-color: #cccfe0;
    border-radius: 999px;
}

.input_placeholder::placeholder {
    line-height: 1.5; /* 라인 높이 조정 */
    position: relative;
    top: -7px;
    white-space: pre-line;
}


/*------ 클릭 이미지 css -----------------------------------------------------------*/
/* 키 프레임 정의: 투명도가 점차 감소하고, 완료 시점에 display를 none으로 설정 */
@keyframes fadeOutAndHide {
    0% {
        opacity: 1;
    }
    99% {
        opacity: 0;
        visibility: visible;  /* 애니메이션이 진행되는 동안은 visible 상태 유지 */
    }
    100% {
        opacity: 0;
        visibility: hidden; /* 최종적으로 보이지 않도록 설정 */
        display: none;      /* 레이아웃에서도 제거 */
    }
}

/* 애니메이션 적용 클래스 */
.fade-out-and-hide {
    animation: fadeOutAndHide 0.3s forwards; /* 애니메이션 완료 후 상태 유지 */
}

/*배경이미지 격자무늬*/
.mainWrap01,
.mainWrap02{
    background:
            linear-gradient(to bottom, transparent 27px, #ffffff7d 24px) 0 0 / 100vw 28px repeat-y,
            linear-gradient(to right, transparent 27px, #ffffff7d 24px) 0 0 / 28px 100vh repeat-x
            white
}

.text-border-white {
  text-shadow:
    -1px -1px 0 white,
     1px -1px 0 white,
    -1px  1px 0 white,
     1px  1px 0 white; /* 테두리 색상과 너비 */
}

@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

.blink {
    animation: blink 1.3s ease-in-out infinite;
}

@keyframes blick_color {
    0%, 100% { background-color:#ec4899; }
    50% { background-color:#db2777; }
}

.blink_bg {
    animation: blick_color 1.3s ease-in-out infinite;
}

@keyframes blink2 {
    0%, 100% { background: #ffb4e2; }
    50% { background: transparent; }
}

.blink2 {
    animation: blink2 1s ease-in-out infinite;
}

@keyframes border-blink {
    0%, 100% { border: 2px solid white; }
    50% { border: 2px solid transparent; }
}

.border-blink {
    animation: border-blink 2s ease-in-out infinite;
}

.img-rotate {
  animation: rotateImage 2s infinite linear;
}

@keyframes rotateImage {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(-3deg);
  }
}


.triangle {
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 20px solid white; /* 삼각형의 색과 크기 조절 */
}

.speech-bubble-right {
	position: relative;
	background: #00aabb;
	border-radius: .4em;
}

.speech-bubble-right:after {
	content: '';
	position: absolute;
	right: 0;
	top: 50%;
	width: 0;
	height: 0;
	border: 15px solid transparent;
	border-left-color: #00aabb;
	border-right: 0;
	border-bottom: 0;
	margin-top: -5px;
	margin-right: -15px;
}

.balloon {
        position: relative;
        display: inline-block;
    }

.balloon:after {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
}

.balloon.right:after {
    border-width: 10px 15px;
    top: 50%;
    margin-top: -10px;
}

.balloon.right:after {
    border-color: transparent transparent transparent #cfe7f8;
    right: -25px;
}

.starIcon {
  animation: starIconSize 2s infinite linear;
}

@keyframes starIconSize {
  0%,100% {
    width: 1.5rem;
    height: 1.5rem;
  }
  50% {
    width:1rem;
    height:1rem;
  }
}