/* =========================================
   BLOG SINGLE — clean & readable
   Advent Cosplay
   ========================================= */

/* ---- Page background / base ---- */
body.single{
  background: url('https://adventcosplay.com/wp-content/uploads/2025/10/background_blog.jpg')
             repeat center top/cover;
  color:#2c2c2c;
  font-family:"Yusei Magic", serif;
  line-height:1.9;
}

/* ---- Article frame ---- */
.blog-article{
  max-width:880px;
  margin:60px auto;
  padding:40px 50px;
  background:url('https://adventcosplay.com/wp-content/uploads/2025/08/smokeground_Y.jpg') repeat;
  border:1px solid rgba(80,60,40,.3);
  border-radius:14px;
  box-shadow:0 8px 25px rgba(0,0,0,.25);
}
/* =======================================================
   Title: band only for the page title (not for h2)
   ======================================================= */
/* ページタイトルの帯（本文幅にフィット） */
.bs-title.bs-title--ornament {
  display: block;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  margin: 1.5rem auto 1rem;

  /* タイポグラフィ */
  text-align: center;
  font-family: 'Hangyaku', serif;
  font-size: clamp(1.3rem, 3.2vw, 1.8rem); /* 画面幅で縮む */
  line-height: 1.35;
  color: #3b2a1c;
  text-shadow: 0 1px 1px rgba(255,255,255,.6);

  /* 帯の見た目 */
  background: url('https://adventcosplay.com/wp-content/uploads/2025/10/category.png') center/contain no-repeat;
  /* 2行でも帯が潰れないよう上下だけ余白を付ける */
  padding: 1rem 0;
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(0,0,0,.08);
}

/* テーマの h1 既定マージン等をリセット（帯の高さを安定化） */
.bs-title.bs-title--ornament,
.bs-title.bs-title--ornament * {
  margin: 0;
}

/* 旧タイトルを出している場合は非表示（重複回避） */
.blog-header .blog-title { display: none; }

	
/* もしテンプレに .blog-title が残っていて重複表示するなら非表示に */
.blog-header .blog-title{ display:none; }

/* ---- Meta (date, cats) ---- */
.blog-meta{
  text-align:center;
  font-size:.92rem;
  color:#666;
  margin:-.4rem 0 26px;
}


/* =======================================================
   TOC（1種類に統一）: .toc-wrap を基本に、.blog-toc も吸収
   ======================================================= */
.toc-wrap, .blog-toc{
  --toc-accent:#823327;
  --toc-bg:rgba(255,255,255,.88);
  background:var(--toc-bg);
  border:1px solid rgba(0,0,0,.08);
  border-radius:12px;
  padding:14px 16px 12px;
  margin:0 0 32px;
  box-shadow:0 8px 20px rgba(0,0,0,.06);
  backdrop-filter:blur(2px);
}
.toc-wrap::before, .blog-toc .toc-title{
  content:"Contents";
  display:block;
  margin:0 0 .5rem;
  color:var(--toc-accent);
  font-weight:700;
  letter-spacing:.04em;
  font-family:"Hangyaku", serif;
}
.toc-wrap .toc-list,
#toc-list{ list-style:none; margin:0; padding-left:0; }
.toc-wrap .toc-list-item,
#toc-list li{ margin:.25rem 0; }
.toc-wrap a, #toc-list a{
  color:#3b2a1c; text-decoration:none; border-radius:6px; padding:.18rem .2rem;
}
.toc-wrap a:hover, #toc-list a:hover{ background:rgba(130,51,39,.08); }
.toc-wrap .is-active-link{ color:var(--toc-accent); background:rgba(130,51,39,.10); }
.toc-wrap .toc-list .toc-list{ padding-left:1rem; }

/* =======================================================
   Headings（本文側）: シンプルで読みやすく
   ======================================================= */
