/* 모바일 사이드바 전용 강제 스타일 - 모든 페이지에서 동일하게 작동 */
/* 최고 우선순위로 강제 적용 */
body .mobile-sidebar,
html body .mobile-sidebar,
body[class*="page"] .mobile-sidebar,
body[class*="page"] .mobile-sidebar *   {

}

/* PC에서 모바일 사이드바 완전 숨김 */
@media (min-width: 769px) {
    .mobile-sidebar,
    .mobile-sidebar *,
    .mobile-sidebar-overlay {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }
}


@media (min-width: 769px) {
    .product-highlights {
      display: grid !important;
      grid-template-columns: repeat(4, 1fr) !important;
      gap: 2rem !important;
    }
  }
  
    @media (max-width: 768px) {
    .mobile-sidebar-quicklinks {
      display: flex !important;
      justify-content: space-between !important;
      align-items: flex-start !important;
      margin-top: 10px !important;
      margin-bottom: 0 !important;
      background: #fff !important;
      width: 100%;
      gap: 1em !important;
      border-bottom: 1px solid #e5d3b3;
    }
    
    .mobile-sidebar.active .mobile-sidebar-quicklinks {
      
    }
    .mobile-sidebar-quicklinks * {
      background: #fff !important;
    }
    .mobile-sidebar-quicklinks .quicklink-item {
      flex: 1;
      text-align: center;
      display: flex !important;

      flex-direction: column !important;
      align-items: center !important;
      justify-content: flex-start !important;
      min-width: 0;
      height: auto !important;
      line-height: 1 !important;
      vertical-align: top !important;
      margin: 0 !important;
      padding: 0 !important;
      text-decoration: none;
      color: #222;
      background: #fff !important;
    }
    .mobile-sidebar-quicklinks .icon {
      font-size: 2.2em;
      margin: 0 !important;
      padding: 0 !important;
      display: block;
      line-height: 1 !important;
      vertical-align: top !important;
      background: #fff !important;
    }
    .mobile-sidebar-quicklinks .quicklink-label {
      font-size: 0.85em;
      color: #888;
      font-weight: 400;
      letter-spacing: -0.5px;
      line-height: 1.1 !important;
      margin: 0 !important;
      padding: 0 !important;
      vertical-align: top !important;
      background: #fff !important;
    }
    .mobile-sidebar-quicklinks svg {
      display: block;
      margin: 0 auto;
      padding: 0;
      vertical-align: top;
      background: #fff !important;
    }
    .mobile-sidebar-quicklinks + .quicklinks-divider {
      margin: 0.8em 0.5em 0.8em 0.5em !important;
      border: none !important;
      height: 1px !important;
      background: #f0f0f0 !important;
    }
    .mobile-sidebar-quicklinks + .quicklinks-divider,
    .quicklinks-divider {
      background: #fff !important;
    }
    .quicklinks-divider {
      margin: 0.8em 0.5em 0.8em 0.5em !important;
      border: none !important;
      height: 1px !important;
      background: #f0f0f0 !important;
    }
    .mobile-sidebar .sidebar-nav {
      background: #fff !important;
      padding: 0 !important;
      margin: 10px !important;
    }
    .mobile-sidebar .sidebar-nav * {
      background: #fff !important;
    }
    .mobile-sidebar .sidebar-section-title {
      background: #fff !important;
    }
    .mobile-sidebar .sidebar-section-title + a {
      background: #fff !important;
    }
    .mobile-sidebar .sidebar-section-title .section-divider {
      margin: 0 0 0.8em 0 !important;
      border: none !important;
      height: 1px !important;
      background: #f0f0f0 !important;
      width: 100% !important;
    }
  }
  /* 데스크탑에서는 숨김 */
  @media (min-width: 769px) {
    .mobile-sidebar-quicklinks {
      display: none !important;
    }
  }
  

