/* Global Font Import to prevent FOUC (moved from CSS import to here typically, but kept for simplicity if we can't edit HEAD of all HTMLs yet. Ideally this is in HTML head). */
/* Global Font Import moved to HTML head for performance */

:root {
    --primary: #2563EB;
    --primary-hover: #1D4ED8;
    --primary-bg: #EFF6FF;

    --text-main: #111827;
    --text-sub: #4B5563;
    --text-light: #9CA3AF;

    --border-color: #E5E7EB;
    --bg-page: #FFFFFF;
    --bg-surface: #F9FAFB;

    /* Layout */
    --header-height: 60px;
    --nav-width: 240px;
    --widget-width: 320px;
    --content-max-width: 1360px;

    --radius-md: 8px;
}

/* Reset tweaks */
body {
    font-family: "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background-color: var(--bg-page);
    color: var(--text-main);
    overflow-y: auto;
    /* Changed from scroll to auto */
    overflow-x: hidden;
    padding-top: var(--header-height);
    min-height: 100vh;
    width: 100%;
    position: relative;
}

/* Layout Grid */
.app-container {
    max-width: var(--content-max-width);
    margin: 0 auto;
    display: grid;
    grid-template-columns: var(--nav-width) 1fr var(--widget-width);
    gap: 32px;
    padding-top: 20px;
    /* Naturally follows header in grid */
    min-height: calc(100vh - var(--header-height));
    align-items: start;
    width: 100%;
}

/* Common Header */
.app-header {
    height: var(--header-height);
    border-bottom: 1px solid var(--border-color);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: #ffffff;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ... (Logo and Nav styles unchanged) ... */

/* Feed Item */
.feed-item {
    padding: 20px 0;
    border-bottom: 1px solid var(--border-color);
    cursor: pointer;
    transition: background 0.1s;
}

/* Interaction: Subtler hover */
.feed-item:hover {
    background: var(--bg-surface);
    /* Simple gray */
}

/* ... (Feed header/title/desc/footer/badge styles unchanged) ... */

/* Horizontal Scroll Section (Home) */
.h-scroll-section {
    display: flex;
    overflow-x: auto;
    gap: 16px;
    padding-bottom: 8px;
    margin-bottom: 8px;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
}

.h-scroll-section::-webkit-scrollbar {
    display: none;
}

.h-card {
    min-width: 260px;
    width: 260px;
    background: white;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 16px;
    flex-shrink: 0;
    transition: background 0.1s;
    /* Only background transition */
    cursor: pointer;
}

.h-card:hover {
    transform: none;
    /* Removed transform */
    box-shadow: none;
    /* Removed shadow */
    background: var(--bg-surface);
    /* Simple gray */
}

.header-inner {
    width: 100%;
    max-width: var(--content-max-width);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 16px;
    /* Standardized padding */
}

.logo-area {
    font-size: 22px;
    font-weight: 900;
    color: var(--primary);
    letter-spacing: -0.5px;
    line-height: 1;
    margin-left: 4px;
    /* Match the nav-item text alignment */
    /* If nav-item has 16px padding, the icon starts at 16px. 
       If we want the text to align, we need to consider the icon width (22px) + gap (12px) = 34px.
       Let's align it with the ICONS for now as it's cleaner.
    */
}

/* Navigation (Left Sidebar) */
.left-sidebar {
    position: sticky;
    top: calc(var(--header-height) + 20px);
    padding-left: 0;
    /* Removed padding to align with container edge */
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    margin-left: 4px;
    /* Align icons with margin if needed, but let's use 20px for logo now */
    font-size: 16px;
    font-weight: 500;
    color: var(--text-sub);
    border-radius: var(--radius-md);
    transition: background 0.15s, color 0.15s;
    text-decoration: none;
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    font-size: 16px;
    font-weight: 500;
    color: var(--text-sub);
    border-radius: var(--radius-md);
    transition: background 0.15s, color 0.15s;
    text-decoration: none;
}

.nav-item:hover {
    background-color: var(--bg-surface);
    color: var(--text-main);
}

.nav-item.active {
    font-weight: 700;
    color: var(--primary);
    background-color: var(--primary-bg);
}

.nav-item svg {
    width: 22px;
    height: 22px;
}

/* Main Feed (Center) */
.main-feed {
    padding-bottom: 100px;
    min-width: 0;
    /* Prevent flex/grid blowout */
}

/* Right Widgets */
.right-sidebar {
    position: sticky;
    top: calc(var(--header-height) + 30px);
    /* Align with fixed header */
    padding-right: 20px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Widget Style */
.widget {
    margin-bottom: 8px;
}

.widget-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.widget-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-main);
}

.widget-link {
    font-size: 12px;
    color: var(--text-light);
    cursor: pointer;
}

