@import url('https://fonts.googleapis.com/css2?family=Prompt:wght@300;400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;600;700&family=Noto+Sans+JP:wght@300;400;500;600;700&family=Noto+Sans+KR:wght@300;400;500;600;700&display=swap');

:root, html[data-theme="dark"] {
  --bg:#050505; --bg-2:#0a0a0a; --bg-3:#111111;
  --surface:#0a0a0a; --surface-2:#141414;
  --line:#222222; --line-2:#2a2a2a;
  --accent:#e60000; --accent-2:#b30000;
  --text:#ffffff; --text-2:#d1d5db; --muted:#888888;
  --card:#0a0a0a; --card-line:#222222;
  --header:rgba(5,5,5,0.95); --footer:#020202;
  --hover-bg:#141414;
  --scroll-track:#050505; --scroll-thumb:#333333;
  --ok:#06c755;
}
html[data-theme="light"] {
  --bg:#f9fafb; --bg-2:#ffffff; --bg-3:#f3f4f6;
  --surface:#ffffff; --surface-2:#f3f4f6;
  --line:#e5e7eb; --line-2:#d1d5db;
  --accent:#e60000; --accent-2:#cc0000;
  --text:#111827; --text-2:#374151; --muted:#6b7280;
  --card:#ffffff; --card-line:#e5e7eb;
  --header:rgba(255,255,255,0.95); --footer:#f9fafb;
  --hover-bg:#f3f4f6;
  --scroll-track:#f3f4f6; --scroll-thumb:#d1d5db;
  --ok:#06a84c;
}

* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { font-family:'Prompt','Noto Sans SC','Noto Sans JP','Noto Sans KR',-apple-system,BlinkMacSystemFont,'Segoe UI','Microsoft YaHei','PingFang SC','Hiragino Sans GB',sans-serif; background:var(--bg); color:var(--text); overflow-x:hidden; transition:background .3s,color .3s; }
::-webkit-scrollbar { width:8px; }
::-webkit-scrollbar-track { background:var(--scroll-track); }
::-webkit-scrollbar-thumb { background:var(--scroll-thumb); border-radius:4px; }
.no-scrollbar::-webkit-scrollbar { display:none; }
.no-scrollbar { -ms-overflow-style:none; scrollbar-width:none; }

