/* SM Park-only theme overrides.
 * Loaded only from index.html (smpark) to avoid cross-variant regressions.
 */

/* 다크: 브랜드 퍼플 — 탭·필터·링크 등 var(--primary-color) 소비처와 정렬 (2안: 기본 밝게) */
html[data-community="smpark"][data-theme="dark"] {
    --primary-color: #3d2d5c;
}

/*
 * 다크: style.css에서 그라데이션/고정 보라(#4C1D95 등)로 덮는 액션을
 * 상단바·출석·피드 활성 탭과 동일한 톤으로 통일 (#3d2d5c / 호버 #4a386f / 눌림 #312748)
 */
html[data-community="smpark"][data-theme="dark"] .btn-primary {
    background: #3d2d5c;
    border-color: #3d2d5c;
    box-shadow: none;
}

html[data-community="smpark"][data-theme="dark"] .btn-primary:hover {
    background: #4a386f;
    border-color: #4a386f;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

html[data-community="smpark"][data-theme="dark"] .toolbar-btn {
    background: #3d2d5c;
}

html[data-community="smpark"][data-theme="dark"] .toolbar-btn:hover {
    background: #4a386f;
}

html[data-community="smpark"][data-theme="dark"] .page-nav-btn {
    background: #3d2d5c;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

html[data-community="smpark"][data-theme="dark"] .page-nav-btn:hover:not(:disabled) {
    background: #4a386f;
    filter: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
}

html[data-community="smpark"][data-theme="dark"] .view-style-btn.active {
    background: #3d2d5c;
}

html[data-community="smpark"][data-theme="dark"] .view-style-btn.active:hover {
    background: #4a386f;
    color: #fff;
}

html[data-community="smpark"][data-theme="dark"] .view-style-btn:hover:not(.active) {
    background: rgba(61, 45, 92, 0.14);
    color: #e8e0f6;
}

html[data-community="smpark"][data-theme="dark"] .image-preview-tag {
    background: #3d2d5c;
}

html[data-community="smpark"][data-theme="dark"] .welcome-card {
    background: #3d2d5c;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.28);
}

html[data-community="smpark"][data-theme="dark"] .message-bubble-me {
    background: #3d2d5c;
}

html[data-community="smpark"][data-theme="dark"] .message-avatar {
    background: #3d2d5c;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

html[data-community="smpark"][data-theme="dark"] .webrtc-btn-primary {
    background: #3d2d5c;
}

html[data-community="smpark"][data-theme="dark"] .webrtc-btn-primary:hover {
    background: #4a386f;
}

html[data-community="smpark"][data-theme="dark"] .btn-primary:active:not(:disabled) {
    background: #312748;
    border-color: #312748;
}

html[data-community="smpark"][data-theme="dark"] .toolbar-btn:active {
    background: #312748;
}

html[data-community="smpark"][data-theme="dark"] .page-nav-btn:active:not(:disabled) {
    background: #312748;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.28);
}

html[data-community="smpark"][data-theme="dark"] .view-style-btn.active:active {
    background: #312748;
    color: #fff;
}

html[data-community="smpark"][data-theme="dark"] .webrtc-btn-primary:active {
    background: #312748;
}

html[data-community="smpark"][data-theme="dark"] .filter-tab.active:active {
    background: #312748;
    border-color: #312748;
    color: #fff;
}

@media (max-width: 767px) {
    html[data-community="smpark"][data-theme="dark"] .nav-item.active {
        box-shadow: 0 10px 24px rgba(61, 45, 92, 0.32);
    }

    html[data-community="smpark"][data-theme="dark"] .nav-item.active::after {
        background: #3d2d5c;
        box-shadow: 0 2px 10px rgba(61, 45, 92, 0.4);
    }
}

/* Icon + text vertical rhythm: baseline alignment makes "Park" look low vs the icon. */
html[data-community="smpark"] .logo {
    align-items: center;
    margin-top: 0;
    align-self: center;
}

html[data-community="smpark"] .logo .logo-sm,
html[data-community="smpark"] .logo .logo-rest {
    display: inline-block;
    line-height: 1;
    transform: translateY(0);
}

/* Keep current light behavior: logo settles to "Park" after intro animation. */
html[data-community="smpark"][data-theme="light"] .logo.logo-final .logo-sm {
    display: none;
}

/* Dark mode brand variant: show full "SMPark" instead of "Park". */
html[data-community="smpark"][data-theme="dark"] .logo .logo-sm {
    display: inline-block;
    max-width: 3.2ch;
    margin-right: 0.14em;
    overflow: visible;
    color: rgba(244, 239, 255, 0.94);
    text-shadow: 0 0 2px rgba(194, 166, 255, 0.2), 0 0 6px rgba(121, 185, 255, 0.12);
}

/* Keep dark-mode steady state aligned with neon "on" look (no post-animation dimming). */
html[data-community="smpark"][data-theme="dark"] .logo {
    color: rgba(244, 239, 255, 0.94);
    text-shadow: 0 0 2px rgba(194, 166, 255, 0.2), 0 0 6px rgba(121, 185, 255, 0.12);
}

html[data-community="smpark"][data-theme="dark"] .logo .logo-icon {
    filter: brightness(0) invert(1);
}

html[data-community="smpark"][data-theme="dark"] .logo.logo-final .logo-sm {
    display: inline-block;
    opacity: 1;
    max-width: 3.2ch;
    margin-right: 0.14em;
    overflow: visible;
}

/* If dark mode is active while intro animation runs, skip collapsing "SM". */
html[data-community="smpark"][data-theme="dark"] .logo.logo-animating .logo-sm {
    animation: none;
    opacity: 1;
    max-width: 3.2ch;
    margin-right: 0.14em;
}

/* Theme-toggle animation: light -> dark (SM reveal), dark -> light (SM collapse). */
html[data-community="smpark"] .logo.logo-theme-reveal .logo-sm {
    display: inline;
    overflow: hidden;
    margin-right: 0.14em;
    animation: sm-reveal 520ms ease forwards;
}

/* During delayed start (after light->dark toggle), keep SM hidden to avoid pre-flash. */
html[data-community="smpark"][data-theme="dark"] .logo.logo-theme-pending-reveal .logo-sm {
    display: inline;
    overflow: hidden;
    margin-right: 0.14em;
    opacity: 0;
    max-width: 0;
}

html[data-community="smpark"] .logo.logo-theme-hide .logo-sm {
    display: inline;
    overflow: hidden;
    animation: sm-collapse 520ms ease forwards;
}

/* Slightly enlarge the logo icon for stronger brand presence. */
html[data-community="smpark"] .logo .logo-icon {
    width: 43px;
    height: 43px;
    max-width: 43px;
    max-height: 43px;
    transform: translateY(0) translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    will-change: opacity;
}

/* Keep spacing stable so enlarged icon doesn't overlap "SMPark". */
html[data-community="smpark"] .logo .logo-icon-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 43px;
    height: 43px;
    min-width: 43px;
    margin-right: 0.14em;
}

/* Navbar vertical centering for logo/messages/notifications/hamburger */
html[data-community="smpark"] .navbar .container {
    align-items: center;
}

html[data-community="smpark"] .navbar .container > * {
    align-self: center;
}

html[data-community="smpark"][data-density="compact"] .navbar .container {
    /* Compact navbar padding is a bit bottom-heavy; tighten slightly after enlarging the logo icon. */
    padding-top: 1px;
    padding-bottom: 3px;
}

html[data-community="smpark"] .navbar-actions {
    align-items: center;
}

html[data-community="smpark"] .navbar-points {
    align-self: center;
}

html[data-community="smpark"] .navbar-icon-btn,
html[data-community="smpark"] #hamburger-menu {
    align-self: center;
}

/* 다크: 상단바 — 비iOS 팔레트 B 고정(#2e1f46). primary(#3d2d5c)보다 한 톤 어둡게 */
html[data-community="smpark"][data-theme="dark"] .navbar {
    background: #2e1f46;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.28);
}

/* 다크 + iOS(WebKit): 상단바·primary·피드 탭을 #3d325d 계열로 통일. 비iOS는 위 팔레트 B(#2e1f46 / #3d2d5c) */
@supports (-webkit-touch-callout: none) {
    html[data-community="smpark"][data-theme="dark"] {
        --primary-color: #3d325d;
    }

    html[data-community="smpark"][data-theme="dark"] .navbar {
        background: #3d325d;
    }

    html[data-community="smpark"][data-theme="dark"] .btn-primary {
        background: #3d325d;
        border-color: #3d325d;
    }

    html[data-community="smpark"][data-theme="dark"] .btn-primary:hover {
        background: #483a6d;
        border-color: #483a6d;
    }

    html[data-community="smpark"][data-theme="dark"] .toolbar-btn {
        background: #3d325d;
    }

    html[data-community="smpark"][data-theme="dark"] .toolbar-btn:hover {
        background: #483a6d;
    }

    html[data-community="smpark"][data-theme="dark"] .page-nav-btn {
        background: #3d325d;
    }

    html[data-community="smpark"][data-theme="dark"] .page-nav-btn:hover:not(:disabled) {
        background: #483a6d;
    }

    html[data-community="smpark"][data-theme="dark"] .view-style-btn.active {
        background: #3d325d;
    }

    html[data-community="smpark"][data-theme="dark"] .view-style-btn.active:hover {
        background: #483a6d;
    }

    html[data-community="smpark"][data-theme="dark"] .view-style-btn:hover:not(.active) {
        background: rgba(61, 50, 93, 0.14);
    }

    html[data-community="smpark"][data-theme="dark"] .image-preview-tag {
        background: #3d325d;
    }

    html[data-community="smpark"][data-theme="dark"] .welcome-card {
        background: #3d325d;
    }

    html[data-community="smpark"][data-theme="dark"] .message-bubble-me {
        background: #3d325d;
    }

    html[data-community="smpark"][data-theme="dark"] .message-avatar {
        background: #3d325d;
    }

    html[data-community="smpark"][data-theme="dark"] .webrtc-btn-primary {
        background: #3d325d;
    }

    html[data-community="smpark"][data-theme="dark"] .webrtc-btn-primary:hover {
        background: #483a6d;
    }

    /* 눌림은 비iOS 팔레트 B(#312748) 대신 기존 톤 유지 */
    html[data-community="smpark"][data-theme="dark"] .btn-primary:active:not(:disabled) {
        background: #3a2d58;
        border-color: #3a2d58;
    }

    html[data-community="smpark"][data-theme="dark"] .toolbar-btn:active {
        background: #3a2d58;
    }

    html[data-community="smpark"][data-theme="dark"] .page-nav-btn:active:not(:disabled) {
        background: #3a2d58;
    }

    html[data-community="smpark"][data-theme="dark"] .view-style-btn.active:active {
        background: #3a2d58;
    }

    html[data-community="smpark"][data-theme="dark"] .webrtc-btn-primary:active {
        background: #3a2d58;
    }

    html[data-community="smpark"][data-theme="dark"] .filter-tab.active:active {
        background: #3a2d58;
        border-color: #3a2d58;
    }

    @media (max-width: 767px) {
        html[data-community="smpark"][data-theme="dark"] .nav-item.active {
            box-shadow: 0 10px 24px rgba(61, 50, 93, 0.32);
        }

        html[data-community="smpark"][data-theme="dark"] .nav-item.active::after {
            background: #3d325d;
            box-shadow: 0 2px 10px rgba(61, 50, 93, 0.4);
        }
    }
}

@keyframes sm-reveal {
    0% {
        opacity: 0;
        max-width: 0;
    }
    100% {
        opacity: 0.85;
        max-width: 3.2ch;
    }
}

/* ---- Home V2 hero (smpark): dark matches navbar purple; light keeps familiar stack ---- */
html[data-community="smpark"] #home-v2 .home-hero-top-row {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.65rem;
}

