@charset "utf-8";
/* ============================================================
   footer.css — 푸터 + 하단 고정 내비 (세종산업 앱 셸)
   ============================================================ */

/* ── 푸터 (다크 카드) ── */
footer { background:#fff; }
footer .footerWrap {
	padding:26px 22px 16px;
	border-radius:0;
	background:#333;
	color:#d9dde3;
}

footer .f-brand { display:flex; align-items:center; justify-content:space-between; gap:12px; padding-bottom:4px; }
footer .f-brand .f-logo { line-height:0; }
footer .f-brand .f-logo a { display:inline-block; }
footer .f-brand .f-logo img { display:block; width:auto; height:34px; }
footer .f-brand .f-sub { margin-top:11px; color:#9aa2ae; font-size:var(--fs12); font-weight:600; letter-spacing:.03em; }

/* 개인정보처리방침 */
footer .f-brand .f-privacy {
	flex:0 0 auto;  /* 맨 위로 버튼과 겹치지 않도록 */
	padding:7px 12px;
	border:1px solid rgba(255,255,255,.22); border-radius:6px;
	color:#c3cad4; font-size:var(--fs12); font-weight:700; letter-spacing:-.01em; white-space:nowrap;
	transition:border-color .2s, color .2s, background-color .2s; 
}
footer .f-brand .f-privacy:hover { border-color:rgba(255,255,255,.45); background:rgba(255,255,255,.06); color:#fff; }

/* ── 회사정보 열기/닫기 버튼 ── */
footer .f-toggle {
	display:flex; align-items:center; justify-content:space-between; gap:10px;
	width:100%; padding:13px 0;
	background:none; border:0; cursor:pointer;
	color:#b8bfca; font-size:var(--fs13); font-weight:700; letter-spacing:.01em;
	transition:color .2s;
}
footer .f-toggle:hover { color:#fff; }
footer .f-toggle .ar {
	position:relative; flex:0 0 auto;
	width:18px; height:18px;
	transition:transform .3s ease;
}
footer .f-toggle .ar:before {
	content:""; position:absolute; left:50%; top:45%;
	width:8px; height:8px;
	border-right:2px solid currentColor; border-bottom:2px solid currentColor;
	transform:translate(-50%,-50%) rotate(45deg);
}
footer .f-toggle.on { color:#fff; }
footer .f-toggle.on .ar { transform:rotate(-180deg); }

/* ── 주소·연락처 (슬라이드 영역) ──
   기본은 노출 상태. JS 가 .fold 를 붙여 접는다 (스크립트 미동작 시에도 정보 노출) */
footer .f-orgs {
	display:grid; grid-template-rows:1fr;
	overflow:hidden; opacity:1; margin-bottom:14px;
	transition:grid-template-rows .35s ease, margin-bottom .35s ease, opacity .3s ease;
}
footer .f-orgs.fold { grid-template-rows:0fr; margin-bottom:0; opacity:0; }
footer .f-orgs .f-orgs-inner {
	min-height:0; overflow:hidden;
	display:flex; flex-direction:column; gap:20px;
}

/* 그룹 (본사 / 직영대리점) */
footer .f-orgs .f-group { display:flex; flex-direction:column; gap:12px; }
footer .f-orgs .f-gtit {
	padding-bottom:8px; border-bottom:1px solid rgba(255,255,255,.14);
	color:#fff; font-size:var(--fs13); font-weight:800; letter-spacing:.01em;
}

/* 사업장 단위 */
footer .f-orgs .f-branch { display:flex; flex-direction:column; gap:4px; }
footer .f-orgs .f-branch .bn { color:#fff; font-size:var(--fs13); font-weight:700; letter-spacing:-.01em; }
footer .f-orgs .f-branch .ba { color:#c3cad4; font-size:var(--fs12); line-height:1.55; }
footer .f-orgs .f-branch .bc { display:flex; flex-direction:column; gap:2px; margin-top:2px; padding-left:0;}
footer .f-orgs .f-branch .bc li { display:flex; align-items:flex-start; gap:8px; }
footer .f-orgs .f-branch .bc .lb {
	flex:0 0 52px; padding-top:1px;
	color:#8e95a1; font-size:var(--fs12); font-weight:700; letter-spacing:.02em;
}
footer .f-orgs .f-branch .bc .vl { flex:1 1 auto; color:#e7eaef; font-size:var(--fs12); line-height:1.55; word-break:break-all; }
footer .f-orgs .f-branch .bc .vl a:hover { color:#fff; text-decoration:underline; }

footer .footer-bottom { }
footer .f-copy { color:#8e95a1; font-size:var(--fs12); letter-spacing:.01em; }
footer .f-design { margin-top:6px; }
footer .f-design a { color:#787f8a; font-size:var(--fs12); font-weight:600; }
footer .f-design a:hover { color:#c8cdd5; }

/* ── 하단 고정 내비 ── */
.bottomNav {
	position:fixed; left:50%; bottom:0; z-index:80;
	transform:translateX(-50%);
	width:100%; height:74px;
	padding:7px 4px max(7px, env(safe-area-inset-bottom));
	display:grid; grid-template-columns:repeat(5, 1fr);   /* 구성사례 임시 비노출 → 5칸 */
	background:#fff; border-top:1px solid #dfe6ef;
	box-shadow:0 -6px 20px rgba(16,32,64,.06);
	transition:transform .28s ease;
	will-change:transform;
}
/* 아래로 스크롤 → 숨김 (위로 스크롤하면 다시 노출) */
.bottomNav.hide { transform:translateX(-50%) translateY(110%); }
.bottomNav a {
	display:flex; flex-direction:column; align-items:center; justify-content:flex-start; gap:4px;
	padding-top:5px;   /* 타이틀이 2줄이어도 아이콘·타이틀 시작 높이를 칸마다 동일하게 */
	border-radius:8px; color:#8b99ab; font-size:var(--fs12); font-weight:700; letter-spacing:-.04em;
	text-align:center; line-height:1.2;
}
.bottomNav a em { font-style:normal; }
.bottomNav a.on { background:rgba(27,84,178,.09); color:var(--c_base1); }

.bottomNav .ic { display:block; width:21px; height:21px; }

/* ── 맨 위로 ── */
.gotop {
	position:fixed; z-index:79; right:16px; bottom:88px;
	width:44px; height:44px; border-radius:50%;
	background:var(--c_base1); box-shadow:0 6px 18px rgba(16,32,64,.24);
	opacity:0; visibility:hidden; transform:translateY(12px); pointer-events:none;
	transition:all .25s;
}
.gotop:before {
	content:""; position:absolute; left:50%; top:54%;
	width:10px; height:10px; border-top:2px solid #fff; border-right:2px solid #fff;
	transform:translate(-50%,-50%) rotate(-45deg);
}
.gotop.show { opacity:1; visibility:visible; transform:translateY(0); pointer-events:auto; }

/* 하단 내비가 숨겨진 동안엔 맨 위로 버튼도 아래로 내려붙음 */
body.navHide .gotop { bottom:20px; }

/* ── 태블릿 이상 (600px~) — 셸 1400px 에 맞춤 ── */
@media screen and (min-width: 600px) {
	footer { padding:0; }
	footer .footerWrap { padding:32px 28px 20px; border-radius:0; }
	footer .f-brand .f-logo img { height:38px; }
	footer .f-brand .f-privacy { margin-right:48px; padding:8px 14px 5px; }   /* 이 폭에선 맨 위로 버튼이 위쪽에 뜬다 */
	footer .f-toggle { padding:12px 0 8px; }
	footer .f-orgs { margin-bottom:16px; }
	footer .f-orgs.fold { margin-bottom:0; }
	footer .f-orgs .f-orgs-inner { display:grid; grid-template-columns:1fr 1fr; align-items:start; gap:20px 26px; }
	footer .footer-bottom { display:flex; align-items:center; justify-content:space-between; gap:16px; }
	footer .f-design { margin-top:0; }

	.bottomNav { width:min(100%, 1400px); height:78px; padding:8px 12px max(8px, env(safe-area-inset-bottom)); }
	.bottomNav a { justify-content:center; padding-top:0; }   /* 넓은 폭에선 타이틀이 한 줄 → 다시 세로 가운데 */
	.bottomNav .ic { width:23px; height:23px; }

	.gotop {
		left:50%; right:auto; margin-left:640px;   /* 1400px 셸 절반(700) - 60 */
		width:48px; height:48px; bottom:170px;
	}
	body.navHide .gotop { bottom:24px; }
}

/* 셸 폭(1400)보다 뷰포트가 좁으면 gotop 을 화면 오른쪽에 붙임 */
@media screen and (min-width: 600px) and (max-width: 1399px) {
	.gotop { left:auto; right:16px; margin-left:0; }
}

/* ── PC (1024px~) — 넓은 셸 좌우 여백 ── */
@media screen and (min-width: 1024px) {
	footer .footerWrap { padding:36px 40px 24px; }
	.gotop { right:24px; }
}
@media screen and (min-width: 1400px) {
	.gotop { right:auto; }
}