@media (max-width: 768px)       {
    /* 사이드바 컨테이너 */
    .mobile-sidebar {

        position: fixed !important;
        top: 0 !important;
        left: -230px !important;
        width: 230px !important;
        max-width: 230px !important;
        height: 100vh !important;
        background: #fff !important;
        z-index: 10001 !important;
        transition: left 0.3s ease-in-out !important;
        overflow-y: auto !important;
        box-shadow: 2px 0 10px rgba(0,0,0,0.1) !important;
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
    }
    }
    .mobile-sidebar.active {
        left: 0 !important;
    }
    
    .mobile-sidebar::-webkit-scrollbar {
        display: none !important;
    }
    
    /* 사이드바 헤더 */
    body .mobile-sidebar .sidebar-header,
    html body .mobile-sidebar .sidebar-header,
    body[class*="page"] .mobile-sidebar .sidebar-header {
        padding: 1rem !important;
        background: #fff !important;
        border-bottom: 1px solid #e5d3b3;
        position: relative !important;
        opacity: 0 !important;
        transform: translateY(-30px) !important;
        transition: all 0.4s ease !important;
        visibility: visible !important;
    }
    
    /* 사용자 인증 섹션 - 강제 가로 배치 */
        .sidebar-auth {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 0.3rem !important;
        margin: 0 !important;
        padding: 0.3rem 0 0 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
        background: #fff !important;
        border-bottom: none !important;
    }
    
    .sidebar-auth a {
        display: inline-flex !important;
        align-items: center !important;
        font-size: 0.85rem !important;
        color: #6b4a2e !important;
        font-weight: normal !important;
        margin: 0 !important;
        padding: 0.2rem 0 !important;
        text-decoration: none !important;
        text-align: left !important;
        white-space: nowrap !important;
    }
    
    .sidebar-auth a.user-name {
        position: relative !important;
        padding-right: 0.3rem !important;
        margin-right: 0.2rem !important;
        font-size: 0.9rem !important;
        font-weight: bold !important;
        color: #6b4a2e !important;
    }
    
    .sidebar-auth a.user-name::after {
        content: "" !important;
        display: inline-block !important;
        position: absolute !important;
        right: 0 !important;
        top: 25% !important;
        height: 50% !important;
        width: 1px !important;
        background: #e5d3b3 !important;
    }
    
    /* 빠른 링크 */
    body .mobile-sidebar .mobile-sidebar-quicklinks,
    html body .mobile-sidebar .mobile-sidebar-quicklinks,
    body[class*="page"] .mobile-sidebar .mobile-sidebar-quicklinks {
        display: flex !important;
        flex-direction: row !important;
        gap: 0.5rem !important;
        background: #fff !important;
        justify-content: space-between !important;
        opacity: 0 !important;
        transform: translateY(-30px) !important;
        transition: all 0.4s ease !important;
        visibility: visible !important;
    }
    
    .quicklink-item {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 0.3rem !important;
        padding: 0.5rem !important;
        color: #6b4a2e !important;
        text-decoration: none !important;
        border-radius: 8px !important;
        transition: all 0.3s ease !important;
        background: #ffffff !important;
        flex: 1 !important;
        text-align: center !important;
    }
    
    .quicklink-item:hover {
        background: #e8e0d8 !important;
        transform: translateX(5px) !important;
    }
    
    .quicklink-item .icon {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 24px !important;
        height: 24px !important;
        font-size: 1.2rem !important;
    }
    
    .quicklink-item .quicklink-label {
        font-size: 0.75rem !important;
        font-weight: 500 !important;
        line-height: 1.2 !important;
        margin-bottom: 10px !important;
    }
    
    /* 사이드바 네비게이션 */
    .sidebar-nav {
        padding: 0.5rem 0 !important;
        background: #fff !important;
    }
    
    .sidebar-nav a {
        display: flex !important;
        align-items: center !important;
        padding: 0.8rem 0.5rem !important;
        color: #6b4a2e !important;
        text-decoration: none !important;
        border-bottom: 1px solid #f5f5f5 !important;
        font-size: 0.95rem !important;
        background: transparent !important;
        text-align: left !important;
        transition: all 0.3s ease !important;
        position: relative !important;
        font-weight: 500 !important;
        opacity: 0 !important;
        transform: translateY(-30px) !important;
        transition: all 0.4s ease !important;
        visibility: visible !important;
    }
    
    .sidebar-nav a:hover {
        background: linear-gradient(90deg, #f8f6f2 0%, #fff 100%) !important;
        padding-left: 1rem !important;
        color: #8b5e3c !important;
        transform: translateX(3px) !important;
        box-shadow: 0 2px 8px rgba(139, 94, 60, 0.1) !important;
    }
    
    /* 왼쪽 세로선 그라데이션 효과 제거 */
    
    /* 사이드바 섹션 제목 */
    .sidebar-section-title {     
        opacity: 0 !important;
        transform: translateY(-30px) !important;
        transition: all 0.4s ease !important;
        visibility: visible !important;
        background: #fff !important;
        font-weight: bold !important;
        color: #8b5e3c !important;
        font-size: 0.9rem !important;
        background: transparent !important;
        padding: 0.5rem 0 !important;
        border-bottom: 1px solid #e5d3b3 !important;
        margin: 0 !important;
    }
    
    /* 구분선 */
    .sidebar-nav hr {
        border: none !important;
        height: 1px !important;
        background: #e5d3b3 !important;
        margin: 1rem 0 !important;
    }
    
    .section-divider {
        border: none !important;
        height: 1px !important;
        background: #e5d3b3 !important;
        margin: 0.5rem 0 !important;
    }
    
    /* 사이드바 푸터 */
    .sidebar-footer {
        padding: 1rem !important;
        text-align: center !important;
        border-top: 1px solid #e5d3b3 !important;
        margin-top: auto !important;
        background: #f8f9fa !important;
        opacity: 0 !important;
        transform: translateY(30px) !important;
        transition: all 0.4s ease !important;
        visibility: visible !important;

    
    .sidebar-logo-text {
        color: #6b4a2e !important;
        font-weight: bold !important;
        font-size: 1.1rem !important;
    }
    

    

    
    /* 오른쪽 세로줄 제거 */
    .mobile-sidebar::after {
        content: '' !important;
        position: absolute !important;
        top: 0 !important;
        right: 0 !important;
        width: 24px !important;
        height: 100% !important;
        background: transparent !important;
        pointer-events: none !important;
        z-index: 10002 !important;
        box-shadow: none !important;
        border: none !important;
    }
    
    /* 닫기 버튼 - 강제 적용 */
    body .mobile-sidebar .close-sidebar,
    html body .mobile-sidebar .close-sidebar,
    body[class*="page"] .mobile-sidebar .close-sidebar,
    body .mobile-sidebar button.close-sidebar,
    html body .mobile-sidebar button.close-sidebar,
    body[class*="page"] .mobile-sidebar button.close-sidebar {
        border: none !important;
        background: none !important;
        box-shadow: none !important;
        outline: none !important;
        width: 44px !important;
        height: 44px !important;
        position: absolute !important;
        top: 10px !important;
        right: 50% !important;
        transform: translateX(50%) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        z-index: 10003 !important;
        text-align: center !important;
    }
}

/* 작은 화면 대응 */
@media (max-width: 480px) {
    .mobile-sidebar {
        width: 200px !important;
        max-width: 200px !important;
    }
    
    .sidebar-auth a.user-name {
        font-size: 1rem !important;
    }
}

@media (max-width: 375px) {
    .mobile-sidebar {
        width: 180px !important;
        max-width: 180px !important;
    }
    
    .sidebar-auth a.user-name {
        font-size: 0.9rem !important;
    }
}