html[data-community="smpark"] #home-v2 .hero-avatar-thumb {
    display: none;
}

/* Dark hero: 단색 베이스 + 마스크 장식. Custom PNG/SVG: set --smpark-hero-mask-bg on html. */
html[data-community="smpark"][data-theme="dark"] #home-v2 .home-hero-unified {
    position: relative;
    overflow: hidden;
    background: #17151f;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.07);
    color: rgba(248, 250, 252, 0.96);
}

/* 다크: 홈 피드 탭 활성 — 공용 .btn-primary·--primary-color와 동일 톤(명시 유지) */
html[data-community="smpark"][data-theme="dark"] #home-v2 .home-feed .feed-tabs.feed-tabs--piped .feed-tab-btn.active {
    background: #3d2d5c;
    color: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.22);
}

html[data-community="smpark"][data-theme="dark"] #home-v2 .home-feed .feed-tabs.feed-tabs--piped .feed-tab-btn.active:hover {
    background: #4a386f;
    color: #fff;
}

html[data-community="smpark"][data-theme="dark"] #home-v2 .home-feed .feed-tabs.feed-tabs--piped .feed-tab-btn.active:active {
    background: #312748;
    color: #fff;
}

/* 다크 + iOS: 위 피드 탭 규칙보다 뒤에 두어 #3d325d가 적용되도록 함 */
@supports (-webkit-touch-callout: none) {
    html[data-community="smpark"][data-theme="dark"] #home-v2 .home-feed .feed-tabs.feed-tabs--piped .feed-tab-btn.active {
        background: #3d325d;
    }

    html[data-community="smpark"][data-theme="dark"] #home-v2 .home-feed .feed-tabs.feed-tabs--piped .feed-tab-btn.active:hover {
        background: #483a6d;
    }

    html[data-community="smpark"][data-theme="dark"] #home-v2 .home-feed .feed-tabs.feed-tabs--piped .feed-tab-btn.active:active {
        background: #3a2d58;
    }
}

