* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* 전역 폰트 설정 - Pretendard 최적화 */
html {
    font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
}

body {
    font-family: inherit;
}

:root {
    /* Shadcn/ui 기반 디자인 토큰 - 흰색/검은색 테마 */

    /* 핵심 컬러 팔레트 - 모노크롬 기반 */
    --background: 0 0% 100%;           /* 순백색 배경 */
    --foreground: 240 10% 3.9%;       /* 거의 검은색 텍스트 */
    --card: 0 0% 100%;                /* 카드 배경 */
    --card-foreground: 240 10% 3.9%;  /* 카드 텍스트 */
    --popover: 0 0% 100%;             /* 팝오버 배경 */
    --popover-foreground: 240 10% 3.9%; /* 팝오버 텍스트 */

    /* Primary - 세련된 흑백 기반 */
    --primary: 240 5.9% 10%;          /* 진한 회색/검은색 */
    --primary-foreground: 0 0% 98%;   /* 흰색 텍스트 */

    /* Secondary - 부드러운 회색 */
    --secondary: 240 4.8% 95.9%;      /* 연한 회색 */
    --secondary-foreground: 240 5.9% 10%; /* 진한 텍스트 */

    /* Muted - 중성 색상 */
    --muted: 240 4.8% 95.9%;          /* 뮤트된 배경 */
    --muted-foreground: 240 3.8% 46.1%; /* 뮤트된 텍스트 */

    /* Accent - 강조 색상 */
    --accent: 240 4.8% 95.9%;         /* 액센트 배경 */
    --accent-foreground: 240 5.9% 10%; /* 액센트 텍스트 */

    /* 상태 색상 */
    --destructive: 0 84.2% 60.2%;     /* 위험/삭제 색상 */
    --destructive-foreground: 0 0% 98%; /* 위험 텍스트 */

    /* Border와 Input */
    --border: 240 5.9% 90%;           /* 경계선 */
    --input: 240 5.9% 90%;            /* 입력 필드 */
    --ring: 240 5.9% 10%;             /* 포커스 링 */

    /* 고성과 비디오 카드용 노란색 유지 */
    --high-performance: 45 93% 58%;    /* 밝은 노란색 (Golden) */
    --high-performance-foreground: 26 83% 14%; /* 진한 갈색 텍스트 */
    --high-performance-border: 45 93% 50%; /* 노란색 테두리 */

    /* 그림자 - 세련된 흑백 테마 */
    --shadow-sm: 0 1px 2px 0 hsl(240 5.9% 10% / 0.05);
    --shadow: 0 1px 3px 0 hsl(240 5.9% 10% / 0.1), 0 1px 2px -1px hsl(240 5.9% 10% / 0.1);
    --shadow-md: 0 4px 6px -1px hsl(240 5.9% 10% / 0.1), 0 2px 4px -2px hsl(240 5.9% 10% / 0.1);
    --shadow-lg: 0 10px 15px -3px hsl(240 5.9% 10% / 0.1), 0 4px 6px -4px hsl(240 5.9% 10% / 0.1);
    --shadow-xl: 0 20px 25px -5px hsl(240 5.9% 10% / 0.1), 0 8px 10px -6px hsl(240 5.9% 10% / 0.1);

    /* Border Radius - Shadcn/ui 기본값 */
    --radius: 0.5rem;
    --radius-sm: 0.375rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;

    /* 애니메이션 */
    --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-normal: 300ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 500ms cubic-bezier(0.4, 0, 0.2, 1);

    /* 레거시 호환성을 위한 변수들 */
    --primary-color: hsl(var(--primary));
    --primary-hover: hsl(240 5.9% 8%);
    --bg-primary: hsl(var(--background));
    --bg-secondary: hsl(var(--secondary));
    --text-primary: hsl(var(--foreground));
    --text-secondary: hsl(var(--muted-foreground));
    --warning-color: hsl(var(--high-performance));
    --warning-light: hsl(45 93% 95%);
}

/* ===== Reelcher 스타일 모던 푸터 ===== */
.modern-footer {
    margin-top: 4rem;
    border-top: 1px solid hsl(var(--border));
    background: hsl(var(--background));
}

.modern-footer-container {
    max-width: 72rem; /* max-w-6xl */
    margin: 0 auto;
    padding: 0 1rem;
}

.modern-footer-content {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 0.75rem; /* gap-x-3 gap-y-2 */
    padding: 1.5rem 0; /* py-6 */
    font-size: 0.8125rem; /* text-[13px] */
    color: hsl(var(--muted-foreground));
    line-height: 1.4;
}

.footer-separator {
    color: hsl(var(--muted-foreground));
    opacity: 0.6;
    font-weight: 300;
}

.footer-email-link {
    color: hsl(var(--muted-foreground));
    text-decoration: none;
    transition: all 0.2s ease;
}

.footer-email-link:hover {
    text-decoration: underline;
    color: hsl(var(--foreground));
}

.footer-policy-link {
    color: hsl(var(--muted-foreground));
    text-decoration: none;
    transition: all 0.2s ease;
}

.footer-policy-link:hover {
    text-decoration: underline;
    color: hsl(var(--foreground));
}

/* 반응형 디자인 */
@media (max-width: 768px) {
    .modern-footer-content {
        font-size: 0.75rem; /* 12px */
        gap: 0.5rem 0.5rem;
        justify-content: center;
        text-align: center;
    }

    .footer-separator {
        display: none;
    }

    .modern-footer-content > div,
    .modern-footer-content > a {
        display: block;
        width: 100%;
        margin: 0.25rem 0;
    }
}

@media (max-width: 480px) {
    .modern-footer-content {
        font-size: 0.6875rem; /* 11px */
        padding: 1rem 0;
    }
}

/* ===== 런칭 전 뜨거운 반응 섹션 ===== */
.testimonial-section {
    padding: 4rem 0;
    background: linear-gradient(135deg, hsl(var(--background)) 0%, hsl(var(--muted)) 100%);
    overflow: hidden;
    position: relative;
}

.testimonial-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
}

.testimonial-header {
    text-align: center;
    margin-bottom: 3rem;
}

.testimonial-title {
    font-size: 2.5rem;
    font-weight: 800;
    color: hsl(var(--foreground));
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    line-height: 1.2;
}

.fire-emoji {
    animation: fire-pulse 2s ease-in-out infinite;
    font-size: 2.5rem;
}

@keyframes fire-pulse {
    0%, 100% {
        transform: scale(1);
        filter: brightness(1);
    }
    50% {
        transform: scale(1.1);
        filter: brightness(1.2);
    }
}

.testimonial-description {
    font-size: 1.125rem;
    color: hsl(var(--muted-foreground));
    max-width: 600px;
    margin: 0 auto;
}

/* 슬라이더 컨테이너 */
.testimonial-slider {
    width: 100%;
    overflow: hidden;
    mask: linear-gradient(90deg, transparent, white 5%, white 95%, transparent);
    -webkit-mask: linear-gradient(90deg, transparent, white 5%, white 95%, transparent);
}

.testimonial-track {
    display: flex;
    animation: testimonial-scroll 25s linear infinite;
    gap: 1.5rem;
    /* 정확히 10개 슬라이드(5개 원본 + 5개 복사본) + 9개 gap 계산 */
    width: calc(10 * 320px + 9 * 1.5rem);
}

@keyframes testimonial-scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        /* 정확히 5개 슬라이드 + 4개 gap만큼 이동 */
        transform: translateX(calc(-5 * 200px - 4 * 1.5rem));
    }
}

.testimonial-slide {
    flex: 0 0 auto;
    width: 200px;
    height: 250px;
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
    background: white;
    /* 고화질 이미지 컨테이너 최적화 */
    transform: translateZ(0) scale(1.0001);
    -webkit-transform: translateZ(0) scale(1.0001);
    -moz-transform: translateZ(0) scale(1.0001);
    /* 백페이스 가시성 */
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
    /* 3D 변환 스타일 */
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    /* 하드웨어 가속 */
    will-change: transform, filter;
    /* 고해상도 렌더링 */
    -webkit-perspective: 1000px;
    perspective: 1000px;
    /* 컨테이너 레벨 선명도 */
    filter: contrast(1.01) brightness(1.001);
    /* 렌더링 최적화 */
    contain: layout style paint size;
}

.testimonial-slide:hover {
    transform: translateZ(0) scale(1.0001) translateY(-8px);
    -webkit-transform: translateZ(0) scale(1.0001) translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

.testimonial-slide:hover .testimonial-image {
    /* 호버 시 최대 선명도 */
    filter: contrast(1.15) brightness(1.04) saturate(1.1) unsharp-mask(radius 1.2px, amount 250%);
    -webkit-filter: contrast(1.15) brightness(1.04) saturate(1.1);
}

.testimonial-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    border-radius: 1rem;
    background: white;
    /* 고화질 이미지 렌더링 최적화 */
    image-rendering: -webkit-optimize-contrast;
    image-rendering: auto;
    image-rendering: high-quality;
    /* 고품질 스케일링 */
    -webkit-interpolation-mode: bicubic;
    -ms-interpolation-mode: bicubic;
    interpolation-mode: smooth;
    /* 최대 선명도 최적화 */
    filter: contrast(1.08) brightness(1.02) saturate(1.05) unsharp-mask(radius 1px, amount 150%);
    -webkit-filter: contrast(1.08) brightness(1.02) saturate(1.05);
    /* 크롬/사파리 최적화 */
    -webkit-transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    -webkit-perspective: 1000;
    /* 파이어폭스 최적화 */
    -moz-backface-visibility: hidden;
    -moz-transform: translateZ(0);
    /* 엣지/IE 최적화 */
    -ms-transform: translateZ(0);
    /* 표준 최적화 */
    transform: translateZ(0) scale(1.001);
    backface-visibility: hidden;
    perspective: 1000px;
    /* 고해상도 디스플레이 최적화 */
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    /* 텍스처 필터링 */
    filter: contrast(1.02) brightness(1.01) saturate(1.02);
    /* GPU 레이어 강제 생성 */
    will-change: transform, filter;
    /* 레이어 합성 최적화 */
    contain: layout style paint size;
}

/* 반응형 디자인 */
@media (max-width: 768px) {
    .testimonial-title {
        font-size: 1.875rem;
        flex-direction: column;
        gap: 0.5rem;
    }

    .fire-emoji {
        font-size: 1.875rem;
    }

    .testimonial-description {
        font-size: 1rem;
        padding: 0 1rem;
    }

    .testimonial-slide {
        width: 180px;
        height: 225px;
    }

    .testimonial-track {
        gap: 1rem;
        /* 태블릿 크기: 10개 슬라이드(180px) + 9개 gap(1rem) */
        width: calc(10 * 180px + 9 * 1rem);
    }

    @keyframes testimonial-scroll {
        0% {
            transform: translateX(0);
        }
        100% {
            /* 정확히 5개 슬라이드 + 4개 gap만큼 이동 */
            transform: translateX(calc(-5 * 280px - 4 * 1rem));
        }
    }

    .testimonial-section {
        padding: 3rem 0;
    }
}

@media (max-width: 480px) {
    .testimonial-title {
        font-size: 1.5rem;
    }

    .fire-emoji {
        font-size: 1.5rem;
    }

    .testimonial-slide {
        width: 150px;
        height: 188px;
    }

    .testimonial-track {
        gap: 0.75rem;
        /* 모바일 크기: 10개 슬라이드(150px) + 9개 gap(0.75rem) */
        width: calc(10 * 150px + 9 * 0.75rem);
    }

    @keyframes testimonial-scroll {
        0% {
            transform: translateX(0);
        }
        100% {
            /* 정확히 5개 슬라이드 + 4개 gap만큼 이동 */
            transform: translateX(calc(-5 * 240px - 4 * 0.75rem));
        }
    }

    .testimonial-section {
        padding: 2rem 0;
    }
}

/* 마우스 hover 시 애니메이션 일시정지 */
.testimonial-slider:hover .testimonial-track {
    animation-play-state: paused;
}

/* ===== 현대적인 히어로 섹션 스타일 ===== */
.modern-landing-container {
    position: relative;
    min-height: 100vh;
    width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    overflow: hidden;
    background: hsl(var(--background));
    padding-top: 0.25rem;
    margin-top: -3rem;
}

.modern-hero-section {
    position: relative;
    min-height: 100vh;
    width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    overflow: hidden;
    background: hsl(var(--background));
}

/* 배경 그리드 효과 */
.hero-grid-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    opacity: 0.3;
}

/* 그라데이션 오버레이 */
.hero-gradient-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom right, rgba(59, 130, 246, 0.02), transparent, rgba(99, 102, 241, 0.02));
}

/* 마우스 트래킹 그라데이션 */
.mouse-gradient {
    position: fixed;
    pointer-events: none;
    border-radius: 9999px;
    background-image: radial-gradient(circle, rgba(59, 130, 246, 0.03), rgba(99, 102, 241, 0.03), transparent 70%);
    transform: translate(-50%, -50%);
    will-change: left, top, opacity;
    transition: left 70ms linear, top 70ms linear, opacity 300ms ease-out;
    z-index: 5;
    width: 24rem;
    height: 24rem;
    filter: blur(2rem);
    opacity: 0;
}

/* 히어로 콘텐츠 */
.hero-content-wrapper {
    position: relative;
    z-index: 10;
    width: 100%;
    max-width: 7xl;
    margin: 0 auto;
    padding: 1rem 1.5rem;
}

