/* 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: nowrap;
    align-items: center;
    gap: 4px;
    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;
    border-radius: 0;
    background: none;
    border: none;
    box-shadow: none;
    font-size: 0.95rem;
    font-weight: 600;
    white-space: nowrap;
    color: inherit;
    opacity: 0.95;
}

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;
    align-items: center;
    flex-wrap: nowrap;
    gap: 4px;
}

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;
}

html[data-community="smpark"][data-theme="dark"] #home-v2 .hero-points-under-nick:focus-visible {
    border-radius: 4px;
}

/* SMPark 다크 모바일: 히어로 내 닉네임 ↔ 포인트/다이아 ↔ 인사말 세로 간격 축소 (인사말 2줄 시 전체 밀림 완화) */
@media (max-width: 767px) {
    html[data-community="smpark"][data-theme="dark"] #home-v2 #homev2-welcome.hero-sub {
        gap: 0.18rem;
    }

    html[data-community="smpark"][data-theme="dark"] #home-v2 .hero-points-under-nick {
        margin-top: -0.04rem;
        margin-bottom: 2px;
        line-height: 1.08;
    }

    html[data-community="smpark"][data-theme="dark"] #home-v2 .hero-points-dual {
        gap: 0.2rem 0.38rem;
        font-size: 0.88rem;
        line-height: 1.08;
    }

    html[data-community="smpark"][data-theme="dark"] #home-v2 .hero-points-line {
        gap: 0.16rem;
    }

    html[data-community="smpark"][data-theme="dark"] #home-v2 .hero-points-under-nick .points-icon {
        font-size: 1.05rem;
    }

    html[data-community="smpark"][data-theme="dark"] #home-v2 .home-hero-top-row {
        row-gap: 0.55rem;
    }

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

    html[data-community="smpark"][data-theme="dark"] #home-v2 .hero-message-line {
        line-height: 1.34;
    }

    /* 히어로·출석 카드·하이라이트 세로 스택: 출석↔하이라이트 간격을 공통 gap 기준 절반 수준으로 */
    html[data-community="smpark"][data-theme="dark"] #home-v2 .home-hero-highlights-container {
        gap: 4px;
    }

    html[data-community="smpark"][data-theme="dark"] body.force-mobile-layout #home-v2 .home-hero-highlights-container {
        gap: 6px !important;
    }
}

/* ---- 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;
}

/* 다크: 진행중 모임 한줄 카드 대비 보강 */
html[data-community="smpark"][data-theme="dark"] #home-v2 .card.home-ongoing-meetings {
    border: 1px solid rgba(148, 188, 255, 0.34);
    box-shadow:
        0 0 0 1px rgba(92, 138, 210, 0.16),
        0 8px 24px rgba(2, 10, 28, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

html[data-community="smpark"][data-theme="dark"] #home-v2 .home-ongoing-meetings__header h3 {
    color: rgba(241, 248, 255, 0.96);
    text-shadow: 0 0 8px rgba(127, 186, 255, 0.28);
}

html[data-community="smpark"][data-theme="dark"] #home-v2 .home-ongoing-meeting-card {
    background: transparent;
    border: none;
    box-shadow: none;
}

html[data-community="smpark"][data-theme="dark"] #home-v2 .home-ongoing-meeting-card:hover {
    background: rgba(255, 255, 255, 0.07);
}

html[data-community="smpark"][data-theme="dark"] #home-v2 .home-ongoing-meeting-card__status.ongoing {
    background: rgba(239, 68, 68, 0.2);
    color: #ff7e7e;
    border: 1px solid rgba(255, 112, 112, 0.46);
}

html[data-community="smpark"][data-theme="dark"] #home-v2 .home-ongoing-meeting-card__title {
    color: rgba(248, 252, 255, 0.97);
}

html[data-community="smpark"][data-theme="dark"] #home-v2 .home-ongoing-meeting-card__meta {
    color: rgba(201, 221, 246, 0.95);
}

