/* ============================================================
 * VaiFrame — Explore Page Stylesheet
 * - Gallery 검색 / Discover 전용 독립 페이지
 * - Slate + Primary Navy 표준 팔레트 (light/dark 페어)
 * - 모든 비비드(Indigo/Purple/Cyan) 색상 사용 금지 — 시스템 표준 준수
 * - 광고 슬롯 3종 placeholder (top banner / side / inline)
 *
 * [변경 이력]
 * 2026-05-16 | 최초 생성 - /vaiframe/explore 페이지 분리
 * ============================================================ */

/* ──────────────────────────────────────────────
 * Layout shell
 * ──────────────────────────────────────────── */
.vf-ex-body {
    background: #ffffff;
    color: #0f172a;
    font-family: 'Inter', 'Pretendard', 'Noto Sans KR', sans-serif;
    min-height: 100vh;
}
html.vf-theme-dark .vf-ex-body {
    background: #0f172a;
    color: #f1f5f9;
}

.vf-ex-shell {
    position: relative;
    max-width: 1760px;
    margin: 0 auto;
    padding: 16px 20px 60px 20px;
    box-sizing: border-box;
}

/* ──────────────────────────────────────────────
 * Header (logo + actions)
 * ──────────────────────────────────────────── */
.vf-ex-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}
.vf-ex-header-left {
    display: flex;
    align-items: center;
    gap: 12px;
}
.vf-ex-logo {
    height: 40px;
    width: auto;
    display: block;
    cursor: pointer;
}
.vf-ex-header-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* Header action button (common) */
.vf-ex-hdr-btn {
    height: 36px;
    padding: 0 14px;
    border: 1px solid #e2e8f0;
    background: #ffffff;
    color: #475569;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.vf-ex-hdr-btn:hover {
    background: #f1f5f9;
    border-color: #cbd5e1;
    color: #2f4592;
}
.vf-ex-hdr-btn-primary {
    background: #2f4592;
    color: #ffffff;
    border-color: #2f4592;
}
.vf-ex-hdr-btn-primary:hover {
    background: #26397a;
    border-color: #26397a;
    color: #ffffff;
}
.vf-ex-hdr-btn svg {
    width: 16px;
    height: 16px;
}

html.vf-theme-dark .vf-ex-hdr-btn {
    background: #1e293b;
    border-color: #334155;
    color: #cbd5e1;
}
html.vf-theme-dark .vf-ex-hdr-btn:hover {
    background: #334155;
    border-color: #475569;
    color: #f1f5f9;
}
html.vf-theme-dark .vf-ex-hdr-btn-primary {
    background: #4f5ca8;
    border-color: #4f5ca8;
    color: #ffffff;
}
html.vf-theme-dark .vf-ex-hdr-btn-primary:hover {
    background: #5f6db8;
    border-color: #5f6db8;
}

