/* ===== 완전 독립 도움말 CSS (충돌 완전 방지) ===== */
/* ==========================================
   🎨 도움말 버튼 커스터마이즈 스타일
   ========================================== */

/* ===== 기본 스타일 (기존) ===== */
.hpopup-trigger-btn {
    display: inline-block !important;
    background: linear-gradient(135deg, #28a745, #20c997) !important;
    color: white !important;
    padding: 8px 16px !important;
    text-decoration: none !important;
    border-radius: 20px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
    border: none !important;
    vertical-align: middle !important;
    margin: 0 5px !important;
    box-sizing: border-box !important;
}

.hpopup-trigger-btn:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(40, 167, 69, 0.3) !important;
    background: linear-gradient(135deg, #218838, #1e9ba8) !important;
    color: white !important;
    text-decoration: none !important;
}

/* ===== 심플 스타일 (애니메이션 없음) ===== */
.hpopup-trigger-btn.simple {
    background: #007bff !important;
    border-radius: 4px !important;
    font-size: 14px !important;
    padding: 10px 20px !important;
    transition: none !important;
}

.hpopup-trigger-btn.simple:hover {
    background: #0056b3 !important;
    transform: none !important;
    box-shadow: none !important;
}

/* ===== 미니멀 스타일 ===== */
.hpopup-trigger-btn.minimal {
    background: transparent !important;
    color: #007bff !important;
    border: 1px solid #007bff !important;
    border-radius: 0 !important;
    font-size: 12px !important;
    padding: 6px 12px !important;
    transition: none !important;
    font-weight: normal !important;
}

.hpopup-trigger-btn.minimal:hover {
    background: #007bff !important;
    color: white !important;
    transform: none !important;
    box-shadow: none !important;
}

/* ===== 플랫 스타일 ===== */
.hpopup-trigger-btn.flat {
    background: #6c757d !important;
    color: white !important;
    border-radius: 0 !important;
    font-size: 13px !important;
    padding: 8px 16px !important;
    transition: none !important;
    box-shadow: none !important;
}

.hpopup-trigger-btn.flat:hover {
    background: #5a6268 !important;
    transform: none !important;
    box-shadow: none !important;
}

/* ===== 텍스트 링크 스타일 ===== */
.hpopup-trigger-btn.text-link {
    background: transparent !important;
    color: #007bff !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 11px 4px !important;
    font-size: 10px !important;
    text-decoration: underline !important;
    transition: none !important;
    font-weight: normal !important;
 text-align : center;

​
}

.hpopup-trigger-btn.text-link:hover {
    color: #0056b3 !important;
    background: transparent !important;
    transform: none !important;
    box-shadow: none !important;
    text-decoration: underline !important;
}

/* ===== 둥근 버튼 스타일 ===== */
.hpopup-trigger-btn.rounded {
    background: #17a2b8 !important;
    color: white !important;
    border-radius: 50px !important;
    font-size: 12px !important;
    padding: 8px 20px !important;
    transition: none !important;
    font-weight: 600 !important;
}

.hpopup-trigger-btn.rounded:hover {
    background: #138496 !important;
    transform: none !important;
    box-shadow: none !important;
}

/* ===== 큰 버튼 스타일 ===== */
.hpopup-trigger-btn.large {
    background: #28a745 !important;
    color: white !important;
    border-radius: 8px !important;
    font-size: 16px !important;
    padding: 12px 24px !important;
    transition: none !important;
    font-weight: 600 !important;
}

.hpopup-trigger-btn.large:hover {
    background: #218838 !important;
    transform: none !important;
    box-shadow: none !important;
}

/* ===== 작은 버튼 스타일 ===== */
.hpopup-trigger-btn.small {
    background: #ffc107 !important;
    color: #212529 !important;
    border-radius: 12px !important;
    font-size: 11px !important;
    padding: 4px 10px !important;
    transition: none !important;
    font-weight: 500 !important;
}

.hpopup-trigger-btn.small:hover {
    background: #e0a800 !important;
    transform: none !important;
    box-shadow: none !important;
}

/* ===== 그라데이션 없는 단색 스타일 ===== */
.hpopup-trigger-btn.solid-blue {
    background: #007bff !important;
    color: white !important;
    border-radius: 6px !important;
    font-size: 13px !important;
    padding: 8px 16px !important;
    transition: none !important;
}

.hpopup-trigger-btn.solid-blue:hover {
    background: #0056b3 !important;
    transform: none !important;
    box-shadow: none !important;
}

.hpopup-trigger-btn.solid-red {
    background: #dc3545 !important;
    color: white !important;
    border-radius: 6px !important;
    font-size: 13px !important;
    padding: 8px 16px !important;
    transition: none !important;
}

.hpopup-trigger-btn.solid-red:hover {
    background: #c82333 !important;
    transform: none !important;
    box-shadow: none !important;
}

.hpopup-trigger-btn.solid-green {
    background: #28a745 !important;
    color: white !important;
    border-radius: 6px !important;
    font-size: 13px !important;
    padding: 8px 16px !important;
    transition: none !important;
}

.hpopup-trigger-btn.solid-green:hover {
    background: #218838 !important;
    transform: none !important;
    box-shadow: none !important;
}

/* ===== 아웃라인 스타일 ===== */
.hpopup-trigger-btn.outline-blue {
    background: transparent !important;
    color: #007bff !important;
    border: 2px solid #007bff !important;
    border-radius: 6px !important;
    font-size: 13px !important;
    padding: 6px 14px !important;
    transition: none !important;
}

.hpopup-trigger-btn.outline-blue:hover {
    background: #007bff !important;
    color: white !important;
    transform: none !important;
    box-shadow: none !important;
}

.hpopup-trigger-btn.outline-green {
    background: transparent !important;
    color: #28a745 !important;
    border: 2px solid #28a745 !important;
    border-radius: 6px !important;
    font-size: 13px !important;
    padding: 6px 14px !important;
    transition: none !important;
}

.hpopup-trigger-btn.outline-green:hover {
    background: #28a745 !important;
    color: white !important;
    transform: none !important;
    box-shadow: none !important;
}

/* ===== 사용자 정의 색상 변수 ===== */
.hpopup-trigger-btn.custom {
    background: var(--help-btn-bg, #6c757d) !important;
    color: var(--help-btn-color, white) !important;
    border: var(--help-btn-border, none) !important;
    border-radius: var(--help-btn-radius, 4px) !important;
    font-size: var(--help-btn-font-size, 13px) !important;
    padding: var(--help-btn-padding, 8px 16px) !important;
    transition: none !important;
    font-weight: var(--help-btn-font-weight, 500) !important;
}

.hpopup-trigger-btn.custom:hover {
    background: var(--help-btn-hover-bg, #5a6268) !important;
    color: var(--help-btn-hover-color, white) !important;
    transform: none !important;
    box-shadow: none !important;
}

/* ===== 완전 커스텀 스타일 (애니메이션 완전 제거) ===== */
.hpopup-trigger-btn.no-animation {
    transition: none !important;
    animation: none !important;
}

.hpopup-trigger-btn.no-animation:hover {
    transform: none !important;
    box-shadow: none !important;
    animation: none !important;
}

/* ===== 반응형 스타일 ===== */
@media (max-width: 768px) {
    .hpopup-trigger-btn.responsive {
        font-size: 12px !important;
        padding: 6px 12px !important;
    }
    
    .hpopup-trigger-btn.large.responsive {
        font-size: 14px !important;
        padding: 10px 20px !important;
    }
}

/* ===== 접근성 개선 ===== */
.hpopup-trigger-btn:focus {
    outline: 2px solid #007bff !important;
    outline-offset: 2px !important;
}

.hpopup-trigger-btn.no-animation:focus {
    outline: 2px solid #007bff !important;
    outline-offset: 2px !important;
    box-shadow: none !important;
}

/* ===== 상태별 스타일 ===== */
.hpopup-trigger-btn:disabled {
    background: #6c757d !important;
    color: #fff !important;
    cursor: not-allowed !important;
    opacity: 0.6 !important;
}

.hpopup-trigger-btn:disabled:hover {
    background: #6c757d !important;
    transform: none !important;
    box-shadow: none !important;
}

.hpopup-backdrop-layer {
    display: none !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-color: rgba(0, 0, 0, 0.6) !important;
    z-index: 999999999 !important;
    backdrop-filter: blur(3px) !important;
    box-sizing: border-box !important;
}

.hpopup-main-container {
    position: fixed !important;
    left: 50% !important;
    bottom: 70px !important;
    transform: translateX(-50%) !important;
    background: white !important;
    border-radius: 16px !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3) !important;
    z-index: 1000000000 !important;
    max-width: 90% !important;
    width: 520px !important;
    max-height: 80vh !important;
    overflow: hidden !important;
    opacity: 0 !important;
    transition: all 0.4s ease !important;
    box-sizing: border-box !important;
}

.hpopup-main-container.visible-state {
    opacity: 1 !important;
    transform: translateX(-50%) translateY(0) !important;
}

.hpopup-header-section {
    padding: 20px 20px 0 !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    color: white !important;
    border-radius: 16px 16px 0 0 !important;
    box-sizing: border-box !important;
}

.hpopup-title-text {
    margin: 0 !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    color: white !important;
}

.hpopup-control-buttons {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.hpopup-font-control {
    background: rgba(255, 255, 255, 0.2) !important;
    border: none !important;
    color: white !important;
    cursor: pointer !important;
    padding: 6px 8px !important;
    border-radius: 4px !important;
    font-size: 11px !important;
    font-weight: bold !important;
    transition: background-color 0.3s ease !important;
    min-width: 26px !important;
    height: 26px !important;
    box-sizing: border-box !important;
}

.hpopup-font-control:hover {
    background: rgba(255, 255, 255, 0.3) !important;
}

.hpopup-close-button {
    background: rgba(255, 255, 255, 0.2) !important;
    border: none !important;
    font-size: 20px !important;
    cursor: pointer !important;
    color: white !important;
    padding: 6px !important;
    width: 30px !important;
    height: 30px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    transition: all 0.3s ease !important;
    box-sizing: border-box !important;
}

.hpopup-close-button:hover {
    background: rgba(255, 255, 255, 0.3) !important;
    transform: rotate(90deg) !important;
}

.hpopup-tabs-wrapper {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    padding: 0 20px 20px !important;
    box-sizing: border-box !important;
}

.hpopup-navigation-list {
    display: flex !important;
    gap: 4px !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    flex-wrap: wrap !important;
}

.hpopup-nav-button {
    background: rgba(255, 255, 255, 0.2) !important;
    border: none !important;
    color: white !important;
    padding: 10px 14px !important;
    cursor: pointer !important;
    border-radius: 6px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    transition: all 0.3s ease !important;
    white-space: nowrap !important;
    flex: 1 !important;
    text-align: center !important;
    box-sizing: border-box !important;
}

.hpopup-nav-button:hover {
    background: rgba(255, 255, 255, 0.3) !important;
}

.hpopup-nav-button.active-tab {
    background: white !important;
    color: #667eea !important;
    font-weight: 600 !important;
}

.hpopup-content-area {
    padding: 25px !important;
    max-height: 50vh !important;
    overflow-y: auto !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
    box-sizing: border-box !important;
}

.hpopup-content-area::-webkit-scrollbar {
    width: 6px !important;
}

.hpopup-content-area::-webkit-scrollbar-thumb {
    background: #ccc !important;
    border-radius: 3px !important;
}

.hpopup-content-panel {
    display: none !important;
}

.hpopup-content-panel.panel-active {
    display: block !important;
    animation: hpopupFadeIn 0.3s ease !important;
}

@keyframes hpopupFadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.hpopup-content-panel h4 {
    color: #333 !important;
    margin: 0 0 12px 0 !important;
    font-size: 15px !important;
    font-weight: 600 !important;
}

.hpopup-content-panel p {
    color: #666 !important;
    margin-bottom: 12px !important;
    font-size: 14px !important;
}

.hpopup-content-panel ul {
    margin: 12px 0 !important;
    padding-left: 18px !important;
}

.hpopup-content-panel li {
    color: #666 !important;
    margin-bottom: 8px !important;
    font-size: 14px !important;
}

.hpopup-highlight-box {
    background: linear-gradient(135deg, #fff3cd, #ffeaa7) !important;
    padding: 12px !important;
    border-left: 3px solid #f39c12 !important;
    border-radius: 6px !important;
    margin: 15px 0 !important;
    font-size: 13px !important;
    box-sizing: border-box !important;
}

/* 글꼴 크기 조절 */
.hpopup-main-container.size-small .hpopup-content-area { font-size: 12px !important; }
.hpopup-main-container.size-medium .hpopup-content-area { font-size: 14px !important; }
.hpopup-main-container.size-large .hpopup-content-area { font-size: 16px !important; }
.hpopup-main-container.size-xlarge .hpopup-content-area { font-size: 18px !important; }
.hpopup-main-container.size-xlarge .hpopup-content-area { font-size: 20px !important; }
.hpopup-main-container.size-xlarge .hpopup-content-area { font-size: 22px !important; }

/* 모바일 최적화 */
@media (max-width: 600px) {
    .hpopup-main-container {
        width: 95% !important;
        bottom: 20px !important;
    }
    
    .hpopup-header-section {
        padding: 15px 15px 0 !important;
    }
    
    .hpopup-tabs-wrapper {
        padding: 0 15px 15px !important;
    }
    
    .hpopup-content-area {
        padding: 20px !important;
        max-height: 45vh !important;
    }
    
    .hpopup-nav-button {
        font-size: 12px !important;
        padding: 8px 10px !important;
    }
}