/* ========================================================= footer.css — 공통 푸터 (더파크사이드 서울 원본 푸터 이식 · 전부 토큰화) 라이트 배경 · 가로 3분할 좌: 시행/시공/위탁(텍스트) · 중앙: 구분선|워드마크|구분선 · 우: 회사정보 + SNS 사용법: 에 token.css 다음으로 이 파일(footer.css)을 link 로 연결. 마크업은 footer.js 가 footer-placeholder 요소에 주입. ========================================================= */ .new_footer { background: var(--color-neutral-200); color: var(--color-text); } .new_footer .in { width: 96%; max-width: var(--container); margin-inline: auto; padding-block: clamp(var(--space-6), 4vw, var(--space-8)); display: flex; align-items: center; justify-content: space-between; gap: var(--space-7); } /* --- 좌: 시행 / 시공 / 위탁 (텍스트) --- */ .new_footer .f-partners { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-5); } .new_footer .f-partners .pt { display: inline-flex; align-items: baseline; gap: var(--space-2); font-family: var(--font-sans); font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--color-text); white-space: nowrap; } .new_footer .f-partners .pt em { font-style: normal; font-weight: var(--fw-regular); font-size: var(--fs-xs); color: var(--color-body-muted); } /* --- 중앙: 구분선 | 워드마크 | 구분선 --- */ .new_footer .f-brand { display: flex; align-items: center; gap: clamp(var(--space-5), 3vw, var(--space-7)); flex-shrink: 0; } .new_footer .f-brand .vline { width: 1px; height: 84px; background: var(--color-border-strong); } .new_footer .f-logo { width: clamp(120px, 13vw, 168px); height: auto; } /* --- 우: 회사정보 + SNS --- */ .new_footer .f-right { display: flex; align-items: center; gap: clamp(var(--space-5), 3vw, var(--space-7)); } .new_footer .f-info p { margin: 0; font-family: var(--font-sans); font-size: var(--fs-sm); line-height: 1.7; color: var(--color-text); } .new_footer .f-info strong { font-weight: var(--fw-semibold); } .new_footer .f-info .sep { margin: 0 var(--space-3); color: var(--color-border-strong); } .new_footer .f-sns { display: flex; gap: var(--space-3); margin: 0; padding: 0; list-style: none; flex-shrink: 0; } .new_footer .f-sns a { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; color: var(--color-text); transition: opacity var(--transition-fast); } .new_footer .f-sns a:hover { opacity: 0.6; } .new_footer .f-sns svg { width: 21px; height: 21px; fill: currentColor; } /* --- 하단 유의사항 (작은 글씨) --- */ .new_footer .f-notice { border-top: 1px solid var(--color-border); } .new_footer .f-notice ul { width: 96%; max-width: var(--container); margin-inline: auto; padding: var(--space-4) 0; list-style: none; box-sizing: border-box; } .new_footer .f-notice li { position: relative; padding-left: var(--space-3); font-size: var(--fs-xs); line-height: 1.7; color: var(--color-body-muted); letter-spacing: var(--ls-normal); } .new_footer .f-notice li + li { margin-top: var(--space-1); } .new_footer .f-notice li::before { content: '*'; position: absolute; left: 0; top: 0; } /* --- 반응형 --- */ @media (max-width: 1240px) { .new_footer .in { flex-direction: column; gap: var(--space-6); text-align: center; } .new_footer .f-partners { justify-content: center; } .new_footer .f-brand .vline { width: 60px; height: 1px; } .new_footer .f-right { flex-direction: column; gap: var(--space-4); } .new_footer .f-info { text-align: center; } .new_footer .f-sns { justify-content: center; } } @media (max-width: 560px) { .new_footer .f-partners { flex-direction: column; gap: var(--space-2); } .new_footer .f-info .sep { margin: 0 var(--space-2); } .new_footer .f-info p { font-size: var(--fs-xs); } }