/*
Theme Name: Blog Shop child
Theme URI: http://www.bbsetheme.com
Author: BBS e-Theme
Author URI: http://www.bbsetheme.com
License: GNU General Public License, v3
License URI: http://www.gnu.org/licenses/gpl.html

Description: Blog Shop은 BBS e-Commerce플러그인과 연동됩니다. 디자인 셀을 활용한 메인화면 구성, 쇼핑몰과 블로그 동시 운영, SEO기능 등 온라인 쇼핑몰 운영을 위한 필수기능이 탑재되어 있습니다.
Version: 2.5.7
Tags: 반응형 레이아웃, 사용자 정의 색상, 사용자 정의 메뉴, 테마 옵션

본 테마는 워드프레스와 동일한 GPL 라이센스의 테마입니다. 임의대로 수정,삭제 후 이용하셔도 됩니다.
단, 재배포 시 GPL 라이센스로 재배포 되어야 하며, 원 제작자의 표기를 해주시기 바랍니다.

'Dailytime' WordPress Theme, Copyright 2015 BBS e-Theme(http://www.bbsetheme.com)
'Dailytime' is distributed under the terms of the GNU GPL

[테마 수정 시 주의사항]
1. 워드프레스(Wordpress)의 업데이트 방식은 기존 테마/플러그인을 삭제 한 후 재설치 하는 방식입니다.
    업데이트 시 모든 수정 사항이 초기화 되므로 테마를 수정하시는 경우, 차일드테마(Child Theme) 방식을 이용해 주시기 바랍니다.
2. 차일드테마(Child Theme)를 이용한 수정 방법 : https://codex.wordpress.org/ko:Child_Themes
Template: Blog_Shop  
*/

@import url('../Blog_Shop/style.css');

/* =========================================
   2. 오늘 본 상품 위젯 대응 및 관리자 바 복구
   ========================================= */

#masthead,
.themeToggle,
.membersNav,
ul.layerIcons,
.layerIcons {
    transition: transform 1.0s cubic-bezier(0.3, 1, 0.5, 1) !important;
    transition-delay: 0.05s !important;
    will-change: transform;
}

