/*
 * custom.css — 사이트 전용 커스텀 스타일
 * 인라인 <style> 블록에서 추출된 스타일을 모아둔 파일.
 * main.css (NiceShop 템플릿) 이후에 로드됨.
 */

/* =========================================================
   CSS 기본 변수 (header.php 인라인 :root가 재정의함)
   ========================================================= */
:root {
  --theme-primary: #333333;
  --theme-accent:  #FEE500;
  --theme-btn-bg:  #333333;
  --theme-btn-txt: #ffffff;
}

/* =========================================================
   고객센터 플로팅 버튼 (includes/footer.php 에서 추출)
   ========================================================= */
.kakao-cs-btn {
    position: fixed;
    right: 10px;
    bottom: 60px;
    width: 50px;
    height: 50px;
    background: var(--theme-accent);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    z-index: 9999;
    transition: 0.2s;
}
.kakao-cs-btn:hover {
    transform: scale(1.1);
}

/* =========================================================
   모바일 바 메뉴 (includes/header.php 에서 추출)
   ========================================================= */
.mobile-bar-menu {
    display: flex;
    overflow-x: auto;
    white-space: nowrap;
    padding: 10px 0;
}
.mobile-bar-menu ul {
    display: none;
    padding: 0;
    margin: 0;
    list-style: none;
}
.mobile-bar-menu li {
    margin-right: 5px;
    list-style: none;
}
.mobile-bar-menu a {
    font-size: small;
    text-decoration: none;
    color: #fff;
    font-weight: 500;
    padding: 5px 10px;
    display: block;
}

/* 바메뉴 드롭다운 overflow 수정 */
.header-nav,
.header-nav > .container-fluid,
.header-nav > .container-xl,
.header-nav > div {
    overflow: visible !important;
}
#header {
    overflow: visible !important;
}
nav.mobile-bar-menu {
    overflow-x: auto;
    overflow-y: visible !important;
}
nav.mobile-bar-menu > ul {
    overflow: visible !important;
}

/* =========================================================
   사이트 팝업 (includes/header.php 에서 추출)
   ========================================================= */
.site-popup-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 99998;
}

.site-popup-container {
    display: none;
    position: fixed;
    z-index: 99999;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
    overflow: hidden;
}

.site-popup-container.center {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.site-popup-container.top-left    { top: 20px; left: 20px; }
.site-popup-container.top-right   { top: 20px; right: 20px; }
.site-popup-container.bottom-left  { bottom: 20px; left: 20px; }
.site-popup-container.bottom-right { bottom: 20px; right: 20px; }

.site-popup-image {
    width: 100%;
    height: auto;
    display: block;
    cursor: pointer;
}

.site-popup-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 15px;
    background: #f8f9fa;
    border-top: 1px solid #dee2e6;
}