/* Header */
.header-main { background:var(--header); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:50; backdrop-filter:blur(12px); }
.site-logo { display:block; height:96px; width:auto; max-height:96px; }
.search-bar { background:var(--surface-2); border:1px solid var(--line-2); border-radius:999px; transition:all .2s; }
.search-bar:focus-within { border-color:var(--accent); box-shadow:0 0 0 3px rgba(230,0,0,0.12); }
.search-input { background:transparent; color:var(--text); border:none; outline:none; width:100%; padding:11px 18px; font-size:14px; font-family:inherit; }
.search-input::placeholder { color:var(--muted); }
.search-btn { background:var(--accent); color:#fff; border-radius:999px; padding:8px 20px; font-weight:600; font-size:13px; margin:3px; border:none; cursor:pointer; font-family:inherit; transition:all .2s; }
.search-btn:hover { background:var(--accent-2); }
.header-icon { display:flex; flex-direction:column; align-items:center; gap:2px; color:var(--text-2); transition:color .2s; position:relative; font-size:11px; text-decoration:none; background:none; border:none; cursor:pointer; }
.header-icon:hover { color:var(--accent); }
.header-icon .fa { font-size:19px; margin-bottom:1px; color:var(--text); transition:color .2s; }
.header-icon:hover .fa { color:var(--accent); }
.cart-badge { position:absolute; top:-4px; right:-8px; background:var(--accent); color:#fff; font-size:10px; font-weight:700; min-width:18px; height:18px; border-radius:999px; display:flex; align-items:center; justify-content:center; padding:0 5px; }
.theme-toggle { display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border-radius:999px; background:var(--surface); border:1px solid var(--line); color:var(--text); cursor:pointer; transition:all .2s; font-size:12px; font-weight:600; font-family:inherit; }
.theme-toggle:hover { border-color:var(--accent); }
.theme-toggle .sun { display:none; }
.theme-toggle .moon { display:inline; }
html[data-theme="light"] .theme-toggle .sun { display:inline; }
html[data-theme="light"] .theme-toggle .moon { display:none; }

/* Hero */
.articles-hero {
  background: linear-gradient(135deg, #0a0a0a 0%, #1a0000 50%, #0a0a0a 100%);
  border-bottom: 1px solid var(--line);
  padding: 52px 20px;
  position: relative;
  overflow: hidden;
}
html[data-theme="light"] .articles-hero { background:linear-gradient(135deg,#f3f4f6 0%,#fff0f0 50%,#f3f4f6 100%); }
.articles-hero::before {
  content:'';
  position:absolute; inset:0;
  background: radial-gradient(ellipse at 30% 50%, rgba(230,0,0,.12) 0%, transparent 60%);
  pointer-events:none;
}
.hero-label { display:inline-flex; align-items:center; gap:8px; background:rgba(230,0,0,.15); color:var(--accent); border:1px solid rgba(230,0,0,.3); border-radius:999px; padding:6px 16px; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; margin-bottom:16px; }
.hero-title { font-size:38px; font-weight:800; line-height:1.15; }
.hero-title span { color:var(--accent); }
@media(max-width:640px) { .hero-title { font-size:26px; } }
.hero-sub { font-size:14px; color:var(--muted); margin-top:10px; max-width:480px; line-height:1.6; }
.hero-stats { display:flex; gap:24px; margin-top:20px; flex-wrap:wrap; }
.hero-stat .num { font-size:22px; font-weight:800; color:var(--accent); }
.hero-stat .lbl { font-size:12px; color:var(--muted); }

/* Category nav */
.cat-nav { background:var(--bg-2); border-bottom:1px solid var(--line); }
.cat-nav-inner { display:flex; align-items:center; gap:4px; overflow-x:auto; padding:10px 0; }
.cat-link { padding:10px 18px; color:var(--muted); font-size:13px; white-space:nowrap; transition:all .2s; border-bottom:2px solid transparent; display:inline-flex; align-items:center; gap:6px; text-decoration:none; cursor:pointer; background:none; border-top:none; border-left:none; border-right:none; font-family:inherit; }
.cat-link:hover { color:var(--text); }
.cat-link.active { color:var(--accent); border-bottom-color:var(--accent); font-weight:600; }

/* Section heading */
.s-head { display:inline-flex; align-items:center; gap:10px; font-size:20px; font-weight:800; }

/* Featured article */
.featured-card {
  display:grid; grid-template-columns:1fr 400px; gap:0;
  background:var(--surface); border:1px solid var(--line); border-radius:12px;
  overflow:hidden; cursor:pointer; transition:all .2s;
  margin-bottom:32px; text-decoration:none; color:inherit;
}
@media(max-width:860px) { .featured-card { grid-template-columns:1fr; } }
.featured-card:hover { transform:translateY(-2px); border-color:var(--accent); box-shadow: 0 10px 30px rgba(0,0,0,0.05); }
.featured-img {
  aspect-ratio:16/9; display:flex; align-items:center; justify-content:center;
  position:relative; overflow:hidden;
}
.featured-img .icon-bg { font-size:70px; opacity:.15; }
.featured-img .cat-tag { position:absolute; top:12px; left:12px; background:var(--accent); color:#fff; font-size:11px; font-weight:700; padding:4px 10px; border-radius:4px; text-transform:uppercase; letter-spacing:.04em; }
.featured-img .feat-label { position:absolute; top:12px; right:12px; background:rgba(255,215,0,.2); color:#e6c200; border:1px solid rgba(255,215,0,.3); font-size:11px; font-weight:700; padding:3px 10px; border-radius:4px; }
.featured-body { padding:24px; display:flex; flex-direction:column; justify-content:center; }
.featured-body .title { font-size:22px; font-weight:800; line-height:1.4; color:var(--text); margin-bottom:12px; }
@media(max-width:860px) { .featured-body .title { font-size:18px; } .featured-body { padding:20px; } }
.featured-body .excerpt { font-size:14px; color:var(--text-2); line-height:1.6; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; flex:1; }
.article-meta { display:flex; align-items:center; gap:12px; flex-wrap:wrap; font-size:12px; color:var(--muted); margin-top:16px; border-top:1px solid var(--line); padding-top:16px; }
.article-meta i { color:var(--accent); }
.feat-tag { display:inline-block; padding:3px 10px; border-radius:999px; background:var(--surface-2); color:var(--muted); font-size:11px; }
.read-btn { display:none; }

/* Article card – 2-column, cleaner */
.articles-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:24px; }
@media(max-width:860px) { .articles-grid { grid-template-columns:1fr; } }

.article-card {
  background:var(--surface); border:1px solid var(--line); border-radius:12px;
  overflow:hidden; cursor:pointer; transition:all .2s;
  display:flex; flex-direction:column; animation:fadeInUp .5s ease backwards;
  text-decoration:none; color:inherit;
}
.article-card:hover { transform:translateY(-2px); border-color:var(--accent); box-shadow: 0 10px 30px rgba(0,0,0,0.05); }

.art-img {
  aspect-ratio:16/9; display:flex; align-items:center; justify-content:center;
  position:relative; overflow:hidden;
}
.art-img .art-icon-main { font-size:50px; opacity:.15; }
.art-img .cat-badge { position:absolute; top:10px; left:10px; font-size:10px; font-weight:700; padding:4px 10px; border-radius:4px; color:#fff; text-transform:uppercase; letter-spacing:.04em; }
.art-img .duration-badge { position:absolute; bottom:10px; right:10px; background:rgba(0,0,0,.7); color:#fff; font-size:10px; font-weight:600; padding:3px 8px; border-radius:4px; display:flex; align-items:center; gap:4px; }

.art-body { padding:20px; flex:1; display:flex; flex-direction:column; }
.art-title { font-size:16px; font-weight:800; line-height:1.4; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:44px; color:var(--text); margin-bottom:8px; }
.art-excerpt { font-size:13px; color:var(--text-2); line-height:1.6; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; flex:1; }
.art-tags { display:none; }
.art-footer { display:flex; align-items:center; gap:10px; margin-top:16px; padding-top:16px; border-top:1px solid var(--line); }
.author-ava { width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; color:#fff; flex:none; }
.views-chip { display:inline-flex; align-items:center; gap:4px; font-size:11px; color:var(--muted); white-space:nowrap; }

/* Search bar in articles */
.art-search { background:var(--surface-2); border:1px solid var(--line); border-radius:999px; display:flex; align-items:center; max-width:400px; transition:all .2s; }
.art-search:focus-within { border-color:var(--accent); box-shadow:0 0 0 3px rgba(230,0,0,.1); }
.art-search input { background:transparent; border:none; outline:none; padding:9px 16px; font-size:13px; color:var(--text); font-family:inherit; width:100%; }
.art-search input::placeholder { color:var(--muted); }
.art-search button { background:none; border:none; color:var(--muted); padding:9px 14px; cursor:pointer; transition:color .2s; }
.art-search button:hover { color:var(--accent); }

/* Tag chips (sidebar) */
.tag-chip { padding:5px 12px; border-radius:999px; border:1px solid var(--line); background:var(--bg-3); color:var(--text-2); font-size:12px; cursor:pointer; transition:all .2s; font-family:inherit; }
.tag-chip:hover { border-color:var(--accent); color:var(--accent); background:var(--surface-2); }

/* Newsletter */
.newsletter-box {
  background: linear-gradient(135deg, rgba(230,0,0,.08), rgba(139,0,0,.06));
  border: 1px solid rgba(230,0,0,.2); border-radius: 16px;
  padding: 32px; text-align: center; margin: 48px 0 0;
}
.nl-title { font-size:20px; font-weight:800; }
.nl-sub { font-size:13px; color:var(--muted); margin-top:8px; }
.nl-form { display:flex; gap:10px; max-width:440px; margin:18px auto 0; }
.nl-input { flex:1; background:var(--surface-2); border:1px solid var(--line); border-radius:10px; padding:12px 16px; color:var(--text); font-size:14px; font-family:inherit; outline:none; transition:border-color .2s; }
.nl-input:focus { border-color:var(--accent); }
.nl-btn { background:var(--accent); color:#fff; border:none; border-radius:10px; padding:12px 22px; font-size:14px; font-weight:700; cursor:pointer; font-family:inherit; transition:all .2s; white-space:nowrap; }
.nl-btn:hover { background:var(--accent-2); }
@media(max-width:500px) { .nl-form { flex-direction:column; } }

/* Popular sidebar */
.popular-item { display:flex; align-items:flex-start; gap:12px; padding:12px 0; border-bottom:1px solid var(--line); cursor:pointer; transition:all .2s; text-decoration:none; color:inherit; }
.popular-item:last-child { border-bottom:none; }
.popular-item:hover .pop-title { color:var(--accent); }
.pop-rank { font-size:22px; font-weight:800; color:var(--accent); opacity:.35; width:28px; flex:none; line-height:1; }
.pop-thumb { width:56px; height:56px; border-radius:8px; display:flex; align-items:center; justify-content:center; flex:none; font-size:18px; opacity:.65; }
.pop-title { font-size:12px; font-weight:600; line-height:1.45; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; transition:color .2s; color:var(--text); }
.pop-meta { font-size:11px; color:var(--muted); margin-top:4px; }

/* Layout */
.articles-layout { display:grid; grid-template-columns:1fr 300px; gap:32px; max-width:1200px; margin:0 auto; padding:32px 20px 60px; }
@media(max-width:1024px) { .articles-layout { grid-template-columns:1fr; } .sidebar { display:none; } }

/* Pagination */
.pagination { display:flex; align-items:center; justify-content:center; gap:8px; margin-top:36px; }
.page-btn { width:36px; height:36px; border-radius:8px; border:1px solid var(--line); background:var(--surface-2); color:var(--text); display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:13px; transition:all .18s; font-family:inherit; }
.page-btn:hover, .page-btn.active { background:var(--accent); color:#fff; border-color:var(--accent); }
.page-btn:disabled { opacity:.35; cursor:not-allowed; }

/* Toast */
.toast { position:fixed; bottom:24px; right:24px; z-index:9999; background:#1a1a1a; color:#fff; border-radius:12px; padding:14px 20px; display:flex; align-items:center; gap:10px; font-size:14px; box-shadow:0 8px 32px rgba(0,0,0,.4); transform:translateY(80px); opacity:0; transition:all .35s; pointer-events:none; border:1px solid #2a2a2a; }
.toast.show { transform:translateY(0); opacity:1; pointer-events:auto; }
.toast .icon { color:var(--accent); font-size:16px; }
html[data-theme="light"] .toast { background:#fff; color:#111; border:1px solid #e5e7eb; }

/* Footer */
footer { background:var(--footer); border-top:1px solid var(--line); padding:32px 20px 20px; }
.footer-logo { display:block; height:70px; width:auto; max-height:70px; }
.footer-link { color:var(--muted); font-size:13px; transition:color .2s; text-decoration:none; display:block; margin-bottom:6px; }
.footer-link:hover { color:var(--accent); }
.footer-title { font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--text); margin-bottom:12px; }
@media(max-width:768px) { .footer-grid { grid-template-columns:1fr 1fr !important; } }
@media(max-width:480px) { .footer-grid { grid-template-columns:1fr !important; } }

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