/*
Theme Name: Beaver Builder Child Theme
Theme URI: https://www.wpbeaverbuilder.com
Version: 1.0
Description: An example child theme that can be used as a starting point for custom development.
Author: The Beaver Builder Team
Author URI: https://www.fastlinemedia.com
template: bb-theme
*/

/* Add your custom styles here...Remember to change the Version number above! */ 

@import url("https://use.typekit.net/dvz0wqq.css");


/*---Kboard 관련 -----*/

#kboard-default-list .kboard-list thead {
    background-color: #F7F7F7 !important;
    border-bottom: 1px solid #EEEEEE !important;
}

#kboard-default-list .kboard-search {
    background: #ffffff !important;
}

/* 1. Strip left/right borders from the outer container wrapper */
#kboard-default-list,
#kboard-default-list .kboard-list {
  border-left: 0 !important;
  border-right: 0 !important;
  border-radius: 0px !important;
}

/* 2. Strip left/right borders from table, rows, and cells */
#kboard-default-list .kboard-list table,
#kboard-default-list .kboard-list table tr,
#kboard-default-list .kboard-list table th,
#kboard-default-list .kboard-list table td {
  border-left: none !important;
  border-right: none !important;
  border-radius: 0px !important;
  box-shadow: none !important; /* Removes pseudo-borders created by shadows */
}

/*------------Woocommerce  관련 -----------*/

a.ms-open-popup-link, input[type=button].ms-open-popup-link {

    padding: 15px 14px !important;
    border-radius: 4px !important;
}

.cr-customer-consent {
display: none !important
}


/* ==========================================================================
   Quick View Modal Styling
   ========================================================================== */

/* Modal Box Dimensions & Border Radius */
.woopack-modal-inner {
    max-width: 800px !important;       /* Adjust popup width */
    border-radius: 16px !important;    /* Rounded modal corners */
    overflow: hidden;
    background-color: #ffffff !important;
}

/* Close Button Style (Top Right '×') */
.woopack-modal-close {
    font-size: 20px !important;
    color: #333333 !important;
    top: 15px !important;
    right: 20px !important;
}

/* Hide Meta Info (Category, SKU, etc.) */
.woopack-modal-inner .product_meta {
    display: none !important;
}

/* Short Description Styling */
.woopack-modal-inner.woocommerce-product-details__short-description ul.product-short-list li, 
.product-short-list li {
    display: block !important;
    font-family: Pretendard;
    font-size: 14px !important; 
    font-weight: 400 !important; 
    line-height: 1.4 !important; 
    margin-top: 20px !important;
}

/* Product Title Style */
.woopack-modal-inner .product_title {
    font-size: 18px !important;
    font-weight: 600 !important;
    color: #222222 !important;
    margin-bottom: 10px !important;
    
    margin-top: 50px !important;
}

/* Price Style */
.woopack-modal-inner .price {
    display: block !important;
    font-size: 20px !important;
    color: #222222 !important;
    font-weight: 500 !important;
}

/* Adjust left column (Product Gallery) width */
.woopack-modal-inner .woocommerce-product-gallery {
    width: 45% !important;
    float: left !important;
}

/* Adjust right column (Product Summary) width */
.woopack-modal-inner .summary.entry-summary {
    width: 50% !important;
    float: right !important;
    padding-left: 20px !important;
}

/* ==========================================================================
   Form / Add to Cart & Quantity Layout
   ========================================================================== */

/* Flex layout for Quick View Add to Cart form */
.woopack-modal-inner form.cart {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 10px !important;
    margin-top: 15px !important;
}

/* Quantity Wrapper */
.woopack-modal-inner form.cart .quantity {
    display: inline-flex !important;
    margin: 0 !important;
    float: none !important;
}

/* Quantity input box */
.woopack-modal-inner form.cart .quantity input.qty {
    width: 60px !important;
    height: 44px !important;
    text-align: center !important;
    border: 1px solid #ddd !important;
    border-radius: 6px !important;
    padding: 0 5px !important;
    margin: 0 !important;
}

/* Add to Cart button (Next to Quantity input on Top Row) */
.woopack-modal-inner form.cart .single_add_to_cart_button {
    flex: 1 !important;                 /* Fill remaining width next to quantity box */
    height: 44px !important;
    line-height: 44px !important;
    padding: 0 20px !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: #1F2428 !important;
    color: #ffffff !important;
    border-radius: 6px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    border: none !important;
    transition: all 0.2s ease !important;
}

.woopack-modal-inner form.cart .single_add_to_cart_button:hover {
    background-color: #333333 !important;
}

