/* ============================================================
   STYLE.CSS — SCP/SF Blog Main Styles
   ============================================================ */

/* ── GLOBAL RESET ──
   box-sizing: border-box を全要素に適用して
   padding + width の計算によるはみ出しを防ぐ */
*, *::before, *::after { box-sizing: border-box; }
img, video, iframe { max-width: 100%; height: auto; }
canvas { max-width: 100%; }

/* ── TYPOGRAPHY ── */
h1,h2,h3,h4,h5,h6 {
  font-family: var(--font-mono);
  letter-spacing: 0.05em;
  line-height: 1.3;
  color: var(--text-primary);
}
.section-label {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  border-left: 2px solid var(--accent);
  padding-left: 0.6em;
  margin-bottom: 0.5rem;
}
.mono { font-family: var(--font-mono); }

/* ── LAYOUT ── */
.container { max-width: 1400px; margin: 0 auto; padding: 0 1.5rem; }
.layout-grid {
  display: grid;
  grid-template-columns: 1fr var(--sidebar-w);
  gap: 2rem;
  align-items: start;
  margin-top: 2rem;
}
@media (max-width: 1024px) {
  .layout-grid { grid-template-columns: 1fr; }
  .sidebar { display: none; }
  .sidebar.open { display: block; }
}

/* ── HEADER ── */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--header-h);
  z-index: 1000;
  background: var(--header-bg);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.header-inner {
  height: 100%;
  display: flex;
  align-items: center;
  gap: 1.5rem;
}
.logo {
  display: flex;
  flex-direction: column;
  gap: 0px;
  flex-shrink: 0;
  text-decoration: none;
}
.logo-mark {
  font-family: var(--font-mono);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: 0.08em;
  line-height: 1;
}
.logo-sub {
  font-family: var(--font-mono);
  font-size: 0.45rem;
  letter-spacing: 0.25em;
  color: var(--text-muted);
  text-transform: uppercase;
  line-height: 1;
}
.logo-mark .bracket { color: var(--accent-warn); }

/* Main nav */
.main-nav { display: flex; align-items: center; gap: 0; flex: 1; }
.nav-items {
  display: flex;
  list-style: none;
  gap: 0;
  position: relative;
}
.nav-item { position: relative; }
.nav-link {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0 1rem;
  height: var(--header-h);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-secondary);
  text-decoration: none;
  transition: color var(--transition);
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  background: none;
  border-left: none;
  border-right: none;
  border-top: none;
  cursor: pointer;
}
.nav-link:hover, .nav-link.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
.nav-link .arrow {
  font-size: 0.55rem;
  transition: transform var(--transition);
}
.nav-item:hover .arrow { transform: rotate(180deg); }

/* Mega Menu */
.mega-menu {
  display: none;
  position: absolute;
  top: calc(var(--header-h) - 2px);
  left: 0;
  min-width: 680px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-top: 2px solid var(--accent);
  box-shadow: var(--shadow);
  z-index: 200;
  padding: 1.5rem;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}
.nav-item:hover .mega-menu { display: grid; }
.mega-col-title {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--border);
}
.mega-col ul { list-style: none; }
.mega-col ul li a {
  font-size: 0.82rem;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0;
  transition: color var(--transition), padding-left var(--transition);
}
.mega-col ul li a:hover {
  color: var(--accent);
  padding-left: 0.4rem;
}
.mega-col ul li a::before {
  content: '▶';
  font-size: 0.5rem;
  color: var(--accent);
}

/* Header right */
.header-right {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-left: auto;
}
.lang-switcher, .theme-switcher {
  display: flex;
  align-items: center;
  gap: 2px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 2px;
}
.lang-btn, .theme-btn {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  padding: 0.3rem 0.5rem;
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: 2px;
  transition: all var(--transition);
}
.lang-btn.active, .theme-btn.active {
  background: var(--accent);
  color: #000;
  font-weight: 700;
}
.lang-btn:hover:not(.active), .theme-btn:hover:not(.active) {
  color: var(--accent);
}
.cta-btn {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.45rem 1rem;
  background: var(--accent);
  color: #000;
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  font-weight: 700;
  transition: all var(--transition);
  white-space: nowrap;
}
.cta-btn:hover {
  background: var(--accent-2);
  box-shadow: var(--glow);
}
.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: 0.5rem;
  background: none;
  border: none;
}
.hamburger span {
  width: 22px; height: 2px;
  background: var(--text-primary);
  transition: all var(--transition);
  display: block;
}
.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@media (max-width: 1024px) { .hamburger { display: flex; } .nav-items { display: none; } }

/* Mobile menu */
.mobile-menu {
  display: none;
  position: fixed;
  top: var(--header-h);
  left: 0; right: 0;
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-accent);
  z-index: 1001;
  padding: 1.5rem;
  max-height: calc(100vh - var(--header-h));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.mobile-menu.open { display: block; }

/* ── モバイルナビ共通 ── */
.mobile-menu .mobile-nav-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.mobile-menu .mobile-nav-list > li {
  list-style: none;
}
.mobile-menu .mobile-nav-list > li > a {
  display: block;
  padding: 0.8rem 0;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border);
  text-decoration: none;
}
.mobile-menu .mobile-nav-list > li > a:hover { color: var(--accent); }

/* ── 「記事」などのセクションラベル ── */
.mobile-menu .mobile-nav-section-label {
  display: block;
  padding: 0.75rem 0;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--accent);
  letter-spacing: 0.1em;
  border-bottom: 1px solid var(--border);
  font-weight: 700;
}

/* ── カテゴリーサブリスト（○なし・インデント） ── */
.mobile-menu .mobile-nav-sublist {
  list-style: none;
  padding: 0;
  margin: 0;
}
.mobile-menu .mobile-nav-sublist li {
  list-style: none !important;
  list-style-type: none !important;
}
.mobile-menu .mobile-nav-sublist li::marker { display: none; content: ''; }
.mobile-menu .mobile-nav-sublist .mobile-nav-sublink {
  display: block;
  padding: 0.5rem 0.5rem 0.5rem 1.5rem;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border);
  text-decoration: none;
}
.mobile-menu .mobile-nav-sublist .mobile-nav-sublink:hover { color: var(--accent); }

/* ── BREADCRUMBS ── */
.breadcrumbs {
  margin-top: calc(var(--header-h) + 1rem);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  padding: 0 0 0.5rem;
  border-bottom: 1px solid var(--border);
}
.breadcrumbs ol { list-style: none; display: flex; gap: 0.5rem; flex-wrap: wrap; }
.breadcrumbs li::after { content: ' /'; margin-left: 0.5rem; }
.breadcrumbs li:last-child::after { content: ''; }
.breadcrumbs li a { color: var(--text-muted); }
.breadcrumbs li a:hover { color: var(--accent); }
.breadcrumbs li:last-child { color: var(--accent); }

/* ── HERO ── */
.hero {
  min-height: 520px;
  background: var(--hero-bg);
  display: flex;
  align-items: center;
  padding: calc(var(--header-h) + 3rem) 0 4rem;
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(90deg, rgba(0,229,255,0.03) 0px, rgba(0,229,255,0.03) 1px, transparent 1px, transparent 60px),
    repeating-linear-gradient(0deg, rgba(0,229,255,0.03) 0px, rgba(0,229,255,0.03) 1px, transparent 1px, transparent 60px);
  pointer-events: none;
}
[data-theme="light"] .hero::before {
  background:
    repeating-linear-gradient(90deg, rgba(163,0,0,0.05) 0px, rgba(163,0,0,0.05) 1px, transparent 1px, transparent 60px),
    repeating-linear-gradient(0deg, rgba(163,0,0,0.05) 0px, rgba(163,0,0,0.05) 1px, transparent 1px, transparent 60px);
}
.hero-corner {
  position: absolute;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  color: var(--accent);
  opacity: 0.5;
  letter-spacing: 0.1em;
}
.hero-corner.tl { top: 1.5rem; left: 1.5rem; }
.hero-corner.tr { top: 1.5rem; right: 1.5rem; text-align: right; }
.hero-corner.bl { bottom: 1.5rem; left: 1.5rem; }
.hero-corner.br { bottom: 1.5rem; right: 1.5rem; }
.hero-content-box {
  background: var(--glass-bg);
  border: 1px solid var(--border-accent);
  border-left: 3px solid var(--accent);
  padding: 2.5rem 3rem;
  max-width: 680px;
  position: relative;
}
.hero-badge {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--accent-warn);
  background: rgba(255,60,60,0.1);
  border: 1px solid rgba(255,60,60,0.3);
  display: inline-block;
  padding: 0.2rem 0.6rem;
  margin-bottom: 1rem;
}
.hero-title {
  font-family: var(--font-mono);
  font-size: clamp(1.8rem, 4vw, 3rem);
  font-weight: 700;
  line-height: 1.15;
  margin-bottom: 1rem;
  color: var(--text-primary);
}
.hero-title .glitch {
  position: relative;
  display: inline-block;
  color: var(--accent);
}
.hero-title .glitch::before,
.hero-title .glitch::after {
  content: attr(data-text);
  position: absolute;
  top: 0; left: 0;
  width: 100%;
}
.hero-title .glitch::before {
  color: var(--accent-warn);
  clip-path: polygon(0 30%, 100% 30%, 100% 50%, 0 50%);
  animation: glitch1 3.5s infinite;
}
.hero-title .glitch::after {
  color: var(--accent-2);
  clip-path: polygon(0 60%, 100% 60%, 100% 75%, 0 75%);
  animation: glitch2 3.5s infinite;
}
@keyframes glitch1 {
  0%,90%,100% { transform: translate(0); opacity: 0; }
  91% { transform: translate(-3px, 1px); opacity: 0.8; }
  93% { transform: translate(3px, -1px); opacity: 0.8; }
  95% { transform: translate(0); opacity: 0; }
}
@keyframes glitch2 {
  0%,92%,100% { transform: translate(0); opacity: 0; }
  93% { transform: translate(3px, 2px); opacity: 0.7; }
  95% { transform: translate(-2px, -1px); opacity: 0.7; }
  97% { transform: translate(0); opacity: 0; }
}
.hero-desc {
  font-size: 0.92rem;
  color: var(--text-secondary);
  margin-bottom: 2rem;
  line-height: 1.8;
}
.hero-actions { display: flex; gap: 1rem; flex-wrap: wrap; }
.btn-primary {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 0.75rem 1.5rem;
  background: var(--accent);
  color: #000;
  border: none;
  cursor: pointer;
  font-weight: 700;
  transition: all var(--transition);
  clip-path: polygon(8px 0%, 100% 0%, calc(100% - 8px) 100%, 0% 100%);
}
.btn-primary:hover { background: var(--accent-2); box-shadow: var(--glow); }
.btn-secondary {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 0.75rem 1.5rem;
  background: transparent;
  color: var(--accent);
  border: 1px solid var(--accent);
  cursor: pointer;
  transition: all var(--transition);
}
.btn-secondary:hover {
  background: rgba(0,229,255,0.08);
  box-shadow: var(--glow-sm);
}
/* Ticker */
.hero-ticker {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  background: var(--accent);
  color: #000;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.15em;
  padding: 0.3rem 0;
  overflow: hidden;
  white-space: nowrap;
}
.ticker-inner {
  display: inline-block;
  animation: ticker 30s linear infinite;
}
@keyframes ticker { from { transform: translateX(100vw); } to { transform: translateX(-100%); } }

