/* 마케팅 페이지 반응형 문제 해결 CSS */

/* 전역 Box-sizing 설정 */
* {
    box-sizing: border-box;
}

/* 마케팅 페이지 오버플로우 방지 */
.marketing-page {
    width: 100%;
    overflow-x: hidden;
}

/* 컨테이너 너비 제한 및 패딩 조정 */
.marketing-page .inner {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* 컨텐츠 영역 오버플로우 방지 */
.service-content {
    width: 100%;
    overflow-x: hidden;
}

.content-full,
.content-left,
.content-right {
    width: 100%;
    max-width: 100%;
}

/* ========== 테이블 반응형 처리 ========== */

/* 테이블 컨테이너 래퍼 추가 */
.pricing-table-wrapper {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 20px 0;
}

/* 테이블 기본 스타일 */
.pricing-table {
    width: 100%;
    min-width: 500px; /* 최소 너비 설정 */
}

/* comparison-table은 toss-special.css에서 처리 */

/* 샤오홍슈 가격표 반응형 - 768px 이하에서 카드 형태로 변환 */
@media screen and (max-width: 768px) {
    #xiaohongshu-page .xhs-pricing .pricing-table-wrapper .pricing-table {
        display: block !important;
        box-shadow: none !important;
        min-width: auto !important;
        width: 100% !important;
    }
    
    #xiaohongshu-page .xhs-pricing .pricing-table-wrapper .pricing-table thead {
        display: none !important;
    }
    
    #xiaohongshu-page .xhs-pricing .pricing-table-wrapper .pricing-table tbody {
        display: block !important;
    }
    
    #xiaohongshu-page .xhs-pricing .pricing-table-wrapper .pricing-table tr {
        display: block !important;
        margin-bottom: 15px !important;
        background: white !important;
        border: 1px solid #e0e0e0 !important;
        border-radius: 12px !important;
        padding: 20px !important;
        box-shadow: 0 3px 10px rgba(0,0,0,0.08) !important;
        position: relative !important;
        transition: all 0.3s ease !important;
    }
    
    #xiaohongshu-page .xhs-pricing .pricing-table-wrapper .pricing-table tr:active {
        transform: scale(0.98) !important;
    }
    
    #xiaohongshu-page .xhs-pricing .pricing-table-wrapper .pricing-table td {
        display: block !important;
        text-align: left !important;
        padding: 8px 0 !important;
        border: none !important;
        position: relative !important;
    }
    
    #xiaohongshu-page .xhs-pricing .pricing-table-wrapper .pricing-table td:before {
        content: attr(data-label) ": " !important;
        font-weight: 600 !important;
        display: inline-block !important;
        width: 110px !important;
        color: #333 !important;
        margin-right: 10px !important;
    }
    
    #xiaohongshu-page .xhs-pricing .pricing-table-wrapper .pricing-table tr.highlight {
        background: linear-gradient(135deg, #f0fffe, #e6fffe) !important;
        border: 2px solid #4ECDC4 !important;
        transform: scale(1.02) !important;
    }
    
    #xiaohongshu-page .xhs-pricing .pricing-table-wrapper .pricing-table tr.highlight::before {
        content: '추천' !important;
        position: absolute !important;
        top: -10px !important;
        right: 20px !important;
        background: #4ECDC4 !important;
        color: white !important;
        padding: 4px 12px !important;
        border-radius: 12px !important;
        font-size: 12px !important;
        font-weight: 600 !important;
    }
}

/* 더 작은 화면을 위한 추가 처리 (390px 포함) */
@media screen and (max-width: 400px) {
    #xiaohongshu-page .xhs-pricing .pricing-table-wrapper .pricing-table td:before {
        width: 100px !important;
        font-size: 12px !important;
    }
    
    #xiaohongshu-page .xhs-pricing .pricing-table-wrapper .pricing-table td {
        font-size: 13px !important;
        padding: 6px 0 !important;
    }
}

/* 토스 비교 테이블 반응형 - toss-special.css에서 처리하므로 여기서는 제거 */
/* toss-special.css의 반응형 코드가 더 구체적이고 완성도가 높음 */

/* ========== 그리드 레이아웃 반응형 ========== */

/* 샤오홍슈 통계 반응형 */
@media (max-width: 768px) {
    .xhs-stats {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }
    
    .xhs-stats .stat h4 {
        font-size: 28px;
    }
    
    .xhs-stats .stat p {
        font-size: 12px;
    }
}

@media (max-width: 480px) {
    .xhs-stats {
        grid-template-columns: 1fr;
        gap: 15px;
    }
}

