/* ===================================== 로고 ================================== */
/*logo.css_ start*/

.logo {
	color: rgb(253, 253, 253); /*글씨색상*/
	width: 250px;
	min-width: 230px;
	height: 40px;
	padding: 0px;
	border: 0px solid rgb(255, 2, 2); /*------------------------------------------------------------------------------------------------------------------------*/
	background-color: transparent; /*투명색*/
	/* opacity: 100; */
	border-radius: 0px;
	/*line-height: 45px;*/
	font-weight: bold;
	margin-top: 0;
}

.logobox {
	float: left;
	/*margin: auto;*/
	position: relative;
	width: 43px;
	height: 40px;
	padding: 0.2px;
	/*background-color: transparent;*/ /*투명색*/
	background-color: #464646;
	box-shadow: 0 5px 30px 0 rgba(0, 0, 0, 1);
	/* opacity: 100; */
	border: 0px solid rgb(255, 2, 2); /*------------------------------------------------------------------------------------------------------------------------*/
	border-radius: 5px;
	margin-right: 15px;
}

.logo h1 {
	width: 100%;
	height: 100%;
	font-size: 32px;
	margin-bottom: -12px;
	color: #464646;
}

.logo a {
	position: relative;
	z-index: 10;
}

	.logo a:hover {
		color: black; /*글씨색상*/
	}

.logo::after {
	content: '';
	display: block;
	/*width: 250x;*/
	height: 40px;
	padding: 00.2px;
	border: 0px solid rgb(228, 16, 16); /*------------------------------------------------------------------------------------------------------------------------*/
	border-radius: 15px;
	background-color: transparent;
	opacity: 100;
}

.rectangle {
	--t: 10px; /* Thickness */
	--c: yellow; /* Color */

	position: absolute;
	margin-top: 4px;
	left: 15px;
	width: 100px;
	height: 100px;
	display: inline-block;
	border: var(--t) solid transparent;
	border-color: var(--c);
}

.circle {
	--t: 10px; /* Thickness */
	--c: rgb(135, 221, 135); /* Color */

	position: absolute;
	margin-top: 20px;
	left: 7px;
	width: 100px;
	height: 100px;
	display: inline-block;
	border: var(--t) solid transparent;
	border-color: var(--c);
	border-radius: 100px;
}

.triangle {
	--t: 10px; /* Thickness */
	--c: red; /* Color */

	position: absolute;
	margin-top: 20px;
	left: 22px;
	width: 100px;
	height: 100px;
	display: inline-block;
	border: var(--t) solid transparent;
	border-bottom-color: var(--c);
	background:
	/* Left side */ linear-gradient( to bottom left, transparent 49.5%, var(--c) 50% calc(50% + var(--t)), transparent calc(50% + var(--t) + 1px) ) right,
	/* right side */
	linear-gradient( to bottom right, transparent 49.5%, var(--c) 50% calc(50% + var(--t)), transparent calc(50% + var(--t) + 1px) ) left;
	background-size: 50% 100%;
	background-origin: border-box;
	background-repeat: no-repeat;
}

/* 기본 애니메이션 스타일 (변경: top -> transform, 부드러운 easing) */
.animated span {
	/* inline-block 유지하되 레이아웃에 영향 안주도록 transform 사용 */
	display: inline-block;
	/* 시작 위치(0으로 유지) */
	transform: translateY(0);
	-webkit-transform: translateY(0);
	/* 렌더링 힌트 */
	will-change: transform;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	/* 애니메이션: 이름, 길이, 타이밍함수, 반복, 방향 */
	animation: float 0.7s cubic-bezier(.4,.9,.36,1) infinite alternate;
	/* 텍스트 그림자 제거로 성능 향상 (원하면 복원) */
	text-shadow: none;
}

/* 로그인한 상태에서는 애니메이션을 제거 */
.no-animation span {
	/* transform 초기화 */
	transform: none !important;
	-webkit-transform: none !important;
	display: inline;
	animation: none !important;
	text-shadow: none;
}

/* 애니메이션 딜레이 (이전과 동일하게 스테거) */
.animated span:nth-child(2) {animation-delay: 0.1s;}
.animated span:nth-child(3) {animation-delay: 0.2s;}
.animated span:nth-child(4) {animation-delay: 0.3s;}
.animated span:nth-child(5) {animation-delay: 0.4s;}
.animated span:nth-child(6) {animation-delay: 0.5s;}
.animated span:nth-child(7) {animation-delay: 0.6s;}
.animated span:nth-child(8) {animation-delay: 0.7s;}


/* transform 기반 부드러운 애니메이션 */
@keyframes float {
	0% {transform: translateY(0);-webkit-transform: translateY(0);}
	100% {transform: translateY(-12px);-webkit-transform: translateY(-12px);}
}

	/*logo.css_ end*/