@charset "UTF-8";
/**
 * ============================================================
 *  PEDIEN NEWS - Design F (v2)
 *  Production CSS for Korean News Portal
 *  Max-width: 1280px | Accent: #e63946 | Dark: #1a1a2e
 * ============================================================
 *
 *  Table of Contents
 *  -----------------
 *   1. Reset + CSS Custom Properties + Typography
 *   2. Layout
 *   3. Top Bar + Sticky Header + Logo
 *   4. Navigation
 *   5. Breaking News Ticker
 *   6. Hero Section
 *   7. Section Titles
 *   8. Article Grid (4-col cards)
 *   9. Article List Items
 *  10. Category Page
 *  11. Article Detail
 *  12. Sidebar
 *  13. Newsletter Section
 *  14. Footer
 *  15. Mobile Hamburger Menu
 *  16. Dark Mode Overrides
 *  17. Responsive
 *  18. Print Styles
 *  19. Utility Classes
 *  20. CMS-Specific
 *  21. Photo / Video Section
 *  22. Search Page
 *  23. Animations & Extras
 */


/* ==========================================================
   1. RESET + CSS CUSTOM PROPERTIES + TYPOGRAPHY
   ========================================================== */

:root {
  /* -- Colors -- */
  --color-accent: #e63946;
  --color-accent-hover: #cf2d39;
  --color-accent-light: #fce4e6;
  --color-primary-dark: #1a1a2e;
  --color-secondary: #16213e;
  --color-tertiary: #0f3460;

  /* -- Neutral palette -- */
  --color-white: #ffffff;
  --color-gray-50: #f9fafb;
  --color-gray-100: #f3f4f6;
  --color-gray-200: #e5e7eb;
  --color-gray-300: #d1d5db;
  --color-gray-400: #9ca3af;
  --color-gray-500: #6b7280;
  --color-gray-600: #4b5563;
  --color-gray-700: #374151;
  --color-gray-800: #1f2937;
  --color-gray-900: #111827;

  /* -- Semantic -- */
  --color-bg: var(--color-white);
  --color-bg-alt: var(--color-gray-50);
  --color-bg-card: var(--color-white);
  --color-bg-header: var(--color-white);
  --color-bg-footer: var(--color-primary-dark);
  --color-bg-overlay: rgba(0, 0, 0, 0.55);
  --color-text: var(--color-gray-900);
  --color-text-secondary: var(--color-gray-600);
  --color-text-muted: var(--color-gray-400);
  --color-text-inverse: var(--color-white);
  --color-border: var(--color-gray-200);
  --color-border-strong: var(--color-gray-300);
  --color-link: var(--color-primary-dark);
  --color-link-hover: var(--color-accent);
  --color-shadow: rgba(0, 0, 0, 0.08);
  --color-shadow-strong: rgba(0, 0, 0, 0.15);

  /* -- Typography -- */
  --font-body: 'Noto Sans KR', -apple-system, BlinkMacSystemFont,
    'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-heading: 'Apple SD Gothic Neo', 'Malgun Gothic', '맑은 고딕', 'Noto Sans KR', Dotum, 돋움, sans-serif;
  --font-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;

  --text-xs: 0.75rem;     /* 12px */
  --text-sm: 0.8125rem;   /* 13px */
  --text-base: 0.9375rem; /* 15px */
  --text-md: 1rem;        /* 16px */
  --text-lg: 1.125rem;    /* 18px */
  --text-xl: 1.25rem;     /* 20px */
  --text-2xl: 1.5rem;     /* 24px */
  --text-3xl: 1.875rem;   /* 30px */
  --text-4xl: 2.25rem;    /* 36px */

  --leading-tight: 1.3;
  --leading-normal: 1.6;
  --leading-relaxed: 1.8;

  /* -- Spacing -- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;

  /* -- Layout -- */
  --max-width: 1280px;
  --sidebar-width: 340px;
  --header-height: 60px;
  --topbar-height: 36px;
  --nav-height: 48px;

  /* -- Radius -- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;

  /* -- Shadows -- */
  --shadow-sm: 0 1px 2px var(--color-shadow);
  --shadow-md: 0 4px 12px var(--color-shadow);
  --shadow-lg: 0 8px 24px var(--color-shadow-strong);
  --shadow-card: 0 2px 8px var(--color-shadow);

  /* -- Transitions -- */
  --transition-fast: 150ms ease;
  --transition-normal: 250ms ease;
  --transition-slow: 400ms ease;

  /* -- Z-index -- */
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-fixed: 300;
  --z-overlay: 400;
  --z-modal: 500;
  --z-toast: 600;
}

/* -- Dark Mode Variables -- */
[data-theme="dark"] {
  --color-bg: #121212;
  --color-bg-alt: #1e1e1e;
  --color-bg-card: #1e1e1e;
  --color-bg-header: #181828;
  --color-bg-footer: #0d0d1a;
  --color-bg-overlay: rgba(0, 0, 0, 0.75);
  --color-text: #e4e4e7;
  --color-text-secondary: #a1a1aa;
  --color-text-muted: #71717a;
  --color-text-inverse: var(--color-gray-900);
  --color-border: #2e2e2e;
  --color-border-strong: #3f3f3f;
  --color-link: #94a8d0;
  --color-link-hover: #f87171;
  --color-shadow: rgba(0, 0, 0, 0.3);
  --color-shadow-strong: rgba(0, 0, 0, 0.5);
  --color-accent-light: #3b1a1d;
  --color-gray-50: #1a1a1a;
  --color-gray-100: #222222;
  --color-gray-200: #333333;
}

/* -- Reset -- */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
}

body {
  font-family: 'Noto Sans KR', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif !important;
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-text);
  background: var(--color-bg);
  min-height: 100vh;
  word-break: keep-all;
  overflow-wrap: break-word;
  margin: 0;
  padding: 0;
}

* { box-sizing: border-box; }

a {
  color: var(--color-link);
  text-decoration: none;
  transition: color var(--transition-fast);
}
a:hover { color: var(--color-link-hover); }

img {
  max-width: 100%;
  height: auto;
  display: block;
  border: 0;
}

ul, ol { list-style: none; }

button, input, select, textarea {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  border: none;
  outline: none;
  background: none;
}

button { cursor: pointer; }

table {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: var(--leading-tight);
  color: var(--color-text);
}

h1 { font-size: var(--text-4xl); }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-2xl); }
h4 { font-size: var(--text-xl); }
h5 { font-size: var(--text-lg); }
h6 { font-size: var(--text-md); }

p { margin-bottom: var(--space-4); }
p:last-child { margin-bottom: 0; }


/* ==========================================================
   2. LAYOUT
   ========================================================== */

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-6);
  width: 100%;
}

.content-layout {
  display: grid;
  grid-template-columns: 1fr var(--sidebar-width);
  gap: var(--space-8);
  margin-top: var(--space-8);
  margin-bottom: var(--space-12);
}

.content-main {
  min-width: 0;
}

.content-sidebar {
  min-width: 0;
}

.full-width {
  grid-column: 1 / -1;
}

.section {
  margin-bottom: var(--space-10);
}

.section:last-child {
  margin-bottom: 0;
}

.section-divider {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: var(--space-8) 0;
}


/* ==========================================================
   3. TOP BAR + STICKY HEADER + LOGO
   ========================================================== */

/* -- Top Bar -- */
.topbar {
  background: var(--color-primary-dark);
  color: var(--color-text-inverse);
  font-size: var(--text-xs);
  height: var(--topbar-height);
  display: flex;
  align-items: center;
}

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

.topbar-left {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.topbar-date {
  opacity: 0.85;
}

.topbar-weather {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.topbar-right {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.topbar-right a {
  color: rgba(255, 255, 255, 0.75);
  font-size: var(--text-xs);
  transition: color var(--transition-fast);
}
.topbar-right a:hover { color: #fff; }

.topbar-divider {
  width: 1px;
  height: 12px;
  background: rgba(255, 255, 255, 0.2);
}

/* -- Theme Toggle -- */
.theme-toggle {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  color: rgba(255, 255, 255, 0.75);
  font-size: var(--text-xs);
  cursor: pointer;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  transition: background var(--transition-fast);
}
.theme-toggle:hover { background: rgba(255, 255, 255, 0.1); }

/* -- Header -- */
.site-header {
  background: var(--color-bg-header);
  border-bottom: 1px solid var(--color-border);
  position: relative;
  z-index: var(--z-sticky);
}

.site-header.is-sticky {
  position: sticky;
  top: 0;
  box-shadow: var(--shadow-md);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-height);
}

/* -- Logo -- */
.site-logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.site-logo a {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--color-text);
}
.site-logo a:hover { color: var(--color-text); }

.site-logo img {
  height: 36px;
  width: auto;
}

.site-logo .logo-text {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: 900;
  letter-spacing: -0.02em;
}

.site-logo .logo-text .accent {
  color: var(--color-accent);
}

/* -- Header Actions -- */
.header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

/* -- Header Search -- */
.header-search {
  position: relative;
  width: 220px;
}

.header-search input {
  width: 100%;
  height: 36px;
  padding: 0 var(--space-10) 0 var(--space-4);
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.header-search input:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-light);
}

.header-search button {
  position: absolute;
  right: var(--space-3);
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-text-muted);
}
.header-search button:hover { color: var(--color-accent); }

/* -- Hamburger Button (mobile) -- */
.hamburger-btn {
  display: none;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  transition: background var(--transition-fast);
}
.hamburger-btn:hover { background: var(--color-bg-alt); }

.hamburger-icon {
  width: 22px;
  height: 2px;
  background: var(--color-text);
  position: relative;
  transition: background var(--transition-fast);
}
.hamburger-icon::before,
.hamburger-icon::after {
  content: '';
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--color-text);
  transition: transform var(--transition-normal);
}
.hamburger-icon::before { top: -7px; }
.hamburger-icon::after { top: 7px; }

.hamburger-btn.is-open .hamburger-icon { background: transparent; }
.hamburger-btn.is-open .hamburger-icon::before {
  top: 0;
  transform: rotate(45deg);
}
.hamburger-btn.is-open .hamburger-icon::after {
  top: 0;
  transform: rotate(-45deg);
}


