/* New Modern Design - Color Palette */
:root {
    --color-primary: #2c3e50; /* Midnight Blue */
    --color-secondary: #3498db; /* Bright Blue */
    --color-accent: #1abc9c;    /* Mint */
    --color-background: #f8f9fa; /* Light Gray */
    --color-container: #ffffff;
    --color-text: #34495e; /* Wet Asphalt */
    --color-light-text: #7f8c8d; /* Grayish */
    --color-border: #e9ecef;
}

/* General Body Styles */
body { 
    margin: 0; 
    font-family: 'Inter', 'Nanum Gothic', sans-serif; 
    font-size: 16px; 
    background-color: var(--color-background); 
    color: var(--color-text);
    -webkit-text-size-adjust: none; 
}
.container { 
    max-width: 1100px; 
    margin: 0 auto; 
    padding: 20px;
}

/* Header & Logo */
.main-header { 
    background: var(--color-container);
    border-bottom: 1px solid var(--color-border);
    padding: 15px 0;
}
.top-nav { font-size: 13px; margin-bottom: 15px; text-align: right; }
.top-nav ul { list-style: none; padding: 0; margin: 0; }
.top-nav li { display: inline-block; margin-left: 20px; }
.top-nav a { color: var(--color-light-text); text-decoration: none; transition: color 0.2s; }
.top-nav a:hover { color: var(--color-secondary); }
.header-content { display: flex; justify-content: space-between; align-items: center; }
.logo img { max-height: 40px; }
.main-nav ul { list-style: none; padding: 0; margin: 0; }
.main-nav > ul > li { display: inline-block; margin-left: 30px; position: relative; }
.main-nav a { color: var(--color-primary); text-decoration: none; font-size: 1.1rem; font-weight: 700; transition: color 0.2s;}
.main-nav a:hover { color: var(--color-secondary); }

/* Dropdown Menu */
.submenu {
    display: none;
    position: absolute;
    top: 120%;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--color-container);
    min-width: 180px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    border-radius: 8px;
    list-style: none;
    padding: 8px 0;
    margin: 0;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, top 0.2s ease;
}
.main-nav > ul > li:hover > .submenu {
    display: block;
    opacity: 1;
    visibility: visible;
    top: 100%;
}
.submenu li { display: block; margin: 0; }
.submenu a {
    display: block;
    padding: 12px 20px;
    font-size: 1rem;
    font-weight: 400;
    white-space: nowrap;
    color: var(--color-text);
}
.submenu a:hover {
    background-color: var(--color-background);
    color: var(--color-secondary);
}

/* Main Content */
.intro-section { 
    padding: 25px 20px; /* Reduced vertical padding */
    text-align: center; 
    background-color: var(--color-container);
    border-radius: 12px;
    margin: 20px 0;
    border: 1px solid var(--color-border);
}
.intro-section h1 { font-size: 1.8rem; margin-bottom: 10px; color: var(--color-primary); }
.intro-section p { font-size: 1rem; line-height: 1.6; max-width: 800px; margin: 0 auto; color: var(--color-light-text); }
.intro-section p b { color: var(--color-secondary); }

