@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
    --bg-dark: #0f172a;
    --bg-sidebar: #1e293b;
    --bg-card: #1e293b;
    --bg-input: #334155;
    --text-primary: #f8fafc;
    --text-secondary: #94a3b8;
    --accent-primary: #10b981;
    /* Emerald Green */
    --accent-hover: #059669;
    --accent-secondary: #22c55e;
    /* Green */
    --success: #10b981;
    --warning: #f59e0b;
    --danger: #ef4444;
    --border-color: #334155;
    --glass-bg: rgba(30, 41, 59, 0.7);
    --glass-border: rgba(255, 255, 255, 0.1);
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);

    /* Purple Theme - 愿묎퀬 ?뚯젣 臾멸뎄 */
    --purple-primary: #9333ea;
    --purple-secondary: #a855f7;
    --purple-hover: #7e22ce;
    --purple-light: rgba(147, 51, 234, 0.1);
    --purple-gradient: linear-gradient(135deg, #9333ea 0%, #7e22ce 100%);

    --marketing-primary: #0EA5E9;
    --marketing-secondary: #38BDF8;
    --marketing-hover: #0284c7;
    --marketing-light: rgba(14, 165, 233, 0.1);
    --marketing-gradient: linear-gradient(135deg, #0EA5E9 0%, #38BDF8 100%);

    /* Google Theme - 援ш? 釉붾줈洹?(Blue) */
    --google-primary: #4285f4;
    --google-secondary: #5a9cf5;
    --google-hover: #3367d6;
    --google-light: rgba(66, 133, 244, 0.15);
    --google-gradient: linear-gradient(135deg, #4285f4 0%, #357abd 100%);

    /* YouTube Theme - 어두운 빨간색 */
    --youtube-primary: #CC0000;
    --youtube-secondary: #E52D27;
    --youtube-hover: #990000;
    --youtube-light: rgba(204, 0, 0, 0.1);
    --youtube-gradient: linear-gradient(135deg, #CC0000 0%, #990000 100%);

    /* Keyword Analyzer Theme - 청록색/파란색 */
    --keyword-primary: #06b6d4;
    --keyword-secondary: #3b82f6;
    --keyword-hover: #0891b2;
    --keyword-light: rgba(6, 182, 212, 0.1);
    --keyword-gradient: linear-gradient(135deg, #06b6d4 0%, #3b82f6 100%);

    /* Thumbnail Theme - 시안/청록색 (썸네일 생성) */
    --thumbnail-primary: #06b6d4;
    --thumbnail-secondary: #0891b2;
    --thumbnail-hover: #0e7490;
    --thumbnail-light: rgba(6, 182, 212, 0.15);
    --thumbnail-gradient: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);

    /* SEO Theme - ?뱀궗?댄듃 SEO (Orange) */
    --orange-primary: #FF6B35;
    --orange-secondary: #F7931E;
    --orange-hover: #e85d2a;
    --orange-light: rgba(255, 107, 53, 0.15);
    --orange-gradient: linear-gradient(135deg, #FF6B35 0%, #F7931E 100%);

    /* Default Theme Variables (Dynamic) */
    --theme-primary: var(--accent-primary);
    --theme-secondary: var(--accent-secondary);
    --theme-hover: var(--accent-hover);
    --theme-light: rgba(16, 185, 129, 0.1);
    --theme-gradient: linear-gradient(135deg, #10b981 0%, #059669 100%);

}

/* =========================================
   Universal Theme Scopes & Base Classes
   ========================================= */
.naver-theme,
.section-naver {
    --theme-primary: var(--accent-primary);
    --theme-secondary: var(--accent-secondary);
    --theme-hover: var(--accent-hover);
    --theme-light: rgba(16, 185, 129, 0.1);
    --theme-gradient: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

.google-theme,
.section-google {
    --theme-primary: var(--google-primary);
    --theme-secondary: var(--google-secondary);
    --theme-hover: var(--google-hover);
    --theme-light: var(--google-light);
    --theme-gradient: var(--google-gradient);
}

.youtube-theme,
.section-youtube {
    --theme-primary: var(--youtube-primary);
    --theme-secondary: var(--youtube-secondary);
    --theme-hover: var(--youtube-hover);
    --theme-light: var(--youtube-light);
    --theme-gradient: var(--youtube-gradient);
}

.keyword-theme,
.section-keyword {
    --theme-primary: var(--keyword-primary);
    --theme-secondary: var(--keyword-secondary);
    --theme-hover: var(--keyword-hover);
    --theme-light: var(--keyword-light);
    --theme-gradient: var(--keyword-gradient);
}

.analysis-theme,
.section-analysis {
    --theme-primary: var(--purple-primary);
    --theme-secondary: var(--purple-secondary);
    --theme-hover: var(--purple-hover);
    --theme-light: var(--purple-light);
    --theme-gradient: var(--purple-gradient);
}

/* 전문 분석 도구 - 보라색 테마 (purple-item과 동일) */
.analysis-item {
    color: var(--text-secondary);
}

.nav-item.analysis-item.active,
.nav-sub-item.analysis-item.active,
.nav-section-items .nav-item.analysis-item.active,
.nav-section-items .nav-sub-item.analysis-item.active {
    background: linear-gradient(90deg, rgba(147, 51, 234, 0.2) 0%, rgba(147, 51, 234, 0) 100%) !important;
    color: var(--purple-primary) !important;
    border-left: 3px solid var(--purple-primary) !important;
}

.nav-item.analysis-item:hover,
.nav-sub-item.analysis-item:hover,
.nav-section-items .nav-item.analysis-item:hover,
.nav-section-items .nav-sub-item.analysis-item:hover {
    background: rgba(147, 51, 234, 0.1) !important;
    color: var(--purple-secondary) !important;
}

.nav-item.analysis-item.active::before,
.nav-sub-item.analysis-item.active::before {
    background: var(--purple-primary) !important;
}

.purple-theme,
.section-purple {
    --theme-primary: var(--purple-primary);
    --theme-secondary: var(--purple-secondary);
    --theme-hover: var(--purple-hover);
    --theme-light: var(--purple-light);
    --theme-gradient: var(--purple-gradient);
}

.orange-theme,
.section-orange {
    --theme-primary: var(--orange-primary);
    --theme-secondary: var(--orange-secondary);
    --theme-hover: var(--orange-hover);
    --theme-light: var(--orange-light);
    --theme-gradient: var(--orange-gradient);
}

.marketing-theme,
.section-marketing {
    --theme-primary: var(--marketing-primary);
    --theme-secondary: var(--marketing-secondary);
    --theme-hover: var(--marketing-hover);
    --theme-light: var(--marketing-light);
    --theme-gradient: var(--marketing-gradient);
}

/* 썸네일 마스터 AI Pro 테마 - 시안/청록색 */
.thumbnail-theme,
.section-thumbnail {
    --theme-primary: var(--thumbnail-primary);
    --theme-secondary: var(--thumbnail-secondary);
    --theme-hover: var(--thumbnail-hover);
    --theme-light: var(--thumbnail-light);
    --theme-gradient: var(--thumbnail-gradient);
}

/* 썸네일 네비게이션 아이템 스타일 */
.nav-item.thumbnail-item {
    color: var(--text-secondary);
}

.nav-item.thumbnail-item.active,
.nav-sub-item.thumbnail-item.active,
.nav-section-items .nav-item.thumbnail-item.active,
.nav-section-items .nav-sub-item.thumbnail-item.active {
    background: linear-gradient(90deg, rgba(6, 182, 212, 0.2) 0%, rgba(6, 182, 212, 0) 100%) !important;
    color: var(--thumbnail-primary) !important;
    border-left: 3px solid var(--thumbnail-primary) !important;
}

.nav-item.thumbnail-item:hover,
.nav-sub-item.thumbnail-item:hover,
.nav-section-items .nav-item.thumbnail-item:hover,
.nav-section-items .nav-sub-item.thumbnail-item:hover {
    background: rgba(6, 182, 212, 0.1) !important;
    color: var(--thumbnail-secondary) !important;
}

.nav-item.thumbnail-item.active::before,
.nav-sub-item.thumbnail-item.active::before {
    background: var(--thumbnail-primary) !important;
}

/* Deep Research Theme - 파란색/하늘색 계열 통일 */
.deep-research-theme {
    --deep-research-primary: #0EA5E9;
    --deep-research-secondary: #38BDF8;
    --deep-research-hover: #0284c7;
    --deep-research-light: rgba(14, 165, 233, 0.1);
    --deep-research-gradient: linear-gradient(135deg, #0EA5E9 0%, #38BDF8 100%);
    --theme-primary: var(--deep-research-primary);
    --theme-secondary: var(--deep-research-secondary);
    --theme-hover: var(--deep-research-hover);
    --theme-light: var(--deep-research-light);
    --theme-gradient: var(--deep-research-gradient);
}

/* Service-Specific Buttons (Utilizing Theme Variables) */
.youtube-btn {
    background: var(--youtube-gradient);
    color: white;
    border: none;
    padding: 0.875rem 1.5rem;
    border-radius: 10px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    box-shadow: 0 4px 15px rgba(255, 0, 0, 0.3);
}

.youtube-btn:hover {
    background: var(--youtube-hover);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(255, 0, 0, 0.4);
}

.seo-btn {
    background: var(--orange-gradient);
    color: white;
    border: none;
    padding: 0.875rem 1.5rem;
    border-radius: 10px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    box-shadow: 0 4px 15px rgba(255, 107, 53, 0.3);
}

.seo-btn:hover {
    background: var(--orange-hover);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(255, 107, 53, 0.4);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

body {
    background-color: var(--bg-dark);
    color: var(--text-primary);
    height: 100vh;
    overflow: hidden;
}

/* Layout */
.app-container {
    display: flex;
    height: 100vh;
}

/* Sidebar */
.sidebar {
    width: 260px;
    background-color: var(--bg-sidebar);
    border-right: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    padding: 1rem;
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1),
        padding 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    overflow-y: auto;
    height: 100vh;
    position: relative;
}

/* ?ъ씠?쒕컮 ?ㅻ뜑 (濡쒓퀬 + ?묎린 踰꾪듉) */
.sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
    padding: 0 0.5rem;
    gap: 0.5rem;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.logo-container {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 1;
    padding: 0;
    margin-bottom: 0;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* 사이드바 접기 버튼 - 텍스트와 동일한 색상 */
.sidebar-toggle-btn {
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.3);
    color: #fff;
    font-size: 1.1rem;
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 8px;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(255, 255, 255, 0.1);
}

.sidebar-toggle-btn:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.5);
    color: #fff;
    box-shadow: 0 4px 12px rgba(255, 255, 255, 0.2);
    transform: scale(1.05);
}

.sidebar-toggle-btn:active {
    transform: scale(0.95);
}

#toggle-icon {
    transition: transform 0.3s ease;
}

/* ?ъ씠?쒕컮 ?묓엺 ?곹깭 */
.sidebar.collapsed {
    width: 60px;
    padding: 1rem 0;
    overflow-x: visible;
    align-items: center;
    display: flex;
    flex-direction: column;
}

/* ?묓엺 ?곹깭: ?ㅻ퉬寃뚯씠??硫붾돱 媛€?대뜲 ?뺣젹 */
.sidebar.collapsed .nav-menu {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

/* ?띿뒪???붿냼??- ?몃옖吏€??以€鍮?*/
.sidebar .nav-item span:not(.nav-icon-badge):not(.coming-soon-badge),
.sidebar .nav-section-header span:not(.nav-icon-badge):not(.coming-soon-badge),
.sidebar .sidebar-footer .sidebar-user-info .user-details,
.sidebar .status-indicator .status-text,
.sidebar .section-arrow {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.25s ease, visibility 0.25s ease;
    white-space: nowrap;
    overflow: hidden;
}

/* 濡쒓퀬 ?띿뒪??- 蹂꾨룄 ?몃옖吏€??*/
.sidebar .logo-text {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.25s ease, visibility 0.25s ease, width 0.3s ease;
}

/* ?묓엺 ?곹깭: ?띿뒪???④린湲?(?좊땲硫붿씠?? */
.sidebar.collapsed .nav-item span:not(.nav-icon-badge):not(.coming-soon-badge),
.sidebar.collapsed .nav-section-header span:not(.nav-icon-badge):not(.coming-soon-badge),
.sidebar.collapsed .sidebar-footer .sidebar-user-info .user-details,
.sidebar.collapsed .status-indicator .status-text {
    opacity: 0;
    visibility: hidden;
    width: 0;
    margin: 0;
    padding: 0;
}

/* ?묓엺 ?곹깭: 濡쒓퀬 ?띿뒪???④린湲?*/
.sidebar.collapsed .logo-text {
    opacity: 0;
    visibility: hidden;
    width: 0;
    overflow: hidden;
}

/* ?묓엺 ?곹깭: ?뱀뀡 ?붿궡??>) ?④린湲?*/
.sidebar.collapsed .section-arrow {
    opacity: 0;
    visibility: hidden;
    width: 0;
}

/* ?묓엺 ?곹깭: 濡쒓퀬 而⑦뀒?대꼫 ?꾩쟾???④린湲?*/
.sidebar.collapsed .logo-container {
    display: none;
}

.sidebar.collapsed .sidebar-header {
    justify-content: center;
    padding: 0;
    margin-bottom: 1rem;
    align-items: center;
}

/* ?좉? 踰꾪듉 - ?몃옖吏€??*/
.sidebar-toggle-btn {
    transition: all 0.3s ease, width 0.3s ease, height 0.3s ease;
}

/* ?묓엺 ?곹깭: ?좉? 踰꾪듉 ?ㅽ???- ?꾩쟾??媛€?대뜲 ?뺣젹 */
.sidebar.collapsed .sidebar-toggle-btn {
    width: 40px;
    height: 40px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ?좉? ?꾩씠肄?*/
#toggle-icon {
    transition: transform 0.2s ease;
}

/* ?ㅻ퉬寃뚯씠???꾩씠??- ?몃옖吏€??*/
.nav-item {
    transition: all 0.3s ease, padding 0.3s ease, justify-content 0.3s ease;
}

/* ?묓엺 ?곹깭: ?ㅻ퉬寃뚯씠???꾩씠??- ?꾩쟾??媛€?대뜲 ?뺣젹 */
.sidebar.collapsed .nav-item {
    justify-content: center;
    align-items: center;
    padding: 0.75rem;
    position: relative;
    margin: 0.25rem auto;
    width: 100%;
    display: flex;
}

/* ?묓엺 ?곹깭: ?ㅻ퉬寃뚯씠???꾩씠???꾩씠肄??ш린 諛?媛€?대뜲 ?뺣젹 */
.sidebar.collapsed .nav-item i {
    font-size: 1.1rem;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ?뱀뀡 ?ㅻ뜑 - ?몃옖吏€??*/
.nav-section-header {
    transition: all 0.3s ease, padding 0.3s ease;
}

/* ?묓엺 ?곹깭: ?뱀뀡 ?ㅻ뜑 - ?꾩쟾??媛€?대뜲 ?뺣젹 */
.sidebar.collapsed .nav-section-header {
    justify-content: center;
    align-items: center;
    padding: 0.75rem;
    margin: 0.25rem auto;
    width: 100%;
    display: flex;
}

/* 諭껋? - ?몃옖吏€??*/
.nav-icon-badge {
    transition: all 0.3s ease;
}

/* ?묓엺 ?곹깭: 諭껋? ?ш린 議곗젙 諛?媛€?대뜲 ?뺣젹 */
.sidebar.collapsed .nav-icon-badge {
    width: 28px;
    height: 28px;
    font-size: 0.85rem;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ?묓엺 ?곹깭: ?쒕툕 硫붾돱 ?④? */
.sidebar.collapsed .nav-section-items {
    position: absolute;
    left: 60px;
    top: 0;
    background: var(--bg-sidebar);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 0.5rem;
    min-width: 200px;
    box-shadow: var(--shadow-lg);
    z-index: 1000;
    display: none;
    max-height: none;
}

/* ?묓엺 ?곹깭: ?뱀뀡 ?몃쾭???쒕툕硫붾돱 ?쒖떆 */
.sidebar.collapsed .nav-section {
    position: relative;
}

.sidebar.collapsed .nav-section:hover .nav-section-items {
    display: block;
}

/* ?묓엺 ?곹깭: ?쒕툕硫붾돱 ?꾩씠???ㅽ???蹂듭썝 */
.sidebar.collapsed .nav-section-items .nav-sub-item {
    padding-left: 0.75rem !important;
    justify-content: flex-start;
}

.sidebar.collapsed .nav-section-items .nav-sub-item span {
    display: inline;
}

/* COMING SOON 諛곗? - ?몃옖吏€??*/
.coming-soon-badge {
    transition: opacity 0.25s ease, visibility 0.25s ease;
}

/* ?묓엺 ?곹깭: COMING SOON 諛곗? ?④린湲?*/
.sidebar.collapsed .coming-soon-badge {
    opacity: 0;
    visibility: hidden;
    width: 0;
    padding: 0;
    margin: 0;
}

/* ?ъ씠?쒕컮 ?섎떒 - ?몃옖吏€??*/
.sidebar-footer {
    transition: padding 0.3s ease;
}

.sidebar-footer .sidebar-user-info {
    transition: all 0.3s ease;
}

.sidebar-footer .user-avatar {
    transition: margin 0.3s ease;
}

/* ?묓엺 ?곹깭: ?ъ씠?쒕컮 ?섎떒 ?붿냼 - 媛€?대뜲 ?뺣젹 */
.sidebar.collapsed .sidebar-footer {
    padding: 0.5rem 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.sidebar.collapsed .sidebar-footer .sidebar-user-info {
    justify-content: center;
    align-items: center;
    width: 100%;
    display: flex;
}

.sidebar.collapsed .sidebar-footer .user-avatar {
    margin: 0 auto;
}

.sidebar.collapsed .sidebar-footer .status-indicator {
    justify-content: center;
    width: 100%;
}

/* ?묓엺 ?곹깭: ?섎떒 踰꾪듉 ?띿뒪??諛?濡쒓렇?꾩썐 踰꾪듉 ?④린湲?*/
.sidebar.collapsed .sidebar-login-btn span,
.sidebar.collapsed .sidebar-logout-btn,
.sidebar.collapsed .user-details,
.sidebar.collapsed .status-text,
.sidebar.collapsed .user-status {
    display: none;
}

/* ?묓엺 ?곹깭: 濡쒓렇??踰꾪듉 ?꾩씠肄섎쭔 ?쒖떆 */
.sidebar.collapsed .sidebar-login-btn {
    width: 40px;
    height: 40px;
    padding: 0;
    justify-content: center;
    align-items: center;
    display: flex;
    margin: 0 auto;
}

/* ?묓엺 ?곹깭: ?곹깭 ?쒖떆 ?꾩씠肄섎쭔 */
.sidebar.collapsed .status-indicator {
    justify-content: center;
    align-items: center;
    display: flex;
    padding: 0.5rem 0;
}

.sidebar.collapsed .status-dot {
    margin: 0 auto;
}

/* ?묓엺 ?곹깭?먯꽌 ?댄똻 */
.sidebar.collapsed .nav-item:hover::after,
.sidebar.collapsed .nav-section-header:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    left: calc(100% + 8px);
    top: 50%;
    transform: translateY(-50%);
    background: var(--bg-card);
    color: var(--text-primary);
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    font-size: 0.85rem;
    white-space: nowrap;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-lg);
    z-index: 1002;
    pointer-events: none;
    opacity: 0;
    animation: fadeInTooltip 0.15s ease forwards;
}

.sidebar.collapsed .nav-section-header {
    position: relative;
}

@keyframes fadeInTooltip {
    to {
        opacity: 1;
    }
}

.logo-icon {
    font-size: 1.5rem;
    color: var(--accent-primary);
    background: rgba(99, 102, 241, 0.1);
    padding: 0.4rem;
    border-radius: 10px;
}

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

.logo-text span {
    font-size: 1rem;
    font-weight: 700;
    background: linear-gradient(135deg, #fff 0%, #94a3b8 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.nav-menu {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex: 1;
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.65rem 0.875rem;
    border-radius: 10px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
    font-weight: 500;
    font-size: 0.9rem;
}

.nav-item:hover {
    background-color: rgba(255, 255, 255, 0.05);
    color: var(--text-primary);
}

.nav-item.active {
    background: linear-gradient(90deg, rgba(99, 102, 241, 0.15) 0%, rgba(99, 102, 241, 0) 100%);
    color: var(--accent-primary);
    border-left: 3px solid var(--accent-primary);
}

/* Naver Blog ?뱀깋 ?뚮쭏 */
.nav-item.naver-item.active,
.naver-item.active {
    background: linear-gradient(90deg, rgba(34, 197, 94, 0.2) 0%, rgba(34, 197, 94, 0) 100%);
    color: #22c55e;
    border-left: 3px solid #22c55e;
}

.nav-item.naver-item:hover {
    background: rgba(34, 197, 94, 0.1);
    color: #22c55e;
}

/* Google Blog ?뚮????뚮쭏 */
.nav-item.google-item:hover {
    background: rgba(66, 133, 244, 0.1);
    color: #4285f4;
}

/* ?뱀궗?댄듃 SEO 二쇳솴???뚮쭏 */
.nav-item.seo-item:hover,
.nav-section-items .nav-item:hover:not(.naver-item):not(.google-item):not(.purple-item):not(.marketing-item):not(.deep-research-item):not(.analysis-item) {
    background: rgba(255, 107, 53, 0.1);
    color: #FF6B35;
}

/* ?ㅻ퉬寃뚯씠???뱀뀡 ?ㅽ???*/
.nav-section {
    margin: 0.15rem 0;
}

.nav-section-header {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.6rem 0.875rem;
    border-radius: 8px;
    font-size: 0.875rem;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
    font-weight: 600;
    font-size: 0.9rem;
}

/* ?ㅻ퉬寃뚯씠???꾩씠肄?諛곗? (N, G, S ?? */
.nav-icon-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: linear-gradient(135deg, #10b981, #059669);
    color: white;
    border-radius: 6px;
    font-weight: 700;
    font-size: 0.8rem;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
}

.nav-section-header:hover:not(.disabled) {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-primary);
}

.nav-section-header .section-arrow {
    margin-left: auto;
    font-size: 0.7rem;
    transition: transform 0.2s ease;
}

.nav-section.collapsed .section-arrow {
    transform: rotate(-90deg);
}

.nav-section-header.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.nav-section-items {
    overflow: hidden;
    transition: max-height 0.3s ease;
    max-height: 300px;
}

.nav-section.collapsed .nav-section-items {
    max-height: 0;
}

.nav-sub-item {
    padding-left: 2rem !important;
    font-size: 0.85rem;
}

.coming-soon-badge {
    margin-left: auto;
    font-size: 0.65rem;
    padding: 0.2rem 0.5rem;
    background: rgba(16, 185, 129, 0.2);
    color: var(--accent-primary);
    border-radius: 4px;
    font-weight: 600;
    text-transform: uppercase;
}

.nav-divider {
    height: 1px;
    background: var(--border-color);
    margin: 1rem 0;
}

.nav-item.highlight-notification {
    animation: highlight-pulse 1s ease-in-out infinite;
    background: linear-gradient(90deg, rgba(16, 185, 129, 0.2) 0%, rgba(16, 185, 129, 0) 100%);
    color: var(--success-color);
}

@keyframes highlight-pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.6;
    }
}

.sidebar-footer {
    margin-top: auto;
    padding-top: 1rem;
    padding-bottom: 0.5rem;
    border-top: 1px solid var(--border-color);
}

.status-indicator {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--text-secondary);
}

.status-indicator.online .status-dot {
    background-color: var(--success);
    box-shadow: 0 0 8px rgba(16, 185, 129, 0.4);
}

/* Main Content */
.main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: radial-gradient(circle at top right, #1e293b 0%, #0f172a 40%);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    min-width: 0;
    /* flex ?꾩씠?쒖씠 異뺤냼?????덈룄濡?*/
    width: 100% !important;
    max-width: 100% !important;
}

/* ?ъ씠?쒕컮媛€ ?ロ삍????硫붿씤 肄섑뀗痢??뺤옣 */
.sidebar.collapsed~.main-content {
    width: calc(100% - 60px) !important;
    max-width: calc(100% - 60px) !important;
}

.sidebar:not(.collapsed)~.main-content {
    width: calc(100% - 260px) !important;
    max-width: calc(100% - 260px) !important;
}

.top-header {
    height: 80px;
    padding: 0 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--border-color);
    background-color: rgba(15, 23, 42, 0.8);
    backdrop-filter: blur(10px);
    z-index: 10;
}

.page-title h1 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
}

.page-title p {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin-top: 0.25rem;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.icon-btn {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-size: 1.25rem;
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 50%;
    transition: all 0.2s;
}

.icon-btn:hover {
    background-color: rgba(255, 255, 255, 0.05);
    color: var(--text-primary);
}

.icon-btn#cleanup-files-btn:hover {
    color: var(--warning);
}

/* 실행 중지 버튼 - 눈에 잘 보이는 스타일 */
.stop-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: linear-gradient(135deg, #dc2626, #b91c1c);
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 2px 8px rgba(220, 38, 38, 0.3);
}

.stop-btn:hover {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.4);
    transform: translateY(-1px);
}

.stop-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(220, 38, 38, 0.3);
}

.stop-btn i {
    font-size: 0.9rem;
}

.icon-btn[title] {
    position: relative;
}

.icon-btn[title]:hover::after {
    content: attr(title);
    position: absolute;
    bottom: -35px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--bg-card);
    color: var(--text-primary);
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 0.75rem;
    white-space: nowrap;
    border: 1px solid var(--border-color);
    z-index: 1000;
}

.user-profile .avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.85rem;
    color: white;
    box-shadow: var(--shadow-md);
}

/* Content Area */
.content-area {
    flex: 1;
    overflow-y: auto;
    padding: 2rem;
    position: relative;
}

/* UI Canvas Tab 활성화 시 content-area padding 제거 */
.content-area #ui-canvas-editor-tab.tab-content.active ~ *,
.content-area:has(#ui-canvas-editor-tab.tab-content.active) {
    padding: 0 !important;
}

.content-area:has(#ui-canvas-editor-tab.tab-content.active) {
    padding: 0 !important;
    overflow: hidden;
}

/* YouTube 遺꾩꽍 ???꾩슜 ?덉씠?꾩썐 蹂댁젙 */
.content-area #youtube-analysis-tab.tab-content {
    margin: 0;
    padding: 0;
    width: 100%;
    max-width: 100%;
}

.content-area #youtube-analysis-tab .youtube-analysis-container {
    margin: 0;
    padding: 0;
    width: 100%;
    max-width: 100%;
}

/* 유튜브 분석 탭 활성화 시 content-area 스크롤 활성화 */
.content-area:has(#youtube-analysis-tab.tab-content.active) {
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

/* 키워드 분석기 탭 전체 화면 스타일 (YouTube 분석과 동일) - active일 때만 적용 */
.content-area #keyword-analyzer-tab.tab-content.active {
    margin: 0;
    padding: 0;
    width: 100%;
    max-width: 100%;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
}

/* 네이버 블로그 분석 탭 전체 화면 스타일 */
.content-area #naver-blog-analyzer-tab.tab-content.active {
    margin: 0;
    padding: 0;
    width: 100%;
    max-width: 100%;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
}

.naver-blog-analysis-layout {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    width: 100%;
    max-width: 100%;
    margin: 0;
}

/* 키워드 분석기 레이아웃 (YouTube와 동일) */
.keyword-analysis-layout {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 1.5rem !important;
    min-height: min-content;
}

/* 키워드 분석기 결과 영역 */
#keyword-analyzer-results {
    padding-bottom: 2rem;
}

/* 키워드 분석기 mode-tab 활성화 스타일 (YouTube와 동일한 불투명 스타일, 색상만 키워드 테마) */
.keyword-analysis-layout .mode-tab.active,
.keyword-mode-tabs .mode-tab.active {
    border-color: var(--keyword-primary) !important;
    border-width: 2px !important;
    background: rgba(6, 182, 212, 0.15) !important;
    color: var(--text-primary) !important;
}

.keyword-analysis-layout .mode-tab.active i,
.keyword-mode-tabs .mode-tab.active i {
    color: var(--keyword-primary) !important;
}

.keyword-analysis-layout .mode-tab:hover:not(.active),
.keyword-mode-tabs .mode-tab:hover:not(.active) {
    border-color: var(--keyword-primary);
    background: rgba(6, 182, 212, 0.05);
}

.keyword-analysis-layout .mode-tab:hover:not(.active) i,
.keyword-mode-tabs .mode-tab:hover:not(.active) i {
    color: var(--keyword-primary);
}

/* SNS 분석 mode-tab 활성화 스타일 (보라색 테마) */
.sns-analysis-layout .mode-tab.active,
.analysis-theme .mode-tab.active {
    border-color: var(--purple-primary) !important;
    border-width: 2px !important;
    background: rgba(139, 92, 246, 0.15) !important;
    color: var(--text-primary) !important;
}

.sns-analysis-layout .mode-tab.active i,
.analysis-theme .mode-tab.active i {
    color: var(--purple-primary) !important;
}

.sns-analysis-layout .mode-tab:hover:not(.active),
.analysis-theme .mode-tab:hover:not(.active) {
    border-color: var(--purple-primary);
    background: rgba(139, 92, 246, 0.05);
}

.sns-analysis-layout .mode-tab:hover:not(.active) i,
.analysis-theme .mode-tab:hover:not(.active) i {
    color: var(--purple-primary);
}

/* SNS 분석 레이아웃 - 전체 화면 차지 */
.sns-analysis-layout {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

/* YouTube 분석 레이아웃 - 전체 화면 차지 */
.youtube-analysis-layout {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    height: 100% !important;
}

.tab-content {
    display: none !important;
    animation: fadeIn 0.3s ease;
}

.tab-content.active {
    display: block !important;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Dashboard Widgets */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.stat-card {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 1.5rem;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    transition: transform 0.2s;
}

.stat-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.stat-icon {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}

.stat-icon.blue {
    background: rgba(99, 102, 241, 0.1);
    color: var(--accent-primary);
}

.stat-icon.purple {
    background: rgba(16, 185, 129, 0.1);
    color: var(--accent-secondary);
}

.stat-icon.green {
    background: rgba(16, 185, 129, 0.1);
    color: var(--success);
}

.stat-icon.red {
    background: rgba(239, 68, 68, 0.1);
    color: var(--error);
}

.stat-icon.gray {
    background: rgba(148, 163, 184, 0.1);
    color: var(--text-secondary);
}

.stat-icon.yellow {
    background: rgba(234, 179, 8, 0.1);
    color: #eab308;
}

.stat-info h3 {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin-bottom: 0.25rem;
}

.stat-info .stat-value {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
}

/* Widgets */
.widget {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    overflow: hidden;
}

.widget-header {
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.widget-header h2 {
    font-size: 1.1rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.widget-body {
    padding: 1.5rem;
}

/* Log Console */
.log-console {
    background-color: #000;
    border-radius: 8px;
    padding: 1rem;
    height: 300px;
    overflow-y: auto;
    font-family: 'Consolas', monospace;
    font-size: 0.9rem;
    border: 1px solid var(--border-color);
}

.log-entry {
    margin-bottom: 0.5rem;
    line-height: 1.4;
}

.log-entry .time {
    color: var(--text-secondary);
    margin-right: 0.5rem;
}

.log-entry.info {
    color: #e2e8f0;
}

.log-entry.success {
    color: var(--success);
}

.log-entry.error {
    color: var(--danger);
}

.log-entry.warning {
    color: var(--warning);
}

/* Forms & Inputs */
.form-container {
    max-width: 600px;
    margin: 0 auto;
    background-color: var(--bg-card);
    padding: 2rem;
    border-radius: 16px;
    border: 1px solid var(--border-color);
}

/* ?щ·留??ㅼ젙 洹몃━??*/
.crawl-settings-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 1.5rem;
}

.crawl-settings-grid .form-group {
    margin-bottom: 0;
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
}

.checkbox-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--accent-primary);
}

@media (max-width: 768px) {
    .crawl-settings-grid {
        grid-template-columns: 1fr;
    }
}

.form-group {
    margin-bottom: 1.5rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    color: var(--text-secondary);
    font-size: 0.9rem;
    font-weight: 500;
}

.checkbox-group label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
}

.checkbox-group input[type="checkbox"] {
    width: auto;
}

.checkbox-group small {
    display: block;
    margin-top: 0.35rem;
    color: var(--text-secondary);
    font-size: 0.8rem;
}

input[type="text"],
input[type="email"],
input[type="number"],
input[type="password"],
input[type="url"],
textarea {
    width: 100%;
    padding: 0.875rem 1rem;
    background-color: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 1rem;
    transition: all 0.2s;
}

input:focus,
textarea:focus {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
}

/* form-input ?대옒??紐낆떆???ㅽ???(SEO 媛€?대뱶 ??紐⑤뱺 ?낅젰 ?꾨뱶 ?듭씪) */
.form-input,
.form-select {
    width: 100%;
    padding: 0.875rem 1rem;
    background-color: var(--bg-input) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 8px;
    color: var(--text-primary) !important;
    font-size: 1rem;
    transition: all 0.2s;
    font-family: inherit;
}

.form-input::placeholder {
    color: var(--text-secondary);
    opacity: 0.7;
}

.form-input:focus,
.form-select:focus {
    outline: none;
    border-color: var(--accent-primary) !important;
    box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.2);
}

.form-input:hover,
.form-select:hover {
    border-color: var(--accent-primary);
}

/* select ?붿냼 ?ㅽ???*/
.form-select {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2394a3b8' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    padding-right: 2.5rem;
}

.form-select option {
    background-color: var(--bg-input);
    color: var(--text-primary);
}

/* SEO 媛€?대뱶 ?뚮쭏蹂??ъ빱???됱긽 */
.orange-theme .form-input:focus,
.orange-theme .form-select:focus {
    border-color: var(--orange-primary) !important;
    box-shadow: 0 0 0 2px rgba(255, 107, 53, 0.2);
}

.orange-theme .form-input:hover,
.orange-theme .form-select:hover {
    border-color: var(--orange-primary);
}

.primary-btn {
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
    color: white;
    border: none;
    padding: 0.875rem 1.5rem;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.primary-btn:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}

.primary-btn.full-width {
    width: 100%;
}

/* ?덉뿉 ?꾨뒗 ?≪꽱??踰꾪듉 (?뚰겕?뚮줈??以묒슂 ?④퀎?? */
.accent-btn {
    background: linear-gradient(90deg, #10b981 0%, #059669 50%, #047857 100%);
    color: white;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    box-shadow: 0 4px 15px rgba(99, 102, 241, 0.3);
    position: relative;
    overflow: hidden;
}

.accent-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 ease;
}

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

.accent-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(99, 102, 241, 0.4);
}

.accent-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* Naver Blog ?뱀깋 ?뚮쭏 踰꾪듉 */
.naver-btn,
.naver-accent-btn {
    background: linear-gradient(135deg, #10b981 0%, #059669 50%, #047857 100%);
    color: white;
    border: none;
    padding: 0.875rem 1.5rem;
    border-radius: 10px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3);
    position: relative;
    overflow: hidden;
}

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

.naver-btn:hover::before,
.naver-accent-btn:hover::before {
    left: 100%;
}

.naver-btn:hover,
.naver-accent-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(16, 185, 129, 0.4);
    background: linear-gradient(135deg, #22c55e 0%, #10b981 50%, #059669 100%);
}

.naver-btn:disabled,
.naver-accent-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.naver-btn.full-width,
.naver-accent-btn.full-width {
    width: 100%;
}

/* Naver Blog ?뱀뀡 移대뱶 ?뚮몢由?*/
.naver-section .section-card,
.naver-theme .section-card {
    border-left: 3px solid #10b981;
}

/* Naver Blog 媛뺤“ ?띿뒪??*/
.naver-highlight {
    color: #22c55e;
}

/* ?뚰겕?뚮줈???④퀎 ?쒖떆 */
.workflow-step {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.step-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
    color: white;
    font-size: 0.85rem;
    font-weight: 700;
    flex-shrink: 0;
}

.step-badge.completed {
    background: var(--success);
}

.step-title {
    font-weight: 600;
    color: var(--text-primary);
}

.step-desc {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-left: 2.5rem;
    margin-bottom: 1rem;
}

/* Search Bar */
.search-bar {
    display: flex;
    gap: 1rem;
    max-width: 800px;
    margin: 0 auto 2rem;
}

.search-bar .primary-btn,
.search-bar .naver-btn {
    min-width: 150px;
    padding: 0.875rem 2rem;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Empty State */
.empty-state {
    text-align: center;
    padding: 4rem 2rem;
    color: var(--text-secondary);
}

.empty-state i {
    font-size: 3rem;
    margin-bottom: 1rem;
    opacity: 0.5;
}

/* Split View */
.split-view {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    height: calc(100vh - 200px);
}

.left-panel,
.right-panel {
    background-color: var(--bg-card);
    border-radius: 16px;
    border: 1px solid var(--border-color);
    padding: 1.5rem;
    overflow-y: auto;
}

.content-workflow {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.workflow-hint {
    border-radius: 12px;
    padding: 1rem 1.25rem;
    border: 1px solid var(--border-color);
    background-color: rgba(99, 102, 241, 0.08);
    color: var(--text-primary);
    font-weight: 500;
}

.workflow-hint.info {
    border-color: rgba(99, 102, 241, 0.5);
}

.workflow-hint.warning {
    border-color: rgba(245, 158, 11, 0.5);
    background-color: rgba(245, 158, 11, 0.08);
}

.workflow-hint.success {
    border-color: rgba(16, 185, 129, 0.5);
    background-color: rgba(16, 185, 129, 0.08);
}

.context-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
}

.context-card {
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1rem 1.25rem;
    background-color: rgba(15, 23, 42, 0.6);
}

.context-label {
    font-size: 0.85rem;
    color: var(--text-secondary);
    display: block;
    margin-bottom: 0.35rem;
}

.context-value {
    font-size: 1.05rem;
    color: var(--text-primary);
    font-weight: 600;
    word-break: break-word;
}

.seo-section,
.latest-info-section {
    border: 1px solid var(--border-color);
    border-radius: 16px;
    background-color: var(--bg-card);
    padding: 1.5rem;
}

.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.section-header h3 {
    margin: 0;
    font-size: 1.1rem;
}

.section-desc {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-top: 0.35rem;
}

.section-actions {
    display: flex;
    gap: 0.75rem;
}

.ghost-btn {
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 0.6rem 1rem;
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.2s ease;
    font-weight: 500;
}

.ghost-btn:hover:enabled {
    border-color: var(--accent-primary);
    color: var(--accent-primary);
}

.ghost-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.seo-title-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.seo-title-list .placeholder {
    margin: 0;
}

.seo-pill {
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 0.85rem 1rem;
    background-color: rgba(15, 23, 42, 0.4);
    cursor: pointer;
    min-width: 200px;
    text-align: left;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.seo-pill:hover {
    border-color: var(--accent-primary);
}

.seo-pill.selected {
    border-color: var(--accent-primary);
    background: rgba(99, 102, 241, 0.15);
}

.seo-pill-title {
    font-weight: 600;
    color: var(--text-primary);
}

.seo-pill-meta {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.latest-info-wrapper {
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1rem;
    background-color: rgba(15, 23, 42, 0.5);
}

.latest-info-content {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--text-primary);
    white-space: pre-line;
}

.latest-info-sources {
    margin-top: 1rem;
    border-top: 1px solid var(--border-color);
    padding-top: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.latest-source-item {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.latest-source-item a {
    color: var(--accent-primary);
    text-decoration: none;
    font-size: 0.9rem;
    word-break: break-all;
}

.latest-source-item span {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.placeholder {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.hidden {
    display: none !important;
}

/* Markdown Preview */
.preview-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-color);
}

.markdown-preview {
    line-height: 1.6;
    color: #e2e8f0;
}

/* Image Gallery */
.image-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
}

.gallery-item {
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--border-color);
    position: relative;
    aspect-ratio: 16/9;
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
}

.gallery-item:hover img {
    transform: scale(1.05);
}

/* Toast - 모달 위에 표시되도록 z-index 최상위 설정 */
#toast-container {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.toast {
    background-color: var(--bg-card);
    border-left: 4px solid var(--accent-primary);
    padding: 1rem 1.5rem;
    border-radius: 8px;
    box-shadow: var(--shadow-lg);
    display: flex;
    align-items: center;
    gap: 1rem;
    min-width: 300px;
    animation: slideIn 0.3s ease;
}

.toast.success {
    border-color: var(--success);
}

.toast.error {
    border-color: var(--danger);
}

@keyframes slideIn {
    from {
        transform: translateX(100%);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* Scrollbar */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--bg-dark);
}

::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--text-secondary);
}

/* Posting Tab Styles */
.posting-container {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* Auth Required Container - Google Blogger 인증 UI */
.auth-required-container {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2rem;
}

.auth-card {
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 2.5rem;
    text-align: center;
    max-width: 450px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.auth-icon {
    margin-bottom: 1.5rem;
}

.auth-card h4 {
    font-size: 1.5rem;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 0.75rem;
}

.auth-card p {
    color: #64748b;
    margin-bottom: 1.5rem;
    line-height: 1.6;
}

.auth-features {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem 0;
    text-align: left;
}

.auth-features li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0;
    color: #475569;
}

.auth-features li i {
    color: #22c55e;
    font-size: 0.9rem;
}

.auth-btn {
    width: 100%;
    padding: 1rem 2rem !important;
    font-size: 1.1rem !important;
    background: linear-gradient(135deg, #4285F4 0%, #34A853 50%, #FBBC05 75%, #EA4335 100%) !important;
    background-size: 300% 100% !important;
    animation: googleGradient 3s ease infinite;
    border: none !important;
    color: white !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}

@keyframes googleGradient {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.auth-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(66, 133, 244, 0.4);
}

.auth-note {
    margin-top: 1rem !important;
    font-size: 0.85rem !important;
    color: #94a3b8 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.auth-note i {
    color: #22c55e;
}

/* Posting Status */
.posting-status.not-authenticated .status-dot {
    background: #f59e0b !important;
}

.posting-status.not-authenticated .status-text {
    color: #f59e0b !important;
}

/* Auth Management */
.auth-management {
    text-align: right;
}

.auth-management .danger {
    color: #ef4444 !important;
    border-color: #ef4444 !important;
}

.auth-management .danger:hover {
    background: #fef2f2 !important;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.radio-group {
    display: flex;
    gap: 1.5rem;
    margin-top: 0.5rem;
}

.radio-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    padding: 0.75rem 1rem;
    background: var(--bg-input);
    border-radius: 8px;
    transition: all 0.2s;
}

.radio-label:hover {
    background: var(--border-color);
}

.radio-label input[type="radio"]:checked+span {
    color: var(--accent-primary);
    font-weight: 600;
}

.posting-preview {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.preview-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: var(--bg-input);
    border-radius: 8px;
}

.preview-label {
    font-weight: 500;
    color: var(--text-secondary);
    min-width: 100px;
}

.preview-value {
    color: var(--text-primary);
    font-weight: 600;
}

.primary-btn.large {
    padding: 1rem 2rem;
    font-size: 1.1rem;
}

.primary-btn.small,
.secondary-btn.small {
    padding: 0.5rem 1rem;
    font-size: 0.85rem;
}

.secondary-btn {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    padding: 0.875rem 1.5rem;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    white-space: nowrap;
}

.secondary-btn:hover {
    background: var(--bg-hover);
    border-color: var(--accent-primary);
}

#posting-logs {
    max-height: 200px;
    overflow-y: auto;
}

/* Form Select Dropdown */
.form-select {
    width: 100%;
    padding: 0.75rem 1rem;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 1rem;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%2394a3b8' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    padding-right: 2.5rem;
    transition: all 0.2s;
}

.form-select:hover {
    border-color: var(--accent-primary);
}

.form-select:focus {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
}

.form-select option {
    background: var(--bg-card);
    color: var(--text-primary);
    padding: 0.5rem;
}

/* SEO Title Selection Cards */
.seo-title-card {
    transition: all 0.2s ease;
}

.seo-title-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.seo-title-card.selected {
    border-color: var(--accent-primary) !important;
    background: rgba(99, 102, 241, 0.1) !important;
}

/* File Upload Area */
.file-upload-area {
    display: flex;
    align-items: center;
    gap: 1rem;
}

#footer-image-name {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

/* Content Options Section */
.content-options-section {
    margin-bottom: 1.5rem;
}

.style-options {
    display: flex;
    gap: 1rem;
}

.style-option {
    flex: 1;
    display: flex;
    align-items: flex-start;
    padding: 1rem;
    border: 2px solid var(--border-color);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    background: var(--bg-input);
}

.style-option:hover {
    border-color: var(--accent-primary);
    background: rgba(99, 102, 241, 0.05);
}

.style-option.selected {
    border-color: var(--accent-primary);
    background: rgba(99, 102, 241, 0.1);
}

.style-option input[type="radio"] {
    margin-right: 0.75rem;
    margin-top: 0.25rem;
}

.style-label {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.style-label strong {
    color: var(--text-primary);
}

.style-label small {
    color: var(--text-secondary);
    font-size: 0.8rem;
}

/* Collapsible Section */
.collapsible-section {
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
}

.collapsible-section summary {
    padding: 0.75rem 1rem;
    background: var(--bg-input);
    cursor: pointer;
    font-weight: 500;
    color: var(--text-primary);
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.collapsible-section summary::after {
    content: '+';
    font-size: 1.2rem;
    color: var(--text-secondary);
}

.collapsible-section[open] summary::after {
    content: '-';
}

.collapsible-section summary::-webkit-details-marker {
    display: none;
}

.collapsible-content {
    padding: 1rem;
    border-top: 1px solid var(--border-color);
}

/* Analysis Stats */
.analysis-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 1rem;
}

.stat-item {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.75rem;
    background: var(--bg-input);
    border-radius: 8px;
    text-align: center;
}

.stat-label {
    font-size: 0.75rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.stat-value {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--accent-primary);
}

/* Progress Bar */
.progress-container {
    width: 100%;
    height: 8px;
    background: var(--bg-input);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 0.5rem;
}

.progress-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary));
    transition: width 0.3s ease;
}

.status-text {
    font-size: 0.85rem;
    color: var(--text-secondary);
    text-align: center;
}

/* Image Tab Styles */
.mode-tabs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

.mode-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1.25rem 1rem;
    background: var(--bg-input);
    border: 2px solid var(--border-color);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s;
}

.mode-tab:hover {
    border-color: var(--accent-primary);
    background: rgba(16, 185, 129, 0.05);
}

.mode-tab.active {
    border-color: var(--accent-primary);
    background: rgba(16, 185, 129, 0.1);
}

/* 네이버 블로그 mode-tab 선택 스타일 (model-option과 동일) */
#naver-images-mode-tabs .mode-tab.active,
.mode-tabs .mode-tab.active {
    border-color: var(--accent-primary) !important;
    border-width: 2px !important;
    background: rgba(16, 185, 129, 0.15) !important;
}

#naver-images-mode-tabs .mode-tab.active i,
.mode-tabs .mode-tab.active i {
    color: var(--accent-primary) !important;
}

#naver-images-mode-tabs .mode-tab.active span,
.mode-tabs .mode-tab.active span {
    color: var(--text-primary) !important;
}

#naver-images-mode-tabs .mode-tab.active small,
.mode-tabs .mode-tab.active small {
    color: var(--accent-primary) !important;
}

/* Google Blog ?뚮쭏 - 紐⑤뱶 ???뚮???*/
#google-images-tab .mode-tab:hover:not(.active) {
    border-color: var(--google-blue);
    background: rgba(66, 133, 244, 0.05);
}

#google-images-tab .mode-tab.active,
#google-images-mode-tabs .mode-tab.active {
    border-color: var(--google-blue);
    background: linear-gradient(135deg, var(--google-blue), var(--google-blue-hover));
    color: white;
}

#google-images-tab .mode-tab.active span,
#google-images-mode-tabs .mode-tab.active span {
    color: white;
}

#google-images-tab .mode-tab.active small,
#google-images-mode-tabs .mode-tab.active small {
    color: rgba(255, 255, 255, 0.9);
}

#google-images-tab .mode-tab:hover:not(.active),
#google-images-mode-tabs .mode-tab:hover:not(.active) {
    border-color: var(--google-blue);
    background: rgba(66, 133, 244, 0.05);
}

.mode-tab i {
    font-size: 1.5rem;
    color: var(--accent-primary);
}

/* Google Blog ?뚮쭏 - 紐⑤뱶 ???꾩씠肄??뚮???*/
#google-images-tab .mode-tab i,
#google-images-mode-tabs .mode-tab i {
    color: var(--google-blue);
}

#google-images-tab .mode-tab.active i,
#google-images-mode-tabs .mode-tab.active i {
    color: white;
}

#google-images-tab .mode-tab:hover:not(.active) i,
#google-images-mode-tabs .mode-tab:hover:not(.active) i {
    color: var(--google-blue);
}

.mode-tab span {
    font-weight: 600;
    color: var(--text-primary);
}

.mode-tab small {
    font-size: 0.75rem;
    color: var(--text-secondary);
    text-align: center;
}

/* Image Model Selector */
.model-options {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
}

.model-option {
    cursor: pointer;
}

.model-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    padding: 1rem;
    background: var(--bg-secondary);
    border: 2px solid var(--border-color);
    border-radius: 10px;
    transition: all 0.2s ease;
}

/* 선택되지 않은 모델에 마우스 올렸을 때 */
.model-option:not(.selected):hover .model-card {
    border-color: var(--accent-primary);
    background: rgba(16, 185, 129, 0.05);
}

/* 선택된 모델만 강조 표시 (selected 클래스 기반으로만 판단) */
.model-option.selected .model-card {
    border-color: var(--accent-primary);
    background: rgba(16, 185, 129, 0.15);
}

.model-name {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text-primary);
}

.model-tier {
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--accent-primary);
    background: rgba(99, 102, 241, 0.1);
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
}

.model-card small {
    font-size: 0.75rem;
    color: var(--text-secondary);
    text-align: center;
}

/* Compact file upload area */
.file-upload-area.compact {
    padding: 1rem;
    min-height: 80px;
}

.file-upload-area.compact .upload-placeholder {
    padding: 0.5rem;
}

.file-upload-area.compact .upload-placeholder i {
    font-size: 1.5rem;
}

.file-upload-area.compact .upload-placeholder p {
    font-size: 0.85rem;
    margin: 0.25rem 0 0 0;
}

.file-upload-area.compact .upload-preview {
    max-height: 100px;
}

.file-upload-area.compact .upload-preview img {
    max-height: 80px;
    width: auto;
}

.image-section {
    margin-top: 1.5rem;
}

.content-status {
    display: flex;
    gap: 2rem;
    padding: 1rem;
    background: var(--bg-input);
    border-radius: 8px;
}

.status-item {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.status-label {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.status-value {
    font-weight: 600;
    color: var(--accent-primary);
}

/* Google Blog ?뚮쭏 - ?곹깭 媛??뚮???*/
.google-theme .status-value,
#google-images-tab .status-value {
    color: var(--google-blue);
}

/* Upload Area */
.file-upload-area {
    border: 2px dashed var(--border-color);
    border-radius: 12px;
    padding: 2rem;
    text-align: center;
    transition: all 0.2s;
    cursor: pointer;
}

.file-upload-area:hover,
.file-upload-area.dragover {
    border-color: var(--accent-primary);
    background: rgba(99, 102, 241, 0.05);
}

.upload-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.upload-placeholder i {
    font-size: 3rem;
    color: var(--text-secondary);
}

.upload-placeholder p {
    color: var(--text-primary);
    margin: 0;
}

.upload-placeholder small {
    color: var(--text-secondary);
}

.upload-preview {
    position: relative;
    display: inline-block;
}

.upload-preview img {
    max-width: 100%;
    max-height: 200px;
    border-radius: 8px;
}

.upload-preview .remove-btn {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--error-color);
    color: white;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Generated Images Select */
.generated-images-select {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 0.75rem;
    padding: 1rem;
    background: var(--bg-input);
    border-radius: 8px;
    min-height: 80px;
}

.generated-images-select .placeholder {
    grid-column: 1 / -1;
    text-align: center;
    color: var(--text-secondary);
    padding: 1rem;
}

.image-select-item {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    border: 2px solid transparent;
    transition: all 0.2s;
}

.image-select-item:hover {
    border-color: var(--accent-primary);
}

.image-select-item.selected {
    border-color: var(--accent-primary);
}

.image-select-item img {
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: cover;
}

.image-select-item .select-overlay {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--accent-primary);
    color: white;
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
}

.image-select-item.selected .select-overlay {
    display: flex;
}

/* Image Gallery Improvements */
.image-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 1.5rem;
}

.image-card {
    background: var(--bg-input);
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--border-color);
    transition: all 0.2s;
}

.image-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.image-card img {
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: cover;
}

.image-card-body {
    padding: 1rem;
}

.image-card-title {
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.image-card-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.image-card-actions button {
    flex: 1;
    padding: 0.5rem;
    font-size: 0.8rem;
}

/* Password Input with Toggle */
.password-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.password-input-wrapper .form-input {
    padding-right: 2.5rem;
}

.password-toggle-btn {
    position: absolute;
    right: 0.75rem;
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s;
}

.password-toggle-btn:hover {
    color: var(--text-primary);
}

/* Footer Image Upload Compact */
.footer-image-upload {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.file-name-label {
    font-size: 0.8rem;
    color: var(--text-secondary);
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Compact Button */
.ghost-btn.compact {
    padding: 0.5rem 0.75rem;
    font-size: 0.8rem;
}

/* Badge Style */
.widget-header .badge {
    background: rgba(99, 102, 241, 0.15);
    color: var(--accent-primary);
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 500;
}

/* Form Help Text */
.form-help {
    font-size: 0.75rem;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.form-help i {
    font-size: 0.7rem;
}

/* Navigation Badge */
.nav-badge {
    background: linear-gradient(135deg, #10b981, #059669);
    color: white;
    font-size: 0.6rem;
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
    font-weight: 600;
    margin-left: auto;
    text-transform: uppercase;
}

/* Gallery Styles */
.gallery-container {
    padding: 0;
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
}

.gallery-item {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    cursor: pointer;
    transition: all 0.2s ease;
}

.gallery-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
    border-color: var(--accent-primary);
}

.gallery-item img {
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: cover;
    display: block;
}

.gallery-item-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 0.75rem;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.gallery-item-badges {
    display: flex;
    gap: 0.25rem;
    flex-wrap: wrap;
}

.gallery-item-date {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.8);
}

/* 소스 배지 (네이버/구글) */
.source-badge {
    font-size: 0.65rem;
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
    font-weight: 600;
    text-transform: uppercase;
}

.source-badge.naver {
    background: #03c75a;
    color: white;
}

.source-badge.google {
    background: #4285f4;
    color: white;
}

/* 키워드 배지 */
.keyword-badge {
    font-size: 0.65rem;
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.9);
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gallery-item-checkbox {
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    width: 20px;
    height: 20px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
}

.gallery-item-checkbox input {
    width: 16px;
    height: 16px;
    accent-color: var(--accent-primary);
}

.gallery-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    margin-top: 1.5rem;
    padding: 1rem 0;
}

.stat-item {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.stat-card {
    background: var(--bg-input);
    border-radius: 12px;
    padding: 1.25rem 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border: 1px solid var(--border-color);
}

.stat-label {
    font-size: 0.8rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.stat-value {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--accent-primary);
}

/* Modal Styles */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(2px);
}

/* 로그인 모달 배경은 더 투명하게 */
#login-modal .modal-backdrop,
#login-modal-backdrop {
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(3px);
}

.modal-content {
    position: relative;
    background: var(--bg-card);
    border-radius: 16px;
    max-width: 90vw;
    max-height: 90vh;
    overflow: hidden;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
}

.modal-close-btn {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: white;
    cursor: pointer;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.modal-close-btn:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* Image Detail Modal - ?대?吏€ 理쒕????ш쾶 ?쒖떆 */
.image-detail-modal-content {
    width: 98vw !important;
    height: 96vh !important;
    max-width: none !important;
    max-height: 98vh !important;
    margin: 1vh auto !important;
}

.image-detail-layout {
    display: grid;
    grid-template-columns: 1fr 380px;
    height: 100%;
    min-height: 0;
}

.image-detail-preview {
    background: #0a0a0a;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    overflow: hidden;
    min-height: 500px;
    height: 100%;
}

.image-detail-preview img {
    max-width: 100%;
    max-height: calc(90vh - 3rem);
    min-width: 400px;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

.image-detail-info {
    padding: 1.5rem;
    background: var(--bg-sidebar);
    overflow-y: auto;
    height: 100%;
    display: flex;
    flex-direction: column;
    border-left: 1px solid var(--border-primary);
}

.image-detail-info h3 {
    font-size: 1.25rem;
    margin-bottom: 1.5rem;
    color: var(--text-primary);
}

.detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.detail-item {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.detail-label {
    font-size: 0.75rem;
    color: var(--text-secondary);
    text-transform: uppercase;
}

.detail-value {
    font-size: 0.9rem;
    color: var(--text-primary);
    font-weight: 500;
}

.detail-section {
    margin-bottom: 1.5rem;
}

.detail-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.detail-prompt {
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.5;
    background: var(--bg-input);
    padding: 0.75rem;
    border-radius: 8px;
    max-height: 100px;
    overflow-y: auto;
}

.detail-actions {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.detail-actions button {
    width: 100%;
    justify-content: center;
}

/* Ghost Button Tiny */
.ghost-btn.tiny {
    padding: 0.25rem 0.5rem;
    font-size: 0.7rem;
}

/* Edit Panel */
.edit-panel {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border-color);
}

.edit-panel h4 {
    font-size: 1rem;
    margin-bottom: 1rem;
    color: var(--text-primary);
}

.file-upload-area.compact {
    padding: 1rem;
    min-height: auto;
}

.file-upload-area.compact .upload-placeholder {
    flex-direction: row;
    gap: 0.5rem;
}

@media (max-width: 1024px) {
    .image-detail-modal-content {
        width: 98vw;
        height: 95vh;
        max-height: 98vh;
        margin: 1vh auto;
    }

    .image-detail-layout {
        grid-template-columns: 1fr;
        grid-template-rows: 1fr auto;
    }

    .image-detail-preview {
        max-height: 55vh;
        min-height: 300px;
    }

    .image-detail-preview img {
        max-height: 50vh;
        min-width: 200px;
    }

    .image-detail-info {
        max-height: 40vh;
        border-left: none;
        border-top: 1px solid var(--border-primary);
    }
}

/* Generated Image Card Styles */
.generated-image-card {
    position: relative;
}

.image-card-checkbox {
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    z-index: 10;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 4px;
    padding: 2px;
}

.image-card-checkbox input {
    width: 18px;
    height: 18px;
    accent-color: var(--accent-primary);
    cursor: pointer;
}

/* ?몄쭛???대?吏€ 諛곗? */
.image-badge {
    display: inline-block;
    font-size: 0.65rem;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 600;
    margin-left: 4px;
    vertical-align: middle;
}

.edited-badge {
    background: linear-gradient(45deg, #8B5CF6, #A78BFA);
    color: white;
}

/* ?몄쭛???대?吏€ 移대뱶 媛뺤“ */
.edited-image {
    border: 2px solid #8B5CF6;
}

.edited-image::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #8B5CF6, #A78BFA, #C4B5FD);
    z-index: 5;
}

/* ?대?吏€ 鍮꾩쑉 ?좏깮湲?*/
.aspect-ratio-selector {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.aspect-ratio-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    padding: 0.5rem;
    border: 2px solid var(--border-color);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 60px;
}

.aspect-ratio-option:hover {
    border-color: var(--accent-primary);
    background: rgba(16, 185, 129, 0.1);
}

.aspect-ratio-option.selected {
    border-color: var(--accent-primary);
    background: rgba(16, 185, 129, 0.2);
}

/* Google Blog ?뚮쭏 - 鍮꾩쑉 ?좏깮 ?뚮???*/
#google-images-tab .aspect-ratio-option:hover {
    border-color: var(--google-blue);
    background: rgba(66, 133, 244, 0.1);
}

#google-images-tab .aspect-ratio-option.selected {
    border-color: var(--google-blue);
    background: rgba(66, 133, 244, 0.2);
}

#google-images-tab .aspect-ratio-option.selected span {
    color: var(--google-blue);
}

#google-images-tab .ratio-preview {
    background: linear-gradient(45deg, var(--google-blue), var(--google-blue-hover));
    border: 1px solid var(--google-blue);
}

.aspect-ratio-option span {
    font-size: 0.7rem;
    color: var(--text-secondary);
}

.aspect-ratio-option.selected span {
    color: var(--accent-primary);
    font-weight: 600;
}

.ratio-preview {
    background: linear-gradient(45deg, var(--accent-primary), var(--accent-secondary));
    border-radius: 3px;
}

.ratio-16-9 {
    width: 48px;
    height: 27px;
}

.ratio-1-1 {
    width: 32px;
    height: 32px;
}

.ratio-4-3 {
    width: 40px;
    height: 30px;
}

.ratio-3-4 {
    width: 30px;
    height: 40px;
}

.ratio-9-16 {
    width: 27px;
    height: 48px;
}

/* ?대?吏€ ?몄쭛 鍮꾧탳 UI */
.edit-comparison {
    margin-bottom: 1rem;
    padding: 1rem;
    background: var(--bg-tertiary);
    border-radius: 8px;
}

.comparison-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.comparison-title {
    font-weight: 600;
    color: var(--text-primary);
}

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

.comparison-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.comparison-item:hover {
    transform: scale(1.02);
}

.comparison-label {
    font-size: 0.75rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    font-weight: 600;
}

.comparison-item img {
    width: 100%;
    max-height: 120px;
    object-fit: cover;
    border-radius: 6px;
    border: 2px solid var(--border-color);
    transition: border-color 0.2s ease;
}

.comparison-item:hover img {
    border-color: var(--accent-primary);
}

.comparison-item.active img {
    border-color: #10B981;
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.3);
}

.comparison-item.active .comparison-label {
    color: #10B981;
    font-weight: 700;
}

.comparison-item:last-child img {
    border-color: #10B981;
}

.comparison-arrow {
    color: var(--text-secondary);
    font-size: 1.2rem;
    flex-shrink: 0;
}

.comparison-actions {
    display: flex;
    gap: 0.75rem;
}

.comparison-actions button {
    flex: 1;
    padding: 0.6rem 1rem;
    font-size: 0.85rem;
}

/* 전체 화면 이미지 비교 모달 */
#image-compare-modal .modal-content {
    border-radius: 12px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

#image-compare-modal .modal-body {
    background: var(--bg-primary);
}

#compare-side-by-side img {
    transition: transform 0.3s ease;
    max-height: 60vh;
    object-fit: contain;
}

#compare-side-by-side img:hover {
    transform: scale(1.02);
}

/* 슬라이더 비교 모드 */
#compare-slider-container {
    position: relative;
    user-select: none;
    -webkit-user-select: none;
    touch-action: none;
}

#compare-slider-container img {
    max-height: 70vh;
    object-fit: contain;
}

#slider-edited-overlay {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    overflow: hidden;
    border-right: 3px solid white;
    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.3);
}

#slider-edited-overlay img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: auto;
    max-width: none;
}

#slider-handle {
    cursor: ew-resize;
    z-index: 10;
}

#slider-handle:hover > div {
    transform: translate(-50%, -50%) scale(1.1);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
}

.image-card-preview {
    position: relative;
    cursor: pointer;
    overflow: hidden;
}

.image-card-preview img {
    transition: transform 0.3s ease;
}

.image-card-preview:hover img {
    transform: scale(1.05);
}

.image-card-zoom {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
    background: rgba(0, 0, 0, 0.7);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.image-card-preview:hover .image-card-zoom {
    opacity: 1;
}

/* Loading State for Gallery */
.loading-state {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 3rem;
    color: var(--text-secondary);
    grid-column: 1 / -1;
}

/* Ghost Button Small */
.ghost-btn.small {
    padding: 0.4rem 0.6rem;
    font-size: 0.8rem;
}

/* Sidebar Auth Styles */
.sidebar-auth {
    padding: 0.75rem 0;
    margin-top: 0.5rem;
}

.sidebar-login-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-weight: 500;
    cursor: pointer;
    transition: none;
}

.sidebar-login-btn:hover {
    background: var(--bg-input);
    border-color: var(--border-color);
}

.sidebar-login-btn i {
    color: var(--text-primary);
}

.sidebar-user-info {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 1;
}

.user-avatar-small {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.9rem;
}

.user-details {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    overflow: hidden;
}

.user-email-text {
    font-size: 0.75rem;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 110px;
}

.user-status {
    font-size: 0.7rem;
    color: var(--success);
}

#sidebar-user-area {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.sidebar-logout-btn {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    background: rgba(239, 68, 68, 0.1);
    color: var(--danger);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.sidebar-logout-btn:hover {
    background: rgba(239, 68, 68, 0.2);
}

/* Login Modal Styles */
.login-modal-content {
    width: 400px;
    max-width: 95vw;
    padding: 0;
}

.login-modal-body {
    padding: 2rem;
}

.login-header {
    text-align: center;
    margin-bottom: 1.5rem;
}

.login-icon {
    font-size: 2.5rem;
    color: var(--accent-primary);
    margin-bottom: 0.75rem;
}

.login-header h2 {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}

.login-header p {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.auth-tabs {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    background: var(--bg-input);
    padding: 0.25rem;
    border-radius: 8px;
}

.auth-tab {
    flex: 1;
    padding: 0.625rem 1rem;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    border-radius: 6px;
    cursor: pointer;
    font-weight: 500;
    transition: all 0.2s;
}

.auth-tab.active {
    background: var(--accent-primary);
    color: white;
}

.auth-form .form-group {
    margin-bottom: 1rem;
}

.auth-form .form-group:last-of-type {
    margin-bottom: 1.5rem;
}

.forgot-password-link {
    text-align: right;
    margin-bottom: 1rem;
}

.forgot-password-link a {
    font-size: 0.8rem;
    color: var(--accent-primary);
    text-decoration: none;
}

.forgot-password-link a:hover {
    text-decoration: underline;
}

.back-to-login {
    text-align: center;
    margin-top: 1rem;
}

.back-to-login a {
    font-size: 0.85rem;
    color: var(--text-secondary);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.back-to-login a:hover {
    color: var(--text-primary);
}

.auth-form small {
    display: block;
    margin-top: 0.5rem;
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.auth-note {
    text-align: center;
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-top: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.full-width {
    width: 100%;
}

/* History Styles */
.history-stats-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.history-stats-grid .stat-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: var(--bg-card);
    border-radius: 12px;
    border: 1px solid var(--border-color);
}

.history-stats-grid .stat-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
}

.history-stats-grid .stat-icon.blue {
    background: rgba(59, 130, 246, 0.15);
    color: #3b82f6;
}

.history-stats-grid .stat-icon.green {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
}

.history-stats-grid .stat-icon.purple {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
}

.history-stats-grid .stat-icon.orange {
    background: rgba(249, 115, 22, 0.15);
    color: #f97316;
}

.history-stats-grid .stat-icon.red {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

.history-stats-grid .stat-info {
    display: flex;
    flex-direction: column;
}

.history-stats-grid .stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
}

.history-stats-grid .stat-label {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.history-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.history-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    background: var(--bg-input);
    border-radius: 10px;
    border: 1px solid var(--border-color);
    cursor: pointer;
    transition: all 0.2s;
}

.history-item:hover {
    border-color: var(--accent-primary);
    background: rgba(99, 102, 241, 0.05);
}

.history-item-main {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex: 1;
}

.history-item-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: rgba(99, 102, 241, 0.1);
    color: var(--accent-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
}

.history-item-info {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.history-item-title {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 0.95rem;
}

.history-item-keyword {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.history-item-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.history-item-meta .post-link {
    color: var(--accent-primary);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.history-item-meta .post-link:hover {
    text-decoration: underline;
}

.history-item-status {
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 500;
}

.history-item-status.completed {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
}

.history-item-status.in-progress {
    background: rgba(59, 130, 246, 0.15);
    color: #3b82f6;
}

.history-item-status.failed {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

/* ?ъ뒪???곹깭 諛곗? */
.posting-badge {
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 500;
}

.posting-badge.posted {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
}

.posting-badge.not_posted {
    background: rgba(107, 114, 128, 0.15);
    color: #6b7280;
}

.posting-badge.failed {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

.history-item-actions {
    display: flex;
    gap: 0.5rem;
}

.history-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
}

/* 생성 기록 이미지 갤러리 */
.history-images-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

.history-image-item {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    background: var(--bg-input);
    aspect-ratio: 1;
}

.history-image-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.2s ease;
}

.history-image-item:hover img {
    transform: scale(1.05);
}

.history-image-prompt {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    padding: 0.4rem 0.5rem;
    background: linear-gradient(rgba(0,0,0,0.7), transparent);
    color: white;
    font-size: 0.75rem;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin: 0;
}

.history-image-actions {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.5rem;
    background: linear-gradient(transparent, rgba(0,0,0,0.7));
    opacity: 0;
    transition: opacity 0.2s ease;
}

.history-image-item:hover .history-image-actions {
    opacity: 1;
}

.history-image-actions button {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: rgba(255,255,255,0.9);
    color: #333;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.history-image-actions button:hover {
    background: var(--accent-primary);
    color: white;
}

.download-all-history-images-btn {
    margin-top: 1rem;
    padding: 0.75rem 1.5rem;
    background: var(--accent-primary);
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: background 0.2s ease;
}

.download-all-history-images-btn:hover {
    background: var(--accent-hover);
}

@media (max-width: 1200px) {
    .history-stats-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .history-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ==================== Admin Styles ==================== */
.admin-container {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.admin-dashboard-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

.stat-card.large {
    padding: 1.25rem 1.5rem;
}

.stat-card.large .stat-icon {
    width: 56px;
    height: 56px;
    font-size: 1.5rem;
}

.stat-card.large .stat-value {
    font-size: 2rem;
}

.stat-sub {
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-top: 0.25rem;
}

.widget-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.admin-users-table-wrapper {
    overflow-x: auto;
}

.admin-users-table {
    width: 100%;
    border-collapse: collapse;
}

.admin-users-table th,
.admin-users-table td {
    padding: 0.875rem 1rem;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
}

.admin-users-table th {
    font-weight: 600;
    color: var(--text-secondary);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: var(--bg-input);
}

.admin-users-table tbody tr:hover {
    background: rgba(99, 102, 241, 0.05);
}

.admin-users-table .user-cell {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.admin-users-table .user-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.9rem;
}

.admin-users-table .user-info {
    display: flex;
    flex-direction: column;
}

.admin-users-table .user-email {
    font-weight: 500;
    color: var(--text-primary);
}

.admin-users-table .user-name {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.role-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 500;
}

.role-badge.user {
    background: rgba(107, 114, 128, 0.15);
    color: #6b7280;
}

.role-badge.admin {
    background: rgba(59, 130, 246, 0.15);
    color: #3b82f6;
}

.role-badge.super_admin {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
}

/* 티어 배지 스타일 */
.tier-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    transition: all 0.2s ease;
}

.tier-badge:hover {
    transform: scale(1.05);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.tier-badge.bronze {
    background: linear-gradient(135deg, #CD7F32 0%, #8B4513 100%);
    color: #fff;
}

.tier-badge.silver {
    background: linear-gradient(135deg, #C0C0C0 0%, #808080 100%);
    color: #fff;
}

.tier-badge.gold {
    background: linear-gradient(135deg, #FFD700 0%, #B8860B 100%);
    color: #1a1a1a;
}

.tier-badge.platinum {
    background: linear-gradient(135deg, #E5E4E2 0%, #A0D0E6 100%);
    color: #1a1a1a;
}

/* 티어 잠금 스타일 */
.tier-locked {
    position: relative;
    opacity: 0.6;
    cursor: not-allowed !important;
}

.tier-locked::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.05);
    pointer-events: none;
    border-radius: inherit;
}

.tier-lock-icon {
    font-size: 0.75rem;
    color: #f59e0b !important;
}

/* 사이드바 티어 표시 */
.sidebar-tier {
    display: flex;
    justify-content: center;
    margin-top: 0.5rem;
}

.sidebar-tier .tier-badge {
    font-size: 0.7rem;
    padding: 0.2rem 0.5rem;
}

.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 500;
}

.status-badge.active {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
}

.status-badge.inactive {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

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

.usage-bar {
    width: 80px;
    height: 6px;
    background: var(--bg-input);
    border-radius: 3px;
    overflow: hidden;
}

.usage-bar .bar {
    height: 100%;
    background: var(--accent-primary);
    border-radius: 3px;
    transition: width 0.3s;
}

.usage-text {
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-top: 0.25rem;
}

.action-btns {
    display: flex;
    gap: 0.5rem;
}

.action-btn {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.action-btn.edit {
    background: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
}

.action-btn.edit:hover {
    background: rgba(59, 130, 246, 0.2);
}

.action-btn.delete {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

.action-btn.delete:hover {
    background: rgba(239, 68, 68, 0.2);
}

.admin-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
}

.admin-logs {
    max-height: 300px;
    overflow-y: auto;
}

.danger-btn {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.3);
    padding: 0.5rem 1rem;
    border-radius: 6px;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.2s;
}

.danger-btn:hover {
    background: rgba(239, 68, 68, 0.2);
}

.danger-btn.small {
    padding: 0.4rem 0.75rem;
    font-size: 0.85rem;
}

.empty-cell {
    text-align: center;
    padding: 2rem !important;
    color: var(--text-secondary);
}

/* Admin Navigation Highlight */
.nav-item.admin-only {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1), rgba(5, 150, 105, 0.1));
    border-left: 3px solid var(--accent-primary);
}

.nav-item.admin-only.active {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.2), rgba(5, 150, 105, 0.2));
}

@media (max-width: 1200px) {
    .admin-dashboard-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .admin-dashboard-grid {
        grid-template-columns: 1fr;
    }

    .widget-actions {
        flex-wrap: wrap;
    }
}

/* ========================================
   Settings Modal (API Keys)
   ======================================== */
.settings-modal-content {
    width: 900px;
    max-width: 95vw;
    max-height: 95vh;
    padding: 0;
    overflow: hidden;
}

.settings-modal-body {
    padding: 2rem;
    overflow-y: auto;
    max-height: calc(95vh - 3rem);
}

.settings-header {
    text-align: center;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-color);
}

.settings-icon {
    font-size: 2.5rem;
    color: var(--accent-primary);
    margin-bottom: 0.5rem;
}

.settings-header h2 {
    margin: 0.5rem 0;
    font-size: 1.5rem;
}

.settings-header p {
    color: var(--text-secondary);
    font-size: 0.875rem;
    margin: 0;
}

.security-notice {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-top: 1rem;
    padding: 0.875rem 1rem;
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.3);
    border-radius: 8px;
    text-align: left;
}

.security-notice i {
    color: var(--accent-primary);
    font-size: 1.25rem;
    margin-top: 0.1rem;
}

.security-notice strong {
    display: block;
    color: var(--accent-primary);
    font-size: 0.85rem;
    margin-bottom: 0.25rem;
}

.security-notice span {
    font-size: 0.8rem;
    color: var(--text-secondary);
    line-height: 1.4;
}

/* API ?꾩?留??꾩씠肄?*/
.api-help-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--border-color);
    color: var(--text-secondary);
    font-size: 0.7rem;
    font-weight: 700;
    cursor: help;
    position: relative;
    margin-left: 0.25rem;
    transition: all 0.2s;
}

.api-help-icon:hover {
    background: var(--accent-primary);
    color: white;
}

.api-help-icon:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 8px;
    padding: 0.75rem 1rem;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--text-primary);
    white-space: pre-line;
    line-height: 1.6;
    min-width: 220px;
    max-width: 280px;
    z-index: 1000;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.api-help-icon:hover::before {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-bottom-color: var(--border-color);
    z-index: 1001;
}

.settings-content {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.settings-section {
    background: var(--bg-tertiary);
    border-radius: 10px;
    padding: 1rem;
    border: 1px solid var(--border-color);
}

.settings-section-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
    flex-wrap: wrap;
}

.settings-section-header span:nth-child(2) {
    font-weight: 600;
    font-size: 0.95rem;
}

.settings-section-desc {
    font-size: 0.75rem !important;
    color: var(--text-secondary) !important;
    font-weight: 400 !important;
    margin-left: auto;
}

.settings-section-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    font-weight: 700;
    font-size: 0.8rem;
    color: white;
}

.settings-section-icon.openai {
    background: linear-gradient(135deg, #10a37f, #0d8c6d);
}

.settings-section-icon.gemini {
    background: linear-gradient(135deg, #4285f4, #34a853);
}

.settings-section-icon.claude {
    background: linear-gradient(135deg, #d97706, #b45309);
}

.settings-section-icon.perplexity {
    background: linear-gradient(135deg, #6366f1, #4f46e5);
}

.settings-section-icon.replicate {
    background: linear-gradient(135deg, #171717, #404040);
}

.settings-section-icon.fal {
    background: linear-gradient(135deg, #ec4899, #db2777);
}

.settings-section-icon.naver {
    background: linear-gradient(135deg, #10b981, #059669);
}

.settings-keys-grid {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.settings-keys-grid.horizontal {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 0.75rem;
}

.settings-key-item {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.settings-key-item.full {
    grid-column: 1 / -1;
}

.settings-key-item label {
    font-size: 0.75rem;
    color: var(--text-secondary);
    font-weight: 500;
}

.settings-key-item input {
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--bg-card);
    color: var(--text-primary);
    font-size: 0.85rem;
    font-family: 'Monaco', 'Consolas', monospace;
}

.settings-key-item input:focus {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.2);
}

.settings-key-item input::placeholder {
    color: var(--text-secondary);
    opacity: 0.5;
}

.settings-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
}

.settings-actions-right {
    display: flex;
    gap: 0.75rem;
}

#settings-delete-btn {
    color: var(--error);
    border-color: var(--error);
}

#settings-delete-btn:hover {
    background: rgba(239, 68, 68, 0.1);
}

@media (max-width: 600px) {
    .settings-modal-content {
        width: 100%;
        max-height: 100vh;
        border-radius: 0;
    }

    .settings-keys-grid {
        grid-template-columns: 1fr;
    }

    .settings-section-desc {
        display: none;
    }

    .settings-actions {
        flex-direction: column;
        gap: 1rem;
    }

    .settings-actions-right {
        width: 100%;
    }

    .settings-actions-right button {
        flex: 1;
    }
}

/* ============================================
   Google Blog Theme Styles
   援ш? 4?됱긽 ?뚮쭏 (?뚮옉, 鍮④컯, ?몃옉, 珥덈줉)
   ============================================ */

/* Google 釉뚮옖??而щ윭 蹂€??*/
:root {
    --google-blue: #4285f4;
    --google-red: #ea4335;
    --google-yellow: #fbbc05;
    --google-green: #34a853;
    --google-blue-hover: #357abd;
    --google-gradient: linear-gradient(135deg, #4285f4 0%, #357abd 100%);
}

/* Google Badge ?ㅽ???*/
.google-badge,
.nav-icon-badge.google-badge {
    background: linear-gradient(135deg, #4285f4, #357abd);
    box-shadow: 0 2px 8px rgba(66, 133, 244, 0.3);
}

/* Google 踰꾪듉 ?ㅽ???*/
.google-btn {
    background: var(--google-gradient);
    color: white;
    border: none;
    padding: 0.875rem 1.5rem;
    border-radius: 10px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    box-shadow: 0 4px 15px rgba(66, 133, 244, 0.3);
    position: relative;
    overflow: hidden;
}

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

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

.google-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(66, 133, 244, 0.4);
    background: linear-gradient(135deg, #5a9cf5 0%, #4285f4 100%);
}

.google-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.google-btn.secondary {
    background: transparent;
    border: 2px solid var(--google-blue);
    color: var(--google-blue);
    box-shadow: none;
}

.google-btn.secondary:hover {
    background: rgba(66, 133, 244, 0.1);
    transform: translateY(-2px);
}

.google-btn.small {
    padding: 0.5rem 1rem;
    font-size: 0.85rem;
}

.google-btn.large {
    padding: 1rem 2rem;
    font-size: 1rem;
    width: 100%;
    margin-top: 1rem;
}

/* Google ?뚮쭏 ?뱀뀡 - border-left ?쒓굅??*/

/* Google 紐⑤뜽 tier 諭껋? */
.model-tier.google-tier {
    color: var(--google-blue);
}

/* Google ?대?吏€ ??紐⑤뱶 ?좏깮 */
#google-images-tab .mode-tab.active {
    background: linear-gradient(135deg, var(--google-blue), var(--google-blue-hover));
    border-color: var(--google-blue);
}

#google-images-tab .mode-tab:hover:not(.active) {
    border-color: var(--google-blue);
    color: var(--google-blue);
}

/* Google ?대?吏€ ??鍮꾩쑉 ?좏깮 */
#google-images-tab .aspect-ratio-option.selected {
    border-color: var(--google-blue);
    background: rgba(66, 133, 244, 0.1);
}

#google-images-tab .aspect-ratio-option:hover {
    border-color: var(--google-blue);
}

.google-theme .generator-header,
.google-theme .posting-header {
    border-bottom: 1px solid rgba(66, 133, 244, 0.2);
    padding-bottom: 1rem;
    margin-bottom: 1.5rem;
}

.google-theme .generator-header h3,
.google-theme .posting-header h3 {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--text-primary);
}

.google-theme .generator-header h3 i,
.google-theme .posting-header h3 i {
    color: var(--google-blue);
}

/* Google ?듦퀎 洹몃━??*/
.google-stats {
    background: rgba(66, 133, 244, 0.05);
    border: 1px solid rgba(66, 133, 244, 0.2);
    border-radius: 12px;
    padding: 1.25rem;
    margin: 1rem 0;
}

.google-stats .stat-item {
    text-align: center;
    padding: 0.75rem;
}

.google-stats .stat-label {
    color: var(--text-secondary);
    font-size: 0.8rem;
    display: block;
    margin-bottom: 0.25rem;
}

.google-stats .stat-value {
    color: var(--google-blue);
    font-size: 1.25rem;
    font-weight: 700;
}

/* Google ?ㅼ썙???뚯씠釉?*/
.google-table {
    width: 100%;
    border-collapse: collapse;
}

.google-table th {
    background: rgba(66, 133, 244, 0.1);
    color: var(--google-blue);
    padding: 0.75rem;
    text-align: left;
    font-weight: 600;
    border-bottom: 2px solid rgba(66, 133, 244, 0.3);
}

.google-table td {
    padding: 0.75rem;
    border-bottom: 1px solid var(--border-color);
}

.google-table tr:hover {
    background: rgba(66, 133, 244, 0.05);
}

/* Google ?ㅻ퉬寃뚯씠???꾩씠??*/
.google-item {
    position: relative;
}

.google-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 0;
    background: var(--google-blue);
    transition: height 0.2s ease;
    border-radius: 0 3px 3px 0;
}

.google-item:hover::before,
.google-item.active::before {
    height: 60%;
}

.google-item.active {
    background: rgba(66, 133, 244, 0.1);
    color: var(--google-blue);
}

/* Google 肄섑뀗痢??앹꽦 ??*/
.google-theme .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1rem;
}

.google-theme .form-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.google-theme .form-group label {
    color: var(--text-secondary);
    font-size: 0.85rem;
    font-weight: 500;
}

.google-theme .form-group input,
.google-theme .form-group select,
.google-theme .form-group textarea {
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    padding: 0.75rem;
    border-radius: 8px;
    font-size: 0.95rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.google-theme .form-group input:focus,
.google-theme .form-group select:focus,
.google-theme .form-group textarea:focus {
    outline: none;
    border-color: var(--google-blue);
    box-shadow: 0 0 0 3px rgba(66, 133, 244, 0.1);
}

.google-theme .checkbox-group {
    flex-direction: row;
    align-items: center;
}

.google-theme .checkbox-group label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
}

.google-theme .title-input-group {
    display: flex;
    gap: 0.5rem;
}

.google-theme .title-input-group input {
    flex: 1;
}

/* Google 肄섑뀗痢?寃곌낵 */
.google-theme .content-result,
.google-theme .image-result {
    background: var(--bg-card);
    border: 1px solid rgba(66, 133, 244, 0.3);
    border-radius: 12px;
    padding: 1.5rem;
    margin-top: 1.5rem;
}

.google-theme .content-result .result-header,
.google-theme .image-result .result-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border-color);
}

.google-theme .content-preview {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    padding: 1.5rem;
    max-height: 400px;
    overflow-y: auto;
}

.google-theme .content-stats {
    display: flex;
    gap: 1.5rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
    color: var(--text-secondary);
    font-size: 0.85rem;
}

.google-theme .content-stats span {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Google ?대?吏€ ?꾨━酉?*/
.google-theme .image-preview-container {
    text-align: center;
    padding: 1rem;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
}

.google-theme .image-preview-container img {
    max-width: 100%;
    max-height: 400px;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.google-theme .image-actions {
    display: flex;
    gap: 1rem;
    margin-top: 1rem;
    justify-content: center;
}

/* Google ?ъ뒪??而⑦뀒?대꼫 */
.posting-container.google-theme {
    background: var(--bg-card);
    border-radius: 16px;
    padding: 2rem;
}

.posting-container.google-theme .posting-status {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: rgba(66, 133, 244, 0.1);
    border-radius: 20px;
    font-size: 0.85rem;
}

.posting-container.google-theme .posting-status .status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--google-yellow);
    animation: pulse 2s infinite;
}

.posting-container.google-theme .posting-status.connected .status-dot {
    background: var(--google-green);
}

.posting-container.google-theme .posting-status.error .status-dot {
    background: var(--google-red);
}

/* Google ?ъ뒪???대젰 */
.posting-history {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border-color);
}

.posting-history h4 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
    color: var(--text-secondary);
}

.posting-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.posting-list .empty-message {
    color: var(--text-secondary);
    text-align: center;
    padding: 2rem;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
}

.posting-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    transition: background 0.2s ease;
}

.posting-item:hover {
    background: rgba(66, 133, 244, 0.1);
}

.posting-item-info {
    flex: 1;
}

.posting-item-title {
    font-weight: 500;
    margin-bottom: 0.25rem;
}

.posting-item-meta {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.posting-item-status {
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
}

.posting-item-status.published {
    background: rgba(52, 168, 83, 0.2);
    color: var(--google-green);
}

.posting-item-status.draft {
    background: rgba(251, 188, 5, 0.2);
    color: var(--google-yellow);
}

/* Google 蹂닿퀬???뱀뀡 */
.report-section#google-keyword-report-section {
    border: 1px solid rgba(66, 133, 244, 0.3);
    background: var(--bg-card);
}

.report-section#google-keyword-report-section .report-header {
    background: rgba(66, 133, 244, 0.1);
    border-bottom: 1px solid rgba(66, 133, 244, 0.2);
}

.report-section#google-keyword-report-section .report-header h3 {
    color: var(--google-blue);
}

/* 諛섏쓳??- Google ?뚮쭏 */
@media (max-width: 768px) {
    .google-theme .form-row {
        grid-template-columns: 1fr;
    }

    .google-theme .image-actions {
        flex-direction: column;
    }

    .google-theme .image-actions .google-btn {
        width: 100%;
    }
}

/* Generator Badge ?ㅽ???*/
.generator-badge {
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    background: rgba(66, 133, 244, 0.2);
    color: var(--google-blue);
}

/* 寃€?됰컮 ??Google 踰꾪듉 */
.search-bar .google-btn {
    min-width: 150px;
    padding: 0.875rem 2rem;
    white-space: nowrap;
    flex-shrink: 0;
}

/* ============================================
   愿묎퀬 ?뚯젣 臾멸뎄 - Purple Theme
   ============================================ */

/* 蹂대씪??諛곗? */
.nav-icon-badge.purple-badge {
    background: var(--purple-gradient);
    box-shadow: 0 2px 8px rgba(147, 51, 234, 0.3);
}

/* 蹂대씪???ㅻ퉬寃뚯씠???꾩씠??*/
.nav-item.purple-item.active,
.nav-sub-item.purple-item.active {
    background: linear-gradient(90deg, rgba(147, 51, 234, 0.2) 0%, rgba(147, 51, 234, 0) 100%);
    color: var(--purple-primary);
    border-left: 3px solid var(--purple-primary);
}

.nav-item.purple-item:hover,
.nav-sub-item.purple-item:hover {
    background: rgba(147, 51, 234, 0.1);
    color: var(--purple-secondary);
}

/* 留덉????쒖븞??- ?뚮????뚮쭏 */
.nav-item.marketing-item.active,
.nav-sub-item.marketing-item.active {
    background: linear-gradient(90deg, rgba(14, 165, 233, 0.2) 0%, rgba(14, 165, 233, 0) 100%);
    color: #0ea5e9;
    border-left: 3px solid #0ea5e9;
}

.nav-item.marketing-item:hover,
.nav-sub-item.marketing-item:hover {
    background: rgba(14, 165, 233, 0.1);
    color: #38bdf8;
}

/* 留덉????뚮쭏 而⑦뀒?대꼫 */
.marketing-container {
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.1) 0%, rgba(2, 132, 199, 0.05) 100%);
    border: 1px solid rgba(14, 165, 233, 0.2);
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.marketing-title {
    color: #0ea5e9;
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.marketing-btn {
    background: linear-gradient(135deg, #0ea5e9, #0284c7);
    color: white;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.2s ease;
}

.marketing-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(14, 165, 233, 0.3);
}

.marketing-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

/* 留덉????쒖븞??而⑦뀒?대꼫 - 湲곗뾽?뺣낫 1/4, 寃곌낵 3/4 鍮꾩쑉濡?議곗젙 */
.marketing-container .context-grid {
    display: grid;
    grid-template-columns: minmax(300px, 1fr) minmax(600px, 2fr);
    gap: 1.5rem;
    align-items: start;
}

/* 湲곗뾽 ?뺣낫 ?곸뿭 - 1/3 鍮꾩쑉濡??뺣? */
.marketing-container .context-grid>.widget:first-child {
    max-width: none;
}

/* 留덉???寃곌낵 ?곸뿭 ?믪씠 ?뺤옣 諛??볦씠 理쒕???*/
.marketing-container .context-grid>.widget:last-child {
    min-height: 700px;
    width: 100%;
}

.marketing-container .context-grid>.widget:last-child .widget-body {
    max-height: calc(100vh - 200px);
    overflow-y: auto;
    padding: 1.5rem;
}

/* 寃곌낵 蹂닿퀬???댁슜 ?곸뿭 ?볤쾶 */
.marketing-result-content {
    width: 100%;
}

.marketing-result-content .result-report {
    font-size: 1rem;
    line-height: 1.8;
}

/* 마케팅 Info Cards - 딥 리서치와 동일한 스타일 */
.marketing-theme .info-card {
    background: var(--bg-input);
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1rem;
    border: 1px solid var(--border-color);
}

.marketing-theme .info-card h3 {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0 0 0.75rem 0;
    font-size: 1rem;
    color: var(--text-primary);
}

.marketing-theme .info-card h3 i {
    color: var(--marketing-primary, #0EA5E9);
}

.marketing-theme .info-card p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.9rem;
    line-height: 1.5;
}

/* 諛섏쓳??- 留덉????쒖븞??*/
@media (max-width: 1400px) {
    .marketing-container .context-grid {
        grid-template-columns: minmax(280px, 1fr) minmax(500px, 2.5fr);
    }
}

@media (max-width: 1200px) {
    .marketing-container .context-grid {
        grid-template-columns: 1fr 2fr;
    }

    .marketing-container .context-grid>.widget:first-child {
        max-width: none;
    }
}

@media (max-width: 992px) {
    .marketing-container .context-grid {
        grid-template-columns: 1fr;
    }
}

/* 留덉??????ㅽ???*/
.marketing-form {
    display: grid;
    gap: 1rem;
}

.marketing-form-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.marketing-form-group label {
    color: var(--text-secondary);
    font-size: 0.875rem;
    font-weight: 500;
}

.marketing-form-group input,
.marketing-form-group textarea,
.marketing-form-group select {
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 0.75rem;
    color: var(--text-primary);
    font-size: 0.9rem;
}

.marketing-form-group input:focus,
.marketing-form-group textarea:focus,
.marketing-form-group select:focus {
    outline: none;
    border-color: #0ea5e9;
    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1);
}

.marketing-form-group .form-hint {
    font-size: 0.75rem;
    color: var(--text-secondary);
    font-weight: 400;
    margin-left: 0.5rem;
}

.marketing-form-group .form-description {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-bottom: 0.75rem;
}

/* 寃쎌웳???낅젰 移대뱶 */
#competitors-container {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 1rem;
}

.competitor-card {
    background: rgba(30, 41, 59, 0.5);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    overflow: hidden;
}

.competitor-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    background: rgba(14, 165, 233, 0.1);
    border-bottom: 1px solid var(--border-color);
}

.competitor-number {
    font-weight: 600;
    color: #0ea5e9;
    font-size: 0.9rem;
}

.competitor-delete-btn {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    transition: all 0.15s ease;
}

.competitor-delete-btn:hover {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

.competitor-card-body {
    padding: 1rem;
}

.competitor-basic-info .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.competitor-basic-info .form-col label {
    display: block;
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-bottom: 0.35rem;
}

.competitor-basic-info .form-col input {
    width: 100%;
    padding: 0.6rem 0.75rem;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 0.85rem;
}

.competitor-channels-toggle {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
}

.channels-toggle-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 0.85rem;
    padding: 0.5rem 0;
    width: 100%;
    text-align: left;
    transition: color 0.15s ease;
}

.channels-toggle-btn:hover {
    color: #0ea5e9;
}

.channels-toggle-btn i {
    transition: transform 0.2s ease;
}

.channels-toggle-btn.expanded i {
    transform: rotate(180deg);
}

.competitor-channels-section {
    padding-top: 1rem;
}

/* 자사 SNS 채널 섹션 */
.own-channels-toggle {
    margin-bottom: 0.5rem;
}

.own-channels-section {
    padding: 1rem;
    background: rgba(14, 165, 233, 0.03);
    border-radius: 8px;
    border: 1px solid rgba(14, 165, 233, 0.1);
    margin-top: 0.5rem;
}

.own-channels-section .channel-input-row {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 0.75rem;
    align-items: center;
    margin-bottom: 0.75rem;
}

.own-channels-section .channel-input-row:last-child {
    margin-bottom: 0;
}

.channels-hint {
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-bottom: 1rem;
    padding: 0.5rem 0.75rem;
    background: rgba(14, 165, 233, 0.05);
    border-radius: 6px;
    border-left: 3px solid #0ea5e9;
}

.channel-input-row {
    display: grid;
    grid-template-columns: 120px 1fr 1fr;
    gap: 0.75rem;
    align-items: center;
    margin-bottom: 0.75rem;
}

.channel-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.channel-label i {
    width: 16px;
    text-align: center;
}

.channel-input-row input {
    width: 100%;
    padding: 0.5rem 0.6rem;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 0.8rem;
}

.channel-input-row input:focus {
    outline: none;
    border-color: #0ea5e9;
}

.add-competitor-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.75rem;
    background: transparent;
    border: 2px dashed var(--border-color);
    border-radius: 8px;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 0.85rem;
    transition: all 0.15s ease;
}

.add-competitor-btn:hover {
    border-color: #0ea5e9;
    color: #0ea5e9;
    background: rgba(14, 165, 233, 0.05);
}

.add-competitor-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* 諛섏쓳?? ?묒? ?붾㈃ */
@media (max-width: 768px) {
    .competitor-basic-info .form-row {
        grid-template-columns: 1fr;
    }

    .channel-input-row {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }

    .channel-label {
        margin-bottom: 0.25rem;
    }
}

/* 留덉???吏꾪뻾 ?곹솴 */
.marketing-progress {
    background: var(--bg-card);
    border-radius: 12px;
    padding: 1.5rem;
    margin-top: 1rem;
}

.marketing-progress-bar {
    background: var(--bg-input);
    border-radius: 8px;
    height: 8px;
    overflow: hidden;
    margin: 1rem 0;
}

.marketing-progress-fill {
    background: linear-gradient(90deg, #0ea5e9, #38bdf8);
    height: 100%;
    border-radius: 8px;
    transition: width 0.3s ease;
}

.marketing-stage {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0;
    color: var(--text-secondary);
    font-size: 0.875rem;
}

.marketing-stage.active {
    color: #0ea5e9;
}

.marketing-stage.completed {
    color: var(--success);
}

/* 留덉????묒뾽 紐⑸줉 (媛쒖꽑??UI) */
.marketing-jobs-container {
    padding: 0;
}

.marketing-job-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border-color);
    transition: background 0.15s ease;
}

.marketing-job-item:last-child {
    border-bottom: none;
}

.marketing-job-item:hover {
    background: var(--bg-hover);
}

.job-item-main {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex: 1;
}

.job-item-info {
    flex: 1;
    min-width: 0;
}

.job-item-title {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.35rem;
}

.job-item-title .company-name {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 0.95rem;
}

.job-item-title .status-badge {
    flex-shrink: 0;
}

.job-item-meta {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.job-item-meta .meta-item {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.job-item-meta .meta-item i {
    font-size: 0.7rem;
    opacity: 0.7;
}

.job-item-status {
    flex-shrink: 0;
}

.status-badge {
    padding: 0.3rem 0.75rem;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 500;
}

.status-badge.pending,
.status-badge.processing {
    background: rgba(14, 165, 233, 0.1);
    color: #0ea5e9;
}

.status-badge.completed {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
}

.status-badge.failed {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

.job-item-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
    margin-left: auto;
    padding-left: 1rem;
}

.job-item-actions .action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    border: none;
    text-decoration: none;
    transition: all 0.15s ease;
    white-space: nowrap;
    min-width: 80px;
    height: 34px;
}

.job-item-actions .action-btn i {
    font-size: 0.85rem;
    flex-shrink: 0;
}

.job-item-actions .action-btn span {
    display: inline-block;
}

.job-item-actions .action-btn.download {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
    min-width: 90px;
}

.job-item-actions .action-btn.download:hover {
    background: rgba(16, 185, 129, 0.25);
}

.job-item-actions .action-btn.docs {
    background: rgba(66, 133, 244, 0.15);
    color: #4285f4;
    min-width: 70px;
}

.job-item-actions .action-btn.docs:hover {
    background: rgba(66, 133, 244, 0.25);
}

.job-item-actions .action-btn.view {
    background: rgba(14, 165, 233, 0.15);
    color: #0ea5e9;
    min-width: 60px;
}

.job-item-actions .action-btn.view:hover {
    background: rgba(14, 165, 233, 0.25);
}

.job-item-actions .action-btn.delete {
    background: transparent;
    color: var(--text-secondary);
    padding: 0.5rem;
    min-width: 34px;
    width: 34px;
}

.job-item-actions .action-btn.delete:hover {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

.job-item-actions .action-btn.processing {
    background: rgba(14, 165, 233, 0.1);
    color: #0ea5e9;
    cursor: default;
    min-width: 80px;
}

.job-item-actions .action-btn.failed {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
    cursor: default;
    min-width: 60px;
}

/* 湲곗〈 留덉???移대뱶 ?ㅽ???(?명솚???좎?) */
.marketing-job-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1.25rem;
    margin-bottom: 1rem;
    transition: all 0.2s ease;
}

.marketing-job-card:hover {
    border-color: rgba(14, 165, 233, 0.3);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.marketing-job-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}

.marketing-job-title {
    font-weight: 600;
    color: var(--text-primary);
}

.marketing-job-status {
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 500;
}

.marketing-job-status.pending {
    background: rgba(245, 158, 11, 0.1);
    color: #f59e0b;
}

.marketing-job-status.processing {
    background: rgba(14, 165, 233, 0.1);
    color: #0ea5e9;
}

.marketing-job-status.completed {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
}

.marketing-job-status.failed {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

/* 留덉???寃곌낵 ?쒖떆 */
.marketing-result {
    background: var(--bg-card);
    border-radius: 12px;
    padding: 1.5rem;
    border: 1px solid var(--border-color);
}

.marketing-result-header {
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-color);
}

.result-title-section {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}

.result-title-section h3 {
    margin: 0;
    font-size: 1.25rem;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.result-badge {
    padding: 0.35rem 0.75rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 500;
}

.result-badge.completed {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
}

.result-meta {
    display: flex;
    gap: 1.5rem;
    color: var(--text-secondary);
    font-size: 0.875rem;
}

.result-meta span {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.marketing-result-actions {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.result-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.65rem 1.25rem;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    border: none;
    transition: all 0.2s ease;
}

.result-btn.primary {
    background: linear-gradient(135deg, #0ea5e9 0%, #38bdf8 100%);
    color: white;
}

.result-btn.primary:hover {
    background: linear-gradient(135deg, #0284c7 0%, #0ea5e9 100%);
    transform: translateY(-1px);
}

.result-btn.secondary {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.result-btn.secondary:hover {
    background: rgba(16, 185, 129, 0.2);
}

.result-btn.outline {
    background: transparent;
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
}

.result-btn.outline:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.marketing-result-content {
    background: var(--bg-input);
    border-radius: 8px;
    padding: 1.5rem;
    /* 입력 영역과 동일한 높이로 설정 - 화면 높이에서 헤더/여백 제외 */
    min-height: 500px;
    max-height: calc(100vh - 250px);
    overflow-y: auto;
}

.result-report {
    color: var(--text-primary);
    line-height: 1.8;
}

.result-report h2 {
    font-size: 1.25rem;
    margin: 1.5rem 0 1rem;
    color: var(--text-primary);
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 0.5rem;
}

.result-report h3 {
    font-size: 1.1rem;
    margin: 1.25rem 0 0.75rem;
    color: var(--text-primary);
}

.result-report h4 {
    font-size: 1rem;
    margin: 1rem 0 0.5rem;
    color: var(--text-secondary);
}

.result-report ul {
    margin: 0.75rem 0;
    padding-left: 1.5rem;
}

.result-report li {
    margin: 0.4rem 0;
}

.result-report p {
    margin: 0.75rem 0;
}

.result-placeholder {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--text-secondary);
}

.result-placeholder i {
    font-size: 3rem;
    margin-bottom: 1rem;
    color: var(--text-muted);
}

.result-placeholder p {
    margin: 0.5rem 0;
}

/* 蹂대씪???뚮쭏 而⑦뀒?대꼫 */
.purple-theme {
    --theme-primary: var(--purple-primary);
    --theme-secondary: var(--purple-secondary);
    --theme-hover: var(--purple-hover);
    --theme-light: var(--purple-light);
    --theme-gradient: var(--purple-gradient);
}

/* 蹂대씪??踰꾪듉 */
.purple-btn {
    background: var(--purple-gradient);
    color: white;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
}

.purple-btn:hover {
    background: var(--purple-hover);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(147, 51, 234, 0.4);
}

.purple-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.purple-btn.small {
    padding: 0.5rem 1rem;
    font-size: 0.8rem;
}

.purple-btn.large {
    padding: 1rem 2rem;
    font-size: 1rem;
}

.purple-btn.full-width {
    width: 100%;
    justify-content: center;
}

/* 愿묎퀬 移댄뵾 ?앹꽦湲?而⑦뀒?대꼫 */
.ad-copy-container {
    padding: 1.5rem;
}

.ad-copy-container .context-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

/* 移댄뵾 洹몃━??*/
.ad-copy-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1rem;
}

/* 移댄뵾 移대뱶 */
.ad-copy-card {
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1rem;
    transition: all 0.2s ease;
    position: relative;
}

.ad-copy-card:hover {
    border-color: var(--purple-primary);
    box-shadow: 0 4px 12px rgba(147, 51, 234, 0.2);
}

.ad-copy-card .copy-content {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--text-primary);
    margin-bottom: 0.75rem;
    word-break: keep-all;
}

.ad-copy-card .copy-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.ad-copy-card .copy-meta .char-count {
    background: var(--purple-light);
    color: var(--purple-primary);
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
}

.ad-copy-card .copy-meta .model-badge {
    background: rgba(255, 255, 255, 0.1);
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
}

.ad-copy-card .copy-meta .variety-badge {
    background: rgba(147, 51, 234, 0.2);
    color: var(--purple-secondary);
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
}

.ad-copy-card .copy-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border-color);
}

.ad-copy-card .copy-actions button {
    flex: 1;
    padding: 0.5rem;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
}

.ad-copy-card .copy-actions .copy-btn {
    background: rgba(147, 51, 234, 0.1);
    color: var(--purple-primary);
}

.ad-copy-card .copy-actions .copy-btn:hover {
    background: rgba(147, 51, 234, 0.2);
}

.ad-copy-card .copy-actions .favorite-btn {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-secondary);
}

.ad-copy-card .copy-actions .favorite-btn:hover,
.ad-copy-card .copy-actions .favorite-btn.active {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

/* 吏꾪뻾 ?④퀎 */
.progress-steps {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.progress-step {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: var(--bg-input);
    border-radius: 8px;
    opacity: 0.5;
    transition: all 0.3s ease;
}

.progress-step.active {
    opacity: 1;
    background: var(--purple-light);
    border-left: 3px solid var(--purple-primary);
}

.progress-step.completed {
    opacity: 1;
    background: rgba(16, 185, 129, 0.1);
    border-left: 3px solid var(--success);
}

.progress-step .step-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-secondary);
}

.progress-step.active .step-icon {
    background: var(--purple-primary);
    color: white;
}

.progress-step.completed .step-icon {
    background: var(--success);
    color: white;
}

.progress-step .step-text {
    font-weight: 500;
}

/* 寃곌낵 移댁슫??*/
.result-count {
    background: var(--purple-light);
    color: var(--purple-primary);
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
}

/* 愿묎퀬 ?덊띁?곗뒪 紐⑸줉 */
.ad-reference-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.ad-reference-item {
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 1rem;
    transition: all 0.2s ease;
}

.ad-reference-item:hover {
    border-color: var(--purple-primary);
}

.ad-reference-item .ref-copy {
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.ad-reference-item .ref-meta {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    font-size: 0.75rem;
}

.ad-reference-item .ref-meta span {
    background: rgba(255, 255, 255, 0.05);
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    color: var(--text-secondary);
}

.ad-reference-item .ref-meta .platform-badge {
    background: var(--purple-light);
    color: var(--purple-primary);
}

/* ?듦퀎 誘몃땲 洹몃━??*/
.stats-mini-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.stat-mini {
    text-align: center;
    padding: 1rem;
    background: var(--bg-input);
    border-radius: 10px;
}

.stat-mini .stat-value {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--purple-primary);
}

.stat-mini .stat-label {
    display: block;
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-top: 0.25rem;
}

/* ?덉뒪?좊━ ?꾩씠??*/
.ad-copy-history-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.ad-copy-history-item {
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 1rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.ad-copy-history-item:hover {
    border-color: var(--purple-primary);
    background: rgba(147, 51, 234, 0.05);
}

.ad-copy-history-item .history-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.ad-copy-history-item .history-prompt {
    font-size: 0.95rem;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ad-copy-history-item .history-date {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.ad-copy-history-item .history-meta {
    display: flex;
    gap: 0.75rem;
    font-size: 0.8rem;
    color: var(--text-secondary);
}

/* ?섏씠吏€?ㅼ씠??*/
.ad-copy-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
}

/* ============================================
   愿묎퀬 ?뚯젣 臾멸뎄 - ?뺤옣 UI ?ㅽ???
   ============================================ */

/* ?낅젰 紐⑤뱶 ??*/
.input-mode-tabs {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    background: var(--bg-input);
    border-radius: 10px;
    padding: 0.25rem;
}

.input-mode-tab {
    flex: 1;
    background: transparent;
    border: 2px solid transparent;
    color: var(--text-secondary);
    padding: 0.75rem 1rem;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: all 0.2s ease;
}

.input-mode-tab:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.05);
}

.input-mode-tab.active {
    background: var(--theme-gradient);
    color: white;
    box-shadow: 0 2px 8px var(--theme-light);
}

/* 移댄뵾 ?앹꽦 ?붾㈃ - 蹂대씪???뚮쭏 ?좎? (洹좏삎 紐⑤뱶 ?ㅽ??? */
.ad-copy-container .input-mode-tab.active {
    background: var(--theme-light);
    border: 2px solid var(--theme-primary);
    color: white;
    box-shadow: 0 2px 8px var(--theme-light);
}

.ad-copy-container .input-mode-tab:hover:not(.active) {
    color: var(--theme-primary);
    background: var(--theme-light);
}

.ad-copy-container .input-mode-tab i {
    color: var(--theme-primary);
}

.ad-copy-container .input-mode-tab.active i {
    color: white;
}

/* 愿묎퀬 移댄뵾 ?낅젰 紐⑤뱶 ???꾩슜 - ?쇰컲 input-section?먮뒗 ?곹뼢 ?놁쓬 */
.ad-copy-container .input-section {
    display: none;
}

.ad-copy-container .input-section.active {
    display: block;
}

/* URL/?대?吏€ ?낅젰 ?ㅽ???*/
.input-with-button {
    display: flex;
    gap: 0.5rem;
}

.input-with-button input {
    flex: 1;
}

.input-with-button .purple-btn {
    white-space: nowrap;
}

.image-upload-area {
    border: 2px dashed var(--border-color);
    border-radius: 12px;
    padding: 2rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.image-upload-area:hover {
    border-color: var(--purple-primary);
    background: rgba(147, 51, 234, 0.05);
}

.image-upload-area i {
    font-size: 2rem;
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
    display: block;
}

.image-upload-area p {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

/* ?ъ슜 諛⑸쾿 媛€?대뱶 ?ㅽ???*/
.usage-guide {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.guide-step {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 0.75rem;
    background: var(--theme-light);
    border-radius: 10px;
    border-left: 3px solid var(--theme-primary);
}

.guide-step .step-num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: var(--theme-primary);
    color: white;
    border-radius: 50%;
    font-size: 0.85rem;
    font-weight: 600;
    flex-shrink: 0;
}

.guide-step .step-content {
    flex: 1;
}

.guide-step .step-content strong {
    display: block;
    color: var(--text-primary);
    font-size: 0.9rem;
    margin-bottom: 0.25rem;
}

.guide-step .step-content p {
    color: var(--text-secondary);
    font-size: 0.8rem;
    margin: 0;
    line-height: 1.4;
}

/* ?섏씠吏€ ?ㅻ뜑 ?ㅽ???*/
.page-header h1 {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.page-header h1 i {
    color: var(--purple-primary);
    margin-right: 0.5rem;
}

.page-header .page-desc {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin: 0;
}

.analysis-result {
    background: rgba(147, 51, 234, 0.1);
    border: 1px solid var(--purple-primary);
    border-radius: 10px;
    padding: 1rem;
    margin-top: 1rem;
}

.analysis-result h4 {
    color: var(--purple-primary);
    margin-bottom: 0.75rem;
    font-size: 0.9rem;
}

.analysis-result .result-item {
    display: flex;
    margin-bottom: 0.5rem;
    font-size: 0.85rem;
}

.analysis-result .result-label {
    color: var(--text-secondary);
    width: 80px;
    flex-shrink: 0;
}

.analysis-result .result-value {
    color: var(--text-primary);
}

/* ?뱀뀡 援щ텇??*/
.section-divider {
    border: none;
    border-top: 1px solid var(--border-color);
    margin: 1.5rem 0;
}

/* ?ㅼ젙 ?뱀뀡 */
.settings-section {
    margin-bottom: 1rem;
}

.settings-title {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* 怨좉툒 ?ㅼ젙 ?좉? */
.advanced-toggle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    background: var(--bg-input);
    border-radius: 8px;
    cursor: pointer;
    margin-top: 1rem;
    transition: all 0.2s ease;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.advanced-toggle:hover {
    background: rgba(147, 51, 234, 0.1);
    color: var(--purple-primary);
}

.advanced-toggle.active {
    background: rgba(147, 51, 234, 0.1);
    color: var(--purple-primary);
}

.advanced-toggle.active i:last-child {
    transform: rotate(180deg);
}

.advanced-settings {
    background: var(--bg-input);
    border-radius: 8px;
    padding: 1rem;
    margin-top: 0;
}

.advanced-settings.visible {
    display: block;
}

/* ?꾨왂 移대뱶 */
.strategy-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
}

.strategy-card {
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid transparent;
    border-radius: 10px;
    padding: 1rem;
    cursor: pointer;
    text-align: center;
    transition: all 0.2s ease;
}

.strategy-card:hover {
    border-color: rgba(147, 51, 234, 0.3);
}

.strategy-card.active {
    border-color: var(--purple-primary);
    background: rgba(147, 51, 234, 0.1);
}

.strategy-icon {
    font-size: 1.5rem;
    color: var(--purple-primary);
    margin-bottom: 0.5rem;
}

.strategy-info strong {
    display: block;
    font-size: 0.85rem;
    margin-bottom: 0.25rem;
}

.strategy-info span {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

/* ?뚮옯??移?*/
.platform-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.platform-chip {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}

.platform-chip input {
    display: none;
}

.platform-chip span {
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.85rem;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* JavaScript濡?.selected ?대옒??異붽? */
.platform-chip.selected span {
    background: var(--purple-gradient);
    border-color: var(--purple-primary);
    color: white !important;
    font-weight: 500;
}

.platform-chip.selected span i {
    color: white !important;
}

/* ?ㅼ뼇??泥댄겕諛뺤뒪 */
.variety-checkboxes {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.variety-checkbox {
    display: inline-flex;
    cursor: pointer;
}

.variety-checkbox input {
    display: none;
}

.variety-checkbox span {
    padding: 0.4rem 0.75rem;
    border-radius: 6px;
    font-size: 0.8rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-color);
    transition: all 0.2s ease;
}

/* JavaScript濡?.selected ?대옒??異붽? */
.variety-checkbox.selected span {
    background: var(--purple-gradient);
    border-color: var(--purple-primary);
    color: white !important;
    font-weight: 500;
}

/* ?듭뀡 ??*/
.options-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 1rem;
}

.option-checkbox {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.option-checkbox input {
    accent-color: var(--purple-primary);
}

.option-checkbox input:checked+span {
    color: var(--text-primary);
}

/* 媛€?대뱶 ?⑤꼸 */
.guide-panel {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.guide-panel.compact {
    gap: 0.5rem;
}

.guide-panel.compact .quick-tips {
    background: rgba(147, 51, 234, 0.1);
    padding: 0.75rem;
    border-radius: 8px;
}

.guide-panel.compact .quick-tips p {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin: 0;
}

.guide-panel.compact .quick-tips i {
    color: var(--purple-primary);
}

/* ?덊띁?곗뒪 誘몃━蹂닿린 ?꾩젽 */
.ad-copy-refs-preview-widget {
    flex: 1;
}

.refs-preview-section {
    margin-bottom: 0.5rem;
}

.refs-preview-title {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.refs-preview-title i {
    color: var(--purple-primary);
}

.refs-preview-title .refs-count {
    margin-left: auto;
    font-size: 0.75rem;
    background: var(--purple-light);
    color: var(--purple-primary);
    padding: 0.2rem 0.5rem;
    border-radius: 10px;
    font-weight: 600;
}

.refs-preview-list {
    max-height: 200px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.ref-preview-item {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 0.75rem;
    font-size: 0.85rem;
    line-height: 1.4;
    color: var(--text-primary);
}

.ref-preview-item .ref-category {
    font-size: 0.7rem;
    color: var(--purple-primary);
    background: var(--purple-light);
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
    margin-bottom: 0.4rem;
    display: inline-block;
}

.guide-item {
    display: flex;
    gap: 0.75rem;
}

.guide-icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--purple-gradient);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 0.75rem;
    flex-shrink: 0;
}

.guide-content strong {
    display: block;
    font-size: 0.85rem;
    margin-bottom: 0.25rem;
}

.guide-content p {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

/* ???⑤꼸 */
.tips-panel {
    background: rgba(147, 51, 234, 0.1);
    border-radius: 10px;
    padding: 1rem;
    margin-top: 1.5rem;
}

.tips-panel h4 {
    font-size: 0.85rem;
    color: var(--purple-primary);
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.tips-list {
    list-style: none;
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.tips-list li {
    padding: 0.25rem 0;
    padding-left: 1rem;
    position: relative;
}

.tips-list li::before {
    content: "•";
    color: var(--purple-primary);
    position: absolute;
    left: 0;
}

/* 吏꾪뻾 ?⑤꼸 */
.progress-panel {
    background: rgba(147, 51, 234, 0.1);
    border-radius: 10px;
    padding: 1.5rem;
}

.progress-panel .progress-steps {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.progress-panel .progress-step {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem;
    border-radius: 8px;
    transition: all 0.2s ease;
}

.progress-panel .progress-step.active {
    background: rgba(147, 51, 234, 0.2);
}

.progress-panel .progress-step.completed {
    opacity: 0.6;
}

.progress-panel .progress-step.completed .step-icon {
    color: var(--success);
}

.progress-panel .step-icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--bg-input);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    color: var(--purple-primary);
}

.progress-panel .step-text {
    font-size: 0.85rem;
    color: var(--text-primary);
}

/* 寃곌낵 ?붿빟 */
.result-summary {
    display: flex;
    gap: 2rem;
    padding: 1rem;
    background: var(--bg-input);
    border-radius: 10px;
    margin-bottom: 1.5rem;
}

.summary-item {
    text-align: center;
}

.summary-label {
    display: block;
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-bottom: 0.25rem;
}

.summary-value {
    display: block;
    font-size: 1rem;
    font-weight: 600;
    color: var(--purple-primary);
}

/* 移댄뵾 移대뱶 媛쒖꽑 */
.ad-copy-card.ranked {
    position: relative;
}

.ad-copy-card .rank-badge {
    position: absolute;
    top: -8px;
    left: -8px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--purple-gradient);
    color: white;
    font-size: 0.7rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ad-copy-card .score-badge {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    font-size: 0.7rem;
    padding: 0.2rem 0.5rem;
    border-radius: 10px;
    background: rgba(147, 51, 234, 0.2);
    color: var(--purple-primary);
}

.ad-copy-card .variety-label {
    font-size: 0.7rem;
    color: var(--text-secondary);
    margin-top: 0.5rem;
}

/* ?꾪꽣 ?€?됲듃 */
.form-select.small {
    padding: 0.4rem 0.75rem;
    font-size: 0.8rem;
    width: auto;
}

/* 諛섏쓳??- 愿묎퀬 ?뚯젣 臾멸뎄 */
@media (max-width: 1200px) {
    .strategy-cards {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 1024px) {
    .ad-copy-container .context-grid {
        grid-template-columns: 1fr;
    }

    .input-mode-tabs {
        flex-direction: column;
    }
}

@media (max-width: 768px) {
    .ad-copy-grid {
        grid-template-columns: 1fr;
    }

    .stats-mini-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .result-summary {
        flex-direction: column;
        gap: 1rem;
    }

    .platform-chips {
        flex-direction: column;
    }
}

/* ====================================== */
/* ?대? ??(Inner Tabs) ?ㅽ???            */
/* ====================================== */

.inner-tabs {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    padding: 0.5rem;
    background: var(--bg-input);
    border-radius: 12px;
}

.inner-tab {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: transparent;
    border: none;
    border-radius: 8px;
    color: var(--text-secondary);
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.inner-tab:hover {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-primary);
}

.inner-tab.active {
    background: var(--purple-primary);
    color: white;
}

.inner-tab i {
    font-size: 0.85rem;
}

.inner-tab-content {
    display: none;
}

.inner-tab-content.active {
    display: block;
}

/* ====================================== */
/* ?덊띁?곗뒪 ?뚯뒪 ?좏깮 ?듭뀡                  */
/* ====================================== */

.reference-source-options {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.radio-option {
    display: flex;
    align-items: center;
    padding: 0.5rem 0.75rem;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

/* Radio Option Generic Theme */
.radio-option:hover {
    border-color: var(--theme-primary);
}

.radio-option input[type="radio"] {
    display: none;
}

/* JavaScript濡?.selected ?대옒??異붽? */
.radio-option.selected {
    background: var(--theme-gradient);
    border-color: var(--theme-primary);
}

.radio-option.selected span {
    color: white !important;
    font-weight: 500;
}

.radio-option.selected span i {
    color: white !important;
}

.radio-option span {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.radio-option span i {
    font-size: 0.75rem;
}

.selected-user-refs-notice {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: var(--purple-light);
    border-radius: 8px;
    font-size: 0.85rem;
    color: var(--purple-primary);
    margin-top: 0.75rem;
}

.selected-user-refs-notice a {
    color: var(--purple-dark);
    font-weight: 600;
    text-decoration: underline;
}

/* ====================================== */
/* ???덊띁?곗뒪 紐⑸줉 ?ㅽ???                 */
/* ====================================== */

.my-reference-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.my-reference-item {
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 1rem;
    transition: all 0.2s ease;
    position: relative;
}

.my-reference-item:hover {
    border-color: var(--purple-primary);
}

.my-reference-item.selected {
    border-color: var(--purple-primary);
    background: var(--purple-light);
}

.my-reference-item .ref-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 0.75rem;
}

.my-reference-item .ref-copy {
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--text-primary);
    flex: 1;
    padding-right: 1rem;
}

.my-reference-item .ref-actions {
    display: flex;
    gap: 0.5rem;
}

.my-reference-item .ref-action-btn {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
}

.my-reference-item .ref-action-btn:hover {
    background: var(--bg-hover);
}

.my-reference-item .ref-action-btn.select-btn:hover,
.my-reference-item .ref-action-btn.select-btn.active {
    background: var(--purple-primary);
    border-color: var(--purple-primary);
    color: white;
}

.my-reference-item .ref-action-btn.delete-btn:hover {
    background: var(--error-color);
    border-color: var(--error-color);
    color: white;
}

.my-reference-item .ref-meta {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    font-size: 0.75rem;
}

.my-reference-item .ref-meta .category-badge {
    background: var(--purple-primary);
    color: white;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
}

.my-reference-item .ref-meta .brand-badge {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-secondary);
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
}

/* ?좏깮???덊띁?곗뒪 紐⑸줉 */
.selected-refs-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-height: 300px;
    overflow-y: auto;
}

.selected-ref-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0.75rem;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-size: 0.85rem;
}

.selected-ref-item .ref-text {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-primary);
}

.selected-ref-item .remove-btn {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    border-radius: 4px;
}

.selected-ref-item .remove-btn:hover {
    background: var(--error-color);
    color: white;
}

/* 鍮??곹깭 ?ㅽ???- small 踰꾩쟾 */
.empty-state.small {
    padding: 1rem;
}

.empty-state.small p {
    font-size: 0.85rem;
    margin: 0;
}

/* ?꾩?留??띿뒪??*/
.help-text {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-bottom: 1rem;
    padding: 0.75rem;
    background: var(--bg-input);
    border-radius: 8px;
}

.help-text i {
    color: var(--purple-primary);
}

/* ?????ㅽ???*/
.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

@media (max-width: 768px) {
    .form-row {
        grid-template-columns: 1fr;
    }

    .inner-tabs {
        flex-direction: column;
    }

    .reference-source-options {
        flex-direction: column;
    }

    .radio-option {
        justify-content: center;
    }
}

/* ============================================
   SEO 媛€?대뱶 留덉뒪??- 二쇳솴???뚮쭏
   ============================================ */

/* 二쇳솴??蹂€??*/
:root {
    --orange-primary: #FF6B35;
    --orange-secondary: #F7931E;
    --orange-hover: #FF8C42;
    --orange-light: rgba(255, 107, 53, 0.1);
    --orange-gradient: linear-gradient(135deg, #FF6B35, #F7931E);
}

/* 二쇳솴??諛곗? */
.orange-badge {
    background: var(--orange-gradient);
    box-shadow: 0 2px 8px rgba(255, 107, 53, 0.3);
}

/* 二쇳솴???뚮쭏 而⑦뀒?대꼫 */
.orange-theme {
    --theme-primary: var(--orange-primary);
    --theme-secondary: var(--orange-secondary);
    --theme-hover: var(--orange-hover);
}

/* 二쇳솴??踰꾪듉 */
.orange-btn {
    background: var(--orange-gradient);
    color: white;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    box-shadow: 0 2px 8px rgba(255, 107, 53, 0.3);
}

.orange-btn:hover {
    background: var(--orange-hover);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(255, 107, 53, 0.4);
}

.orange-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.orange-btn.small {
    padding: 0.5rem 1rem;
    font-size: 0.8rem;
}

.orange-btn.large {
    padding: 1rem 2rem;
    font-size: 1rem;
}

.orange-btn.full-width {
    width: 100%;
    justify-content: center;
}

/* Marketing Button */
.marketing-btn {
    background: var(--marketing-gradient);
    color: white;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    box-shadow: 0 2px 8px rgba(14, 165, 233, 0.3);
}

.marketing-btn:hover {
    background: var(--marketing-hover);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(14, 165, 233, 0.4);
}

.marketing-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

/* 제안서 생성 중 상태 표시 */
.marketing-btn.generating {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    position: relative;
    overflow: hidden;
}

.marketing-btn.generating::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    animation: shimmer 2s infinite;
}

@keyframes shimmer {
    0% {
        left: -100%;
    }
    100% {
        left: 100%;
    }
}

.marketing-btn.small {
    padding: 0.5rem 1rem;
    font-size: 0.8rem;
}

.marketing-btn.large {
    padding: 1rem 2rem;
    font-size: 1rem;
}

.marketing-btn.full-width {
    width: 100%;
    justify-content: center;
}

/* Marketing Card Icons */
.marketing-card i {
    color: var(--marketing-primary);
    background: var(--marketing-light);
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    font-size: 1.25rem;
    margin-right: 1rem;
}

.unified-stats .mini-stat-card.marketing-card i {
    background: var(--marketing-light);
    color: var(--marketing-primary);
}

.orange-btn.secondary {
    background: transparent;
    border: 2px solid var(--orange-primary);
    color: var(--orange-primary);
}

.orange-btn.secondary:hover {
    background: rgba(255, 107, 53, 0.1);
    color: var(--orange-primary);
}

/* SEO 媛€?대뱶 而⑦뀒?대꼫 */
.seo-guide-container {
    padding: 1.5rem;
}

.seo-guide-container .page-header {
    margin-bottom: 1.5rem;
}

.seo-guide-container .page-header h1 i {
    color: var(--orange-primary);
}

.seo-guide-container .context-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

/* SEO 遺꾩꽍 寃곌낵 ?뱀뀡 (???꾨옒 諛곗튂) */
.seo-guide-container .results-section {
    background: var(--bg-card);
    border-radius: 12px;
    padding: 1.5rem;
    border: 1px solid var(--border-color);
}

/* 키워드 분석 결과 영역 스크롤 처리 */
#keyword-results,
#google-keyword-results {
    overflow-y: visible !important;
    overflow-x: hidden !important;
    min-height: 0 !important;
}

/* 키워드 분석 탭이 활성화된 경우 content-area 스크롤 활성화 */
.content-area:has(#keywords-tab.tab-content.active) {
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

/* 키워드 분석 결과 내부 위젯 스크롤 개선 */
#keyword-results .widget-body,
#google-keyword-results .widget-body {
    max-height: none !important;
    overflow: visible !important;
}

/* 키워드 테이블이 있는 경우 전체 결과 영역이 스크롤 가능하도록 */
#keywords-tab.tab-content.active {
    display: block !important;
    min-height: 0 !important;
}

.seo-guide-container .result-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-color);
}

.seo-guide-container .result-header h3 {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.seo-guide-container .result-header h3 i {
    color: var(--orange-primary);
}

.seo-guide-container .compact-widget {
    background: var(--bg-card);
    border-radius: 12px;
    border: 1px solid var(--border-color);
}

/* ?뚯씪 ?낅줈???곸뿭 */
.file-upload-area {
    border: 2px dashed var(--border-color);
    border-radius: 12px;
    padding: 2rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}

.file-upload-area:hover {
    border-color: var(--theme-primary);
    background: var(--theme-light);
}

.file-upload-area input[type="file"] {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.file-upload-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
}

.file-upload-label i {
    font-size: 2rem;
    color: var(--theme-primary);
}

.file-upload-label span {
    color: var(--text-primary);
    font-weight: 500;
}

.file-upload-label small {
    color: var(--text-secondary);
    font-size: 0.8rem;
}

/* SEO 寃곌낵 ?쒖떆 */
.seo-result-card {
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1rem;
}

.seo-result-card h3 {
    color: var(--theme-primary);
    margin-bottom: 1rem;
}

.seo-score {
    font-size: 3rem;
    font-weight: 700;
    color: var(--theme-primary);
    text-align: center;
    margin: 1rem 0;
}

.seo-suggestions {
    list-style: none;
    padding: 0;
}

.seo-suggestions li {
    padding: 0.5rem;
    margin-bottom: 0.5rem;
    background: var(--orange-light);
    border-left: 3px solid var(--orange-primary);
    border-radius: 4px;
}


/* 肄붾뱶 釉붾줉 ?ㅽ???*/
.code-block {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 1rem;
    font-family: 'Courier New', monospace;
    font-size: 0.85rem;
    overflow-x: auto;
    margin: 1rem 0;
}

.code-block pre {
    margin: 0;
    white-space: pre-wrap;
    word-wrap: break-word;
}

/* ?ㅼ슫濡쒕뱶 踰꾪듉 */
.download-btn {
    background: var(--orange-gradient);
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    transition: all 0.2s ease;
}

.download-btn:hover {
    background: var(--orange-hover);
    transform: translateY(-1px);
}

/* SEO 寃곌낵 ?뺣낫 洹몃━??*/
.info-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    margin: 1rem 0;
}

.info-item {
    padding: 0.75rem;
    background: var(--bg-input);
    border-radius: 8px;
    border-left: 3px solid var(--theme-primary);
}

.info-label {
    display: block;
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-bottom: 0.25rem;
}

.info-value {
    display: block;
    color: var(--text-primary);
    font-weight: 500;
    margin-bottom: 0.25rem;
}

.info-item small {
    color: var(--text-secondary);
    font-size: 0.75rem;
}

/* SEO ?⑦궎吏€ ?뱀뀡 */
.seo-package-section {
    margin-bottom: 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--border-color);
}

.seo-package-section:last-child {
    border-bottom: none;
}

.seo-package-section h4 {
    color: var(--orange-primary);
    margin-bottom: 0.75rem;
    font-size: 1rem;
}

/* ?뚯궗 ?꾨줈??*/
.company-profile {
    background: var(--bg-input);
    padding: 1rem;
    border-radius: 8px;
    margin: 1rem 0;
}

.company-profile p {
    margin: 0.5rem 0;
    color: var(--text-primary);
}

.company-profile strong {
    color: var(--orange-primary);
    margin-right: 0.5rem;
}

/* 濡쒕뵫 ?곹깭 */
.loading-state {
    text-align: center;
    padding: 2rem;
    color: var(--text-secondary);
}

.loading-state i {
    font-size: 2rem;
    color: var(--orange-primary);
    margin-bottom: 1rem;
}

/* ?낅젰 紐⑤뱶 ??*/
.input-mode-tabs {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.input-mode-tab {
    flex: 1;
    padding: 0.75rem;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
    color: var(--text-secondary);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.input-mode-tab:hover {
    border-color: var(--theme-primary);
    color: var(--theme-primary);
}

.input-mode-tab.active {
    background: var(--theme-light);
    border-color: var(--theme-primary);
    color: var(--theme-primary);
}

.input-mode-tab i {
    font-size: 1.2rem;
}

/* SEO 媛€?대뱶 ?낅젰 ?뱀뀡 (???꾪솚?? */
.seo-input-sections .input-section {
    display: none;
}

.seo-input-sections .input-section.active {
    display: block;
}

/* 湲€????移댁슫??*/
.char-counter {
    display: block;
    text-align: right;
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-top: 0.25rem;
}

/* 泥댄겕諛뺤뒪 洹몃９ */
.checkbox-group {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.checkbox-option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
}

.checkbox-option input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--orange-primary);
}

/* ?ъ씠?몃㏊ URL ?꾩씠??*/
.sitemap-url-item {
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1rem;
}

.sitemap-url-item .form-row {
    grid-template-columns: 2fr 1fr 1fr;
}

/* Robots Agent ?꾩씠??*/
.robots-agent-item {
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1rem;
}


/* ?⑹뼱吏??ㅽ???*/
.glossary-search-box {
    margin-bottom: 1.5rem;
}

.glossary-filters {
    display: flex;
    gap: 0.5rem;
    margin-top: 1rem;
    flex-wrap: wrap;
}

.filter-btn {
    padding: 0.5rem 1rem;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
}

.filter-btn:hover,
.filter-btn.active {
    background: var(--theme-primary);
    border-color: var(--theme-primary);
    color: white;
}

.glossary-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1rem;
}

.glossary-item {
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1.25rem;
    transition: all 0.2s ease;
}

.glossary-item:hover {
    border-color: var(--theme-primary);
    box-shadow: 0 4px 12px var(--theme-light);
}

.glossary-item h4 {
    color: var(--theme-primary);
    margin-bottom: 0.5rem;
    font-size: 1rem;
}

.glossary-item p {
    color: var(--text-primary);
    font-size: 0.9rem;
    line-height: 1.5;
    margin-bottom: 0.75rem;
}

.glossary-category {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    background: var(--theme-light);
    color: var(--theme-primary);
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 500;
}

/* SEO 寃곌낵 移대뱶 ?ㅽ???*/
.seo-result-card {
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1rem;
}

.seo-score-container {
    text-align: center;
    margin-bottom: 1.5rem;
}

.seo-score {
    display: inline-flex;
    align-items: baseline;
    gap: 0.25rem;
    font-weight: 700;
}

.seo-score .score-number {
    font-size: 3.5rem;
}

.seo-score .score-max {
    font-size: 1.5rem;
    color: var(--text-secondary);
}

.seo-score .score-grade {
    margin-left: 1rem;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 1rem;
    color: white;
    font-weight: 600;
}

/* ?먯닔 breakdown */
.score-breakdown {
    display: grid;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.score-item {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.score-item .score-label {
    min-width: 100px;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.score-item .score-bar {
    flex: 1;
    height: 8px;
    background: var(--border-color);
    border-radius: 4px;
    overflow: hidden;
}

.score-item .score-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.5s ease;
}

.score-item .score-value {
    min-width: 50px;
    text-align: right;
    font-weight: 600;
    color: var(--text-primary);
}

/* ?곸꽭 ?뺣낫 ?뱀뀡 */
.seo-details {
    display: grid;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.detail-section {
    background: var(--bg-card);
    border-radius: 8px;
    padding: 1rem;
}

.detail-section h4 {
    color: var(--theme-primary);
    margin-bottom: 1rem;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.detail-item {
    display: flex;
    align-items: center;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--border-color);
}

.detail-item:last-child {
    border-bottom: none;
}

.detail-item .detail-label {
    min-width: 100px;
    color: var(--text-secondary);
    font-size: 0.85rem;
}

.detail-item .detail-value {
    flex: 1;
    color: var(--text-primary);
}

.detail-item .detail-meta {
    color: var(--theme-primary);
    font-size: 0.85rem;
    font-weight: 500;
}

/* 泥댄겕 ??ぉ 洹몃━??*/
.detail-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.check-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    font-size: 0.85rem;
}

.check-item.pass {
    background: rgba(16, 185, 129, 0.1);
    color: #10B981;
}

.check-item.fail {
    background: rgba(239, 68, 68, 0.1);
    color: #EF4444;
}

/* ?듦퀎 ??ぉ */
.stat-item {
    text-align: center;
    padding: 0.75rem 1rem;
    background: var(--bg-input);
    border-radius: 8px;
    min-width: 80px;
}

.stat-item .stat-value {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--theme-primary);
}

.stat-item .stat-label {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

/* ?댁뒋 ?뱀뀡 */
.issues-section {
    margin-bottom: 1.5rem;
}

.issue-group {
    margin-bottom: 1rem;
    padding: 1rem;
    border-radius: 8px;
}

.issue-group.critical {
    background: rgba(239, 68, 68, 0.1);
    border-left: 3px solid #EF4444;
}

.issue-group.warning {
    background: rgba(245, 158, 11, 0.1);
    border-left: 3px solid #F59E0B;
}

.issue-group h4 {
    margin-bottom: 0.75rem;
    font-size: 0.9rem;
}

.issue-group.critical h4 {
    color: #EF4444;
}

.issue-group.warning h4 {
    color: #F59E0B;
}

.issue-group ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.issue-group li {
    padding: 0.25rem 0;
    color: var(--text-primary);
    font-size: 0.9rem;
}

/* 異붿쿇 ?ы빆 */
.recommendations-section h4 {
    color: var(--theme-primary);
    margin-bottom: 1rem;
}

.recommendations-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.recommendation-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem;
    background: var(--bg-input);
    border-radius: 8px;
    border-left: 3px solid var(--border-color);
}

.recommendation-item.high {
    border-left-color: #EF4444;
}

.recommendation-item.medium {
    border-left-color: #F59E0B;
}

.recommendation-item.low {
    border-left-color: #10B981;
}

.recommendation-item .rec-number {
    width: 24px;
    height: 24px;
    background: var(--theme-primary);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 600;
    flex-shrink: 0;
}

.recommendation-item .rec-content {
    flex: 1;
}

.recommendation-item .rec-content strong {
    display: block;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}

.recommendation-item .rec-content p {
    color: var(--text-secondary);
    font-size: 0.85rem;
    margin: 0;
}

.recommendation-item .rec-content small {
    color: var(--theme-primary);
    font-size: 0.8rem;
}

.recommendation-item .rec-priority {
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 500;
}

.recommendation-item .rec-priority.high {
    background: rgba(239, 68, 68, 0.1);
    color: #EF4444;
}

.recommendation-item .rec-priority.medium {
    background: rgba(245, 158, 11, 0.1);
    color: #F59E0B;
}

.recommendation-item .rec-priority.low {
    background: rgba(16, 185, 129, 0.1);
    color: #10B981;
}

/* 紐⑤떖 ?ㅽ???*/
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.modal-content {
    background: var(--bg-card);
    border-radius: 12px;
    max-width: 500px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--border-color);
}

.modal-header h3 {
    margin: 0;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.modal-close {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 4px;
}

.modal-close:hover {
    background: var(--bg-input);
    color: var(--text-primary);
}

.modal-body {
    padding: 1.5rem;
}

.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--border-color);
}

.report-type-options {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.report-type-options .radio-option {
    flex: 1;
    min-width: 120px;
}

/* AI ?뱀뀡 */
.ai-section {
    background: var(--theme-light);
    border-radius: 8px;
    padding: 1rem;
}

.ai-section h4 {
    color: var(--theme-primary);
    margin-bottom: 0.75rem;
}

.ai-section p {
    color: var(--text-primary);
    line-height: 1.6;
}

.ai-recommendations {
    list-style: none;
    padding: 0;
    margin: 0.75rem 0 0 0;
}

.ai-recommendations li {
    padding: 0.5rem 0;
    padding-left: 1.5rem;
    position: relative;
    color: var(--text-secondary);
}

.ai-recommendations li::before {
    content: '\f0da';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    left: 0;
    color: var(--theme-primary);
}

/* 諛섏쓳??*/
@media (max-width: 768px) {
    .seo-guide-container .context-grid {
        grid-template-columns: 1fr;
    }

    .input-mode-tabs {
        flex-direction: column;
    }
}

/* SEO 媛€?대뱶 input-mode-tab 二쇳솴???뚮쭏 (洹좏삎 紐⑤뱶 ?ㅽ??? */
.seo-guide-container .input-mode-tab.active {
    background: var(--theme-light);
    border: 2px solid var(--theme-primary);
    color: white;
    box-shadow: 0 2px 8px var(--theme-light);
}

.seo-guide-container .input-mode-tab:hover:not(.active) {
    color: var(--theme-primary);
    background: var(--theme-light);
}

.seo-guide-container .input-mode-tab i {
    color: var(--theme-primary);
}

.seo-guide-container .input-mode-tab.active i {
    color: white;
}

@media (max-width: 768px) {
    .sitemap-url-item .form-row {
        grid-template-columns: 1fr;
    }

    .glossary-list {
        grid-template-columns: 1fr;
    }

    .score-item {
        flex-wrap: wrap;
    }

    .score-item .score-label {
        width: 100%;
        margin-bottom: 0.25rem;
    }

    .detail-grid {
        flex-direction: column;
    }
}

/* ========================================== */
/* ?쒕줈?댁썐異붽? ?ㅽ???(?ㅼ씠踰??뱀깋 ?뚮쭏) */
/* ========================================== */

/* ?쒕줈?댁썐異붽? 而⑦뀒?대꼫 - 2???덉씠?꾩썐 */
.neighbor-container {
    display: grid;
    grid-template-columns: 1fr 500px;
    gap: 1.5rem;
    max-width: 1600px;
    margin: 0 auto;
    align-items: start;
}

/* ?쇱そ ?⑤꼸: ?ㅼ젙 ??*/
.neighbor-left-panel {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* ?ㅻⅨ履??⑤꼸: ?쒖뒪??濡쒓렇 */
.neighbor-right-panel {
    position: sticky;
    top: 1rem;
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
}

/* ?쒕줈?댁썐 ?꾩젽 湲곕낯 ?ㅽ???*/
.neighbor-container .widget {
    background: var(--bg-card);
    border-radius: 12px;
    border: 1px solid var(--border-color);
    overflow: hidden;
}

.neighbor-container .widget-header {
    background: var(--theme-light);
    border-bottom: 1px solid var(--border-color);
    padding: 1rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.neighbor-container .widget-header h2 {
    color: var(--theme-primary);
    font-size: 1rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
}

.neighbor-container .widget-header h2 i {
    font-size: 0.9rem;
}

.neighbor-container .widget-header .icon-btn {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 6px;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.neighbor-container .widget-header .icon-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--theme-primary);
}

.neighbor-container .widget-body {
    padding: 1.5rem;
}

/* ??洹몃９ */
.neighbor-container .form-group {
    margin-bottom: 1rem;
}

.neighbor-container .form-group:last-child {
    margin-bottom: 0;
}

.neighbor-container .form-group label {
    display: block;
    color: var(--text-secondary);
    font-size: 0.875rem;
    font-weight: 500;
    margin-bottom: 0.5rem;
}

.neighbor-container .form-group input,
.neighbor-container .form-group textarea {
    width: 100%;
    padding: 0.75rem 1rem;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 0.9rem;
    transition: all 0.2s ease;
}

.neighbor-container .form-group input:focus,
.neighbor-container .form-group textarea:focus {
    outline: none;
    border-color: #22c55e;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.1);
}

.neighbor-container .form-group input:disabled,
.neighbor-container .form-group textarea:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* 鍮꾨?踰덊샇 ?낅젰 ?섑띁 */
.neighbor-container .password-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.neighbor-container .password-input-wrapper input {
    padding-right: 3rem;
}

.neighbor-container .password-toggle-btn {
    position: absolute;
    right: 0.75rem;
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0.5rem;
    transition: color 0.2s;
}

.neighbor-container .password-toggle-btn:hover {
    color: #22c55e;
}

/* ???뚰듃 */
.neighbor-container .form-hint {
    color: var(--text-secondary);
    font-size: 0.8rem;
    margin-top: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.neighbor-container .form-hint i {
    color: #22c55e;
}

/* ????(2???덉씠?꾩썐) */
.neighbor-container .form-row {
    display: flex;
    gap: 1rem;
}

.neighbor-container .form-group.half {
    flex: 1;
}

/* 硫붿떆吏€ ?듭뀡 */
.neighbor-container .message-options {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.neighbor-container .radio-option {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.neighbor-container .radio-option:hover {
    border-color: #22c55e;
}

.neighbor-container .radio-option.selected {
    border-color: #22c55e;
    background: rgba(34, 197, 94, 0.1);
}

.neighbor-container .radio-option input {
    width: auto;
    accent-color: #22c55e;
}

.neighbor-container .radio-label {
    color: var(--text-primary);
    font-size: 0.9rem;
}

/* ?≪뀡 踰꾪듉 */
.neighbor-actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
}

.neighbor-actions .naver-btn {
    padding: 0.875rem 2rem;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
}

.neighbor-actions .primary-btn {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    color: white;
    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.3);
}

.neighbor-actions .primary-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(34, 197, 94, 0.4);
}

.neighbor-actions .danger-btn {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: white;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}

.neighbor-actions .danger-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(239, 68, 68, 0.4);
}

/* 吏꾪뻾 ?곹솴 */
.neighbor-progress-widget .progress-bar-container {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.neighbor-progress-widget .progress-bar {
    flex: 1;
    height: 12px;
    background: var(--bg-input);
    border-radius: 6px;
    overflow: hidden;
}

.neighbor-progress-widget .progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #22c55e 0%, #16a34a 100%);
    border-radius: 6px;
    transition: width 0.3s ease;
}

.neighbor-progress-widget .progress-text {
    color: #22c55e;
    font-weight: 600;
    min-width: 50px;
    text-align: right;
}

.neighbor-progress-widget .progress-stats {
    display: flex;
    gap: 2rem;
    justify-content: center;
    margin-bottom: 1rem;
}

.neighbor-progress-widget .stat-item {
    text-align: center;
}

.neighbor-progress-widget .stat-item .stat-label {
    display: block;
    color: var(--text-secondary);
    font-size: 0.8rem;
    margin-bottom: 0.25rem;
}

.neighbor-progress-widget .stat-item .stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
}

.neighbor-progress-widget .stat-item.success .stat-value {
    color: #22c55e;
}

.neighbor-progress-widget .stat-item.fail .stat-value {
    color: #ef4444;
}

.neighbor-progress-widget .progress-status {
    text-align: center;
    color: var(--text-secondary);
    font-size: 0.9rem;
    padding: 0.75rem;
    background: var(--bg-input);
    border-radius: 8px;
}

/* ?쒖뒪??濡쒓렇 肄섏넄 */
.system-log-console {
    background: var(--bg-dark);
    border-radius: 8px;
    padding: 1rem;
    min-height: 700px;
    max-height: calc(100vh - 150px);
    overflow-y: auto;
    font-size: 0.875rem;
    line-height: 1.6;
}

.system-log-console .log-entry {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem;
    margin-bottom: 0.5rem;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.02);
    transition: background 0.2s;
}

.system-log-console .log-entry:hover {
    background: rgba(255, 255, 255, 0.05);
}

.system-log-console .log-entry .log-icon {
    flex-shrink: 0;
    width: 20px;
    text-align: center;
    color: #94a3b8;
}

.system-log-console .log-entry.success .log-icon {
    color: #22c55e;
}

.system-log-console .log-entry.error .log-icon {
    color: #ef4444;
}

.system-log-console .log-entry.warning .log-icon {
    color: #f59e0b;
}

.system-log-console .log-entry.loading .log-icon {
    color: #3b82f6;
}

.system-log-console .log-entry .log-content {
    flex: 1;
    color: var(--text-primary);
    word-break: break-word;
}

.system-log-console .log-entry.success .log-content {
    color: #22c55e;
}

.system-log-console .log-entry.error .log-content {
    color: #ef4444;
}

.system-log-console .log-entry.warning .log-content {
    color: #f59e0b;
}

.system-log-console .log-entry .log-time {
    flex-shrink: 0;
    color: #64748b;
    font-size: 0.75rem;
    white-space: nowrap;
}

/* 硫붿떆吏€ 誘몃━蹂닿린 (textarea) */
#neighbor-message-preview {
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 1rem;
    color: var(--text-primary);
    font-size: 0.9rem;
    line-height: 1.8;
    resize: vertical;
    min-height: 150px;
    font-family: inherit;
    transition: border-color 0.2s;
}

#neighbor-message-preview:focus {
    outline: none;
    border-color: #22c55e;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.1);
}

#neighbor-message-preview::placeholder {
    color: var(--text-secondary);
}

.preview-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 0.75rem;
    flex-wrap: wrap;
}

.refresh-preview-btn {
    margin-top: 0.75rem;
    padding: 0.5rem 1rem;
    background: rgba(34, 197, 94, 0.1);
    border: 1px solid #22c55e;
    border-radius: 6px;
    color: #22c55e;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.refresh-preview-btn:hover {
    background: rgba(34, 197, 94, 0.2);
    transform: translateY(-1px);
}

/* 寃곌낵 ?붿빟 */
.neighbor-result-widget .result-summary {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

.neighbor-result-widget .result-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: var(--bg-input);
    border-radius: 8px;
}

.neighbor-result-widget .result-icon {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
}

.neighbor-result-widget .result-icon.total {
    background: rgba(100, 116, 139, 0.2);
    color: #64748b;
}

.neighbor-result-widget .result-icon.success {
    background: rgba(34, 197, 94, 0.2);
    color: #22c55e;
}

.neighbor-result-widget .result-icon.fail {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
}

.neighbor-result-widget .result-icon.rate {
    background: rgba(59, 130, 246, 0.2);
    color: #3b82f6;
}

.neighbor-result-widget .result-info {
    display: flex;
    flex-direction: column;
}

.neighbor-result-widget .result-label {
    color: var(--text-secondary);
    font-size: 0.8rem;
}

.neighbor-result-widget .result-value {
    color: var(--text-primary);
    font-size: 1.5rem;
    font-weight: 700;
}

/* 諛섏쓳??*/
@media (max-width: 1200px) {
    .neighbor-container {
        grid-template-columns: 1fr;
    }

    .neighbor-right-panel {
        position: static;
        max-height: 600px;
    }
}

@media (max-width: 768px) {
    .neighbor-container .form-row {
        flex-direction: column;
    }

    .neighbor-result-widget .result-summary {
        grid-template-columns: repeat(2, 1fr);
    }

    .neighbor-progress-widget .progress-stats {
        flex-wrap: wrap;
    }

    .system-log-console {
        min-height: 400px;
        max-height: 500px;
    }

    .neighbor-right-panel {
        max-height: 500px;
    }
}

/* ========================================== */
/* ?쒕퉬?ㅻ퀎 ?앹꽦 湲곕줉 ???ㅽ???*/
/* ========================================== */

.service-history-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 1rem;
}

/* ?꾪꽣 ?곸뿭 */
.history-filter-section {
    background: var(--bg-card);
    border-radius: 12px;
    padding: 1rem 1.5rem;
    margin-bottom: 1.5rem;
    border: 1px solid var(--border-color);
}

.history-filter-section .filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: flex-end;
}

.history-filter-section .filter-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.history-filter-section .filter-group label {
    font-size: 0.75rem;
    color: var(--text-secondary);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.history-filter-section .filter-group select {
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    padding: 0.625rem 1rem;
    border-radius: 8px;
    font-size: 0.875rem;
    min-width: 140px;
    cursor: pointer;
}

.history-filter-section .filter-group select:focus {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2);
}

.filter-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    background: var(--accent-primary);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.filter-btn:hover {
    background: var(--accent-hover);
    transform: translateY(-1px);
}

.filter-btn.google-btn {
    background: linear-gradient(135deg, #4285f4, #34a853);
}

.filter-btn.google-btn:hover {
    background: linear-gradient(135deg, #3367d6, #2d8e47);
}

.filter-btn.seo-btn {
    background: linear-gradient(135deg, #f59e0b, #d97706);
}

.filter-btn.seo-btn:hover {
    background: linear-gradient(135deg, #d97706, #b45309);
}

.filter-btn.marketing-btn {
    background: linear-gradient(135deg, #0ea5e9, #0284c7);
}

.filter-btn.marketing-btn:hover {
    background: linear-gradient(135deg, #0284c7, #0369a1);
}

/* ?듦퀎 移대뱶 ??*/
.history-stats-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.mini-stat-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: var(--bg-card);
    border-radius: 12px;
    padding: 1rem 1.25rem;
    border: 1px solid var(--border-color);
    transition: transform 0.2s, box-shadow 0.2s;
}

.mini-stat-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.mini-stat-card i {
    font-size: 1.5rem;
    color: var(--accent-primary);
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(16, 185, 129, 0.1);
    border-radius: 10px;
}

.mini-stat-card.google-card i {
    color: #4285f4;
    background: rgba(66, 133, 244, 0.1);
}

.mini-stat-card.seo-card i {
    color: #f59e0b;
    background: rgba(245, 158, 11, 0.1);
}

.mini-stat-card.marketing-card i {
    color: #0ea5e9;
    background: rgba(14, 165, 233, 0.1);
}

.mini-stat-info {
    display: flex;
    flex-direction: column;
}

.mini-stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
}

.mini-stat-label {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

/* 湲곕줉 紐⑸줉 ?뱀뀡 */
.history-list-section {
    background: var(--bg-card);
    border-radius: 12px;
    padding: 1.5rem;
    border: 1px solid var(--border-color);
    min-height: 400px;
}

.history-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.history-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    color: var(--text-secondary);
}

.history-empty i {
    font-size: 3rem;
    margin-bottom: 1rem;
    opacity: 0.5;
}

.history-empty p {
    font-size: 0.9rem;
}

/* 湲곕줉 ?꾩씠??*/
.history-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: var(--bg-input);
    border-radius: 10px;
    border: 1px solid var(--border-color);
    transition: all 0.2s;
    cursor: pointer;
}

.history-item:hover {
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
}

.history-item-icon {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(16, 185, 129, 0.1);
    border-radius: 10px;
    color: var(--accent-primary);
    font-size: 1.1rem;
    flex-shrink: 0;
}

.history-item-icon.keyword {
    background: rgba(96, 165, 250, 0.1);
    color: #60a5fa;
}

.history-item-icon.content {
    background: rgba(34, 197, 94, 0.1);
    color: #22c55e;
}

.history-item-icon.image {
    background: rgba(168, 85, 247, 0.1);
    color: #a855f7;
}

.history-item-icon.posting {
    background: rgba(251, 146, 60, 0.1);
    color: #fb923c;
}

.history-item-icon.seo {
    background: rgba(245, 158, 11, 0.1);
    color: #f59e0b;
}

.history-item-icon.marketing {
    background: rgba(14, 165, 233, 0.1);
    color: #0ea5e9;
}

.history-item-icon.neighbor {
    background: rgba(3, 199, 90, 0.1);
    color: #03c75a;
}

.history-item-icon.adcopy {
    background: rgba(147, 51, 234, 0.1);
    color: #9333ea;
}

.history-item-info {
    flex: 1;
    min-width: 0;
}

.history-item-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.history-item-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.history-item-meta span {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.history-item-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    font-size: 0.7rem;
    font-weight: 600;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.history-item-badge.success {
    background: rgba(34, 197, 94, 0.1);
    color: #22c55e;
}

.history-item-badge.pending {
    background: rgba(251, 191, 36, 0.1);
    color: #fbbf24;
}

.history-item-badge.failed {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

.history-item-badge.processing {
    background: rgba(96, 165, 250, 0.1);
    color: #60a5fa;
}

.history-item-actions {
    display: flex;
    gap: 0.5rem;
}

.history-item-actions button {
    padding: 0.5rem;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s;
}

.history-item-actions button:hover {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
    color: white;
}

/* ?섏씠吏€?ㅼ씠??*/
.history-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1.5rem;
}

.history-pagination button {
    padding: 0.5rem 1rem;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s;
}

.history-pagination button:hover:not(:disabled) {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
}

.history-pagination button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.history-pagination .page-info {
    padding: 0.5rem 1rem;
    color: var(--text-secondary);
    font-size: 0.875rem;
}

/* ?뚮쭏蹂??ㅽ???*/
.service-history-container.google-theme .history-item:hover {
    border-color: #4285f4;
    box-shadow: 0 0 0 3px rgba(66, 133, 244, 0.1);
}

.service-history-container.seo-theme .history-item:hover {
    border-color: #f59e0b;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.1);
}

.service-history-container.marketing-theme .history-item:hover {
    border-color: #0ea5e9;
    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1);
}

/* ?쒕퉬??諭껋? */
.service-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.5rem;
    font-size: 0.65rem;
    font-weight: 600;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.service-badge.naver {
    background: rgba(3, 199, 90, 0.15);
    color: #03C75A;
}

.service-badge.google {
    background: rgba(66, 133, 244, 0.15);
    color: #4285F4;
}

.service-badge.purple {
    background: rgba(147, 51, 234, 0.15);
    color: #9333EA;
}

.service-badge.seo {
    background: rgba(245, 158, 11, 0.15);
    color: #F59E0B;
}

.service-badge.marketing {
    background: rgba(14, 165, 233, 0.15);
    color: #0EA5E9;
}

/* ?듯빀 ?덉뒪?좊━ ?꾩씠肄??됱긽 */
.history-item-icon.naver {
    background: rgba(3, 199, 90, 0.1);
    color: #03C75A;
}

.history-item-icon.google {
    background: rgba(66, 133, 244, 0.1);
    color: #4285F4;
}

.history-item-icon.purple {
    background: rgba(147, 51, 234, 0.1);
    color: #9333EA;
}

/* ?듯빀 ?덉뒪?좊━ ?듦퀎 移대뱶 */
.unified-stats .mini-stat-card.naver-card i {
    background: rgba(3, 199, 90, 0.1);
}

.unified-stats .mini-stat-card.purple-card i {
    background: rgba(147, 51, 234, 0.1);
}

/* 濡쒕뵫 ?곹깭 */
.loading-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    color: var(--text-secondary);
    gap: 1rem;
}

.loading-state i {
    font-size: 2rem;
}

/* 異붽? ?뺣낫 移댁슫??*/
.extra-count {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.15rem 0.5rem;
    background: rgba(16, 185, 129, 0.1);
    color: var(--accent-primary);
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 500;
}

/* ?덉뒪?좊━ ?곸꽭 紐⑤떖 */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    backdrop-filter: blur(4px);
}

.modal-container.history-modal {
    background: var(--bg-card);
    border-radius: 16px;
    width: 90%;
    max-width: 700px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border-color);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--border-color);
}

.modal-header h3 {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.modal-close {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-size: 1.25rem;
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 8px;
    transition: all 0.2s;
}

.modal-close:hover {
    background: var(--bg-input);
    color: var(--text-primary);
}

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

.modal-footer {
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--border-color);
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
}

/* ?곸꽭 ?뱀뀡 */
.detail-section {
    margin-bottom: 1.5rem;
}

.detail-section h4 {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.detail-section h4 i {
    color: var(--accent-primary);
}

.detail-prompt,
.detail-keyword,
.detail-title,
.detail-company,
.detail-url {
    background: var(--bg-input);
    padding: 1rem;
    border-radius: 8px;
    font-size: 0.9rem;
    color: var(--text-primary);
    line-height: 1.6;
    white-space: pre-wrap;
    word-break: break-word;
}

.detail-info {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin: 0.5rem 0;
}

.detail-info i {
    width: 20px;
    color: var(--accent-primary);
}

/* 移댄뵾 紐⑸줉 */
.copies-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    max-height: 400px;
    overflow-y: auto;
}

.copy-item {
    background: var(--bg-input);
    border-radius: 10px;
    padding: 1rem;
    border: 1px solid var(--border-color);
}

.copy-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.copy-number {
    background: var(--accent-primary);
    color: white;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
}

.copy-chars {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.copy-text {
    font-size: 0.9rem;
    color: var(--text-primary);
    line-height: 1.6;
    margin-bottom: 0.75rem;
    white-space: pre-wrap;
}

.copy-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.75rem;
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    border-radius: 6px;
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.2s;
}

.copy-btn:hover {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
    color: white;
}

/* ?쒕줈?댁썐 ?듦퀎 */
.neighbor-stats {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.neighbor-stats .stat {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 500;
}

.neighbor-stats .stat.success {
    background: rgba(34, 197, 94, 0.1);
    color: #22c55e;
}

.neighbor-stats .stat.failed {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

.neighbor-stats .stat.total {
    background: rgba(96, 165, 250, 0.1);
    color: #60a5fa;
}

/* ?쒕줈?댁썐 ?좎껌 紐⑸줉 */
.neighbor-requests-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-height: 300px;
    overflow-y: auto;
}

.neighbor-request-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: var(--bg-input);
    border-radius: 8px;
    font-size: 0.85rem;
}

.neighbor-request-item.success {
    border-left: 3px solid #22c55e;
}

.neighbor-request-item.failed {
    border-left: 3px solid #ef4444;
}

.neighbor-request-item .blog-id {
    font-weight: 500;
    color: var(--text-primary);
}

.neighbor-request-item .request-status {
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 600;
}

.neighbor-request-item.success .request-status {
    background: rgba(34, 197, 94, 0.1);
    color: #22c55e;
}

.neighbor-request-item.failed .request-status {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

.neighbor-request-item .request-message {
    color: var(--text-secondary);
    font-size: 0.75rem;
    margin-left: auto;
}

/* 肄섑뀗痢?誘몃━蹂닿린 */
.content-preview {
    background: var(--bg-input);
    padding: 1rem;
    border-radius: 8px;
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.6;
    max-height: 200px;
    overflow-y: auto;
}

/* ?ㅼ슫濡쒕뱶/留곹겕 踰꾪듉 */
.download-link,
.docs-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    background: var(--accent-primary);
    color: white;
    text-decoration: none;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 500;
    transition: all 0.2s;
}

.download-link:hover,
.docs-link:hover {
    background: var(--accent-hover);
    transform: translateY(-1px);
}

.docs-link {
    background: #4285f4;
}

.docs-link:hover {
    background: #3367d6;
}

/* 鍮??곸꽭 */
.empty-detail {
    text-align: center;
    padding: 2rem;
    color: var(--text-secondary);
}

/* 愿묎퀬 移댄뵾 ?덉뒪?좊━ 洹몃９??*/
.ad-copy-history-item.grouped {
    cursor: pointer;
    transition: all 0.2s;
}

.ad-copy-history-item.grouped:hover {
    background: var(--bg-input);
    transform: translateX(4px);
}

.ad-copy-history-item .history-count {
    background: var(--accent-primary);
    color: white;
    padding: 0.2rem 0.6rem;
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: 600;
}

.ad-copy-history-item .view-detail {
    color: var(--accent-primary);
    font-weight: 500;
    cursor: pointer;
}

/* 移댄뵾 洹몃９ 紐⑤떖 */
.copy-group-modal {
    max-width: 750px;
    max-height: 85vh;
}

.prompt-section {
    margin-bottom: 1.5rem;
}

.prompt-section h4,
.copies-section h4 {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.prompt-section h4 i,
.copies-section h4 i {
    color: var(--accent-primary);
}

.prompt-content {
    background: var(--bg-input);
    padding: 1rem;
    border-radius: 8px;
    font-size: 0.9rem;
    color: var(--text-primary);
    line-height: 1.6;
    white-space: pre-wrap;
    word-break: break-word;
}

.copies-section .copies-list {
    max-height: 400px;
    overflow-y: auto;
}

.copy-detail-item {
    background: var(--bg-input);
    border-radius: 10px;
    padding: 1rem;
    margin-bottom: 0.75rem;
    border: 1px solid var(--border-color);
}

.copy-detail-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.copy-detail-header .copy-number {
    background: var(--accent-primary);
    color: white;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
}

.copy-detail-header .copy-chars {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.copy-detail-header .copy-model {
    font-size: 0.7rem;
    padding: 0.15rem 0.4rem;
    background: rgba(147, 51, 234, 0.1);
    color: #9333EA;
    border-radius: 4px;
    margin-left: auto;
}

.copy-detail-text {
    font-size: 0.9rem;
    color: var(--text-primary);
    line-height: 1.6;
    margin-bottom: 0.75rem;
    white-space: pre-wrap;
}

.copy-detail-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.75rem;
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    border-radius: 6px;
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.2s;
}

.copy-detail-btn:hover {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
    color: white;
}

/* ?꾩껜 肄섑뀗痢?蹂닿린 */
.content-full-view {
    background: var(--bg-input);
    border-radius: 10px;
    padding: 1.25rem;
    border: 1px solid var(--border-color);
    position: relative;
}

.content-full-view .content-text {
    font-size: 0.9rem;
    color: var(--text-primary);
    line-height: 1.8;
    max-height: 400px;
    overflow-y: auto;
    white-space: pre-wrap;
    word-break: break-word;
}

.content-full-view.marketing-content .content-text {
    max-height: 500px;
}

.copy-full-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: var(--accent-primary);
    border: none;
    color: white;
    border-radius: 6px;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.2s;
    margin-top: 1rem;
}

.copy-full-btn:hover {
    background: var(--accent-hover);
    transform: translateY(-1px);
}

.copy-btn-small {
    padding: 0.25rem 0.5rem;
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    border-radius: 4px;
    font-size: 0.7rem;
    cursor: pointer;
    transition: all 0.2s;
    margin-left: auto;
}

.copy-btn-small:hover {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
    color: white;
}

/* ?곸꽭 ?듦퀎 */
.detail-section.detail-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    padding: 1rem;
    background: var(--bg-input);
    border-radius: 8px;
    margin-bottom: 1.5rem;
}

.detail-section.detail-stats span {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.detail-section.detail-stats span i {
    color: var(--accent-primary);
}

/* ?곹깭 諭껋? */
.status-badge {
    padding: 0.3rem 0.75rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
}

.status-badge.completed {
    background: rgba(34, 197, 94, 0.1);
    color: #22c55e;
}

.status-badge.failed {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

.status-badge.processing,
.status-badge.pending {
    background: rgba(251, 191, 36, 0.1);
    color: #fbbf24;
}

/* ?곗뼱 諭껋? */
.tier-badge {
    padding: 0.3rem 0.75rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
}

.tier-badge.premium {
    background: rgba(245, 158, 11, 0.1);
    color: #f59e0b;
}

.tier-badge.standard {
    background: rgba(96, 165, 250, 0.1);
    color: #60a5fa;
}

/* ?ㅼ썙??紐⑸줉 */
.keywords-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.keyword-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.35rem 0.75rem;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    font-size: 0.8rem;
    color: var(--text-primary);
}

.keyword-tag small {
    color: var(--text-secondary);
    font-size: 0.7rem;
}

.keyword-more {
    padding: 0.35rem 0.75rem;
    color: var(--accent-primary);
    font-size: 0.8rem;
}

/* ?대?吏€ 誘몃━蹂닿린 */
.image-preview-container {
    text-align: center;
}

.detail-image {
    max-width: 100%;
    max-height: 400px;
    border-radius: 10px;
    margin-bottom: 1rem;
}

.image-error {
    color: var(--text-secondary);
    padding: 2rem;
}

/* ?ъ뒪??留곹겕 踰꾪듉 */
.post-link-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    background: var(--accent-primary);
    color: white;
    text-decoration: none;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 500;
    transition: all 0.2s;
}

.post-link-btn:hover {
    background: var(--accent-hover);
    transform: translateY(-1px);
}

/* ?쒖븞/?댁뒋 紐⑸줉 */
.suggestions-list,
.issues-list {
    padding-left: 1.25rem;
}

.suggestions-list li,
.issues-list li {
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.8;
    margin-bottom: 0.5rem;
}

.suggestions-list li::marker {
    color: var(--accent-primary);
}

.issues-list li::marker {
    color: #ef4444;
}

/* SEO ?먯닔 ?쒖떆 */
.score-display {
    display: flex;
    align-items: baseline;
    gap: 0.25rem;
}

.score-value {
    font-size: 2.5rem;
    font-weight: 700;
}

.score-value.good {
    color: #22c55e;
}

.score-value.medium {
    color: #fbbf24;
}

.score-value.bad {
    color: #ef4444;
}

.score-label {
    font-size: 1rem;
    color: var(--text-secondary);
}

/* ?ㅼ슫濡쒕뱶 踰꾪듉 洹몃９ */
.download-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

/* ?명듃/?덈궡 臾멸뎄 */
.detail-note {
    font-size: 0.85rem;
    color: var(--text-secondary);
    padding: 1rem;
    background: rgba(251, 191, 36, 0.1);
    border-radius: 8px;
    border-left: 3px solid #fbbf24;
}

.detail-note i {
    color: #fbbf24;
    margin-right: 0.5rem;
}

/* 諛섏쓳??*/
@media (max-width: 768px) {
    .history-filter-section .filter-row {
        flex-direction: column;
    }

    .history-filter-section .filter-group {
        width: 100%;
    }

    .history-filter-section .filter-group select {
        width: 100%;
    }

    .history-stats-row {
        grid-template-columns: repeat(2, 1fr);
    }

    .history-item {
        flex-direction: column;
        align-items: flex-start;
    }

    .history-item-icon {
        width: 36px;
        height: 36px;
        font-size: 1rem;
    }

    /* ============================================
   YouTube Shorts ?ㅽ???
   ============================================ */

    /* YouTube ?뚮쭏 而щ윭 蹂€??*/
    :root {
        --youtube-primary: #CC0000;
        --youtube-secondary: #E52D27;
        --youtube-light: rgba(204, 0, 0, 0.1);
        --youtube-gradient: linear-gradient(135deg, #CC0000, #990000);
    }

    /* ?ㅻ퉬寃뚯씠??YouTube 諛곗? */
    .nav-icon-badge.youtube-badge {
        background: var(--youtube-gradient);
        box-shadow: 0 2px 8px rgba(255, 0, 0, 0.3);
    }

    /* YouTube ?ㅻ퉬寃뚯씠???꾩씠??*/
    .nav-item.youtube-item.active,
    .nav-sub-item.youtube-item.active {
        background: linear-gradient(90deg, rgba(255, 0, 0, 0.15) 0%, rgba(255, 0, 0, 0) 100%);
        color: var(--youtube-primary);
        border-left: 3px solid var(--youtube-primary);
    }

    .nav-item.youtube-item:hover,
    .nav-sub-item.youtube-item:hover {
        background: rgba(255, 0, 0, 0.08);
        color: var(--youtube-primary);
    }

    /* ============================================
   YouTube 遺꾩꽍 ?섏씠吏€ ?ㅽ???(李몄“ ?대?吏€ 湲곕컲)
   ============================================ */

    /* YouTube 遺꾩꽍 ??而⑦뀒?대꼫 */
    #youtube-analysis-tab.tab-content.active {
        display: flex !important;
        flex-direction: column;
        min-height: calc(100vh - 60px) !important;
        height: auto !important;
        overflow: visible !important;
        padding: 0 !important;
        margin: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    .youtube-analysis-layout {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 1.5rem !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        height: 100% !important;
    }

    .youtube-analysis-container {
        display: flex !important;
        flex-direction: row !important;
        height: 100% !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        gap: 1rem;
        background: var(--bg-primary);
        overflow: hidden;
        transition: all 0.3s ease;
        box-sizing: border-box !important;
        margin: 0 !important;
        padding: 1rem !important;
    }

    /* YouTube 遺꾩꽍 ?섏씠吏€ ?대? ?ъ씠?쒕컮媛€ ?ロ삍????寃곌낵 ?곸뿭 ?먮룞 ?뺤옣 */
    .youtube-sidebar.collapsed~.youtube-main-content {
        flex: 1 !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    .youtube-sidebar.collapsed~.youtube-main-content .youtube-results-table-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    .youtube-sidebar.collapsed~.youtube-main-content .youtube-results-table {
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
    }

    /* 硫붿씤 ?ъ씠?쒕컮媛€ ?ロ삍???뚮룄 YouTube 遺꾩꽍 寃곌낵 ?곸뿭 ?뺤옣 */
    .sidebar.collapsed~.main-content .youtube-analysis-container,
    .sidebar.collapsed~.main-content .content-area .youtube-analysis-container {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    .sidebar.collapsed~.main-content .youtube-analysis-container .youtube-main-content,
    .sidebar.collapsed~.main-content .content-area .youtube-analysis-container .youtube-main-content {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        flex: 1 !important;
    }

    .sidebar.collapsed~.main-content .youtube-analysis-container .youtube-results-table-wrapper,
    .sidebar.collapsed~.main-content .content-area .youtube-analysis-container .youtube-results-table-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    .sidebar.collapsed~.main-content .youtube-analysis-container .youtube-results-table,
    .sidebar.collapsed~.main-content .content-area .youtube-analysis-container .youtube-results-table {
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
    }

    /* ===== YouTube ?ъ씠?쒕컮 ===== */
    .youtube-sidebar {
        width: 280px !important;
        min-width: 280px !important;
        max-width: 280px !important;
        background: var(--card-bg);
        border-right: 1px solid var(--border-color);
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden;
        transition: all 0.3s ease;
        position: relative;
        flex-shrink: 0;
    }

    /* 硫붿씤 寃곌낵 ?곸뿭 諛뺤뒪 */
    .youtube-main-content {
        flex: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        min-width: 0;
        width: 100%;
        max-width: 100%;
        background: var(--bg-primary);
        padding: 0;
    }

    .youtube-results-card {
        flex: 1;
        display: flex;
        flex-direction: column;
        background: var(--card-bg);
        border: 1px solid var(--border-color);
        border-radius: 14px;
        box-shadow: var(--shadow-md);
        overflow: hidden;
    }

    .youtube-action-bar {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 0.75rem 1rem !important;
        background: var(--card-bg);
        border-bottom: 1px solid var(--border-color);
        min-height: 52px !important;
    }

    .youtube-result-info {
        display: flex;
        align-items: center;
        gap: 0.75rem;
    }

    .youtube-result-title {
        font-size: 1rem;
        font-weight: 600;
        color: var(--text-primary);
    }

    .youtube-result-count-badge {
        background: #e91e63;
        color: white;
        padding: 0.2rem 0.65rem;
        border-radius: 12px;
        font-size: 0.9rem;
        font-weight: 700;
    }

    .youtube-action-buttons {
        display: flex;
        gap: 0.5rem;
    }

    .youtube-results-card-body {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
        padding: 0.75rem 1rem 1rem;
        background: var(--bg-primary);
    }

    .youtube-results-container {
        flex: 1;
        background: var(--card-bg);
        border: 1px solid var(--border-color);
        border-radius: 12px;
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }

    .youtube-results-table-wrapper {
        flex: 1;
        overflow: auto;
    }

    .youtube-results-table {
        width: 100%;
        min-width: 100%;
    }

    .youtube-pagination {
        display: flex;
        justify-content: center;
    }

    /* ?ъ씠?쒕컮 ?ㅽ겕濡??곸뿭 */
    .youtube-sidebar-content {
        flex: 1;
        overflow-y: auto;
        overflow-x: hidden;
        display: flex;
        flex-direction: column;
    }

    .youtube-sidebar.collapsed {
        width: 0 !important;
        min-width: 0 !important;
        max-width: 0 !important;
        padding: 0;
        overflow: hidden;
    }

    /* ?ъ씠?쒕컮 ?좉? 踰꾪듉 */
    .youtube-sidebar-toggle {
        position: absolute;
        right: -12px;
        top: 50%;
        transform: translateY(-50%);
        width: 24px;
        height: 48px;
        background: var(--card-bg);
        border: 1px solid var(--border-color);
        border-radius: 0 6px 6px 0;
        color: var(--text-secondary);
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 10;
        transition: all 0.2s;
    }

    .youtube-sidebar-toggle:hover {
        background: var(--hover-bg);
        color: var(--text-primary);
    }

    /* ===== 寃€????(URL/?ㅼ썙??梨꾨꼸/移댄뀒怨좊━) - ?덊띁?곗뒪 ?ㅽ???===== */
    .youtube-search-tabs {
        display: flex !important;
        flex-direction: row !important;
        padding: 0.5rem 0.6rem !important;
        margin-top: 0 !important;
        gap: 0.35rem !important;
        border-bottom: 1px solid rgba(100, 116, 139, 0.2) !important;
        background: rgba(15, 23, 42, 0.6) !important;
        flex-shrink: 0 !important;
        min-height: 48px !important;
        align-items: center !important;
    }

    .youtube-tab {
        flex: 1;
        padding: 0.4rem 0.5rem;
        background: rgba(30, 41, 59, 0.5);
        border: 1px solid rgba(100, 116, 139, 0.3);
        border-radius: 6px;
        font-size: 0.75rem;
        font-weight: 600;
        color: #94a3b8;
        cursor: pointer;
        transition: all 0.2s ease;
        white-space: nowrap;
        text-align: center;
    }

    .youtube-tab:hover {
        color: #e2e8f0;
        background: rgba(51, 65, 85, 0.7);
        border-color: rgba(100, 116, 139, 0.5);
    }

    .youtube-tab.active {
        background: linear-gradient(135deg, #e91e63 0%, #c2185b 100%) !important;
        color: white !important;
        border-color: #e91e63 !important;
        box-shadow: 0 2px 8px rgba(233, 30, 99, 0.4);
    }

    /* ===== 寃€???⑤꼸 ===== */
    .youtube-search-panel {
        display: none !important;
        padding: 1rem;
    }

    .youtube-search-panel.active {
        display: block !important;
    }

    .youtube-panel-title {
        font-size: 0.9rem;
        font-weight: 600;
        color: var(--text-secondary);
        margin-bottom: 0.6rem;
    }

    .youtube-panel-desc {
        font-size: 0.85rem;
        color: var(--text-muted);
        line-height: 1.5;
        margin-top: 0.4rem;
    }

    /* ?ъ씠?쒕컮 ???붿냼 ?ㅽ???- ?덊띁?곗뒪 ?ㅽ???*/
    .youtube-sidebar .form-group {
        margin-bottom: 0.85rem;
    }

    .youtube-sidebar .form-group label {
        font-size: 0.75rem;
        font-weight: 600;
        color: #e2e8f0;
        margin-bottom: 0.4rem;
        display: block;
    }

    .youtube-sidebar .form-input,
    .youtube-sidebar .form-select {
        font-size: 0.8rem !important;
        padding: 0.5rem 0.6rem !important;
        background: rgba(30, 41, 59, 0.7) !important;
        border: 1px solid rgba(100, 116, 139, 0.3) !important;
        border-radius: 6px !important;
        color: #e2e8f0 !important;
        width: 100% !important;
        height: 36px !important;
        min-height: 36px !important;
        max-height: 36px !important;
        line-height: 1.3 !important;
        transition: all 0.2s ease;
    }

    .youtube-sidebar .form-input:focus,
    .youtube-sidebar .form-select:focus {
        outline: none;
        border-color: #e91e63;
        box-shadow: 0 0 0 2px rgba(233, 30, 99, 0.2);
    }

    .youtube-sidebar .form-input::placeholder {
        color: #64748b;
    }

    /* ===== ?꾪꽣 踰꾪듉 洹몃９ - ?덊띁?곗뒪 ?ㅽ???===== */
    .youtube-btn-group {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .youtube-filter-btn {
        padding: 0.4rem 0.7rem;
        background: rgba(30, 41, 59, 0.5);
        border: 1px solid rgba(100, 116, 139, 0.3);
        border-radius: 3px;
        font-size: 0.55rem;
        font-weight: 500;
        color: var(--text-secondary);
        cursor: pointer;
        transition: all 0.2s;
    }

    .youtube-filter-btn:hover {
        border-color: #e91e63;
        color: #e91e63;
        background: rgba(233, 30, 99, 0.1);
    }

    .youtube-filter-btn.active {
        background: linear-gradient(135deg, #e91e63, #c2185b);
        border-color: #e91e63;
        color: white;
        box-shadow: 0 2px 6px rgba(233, 30, 99, 0.3);
    }

    /* ===== ?꾪꽣 ?뱀뀡 - ?덊띁?곗뒪 ?ㅽ???===== */
    .youtube-filter-section {
        padding: 0.85rem;
        border-top: 1px solid rgba(100, 116, 139, 0.2);
        background: rgba(15, 23, 42, 0.3);
    }

    .youtube-filter-section .youtube-panel-title {
        margin-bottom: 0.75rem;
        font-size: 0.8rem;
        font-weight: 600;
        color: #94a3b8;
    }

    .youtube-filter-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.75rem;
        margin-bottom: 0.75rem;
    }

    /* ===== 理쒖냼 議고쉶??踰꾪듉 ===== */
    .youtube-views-btns {
        display: flex;
        flex-wrap: wrap;
        gap: 0.25rem;
        margin-top: 0.375rem;
    }

    .youtube-views-btn {
        padding: 0.25rem 0.5rem;
        background: transparent;
        border: 1px solid var(--border-color);
        border-radius: 4px;
        font-size: 0.65rem;
        color: var(--text-secondary);
        cursor: pointer;
        transition: all 0.2s;
    }

    .youtube-views-btn:hover {
        border-color: #22d3ee;
        color: #22d3ee;
        background: rgba(34, 211, 238, 0.1);
    }

    .youtube-views-btn.active {
        background: #22d3ee;
        border-color: #22d3ee;
        color: #0c1222;
        font-weight: 500;
    }

    /* ===== 寃€??踰꾪듉 ?곸뿭 (?섎떒 怨좎젙) ===== */
    .youtube-search-actions {
        padding: 0.75rem 1rem;
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        margin-top: auto;
        border-top: 1px solid var(--border-color);
        background: var(--card-bg);
        flex-shrink: 0;
    }

    .youtube-search-btn {
        padding: 0.45rem 0.75rem;
        background: linear-gradient(135deg, #e91e63 0%, #ff5722 100%);
        color: white;
        border: none;
        border-radius: 4px;
        font-size: 0.65rem;
        font-weight: 600;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.3rem;
        transition: all 0.2s;
    }

    .youtube-search-btn:hover {
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(233, 30, 99, 0.4);
    }

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

    .youtube-reset-btn {
        padding: 0.35rem 0.6rem;
        background: transparent;
        color: var(--text-secondary);
        border: 1px solid var(--border-color);
        border-radius: 4px;
        font-size: 0.6rem;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.25rem;
        transition: all 0.2s;
    }

    .youtube-reset-btn:hover {
        border-color: var(--text-secondary);
        color: var(--text-primary);
        background: rgba(255, 255, 255, 0.05);
    }

    /* ===== 硫붿씤 肄섑뀗痢??곸뿭 ===== */
    .youtube-main-content {
        flex: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden;
        background: var(--bg-primary);
        min-width: 0;
        width: 100% !important;
        max-width: 100% !important;
        transition: width 0.3s ease, max-width 0.3s ease;
    }

    /* ===== ?곷떒 ?≪뀡 諛?===== */
    .youtube-action-bar {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 0.5rem 1rem !important;
        background: var(--card-bg) !important;
        border-bottom: 1px solid var(--border-color) !important;
        /* ?ъ씠?쒕컮 寃€????낵 ?믪씠 留욎땄 */
        min-height: 44px !important;
    }

    .youtube-result-info {
        display: flex;
        align-items: center;
        gap: 0.75rem;
    }

    .youtube-result-title {
        font-size: 0.75rem;
        font-weight: 600;
        color: var(--text-primary);
    }

    .youtube-result-count-badge {
        background: linear-gradient(135deg, #3b82f6, #2563eb);
        color: white;
        font-size: 0.6rem;
        font-weight: 600;
        padding: 0.2rem 0.5rem;
        border-radius: 10px;
    }

    .youtube-help-btn {
        background: none;
        border: none;
        color: var(--text-secondary);
        cursor: pointer;
        font-size: 1rem;
    }

    .youtube-help-btn:hover {
        color: var(--text-primary);
    }

    /* ?≪뀡 踰꾪듉??- ?덊띁?곗뒪 ?대?吏€ ?ㅽ???*/
    .youtube-action-buttons {
        display: flex;
        gap: 0.5rem;
        align-items: center;
    }

    .youtube-action-btn {
        padding: 0.45rem 0.85rem;
        border: none;
        border-radius: 6px;
        font-size: 0.75rem;
        font-weight: 600;
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: 0.4rem;
        transition: all 0.2s ease;
        white-space: nowrap;
    }

    .youtube-action-btn:hover {
        transform: translateY(-1px);
        filter: brightness(1.1);
    }

    /* 珥덇린??踰꾪듉 */
    .youtube-action-btn.reset {
        background: rgba(107, 114, 128, 0.3);
        border: 1px solid rgba(107, 114, 128, 0.5);
        color: #9ca3af;
    }

    .youtube-action-btn.reset:hover {
        background: rgba(107, 114, 128, 0.5);
        color: #d1d5db;
    }

    /* 寃쎌웳 梨꾨꼸 遺꾩꽍 踰꾪듉 - 鍮④컙??*/
    .youtube-action-btn.competitive {
        background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
        color: white;
        box-shadow: 0 2px 8px rgba(220, 38, 38, 0.4);
    }

    .youtube-action-btn.competitive:hover {
        background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
        box-shadow: 0 4px 12px rgba(220, 38, 38, 0.5);
    }

    /* ?몃젋???쒖튂 踰꾪듉 - ?몃???二쇳솴??*/
    .youtube-action-btn.trend {
        background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
        color: white;
        box-shadow: 0 2px 8px rgba(245, 158, 11, 0.4);
    }

    .youtube-action-btn.trend:hover {
        background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
        box-shadow: 0 4px 12px rgba(245, 158, 11, 0.5);
    }

    /* Excel ?ㅼ슫濡쒕뱶 踰꾪듉 - 珥덈줉??*/
    .youtube-action-btn.excel {
        background: linear-gradient(135deg, #10b981 0%, #059669 100%);
        color: white;
        box-shadow: 0 2px 8px rgba(16, 185, 129, 0.4);
    }

    .youtube-action-btn.excel:hover {
        background: linear-gradient(135deg, #34d399 0%, #10b981 100%);
        box-shadow: 0 4px 12px rgba(16, 185, 129, 0.5);
    }

    /* ===== 寃곌낵 而⑦뀒?대꼫 ===== */
    .youtube-results-container {
        flex: 1;
        display: flex;
        flex-direction: column;
        background: var(--card-bg);
        border: 1px solid var(--border-color);
        border-radius: 12px;
        padding: 0 !important;
        margin: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        max-height: calc(100vh - 260px);
        overflow: hidden;
    }

    /* ===== ?뚮젅?댁뒪?€??===== */
    .youtube-results-placeholder {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 100%;
        color: var(--text-secondary);
        text-align: center;
        padding: 2rem;
    }

    .youtube-results-placeholder i {
        font-size: 3rem;
        color: var(--text-secondary);
        opacity: 0.5;
        margin-bottom: 1rem;
    }

    .youtube-results-placeholder h3 {
        margin: 0 0 0.5rem;
        color: var(--text-primary);
        font-size: 1.1rem;
    }

    .youtube-results-placeholder p {
        margin: 0;
        font-size: 0.85rem;
    }

    /* ===== 寃곌낵 ?뚯씠釉?===== */
    .youtube-results-table-wrapper {
        overflow-x: auto;
        overflow-y: auto;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        transition: width 0.3s ease, max-width 0.3s ease;
        padding: 0 !important;
        margin: 0 !important;
    }

    .youtube-results-table {
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        table-layout: fixed !important;
        border-collapse: separate !important;
        border-spacing: 0.25rem 0.25rem !important;
        margin: 0 !important;
        padding: 0 !important;
        display: table !important;
    }

    .youtube-results-table thead,
    .youtube-results-table tbody {
        display: table-row-group !important;
    }

    .youtube-results-table tr {
        display: table-row !important;
    }

    .youtube-results-table th,
    .youtube-results-table td {
        display: table-cell !important;
    }

    .youtube-results-table thead {
        background: rgba(15, 23, 42, 0.95);
        position: sticky;
        top: 0;
        z-index: 10;
    }

    .youtube-results-table th {
        padding: 0.75rem 0.6rem;
        text-align: left;
        font-weight: 600;
        color: #94a3b8;
        border-bottom: 2px solid rgba(100, 116, 139, 0.3);
        white-space: nowrap;
        font-size: 0.75rem !important;
        line-height: 1.4 !important;
        background: rgba(15, 23, 42, 0.95);
        border-right: 1px solid rgba(100, 116, 139, 0.15);
        text-transform: none;
        letter-spacing: 0;
    }

    .youtube-results-table th:not(:last-child) {
        border-right: 1px solid rgba(100, 116, 139, 0.15);
    }

    /* ??援ъ껜?곸씤 ?좏깮?먮줈 媛뺤젣 ?곸슜 */
    table.youtube-results-table thead th,
    .youtube-results-table thead tr th,
    .youtube-results-table thead th,
    .youtube-results-table th.col-num,
    .youtube-results-table th.col-thumbnail,
    .youtube-results-table th.col-channel,
    .youtube-results-table th.col-title,
    .youtube-results-table th.col-date,
    .youtube-results-table th.col-subs,
    .youtube-results-table th.col-views,
    .youtube-results-table th.col-vph,
    .youtube-results-table th.col-performance,
    .youtube-results-table th.col-cii,
    .youtube-results-table th.col-revenue,
    .youtube-results-table th.col-duration,
    .youtube-results-table th.col-likes,
    .youtube-results-table th.col-comments,
    .youtube-results-table th.col-engagement,
    .youtube-results-table th.col-actions {
        font-size: 0.8rem !important;
        line-height: 1.4 !important;
    }

    .youtube-results-table th.sortable {
        cursor: pointer;
        user-select: none;
    }

    .youtube-results-table th.sortable:hover {
        color: var(--text-primary);
    }

    .youtube-results-table th i {
        margin-left: 0.25rem;
        font-size: 0.55rem;
    }

    .youtube-results-table td {
        padding: 0.65rem 0.6rem;
        border-bottom: 1px solid rgba(100, 116, 139, 0.15);
        vertical-align: middle;
        font-size: 0.75rem !important;
        line-height: 1.4 !important;
        background: transparent;
        border-right: 1px solid rgba(100, 116, 139, 0.08);
        color: #e2e8f0;
    }

    .youtube-results-table td:not(:last-child) {
        border-right: 1px solid rgba(100, 116, 139, 0.08);
    }

    .youtube-results-table tbody tr {
        margin-bottom: 0;
        transition: background-color 0.15s ease;
    }

    /* ??援ъ껜?곸씤 ?좏깮?먮줈 媛뺤젣 ?곸슜 */
    .youtube-results-table tbody td,
    .youtube-results-table td.col-num,
    .youtube-results-table td.col-thumbnail,
    .youtube-results-table td.col-channel,
    .youtube-results-table td.col-title,
    .youtube-results-table td.col-date,
    .youtube-results-table td.col-subs,
    .youtube-results-table td.col-views,
    .youtube-results-table td.col-vph,
    .youtube-results-table td.col-performance,
    .youtube-results-table td.col-cii,
    .youtube-results-table td.col-revenue,
    .youtube-results-table td.col-duration,
    .youtube-results-table td.col-likes,
    .youtube-results-table td.col-comments,
    .youtube-results-table td.col-engagement,
    .youtube-results-table td.col-actions {
        font-size: 0.8rem !important;
        line-height: 1.4 !important;
    }

    .youtube-results-table tbody tr:hover {
        background: rgba(59, 130, 246, 0.08);
    }

    .youtube-results-table tbody tr:hover td {
        color: #f1f5f9;
    }

    /* ?뚯씠釉?而щ읆 ?덈퉬 - 諛섏쓳??*/
    .col-num {
        width: 2.5%;
        min-width: 30px;
        text-align: center;
    }

    .col-thumbnail {
        width: 7%;
        min-width: 90px;
    }

    .col-channel {
        width: 8%;
        min-width: 80px;
    }

    .col-title {
        width: 12%;
        min-width: 100px;
    }

    .col-date {
        width: 6%;
        min-width: 60px;
    }

    .col-subs {
        width: 6%;
        min-width: 55px;
    }

    .col-views {
        width: 6%;
        min-width: 55px;
    }

    .col-vph {
        width: 7%;
        min-width: 60px;
    }

    .col-performance {
        width: 6%;
        min-width: 55px;
    }

    .col-cii {
        width: 5%;
        min-width: 50px;
    }

    .col-revenue {
        width: 6%;
        min-width: 55px;
        color: #fbbf24;
    }

    .col-duration {
        width: 5%;
        min-width: 45px;
    }

    .col-likes {
        width: 5%;
        min-width: 45px;
    }

    .col-comments {
        width: 5%;
        min-width: 40px;
    }

    .col-engagement {
        width: 5%;
        min-width: 45px;
    }

    .col-actions {
        width: 8%;
        min-width: 75px;
    }

    /* ===== ?몃꽕??===== */
    .video-thumbnail-cell {
        position: relative;
    }

    .video-thumbnail {
        width: 110px;
        height: 62px;
        object-fit: cover;
        border-radius: 4px;
        cursor: pointer;
        transition: transform 0.2s;
    }

    .video-thumbnail:hover {
        transform: scale(1.05);
    }

    .video-duration-badge {
        position: absolute;
        bottom: 3px;
        right: 3px;
        background: rgba(0, 0, 0, 0.85);
        color: white;
        font-size: 0.55rem;
        padding: 2px 4px;
        border-radius: 2px;
    }

    .video-type-badge {
        position: absolute;
        top: 3px;
        left: 3px;
        background: #f97316;
        color: white;
        font-size: 0.5rem;
        padding: 2px 4px;
        border-radius: 2px;
        font-weight: 600;
    }

    /* ===== 梨꾨꼸 ?€ ===== */
    .channel-cell {
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
    }

    .channel-name {
        font-weight: 500;
        color: white !important;
        text-decoration: none;
        font-size: 0.75rem;
    }

    .channel-name:hover {
        color: #e0e0e0 !important;
        text-decoration: underline;
    }

    .channel-handle {
        font-size: 0.55rem;
        color: var(--text-secondary);
    }

    .channel-btns {
        display: flex;
        gap: 0.25rem;
        margin-top: 0.25rem;
    }

    .channel-mini-btn {
        padding: 2px 6px;
        font-size: 0.65rem;
        border-radius: 3px;
        border: none;
        cursor: pointer;
        transition: all 0.2s;
    }

    .channel-mini-btn.shorts {
        background: #f97316;
        color: white;
    }

    .channel-mini-btn.download {
        background: #3b82f6;
        color: white;
    }

    .channel-mini-btn.copy {
        background: var(--bg-secondary);
        color: var(--text-secondary);
        border: 1px solid var(--border-color);
    }

    /* ===== ?쒕ぉ ?€ ===== */
    .video-title-cell {
        max-width: 140px;
        min-width: 100px;
    }

    .video-title {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        font-weight: 400;
        color: white !important;
        text-decoration: none;
        font-size: 0.75rem;
        line-height: 1.4;
        word-break: break-word;
    }

    .video-title:hover {
        color: #e0e0e0 !important;
        text-decoration: underline;
    }

    /* ===== CII 諛곗? - ?덊띁?곗뒪 ?ㅽ???===== */
    .cii-badge {
        padding: 0.25rem 0.6rem;
        border-radius: 5px;
        font-size: 0.65rem;
        font-weight: 700;
        display: inline-block;
        text-transform: capitalize;
        letter-spacing: 0.3px;
    }

    .cii-excellent {
        background: #22c55e;
        color: white;
    }

    .cii-good {
        background: #3b82f6;
        color: white;
    }

    .cii-average {
        background: #f59e0b;
        color: white;
    }

    .cii-low {
        background: #ef4444;
        color: white;
    }

    /* ===== 湲곕뒫 踰꾪듉 (?몃줈 1??諛곗튂 - ?덊띁?곗뒪 ?ㅽ??? ===== */
    .action-buttons-vertical {
        display: flex !important;
        flex-direction: column !important;
        gap: 3px !important;
        min-width: 50px;
        max-width: 55px;
    }

    /* 비디오 액션 버튼 (정보/댓글/분석/자막) - 기존 */
    .video-action-btn {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        padding: 0.25rem 0.4rem !important;
        margin-bottom: 0 !important;
        border: none !important;
        border-radius: 4px !important;
        font-size: 0.6rem !important;
        font-weight: 600 !important;
        cursor: pointer !important;
        transition: all 0.15s ease !important;
        white-space: nowrap !important;
        text-align: center !important;
        white-space: nowrap !important;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
        text-decoration: none !important;
    }

    .video-action-btn:last-child {
        margin-bottom: 0 !important;
    }

    .video-action-btn.info {
        background: linear-gradient(135deg, #3b82f6, #2563eb) !important;
        color: white !important;
    }

    .video-action-btn.info:hover {
        background: linear-gradient(135deg, #2563eb, #1d4ed8) !important;
        transform: translateY(-1px) !important;
        box-shadow: 0 4px 8px rgba(59, 130, 246, 0.4) !important;
    }

    .video-action-btn.comments {
        background: linear-gradient(135deg, #f97316, #ea580c) !important;
        color: white !important;
    }

    .video-action-btn.comments:hover {
        background: linear-gradient(135deg, #ea580c, #c2410c) !important;
        transform: translateY(-1px) !important;
        box-shadow: 0 4px 8px rgba(249, 115, 22, 0.4) !important;
    }

    .video-action-btn.analysis {
        background: linear-gradient(135deg, #8b5cf6, #7c3aed) !important;
        color: white !important;
    }

    .video-action-btn.analysis:hover {
        background: linear-gradient(135deg, #7c3aed, #6d28d9) !important;
        transform: translateY(-1px) !important;
        box-shadow: 0 4px 8px rgba(139, 92, 246, 0.4) !important;
    }

    .video-action-btn.transcript {
        background: linear-gradient(135deg, #22c55e, #16a34a) !important;
        color: white !important;
    }

    .video-action-btn.transcript:hover {
        background: linear-gradient(135deg, #16a34a, #15803d) !important;
        transform: translateY(-1px) !important;
        box-shadow: 0 4px 8px rgba(34, 197, 94, 0.4) !important;
    }

/* YouTube 분석 테이블 액션 버튼 - 엑셀 다운로드 스타일 (빨간색) */
/* 브라우저 기본 버튼 스타일 완전 초기화 */
button.yt-action-btn,
.yt-action-btn {
    /* 브라우저 기본 스타일 초기화 */
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    outline: none !important;
    
    /* 레이아웃 */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0.5rem 0.75rem !important;
    width: 100% !important;
    min-width: 42px !important;
    min-height: 32px !important;
    box-sizing: border-box !important;
    
    /* 텍스트 */
    font-family: inherit !important;
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    white-space: nowrap !important;
    text-decoration: none !important;
    text-align: center !important;
    
    /* 시각 효과 */
    border-radius: 8px !important;
    cursor: pointer !important;
    transition: all 0.25s ease !important;
    
    /* 색상 - 어두운 배경 + 빨간 글로우 */
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%) !important;
    border: 1px solid rgba(204, 0, 0, 0.6) !important;
    box-shadow: 0 0 12px rgba(204, 0, 0, 0.4), 0 2px 4px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.1) !important;
    color: #ff6b6b !important;
}

button.yt-action-btn:hover,
.yt-action-btn:hover {
    transform: translateY(-2px) scale(1.02) !important;
    box-shadow: 0 0 20px rgba(204, 0, 0, 0.6), 0 4px 8px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.15) !important;
    border-color: #CC0000 !important;
    color: #ff9999 !important;
    background: linear-gradient(135deg, #1f1f35 0%, #1a2744 100%) !important;
}

button.yt-action-btn:active,
.yt-action-btn:active {
    transform: translateY(0) scale(0.98) !important;
}

button.yt-action-btn:focus,
.yt-action-btn:focus {
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(204, 0, 0, 0.3), 0 0 12px rgba(204, 0, 0, 0.4) !important;
}

/* 스피너 애니메이션 */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* 정보 버튼 - 빨간색 */
button.yt-btn-info,
.yt-action-btn.yt-btn-info,
.yt-btn-info {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%) !important;
    border: 1px solid rgba(204, 0, 0, 0.7) !important;
    box-shadow: 0 0 12px rgba(204, 0, 0, 0.4), 0 2px 4px rgba(0,0,0,0.3) !important;
    color: #ff6b6b !important;
}
button.yt-btn-info:hover,
.yt-action-btn.yt-btn-info:hover,
.yt-btn-info:hover {
    border-color: #CC0000 !important;
    box-shadow: 0 0 20px rgba(204, 0, 0, 0.6), 0 4px 8px rgba(0,0,0,0.4) !important;
    color: #ff9999 !important;
    background: linear-gradient(135deg, #1f1f35 0%, #1a2744 100%) !important;
}

/* 댓글 버튼 - 주황빨간색 */
button.yt-btn-comment,
.yt-action-btn.yt-btn-comment,
.yt-btn-comment {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%) !important;
    border: 1px solid rgba(229, 45, 39, 0.7) !important;
    box-shadow: 0 0 12px rgba(229, 45, 39, 0.4), 0 2px 4px rgba(0,0,0,0.3) !important;
    color: #ff7b75 !important;
}
button.yt-btn-comment:hover,
.yt-action-btn.yt-btn-comment:hover,
.yt-btn-comment:hover {
    border-color: #E52D27 !important;
    box-shadow: 0 0 20px rgba(229, 45, 39, 0.6), 0 4px 8px rgba(0,0,0,0.4) !important;
    color: #ffa5a0 !important;
    background: linear-gradient(135deg, #1f1f35 0%, #1a2744 100%) !important;
}

/* 분석 버튼 - 진한 빨간색 */
button.yt-btn-analysis,
.yt-action-btn.yt-btn-analysis,
.yt-btn-analysis {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%) !important;
    border: 1px solid rgba(183, 28, 28, 0.7) !important;
    box-shadow: 0 0 12px rgba(183, 28, 28, 0.4), 0 2px 4px rgba(0,0,0,0.3) !important;
    color: #e57373 !important;
}
button.yt-btn-analysis:hover,
.yt-action-btn.yt-btn-analysis:hover,
.yt-btn-analysis:hover {
    border-color: #B71C1C !important;
    box-shadow: 0 0 20px rgba(183, 28, 28, 0.6), 0 4px 8px rgba(0,0,0,0.4) !important;
    color: #ef9a9a !important;
    background: linear-gradient(135deg, #1f1f35 0%, #1a2744 100%) !important;
}

/* 자막 버튼 - 핑크색 */
button.yt-btn-transcript,
.yt-action-btn.yt-btn-transcript,
.yt-btn-transcript {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%) !important;
    border: 1px solid rgba(236, 72, 153, 0.7) !important;
    box-shadow: 0 0 12px rgba(236, 72, 153, 0.4), 0 2px 4px rgba(0,0,0,0.3) !important;
    color: #f48fb1 !important;
}
button.yt-btn-transcript:hover,
.yt-action-btn.yt-btn-transcript:hover,
.yt-btn-transcript:hover {
    border-color: #ec4899 !important;
    box-shadow: 0 0 20px rgba(236, 72, 153, 0.6), 0 4px 8px rgba(0,0,0,0.4) !important;
    color: #f8bbd9 !important;
    background: linear-gradient(135deg, #1f1f35 0%, #1a2744 100%) !important;
}

/* YouTube 분석 페이지네이션 컨테이너 */
.yt-pagination-container {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 1.5rem !important;
    padding: 1.25rem 2rem !important;
    background: var(--bg-card) !important;
    border-radius: 10px !important;
    margin: 1.5rem auto !important;
    max-width: 400px !important;
    border: 1px solid var(--border-color) !important;
}

/* 페이지네이션 텍스트 스타일 (<<, <, >, >>) */
.yt-page-text {
    color: #CC0000 !important;
    font-size: 1.2rem !important;
    font-weight: 800 !important;
    cursor: pointer !important;
    padding: 0.5rem 0.75rem !important;
    transition: all 0.2s ease !important;
    user-select: none !important;
    border-radius: 6px !important;
    background: rgba(204, 0, 0, 0.05) !important;
}

.yt-page-text:hover {
    color: #ff4444 !important;
    background: rgba(204, 0, 0, 0.15) !important;
    text-shadow: 0 0 10px rgba(204, 0, 0, 0.6) !important;
}

/* 페이지 정보 텍스트 */
.yt-page-info-text {
    color: #CC0000 !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    padding: 0.5rem 1rem !important;
    background: rgba(204, 0, 0, 0.08) !important;
    border-radius: 6px !important;
    border: 1px solid rgba(204, 0, 0, 0.2) !important;
}

/* 페이지 정보 텍스트 (기존 ID 선택자) */
#youtube-page-info {
    color: #CC0000 !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
}

/* ============================================
   YouTube 분석 모달 버튼 스타일
   ============================================ */
.yt-modal-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem !important;
    padding: 0.6rem 1.25rem !important;
    border-radius: 8px !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.25s ease !important;
    white-space: nowrap !important;
    text-decoration: none !important;
    border: 1px solid transparent !important;
}

.yt-modal-btn-primary {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%) !important;
    border: 1px solid rgba(204, 0, 0, 0.6) !important;
    box-shadow: 0 0 15px rgba(204, 0, 0, 0.4), 0 2px 6px rgba(0,0,0,0.3) !important;
    color: #ff6b6b !important;
}
.yt-modal-btn-primary:hover {
    border-color: #CC0000 !important;
    box-shadow: 0 0 25px rgba(204, 0, 0, 0.6), 0 4px 10px rgba(0,0,0,0.4) !important;
    color: #ff9999 !important;
    transform: translateY(-2px) !important;
}

.yt-modal-btn-secondary {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%) !important;
    border: 1px solid rgba(34, 197, 94, 0.6) !important;
    box-shadow: 0 0 15px rgba(34, 197, 94, 0.3), 0 2px 6px rgba(0,0,0,0.3) !important;
    color: #4ade80 !important;
}
.yt-modal-btn-secondary:hover {
    border-color: #22c55e !important;
    box-shadow: 0 0 25px rgba(34, 197, 94, 0.5), 0 4px 10px rgba(0,0,0,0.4) !important;
    color: #86efac !important;
    transform: translateY(-2px) !important;
}

/* 분석 모달 내부 버튼들 */
.analysis-tab-content .yt-action-btn {
    min-height: 28px !important;
    font-size: 0.75rem !important;
    padding: 0.35rem 0.5rem !important;
}

/* 레거시 ID 선택자 (기존 호환) */
#youtube-page-info-legacy {
    color: #CC0000;
    font-size: 0.95rem;
    font-weight: 600;
    padding: 0.3rem 0.75rem;
}

/* 기존 스타일 (호환성 유지) */
.yt-page-btn-old {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
}

.yt-page-btn:hover {
    background: rgba(204, 0, 0, 0.1);
    border-color: #CC0000;
    color: #CC0000;
}

.yt-page-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* YouTube 테이블 정렬 헤더 스타일 */
#youtube-data-table th[onclick] {
    cursor: pointer;
    user-select: none;
}

#youtube-data-table th[onclick]:hover {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-primary);
}

    /* ===== 濡쒕뵫 ===== */
    .youtube-loading {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 3rem;
        color: var(--text-secondary);
    }

    .youtube-loading .loading-spinner {
        width: 40px;
        height: 40px;
        border: 3px solid var(--border-color);
        border-top-color: #e91e63;
        border-radius: 50%;
        animation: spin 0.8s linear infinite;
        margin-bottom: 1rem;
    }

    /* ===== ?섏씠吏€?ㅼ씠??===== */
    .youtube-pagination {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 1rem;
        background: var(--card-bg);
        border-top: 1px solid var(--border-color);
    }

    .youtube-load-more-btn {
        padding: 0.75rem 2rem;
        background: var(--bg-secondary);
        border: 1px solid var(--border-color);
        border-radius: 20px;
        color: var(--text-primary);
        font-size: 0.85rem;
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: 0.5rem;
        transition: all 0.2s;
    }

    .youtube-load-more-btn:hover {
        border-color: #e91e63;
        color: #e91e63;
    }

    /* ============================================
   YouTube 紐⑤떖 ?ㅽ???
   ============================================ */

    .youtube-modal-overlay {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        height: 100% !important;
        background: rgba(0, 0, 0, 0.97);
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        z-index: 1000;
        padding: 0 !important;
        margin: 0 !important;
        backdrop-filter: blur(8px);
    }

    .youtube-modal {
        background: #0f0f1a;
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 12px;
        max-width: 1400px;
        width: 90vw;
        max-height: 95vh;
        height: 95vh;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        box-shadow: 0 25px 80px rgba(0, 0, 0, 0.9);
    }

    .youtube-modal.fullscreen-modal {
        max-width: 95vw;
        width: 95vw;
        height: 95vh;
        max-height: 95vh;
    }

    .youtube-modal .modal-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 1.25rem 1.5rem;
        border-bottom: 1px solid var(--border-color);
        background: rgba(0, 0, 0, 0.2);
    }

    .youtube-modal .modal-title {
        margin: 0;
        font-size: 1.1rem;
        font-weight: 600;
        color: var(--text-primary);
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .youtube-modal .modal-title i {
        color: #e91e63;
    }

    .youtube-modal .modal-close {
        background: none;
        border: none;
        font-size: 1.5rem;
        color: var(--text-secondary);
        cursor: pointer;
        padding: 0.25rem 0.5rem;
        transition: color 0.2s;
    }

    .youtube-modal .modal-close:hover {
        color: var(--text-primary);
    }

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

    .youtube-modal .modal-desc {
        color: var(--text-secondary);
        font-size: 0.85rem;
        margin-bottom: 1.5rem;
        line-height: 1.5;
    }

    .youtube-modal .modal-footer {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 0.75rem;
        padding: 1rem 1.5rem;
        border-top: 1px solid var(--border-color);
        background: rgba(0, 0, 0, 0.2);
    }

    /* 紐⑤떖 踰꾪듉 */
    .youtube-modal .btn {
        padding: 0.625rem 1.25rem;
        border-radius: 6px;
        font-size: 0.85rem;
        font-weight: 500;
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: 0.5rem;
        transition: all 0.2s;
    }

    .youtube-modal .btn-secondary {
        background: rgba(255, 255, 255, 0.08);
        border: 1px solid rgba(255, 255, 255, 0.15);
        color: var(--text-primary);
        font-size: 0.6rem;
        padding: 0.4rem 0.8rem;
        border-radius: 4px;
        font-weight: 600;
        transition: all 0.2s ease;
    }

    .youtube-modal .btn-secondary:hover {
        background: rgba(255, 255, 255, 0.12);
        border-color: rgba(255, 255, 255, 0.25);
        transform: translateY(-1px);
    }

    .youtube-modal .btn-primary {
        background: linear-gradient(135deg, #e91e63, #c2185b);
        border: none;
        color: white;
        font-size: 0.6rem;
        padding: 0.4rem 0.8rem;
        border-radius: 4px;
        font-weight: 600;
        transition: all 0.2s ease;
    }

    .youtube-modal .btn-primary:hover {
        background: linear-gradient(135deg, #f06292, #e91e63);
        transform: translateY(-1px);
        box-shadow: 0 2px 8px rgba(233, 30, 99, 0.4);
    }

    /* ===== 梨꾨꼸 遺꾩꽍 紐⑤떖 ===== */
    .channel-analysis-modal .modal-body {
        padding: 0;
    }

    .channel-analysis-content {
        display: flex;
        flex-direction: column;
        height: 100%;
    }

    /* 梨꾨꼸 ?뺣낫 ?ㅻ뜑 */
    .channel-info-header {
        display: flex;
        align-items: center;
        gap: 0.85rem;
        padding: 1rem;
        background: rgba(0, 0, 0, 0.25);
        border-bottom: 1px solid var(--border-color);
    }

    .channel-avatar {
        width: 48px;
        height: 48px;
        border-radius: 50%;
        object-fit: cover;
        border: 2px solid rgba(255, 255, 255, 0.1);
    }

    .channel-details {
        flex: 1;
    }

    .channel-details h2 {
        margin: 0 0 0.25rem;
        font-size: 0.85rem;
        font-weight: 600;
        color: var(--text-primary);
    }

    .channel-stats {
        color: var(--text-secondary);
        font-size: 0.6rem;
    }

    .channel-actions {
        display: flex;
        gap: 0.5rem;
    }

    /* 遺꾩꽍 ??*/
    .analysis-tabs {
        display: flex;
        gap: 0;
        padding: 0 1rem;
        border-bottom: 1px solid var(--border-color);
        background: rgba(0, 0, 0, 0.15);
    }

    .analysis-tab {
        padding: 0.6rem 1rem;
        background: transparent;
        border: none;
        border-bottom: 2px solid transparent;
        color: var(--text-secondary);
        font-size: 0.65rem;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.2s;
    }

    .analysis-tab:hover {
        color: var(--text-primary);
    }

    .analysis-tab.active {
        color: #e91e63;
        border-bottom-color: #e91e63;
    }

    /* 遺꾩꽍 ??肄섑뀗痢?*/
    .analysis-tab-content {
        display: none;
        padding: 1rem;
        overflow-y: auto;
    }

    .analysis-tab-content.active {
        display: block;
    }

    /* ?듦퀎 洹몃━??*/
    .stats-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: 0.75rem;
        margin-bottom: 1rem;
    }

    .stat-card {
        background: rgba(0, 0, 0, 0.25);
        border: 1px solid rgba(255, 255, 255, 0.06);
        border-radius: 8px;
        padding: 0.85rem;
        text-align: center;
    }

    .stat-label {
        display: block;
        font-size: 0.55rem;
        color: var(--text-secondary);
        margin-bottom: 0.35rem;
        text-transform: uppercase;
        letter-spacing: 0.3px;
    }

    .stat-value {
        display: block;
        font-size: 1rem;
        font-weight: 700;
        color: var(--text-primary);
    }

    /* 遺꾩꽍 ?뱀뀡 */
    .analysis-section {
        margin-bottom: 1rem;
        background: rgba(0, 0, 0, 0.2);
        border-radius: 8px;
        padding: 0.85rem;
        border: 1px solid rgba(255, 255, 255, 0.05);
    }

    .analysis-section h4 {
        margin: 0 0 0.6rem;
        font-size: 0.7rem;
        font-weight: 600;
        color: var(--text-primary);
        display: flex;
        align-items: center;
        gap: 0.4rem;
    }

    /* Top 5 由ъ뒪??*/
    .top5-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 1rem;
    }

    .top5-card {
        background: rgba(0, 0, 0, 0.2);
        border: 1px solid var(--border-color);
        border-radius: 10px;
        padding: 1rem;
    }

    .top5-card h5 {
        margin: 0 0 0.75rem;
        font-size: 0.9rem;
        font-weight: 600;
        color: var(--text-primary);
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .top5-list {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .top5-list li {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.5rem 0;
        border-bottom: 1px solid var(--border-color);
        font-size: 0.8rem;
    }

    .top5-list li:last-child {
        border-bottom: none;
    }

    .top5-rank {
        width: 20px;
        font-weight: 600;
        color: #e91e63;
    }

    .top5-title {
        flex: 1;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        color: var(--text-primary);
    }

    .top5-value {
        font-weight: 600;
        color: var(--text-secondary);
    }

    /* ?쒓컙?€ 李⑦듃 */
    .hourly-chart {
        display: flex;
        align-items: flex-end;
        height: 150px;
        gap: 2px;
        padding: 1rem;
        background: rgba(0, 0, 0, 0.2);
        border-radius: 10px;
    }

    .hourly-bar {
        flex: 1;
        background: #3b82f6;
        border-radius: 2px 2px 0 0;
        transition: all 0.2s;
        min-height: 2px;
    }

    .hourly-bar:hover {
        background: #60a5fa;
    }

    /* ?쒕룞 ?⑦꽩 */
    .activity-pattern {
        background: rgba(0, 0, 0, 0.2);
        border-radius: 10px;
        padding: 1rem;
    }

    .activity-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0.75rem 0;
        border-bottom: 1px solid var(--border-color);
    }

    .activity-item:last-child {
        border-bottom: none;
    }

    .activity-label {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        color: var(--text-secondary);
        font-size: 0.85rem;
    }

    .activity-value {
        font-weight: 600;
        color: var(--text-primary);
    }

    /* 肄섑뀗痢??좏삎 鍮꾧탳 */
    .content-type-comparison {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }

    .content-type-card {
        background: rgba(0, 0, 0, 0.3);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 8px;
        padding: 1rem;
    }

    .content-type-card h5 {
        margin: 0 0 0.75rem;
        font-size: 0.7rem;
        font-weight: 600;
        display: flex;
        align-items: center;
        gap: 0.4rem;
        padding-bottom: 0.5rem;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    }

    .content-type-card h5 .dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
    }

    .content-type-card h5 .dot.longform {
        background: #3b82f6;
    }

    .content-type-card h5 .dot.shorts {
        background: #f97316;
    }

    .content-type-stat {
        display: flex;
        justify-content: space-between;
        padding: 0.3rem 0;
        font-size: 0.65rem;
        border-bottom: 1px solid rgba(255, 255, 255, 0.03);
    }

    .content-type-stat:last-child {
        border-bottom: none;
    }

    .content-type-stat .label {
        color: var(--text-secondary);
    }

    .content-type-stat .value {
        font-weight: 600;
        color: var(--text-primary);
    }

    /* ?곸긽 紐⑸줉 ?뚯씠釉?*/
    .video-list-filters {
        display: flex;
        gap: 0.5rem;
        margin-bottom: 1rem;
    }

    .video-list-filter-btn {
        padding: 0.35rem 0.75rem;
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 4px;
        font-size: 0.6rem;
        font-weight: 600;
        color: var(--text-secondary);
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: 0.3rem;
        transition: all 0.2s ease;
    }

    .video-list-filter-btn:hover {
        background: rgba(255, 255, 255, 0.1);
        border-color: rgba(255, 255, 255, 0.2);
    }

    .video-list-filter-btn .dot {
        width: 5px;
        height: 5px;
        border-radius: 50%;
    }

    .video-list-filter-btn .dot.longform {
        background: #3b82f6;
    }

    .video-list-filter-btn .dot.shorts {
        background: #f97316;
    }

    .video-list-filter-btn.active {
        background: linear-gradient(135deg, rgba(59, 130, 246, 0.3), rgba(59, 130, 246, 0.15));
        border-color: #3b82f6;
        color: #60a5fa;
        box-shadow: 0 2px 8px rgba(59, 130, 246, 0.25);
    }

    .videos-table {
        width: 100%;
        border-collapse: collapse;
        font-size: 0.6rem;
    }

    .videos-table th {
        padding: 0.5rem;
        text-align: left;
        font-weight: 600;
        color: var(--text-secondary);
        background: rgba(0, 0, 0, 0.3);
        border-bottom: 1px solid var(--border-color);
        font-size: 0.55rem;
    }

    .videos-table td {
        padding: 0.5rem;
        border-bottom: 1px solid var(--border-color);
    }

    .videos-table tbody tr:hover {
        background: rgba(255, 255, 255, 0.03);
    }

    /* 李몄뿬??遺꾩꽍 */
    .engagement-summary {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 0.6rem;
        margin-bottom: 1rem;
    }

    .engagement-card {
        background: rgba(0, 0, 0, 0.3);
        border: 1px solid rgba(255, 255, 255, 0.06);
        border-radius: 8px;
        padding: 0.85rem;
        text-align: center;
    }

    .engagement-card .label {
        display: block;
        font-size: 0.55rem;
        color: var(--text-secondary);
        margin-bottom: 0.35rem;
        text-transform: uppercase;
    }

    .engagement-card .value {
        display: block;
        font-size: 1.1rem;
        font-weight: 700;
        color: var(--text-primary);
    }

    .engagement-card .sub {
        display: block;
        font-size: 0.7rem;
        color: var(--text-secondary);
        margin-top: 0.25rem;
    }

    /* ?곗젏??諛?諛?李⑦듃 ?곸뿭 */
    .chart-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1rem;
        margin-bottom: 1.5rem;
    }

    .chart-card {
        background: linear-gradient(180deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.2) 100%);
        border: 1px solid rgba(255, 255, 255, 0.06);
        border-radius: 8px;
        padding: 0.85rem;
        position: relative;
        overflow: hidden;
    }

    .chart-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 1px;
        background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.3), transparent);
    }

    .chart-card h5 {
        margin: 0 0 0.6rem;
        font-size: 0.65rem;
        font-weight: 600;
        color: var(--text-primary);
    }

    /* ?몃젋??紐⑤떖 */
    .trend-modal {
        max-width: 500px;
    }

    /* 寃쎌웳 遺꾩꽍 紐⑤떖 */
    .competitive-modal .channel-inputs {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        margin-bottom: 1.5rem;
    }

    .competitive-modal .input-row {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }

    .competitive-modal .input-row label {
        font-size: 0.85rem;
        font-weight: 500;
        color: var(--text-secondary);
    }

    .competitive-modal .input-row input {
        padding: 0.875rem 1rem;
        background: var(--bg-secondary);
        border: 1px solid var(--border-color);
        border-radius: 8px;
        color: var(--text-primary);
        font-size: 0.9rem;
    }

    .competitive-modal .input-row input:focus {
        outline: none;
        border-color: #e91e63;
    }

    .competitive-modal .form-desc {
        color: var(--text-secondary);
        font-size: 0.85rem;
        margin-bottom: 1.5rem;
        text-align: center;
    }

    .competitive-modal .btn-lg {
        padding: 1rem 2rem;
        font-size: 1rem;
        width: 100%;
        justify-content: center;
    }

    /* 濡쒕뵫/?먮윭 ?곹깭 */
    .analysis-loading,
    .analysis-error,
    .analysis-empty {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 4rem 2rem;
        text-align: center;
    }

    .analysis-loading .loading-spinner {
        width: 50px;
        height: 50px;
        border: 3px solid var(--border-color);
        border-top-color: #e91e63;
        border-radius: 50%;
        animation: spin 0.8s linear infinite;
        margin-bottom: 1.5rem;
    }

    .analysis-error i,
    .analysis-empty i {
        font-size: 3rem;
        color: #ef4444;
        margin-bottom: 1rem;
    }

    .analysis-empty i {
        color: var(--text-secondary);
    }

    .analysis-error h3,
    .analysis-empty h3 {
        margin: 0 0 0.5rem;
        font-size: 1.1rem;
        color: var(--text-primary);
    }

    .analysis-error p,
    .analysis-empty p {
        margin: 0;
        color: var(--text-secondary);
        font-size: 0.9rem;
    }

    /* ============================================
   YouTube ?쒕굹由ъ삤 ?섏씠吏€ ?ㅽ???
   ============================================ */

    .youtube-scenario-container {
        display: grid;
        grid-template-columns: 350px 1fr;
        height: 100%;
        gap: 0;
    }

    /* ?쒕굹由ъ삤 ?쒖뼱??*/
    .scenario-control-panel {
        background: var(--card-bg);
        border-right: 1px solid var(--border-color);
        overflow-y: auto;
        padding: 0;
    }

    .scenario-panel-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 1rem 1.25rem;
        border-bottom: 1px solid var(--border-color);
        background: linear-gradient(135deg, rgba(255, 0, 0, 0.1) 0%, transparent 100%);
    }

    .scenario-panel-header h3 {
        margin: 0;
        font-size: 1rem;
        font-weight: 600;
        color: var(--youtube-primary);
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .text-btn {
        background: none;
        border: none;
        font-size: 0.8rem;
        color: var(--text-secondary);
        cursor: pointer;
        transition: color 0.2s;
    }

    .text-btn.danger:hover {
        color: #ef4444;
    }

    /* ?쒕굹由ъ삤 ?ㅽ뀦 */
    .scenario-step {
        padding: 1rem 1.25rem;
        border-bottom: 1px solid var(--border-color);
    }

    .scenario-step.hidden {
        display: none;
    }

    .step-header {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        margin-bottom: 0.875rem;
    }

    .step-number {
        width: 24px;
        height: 24px;
        background: var(--youtube-gradient);
        color: white;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.75rem;
        font-weight: 600;
    }

    .step-title {
        font-size: 0.9rem;
        font-weight: 600;
        color: var(--text-primary);
    }

    /* 紐⑤뜽 ?좏깮 */
    .model-selection {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 0.5rem;
    }

    .model-btn {
        padding: 0.75rem;
        background: var(--bg-secondary);
        border: 1px solid var(--border-color);
        border-radius: 8px;
        text-align: center;
        cursor: pointer;
        transition: all 0.2s;
        position: relative;
    }

    .model-btn:hover:not(.disabled) {
        border-color: var(--youtube-primary);
    }

    .model-btn.active {
        background: rgba(255, 0, 0, 0.1);
        border-color: var(--youtube-primary);
        color: var(--youtube-primary);
    }

    .model-btn.disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }

    .model-name {
        font-size: 0.85rem;
        font-weight: 500;
    }

    .coming-badge {
        display: block;
        font-size: 0.65rem;
        color: var(--text-secondary);
        margin-top: 0.25rem;
    }

    /* 紐⑤뱶 ?좏깮 */
    .mode-selection {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }

    .mode-btn {
        padding: 1rem;
        background: var(--bg-secondary);
        border: 1px solid var(--border-color);
        border-radius: 10px;
        text-align: center;
        cursor: pointer;
        transition: all 0.2s;
    }

    .mode-btn:hover {
        border-color: var(--youtube-primary);
        transform: translateY(-2px);
    }

    .mode-btn.active {
        background: rgba(255, 0, 0, 0.1);
        border-color: var(--youtube-primary);
    }

    .mode-btn i {
        font-size: 1.5rem;
        color: var(--youtube-primary);
        margin-bottom: 0.5rem;
        display: block;
    }

    .mode-name {
        display: block;
        font-size: 0.9rem;
        font-weight: 600;
        color: var(--text-primary);
        margin-bottom: 0.25rem;
    }

    .mode-desc {
        font-size: 0.75rem;
        color: var(--text-secondary);
    }

    /* ?꾩씠?붿뼱 ?낅젰 */
    .idea-input-area {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
    }

    .idea-input-area .form-textarea {
        min-height: 100px;
        resize: vertical;
    }

    /* 而⑥뀎 紐⑸줉 */
    .concept-list {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }

    .concept-btn {
        padding: 0.875rem 1rem;
        background: var(--bg-secondary);
        border: 1px solid var(--border-color);
        border-radius: 8px;
        text-align: left;
        font-size: 0.85rem;
        color: var(--text-primary);
        cursor: pointer;
        transition: all 0.2s;
        line-height: 1.5;
    }

    .concept-btn:hover {
        border-color: var(--youtube-primary);
        background: rgba(255, 0, 0, 0.05);
    }

    .concept-btn.selected {
        background: rgba(255, 0, 0, 0.1);
        border-color: var(--youtube-primary);
        color: var(--youtube-primary);
    }

    /* ???좏깮 */
    .tone-selection {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }

    .tone-btn {
        padding: 0.75rem 1rem;
        background: var(--bg-secondary);
        border: 1px solid var(--border-color);
        border-radius: 8px;
        text-align: left;
        font-size: 0.85rem;
        color: var(--text-primary);
        cursor: pointer;
        transition: all 0.2s;
    }

    .tone-btn:hover {
        border-color: #22c55e;
    }

    .tone-btn.active {
        background: rgba(34, 197, 94, 0.15);
        border-color: #22c55e;
        color: #22c55e;
        font-weight: 500;
    }

    /* ?쒕굹由ъ삤 ?먮윭 */
    .scenario-error {
        margin: 1rem 1.25rem;
        padding: 0.875rem 1rem;
        background: rgba(239, 68, 68, 0.1);
        border-radius: 8px;
        color: #ef4444;
        font-size: 0.85rem;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .scenario-error.hidden {
        display: none;
    }

    /* ?쒕굹由ъ삤 寃곌낵 ?⑤꼸 */
    .scenario-result-panel {
        display: flex;
        flex-direction: column;
        overflow: hidden;
        background: var(--bg-primary);
    }

    /* ?쒕굹由ъ삤 ?뚮젅?댁뒪?€??*/
    .scenario-placeholder {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 100%;
        color: var(--text-secondary);
        text-align: center;
        padding: 2rem;
    }

    .scenario-placeholder i {
        font-size: 4rem;
        color: var(--youtube-primary);
        opacity: 0.3;
        margin-bottom: 1.5rem;
    }

    .scenario-placeholder h3 {
        margin: 0 0 0.5rem;
        color: var(--text-primary);
    }

    /* ?쒕굹由ъ삤 濡쒕뵫 */
    .scenario-loading {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 100%;
        padding: 2rem;
        background: rgba(0, 0, 0, 0.03);
    }

    .scenario-loading.hidden {
        display: none;
    }

    .scenario-loading .loading-spinner {
        width: 48px;
        height: 48px;
        border: 3px solid var(--border-color);
        border-top-color: var(--youtube-primary);
        border-radius: 50%;
        animation: spin 0.8s linear infinite;
        margin-bottom: 1rem;
    }

    /* ?쒕굹由ъ삤 寃곌낵 */
    .scenario-result {
        flex: 1;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    .scenario-result.hidden {
        display: none;
    }

    /* ?쒕굹由ъ삤 ??*/
    .scenario-tabs {
        display: flex;
        padding: 0.75rem 1.5rem;
        gap: 0.5rem;
        background: var(--card-bg);
        border-bottom: 1px solid var(--border-color);
    }

    .scenario-tab {
        padding: 0.625rem 1rem;
        background: transparent;
        border: none;
        border-bottom: 2px solid transparent;
        font-size: 0.9rem;
        font-weight: 500;
        color: var(--text-secondary);
        cursor: pointer;
        transition: all 0.2s;
    }

    .scenario-tab:hover {
        color: var(--youtube-primary);
    }

    .scenario-tab.active {
        color: var(--youtube-primary);
        border-bottom-color: var(--youtube-primary);
    }

    /* ?쒕굹由ъ삤 ??肄섑뀗痢?*/
    .scenario-tab-content {
        display: none;
        flex: 1;
        overflow-y: auto;
        padding: 1.5rem;
    }

    .scenario-tab-content.active {
        display: block;
    }

    /* 釉붾（?꾨┛???뱀뀡 */
    .blueprint-section {
        margin-bottom: 2rem;
    }

    .blueprint-section h4 {
        font-size: 1rem;
        font-weight: 600;
        color: var(--youtube-primary);
        margin-bottom: 1rem;
    }

    .blueprint-keywords {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }

    .keyword-box {
        padding: 1rem;
        background: var(--card-bg);
        border-radius: 10px;
        text-align: center;
    }

    .keyword-box .label {
        display: block;
        font-size: 0.8rem;
        color: var(--text-secondary);
        margin-bottom: 0.5rem;
    }

    .keyword-box .value {
        font-size: 0.95rem;
        font-weight: 500;
        color: var(--youtube-primary);
    }

    /* 罹먮┃??紐⑸줉 */
    .character-list {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
    }

    .character-card {
        padding: 1rem;
        background: var(--card-bg);
        border-radius: 10px;
        border-left: 3px solid var(--youtube-primary);
    }

    .character-card h5 {
        margin: 0 0 0.5rem;
        font-size: 0.9rem;
        color: var(--text-primary);
    }

    .character-card p {
        margin: 0;
        font-size: 0.85rem;
        color: var(--text-secondary);
        line-height: 1.6;
    }

    /* 梨뺥꽣 釉붾（?꾨┛??*/
    .chapter-blueprint {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
    }

    .chapter-card {
        padding: 1rem;
        background: var(--card-bg);
        border-radius: 10px;
    }

    .chapter-header {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        margin-bottom: 0.5rem;
    }

    .chapter-number {
        padding: 0.25rem 0.5rem;
        background: var(--youtube-gradient);
        color: white;
        border-radius: 4px;
        font-size: 0.75rem;
        font-weight: 600;
    }

    .chapter-title {
        font-weight: 600;
        color: var(--text-primary);
    }

    .chapter-summary {
        margin: 0;
        font-size: 0.85rem;
        color: var(--text-secondary);
        line-height: 1.6;
    }

    /* ?€蹂?而⑦뀒?대꼫 */
    .script-container {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
    }

    .script-placeholder {
        text-align: center;
        padding: 2rem;
        color: var(--text-secondary);
    }

    .script-chapter {
        padding: 1.25rem;
        background: var(--card-bg);
        border-radius: 10px;
        border-left: 3px solid var(--youtube-primary);
    }

    .script-chapter h4 {
        margin: 0 0 1rem;
        color: var(--youtube-primary);
        font-size: 0.95rem;
    }

    .script-content {
        font-size: 0.9rem;
        color: var(--text-primary);
        line-height: 1.8;
        white-space: pre-wrap;
    }

    .script-actions {
        padding: 1rem 1.5rem;
        background: var(--card-bg);
        border-top: 1px solid var(--border-color);
        text-align: center;
    }

    /* ?쒓컖???뱀뀡 */
    .visuals-section {
        margin-bottom: 2rem;
    }

    .visuals-section h4 {
        font-size: 1rem;
        font-weight: 600;
        color: var(--youtube-primary);
        margin-bottom: 1rem;
    }

    .empty-notice {
        color: var(--text-secondary);
        font-size: 0.85rem;
        font-style: italic;
    }

    .image-prompt-card {
        padding: 1rem;
        background: var(--card-bg);
        border-radius: 10px;
        margin-bottom: 1rem;
    }

    .prompt-header {
        font-size: 0.85rem;
        font-weight: 600;
        color: var(--text-secondary);
        margin-bottom: 0.75rem;
    }

    .image-prompt-card p {
        font-size: 0.85rem;
        margin: 0.5rem 0;
        color: var(--text-primary);
    }

    .prompt-text {
        margin-top: 0.75rem;
        padding: 0.75rem;
        background: #1a1a2e;
        border-radius: 6px;
        font-size: 0.8rem;
        color: #22c55e;
        overflow-x: auto;
        white-space: pre-wrap;
    }

    .title-item {
        padding: 0.75rem 1rem;
        background: var(--card-bg);
        border-radius: 8px;
        margin-bottom: 0.5rem;
        font-size: 0.9rem;
    }

    .thumbnail-text-value {
        padding: 1rem;
        background: var(--card-bg);
        border-radius: 10px;
        font-size: 1.1rem;
        font-weight: 600;
        color: #fbbf24;
        text-align: center;
    }

    /* ?쒕굹由ъ삤 梨꾪똿 */
    .scenario-chat {
        background: var(--card-bg);
        border-top: 1px solid var(--border-color);
        max-height: 350px;
        display: flex;
        flex-direction: column;
    }

    .scenario-chat.hidden {
        display: none;
    }

    .chat-header {
        padding: 0.75rem 1rem;
        border-bottom: 1px solid var(--border-color);
        background: linear-gradient(135deg, rgba(255, 0, 0, 0.05) 0%, transparent 100%);
    }

    .chat-header h4 {
        margin: 0;
        font-size: 0.9rem;
        color: var(--youtube-primary);
    }

    .chat-messages {
        flex: 1;
        overflow-y: auto;
        padding: 1rem;
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
    }

    .chat-message {
        max-width: 80%;
        padding: 0.75rem 1rem;
        border-radius: 12px;
        font-size: 0.85rem;
    }

    .chat-message.user {
        align-self: flex-end;
        background: var(--youtube-primary);
        color: white;
        border-bottom-right-radius: 4px;
    }

    .chat-message.assistant {
        align-self: flex-start;
        background: var(--bg-secondary);
        color: var(--text-primary);
        border-bottom-left-radius: 4px;
    }

    .message-content {
        white-space: pre-wrap;
        line-height: 1.5;
    }

    .message-time {
        font-size: 0.7rem;
        opacity: 0.7;
        margin-top: 0.25rem;
    }

    .chat-input-area {
        display: flex;
        gap: 0.5rem;
        padding: 0.75rem 1rem;
        border-top: 1px solid var(--border-color);
    }

    .chat-input-area .form-input {
        flex: 1;
    }

    /* 諛섏쓳??- YouTube */
    @media (max-width: 768px) {
        #youtube-analysis-tab.tab-content.active {
            height: auto;
        }

        .youtube-analysis-container {
            flex-direction: column !important;
        }

        .youtube-sidebar {
            width: 100% !important;
            min-width: 100% !important;
            max-width: 100% !important;
            max-height: 400px;
            border-right: none;
            border-bottom: 1px solid var(--border-color);
        }

        .youtube-scenario-container {
            grid-template-columns: 1fr;
        }

        .scenario-control-panel {
            border-right: none;
            border-bottom: 1px solid var(--border-color);
            max-height: 400px;
        }
    }

    .history-item-actions {
        width: 100%;
        justify-content: flex-end;
    }
}

/* ============================================
   YouTube 紐⑤떖 ?ㅽ???
   ============================================ */

/* 紐⑤떖 ?ㅻ쾭?덉씠 */
/* 李멸퀬: 泥?踰덉㎏ youtube-modal-overlay ?뺤쓽媛€ 10341以꾩뿉 ?덉쓬 */

/* 紐⑤떖 而⑦뀒?대꼫 - 湲곗〈 ?ㅽ????좎? */
.youtube-modal.large-modal {
    max-width: 1400px;
    width: 90vw;
    max-height: 95vh;
    height: 95vh;
}

/* 유튜브 분석 관련 모든 모달 오버레이 - 화면 중앙 정렬 */
#video-info-modal,
#comments-modal,
#transcript-modal,
#channel-analysis-modal {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    z-index: 2000 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* 유튜브 분석 관련 모든 모달 크기 조정 */
#video-info-modal > div,
#comments-modal > div,
#transcript-modal > div,
#channel-analysis-modal > div {
    max-width: 1400px !important;
    width: 90vw !important;
    max-height: 95vh !important;
    height: 95vh !important;
    margin: 0 !important;
    position: relative !important;
}

/* 모달 내용 반응형 */
#video-info-modal [style*="overflow-y: auto"],
#video-info-modal [style*="padding: 1.5rem"],
#comments-modal #comments-content,
#transcript-modal #transcript-guide-content,
#transcript-modal #transcript-result,
.channel-analysis-modal .modal-body {
    font-size: clamp(0.85rem, 1.2vw, 1rem) !important;
    padding: clamp(1rem, 2vw, 2rem) !important;
}

/* 모달 내부 그리드 반응형 */
#video-info-modal [style*="grid-template-columns"] {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
    gap: clamp(0.5rem, 1vw, 1rem) !important;
}

/* 모달 헤더 반응형 */
#video-info-modal h3,
#video-info-modal h4,
#video-info-modal h5,
#comments-modal h3,
#transcript-modal h3 {
    font-size: clamp(1rem, 1.5vw, 1.5rem) !important;
}

/* 모달 본문 텍스트 반응형 */
#video-info-modal p,
#comments-modal p,
#transcript-modal p {
    font-size: clamp(0.8rem, 1vw, 0.95rem) !important;
}

@keyframes slideUp {
    from {
        transform: translateY(20px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.youtube-modal.fullscreen-modal {
    max-width: 95vw;
    max-height: 95vh;
    width: 100%;
    height: 100%;
}

/* 紐⑤떖 ?ㅻ뜑 */
.youtube-modal .modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--border-color);
    background: linear-gradient(135deg, rgba(255, 0, 0, 0.1) 0%, transparent 100%);
    border-radius: 16px 16px 0 0;
}

.youtube-modal .modal-title {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--youtube-primary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.youtube-modal .modal-close {
    background: none;
    border: none;
    font-size: 1.75rem;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0;
    line-height: 1;
    transition: color 0.2s;
}

.youtube-modal .modal-close:hover {
    color: var(--youtube-primary);
}

/* 紐⑤떖 諛붾뵒 */
.youtube-modal .modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 1.5rem;
}

/* 紐⑤떖 ?명꽣 */
.youtube-modal .modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--border-color);
    background: var(--bg-secondary);
    border-radius: 0 0 16px 16px;
}

/* 紐⑤떖 濡쒕뵫 ?곹깭 */
.youtube-modal .transcript-loading,
.youtube-modal .analysis-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    color: var(--text-secondary);
}

.youtube-modal .loading-spinner {
    width: 48px;
    height: 48px;
    border: 3px solid var(--border-color);
    border-top-color: var(--youtube-primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin-bottom: 1rem;
}

/* 紐⑤떖 ?먮윭 ?곹깭 */
.youtube-modal .transcript-error,
.youtube-modal .analysis-error,
.youtube-modal .analysis-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    text-align: center;
    padding: 2rem;
}

.youtube-modal .transcript-error i,
.youtube-modal .analysis-error i {
    font-size: 3rem;
    color: #ef4444;
    margin-bottom: 1rem;
}

.youtube-modal .analysis-empty i {
    font-size: 3rem;
    color: var(--text-secondary);
    margin-bottom: 1rem;
}

.youtube-modal .transcript-error h3,
.youtube-modal .analysis-error h3,
.youtube-modal .analysis-empty h3 {
    margin: 0 0 0.5rem;
    color: var(--text-primary);
}

.youtube-modal .transcript-error p,
.youtube-modal .analysis-error p,
.youtube-modal .analysis-empty p {
    margin: 0 0 1.5rem;
    color: var(--text-secondary);
}

/* ?먮쭑 紐⑤떖 肄섑뀗痢?*/
.transcript-content {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.transcript-header {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.transcript-thumbnail {
    width: 160px;
    height: 90px;
    object-fit: cover;
    border-radius: 8px;
}

.transcript-info h3 {
    margin: 0 0 0.25rem;
    font-size: 1.1rem;
    color: var(--text-primary);
}

.transcript-info .channel-name {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.transcript-section {
    background: var(--bg-secondary);
    border-radius: 12px;
    padding: 1.25rem;
}

.transcript-section h4 {
    margin: 0 0 1rem;
    font-size: 1rem;
    color: var(--youtube-primary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.transcript-section.ai-analysis {
    background: linear-gradient(135deg, rgba(255, 0, 0, 0.05) 0%, rgba(139, 92, 246, 0.05) 100%);
    border: 1px solid rgba(255, 0, 0, 0.2);
}

.summary-box,
.timestamps-box {
    margin-bottom: 1rem;
}

.summary-box:last-child,
.timestamps-box:last-child {
    margin-bottom: 0;
}

.summary-box h5,
.timestamps-box h5 {
    margin: 0 0 0.5rem;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.summary-box p {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--text-primary);
}

.timestamps-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.timestamps-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
}

.timestamp-link {
    font-family: monospace;
    background: var(--youtube-primary);
    color: white;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    text-decoration: none;
    font-size: 0.8rem;
    white-space: nowrap;
}

.timestamp-link:hover {
    background: var(--youtube-secondary);
}

.script-text {
    max-height: 300px;
    overflow-y: auto;
    font-size: 0.9rem;
    line-height: 1.8;
    color: var(--text-primary);
    padding: 1rem;
    background: var(--card-bg);
    border-radius: 8px;
}

/* 梨꾨꼸 遺꾩꽍 紐⑤떖 */
.channel-analysis-content {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.channel-info-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--border-color);
}

.channel-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
}

.channel-details {
    flex: 1;
}

.channel-details h2 {
    margin: 0 0 0.25rem;
    font-size: 1.5rem;
    color: var(--text-primary);
}

.channel-stats {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.channel-actions {
    display: flex;
    gap: 0.5rem;
}

/* 遺꾩꽍 ??*/
.analysis-tabs {
    display: flex;
    gap: 0.5rem;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 0.5rem;
}

.analysis-tab {
    padding: 0.625rem 1rem;
    background: transparent;
    border: none;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: all 0.2s;
}

.analysis-tab:hover {
    color: var(--youtube-primary);
}

.analysis-tab.active {
    color: var(--youtube-primary);
    border-bottom-color: var(--youtube-primary);
}

.analysis-tab-content {
    display: none;
}

.analysis-tab-content.active {
    display: block;
}

/* ?듦퀎 洹몃━??*/
.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.stat-card {
    background: var(--bg-secondary);
    border-radius: 10px;
    padding: 1rem;
    text-align: center;
}

.stat-label {
    display: block;
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
}

.stat-value {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--youtube-primary);
}

/* 遺꾩꽍 ?뱀뀡 */
.analysis-section {
    margin-bottom: 1.5rem;
}

.analysis-section h4 {
    margin: 0 0 1rem;
    font-size: 1rem;
    color: var(--text-primary);
}

.health-metrics {
    display: flex;
    gap: 1.5rem;
}

.metric {
    flex: 1;
}

.metric-label {
    display: block;
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-bottom: 0.25rem;
}

.metric-value {
    display: block;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
}

/* 肄섑뀗痢??좏삎 李⑦듃 */
.content-type-chart {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.type-bar {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.type-fill {
    height: 8px;
    border-radius: 4px;
    transition: width 0.3s ease;
}

.type-fill.longform {
    background: var(--youtube-primary);
}

.type-fill.shorts {
    background: #fbbf24;
}

/* CII 遺꾪룷 */
.cii-distribution {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.cii-bar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.cii-bar .cii-label {
    width: 80px;
    font-size: 0.8rem;
    font-weight: 500;
}

.cii-bar .cii-label.excellent {
    color: #22c55e;
}

.cii-bar .cii-label.good {
    color: #3b82f6;
}

.cii-bar .cii-label.average {
    color: #fbbf24;
}

.cii-bar .cii-label.low {
    color: #ef4444;
}

.cii-bar .cii-fill {
    height: 8px;
    background: var(--youtube-primary);
    border-radius: 4px;
    transition: width 0.3s ease;
}

.cii-bar .cii-percent {
    font-size: 0.8rem;
    color: var(--text-secondary);
    width: 40px;
    text-align: right;
}

/* Top ?곸긽 由ъ뒪??*/
.top-videos-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.top-video-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem;
    background: var(--bg-secondary);
    border-radius: 8px;
}

.top-video-item .rank {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--youtube-primary);
    width: 40px;
}

.top-video-item .thumb {
    width: 80px;
    height: 45px;
    object-fit: cover;
    border-radius: 4px;
}

.top-video-item .video-info {
    flex: 1;
    overflow: hidden;
}

.top-video-item .title {
    display: block;
    font-size: 0.9rem;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.top-video-item .views {
    display: block;
    font-size: 0.8rem;
    color: var(--text-secondary);
}

/* ?곸긽 ?뚯씠釉?*/
.videos-table-wrapper {
    overflow-x: auto;
}

.videos-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.videos-table th,
.videos-table td {
    padding: 0.75rem;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
}

.videos-table th {
    background: var(--bg-secondary);
    font-weight: 600;
    color: var(--text-secondary);
}

.videos-table .video-title-cell {
    max-width: 300px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 李몄뿬???듦퀎 */
.engagement-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

/* AI 由ы룷??紐⑤떖 */
.ai-report-modal {
    max-width: 900px;
}

.ai-report-content {
    font-size: 0.95rem;
    line-height: 1.8;
    color: var(--text-primary);
}

.ai-report-content h1 {
    font-size: 1.5rem;
    color: var(--youtube-primary);
    border-bottom: 2px solid var(--youtube-primary);
    padding-bottom: 0.5rem;
    margin: 1.5rem 0 1rem;
}

.ai-report-content h2 {
    font-size: 1.25rem;
    color: var(--text-primary);
    margin: 1.25rem 0 0.75rem;
}

.ai-report-content h3 {
    font-size: 1.1rem;
    color: var(--text-secondary);
    margin: 1rem 0 0.5rem;
}

.ai-report-content ul {
    padding-left: 1.5rem;
    margin: 0.5rem 0;
}

.ai-report-content li {
    margin-bottom: 0.5rem;
}

/* 寃쎌웳 遺꾩꽍 紐⑤떖 */
.competitive-modal .competitive-input-form {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2rem;
    max-width: 600px;
    margin: 0 auto;
}

.competitive-input-form .form-desc {
    text-align: center;
    color: var(--text-secondary);
    margin-bottom: 2rem;
}

.channel-inputs {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 2rem;
}

.channel-inputs .input-row {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.channel-inputs label {
    width: 80px;
    font-weight: 500;
    color: var(--text-secondary);
}

.channel-inputs input {
    flex: 1;
    padding: 0.75rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 0.95rem;
}

.channel-inputs input:focus {
    outline: none;
    border-color: var(--youtube-primary);
}

/* 鍮꾧탳 ?뚯씠釉?*/
.comparison-table {
    overflow-x: auto;
}

.comparison-table table {
    width: 100%;
    border-collapse: collapse;
}

.comparison-table th,
.comparison-table td {
    padding: 1rem;
    text-align: center;
    border-bottom: 1px solid var(--border-color);
}

.comparison-table th {
    background: var(--bg-secondary);
    font-weight: 600;
}

.comparison-table th:first-child,
.comparison-table td:first-child {
    text-align: left;
    font-weight: 500;
}

/* YouTube 踰꾪듉 ?ㅽ???*/
.btn.youtube-btn {
    background: var(--youtube-gradient);
    color: white;
    border: none;
}

.btn.youtube-btn:hover {
    box-shadow: 0 4px 12px rgba(255, 0, 0, 0.3);
}

.btn-lg {
    padding: 1rem 2rem;
    font-size: 1rem;
}

/* 諛섏쓳??- 紐⑤떖 */
@media (max-width: 768px) {
    .youtube-modal {
        max-width: 100%;
        max-height: 100%;
        border-radius: 0;
    }

    .youtube-modal.fullscreen-modal {
        max-width: 100%;
        max-height: 100%;
    }

    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .engagement-stats {
        grid-template-columns: 1fr;
    }

    .channel-info-header {
        flex-direction: column;
        text-align: center;
    }

    .channel-actions {
        flex-direction: column;
        width: 100%;
    }
}

/* YouTube Analysis Grid Layout */
.youtube-results-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;
    padding: 1rem 0;
}

.video-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    /* Glassmorphism subtle effect */
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.video-card:hover {
    transform: translateY(-5px) scale(1.02);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.2), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    border-color: var(--theme-primary);
    z-index: 10;
}

/* Thumbnail Section */
.video-card-thumbnail {
    position: relative;
    padding-top: 56.25%;
    /* 16:9 Aspect Ratio */
    overflow: hidden;
    cursor: pointer;
}

.video-card-thumbnail img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.video-card:hover .video-card-thumbnail img {
    transform: scale(1.05);
}

.video-card-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: opacity 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.video-card:hover .video-card-overlay {
    opacity: 1;
}

/* Badges */
.card-badge {
    position: absolute;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 600;
    color: white;
    z-index: 2;
}

.badge-shorts {
    top: 8px;
    left: 8px;
    background: #FF0000;
    /* YouTube Red */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.badge-duration {
    bottom: 8px;
    right: 8px;
    background: rgba(0, 0, 0, 0.8);
}

.badge-published {
    bottom: 8px;
    left: 8px;
    background: rgba(0, 0, 0, 0.6);
    font-weight: 500;
}

/* Content Section */
.video-card-content {
    padding: 1rem;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.video-card-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.video-card-meta img {
    width: 20px;
    height: 20px;
    border-radius: 50%;
}

.video-card-title {
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: 0.5rem;
    color: var(--text-primary);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-decoration: none;
    transition: color 0.2s;
}

.video-card-title:hover {
    color: var(--theme-primary);
}

/* Stats Grid in Card */
.video-card-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    margin-top: auto;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.stat-box {
    background: rgba(255, 255, 255, 0.03);
    padding: 0.5rem;
    border-radius: 6px;
    text-align: center;
}

.stat-label {
    font-size: 0.7rem;
    color: var(--text-secondary);
    margin-bottom: 0.1rem;
}

.stat-value {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-primary);
}

.stat-value.highlight {
    color: var(--theme-primary);
}

/* Action Buttons (visible on hover) */
.video-card-actions {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    gap: 0.5rem;
    z-index: 3;
}

.card-action-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: white;
    color: #1e293b;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1rem;
    transition: all 0.2s ease;
    opacity: 0;
    transform: translateY(10px);
}

.video-card:hover .card-action-btn {
    opacity: 1;
    transform: translateY(0);
}

.card-action-btn:hover {
    background: var(--theme-primary);
    color: white;
}

.card-action-btn:nth-child(1) {
    transition-delay: 0.05s;
}

.card-action-btn:nth-child(2) {
    transition-delay: 0.1s;
}

.card-action-btn:nth-child(3) {
    transition-delay: 0.15s;
}

/* Responsive adjustments */
@media (max-width: 1400px) {
    .youtube-results-grid {
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    }
}

/* ============================================
   삽입 이미지 섹션 스타일
   ============================================ */
.insert-images-section {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
}

.insert-images-section .widget-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.insert-images-section .badge {
    background: var(--accent-primary);
    color: white;
    padding: 0.25rem 0.5rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
}

.file-upload-area.multi-upload {
    border: 2px dashed var(--border-color);
    border-radius: 12px;
    padding: 2rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    background: rgba(16, 185, 129, 0.05);
}

.file-upload-area.multi-upload:hover {
    border-color: var(--accent-primary);
    background: rgba(16, 185, 129, 0.1);
}

.file-upload-area.multi-upload.drag-over {
    border-color: var(--accent-primary);
    background: rgba(16, 185, 129, 0.15);
    transform: scale(1.02);
}

.file-upload-area.multi-upload .upload-placeholder i {
    font-size: 2.5rem;
    color: var(--accent-primary);
    margin-bottom: 0.75rem;
}

.file-upload-area.multi-upload .upload-placeholder p {
    color: var(--text-primary);
    font-weight: 500;
    margin-bottom: 0.25rem;
}

.file-upload-area.multi-upload .upload-placeholder small {
    color: var(--text-secondary);
    font-size: 0.8rem;
}

.uploaded-images-preview {
    margin-top: 1rem;
    background: var(--bg-input);
    border-radius: 12px;
    padding: 1rem;
}

.uploaded-images-preview .preview-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border-color);
}

.uploaded-images-preview .preview-header span {
    color: var(--text-secondary);
    font-size: 0.85rem;
}

.uploaded-images-preview .btn-text {
    background: none;
    border: none;
    color: var(--danger);
    cursor: pointer;
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.uploaded-images-preview .btn-text:hover {
    background: rgba(239, 68, 68, 0.1);
}

.preview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 0.75rem;
}

.insert-image-item {
    position: relative;
    aspect-ratio: 1;
    border-radius: 8px;
    overflow: hidden;
    cursor: grab;
    transition: all 0.2s ease;
    border: 2px solid transparent;
}

.insert-image-item:hover {
    border-color: var(--accent-primary);
    transform: scale(1.02);
}

.insert-image-item.dragging {
    opacity: 0.5;
    cursor: grabbing;
}

.insert-image-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.insert-image-item .order-badge {
    position: absolute;
    top: 4px;
    left: 4px;
    background: var(--accent-primary);
    color: white;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 600;
}

.insert-image-item .remove-btn {
    position: absolute;
    top: 4px;
    right: 4px;
    background: rgba(239, 68, 68, 0.9);
    color: white;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.insert-image-item:hover .remove-btn {
    opacity: 1;
}

.insert-image-item .remove-btn:hover {
    background: var(--danger);
}

.insert-image-item .filename {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
    color: white;
    padding: 0.5rem 0.25rem 0.25rem;
    font-size: 0.65rem;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* =========================================
   UI Canvas Styles (웹사이트 SEO 테마 적용)
   ========================================= */

/* UI Canvas Container */
.ui-canvas-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    padding: 0;
    margin: 0;
    background: var(--bg-dark);
    position: relative;
}

/* UI Canvas Header */
.ui-canvas-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    background: var(--bg-card);
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}

.ui-canvas-title {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.ui-canvas-title i {
    font-size: 1.5rem;
    color: var(--orange-primary);
}

.ui-canvas-title h2 {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.ui-canvas-actions {
    display: flex;
    gap: 0.5rem;
}

/* UI Canvas Frame Wrapper */
.ui-canvas-frame-wrapper {
    flex: 1;
    position: relative;
    overflow: hidden;
    background: #1f2937;
}

/* UI Canvas Iframe */
.ui-canvas-iframe {
    width: 100%;
    height: 100%;
    border: none;
    background: #1f2937;
}

/* UI Canvas Loading State */
.ui-canvas-loading {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--bg-dark);
    color: var(--text-secondary);
    gap: 1rem;
    z-index: 10;
}

.ui-canvas-loading.hidden {
    display: none;
}

.ui-canvas-loading i {
    font-size: 3rem;
    color: var(--orange-primary);
}

.ui-canvas-loading p {
    font-size: 1.1rem;
    color: var(--text-primary);
}

.ui-canvas-loading small {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

/* UI Canvas Tab Active */
/* UI Canvas Tab - 전체 화면 차지 */
.content-area #ui-canvas-editor-tab.tab-content {
    margin: 0;
    padding: 0;
    width: 100%;
    max-width: 100%;
    height: 100%;
}

#ui-canvas-editor-tab.tab-content.active {
    display: flex !important;
    flex-direction: column;
    height: calc(100vh - 60px) !important;
    overflow: hidden;
    padding: 0 !important;
    margin: 0 !important;
    width: 100%;
    max-width: 100%;
}

/* UI Canvas Fullscreen Mode */
.ui-canvas-fullscreen .ui-canvas-container {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    height: 100vh;
}

.ui-canvas-fullscreen .ui-canvas-header {
    padding: 0.75rem 1rem;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .ui-canvas-header {
        flex-direction: column;
        gap: 0.75rem;
        padding: 0.75rem;
    }
    
    .ui-canvas-actions {
        width: 100%;
        justify-content: flex-end;
    }
}

/* ============================================
   키워드 분석기 스타일
   ============================================ */

/* 키워드 분석기 컨테이너는 더 이상 사용하지 않음 (keyword-analysis-layout 사용) */

.keyword-input-section .input-group {
    display: flex;
    gap: 1rem;
    align-items: center;
}

.keyword-input-section .form-select {
    min-width: 120px;
}

.keyword-input-section .form-input {
    flex: 1;
}

.keyword-results {
    flex: 1;
    overflow: visible;
    min-height: 0;
    padding: 0;
}

.keyword-results-header {
    margin-bottom: 1.25rem;
}

.keyword-results-header h3 {
    color: var(--text-primary);
    font-size: 1.25rem;
    margin-bottom: 0.5rem;
    font-weight: 600;
}

.strategic-keywords-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.keyword-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 2rem;
}

.keyword-item-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    transition: all 0.2s;
}

.keyword-item-card:hover {
    border-color: var(--keyword-primary);
    background: var(--keyword-light);
}

.keyword-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: var(--keyword-gradient);
    color: white;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.9rem;
}

.keyword-text {
    flex: 1;
    color: var(--text-primary);
    font-size: 1rem;
}

.btn-small {
    padding: 0.5rem 1rem;
    background: var(--keyword-primary);
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.875rem;
    transition: all 0.2s;
}

.btn-small:hover {
    background: var(--keyword-hover);
}

.keyword-actions {
    display: flex;
    gap: 1rem;
    margin-top: 2rem;
    flex-wrap: wrap;
}

.serp-section {
    margin-bottom: 2rem;
    padding: 1.5rem;
    background: var(--bg-card);
    border-radius: 8px;
    border: 1px solid var(--border-color);
}

.serp-section h4 {
    color: var(--text-primary);
    font-size: 1.25rem;
    margin-bottom: 1rem;
}

.related-searches {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.related-search-tag {
    padding: 0.5rem 1rem;
    background: var(--keyword-light);
    color: var(--keyword-primary);
    border: 1px solid var(--keyword-primary);
    border-radius: 6px;
    font-size: 0.875rem;
}

.paa-item {
    margin-bottom: 1.5rem;
    padding: 1rem;
    background: var(--bg-input);
    border-radius: 8px;
    border-left: 3px solid var(--keyword-primary);
}

.paa-question {
    color: var(--text-primary);
    font-size: 1.1rem;
    margin-bottom: 0.75rem;
}

.paa-answer {
    color: var(--text-secondary);
    margin-bottom: 1rem;
    line-height: 1.6;
}

.paa-gap {
    padding: 1rem;
    background: var(--keyword-light);
    border-radius: 6px;
}

.paa-gap strong {
    color: var(--keyword-primary);
    display: block;
    margin-bottom: 0.5rem;
}

.paa-gap p {
    color: var(--text-primary);
    line-height: 1.6;
    margin: 0;
}

.blog-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 2rem;
}

.blog-item-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    transition: all 0.2s;
}

.blog-item-card:hover {
    border-color: var(--keyword-primary);
    background: var(--keyword-light);
}

.blog-rank {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: var(--keyword-gradient);
    color: white;
    border-radius: 8px;
    font-weight: 700;
    font-size: 1.1rem;
}

.blog-info {
    flex: 1;
}

.blog-info h4 {
    color: var(--text-primary);
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
}

.blog-link {
    color: var(--keyword-primary);
    text-decoration: none;
    font-size: 0.875rem;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    transition: color 0.2s;
}

.blog-link:hover {
    color: var(--keyword-hover);
}

.competition-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

.metric-card {
    padding: 1.5rem;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    text-align: center;
}

.metric-label {
    color: var(--text-secondary);
    font-size: 0.875rem;
    margin-bottom: 0.5rem;
}

.metric-value {
    color: var(--keyword-primary);
    font-size: 2rem;
    font-weight: 700;
}

.analysis-details {
    padding: 1.5rem;
    background: var(--bg-card);
    border-radius: 8px;
    border: 1px solid var(--border-color);
}

.analysis-details h4 {
    color: var(--text-primary);
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

.analysis-section {
    margin-bottom: 1.5rem;
}

.analysis-section h5 {
    color: var(--keyword-primary);
    font-size: 1.1rem;
    margin-bottom: 0.75rem;
}

.analysis-content {
    color: var(--text-primary);
    line-height: 1.8;
    padding: 1rem;
    background: var(--bg-input);
    border-radius: 6px;
}

.strategy-section {
    margin-top: 2rem;
    padding: 1.5rem;
    background: var(--keyword-light);
    border-radius: 8px;
    border: 1px solid var(--keyword-primary);
}

.strategy-section h5 {
    color: var(--keyword-primary);
    font-size: 1.25rem;
    margin-bottom: 1rem;
}

.expanded-keywords {
    margin-bottom: 1.5rem;
}

.expanded-keywords strong {
    color: var(--text-primary);
    display: block;
    margin-bottom: 0.75rem;
}

.keyword-tag {
    display: inline-block;
    padding: 0.375rem 0.75rem;
    background: var(--keyword-primary);
    color: white;
    border-radius: 6px;
    font-size: 0.875rem;
    margin-right: 0.5rem;
    margin-bottom: 0.5rem;
}

.blog-topics {
    margin-top: 1rem;
}

.blog-topics strong {
    color: var(--text-primary);
    display: block;
    margin-bottom: 1rem;
}

.topic-item {
    padding: 1rem;
    background: var(--bg-card);
    border-radius: 6px;
    margin-bottom: 1rem;
    border-left: 3px solid var(--keyword-primary);
}

.topic-item strong {
    color: var(--text-primary);
    display: block;
    margin-bottom: 0.5rem;
    font-size: 1.1rem;
}

.topic-item p {
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0;
}

.topic-category {
    margin-bottom: 2rem;
    padding: 1.5rem;
    background: var(--bg-card);
    border-radius: 8px;
    border: 1px solid var(--border-color);
}

.topic-category h4 {
    color: var(--keyword-primary);
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid var(--keyword-primary);
}

.topic-suggestion {
    margin-bottom: 1.5rem;
    padding: 1.25rem;
    background: var(--bg-input);
    border-radius: 8px;
    border-left: 3px solid var(--keyword-primary);
}

.topic-suggestion h5 {
    color: var(--text-primary);
    font-size: 1.2rem;
    margin-bottom: 1rem;
}

.topic-keywords {
    margin-bottom: 1rem;
}

.topic-keywords strong {
    color: var(--text-secondary);
    display: block;
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
}

.topic-strategy {
    margin-top: 1rem;
}

.topic-strategy strong {
    color: var(--text-secondary);
    display: block;
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
}

.topic-strategy p {
    color: var(--text-primary);
    line-height: 1.6;
    margin: 0;
}

.strategic-keyword-card {
    margin-bottom: 1.25rem;
    padding: 1.25rem;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    border-left: 4px solid var(--keyword-primary);
    transition: all 0.2s;
}

.strategic-keyword-card:hover {
    border-color: var(--keyword-primary);
    background: var(--keyword-light);
}

.strategic-keyword-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.keyword-rank {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: var(--keyword-gradient);
    color: white;
    border-radius: 8px;
    font-weight: 700;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.strategic-keyword-header h4 {
    color: var(--text-primary);
    font-size: 1.2rem;
    margin: 0;
    font-weight: 600;
}

.strategic-keyword-content {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.strategic-reason,
.strategic-title,
.strategic-thumbnail,
.strategic-strategy {
    padding: 0.85rem 1rem;
    background: var(--bg-input);
    border-radius: 6px;
}

.strategic-reason strong,
.strategic-title strong,
.strategic-thumbnail strong,
.strategic-strategy strong {
    color: var(--keyword-primary);
    display: block;
    margin-bottom: 0.4rem;
    font-size: 0.85rem;
}

.strategic-reason p,
.strategic-strategy p {
    color: var(--text-primary);
    line-height: 1.7;
    margin: 0;
    font-size: 0.95rem;
}

.strategic-title h5 {
    color: var(--text-primary);
    font-size: 1.1rem;
    margin: 0.3rem 0 0 0;
    font-weight: 600;
}

.thumbnail-text {
    color: var(--keyword-primary);
    font-size: 1rem;
    font-weight: 500;
    margin: 0.5rem 0 0 0;
    padding: 0.6rem 0.8rem;
    background: var(--keyword-light);
    border-radius: 6px;
}

.loading-spinner {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem;
    color: var(--text-secondary);
    font-size: 1.1rem;
    gap: 1rem;
}

.loading-spinner i {
    font-size: 1.5rem;
    color: var(--keyword-primary);
}

.error-message {
    padding: 2rem;
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid var(--danger);
    border-radius: 8px;
    color: var(--danger);
    text-align: center;
    font-size: 1.1rem;
}

/* 키워드 분석기 기능 탭 스타일은 YouTube와 동일한 mode-tab 사용 */

/* 키워드 분석기 탭 전체 화면 스타일 */
.tab-content.keyword-theme {
    padding: 0;
    height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.tab-content.keyword-theme .keyword-analyzer-container {
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* 반응형 디자인 */
@media (max-width: 768px) {
    .keyword-analyzer-container {
        padding: 1rem;
    }
    
    .keyword-input-section .input-group {
        flex-direction: column;
    }
    
    .keyword-input-section .form-select,
    .keyword-input-section .form-input {
        width: 100%;
    }
    
    .competition-metrics {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .keyword-actions {
        flex-direction: column;
    }
    
    .keyword-actions .primary-btn {
        width: 100%;
    }
}

/* 페이지 도움말 아이콘 및 툴팁 */
.help-icon-btn {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-size: 1.1rem;
    cursor: pointer;
    padding: 0.25rem;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    opacity: 0.7;
}

.help-icon-btn:hover {
    color: var(--accent-primary);
    opacity: 1;
    background: rgba(16, 185, 129, 0.1);
    transform: scale(1.1);
}

.help-tooltip {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: var(--shadow-lg);
    z-index: 10000;
    max-width: 600px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
    animation: tooltipFadeIn 0.3s ease;
}

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

.help-tooltip-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--border-color);
    background: rgba(16, 185, 129, 0.05);
}

.help-tooltip-header h3 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
}

.help-tooltip-close {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-size: 1.2rem;
    cursor: pointer;
    padding: 0.25rem;
    border-radius: 4px;
    transition: all 0.2s ease;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.help-tooltip-close:hover {
    background: var(--bg-input);
    color: var(--text-primary);
}

.help-tooltip-content {
    padding: 1.5rem;
    color: var(--text-primary);
    line-height: 1.6;
}

.help-tooltip-content h4 {
    color: var(--accent-primary);
    font-size: 1rem;
    font-weight: 600;
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
}

.help-tooltip-content h4:first-child {
    margin-top: 0;
}

.help-tooltip-content ul,
.help-tooltip-content ol {
    margin: 0.5rem 0;
    padding-left: 1.5rem;
}

.help-tooltip-content li {
    margin: 0.25rem 0;
    color: var(--text-secondary);
}

.help-tooltip-content p {
    margin: 0.75rem 0;
    color: var(--text-secondary);
    line-height: 1.7;
    white-space: pre-line;
}

.help-tooltip-content p:first-of-type {
    margin-top: 0;
}

.help-tooltip-content p:last-of-type {
    margin-bottom: 0;
}

.help-tooltip-content strong {
    color: var(--text-primary);
    font-weight: 600;
}

.help-tooltip-content code {
    background: var(--bg-input);
    padding: 0.2rem 0.4rem;
    border-radius: 4px;
    font-size: 0.9em;
    color: var(--accent-primary);
    font-family: 'Courier New', monospace;
}

.help-tooltip-content a {
    color: var(--accent-primary);
    text-decoration: none;
    border-bottom: 1px solid var(--accent-primary);
    transition: opacity 0.2s ease;
}

.help-tooltip-content a:hover {
    opacity: 0.8;
}

/* 툴팁 오버레이 */
.help-tooltip-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9999;
    animation: overlayFadeIn 0.3s ease;
}

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

/* =========================================
   SNS 전문 분석 도구 스타일
   ========================================= */

/* SNS 테마 변수 */
.sns-theme,
#sns-analysis-tab {
    --sns-primary: #8b5cf6;
    --sns-secondary: #a78bfa;
    --sns-hover: #7c3aed;
    --sns-light: rgba(139, 92, 246, 0.1);
    --sns-gradient: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%);
    
    /* 플랫폼별 색상 */
    --instagram-color: #E1306C;
    --instagram-gradient: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
    --facebook-color: #1877F2;
    --tiktok-color: #000000;
    --threads-color: #000000;
    --sentiment-positive: #10b981;
    --sentiment-negative: #ef4444;
    --sentiment-neutral: #f59e0b;
}

/* SNS 분석 컨테이너 */
.sns-analysis-container {
    padding: 1.5rem;
    max-width: 1400px;
    margin: 0 auto;
}

/* SNS 헤더 카드 */
.sns-header-card {
    background: var(--sns-gradient);
    border-radius: 16px;
    padding: 2rem;
    margin-bottom: 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 10px 40px rgba(139, 92, 246, 0.3);
}

.sns-header-content h1 {
    color: white;
    margin: 0 0 0.5rem 0;
    font-size: 1.8rem;
    font-weight: 700;
}

.sns-header-content p {
    color: rgba(255, 255, 255, 0.9);
    margin: 0;
    font-size: 1rem;
}

.sns-api-status .status-badge {
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 500;
}

.sns-api-status .status-badge.success {
    background: rgba(16, 185, 129, 0.2);
    color: #10b981;
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.sns-api-status .status-badge.warning {
    background: rgba(245, 158, 11, 0.2);
    color: #f59e0b;
    border: 1px solid rgba(245, 158, 11, 0.3);
}

.sns-api-status .status-badge.error {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.sns-api-status .status-badge.checking {
    background: rgba(139, 92, 246, 0.2);
    color: #a78bfa;
    border: 1px solid rgba(139, 92, 246, 0.3);
}

/* SNS 탭 네비게이션 */
.sns-tabs-container {
    margin-bottom: 1.5rem;
}

.sns-tabs {
    display: flex;
    gap: 0.5rem;
    background: var(--bg-card);
    padding: 0.5rem;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    overflow-x: auto;
}

.sns-tab-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font-size: 0.95rem;
    font-weight: 500;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.sns-tab-btn:hover {
    background: var(--sns-light);
    color: var(--sns-primary);
}

.sns-tab-btn.active {
    background: var(--sns-gradient);
    color: white;
    box-shadow: 0 4px 15px rgba(139, 92, 246, 0.3);
}

.sns-tab-btn i {
    font-size: 1.1rem;
}

/* 플랫폼별 탭 아이콘 색상 */
.sns-tab-btn[data-tab="instagram"]:hover i,
.sns-tab-btn[data-tab="instagram"].active i { color: inherit; }

.sns-tab-btn[data-tab="facebook"]:hover i,
.sns-tab-btn[data-tab="facebook"].active i { color: inherit; }

/* SNS 입력 카드 */
.sns-input-card {
    background: var(--bg-card);
    border-radius: 12px;
    border: 1px solid var(--border-color);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.sns-input-card h3 {
    color: var(--text-primary);
    margin: 0 0 1.25rem 0;
    font-size: 1.1rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.sns-input-card h3 i {
    color: var(--sns-primary);
}

.sns-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.sns-form-grid.multi {
    grid-template-columns: repeat(3, 1fr);
}

.sns-form-grid .form-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.sns-form-grid .form-group.full-width {
    grid-column: 1 / -1;
}

.sns-form-grid .form-group label {
    color: var(--text-secondary);
    font-size: 0.85rem;
    font-weight: 500;
}

.sns-form-grid input,
.sns-form-grid select,
.sns-form-grid textarea {
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 0.75rem 1rem;
    color: var(--text-primary);
    font-size: 0.95rem;
    transition: all 0.2s ease;
}

.sns-form-grid input:focus,
.sns-form-grid select:focus,
.sns-form-grid textarea:focus {
    outline: none;
    border-color: var(--sns-primary);
    box-shadow: 0 0 0 3px var(--sns-light);
}

.sns-form-grid textarea {
    resize: vertical;
    min-height: 80px;
}

.sns-form-grid .checkbox-group {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.sns-form-grid .checkbox-group label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    color: var(--text-primary);
}

.sns-form-grid .checkbox-group input[type="checkbox"] {
    width: auto;
    padding: 0;
}

/* SNS 분석 버튼 */
.sns-analyze-btn {
    background: var(--sns-gradient);
    color: white;
    border: none;
    padding: 0.875rem 2rem;
    border-radius: 10px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(139, 92, 246, 0.3);
}

.sns-analyze-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(139, 92, 246, 0.4);
}

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

.sns-analyze-btn.sentiment {
    background: var(--sns-gradient);
    box-shadow: 0 4px 15px rgba(139, 92, 246, 0.3);
}

.sns-analyze-btn.sentiment:hover:not(:disabled) {
    box-shadow: 0 8px 25px rgba(139, 92, 246, 0.4);
}

.sns-analyze-btn.multi {
    background: var(--sns-gradient);
    box-shadow: 0 4px 15px rgba(139, 92, 246, 0.3);
}

.sns-analyze-btn.multi:hover:not(:disabled) {
    box-shadow: 0 8px 25px rgba(139, 92, 246, 0.4);
}

/* SNS 결과 카드 */
.sns-results-card {
    background: var(--bg-card);
    border-radius: 12px;
    border: 1px solid var(--border-color);
    padding: 1.5rem;
    min-height: 300px;
}

.sns-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem;
    text-align: center;
    color: var(--text-secondary);
}

.sns-empty-state i {
    font-size: 3rem;
    margin-bottom: 1rem;
    opacity: 0.3;
}

.sns-empty-state p {
    margin: 0 0 0.5rem 0;
    font-size: 1rem;
}

.sns-empty-state small {
    font-size: 0.85rem;
    opacity: 0.7;
}

/* SNS 로딩 상태 */
.sns-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem;
    text-align: center;
}

.sns-loading .loading-spinner {
    width: 50px;
    height: 50px;
    border: 3px solid var(--border-color);
    border-top-color: var(--sns-primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 1rem;
}

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

.sns-loading p {
    color: var(--text-primary);
    margin: 0 0 0.5rem 0;
}

.sns-loading small {
    color: var(--text-secondary);
}

/* SNS 결과 헤더 */
.sns-result-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-color);
}

.sns-result-header h3 {
    color: var(--text-primary);
    margin: 0;
    font-size: 1.2rem;
}

.sns-result-header .result-meta {
    color: var(--text-secondary);
    font-size: 0.85rem;
}

/* SNS 메트릭 그리드 */
.sns-metrics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.sns-metric-card {
    background: linear-gradient(135deg, var(--bg-input) 0%, var(--bg-card) 100%);
    border-radius: 10px;
    padding: 1.25rem;
    text-align: center;
    border: 1px solid var(--border-color);
    transition: all 0.2s ease;
}

.sns-metric-card:hover {
    border-color: var(--sns-primary);
    transform: translateY(-2px);
}

.sns-metric-card .metric-value {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}

.sns-metric-card .metric-label {
    font-size: 0.8rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.sns-metric-card.highlight {
    background: var(--sns-gradient);
    border-color: transparent;
}

.sns-metric-card.highlight .metric-value,
.sns-metric-card.highlight .metric-label {
    color: white;
}

.sns-metric-card.viral {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    border-color: transparent;
}

.sns-metric-card.viral .metric-value,
.sns-metric-card.viral .metric-label {
    color: white;
}

.sns-metric-card.success {
    border-color: var(--sentiment-positive);
}

.sns-metric-card.success .metric-value {
    color: var(--sentiment-positive);
}

.sns-metric-card.error {
    border-color: var(--sentiment-negative);
}

.sns-metric-card.error .metric-value {
    color: var(--sentiment-negative);
}

/* Sentiment 메트릭 */
.sns-metrics-grid.sentiment .sns-metric-card.positive {
    border-left: 4px solid var(--sentiment-positive);
}

.sns-metrics-grid.sentiment .sns-metric-card.positive .metric-value {
    color: var(--sentiment-positive);
}

.sns-metrics-grid.sentiment .sns-metric-card.neutral {
    border-left: 4px solid var(--sentiment-neutral);
}

.sns-metrics-grid.sentiment .sns-metric-card.neutral .metric-value {
    color: var(--sentiment-neutral);
}

.sns-metrics-grid.sentiment .sns-metric-card.negative {
    border-left: 4px solid var(--sentiment-negative);
}

.sns-metrics-grid.sentiment .sns-metric-card.negative .metric-value {
    color: var(--sentiment-negative);
}

/* SNS 프로필 카드 */
.sns-profile-card {
    background: var(--bg-input);
    border-radius: 10px;
    padding: 1.25rem;
    margin-bottom: 1.5rem;
    border: 1px solid var(--border-color);
}

.sns-profile-card h4,
.sns-profile-card h5 {
    color: var(--text-primary);
    margin: 0 0 0.5rem 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.sns-profile-card p {
    color: var(--text-secondary);
    margin: 0 0 0.75rem 0;
}

.sns-profile-card .profile-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.sns-profile-card .profile-stats span {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.sns-profile-card .profile-stats strong {
    color: var(--text-primary);
}

.sns-profile-card .bio {
    font-style: italic;
    opacity: 0.8;
    margin-top: 0.75rem;
}

.verified-badge {
    background: var(--sns-primary);
    color: white;
    font-size: 0.7rem;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    font-weight: 500;
}

/* SNS 인사이트 섹션 */
.sns-insight-section {
    margin-bottom: 1.5rem;
}

.sns-insight-section h4 {
    color: var(--text-primary);
    font-size: 1rem;
    margin: 0 0 1rem 0;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border-color);
}

/* 해시태그 리스트 */
.hashtag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.hashtag-badge {
    background: var(--sns-light);
    color: var(--sns-primary);
    padding: 0.4rem 0.75rem;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 500;
}

.hashtag-badge small {
    opacity: 0.7;
    margin-left: 0.25rem;
}

.hashtag-badge.tiktok {
    background: rgba(0, 0, 0, 0.1);
    color: var(--text-primary);
}

/* 카테고리 리스트 */
.category-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.category-badge {
    background: var(--bg-input);
    color: var(--text-primary);
    padding: 0.4rem 0.75rem;
    border-radius: 6px;
    font-size: 0.85rem;
    border: 1px solid var(--border-color);
}

/* 콘텐츠 유형 통계 */
.content-type-stats {
    display: flex;
    gap: 2rem;
}

.content-type-stats .stat-item {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.content-type-stats .stat-item span {
    color: var(--text-secondary);
    font-size: 0.85rem;
}

.content-type-stats .stat-item strong {
    color: var(--text-primary);
    font-size: 1.1rem;
}

/* 상위 게시물 리스트 */
.top-posts-list,
.top-pages-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.top-post-item,
.top-page-item {
    background: var(--bg-input);
    border-radius: 8px;
    padding: 1rem;
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    border: 1px solid var(--border-color);
}

.top-post-item .rank,
.top-page-item .rank {
    background: var(--sns-gradient);
    color: white;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.85rem;
    flex-shrink: 0;
}

.top-post-item.tiktok .rank {
    background: linear-gradient(135deg, #000 0%, #333 100%);
}

.post-info,
.page-info {
    flex: 1;
    min-width: 0;
}

.post-info .caption,
.page-info p {
    color: var(--text-primary);
    margin: 0 0 0.5rem 0;
    font-size: 0.9rem;
    line-height: 1.4;
}

.post-info .post-stats,
.page-info .page-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    color: var(--text-secondary);
    font-size: 0.8rem;
}

.page-info h5 {
    color: var(--text-primary);
    margin: 0 0 0.25rem 0;
    font-size: 0.95rem;
}

.page-info .category {
    color: var(--text-secondary);
    font-size: 0.8rem;
    margin: 0 0 0.5rem 0;
}

/* 평점 요약 */
.rating-summary {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.rating-summary .rating-score {
    font-size: 2rem;
    font-weight: 700;
    color: var(--sentiment-neutral);
}

.rating-summary .rating-meta {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

/* 인증 통계 */
.verification-stats {
    display: flex;
    gap: 2rem;
    color: var(--text-secondary);
}

.verification-stats strong {
    color: var(--text-primary);
}

/* 프로필 순위 */
.profiles-ranking {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.profile-rank-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: var(--bg-input);
    border-radius: 8px;
    padding: 1rem;
    border: 1px solid var(--border-color);
}

.profile-rank-item .rank {
    background: var(--sns-gradient);
    color: white;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.85rem;
    flex-shrink: 0;
}

.profile-rank-item .profile-info h5 {
    color: var(--text-primary);
    margin: 0 0 0.25rem 0;
    font-size: 0.95rem;
}

.profile-rank-item .profile-info p {
    color: var(--text-secondary);
    margin: 0 0 0.25rem 0;
    font-size: 0.85rem;
}

.profile-rank-item .followers {
    color: var(--sns-primary);
    font-size: 0.85rem;
    font-weight: 500;
}

/* 브랜드 평판 점수 */
.reputation-score-section {
    display: flex;
    justify-content: center;
    margin-bottom: 2rem;
}

.reputation-score-card {
    background: var(--bg-input);
    border-radius: 16px;
    padding: 2rem 3rem;
    text-align: center;
    border: 3px solid var(--border-color);
}

.reputation-score-card .score-value {
    font-size: 4rem;
    font-weight: 800;
    line-height: 1;
    margin-bottom: 0.5rem;
}

.reputation-score-card .score-label {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
}

.reputation-score-card .score-grade {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
}

/* 플랫폼 분석 */
.platform-breakdown {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
}

.platform-stat-card {
    background: var(--bg-input);
    border-radius: 10px;
    padding: 1rem;
    border: 1px solid var(--border-color);
}

.platform-stat-card h5 {
    color: var(--text-primary);
    margin: 0 0 0.5rem 0;
    font-size: 0.9rem;
}

.platform-stat-card p {
    color: var(--text-secondary);
    margin: 0 0 0.75rem 0;
    font-size: 0.8rem;
}

.platform-ratios {
    display: flex;
    gap: 1rem;
    font-size: 0.8rem;
}

.platform-ratios .positive {
    color: var(--sentiment-positive);
}

.platform-ratios .negative {
    color: var(--sentiment-negative);
}

/* 댓글 리스트 */
.comments-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.comments-list.positive .comment-item {
    border-left: 3px solid var(--sentiment-positive);
}

.comments-list.negative .comment-item {
    border-left: 3px solid var(--sentiment-negative);
}

.comment-item {
    background: var(--bg-input);
    border-radius: 8px;
    padding: 1rem;
    border: 1px solid var(--border-color);
}

.comment-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.comment-header .author {
    color: var(--text-primary);
    font-weight: 500;
    font-size: 0.9rem;
}

.comment-header .platform {
    color: var(--text-secondary);
    font-size: 0.75rem;
    background: var(--bg-card);
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
}

.comment-text {
    color: var(--text-secondary);
    font-size: 0.9rem;
    line-height: 1.5;
    margin: 0;
}

/* 플랫폼 결과 카드 */
.platform-result-card {
    background: var(--bg-input);
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 0.75rem;
    border: 1px solid var(--border-color);
}

.platform-result-card.success {
    border-left: 3px solid var(--sentiment-positive);
}

.platform-result-card.error {
    border-left: 3px solid var(--sentiment-negative);
}

.platform-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.platform-header h5 {
    color: var(--text-primary);
    margin: 0;
    font-size: 0.95rem;
}

.platform-stats {
    display: flex;
    gap: 1rem;
    color: var(--text-secondary);
    font-size: 0.85rem;
}

.platform-result-card .error-message {
    color: var(--sentiment-negative);
    font-size: 0.85rem;
    margin: 0;
}

/* SNS 데이터 테이블 */
.sns-data-table-wrapper {
    overflow-x: auto;
    border-radius: 8px;
    border: 1px solid var(--border-color);
}

.sns-data-table {
    width: 100%;
    border-collapse: collapse;
}

.sns-data-table th,
.sns-data-table td {
    padding: 0.75rem 1rem;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
}

.sns-data-table th {
    background: var(--bg-input);
    color: var(--text-secondary);
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.sns-data-table td {
    color: var(--text-primary);
    font-size: 0.9rem;
}

.sns-data-table .caption-cell {
    max-width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sns-data-table tbody tr:hover {
    background: var(--bg-input);
}

/* SNS 액션 버튼 */
.sns-actions {
    display: flex;
    gap: 1rem;
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border-color);
}

.sns-actions .btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.sns-actions .btn-secondary {
    background: var(--bg-input);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

.sns-actions .btn-secondary:hover {
    background: var(--bg-card);
    border-color: var(--sns-primary);
}

/* 반응형 */
@media (max-width: 768px) {
    .sns-header-card {
        flex-direction: column;
        text-align: center;
        gap: 1rem;
    }
    
    .sns-tabs {
        flex-wrap: wrap;
    }
    
    .sns-tab-btn {
        flex: 1;
        min-width: 100px;
        justify-content: center;
    }
    
    .sns-form-grid,
    .sns-form-grid.multi {
        grid-template-columns: 1fr;
    }
    
    .sns-metrics-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .reputation-score-card {
        padding: 1.5rem;
    }
    
    .reputation-score-card .score-value {
        font-size: 3rem;
    }
}

/* =========================================
   Deep Research Styles
   ========================================= */

/* Deep Research Container - 마케팅 컨테이너와 동일한 스타일 */
.deep-research-container {
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.1) 0%, rgba(2, 132, 199, 0.05) 100%);
    border: 1px solid rgba(14, 165, 233, 0.2);
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.deep-research-container .page-description {
    color: var(--text-secondary);
    margin-top: 0.5rem;
    font-size: 0.95rem;
}

/* 딥 리서치 컨테이너 - 입력 1/4, 결과 3/4 비율로 설정 */
.deep-research-container .context-grid {
    display: grid;
    grid-template-columns: minmax(300px, 1fr) minmax(600px, 2fr);
    gap: 1.5rem;
    align-items: start;
}

/* 입력 영역 - 1/3 비율로 제한 */
.deep-research-container .context-grid>.widget:first-child {
    max-width: none;
}

/* 딥 리서치 결과 영역 높이 최소값 설정 및 스크롤 */
.deep-research-container .context-grid>.widget:last-child {
    min-height: 700px;
    width: 100%;
}

.deep-research-container .context-grid>.widget:last-child .widget-body {
    max-height: calc(100vh - 200px);
    overflow-y: auto;
    padding: 1.5rem;
}

/* 반응형 - 딥 리서치 컨테이너 */
@media (max-width: 1400px) {
    .deep-research-container .context-grid {
        grid-template-columns: minmax(280px, 1fr) minmax(500px, 2.5fr);
    }
}

@media (max-width: 1200px) {
    .deep-research-container .context-grid {
        grid-template-columns: 1fr 2fr;
    }

    .deep-research-container .context-grid>.widget:first-child {
        max-width: none;
    }
}

@media (max-width: 992px) {
    .deep-research-container .context-grid {
        grid-template-columns: 1fr;
    }
}

/* Deep Research Form */
.deep-research-form .form-group {
    margin-bottom: 1.5rem;
}

.deep-research-form .form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    color: var(--text-primary);
}

.deep-research-form .form-group label .required {
    color: #ef4444;
}

.deep-research-form .form-hint {
    margin-top: 0.5rem;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

/* Deep Research Buttons */
.deep-research-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.875rem 1.5rem;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
    background: var(--deep-research-gradient, linear-gradient(135deg, #3B82F6 0%, #2563EB 100%));
    color: white;
}

.deep-research-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
}

.deep-research-btn.full-width {
    width: 100%;
}

.deep-research-btn.brand-btn {
    background: linear-gradient(135deg, #0EA5E9 0%, #38BDF8 100%);
}

.deep-research-btn.brand-btn:hover {
    box-shadow: 0 4px 12px rgba(14, 165, 233, 0.4);
}

.deep-research-btn.market-btn {
    background: linear-gradient(135deg, #0EA5E9 0%, #38BDF8 100%);
}

.deep-research-btn.market-btn:hover {
    box-shadow: 0 4px 12px rgba(14, 165, 233, 0.4);
}

.deep-research-btn.company-btn {
    background: linear-gradient(135deg, #0EA5E9 0%, #38BDF8 100%);
}

.deep-research-btn.company-btn:hover {
    box-shadow: 0 4px 12px rgba(14, 165, 233, 0.4);
}

/* Deep Research Progress */
.deep-research-progress-wrapper {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 2rem;
    background: var(--bg-input);
    border-radius: 12px;
}

.deep-research-progress-wrapper .progress-icon {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--deep-research-light, rgba(59, 130, 246, 0.1));
    border-radius: 50%;
    color: var(--deep-research-primary, #3B82F6);
    font-size: 1.5rem;
}

.deep-research-progress-wrapper .progress-info {
    flex: 1;
}

.deep-research-progress-wrapper .progress-info h3 {
    margin: 0 0 0.5rem 0;
    font-size: 1.1rem;
    color: var(--text-primary);
}

.deep-research-progress-wrapper .progress-message {
    margin: 0 0 1rem 0;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.deep-research-progress-wrapper .progress-bar-container {
    height: 8px;
    background: var(--bg-card);
    border-radius: 4px;
    overflow: hidden;
}

.deep-research-progress-wrapper .progress-bar {
    height: 100%;
    border-radius: 4px;
    transition: width 0.3s ease;
}

.deep-research-progress-wrapper .progress-percent {
    display: block;
    margin-top: 0.5rem;
    font-size: 0.85rem;
    color: var(--text-secondary);
    text-align: right;
}

/* Deep Research Info Cards */
.deep-research-theme .info-card {
    background: var(--bg-input);
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1rem;
    border: 1px solid var(--border-color);
}

.deep-research-theme .info-card h3 {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0 0 0.75rem 0;
    font-size: 1rem;
    color: var(--text-primary);
}

.deep-research-theme .info-card h3 i {
    color: var(--deep-research-primary, #3B82F6);
}

.deep-research-theme .info-card p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.9rem;
    line-height: 1.5;
}

.deep-research-theme .info-card.brand-card h3 i {
    color: #0EA5E9;
}

.deep-research-theme .info-card.market-card h3 i {
    color: #0EA5E9;
}

.deep-research-theme .info-card.company-card h3 i {
    color: #0EA5E9;
}

/* Deep Research Report */
.deep-research-report {
    background: var(--bg-card);
    border-radius: 12px;
    overflow: hidden;
}

.deep-research-report .report-header {
    padding: 1.5rem;
    border-bottom: 1px solid var(--border-color);
}

.deep-research-report .report-header h3 {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0 0 1rem 0;
    font-size: 1.25rem;
    color: var(--text-primary);
}

.deep-research-report .report-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.deep-research-report .report-meta span {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.75rem;
    border-radius: 20px;
    font-size: 0.85rem;
    background: var(--bg-input);
    color: var(--text-secondary);
}

.deep-research-report .report-type {
    font-weight: 500;
}

.deep-research-report .report-summary {
    padding: 1.5rem;
    background: var(--bg-input);
    border-bottom: 1px solid var(--border-color);
}

.deep-research-report .report-summary h4 {
    margin: 0 0 0.75rem 0;
    font-size: 1rem;
    color: var(--text-primary);
}

.deep-research-report .report-summary p {
    margin: 0;
    color: var(--text-secondary);
    line-height: 1.6;
}

.deep-research-report .report-content {
    padding: 1.5rem;
    max-height: 500px;
    overflow-y: auto;
}

.deep-research-report .report-content h1,
.deep-research-report .report-content h2,
.deep-research-report .report-content h3 {
    color: var(--text-primary);
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
}

.deep-research-report .report-content h1:first-child,
.deep-research-report .report-content h2:first-child,
.deep-research-report .report-content h3:first-child {
    margin-top: 0;
}

.deep-research-report .report-content p {
    color: var(--text-secondary);
    line-height: 1.7;
    margin-bottom: 1rem;
}

.deep-research-report .report-content ul,
.deep-research-report .report-content ol {
    color: var(--text-secondary);
    padding-left: 1.5rem;
    margin-bottom: 1rem;
}

.deep-research-report .report-content li {
    margin-bottom: 0.5rem;
    line-height: 1.6;
}

.deep-research-report .report-content strong {
    color: var(--text-primary);
}

.deep-research-report .report-actions {
    display: flex;
    gap: 1rem;
    padding: 1.5rem;
    border-top: 1px solid var(--border-color);
    background: var(--bg-input);
}

/* Deep Research Error */
.deep-research-error {
    text-align: center;
    padding: 3rem 2rem;
}

.deep-research-error i {
    font-size: 3rem;
    color: #ef4444;
    margin-bottom: 1rem;
}

.deep-research-error h3 {
    margin: 0 0 0.75rem 0;
    color: var(--text-primary);
}

.deep-research-error p {
    margin: 0 0 1.5rem 0;
    color: var(--text-secondary);
}

/* Deep Research History */
.deep-research-history-container {
    display: flex;
    flex-direction: column;
}

.deep-research-history-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--border-color);
    transition: background 0.2s ease;
}

.deep-research-history-item:hover {
    background: var(--bg-input);
}

.deep-research-history-item:last-child {
    border-bottom: none;
}

.deep-research-history-item .history-item-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    font-size: 1.25rem;
    flex-shrink: 0;
}

.deep-research-history-item .history-item-content {
    flex: 1;
    min-width: 0;
}

.deep-research-history-item .history-item-content h4 {
    margin: 0 0 0.5rem 0;
    font-size: 1rem;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.deep-research-history-item .history-item-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.deep-research-history-item .history-item-meta span {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.deep-research-history-item .history-type {
    padding: 0.25rem 0.5rem;
    background: var(--bg-input);
    border-radius: 4px;
}

.deep-research-history-item .history-quality {
    padding: 0.25rem 0.5rem;
    background: rgba(16, 185, 129, 0.1);
    color: #10B981 !important;
    border-radius: 4px;
    font-weight: 500;
}

.deep-research-history-item .history-summary {
    margin: 0;
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

.deep-research-history-item .history-item-actions {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}

.deep-research-history-item .history-item-actions .danger:hover {
    color: #ef4444;
    border-color: #ef4444;
}

/* Deep Research Modal */
.deep-research-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.deep-research-modal .modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
}

.deep-research-modal .modal-content {
    position: relative;
    width: 90%;
    max-width: 900px;
    max-height: 90vh;
    background: var(--bg-card);
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.deep-research-modal .modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.5rem;
    border-bottom: 1px solid var(--border-color);
}

.deep-research-modal .modal-header h2 {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0;
    font-size: 1.25rem;
    color: var(--text-primary);
}

.deep-research-modal .modal-close {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-size: 1.25rem;
    cursor: pointer;
    border-radius: 8px;
    transition: all 0.2s ease;
}

.deep-research-modal .modal-close:hover {
    background: var(--bg-input);
    color: var(--text-primary);
}

.deep-research-modal .modal-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    padding: 1rem 1.5rem;
    background: var(--bg-input);
    border-bottom: 1px solid var(--border-color);
}

.deep-research-modal .modal-meta span {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.75rem;
    border-radius: 20px;
    font-size: 0.85rem;
    background: var(--bg-card);
    color: var(--text-secondary);
}

.deep-research-modal .modal-body {
    flex: 1;
    padding: 1.5rem;
    overflow-y: auto;
}

.deep-research-modal .modal-body h1,
.deep-research-modal .modal-body h2,
.deep-research-modal .modal-body h3 {
    color: var(--text-primary);
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
}

.deep-research-modal .modal-body p {
    color: var(--text-secondary);
    line-height: 1.7;
    margin-bottom: 1rem;
}

.deep-research-modal .modal-body ul,
.deep-research-modal .modal-body ol {
    color: var(--text-secondary);
    padding-left: 1.5rem;
    margin-bottom: 1rem;
}

.deep-research-modal .modal-body li {
    margin-bottom: 0.5rem;
    line-height: 1.6;
}

.deep-research-modal .modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--border-color);
    background: var(--bg-input);
}

/* Deep Research Notification */
.deep-research-notification {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    background: var(--bg-card);
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    color: var(--text-primary);
    font-size: 0.95rem;
    z-index: 2000;
    transform: translateY(100px);
    opacity: 0;
    transition: all 0.3s ease;
}

.deep-research-notification.show {
    transform: translateY(0);
    opacity: 1;
}

.deep-research-notification.success i {
    color: #10B981;
}

.deep-research-notification.error i {
    color: #ef4444;
}

.deep-research-notification.warning i {
    color: #F59E0B;
}

.deep-research-notification.info i {
    color: #3B82F6;
}

/* Deep Research Nav Items - 마케팅 제안서와 동일한 스타일 */
.nav-item.deep-research-item,
.nav-sub-item.deep-research-item {
    color: var(--text-secondary);
}

.nav-item.deep-research-item.active,
.nav-sub-item.deep-research-item.active,
.nav-section-items .nav-item.deep-research-item.active,
.nav-section-items .nav-sub-item.deep-research-item.active {
    background: linear-gradient(90deg, rgba(14, 165, 233, 0.2) 0%, rgba(14, 165, 233, 0) 100%) !important;
    color: #0ea5e9 !important;
    border-left: 3px solid #0ea5e9 !important;
}

.nav-item.deep-research-item:hover,
.nav-sub-item.deep-research-item:hover,
.nav-section-items .nav-item.deep-research-item:hover,
.nav-section-items .nav-sub-item.deep-research-item:hover {
    background: rgba(14, 165, 233, 0.1) !important;
    color: #38bdf8 !important;
}

.nav-item.deep-research-item.active::before,
.nav-sub-item.deep-research-item.active::before {
    background: #0ea5e9 !important;
}

/* Responsive */
@media (max-width: 768px) {
    .deep-research-container {
        padding: 1rem;
    }
    
    .deep-research-progress-wrapper {
        flex-direction: column;
        text-align: center;
    }
    
    .deep-research-history-item {
        flex-direction: column;
    }
    
    .deep-research-history-item .history-item-actions {
        width: 100%;
        justify-content: flex-end;
    }
    
    .deep-research-modal .modal-content {
        width: 95%;
        max-height: 95vh;
    }
    
    .deep-research-report .report-meta {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .deep-research-report .report-actions {
        flex-direction: column;
    }
}

/* =========================================
   [EC2_DISABLED] 비활성화된 기능 스타일
   AWS EC2 배포용 - 복원 시 이 섹션 삭제
   ========================================= */

/* 비활성화된 네비게이션 아이템 */
.nav-item.nav-disabled,
.nav-sub-item.nav-disabled {
    opacity: 0.4;
    pointer-events: none;
    cursor: not-allowed;
    position: relative;
}

.nav-item.nav-disabled:hover,
.nav-sub-item.nav-disabled:hover {
    background: transparent !important;
    color: var(--text-secondary) !important;
}

/* 비활성화된 섹션 */
.nav-section.nav-section-disabled {
    opacity: 0.5;
}

.nav-section.nav-section-disabled .nav-section-header {
    pointer-events: none;
    cursor: not-allowed;
}

.nav-section.nav-section-disabled .nav-section-header:hover {
    background: transparent !important;
}

/* 비활성화 뱃지 */
.disabled-badge {
    display: inline-block;
    padding: 2px 6px;
    font-size: 0.6rem;
    font-weight: 600;
    color: #fff;
    background: linear-gradient(135deg, #6b7280, #4b5563);
    border-radius: 4px;
    margin-left: auto;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* 비활성화된 헤더의 화살표 숨김 */
.nav-section.nav-section-disabled .section-arrow {
    display: none;
}

/* 클릭 차단 오버레이 (추가 보안) */
.nav-disabled::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
}

/* =========================================
   이미지 생성 진행 상태 스타일
   ========================================= */

/* 이미지 생성 스피너 애니메이션 */
.image-gen-spinner {
    width: 24px;
    height: 24px;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: imageGenSpin 1s linear infinite;
}

@keyframes imageGenSpin {
    to {
        transform: rotate(360deg);
    }
}

/* 진행 상태 펄스 효과 */
#google-image-generation-status .widget {
    animation: progressPulse 2s ease-in-out infinite;
}

@keyframes progressPulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(66, 133, 244, 0.4);
    }
    50% {
        box-shadow: 0 0 20px 5px rgba(66, 133, 244, 0.2);
    }
}

/* 진행 바 그라데이션 애니메이션 */
#google-image-progress-bar {
    background: linear-gradient(90deg, #4285f4, #34a853, #4285f4);
    background-size: 200% 100%;
    animation: progressGradient 2s linear infinite;
}

@keyframes progressGradient {
    0% {
        background-position: 0% 50%;
    }
    100% {
        background-position: 200% 50%;
    }
}

/* 취소 버튼 스타일 */
#google-image-cancel-btn {
    background: rgba(239, 68, 68, 0.9);
    border: none;
    color: white;
    transition: all 0.2s ease;
}

#google-image-cancel-btn:hover {
    background: #dc2626;
    transform: scale(1.05);
}

#google-image-cancel-btn:active {
    transform: scale(0.95);
}

/* 현재 프롬프트 표시 영역 */
#google-image-current-prompt {
    max-width: 100%;
    display: block;
}

/* =========================================
   썸네일 마스터 AI Pro 스타일
   ========================================= */

/* 썸네일 mode-tab 활성화 스타일 (YouTube/SNS와 동일한 테두리 스타일) */
.thumbnail-mode-tabs .mode-tab.active {
    border-color: var(--thumbnail-primary) !important;
    border-width: 2px !important;
    background: rgba(6, 182, 212, 0.15) !important;
    color: var(--text-primary) !important;
}

.thumbnail-mode-tabs .mode-tab.active i {
    color: var(--thumbnail-primary) !important;
}

.thumbnail-mode-tabs .mode-tab:hover:not(.active) {
    background: rgba(6, 182, 212, 0.08) !important;
    border-color: rgba(6, 182, 212, 0.5) !important;
}

.thumbnail-mode-tabs .mode-tab:hover:not(.active) i {
    color: var(--thumbnail-primary);
}

/* 썸네일 카드 스타일 */
.thumbnail-card {
    background: var(--bg-card);
    border-radius: 16px;
    border: 1px solid var(--border-color);
    padding: 1.5rem;
    margin-bottom: 0;
    transition: all 0.3s ease;
}

.thumbnail-card.collapsed {
    padding: 1rem 1.5rem;
}

.thumbnail-card.collapsed .thumbnail-card-content {
    display: none;
}

.thumbnail-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    margin-bottom: 1rem;
}

.thumbnail-card.collapsed .thumbnail-card-header {
    margin-bottom: 0;
}

.thumbnail-card-title {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
}

.thumbnail-card-title-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: var(--thumbnail-gradient);
    color: white;
}

.thumbnail-card-toggle {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    background: var(--bg-input);
    color: var(--text-secondary);
    transition: all 0.3s ease;
}

.thumbnail-card.collapsed .thumbnail-card-toggle {
    transform: rotate(-90deg);
}

/* 썸네일 입력 필드 */
.thumbnail-input-group {
    margin-bottom: 1.25rem;
}

.thumbnail-input-label {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
}

.thumbnail-input {
    width: 100%;
    padding: 0.875rem 1rem;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    color: var(--text-primary);
    font-size: 0.9375rem;
    transition: all 0.2s ease;
}

.thumbnail-input:focus {
    outline: none;
    border-color: var(--thumbnail-primary);
    box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.15);
}

.thumbnail-textarea {
    min-height: 120px;
    resize: vertical;
}

/* 썸네일 파일 업로드 */
.thumbnail-upload-area {
    border: 2px dashed var(--border-color);
    border-radius: 12px;
    padding: 2rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.thumbnail-upload-area:hover {
    border-color: var(--thumbnail-primary);
    background: rgba(6, 182, 212, 0.05);
}

.thumbnail-upload-area.dragover {
    border-color: var(--thumbnail-primary);
    background: rgba(6, 182, 212, 0.1);
}

.thumbnail-upload-icon {
    width: 48px;
    height: 48px;
    margin: 0 auto 1rem;
    color: var(--thumbnail-primary);
}

.thumbnail-upload-text {
    color: var(--text-secondary);
    font-size: 0.875rem;
}

.thumbnail-upload-text strong {
    color: var(--thumbnail-primary);
}

/* 썸네일 이미지 미리보기 */
.thumbnail-preview {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    margin-top: 1rem;
}

.thumbnail-preview img {
    width: 100%;
    max-height: 200px;
    object-fit: contain;
    background: var(--bg-input);
    border-radius: 12px;
}

.thumbnail-preview-remove {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(239, 68, 68, 0.9);
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.thumbnail-preview-remove:hover {
    background: #dc2626;
    transform: scale(1.1);
}

/* 썸네일 캐릭터 설정 */
.thumbnail-character-toggle {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: var(--bg-input);
    border-radius: 10px;
    margin-bottom: 1rem;
}

.thumbnail-toggle-switch {
    position: relative;
    width: 48px;
    height: 26px;
    background: var(--border-color);
    border-radius: 13px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.thumbnail-toggle-switch.active {
    background: var(--thumbnail-gradient);
}

.thumbnail-toggle-switch::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    background: white;
    border-radius: 50%;
    transition: all 0.3s ease;
}

.thumbnail-toggle-switch.active::after {
    left: 25px;
}

/* 썸네일 캐릭터 타입 선택 */
.thumbnail-type-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.thumbnail-type-option {
    padding: 1rem;
    background: var(--bg-input);
    border: 2px solid var(--border-color);
    border-radius: 10px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.thumbnail-type-option:hover {
    border-color: var(--thumbnail-secondary);
}

.thumbnail-type-option.selected {
    border-color: var(--thumbnail-primary);
    background: rgba(6, 182, 212, 0.1);
}

.thumbnail-type-icon {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}

.thumbnail-type-label {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-primary);
}

/* 썸네일 오디언스 선택 */
.thumbnail-audience-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.thumbnail-audience-card {
    padding: 1.25rem;
    background: var(--bg-input);
    border: 2px solid var(--border-color);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.thumbnail-audience-card:hover {
    border-color: var(--thumbnail-secondary);
    transform: translateY(-2px);
}

.thumbnail-audience-card.selected {
    border-color: var(--thumbnail-primary);
    background: rgba(6, 182, 212, 0.1);
    box-shadow: 0 4px 12px rgba(6, 182, 212, 0.2);
}

.thumbnail-audience-icon {
    font-size: 2rem;
    margin-bottom: 0.75rem;
}

.thumbnail-audience-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}

.thumbnail-audience-desc {
    font-size: 0.8125rem;
    color: var(--text-secondary);
}

/* 썸네일 전략 결과 */
.thumbnail-strategy-summary {
    padding: 1.25rem;
    background: rgba(6, 182, 212, 0.1);
    border-radius: 12px;
    border-left: 4px solid var(--thumbnail-primary);
    margin-bottom: 1.5rem;
}

.thumbnail-strategy-summary h4 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--thumbnail-primary);
    margin-bottom: 0.5rem;
}

.thumbnail-strategy-summary p {
    color: var(--text-secondary);
    font-size: 0.9375rem;
    line-height: 1.6;
}

/* 썸네일 참조 분석 카드 */
.thumbnail-analysis-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.thumbnail-analysis-item {
    padding: 1rem;
    background: var(--bg-input);
    border-radius: 10px;
}

.thumbnail-analysis-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--thumbnail-primary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.5rem;
}

.thumbnail-analysis-value {
    font-size: 0.875rem;
    color: var(--text-primary);
    line-height: 1.5;
}

/* 썸네일 요소 선택 (피사체 보존) */
.thumbnail-elements-section {
    margin: 1.5rem 0;
    padding: 1.25rem;
    background: rgba(6, 182, 212, 0.08);
    border: 1px solid rgba(6, 182, 212, 0.2);
    border-radius: 12px;
}

.thumbnail-elements-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
    flex-wrap: wrap;
}

.thumbnail-elements-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1rem;
    font-weight: 600;
    color: #f8fafc !important;
}

.thumbnail-elements-title i {
    color: var(--thumbnail-primary);
}

.thumbnail-elements-subtitle {
    font-size: 0.8125rem;
    color: #94a3b8 !important;
    font-weight: 400;
}

.thumbnail-elements-help {
    font-size: 0.8125rem;
    color: #cbd5e1 !important;
    margin-bottom: 1rem;
    padding: 0.75rem 1rem;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    border-left: 3px solid var(--thumbnail-primary);
}

.thumbnail-help-selected {
    color: var(--thumbnail-primary) !important;
    font-weight: 600;
}

.thumbnail-help-deselected {
    color: #f87171 !important;
    font-weight: 600;
}

.thumbnail-elements-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 0.75rem;
}

.thumbnail-elements-summary {
    margin-top: 0.75rem;
    font-size: 0.8125rem;
    text-align: right;
    color: #94a3b8;
}

/* Qwen 레이어 섹션 */
.thumbnail-qwen-layers-section {
    margin: 1.5rem 0;
    padding: 1.25rem;
    background: rgba(139, 92, 246, 0.08);
    border: 1px solid rgba(139, 92, 246, 0.2);
    border-radius: 12px;
}

.thumbnail-qwen-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.thumbnail-qwen-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1rem;
    font-weight: 600;
    color: #f8fafc !important;
}

.thumbnail-qwen-title i {
    color: #8B5CF6;
}

.thumbnail-qwen-help {
    font-size: 0.8125rem;
    color: #cbd5e1 !important;
    margin-bottom: 1rem;
    padding: 0.75rem 1rem;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    border-left: 3px solid #EC4899;
}

.thumbnail-qwen-layers-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 0.75rem;
}

.thumbnail-layers-summary {
    margin-top: 0.75rem;
    font-size: 0.8125rem;
    text-align: right;
    color: #94a3b8;
}

/* 옵션 헤더 */
.thumbnail-options-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 1.5rem 0 1rem;
}

.thumbnail-options-header i {
    color: var(--thumbnail-primary);
}

.thumbnail-element-chip {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.thumbnail-element-chip:hover {
    border-color: var(--thumbnail-secondary);
    background: rgba(255, 255, 255, 0.08);
    transform: translateY(-1px);
}

.thumbnail-element-chip.selected {
    border-color: var(--thumbnail-primary);
    background: rgba(6, 182, 212, 0.2);
    box-shadow: 0 0 12px rgba(6, 182, 212, 0.3);
}

.thumbnail-element-checkbox {
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.thumbnail-element-chip.selected .thumbnail-element-checkbox {
    background: var(--thumbnail-primary);
    border-color: var(--thumbnail-primary);
}

.thumbnail-element-name {
    font-size: 0.875rem;
    font-weight: 600;
    color: #f8fafc !important;
    flex: 1;
    line-height: 1.3;
}

.thumbnail-element-position {
    font-size: 0.75rem;
    color: #94a3b8 !important;
    margin-left: 0.25rem;
    white-space: nowrap;
}

/* Qwen 레이어 카드 */
.thumbnail-layer-card {
    display: flex;
    flex-direction: column;
    padding: 12px;
    background: var(--bg-input);
    border: 2px solid var(--border-color);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.thumbnail-layer-card:hover {
    border-color: var(--thumbnail-primary);
    transform: translateY(-2px);
}

.thumbnail-layer-card.selected {
    border-color: var(--thumbnail-primary);
    background: rgba(139, 92, 246, 0.1);
}

.thumbnail-layer-preview {
    width: 100%;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.05);
    border-radius: 6px;
    margin-bottom: 8px;
    overflow: hidden;
}

.thumbnail-layer-info {
    flex: 1;
}

.thumbnail-layer-title {
    font-size: 0.8rem;
    font-weight: 600;
    color: #f8fafc !important; /* 명시적 흰색 - 가시성 보장 */
    display: flex;
    align-items: center;
}

.thumbnail-layer-type {
    font-size: 0.7rem;
    margin-top: 2px;
}

.thumbnail-layer-coverage {
    font-size: 0.65rem;
    color: #888;
    margin-top: 2px;
}

.thumbnail-layer-checkbox {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(139, 92, 246, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.thumbnail-layer-card.selected .thumbnail-layer-checkbox {
    opacity: 1;
    background: var(--thumbnail-primary);
    color: white;
}

.thumbnail-layer-card {
    position: relative;
}

/* 썸네일 옵션 카드 */
.thumbnail-options-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.thumbnail-option-card {
    padding: 1.25rem;
    background: var(--bg-input);
    border: 2px solid var(--border-color);
    border-radius: 12px;
    transition: all 0.3s ease;
}

.thumbnail-option-card.selected {
    border-color: var(--thumbnail-primary);
    box-shadow: 0 4px 12px rgba(6, 182, 212, 0.2);
}

.thumbnail-option-label {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    background: var(--thumbnail-gradient);
    color: white;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 4px;
    margin-bottom: 0.75rem;
}

.thumbnail-option-main-text {
    font-size: 1.125rem;
    font-weight: 700;
    color: #f8fafc !important; /* 명시적 흰색 - 가시성 보장 */
    margin-bottom: 0.5rem;
}

.thumbnail-option-sub-text {
    font-size: 0.875rem;
    color: #94a3b8 !important; /* 명시적 밝은 회색 - 가시성 보장 */
}

/* 썸네일 생성 옵션 */
.thumbnail-gen-options {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.thumbnail-gen-option {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.thumbnail-gen-option label {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-secondary);
}

.thumbnail-gen-option select {
    padding: 0.625rem 0.875rem;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 0.875rem;
    cursor: pointer;
}

.thumbnail-gen-option select:focus {
    outline: none;
    border-color: var(--thumbnail-primary);
}

/* 썸네일 버튼 */
.thumbnail-btn {
    padding: 0.875rem 1.5rem;
    border: none;
    border-radius: 10px;
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.thumbnail-btn-primary {
    background: var(--thumbnail-gradient);
    color: white;
}

.thumbnail-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(6, 182, 212, 0.4);
}

.thumbnail-btn-primary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

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

.thumbnail-btn-secondary:hover {
    background: var(--border-color);
}

.thumbnail-btn-full {
    width: 100%;
}

/* 썸네일 결과 이미지 */
.thumbnail-results-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}

.thumbnail-result-item {
    background: var(--bg-input);
    border-radius: 12px;
    overflow: hidden;
}

.thumbnail-result-image {
    position: relative;
    aspect-ratio: 16/9;
    background: var(--bg-dark);
}

.thumbnail-result-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.thumbnail-result-actions {
    display: flex;
    gap: 0.5rem;
    padding: 1rem;
}

.thumbnail-result-btn {
    flex: 1;
    padding: 0.625rem;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.thumbnail-result-btn:hover {
    background: var(--thumbnail-light);
    border-color: var(--thumbnail-primary);
    color: var(--thumbnail-primary);
}

/* Canvas 편집 툴바 */
.thumbnail-canvas-tool {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid #444;
    border-radius: 8px;
    color: #999;
    cursor: pointer;
    transition: all 0.2s ease;
}

.thumbnail-canvas-tool:hover {
    background: #333;
    color: white;
}

.thumbnail-canvas-tool.active {
    background: var(--thumbnail-primary);
    border-color: var(--thumbnail-primary);
    color: white;
}

/* 썸네일 로딩 상태 */
.thumbnail-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem;
    text-align: center;
}

.thumbnail-loading-spinner {
    width: 48px;
    height: 48px;
    border: 4px solid var(--border-color);
    border-top-color: var(--thumbnail-primary);
    border-radius: 50%;
    animation: thumbnailSpin 1s linear infinite;
    margin-bottom: 1rem;
}

@keyframes thumbnailSpin {
    to {
        transform: rotate(360deg);
    }
}

.thumbnail-loading-text {
    color: var(--text-secondary);
    font-size: 0.9375rem;
}

/* 썸네일 에러 상태 */
.thumbnail-error {
    padding: 1.25rem;
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: 10px;
    color: #f87171;
    font-size: 0.9375rem;
}

/* ============================================
   썸네일 UI/UX 개선 스타일
   ============================================ */

/* 섹션 구분 */
.thumbnail-section {
    padding: 1.25rem;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    margin-bottom: 1.25rem;
}

.thumbnail-section:last-of-type {
    margin-bottom: 1.5rem;
}

.thumbnail-section-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border-color);
}

.thumbnail-section-header i {
    color: var(--thumbnail-primary);
    font-size: 1rem;
}

/* 필수/선택 배지 */
.thumbnail-required-badge {
    font-size: 0.625rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 4px;
    background: rgba(239, 68, 68, 0.15);
    color: #f87171;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-left: auto;
}

.thumbnail-optional-badge {
    font-size: 0.625rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 4px;
    background: rgba(6, 182, 212, 0.15);
    color: var(--thumbnail-primary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-left: auto;
}

/* 컴팩트 업로드 영역 */
.thumbnail-upload-compact {
    padding: 0.75rem 1rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.thumbnail-upload-icon-small {
    font-size: 1.25rem;
    color: var(--thumbnail-primary);
    flex-shrink: 0;
}

.thumbnail-upload-text-compact {
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.thumbnail-upload-text-compact strong {
    color: var(--thumbnail-primary);
}

/* 보조 텍스트 가독성 개선 */
.thumbnail-text-muted {
    color: var(--text-secondary) !important;
    opacity: 0.85;
}

/* 분석 옵션 영역 개선 */
.thumbnail-analysis-options {
    margin-top: 1rem;
    padding: 1rem;
    background: rgba(139, 92, 246, 0.05);
    border: 1px solid rgba(139, 92, 246, 0.15);
    border-radius: 10px;
}

.thumbnail-analysis-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 1rem;
}

.thumbnail-analysis-header i {
    color: #8B5CF6;
}

/* 옵션 행 */
.thumbnail-option-row {
    margin-bottom: 0.875rem;
}

.thumbnail-option-row:last-of-type {
    margin-bottom: 0;
}

.thumbnail-checkbox-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 6px;
    transition: background 0.2s ease;
}

.thumbnail-checkbox-label:hover {
    background: rgba(255, 255, 255, 0.05);
}

.thumbnail-checkbox-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--thumbnail-primary);
    cursor: pointer;
}

.thumbnail-checkbox-text {
    font-size: 0.875rem;
    color: var(--text-primary);
}

.thumbnail-option-desc {
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-left: 1.75rem;
    margin-top: 0.25rem;
    line-height: 1.4;
}

/* 배지 스타일 */
.thumbnail-badge {
    font-size: 0.625rem;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 4px;
    color: white;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.thumbnail-badge-recommend {
    background: linear-gradient(135deg, #10B981, #3B82F6);
}

.thumbnail-badge-pro {
    background: linear-gradient(135deg, #8B5CF6, #EC4899);
}

/* Qwen 옵션 */
.thumbnail-qwen-options {
    display: none;
    margin-top: 0.75rem;
    padding: 1rem;
    background: rgba(139, 92, 246, 0.08);
    border-radius: 8px;
    border: 1px solid rgba(139, 92, 246, 0.2);
}

.thumbnail-slider-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.thumbnail-slider-label {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    white-space: nowrap;
}

.thumbnail-slider {
    flex: 1;
    accent-color: #8B5CF6;
    height: 6px;
}

.thumbnail-slider-value {
    font-weight: 600;
    color: #8B5CF6;
    min-width: 24px;
    text-align: center;
}

/* 분석 결과 영역 */
.thumbnail-analysis-result {
    display: none;
    margin-top: 1rem;
}

.thumbnail-analysis-loading {
    display: none;
    text-align: center;
    padding: 1.5rem;
    color: var(--text-secondary);
}

.thumbnail-analysis-loading i {
    font-size: 1.5rem;
    color: #8B5CF6;
    margin-bottom: 0.5rem;
    display: block;
}

/* 옵션 편집 그룹 */
.thumbnail-option-edit-group {
    margin-top: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.thumbnail-input-sm {
    padding: 0.5rem 0.75rem;
    font-size: 0.8125rem;
}

/* 생성 옵션 섹션 */
.thumbnail-gen-section {
    margin: 1.5rem 0;
    padding: 1.25rem;
    background: rgba(6, 182, 212, 0.05);
    border: 1px solid rgba(6, 182, 212, 0.15);
    border-radius: 12px;
}

.thumbnail-gen-section-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 1rem 0;
}

.thumbnail-gen-section-title i {
    color: var(--thumbnail-primary);
}

/* 라벨 힌트 텍스트 */
.thumbnail-label-hint {
    font-weight: 400;
    color: var(--text-secondary);
    font-size: 0.75rem;
    margin-left: 0.5rem;
}

/* 입력 힌트 텍스트 */
.thumbnail-input-hint {
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-top: 0.375rem;
    line-height: 1.4;
}

/* 옵션 카드 텍스트 가독성 개선 */
.thumbnail-option-main-text {
    font-size: 1.125rem;
    font-weight: 700;
    color: #f8fafc !important;
    line-height: 1.4;
    margin-bottom: 0.5rem;
}

.thumbnail-option-sub-text {
    font-size: 0.875rem;
    color: #cbd5e1 !important;
    line-height: 1.5;
}

/* 요소 아이콘 */

.thumbnail-element-icon {
    margin-right: 0.375rem;
    font-size: 0.75rem;
}

.thumbnail-element-checkbox i {
    font-size: 0.625rem;
    color: white;
}

/* 섹션 타이틀 */
.thumbnail-elements-title,
.thumbnail-layer-title {
    color: #f8fafc !important;
    font-weight: 600;
}

/* 분석 그리드 라벨/값 */
.thumbnail-analysis-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--thumbnail-primary) !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.5rem;
}

.thumbnail-analysis-value {
    font-size: 0.875rem;
    color: var(--text-primary) !important;
    line-height: 1.5;
}

/* 결과 항목 제목 */
.thumbnail-result-title {
    font-weight: 600;
    color: var(--text-primary) !important;
    margin-bottom: 0.25rem;
}

.thumbnail-result-subtitle {
    font-size: 0.8125rem;
    color: var(--text-secondary) !important;
}

/* 결과 이미지 클릭 가능 표시 */
.thumbnail-result-clickable {
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.thumbnail-result-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.thumbnail-result-overlay i {
    font-size: 2rem;
    color: white;
}

.thumbnail-result-clickable:hover .thumbnail-result-overlay {
    opacity: 1;
}

/* ============================================
   분석 결과 표시 스타일
   ============================================ */

.thumbnail-analysis-time {
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-bottom: 0.75rem;
    text-align: right;
}

.thumbnail-analysis-block {
    margin-bottom: 1rem;
    padding: 1rem;
    border-radius: 8px;
}

.thumbnail-analysis-llm {
    background: rgba(16, 185, 129, 0.08);
    border: 1px solid rgba(16, 185, 129, 0.2);
}

.thumbnail-analysis-qwen {
    background: rgba(139, 92, 246, 0.08);
    border: 1px solid rgba(139, 92, 246, 0.2);
}

.thumbnail-analysis-insights {
    background: rgba(59, 130, 246, 0.08);
    border: 1px solid rgba(59, 130, 246, 0.2);
}

.thumbnail-analysis-block-title {
    font-weight: 600;
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.875rem;
}

.thumbnail-analysis-llm-title {
    color: #10B981;
}

.thumbnail-analysis-qwen-title {
    color: #8B5CF6;
}

.thumbnail-analysis-insights-title {
    color: #3B82F6;
}

.thumbnail-analysis-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
    font-size: 0.8125rem;
}

.thumbnail-analysis-item {
    color: var(--text-primary);
}

.thumbnail-analysis-item-label {
    color: var(--text-secondary);
}

.thumbnail-analysis-concept {
    margin-top: 0.75rem;
    padding: 0.5rem;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 6px;
    font-size: 0.8125rem;
    color: var(--text-primary);
}

.thumbnail-analysis-sub-label {
    font-size: 0.75rem;
    color: var(--text-secondary);
    display: block;
    margin-bottom: 0.375rem;
}

.thumbnail-analysis-colors,
.thumbnail-analysis-keywords {
    margin-top: 0.75rem;
}

.thumbnail-color-swatches {
    display: flex;
    gap: 0.25rem;
}

.thumbnail-color-swatch {
    width: 24px;
    height: 24px;
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.thumbnail-keyword-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.thumbnail-keyword-tag {
    padding: 2px 8px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    font-size: 0.6875rem;
    color: var(--text-primary);
}

/* 레이어 그리드 */
.thumbnail-layers-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: 0.5rem;
}

.thumbnail-layer-mini {
    cursor: pointer;
    padding: 0.375rem;
    border-radius: 6px;
    border: 2px solid var(--border-color);
    background: rgba(255, 255, 255, 0.03);
    text-align: center;
    transition: all 0.2s ease;
}

.thumbnail-layer-mini.selected {
    border-color: #8B5CF6;
    background: rgba(139, 92, 246, 0.1);
}

.thumbnail-layer-mini.deselected {
    border-color: #ff4444;
    background: rgba(255, 68, 68, 0.05);
}

.thumbnail-layer-mini:hover {
    border-color: #8B5CF6;
    transform: translateY(-2px);
}

.thumbnail-layer-preview {
    width: 100%;
    height: 50px;
    object-fit: contain;
    border-radius: 4px;
}

.thumbnail-layer-placeholder {
    width: 100%;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
    color: #8B5CF6;
}

.thumbnail-layer-label {
    font-size: 0.65rem;
    color: var(--text-secondary);
    margin-top: 0.25rem;
}

.thumbnail-layer-hint {
    font-size: 0.6875rem;
    color: var(--text-secondary);
    margin-top: 0.5rem;
}

/* 추천 사항 리스트 */
.thumbnail-recommendations-list {
    margin: 0;
    padding-left: 1.25rem;
    font-size: 0.8125rem;
    color: var(--text-primary);
}

.thumbnail-recommendations-list li {
    margin-bottom: 0.25rem;
    line-height: 1.5;
}

/* 재현 프롬프트 */
.thumbnail-reproduction-prompt {
    margin-top: 1rem;
    padding: 0.75rem;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 6px;
    border: 1px solid var(--border-color);
}

.thumbnail-reproduction-label {
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-bottom: 0.25rem;
}

.thumbnail-reproduction-text {
    font-size: 0.8125rem;
    color: var(--text-primary);
    font-family: 'JetBrains Mono', monospace;
    word-break: break-all;
    line-height: 1.5;
}

/* 결과 정보 영역 */
.thumbnail-result-info {
    padding: 0.75rem;
}

.thumbnail-result-title {
    font-weight: 600;
    color: var(--text-primary) !important;
    margin-bottom: 0.25rem;
    font-size: 0.9375rem;
}

.thumbnail-result-subtitle {
    font-size: 0.8125rem;
    color: var(--text-secondary) !important;
    line-height: 1.4;
}

/* 반응형 */
@media (max-width: 768px) {
    .thumbnail-steps {
        flex-wrap: wrap;
    }
    
    .thumbnail-step {
        flex: 1 1 auto;
        min-width: 120px;
        justify-content: center;
    }
    
    .thumbnail-type-grid,
    .thumbnail-audience-grid,
    .thumbnail-options-row,
    .thumbnail-results-grid {
        grid-template-columns: 1fr;
    }
    
    .thumbnail-gen-options {
        grid-template-columns: 1fr;
    }
    
    .thumbnail-analysis-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   Cinema AI 스타일
   숏폼 영상 제작 AI 전용 스타일
   ============================================================ */

/* Cinema 테마 변수 */
:root {
    --cinema-primary: #ec4899;
    --cinema-secondary: #8b5cf6;
    --cinema-hover: #db2777;
    --cinema-light: rgba(236, 72, 153, 0.1);
    --cinema-gradient: linear-gradient(135deg, #ec4899 0%, #8b5cf6 100%);
}

.cinema-theme {
    --theme-primary: var(--cinema-primary);
    --theme-secondary: var(--cinema-secondary);
    --theme-hover: var(--cinema-hover);
    --theme-light: var(--cinema-light);
    --theme-gradient: var(--cinema-gradient);
}

/* Cinema mode-tab 기본 스타일 */
#cinema-studio-tab .cinema-mode-tabs .mode-tab {
    background: var(--bg-card) !important;
}

#cinema-studio-tab .cinema-mode-tabs .mode-tab i {
    color: white !important;
}

/* Cinema mode-tab 활성화 스타일 (YouTube/SNS와 동일한 테두리 스타일) */
#cinema-studio-tab .cinema-mode-tabs .mode-tab.active {
    border-color: var(--cinema-primary) !important;
    border-width: 2px !important;
    background: rgba(236, 72, 153, 0.15) !important;
    color: var(--text-primary) !important;
}

#cinema-studio-tab .cinema-mode-tabs .mode-tab.active i {
    color: var(--cinema-primary) !important;
}

#cinema-studio-tab .cinema-mode-tabs .mode-tab:hover:not(.active) {
    background: rgba(236, 72, 153, 0.08) !important;
    border-color: rgba(236, 72, 153, 0.5) !important;
}

#cinema-studio-tab .cinema-mode-tabs .mode-tab:hover:not(.active) i {
    color: var(--cinema-primary) !important;
}

/* Cinema 내부 탭 네비게이션 */
.cinema-internal-tabs {
    display: flex;
    gap: 0.5rem;
    padding: 1rem;
    background: var(--bg-card);
    border-radius: 12px;
    margin-bottom: 1rem;
    border: 1px solid var(--border-color);
}

.cinema-tab-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 8px;
    color: var(--text-secondary);
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.cinema-tab-btn:hover {
    background: rgba(236, 72, 153, 0.1);
    color: var(--text-primary);
}

.cinema-tab-btn.active {
    background: linear-gradient(135deg, #ec4899, #8b5cf6);
    color: white;
    border-color: transparent;
}

.cinema-tab-btn i {
    font-size: 1rem;
}

/* Cinema 탭 콘텐츠 */
.cinema-tab-content {
    display: none;
}

.cinema-tab-content.active {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Cinema 입력 섹션 */
.cinema-input-section .widget-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
}

.cinema-input-section .widget-header h3 {
    margin: 0;
}

.cinema-input-section .form-group label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.cinema-input-section .form-group label i {
    color: var(--cinema-primary);
}

.cinema-input-section .form-group label .required {
    color: var(--danger-color);
}

/* 이미지 액션 바 */
.image-upload-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.image-upload-actions .image-counter {
    padding: 0.4rem 0.75rem;
    background: var(--bg-tertiary);
    border-radius: 6px;
    font-size: 0.8rem;
    color: var(--text-muted);
    font-weight: 500;
}

.cinema-clear-btn {
    padding: 0.4rem 0.75rem;
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    border-radius: 6px;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-left: auto;
}

.cinema-clear-btn:hover {
    border-color: var(--danger-color);
    color: var(--danger-color);
    background: rgba(239, 68, 68, 0.1);
}

/* Cinema 입력 모드 */
.cinema-input-mode {
    display: none;
}

.cinema-input-mode.active {
    display: block;
}

/* 이미지 업로드 영역 */
.cinema-image-upload-area {
    border: 2px dashed var(--border-color);
    border-radius: 10px;
    padding: 1.5rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    background: var(--bg-tertiary);
}

.cinema-image-upload-area:hover,
.cinema-image-upload-area.drag-over {
    border-color: var(--cinema-primary);
    background: rgba(139, 92, 246, 0.08);
}

.cinema-image-upload-area i {
    font-size: 2rem;
    color: var(--cinema-primary);
    margin-bottom: 0.5rem;
    opacity: 0.7;
}

.cinema-image-upload-area p {
    color: var(--text-secondary);
    margin: 0.25rem 0;
    font-size: 0.9rem;
}

.cinema-image-upload-area .help-text {
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* 이미지 미리보기 */
.cinema-image-preview {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: 0.75rem;
    margin-top: 0.75rem;
}

.cinema-image-preview:empty {
    display: none;
}

.image-preview-item {
    position: relative;
    aspect-ratio: 1;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    transition: transform 0.2s ease;
}

.image-preview-item:hover {
    transform: scale(1.05);
}

.image-preview-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.image-preview-item .remove-image-btn {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(239, 68, 68, 0.9);
    border: none;
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
}

.image-preview-item .image-index {
    position: absolute;
    bottom: 4px;
    left: 4px;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.75rem;
}

/* Cinema 버튼 */
.cinema-btn {
    background: var(--cinema-gradient) !important;
}

.cinema-btn:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}

/* Cinema 폼 액션 버튼 가로 배치 */
.cinema-theme .form-actions,
.cinema-tab-content .form-actions {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
}

.cinema-theme .form-actions > button,
.cinema-tab-content .form-actions > button {
    flex: 0 0 auto;
}

/* Cinema 버튼 비활성화 상태 */
.cinema-theme button:disabled,
.cinema-tab-content button:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none !important;
}

/* 분석 결과 그리드 */
.cinema-analysis-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1rem;
}

.analysis-card {
    background: var(--bg-input);
    border-radius: 10px;
    padding: 1.25rem;
    border: 1px solid var(--border-color);
}

.analysis-card h4 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
    color: var(--cinema-primary);
    font-size: 1rem;
}

.analysis-card .analysis-content p {
    margin: 0.5rem 0;
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.analysis-card .analysis-content strong {
    color: var(--text-primary);
}

/* 키프레임 그리드 */
.cinema-keyframes-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-top: 1rem;
}

.keyframe-card {
    background: var(--bg-input);
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--border-color);
}

.keyframe-card .keyframe-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem;
    background: var(--cinema-gradient);
    color: white;
}

.keyframe-card .keyframe-number {
    font-weight: 600;
    font-size: 0.75rem;
}

.keyframe-card .keyframe-duration {
    font-size: 0.75rem;
    opacity: 0.9;
}

.keyframe-card .keyframe-body {
    padding: 0.75rem;
}

.keyframe-card .keyframe-body p {
    margin: 0.25rem 0;
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.keyframe-card .keyframe-body strong {
    color: var(--text-primary);
}

/* 키프레임 감정 비트 및 전환 표시 */
.keyframe-card .keyframe-beat {
    font-size: 0.7rem;
    padding: 2px 8px;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.3) 0%, rgba(168, 85, 247, 0.3) 100%);
    color: var(--accent-purple);
    border-radius: 10px;
    margin-left: 8px;
    font-weight: 500;
}

.keyframe-card .keyframe-transition {
    font-size: 0.75rem;
    color: var(--text-muted);
    background: rgba(99, 102, 241, 0.1);
    padding: 4px 8px;
    border-radius: 4px;
    margin-top: 4px;
    border-left: 2px solid var(--accent-purple);
}

.keyframe-card .keyframe-transition strong {
    color: var(--accent-purple);
    font-weight: 600;
}

/* ============================================================
   Cinema Studio 업그레이드 스타일 (pltt-cinema-ai 동기화)
   ============================================================ */

/* 컨셉 프리셋 선택기 */
.cinema-concept-presets {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 0.75rem;
}

@media (max-width: 1200px) {
    .cinema-concept-presets {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .cinema-concept-presets {
        grid-template-columns: repeat(2, 1fr);
    }
}

.concept-preset-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem;
    border: 2px solid var(--border-color);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    background: var(--bg-secondary);
}

.concept-preset-item:hover {
    border-color: var(--cinema-primary);
    transform: translateY(-2px);
}

.concept-preset-item.active {
    border-color: var(--cinema-primary);
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.1) 0%, rgba(168, 85, 247, 0.1) 100%);
    box-shadow: 0 4px 15px rgba(139, 92, 246, 0.2);
}

.concept-preset-item .preset-icon {
    font-size: 1.5rem;
    color: var(--text-muted);
    transition: color 0.2s;
}

.concept-preset-item.active .preset-icon {
    color: var(--cinema-primary);
}

.concept-preset-item .preset-label {
    font-size: 0.8rem;
    color: var(--text-secondary);
    text-align: center;
    font-weight: 500;
}

.concept-preset-item.active .preset-label {
    color: var(--cinema-primary);
}

/* 플랫폼 선택기 */
.cinema-platform-selector {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem;
}

@media (max-width: 768px) {
    .cinema-platform-selector {
        grid-template-columns: repeat(2, 1fr);
    }
}

.platform-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    border: 2px solid var(--border-color);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    background: var(--bg-secondary);
    position: relative;
}

.platform-item:hover {
    border-color: var(--cinema-primary);
}

.platform-item.active {
    border-color: var(--cinema-primary);
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.1) 0%, rgba(168, 85, 247, 0.1) 100%);
}

.platform-item i {
    font-size: 1.25rem;
    color: var(--text-muted);
    width: 24px;
    text-align: center;
}

.platform-item.active i {
    color: var(--cinema-primary);
}

.platform-item .platform-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.platform-item .platform-name {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
}

.platform-item .platform-desc {
    font-size: 0.7rem;
    color: var(--text-muted);
}

.platform-item .platform-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    font-size: 0.6rem;
    padding: 2px 6px;
    background: linear-gradient(135deg, var(--cinema-primary) 0%, var(--cinema-secondary) 100%);
    color: white;
    border-radius: 8px;
    font-weight: 600;
}

/* 출력 모드 선택기 */
.cinema-output-mode .output-mode-options {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin-top: 0.5rem;
}

@media (max-width: 768px) {
    .cinema-output-mode .output-mode-options {
        grid-template-columns: 1fr;
    }
}

.output-mode-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border: 2px solid var(--border-color);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    background: var(--bg-secondary);
    position: relative;
}

.output-mode-card:hover {
    border-color: var(--cinema-primary);
    background: rgba(139, 92, 246, 0.05);
}

.output-mode-card.active {
    border-color: var(--cinema-primary);
    background: rgba(139, 92, 246, 0.1);
    box-shadow: 0 4px 15px rgba(139, 92, 246, 0.2);
}

.output-mode-card .mode-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: var(--bg-tertiary);
    color: var(--text-muted);
    font-size: 1.25rem;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.output-mode-card.active .mode-icon {
    background: linear-gradient(135deg, var(--cinema-primary) 0%, var(--cinema-secondary) 100%);
    color: white;
}

.output-mode-card .mode-info {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    flex: 1;
}

.output-mode-card .mode-title {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 0.95rem;
}

.output-mode-card .mode-desc {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.output-mode-card .mode-badge {
    position: absolute;
    top: -8px;
    right: 12px;
    font-size: 0.65rem;
    padding: 3px 8px;
    background: linear-gradient(135deg, var(--cinema-primary) 0%, var(--cinema-secondary) 100%);
    color: white;
    border-radius: 10px;
    font-weight: 600;
}

.output-mode-card .mode-badge.export {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

/* 내보내기 플랫폼 섹션 */
.export-platforms-section {
    margin-top: 1rem;
    padding: 1rem;
    background: rgba(16, 185, 129, 0.05);
    border-radius: 10px;
    border: 1px solid rgba(16, 185, 129, 0.2);
}

.platform-checkboxes {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.platform-checkbox {
    display: flex;
    align-items: center;
    cursor: pointer;
}

.platform-checkbox input[type="checkbox"] {
    display: none;
}

.platform-checkbox .checkbox-content {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border: 2px solid var(--border-color);
    border-radius: 8px;
    font-size: 0.85rem;
    color: var(--text-secondary);
    background: var(--bg-secondary);
    transition: all 0.2s ease;
}

.platform-checkbox .checkbox-content i {
    color: var(--text-muted);
}

.platform-checkbox input[type="checkbox"]:checked + .checkbox-content {
    border-color: #10b981;
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
}

.platform-checkbox input[type="checkbox"]:checked + .checkbox-content i {
    color: #10b981;
}

.platform-checkbox:hover .checkbox-content {
    border-color: #10b981;
}

/* 내보내기 버튼 */
.export-btn {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    border-color: transparent !important;
    color: white !important;
}

.export-btn:hover {
    background: linear-gradient(135deg, #059669 0%, #047857 100%) !important;
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3);
}

/* 키프레임 카드 개선 */
.keyframe-card {
    position: relative;
    cursor: pointer;
    transition: all 0.2s ease;
}

.keyframe-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.keyframe-card.selected {
    border: 2px solid var(--cinema-primary);
    box-shadow: 0 0 20px rgba(139, 92, 246, 0.3);
}

.keyframe-card.edited::after {
    content: '수정됨';
    position: absolute;
    top: 8px;
    right: 8px;
    font-size: 0.65rem;
    padding: 2px 6px;
    background: var(--warning-color);
    color: white;
    border-radius: 4px;
}

.keyframe-card .keyframe-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border-color);
}

.keyframe-card .keyframe-btn {
    flex: 1;
    padding: 0.5rem;
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-muted);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.8rem;
}

.keyframe-card .keyframe-btn:hover {
    border-color: var(--cinema-primary);
    color: var(--cinema-primary);
    background: rgba(139, 92, 246, 0.1);
}

.keyframe-card .keyframe-transitions {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 0.5rem;
    font-size: 0.75rem;
}

.keyframe-card .transition {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    background: rgba(99, 102, 241, 0.1);
    border-radius: 4px;
    color: var(--text-muted);
}

.keyframe-card .transition i {
    color: var(--cinema-primary);
    font-size: 0.65rem;
}

/* Cinema 모달 스타일 */
.cinema-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    backdrop-filter: blur(4px);
}

.cinema-modal-content {
    background: var(--bg-primary);
    border-radius: 16px;
    width: 90%;
    max-width: 600px;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);
}

.cinema-modal-content.scene-editor {
    max-width: 700px;
}

.cinema-modal .modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-secondary);
}

.cinema-modal .modal-header h3 {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.cinema-modal .modal-close-btn {
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: 6px;
    transition: all 0.2s;
}

.cinema-modal .modal-close-btn:hover {
    background: rgba(239, 68, 68, 0.1);
    color: var(--danger-color);
}

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

.cinema-modal .modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--border-color);
    background: var(--bg-secondary);
}

/* 후크 아이템 스타일 개선 */
.hook-item {
    padding: 1rem;
    border: 2px solid var(--border-color);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 0.75rem;
}

.hook-item:hover {
    border-color: var(--cinema-primary);
    transform: translateX(4px);
}

.hook-item.selected {
    border-color: var(--cinema-primary);
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.1) 0%, rgba(168, 85, 247, 0.1) 100%);
}

.hook-item .hook-content {
    flex: 1;
}

.hook-item .hook-text {
    font-size: 0.95rem;
    color: var(--text-primary);
    font-style: italic;
    margin-bottom: 0.5rem;
}

.hook-item .hook-meta {
    display: flex;
    gap: 1rem;
    font-size: 0.75rem;
    color: var(--text-muted);
}

.hook-item .hook-select-indicator {
    color: var(--text-muted);
    font-size: 1.25rem;
}

.hook-item.selected .hook-select-indicator {
    color: var(--cinema-primary);
}

/* 자막 아이템 스타일 개선 */
.subtitle-item {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 1rem;
    padding: 1rem;
    background: var(--bg-secondary);
    border-radius: 10px;
    margin-bottom: 0.75rem;
    align-items: center;
}

.subtitle-item .subtitle-timing {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.subtitle-item .time-input {
    width: 70px;
    padding: 0.4rem 0.5rem;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: 0.8rem;
    text-align: center;
}

.subtitle-item .subtitle-textarea {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: 0.875rem;
    resize: vertical;
    min-height: 40px;
}

.subtitle-item .subtitle-actions {
    display: flex;
    gap: 0.25rem;
}

.subtitle-item .subtitle-btn {
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: 6px;
    transition: all 0.2s;
}

.subtitle-item .subtitle-btn:hover {
    background: rgba(139, 92, 246, 0.1);
    color: var(--cinema-primary);
}

.subtitle-item .subtitle-btn.danger:hover {
    background: rgba(239, 68, 68, 0.1);
    color: var(--danger-color);
}

/* BGM 아이템 스타일 개선 */
.bgm-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.875rem 1rem;
    border: 2px solid var(--border-color);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-bottom: 0.5rem;
}

.bgm-item:hover {
    border-color: var(--cinema-primary);
}

.bgm-item.selected {
    border-color: var(--cinema-primary);
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.1) 0%, rgba(168, 85, 247, 0.1) 100%);
}

.bgm-item .bgm-play-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--bg-tertiary);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.2s;
}

.bgm-item .bgm-play-btn:hover {
    background: var(--cinema-primary);
    color: white;
}

.bgm-item .bgm-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.bgm-item .bgm-title {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-primary);
}

.bgm-item .bgm-mood {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.bgm-item .bgm-duration {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.bgm-item .selected-icon {
    color: var(--cinema-primary);
}

/* 템플릿 목록 */
.template-list {
    max-height: 400px;
    overflow-y: auto;
}

.template-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    margin-bottom: 0.5rem;
}

.template-item .template-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.template-item .template-name {
    font-weight: 500;
    color: var(--text-primary);
}

.template-item .template-date {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.template-item .template-actions {
    display: flex;
    gap: 0.5rem;
}

.template-item .template-btn {
    width: 32px;
    height: 32px;
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: 6px;
    transition: all 0.2s;
}

.template-item .template-btn:hover {
    border-color: var(--cinema-primary);
    color: var(--cinema-primary);
}

.template-item .template-btn.danger:hover {
    border-color: var(--danger-color);
    color: var(--danger-color);
}

/* 마스터 프롬프트 섹션 */
.master-prompt-section {
    background: var(--bg-secondary);
    border-radius: 12px;
    padding: 1.25rem;
    margin-bottom: 1.5rem;
}

.master-prompt-section h4 {
    margin: 0 0 1rem 0;
    font-size: 1rem;
    color: var(--cinema-primary);
}

.master-prompt-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

.master-prompt-item {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.master-prompt-item .label {
    font-size: 0.75rem;
    color: var(--text-muted);
    font-weight: 500;
    text-transform: uppercase;
}

.master-prompt-item .value {
    font-size: 0.85rem;
    color: var(--text-primary);
    line-height: 1.5;
}

/* 씬 프롬프트 섹션 */
.scene-prompts-section {
    margin-bottom: 1.5rem;
}

.scene-prompts-section h4 {
    margin: 0 0 1rem 0;
    font-size: 1rem;
    color: var(--cinema-primary);
}

.scene-prompts-list {
    max-height: 500px;
    overflow-y: auto;
}

/* 씬 그리드 */
.cinema-scenes-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

.scene-card {
    background: var(--bg-secondary);
    border-radius: 12px;
    overflow: hidden;
    transition: transform 0.2s, box-shadow 0.2s;
}

.scene-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.scene-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    background: linear-gradient(135deg, var(--cinema-primary), var(--cinema-secondary));
}

.scene-card-header .scene-number {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    font-weight: 600;
    color: white;
    font-size: 0.85rem;
}

.scene-card-header .scene-type {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.9);
    padding: 2px 8px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 4px;
}

.scene-card-body {
    padding: 1rem;
}

.scene-card-body .scene-action {
    font-size: 0.8rem;
    color: var(--text-secondary);
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.scene-card-footer {
    padding: 0.75rem 1rem;
    border-top: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.scene-duration-badge {
    font-size: 0.7rem;
    padding: 2px 6px;
    background: var(--bg-tertiary);
    border-radius: 4px;
    color: var(--text-muted);
}

.scene-has-narration {
    font-size: 0.7rem;
    color: var(--success-color);
    margin-left: auto;
}

.scene-edit-btn {
    padding: 0.4rem 0.75rem;
    background: transparent;
    border: 1px solid var(--cinema-primary);
    color: var(--cinema-primary);
    border-radius: 6px;
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.2s;
}

.scene-edit-btn:hover {
    background: var(--cinema-primary);
    color: white;
}

@media (max-width: 768px) {
    .cinema-scenes-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .master-prompt-grid {
        grid-template-columns: 1fr;
    }
}

/* 씬 프롬프트 목록 */
.scene-prompt-item {
    padding: 1rem;
    background: var(--bg-secondary);
    border-radius: 10px;
    margin-bottom: 0.75rem;
    border-left: 3px solid var(--cinema-primary);
}

.scene-prompt-item .scene-prompt-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.scene-prompt-item .scene-id {
    font-weight: 600;
    color: var(--cinema-primary);
    font-size: 0.9rem;
}

.scene-prompt-item .scene-duration,
.scene-prompt-item .scene-shot {
    font-size: 0.75rem;
    color: var(--text-muted);
    padding: 2px 8px;
    background: var(--bg-tertiary);
    border-radius: 4px;
}

.scene-prompt-item .prompt-text {
    font-size: 0.85rem;
    color: var(--text-primary);
    line-height: 1.5;
    margin-bottom: 0.5rem;
}

.scene-prompt-item .dialogue-text {
    font-size: 0.8rem;
    color: var(--cinema-primary);
    font-style: italic;
}

.scene-prompt-item .scene-prompt-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 0.5rem;
}

.scene-prompt-item .copy-btn {
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.2s;
}

.scene-prompt-item .copy-btn:hover {
    background: rgba(139, 92, 246, 0.1);
    color: var(--cinema-primary);
}

/* 영상 미리보기 그리드 개선 */
.video-preview-item .video-actions {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.video-preview-item .video-btn {
    width: 32px;
    height: 32px;
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: 6px;
    transition: all 0.2s;
}

.video-preview-item .video-btn:hover {
    border-color: var(--cinema-primary);
    color: var(--cinema-primary);
}

/* 씬 상태 아이템 개선 */
.scene-status-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    background: var(--bg-secondary);
    border-radius: 8px;
    margin-bottom: 0.5rem;
}

.scene-status-item .scene-progress {
    flex: 1;
    height: 4px;
    background: var(--bg-tertiary);
    border-radius: 2px;
    overflow: hidden;
}

.scene-status-item .scene-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--cinema-primary) 0%, var(--cinema-secondary) 100%);
    border-radius: 2px;
    transition: width 0.3s ease;
}

/* Empty state 스타일 */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    color: var(--text-muted);
    text-align: center;
}

.empty-state i {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    opacity: 0.5;
}

.empty-state p {
    font-size: 0.9rem;
}

/* 이미지 프리뷰 개선 */
.image-preview-item {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
}

.image-preview-item .image-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.3) 0%, transparent 30%, transparent 70%, rgba(0,0,0,0.3) 100%);
    display: flex;
    justify-content: space-between;
    padding: 6px;
    opacity: 0;
    transition: opacity 0.2s;
}

.image-preview-item:hover .image-overlay {
    opacity: 1;
}

.image-preview-item .image-index {
    background: var(--cinema-primary);
    color: white;
    font-size: 0.7rem;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
}

.image-preview-item .remove-image-btn {
    width: 20px;
    height: 20px;
    border: none;
    background: rgba(239, 68, 68, 0.8);
    color: white;
    border-radius: 50%;
    cursor: pointer;
    font-size: 0.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.image-preview-item.dragging {
    opacity: 0.5;
    transform: scale(0.95);
}

/* 프로덕션 탭 */
.cinema-production-tabs {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.prod-tab-btn {
    padding: 0.75rem 1.25rem;
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-secondary);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.875rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.prod-tab-btn:hover {
    border-color: var(--cinema-primary);
    color: var(--cinema-primary);
}

.prod-tab-btn.active {
    background: var(--cinema-gradient);
    border-color: transparent;
    color: white;
}

.prod-panel {
    display: none;
}

.prod-panel.active {
    display: block;
}

/* 자막 에디터 */
.subtitle-editor .subtitle-controls {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.subtitle-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.subtitle-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem;
    background: var(--bg-input);
    border-radius: 8px;
    border: 1px solid var(--border-color);
}

.subtitle-item .subtitle-timing {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 120px;
}

.subtitle-item .subtitle-timing span {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.subtitle-item .scene-badge {
    background: var(--cinema-light);
    color: var(--cinema-primary);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.7rem;
}

.subtitle-item .subtitle-text {
    flex: 1;
}

.subtitle-item .subtitle-text input {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid var(--border-color);
    background: var(--bg-dark);
    color: var(--text-primary);
    border-radius: 6px;
    font-size: 0.875rem;
}

.subtitle-item .remove-btn {
    padding: 0.5rem;
    background: transparent;
    border: none;
    color: var(--danger);
    cursor: pointer;
}

/* 스타일 프리셋 */
.style-presets {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-top: 0.75rem;
}

.style-preset-btn {
    padding: 0.5rem 1rem;
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-secondary);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.8rem;
}

.style-preset-btn:hover {
    border-color: var(--cinema-primary);
    color: var(--cinema-primary);
}

.style-preset-btn.active {
    background: var(--cinema-primary);
    border-color: var(--cinema-primary);
    color: white;
}

/* 후크 에디터 */
.hook-editor .hook-controls {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.hook-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.hook-item {
    padding: 1rem;
    background: var(--bg-input);
    border-radius: 8px;
    border: 2px solid var(--border-color);
    cursor: pointer;
    transition: all 0.2s ease;
}

.hook-item:hover {
    border-color: var(--cinema-primary);
}

.hook-item.selected {
    border-color: var(--cinema-primary);
    background: var(--cinema-light);
}

.hook-item .hook-text {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.hook-item .hook-meta {
    display: flex;
    gap: 1rem;
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.hook-item .hook-style {
    background: var(--cinema-light);
    color: var(--cinema-primary);
    padding: 2px 8px;
    border-radius: 4px;
}

/* BGM 셀렉터 */
.bgm-selector .bgm-controls {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.bgm-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-height: 300px;
    overflow-y: auto;
}

.bgm-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    background: var(--bg-input);
    border-radius: 8px;
    border: 2px solid var(--border-color);
    cursor: pointer;
    transition: all 0.2s ease;
}

.bgm-item:hover {
    border-color: var(--cinema-primary);
}

.bgm-item.selected {
    border-color: var(--cinema-primary);
    background: var(--cinema-light);
}

.bgm-item .bgm-info {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.bgm-item .bgm-title {
    font-weight: 500;
    color: var(--text-primary);
}

.bgm-item .bgm-mood {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.bgm-item .bgm-duration {
    font-size: 0.875rem;
    color: var(--text-secondary);
}

/* 해시태그 에디터 */
.hashtag-editor .hashtag-controls {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.hashtag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.hashtag-chip {
    padding: 0.5rem 1rem;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.875rem;
}

.hashtag-chip:hover {
    border-color: var(--cinema-primary);
    color: var(--cinema-primary);
}

.hashtag-chip.selected {
    background: var(--cinema-gradient);
    border-color: transparent;
    color: white;
}

.formatted-hashtags {
    padding: 1rem;
    background: var(--bg-input);
    border-radius: 8px;
    color: var(--cinema-primary);
    font-size: 0.875rem;
    word-break: break-all;
}

/* 배치 생성 상태 */
.cinema-batch-status {
    margin-top: 1.5rem;
}

.batch-progress-header,
.merge-progress-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.batch-progress-bar,
.merge-progress-bar {
    height: 8px;
    background: var(--bg-input);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 1rem;
}

.batch-progress-fill,
.merge-progress-fill {
    height: 100%;
    background: var(--cinema-gradient);
    border-radius: 4px;
    transition: width 0.3s ease;
}

.cinema-scenes-status {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 0.5rem;
}

.scene-status-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0.75rem;
    background: var(--bg-input);
    border-radius: 6px;
    font-size: 0.75rem;
}

.scene-status-badge {
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 500;
}

.scene-status-badge.idle {
    background: var(--bg-dark);
    color: var(--text-secondary);
}

.scene-status-badge.queued {
    background: rgba(245, 158, 11, 0.2);
    color: var(--warning);
}

.scene-status-badge.generating {
    background: rgba(236, 72, 153, 0.2);
    color: var(--cinema-primary);
}

.scene-status-badge.completed {
    background: rgba(16, 185, 129, 0.2);
    color: var(--success);
}

.scene-status-badge.failed {
    background: rgba(239, 68, 68, 0.2);
    color: var(--danger);
}

/* 생성된 영상 그리드 */
.cinema-videos-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

.video-preview-item {
    background: var(--bg-input);
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--border-color);
}

.video-preview-item .video-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0.75rem;
    background: var(--bg-dark);
    font-size: 0.75rem;
}

.video-preview-item video {
    width: 100%;
    display: block;
}

.video-preview-item .video-placeholder {
    aspect-ratio: 9/16;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    padding: 1rem;
    text-align: center;
}

.video-preview-item .video-placeholder i {
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

/* 최종 영상 */
.cinema-final-video {
    padding: 1.5rem;
    background: var(--bg-input);
    border-radius: 12px;
    border: 1px solid var(--border-color);
}

.cinema-final-video h4 {
    margin-bottom: 1rem;
    color: var(--cinema-primary);
}

/* 로딩 오버레이 */
.cinema-loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(15, 23, 42, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.cinema-loading-content {
    text-align: center;
    color: white;
}

.cinema-loading-content i {
    font-size: 3rem;
    color: var(--cinema-primary);
    margin-bottom: 1rem;
}

.cinema-loading-content p {
    font-size: 1.1rem;
}

.cinema-loading-spinner {
    margin-bottom: 1rem;
}

.cinema-loading-spinner i {
    font-size: 3rem;
    color: var(--cinema-primary);
    animation: spin 1s linear infinite;
}

.cinema-loading-progress {
    width: 200px;
    height: 4px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 2px;
    margin: 1rem auto 0;
    overflow: hidden;
}

.cinema-loading-progress .progress-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--cinema-primary), var(--cinema-secondary));
    width: 0%;
    transition: width 0.3s;
    animation: loading-pulse 1.5s ease-in-out infinite;
}

@keyframes loading-pulse {
    0%, 100% { width: 10%; margin-left: 0%; }
    50% { width: 80%; margin-left: 10%; }
}

/* 빈 상태 */
.empty-state {
    text-align: center;
    padding: 2rem;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.empty-state i {
    font-size: 2rem;
    margin-bottom: 0.5rem;
    display: block;
    opacity: 0.5;
}

/* 로딩 상태 */
.loading-state {
    text-align: center;
    padding: 2rem;
    color: var(--cinema-primary);
    font-size: 0.9rem;
}

.loading-state i {
    margin-right: 0.5rem;
}

/* Cinema 반응형 */
@media (max-width: 1024px) {
    .cinema-keyframes-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .cinema-videos-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .cinema-keyframes-grid {
        grid-template-columns: 1fr;
    }
    
    .cinema-videos-grid {
        grid-template-columns: 1fr;
    }
    
    .cinema-production-tabs {
        flex-direction: column;
    }
    
    .prod-tab-btn {
        width: 100%;
        justify-content: center;
    }
}

/* ============================================================
   상세페이지 생성기 스타일
   E-commerce Detail Page Generator
   ============================================================ */

/* 테마 변수 */
:root {
    --detail-primary: #10b981;
    --detail-secondary: #059669;
    --detail-light: rgba(16, 185, 129, 0.1);
    --detail-gradient: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

/* 상세페이지 mode-tab 활성화 스타일 (YouTube/SNS와 동일한 테두리 스타일) */
.detail-page-mode-tabs .mode-tab.active {
    border-color: var(--detail-primary) !important;
    border-width: 2px !important;
    background: rgba(16, 185, 129, 0.15) !important;
    color: var(--text-primary) !important;
}

.detail-page-mode-tabs .mode-tab.active i {
    color: var(--detail-primary) !important;
}

.detail-page-mode-tabs .mode-tab:hover:not(.active) {
    background: rgba(16, 185, 129, 0.08) !important;
    border-color: rgba(16, 185, 129, 0.5) !important;
}

.detail-page-mode-tabs .mode-tab:hover:not(.active) i {
    color: var(--detail-primary);
}

/* 컨테이너 */
.detail-page-container {
    padding: 1.5rem 2rem;
    max-width: 100%;
}

/* 헤더 */
.detail-page-header {
    text-align: center;
    margin-bottom: 2rem;
}

.detail-page-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.detail-page-title i {
    font-size: 1.5rem;
    color: var(--detail-primary);
}

.detail-page-title h2 {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

.detail-page-subtitle {
    color: var(--text-secondary);
    font-size: 0.95rem;
}

/* 스텝 인디케이터 */
.detail-page-steps {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 2rem;
    padding: 1rem;
    background: var(--bg-card);
    border-radius: 12px;
    border: 1px solid var(--border-color);
}

.detail-page-step {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    border-radius: 8px;
    background: var(--bg-input);
    color: var(--text-secondary);
    transition: all 0.3s ease;
}

.detail-page-step.active {
    background: var(--detail-gradient);
    color: white;
}

.detail-page-step.completed {
    background: var(--detail-light);
    color: var(--detail-primary);
}

.step-number {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 600;
}

.detail-page-step.active .step-number {
    background: rgba(255, 255, 255, 0.3);
}

.step-label {
    font-size: 0.9rem;
    font-weight: 500;
}

/* 단계 버튼 클릭 가능 스타일 */
.detail-page-step {
    cursor: pointer;
    user-select: none;
    position: relative;
}

.detail-page-step:hover:not(.active) {
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    transform: translateY(-2px);
}

.detail-page-step.completed:hover {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.2), rgba(6, 182, 212, 0.15));
    border: 1px solid rgba(16, 185, 129, 0.4);
}

/* 도달하지 않은 단계 - 비활성화 스타일 */
.detail-page-step:not(.active):not(.completed) {
    opacity: 0.5;
}

.detail-page-step:not(.active):not(.completed):hover {
    opacity: 0.7;
}

/* 흔들림 애니메이션 (접근 불가 피드백) */
@keyframes stepShake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-4px); }
    20%, 40%, 60%, 80% { transform: translateX(4px); }
}

.detail-page-step.shake {
    animation: stepShake 0.5s ease-in-out;
}

/* 완료 단계 체크 아이콘 */
.detail-page-step.completed .step-number::after {
    content: '';
    position: absolute;
    width: 8px;
    height: 5px;
    border-left: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(-45deg);
}

/* 메인 콘텐츠 */
.detail-page-content {
    position: relative;
}

.detail-page-panel {
    animation: fadeIn 0.3s ease;
}

/* 그리드 레이아웃 */
.detail-page-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    max-width: 100%;
}

/* 입력 폼 */
.detail-input-form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* 섹션 */
.detail-section {
    background: var(--bg-card);
    border-radius: 12px;
    padding: 1.5rem;
    border: 1px solid var(--border-color);
}

.detail-section h3 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 1rem 0;
}

.detail-section h3 i {
    color: var(--detail-primary);
}

.section-desc {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-bottom: 1rem;
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.section-header h3 {
    margin: 0;
}

/* AI 섹션 */
.ai-section {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1), rgba(5, 150, 105, 0.05));
    border-color: rgba(16, 185, 129, 0.3);
}

/* 진단 업로드 영역 */
.diagnosis-upload-area {
    display: block;
    position: relative;
    border: 2px dashed var(--border-color);
    border-radius: 8px;
    padding: 2rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.diagnosis-upload-area:hover {
    border-color: var(--detail-primary);
    background: var(--detail-light);
}

/* 제품 이미지 추가 버튼 (label) */
label.add-image-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.upload-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-secondary);
}

.upload-placeholder i {
    font-size: 2rem;
}

/* 진단 결과 */
.diagnosis-result {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    background: var(--bg-input);
    border-radius: 8px;
    margin-top: 1rem;
}

.diagnosis-score {
    display: flex;
    align-items: baseline;
    gap: 0.25rem;
}

.score-value {
    font-size: 2rem;
    font-weight: 700;
    color: var(--detail-primary);
}

.score-label {
    font-size: 1rem;
    color: var(--text-secondary);
}

/* 언어 토글 */
.language-toggle {
    display: flex;
    gap: 0.25rem;
    background: var(--bg-input);
    padding: 0.25rem;
    border-radius: 6px;
}

.lang-btn {
    padding: 0.4rem 0.75rem;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font-size: 0.8rem;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.lang-btn.active {
    background: var(--detail-primary);
    color: white;
}

/* 폼 요소 */
.form-group {
    margin-bottom: 1rem;
}

.form-group:last-child {
    margin-bottom: 0;
}

.form-group label {
    display: block;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.form-group label .required {
    color: var(--danger);
}

.form-row {
    display: flex;
    gap: 1rem;
}

.form-group.half {
    flex: 1;
}

.input-with-btn {
    display: flex;
    gap: 0.5rem;
}

.input-with-btn input {
    flex: 1;
}

/* AI 자동완성 버튼 영역 */
.input-with-ai-search {
    display: flex;
    gap: 0.75rem;
    align-items: stretch;
}

.input-with-ai-search input {
    flex: 1;
}

.ai-search-btn-new {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0 1.25rem;
    background: linear-gradient(135deg, #8B5CF6 0%, #6366F1 100%);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(139, 92, 246, 0.3);
}

.ai-search-btn-new:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(139, 92, 246, 0.4);
}

.ai-search-btn-new:active {
    transform: translateY(0);
}

.ai-search-btn-new i {
    font-size: 1rem;
}

.ai-search-btn-new:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

/* AI 액션 버튼 (Primary) - 그라데이션 */
.ai-action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    padding: 0.875rem 1.75rem;
    background: linear-gradient(135deg, #10B981 0%, #06B6D4 100%);
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

.ai-action-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(16, 185, 129, 0.4);
}

.ai-action-btn:active:not(:disabled) {
    transform: translateY(0);
}

.ai-action-btn i {
    font-size: 1.1rem;
}

.ai-action-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
    background: linear-gradient(135deg, #6B7280 0%, #9CA3AF 100%);
    box-shadow: none;
}

/* AI 보조 버튼 (Secondary) */
.ai-secondary-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.ai-secondary-btn:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--accent-primary);
    color: var(--accent-primary);
}

.ai-secondary-btn:active:not(:disabled) {
    transform: translateY(1px);
}

.ai-secondary-btn i {
    font-size: 0.95rem;
}

.ai-secondary-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* 입력 힌트 텍스트 */
.input-hint {
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-top: 0.375rem;
    line-height: 1.4;
}

/* 분량 옵션 */
.length-options {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem;
}

.length-option {
    cursor: pointer;
}

.length-option input {
    display: none;
}

.option-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1rem;
    background: var(--bg-input);
    border: 2px solid transparent;
    border-radius: 8px;
    transition: all 0.2s ease;
}

.length-option input:checked + .option-box {
    border-color: var(--detail-primary);
    background: var(--detail-light);
}

.option-box strong {
    font-size: 1rem;
    color: var(--text-primary);
}

.option-box small {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

/* 제품 이미지 영역 */
.images-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.75rem;
}

.add-image-btn {
    aspect-ratio: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: var(--bg-input);
    border: 2px dashed var(--border-color);
    border-radius: 8px;
    cursor: pointer;
    color: var(--text-secondary);
    transition: all 0.2s ease;
}

.add-image-btn:hover {
    border-color: var(--detail-primary);
    color: var(--detail-primary);
}

.add-image-btn i {
    font-size: 1.5rem;
}

.add-image-btn span {
    font-size: 0.75rem;
}

.product-image-item {
    position: relative;
    aspect-ratio: 1;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--border-color);
}

.product-image-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.product-image-item .remove-btn {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--danger);
    color: white;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.product-image-item:hover .remove-btn {
    opacity: 1;
}

/* 가이드 카드 */
.detail-guide {
    position: sticky;
    top: 1rem;
}

.guide-card {
    background: var(--bg-card);
    border-radius: 12px;
    padding: 1.5rem;
    border: 1px solid var(--border-color);
}

.guide-card h4 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1rem;
    color: var(--text-primary);
    margin: 0 0 1rem 0;
}

.guide-card h4 i {
    color: var(--warning);
}

.guide-steps {
    list-style: none;
    padding: 0;
    margin: 0;
}

.guide-steps li {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.guide-steps li:last-child {
    margin-bottom: 0;
}

.guide-num {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--detail-light);
    color: var(--detail-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 600;
    flex-shrink: 0;
}

.guide-steps p {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.5;
}

.guide-steps p strong {
    color: var(--text-primary);
}

/* 전략 컨테이너 - 개선된 UI */
.strategy-container {
    max-width: 100%;
    margin: 0 auto;
    padding: 1.5rem;
}

.strategy-header {
    text-align: center;
    margin-bottom: 2rem;
}

.strategy-header h3 {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-size: 1.5rem;
    color: var(--text-primary);
    margin: 0 0 0.5rem 0;
}

.strategy-header h3 i {
    color: var(--detail-primary);
}

.strategy-header p {
    color: var(--text-secondary);
}

/* 전략 그리드 - 데이터 특성을 고려한 세로 중심 레이아웃 */
.strategy-grid {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 2rem;
}

.strategy-card {
    background: var(--bg-card);
    border-radius: 12px;
    padding: 1.25rem 1.5rem;
    border: 1px solid var(--border-color);
    transition: all 0.2s ease;
}

.strategy-card:hover {
    border-color: rgba(16, 185, 129, 0.5);
}

/* 원라이너 - 핵심 강조 */
.strategy-card.highlight {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.12), rgba(6, 182, 212, 0.08));
    border-color: rgba(16, 185, 129, 0.4);
    border-width: 2px;
}

/* 타겟 페르소나 - 전체 너비 */
.strategy-card.persona-card {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.08), rgba(99, 102, 241, 0.05));
    border-color: rgba(139, 92, 246, 0.3);
}

/* 구매 저항 - 넓은 공간 */
.strategy-card.objections-card {
    background: linear-gradient(135deg, rgba(249, 115, 22, 0.08), rgba(234, 88, 12, 0.05));
    border-color: rgba(249, 115, 22, 0.3);
}

.strategy-card h4 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.95rem;
    color: var(--text-primary);
    margin: 0 0 0.875rem 0;
    font-weight: 600;
}

.strategy-card h4 i {
    color: var(--accent-primary);
    font-size: 1rem;
    width: 20px;
    text-align: center;
}

.strategy-card.highlight h4 i {
    color: #10B981;
}

.strategy-card.persona-card h4 i {
    color: #8B5CF6;
}

.strategy-card.objections-card h4 i {
    color: #F97316;
}

.strategy-card textarea {
    width: 100%;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 0.875rem;
    color: var(--text-primary);
    font-size: 0.95rem;
    resize: vertical;
    min-height: 70px;
    line-height: 1.6;
}

.strategy-card textarea:focus {
    border-color: var(--accent-primary);
    outline: none;
    box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.2);
}

.strategy-card.highlight textarea {
    font-size: 1.15rem;
    font-weight: 600;
    min-height: 50px;
    text-align: center;
    background: rgba(255, 255, 255, 0.05);
}

/* 베네핏과 신뢰 요소는 2열 그리드 */
.strategy-two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

@media (max-width: 768px) {
    .strategy-two-col {
        grid-template-columns: 1fr;
    }
}

/* 편집 가능 리스트 - 개선된 스타일 */
.editable-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.editable-list input {
    width: 100%;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 0.7rem 0.875rem;
    color: var(--text-primary);
    font-size: 0.9rem;
    transition: border-color 0.2s ease;
}

.editable-list input:focus {
    border-color: var(--accent-primary);
    outline: none;
    box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.15);
}

.editable-list input::placeholder {
    color: var(--text-secondary);
    opacity: 0.6;
}

/* 구매 저항 리스트 - 가로 배치로 개선 */
.objections-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 0.75rem;
}

.objection-item {
    background: var(--bg-input);
    border-radius: 10px;
    padding: 1rem;
    border: 1px solid var(--border-color);
}

.objection-item label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    margin-bottom: 0.4rem;
}

.objection-item label:first-of-type {
    color: #F97316;
}

.objection-item label:last-of-type {
    color: #10B981;
    margin-top: 0.75rem;
}

.objection-item input {
    width: 100%;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 0.5rem 0.75rem;
    color: var(--text-primary);
    font-size: 0.85rem;
    transition: border-color 0.2s ease;
}

.objection-item input:focus {
    border-color: var(--accent-primary);
    outline: none;
}

/* 전략 액션 버튼 */
.strategy-actions {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
}

/* 기획/미리보기 컨테이너 - 개선된 레이아웃 */
.planning-container {
    display: grid;
    grid-template-columns: 280px 1fr 350px;
    gap: 1.25rem;
    height: calc(100vh - 200px);
    min-height: 700px;
    padding: 1rem;
}

/* 섹션 네비게이션 */
.sections-nav {
    background: var(--bg-card);
    border-radius: 12px;
    border: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.nav-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border-color);
    background: rgba(255, 255, 255, 0.02);
}

.nav-header h4 {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.section-count {
    font-size: 0.8rem;
    font-weight: 600;
    color: #10B981;
    background: rgba(16, 185, 129, 0.15);
    padding: 0.3rem 0.6rem;
    border-radius: 6px;
}

.sections-list {
    flex: 1;
    overflow-y: auto;
    padding: 0.75rem;
}

.section-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-bottom: 0.5rem;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid transparent;
}

.section-item:hover {
    background: var(--bg-input);
    border-color: var(--border-color);
}

.section-item.active {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.15), rgba(6, 182, 212, 0.1));
    border: 1px solid var(--accent-primary);
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.2);
}

.section-thumb {
    width: 40px;
    height: 40px;
    border-radius: 6px;
    background: var(--bg-input);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
}

.section-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.section-thumb span {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.section-info {
    flex: 1;
    min-width: 0;
}

.section-info .title {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.4;
    margin-bottom: 0.25rem;
    /* 2줄까지 표시 */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.section-info .strategy {
    font-size: 0.75rem;
    color: var(--text-secondary);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.nav-actions {
    padding: 1rem;
    border-top: 1px solid var(--border-color);
}

/* 미리보기 영역 */
.preview-area {
    background: var(--bg-card);
    border-radius: 12px;
    border: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.preview-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border-color);
}

.preview-tabs {
    display: flex;
    gap: 0.5rem;
    background: var(--bg-input);
    padding: 0.25rem;
    border-radius: 8px;
}

.preview-tab {
    padding: 0.6rem 1.25rem;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-size: 0.85rem;
    font-weight: 500;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.preview-tab:hover:not(.active) {
    color: var(--text-primary);
}

.preview-tab.active {
    background: linear-gradient(135deg, #10B981 0%, #06B6D4 100%);
    color: white;
    box-shadow: 0 2px 6px rgba(16, 185, 129, 0.3);
}

.preview-canvas {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
    display: flex;
    justify-content: center;
    background: #1a1a2e;
}

.preview-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    gap: 1rem;
    text-align: center;
    padding: 2rem;
    height: 100%;
}

.preview-placeholder i {
    font-size: 4rem;
    opacity: 0.4;
    background: linear-gradient(135deg, #10B981, #06B6D4);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.preview-placeholder p {
    font-size: 0.95rem;
    margin: 0;
    line-height: 1.6;
}

/* 편집 패널 - 개선된 스타일 */
.edit-panel {
    background: var(--bg-card);
    border-radius: 12px;
    border: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.edit-header {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border-color);
    background: rgba(255, 255, 255, 0.02);
}

.edit-header h4 {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.edit-header h4::before {
    content: '';
    width: 4px;
    height: 16px;
    background: linear-gradient(135deg, #10B981, #06B6D4);
    border-radius: 2px;
}

.edit-content {
    flex: 1;
    overflow-y: auto;
    padding: 1.25rem;
}

.edit-section {
    margin-bottom: 0;
}

.edit-section h5 {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 0.75rem 0;
}

.edit-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--text-secondary);
    gap: 0.5rem;
}

.edit-placeholder i {
    font-size: 2rem;
    opacity: 0.5;
}

/* 로딩 오버레이 */
.detail-loading-overlay {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.95);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    border-radius: 12px;
}

.loading-content {
    text-align: center;
    max-width: 400px;
}

.loading-spinner {
    width: 60px;
    height: 60px;
    border: 4px solid var(--border-color);
    border-top-color: var(--detail-primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto 1.5rem;
}

.loading-content h3 {
    font-size: 1.25rem;
    color: var(--text-primary);
    margin: 0 0 0.5rem 0;
}

.loading-content p {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin: 0 0 1.5rem 0;
}

.loading-progress {
    height: 4px;
    background: var(--bg-input);
    border-radius: 2px;
    overflow: hidden;
}

.progress-bar {
    height: 100%;
    background: var(--detail-gradient);
    width: 0%;
    transition: width 0.3s ease;
}

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

/* 반응형 */
@media (max-width: 1200px) {
    .planning-container {
        grid-template-columns: 200px 1fr 250px;
    }
}

@media (max-width: 1024px) {
    .detail-page-grid {
        grid-template-columns: 1fr;
    }
    
    .detail-guide {
        position: static;
    }
    
    .planning-container {
        grid-template-columns: 1fr;
        height: auto;
    }
    
    .sections-nav {
        max-height: 200px;
    }
    
    .preview-area {
        min-height: 400px;
    }
    
    .edit-panel {
        min-height: 300px;
    }
}

@media (max-width: 768px) {
    .detail-page-steps {
        flex-wrap: wrap;
    }
    
    .strategy-two-col {
        grid-template-columns: 1fr;
    }
    
    .objections-list {
        grid-template-columns: 1fr;
    }
    
    .length-options {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .images-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ============================================
   레퍼런스 분석 결과 스타일
   ============================================ */

/* 분석 뱃지 */
.analysis-badge {
    background: linear-gradient(135deg, #8B5CF6, #A78BFA);
    color: white;
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.analysis-badge i {
    font-size: 0.65rem;
}

/* 분석 미리보기 */
.ref-analysis-preview {
    margin-top: 0.75rem;
    padding: 0.75rem;
    background: rgba(139, 92, 246, 0.08);
    border-radius: 8px;
    border: 1px solid rgba(139, 92, 246, 0.15);
    cursor: pointer;
    transition: all 0.2s ease;
}

.ref-analysis-preview:hover {
    background: rgba(139, 92, 246, 0.12);
    border-color: rgba(139, 92, 246, 0.25);
}

.analysis-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 0.5rem;
}

.style-tag, .theme-tag, .mood-tag, .tone-tag {
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 500;
}

.style-tag {
    background: rgba(59, 130, 246, 0.15);
    color: #60A5FA;
}

.theme-tag {
    background: rgba(16, 185, 129, 0.15);
    color: #34D399;
}

.mood-tag {
    background: rgba(245, 158, 11, 0.15);
    color: #FBBF24;
}

.tone-tag {
    background: rgba(236, 72, 153, 0.15);
    color: #F472B6;
}

.ref-analysis-preview .power-words {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.ref-analysis-preview .power-words small {
    color: var(--text-muted);
}

/* 분석 버튼 */
.ref-action-btn.analyze-btn {
    background: rgba(139, 92, 246, 0.1);
    color: #A78BFA;
}

.ref-action-btn.analyze-btn:hover {
    background: rgba(139, 92, 246, 0.2);
}

/* 분석 모달 */
.analysis-modal {
    max-width: 700px;
    max-height: 85vh;
}

.analysis-modal .modal-body {
    padding: 1.5rem;
    overflow-y: auto;
}

.original-copy {
    padding: 1rem;
    background: var(--bg-input);
    border-radius: 8px;
    font-size: 1rem;
    color: var(--text-primary);
    font-style: italic;
    border-left: 3px solid var(--primary-color);
}

.analysis-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin-top: 1rem;
}

.analysis-section {
    padding: 1rem;
    background: var(--bg-input);
    border-radius: 8px;
    border: 1px solid var(--border-color);
}

.analysis-section.full-width {
    grid-column: 1 / -1;
}

.analysis-section h4 {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 0.75rem 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.analysis-section h4 i {
    color: var(--primary-color);
    font-size: 0.8rem;
}

.analysis-items {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* 레퍼런스 분석 모달 내 아이템 - 사이드바 .analysis-item과 충돌 방지 */
.analysis-modal .analysis-item,
.analysis-section .analysis-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.85rem;
}

.analysis-modal .analysis-item .label,
.analysis-section .analysis-item .label {
    color: var(--text-secondary);
}

.analysis-modal .analysis-item .value,
.analysis-section .analysis-item .value {
    color: var(--text-primary);
    font-weight: 500;
}

.primary-value {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--primary-color);
    text-align: center;
    padding: 0.5rem;
}

/* 파워 워드 리스트 */
.power-words-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.power-word-tag {
    padding: 0.35rem 0.75rem;
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.15), rgba(251, 191, 36, 0.1));
    color: #FBBF24;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 500;
    border: 1px solid rgba(245, 158, 11, 0.2);
}

/* 심리 트리거 리스트 */
.trigger-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.trigger-tag {
    padding: 0.35rem 0.75rem;
    background: linear-gradient(135deg, rgba(236, 72, 153, 0.15), rgba(244, 114, 182, 0.1));
    color: #F472B6;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 500;
    border: 1px solid rgba(236, 72, 153, 0.2);
}

/* 스타일 가이드 박스 */
.style-guide-box {
    padding: 1rem;
    background: rgba(139, 92, 246, 0.08);
    border-radius: 8px;
    border: 1px solid rgba(139, 92, 246, 0.15);
    font-size: 0.9rem;
    color: var(--text-primary);
    white-space: pre-line;
    line-height: 1.6;
}

/* 생성 팁 */
.generation-tips {
    margin: 0;
    padding-left: 1.25rem;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.generation-tips li {
    margin-bottom: 0.4rem;
}

.generation-tips li:last-child {
    margin-bottom: 0;
}

/* 분석 신뢰도 */
.analysis-confidence {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.confidence-bar {
    flex: 1;
    height: 6px;
    background: var(--bg-input);
    border-radius: 3px;
    overflow: hidden;
}

.confidence-fill {
    height: 100%;
    background: linear-gradient(90deg, #8B5CF6, #A78BFA);
    border-radius: 3px;
    transition: width 0.5s ease;
}

/* 종합 분석 요약 */
.combined-summary {
    padding: 1rem;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.1), rgba(59, 130, 246, 0.1));
    border-radius: 8px;
    text-align: center;
    margin-bottom: 1rem;
}

.combined-summary p {
    margin: 0;
    font-size: 1rem;
    color: var(--text-primary);
}

.combined-summary strong {
    color: var(--primary-color);
    font-size: 1.2rem;
}

/* 반응형 */
@media (max-width: 768px) {
    .analysis-grid {
        grid-template-columns: 1fr;
    }

    .analysis-modal {
        max-width: 95%;
        margin: 1rem;
    }
}

/* =========================================================
   HOME PAGE — 시스템 소개 (랜딩) 전용 스타일
   ========================================================= */

/* =========================================================
   HEADER STATUS INDICATOR (사이드바에서 상단 헤더로 이동된 시스템 상태)
   ========================================================= */
.header-status-indicator {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    background: rgba(16, 185, 129, 0.08);
    border: 1px solid rgba(16, 185, 129, 0.25);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
    letter-spacing: 0.02em;
}

.header-status-indicator .status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--accent-primary);
    box-shadow: 0 0 8px var(--accent-primary);
    animation: headerStatusPulse 2.4s ease-in-out infinite;
    flex-shrink: 0;
}

.header-status-indicator.online .status-text {
    color: var(--accent-primary);
}

@keyframes headerStatusPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.55; transform: scale(0.85); }
}

@media (max-width: 768px) {
    .header-status-indicator .status-text {
        display: none;
    }
    .header-status-indicator {
        padding: 0.4rem;
    }
}

/* =========================================================
   HEADER AUTH (사이드바에서 상단 헤더로 이동된 로그인 영역)
   ========================================================= */
.header-auth-divider {
    width: 1px;
    height: 22px;
    background: rgba(255, 255, 255, 0.1);
    margin: 0 0.35rem;
}

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

.header-login-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.95rem;
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.18), rgba(14, 165, 233, 0.18));
    border: 1px solid rgba(16, 185, 129, 0.35);
    color: var(--text-primary);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
}

.header-login-btn:hover {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.28), rgba(14, 165, 233, 0.28));
    border-color: rgba(16, 185, 129, 0.55);
    transform: translateY(-1px);
}

.header-login-btn i {
    color: var(--accent-primary);
    font-size: 0.85rem;
}

.header-user-info {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.3rem 0.65rem 0.3rem 0.3rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.header-user-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: linear-gradient(135deg, #10b981, #06b6d4);
    color: white;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.78rem;
    font-weight: 700;
    flex-shrink: 0;
}

.header-user-email {
    color: var(--text-primary);
    font-size: 0.82rem;
    font-weight: 500;
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 768px) {
    .header-user-email {
        display: none;
    }
}

/* 홈 nav-item */
.home-nav-item {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.08), rgba(14, 165, 233, 0.08));
    border: 1px solid rgba(255, 255, 255, 0.06);
    margin-bottom: 0.25rem;
}
.home-nav-item.active {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.18), rgba(14, 165, 233, 0.18));
    border-color: rgba(16, 185, 129, 0.4);
    color: var(--text-primary);
}
.home-nav-item.active i {
    color: var(--accent-primary);
}

#home-tab {
    padding: 0;
    background: transparent;
}

.home-page {
    max-width: 1280px;
    margin: 0 auto;
    padding: 1rem 0 4rem;
    color: var(--text-primary);
}

/* ---------- Hero ---------- */
.home-hero {
    position: relative;
    padding: 3rem 0 2.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    overflow: hidden;
}

.home-hero-grid {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 3rem;
    align-items: center;
}

@media (max-width: 1024px) {
    .home-hero-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
}

.home-hero-content {
    position: relative;
    z-index: 2;
}

.hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.9rem;
    border-radius: 999px;
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.25);
    color: var(--accent-primary);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    margin-bottom: 1.25rem;
}

.hero-eyebrow-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent-primary);
    box-shadow: 0 0 10px var(--accent-primary);
    animation: heroDot 2s ease-in-out infinite;
}

@keyframes heroDot {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.45; transform: scale(0.85); }
}

.hero-title {
    font-size: clamp(2.2rem, 4.2vw, 3.6rem);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin: 0 0 1.25rem 0;
    color: var(--text-primary);
}

.hero-title-accent {
    background: linear-gradient(135deg, #10b981 0%, #06b6d4 50%, #0ea5e9 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.hero-description {
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--text-secondary);
    margin: 0 0 1.75rem 0;
    max-width: 560px;
}

.hero-meta {
    display: flex;
    gap: 1.25rem;
    flex-wrap: wrap;
    color: var(--text-secondary);
    font-size: 0.82rem;
}

.hero-meta span {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.hero-meta i {
    color: var(--accent-primary);
    opacity: 0.85;
}

/* Hero visual: 8-orb gradient cluster */
.home-hero-visual {
    position: relative;
    height: 380px;
    border-radius: 20px;
    background: radial-gradient(circle at 50% 50%, rgba(16, 185, 129, 0.05) 0%, transparent 70%);
    overflow: hidden;
}

.hero-grid-overlay {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
    background-size: 32px 32px;
    mask-image: radial-gradient(circle at 50% 50%, black 30%, transparent 75%);
    -webkit-mask-image: radial-gradient(circle at 50% 50%, black 30%, transparent 75%);
    pointer-events: none;
}

.hero-orb {
    position: absolute;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    filter: blur(2px);
    opacity: 0.85;
    animation: orbFloat 6s ease-in-out infinite;
}

.hero-orb-1 { top: 18%;  left: 12%; background: radial-gradient(circle, #10b981, transparent 70%); animation-delay: 0s; }
.hero-orb-2 { top: 8%;   left: 48%; background: radial-gradient(circle, #4285f4, transparent 70%); animation-delay: 0.5s; }
.hero-orb-3 { top: 22%;  right: 12%; background: radial-gradient(circle, #06b6d4, transparent 70%); animation-delay: 1s; }
.hero-orb-4 { top: 50%;  left: 6%;  background: radial-gradient(circle, #ec4899, transparent 70%); animation-delay: 1.5s; }
.hero-orb-5 { bottom: 20%; left: 30%; background: radial-gradient(circle, #9333ea, transparent 70%); animation-delay: 2s; }
.hero-orb-6 { bottom: 8%; right: 28%; background: radial-gradient(circle, #8b5cf6, transparent 70%); animation-delay: 2.5s; }
.hero-orb-7 { top: 50%;  right: 6%; background: radial-gradient(circle, #0ea5e9, transparent 70%); animation-delay: 3s; }
.hero-orb-8 { bottom: 16%; left: 56%; background: radial-gradient(circle, #FF6B35, transparent 70%); animation-delay: 3.5s; }

@keyframes orbFloat {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(8px, -10px) scale(1.08); }
}

.hero-center-pulse {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 96px;
    height: 96px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.18), rgba(14, 165, 233, 0.18));
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(14px);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 2rem;
    box-shadow: 0 0 80px rgba(16, 185, 129, 0.35);
    animation: pulseCore 3s ease-in-out infinite;
}

@keyframes pulseCore {
    0%, 100% { transform: translate(-50%, -50%) scale(1); box-shadow: 0 0 60px rgba(16, 185, 129, 0.3); }
    50% { transform: translate(-50%, -50%) scale(1.06); box-shadow: 0 0 100px rgba(16, 185, 129, 0.55); }
}

/* ---------- Stats Strip ---------- */
.home-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin: 2rem 0 3rem;
}

@media (max-width: 768px) {
    .home-stats { grid-template-columns: repeat(2, 1fr); }
}

.home-stat-card {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0));
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
    padding: 1.25rem 1.5rem;
    text-align: left;
    transition: all 0.25s ease;
}

.home-stat-card:hover {
    border-color: rgba(16, 185, 129, 0.35);
    transform: translateY(-2px);
}

.home-stat-card .stat-value {
    display: block;
    font-size: 2.2rem;
    font-weight: 700;
    background: linear-gradient(135deg, #f8fafc, #94a3b8);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    line-height: 1.1;
    margin-bottom: 0.35rem;
}

.home-stat-card .stat-label {
    color: var(--text-secondary);
    font-size: 0.85rem;
    font-weight: 500;
}

/* ---------- Section Headers ---------- */
.home-section-header {
    margin: 3.5rem 0 1.5rem;
    text-align: left;
}

.home-section-eyebrow {
    display: inline-block;
    color: var(--accent-primary);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    margin-bottom: 0.6rem;
}

.home-section-title {
    font-size: clamp(1.6rem, 2.6vw, 2.2rem);
    font-weight: 700;
    margin: 0 0 0.5rem 0;
    letter-spacing: -0.01em;
    color: var(--text-primary);
}

.home-section-desc {
    color: var(--text-secondary);
    font-size: 0.98rem;
    margin: 0;
    max-width: 720px;
}

/* ---------- Feature Grid ---------- */
.feature-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.1rem;
}

@media (max-width: 1280px) {
    .feature-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 960px) {
    .feature-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .feature-grid { grid-template-columns: 1fr; }
}

.feature-card {
    position: relative;
    background: rgba(30, 41, 59, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 16px;
    padding: 1.4rem;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
    overflow: hidden;
    backdrop-filter: blur(10px);
    isolation: isolate;
    display: flex;
    flex-direction: column;
    min-height: 260px;
}

.feature-card-glow {
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    padding: 1px;
    background: var(--feature-gradient, linear-gradient(135deg, #10b981, #059669));
    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    z-index: -1;
}

.feature-card::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: var(--feature-gradient, linear-gradient(135deg, #10b981, #059669));
    opacity: 0;
    filter: blur(60px);
    transition: opacity 0.4s ease;
    pointer-events: none;
    z-index: -1;
}

.feature-card:hover {
    transform: translateY(-4px);
    border-color: var(--feature-color, rgba(16, 185, 129, 0.4));
    background: rgba(30, 41, 59, 0.75);
}

.feature-card:hover::before {
    opacity: 0.18;
}

.feature-card:hover .feature-card-glow {
    opacity: 1;
}

/* Per-feature theming */
.feature-naver      { --feature-color: #10b981; --feature-gradient: linear-gradient(135deg, #10b981, #059669); }
.feature-google     { --feature-color: #4285f4; --feature-gradient: linear-gradient(135deg, #4285f4, #357abd); }
.feature-thumbnail  { --feature-color: #06b6d4; --feature-gradient: linear-gradient(135deg, #06b6d4, #0891b2); }
.feature-video      { --feature-color: #ec4899; --feature-gradient: linear-gradient(135deg, #ec4899, #8b5cf6); }
.feature-purple     { --feature-color: #9333ea; --feature-gradient: linear-gradient(135deg, #9333ea, #7e22ce); }
.feature-analysis   { --feature-color: #8b5cf6; --feature-gradient: linear-gradient(135deg, #8b5cf6, #6366f1); }
.feature-strategy   { --feature-color: #0ea5e9; --feature-gradient: linear-gradient(135deg, #0ea5e9, #38bdf8); }
.feature-orange     { --feature-color: #FF6B35; --feature-gradient: linear-gradient(135deg, #FF6B35, #F7931E); }

.feature-card-header {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    margin-bottom: 0.85rem;
}

.feature-card-badge {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--feature-gradient);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.95rem;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
}

.feature-card-tag {
    color: var(--feature-color);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.9;
}

.feature-card-title {
    font-size: 1.12rem;
    font-weight: 600;
    margin: 0 0 0.5rem 0;
    color: var(--text-primary);
    letter-spacing: -0.01em;
}

.feature-card-desc {
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.55;
    margin: 0 0 0.85rem 0;
    flex-grow: 0;
}

.feature-card-list {
    list-style: none;
    padding: 0;
    margin: 0 0 1rem 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    flex-grow: 1;
}

.feature-card-list li {
    color: var(--text-secondary);
    font-size: 0.78rem;
    padding-left: 1rem;
    position: relative;
    line-height: 1.5;
}

.feature-card-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--feature-color);
    opacity: 0.8;
}

/* ---------- Workflow Stack (3트랙) ---------- */
.workflow-stack {
    display: flex;
    flex-direction: column;
    gap: 1.4rem;
    margin-top: 0.5rem;
}

.workflow-block {
    --wf-color: #10b981;
    --wf-gradient: linear-gradient(135deg, #10b981, #059669);
    position: relative;
    background: rgba(30, 41, 59, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 16px;
    padding: 1.4rem;
    isolation: isolate;
}

.workflow-block::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: var(--wf-gradient);
    border-radius: 16px 0 0 16px;
}

.workflow-block-naver {
    --wf-color: #10b981;
    --wf-gradient: linear-gradient(135deg, #10b981, #06b6d4);
}

.workflow-block-visual {
    --wf-color: #ec4899;
    --wf-gradient: linear-gradient(135deg, #ec4899, #8b5cf6);
}

.workflow-block-intel {
    --wf-color: #8b5cf6;
    --wf-gradient: linear-gradient(135deg, #8b5cf6, #6366f1);
}

.workflow-block-header {
    margin-bottom: 1.1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.workflow-block-tag {
    display: flex;
    align-items: center;
    gap: 0.85rem;
}

.workflow-block-letter {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: var(--wf-gradient);
    color: white;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    font-weight: 800;
    flex-shrink: 0;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
}

.workflow-block-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 0.2rem 0;
    letter-spacing: -0.01em;
}

.workflow-block-desc {
    font-size: 0.82rem;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.45;
}

/* ---------- Workflow Track (single row of steps) ---------- */
.workflow-track {
    display: flex;
    align-items: stretch;
    gap: 0.5rem;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
    overflow-x: auto;
}

.workflow-step {
    flex: 1 1 0;
    min-width: 165px;
    padding: 1.1rem 0.95rem;
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    position: relative;
    transition: all 0.25s ease;
}

.workflow-step:hover {
    transform: translateY(-3px);
    border-color: var(--wf-color, rgba(16, 185, 129, 0.4));
    background: rgba(15, 23, 42, 0.85);
}

.workflow-step-num {
    color: var(--wf-color, var(--accent-primary));
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.18em;
}

.workflow-step-icon {
    font-size: 1.4rem;
    color: var(--text-primary);
    background: var(--wf-gradient, linear-gradient(135deg, #10b981, #06b6d4));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.workflow-step h4 {
    font-size: 0.98rem;
    font-weight: 600;
    margin: 0;
    color: var(--text-primary);
}

.workflow-step p {
    font-size: 0.78rem;
    color: var(--text-secondary);
    line-height: 1.5;
    margin: 0;
}

.workflow-arrow {
    display: flex;
    align-items: center;
    color: rgba(255, 255, 255, 0.18);
    font-size: 1.1rem;
    flex-shrink: 0;
}

@media (max-width: 1024px) {
    .workflow-track {
        flex-direction: column;
    }
    .workflow-arrow {
        transform: rotate(90deg);
        align-self: center;
    }
}

/* ---------- VS Matrix (기존 도구 vs 본 시스템) ---------- */
.vs-matrix {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 1rem;
    align-items: stretch;
    margin: 1.5rem 0 0;
}

@media (max-width: 1024px) {
    .vs-matrix {
        grid-template-columns: 1fr;
    }
}

.vs-column {
    position: relative;
    padding: 1.75rem 1.6rem;
    border-radius: 18px;
    overflow: hidden;
    isolation: isolate;
}

.vs-column-them {
    background: rgba(20, 25, 40, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.vs-column-us {
    background: rgba(15, 35, 35, 0.55);
    border: 1px solid rgba(16, 185, 129, 0.25);
}

.vs-column-glow {
    position: absolute;
    top: -40%;
    left: -20%;
    width: 140%;
    height: 180%;
    background:
        radial-gradient(ellipse at 30% 30%, rgba(16, 185, 129, 0.18), transparent 60%),
        radial-gradient(ellipse at 70% 70%, rgba(14, 165, 233, 0.14), transparent 60%);
    filter: blur(40px);
    z-index: -1;
    pointer-events: none;
}

.vs-column-header {
    margin-bottom: 1.25rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.vs-column-tag {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
    opacity: 0.8;
}

.vs-column-tag-us {
    color: var(--accent-primary);
    opacity: 1;
}

.vs-column-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    letter-spacing: -0.01em;
}

.vs-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

.vs-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    color: var(--text-secondary);
    font-size: 0.9rem;
    line-height: 1.55;
}

.vs-list li i {
    flex-shrink: 0;
    margin-top: 0.25rem;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
}

.vs-list li .fa-xmark {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

.vs-list-us li {
    color: rgba(248, 250, 252, 0.92);
}

.vs-list-us li .fa-check {
    background: rgba(16, 185, 129, 0.2);
    color: var(--accent-primary);
}

.vs-list-us strong {
    color: var(--text-primary);
    font-weight: 600;
}

.vs-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 0.5rem;
}

.vs-divider span {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background:
        radial-gradient(circle at center, rgba(16, 185, 129, 0.3), rgba(16, 185, 129, 0.05) 70%);
    border: 1px solid rgba(16, 185, 129, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-primary);
    font-weight: 800;
    font-size: 0.9rem;
    letter-spacing: 0.05em;
    box-shadow: 0 0 30px rgba(16, 185, 129, 0.25);
}

@media (max-width: 1024px) {
    .vs-divider {
        padding: 0.5rem 0;
    }
}

/* ---------- Why Different Grid (6 차별 카드) ---------- */
.differ-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-top: 0.5rem;
}

@media (max-width: 1024px) {
    .differ-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
    .differ-grid { grid-template-columns: 1fr; }
}

.differ-card {
    position: relative;
    background: rgba(30, 41, 59, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
    padding: 1.4rem 1.4rem 1.5rem;
    transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
    overflow: hidden;
}

.differ-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(16, 185, 129, 0.4), transparent);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.differ-card:hover {
    transform: translateY(-3px);
    border-color: rgba(16, 185, 129, 0.3);
    background: rgba(30, 41, 59, 0.7);
}

.differ-card:hover::after {
    opacity: 1;
}

.differ-card-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.2), rgba(14, 165, 233, 0.2));
    border: 1px solid rgba(16, 185, 129, 0.25);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-primary);
    font-size: 1.15rem;
    margin-bottom: 0.95rem;
}

.differ-card-title {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 0.55rem 0;
    letter-spacing: -0.01em;
}

.differ-card-desc {
    font-size: 0.86rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0;
}

.differ-card-desc strong {
    color: var(--text-primary);
    font-weight: 600;
}