/* ==========================================================
   4. NAVIGATION
   ========================================================== */

.main-nav {
  background: var(--color-bg-header);
  border-bottom: 1px solid var(--color-border);
  height: var(--nav-height);
  position: relative;
  z-index: calc(var(--z-sticky) - 1);
}

.main-nav.is-sticky {
  position: sticky;
  top: var(--header-height);
  box-shadow: 0 2px 4px var(--color-shadow);
}

.nav-list {
  display: flex;
  align-items: stretch;
  height: 100%;
  gap: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.nav-list::-webkit-scrollbar { display: none; }

.nav-item {
  flex-shrink: 0;
}

.nav-item a {
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 var(--space-5);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text-secondary);
  position: relative;
  white-space: nowrap;
  transition: color var(--transition-fast);
}

.nav-item a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: var(--space-5);
  right: var(--space-5);
  height: 3px;
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--transition-normal);
  border-radius: 3px 3px 0 0;
}

.nav-item a:hover {
  color: var(--color-text);
}
.nav-item a:hover::after {
  transform: scaleX(1);
}

.nav-item.active a {
  color: var(--color-accent);
  font-weight: 700;
}
.nav-item.active a::after {
  transform: scaleX(1);
}

/* Sub-navigation dropdown */
.nav-item .sub-nav {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 180px;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: var(--space-2) 0;
  z-index: var(--z-dropdown);
}

.nav-item:hover .sub-nav { display: block; }

.sub-nav a {
  display: block;
  padding: var(--space-2) var(--space-5);
  font-size: var(--text-sm);
  height: auto;
}
.sub-nav a::after { display: none; }
.sub-nav a:hover {
  background: var(--color-bg-alt);
  color: var(--color-accent);
}


/* ==========================================================
   5. BREAKING NEWS TICKER
   ========================================================== */

.breaking-news {
  background: var(--color-accent-light);
  border-bottom: 1px solid rgba(230, 57, 70, 0.15);
  height: 40px;
  display: flex;
  align-items: center;
  overflow: hidden;
}

[data-theme="dark"] .breaking-news {
  background: rgba(230, 57, 70, 0.1);
  border-bottom-color: rgba(230, 57, 70, 0.2);
}

.breaking-label {
  flex-shrink: 0;
  background: var(--color-accent);
  color: #fff;
  font-size: var(--text-xs);
  font-weight: 700;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-sm);
  margin-right: var(--space-4);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  animation: pulse-label 2s ease-in-out infinite;
}

@keyframes pulse-label {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

.breaking-list {
  flex: 1;
  overflow: hidden;
  position: relative;
  height: 100%;
}

.breaking-item {
  display: flex;
  align-items: center;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
  transition: opacity var(--transition-slow);
}

.breaking-item.is-active {
  opacity: 1;
}

.breaking-item a {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.breaking-item a:hover { color: var(--color-accent); }

.breaking-nav {
  flex-shrink: 0;
  display: flex;
  gap: var(--space-1);
  margin-left: var(--space-3);
}

.breaking-nav button {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  transition: all var(--transition-fast);
}
.breaking-nav button:hover {
  background: var(--color-accent);
  color: #fff;
}


/* ==========================================================
   6. HERO SECTION
   ========================================================== */

.hero-section {
  margin-top: var(--space-6);
  margin-bottom: var(--space-8);
}

.hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  min-height: 440px;
}

/* Main hero article */
.hero-main {
  display: block;
  text-decoration: none;
  color: #fff;
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  grid-row: span 2;
}

.hero-main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}
.hero-main:hover img {
  transform: scale(1.03);
}

.hero-main .hero-overlay,
.hero-main .overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--space-8) var(--space-6);
  background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.4) 60%, transparent 100%);
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.hero-main .overlay .cat {
  color: var(--color-accent);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  margin-bottom: 8px;
}

.hero-main .overlay h1 {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: 700;
  line-height: 1.35;
  color: #fff;
  margin-bottom: 8px;
}

.hero-main .overlay .meta {
  color: rgba(255,255,255,0.6);
  font-size: 12px;
}

.hero-main .hero-category {
  display: inline-block;
  background: var(--color-accent);
  color: #fff;
  font-size: var(--text-xs);
  font-weight: 700;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-3);
}

.hero-main .hero-title {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: 700;
  line-height: var(--leading-tight);
  color: #fff;
  margin-bottom: var(--space-2);
}

.hero-main .hero-excerpt {
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.8);
  line-height: var(--leading-normal);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.hero-main .hero-meta {
  margin-top: var(--space-3);
  font-size: var(--text-xs);
  color: rgba(255, 255, 255, 0.6);
}

/* Side hero cards */
.hero-side {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.hero-side-item {
  display: flex;
  text-decoration: none;
  color: var(--color-text);
  gap: var(--space-3);
  padding: var(--space-3);
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: transform 0.2s, box-shadow 0.2s;
  flex: 1;
}
.hero-side-item:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}
.hero-side-item img {
  width: 120px;
  height: 80px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}
.hero-side-item .info { display: flex; flex-direction: column; justify-content: center; }
.hero-side-item .info h3 {
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.hero-side-item .meta {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-top: 4px;
}

.opinion-card {
  display: flex;
  text-decoration: none;
  color: var(--color-text);
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border);
}
.opinion-card:last-child { border-bottom: none; }
.opinion-card .avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, #667eea, #764ba2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: 16px;
  flex-shrink: 0;
}
.opinion-card .info h5 { font-size: var(--text-sm); font-weight: 600; line-height: 1.4; }
.opinion-card .info .author { font-size: var(--text-xs); color: var(--color-text-muted); }

.hero-card {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  flex: 1;
}

.hero-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}
.hero-card:hover img {
  transform: scale(1.03);
}

.hero-card .hero-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--space-4);
  background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, transparent 100%);
}

.hero-card .hero-category {
  display: inline-block;
  background: var(--color-accent);
  color: #fff;
  font-size: 0.6875rem;
  font-weight: 700;
  padding: 2px var(--space-2);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-2);
}

.hero-card .hero-title {
  font-family: var(--font-heading);
  font-size: var(--text-md);
  font-weight: 600;
  color: #fff;
  line-height: var(--leading-tight);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}


/* ==========================================================
   7. SECTION TITLES
   ========================================================== */

.section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border);
}

.section-title h2,
.section-title h3 {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: 700;
  padding-left: var(--space-3);
  border-left: 4px solid var(--color-accent);
  line-height: 1;
}

.section-title .more-link {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  gap: var(--space-1);
}
.section-title .more-link:hover { color: var(--color-accent); }

/* Alt: full red top border */
.section-title--bar {
  border-bottom: none;
  border-top: 3px solid var(--color-accent);
  padding-top: var(--space-3);
  padding-bottom: 0;
}
.section-title--bar h2,
.section-title--bar h3 {
  border-left: none;
  padding-left: 0;
}


/* ==========================================================
   8. ARTICLE GRID (4-column cards with hover lift)
   ========================================================== */

.article-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-5);
}

.article-grid--3col { grid-template-columns: repeat(3, 1fr); }
.article-grid--2col { grid-template-columns: repeat(2, 1fr); }

.article-card {
  display: block;
  text-decoration: none;
  color: var(--color-text);
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

.article-card > img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  display: block;
}
.article-card .body {
  padding: 16px;
}
.article-card .body h3 {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.45;
  margin-bottom: 8px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.article-card .body p {
  font-size: 13px;
  color: var(--color-text-secondary);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 8px;
}
.article-card .body .meta {
  font-size: 11px;
  color: var(--color-text-muted);
}
.article-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.article-card .card-image {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 10;
}

.article-card .card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}
.article-card:hover .card-image img {
  transform: scale(1.05);
}

.article-card .card-image .card-badge {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  background: var(--color-accent);
  color: #fff;
  font-size: 0.6875rem;
  font-weight: 700;
  padding: 2px var(--space-2);
  border-radius: var(--radius-sm);
}

.article-card .card-body {
  padding: var(--space-4);
}

.article-card .card-category {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-accent);
  margin-bottom: var(--space-2);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.article-card .card-title {
  font-family: var(--font-heading);
  font-size: var(--text-md);
  font-weight: 600;
  line-height: var(--leading-tight);
  margin-bottom: var(--space-2);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.article-card .card-title a {
  color: var(--color-text);
}
.article-card .card-title a:hover {
  color: var(--color-accent);
}

.article-card .card-excerpt {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: var(--leading-normal);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: var(--space-3);
}

.article-card .card-meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.article-card .card-meta .meta-author { font-weight: 500; }
.article-card .card-meta .meta-dot {
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: var(--color-text-muted);
}


/* ==========================================================
   9. ARTICLE LIST ITEMS (image + text row)
   ========================================================== */

.article-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.article-list-item {
  display: flex;
  text-decoration: none;
  color: var(--color-text);
  gap: var(--space-4);
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--color-border);
  transition: background 0.2s;
}
.article-list-item:hover {
  background: var(--color-bg-alt);
  margin: 0 -10px;
  padding-left: 10px;
  padding-right: 10px;
  border-radius: 8px;
}
.article-list-item > img {
  width: 200px;
  height: 130px;
  object-fit: cover;
  border-radius: 8px;
  flex-shrink: 0;
}
.article-list-item .info { flex: 1; }
.article-list-item .info h3 {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.4;
  margin-bottom: 6px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.article-list-item .info p {
  font-size: 13px;
  color: var(--color-text-secondary);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 8px;
}
.article-list-item .info .meta {
  font-size: 11px;
  color: var(--color-text-muted);
}
.article-list-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.article-list-item .list-image {
  flex-shrink: 0;
  width: 200px;
  aspect-ratio: 16 / 10;
  border-radius: var(--radius-md);
  overflow: hidden;
}

.article-list-item .list-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}
.article-list-item:hover .list-image img {
  transform: scale(1.05);
}

.article-list-item .list-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.article-list-item .list-category {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-accent);
  margin-bottom: var(--space-1);
}

.article-list-item .list-title {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: 600;
  line-height: var(--leading-tight);
  margin-bottom: var(--space-2);
}

.article-list-item .list-title a {
  color: var(--color-text);
}
.article-list-item .list-title a:hover {
  color: var(--color-accent);
}

