/* BASIC css start */
/* =====================================================================
   푸터 (#footer) + 우측 하단 플로팅 버튼 (.floating)
   ---------------------------------------------------------------------
   구성 순서
     1. #footer 최외곽 박스
     2. footer_main 중앙 정렬 컨테이너 (float 2단 - Left/Right)
     3. footerLeft - 정책 링크 / 카피라이트
     4. footerRight - 안내 텍스트
     5. 사업자정보확인 버튼 (.businfo)
     6. 에스크로 마크 (.escrow)
     7. 플로팅 버튼 그룹 (.floating) - 스크롤 시 서서히 나타남
   ===================================================================== */


/* =====================================================================
   1. #footer 최외곽 박스
   ===================================================================== */

#footer {
    margin-top: 110px;
    padding: 30px 0 40px;
    position: relative;
    width: 100%;
    background: #fff;
    border-top: 1px solid #e5e8eb;   /* 본문과 구분하는 얇은 상단 경계선 */
}


/* =====================================================================
   2. footer_main 컨테이너 (1240 중앙 정렬, 내부 Left/Right float 2단)
   ===================================================================== */

#footer .footer_main { position: relative; width: 1240px; margin: 0 auto; }
#footer .footer_main:after { display: block; clear: both; content: ''; }   /* float 자식(Left/Right) clearfix */


/* =====================================================================
   3. footerLeft - 정책 링크 목록 + 카피라이트
   ===================================================================== */

#footer .footer_main .footerLeft { float: left; }

/* 이용약관/개인정보처리방침 등 링크 목록 - flex로 가로 나열 */
#footer .footer_main .footerLeft .linkInfo { margin-bottom: 20px; }
#footer .footer_main .footerLeft .linkInfo ul { display: flex; }
#footer .footer_main .footerLeft .linkInfo ul li { margin-right: 26px; }
#footer .footer_main .footerLeft .linkInfo ul li a { font-size: 15px; letter-spacing: 0.5px; color: #222; display: block; line-height: 23px; }

/* 저작권 표시 (연한 회색) */
#footer .footer_main .copy { margin: 20px 0 12px; color: #b0b8c1; font-size: 14px; letter-spacing: 0.7px; }
/* 회사 정보(주소/사업자번호 등) - copy보다 진한 색 */
#footer .footer_main .copyInfo { color: #222; font-size: 13px; letter-spacing: 0.7px; }


/* =====================================================================
   4. footerRight - 안내 텍스트 (전화번호/이메일 등)
   ===================================================================== */

#footer .footer_main .footerRight { float: right; }

/* ⚠ 선택자 오류: 콤마로 이어진 `.btn_email`이 #footer 하위가 아니라 전역(global) 선택자가 되어버림
   → 의도는 `#footer .footer_main .btn_email`이었을 가능성이 높음. 지금은 페이지 어디든 .btn_email 클래스면 다 적용됨 */
#footer .footer_main .tx, .btn_email { line-height: 23px; color: #6b7684; font-size: 13px; }

#footer .footer_main .tx span { margin-right: 15px; letter-spacing: 0.7px; }

/* ⚠ 문법 오류: `23px;` 앞에 속성명이 빠짐 (예: width:23px 또는 line-height:23px 의도로 보이나 미완성)
   → 유효하지 않은 선언이라 브라우저가 이 한 줄만 무시하고 넘어감(치명적 오류는 아님) */
#footer .footer_main .tx span a { 23px; color: #6b7684; text-decoration: underline; }


/* =====================================================================
   5. 사업자정보확인 버튼 (.businfo)
      공정위 사업자정보 확인 페이지로 연결되는 밑줄 버튼
   ===================================================================== */

.businfo a { display: inline-block; padding: 0 2px 2px; border-bottom: 1px solid #424242; color: #424242; }


/* =====================================================================
   6. 에스크로 마크 (.escrow)
      footer_main 우측 바깥으로 튀어나가게 배치 (음수 right 값)
   ===================================================================== */

.escrow { position: absolute; right: -173px; }


/* =====================================================================
   7. 플로팅 버튼 그룹 (.floating)
      화면 우측 하단 고정, 인스타/카카오/최근본상품/맨위로 버튼 묶음.
      평소엔 투명하게 숨어있다가 스크롤 시 JS가 .on 클래스를 붙이면
      부드럽게 페이드인 되는 구조. (표시/숨김 로직 자체는 JS 담당)
   ===================================================================== */

.floating {
    position: fixed;
    bottom: 10%;
    right: 7%;
    z-index: 999;
    visibility: hidden;             /* 평소 숨김 */
    opacity: 0;
    transition: visibility 0s, opacity 0.5s linear;   /* 나타날 때만 서서히(0.5s) 페이드, 사라질 땐 즉시 */
}
/* 스크롤 일정 지점 지나면 JS가 이 클래스를 붙여서 노출시킴 */
.floating.on { visibility: visible; opacity: 1; }

/* ----- 개별 버튼 공통 스타일 (원형 버튼, 아이콘 중앙정렬) ----- */
.floating > div a {
    display: block;
    width: 48px;
    height: 48px;
    background-color: #ffffff;
    border-radius: 100%;            /* 완전한 원형 */
    margin-top: 10px;                /* 버튼 사이 세로 간격 */
    box-shadow: 0 0 15px rgba(0,0,0,0.1);

    background-repeat: no-repeat !important;
    background-position: center center !important;   /* 아이콘 중앙 배치 */
    background-size: auto !important;                 /* 아이콘 원본 크기 그대로 유지(늘리지 않음) */
}

/* ----- 개별 아이콘 지정 ----- */
.floating > div.instar a { background-image: url('/design/mpmall2025/Img/icon_instar.png'); }   /* 인스타그램 */
.floating > div.kakao a {
    background-color: #eedd44;      /* 카카오 브랜드 컬러(노랑)로 배경 덮어씀 */
    background-image: url('/design/mpmall2025/Img/icon_kakao.png');
}
.floating > div.recent a { background-image: url('/design/mpmall2025/Img/icon_recent.png'); }   /* 최근 본 상품 */
.floating > div.arrow a { background-image: url('/design/mpmall2025/Img/icon_up.png'); }        /* 맨 위로 이동 */
/* BASIC css end */