/* View Cart button (Stacked directly BELOW Add to Cart button) */
.woopack-modal-inner form.cart .wc-forward,
.woopack-modal-inner form.cart .added_to_cart {
    width: 100% !important;              /* Force to take full row width below */
    height: 44px !important;
    line-height: 44px !important;
    margin-top: 4px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: #f4f4f4 !important;
    color: #333333 !important;
    border-radius: 6px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    border: 1px solid #ddd !important;
    transition: all 0.2s ease !important;
}

.woopack-modal-inner form.cart .wc-forward:hover,
.woopack-modal-inner form.cart .added_to_cart:hover {
    background-color: #e5e5e5 !important;
    color: #000000 !important;
}

/*------checkout------------*/
/* ==========================================================================
   WooPack Checkout 1-Column Responsive Fix (Mobile & Tablet)
   ========================================================================== */

@media screen and (max-width: 991px) {
  /* 1. Reset Main Checkout Container to Stack Vertically */
  .woopack-checkout-container {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    gap: 30px !important;
  }

  /* 2. Force Left (Billing) and Right (Order Summary) Columns to 100% Width */
  .woopack-checkout-container .woopack-checkout-column,
  .woopack-checkout-container .woopack-checkout-column-1,
  .woopack-checkout-container .woopack-checkout-column-2 {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    float: none !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  /* 3. Collapse WooCommerce Billing Inner Columns (Name/Phone/Email) */
  .woocommerce-checkout .col2-set .col-1,
  .woocommerce-checkout .col2-set .col-2,
  .woocommerce-checkout .form-row-first,
  .woocommerce-checkout .form-row-last {
    width: 100% !important;
    float: none !important;
    margin-right: 0 !important;
  }

  /* 4. Ensure Order Review Table fits mobile screen without overflow */
  .woocommerce-checkout-review-order-table {
    width: 100% !important;
    table-layout: auto !important;
  }

  /* 5. Address Field Button Adjustments for Korean Address Plugin (mshop) */
  p.mshop_addr_title input.postnum {
    width: 90px !important;
  }
  
  p.mshop_addr_title .ms_addr_1 {
    display: inline-block !important;
    margin-top: 5px !important;
  }
}

/*----my account ------------*/
.woopack-my-account.tabs-position-top .woocommerce .woocommerce-MyAccount-navigation ul li {
    margin-bottom: 12px;
}


/*----search------------*/
#search-overlay{

position:fixed;
inset:0;
background:rgba(0,0,0,.4);
opacity:0;
visibility:hidden;
transition:.3s;
z-index:9998;

}


#search-drawer{

position:fixed;
top:0;
right:-450px;
width:450px;
height:100vh;
background:#fff;
z-index:9999;
transition:.3s;
}


#search-overlay.active{
opacity:1;
visibility:visible;
}


#search-drawer.active{
right:0;
}



.search-header{
padding:25px;
display:flex;
gap:10px;
border-bottom:1px solid #ddd;

}


#search-input{
width:100%;
height:45px;
}



#search-results{
padding:20px;
}


.search-item{
padding:15px 0;
border-bottom:1px solid #eee;
}

.search-item a{
    display:flex;
    gap:15px;
    align-items:center;
    padding:15px;
    text-decoration:none;
    color:#222;
}


.search-item img{
    width:70px;
    height:70px;
    object-fit:cover;
}


.search-item h4{
    margin:0 0 6px;
    font-family: pretendard;
    font-weight: 500;
    font-size:16px;

}

.search-item .price{
    font-family: pretendard;
    font-weight: 600;
    font-size:15px;

}

.search-item:hover{
    background:#f7f7f7;
}

#search-close {

    background-color: #F76419 !important;
    color: #fff;
    border: 0px solid #ddd;

    width: 40px !important;
    height: 40px !important;
    padding: 0;
    border-radius: 8px;
    font-size: 20px;
    cursor: pointer;

}


@media (max-width: 768px){

    #search-drawer {
        width:85vw;
        right:-85vw;
    }

    #search-drawer.active {
        right:0;
    }
}

/*---------menu--------*/

/* ==========================================================
   CUSTOM HEADER
========================================================== */

.custom-header{
    width:100%;
    background:#fff;
    border:1px solid #ddd;
    border-radius:100px;
    box-sizing:border-box;
    position:relative;
    z-index:999;
}

.custom-header .header-inner{
    max-width:1920px;
    margin:0 auto;
    padding:25px 50px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:15px;
}

/* ==========================================================
   NAVIGATION
========================================================== */

.custom-header .nav-container{
    flex:1;
    display:flex;
    align-items:center;
}

.custom-header .main-menu{
    display:flex;
    align-items:center;
    gap:20px;
    margin:0;
    padding:0;
    list-style:none;
}