.article-list-item .list-excerpt {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: var(--leading-normal);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: var(--space-2);
}

.article-list-item .list-meta {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* Compact list (sidebar variant) */
.article-list--compact .article-list-item {
  gap: var(--space-3);
  padding-bottom: var(--space-3);
}

.article-list--compact .list-image {
  width: 100px;
  aspect-ratio: 1;
  border-radius: var(--radius-sm);
}

.article-list--compact .list-title {
  font-size: var(--text-sm);
  font-family: var(--font-body);
}

.article-list--compact .list-excerpt { display: none; }


/* ==========================================================
   10. CATEGORY PAGE
   ========================================================== */

/* Category hero banner */
.category-hero {
  background: var(--color-primary-dark);
  padding: var(--space-10) 0;
  margin-bottom: var(--space-8);
  text-align: center;
}

.category-hero h1 {
  color: #fff;
  font-size: var(--text-3xl);
  margin-bottom: var(--space-2);
}

.category-hero .category-desc {
  color: rgba(255, 255, 255, 0.7);
  font-size: var(--text-md);
}

.category-hero .breadcrumb {
  margin-bottom: var(--space-4);
}

/* Category tabs */
.category-tabs {
  display: flex;
  gap: var(--space-1);
  border-bottom: 2px solid var(--color-border);
  margin-bottom: var(--space-6);
  overflow-x: auto;
  scrollbar-width: none;
}
.category-tabs::-webkit-scrollbar { display: none; }

.category-tab {
  flex-shrink: 0;
  padding: var(--space-3) var(--space-5);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text-secondary);
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: all var(--transition-fast);
  white-space: nowrap;
  cursor: pointer;
}

.category-tab:hover {
  color: var(--color-text);
}

.category-tab.active {
  color: var(--color-accent);
  border-bottom-color: var(--color-accent);
  font-weight: 700;
}

/* Featured article in category */
.category-featured {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
  margin-bottom: var(--space-8);
  padding-bottom: var(--space-8);
  border-bottom: 1px solid var(--color-border);
}

.category-featured .featured-image {
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 16 / 10;
}

.category-featured .featured-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.category-featured .featured-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.category-featured .featured-title {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: 700;
  margin-bottom: var(--space-4);
  line-height: var(--leading-tight);
}

.category-featured .featured-excerpt {
  font-size: var(--text-base);
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-4);
}

/* Pagination */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  margin: var(--space-10) 0;
}

.pagination a,
.pagination span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 var(--space-2);
  font-size: var(--text-sm);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text-secondary);
  transition: all var(--transition-fast);
}

.pagination a:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
  background: var(--color-accent-light);
}

.pagination .active {
  background: var(--color-accent);
  color: #fff;
  border-color: var(--color-accent);
  font-weight: 700;
}

.pagination .disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

.pagination .prev,
.pagination .next {
  font-weight: 600;
}


/* ==========================================================
   11. ARTICLE DETAIL
   ========================================================== */

/* Breadcrumb */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-bottom: var(--space-5);
  flex-wrap: wrap;
}

.breadcrumb a {
  color: var(--color-text-muted);
}
.breadcrumb a:hover { color: var(--color-accent); }

.breadcrumb .separator {
  color: var(--color-text-muted);
  font-size: 0.625rem;
}

.breadcrumb .current {
  color: var(--color-text-secondary);
  font-weight: 500;
}

/* Article header */
.article-header {
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--color-border);
}

.article-header .article-category {
  display: inline-block;
  background: var(--color-accent);
  color: #fff;
  font-size: var(--text-xs);
  font-weight: 700;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-4);
}

.article-header .article-title {
  font-family: var(--font-heading);
  font-size: var(--text-3xl);
  font-weight: 700;
  line-height: var(--leading-tight);
  margin-bottom: var(--space-4);
  word-break: keep-all;
}

.article-header .article-subtitle {
  font-size: var(--text-lg);
  color: var(--color-text-secondary);
  line-height: var(--leading-normal);
  margin-bottom: var(--space-4);
}

.article-meta-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.article-meta-info {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}

.article-meta-info .author {
  font-weight: 600;
  color: var(--color-text);
}

.article-meta-info .date,
.article-meta-info .views {
  color: var(--color-text-muted);
}

/* Share buttons */
.share-buttons {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.share-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border);
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
  transition: all var(--transition-fast);
}

.share-btn:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
  background: var(--color-accent-light);
}

.share-btn.kakao:hover   { background: #fee500; border-color: #fee500; color: #381e1f; }
.share-btn.facebook:hover { background: #1877f2; border-color: #1877f2; color: #fff; }
.share-btn.twitter:hover  { background: #1da1f2; border-color: #1da1f2; color: #fff; }
.share-btn.url:hover      { background: var(--color-gray-700); border-color: var(--color-gray-700); color: #fff; }

/* Font size controls */
.font-controls {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
}

.font-controls span {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.font-btn {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-text-secondary);
  transition: all var(--transition-fast);
}
.font-btn:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}
.font-btn.active {
  background: var(--color-accent);
  color: #fff;
  border-color: var(--color-accent);
}

/* Article body */
.article-body {
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: var(--color-text);
  margin-bottom: var(--space-8);
}

.article-body.font-sm { font-size: var(--text-sm); }
.article-body.font-md { font-size: var(--text-md); }
.article-body.font-lg { font-size: var(--text-lg); }
.article-body.font-xl { font-size: var(--text-xl); }

.article-body p {
  margin-bottom: var(--space-5);
}

.article-body img {
  margin: var(--space-6) auto;
  border-radius: var(--radius-md);
  max-width: 100%;
}

.article-body figure {
  margin: var(--space-6) 0;
}

.article-body figcaption {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  text-align: center;
  margin-top: var(--space-2);
  padding: var(--space-2) var(--space-4);
}

.article-body blockquote {
  border-left: 4px solid var(--color-accent);
  padding: var(--space-4) var(--space-6);
  margin: var(--space-6) 0;
  background: var(--color-bg-alt);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  font-style: italic;
  color: var(--color-text-secondary);
}

.article-body h2 {
  font-size: var(--text-2xl);
  margin: var(--space-8) 0 var(--space-4);
}

.article-body h3 {
  font-size: var(--text-xl);
  margin: var(--space-6) 0 var(--space-3);
}

.article-body ul,
.article-body ol {
  margin: var(--space-4) 0;
  padding-left: var(--space-6);
}

.article-body ul { list-style: disc; }
.article-body ol { list-style: decimal; }
.article-body li { margin-bottom: var(--space-2); }

.article-body a {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.article-body a:hover { color: var(--color-accent-hover); }

.article-body table {
  margin: var(--space-6) 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.article-body th,
.article-body td {
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  text-align: left;
  font-size: var(--text-sm);
}
.article-body th {
  background: var(--color-bg-alt);
  font-weight: 600;
}

.article-body iframe,
.article-body video {
  max-width: 100%;
  margin: var(--space-6) auto;
  display: block;
  border-radius: var(--radius-md);
}

.article-body .video-wrapper {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  margin: var(--space-6) 0;
  border-radius: var(--radius-md);
}
.article-body .video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  border-radius: 0;
}

/* Tags */
.article-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--color-border);
}

.article-tags .tag-label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
  margin-right: var(--space-2);
}

.tag {
  display: inline-block;
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-xs);
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  color: var(--color-text-secondary);
  transition: all var(--transition-fast);
}
.tag:hover {
  background: var(--color-accent-light);
  border-color: var(--color-accent);
  color: var(--color-accent);
}

/* Prev / Next navigation */
.article-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  margin-bottom: var(--space-8);
  padding: var(--space-5) 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.article-nav-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.article-nav-item:last-child {
  text-align: right;
}

.article-nav-item .nav-label {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.article-nav-item .nav-title {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text);
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.article-nav-item .nav-title:hover {
  color: var(--color-accent);
}

/* Related articles */
.related-articles {
  margin-bottom: var(--space-8);
}

/* Comments section */
.comments-section {
  margin-bottom: var(--space-8);
}

.comment-form {
  margin-bottom: var(--space-6);
}

.comment-form textarea {
  width: 100%;
  min-height: 120px;
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg-alt);
  resize: vertical;
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  transition: border-color var(--transition-fast);
}
.comment-form textarea:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-light);
}

.comment-form-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: var(--space-3);
}

.comment-form .char-count {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.btn-submit-comment {
  padding: var(--space-2) var(--space-5);
  background: var(--color-accent);
  color: #fff;
  font-size: var(--text-sm);
  font-weight: 600;
  border-radius: var(--radius-sm);
  transition: background var(--transition-fast);
}
.btn-submit-comment:hover { background: var(--color-accent-hover); }

.comment-list {
  display: flex;
  flex-direction: column;
}

.comment-item {
  padding: var(--space-5) 0;
  border-bottom: 1px solid var(--color-border);
}
.comment-item:last-child { border-bottom: none; }

.comment-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}

.comment-avatar {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  background: var(--color-bg-alt);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-text-muted);
}

.comment-author {
  font-size: var(--text-sm);
  font-weight: 600;
}

.comment-date {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.comment-body {
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--color-text-secondary);
  margin-left: calc(36px + var(--space-3));
}

.comment-actions {
  margin-top: var(--space-2);
  margin-left: calc(36px + var(--space-3));
  display: flex;
  gap: var(--space-4);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.comment-actions button:hover { color: var(--color-accent); }


/* ==========================================================
   12. SIDEBAR
   ========================================================== */

.sidebar-widget {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  margin-bottom: var(--space-6);
}

.sidebar-widget:last-child {
  margin-bottom: 0;
}

.sidebar-widget h4,
.widget-title {
  font-family: var(--font-heading);
  font-size: var(--text-md);
  font-weight: 700;
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--color-accent);
  display: inline-block;
}

.sidebar-widget-title-compat {
  font-family: var(--font-heading);
  font-size: var(--text-md);
  font-weight: 700;
  padding-bottom: var(--space-3);
  margin-bottom: var(--space-4);
  border-bottom: 2px solid var(--color-accent);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* Trending widget with numbers */
.trending-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  counter-reset: trending;
}

