/* 와풀애드 - AutoReels 완벽 일치 다크 테마 시스템 */
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');

:root {
    --bg-page: #050811;
    --bg-sidebar: #080c16;
    --bg-card: #0c101d;
    --bg-card-hover: #101626;
    --border-subtle: #161e31;
    --border-active: #222e47;
    
    /* 5대 통계 카드 색상 (AutoReels 정확 일치) */
    --stat-1-white: #ffffff;
    --stat-2-red: #ef4444;
    --stat-3-green: #10b981;
    --stat-4-blue: #38bdf8;
    --stat-5-yellow: #f59e0b;
}

body {
    font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, Roboto, sans-serif;
    background-color: var(--bg-page);
    color: #e2e8f0;
}

/* 스크롤바 미니멀 스타일 */
::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}
::-webkit-scrollbar-track {
    background: #050811;
}
::-webkit-scrollbar-thumb {
    background: #192237;
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: #2b395a;
}

/* 좌측 사이드바 메뉴 (AutoReels 정확 일치) */
.sidebar-btn {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0.65rem 0.85rem;
    border-radius: 0.75rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: #94a3b8;
    transition: all 0.15s ease-in-out;
    border: 1px solid transparent;
}

.sidebar-btn:hover {
    background-color: #0f1523;
    color: #ffffff;
}

/* 대시보드 활성 상태 (AutoReels처럼 어두운 둥근 알약 + 은은한 테두리 + 흰색 텍스트) */
.sidebar-btn.active {
    background-color: #131b2e;
    border: 1px solid #222f4b;
    color: #ffffff !important;
    font-weight: 600;
}

.sidebar-btn.active .icon-active {
    color: #ef4444 !important; /* AutoReels의 대시보드 레드 그리드 아이콘 색상 */
}

/* 통계 카드 (AutoReels 다크 사각 카드) */
.autoreels-card {
    background-color: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: 0.875rem;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 125px;
    transition: all 0.2s ease;
}

.autoreels-card:hover {
    background-color: var(--bg-card-hover);
    border-color: var(--border-active);
}

/* AutoReels 전용 뱃지 스타일 */
.badge-status-pending {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0.65rem;
    border-radius: 9999px;
    font-size: 0.6875rem;
    font-weight: 500;
    color: #fcd34d;
    background-color: rgba(180, 83, 9, 0.18);
    border: 1px solid rgba(245, 158, 11, 0.45);
}

.badge-status-uploaded {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0.65rem;
    border-radius: 9999px;
    font-size: 0.6875rem;
    font-weight: 500;
    color: #d8b4fe;
    background-color: rgba(126, 34, 206, 0.18);
    border: 1px solid rgba(168, 85, 247, 0.45);
}

.badge-status-done {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0.65rem;
    border-radius: 9999px;
    font-size: 0.6875rem;
    font-weight: 500;
    color: #6ee7b7;
    background-color: rgba(6, 95, 70, 0.18);
    border: 1px solid rgba(16, 185, 129, 0.45);
}

.badge-type {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.2rem 0.5rem;
    border-radius: 0.375rem;
    font-size: 0.6875rem;
    font-weight: 500;
    color: #cbd5e1;
    background-color: #101626;
    border: 1px solid #1e293b;
}

/* AutoReels 스타일 다크 액션 버튼 */
.btn-autoreels-dark {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background-color: #111726;
    border: 1px solid #243048;
    color: #ffffff;
    padding: 0.5rem 0.95rem;
    border-radius: 0.625rem;
    font-size: 0.75rem;
    font-weight: 500;
    transition: all 0.15s ease;
}

.btn-autoreels-dark:hover {
    background-color: #182238;
    border-color: #38496e;
    color: #ffffff;
}

/* 사용 설명서 파란색 테두리 배너 (AutoReels 일치) */
.autoreels-info-banner {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    background-color: #081020;
    border: 1px solid #1d3557;
    border-radius: 0.75rem;
    padding: 0.75rem 1rem;
    color: #38bdf8;
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.autoreels-info-banner:hover {
    background-color: #0b152b;
    border-color: #254a7c;
}

/* 모달 레이어 */
.modal-backdrop {
    background-color: rgba(3, 7, 18, 0.88);
    backdrop-filter: blur(8px);
}

/* 생성된 글 본문 가독성 스타일 */
.adsense-content {
    line-height: 1.85;
    color: #e2e8f0;
}

.adsense-content h2 {
    font-size: 1.35rem;
    font-weight: 700;
    color: #60a5fa;
    margin-top: 1.75rem;
    margin-bottom: 0.75rem;
    border-bottom: 1px solid #161e31;
    padding-bottom: 0.5rem;
}

.adsense-content h3 {
    font-size: 1.15rem;
    font-weight: 600;
    color: #93c5fd;
    margin-top: 1.25rem;
    margin-bottom: 0.5rem;
}

.adsense-content p {
    margin-bottom: 1rem;
    color: #cbd5e1;
}

.adsense-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5rem 0;
    font-size: 0.95rem;
}

.adsense-content th {
    background-color: #101626;
    padding: 0.75rem 1rem;
    border: 1px solid #1e293b;
    font-weight: 600;
    text-align: left;
    color: #f8fafc;
}

.adsense-content td {
    padding: 0.75rem 1rem;
    border: 1px solid #1e293b;
    color: #cbd5e1;
}

.platform-card-active {
    border-color: #10b981 !important;
    box-shadow: 0 0 0 1px #10b981;
}