/* BASIC css start */
#footer {
    background: #425b51 !important;
    padding: 25px 0;
    color: #FFFFFF;
}

#footer .container-wrap {
    display: flex;
    flex-direction: column;
    margin: 0 auto;
    gap: 20px;
    box-sizing: border-box;
}

#footer .bar-list-wrap {
    display: flex;
    gap: 21px;
}

/* 💡 모바일 회사소개, 이용안내 등 하단 텍스트 흰색 강제 적용 */
#footer .bar-list-wrap li,
#footer .bar-list-wrap a,
#footer .item-box.top .bar-list-wrap a {
    color: #D5D5D5 !important;
}

#footer .bar-list-wrap + .bar-list-wrap {
    margin-top: 4px;
}

#footer .bar-list-wrap > li {
    position: relative;
    font-weight: 400;
    font-size: 12px;
}

#footer .bar-list-wrap > li + li:before {
    content: '';
    width: 1px;
    height: 8px;
    position: absolute;
    left: -10px;
    top: 50%;
    transform: translateY(-50%);
    background: #FFFFFF;
}

#footer .logo-footer img{
    width:220px;
}

#footer .copy {
    margin-top: 14px;
    color: #BBBBBB;
    font-weight: 400;
    font-size: 12px;
}







#footer .item-box.bottom ul li {
    font-size: 12px !important;
    color: #BBBBBB !important; /* 기본 글자색을 회색으로 꽉 잡아줌 */
}

#footer .item-box.bottom ul li a {
    display: block;
    font-weight: 400;
    font-size: 12px;
    color: #BBBBBB;
}

#footer .item-box.center p {
    font-weight: 400;
    font-size: 12px;
    margin-bottom: 8px;
}

#footer .item-box.center strong {
    display: block;
    font-weight: 800;
    font-size: 18px;
    margin-bottom: 10px;
}

#footer .item-box.bottom {
    margin-top: 20px;
}




/* ===========================
   여기서부터 PC 화면 전용 디자인
   =========================== */
@media (min-width: 768px) {
    #footer {
        background: var(--color-default);
        padding: 50px 0;
        color: #FFFFFF;
    }

    #footer .container-wrap {
        display: flex;
        max-width: 1760px;
        margin: 0 auto;
        gap: 20px;
        box-sizing: border-box;
        flex-direction: row;
        justify-content: space-around;
    }

    #footer .container-wrap .item-box.center {
        min-width: 90px;
    }

    #footer .logo-footer {
        display: inline-block;
        margin-bottom: 20px;
    }

    #footer .logo-footer a {
        display: block;
    }

    #footer .bar-list-wrap {
        display: flex;
        flex-wrap: wrap;
        gap: 4px 21px;
    }

    #footer .bar-list-wrap + .bar-list-wrap {
        margin-top: 4px;
    }

    #footer .bar-list-wrap > li {
        position: relative;
        font-weight: 400;
        font-size: 12px;
        line-height: 1.2;
    }

    #footer .bar-list-wrap > li + li:before {
        content: '';
        width: 1px;
        height: 8px;
        position: absolute;
        left: -10px;
        top: 50%;
        transform: translateY(-50%);
        background: #FFFFFF;
    }

    #footer .copy {
        margin-top: 0px;
        color: #BBBBBB;
        font-weight: 400;
        font-size: 12px;
    }

    #footer .item-box.center ul li + li {
        margin-top: 12px;
    }

    #footer .item-box.center ul li a {
        display: block;
        font-weight: 400;
        font-size: 12px;
        color: #FFFFFF;
    }

    #footer .item-box.right p {
        font-weight: 400;
        font-size: 12px;
        margin-bottom: 12px;
    }

    #footer .item-box.right strong {
        display: block;
        font-weight: 800;
        font-size: 18px;
        margin-bottom: 3px;
    }
}

/* 대표자, 주소, 개인정보책임자 흰색 강제 적용 */
#footer .text-white,
#footer .text-white strong {
    color: #FFFFFF !important;
}