/* ── MAIN CONTENT ── */
.page-body { margin-top: 2rem; padding-bottom: 4rem; }

/* ── TABS ── */
.tab-nav {
  display: flex;
  gap: 0;
  border-bottom: 2px solid var(--border);
  margin-bottom: 1.5rem;
}
.tab-btn {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.7rem 1.2rem;
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: all var(--transition);
}
.tab-btn.active { color: var(--accent); border-bottom-color: var(--accent); }
.tab-btn:hover:not(.active) { color: var(--text-secondary); }
.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* ── STATS CARDS ── */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1rem;
  margin-bottom: 2rem;
}
.stat-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-top: 2px solid var(--accent);
  padding: 1.2rem;
  position: relative;
  overflow: hidden;
}
.stat-card::after {
  content: '';
  position: absolute;
  bottom: 0; right: 0;
  width: 40px; height: 40px;
  border-left: 40px solid transparent;
  border-bottom: 40px solid var(--border);
  opacity: 0.3;
}
.stat-label {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 0.4rem;
}
.stat-value {
  font-family: var(--font-mono);
  font-size: 2rem;
  font-weight: 700;
  color: var(--accent);
  line-height: 1;
}
.stat-unit {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: 0.2rem;
}

/* ── CARD LAYOUT ── */
.section-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 1.25rem;
}
.section-title {
  font-family: var(--font-mono);
  font-size: 0.95rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.section-title::before {
  content: '//';
  color: var(--accent);
  font-size: 0.8rem;
}
.see-all {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--badge-bg);
  -webkit-appearance: none;
  appearance: none;
  border: 1px solid var(--accent);
  padding: 0.2em 0.7em;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  line-height: 1.8;
  transition: background var(--transition), color var(--transition);
}
body.sf-loading-active {
  overflow: hidden;
}
.see-all:hover {
  color: var(--bg-primary);
  background: var(--accent);
  border-color: var(--accent);
}

/* Articles Grid */
.articles-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
  margin-bottom: 2rem;
  align-items: stretch;
}
@media (max-width: 768px) { .articles-grid { grid-template-columns: 1fr; } }
.articles-grid .article-card {
  margin-bottom: 0;
  display: flex;
  flex-direction: column;
}
.articles-grid .article-card .card-body { flex: 1; }