/*
 * 제목(하이라이트) ↔ 썸네일 그리드 사이 여백
 * - 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,
html[data-community="smpark"][data-theme="dark"]
    #home-v2
    .home-highlights
    .highlight-item--spot-top-view.highlight-item--home-spot
    .highlight-text,
html[data-community="smpark"][data-theme="dark"]
    #home-v2
    .home-highlights
    .highlight-item--spot-top-comment.highlight-item--home-spot
    .highlight-text,
html[data-community="smpark"][data-theme="dark"]
    #home-v2
    .home-highlights
    .highlight-item--recruit-slot.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--recruit-slot, .highlight-item--spot-top-view, .highlight-item--spot-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--recruit-slot, .highlight-item--spot-top-view, .highlight-item--spot-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--recruit-slot, .highlight-item--spot-top-view, .highlight-item--spot-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--recruit-slot, .highlight-item--spot-top-view, .highlight-item--spot-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;
    }
}

/* ---- SMPark 다크: 하이라이트 영역 → 1슬라이드(오늘 조회·댓글) + 구인 최신(최대 4건·2건씩) 캐러셀 ---- */
html[data-community="smpark"][data-theme="dark"] #home-v2 .highlights-grid--classic {
    display: none !important;
}

html[data-community="smpark"][data-theme="dark"] #home-v2 .highlights-recruit-carousel:not([hidden]) {
    display: block;
    position: relative;
    z-index: 1;
}

html[data-community="smpark"][data-theme="dark"] #home-v2 .highlights-recruit-carousel-viewport {
    overflow: hidden;
    border-radius: 12px;
    touch-action: pan-y;
}

html[data-community="smpark"][data-theme="dark"] #home-v2 .highlights-recruit-carousel-track {
    display: flex;
    flex-direction: row;
    width: 100%;
    transform: translate3d(calc(var(--smpark-recruit-slide, 0) * -100%), 0, 0);
    transition: transform 0.32s ease-out;
}

@media (prefers-reduced-motion: reduce) {
    html[data-community="smpark"][data-theme="dark"] #home-v2 .highlights-recruit-carousel-track {
        transition: none;
    }
}

html[data-community="smpark"][data-theme="dark"] #home-v2 .highlights-recruit-carousel-slide {
    flex: 0 0 100%;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

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

html[data-community="smpark"][data-theme="dark"] #home-v2 .highlight-item--recruit-slot,
html[data-community="smpark"][data-theme="dark"] #home-v2 .highlight-item--spot-slide.highlight-item--home-spot {
    min-height: calc(11.5rem * 0.9 * 0.8);
}

html[data-community="smpark"][data-theme="dark"] #home-v2 .highlights-recruit-carousel-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 0.55rem;
}

html[data-community="smpark"][data-theme="dark"] #home-v2 .highlights-recruit-carousel-dot {
    width: 7px;
    height: 7px;
    border-radius: 999px;
    padding: 0;
    border: 0;
    background: rgba(180, 205, 255, 0.28);
    cursor: pointer;
    transition: transform 0.15s ease, background 0.15s ease;
}

html[data-community="smpark"][data-theme="dark"] #home-v2 .highlights-recruit-carousel-dot[aria-selected="true"] {
    background: rgba(255, 230, 190, 0.95);
    transform: scale(1.25);
    box-shadow: 0 0 10px rgba(255, 190, 120, 0.35);
}

html[data-density="compact"][data-community="smpark"][data-theme="dark"] #home-v2 .highlights-recruit-carousel-dots {
    margin-top: 0.35rem;
}

/* SMPark 다크 모바일: 하이라이트 이미지(카드) 높이 약 20% 축소 */
@media (max-width: 767px) {
    html[data-community="smpark"][data-theme="dark"] #home-v2 .home-highlights .highlight-item--home-spot {
        grid-template-rows: minmax(calc(6.75rem * 0.9 * 0.8 * 0.8), 1fr);
        min-height: calc(11.5rem * 0.9 * 0.8 * 0.8);
    }

    html[data-community="smpark"][data-theme="dark"] #home-v2 .highlight-item--recruit-slot,
    html[data-community="smpark"][data-theme="dark"] #home-v2 .highlight-item--spot-slide.highlight-item--home-spot {
        min-height: calc(11.5rem * 0.9 * 0.8 * 0.8);
    }

}

