/* ============================================================
   소마코 홈페이지 v2 — WordPress 테마 충돌 방지 CSS
   body 프리픽스로 테마 CSS 우선순위 확보
============================================================ */

:root {
    --sh-red: #d32f2f;
    --sh-red-dark: #b71c1c;
    --sh-dark: #09090b;
    --sh-gray-900: #18181b;
    --sh-gray-800: #27272a;
    --sh-gray-600: #52525b;
    --sh-gray-400: #a1a1aa;
    --sh-gray-300: #d4d4d8;
    --sh-gray-200: #e4e4e7;
    --sh-gray-100: #f4f4f5;
    --sh-gray-50: #fafafa;
    --sh-white: #ffffff;
    --sh-max-w: 1200px;
    --sh-font-kr: 'Pretendard', -apple-system, BlinkMacSystemFont, sans-serif;
    --sh-font-en: 'Manrope', var(--sh-font-kr);
}

/* ── WordPress 블록 래퍼 + FSE 레이아웃 간섭 차단 ── */
body .wp-block-shortcode,
body .wp-block-shortcode > *,
body .entry-content .wp-block-shortcode {
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 100% !important;
}

/* FSE 레이아웃 클래스가 숏코드에 패딩/max-width 주입하는 것 차단 */
body .is-layout-constrained > .wp-block-shortcode,
body .has-global-padding > .wp-block-shortcode,
body .is-layout-flow > .wp-block-shortcode {
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* ── wpautop 안전장치: 그리드 직접 자식 중 우리 클래스가 아닌 것 숨김 ── */

/* 히어로 그리드: .sh-hero-main과 .sh-hero-side만 표시 */
body .sh-hero-grid > *:not(.sh-hero-main):not(.sh-hero-side) {
    display: none !important;
}

/* 히어로 사이드: a.sh-hero-side-card만 표시 */
body .sh-hero-side > *:not(a) {
    display: none !important;
}

/* 트렌딩 그리드: a.sh-trending-card만 표시 */
body .sh-trending-grid > *:not(a) {
    display: none !important;
}

/* 시리즈 그리드: a.sh-series-card만 표시 */
body .sh-series-grid > *:not(a) {
    display: none !important;
}

/* Latest 그리드: a.sh-latest-card만 표시 */
body .sh-latest-grid > *:not(a) {
    display: none !important;
}

/* 채널 그리드: a.sh-channel-item만 표시 */
body .sh-channels-grid > *:not(a) {
    display: none !important;
}

/* CTA 내부: 텍스트와 버튼만 표시 */
body .sh-cta-slim-inner > *:not(.sh-cta-slim-text):not(.sh-cta-slim-btn) {
    display: none !important;
}

/* ── 공통 리셋 ── */
body .sh-hero,
body .sh-cta-slim,
body .sh-trending,
body .sh-series,
body .sh-latest,
body .sh-channels,
body .somako-search-overlay {
    box-sizing: border-box !important;
    font-family: var(--sh-font-kr) !important;
    color: var(--sh-dark) !important;
    -webkit-font-smoothing: antialiased;
}

body .sh-hero *,
body .sh-cta-slim *,
body .sh-trending *,
body .sh-series *,
body .sh-latest *,
body .sh-channels * {
    box-sizing: border-box !important;
}

body .sh-hero a,
body .sh-cta-slim a,
body .sh-trending a,
body .sh-series a,
body .sh-latest a,
body .sh-channels a {
    text-decoration: none !important;
    color: inherit !important;
}

body .sh-hero img,
body .sh-trending img,
body .sh-latest img {
    display: block !important;
    max-width: 100% !important;
    border: none !important;
    box-shadow: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* ============================================================
   검색 오버레이
============================================================ */
body .somako-search-overlay {
    display: none !important;
    position: fixed !important;
    top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
    background: rgba(0,0,0,0.5) !important;
    z-index: 99999 !important;
    justify-content: center !important;
    padding-top: 8rem !important;
    backdrop-filter: blur(2px);
}
body .somako-search-overlay.active { display: flex !important; }

body .sh-search-box {
    background: var(--sh-white) !important;
    border-radius: 1rem !important;
    width: 90% !important; max-width: 600px !important;
    height: fit-content !important;
    padding: 1.5rem !important;
    box-shadow: 0 20px 60px rgba(0,0,0,0.15) !important;
}
body .sh-search-input-wrap {
    display: flex !important; align-items: center !important; gap: 0.75rem !important;
    border-bottom: 2px solid var(--sh-dark) !important;
    padding-bottom: 0.75rem !important;
}
body .sh-search-input-wrap svg {
    color: var(--sh-gray-400) !important; flex-shrink: 0 !important;
    width: 20px !important; height: 20px !important;
}
body .sh-search-input {
    border: none !important; outline: none !important;
    font-size: 1.125rem !important; font-family: var(--sh-font-kr) !important;
    width: 100% !important; color: var(--sh-dark) !important;
    background: transparent !important; padding: 0 !important; margin: 0 !important;
}
body .sh-search-input::placeholder { color: var(--sh-gray-300) !important; }
body p.sh-search-hint {
    margin: 0.75rem 0 0 0 !important; padding: 0 !important;
    font-size: 0.75rem !important; color: var(--sh-gray-400) !important;
}

/* ============================================================
   섹션 헤더 공통
============================================================ */
body .sh-section-header {
    display: flex !important;
    align-items: baseline !important;
    justify-content: space-between !important;
    margin-bottom: 1.125rem !important;
    padding: 0 !important;
}
body h2.sh-section-title {
    font-family: var(--sh-font-en) !important;
    font-size: 0.8125rem !important; font-weight: 700 !important;
    text-transform: uppercase !important; letter-spacing: 0.08em !important;
    color: var(--sh-dark) !important;
    display: flex !important; align-items: center !important; gap: 0.5rem !important;
    margin: 0 !important; padding: 0 !important; border: none !important;
    line-height: 1.4 !important;
}
body h2.sh-section-title::before {
    content: '' !important; display: inline-block !important;
    width: 0.625rem !important; height: 0.625rem !important;
    background: var(--sh-red) !important; border-radius: 0.125rem !important;
    flex-shrink: 0 !important;
}
body a.sh-section-more {
    font-size: 0.8125rem !important; font-weight: 500 !important;
    color: var(--sh-gray-400) !important; white-space: nowrap !important;
    transition: color 0.15s;
}
body a.sh-section-more:hover { color: var(--sh-dark) !important; }

/* ============================================================
   히어로
============================================================ */
body section.sh-hero {
    max-width: var(--sh-max-w) !important;
    margin: 0 auto !important;
    padding: 1.25rem 2rem 0 !important;
}
body .sh-hero-grid {
    display: grid !important;
    grid-template-columns: 1fr 300px !important;
    gap: 1.25rem !important;
}
body .sh-hero-main {
    position: relative !important;
    border-radius: 1rem !important;
    overflow: hidden !important;
    aspect-ratio: 16 / 9 !important;
}

/* 슬라이드: 모두 absolute, active만 visible */
body a.sh-hero-slide {
    display: none !important;
    position: absolute !important;
    top: 0 !important; left: 0 !important;
    width: 100% !important; height: 100% !important;
}
body a.sh-hero-slide.active {
    display: block !important;
}
body .sh-hero-main-img {
    width: 100% !important; height: 100% !important;
    object-fit: cover !important; display: block !important;
    transition: transform 0.4s ease;
}
body a.sh-hero-slide:hover .sh-hero-main-img { transform: scale(1.03); }

body .sh-hero-main-overlay {
    position: absolute !important;
    top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
    background: linear-gradient(to top, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.1) 50%, transparent 100%) !important;
    pointer-events: none !important;
}
body .sh-hero-main-content {
    position: absolute !important;
    bottom: 0 !important; left: 0 !important; right: 0 !important;
    padding: 2rem !important; z-index: 2 !important;
}
body .sh-category-tag {
    display: inline-block !important;
    background: var(--sh-red) !important; color: white !important;
    font-size: 0.6875rem !important; font-weight: 600 !important;
    padding: 0.2rem 0.5rem !important; border-radius: 0.2rem !important;
    letter-spacing: 0.02em; margin-bottom: 0.625rem !important;
    line-height: 1.4 !important;
}
body h2.sh-hero-main-title {
    font-size: 1.625rem !important; font-weight: 800 !important;
    color: white !important; line-height: 1.4 !important;
    word-break: keep-all; max-width: 85%;
    margin: 0 !important; padding: 0 !important; border: none !important;
}
body p.sh-hero-main-meta {
    margin: 0.5rem 0 0 0 !important; padding: 0 !important;
    font-size: 0.75rem !important; color: rgba(255,255,255,0.6) !important;
}

/* 인디케이터 */
body .sh-hero-indicators {
    display: flex !important; gap: 0.375rem !important;
    position: absolute !important; bottom: 2rem !important; right: 2rem !important;
    z-index: 3 !important;
}
body button.sh-hero-dot {
    width: 0.5rem !important; height: 0.5rem !important;
    border-radius: 50% !important;
    background: rgba(255,255,255,0.35) !important;
    border: none !important; cursor: pointer; transition: all 0.2s;
    padding: 0 !important; min-width: 0 !important;
}
body button.sh-hero-dot.active {
    background: white !important;
    width: 1.25rem !important; border-radius: 0.25rem !important;
}

/* 사이드 */
body .sh-hero-side {
    display: flex !important; flex-direction: column !important;
    gap: 0.75rem !important; min-height: 0 !important; overflow: hidden !important;
}
body a.sh-hero-side-card {
    flex: 1 !important; min-height: 0 !important;
    position: relative !important; border-radius: 0.75rem !important;
    overflow: hidden !important; display: block !important;
}
body a.sh-hero-side-card img {
    width: 100% !important; height: 100% !important;
    object-fit: cover !important; display: block !important;
    transition: transform 0.3s ease;
}
body a.sh-hero-side-card:hover img { transform: scale(1.05); }

body .sh-hero-side-overlay {
    position: absolute !important;
    top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
    background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, transparent 60%) !important;
    pointer-events: none !important;
}
body .sh-hero-side-content {
    position: absolute !important;
    bottom: 0 !important; left: 0 !important; right: 0 !important;
    padding: 0.875rem !important; z-index: 2 !important;
}
body .sh-hero-side-card .sh-category-tag {
    font-size: 0.5625rem !important; margin-bottom: 0.3rem !important;
}
body h3.sh-hero-side-title {
    font-size: 0.8125rem !important; font-weight: 700 !important;
    color: white !important; line-height: 1.4 !important;
    word-break: keep-all;
    display: -webkit-box !important; -webkit-line-clamp: 2;
    -webkit-box-orient: vertical; overflow: hidden;
    margin: 0 !important; padding: 0 !important; border: none !important;
}

