/* ══════════════════════════════════════════════════════════
   Reference Panel v2 — Pinterest/Notion Gallery Style
   Token source: tokens.css (:root)
   ══════════════════════════════════════════════════════════ */

/* 0. KEYFRAMES */
@keyframes refFadeUp {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes refCollectingPulse {
    0%, 100% { width: 30%; opacity: .8; }
    50%      { width: 70%; opacity: 1; }
}
@keyframes refShimmer {
    from { background-position: -200% 0; }
    to   { background-position: 200% 0; }
}

/* ─────────────────────────────────────────────
   1. Layout Shell
   ───────────────────────────────────────────── */
.ref-panel {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}
.ref-body {
    display: flex;
    flex: 1;
    overflow: hidden;
    gap: 0;
}

/* ─────────────────────────────────────────────
   2. Toolbar (검색 + 필터 + 액션)
   ───────────────────────────────────────────── */
.ref-toolbar {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    padding: var(--s-2) var(--s-3);
    border-bottom: 1px solid var(--line);
    flex-shrink: 0;
    flex-wrap: wrap;
}

/* 검색 */

/* 필터 스트립 */
.ref-filters-wrap {
    position: relative;
    flex: 1;
    min-width: 0;
    overflow: hidden;
}
.ref-filters-wrap::before,
.ref-filters-wrap::after {
    content: '';
    position: absolute;
    top: 0; bottom: 0;
    width: var(--s-6);
    z-index: 1;
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--duration-base);
}
.ref-filters-wrap::before { left: 0; background: linear-gradient(to right, var(--bg-base, #0d1117), transparent); }
.ref-filters-wrap::after  { right: 0; background: linear-gradient(to left, var(--bg-base, #0d1117), transparent); }
.ref-filters-wrap.scroll-left::before { opacity: 1; }
.ref-filters-wrap.scroll-right::after { opacity: 1; }

.ref-filters {
    display: flex;
    gap: var(--s-1);
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding: var(--s-0) 0;
}
.ref-filters::-webkit-scrollbar { display: none; }

.ref-filter-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--s-1);
    padding: var(--s-1) 10px;
    border-radius: var(--radius-pill, 999px);
    border: 1px solid var(--line);
    background: transparent;
    color: var(--text-sub);
    font-size: var(--text-sm);
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    transition: all var(--duration-fast) ease;
}
.ref-filter-btn:hover { background: var(--surface-hover); color: var(--text); }
.ref-filter-btn.active {
    background: var(--accent-dim, rgba(0,255,200,.12));
    border-color: var(--accent);
    color: var(--accent);
}
.ref-filter-btn svg { width: var(--s-3); height: var(--s-3); }
.ref-filter-count {
    font-size: var(--text-xs);
    opacity: .7;
    font-family: var(--font-mono);
}

/* 툴바 액션 (우측) */
.ref-toolbar-actions {
    display: flex;
    align-items: center;
    gap: var(--s-1);
    margin-left: auto;
    flex-shrink: 0;
}

/* 유틸 버튼 (즐겨찾기, +, ...) */
.ref-util-btn {
    width: var(--s-6);
    height: var(--s-6);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius, 8px);
    border: 1px solid transparent;
    background: transparent;
    color: var(--text-sub);
    cursor: pointer;
    transition: all var(--duration-fast) ease;
}
.ref-util-btn:hover { background: var(--surface-hover); color: var(--text); }
.ref-util-btn.active { color: var(--accent); background: var(--accent-dim, rgba(0,255,200,.08)); }
.ref-util-btn svg { width: var(--s-4); height: var(--s-4); }

/* 더보기 드롭다운 */
.ref-more-menu { position: relative; }
.ref-more-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    min-width: clamp(140px, 22vw, 200px);
    background: var(--bg-raised);
    border: 1px solid var(--line);
    border-radius: var(--radius, 12px);
    box-shadow: var(--shadow-lg);
    padding: var(--s-1) 0;
    z-index: 100;
    display: none;
}
.ref-more-dropdown.open { display: block; }
.ref-more-item {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    padding: var(--s-1-5) var(--s-3);
    color: var(--text);
    font-size: var(--text-sm);
    cursor: pointer;
    transition: background var(--duration-fast) ease;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
}
.ref-more-item:hover { background: var(--surface-hover); }
.ref-more-item svg { width: 14px; height: 14px; color: var(--text-sub); flex-shrink: 0; }

/* ─────────────────────────────────────────────
   3. Content Area (그리드 + 빈 상태)
   ───────────────────────────────────────────── */
.ref-content {
    flex: 1;
    overflow-y: auto;
    padding: var(--s-3);
}

/* Masonry Grid (Pinterest) */
.ref-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--s-3);
}

/* ─────────────────────────────────────────────
   4. Card (Pinterest Masonry)
   ───────────────────────────────────────────── */