.custom-header .main-menu>li>a{
    font-family:'Pretendard',sans-serif;
    font-size:15px;
    font-weight:500;
    color:#222;
    text-decoration:none;
    white-space:nowrap;
    transition:.25s;
}

.custom-header .main-menu>li>a:hover{
    color:#000;
    font-weight:600;
}

/* ==========================================================
   SUB MENU
========================================================== */

.custom-header .has-submenu{
    position:relative;
}

.custom-header .has-submenu .arrow{
    font-size:11px;
    margin-left:3px;
    display:inline-block;
    transition:.25s;
}

.custom-header .has-submenu.open .arrow{
    transform:rotate(180deg);
}

.custom-header .sub-menu{

    position:absolute;
    top:100%;
    left:0;

    display:none;

    min-width:150px;

    margin-top:8px;
    padding:8px 0;

    background:#fff;

    border:1px solid #eee;
    border-radius:8px;

    list-style:none;

    box-shadow:0 8px 20px rgba(0,0,0,.08);

    z-index:9999;

}

.custom-header .has-submenu.open .sub-menu{

    display:block;

}

.custom-header .sub-menu li a{

    display:block;

    padding:9px 16px;

    font-size:14px;

    color:#444;

    text-decoration:none;

    white-space:nowrap;

    transition:.2s;

}

.custom-header .sub-menu li a:hover{

    background:#f7f7f7;

    color:#000;

}

/* ==========================================================
   HAMBURGER
========================================================== */

.custom-header .hamburger-btn{

    display:none;

    background:none;

    border:none;

    cursor:pointer;

    padding:4px;

    flex-direction:column;

    gap:5px;

}

.custom-header .hamburger-btn span{

    display:block;

    width:22px;

    height:2px;

    background:#222;

    transition:.3s;

}

.custom-header .close-btn{

    display:none;

}

/* ==========================================================
   LOGO
========================================================== */

.custom-header .logo-container{

    flex:0 0 auto;

    text-align:center;

}

.custom-header .logo-container img{

    height:38px;

    width:auto;

    display:block;

}

/* ==========================================================
   UTILITIES
========================================================== */

.custom-header .utility-container{

    flex:1;

    display:flex;

    align-items:center;

    justify-content:flex-end;

    gap:16px;

}

.custom-header .utility-links{

    display:flex;

    align-items:center;

    gap:16px;

    font-family:'Pretendard',sans-serif;

    font-size:14px;

    font-weight:500;

}

.custom-header .utility-links a{

    color:#444;

    text-decoration:none;

    transition:.2s;

}

.custom-header .utility-links a:hover{

    color:#000;

}

.custom-header .utility-links img{

    width:16px;

    height:16px;

    display:block;

}

.custom-header .lang-selector,
.custom-header .icon-btn{

    display:inline-flex;

    align-items:center;

    gap:4px;

}

.custom-header .divider{

    color:#ddd;

}

/* ==========================================================
   MOBILE ICONS
========================================================== */

.custom-header .mobile-only-icons{

    display:none;

    align-items:center;

    gap:12px;

}

.custom-header .mobile-only-icons img{

    width:18px;

    height:18px;

    display:block;

}

/* ==========================================================
   CART
========================================================== */

.custom-header .cart-btn{

    position:relative;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    color:#222;

    text-decoration:none;

    font-size:22px;

    line-height:1;

    transition:.25s;

}

.custom-header .cart-btn:hover{

    color:#F76419;

}

.custom-header .cart-badge{

    position:absolute;

    top:-7px;

    right:-10px;

    min-width:18px;

    height:18px;

    padding:0 5px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#F76419;

    color:#fff;

    border-radius:999px;

    font-size:10px;

    font-weight:600;

    line-height:1;

    white-space:nowrap;

    box-sizing:border-box;

    z-index:2;

}

.custom-header .cart-badge:empty{

    display:none;

}

/* ==========================================================
   TABLET
========================================================== */

@media screen and (max-width:991px){

    .custom-header{

        border-radius:40px;

    }

    .custom-header .header-inner{

        padding:15px 25px;

    }

    .custom-header .hamburger-btn{

        display:flex;

    }

    .custom-header .desktop-only{

        display:none!important;

    }

    .custom-header .mobile-only-icons{

        display:flex;

    }

    .custom-header .nav-container,
    .custom-header .utility-container{

        flex:0 0 auto;

    }

    .custom-header .cart-btn{

        font-size:20px;

    }

    .custom-header .cart-badge{

        top:-6px;

        right:-8px;

    }

}