/* [복구] 위젯(skyBanner2) 활성화 시 로고와 토글버튼도 왼쪽으로 100px 밀어내기 (가림 방지) */
body:has(#skyBanner2:not([style*="right: -100"])):has(#skyBanner2:not([style*="right:-100"])) #masthead,
body:has(#skyBanner2:not([style*="right: -100"])):has(#skyBanner2:not([style*="right:-100"])) .themeToggle,
body:has(#skyBanner2:not([style*="right: -100"])):has(#skyBanner2:not([style*="right:-100"])) .membersNav,
body:has(#skyBanner2:not([style*="right: -100"])):has(#skyBanner2:not([style*="right:-100"])) ul.layerIcons,
body:has(#skyBanner2:not([style*="right: -100"])):has(#skyBanner2:not([style*="right:-100"])) .layerIcons,
body:has(#skyBanner2[style*="right: 0"]) #masthead,
body:has(#skyBanner2[style*="right: 0"]) .themeToggle,
body:has(#skyBanner2[style*="right: 0"]) .membersNav,
body:has(#skyBanner2[style*="right: 0"]) ul.layerIcons,
body:has(#skyBanner2[style*="right: 0"]) .layerIcons {
    transform: translateX(-100px) !important;
}

/* 관리자 바가 있을 때 위젯을 32px 아래로 내려서 관리자 바와의 겹침 원천 차단 */
body.admin-bar #skyBanner2 {
    top: 32px !important;
}

/* 관리자 바 아이콘은 항상 제자리에 고정 */
#wpadminbar #wp-admin-bar-top-secondary {
    transform: none !important;
}

/* =========================================
   3. 드롭다운 메뉴 및 레이어 우선순위 설정
   ========================================= */

#masthead, 
.site-header {
    overflow: visible !important;
    z-index: 1000 !important;
    transition: z-index 0s !important;
}

/* 마우스 호버 시 최상위 레이어로 상승 */
#masthead:hover, 
#masthead:focus-within,
.site-header:hover {
    z-index: 1000000 !important; 
}

#masthead:has(.sub-menu:hover),
#masthead:has(ul ul:hover) {
    z-index: 1000000 !important;
}

/* 드롭다운 메뉴 위치 및 인덱스 공통 설정 */
.main-navigation ul ul, 
.sub-menu, 
.dropdown-menu {
    z-index: 1100000 !important;
    position: absolute !important;
    margin-top: -17px !important; 
    margin-left: -28px !important;
    min-width: unset !important;
    clip-path: none !important;
    -webkit-clip-path: none !important;
    padding: 5px 0 !important; 
}

/* [보정] 마이페이지 드롭다운 위치 수정 (밀림 현상 해결) 및 배경 유지 */
.membersNav ul ul {
    z-index: 1100000 !important;
    position: absolute !important;
    margin-top: -2px !important; 
    margin-left: -28px !important; /* [수정] 오른쪽 밀림 방지를 위해 기존 값으로 복구 */
    left: auto !important; /* [수정] 강제 중앙 정렬 해제 */
    min-width: 120px !important;
    padding-top: 10px !important; 
    padding-bottom: 8px !important; 
    clip-path: none !important; 
    -webkit-clip-path: none !important;
    background: #ffffff !important; 
    border: 1px solid #eeeeee !important; 
    box-shadow: 0 4px 10px rgba(0,0,0,0.1) !important;
    border-radius: 4px !important;
}

/* [수정] 3차 메뉴(펌웨어 등) 위치 및 선택바 정밀 보정 */
.main-navigation ul ul ul,
.sub-menu .sub-menu {
    top: -5px !important; 
    left: 100% !important;
    margin-top: 0 !important;
    margin-left: 0 !important;
    padding: 5px 0 !important;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.1) !important;
}

/* 드롭다운 내 텍스트 설정 */
.membersNav ul ul a {
    color: #333333 !important; 
    font-weight: 500 !important; 
    transition: all 0.2s ease;
    display: block !important;
    /* [수정] 위아래 두께 1mm(약 4px) 감소: 8px -> 4px */
    padding: 4px 15px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    white-space: nowrap !important;
    text-align: center !important;
    pointer-events: auto !important; 
}

/* [수정] 호버 시 선택바를 빨간색으로 변경 */
.membersNav ul ul a:hover {
    background-color: #cc0000 !important; /* 배경을 빨간색으로 변경 */
    color: #ffffff !important; /* 글자색을 흰색으로 변경하여 대비 확보 */
}

/* 불필요한 배경 가상 요소 제거 */
.membersNav ul ul::before {
    display: none !important;
}

/* --------------------------------------------------------------------------
   [요청 작업] 호버 기능 활성화 및 닫기 버튼 숨김
   -------------------------------------------------------------------------- 
*/

/* 1. 닫기 버튼(X) 강제 숨김 처리 */
.membersNav ul ul .close,
.membersNav ul ul .btn-close,
.sub-menu .close,
.sub-menu .btn-close,
.membersNav .toggle-close,
.membersNav .close_btn { 
    display: none !important;
}

/* 2. 마우스 호버 시 드롭다운 자동 노출 */
.membersNav li:hover > ul,
.main-navigation li:hover > ul {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important; 
}

/* =========================================
   4. 오늘 본 상품 위젯 최적화 (깜빡임 방지)
   ========================================= */
#skyBanner2 {
    animation: preventFlicker 0.5s linear forwards;
    z-index: 90000 !important;
}

/* =========================================
   5. 이미지 및 디자인 정리
   ========================================= */
ul.goods.itemList.blockType li .img-wrap img,
ul.goods.itemList.blockType li img,
.product img {
    aspect-ratio: 1 / 1;
    object-fit: cover;
    height: auto !important;
    width: 100% !important;
}

ul.goods.itemList.blockType li .text-wrap .name,
.product .woocommerce-loop-product__title {
    min-height: 45px;
    line-height: 1.3;
    overflow: hidden; display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    margin-bottom: 10px;
}

/* =========================================
   6. 상호작용 시 위치 복구 (translateX 해제)
   ========================================= */
body:has(#skyBanner2) .membersNav:hover,
body:has(#skyBanner2) .membersNav:focus-within,
body:has(#skyBanner2) ul.layerIcons:hover,
body:has(#skyBanner2) ul.layerIcons:focus-within {
    transform: translateX(0) !important;
    z-index: 1000000 !important; 
}

/* =========================================
   7. 애니메이션 정의
   ========================================= */
@keyframes preventFlicker {
    0%   { opacity: 0; visibility: hidden; }
    80%  { opacity: 0; visibility: hidden; }
    100% { opacity: 1; visibility: visible; }
}

/* =========================================
   8. 페이지 스크롤 및 게시판 레이아웃 안정화
   ========================================= */
html {
    overflow-y: visible !important;
}

body {
    min-height: 100vh;
}

.site-content, 
#primary, 
#main, 
.content-area,
.entry-content {
    display: block !important;
    height: auto !important;
    min-height: 800px; 
    overflow: initial !important; 
    clear: both !important;
}

.site-main::after,
#main::after,
#primary::after,
.site-content::after {
    content: "" !important;
    display: table !important;
    clear: both !important;
}

.site-footer, #colophon {
    position: relative !important;
    display: block !important;
    clear: both !important;
    z-index: 10 !important;
}

#main {
    padding-bottom: 80px !important;
}

.board-list, .kboard-list, .board-wrap, .kboard-wrapper, .kboard-content {
    overflow: visible !important;
    height: auto !important;
    display: block !important;
}

/* =========================================
   10 & 11. 모바일 전용 통합 설정 (레이아웃, 하단바, 사이드 메뉴 등)
   ========================================= */
@media screen and (max-width: 782px) {
    /* [기본 설정] 관리자바 숨김 및 헤더 위치 고정 */
    html body #wpadminbar { display: none !important; }
    html, body.admin-bar { margin-top: 0 !important; }
    html body #masthead, html body .custom_top_banner, html body header.fixed-header { top: 0 !important; }

    /* [하단바 본체] 레이아웃 설정 */
    html body div.mobileSwipe,
    html body .mobileSwipe.type_iconBg {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 55px !important;              
        background: #ffffff !important; 
        opacity: 1 !important;
        z-index: 99999 !important;
        border: none !important;
        border-top: 1px solid #e5e5e5 !important;
        padding: 0 !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        box-shadow: 0 -1px 5px rgba(0,0,0,0.1) !important; 
        transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) !important; 
    }

    /* [레이아웃 복구] 가로 스크롤 방지 및 5개 정렬 */
    html body .mobileSwipe ul, 
    html body .mobileSwipe .slick-list, 
    html body .mobileSwipe .slick-track {
        display: flex !important;
        width: 100% !important;
        height: 100% !important;
        transform: none !important;
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;
    }

    /* 화면 너비를 5등분하여 한 줄에 표시 (100% / 5 = 20%) */
    html body .mobileSwipe li.slick-slide {
        flex: 1 1 0 !important;
        width: 20% !important;
        height: 100% !important;
        float: none !important;
        display: flex !important;
        justify-content: center;
        align-items: center;
        margin: 0 !important;
    }

    /* [아이콘/글씨] 위치 정렬 */
    html body .mobileSwipe li a {
        display: flex !important;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        text-decoration: none !important;
        margin-top: -2px !important;
    }

    html body .ms_thumbnail {
        height: 24px !important;
        margin-bottom: 2px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    html body .thumbnail_bg { background: none !important; border: none !important; padding: 0 !important; }
    
    html body .ms_thumbnail i { 
        font-size: 19px !important; 
        line-height: 1 !important;
    }

    html body .ms_txt {
        font-size: 10.5px !important;              
        line-height: 1 !important;
        font-weight: 500 !important;            
        white-space: nowrap !important;
        letter-spacing: -0.8px !important;
    }

    /* 불필요한 좌우 버튼 숨김 */
    html body .mobileSwipe_btn { display: none !important; }

    /* 스크롤 시 하단바 숨김/표시 동작 */
    html body.nav-down .mobileSwipe,
    html body.nav-down #footer_layer { transform: translateY(100%) !important; }
    html body.nav-up .mobileSwipe,
    html body.nav-up #footer_layer,
    html body:not(.nav-down) .mobileSwipe { transform: translateY(0) !important; }

    /* [TOP 버튼 복구] 동그라미 모양 및 위치 디자인 */
    html body .goOnTop {
        position: fixed !important;
        bottom: 63px !important; 
        right: 15px !important;
        margin: 0 !important;    
        padding: 0 !important;
        width: auto !important;
        height: auto !important;
        z-index: 99998 !important;
        background: none !important; 
        border: none !important;
        transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    html body .goOnTop a[title="TOP"], 
    html body .goOnTop a[href="#top"] {
        width: 42px !important;  
        height: 42px !important;
        background: #cc0000 !important; 
        color: #ffffff !important;       
        border-radius: 50% !important;  
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-decoration: none !important;
        box-shadow: 0 2px 10px rgba(0,0,0,0.2) !important;
        margin: 0 !important;
    }

    html body .goOnTop a i {
        font-size: 18px !important;
        line-height: 1 !important;
    }

    html body.nav-down .goOnTop {
        transform: translateY(58px) !important; 
    }

    /* =========================================
       모바일 사이드 메뉴 구조 (박스 축소 + 간격 밀착)
       ========================================= */
    /* [기본 설정] 하위 메뉴 배경 투명화 및 초기화 */
    .main-navigation ul ul, .sub-menu, .children, .dropdown-menu {
        position: relative !important;
        width: 100% !important;
        height: auto !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* [기본 설정] 링크 스타일 공통 */
    ul.sub-menu li a {
        display: flex !important;
        align-items: center !important;
        width: 100% !important;
        height: auto !important;
        min-height: 26px !important; 
        padding-left: 40px !important;
        padding-top: 2px !important;
        padding-bottom: 2px !important;
        box-sizing: border-box !important;
        line-height: 1.2 !important;
        background: transparent !important;
        border: none !important;
        gap: 8px !important;
        font-size: 13px !important; 
    }
    
    /* 1. 자료실(부모): 높이 자동(auto) & 위아래 흐름(Flex Column) */
    li.menu-item-1424 {
        display: flex !important;
        flex-direction: column !important;
        position: relative !important;
        width: 100% !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
        border: none !important;
        box-shadow: none !important;
        background: none !important;
        outline: none !important;
    }

    /* 2. 자료실 글자(링크): 흐름에 따라 자연스럽게 맨 윗줄 차지 */
    li.menu-item-1424 > a {
        position: relative !important;
        width: 100% !important;
        height: 26px !important; 
        display: flex !important;
        align-items: center !important;
        z-index: 20 !important; 
        text-decoration: none !important;
        border: none !important;
        box-shadow: none !important;
    }

    /* 3. 펌웨어 메뉴(UL): 흐름에 따라 자료실 밑에 붙음 + 오른쪽 이동 */
    li.menu-item-1424 ul.sub-menu, 
    li.menu-item-1424 ul {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: relative !important;
        top: auto !important;
        left: auto !important;
        margin: 0 0 0 20px !important;
        width: 100% !important;
        height: auto !important;
        padding: 0 !important;
        background: none !important;
        border: none !important;
        box-shadow: none !important;
        z-index: 10 !important;
        pointer-events: auto !important;
    }

    /* 4. 펌웨어 아이템(LI) */
    li.menu-item-1422 { 
        display: block !important; 
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
        box-shadow: none !important;
    }
    
    /* 5. 펌웨어 글자(Link) */
    li.menu-item-1422 a {
        padding-left: 40px !important;
        height: 26px !important; 
        width: 100% !important;
        color: #ffffff !important; 
        font-size: 13px !important; 
        white-space: nowrap !important;
        background: none !important;
        border: none !important;
        text-decoration: none !important;
        box-shadow: none !important;
        outline: none !important;
    }

    /* 동그라미 아이콘 복구를 위해 ::before 가상 요소는 숨기지 않고 ::after(불필요한 장식선)만 제거하도록 변경 */
    li.menu-item-1424::after,
    li.menu-item-1424 > a::after,
    li.menu-item-1422::after,
    li.menu-item-1422 > a::after {
        display: none !important;
        content: none !important;
        border: none !important;
        width: 0 !important;
        height: 0 !important;
        background: none !important;
    }
}

/* ==========================================================================
   4yoShop: 마이페이지 좌측 서브메뉴 최적화 (충돌 제거 + 라인/아이콘 정렬)
   ========================================================================== */
#sidebar .sub-menu {
    position: static !important;   /* 상단메뉴용 absolute 해제 */
    margin: 0 !important;          /* 억지 여백 제거 */
    padding: 0 !important;         /* 선(Border) 밀림 방지 */
    background: none !important;   /* 상단메뉴용 배경 제거 */
    border: none !important;
    box-shadow: none !important;
}

#sidebar .sub-menu li a {
    display: block !important;
    /* 상단 패딩을 줄이고 하단 패딩을 늘려 아이콘과 글자를 위로 1mm(약 3px) 이동 */
    padding: 5px 10px 11px 25px !important; 
    margin-bottom: 4px !important;         /* 하단 구분선 여백 유지 */
    text-align: left !important;           /* 텍스트 왼쪽 정렬 */
}