/* 다크 + iOS + smpark: 하단 탭 — style.css 후반(9271 color·9306 ::before brightness 등)보다 우선하도록 특이성+!important */
@supports (-webkit-touch-callout: none) {
    @media (max-width: 767px) {
        /* 비활성 라벨: 모바일 초기 rgba(...,0.7)와 이전 #e5e7eb 사이 — 활성(#fff)보다 한 톤 낮게 */
        html[data-community="smpark"][data-theme="dark"] body.force-mobile-layout .nav-item:not(.active),
        html[data-community="smpark"][data-theme="dark"] .nav-item:not(.active) {
            color: rgba(203, 213, 225, 0.84) !important;
            font-weight: 600 !important;
            -webkit-font-smoothing: antialiased;
        }

        html[data-community="smpark"][data-theme="dark"] body.force-mobile-layout .nav-item.active,
        html[data-community="smpark"][data-theme="dark"] .nav-item.active {
            color: #ffffff !important;
            font-weight: 700 !important;
            -webkit-font-smoothing: antialiased;
        }

        /*
         * 전역 [data-theme="dark"] .nav-item::before { filter: brightness(0.8); } 무력화 — font-size는 공통 20px 유지
         * 활성은 아래에서 drop-shadow 재적용
         */
        html[data-community="smpark"][data-theme="dark"] body.force-mobile-layout .nav-item:not(.active)::before,
        html[data-community="smpark"][data-theme="dark"] .nav-item:not(.active)::before {
            font-size: 20px !important;
            filter: brightness(1) saturate(1.05) !important;
            opacity: 1 !important;
        }

        html[data-community="smpark"][data-theme="dark"] body.force-mobile-layout .nav-item.active::before,
        html[data-community="smpark"][data-theme="dark"] .nav-item.active::before {
            font-size: 20px !important;
            transform: scale(1.12) translateZ(0) !important;
            filter: drop-shadow(0 4px 14px rgba(129, 140, 248, 0.55)) brightness(1) !important;
            opacity: 1 !important;
        }
    }
}