/*
 * 성향 선택 UI (회원가입 2단계 + 정보수정 성향 변경 팝업)
 * — 좁은 화면에서 가로 넘침 완화, 행·헤더 높이·아이콘·글자 살짝 축소 (smpark 전용)
 */
html[data-community="smpark"] #preference-edit-popup.popup-overlay {
    padding: 12px;
    box-sizing: border-box;
}

html[data-community="smpark"] .preference-popup {
    max-width: min(520px, calc(100vw - 1.5rem));
    width: 100%;
    box-sizing: border-box;
}

html[data-community="smpark"] .preference-popup .popup-header {
    padding: 14px 16px;
}

html[data-community="smpark"] .preference-popup .popup-header h3 {
    font-size: 16px;
}

html[data-community="smpark"] .preference-popup .popup-close {
    font-size: 20px;
    padding: 2px;
}

html[data-community="smpark"] .preference-popup .popup-body {
    padding: 16px 14px;
}

html[data-community="smpark"] .preference-popup .popup-actions {
    margin-top: 16px;
    gap: 8px;
}

html[data-community="smpark"] .preference-grid {
    gap: 8px;
    margin-bottom: 10px;
}

html[data-community="smpark"] .preference-column {
    gap: 4px;
}

html[data-community="smpark"] .preference-column-header {
    font-size: 11px;
    padding: 6px 5px;
    border-width: 1px;
    border-radius: 8px;
    margin-bottom: 0;
}

html[data-community="smpark"] .preference-top .preference-column-header,
html[data-community="smpark"] .preference-bottom .preference-column-header {
    border-width: 1px;
}

html[data-community="smpark"] .preference-btn {
    gap: 5px;
    padding: 4px 6px;
    border-width: 1px;
    border-radius: 8px;
    min-width: 0;
}

html[data-community="smpark"] .preference-btn:hover {
    transform: none;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}

html[data-community="smpark"] .preference-btn.active {
    transform: none;
    box-shadow: 0 3px 12px rgba(79, 70, 229, 0.22);
}

html[data-community="smpark"] .preference-icon {
    width: 36px;
    height: 36px;
}

html[data-community="smpark"] .preference-name {
    font-size: 12px;
    line-height: 1.2;
    overflow-wrap: anywhere;
    word-break: keep-all;
}

html[data-community="smpark"] .preference-eng {
    font-size: 9px;
    line-height: 1.2;
    overflow-wrap: anywhere;
    word-break: keep-all;
}

html[data-community="smpark"] .preference-btn .preference-code-badge {
    width: 24px;
    min-width: 24px;
    max-width: 24px;
    height: 13px;
    font-size: 8px;
}

html[data-community="smpark"] .preference-emoji {
    font-size: 18px;
}

html[data-community="smpark"] .register-preference-preview {
    padding: 10px 12px;
    margin-bottom: 12px;
}

html[data-community="smpark"] .register-preference-preview-label {
    font-size: 12px;
    margin-bottom: 6px;
}

html[data-community="smpark"] .register-preference-preview-line {
    font-size: 15px;
    gap: 6px;
}

html[data-community="smpark"] .register-preference-preview-desc {
    margin-top: 8px;
    font-size: 11px;
    line-height: 1.4;
}

html[data-community="smpark"] .preference-switch-wrapper {
    margin-top: 12px;
}