.hero-content-inner {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* 타이틀 컨테이너 */
.hero-title-container {
    margin-bottom: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
}

.hero-subtitle-top {
    color: hsl(var(--muted-foreground));
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: -0.025em;
    margin-bottom: 0.5rem;
}

.hero-main-title {
    font-weight: 900;
}

.hero-title-line {
    display: flex;
    justify-content: center;
    margin-bottom: 0.5rem;
}

/* 단어별 애니메이션 */
.word-animate {
    display: inline-block;
    opacity: 0;
    margin: 0 0.1em;
    transition: color 0.3s ease, transform 0.3s ease;
    font-size: 2rem;
    font-weight: 900;
    letter-spacing: -0.05em;
    color: hsl(var(--foreground));
    animation: word-appear 0.6s ease-out forwards;
}

.word-animate:nth-child(1) { animation-delay: 0.1s; }
.word-animate:nth-child(2) { animation-delay: 0.2s; }
.word-animate:nth-child(3) { animation-delay: 0.3s; }
.word-animate:nth-child(4) { animation-delay: 0.4s; }
.word-animate:nth-child(5) { animation-delay: 0.5s; }
.word-animate:nth-child(6) { animation-delay: 0.6s; }
.word-animate:nth-child(7) { animation-delay: 0.7s; }
.word-animate:nth-child(8) { animation-delay: 0.8s; }
.word-animate:nth-child(9) { animation-delay: 0.9s; }
.word-animate:nth-child(10) { animation-delay: 1.0s; }
.word-animate:nth-child(11) { animation-delay: 1.1s; }
.word-animate:nth-child(12) { animation-delay: 1.2s; }
.word-animate:nth-child(13) { animation-delay: 1.3s; }

@keyframes word-appear {
    0% {
        opacity: 0;
        transform: translateY(30px) scale(0.8);
        filter: blur(10px);
    }
    50% {
        opacity: 0.8;
        transform: translateY(10px) scale(0.95);
        filter: blur(2px);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

.word-animate:hover {
    color: hsl(var(--muted-foreground));
    transform: translateY(-2px);
}

/* 설명 텍스트 */
.hero-description-modern {
    margin-top: 1rem;
    margin-bottom: 2rem;
    opacity: 0;
    animation: fade-in-up 0.8s ease-out 1.5s forwards;
}

.hero-description-modern p {
    font-size: 1rem;
    font-weight: 500;
    color: hsl(var(--muted-foreground));
    line-height: 1.5;
    letter-spacing: -0.025em;
    max-width: 48rem;
    margin: 0 auto;
    padding: 0 1rem;
}

@keyframes fade-in-up {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 액션 버튼들 */
.hero-actions-modern {
    display: flex;
    flex-direction: row;
    gap: 0.75rem;
    justify-content: center;
    padding: 0 1rem;
    margin-top: -1rem;
    opacity: 0;
    animation: fade-in-up 0.8s ease-out 1.8s forwards;
}

.action-button-container {
    flex: 1;
    max-width: 7rem;
}

.cta-button-modern {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    font-size: 0.75rem;
    font-weight: 500;
    ring-offset-background: hsl(var(--background));
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    border: none;
    cursor: pointer;
    width: 100%;
    height: 2.5rem;
    padding: 0.5rem 0.75rem;
    border-radius: 9999px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.cta-button-modern.primary {
    background: hsl(var(--background));
    color: hsl(var(--foreground));
    border: 2px solid hsl(var(--border));
}

.cta-button-modern.primary:hover {
    background: hsl(var(--accent));
    border-color: hsl(var(--muted-foreground));
    transform: translateY(-1px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.cta-button-modern.secondary {
    background: hsl(var(--foreground));
    color: hsl(var(--background));
}

.cta-button-modern.secondary:hover {
    background: hsl(var(--muted-foreground));
    transform: translateY(-1px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

/* 하단 페이드 효과 */
.hero-bottom-fade {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 6rem;
    background: linear-gradient(to top, hsl(var(--background)), hsl(var(--background) / 0.5), transparent);
    pointer-events: none;
}

/* 반응형 디자인 */
@media (min-width: 640px) {
    .word-animate {
        font-size: 2.5rem;
    }

    .hero-description-modern p {
        font-size: 1.125rem;
    }

    .cta-button-modern {
        font-size: 0.875rem;
        height: 3rem;
        padding: 0.5rem 1.5rem;
    }

    .action-button-container {
        max-width: 9rem;
    }
}

@media (min-width: 768px) {
    .word-animate {
        font-size: 3.75rem;
    }

    .hero-description-modern {
        margin-top: 2rem;
        margin-bottom: 2.5rem;
    }

    .hero-description-modern p {
        font-size: 1.25rem;
    }
}

@media (min-width: 1024px) {
    .word-animate {
        font-size: 4.5rem;
    }

    .hero-description-modern p {
        font-size: 1.25rem;
    }

    .hero-actions-modern {
        margin-top: 2rem;
    }
}

.sm-hidden {
    display: none;
}

@media (max-width: 639px) {
    .sm-hidden {
        display: inline;
    }
}

/* ===== 타겟 고객 스택 카드 섹션 ===== */
.target-audience-section {
    max-width: 80rem;
    margin: 0 auto;
    padding: 0.5rem 1.5rem 3rem 1.5rem;
    margin-bottom: 3rem;
}

@media (min-width: 768px) {
    .target-audience-section {
        padding: 1.5rem 6rem 6rem 1.5rem;
        margin-bottom: 5rem;
    }
}

.target-section-container {
    opacity: 0;
    animation: reveal-section 0.8s ease-out 0.5s forwards;
}

@keyframes reveal-section {
    0% {
        opacity: 0;
        transform: translateY(30px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 섹션 헤더 */
.target-section-header {
    text-align: center;
    margin-bottom: 2rem;
}

@media (min-width: 768px) {
    .target-section-header {
        margin-bottom: 5rem;
    }
}

@media (min-width: 1024px) {
    .target-section-header {
        margin-bottom: 6rem;
    }
}

.target-section-title {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.2;
    color: hsl(var(--foreground));
    margin-bottom: 0.75rem;
    padding: 0 1rem;
}

@media (min-width: 640px) {
    .target-section-title {
        font-size: 1.875rem;
    }
}

@media (min-width: 768px) {
    .target-section-title {
        font-size: 2.25rem;
        margin-bottom: 1rem;
    }
}

.target-title-line {
    display: block;
    margin-bottom: 0.25rem;
}

@media (min-width: 768px) {
    .target-title-line:first-child {
        margin-bottom: 0.25rem;
    }
}

.target-section-description {
    color: hsl(var(--muted-foreground));
    font-size: 0.875rem;
    line-height: 1.5;
    white-space: pre-line;
    padding: 0 1rem;
}

@media (min-width: 640px) {
    .target-section-description {
        font-size: 1rem;
    }
}

@media (min-width: 768px) {
    .target-section-description {
        font-size: 1.125rem;
    }
}

/* 스택 카드 그리드 */
.stack-cards-grid {
    display: grid;
    grid-template-areas: 'stack';
    place-items: center;
    margin-left: -0.5rem;
    opacity: 0;
    animation: fade-in-cards 0.7s ease-out 1s forwards;
}

@media (min-width: 640px) {
    .stack-cards-grid {
        margin-left: -1rem;
    }
}

@media (min-width: 768px) {
    .stack-cards-grid {
        margin-left: -1.5rem;
    }
}

@keyframes fade-in-cards {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

/* 개별 스택 카드 */
.stack-card {
    position: relative;
    display: flex;
    height: 8rem;
    width: 20rem;
    transform: skewY(-8deg);
    user-select: none;
    flex-direction: column;
    justify-content: space-between;
    border-radius: 0.75rem;
    border: 2px solid hsl(var(--border));
    background: hsl(var(--background) / 0.8);
    backdrop-filter: blur(4px);
    padding: 0.75rem;
    transition: all 0.7s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: var(--shadow-sm);
    grid-area: stack;
    filter: grayscale(100%);
}

@media (min-width: 640px) {
    .stack-card {
        height: 8rem;
        width: 18rem;
        padding: 0.75rem;
    }
}

@media (min-width: 768px) {
    .stack-card {
        height: 9rem;
        width: 22rem;
    }
}

@media (min-width: 1024px) {
    .stack-card {
        height: 10rem;
        width: 26rem;
    }
}

/* 스택 카드 위치 조정 */
.stack-card.card-1 {
    z-index: 3;
    transform: skewY(-8deg) translateY(0) translateX(0);
}

.stack-card.card-2 {
    z-index: 2;
    transform: skewY(-8deg) translateY(2.5rem) translateX(4rem);
}

.stack-card.card-3 {
    z-index: 1;
    transform: skewY(-8deg) translateY(5rem) translateX(8rem);
}

/* 호버 효과 */
.stack-card:hover {
    border-color: hsl(var(--muted-foreground));
    background: hsl(var(--background) / 0.9);
    box-shadow: var(--shadow-md);
    filter: grayscale(0%);
}

.stack-card.card-1:hover {
    transform: skewY(-8deg) translateY(-4rem) translateX(0);
}

.stack-card.card-2:hover {
    transform: skewY(-8deg) translateY(-2rem) translateX(4rem);
}

.stack-card.card-3:hover {
    transform: skewY(-8deg) translateY(0.5rem) translateX(8rem);
}

/* 카드 배경 오버레이 */
.stack-card::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: hsl(var(--background) / 0.5);
    border-radius: 0.75rem;
    opacity: 1;
    transition: opacity 0.7s ease;
    background-blend-mode: overlay;
}

.stack-card:hover::before {
    opacity: 0;
}

/* 카드 페이드 그라데이션 */
.stack-card::after {
    content: '';
    position: absolute;
    right: -0.25rem;
    top: -5%;
    height: 110%;
    width: 16rem;
    background: linear-gradient(to left, hsl(var(--background)), transparent);
    pointer-events: none;
}

@media (min-width: 640px) {
    .stack-card::after {
        width: 14rem;
    }
}

@media (min-width: 768px) {
    .stack-card::after {
        width: 16rem;
    }
}

@media (min-width: 1024px) {
    .stack-card::after {
        width: 18rem;
    }
}

/* 카드 콘텐츠 */
.card-content {
    position: relative;
    z-index: 10;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    height: 100%;
}

@media (min-width: 640px) {
    .card-content {
        gap: 0.75rem;
    }
}

.card-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.card-icon {
    flex-shrink: 0;
    color: hsl(var(--muted-foreground));
    transition: color 0.3s ease;
}

.stack-card:hover .card-icon {
    color: hsl(var(--foreground));
}

.card-icon .icon {
    width: 1.25rem;
    height: 1.25rem;
}

.card-title {
    font-size: 1rem;
    font-weight: 700;
    color: hsl(var(--foreground));
    margin: 0;
}

@media (min-width: 640px) {
    .card-title {
        font-size: 1.125rem;
    }
}

@media (min-width: 768px) {
    .card-title {
        font-size: 1.25rem;
    }
}

@media (min-width: 1024px) {
    .card-title {
        font-size: 1.25rem;
    }
}

.card-description {
    font-size: 0.75rem;
    line-height: 1.4;
    color: hsl(var(--muted-foreground));
    font-weight: 500;
    overflow: hidden;
    flex-grow: 1;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    transition: color 0.3s ease;
}

@media (min-width: 640px) {
    .card-description {
        font-size: 0.75rem;
    }
}

@media (min-width: 768px) {
    .card-description {
        font-size: 0.875rem;
    }
}

@media (min-width: 1024px) {
    .card-description {
        font-size: 1rem;
    }
}

.stack-card:hover .card-description {
    color: hsl(var(--foreground));
}

/* 활성 상태와 클릭 효과 */
.stack-card:active {
    border-color: hsl(var(--muted-foreground));
    background: hsl(var(--background) / 0.9);
    box-shadow: var(--shadow-md);
}

/* 접근성을 위한 포커스 상태 */
.stack-card:focus-visible {
    outline: 2px solid hsl(var(--ring));
    outline-offset: 2px;
}

/* 강제 색상 모드 지원 (Forced Colors Mode) */
@media (forced-colors: active) {
    * {
        border-color: ButtonBorder !important;
        background-color: Canvas !important;
        color: CanvasText !important;
    }
    
    .sidebar-navigation {
        background-color: Canvas !important;
        border-color: ButtonBorder !important;
    }
    
    .sidebar-item:hover,
    .sidebar-item.active {
        background-color: hsl(var(--secondary)) !important;
        color: hsl(var(--foreground)) !important;
        border-left: 3px solid hsl(var(--primary)) !important;
    }
    
    .main-content {
        background-color: Canvas !important;
        color: CanvasText !important;
    }
    
    .content-section {
        background-color: Canvas !important;
    }
}

body {
    font-family: inherit;
    background: hsl(var(--background));
    color: hsl(var(--foreground));
    min-height: 100vh;
    line-height: 1.5;
    position: relative;
    overflow-x: hidden;
    font-size: 14px;
    font-weight: 400;
    font-feature-settings: "rlig" 1, "calt" 1;
    /* 전역 텍스트 및 이미지 품질 최적화 */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* 4K 고화질 전역 이미지 최적화 */
img {
    /* 고해상도 디스플레이 최적화 */
    image-rendering: -webkit-optimize-contrast;
    image-rendering: optimize-contrast;
    image-rendering: auto;
    image-rendering: smooth;
    /* 4K 스케일링 최적화 */
    -webkit-interpolation-mode: bicubic;
    -ms-interpolation-mode: bicubic;
    interpolation-mode: smooth;
    /* 반응형 이미지 */
    max-width: 100%;
    height: auto;
    /* 다중 브라우저 하드웨어 가속 */
    -webkit-transform: translateZ(0) scale(1.0001);
    -moz-transform: translateZ(0) scale(1.0001);
    -ms-transform: translateZ(0) scale(1.0001);
    transform: translateZ(0) scale(1.0001);
    /* 백페이스 가시성 제어 */
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
    /* 3D 변환 스타일 보존 */
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    /* 레티나/고해상도 대응 */
    -webkit-font-smoothing: subpixel-antialiased;
    -moz-osx-font-smoothing: auto;
    /* GPU 레이어 최적화 */
    will-change: transform;
    contain: layout style paint;
}

/* 고해상도 디스플레이 (레티나, 4K) 전용 최적화 */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx) {
    .testimonial-image {
        /* 고밀도 픽셀 디스플레이 최적화 */
        image-rendering: -webkit-optimize-contrast;
        image-rendering: auto;
        image-rendering: high-quality;
        -webkit-interpolation-mode: bicubic;
        /* 레티나/4K 디스플레이 최대 선명도 */
        filter: contrast(1.12) brightness(1.03) saturate(1.08) unsharp-mask(radius 0.8px, amount 200%);
        -webkit-filter: contrast(1.12) brightness(1.03) saturate(1.08);
        /* 고해상도 디스플레이 픽셀 보정 */
        -webkit-transform: translateZ(0) scale(1.0002);
        transform: translateZ(0) scale(1.0002);
    }

    img {
        /* 고밀도 픽셀 전역 최적화 */
        image-rendering: -webkit-optimize-contrast;
        image-rendering: auto;
        -webkit-interpolation-mode: bicubic;
        -webkit-transform: translateZ(0) scale(1.0002);
        transform: translateZ(0) scale(1.0002);
    }
}

/* 미니멀 배경 패턴 - 세련된 흑백 테마 */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:
        radial-gradient(circle at 20% 80%, hsl(240 5.9% 90% / 0.3) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, hsl(240 5.9% 90% / 0.2) 0%, transparent 50%),
        radial-gradient(circle at 40% 40%, hsl(240 5.9% 90% / 0.1) 0%, transparent 50%);
    pointer-events: none;
    z-index: -1;
}

.container {
    display: flex;
    min-height: 100vh;
    overflow-x: hidden;
    position: relative;
    background: transparent;
}

.header {
    text-align: center;
    color: var(--text-primary);
    margin-bottom: 2rem;
}

.title {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    cursor: pointer;
    transition: var(--transition-normal);
    letter-spacing: -0.025em;
}

.title:hover {
    transform: scale(1.02);
}

.youtube-logo {
    filter: drop-shadow(2px 2px 4px rgba(0,0,0,0.3));
    transition: transform 0.3s ease;
    width: 48px;
    height: 48px;
}

.youtube-logo:hover {
    transform: scale(1.1);
}

.subtitle {
    font-size: 1.1rem;
    opacity: 0.9;
    font-weight: 300;
}

.search-section {
    background: hsl(var(--card));
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    box-shadow: var(--shadow-sm);
    margin-bottom: 1.5rem;
    transition: var(--transition-fast);
}

.search-section:hover {
    box-shadow: var(--shadow-md);
}

.search-box {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 1rem;
    align-items: center;
}

/* Shadcn/ui Input 스타일 */
.search-input {
    flex: 1;
    height: 2.5rem;
    width: 100%;
    border-radius: var(--radius-md);
    border: 1px solid hsl(var(--input));
    background-color: hsl(var(--background));
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    transition: var(--transition-fast);
    color: hsl(var(--foreground));
}

.search-input:focus {
    outline: none;
    ring: 2px solid hsl(var(--ring));
    ring-offset: 2px;
    border-color: hsl(var(--ring));
}

.search-input::placeholder {
    color: hsl(var(--muted-foreground));
}

/* Shadcn/ui Button - Primary 스타일 */
.search-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    font-weight: 500;
    transition: var(--transition-fast);
    height: 2.5rem;
    padding: 0.5rem 1rem;
    background-color: hsl(var(--primary));
    color: hsl(var(--primary-foreground));
    border: none;
    cursor: pointer;
}

.search-button:hover {
    background-color: hsl(var(--primary-hover));
}

.search-button:focus-visible {
    outline: none;
    ring: 2px solid hsl(var(--ring));
    ring-offset: 2px;
}

.search-button:disabled {
    pointer-events: none;
    opacity: 0.5;
}

/* Shadcn/ui Button - Secondary 스타일 */
.filter-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    font-weight: 500;
    transition: var(--transition-fast);
    height: 2.5rem;
    padding: 0.5rem 1rem;
    background-color: hsl(var(--secondary));
    color: hsl(var(--secondary-foreground));
    border: 1px solid hsl(var(--border));
    cursor: pointer;
}

.filter-toggle:hover {
    background: #ff0000;
    color: #ffffff;
    border-color: #ff0000;
}

.filter-toggle.active {
    background: #ff0000;
    color: #ffffff;
    border-color: #ff0000;
}

.advanced-filters {
    background: #f8f9fa;
    border-radius: 15px;
    padding: 20px;
    margin-top: 15px;
    border: 1px solid #e0e0e0;
}

.filter-row {
    display: flex;
    gap: 15px;
    margin-bottom: 15px;
    flex-wrap: wrap;
}

.filter-row:last-child {
    margin-bottom: 0;
}

.filter-group {
    flex: 1;
    min-width: 200px;
}

.filter-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: 500;
    color: #333;
    font-size: 14px;
}

.filter-group input,
.filter-group select {
    width: 100%;
    padding: 10px 15px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 14px;
    outline: none;
    transition: border-color 0.3s;
}

.filter-group input:focus,
.filter-group select:focus {
    border-color: #667eea;
}

.clear-filters-btn {
    padding: 10px 20px;
    background: #dc3545;
    color: #000000;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.3s;
    margin-top: 20px;
}

.clear-filters-btn:hover {
    background: #c82333;
}

/* 알림 스타일 */
.notification {
    position: fixed;
    top: 20px;
    right: 20px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.15);
    padding: 16px 20px;
    z-index: 9999; /* 최상위 레이어 */
    max-width: 350px;
    transform: translateX(400px);
    transition: transform 0.3s ease;
    border-left: 4px solid;
}

.notification.show {
    transform: translateX(0);
}

.notification-content {
    display: flex;
    align-items: center;
    gap: 12px;
}

.notification-icon {
    font-size: 18px;
    flex-shrink: 0;
}

.notification-message {
    flex: 1;
    font-weight: 500;
    color: #333;
    line-height: 1.4;
}

.notification-close {
    background: none;
    border: none;
    font-size: 20px;
    color: #999;
    cursor: pointer;
    padding: 0;
    margin-left: 12px;
    flex-shrink: 0;
}

.notification-close:hover {
    color: #666;
}

.notification-success {
    border-left-color: #4CAF50;
    background: linear-gradient(135deg, #f1f8e9 0%, #e8f5e8 100%);
}

.notification-error {
    border-left-color: #f44336;
    background: linear-gradient(135deg, #ffebee 0%, #ffcdd2 100%);
}

.notification-warning {
    border-left-color: #ff9800;
    background: linear-gradient(135deg, #fff3e0 0%, #ffe0b2 100%);
}

.notification-info {
    border-left-color: #2196F3;
    background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
}

.search-help {
    text-align: center;
    color: #666;
    font-size: 14px;
}

.loading {
    text-align: center;
    padding: 50px;
    color: #000000;
}

.spinner {
    width: 50px;
    height: 50px;
    border: 5px solid rgba(0,0,0,0.3);
    border-top: 5px solid #000000;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto 20px;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.results-section {
    background: white;
    border-radius: 20px;
    padding: 30px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.results-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
    padding-bottom: 20px;
    border-bottom: 2px solid #f0f0f0;
}

.results-header h2 {
    color: #333;
    font-size: 1.8rem;
    font-weight: 600;
}

.results-actions {
    display: flex;
    gap: 10px;
}

.sort-select, .view-toggle-button {
    padding: 10px 20px;
    border: 2px solid #ddd;
    background: #ffffff;
    color: #333333;
    border-radius: 25px;
    cursor: pointer;
    font-weight: 500;
    transition: all 0.3s;
    font-size: 14px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.sort-select:hover, .view-toggle-button:hover {
    background: #f8f9fa;
    border-color: #667eea;
    color: #333333;
}

.sort-select {
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23333333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 16px;
    padding-right: 40px;
}

.sort-select option {
    background: #ffffff;
    color: #333333;
    padding: 10px;
}

.view-toggle-button.active {
    background: #667eea;
    color: #ffffff;
    border-color: #667eea;
}

.results-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.stat-item {
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
    color: #000000;
    padding: 20px;
    border-radius: 15px;
    text-align: center;
    border: 1px solid #4CAF50;
    box-shadow: 0 4px 12px rgba(76, 175, 80, 0.2);
}

.stat-label {
    display: block;
    font-size: 14px;
    opacity: 0.9;
    margin-bottom: 5px;
    color: #000000 !important;
}

.stat-value {
    display: block;
    font-size: 24px;
    font-weight: 700;
    color: #000000 !important;
}

.results-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
}

/* 반응형 - 중간 화면에서는 2개씩 */
@media (max-width: 1024px) {
    .results-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* 작은 화면에서는 1개씩 */
@media (max-width: 768px) {
    .results-grid {
        grid-template-columns: 1fr;
    }
}

/* 영상분석 섹션 배경 고정 - 배경 이미지 투과 방지 */
#videoAnalysisSection {
    background-color: #ffffff !important;
    position: relative !important;
    z-index: 10 !important;
    min-height: 100vh !important;
    padding: 20px 0 !important;
}

/* 비디오 결과 카드 컨테이너 - 배경 투과 완전 차단 */
#videoResultsCards {
    background-color: #ffffff !important;
    position: relative !important;
    z-index: 25 !important;
    padding: 20px !important;
    border-radius: 10px !important;
    backdrop-filter: blur(20px) !important;
    box-shadow: 0 0 20px rgba(0,0,0,0.1) !important;
}

/* 영상분석용 카드 그리드 - 한 줄에 3개씩 */
#videoAnalysisSection .results-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    justify-items: center;
    position: relative !important;
    z-index: 20 !important;
    background-color: #ffffff !important;
    padding: 20px 0 !important;
}

/* 데스크톱 대형 화면 (1201px 이상) - 3개씩 (기본값) */

/* 데스크톱 중형 화면 - 3개씩 유지 */
@media (max-width: 1200px) and (min-width: 1025px) {
    #videoAnalysisSection .results-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 18px;
    }
}

/* 태블릿 크기 - 2개씩, 약간 축소 */
@media (max-width: 1024px) and (min-width: 769px) {
    #videoAnalysisSection .results-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
        padding: 0 12px;
    }
    
    .video-card {
        max-width: 400px !important;
        transform: scale(0.95) !important;
        transform-origin: center !important;
    }
    
    .video-card:hover {
        transform: scale(0.95) translateY(-2px) !important;
    }
}

/* 모바일 큰 화면 (가로 모드 포함) - 1개씩, 중간 축소 */
@media (max-width: 768px) and (min-width: 481px) {
    #videoAnalysisSection .results-grid {
        grid-template-columns: 1fr;
        gap: 14px;
        padding: 0 10px;
    }
    
    .video-card {
        max-width: 350px !important;
        width: 100% !important;
        margin: 0 auto 14px auto !important;
        transform: scale(0.92) !important;
        transform-origin: center !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important;
        border-radius: 10px !important;
    }
    
    .video-card:hover {
        transform: scale(0.92) translateY(-1px) !important;
        box-shadow: 0 4px 12px rgba(0,0,0,0.1) !important;
    }
}

/* 모바일 작은 화면 - 1개씩, 최대 축소 */
@media (max-width: 480px) {
    #videoAnalysisSection .results-grid {
        grid-template-columns: 1fr;
        gap: 12px;
        padding: 0 8px;
    }
    
    .video-card {
        max-width: 300px !important;
        width: 100% !important;
        margin: 0 auto 12px auto !important;
        transform: scale(0.88) !important;
        transform-origin: center !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important;
        border-radius: 10px !important;
    }
    
    .video-card:hover {
        transform: scale(0.88) translateY(-1px) !important;
        box-shadow: 0 4px 12px rgba(0,0,0,0.1) !important;
    }
    
    .video-thumbnail-container {
        position: relative !important;
        width: 100% !important;
        height: 0 !important;
        padding-top: 56.25% !important;
        border-radius: 6px !important;
        margin-bottom: 6px !important;
        overflow: hidden !important;
        box-shadow: 0 1px 4px rgba(0,0,0,0.08) !important;
    }
    
    .video-thumbnail {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        border-radius: 6px !important;
    }
    
    .video-info {
        padding: 8px;
    }
    
    .video-title {
        font-size: 12px;
        line-height: 1.3;
        margin-bottom: 4px;
        -webkit-line-clamp: 2;
    }
    
    .video-channel {
        font-size: 10px;
        color: #666;
        margin-bottom: 6px;
    }
    
    .video-stats {
        font-size: 9px;
        color: #888;
        margin-bottom: 6px;
    }
    
    .video-metrics {
        grid-template-columns: repeat(2, 1fr);
        gap: 6px;
        padding: 8px 0;
        margin-top: 8px;
    }
    
    .video-metrics .metric {
        padding: 6px;
        border-radius: 4px;
        background: #f8f9fa;
    }
    
    .video-metrics .metric-label {
        font-size: 9px;
        margin-bottom: 3px;
        line-height: 1.2;
        display: block;
    }
    
    .video-metrics .metric-value {
        font-size: 12px;
        font-weight: 600;
        line-height: 1.1;
    }
    
    .play-button {
        font-size: 1.8rem;
    }
    
    .youtube-text {
        font-size: 8px;
    }
}

/* Shadcn/ui Card 컴포넌트 스타일 */
.video-card {
    border-radius: var(--radius-lg);
    border: 1px solid hsl(var(--border));
    background-color: hsl(var(--card));
    color: hsl(var(--card-foreground));
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: var(--transition-normal);
    cursor: pointer;
    position: relative;
    max-width: 350px;
    width: 100%;
}

.video-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}

/* 플랫폼별 카드 스타일 */
.video-card.instagram-card {
    border-left: 4px solid #E4405F;
}

.video-card.youtube-card {
    border-left: 4px solid #FF0000;
}

/* 플랫폼 배지 스타일 */
.platform-badge {
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: bold;
    color: white;
}

.platform-badge.instagram-badge {
    background: linear-gradient(45deg, #E4405F, #F56040);
}

.platform-badge.youtube-badge {
    background: linear-gradient(45deg, #FF0000, #CC0000);
}

/* 플랫폼별 썸네일 오버레이 텍스트 */
.platform-text {
    font-size: 0.75rem;
    font-weight: bold;
    color: white;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.7);
}

/* 고성과 비디오 카드 - 세련된 노란색 테마 */
.video-card.high-performance,
.video-card.high-performance-video,
.video-analysis-card.high-performance-video {
    background: linear-gradient(135deg, hsl(45 93% 96%) 0%, hsl(45 93% 92%) 100%);
    border: 2px solid hsl(var(--high-performance-border));
    box-shadow: 0 4px 12px hsl(var(--high-performance) / 0.25);
    position: relative;
}

.video-card.high-performance:hover,
.video-card.high-performance-video:hover,
.video-analysis-card.high-performance-video:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px hsl(var(--high-performance) / 0.35);
}

/* 고성과 영상 표시 배지 - HTML 요소로 처리하므로 CSS ::before 제거 */
/* .video-card.high-performance-video::before,
.video-analysis-card.high-performance-video::before {
    content: "🔥 고성과";
    position: absolute;
    top: 10px;
    right: 10px;
    background: linear-gradient(135deg, #ffd700, #ffb700);
    color: #8b4513;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    z-index: 10;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
} */

/* 쇼츠 배지 스타일 */
.shorts-badge {
    position: absolute;
    top: 55px;
    right: 10px;
    background: linear-gradient(45deg, #ff6b6b, #ff8e8e);
    color: #000000;
    font-size: 12px;
    font-weight: bold;
    padding: 6px 12px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 3px 10px rgba(255, 107, 107, 0.3);
    z-index: 10;
    animation: shortsGlow 2s ease-in-out infinite alternate;
}

@keyframes shortsGlow {
    0% {
        box-shadow: 0 3px 10px rgba(255, 107, 107, 0.3);
    }
    100% {
        box-shadow: 0 3px 20px rgba(255, 107, 107, 0.6);
    }
}

.shorts-badge::before {
    content: '📹';
    margin-right: 4px;
}

/* 고성과 배지 스타일 */
.high-performance-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    background: linear-gradient(45deg, #ffd700, #ffed4e);
    color: #000000;
    font-size: 12px;
    font-weight: bold;
    padding: 6px 12px;
    border-radius: 20px;
    letter-spacing: 0.5px;
    box-shadow: 0 3px 10px rgba(255, 215, 0, 0.3);
    z-index: 10;
    animation: performanceGlow 2s ease-in-out infinite alternate;
}

@keyframes performanceGlow {
    0% {
        box-shadow: 0 3px 10px rgba(255, 215, 0, 0.3);
    }
    100% {
        box-shadow: 0 3px 20px rgba(255, 215, 0, 0.6);
    }
}

.video-thumbnail-container {
    position: relative;
    width: 100%;
    padding-top: 56.25%; /* 16:9 aspect ratio (9/16 = 0.5625) */
    cursor: pointer;
    border-radius: 10px;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.video-thumbnail-container:hover {
    transform: scale(1.02);
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}

.video-thumbnail {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transition: filter 0.3s ease;
    display: block !important;
    border-radius: 10px;
    aspect-ratio: 16/9 !important;
}

.video-thumbnail-container:hover .video-thumbnail {
    filter: brightness(0.8);
}

.thumbnail-overlay {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    border-radius: 10px;
}

.video-thumbnail-container:hover .thumbnail-overlay {
    opacity: 1;
}

.play-button {
    font-size: 3rem;
    color: #ffffff;
    margin-bottom: 10px;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
    animation: pulse 2s infinite;
}

.youtube-text {
    color: #ffffff;
    font-size: 1.2rem;
    font-weight: 600;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

.video-info {
    padding: 15px;
}

.video-title {
    font-size: 14px;
    font-weight: 600;
    color: #333;
    margin-bottom: 8px;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.video-channel {
    color: #666;
    font-size: 12px;
    margin-bottom: 10px;
}

.video-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    padding: 20px 0;
    border-top: 1px solid #e0e0e0;
    margin-top: 15px;
}

.stat {
    background: #f8f9fa;
    padding: 12px;
    border-radius: 8px;
    text-align: center;
    transition: background-color 0.2s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.stat:hover {
    background: #e9ecef;
}

.stat-label {
    display: block;
    font-size: 12px;
    color: white;
    margin-bottom: 8px;
    font-weight: 500;
    line-height: 1.2;
    text-align: center;
}

.stat-value {
    display: block;
    font-weight: 700;
    color: #495057;
    font-size: 12px; /* 18px의 70%인 12.6px를 반올림 */
    line-height: 1.1;
    text-align: center;
}

.video-metrics {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    padding: 20px 0;
    border-top: 1px solid #e0e0e0;
    margin-top: 15px;
}

.video-actions {
    display: flex;
    gap: 10px;
    padding-top: 12px;
    border-top: 1px solid #e0e0e0;
    margin-top: 12px;
}

.thumbnail-download-btn {
    flex: 1;
    padding: 10px 15px;
    background: linear-gradient(135deg, #ff6b6b 0%, #ff5252 100%);
    color: #000000;
    border: none;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    position: relative;
    overflow: hidden;
}

.thumbnail-download-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s;
}

.thumbnail-download-btn:hover::before {
    left: 100%;
}

.thumbnail-download-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(255, 107, 107, 0.4);
}

.thumbnail-download-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(255, 107, 107, 0.3);
}

.thumbnail-download-btn:disabled {
    background: #ccc;
    cursor: not-allowed;
    transform: none;
    opacity: 0.6;
}

.thumbnail-download-btn:disabled:hover {
    transform: none;
    box-shadow: none;
}

.thumbnail-download-btn:disabled::before {
    display: none;
}

.video-metrics .metric {
    background: #f8f9fa;
    padding: 12px;
    border-radius: 8px;
    text-align: center;
    transition: background-color 0.2s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.video-metrics .metric:hover {
    background: #e9ecef;
}

.video-metrics .metric-label {
    display: block;
    font-size: 12px;
    color: #6c757d;
    margin-bottom: 8px;
    font-weight: 500;
    line-height: 1.2;
    text-align: center;
}

.video-metrics .metric-value {
    display: block;
    font-weight: 700;
    color: #495057;
    font-size: 18px;
    line-height: 1.1;
    text-align: center;
}

.video-metrics .metric-value.high {
    color: #4caf50;
}

.empty-state {
    text-align: center;
    padding: 100px 20px;
    color: #000000;
}

.empty-icon {
    font-size: 4rem;
    margin-bottom: 20px;
}

.empty-state h3 {
    font-size: 1.5rem;
    margin-bottom: 10px;
}

/* Shadcn/ui Dialog/Modal 컴포넌트 스타일 */
.modal {
    position: fixed;
    inset: 0;
    z-index: 50;
    background: hsl(var(--background) / 0.8);
    backdrop-filter: blur(4px);
    data-state: open;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn var(--transition-normal);
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.modal-content {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 32rem;
    max-height: calc(100vh - 2rem);
    border: 1px solid hsl(var(--border));
    background-color: hsl(var(--background));
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    animation: slideIn var(--transition-normal);
    overflow: hidden;
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translate(-50%, -48%) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

.modal-header {
    display: flex;
    flex-direction: column;
    space-y: 0.375rem;
    text-align: center;
    padding: 1.5rem;
    border-bottom: 1px solid hsl(var(--border));
    position: relative;
}

.modal-header h3 {
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.025em;
    color: hsl(var(--foreground));
    margin: 0;
}

.modal-close {
    position: absolute;
    right: 1rem;
    top: 1rem;
    border-radius: var(--radius-sm);
    opacity: 0.7;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0.25rem;
    transition: var(--transition-fast);
    color: hsl(var(--muted-foreground));
}

.modal-close:hover {
    opacity: 1;
    background-color: hsl(var(--accent));
}

.modal-close:focus {
    outline: none;
    ring: 2px solid hsl(var(--ring));
    ring-offset: 2px;
}

.modal-body {
    padding: 1.5rem;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}

/* 모달 스크롤바 스타일 개선 */
.modal-body::-webkit-scrollbar {
    width: 8px;
}

.modal-body::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

.modal-body::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 4px;
}

.modal-body::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

.modal-section {
    margin-bottom: 25px;
}

.modal-section h4 {
    color: #333;
    font-size: 1.2rem;
    margin-bottom: 10px;
    border-bottom: 2px solid #667eea;
    padding-bottom: 5px;
}

.modal-description {
    background: #f8f9fa;
    padding: 15px;
    border-radius: 10px;
    color: #666;
    line-height: 1.6;
    white-space: pre-wrap;
}

.modal-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
}

.modal-stat {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #000000;
    padding: 15px;
    border-radius: 10px;
    text-align: center;
}

.modal-stat-label {
    display: block;
    font-size: 12px;
    opacity: 0.9;
    margin-bottom: 5px;
}

.modal-stat-value {
    display: block;
    font-size: 18px;
    font-weight: 700;
}

.modal-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-top: 25px;
    flex-wrap: wrap;
}

.modal-btn {
    padding: 12px 25px;
    border: none;
    border-radius: 25px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
}

.modal-btn-primary {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    color: white;
    border: none;
}

.modal-btn-secondary {
    background: var(--bg-primary);
    color: var(--primary-color);
    border: 1px solid var(--primary-color);
}

.modal-btn-success {
    background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%);
    color: #000000;
}

.modal-btn-warning {
    background: linear-gradient(135deg, #ff9800 0%, #f57c00 100%);
    color: #000000;
}

.modal-btn-info {
    background: linear-gradient(135deg, #2196F3 0%, #1976D2 100%);
    color: #000000;
}

.modal-btn:hover {
    transform: translateY(-2px);
}

/* 알림 애니메이션 */
@keyframes slideIn {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideOut {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(100%);
        opacity: 0;
    }
}

/* 반응형 디자인 - 점진적 최적화 */

/* 태블릿 가로/세로 모드 */
@media (max-width: 1024px) and (min-width: 769px) {
    body {
        font-size: 14px;
        line-height: 1.6;
    }
    
    .container {
        padding: 12px;
    }
    
    .main-content {
        padding: 12px !important;
    }
    
    .title {
        font-size: 1.8rem;
        gap: 10px;
    }
    
    .youtube-logo {
        width: 40px;
        height: 40px;
    }
    
    .search-section,
    .results-section {
        padding: 24px 20px;
        border-radius: 18px;
    }
}

/* 모바일 큰 화면 (가로 모드 포함) */
@media (max-width: 768px) and (min-width: 481px) {
    body {
        font-size: 13px !important;
        line-height: 1.5 !important;
    }
    
    .container {
        padding: 10px !important;
    }
    
    .main-content {
        padding: 10px !important;
        margin-left: 0 !important;
        max-width: 100% !important;
    }
    
    .title {
        font-size: 1.7rem !important;
        flex-direction: column !important;
        gap: 9px !important;
        margin-bottom: 1.2rem !important;
    }
    
    .youtube-logo {
        width: 36px !important;
        height: 36px !important;
    }
    
    .search-section,
    .results-section {
        padding: 22px 18px !important;
        margin-bottom: 22px !important;
        border-radius: 17px !important;
    }
}

/* 모바일 작은 화면 - 최대 최적화 */
@media (max-width: 480px) {
    body {
        font-size: 13px !important;
        line-height: 1.5 !important;
        background: white !important;
        background-color: white !important;
    }

    /* 480px 이하에서도 모든 배경 흰색 통일 */
    html,
    html * {
        background: white !important;
    }

    /* 텍스트 가독성 보장 */
    body,
    p, h1, h2, h3, h4, h5, h6 {
        color: #000 !important;
    }
    
    .container {
        padding: 8px !important;
        min-height: 100vh !important;
    }
    
    .main-content {
        padding: 8px !important;
        margin-left: 0 !important;
        max-width: 100% !important;
    }
    
    .title {
        font-size: 1.6rem !important;
        flex-direction: column !important;
        gap: 8px !important;
        margin-bottom: 1rem !important;
    }
    
    .youtube-logo {
        width: 32px !important;
        height: 32px !important;
    }
    
    .search-section {
        padding: 20px 16px;
        margin-bottom: 20px;
        border-radius: 16px;
    }
    
    .search-box {
        flex-direction: column;
        gap: 10px;
    }
    
    .search-input,
    .search-button,
    .filter-toggle {
        width: 100%;
        padding: 12px 16px;
        font-size: 14px;
    }
    
    .advanced-filters {
        margin-top: 10px;
        padding: 16px;
        border-radius: 12px;
    }
    
    .results-section {
        padding: 16px 12px;
        border-radius: 16px;
        margin-bottom: 20px;
    }
    
    .results-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
        margin-bottom: 20px;
    }
    
    .results-header h2 {
        font-size: 1.4rem;
    }
    
    .results-actions {
        width: 100%;
        justify-content: space-between;
    }
}
    
    .filter-row {
        flex-direction: column;
        gap: 10px;
    }
    
    .filter-group {
        min-width: auto;
    }
    
    .results-header {
        flex-direction: column;
        gap: 20px;
        align-items: stretch;
    }
    
    .results-actions {
        justify-content: center;
        flex-direction: column;
        gap: 10px;
    }
    
    .sort-select {
        width: 100%;
        text-align: center;
    }
    
    .results-grid {
        grid-template-columns: 1fr;
    }
    
    .modal-content {
        width: 95%;
        margin: 20px;
    }
    
    .modal-stats {
        grid-template-columns: 1fr;
    }

    .modal-actions {
        flex-direction: column;
        gap: 10px;
    }

    .modal-btn {
        width: 100%;
        padding: 15px 20px;
        font-size: 16px;
    }

    .video-actions {
        flex-direction: column;
    }

    .thumbnail-download-btn {
        width: 100%;
        padding: 12px 15px;
        font-size: 16px;
    }
    
    .video-thumbnail-container {
        margin-bottom: 10px;
        padding-top: 56.25% !important; /* 16:9 비율 강제 적용 */
    }
    
    .play-button {
        font-size: 2rem;
    }
    
    .youtube-text {
        font-size: 1rem;
    }
    
    .table-thumbnail {
        width: 80px;
        height: 60px;
    }
    
    .notification {
        right: 10px;
        left: 10px;
        max-width: none;
        transform: translateY(-100px);
    }

    .notification.show {
        transform: translateY(0);
    }
} 

/* 페이지네이션 스타일 */
.pagination-container {
    margin-top: 40px;
    padding-top: 30px;
    border-top: 2px solid #f0f0f0;
}

.pagination-info {
    text-align: center;
    margin-bottom: 20px;
    color: #666;
    font-size: 14px;
    font-weight: 500;
}

.pagination-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.pagination-btn {
    padding: 10px 16px;
    background: white;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    color: #666;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.3s;
    min-width: 80px;
}

.pagination-btn:hover:not(:disabled) {
    border-color: #667eea;
    color: #667eea;
    background: #f8f9ff;
}

.pagination-btn:disabled {
    background: #f5f5f5;
    border-color: #e0e0e0;
    color: #ccc;
    cursor: not-allowed;
}

.pagination-numbers {
    display: flex;
    gap: 5px;
    margin: 0 10px;
}

.pagination-num {
    padding: 10px 14px;
    background: white;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    color: #666;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.3s;
    min-width: 44px;
}

.pagination-num:hover {
    border-color: #667eea;
    color: #667eea;
    background: #f8f9ff;
}

.pagination-num.active {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-color: #667eea;
    color: #000000;
}

.pagination-num.active:hover {
    background: linear-gradient(135deg, #5a6fd8 0%, #6a4190 100%);
}

/* 반응형 페이지네이션 */
@media (max-width: 768px) {
    .pagination-controls {
        flex-direction: column;
        gap: 15px;
    }
    
    .pagination-numbers {
        margin: 0;
        gap: 8px;
    }
    
    .pagination-btn {
        min-width: 60px;
        padding: 8px 12px;
        font-size: 12px;
    }
    
    .pagination-num {
        min-width: 36px;
        padding: 8px 10px;
        font-size: 12px;
    }
    
    .pagination-info {
        font-size: 12px;
    }
}

/* 리스트 테이블 스타일 */
.results-table-container {
    background: white;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(0,0,0,0.1);
    margin-top: 20px;
}

.table-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 15px 20px;
    background: #f8f9fa;
    border-bottom: 1px solid #e0e0e0;
}

.table-action-btn {
    padding: 8px 16px;
    background: #28a745;
    color: #000000;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.3s;
}

.table-action-btn:hover {
    background: #218838;
}

.table-count {
    margin-left: auto;
    font-weight: 600;
    color: #333;
}

.results-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.results-table th {
    background: linear-gradient(135deg, #2d5016 0%, #1e3a0f 100%);
    color: #ffffff;
    padding: 15px 10px;
    text-align: left;
    font-weight: 600;
    border-bottom: 2px solid #4CAF50;
}

.results-table th:first-child {
    width: 50px;
    text-align: center;
}

.results-table th:nth-child(2) {
    width: 150px;
}

.results-table th:nth-child(3) {
    width: 300px;
}

.results-table th:nth-child(4),
.results-table th:nth-child(5) {
    width: 120px;
    text-align: center;
}

.results-table th:nth-child(6) {
    width: 120px;
    text-align: center;
}

.results-table th:nth-child(7) {
    width: 100px;
    text-align: center;
}

.results-table th:nth-child(8) {
    width: 100px;
    text-align: center;
}

.results-table th:nth-child(9) {
    width: 120px;
    text-align: center;
}

.results-table th:last-child {
    width: 120px;
    text-align: center;
}

.results-table td {
    padding: 12px 10px;
    border-bottom: 1px solid #e0e0e0;
    vertical-align: middle;
    height: 80px;
    max-height: 80px;
    border-right: 1px solid #f0f0f0;
}

.results-table td:last-child {
    border-right: none;
}

.results-table tbody tr:hover {
    background-color: #f8f9fa;
}

.results-table tbody tr:nth-child(even) {
    background-color: #fafafa;
}

.results-table tbody tr:nth-child(even):hover {
    background-color: #f0f0f0;
}

/* 체크박스 스타일 */
.table-checkbox {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

/* 썸네일 스타일 */
.table-thumbnail {
    width: 120px !important;
    height: 90px !important; /* 16:9 비율에 맞춘 정확한 높이 */
    aspect-ratio: 16/9 !important;
    object-fit: cover !important;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 2px solid transparent;
    position: relative;
    display: block !important;
    /* 터치 액션 개선 */
    touch-action: manipulation;
    /* 사용자 선택 방지 */
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

.table-thumbnail:hover {
    transform: scale(1.05);
    border-color: #ff0000;
    box-shadow: 0 4px 12px rgba(255, 0, 0, 0.3);
}

.table-thumbnail:active {
    transform: scale(1.02);
    box-shadow: 0 2px 6px rgba(255, 0, 0, 0.4);
}

/* 썸네일 클릭 가능 표시 */
.table-thumbnail::after {
    content: "▶";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.7);
    color: #000000;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.table-thumbnail:hover::after {
    opacity: 1;
}

/* 제목 스타일 */
.table-title {
    font-weight: 500;
    color: #333;
    line-height: 1.4;
    max-width: 280px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: all 0.3s ease;
    position: relative;
    /* 터치 액션 개선 */
    touch-action: manipulation;
    /* 사용자 선택 방지 */
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

.table-title:hover {
    color: #ff0000;
    text-decoration: underline;
    transform: translateX(2px);
}

.table-title:active {
    color: #cc0000;
    transform: translateX(1px);
}

/* 제목 클릭 가능 표시 */
.table-title::before {
    content: "🔗";
    position: absolute;
    left: -20px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 12px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.table-title:hover::before {
    opacity: 1;
}

/* 숫자 데이터 스타일 */
.table-number {
    text-align: center;
    font-weight: 600;
    color: #2d5016;
}

/* 날짜 스타일 */
.table-date {
    text-align: center;
    color: #666;
    font-size: 13px;
}



/* 썸네일 다운로드 버튼 스타일 */
.table-download-btn {
    padding: 8px 12px;
    background: linear-gradient(135deg, #ff6b6b 0%, #ff5252 100%);
    color: #000000;
    border: none;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 100%;
    position: relative;
    overflow: hidden;
}

.table-download-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s;
}

.table-download-btn:hover::before {
    left: 100%;
}

.table-download-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(255, 107, 107, 0.3);
}

.table-download-btn:active {
    transform: translateY(0);
    box-shadow: 0 1px 3px rgba(255, 107, 107, 0.3);
}

.table-download-btn:disabled {
    background: #ccc;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
    opacity: 0.6;
}

.table-download-btn:disabled::before {
    display: none;
}

/* 셀 헤더 스타일 */
.cell-header {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: #f8f9fa;
    border-bottom: 1px solid #e0e0e0;
    font-weight: 600;
    font-size: 13px;
    color: #333;
}

.sort-arrows {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.arrow-up, .arrow-down {
    font-size: 8px;
    color: #999;
    line-height: 1;
}

/* 셀 콘텐츠 스타일 */
.cell-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 12px 8px;
    flex: 1;
    text-align: center;
}





/* 반응형 테이블 */
@media (max-width: 768px) {
    .results-table-container {
        overflow-x: auto;
    }
    
    .results-table {
        min-width: 1000px;
        font-size: 12px;
    }
    
    .results-table th,
    .results-table td {
        padding: 8px 6px;
    }
    
    .table-thumbnail {
        width: 60px !important;
        height: 34px !important; /* 16:9 비율에 맞게 조정 (60 * 9/16 = 33.75 ≈ 34) */
        aspect-ratio: 16/9 !important;
        object-fit: cover !important;
        /* 모바일에서 터치 영역 확대 */
        min-width: 60px;
        min-height: 34px;
        /* 터치 액션 개선 */
        touch-action: manipulation;
        display: block !important;
    }
    
    .table-title {
        max-width: 200px;
    }
    
    .table-actions {
        flex-wrap: wrap;
        gap: 8px;
    }
    
    .table-action-btn {
        padding: 6px 12px;
        font-size: 12px;
    }
    
    .table-download-btn {
        padding: 10px 12px;
        font-size: 14px;
        min-height: 44px; /* 터치 친화적 크기 */
        min-width: 80px;
    }
}

/* 성과도와 기여도 색상 스타일 */
.performance-excellent {
    color: #007bff;
    font-weight: bold;
}

.performance-great {
    color: #007bff;
    font-weight: bold;
}

.performance-good {
    color: #28a745;
    font-weight: bold;
}

.performance-normal {
    color: #000000;
    font-weight: bold;
}

.performance-bad {
    color: #dc3545;
    font-weight: bold;
}

.performance-worst {
    color: #dc3545;
    font-weight: bold;
} 

/* 테이블용 성과도/기여도 스타일 */
.performance-score, .contribution-score {
    text-align: center;
    line-height: 1.3;
    font-size: 14px;
    font-weight: bold;
    padding: 4px 2px;
}

.performance-score small, .contribution-score small {
    font-size: 11px;
    font-weight: normal;
    opacity: 0.8;
    display: block;
    margin-top: 2px;
}

.performance-score.excellent, .contribution-score.excellent {
    color: #007bff;
}

.performance-score.great, .contribution-score.great {
    color: #17a2b8;
}

.performance-score.good, .contribution-score.good {
    color: #28a745;
}

.performance-score.normal, .contribution-score.normal {
    color: #6c757d;
}

.performance-score.bad, .contribution-score.bad {
    color: #dc3545;
}

.performance-score.worst, .contribution-score.worst {
    color: #dc3545;
}

/* 커스텀 툴팁 스타일 */
.tooltip-container {
    position: relative;
    display: inline-block;
    cursor: help;
}

.tooltip-container::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 125%;
    left: 50%;
    transform: translateX(-50%);
    background-color: #333;
    color: white;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: normal;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
    z-index: 1000;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

.tooltip-container::before {
    content: '';
    position: absolute;
    bottom: 117%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #333;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
    z-index: 1000;
}

.tooltip-container:hover::after,
.tooltip-container:hover::before {
    opacity: 1;
    visibility: visible;
}

/* 왼쪽 사이드바 네비게이션 */
/* Shadcn/ui Sidebar Navigation */
.sidebar-navigation {
    position: fixed;
    left: 0;
    top: 0;
    width: 280px;
    height: 100vh;
    background: hsl(var(--background));
    border-right: 1px solid hsl(var(--border));
    box-shadow: var(--shadow-lg);
    z-index: 1000;
    transition: var(--transition-normal);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
}

.sidebar-navigation.collapsed {
    transform: translateX(-220px);
    width: 60px;
}

.sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.5rem;
    border-bottom: 1px solid hsl(var(--border));
    background: hsl(var(--primary));
    color: hsl(var(--primary-foreground));
    position: relative;
}

.sidebar-logo {
    display: flex;
    align-items: center;
    gap: 12px;
}

.sidebar-logo-img {
    width: 32px;
    height: 32px;
    border-radius: 6px;
}

.sidebar-title {
    font-size: 18px;
    font-weight: 700;
    white-space: nowrap;
}

.sidebar-title-link {
    text-decoration: none;
    color: inherit;
    display: inline-block;
}

.sidebar-title-link:hover {
    text-decoration: none;
    color: inherit;
    opacity: 0.8;
}

.sidebar-title-link:hover .sidebar-title {
    opacity: 0.8;
}

.sidebar-toggle {
    background: none;
    border: none;
    color: white;
    font-size: 20px;
    cursor: pointer;
    padding: 5px;
    border-radius: 5px;
    transition: background 0.2s ease;
}

.sidebar-toggle:hover {
    background: rgba(255, 255, 255, 0.2);
}

.sidebar-menu {
    flex: 1;
    padding: 20px 0;
    overflow-y: auto;
}

.sidebar-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: calc(100% - 1.5rem);
    padding: 0.875rem 1rem;
    margin: 0.125rem 0.75rem;
    border: none;
    background: transparent;
    cursor: pointer;
    transition: var(--transition-normal);
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-secondary);
    text-align: left;
    position: relative;
    border-radius: var(--radius-lg);
    text-decoration: none;
}

.sidebar-item:hover {
    background: var(--primary-light);
    color: var(--primary-color);
    transform: translateX(0.25rem);
    box-shadow: var(--shadow-sm);
}

.sidebar-item.active {
    background: hsl(var(--secondary));
    color: hsl(var(--foreground));
    font-weight: 600;
    box-shadow: var(--shadow-md);
    border-left: 3px solid hsl(var(--primary));
}

.sidebar-item.active::before {
    display: none;
}

/* 활성 상태에서 텍스트와 아이콘 색상 명시적 지정 */
.sidebar-item.active .sidebar-text,
.sidebar-item.active .sidebar-icon {
    color: hsl(var(--foreground)) !important;
}

/* 호버 상태에서도 텍스트 색상 유지 */
.sidebar-item:hover .sidebar-text,
.sidebar-item:hover .sidebar-icon {
    color: hsl(var(--foreground));
}

.sidebar-icon {
    font-size: 18px;
    width: 24px;
    text-align: center;
    flex-shrink: 0;
}

.sidebar-text {
    white-space: nowrap;
    transition: opacity 0.3s ease;
}

.sidebar-navigation.collapsed .sidebar-text {
    opacity: 0;
}

.sidebar-navigation.collapsed .sidebar-title {
    opacity: 0;
}

.sidebar-divider {
    height: 1px;
    background: rgba(0, 0, 0, 0.1);
    margin: 10px 20px;
}

/* ========================================
   황금 도구들 페이지 스타일
======================================== */

.golden-tools-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

.golden-tools-intro {
    text-align: center;
    padding: 40px 20px;
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.1), rgba(255, 193, 7, 0.05));
    border-radius: 16px;
    margin-bottom: 40px;
    border: 1px solid rgba(255, 215, 0, 0.2);
}

.intro-icon {
    font-size: 4rem;
    margin-bottom: 20px;
    animation: sparkle 2s ease-in-out infinite;
}

.golden-tools-intro h2 {
    color: #333;
    font-size: 2.2rem;
    font-weight: 700;
    margin-bottom: 16px;
    background: linear-gradient(135deg, #ffd700, #ffb300);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.golden-tools-intro p {
    color: #666;
    font-size: 1.1rem;
    line-height: 1.6;
    max-width: 600px;
    margin: 0 auto;
}

.tools-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
    gap: 30px;
    margin-bottom: 40px;
}

.tool-category {
    background: #ffffff;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.category-title {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 1.3rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 2px solid rgba(255, 215, 0, 0.2);
}

.category-icon {
    font-size: 1.5rem;
}

.tool-cards {
    display: grid;
    gap: 16px;
}

.tool-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    background: linear-gradient(135deg, #f8f9fa, #ffffff);
    border: 2px solid transparent;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.tool-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 215, 0, 0.1), transparent);
    transition: left 0.5s ease;
}