.trending-item {
  counter-increment: trending;
  display: flex;
  text-decoration: none;
  color: var(--color-text);
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border);
}
.trending-item:last-child { border-bottom: none; }
.trending-item .num {
  font-size: 20px;
  font-weight: 800;
  color: var(--color-accent);
  width: 28px;
  flex-shrink: 0;
  line-height: 1.2;
}
.trending-item h5 {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.trending-item:hover h5 { color: var(--color-accent);
  border-bottom: 1px solid var(--color-border);
}
.trending-item:last-child { border-bottom: none; }

.trending-item::before {
  content: counter(trending);
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-xs);
  font-weight: 800;
  border-radius: var(--radius-sm);
  background: var(--color-bg-alt);
  color: var(--color-text-secondary);
}

.trending-item:nth-child(-n+3)::before {
  background: var(--color-accent);
  color: #fff;
}

.trending-item a {
  font-size: var(--text-sm);
  font-weight: 500;
  line-height: var(--leading-tight);
  color: var(--color-text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.trending-item a:hover { color: var(--color-accent); }

.trending-item .trending-meta {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-top: var(--space-1);
}

/* Sidebar article with thumbnail */
.sidebar-article {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border);
  transition: all var(--transition-fast);
}
.sidebar-article:last-child { border-bottom: none; }
.sidebar-article:hover h5 { color: var(--color-accent); }
.sidebar-article img {
  width: 80px;
  height: 56px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}
.sidebar-article h5 {
  font-size: var(--text-sm);
  font-weight: 500;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color var(--transition-fast);
}
.sidebar-article .meta {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-top: var(--space-1);
}

/* Like/unlike button active state */
.likeit_1.active,
.likeit_2.active {
  border-color: var(--color-accent) !important;
  background: var(--color-accent-light) !important;
}

/* Opinion widget cards */
.opinion-card {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border);
}
.opinion-card:last-child { border-bottom: none; }

.opinion-avatar {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-full);
  object-fit: cover;
  flex-shrink: 0;
}

.opinion-content {
  min-width: 0;
}

.opinion-name {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: var(--space-1);
}

.opinion-title {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.opinion-title:hover { color: var(--color-accent); }

/* Banner / ad areas */
.sidebar-banner {
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: var(--space-6);
}

.sidebar-banner img {
  width: 100%;
  display: block;
}

.sidebar-banner--sticky {
  position: sticky;
  top: calc(var(--header-height) + var(--nav-height) + var(--space-4));
}

/* Tag cloud widget */
.tag-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}


/* ==========================================================
   13. NEWSLETTER SECTION
   ========================================================== */

.newsletter-section {
  background: var(--color-primary-dark);
  padding: var(--space-12) 0;
  margin: var(--space-10) 0;
  text-align: center;
}

.newsletter-section h3 {
  color: #fff;
  font-size: var(--text-2xl);
  margin-bottom: var(--space-2);
}

.newsletter-section p {
  color: rgba(255, 255, 255, 0.7);
  font-size: var(--text-sm);
  margin-bottom: var(--space-6);
}

.newsletter-form {
  display: flex;
  max-width: 480px;
  margin: 0 auto;
  gap: var(--space-3);
}

.newsletter-form input {
  flex: 1;
  height: 44px;
  padding: 0 var(--space-4);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  font-size: var(--text-sm);
}
.newsletter-form input::placeholder { color: rgba(255, 255, 255, 0.5); }
.newsletter-form input:focus {
  border-color: var(--color-accent);
  background: rgba(255, 255, 255, 0.15);
}

.newsletter-form button {
  height: 44px;
  padding: 0 var(--space-6);
  background: var(--color-accent);
  color: #fff;
  font-weight: 600;
  font-size: var(--text-sm);
  border-radius: var(--radius-sm);
  white-space: nowrap;
  transition: background var(--transition-fast);
}
.newsletter-form button:hover { background: var(--color-accent-hover); }


/* ==========================================================
   14. FOOTER (4-col grid, dark background)
   ========================================================== */

.site-footer {
  background: var(--color-bg-footer);
  color: rgba(255, 255, 255, 0.7);
  padding-top: var(--space-12);
}

.footer-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-8);
  padding-bottom: var(--space-10);
}

.footer-col h4 {
  color: #fff;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 700;
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-2);
  border-bottom: 2px solid var(--color-accent);
  display: inline-block;
}

.footer-col ul li {
  margin-bottom: var(--space-2);
}

.footer-col ul li a {
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.6);
  transition: color var(--transition-fast);
}
.footer-col ul li a:hover { color: #fff; }

.footer-col .footer-desc {
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-4);
}

.footer-col .footer-logo {
  margin-bottom: var(--space-4);
}

.footer-col .footer-logo img {
  height: 28px;
}

.footer-social {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-3);
}

.footer-social a {
  width: 34px;
  height: 34px;
  border-radius: var(--radius-full);
  border: 1px solid rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.6);
  transition: all var(--transition-fast);
}
.footer-social a:hover {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #fff;
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding: var(--space-5) 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.footer-bottom .copyright {
  font-size: var(--text-xs);
  color: rgba(255, 255, 255, 0.4);
}

.footer-bottom-links {
  display: flex;
  gap: var(--space-4);
}

.footer-bottom-links a {
  font-size: var(--text-xs);
  color: rgba(255, 255, 255, 0.4);
}
.footer-bottom-links a:hover { color: rgba(255, 255, 255, 0.8); }

/* Press registration info */
.footer-info {
  font-size: var(--text-xs);
  color: rgba(255, 255, 255, 0.35);
  line-height: var(--leading-relaxed);
  padding: var(--space-4) 0;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.footer-info span {
  margin-right: var(--space-4);
}


/* ==========================================================
   15. MOBILE HAMBURGER MENU (off-canvas)
   ========================================================== */

.mobile-menu {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 300px;
  max-width: 85vw;
  background: var(--color-bg-card);
  z-index: var(--z-modal);
  transform: translateX(100%);
  transition: transform var(--transition-normal);
  overflow-y: auto;
  box-shadow: -4px 0 24px rgba(0, 0, 0, 0.2);
}

.mobile-menu.is-open {
  transform: translateX(0);
}

.mobile-menu-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: calc(var(--z-modal) - 1);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-normal), visibility var(--transition-normal);
}
.mobile-menu-backdrop.is-open {
  opacity: 1;
  visibility: visible;
}

.mobile-menu-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--color-border);
}

.mobile-menu-close {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  font-size: var(--text-xl);
  color: var(--color-text-secondary);
}
.mobile-menu-close:hover { background: var(--color-bg-alt); }

.mobile-menu-search {
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--color-border);
}

.mobile-menu-search input {
  width: 100%;
  height: 40px;
  padding: 0 var(--space-4);
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
}

.mobile-nav-list {
  padding: var(--space-2) 0;
}

.mobile-nav-list a {
  display: block;
  padding: var(--space-3) var(--space-5);
  font-size: var(--text-base);
  color: var(--color-text);
  border-bottom: 1px solid var(--color-border);
  transition: all var(--transition-fast);
}
.mobile-nav-list a:hover,
.mobile-nav-list a.active {
  background: var(--color-accent-light);
  color: var(--color-accent);
}

.mobile-nav-list .sub-item a {
  padding-left: var(--space-10);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}

.mobile-menu-footer {
  padding: var(--space-5);
  border-top: 1px solid var(--color-border);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}


/* ==========================================================
   16. DARK MODE OVERRIDES
   ========================================================== */

[data-theme="dark"] .site-header {
  border-bottom-color: var(--color-border);
}

[data-theme="dark"] .article-card {
  border-color: var(--color-border);
}

[data-theme="dark"] .header-search input {
  background: var(--color-bg-alt);
  border-color: var(--color-border);
  color: var(--color-text);
}

[data-theme="dark"] .article-body blockquote {
  background: var(--color-bg-alt);
  border-left-color: var(--color-accent);
}

[data-theme="dark"] .sidebar-widget {
  border-color: var(--color-border);
}

[data-theme="dark"] .comment-form textarea {
  background: var(--color-bg-alt);
  border-color: var(--color-border);
}

[data-theme="dark"] .pagination a,
[data-theme="dark"] .pagination span {
  border-color: var(--color-border);
}

[data-theme="dark"] .tag {
  background: var(--color-bg-alt);
  border-color: var(--color-border);
}

[data-theme="dark"] img {
  filter: brightness(0.9);
}

[data-theme="dark"] .topbar {
  background: #0d0d1a;
}

[data-theme="dark"] .mobile-menu {
  box-shadow: -4px 0 24px rgba(0, 0, 0, 0.5);
}

[data-theme="dark"] .breaking-news {
  background: rgba(230, 57, 70, 0.08);
}

[data-theme="dark"] .vote-area {
  background: var(--color-bg-alt);
}

[data-theme="dark"] .board-table th {
  background: var(--color-bg-alt);
}

[data-theme="dark"] .search-hero .search-input-wrap input {
  background: var(--color-bg-alt);
  border-color: var(--color-border);
}

[data-theme="dark"] .filter-chip {
  border-color: var(--color-border);
}


/* ==========================================================
   17. RESPONSIVE (@media 1024px, 768px, 640px)
   ========================================================== */

/* -- Tablet Landscape: max 1024px -- */
@media (max-width: 1024px) {
  :root {
    --sidebar-width: 280px;
  }

  .container {
    padding: 0 var(--space-4);
  }

  .article-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .hero-main .hero-title {
    font-size: var(--text-xl);
  }

  .header-search {
    width: 180px;
  }
}

/* -- Tablet Portrait: max 768px -- */
@media (max-width: 768px) {
  :root {
    --header-height: 54px;
    --nav-height: 44px;
  }

  .content-layout {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  .content-sidebar {
    order: 2;
  }

  .hero-grid {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .hero-main {
    grid-row: auto;
    aspect-ratio: 16 / 9;
  }

  .hero-side {
    flex-direction: row;
  }

  .hero-card {
    aspect-ratio: 16 / 10;
  }

  .article-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
  }

  .article-header .article-title {
    font-size: var(--text-2xl);
  }

  .category-featured {
    grid-template-columns: 1fr;
  }

  .article-nav {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }

  .article-nav-item:last-child {
    text-align: left;
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-border);
  }

  .header-search {
    display: none;
  }

  .hamburger-btn {
    display: flex;
  }

  .topbar-weather { display: none; }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  .footer-bottom {
    flex-direction: column;
    text-align: center;
  }

  .newsletter-form {
    flex-direction: column;
    padding: 0 var(--space-4);
  }

  .share-buttons {
    order: -1;
    width: 100%;
    justify-content: flex-start;
  }

  .article-meta-bar {
    flex-direction: column;
    align-items: flex-start;
  }

  .photo-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .video-list {
    grid-template-columns: 1fr;
  }

  .scroll-card {
    width: 240px;
  }
}