@media (max-width: 767px) {
    html[data-community="smpark"] #preference-edit-popup.popup-overlay {
        padding: 10px;
    }

    html[data-community="smpark"] .preference-popup .popup-body {
        padding: 12px 10px;
    }

    html[data-community="smpark"] .preference-grid {
        gap: 6px;
    }

    html[data-community="smpark"] .preference-icon {
        width: 32px;
        height: 32px;
    }

    html[data-community="smpark"] .preference-btn {
        padding: 3px 5px;
        gap: 4px;
    }

    html[data-community="smpark"] .preference-name {
        font-size: 11px;
    }

    html[data-community="smpark"] .preference-eng {
        font-size: 8.5px;
    }

    html[data-community="smpark"] .preference-btn .preference-code-badge {
        width: 22px;
        min-width: 22px;
        max-width: 22px;
        height: 12px;
        font-size: 7px;
    }

    html[data-community="smpark"] .preference-column-header {
        font-size: 10px;
        padding: 5px 4px;
    }
}

/* 네이티브 하단 배너 슬롯: 투명 소재 대비 웹만 배경(smpark, 앱 변경 없음). 네이티브 광고는 슬롯 좌표 위에 그려짐 */
html[data-community="smpark"].native-home-banner-ad body.banner-slot-layout .home-admob-banner-slot {
    background-color: var(--bg-primary);
    border-radius: 10px 10px 0 0;
    box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.08);
}
html[data-community="smpark"].native-home-banner-ad[data-theme="dark"] body.banner-slot-layout .home-admob-banner-slot {
    box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.08);
}

/* --------------------------------------------------------------------------
 * 게시글 상세(PC): 댓글 영역 여백을 컴팩트 밀도와 동일하게 (우·하 과다 완화)
 * — data-density=compact 일 때는 기존 전역 규칙만 사용 (:not 로 중복 방지)
 * -------------------------------------------------------------------------- */
@media (min-width: 768px) {
    html[data-community="smpark"]:not([data-density="compact"]) main.main-content:has(#post-detail-screen.active) > .container {
        padding-left: 5px;
        padding-right: 5px;
    }

    html[data-community="smpark"]:not([data-density="compact"]) #post-detail-screen .screen-header {
        margin-bottom: 6px;
    }

    html[data-community="smpark"]:not([data-density="compact"]) #post-detail-screen #post-detail-content {
        padding-left: 0;
        padding-right: 0;
    }

    html[data-community="smpark"]:not([data-density="compact"]) #post-detail-screen #post-detail-content .post-detail {
        margin-left: 0;
        margin-right: 0;
        padding-left: 2px;
        padding-right: 2px;
        border-radius: 0;
    }

    html[data-community="smpark"]:not([data-density="compact"]) #post-detail-screen .post-actions-bar {
        margin: 16px 0;
        padding: 10px 0;
    }

    html[data-community="smpark"]:not([data-density="compact"]) #post-detail-screen .comments-section {
        margin-top: 18px;
        padding-top: 12px;
    }

    html[data-community="smpark"]:not([data-density="compact"]) #post-detail-screen .comments-section h3 {
        margin-bottom: 10px;
    }

    html[data-community="smpark"]:not([data-density="compact"]) #post-detail-screen .comment-form {
        margin: 10px 0;
        padding: 8px 2px 8px 7px;
    }

    html[data-community="smpark"]:not([data-density="compact"]) #post-detail-screen .comment-item {
        border-radius: 10px;
        padding: 7px 2px 4px 7px;
        margin-bottom: 2px;
    }

    html[data-community="smpark"]:not([data-density="compact"]) #post-detail-screen .comment-header {
        margin-bottom: 6px;
    }

    html[data-community="smpark"]:not([data-density="compact"]) #post-detail-screen .comment-author {
        font-size: 13px;
    }

    html[data-community="smpark"]:not([data-density="compact"]) #post-detail-screen .comment-meta {
        gap: 6px;
    }

    html[data-community="smpark"]:not([data-density="compact"]) #post-detail-screen .comment-date {
        font-size: 11px;
    }

    html[data-community="smpark"]:not([data-density="compact"]) #post-detail-screen .comment-edited {
        font-size: 10px;
    }

    html[data-community="smpark"]:not([data-density="compact"]) #post-detail-screen .comment-content {
        line-height: 1.45;
        margin-bottom: 4px;
        font-size: 13px;
    }

    html[data-community="smpark"]:not([data-density="compact"]) #post-detail-screen .comment-actions {
        gap: 6px;
    }

    html[data-community="smpark"]:not([data-density="compact"]) #post-detail-screen .comment-actions-left {
        gap: 6px;
    }

    html[data-community="smpark"]:not([data-density="compact"]) #post-detail-screen .btn-comment-like,
    html[data-community="smpark"]:not([data-density="compact"]) #post-detail-screen .btn-comment-action {
        padding: 4px 8px;
        font-size: 12px;
        border-radius: 5px;
    }

    html[data-community="smpark"]:not([data-density="compact"]) #post-detail-screen .reply-form {
        margin-top: 8px;
        padding: 6px 2px 4px 7px;
        border-radius: 6px;
    }

    html[data-community="smpark"]:not([data-density="compact"]) #post-detail-screen .reply-form textarea {
        padding: 8px;
        margin-bottom: 6px;
        font-size: 12px;
    }

    html[data-community="smpark"]:not([data-density="compact"]) #post-detail-screen .reply-actions {
        gap: 6px;
    }

    html[data-community="smpark"]:not([data-density="compact"]) #post-detail-screen .replies-list {
        margin-top: 2px;
        margin-left: 9px;
        padding-left: 5px;
        border-left: 0;
    }

    html[data-community="smpark"]:not([data-density="compact"]) #post-detail-screen .reply-item {
        border-radius: 6px;
        padding: 6px 2px 3px 7px;
        margin-bottom: 1px;
    }

    html[data-community="smpark"]:not([data-density="compact"]) #post-detail-screen .reply-item::before {
        left: -10px;
        top: 9px;
        font-size: 11px;
    }
}