.ref-card {
    position: relative;
    border-radius: var(--radius, 12px);
    overflow: hidden;
    cursor: pointer;
    transition: transform var(--duration-fast) var(--easing-smooth), box-shadow var(--duration-fast) var(--easing-smooth);
    animation: refFadeUp var(--duration-moderate) var(--easing-smooth) both;
    background: var(--bg-raised);
    aspect-ratio: 1/1;
}
.ref-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,0,0,.3);
}
.ref-card:active {
    transform: translateY(0);
    box-shadow: none;
}
.ref-card.ref-card-selected {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
}

/* 카드 썸네일 */
.ref-card-thumb {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.ref-card-thumb img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

/* 빈 썸네일 (플랫폼 아이콘 + 그라데이션) */
.ref-thumb-empty {
    width: 100%;
    min-height: clamp(100px, 18vw, 160px);
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(30,35,45,1) 0%, rgba(20,60,50,0.8) 100%);
}
.ref-thumb-empty svg {
    width: var(--s-7-5);
    height: var(--s-7-5);
    opacity: .25;
    color: var(--text);
}

/* 플랫폼 뱃지 */
.ref-card-platform {
    z-index: 2;
    position: absolute;
    top: var(--s-3, 12px);
    left: var(--s-3, 12px);
    display: inline-flex;
    align-items: center;
    gap: var(--s-1);
    padding: var(--s-0-5) var(--s-2);
    border-radius: var(--radius-pill, 999px);
    font-size: var(--text-xs);
    font-weight: 600;
    color: #fff;
    backdrop-filter: var(--glass-blur-xs);
    -webkit-backdrop-filter: var(--glass-blur-xs);
    letter-spacing: .02em;
}
.ref-card-platform[data-platform="youtube"]     { background: rgba(255,0,0,.75); }
.ref-card-platform[data-platform="instagram"]   { background: linear-gradient(135deg, #833ab4, #fd1d1d, #fcb045); }
.ref-card-platform[data-platform="tiktok"]      { background: rgba(0,0,0,.8); }
.ref-card-platform[data-platform="threads"]     { background: rgba(139,92,246,.7); }
.ref-card-platform[data-platform="twitter"]     { background: rgba(0,0,0,.7); }
.ref-card-platform[data-platform="x"]           { background: rgba(0,0,0,.7); }
.ref-card-platform[data-platform="pdf"]         { background: rgba(220,38,38,.75); }
.ref-card-platform[data-platform="image"]       { background: rgba(34,197,94,.75); }
.ref-card-platform[data-platform="google_docs"] { background: rgba(66,133,244,.75); }
.ref-card-platform[data-platform="notion"]      { background: rgba(255,255,255,.2); }
.ref-card-platform[data-platform="naver_blog"]  { background: rgba(3,199,90,.75); }
.ref-card-platform[data-platform="reddit"]      { background: rgba(255,69,0,.75); }
.ref-card-platform[data-platform="github"]      { background: rgba(255,255,255,.2); }
.ref-card-platform[data-platform="medium"]      { background: rgba(255,255,255,.2); }
.ref-card-platform[data-platform="generic"]     { background: rgba(255,255,255,.1); }

/* 아이템 수 뱃지 */
.ref-card-duration {
    z-index: 3;
    position: absolute;
    bottom: var(--s-3, 12px);
    right: var(--s-3, 12px);
    padding: var(--s-0) var(--s-2);
    background: rgba(0,0,0,.6);
    border-radius: var(--radius-s);
    font-size: var(--text-xs);
    font-weight: 600;
    color: #fff;
    font-family: var(--font-mono);
    backdrop-filter: var(--glass-blur-xs);
}

/* 수집 중 진행률 */
.ref-card-collecting {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: rgba(255,255,255,.1);
}
.ref-collecting-bar {
    height: 100%;
    width: 30%;
    background: var(--accent);
    border-radius: 0 2px 2px 0;
    animation: refCollectingPulse 1.5s ease-in-out infinite;
}

/* 카드 상태 */
.ref-card-error { opacity: .6; }
.ref-card-error .ref-card-meta span:last-child { color: var(--clr-error, #ef4444); }
.ref-card-limited { opacity: .75; }
.ref-card-limited .ref-card-meta span:last-child { color: #fbbf24; }
.ref-card-cancelled { opacity: .5; }

/* 카드 본문 */
.ref-card-body {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: var(--s-7, 28px) var(--s-4, 16px) var(--s-4, 16px) var(--s-4, 16px);
    display: flex;
    flex-direction: column;
    gap: var(--s-1);
    background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.4) 50%, transparent 100%);
    z-index: 1;
}
.ref-card-body::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 70%;
    backdrop-filter: var(--glass-blur-xs);
    -webkit-backdrop-filter: var(--glass-blur-xs);
    mask-image: linear-gradient(to top, black 0%, black 30%, transparent 100%);
    -webkit-mask-image: linear-gradient(to top, black 0%, black 30%, transparent 100%);
    z-index: -1;
    pointer-events: none;
}
.ref-card-title {
    font-size: var(--text-sm);
    font-weight: 600;
    color: #fff;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0;
    text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}
.ref-card-meta {
    display: flex;
    align-items: center;
    gap: var(--s-1-5);
    font-size: var(--text-xs);
    color: rgba(255,255,255,0.7);
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}
.ref-card-channel {
    display: flex;
    align-items: center;
    gap: var(--s-1);
    color: rgba(255,255,255,0.7);
    font-size: var(--text-xs);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

/* L3 hover reveal */
.ref-card-l3 {
    display: flex;
    flex-direction: column;
    gap: var(--s-1);
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height var(--duration-base) var(--easing-smooth), opacity var(--duration-base) var(--easing-smooth);
}
.ref-card:hover .ref-card-l3 {
    max-height: var(--s-12);
    opacity: 1;
}

/* 카드 태그 */
.ref-card-tags { display: flex; flex-wrap: wrap; gap: var(--s-1); }
.ref-tag {
    padding: var(--s-0) var(--s-1-5);
    border-radius: var(--radius-s);
    background: var(--surface);
    color: var(--text-sub);
    font-size: var(--text-xs);
}

/* 카드 통계 */
.ref-card-stats {
    display: flex;
    gap: var(--s-2);
    font-size: var(--text-xs);
    color: var(--text-sub);
    margin-top: auto;
    padding-top: var(--s-1);
}
.ref-card-stat { display: inline-flex; align-items: center; gap: var(--s-0-5); }
.ref-card-stat svg { width: var(--s-3); height: var(--s-3); }

/* 카드 액션 (hover 오버레이) */
.ref-card-actions {
    position: absolute;
    bottom: var(--s-3, 12px);
    right: var(--s-3, 12px);
    z-index: 3;
    display: flex;
    align-items: center;
    gap: var(--s-1);
    opacity: 0;
    transition: opacity var(--duration-fast) var(--easing-smooth);
}
.ref-card:hover .ref-card-actions,
.ref-card.ref-card-selected .ref-card-actions { opacity: 1; }
.ref-card-action {
    width: var(--s-5-5);
    height: var(--s-5-5);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius, 8px);
    background: var(--surface);
    border: none;
    color: var(--text-sub);
    cursor: pointer;
    transition: all var(--duration-instant) var(--easing-smooth);
}
.ref-card-action { backdrop-filter: var(--glass-blur-xs); -webkit-backdrop-filter: var(--glass-blur-xs); }
.ref-card-action:hover { background: var(--surface-hover); color: var(--text); }

/* 즐겨찾기 */
.ref-fav-btn {
    z-index: 3;
    position: absolute;
    top: var(--s-3, 12px);
    right: var(--s-3, 12px);
    width: var(--s-5-5);
    height: var(--s-5-5);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(0,0,0,.4);
    border: none;
    color: var(--text-sub);
    cursor: pointer;
    opacity: 0;
    transition: opacity var(--duration-fast) var(--easing-smooth), color var(--duration-instant) var(--easing-smooth), background var(--duration-instant) var(--easing-smooth);
    backdrop-filter: var(--glass-blur-xs);
}
.ref-card:hover .ref-fav-btn { opacity: 1; }
.ref-fav-btn.active { opacity: 1; color: #fbbf24; background: rgba(251,191,36,.15); }
.ref-fav-btn:hover { color: #fbbf24; }

/* 배치 체크박스 */
.ref-batch-checkbox {
    position: absolute;
    top: var(--s-1-5);
    left: var(--s-1-5);
    width: var(--s-5-0);
    height: var(--s-5-0);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-s);
    border: 2px solid rgba(255,255,255,.4);
    background: rgba(0,0,0,.3);
    z-index: 2;
    cursor: pointer;
    backdrop-filter: var(--glass-blur-xs);
}
.ref-batch-checkbox.checked {
    background: var(--accent);
    border-color: var(--accent);
}
.ref-batch-checkbox svg { display: none; }
.ref-batch-checkbox.checked svg { display: block; color: var(--bg-base, #000); }

/* 배치 액션 바 */
.ref-batch-bar {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    padding: var(--s-1-5) var(--s-3);
    background: var(--accent-dim, rgba(0,255,200,.08));
    border: 1px solid var(--accent);
    border-radius: var(--radius, 12px);
    margin-bottom: var(--s-2);
    font-size: var(--text-sm);
}
.ref-batch-bar button {
    padding: var(--s-1) 12px;
    border-radius: var(--radius, 8px);
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--text);
    font-size: var(--text-sm);
    cursor: pointer;
    transition: background var(--duration-instant) var(--easing-smooth);
}
.ref-batch-bar button:hover { background: var(--surface-hover); }

/* ─────────────────────────────────────────────
   5. Analysis Panel (우측 사이드)
   ───────────────────────────────────────────── */
.ref-analysis {
    width: min(420px, 45vw);
    flex-shrink: 0;
    background: var(--bg-raised);
    border-left: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: width var(--duration-base) var(--easing-smooth), opacity var(--duration-base) var(--easing-smooth);
}
.ref-analysis.hidden,
.ref-analysis.u-hidden {
    width: 0;
    opacity: 0;
    overflow: hidden;
    border-left: none;
}
.ref-analysis-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--s-2) var(--s-3);
    border-bottom: 1px solid var(--line);
    flex-shrink: 0;
}
.ref-analysis-header h3 {
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--text);
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ref-analysis-close {
    width: var(--s-5-5);
    height: var(--s-5-5);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius, 8px);
    border: none;
    background: none;
    color: var(--text-sub);
    cursor: pointer;
}
.ref-analysis-close:hover { background: var(--surface-hover); color: var(--text); }

.ref-analysis-body {
    flex: 1;
    overflow-y: auto;
    padding: var(--s-3);
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
}

/* 미리보기 */
.ref-preview {
    border-radius: var(--radius, 12px);
    overflow: hidden;
    background: var(--surface);
    
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-faint);
    font-size: var(--text-sm);
}
.ref-preview img,
.ref-preview iframe { width: 100%; height: 100%; object-fit: cover; display: block; }

