/* ==========================================================
   마케팅랩 Clean Design Override (2026-05-02)
   목적: 기존 CSS 충돌 무력화 + 깔끔한 화이트 베이스 + 단일 톤
   로드 순서: style.css → style-v2.css → extra.css → features.css → style-clean.css(마지막)
   ========================================================== */

:root {
    --mc-primary: #2563eb;
    --mc-primary-hover: #1d4ed8;
    --mc-primary-soft: #eff6ff;
    --mc-primary-tint: #dbeafe;
    --mc-text: #111827;
    --mc-text-2: #4b5563;
    --mc-text-3: #9ca3af;
    --mc-bg: #f8fafc;
    --mc-surface: #ffffff;
    --mc-border: #e5e7eb;
    --mc-border-soft: #f1f5f9;
    --mc-radius: 10px;
    --mc-radius-lg: 14px;
    --mc-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
    --mc-shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08);
    --mc-font: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont,
        system-ui, 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif;
}

/* === Global ============================================== */
html, body {
    font-family: var(--mc-font) !important;
    color: var(--mc-text) !important;
    background: var(--mc-bg) !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
* { box-sizing: border-box; }

h1, h2, h3, h4, h5, h6 {
    font-family: var(--mc-font) !important;
    color: var(--mc-text) !important;
    letter-spacing: -0.018em !important;
    font-weight: 700 !important;
}

a { transition: color .15s ease; }
a:hover { text-decoration: none !important; }

/* === Top utility bar (간소화) ============================= */
.top-bar, .header-top {
    font-size: 12.5px !important;
    border-bottom: 1px solid var(--mc-border) !important;
}

/* === Main Header ========================================= */
.header-main, .site-header {
    background: var(--mc-surface) !important;
    border-bottom: 1px solid var(--mc-border) !important;
    box-shadow: none !important;
}

/* === Nav (sticky) ======================================== */
.nav-main, .main-nav {
    background: var(--mc-surface) !important;
    border-bottom: 1px solid var(--mc-border) !important;
    box-shadow: 0 1px 0 rgba(0,0,0,0.02) !important;
}
.nav-link {
    color: var(--mc-text-2) !important;
    font-weight: 600 !important;
    border-bottom: 2px solid transparent !important;
    transition: color .15s, border-color .15s, background .15s !important;
}
.nav-link:hover {
    color: var(--mc-primary) !important;
    background: var(--mc-primary-soft) !important;
}
.nav-item.active > .nav-link, .nav-link.active {
    color: var(--mc-primary) !important;
    border-bottom-color: var(--mc-primary) !important;
}
.nav-dropdown {
    border: 1px solid var(--mc-border) !important;
    border-radius: var(--mc-radius) !important;
    box-shadow: var(--mc-shadow-md) !important;
    padding: 8px !important;
}
.nav-dropdown li a {
    border-radius: 6px !important;
    color: var(--mc-text) !important;
    padding: 9px 12px !important;
}
.nav-dropdown li a:hover {
    background: var(--mc-primary-soft) !important;
    color: var(--mc-primary) !important;
}

/* === Buttons (단일 톤) =================================== */
.btn, button.btn {
    font-family: var(--mc-font) !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    border: 1.5px solid transparent !important;
    transition: background .15s, border-color .15s, color .15s, transform .1s !important;
}
.btn-primary {
    background: var(--mc-primary) !important;
    color: #fff !important;
    border-color: var(--mc-primary) !important;
    box-shadow: none !important;
}
.btn-primary:hover {
    background: var(--mc-primary-hover) !important;
    border-color: var(--mc-primary-hover) !important;
    color: #fff !important;
    transform: translateY(-1px);
}
.btn-outline, .btn-outline-primary {
    background: transparent !important;
    color: var(--mc-primary) !important;
    border-color: var(--mc-primary) !important;
}
.btn-outline:hover {
    background: var(--mc-primary) !important;
    color: #fff !important;
}
.btn-secondary, .btn-default {
    background: var(--mc-bg) !important;
    color: var(--mc-text) !important;
    border-color: var(--mc-border) !important;
}

/* === 카드/박스 통일 ====================================== */
.card, .panel, .box,
.combined-section, .category-card, .realtime-card,
.tool-card, .quick-link-card, .partner-card,
.sidebar-widget, .widget,
.content-card, .ranked-card,
.stat-card, .info-card {
    background: var(--mc-surface) !important;
    border: 1px solid var(--mc-border) !important;
    border-radius: var(--mc-radius) !important;
    box-shadow: var(--mc-shadow) !important;
    transition: border-color .15s, box-shadow .15s, transform .15s !important;
}
.card:hover, .tool-card:hover, .quick-link-card:hover, .partner-card:hover,
.category-card:hover {
    border-color: var(--mc-primary-tint) !important;
    box-shadow: var(--mc-shadow-md) !important;
}

/* === 슬라이더/히어로 톤 다운 ============================= */
.hero-slider, .hero-banner, .main-slider {
    border-radius: var(--mc-radius-lg) !important;
    overflow: hidden !important;
    margin: 16px auto !important;
    box-shadow: var(--mc-shadow) !important;
}
.slide-bg, .slide {
    /* 기존 그라데이션을 단순 단색으로 */
    background-image: none !important;
}
.slide-bg-purple, .slide-bg-blue, .slide-bg-indigo {
    background: linear-gradient(135deg, #2563eb 0%, #4f46e5 100%) !important;
}
.slide-bg-orange, .slide-bg-red {
    background: linear-gradient(135deg, #ea580c 0%, #db2777 100%) !important;
}
.slide-bg-green, .slide-bg-teal {
    background: linear-gradient(135deg, #059669 0%, #0891b2 100%) !important;
}
.slide-text h2, .hero-banner h2 {
    color: #fff !important;
    font-size: 28px !important;
    line-height: 1.35 !important;
}
.slide-text p, .hero-banner p { color: rgba(255,255,255,0.92) !important; }

/* === 섹션 헤더 ========================================== */
.section-header, .partners-header, .tools-showcase-header {
    margin-bottom: 18px !important;
    padding: 0 4px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}
.section-header h2, .partners-title h2 {
    font-size: 19px !important;
    font-weight: 700 !important;
    margin: 0 !important;
}

/* === 게시판 리스트 행 정리 ============================== */
.ranked-list li, .post-list li, .board-list li,
.category-list li, .realtime-list li {
    border-bottom: 1px solid var(--mc-border-soft) !important;
    padding: 10px 16px !important;
    font-size: 13.5px !important;
}
.ranked-list li:last-child, .post-list li:last-child { border-bottom: 0 !important; }
.board-label, .post-board-tag, .category-tag {
    background: var(--mc-primary-soft) !important;
    color: var(--mc-primary) !important;
    border-radius: 4px !important;
    padding: 2px 8px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    border: 0 !important;
}
.rank-num {
    background: var(--mc-bg) !important;
    color: var(--mc-text-2) !important;
    border-radius: 4px !important;
    width: 22px !important; height: 22px !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
}
.rank-num.top, .rank-num.hot { background: var(--mc-primary) !important; color: #fff !important; }

/* === 탭 ================================================== */
.tab-btn, .tab-button {
    background: transparent !important;
    border: 0 !important;
    border-bottom: 2.5px solid transparent !important;
    color: var(--mc-text-3) !important;
    font-weight: 600 !important;
    padding: 12px 16px !important;
}
.tab-btn:hover { color: var(--mc-text-2) !important; }
.tab-btn.active {
    color: var(--mc-primary) !important;
    border-bottom-color: var(--mc-primary) !important;
}

/* === 라이브 상태 바 ===================================== */
.live-status-bar, .stats-bar, .footer-stats-bar {
    background: var(--mc-surface) !important;
    border: 1px solid var(--mc-border) !important;
    border-radius: var(--mc-radius) !important;
    box-shadow: var(--mc-shadow) !important;
}

/* === 파트너 카드 깔끔화 ================================= */
.business-partners-section, .partners-section { margin: 24px 0 !important; }
.partners-grid { gap: 14px !important; }
.partner-card {
    background: var(--mc-surface) !important;
    border: 1px solid var(--mc-border) !important;
    border-radius: var(--mc-radius) !important;
    padding: 18px !important;
    box-shadow: var(--mc-shadow) !important;
}
.partner-category {
    background: var(--mc-bg) !important;
    border: 1px solid var(--mc-border) !important;
    color: var(--mc-text-2) !important;
    border-radius: 999px !important;
    padding: 3px 10px !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
}
.partner-name { font-size: 15px !important; margin: 6px 0 !important; }
.partner-desc {
    color: var(--mc-text-2) !important;
    font-size: 12.5px !important;
    line-height: 1.5 !important;
}
.partner-badge {
    background: #fef3c7 !important;
    color: #92400e !important;
    border-radius: 4px !important;
    padding: 2px 8px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
}

/* === 좌측 사이드바 (배너 비활성화로 비어있음) ============ */
.left-sidebar, .left_sidebar, aside.left-side {
    display: none !important;
}

/* === Footer 톤 다운 ===================================== */
.site-footer, footer.site-footer {
    background: #0f172a !important;
    color: #cbd5e1 !important;
    padding: 36px 0 22px !important;
}
.site-footer h4 { color: #fff !important; font-size: 13.5px !important; }
.site-footer a { color: #cbd5e1 !important; font-size: 13px !important; }
.site-footer a:hover { color: #fff !important; }

/* === 스크롤탑 버튼 ====================================== */
.scroll-top-btn, #scrollTopBtn {
    background: var(--mc-primary) !important;
    color: #fff !important;
    border: 0 !important;
    box-shadow: var(--mc-shadow-md) !important;
    border-radius: 50% !important;
    width: 44px !important; height: 44px !important;
}

/* === 폼 요소 ============================================ */
input[type=text], input[type=email], input[type=password],
input[type=number], input[type=search], input[type=tel],
textarea, select, .form-control {
    border: 1.5px solid var(--mc-border) !important;
    border-radius: 8px !important;
    background: var(--mc-surface) !important;
    color: var(--mc-text) !important;
    font-family: var(--mc-font) !important;
    transition: border-color .15s, box-shadow .15s !important;
}
input:focus, textarea:focus, select:focus, .form-control:focus {
    border-color: var(--mc-primary) !important;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.1) !important;
    outline: 0 !important;
}

/* === 검색 상자 (헤더) =================================== */
.search-form, .header-search-form {
    border: 1.5px solid var(--mc-border) !important;
    border-radius: 10px !important;
    background: var(--mc-bg) !important;
    overflow: hidden !important;
}
.search-form:focus-within {
    border-color: var(--mc-primary) !important;
    background: var(--mc-surface) !important;
}
.search-btn { background: var(--mc-primary) !important; color: #fff !important; border: 0 !important; }
.search-btn:hover { background: var(--mc-primary-hover) !important; }

/* === 컨테이너 너비 통일 ================================= */
.container, .wrap, .main-container {
    max-width: 1240px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
}

/* === 광고/배너 영역 시각적 정리 ========================== */
.ad-banner, .top-banner, .footer-banner-section,
.banner-grid .banner-item {
    border-radius: var(--mc-radius) !important;
    overflow: hidden !important;
}
.banner-placeholder, .banner-placeholder-wide {
    background: var(--mc-bg) !important;
    color: var(--mc-text-3) !important;
    border: 1px dashed var(--mc-border) !important;
    border-radius: var(--mc-radius) !important;
}

/* === 인라인 스타일 무력화 (지나친 색상/그라데이션 제거) ====
   주의: !important로도 인라인 style은 못 막지만,
   class를 통한 color 오버라이드는 작동
*/
[style*="background:linear-gradient"]:not(.slide-bg):not(.tool-icon):not(.btn) {
    /* 그라데이션 배경은 슬라이드/도구 아이콘/버튼에만 */
}

/* === 기타 깨질 요소 정리 ================================ */
section + section { margin-top: 24px !important; }

/* === 모바일 ============================================== */
@media (max-width: 768px) {
    .container, .wrap { padding: 0 12px !important; }
    .slide-text h2, .hero-banner h2 { font-size: 22px !important; }
    .partners-grid, .tools-grid, .category-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
    }
    .partner-card, .tool-card { padding: 14px !important; }
}