/* ============================================================
   소소레터 슬림 CTA
============================================================ */
body section.sh-cta-slim {
    max-width: var(--sh-max-w) !important;
    margin: 1.25rem auto 0 !important;
    padding: 0 2rem !important;
}
body .sh-cta-slim-inner {
    display: flex !important; align-items: center !important;
    justify-content: space-between !important; gap: 1rem !important;
    background: var(--sh-gray-50) !important;
    border: 1px solid var(--sh-gray-200) !important;
    border-radius: 0.625rem !important;
    padding: 0.625rem 1rem 0.625rem 1.25rem !important;
}
body p.sh-cta-slim-text {
    font-size: 0.8125rem !important; color: var(--sh-gray-600) !important;
    display: flex !important; align-items: center !important;
    gap: 0.375rem !important; white-space: nowrap !important;
    margin: 0 !important; padding: 0 !important;
}
body p.sh-cta-slim-text strong {
    color: var(--sh-dark) !important; font-weight: 600 !important;
}
body a.sh-cta-slim-btn {
    display: inline-block !important;
    padding: 0.4rem 0.875rem !important;
    background: var(--sh-red) !important; color: white !important;
    border: none !important; border-radius: 0.375rem !important;
    font-size: 0.8125rem !important; font-weight: 600 !important;
    cursor: pointer; white-space: nowrap !important;
    transition: background 0.15s;
}
body a.sh-cta-slim-btn:hover {
    background: var(--sh-red-dark) !important; color: white !important;
}

