/* *****************************************************************
 * filename : contents.css
 * description : 콘텐츠 CSS
 * date : 2026-04-06
***************************************************************** */


/* **************************** 헤더 **************************** */

.header {
	width:100%;
	position:fixed;
	top:0;
	left:0;
	display:flex;
	justify-content:flex-end;
	align-items:center;
	z-index:99;
	height:100px;
	padding:0 var(--space-5);
	mix-blend-mode :difference;
	
}

.header .logo {
	position:absolute;
	top:var(--space-4);
	left:var(--space-4);
	isolation: isolate;
}

.header .logo img {
	width:clamp(50px, 5.21vw, 100px);
}


.header ul {
	gap:var(--space-5-1);
}
.header ul li {
	font-family: "Anton", sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size:var(--fs-lg);
}

.header ul li a{
	color:var(--color-w);
}

.header ul li.maintenance {
	font-size:var(--fs-xs);
	border:0.15em solid var(--color-w);
	border-radius:var(--radius-xl);
	transition:all 0.2s linear;
}

.header ul li.maintenance a {
	padding: clamp(4px, 0.83vw, 12px) var(--space-3);
}

.header ul li.maintenance:hover {
	background-color:var(--color-main);
	border:0.15em solid var(--color-main);
}
.header ul li.maintenance:hover a {
	color:var(--color-b);
}


/* **************************** 푸터 **************************** */

.footer {
	background-color: var(--color-main);
    color: var(--color-b);
    padding: var(--space-5) var(--space-6);
    gap: var(--gap-5-1);
    /* ⭐ fixed처럼 화면 하단에 고정 */
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 1; /* section(z-index:2) 보다 낮게 */
	transform: translateZ(0);
	will-change: transform;
	backface-visibility: hidden;
	contain: paint;
}

.footer .top {
	grid-template-columns:1fr 0.5fr;
}
.footer .top .left h4 {
	font-size:var(--fs-lg);
	margin-bottom:var(--space-4);
	line-height:1.0;
}

.footer .top .left > div {
	margin-bottom:var(--space-1);
	gap:var(--gap-3);
}

.footer .top .left > div:last-child {
	margin-bottom:0;
}

.footer .top .left p {
	font-size:var(--fs-sm);
	line-height:1.0;
	margin-bottom:var(--space-1);
}

.footer .top .left p span {
	margin-right:var(--space-1);
}

.footer .right ul {
	gap:var(--gap-5);
}

.footer .right ul li a {
	line-height:1.0;
	color:var(--color-b);
	font-size:var(--fs-lg);
}

.footer .right .btn {
	border:0.15em solid var(--color-b);
	border-radius:var(--radius-md);
	transition: color 0.3s ease-in-out;
}

.footer .right .btn:hover {
	background-color:var(--color-b);
}

.footer .right .btn a {
	padding:var(--space-2) var(--space-3);
	font-size:var(--fs-sm);
	color:var(--color-b);
	transition: color 0.3s ease-in-out;
	gap:var(--gap-1);
}

.footer .right .btn:hover a {
	color:var(--color-w);
}

.footer .right .btn a .svg {
	width:var(--width-5);
	height:auto;
}

.footer .right .btn a .path {
	fill:var(--color-b);
	transition: fill 0.3s ease-in-out;
}

.footer .right .btn:hover .path {
	fill:var(--color-w);
}

.footer > span {
	height:0.1em;
	background-color:var(--color-b);
}

.footer .bottom p {
	font-size:var(--fs-2);
	margin-bottom:var(--space-4);
}


/* **************************** 모바일 메뉴 공통 **************************** */
 
.mo-menu {
    display: none;
    flex-direction: column;
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

.mo-menu.is-open {
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
}







/* 태블릿 */
@media all and (max-width: 1024px) {

	.header .logo {
		position: absolute;
		top: 50%;
		left: var(--space-4);
		transform:translateY(-50%);
	}
	
	.header ul {
		gap:var(--space-7-1);
	}
	
	.footer .top .left p {
		font-size: var(--fs-xs);
	}

}



/* 모바일 */
@media all and (max-width: 768px) {
 
 
	.mo-menu {
        display: flex;
    }
	
	.mo-menu.is-open {
		opacity: 1;
		pointer-events: auto;
		visibility: visible;
	}
	 
	.header {
		height: 80px;
	}
	
	.header ul {
		display:none;
	}

	.header .mo-menu-open {
		font-size:var(--fs-xl);
	}
	
	.mo-menu {
		z-index: 1001;
		position: fixed;
		inset: 0;
		width:100%;
		height:100%;
		background-color:var(--color-w);
	}
	
	.mo-menu .top {
		width:100%;
		padding:var(--space-4) var(--space-5) var(--space-4) var(--space-4);
	}
	
	.mo-menu .top button  {
		color:var(--color-b);
		font-size:var(--fs-xl);
	}
	
	.mo-menu .top .logo img {
		width:clamp(50px, 5.21vw, 100px);
	}
		
	.mo-menu .content a,
	.mo-menu .bottom a {
		color:var(--color-b);
	}
	
	.mo-menu .content  {
		top:48%;
		left:50%;
		transform:translate(-50%,-50%);
	}
	
	.mo-menu .content ul {
		gap:var(--gap-1);
	}
	
	.mo-menu .content ul li a {
		font-size:var(--fs-xxxl);
		padding-top:var(--space-1-1);
	}
 
	.mo-menu .bottom {
		bottom:0;
		width:100%;
		grid-template-columns:1fr 1fr;
		padding:var(--space-2) var(--space-4) var(--space-5);
		gap:var(--gap-2);
	}
	
	.mo-menu .bottom a {
		width:100%;
		padding:var(--space-3) var(--space-4);
		border:0.1em solid var(--color-b);
		font-size:var(--fs-lg);
		border-radius: var(--radius-md);
	}
 
	.footer {
		background-color: var(--color-main);
		color: var(--color-b);
		padding: var(--space-7) var(--space-5)var(--space-7);
		gap: var(--gap-6);
	}
 
	.footer .top {
		grid-template-columns: 1fr;
		gap: var(--gap-7);
	}
	
	.footer .top .left {
		order:2;
	}
	
	.footer .top .left h4 {
		font-size: var(--fs-sm);
		margin-bottom: var(--space-4);
		line-height: 1.0;
	}
	
	.footer .top .left p span {
		display:block;
	}
	
	.footer .top .left > div {
		margin-bottom: var(--space-4);
	}
	
	.footer .top .left > div:nth-child(3), .footer .top .left > div:nth-child(4) {
		display:grid;
		grid-template-columns: 1fr 1fr;
		gap: var(--gap-4);
	}
	
	.footer .top .left p {
		line-height: 1.2;
		color:var(--color-b) !important;
    }
	
	.footer .top .right {
		order:1;
		place-items: flex-start;
	}
	
	.footer .right ul {
		gap: var(--gap-6);
	}
	
	.footer .right ul li a {
		font-size: var(--fs-xl);
	}
	
	.footer .right .btn {
		display:none;
	}
	 
	 .footer .bottom p {
		font-size: var(--fs-xs);
	}
 
 
 
 
 
 }