/* ========================================
   통합 테마 시스템 - DeepSight Lite
   ======================================== */

/* ========================================
   1. CSS 변수 정의 (라이트모드 기본값)
   ======================================== */
:root {
    /* === 기본 색상 시스템 === */
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;
    --card: 0 0% 100%;
    --card-foreground: 222.2 84% 4.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 222.2 84% 4.9%;
    --primary: 221.2 83.2% 53.3%;
    --primary-foreground: 210 40% 98%;
    --secondary: 210 40% 96%;
    --secondary-foreground: 222.2 84% 4.9%;
    --muted: 210 40% 96%;
    --muted-foreground: 215.4 16.3% 46.9%;
    --accent: 210 40% 96%;
    --accent-foreground: 222.2 84% 4.9%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 210 40% 98%;
    --border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;
    --ring: 221.2 83.2% 53.3%;

    /* === 글라스모피즘 시스템 === */
    --glassmorphism-bg: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.1) 100%);
    --glassmorphism-border: rgba(255, 255, 255, 0);
    --glassmorphism-shadow: rgba(0, 0, 0, 0.12);
    --glassmorphism-shadow-hover: rgba(0, 0, 0, 0.18);

    /* === 레이아웃 간격 및 헤더 === */
    --header-height: 4.25rem;
    /* 68px, header padding 조정과 맞춤 */
    --header-main-padding-y: 0.75rem;
    /* #header-main의 상하 패딩 (기본 py-3 = 0.75rem) */
    --page-top-spacing: calc(var(--header-height) + 2.75rem);
    --sidebar-width: 16rem;
    /* 256px */
    --sidebar-collapsed-width: 4rem;
    /* 64px */
    --sidebar-transition-duration: 0.2s;
    --page-top-spacing-sm: calc(var(--header-height) + 1.25rem);
    --page-top-spacing-lg: calc(var(--header-height) + 2rem);

    /* 페이지 콘텐츠 가로폭: 풀폭 활용 시 사용 (max-width 없음, 최소 좌우 패딩만) */
    --page-container-px: 1rem;

    /* === 타이포그래피 (디자인 시스템) === */
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 1.875rem;
    --font-size-4xl: 2.25rem;
}

/* ========================================
   2. 다크모드 오버라이드
   ======================================== */
.dark {
    /* === 기본 색상 시스템 (다크모드) === */
    --background: 224 71.4% 4.1%;
    --foreground: 210 20% 98%;
    --card: 224 71.4% 4.1%;
    --card-foreground: 210 20% 98%;
    --popover: 224 71.4% 4.1%;
    --popover-foreground: 210 20% 98%;
    --primary: 210 20% 98%;
    --primary-foreground: 220.9 39.3% 11%;
    --secondary: 215 27.9% 16.9%;
    --secondary-foreground: 210 20% 98%;
    --muted: 215 27.9% 16.9%;
    --muted-foreground: 217.9 10.6% 64.9%;
    --accent: 215 27.9% 16.9%;
    --accent-foreground: 210 20% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 210 20% 98%;
    --border: 215 27.9% 16.9%;
    --input: 215 27.9% 16.9%;
    --ring: 216 12.2% 83.9%;

    /* === 글라스모피즘 시스템 (다크모드) === */
    --glassmorphism-bg: linear-gradient(90deg, rgba(23, 25, 28, 0.82) 0%, rgba(0, 0, 0, 0) 100%);
    --glassmorphism-border: rgba(255, 92, 92, 0);
    --glassmorphism-shadow: rgba(0, 0, 0, 0.12);
}

/* ========================================
   3. 글라스모피즘 헤더 스타일
   ======================================== */
.glassmorphism-header {
    background: var(--glassmorphism-bg);
    backdrop-filter: blur(5px) saturate(200%);
    -webkit-backdrop-filter: blur(5px) saturate(200%);
    border: 1px solid var(--glassmorphism-border);
    box-shadow: 0 8px 32px 0 var(--glassmorphism-shadow),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease;
}

