/*
// Media Query Size
//------------------------------------------------
Small display scales - @media (min-width: 576px) and @media (max-width: 575px)
Medium screen scale - (min-width: 768px) and (max-width: 767px)
Large size display dimension - (min-width: 992px) and (max-width: 991px)
And Additional big display sizes - (min-width: 1200px) and (max-width: 1199px)
*/

@charset "utf-8";

/* Google Fonts for modern typography */
@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Roboto+Mono:wght@400;700&family=Roboto+Condensed:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500;1,600;1,700;1,800;1,900&family=Noto+Sans+KR:wght@100;300;400;500;700;900&family=Noto+Serif+KR:wght@200;300;400;500;600;700;900&family=Song+Myung&display=swap');

/* CSS Variables for consistent theming */
:root {
    --font-gothic:      'Lato', 'Noto Sans KR', sans-serif;
    --font-serif:       'Playfair Display', 'Noto Serif KR', serif;
    --font-monospace:   'Roboto Mono', monospace;
    --font-condensed:   'Roboto Condensed', sans-serif;

    /* Custom Shadows */
    --shadow-sm: 0 2px 3px 0 rgb(0 0 0 / 0.05);
    --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    
    /* Custom Transitions */
    --transition: all 0.5s ease-in-out;
    --transition-fast: all 0.15s ease-in-out;

    /* Typography */
    --font-gothic: 'Lato', 'Noto Sans KR', sans-serif;
    --font-serif: 'Playfair Display', 'Noto Serif KR', serif;
    --font-monospace: 'Monaco', 'Roboto Mono', monospace;
    
    /* Legacy colors for backward compatibility */
    --red-dark: #cb000e;
    --red-light: #ea4836;
    --blue-dark: #004b9b;
    --blue-light: #d1effe;
    --green-dark: #195C28;
    --green-light: #E9FEE1;
    --yellow-dark: #B9A644;
    --yellow-light: #FFFEBD;
}

/* Reset and Base Styles */
* { margin: 0; padding: 0; box-sizing: border-box; }
::-moz-selection { background: var(--blue-light) }
::selection { background: var(--blue-light) }

html { font-family: var(--font-gothic); -webkit-text-size-adjust: 100%; position: relative; width: 100%; height: 100%; margin: 0; padding: 0; }