/* 섹션 */
.ref-section {
    display: flex;
    flex-direction: column;
    gap: var(--s-1-5);
}
.ref-section-title {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text-sub);
    text-transform: uppercase;
    letter-spacing: .06em;
}

/* 메타데이터 행 */
.ref-metadata-rows,
.ref-stats-rows {
    display: flex;
    flex-direction: column;
    gap: var(--s-1);
}
.ref-metadata-row,
.ref-stats-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: var(--text-sm);
}
.ref-metadata-row .label,
.ref-stats-row .label { color: var(--text-sub); }
.ref-metadata-row .value,
.ref-stats-row .value { color: var(--text); font-weight: 500; }

/* 아이템 스트립 */
.ref-items-strip {
    display: flex;
    gap: var(--s-1-5);
    overflow-x: auto;
    padding: var(--s-1) 0;
    scrollbar-width: none;
}
.ref-items-strip::-webkit-scrollbar { display: none; }
.ref-item-card {    flex-shrink: 0;    width: 100px;    display: flex;    flex-direction: column;    gap: var(--s-1);    cursor: pointer;}.ref-item-card .ref-item-title {    font-size: 11px;    line-height: 1.3;    color: var(--text);    overflow: hidden;    text-overflow: ellipsis;    white-space: nowrap;}.ref-item-card .ref-item-channel {    font-size: 10px;    color: var(--text-sub);    overflow: hidden;    text-overflow: ellipsis;    white-space: nowrap;}.ref-item-card .ref-item-meta-line {    font-size: 10px;    color: var(--text-sub);    display: flex;    gap: var(--s-1);}.ref-item-card.active .ref-item-thumb { border-color: var(--accent); }.ref-item-card:hover .ref-item-thumb { border-color: var(--accent); }
.ref-item-thumb {
    flex-shrink: 0;
    width: var(--s-12);
    height: var(--s-12);
    border-radius: var(--radius, 8px);
    overflow: hidden;
    cursor: pointer;
    border: 2px solid transparent;
    transition: border-color var(--duration-instant) var(--easing-smooth);
    position: relative;
}
.ref-item-thumb:hover,
.ref-item-thumb.active { border-color: var(--accent); }
.ref-item-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.ref-item-thumb-empty {
    width: 100%;
    height: 100%;
    background: var(--surface);
    display: flex;
    align-items: center;
    justify-content: center;
}
.ref-item-thumb-empty svg { width: var(--s-5); height: var(--s-5); opacity: .3; }