/* 마스크: 우측으로만 밀어 잘림(세로 이동 없음). 가로 폭의 60%만 카드 안에 남고 40%는 우측 밖 */
html[data-community="smpark"][data-theme="dark"] #home-v2 .home-hero-unified::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: auto;
    left: auto;
    width: min(50vw, 210px);
    height: min(29vw, 123px);
    max-width: none;
    right: calc(-0.4 * min(50vw, 210px));
    background-image: var(--smpark-hero-mask-bg, url('/assets/images/smpark/hero-mask-random-01.png'));
    background-repeat: no-repeat;
    background-position: right top;
    background-size: contain;
    /* 알파 PNG 실루엣 기준 그림자 + 은은한 퍼플 글로우 */
    filter: drop-shadow(0 5px 14px rgba(0, 0, 0, 0.55))
        drop-shadow(0 12px 28px rgba(0, 0, 0, 0.28))
        drop-shadow(0 0 22px rgba(157, 80, 187, 0.22));
    opacity: 0.58;
    pointer-events: none;
    z-index: 0;
}

@media (min-width: 768px) {
    html[data-community="smpark"][data-theme="dark"] #home-v2 .home-hero-unified::before {
        width: 196px;
        height: 116px;
        right: -78px;
        top: 0;
        opacity: 0.54;
    }
}

html[data-community="smpark"][data-theme="dark"] #home-v2 .home-hero-unified .home-hero-top-row,
html[data-community="smpark"][data-theme="dark"] #home-v2 .home-hero-unified .hero-content {
    position: relative;
    z-index: 2;
}

html[data-community="smpark"][data-theme="dark"] #home-v2 .home-hero-top-row {
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr);
    align-items: center;
    gap: 0.75rem 0.85rem;
}

html[data-community="smpark"][data-theme="dark"] #home-v2 .hero-avatar-thumb {
    display: block;
    width: 76px;
    height: 76px;
    flex-shrink: 0;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
    align-self: center;
}

html[data-community="smpark"][data-theme="dark"] #home-v2 .hero-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

html[data-community="smpark"][data-theme="dark"] #home-v2 .hero-welcome {
    margin-bottom: 0;
    text-align: left;
}

html[data-community="smpark"][data-theme="dark"] #home-v2 .hero-welcome .hero-sub {
    margin-bottom: 0;
}

/* 닉네임 → 포인트/다이아 → 인사말 세로 스택 */
html[data-community="smpark"] #home-v2 #homev2-welcome.hero-sub {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.35rem;
}

html[data-community="smpark"][data-theme="light"] #home-v2 #homev2-welcome.hero-sub {
    align-items: center;
    text-align: center;
}

html[data-community="smpark"][data-theme="dark"] #home-v2 #homev2-welcome.hero-sub {
    align-items: flex-start;
    text-align: left;
}

html[data-community="smpark"][data-theme="dark"] #home-v2 .hero-nickname-line {
    justify-content: flex-start;
    flex-wrap: wrap;
    margin-bottom: 0;
    font-size: 1.05rem;
}