.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  margin-bottom: 1.25rem;
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
  position: relative;
  overflow: hidden;
}
.card:hover {
  border-color: var(--border-accent);
  box-shadow: var(--glow);
  transform: translateY(-2px);
}
.card-thumb {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  background: var(--bg-tertiary);
  position: relative;
  overflow: hidden;
}
.card-thumb-placeholder {
  width: 100%;
  aspect-ratio: 16/9;
  background: linear-gradient(135deg, var(--bg-tertiary) 0%, var(--bg-secondary) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.card-thumb-placeholder::before {
  content: attr(data-cat);
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  opacity: 0.4;
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  font-size: 0.7rem;
}
/* 関連記事：サムネイルあり用クリーンラッパー */
.card-thumb-area {
  width: 100%;
  aspect-ratio: 16/9;
  overflow: hidden;
  background-color: var(--bg-tertiary);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
}
.card-related-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.card-thumb-area > div {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.card-thumb-placeholder .thumb-grid {
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(90deg, var(--border) 0px, var(--border) 1px, transparent 1px, transparent 40px),
    repeating-linear-gradient(0deg, var(--border) 0px, var(--border) 1px, transparent 1px, transparent 40px);
  opacity: 0.4;
}
/* img が存在するとき thumb-grid を非表示（兄弟セレクタ：全ブラウザ対応） */
.card-thumb-placeholder img.card-thumb ~ .thumb-grid {
  display: none !important;
}
.card-body { padding: 1.1rem; }
.card-meta {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.5rem;
  flex-wrap: wrap;
}
.card-category {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--badge-bg);
  padding: 0.15rem 0.5rem;
  border: 1px solid var(--border-accent);
}
.card-date {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  color: var(--text-muted);
}
.card-title {
  font-family: var(--font-mono);
  font-size: 0.88rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--text-primary);
  margin-bottom: 0.5rem;
  transition: color var(--transition);
}
.card:hover .card-title { color: var(--accent); }
.card-excerpt {
  font-size: 0.8rem;
  color: var(--text-secondary);
  line-height: 1.7;
  margin-bottom: 0.75rem;
}
.card-tags { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.tag {
  font-family: var(--font-mono);
  font-size: 0.55rem;
  letter-spacing: 0.1em;
  padding: 0.15rem 0.45rem;
  background: var(--tag-bg);
  color: var(--tag-color);
  border: 1px solid var(--border);
  border-radius: 2px;
  text-decoration: none;
  transition: background var(--transition), color var(--transition);
}
.tag:hover { background: var(--tag-bg); color: var(--accent); }
.tag:focus-visible { outline: 1px solid var(--accent); outline-offset: 2px; }
.badge {
  font-family: var(--font-mono);
  font-size: 0.55rem;
  letter-spacing: 0.08em;
  padding: 0.15rem 0.45rem;
  border-radius: 20px;
  background: var(--badge-bg);
  color: var(--badge-color);
}
.badge.new { background: rgba(255,60,60,0.12); color: var(--accent-warn); }
.badge.hot { background: rgba(255,193,7,0.12); color: var(--accent-yellow); }

/* Card SCP number label */
.card-num {
  position: absolute;
  top: 0.5rem; right: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.55rem;
  color: var(--text-muted);
  letter-spacing: 0.1em;
  background: var(--overlay-bg);
  padding: 0.1rem 0.4rem;
}

/* ── SKELETON SCREEN ── */
.skeleton-grid {
  columns: 2;
  column-gap: 1.25rem;
  margin-bottom: 2rem;
}
@media (max-width: 768px) { .skeleton-grid { columns: 1; } }
.skeleton-card {
  break-inside: avoid;
  background: var(--bg-card);
  border: 1px solid var(--border);
  margin-bottom: 1.25rem;
  padding: 0;
  overflow: hidden;
}
.skel {
  background: linear-gradient(90deg, var(--skeleton-from) 25%, var(--skeleton-to) 50%, var(--skeleton-from) 75%);
  background-size: 400% 100%;
  animation: shimmer 1.6s infinite;
  border-radius: 2px;
}
@keyframes shimmer {
  0% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
.skel-thumb { width: 100%; height: 140px; }
.skel-body { padding: 1rem; }
.skel-line { height: 10px; margin-bottom: 0.5rem; }
.skel-line.w80 { width: 80%; }
.skel-line.w60 { width: 60%; }
.skel-line.w40 { width: 40%; }
.skel-line.h20 { height: 20px; margin-bottom: 0.7rem; }

/* ── CHARTS ── */
.charts-section { margin-bottom: 2.5rem; }
.charts-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}
@media (max-width: 768px) { .charts-grid { grid-template-columns: 1fr; } }
.chart-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  padding: 1.25rem;
}
.chart-title {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.chart-title::before { content: '◈'; color: var(--accent); }
.chart-canvas-wrap { position: relative; height: 220px; }

/* ── SKILLS ── */
.skills-section { margin-bottom: 2.5rem; }
.skills-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  margin-bottom: 1.5rem;
}
.skills-table th {
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 0.6rem 0.8rem;
  border-bottom: 2px solid var(--accent);
  text-align: left;
}
.skills-table td {
  padding: 0.7rem 0.8rem;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.skills-table tr:hover td { background: var(--bg-tertiary); }
.skill-rank {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px; height: 24px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  border-radius: 2px;
}
.rank-s { background: rgba(255,107,53,0.15); color: var(--rank-s); border: 1px solid var(--rank-s); }
.rank-a { background: rgba(0,229,255,0.1); color: var(--rank-a); border: 1px solid var(--rank-a); }
.rank-b { background: rgba(0,255,136,0.1); color: var(--rank-b); border: 1px solid var(--rank-b); }
.rank-c { background: rgba(255,225,0,0.1); color: var(--rank-c); border: 1px solid var(--rank-c); }
.rank-d { background: rgba(136,153,170,0.1); color: var(--rank-d); border: 1px solid var(--rank-d); }
.skill-bar-wrap {
  width: 120px;
  height: 6px;
  background: var(--border);
  border-radius: 3px;
  overflow: hidden;
}
.skill-bar {
  height: 100%;
  background: var(--accent);
  border-radius: 3px;
  transition: width 1s ease;
}

/* ── CALENDAR improved ── */
.calendar-widget {
  background: var(--bg-card);
  border: 1px solid var(--border);
  padding: 1.25rem;
  margin-bottom: 2.5rem;
}
.cal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}
.cal-title {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  color: var(--text-primary);
}
.cal-nav-btn {
  background: none;
  border: 1px solid var(--border);
  color: var(--text-secondary);
  width: 28px; height: 28px;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  transition: all var(--transition);
}
.cal-nav-btn:hover { border-color: var(--accent); color: var(--accent); }
.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
  margin-bottom: 0.75rem;
}
.cal-dow {
  font-family: var(--font-mono);
  font-size: 0.55rem;
  letter-spacing: 0.1em;
  text-align: center;
  color: var(--text-muted);
  padding: 0.3rem 0;
  text-transform: uppercase;
}
.cal-day {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-align: center;
  padding: 0.45rem 0.2rem 0.25rem;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--transition);
  position: relative;
  border: 1px solid transparent;
  border-radius: 2px;
  line-height: 1.2;
}
.cal-day:hover { color: var(--accent); border-color: var(--border-accent); background: var(--badge-bg); }
.cal-day.today {
  background: var(--accent);
  color: #000;
  font-weight: 700;
  border-color: var(--accent);
  box-shadow: var(--glow-sm);
}
.cal-day.today .cal-post-dot { background: #000; }
.cal-day.has-post { color: var(--accent-2); font-weight: 700; border-color: rgba(0,255,136,0.25); background: rgba(0,255,136,0.06); }
[data-theme="light"] .cal-day.has-post { color: var(--accent-2); background: rgba(0,53,128,0.07); border-color: rgba(0,53,128,0.2); }
[data-theme="purple"] .cal-day.has-post { color: #44ffcc; border-color: rgba(68,255,204,0.3); }
[data-theme="black"] .cal-day.has-post { color: var(--accent-2); border-color: rgba(157,255,176,0.3); background: rgba(157,255,176,0.06); }
.cal-post-dot {
  display: block;
  width: 5px; height: 5px;
  background: var(--accent-2);
  border-radius: 50%;
  margin: 2px auto 0;
}
.cal-day.empty { color: var(--text-muted); opacity: 0.25; cursor: default; border: none; }
.cal-day.empty:hover { background: none; border: none; }
.cal-day[data-has-post="true"] { cursor: pointer; }
.cal-day.has-post:hover {
  color: var(--accent-2);
  border-color: var(--accent-2);
  background: rgba(0,255,136,0.12);
  box-shadow: 0 0 6px rgba(0,255,136,0.2);
}
.cal-day.today[data-has-post="true"]:hover {
  box-shadow: var(--glow-sm);
  opacity: 0.9;
}

/* Calendar legend */
.cal-legend {
  display: flex;
  gap: 1.25rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border);
  margin-top: 0.25rem;
}
.cal-legend-item {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}
.cal-legend-dot {
  width: 10px; height: 10px;
  border-radius: 2px;
}
.cal-legend-dot.today-dot { background: var(--accent); }
.cal-legend-dot.post-dot { background: var(--accent-2); border: 1px solid var(--accent-2); }

/* ── PAGINATION ── */
.pagination {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  justify-content: center;
  margin: 2rem 0;
}
.page-btn {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  width: 36px; height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--transition);
}
.page-btn:hover, .page-btn.active {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--badge-bg);
}
.page-btn.active { background: var(--accent); color: #000; }

/* ── LOAD MORE / INFINITE SCROLL ── */
.load-more-wrap { text-align: center; margin: 1.5rem 0; }
.load-more-btn {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 0.7rem 2rem;
  background: var(--bg-card);
  border: 1px solid var(--border-accent);
  color: var(--accent);
  cursor: pointer;
  transition: all var(--transition);
}
.load-more-btn:hover { background: var(--badge-bg); box-shadow: var(--glow-sm); }
.load-spinner {
  display: none;
  width: 24px; height: 24px;
  border: 2px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin: 1rem auto;
}
.load-spinner.show { display: block; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ── SIDEBAR ── */
.sidebar { position: sticky; top: calc(var(--header-h) + 1rem); }
.sidebar-widget {
  background: var(--bg-card);
  border: 1px solid var(--border);
  margin-bottom: 1.25rem;
  overflow: hidden;
}
.widget-title {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-primary);
  background: var(--bg-tertiary);
  padding: 0.6rem 1rem;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.widget-title .w-icon { color: var(--accent); }
.widget-body { padding: 1rem; }

/* Search */
.search-form { display: flex; gap: 0; }
.search-input {
  flex: 1;
  background: var(--input-bg);
  border: 1px solid var(--border);
  border-right: none;
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  padding: 0.5rem 0.75rem;
  outline: none;
  transition: border-color var(--transition);
}
.search-input:focus { border-color: var(--border); }
.search-input::placeholder { color: var(--text-muted); font-size: 0.72rem; }
.search-btn {
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  padding: 0.5rem 0.75rem;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  transition: background var(--transition), color var(--transition);
}
.search-btn:hover { background: var(--bg-hover); color: var(--text-primary); }

/* Profile */
.profile-card { text-align: center; }
.profile-avatar {
  width: 80px; height: 80px;
  border-radius: 50%;
  border: 2px solid var(--accent);
  margin: 0 auto 0.75rem;
  background: var(--bg-tertiary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  overflow: hidden;
  position: relative;
}
.profile-avatar::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow: inset 0 0 20px rgba(0,229,255,0.2);
}
.profile-name {
  font-family: var(--font-mono);
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 0.2rem;
}
.profile-handle {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  color: var(--accent);
  margin-bottom: 0.6rem;
  letter-spacing: 0.1em;
}
.profile-bio {
  font-size: 0.78rem;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 0.9rem;
  text-align: left;
}
.social-links { display: flex; justify-content: center; gap: 0.5rem; }
.social-link {
  width: 32px; height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.05em;
  transition: all var(--transition);
}
.social-link:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--badge-bg);
}

/* Category list */
.cat-list { list-style: none; }
.cat-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.82rem;
}
.cat-list li:last-child { border-bottom: none; }
.cat-list li a { color: var(--text-secondary); display: flex; align-items: center; gap: 0.4rem; }
.cat-list li a::before { content: '▸'; font-size: 0.6rem; color: var(--accent); }
.cat-list li a:hover { color: var(--accent); }
.cat-count {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  background: var(--badge-bg);
  color: var(--badge-color);
  padding: 0.1rem 0.4rem;
}

/* Tags cloud */
.tag-cloud { display: flex; flex-wrap: wrap; gap: 0.4rem; }

/* Popular / Recent articles */
.post-list { list-style: none; }
.post-list li {
  display: flex;
  gap: 0.75rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--border);
  align-items: flex-start;
}
.post-list li:last-child { border-bottom: none; }
.post-rank {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--accent);
  min-width: 1.2em;
  font-weight: 700;
}
.post-info {}
.post-title-sm {
  font-size: 0.78rem;
  color: var(--text-secondary);
  line-height: 1.4;
  margin-bottom: 0.2rem;
  transition: color var(--transition);
}
.post-list li:hover .post-title-sm { color: var(--accent); }
.post-date-sm {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  color: var(--text-muted);
}

/* ── CONTACT FORM ── */
.contact-form { display: flex; flex-direction: column; gap: 0.75rem; }
.form-group { display: flex; flex-direction: column; gap: 0.3rem; }
.form-label {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.form-input, .form-textarea {
  background: var(--input-bg);
  border: 1px solid var(--border);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: 0.84rem;
  padding: 0.6rem 0.8rem;
  outline: none;
  transition: border-color var(--transition);
  width: 100%;
}
.form-input:focus, .form-textarea:focus { border-color: var(--accent); }
.form-textarea { min-height: 120px; resize: vertical; }
.form-submit {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 0.7rem 1.5rem;
  background: var(--accent);
  color: #000;
  border: none;
  cursor: pointer;
  font-weight: 700;
  transition: all var(--transition);
  align-self: flex-start;
}
.form-submit:hover { background: var(--accent-2); box-shadow: var(--glow); }

/* ── FOOTER ── */
.site-footer {
  background: var(--bg-secondary);
  border-top: 1px solid var(--border);
  padding: 3rem 0 1.5rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 2rem;
  margin-bottom: 2.5rem;
}
@media (max-width: 768px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
.footer-logo { font-family: var(--font-mono); }
.footer-logo .logo-mark { font-size: 1.3rem; margin-bottom: 0.5rem; }
.footer-desc { font-size: 0.8rem; color: var(--text-muted); line-height: 1.7; margin-top: 0.5rem; }
.footer-nav-title {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.75rem;
}
.footer-nav { list-style: none; }
.footer-nav li { margin-bottom: 0.4rem; }
.footer-nav li a { font-size: 0.8rem; color: var(--text-muted); transition: color var(--transition); }
.footer-nav li a:hover { color: var(--accent); }
.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  color: var(--text-muted);
}
.footer-status {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.status-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent-2);
  animation: pulse 2s infinite;
}
@keyframes pulse {
  0%,100% { opacity: 1; }
  50% { opacity: 0.3; }
}