/* Header icon-only button (Profile / Logout) */
.vf-ex-hdr-icon-btn {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    aspect-ratio: 1 / 1;
    padding: 0;
    border: 1px solid #e2e8f0;
    background: #ffffff;
    color: #475569;
    border-radius: 50%;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.vf-ex-hdr-icon-btn:hover {
    background: #f1f5f9;
    border-color: #cbd5e1;
    color: #2f4592;
}
.vf-ex-hdr-icon-btn svg {
    width: 16px;
    height: 16px;
}

/* Header text button (Start Creating) */
.vf-ex-hdr-text-btn {
    flex: 0 0 auto;
    height: 36px;
    padding: 0 14px;
    border: 1px solid #e2e8f0;
    background: #ffffff;
    color: #475569;
    border-radius: 18px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.vf-ex-hdr-text-btn:hover {
    background: #f1f5f9;
    border-color: #cbd5e1;
    color: #2f4592;
}
html.vf-theme-dark .vf-ex-hdr-text-btn {
    background: #1e293b;
    border-color: #334155;
    color: #cbd5e1;
}
html.vf-theme-dark .vf-ex-hdr-text-btn:hover {
    background: #334155;
    border-color: #475569;
    color: #f1f5f9;
}

/* Avatar button — image-fit, no padding */
.vf-ex-header-right .vf-ex-hdr-avatar-btn {
    width: 36px;
    height: 36px;
    min-width: 36px;
    max-width: 36px;
    flex: 0 0 36px;
    padding: 0;
    background: #f1f5f9;
    position: relative;
}
.vf-ex-hdr-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 50%;
}
.vf-ex-hdr-avatar-fallback {
    width: 100%;
    height: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #64748b;
}
.vf-ex-hdr-avatar-fallback svg {
    width: 18px;
    height: 18px;
}

html.vf-theme-dark .vf-ex-hdr-icon-btn {
    background: #1e293b;
    border-color: #334155;
    color: #cbd5e1;
}
html.vf-theme-dark .vf-ex-hdr-icon-btn:hover {
    background: #334155;
    border-color: #475569;
    color: #f1f5f9;
}
html.vf-theme-dark .vf-ex-hdr-avatar-btn {
    background: #334155;
}
html.vf-theme-dark .vf-ex-hdr-avatar-fallback {
    color: #94a3b8;
}


/* ──────────────────────────────────────────────
 * Search section (minimal, Google-style centered)
 * ──────────────────────────────────────────── */
.vf-ex-hero-mini {
    max-width: 720px;
    margin: 40px auto 0 auto;
    padding: 0 4px;
    text-align: center;
}
.vf-ex-hero-mini-title {
    margin: 0;
    font-size: 28px;
    line-height: 1.25;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #0f172a;
}
.vf-ex-hero-mini-accent {
    color: #2f4592;
}
.vf-ex-hero-mini-sub {
    margin: 10px auto 0 auto;
    max-width: 560px;
    font-size: 14px;
    line-height: 1.6;
    color: #64748b;
}
@media (max-width: 720px) {
    .vf-ex-hero-mini { margin-top: 26px; }
    .vf-ex-hero-mini-title { font-size: 23px; }
    .vf-ex-hero-mini-sub { font-size: 13px; }
}
html.vf-theme-dark .vf-ex-hero-mini-title { color: #f1f5f9; }
html.vf-theme-dark .vf-ex-hero-mini-accent { color: #4f5ca8; }
html.vf-theme-dark .vf-ex-hero-mini-sub { color: #94a3b8; }

.vf-ex-search-section {
    margin: 14px auto 32px auto;
    max-width: 720px;
    padding: 0 4px;
}
@media (max-width: 720px) {
    .vf-ex-search-section { margin: 10px auto 24px auto; }
}

.vf-ex-search-wrap {
    position: relative;
    display: flex;
    align-items: center;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 28px;
    padding: 0 12px;
    transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
.vf-ex-search-wrap:focus-within {
    background: #ffffff;
    border-color: #2f4592;
    box-shadow: 0 0 0 4px rgba(47, 69, 146, 0.16);
}
.vf-ex-search-icon {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    color: #94a3b8;
    margin: 0 6px 0 8px;
}
.vf-ex-search-input {
    flex: 1;
    height: 52px;
    border: 0;
    background: transparent;
    color: #0f172a;
    font-size: 15px;
    outline: none;
    padding: 0 8px;
    min-width: 0;
}
.vf-ex-search-input::placeholder { color: #94a3b8; }
.vf-ex-search-clear {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #94a3b8;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
}
.vf-ex-search-clear.is-visible { display: inline-flex; }
.vf-ex-search-clear:hover { background: #e2e8f0; color: #475569; }
.vf-ex-search-clear svg { width: 14px; height: 14px; }

html.vf-theme-dark .vf-ex-search-wrap {
    background: #1e293b;
    border-color: #334155;
}
html.vf-theme-dark .vf-ex-search-wrap:focus-within {
    background: #0f172a;
    border-color: #4f5ca8;
    box-shadow: 0 0 0 4px rgba(79, 92, 168, 0.22);
}
html.vf-theme-dark .vf-ex-search-input { color: #f1f5f9; }
html.vf-theme-dark .vf-ex-search-input::placeholder { color: #64748b; }
html.vf-theme-dark .vf-ex-search-icon { color: #64748b; }
html.vf-theme-dark .vf-ex-search-clear:hover { background: #334155; color: #cbd5e1; }

/* ──────────────────────────────────────────────
 * 3-column layout: side-ad | main | side-ad
 * - Side ads only show above 1280px (otherwise main full-width)
 * ──────────────────────────────────────────── */
.vf-ex-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
    align-items: start;
}
@media (min-width: 1280px) {
    .vf-ex-layout {
        grid-template-columns: 180px minmax(0, 1fr) 180px;
    }
}

.vf-ex-main {
    min-width: 0;
    max-width: 1100px;
    margin: 0 auto;
    width: 100%;
}

/* ──────────────────────────────────────────────
 * Ad slot (common placeholder)
 * - 실제 광고는 추후 별도 작업. 1차는 placeholder
 * ──────────────────────────────────────────── */
.vf-ex-ad {
    position: relative;
    background: #f8fafc;
    border: 1px dashed #cbd5e1;
    border-radius: 10px;
    color: #94a3b8;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    box-sizing: border-box;
    overflow: hidden;
}
.vf-ex-ad::before {
    content: 'Ad';
    position: absolute;
    top: 6px;
    left: 8px;
    font-size: 9px;
    color: #cbd5e1;
    letter-spacing: 0.12em;
    font-weight: 700;
}
html.vf-theme-dark .vf-ex-ad {
    background: #1e293b;
    border-color: #334155;
    color: #475569;
}
html.vf-theme-dark .vf-ex-ad::before { color: #475569; }

/* Top banner ad */
.vf-ex-ad-banner {
    max-width: 1100px;
    margin: 0 auto 20px auto;
    height: 90px;
}

/* Side ads (sticky) */
.vf-ex-ad-side {
    position: sticky;
    top: 16px;
    width: 180px;
    height: 600px;
    display: none;
}
@media (min-width: 1280px) {
    .vf-ex-ad-side { display: flex; }
}

/* Inline ad — inside results stream */
.vf-ex-ad-inline {
    height: 110px;
    margin: 4px 0;
}

/* ──────────────────────────────────────────────
 * Section title
 * ──────────────────────────────────────────── */
.vf-ex-section-title {
    display: flex;
    align-items: baseline;
    gap: 10px;
    font-size: 20px;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -0.015em;
    text-transform: none;
    padding: 4px 2px 14px 2px;
    margin-top: 8px;
}
html.vf-theme-dark .vf-ex-section-title { color: #f1f5f9; }
.vf-ex-section-sub {
    font-size: 13px;
    font-weight: 500;
    color: #94a3b8;
    letter-spacing: 0;
}
html.vf-theme-dark .vf-ex-section-sub { color: #64748b; }

/* ──────────────────────────────────────────────
 * Results / Discover grid
 * ──────────────────────────────────────────── */
.vf-ex-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 14px;
}

/* Empty / loading / hint states */
.vf-ex-state {
    text-align: center;
    color: #94a3b8;
    font-size: 13px;
    padding: 56px 16px;
    line-height: 1.6;
}
.vf-ex-state strong {
    display: block;
    color: #64748b;
    font-size: 15px;
    margin-bottom: 6px;
}
html.vf-theme-dark .vf-ex-state { color: #64748b; }
html.vf-theme-dark .vf-ex-state strong { color: #94a3b8; }

/* Result card */
.vf-ex-card {
    position: relative;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 16px;
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 152px;
}
.vf-ex-card:hover {
    border-color: #2f4592;
    box-shadow: 0 4px 14px rgba(47, 69, 146, 0.10);
    transform: translateY(-1px);
}
html.vf-theme-dark .vf-ex-card {
    background: #1e293b;
    border-color: #334155;
}
html.vf-theme-dark .vf-ex-card:hover {
    border-color: #4f5ca8;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}

.vf-ex-card-top {
    display: flex;
    align-items: center;
    gap: 10px;
}
.vf-ex-card-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    background: #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #64748b;
    font-size: 16px;
    font-weight: 700;
}
.vf-ex-card-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
html.vf-theme-dark .vf-ex-card-avatar {
    background: #334155;
    color: #94a3b8;
}

.vf-ex-card-name-col {
    flex: 1;
    min-width: 0;
}
.vf-ex-card-name {
    font-size: 14px;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.vf-ex-card-handle {
    font-size: 11px;
    color: #94a3b8;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
html.vf-theme-dark .vf-ex-card-name { color: #f1f5f9; }
html.vf-theme-dark .vf-ex-card-handle { color: #64748b; }

.vf-ex-card-bio {
    font-size: 12px;
    color: #475569;
    line-height: 1.45;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    min-height: 32px;
}
html.vf-theme-dark .vf-ex-card-bio { color: #cbd5e1; }

.vf-ex-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: auto;
}
.vf-ex-card-followers {
    font-size: 11px;
    color: #94a3b8;
}
.vf-ex-card-followers strong {
    color: #475569;
    font-weight: 700;
}
html.vf-theme-dark .vf-ex-card-followers { color: #64748b; }
html.vf-theme-dark .vf-ex-card-followers strong { color: #cbd5e1; }

/* Following badge (small tag on name row) */
.vf-ex-card-following-tag {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 9px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 10px;
    background: rgba(47, 69, 146, 0.10);
    color: #2f4592;
    letter-spacing: 0.04em;
    margin-left: 6px;
    flex-shrink: 0;
}
.vf-ex-card-following-tag svg {
    width: 9px;
    height: 9px;
}
html.vf-theme-dark .vf-ex-card-following-tag {
    background: rgba(79, 92, 168, 0.22);
    color: #a7b1d9;
}

/* Card name row to host name + tag */
.vf-ex-card-name-row {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
}

/* Follow button on card */
.vf-ex-card-follow {
    flex-shrink: 0;
    height: 28px;
    padding: 0 12px;
    background: #2f4592;
    color: #ffffff;
    border: 0;
    border-radius: 14px;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.vf-ex-card-follow:hover { background: #26397a; }
.vf-ex-card-follow.is-following {
    background: #f1f5f9;
    color: #475569;
}
.vf-ex-card-follow.is-following:hover {
    background: rgba(239, 68, 68, 0.10);
    color: #b91c1c;
}
.vf-ex-card-follow .vf-ex-fb-on  { display: inline; }
.vf-ex-card-follow .vf-ex-fb-off { display: none; }
.vf-ex-card-follow.is-following .vf-ex-fb-on  { display: inline; }
.vf-ex-card-follow.is-following:hover .vf-ex-fb-on  { display: none; }
.vf-ex-card-follow.is-following:hover .vf-ex-fb-off { display: inline; }

html.vf-theme-dark .vf-ex-card-follow {
    background: #4f5ca8;
}
html.vf-theme-dark .vf-ex-card-follow:hover { background: #5f6db8; }
html.vf-theme-dark .vf-ex-card-follow.is-following {
    background: #334155;
    color: #cbd5e1;
}
html.vf-theme-dark .vf-ex-card-follow.is-following:hover {
    background: rgba(239, 68, 68, 0.22);
    color: #fca5a5;
}

/* ──────────────────────────────────────────────
 * Discover sections wrap (Recent + Suggested)
 * ──────────────────────────────────────────── */

/* ──────────────────────────────────────────────
 * Footer hint
 * ──────────────────────────────────────────── */
.vf-ex-footer {
    margin-top: 36px;
    padding: 18px 8px;
    text-align: center;
    font-size: 11px;
    color: #94a3b8;
}
html.vf-theme-dark .vf-ex-footer { color: #64748b; }

/* Mobile compact (≤640px) */
@media (max-width: 640px) {
    .vf-ex-shell { padding: 10px 12px 40px 12px; }
    .vf-ex-header { gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
    .vf-ex-logo { height: 32px; }
    .vf-ex-hdr-btn,
    .vf-ex-hdr-icon-btn,
    .vf-ex-hdr-text-btn { height: 32px; width: auto; min-width: 32px; padding: 0 10px; font-size: 12px; }
    .vf-ex-hdr-icon-btn { width: 32px; }
    .vf-ex-header-right .vf-ex-hdr-avatar-btn { width: 32px; height: 32px; min-width: 32px; max-width: 32px; flex: 0 0 32px; }
    .vf-ex-hdr-text-btn { padding: 0 10px; }
    .vf-ex-header-right { gap: 4px; margin-left: auto; }
    .vf-ex-search-input { height: 44px; font-size: 14px; }
    .vf-ex-section-title { font-size: 17px; padding: 4px 2px 10px 2px; gap: 6px; flex-wrap: wrap; }
    .vf-ex-section-sub { font-size: 12px; }
    .vf-ex-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
    .vf-ex-card { padding: 12px; min-height: 130px; gap: 8px; }
    .vf-ex-card-avatar { width: 36px; height: 36px; font-size: 13px; }
    .vf-ex-post-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
    .vf-ex-post-body { padding: 10px 12px; gap: 8px; }
    .vf-ex-feed-block { margin-bottom: 28px; }
    .vf-ex-footer { margin-top: 20px; padding: 12px 6px; }
}


/* ──────────────────────────────────────────────
 * Feed sections (Following / FromFollowing / Trending / Recent posts)
 * ──────────────────────────────────────────── */
.vf-ex-feed-block {
    margin-bottom: 48px;
}
.vf-ex-feed-block:last-child { margin-bottom: 0; }

/* Following — horizontal chip strip (YouTube subscriptions style) */
.vf-ex-chip-strip {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 4px 2px 12px 2px;
    scroll-snap-type: x proximity;
}
.vf-ex-chip-strip::-webkit-scrollbar { width: 7px; height: 7px; }
.vf-ex-chip-strip::-webkit-scrollbar-track { background: transparent; }
.vf-ex-chip-strip::-webkit-scrollbar-thumb { background: #d4d7e0; border-radius: 3px; }
.vf-ex-chip-strip::-webkit-scrollbar-thumb:hover { background: #9ca3af; }
.vf-ex-chip-strip { scrollbar-width: thin; scrollbar-color: #d4d7e0 transparent; }
html.vf-theme-dark .vf-ex-chip-strip::-webkit-scrollbar-thumb { background: #475569; }
html.vf-theme-dark .vf-ex-chip-strip::-webkit-scrollbar-thumb:hover { background: #64748b; }
html.vf-theme-dark .vf-ex-chip-strip { scrollbar-color: #475569 transparent; }

.vf-ex-chip {
    flex: 0 0 auto;
    width: 96px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 8px 4px;
    border-radius: 10px;
    cursor: pointer;
    scroll-snap-align: start;
    transition: background 0.15s;
}
.vf-ex-chip:hover { background: #f1f5f9; }
html.vf-theme-dark .vf-ex-chip:hover { background: #334155; }

.vf-ex-chip-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    overflow: hidden;
    background: #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #64748b;
    font-size: 18px;
    font-weight: 700;
    flex-shrink: 0;
}
.vf-ex-chip-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
html.vf-theme-dark .vf-ex-chip-avatar { background: #334155; color: #94a3b8; }

.vf-ex-chip-name {
    font-size: 12px;
    font-weight: 600;
    color: #0f172a;
    text-align: center;
    line-height: 1.3;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.vf-ex-chip-sub {
    font-size: 10px;
    color: #94a3b8;
    text-align: center;
}
html.vf-theme-dark .vf-ex-chip-name { color: #f1f5f9; }
html.vf-theme-dark .vf-ex-chip-sub  { color: #64748b; }

/* Post grid (Trending / Recent / FromFollowing) */
.vf-ex-post-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 14px;
}

.vf-ex-post-card {
    position: relative;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.vf-ex-post-card:hover {
    border-color: #2f4592;
    box-shadow: 0 4px 14px rgba(47, 69, 146, 0.10);
    transform: translateY(-1px);
}
html.vf-theme-dark .vf-ex-post-card {
    background: #1e293b;
    border-color: #334155;
}
html.vf-theme-dark .vf-ex-post-card:hover {
    border-color: #4f5ca8;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}

.vf-ex-post-thumb {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    background: #f1f5f9;
    overflow: hidden;
    display: block;
}
.vf-ex-post-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.vf-ex-post-thumb.is-empty {
    background: linear-gradient(135deg, #f1f5f9, #e2e8f0);
}
html.vf-theme-dark .vf-ex-post-thumb { background: #334155; }
html.vf-theme-dark .vf-ex-post-thumb.is-empty {
    background: linear-gradient(135deg, #334155, #1e293b);
}

.vf-ex-post-body {
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.vf-ex-post-caption {
    font-size: 13px;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.35;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    min-height: 36px;
}
html.vf-theme-dark .vf-ex-post-caption { color: #f1f5f9; }

.vf-ex-post-meta {
    display: flex;
    align-items: center;
    gap: 8px;
}
.vf-ex-post-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    overflow: hidden;
    background: #e2e8f0;
    color: #64748b;
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.vf-ex-post-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
html.vf-theme-dark .vf-ex-post-avatar { background: #334155; color: #94a3b8; }

.vf-ex-post-who {
    flex: 1;
    min-width: 0;
}
.vf-ex-post-author {
    font-size: 11px;
    font-weight: 600;
    color: #475569;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.vf-ex-post-handle {
    font-size: 10px;
    color: #94a3b8;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
html.vf-theme-dark .vf-ex-post-author { color: #cbd5e1; }
html.vf-theme-dark .vf-ex-post-handle { color: #64748b; }

/* Author cluster — avatar + name + handle wrapped together (clickable → gallery page) */
.vf-ex-post-author-cluster {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
    border-radius: 6px;
    padding: 2px 4px;
    margin: -2px -4px;
    transition: background-color 0.15s ease;
}
.vf-ex-post-author-cluster:hover { background: #f1f5f9; }
html.vf-theme-dark .vf-ex-post-author-cluster:hover { background: #334155; }

.vf-ex-post-stats {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}
.vf-ex-post-stat {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 10px;
    color: #64748b;
    font-weight: 600;
}
.vf-ex-post-stat svg { width: 12px; height: 12px; }
html.vf-theme-dark .vf-ex-post-stat { color: #94a3b8; }

/* Like chip — clickable button (overrides default <button> appearance) */
.vf-ex-post-stat-like {
    background: transparent;
    border: none;
    padding: 2px 4px;
    margin: -2px -4px;
    border-radius: 6px;
    cursor: pointer;
    font-family: inherit;
    font-size: 10px;
    font-weight: 600;
    line-height: 1;
    color: #64748b;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.vf-ex-post-stat-like:hover { background: #fef2f2; color: #ef4444; }
.vf-ex-post-stat-like.is-on { color: #ef4444; }
.vf-ex-post-stat-like.is-on:hover { background: #fef2f2; }
html.vf-theme-dark .vf-ex-post-stat-like { color: #94a3b8; }
html.vf-theme-dark .vf-ex-post-stat-like:hover { background: #3b1414; color: #fca5a5; }
html.vf-theme-dark .vf-ex-post-stat-like.is-on { color: #fca5a5; }
html.vf-theme-dark .vf-ex-post-stat-like.is-on:hover { background: #3b1414; }

/* Views chip — display only (no click) */
.vf-ex-post-stat-views { cursor: default; }

/* ════════════════════════════════════════════════════════════════════════════
   Page-post snapshot renderer (used by gallery_page_post.js)
   - .vf-gp-card-host fills the .vf-ex-post-thumb area and hosts the vector
     snapshot DOM injected by fn_gp_post_build_card.
   - .vf-gp-shimmer is the loading placeholder while the snapshot is fetched.
   - .vf-gp-error is shown when the snapshot fetch fails.
   These rules mirror the ones in gallery.css so explore can render page posts
   without depending on gallery.css being loaded.
   ════════════════════════════════════════════════════════════════════════════ */
.vf-gp-card-host {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background: #f8fafc;
    pointer-events: none;
}
html.vf-theme-dark .vf-gp-card-host { background: #0f172a; }

.vf-gp-shimmer {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, #f1f5f9 0%, #e2e8f0 50%, #f1f5f9 100%);
    background-size: 200% 100%;
    animation: vf-gp-shimmer 1.2s linear infinite;
}
html.vf-theme-dark .vf-gp-shimmer {
    background: linear-gradient(90deg, #1e293b 0%, #334155 50%, #1e293b 100%);
    background-size: 200% 100%;
}
@keyframes vf-gp-shimmer {
    0%   { background-position:  100% 0; }
    100% { background-position: -100% 0; }
}

.vf-gp-error {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
    font-size: 11px;
    background: #f8fafc;
}
html.vf-theme-dark .vf-gp-error {
    color: #64748b;
    background: #0f172a;
}

/* ════════════════════════════════════════════════════════════════════════════
   In-page Lightbox (post viewer)
   - Built dynamically by fn_lb_build / fn_lb_open in explore.js.
   - Card click on Trending / Recent / FromFollowing posts opens the
     post in-place instead of navigating to /vaiframe/gallery/...
   ════════════════════════════════════════════════════════════════════════════ */
.vf-ex-lb-mask {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.88);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9000;
    opacity: 0;
    transition: opacity 0.18s ease;
    padding: 24px;
    box-sizing: border-box;
}
.vf-ex-lb-mask.is-open {
    display: flex;
    opacity: 1;
}
html.vf-theme-dark .vf-ex-lb-mask {
    background: rgba(0, 0, 0, 0.92);
}

.vf-ex-lb-stage {
    position: relative;
    width: 100%;
    height: 100%;
    max-width: 1280px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 16px;
    pointer-events: none;
}
.vf-ex-lb-stage > * { pointer-events: auto; }

.vf-ex-lb-close {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.10);
    color: #ffffff;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    transition: background 0.15s;
}
.vf-ex-lb-close:hover { background: rgba(255, 255, 255, 0.20); }

.vf-ex-lb-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.10);
    color: #ffffff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    transition: background 0.15s;
}
.vf-ex-lb-nav svg { width: 22px; height: 22px; }
.vf-ex-lb-nav:hover { background: rgba(255, 255, 255, 0.20); }
.vf-ex-lb-prev { left: 12px; }
.vf-ex-lb-next { right: 12px; }

.vf-ex-lb-body {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 12px;
    position: relative;
}
.vf-ex-lb-body.is-empty {
    background: rgba(255, 255, 255, 0.06);
}
.vf-ex-lb-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
    user-select: none;
    -webkit-user-drag: none;
}
.vf-ex-lb-scroll {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: auto;
    position: relative;
}
.vf-ex-lb-scroll::-webkit-scrollbar { width: 7px; height: 7px; }
.vf-ex-lb-scroll::-webkit-scrollbar-track { background: transparent; }
.vf-ex-lb-scroll::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.20); border-radius: 3px; }
.vf-ex-lb-scroll::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.32); }
.vf-ex-lb-scroll { scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.20) transparent; }

.vf-ex-lb-meta {
    flex: 0 0 auto;
    width: 100%;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    padding: 14px 18px;
    color: #f1f5f9;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.vf-ex-lb-caption {
    font-size: 14px;
    font-weight: 600;
    color: #ffffff;
    line-height: 1.4;
    word-break: break-word;
}
.vf-ex-lb-author-row {
    display: flex;
    align-items: center;
    gap: 12px;
}
.vf-ex-lb-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.12);
    color: #f1f5f9;
    font-size: 13px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.vf-ex-lb-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vf-ex-lb-who { flex: 1; min-width: 0; }
.vf-ex-lb-name {
    font-size: 13px;
    font-weight: 600;
    color: #f1f5f9;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.vf-ex-lb-handle {
    font-size: 11px;
    color: #94a3b8;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.vf-ex-lb-stats {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}
.vf-ex-lb-stat {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: #cbd5e1;
    font-weight: 600;
}
.vf-ex-lb-stat svg { width: 13px; height: 13px; }
.vf-ex-lb-open-gallery {
    flex-shrink: 0;
    border: 1px solid rgba(255, 255, 255, 0.25);
    background: rgba(255, 255, 255, 0.08);
    color: #f1f5f9;
    border-radius: 8px;
    padding: 7px 14px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.vf-ex-lb-open-gallery:hover {
    background: rgba(255, 255, 255, 0.16);
    border-color: rgba(255, 255, 255, 0.45);
}

@media (max-width: 768px) {
    .vf-ex-lb-mask { padding: 12px; }
    .vf-ex-lb-prev { left: 6px; }
    .vf-ex-lb-next { right: 6px; }
    .vf-ex-lb-author-row { flex-wrap: wrap; }
}