/* ============================================================
   V-PLI 카드뉴스 (Card News) - 외부 트렌드 인사이트 보드
   기존 --accent-color 시스템과 .card 패턴 위에 얹는 전용 스타일
   ============================================================ */

/* 카드뉴스 뷰는 기본 max-width(1000px)보다 넓게 가야 2/3 + 1/3 레이아웃이 살아남 */
#view-cardnews { max-width: 1400px; }

/* 갱신일 큰 배너 — 직원이 진입 즉시 "오 며칠 거구나" 인지 */
.cn-update-banner {
    margin: 0 0 1.5rem 0;
    padding: 1rem 1.4rem;
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--accent-color) 18%, transparent),
        color-mix(in srgb, var(--accent-color) 8%, transparent));
    border: 1px solid color-mix(in srgb, var(--accent-color) 35%, var(--border-color));
    border-radius: 12px;
    color: var(--text-primary);
    font-size: 1.05rem;
    text-align: center;
    letter-spacing: 0.01em;
}
.cn-update-banner strong {
    color: var(--accent-color);
    font-size: 1.2rem;
    font-weight: 700;
    margin: 0 0.15em;
}

/* ===== 상단 헤더: 타이틀 + 핫이슈 배지 + 갱신 버튼 ===== */
.cn-header {
    display: flex; justify-content: space-between; align-items: flex-end;
    margin-bottom: 2rem;
    padding-bottom: 1.2rem;
    border-bottom: 1px solid var(--border-color);
    flex-wrap: wrap; gap: 1rem;
}
.cn-header h1 {
    font-size: 2.2rem; font-weight: 700;
    font-family: 'Outfit', 'Noto Sans KR', sans-serif;
    background: linear-gradient(135deg, var(--accent-color), color-mix(in srgb, var(--accent-color) 50%, #ffffff));
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
}
.cn-header .cn-subtitle {
    color: var(--text-secondary); font-size: 0.9rem; margin-top: 0.3rem;
}
.cn-header-actions { display: flex; gap: 0.6rem; align-items: center; }

.cn-refresh-btn {
    padding: 0.7rem 1.3rem; border: none; border-radius: var(--radius-md);
    background: linear-gradient(135deg, var(--accent-color), color-mix(in srgb, var(--accent-color) 60%, #c58af9));
    color: #fff; font-weight: 600; font-size: 0.9rem; cursor: pointer;
    transition: var(--transition); font-family: inherit;
    display: flex; align-items: center; gap: 0.4rem;
    box-shadow: 0 2px 8px color-mix(in srgb, var(--accent-color) 30%, transparent);
}
.cn-refresh-btn:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 4px 12px color-mix(in srgb, var(--accent-color) 40%, transparent); }
.cn-refresh-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.cn-refresh-btn .cn-spin { animation: cn-spin 1s linear infinite; display: inline-block; }
@keyframes cn-spin { from { transform: rotate(0); } to { transform: rotate(360deg); } }

.cn-last-refreshed {
    font-size: 0.78rem; color: var(--text-secondary);
    padding: 0.4rem 0.8rem; border: 1px solid var(--border-color); border-radius: 20px;
    background: color-mix(in srgb, var(--card-bg) 50%, transparent);
}

/* ===== 갱신 진행 인디케이터 ===== */
.cn-progress-banner {
    display: none; align-items: center; gap: 0.8rem;
    padding: 0.9rem 1.2rem; margin-bottom: 1.5rem;
    background: color-mix(in srgb, var(--accent-color) 18%, var(--card-bg));
    border: 1px solid var(--accent-color); border-radius: var(--radius-md);
    color: var(--text-primary); font-size: 0.9rem;
}
.cn-progress-banner.visible { display: flex; }
.cn-progress-spinner {
    width: 16px; height: 16px; border-radius: 50%;
    border: 2px solid color-mix(in srgb, var(--accent-color) 30%, transparent);
    border-top-color: var(--accent-color);
    animation: cn-spin 0.8s linear infinite;
}
.cn-progress-bar {
    flex: 1; height: 4px; background: color-mix(in srgb, var(--accent-color) 20%, transparent);
    border-radius: 2px; overflow: hidden; max-width: 200px;
}
.cn-progress-bar-fill {
    height: 100%; background: var(--accent-color); width: 0%; transition: width 0.4s;
}
.cn-cancel-btn {
    padding: 0.4rem 0.9rem;
    border: 1px solid rgba(255, 82, 82, 0.5);
    background: rgba(255, 82, 82, 0.15);
    color: #ff5252;
    border-radius: var(--radius-md);
    font-size: 0.8rem; font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: var(--transition);
    white-space: nowrap;
}
.cn-cancel-btn:hover {
    background: rgba(255, 82, 82, 0.25);
    color: #ff3333;
}

/* ============================================================
   프롬프트 편집 버튼 + 모달 (admin 전용)
   ============================================================ */
.cn-prompt-edit-btn {
    padding: 0.7rem 1rem;
    border: 1px solid var(--border-color);
    background: var(--card-bg);
    color: var(--text-primary);
    border-radius: var(--radius-md);
    font-size: 0.85rem; font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: var(--transition);
    white-space: nowrap;
}
.cn-prompt-edit-btn:hover {
    border-color: var(--accent-color);
    background: color-mix(in srgb, var(--accent-color) 12%, var(--card-bg));
}

/* 모달 — popup-overlay 패턴 사용 */
.cn-prompt-modal {
    max-width: 900px !important;
    width: 95% !important;
    max-height: 88vh !important;
    overflow-y: auto;
    padding: 2rem !important;
}
.cn-prompt-field {
    margin-bottom: 1.5rem;
}
.cn-prompt-field-header {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 0.4rem;
}
.cn-prompt-label {
    font-weight: 700; font-size: 0.95rem;
    color: var(--text-primary);
}
.cn-prompt-id {
    font-weight: 400; font-size: 0.75rem;
    color: var(--text-secondary);
    font-family: 'Outfit', monospace;
}
.cn-prompt-reset {
    padding: 0.3rem 0.7rem;
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    border-radius: 6px;
    font-size: 0.75rem; cursor: pointer;
    font-family: inherit;
    transition: var(--transition);
}
.cn-prompt-reset:hover {
    border-color: var(--accent-color);
    color: var(--accent-color);
}
.cn-prompt-textarea {
    width: 100%;
    min-height: 200px;
    padding: 0.8rem;
    background: color-mix(in srgb, var(--bg-color) 50%, transparent);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-family: 'Consolas', 'Menlo', monospace;
    font-size: 0.82rem;
    line-height: 1.5;
    resize: vertical;
    transition: var(--transition);
}
.cn-prompt-textarea:focus {
    outline: none;
    border-color: var(--accent-color);
    background: color-mix(in srgb, var(--accent-color) 4%, var(--bg-color));
}
.cn-prompt-cancel-btn, .cn-prompt-save-btn {
    padding: 0.7rem 1.5rem;
    border-radius: var(--radius-md);
    font-size: 0.9rem; font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: var(--transition);
    border: 1px solid var(--border-color);
}
.cn-prompt-cancel-btn {
    background: transparent;
    color: var(--text-secondary);
}
.cn-prompt-cancel-btn:hover {
    background: var(--hover-bg);
    color: var(--text-primary);
}
.cn-prompt-save-btn {
    background: linear-gradient(135deg, var(--accent-color), color-mix(in srgb, var(--accent-color) 60%, #c58af9));
    color: #fff;
    border-color: transparent;
}
.cn-prompt-save-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--accent-color) 40%, transparent);
}

/* ===== 빈 상태 ===== */
.cn-empty {
    text-align: center; padding: 4rem 2rem;
    background: var(--card-bg); border: 1px dashed var(--border-color);
    border-radius: var(--radius-lg); color: var(--text-secondary);
}
.cn-empty .cn-empty-icon { font-size: 3rem; margin-bottom: 1rem; opacity: 0.5; }
.cn-empty h3 { color: var(--text-primary); font-size: 1.2rem; margin-bottom: 0.6rem; }
.cn-empty p { font-size: 0.95rem; line-height: 1.6; }

/* ===== 메인 + 사이드 그리드 ===== */
.cn-main-grid {
    display: grid; grid-template-columns: 2fr 1fr; gap: 2rem;
    align-items: start;
}

/* ===== 섹션 공통 ===== */
.cn-section {
    background: var(--card-bg); background-image: var(--glass-gradient);
    border: 1px solid var(--border-color); border-radius: var(--radius-lg);
    padding: 1.75rem; margin-bottom: 2rem; box-shadow: var(--shadow-sm);
}
.cn-section-header {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 1.4rem;
    padding-bottom: 0.9rem;
    border-bottom: 1px solid color-mix(in srgb, var(--border-color) 60%, transparent);
}
.cn-section-title {
    font-size: 1.25rem; font-weight: 700; color: var(--text-primary);
    display: flex; align-items: center; gap: 0.6rem;
    letter-spacing: -0.01em;
}
.cn-section-title .cn-emoji { font-size: 1.5rem; }
.cn-section-meta { font-size: 0.78rem; color: var(--text-secondary); font-weight: 500; }

/* ===== 5열 그리드 (의상/헤어 TOP 10 → 2줄 5+5, 반응형 5/4/3/2) ===== */
.cn-hscroll {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1.25rem;
    padding: 0.3rem 0.2rem 0.5rem 0.2rem;
    align-items: start; /* 메모 유무에 따라 카드 높이 자연스럽게 다름 (한눈에 구분) */
}
@media (max-width: 1400px) {
    .cn-hscroll { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 1100px) {
    .cn-hscroll { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 700px) {
    .cn-hscroll { grid-template-columns: repeat(2, 1fr); }
}

.cn-asset-card {
    background: color-mix(in srgb, var(--bg-color) 50%, var(--card-bg));
    border: 1px solid var(--border-color); border-radius: var(--radius-md);
    overflow: hidden; cursor: pointer; transition: var(--transition);
    text-decoration: none; color: inherit;
    display: flex; flex-direction: column;
    min-width: 0; /* grid 셀 안에서 잘림 방지 */
}
.cn-asset-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--accent-color); }
.cn-asset-image-wrap {
    position: relative; width: 100%; aspect-ratio: 1 / 1; overflow: hidden;
}
.cn-asset-image {
    width: 100%; height: 100%; position: relative; overflow: hidden;
}
.cn-asset-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cn-asset-rank {
    position: absolute; top: 8px; left: 8px;
    width: 28px; height: 28px; border-radius: 50%;
    background: linear-gradient(135deg, var(--accent-color), color-mix(in srgb, var(--accent-color) 60%, #c58af9));
    color: #fff; font-weight: 700; font-size: 0.85rem;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
    font-family: 'Outfit', sans-serif;
}
.cn-asset-rank.cn-rank-top { background: linear-gradient(135deg, #ffd700, #ff8c00); color: #1a1a1a; }
.cn-asset-body { padding: 1rem; flex: 1; display: flex; flex-direction: column; gap: 0.45rem; min-width: 0; }
.cn-asset-title {
    font-size: 0.98rem; font-weight: 700; color: var(--text-primary);
    line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; word-break: break-word;
    letter-spacing: -0.01em;
}
.cn-asset-summary {
    font-size: 0.82rem; color: var(--text-primary); opacity: 0.78;
    line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
}
.cn-asset-author {
    font-size: 0.8rem; color: var(--text-secondary); font-weight: 500;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cn-asset-footer {
    display: flex; justify-content: space-between; align-items: center;
    margin-top: auto; padding-top: 0.5rem;
    border-top: 1px solid color-mix(in srgb, var(--border-color) 50%, transparent);
}
.cn-asset-price {
    font-size: 0.95rem; font-weight: 700; color: var(--accent-color);
    font-family: 'Outfit', sans-serif;
}
/* Phase 13: admin 메모 row (의상·헤어 카드)
   모든 카드에 동일 reserve 공간 (작가 위치 통일).
   - 메모 있음 → 항시 텍스트 표시
   - 메모 없음 (직원) → 빈 공간만 (border 없음)
   - 메모 없음 (admin) → 평상시 빈, hover 시 "+ 메모" placeholder fade-in */
/* 메모 있는 카드 — 카드가 메모 영역만큼 길어짐 (한눈에 메모 유무 구분 가능) */
.cn-asset-note-row {
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px dashed color-mix(in srgb, var(--border-color) 35%, transparent);
}
/* admin + 빈 메모 — 평상시 row 숨김(카드 짧음), 카드 hover 시 펼쳐서 placeholder 보임 */
.cn-asset-note-row-empty {
    max-height: 0;
    overflow: hidden;
    margin-top: 0;
    padding-top: 0;
    border-top: none;
    opacity: 0;
    transition: max-height 0.25s ease, margin-top 0.25s ease, padding-top 0.25s ease, opacity 0.2s ease;
}
.cn-asset-card:hover .cn-asset-note-row-empty {
    max-height: 50px;
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px dashed color-mix(in srgb, var(--border-color) 35%, transparent);
    opacity: 1;
}
.cn-asset-note {
    font-size: 0.78rem;
    color: var(--text-secondary);
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
    cursor: text;
    padding: 0.2rem 0.3rem;
    border-radius: 4px;
    transition: background 0.15s, color 0.15s;
}
/* 실제 메모 텍스트 (placeholder 제외) — 노란 포스트잇 느낌으로 차별화 */
.cn-asset-note:not(.cn-asset-note-empty-admin) {
    background: color-mix(in srgb, #ffd54f 10%, transparent);
    border-left: 3px solid color-mix(in srgb, #ffd54f 55%, var(--border-color));
    padding: 0.4rem 0.55rem;
    color: color-mix(in srgb, #ffd54f 75%, var(--text-primary));
    border-radius: 0 6px 6px 0;
}
.cn-asset-note:not(.cn-asset-note-empty-admin):hover {
    background: color-mix(in srgb, #ffd54f 18%, transparent);
}
/* admin placeholder — row가 hover 시 펼쳐질 때 함께 보임 (opacity는 row가 제어) */
.cn-asset-note-empty-admin {
    color: var(--text-secondary);
    font-style: italic;
    opacity: 0.55;
    transition: opacity 0.15s ease;
}
.cn-asset-note-empty-admin:hover {
    opacity: 0.95;
}
.cn-asset-note-input {
    width: 100%;
    margin-top: 0.5rem;
    padding: 0.35rem 0.5rem;
    font-size: 0.78rem;
    line-height: 1.45;
    border: 1px solid var(--accent-color);
    border-radius: 4px;
    background: var(--bg-color);
    color: var(--text-primary);
    outline: none;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-color) 25%, transparent);
}

/* 의상·헤어 카드의 메타 줄 (좋아요·출시일자) */
.cn-asset-meta-row {
    display: flex; flex-wrap: wrap; align-items: center; gap: 1rem;
    margin-top: 0.6rem;
    font-size: 1.4rem; font-weight: 700;
    font-family: 'Outfit', sans-serif;
}
.cn-asset-likes  { color: #ff6b9d; }
.cn-asset-date   { color: var(--text-secondary); font-weight: 500; font-family: inherit; font-size: 0.95rem; }

/* 배지 (NEW, HOT, 세일, 급상승) */
.cn-badge {
    display: inline-block; padding: 0.15rem 0.5rem; border-radius: 8px;
    font-size: 0.65rem; font-weight: 700; letter-spacing: 0.3px;
    text-transform: uppercase; line-height: 1.4;
}
.cn-badge-NEW { background: #4285f4; color: #fff; }
.cn-badge-HOT { background: #ff6b35; color: #fff; }
.cn-badge-세일 { background: #ec407a; color: #fff; }
.cn-badge-급상승 { background: linear-gradient(135deg, #ff4081, #ff6b35); color: #fff; }
.cn-badge-출시예정 { background: linear-gradient(135deg, #7e57c2, #5c6bc0); color: #fff; }
.cn-badge-RT이벤트 { background: linear-gradient(135deg, #ff8a65, #ff6b35); color: #fff; }
.cn-badge-TOOL { background: linear-gradient(135deg, #26a69a, #00897b); color: #fff; }
.cn-badge-이벤트 { background: linear-gradient(135deg, #f06292, #ec407a); color: #fff; }
.cn-badge-커뮤니티 { background: #607d8b; color: #fff; }

/* upcoming 카드의 출시일 배지 */
.cn-release-date {
    display: inline-block;
    padding: 0.25rem 0.6rem;
    border-radius: 6px;
    font-size: 0.75rem; font-weight: 600;
    background: color-mix(in srgb, var(--accent-color) 18%, var(--card-bg));
    color: var(--text-primary);
    border: 1px solid color-mix(in srgb, var(--accent-color) 35%, var(--border-color));
    margin-bottom: 0.4rem;
}

/* vrc_news 미리보기 카드 — host + badge 한 줄 정렬 */
.cn-preview-meta-row {
    display: flex; align-items: center; gap: 0.5rem;
    margin-bottom: 0.3rem; flex-wrap: wrap;
}

/* 이미지 위에 배치되는 배지 (image-wrap 안에 형제로 배치) */
.cn-asset-badge {
    position: absolute; top: 8px; right: 8px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
    z-index: 2;
}

/* ===== 사이드 섹션: 트윗 카드 스타일 (upcoming 등) ===== */
.cn-trend-list { display: flex; flex-direction: column; gap: 1.1rem; }
.cn-trend-item {
    padding: 1.2rem; border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--bg-color) 50%, transparent);
    border: 1px solid var(--border-color);
    cursor: pointer; transition: var(--transition);
    text-decoration: none; color: inherit; display: block;
}
.cn-trend-item:hover { border-color: var(--accent-color); transform: translateX(2px); }
.cn-trend-source {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 0.7rem;
}
.cn-trend-handle { font-size: 0.88rem; color: var(--accent-color); font-weight: 700; }
.cn-trend-title {
    font-size: 1.02rem; font-weight: 700; color: var(--text-primary);
    line-height: 1.4; margin-bottom: 0.55rem;
}
.cn-trend-summary {
    font-size: 0.9rem; color: var(--text-secondary); line-height: 1.6;
    margin-bottom: 0.8rem;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.cn-trend-insight {
    padding: 0.65rem 0.85rem; border-radius: 6px;
    background: color-mix(in srgb, var(--accent-color) 15%, var(--card-bg));
    border-left: 3px solid var(--accent-color);
    font-size: 0.85rem; color: var(--text-primary); font-weight: 500;
    line-height: 1.5;
    margin-top: 0.5rem;
}
.cn-trend-insight::before { content: "💡 "; }

/* upcoming 트윗 첨부 이미지 컨테이너 */
.cn-trend-image {
    position: relative;
    margin: 0.5rem 0;
    border-radius: var(--radius-sm);
    overflow: hidden;
    min-height: 100px;
    background: color-mix(in srgb, var(--bg-color) 50%, transparent);
}

/* upcoming/vrc_news 공통 썸네일 fallback (X 로고 또는 호스트 이니셜) */
.cn-thumb-fallback {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    z-index: 0;
}
.cn-thumb-x {
    background: #000;
}
.cn-thumb-x svg {
    width: 36px; height: 36px; fill: #fff; opacity: 0.85;
}
.cn-thumb-initial {
    background: linear-gradient(135deg, #ec407a 0%, #ab47bc 100%);
}
.cn-thumb-initial::before {
    content: attr(data-initial);
    color: rgba(255, 255, 255, 0.9);
    font-size: 1.8rem; font-weight: 700;
    font-family: 'Outfit', 'Noto Sans KR', sans-serif;
    text-shadow: 0 2px 6px rgba(0,0,0,0.3);
}
/* 실제 이미지가 로드되면 fallback 위에 깔림 */
.cn-thumb-img {
    position: relative; z-index: 1;
    width: 100%; height: 100%; object-fit: cover;
    display: block;
}
.cn-trend-image .cn-thumb-img {
    max-height: 240px;
}

/* ===== 섹션 빈 상태 (이 섹션만 데이터 없을 때) ===== */
.cn-section-empty {
    text-align: center; padding: 1.5rem; color: var(--text-secondary);
    font-size: 0.85rem; opacity: 0.7;
}

/* ============================================================
   이미지 placeholder — 외부 이미지 로드 실패/없음 시 표시
   .cn-placeholder 가 있는 div는 항상 그라디언트 배경 + 첫 글자
   <img>가 정상 로드되면 div를 덮어 보이지 않음
   <img>가 onerror로 display:none 되면 placeholder가 그대로 노출
   ============================================================ */
.cn-placeholder {
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--accent-color) 30%, var(--bg-color)) 0%,
        color-mix(in srgb, var(--accent-color) 10%, var(--card-bg)) 100%);
    position: relative;
    overflow: hidden;
}
.cn-placeholder::before {
    content: attr(data-initial);
    position: absolute;
    top: 50%; left: 50%; transform: translate(-50%, -50%);
    font-family: 'Outfit', sans-serif;
    font-size: 2.2rem; font-weight: 700;
    color: color-mix(in srgb, var(--accent-color) 60%, #ffffff);
    text-shadow: 0 2px 8px rgba(0,0,0,0.3);
    opacity: 0.85;
    pointer-events: none;
    z-index: 0;
}
.cn-placeholder img {
    position: relative; z-index: 1;
    width: 100%; height: 100%; object-fit: cover; display: block;
}

/* 섹션별 placeholder 컬러 변형 */
.cn-placeholder-top_clothes { background: linear-gradient(135deg, #f06292 0%, #ba68c8 100%); }
.cn-placeholder-top_hair    { background: linear-gradient(135deg, #7e57c2 0%, #5c6bc0 100%); }

/* ============================================================
   섹션 빈 상태 (친절한 안내 + admin 재시도 버튼)
   ============================================================ */
.cn-section-empty-friendly {
    text-align: center;
    padding: 1.8rem 1rem;
    color: var(--text-secondary);
}
.cn-section-empty-icon { font-size: 2rem; margin-bottom: 0.6rem; opacity: 0.6; }
.cn-section-empty-title {
    color: var(--text-primary); font-weight: 600; font-size: 0.95rem;
    margin-bottom: 0.4rem;
}
.cn-section-empty-desc {
    font-size: 0.8rem; line-height: 1.5; opacity: 0.85;
    max-width: 320px; margin: 0 auto 1rem;
}
.cn-section-retry {
    padding: 0.5rem 1rem; border: 1px solid var(--accent-color);
    background: color-mix(in srgb, var(--accent-color) 15%, transparent);
    color: var(--accent-color); border-radius: var(--radius-md);
    cursor: pointer; font-size: 0.85rem; font-weight: 600;
    transition: var(--transition); font-family: inherit;
    display: inline-flex; align-items: center; gap: 0.4rem;
}
.cn-section-retry:hover:not(:disabled) {
    background: var(--accent-color); color: #fff;
}
.cn-section-retry:disabled { opacity: 0.6; cursor: not-allowed; }

/* admin: 데이터 있는 섹션 헤더 옆 작은 재시도 버튼 */
.cn-section-meta-wrap { display: flex; align-items: center; gap: 0.5rem; }
/* 섹션 헤더 안 단계 진행 텍스트 (Grok 검색 중 / 이미지 추출 중 N/M / 저장 중 등) */
.cn-section-status {
    font-size: 0.75rem; color: var(--text-secondary);
    max-width: 12rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    opacity: 0.85;
}
.cn-section-status:empty { display: none; }
.cn-section-retry-mini {
    padding: 0.25rem 0.5rem; border: 1px solid var(--border-color);
    background: transparent; color: var(--text-secondary);
    border-radius: 6px; cursor: pointer; font-size: 0.85rem;
    transition: var(--transition); font-family: inherit;
    line-height: 1;
}
.cn-section-retry-mini:hover:not(:disabled) {
    border-color: var(--accent-color); color: var(--accent-color);
}
.cn-section-retry-mini:disabled { opacity: 0.5; cursor: not-allowed; }

/* Phase 12: BOOTH 섹션은 외부 Python 스크래퍼가 동기화 — ↻ 대신 자동 배지 */
.cn-auto-sync {
    display: inline-flex; align-items: center; gap: 0.3rem;
    padding: 0.25rem 0.55rem; border-radius: 12px;
    font-size: 0.7rem; font-weight: 600;
    color: var(--accent-color);
    background: color-mix(in srgb, var(--accent-color) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent-color) 25%, transparent);
    cursor: default; user-select: none;
}

/* ============================================================
   디스코드 임베드 스타일 미리보기 (vrc_news 섹션)
   - 좌측 액센트 막대 + 본문 텍스트 + 우측 썸네일(있을 때)
   - 이미지 없으면 컴팩트 (텍스트만)
   ============================================================ */
.cn-preview-list {
    display: grid; grid-template-columns: 1fr; gap: 1rem;
}
.cn-preview-item {
    display: flex; gap: 1.1rem; align-items: stretch;
    padding: 1.1rem 1.2rem;
    background: color-mix(in srgb, var(--bg-color) 50%, var(--card-bg));
    border: 1px solid var(--border-color);
    border-left: 4px solid var(--accent-color);
    border-radius: var(--radius-md);
    cursor: pointer; transition: var(--transition);
    text-decoration: none; color: inherit;
    overflow: hidden;
}
.cn-preview-item:hover {
    border-color: color-mix(in srgb, var(--accent-color) 60%, var(--border-color));
    border-left-color: var(--accent-color);
    background: color-mix(in srgb, var(--accent-color) 8%, var(--card-bg));
    transform: translateX(2px);
}
.cn-preview-body {
    flex: 1; min-width: 0;
    display: flex; flex-direction: column; gap: 0.45rem;
    justify-content: center;
}
.cn-preview-host {
    font-size: 0.75rem; color: var(--text-secondary);
    text-transform: lowercase; letter-spacing: 0.3px;
    opacity: 0.85; font-weight: 500;
}
.cn-preview-title {
    font-size: 1.05rem; font-weight: 700;
    color: var(--accent-color);
    line-height: 1.35;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
    letter-spacing: -0.01em;
}
.cn-preview-summary {
    font-size: 0.9rem; color: var(--text-primary);
    opacity: 0.85; line-height: 1.55;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
    overflow: hidden;
}
.cn-preview-thumb {
    position: relative;
    flex: 0 0 110px; width: 110px; height: 110px;
    border-radius: var(--radius-md); overflow: hidden;
    background: color-mix(in srgb, var(--accent-color) 12%, var(--bg-color));
}
/* preview-thumb 안의 이니셜 fallback은 작은 폰트 */
.cn-preview-thumb .cn-thumb-initial::before {
    font-size: 1.4rem;
}
.cn-preview-thumb .cn-thumb-x svg {
    width: 28px; height: 28px;
}

/* ============================================================
   미검증 카드 (sourceUrl이 grounding URL에 없어 클릭 비활성화)
   ============================================================ */
.cn-unverified {
    cursor: not-allowed !important;
    opacity: 0.7;
    position: relative;
}
.cn-unverified:hover {
    transform: none !important;
    box-shadow: var(--shadow-sm) !important;
    border-color: var(--border-color) !important;
}

/* 미검증 배지 */
.cn-unverified-badge {
    display: inline-block;
    padding: 0.2rem 0.55rem;
    border-radius: 8px;
    font-size: 0.65rem; font-weight: 700;
    background: rgba(255, 152, 0, 0.18);
    color: #ffa726;
    border: 1px solid rgba(255, 152, 0, 0.45);
    line-height: 1.4;
    margin-left: 0.4rem;
    vertical-align: middle;
}
/* 카드 우측 상단 배치용 */
.cn-asset-image-wrap > .cn-unverified-badge {
    position: absolute;
    top: 8px; left: 8px;
    z-index: 3;
    margin-left: 0;
    font-size: 0.62rem;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}
/* 인라인 ⚠ (제목 옆 등) */
.cn-unverified-badge.cn-inline {
    padding: 0 0.3rem; font-size: 0.7rem;
    border: none; background: none;
    color: #ffa726; margin-left: 0.3rem;
}

/* ============================================================
   X 트렌드 — 좋아요·RT 카운터
   ============================================================ */
.cn-trend-source {
    display: flex; justify-content: space-between; align-items: center;
}
.cn-trend-source-right {
    display: flex; align-items: center; gap: 0.4rem;
}
.cn-trend-stats {
    display: flex; gap: 1.5rem;
    margin-top: 0.7rem; margin-bottom: 0.3rem;
    font-size: 1.5rem;
    color: var(--text-secondary);
}
.cn-trend-stat {
    display: inline-flex; align-items: center; gap: 0.5rem;
    font-weight: 700;
    font-family: 'Outfit', sans-serif;
}
.cn-trend-stat[title="좋아요"] { color: #ff4081; }
.cn-trend-stat[title="리트윗"] { color: #1da1f2; }

/* ============================================================
   spin 애니메이션 (재시도 버튼·로딩)
   ============================================================ */
.cn-spin { display: inline-block; animation: cn-spin 1s linear infinite; }

/* ===== 반응형 ===== */
@media (max-width: 1100px) {
    .cn-main-grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
    #view-cardnews { padding: 0; }
    .cn-header h1 { font-size: 1.6rem; }
    .cn-asset-card { flex: 0 0 160px; }
}