@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;700&display=swap');

:root {
    --bg-color: #1a1a1a;
    --text-color: #e0e0e0;
    --primary-color: #007acc;
    --secondary-color: #2a2d34;
    --border-color: #3a3d44;
    --hover-bg-color: #2c2c2c;
}

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

html,
body {
    font-family: 'Noto Sans KR', sans-serif;
    background-color: var(--bg-color);
    color: var(--text-color);
    line-height: 1.6;
}

.container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Header & Nav */
header {
    background-color: var(--secondary-color);
    padding: 1rem 0;
    border-bottom: 1px solid var(--border-color);
    position: sticky;
    top: 0;
    z-index: 1000;
}

header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

header h1 a {
    color: var(--text-color);
    text-decoration: none;
    font-size: 1.5rem;
}

.navbar {
    list-style: none;
    display: flex;
}

.nav-item>a {
    color: var(--text-color);
    text-decoration: none;
    padding: 1rem;
    display: block;
    transition: background-color 0.3s ease;
}

.nav-item>a:hover {
    background-color: var(--hover-bg-color);
    color: var(--primary-color);
}

/* Dropdown */
.has-dropdown {
    position: relative;
}

.dropdown {
    list-style: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: var(--secondary-color);
    border: 1px solid var(--border-color);
    border-top: none;
    min-width: 200px;
    display: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.has-dropdown:hover .dropdown {
    display: block;
    opacity: 1;
    visibility: visible;
}

.dropdown li a {
    color: var(--text-color);
    padding: 0.75rem 1rem;
    display: block;
    text-decoration: none;
    transition: background-color 0.3s ease;
}

.dropdown li a:hover {
    background-color: var(--primary-color);
    color: #fff;
}

/* Main Content */
main {
    padding: 2rem 0;
}

.intro h2 {
    font-size: 2.5rem;
    color: var(--primary-color);
    margin-bottom: 1rem;
}

.intro p {
    font-size: 1.1rem;
    margin-bottom: 1.5rem;
}

.page-title {
    font-size: 3rem;
    border-bottom: 2px solid var(--primary-color);
    padding-bottom: 0.5rem;
    margin-bottom: 2rem;
}

.content-placeholder {
    font-size: 1.2rem;
    color: #888;
    min-height: 50vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--secondary-color);
    border-radius: 8px;
}

/* Footer */
footer {
    text-align: center;
    padding: 2rem 0;
    margin-top: 2rem;
    background-color: var(--secondary-color);
    border-top: 1px solid var(--border-color);
}

/* --- New Landing Page Styles --- */

/* Hero Section */
.hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    height: 80vh;
    padding: 0 20px;
    background: linear-gradient(135deg, #0d1b2a, #1a2a3a, #2a3a4a, #007acc);
    background-size: 400% 400%;
    animation: gradientAnimation 15s ease infinite;
    margin-bottom: 4rem;
}

.hero h1 {
    font-size: 3.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: #fff;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.hero p {
    font-size: 1.4rem;
    max-width: 600px;
    color: var(--text-color);
}

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

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

/* Features Section */
.features-section {
    padding: 2rem 0;
}

.features-section h2 {
    text-align: center;
    font-size: 2.5rem;
    margin-bottom: 3rem;
    color: var(--primary-color);
}

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

.feature-card {
    background-color: var(--secondary-color);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 2rem;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    text-decoration: none;
    color: var(--text-color);
    opacity: 0;
    transform: translateY(20px);
    animation: fadeIn 0.5s ease forwards;
}

.feature-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 10px 20px rgba(0, 122, 204, 0.2);
}

.feature-card .icon {
    font-size: 3rem;
    margin-bottom: 1rem;
    color: var(--primary-color);
    height: 48px;
    width: 48px;
    display: inline-block;
}

.feature-card h3 {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}

.feature-card p {
    font-size: 1rem;
    line-height: 1.4;
}

