@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');

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

body {
    font-family: 'Pretendard', -apple-system, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: #222;
}

a { color: inherit; text-decoration: none; }
a:hover { color: #0066cc; }
img { max-width: 100%; height: auto; display: block; }

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

//* Header */
/* --- Çì´õ ½ºÅ¸ÀÏ (½ºÄÉÄ¡ ¹Ý¿µ) --- */
.header {
    background-color: #ffffff;
    border-bottom: 1px solid #ddd;
    padding: 15px 0;
}

.header-container {
    display: flex; /* ÁÂ¿ì ¹èÄ¡ */
    justify-content: space-between; /* ¾ç ³¡À¸·Î ¹Ð¾î³»±â */
    align-items: center; /* ¼öÁ÷ Áß¾Ó Á¤·Ä */
}

/* ÁÂÃø ºê·£µù ¿µ¿ª */
.branding {
    display: flex;
    flex-direction: column; /* À§¾Æ·¡ ¹èÄ¡ (·Î°í À§, Àλ縻 ¾Æ·¡) */
}

.logo a {
    font-size: 1.8rem;
    font-weight: bold;
    color: #333;
    text-decoration: none;
    letter-spacing: -1px;
}

.ai-greeting {
    font-size: 0.9rem;
    color: #666;
    margin-top: 5px;
    background-color: #f0f8ff; /* ¿¬ÇÑ ÆĶû ¹è°æ */
    padding: 4px 8px;
    border-radius: 4px;
    display: inline-block;
}

/* ¿ìÃø »ç¿ëÀÚ ÄÁÆ®·Ñ ¿µ¿ª */
.user-controls {
    display: flex;
    align-items: center;
    gap: 15px; /* ¹öÆ° »çÀÌ °£°Ý */
    font-size: 0.95rem;
}

.user-name {
    color: #333;
}

.btn-write {
    background-color: #333;
    color: #fff;
    padding: 8px 15px;
    border-radius: 20px;
    text-decoration: none;
    font-weight: bold;
    transition: background 0.3s;
}

.btn-write:hover {
    background-color: #555;
	color: #fff;
}

.btn-logout {
    color: #999;
    text-decoration: none;
    font-size: 0.9rem;
}

.btn-logout:hover {
    color: #ff4444;
    text-decoration: underline;
}

/* --- ǪÅÍ ½ºÅ¸ÀÏ (½ºÄÉÄ¡ ¹Ý¿µ) --- */
.footer {
    text-align: center;
    padding: 40px 0;
    margin-top: 50px;
    border-top: 1px solid #eee;
}

/* ºñ¹Ð ·Î±×ÀÎ ¸µÅ© ½ºÅ¸ÀÏ */
.copyright-link {
    color: #888;
    text-decoration: none;
    font-weight: bold;
    font-size: 1rem;
    
    /* ÇÙ½É: ¼Õ°¡¶ô ¸ð¾ç Ä¿¼­ */
    cursor: pointer; 
    transition: color 0.3s;
}

.copyright-link:hover {
    color: #fff; /* ¸¶¿ì½º ¿Ã¸®¸é ÁøÇÏ°Ô */
}











/* Navigation */
.main-nav { background: #000; }
.nav-menu { list-style: none; display: flex; flex-wrap: wrap; }
.nav-menu a {
    display: block;
    padding: 12px 20px;
    color: #fff;
    font-weight: 600;
    font-size: 14px;
    text-transform: uppercase;
}
.nav-menu a:hover, .nav-menu a.active { background: #333; }
.search-form { margin-left: auto; display: flex; padding: 8px 20px; }
.search-form input { padding: 8px; border: 1px solid #ddd; width: 200px; }
.search-form button { padding: 8px 15px; background: #0066cc; color: #fff; border: none; cursor: pointer; margin-left: 5px; }

/* Breaking News */
.breaking-news { background: #c00; color: #fff; padding: 15px 0; }
.breaking-label { background: #fff; color: #c00; padding: 5px 15px; font-weight: 900; margin-right: 20px; }
.breaking-title { font-size: 18px; font-weight: 700; }

/* Featured */
.featured-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 30px; margin: 30px 0; }
.featured-main { position: relative; }
.featured-main img { width: 100%; height: 450px; object-fit: cover; }
.featured-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.9), transparent);
    padding: 40px 30px;
    color: #fff;
}
.featured-title { font-size: 32px; font-weight: 900; line-height: 1.2; margin-bottom: 10px; }
.featured-subtitle { font-size: 18px; opacity: 0.9; margin-bottom: 15px; }
.featured-category { background: #0066cc; color: #fff; padding: 5px 12px; font-size: 12px; font-weight: 700; display: inline-block; margin-bottom: 10px; }

.side-article { border-bottom: 1px solid #e0e0e0; padding-bottom: 20px; margin-bottom: 20px; }
.side-article:last-child { border: none; margin-bottom: 0; }
.side-article img { width: 100%; height: 200px; object-fit: cover; margin-bottom: 15px; }
.side-article-title { font-size: 20px; font-weight: 700; margin-bottom: 8px; }

/* Section */
.section-header { border-bottom: 3px solid #000; margin-bottom: 30px; padding-bottom: 10px; }
.section-title { font-size: 28px; font-weight: 900; text-transform: uppercase; }

/* Articles */
.article-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin: 30px 0; }
.article-card { border-bottom: 1px solid #e0e0e0; padding-bottom: 20px; }
.article-card img { width: 100%; height: 220px; object-fit: cover; margin-bottom: 15px; }
.article-card-title { font-size: 20px; font-weight: 700; line-height: 1.3; margin: 10px 0; }
.article-card-category { color: #0066cc; font-size: 12px; font-weight: 700; margin-bottom: 8px; }
.article-card-excerpt { font-size: 14px; color: #666; margin-bottom: 10px; }
.article-card-meta { font-size: 12px; color: #999; }

/* Gallery */
.gallery-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin: 30px 0; }
.gallery-item { position: relative; overflow: hidden; cursor: pointer; }
.gallery-item img { width: 100%; height: 250px; object-fit: cover; transition: transform 0.3s; }
.gallery-item:hover img { transform: scale(1.1); }
.gallery-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
    padding: 40px 15px 15px;
    color: #fff;
}
.gallery-title { font-size: 16px; font-weight: 700; margin-bottom: 5px; }
.gallery-photographer { font-size: 12px; opacity: 0.8; }

/* Article Detail */
.article-detail { max-width: 800px; margin: 30px auto; }
.article-detail-category { color: #0066cc; font-size: 14px; font-weight: 700; text-transform: uppercase; margin-bottom: 15px; }
.article-detail-title { font-size: 42px; font-weight: 900; line-height: 1.2; margin-bottom: 15px; }
.article-detail-subtitle { font-size: 24px; color: #666; margin-bottom: 20px; }
.article-detail-meta { font-size: 14px; color: #999; padding-bottom: 20px; border-bottom: 1px solid #e0e0e0; margin-bottom: 30px; }
.article-detail-content { font-size: 18px; line-height: 1.8; }
.article-detail-content p { margin-bottom: 20px; }

/* Pagination */
.pagination { display: flex; justify-content: center; gap: 10px; margin: 40px 0; }
.pagination a, .pagination span { padding: 10px 15px; border: 1px solid #ddd; background: #fff; }
.pagination a:hover { background: #f5f5f5; }
.pagination .active { background: #000; color: #fff; border-color: #000; }

/* Footer */
.footer { background: #000; color: #fff; padding: 40px 0 20px; margin-top: 60px; }
.footer-content { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; margin-bottom: 30px; }
.footer-section h3 { font-size: 16px; margin-bottom: 15px; text-transform: uppercase; }
.footer-section ul { list-style: none; }
.footer-section li { margin-bottom: 10px; }
.footer-section a { color: #ccc; font-size: 14px; }
.footer-section a:hover { color: #fff; }
.footer-bottom { text-align: center; padding-top: 20px; border-top: 1px solid #333; font-size: 13px; color: #999; }

/* Utilities */
.text-center { text-align: center; }

/* Responsive */
@media (max-width: 992px) {
    .featured-grid { grid-template-columns: 1fr; }
    .article-grid { grid-template-columns: repeat(2, 1fr); }
    .gallery-grid { grid-template-columns: repeat(3, 1fr); }
    .footer-content { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    .site-logo { font-size: 28px; }
    .featured-title { font-size: 24px; }
    .article-grid, .gallery-grid { grid-template-columns: 1fr; }
    .footer-content { grid-template-columns: 1fr; }
    .article-detail-title { font-size: 32px; }
}