/* CRIMSON LOGIC — BLOG shared style */
@import url('https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&family=Noto+Sans+JP:wght@400;500;700&display=swap');

:root{
  --crimson:#c40000;
  --gold:#d4af37;
  --bg:#050505;
  --border:#1a1a1a;
  --text:#e8e8e8;
  --muted:#888;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg);
  color:var(--text);
  font-family:'Noto Sans JP',sans-serif;
  line-height:1.9;
  min-height:100vh;
}
body::before{
  content:'';
  position:fixed;inset:0;
  background:
    radial-gradient(ellipse at 20% 0%, rgba(196,0,0,0.07), transparent 50%),
    radial-gradient(ellipse at 80% 100%, rgba(212,175,55,0.04), transparent 50%);
  pointer-events:none;z-index:0;
}

/* ===== NAV ===== */
nav{
  position:relative;z-index:2;
  display:flex;justify-content:space-between;align-items:center;
  padding:22px 40px;border-bottom:1px solid #0f0f0f;
  flex-wrap:wrap;gap:12px;
}
.logo{font-family:'Space Mono',monospace;font-size:0.85rem;letter-spacing:0.35em;color:#fff;font-weight:700;}
.logo span{color:var(--crimson);}
.nav-links{display:flex;gap:22px;flex-wrap:wrap;}
.nav-links a{
  color:#777;text-decoration:none;
  font-family:'Space Mono',monospace;font-size:0.62rem;letter-spacing:0.25em;
  transition:color 0.3s;
}
.nav-links a:hover{color:#fff;}
.nav-links a.active{color:var(--crimson);}

/* ===== LAYOUT ===== */
.main-wrapper{position:relative;z-index:1;max-width:860px;margin:0 auto;padding:70px 24px 90px;}
.page-header{text-align:center;margin-bottom:56px;animation:fadeUp 0.8s ease both;}
.page-header .kana{font-family:'Space Mono',monospace;font-size:0.6rem;letter-spacing:0.5em;color:var(--gold);margin-bottom:16px;}
.page-header h1{font-size:1.5rem;font-weight:700;letter-spacing:0.08em;line-height:1.7;}
.page-header .lede{font-size:0.82rem;color:var(--muted);margin-top:14px;line-height:1.9;}
.section-label{font-family:'Space Mono',monospace;font-size:0.6rem;letter-spacing:0.4em;color:var(--crimson);margin:0 0 20px;}

/* ===== BLOG LIST ===== */
.post-list{display:flex;flex-direction:column;gap:16px;}
.post-card{
  display:block;border:1px solid var(--border);padding:26px 28px;
  background:rgba(255,255,255,0.02);text-decoration:none;color:var(--text);
  transition:border-color 0.3s, transform 0.3s;
  animation:fadeUp 0.7s ease both;
}
.post-card:hover{border-color:var(--crimson);transform:translateX(4px);}
.post-meta{font-family:'Space Mono',monospace;font-size:0.58rem;letter-spacing:0.25em;color:var(--gold);margin-bottom:10px;}
.post-card h2{font-size:1.02rem;font-weight:700;line-height:1.7;margin-bottom:10px;}
.post-card p{font-size:0.78rem;color:var(--muted);line-height:1.8;}
.post-card .read{font-family:'Space Mono',monospace;font-size:0.56rem;letter-spacing:0.3em;color:var(--crimson);margin-top:14px;}

/* ===== ARTICLE ===== */
.article-header{margin-bottom:48px;border-bottom:1px solid var(--border);padding-bottom:36px;animation:fadeUp 0.8s ease both;}
.article-header .post-meta{margin-bottom:14px;}
.article-header h1{font-size:1.35rem;font-weight:700;line-height:1.8;letter-spacing:0.04em;}
.article-body{font-size:0.9rem;line-height:2.1;}
.article-body h2{
  font-size:1.02rem;margin:54px 0 20px;padding-left:14px;
  border-left:3px solid var(--crimson);letter-spacing:0.05em;line-height:1.7;
}
.article-body p{margin-bottom:1.6em;color:#ccc;}
.article-body strong{color:#fff;}
.article-body ul{margin:0 0 1.6em 1.4em;color:#ccc;}
.article-body li{margin-bottom:0.5em;}

/* CTA */
.tool-cta{
  display:block;text-align:center;border:1px solid var(--crimson);
  padding:22px;margin:36px 0;text-decoration:none;
  background:rgba(196,0,0,0.07);transition:0.35s;
}
.tool-cta:hover{background:rgba(196,0,0,0.2);box-shadow:0 0 22px rgba(196,0,0,0.3);}
.tool-cta .cta-label{font-family:'Space Mono',monospace;font-size:0.56rem;letter-spacing:0.35em;color:var(--crimson);margin-bottom:8px;}
.tool-cta .cta-name{color:#fff;font-size:0.95rem;font-weight:700;letter-spacing:0.05em;}
.tool-cta .cta-sub{font-size:0.7rem;color:var(--muted);margin-top:6px;}
.tool-cta.gold{border-color:var(--gold);background:rgba(212,175,55,0.05);}
.tool-cta.gold:hover{background:rgba(212,175,55,0.14);box-shadow:0 0 22px rgba(212,175,55,0.25);}
.tool-cta.gold .cta-label{color:var(--gold);}

/* ===== AFFILIATE SLOT ===== */
.aff-section{margin:64px 0 0;border-top:1px solid var(--border);padding-top:40px;}
.aff-pr{
  display:inline-block;font-family:'Space Mono',monospace;font-size:0.52rem;
  letter-spacing:0.3em;color:#555;border:1px solid #2a2a2a;padding:3px 10px;margin-bottom:16px;
}
.aff-slot{border:1px solid var(--border);padding:24px;background:rgba(255,255,255,0.02);margin-bottom:14px;}
.aff-slot img{max-width:100%;height:auto;}

/* note link */
.note-link{
  margin-top:56px;padding-top:28px;border-top:1px solid var(--border);
  font-size:0.76rem;color:var(--muted);
}
.note-link a{color:var(--gold);text-decoration:none;border-bottom:1px solid rgba(212,175,55,0.4);}
.note-link a:hover{color:#fff;}

/* back */
.back-to-list{
  display:inline-block;margin-top:36px;font-family:'Space Mono',monospace;
  font-size:0.6rem;letter-spacing:0.3em;color:#777;text-decoration:none;transition:color 0.3s;
}
.back-to-list:hover{color:var(--crimson);}

footer{
  position:relative;z-index:1;padding:50px 40px;text-align:center;
  font-family:'Space Mono',monospace;font-size:0.55rem;color:#333;
  letter-spacing:0.25em;border-top:1px solid #0f0f0f;line-height:2;
}
@keyframes fadeUp{from{opacity:0;transform:translateY(18px);}to{opacity:1;transform:translateY(0);}}
@media (max-width:640px){
  nav{padding:18px 20px;}
  .nav-links{gap:14px;}
  .main-wrapper{padding:50px 18px 70px;}
}