.tool-card:hover::before {
    left: 100%;
}

.tool-card:hover {
    border-color: rgba(255, 215, 0, 0.5);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(255, 215, 0, 0.15);
}

.tool-card-icon {
    font-size: 2.5rem;
    flex-shrink: 0;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
}

.tool-card-content {
    flex: 1;
}

.tool-card h4 {
    font-size: 1.2rem;
    font-weight: 600;
    color: #333;
    margin: 0 0 8px 0;
}

.tool-card p {
    font-size: 0.95rem;
    color: #666;
    margin: 0 0 12px 0;
    line-height: 1.4;
}

.tool-badge {
    display: inline-block;
    padding: 4px 12px;
    background: linear-gradient(135deg, #ffd700, #ffb300);
    color: #333;
    font-size: 0.8rem;
    font-weight: 600;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.tools-footer {
    text-align: center;
    padding: 30px 20px;
    background: rgba(255, 215, 0, 0.05);
    border-radius: 12px;
    border: 1px solid rgba(255, 215, 0, 0.1);
}

.footer-notice p {
    color: #666;
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 8px 0;
}

.footer-notice strong {
    color: #333;
    font-weight: 600;
}

/* 황금 도구 애니메이션 */
@keyframes sparkle {
    0%, 100% { 
        opacity: 1;
        transform: scale(1);
    }
    50% { 
        opacity: 0.7;
        transform: scale(1.1);
    }
}

/* 황금 도구들 페이지 반응형 */
@media (max-width: 1200px) {
    .tools-grid {
        grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
        gap: 25px;
    }
}

@media (max-width: 1024px) {
    .tools-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .golden-tools-intro h2 {
        font-size: 1.8rem;
    }
    
    .tool-card {
        padding: 16px;
    }
    
    .tool-card-icon {
        font-size: 2rem;
    }
}

@media (max-width: 768px) {
    .golden-tools-container {
        padding: 10px;
    }
    
    .golden-tools-intro {
        padding: 30px 15px;
    }
    
    .golden-tools-intro h2 {
        font-size: 1.6rem;
    }
    
    .intro-icon {
        font-size: 3rem;
    }
    
    .tool-category {
        padding: 16px;
    }
    
    .category-title {
        font-size: 1.1rem;
    }
    
    .tools-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .tool-card {
        flex-direction: column;
        text-align: center;
        gap: 12px;
        padding: 20px 16px;
    }
    
    .tool-card-icon {
        font-size: 2.5rem;
    }
}

@media (max-width: 480px) {
    .tools-grid {
        gap: 15px;
    }
    
    .tool-category {
        padding: 12px;
    }
    
    .tool-card {
        padding: 16px 12px;
    }
    
    .golden-tools-intro {
        padding: 20px 10px;
    }
    
    .golden-tools-intro h2 {
        font-size: 1.4rem;
    }
}

/* 메인 컨텐츠 영역 */
.main-content {
    flex: 1;
    margin-left: 280px;
    padding: 0;
    transition: var(--transition-normal);
    max-width: calc(100% - 280px);
    position: relative;
    overflow-x: hidden;
    overflow-y: auto;
    min-height: 100vh;
    box-sizing: border-box;
    background: transparent;
}

/* 모바일 메뉴 버튼 */
.mobile-menu-btn {
    display: none;
    position: fixed;
    top: 20px;
    left: 20px;
    z-index: 1100; /* 사이드바 위 레이어 */
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border: none;
    border-radius: 10px;
    padding: 10px;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.mobile-menu-btn:hover {
    background: rgba(102, 126, 234, 0.1);
    transform: scale(1.05);
}

.menu-icon {
    font-size: 20px;
    color: #667eea;
    font-weight: bold;
}

.sidebar-navigation.collapsed + .main-content {
    margin-left: 60px;
    max-width: calc(100% - 60px);
}

.content-header {
    text-align: center;
    color: #000000;
    margin-bottom: 40px;
}

.content-title {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 10px;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
    cursor: pointer;
    transition: transform 0.3s ease;
    color: #000000;
}

.content-title:hover {
    transform: scale(1.02);
}

.content-subtitle {
    font-size: 1.1rem;
    opacity: 0.9;
    font-weight: 300;
}

/* 콘텐츠 섹션 스타일 */
.content-section {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto !important; /* 상단 마진 완전 제거 */
    padding-top: 0 !important; /* 상단 공백 제거 */
    overflow: visible;
    position: relative;
    /* 기본 padding 제거 - 랜딩 섹션만 인라인 스타일로 padding 적용 */
    padding: 0;
    box-sizing: border-box;
}

/* 모든 섹션의 상단 여백 일괄 제거 */
.content-section:first-child,
#channelAnalysisSection,
#videoAnalysisSection,
#channelCompareSection,
#myChannelAnalysisSection,
#thumbnailPickerSection,
#youtubeArsenal,
#loginSection,
#membershipSection,
#myPageSection {
    margin-top: 0 !important;
    padding-top: 0 !important; /* 기능 섹션 상단 여백 제거 */
}

/* 기능 섹션 모드에서는 메인 컨텐츠 상단 여백 완전 제거 */
body.functional-area .main-content,
body[data-section]:not([data-section=""]) .main-content {
    padding-top: 0 !important;
}

body.functional-area .main-content > .content-section,
body[data-section]:not([data-section=""]) .main-content > .content-section {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* 랜딩 섹션에만 padding 적용 */
#landingSection {
    padding: 0 1.5rem 2rem;
}

/* 기능 영역에서는 랜딩 섹션 완전히 숨김 */
body[data-section]:not([data-section=""]) #landingSection,
body.functional-area #landingSection {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* 외부 페이지(video-planning.html, golden-tools.html)에서 content-section 강제 표시 */
body[data-page="external"] .content-section {
    display: block !important;
}

/* 로그인 섹션 스타일 */
.login-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 60vh;
    padding: 40px 20px;
}

.login-card {
    background: var(--bg-primary);
    border-radius: var(--radius-xl);
    padding: 2.5rem;
    box-shadow: var(--shadow-xl);
    text-align: center;
    max-width: 500px;
    width: 100%;
    border: 1px solid var(--gray-200);
    backdrop-filter: blur(16px);
}

.login-card h2 {
    font-size: 1.75rem;
    margin-bottom: 0.5rem;
    color: var(--text-primary);
    font-weight: 700;
    letter-spacing: -0.025em;
}

.login-card p {
    color: var(--text-secondary);
    margin-bottom: 2rem;
    font-size: 1rem;
    line-height: 1.6;
}

.login-placeholder {
    padding: 40px 20px;
    border: 2px dashed #e0e0e0;
    border-radius: 15px;
    background: #f8f9fa;
}

.placeholder-icon {
    font-size: 4rem;
    margin-bottom: 20px;
}

.login-placeholder h3 {
    font-size: 1.5rem;
    margin-bottom: 10px;
    color: #333;
}

.login-placeholder p {
    color: #666;
    font-size: 1rem;
}

/* 멤버십 섹션 스타일 */
.membership-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 60vh;
    padding: 40px 20px;
}

.membership-card {
    background: white;
    border-radius: 20px;
    padding: 40px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    text-align: center;
    max-width: 500px;
    width: 100%;
}

.membership-card h2 {
    font-size: 2rem;
    margin-bottom: 10px;
    color: #333;
}

.membership-card p {
    color: #666;
    margin-bottom: 30px;
    font-size: 1.1rem;
}

.membership-placeholder {
    padding: 40px 20px;
    border: 2px dashed #e0e0e0;
    border-radius: 15px;
    background: #f8f9fa;
}

.membership-placeholder h3 {
    font-size: 1.5rem;
    margin-bottom: 10px;
    color: #333;
}

.membership-placeholder p {
    color: #666;
    font-size: 1rem;
}

/* 모바일 반응형 */
@media (max-width: 768px) {
    .sidebar-navigation {
        width: 100%;
        transform: translateX(-100%);
        transition: transform 0.3s ease;
        z-index: 1001;
    }
    
    .sidebar-navigation.open {
        transform: translateX(0);
    }
    
    .sidebar-navigation.collapsed {
        transform: translateX(-100%);
        width: 100%;
    }
    
    .main-content {
        margin-left: 0;
        max-width: 100%;
        padding: 10px;
        min-height: calc(100vh - 60px); /* 모바일 헤더 고려 */
    }
    
    .sidebar-navigation.collapsed + .main-content {
        margin-left: 0;
        max-width: 100%;
    }
    
    .content-title {
        font-size: 2rem;
    }
    
    .mobile-menu-btn {
        display: block;
        position: fixed;
        top: 20px;
        left: 20px;
        z-index: 1100;
        background: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(10px);
        border: none;
        border-radius: 10px;
        padding: 12px;
        cursor: pointer;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
        transition: all 0.3s ease;
        width: 48px;
        height: 48px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .mobile-menu-btn:hover {
        background: rgba(102, 126, 234, 0.1);
        transform: scale(1.05);
    }
    
    .sidebar-toggle {
        display: none !important; /* 데스크톱 토글 버튼 숨기기 */
    }
    
    .login-card,
    .membership-card {
        padding: 30px 20px;
        margin: 20px;
    }
    
    .login-card h2,
    .membership-card h2 {
        font-size: 1.5rem;
    }
} 

/* 로그인 폼 스타일 */
.login-form {
    margin-top: 30px;
}

.login-methods {
    margin-bottom: 30px;
}

.kakao-login-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    width: 100%;
    padding: 1rem 1.5rem;
    background: #FEE500;
    border: none;
    border-radius: var(--radius-lg);
    font-size: 1rem;
    font-weight: 600;
    color: #191919;
    cursor: pointer;
    transition: var(--transition-normal);
    box-shadow: var(--shadow-md);
    font-family: inherit;
}

.kakao-login-btn:hover {
    background: #FDD835;
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.kakao-login-btn:active {
    transform: translateY(0);
}

.kakao-icon {
    width: 20px;
    height: 20px;
    object-fit: contain;
}

.login-divider {
    position: relative;
    text-align: center;
    margin: 30px 0;
}

.login-divider::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: #e0e0e0;
}

.login-divider span {
    background: white;
    padding: 0 15px;
    color: #666;
    font-size: 14px;
} 

/* 구글 로그인 버튼 스타일 */
.google-login-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 15px 20px;
    background: #ffffff;
    border: 1px solid #dadce0;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 600;
    color: #3c4043;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    margin-top: 15px;
}

.google-login-btn:hover {
    background: #f8f9fa;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.google-login-btn:active {
    transform: translateY(0);
}

.google-icon {
    width: 20px;
    height: 20px;
    object-fit: contain;
}

/* 사용자 메뉴 스타일 */
.user-menu {
    background: white;
    border-radius: 12px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
    padding: 0;
    min-width: 200px;
    overflow: hidden;
    animation: slideIn 0.2s ease-out;
}

.user-menu-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #000000;
    padding: 15px 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.user-menu-icon {
    font-size: 18px;
}

.user-menu-name {
    font-weight: 600;
    font-size: 14px;
}

.user-menu-actions {
    padding: 10px 0;
}

.user-menu-item {
    width: 100%;
    padding: 12px 20px;
    border: none;
    background: none;
    text-align: left;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: #333;
    transition: background-color 0.2s;
}

.user-menu-item:hover {
    background-color: #f8f9fa;
}

.user-menu-item:active {
    background-color: #e9ecef;
}

.menu-icon {
    font-size: 16px;
    width: 20px;
    text-align: center;
}

/* ==== 벤치마킹 섹션 스타일 ==== */
.benchmarking-section {
    background: white;
    border-radius: 16px;
    padding: 30px;
    margin: 0 0 30px 0; /* 상단 마진 제거, 하단만 유지 */
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
    border: 1px solid #e1e5e9;
}

.benchmarking-section .section-header {
    text-align: center;
    margin-bottom: 30px;
}

.benchmarking-section .section-header h2 {
    font-size: 2rem;
    font-weight: bold;
    color: #2d3748;
    margin-bottom: 10px;
}

.benchmarking-section .section-description {
    color: #718096;
    font-size: 1.1rem;
    line-height: 1.6;
}

/* 주제 선택 스타일 */
.topic-selection {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 30px;
    padding: 20px;
    background: #f8fafc;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
}

.topic-selection label {
    font-weight: 600;
    color: #2d3748;
    white-space: nowrap;
}

.topic-select {
    flex: 1;
    padding: 12px 16px;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    background: white;
    font-size: 1rem;
    color: #2d3748;
    transition: all 0.3s ease;
    appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 0.5rem center;
    background-repeat: no-repeat;
    background-size: 1.5em 1.5em;
    padding-right: 2.5rem;
}

.topic-select:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.analyze-btn {
    padding: 12px 24px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

.analyze-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3);
}

.analyze-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.btn-spinner {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* 벤치마킹 로딩 스타일 */
.benchmarking-loading {
    text-align: center;
    padding: 40px;
    background: #f8fafc;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
}

.benchmarking-loading .loading-spinner {
    width: 40px;
    height: 40px;
    border: 4px solid #e2e8f0;
    border-top: 4px solid #667eea;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto 20px;
}

.benchmarking-loading p {
    font-size: 1.1rem;
    color: #2d3748;
    margin-bottom: 20px;
    font-weight: 600;
}

.loading-details {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.loading-details p {
    color: #718096;
    font-size: 0.95rem;
    margin: 0;
    font-weight: normal;
}

/* 벤치마킹 결과 스타일 */
.results-summary {
    margin-bottom: 30px;
    padding: 20px;
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    border-radius: 12px;
    border: 1px solid #e2e8f0;
}

.results-summary h3 {
    font-size: 1.5rem;
    color: #2d3748;
    margin-bottom: 20px;
    text-align: center;
    font-weight: bold;
}

.summary-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 20px;
}

.stat-item {
    text-align: center;
    padding: 15px;
    background: white;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    border: 1px solid #e2e8f0;
}

.stat-label {
    display: block;
    font-size: 0.9rem;
    color: #718096;
    margin-bottom: 5px;
    font-weight: 500;
}

.stat-value {
    display: block;
    font-size: 1.5rem;
    font-weight: bold;
    color: #667eea;
}

/* 채널 그리드 스타일 */
.channels-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.channel-card {
    background: white;
    border-radius: 12px;
    padding: 20px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.channel-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
    border-color: #667eea;
}

.channel-rank {
    position: absolute;
    top: 15px;
    right: 15px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 5px 12px;
    border-radius: 20px;
    font-weight: bold;
    font-size: 0.9rem;
}

.channel-thumbnail {
    text-align: center;
    margin-bottom: 15px;
}

.channel-thumbnail img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #e2e8f0;
    transition: all 0.3s ease;
}

.channel-card:hover .channel-thumbnail img {
    border-color: #667eea;
    transform: scale(1.05);
}

.channel-info {
    text-align: left;
}

.channel-title {
    font-size: 1.2rem;
    font-weight: bold;
    color: #2d3748;
    margin-bottom: 8px;
    line-height: 1.3;
}

.channel-description {
    color: #718096;
    font-size: 0.9rem;
    line-height: 1.4;
    margin-bottom: 15px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.channel-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 15px;
    padding: 15px;
    background: #f8fafc;
    border-radius: 8px;
}

.stat-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.channel-stats .stat-label {
    font-size: 0.8rem;
    color: #718096;
    margin-bottom: 3px;
    font-weight: 500;
}

.channel-stats .stat-value {
    font-size: 1rem;
    font-weight: bold;
    color: #2d3748;
}

/* VidIQ 스타일 최근 조회수 정보 */
.recent-views-info {
    margin-top: 8px;
    padding: 8px;
    background: var(--bg-tertiary);
    border-radius: 6px;
    border-left: 3px solid var(--primary-color);
    font-size: 0.85rem;
}

.recent-views-trigger {
    color: var(--primary-color);
    cursor: pointer;
    text-decoration: none;
    transition: color 0.2s ease;
}

.recent-views-trigger:hover {
    color: var(--primary-hover);
    text-decoration: underline;
}

.views-trend {
    display: flex;
    align-items: center;
    margin-bottom: 4px;
    font-weight: 500;
}

.views-trend.trend-up {
    color: var(--success-color);
}

.views-trend.trend-down {
    color: var(--error-color);
}

.views-trend.trend-stable {
    color: var(--info-color);
}

.trend-percentage {
    margin-left: 4px;
    font-weight: 600;
    font-size: 0.8rem;
}

.daily-avg-views {
    color: var(--text-secondary);
    margin-bottom: 6px;
    font-size: 0.8rem;
}

.views-mini-chart {
    cursor: pointer;
    transition: transform 0.2s ease;
    padding: 4px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.8);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.views-mini-chart:hover {
    transform: scale(1.02);
    background: rgba(255, 255, 255, 1);
}

.mini-chart-svg {
    margin-right: 8px;
}

.chart-hint {
    font-size: 0.7rem;
    color: var(--text-muted);
    font-style: italic;
}

.no-chart {
    color: var(--text-muted);
    font-size: 0.75rem;
    font-style: italic;
}

.channel-metrics {
    display: flex;
    gap: 8px;
    margin-bottom: 15px;
    flex-wrap: wrap;
}

.metric-badge {
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    text-align: center;
}

.metric-badge.success {
    background: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.metric-badge.info {
    background: #d1ecf1;
    color: #0c5460;
    border: 1px solid #bee5eb;
}

.recommendation-reason {
    background: #fff3cd;
    padding: 12px;
    border-radius: 8px;
    border: 1px solid #ffeaa7;
    margin-bottom: 15px;
    font-size: 0.9rem;
    line-height: 1.4;
}

.recommendation-reason strong {
    color: #856404;
}

.strength-points {
    background: #e8f5e8;
    padding: 12px;
    border-radius: 8px;
    border: 1px solid #d4edda;
    font-size: 0.9rem;
}

.strength-points strong {
    color: #155724;
    margin-bottom: 8px;
    display: block;
}

.strength-points ul {
    margin: 8px 0 0 0;
    padding-left: 20px;
    list-style-type: disc;
}

.strength-points li {
    color: #2d3748;
    margin-bottom: 4px;
    line-height: 1.4;
}

/* 벤치마킹 오류 스타일 */
.benchmarking-error {
    text-align: center;
    padding: 40px;
    background: #fee;
    border-radius: 12px;
    border: 1px solid #fecaca;
}

.error-content h4 {
    color: #dc2626;
    font-size: 1.3rem;
    margin-bottom: 15px;
    font-weight: bold;
}

.error-content p {
    color: #7f1d1d;
    margin-bottom: 20px;
    line-height: 1.5;
}

.retry-btn {
    padding: 12px 24px;
    background: #dc2626;
    color: white;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.retry-btn:hover {
    background: #b91c1c;
    transform: translateY(-2px);
}

/* 벤치마킹 반응형 디자인 */
@media (max-width: 768px) {
    .topic-selection {
        flex-direction: column;
        align-items: stretch;
        gap: 15px;
    }
    
    .topic-selection label {
        text-align: center;
    }
    
    .channels-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    .channel-card {
        padding: 15px;
    }
    
    .channel-stats {
        grid-template-columns: 1fr;
        gap: 8px;
    }
    
    .stat-row {
        flex-direction: row;
        justify-content: space-between;
        text-align: left;
    }
    
    .summary-stats {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    .benchmarking-section {
        padding: 20px;
        margin: 20px 0;
    }
    
    .benchmarking-section .section-header h2 {
        font-size: 1.5rem;
    }
}

/* ==== 벤치마킹 환영 메시지 스타일 ==== */
.benchmarking-welcome {
    text-align: center;
    padding: 60px 30px;
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    border-radius: 16px;
    border: 1px solid #e2e8f0;
    margin: 20px 0;
}

.welcome-content {
    max-width: 500px;
    margin: 0 auto;
}

.welcome-icon {
    font-size: 4rem;
    margin-bottom: 20px;
}

.welcome-content h3 {
    font-size: 1.8rem;
    color: #2d3748;
    margin-bottom: 15px;
    font-weight: bold;
}

.welcome-content p {
    color: #718096;
    font-size: 1.1rem;
    line-height: 1.6;
    margin-bottom: 30px;
}

.welcome-features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 20px;
    margin-top: 30px;
}

.feature-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 20px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    border: 1px solid #e2e8f0;
    transition: all 0.3s ease;
}

.feature-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
    border-color: #667eea;
}

.feature-icon {
    font-size: 1.5rem;
}

.feature-item span:last-child {
    font-size: 0.9rem;
    color: #2d3748;
    font-weight: 500;
    text-align: center;
}

@media (max-width: 768px) {
    .benchmarking-welcome {
        padding: 40px 20px;
    }
    
    .welcome-content h3 {
        font-size: 1.5rem;
    }
    
    .welcome-features {
        grid-template-columns: 1fr;
        gap: 15px;
    }
}

/* ==== 핫한 영상 추가 스타일 ==== */
.video-trend-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #e2e8f0;
    font-size: 0.8rem;
}

.trend-score {
    color: #667eea;
    font-weight: 600;
}

.publish-time {
    color: #718096;
}

.performance-badge.excellent {
    background: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.performance-badge.good {
    background: #fff3cd;
    color: #856404;
    border: 1px solid #ffeaa7;
}

.performance-badge.normal {
    background: #f8f9fa;
    color: #6c757d;
    border: 1px solid #dee2e6;
}

.hot-videos-error {
    text-align: center;
    padding: 40px;
    background: #fee;
    border-radius: 12px;
    border: 1px solid #fecaca;
}

.hot-videos-error .error-icon {
    font-size: 2rem;
    margin-bottom: 15px;
}

.hot-videos-error h4 {
    color: #dc2626;
    font-size: 1.2rem;
    margin-bottom: 10px;
    font-weight: bold;
}

.hot-videos-error p {
    color: #7f1d1d;
    margin-bottom: 20px;
    line-height: 1.5;
}

.hot-videos-error .retry-btn {
    padding: 10px 20px;
    background: #dc2626;
    color: white;
    border: none;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.hot-videos-error .retry-btn:hover {
    background: #b91c1c;
    transform: translateY(-1px);
}

/* 푸터 스타일 */
.footer {
    background: #1a1a1a;
    color: #000000;
    padding: 20px 0;
    margin-top: 40px;
    border-top: 1px solid #333;
    font-size: 12px;
}

.footer-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.footer-left {
    display: flex;
    align-items: center;
}

.footer-logo {
    display: flex;
    align-items: center;
    gap: 10px;
}

.logo-icon {
    font-size: 24px;
    background: linear-gradient(135deg, #28a745, #20c997);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.logo-text {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.logo-main {
    font-size: 14px;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: 0.5px;
}

.logo-sub {
    font-size: 10px;
    font-weight: 500;
    color: #28a745;
    letter-spacing: 0.3px;
}

.footer-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
}

.business-links {
    display: flex;
    gap: 15px;
    margin-bottom: 5px;
}

.footer-link {
    color: #888;
    text-decoration: none;
    font-size: 11px;
    transition: color 0.3s ease;
}

.footer-link:hover {
    color: #000000;
}

.business-info {
    text-align: right;
    line-height: 1.4;
}

.company-name {
    font-size: 12px;
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 3px;
}

.business-details {
    font-size: 11px;
    color: #888;
    margin-bottom: 2px;
}

.contact-info {
    font-size: 11px;
    color: #888;
}

/* 모바일 반응형 */
@media (max-width: 768px) {
    .footer {
        padding: 15px 0;
        margin-top: 30px;
    }
    
    .footer-content {
        flex-direction: column;
        gap: 15px;
        text-align: center;
    }
    
    .footer-left {
        justify-content: center;
    }
    
    .footer-right {
        align-items: center;
        text-align: center;
    }
    
    .business-links {
        justify-content: center;
        margin-bottom: 8px;
    }
    
    .business-info {
        text-align: center;
    }
    
    .logo-main {
        font-size: 13px;
        color: #ffffff;
    }
    
    .logo-sub {
        font-size: 9px;
    }
}

/* 영상분석 섹션 스타일 */
.video-analysis-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

.video-input-section {
    background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
    border-radius: 20px;
    padding: 40px;
    text-align: center;
    margin-bottom: 30px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.video-input-section h2 {
    color: #000000;
    font-size: 2.2em;
    margin-bottom: 10px;
    font-weight: 700;
}

.video-input-section .subtitle {
    color: #b8d4f7;
    font-size: 1.1em;
    margin-bottom: 30px;
    line-height: 1.5;
}

.video-input-box {
    display: flex;
    gap: 15px;
    max-width: 800px;
    margin: 0 auto;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 15px;
    padding: 8px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.video-url-input {
    flex: 1;
    padding: 15px 20px;
    border: none;
    border-radius: 12px;
    font-size: 1em;
    background: rgba(255, 255, 255, 0.95);
    color: #333;
    transition: all 0.3s ease;
}

.video-url-input:focus {
    outline: none;
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.3);
}

.video-url-input::placeholder {
    color: #888;
}

.analyze-button {
    padding: 15px 30px;
    border: none;
    border-radius: 12px;
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    color: #000000;
    font-size: 1em;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.analyze-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(40, 167, 69, 0.4);
}

.analyze-button:active {
    transform: translateY(0);
}

.url-examples {
    margin-top: 25px;
    text-align: left;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.url-examples p {
    color: #b8d4f7;
    font-weight: 600;
    margin-bottom: 10px;
}

.url-examples ul {
    list-style: none;
    padding: 0;
}

.url-examples li {
    color: #d6e7ff;
    margin: 8px 0;
    padding-left: 20px;
    position: relative;
    font-family: 'Courier New', monospace;
    font-size: 0.9em;
}

.url-examples li::before {
    content: "•";
    color: #28a745;
    position: absolute;
    left: 0;
    font-weight: bold;
}

.video-analysis-results {
    margin-top: 30px;
}

.video-info-card {
    background: #ffffff;
    border-radius: 6px;
    padding: 12px 15px;
    margin-bottom: 6px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
    border: 1px solid #e9ecef;
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
    transition: all 0.2s ease;
    cursor: pointer;
}

.video-info-card:hover {
    background: #f8f9fa;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);
}

.related-videos-section h3 {
    color: #2c3e50;
    font-size: 1.5em;
    margin-bottom: 10px;
    font-weight: 700;
}

.related-videos-section > p {
    color: #6c757d;
    margin-bottom: 25px;
    font-size: 1.1em;
}

.analysis-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
    flex-wrap: wrap;
    gap: 15px;
}

.view-controls {
    display: flex;
    gap: 10px;
}

.view-btn {
    padding: 10px 20px;
    border: 2px solid #dee2e6;
    border-radius: 8px;
    background: #ffffff;
    color: #6c757d;
    font-size: 0.9em;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
}

.view-btn:hover {
    border-color: #28a745;
    color: #28a745;
}

.view-btn.active {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    border-color: #28a745;
    color: #000000;
}

/* 영상분석 로딩 상태 */
#videoLoadingState {
    text-align: center;
    padding: 60px 20px;
    background: #ffffff;
    border-radius: 15px;
    margin: 30px 0;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

/* 영상분석 빈 상태 */
#videoEmptyState {
    text-align: center;
    padding: 60px 20px;
    background: #ffffff;
    border-radius: 15px;
    margin: 30px 0;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

#videoEmptyState .empty-icon {
    font-size: 4em;
    margin-bottom: 20px;
}

#videoEmptyState h3 {
    color: #2c3e50;
    font-size: 1.5em;
    margin-bottom: 10px;
}

#videoEmptyState p {
    color: #6c757d;
    font-size: 1.1em;
}

/* 반응형 디자인 */
@media (max-width: 768px) {
    .video-input-box {
        flex-direction: column;
        gap: 15px;
    }
    
    .analyze-button {
        width: 100%;
    }
    
    .url-examples {
        text-align: center;
    }
    
    .analysis-controls {
        flex-direction: column;
        align-items: stretch;
    }
    
    .view-controls {
                 justify-content: center;
     }
}

/* 영상 정보 카드 상세 스타일 - 썸네일 위, 제목 아래 배치 */
.video-info-header {
    display: flex;
    flex-direction: row; /* 가로 배치로 변경 */
    align-items: flex-start;
    gap: 20px; /* 제목과 썸네일 사이 간격 */
    margin-bottom: 0;
    padding: 0;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    text-align: left;
}

/* 영상분석 페이지의 썸네일 스타일 - 이미지와 완전 동일한 크기 */
.video-info-header .video-thumbnail {
    position: relative !important;
    width: 280px !important;
    height: 157px !important; /* 16:9 비율 (280 × 9/16 = 157.5) */
    min-width: 280px !important;
    max-width: 280px !important;
    min-height: 157px !important;
    max-height: 157px !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) !important;
    background: #f8f9fa !important;
    margin: 0 !important;
    display: flex !important; /* flex 아이템으로 표시 */
    align-items: center !important;
    justify-content: center !important;
    order: 2 !important; /* 썸네일을 오른쪽에 배치 */
    flex-shrink: 0 !important; /* 크기 변경 방지 */
    flex-grow: 0 !important; /* 크기 변경 방지 */
}

.video-info-header .video-thumbnail img {
    width: 280px !important;
    height: 157px !important; /* 16:9 비율 (280 * 9/16 = 157.5) */
    object-fit: cover !important;
    display: block !important;
    transition: transform 0.3s ease !important;
    border-radius: 8px !important;
}

.video-info-header .thumbnail-overlay {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 280px !important;
    height: 157px !important; /* 이미지와 동일한 크기 */
    background: rgba(0, 0, 0, 0.6) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    opacity: 0 !important;
    transition: opacity 0.3s ease !important;
    border-radius: 8px !important;
    text-decoration: none !important;
}

.video-info-header .video-thumbnail:hover .thumbnail-overlay {
    opacity: 1 !important;
}

.video-info-header .video-thumbnail:hover img {
    transform: scale(1.05) !important;
}

.video-info-header .play-button {
    font-size: 1.5rem;
    color: #ffffff;
    margin-bottom: 4px;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
    animation: pulse 2s infinite;
}

.video-info-header .youtube-text {
    color: #ffffff;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}

.video-info-header .video-play-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 20px rgba(255, 0, 0, 0.4);
}

