/* ============================================
   FOOTER_TOTAL - 통합 푸터 스킨
   화이트/블랙 테마 + 레이아웃 3종
   ============================================ */

/* ── CSS 변수 기본값 ── */
.FOOTER_TOTAL {
    --ft-font-menu: calc(var(--fs-p3, 14px) * 1.1);
    --ft-font-copy: calc(var(--tx-sm-size, 13px) * 0.9);
    --ft-sns-size: 30px;
    --ft-logo-height: 3.5rem;
    --ft-pad-top: 2.4rem;
    --ft-pad-bottom: 2.4rem;
    --ft-margin-top: 0;
    --ft-topline-color: #dadaed;
}

/* ============================================
   화이트 테마 (기본)
   ============================================ */
.FOOTER_TOTAL[data-footer-theme="white"] {
    --ft-bg: var(--ft-bg-custom, #fff);
    --ft-text: #333;
    --ft-text-sub: rgba(102, 102, 102, 1.0);
    --ft-menu-color: #000;
    --ft-border: #dadaed;
    --ft-btn-bg: #edf1f6;
    --ft-btn-color: #000;
    --ft-select-bg: #fff;
    --ft-select-color: #333;
    --ft-select-border: #ddd;
    --ft-logo-filter: none;
    --ft-icon-filter: none;
    --ft-menu-bg: transparent;
}

/* ============================================
   블랙 테마
   ============================================ */
.FOOTER_TOTAL[data-footer-theme="black"] {
    --ft-bg: #333;
    --ft-text: #e0e0e0;
    --ft-text-sub: rgba(200, 200, 200, 0.85);
    --ft-menu-color: #fff;
    --ft-border: #555;
    --ft-btn-bg: #444;
    --ft-btn-color: #fff;
    --ft-select-bg: #444;
    --ft-select-color: #fff;
    --ft-select-border: #666;
    --ft-logo-filter: brightness(0) invert(1);
    --ft-icon-filter: brightness(0) invert(1);
    --ft-menu-bg: transparent;
}


/* ============================================
   공통 구조
   ============================================ */

/* ── 기본 레이아웃 ── */
.FOOTER_TOTAL {
    margin-top: var(--ft-margin-top);
    padding-top: var(--ft-pad-top);
    padding-bottom: var(--ft-pad-bottom);
    background: var(--ft-bg);
    width: 100%;
    float: left;
}
.FOOTER_TOTAL .footer-container {
    position: relative;
}

/* ── topline: 전체 풀와이드 (FOOTER_TOTAL에 border-top) ── */
.FOOTER_TOTAL.ft-topline-full {
    border-top: 1px solid var(--ft-topline-color);
}
/* ── topline: inner 컨테이너 (footer-container에 border-top) ── */
.FOOTER_TOTAL .footer-container.ft-topline-inner {
    border-top: 1px solid var(--ft-topline-color);
    padding-top: 20px;
}

/* ── footer-wrap (레이아웃 컨테이너) ── */
.FOOTER_TOTAL .footer-wrap {
    display: flex;
    align-items: flex-start;
    position: relative;
}

/* ── footer-left ── */
.FOOTER_TOTAL .footer-left {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

/* ── footer-right ── */
.FOOTER_TOTAL .footer-right {
    position: absolute;
    right: 0;
    top: 0;
    display: flex;
    align-items: center;
    gap: 20px;
}
/* 가로 정렬 (기본) */
.FOOTER_TOTAL .footer-right.ft-right-row {
    flex-direction: row;
    align-items: center;
}
/* 세로 정렬 */
.FOOTER_TOTAL .footer-right.ft-right-column {
    flex-direction: column;
    align-items: flex-end;
    gap: 12px;
}

/* ── 메뉴 ── */
.FOOTER_TOTAL .footer-menulist {
    width: 100%; float: left; display: flex; align-items: center;
    flex-wrap: wrap; flex-direction: row; padding: 10px 0 20px;
    background: var(--ft-menu-bg);
}
.FOOTER_TOTAL .footer-menulink span,
.FOOTER_TOTAL .footer-menulink a,
.FOOTER_TOTAL .footer-menulink {
    color: var(--ft-menu-color);
}
.FOOTER_TOTAL .footer-menulink span {
    padding: 0 1.2rem;
    font-size: var(--ft-font-menu);
    cursor: pointer;
    background: transparent !important;
    font-weight: 500;
    letter-spacing: -1px;
}
.FOOTER_TOTAL .footer-menulink:first-child span { padding-left: 0; }

/* ── indiv (로고+관리자) ── */
.FOOTER_TOTAL .indiv {
    width: 100%; float: left;
    display: flex; justify-content: flex-start; align-items: center;
    flex-direction: row; box-sizing: border-box;
}
.FOOTER_TOTAL .indiv .footer-logo { margin-right: 30px; }
.FOOTER_TOTAL .indiv .footer-logo img {
    height: var(--ft-logo-height) !important;
    object-fit: contain;
    filter: var(--ft-logo-filter);
}
/* 듀얼 로고 */
.FOOTER_TOTAL .footer-logo-dual { display: flex; align-items: center; }
/* 듀얼 로고: 가로 정렬 (기본) */
.FOOTER_TOTAL .footer-logo-dual-row { flex-direction: row; align-items: center; }
/* 듀얼 로고: 세로 정렬 */
.FOOTER_TOTAL .footer-logo-dual-column { flex-direction: column; align-items: flex-start; }
.FOOTER_TOTAL .footer-logo-dual-column .footer-logo-divider {
    width: 60px; height: 1px; margin: 8px 0;
}
.FOOTER_TOTAL .footer-logo-divider {
    width: 1px; height: 20px;
    background: var(--ft-text-color, rgba(0,0,0,0.12));
    opacity: 0.2; margin: 0 12px; flex-shrink: 0;
}
.FOOTER_TOTAL .footer-logo-dual > a + a img,
.FOOTER_TOTAL .footer-logo2-html img {
    height: var(--ft-logo-height) !important;
    object-fit: contain;
    filter: var(--ft-logo-filter);
}

/* ── 관리자 버튼 ── */
.FOOTER_TOTAL .setting_icon {
    width: auto; padding: 10px 20px;
    background-color: var(--ft-btn-bg);
    border-radius: 50px;
    font-size: var(--ft-font-menu);
    color: var(--ft-btn-color);
    font-weight: 500; letter-spacing: -1px;
}
.FOOTER_TOTAL .set-right {
    display: flex; gap: 10px; align-items: center;
}

/* ── 텍스트 그룹 (주소/카피) ── */
.FOOTER_TOTAL .footer-txtgroup {
    margin-top: 2rem; position: relative;
    display: flex; flex-direction: row;
}
.FOOTER_TOTAL .footer-txtgroup,
.FOOTER_TOTAL .footer-txtgroup p,
.FOOTER_TOTAL .footer-txtgroup span,
.FOOTER_TOTAL .footer-txtgroup a,
.FOOTER_TOTAL .footer-txtgroup strong,
.FOOTER_TOTAL .footer-txtgroup em,
.FOOTER_TOTAL .footer-txtgroup div {
    color: var(--ft-text-sub);
}
.FOOTER_TOTAL .footer-txt {
    color: var(--ft-text-sub);
    font-size: var(--ft-font-copy);
    font-weight: 500; letter-spacing: -1px;
}
.FOOTER_TOTAL .footer-txt p {
    margin-bottom: 5px; float: left; letter-spacing: 0;
    font-size: var(--ft-font-copy);
    font-weight: 500; line-height: 130%; margin-right: 15px;
    color: var(--ft-text-sub);
}
.FOOTER_TOTAL .footer-txt p+p { margin-left: 0.4rem; }
.FOOTER_TOTAL .footer-txt p span+span { margin-left: 0.4rem; }

/* ── SNS ── */
.FOOTER_TOTAL .footer-snslist {
    display: flex; align-items: center; gap: 10px;
}
.FOOTER_TOTAL .footer-snsitem { list-style: none; }
.FOOTER_TOTAL .footer-snsitem .wg_img_box { display: flex; flex-direction: row; }
.FOOTER_TOTAL .footer-snsitem .wg_img1 img,
.FOOTER_TOTAL .footer-snsitem .wg_img2 img,
.FOOTER_TOTAL .footer-snsitem img {
    width: var(--ft-sns-size); height: var(--ft-sns-size);
    object-fit: contain;
    filter: var(--ft-icon-filter);
}
.FOOTER_TOTAL .footer-snslist i,
.FOOTER_TOTAL .footer-snslist svg {
    color: var(--ft-menu-color);
    fill: var(--ft-menu-color);
}
.FOOTER_TOTAL .footer-snsitem .wg_txt_box { display: none; }

/* ── 셀렉트(패밀리) ── */
.FOOTER_TOTAL .selectset { max-width: 18rem; height: 4rem; }
.FOOTER_TOTAL .selectset .btn { display: flex; align-items: center; }
.FOOTER_TOTAL .selectset .selectset-toggle,
.FOOTER_TOTAL .selectset select {
    background: var(--ft-select-bg);
    color: var(--ft-select-color);
    border-color: var(--ft-select-border);
}

/* ── 커스텀 박스 ── */
.FOOTER_TOTAL .footer-custom-box {
    display: flex; align-items: center;
    width: var(--ft-custom-box-width, auto);
    position: var(--ft-custom-position, static);
    top: var(--ft-custom-top, auto);
    right: var(--ft-custom-right, auto);
    bottom: var(--ft-custom-bottom, auto);
}

/* ── 모달 (개인정보) ── */
.FOOTER_TOTAL .footer-modal {
    width: 100%; height: 100%; position: fixed; top: 0; left: 0;
    z-index: 9999; transition: opacity 0.3s, visibility 0.3s;
    overflow-y: auto; background: rgba(0,0,0,0.3);
    display: flex; align-items: center; justify-content: center;
    padding: 2.4rem; opacity: 0; visibility: hidden;
}
.FOOTER_TOTAL .footer-modal.block-active { opacity: 1; visibility: visible; }


/* ============================================
   레이아웃 1: 메뉴 → 로고|관리자 → 카피 (기본)
   ============================================ */
.FOOTER_TOTAL .ft-layout_1 .footer-left {
    flex-direction: column;
    align-items: flex-start;
}
.FOOTER_TOTAL .ft-layout_1 .indiv {
    flex-direction: row;
    align-items: center;
}


/* ============================================
   레이아웃 2: 로고 absolute left + 나머지 padding-left
   ============================================ */
.FOOTER_TOTAL .ft-layout_2 .footer-left {
    position: relative;
    padding-left: var(--ft-logo-area-width, clamp(150px, 15vw, 250px));
    flex-direction: column;
    align-items: flex-start;
}
.FOOTER_TOTAL .ft-layout_2 .indiv {
    position: absolute;
    left: 0;
    top: 0;
    flex-direction: column;
    align-items: flex-start;
}
.FOOTER_TOTAL .ft-layout_2 .indiv .footer-logo {
    margin-right: 0; margin-bottom: 10px;
}
.FOOTER_TOTAL .ft-layout_2 .footer-menulist {
    padding-top: 0; padding-bottom: 10px;
}
.FOOTER_TOTAL .ft-layout_2 .footer-txtgroup {
    margin-top: 0.5rem;
}


/* ============================================
   레이아웃 3: 중앙 정렬 (세로 배치)
   왼쪽: width 100% 중앙정렬
   우측: 공통 absolute right:0 그대로 유지
   ============================================ */
.FOOTER_TOTAL .ft-layout_3 .footer-left {
    width: 100%;
    align-items: center;
    text-align: center;
}
.FOOTER_TOTAL .ft-layout_3 .footer-menulist {
    justify-content: center;
    width: 100%;
}
.FOOTER_TOTAL .ft-layout_3 .indiv {
    justify-content: center;
    width: 100%;
}
.FOOTER_TOTAL .ft-layout_3 .indiv .footer-logo {
    margin-right: 0;
}
.FOOTER_TOTAL .ft-layout_3 .indiv .set {
    justify-content: center !important;
    width: 100%;
}
.FOOTER_TOTAL .ft-layout_3 .footer-txtgroup {
    justify-content: center;
    text-align: center;
    width: 100%;
}
/* footer-right: 공통 absolute 유지 (별도 오버라이드 없음) */


/* ============================================
   퀵메뉴 (W_FOOTER1 그대로)
   ============================================ */
.sns_btn_box { position: fixed; right: 6rem; bottom: 4rem; z-index: 5099; display: none; }
.sns_btn_box.view { display: block !important; }
.sns_btn_box .quick-menu {
    display: flex; align-items: center; justify-content: center;
    width: 8rem !important; height: 8rem !important;
    color: var(--secondary); border-radius: 50%;
    background: var(--white);
    box-shadow: 0 0.4rem 2rem rgba(0,0,0,0.1); transition: background 0.3s;
}
.sns_btn_box .quick-menu.active { color: #fff; background-color: var(--primary); }
.sns_btn_box .quick-menu i { display: flex; font-style: normal; color: var(--primary); }
.sns_btn_box .quick-menu.active i { color: #fff; }
.sns_btn_box .quick-menu i::before { font-size: 2.6rem; transition: color 0.3s, transform 0.3s; }
.sns_btn_box .quick-menu.active i::before { transform: rotate(45deg); }
.sns_btn_box .menu-list {
    position: absolute; right: 0; bottom: calc(100% + 1.2rem);
    opacity: 0; visibility: hidden;
    background: var(--white); border-radius: 0.6rem;
    box-shadow: 0 0.4rem 2rem rgba(0,0,0,0.1); transition: opacity 0.3s, visibility 0.3s;
}
.sns_btn_box .menu-list.active { opacity: 1 !important; visibility: visible; display: block; }
.sns_btn_box .menu-list a {
    display: flex; align-items: center; gap: 0.8rem;
    padding: 1.2rem 2rem; transition: color 0.3s;
}
.sns_btn_box .menu-list a:not(:last-child) { border-bottom: 1px solid var(--border-color); }

.footer-logo img { height: 3rem; object-fit: contain; }

/* quick_menu2 */
.quick_menu2 { position: fixed; top: 50%; right: 0; transform: translate(54rem, -50%); z-index: 50; transition: transform 0.3s; pointer-events: none; display: none; }
.quick_menu2.view { display: block; }
.quick_menu2:has(.quick-wrap.active) { transform: translate(0, -50%); }

/* quick_menu1 */
.quick_menu1 { position: fixed; right: 4rem; bottom: 4rem; z-index: 50; display: none; }
.quick_menu1.view { display: block; }


/* ============================================
   반응형: 모바일
   ============================================ */
@media only all and (max-width: 767px) {
    .FOOTER_TOTAL {
        --ft-logo-height: 4.5rem;
        --ft-sns-size: 22px;
    }
    .FOOTER_TOTAL .footer-wrap {
        flex-direction: column;
    }
    .FOOTER_TOTAL .footer-left {
        width: 100%; padding: 0;
        display: contents;
    }
    .FOOTER_TOTAL .footer-menulist {
        order: var(--ft-mo-order-menu, 1);
        width: 100%;
        text-align: var(--ft-mo-talign-menu);
        justify-content: var(--ft-mo-align-menu);
    }
    .FOOTER_TOTAL .indiv,
    .FOOTER_TOTAL .ft-layout_1 .indiv,
    .FOOTER_TOTAL .ft-layout_2 .indiv,
    .FOOTER_TOTAL .ft-layout_3 .indiv {
        order: var(--ft-mo-order-logo, 2);
        width: 100%;
        padding-bottom: 0;
        flex-direction: column;
        align-items: var(--ft-mo-align-logo, flex-start);
    }
    .FOOTER_TOTAL .footer-txtgroup {
        order: var(--ft-mo-order-text, 3);
        width: 100%;
        text-align: var(--ft-mo-talign-text);
    }
    .FOOTER_TOTAL .footer-right {
        position: var(--ft-mo-right-position, relative);
        right: auto; top: auto;
        width: 100%; gap: 5px;
        justify-content: var(--ft-mo-align-right, flex-start);
        order: var(--ft-mo-order-right, 4);
    }
    .FOOTER_TOTAL .indiv .footer-logo {
        margin-right: 0; margin-bottom: 0;
        width: fit-content;
    }
    .FOOTER_TOTAL .indiv .set {
        margin-top: 15px;
    }
    .FOOTER_TOTAL .footer-menulink span {
        line-height: 150%;
    }
    .FOOTER_TOTAL .selectset {
        max-width: 200px; height: 4rem; width: fit-content;
    }
    .FOOTER_TOTAL .topline:before { left: 10px; }
    .FOOTER_TOTAL .topline:after { right: 10px; }

    .footer-txt p span {
        line-height: 120% !important; font-weight: 500; font-size: 12px !important;
    }

    /* 모바일에서 레이아웃2도 세로 */
    .FOOTER_TOTAL .ft-layout_2 .footer-left {
        flex-direction: column;
        padding-left: 0;
        gap: 0;
    }
    .FOOTER_TOTAL .ft-layout_2 .indiv {
        position: relative;
        left: auto; top: auto;
    }
    /* 모바일에서 듀얼 로고: 설정값 유지 (강제 변경 안 함) */

    /* 모바일 커스텀 박스 위치 (!important = inline style 및 PC값 오버라이드) */
    .FOOTER_TOTAL .footer-custom-box {
        display: var(--ft-mo-custom-display, flex) !important;
        position: var(--ft-mo-custom-position, static) !important;
        top: var(--ft-mo-custom-top, auto) !important;
        right: var(--ft-mo-custom-right, auto) !important;
        bottom: var(--ft-mo-custom-bottom, auto) !important;
        left: var(--ft-mo-custom-left, auto) !important;
        width: var(--ft-mo-custom-box-width, 100%) !important;
    }

    /* 모바일 커스텀박스 상대위치 (맨위/맨밑) - footer-right 해체하여 독립 배치 */
    .FOOTER_TOTAL.ft-mo-custom-flow .footer-right {
        display: contents;
    }
    .FOOTER_TOTAL.ft-mo-custom-flow .footer-snslist,
    .FOOTER_TOTAL.ft-mo-custom-flow .set-right,
    .FOOTER_TOTAL.ft-mo-custom-flow .footer-right > .selectset {
        order: var(--ft-mo-order-right, 4) !important;
    }
    .FOOTER_TOTAL.ft-mo-custom-flow .footer-snslist {
        width: 100%;
        justify-content: var(--ft-mo-align-right, flex-start);
    }
    .FOOTER_TOTAL.ft-mo-custom-flow .footer-custom-box {
        order: var(--ft-mo-custom-order, 99) !important;
        width: var(--ft-mo-custom-box-width, 100%) !important;
        position: static !important;
    }

    /* 퀵메뉴 모바일 */
    .sns_btn_box { right: 2.4rem; bottom: 2rem; }
    .sns_btn_box .quick-menu { width: 6rem; height: 6rem; }
    .quick_menu2 { display: none; }
    .quick_menu1 { right: 0; bottom: 0; width: 100%; }
    .quick_menu1 .quick-menu { width: 100%; }
    .quick_menu1 .menu-list { display: flex; }
    .quick_menu1 .menu-list li { flex: 1; }
    .quick_menu1 .menu-list a { gap: 0.4rem; width: 100%; height: 8rem; }
}

@media (max-width: 992px) {
    .FOOTER_TOTAL {
        padding-top: var(--ft-mo-pad-top, 1rem);
        padding-bottom: var(--ft-mo-pad-bottom, 40px);
    }
    .FOOTER_TOTAL .footer-txtgroup { margin-top: 0; }
    .FOOTER_TOTAL .footer-txt { flex-direction: column; }
}