/* -- Mobile: max 640px -- */
@media (max-width: 640px) {
  .container {
    padding: 0 var(--space-3);
  }

  .hero-grid {
    gap: var(--space-3);
  }

  .hero-side {
    flex-direction: column;
  }

  .hero-main .hero-title {
    font-size: var(--text-lg);
  }

  .hero-main .hero-overlay {
    padding: var(--space-4);
  }

  .article-grid {
    grid-template-columns: 1fr;
  }

  .article-list-item {
    flex-direction: column;
    gap: var(--space-3);
  }

  .article-list-item .list-image {
    width: 100%;
    aspect-ratio: 16 / 9;
  }

  .article-header .article-title {
    font-size: var(--text-xl);
  }

  .article-body {
    font-size: var(--text-base);
  }

  .topbar {
    display: none;
  }

  .site-header.is-sticky {
    top: 0;
  }

  .main-nav.is-sticky {
    top: var(--header-height);
  }

  .nav-item a {
    padding: 0 var(--space-3);
    font-size: var(--text-xs);
  }

  .breaking-news .container {
    padding: 0 var(--space-3);
  }

  .category-hero {
    padding: var(--space-6) 0;
  }

  .category-hero h1 {
    font-size: var(--text-2xl);
  }

  .pagination {
    gap: 2px;
  }

  .pagination a,
  .pagination span {
    min-width: 32px;
    height: 32px;
    font-size: var(--text-xs);
  }

  .section-title h2,
  .section-title h3 {
    font-size: var(--text-lg);
  }

  .sidebar-banner--sticky {
    position: static;
  }

  .footer-bottom-links {
    flex-wrap: wrap;
    justify-content: center;
  }

  .photo-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2);
  }

  .scroll-card {
    width: 220px;
  }

  .search-result-item {
    flex-direction: column;
    gap: var(--space-3);
  }

  .search-result-item .result-image {
    width: 100%;
    aspect-ratio: 16 / 9;
  }

  .search-hero .search-input-wrap input {
    height: 44px;
    font-size: var(--text-sm);
  }

  .vote-area {
    gap: var(--space-4);
    padding: var(--space-4);
  }

  .vote-btn .vote-icon {
    width: 40px;
    height: 40px;
    font-size: var(--text-lg);
  }
}


/* ==========================================================
   18. PRINT STYLES
   ========================================================== */

@media print {
  *,
  *::before,
  *::after {
    background: transparent !important;
    color: #000 !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }

  body {
    font-size: 12pt;
    line-height: 1.5;
  }

  a,
  a:visited {
    text-decoration: underline;
  }

  a[href]::after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
    font-weight: normal;
  }

  a[href^="#"]::after,
  a[href^="javascript:"]::after {
    content: "";
  }

  .topbar,
  .site-header,
  .main-nav,
  .breaking-news,
  .mobile-menu,
  .mobile-menu-backdrop,
  .hamburger-btn,
  .share-buttons,
  .font-controls,
  .newsletter-section,
  .sidebar-banner,
  .content-sidebar,
  .comment-form,
  .article-nav,
  .pagination,
  .footer-social,
  .header-actions,
  .back-to-top,
  .vote-area {
    display: none !important;
  }

  .container {
    max-width: 100%;
    padding: 0;
  }

  .content-layout {
    display: block;
  }

  .article-header .article-title {
    font-size: 24pt;
    line-height: 1.2;
  }

  .article-body {
    font-size: 11pt;
  }

  .article-body img {
    max-width: 100% !important;
    page-break-inside: avoid;
  }

  .article-body blockquote {
    border-left: 2px solid #000;
    padding-left: 1em;
    margin-left: 0;
  }

  h2, h3 {
    page-break-after: avoid;
  }

  p {
    orphans: 3;
    widows: 3;
  }

  .site-footer {
    border-top: 1px solid #ccc;
    padding-top: 1em;
  }

  .footer-grid {
    display: none !important;
  }

  .footer-bottom .copyright {
    display: block !important;
  }
}


/* ==========================================================
   19. UTILITY CLASSES
   ========================================================== */

/* Screen-reader only */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Line clamping */
.line-clamp-1 {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Text utilities */
.text-center { text-align: center; }
.text-left   { text-align: left; }
.text-right  { text-align: right; }
.text-accent { color: var(--color-accent); }
.text-muted  { color: var(--color-text-muted); }
.text-sm     { font-size: var(--text-sm); }
.text-xs     { font-size: var(--text-xs); }
.font-bold   { font-weight: 700; }
.font-medium { font-weight: 500; }

/* Display utilities */
.d-none    { display: none; }
.d-block   { display: block; }
.d-flex    { display: flex; }
.d-grid    { display: grid; }
.d-inline  { display: inline; }
.d-inline-block { display: inline-block; }

/* Flex utilities */
.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}
.flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.flex-wrap  { flex-wrap: wrap; }
.flex-col   { flex-direction: column; }
.flex-1     { flex: 1; }
.gap-1 { gap: var(--space-1); }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }

/* Spacing utilities */
.mt-0 { margin-top: 0; }
.mt-2 { margin-top: var(--space-2); }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mt-8 { margin-top: var(--space-8); }
.mb-0 { margin-bottom: 0; }
.mb-2 { margin-bottom: var(--space-2); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }
.mb-8 { margin-bottom: var(--space-8); }
.pt-4 { padding-top: var(--space-4); }
.pb-4 { padding-bottom: var(--space-4); }
.py-4 { padding-top: var(--space-4); padding-bottom: var(--space-4); }
.px-4 { padding-left: var(--space-4); padding-right: var(--space-4); }

/* Visibility */
.visible       { visibility: visible; }
.invisible     { visibility: hidden; }
.opacity-0     { opacity: 0; }
.opacity-50    { opacity: 0.5; }
.opacity-100   { opacity: 1; }

/* Overflow */
.overflow-hidden   { overflow: hidden; }
.overflow-auto     { overflow: auto; }
.overflow-x-auto   { overflow-x: auto; }

/* Border utilities */
.border-t    { border-top: 1px solid var(--color-border); }
.border-b    { border-bottom: 1px solid var(--color-border); }
.rounded     { border-radius: var(--radius-md); }
.rounded-lg  { border-radius: var(--radius-lg); }
.rounded-full { border-radius: var(--radius-full); }

/* Background */
.bg-accent { background: var(--color-accent); color: #fff; }
.bg-alt    { background: var(--color-bg-alt); }
.bg-dark   { background: var(--color-primary-dark); color: #fff; }

/* Width */
.w-full  { width: 100%; }
.max-w-full { max-width: 100%; }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-5);
  font-size: var(--text-sm);
  font-weight: 600;
  border-radius: var(--radius-sm);
  transition: all var(--transition-fast);
  white-space: nowrap;
  cursor: pointer;
}

.btn-primary {
  background: var(--color-accent);
  color: #fff;
}
.btn-primary:hover { background: var(--color-accent-hover); color: #fff; }

.btn-outline {
  border: 1px solid var(--color-border);
  color: var(--color-text);
  background: var(--color-bg-card);
}
.btn-outline:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.btn-sm {
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-xs);
}

.btn-lg {
  padding: var(--space-3) var(--space-8);
  font-size: var(--text-md);
}


/* ==========================================================
   20. CMS-SPECIFIC (.info_tbl, vote system, forms)
   ========================================================== */

/* Info table (article detail metadata) */
.info_tbl {
  width: 100%;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: var(--space-6);
  font-size: var(--text-sm);
}

.info_tbl th {
  background: var(--color-bg-alt);
  padding: var(--space-3) var(--space-4);
  text-align: left;
  font-weight: 600;
  color: var(--color-text-secondary);
  border-bottom: 1px solid var(--color-border);
  white-space: nowrap;
  width: 100px;
}

.info_tbl td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text);
}

.info_tbl tr:last-child th,
.info_tbl tr:last-child td {
  border-bottom: none;
}

/* Vote system */
.vote-area {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  padding: var(--space-6);
  margin: var(--space-6) 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg-alt);
}

.vote-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
  transition: transform var(--transition-fast);
}
.vote-btn:hover { transform: scale(1.1); }

.vote-btn .vote-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-xl);
  transition: all var(--transition-fast);
}

.vote-btn.vote-good .vote-icon {
  background: var(--color-accent-light);
  color: var(--color-accent);
  border: 2px solid var(--color-accent);
}
.vote-btn.vote-good:hover .vote-icon {
  background: var(--color-accent);
  color: #fff;
}

.vote-btn.vote-bad .vote-icon {
  background: var(--color-bg-alt);
  color: var(--color-text-muted);
  border: 2px solid var(--color-border);
}
.vote-btn.vote-bad:hover .vote-icon {
  background: var(--color-gray-600);
  color: #fff;
  border-color: var(--color-gray-600);
}

.vote-btn .vote-count {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-text-secondary);
}

/* Board-style table (CMS list) */
.board-table {
  width: 100%;
  border-top: 2px solid var(--color-primary-dark);
  font-size: var(--text-sm);
}

.board-table th {
  padding: var(--space-3) var(--space-2);
  background: var(--color-bg-alt);
  border-bottom: 1px solid var(--color-border);
  font-weight: 600;
  color: var(--color-text-secondary);
  text-align: center;
  font-size: var(--text-xs);
}

.board-table td {
  padding: var(--space-3) var(--space-2);
  border-bottom: 1px solid var(--color-border);
  text-align: center;
  color: var(--color-text-secondary);
}

.board-table td.subject {
  text-align: left;
  padding-left: var(--space-4);
}

.board-table td.subject a {
  color: var(--color-text);
  font-weight: 500;
}
.board-table td.subject a:hover {
  color: var(--color-accent);
}