/* ============================================================
   Trending Now
============================================================ */
body section.sh-trending {
    max-width: var(--sh-max-w) !important;
    margin: 0 auto !important;
    padding: 2.25rem 2rem 0 !important;
}
body .sh-trending-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 1rem !important;
}
body a.sh-trending-card {
    display: flex !important; gap: 0.75rem !important;
    align-items: flex-start !important; padding: 0.875rem !important;
    border-radius: 0.625rem !important;
    background: var(--sh-gray-50) !important;
    border: 1px solid var(--sh-gray-100) !important;
    transition: all 0.2s; cursor: pointer;
}
body a.sh-trending-card:hover {
    background: var(--sh-white) !important;
    border-color: var(--sh-gray-200) !important;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}
body span.sh-trending-rank {
    font-family: var(--sh-font-en) !important;
    font-size: 1.375rem !important; font-weight: 800 !important;
    color: var(--sh-red) !important; line-height: 1 !important;
    flex-shrink: 0 !important; width: 1.5rem !important;
    display: block !important;
}
body .sh-trending-info { flex: 1 !important; min-width: 0 !important; }
body p.sh-trending-category {
    font-size: 0.6875rem !important; font-weight: 600 !important;
    color: var(--sh-gray-400) !important; letter-spacing: 0.02em;
    margin: 0 0 0.2rem 0 !important; padding: 0 !important;
}
body h3.sh-trending-title {
    font-size: 0.8125rem !important; font-weight: 600 !important;
    line-height: 1.5 !important; color: var(--sh-dark) !important;
    word-break: keep-all;
    display: -webkit-box !important; -webkit-line-clamp: 2;
    -webkit-box-orient: vertical; overflow: hidden;
    margin: 0 !important; padding: 0 !important; border: none !important;
}
body .sh-trending-thumb {
    width: 4rem !important; height: 4rem !important;
    border-radius: 0.5rem !important; overflow: hidden !important;
    flex-shrink: 0 !important;
}
body .sh-trending-thumb img {
    width: 100% !important; height: 100% !important;
    object-fit: cover !important;
}

