@charset "utf-8";
/* ============================================================
   footer.css
   대상: footer-1.html ~ footer-4.html (하단정보 1~4)
   포함 영역:
   - 사이트 푸터 공통 구조 (.site-footer)
   - 푸터 Type 1~4 변형 (.site-footer--type1 ~ --type4)
   - 환율 박스 (.footer-rates)
   - 푸터 관련 반응형
   ============================================================ */

/* === 사이트 푸터 공통 === */
.site-footer {background: var(--c-bg-dark); color: rgba(255, 255, 255, .75); padding: 56px 0 28px; font-size: 15px; line-height: 1.7;}
.site-footer-top {display: grid; grid-template-columns: 320px 1fr; gap: 40px; align-items: start; padding-bottom: 28px; border-bottom: 1px solid rgba(255, 255, 255, .08);}
.site-footer-logo {color: #fff; font-size: 22px; font-weight: 800; display: flex; align-items: baseline; gap: 10px; margin-bottom: 16px;}
.site-footer-logo img {height: 40px; width: auto; display: block;}
.site-footer-logo .logo-sub {font-size: 13px; opacity: .55; font-weight: 500;}
.site-footer-cs {opacity: .9; font-size: 14px;}
.site-footer-cs b {color: #fff; font-size: 22px; font-weight: 700; display: block; margin-bottom: 6px; letter-spacing: .5px;}
.site-footer-links {display: flex; gap: 22px; flex-wrap: wrap; justify-content: flex-end;}
.site-footer-links a {color: rgba(255, 255, 255, .85); font-weight: 500; font-size: 15px; transition: color .15s;}
.site-footer-links a:hover {color: #fff;}
.site-footer-info {padding: 22px 0 0; font-size: 14px;}
.site-footer-info p {margin-bottom: 5px; opacity: .7;}
.site-footer-info b {color: rgba(255, 255, 255, .95); font-weight: 600; opacity: 1;}
.site-footer-bottom {display: flex; justify-content: space-between; align-items: center; margin-top: 18px; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .06); opacity: .65; font-size: 13px;}

/* 인증마크 공통 — 높이 통일 (원형마크 기준) + 사각형 자동 라운드 */
.site-footer .cert-img {display: block; height: 100px; width: auto; max-width: 150px; object-fit: contain; border-radius: 14px;}


@media (max-width: 1023px) {
	.site-footer-top {grid-template-columns: 1fr; gap: 24px;}
	.site-footer-links {justify-content: flex-start;}
}

@media (max-width: 767px) {
	.site-footer {padding: 40px 0 24px;}
	.site-footer-bottom {flex-direction: column; gap: 6px; align-items: flex-start;}
}

/* ============================================================
   FOOTER 4종 — 시니어 디자인 (전혀 다른 4가지 컨셉)
   ============================================================ */

/* ----------------------------------------------------------
   Type 1 — 라이트 기업형 (Corporate Light)
   ---------------------------------------------------------- */
.site-footer--type1 {background: #fff; color: var(--c-text-sub); border-top: 1px solid var(--c-line);}
.site-footer--type1 .site-footer-top {border-bottom-color: var(--c-line);}
.site-footer--type1 .site-footer-logo {color: var(--c-text);}
.site-footer--type1 .site-footer-logo span:first-child {color: var(--c-primary);}
.site-footer--type1 .site-footer-logo .logo-sub {color: var(--c-text-mute); opacity: 1;}
.site-footer--type1 .site-footer-cs b {color: var(--c-text);}
.site-footer--type1 .site-footer-cs {opacity: 1;}
.site-footer--type1 .site-footer-info b {color: var(--c-text); opacity: 1;}
.site-footer--type1 .site-footer-info p {opacity: .7;}
.site-footer--type1 .site-footer-bottom {border-top-color: var(--c-line); opacity: 1; color: var(--c-text-mute);}

/* 우측 컬럼 — 메뉴(상단) + 인증마크(하단 정렬) */
.site-footer--type1 .site-footer-right {display: flex; flex-direction: column; align-items: flex-end; height: 100%; gap: 20px;}

/* 메뉴 — 버튼 형태 */
.site-footer--type1 .site-footer-links {display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end;}
.site-footer--type1 .site-footer-links a {padding: 9px 18px; background: var(--c-bg-soft); border: 1px solid var(--c-line); border-radius: 8px; color: var(--c-text); font-weight: 600; font-size: 14px; transition: background .2s ease, border-color .2s ease, color .2s ease;}
.site-footer--type1 .site-footer-links a:hover {background: var(--c-primary); border-color: var(--c-primary); color: #fff;}

/* 인증마크 — 하단 정렬 */
.site-footer--type1 .site-footer-certs {display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: flex-end; margin-top: auto;}
.site-footer--type1 .site-footer-certs .cert-img {height: 100px;}

/* ----------------------------------------------------------
   Type 2 — 다크 프리미엄 (Dark Premium · 4컬럼 그리드)
   ---------------------------------------------------------- */
.site-footer--type2 {background: linear-gradient(180deg, var(--c-footer-bg1, #1a1d3e) 0%, var(--c-footer-bg2, #14172e) 100%); color: rgba(255, 255, 255, .7); padding: 60px 0 28px; font-size: 15px;}
.site-footer--type2 .footer-cols {display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.4fr; gap: 40px; padding-bottom: 36px; border-bottom: 1px solid rgba(255, 255, 255, .08);}
.site-footer--type2 .footer-col-title {color: #fff; font-size: 16px; font-weight: 700; margin-bottom: 18px; letter-spacing: .5px;}
.site-footer--type2 .footer-logo {margin-bottom: 16px;}
.site-footer--type2 .footer-logo img {height: 40px; width: auto; display: block;}
.site-footer--type2 .footer-desc {font-size: 14px; line-height: 1.6; margin-bottom: 18px; opacity: .8;}
.site-footer--type2 .footer-social {display: flex; gap: 10px;}
.site-footer--type2 .footer-social a {width: 38px; height: 38px; border-radius: 50%; background: rgba(255, 255, 255, .06); display: flex; align-items: center; justify-content: center; font-size: 15px; color: rgba(255, 255, 255, .85); transition: background .2s ease, color .2s ease, transform .2s ease;}
.site-footer--type2 .footer-social a:hover {background: #fbbf24; color: #0f172a; transform: translateY(-2px);}
.site-footer--type2 .footer-col-links {list-style: none; padding: 0; margin: 0;}
.site-footer--type2 .footer-col-links li {margin-bottom: 11px;}
.site-footer--type2 .footer-col-links a {font-size: 14px; color: rgba(255, 255, 255, .75); transition: color .2s ease;}
.site-footer--type2 .footer-col-links a:hover {color: #fbbf24;}
.site-footer--type2 .footer-cs-tel {margin-bottom: 6px;}
.site-footer--type2 .footer-cs-tel b {color: #fff; font-size: 22px; font-weight: 700; letter-spacing: .5px;}
.site-footer--type2 .footer-cs-hours {font-size: 13px; margin-bottom: 18px; opacity: .75; line-height: 1.5;}
.site-footer--type2 .footer-certs {display: flex; flex-wrap: wrap; gap: 10px; align-items: center;}
.site-footer--type2 .footer-certs .cert-img {height: 100px;}
.site-footer--type2 .footer-bottom {padding: 24px 0 0;}
.site-footer--type2 .footer-info {margin-bottom: 4px; font-size: 13px; opacity: .6;}
.site-footer--type2 .footer-bottom-row {display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-top: 14px; flex-wrap: wrap;}
.site-footer--type2 .footer-copyright {font-size: 13px; opacity: .5; letter-spacing: .5px; margin: 0;}
.site-footer--type2 .footer-designed {font-size: 13px; opacity: .55; color: rgba(255, 255, 255, .65); margin: 0;}

/* ----------------------------------------------------------
   Type 3 — 미니멀 컴팩트 (Minimal Compact · 가로 1행)
   ---------------------------------------------------------- */
.site-footer--type3 {background: #fff; color: var(--c-text-sub); border-top: 1px solid var(--c-line); padding: 100px 0 50px; margin-top: 0; font-size: 14px; opacity: 1; position: relative;}

/* 푸터3 침범 효과 유지 + 본문 콘텐츠가 박스에 가려지지 않도록 마지막 섹션 하단 여백 확보 */
body:has(.site-footer--type3) main .main-section:last-of-type,
body:has(.site-footer--type3) main > section:last-of-type {padding-bottom: 160px;}

/* 상단 알약 영역 — 바디/푸터 경계 정중앙에 위치 (위아래 충분한 여백) */
.site-footer--type3 .footer-pill-area {position: absolute; top: -46px; left: 50%; transform: translateX(-50%); z-index: 2; width: 100%; max-width: 1240px; padding: 0 20px; box-sizing: border-box;}
.site-footer--type3 .footer-pill {display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 18px 36px; background: #fff; border-radius: 100px; border: 1px solid var(--c-line);}

/* 알약 좌측 — 메뉴 링크 */
.site-footer--type3 .footer-pill-links {display: flex; align-items: center;}
.site-footer--type3 .footer-pill-links a {padding: 0 16px; color: var(--c-text-sub); font-weight: 500; font-size: 15px; transition: color .2s ease;}
.site-footer--type3 .footer-pill-links a:first-child {padding-left: 8px;}
.site-footer--type3 .footer-pill-links a + a {border-left: 1px solid var(--c-line);}
.site-footer--type3 .footer-pill-links a:hover {color: var(--c-primary);}

/* 알약 우측 — 고시환율 */
.site-footer--type3 .footer-pill-rates {display: flex; gap: 12px;}
.site-footer--type3 .rate-item {display: inline-flex; align-items: center; gap: 10px; padding: 10px 20px; background: var(--c-bg-soft); border: 1px solid var(--c-line); border-radius: 99px; font-size: 15px;}
.site-footer--type3 .rate-item i {color: var(--c-primary); font-size: 15px;}
.site-footer--type3 .rate-label {color: var(--c-text-sub); font-weight: 500; font-size: 15px;}
.site-footer--type3 .rate-value {color: var(--c-text); font-weight: 700; margin-left: 4px; font-size: 17px;}

/* 하단 본문 — 3컬럼 (브랜드 / 회사정보 / 인증마크) */
.site-footer--type3 .footer-base {display: grid; grid-template-columns: minmax(220px, auto) 1fr auto; gap: 60px; padding: 0; align-items: start;}
.site-footer--type3 .footer-base-brand {display: flex; flex-direction: column; gap: 14px;}
.site-footer--type3 .footer-base-logo {height: 38px; width: auto; display: block;}
.site-footer--type3 .footer-base-copyright {font-size: 12px; color: var(--c-text-mute); line-height: 1.6; letter-spacing: .3px;}
.site-footer--type3 .footer-base-info p {margin-bottom: 6px; line-height: 1.7; color: var(--c-text-sub); font-size: 14px;}
.site-footer--type3 .footer-base-credit {margin-top: 0; font-size: 13px; color: var(--c-text); font-weight: 600;}
.site-footer--type3 .footer-base-credit span {color: var(--c-text-mute); font-weight: 400; margin-left: 8px;}
.site-footer--type3 .footer-base-credit-row {display: flex; align-items: center; gap: 12px; margin-top: 12px; flex-wrap: wrap;}
.site-footer--type3 .footer-social {display: flex; gap: 8px; align-items: center;}
.site-footer--type3 .footer-social a {width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--c-bg-soft); color: var(--c-text-sub); font-size: 14px; transition: background .2s ease, color .2s ease, transform .2s ease;}
.site-footer--type3 .footer-social a:hover {background: var(--c-primary); color: #fff; transform: translateY(-2px);}
.site-footer--type3 .footer-base-cert {display: flex; align-items: center;}
.site-footer--type3 .footer-base-cert .cert-img {height: 100px;}
.site-footer--type3 .footer-base-end {text-align: right; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--c-line);}
.site-footer--type3 .footer-base-end .footer-designed {font-size: 13px; color: var(--c-text-mute); margin: 0;}

/* ----------------------------------------------------------
   Type 4 — 에디토리얼 다크 (Editorial Dark · 비대칭 타이포 중심)
   ---------------------------------------------------------- */
.site-footer--type4 {position: relative; overflow: hidden; background: linear-gradient(135deg, #0c1929 0%, #0f1729 50%, #0a0f1c 100%); color: rgba(245, 241, 232, .7); padding: 64px 0 28px; font-size: 15px;}
.site-footer--type4::before {content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 15% 0%, rgba(6, 182, 212, .12), transparent 35%), radial-gradient(circle at 85% 100%, rgba(34, 211, 238, .08), transparent 40%); pointer-events: none; z-index: 0;}
.site-footer--type4::after {content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(6, 182, 212, .025) 3px 4px); pointer-events: none; z-index: 0;}
.site-footer--type4 .inner, .site-footer--type4 > .inner {position: relative; z-index: 1;}
.site-footer--type4 .footer-grid {display: grid; grid-template-columns: minmax(320px, 1fr) 2fr; gap: 80px; padding-bottom: 48px; border-bottom: 1px solid rgba(255, 255, 255, .08); margin-bottom: 28px;}
.site-footer--type4 .footer-logo {margin-bottom: 24px;}
.site-footer--type4 .footer-logo img {height: 44px; width: auto; display: block;}
.site-footer--type4 .footer-statement {font-size: 24px; font-weight: 600; color: #f5f1e8; line-height: 1.4; margin-bottom: 14px; letter-spacing: -.3px;}
.site-footer--type4 .footer-tagline {font-size: 14px; color: rgba(245, 241, 232, .6); line-height: 1.6; margin-bottom: 24px;}
.site-footer--type4 .footer-brand .footer-certs {display: flex; flex-wrap: wrap; gap: 12px; align-items: center;}
.site-footer--type4 .footer-brand .footer-certs .cert-img {height: 100px;}
.site-footer--type4 .footer-cols {display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px;}
.site-footer--type4 .footer-col h4 {font-size: 13px; color: rgba(245, 241, 232, .5); font-weight: 600; text-transform: uppercase; letter-spacing: 1.2px; margin-bottom: 18px; padding-bottom: 12px; border-bottom: 1px solid rgba(255, 255, 255, .08);}
.site-footer--type4 .footer-col ul {list-style: none; padding: 0; margin: 0;}
.site-footer--type4 .footer-col ul li {margin-bottom: 11px;}
.site-footer--type4 .footer-col a {color: rgba(245, 241, 232, .85); font-size: 15px; transition: color .2s ease;}
.site-footer--type4 .footer-col a:hover {color: #e07b39;}
.site-footer--type4 .footer-tel {font-size: 22px; font-weight: 700; color: #f5f1e8; margin-bottom: 8px; letter-spacing: .5px;}
.site-footer--type4 .footer-hours {font-size: 14px; color: rgba(245, 241, 232, .7); line-height: 1.5; margin-bottom: 8px;}
.site-footer--type4 .footer-email {font-size: 14px; color: rgba(245, 241, 232, .6);}
.site-footer--type4 .footer-meta {font-size: 13px; color: rgba(245, 241, 232, .5); line-height: 1.7; padding-bottom: 24px; border-bottom: 1px solid rgba(255, 255, 255, .08); margin-bottom: 20px;}
.site-footer--type4 .footer-meta p {margin-bottom: 3px;}
.site-footer--type4 .footer-end {display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap;}
.site-footer--type4 .footer-copyright {font-size: 12px; color: rgba(245, 241, 232, .5); letter-spacing: .5px;}
.site-footer--type4 .footer-end-right {display: flex; align-items: center; gap: 20px;}
.site-footer--type4 .footer-designed {font-size: 12px; color: rgba(245, 241, 232, .55); letter-spacing: .3px; margin: 0;}
.site-footer--type4 .footer-cert {display: flex; align-items: center; gap: 10px; font-size: 13px; color: rgba(245, 241, 232, .6); letter-spacing: .5px;}
.site-footer--type4 .footer-cert-divider {opacity: .4;}
.site-footer--type4 .footer-social {display: flex; gap: 4px;}
.site-footer--type4 .footer-brand .footer-social {margin-top: 14px;}
.site-footer--type4 .footer-social a {width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: rgba(245, 241, 232, .6); font-size: 15px; transition: color .2s ease;}
.site-footer--type4 .footer-social a:hover {color: #e07b39;}


/* ============================================================
   FOOTER 1/2/4 — 환율 박스 (.footer-rates)
   ============================================================ */

/* Type 1 — 라이트 톤, 환율은 회사정보 우측에 흰 박스로 배치 */
.site-footer--type1 .site-footer-info {display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;}
.site-footer--type1 .site-footer-info-text {flex: 1; min-width: 0;}
.site-footer--type1 .footer-rates {display: flex; flex-wrap: wrap; align-items: center; gap: 10px;}
.site-footer--type1 .footer-rates .rate-item {display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px; background: #fff; border: 1px solid var(--c-line); border-radius: 8px; font-size: 14px; line-height: 1; transition: border-color .2s ease, box-shadow .2s ease;}
.site-footer--type1 .footer-rates .rate-item:hover {border-color: var(--c-primary); box-shadow: 0 4px 12px rgba(41, 98, 255, .12);}
.site-footer--type1 .footer-rates .rate-item i {color: var(--c-primary); font-size: 14px;}
.site-footer--type1 .footer-rates .rate-label {color: var(--c-text-sub); font-weight: 500; font-size: 14px;}
.site-footer--type1 .footer-rates .rate-value {color: var(--c-text); font-weight: 800; margin-left: 2px; letter-spacing: -.2px; font-size: 16px;}

/* 푸터1 소셜 — 점심시간 텍스트 아래 라이트 톤 */
.site-footer--type1 .site-footer-cs .footer-social {display: flex; gap: 8px; margin-top: 16px;}
.site-footer--type1 .site-footer-cs .footer-social a {width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--c-bg-soft); color: var(--c-text-sub); font-size: 14px; transition: background .2s ease, color .2s ease, transform .2s ease;}
.site-footer--type1 .site-footer-cs .footer-social a:hover {background: var(--c-primary); color: #fff; transform: translateY(-2px);}

/* Type 2 — 다크 톤, 브랜드 컬럼 내부 (소셜 아래) */
.site-footer--type2 .footer-rates {display: flex; flex-direction: column; gap: 8px; margin-top: 18px;}
.site-footer--type2 .footer-rates .rate-item {display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1); border-radius: 8px; font-size: 13px;}
.site-footer--type2 .footer-rates .rate-item i {color: #fbbf24; font-size: 13px;}
.site-footer--type2 .footer-rates .rate-label {color: rgba(255, 255, 255, .7); font-weight: 500; flex: 1;}
.site-footer--type2 .footer-rates .rate-value {color: #fff; font-weight: 700;}

/* Type 4 — 다크/시안 톤, 컬럼 그리드 아래 풀폭 라인 */
.site-footer--type4 .footer-cols {position: relative;}
.site-footer--type4 .footer-rates {grid-column: 1 / -1; display: flex; gap: 12px; flex-wrap: wrap; margin-top: 0; padding-top: 26px; border-top: 1px solid rgba(255, 255, 255, .08);}
.site-footer--type4 .footer-rates .rate-item {display: inline-flex; align-items: center; gap: 10px; padding: 12px 18px; background: rgba(6, 182, 212, .06); border: 1px solid rgba(6, 182, 212, .2); border-radius: 10px; font-size: 14px;}
.site-footer--type4 .footer-rates .rate-item i {color: #22d3ee; font-size: 14px;}
.site-footer--type4 .footer-rates .rate-label {color: rgba(245, 241, 232, .7); font-weight: 500;}
.site-footer--type4 .footer-rates .rate-value {color: #f5f1e8; font-weight: 700; margin-left: 2px;}

/* 태블릿 */
@media (max-width: 1023px) {
	.site-footer--type1 .footer-rates {gap: 8px;}
	.site-footer--type1 .footer-rates .rate-item {padding: 9px 14px; font-size: 13px;}
	.site-footer--type1 .footer-rates .rate-item i {font-size: 13px;}
	.site-footer--type1 .footer-rates .rate-label {font-size: 13px;}
	.site-footer--type1 .footer-rates .rate-value {font-size: 15px;}
	.site-footer--type3 .footer-pill-rates {gap: 8px;}
	.site-footer--type3 .rate-item {padding: 9px 16px; font-size: 14px;}
	.site-footer--type3 .rate-item i {font-size: 14px;}
	.site-footer--type3 .rate-label {font-size: 14px;}
	.site-footer--type3 .rate-value {font-size: 16px;}
	.site-footer--type4 .footer-rates {margin-top: 0; padding-top: 22px;}
	.site-footer--type4 .footer-rates .rate-item {padding: 10px 14px; font-size: 13px;}
}

/* 모바일 */
@media (max-width: 767px) {
	.site-footer--type1 .site-footer-info {flex-direction: column; align-items: flex-start; gap: 14px;}
	.site-footer--type1 .footer-rates {width: 100%; justify-content: flex-start; margin-top: 0;}
	.site-footer--type1 .footer-rates .rate-item {flex: 1 1 auto; justify-content: center;}
	.site-footer--type2 .footer-rates .rate-item {font-size: 12.5px;}
	.site-footer--type4 .footer-rates {flex-direction: column; gap: 8px;}
	.site-footer--type4 .footer-rates .rate-item {width: 100%; justify-content: space-between;}
}



/* ============================================================
   footer-2 우측 정렬 — 고객센터 + 인증마크
   ============================================================ */
.site-footer--type2 .footer-col--cs {text-align: right;}
.site-footer--type2 .footer-col--cs .footer-col-title {text-align: right;}
.site-footer--type2 .footer-col--cs .footer-cs-tel {text-align: right;}
.site-footer--type2 .footer-col--cs .footer-cs-hours {text-align: right;}
.site-footer--type2 .footer-col--cs .footer-certs {justify-content: flex-end;}

/* 작은 모바일 — footer-2 인증마크 반응형 (크기 축소 + 가운데 정렬) */
@media (max-width: 480px) {
	.site-footer--type2 .footer-col--cs {text-align: center;}
	.site-footer--type2 .footer-col--cs .footer-col-title,
	.site-footer--type2 .footer-col--cs .footer-cs-tel,
	.site-footer--type2 .footer-col--cs .footer-cs-hours {text-align: center;}
	.site-footer--type2 .footer-col--cs .footer-certs {justify-content: center; gap: 8px;}
	.site-footer--type2 .footer-certs .cert-img {height: 56px; max-width: 100px; border-radius: 8px;}
}

/* ============================================================
   footer-4 우측 정렬 — 연락처 + 환율정보
   ============================================================ */
.site-footer--type4 .footer-cols > .footer-col:last-of-type {text-align: right;}
.site-footer--type4 .footer-cols > .footer-col:last-of-type h4 {text-align: right;}
.site-footer--type4 .footer-cols > .footer-col:last-of-type .footer-tel,
.site-footer--type4 .footer-cols > .footer-col:last-of-type .footer-hours,
.site-footer--type4 .footer-cols > .footer-col:last-of-type .footer-email {text-align: right;}
.site-footer--type4 .footer-rates {justify-content: flex-end; text-align: right;}
.site-footer--type4 .footer-rates .rate-item {justify-content: flex-end;}

/* footer-4 모바일 — 그리드 세로 스택 + 요소 축소 + 우측정렬 해제 (뒤에 배치해 위 우측정렬 규칙보다 우선) */
@media (max-width: 767px) {
	.site-footer--type4 {padding: 44px 0 24px;}
	.site-footer--type4 .footer-grid {grid-template-columns: 1fr; gap: 32px; padding-bottom: 32px; margin-bottom: 24px;}
	.site-footer--type4 .footer-cols {grid-template-columns: 1fr; gap: 26px;}
	.site-footer--type4 .footer-statement {font-size: 20px;}
	.site-footer--type4 .footer-tagline {font-size: 13px;}
	.site-footer--type4 .footer-logo img {height: 36px;}
	.site-footer--type4 .footer-brand .footer-certs .cert-img {height: 68px;}
	.site-footer--type4 .footer-tel {font-size: 20px;}
	.site-footer--type4 .footer-end {flex-direction: column; align-items: flex-start; gap: 14px;}
	.site-footer--type4 .footer-end-right {flex-wrap: wrap; gap: 12px;}
	.site-footer--type4 .footer-cols > .footer-col:last-of-type,
	.site-footer--type4 .footer-cols > .footer-col:last-of-type h4,
	.site-footer--type4 .footer-cols > .footer-col:last-of-type .footer-tel,
	.site-footer--type4 .footer-cols > .footer-col:last-of-type .footer-hours,
	.site-footer--type4 .footer-cols > .footer-col:last-of-type .footer-email {text-align: left;}
	.site-footer--type4 .footer-rates {justify-content: flex-start; text-align: left;}
	.site-footer--type4 .footer-rates .rate-item {justify-content: space-between;}
}

/* ============================================================
   footer 4종 소셜 — 브랜드별 hover 컬러 + 한글 툴팁 + 네이버 SVG
   ============================================================ */

/* 공통 — SVG 사이즈 */
.footer-social-svg {width: 60%; height: 60%; display: block;}

/* 공통 — 툴팁 (각 type별로 색상 다르게 오버라이드) */
.footer-social a {position: relative;}
.footer-social a::after {content: attr(data-tooltip); position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); padding: 5px 10px; font-size: 12px; font-weight: 500; border-radius: 5px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .2s ease; z-index: 5;}
.footer-social a::before {content: ''; position: absolute; bottom: calc(100% + 3px); left: 50%; transform: translateX(-50%); border: 5px solid transparent; opacity: 0; pointer-events: none; transition: opacity .2s ease;}
.footer-social a:hover::after, .footer-social a:hover::before {opacity: 1;}

/* ===== footer-1 (라이트 톤) ===== */
.site-footer--type1 .site-footer-cs .footer-social a::after {background: #0a3d63; color: #fff;}
.site-footer--type1 .site-footer-cs .footer-social a::before {border-top-color: #0a3d63;}
.site-footer--type1 .site-footer-cs .footer-social a[aria-label="YouTube"]:hover {background: #ff0000; color: #fff;}
.site-footer--type1 .site-footer-cs .footer-social .footer-social-link--naver-blog:hover {background: #03c75a; color: #fff;}
.site-footer--type1 .site-footer-cs .footer-social .footer-social-link--naver-cafe:hover {background: #2db400; color: #fff;}
.site-footer--type1 .site-footer-cs .footer-social a[aria-label="Instagram"]:hover {background: linear-gradient(135deg, #f58529 0%, #dd2a7b 50%, #8134af 100%); color: #fff;}
.site-footer--type1 .site-footer-cs .footer-social a[aria-label="Facebook"]:hover {background: #1877f2; color: #fff;}
.site-footer--type1 .site-footer-cs .footer-social a[aria-label="TikTok"]:hover {background: #000; color: #fff;}

/* ===== footer-2 (다크 네이비 + 옐로우) ===== */
.site-footer--type2 .footer-social a::after {background: #fbbf24; color: #0f172a; font-weight: 600;}
.site-footer--type2 .footer-social a::before {border-top-color: #fbbf24;}
.site-footer--type2 .footer-social a[aria-label="YouTube"]:hover {background: #ff0000; color: #fff; transform: translateY(-2px);}
.site-footer--type2 .footer-social .footer-social-link--naver-blog:hover {background: #03c75a; color: #fff; transform: translateY(-2px);}
.site-footer--type2 .footer-social .footer-social-link--naver-cafe:hover {background: #2db400; color: #fff; transform: translateY(-2px);}
.site-footer--type2 .footer-social a[aria-label="Instagram"]:hover {background: linear-gradient(135deg, #f58529 0%, #dd2a7b 50%, #8134af 100%); color: #fff; transform: translateY(-2px);}
.site-footer--type2 .footer-social a[aria-label="Facebook"]:hover {background: #1877f2; color: #fff; transform: translateY(-2px);}
.site-footer--type2 .footer-social a[aria-label="TikTok"]:hover {background: #000; color: #fff; transform: translateY(-2px);}

/* ===== footer-3 (라이트 톤) ===== */
.site-footer--type3 .footer-social a::after {background: #0f172a; color: #fff;}
.site-footer--type3 .footer-social a::before {border-top-color: #0f172a;}
.site-footer--type3 .footer-social a[aria-label="YouTube"]:hover {background: #ff0000; color: #fff;}
.site-footer--type3 .footer-social .footer-social-link--naver-blog:hover {background: #03c75a; color: #fff;}
.site-footer--type3 .footer-social .footer-social-link--naver-cafe:hover {background: #2db400; color: #fff;}
.site-footer--type3 .footer-social a[aria-label="Instagram"]:hover {background: linear-gradient(135deg, #f58529 0%, #dd2a7b 50%, #8134af 100%); color: #fff;}
.site-footer--type3 .footer-social a[aria-label="Facebook"]:hover {background: #1877f2; color: #fff;}
.site-footer--type3 .footer-social a[aria-label="TikTok"]:hover {background: #000; color: #fff;}

/* ===== footer-4 (차콜/베이지) — 평상 무배경 → hover 배경+색 ===== */
.site-footer--type4 .footer-social a {background: rgba(255, 255, 255, 0.06); border-radius: 50%; transition: all .2s ease;}
.site-footer--type4 .footer-social a::after {background: #e07b39; color: #fff; font-weight: 600;}
.site-footer--type4 .footer-social a::before {border-top-color: #e07b39;}
.site-footer--type4 .footer-social a[aria-label="YouTube"]:hover {background: #ff0000; color: #fff;}
.site-footer--type4 .footer-social .footer-social-link--naver-blog:hover {background: #03c75a; color: #fff;}
.site-footer--type4 .footer-social .footer-social-link--naver-cafe:hover {background: #2db400; color: #fff;}
.site-footer--type4 .footer-social a[aria-label="Instagram"]:hover {background: linear-gradient(135deg, #f58529 0%, #dd2a7b 50%, #8134af 100%); color: #fff;}
.site-footer--type4 .footer-social a[aria-label="Facebook"]:hover {background: #1877f2; color: #fff;}
.site-footer--type4 .footer-social a[aria-label="TikTok"]:hover {background: #000; color: #fff;}

/* ============================================================
   footer-2 — 고객센터를 grid 우측 끝 컬럼으로 배치
   ============================================================ */
.site-footer--type2 .footer-cols > .footer-col--brand {grid-column: 1;}
.site-footer--type2 .footer-cols > .footer-col--cs {grid-column: 4;}

/* footer-2 — 좁은 화면 컬럼 반응형 collapse (4컬럼이 안 접혀 넘치던 문제) */
@media (max-width: 1023px) {
	.site-footer--type2 .footer-cols {grid-template-columns: 1fr 1fr; gap: 28px 32px;}
	.site-footer--type2 .footer-cols > .footer-col--brand,
	.site-footer--type2 .footer-cols > .footer-col--cs {grid-column: auto;}
}
@media (max-width: 767px) {
	.site-footer--type2 .footer-cols {grid-template-columns: 1fr; gap: 24px;}
	.site-footer--type2 .footer-col--cs,
	.site-footer--type2 .footer-col--cs .footer-col-title,
	.site-footer--type2 .footer-col--cs .footer-cs-tel,
	.site-footer--type2 .footer-col--cs .footer-cs-hours {text-align: left;}
	.site-footer--type2 .footer-col--cs .footer-certs {justify-content: flex-start;}
}

/* ============================================================
   footer-4 — 연락처를 grid 우측 끝 컬럼으로 배치
   ============================================================ */
.site-footer--type4 .footer-cols > .footer-col:last-of-type {grid-column: 3;}
.site-footer--type4 .footer-cols > .footer-rates {grid-column: 1;}

/* ============================================================
   footer-4 — 연락처 + 환율정보 모두 우측 정렬
   ============================================================ */
.site-footer--type4 .footer-cols {display: flex; flex-direction: column; align-items: flex-end; gap: 24px; grid-template-columns: none;}
.site-footer--type4 .footer-cols > * {text-align: right;}
.site-footer--type4 .footer-cols > .footer-col {grid-column: auto;}
.site-footer--type4 .footer-rates {grid-column: auto; justify-content: flex-end; flex-direction: row; align-items: center; gap: 20px;}