/* CMS form elements */
.form-group {
  margin-bottom: var(--space-4);
}

.form-label {
  display: block;
  font-size: var(--text-sm);
  font-weight: 600;
  margin-bottom: var(--space-2);
  color: var(--color-text);
}

.form-input,
.form-select,
.form-textarea {
  width: 100%;
  height: 40px;
  padding: 0 var(--space-4);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  transition: border-color var(--transition-fast);
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-light);
}

.form-textarea {
  height: auto;
  min-height: 100px;
  padding: var(--space-3) var(--space-4);
  resize: vertical;
}

/* Reporter / author byline */
.byline {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) 0;
  border-top: 1px solid var(--color-border);
  margin-top: var(--space-6);
}

.byline-avatar {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-full);
  object-fit: cover;
}

.byline-info {
  flex: 1;
}

.byline-name {
  font-weight: 700;
  font-size: var(--text-sm);
}

.byline-email {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

/* Popup / modal */
.popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: var(--z-overlay);
  display: flex;
  align-items: center;
  justify-content: center;
}

.popup-content {
  background: var(--color-bg-card);
  border-radius: var(--radius-lg);
  max-width: 500px;
  width: 90%;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: var(--shadow-lg);
}

.popup-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--color-border);
}

.popup-body {
  padding: var(--space-5);
}

.popup-footer {
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--color-border);
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
}


/* ==========================================================
   21. PHOTO / VIDEO SECTION
   ========================================================== */

/* Photo gallery grid */
.photo-section {
  margin-bottom: var(--space-8);
}

.photo-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
}

.photo-item {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  cursor: pointer;
}

.photo-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}
.photo-item:hover img {
  transform: scale(1.05);
}

.photo-item .photo-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--space-3);
  background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, transparent 100%);
  color: #fff;
  font-size: var(--text-sm);
  opacity: 0;
  transition: opacity var(--transition-normal);
}
.photo-item:hover .photo-overlay { opacity: 1; }

.photo-item .photo-count {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: var(--text-xs);
  padding: 2px var(--space-2);
  border-radius: var(--radius-sm);
}

/* Horizontal scroll cards */
.scroll-cards {
  display: flex;
  gap: var(--space-4);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: var(--space-3);
  scrollbar-width: thin;
  scrollbar-color: var(--color-border) transparent;
}

.scroll-cards::-webkit-scrollbar {
  height: 4px;
}
.scroll-cards::-webkit-scrollbar-track {
  background: transparent;
}
.scroll-cards::-webkit-scrollbar-thumb {
  background: var(--color-border);
  border-radius: var(--radius-full);
}

.scroll-card {
  flex-shrink: 0;
  width: 280px;
  scroll-snap-align: start;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  transition: box-shadow var(--transition-normal);
}
.scroll-card:hover { box-shadow: var(--shadow-md); }

.scroll-card .scroll-card-image {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
}

.scroll-card .scroll-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.scroll-card .scroll-card-body {
  padding: var(--space-3);
}

.scroll-card .scroll-card-title {
  font-size: var(--text-sm);
  font-weight: 600;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: var(--space-1);
}

.scroll-card .scroll-card-meta {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

/* Video play icon overlay */
.video-badge {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 48px;
  height: 48px;
  background: rgba(0, 0, 0, 0.6);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: var(--text-xl);
  transition: all var(--transition-fast);
}

.scroll-card:hover .video-badge,
.photo-item:hover .video-badge {
  background: var(--color-accent);
  transform: translate(-50%, -50%) scale(1.1);
}

/* Duration badge */
.duration-badge {
  position: absolute;
  bottom: var(--space-2);
  right: var(--space-2);
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  font-size: 0.6875rem;
  padding: 1px var(--space-2);
  border-radius: var(--radius-sm);
}

/* Video list grid */
.video-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
}


/* ==========================================================
   22. SEARCH PAGE
   ========================================================== */

.search-page {
  padding: var(--space-8) 0;
}

.search-hero {
  text-align: center;
  padding: var(--space-10) 0;
  margin-bottom: var(--space-8);
}

.search-hero h1 {
  font-size: var(--text-2xl);
  margin-bottom: var(--space-5);
}

.search-hero .search-input-wrap {
  max-width: 600px;
  margin: 0 auto;
  position: relative;
}

.search-hero .search-input-wrap input {
  width: 100%;
  height: 52px;
  padding: 0 var(--space-12) 0 var(--space-5);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-full);
  font-size: var(--text-md);
  background: var(--color-bg-card);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.search-hero .search-input-wrap input:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 4px var(--color-accent-light);
}

.search-hero .search-input-wrap button {
  position: absolute;
  right: var(--space-3);
  top: 50%;
  transform: translateY(-50%);
  width: 38px;
  height: 38px;
  background: var(--color-accent);
  color: #fff;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-lg);
  transition: background var(--transition-fast);
}
.search-hero .search-input-wrap button:hover {
  background: var(--color-accent-hover);
}

/* Search results info bar */
.search-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border);
}

.search-info .result-count {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}

.search-info .result-count strong {
  color: var(--color-accent);
  font-weight: 700;
}

.search-sort {
  display: flex;
  gap: var(--space-3);
}

.search-sort button {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  transition: all var(--transition-fast);
}

.search-sort button.active,
.search-sort button:hover {
  color: var(--color-accent);
  font-weight: 600;
}

/* Search result item */
.search-result-item {
  padding: var(--space-5) 0;
  border-bottom: 1px solid var(--color-border);
  display: flex;
  gap: var(--space-5);
}

.search-result-item .result-image {
  flex-shrink: 0;
  width: 180px;
  aspect-ratio: 16 / 10;
  border-radius: var(--radius-md);
  overflow: hidden;
}

.search-result-item .result-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.search-result-item .result-content {
  flex: 1;
  min-width: 0;
}

.search-result-item .result-category {
  font-size: var(--text-xs);
  color: var(--color-accent);
  font-weight: 600;
  margin-bottom: var(--space-1);
}

.search-result-item .result-title {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: 600;
  margin-bottom: var(--space-2);
  line-height: var(--leading-tight);
}

.search-result-item .result-title a {
  color: var(--color-text);
}
.search-result-item .result-title a:hover {
  color: var(--color-accent);
}

.search-result-item .result-title a mark,
.search-result-item .result-excerpt mark {
  background: var(--color-accent-light);
  color: var(--color-accent);
  padding: 0 2px;
  border-radius: 2px;
}

.search-result-item .result-excerpt {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: var(--leading-normal);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: var(--space-2);
}

.search-result-item .result-meta {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* No results */
.search-empty {
  text-align: center;
  padding: var(--space-16) 0;
}

.search-empty .empty-icon {
  font-size: 3rem;
  margin-bottom: var(--space-4);
  opacity: 0.3;
}

.search-empty h3 {
  font-size: var(--text-xl);
  margin-bottom: var(--space-2);
}

.search-empty p {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

/* Filter chips */
.search-filters {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-bottom: var(--space-5);
}

.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-xs);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.filter-chip:hover,
.filter-chip.active {
  background: var(--color-accent);
  color: #fff;
  border-color: var(--color-accent);
}


/* ==========================================================
   23. ANIMATIONS & EXTRAS
   ========================================================== */

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

.animate-fadeIn    { animation: fadeIn var(--transition-normal) both; }
.animate-fadeInUp  { animation: fadeInUp var(--transition-slow) both; }
.animate-slideDown { animation: slideDown var(--transition-normal) both; }

/* Skeleton loading */
.skeleton {
  background: linear-gradient(90deg,
    var(--color-gray-200) 25%,
    var(--color-gray-100) 50%,
    var(--color-gray-200) 75%
  );
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s infinite;
  border-radius: var(--radius-sm);
}

@keyframes skeleton-loading {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Toast notification */
.toast {
  position: fixed;
  bottom: var(--space-6);
  left: 50%;
  transform: translateX(-50%) translateY(100px);
  background: var(--color-gray-800);
  color: #fff;
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  z-index: var(--z-toast);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  transition: all var(--transition-normal);
}

.toast.is-visible {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}

/* Back to top button */
.back-to-top {
  position: fixed;
  bottom: var(--space-6);
  right: var(--space-6);
  width: 44px;
  height: 44px;
  background: var(--color-accent);
  color: #fff;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-lg);
  box-shadow: var(--shadow-md);
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  transition: all var(--transition-normal);
  z-index: var(--z-fixed);
}

.back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.back-to-top:hover {
  background: var(--color-accent-hover);
  color: #fff;
  transform: translateY(-2px);
}

/* ================================================================
   OVERRIDE: HTML에서 사용하는 클래스에 직접 스타일 강제 적용
   ================================================================ */

/* 폰트 강제 적용 */
body, html {
  font-family: 'Noto Sans KR', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif !important;
  margin: 0 !important;
  padding: 0 !important;
}

h1, h2, h3, h4, h5,
.section-title h2,
.article-card .body h3,
.article-list-item .info h3,
.hero-side-item .info h3,
.hero-main .overlay h1,
.trending-item h5,
.opinion-card .info h5,
.article-title {
  font-family: 'Apple SD Gothic Neo', 'Malgun Gothic', '맑은 고딕', 'Noto Sans KR', Dotum, 돋움, sans-serif !important;
}

/* 컨테이너 */
.container {
  max-width: 1280px !important;
  margin: 0 auto !important;
  padding: 0 20px !important;
  width: 100% !important;
}

/* 2열 레이아웃 (메인 + 사이드바) */
.content-layout {
  display: grid !important;
  grid-template-columns: 1fr 340px !important;
  gap: 30px !important;
  margin-top: 30px !important;
  margin-bottom: 40px !important;
}

/* 4열 카드 그리드 */
.article-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 20px !important;
  padding-bottom: 30px !important;
}

/* 히어로 2열 */
.hero-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 20px !important;
  min-height: 400px !important;
}

.hero-main {
  display: block !important;
  position: relative !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  text-decoration: none !important;
  aspect-ratio: 16/10 !important;
}

.hero-main img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

.hero-main .overlay {
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(transparent 30%, rgba(0,0,0,0.85)) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  padding: 30px !important;
  color: #fff !important;
}

