@charset "utf-8";
:root { /* 트랜지션 */
	--transition: 0.15s ease-in;
	--q_trans: 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; /*큐빅*/


	--yellow: #ffffa3;
	--dark_yellow: #ffe30d;
	--purple: #960cff;
	--green: #17bd20;
	--lime:#a1e521;
	--white: #ffffff;
	--black: #181718;
    --red:#d91d1d;


	--light_point_hover: rgba(179,226,226,0.7);
	--brt_point: #659BFF4d;
	--border_white: var(--gray_f);
	--border_g: 1px solid #eeeeee;
	--opywhite: 1px solid rgba(255,255,255,	.15);
	--opyblack: 1px solid rgba(0,0,0,0.15);


	--gradientR: linear-gradient(to right,var(--point) 15%, var(--darker_point) 130%);
	--gradientRB: linear-gradient(to right bottom,var(--light_point),var(--point),var(--dark_point));


}

/*라인*/
hr {/*display:none;*/ width: 100%; height: 1px; background-color: rgba(212, 223, 236, 0.719); border : 0; margin-left : auto; margin-right : auto; padding: 0; margin-block-start: 0; margin-block-end: 0;}
.line{ width: 100%; height: 1pt; background-color: #bbbbbb; display: block; content: ""}

.pointer{
	cursor: pointer;
}

/*색상*/
.bg_red { background-color: var(--red); }
.bg_yellow { background-color: var(--yellow); }
.bg_dark_yellow { background-color: var(--dark_yellow); }
.bg_black { background-color: var(--black); }
.bg_none { background: none !important; }
.bg_lime { background-color: var(--lime); }



/*폰트색상*/
.fc_navy { color: #2E2F5D; }
.fc_red { color: #ff6363;}
.fc_lime { color: var(--lime); }
.fc_yellow { color: var(--yellow) !important; }
.fc_dark_yellow { color: var(--dark_yellow) !important; }


/* 그라데이션배경 */
.sky{background: linear-gradient(135deg, var(--sub_light) 30%, var(--point_lighter));}

.bg_grd_point { background-image: linear-gradient(140deg,var(--gray_f) -8%,var(--point) 100%); }
.bg_grdR { background-image: var(--gradientR); }
.bg_grdRB { background-image: var(--gradientRB); }

.night_grd{background: linear-gradient(to bottom, var(--dark_point), var(--point));}
.orange_grd{background: linear-gradient(70deg, #ff4e50, #ff5858, #f89b29);}
.green_grd{background: linear-gradient( 90deg, rgb(9, 255, 234) 0%, #ccff00 90%);}
.mint_grd{background: linear-gradient(to bottom, hsla(138, 82%, 69%, 1)-1%, hsla(186, 100%, 50%, 1) 101%);}
.purple_grd{background: linear-gradient(90deg, hsla(307, 93%, 84%, 1) -1%, hsla(256, 96%, 44%, 1) 101%);}
.pb_grd{background: linear-gradient(297deg, #a115e7, var(--point) 101%);}
.pink_grd{background:  linear-gradient(90deg, hsla(335, 91%, 70%, 1) -1%, hsla(49, 89%, 61%, 1) 101%); }
.rainbow{background-image: linear-gradient( 109.6deg,  rgba(254,253,205,1) 11.2%, rgba(163,230,255,1) 91.1% ); }
.chick{background-image: radial-gradient( circle 314px at 95.1% 37.9%,  rgba(255,246,78,1) 1.4%, rgba(242,252,186,1) 100.7% );}
.blpink{background-image: linear-gradient( 114.2deg, rgba(252,251,224,1), rgba(245,212,212,1) 8.5%, rgba(255,180,239,1));}
.seassak{background-image: linear-gradient( 135deg,  rgba(252,255,222,1) 2.2%, #b6f1ab 99.3% );}
.sprout{background-image: linear-gradient(to bottom, #fcff99 30%, #c5ff08 120%);}
.baby{background-image: linear-gradient(180deg, #fff56a 11.5%,#ffb64f 91% );}
.puresky{background-color: #f8fafd; border: 1px solid #e9eff5;}
/*폰트 그라디언트 색상 -webkit-text-stroke: 1px rgba(255, 255, 255, 0.8);background-image: linear-gradient(to top, #c7ffd3 0%, #fbfff2 100%);*/
.fc_grd{background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
.black50{background-color: #00000080;}

/* 텍스트 마커 var(--lighter_point);*/
.marker { background-image: linear-gradient(0deg, transparent 0.07em, #6994ff 0.07em, #6994ff 0.275em, transparent 0.275em);}
/* --- 기존 코드 유지 및 부족한 클래스 보완 --- */

/* 배경 및 기타 유틸리티 (철학 섹션 박스 구성용) */
.row_reverse { flex-direction: row-reverse; }

.italic{ font-style: italic;}

/*폰트두께*/
.thin { font-weight: 100}
.light { font-weight: 200}
.extralight { font-weight: 300}
.regular { font-weight: 400}
.medium { font-weight: 500}
.semibold { font-weight: 600}
.bold { font-weight: 700}
.extrabold { font-weight: 800}
.black { font-weight: 900}



/* 중앙 정렬 및 여백
.ml_auto { margin-left: auto !important; }
.mr_auto { margin-right: auto !important; }
.m_auto { margin: auto !important; }
.mx_auto{margin-left: auto!important; margin-right:auto!important;}*/

/* ==================== 모바일 레이아웃 ==================== */
@media ( max-width: 1380px ) { body,html { font-size:  15px; }
	:root {
		/* 패딩,마진 */
		--sec_pd: 6rem;
		/* 폰트 */
		--base-font-size: 15px !important; }
}
@media ( max-width: 900px ) { body,html { font-size:  13px; }
	:root {
		/* 폰트 */
		--base-font-size: 13px !important;
		--base-px: 2px; }
}
@media ( max-width: 600px ) { body,html { font-size:  11px; }
	:root {
	}
}

/* ==================== 효과 ==================== */
@keyframes MyScale {
	from {
		transform:  scale(1.2) translateY(-100 px);
		opacity:  0;
	}

	to {
		transform:  scale(1) translateY(0 px);
		opacity:  1;
	}
}

@keyframes MyScale2 {
	0%, 30% {
		transform:  scale(0);
		opacity:  0;
	}

	100% {
		transform:  scale(1);
		opacity:  1;
	}
}

@keyframes toLeft {
	0%, 30% {
		transform:  scale(0);
		transform-origin:  bottom right;
		opacity:  0;
	}

	100% {
		transform:  scale(1);
		transform-origin:  bottom right;
		opacity:  1;
	}
}

@keyframes toTop {
	0%, 30% {
		transform:  scale(0);
		transform-origin:  bottom bottom;
		opacity:  0;
	}

	100% {
		transform:  scale(1);
		transform-origin:  bottom bottom;
		opacity:  1;
	}
}

@keyframes toRight {
	0%, 30% {
		transform:  scale(0);
		transform-origin:  bottom left;
		opacity:  0;
	}

	100% {
		transform:  scale(1);
		transform-origin:  bottom left;
		opacity:  1;
	}
}

@keyframes opacity {
	0% {
		opacity:  0.5;
	}

	100% {
		opacity:  1;
	}
}

@keyframes zoom {
	2.5%, 7.5%, 12.5%, 17.5%, 100% {
		transform:  scale(1);
	}

	5%, 10%, 15% {
		transform:  scale(0.9);
	}
}

@keyframes float {
	0% {
		transform:  scale(1);
	}

	50% {
		transform:  scale(0.92);
	}

	100% {
		transform:  scale(1);
	}
}

@keyframes blink {
	0% {
		opacity:  0.9;
	}

	50% {
		opacity:  1;
		transform:  scale(1.05)
	}

	100% {
		opacity:  0.9;
	}
}

.blinking-text {
	animation:  blink 2 s infinite;
	/* 1초 간격으로 무한 반복 */
}

.wobble {
	animation:  wobble 2 s ease infinite;
}

@keyframes wobble {
	0% {
		transform:  translateX(0% );
	}

	15% {
		transform:  translateX(-25% ) rotate(-5 deg);
	}

	30% {
		transform:  translateX(20% ) rotate(3 deg);
	}

	45% {
		transform:  translateX(-15% ) rotate(-3 deg);
	}

	60% {
		transform:  translateX(10% ) rotate(2 deg);
	}

	75% {
		transform:  translateX(-5% ) rotate(-1 deg);
	}

	100% {
		transform:  translateX(0% );
	}
}
/* 바운스 애니메이션 */
@keyframes bounce {
    0%, 100% {
        transform: translateX(-50%) translateY(0);
    }

    50% {
        transform: translateX(-50%) translateY(-10px);
    }
}

.bounce {
    animation: bounce 1.5s infinite;
}

/* ==================== oneWaySend ==================== */
.result_page {
    text-align: center;
    position: absolute;
    width: 100%;
    height: inherit;
}

    .result_page .innerwrap {
        width: 100%;
        position: absolute;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%,-50%);
        -moz-transform: translate(-50%,-50%);
        -ms-transform: translate(-50%,-50%);
        -o-transform: translate(-50%,-50%);
        transform: translate(-50%,-50%);
    }

    .result_page img {
        width: 110px;
    }

    .result_page strong {
        display: inline-block;
        font-size: 1.4em;
        margin-top: 1.5rem;
    }

    .result_page a {
        background-color: rgba(0,0,0,0.8);
        color: var(--gray_f);
        padding: 0.7rem 2rem;
        border-radius: 500px;
        margin-top: 2.5rem !important;
    }

@media only screen and (min-width: 376px) and (max-width: 850px) {
    .result_page img {
        width: 85px;
    }

    .result_page strong {
        display: inline-block;
        font-size: 1.4em;
        margin-top: 1.2rem;
    }

    .result_page a {
        margin-top: 2rem !important;
    }
}