/*
Theme Name: MEDIA164
Theme URI: https://media164.com
Author: MEDIA164
Description: MEDIA164 전용 뉴스 테마 - Digital · Culture · Travel
Version: 1.0
License: GNU General Public License v2 or later
Text Domain: media164
*/

/* ===== 기본 리셋 ===== */
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Noto Sans KR', sans-serif; background: #F5F5F5; color: #1A1A1A; font-size: 15px; line-height: 1.6; }
a { text-decoration: none; color: inherit; }
img { max-width: 100%; height: auto; }

/* ===== 헤더 ===== */
.site-header { background: #fff; border-bottom: 1px solid #E5E5E5; position: sticky; top: 0; z-index: 100; }
.header-top { display: flex; align-items: center; justify-content: space-between; padding: 12px 20px 10px; border-bottom: 1px solid #F0F0F0; max-width: 1200px; margin: 0 auto; }
.site-logo { display: flex; flex-direction: column; gap: 1px; }
.logo-media { font-size: 22px; font-weight: 300; letter-spacing: 0.06em; color: #1A1A1A; text-transform: uppercase; }
.logo-164 { font-size: 22px; font-weight: 800; letter-spacing: -0.5px; color: #C8420A; display: inline; }
.logo-tagline { font-size: 10px; color: #999; letter-spacing: 0.08em; margin-left: 10px; padding-left: 10px; border-left: 1px solid #E5E5E5; }
.header-right { display: flex; align-items: center; gap: 14px; }
.header-date { font-size: 12px; color: #999; }
.header-search { background: none; border: none; cursor: pointer; font-size: 18px; color: #666; }

/* ===== 네비게이션 ===== */
.site-nav { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.site-nav ul { display: flex; gap: 0; list-style: none; overflow-x: auto; }
.site-nav ul li a { display: block; font-size: 13px; font-weight: 500; padding: 10px 14px; color: #666; border-bottom: 2px solid transparent; white-space: nowrap; transition: color 0.15s, border-color 0.15s; }
.site-nav ul li a:hover,
.site-nav ul li.current-menu-item a { color: #C8420A; border-bottom-color: #C8420A; }

/* ===== 속보 바 ===== */
.breaking-bar-wrap { background: #C8420A; }
.breaking-bar { max-width: 1200px; margin: 0 auto; color: #FDF0EA; display: flex; align-items: center; gap: 10px; padding: 7px 20px; font-size: 12px; }
.breaking-label { background: white; color: #C8420A; font-weight: 700; font-size: 11px; padding: 2px 8px; border-radius: 3px; flex-shrink: 0; }

/* ===== 대표 이미지 플레이스홀더 ===== */
.hero-thumb-placeholder { width: 100%; height: 220px; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 8px; }
.hero-thumb-placeholder.ph-digital { background: linear-gradient(135deg, #BBDEFB 0%, #64B5F6 50%, #1976D2 100%); }
.hero-thumb-placeholder.ph-culture { background: linear-gradient(135deg, #E1BEE7 0%, #BA68C8 50%, #7B1FA2 100%); }
.hero-thumb-placeholder.ph-travel  { background: linear-gradient(135deg, #F5C4A8 0%, #E88A56 50%, #C8420A 100%); }
.hero-thumb-placeholder.ph-opinion { background: linear-gradient(135deg, #CFD8DC 0%, #90A4AE 50%, #455A64 100%); }
.hero-thumb-placeholder.ph-default { background: linear-gradient(135deg, #F5C4A8 0%, #E88A56 50%, #C8420A 100%); }
.hero-thumb-placeholder span { font-size: 52px; opacity: 0.3; }
.hero-thumb-placeholder p { font-size: 13px; color: rgba(255,255,255,0.6); font-weight: 500; }
.card-thumb-placeholder { width: 100%; height: 130px; display: flex; align-items: center; justify-content: center; font-size: 32px; opacity: 0.4; }
.card-thumb-placeholder.ph-digital { background: #E6F1FB; }
.card-thumb-placeholder.ph-culture { background: #F3EAFF; }
.card-thumb-placeholder.ph-travel  { background: #FDF0EA; }
.card-thumb-placeholder.ph-opinion { background: #F0F0F0; }

/* ===== 메인 레이아웃 ===== */
.site-main { max-width: 1200px; margin: 0 auto; padding: 20px; display: grid; grid-template-columns: 1fr 300px; gap: 20px; }
.content-area { min-width: 0; }
.sidebar { min-width: 0; }

/* ===== 섹션 타이틀 ===== */
.section-title { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; color: #999; text-transform: uppercase; margin-bottom: 12px; padding-bottom: 6px; border-bottom: 1px solid #E5E5E5; }

/* ===== 태그 ===== */
.post-tag { display: inline-block; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 3px; margin-bottom: 7px; }
.tag-digital { background: #E6F1FB; color: #185FA5; }
.tag-culture { background: #F3EAFF; color: #6B3FA0; }
.tag-travel  { background: #FDF0EA; color: #C8420A; }
.tag-opinion { background: #F0F0F0; color: #555; }

/* ===== 히어로 카드 (제목 위, 이미지 좌 + 본문 우) ===== */
.hero-card { background: #fff; border: 1px solid #E5E5E5; border-radius: 10px; overflow: hidden; margin-bottom: 16px; transition: border-color 0.15s; }
.hero-card:hover { border-color: #CCC; }
.hero-card a { display: block; padding: 18px 20px 20px; }
.hero-title-row { margin-bottom: 14px; }
.hero-title { font-size: 22px; font-weight: 700; line-height: 1.45; color: #1A1A1A; margin-top: 6px; }
.hero-content-row { display: flex; gap: 16px; align-items: flex-start; }
.hero-thumb { width: 44%; flex-shrink: 0; height: 190px; border-radius: 8px; overflow: hidden; background: #F0F0F0; display: flex; align-items: center; justify-content: center; }
.hero-thumb img { width: 100%; height: 100%; object-fit: cover; }
.hero-body { flex: 1; display: flex; flex-direction: column; min-height: 190px; }
.hero-excerpt { font-size: 14px; color: #555; line-height: 1.75; flex: 1; }
.post-meta { font-size: 11px; color: #999; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.meta-dot { opacity: 0.4; }

/* ===== 기사 카드 그리드 ===== */
.card-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }

/* 첫 번째 기사 — 제목 위, 이미지+본문 좌우 */
.news-card-featured { background: #fff; border: 1px solid #E5E5E5; border-radius: 10px; overflow: hidden; transition: border-color 0.15s; }
.news-card-featured:hover { border-color: #CCC; }
.news-card-featured a { display: block; padding: 16px 18px 18px; }
.featured-title-row { margin-bottom: 12px; }
.featured-title { font-size: 17px; font-weight: 700; line-height: 1.45; color: #1A1A1A; margin-top: 6px; }
.featured-body-row { display: flex; gap: 14px; align-items: flex-start; }
.featured-thumb { width: 42%; flex-shrink: 0; height: 160px; border-radius: 8px; overflow: hidden; background: #F0F0F0; display: flex; align-items: center; justify-content: center; }
.featured-thumb img { width: 100%; height: 100%; object-fit: cover; }
.featured-excerpt { flex: 1; font-size: 13px; color: #555; line-height: 1.7; }

/* 두 번째, 세 번째 기사 — 2열 그리드 */
.card-sub-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.news-card { background: #fff; border: 1px solid #E5E5E5; border-radius: 10px; overflow: hidden; transition: border-color 0.15s; display: flex; flex-direction: column; }
.news-card:hover { border-color: #CCC; }
.news-card a { display: flex; flex-direction: column; height: 100%; }
.card-body { flex: 1; padding: 12px 14px 14px; }
.card-title { font-size: 14px; font-weight: 600; line-height: 1.45; margin-bottom: 6px; color: #1A1A1A; }
.card-thumb { width: 100%; height: 130px; background: #F0F0F0; overflow: hidden; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.card-thumb img { width: 100%; height: 100%; object-fit: cover; }

/* ===== 오피니언 그리드 ===== */
.opinion-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 20px; }
.opinion-card { background: #fff; border: 1px solid #E5E5E5; border-radius: 10px; padding: 14px; transition: border-color 0.15s; }
.opinion-card:hover { border-color: #CCC; }
.opinion-author { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.author-avatar { width: 28px; height: 28px; border-radius: 50%; background: #FDF0EA; color: #C8420A; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; flex-shrink: 0; }
.author-name { font-size: 12px; font-weight: 500; color: #666; }
.opinion-title { font-size: 13px; font-weight: 500; line-height: 1.4; color: #1A1A1A; }

/* ===== 사이드바 ===== */
.sidebar-widget { background: #fff; border: 1px solid #E5E5E5; border-radius: 10px; padding: 14px; margin-bottom: 16px; }
.widget-title { font-size: 12px; font-weight: 600; color: #666; margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px solid #E5E5E5; }
.widget-item { display: flex; align-items: flex-start; gap: 8px; padding: 7px 0; border-bottom: 1px solid #F0F0F0; }
.widget-item:last-child { border-bottom: none; padding-bottom: 0; }
.widget-num { font-size: 11px; font-weight: 700; color: #C8420A; min-width: 16px; margin-top: 2px; }
.widget-text { font-size: 12px; line-height: 1.4; color: #1A1A1A; }

/* ===== 뉴스레터 배너 ===== */
.newsletter-banner { background: #fff; border: 1px solid #E5E5E5; border-radius: 10px; padding: 16px; display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.newsletter-text h4 { font-size: 14px; font-weight: 500; margin-bottom: 3px; }
.newsletter-text p { font-size: 12px; color: #666; }
.newsletter-btn { margin-left: auto; background: #C8420A; color: white; border: none; border-radius: 6px; padding: 8px 14px; font-size: 12px; font-weight: 500; cursor: pointer; white-space: nowrap; flex-shrink: 0; }

/* ===== 푸터 ===== */
.site-footer { background: #fff; border-top: 1px solid #E5E5E5; padding: 16px 20px; margin-top: 20px; }
.footer-inner { max-width: 1200px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
.footer-logo { font-size: 14px; font-weight: 700; color: #666; }
.footer-logo span { color: #C8420A; }
.footer-links { display: flex; gap: 14px; font-size: 11px; }
.footer-links a { color: #999; }
.footer-links a:hover { color: #666; }
.footer-copy { font-size: 11px; color: #999; width: 100%; text-align: center; margin-top: 6px; }

/* ===== 기사 상세 페이지 ===== */
.single-article { background: #fff; border: 1px solid #E5E5E5; border-radius: 10px; padding: 24px; }
.article-header { margin-bottom: 20px; }
.article-title { font-size: 24px; font-weight: 700; line-height: 1.4; margin-bottom: 12px; }
.article-content { font-size: 15px; line-height: 1.8; color: #333; }
.article-content p { margin-bottom: 16px; }
.article-content h2 { font-size: 18px; font-weight: 600; margin: 24px 0 12px; }

/* ===== 반응형 ===== */
@media (max-width: 768px) {
  .site-main { grid-template-columns: 1fr; }
  .sidebar { display: none; }
  .opinion-grid { grid-template-columns: 1fr; }
  .hero-content-row { flex-direction: column; }
  .hero-thumb { width: 100%; height: 200px; }
  .hero-body { min-height: auto; }
  .featured-body-row { flex-direction: column; }
  .featured-thumb { width: 100%; height: 180px; }
  .card-sub-grid { grid-template-columns: 1fr; }
  .hero-title { font-size: 18px; }
  .header-date { display: none; }
}