/* ── SIDEBAR NAV (mobile) ── */
.sidebar-nav-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: var(--overlay-bg);
  z-index: 990;
  backdrop-filter: blur(4px);
}
.sidebar-nav-overlay.open { display: block; }
.sidebar-nav-panel {
  position: fixed;
  top: 0; left: 0;
  width: 280px; height: 100%;
  background: var(--bg-secondary);
  border-right: 1px solid var(--border-accent);
  z-index: 991;
  transform: translateX(-100%);
  transition: transform 0.3s ease;
  overflow-y: auto;
  padding: 1.5rem;
}
.sidebar-nav-panel.open { transform: translateX(0); }

/* ── UTILITY ── */
.hidden { display: none !important; }
.mt-2 { margin-top: 2rem; }
.mb-1 { margin-bottom: 1rem; }
.text-accent { color: var(--accent); }
.text-muted { color: var(--text-muted); font-size: 0.8rem; }
.divider { border: none; border-top: 1px solid var(--border); margin: 2rem 0; }

/* Classification banner (SCP touch) */
.classify-banner {
  background: #080e1a;
  color: var(--accent);
  border-top: 1px solid var(--border-accent);
  font-family: var(--font-mono);
  font-size: 0.55rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  text-align: center;
  padding: 0.25rem;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 999;
  opacity: 0.9;
}

/* ── RESPONSIVE ── */
@media (max-width: 640px) {
  .hero-content-box { padding: 1.5rem; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr; }
  .header-right .cta-btn { display: none; }
}

/* ============================================================
   INDEX PAGE — Page-specific styles
   (WordPress: index.php / functions.php wp_enqueue_scripts)
   ============================================================ */

/* ── TWEAKS PANEL ── */
#tweaks-panel {
  position: fixed;
  bottom: 5rem;
  right: -320px;
  width: 300px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-accent);
  border-right: none;
  z-index: 9000;
  transition: right 0.3s ease;
  font-family: var(--font-mono);
}
#tweaks-panel.open { right: 0; }
.tweaks-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border);
  background: var(--bg-tertiary);
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
}
.tweaks-close {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  padding: 0 0.25rem;
}
.tweaks-close:hover { color: var(--accent); }
.tweaks-body { padding: 1rem; display: flex; flex-direction: column; gap: 1rem; }
.tweak-row { display: flex; flex-direction: column; gap: 0.4rem; }
.tweak-label { font-size: 0.6rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--text-muted); }
.tweak-options { display: flex; gap: 0.3rem; }
.tweak-opt-btn {
  flex: 1;
  padding: 0.4rem;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.05em;
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  color: var(--text-muted);
  cursor: pointer;
  transition: all var(--transition);
}
.tweak-opt-btn:hover, .tweak-opt-btn.active {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--badge-bg);
}

/* ── HERO ACCENT LINES ── */
.hero-accent-line { position: absolute; background: var(--accent); opacity: 0.15; }
.hal-v { width: 1px; height: 60%; top: 20%; }
.hal-v.l { left: 10%; }
.hal-v.r { right: 10%; }
.hal-h { height: 1px; width: 40%; top: 50%; }
.hal-h.t { top: 15%; left: 30%; }
.hal-h.b { bottom: 15%; right: 30%; top: auto; }

/* ── SCP CORNER MARKS ── */
.scp-corner {
  position: absolute;
  font-family: var(--font-mono);
  font-size: 0.55rem;
  color: var(--accent);
  opacity: 0.4;
  letter-spacing: 0.08em;
  pointer-events: none;
}
.scp-tl { top: 0.75rem; left: 1rem; }
.scp-tr { top: 0.75rem; right: 1rem; text-align: right; }
.scp-bl { bottom: 1.5rem; left: 1rem; }
.scp-br { bottom: 1.5rem; right: 1rem; }

/* ── CONTACT SECTION ── */
.contact-section { margin-bottom: 2.5rem; }
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
@media (max-width: 768px) { .contact-grid { grid-template-columns: 1fr; } }
.contact-info-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.82rem;
  color: var(--text-secondary);
}
.contact-info-icon {
  font-family: var(--font-mono);
  color: var(--accent);
  font-size: 0.7rem;
  min-width: 1.5em;
}
.contact-info-item strong {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  display: block;
  margin-bottom: 0.2rem;
}

/* ── PROFILE FULL SECTION ── */
.profile-full {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 2rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  padding: 2rem;
  margin-bottom: 2.5rem;
  align-items: start;
}
@media (max-width: 768px) { .profile-full { grid-template-columns: 1fr; } }
.profile-avatar-lg {
  width: 120px; height: 120px;
  border-radius: 50%;
  background: var(--bg-tertiary);
  border: 2px solid var(--accent);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  position: relative;
  box-shadow: var(--glow);
}
.profile-avatar-lg::before {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1px solid var(--border-accent);
}
.profile-detail-name {
  font-family: var(--font-mono);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--accent);
  margin-bottom: 0.25rem;
}
.profile-detail-role {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 1rem;
}
.profile-detail-bio {
  font-size: 0.88rem;
  color: var(--text-secondary);
  line-height: 1.8;
  margin-bottom: 1rem;
}
.profile-social-row { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.profile-social-link {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.9rem;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 1px solid var(--border);
  color: var(--text-secondary);
  transition: all var(--transition);
}
.profile-social-link:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--badge-bg);
}

/* ── SKILL DOTS ── */
.skill-dots { display: flex; gap: 3px; }
.sdot {
  width: 9px; height: 9px;
  border: 1px solid var(--border);
  border-radius: 1px;
}
.sdot.on { background: var(--accent); border-color: var(--accent); }

/* ── CATEGORY CARDS ── */
.cat-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-bottom: 2.5rem;
}
@media (max-width: 768px) { .cat-cards { grid-template-columns: repeat(2, 1fr); } }
.cat-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  padding: 1.5rem 1rem;
  text-align: center;
  cursor: pointer;
  transition: all var(--transition);
  position: relative;
  overflow: hidden;
}
.cat-card::before {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transition: transform var(--transition);
}
.cat-card:hover { border-color: var(--border-accent); box-shadow: var(--glow); }
.cat-card:hover::before { transform: scaleX(1); }
.cat-icon { font-size: 2rem; margin-bottom: 0.5rem; display: block; }
.cat-name {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: 0.05em;
  margin-bottom: 0.25rem;
}
.cat-num { font-family: var(--font-mono); font-size: 0.62rem; color: var(--text-muted); }

/* ── FOOTER GRID ── */
.footer-grid {
  display: grid;
  grid-template-columns: 1.8fr 1fr 1fr 1fr;
  gap: 2rem;
  margin-bottom: 2.5rem;
}
@media (max-width: 768px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .footer-grid { grid-template-columns: 1fr; } }

/* ── CHIP FILTERS ── */
.chip-filters { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.5rem; }
.chip {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  padding: 0.3rem 0.75rem;
  background: var(--bg-card);
  color: var(--text-secondary);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.chip:hover {
  background: var(--bg-hover);
  color: var(--accent);
}
.chip.active {
  background: var(--accent);
  color: var(--bg-base);
  border-color: var(--accent);
}

/* ── CONTACT TWITTER LINK ── */
.contact-twitter-link {
  color: var(--accent);
  text-decoration: none;
  font-family: var(--font-mono);
  letter-spacing: 0.05em;
}
.contact-twitter-link:hover { text-decoration: underline; }

/* ── TERMINAL EFFECT ── */
.terminal-line {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--accent-2);
  padding: 0.2rem 0;
  letter-spacing: 0.05em;
}
.terminal-line .prompt { color: var(--accent); margin-right: 0.5rem; }
.terminal-line .cmd { color: var(--text-primary); }
.blink { animation: blink 1.2s step-end infinite; color: var(--accent); }
@keyframes blink { 0%,100% { opacity: 1; } 50% { opacity: 0; } }

/* ── NOTIFICATION TOAST ── */
#toast {
  position: fixed;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%) translateY(100px);
  background: var(--bg-secondary);
  border: 1px solid var(--border-accent);
  border-left: 3px solid var(--accent);
  padding: 0.75rem 1.25rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--text-primary);
  z-index: 9999;
  transition: transform 0.3s ease;
  pointer-events: none;
}
#toast.show { transform: translateX(-50%) translateY(0); }

/* ============================================================
   ARTICLE PAGE — Page-specific styles
   (WordPress: single.php / functions.php wp_enqueue_scripts)
   ============================================================ */

/* ── ARTICLE LAYOUT ── */
.article-wrap {
  max-width: 1400px;
  margin: 0 auto;
  padding: 2rem 1.5rem;
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 2rem;
  align-items: start;
}
@media (max-width: 1024px) { .article-wrap { grid-template-columns: 1fr; } }

/* ── ARTICLE HEADER ── */
.article-header {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-top: 3px solid var(--accent);
  padding: 2.5rem;
  margin-bottom: 2rem;
  position: relative;
  overflow: hidden;
}
.article-header::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(90deg, var(--border) 0px, var(--border) 1px, transparent 1px, transparent 80px),
    repeating-linear-gradient(0deg,  var(--border) 0px, var(--border) 1px, transparent 1px, transparent 80px);
  opacity: 0.2;
}
.article-header-inner { position: relative; z-index: 1; }
.article-doc-id {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  color: var(--accent-warn);
  letter-spacing: 0.25em;
  text-transform: uppercase;
  background: rgba(255,60,60,0.1);
  border: 1px solid rgba(255,60,60,0.3);
  display: inline-block;
  padding: 0.2rem 0.6rem;
  margin-bottom: 1rem;
}
.article-main-title {
  font-family: var(--font-mono);
  font-size: clamp(1.4rem, 3vw, 2.2rem);
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.25;
  margin-bottom: 1.25rem;
}
.article-main-title .accent { color: var(--accent); }
.article-info-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  padding: 1rem 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  margin-bottom: 1.25rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--text-muted);
}
.article-info-item { display: flex; align-items: center; gap: 0.4rem; }
.article-info-icon { color: var(--accent); }
.article-tags-row { display: flex; gap: 0.5rem; flex-wrap: wrap; }