/* Animation for cards on scroll */
@keyframes fadeIn {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Add delays for staggered animation */
.feature-card:nth-child(1) {
    animation-delay: 0.1s;
}

.feature-card:nth-child(2) {
    animation-delay: 0.2s;
}

.feature-card:nth-child(3) {
    animation-delay: 0.3s;
}

.feature-card:nth-child(4) {
    animation-delay: 0.4s;
}

/* --- Article View Styles (for pages like gemini.html) --- */
.article-layout {
    display: flex;
    gap: 2rem;
    padding-top: 2rem;
    height: calc(100vh - 100px);
    /* Adjust height to fit viewport */
    overflow: hidden;
    /* Prevent outer scroll */
}

.article-sidebar {
    flex: 0 0 280px;
    /* Fixed width sidebar */
    background-color: var(--secondary-color);
    border-radius: 8px;
    padding: 1.5rem;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    overflow-y: auto;
    /* Enable vertical scroll */
    height: 100%;
    /* Fill parent height */
}

/* Custom scrollbar for sidebar */
.article-sidebar::-webkit-scrollbar {
    width: 6px;
}

.article-sidebar::-webkit-scrollbar-thumb {
    background-color: var(--border-color);
    border-radius: 3px;
}

.article-sidebar::-webkit-scrollbar-track {
    background: transparent;
}

.article-sidebar h3 {
    color: var(--primary-color);
    font-size: 1.3rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 0.75rem;
}

.article-list {
    list-style: none;
}

.article-list li {
    margin-bottom: 0.75rem;
}

.article-list li a {
    display: block;
    color: var(--text-color);
    text-decoration: none;
    padding: 0.75rem 1rem;
    border-radius: 4px;
    transition: background-color 0.3s ease, color 0.3s ease;
    font-size: 0.95rem;
}

.article-list li a:hover {
    background-color: var(--hover-bg-color);
    color: var(--primary-color);
}

.article-list li a.active {
    background-color: var(--primary-color);
    color: #fff;
    font-weight: 700;
}

.article-content-area {
    flex-grow: 1;
    /* Takes remaining space */
    background-color: var(--secondary-color);
    border-radius: 8px;
    padding: 2.5rem;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    overflow-y: auto;
    /* Enable vertical scroll */
    height: 100%;
    /* Fill parent height */
}

/* Custom scrollbar for content area */
.article-content-area::-webkit-scrollbar {
    width: 8px;
}

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

.article-content-area::-webkit-scrollbar-track {
    background: transparent;
}

.article-content-area h2.article-title {
    font-size: 2.5rem;
    color: var(--primary-color);
    margin-bottom: 1.5rem;
    border-bottom: 2px solid var(--border-color);
    padding-bottom: 0.5rem;
}

.article-content-area h3 {
    font-size: 1.8rem;
    color: var(--primary-color);
    margin-top: 2.5rem;
    margin-bottom: 1rem;
}

.article-content-area p {
    margin-bottom: 1.2rem;
    line-height: 1.8;
}

.article-content-area ul {
    list-style: disc;
    margin-left: 2rem;
    margin-bottom: 1.2rem;
}

.article-content-area ul li {
    margin-bottom: 0.5rem;
}

.article-content-area pre {
    background-color: #0d1b2a;
    color: #f8f8f2;
    padding: 1rem;
    border-radius: 6px;
    overflow-x: auto;
    margin-bottom: 1.5rem;
    font-family: 'Consolas', 'Monaco', 'Andale Mono', 'Ubuntu Mono', monospace;
    font-size: 0.9rem;
}

.article-content-area code {
    background-color: #0d1b2a;
    color: #f8f8f2;
    padding: 0.2em 0.4em;
    border-radius: 3px;
    font-family: 'Consolas', 'Monaco', 'Andale Mono', 'Ubuntu Mono', monospace;
    font-size: 0.9rem;
}

.article-content-area hr {
    border: 0;
    height: 1px;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), var(--border-color), rgba(0, 0, 0, 0));
    margin: 3rem 0;
}

