/* Middle Menu Styling */

/* Wrapper for full width background if needed, currently white/transparent */
.middle-menu-wrapper {
    width: 100%;
    /* Optional: adds subtle separation */
    background: #fff;
    padding: 15px 0;
    /* Vertical spacing */
    margin-top: 10px;
    /* Space from Main Slider */
}

/* Main Container */
.middle-menu-container {
    max-width: 1200px;
    margin: 0 auto;
    /* Bottom margin logic moved to items for wrap support */
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    /* Allow wrapping for both PC and Mobile */

    /* Restored Border - Restricted to 1200px */
    border-bottom: 1px solid #eee;
    padding-bottom: 23px;
    /* Add spacing between items and border */
}

/* Remove old margin logic for rows since we use wrap now */
.middle-menu-container:last-child {
    margin-bottom: 0;
}

/* Menu Items */
.middle-menu-item {
    text-align: center;
    box-sizing: border-box;
    position: relative;
    /* For separator */
    /* Add bottom margin to handle multi-row spacing on PC */
    margin-bottom: 20px;

    /* Formatting Fix: Use Flexbox for perfect centering in both modes */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Links */
.middle-menu-link {
    text-decoration: none;
    color: #666;
    /* Lighter tone for standard items */
    font-size: 16px;
    font-weight: 500;
    display: block;
    width: 100%;
    transition: color 0.3s ease;
    word-break: keep-all;
    /* Prevent breaking Korean words mid-word */
}

/* Hover Effect */
.middle-menu-item:hover .middle-menu-link {
    color: #000;
    font-weight: 700;
}

.middle-menu-item.fixed-first .middle-menu-link {
    color: #222;
    /* Keep 'See All' dark/original */
    font-weight: 700;
}

/* Separator via Pseudo-element (PC Only - Text Mode default) */
.middle-menu-item::after {
    content: "";
    /* Use empty content for shape */
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    /* Exact width */
    height: 14px;
    /* Height of the separator */
    background-color: #ddd;
    /* Color */
    pointer-events: none;
}

/* Logic to hide separator on the 10th item for PC */
.middle-menu-item:nth-child(10n)::after {
    content: none;
}

.middle-menu-item:last-child::after {
    content: none;
}

/* =========================================
   PC Box Style (.style-box) 
   - Applied when 'Box Style' is selected in Customizer
   - Replicates Mobile design on PC
   ========================================= */
.middle-menu-wrapper.style-box .middle-menu-item::after {
    display: none;
    /* Hide separators in box mode */
}

.middle-menu-wrapper.style-box .middle-menu-item {
    border: 1px solid #ddd;
    margin-right: -1px;
    /* Collapse borders */
    margin-bottom: -1px;
    /* Collapse borders */
    background: #fff;
    height: 60px;
    /* Fixed height increased slightly for better touch target/visual */
    padding: 0 10px;
    /* Side padding only */
    display: flex;
    /* Use flexbox for centering */
    align-items: center;
    /* Vertical center */
    justify-content: center;
    /* Horizontal center */
}

/* Adjust margins/padding for box mode container if needed */
.middle-menu-wrapper.style-box .middle-menu-container {
    /* Ensure borders don't get cut off if exact 1200px */
}

/* Active State for PC Box Mode */
.middle-menu-wrapper.style-box .middle-menu-item.active {
    background-color: #333;
    z-index: 2;
    /* formatted on top */
    border-color: #333;
}

.middle-menu-wrapper.style-box .middle-menu-item.active .middle-menu-link {
    color: #fff !important;
    font-weight: bold;
}

/* Responsive: Mobile (< 768px) */
@media (max-width: 768px) {
    .middle-menu-container {
        padding: 0 10px;
		padding-bottom: 23px;
        /* Remove extra side spacing or keep? */
    }

    /* 4 items per row = 25% width */
    .middle-menu-item {
        width: 25% !important;
        margin-bottom: 0px;
        /* Remove large margin, use border structure */
        border: 1px solid #ddd;
        /* Border collapsing effect: negative margin */
        margin-right: -1px;
        margin-bottom: -1px;
        height: 50px;
        /* Fixed height for boxes */
        display: flex;
        align-items: center;
        justify-content: center;
        background: #fff;
        /* Default white */
    }

    /* Ensure rows don't break weirdly due to negative margin container */

    .middle-menu-link {
        font-size: 14px;
        /* Smaller font on mobile */
    }

    /* Hide Separators on Mobile */
    .middle-menu-item::after {
        display: none;
    }

    /* Active State for Mobile */
    .middle-menu-item.active {
        background-color: #333;
        /* Toned down black */
        z-index: 1;
        /* Bring above borders */
        border-color: #333;
    }

    .middle-menu-item.active .middle-menu-link {
        color: #fff !important;
        /* White text */
        font-weight: bold;
    }
}