/* ── IN-PAGE TOC ── */
.toc {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  padding: 1.25rem 1.5rem;
  margin-bottom: 2rem;
}
.toc-title {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.toc-title::before { content: '◈'; }
.toc-list { list-style: none; display: flex; flex-direction: column; gap: 0.3rem; }
.toc-list li { padding-left: 1rem; }
.toc-list li.h2 { padding-left: 0; }
.toc-list li.h3 { padding-left: 1.25rem; }
.toc-list a {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 0.4rem;
  transition: color var(--transition);
}
.toc-list li.h2 a::before { content: '▸'; color: var(--accent); font-size: 0.6rem; }
.toc-list li.h3 a::before { content: '–'; color: var(--text-muted); }
.toc-list a:hover, .toc-list a.active { color: var(--accent); }

/* ── ARTICLE BODY ── */
.article-body {
  font-size: 0.92rem;
  line-height: 1.85;
  color: var(--text-secondary);
}
.article-body h2 {
  font-family: var(--font-mono);
  font-size: 1.25rem;
  color: var(--text-primary);
  margin: 2.5rem 0 1rem;
  padding: 0.6rem 1rem;
  background: var(--bg-tertiary);
  border-left: 3px solid var(--accent);
  letter-spacing: 0.05em;
}
.article-body h3 {
  font-family: var(--font-mono);
  font-size: 1rem;
  color: var(--accent);
  margin: 1.75rem 0 0.75rem;
  padding-bottom: 0.3rem;
  border-bottom: 1px dashed var(--border);
  letter-spacing: 0.05em;
}
.article-body p { margin-bottom: 1rem; }
.article-body a { color: var(--accent); border-bottom: 1px solid var(--border-accent); }
.article-body a:hover { color: var(--accent-2); }
.article-body strong { color: var(--text-primary); font-weight: 700; }
.article-body ul, .article-body ol { margin: 0.75rem 0 1rem 1.5rem; }
.article-body li { margin-bottom: 0.4rem; }
.article-body blockquote {
  border-left: 3px solid var(--accent);
  padding: 0.75rem 1.25rem;
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  margin: 1.25rem 0;
  font-style: italic;
}

/* ── ARTICLE TABLE ── */
.article-body table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.25rem 0;
  font-size: 0.82rem;
}
.article-body th {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: var(--bg-tertiary);
  color: var(--accent);
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--border);
  text-align: left;
}
.article-body td {
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--border);
  vertical-align: top;
}
.article-body tr:hover td { background: var(--bg-tertiary); }