/* 미리보기 영상 재생 오버레이 */
.ref-video-wrap {
    position: relative;
    border-radius: var(--radius, 8px);
    overflow: hidden;
    background: var(--surface);
}
.ref-video-wrap img {
    width: 100%;
    display: block;
    object-fit: cover;
    
}
.ref-play-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,.25);
    opacity: 0;
    transition: opacity var(--anim-fast, .15s) ease;
    color: #fff;
    text-decoration: none;
}
.ref-video-wrap:hover .ref-play-overlay { opacity: 1; }
.ref-play-overlay svg {
    width: var(--s-7-5);
    height: var(--s-7-5);
    filter: drop-shadow(0 2px 8px rgba(0,0,0,.4));
}
.ref-duration-badge {
    position: absolute;
    bottom: var(--s-2, 8px);
    right: var(--s-2, 8px);
    background: rgba(0,0,0,.75);
    color: #fff;
    font-size: var(--text-sm, 10px);
    padding: var(--s-0) var(--s-1-5);
    border-radius: var(--radius, 4px);
    font-variant-numeric: tabular-nums;
}

/* 분석 액션 버튼 */
.ref-analysis-actions {
    display: flex;
    flex-direction: column;
    gap: var(--s-1-5);
}
.ref-analysis-action {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    padding: var(--s-2);
    border-radius: var(--radius, 8px);
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--text);
    cursor: pointer;
    transition: all var(--duration-fast) var(--easing-smooth);
    text-align: left;
    font-size: var(--text-sm);
    width: 100%;
}
.ref-analysis-action:hover { background: var(--surface-hover); border-color: var(--accent); }
.ref-analysis-action svg { width: 18px; height: 18px; color: var(--accent); flex-shrink: 0; }
.ref-analysis-action .action-label { font-weight: 500; }
.ref-analysis-action .action-desc { font-size: 11px; color: var(--text-sub); }
.ref-analysis-action .action-shortcut {
    margin-left: auto;
    padding: var(--s-0) var(--s-1-5);
    border-radius: var(--radius-s);
    background: var(--bg-raised);
    font-size: var(--text-xs);
    font-family: var(--font-mono);
    color: var(--text-faint);
}