/* Shorts 배지 스타일 */
.video-info-header .shorts-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    background: linear-gradient(135deg, #ff6b35, #f7931e);
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: bold;
    text-transform: uppercase;
    z-index: 2;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
    max-width: calc(100% - 16px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.video-info-header .video-details {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 2px;
    order: 1 !important; /* 비디오 정보를 왼쪽에 배치 */
    align-self: flex-start !important;
}

/* video-details 내부의 썸네일 컨테이너 스타일 - 기존 CSS 오버라이드 */
.video-info-header .video-details .video-thumbnail-container {
    width: 100% !important;
    max-width: 300px !important;
    margin: 0 auto 12px auto !important;
    position: relative !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
    order: 1 !important; /* 썸네일을 첫 번째로 배치 */
    top: auto !important;
    left: auto !important;
    /* 컨테이너를 이미지 크기에 딱 맞춤 - 세로 길이 축소 */
    height: auto !important; /* 이미지 높이에 맞춤 */
    padding-top: 0 !important; /* 패딩 제거 */
    min-width: auto !important;
    flex-shrink: 0 !important;
    cursor: pointer !important;
    display: inline-block !important; /* 이미지 크기에 맞춤 */
}

.video-info-header .video-details .video-thumbnail {
    position: static !important; /* 일반적인 문서 흐름에 따름 */
    width: 100% !important; /* 컨테이너 가로에 맞춤 */
    height: auto !important; /* 16:9 비율에 따라 자동 계산 */
    aspect-ratio: 16/9 !important; /* 16:9 비율 강제 적용 */
    object-fit: cover !important; /* 이미지가 컨테이너를 완전히 채우도록 */
    display: block !important;
    border-radius: 8px !important; /* 컨테이너와 동일한 둥근 모서리 */
    top: auto !important;
    left: auto !important;
}

.video-info-header .video-details .video-thumbnail-container .thumbnail-overlay {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(0, 0, 0, 0.3) !important;
    opacity: 0 !important;
    transition: opacity 0.3s ease !important;
    text-decoration: none !important;
    flex-direction: column !important;
    gap: 4px !important;
}

.video-info-header .video-details .video-thumbnail-container:hover .thumbnail-overlay {
    opacity: 1 !important;
}

.video-info-header .video-details .video-thumbnail-container .play-button {
    font-size: 24px !important;
    color: white !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5) !important;
}

.video-info-header .video-details .video-thumbnail-container .youtube-text {
    font-size: 10px !important;
    color: white !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important;
}


/* 영상분석 페이지 내부 요소 스타일 - 작은 리스트 형태 */
.video-info-header .video-title {
    color: #333;
    font-size: 16px !important;
    font-weight: 600;
    margin: 0;
    line-height: 1.4;
    word-break: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    order: 2 !important; /* 제목을 썸네일 다음으로 배치 */
}

.video-info-header .video-channel {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 0;
    font-size: 13px;
    color: #666;
    order: 3 !important; /* 채널을 제목 다음으로 배치 */
}

.video-info-header .channel-name {
    color: #666;
    font-weight: 400;
    font-size: 12px;
}

.video-info-header .subscriber-count {
    color: #999;
    font-weight: 400;
    font-size: 12px;
}

.video-info-header .video-stats {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    font-size: 12px;
    color: #777;
    order: 4 !important; /* 통계를 채널 다음으로 배치 */
}

.video-info-header .stat-item:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* 성과 지표를 트렌드 채널의 성장 지표처럼 오른쪽에 표시 */
.video-info-header .video-performance {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 16px;
    margin-top: 4px;
    order: 5 !important; /* 성능을 통계 다음으로 배치 */
}

.video-info-header .performance-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.video-info-header .performance-item:first-child .performance-value {
    display: inline-block;
    padding: 3px 8px;
    background: linear-gradient(135deg, #ff6b35, #f7931e);
    color: white;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    min-width: 40px;
    text-align: center;
    box-shadow: 0 1px 3px rgba(255, 107, 53, 0.3);
}

.video-info-header .performance-item:first-child {
    display: block;
}

.video-info-header .performance-item:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 12px rgba(0,0,0,0.1);
    border-color: #dee2e6;
}

.video-info-header .performance-label {
    color: #6c757d;
    font-weight: 400;
    font-size: 11px;
    line-height: 1.2;
}

.video-info-header .performance-value {
    color: #495057;
    font-weight: 600;
    font-size: 13px;
    line-height: 1.2;
}

.video-info-header .performance-value.high-performance {
    background: linear-gradient(135deg, #28a745, #20c997);
    color: white;
    box-shadow: 0 2px 8px rgba(40, 167, 69, 0.3);
}

.performance-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px;
    background: #f8f9fa;
    border-radius: 8px;
    margin-bottom: 0;
}

.performance-label {
    color: #495057;
    font-weight: 600;
}

.performance-value {
    color: #6c757d;
    font-weight: 700;
    font-size: 1.1em;
}

.performance-value.high-performance {
    color: #28a745;
}

.video-description {
    display: none;
}

/* 대상 영상 강조 스타일 */
.target-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    background: linear-gradient(135deg, #ff6b6b, #ee5a52);
    color: #000000;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 0.7em;
    font-weight: 600;
    white-space: nowrap;
    z-index: 10;
    box-shadow: 0 2px 8px rgba(255, 107, 107, 0.3);
}

.target-video-card {
    border: 3px solid #ff6b6b !important;
    background: linear-gradient(135deg, #fff8e1, #fff3c4) !important;
    position: relative;
}

.target-video-card::before {
    content: '';
    position: absolute;
    top: -3px;
    left: -3px;
    right: -3px;
    bottom: -3px;
    background: linear-gradient(45deg, #ff6b6b, #ffc107, #ff6b6b);
    border-radius: 18px;
    z-index: -1;
    animation: targetGlow 2s ease-in-out infinite alternate;
}

@keyframes targetGlow {
    0% {
        box-shadow: 0 0 20px rgba(255, 107, 107, 0.3);
    }
    100% {
        box-shadow: 0 0 30px rgba(255, 107, 107, 0.6);
    }
}

.target-video-row {
    background: linear-gradient(135deg, #fff8e1, #fff3c4) !important;
    border: 2px solid #ffc107 !important;
}

.target-video-row:hover {
    background: linear-gradient(135deg, #fff3c4, #ffecb3) !important;
}

.target-video-row .target-badge {
    position: relative;
    top: 0;
    left: 0;
    margin-left: 8px;
}

/* 영상분석 페이지 반응형 디자인 - 트렌드 섹션과 동일 */
@media (max-width: 1024px) {
    .video-info-header {
        flex-direction: column;
        gap: 12px;
        padding: 0;
        align-items: stretch;
        text-align: left;
    }
    
    .video-info-header .video-thumbnail {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 16/9 !important;
        margin: 0 0 16px 0 !important;
    }
    
    .video-info-header .video-details {
        padding-left: 0;
        text-align: left;
        width: 100%;
        min-width: 0;
    }
    
    .video-info-header .video-channel {
        justify-content: flex-start;
        gap: 8px;
    }
    
    .video-info-header .video-stats {
        justify-content: flex-start;
        gap: 8px;
    }
    
    .video-info-header .video-performance {
        grid-template-columns: 1fr 1fr;
        gap: 6px 12px;
    }
}

@media (max-width: 768px) {
    .video-input-section {
        padding: 30px 20px;
    }
    
    .video-input-section h2 {
        font-size: 1.8em;
    }
    
    .video-info-header {
        padding: 0;
        gap: 12px;
        flex-direction: column;
        align-items: stretch;
        text-align: left;
    }
    
    .video-info-card {
        padding: 10px;
        margin-bottom: 4px;
    }
    
    .video-info-header .video-thumbnail {
        width: 100% !important;
        max-width: none !important;
        height: auto !important;
        aspect-ratio: 16/9 !important;
        margin: 0 0 16px 0 !important;
    }
    
    .video-info-header .video-title {
        font-size: 14px !important;
        text-align: left;
        -webkit-line-clamp: 2;
    }
    
    .video-info-header .video-channel {
        flex-direction: row;
        gap: 6px;
        align-items: center;
        justify-content: flex-start;
    }
    
    .video-info-header .channel-name {
        font-size: 11px;
    }
    
    .video-info-header .subscriber-count {
        font-size: 11px;
    }
    
    .video-info-header .performance-item:first-child .performance-value {
        font-size: 10px;
        padding: 2px 6px;
        min-width: 30px;
    }
    
    .video-info-header .video-performance {
        grid-template-columns: 1fr;
        gap: 4px 8px;
        padding-top: 8px;
    }
    
    .video-info-header .performance-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
        padding: 4px 0;
        text-align: left;
    }
    
    .video-info-header .performance-label {
        font-size: 10px;
        margin-bottom: 1px;
    }
    
    .video-info-header .performance-value {
        font-size: 12px;
        padding: 2px 6px;
    }
}

/* 영상 다운로드 버튼 스타일 (카드 형식) */
.video-download-btn {
    flex: 1;
    padding: 10px 15px;
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    color: #000000;
    border: none;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.video-download-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s;
}

.video-download-btn:hover::before {
    left: 100%;
}

.video-download-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(40, 167, 69, 0.4);
}

.video-download-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(40, 167, 69, 0.3);
}

.video-download-btn:disabled {
    background: #ccc;
    cursor: not-allowed;
    transform: none;
    opacity: 0.6;
}

.video-download-btn:disabled:hover {
    transform: none;
    box-shadow: none;
}

.video-download-btn:disabled::before {
    display: none;
}

/* 대본 다운로드 버튼 스타일 (카드 형식) */
.script-download-btn {
    flex: 1;
    padding: 10px 15px;
    background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
    color: #000000;
    border: none;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    position: relative;
    overflow: hidden;
}

.script-download-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s;
}

.script-download-btn:hover::before {
    left: 100%;
}

.script-download-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 123, 255, 0.4);
}

.script-download-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(0, 123, 255, 0.3);
}

.script-download-btn:disabled {
    background: #ccc;
    cursor: not-allowed;
    transform: none;
    opacity: 0.6;
}

.script-download-btn:disabled:hover {
    transform: none;
    box-shadow: none;
}

.script-download-btn:disabled::before {
    display: none;
}

/* 대본 다운로드 버튼 스타일 (테이블 형식) */
.table-script-download-btn {
    padding: 8px 12px;
    background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
    color: #000000;
    border: none;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 100%;
    position: relative;
    overflow: hidden;
}

.table-script-download-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s;
}

.table-script-download-btn:hover::before {
    left: 100%;
}

.table-script-download-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(0, 123, 255, 0.3);
}

.table-script-download-btn:active {
    transform: translateY(0);
    box-shadow: 0 1px 3px rgba(0, 123, 255, 0.3);
}

.table-script-download-btn:disabled {
    background: #ccc;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
    opacity: 0.6;
}

.table-script-download-btn:disabled::before {
    display: none;
}

/* 영상 다운로드 버튼 스타일 (테이블 형식) */
.table-video-download-btn {
    padding: 8px 12px;
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    color: #000000;
    border: none;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.table-video-download-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s;
}

.table-video-download-btn:hover::before {
    left: 100%;
}

.table-video-download-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(40, 167, 69, 0.3);
}

.table-video-download-btn:active {
    transform: translateY(0);
    box-shadow: 0 1px 3px rgba(40, 167, 69, 0.3);
}

.table-video-download-btn:disabled {
    background: #ccc;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
    opacity: 0.6;
}

.table-video-download-btn:disabled::before {
    display: none;
}

/* 채널 비교 섹션 스타일 */
.channel-compare-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

.compare-input-section {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 20px;
    padding: 40px;
    text-align: center;
    margin-bottom: 30px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.compare-input-section h2 {
    color: #000000;
    font-size: 2.2em;
    margin-bottom: 10px;
    font-weight: 700;
}

.compare-input-section .subtitle {
    color: #b8d4f7;
    font-size: 1.1em;
    margin-bottom: 30px;
    line-height: 1.5;
}

.channels-input-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
}

.channel-input-group {
    text-align: left;
}

.channel-input-group label {
    display: block;
    color: #000000;
    font-weight: 600;
    margin-bottom: 8px;
    font-size: 1.1em;
}

.channel-url-input {
    width: 100%;
    padding: 15px 20px;
    border: none;
    border-radius: 12px;
    font-size: 1em;
    background: rgba(255, 255, 255, 0.95);
    color: #333;
    transition: all 0.3s ease;
    box-sizing: border-box;
}

.channel-url-input:focus {
    outline: none;
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.3);
}

.channel-url-input::placeholder {
    color: #888;
}

.compare-actions {
    display: flex;
    gap: 15px;
    justify-content: center;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.add-channel-btn {
    padding: 12px 25px;
    border: 2px solid rgba(255, 255, 255, 0.8);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.1);
    color: #000000;
    font-size: 1em;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

.add-channel-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
}

.compare-channels-btn {
    padding: 12px 30px;
    border: none;
    border-radius: 12px;
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    color: #000000;
    font-size: 1em;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.compare-channels-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(40, 167, 69, 0.4);
}

.compare-channels-btn:disabled {
    background: #ccc;
    cursor: not-allowed;
    transform: none;
}

.compare-help {
    color: #b8d4f7;
    font-size: 0.9em;
    max-width: 600px;
    margin: 0 auto;
}

/* 채널 비교 결과 섹션 */
.compare-results-section {
    background: white;
    border-radius: 20px;
    padding: 30px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    margin-bottom: 30px;
}

.channel-overview-section {
    margin-bottom: 40px;
}

.channel-overview-section h3 {
    color: #2c3e50;
    font-size: 1.5em;
    margin-bottom: 20px;
    font-weight: 700;
    border-bottom: 3px solid #667eea;
    padding-bottom: 10px;
}



/* 채널 개요 테이블 */
.channel-overview-section {
    margin-bottom: 40px;
}

.channel-overview-section h4 {
    color: #2c3e50;
    font-size: 1.5em;
    margin-bottom: 20px;
    font-weight: 700;
    border-bottom: 3px solid #667eea;
    padding-bottom: 10px;
}



/* 성과 지표 차트 섹션 */
.performance-charts-section h4 {
    color: #2c3e50;
    font-size: 1.5em;
    margin-bottom: 25px;
    font-weight: 700;
    border-bottom: 3px solid #28a745;
    padding-bottom: 10px;
}

.charts-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 30px;
}

.chart-item {
    background: #f8f9fa;
    border-radius: 15px;
    padding: 25px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    border: 1px solid #e9ecef;
}

.chart-item h4 {
    color: #2c3e50;
    font-size: 1.2em;
    margin-bottom: 20px;
    font-weight: 600;
    text-align: center;
}

.chart-item canvas {
    max-width: 100%;
    height: auto;
}

/* 반응형 디자인 */
@media (max-width: 768px) {
    .compare-input-section {
        padding: 30px 20px;
    }
    
    .compare-input-section h2 {
        font-size: 1.8em;
    }
    
    .channels-input-container {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    .compare-actions {
        flex-direction: column;
        align-items: center;
    }
    
    .add-channel-btn,
    .compare-channels-btn {
        width: 100%;
        max-width: 300px;
    }
    
    .charts-container {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .chart-item {
        padding: 20px;
    }
    

    

}

/* 로딩 스피너 애니메이션 */
.loading-spinner {
    width: 50px;
    height: 50px;
    border: 5px solid rgba(255,255,255,0.3);
    border-top: 5px solid white;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto 20px;
}

/* 채널 입력 그룹 제거 버튼 */
.remove-channel-btn {
    margin-top: 10px;
    padding: 8px 15px;
    background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
    color: #000000;
    border: none;
    border-radius: 8px;
    font-size: 0.9em;
    cursor: pointer;
    transition: all 0.3s ease;
}

.remove-channel-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(220, 53, 69, 0.3);
} 



/* 채널 개요 테이블 스타일 */
.overview-table-container {
    overflow-x: auto;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    margin-bottom: 30px;
}

.overview-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    background: white;
    table-layout: fixed;
}

.overview-table th {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #ffffff;
    padding: 15px 12px;
    text-align: center;
    font-weight: 600;
    border: none;
    white-space: nowrap;
}

.overview-table th:nth-child(1) { width: 200px; min-width: 200px; } /* 채널명 */
.overview-table th:nth-child(2) { width: 120px; min-width: 120px; } /* 구독자 수 */
.overview-table th:nth-child(3) { width: 120px; min-width: 120px; } /* 총 영상수 */
.overview-table th:nth-child(4) { width: 120px; min-width: 120px; } /* 총 조회수 */
.overview-table th:nth-child(5) { width: 120px; min-width: 120px; } /* 평균조회수 */
.overview-table th:nth-child(6) { width: 120px; min-width: 120px; } /* 쇼츠 비중 */

.overview-table td {
    padding: 15px 12px;
    text-align: center;
    border-bottom: 1px solid #e9ecef;
    vertical-align: middle;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.overview-table tbody tr:hover {
    background-color: #f8f9fa;
}

.overview-table tbody tr:nth-child(even) {
    background-color: #fafafa;
}

.channel-name {
    font-weight: 600;
    color: #2c3e50;
    text-align: left !important;
    padding-left: 15px !important;
}

.table-number {
    font-weight: 600;
    color: #495057;
}

.shorts-ratio {
    font-weight: 600;
}

.shorts-ratio.high {
    color: #28a745;
}

.shorts-ratio.medium {
    color: #ffc107;
}

.shorts-ratio.low {
    color: #dc3545;
}

/* 모바일 반응형 */
@media (max-width: 768px) {
    .overview-table-container {
        overflow-x: auto;
        margin: 0 -10px;
    }
    
    .overview-table th,
    .overview-table td {
        padding: 8px 6px;
        font-size: 12px;
    }
    
    .overview-table th:nth-child(1) { width: 150px; } /* 채널명 */
    .overview-table th:nth-child(2) { width: 90px; } /* 구독자 수 */
    .overview-table th:nth-child(3) { width: 90px; } /* 총 영상수 */
    .overview-table th:nth-child(4) { width: 90px; } /* 총 조회수 */
    .overview-table th:nth-child(5) { width: 90px; } /* 평균조회수 */
    .overview-table th:nth-child(6) { width: 90px; } /* 쇼츠 비중 */
}

/* 채널 분석 페이지 스타일 */
.login-required-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 40px 20px;
}

.login-required-card {
    background: white;
    border-radius: 20px;
    padding: 40px;
    text-align: center;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    border: 1px solid #e9ecef;
}

.login-required-icon {
    font-size: 48px;
    margin-bottom: 20px;
}

.login-required-card h2 {
    font-size: 28px;
    font-weight: 600;
    margin-bottom: 15px;
    color: #333;
}

.connection-status {
    margin: 20px 0;
}

.status-indicator {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 500;
}

.status-indicator.disconnected {
    background: rgba(255, 87, 51, 0.1);
    color: #ff5733;
    border: 1px solid rgba(255, 87, 51, 0.2);
}

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
}

.connection-description {
    font-size: 16px;
    color: #666;
    margin-bottom: 10px;
}

.connection-note {
    font-size: 14px;
    color: #888;
    background: #f8f9fa;
    padding: 15px;
    border-radius: 10px;
    margin: 20px 0;
    border-left: 4px solid #e9ecef;
}

.login-actions {
    margin: 30px 0;
}

.google-login-btn.primary,
.kakao-login-btn.secondary {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 400px;
    margin: 15px auto;
    padding: 15px 25px;
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
}

.google-login-btn.primary {
    background: white;
    color: #333;
    border: 1px solid #dadce0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.google-login-btn.primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.kakao-login-btn.secondary {
    background: #FEE500;
    color: #333;
}

.kakao-login-btn.secondary:hover {
    background: #FFD700;
    transform: translateY(-2px);
}

.login-benefits {
    margin-top: 40px;
    text-align: left;
    background: #f8f9fa;
    padding: 25px;
    border-radius: 15px;
    border: 1px solid #e9ecef;
}

.login-benefits h3 {
    font-size: 20px;
    margin-bottom: 15px;
    color: #333;
}

.login-benefits ul {
    list-style: none;
    padding: 0;
}

.login-benefits li {
    padding: 8px 0;
    font-size: 14px;
    color: #666;
    position: relative;
    padding-left: 20px;
}

.login-benefits li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: #4CAF50;
    font-weight: bold;
}

/* 분석 섹션 스타일 */
.analysis-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    box-sizing: border-box;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* 채널 헤더 섹션 */
.channel-header-section {
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
    border-radius: 20px;
    padding: 32px;
    margin-bottom: 32px;
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.1),
        0 2px 8px rgba(0, 0, 0, 0.08);
    border: 1px solid #e9ecef;
    position: relative;
    overflow: hidden;
    width: 100%;
    box-sizing: border-box;
    flex-shrink: 0; /* 크기 축소 방지 */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.channel-header-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
}

.channel-header-section:hover {
    transform: translateY(-2px);
    box-shadow: 
        0 12px 40px rgba(0, 0, 0, 0.15),
        0 4px 12px rgba(0, 0, 0, 0.1);
}

.channel-title-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
}

.page-title {
    font-size: 24px;
    font-weight: 700;
    color: #333;
    margin: 0;
}

.channel-nav-section {
    border-top: 1px solid #e9ecef;
    padding-top: 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
}

.channel-selector {
    flex: 1;
}

.analysis-control {
    flex-shrink: 0;
    text-align: center;
}

.analyze-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 16px 24px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    border-radius: 16px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
    min-width: 140px;
}

.analyze-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(102, 126, 234, 0.4);
    background: linear-gradient(135deg, #5a67d8 0%, #6b46c1 100%);
}

.analyze-btn:active {
    transform: translateY(0);
}

.analyze-btn.loading {
    opacity: 0.7;
    cursor: not-allowed;
    pointer-events: none;
}

.analyze-btn .btn-icon {
    font-size: 18px;
}

.analysis-description {
    font-size: 12px;
    color: #666;
    margin-top: 8px;
    line-height: 1.4;
}

/* Sample data preview styles */
.pre-analysis-state {
    padding: 40px 20px;
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    border-radius: 16px;
    margin-bottom: 40px;
}

.sample-data-preview {
    max-width: 1000px;
    margin: 0 auto;
}

.preview-header {
    text-align: center;
    margin-bottom: 40px;
}

.preview-badge {
    display: inline-block;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 8px 20px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 16px;
}

.preview-header h2 {
    font-size: 28px;
    font-weight: 700;
    color: #2d3748;
    margin-bottom: 12px;
    line-height: 1.3;
}

.preview-description {
    font-size: 16px;
    color: #718096;
    margin: 0;
}