/* 구글 통계 반응형 */
@media (max-width: 768px) {
    .google-stats {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }
    
    .google-stat-box {
        padding: 20px;
    }
    
    .google-stat-box h4 {
        font-size: 24px;
    }
    
    .google-stat-box i {
        font-size: 32px;
    }
}

@media (max-width: 480px) {
    .google-stats {
        grid-template-columns: 1fr;
    }
}

/* 구글 카드 반응형 */
@media (max-width: 1024px) {
    .google-cards {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
}

@media (max-width: 768px) {
    .google-cards {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    .google-card {
        padding: 20px;
    }
    
    .card-header h6 {
        font-size: 16px;
    }
}

/* 구글 생태계 반응형 */
@media (max-width: 768px) {
    .ecosystem-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }
    
    .ecosystem-item {
        padding: 20px 15px;
    }
    
    .eco-icon {
        width: 50px;
        height: 50px;
        font-size: 24px;
    }
}

@media (max-width: 480px) {
    .ecosystem-grid {
        grid-template-columns: 1fr;
    }
}

/* 메타 플랫폼 그리드 반응형 */
@media (max-width: 768px) {
    .meta-platforms {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    .meta-features .feature-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    .ad-types-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }
}

/* ========== 기타 요소 반응형 ========== */

/* 섹션 패딩 조정 */
@media (max-width: 768px) {
    .marketing-section {
        padding: 40px 0;
    }
    
    .section-header {
        margin-bottom: 30px;
    }
    
    .section-title {
        font-size: 26px;
        line-height: 1.3;
    }
    
    .section-desc {
        font-size: 15px;
        padding: 0 10px;
    }
}

@media (max-width: 480px) {
    .marketing-page .inner {
        padding: 0 15px;
    }
    
    .section-title {
        font-size: 22px;
    }
    
    .section-desc {
        font-size: 14px;
    }
}

/* 콘텐츠 레이아웃 반응형 */
@media (max-width: 768px) {
    .service-content {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    
    .content-left,
    .content-right {
        width: 100%;
    }
}

/* 가격 박스 반응형 */
@media (max-width: 768px) {
    .toss-pricing .pricing-box {
        padding: 0;
    }
    
    .pricing-item {
        margin: 0;
    }
    
    .pricing-content {
        padding: 15px;
    }
    
    .exposure-count strong {
        font-size: 20px;
    }
    
    .price .amount {
        font-size: 24px;
    }
}

/* 프로세스 스텝 반응형 */
@media (max-width: 768px) {
    .toss-exposure-process .exposure-steps {
        flex-direction: column;
        gap: 20px;
    }
    
    .exposure-step {
        width: 100%;
        max-width: 300px;
        margin: 0 auto;
    }
    
    .step-arrow {
        transform: rotate(90deg);
        margin: 10px 0;
    }
}

/* 키워드 클라우드 반응형 */
@media (max-width: 768px) {
    .keyword-cloud {
        margin-top: 20px;
    }
    
    .keyword-category {
        margin-bottom: 20px;
    }
    
    .keyword-category h5 {
        font-size: 15px;
    }
    
    .keywords {
        gap: 6px;
    }
    
    .keywords span {
        font-size: 12px;
        padding: 5px 12px;
    }
}

/* 서비스 그리드 반응형 */
@media (max-width: 768px) {
    .xhs-services .services-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    .xhs-service {
        padding: 20px;
    }
    
    .xhs-service .icon {
        width: 40px;
        height: 40px;
    }
    
    .xhs-service .icon i {
        font-size: 20px;
    }
}

/* Benefits 그리드 반응형 */
@media (max-width: 768px) {
    .xhs-benefits .benefits-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    
    .benefit-item {
        padding: 12px;
        background: #f8f9fa;
        border-radius: 8px;
    }
    
    .benefit-item i {
        font-size: 16px;
    }
    
    .benefit-item span {
        font-size: 14px;
    }
}

/* CTA 버튼 반응형 */
@media (max-width: 768px) {
    .cta-section {
        margin-top: 30px;
        flex-direction: column;
        gap: 15px;
        padding: 0 15px;
    }
    
    .btn-primary,
    .btn-secondary {
        width: 100%;
        justify-content: center;
        padding: 12px 25px;
        font-size: 15px;
    }
}

/* 제안서 다운로드 버튼 반응형 */
@media (max-width: 768px) {
    .proposal-download-section {
        padding: 0 15px;
    }
    
    .btn-download-proposal {
        width: 100%;
        justify-content: center;
        padding: 12px 20px;
        font-size: 14px;
    }
}

/* 통계 리스트 반응형 */
@media (max-width: 768px) {
    .stats-list .stat-item {
        padding: 15px;
        gap: 15px;
    }
    
    .stats-list .stat-item i {
        width: 35px;
        height: 35px;
        font-size: 16px;
    }
}

/* 케이스 스터디 반응형 */
@media (max-width: 768px) {
    .meta-case .case-study {
        padding: 20px;
    }
    
    .case-results {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    
    .case-results .result {
        padding: 12px;
    }
    
    .case-results .value {
        font-size: 20px;
    }
}

/* 네이버 프로세스 반응형 */
@media (max-width: 1024px) {
    .process-simple {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .process-item-simple:nth-child(3)::after {
        display: none;
    }
}

@media (max-width: 768px) {
    .process-simple {
        grid-template-columns: 1fr;
        gap: 15px;
        padding: 25px 15px;
    }
    
    .process-item-simple::after {
        display: none;
    }
    
    .process-item-simple {
        padding: 20px;
    }
}

/* 인사이트 그리드 반응형 */
@media (max-width: 768px) {
    .market-insight {
        padding: 30px 20px;
    }
    
    .market-insight h4 {
        font-size: 20px;
        margin-bottom: 25px;
    }
    
    .insight-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    .insight-item {
        padding: 15px;
        gap: 15px;
    }
    
    .insight-item i {
        width: 40px;
        height: 40px;
        font-size: 20px;
    }
}

/* 플랫폼 비교 카드 반응형 */
@media (max-width: 768px) {
    .platform-comparison {
        margin-top: 25px;
    }
    
    .platform-card {
        padding: 20px;
        margin-bottom: 12px;
    }
    
    .platform-card h6 {
        font-size: 15px;
    }
    
    .platform-card p {
        font-size: 13px;
    }
}

/* 오버플로우 방지 - 모든 섹션 */
@media (max-width: 768px) {
    .marketing-page section {
        overflow-x: hidden;
    }
    
    .marketing-page h4 {
        font-size: 18px;
        word-break: keep-all;
        line-height: 1.4;
    }
    
    .marketing-page h5 {
        font-size: 16px;
    }
    
    .marketing-page p {
        font-size: 14px;
        word-break: keep-all;
    }
}

/* 스크롤바 스타일링 (선택사항) */
.pricing-table-wrapper::-webkit-scrollbar {
    height: 6px;
}

.pricing-table-wrapper::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

.pricing-table-wrapper::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 3px;
}

.pricing-table-wrapper::-webkit-scrollbar-thumb:hover {
    background: #999;
}

/* comparison-table 스크롤바는 toss-special.css에서 처리 */

/* 디버그용 - 오버플로우 확인 */
.debug-overflow * {
    outline: 1px solid #4ECDC4 !important;
}

/* ========== 샤오홍슈 "왜 애드리브인가?" 텍스트 표시 문제 해결 ========== */
.xhs-benefits {
    margin-top: 30px;
}

.xhs-benefits h5 {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 20px;
    color: #333 !important; /* 텍스트 색상 강제 적용 */
}

.xhs-benefits .benefits-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
}

.xhs-benefits .benefit-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 15px;
    background: #f8f9fa;
    border-radius: 8px;
    transition: all 0.3s;
}

.xhs-benefits .benefit-item:hover {
    background: #fff;
    box-shadow: 0 3px 10px rgba(78, 205, 196, 0.1);
}

.xhs-benefits .benefit-item i {
    font-size: 20px;
    color: #4ECDC4 !important; /* 아이콘 색상 강제 적용 */
    flex-shrink: 0;
}

.xhs-benefits .benefit-item span {
    font-size: 14px;
    color: #333 !important; /* 텍스트 색상 강제 적용 */
    line-height: 1.4;
    font-weight: 500;
}

/* 모바일에서 benefits 그리드 */
@media (max-width: 768px) {
    .xhs-benefits .benefits-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    
    .xhs-benefits .benefit-item {
        padding: 12px;
    }
    
    .xhs-benefits .benefit-item i {
        font-size: 16px;
    }
    
    .xhs-benefits .benefit-item span {
        font-size: 13px;
    }
}

/* ========== 커서 문제 해결을 위한 추가 스타일 ========== */
/* 개발자 도구 열었다가 닫았을 때 커서 강제 표시 */
.custom-cursor,
.cursor-follower {
    pointer-events: none !important;
    z-index: 99999 !important;
}

.custom-cursor.hidden,
.cursor-follower.hidden {
    display: none !important;
}

/* 커서가 안 보이는 문제 방지 */
body:not(.mobile) .custom-cursor {
    opacity: 1 !important;
    visibility: visible !important;
}

body:not(.mobile) .cursor-follower {
    opacity: 0.5 !important;
    visibility: visible !important;
}