/* ── CODE BLOCK ── */
.code-block {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-top: 2px solid var(--accent);
  margin: 1.25rem 0;
  overflow: hidden;
}
.code-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 1rem;
  background: var(--bg-tertiary);
  border-bottom: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.1em;
}
.code-lang { color: var(--accent); text-transform: uppercase; }
.code-copy {
  background: none;
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 0.6rem;
  padding: 0.2rem 0.5rem;
  cursor: pointer;
  transition: all var(--transition);
  letter-spacing: 0.08em;
}
.code-copy:hover { border-color: var(--accent); color: var(--accent); }
.code-copy.copied { border-color: var(--accent-2); color: var(--accent-2); }
.code-body {
  padding: 1.25rem 1.5rem;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  line-height: 1.7;
  color: var(--text-primary);
  overflow-x: auto;
  tab-size: 4;
}
.code-body .kw  { color: #ff7eb6; }
.code-body .fn  { color: var(--accent-2); }
.code-body .st  { color: var(--accent-yellow); }
.code-body .cm  { color: var(--text-muted); font-style: italic; }
.code-body .cl  { color: var(--accent); }
.code-body .nm  { color: #c3e88d; }

/* ── INFO BOX ── */
.info-box {
  display: flex;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  border: 1px solid;
  margin: 1.25rem 0;
}
.info-box.tip   { border-color: rgba(0,255,136,0.3);  background: rgba(0,255,136,0.05); }
.info-box.warn  { border-color: rgba(255,225,0,0.3);  background: rgba(255,225,0,0.05); }
.info-box.danger{ border-color: rgba(255,60,60,0.3);  background: rgba(255,60,60,0.05); }
.info-icon { font-size: 1rem; flex-shrink: 0; line-height: 1.5; }
.info-content { font-size: 0.85rem; }
.info-content strong {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 0.25rem;
}
.info-box.tip    .info-content strong { color: var(--accent-2); }
.info-box.warn   .info-content strong { color: var(--accent-yellow); }
.info-box.danger .info-content strong { color: var(--accent-warn); }

/* ── ARTICLE FOOTER ── */
.article-footer {
  border-top: 1px solid var(--border);
  padding-top: 2rem;
  margin-top: 2rem;
}
.article-share {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 2rem;
  flex-wrap: wrap;
}
.share-label {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.share-btn {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  padding: 0.4rem 0.9rem;
  border: 1px solid var(--border);
  color: var(--text-secondary);
  background: var(--bg-card);
  cursor: pointer;
  transition: all var(--transition);
}
.share-btn:hover { border-color: var(--accent); color: var(--accent); }

/* ── AUTHOR BOX ── */
.author-box {
  background: var(--bg-card);
  border: 1px solid var(--border);
  padding: 1.5rem;
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
  margin-bottom: 2rem;
}
@media (max-width: 560px) { .author-box { flex-direction: column; } }
.author-avatar {
  width: 64px; height: 64px;
  border-radius: 50%;
  border: 2px solid var(--accent);
  background: var(--bg-tertiary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.75rem;
  flex-shrink: 0;
}
/* ── コインフリップアバター ── */
.profile-coin {
  cursor: pointer;
  perspective: 600px;
}
.profile-coin.profile-avatar-lg,
.profile-coin.profile-avatar,
.profile-coin.author-avatar {
  display: block;
  position: relative;
}
.profile-coin-inner {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transition: transform 0.65s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.profile-coin.flipped .profile-coin-inner {
  transform: rotateY(180deg);
}
.profile-coin-front,
.profile-coin-back {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: 50%;
  overflow: hidden;
}
.profile-coin-back {
  transform: rotateY(180deg);
}
.profile-coin img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.author-name {
  font-family: var(--font-mono);
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 0.2rem;
}
.author-role {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.5rem;
}
.author-bio { font-size: 0.8rem; color: var(--text-secondary); line-height: 1.6; }

/* ── RELATED ARTICLES ── */
.related-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}
@media (max-width: 560px) { .related-grid { grid-template-columns: 1fr; } }

/* ── READING PROGRESS BAR ── */
#read-progress {
  position: fixed;
  top: var(--header-h);
  left: 0; right: 0;
  height: 2px;
  background: var(--border);
  z-index: 999;
}
#read-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  width: 0%;
  transition: width 0.1s linear;
  box-shadow: var(--glow-sm);
}

/* ── ARTICLE SIDEBAR ── */
.article-sidebar { position: sticky; top: calc(var(--header-h) + 1rem); }

/* =====================================================
   SF ローディングオーバーレイ
   ===================================================== */
#sf-loading {
  position: fixed; inset: 0; z-index: 10000;
  background: var(--bg, #06060f);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  transition: opacity 0.7s ease;
}
#sf-loading.sf-hide { opacity: 0; pointer-events: none; }
.sf-scan-lines {
  position: absolute; inset: 0;
  background: repeating-linear-gradient(0deg, transparent 0px, transparent 2px, rgba(0,229,255,0.025) 2px, rgba(0,229,255,0.025) 4px);
  pointer-events: none;
}
.sf-grid-bg {
  position: absolute; inset: 0;
  background-image: linear-gradient(rgba(0,229,255,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(0,229,255,0.04) 1px, transparent 1px);
  background-size: 60px 60px; pointer-events: none;
}
.sf-float-panel {
  position: absolute;
  background: rgba(0,229,255,0.03); border: 1px solid rgba(0,229,255,0.12);
  padding: 1rem 1.2rem; font-family: var(--font-mono, monospace);
  font-size: 0.58rem; letter-spacing: 0.07em; color: rgba(0,229,255,0.4);
  opacity: 0; animation: sf-float-in 0.5s ease forwards;
}
.sf-float-panel.fp-1 { top: 8%;  left: 3%;  animation-delay: 0.4s; }
.sf-float-panel.fp-2 { top: 8%;  right: 3%; animation-delay: 0.6s; }
.sf-float-panel.fp-3 { bottom: 14%; left: 3%; animation-delay: 0.8s; }
@keyframes sf-float-in { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:translateY(0); } }
.sf-fp-title {
  color: rgba(0,229,255,0.75); font-weight: 700;
  margin-bottom: 0.4rem; padding-bottom: 0.3rem; border-bottom: 1px solid rgba(0,229,255,0.12);
}
.sf-fp-line { margin: 0.16rem 0; white-space: nowrap; }
.sf-c-green { color: #00ff88; } .sf-c-yellow { color: #ffe100; } .sf-c-red { color: #ff4444; }
.sf-blink-text { animation: sf-blink-kf 0.9s step-end infinite; }
@keyframes sf-blink-kf { 50% { opacity: 0; } }
.sf-main-panel {
  position: relative; width: min(460px, 90vw);
  background: rgba(6,6,15,0.97); border: 1px solid var(--accent, #00e5ff);
  padding: 2.2rem 2rem;
  box-shadow: 0 0 40px rgba(0,229,255,0.14), inset 0 0 60px rgba(0,0,0,0.5);
  opacity: 0; animation: sf-panel-in 0.5s ease 0.3s forwards;
}
@keyframes sf-panel-in { from { opacity:0; transform:scale(0.97) translateY(8px); } to { opacity:1; transform:scale(1) translateY(0); } }
.sf-corner { position: absolute; width: 12px; height: 12px; border-color: var(--accent,#00e5ff); border-style: solid; }
.sf-corner.tl { top:-1px; left:-1px;   border-width:2px 0 0 2px; }
.sf-corner.tr { top:-1px; right:-1px;  border-width:2px 2px 0 0; }
.sf-corner.bl { bottom:-1px; left:-1px;  border-width:0 0 2px 2px; }
.sf-corner.br { bottom:-1px; right:-1px; border-width:0 2px 2px 0; }
.sf-panel-logo {
  font-family: var(--font-mono, monospace); font-size: 1.5rem; font-weight: 700;
  color: var(--accent,#00e5ff); letter-spacing: 0.1em; text-align: center; margin-bottom: 0.2rem;
}
.sf-panel-logo .sf-lb { color: var(--accent-warn,#ffe100); }
.sf-panel-sub {
  font-family: var(--font-mono,monospace); font-size: 0.48rem; letter-spacing: 0.2em;
  color: var(--text-muted,#445566); text-align: center; text-transform: uppercase; margin-bottom: 1.4rem;
}
.sf-status-bar {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.42rem 0.75rem; margin-bottom: 1.3rem;
  background: rgba(0,229,255,0.04); border: 1px solid rgba(0,229,255,0.1);
  font-family: var(--font-mono,monospace); font-size: 0.57rem;
  color: var(--accent,#00e5ff); letter-spacing: 0.07em;
}
.sf-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent,#00e5ff); flex-shrink: 0;
  animation: sf-blink-kf 1.2s step-end infinite;
}
.sf-fields { display: flex; flex-direction: column; gap: 0.9rem; margin-bottom: 1rem; }
.sf-field-label {
  font-family: var(--font-mono,monospace); font-size: 0.49rem;
  letter-spacing: 0.2em; color: var(--text-muted,#445566);
  text-transform: uppercase; margin-bottom: 0.22rem;
}
.sf-input-row {
  display: flex; align-items: center; gap: 0.35rem;
  background: rgba(0,0,0,0.5); border: 1px solid rgba(0,229,255,0.18);
  padding: 0.48rem 0.7rem;
}
.sf-input-pre { font-family: var(--font-mono,monospace); font-size: 0.75rem; color: var(--accent,#00e5ff); }
.sf-typed-input {
  flex: 1; background: transparent; border: none; outline: none;
  font-family: var(--font-mono,monospace); font-size: 0.75rem;
  color: var(--accent,#00e5ff); letter-spacing: 0.06em; caret-color: transparent;
}
.sf-caret {
  font-family: var(--font-mono,monospace); font-size: 0.75rem;
  color: var(--accent,#00e5ff); animation: sf-blink-kf 0.55s step-end infinite;
}
.sf-caret.hidden { visibility: hidden; }
.sf-progress-wrap { height: 2px; background: rgba(0,229,255,0.1); margin-bottom: 1rem; overflow: hidden; }
.sf-progress-fill {
  height: 100%; width: 0%;
  background: var(--accent,#00e5ff); box-shadow: 0 0 6px var(--accent,#00e5ff);
  transition: width 0.04s linear;
}
.sf-access-btn {
  width: 100%; padding: 0.72rem; background: transparent;
  border: 1px solid var(--accent,#00e5ff); color: var(--accent,#00e5ff);
  font-family: var(--font-mono,monospace); font-size: 0.74rem;
  letter-spacing: 0.22em; text-transform: uppercase; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 0.5rem;
  transition: background 0.2s, box-shadow 0.2s;
}
.sf-access-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.sf-access-btn:not(:disabled):hover { background: rgba(0,229,255,0.1); box-shadow: 0 0 20px rgba(0,229,255,0.2); }
.sf-panel-footer {
  font-family: var(--font-mono,monospace); font-size: 0.44rem;
  color: rgba(255,255,255,0.1); text-align: center; letter-spacing: 0.14em;
  margin-top: 0.85rem; text-transform: uppercase;
}
@media (max-width: 767px) { .sf-float-panel { display: none; } }

/* =====================================================
   キャラクタータブ
   ===================================================== */
.chara-section-intro {
  background: var(--bg-card); border: 1px solid var(--border);
  padding: 1.1rem 1.4rem; margin-bottom: 1.75rem;
  position: relative; overflow: hidden;
}
.chara-section-intro::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: linear-gradient(180deg, #ff4444 33%, #4488ff 33% 66%, #88aaff 66%);
}
.chara-section-intro p { font-size: 0.78rem; color: var(--text-secondary); line-height: 1.7; margin: 0.4rem 0 0; }
.chara-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.75rem; margin-bottom: 2rem;
}
.chara-card { height: 510px; perspective: 1100px; cursor: pointer; outline: none; }
.chara-card:focus-visible .chara-card-inner { outline: 2px solid var(--accent); outline-offset: 2px; }
.chara-card-inner {
  position: relative; width: 100%; height: 100%; transform-style: preserve-3d;
  transition: transform 0.6s cubic-bezier(0.4,0.2,0.2,1);
}
.chara-card.flipped .chara-card-inner { transform: rotateY(180deg); }
.chara-front, .chara-back {
  position: absolute; inset: 0;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  background: var(--bg-card); border: 1px solid var(--border);
  overflow: hidden; display: flex; flex-direction: column;
}
.chara-back { transform: rotateY(180deg); }
.chara-card[data-char="chaos"] .chara-front,
.chara-card[data-char="chaos"] .chara-back { border-top: 2px solid #ff4444; }
.chara-card[data-char="abyss"] .chara-front,
.chara-card[data-char="abyss"] .chara-back { border-top: 2px solid #4488ff; }
.chara-card[data-char="null"]  .chara-front,
.chara-card[data-char="null"]  .chara-back  { border-top: 2px solid #88aaff; }
.chara-code-badge {
  font-family: var(--font-mono); font-size: 0.51rem; letter-spacing: 0.18em;
  color: var(--text-muted); padding: 0.6rem 0.9rem 0; text-transform: uppercase;
}
.chara-img-area {
  flex: 1; display: flex; align-items: flex-end; justify-content: center;
  overflow: hidden; position: relative; min-height: 0;
}
.chara-main-img {
  max-height: 100%; max-width: 90%; object-fit: contain; object-position: bottom;
  transition: transform 0.3s ease; filter: drop-shadow(0 0 16px rgba(0,229,255,0.22));
}
.chara-card:hover .chara-main-img { transform: translateY(-5px) scale(1.02); }
.chara-img-fallback {
  width: 100%; height: 100%; display: flex; align-items: center;
  justify-content: center; font-size: 5rem; opacity: 0.2;
}
.chara-card[data-char="chaos"] .chara-img-area { background: linear-gradient(0deg,rgba(255,68,68,0.09) 0%,transparent 65%); }
.chara-card[data-char="abyss"] .chara-img-area { background: linear-gradient(0deg,rgba(68,136,255,0.09) 0%,transparent 65%); }
.chara-card[data-char="null"]  .chara-img-area { background: linear-gradient(0deg,rgba(136,170,255,0.09) 0%,transparent 65%); }
.chara-front-footer { padding: 0.65rem 0.9rem; }
.chara-true-row { display: flex; align-items: center; gap: 0.45rem; margin-bottom: 0.35rem; }
.chara-true-thumb { height: 28px; object-fit: contain; opacity: 0.6; filter: sepia(0.3); }
.chara-true-label { font-family: var(--font-mono); font-size: 0.47rem; color: var(--text-muted); letter-spacing: 0.12em; }
.chara-name { font-family: var(--font-mono); font-size: 1rem; font-weight: 700; color: var(--text-primary); }
.chara-role-tag { font-family: var(--font-mono); font-size: 0.51rem; color: var(--text-muted); letter-spacing: 0.1em; }
.chara-hint {
  font-family: var(--font-mono); font-size: 0.46rem; color: var(--accent);
  letter-spacing: 0.14em; margin-top: 0.22rem;
  animation: chara-pulse 2.2s ease-in-out infinite;
}
@keyframes chara-pulse { 0%,100%{opacity:0.35} 50%{opacity:0.9} }
.chara-back { padding: 0.85rem; overflow-y: auto; gap: 0; }
.chara-back-hdr {
  display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid var(--border); padding-bottom: 0.45rem; margin-bottom: 0.55rem;
}
.chara-back-code { font-family: var(--font-mono); font-size: 0.52rem; letter-spacing: 0.16em; color: var(--text-muted); text-transform: uppercase; }
.chara-close-btn {
  font-family: var(--font-mono); font-size: 0.68rem; color: var(--text-muted);
  cursor: pointer; padding: 0.1rem 0.38rem; border: 1px solid var(--border);
  background: none; transition: color 0.2s, border-color 0.2s;
}
.chara-close-btn:hover { color: var(--accent); border-color: var(--accent); }
.chara-detail-row {
  display: grid; grid-template-columns: 4.5rem 1fr; gap: 0.3rem;
  padding: 0.2rem 0; border-bottom: 1px solid rgba(255,255,255,0.04);
  font-family: var(--font-mono); font-size: 0.61rem; align-items: baseline;
}
.chara-dl { font-size: 0.49rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); }
.chara-dv { color: var(--text-secondary); line-height: 1.4; }
.chara-bio {
  font-size: 0.69rem; color: var(--text-secondary); line-height: 1.65;
  padding: 0.5rem 0.6rem; background: rgba(0,229,255,0.03);
  border-left: 2px solid var(--accent); margin: 0.55rem 0 0.4rem;
}
.chara-quote {
  font-family: var(--font-mono); font-size: 0.59rem; color: var(--text-muted);
  padding: 0.38rem 0.55rem; border: 1px solid var(--border);
  line-height: 1.55; margin-bottom: 0.45rem; font-style: italic;
}
.chara-langs { display: flex; flex-wrap: wrap; gap: 0.28rem; margin-top: 0.28rem; }
.chara-lang {
  font-family: var(--font-mono); font-size: 0.5rem; padding: 0.16rem 0.42rem;
  border: 1px solid rgba(0,229,255,0.18); color: var(--accent); letter-spacing: 0.05em;
}

/* =====================================================
   ドットキャラクターゾーン
   ===================================================== */
.dot-chara-zone {
  position: relative; border-top: 1px solid var(--border);
  background: var(--bg-primary); padding: 0.8rem 0 0;
}
.dot-chara-inner {
  max-width: 1400px; margin: 0 auto; padding: 0 1.5rem;
  display: flex; align-items: flex-end; gap: 2.5rem; min-height: 86px;
}
.dot-entity {
  position: relative; display: flex; flex-direction: column;
  align-items: center; cursor: pointer; user-select: none; outline: none;
}
.dot-entity:focus-visible .dot-sprite-wrap { outline: 2px solid var(--accent); }
.dot-sprite-wrap {
  width: 52px; height: 52px; position: relative;
  display: flex; align-items: center; justify-content: center;
}
.dot-sprite-wrap img {
  width: 52px; height: 52px; object-fit: contain;
  image-rendering: pixelated; image-rendering: crisp-edges;
}
.dot-fallback-emoji { font-size: 34px; line-height: 1; }
.dot-entity[data-char="chaos"] .dot-sprite-wrap { animation: dot-hop 0.88s ease-in-out infinite; }
.dot-entity[data-char="abyss"] .dot-sprite-wrap { animation: dot-hop 1.12s ease-in-out infinite 0.18s; }
.dot-entity[data-char="null"]  .dot-sprite-wrap { animation: dot-hop 1.0s  ease-in-out infinite 0.34s; }
@keyframes dot-hop { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-11px)} }
.dot-label {
  font-family: var(--font-mono); font-size: 0.4rem; letter-spacing: 0.12em;
  color: var(--text-muted); text-transform: uppercase; margin-top: 0.18rem; white-space: nowrap;
}
.dot-bubble {
  position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%);
  min-width: 150px; max-width: 210px;
  background: var(--bg-card); border: 1px solid var(--accent);
  padding: 0.5rem 0.65rem; font-family: var(--font-mono); font-size: 0.58rem;
  color: var(--text-secondary); line-height: 1.55;
  box-shadow: 0 0 14px rgba(0,229,255,0.12);
  pointer-events: none; opacity: 0;
  transition: opacity 0.18s ease; z-index: 20; word-break: break-word;
}
.dot-bubble::after {
  content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  border: 5px solid transparent; border-top-color: var(--accent);
}
.dot-bubble.show { opacity: 1; }
.dot-entity[data-char="chaos"] .dot-bubble { border-color: #ff4444; box-shadow: 0 0 12px rgba(255,68,68,0.14); }
.dot-entity[data-char="chaos"] .dot-bubble::after { border-top-color: #ff4444; }
.dot-entity[data-char="abyss"] .dot-bubble { border-color: #4488ff; box-shadow: 0 0 12px rgba(68,136,255,0.14); }
.dot-entity[data-char="abyss"] .dot-bubble::after { border-top-color: #4488ff; }
.dot-entity[data-char="null"]  .dot-bubble { border-color: #88aaff; box-shadow: 0 0 12px rgba(136,170,255,0.14); }
.dot-entity[data-char="null"]  .dot-bubble::after { border-top-color: #88aaff; }
.sticky-toc { margin-bottom: 1.25rem; }

/* ═══════════════════════════════════════════
   カードサムネイル画像
═══════════════════════════════════════════ */
.card-thumb {
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: var(--bg-card);
  border-bottom: 1px solid var(--border);
}
.card-thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.35s ease;
}
.article-card:hover .card-thumb-img {
  transform: scale(1.04);
}

/* ═══════════════════════════════════════════
   強調枠 24種 (Callout Boxes)
═══════════════════════════════════════════ */
.callout {
  display: flex;
  gap: 0.85rem;
  align-items: flex-start;
  border-left: 3px solid var(--accent);
  padding: 0.85rem 1.1rem;
  margin: 1.5rem 0;
  background: var(--bg-card);
  border-radius: 0 2px 2px 0;
  position: relative;
}
.callout::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.04;
  background: currentColor;
  pointer-events: none;
}
.callout-icon {
  font-size: 1.1rem;
  line-height: 1.4;
  flex-shrink: 0;
  min-width: 1.4rem;
}
.callout-body { flex: 1; min-width: 0; }
.callout-label {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 0.3rem;
}
.callout-content {
  font-size: 0.88rem;
  line-height: 1.65;
  color: var(--text-secondary);
}
.callout-content code {
  background: rgba(255,255,255,0.07);
  padding: 0.1em 0.35em;
  border-radius: 2px;
  font-size: 0.85em;
}

/* SECURITY */
.callout-security { border-color: #ff2244; }
.callout-security .callout-label { color: #ff2244; }

/* NOTE */
.callout-note { border-color: #4488ff; }
.callout-note .callout-label { color: #4488ff; }

/* TIP */
.callout-tip { border-color: #00e5a0; }
.callout-tip .callout-label { color: #00e5a0; }

/* POINT */
.callout-point { border-color: var(--accent); }
.callout-point .callout-label { color: var(--accent); }

/* CHECK */
.callout-check { border-color: #44dd88; }
.callout-check .callout-label { color: #44dd88; }

/* WARNING */
.callout-warning { border-color: #ffaa00; }
.callout-warning .callout-label { color: #ffaa00; }

/* ERROR */
.callout-error { border-color: #ff4444; background: rgba(255,68,68,0.04); }
.callout-error .callout-label { color: #ff4444; }

/* SUCCESS */
.callout-success { border-color: #00cc66; }
.callout-success .callout-label { color: #00cc66; }

/* SUMMARY */
.callout-summary { border-color: #00bbcc; }
.callout-summary .callout-label { color: #00bbcc; }

/* EXAMPLE */
.callout-example { border-color: #aa66ff; }
.callout-example .callout-label { color: #aa66ff; }

/* MEMO */
.callout-memo { border-color: var(--text-muted); }
.callout-memo .callout-label { color: var(--text-muted); }

/* IDEA */
.callout-idea { border-color: #ffcc00; }
.callout-idea .callout-label { color: #ffcc00; }

/* BEGINNER */
.callout-beginner { border-color: #88dd44; }
.callout-beginner .callout-label { color: #88dd44; }

/* STEP */
.callout-step { border-color: #4499ff; }
.callout-step .callout-label { color: #4499ff; }

/* ROADMAP */
.callout-roadmap { border-color: #7766ff; }
.callout-roadmap .callout-label { color: #7766ff; }

/* NEXT */
.callout-next { border-color: #00ddbb; }
.callout-next .callout-label { color: #00ddbb; }

/* FAQ */
.callout-faq { border-color: #ff8800; }
.callout-faq .callout-label { color: #ff8800; }

/* RECOMMEND */
.callout-recommend { border-color: #ffcc44; }
.callout-recommend .callout-label { color: #ffcc44; }

/* IMPORTANT */
.callout-important { border-color: #ff3355; background: rgba(255,51,85,0.04); }
.callout-important .callout-label { color: #ff3355; }

/* DEFINITION */
.callout-definition { border-color: #33ccbb; }
.callout-definition .callout-label { color: #33ccbb; }

/* MONEY */
.callout-money { border-color: #ddaa00; }
.callout-money .callout-label { color: #ddaa00; }

/* RISK */
.callout-risk { border-color: #ff6600; background: rgba(255,102,0,0.04); }
.callout-risk .callout-label { color: #ff6600; }

/* GOOD */
.callout-good { border-color: #44cc77; }
.callout-good .callout-label { color: #44cc77; }

/* BAD */
.callout-bad { border-color: #cc4455; background: rgba(204,68,85,0.04); }
.callout-bad .callout-label { color: #cc4455; }

/* ═══════════════════════════════════════════
   キャラクター会話枠
═══════════════════════════════════════════ */
.chara-dialogue {
  display: flex;
  gap: 0.9rem;
  align-items: flex-end;
  margin: 1.75rem 0;
}
.chara-dialogue.reverse { flex-direction: row-reverse; }
.chara-dialogue-avatar {
  width: 64px;
  height: 64px;
  flex-shrink: 0;
  border-radius: 8px;
  border: 2px solid var(--border);
  object-fit: cover;
  background: var(--bg-card);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  overflow: hidden;
}
.chara-dialogue-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.chara-dialogue-bubble-wrap { flex: 1; }
.chara-dialogue-name {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.15em;
  color: var(--text-muted);
  margin-bottom: 0.3rem;
}
.reverse .chara-dialogue-name { text-align: right; }
.chara-dialogue-bubble {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 4px 12px 12px 12px;
  padding: 0.75rem 1rem;
  font-size: 0.88rem;
  line-height: 1.65;
  color: var(--text-secondary);
  position: relative;
}
.reverse .chara-dialogue-bubble {
  border-radius: 12px 4px 12px 12px;
}
.chara-dialogue-bubble::before {
  content: '';
  position: absolute;
  bottom: 10px;
  left: -7px;
  border: 6px solid transparent;
  border-right-color: var(--border);
}
.reverse .chara-dialogue-bubble::before {
  left: auto;
  right: -7px;
  border-right-color: transparent;
  border-left-color: var(--border);
}
/* キャラ別カラー */
.chara-dialogue-chaos .chara-dialogue-avatar { border-color: #ff4444; }
.chara-dialogue-chaos .chara-dialogue-bubble { border-color: #ff4444; }
.chara-dialogue-chaos .chara-dialogue-bubble::before { border-right-color: #ff4444; }
.chara-dialogue-chaos.reverse .chara-dialogue-bubble::before { border-left-color: #ff4444; border-right-color: transparent; }
.chara-dialogue-chaos .chara-dialogue-name { color: #ff4444; }

.chara-dialogue-abyss .chara-dialogue-avatar { border-color: #4488ff; }
.chara-dialogue-abyss .chara-dialogue-bubble { border-color: #4488ff; }
.chara-dialogue-abyss .chara-dialogue-bubble::before { border-right-color: #4488ff; }
.chara-dialogue-abyss.reverse .chara-dialogue-bubble::before { border-left-color: #4488ff; border-right-color: transparent; }
.chara-dialogue-abyss .chara-dialogue-name { color: #4488ff; }

.chara-dialogue-null .chara-dialogue-avatar { border-color: #88aaff; }
.chara-dialogue-null .chara-dialogue-bubble { border-color: #88aaff; }
.chara-dialogue-null .chara-dialogue-bubble::before { border-right-color: #88aaff; }
.chara-dialogue-null.reverse .chara-dialogue-bubble::before { border-left-color: #88aaff; border-right-color: transparent; }
.chara-dialogue-null .chara-dialogue-name { color: #88aaff; }

/* ═══════════════════════════════════════════
   モバイルレスポンシブ修正（包括的）
═══════════════════════════════════════════ */

/* プロフィール統計グリッド（ベース） */
.profile-stats-grid { grid-template-columns: repeat(3, 1fr); }

@media (max-width: 640px) {

  /* ── 横スクロール防止 ── */
  html, body { overflow-x: hidden; }
  * { max-width: 100%; box-sizing: border-box; }

  /* ── グリッドオーバーフロー修正 ──
     1fr はデフォルトで auto minimum を持つため、
     min-content 幅でロックされる。
     minmax(0, 1fr) と min-width: 0 で解除する。 */
  .layout-grid { grid-template-columns: minmax(0, 1fr); }
  main { min-width: 0; }
  .article-wrap { grid-template-columns: minmax(0, 1fr); }
  article, .article-sidebar { min-width: 0; }

  /* ── ヘッダー ──
     スマホでは翻訳ボタン非表示・テーマ変更ボタン表示 */
  .header-inner { gap: 0.5rem; }
  .header-right { gap: 0.3rem; }
  .lang-switcher { display: none; }
  .theme-switcher { display: flex; gap: 0.15rem; }
  .theme-btn { font-size: 0.5rem; padding: 0.18rem 0.28rem; letter-spacing: 0; min-width: 0; }
  .cta-btn { display: none; }

  /* ── ヒーロー ── */
  .hero { padding: calc(var(--header-h) + 1.5rem) 0 2.5rem; overflow: hidden; min-height: 0; }
  .hero-content-box { margin-top: 0; max-width: 100%; padding: 1.25rem; }
  .hero-title { font-size: clamp(1.4rem, 5.5vw, 2rem); }
  .hero-desc { font-size: 0.85rem; }
  .hero-actions { flex-wrap: wrap; gap: 0.5rem; }
  .hero-actions .btn-primary, .hero-actions .btn-secondary { width: 100%; text-align: center; }
  .scp-corner { display: none; }
  .hero-accent-line { display: none; }
  .hero .container { padding: 0 1rem; }

  /* ── コンテナパディング統一（.hero .container は上で上書き） ── */
  .container { padding: 0 0.75rem; }

  /* ── スタッツグリッド ── */
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 0.5rem; }
  .stat-card { padding: 0.75rem; }

  /* ── タブ（横スクロール対応） ── */
  .tab-nav {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
    padding-bottom: 2px;
    scrollbar-width: none;
  }
  .tab-nav::-webkit-scrollbar { display: none; }
  .tab-btn { flex-shrink: 0; white-space: nowrap; padding: 0.6rem 0.9rem; }

  /* ── カテゴリーカード ── */
  .cat-card { padding: 1rem; }
  .cat-icon { font-size: 1.5rem; margin-bottom: 0.3rem; }

  /* ── 記事カード ── */
  .card-body { padding: 0.85rem; }

  /* ── キャラクターカード ── */
  .chara-grid { grid-template-columns: 1fr; }
  .chara-card { height: auto; min-height: 400px; }

  /* ── キャラクター会話枠 ── */
  .chara-dialogue { gap: 0.6rem; }
  .chara-dialogue-avatar { width: 48px; height: 48px; font-size: 1.4rem; }

  /* ── 強調枠（Callout / Info-box） ── */
  .callout { padding: 0.75rem 0.9rem; }
  .info-box { padding: 0.75rem 0.9rem; gap: 0.5rem; }

  /* ── プロフィール ── */
  .profile-full { padding: 1rem; }
  .profile-stats-grid { grid-template-columns: 1fr; }

  /* ── スキルテーブル ── */
  .skills-table td { padding: 0.45rem 0.5rem; }
  .skills-table th { padding: 0.35rem 0.5rem; font-size: 0.55rem; }
  .skill-bar-wrap { width: 60px; max-width: 60px; }

  /* ── カレンダー ── */
  .calendar-widget { padding: 0.75rem; }
  .cal-day { padding: 0.3rem 0.1rem; font-size: 0.65rem; }
  .cal-dow { font-size: 0.5rem; padding: 0.2rem 0; }

  /* ── コンタクトフォーム ── */
  .contact-grid { grid-template-columns: 1fr; }

  /* ── フッター ── */
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { flex-wrap: wrap; justify-content: flex-start; gap: 0.5rem; }

  /* ── ローディング画面 ── */
  .sf-main-panel { width: 92vw; padding: 1.5rem 1.2rem; }
  .sf-panel-sub { font-size: 0.4rem; letter-spacing: 0.1em; }

  /* ── 記事ラップ（オーバーフロー封じ込め） ── */
  .article-wrap { overflow-x: hidden; }

  /* ── 記事メタ情報行 ── */
  .article-info-row { gap: 0.4rem; font-size: 0.65rem; }

  /* ── コードヘッダー ── */
  .code-header { overflow: hidden; gap: 0.4rem; }
  .code-lang { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; }

  /* ── カレンダー凡例 ── */
  .cal-legend { flex-wrap: wrap; gap: 0.5rem; }
  .cal-legend-item { font-size: 0.55rem; }

  /* ── プロフィールソーシャルリンク ── */
  .profile-social-row { flex-wrap: wrap; gap: 0.4rem; }
  .profile-social-link { padding: 0.3rem 0.55rem; font-size: 0.6rem; min-width: 0; }

  /* ── フォーム送信ボタン ── */
  .form-submit { align-self: stretch; text-align: center; }

  /* ── ドットキャラゾーン ── */
  .dot-chara-inner { padding: 0 0.75rem; gap: 1rem; }

  /* ── チャートキャンバス ── */
  .chart-canvas-wrap { height: 180px; }

  /* ── 本文インラインコード折り返し ── */
  .article-body code { word-break: break-all; overflow-wrap: break-word; }

  /* ── クラシファイバナー ── */
  .classify-banner { letter-spacing: 0.06em; overflow: hidden; font-size: 0.52rem; white-space: nowrap; text-overflow: ellipsis; }

  /* ── 著者ボックス ── */
  .author-role { font-size: 0.6rem; overflow-wrap: break-word; word-break: break-word; }

  /* ═══════════════════════════════════════
     記事・プログラミングページ
  ═══════════════════════════════════════ */

  /* レイアウト */
  .article-wrap { padding: 1rem 0.75rem; }
  .article-header { padding: 1.25rem 1rem; overflow: hidden; }
  .article-doc-id { word-break: break-word; font-size: 0.55rem; letter-spacing: 0.1em; overflow-wrap: break-word; }
  .article-main-title { font-size: 1.25rem; line-height: 1.3; }

  /* 記事本文 */
  .article-body { overflow-x: hidden; }
  .article-body h2 { font-size: 1.1rem; padding: 0.5rem 0.75rem; margin: 2rem 0 0.75rem; overflow-wrap: break-word; }
  .article-body h3 { font-size: 0.95rem; overflow-wrap: break-word; }
  .article-body p { overflow-wrap: break-word; word-break: break-word; }
  .article-body ul, .article-body ol { margin-left: 1.2rem; }
  .article-body img { max-width: 100%; height: auto; display: block; }
  .article-body iframe { max-width: 100%; }
  .article-body pre { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
  .article-body pre code { white-space: pre; word-break: normal; overflow-wrap: normal; }
  .article-body table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
  .article-body blockquote { margin-left: 0; margin-right: 0; overflow-wrap: break-word; }

  /* コードブロック */
  .code-block { overflow: hidden; max-width: 100%; }
  .code-body { padding: 0.85rem 1rem; font-size: 0.78rem; overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* TOC */
  .toc { padding: 1rem; }
  .toc-list a { overflow-wrap: break-word; word-break: break-word; }

  /* シェアエリア */
  .article-share { flex-wrap: wrap; gap: 0.5rem; }
  .share-btn { padding: 0.35rem 0.65rem; font-size: 0.62rem; }

  /* 関連記事 */
  .related-grid { grid-template-columns: 1fr; }

  /* 著者ボックス */
  .author-box { overflow: hidden; }
}

/* 375px/390px: タブボタンを縮小してキャラクターが途切れないようにする */
@media (max-width: 400px) {
  .tab-btn { padding: 0.4rem 0.43rem; font-size: 0.62rem; letter-spacing: 0; }
}