.site-popup-today-close {
    font-size: 14px;
    color: #495057;
    cursor: pointer;
    user-select: none;
    display: flex;
    align-items: center;
    gap: 5px;
}
.site-popup-today-close:hover { color: #000; }

.site-popup-close-btn {
    background: #dc3545;
    color: white;
    border: none;
    padding: 6px 15px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
    font-weight: bold;
}
.site-popup-close-btn:hover { background: #c82333; }

.site-popup-container.show {
    display: block;
    animation: popupFadeIn 0.3s ease;
}
.site-popup-overlay.show {
    display: block;
    animation: overlayFadeIn 0.3s ease;
}

@keyframes popupFadeIn {
    from { opacity: 0; transform: translate(-50%, -50%) scale(0.9); }
    to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
@keyframes overlayFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@media (max-width: 768px) {
    .site-popup-container {
        max-width: 90% !important;
        max-height: 80vh;
    }
    .site-popup-container.top-left,
    .site-popup-container.top-right,
    .site-popup-container.bottom-left,
    .site-popup-container.bottom-right {
        top: 50% !important;
        left: 50% !important;
        right: auto !important;
        bottom: auto !important;
        transform: translate(-50%, -50%);
    }
    .site-popup-image {
        max-height: 60vh;
        object-fit: contain;
    }
}

/* =========================================================
   장바구니 (cart.php 에서 추출)
   ========================================================= */
.btn-size-edit {
    background: none;
    border: 1px solid #aaa;
    border-radius: 4px;
    padding: 1px 7px;
    font-size: 11px;
    color: #555;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}
.btn-size-edit:hover { border-color: #333; color: #111; background: #f5f5f5; }

.modal-size-btn {
    min-width: 48px;
    padding: 8px 14px;
    border: 1.5px solid #ccc;
    border-radius: 6px;
    background: #fff;
    font-size: 14px;
    font-weight: 600;
    color: #444;
    cursor: pointer;
    transition: all 0.15s;
}
.modal-size-btn:hover   { border-color: #333; color: #111; }
.modal-size-btn.selected { background: #111; color: #fff; border-color: #111; }
.cart-thumb { width: 70px; height: 70px; object-fit: cover; }
.cart-product-name { font-size: 1.5rem; font-weight: 600; }
.cart-items { font-size: 1.5rem; }

.cart-size-badge {
    display: inline-block;
    padding: 2px 10px;
    font-size: 12px;
    color: #6c757d;
    letter-spacing: 0.5px;
}

.form-check-input { width: 20px; height: 20px; cursor: pointer; }
.item-checkbox { margin-top: 0; }

.cart-actions { background: #f8f9fa; padding: 15px; border-radius: 8px; }
.cart-actions .form-check-label { font-weight: 600; cursor: pointer; }

.member-info-card {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white; padding: 20px 25px; border-radius: 12px;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}
.level-badge-lg {
    background: rgba(255,255,255,0.2); backdrop-filter: blur(10px);
    padding: 12px 20px; border-radius: 30px; display: inline-flex;
    align-items: center; gap: 8px; font-weight: bold; font-size: 16px;
    border: 2px solid rgba(255,255,255,0.3);
}
.member-name { font-size: 18px; font-weight: 600; }
.member-discount { font-size: 14px; opacity: 0.95; }
.points-info { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.points-label { opacity: 0.9; }
.points-value { font-weight: 700; font-size: 16px; }

.cart-summary {
    background: white; border: 2px solid #f0f0f0;
    border-radius: 12px; padding: 25px;
}
.cart-summary h4 { margin-bottom: 20px; font-size: 18px; font-weight: 700; color: #333; }
.summary-item { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; font-size: 15px; }
.summary-label { color: #666; display: flex; align-items: center; gap: 6px; }
.summary-value { font-weight: 600; color: #333; }
.discount-item { background: #fff3f3; margin: 0 -10px; padding: 12px 10px; border-radius: 8px; }
.summary-divider { height: 2px; background: #e0e0e0; margin: 15px 0; }
.summary-final { padding: 15px 0 5px 0; }
.summary-final .summary-label { font-size: 17px; font-weight: 700; color: #333; }
.final-price { font-size: 24px; font-weight: 700; color: #e74c3c; }
.summary-points { background: #f8f9fa; margin: 10px -10px 0 -10px; padding: 12px 10px; border-radius: 8px; border: 1px dashed #dee2e6; }

.checkout-button { margin-top: 20px; }
.btn-accent { padding: 30px 15px; font-size: 20px; font-weight: 700; border-radius: 8px; }
.mobile-label { font-size: 12px; color: #666; font-weight: 600; margin-bottom: 5px; }

@media (max-width: 768px) {
    .cart-item-row { flex-wrap: wrap; font-size: 1.5rem; }
    .cart-checkbox-col { position: absolute; top: 15px; left: 15px; z-index: 10; }
    .cart-product-col { width: 100%; display: flex; align-items: center; justify-content: flex-start; font-size: 1.5rem; margin-bottom: 15px; padding-left: 50px; }
    .cart-product-text { flex-grow: 1; display: flex; flex-direction: column; font-size: 1.5rem; }
    .cart-price-col, .cart-qty-col, .cart-total-col { display: block !important; text-align: center !important; font-size: 1.4rem; }
    .cart-total-col { border-top: 1px solid #e0e0e0; padding-top: 15px !important; margin-top: 10px; font-size: 1.6rem; color: #e74c3c; }
    .member-info-card { padding: 15px; }
    .level-badge-lg { font-size: 14px; padding: 10px 15px; }
    .points-info { justify-content: flex-end; }
    .btn-accent { padding: 35px 15px; font-size: 22px; }
}

/* =========================================================
   결제 (checkout.php 에서 추출)
   ========================================================= */
.checkout-option-wrap { margin-top: 10px; }
.size-select-label { font-size: 13px; font-weight: 700; color: #222; margin-bottom: 8px; }
.size-req-badge { font-size: 11px; color: #e53935; font-weight: 700; margin-left: 5px; background: #fff0f0; border: 1px solid #e53935; border-radius: 3px; padding: 1px 5px; }
.preselected-size-badge { display: inline-block; padding: 6px 14px; background: #111; color: #fff; border-radius: 6px; font-size: 13px; font-weight: 700; letter-spacing: .5px; margin-bottom: 6px; }
.size-btn-group { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 6px; }
.co-size-btn { min-width: 44px; padding: 6px 12px; border: 1.5px solid #ccc; border-radius: 6px; background: #fff; font-size: 13px; font-weight: 600; color: #444; cursor: pointer; transition: all .15s; }
.co-size-btn:hover { border-color: #333; color: #111; }
.co-size-btn.selected { background: #111; color: #fff; border-color: #111; }
.co-size-select { width: 100%; max-width: 260px; padding: 8px 12px; border: 1.5px solid #ccc; border-radius: 6px; font-size: 13px; color: #333; background: #fff; margin-bottom: 6px; }
.co-size-select:focus { outline: none; border-color: #111; }
.size-err-msg { font-size: 12px; color: #e53935; margin: 4px 0 0 0; display: none; }
.size-err-msg.show { display: block; }

/* =========================================================
   로그인 / 비밀번호 찾기 모달 (login.php 에서 추출)
   ========================================================= */
.forgot-modal {
    display: none;
    position: fixed;
    z-index: 9999;
    left: 0; top: 0;
    width: 100%; height: 100%;
    background-color: rgba(0,0,0,0.6);
    animation: fadeIn 0.3s;
}
.forgot-modal.show {
    display: flex;
    justify-items: center;
    justify-content: center;
    align-content: center;
}
.forgot-modal-content {
    background-color: #fff;
    padding: 35px;
    border-radius: 15px;
    width: 90%;
    max-width: 500px;
    box-shadow: 0 4px 30px rgba(0,0,0,0.2);
    animation: slideUp 0.3s;
    position: relative;
}
@keyframes slideUp {
    from { transform: translateY(50px); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
}
.forgot-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 2px solid #f0f0f0;
}
.forgot-modal-header h3 { font-size: 2.2rem; font-weight: 700; color: #111; margin: 0; }
.close-modal {
    background: none; border: none; font-size: 2.5rem; color: #999;
    cursor: pointer; padding: 0; width: 30px; height: 30px;
    display: flex; align-items: center; justify-content: center; transition: color 0.3s;
}
.close-modal:hover { color: #e4144d; }
.forgot-modal-body { margin-bottom: 20px; }
.forgot-info {
    background: #f9f9f9; padding: 15px; border-radius: 10px;
    margin-bottom: 20px; font-size: 1.5rem; color: #666;
}
.forgot-info i { color: #e4144d; margin-right: 8px; }
.forgot-modal .form-group { margin-bottom: 20px; }
.forgot-modal .form-group label { display: block; font-weight: 600; font-size: 1.6rem; margin-bottom: 8px; color: #333; }
.forgot-modal .form-group input {
    width: 100%; padding: 12px 15px; border: 1px solid #ddd;
    border-radius: 8px; font-size: 1.6rem; transition: border-color 0.3s;
}
.forgot-modal .form-group input:focus { outline: none; border-color: #e4144d; }
.forgot-btn {
    width: 100%; padding: 14px; background-color: #e4144d; color: #fff;
    border: none; border-radius: 8px; font-size: 1.7rem; font-weight: 600;
    cursor: pointer; transition: background-color 0.3s;
}
.forgot-btn:hover { background-color: #c61140; }
.alert-box { padding: 12px 15px; border-radius: 8px; margin-bottom: 20px; font-size: 1.5rem; }
.alert-error  { background-color: #ffe6e6; color: #d63031; border: 1px solid #ffcccc; }
.alert-success { background-color: #e6ffe6; color: #27ae60; border: 1px solid #b3ffb3; }

/* =========================================================
   대시보드 (dashboard.php 에서 추출)
   ========================================================= */
.profile-header { background: #fff; border-radius: 20px; padding: 40px 30px; text-align: center; box-shadow: 0 4px 20px rgba(0,0,0,0.05); margin-bottom: 30px; }
.avatar-icon { font-size: 5rem; color: #555; margin-bottom: 15px; }
.profile-name { font-size: 2.8rem; font-weight: 700; color: #111; }
.info-grid { display: flex; justify-content: space-around; margin-top: 25px; flex-wrap: wrap; gap: 20px; }
.info-item { background: #f9f9f9; padding: 15px 20px; border-radius: 15px; flex: 1; min-width: 160px; text-align: center; box-shadow: 0 2px 8px rgba(0,0,0,0.05); }
.info-label { font-size: 1.9rem; color: #777; }
.info-value { font-size: 1.9rem; font-weight: 700; margin-top: 5px; color: #111; }
.tab-nav { display: flex; justify-content: space-around; margin-bottom: 20px; border-bottom: 2px solid #eee; flex-wrap: wrap; }
.tab-btn { flex: 1; min-width: 100px; padding: 14px 10px; border: none; background: transparent; font-weight: 600; font-size: 1.7rem; color: #888; cursor: pointer; transition: all 0.2s; }
.tab-btn.active { color: #111; border-bottom: 3px solid #111; }
.content-card { background: #fff; border-radius: 15px; padding: 30px; box-shadow: 0 4px 15px rgba(0,0,0,0.05); margin-bottom: 30px; }
.progress-wrapper { margin-bottom: 30px; }
.progress { height: 28px; border-radius: 14px; overflow: hidden; background-color: #eee; }
.progress-bar { background: #111; height: 100%; transition: width 0.6s ease; }
.level-current { background: #f9f9f9; border: 2px solid #111; border-radius: 15px; padding: 25px 20px; margin-bottom: 30px; text-align: center; box-shadow: 0 3px 10px rgba(0,0,0,0.05); }
.level-table thead { background: #f5f5f5; font-weight: 700; }
.level-table tbody tr:hover { background: #eaeaea; }
.table-custom th { background: #f5f5f5; font-size: 1.95rem; }
.table-custom td { font-size: 2rem; }
.badge-pending   { background: #555; color: #fff; border-radius: 10px; padding: 5px 10px; }
.badge-confirmed { background: #111; color: #fff; border-radius: 10px; padding: 5px 10px; }
.badge-cancelled { background: #888; color: #fff; border-radius: 10px; padding: 5px 10px; }
.orders-list { display: flex; flex-direction: column; gap: 15px; }
.order-card { background: #fff; border: 1px solid #e5e5e5; border-radius: 12px; overflow: hidden; transition: all 0.3s; }
.order-card:hover { box-shadow: 0 2px 12px rgba(0,0,0,0.08); }
.order-header { display: flex; justify-content: space-between; align-items: center; padding: 20px 25px; cursor: pointer; transition: background 0.2s; }
.order-header:hover { background: #f9f9f9; }
.order-info { display: flex; flex-direction: column; gap: 5px; }
.order-number { font-size: 1.9rem; font-weight: 700; color: #111; }
.order-date { font-size: 1.6rem; color: #777; }
.order-summary { display: flex; align-items: center; gap: 15px; font-size: 1.8rem; }
.order-total { font-weight: 700; color: #111; }
.item-count { color: #666; font-size: 1.6rem; }
.toggle-icon { font-size: 1.6rem; color: #999; transition: transform 0.3s; }
.toggle-icon.rotated { transform: rotate(180deg); }
.order-details { border-top: 1px solid #f0f0f0; padding: 0; max-height: 0; overflow: hidden; transition: max-height 0.3s ease, padding 0.3s ease; }
.order-details.expanded { padding: 20px 25px; max-height: 2000px; }
.items-list { display: flex; flex-direction: column; gap: 15px; }
.item-row { display: flex; align-items: center; gap: 15px; padding: 15px; background: #f9f9f9; border-radius: 10px; }
.item-image { width: 70px; height: 70px; object-fit: cover; border-radius: 8px; }
.item-image-placeholder { width: 70px; height: 70px; display: flex; align-items: center; justify-content: center; background: #e5e5e5; border-radius: 8px; color: #999; font-size: 2rem; }
.item-info { flex: 1; }
.item-name { font-size: 1.8rem; font-weight: 600; color: #111; margin-bottom: 5px; }
.item-meta { font-size: 1.6rem; color: #666; display: flex; align-items: center; }
.item-subtotal { font-weight: 600; color: #111; }
.empty-items { text-align: center; padding: 20px; color: #999; font-size: 1.7rem; }
.empty-state { text-align: center; padding: 50px 0; color: #888; }
.empty-icon { font-size: 4rem; margin-bottom: 15px; color: #111; }
.empty-text { font-size: 2rem; font-weight: 600; }
.modal-alert { position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%); background: #fff; border-radius: 12px; padding: 25px 30px; box-shadow: 0 4px 20px rgba(0,0,0,0.2); z-index: 10000; display: none; text-align: center; font-size: 1.9rem; }
.modal-alert.show { display: block; }
.review-modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); z-index: 9999; display: none; align-items: center; align-content: center; justify-items: center; justify-content: center; }
.review-modal.show { display: flex; }
.review-modal-content { background: #fff; border-radius: 16px; padding: 30px; max-width: 600px; width: 90%; max-height: 90vh; overflow-y: auto; box-shadow: 0 10px 40px rgba(0,0,0,0.3); }
.review-modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px; }
.review-modal-title { font-size: 2.2rem; font-weight: 700; color: #111; }
.review-close { font-size: 2.8rem; color: #999; cursor: pointer; border: none; background: transparent; padding: 0; line-height: 1; }
.review-close:hover { color: #333; }
.rating-container { display: flex; align-items: center; gap: 15px; margin: 15px 0; }
.rating-label { font-size: 1.8rem; font-weight: 600; color: #111; margin: 0; }
.star-rating { display: flex; gap: 5px; user-select: none; }
.star { background: none; color: #ddd; cursor: pointer; transition: color 0.2s, transform 0.1s; line-height: 1; display: inline-block; }
.star.active { color: #FFD700; }
.star:hover { color: #FFD700; transform: scale(1.1); }
#viewStarRating .star { cursor: default; }
#viewStarRating .star:hover { transform: none; }
.image-upload-area { border: 2px dashed #ddd; border-radius: 12px; padding: 30px; text-align: center; cursor: pointer; transition: all 0.2s; margin: 15px 0; }
.image-upload-area:hover { border-color: #999; background: #f9f9f9; }
.image-upload-icon { font-size: 3rem; color: #999; margin-bottom: 10px; }
.preview-item { position: relative; display: inline-block; }
.preview-img { width: 100px; height: 100px; object-fit: cover; border-radius: 8px; border: 2px solid #eee; }
.password-hint { font-size: 1.4rem; color: #777; margin-top: 4px; }
.success-message { background: #4CAF50; color: white; padding: 20px 30px; border-radius: 12px; text-align: center; font-size: 1.8rem; line-height: 1.6; }
.referral-code-box { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 30px; border-radius: 15px; text-align: center; margin-bottom: 20px; }
.referral-code-display { font-size: 3rem; font-weight: bold; letter-spacing: 8px; margin: 20px 0; }
.btn-review { background-color: #4CAF50; border: none; color: #fff; padding: 6px 12px; font-size: 1.4rem; border-radius: 8px; }
.btn-review:hover { background-color: #45a049; }
@media (max-width: 768px) {
    .profile-header { padding: 25px 20px; }
    .profile-name { font-size: 2.2rem; }
    .info-grid { gap: 10px; }
    .info-item { min-width: 120px; padding: 12px 10px; }
    .info-label, .info-value { font-size: 1.4rem; }
    .tab-btn { font-size: 1.4rem; padding: 10px 5px; min-width: 80px; }
    .content-card { padding: 20px; }
    .referral-code-display { font-size: 2rem; letter-spacing: 4px; }
}

/* =========================================================
   카테고리 (category.php 에서 추출)
   ========================================================= */
.brand-banner { padding: 0; overflow: hidden; }
.brand-banner__inner {
    max-width: 1400px; margin: 0 auto;
    display: flex; align-items: center; justify-content: center;
    gap: 40px; flex-wrap: nowrap;
}
.brand-banner__images { display: flex; flex-direction: column; gap: 15px; flex: 0 0 auto; }
.banner-img { box-shadow: 0 10px 40px rgba(0,0,0,.15); border-radius: 16px; overflow: hidden; }
.banner-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.banner-img--tl { width: 180px; transform: rotate(-6deg); }
.banner-img--tr { width: 200px; transform: rotate(4deg) translateX(30px); }
.banner-img--bl { width: 200px; transform: rotate(5deg); }
.banner-img--br { width: 170px; transform: rotate(-4deg) translateX(-20px); }
.brand-banner__text { text-align: left; max-width: 1300px; flex: 0 1 auto; }
.brand-banner__text h2 { font-size: 20px; font-weight: 700; color: #111; margin: 0 0 16px; line-height: 1.3; word-break: keep-all; }
.brand-banner__text p  { font-size: 13px; color: #666; line-height: 1.8; margin: 0 0 32px; word-break: keep-all; }
.brand-banner__text strong { color: #111; }
.brand-banner__stats { display: flex; gap: 30px; justify-content: center; flex-wrap: wrap; }
.brand-banner__stats > div { text-align: center; }
.brand-banner__stats span { display: block; font-size: 20px; font-weight: 700; color: #111; }
.brand-banner__stats small { display: block; color: #666; font-size: 13px; margin-top: 5px; }
@media (max-width: 768px) {
    .brand-banner__images { display: none; }
    .brand-banner__text h2 { font-size: 20px; }
    .brand-banner__text p  { font-size: 13px; }
}

.cat-nav { border: none; border-radius: 0; overflow: visible; margin-bottom: 1rem; }
.cat-nav__row--primary {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 12px 16px; background: transparent; flex-direction: column;
}
.cat-nav__row--secondary {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 12px 16px; background: transparent; border-top: 2px solid var(--theme-primary); flex-direction: column;
}
.cat-nav__label { flex: 0 0 auto; font-size: 11px; font-weight: 700; color: #888; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; padding-top: 5px; min-width: 44px; }
.cat-nav__btns { display: flex; flex-wrap: wrap; gap: 6px; }
.cat-btn { padding: 5px 15px; border-radius: 999px; font-size: 13px; font-weight: 500; border: 1px solid #ddd; background: transparent; color: #333; cursor: pointer; transition: background .15s, color .15s, border-color .15s; white-space: nowrap; text-decoration: none; display: inline-block; }
.cat-btn:hover { background: #e0e0e0; color: #111; }
.cat-btn--primary.is-active, .cat-btn--primary.btn-secondary { background: var(--accent-color); color: var(--contrast-color); border-color: var(--accent-color); }
.cat-btn--secondary.btn-dark, .cat-btn--secondary.is-active { background: var(--theme-btn-bg); color: var(--theme-btn-txt); border-color: var(--theme-btn-bg); }
.cat-btn--secondary { background: #fff; border-color: #ccc; }
@media (max-width: 576px) {
    .cat-nav__row--primary, .cat-nav__row--secondary { padding: 10px 12px; flex-direction: column; gap: 8px; }
    .cat-btn { font-size: 12px; padding: 4px 12px; }
}

.best-section { background: #fff; padding: 30px 20px; border-radius: 15px; }
.best-section__title { text-align: center; font-size: 24px; font-weight: 600; margin-bottom: 30px; color: #333; }
.bestProductsSwiper { position: relative; padding-bottom: 30px; }
.bestProductsSwiper .swiper-slide { width: 250px; height: auto; }
.best-card { text-decoration: none; color: inherit; display: block; }
.best-card > * { background: #fff; border-radius: 10px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,.1); transition: transform .3s, box-shadow .3s; height: 100%; }
.best-card:hover > * { transform: translateY(-5px); box-shadow: 0 4px 12px rgba(0,0,0,.15); }
.best-card__img { position: relative; padding-top: 100%; overflow: hidden; background: transparent; }
.best-card__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.best-card__info { padding: 15px; }
.best-card__name { font-size: 14px; font-weight: 600; margin-bottom: 8px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.4; min-height: 40px; }
.best-card__price { font-size: 16px; font-weight: 700; color: #e63946; margin: 0; }
.bestProductsSwiper .swiper-button-next,
.bestProductsSwiper .swiper-button-prev { color: #333; background: #fff; width: 40px; height: 40px; border-radius: 50%; box-shadow: 0 2px 8px rgba(0,0,0,.15); }
.bestProductsSwiper .swiper-button-next::after,
.bestProductsSwiper .swiper-button-prev::after { font-size: 18px; font-weight: bold; }
.bestProductsSwiper .swiper-button-next:hover,
.bestProductsSwiper .swiper-button-prev:hover { background: var(--theme-btn-bg); color: var(--theme-btn-txt); }
.bestProductsSwiper .swiper-pagination { bottom: 0; }
.bestProductsSwiper .swiper-pagination-bullet { background: var(--theme-primary); opacity: .3; }
.bestProductsSwiper .swiper-pagination-bullet-active { opacity: 1; }
@media (max-width: 768px) {
    .bestProductsSwiper .swiper-slide { width: 180px; }
    .bestProductsSwiper .swiper-button-next, .bestProductsSwiper .swiper-button-prev { display: none; }
}
@media (max-width: 576px) {
    .bestProductsSwiper .swiper-slide { width: 160px; }
}

.pagination-dark { flex-wrap: wrap; gap: 4px; }
.pagination-dark .page-link { background: #fff; border: 1px solid #ddd; color: #333; padding: 8px 12px; min-width: 40px; text-align: center; }
.pagination-dark .page-link:hover { background: #f8f9fa; }
.pagination-dark .page-item.active .page-link { background: var(--theme-btn-bg); border-color: var(--theme-btn-bg); color: var(--theme-btn-txt); font-weight: bold; }
.pagination-dark .page-item.disabled .page-link { color: #999; }
@media (max-width: 576px) {
    .pagination-dark .page-link { padding: 3px 5px; font-size: 10px; min-width: 36px; }
    .pagination-dark { gap: 2px; }
}

/* =========================================================
   메인 페이지 (index.php 에서 추출)
   ========================================================= */

.mobile-bar-menu {
    display: flex;
    overflow-x: auto;  /* 가로 스크롤 */
    white-space: nowrap;
    /*background:   바 배경색 */
    padding: 10px 0;
}
.mobile-bar-menu ul {
    display: none; /* 기본 접힘 */
    padding: 0;
    margin: 0;
    list-style: none;
}
.mobile-bar-menu li {
margin-right: 5px;
    list-style: none;
}
.mobile-bar-menu a {
    font-size: small;

    text-decoration: none;
    color: #fff;
    font-weight: 500;
    padding: 5px 10px;
    display: block;
}

 
.hero-container {
    position: relative;
    overflow: hidden;
}

.overlay.bg-dark-luxury {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
 
    pointer-events: none;
}

.carousel-item video {
    display: block;
}

/* 모바일 최적화 */
@media (max-width: 768px) {
    .hero-container,
    .carousel-item video {
 
    }
}
     .icon {
          width: 70px;
          /* 원하는 크기로 조정 (예: 40px ~ 60px 추천) */
          height: auto;
          margin-bottom: 10px;
        }
        /* Slider */
        .slick-slide {
          margin: 0px 20px;
        }
        .slick-slide img {
          width: 100%;
        }
        .slick-slider {
          position: relative;
          display: block;
          box-sizing: border-box;
          -webkit-user-select: none;
          -moz-user-select: none;
          -ms-user-select: none;
          user-select: none;
          -webkit-touch-callout: none;
          -khtml-user-select: none;
          -ms-touch-action: pan-y;
          touch-action: pan-y;
          -webkit-tap-highlight-color: transparent;
        }
        .slick-list {
          position: relative;
          display: block;
          overflow: hidden;
          margin: 0;
          padding: 0;
        }
        .slick-list:focus {
          outline: none;
        }
        .slick-list.dragging {
          cursor: pointer;
          cursor: hand;
        }
        .slick-slider .slick-track,
        .slick-slider .slick-list {
          -webkit-transform: translate3d(0, 0, 0);
          -moz-transform: translate3d(0, 0, 0);
          -ms-transform: translate3d(0, 0, 0);
          -o-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
        }
        .slick-track {
          position: relative;
          top: 0;
          left: 0;
          display: block;
        }
        .slick-track:before,
        .slick-track:after {
          display: table;
          content: '';
        }
        .slick-track:after {
          clear: both;
        }
        .slick-loading .slick-track {
          visibility: hidden;
        }
        .slick-slide {
          display: none;
 
        }
        [dir='rtl'] .slick-slide {
          float: right;
        }
        .slick-slide img {
          display: block;
        }
        .slick-slide.slick-loading img {
          display: none;
        }
        .slick-slide.dragging img {
          pointer-events: none;
        }
        .slick-initialized .slick-slide {
          display: block;
        }
        .slick-loading .slick-slide {
          visibility: hidden;
        }
        .slick-vertical .slick-slide {
          display: block;
          height: auto;
          border: 1px solid transparent;
        }
        .slick-arrow.slick-hidden {
          display: none;
        }

      .container.section-title h2::after {
        display: none !important;
        background: none !important;
        border: none !important;
      }

      @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500;600&display=swap');
     .icon {
          width: 70px;
          /* 원하는 크기로 조정 (예: 40px ~ 60px 추천) */
          height: auto;
          margin-bottom: 10px;
        }
        /* Slider */
        .slick-slide {
    text-align: -webkit-center;
          margin: 0px 20px;
        }
        .slick-slide img {
    width: 100%;
    height: auto;
    max-height: 200px;
    max-width: 100px;
        }
        .slick-slider {
          position: relative;
          display: block;
          box-sizing: border-box;
          -webkit-user-select: none;
          -moz-user-select: none;
          -ms-user-select: none;
          user-select: none;
          -webkit-touch-callout: none;
          -khtml-user-select: none;
          -ms-touch-action: pan-y;
          touch-action: pan-y;
          -webkit-tap-highlight-color: transparent;
        }
        .slick-list {
          position: relative;
          display: block;
          overflow: hidden;
          margin: 0;
          padding: 0;
        }
        .slick-list:focus {
          outline: none;
        }
        .slick-list.dragging {
          cursor: pointer;
          cursor: hand;
        }
        .slick-slider .slick-track,
        .slick-slider .slick-list {
          -webkit-transform: translate3d(0, 0, 0);
          -moz-transform: translate3d(0, 0, 0);
          -ms-transform: translate3d(0, 0, 0);
          -o-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
        }
        .slick-track {
          position: relative;
          top: 0;
          left: 0;
          display: block;
    text-align: -webkit-center;
        }
        .slick-track:before,
        .slick-track:after {
          display: table;
          content: '';
        }
        .slick-track:after {
          clear: both;
        }
        .slick-loading .slick-track {
          visibility: hidden;
        }
        .slick-slide {
          display: none;
          float: left;
          height: 100%;
          min-height: 1px;
        }
        [dir='rtl'] .slick-slide {
          float: right;
        }
        .slick-slide img {
          display: block;
        }
        .slick-slide.slick-loading img {
          display: none;
        }
        .slick-slide.dragging img {
          pointer-events: none;
        }
        .slick-initialized .slick-slide {
          display: block;
        }
        .slick-loading .slick-slide {
          visibility: hidden;
        }
        .slick-vertical .slick-slide {
          display: block;
          height: auto;
          border: 1px solid transparent;
        }
        .slick-arrow.slick-hidden {
          display: none;
        }
      .promo-cards {
 
        padding: 0;
        margin: 0;

      }

      .promo-cards .grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-auto-rows: 150px;
      }

      .promo-cards .feature-item {
        border: 1px solid #eee;
        display: flex;
        justify-content: center;
        align-items: center;
        transition: all 0.37s ease;
        
      }

      .promo-cards .feature-item:hover {
        background: #111;
        border-color: #c5a34a;
        
      }

      .promo-cards .title {
text-align: -webkit-center;
  
        font-size: small;
        font-weight: 600;
        color: #111;
        letter-spacing: 1px;
        text-transform: uppercase;
        transition: color 0.3s ease;
      }

      .promo-cards .feature-item:hover .title {
        color: #c5a34a;
      }

      /* 항상 4개씩 유지 (모바일 포함) */
      @media (max-width: 768px) {
        .promo-cards .grid {
          grid-template-columns: repeat(4, 1fr);
          grid-auto-rows: 100px;
        }
        .promo-cards .title {
          font-size: 1.6rem;
        font-weight: 600;
        }
      }

/* 섹션 타이틀 */
.container.section-title h2::after {
  display: none !important;
  content: none !important;
  background: none !important;
  border: none !important;
}

/* 브랜드 필터 */
.category-filter {
  display: flex;
  gap: 10px;
  margin-bottom: 30px;
  border-bottom: 1px solid #e0e0e0;
  padding-bottom: 10px;
  flex-wrap: wrap;
}

.category-filter button,
.category-filter .filter-btn {
  background: none;
  border: none;
    padding: 15px 5px 0px 0px;
  cursor: pointer;
  font-size: 15px;
  color: #000;
    font-weight: bold;
  transition: all 0.3s;
  position: relative;
}

.category-filter button.active,
.category-filter .filter-btn.active {
  color: #000;
  font-weight: 600;
}

.category-filter button.active::after,
.category-filter .filter-btn.active::after {
  content: '';
  position: absolute;
  bottom: -11px;
  left: 0;
  right: 0;
  height: 2px;
  background: #000;
}

.category-filter button:hover,
.category-filter .filter-btn:hover {
  color: #000;
}

/* 상품 아이템 */
.product-item-wrapper {
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.product-item {
  transform: none !important;
  transition: none !important;
}

/* 상품 제목 */
.product-title {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2em;
  min-height: 3.6rem;
  margin-bottom: 0.5em;
}

.product-title a {
  color: inherit;
  text-decoration: none;
}

/* 가격 스타일 */
.product-price {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  min-height: 3em;
  line-height: 1.5em;
  font-size: small;
  margin-bottom: 0.5em;
}

.original-price {
  text-decoration: line-through;
  color: #999;
  font-size: 0.9em;
  margin-right: 3px;
}

.sale-price {
  color: #e63946;
  font-weight: bold;
}

.regular-price {
  color: #000;
}

/* 배지 */
.product-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 5px 12px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: bold;
  z-index: 10;
  color: #fff;
}

.sale-badge {
  background: #e63946;
}

.best-badge {
  background: #000;
}

.review-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-bottom:40px}
@media (max-width:768px){.review-grid{grid-template-columns:repeat(2,1fr);gap:15px}}
.review-card{border:1px solid #e0e0e0;border-radius:8px;overflow:hidden;transition:transform .2s,box-shadow .2s;background:#fff;display:flex;flex-direction:column;position:relative}
.review-card:hover{transform:translateY(-4px);box-shadow:0 4px 12px rgba(0,0,0,.1)}
.best-badge{position:absolute;top:10px;left:10px;background:#000;color:#fff;padding:5px 12px;border-radius:20px;font-size:11px;font-weight:bold;z-index:10;}
.review-card-img-link{display:block;width:100%}
.review-card-img{width:100%;aspect-ratio:1;object-fit:cover;background:transparent}
.review-card-body{padding:15px;flex-grow:1;display:flex;flex-direction:column}
.review-card-title{font-size:14px;font-weight:600;margin-bottom:8px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.4;min-height:40px;color:#212529;text-decoration:none}
.review-rating i{font-size:14px}
.review-meta{font-size:12px;color:#666;margin-bottom:8px}
.review-preview{font-size:13px;color:#444;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.5;margin-bottom:10px;flex-grow:1}

.review-panel-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.6);z-index:9998;opacity:0;visibility:hidden;transition:all .3s;backdrop-filter:blur(2px)}
.review-panel-overlay.active{opacity:1;visibility:visible}
.review-panel{position:fixed;top:0;right:-650px;width:650px;max-width:95vw;height:100%;background:#fff;z-index:9999;box-shadow:-4px 0 30px rgba(0,0,0,.3);transition:right .4s cubic-bezier(0.4,0,0.2,1);overflow-y:auto}
.review-panel.active{right:0}
.panel-header{position:sticky;top:0;background:#fff;padding:25px;border-bottom:2px solid #f0f0f0;display:flex;justify-content:space-between;align-items:center;z-index:10;box-shadow:0 2px 10px rgba(0,0,0,.05)}
.panel-close{background:#f8f9fa;border:none;font-size:24px;cursor:pointer;color:#666;transition:all .2s;width:45px;height:45px;display:flex;align-items:center;justify-content:center;border-radius:50%}
.panel-close:hover{color:#fff;transform:rotate(90deg)}
.panel-body{padding:30px}
.panel-images{margin-bottom:30px}
.panel-image-wrapper{position:relative;margin-bottom:15px;border-radius:16px;overflow:hidden;box-shadow:0 4px 15px rgba(0,0,0,.1)}
.panel-product-img,.panel-review-img{width:100%;display:block;cursor:zoom-in;transition:transform .3s}
.panel-image-wrapper:hover img{transform:scale(1.05)}
.panel-best-badge{display:inline-flex;align-items:center;gap:6px;background:#000;color:#fff;padding:10px 20px;border-radius:25px;font-size:15px;font-weight:bold;margin-bottom:20px;box-shadow:0 4px 15px rgba(255,215,0,.3)}
.panel-product-title{font-size:26px;font-weight:700;margin-bottom:20px;color:#212529;text-decoration:none;display:block}
.panel-product-title:hover{color:#FFD700}
.panel-rating{font-size:32px;margin-bottom:20px}
.panel-meta{padding:20px 25px;border-radius:16px;margin-bottom:30px;box-shadow:0 2px 10px rgba(0,0,0,.05)}
.panel-meta-item{display:flex;justify-content:space-between;margin-bottom:12px;font-size:15px}
.panel-comment{font-size:17px;line-height:1.9;color:#333;padding:30px;background:#f8f9fa;border-radius:16px;white-space:pre-wrap;margin-bottom:40px;}
.panel-other-reviews{border-top:3px solid #f0f0f0;padding-top:35px}
.panel-other-title{font-size:22px;font-weight:700;margin-bottom:25px}
.panel-other-item{padding:20px;background:#fff;border:2px solid #f0f0f0;border-radius:16px;margin-bottom:18px;cursor:pointer;transition:all .3s;display:flex;gap:15px}
.panel-other-item:hover{transform:translateX(-8px);}
.panel-other-content{flex:1}
.panel-other-preview{font-size:14px;color:#666;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.panel-other-thumb{width:80px;height:80px;border-radius:12px;object-fit:cover}
.image-lightbox{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.95);z-index:10000;cursor:zoom-out}
.image-lightbox img{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);max-width:90%;max-height:90%;border-radius:8px}
.lightbox-close{position:absolute;top:30px;right:30px;color:#fff;font-size:50px;cursor:pointer;width:60px;height:60px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.1);border-radius:50%;transition:all .2s}
.lightbox-close:hover{background:rgba(255,255,255,.2);transform:rotate(90deg)}

.view-all-reviews-btn {
    display: inline-block;
    padding: 12px 40px;
    background: #000;
    color: #fff;
    text-decoration: none;
    border-radius: 50px;
    font-weight: 600;
    transition: all 0.3s;
    border: 2px solid #000;
}

.view-all-reviews-btn:hover {
    background: #fff;
    color: #000;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,.2);
}

  @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;700&display=swap');

  .ohvely-section {
    font-family: 'Noto Sans KR', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: #222;
    line-height: 1.8;
  }

  .ohvely-section h2 {
    font-size: medium;
    font-weight: 700;
    line-height: 1.5;
    color: #000;
    margin-bottom: 1.5rem;
    word-break: keep-all;
  }

  .ohvely-section p {
    font-size: small;
    line-height: 1.85;
    color: #444;
    margin-bottom: 1.2rem;
  }

  .ohvely-section strong {
    font-weight: 600;
    color: #000;
  }

  .ohvely-section em {
    font-style: normal;
    font-weight: 500;
    color: #666;
  }

  .ohvely-section .highlight {
    background: linear-gradient(to bottom, transparent 60%, #ffe8a3 60%);
    font-weight: 500;
    padding: 0 2px;
  }

  .ohvely-section .img-container {
    margin-bottom: 2rem;
  }

  .ohvely-section .img-container img {
    width: 100%;
    max-height: 400px;
    object-fit: cover;
    border-radius: 8px;
    display: block;
  }

  .ohvely-section .check-list {
    list-style: none;
    padding: 0;
    margin: 1.5rem 0;
  }

  .ohvely-section .check-list li {
    padding: 0.6rem 0 0.6rem 1.5rem;
    position: relative;
    font-size: small;
    color: #444;
  }

  .ohvely-section .check-list li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: #c9a961;
    font-weight: 600;
  }

  .ohvely-section .quote-box {
    border-left: 3px solid #c9a961;
    padding-left: 1.5rem;
    margin: 1.5rem 0;
  }

  .ohvely-section .quote-box p {
    font-size: 1.1rem;
    font-weight: 500;
    color: #222;
    margin: 0;
  }

  .ohvely-section .brand-box {
    background: transparent;
    padding: 3rem 2rem;
    border-radius: 8px;
    text-align: center;
  }

  .ohvely-section .brand-logo {
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: 1px;
    color: #000;
    margin-bottom: 0.5rem;
  }

  .ohvely-section .brand-subtitle {
    font-size: 0.95rem;
    color: #888;
    margin-bottom: 0.3rem;
  }

  .ohvely-section .brand-tagline {
    font-size: 1.1rem;
    font-weight: 600;
    color: #222;
    margin-top: 1rem;
  }

  .ohvely-section .cta-btn {
    display: inline-block;
    padding: 1rem 2.5rem;
    background: #000;
    color: #fff;
    text-decoration: none;
    border-radius: 50px;
    font-weight: 600;
    font-size: 1rem;
    margin-top: 2rem;
  }

  .ohvely-section .section-spacing {
    margin-bottom: 5rem;
  }

  @media (max-width: 768px) {
    .ohvely-section h2 {
      font-size: 1.4rem;
    }

    .ohvely-section .img-container {
      margin-bottom: 2rem;
    }

    .ohvely-section .brand-box {
      padding: 2rem 1.5rem;
    }
  }

.recommended-swiper .product-item {
  cursor: pointer;
  transform: none;
  transition: transform 0.3s ease;
}

.recommended-swiper .product-item:hover {
  transform: translateY(-5px);
}

.recommended-swiper .product-image {
  position: relative;
  overflow: hidden;
  background: #fff;
}

.recommended-swiper .product-image img {
  width: 100%;
  height: auto;
  max-height: 400px;
  aspect-ratio: 1;
  transform: none;
  object-fit: contain;
  image-rendering: auto;
  transition: transform 0.3s ease;
}

.recommended-swiper .product-item:hover img {
  transform: scale(1.05);
}

.recommended-swiper .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  opacity: 0;
  transition: opacity 0.3s ease;
  text-align: center;
}

.recommended-swiper .product-item:hover .overlay {
  opacity: 1;
}

.recommended-swiper .overlay-title {
  font-weight: 600;
  font-size: 1.2rem;
  padding: 0 15px;
  word-break: keep-all;
}

.swiper-button-next,
.swiper-button-prev {
  color: #000;
  opacity: 0.3;
  transition: all 0.25s ease;
}

.swiper-button-next:hover,
.swiper-button-prev:hover {
  transform: none;
  opacity: 1;
}

.swiper-button-next::after,
.swiper-button-prev::after {
  font-size: 2rem;
}

.swiper-pagination-bullet {
  background: #333;
  opacity: 0.7;
}

.swiper-pagination-bullet-active {
  background: #c68a12;
}

/* 모바일 최적화 */
@media (max-width: 768px) {
  .recommended-swiper .product-image img {
    max-height: 300px;
  }
  
  .recommended-swiper .overlay-title {
    font-size: 1rem;
  }
}

/* =========================================================
   다크모드 전역 오버라이드 ([data-theme="dark"] on <html>)
   header.php에서 theme_dark_mode=1 일 때 :root 변수도 재정의됨
   ========================================================= */
[data-theme="dark"] .card,
[data-theme="dark"] .modal-content,
[data-theme="dark"] .dropdown-menu {
  background-color: var(--surface-color) !important;
  color: var(--default-color) !important;
  border-color: #444 !important;
}
[data-theme="dark"] .form-control,
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="email"],
[data-theme="dark"] input[type="password"],
[data-theme="dark"] input[type="search"],
[data-theme="dark"] input[type="number"],
[data-theme="dark"] textarea,
[data-theme="dark"] select {
  background-color: #2d2d2d !important;
  color: #e0e0e0 !important;
  border-color: #555 !important;
}
[data-theme="dark"] .form-control::placeholder {
  color: #888 !important;
}
[data-theme="dark"] .table {
  color: var(--default-color);
}
[data-theme="dark"] .table td,
[data-theme="dark"] .table th {
  border-color: #444;
}
[data-theme="dark"] hr {
  border-color: #444;
}
[data-theme="dark"] .breadcrumb-item,
[data-theme="dark"] .breadcrumb-item a {
  color: #aaa;
}
[data-theme="dark"] .footer {
  background-color: #111 !important;
}
[data-theme="dark"] .header {
  background-color: #111 !important;
}


/* =========================================================
   Promo Cards (index.php)
   ========================================================= */
.promo-card {
  border: 1px solid rgba(201,169,110,.3);
  border-radius: 8px;
  transition: border-color .2s, transform .2s, background .2s;
  color: var(--default-color);
  background: var(--surface-color, #fff);
}
.promo-card:hover {
  border-color: var(--accent-color);
  transform: translateY(-4px);
  color: var(--accent-color);
}
.promo-card-icon {
  font-size: 2.4rem;
  color: var(--accent-color);
}

/* =========================================================
   Features Strip (index.php)
   ========================================================= */
.features-strip {
  border-top: 1px solid rgba(201,169,110,.2);
  border-bottom: 1px solid rgba(201,169,110,.2);
}
.feature-strip-icon {
  font-size: 2rem;
  color: var(--accent-color);
  display: block;
}

/* =========================================================
   Dark Luxury mode overrides
   ========================================================= */
[data-theme="dark"] .promo-card {
  background: #111 !important;
  border-color: rgba(201,169,110,.2) !important;
  color: #d4c5a9 !important;
}
[data-theme="dark"] .promo-card:hover {
  border-color: var(--accent-color) !important;
}
[data-theme="dark"] .best-sellers,
[data-theme="dark"] .secondary-background {
  background-color: #111 !important;
}
[data-theme="dark"] .ohvely-section {
  background-color: var(--background-color);
}
[data-theme="dark"] .ohvely-section h2,
[data-theme="dark"] .ohvely-section h3 {
  color: var(--heading-color);
}
[data-theme="dark"] .section-title h2 {
  color: var(--heading-color);
}
[data-theme="dark"] .review-card {
  background: #1a1a1a !important;
  border-color: #333 !important;
}
[data-theme="dark"] body {
  background-color: var(--background-color) !important;
}

/* =========================================================
   메인 페이지 — 섹션 헤더
   ========================================================= */
.prd-section {
  padding: 48px 0;
}
.prd-section-header {
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid #e8e8e8;
}
.prd-section-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--heading-color, #000);
}

/* =================================================================
   OHVELY — Design System v3  (B&W Minimal Luxury)
   ================================================================= */

/* ── Base ─────────────────────────────────────────────────────── */
*, *::before, *::after { -webkit-tap-highlight-color: transparent; }
body { -webkit-font-smoothing: antialiased; }
img { display: block; }

/* ── Announcement bar ────────────────────────────────────────── */
.header .top-bar, .top-bar {
  font-size: 11px !important;
  letter-spacing: 0.15em !important;
  padding: 7px 0 !important;
  font-weight: 500 !important;
}

/* ── Main header ─────────────────────────────────────────────── */
.header .main-header {
  border-bottom: 1px solid #f0f0f0 !important;
  padding: 0 !important;
}
.header .main-header .logo img { max-height: 30px !important; }
.header .main-header .logo .sitename {
  font-size: 15px;
  font-weight: 900;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}

/* ── Search ──────────────────────────────────────────────────── */
.header .search-form .input-group {
  border: none !important;
  border-bottom: 1px solid #ddd !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.header .search-form .input-group:focus-within { border-bottom-color: #111 !important; }
.header .search-form .input-group .form-control {
  font-size: 13px !important;
  padding: 8px 0 !important;
}
.header .search-form .input-group .form-control::placeholder { color: #c8c8c8 !important; }
.header .search-form .input-group .btn {
  background: transparent !important;
  color: #aaa !important;
  border-radius: 0 !important;
}
.header .search-form .input-group .btn:hover { color: #111 !important; }

/* ── Nav (desktop) ───────────────────────────────────────────── */
@media (min-width: 1200px) {
  .navmenu > ul > li > a,
  .navmenu > ul > li > a:focus {
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    padding: 16px 20px !important;
  }
}

/* ── Mobile bar ──────────────────────────────────────────────── */
nav.mobile-bar-menu {
  border-top: 1px solid #f0f0f0 !important;
  border-bottom: 1px solid #f0f0f0 !important;
  background: #fff !important;
  padding: 0 !important;
  scrollbar-width: none !important;
}
nav.mobile-bar-menu::-webkit-scrollbar { display: none; }
nav.mobile-bar-menu ul {
  flex-wrap: nowrap !important;
  gap: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}
nav.mobile-bar-menu ul li a {
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: #555 !important;
  padding: 11px 14px !important;
  white-space: nowrap !important;
}
nav.mobile-bar-menu ul li a:hover { color: #000 !important; }

/* ── Dropdown ────────────────────────────────────────────────── */
.header .account-dropdown .dropdown-menu,
.header .main-header .account-dropdown .dropdown-menu {
  border-radius: 0 !important;
  border: 1px solid #efefef !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.06) !important;
}

/* ── Hero Swiper ─────────────────────────────────────────────── */
.hero-swiper-wrap { width: 100%; background: transparent; }
.heroSwiper { width: 100%; }
.heroSwiper .swiper-slide { overflow: hidden; }

/* 세로(portrait) 비율 슬라이드 */
.hero-slide-link {
  display: block;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  text-decoration: none;
}
.hero-slide-link img,
.hero-slide-link video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 모바일 페이지네이션 */
.heroSwiper-pg { bottom: 12px !important; }
.heroSwiper-pg .swiper-pagination-bullet-active { background: #111 !important; }

/* PC: 페이지네이션 숨김 */
@media (min-width: 768px) {
  .heroSwiper-pg { display: none !important; }
}

/* ── Page title ──────────────────────────────────────────────── */
.page-title {
  background: #fff !important;
  border-bottom: 0px solid #f0f0f0 !important;
  padding: 24px 0 !important;
}
.page-title h1 {
  font-size: 1.1rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  margin: 0 !important;
}

/* ── Section (index NEW/BEST) ────────────────────────────────── */
.prd-section { padding: 56px 0 72px !important; }
.prd-section + .prd-section { padding-top: 0 !important; }
.prd-section-header {
  display: flex !important;
  align-items: baseline !important;
  justify-content: space-between !important;
  margin-bottom: 20px !important;
  border-bottom: none !important;
  padding-bottom: 0 !important;
}
.prd-section-label {
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.4em !important;
  text-transform: uppercase !important;
  color: #111 !important;
}

/* ── Filter tabs ─────────────────────────────────────────────── */
.category-filter {
  display: flex !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  scrollbar-width: none !important;
  gap: 0 !important;
  margin-bottom: 20px !important;
  padding-bottom: 0 !important;
  border-bottom: none !important;
}
.category-filter::-webkit-scrollbar { display: none; }
.category-filter .filter-btn,
.category-filter button {
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: #c0c0c0 !important;
  padding: 4px 16px 4px 0 !important;
  border: none !important;
  background: transparent !important;
  cursor: pointer !important;
  transition: color 0.2s !important;
  white-space: nowrap !important;
  bottom: auto !important;
  position: relative !important;
}
.category-filter .filter-btn:hover,
.category-filter button:hover { color: #666 !important; }
.category-filter .filter-btn.active,
.category-filter button.active {
  color: #111 !important;
  font-weight: 700 !important;
}
.category-filter .filter-btn.active::after,
.category-filter button.active::after { display: none !important; }

/* ── PRODUCT CARD ─────────────────────────────────────────────── */
.pcard-col { padding: 1px; }
.pcard {
  cursor: pointer;
  display: block;
  background: #fff;
}

/* Square image */
.pcard-img {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  background: transparent;
}
.pcard-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.pcard:hover .pcard-img img { transform: scale(1.06); }

/* Overlay — slides up on hover (desktop) / always visible (touch) */
.pcard-overlay {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  background: rgba(0, 0, 0, 0.54);
  padding: 10px 12px 13px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  opacity: 0;
  transform: translateY(5px);
  transition: opacity 0.28s ease, transform 0.28s ease;
}
.pcard:hover .pcard-overlay {
  opacity: 1;
  transform: translateY(0);
}
@media (hover: none) {
  .pcard-overlay {
    opacity: 1;
    transform: none;
  }
}
.pcard-name {
  font-size: 11.5px;
  font-weight: 500;
  color: #fff;
  line-height: 1.45;
  margin: 0;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.pcard-price {
  font-size: 12.5px;
  font-weight: 700;
  color: #fff;
  margin: 0;
  letter-spacing: 0.01em;
}

/* Info below image — visible when used (e.g. category page) */
.pcard-info {
  padding: 9px 3px 16px;
}
.pcard-info .pcard-name {
  color: #444;
  font-weight: 400;
}
.pcard-info .pcard-price {
  color: #111;
  font-size: 13px;
      justify-self: center;
}

/* ── Load more ───────────────────────────────────────────────── */
.prd-load-more {
  font-size: 10px !important;
  letter-spacing: 0.28em !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
  padding: 13px 52px !important;
  margin-top: 44px !important;
  border: 1px solid #111 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #111 !important;
  cursor: pointer !important;
  transition: background 0.2s, color 0.2s !important;
}
.prd-load-more:hover { background: #111 !important; color: #fff !important; }
.prd-load-more:disabled { border-color: #ddd !important; color: #ddd !important; cursor: default !important; }

/* ── Buttons ─────────────────────────────────────────────────── */
.btn-blk, a.btn-blk {
  display: inline-block;
  background: #111;
  color: #fff !important;
  border: 1px solid #111;
  padding: 15px 36px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  cursor: pointer;
  text-align: center;
  transition: background 0.2s, color 0.2s;
  line-height: 1;
  text-decoration: none;
}
.btn-blk:hover, a.btn-blk:hover { background: #333; border-color: #333; color: #fff !important; }
.btn-outline-blk, a.btn-outline-blk {
  display: inline-block;
  background: transparent;
  color: #111 !important;
  border: 1px solid #111;
  padding: 13px 32px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  cursor: pointer;
  text-align: center;
  transition: background 0.2s, color 0.2s;
  line-height: 1;
  text-decoration: none;
}
.btn-outline-blk:hover, a.btn-outline-blk:hover { background: #111; color: #fff !important; }

/* ── Cart ────────────────────────────────────────────────────── */
.cart-thumb {
  width: 88px;
  height: 88px;
  object-fit: cover;
  flex-shrink: 0;
  background: transparent;
}
.cart-product-name { font-size: 13px; font-weight: 500; color: #222; line-height: 1.5; }
.cart-size-badge {
  display: inline-block;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 1px solid #ddd;
  padding: 2px 8px;
  color: #777;
}
.btn-size-edit {
  font-size: 10px;
  letter-spacing: 0.08em;
  background: none;
  border: 1px solid #ddd;
  padding: 2px 8px;
  cursor: pointer;
  color: #888;
  transition: all 0.15s;
}
.btn-size-edit:hover { border-color: #111; color: #111; background: transparent; }
.member-info-card {
  border: 1px solid #ececec;
  padding: 22px 26px;
  margin-bottom: 24px;
  background: transparent;
}
.level-badge-lg {
  display: inline-block;
  background: #111;
  color: #fff;
  padding: 6px 14px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.member-name { font-size: 15px; font-weight: 700; margin-top: 8px; color: #111; }
.member-discount { font-size: 12px; color: #888; margin-top: 3px; }
.points-info { font-size: 12px; color: #777; }
.points-label { margin-right: 4px; }
.points-value { font-weight: 600; color: #333; }
.cart-summary {
  border: 1px solid #ececec;
  padding: 28px;
  margin-top: 28px;
  background: transparent;
}
.cart-summary h4 {
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.28em !important;
  text-transform: uppercase !important;
  color: #444;
  border-bottom: 1px solid #e8e8e8;
  padding-bottom: 14px !important;
  margin-bottom: 16px !important;
}
.summary-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  font-size: 13px;
  color: #666;
}
.summary-item.discount-item .summary-value { color: #b00; }
.summary-divider { border: none; border-top: 1px solid #ececec; margin: 8px 0; }
.summary-final {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 14px 0 0;
  border-top: 1px solid #111;
  margin-top: 8px;
}
.summary-final .summary-label {
  font-size: 11px;
  font-weight: 700;
  color: #111;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.summary-final .summary-value {
  font-size: 19px;
  font-weight: 800;
  color: #111;
  letter-spacing: -0.01em;
}
.summary-points .summary-value { color: #2a7a3a; font-size: 13px; font-weight: 600; }
.mobile-label { font-size: 10px; color: #aaa; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 2px; }

/* ── Checkout ────────────────────────────────────────────────── */
.checkout-form-section {
  border: 1px solid #ececec;
  padding: 28px;
  margin-bottom: 20px;
  background: #fff;
}
.checkout-form-section h5 {
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.28em !important;
  text-transform: uppercase !important;
  color: #444;
  border-bottom: 1px solid #ececec;
  padding-bottom: 14px !important;
  margin-bottom: 22px !important;
}
.checkout-order-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid #f0f0f0;
}
.checkout-order-item:last-of-type { border-bottom: none; }
.checkout-order-thumb {
  width: 64px;
  height: 64px;
  object-fit: cover;
  flex-shrink: 0;
  background: transparent;
}

/* ── Login ───────────────────────────────────────────────────── */
.auth-container { max-width: 480px; margin: 0 auto; }
.auth-form { display: none; }
.auth-form.active { display: block; }
.form-header { margin-bottom: 32px; }
.form-header h3 {
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  margin-bottom: 6px;
  color: #111;
}
.form-header p { font-size: 12px; color: #aaa; }
.auth-btn.primary-btn {
  display: block;
  width: 100%;
  padding: 15px;
  background: #111;
  color: #fff;
  border: none;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  cursor: pointer;
  margin-top: 8px;
  transition: background 0.2s;
}
.auth-btn.primary-btn:hover { background: #333; }
.switch-form { margin-top: 24px; font-size: 12px; color: #aaa; text-align: center; }
.switch-btn {
  color: #111;
  font-weight: 700;
  text-decoration: underline;
  background: none;
  border: none;
  cursor: pointer;
  margin-left: 4px;
  font-size: 12px;
}

/* Forgot modal */
.forgot-modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.42);
  z-index: 9999;
  align-items: center;
  justify-content: center;
}
.forgot-modal.active,
.forgot-modal.show { display: flex; }
.forgot-modal-content {
  background: #fff;
  max-width: 440px;
  width: 90%;
  padding: 36px;
}
.forgot-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #f0f0f0;
  padding-bottom: 16px;
  margin-bottom: 24px;
}
.forgot-modal-header h3 {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin: 0;
  color: #111;
}
.close-modal { background: none; border: none; font-size: 20px; cursor: pointer; color: #aaa; line-height: 1; }
.close-modal:hover { color: #111; }
.forgot-info { font-size: 12px; background: #f7f7f7; padding: 12px 14px; margin-bottom: 20px; color: #777; line-height: 1.6; }
.forgot-btn {
  width: 100%;
  padding: 15px;
  background: #111;
  color: #fff;
  border: none;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  cursor: pointer;
  margin-top: 16px;
}
.forgot-btn:hover { background: #333; }
.alert-box { padding: 10px 14px; font-size: 12px; margin-bottom: 12px; border-left: 2px solid; }
.alert-error { background: #fff8f8; color: #b00; border-color: #b00; }
.alert-success { background: #f0fdf4; color: #2a7a3a; border-color: #2a7a3a; }

/* ── Product Details ─────────────────────────────────────────── */
.product-name {
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: -0.01em;
  margin: 14px 0;
  color: #111;
}
.pricing-section {
  padding: 18px 0;
  border-top: 1px solid #f0f0f0;
  border-bottom: 1px solid #f0f0f0;
  margin: 16px 0;
}
.pricing-section .sale-price {
  font-size: 1.5rem;
  font-weight: 800;
  color: #111;
  letter-spacing: -0.02em;
}
.pricing-section .regular-price {
  font-size: 0.9rem;
  color: #bbb;
  text-decoration: line-through;
  margin-left: 10px;
}
.discount-percent { font-size: 12px; color: #b00; font-weight: 600; white-space: nowrap; }
.discount-badges-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.product-badges { display: flex; gap: 6px; flex-wrap: wrap; }
.product-badge {
  display: inline-block;
  padding: 3px 8px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  white-space: nowrap;
}
.product-badge.badge-outline-dark { color: #111; border: 1px solid #111; background: #fff; }
.product-badge.badge-outline-danger { color: #b00; border: 1px solid #b00; background: #fff; }
.product-badge.badge-black-yellow { background: #111; color: #ffd700; }
.product-badge.badge-black-red { background: #111; color: #f00; }
.subcategory-list { font-size: 12px; color: #999; margin-bottom: 10px; }
.product-specs-table { width: 100%; border-collapse: collapse; margin-top: 1rem; font-size: 13px; }
.product-specs-table th,
.product-specs-table td { padding: 10px 12px; text-align: left; border-bottom: 1px solid #f0f0f0; }
.product-specs-table th { width: 35%; color: #aaa; font-weight: 600; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; background: transparent; }
.product-specs-table td { color: #333; }
.product-specs-table tr:last-child th,
.product-specs-table tr:last-child td { border-bottom: none; }
.thumbnail-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin-top: 6px; }
.thumbnail-wrapper { aspect-ratio: 1; overflow: hidden; border: 2px solid transparent; cursor: pointer; background: #f4f4f4; }
.thumbnail-wrapper.active { border-color: #111; }
.thumbnail-media { width: 100%; height: 100%; object-fit: cover; }

/* ── Category page nav ───────────────────────────────────────── */
.cat-nav { margin-bottom: 24px; }
.cat-nav__row { display: flex; align-items: center; flex-wrap: wrap; }
.cat-nav__label { display: none; }
.cat-btn {
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: #c0c0c0 !important;
  padding: 8px 14px 8px 0 !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  background: transparent !important;
  cursor: pointer !important;
  transition: color 0.15s !important;
  white-space: nowrap !important;
  margin-right: 6px !important;
}
.cat-btn:hover { color: #666 !important; }
.cat-btn.is-active,
.cat-btn.btn-dark { color: #111 !important;  font-weight: 700 !important; background: transparent !important; }
.cat-btn--secondary { font-size: 10px !important; color: #ccc !important; padding: 6px 12px 6px 0 !important; }

/* Sort select */
.product-sort .form-select {
  border-radius: 0 !important;
  border: 1px solid #e8e8e8 !important;
  font-size: 12px !important;
  color: #555 !important;
  box-shadow: none !important;
}
.product-sort .form-select:focus { border-color: #111 !important; box-shadow: none !important; }

/* ── Kakao button ────────────────────────────────────────────── */
.kakao-cs-btn {
  border-radius: 50% !important;
  box-shadow: 0 2px 16px rgba(0,0,0,0.12) !important;
}
.pcard {
  position: relative;
  cursor: pointer;
  overflow: hidden;
  display: block;
  background: none;
}
.pcard-img {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
}
.pcard-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}
.pcard:hover .pcard-img img,
.pcard.is-touched .pcard-img img {
  transform: scale(1.04);
}
.pcard-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.44);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  opacity: 0;
  transition: opacity 0.28s ease;
  pointer-events: none;
}
.pcard:hover .pcard-overlay,
.pcard.is-touched .pcard-overlay {
  opacity: 1;
}
.pcard-name {
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-align: center;
  padding: 0 14px;
  line-height: 1.4;
  max-width: 100%;
}
.pcard-price {
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.03em;
}

/* =========================================================
   메인 페이지 — 더보기 버튼
   ========================================================= */
.prd-load-more {
  display: inline-block;
  background: none;
  border: 1px solid var(--heading-color, #111);
  color: var(--heading-color, #111);
  padding: 10px 36px;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
  margin-top: 8px;
}
.prd-load-more:hover {
  background: var(--heading-color, #111);
  color: var(--contrast-color, #fff);
}
.prd-load-more:disabled {
  border-color: #ccc;
  color: #ccc;
  cursor: default;
  background: none;
}

/* =================================================================
   OHVELY — Design Refinement (clean B&W minimal)
   ================================================================= */

/* ── Base ───────────────────────────────────────────────────────── */
* { -webkit-tap-highlight-color: transparent; }
body { 
font-size:small;
-webkit-font-smoothing: antialiased; }

/* ── Announcement bar ─────────────────────────────────────────── */
.header .top-bar,
.top-bar {
  font-size: 11px !important;
  letter-spacing: 0.12em !important;
  padding-top: 6px !important;
  padding-bottom: 6px !important;
}

/* ── Main header ──────────────────────────────────────────────── */
.header .main-header {
  border-bottom: 1px solid #ebebeb !important;
  padding: 0;
}
.header .main-header .logo img {
  max-height: 32px !important;
}
.header .main-header .logo .sitename {
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.25em;
  text-transform: uppercase;
}

/* ── Search box — underline style ────────────────────────────── */
.header .search-form .input-group {
  border: 1px solid #ddd !important;
     border-radius: 5px !important;
  background: transparent !important;
  box-shadow: none !important;
}
.header .search-form .input-group:focus-within {
  border-bottom-color: #000 !important;
  box-shadow: none !important;
}
.header .search-form .input-group .form-control {
  font-size: 13px !important;
  padding: 8px 0 !important;
  letter-spacing: 0.02em;
}
.header .search-form .input-group .form-control::placeholder {
  font-size: 12px !important;
  letter-spacing: 0.04em;
  color: #bbb !important;
}
.header .search-form .input-group .btn {
  background: transparent !important;
  color: #555 !important;
  padding: 0 10px !important;
  border-radius: 0 !important;
  margin: 0 !important;
}
.header .search-form .input-group .btn:hover { color: #000 !important; }
.header .search-form .input-group .btn i { font-size: 15px !important; }

/* ── Header nav bar (desktop: black bg) ──────────────────────── */
@media (min-width: 1200px) {
  .header .header-nav {
    border-bottom: none;
  }
  .navmenu ul { margin: 0; padding: 0; }
  .navmenu > ul > li > a,
  .navmenu > ul > li > a:focus {
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    padding: 14px 18px !important;
  }
}

/* ── Mobile bar menu ─────────────────────────────────────────── */
nav.mobile-bar-menu {
  border-top: 1px solid #f0f0f0 !important;
  border-bottom: 1px solid #f0f0f0 !important;
  background: #fff !important;
  padding: 0 !important;
  scrollbar-width: none !important;
}
nav.mobile-bar-menu::-webkit-scrollbar { display: none; }
nav.mobile-bar-menu ul {
  flex-wrap: nowrap !important;
  gap: 0 !important;
  padding: 0 4px !important;
  margin: 0 !important;
}
nav.mobile-bar-menu ul li a {

  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.09em !important;
  text-transform: uppercase !important;
  color: #444 !important;
  padding: 10px 11px !important;
  white-space: nowrap !important;
}
nav.mobile-bar-menu ul li a:hover { color: #000 !important; }

/* ── Section header ──────────────────────────────────────────── */
.prd-section { padding: 44px 0 60px !important; }
.prd-section + .prd-section { padding-top: 0 !important; }
.prd-section-header {
  display: flex !important;
  align-items: flex-end !important;
  justify-content: space-between !important;
  border-bottom: 2px solid #111 !important;
  padding-bottom: 10px !important;
  margin-bottom: 18px !important;
}
.prd-section-label {
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.3em !important;
  text-transform: uppercase !important;
  color: #000 !important;
  line-height: 1;
}

/* ── Filter tabs ─────────────────────────────────────────────── */
.category-filter {
  display: flex !important;
  flex-wrap: nowrap !important;
  overflow-x: auto;
  scrollbar-width: none;
  gap: 0 !important;
  border-bottom: 1px solid #e0e0e0 !important;
  margin-bottom: 18px !important;
  padding-bottom: 0 !important;
}
.category-filter::-webkit-scrollbar { display: none; }
.category-filter .filter-btn,
.category-filter button {
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: #aaa !important;
  padding: 10px 14px !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  background: transparent !important;
  cursor: pointer !important;
  transition: color 0.15s, border-color 0.15s !important;
  white-space: nowrap !important;
  position: relative !important;
  bottom: -1px !important;
}
.category-filter .filter-btn:hover,
.category-filter button:hover { color: #555 !important; }
.category-filter .filter-btn.active,
.category-filter button.active {
  color: #000 !important;
  border-bottom-color: #000 !important;
  font-weight: 700 !important;
}
.category-filter .filter-btn.active::after,
.category-filter button.active::after { display: none !important; }

/* ── Load more button ────────────────────────────────────────── */
.prd-load-more {
  font-size: 11px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
  padding: 12px 52px !important;
  margin-top: 36px !important;
  border: 1px solid #111 !important;
  border-radius: 0 !important;
}
.prd-load-more:hover {
  background: #111 !important;
  color: #fff !important;
}
.prd-load-more:disabled {
  border-color: #ccc !important;
  color: #ccc !important;
  background: transparent !important;
}

/* ── Hero — no extra margins ─────────────────────────────────── */
#heroCarousel {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  border-radius: 0 !important;
}

/* ── Dropdown menus ──────────────────────────────────────────── */
.header .account-dropdown .dropdown-menu,
.header .main-header .account-dropdown .dropdown-menu {
  border-radius: 0 !important;
  border: 1px solid #e0e0e0 !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.08) !important;
}

/* ── Kakao CS floating button ────────────────────────────────── */
.kakao-cs-btn {
  border-radius: 50% !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.15) !important;
}

/* =========================================================
   공통 버튼 시스템
   ========================================================= */
.btn-blk {
  background: #111;
  color: #fff;
  border: none;
  padding: 14px 32px;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-radius: 0;
  cursor: pointer;
  display: inline-block;
  text-align: center;
  transition: background 0.2s;
}
.btn-blk:hover { background: #333; color: #fff; }
.btn-outline-blk {
  background: transparent;
  color: #111;
  border: 1.5px solid #111;
  padding: 12px 28px;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: 0;
  cursor: pointer;
  display: inline-block;
  text-align: center;
  transition: background 0.2s, color 0.2s;
}
.btn-outline-blk:hover { background: #111; color: #fff; }

/* =========================================================
   Product Details 페이지
   ========================================================= */
.product-name {
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.4;
  margin: 12px 0;
}
.pricing-section {
  border-top: 1px solid #f0f0f0;
  border-bottom: 1px solid #f0f0f0;
  padding: 16px 0;
  margin: 16px 0;
}
.pricing-section .sale-price {
  font-size: 1.6rem;
  font-weight: 800;
  color: #111;
}
.pricing-section .regular-price {
  font-size: 1rem;
  color: #999;
  text-decoration: line-through;
  margin-left: 8px;
}
.discount-percent {
  font-size: 0.9rem;
  color: #dc3545;
  font-weight: 600;
  white-space: nowrap;
}

/* 뱃지 컨테이너 */
.product-badges { display: flex; gap: 6px; flex-wrap: wrap; }

/* 뱃지 스타일 */
.product-badge {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 1px;
  font-size: 0.85rem;
  font-weight: 700;
  white-space: nowrap;
}
.product-badge.badge-outline-dark { background: #fff; color: #000; border: 1.5px solid #000; }
.product-badge.badge-outline-danger { background: #fff; color: #dc3545; border: 1.5px solid #dc3545; }
.product-badge.badge-black-yellow { background: #000; color: #ffd700; border: 2px solid #000; }
.product-badge.badge-black-red { background: #000; color: #ff0000; border: 2px solid #000; }

.discount-badges-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.subcategory-list { font-size: 0.9rem; color: #666; margin-bottom: 10px; }

.product-specs-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 1rem;
  background: #fff;
  border: 1px solid #eee;
  font-size: 14px;
}
.product-specs-table th,
.product-specs-table td { padding: 8px 12px; vertical-align: middle; }
.product-specs-table th {
  width: 30%;
  background-color: transparent;
  font-weight: 600;
  color: #333;
  text-align: left;
  border-bottom: 1px solid #eee;
}
.product-specs-table td { color: #555; border-bottom: 1px solid #f0f0f0; }
.product-specs-table tr:last-child th,
.product-specs-table tr:last-child td { border-bottom: none; }
.thumbnail-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin-top: 8px;
}
.thumbnail-wrapper {
  aspect-ratio: 1;
  overflow: hidden;
  border: 2px solid transparent;
  cursor: pointer;
}
.thumbnail-wrapper.active { border-color: #111; }
.thumbnail-media { width: 100%; height: 100%; object-fit: cover; }

/* =========================================================
   Cart 페이지
   ========================================================= */
.cart-thumb {
  width: 80px;
  height: 80px;
  object-fit: cover;
  flex-shrink: 0;
}
.cart-product-name { font-size: 14px; font-weight: 600; }
.cart-size-badge {
  font-size: 11px;
  border: 1px solid #ddd;
  padding: 2px 8px;
  display: inline-block;
}
.btn-size-edit {
  font-size: 11px;
  background: none;
  border: 1px solid #aaa;
  padding: 2px 8px;
  cursor: pointer;
  letter-spacing: 0.05em;
}
.btn-size-edit:hover { border-color: #111; background: #111; color: #fff; }
.member-info-card {
  background: transparent;
  padding: 20px;
  border: 1px solid #eee;
  margin-bottom: 20px;
}
.level-badge-lg {
  background: #111;
  color: #fff;
  padding: 8px 16px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  display: inline-block;
}
.member-name { font-size: 15px; font-weight: 700; }
.member-discount { font-size: 13px; color: #666; }
.points-info { font-size: 13px; }
.cart-summary {
  background: transparent;
  padding: 24px;
  margin-top: 24px;
}
.cart-summary h4 {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  border-bottom: 2px solid #111;
  padding-bottom: 10px;
  margin-bottom: 16px;
}
.summary-item {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  font-size: 14px;
}
.summary-item.discount-item .summary-value { color: #dc3545; }
.summary-divider { border-top: 1px solid #e0e0e0; margin: 8px 0; }
.summary-final {
  font-size: 16px;
  font-weight: 800;
  border-top: 2px solid #111;
  padding-top: 12px;
  margin-top: 4px;
}
.summary-points .summary-value { color: #198754; }
.mobile-label {
  font-size: 11px;
  color: #999;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 2px;
}

/* =========================================================
   Checkout 페이지
   ========================================================= */
/* checkout 중복 제거 */

/* =========================================================
   Login 페이지
   ========================================================= */
.auth-container { max-width: 540px; margin: 0 auto; }
.auth-form { display: none; }
.auth-form.active { display: block; }
.form-header h3 {
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: 4px;
}
.form-header p { font-size: 13px; color: #888; margin-bottom: 24px; }
.auth-btn.primary-btn {
  display: block;
  width: 100%;
  padding: 14px;
  background: #111;
  color: #fff;
  border: none;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  text-align: center;
}
.auth-btn.primary-btn:hover { background: #333; }
.switch-form { margin-top: 20px; font-size: 13px; color: #888; text-align: center; }
.switch-btn {
  color: #111;
  font-weight: 700;
  text-decoration: underline;
  background: none;
  border: none;
  cursor: pointer;
  margin-left: 6px;
}

/* 비밀번호 찾기 모달 */
.forgot-modal {
  display: none;
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.5);
  z-index: 9999;
  align-items: center;
  justify-content: center;
}
.forgot-modal.active,
.forgot-modal.show { display: flex; }
.forgot-modal-content {
  background: #fff;
  max-width: 440px;
  width: 90%;
  padding: 32px;
}
.forgot-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 2px solid #111;
  padding-bottom: 12px;
  margin-bottom: 20px;
}
.forgot-modal-header h3 { font-size: 1.1rem; font-weight: 800; margin: 0; }
.close-modal {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: #999;
}
.forgot-info {
  font-size: 13px;
  background: transparent;
  padding: 12px;
  margin-bottom: 16px;
  color: #555;
}
.forgot-btn {
  width: 100%;
  padding: 14px;
  background: #111;
  color: #fff;
  border: none;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  margin-top: 16px;
}
.forgot-btn:hover { background: #333; }
.alert-box {
  padding: 10px 14px;
  font-size: 13px;
  margin-bottom: 12px;
}
.alert-error { background: #fef2f2; color: #dc3545; }
.alert-success { background: #f0fdf4; color: #198754; }


/* ═══════════════════════════════════════════════
   카테고리 페이지 — 상품 카드 (cat-card)
   ═══════════════════════════════════════════════ */

/* 컬럼 자체 — 높이 맞춤 */
.cat-item {
  display: flex;
}

/* 카드 전체 */
.cat-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  text-decoration: none;
  color: inherit;
  border: 1px solid #e8e8e8;
  overflow: hidden;
  transition: border-color .2s;
  position: relative;
}
.cat-card:hover {
  border-color: #222;
  color: inherit;
  text-decoration: none;
}

/* LIVE 뱃지 */
.cat-card__live {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 2;
  background: #e53935;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  padding: 2px 7px;
}

/* 이미지 박스 — 3:4 고정 (세로형) */
.cat-card__img {
  width: 100%;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  flex-shrink: 0;
}
.cat-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

/* 텍스트 영역 */
.cat-card__body {
  padding: 10px 12px 14px;
  border-top: 1px solid #eee;
  flex: 1;
}
.cat-card__brand {
  display: block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #999;
  margin-bottom: 4px;
}
.cat-card__name {
  font-size: 13px;
  font-weight: 500;
  color: #111;
  margin: 0 0 6px;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.cat-card__price {
  font-size: 14px;
  font-weight: 700;
  color: #111;
  margin: 0;
}

/* 베스트 섹션 — 배경 제거, 전역 따름 */
.best-section {
  background: transparent !important;
  padding: 20px 0;
  border-radius: 0;
}

/* 베스트 카드 — 이미지만, 각진, 크기 고정 */
.best-card__img {
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 0 !important;
  background: transparent;
}
.best-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.best-card > * {
  border-radius: 0 !important;
  box-shadow: none !important;
  border: 1px solid #e8e8e8;
  transition: border-color .2s !important;
  background: var(--surface-color, transparent) !important;
}
.best-card:hover > * {
  box-shadow: none !important;
  transform: none !important;
  border-color: #222;
}

/* ═══════════════════════════════════════════════
   푸터 전면 재설계 — 화살표 제거, 미니멀
   ═══════════════════════════════════════════════ */
.footer .footer-main {
  padding: 56px 0 40px !important;
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
}

/* h4 언더라인 제거 */
.footer .footer-main .footer-widget h4 {
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,.45) !important;
  margin-bottom: 18px !important;
  padding-bottom: 0 !important;
}
.footer .footer-main .footer-widget h4:after { display: none !important; }

/* 로고 */
.footer .footer-main .footer-widget .logo span {
  font-size: 20px !important;
  font-weight: 800 !important;
  letter-spacing: -.01em !important;
  color: #fff !important;
}

/* 설명 텍스트 */
.footer .footer-main .footer-widget p {
  font-size: 13px !important;
  line-height: 1.7 !important;
  color: rgba(255,255,255,.5) !important;
  margin-bottom: 12px !important;
}

/* 링크 리스트 — 화살표 완전 제거 */
.footer .footer-main .footer-links {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}
.footer .footer-main .footer-links li {
  padding-left: 0 !important;
  margin-bottom: 0 !important;
}
.footer .footer-main .footer-links li:before {
  display: none !important;
  content: none !important;
}
.footer .footer-main .footer-links a,
.footer .footer-main .footer-links li {
  font-size: 13px !important;
  color: rgba(255,255,255,.55) !important;
  transition: color .15s !important;
  text-decoration: none !important;
}
.footer .footer-main .footer-links a:hover {
  color: #fff !important;
}

/* 푸터 하단 */
.footer .footer-bottom {
  padding: 20px 0 !important;
}
.footer .footer-bottom .copyright p {
  font-size: 12px !important;
  color: rgba(255,255,255,.35) !important;
  margin: 0 !important;
}
.footer .footer-bottom .legal-links a {
  font-size: 11px !important;
  color: rgba(255,255,255,.35) !important;
}
.footer .footer-bottom .legal-links a:hover {
  color: rgba(255,255,255,.7) !important;
}
.footer .footer-bottom .payment-methods .payment-icons i {
  font-size: 18px !important;
  color: rgba(255,255,255,.3) !important;
}