/* Custom styles for Brand Keyword Analyzer */
/* 
   주의: 테마 관련 스타일은 static/css/theme.css에서 관리됩니다.
   이 파일은 분석 결과, 차트, 업로드 등 기능별 스타일만 포함합니다.
*/

/* ============================================
   계층적 토픽 스타일
   ============================================ */

/* 세부 토픽 컨테이너 */
.ml-6 {
    margin-left: 1.5rem;
}

.border-l-2 {
    border-left-width: 2px;
}

.pl-4 {
    padding-left: 1rem;
}

/* 세부 토픽 연결선 */
.absolute.-left-4 {
    position: absolute;
    left: -1rem;
}

.top-6 {
    top: 1.5rem;
}

.w-4 {
    width: 1rem;
}

.h-px {
    height: 1px;
}

/* 반응형: 모바일에서 들여쓰기 줄이기 */
@media (max-width: 768px) {
    .ml-6 {
        margin-left: 0.75rem;
    }
    
    .pl-4 {
        padding-left: 0.5rem;
    }
    
    .absolute.-left-4 {
        left: -0.5rem;
    }
}

/* Individual Brands Container */
.individual-brands-container {
    width: 100% !important;
    /* max-width: none !important; */ /* 비활성화 */
    display: flex !important;
    flex-direction: column !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    clear: both !important;
    align-items: stretch !important;
    gap: 2rem !important;
}

/* Individual Brand Section */
.individual-brand-section {
    width: 100% !important;
    /*max-width: none !important;*/
    min-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    display: block !important;
    position: relative !important;
    clear: both !important;
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
}

/* Force identical styling for ALL individual brand sections */
.individual-brand-section:nth-child(n) {
    width: 100% !important;
    /* max-width: none !important; */ /* 비활성화 */
    min-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    display: block !important;
    position: relative !important;
    transform: none !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
}

/* Override any external CSS that might affect specific sections */
.individual-brand-section:last-child,
.individual-brand-section:nth-last-child(1),
.individual-brand-section:nth-last-child(2) {
    margin: 0 !important;
    padding: 0 !important;
}

.brand-analysis-container {
    width: 100% !important;
    /* max-width: none !important; */ /* 비활성화 */
    min-width: 100% !important;
    min-height: 800px !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    display: block !important;
    position: relative !important;
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
}

/* Force identical styling for ALL analysis containers */
.individual-brand-section .brand-analysis-container {
    width: 100% !important;
    /* max-width: none !important; */ /* 비활성화 */
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    display: block !important;
    position: relative !important;
    transform: none !important;
    left: auto !important;
    right: auto !important;
}

/* Force all rounded containers to identical sizing */
.individual-brand-section .rounded-xl {
    width: 100% !important;
    /* max-width: none !important; */ /* 비활성화 */
    min-width: 100% !important;
    box-sizing: border-box !important;
    display: block !important;
}

.multi-brand-comparison {
    min-height: 700px; /* Slightly smaller for comparison section */
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
}

/* Brand section components - Force consistent widths */
.brand-header {
    border-bottom: 1px solid var(--border);
    width: 100% !important;
    box-sizing: border-box;
}

.brand-content {
    padding: 1.5rem;
    width: 100% !important;
    box-sizing: border-box;
}

.brand-main-chart {
    margin-bottom: 1.5rem;
    width: 100% !important;
    box-sizing: border-box;
}

.brand-details-toggle {
    margin-bottom: 1rem;
    width: 100% !important;
    box-sizing: border-box;
}

.brand-details-content {
    width: 100% !important;
    box-sizing: border-box;
}

.brand-bar-chart,
.brand-word-cloud,
.brand-keyword-categories {
    margin-bottom: 1.5rem;
    width: 100% !important;
    box-sizing: border-box;
}