/* Site Grid */
.site-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 25px; margin-bottom: 30px; }
.site-card { 
    background: var(--color-container);
    border: 1px solid var(--color-border);
    border-radius: 12px; 
    overflow: hidden; 
    text-decoration: none; 
    color: inherit; 
    display: flex; flex-direction: column; 
    transition: all 0.3s ease;
}
.site-card:hover { transform: translateY(-8px); box-shadow: 0 10px 20px rgba(44, 62, 80, 0.1); }
.card-header { 
    padding: 15px 20px; 
    font-weight: 700; 
    font-size: 1.3rem; 
    display: flex; 
    align-items: center; 
    gap: 12px;
    color: var(--color-primary);
    border-bottom: 1px solid var(--color-border);
}
.card-header .rank-badge { 
    background-color: var(--color-accent);
    color: white;
    width: 30px; height: 30px;
    border-radius: 50%;
    display: inline-flex; justify-content: center; align-items: center;
    font-size: 1rem;
    flex-shrink: 0;
}
.badge {
    font-size: 0.75rem;
    padding: 4px 10px;
    border-radius: 12px;
    font-weight: 700;
    text-transform: uppercase;
    margin-left: auto;
}
.badge-popular { background-color: #e74c3c; color: white; }
.badge-new { background-color: #3498db; color: white; }
.card-body { flex-grow: 1;}
.card-body img.site-preview { width: 100%; display: block; }
.card-info { padding: 20px; font-size: 1rem; line-height: 1.6; }
.card-info strong { color: var(--color-secondary); }
.card-footer { 
    background-color: var(--color-accent);
    padding: 15px 20px; 
    text-align: center; 
    font-weight: 700; 
    font-size: 1.1rem;
    color: white; 
    transition: background-color 0.2s;
}
.site-card:hover .card-footer { background-color: var(--color-secondary); }

/* Latest Posts */
.latest-posts-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 25px; margin-bottom: 30px; }
.latest-item h2, .latest-gallery h2 { font-size: 1.5rem; color: var(--color-primary); border-bottom: 2px solid var(--color-border); padding-bottom: 10px; margin-bottom: 15px;}
.latest-gallery { grid-column: 1 / -1; }

/* More Info Section (Accordion) */
.more-info { padding: 30px 0; }
.more-info h2 { text-align:center; font-size: 1.8rem; margin-bottom: 20px; color: var(--color-primary); }
.more-info details { background: var(--color-container); border: 1px solid var(--color-border); border-radius: 12px; margin-bottom: 10px; transition: background-color 0.2s; }
.more-info summary { padding: 20px; font-weight: 700; font-size: 1.2rem; cursor: pointer; position: relative; outline: none; list-style: none; transition: color 0.2s; }
.more-info summary:hover { color: var(--color-secondary); }
.more-info summary::-webkit-details-marker { display: none; }
.more-info summary::after { content: '+'; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); font-size: 1.6em; color: var(--color-secondary); }
.more-info details[open] summary::after { content: '−'; }
.more-info .details-content { padding: 0 20px 20px; line-height: 1.8; color: var(--color-light-text); border-top: 1px solid var(--color-border); margin-top: 10px; padding-top: 20px;}

/* Author Info Box */
.author-info {
    display: flex;
    align-items: center;
    gap: 20px;
}
.author-info .profile-image {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

/* Footer */
.main-footer { 
    background: var(--color-primary); 
    color: var(--color-background); 
    padding: 30px 0; text-align: center; 
    font-size: 0.9rem; 
}
.footer-nav a { color: var(--color-background); margin: 0 15px; text-decoration: none; transition: color 0.2s; }
.footer-nav a:hover { color: var(--color-accent); }
.copyright { margin-top: 15px; opacity: 0.7; }

/* Responsive */
@media (max-width: 768px) {
    .container {
        padding-left: 15px;
        padding-right: 15px;
    }
    .header-content, .latest-posts-grid { flex-direction: column; gap: 20px; text-align: center; }
    .author-info { flex-direction: column; text-align: center; }
    .intro-section h1 { font-size: 1.8rem; }
    .main-nav ul { padding-top: 15px; text-align: center;}
    .main-nav li { margin: 0 10px; }
    .latest-posts-grid { grid-template-columns: 1fr; }
}

@media (max-width: 500px) {
    .header-content {
        align-items: flex-start; /* Align logo to the left */
        gap: 15px;
    }
    .main-nav {
        width: 100%; /* Ensure nav can center its content */
    }
    .main-nav a {
        font-size: 0.85rem; /* Reduce font size for small mobile */
    }
    .main-nav > ul > li {
        margin: 0 5px; /* Reduce menu item spacing */
    }
    .intro-section {
        padding: 20px 15px;
        margin: 15px 0;
    }
    .intro-section h1 {
        font-size: 1.4rem;
        margin-bottom: 10px;
    }
    .intro-section p {
        font-size: 0.9rem;
        line-height: 1.5;
    }
}