/* Responsive adjustments */
/* Responsive adjustments */
@media (max-width: 768px) {
    .article-layout {
        flex-direction: column;
        height: auto;
        /* Reset height on mobile */
        overflow: visible;
    }

    .article-sidebar {
        position: static;
        width: 100%;
        margin-bottom: 2rem;
        height: auto;
        /* Reset height */
        overflow-y: visible;
        flex: none;
        /* Disable flex basis */
    }

    .article-content-area {
        height: auto;
        overflow-y: visible;
    }

    /* Mobile Navigation */
    header .container {
        flex-wrap: wrap;
    }

    .hamburger {
        display: block;
        cursor: pointer;
        background: none;
        border: none;
        font-size: 1.8rem;
        color: var(--text-color);
        padding: 0.5rem;
    }

    .navbar {
        display: none;
        flex-direction: column;
        width: 100%;
        background-color: var(--secondary-color);
        border-top: 1px solid var(--border-color);
        margin-top: 1rem;
        animation: slideDown 0.3s ease forwards;
        max-height: 70vh;
        /* Limit height */
        overflow-y: auto;
        /* Add vertical scroll */
    }

    .navbar.active {
        display: flex;
    }

    .nav-item>a {
        padding: 1rem 0;
        border-bottom: 1px solid #333;
    }

    .dropdown {
        position: static;
        display: none;
        /* Hidden by default on mobile, can be toggled via JS or just kept hidden initially */
        visibility: visible;
        opacity: 1;
        width: 100%;
        border: none;
        padding-left: 20px;
        background-color: #222;
        /* Slightly darker for contrast */
    }

    /* Show dropdown on parent hover/click on mobile? 
           Better to just show them or make them togglable. 
           For simplicity in this vibe coding, let's make them visible when parent is hovered or always visible?
           Actually, hovering is bad on touch. Let's make them always visible for now or use JS to toggle.
           Let's rely on a simple 'active' class toggling or just CSS hover which sometimes works on tap.
           Alternatively, make them always expanded on mobile for easier access.
        */
    .nav-item.has-dropdown .dropdown {
        display: block;
        /* Always show submenus on mobile for ease of access */
    }

    .hero h1 {
        font-size: 2.5rem;
    }

    .hero p {
        font-size: 1.1rem;
    }

    .page-title {
        font-size: 2.5rem;
    }

    /* Table horizontal scroll */
    .table-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin-bottom: 1rem;
    }

    .comparison-table {
        min-width: 600px;
        /* Force scroll for wide tables */
    }
}

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

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

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

/* Comparison Table Style */
.comparison-table {
    width: 100%;
    border-collapse: collapse;
    margin: 2rem 0;
    font-size: 0.95rem;
}

.comparison-table th,
.comparison-table td {
    border: 1px solid var(--border-color);
    padding: 0.8rem 1rem;
    text-align: left;
}

.comparison-table thead th {
    background-color: #0d1b2a;
    color: var(--primary-color);
    font-size: 1rem;
    text-align: center;
}

.comparison-table tbody tr:nth-child(even) {
    background-color: var(--hover-bg-color);
}

.comparison-table td:first-child {
    font-weight: 700;
    color: var(--text-color);
}

/* --- New Article Category Styles --- */
.category-item {
    margin-bottom: 1.5rem;
}

.category-title {
    font-weight: 700;
    color: var(--text-color);
    font-size: 1.1rem;
    display: block;
    margin-bottom: 0.75rem;
    padding-left: 0.25rem;
    border-left: 3px solid var(--primary-color);
}

.nested-article-list {
    list-style: none;
    padding-left: 1rem;
    margin-top: 0.5rem;
}

.nested-article-list li {
    margin-bottom: 0.5rem;
}

.nested-article-list li a {
    font-size: 0.9rem;
    padding: 0.5rem 0.75rem;
}