html[data-community="smpark"][data-theme="dark"] #home-v2 .hero-message-line {
    text-align: left;
    font-size: 0.9rem;
    opacity: 0.88;
    line-height: 1.45;
    margin-top: 0;
}

html[data-community="smpark"][data-theme="dark"] #home-v2 .hero-points-under-nick {
    align-self: flex-start;
    cursor: pointer;
}

html[data-community="smpark"][data-theme="dark"] #home-v2 .hero-points-dual {
    display: inline-flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 0.35rem 0.45rem;
    padding: 0.32rem 0.5rem;
    border-radius: 12px;
    background: rgba(15, 23, 42, 0.22);
    border: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 0.95rem;
    font-weight: 600;
    white-space: nowrap;
}

html[data-community="smpark"][data-theme="dark"] #home-v2 .hero-points-sep--dual {
    display: inline;
    opacity: 0.75;
}

html[data-community="smpark"][data-theme="dark"] #home-v2 .hero-points-line {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

html[data-community="smpark"][data-theme="light"] #home-v2 .hero-welcome {
    text-align: center;
}

html[data-community="smpark"][data-theme="light"] #home-v2 .hero-nickname-line {
    justify-content: center;
}

html[data-community="smpark"][data-theme="light"] #home-v2 .hero-message-line {
    text-align: center;
}

html[data-community="smpark"][data-theme="light"] #home-v2 .hero-points-under-nick {
    cursor: pointer;
    align-self: center;
}

html[data-community="smpark"][data-theme="light"] #home-v2 .hero-points-dual {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.35rem 0.5rem;
    padding: 0.4rem 0.6rem;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.12);
    font-size: 1.05rem;
    font-weight: 600;
}

html[data-community="smpark"][data-theme="light"] #home-v2 .hero-points-sep--dual {
    opacity: 0.85;
}

html[data-community="smpark"][data-theme="dark"] #home-v2 .hero-content {
    margin-top: 0.45rem;
}

html[data-community="smpark"] #home-v2 .hero-points-under-nick:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.45);
    outline-offset: 2px;
    border-radius: 12px;
}

/* ---- Home V2: 하이라이트 갤러리 카드 (SMPark 다크만). 라이트는 .highlight-thumb 숨김으로 기존 레이아웃 유지 ---- */
html[data-community="smpark"]:not([data-theme="dark"]) #home-v2 .highlight-item--home-spot .highlight-thumb {
    display: none !important;
}

/* 다크: 우상단에서 두 스팟 카드 쪽으로 퍼지는 앰비언트 스포트라이트(배경, 클릭 없음) */
html[data-community="smpark"][data-theme="dark"] #home-v2 .card.home-highlights {
    position: relative;
    overflow: hidden;
    /* 카드 외곽 네온: 스팟 타일 톤(170,205,255)과 맞춘 얇은 링 + 은은한 외광 + 상단 인셋 하이라이트 */
    border: 1px solid rgba(150, 200, 255, 0.38);
    box-shadow:
        0 0 0 1px rgba(90, 150, 230, 0.12),
        0 0 14px rgba(120, 185, 255, 0.28),
        0 0 28px rgba(80, 150, 240, 0.16),
        0 0 48px rgba(255, 195, 130, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        inset 0 0 22px rgba(110, 170, 255, 0.07);
}

/* 컴팩트: 공용 규칙과 동일하게 하이라이트 카드 외곽 링·글로우 제거 */
[data-density="compact"] html[data-community="smpark"][data-theme="dark"] body.home-variant-2 #home-v2 .home-highlights.card {
    border: 0;
    box-shadow: none;
}

html[data-community="smpark"][data-theme="dark"] #home-v2 .card.home-highlights::before {
    content: "";
    position: absolute;
    z-index: 0;
    pointer-events: none;
    top: -22%;
    right: -28%;
    left: -6%;
    bottom: -14%;
    mix-blend-mode: screen;
    opacity: 0.55;
    background:
        radial-gradient(ellipse 78% 56% at 94% 4%, rgba(175, 210, 255, 0.42) 0%, rgba(110, 150, 235, 0.16) 40%, transparent 70%),
        radial-gradient(ellipse 62% 50% at 12% 92%, rgba(130, 175, 255, 0.12) 0%, transparent 58%),
        conic-gradient(from 225deg at 88% 0%, rgba(200, 225, 255, 0.14) 0deg, rgba(200, 225, 255, 0) 42deg);
    animation: smpHomeHighlightsSpotSweep 18s ease-in-out infinite;
}

