@charset "utf-8";

/* =========================================================
   [ 본문 (Contents) 공통 강제 레이아웃 (왼쪽 쏠림 방지) ]
   ========================================================= */
#wrap { background-color: #fff; min-height: 600px; }

/* 그누보드의 기본 float:left 속성을 해제하고 중앙으로 정렬시킵니다 */
#container { 
    max-width: 1440px !important; 
    margin: 0 auto !important; 
    width: 100% !important; 
    box-sizing: border-box; 
    float: none !important; 
}
#contents { 
    padding: 50px 0; 
    float: none !important; 
}


/* =========================================================
   [ 푸터 공통 레이아웃 및 디자인 ]
   ========================================================= */
#footer { border-top: 1px solid #efefef; padding: 50px 0; background: #fff; width: 100%; clear: both; float: none !important; }
#footer .inner { max-width: 1440px; margin: 0 auto; padding: 0 50px; box-sizing: border-box; }

.footer-columns { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 40px; }

.footer-col { flex: 1; min-width: 180px; }
.footer-col.company-info { flex: 2; min-width: 300px; }

.footer-logo { max-height: 25px; width: auto; margin-bottom: 15px; display: block; }
.company-info .desc { color: #757575; line-height: 1.8; font-size: 13px; font-weight: 300; }
.company-info .desc .sep { color: #9a9a9a; }

.footer-col h3 { font-size: 17px; font-weight: bold; margin-bottom: 15px; color: #000; }
.customer-center .tel { font-size: 24px; font-weight: 700; color: #000; margin-bottom: 5px; font-family: sans-serif; }
.customer-center .time { color: #888; font-size: 13px; font-weight: 300; line-height: 1.8; margin-bottom: 20px; }

.bank-info .desc { color: #757575; line-height: 1.8; font-size: 13px; font-weight: 300; }
#footer .bank-info .bank-info-notice { display: inline-block; width: fit-content; max-width: 100%; margin-top: 12px; background-color: #f4f4f4 !important; color: #545454 !important; font-size: 13px; font-weight: 300; line-height: 1.8; padding: 10px 12px; box-sizing: border-box; }

.footer-copyright { margin-top: 50px; color: #757575; font-size: 14px; letter-spacing: 0.06em; }
.footer-copyright strong { color: inherit; }

/* 팝업 / 레이어 / 불필요한 기본 모바일바 등 제거 */
.dimmed, #layoutDimmed, .bottom-nav.RTMB, .worldshipLayer, #progressPaybar, .xans-layout-searchheader { display: none !important; }


/* =========================================================
   [ JJDD 우측 하단 플로팅 퀵 메뉴 ]
   ========================================================= */
.jjdd-floating-menu {
    position: fixed;
    bottom: 50px; /* 더 위로 이동 */
    right: 50px;  /* 더 왼쪽으로 이동 */
    display: flex;
    flex-direction: column; /* 세로로 배치 */
    gap: 12px; /* 버튼 사이 간격 */
    z-index: 9999;
}

/* 원형 버튼 공통 스타일 */
.jjdd-floating-menu .float-btn {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid #eee;
    /* ✨ 그림자 수정: 투명도를 0.1 -> 0.05로 줄여서 훨씬 은은하게 */
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    /* 붕 뜨는 transform 효과 삭제, 배경 전환 효과 추가 */
    transition: box-shadow 0.2s ease, background 0.2s ease;
    padding: 0;
    text-decoration: none;
    box-sizing: border-box;
    overflow: hidden; /* 이미지가 원형 밖으로 나가지 않도록 */
}

.jjdd-floating-menu .float-btn:hover {
    /* ✨ 마우스 오버 시 그림자도 은은하게 수정 */
    box-shadow: 0 5px 15px rgba(0,0,0,0.08); 
}

.jjdd-floating-menu .float-btn img {
    width: 24px; /* 내부에 들어갈 이미지 크기 */
    height: 24px;
    object-fit: contain;
    display: block;
    transition: opacity 0.2s ease; /* 투명도 변경이 부드럽게 되도록 트랜지션 추가 */
}

/* 첫 번째 버튼(네이버 톡톡)의 이미지만 원형 내부에 꽉 차게 */
.jjdd-floating-menu .btn-link {
    background: #1ec800;
    border-color: #1ec800;
}
.jjdd-floating-menu .btn-link img {
    width: calc(100% + 2px);
    height: calc(100% + 2px);
    max-width: none;
    object-fit: cover;
    object-position: center;
    border-radius: 50%;
    transform: scale(1.02);
}

/* 마우스 오버 시 내부 이미지만 살짝 투명하게 변경 */
.jjdd-floating-menu .float-btn:hover img {
    opacity: 0.5; 
}

/* 첫 번째 버튼(네이버 톡톡)은 hover 시 opacity 효과 제거 */
.jjdd-floating-menu .btn-link:hover img {
    opacity: 1;
}

/* 탑 버튼 전용 (화이트 배경) */
.jjdd-floating-menu .btn-top {
    background: #fff;
    font-size: 20px;
}

/* ✨ 화살표 굵기 수정: 색상을 진한 검정(#0e0e0e) -> 연한 회색(#777)으로 변경하여 덜 진해 보이게 */
.jjdd-floating-menu .btn-top i {
    color: #777;
    font-weight: normal; /* FontAwesome 기본 굵기 */
}

/* 탑 버튼 마우스 오버 시 배경색만 회색으로 */
.jjdd-floating-menu .btn-top:hover {
    background: #f4f4f4;
}


/* 최근 본 상품 팝업창 디자인 */
.jjdd-recent-popup {
    position: absolute;
    bottom: 0;
    right: 70px; /* 버튼들 왼쪽에 뜨게 함 */
    width: 280px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    border: 1px solid #eee;
    display: none; /* 기본 숨김 */
    overflow: hidden;
}

.jjdd-recent-popup .popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    background: #f8f8f8;
    border-bottom: 1px solid #eee;
}

.jjdd-recent-popup .popup-header h4 {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: #111;
}

.jjdd-recent-popup .btn-close-recent {
    background: none;
    border: none;
    font-size: 16px;
    color: #888;
    cursor: pointer;
    padding: 0;
}

.jjdd-recent-popup .popup-body {
    padding: 10px;
    max-height: 400px; /* 상품이 많아지면 스크롤 생성 */
    overflow-y: auto;
}

/* 푸터 하단 구분선 + 링크 */
.footer-bottom-hr { display: block; border: 0; border-top: 1px solid #efefef; margin: 48px 0 28px; height: 0; }
.footer-bottom-bar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding-bottom: 0; }
.footer-links { display: flex; gap: 24px; flex-wrap: wrap; }
.footer-links a { font-size: 13px; font-weight: 300; line-height: 1.8; color: #222; text-decoration: none; transition: color .15s; }
.footer-links a:hover { color: #aaa; }
.footer-sns { display: flex; align-items: center; gap: 14px; }
.footer-sns a { display: inline-flex; align-items: center; opacity: .75; transition: opacity .15s; }
.footer-sns a:hover { opacity: 1; }


/* =========================================================
   [ 모바일 공통 반응형: 모든 페이지 (footer.css = 전 페이지 로드) ]
   ========================================================= */
@media (max-width: 767px) {

    /* ── 본문 컨테이너 ──────────────────────────────── */
    #container {
        max-width: 100% !important;
        padding: 0 12px !important;
        box-sizing: border-box !important;
    }
    #contents {
        padding: 10px 0 !important;
        overflow-x: hidden !important;
    }
    #container_title { 
        padding-bottom: 16px !important; 
        text-align: center !important;
    }
    #container_title span {
        font-size: 20px !important;
    }

    /* ── 상품 썸네일 잘림 방지 + 2열 그리드 ─────────── */
    #sct .item_gallery {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
        padding: 0 !important;
    }
    #sct .item_gallery li {
        float: none !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }
    #sct .item_gallery li .img_box,
    #sct .item_gallery li .thumbnail,
    .item_gallery li .img_box,
    .item_gallery li .thumbnail {
        width: 100% !important;
        height: auto !important;
        overflow: visible !important;
    }
    #sct .item_gallery li .img_box img,
    #sct .item_gallery li .thumbnail img,
    .item_gallery li .img_box img,
    .item_gallery li .thumbnail img {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 1 / 1;
        object-fit: cover !important;
        display: block !important;
    }
    /* 상품 텍스트 잘림 방지 */
    #sct .item_gallery li .item_info,
    .item_gallery li .item_info {
        padding: 8px 4px !important;
        word-break: keep-all !important;
        overflow-wrap: break-word !important;
    }
    #sct .item_gallery li .item_name,
    .item_gallery li .item_name {
        font-size: 13px !important;
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: unset !important;
        line-height: 1.4 !important;
    }
    #sct .item_gallery li .item_price,
    .item_gallery li .item_price {
        font-size: 13px !important;
    }

    /* ── 카테고리 페이지 모바일 ─────────────────────── */
    .jjdd-category-page {
        padding: 0 !important;
    }
    .jjdd-category-top {
        padding: 0 4px !important;
        margin-bottom: 24px !important;
    }
    .jjdd-category-breadcrumb {
        justify-content: flex-end !important;
        font-size: 12px !important;
        gap: 6px !important;
    }
    .jjdd-category-heading h2 {
        font-size: 22px !important;
        text-align: center !important;
        margin: 16px 0 16px !important;
    }
    .jjdd-category-tabs {
        gap: 6px !important;
        margin-bottom: 16px !important;
        justify-content: center !important;
    }
    .jjdd-category-tabs a {
        min-width: 90px !important;
        height: 34px !important;
        font-size: 12px !important;
        padding: 0 10px !important;
    }

    /* ── 게시판 공통 모바일 ─────────────────────────── */
    .jjdd-board-top {
        padding: 0 12px !important;
        margin-bottom: 20px !important;
    }
    .jjdd-board-breadcrumb {
        justify-content: flex-end !important;
        font-size: 12px !important;
        gap: 6px !important;
        margin-bottom: 12px !important;
    }
    .jjdd-board-heading h2 {
        font-size: 22px !important;
        text-align: center !important;
    }

    /* 게시판 리스트 텍스트 잘림 방지 */
    .gall_li,
    .bo_tit,
    .td_subject a {
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: unset !important;
        word-break: keep-all !important;
    }
    /* 게시판 테이블 가로 스크롤 방지 */
    .tbl_wrap,
    .tbl_head01 {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    /* ── 푸터 모바일 ─────────────────────────────────── */
    #footer { padding: 30px 0 !important; }
    #footer .inner { padding: 0 16px !important; }
    .footer-columns {
        flex-direction: column !important;
        gap: 24px !important;
    }
    .footer-col { min-width: 0 !important; }
    .footer-col.company-info { min-width: 0 !important; flex: none !important; }
    .footer-logo { max-height: 20px !important; }
    .customer-center .tel { font-size: 20px !important; }
    .footer-copyright { margin-top: 30px !important; font-size: 12px !important; }
    .footer-bottom-hr { margin: 24px 0 16px !important; }
    .footer-bottom-bar { flex-direction: column !important; align-items: flex-start !important; gap: 12px !important; }
    .footer-links { gap: 16px !important; }
    .footer-links a { font-size: 12px !important; }

    /* ── 플로팅 버튼 모바일 위치 고정 ────────────────── */
    .jjdd-floating-menu {
        right: 12px !important;
        bottom: 24px !important;
    }
    .jjdd-floating-menu .float-btn {
        width: 46px !important;
        height: 46px !important;
    }

    /* ── 로그인/회원가입 폼 모바일 ───────────────────── */
    .login_input,
    .register_form,
    .win_desc,
    .new_win {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        padding: 0 16px !important;
    }
    .login_input input[type="text"],
    .login_input input[type="password"],
    .register_form input[type="text"],
    .register_form input[type="password"],
    .register_form input[type="email"],
    .register_form select {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        font-size: 16px !important;
    }

    /* ── 페이지 제목 상단 여백 축소 ────────────────────── */
    #container_title {
        margin-top: 0 !important;
        padding-top: 8px !important;
    }
    .jjdd-board-heading h2,
    .jjdd-category-heading h2 {
        margin-top: 16px !important;
        margin-bottom: 16px !important;
    }

    /* ── 검색폼/요소 가로 오버플로 방지 ────────────────── */
    .bo_sch_wrap {
        position: fixed !important;
        top: 0 !important; left: 0 !important;
        width: 100% !important; height: 100% !important;
    }
    .bo_sch {
        width: 90% !important;
        max-width: 320px !important;
        left: 50% !important;
        margin-left: 0 !important;
        transform: translateX(-50%) !important;
    }
    .bo_sch .sch_input {
        width: calc(100% - 50px) !important;
        box-sizing: border-box !important;
    }
    .bo_sch select { width: 100% !important; box-sizing: border-box !important; }
    #bo_btn_top { flex-wrap: wrap !important; gap: 6px !important; }
    #bo_list_total { font-size: 12px !important; }
    #bo_list,
    #bo_gall,
    .board_wrap { overflow: hidden !important; }

    /* ── 리뷰 BEST 모바일 캐러셀 (1개씩 표시, < > 버튼) ── */
    .review-best-wrap {
        overflow: hidden !important;
        padding: 20px 0 !important;
        width: 100% !important;
    }
    .review-best-slider {
        padding: 0 36px !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    .review-best-viewport {
        overflow: hidden !important;
    }
    .review-best-list {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        width: 800% !important;
        padding: 0 !important;
        gap: 0 !important;
    }
    .review-best-item {
        flex: 0 0 12.5% !important;
        width: 12.5% !important;
        padding: 0 6px !important;
        box-sizing: border-box !important;
    }
    .review-best-item .review-best-card {
        width: 100% !important;
        max-width: 100% !important;
    }
    .rv-slider-btn {
        display: flex !important;
        width: 28px !important;
        height: 28px !important;
        font-size: 18px !important;
    }
    /* 리뷰 갤러리 썸네일 잘림 방지 */
    #bo_gall {
        padding: 0 12px !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }
    #bo_gall.review-board #gall_ul {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
        padding: 0 12px !important;
    }
    #bo_gall.review-board .gall_li {
        width: 100% !important;
        float: none !important;
    }
    #bo_gall.review-board .gall_li .gall_img img {
        width: 100% !important;
        height: auto !important;
        object-fit: cover !important;
    }
    /* 일반 갤러리 보드도 잘림 방지 */
    #bo_gall #gall_ul {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    #bo_gall .gall_li,
    .gall_row .col-gn-2,
    .gall_row .col-gn-3,
    .gall_row .col-gn-4 {
        width: 100% !important;
        float: none !important;
        padding: 0 !important;
    }
    #bo_gall .gall_img img {
        width: 100% !important;
        height: auto !important;
    }
    /* 갤러리 텍스트 잘림 방지 */
    .gall_text_href {
        overflow: hidden !important;
    }
    .gall_text_href a.bo_tit {
        display: block !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }
    .gall_con { overflow: hidden !important; }
    .gall_info { font-size: 12px !important; }

    /* ── 게시판 카테고리 탭 가운데 정렬 ─────────────── */
    .jjdd-board-tabs {
        justify-content: center !important;
        gap: 8px !important;
    }
    .jjdd-board-tabs a {
        min-width: 100px !important;
        padding: 0 20px !important;
        font-size: 14px !important;
    }
    /* 기본 #bo_cate 도 가운데정렬 (폴백) */
    #bo_cate { text-align: center !important; }
    #bo_cate ul {
        display: flex !important;
        justify-content: center !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
    }
    #bo_cate li { float: none !important; }
    #bo_cate a {
        padding: 5px 20px !important;
        font-size: 13px !important;
    }
    /* 게시판 테이블: 제목열만 표시 */
    .tbl_head01 th,
    .tbl_head01 td {
        font-size: 13px !important;
        padding: 10px 6px !important;
    }
    .tbl_head01 .td_num,
    .tbl_head01 .td_name,
    .tbl_head01 .td_date,
    .tbl_head01 .td_access,
    .tbl_head01 .td_num_title,
    .tbl_head01 .td_name_title,
    .tbl_head01 .td_date_title,
    .tbl_head01 .td_access_title {
        display: none !important;
    }
    .tbl_head01 th.td_subject,
    .tbl_head01 td.td_subject {
        display: table-cell !important;
        width: 100% !important;
    }
    .tbl_head01 .td_subject a {
        font-size: 14px !important;
        white-space: normal !important;
        word-break: keep-all !important;
        line-height: 1.5 !important;
    }
    /* thead 열 제목도 제목만 */
    .tbl_head01 thead th { display: none !important; }
    .tbl_head01 thead th.td_subject { display: table-cell !important; }

    /* ── 게시판 하단 검색폼 모바일 ─────────────────── */
    .jjdd-board-search {
        margin: 24px 0 16px !important;
        padding: 0 4px !important;
        box-sizing: border-box !important;
    }
    .jjdd-board-search form {
        flex-wrap: wrap !important;
        width: 100% !important;
        gap: 6px !important;
    }
    .jjdd-board-search select {
        height: 38px !important;
        font-size: 13px !important;
        padding: 0 28px 0 10px !important;
        flex: 0 0 auto !important;
        min-width: 0 !important;
    }
    .jjdd-board-search input[type="text"] {
        height: 38px !important;
        width: 0 !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
        font-size: 13px !important;
        padding: 0 10px !important;
        margin-right: 0 !important;
    }
    .jjdd-board-search .btn-search {
        height: 38px !important;
        min-width: 52px !important;
        padding: 0 12px !important;
        font-size: 13px !important;
        flex-shrink: 0 !important;
    }

    /* ── 리뷰 모달/팝업 모바일 ─────────────────────── */
    .rv-modal-wrapper {
        width: 96vw !important;
        height: 92vh !important;
        max-width: none !important;
        max-height: none !important;
    }
    .rv-modal-iframe {
        width: 100% !important;
        height: 100% !important;
    }
    #rv-modal-iframe {
        width: 96vw !important;
        height: 92vh !important;
        max-width: none !important;
        max-height: none !important;
    }
    .jjdd-modal-content {
        width: 96vw !important;
        max-width: none !important;
        max-height: 92vh !important;
    }
    #jjdd-modal-body {
        padding: 24px 16px !important;
    }
    #rv-modal-overlay > .rv-modal-wrapper > .rv-modal-close {
        display: flex !important;
        top: 8px !important;
        right: 8px !important;
        width: 36px !important;
        height: 36px !important;
        background: rgba(0,0,0,0.5) !important;
        color: #fff !important;
        border-radius: 50% !important;
        font-size: 20px !important;
        z-index: 10 !important;
    }
    /* 팝업 내 이미지 잘림 방지 */
    .jjdd-popup-view img,
    .rv-modal-wrapper img,
    #bo_v_con img {
        max-width: 100% !important;
        height: auto !important;
    }

    /* ── 기타 공통 모바일 정리 ────────────────────────── */
    img { max-width: 100%; height: auto; }
    table { max-width: 100% !important; }
    .container { padding: 0 12px !important; box-sizing: border-box !important; }

    /* ── 마이페이지/쇼핑몰 공통 오버플로 방지 ──────── */
    #contents,
    #container,
    #wrap {
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }
    /* 그누보드 기본 테이블 가로 스크롤 */
    .tbl_wrap {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
}
.footer-sns img { height: 32px; width: auto; display: block; }