@charset "utf-8";
/* ******************** 푸터 — TypeD-1 (시안 기준 : 전체 폭 블루) ******************** */

footer { position: relative; background: #fafcff; border-top: 5px solid var(--c_base1); color: #555; }
footer a { color: inherit; }
footer strong { color: #111 !important; letter-spacing: -0.03em; }

/* 로고 + 정보 */
footer .f-info { display: flex; align-items: flex-start; gap: 20px; }
footer .f-logo { flex: 0 0 auto; display: block; width: 54px; margin-top: 2px; }
footer .f-logo img { display: block; width: 100%; }
footer .f-txt { min-width: 0; }
footer .f-txt strong { display: block; font-size: var(--fs18); font-weight: 800; }
footer .f-txt .f-eng { display: block; margin-top: 3px; font-size: var(--fs13); letter-spacing: .02em; color: #7d8899; text-transform: uppercase; }

footer .f-info address { margin-top: 14px; font-size: var(--fs14); line-height: 1.85; }
footer .f-info address .addr { display: block; }
footer .f-info address .line { display: block; margin-top: 2px; }
footer .f-info address .line span + span { margin-left: 24px; }
footer .f-info address .line b { font-weight: 800; color: #222; }
footer .f-info address .line a:hover { text-decoration: underline !important; }
footer .f-info address .copy { display: block; margin-top: 12px; font-size: var(--fs13); color: #8b95a5; }
footer .f-info address .copy a { font-weight: 600; color: #6b7688; }

footer .f-util { display: flex; align-items: center; gap: 26px; }

/* FAMILY SITE */
footer .family select {
	appearance: none; -webkit-appearance: none;
	width: 200px; height: 44px; padding: 0 40px 0 16px;
	border: 1px solid #d3dbe6; border-radius: 6px;
	background: #fff url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23555555'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E") no-repeat right 10px center;
	background-size: 20px;
	color: #333; font-size: var(--fs14); cursor: pointer; transition: var(--ani);
}
footer .family select:hover { border-color: var(--c_base1); background-color: #f2f6fc; }
footer .family select option { color: #333; }

/* SNS */
footer .sns { display: flex; gap: 10px; }
footer .sns a { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: #e8eef7; transition: var(--ani); }
footer .sns a svg { width: 20px; height: 20px; fill: #55637a; }
footer .sns a:hover { background: var(--c_base2); transform: translateY(-3px); }
footer .sns a:hover svg { fill: #fff; }

/* TOP — 우측 하단 고정 버튼 */
.goTop {
	position: fixed; right: 30px; bottom: 30px; z-index: 90;
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	width: 50px; height: 50px; padding: 0; border-radius: 50%;
	border: 1px solid var(--border1); background: #fff;
	color: #111 !important; font-size: 10px; font-weight: 600; letter-spacing: .06em; line-height: 1;
	box-shadow: 0 10px 26px rgba(17,38,73,.16);
	opacity: 0; visibility: hidden; transform: translateY(14px);
	transition: opacity .3s, visibility .3s, transform .3s, background .2s;
}
.goTop.on { opacity: 1; visibility: visible; transform: translateY(0); }
.goTop svg { width: 18px; height: 18px; fill: #111; margin-bottom: 1px; transition: var(--ani); }
.goTop:hover { background: var(--c_base3); color: #fff !important; border-color: var(--c_base3); }
.goTop:hover svg { fill: #fff; }

/* 데스크탑 */
@media (min-width: 1250px) {
	/* 좌측 270px 는 fixed 사이드바가 덮으므로 콘텐츠를 그만큼 밀어준다 */
	footer { display: flex; align-items:start; justify-content: space-between; gap: 40px; padding: 40px 60px 40px calc(var(--sidebar-width) + 60px); }
}

/* 모바일 */
@media (max-width: 1249px) {
	footer { padding: 30px 25px 34px; }
	footer strong {padding-bottom:0;}
	footer .f-info {flex-direction:column; gap:8px;}
	footer .f-logo { width: 44px; }
	footer .f-util { margin-top: 24px; flex-wrap: wrap; gap: 14px; }
	footer .family select { width: 100%; }
	footer .f-info address {margin-top:8px;}
	footer .f-info address .line span { display: block; }
	footer .f-info address .copy {margin-top:0;}
	footer .f-info address .line span + span { margin-left: 0; }
	.goTop { right: 16px; bottom: 16px; width: 48px; height: 48px; }
}