/* ==========================================================================
   hs-guide.css — 이용가이드(/bss2, first_popup 스킨) 정리 (2026-09-23)
   PC·모바일 스킨이 둘 다 이 파일을 <style> 뒤에서 불러 앞의 규칙을 덮는다.
   · 상단 탭: 빨간 알약 + 그림자 → 담백한 알약(고른 것만 검정)
   · 안내 이미지: 폭·테두리 정리, '확대해서 보기'는 눈에 띄되 그림을 가리지 않게
   · 아래 버튼 두 개와 상담 배너: 같은 폭·같은 간격
   ⚠ 클래스 이름·모달 동작(#hotsauce_guide_modal)은 그대로 둔다.
   ========================================================================== */

.guide_category_tabs {
    margin: 0 !important;
    padding: 18px 16px 6px !important;
    background: transparent !important;
}
.guide_category_tabs .tab_container {
    max-width: 900px !important;
    gap: 8px !important;
    justify-content: center !important;
}
.guide_category_tabs .tab_item {
    min-width: 0 !important;
    height: 40px !important;
    padding: 0 16px !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 999px !important;
    background: #fff !important;
    color: #4b5563 !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    box-shadow: none !important;
    transition: border-color .15s ease, color .15s ease !important;
}
.guide_category_tabs .tab_item:hover {
    transform: none !important;
    border-color: #d1d5db !important;
    color: #111827 !important;
    box-shadow: none !important;
}
.guide_category_tabs .tab_item.active {
    border-color: #111827 !important;
    background: #111827 !important;
    color: #fff !important;
    box-shadow: none !important;
}

#hotsauce_guide_unique { background: transparent !important; }
#hotsauce_guide_unique .guide_container {
    max-width: 900px !important;
    margin: 0 auto !important;
    padding: 10px 16px 56px !important;
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
}
#hotsauce_guide_unique .image_container {
    position: relative;
    margin: 0 !important;
    border: 1px solid #ececef !important;
    border-radius: 16px !important;
    background: #fff !important;
    box-shadow: 0 4px 18px rgba(17, 24, 39, .05) !important;
    overflow: hidden !important;
}
#hotsauce_guide_unique .guide_image { display: block !important; width: 100% !important; height: auto !important; }
#hotsauce_guide_unique .zoom_indicator {
    position: absolute !important;
    right: 14px !important;
    bottom: 14px !important;
    left: auto !important;
    top: auto !important;
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    width: auto !important;
    padding: 9px 14px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: rgba(17, 24, 39, .82) !important;
    color: #fff !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    opacity: 1 !important;
    box-shadow: 0 4px 14px rgba(17, 24, 39, .2) !important;
}
#hotsauce_guide_unique .zoom_indicator::before {
    content: "" !important;
    width: 15px; height: 15px;
    margin: 0 !important;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5M11 8v6M8 11h6'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5M11 8v6M8 11h6'/%3E%3C/svg%3E") center / contain no-repeat;
}

#hotsauce_guide_unique .buttons_container {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    max-width: 620px !important;
    margin: 18px auto 0 !important;
    padding: 0 !important;
}
#hotsauce_guide_unique .action_button {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: auto !important;
    height: 54px !important;
    padding: 0 16px !important;
    border: 0 !important;
    border-radius: 12px !important;
    background: #e8342f !important;
    color: #fff !important;
    font-size: 15.5px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    box-shadow: none !important;
    transition: background-color .15s ease, border-color .15s ease !important;
}
#hotsauce_guide_unique .action_button:hover { transform: none !important; background: #cf2b27 !important; }
#hotsauce_guide_unique .action_button.secondary {
    background: #fff !important;
    color: #111827 !important;
    border: 1px solid #e5e7eb !important;
}
#hotsauce_guide_unique .action_button.secondary:hover { background: #f9fafb !important; border-color: #d1d5db !important; }

#hotsauce_guide_unique .inquiry_link {
    display: block !important;
    max-width: 620px !important;
    margin: 12px auto 0 !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    box-shadow: none !important;
}
#hotsauce_guide_unique .inquiry_image { display: block !important; width: 100% !important; height: auto !important; }

@media (max-width: 768px) {
    .guide_category_tabs { padding: 12px 0 4px !important; }
    .guide_category_tabs .tab_container {
        flex-wrap: nowrap !important;
        justify-content: flex-start !important;
        overflow-x: auto;
        padding: 0 16px;
        scrollbar-width: none;
    }
    .guide_category_tabs .tab_container::-webkit-scrollbar { display: none; }
    .guide_category_tabs .tab_item { flex: none !important; height: 38px !important; font-size: 13px !important; }
    #hotsauce_guide_unique .guide_container { padding: 8px 12px 40px !important; }
    #hotsauce_guide_unique .buttons_container { grid-template-columns: 1fr !important; }
    #hotsauce_guide_unique .zoom_indicator { right: 10px !important; bottom: 10px !important; padding: 8px 12px !important; font-size: 12.5px !important; }
}