/* layout/footer.css — 부모 컴포넌트 오버라이드
   로드 순서: 부모 archf-* → common → animation → layout/* → page/{슬러그} */

/* ── 푸터 ── */

/* 부모가 정의하지 않는 변수 — 푸터의 강조색 한 지점.
   SNS hover · `T :`/`E :` 라벨 · 위젯 링크 hover 가 이 값을 쓴다.
   (부모의 하단 가로줄 메뉴도 쓰지만 그 줄은 제거했다 — 아래 .ft-nav-list 참고)
   어두운 푸터 배경에서는 --main-color(짙은 갈색)가 묻혀 --sub-color01 로 뺀다 */
.site-footer {
    --footer-accent: var(--sub-color01);
}

/* 헤더와 좌우 폭 통일 — 부모가 `padding: 0 var(--container-padding)` 로 쓰는데
   변수값이 `0 24px` 라 `padding: 0 0 24px` 로 펼쳐져 좌우 패딩이 0 이 된다.
   그래서 같은 max-width(1680) 인데도 푸터만 32px 넓게 보였다.
   .container(layout/base.css) 와 같은 값을 직접 지정한다 */
.site-footer__bar-inner,
.site-footer__nav-row .container {
    padding-right: var(--one-gap-r);
    padding-left: var(--one-gap-r);
}

@media (max-width: 639px) {
    .site-footer__bar-inner,
    .site-footer__nav-row .container {
        padding-right: var(--one-space-safe);
        padding-left: var(--one-space-safe);
    }
}

.site-footer__bar-inner{
    align-items: stretch;
}
.site-footer__right{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
@media (max-width: 1023px) {
    .site-footer__bar {
        padding: 2rem var(--one-space-safe) 5rem;
    }
}

/* ── 푸터 메뉴 — 부모의 하단 가로줄 대신 오른쪽 열에 둔다 ──
   이용약관 / 개인정보처리방침 / 웹블로그. 항목은 「메뉴 → 푸터 메뉴」에서 관리 */
.site-footer__right .ft-nav-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--one-gap-sm) var(--one-gap-r);
    margin: 0 0 0.5rem;
    padding: 0;
    list-style: none;
}

.site-footer__right .ft-nav-list a {
    font-size: 0.8125rem;
    line-height: 1.7;
    color: var(--footer-text, #fff);
    text-decoration: none;
    transition: color 0.25s;
}

.site-footer__right .ft-nav-list a:hover,
.site-footer__right .ft-nav-list a:focus-visible {
    color: var(--sub-color03);
}

/* 부모가 이 구간에서 오른쪽 열을 왼쪽 정렬로 뒤집는다 (.site-footer__right{text-align:left},
   .site-footer__sns{justify-content:flex-start}). 메뉴도 같이 넘어가야 혼자 오른쪽에 남지 않는다 */
@media (max-width: 1023px) {
    .site-footer__right .ft-nav-list {
        justify-content: flex-start;
    }
}

/* 맨 위로 버튼 — 부모는 55%/55%, 아이콘이 커서 33% 로 줄이고 높이는 비율에 맡긴다 */
.back-to-top__icon {
    width: 33%;
    height: auto;
    display: block;
    flex-shrink: 0;
}