/* 소스 URL */
.ref-source-url-row {
    display: flex;
    align-items: center;
    gap: var(--s-1-5);
    padding: var(--s-1-5) var(--s-2);
    background: var(--surface);
    border-radius: var(--radius, 8px);
    font-size: var(--text-sm);
}
.ref-source-url-row a {
    color: var(--accent);
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ref-source-url-row a:hover { text-decoration: underline; }

/* 자막/본문 접이식 */
.ref-collapse-header {
    display: flex;
    align-items: center;
    gap: var(--s-1);
    padding: var(--s-1-5) 0;
    cursor: pointer;
    color: var(--text-sub);
    font-size: var(--text-sm);
    font-weight: 500;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
}
.ref-collapse-header:hover { color: var(--text); }
.ref-sub-arrow,
.ref-body-arrow { transition: transform var(--duration-fast) var(--easing-smooth); font-size: 10px; }
.ref-content-scroll {
    max-height: var(--card-min-sm);
    overflow-y: auto;
    font-size: var(--text-sm);
    color: var(--text-sub);
    white-space: pre-wrap;
    padding: var(--s-1) 0;
}

/* 자유 분석 입력 */
.ref-custom-analysis-form {
    display: flex;
    gap: var(--s-1);
}
.ref-custom-analysis-input {
    flex: 1;
    padding: var(--s-1-5) var(--s-2);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius, 8px);
    color: var(--text);
    font-size: var(--text-sm);
    outline: none;
}
.ref-custom-analysis-input:focus { border-color: var(--accent); }
.ref-custom-analysis-btn {
    padding: var(--s-1-5) var(--s-2);
    border-radius: var(--radius, 8px);
    background: var(--accent);
    color: var(--bg-base, #000);
    border: none;
    font-weight: 600;
    cursor: pointer;
    font-size: var(--text-sm);
}
.ref-custom-analysis-history {
    display: flex;
    flex-direction: column;
    gap: var(--s-1);
    max-height: 300px;
    overflow-y: auto;
}
.ref-custom-analysis-item {
    padding: var(--s-2);
    background: var(--surface);
    border-radius: var(--radius, 8px);
    font-size: var(--text-sm);
}
.ref-custom-analysis-q { color: var(--accent); font-weight: 500; margin-bottom: var(--s-1); }
.ref-custom-analysis-a { color: var(--text); line-height: 1.5; }

/* ─────────────────────────────────────────────
   6. Empty State
   ───────────────────────────────────────────── */
.ref-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--s-3);
    padding: var(--s-6) var(--s-3);
    text-align: center;
    min-height: var(--layout-lg);
}
.ref-empty-title {
    font-size: var(--text-lg, 18px);
    font-weight: 600;
    color: var(--text);
    margin: 0;
}
.ref-empty-url-row {
    display: flex;
    gap: var(--s-1-5);
    width: 100%;
    max-width: var(--layout-xl);
}
.ref-empty-url-input {
    flex: 1;
    padding: var(--s-2) var(--s-3);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius, 12px);
    color: var(--text);
    font-size: var(--text-sm);
    outline: none;
}
.ref-empty-url-input:focus { border-color: var(--accent); }
.ref-empty-url-btn {
    padding: var(--s-2) var(--s-3);
    border-radius: var(--radius, 12px);
    background: var(--accent);
    color: var(--bg-base, #000);
    border: none;
    font-weight: 600;
    cursor: pointer;
    font-size: var(--text-sm);
    white-space: nowrap;
}
.ref-empty-url-btn:disabled { opacity: .4; cursor: not-allowed; }
.ref-empty-hint {
    color: var(--text-faint);
    font-size: var(--text-sm);
    margin: 0;
}

/* ─────────────────────────────────────────────
   7. URL Input Bar
   ───────────────────────────────────────────── */
.ref-url-row {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    padding: var(--s-2) var(--s-3);
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    flex-shrink: 0;
    transition: max-height var(--duration-base) var(--easing-smooth), opacity var(--duration-base) var(--easing-smooth), padding var(--duration-base) var(--easing-smooth);
    overflow: visible;
}
.ref-url-row.collapsed {
    max-height: 0;
    opacity: 0;
    padding: 0 var(--s-3);
    overflow: hidden;
    border-bottom: none;
}
.ref-url-icon { color: var(--text-sub); flex-shrink: 0; }
.ref-url-icon svg { width: var(--s-4); height: var(--s-4); }
.ref-url-input {
    flex: 1;
    padding: var(--s-1-5) var(--s-2);
    background: var(--bg-raised);
    border: 1px solid var(--line);
    border-radius: var(--radius, 8px);
    color: var(--text);
    font-size: var(--text-sm);
    outline: none;
}
.ref-url-input:focus { border-color: var(--accent); }
.ref-url-type-badge {
    padding: var(--s-0-5) var(--s-2);
    border-radius: var(--radius-pill, 999px);
    font-size: var(--text-xs);
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
}
.ref-collect-select {
    padding: var(--s-1) var(--s-1-5);
    background-color: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius, 8px);
    color: var(--text);
    font-size: var(--text-sm);
}
.ref-url-submit {
    padding: var(--s-1-5) var(--s-2-5, 10px);
    border-radius: var(--radius, 8px);
    background: var(--accent);
    color: var(--bg-base, #000);
    border: none;
    font-weight: 600;
    cursor: pointer;
    font-size: var(--text-sm);
    white-space: nowrap;
}
.ref-url-submit:disabled { opacity: .4; cursor: not-allowed; }

/* ─────────────────────────────────────────────
   8. Instagram Config
   ───────────────────────────────────────────── */
.ref-ig-config {
    border: 1px solid var(--line);
    border-radius: var(--radius, 12px);
    margin: var(--s-2) var(--s-3);
    overflow: hidden;
}
.ref-ig-config-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--s-2) var(--s-3);
    background: var(--surface);
    cursor: pointer;
}
.ref-ig-config-body {
    padding: var(--s-3);
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
}
.ref-ig-key-row {
    display: flex;
    gap: var(--s-1);
}
.ref-ig-key-input {
    flex: 1;
    padding: var(--s-1-5) var(--s-2);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius, 8px);
    color: var(--text);
    font-size: var(--text-sm);
    font-family: var(--font-mono);
}
.ref-ig-key-save,
.ref-ig-key-test {
    padding: var(--s-1-5) var(--s-2);
    border-radius: var(--radius, 8px);
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--text);
    font-size: var(--text-sm);
    cursor: pointer;
}
.ref-ig-key-save:hover,
.ref-ig-key-test:hover { background: var(--surface-hover); }
.ref-ig-status { font-size: var(--text-sm); color: var(--text-sub); }
.ref-ig-status.ok { color: var(--clr-success, #22c55e); }
.ref-ig-status.err { color: var(--clr-error, #ef4444); }

/* ─────────────────────────────────────────────
   9. Skeleton Loading
   ───────────────────────────────────────────── */
.ref-skeleton {
    background: var(--bg-raised);
    border-radius: var(--radius, 12px);
    overflow: hidden;
}
.ref-skeleton-thumb {
    width: 100%;
    height: clamp(120px, 20vw, 180px);
    background: linear-gradient(90deg, var(--surface) 25%, var(--surface-hover) 50%, var(--surface) 75%);
    background-size: 200% 100%;
    animation: refShimmer 1.5s infinite;
    position: relative;
}
.ref-skeleton-badge {
    position: absolute;
    top: var(--s-1-5);
    left: var(--s-1-5);
    width: var(--s-9-5);
    height: var(--s-5-0);
    border-radius: var(--radius-pill, 999px);
    background: rgba(255,255,255,.05);
}
.ref-skeleton-count {
    position: absolute;
    bottom: var(--s-1-5);
    right: var(--s-1-5);
    width: var(--s-5-5);
    height: var(--s-4-5);
    border-radius: var(--radius-s);
    background: rgba(255,255,255,.05);
}
.ref-skeleton-body { padding: var(--s-2); }
.ref-skeleton-line {
    height: var(--s-3);
    border-radius: var(--radius-s);
    background: var(--surface);
    margin-bottom: var(--s-1);
}
.ref-skeleton-line.title { width: 75%; height: var(--s-3-5); }
.ref-skeleton-line.meta { width: 50%; }
.ref-skeleton-line.stats { width: 35%; }
.ref-skeleton-actions {
    display: flex;
    gap: var(--s-1);
    padding: 0 var(--s-2) var(--s-2);
}
.ref-skeleton-circle {
    width: var(--s-5-5);
    height: var(--s-5-5);
    border-radius: 50%;
    background: var(--surface);
}

/* ─────────────────────────────────────────────
   10. List View (대안)
   ───────────────────────────────────────────── */
.ref-list {
    display: flex;
    flex-direction: column;
    gap: var(--s-1);
}
.ref-list-row {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    padding: var(--s-2);
    background: var(--bg-raised);
    border-radius: var(--radius, 8px);
    cursor: pointer;
    transition: background var(--duration-instant) var(--easing-smooth);
}
.ref-list-row:hover { background: var(--surface-hover); }
.ref-list-thumb {
    width: var(--s-8);
    height: var(--s-8);
    border-radius: var(--radius, 6px);
    overflow: hidden;
    flex-shrink: 0;
    background: var(--surface);
}

/* ─────────────────────────────────────────────
   11. Stats Inline
   ───────────────────────────────────────────── */
.ref-stats-inline {
    font-size: var(--text-xs);
    color: var(--text-sub);
    font-family: var(--font-mono);
    white-space: nowrap;
}

/* ─────────────────────────────────────────────
   12. Shortcut Overlay
   ───────────────────────────────────────────── */
.ref-shortcut-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    backdrop-filter: var(--glass-blur-xs);
}
.ref-shortcut-card {
    background: var(--bg-raised);
    border-radius: var(--radius, 12px);
    padding: var(--s-4);
    max-width: var(--layout-xl);
    width: 90vw;
    box-shadow: var(--shadow-lg);
}

/* ─────────────────────────────────────────────
   13. Undo Toast
   ───────────────────────────────────────────── */
.ref-undo-toast {
    position: fixed;
    bottom: var(--s-5);
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: var(--bg-raised);
    border: 1px solid var(--line);
    border-radius: var(--radius, 12px);
    padding: var(--s-2) var(--s-3);
    display: flex;
    align-items: center;
    gap: var(--s-2);
    box-shadow: var(--shadow-lg);
    z-index: 9999;
    opacity: 0;
    transition: all var(--duration-base) var(--easing-smooth);
    font-size: var(--text-sm);
}
.ref-undo-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.ref-undo-btn {
    padding: var(--s-1) 12px;
    border-radius: var(--radius, 8px);
    background: var(--accent);
    color: var(--bg-base, #000);
    border: none;
    font-weight: 600;
    cursor: pointer;
    font-size: var(--text-sm);
}

/* ─────────────────────────────────────────────
   14. Confirm Modal
   ───────────────────────────────────────────── */
.ref-confirm-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0,0,0,.6);
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: var(--glass-blur-xs);
}
.ref-confirm-card {
    background: var(--bg-raised);
    border-radius: var(--radius, 12px);
    padding: var(--s-4);
    max-width: var(--layout-xl);
    width: 90vw;
    box-shadow: var(--shadow-lg);
    text-align: center;
}
.ref-confirm-msg { margin-bottom: var(--s-3); color: var(--text); font-size: var(--text-sm); }
.ref-confirm-actions { display: flex; gap: var(--s-2); justify-content: center; }

/* ─────────────────────────────────────────────
   15. Responsive
   ───────────────────────────────────────────── */
@media (max-width: 768px) {
    .ref-body { flex-direction: column; }
    .ref-analysis {
        width: 100% !important;
        border-left: none;
        border-top: 1px solid var(--line);
        max-height: 50vh;
    }
    .ref-toolbar { flex-wrap: wrap; gap: var(--s-1); }
        .ref-grid { column-width: var(--card-min-sm); }
}
@media (max-width: 480px) {
    .ref-grid { column-count: 1; }
    .ref-content { padding: var(--s-2); }
}

/* 액션 버튼 (JS: ref-actions / ref-action-btn) */
.ref-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s-1-5);
}
.ref-action-btn {
    display: flex;
    align-items: flex-start;
    gap: var(--s-1-5);
    padding: var(--s-2);
    border-radius: var(--radius, 8px);
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--text);
    cursor: pointer;
    transition: all var(--duration-fast) var(--easing-smooth);
    text-align: left;
    font-size: var(--text-sm);
    width: 100%;
}
.ref-action-btn:hover { background: var(--surface-hover); border-color: var(--accent); }
.ref-action-btn svg { width: 16px; height: 16px; color: var(--accent); flex-shrink: 0; margin-top: var(--s-0); }
.ref-action-btn > div { flex: 1; min-width: 0; }
.ref-action-desc { font-size: 10px; color: var(--text-sub); margin-top: var(--s-0); }
.ref-shortcut {
    margin-left: auto;
    padding: var(--s-0) var(--s-1);
    border-radius: var(--radius-s);
    background: var(--bg-raised);
    font-size: var(--text-xs);
    font-family: var(--font-mono);
    color: var(--text-sub);
    flex-shrink: 0;
    align-self: flex-start;
}

