/* 공개 푸터 — 다크 바 · 상단 로고/유틸 · 구분선 · 주소+내비 · 저작권
 * `.footer-content` 가로 규칙은 header.css `.public-header` 의 `--hdr-layout-max` / `--hdr-inline-pad` 와 동일 값 유지.
 */

.footer.site-footer {
    /* main.css #mainContent 등과 동일 — clamp(calc(100vw * N / ref)) 용 */
    --layout-ref-width: 1920;
    margin-top: 0;
    background-color: #1a1a1c;
    color: #fafafa;
    padding: clamp(28px, 4vw, 40px) 0 clamp(20px, 3vw, 40px);
    flex-shrink: 0;
    overflow: visible;

    .site-footer__inner.footer-content {
        max-width: calc(1320px + (clamp(20px, 4vw, 40px) * 2));
        margin: 0 auto;
        padding: 0 clamp(20px, 4vw, 40px);
        box-sizing: border-box;
    }

    /* ── 상단: 로고 · 외부링크 · 언어 */
    .site-footer__top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        flex-wrap: wrap;
        padding-bottom: clamp(18px, 2.5vw, 24px);
        overflow: visible;
        position: relative;
        z-index: 1;

        @media (max-width: 768px) {
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
            flex-wrap: nowrap;
            gap: 12px;
        }
    }

    .site-footer__logo {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        text-decoration: none;
        color: inherit;

        .logo-image {
            display: block;
            height: auto;
            width: auto;
            max-height: 34px;
            max-width: min(152px, 48vw);
            flex-shrink: 0;

            @media (max-width: 768px) {
                width: 60px;
                height: 16px;
                max-width: 60px;
                max-height: 16px;
                object-fit: contain;
            }
        }
    }

    .site-footer__top-right {
        display: flex;
        align-items: center;
        gap: clamp(12px, 2vw, 20px);
        margin-left: auto;

        @media (max-width: 768px) {
            margin-left: 0;
            width: auto;
            flex-shrink: 0;
            justify-content: flex-end;
        }
    }

    .site-footer__external {
        position: relative;
        display: inline-flex;
        align-items: center;
        gap: 4px;
        font-weight: 600;
        font-size: clamp(14px, calc(100vw * 18 / var(--layout-ref-width)), 18px);
        color: #FFFFFF;
        line-height: 1.4;
        text-decoration: none;
        white-space: nowrap;
        padding-bottom: 4px;
        transition: color 0.22s ease;

        /* 호버 밑줄 — pseudo 로 레이아웃 흔들림 없음 */
        &::after {
            content: '';
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            height: 2px;
            border-radius: 2px;
            background: rgba(255, 255, 255, 0.55);
            opacity: 0;
            transform: scaleX(0.96);
            transform-origin: center;
            transition:
                opacity 0.22s ease,
                transform 0.24s cubic-bezier(0.33, 1, 0.68, 1);
        }

        &:hover {
            color: #fff;

            &::after {
                opacity: 1;
                transform: scaleX(1);
            }

            .site-footer__external-icon {
                opacity: 1;
            }
        }
    }

    .site-footer__external-icon {
        flex-shrink: 0;
        opacity: 0.75;
    }

    @media (max-width: 768px) {
        padding-top: 60px;
        .site-footer__lang-dropdown.language-dropdown {
            display: none !important;
        }
    }

    /* ── 언어: 트리거 높이는 고정 · 목록은 absolute(푸터 상단 줄 높이 불변) */
    .site-footer__lang-dropdown.language-dropdown {
        position: relative;
        display: flex;
        flex-direction: column;
        width: 97px;
        flex-shrink: 0;
        box-sizing: border-box;
        background: #1c1b20;
        border: 1px solid #74757e;
        border-radius: 10px;
        overflow: visible;
        isolation: isolate;
        transition:
            border-color 0.15s ease,
            box-shadow 0.2s ease,
            border-radius 0.15s ease;
    }

    .site-footer__lang-dropdown.language-dropdown:hover {
        border-color: #8b8c96;
    }

    /* 펼침: 상자가 위·아래로 이어져 보이게(레이아웃은 패널이 밖이라 top 높이 동일) */
    .site-footer__lang-dropdown.language-dropdown:has(.lang-dropdown-panel:not([hidden])) {
        z-index: 1100;
        box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
        border-radius: 10px 10px 0 0;
        border-bottom-width: 0;
    }

    .site-footer__lang-dropdown.language-dropdown:hover:has(.lang-dropdown-panel:not([hidden]))
        .lang-dropdown-panel:not([hidden]) {
        border-color: #8b8c96;
    }

    .site-footer__lang-dropdown .lang-trigger {
        box-sizing: border-box;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        margin: 0;
        padding: 4px 16px;
        gap: 6px;
        width: 100%;
        height: 34px;
        border: none;
        border-radius: 0;
        background: transparent;
        color: #fff;
        font-weight: 600;
        font-size: 16px;
        line-height: 160%;
        cursor: pointer;
        transition:
            background 0.15s ease,
            opacity 0.15s ease;

        &:hover {
            background: rgba(255, 255, 255, 0.04);
        }

        &:focus-visible {
            outline: 2px solid rgba(255, 255, 255, 0.55);
            outline-offset: 2px;
        }
    }

    .site-footer__lang-dropdown .lang-globe-icon {
        flex-shrink: 0;
        display: block;
        width: 16px;
        height: 16px;
        pointer-events: none;
    }

    .site-footer__lang-dropdown .lang-trigger-label {
        flex: 0 0 auto;
        min-width: 0;
        pointer-events: none;
    }

    .site-footer__lang-dropdown .lang-trigger-chevron {
        flex-shrink: 0;
        display: block;
        margin-left: auto;
        pointer-events: none;
        transition: transform 0.2s ease;
    }

    /* 펼침: 현재 언어 줄(트리거)만 화살표 방향 전환 ∨ → ∧ */
    .site-footer__lang-dropdown .lang-trigger[aria-expanded='true'] .lang-trigger-chevron {
        transform: rotate(180deg);
    }

    /* 목록은 덮어 그려서 줄 높이에 안 잡음 */
    .site-footer__lang-dropdown .lang-dropdown-panel {
        position: absolute;
        left: -1px;
        top: 100%;
        min-width: 0;
        width: calc(100% + 2px);
        box-sizing: border-box;
        margin: 0;
        padding: 0;
        flex-direction: column;
        background: #1c1b20;
        border: 1px solid #74757e;
        border-top: none;
        border-radius: 0 0 10px 10px;
        box-shadow: none;
        z-index: 1;
    }

    .site-footer__lang-dropdown .lang-dropdown-panel:not([hidden]) {
        display: flex;
    }

    .site-footer__lang-dropdown .lang-dropdown-panel[hidden] {
        display: none !important;
    }

    /* 옵션 사이 라인만 (전체 카드 하나 느낌) */
    .site-footer__lang-dropdown .lang-dropdown-option:not(:first-of-type) {
        border-top: 1px solid rgba(116, 117, 126, 0.45);
    }

    .site-footer__lang-dropdown .lang-dropdown-option {
        box-sizing: border-box;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        gap: 6px;
        width: 100%;
        height: 34px;
        margin: 0;
        padding: 4px 16px;
        border: none;
        background: transparent;
        text-align: left;
        font-weight: 600;
        font-size: 16px;
        line-height: 160%;
        color: #fff;
        cursor: pointer;
        transition:
            background 0.15s ease,
            color 0.15s ease;

        &:hover {
            background: rgba(255, 255, 255, 0.08);
            color: #fff;
        }

    }

    .site-footer__lang-dropdown .lang-dropdown-option .lang-globe-icon {
        flex-shrink: 0;
        display: block;
        width: 16px;
        height: 16px;
        pointer-events: none;
    }

    .site-footer__lang-dropdown .lang-dropdown-option .lang-option-label {
        flex: 1 1 auto;
        min-width: 0;
        text-align: left;
        pointer-events: none;
    }

    /* ── 구분선 */
    .site-footer__rule {
        border: none;
        border-top: 1px solid rgba(255, 255, 255, 0.12);
        margin: 0;
    }

    /* ── 중단: 주소 · 내비 */
    .site-footer__mid {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(180px, 260px);
        gap: clamp(28px, 5vw, 48px);
        align-items: start;
        padding: clamp(24px, 3.5vw, 36px) 0 clamp(8px, 2vw, 12px);

        @media (max-width: 768px) {
            display: flex;
            flex-direction: column;
            gap: clamp(20px, 4vw, 28px);
        }
    }

    .site-footer__info.footer-address {
        margin: 0;
        font-weight: 400;
        font-size: 12px;
        line-height: 200%;
        color: #D8DCE1;
        text-align: left;

        @media (max-width: 768px) {
            order: 2;
        }
    }

    .site-footer__company {
        margin: 0 0 0.35em;
        font-weight: 700;
        font-size: 13px;
        line-height: 1.6;
        color: #fff;
    }

    .site-footer__lines {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .site-footer__lines li {
        display: flex;
        flex-wrap: wrap;
        gap: 0.35em 0.5em;
        align-items: baseline;
    }

    .site-footer__label {
        flex: none;
        font-weight: 700;
        color: #fff;
    }

    .site-footer__label::after {
        content: ' :';
        font-weight: 700;
    }

    .site-footer__value {
        font-weight: 400;
        color: #D8DCE1;
        min-width: 0;
    }

    .site-footer__contact {
        display: flex;
        flex-wrap: wrap;
        gap: 0.35em 1.25em;
        margin: 0.85em 0 0;
        padding: 0;
    }

    .site-footer__contact-item {
        display: inline-flex;
        flex-wrap: wrap;
        gap: 0.35em 0.5em;
        align-items: baseline;
    }

    .site-footer__biz {
        display: flex;
        flex-wrap: wrap;
        gap: 0.35em 0.5em;
        align-items: baseline;
        margin: 0.35em 0 0;
        padding: 0;
    }

    .site-footer__link {
        color: #D8DCE1;
        text-decoration: underline;
        text-underline-offset: 2px;
        text-decoration-color: rgba(216, 220, 225, 0.55);
        transition: color 0.15s ease, text-decoration-color 0.15s ease;

        &:hover,
        &:focus-visible {
            color: #fff;
            text-decoration-color: rgba(255, 255, 255, 0.8);
            outline: none;
        }
    }

    .site-footer__nav {
        @media (max-width: 768px) {
            width: 100%;
            order: 1;
        }

        ul {
            list-style: none;
            margin: 0;
            padding: 0;
        }

        li + li { margin-top: 2px; }

        a {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            padding: 10px 12px;
            font-size: 14px;
            font-weight: 500;
            color: #fff;
            text-decoration: none;
            transition: background 0.15s ease;

            @media (max-width: 768px) {
                padding: 10px 0px;
            }

            &:hover,
            &:focus-visible {
                background: rgba(255, 255, 255, 0.08);
                outline: none;
            }
        }
    }

    .site-footer__chev {
        flex: none;
        order: 1;
        flex-shrink: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        line-height: 0;
        opacity: 0.72;
    }

    /* viewBox 6×10 — 피그마 4.17px 등은 웹 1:1에선 거의 안 보임. 비율 유지해 실제 가독 크기로 */
    .site-footer__chev svg,
    .site-footer__chev-icon {
        display: block;
        margin: 0 auto;
        width: 10px;
        height: 17px;
        max-width: none;
        flex: none;
        flex-shrink: 0;
        overflow: visible;
        box-sizing: border-box;
    }

    /* ── 저작권 */
    .site-footer__copy.footer-copyright {
        margin: clamp(16px, 2.5vw, 22px) 0 0;
        padding: 0;
        font-size: 11px;
        line-height: 1.5;
        color: rgba(255, 255, 255, 0.42);
        text-align: left;
    }
}

@media (max-width: 768px) {
    .footer.site-footer .site-footer__chev svg,
    .footer.site-footer .site-footer__chev-icon {
        width: 8px;
        height: 13px;
    }
}

/* ── 페이지 셸: 푸터를 바닥에 고정 */
.main_footer_wrap {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.main {
    flex: 1;
}