/* Page: Blog Post (refined) */
/* Make page body and footer share the same background to avoid mismatch */
body{ background:#2a3647; color:#e7ecff }
.footer{ background:#2a3647; border-top:1px solid rgba(255,255,255,.15) }
.footer p{ color:#e7ecff; opacity:.9 }

/* Hero (reuse blog styling) */
.blog-hero{ padding-block: clamp(64px,9vw,100px); background: linear-gradient(135deg,#2e3a4f,#3a4a63); color:#e7ecff; border-bottom:1px solid rgba(255,255,255,.15) }
.blog-title{ font-family: "Noto Serif JP", Georgia, serif; font-size: clamp(28px, 5vw, 44px); font-weight:900; letter-spacing:.02em; margin:0 0 6px 0 }
.blog-subtitle{ font-size:14px; color:#cbd5e1; margin:0 }
@media (max-width: 640px){ .blog-hero{ display:none } }

.post{ background:#2a3647; color:#e7ecff; padding-bottom: 80px }
.post-article{ max-width: 840px; margin: 0 auto; padding: 36px 16px; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.18); border-radius:16px; box-shadow: 0 8px 24px rgba(0,0,0,.3) }

/* Progress bar */
.post-progress{ position:fixed; top:0; left:0; height:3px; width:0; background:linear-gradient(90deg,#0ea5e9,#8b5cf6); z-index:100 }

/* Breadcrumb */
.post-breadcrumb{ font-size:12px; color:#cbd5e1; margin: 0 0 8px 0 }
.post-breadcrumb a{ color:#cbd5e1; text-decoration:none }
.post-breadcrumb a:hover{ text-decoration:underline }

.post-header{ margin-bottom: 20px }
.post-title{ font-family: "Noto Serif JP", Georgia, serif; font-size: clamp(26px, 4.6vw, 40px); margin:0 0 10px 0; font-weight:900; letter-spacing:.01em; color:#e7ecff }
.post-meta{ color:#cbd5e1; font-size:13px; font-weight:700; letter-spacing:.02em }

.post-cover{ margin: 14px 0 22px 0 }
.post-cover img{ width:100%; height: 420px; object-fit: cover; border-radius: 14px; box-shadow: 0 16px 40px rgba(0,0,0,.4); border:1px solid rgba(255,255,255,.15) }

/* Author */
.post-author{ display:flex; align-items:center; gap:12px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12); padding:12px 14px; border-radius:12px; margin: 0 0 18px 0 }
.post-author .avatar{ width:40px; height:40px; border-radius:50%; background:rgba(255,255,255,.15) }
.post-author .name{ font-weight:800; color:#e7ecff }
.post-author .role{ font-size:12px; color:#cbd5e1 }

/* Body */
.post-body{ font-size:16px; line-height:1.9; color:#e7ecff }
.post-body p{ margin: 0 0 18px 0 }
.post-body p:first-of-type::first-letter{ float:none }
.post-body .pullquote{ margin: 18px 0; padding: 12px 16px; border-left:4px solid #0ea5e9; color:#e7ecff; background:rgba(14,165,233,.1); border-radius:8px }

/* Headings */
.post-body h2{ font-size:26px; font-weight:900; color:#e7ecff; margin:36px 0 16px 0; letter-spacing:.02em; border-bottom:2px solid rgba(255,255,255,.15); padding-bottom:10px }
.post-body h3{ font-size:20px; font-weight:800; color:#cbd5e1; margin:28px 0 12px 0; letter-spacing:.02em }

/* Links */
.post-body a{ color:#0ea5e9; text-decoration:underline; transition: color .2s ease }
.post-body a:hover{ color:#38bdf8 }

/* Lists */
.post-body ul, .post-body ol{ margin:0 0 18px 0; padding-left:24px; color:#cbd5e1 }
.post-body li{ margin:8px 0 }

/* Code */
.post-body code{ background:rgba(255,255,255,.08); color:#0ea5e9; padding:2px 6px; border-radius:4px; font-size:14px }
.post-body pre{ background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); padding:16px; border-radius:8px; overflow-x:auto; margin:18px 0 }
.post-body pre code{ background:none; padding:0 }

/* Blockquote */
.post-body blockquote{ border-left:4px solid #0ea5e9; padding-left:16px; margin:18px 0; color:#cbd5e1; font-style:italic }

/* HR */
.post-body hr{ border:none; border-top:2px solid rgba(255,255,255,.15); margin:32px 0 }

/* Images in body */
.post-body img{ max-width:100%; height:auto; border-radius:8px; margin:20px 0; box-shadow:0 8px 20px rgba(0,0,0,.3); border:1px solid rgba(255,255,255,.12) }

/* Article TOC (Table of Contents) */
.article-toc{ background:rgba(255,255,255,.08); border:2px solid rgba(255,255,255,.15); border-radius:16px; padding:24px 28px; margin:0 0 32px 0; box-shadow: 0 4px 12px rgba(0,0,0,.25) }
.article-toc h3{ font-size:18px; font-weight:900; color:#e7ecff; margin:0 0 16px 0; letter-spacing:.02em; border-bottom:2px solid rgba(255,255,255,.2); padding-bottom:12px }
.article-toc ul{ list-style:none; margin:0; padding:0 }
.article-toc li{ margin:0 0 10px 0 }
.article-toc a{ display:block; color:#cbd5e1; text-decoration:none; font-weight:700; font-size:15px; padding:10px 14px; border-radius:10px; transition: all .2s ease; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12) }
.article-toc a:hover{ background:#0ea5e9; color:#ffffff; border-color:#0ea5e9; transform: translateX(4px) }
.article-toc a::before{ content:"▸ "; color:#0ea5e9; font-weight:900; margin-right:6px }
.article-toc a:hover::before{ color:#ffffff }

/* Smooth scroll for anchor links */
html{ scroll-behavior: smooth }

/* Tags */
.post-tags{ display:flex; gap:8px; flex-wrap:wrap; margin-top: 16px }
.post-tag{ font-size:12px; font-weight:800; color:#e7ecff; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.15); padding:6px 10px; border-radius:999px }

@media (max-width:640px){ .post-cover img{ height: 220px } }