/* PUB-ADD: PC용/모바일용 버튼 분리 스타일 */

/* PC용 버튼 (제목 위에 표시) */
.pub-buttons-pc-only {
    display: none; /* 기본적으로 숨김 */
}

/* PC 환경 (769px 이상)에서만 PC용 버튼 표시 */
@media (min-width: 769px) {
    .pub-buttons-pc-only {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 0.8rem;
        flex-wrap: nowrap;
        margin-bottom: 2rem;
    }
    
    .pub-buttons-pc-only .hero-primary-button-area {
        margin-bottom: 0;
    }
    
    .pub-buttons-pc-only .hero-secondary-buttons-area {
        display: flex;
        gap: 0.8rem;
        flex-wrap: nowrap;
    }
    
    .pub-buttons-pc-only .hero-button {
        flex: 1;
        min-width: 150px;
        max-width: 250px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    .pub-buttons-pc-only .hero-button-text {
        white-space: nowrap;
    }
}

/* 모바일용 버튼 (기존 위치) - 기본적으로 숨김 */
.pub-buttons-mobile-only {
    display: none;
}

/* PC 환경 (769px 이상)에서 모바일용 버튼 숨김 */
@media (min-width: 769px) {
    .pub-buttons-mobile-only {
        display: none !important;
    }
}

/* 모바일 환경 (768px 이하)에서는 PC용 버튼 숨김 */
@media (max-width: 768px) {
    .pub-buttons-pc-only {
        display: none;
    }
    
    .pub-buttons-mobile-only {
        display: block;
    }
}

/* 접근성 개선 */
.pub-buttons-pc-only .hero-button,
.pub-buttons-mobile-only .hero-button {
    transition: all 0.3s ease;
}

.pub-buttons-pc-only .hero-button:focus,
.pub-buttons-mobile-only .hero-button:focus {
    outline: 2px solid #007bff;
    outline-offset: 2px;
}