.entry-content{ line-height:1.9; color:#2b2b2b; margin-top:1.2rem; }

/* h2: 左寄せ＋下線アクセント（帯は付けない） */
.entry-content h2{
  margin:2.2rem 0 1rem;
  font-size:clamp(1.4rem,2.4vw,1.8rem);
  color:#493224;
  padding-bottom:.35rem;
  border-bottom:2px solid rgba(130,60,50,.25);
  background:none !important; /* 念のため帯を無効化 */
}

/* h3: サブ見出し */
.entry-content h3{
  margin:1.6rem 0 .6rem;
  font-size:clamp(1.15rem,2vw,1.35rem);
  color:#4d3428;
}

/* h4: さらに小見出し */
.entry-content h4{
  margin:1.2rem 0 .4rem;
  font-size:clamp(1.05rem,1.8vw,1.2rem);
  color:#5e4233;
}

/* ---- 任意でアイコンを付けたい時だけ（本文でクラスを付ける） ---- */
.h2-feather{ border-bottom-color:rgba(130,51,39,.35); }
.h3-nib::before{
  content:""; display:inline-block; width:18px; height:18px; margin-right:.4rem;
  background:url('https://adventcosplay.com/wp-content/uploads/2025/03/item03.png') center/contain no-repeat;
  vertical-align:-3px; opacity:.85;
}

/* ---- Paragraph / lists ---- */
.blog-content p{ margin:0 0 1.6em; text-align:justify; }

/* ---- Numbered procedure（縦ライン＋連番） ---- */
.proc{ counter-reset:step; list-style:none; margin:.6rem 0 1rem; padding-left:0; }
.proc li{
  counter-increment:step; position:relative;
  padding:.55rem .6rem .55rem 2.2rem;
  border-left:2px solid rgba(130,51,39,.22);
}
.proc li::before{
  content:counter(step);
  position:absolute; left:-14px; top:.45rem;
  width:28px; height:28px; border-radius:50%;
  display:grid; place-items:center;
  background:linear-gradient(135deg,#823327,#c8765c);
  color:#fff; font-weight:700; font-size:.9rem;
  box-shadow:0 2px 8px rgba(0,0,0,.15);
}

/* ---- Figures / captions ---- */
.entry-content figure{ margin:1.6rem auto; }
.entry-content figure img{
  display:block; width:100%; height:auto; border-radius:10px;
  box-shadow:0 8px 24px rgba(0,0,0,.06);
}
.entry-content figcaption{
  text-align:center; color:#6b5b4a; font-size:.9rem; margin-top:.45rem;
}

/* ---- Blockquote ---- */
.entry-content blockquote{
  position:relative; margin:1.6rem 0; padding:1rem 1.2rem 1rem 2.2rem;
  background:rgba(255,255,255,.72);
  border-left:4px solid #c89a6b; border-radius:10px; color:#463627;
  box-shadow:0 4px 12px rgba(0,0,0,.05);
}
.entry-content blockquote::before{
  content:"“"; position:absolute; left:.6rem; top:.1rem; font-size:2rem; color:#c89a6b; line-height:1;
}

/* ---- Callouts (optional shortcodes) ---- */
.callout{
  border:1px solid rgba(130,51,39,.2);
  border-left-width:6px;
  background:rgba(255,255,255,.85);
  border-radius:10px; padding:.85rem 1rem; margin:1rem 0;
  box-shadow:0 6px 16px rgba(0,0,0,.06);
}
.callout-hd{ font-weight:700; margin-bottom:.2rem; }
.callout.tip{  border-left-color:#2fa97b; }
.callout.warn{ border-left-color:#e07a16; }
.callout.memo{ border-left-color:#2b7fe0; }

/* ---- Author box ---- */
.author-box{
  display:flex; align-items:center; gap:20px;
  margin-top:56px; padding-top:20px; border-top:1px solid rgba(0,0,0,.1);
}
.author-img img{ border-radius:50%; box-shadow:0 0 8px rgba(0,0,0,.2); }
.author-name{ font-weight:700; color:#3a1818; }
.author-desc{ color:#555; font-size:.95rem; }

/* ---- Next CTA ---- */
.next-cta{ margin:1.4rem 0 0; text-align:center; }
.next-cta__link{
  display:inline-block; padding:.8rem 1.2rem; border-radius:999px;
  color:#fff; text-decoration:none; font-weight:700;
  background:linear-gradient(135deg,#823327 0%, #5e2941 100%);
  box-shadow:0 10px 22px rgba(0,0,0,.12);
  transition:transform .15s ease, filter .15s ease;
}
.next-cta__link:hover{ transform:translateY(-2px); filter:brightness(.96); }


/* 1つめの見出しが帯に近すぎる場合の余白調整 */
.entry-content > h2:first-of-type{ margin-top: 1.4rem; }


/* 帯タイトル：親(.blog-article)の内側幅にぴったり合わせる */
.bs-title.bs-title--ornament{
  display:block;
  width:100%;                 
  max-width:100%;
  margin: 0 0 1rem;           
  box-sizing:border-box;

  text-align:center;
  font-family:'Hangyaku', serif;
  font-size: clamp(1.2rem, 2.6vw, 1.8rem);
  line-height:1.35;
  color:#3b2a1c;
  text-shadow:0 1px 1px rgba(255,255,255,.6);
  background: url('https://adventcosplay.com/wp-content/uploads/2025/10/category.png') center no-repeat;
  background-size: 100% auto;  
  padding: 1rem 0;           
  border-radius:12px;
  box-shadow:0 8px 20px rgba(0,0,0,.08);
}

/* =======================================================
   Series Nav Buttons（ページ最下部の 前／一覧／次）
   ======================================================= */
.post-footer-nav{
  --nav-accent: #823327;           /* 深紅：世界観に合わせて */
  --nav-bg: rgba(255,255,255,.85); /* 半透明の明るい下地 */
  --nav-border: rgba(0,0,0,.10);

  display:flex;
  gap:.6rem;
  justify-content:center;
  align-items:center;
  flex-wrap:wrap;

  margin: 28px auto 8px;
  padding: 14px 16px;
  max-width: 880px;
  background: var(--nav-bg);
  border: 1px solid var(--nav-border);
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
}

/* 各ボタン */
.post-footer-nav a{
  display:inline-flex;
  align-items:center;
  gap:.4rem;

  padding: .6rem .95rem;
  border-radius: 999px;
  text-decoration:none;
  font-weight: 700;
  letter-spacing:.02em;

  color:#3b2a1c;
  background: rgba(130,51,39,.10);
  border:1px solid rgba(130,51,39,.28);
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}

/* ホバー／フォーカス */
.post-footer-nav a:hover,
.post-footer-nav a:focus-visible{
  background: rgba(130,51,39,.18);
  border-color: rgba(130,51,39,.45);
  box-shadow: 0 6px 14px rgba(130,51,39,.18);
  transform: translateY(-1px);
  outline: none;
}

/* 前後の矢印（テキストの矢印はPHP側にあるので視覚を補強） */
.btn-prev::before{
  content:"";
  width:10px; height:10px;
  border-left:2px solid currentColor;
  border-bottom:2px solid currentColor;
  transform: rotate(45deg);
  display:inline-block;
}
.btn-next::after{
  content:"";
  width:10px; height:10px;
  border-right:2px solid currentColor;
  border-top:2px solid currentColor;
  transform: rotate(45deg);
  display:inline-block;
}

/* 中央の「一覧へ」だけ少し中立トーンに */
.btn-list{
  background: rgba(60,60,60,.06);
  border-color: rgba(60,60,60,.2);
}
.btn-list:hover,
.btn-list:focus-visible{
  background: rgba(60,60,60,.12);
  border-color: rgba(60,60,60,.35);
}

/* 画面幅が狭い時は縦積み＋タップしやすく */
@media (max-width: 560px){
  .post-footer-nav{
    margin-top: 22px;
    padding: 12px;
    gap: .5rem;
  }
  .post-footer-nav a{
    width: 100%;
    justify-content: center;
    padding: .7rem 1rem;
  }
}

/* 既存テーマの雰囲気に馴染ませる微調整 */
body.single .post-footer-nav{
  backdrop-filter: blur(2px);
  background-image:
    radial-gradient(ellipse at top, rgba(255,255,255,.06), transparent 55%);
}

/* 動きに弱い環境配慮 */
@media (prefers-reduced-motion: reduce){
  .post-footer-nav a{ transition: none; transform: none !important; }
}

.notice-intro,
.notice-outro {
  background: rgba(255, 245, 230, .6); /* 薄いクリーム。透明度で重さを抑える */
  padding: 1rem 1.25rem;
  margin: 1.25rem auto;
  max-width: 760px;      /* 本文幅と揃えるなら同じ値に */
  border-radius: 10px;
}

.notice-intro .readtime {
  font-size: .95rem;
  opacity: .75;
  margin: 0 0 .25rem;
}

.notice-intro .note,
.notice-outro .note {
  line-height: 1.8;
  font-size: .95rem;
}
.notice-intro, .notice-outro { max-width: 760px; margin-left: auto; margin-right: auto; }

/* 枠：本文幅・フレーム画像はそのまま */
.author-card{
  max-width: var(--wp--style--global--content-size, 760px);
  margin: 3rem auto 2.5rem;
  background: url("https://adventcosplay.com/wp-content/uploads/2025/10/label01.png") center/100% 100% no-repeat;
  --frame-padding: clamp(20px, 5vw, 56px);
  padding: var(--frame-padding);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0,0,0,.12);
}

/* パスポート風：左に顔写真、右にテキスト群 */
.author-card__inner{
  display: grid;
  grid-template-columns: 128px 1fr;
  grid-auto-rows: auto;
  column-gap: 1.25rem;
  align-items: start;
  text-align: left;   /* 右側は左寄せ */
}

/* 左列：アイコン（3行ぶん縦に跨がせる） */
.author-card__avatar{ grid-column: 1; grid-row: 1 / span 3; }
.author-card__avatar img{
  width: 120px; height: 120px;
  border-radius: 9999px; display:block;
  box-shadow: 0 0 8px rgba(0,0,0,.15);
}

/* 右列：上から「名前」「紹介」「ボタン」 */
.author-card__body{ grid-column: 2; grid-row: 1; }
.author-card__name{
  font-weight: 800; font-size: 1.25rem;
  margin: .1rem 0 .35rem;
}
.author-card__bio{
  margin: 0 0 .65rem;
  line-height: 1.9; color: #333; opacity: .95;
  max-width: 48em;
}

.author-card__cta{
  grid-column: 2; grid-row: 3;    /* 右列のいちばん下 */
  justify-self: start;            /* 左寄せ配置 */
  margin-top: .2rem;
}
.author-card__btn{
  display:inline-block;
  padding:.6rem 1.05rem;
  border-radius:999px;
  text-decoration:none;
  border:1px solid rgba(0,0,0,.18);
  background:#fff; font-weight:600;
  transition:transform .15s ease, box-shadow .15s ease;
}
.author-card__btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(0,0,0,.12);
}

@media (max-width: 640px){
  .author-card {
    margin: 2rem 1rem;
  }

  /* 縦並び・左寄せに変更 */
  .author-card__inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    gap: 0.8rem;
  }

  .author-card__avatar img {
    width: 80px;
    height: 80px;
    border-radius: 9999px;
    margin-bottom: 0.2rem;
  }

  .author-card__name {
    font-size: 1.1rem;
    margin-bottom: 0.25rem;
  }

  .author-card__bio {
    font-size: 0.95rem;
    line-height: 1.8;
    margin-bottom: 0.6rem;
  }

  .author-card__cta {
    align-self: flex-end; /* ボタンは右寄せ（パスポートの署名欄のような感覚） */
    margin-top: 0.2rem;
  }
}