/* ================================================================
   카카오 상담 플로팅 (전 페이지 공통) — 2026-07-28
   자사몰 상담 창구를 카카오 채널로 일원화한다. 채널톡 웹채팅을 대체.
   마크업은 footer.js가 만든다(HTML 탭 미개입 · JS 실패 시 아무것도 안 그려짐).
   ================================================================ */

/* 채널톡 위젯은 여기서 숨기지 않는다.
   자사몰 웹채팅 폐지(대표 결정 2026-07-28)는 **채널톡 관리자 설정의 버튼 숨기기**로
   처리했다. CSS로 `#ch-plugin`을 숨기려는 시도는 실패했다 — 채널톡 스크립트가 런타임에
   <style>로 `#ch-plugin { display:block !important }`를 선언하는데, 명시도가 같고(#id)
   둘 다 !important라 나중에 선언되는 쪽이 항상 이긴다(2026-07-28 라이브 실측).
   서드파티 위젯은 CSS로 이기려 하지 말고 그 위젯의 관리자 설정을 쓴다. */

#pc21-kakao-fab {
    position: fixed;
    right: 16px;
    bottom: 24px;
    z-index: 9998;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s ease, bottom .2s ease;
}

#pc21-kakao-fab[data-pc21-ready="true"] {
    opacity: 1;
    visibility: visible;
}

/* 모바일 상세의 sticky 구매바(실측 61px) 위로 띄운다 */
#pc21-kakao-fab[data-pc21-lift="true"] { bottom: 76px; }

#pc21-kakao-fab .pc21-kfab-btn {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #597051;
    box-shadow: 0 4px 14px rgba(43, 61, 47, .28);
    cursor: pointer;
    transition: background .18s ease, transform .18s ease;
}

#pc21-kakao-fab .pc21-kfab-btn:hover {
    background: #4a5f44;
    transform: translateY(-2px);
}

#pc21-kakao-fab .pc21-kfab-btn:focus-visible {
    outline: 3px solid rgba(89, 112, 81, .45);
    outline-offset: 2px;
}

#pc21-kakao-fab .pc21-kfab-btn svg {
    display: block;
    width: 26px;
    height: 26px;
}

/* 상황 말풍선 — 신호가 분명할 때만 뜬다 */
#pc21-kakao-fab .pc21-kfab-bubble {
    position: relative;
    max-width: 212px;
    margin: 0 2px 8px 0;
    padding: 11px 30px 11px 14px;
    border-radius: 14px 14px 4px 14px;
    background: #FFFFFF;
    box-shadow: 0 4px 16px rgba(43, 61, 47, .18);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.45;
    letter-spacing: -.2px;
    color: #2b3d2f;
    text-align: left;
    opacity: 0;
    transform: translateY(6px);
    pointer-events: none;
    transition: opacity .28s ease, transform .28s ease;
}

#pc21-kakao-fab[data-pc21-bubble="on"] .pc21-kfab-bubble {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

#pc21-kakao-fab .pc21-kfab-close {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 21px;
    height: 21px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #8a8f88;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
}

#pc21-kakao-fab .pc21-kfab-close:hover {
    background: #f2f6f0;
    color: #2b3d2f;
}

@media (max-width: 767.98px) {
    #pc21-kakao-fab { right: 12px; bottom: 20px; }
    #pc21-kakao-fab[data-pc21-lift="true"] { bottom: 72px; }
    #pc21-kakao-fab .pc21-kfab-btn { width: 50px; height: 50px; }
    #pc21-kakao-fab .pc21-kfab-btn svg { width: 24px; height: 24px; }
    #pc21-kakao-fab .pc21-kfab-bubble { max-width: 184px; font-size: 12.5px; }
}

@media (prefers-reduced-motion: reduce) {
    #pc21-kakao-fab,
    #pc21-kakao-fab .pc21-kfab-btn,
    #pc21-kakao-fab .pc21-kfab-bubble { transition: none; }
}
/* BASIC css end */