/* 최초 1회: 왼쪽에서 비추다가 우상단 쪽 각도로 스윙 후 사라짐(아래 ::before 루프와 겹침) */
html[data-community="smpark"][data-theme="dark"] #home-v2 .card.home-highlights::after {
    content: "";
    position: absolute;
    z-index: 0;
    pointer-events: none;
    top: -22%;
    right: -28%;
    left: -6%;
    bottom: -14%;
    mix-blend-mode: screen;
    transform-origin: 90% 8%;
    opacity: 0;
    background: radial-gradient(ellipse 76% 58% at 94% 4%, rgba(185, 218, 255, 0.48) 0%, rgba(115, 158, 240, 0.2) 38%, transparent 68%);
    animation: smpHomeHighlightsSpotIntro 1.35s ease-out forwards;
}

@keyframes smpHomeHighlightsSpotIntro {
    0% {
        opacity: 0;
        transform: rotate(-38deg) translate3d(-16%, 6%, 0) scale(0.9);
    }
    18% {
        opacity: 0.52;
        transform: rotate(-20deg) translate3d(-7%, 2%, 0) scale(0.96);
    }
    55% {
        opacity: 0.58;
        transform: rotate(-4deg) translate3d(-1%, 0.5%, 0) scale(0.99);
    }
    100% {
        opacity: 0;
        transform: rotate(0deg) translate3d(0, 0, 0) scale(1);
    }
}

@keyframes smpHomeHighlightsSpotSweep {
    0%,
    100% {
        opacity: 0.48;
        transform: translate3d(0, 0, 0) scale(1);
    }
    50% {
        opacity: 0.72;
        transform: translate3d(-1.8%, 1.2%, 0) scale(1.02);
    }
}

html[data-community="smpark"][data-theme="dark"] #home-v2 .card.home-highlights .highlights-header {
    position: relative;
    z-index: 1;
}

/*
 * 제목(하이라이트) ↔ 썸네일 그리드 사이 여백
 * - comfortable: 전역 1rem → 절반
 * - compact(기본): style.css의 헤더 2px + 그리드 margin-top 10px 이 겹쳐 넓게 보이므로,
 *   html[data-density] 한 요소에 묶어 !important 로 확실히 덮음
 */
html[data-community="smpark"][data-theme="dark"]:not([data-density="compact"]) #home-v2 .card.home-highlights .highlights-header {
    margin-bottom: 0.5rem;
}

html[data-density="compact"][data-community="smpark"][data-theme="dark"] #home-v2 .card.home-highlights .highlights-header {
    margin-bottom: 2px !important;
}

html[data-density="compact"][data-community="smpark"][data-theme="dark"] #home-v2 .card.home-highlights .highlights-grid {
    margin-top: 0 !important;
}

/* 별·제목 한 줄 정렬 (베이스라인/캡 높이 기준으로 맞춤). PC는 body.home-variant-2 없음 → 여기서도 body 조건 제거 */
html[data-community="smpark"][data-theme="dark"] #home-v2 .card.home-highlights .highlights-header h3 {
    display: inline-flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 0.14em;
    line-height: 1.25;
}

/* 다크: 라이트용 이모지 별 숨김 → SVG 네온 별만 (!important: 밀도·기타 규칙보다 항상 한쪽만) */
html[data-community="smpark"][data-theme="dark"] #home-v2 .card.home-highlights .highlights-header h3 .home-highlights-heading-star--emoji {
    display: none !important;
}

html[data-community="smpark"][data-theme="dark"] #home-v2 .card.home-highlights .highlights-header h3 .home-highlights-heading-star--svg {
    display: block !important;
    flex-shrink: 0;
    width: 1.24em;
    height: 1.24em;
    margin: 0;
    overflow: visible;
    transform: translate3d(0, 0, 0);
    filter: drop-shadow(0 0 1px rgba(255, 255, 252, 1))
        drop-shadow(0 0 3px rgba(255, 250, 215, 0.98))
        drop-shadow(0 0 7px rgba(255, 210, 120, 0.82))
        drop-shadow(0 0 14px rgba(255, 170, 70, 0.55))
        drop-shadow(0 0 24px rgba(240, 130, 45, 0.32));
    animation: smpHomeHighlightsStarNeonFlicker 5.4s linear infinite;
    animation-delay: 0.42s;
}

html[data-community="smpark"][data-theme="dark"] #home-v2 .card.home-highlights .highlights-header h3 .home-highlights-heading-star--svg path {
    fill: none;
    stroke: rgba(255, 248, 220, 0.95);
    stroke-width: 1.06;
    stroke-linejoin: round;
    stroke-linecap: round;
}

/* 다크: 「하이라이트」 문구 — 따뜻한 네온(정적, 지직 효과는 SVG 별만) */
html[data-community="smpark"][data-theme="dark"] #home-v2 .card.home-highlights .highlights-header h3 .home-highlights-heading-text {
    display: inline;
    margin-left: 0;
    color: rgba(255, 246, 225, 0.96);
    font-weight: 600;
    text-shadow:
        0 0 2px rgba(255, 255, 252, 0.95),
        0 0 6px rgba(255, 220, 150, 0.7),
        0 0 14px rgba(255, 170, 80, 0.42);
}

