/* Blog post — Cyber Miku style (page-only) */
:root{
  --cyan:       #39c5bb;
  --cyan-dim:   #1e7a76;
  --cyan-glow:  rgba(57,197,187,0.18);
  --cyan-faint: rgba(57,197,187,0.07);
  --bg:         #0a0e12;
  --bg2:        #0f151c;
  --bg3:        #141c24;
  --text:       #d4ecea;
  --text2:      #7fb8b5;
  --text3:      #3d7572;
  --border:     rgba(57,197,187,0.22);
  --border-dim: rgba(57,197,187,0.10);
}

body{background-color: var(--bg); color: var(--text);}

/* scanlines */
.scanlines {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0, 0, 0, 0.08) 2px,
    rgba(0, 0, 0, 0.08) 4px
  );
}
.page-wrapper, main, header, .sidebar {
  position: relative;
  z-index: 1;
}

/* progress bar */
#blogReadProgress{
  position:fixed; left:0; top:0; height:2px; width:0%;
  background: linear-gradient(90deg, var(--cyan), var(--cyan-dim));
  box-shadow: 0 0 8px var(--cyan);
  z-index:9998;
}

.blogpost-wrap{position:relative; z-index:1;}
.blogpost-page{max-width: 100%; margin: 0 auto;}

.blogpost-hero-simple{margin: 0 0 1.25rem;}
.post-hero{
  border-top: 3px solid #39c5bb;
  background: var(--bg2);
  position: relative;
  overflow: hidden;
  padding: 16px 16px 14px;
  border-radius: 6px;
  border: 1px solid rgba(57,197,187,0.1);
}
.post-hero::before{
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, #39c5bb, rgba(57,197,187,0.4), transparent);
  opacity: 0.7;
}
.page-hero-full, .page-header--hero-stack{
  border-top: 3px solid #39c5bb;
  background: var(--bg2);
  position: relative;
  overflow: hidden;
}
.page-hero-full::before, .page-header--hero-stack::before{
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, #39c5bb, rgba(57,197,187,0.4), transparent);
  opacity: 0.7;
  pointer-events:none;
}
.blogpost-meta-row{
  display:flex; flex-wrap:wrap; gap:.6rem; align-items:center;
  font-size:10px; letter-spacing:2px; text-transform:uppercase;
  color: var(--text3);
}
.post-date{font-family:'Space Mono', monospace;}
.category-tag{
  font-family: 'Space Mono', monospace;
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  background: rgba(57,197,187,0.1);
  border: 1px solid rgba(57,197,187,0.3);
  color: #39c5bb;
  padding: 3px 10px;
  display: inline-block;
}
.blogpost-badge{
  display:inline-flex; align-items:center;
  border:1px solid var(--border);
  color: var(--cyan);
  padding:.2rem .55rem;
  border-radius: 999px;
  background: rgba(57,197,187,.06);
}
.blogpost-title{
  margin:.75rem 0 .2rem;
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(28px, 5vw, 46px);
  line-height: 1.05;
  color: #ffffff;
  text-shadow: 0 0 30px rgba(57,197,187,0.35);
  letter-spacing: 1px;
}
/* 管理画面のアクセント（<span class="accent">…</span>）を有効化 */
.blogpost-title .accent,
.post-body .accent,
.blogpost-title .title-cyan,
.post-body .title-cyan,
.page-hero-full .accent,
.page-header--hero-stack .accent,
.post-hero .accent{
  color:#39c5bb;
}
.blogpost-lead{
  font-family: 'Noto Sans JP', system-ui, sans-serif;
  font-size: 13.5px;
  color: var(--text2);
  line-height:1.85;
  max-width: 720px;
  margin: .25rem 0 0;
}

.blogpost-grid{
  display:grid;
  grid-template-columns: 7fr 3fr; /* 7:3 */
  gap: 1.25rem;
  align-items:start;
}
@media (max-width: 600px){
  .blogpost-grid{grid-template-columns: 1fr;}
  .blogpost-sidebar{display:none;}
}
.blogpost-sidebar{
  position: sticky;
  top: 24px;
  padding: 0;
}
.blogpost-widget{
  background: var(--bg2);
  border: 1px solid rgba(57,197,187,0.1);
  border-left: 2px solid #39c5bb;
  border-radius: 6px;
  padding: 16px;
  margin-bottom: 20px;
}
.blogpost-widget-label{
  font-family: 'Space Mono', monospace;
  font-size: 9px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #39c5bb;
  margin-bottom: 12px;
  display: block;
}
.toc-label,.profile-label,.latest-label{font-family:'Space Mono', monospace;}
.read-time{font-family:'Space Mono', monospace;}
.author-sub,.share-btn,.related-date{font-family:'Space Mono', monospace;}
.profile-text{font-family:'Noto Sans JP', sans-serif;}

/* TOC */
.blogpost-toc{list-style:none; padding:0; margin:0;}
.blogpost-toc a{
  display:block;
  color: var(--text2);
  text-decoration:none;
  font-size:12px;
  line-height:1.75;
  padding:.38rem .15rem .38rem .55rem;
  border-left:1px solid transparent;
}
.blogpost-toc a:hover,
.blogpost-toc a.active{
  color: var(--cyan);
  border-left-color: var(--cyan);
}
.blogpost-toc .is-h3 a{padding-left:20px; font-size:10.5px; line-height:1.7;}
.blogpost-readtime{
  margin-top:.75rem;
  font-family:'Space Mono', ui-monospace, monospace;
  font-size:9.5px;
  color: var(--text3);
  letter-spacing:.08em;
}

