/* ═══════════════════════════════
   SEKAI LOG v8 — 共通スタイル
═══════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Zen+Antique+Soft&display=swap');

:root {
  --ink: #13131a;
  --ink2: #1a1a24;
  --paper: #ede8df;
  --paper2: #c8c2b4;
  --accent: #c8102e;
  --accent2: #e8203e;
  --muted: #7a7468;
  --glow: #7b2fff;
  --card: #1c1c26;
  --border: rgba(237,232,223,0.09);
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  background:var(--ink);
  color:var(--paper);
  font-family:'Noto Serif JP',serif;
  overflow-x:hidden;
  line-height:1.7;
}
body::before {
  content:'';
  position:fixed; inset:0;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E");
  pointer-events:none; z-index:9999; opacity:0.5;
}

/* ── HEADER ── */
header {
  position:fixed; top:0; left:0; right:0; z-index:200;
  display:flex; align-items:center; justify-content:space-between;
  padding:1.1rem 3rem;
  border-bottom:1px solid var(--border);
  backdrop-filter:blur(16px);
  background:rgba(19,19,26,0.92);
}
.logo {
  font-family:'Space Mono',monospace;
  font-size:1.05rem; letter-spacing:0.25em;
  color:var(--paper); text-decoration:none;
  display:flex; align-items:center; gap:0.7rem;
}
.logo-dot {
  width:7px; height:7px;
  background:var(--accent); border-radius:50%;
  animation:pulse 2s ease infinite;
}
@keyframes pulse { 0%,100%{opacity:1;transform:scale(1);} 50%{opacity:0.4;transform:scale(0.6);} }

/* ── NAV ── */
.main-nav { display:flex; gap:0; list-style:none; }
.nav-item { position:relative; }
.nav-item > a {
  font-family:'Noto Serif JP',serif;
  font-size:0.8rem; letter-spacing:0.1em;
  color:var(--paper2); text-decoration:none;
  padding:0.6rem 1rem;
  display:flex; align-items:center; gap:0.3rem;
  transition:color 0.2s;
  white-space:nowrap;
}
.nav-item > a:hover,
.nav-item:hover > a { color:var(--paper); }
.caret { font-size:0.5rem; opacity:0.5; transition:transform 0.25s; }
.nav-item:hover > a .caret { transform:rotate(180deg); }

.dropdown {
  display:none; position:absolute; top:100%; left:0;
  min-width:180px;
  background:rgba(19,19,26,0.98);
  border:1px solid var(--border);
  border-top:2px solid var(--accent);
  padding:0.4rem 0; z-index:300;
}
.nav-item:hover .dropdown { display:block; }
.dropdown a {
  display:block;
  font-family:'Space Mono',monospace;
  font-size:0.68rem; letter-spacing:0.1em;
  color:var(--muted); text-decoration:none;
  padding:0.65rem 1.2rem;
  transition:all 0.2s;
  border-left:2px solid transparent;
}
.dropdown a:hover { color:var(--paper); background:rgba(237,232,223,0.04); border-left-color:var(--accent); padding-left:1.5rem; }
.dropdown-divider { height:1px; background:var(--border); margin:0.3rem 0; }

/* 検索アイコン */
.nav-search {
  font-family:'Space Mono',monospace; font-size:0.8rem;
  color:var(--paper2); text-decoration:none;
  padding:0.6rem 0.8rem; transition:color 0.2s;
  display:flex; align-items:center;
}
.nav-search:hover { color:var(--paper); }

/* ── ハンバーガー ── */
.nav-toggle {
  display:none; flex-direction:column; gap:5px;
  cursor:pointer; background:none; border:none; padding:6px; z-index:9100;
}
.nav-toggle span { display:block; width:24px; height:1.5px; background:var(--paper); transition:all 0.3s; }

/* ── カテゴリ横断ナビ ── */
.cat-nav {
  display:flex; overflow-x:auto; gap:0;
  border-bottom:1px solid var(--border);
  background:rgba(19,19,26,0.9);
  position:sticky; top:57px; z-index:100;
  scrollbar-width:none;
}
.cat-nav::-webkit-scrollbar { display:none; }
.cat-nav a {
  font-family:'Space Mono',monospace; font-size:0.65rem; letter-spacing:0.15em;
  color:var(--muted); text-decoration:none;
  padding:0.75rem 1.3rem; white-space:nowrap;
  border-bottom:2px solid transparent; transition:all 0.2s; flex-shrink:0;
}
.cat-nav a:hover { color:var(--paper); }
.cat-nav a.active { color:var(--paper); border-bottom-color:var(--accent); }

/* ── PAGE HERO ── */
.page-hero {
  padding:10rem 3rem 5rem;
  border-bottom:1px solid var(--border);
  position:relative; overflow:hidden;
}
.page-hero::before {
  content:''; position:absolute; inset:0;
  background-image:linear-gradient(var(--border) 1px,transparent 1px),linear-gradient(90deg,var(--border) 1px,transparent 1px);
  background-size:80px 80px; pointer-events:none;
}
.page-hero-label {
  font-family:'Space Mono',monospace; font-size:0.68rem; letter-spacing:0.3em;
  color:var(--accent); margin-bottom:1.5rem;
  display:flex; align-items:center; gap:1rem;
}
.page-hero-label::before { content:''; display:block; width:40px; height:1px; background:var(--accent); }
.page-hero-title {
  font-family:'Shippori Mincho',serif;
  font-size:clamp(2.5rem,5vw,5rem); font-weight:700; line-height:1.1; margin-bottom:1.5rem;
}
.page-hero-title .accent { color:var(--accent); }
.page-hero-sub { font-size:0.92rem; line-height:2.1; color:var(--paper2); max-width:600px; }