.hero-main .overlay .cat {
  color: #e63946 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  margin-bottom: 8px !important;
}

.hero-main .overlay h1 {
  font-family: 'Apple SD Gothic Neo', 'Malgun Gothic', '맑은 고딕', 'Noto Sans KR', Dotum, 돋움, sans-serif !important;
  font-size: 26px !important;
  font-weight: 700 !important;
  color: #fff !important;
  line-height: 1.35 !important;
  margin-bottom: 8px !important;
}

.hero-main .overlay .meta {
  color: rgba(255,255,255,0.6) !important;
  font-size: 12px !important;
}

.hero-side {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

.hero-side-item {
  display: flex !important;
  text-decoration: none !important;
  color: #222 !important;
  gap: 14px !important;
  padding: 14px !important;
  background: #fff !important;
  border: 1px solid #e9ecef !important;
  border-radius: 12px !important;
  flex: 1 !important;
  transition: all 0.2s !important;
}
[data-theme="dark"] .hero-side-item {
  background: #1c2128 !important;
  border-color: #30363d !important;
  color: #e6edf3 !important;
}
.hero-side-item:hover {
  box-shadow: 0 8px 25px rgba(0,0,0,0.1) !important;
  transform: translateY(-2px) !important;
}
.hero-side-item img {
  width: 120px !important;
  height: 80px !important;
  object-fit: cover !important;
  border-radius: 8px !important;
  flex-shrink: 0 !important;
}
.hero-side-item .info h3 {
  font-size: 15px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
}
.hero-side-item .info .meta {
  font-size: 11px !important;
  color: #adb5bd !important;
  margin-top: 6px !important;
}

/* 카드 */
.article-card {
  display: block !important;
  text-decoration: none !important;
  color: #222 !important;
  background: #fff !important;
  border: 1px solid #e9ecef !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  transition: all 0.3s !important;
}
[data-theme="dark"] .article-card {
  background: #1c2128 !important;
  border-color: #30363d !important;
  color: #e6edf3 !important;
}
.article-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 8px 25px rgba(0,0,0,0.1) !important;
}
.article-card > img {
  width: 100% !important;
  aspect-ratio: 16/10 !important;
  object-fit: cover !important;
  display: block !important;
}
.article-card .body {
  padding: 16px !important;
}
.article-card .body h3 {
  font-size: 15px !important;
  font-weight: 600 !important;
  line-height: 1.45 !important;
  margin-bottom: 8px !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}
.article-card .body p {
  font-size: 13px !important;
  color: #6c757d !important;
  line-height: 1.5 !important;
  margin-bottom: 8px !important;
}
.article-card .body .meta {
  font-size: 11px !important;
  color: #adb5bd !important;
}