/* Body typography */
.blogpost-article{
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(57,197,187,.08);
  border-radius: 6px;
  padding: 1.25rem 1.35rem;
}
.post-body{color: var(--text); font-family:'Noto Sans JP', system-ui, sans-serif; font-size:14.5px; line-height:1.9;}
.post-body h2{
  font-family: 'Bebas Neue', sans-serif;
  font-size: 22px;
  letter-spacing: 1px;
  color: #ffffff;
  margin: 36px 0 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(57,197,187,0.1);
  position: relative;
}
.post-body h2::after{
  content:'';
  position:absolute;
  left:0; bottom:-1px;
  width:40px; height:1px;
  background: #39c5bb;
}
.post-body h3{
  font-family: 'Bebas Neue', sans-serif;
  font-size:14px;
  color: var(--cyan);
  margin: 1.25rem 0 .4rem;
}
.post-body h3::before{content:'// '; color: var(--cyan-dim);}
.post-body p{margin:.85rem 0;}
.post-body ul{list-style:none; padding-left:0; margin:.85rem 0;}
.post-body ul li{
  padding-left:18px;
  position:relative;
  margin-bottom:8px;
  font-size:14.5px;
  line-height:1.85;
  color:#d4ecea;
}
.post-body ul li::before{
  content:'';
  position:absolute;
  left:0;
  top:10px;
  width:6px;
  height:6px;
  background:#39c5bb;
  border-radius:50%;
}
.post-body .lead-block{
  margin: 1rem 0;
  padding: 14px 18px;
  border-left: 3px solid var(--cyan);
  background: var(--cyan-faint);
  color: var(--text2);
  border-radius: 6px;
}
.post-body .tip-card{
  display:flex;
  gap:.9rem;
  align-items:flex-start;
  padding: 14px 16px;
  margin: 1.1rem 0;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 6px;
}
.post-body .tip-card .tip-icon{
  width:28px;height:28px;
  display:grid;place-items:center;
  border:1px solid var(--cyan);
  color: var(--cyan);
  font-family:'Space Mono', ui-monospace, monospace;
  border-radius: 4px;
  flex:0 0 auto;
}
.post-body .tip-card .tip-body{
  font-size:13px;
  color: var(--text2);
  line-height:1.75;
}
.post-body pre{
  background:#060a0d;
  border-left:2px solid var(--cyan-dim);
  padding:.85rem 1rem;
  overflow:auto;
  color:#7ec8c5;
  font-family:'Space Mono', ui-monospace, monospace;
  font-size:12px;
  border-radius:8px;
}
.post-body pre[data-label]{
  position:relative;
  padding-top: 1.6rem;
}
.post-body pre[data-label]::before{
  content: '// ' attr(data-label);
  position:absolute;
  top:.55rem;
  left:1rem;
  font-size:9px;
  letter-spacing:2px;
  color: var(--text3);
  text-transform: uppercase;
}
.post-body blockquote{
  background: var(--bg2);
  border-left:3px solid var(--cyan);
  padding: 14px 18px;
  margin: 1.25rem 0;
  color: var(--text2);
  position:relative;
}
.post-body blockquote::after{
  content:'“';
  position:absolute;
  right: 10px; top: -10px;
  font-family:'Bebas Neue', system-ui, sans-serif;
  font-size:56px;
  color: rgba(30,122,118,.35);
}
.post-body figure{margin:1.2rem 0;}
.post-body figure img{max-width:100%; border-radius:10px; border:1px solid rgba(57,197,187,.12); display:block;}
.post-body figcaption{
  margin-top:.45rem;
  font-family:'Space Mono', ui-monospace, monospace;
  font-size:9px;
  letter-spacing:2px;
  color: var(--text3);
}
.post-body figcaption::before{content:'// '; color: var(--cyan-dim);}
.post-body img{max-width:100%; border-radius:10px; border:1px solid rgba(57,197,187,.12);}
.post-body h2, .post-body h3{scroll-margin-top: calc(var(--header-offset, 72px) + 14px);}

/* Related */
.blogpost-related{
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border-dim);
}
.blogpost-related-title{
  font-family:'Bebas Neue', system-ui, sans-serif;
  font-size:18px;
  letter-spacing:2px;
  color: var(--text);
  margin-bottom:.85rem;
}
.blogpost-related-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
}
@media(max-width:600px){.blogpost-related-grid{grid-template-columns:1fr;}}
.blogpost-rel-card{
  position:relative;
  background: var(--bg2);
  border: 1px solid var(--border-dim);
  border-radius: 6px;
  padding: .9rem 1rem;
  text-decoration:none;
  color: inherit;
  overflow:hidden;
  transition: border-color .18s;
}
.blogpost-rel-card::after{
  content:'';
  position:absolute;
  left:0; right:0; bottom:0;
  height:2px;
  background: var(--cyan);
  transform: scaleX(0);
  transform-origin:left;
  transition: transform .18s;
}
.blogpost-rel-card:hover{border-color: rgba(57,197,187,.45);}
.blogpost-rel-card:hover::after{transform: scaleX(1);}
.blogpost-rel-cat{
  font-family:'Space Mono', ui-monospace, monospace;
  font-size:9px; letter-spacing:3px;
  color: var(--cyan);
  text-transform:uppercase;
}
.blogpost-rel-title{margin:.35rem 0 .25rem; font-size:13px; font-weight:700; line-height:1.4; color: var(--text);}
.blogpost-rel-date{font-family:'Space Mono', ui-monospace, monospace; font-size:10px; color: var(--text3);}