/* Chart container consistency - Force equal widths */
.chart-container-large,
.chart-container-sub {
    min-height: 400px;
    width: 100% !important;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

/* WordCloud container consistency */
.wordcloud-container-sub {
    min-height: 250px;
    width: 100% !important;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

/* Additional consistency rules */
.rounded-xl.border.border-border.bg-card.text-card-foreground.shadow-lg {
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Ensure all child elements inherit proper box-sizing */
.individual-brand-section *,
.brand-analysis-container *,
.brand-header *,
.brand-content *,
.brand-main-chart *,
.brand-details-content * {
    box-sizing: border-box;
}

/* Force consistent container behavior */
.mb-8 .rounded-xl {
    width: 100% !important;
    /* max-width: 100% !important; */ /* 비활성화 */
}

/* Critical: Force all individual brand sections to identical dimensions */
.individual-brand-section,
.individual-brand-section *,
.brand-analysis-container,
.brand-analysis-container * {
    box-sizing: border-box !important;
}

/* Container-level enforcement - keep conservative override only for explicit max-width utilities */
/* 비활성화: max-width 오버라이드 코드들
.max-w-7xl {
    /* max-width: none !important; */ /* 비활성화 */
}

.max-w-7xl, .max-w-6xl, .max-w-5xl, .max-w-4xl, .max-w-3xl, .max-w-2xl, .max-w-xl, .max-w-lg, .max-w-md, .max-w-sm {
    /* max-width: none !important; */ /* 비활성화 */
}
*/

/* Main container grid system - use default Tailwind flow; avoid forcing widths of all descendants */
main {
    display: block;
}

/* Override any Tailwind or framework width classes */
.w-full {
    width: 100% !important;
}

/* 비활성화: max-width 오버라이드
.max-w-none {
    /* max-width: none !important; */ /* 비활성화 */
}
*/

/* 비활성화: max-width 오버라이드
.max-w-full {
    max-width: 100% !important;
}
*/

/* Chart Container Sizes */
.chart-container-large {
    position: relative;
    height: 400px;
    width: 100%;
}

.chart-container-sub {
    position: relative;
    height: 250px;
    width: 100%;
}

.wordcloud-container-sub {
    position: relative;
    height: 250px;
    width: 100%;
}

/* Upload Area Styles */
.upload-area {
    border: 2px dashed var(--bs-border-color);
    border-radius: 0.5rem;
    transition: all 0.3s ease;
    background: var(--bs-body-bg);
}

.upload-area:hover {
    border-color: var(--bs-primary);
    background: var(--bs-primary-bg-subtle);
}

.upload-area.dragover {
    border-color: var(--bs-primary);
    background: var(--bs-primary-bg-subtle);
    border-style: solid;
}

.upload-content {
    cursor: pointer;
}

/* File List Styles */
.file-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.375rem;
    background: var(--bs-body-bg);
    margin-bottom: 0.5rem;
}

.file-info {
    display: flex;
    align-items: center;
}

.file-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.25rem;
    margin-right: 0.75rem;
}

.file-icon.excel {
    background: rgba(33, 136, 56, 0.1);
    color: #218838;
}

.file-icon.csv {
    background: rgba(0, 123, 255, 0.1);
    color: #007bff;
}

.file-details h6 {
    margin: 0;
    font-size: var(--font-size-sm, 0.875rem);
}

.file-details small {
    color: var(--bs-secondary);
}

/* Chart Container Styles */
.chart-card {
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 0.5rem;
    padding: 1.5rem;
    height: 100%;
}

.main-chart {
    background: linear-gradient(135deg, var(--bs-primary-bg-subtle) 0%, var(--bs-body-bg) 100%);
    border: 2px solid var(--bs-primary);
    margin-bottom: 2rem;
}

.sub-chart {
    background: var(--bs-secondary-bg-subtle);
    border: 1px solid var(--bs-border-color-translucent);
}

.chart-title {
    font-weight: 600;
    margin-bottom: 1rem;
    color: var(--bs-body-color);
}