body { font-family: var(--font-gothic); font-size: 14px; color: #000; line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-tap-highlight-color: #ced4da; text-rendering: optimizeLegibility; position: relative; width: 100%; height: 100%; margin: 0; padding: 0; min-height: 100vh; }

article { font-family: var(--font-serif); }
a:link, a:visited { text-decoration: none; color: var(--red-dark); transition: color .3s ease; }
a:hover { color: var(--red-light); transition: color .3s ease; }

h1, h2, h3, h4, h5, h6 { font-weight: 700; }
h1 { margin-bottom: 1.5rem; }
b, strong { font-weight: 700; }

/* App Grid Layout */
.app-grid-layout {
    display: grid;
    grid-template-rows: 65px 1fr;
    min-height: 100vh;
}

@media (min-width: 768px) {
    .app-grid-layout {
        display: grid;
        grid-template-areas: 
            "nav nav"
            "aside main";
        grid-template-rows: auto 1fr;
        grid-template-columns: 280px 1fr;
        min-height: 100vh;
    }

    /* Grid areas */
    body > nav {
        grid-area: nav;
    }

    body > aside {
        grid-area: aside;
    }

    body > main {
        grid-area: main;
    }
}

/* Navigation Bar */
body > nav { 
    box-shadow: var(--shadow-sm); 
    padding: 0.75rem 0; 
    position: sticky; 
    top: 0; 
    z-index: 1030; 
    backdrop-filter: blur(10px); 
}

/* Navbar spacing and layout */
body > nav .container-fluid { display: flex; align-items: center; justify-content: flex-end; }
body > nav .navbar-brand { font-weight: 600; color: #000; text-decoration: none; transition: var(--transition); }
body > nav .navbar-brand:hover { color: var(--red-dark); transition: var(--transition); }
.navbar-nav { align-items: center; gap: 0.5rem; }

/* Hamburger Menu Button (Left side - Sidebar toggle) */
.hamburger-btn { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: transparent; border: none; color: var(--sm-text-primary); cursor: pointer; transition: var(--transition); }
.hamburger-btn:hover { color: var(--bs-gray-500); transform: scale(1.05); }
.hamburger-btn i { font-size: 1.25rem; }

@media (min-width: 768px) {
    .hamburger-btn { display: none; }
}

.brand-logo { display: flex; align-items: center; gap: 0.5rem; }
.brand-logo i { font-size: 1.5rem; color: var(--red-dark); }
.brand-logo span { font-size: 1.25rem; font-weight: 600; }

/* User Dropdown */
.user-dropdown .nav-link { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem; transition: var(--transition); text-decoration: none; color: #000; }
.user-dropdown .nav-link:hover { color: var(--red-dark); }
.user-avatar i { font-size: 1.5rem; }
.user-name { font-weight: 500; }

.dropdown-menu { border: 1px solid var(--bs-gray-500); border-radius: 0; box-shadow: var(--shadow-lg); padding: 0rem; min-width: 200px; background-color: #fff; }
.dropdown-item { display: flex; align-items: center; gap: 0.25rem; padding: 0.5rem 1rem; transition: var(--transition); border: none; background: none; width: 100%; text-align: left; color: #000; text-decoration: none; }
.dropdown-item:visited { color: #000; }
.dropdown-item:hover { color: var(--red-dark); background-color: var(--bs-gray-100); }
.dropdown-item i { width: 1rem; text-align: center; }
.dropdown-divider { margin: 0; }

.login-btn { color: #000; font-weight: 500; text-decoration: none; padding: 0.5rem 1rem; transition: var(--transition); display: flex; align-items: center; gap: 0.5rem; }
.login-btn:visited { color: #000; }

/* Sidebar - Mobile First */
.sidebar-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); z-index: 1035; opacity: 0; visibility: hidden; transition: all 0.3s ease-in-out; }
.sidebar-overlay.show { opacity: 1; visibility: visible; }

body > aside { background-color: #fff; padding: 1.5rem 0; overflow-y: auto; position: fixed; top: 65px; left: -100vw; width: 100%; height: calc(100vh - 65px); z-index: 1040; transition: left 0.3s ease-in-out; display: grid; grid-template-columns: 1fr 1fr; }
body > aside.show { left: 0; } /* Show aside when menu is open */

@media (min-width: 768px) {
    body > aside { position: static; left: auto; top: auto; width: auto; height: 100%; z-index: auto; transition: none; display: block; box-shadow: var(--shadow); }
    body > aside .user-nav { display: none; }
    .sidebar-overlay { display: none; }
}

.nav-list { list-style: none; padding: 0; margin: 0; }
.nav-list .nav-item { margin: 0; }
.nav-list .nav-list { border-left: 1px solid var(--bs-gray-300); margin-left: 2rem; } /* Nested menus */

.sidebar-nav .nav-link { display: block; padding: 0.25rem 1.5rem; color: #000; text-decoration: none; border-radius: 0; transition: var(--transition); border-left: 3px solid transparent; }
.sidebar-nav .nav-link:visited { color: #000; }
.sidebar-nav .nav-link:hover, .sidebar-nav .nav-link.active { background-color: var(--bs-gray-200); border-left-color: var(--red-dark); }
.sidebar-nav .nav-link.disabled { color: var(--bs-gray-500); background-color: transparent; cursor: default; }
.sidebar-nav .nav-link.disabled:hover { background-color: transparent; color: var(--bs-gray-500); }

.user-nav { border-left: dashed 1px var(--bs-gray-300); }
.user-nav ul { list-style: none; padding: 0; margin: 0; }
.user-nav ul li { margin: 0; }
.user-nav ul li a, .user-nav ul li a.visited, .user-nav .logout-btn { display: flex; align-items: center; gap: 0.5rem; padding: 0.25rem 1.5rem; color: #000; text-decoration: none; border-radius: 0; transition: var(--transition); border-left: 3px solid transparent; }
.user-nav .logout-btn { border: none; border-left: 3px solid transparent; background: none; width: 100%; text-align: left; cursor: pointer; }
.user-nav ul li a:hover, .user-nav .logout-btn:hover { background-color: var(--bs-gray-200); color: var(--red-dark); border-left-color: var(--red-dark); }


/* Main */
body > main { height: 100%; overflow-y: auto; }

/* Welcome Section */
.welcome-section { padding: 3rem 2rem; position: relative; overflow: hidden; }
.welcome-header { text-align: center; margin-bottom: 3rem; }
.welcome-title { font-size: 2.5rem; font-weight: 700; margin-bottom: 1rem; display: flex; align-items: center; justify-content: center; gap: 1rem; }
.welcome-title i { font-size: 2rem; }
.welcome-subtitle { font-size: 1.25rem; opacity: 0.9; margin: 0; }

/* Feature Cards */
.feature-card { padding: 2rem; text-align: center; transition: var(--transition); border: 1px solid var(--bs-gray-300); height: 100%; color: #000; }
.feature-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: #000; }
.feature-icon { width: 4rem; height: 4rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 1.5rem; font-size: 1.5rem; }
.feature-card h3 { font-size: 1.25rem; font-weight: 600; margin-bottom: 1rem; }
.feature-card p { line-height: 1.6; }

/* Getting Started Section */
.getting-started { padding: 3rem; margin-top: 1.5rem; border: 1px solid var(--bs-gray-300); }
.getting-started h2 { font-size: 2rem; font-weight: 600; margin-bottom: 2rem; text-align: center; }

.info-card { padding: 2rem; border: 1px solid var(--bs-gray-500); background-color: var(--bs-gray-100); height: 100%; }
.info-card h4 { font-size: 1.125rem; font-weight: 600; margin-bottom: 1.5rem; display: flex; align-items: center; gap: 0.5rem; }

/* Installation Tabs */
.nav-tabs { border-bottom: 1px solid var(--bs-gray-700); }
.nav-tabs .nav-item { margin-bottom: -2px; }
.nav-tabs .nav-link { border: none; border-bottom: 2px solid transparent; background: none; color: var(--bs-gray-500); padding: 0.75rem 1.5rem; transition: var(--transition); display: flex; align-items: center; gap: 0.5rem; }
.nav-tabs .nav-link:hover { color: var(--bs-gray-700); }
.nav-tabs .nav-link.active { border-bottom-color: var(--bs-gray-700); background: none; }

.tab-content { padding-top: 1rem; }
.tab-pane .text-muted { background: var(--bs-gray-200); padding: 0.75rem; border-left: 3px solid var(--bs-gray-400); }

.code-block { padding: 1.5rem; overflow-x: auto; text-align: left; }
.code-block pre { margin: 0; color: #e2e8f0; font-family: var(--font-monospace); font-size: 0.875rem; line-height: 1.6; white-space: pre-wrap; word-wrap: break-word; }
.code-block code { background: none; color: inherit; padding: 0; border: none; white-space: pre-wrap; word-wrap: break-word; display: block; font-family: var(--font-monospace); }

.requirement-list { list-style: none; padding: 0; margin: 0; }
.requirement-list li { display: flex; align-items: center; gap: 0.75rem; padding: 0.5rem 0; }
.requirement-list i { color: var(--bs-success); }

/* Mobile Responsiveness */
@media (max-width: 1024px) and (min-width: 769px) {    
    body > aside { padding: 1rem 0; }
}

@media (max-width: 768px) {
    .welcome-section { padding: 2rem 1rem; text-align: center; }
    .welcome-title { font-size: 2rem; flex-direction: column; gap: 0.5rem; }
    .getting-started { padding: 2rem 1rem; }
    .feature-card { padding: 1.5rem; }
}

/* Legacy responsive design support */
@media (max-width: 991px) {
    /* Overlay for mobile */
    .sidebar-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: 999; display: none; }
    .sidebar-overlay.show { display: block; }
}

@media (max-width: 576px) {
    .welcome-title { font-size: 1.75rem; }
    .welcome-subtitle { font-size: 1rem; }
    .feature-icon { width: 3rem; height: 3rem; font-size: 1.25rem; }
}

.btn {
    vertical-align: top;
    line-height: 1.2;
}