/* ── SECTION ── */
.section { padding:5rem 3rem; max-width:1400px; margin:0 auto; }
.section-header {
  display:flex; align-items:baseline; gap:2rem; margin-bottom:3rem;
  border-bottom:1px solid var(--border); padding-bottom:1.5rem; flex-wrap:wrap;
}
.section-title { font-family:'Shippori Mincho',serif; font-size:1.8rem; font-weight:700; letter-spacing:0.05em; }
.section-en { font-family:'Space Mono',monospace; font-size:0.65rem; letter-spacing:0.3em; color:var(--accent); }

/* ── ARTICLE CARDS ── */
.articles-grid {
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:1px; background:var(--border);
}
.article-card {
  background:var(--card); padding:2rem;
  cursor:pointer; transition:background 0.25s;
  text-decoration:none; color:inherit;
  display:flex; flex-direction:column; gap:0.9rem;
  position:relative; overflow:hidden;
}
.article-card::before {
  content:''; position:absolute; top:0; left:0; width:3px; height:0;
  background:var(--accent); transition:height 0.35s ease;
}
.article-card:hover { background:#222230; }
.article-card:hover::before { height:100%; }
.article-tag { font-family:'Space Mono',monospace; font-size:0.62rem; letter-spacing:0.2em; color:var(--accent); }
.article-title { font-family:'Shippori Mincho',serif; font-size:1.05rem; font-weight:700; line-height:1.65; color:var(--paper); }
.article-excerpt { font-size:0.82rem; line-height:1.95; color:var(--paper2); flex:1; }
.article-meta { font-family:'Space Mono',monospace; font-size:0.6rem; letter-spacing:0.1em; color:var(--muted); display:flex; gap:1rem; }

/* ── FILTER ── */
.filter-bar { display:flex; gap:0.5rem; flex-wrap:wrap; margin-bottom:3rem; }
.filter-btn {
  font-family:'Space Mono',monospace; font-size:0.65rem; letter-spacing:0.2em;
  color:var(--muted); background:none; border:1px solid rgba(237,232,223,0.15);
  padding:0.5rem 1.2rem; cursor:pointer; transition:all 0.2s;
}
.filter-btn:hover, .filter-btn.active { color:var(--paper); border-color:var(--accent); background:rgba(200,16,46,0.1); }

/* ── FOOTER ── */
footer {
  border-top:1px solid var(--border); padding:3rem;
  display:flex; justify-content:space-between; align-items:center;
  max-width:1400px; margin:0 auto; flex-wrap:wrap; gap:1.5rem;
}
.footer-copy { font-family:'Space Mono',monospace; font-size:0.62rem; letter-spacing:0.15em; color:var(--muted); }
.footer-links { display:flex; gap:2rem; flex-wrap:wrap; }
.footer-links a { font-family:'Space Mono',monospace; font-size:0.62rem; letter-spacing:0.15em; color:var(--muted); text-decoration:none; transition:color 0.2s; }
.footer-links a:hover { color:var(--paper); }

/* ── ANIMATIONS ── */
@keyframes fadeUp { from{opacity:0;transform:translateY(28px);}to{opacity:1;transform:translateY(0);} }
@keyframes fadeIn { from{opacity:0;}to{opacity:1;} }
.reveal { opacity:0; transform:translateY(20px); transition:opacity 0.65s ease,transform 0.65s ease; }
.reveal.visible { opacity:1; transform:none; }

/* ── RESPONSIVE ── */
@media(max-width:768px){
  header { padding:1rem 1.5rem; }
  .main-nav {
    display:none; position:fixed;
    top:0; left:0; right:0; bottom:0;
    background:#13131a;
    flex-direction:column; align-items:stretch; justify-content:flex-start;
    overflow-y:auto; z-index:9000; padding:5rem 0 2rem;
  }
  .main-nav.open { display:flex; }
  .main-nav .nav-item { border-bottom:1px solid var(--border); }
  .main-nav .nav-item > a { font-size:1.05rem; color:var(--paper); padding:1rem 2rem; justify-content:space-between; }
  .dropdown { position:static; border:none; background:rgba(237,232,223,0.03); padding:0; display:none; border-top:1px solid var(--border); }
  .dropdown.open { display:block; }
  .dropdown a { padding:0.8rem 2.5rem; font-size:0.75rem; border-left:none; border-bottom:1px solid rgba(237,232,223,0.04); }
  .dropdown a:hover { padding-left:3rem; }
  .nav-item:hover .dropdown { display:none; }
  .nav-toggle { display:flex; }
  .nav-toggle.open span:nth-child(1){transform:translateY(6px) rotate(45deg);}
  .nav-toggle.open span:nth-child(2){opacity:0;}
  .nav-toggle.open span:nth-child(3){transform:translateY(-6px) rotate(-45deg);}
  .page-hero { padding:7rem 1.5rem 3rem; }
  .section { padding:3rem 1.5rem; }
  .articles-grid { grid-template-columns:1fr; }
  .cat-nav { top:53px; }
  footer { padding:2rem 1.5rem; }
}
@media(max-width:480px){
  .section { padding:2.5rem 1.2rem; }
  footer { padding:2rem 1.2rem; }
  .page-hero { padding:6rem 1.2rem 2.5rem; }
}