.sample-section {
    background: white;
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 24px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.sample-section h3 {
    font-size: 18px;
    font-weight: 600;
    color: #2d3748;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.sample-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 16px;
}

.metric-card {
    background: #f8fafc;
    border-radius: 8px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

.metric-title {
    font-size: 14px;
    font-weight: 500;
    color: #64748b;
    margin-bottom: 4px;
}

.metric-value {
    font-size: 24px;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 4px;
}

.metric-trend {
    font-size: 12px;
    color: #64748b;
    line-height: 1.4;
}

/* 기획 벤치마킹 페이지 스타일 */
.guide-section {
    background: white;
    border-radius: 12px;
    padding: 24px;
    margin-top: 24px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.guide-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.guide-card {
    background: #f9fafb;
    border-radius: 8px;
    padding: 20px;
    border: 1px solid #e5e7eb;
    transition: all 0.2s ease;
    text-align: center;
}

.guide-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border-color: #3b82f6;
}

.guide-icon {
    font-size: 32px;
    margin-bottom: 12px;
}

.guide-card h3 {
    font-size: 18px;
    font-weight: 600;
    color: #333;
    margin-bottom: 8px;
}

.guide-card p {
    color: #666;
    font-size: 14px;
    line-height: 1.5;
}

.analysis-results {
    margin-top: 20px;
}

.analysis-header {
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid #e5e7eb;
}

.analysis-header h3 {
    font-size: 20px;
    font-weight: 600;
    color: #333;
    margin-bottom: 4px;
}

.analysis-header p {
    color: #666;
    font-size: 14px;
}

.analysis-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.analysis-card {
    background: #f9fafb;
    border-radius: 8px;
    padding: 16px;
    border: 1px solid #e5e7eb;
}

.analysis-card h4 {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    margin-bottom: 8px;
}

.analysis-card p {
    color: #666;
    font-size: 14px;
    margin-bottom: 8px;
}

.trend {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
}

.trend.positive {
    background: #dcfce7;
    color: #16a34a;
}

.recommendations {
    background: #f0f9ff;
    border-radius: 8px;
    padding: 20px;
    border: 1px solid #e0f2fe;
}

.recommendations h4 {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    margin-bottom: 12px;
}

.recommendations ul {
    list-style: none;
    padding: 0;
}

.recommendations li {
    padding: 8px 0;
    color: #666;
    font-size: 14px;
    position: relative;
    padding-left: 20px;
}

.recommendations li:before {
    content: '✓';
    position: absolute;
    left: 0;
    color: #16a34a;
    font-weight: bold;
}

.search-help {
    margin-top: 12px;
    color: #666;
    font-size: 14px;
    line-height: 1.5;
}

.metric-icon {
    font-size: 24px;
    background: white;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.metric-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.metric-label {
    font-size: 12px;
    color: #718096;
    font-weight: 500;
}

.metric-value {
    font-size: 20px;
    font-weight: 700;
    color: #2d3748;
}

.metric-change {
    font-size: 12px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 12px;
}

.metric-change.positive {
    background: #dcfce7;
    color: #166534;
}

.metric-change.neutral {
    background: #fef3c7;
    color: #92400e;
}

.sample-channels {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.channel-preview-card {
    background: #f8fafc;
    border-radius: 8px;
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 16px;
}

.channel-avatar {
    font-size: 20px;
    background: white;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.channel-details {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}

.channel-name {
    font-size: 14px;
    font-weight: 600;
    color: #2d3748;
}

.channel-stats {
    font-size: 12px;
    color: #718096;
}

.channel-highlight {
    font-size: 11px;
    color: #667eea;
    font-weight: 500;
}

.sample-keywords {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.keyword-tag {
    padding: 6px 12px;
    border-radius: 16px;
    font-size: 12px;
    font-weight: 500;
    color: white;
}

.keyword-tag.hot {
    background: #ef4444;
}

.keyword-tag.rising {
    background: #f97316;
}

.keyword-tag.trending {
    background: #eab308;
}

.keyword-tag.popular {
    background: #22c55e;
}

.keyword-tag.growing {
    background: #3b82f6;
}

.keyword-tag.stable {
    background: #8b5cf6;
}

.sample-insights {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.insight-card {
    background: #f8fafc;
    border-radius: 8px;
    padding: 20px;
    display: flex;
    gap: 16px;
}

.insight-icon {
    font-size: 20px;
    background: white;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    flex-shrink: 0;
}

.insight-content h4 {
    font-size: 14px;
    font-weight: 600;
    color: #2d3748;
    margin-bottom: 8px;
}

.insight-content p {
    font-size: 13px;
    color: #4a5568;
    line-height: 1.5;
    margin: 0;
}

.analysis-cta {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 12px;
    padding: 24px;
    text-align: center;
    margin-top: 32px;
}

.cta-content h4 {
    font-size: 18px;
    font-weight: 600;
    color: white;
    margin-bottom: 12px;
}

.cta-content p {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.5;
    margin: 0;
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
    .pre-analysis-state {
        padding: 20px 16px;
        margin-bottom: 30px;
    }
    
    .preview-header h2 {
        font-size: 22px;
    }
    
    .preview-description {
        font-size: 14px;
    }
    
    .sample-section {
        padding: 20px;
        margin-bottom: 20px;
    }
    
    .sample-metrics {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    
    .metric-card {
        padding: 16px;
    }
    
    .metric-value {
        font-size: 18px;
    }
    
    .sample-keywords {
        gap: 6px;
    }
    
    .keyword-tag {
        font-size: 11px;
        padding: 4px 10px;
    }
    
    .insight-card {
        padding: 16px;
        flex-direction: column;
        text-align: center;
    }
    
    .insight-icon {
        align-self: center;
        margin-bottom: 8px;
    }
    
    .analysis-cta {
        padding: 20px;
        margin-top: 24px;
    }
    
    .cta-content h4 {
        font-size: 16px;
    }
    
    .cta-content p {
        font-size: 13px;
    }
}


.channel-selector p {
    font-size: 14px;
    color: #666;
    margin-bottom: 10px;
}

.channel-select-box {
    border: 1px solid #e9ecef;
    border-radius: 16px;
    padding: 18px;
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 
        0 2px 8px rgba(0, 0, 0, 0.04),
        0 1px 3px rgba(0, 0, 0, 0.06);
    position: relative;
    overflow: hidden;
}

.channel-select-box::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);
    transition: left 0.6s ease;
}

.channel-select-box:hover {
    border-color: #667eea;
    transform: translateY(-2px);
    box-shadow: 
        0 8px 25px rgba(102, 126, 234, 0.15),
        0 4px 10px rgba(0, 0, 0, 0.1);
}

.channel-select-box:hover::before {
    left: 100%;
}

.channel-option {
    display: flex;
    align-items: center;
    gap: 12px;
}

.channel-thumb {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
}

.channel-option span {
    font-weight: 500;
    color: #333;
}

.channel-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.channel-info .subscriber-count {
    font-size: 12px;
    color: #666;
    font-weight: 400;
}

.tab-navigation {
    display: flex;
    gap: 0;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-radius: 16px;
    padding: 6px;
    width: fit-content;
    box-shadow: 
        inset 0 2px 4px rgba(0, 0, 0, 0.06),
        0 2px 8px rgba(0, 0, 0, 0.04);
    border: 1px solid #e9ecef;
}

.tab-btn {
    padding: 14px 28px;
    border: none;
    background: transparent;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    color: #666;
    position: relative;
    overflow: hidden;
}

.tab-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    transition: left 0.5s ease;
}

.tab-btn.active {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    box-shadow: 
        0 4px 12px rgba(102, 126, 234, 0.3),
        0 2px 4px rgba(0, 0, 0, 0.1);
    transform: translateY(-1px);
}

.tab-btn:hover:not(.active) {
    color: #333;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.6) 100%);
    transform: translateY(-1px);
}

.tab-btn:hover::before {
    left: 100%;
}

.user-info-section {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: white;
    padding: 20px;
    border-radius: 15px;
    margin-bottom: 30px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.user-profile {
    display: flex;
    align-items: center;
    gap: 15px;
}

.profile-image {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
}

.user-details h3 {
    margin: 0;
    font-size: 18px;
    color: #333;
}

.user-details p {
    margin: 5px 0 0 0;
    color: #666;
    font-size: 14px;
}

.login-status {
    background: #4CAF50;
    color: #000000;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}

.logout-btn {
    background: #f44336;
    color: #000000;
    border: none;
    padding: 10px 20px;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    transition: background 0.3s ease;
}

.logout-btn:hover {
    background: #d32f2f;
}

.channel-analysis-content {
    background: white;
    border-radius: 15px;
    padding: 30px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    border: 1px solid #e9ecef;
}

/* 트렌드 섹션 */
.trend-section {
    margin-bottom: 40px;
}

.trend-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
    gap: 20px;
}

.trend-section h2 {
    font-size: 20px;
    font-weight: 600;
    color: #333;
    margin-bottom: 0;
    flex: 1;
}

.trend-section-header .tab-navigation {
    flex-shrink: 0;
}

.section-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 20px;
}

.section-point {
    color: #007bff;
    font-weight: bold;
}

.section-title {
    font-size: 16px;
    font-weight: 500;
    color: #333;
}

.info-tooltip {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #e9ecef;
    color: #666;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    cursor: help;
}

.subscriber-categories {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    overflow-x: auto;
    padding-bottom: 5px;
}

.category-tab {
    padding: 8px 16px;
    border: 1px solid #e9ecef;
    border-radius: 20px;
    font-size: 13px;
    color: #666;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.3s ease;
}

.category-tab.active {
    background: #007bff;
    color: white;
    border-color: #007bff;
}

.category-tab:hover:not(.active) {
    border-color: #007bff;
    color: #007bff;
}

/* 기본 채널 추천 레이아웃 - 삭제됨 (중복 정의 방지) */

.rising-channels-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 15px;
}

.analysis-header {
    text-align: center;
    margin-bottom: 30px;
}

.analysis-header h2 {
    font-size: 24px;
    color: #333;
    margin-bottom: 10px;
}

.analysis-header p {
    color: #666;
    font-size: 16px;
}

.channel-info-card {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 15px;
    padding: 25px;
    margin-bottom: 30px;
    color: #000000;
}

.channel-header {
    display: flex;
    align-items: center;
    gap: 20px;
}

.channel-thumbnail {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid rgba(255, 255, 255, 0.3);
}

.channel-details h3 {
    margin: 0 0 10px 0;
    font-size: 22px;
    color: #000000;
}

.channel-details p {
    margin: 0 0 15px 0;
    opacity: 0.9;
    font-size: 14px;
    line-height: 1.5;
}

.channel-stats {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.channel-stats .stat {
    background: rgba(255, 255, 255, 0.2);
    padding: 8px 15px;
    border-radius: 20px;
    font-size: 14px;
    color: #000000;
}

.channel-stats .stat strong {
    font-size: 16px;
    font-weight: 700;
    color: #000000;
}

.charts-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    margin-bottom: 30px;
}

.chart-container {
    background: #f8f9fa;
    border-radius: 12px;
    padding: 20px;
}

.chart-container h3 {
    margin: 0 0 15px 0;
    font-size: 18px;
    color: #333;
    text-align: center;
}

.recent-videos-section {
    margin-top: 30px;
}

.recent-videos-section h3 {
    font-size: 20px;
    color: #333;
    margin-bottom: 20px;
    text-align: center;
}

.videos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
}

/* 모바일 반응형 */
@media (max-width: 768px) {
    .login-required-card {
        padding: 30px 20px;
    }
    
    .login-required-card h2 {
        font-size: 24px;
    }
    
    .user-info-section {
        flex-direction: column;
        gap: 15px;
        text-align: center;
    }
    
    .channel-header {
        flex-direction: column;
        text-align: center;
    }
    
    .channel-stats {
        justify-content: center;
    }
    
    .charts-section {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .videos-grid {
        grid-template-columns: 1fr;
    }
}

/* 최근 30일 분석 섹션 */
.recent-analysis-section {
    margin: 40px 0;
}

.recent-analysis-section h3 {
    font-size: 18px;
    font-weight: 600;
    color: #333;
    margin-bottom: 25px;
}

.performance-metrics {
    margin-bottom: 30px;
}

.performance-metrics h4 {
    font-size: 16px;
    font-weight: 500;
    color: #333;
    margin-bottom: 20px;
}

.metrics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.metric-card {
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
    border-radius: 16px;
    padding: 24px;
    text-align: center;
    border: 1px solid #e9ecef;
    box-shadow: 
        0 4px 20px rgba(0, 0, 0, 0.08),
        0 1px 3px rgba(0, 0, 0, 0.1);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.metric-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.metric-card:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 
        0 8px 30px rgba(0, 0, 0, 0.12),
        0 4px 10px rgba(0, 0, 0, 0.1);
}

.metric-card:hover::before {
    opacity: 1;
}

.metric-card label {
    display: block;
    font-size: 14px;
    color: #666;
    margin-bottom: 10px;
}

.metric-value .value {
    display: block;
    font-size: 24px;
    font-weight: 700;
    color: #333;
    margin-bottom: 5px;
}

.metric-value .change {
    font-size: 12px;
    color: #888;
}

.monthly-summary {
    margin-bottom: 30px;
}

.monthly-summary h4 {
    font-size: 16px;
    font-weight: 500;
    color: #333;
    margin-bottom: 20px;
}

.summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 20px;
}

.summary-card {
    background: #f8f9fa;
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    border: 1px solid #e9ecef;
}

.summary-icon {
    font-size: 24px;
    margin-bottom: 10px;
}

.summary-card label {
    display: block;
    font-size: 14px;
    color: #666;
    margin-bottom: 10px;
}

.summary-value {
    font-size: 20px;
    font-weight: 700;
    color: #333;
}

/* 그래프 섹션 */
.views-graph-section,
.performance-graph-section {
    margin: 40px 0;
}

.views-graph-section h3,
.performance-graph-section h3 {
    font-size: 18px;
    font-weight: 600;
    color: #333;
    margin-bottom: 20px;
}

.graph-empty-state {
    background: #f8f9fa;
    border-radius: 12px;
    padding: 60px 20px;
    text-align: center;
    border: 2px dashed #e9ecef;
}

.graph-placeholder {
    max-width: 400px;
    margin: 0 auto;
}

.graph-icons {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-bottom: 20px;
}

.chart-icon {
    font-size: 32px;
    opacity: 0.5;
}

.graph-placeholder p {
    color: #666;
    margin: 10px 0;
    font-size: 14px;
}

/* YouTube Analytics 고급 분석 스타일 */
.advanced-stats-section {
    margin: 30px 0;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin: 20px 0;
}

.stat-card {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.stat-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.stat-card h4 {
    color: #000000;
    font-size: 14px;
    margin-bottom: 10px;
    opacity: 0.8;
}

.stat-value {
    color: #000000;
    font-size: 24px;
    font-weight: bold;
}

.stat-value.positive {
    color: #4CAF50;
}

.stat-value.negative {
    color: #f44336;
}

.stat-value.neutral {
    color: #FFC107;
}

/* 인사이트 섹션 */
.insights-section {
    margin: 30px 0;
}

.insights-container {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.insight {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 20px;
    backdrop-filter: blur(10px);
    border-left: 4px solid;
    transition: transform 0.3s ease;
}

.insight:hover {
    transform: translateX(5px);
}

.insight.positive {
    border-left-color: #4CAF50;
    background: rgba(76, 175, 80, 0.1);
}

.insight.warning {
    border-left-color: #FF9800;
    background: rgba(255, 152, 0, 0.1);
}

.insight.suggestion {
    border-left-color: #2196F3;
    background: rgba(33, 150, 243, 0.1);
}

.insight.info {
    border-left-color: #607D8B;
    background: rgba(96, 125, 139, 0.1);
}

.insight h4 {
    color: #fff;
    margin-bottom: 10px;
    font-size: 16px;
}

.insight p {
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.6;
    white-space: pre-line;
}

/* 트래픽 소스 섹션 */
.traffic-section {
    margin: 30px 0;
}

.traffic-sources-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.traffic-source-item {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    backdrop-filter: blur(10px);
}

.source-name {
    color: #fff;
    font-weight: bold;
}

.source-stats {
    display: flex;
    gap: 15px;
    align-items: center;
}

.percentage {
    color: #4CAF50;
    font-weight: bold;
    font-size: 18px;
}

.views {
    color: rgba(255, 255, 255, 0.8);
    font-size: 14px;
}

/* 상위 성과 영상 섹션 */
.top-videos-section {
    margin: 30px 0;
}

.top-videos-container {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.top-video-item {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 15px;
    display: flex;
    gap: 15px;
    align-items: center;
    backdrop-filter: blur(10px);
    transition: transform 0.3s ease;
}

.top-video-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
}

.video-rank {
    background: linear-gradient(45deg, #FFD700, #FFA500);
    color: #000;
    font-weight: bold;
    padding: 8px 12px;
    border-radius: 50%;
    min-width: 40px;
    text-align: center;
}

/* Conflicting video-thumbnail definition removed - using main definition with absolute positioning */

.video-info {
    flex: 1;
}

.video-info h4 {
    color: #fff;
    margin-bottom: 8px;
    font-size: 14px;
    line-height: 1.4;
}

.video-stats {
    display: flex;
    gap: 15px;
    font-size: 12px;
}

.video-stats span {
    color: #000000;
}

/* Analytics 반응형 디자인 */
@media (max-width: 768px) {
    .stats-grid {
        grid-template-columns: 1fr 1fr;
        gap: 15px;
    }
    
    .stat-card {
        padding: 15px;
    }
    
    .stat-value {
        font-size: 20px;
    }
    
    .top-video-item {
        flex-direction: column;
        text-align: center;
    }
    
    .video-thumbnail {
        width: 120px;
        height: 68px;
    }
}

/* 트렌드 키워드 섹션 */
.trending-keywords-section {
    margin: 40px 0;
}

.trending-keywords-section h3 {
    font-size: 18px;
    font-weight: 600;
    color: #333;
    margin-bottom: 25px;
}

.keywords-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.keyword-category {
    background: #f8f9fa;
    border-radius: 12px;
    padding: 25px;
    border: 1px solid #e9ecef;
}

.keyword-category h4 {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    margin-bottom: 8px;
}

.keyword-label {
    display: inline-block;
    background: #007bff;
    color: white;
    font-size: 12px;
    padding: 4px 8px;
    border-radius: 12px;
    margin-bottom: 20px;
}

.keyword-suggestions {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.keyword-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 15px;
    background: white;
    border-radius: 8px;
    border: 1px solid #e9ecef;
}

.keyword-item span:first-child {
    font-size: 14px;
    color: #333;
    font-weight: 500;
}

.status.suggest {
    background: #ff6b6b;
    color: white;
    font-size: 12px;
    padding: 4px 12px;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.status.suggest:hover {
    background: #ff5252;
    transform: translateY(-1px);
}

/* 반응형 디자인 - 태블릿 */
@media (max-width: 1024px) {
    .container {
        padding: 16px;
    }
    
    .channel-header-section {
        padding: 24px;
        margin-bottom: 24px;
    }
    
    .metrics-grid {
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
        gap: 16px;
    }
    
    .tab-btn {
        padding: 12px 20px;
        font-size: 13px;
    }
}

/* 반응형 디자인 - 모바일 */
@media (max-width: 768px) {
    body {
        background: hsl(var(--background)) !important;
        background-color: white !important;
    }

    /* 모바일 배경 통일 */
    html,
    html * {
        background: white !important;
    }

    /* 모바일에서 특정 섹션들도 흰색 배경 유지 */
    .modern-hero-section,
    .testimonial-section,
    .getting-started-section,
    .stack-cards-section {
        background: white !important;
        background-color: white !important;
    }

    /* 텍스트 가독성을 위해 검은색 텍스트 강제 */
    body,
    p, h1, h2, h3, h4, h5, h6,
    .hero-title-line,
    .hero-description-modern,
    .testimonial-title,
    .testimonial-description {
        color: #000 !important;
    }

    .container {
        padding: 12px;
    }

    /* 모바일 UI 요소 최적화 */
    .modern-hero-section {
        min-height: 100vh !important;
        padding: 2rem 1rem !important;
    }

    .hero-main-title {
        font-size: 2rem !important;
        margin-bottom: 1rem !important;
    }

    .hero-description-modern {
        font-size: 1.1rem !important;
        margin-bottom: 2rem !important;
    }

    /* 스택 카드 모바일 최적화 */
    .stack-cards-container {
        padding: 2rem 1rem !important;
    }

    .stack-card {
        width: 100% !important;
        max-width: 300px !important;
        margin: 0 auto 1rem auto !important;
        position: static !important;
        transform: none !important;
    }

    /* 갤러리 모바일 최적화 */
    .testimonial-section {
        padding: 2rem 0 !important;
    }

    .testimonial-slide {
        width: 180px !important;
        height: 225px !important;
    }

    /* 터치 친화적 인터페이스 */
    .cta-button-modern {
        min-height: 48px !important;
        font-size: 1rem !important;
        padding: 12px 24px !important;
    }

    /* 모바일 네비게이션 최적화 */
    .sidebar-navigation {
        width: 100% !important;
        height: 100vh !important;
        transform: translateX(-100%) !important;
    }

    /* 가독성 향상 */
    .modern-footer-content {
        font-size: 0.9rem !important;
        text-align: center !important;
        flex-direction: column !important;
        gap: 0.5rem !important;
    }
    
    .channel-header-section {
        padding: 20px;
        margin-bottom: 20px;
        border-radius: 16px;
    }
    
    .channel-title-container {
        flex-direction: column;
        gap: 16px;
        align-items: stretch;
    }
    
    .page-title {
        font-size: 20px;
        text-align: center;
    }
    
    .user-profile {
        justify-content: center;
        text-align: center;
        gap: 12px;
    }
    
    .user-info-section {
        flex-direction: column;
        gap: 16px;
        padding: 16px;
        text-align: center;
    }
    
    .tab-navigation {
        width: 100%;
        justify-content: center;
    }
    
    .tab-btn {
        flex: 1;
        padding: 12px 16px;
        font-size: 12px;
    }
    
    .metrics-grid,
    .summary-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    
    .metric-card {
        padding: 20px;
        border-radius: 12px;
    }
    
    .channel-analysis-content {
        padding: 20px;
        border-radius: 12px;
    }
    
    .subscriber-categories {
        flex-wrap: wrap;
        gap: 8px;
    }
    
    .keywords-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .keyword-category {
        padding: 20px;
    }
    
    .channel-recommendations {
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
        gap: 15px;
    }
    
    .chart-container {
        margin-bottom: 24px;
    }
    
    .chart-container h3 {
        font-size: 16px;
        margin-bottom: 16px;
    }
}

/* 작은 모바일 화면 */
@media (max-width: 480px) {
    .container {
        padding: 8px;
    }
    
    .channel-header-section,
    .channel-analysis-content {
        padding: 16px;
        margin-bottom: 16px;
        border-radius: 12px;
    }
    
    .page-title {
        font-size: 18px;
    }
    
    .metric-card {
        padding: 16px;
    }
    
    .metric-card label {
        font-size: 12px;
    }
    
    .metric-value .value {
        font-size: 20px;
    }
    
    .tab-btn {
        padding: 10px 12px;
        font-size: 11px;
    }
    
    .keyword-category {
        padding: 16px;
    }
    
    .keyword-item {
        padding: 10px 12px;
    }
    
    .keyword-item span:first-child {
        font-size: 13px;
    }
    
    .status.suggest {
        font-size: 11px;
        padding: 3px 8px;
    }
    
    .channel-select-box {
        padding: 14px;
    }
}

/* 트렌드 분석 관련 스타일 */
.trend-loading {
    text-align: center;
    padding: 60px 20px;
    background: white;
    border-radius: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    border: 1px solid #e9ecef;
}

.loading-spinner {
    width: 40px;
    height: 40px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #667eea;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto 20px;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.trend-loading p {
    color: #666;
    font-size: 16px;
    margin: 0;
}

.trend-error {
    text-align: center;
    padding: 60px 20px;
    background: white;
    border-radius: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    border: 1px solid #e9ecef;
}

.error-icon {
    font-size: 48px;
    margin-bottom: 20px;
}

.trend-error h3 {
    color: #333;
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 10px;
}

.trend-error p {
    color: #666;
    font-size: 14px;
    margin-bottom: 30px;
}

.retry-btn {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
}

.retry-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.sample-btn {
    background: #6c757d;
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-left: 10px;
}

.sample-btn:hover {
    background: #5a6268;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(108, 117, 125, 0.3);
}

/* 채널 카드 스타일 - 메인 추천 레이아웃 */
.channel-recommendations {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
    margin-top: 20px;
    overflow: visible; /* 카드가 잘리지 않도록 */
}

.channel-card {
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
    border-radius: 16px;
    padding: 20px;
    border: 1px solid #e9ecef;
    box-shadow: 
        0 4px 20px rgba(0, 0, 0, 0.08),
        0 1px 3px rgba(0, 0, 0, 0.1);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.channel-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.channel-card:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 
        0 8px 30px rgba(0, 0, 0, 0.12),
        0 4px 10px rgba(0, 0, 0, 0.1);
}

.channel-card:hover::before {
    opacity: 1;
}

.channel-thumbnail {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    overflow: hidden;
    margin-bottom: 15px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.channel-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.channel-title {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    margin-bottom: 12px;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.channel-stats {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.subscriber-count {
    font-size: 14px;
    font-weight: 500;
    color: #666;
}

.trend-score {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    font-size: 12px;
    font-weight: 600;
    padding: 4px 8px;
    border-radius: 12px;
}

.channel-metrics {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-bottom: 20px;
}

.metric {
    text-align: center;
}

.metric-label {
    display: block;
    font-size: 12px;
    color: #888;
    margin-bottom: 4px;
}

.metric-value {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #333;
}

.channel-visit-btn {
    width: 100%;
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
    border: 1px solid #e9ecef;
    color: #333;
    padding: 10px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
}

.channel-visit-btn:hover {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-color: transparent;
    transform: translateY(-1px);
}

.no-channels {
    grid-column: 1 / -1;
    text-align: center;
    padding: 40px 20px;
    color: #666;
}

.no-channels-icon {
    font-size: 48px;
    margin-bottom: 20px;
}

.no-channels p {
    font-size: 14px;
    margin: 0;
}

/* 카테고리 탭 스타일 개선 */
.subscriber-categories {
    display: flex;
    gap: 8px;
    margin-bottom: 25px;
    flex-wrap: wrap;
}

.category-tab {
    padding: 8px 16px;
    border: 1px solid #e9ecef;
    border-radius: 20px;
    background: white;
    color: #666;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
}

.category-tab:hover {
    border-color: #667eea;
    color: #667eea;
}

.category-tab.active {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-color: transparent;
}

@media (max-width: 480px) {
    .stats-grid {
        grid-template-columns: 1fr;
    }
    
    .insight {
        padding: 15px;
    }
    
    .traffic-source-item {
        flex-direction: column;
        gap: 10px;
        text-align: center;
    }
    
    .login-required-card {
        padding: 30px 20px;
    }
    
    .keyword-item {
        flex-direction: column;
        gap: 10px;
        text-align: center;
    }
}

/* 추천 채널 스타일 */
.recommended-channels {
    margin-top: 20px;
    padding: 20px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 15px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.recommended-channel-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px;
    margin-bottom: 15px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
}

.recommended-channel-item:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.channel-rank {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    border-radius: 50%;
    font-weight: bold;
    font-size: 0.9rem;
    flex-shrink: 0;
}

.channel-thumbnail {
    width: 60px;
    height: 60px;
    border-radius: 10px;
    overflow: hidden;
    flex-shrink: 0;
}

.channel-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.channel-info {
    flex: 1;
    min-width: 0;
}

.channel-info h4 {
    margin: 0 0 8px 0;
    font-size: 1rem;
    font-weight: 600;
    color: #333;
    line-height: 1.3;
}

.channel-stats {
    display: flex;
    gap: 15px;
    margin-bottom: 5px;
    flex-wrap: wrap;
}

.channel-stats span {
    font-size: 0.85rem;
    color: #666;
    display: flex;
    align-items: center;
    gap: 5px;
}

.channel-stats .subscribers {
    color: #28a745;
    font-weight: 500;
}

.channel-stats .videos {
    color: #007bff;
    font-weight: 500;
}

.channel-stats .views {
    color: #6c757d;
    font-weight: 500;
}

.channel-category {
    font-size: 0.8rem;
    color: #999;
    background: rgba(102, 126, 234, 0.1);
    padding: 3px 8px;
    border-radius: 12px;
    display: inline-block;
    margin-top: 5px;
}

@media (max-width: 768px) {
    .recommended-channel-item {
        flex-direction: column;
        text-align: center;
        gap: 10px;
    }
    
    .channel-stats {
        justify-content: center;
        gap: 10px;
    }
    
    .channel-info h4 {
        font-size: 0.95rem;
    }
    
    .channel-stats span {
        font-size: 0.8rem;
    }
}

/* 키워드 분석 섹션 스타일 */
.keyword-analysis-section {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 15px;
    padding: 30px;
    margin: 0 0 30px 0; /* 상단 마진 제거, 하단만 유지 */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(10px);
}

.keyword-analysis-section .section-header h2 {
    color: #2c3e50;
    font-size: 1.8rem;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.keyword-analysis-section .section-description {
    color: #6c757d;
    font-size: 1rem;
    margin-bottom: 25px;
}

/* 키워드 로딩 상태 */
.keyword-loading {
    text-align: center;
    padding: 60px 20px;
}

.keyword-loading .loading-spinner {
    width: 40px;
    height: 40px;
    border: 4px solid #e3e3e3;
    border-top: 4px solid #667eea;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto 20px;
}

.keyword-loading p {
    color: #6c757d;
    font-size: 1.1rem;
}

/* 키워드 요약 정보 */
.keyword-summary-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
    padding: 20px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 12px;
    color: white;
}

.summary-stat {
    text-align: center;
}

.summary-stat .stat-number {
    display: block;
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 5px;
    color: white;
}

.summary-stat .stat-label {
    font-size: 0.9rem;
    opacity: 1;
    color: white;
    font-weight: 500;
}

/* 키워드 컨트롤 */
.keyword-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
    padding: 15px;
    background: rgba(102, 126, 234, 0.05);
    border-radius: 10px;
}

.control-group {
    display: flex;
    align-items: center;
    gap: 10px;
}

.control-group label {
    font-weight: 500;
    color: #2c3e50;
}

#keywordSortSelect {
    padding: 8px 12px;
    border: 2px solid #e9ecef;
    border-radius: 8px;
    background: white;
    font-size: 0.9rem;
    cursor: pointer;
    transition: border-color 0.3s ease;
}

#keywordSortSelect:focus {
    outline: none;
    border-color: #667eea;
}

.refresh-keywords-btn {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 500;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.refresh-keywords-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}

/* 키워드 그리드 */
.keyword-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 20px;
}

/* 키워드 카드 */
.keyword-card {
    background: white;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    border-left: 4px solid #667eea;
}

.keyword-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.keyword-rank {
    display: inline-block;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    font-weight: 700;
    font-size: 0.8rem;
    padding: 4px 10px;
    border-radius: 20px;
    margin-bottom: 10px;
}

.keyword-main {
    margin-bottom: 15px;
}

.keyword-text {
    font-size: 1.2rem;
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 8px;
}

.keyword-priority {
    display: flex;
    align-items: center;
    gap: 8px;
}

.priority-score {
    font-size: 1.1rem;
    font-weight: 700;
    padding: 4px 8px;
    border-radius: 6px;
}

.priority-high {
    background: #28a745;
    color: white;
}

.priority-medium {
    background: #ffc107;
    color: #212529;
}

.priority-low {
    background: #6c757d;
    color: white;
}

.priority-label {
    font-size: 0.8rem;
    color: #6c757d;
    font-weight: 500;
}

/* 키워드 메트릭 */
.keyword-metrics {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 15px;
}

.metric {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid #f8f9fa;
}

.metric-label {
    font-size: 0.85rem;
    color: #6c757d;
    font-weight: 500;
}

.metric-value {
    font-size: 0.85rem;
    font-weight: 600;
    color: #2c3e50;
}

.competition-low {
    color: #28a745;
}

.competition-medium {
    color: #ffc107;
}

.competition-high {
    color: #dc3545;
}

/* 키워드 트래픽 */
.keyword-traffic {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    padding: 10px;
    background: rgba(102, 126, 234, 0.05);
    border-radius: 8px;
}

.traffic-estimate {
    text-align: center;
}

.traffic-label {
    display: block;
    font-size: 0.75rem;
    color: #6c757d;
    margin-bottom: 2px;
}

.traffic-value {
    font-size: 0.9rem;
    font-weight: 600;
    color: #667eea;
}

/* 키워드 소스 */
.keyword-source {
    text-align: right;
}

.source-label {
    font-size: 0.75rem;
    color: #adb5bd;
    font-style: italic;
}

/* 키워드 에러 상태 */
.keyword-error {
    text-align: center;
    padding: 60px 20px;
    color: #6c757d;
}

.keyword-error .error-icon {
    font-size: 3rem;
    margin-bottom: 20px;
}

.keyword-error h3 {
    color: #2c3e50;
    margin-bottom: 10px;
}

.keyword-error .retry-btn {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 500;
    margin-top: 20px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.keyword-error .retry-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}

/* 모바일 반응형 */
@media (max-width: 768px) {
    .keyword-analysis-section {
        padding: 20px;
        margin: 20px 0;
    }
    
    .keyword-summary-stats {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
        padding: 15px;
    }
    
    .summary-stat .stat-number {
        font-size: 1.5rem;
    }
    
    .keyword-controls {
        flex-direction: column;
        gap: 15px;
        align-items: stretch;
    }
    
    .keyword-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    .keyword-card {
        padding: 15px;
    }
    
    .keyword-metrics {
        grid-template-columns: 1fr;
        gap: 5px;
    }
    
    .keyword-traffic {
        flex-direction: column;
        gap: 10px;
    }
}

/* 트렌딩 채널 섹션 스타일 */
.trending-channels-section {
    margin-top: 30px;
}

.trending-content {
    display: flex;
    gap: 30px;
    margin: 20px 0;
    align-items: flex-start; /* 상단 정렬 */
    flex-wrap: wrap; /* 필요시 줄바꿈 */
}

.trending-channels-list {
    flex: 1;
    min-width: 350px;
}

.trending-channel-item {
    display: flex;
    align-items: center;
    padding: 15px 20px;
    background: white;
    border-radius: 12px;
    margin-bottom: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    cursor: pointer;
    transition: all 0.3s ease;
    border-left: 4px solid transparent;
}

.trending-channel-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0,0,0,0.15);
    border-left-color: #ff6b6b;
}

.trending-channel-item.selected {
    border-left-color: #ff6b6b;
    background: #fff5f5;
    box-shadow: 0 4px 15px rgba(255,107,107,0.2);
}

.channel-rank {
    font-size: 18px;
    font-weight: bold;
    color: #ff6b6b;
    margin-right: 15px;
    min-width: 30px;
}

.channel-thumbnail-wrapper {
    margin-right: 15px;
}

.channel-thumbnail {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
}

.channel-info {
    flex: 1;
}

.channel-title {
    font-weight: 600;
    font-size: 16px;
    margin-bottom: 5px;
    color: #333;
}

.channel-stats {
    font-size: 14px;
    color: #666;
}

.growth-indicator {
    background: linear-gradient(135deg, #ff6b6b, #ee5a5a);
    color: white;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    margin-left: 10px;
}

.selected-channel-preview {
    flex: 1;
    min-width: 400px;
    background: white;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    position: relative;
    overflow: hidden; /* 내용이 넘치지 않도록 */
}

.preview-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 300px;
    color: #999;
    text-align: center;
}

.preview-icon {
    font-size: 48px;
    margin-bottom: 15px;
}

.video-preview {
    text-align: center;
}

.video-preview iframe {
    width: 100%;
    height: 225px;
    border-radius: 8px;
    border: none;
}

.video-info {
    margin-top: 15px;
    text-align: left;
}

.video-title {
    font-weight: 600;
    font-size: 16px;
    margin-bottom: 8px;
    color: #333;
}

.video-stats {
    display: flex;
    gap: 15px;
    font-size: 14px;
    color: #666;
}

.stat-item {
    display: flex;
    align-items: center;
    gap: 5px;
}

/* 핫한 영상 섹션 스타일 */
.hot-videos-section {
    margin-top: 40px;
    padding-top: 30px;
    border-top: 1px solid #eee;
}

.hot-videos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.hot-video-card {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
    cursor: pointer;
}

.hot-video-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.15);
}

/* Hot video card thumbnail wrapper */
.video-thumbnail-wrapper {
    position: relative;
    width: 100%;
    height: 160px;
    overflow: hidden;
    border-radius: 8px 8px 0 0;
}

.hot-video-card .video-thumbnail {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.video-rank-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background: rgba(255,107,107,0.9);
    color: white;
    padding: 4px 8px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: bold;
}

.video-card-content {
    padding: 15px;
}

.video-card-title {
    font-weight: 600;
    font-size: 15px;
    line-height: 1.4;
    margin-bottom: 8px;
    color: #333;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.video-card-channel {
    font-size: 13px;
    color: #666;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.channel-mini-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    object-fit: cover;
}

.video-card-stats {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: #999;
}

.performance-badge {
    background: linear-gradient(135deg, #4ecdc4, #45b7b8);
    color: white;
    padding: 2px 6px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 600;
}

/* 반응형 디자인 */
@media (max-width: 768px) {
    .trend-section-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }
    
    .trend-section-header .tab-navigation {
        align-self: flex-end;
    }
    
    .trending-content {
        flex-direction: column;
        gap: 20px;
    }
    
    .trending-channels-list {
        min-width: unset;
    }
    
    .selected-channel-preview {
        min-width: unset;
    }
    
    .hot-videos-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    .trending-channel-item {
        padding: 12px 15px;
    }
    
    .channel-thumbnail {
        width: 40px;
        height: 40px;
    }
    
    .channel-title {
        font-size: 14px;
    }
    
    .channel-stats {
        font-size: 12px;
    }
}

/* ========================================
   영상 기획 페이지 스타일
======================================== */

.planning-container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 20px;
}

/* API 키 설정 섹션 */
.api-key-section {
    background: linear-gradient(135deg, #f8f9fa, #e9ecef);
    border: 2px solid #dee2e6;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 24px;
    transition: all 0.3s ease;
}

.api-key-section:hover {
    border-color: #007bff;
    box-shadow: 0 4px 12px rgba(0, 123, 255, 0.1);
}

.api-key-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.api-key-header h3 {
    margin: 0;
    color: #495057;
    font-size: 1.1em;
}

.api-key-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
}

.api-key-toggle input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: #007bff;
}

.api-key-toggle label {
    font-weight: 500;
    color: #495057;
    cursor: pointer;
    user-select: none;
}

.api-key-input {
    animation: slideDown 0.3s ease-out;
}

@keyframes slideDown {
    from {
        opacity: 0;
        max-height: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        max-height: 200px;
        transform: translateY(0);
    }
}

.security-notice {
    color: #28a745 !important;
    font-weight: 500;
    background: #d4edda;
    padding: 8px 12px;
    border-radius: 6px;
    border-left: 3px solid #28a745;
    margin-top: 8px !important;
}

.security-notice a {
    color: #007bff;
    text-decoration: none;
    font-weight: 600;
}

.security-notice a:hover {
    text-decoration: underline;
}

.api-key-actions {
    display: flex;
    gap: 12px;
    margin-top: 16px;
}

.api-key-save-btn, .api-key-test-btn, .api-key-load-btn, .api-key-delete-btn {
    padding: 10px 18px;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-size: 0.9em;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    position: relative;
    overflow: hidden;
    text-transform: none;
    letter-spacing: 0.025em;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    min-width: 120px;
    justify-content: center;
}

