/* 맨 아래(footer) 디자인 — templates/footer.html 과 짝. 모든 고객 화면이 /footer 로 불러 쓴다.
값은 cg-tokens.css 의 --cg-* 변수. 원래 #footer .top/.bottom 규칙(common.css)은 새 마크업에 걸리지 않는다.
폰: 고객센터 카드 → 링크 띠 → 회사 정보 / PC(1024~): 왼쪽 회사 정보, 오른쪽 고객센터 카드·링크 띠 */
#footer:has(.cg-ft) { background: var(--cg-bg); border-top: 1px solid var(--cg-line); }
#footer .cg-ft { max-width: 720px; margin: 0 auto; padding: var(--cg-sp-6) var(--cg-sp-4); box-sizing: border-box; letter-spacing: -0.2px; }
#footer .cg-ft * { box-sizing: border-box; }
/* 고객센터 카드 */
#footer .cg-ft-call { padding: var(--cg-sp-6) var(--cg-sp-4) var(--cg-sp-5); border: 1px solid var(--cg-line); border-radius: var(--cg-r-xl); background: var(--cg-surface); text-align: center; }
#footer .cg-ft-call-tit { display: block; font-size: var(--cg-fs-body); font-weight: var(--cg-fw-bold); line-height: 1.5; color: var(--cg-text-2); }
#footer .cg-ft-call-num { display: inline-block; margin-top: var(--cg-sp-2); font-size: 28px; font-weight: var(--cg-fw-heavy); line-height: 1.2; letter-spacing: -0.5px; color: var(--cg-text); }
#footer .cg-ft-call-time { margin: var(--cg-sp-2) 0 0; font-size: var(--cg-fs-body); line-height: 1.5; color: var(--cg-gray-700); }
#footer .cg-ft-call-time span { color: var(--cg-text-3); }
/* 링크 띠: 세 칸 같은 폭, 칸 사이 짧은 세로줄 */
#footer .cg-ft-links { display: grid; grid-template-columns: repeat(3, 1fr); margin: var(--cg-sp-3) 0 0; padding: 0; border: 1px solid var(--cg-line); border-radius: var(--cg-r-lg); background: var(--cg-surface); list-style: none; }
#footer .cg-ft-links li { position: relative; }
#footer .cg-ft-links li + li::before { content: ""; position: absolute; left: 0; top: 50%; width: 1px; height: var(--cg-sp-3); margin-top: calc(var(--cg-sp-3) / -2); background: var(--cg-line); }
#footer .cg-ft-links a { display: flex; align-items: center; justify-content: center; height: 44px; font-size: var(--cg-fs-body); font-weight: var(--cg-fw-normal); color: var(--cg-gray-600); white-space: nowrap; }
#footer .cg-ft-links b { font-weight: var(--cg-fw-bold); color: var(--cg-text); }
/* 회사 정보: 이름은 굵게, 값은 보조 글자 */
#footer .cg-ft-main { margin-top: var(--cg-sp-6); padding-top: var(--cg-sp-5); border-top: 1px solid var(--cg-line); }
#footer .cg-ft-info { display: flex; flex-direction: column; gap: var(--cg-sp-2); margin: 0; font-size: var(--cg-fs-meta); line-height: 1.6; }
#footer .cg-ft-info > div { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: var(--cg-sp-1); }
#footer .cg-ft-info :is(dt, dd) { line-height: 1.6; } /* 기본 규칙(reset)이 줄높이를 글자 크기로 묶어 둠 */
#footer .cg-ft-info dt { margin: 0; font-weight: var(--cg-fw-bold); color: var(--cg-gray-800); }
#footer .cg-ft-info dd { margin: 0 var(--cg-sp-3) 0 0; color: var(--cg-gray-600); }
#footer .cg-ft-info dd a { font: inherit; color: inherit; vertical-align: baseline; }
#footer .cg-ft-info dd span { color: var(--cg-text-3); }
#footer .cg-ft-addr dd { flex: 1; min-width: 0; margin-right: 0; }
#footer .cg-ft-info > .cg-ft-tel + .cg-ft-tel { margin-top: calc(var(--cg-sp-1) * -1); } /* 전화 두 줄은 조금 붙여서 */
#footer .cg-ft-copy { margin: var(--cg-sp-5) 0 0; padding-top: var(--cg-sp-3); border-top: 1px solid var(--cg-line); font-size: var(--cg-fs-label); line-height: 1.5; color: var(--cg-text-3); }
/* PC: 두 칸 */
@media (min-width: 1024px) {
#footer .cg-ft { display: grid; grid-template-columns: minmax(0, 1fr) 360px; column-gap: 48px; align-items: start; max-width: 1200px; padding: 48px var(--cg-sp-6); }
#footer .cg-ft-side { order: 2; }
#footer .cg-ft-main { order: 1; margin-top: 0; padding-top: 0; border-top: 0; }
#footer .cg-ft-info { font-size: var(--cg-fs-body); }
}