/* 별 SVG: noir 워드마크와 유사한 간헐 깜빡임 + 미세 translate 로 지직감 */
@keyframes smpHomeHighlightsStarNeonFlicker {
    0%,
    6% {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
    7% {
        opacity: 0.4;
        transform: translate3d(0.6px, 0, 0);
    }
    8% {
        opacity: 0.9;
        transform: translate3d(-0.5px, 0, 0);
    }
    9% {
        opacity: 0.12;
        transform: translate3d(0.35px, 0, 0);
    }
    10% {
        opacity: 0.78;
        transform: translate3d(0, 0, 0);
    }
    11% {
        opacity: 0.36;
        transform: translate3d(-0.45px, 0, 0);
    }
    12%,
    27% {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
    28% {
        opacity: 0.5;
        transform: translate3d(0.5px, 0, 0);
    }
    29% {
        opacity: 0.08;
        transform: translate3d(-0.4px, 0, 0);
    }
    30% {
        opacity: 1;
        transform: none;
    }
    31% {
        opacity: 0.28;
    }
    32%,
    46% {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
    47% {
        opacity: 0.22;
        transform: translate3d(0.55px, 0, 0);
    }
    48% {
        opacity: 1;
        transform: translate3d(-0.35px, 0, 0);
    }
    49% {
        opacity: 0.58;
        transform: none;
    }
    50%,
    62% {
        opacity: 1;
    }
    63% {
        opacity: 0.18;
        transform: translate3d(0.4px, 0, 0);
    }
    64% {
        opacity: 0.05;
        transform: translate3d(-0.5px, 0, 0);
    }
    65% {
        opacity: 0.86;
        transform: none;
    }
    66% {
        opacity: 0.4;
    }
    67%,
    80% {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
    81% {
        opacity: 0.22;
        transform: translate3d(0.45px, 0, 0);
    }
    82% {
        opacity: 0.08;
        transform: translate3d(-0.55px, 0, 0);
    }
    83% {
        opacity: 0;
        transform: none;
    }
    84% {
        opacity: 0.72;
    }
    85%,
    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

html[data-community="smpark"][data-theme="dark"] #home-v2 .home-highlights .highlights-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem;
    align-items: stretch;
    position: relative;
    z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
    html[data-community="smpark"][data-theme="dark"] #home-v2 .card.home-highlights::before,
    html[data-community="smpark"][data-theme="dark"] #home-v2 .card.home-highlights::after {
        animation: none;
    }

    html[data-community="smpark"][data-theme="dark"] #home-v2 .card.home-highlights::before {
        opacity: 0.55;
        transform: none;
    }

    html[data-community="smpark"][data-theme="dark"] #home-v2 .card.home-highlights::after {
        opacity: 0;
        transform: none;
    }

    html[data-community="smpark"][data-theme="dark"] #home-v2 .card.home-highlights .highlights-header h3 .home-highlights-heading-star--svg {
        animation: none;
    }
}

html[data-community="smpark"][data-theme="dark"] #home-v2 .home-highlights .highlight-item--home-spot {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    /* 라벨·썸·요약을 한 행에 겹쳐 라벨이 이미지 상단에 오도록 */
    grid-template-rows: minmax(calc(6.75rem * 0.9 * 0.8), 1fr);
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    min-height: calc(11.5rem * 0.9 * 0.8);
    padding: 0 !important;
    margin-top: 0 !important;
    overflow: hidden;
    align-items: stretch;
    border: 1px solid rgba(170, 205, 255, 0.28) !important;
    border-top: 1px solid rgba(170, 205, 255, 0.28) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 0 0 1px rgba(100, 150, 255, 0.06);
    background: linear-gradient(165deg, rgba(14, 16, 32, 0.96) 0%, rgba(18, 14, 36, 0.98) 100%);
}

html[data-community="smpark"][data-theme="dark"] #home-v2 .home-highlights .highlight-item--home-spot .highlight-icon {
    display: none;
}

html[data-community="smpark"][data-theme="dark"] #home-v2 .home-highlights .highlight-item--home-spot .highlight-thumb {
    display: block;
    grid-column: 1;
    grid-row: 1;
    position: relative;
    min-height: 0;
    z-index: 0;
    pointer-events: none;
}

html[data-community="smpark"][data-theme="dark"] #home-v2 .home-highlights .highlight-item--home-spot .highlight-thumb-slot {
    position: absolute;
    inset: 0;
}

html[data-community="smpark"][data-theme="dark"] #home-v2 .home-highlights .highlight-item--home-spot .highlight-thumb-slot .post-image,
html[data-community="smpark"][data-theme="dark"] #home-v2 .home-highlights .highlight-item--home-spot .highlight-thumb-slot .post-image-placeholder {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    border-radius: 0;
}