/* 리스트 아이템 */
.article-list-item {
  display: flex !important;
  text-decoration: none !important;
  color: #222 !important;
  gap: 16px !important;
  padding: 20px 0 !important;
  border-bottom: 1px solid #e9ecef !important;
}
[data-theme="dark"] .article-list-item { color: #e6edf3 !important; border-color: #30363d !important; }
.article-list-item:hover { background: #f8f9fa !important; margin: 0 -10px !important; padding-left: 10px !important; padding-right: 10px !important; border-radius: 8px !important; }
[data-theme="dark"] .article-list-item:hover { background: #161b22 !important; }
.article-list-item > img {
  width: 200px !important;
  height: 130px !important;
  object-fit: cover !important;
  border-radius: 8px !important;
  flex-shrink: 0 !important;
}
.article-list-item .info h3 {
  font-size: 17px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  margin-bottom: 6px !important;
}
.article-list-item .info p {
  font-size: 13px !important;
  color: #6c757d !important;
  margin-bottom: 8px !important;
}
.article-list-item .info .meta {
  font-size: 11px !important;
  color: #adb5bd !important;
}

/* 섹션 타이틀 */
.section-title {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 20px !important;
  padding-top: 30px !important;
}
.section-title h2 {
  font-family: 'Apple SD Gothic Neo', 'Malgun Gothic', '맑은 고딕', 'Noto Sans KR', Dotum, 돋움, sans-serif !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  position: relative !important;
  padding-left: 14px !important;
}
.section-title h2::before {
  content: '' !important;
  position: absolute !important;
  left: 0 !important;
  top: 4px !important;
  bottom: 4px !important;
  width: 4px !important;
  background: #e63946 !important;
  border-radius: 2px !important;
}

/* 사이드바 위젯 */
.sidebar-widget {
  background: #fff !important;
  border: 1px solid #e9ecef !important;
  border-radius: 12px !important;
  padding: 20px !important;
  margin-bottom: 20px !important;
}
[data-theme="dark"] .sidebar-widget { background: #1c2128 !important; border-color: #30363d !important; }
.sidebar-widget h4 {
  font-size: 15px !important;
  font-weight: 700 !important;
  margin-bottom: 16px !important;
  padding-bottom: 10px !important;
  border-bottom: 2px solid #e63946 !important;
  display: inline-block !important;
}

/* 트렌딩 */
.trending-item {
  display: flex !important;
  text-decoration: none !important;
  color: #222 !important;
  gap: 12px !important;
  padding: 10px 0 !important;
  border-bottom: 1px solid #e9ecef !important;
}
[data-theme="dark"] .trending-item { color: #e6edf3 !important; border-color: #30363d !important; }
.trending-item:last-child { border-bottom: none !important; }
.trending-item .num {
  font-size: 20px !important;
  font-weight: 800 !important;
  color: #e63946 !important;
  width: 28px !important;
  flex-shrink: 0 !important;
  line-height: 1.2 !important;
}
.trending-item h5 {
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1.45 !important;
}
.trending-item:hover h5 { color: #e63946 !important; }

/* Opinion */
.opinion-card {
  display: flex !important;
  text-decoration: none !important;
  color: #222 !important;
  gap: 14px !important;
  padding: 12px 0 !important;
  border-bottom: 1px solid #e9ecef !important;
}
[data-theme="dark"] .opinion-card { color: #e6edf3 !important; border-color: #30363d !important; }
.opinion-card:last-child { border-bottom: none !important; }
.opinion-card .avatar {
  width: 48px !important;
  height: 48px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #667eea, #764ba2) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #fff !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  flex-shrink: 0 !important;
}
.opinion-card .info h5 { font-size: 14px !important; font-weight: 600 !important; line-height: 1.4 !important; }
.opinion-card .info .author { font-size: 11px !important; color: #adb5bd !important; }

/* 광고 스트립 */
.ad-strip {
  background: #f8f9fa !important;
  padding: 20px 0 !important;
  border-top: 1px solid #e9ecef !important;
  border-bottom: 1px solid #e9ecef !important;
}
[data-theme="dark"] .ad-strip { background: #161b22 !important; border-color: #30363d !important; }

/* 모바일 메뉴 버튼 — 기본 숨김, 모바일에서 표시 */
.mobile-menu-btn {
  display: none !important;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
}
.mobile-menu-btn span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--color-text, #222);
  border-radius: 2px;
  transition: all 0.2s;
}

/* 다크모드 토글 버튼 */
.dark-toggle {
  background: var(--color-bg-alt, #f3f4f6);
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: 10px;
  padding: 8px 14px;
  font-size: 18px;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dark-toggle:hover { background: var(--color-accent, #e63946); border-color: var(--color-accent, #e63946); }
[data-theme="dark"] .dark-toggle { background: #1c2128; border-color: #30363d; }
[data-theme="dark"] .dark-toggle:hover { background: #e63946; border-color: #e63946; }

/* 검색 버튼 */
.search-btn {
  background: var(--color-bg-alt, #f3f4f6);
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: 10px;
  padding: 8px 14px;
  font-size: 18px;
  cursor: pointer;
  color: var(--color-text, #222);
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.search-btn:hover { background: var(--color-accent, #e63946); color: #fff; border-color: var(--color-accent, #e63946); }
[data-theme="dark"] .search-btn { background: #1c2128; border-color: #30363d; color: #e6edf3; }
[data-theme="dark"] .search-btn:hover { background: #e63946; color: #fff; border-color: #e63946; }

/* 헤더 우측 액션 */
.header-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* 헤더 */
header {
  background: #fff !important;
  border-bottom: 1px solid #e9ecef !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 100 !important;
}
[data-theme="dark"] header { background: #0d1117 !important; border-color: #30363d !important; }
.header-inner {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  height: 64px !important;
}

/* 네비게이션 */
nav {
  background: #fff !important;
  border-bottom: 1px solid #e9ecef !important;
  overflow-x: auto !important;
}
[data-theme="dark"] nav { background: #0d1117 !important; border-color: #30363d !important; }
nav ul {
  display: flex !important;
  list-style: none !important;
  gap: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}
nav li a {
  display: block !important;
  padding: 14px 18px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #6c757d !important;
  text-decoration: none !important;
  white-space: nowrap !important;
}
nav li a:hover, nav li a.active { color: #e63946 !important; }

/* 푸터 */
footer {
  background: #1a1a2e !important;
  color: rgba(255,255,255,0.7) !important;
  padding: 50px 0 30px !important;
  margin-top: 40px !important;
}
.footer-grid {
  display: grid !important;
  grid-template-columns: 2fr 1fr 1fr !important;
  gap: 40px !important;
}
footer h5 { color: #fff !important; font-size: 14px !important; font-weight: 700 !important; margin-bottom: 16px !important; }
footer ul { list-style: none !important; padding: 0 !important; }
footer ul li { margin-bottom: 8px !important; }
footer ul li a { color: rgba(255,255,255,0.5) !important; text-decoration: none !important; font-size: 13px !important; }
footer ul li a:hover { color: #fff !important; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.1) !important;
  padding-top: 20px !important;
  margin-top: 40px !important;
  font-size: 12px !important;
  opacity: 0.5 !important;
}

/* 반응형 */
@media (max-width: 1024px) {
  .hero-grid { grid-template-columns: 1fr !important; }
  .article-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .content-layout { grid-template-columns: 1fr !important; }
  .footer-grid { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 640px) {
  .article-grid { grid-template-columns: 1fr !important; }
  .article-list-item > img { width: 120px !important; height: 80px !important; }
  .hero-main .overlay h1 { font-size: 20px !important; }
  .footer-grid { grid-template-columns: 1fr !important; }
}

/* 빈 배너 숨기기 */
.promote img[src$="/banner/"] { display: none !important; }
.promote li:has(img[src$="/banner/"]) { display: none !important; }
img[src$="/banner/"] { display: none !important; }

/* 제목 폰트 최종 강제 적용 */
.article-card .body h3 { font-family: 'Apple SD Gothic Neo', 'Malgun Gothic', '맑은 고딕', 'Noto Sans KR', Dotum, 돋움, sans-serif !important; }
.article-list-item .info h3 { font-family: 'Apple SD Gothic Neo', 'Malgun Gothic', '맑은 고딕', 'Noto Sans KR', Dotum, 돋움, sans-serif !important; }
.hero-side-item .info h3 { font-family: 'Apple SD Gothic Neo', 'Malgun Gothic', '맑은 고딕', 'Noto Sans KR', Dotum, 돋움, sans-serif !important; }
.hero-main .overlay h1 { font-family: 'Apple SD Gothic Neo', 'Malgun Gothic', '맑은 고딕', 'Noto Sans KR', Dotum, 돋움, sans-serif !important; }
.trending-item h5 { font-family: 'Apple SD Gothic Neo', 'Malgun Gothic', '맑은 고딕', 'Noto Sans KR', Dotum, 돋움, sans-serif !important; }
.opinion-card .info h5 { font-family: 'Apple SD Gothic Neo', 'Malgun Gothic', '맑은 고딕', 'Noto Sans KR', Dotum, 돋움, sans-serif !important; }
.section-title h2 { font-family: 'Apple SD Gothic Neo', 'Malgun Gothic', '맑은 고딕', 'Noto Sans KR', Dotum, 돋움, sans-serif !important; }
.article-title { font-family: 'Apple SD Gothic Neo', 'Malgun Gothic', '맑은 고딕', 'Noto Sans KR', Dotum, 돋움, sans-serif !important; }
.article-subtitle { font-family: 'Noto Sans KR', sans-serif !important; }

/* noimage (로고 표시) — 배경 채움 + 로고 중앙 배치 */
.article-card > img[src*="/config/"],
.article-list-item > img[src*="/config/"],
.hero-main img[src*="/config/"],
.hero-side-item img[src*="/config/"],
.category-featured .featured-image img[src*="/config/"] {
  background: linear-gradient(135deg, #f1f3f5 0%, #e9ecef 100%) !important;
  object-fit: contain !important;
  padding: 20px !important;
}
[data-theme="dark"] .article-card > img[src*="/config/"],
[data-theme="dark"] .article-list-item > img[src*="/config/"],
[data-theme="dark"] .hero-main img[src*="/config/"],
[data-theme="dark"] .hero-side-item img[src*="/config/"],
[data-theme="dark"] .category-featured .featured-image img[src*="/config/"] {
  background: linear-gradient(135deg, #1c2128 0%, #161b22 100%) !important;
}

/* ============================================================
   다크모드 — 헤더, nav, body, 약관/개인정보 페이지 등
   ============================================================ */
[data-theme="dark"] body {
  background: #0d1117 !important;
  color: #e6edf3 !important;
}
[data-theme="dark"] header {
  background: #0d1117 !important;
  border-color: #30363d !important;
}
[data-theme="dark"] .logo img {
  background: #fff !important;
  padding: 4px 8px !important;
  border-radius: 6px !important;
}
[data-theme="dark"] nav {
  background: #0d1117 !important;
  border-color: #30363d !important;
}
[data-theme="dark"] nav li a {
  color: #8b949e !important;
}
[data-theme="dark"] nav li a:hover,
[data-theme="dark"] nav li a.active {
  color: #e63946 !important;
}
[data-theme="dark"] .top-bar {
  background: #010409 !important;
}
[data-theme="dark"] .container {
  color: #e6edf3;
}
[data-theme="dark"] .content-main {
  color: #e6edf3;
}
[data-theme="dark"] .section-title h2 {
  color: #e6edf3 !important;
}
/* 다크모드 — 푸터 (site-footer + footer 모두) */
[data-theme="dark"] footer,
[data-theme="dark"] .site-footer {
  background: #0d1117 !important;
  color: rgba(255,255,255,0.7) !important;
}
[data-theme="dark"] .site-footer .footer-grid {
  color: rgba(255,255,255,0.7) !important;
}
[data-theme="dark"] .site-footer .footer-col-title a,
[data-theme="dark"] .site-footer h4 a {
  color: #fff !important;
}
[data-theme="dark"] .site-footer .footer-col-links a,
[data-theme="dark"] .site-footer ul li a {
  color: rgba(255,255,255,0.5) !important;
}
[data-theme="dark"] .site-footer .footer-col-links a:hover,
[data-theme="dark"] .site-footer ul li a:hover {
  color: #fff !important;
}
[data-theme="dark"] .footer-brand p,
[data-theme="dark"] .footer-brand div {
  color: rgba(255,255,255,0.5) !important;
}
[data-theme="dark"] .footer-bottom {
  border-color: rgba(255,255,255,0.08) !important;
  color: rgba(255,255,255,0.4) !important;
}
/* 다크모드 — 약관/개인정보/청소년보호 등 본문 페이지 */
[data-theme="dark"] #sub,
[data-theme="dark"] #content,
[data-theme="dark"] #search_body,
[data-theme="dark"] .etc_con_area,
[data-theme="dark"] .policy_area,
[data-theme="dark"] .terms_area {
  background: #0d1117 !important;
  color: #e6edf3 !important;
}
[data-theme="dark"] .etc_con_area table,
[data-theme="dark"] .etc_con_area td,
[data-theme="dark"] .etc_con_area th {
  border-color: #30363d !important;
  color: #e6edf3 !important;
  background: transparent !important;
}
/* 다크모드 — 기사 본문 */
[data-theme="dark"] .article-body {
  color: #e6edf3 !important;
}
[data-theme="dark"] .article-title {
  color: #e6edf3 !important;
}
[data-theme="dark"] .article-subtitle {
  color: #8b949e !important;
}
[data-theme="dark"] .article-meta-bar {
  color: #8b949e !important;
}
[data-theme="dark"] .article-category {
  background: #e63946 !important;
}
/* 다크모드 — 페이지네이션 */
[data-theme="dark"] .pagination a {
  color: #8b949e !important;
  border-color: #30363d !important;
  background: #161b22 !important;
}
[data-theme="dark"] .pagination .active,
[data-theme="dark"] .pagination strong {
  background: #e63946 !important;
  color: #fff !important;
  border-color: #e63946 !important;
}
/* 다크모드 — 검색 버튼/입력 */
[data-theme="dark"] .search-btn {
  color: #8b949e !important;
  border-color: #30363d !important;
}
[data-theme="dark"] .dark-toggle {
  border-color: #30363d !important;
}

/* ============================================================
   BREAKING NEWS TICKER (main.html용)
   ============================================================ */
.breaking-badge {
  flex-shrink: 0;
  background: var(--color-accent, #e63946);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  padding: 4px 14px;
  border-radius: 4px;
  margin-right: 16px;
  letter-spacing: 0.05em;
  animation: pulse-badge 2s ease-in-out infinite;
}
@keyframes pulse-badge {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}
.breaking-ticker {
  flex: 1;
  overflow: hidden;
  height: 40px;
}
.breaking-ticker ul {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
.breaking-ticker ul li {
  height: 40px !important;
  display: flex !important;
  align-items: center !important;
}
.breaking-ticker ul li a {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text, #222);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.breaking-ticker ul li a:hover { color: var(--color-accent, #e63946); }
[data-theme="dark"] .breaking-ticker ul li a { color: #e6edf3; }

/* ============================================================
   카테고리 피처드 기사 (list.html)
   ============================================================ */
.category-featured {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 24px;
  margin-bottom: 28px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--color-border, #e5e7eb);
}
.category-featured .featured-image img {
  width: 100%;
  height: 280px;
  object-fit: cover;
  border-radius: 12px;
}
.category-featured .featured-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.category-featured .featured-title {
  font-size: 22px;
  font-weight: 800;
  line-height: 1.4;
  margin: 0 0 12px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.category-featured .featured-excerpt {
  font-size: 14px;
  color: var(--color-text-secondary, #6b7280);
  line-height: 1.7;
  margin: 0 0 12px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
[data-theme="dark"] .category-featured { border-color: #30363d; }
[data-theme="dark"] .category-featured .featured-title { color: #e6edf3; }
[data-theme="dark"] .category-featured .featured-excerpt { color: #8b949e; }

/* ============================================================
   검색 히어로 다크모드
   ============================================================ */
[data-theme="dark"] .set_calendar { background: #1c2128 !important; border-color: #30363d !important; }
[data-theme="dark"] .set_calendar input { background: #0d1117 !important; border-color: #30363d !important; color: #e6edf3 !important; }

/* ============================================================
   댓글 영역 다크모드
   ============================================================ */
[data-theme="dark"] .comments-section { color: #e6edf3; }
[data-theme="dark"] .comment-item { border-color: #30363d !important; }

/* ============================================================
   모바일 보완 (640px 이하)
   ============================================================ */
@media (max-width: 640px) {
  .breaking-badge { font-size: 11px; padding: 3px 10px; margin-right: 10px; }
  .breaking-ticker ul li a { font-size: 13px; }
  .category-featured { grid-template-columns: 1fr !important; gap: 16px !important; }
  .category-featured .featured-image img { height: 200px; }
  .category-featured .featured-title { font-size: 18px; }
  /* 검색 히어로 */
  .search-hero-inner { padding: 32px 0 !important; }
  .search-hero-inner h1 { font-size: 22px !important; }
  /* 모바일 사이드바 iframe 숨기기 */
  .content-sidebar iframe { max-width: 100%; }
  /* 모바일 메뉴 z-index 보장 */
  .mobile-menu-btn { display: flex !important; }
  /* 상단바 모바일 숨기기 */
  .top-bar { display: none !important; }
}
@media (max-width: 768px) {
  .top-bar { font-size: 11px; }
  .content-sidebar iframe { width: 100% !important; max-width: 300px; }
  .mobile-menu-btn { display: flex !important; }
}