#app-header {
    border: none;
    min-height: var(--header-height);
    display: flex;
    align-items: center;
}

#app-header #header-main {
    padding-top: var(--header-main-padding-y, 0.75rem);
    padding-bottom: var(--header-main-padding-y, 0.75rem);
}

.glassmorphism-header:hover {
    backdrop-filter: blur(8px) saturate(220%);
    -webkit-backdrop-filter: blur(8px) saturate(220%);
    box-shadow: 0 16px 48px 0 var(--glassmorphism-shadow-hover),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
    transform: translateY(-1px);
}

/* ========================================
   4. 페이지 간격 시스템
   ======================================== */
.page-top-spacing {
    padding-top: var(--page-top-spacing);
}

.page-top-spacing-sm {
    padding-top: var(--page-top-spacing-sm);
}

.page-top-spacing-lg {
    padding-top: var(--page-top-spacing-lg);
}

/* 페이지 콘텐츠 풀폭 컨테이너: max-width 제한 없이 메인 영역 가로 전체 사용, 좌우만 최소 패딩 */
.page-container {
    width: 100%;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    padding-left: var(--page-container-px);
    padding-right: var(--page-container-px);
}

/* ========================================
   5. 다크모드 강제 스타일 (특수 페이지용)
   ======================================== */
html.dark {
    color-scheme: dark;
}

html.dark body {
    background-color: hsl(var(--background)) !important;
    color: hsl(var(--foreground)) !important;
}

html.light {
    color-scheme: light;
}

html.light body {
    background-color: hsl(var(--background)) !important;
    color: hsl(var(--foreground)) !important;
}

html.dark .bg-background {
    background-color: hsl(var(--background)) !important;
}

html.dark .bg-card {
    background-color: hsl(var(--card)) !important;
    color: hsl(var(--card-foreground)) !important;
}

html.dark .text-foreground {
    color: hsl(var(--foreground)) !important;
}

html.dark .text-muted-foreground {
    color: hsl(var(--muted-foreground)) !important;
}

html.dark .border-border {
    border-color: hsl(var(--border)) !important;
}

html.dark button:not(.bg-primary):not(.bg-secondary\/50) {
    background-color: hsl(var(--secondary));
    color: hsl(var(--secondary-foreground));
}

/* Primary button styles for both light and dark modes */
.bg-primary {
    background-color: hsl(var(--primary)) !important;
    color: hsl(var(--primary-foreground)) !important;
}

.text-primary-foreground {
    color: hsl(var(--primary-foreground)) !important;
}

/* Secondary button styles for consistency */
.bg-secondary\/50 {
    background-color: hsl(var(--secondary) / 0.5) !important;
}

.text-secondary-foreground {
    color: hsl(var(--secondary-foreground)) !important;
}

/* ========================================
   6. 폰트 시스템
   ======================================== */
body {
    font-family: 'Noto Sans KR', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    line-height: 1.6;
}

/* ========================================
   7. 디자인 시스템 컴포넌트 클래스
   ======================================== */

/* 버튼 기본 스타일 */
.ds-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
    transition: all 0.2s ease;
    cursor: pointer;
    border: none;
    outline: none;
}

/* Primary 버튼 */
.ds-btn--primary {
    background-color: hsl(var(--primary));
    color: hsl(var(--primary-foreground));
}

.ds-btn--primary:hover {
    background-color: hsl(var(--primary) / 0.9);
}

/* Secondary 버튼 */
.ds-btn--secondary {
    background-color: transparent;
    color: hsl(var(--foreground));
    border: 1px solid hsl(var(--border));
}

.ds-btn--secondary:hover {
    background-color: hsl(var(--accent));
    color: hsl(var(--accent-foreground));
}

/* Destructive 버튼 */
.ds-btn--destructive {
    background-color: hsl(var(--destructive));
    color: hsl(var(--destructive-foreground));
}