.widget-link:hover {
    text-decoration: underline;
}

/* Widget List Items */
.widget-item {
    display: flex;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid var(--bg-surface);
    cursor: pointer;
}

.widget-item:hover .widget-text {
    text-decoration: underline;
}

.widget-rank {
    font-size: 14px;
    font-weight: 700;
    color: var(--primary);
    width: 16px;
}

.widget-text {
    font-size: 14px;
    color: var(--text-sub);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.widget-meta {
    font-size: 12px;
    color: var(--text-light);
}

/* Feed Item (No Boxy Design) */
.feed-item {
    padding: 20px 0;
    /* Vertical spacing only */
    border-bottom: 1px solid var(--border-color);
    cursor: pointer;
    transition: background 0.1s;
}

/* Interaction: Subtler hover */
.feed-item:hover {
    background: var(--bg-surface);
    /* Simple gray */
}

/* ... (rest of feed item styles) ... */

.h-card {
    min-width: 260px;
    width: 260px;
    background: white;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 16px;
    flex-shrink: 0;
    transition: background 0.1s;
    /* Only background transition */
    cursor: pointer;
}

.h-card:hover {
    transform: none;
    /* Removed transform */
    box-shadow: none;
    /* Removed shadow */
    background: var(--bg-surface);
    /* Simple gray */
}

.h-card-title {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 8px;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Enhanced Search Bar (Explore) - Minimal Gray Line Style */
.search-container {
    position: relative;
    margin-bottom: 24px;
    max-width: 480px;
    /* Limit width */
}

.search-input {
    width: 100%;
    height: 44px;
    padding: 0 40px 0 0;
    border: none;
    border-bottom: 2px solid var(--border-color);
    border-radius: 0;
    background: transparent;
    font-size: 16px;
    box-shadow: none;
    transition: border-color 0.2s;
}

.search-input::placeholder {
    color: var(--text-light);
}

.search-input:focus {
    outline: none;
    border-color: var(--text-main);
    box-shadow: none;
}

.search-btn {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    border-radius: 0;
    background: transparent;
    color: var(--text-light);
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    cursor: pointer;
    transition: color 0.2s;
}

.search-btn:hover {
    background: transparent;
    color: var(--text-main);
}

/* Category Toggle (Home) */
.category-toggle {
    display: flex;
    gap: 16px;
    margin-bottom: 24px;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 0;
}

.toggle-btn {
    font-size: 24px;
    font-weight: 800;
    color: var(--text-light);
    background: none;
    border: none;
    padding-bottom: 12px;
    cursor: pointer;
    position: relative;
    transition: color 0.2s;
}

.toggle-btn.active {
    color: var(--text-main);
}

.toggle-btn.active::after {
    content: '';
    position: absolute;
    bottom: -1px;
    /* Overlap border */
    left: 0;
    width: 100%;
    height: 3px;
    background-color: var(--text-main);
}

/* Mobile Navigation */
.mobile-nav {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60px;
    background: rgba(255, 255, 255, 0.95);
    border-top: 1px solid var(--border-color);
    justify-content: space-around;
    align-items: center;
    z-index: 1000;
    padding-bottom: env(safe-area-inset-bottom);
}

.mobile-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: var(--text-light);
    font-size: 10px;
    gap: 2px;
    text-decoration: none;
}

.mobile-nav-item.active {
    color: var(--text-main);
}

.mobile-nav-item svg {
    width: 24px;
    height: 24px;
}

/* Responsive */
@media (max-width: 1200px) {
    .app-container {
        grid-template-columns: var(--nav-width) 1fr;
        padding: 20px 24px;
    }

    .right-sidebar {
        display: none;
    }
}

@media (max-width: 768px) {
    :root {
        --header-height: 56px;
    }

    .app-container {
        display: block;
        padding: 0 16px;
        width: 100%;
        overflow-x: hidden;
    }

    .left-sidebar {
        display: none;
    }

    .right-sidebar {
        display: none;
    }

    .app-header {
        position: fixed;
        display: flex;
        height: var(--header-height);
    }

    /* Full width for horizontal scroll on mobile */
    .h-scroll-section {
        margin: 0 -16px;
        padding: 0 16px 16px;
    }

    /* Better grid for create page */
    .option-grid {
        grid-template-columns: 1fr;
    }

    .toggle-btn {
        font-size: 20px;
    }

    h1 {
        font-size: 24px !important;
    }

    h2 {
        font-size: 18px !important;
    }

    /* Ensure content isn't covered by bottom nav */
    .main-feed {
        padding-bottom: 80px;
        width: 100%;
        overflow-x: hidden;
    }

    .mobile-nav {
        display: flex;
    }
}