.chart-container-large {
    position: relative;
    height: 500px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

.chart-container-sub {
    position: relative;
    height: 250px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

.wordcloud-container-sub {
    position: relative;
    height: 300px;
    background: var(--bs-body-bg);
    border-radius: 0.375rem;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .chart-container-large {
        height: 400px;
    }

    .chart-container-sub {
        height: 200px;
    }

    .wordcloud-container-sub {
        height: 250px;
    }

    .main-chart {
        margin-bottom: 1rem;
        padding: 1rem;
    }

    .sub-chart {
        padding: 1rem;
        margin-bottom: 1rem;
    }
}

.remove-file {
    background: none;
    border: none;
    color: var(--bs-danger);
    font-size: var(--font-size-xl, 1.25rem);
    cursor: pointer;
    padding: 0.25rem;
    border-radius: 0.25rem;
    transition: background-color 0.15s ease-in-out;
}

.remove-file:hover {
    background: rgba(220, 53, 69, 0.1);
}

/* Feature Items */
.feature-item {
    text-align: center;
    padding: 1rem;
}

/* Archetype Cards */
.archetype-card {
    padding: 1rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.375rem;
    background: var(--bs-body-bg);
    height: 100%;
    transition: transform 0.2s ease;
}

.archetype-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.archetype-card h6 {
    margin-bottom: 0.5rem;
    font-weight: 600;
}

/* Chart Containers */
.chart-container {
    position: relative;
    height: 300px;
    width: 100%;
}

.chart-card {
    padding: 1.5rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.5rem;
    background: var(--bs-body-bg);
    height: 100%;
}

.chart-title {
    margin-bottom: 1rem;
    font-weight: 600;
    color: var(--bs-heading-color);
}

/* Word Cloud Container */
.wordcloud-container {
    position: relative;
    height: 400px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--bs-body-bg);
    border-radius: 0.375rem;
    overflow: hidden;
}

/* Category Keywords */
.category-keywords {
    padding: 1rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.375rem;
    background: var(--bs-body-bg);
    height: 100%;
}

.category-title {
    margin-bottom: 0.75rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.keyword-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.keyword-list li {
    padding: 0.25rem 0;
    border-bottom: 1px solid var(--bs-border-color-translucent);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.keyword-list li:last-child {
    border-bottom: none;
}

.keyword-list .count {
    color: var(--bs-secondary);
    font-size: var(--font-size-sm, 0.875rem);
}

/* Metrics */
.metric {
    padding: 1rem;
}

.metric .h4 {
    font-weight: 700;
    color: var(--bs-primary);
}

/* Unmapped Keywords */
.unmapped-keywords {
    line-height: 1.8;
}

/* Custom Colors */
.text-purple {
    color: #9966ff !important;
}

.text-pink {
    color: #ff6b9d !important;
}

.text-orange {
    color: #ff9f40 !important;
}

.text-gold {
    color: #ffd700 !important;
}

/* Loading States */
.loading {
    opacity: 0.6;
    pointer-events: none;
}

.loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    border: 2px solid var(--bs-primary);
    border-radius: 50%;
    border-top-color: transparent;
    animation: spin 1s linear infinite;
}

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

/* Responsive Adjustments */
@media (max-width: 768px) {
    .chart-container {
        height: 250px;
    }

    .wordcloud-container {
        height: 300px;
    }

    .feature-item {
        padding: 0.5rem;
    }

    .metric {
        padding: 0.5rem;
    }
}

/* Print Styles */
@media print {
    .btn, .alert-dismissible .btn-close, .no-print {
        display: none !important;
    }

    .chart-container {
        height: auto !important;
        page-break-inside: avoid;
    }

    .card {
        border: 1px solid #ddd !important;
        box-shadow: none !important;
        page-break-inside: avoid;
    }
}

/* Dark Mode Specific Adjustments */
[data-bs-theme="dark"] .upload-area {
    border-color: var(--bs-border-color);
}

[data-bs-theme="dark"] .upload-area:hover,
[data-bs-theme="dark"] .upload-area.dragover {
    border-color: var(--bs-primary);
    background: rgba(var(--bs-primary-rgb), 0.1);
}

[data-bs-theme="dark"] .archetype-card:hover {
    box-shadow: 0 4px 8px rgba(255, 255, 255, 0.1);
}

/* Accessibility Improvements */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Focus States */
.upload-area:focus-within {
    outline: 2px solid var(--bs-primary);
    outline-offset: 2px;
}

button:focus,
.btn:focus {
    box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25);
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
    .upload-area {
        border-width: 3px;
    }

    .archetype-card,
    .category-keywords,
    .chart-card {
        border-width: 2px;
    }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
    .upload-area,
    .archetype-card,
    .remove-file {
        transition: none;
    }

    .loading::after {
        animation: none;
    }
}

/* Consistent Card Content Sizing */
.rounded-xl .p-6 {
    min-height: fit-content;
    display: flex;
    flex-direction: column;
    width: 100%;
    box-sizing: border-box;
}

.rounded-xl .p-6:not(.border-b) {
    flex: 1;
}

/* Force equal width for grid items containing p-6 */
.grid > * > .rounded-xl {
    width: 100%;
}

.grid > * > .rounded-xl .p-6 {
    min-width: 0;
    flex: 1 1 auto;
}

/* Keyword Table Styles */
.keyword-table-container {
    overflow-x: auto;
    overflow-y: visible; /* 툴팁이 보이도록 */
    -webkit-overflow-scrolling: touch;
    position: relative; /* 툴팁 위치 지정을 위해 */
}

.keyword-table-container table {
    table-layout: fixed;
    width: 100%;
}

.keyword-table-container table td {
    word-wrap: break-word;
}

/* Archetype column specific styles */
.keyword-table-container table td:last-child {
    max-width: 0;
    overflow: visible; /* 툴팁이 보이도록 변경 */
    position: relative;
}

.keyword-table-container table td:last-child > div {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow-y: visible; /* 툴팁이 보이도록 추가 */
}

/* Keyword cell with ellipsis */
.keyword-cell {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 0;
}

/* Archetype tags container with horizontal scroll */
.archetype-tags-container {
    display: flex;
    gap: 0.25rem;
    overflow-x: auto;
    overflow-y: visible; /* 툴팁이 보이도록 변경 */
    scrollbar-width: thin;
    -ms-overflow-style: -ms-autohiding-scrollbar;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    position: relative;
    /* Force width constraint - prevent flex items from expanding beyond parent */
    flex-wrap: nowrap;
    flex-shrink: 1;
    flex-basis: 0;
    /* contain: layout; 제거 - 툴팁 표시를 위해 */
    /* 스크롤이 필요할 때만 스크롤바 표시 */
    scrollbar-width: auto;
}

/* 스크롤이 필요할 때만 스크롤바 표시 (WebKit) */
.archetype-tags-container::-webkit-scrollbar {
    height: 6px;
}

.archetype-tags-container::-webkit-scrollbar-track {
    background: transparent;
    display: none; /* 기본적으로 숨김 */
}

.archetype-tags-container:hover::-webkit-scrollbar-track {
    display: block; /* 호버 시에만 표시 */
}

.archetype-tags-container::-webkit-scrollbar-thumb {
    background: transparent; /* 기본적으로 투명 */
    border-radius: 2px;
}

.archetype-tags-container:hover::-webkit-scrollbar-thumb {
    background: rgba(128, 128, 128, 0.3); /* 호버 시에만 표시 */
}

.archetype-tags-container::-webkit-scrollbar-thumb:hover {
    background: rgba(128, 128, 128, 0.5);
}

/* 스크롤이 필요 없을 때는 스크롤바 완전히 숨김 */
.archetype-tags-container.no-scroll-needed {
    overflow-x: hidden !important;
    overflow-y: visible !important; /* 툴팁을 위해 유지 */
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}

.archetype-tags-container.no-scroll-needed::-webkit-scrollbar {
    display: none !important;
}

/* Archetype tag - prevent wrapping */
.archetype-tag {
    flex-shrink: 0;
    white-space: nowrap;
    position: relative; /* 툴팁을 위한 relative */
    z-index: 1; /* 툴팁이 다른 요소 위에 표시되도록 */
}

/* 툴팁 스타일 - fixed positioning으로 최상위 레이어에 표시 (Glassmorphism 효과 적용) */
.archetype-tooltip-fixed {
    position: fixed;
    z-index: 99999 !important;
    width: 256px;
    padding: 12px;
    border-radius: 8px;
    opacity: 0;
    pointer-events: none;
    font-size: var(--font-size-sm, 0.875rem);
    line-height: 1.5;
    
    /* Glassmorphism 효과 - 라이트 모드 */
    background: rgba(255, 255, 255, 0.4); /* white with 0.4 opacity */
    backdrop-filter: blur(16px) saturate(200%);
    -webkit-backdrop-filter: blur(16px) saturate(200%);
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 8px 12px 0 rgba(0, 0, 0, 0.12); /* 12px blur, 0.12 opacity */
    color: hsl(var(--foreground));
    
    transition: opacity 0.2s ease-in-out, 
                backdrop-filter 0.3s ease-in-out,
                box-shadow 0.3s ease-in-out;
}

/* 다크 모드 툴팁 스타일 */
.dark .archetype-tooltip-fixed {
    background: rgba(15, 23, 42, 0.4); /* 다크모드 원래 색상 */
    backdrop-filter: blur(16px) saturate(200%);
    -webkit-backdrop-filter: blur(16px) saturate(200%);
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 8px 12px 0 rgba(0, 0, 0, 0.12); /* 12px blur, 0.12 opacity */
    color: hsl(var(--foreground));
}

.dictionary-selection-active {
    border-width: 2px !important;
    border-style: solid !important;
    border-color: hsl(var(--primary-foreground)) !important;
    background: linear-gradient(
        135deg,
        rgba(37, 99, 235, 0.12),
        rgba(37, 99, 235, 0.05)
    ) !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2),
                0 18px 32px rgba(15, 23, 42, 0.16) !important;
    transform: translateY(-2px);
    transition: border-color 0.2s ease,
                box-shadow 0.2s ease,
                background-color 0.2s ease,
                transform 0.2s ease;
}

.dark .dictionary-selection-active {
    border-color: hsl(var(--primary)) !important;
    background: linear-gradient(
        135deg,
        rgba(37, 99, 235, 0.25),
        rgba(37, 99, 235, 0.12)
    ) !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.35),
                0 24px 36px rgba(8, 15, 35, 0.55) !important;
}