html[data-community="smpark"][data-theme="dark"] #home-v2 .home-highlights .highlight-item--home-spot .highlight-thumb-slot .post-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

html[data-community="smpark"][data-theme="dark"] #home-v2 .home-highlights .highlight-item--home-spot .highlight-thumb-slot .post-image-placeholder__inner {
    justify-content: center;
    min-height: 100%;
}

html[data-community="smpark"][data-theme="dark"] #home-v2 .home-highlights .highlight-item--home-spot .highlight-thumb-slot .sensitive-media-shield {
    width: 100%;
    height: 100%;
    min-height: 100%;
}

/* 라벨(행1) / 이미지/글 요약(행2) — 콘텐츠 래퍼는 그리드에 흡수 */
html[data-community="smpark"][data-theme="dark"] #home-v2 .home-highlights .highlight-item--home-spot .highlight-content {
    display: contents;
}

html[data-community="smpark"][data-theme="dark"] #home-v2 .home-highlights .highlight-item--home-spot .highlight-title {
    grid-column: 1;
    grid-row: 1;
    align-self: start;
    justify-self: stretch;
    position: relative;
    z-index: 3;
    box-sizing: border-box;
    margin: 0;
    padding: 0.48rem 0.62rem 0.42rem;
    color: rgba(245, 248, 255, 0.92);
    font-size: 0.74rem;
    line-height: 1.25;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.42);
    background: linear-gradient(180deg, rgba(12, 14, 28, 0.48) 0%, rgba(12, 14, 28, 0.2) 48%, rgba(12, 14, 28, 0) 92%);
    border-bottom: none;
}

/* 2개 id + body로 style.css .highlight-text white-space:!important 보다 우선해 한 줄 유지 */
html[data-community="smpark"][data-theme="dark"]
    #home-v2
    .home-highlights
    #homev2-top-view.highlight-item--home-spot
    .highlight-text,
html[data-community="smpark"][data-theme="dark"]
    #home-v2
    .home-highlights
    #homev2-top-comment.highlight-item--home-spot
    .highlight-text {
    grid-column: 1;
    grid-row: 1;
    align-self: end;
    justify-self: stretch;
    position: relative;
    z-index: 2;
    box-sizing: border-box;
    margin: 0;
    padding: 1.2rem 0.62rem 0.52rem;
    color: rgba(248, 250, 255, 0.96);
    font-size: 0.86rem;
    line-height: 1.25;
    white-space: nowrap !important;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.65);
    background: linear-gradient(to top, rgba(6, 8, 18, 0.92) 0%, rgba(6, 8, 18, 0.45) 42%, transparent 100%);
    overflow: hidden;
}

/* 제목+작성자 한 줄 — 제목 말줄임, 닉네임은 한 덩어리 유지 */
html[data-community="smpark"][data-theme="dark"]
    #home-v2
    .home-highlights
    :is(#homev2-top-view, #homev2-top-comment).highlight-item--home-spot
    .highlight-text
    .home-title-with-author {
    display: inline-flex;
    align-items: baseline;
    gap: 0.28em;
    max-width: 100%;
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    vertical-align: baseline;
}

html[data-community="smpark"][data-theme="dark"]
    #home-v2
    .home-highlights
    :is(#homev2-top-view, #homev2-top-comment).highlight-item--home-spot
    .highlight-text
    .home-title-with-author
    .post-prefix {
    display: inline;
    flex-shrink: 0;
    vertical-align: baseline;
}

html[data-community="smpark"][data-theme="dark"]
    #home-v2
    .home-highlights
    :is(#homev2-top-view, #homev2-top-comment).highlight-item--home-spot
    .highlight-text
    .home-title-main {
    flex: 1 1 0%;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
    font-size: calc(0.86rem - 2pt);
    color: inherit;
}

html[data-community="smpark"][data-theme="dark"]
    #home-v2
    .home-highlights
    :is(#homev2-top-view, #homev2-top-comment).highlight-item--home-spot
    .highlight-text
    .home-inline-author {
    flex-shrink: 0;
    white-space: nowrap;
    margin-inline-start: 0;
    font-size: calc(0.78em - 1pt);
    font-weight: 500;
    color: rgba(214, 221, 236, 0.78);
    opacity: 0.82;
}

/* 게시판 갤러리 모자이크(PC): style-gallery-mosaic.css 가 호버 시에만 제목·메타 표시 → smp는 항상 표시 */
@media (hover: hover) and (pointer: fine) {
    html[data-community="smpark"]
        #posts-screen
        #posts-list.posts-list.gallery-style
        .post-card.post-card--gallery-mosaic
        .post-content-wrapper {
        opacity: 1;
        pointer-events: auto;
    }
}