/* 콘텐츠 아이템 그리드 (flexbox wrap - grid는 aspect-ratio 높이 계산 불가) */
.ref-items-strip {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2, 8px);
    overflow: hidden;
    position: relative;
}
.ref-items-strip::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: var(--s-9-5);
    background: linear-gradient(to top, var(--bg-raised, #161618) 0%, transparent 100%);
    pointer-events: none;
    z-index: 1;
}
.ref-items-strip .ref-item-card {
    flex: 0 0 calc(25% - 6px);
    min-width: var(--s-12);
}
.ref-items-strip .ref-item-thumb {
    width: 100%;
    height: unset;
    aspect-ratio: 1/1;
}

/* 카드 액션/즐겨찾기 hover 표시 수정 */
.ref-card-body { pointer-events: none; }
.ref-card-body * { pointer-events: auto; }
.ref-card-actions { pointer-events: auto; }
.ref-fav-btn { pointer-events: auto; }

/* hover 시 카운트 뱃지 숨기고 액션 버튼 표시 */
.ref-card:hover .ref-card-duration { opacity: 0; transition: opacity var(--duration-fast) var(--easing-smooth); }
.ref-card .ref-card-duration { transition: opacity var(--duration-fast) var(--easing-smooth); }



/* ── 인사이트 뷰 ── */
.insights-card {
    margin-bottom: var(--s-2, 8px);
    transition: border-color var(--anim-fast, .15s) ease;
}
.insights-card:hover {
    border-color: var(--accent);
}
#insights-tabs {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--bg-raised, #161618);
    padding-bottom: var(--s-2, 8px);
}