/* 공통 hover 효과 */
.api-key-save-btn:hover, .api-key-test-btn:hover, .api-key-load-btn:hover, .api-key-delete-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* 공통 active 효과 */
.api-key-save-btn:active, .api-key-test-btn:active, .api-key-load-btn:active, .api-key-delete-btn:active {
    transform: translateY(0);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

/* 저장 버튼 - 파란색 그라데이션 */
.api-key-save-btn {
    background: linear-gradient(135deg, #007bff, #0056b3);
    color: white;
    border: 1px solid #0056b3;
}

.api-key-save-btn:hover {
    background: linear-gradient(135deg, #0056b3, #004085);
    border-color: #004085;
}

/* 테스트 버튼 - 회색 그라데이션 */
.api-key-test-btn {
    background: linear-gradient(135deg, #6c757d, #495057);
    color: white;
    border: 1px solid #495057;
}

.api-key-test-btn:hover {
    background: linear-gradient(135deg, #495057, #343a40);
    border-color: #343a40;
}

/* 불러오기 버튼 - 청록색 그라데이션 */
.api-key-load-btn {
    background: linear-gradient(135deg, #20c997, #17a085);
    color: white;
    border: 1px solid #17a085;
    position: relative;
}

.api-key-load-btn:hover {
    background: linear-gradient(135deg, #17a085, #138f7a);
    border-color: #138f7a;
}

.api-key-load-btn:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(32, 201, 151, 0.25);
}

/* 삭제 버튼 - 빨간색 그라데이션 */
.api-key-delete-btn {
    background: linear-gradient(135deg, #dc3545, #c82333);
    color: white;
    border: 1px solid #c82333;
    position: relative;
}

.api-key-delete-btn:hover {
    background: linear-gradient(135deg, #c82333, #a71e2a);
    border-color: #a71e2a;
}

.api-key-delete-btn:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.25);
}

/* 버튼 로딩 효과 */
.api-key-load-btn.loading, .api-key-delete-btn.loading {
    pointer-events: none;
    opacity: 0.8;
}

.api-key-load-btn.loading::after, .api-key-delete-btn.loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top: 2px solid white;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}

/* 버튼 비활성화 상태 */
.api-key-load-btn:disabled, .api-key-delete-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
}

/* 아이콘 애니메이션 */
.api-key-load-btn:hover .icon, .api-key-delete-btn:hover .icon {
    animation: bounce 0.6s ease-in-out;
}

@keyframes bounce {
    0%, 20%, 60%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-3px);
    }
    80% {
        transform: translateY(-1px);
    }
}

.api-key-status {
    margin-top: 12px;
    padding: 8px 12px;
    border-radius: 6px;
    font-weight: 500;
    text-align: center;
    min-height: 20px;
}

.api-key-status.success {
    background: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.api-key-status.error {
    background: #f8d7da;
    color: #721c24;
    border: 1px solid #f1b0b7;
}

.api-key-status.testing {
    background: #d1ecf1;
    color: #0c5460;
    border: 1px solid #b8daff;
}

/* 기획 폼 섹션 */
.planning-form-section {
    background: white;
    border-radius: 15px;
    padding: 40px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
    margin-bottom: 30px;
}

.form-header {
    text-align: center;
    margin-bottom: 40px;
}

.form-header h2 {
    font-size: 28px;
    font-weight: 700;
    color: #2c3e50;
    margin-bottom: 12px;
}

.form-header p {
    font-size: 16px;
    color: #7f8c8d;
    line-height: 1.5;
}

/* 폼 그룹 스타일 */
.form-group {
    margin-bottom: 30px;
}

.form-group label {
    display: block;
    font-size: 18px;
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 12px;
}

.form-group input,
.form-group select {
    width: 100%;
    padding: 16px 20px;
    border: 2px solid #e9ecef;
    border-radius: 12px;
    font-size: 16px;
    transition: all 0.3s ease;
    background: #fff;
    box-sizing: border-box;
}

.form-group input:focus,
.form-group select:focus {
    outline: none;
    border-color: #ff6b35;
    box-shadow: 0 0 0 3px rgba(255, 107, 53, 0.1);
}

.form-help {
    font-size: 14px;
    color: #95a5a6;
    margin-top: 8px;
    line-height: 1.4;
}

/* 기획 유형 라디오 옵션 */
.composition-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin-top: 15px;
}

.composition-option {
    position: relative;
}

.composition-option input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.composition-option label {
    display: block;
    background: #f8f9fa;
    border: 2px solid #e9ecef;
    border-radius: 12px;
    padding: 20px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
}

.composition-option input[type="radio"]:checked + label {
    background: linear-gradient(135deg, #ff6b35, #f7931e);
    color: white;
    border-color: #ff6b35;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(255, 107, 53, 0.3);
}

.option-header {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 8px;
}

.option-description {
    font-size: 14px;
    opacity: 0.9;
    line-height: 1.4;
}

/* 제출 버튼 */
.planning-submit-btn {
    width: 100%;
    background: linear-gradient(135deg, #ff6b35, #f7931e);
    color: white;
    border: none;
    padding: 18px 30px;
    border-radius: 12px;
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 20px;
}

.planning-submit-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(255, 107, 53, 0.4);
}

.planning-submit-btn:active {
    transform: translateY(0);
}

.btn-icon {
    font-size: 20px;
}

/* 로딩 상태 */
.planning-loading {
    text-align: center;
    padding: 60px 20px;
    background: white;
    border-radius: 15px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}

.planning-loading .loading-spinner {
    width: 50px;
    height: 50px;
    margin: 0 auto 20px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #ff6b35;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.planning-loading p {
    font-size: 18px;
    color: #2c3e50;
    margin-bottom: 30px;
}

.loading-tips {
    background: #f8f9fa;
    border-radius: 12px;
    padding: 20px;
    margin-top: 20px;
}

.loading-tips p:first-child {
    font-weight: 600;
    color: #ff6b35;
    margin-bottom: 10px;
}

.tip-rotation p {
    font-size: 14px;
    color: #666;
    line-height: 1.5;
    margin: 0;
}

/* 결과 표시 섹션 */
.planning-result-section {
    background: white;
    border-radius: 15px;
    padding: 40px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}

.result-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 2px solid #f8f9fa;
}

.result-header h2 {
    font-size: 24px;
    font-weight: 700;
    color: #2c3e50;
}

.new-planning-btn {
    background: #6c757d;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.new-planning-btn:hover {
    background: #5a6268;
    transform: translateY(-1px);
}

/* 기획 요약 */
.planning-summary {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 30px;
    border-radius: 12px;
    margin-bottom: 30px;
}

.summary-header {
    margin-bottom: 20px;
}

.summary-header h3 {
    font-size: 20px;
    margin-bottom: 15px;
}

.planning-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

.meta-item {
    background: rgba(255,255,255,0.2);
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 13px;
}

.summary-content h4 {
    font-size: 22px;
    margin-bottom: 10px;
    font-weight: 700;
}

.summary-content p {
    font-size: 16px;
    line-height: 1.6;
    opacity: 0.95;
}

/* 기획 세부사항 */
.planning-details {
    space-y: 30px;
}

.detail-section {
    margin-bottom: 35px;
    padding: 25px;
    background: #f8f9fa;
    border-radius: 12px;
    border-left: 4px solid #ff6b35;
}

.detail-section h4 {
    font-size: 18px;
    font-weight: 700;
    color: #2c3e50;
    margin-bottom: 15px;
}

.detail-section p {
    font-size: 15px;
    line-height: 1.6;
    color: #495057;
}

/* 타임라인 스타일 */
.timeline {
    position: relative;
    padding-left: 30px;
}

.timeline-item {
    display: flex;
    margin-bottom: 25px;
    position: relative;
}

.timeline-marker {
    width: 12px;
    height: 12px;
    background: #ff6b35;
    border-radius: 50%;
    position: absolute;
    left: -36px;
    top: 8px;
    z-index: 2;
}

.timeline-marker::before {
    content: '';
    position: absolute;
    left: 5px;
    top: 12px;
    width: 2px;
    height: 40px;
    background: #e9ecef;
    z-index: 1;
}

.timeline-item:last-child .timeline-marker::before {
    display: none;
}

.timeline-content h5 {
    font-size: 16px;
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 8px;
}

.timeline-content p {
    font-size: 14px;
    line-height: 1.5;
    color: #6c757d;
    margin: 0;
}

/* 핵심 포인트 */
.key-points {
    list-style: none;
    padding: 0;
}

.key-points li {
    background: white;
    padding: 15px 20px;
    margin-bottom: 10px;
    border-radius: 8px;
    border-left: 3px solid #ff6b35;
    font-size: 15px;
    line-height: 1.5;
    color: #495057;
    position: relative;
}

.key-points li::before {
    content: '💡';
    margin-right: 10px;
}

/* 에러 상태 */
.planning-error {
    text-align: center;
    padding: 40px 20px;
}

.error-icon {
    font-size: 48px;
    margin-bottom: 20px;
}

.planning-error h3 {
    font-size: 20px;
    color: #dc3545;
    margin-bottom: 10px;
}

.planning-error p {
    font-size: 16px;
    color: #6c757d;
    margin-bottom: 25px;
}

.retry-btn {
    background: #dc3545;
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 8px;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.retry-btn:hover {
    background: #c82333;
    transform: translateY(-1px);
}

/* 반응형 디자인 */
@media (max-width: 768px) {
    .planning-container {
        padding: 15px;
    }
    
    .planning-form-section,
    .planning-result-section {
        padding: 25px 20px;
    }
    
    .form-header h2 {
        font-size: 24px;
    }
    
    .composition-options {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    .result-header {
        flex-direction: column;
        gap: 15px;
        align-items: flex-start;
    }
    
    .planning-meta {
        flex-direction: column;
        gap: 8px;
    }
    
    .timeline {
        padding-left: 20px;
    }
    
    .timeline-marker {
        left: -26px;
    }
}

/* ========================================
   대본 작성 페이지 스타일
======================================== */

/* 기획안 없음 상태 */
.no-planning-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 60vh;
    padding: 40px 20px;
}

.no-planning-card {
    background: white;
    border-radius: 15px;
    padding: 60px 40px;
    text-align: center;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
    max-width: 500px;
    width: 100%;
}

.no-planning-icon {
    font-size: 64px;
    margin-bottom: 25px;
}

.no-planning-card h2 {
    font-size: 24px;
    color: #2c3e50;
    margin-bottom: 15px;
}

.no-planning-card p {
    font-size: 16px;
    color: #7f8c8d;
    margin-bottom: 30px;
    line-height: 1.6;
}

.go-planning-btn {
    background: linear-gradient(135deg, #ff6b35, #f7931e);
    color: white;
    border: none;
    padding: 15px 30px;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.go-planning-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(255, 107, 53, 0.4);
}

/* 스크립트 컨테이너 */
.script-container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 20px;
}

/* 기획안 요약 카드 */
.planning-summary-card {
    background: white;
    border-radius: 15px;
    padding: 30px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
    margin-bottom: 30px;
    border-left: 4px solid #ff6b35;
}

.planning-summary-card .summary-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.planning-summary-card h3 {
    font-size: 20px;
    font-weight: 700;
    color: #2c3e50;
}

.back-to-planning-btn {
    background: #6c757d;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.back-to-planning-btn:hover {
    background: #5a6268;
}

.planning-summary-card h4 {
    font-size: 18px;
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 10px;
}

.planning-summary-card p {
    font-size: 15px;
    color: #495057;
    line-height: 1.6;
    margin-bottom: 15px;
}

.summary-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.meta-tag {
    background: #f8f9fa;
    color: #495057;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 13px;
    border: 1px solid #e9ecef;
}

/* 템플릿 선택 섹션 */
.template-selection-section {
    background: white;
    border-radius: 15px;
    padding: 40px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
    margin-bottom: 30px;
}

.template-header {
    text-align: center;
    margin-bottom: 40px;
}

.template-header h2 {
    font-size: 28px;
    font-weight: 700;
    color: #2c3e50;
    margin-bottom: 12px;
}

.template-header p {
    font-size: 16px;
    color: #7f8c8d;
    line-height: 1.5;
}

/* 템플릿 옵션 */
.template-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 25px;
    margin-bottom: 40px;
}

.template-option {
    position: relative;
}

.template-option input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.template-option label {
    display: block;
    background: #f8f9fa;
    border: 2px solid #e9ecef;
    border-radius: 15px;
    padding: 25px;
    cursor: pointer;
    transition: all 0.3s ease;
    height: 100%;
    box-sizing: border-box;
}

.template-option input[type="radio"]:checked + label {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-color: #667eea;
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3);
}

.template-icon {
    font-size: 32px;
    margin-bottom: 15px;
}

.template-title {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 12px;
}

.template-description {
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 15px;
    opacity: 0.9;
}

.template-suitable {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.suitable-tag {
    background: rgba(255, 255, 255, 0.2);
    padding: 4px 10px;
    border-radius: 15px;
    font-size: 12px;
    font-weight: 500;
}

.template-option input[type="radio"]:not(:checked) + label .suitable-tag {
    background: #e9ecef;
    color: #6c757d;
}

/* 대본 생성 버튼 */
.generate-script-btn {
    width: 100%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    padding: 18px 30px;
    border-radius: 12px;
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.generate-script-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
}

/* 대본 결과 섹션 */
.script-result-section {
    background: white;
    border-radius: 15px;
    padding: 40px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}

.script-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 2px solid #f8f9fa;
}

.script-header h2 {
    font-size: 24px;
    font-weight: 700;
    color: #2c3e50;
}

.script-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.script-actions button {
    padding: 10px 16px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    border: none;
}

.copy-script-btn {
    background: #28a745;
    color: white;
}

.copy-script-btn:hover {
    background: #218838;
    transform: translateY(-1px);
}

.download-script-btn {
    background: #007bff;
    color: white;
}

.download-script-btn:hover {
    background: #0069d9;
    transform: translateY(-1px);
}

.new-template-btn {
    background: #6c757d;
    color: white;
}

.new-template-btn:hover {
    background: #5a6268;
    transform: translateY(-1px);
}

/* 대본 콘텐츠 */
.script-content {
    margin-top: 20px;
}

.script-text {
    background: #f8f9fa;
    border-radius: 12px;
    padding: 30px;
    border-left: 4px solid #667eea;
}

.script-text pre {
    font-family: inherit;
    font-size: 15px;
    line-height: 1.8;
    color: #2c3e50;
    margin: 0;
    white-space: pre-wrap;
    word-wrap: break-word;
}

/* 대본 로딩 상태 */
.script-loading {
    text-align: center;
    padding: 60px 20px;
    background: white;
    border-radius: 15px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}

.script-loading .loading-spinner {
    width: 50px;
    height: 50px;
    margin: 0 auto 20px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #667eea;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

.script-loading p {
    font-size: 18px;
    color: #2c3e50;
    margin-bottom: 30px;
}

/* 에러 상태 */
.script-error {
    text-align: center;
    padding: 40px 20px;
}

.script-error .error-icon {
    font-size: 48px;
    margin-bottom: 20px;
}

.script-error h3 {
    font-size: 20px;
    color: #dc3545;
    margin-bottom: 10px;
}

.script-error p {
    font-size: 16px;
    color: #6c757d;
    margin-bottom: 25px;
}

.script-error .retry-btn {
    background: #dc3545;
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 8px;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.script-error .retry-btn:hover {
    background: #c82333;
    transform: translateY(-1px);
}

/* 결과 액션 버튼들 */
.result-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.script-writing-btn {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

.script-writing-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

/* 반응형 디자인 */
@media (max-width: 768px) {
    .script-container {
        padding: 15px;
    }
    
    .planning-summary-card,
    .template-selection-section,
    .script-result-section {
        padding: 25px 20px;
    }
    
    .template-header h2 {
        font-size: 24px;
    }
    
    .template-options {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .script-header {
        flex-direction: column;
        gap: 15px;
        align-items: flex-start;
    }
    
    .script-actions {
        width: 100%;
        justify-content: flex-start;
    }
    
    .result-actions {
        width: 100%;
        justify-content: flex-end;
    }
    
    .planning-summary-card .summary-header {
        flex-direction: column;
        gap: 15px;
        align-items: flex-start;
    }
    
    .summary-meta {
        flex-direction: column;
        gap: 8px;
    }
    
    .script-text {
        padding: 20px;
    }
    
    .script-text pre {
        font-size: 14px;
        line-height: 1.7;
    }
}

/* ========================================
   스마트 모니터링 채널 분석 스타일
======================================== */

.monitoring-loading {
    text-align: center;
    padding: 40px 20px;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.05), rgba(74, 144, 226, 0.02));
    border-radius: 12px;
    border: 2px dashed rgba(102, 126, 234, 0.2);
}

.monitoring-loading .loading-spinner {
    width: 40px;
    height: 40px;
    border: 4px solid #e3f2fd;
    border-top: 4px solid #667eea;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto 20px auto;
}

.monitoring-loading p {
    font-size: 1.1rem;
    font-weight: 500;
    color: #333;
    margin-bottom: 10px;
}

.monitoring-loading small {
    font-size: 0.9rem;
    color: #666;
    line-height: 1.4;
}

/* 분석 성공 메시지 애니메이션 */
@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideOutRight {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(100%);
        opacity: 0;
    }
}

.analysis-success-message .success-icon {
    font-size: 1.2rem;
    animation: sparkle 1.5s ease-in-out infinite;
}

/* 추가 로딩 스피너 애니메이션 */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* 모니터링 채널 개선된 스타일 */
.recommended-channel {
    transition: all 0.3s ease;
    border-radius: 8px;
    padding: 12px;
}

.recommended-channel:hover {
    background: rgba(102, 126, 234, 0.05);
    transform: translateX(5px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.no-channels {
    text-align: center;
    padding: 40px 20px;
    color: #666;
}

.no-channels-icon {
    font-size: 3rem;
    margin-bottom: 15px;
    opacity: 0.7;
}

/* === 내 채널분석 스타일 === */
.my-channel-analysis-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

.analysis-input-section {
    background: white;
    border-radius: 12px;
    padding: 30px;
    margin-bottom: 30px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
    border: 1px solid #e9ecef;
}

.account-management-section {
    margin-top: 25px;
}

.account-selector-container {
    margin-bottom: 25px;
}

.account-selector-container label {
    display: block;
    font-weight: 600;
    color: #495057;
    margin-bottom: 10px;
    font-size: 1.1rem;
}

.account-selector-wrapper {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}

.google-account-select {
    flex: 1;
    min-width: 250px;
    padding: 12px 16px;
    border: 2px solid #e9ecef;
    border-radius: 8px;
    font-size: 1rem;
    background: white;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.google-account-select:focus {
    outline: none;
    border-color: #007bff;
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
}

.add-account-btn {
    background: linear-gradient(135deg, #28a745, #20c997);
    color: white;
    border: none;
    padding: 12px 20px;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.add-account-btn:hover {
    background: linear-gradient(135deg, #218838, #1ea87a);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(40, 167, 69, 0.3);
}

.analyze-my-channel-btn {
    background: linear-gradient(135deg, #007bff, #6610f2);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.analyze-my-channel-btn:hover {
    background: linear-gradient(135deg, #0056b3, #520dc2);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 123, 255, 0.3);
}

.analyze-my-channel-btn:disabled {
    background: #6c757d;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.account-list {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 20px;
    margin-top: 20px;
}

.account-list h4 {
    color: #495057;
    margin-bottom: 15px;
    font-size: 1.1rem;
}

.connected-accounts {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.account-card {
    background: white;
    border-radius: 8px;
    padding: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    border: 1px solid #e9ecef;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.account-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

.account-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.account-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #e9ecef;
}

.account-details {
    display: flex;
    flex-direction: column;
}

.account-name {
    font-weight: 600;
    color: #212529;
    font-size: 1rem;
}

.account-email {
    color: #6c757d;
    font-size: 0.9rem;
    margin-top: 2px;
}

.account-channel {
    color: #007bff;
    font-size: 0.85rem;
    margin-top: 4px;
    font-weight: 500;
}

.remove-account-btn {
    background: #dc3545;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 0.9rem;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.remove-account-btn:hover {
    background: #c82333;
}

.analysis-help {
    background: #e7f3ff;
    border: 1px solid #b3d9ff;
    border-radius: 8px;
    padding: 20px;
    margin-top: 25px;
}

.analysis-help p {
    color: #0056b3;
    font-weight: 600;
    margin-bottom: 12px;
}

.analysis-help ul {
    color: #495057;
    line-height: 1.6;
}

.analysis-help li {
    margin-bottom: 6px;
}

/* 로딩 상태 */
.loading-spinner {
    width: 50px;
    height: 50px;
    border: 5px solid #e9ecef;
    border-top: 5px solid #007bff;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto 20px;
}

/* 결과 섹션 */
.my-channel-results-section {
    margin-top: 30px;
}

.my-channel-results-section h3 {
    color: #212529;
    margin-bottom: 30px;
    font-size: 1.8rem;
    text-align: center;
}

.channel-overview-card {
    background: white;
    border-radius: 12px;
    padding: 30px;
    margin-bottom: 30px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
    border: 1px solid #e9ecef;
}

.channel-header {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

.channel-thumbnail {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #e9ecef;
}

.channel-info {
    flex: 1;
}

.channel-title {
    font-size: 1.5rem;
    color: #212529;
    margin-bottom: 10px;
    font-weight: 700;
}

.channel-description {
    color: #6c757d;
    line-height: 1.6;
    margin-bottom: 15px;
}

.channel-stats {
    display: flex;
    gap: 25px;
    flex-wrap: wrap;
}

.stat-item {
    background: #f8f9fa;
    padding: 8px 16px;
    border-radius: 20px;
    font-weight: 600;
    color: #495057;
    font-size: 0.9rem;
    border: 1px solid #e9ecef;
}

.performance-metrics-section,
.recent-videos-section,
.analytics-charts-section {
    background: white;
    border-radius: 12px;
    padding: 30px;
    margin-bottom: 30px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
    border: 1px solid #e9ecef;
}

.performance-metrics-section h4,
.recent-videos-section h4,
.analytics-charts-section h4 {
    color: #212529;
    margin-bottom: 25px;
    font-size: 1.3rem;
    padding-bottom: 10px;
    border-bottom: 2px solid #e9ecef;
}

.metrics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
}

.metric-card {
    background: linear-gradient(135deg, #f8f9fa, #e9ecef);
    border-radius: 10px;
    padding: 25px 20px;
    text-align: center;
    border: 1px solid #dee2e6;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.metric-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.metric-title {
    font-size: 0.9rem;
    color: #6c757d;
    margin-bottom: 10px;
    font-weight: 600;
}

.metric-value {
    font-size: 2rem;
    font-weight: 700;
    color: #007bff;
}

.recent-videos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
}

.video-performance-card {
    background: #f8f9fa;
    border-radius: 10px;
    padding: 15px;
    border: 1px solid #e9ecef;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 15px;
}

.video-performance-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}

.recent-videos-section .video-performance-card .video-thumbnail {
    flex-shrink: 0 !important;
    width: 180px !important;
    height: 180px !important;
    position: relative !important;
    padding-top: 0 !important;
}

.recent-videos-section .video-performance-card .video-thumbnail img {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 8px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
    display: block !important;
    transition: transform 0.3s ease, filter 0.3s ease !important;
}

.recent-videos-section .video-performance-card .video-thumbnail:hover img {
    transform: scale(1.05) !important;
    filter: brightness(0.9) !important;
}

.recent-videos-section .video-performance-card .video-details {
    flex: 1;
    text-align: left;
}

/* 채널찾기(영상분석) 섹션 썸네일 스타일 - 16:9 비율 */
#videoAnalysisSection .video-thumbnail-container {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    padding-top: 0 !important;
    cursor: pointer !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

#videoAnalysisSection .video-thumbnail {
    position: static !important;
    width: 100% !important;
    height: auto !important;
    object-fit: cover !important;
    transition: filter 0.3s ease !important;
    display: block !important;
    border-radius: 10px !important;
}

#videoAnalysisSection .video-thumbnail-container:hover {
    transform: scale(1.02) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.15) !important;
}

#videoAnalysisSection .video-thumbnail-container:hover .video-thumbnail {
    filter: brightness(0.8) !important;
}

/* 채널찾기 섹션의 shorts-badge 위치 조정 - 오른쪽 상단 */
#videoAnalysisSection .shorts-badge {
    position: absolute !important;
    top: 8px !important;
    right: 8px !important;
    background: linear-gradient(135deg, #ff6b35, #f7931e) !important;
    color: white !important;
    padding: 4px 8px !important;
    border-radius: 12px !important;
    font-size: 12px !important;
    font-weight: bold !important;
    z-index: 10 !important;
    backdrop-filter: blur(4px) !important;
    text-transform: uppercase !important;
    box-shadow: 0 2px 8px rgba(255, 107, 53, 0.3) !important;
}

/* 영상찾기 섹션의 shorts-badge 위치 조정 - 오른쪽 상단 */
#videoSearchSection .shorts-badge,
#searchResults .shorts-badge {
    position: absolute !important;
    top: 8px !important;
    right: 8px !important;
    background: linear-gradient(135deg, #ff6b35, #f7931e) !important;
    color: white !important;
    padding: 4px 8px !important;
    border-radius: 12px !important;
    font-size: 11px !important;
    font-weight: bold !important;
    z-index: 15 !important;
    backdrop-filter: blur(4px) !important;
    text-transform: uppercase !important;
    box-shadow: 0 2px 8px rgba(255, 107, 53, 0.3) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
    letter-spacing: 0.5px !important;
    animation: shortsGlow 2s ease-in-out infinite alternate !important;
}

/* 영상찾기 섹션의 shorts-badge 전용 아이콘 */
#videoSearchSection .shorts-badge::before,
#searchResults .shorts-badge::before {
    content: "📹" !important;
    margin-right: 3px !important;
    font-size: 10px !important;
}

/* 영상찾기 섹션의 Shorts 영상 카드 스타일링 */
#videoSearchSection .shorts-card,
#searchResults .shorts-card {
    border: 2px solid #ff6b35 !important;
    box-shadow: 0 4px 12px rgba(255, 107, 53, 0.2) !important;
}

/* Shorts 글로우 애니메이션 강화 */
@keyframes shortsGlow {
    0% {
        box-shadow: 0 2px 8px rgba(255, 107, 53, 0.3) !important;
    }
    100% {
        box-shadow: 0 3px 15px rgba(255, 107, 53, 0.6) !important;
    }
}

/* 영상찾기 섹션의 고성과 영상 노란색 배경 스타일링 */
#videoSearchSection .high-performance-video,
#searchResults .high-performance-video {
    background: linear-gradient(135deg, #fff3cd, #fff8e1) !important;
    border: 2px solid #ffc107 !important;
    box-shadow: 0 4px 12px rgba(255, 193, 7, 0.25) !important;
    position: relative !important;
}

/* 고성과 배지는 HTML 요소로 처리하므로 CSS ::before는 제거 */

.video-title {
    font-size: 1rem;
    color: #212529;
    margin-bottom: 10px;
    font-weight: 600;
    line-height: 1.4;
}

.video-stats {
    display: flex;
    gap: 15px;
    margin-bottom: 8px;
}

.video-stats span {
    font-size: 0.85rem;
    color: #6c757d;
}

.video-date {
    font-size: 0.8rem;
    color: #adb5bd;
}

.charts-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 30px;
}

.chart-item {
    background: #f8f9fa;
    border-radius: 10px;
    padding: 20px;
    border: 1px solid #e9ecef;
}

.chart-item h5 {
    color: #495057;
    margin-bottom: 15px;
    text-align: center;
    font-size: 1.1rem;
}

/* 반응형 개선 */
@media (max-width: 768px) {
    .monitoring-loading {
        padding: 30px 15px;
    }
    
    .analysis-success-message {
        top: 10px !important;
        right: 10px !important;
        left: 10px !important;
        right: auto !important;
        font-size: 0.9rem;
        padding: 10px 15px !important;
    }
    
    .my-channel-analysis-container {
        padding: 15px;
    }
    
    .analysis-input-section {
        padding: 20px;
    }
    
    .account-selector-wrapper {
        flex-direction: column;
        align-items: stretch;
    }
    
    .google-account-select {
        min-width: auto;
    }
    
    .channel-header {
        flex-direction: column;
        text-align: center;
    }
    
    .channel-stats {
        justify-content: center;
    }
    
    .metrics-grid {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    }
    
    .charts-container {
        grid-template-columns: 1fr;
    }
    
    .chart-item {
        min-width: auto;
    }
    
    .recent-videos-grid {
        grid-template-columns: 1fr;
    }
    
    .recent-videos-section .video-thumbnail {
        max-width: 250px;
    }
}

/* ========================================
   개선된 로그인 UI 스타일
======================================== */

/* 기존 로그인 스타일을 덮어씀 */
.login-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 60vh;
    padding: 20px;
}

.login-card {
    background: white;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
    padding: 40px;
    max-width: 450px;
    width: 100%;
    text-align: center;
}

.login-header h2 {
    margin-bottom: 10px;
    color: #333;
    font-size: 28px;
    font-weight: 600;
}

.login-header p {
    color: #666;
    margin-bottom: 30px;
    font-size: 16px;
    line-height: 1.5;
}

.login-methods {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 30px;
}

.login-btn-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.login-icon {
    width: 20px;
    height: 20px;
}

.kakao-login-btn {
    background: #FEE500;
    color: #3C1E1E;
    border: none;
    border-radius: 12px;
    padding: 16px 24px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    width: 100%;
}

.kakao-login-btn:hover {
    background: #FADA0C;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(254, 229, 0, 0.3);
}

.google-login-btn {
    background: white;
    color: #333;
    border: 2px solid #ddd;
    border-radius: 12px;
    padding: 16px 24px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    width: 100%;
}

.google-login-btn:hover {
    border-color: #4285f4;
    background: #f8fbff;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(66, 133, 244, 0.2);
}

.login-info {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 20px;
    margin-top: 20px;
}

.info-text {
    color: #6c757d;
    font-size: 14px;
    margin: 5px 0;
    text-align: left;
}

/* 모바일 반응형 */
@media (max-width: 768px) {
    .login-card {
        padding: 30px 20px;
        max-width: 400px;
    }
    
    .login-header h2 {
        font-size: 24px;
    }
    
    .login-header p {
        font-size: 14px;
    }
    
    .kakao-login-btn,
    .google-login-btn {
        padding: 14px 20px;
        font-size: 15px;
    }
    
    .login-info {
        padding: 15px;
    }
}

/* 연결된 계정 표시 개선 스타일 */
.access-indicator {
    font-size: 0.75rem;
    color: #28a745;
    font-weight: 500;
    background: rgba(40, 167, 69, 0.1);
    padding: 2px 6px;
    border-radius: 4px;
    margin-top: 4px;
    display: inline-block;
}

.access-indicator-disabled {
    font-size: 0.75rem;
    color: #6c757d;
    font-weight: 500;
    background: rgba(108, 117, 125, 0.1);
    padding: 2px 6px;
    border-radius: 4px;
    margin-top: 4px;
    display: inline-block;
}

.account-card {
    transition: all 0.3s ease;
    border: 1px solid #e9ecef;
}

.account-card:hover {
    border-color: #007bff;
    box-shadow: 0 4px 12px rgba(0, 123, 255, 0.15);
}

.account-details {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.remove-account-btn {
    background: #dc3545;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 0.9rem;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.remove-account-btn:hover {
    background: #c82333;
}
/* 다중 API 키 관리 UI 스타일 */
.api-key-management-section {
    margin-top: 1rem;
}

.api-key-tabs {
    display: flex;
    border-bottom: 1px solid var(--gray-200);
    margin-bottom: 1.5rem;
    gap: 0.25rem;
    background: var(--gray-50);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    padding: 0.25rem;
}

.api-tab {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    background: transparent;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: var(--transition-normal);
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-secondary);
}

.api-tab:hover {
    background: var(--gray-100);
    color: var(--text-primary);
}

.api-tab.active {
    background: var(--bg-primary);
    color: var(--primary-color);
    font-weight: 600;
    box-shadow: var(--shadow-sm);
    position: relative;
    z-index: 1;
}

.tab-icon {
    font-size: 1.2rem;
}

.tab-text {
    font-size: 0.95rem;
}

.api-key-input-section {
    background: var(--bg-primary);
    border: 1px solid var(--gray-200);
    border-radius: 0 var(--radius-lg) var(--radius-lg) var(--radius-lg);
    padding: 1.5rem;
    box-shadow: var(--shadow-sm);
}

.api-key-panel {
    display: none;
}

.api-key-panel.active {
    display: block;
}

.api-key-panel .form-group {
    margin-bottom: 1rem;
}

.api-key-panel label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: #343a40;
}

.api-key-input {
    width: 100%;
    padding: 0.875rem 1rem;
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    font-family: inherit;
    background: var(--bg-primary);
    color: var(--text-primary);
    transition: var(--transition-normal);
}

.api-key-input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px var(--primary-light);
    background: var(--bg-primary);
}

/* YouTube API 키 할당량 정보 스타일 */
.api-key-quota-info {
    margin-top: 1.5rem;
    padding: 1rem;
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
}

.api-key-quota-info h4 {
    margin: 0 0 1rem 0;
    color: var(--text-primary);
    font-size: 0.95rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.quota-display {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0.75rem;
}

.quota-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem;
    background: var(--bg-primary);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-sm);
}

.quota-label {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-secondary);
}

.quota-value {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--primary-color);
    font-family: 'SF Mono', 'Monaco', 'Cascadia Code', 'Roboto Mono', monospace;
}

.quota-value.warning {
    color: #f59e0b;
}

.quota-value.danger {
    color: #ef4444;
}

/* API 키 발급받기 버튼 스타일 */
.api-key-get-btn {
    color: var(--primary-color) !important;
    text-decoration: none;
    font-weight: 600;
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-sm);
    transition: var(--transition-normal);
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.api-key-get-btn:hover {
    background: var(--primary-light);
    text-decoration: none;
}

.separator {
    margin: 0 0.5rem;
    color: var(--text-secondary);
}

.api-link {
    color: #10b981 !important;
    text-decoration: none;
    font-weight: 600;
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-sm);
    transition: var(--transition-normal);
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.api-link:hover {
    background: rgba(16, 185, 129, 0.1);
    text-decoration: none;
}

.api-key-actions {
    display: flex;
    gap: 12px;
    margin-top: 1.5rem;
    flex-wrap: wrap;
}

.security-notice {
    margin-top: 1rem;
    padding: 12px 16px;
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    font-size: 0.9rem;
    color: #6c757d;
    text-align: center;
}

/* API 키 상태 표시 */
.key-status-list {
    display: flex;
    gap: 8px;
    margin-top: 8px;
    flex-wrap: wrap;
}