/* ============================================================
   시리즈 — 화살표는 CSS ::after (wpautop 방지)
============================================================ */
body section.sh-series {
    max-width: var(--sh-max-w) !important;
    margin: 0 auto !important;
    padding: 2.25rem 2rem 0 !important;
}
body .sh-series-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 1.25rem !important;
}
body .sh-series-grid--single {
    grid-template-columns: 1fr !important;
    max-width: 600px !important;
}
body a.sh-series-card {
    display: flex !important; gap: 1.25rem !important;
    padding: 1.25rem !important; border-radius: 0.75rem !important;
    border: 1px solid var(--sh-gray-200) !important;
    cursor: pointer; transition: all 0.2s;
    align-items: center !important;
    background: var(--sh-white) !important;
    position: relative !important;
}
body a.sh-series-card:hover {
    border-color: var(--sh-gray-300) !important;
    box-shadow: 0 2px 12px rgba(0,0,0,0.05);
}
body a.sh-series-card::after {
    content: '\203A' !important;
    display: flex !important; align-items: center !important;
    justify-content: center !important;
    font-size: 1.5rem !important; color: var(--sh-gray-300) !important;
    flex-shrink: 0 !important; width: 20px !important;
    transition: color 0.15s; line-height: 1 !important;
}
body a.sh-series-card:hover::after {
    color: var(--sh-red) !important;
}
body .sh-series-icon {
    width: 3.5rem !important; height: 3.5rem !important;
    border-radius: 0.75rem !important;
    display: flex !important; align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important; font-size: 1.5rem !important;
}
body .sh-series-icon--newscok { background: #fef3c7 !important; }
body .sh-series-icon--report { background: #ede9fe !important; }
body .sh-series-info { flex: 1 !important; min-width: 0 !important; }
body p.sh-series-label {
    font-size: 0.6875rem !important; font-weight: 700 !important;
    color: var(--sh-red) !important; letter-spacing: 0.02em;
    margin: 0 0 0.2rem 0 !important; padding: 0 !important;
}
body h3.sh-series-card-title {
    font-size: 0.875rem !important; font-weight: 700 !important;
    color: var(--sh-dark) !important; line-height: 1.45 !important;
    word-break: keep-all;
    display: -webkit-box !important; -webkit-line-clamp: 2;
    -webkit-box-orient: vertical; overflow: hidden;
    margin: 0 0 0.25rem 0 !important; padding: 0 !important; border: none !important;
}
body p.sh-series-schedule {
    font-size: 0.6875rem !important; color: var(--sh-gray-400) !important;
    margin: 0 !important; padding: 0 !important;
}

/* ============================================================
   Latest
============================================================ */
body section.sh-latest {
    max-width: var(--sh-max-w) !important;
    margin: 0 auto !important;
    padding: 2.25rem 2rem 0 !important;
}
body .sh-latest-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 1.25rem !important;
}
body a.sh-latest-card {
    display: block !important; cursor: pointer; transition: transform 0.2s;
}
body a.sh-latest-card:hover { transform: translateY(-2px); }

body .sh-latest-card-img {
    aspect-ratio: 16 / 9 !important; border-radius: 0.75rem !important;
    overflow: hidden !important; margin-bottom: 0.625rem !important;
    background: var(--sh-gray-100) !important;
}
body .sh-latest-card-img img {
    width: 100% !important; height: 100% !important;
    object-fit: cover !important; transition: transform 0.3s ease;
}
body a.sh-latest-card:hover .sh-latest-card-img img { transform: scale(1.05); }

body span.sh-category-tag-text {
    font-size: 0.6875rem !important; font-weight: 600 !important;
    color: var(--sh-red) !important; margin-bottom: 0.25rem !important;
    display: block !important; padding: 0 !important;
}
body h3.sh-latest-card-title {
    font-size: 0.9375rem !important; font-weight: 700 !important;
    line-height: 1.5 !important; color: var(--sh-dark) !important;
    word-break: keep-all;
    margin: 0 0 0.25rem 0 !important; padding: 0 !important; border: none !important;
    display: -webkit-box !important; -webkit-line-clamp: 2;
    -webkit-box-orient: vertical; overflow: hidden;
}
body p.sh-latest-card-excerpt {
    font-size: 0.8125rem !important; line-height: 1.55 !important;
    color: var(--sh-gray-600) !important;
    display: -webkit-box !important; -webkit-line-clamp: 2;
    -webkit-box-orient: vertical; overflow: hidden;
    margin: 0 !important; padding: 0 !important;
}
body p.sh-latest-card-date {
    margin: 0.375rem 0 0 0 !important; padding: 0 !important;
    font-size: 0.6875rem !important; color: var(--sh-gray-400) !important;
}

/* ============================================================
   채널
============================================================ */
body section.sh-channels {
    max-width: var(--sh-max-w) !important;
    margin: 0 auto !important;
    padding: 2.5rem 2rem 0 !important;
}
body .sh-channels-grid {
    display: flex !important; gap: 1rem !important;
    justify-content: center !important; flex-wrap: wrap !important;
}
body a.sh-channel-item {
    display: flex !important; align-items: center !important;
    gap: 0.5rem !important; padding: 0.625rem 1.25rem !important;
    border-radius: 2rem !important;
    border: 1px solid var(--sh-gray-200) !important;
    font-size: 0.8125rem !important; font-weight: 500 !important;
    color: var(--sh-gray-600) !important;
    transition: all 0.15s; background: transparent !important;
}
body a.sh-channel-item:hover {
    border-color: var(--sh-gray-300) !important;
    color: var(--sh-dark) !important;
    background: var(--sh-gray-50) !important;
}
body span.sh-channel-icon {
    width: 16px !important; height: 16px !important;
    display: flex !important; align-items: center !important;
    justify-content: center !important;
}
body span.sh-channel-icon svg {
    width: 16px !important; height: 16px !important;
}

/* ============================================================
   모바일 (max-width: 768px)
============================================================ */
@media (max-width: 768px) {
    body section.sh-hero { padding: 0.75rem 1rem 0 !important; }
    body .sh-hero-grid {
        grid-template-columns: 1fr !important; gap: 0.75rem !important;
    }
    body .sh-hero-main {
        border-radius: 0.75rem !important;
        aspect-ratio: 16 / 9 !important;
    }
    body .sh-hero-main-content { padding: 1.25rem !important; }
    body h2.sh-hero-main-title {
        font-size: 1.125rem !important; max-width: 100% !important;
    }
    body .sh-hero-main .sh-category-tag { margin-bottom: 0.5rem !important; }
    body .sh-hero-indicators { bottom: 1.25rem !important; right: 1.25rem !important; }

    body .sh-hero-side {
        flex-direction: row !important; overflow-x: auto !important;
        scrollbar-width: none; gap: 0.75rem !important;
    }
    body .sh-hero-side::-webkit-scrollbar { display: none !important; }
    body a.sh-hero-side-card {
        flex: 0 0 52% !important; aspect-ratio: 16 / 10 !important;
    }
    body .sh-hero-side-content { padding: 0.75rem !important; }
    body h3.sh-hero-side-title { font-size: 0.75rem !important; }

    body section.sh-cta-slim { padding: 0 1rem !important; margin-top: 0.75rem !important; }
    body .sh-cta-slim-inner {
        flex-direction: column !important; gap: 0.625rem !important;
        padding: 0.75rem 1rem !important; align-items: stretch !important;
    }
    body p.sh-cta-slim-text {
        font-size: 0.75rem !important; justify-content: center !important;
        white-space: normal !important; text-align: center !important;
    }
    body a.sh-cta-slim-btn { text-align: center !important; padding: 0.5rem 1rem !important; }

    body section.sh-trending { padding: 1.5rem 1rem 0 !important; }
    body .sh-trending-grid { grid-template-columns: 1fr !important; gap: 0.625rem !important; }
    body a.sh-trending-card { padding: 0.75rem !important; }
    body span.sh-trending-rank { font-size: 1.125rem !important; }

    body section.sh-series { padding: 1.5rem 1rem 0 !important; }
    body .sh-series-grid { grid-template-columns: 1fr !important; gap: 0.75rem !important; }
    body a.sh-series-card { padding: 1rem !important; gap: 1rem !important; }

    body section.sh-latest { padding: 1.5rem 1rem 0 !important; }
    body .sh-latest-grid { grid-template-columns: 1fr 1fr !important; gap: 0.875rem !important; }
    body h3.sh-latest-card-title { font-size: 0.8125rem !important; }
    body p.sh-latest-card-excerpt { display: none !important; }
    body p.sh-latest-card-date { font-size: 0.625rem !important; }

    body section.sh-channels { padding: 1.5rem 1rem 0 !important; }
    body .sh-channels-grid { gap: 0.5rem !important; }
    body a.sh-channel-item { font-size: 0.75rem !important; padding: 0.5rem 1rem !important; }
}

@media (max-width: 375px) {
    body a.sh-hero-side-card { flex: 0 0 68% !important; }
    body .sh-latest-grid { grid-template-columns: 1fr !important; }
}