/* 분석 진행률 바 */
.ref-progress-bar { padding: var(--s-3); background: var(--surface); border-radius: var(--radius, 8px); margin-bottom: var(--s-3); }
.ref-progress-track { height: 4px; background: var(--surface-2); border-radius: var(--radius-s); overflow: hidden; }
.ref-progress-fill { height: 100%; background: var(--accent); border-radius: var(--radius-s); width: 0; transition: width var(--duration-moderate) var(--easing-smooth); }
.ref-progress-info { display: flex; justify-content: space-between; margin-top: var(--s-1); font-size: var(--text-sm, 11px); color: var(--text-sub); }

/* 분석 내역 */
.ref-analysis-item {
    padding: var(--s-2-5);
    border-radius: var(--radius, 8px);
    border: 1px solid var(--line);
    margin-bottom: var(--s-2);
    transition: all var(--duration-fast) var(--easing-smooth);
}
.ref-analysis-item:hover {
    background: var(--surface-hover);
    border-color: var(--accent);
}

/* ── 분석 내역 카드 (ref-ah) ── */
.ref-ah-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius, 8px);
    padding: var(--s-3);
    margin-bottom: var(--s-2);
    cursor: pointer;
    transition: background var(--duration-fast, 150ms) var(--easing-out, ease-out), border-color var(--duration-fast, 150ms) var(--easing-out, ease-out);
}
.ref-ah-card:hover { background: var(--surface-active, var(--bg-raised)); border-color: var(--accent); }
.ref-ah-card:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.ref-ah-top { display: flex; justify-content: space-between; align-items: center; gap: var(--s-2); margin-bottom: var(--s-1); }
.ref-ah-meta { display: flex; gap: var(--s-2); font-size: var(--text-sm); color: var(--text-sub); flex-wrap: wrap; }
.ref-ah-meta span::before { content: ''; display: none; }
.ref-ah-meta span + span::before { content: '·'; display: inline; margin-right: var(--s-1); color: var(--text-faint); }
.ref-ah-summary { font-size: var(--text-sm); color: var(--text-faint); margin-top: var(--s-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ref-ah-progress { height: 3px; background: var(--surface-active, var(--line)); border-radius: var(--radius-s); margin-top: var(--s-2); overflow: hidden; }
.ref-ah-progress-bar { height: 100%; background: var(--accent); border-radius: var(--radius-s); transition: width var(--duration-moderate) var(--easing-smooth); }
.ref-ah-progress--indeterminate .ref-ah-progress-bar {
    width: 40%; animation: ref-ah-indeterminate 1.5s ease-in-out infinite;
}
@keyframes ref-ah-indeterminate {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(350%); }
}


/* ── 분석 내역 목록 (사이드바 교체) ── */
.ref-new-analysis-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-1);
}
.ref-ah-empty {
    color: var(--text-faint);
    font-size: var(--text-sm);
    text-align: center;
    padding: var(--s-4) var(--s-2);
}
.ref-ah-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius, 8px);
    padding: var(--s-2-5, 10px) var(--s-3);
    margin-bottom: var(--s-2);
    cursor: pointer;
    transition: background var(--duration-fast, 150ms), border-color var(--duration-fast, 150ms), transform var(--duration-fast, 150ms);
}
.ref-ah-card:hover {
    background: var(--surface-hover, var(--surface-active));
    border-color: var(--accent-dim, rgba(0,255,200,.2));
    transform: translateY(-1px);
}
.ref-ah-card:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}
.ref-ah-top {
    display: flex;
    align-items: center;
    gap: var(--s-1-5, 6px);
    margin-bottom: var(--s-1);
}
.ref-ah-type-icon {
    display: inline-flex;
    align-items: center;
    color: var(--text-sub);
    flex-shrink: 0;
}
.ref-ah-meta {
    display: flex;
    gap: var(--s-2);
    font-size: var(--text-sm);
    color: var(--text-faint);
    flex-wrap: wrap;
}
.ref-ah-meta span + span::before {
    content: '·';
    margin-right: var(--s-1);
    color: var(--text-faint);
}
.ref-ah-summary {
    font-size: var(--text-sm);
    color: var(--text-sub);
    margin-top: var(--s-1);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.ref-ah-progress {
    height: 3px;
    background: var(--surface-active);
    border-radius: var(--radius-s);
    margin-top: var(--s-1-5, 6px);
    overflow: hidden;
}
.ref-ah-progress-bar {
    height: 100%;
    background: var(--accent);
    border-radius: var(--radius-s);
    transition: width var(--duration-flip) var(--easing-smooth);
}
.ref-ah-progress--indeterminate .ref-ah-progress-bar {
    width: 40%;
    animation: refAhIndeterminate 1.5s ease infinite;
}
@keyframes refAhIndeterminate {
    0% { margin-left: -40%; }
    100% { margin-left: 100%; }
}