/* ==========================================================
   MOBILE / TABLET OVERLAY MENU
========================================================== */

@media screen and (max-width:991px){

    /* Header */

    .custom-header{

        border-radius:40px;

    }

    .custom-header .header-inner{

        padding:15px 25px;

        gap:12px;

    }

    /* Overlay */

    .custom-header .main-menu-overlay{

        position:fixed;

        top:0;
        left:0;

        width:100%;
        height:100%;

        background:rgba(0,0,0,.82);

        backdrop-filter:blur(5px);

        display:flex;

        align-items:center;

        justify-content:center;

        opacity:0;

        visibility:hidden;

        pointer-events:none;

        transition:opacity .3s ease,
                   visibility .3s ease;

        z-index:999999;

    }

    .custom-header .main-menu-overlay.active{

        opacity:1;

        visibility:visible;

        pointer-events:auto;

    }

    /* Close Button */

    .custom-header .close-btn{

        display:block;

        position:absolute;

        top:28px;

        right:30px;

        background:transparent;

        border:none;

        color:#fff;

        font-size:42px;

        cursor:pointer;

        line-height:1;

        padding:0;

    }

    .custom-header .close-btn:hover{

        color:#F76419;

    }

    /* Main Menu */

    .custom-header .main-menu{

        flex-direction:column;

        align-items:center;

        justify-content:center;

        gap:24px;

        text-align:center;

    }

    .custom-header .main-menu>li>a{

        color:#fff;

        font-size:22px;

        font-weight:600;

    }

    .custom-header .main-menu>li>a:hover{

        color:#F76419;

    }

    /* Mobile Sub Menu */

    .custom-header .sub-menu{

        position:static;

        display:none;

        background:transparent;

        border:none;

        box-shadow:none;

        padding-top:12px;

        margin:0;

        min-width:0;

        flex-direction:column;

        gap:12px;

    }

    .custom-header .has-submenu.open .sub-menu{

        display:flex;

    }

    .custom-header .sub-menu li a{

        color:#ddd;

        padding:0;

        font-size:16px;

    }

    .custom-header .sub-menu li a:hover{

        background:transparent;

        color:#fff;

    }

}

/* ==========================================================
   SMALL MOBILE
========================================================== */

@media screen and (max-width:480px){

    .custom-header{

        border-radius:28px;

    }

    .custom-header .header-inner{

        padding:12px 16px;

        gap:8px;

    }

    /* Logo */

    .custom-header .logo-container img{

        height:28px;

    }

    /* Utility Area */

    .custom-header .utility-container{

        gap:6px;

    }

    .custom-header .mobile-only-icons{

        gap:6px;

    }

    .custom-header .mobile-only-icons img{

        width:16px;

        height:16px;

    }

    /* Cart */

    .custom-header .cart-btn{

        font-size:18px;

    }

    .custom-header .cart-badge{

        top:-5px;

        right:-7px;

        min-width:16px;

        height:16px;

        padding:0 4px;

        font-size:9px;

    }

    /* Mobile Menu */

    .custom-header .main-menu{

        gap:20px;

    }

    .custom-header .main-menu>li>a{

        font-size:20px;

    }

    .custom-header .sub-menu li a{

        font-size:15px;

    }

    /* Close Button */

    .custom-header .close-btn{

        font-size:36px;

        right:20px;

        top:20px;

    }

}

/* ==========================================================
   SEARCH DRAWER
========================================================== */

#search-overlay{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.45);

    opacity:0;

    visibility:hidden;

    transition:.3s;

    z-index:9998;

}

#search-overlay.active{

    opacity:1;

    visibility:visible;

}

#search-drawer{

    position:fixed;

    top:0;

    right:-450px;

    width:450px;

    max-width:100%;

    height:100vh;

    background:#fff;

    overflow-y:auto;

    transition:right .3s ease;

    z-index:9999;

    box-shadow:-8px 0 25px rgba(0,0,0,.12);

}

#search-drawer.active{

    right:0;

}

@media screen and (max-width:768px){

    #search-drawer{

        width:85vw;

        right:-85vw;

    }

}

/* Prevent body scrolling when drawer is open */

body.search-open{

    overflow:hidden;

}

/* ==========================================================
   WOOCOMMERCE
========================================================== */

.woocommerce-cart .custom-header,
.woocommerce-checkout .custom-header{

    position:relative;

    display:block;

}

.woocommerce-cart .woocommerce,
.woocommerce-checkout .woocommerce{

    width:100%;

    display:block;

}

/* ==========================================================
   GENERAL TRANSITIONS
========================================================== */

.custom-header a,
.custom-header button,
.custom-header img{

    transition:all .25s ease;

}