/* --------------------------------------------------------------------------
 * smp 다크/라이트: 「썸네일 없음」 플레이스홀더 아이콘 대신 라인 아트 이미지
 * — dark: post-no-thumbnail-art.png (a9my5 626b7a3c)
 * — light: post-no-thumbnail-art-light.png (토끼 3d77a163, 85%·배경 투명·trim·여백)
 * -------------------------------------------------------------------------- */
html[data-community="smpark"][data-theme="dark"] .post-image.post-image-placeholder--no-thumb {
    background-color: transparent;
    background-image: url('/assets/images/smpark/post-no-thumbnail-art.png');
    background-repeat: no-repeat;
    background-position: center 32%;
    background-size: contain;
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

html[data-community="smpark"][data-theme="light"] .post-image.post-image-placeholder--no-thumb {
    background-color: transparent;
    background-image: url('/assets/images/smpark/post-no-thumbnail-art-light.png');
    background-repeat: no-repeat;
    background-position: center 32%;
    background-size: contain;
    border-color: rgba(15, 23, 42, 0.1);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65);
}

html[data-community="smpark"][data-theme="dark"] .post-image-placeholder--no-thumb .post-image-placeholder__icon-svg,
html[data-community="smpark"][data-theme="light"] .post-image-placeholder--no-thumb .post-image-placeholder__icon-svg {
    display: none;
}

html[data-community="smpark"][data-theme="dark"] .post-image-placeholder--no-thumb .post-image-placeholder__inner,
html[data-community="smpark"][data-theme="light"] .post-image-placeholder--no-thumb .post-image-placeholder__inner {
    gap: 4px;
    padding: 6px 4px 5px;
    justify-content: flex-end;
    min-height: 100%;
    box-sizing: border-box;
}

html[data-community="smpark"][data-theme="dark"] .post-image-placeholder--no-thumb .post-image-placeholder__title,
html[data-community="smpark"][data-theme="light"] .post-image-placeholder--no-thumb .post-image-placeholder__title {
    display: none;
}

html[data-community="smpark"][data-theme="dark"] .post-image-placeholder--no-thumb .post-image-placeholder__sub,
html[data-community="smpark"][data-theme="light"] .post-image-placeholder--no-thumb .post-image-placeholder__sub {
    display: none;
}