.ds-btn--destructive:hover {
    background-color: hsl(var(--destructive) / 0.9);
}

/* Ghost 버튼 */
.ds-btn--ghost {
    background-color: transparent;
    color: hsl(var(--foreground));
}

.ds-btn--ghost:hover {
    background-color: hsl(var(--accent));
    color: hsl(var(--accent-foreground));
}

/* Gradient 버튼 */
.ds-btn--gradient {
    background: var(--gradient, linear-gradient(to right, #9333ea, #3b82f6));
    color: white;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.ds-btn--gradient:hover {
    background: var(--gradient-hover, linear-gradient(to right, #7e22ce, #2563eb));
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

/* Icon 버튼 */
.ds-btn--icon {
    padding: 0.5rem;
    border-radius: 0.5rem;
    border: 1px solid hsl(var(--border));
    background-color: hsl(var(--background));
    color: hsl(var(--foreground));
}

.ds-btn--icon:hover {
    background-color: hsl(var(--accent));
    color: hsl(var(--accent-foreground));
}

/* 버튼 크기 (디자인 시스템 타이포그래피 변수 사용) */
.ds-btn--sm {
    padding: 0.375rem 0.75rem;
    font-size: var(--font-size-sm);
    border-radius: 0.375rem;
}

.ds-btn {
    padding: 0.5rem 1rem;
    font-size: var(--font-size-base);
    border-radius: 0.5rem;
}

.ds-btn--lg {
    padding: 0.75rem 1.5rem;
    font-size: var(--font-size-lg);
    border-radius: 0.5rem;
}

/* 카드 기본 스타일 */
.ds-card {
    border-radius: 0.75rem;
    border: 1px solid hsl(var(--border));
    background-color: hsl(var(--card));
    color: hsl(var(--card-foreground));
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    padding: 1.5rem;
}

/* 기본 카드 */
/* 기본 스타일은 .ds-card에 정의됨 */

/* 호버 효과 카드 */
.ds-card--hover {
    transition: all 0.3s ease;
}

.ds-card--hover:hover {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    transform: translateY(-0.25rem) scale(1.02);
}

/* 선택된 카드 */
.ds-card--selected {
    border: 2px solid #3b82f6;
    box-shadow: 0 0 25px rgba(59, 130, 246, 0.6);
    background-color: rgba(59, 130, 246, 0.05);
    transform: scale(1.02);
}

html.dark .ds-card--selected {
    background-color: rgba(59, 130, 246, 0.1);
}

/* 홈 화면 분석 모듈 카드 hover 효과 (selected 스타일 적용) */
.module-card-hover:hover {
    border: 2px solid #6695e1;
    box-shadow: 0 0 25px rgba(102, 149, 225, 0.6);
    background-color: rgba(102, 149, 225, 0.05);
    transform: scale(1.02);
}

html.dark .module-card-hover:hover {
    background-color: rgba(102, 149, 225, 0.1);
}

/* 글라스모피즘 카드 */
.ds-card--glass {
    background: var(--glassmorphism-bg);
    backdrop-filter: blur(10px) saturate(200%);
    -webkit-backdrop-filter: blur(10px) saturate(200%);
    border: 1px solid var(--glassmorphism-border);
    box-shadow: 0 8px 32px 0 var(--glassmorphism-shadow);
}

/* ========================================
   8. 디자인 시스템 컨트롤 버튼 스타일
   ======================================== */
.control-btn {
    padding: 0.375rem 0.75rem;
    font-size: var(--font-size-xs);
    font-weight: 500;
    border: 1px solid hsl(var(--border));
    background-color: hsl(var(--background));
    color: hsl(var(--foreground));
    border-radius: 0.375rem;
    cursor: pointer;
    transition: all 0.2s ease;
    outline: none;
}

.control-btn:hover {
    background-color: hsl(var(--accent));
    border-color: hsl(var(--primary));
    color: hsl(var(--accent-foreground));
}

.control-btn.active {
    background-color: hsl(var(--primary));
    color: hsl(var(--primary-foreground));
    border-color: hsl(var(--primary));
}

.control-btn:focus-visible {
    outline: 2px solid hsl(var(--primary));
    outline-offset: 2px;
}

/* ========================================
   9. 반응형 조정
   ======================================== */
@media (max-width: 768px) {
    :root {
        --page-top-spacing: 7rem;
        /* 모바일에서 조금 줄임 */
    }
}

.sticky-below-header {
    top: var(--header-height);
}

/* ========================================
   10. SaaS 레이아웃 - 사이드바
   사이드바는 헤더 바로 아래에서 시작 (겹침 방지)
   ======================================== */
.layout-with-sidebar .app-sidebar {
    top: var(--header-height) !important;
    height: calc(100vh - var(--header-height)) !important;
    transition: width var(--sidebar-transition-duration) ease, transform var(--sidebar-transition-duration) ease;
}

/* 사이드바 접힘 상태 */
.app-sidebar.sidebar-collapsed {
    width: var(--sidebar-collapsed-width) !important;
}

.app-sidebar.sidebar-collapsed .sidebar-text,
.app-sidebar.sidebar-collapsed .sidebar-label {
    opacity: 0;
    width: 0;
    overflow: hidden;
    white-space: nowrap;
}

.app-sidebar.sidebar-collapsed .sidebar-item {
    justify-content: center;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

.app-sidebar.sidebar-collapsed .sidebar-item i {
    margin-right: 0;
}

/* 프로필 박스 접힘 상태 */
.app-sidebar.sidebar-collapsed .sidebar-profile-box {
    padding: 0.75rem 0.5rem;
}

.app-sidebar.sidebar-collapsed .sidebar-profile-name,
.app-sidebar.sidebar-collapsed .sidebar-profile-menu {
    opacity: 0;
    height: 0;
    overflow: hidden;
}

.app-sidebar.sidebar-collapsed .sidebar-profile-avatar {
    margin: 0 auto;
}

/* 모바일: 사이드바 열림 시 표시 (자체 토글 구현) */
@media (max-width: 639px) {
    .app-sidebar.sidebar-open {
        transform: translateX(0);
    }
    
    .app-sidebar.sidebar-collapsed {
        width: var(--sidebar-width) !important;
    }
}

#sidebar-backdrop.sidebar-backdrop-visible {
    opacity: 1;
    pointer-events: auto;
}

.main-with-sidebar {
    margin-left: 0;
    transition: margin-left var(--sidebar-transition-duration) ease;
}

@media (min-width: 640px) {
    .main-with-sidebar {
        margin-left: var(--sidebar-width);
    }
    
    .layout-with-sidebar.sidebar-collapsed .main-with-sidebar {
        margin-left: var(--sidebar-collapsed-width);
    }
}

/* Sidebar layout: 헤더 전체 너비 상단 고정 (스크롤해도 고정) */
.layout-with-sidebar #app-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 50;
}

/* 모든 헤더: 로고 좌측 정렬 (20px = sidebar 아이콘과 동일한 기준선) */
@media (min-width: 640px) {
    #app-header #header-main {
        display: grid;
        grid-template-columns: var(--sidebar-width) 1fr;
        max-width: none;
        margin-left: 0;
        margin-right: 0;
        transition: grid-template-columns var(--sidebar-transition-duration) ease;
    }

    .layout-with-sidebar.sidebar-collapsed #app-header #header-main {
        grid-template-columns: auto 1fr;
    }

    #app-header #header-main > div:first-child {
        padding-left: 1.25rem; /* 20px = sidebar px-3(12px) + nav link p-2(8px) */
        min-width: fit-content; /* 로고가 축소되지 않도록 */
        width: fit-content; /* 로고 영역이 사이드바 너비에 맞춰 축소되지 않도록 */
    }

    #app-header #header-main > div:last-child {
        justify-self: end;
    }
}