.key-item {
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.key-item.success {
    background: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.key-item.pending {
    background: #fff3cd;
    color: #856404;
    border: 1px solid #ffeaa7;
}

/* 반응형 디자인 */
@media (max-width: 768px) {
    .api-key-tabs {
        flex-direction: column;
        gap: 2px;
    }
    
    .api-tab {
        border-radius: 8px;
        border-bottom: 1px solid #dee2e6;
    }
    
    .api-tab.active {
        border-bottom: 1px solid #007bff;
    }
    
    .api-key-input-section {
        border-radius: 8px;
    }
    
    .api-key-actions {
        flex-direction: column;
        gap: 8px;
    }
    
    .api-key-save-btn, .api-key-test-btn, .api-key-load-btn, .api-key-delete-btn {
        min-width: 100%;
        justify-content: center;
        padding: 12px 16px;
        font-size: 0.95em;
    }
    
    /* 모바일에서 버튼 크기 조정 */
    .api-key-actions .api-key-load-btn, .api-key-actions .api-key-delete-btn {
        order: 1; /* 불러오기/삭제 버튼을 나중에 배치 */
    }
    
    .api-key-actions .api-key-save-btn {
        order: -2; /* 저장 버튼을 맨 앞에 */
    }
    
    .api-key-actions .api-key-test-btn {
        order: -1; /* 테스트 버튼을 두 번째에 */
    }
    
    .key-status-list {
        justify-content: center;
    }
}

/* 터치 디바이스를 위한 추가 최적화 */
@media (hover: none) and (pointer: coarse) {
    .api-key-save-btn, .api-key-test-btn, .api-key-load-btn, .api-key-delete-btn {
        padding: 14px 20px;
        font-size: 1em;
        min-height: 48px; /* 터치하기 쉬운 크기 */
    }
    
    .api-key-actions {
        gap: 12px;
    }
}

/* 고대비 모드 지원 */
@media (prefers-contrast: high) {
    .api-key-load-btn {
        border: 2px solid #138f7a;
    }
    
    .api-key-delete-btn {
        border: 2px solid #c82333;
    }
}

/* 다크 모드 지원 */
@media (prefers-color-scheme: dark) {
    .api-key-load-btn {
        background: linear-gradient(135deg, #198754, #146c43);
        border-color: #146c43;
    }
    
    .api-key-load-btn:hover {
        background: linear-gradient(135deg, #146c43, #0f5132);
        border-color: #0f5132;
    }
    
    .api-key-delete-btn {
        background: linear-gradient(135deg, #dc3545, #b02a37);
        border-color: #b02a37;
    }
    
    .api-key-delete-btn:hover {
        background: linear-gradient(135deg, #b02a37, #842029);
        border-color: #842029;
    }
}

/* 약관 모달 스타일 */
.terms-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    z-index: 10000;
    backdrop-filter: blur(4px);
}

.terms-modal-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    border-radius: 16px;
    padding: 2rem;
    max-width: 90%;
    max-height: 80%;
    width: 800px;
    overflow-y: auto;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.terms-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #e5e7eb;
}

.terms-modal-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1f2937;
    margin: 0;
}

.terms-modal-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: #6b7280;
    padding: 0.5rem;
    border-radius: 8px;
    transition: all 0.2s;
}

.terms-modal-close:hover {
    background: #f3f4f6;
    color: #374151;
}

.terms-modal-body {
    color: #4b5563;
    line-height: 1.6;
    font-size: 0.9rem;
}

@media (max-width: 768px) {
    .terms-modal-content {
        max-width: 95%;
        padding: 1.5rem;
    }
    
    .terms-modal-title {
        font-size: 1.25rem;
    }
}

/* ===============================================
   터지는 썸네일 고르기 스타일
=============================================== */

.thumbnail-picker-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
}

/* 업로드 섹션 */
.upload-section {
    margin-bottom: 3rem;
}

.upload-area {
    border: 2px dashed #e5e7eb;
    border-radius: 16px;
    padding: 3rem 2rem;
    text-align: center;
    background: #fafafa;
    transition: all 0.3s ease;
    cursor: pointer;
}

.upload-area:hover {
    border-color: #3b82f6;
    background: #f0f9ff;
}

.upload-area.drag-over {
    border-color: #3b82f6;
    background: linear-gradient(135deg, #eff6ff, #dbeafe);
    transform: scale(1.02);
    box-shadow: 0 8px 25px rgba(59, 130, 246, 0.2);
}

.upload-content {
    max-width: 500px;
    margin: 0 auto;
}

.upload-icon {
    font-size: 4rem;
    margin-bottom: 1rem;
    opacity: 0.7;
}

.upload-content h3 {
    color: #374151;
    margin-bottom: 0.5rem;
    font-size: 1.5rem;
    font-weight: 600;
}

.upload-content p {
    color: #6b7280;
    margin-bottom: 2rem;
    font-size: 1rem;
}

.upload-btn {
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    color: white;
    border: none;
    padding: 1rem 2rem;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.upload-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(59, 130, 246, 0.3);
}

.upload-help {
    color: #6b7280;
    font-size: 0.875rem;
}

.upload-help p {
    margin: 0.25rem 0;
}

/* 썸네일 미리보기 */
.thumbnail-preview-section {
    margin-bottom: 3rem;
}

.thumbnail-preview-section h3 {
    color: #374151;
    margin-bottom: 1.5rem;
    font-size: 1.25rem;
    font-weight: 600;
}

.thumbnail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.thumbnail-item {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.thumbnail-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

.thumbnail-image {
    position: relative;
    aspect-ratio: 16/9;
    overflow: hidden;
}

.thumbnail-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.remove-thumbnail {
    position: absolute;
    top: 8px;
    right: 8px;
    background: rgba(239, 68, 68, 0.9);
    color: white;
    border: none;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.remove-thumbnail:hover {
    background: #dc2626;
    transform: scale(1.1);
}

.thumbnail-info {
    padding: 1rem;
}

.thumbnail-name {
    font-weight: 600;
    color: #374151;
    margin-bottom: 0.25rem;
    font-size: 0.875rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.thumbnail-size {
    color: #6b7280;
    font-size: 0.75rem;
}

/* 분석 컨트롤 */
.analysis-controls {
    text-align: center;
}

.analyze-thumbnails-btn {
    background: linear-gradient(135deg, #10b981, #059669);
    color: white;
    border: none;
    padding: 1rem 2.5rem;
    border-radius: 12px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
}

.analyze-thumbnails-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(16, 185, 129, 0.3);
}

/* 로딩 애니메이션 */
.loading {
    text-align: center;
    padding: 3rem 2rem;
}

.loading-spinner {
    width: 50px;
    height: 50px;
    border: 4px solid #e5e7eb;
    border-top: 4px solid #3b82f6;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto 1.5rem;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.loading p {
    color: #6b7280;
    font-size: 1.1rem;
    margin-bottom: 1.5rem;
}

.loading-steps {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-width: 300px;
    margin: 0 auto;
}

.loading-steps .step {
    color: #9ca3af;
    font-size: 0.875rem;
    padding: 0.5rem;
    border-radius: 6px;
    animation: fadeInStep 3s ease-in-out infinite;
}

@keyframes fadeInStep {
    0%, 75% { opacity: 0.5; }
    25%, 50% { opacity: 1; }
}

/* 분석 결과 */
.analysis-results-section {
    margin-top: 3rem;
}

.analysis-results-section h3 {
    color: #374151;
    margin-bottom: 2rem;
    font-size: 1.5rem;
    font-weight: 700;
    text-align: center;
}

.ranking-section {
    margin-bottom: 3rem;
}

.ranking-section h4 {
    color: #374151;
    margin-bottom: 1.5rem;
    font-size: 1.25rem;
    font-weight: 600;
}

.thumbnail-ranking {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.ranking-item {
    display: flex;
    align-items: center;
    background: white;
    padding: 1.5rem;
    border-radius: 16px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    position: relative;
}

.ranking-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.ranking-item.best-thumbnail {
    background: linear-gradient(135deg, #fef3c7, #fbbf24);
    border: 2px solid #f59e0b;
}

.ranking-number {
    font-size: 1.5rem;
    font-weight: 700;
    color: #374151;
    margin-right: 1.5rem;
    min-width: 40px;
    text-align: center;
}

.ranking-thumbnail {
    width: 120px;
    height: 68px;
    border-radius: 8px;
    overflow: hidden;
    margin-right: 1.5rem;
}

.ranking-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ranking-info {
    flex: 1;
}

.thumbnail-title {
    font-weight: 600;
    color: #374151;
    margin-bottom: 0.75rem;
    font-size: 1rem;
}

.performance-metrics {
    display: flex;
    gap: 2rem;
}

.metric {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.metric-label {
    color: #6b7280;
    font-size: 0.75rem;
    margin-bottom: 0.25rem;
}

.metric-value {
    font-weight: 700;
    color: #374151;
    font-size: 1rem;
}

.ranking-badge {
    font-size: 2rem;
    margin-left: 1rem;
}

.ranking-badge.gold {
    color: #f59e0b;
}

.ranking-badge.silver {
    color: #6b7280;
}

.ranking-badge.bronze {
    color: #d97706;
}

/* 상세 분석 */
.detailed-analysis {
    margin-bottom: 3rem;
}

.detailed-analysis h4 {
    color: #374151;
    margin-bottom: 1.5rem;
    font-size: 1.25rem;
    font-weight: 600;
}

.analysis-tabs {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 2rem;
    border-bottom: 2px solid #e5e7eb;
}

.tab-btn {
    background: none;
    border: none;
    padding: 1rem 1.5rem;
    color: #6b7280;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    border-bottom: 2px solid transparent;
}

.tab-btn:hover {
    color: #374151;
    background: #f9fafb;
}

.tab-btn.active {
    color: #3b82f6;
    border-bottom-color: #3b82f6;
    background: #eff6ff;
}

.tab-content {
    min-height: 200px;
}

.tab-panel {
    display: none;
}

.tab-panel.active {
    display: block;
}

.analysis-content {
    display: flex;
    gap: 2rem;
    align-items: flex-start;
}

.score-card {
    background: white;
    padding: 2rem;
    border-radius: 16px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    text-align: center;
    min-width: 150px;
}

.score-number {
    font-size: 3rem;
    font-weight: 700;
    color: #10b981;
    margin-bottom: 0.5rem;
}

.score-label {
    color: #6b7280;
    font-size: 0.875rem;
    font-weight: 500;
}

.analysis-details {
    flex: 1;
    background: white;
    padding: 2rem;
    border-radius: 16px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.analysis-details h5 {
    color: #374151;
    margin-bottom: 1rem;
    font-size: 1.1rem;
    font-weight: 600;
}

.analysis-details ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.analysis-details li {
    color: #6b7280;
    margin-bottom: 0.75rem;
    padding-left: 1.5rem;
    position: relative;
}

.analysis-details li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: #10b981;
    font-weight: 700;
}

/* 개선 제안 */
.improvement-suggestions h4 {
    color: #374151;
    margin-bottom: 1.5rem;
    font-size: 1.25rem;
    font-weight: 600;
}

.suggestions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
}

.suggestion-card {
    background: white;
    padding: 1.5rem;
    border-radius: 16px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    text-align: center;
    transition: all 0.3s ease;
}

.suggestion-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

.suggestion-icon {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

.suggestion-card h5 {
    color: #374151;
    margin-bottom: 0.75rem;
    font-size: 1.1rem;
    font-weight: 600;
}

.suggestion-card p {
    color: #6b7280;
    font-size: 0.875rem;
    line-height: 1.6;
    margin: 0;
}

/* 반응형 디자인 */
@media (max-width: 768px) {
    .thumbnail-picker-container {
        padding: 1rem;
    }
    
    .upload-area {
        padding: 2rem 1rem;
    }
    
    .upload-icon {
        font-size: 3rem;
    }
    
    .thumbnail-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 1rem;
    }
    
    .ranking-item {
        padding: 1rem;
        flex-direction: column;
        text-align: center;
    }
    
    .ranking-thumbnail {
        margin: 1rem 0;
    }
    
    .performance-metrics {
        justify-content: center;
    }
    
    .analysis-content {
        flex-direction: column;
        gap: 1.5rem;
    }
    
    .analysis-tabs {
        flex-wrap: wrap;
    }
    
    .tab-btn {
        padding: 0.75rem 1rem;
        font-size: 0.875rem;
    }
    
    .suggestions-grid {
        grid-template-columns: 1fr;
    }
}

/* ===============================================
   토너먼트 게임 스타일
=============================================== */

/* 화면 전환 시스템 */
.worldcup-container {
    position: relative;
    min-height: 600px;
    width: 100%;
}

.worldcup-screen {
    display: none;
    opacity: 0;
    transform: translateX(50px);
    transition: all 0.3s ease-in-out;
    width: 100%;
    min-height: 500px;
}

.worldcup-screen.active {
    display: block;
    opacity: 1;
    transform: translateX(0);
}

/* 진행 표시기 */
.progress-indicator {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 2rem;
    gap: 1rem;
}

.progress-step {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    background: var(--bg-secondary);
    color: var(--text-secondary);
    font-size: 0.875rem;
    font-weight: 500;
    transition: all 0.3s ease;
}

.progress-step.active {
    background: var(--primary-color);
    color: white;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
}

.progress-step.completed {
    background: var(--success-color, #10b981);
    color: white;
}

.step-number {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 600;
}

.progress-step.active .step-number,
.progress-step.completed .step-number {
    background: rgba(255, 255, 255, 0.3);
}

/* 네비게이션 버튼 */
.screen-navigation {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 2rem;
    gap: 1rem;
}

.nav-button {
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.nav-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.nav-button.back {
    background: var(--bg-secondary);
    color: var(--text-primary);
}

.nav-button.back:hover:not(:disabled) {
    background: var(--border-color);
}

.nav-button.next {
    background: var(--primary-color);
    color: white;
}

.nav-button.next:hover:not(:disabled) {
    background: var(--primary-hover);
}

.tournament-screen {
    padding: 2rem;
    max-width: 1200px;
    margin: 0 auto;
}

/* 카테고리 선택 화면 */
.category-selection {
    text-align: center;
}

.category-selection h2 {
    color: var(--primary-color);
    margin-bottom: 1rem;
    font-size: 2rem;
}

.category-selection .subtitle {
    color: var(--text-secondary);
    margin-bottom: 3rem;
    font-size: 1.1rem;
}

.categories-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.6rem;
    margin-bottom: 2rem;
    max-width: 360px; /* 20% 크기 증가 (300px -> 360px) */
    margin-left: auto;
    margin-right: auto;
}

/* 반응형 조정 */
@media (max-width: 1024px) {
    .categories-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 768px) {
    .categories-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 0.5rem;
        max-width: 300px; /* 20% 크기 증가 (250px -> 300px) */
    }
    
    .category-card {
        aspect-ratio: 1;
        padding: 0.8rem;
    }
    
    .category-card .category-icon {
        font-size: 1.4rem;
        margin-bottom: 0.3rem;
    }
    
    .category-card .category-name {
        font-size: 0.75rem;
    }
    
    .category-card .category-desc {
        font-size: 0.6rem;
    }
}

@media (max-width: 480px) {
    .categories-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 0.4rem;
        max-width: 240px; /* 20% 크기 증가 (200px -> 240px) */
    }
    
    .category-card {
        padding: 0.6rem;
    }
    
    .category-card .category-icon {
        font-size: 1.2rem;
        margin-bottom: 0.2rem;
    }
    
    .category-card .category-name {
        font-size: 0.65rem;
        margin-bottom: 0.1rem;
    }
    
    .category-card .category-desc {
        font-size: 0.5rem;
        -webkit-line-clamp: 1;
    }
}

.category-card {
    background: var(--card-background);
    border: 2px solid transparent;
    border-radius: 10px;
    padding: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    aspect-ratio: 1;
    min-height: 0;
    position: relative;
    width: 100%;
    height: auto;
}

.category-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    border-color: var(--primary-color);
}

.category-card.selected {
    border-color: var(--primary-color);
    background: linear-gradient(135deg, var(--primary-color)20, var(--card-background));
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

.category-card .category-icon {
    font-size: 1.8rem;
    margin-bottom: 0.4rem;
    flex-shrink: 0;
}

.category-card .category-name {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.2rem;
    line-height: 1.2;
}

.category-card .category-desc {
    font-size: 0.7rem;
    color: var(--text-secondary);
    text-align: center;
    line-height: 1.2;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* 토너먼트 설정 화면 */
.tournament-setup {
    text-align: center;
}

.setup-header {
    margin-bottom: 3rem;
}

.setup-header h2 {
    color: var(--primary-color);
    margin-bottom: 0.5rem;
}

.selected-category {
    color: var(--text-secondary);
    font-size: 1.1rem;
}

.tournament-options {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-bottom: 3rem;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

/* 반응형 조정 */
@media (max-width: 768px) {
    .tournament-options {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
}

.tournament-option {
    background: linear-gradient(135deg, var(--card-background), rgba(255, 255, 255, 0.8));
    border: 3px solid var(--border-color);
    border-radius: 20px;
    padding: 2rem 1.5rem;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    min-height: 180px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.tournament-option::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-hover));
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 1;
}

.tournament-option:hover {
    border-color: var(--primary-color);
    transform: translateY(-8px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
}

.tournament-option:hover::before {
    opacity: 0.1;
}

.tournament-option.selected {
    border-color: var(--primary-color);
    background: linear-gradient(135deg, var(--primary-color), var(--primary-hover));
    color: white;
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.tournament-option.selected .option-title,
.tournament-option.selected .option-subtitle,
.tournament-option.selected .option-info {
    color: white;
}

/* 새로운 tournament-card 선택 스타일 */
.tournament-card.selected {
    border-color: var(--primary-color);
    background: linear-gradient(135deg, var(--primary-color), var(--primary-hover));
    color: white;
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.tournament-card.selected h3,
.tournament-card.selected .card-subtitle,
.tournament-card.selected .card-info {
    color: white;
}

/* 롱/숏폼 선택 카드 스타일 */
.duration-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin: 2rem 0;
}

.duration-card {
    background: white;
    border: 2px solid #e5e7eb;
    border-radius: 16px;
    padding: 2rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.duration-card:hover {
    border-color: var(--primary-color);
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.duration-card.selected {
    border-color: var(--primary-color);
    background: linear-gradient(135deg, var(--primary-color), var(--primary-hover));
    color: white;
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.duration-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
    display: block;
}

.duration-title {
    font-size: 1.5rem;
    font-weight: bold;
    margin-bottom: 0.5rem;
    color: inherit;
}

.duration-desc {
    color: #6b7280;
    font-size: 1rem;
    margin-bottom: 1.5rem;
}

.duration-card.selected .duration-desc {
    color: rgba(255, 255, 255, 0.9);
}

.duration-features {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.feature-item {
    background: rgba(0, 0, 0, 0.05);
    padding: 0.5rem 1rem;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 500;
}

.duration-card.selected .feature-item {
    background: rgba(255, 255, 255, 0.2);
    color: white;
}

.duration-info {
    background: #f9fafb;
    border-radius: 12px;
    padding: 1.5rem;
    margin: 2rem 0;
}

.duration-info h4 {
    color: #1f2937;
    margin-bottom: 1rem;
    font-size: 1.1rem;
    font-weight: 600;
}

.info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
}

.info-item {
    background: white;
    padding: 1rem;
    border-radius: 8px;
    border-left: 4px solid var(--primary-color);
}

.info-item strong {
    color: var(--primary-color);
    display: block;
    margin-bottom: 0.5rem;
}

.info-item p {
    color: #6b7280;
    font-size: 0.9rem;
    line-height: 1.4;
    margin: 0;
}

.tournament-option > * {
    position: relative;
    z-index: 2;
}

.tournament-option .option-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
    display: block;
}

.tournament-option .option-title {
    font-size: 1.8rem;
    font-weight: bold;
    color: var(--primary-color);
    margin-bottom: 0.5rem;
    line-height: 1.2;
}

.tournament-option .option-subtitle {
    color: var(--text-secondary);
    font-size: 1rem;
    font-weight: 500;
    margin-bottom: 0.8rem;
}

.tournament-option .option-info {
    color: var(--text-muted);
    font-size: 0.9rem;
    line-height: 1.4;
}

.tournament-info {
    background: var(--card-background);
    border-radius: 12px;
    padding: 2rem;
    margin-bottom: 2rem;
}

.tournament-info h3 {
    margin-bottom: 1rem;
    color: var(--text-primary);
}

.info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
}

.info-item {
    text-align: center;
    padding: 1rem;
    background: var(--background-color);
    border-radius: 8px;
}

.info-label {
    display: block;
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
}

.info-value {
    display: block;
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--primary-color);
}

.start-button {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-hover));
    color: white;
    border: none;
    border-radius: 25px;
    padding: 1.2rem 4rem;
    font-size: 1.2rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 2rem;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    position: relative;
    overflow: hidden;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.start-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: left 0.5s;
}

.start-button:hover:not(:disabled) {
    background: linear-gradient(135deg, var(--primary-hover), var(--primary-color));
    transform: translateY(-4px);
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.25);
}

.start-button:hover:not(:disabled)::before {
    left: 100%;
}

.start-button:active:not(:disabled) {
    transform: translateY(-2px);
}

.start-button:disabled {
    background: var(--text-muted);
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* 토너먼트 로딩 오버레이 */
.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    backdrop-filter: blur(10px);
}

.loading-content {
    background: var(--card-background);
    padding: 3rem;
    border-radius: 20px;
    text-align: center;
    max-width: 400px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.loading-spinner {
    width: 80px;
    height: 80px;
    border: 4px solid var(--border-color);
    border-top: 4px solid var(--primary-color);
    border-right: 4px solid var(--primary-hover);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto 2rem;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.loading-text {
    font-size: 1.3rem;
    color: var(--text-primary);
    margin-bottom: 2rem;
    font-weight: 600;
}

.loading-steps {
    text-align: left;
    margin-top: 1.5rem;
}

.loading-step {
    padding: 0.5rem 0;
    color: var(--text-secondary);
    font-size: 0.95rem;
    opacity: 0.7;
    transition: opacity 0.3s ease;
}

.loading-step:nth-child(1) {
    animation: pulse 2s ease-in-out infinite;
}

.loading-step:nth-child(2) {
    animation: pulse 2s ease-in-out infinite 0.5s;
}

.loading-step:nth-child(3) {
    animation: pulse 2s ease-in-out infinite 1s;
}

@keyframes pulse {
    0%, 50%, 100% { opacity: 0.7; }
    25% { opacity: 1; }
}

/* 기존 로딩 화면 */
.loading-screen {
    text-align: center;
    padding: 4rem 2rem;
}

.loading-message {
    font-size: 1.2rem;
    color: var(--text-primary);
    margin-bottom: 1rem;
}

.loading-subtitle {
    color: var(--text-secondary);
}

/* 배틀 화면 */
.battle-screen {
    padding: 2rem;
}

.battle-header {
    text-align: center;
    margin-bottom: 3rem;
}

.battle-header h2 {
    color: var(--primary-color);
    margin-bottom: 1rem;
}

.battle-info {
    display: flex;
    justify-content: center;
    gap: 2rem;
    margin-bottom: 1rem;
}

.battle-info span {
    color: var(--text-secondary);
}

.battle-progress {
    width: 100%;
    height: 8px;
    background: var(--border-color);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 2rem;
}

.battle-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary-color), var(--accent-color));
    transition: width 0.5s ease;
}

/* 기존 battle-arena 스타일 - 토너먼트가 아닌 경우에만 사용 */
.battle-arena:not(.worldcup-screen .battle-arena):not(#battleScreen .battle-arena) {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 2rem;
    align-items: center;
    max-width: 1000px;
    margin: 0 auto;
}

.video-option {
    background: var(--card-background);
    border: 2px solid transparent;
    border-radius: 16px;
    padding: 1.5rem;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
}

.video-option:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    border-color: var(--primary-color);
}

.video-option.selected {
    transform: scale(1.1);
    border-color: var(--success-color);
    background: linear-gradient(135deg, var(--success-color)20, var(--card-background));
}

.video-option.not-selected {
    opacity: 0.5;
    transform: scale(0.95);
}

.video-thumbnail {
    position: relative;
    margin-bottom: 1rem;
}

.video-thumbnail img {
    width: 100%;
    height: auto;
    aspect-ratio: 16/9;
    object-fit: cover;
    border-radius: 12px;
}

.video-overlay {
    position: absolute;
    top: 8px;
    right: 8px;
}

.view-type {
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    color: white;
}

.view-type.high-view {
    background: var(--success-color);
}

.view-type.low-view {
    background: var(--warning-color);
}

.video-info h3 {
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
    color: var(--text-primary);
    line-height: 1.4;
}

.video-meta {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.video-meta span {
    display: block;
    margin-bottom: 0.25rem;
}

.vs-divider {
    font-size: 3rem;
    font-weight: bold;
    color: var(--primary-color);
    text-align: center;
}

/* 결과 화면 */
.results-screen {
    text-align: center;
    padding: 2rem;
}

.results-header h2 {
    color: var(--primary-color);
    margin-bottom: 2rem;
}

.tournament-winner {
    background: var(--card-background);
    border-radius: 20px;
    padding: 3rem;
    margin-bottom: 3rem;
    position: relative;
}

.winner-thumbnail {
    position: relative;
    display: inline-block;
    margin-bottom: 2rem;
}

.winner-thumbnail img {
    width: 200px;
    height: 120px;
    object-fit: cover;
    border-radius: 12px;
    border: 3px solid var(--primary-color);
}

.crown {
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 2rem;
}

.winner-info h3 {
    font-size: 1.5rem;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.winner-meta {
    color: var(--text-secondary);
    font-size: 1rem;
}

.results-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 2rem;
    margin-bottom: 3rem;
}

.stat-card {
    background: var(--card-background);
    border-radius: 16px;
    padding: 2rem;
}

.stat-card h3 {
    margin-bottom: 1rem;
    color: var(--text-primary);
}

.accuracy-score {
    font-size: 3rem;
    font-weight: bold;
    color: var(--primary-color);
    margin-bottom: 0.5rem;
}

.result-analysis {
    background: var(--background-secondary);
    border-radius: 12px;
    padding: 2rem;
    margin-bottom: 2rem;
    font-size: 1.1rem;
    color: var(--text-primary);
}

/* 오답지 섹션 */
.wrong-answers-section {
    background: var(--card-background);
    border-radius: 16px;
    padding: 2rem;
    margin-bottom: 2rem;
    border: 1px solid rgba(255, 0, 0, 0.1);
}

.wrong-answers-section h4 {
    color: #dc3545;
    font-size: 1.3rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.section-desc {
    color: var(--text-secondary);
    margin-bottom: 1.5rem;
    font-size: 0.95rem;
}

.wrong-answers-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.wrong-answer-item {
    background: var(--background-secondary);
    border-radius: 12px;
    padding: 1.5rem;
    border: 1px solid rgba(255, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.wrong-answer-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.wrong-answer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.match-info {
    font-size: 0.9rem;
    color: var(--text-secondary);
    font-weight: 500;
}

.score-info {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.score-badge {
    background: #dc3545;
    color: white;
    padding: 0.2rem 0.6rem;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 600;
}

.wrong-answer-videos {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 1rem;
    align-items: center;
}

.video-comparison {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 1.25rem;
    border-radius: 12px;
    transition: all 0.3s ease;
    max-width: 220px;
    margin: 0 auto;
    text-align: center;
    background: rgba(255, 255, 255, 0.5);
    border: 2px solid transparent;
}

.video-comparison.user-choice {
    background: rgba(255, 0, 0, 0.1);
    border: 2px solid rgba(255, 0, 0, 0.3);
}

.video-comparison.correct-answer {
    background: rgba(40, 167, 69, 0.1);
    border: 2px solid rgba(40, 167, 69, 0.3);
}

/* AB 대결 전체 문제 리뷰용 새로운 스타일 */
.answer-review-item {
    background: var(--background-secondary);
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1rem;
    transition: all 0.3s ease;
}

.answer-review-item.correct-answer {
    border: 2px solid var(--success-color);
    background: var(--success-light);
}

.answer-review-item.wrong-answer {
    border: 2px solid var(--error-color);
    background: var(--error-light);
}

.answer-review-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.answer-review-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.score-badge.correct {
    background: var(--success-color);
    color: white;
    padding: 0.2rem 0.6rem;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 600;
}

.score-badge.wrong {
    background: var(--error-color);
    color: white;
    padding: 0.2rem 0.6rem;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 600;
}

.answer-review-videos {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 1rem;
    align-items: center;
    margin-bottom: 1rem;
}

/* 오답지 섹션 제목 개선 - 더 큰 크기 */
.answer-review-videos .video-title {
    font-size: 16px;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 10px;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: 4.5em; /* 3줄 높이 고정 */
    cursor: help; /* 툴팁 표시를 위한 커서 변경 */
    text-align: center;
    padding: 0 0.5rem;
}

/* 썸네일 크기 조정 */
.answer-review-videos .video-thumbnail {
    width: 120px;
    height: 90px;
    object-fit: cover;
    border-radius: 8px;
    border: 2px solid transparent;
    transition: all 0.3s ease;
}

/* 선택된 비디오 강조 */
.video-comparison.user-selected .video-thumbnail {
    border-color: #3b82f6;
    box-shadow: 0 0 10px rgba(59, 130, 246, 0.3);
}

/* 오답 선택 강조 */
.video-comparison.wrong-choice .video-thumbnail {
    border-color: #ef4444;
    box-shadow: 0 0 10px rgba(239, 68, 68, 0.3);
}

.video-comparison.user-selected {
    background: rgba(59, 130, 246, 0.1);
    border: 2px solid rgba(59, 130, 246, 0.3);
}

.video-comparison.wrong-choice {
    background: rgba(239, 68, 68, 0.2);
    border: 2px solid rgba(239, 68, 68, 0.5);
}

.choice-status {
    font-size: 0.9rem;
    font-weight: 600;
    margin-top: 0.5rem;
    color: var(--text-secondary);
    line-height: 1.3;
}

/* 비디오 통계 정보 스타일 개선 */
.answer-review-videos .video-stats {
    font-size: 14px;
    font-weight: 500;
    color: #4b5563;
    line-height: 1.4;
    margin-bottom: 0.5rem;
    text-align: center;
}

.answer-review-videos .video-stats strong {
    font-size: 15px;
    font-weight: 700;
    color: #1f2937;
}

/* 향상된 조회수 표시 스타일 */
.views-display {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 0.25rem;
    margin-bottom: 0.25rem;
}

.views-number {
    font-size: 18px;
    font-weight: 800;
    color: #dc2626; /* 빨간색으로 강조 */
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    letter-spacing: -0.025em;
}

.views-text {
    font-size: 13px;
    font-weight: 600;
    color: #6b7280;
    white-space: nowrap;
}

.channel-name {
    font-size: 12px;
    font-weight: 500;
    color: #9ca3af;
    text-align: center;
    margin-top: 0.25rem;
}

.result-explanation {
    background: rgba(0, 0, 0, 0.05);
    padding: 0.75rem;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 500;
    text-align: center;
}

.correct-answer .result-explanation {
    background: rgba(16, 185, 129, 0.1);
    color: var(--success-color);
}

.wrong-answer .result-explanation {
    background: rgba(239, 68, 68, 0.1);
    color: var(--error-color);
}

/* 토너먼트 결과 페이지용 썸네일 래퍼 - 더 큰 크기 */
.video-thumbnail-wrapper {
    width: 180px;
    height: 101px; /* 16:9 비율 (180 * 9/16 = 101.25) */
    margin: 0 auto 0.75rem auto;
    border-radius: 12px;
    overflow: hidden;
    background: #f3f4f6;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s ease;
}

.video-thumbnail-wrapper:hover {
    transform: scale(1.02);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* 토너먼트 결과 페이지용 썸네일 스타일 - 강력한 크기 제한 */
.wrong-answer-item .video-thumbnail,
.video-comparison .video-thumbnail {
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: 16/9 !important;
    border-radius: 0;
    object-fit: cover !important;
    display: block !important;
    flex-shrink: 0;
    box-sizing: border-box !important;
}

/* 썸네일 오류 시 숨김 처리 - 크기 조정 */
.video-thumbnail[style*="display: none"] + .video-details::before {
    content: "썸네일 없음";
    display: block;
    width: 180px;
    height: 101px;
    background: #e5e7eb;
    border-radius: 12px;
    text-align: center;
    line-height: 101px;
    font-size: 0.85rem;
    color: #6b7280;
    margin: 0 auto 0.75rem auto;
}

/* 일반적인 video-thumbnail 스타일 (기본값) - 16:9 비율로 컨테이너 가로길이에 맞춤 */
.video-thumbnail {
    width: 100%;
    height: auto;
    aspect-ratio: 16/9;
    border-radius: 8px;
    object-fit: cover;
    margin: 0 auto;
    display: block;
}

.video-details {
    text-align: center;
}

.video-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.3rem;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.video-stats {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-bottom: 0.3rem;
}

.choice-indicator {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
}

.choice-indicator.user {
    background: rgba(255, 0, 0, 0.2);
    color: #dc3545;
}

.choice-indicator.correct {
    background: rgba(40, 167, 69, 0.2);
    color: #28a745;
}

.vs-separator {
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--text-secondary);
    text-align: center;
}

/* 오답이 없을 때 */
.no-wrong-answers {
    text-align: center;
    padding: 3rem;
    color: var(--text-secondary);
}

.no-wrong-answers .celebration-icon {
    font-size: 4rem;
    margin-bottom: 1rem;
}

.no-wrong-answers h5 {
    color: #28a745;
    margin-bottom: 0.5rem;
    font-size: 1.2rem;
}

.action-buttons {
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.action-button {
    padding: 0.75rem 2rem;
    border: 2px solid var(--primary-color);
    border-radius: 12px;
    background: transparent;
    color: var(--primary-color);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.action-button:hover {
    background: var(--primary-color);
    color: white;
}

.action-button.primary {
    background: var(--primary-color);
    color: white;
}

.action-button.primary:hover {
    background: var(--primary-hover);
}

/* 반응형 디자인 */
@media (max-width: 768px) {
    .tournament-screen {
        padding: 1rem;
    }
    
    .categories-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 0.5rem;
        max-width: 300px; /* 20% 크기 증가 (250px -> 300px) */
    }
    
    .category-card {
        padding: 0.8rem;
        aspect-ratio: 1;
    }
    
    .tournament-options {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .battle-arena:not(.worldcup-screen .battle-arena):not(#battleScreen .battle-arena) {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .vs-divider {
        font-size: 2rem;
        transform: rotate(90deg);
    }
    
    .video-option {
        padding: 1rem;
    }
    
    .video-thumbnail img {
        height: 150px;
    }
    
    .winner-thumbnail img {
        width: 150px;
        height: 90px;
    }
    
    .results-stats {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .action-buttons {
        flex-direction: column;
        align-items: center;
    }
    
    .action-button {
        width: 100%;
        max-width: 300px;
    }
    
    /* 오답지 모바일 반응형 */
    .wrong-answer-videos {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .vs-separator {
        transform: rotate(90deg);
        font-size: 1.2rem;
        margin: 0.5rem 0;
    }
    
    .video-thumbnail {
        max-width: 150px;
        aspect-ratio: 16/9;
    }
    
    /* 결과 페이지 모바일 최적화 */
    .wrong-answer-item .video-thumbnail,
    .video-comparison .video-thumbnail {
        width: 80px !important;
        max-width: 80px !important;
        height: 45px !important; /* 16:9 비율 (80 * 9/16 = 45) */
        max-height: 45px !important;
    }
    
    .video-comparison {
        padding: 0.8rem;
        flex-direction: column;
        align-items: center;
        text-align: center;
        max-width: 120px;
    }
    
    .video-comparison .video-details {
        margin-top: 0.5rem;
    }
    
    .wrong-answer-videos {
        flex-direction: column;
        align-items: center;
        gap: 1rem;
    }
    
    .vs-separator {
        transform: rotate(90deg);
        margin: 1rem 0;
    }
}

/* ===============================================
   토너먼트 배틀 화면 스타일
=============================================== */

/* 토너먼트용 battle-arena 스타일 */
.worldcup-screen .battle-arena,
#battleScreen .battle-arena {
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 2rem !important;
    display: block !important; /* 기존 grid 레이아웃 무시 */
    grid-template-columns: none !important;
}

.battle-instruction {
    text-align: center;
    margin-bottom: 3rem;
    width: 100%;
    display: block;
    position: relative;
    z-index: 10; /* 확실히 위에 표시되도록 */
}

.battle-instruction h3 {
    font-size: 1.8rem;
    color: #2d3748;
    margin-bottom: 0.5rem;
    font-weight: 600;
}

.battle-instruction p {
    font-size: 1rem;
    color: #718096;
    margin: 0;
}

.battle-cards {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 3rem;
    max-width: 900px;
    margin: 0 auto;
}

.battle-card {
    flex: 1;
    background: white;
    border-radius: 16px;
    padding: 1.5rem;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    cursor: pointer;
    border: 3px solid transparent;
    position: relative;
}

.battle-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
    border-color: #667eea;
}

.battle-label {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    font-weight: bold;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.thumbnail-container {
    position: relative;
    width: 100%;
    margin-bottom: 1.5rem;
    border-radius: 12px;
    overflow: hidden;
    aspect-ratio: 16/9;
}

.thumbnail-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: filter 0.3s ease;
}

.thumbnail-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    border-radius: 12px;
}

.battle-card:hover .thumbnail-overlay {
    opacity: 1;
}

.choose-btn {
    background: linear-gradient(135deg, #ff6b6b, #ff5252);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 25px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(255, 107, 107, 0.3);
}

.choose-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 20px rgba(255, 107, 107, 0.4);
    background: linear-gradient(135deg, #ff5252, #ff4444);
}

.video-info {
    text-align: center;
}

.video-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: #2d3748;
    margin-bottom: 0.5rem;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.video-stats {
    font-size: 0.9rem;
    color: #718096;
    margin-bottom: 1rem;
    display: none; /* 조회수/채널명 숨기기 */
}

.vs-divider {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.vs-text {
    font-size: 2.5rem;
    font-weight: 900;
    color: #ff6b6b;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
    background: linear-gradient(135deg, #ff6b6b, #ff5252);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* 토너먼트 배틀 화면 모바일 반응형 디자인 */
@media (max-width: 768px) {
    .worldcup-screen .battle-arena,
    #battleScreen .battle-arena {
        padding: 1rem !important;
    }
    
    .battle-instruction h3 {
        font-size: 1.4rem;
    }
    
    .battle-instruction p {
        font-size: 0.9rem;
    }
    
    .battle-cards {
        flex-direction: column;
        gap: 2rem;
        max-width: 400px;
    }
    
    .battle-card {
        width: 100%;
        padding: 1.2rem;
    }
    
    .vs-text {
        font-size: 2rem;
        transform: rotate(90deg);
        margin: 1rem 0;
    }
    
    .thumbnail-container {
        margin-bottom: 1rem;
    }
    
    .video-title {
        font-size: 1rem;
    }
}

@media (max-width: 480px) {
    .battle-instruction h3 {
        font-size: 1.2rem;
    }
    
    .battle-cards {
        gap: 1.5rem;
        max-width: 320px;
    }
    
    .battle-card {
        padding: 1rem;
    }
    
    .battle-label {
        width: 35px;
        height: 35px;
        font-size: 1rem;
    }
    
    .choose-btn {
        padding: 10px 20px;
        font-size: 0.9rem;
    }
}



/* ===============================================
   결과 페이지 액션 버튼 스타일
=============================================== */

.result-actions {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 3rem;
    padding: 2rem;
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
}

.result-actions button {
    position: relative;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
    border-radius: 12px;
    color: white;
    font-size: 1.1rem;
    font-weight: 600;
    padding: 16px 32px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}

.result-actions button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    transition: left 0.5s;
}

.result-actions button:hover::before {
    left: 100%;
}

.result-actions button:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
}

.result-actions button:active {
    transform: translateY(0);
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}

.result-actions button:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none !important;
}

/* 개별 버튼 스타일 */
.restart-btn {
    background: linear-gradient(135deg, #48bb78 0%, #38a169 100%) !important;
    box-shadow: 0 4px 15px rgba(72, 187, 120, 0.3) !important;
}

.restart-btn:hover {
    box-shadow: 0 8px 25px rgba(72, 187, 120, 0.4) !important;
}

.change-category-btn {
    background: linear-gradient(135deg, #ed8936 0%, #dd6b20 100%) !important;
    box-shadow: 0 4px 15px rgba(237, 137, 54, 0.3) !important;
}

.change-category-btn:hover {
    box-shadow: 0 8px 25px rgba(237, 137, 54, 0.4) !important;
}

.share-result-btn {
    background: linear-gradient(135deg, #9f7aea 0%, #805ad5 100%) !important;
    box-shadow: 0 4px 15px rgba(159, 122, 234, 0.3) !important;
}

.share-result-btn:hover {
    box-shadow: 0 8px 25px rgba(159, 122, 234, 0.4) !important;
}

/* 버튼 내부 스타일 개선 */
.result-actions button span {
    display: inline-block;
    margin-left: 0.5rem;
    opacity: 0.9;
    font-size: 0.95em;
}

/* 토스트 애니메이션 */
@keyframes toastShow {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.8);
    }
    100% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

@keyframes toastHide {
    0% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.8);
    }
}

/* 모바일 반응형 디자인 */
@media (min-width: 768px) {
    .result-actions {
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: 1.5rem;
    }
    
    .result-actions button {
        flex: 1;
        max-width: 200px;
    }
}

@media (max-width: 480px) {
    .result-actions {
        padding: 1.5rem;
        margin-top: 2rem;
    }
    
    .result-actions button {
        font-size: 1rem;
        padding: 14px 24px;
    }
}

/* ===============================================
   AB 대결 결과 페이지 전용 스타일
=============================================== */

/* AB 선택 통계 스타일 */
.ab-choice-stats {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin: 2rem 0;
    padding: 1.5rem;
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    border-radius: 16px;
    box-shadow: var(--shadow-md);
}

.choice-stat {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: white;
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
    transition: transform 0.2s ease;
}

.choice-stat:hover {
    transform: translateY(-2px);
}

.stat-icon {
    font-size: 2rem;
    width: 50px;
    text-align: center;
}

.stat-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.stat-label {
    font-weight: 600;
    font-size: 1rem;
    color: var(--text-primary);
}

.stat-numbers {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.stat-value {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--primary-color);
}

.stat-percentage {
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.stat-bar {
    width: 100px;
    height: 8px;
    background: var(--gray-200);
    border-radius: 4px;
    overflow: hidden;
}

.stat-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.8s ease;
}

.stat-fill.low-view {
    background: linear-gradient(135deg, var(--low-view-color), #a855f7);
}

.stat-fill.high-view {
    background: linear-gradient(135deg, var(--high-view-color), #f97316);
}

/* AB 결과 분석 스타일 */
.ab-results-analysis {
    margin: 2rem 0;
}

.ab-results-analysis h3 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    color: var(--text-primary);
    text-align: center;
}

.analysis-summary {
    background: linear-gradient(135deg, #fef7ff 0%, #f3f0ff 100%);
    border-radius: 16px;
    padding: 2rem;
    margin-bottom: 2rem;
    border: 1px solid var(--low-view-light);
}

.analysis-stats {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.stat-item {
    flex: 1;
    text-align: center;
    padding: 1rem;
    border-radius: 12px;
    background: white;
    box-shadow: var(--shadow-sm);
}

.stat-item.low-view {
    border-left: 4px solid var(--low-view-color);
}

.stat-item.high-view {
    border-left: 4px solid var(--high-view-color);
}

.stat-number {
    font-size: 2rem;
    font-weight: 800;
    margin-bottom: 0.5rem;
}

.stat-item.low-view .stat-number {
    color: var(--low-view-color);
}

.stat-item.high-view .stat-number {
    color: var(--high-view-color);
}

.analysis-text {
    background: white;
    padding: 1.5rem;
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
}

.analysis-text p {
    line-height: 1.6;
    color: var(--text-primary);
    font-size: 1rem;
}

/* 선택 요약 리스트 스타일 */
.choice-summary-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 1rem;
}

.choice-summary-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: white;
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
    transition: all 0.2s ease;
}

.choice-summary-item:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.choice-summary-item.low-view {
    border-left: 4px solid var(--low-view-color);
}

.choice-summary-item.high-view {
    border-left: 4px solid var(--high-view-color);
}

.choice-number {
    width: 30px;
    height: 30px;
    background: var(--primary-color);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.9rem;
}

.choice-thumbnail {
    width: 80px;
    height: 45px;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
}

.choice-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.choice-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.choice-title {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 1rem;
    line-height: 1.3;
}

.choice-meta {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.choice-type {
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
}

.choice-summary-item.low-view .choice-type {
    background: var(--low-view-light);
    color: var(--low-view-color);
}

.choice-summary-item.high-view .choice-type {
    background: var(--high-view-light);
    color: var(--high-view-color);
}

.choice-views {
    font-size: 0.9rem;
    color: var(--text-secondary);
}

/* 분석 팁 스타일 */
.analysis-tips {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border-radius: 12px;
    padding: 1.5rem;
    margin-top: 2rem;
    border-left: 4px solid var(--warning-color);
}

.analysis-tips h4 {
    color: var(--warning-color);
    margin-bottom: 0.5rem;
    font-size: 1.1rem;
}

.analysis-tips p {
    color: var(--text-primary);
    line-height: 1.6;
    font-size: 0.95rem;
}

/* 모바일 반응형 */
@media (max-width: 768px) {
    .analysis-stats {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .ab-choice-stats {
        padding: 1rem;
    }
    
    .choice-stat {
        padding: 0.75rem;
        gap: 0.75rem;
    }
    
    .stat-bar {
        width: 80px;
    }
    
    .analysis-summary {
        padding: 1.5rem;
    }
}

@media (max-width: 480px) {
    .choice-summary-item {
        padding: 0.75rem;
        gap: 0.75rem;
    }
    
    .choice-thumbnail {
        width: 60px;
        height: 34px;
    }
    
    .choice-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
    
    .stat-info {
        gap: 0.25rem;
    }
    
    .stat-numbers {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
    }
}

/* ==========================================
 * 체크박스 및 데이터 내보내기 스타일
 * ========================================== */

/* 내보내기 버튼 스타일 */
.export-btn {
    background: var(--primary-color);
    color: white;
    border: none;
    padding: 10px 18px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.3s ease;
    box-shadow: var(--shadow-sm);
    display: flex;
    align-items: center;
    gap: 6px;
}

.export-btn:hover:not(:disabled) {
    background: var(--primary-hover);
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}

.export-btn:active:not(:disabled) {
    transform: translateY(0);
    box-shadow: var(--shadow-sm);
}

.export-btn:disabled {
    background: var(--gray-400);
    cursor: not-allowed;
    opacity: 0.6;
}

/* 테이블 컨트롤 영역 */
.table-controls {
    background: var(--bg-secondary);
    padding: 15px;
    border-radius: 8px;
    border: 1px solid var(--gray-200);
    margin-bottom: 15px;
}

/* 체크박스 스타일 개선 */
.video-checkbox,
#selectAllCheckbox {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: var(--primary-color);
}

.video-checkbox:hover,
#selectAllCheckbox:hover {
    outline: 2px solid var(--primary-light);
    outline-offset: 2px;
}

/* 선택된 행 하이라이트 */
.results-table tbody tr:has(.video-checkbox:checked) {
    background-color: var(--primary-light);
    border-left: 3px solid var(--primary-color);
}

/* 테이블 헤더 체크박스 컬럼 */
.results-table th:first-child,
.results-table td:first-child {
    text-align: center;
    width: 50px;
    padding: 8px 4px;
}

/* 선택 정보 텍스트 */
.selected-count-info {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.4;
}

/* 반응형 디자인 */
@media (max-width: 768px) {
    .table-controls {
        flex-direction: column;
        gap: 10px;
        align-items: flex-start;
    }

    .export-btn {
        width: 100%;
        justify-content: center;
    }

    .selected-count-info {
        font-size: 12px;
    }
}

/* ===== 랜딩 페이지 스타일 ===== */
.landing-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
}

/* 히어로 섹션 */
.hero-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
    margin-bottom: 6rem;
    min-height: 70vh;
}

.hero-content {
    max-width: 600px;
}

.hero-title {
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 1.5rem;
    color: hsl(var(--foreground));
}

.hero-emoji {
    display: inline-block;
    margin-right: 0.5rem;
    font-size: 1.2em;
}

.hero-subtitle {
    display: block;
    font-size: 0.6em;
    font-weight: 400;
    color: hsl(var(--muted-foreground));
    margin-top: 0.5rem;
}

.hero-description {
    font-size: 1.25rem;
    line-height: 1.6;
    color: hsl(var(--muted-foreground));
    margin-bottom: 2.5rem;
}

.hero-actions {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.cta-button {
    padding: 1rem 2rem;
    border-radius: 12px;
    font-weight: 600;
    font-size: 1rem;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.cta-button.primary {
    background: hsl(var(--primary));
    color: hsl(var(--primary-foreground));
}

.cta-button.primary:hover {
    background: hsl(var(--primary) / 0.9);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px hsl(var(--primary) / 0.3);
}

.cta-button.secondary {
    background: hsl(var(--secondary));
    color: hsl(var(--secondary-foreground));
}

.cta-button.secondary:hover {
    background: hsl(var(--secondary) / 0.8);
    transform: translateY(-2px);
}

.cta-button.outline {
    background: transparent;
    color: hsl(var(--foreground));
    border: 2px solid hsl(var(--border));
}

.cta-button.outline:hover {
    background: hsl(var(--accent));
    color: hsl(var(--accent-foreground));
}

.cta-button.large {
    padding: 1.25rem 2.5rem;
    font-size: 1.1rem;
}

/* 히어로 비주얼 */
.hero-visual {
    display: flex;
    align-items: center;
    justify-content: center;
}

.feature-preview {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    width: 100%;
    max-width: 400px;
}

.preview-card {
    background: hsl(var(--card));
    border: 1px solid hsl(var(--border));
    border-radius: 16px;
    padding: 2rem;
    text-align: center;
    transition: all 0.3s ease;
}

.preview-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px hsl(var(--primary) / 0.1);
}

.preview-icon {
    font-size: 2rem;
    margin-bottom: 1rem;
}

.preview-card h4 {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: hsl(var(--foreground));
}

.preview-card p {
    color: hsl(var(--muted-foreground));
    font-size: 0.9rem;
}

/* 주요 기능 섹션 */
.features-section {
    margin-bottom: 6rem;
}

.section-header {
    text-align: center;
    margin-bottom: 4rem;
}

.section-header h2 {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: hsl(var(--foreground));
}

.section-header p {
    font-size: 1.2rem;
    color: hsl(var(--muted-foreground));
    max-width: 600px;
    margin: 0 auto;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
}

.feature-card {
    background: hsl(var(--card));
    border: 1px solid hsl(var(--border));
    border-radius: 16px;
    padding: 2.5rem;
    transition: all 0.3s ease;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.feature-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px hsl(var(--primary) / 0.1);
    border-color: hsl(var(--primary) / 0.3);
}

.feature-icon {
    font-size: 2.5rem;
    margin-bottom: 1.5rem;
    display: block;
}

.feature-card h3 {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: hsl(var(--foreground));
}

.feature-card p {
    color: hsl(var(--muted-foreground));
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

.feature-action {
    color: hsl(var(--primary));
    font-weight: 600;
    font-size: 0.9rem;
    opacity: 0.8;
    transition: opacity 0.3s ease;
}

.feature-card:hover .feature-action {
    opacity: 1;
}

/* 시작하기 섹션 */
.getting-started-section {
    background: linear-gradient(135deg, hsl(var(--primary) / 0.05), hsl(var(--accent) / 0.05));
    border-radius: 24px;
    padding: 4rem 2rem;
    text-align: center;
    border: 1px solid hsl(var(--border));
}

.getting-started-content h2 {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: hsl(var(--foreground));
}

.getting-started-content p {
    font-size: 1.2rem;
    color: hsl(var(--muted-foreground));
    margin-bottom: 2.5rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.getting-started-actions {
    display: flex;
    gap: 1.5rem;
    justify-content: center;
    flex-wrap: wrap;
}

/* 반응형 디자인 */
@media (max-width: 768px) {
    .landing-container {
        padding: 1rem;
    }

    .hero-section {
        grid-template-columns: 1fr;
        gap: 2rem;
        margin-bottom: 4rem;
        text-align: center;
    }

    .hero-title {
        font-size: 2.5rem;
    }

    .hero-description {
        font-size: 1.1rem;
    }

    .hero-actions {
        justify-content: center;
    }

    .features-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .feature-card {
        padding: 2rem;
    }

    .getting-started-section {
        padding: 3rem 1.5rem;
    }

    .getting-started-actions {
        flex-direction: column;
        align-items: center;
    }

    .cta-button {
        width: 100%;
        max-width: 300px;
        justify-content: center;
    }
}

/* ======================== */
/* 황금 도구들 섹션 스타일링 */
/* ======================== */

.tool-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    border-color: #e5e7eb;
}

.tool-btn:hover {
    background: linear-gradient(135deg, #5a67d8 0%, #667eea 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.tool-btn:active {
    transform: translateY(0);
}

/* ======================== */
/* 유튜브 무기창고 섹션 스타일링 */

/* AI 도구 카드 추가 스타일 */
.ai-tool-card {
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(20px);
    transform: translateY(0);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.ai-tool-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15) !important;
}

/* ======================== */
/* 홈페이지 섹션 완전 차단 규칙 */
/* ======================== */

/* 🔥 핵심 규칙: 기능 섹션에서 랜딩 섹션 완전 제거 */
#landingSection {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    width: 0 !important;
    position: absolute !important;
    left: -9999px !important;
    overflow: hidden !important;
}

body.landing-page #landingSection {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    width: auto !important;
    position: static !important;
    left: auto !important;
}

/* 🚫 최우선 차단 규칙: 기능 영역에서 홈페이지 요소 0% 표시 */
body:not(.landing-page) #landingSection,
body:not(.landing-page) #landingSection *,
body:not(.landing-page) .modern-landing-container,
body:not(.landing-page) .modern-landing-container *,
body:not(.landing-page) .modern-hero-section,
body:not(.landing-page) .modern-hero-section *,
body:not(.landing-page) .features-section,
body:not(.landing-page) .features-section *,
body:not(.landing-page) .testimonial-section,
body:not(.landing-page) .testimonial-section *,
body:not(.landing-page) .target-audience-section,
body:not(.landing-page) .target-audience-section *,
body:not(.landing-page) .getting-started-section,
body:not(.landing-page) .getting-started-section *,
body:not(.landing-page) .home-intro-section,
body:not(.landing-page) .home-intro-section *,
body:not(.landing-page) #featuresSection,
body:not(.landing-page) #testimonialSection,
body:not(.landing-page) #targetAudienceSection,
body:not(.landing-page) #gettingStartedSection {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

/* 기능 영역에서 홈페이지 소개 섹션들 숨기기 */
/* 영상찾기, 채널찾기 등 실기능 사용 시 마케팅 섹션 제거 */
body:not(.landing-page) .home-intro-section {
    display: none !important;
}

/* 기능 영역에서 랜딩 섹션 전체 숨기기 */
body:not(.landing-page) #landingSection {
    display: none !important;
}

/* 기능 영역에서 히어로 섹션과 시작하기 섹션 강제 숨기기 */
body:not(.landing-page) .modern-hero-section,
body:not(.landing-page) .getting-started-section,
body:not(.landing-page) .modern-landing-container {
    display: none !important;
}

/* 🚫 사이드바 활성화 시 홈페이지 요소 완전 차단 */
body.sidebar-active #landingSection,
body.sidebar-active #landingSection *,
body.sidebar-active .modern-landing-container,
body.sidebar-active .modern-landing-container *,
body.sidebar-active .modern-hero-section,
body.sidebar-active .modern-hero-section *,
body.sidebar-active .features-section,
body.sidebar-active .features-section *,
body.sidebar-active .testimonial-section,
body.sidebar-active .testimonial-section *,
body.sidebar-active .target-audience-section,
body.sidebar-active .target-audience-section *,
body.sidebar-active .getting-started-section,
body.sidebar-active .getting-started-section *,
body.sidebar-active .home-intro-section,
body.sidebar-active .home-intro-section *,
body.sidebar-active #featuresSection,
body.sidebar-active #testimonialSection,
body.sidebar-active #targetAudienceSection,
body.sidebar-active #gettingStartedSection {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

/* 🚫 특정 기능 섹션에서 홈페이지 요소 완전 차단 */
body[data-section="search"] #landingSection,
body[data-section="search"] #landingSection *,
body[data-section="search"] .modern-landing-container,
body[data-section="search"] .modern-landing-container *,
body[data-section="search"] .modern-hero-section,
body[data-section="search"] .modern-hero-section *,
body[data-section="search"] .features-section,
body[data-section="search"] .features-section *,
body[data-section="search"] .testimonial-section,
body[data-section="search"] .testimonial-section *,
body[data-section="search"] .target-audience-section,
body[data-section="search"] .target-audience-section *,
body[data-section="search"] .getting-started-section,
body[data-section="search"] .getting-started-section *,
body[data-section="search"] .home-intro-section,
body[data-section="search"] .home-intro-section *,
body[data-section="search"] #featuresSection,
body[data-section="search"] #testimonialSection,
body[data-section="search"] #targetAudienceSection,
body[data-section="search"] #gettingStartedSection,
body[data-section="channel"] #landingSection,
body[data-section="channel"] #landingSection *,
body[data-section="channel"] .modern-landing-container,
body[data-section="channel"] .modern-landing-container *,
body[data-section="channel"] .modern-hero-section,
body[data-section="channel"] .modern-hero-section *,
body[data-section="channel"] .features-section,
body[data-section="channel"] .features-section *,
body[data-section="channel"] .testimonial-section,
body[data-section="channel"] .testimonial-section *,
body[data-section="channel"] .target-audience-section,
body[data-section="channel"] .target-audience-section *,
body[data-section="channel"] .getting-started-section,
body[data-section="channel"] .getting-started-section *,
body[data-section="channel"] .home-intro-section,
body[data-section="channel"] .home-intro-section *,
body[data-section="channel"] #featuresSection,
body[data-section="channel"] #testimonialSection,
body[data-section="channel"] #targetAudienceSection,
body[data-section="channel"] #gettingStartedSection,
body[data-section="video-analysis"] #landingSection,
body[data-section="video-analysis"] #landingSection *,
body[data-section="video-analysis"] .modern-landing-container,
body[data-section="video-analysis"] .modern-landing-container *,
body[data-section="video-analysis"] .modern-hero-section,
body[data-section="video-analysis"] .modern-hero-section *,
body[data-section="video-analysis"] .features-section,
body[data-section="video-analysis"] .features-section *,
body[data-section="video-analysis"] .testimonial-section,
body[data-section="video-analysis"] .testimonial-section *,
body[data-section="video-analysis"] .target-audience-section,
body[data-section="video-analysis"] .target-audience-section *,
body[data-section="video-analysis"] .getting-started-section,
body[data-section="video-analysis"] .getting-started-section *,
body[data-section="video-analysis"] .home-intro-section,
body[data-section="video-analysis"] .home-intro-section *,
body[data-section="video-analysis"] #featuresSection,
body[data-section="video-analysis"] #testimonialSection,
body[data-section="video-analysis"] #targetAudienceSection,
body[data-section="video-analysis"] #gettingStartedSection,
body[data-section="trending"] #landingSection,
body[data-section="trending"] #landingSection *,
body[data-section="trending"] .modern-landing-container,
body[data-section="trending"] .modern-landing-container *,
body[data-section="trending"] .modern-hero-section,
body[data-section="trending"] .modern-hero-section *,
body[data-section="trending"] .features-section,
body[data-section="trending"] .features-section *,
body[data-section="trending"] .testimonial-section,
body[data-section="trending"] .testimonial-section *,
body[data-section="trending"] .target-audience-section,
body[data-section="trending"] .target-audience-section *,
body[data-section="trending"] .getting-started-section,
body[data-section="trending"] .getting-started-section *,
body[data-section="trending"] .home-intro-section,
body[data-section="trending"] .home-intro-section *,
body[data-section="trending"] #featuresSection,
body[data-section="trending"] #testimonialSection,
body[data-section="trending"] #targetAudienceSection,
body[data-section="trending"] #gettingStartedSection,
body[data-section="tournament"] #landingSection,
body[data-section="tournament"] #landingSection *,
body[data-section="tournament"] .modern-landing-container,
body[data-section="tournament"] .modern-landing-container *,
body[data-section="tournament"] .modern-hero-section,
body[data-section="tournament"] .modern-hero-section *,
body[data-section="tournament"] .features-section,
body[data-section="tournament"] .features-section *,
body[data-section="tournament"] .testimonial-section,
body[data-section="tournament"] .testimonial-section *,
body[data-section="tournament"] .target-audience-section,
body[data-section="tournament"] .target-audience-section *,
body[data-section="tournament"] .getting-started-section,
body[data-section="tournament"] .getting-started-section *,
body[data-section="tournament"] .home-intro-section,
body[data-section="tournament"] .home-intro-section *,
body[data-section="tournament"] #featuresSection,
body[data-section="tournament"] #testimonialSection,
body[data-section="tournament"] #targetAudienceSection,
body[data-section="tournament"] #gettingStartedSection,
body[data-section="script"] #landingSection,
body[data-section="script"] #landingSection *,
body[data-section="script"] .modern-landing-container,
body[data-section="script"] .modern-landing-container *,
body[data-section="script"] .modern-hero-section,
body[data-section="script"] .modern-hero-section *,
body[data-section="script"] .features-section,
body[data-section="script"] .features-section *,
body[data-section="script"] .testimonial-section,
body[data-section="script"] .testimonial-section *,
body[data-section="script"] .target-audience-section,
body[data-section="script"] .target-audience-section *,
body[data-section="script"] .getting-started-section,
body[data-section="script"] .getting-started-section *,
body[data-section="script"] .home-intro-section,
body[data-section="script"] .home-intro-section *,
body[data-section="script"] #featuresSection,
body[data-section="script"] #testimonialSection,
body[data-section="script"] #targetAudienceSection,
body[data-section="script"] #gettingStartedSection,
body[data-section="planning"] #landingSection,
body[data-section="planning"] #landingSection *,
body[data-section="planning"] .modern-landing-container,
body[data-section="planning"] .modern-landing-container *,
body[data-section="planning"] .modern-hero-section,
body[data-section="planning"] .modern-hero-section *,
body[data-section="planning"] .features-section,
body[data-section="planning"] .features-section *,
body[data-section="planning"] .testimonial-section,
body[data-section="planning"] .testimonial-section *,
body[data-section="planning"] .target-audience-section,
body[data-section="planning"] .target-audience-section *,
body[data-section="planning"] .getting-started-section,
body[data-section="planning"] .getting-started-section *,
body[data-section="planning"] .home-intro-section,
body[data-section="planning"] .home-intro-section *,
body[data-section="planning"] #featuresSection,
body[data-section="planning"] #testimonialSection,
body[data-section="planning"] #targetAudienceSection,
body[data-section="planning"] #gettingStartedSection,
body[data-section="my-channel"] #landingSection,
body[data-section="my-channel"] #landingSection *,
body[data-section="my-channel"] .modern-landing-container,
body[data-section="my-channel"] .modern-landing-container *,
body[data-section="my-channel"] .modern-hero-section,
body[data-section="my-channel"] .modern-hero-section *,
body[data-section="my-channel"] .features-section,
body[data-section="my-channel"] .features-section *,
body[data-section="my-channel"] .testimonial-section,
body[data-section="my-channel"] .testimonial-section *,
body[data-section="my-channel"] .target-audience-section,
body[data-section="my-channel"] .target-audience-section *,
body[data-section="my-channel"] .getting-started-section,
body[data-section="my-channel"] .getting-started-section *,
body[data-section="my-channel"] .home-intro-section,
body[data-section="my-channel"] .home-intro-section *,
body[data-section="my-channel"] #featuresSection,
body[data-section="my-channel"] #testimonialSection,
body[data-section="my-channel"] #targetAudienceSection,
body[data-section="my-channel"] #gettingStartedSection,
body[data-section="api-management"] #landingSection,
body[data-section="api-management"] #landingSection *,
body[data-section="api-management"] .modern-landing-container,
body[data-section="api-management"] .modern-landing-container *,
body[data-section="api-management"] .modern-hero-section,
body[data-section="api-management"] .modern-hero-section *,
body[data-section="api-management"] .features-section,
body[data-section="api-management"] .features-section *,
body[data-section="api-management"] .testimonial-section,
body[data-section="api-management"] .testimonial-section *,
body[data-section="api-management"] .target-audience-section,
body[data-section="api-management"] .target-audience-section *,
body[data-section="api-management"] .getting-started-section,
body[data-section="api-management"] .getting-started-section *,
body[data-section="api-management"] .home-intro-section,
body[data-section="api-management"] .home-intro-section *,
body[data-section="api-management"] #featuresSection,
body[data-section="api-management"] #testimonialSection,
body[data-section="api-management"] #targetAudienceSection,
body[data-section="api-management"] #gettingStartedSection,
body[data-section="thumbnail-game"] #landingSection,
body[data-section="thumbnail-game"] #landingSection *,
body[data-section="thumbnail-game"] .modern-landing-container,
body[data-section="thumbnail-game"] .modern-landing-container *,
body[data-section="thumbnail-game"] .modern-hero-section,
body[data-section="thumbnail-game"] .modern-hero-section *,
body[data-section="thumbnail-game"] .features-section,
body[data-section="thumbnail-game"] .features-section *,
body[data-section="thumbnail-game"] .testimonial-section,
body[data-section="thumbnail-game"] .testimonial-section *,
body[data-section="thumbnail-game"] .target-audience-section,
body[data-section="thumbnail-game"] .target-audience-section *,
body[data-section="thumbnail-game"] .getting-started-section,
body[data-section="thumbnail-game"] .getting-started-section *,
body[data-section="thumbnail-game"] .home-intro-section,
body[data-section="thumbnail-game"] .home-intro-section *,
body[data-section="thumbnail-game"] #featuresSection,
body[data-section="thumbnail-game"] #testimonialSection,
body[data-section="thumbnail-game"] #targetAudienceSection,
body[data-section="thumbnail-game"] #gettingStartedSection {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

/* 특정 기능 페이지에서 랜딩 섹션 전체 숨기기 */
body[data-section="search"] #landingSection,
body[data-section="channel"] #landingSection,
body[data-section="video-analysis"] #landingSection,
body[data-section="trending"] #landingSection,
body[data-section="tournament"] #landingSection,
body[data-section="script"] #landingSection,
body[data-section="planning"] #landingSection,
body[data-section="my-channel"] #landingSection,
body[data-section="api-management"] #landingSection,
body[data-section="thumbnail-game"] #landingSection {
    display: none !important;
}

/* 특정 기능 페이지에서 히어로 섹션과 시작하기 섹션 강제 숨기기 */
body[data-section="search"] .modern-hero-section,
body[data-section="channel"] .modern-hero-section,
body[data-section="video-analysis"] .modern-hero-section,
body[data-section="trending"] .modern-hero-section,
body[data-section="tournament"] .modern-hero-section,
body[data-section="script"] .modern-hero-section,
body[data-section="planning"] .modern-hero-section,
body[data-section="my-channel"] .modern-hero-section,
body[data-section="api-management"] .modern-hero-section,
body[data-section="thumbnail-game"] .modern-hero-section,
body[data-section="search"] .getting-started-section,
body[data-section="channel"] .getting-started-section,
body[data-section="video-analysis"] .getting-started-section,
body[data-section="trending"] .getting-started-section,
body[data-section="tournament"] .getting-started-section,
body[data-section="script"] .getting-started-section,
body[data-section="planning"] .getting-started-section,
body[data-section="my-channel"] .getting-started-section,
body[data-section="api-management"] .getting-started-section,
body[data-section="thumbnail-game"] .getting-started-section,
body[data-section="search"] .modern-landing-container,
body[data-section="channel"] .modern-landing-container,
body[data-section="video-analysis"] .modern-landing-container,
body[data-section="trending"] .modern-landing-container,
body[data-section="tournament"] .modern-landing-container,
body[data-section="script"] .modern-landing-container,
body[data-section="planning"] .modern-landing-container,
body[data-section="my-channel"] .modern-landing-container,
body[data-section="api-management"] .modern-landing-container,
body[data-section="thumbnail-game"] .modern-landing-container {
    display: none !important;
}

/* 검색 결과가 있을 때 홈페이지 섹션들 숨기기 */
.results-section:not(:empty) ~ .home-intro-section {
    display: none !important;
}

/* 채널 분석 결과가 있을 때 홈페이지 섹션들 숨기기 */
.channel-results:not(:empty) ~ .home-intro-section {
    display: none !important;
}

.ai-tool-card .badge {
    animation: pulse 2s infinite;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

.ai-tool-card .weapon-icon {
    transition: transform 0.3s ease;
}

.ai-tool-card:hover .weapon-icon {
    transform: scale(1.1) rotate(5deg);
}

.ai-tool-btn {
    position: relative;
    overflow: hidden;
}

.ai-tool-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s;
}

.ai-tool-btn:hover::before {
    left: 100%;
}

.ai-tool-btn:hover {
    background: rgba(255, 255, 255, 0.3) !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
    transform: scale(1.05);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

.ai-tool-card .card-overlay {
    transition: all 0.4s ease;
}

.ai-tool-card:hover .card-overlay {
    transform: translate(30%, -30%) scale(1.2);
    opacity: 0.2;
}

/* AI 도구 카드별 고유 색상 및 효과 - 기존 카드 삭제 후 첫 번째부터 시작 */
.ai-tool-card:nth-of-type(1) {
    background: linear-gradient(135deg, #1f2937 0%, #111827 100%) !important;
    border-color: rgba(31, 41, 55, 0.3) !important;
}

.ai-tool-card:nth-of-type(1):hover {
    box-shadow: 0 20px 40px rgba(31, 41, 55, 0.4) !important;
}

.ai-tool-card:nth-of-type(2) {
    background: linear-gradient(135deg, #1f2937 0%, #111827 100%) !important;
    border-color: rgba(31, 41, 55, 0.3) !important;
}

.ai-tool-card:nth-of-type(2):hover {
    box-shadow: 0 20px 40px rgba(31, 41, 55, 0.4) !important;
}

.ai-tool-card:nth-of-type(3) {
    background: linear-gradient(135deg, #1f2937 0%, #111827 100%) !important;
    border-color: rgba(31, 41, 55, 0.3) !important;
}

.ai-tool-card:nth-of-type(3):hover {
    box-shadow: 0 20px 40px rgba(31, 41, 55, 0.4) !important;
}

/* 반응형 디자인 개선 */
@media (max-width: 768px) {
    .ai-tool-card {
        padding: 1.5rem !important;
    }

    .ai-tool-card .weapon-icon {
        font-size: 2.5rem !important;
    }

    .ai-tool-card h3 {
        font-size: 1.2rem !important;
    }

    .ai-tool-card p {
        font-size: 0.9rem !important;
    }
}
/* ======================== */

.weapon-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
}

.weapon-btn:hover {
    background: rgba(255, 255, 255, 0.3);
    border-color: rgba(255, 255, 255, 0.5);
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
}

.weapon-btn:active {
    transform: translateY(0);
}

/* 특별한 그라디언트 무기 카드 호버 효과 */
.weapon-card:nth-child(3) .weapon-btn:hover {
    background: rgba(45, 55, 72, 0.9);
    border-color: rgba(45, 55, 72, 0.4);
}

/* 마스터 패키지 호버 효과 */
.arsenal-info button:hover {
    background: rgba(255, 255, 255, 0.3);
    border-color: rgba(255, 255, 255, 0.5);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.arsenal-info button:active {
    transform: translateY(0);
}

/* 반응형 디자인 */
@media (max-width: 768px) {
    .tools-grid,
    .arsenal-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .tool-card,
    .weapon-card {
        padding: 1.5rem;
    }

    .weapon-card h3 {
        font-size: 1.2rem;
    }

    .arsenal-info {
        padding: 1.5rem;
        margin-top: 2rem;
    }

    .arsenal-info h3 {
        font-size: 1.3rem;
    }
}

@media (max-width: 480px) {
    .tools-container,
    .arsenal-container {
        padding: 0 0.5rem;
    }

    .weapon-card ul {
        padding-left: 1rem;
    }

    .weapon-card li {
        font-size: 0.9rem;
    }
}