/* =========================================================
   Advent Cosplay — Frames & Page Backgrounds
   ========================================================= */

/* まず main はフル幅背景 / 中身は各ブロックが中央寄せ */
main{
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;      /* SPで重くなるなら下の@mediaでscrollへ */
  padding: 36px 0 60px;              /* ヘッダー/フッターと密着しないように */
}
@media (max-width: 768px){
  main{ background-attachment: scroll; padding: 24px 0 40px; }
}

/* 中身の代表的ブロックを中央寄せ（最大幅は好みで） */
.bs-article, .gallery-single, .wa-panel, .bs-bodygrid, .bs-related, .works-hero, .works-intro{
  max-width: 1200px;
  margin-left: auto; margin-right: auto;
  padding-left: 16px; padding-right: 16px;
}



/* =========================================================
   額縁イメージ（URLを変数で一元管理）
   ========================================================= */
:root{
  --frame-toc:        url('https://adventcosplay.com/wp-content/uploads/2025/06/flame_wide.png');
  --frame-long:       url('https://adventcosplay.com/wp-content/uploads/2025/06/flame_long.png');

  /* 正方形（ギャラリーやカード用） */
  --frame-sq-yellow:  url('https://adventcosplay.com/wp-content/uploads/2025/06/flame_yellow.png');
  --frame-sq-green:   url('https://adventcosplay.com/wp-content/uploads/2025/06/flame_deepblue.png');
  --frame-sq-ivory:   url('https://adventcosplay.com/wp-content/uploads/2025/06/flame_standard.png');
  --frame-sq-cyan:    url('https://adventcosplay.com/wp-content/uploads/2025/06/flame_violet.png');
}

/* =========================================================
   目次（TOC）額縁
   ========================================================= */
.bs-toc{ margin-bottom: 16px; }
.bs-toc.bs-toc--framed{
  position: relative;
  background: var(--frame-toc) center/100% 100% no-repeat;
  padding: clamp(18px, 2.4vw, 26px) clamp(18px, 2.4vw, 28px);
  color: #2b1a12;
}
.bs-toc.bs-toc--framed details{ background: transparent; }
.bs-toc.bs-toc--framed .bs-toc__hd{ font-weight: 700; }

/* =========================================================
   情報ボックス（プロフィール／ギャラリー小窓など）
   ========================================================= */
.is-framed{
  background: var(--frame-long) center/100% 100% no-repeat;
  padding: clamp(16px, 2vw, 22px);
  color: #2b1a12;
}

/* =========================================================
   ギャラリー：正方形カードに額縁を被せる
   ========================================================= */
.wcard{
  position: relative;
  overflow: hidden;
  border-radius: 10px;           /* 額縁が角丸なら合わせる */
  background: #f8f5f2;
  box-shadow: 0 4px 14px rgba(0,0,0,.08);
}
.wcard img, .wcard .wcard-ph{
  width: 100%; aspect-ratio: 1/1; object-fit: cover; display: block;
}

/* 額縁オーバーレイ（クリックを邪魔しないように pointer-events: none） */
.wcard--framed-yellow::after,
.wcard--framed-green::after,
.wcard--framed-ivory::after,
.wcard--framed-cyan::after{
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-position: center; background-repeat: no-repeat; background-size: contain;
}
.wcard--framed-yellow::after{ background-image: var(--frame-sq-yellow); }
.wcard--framed-green::after{  background-image: var(--frame-sq-green); }
.wcard--framed-ivory::after{  background-image: var(--frame-sq-ivory); }
.wcard--framed-cyan::after{   background-image: var(--frame-sq-cyan); }

/* タイトルバッジは読みやすく */
.wcard-ttl{
  position: absolute; left: 10px; bottom: 10px;
  margin: 0; padding: 6px 10px; border-radius: 8px;
  background: rgba(0,0,0,.38); color: #fff; backdrop-filter: blur(2px);
}

/* =========================================================
   ブログ：本文内の画像を“控えめ額装”で統一（任意クラス）
   Gutenberg の画像ブロックに 追加クラス「figure-framed」を付けるだけ
   ========================================================= */
.figure-framed{
  position: relative;
  background: var(--frame-sq-ivory) center/100% 100% no-repeat;
  padding: clamp(10px, 1.6vw, 14px);
  margin: 1.2em auto;
  max-width: 980px;   /* 本文幅に合わせて調整 */
}
.figure-framed img{ display:block; width:100%; height:auto; }

/* 記事下の関連記事カードにも静かな色の額 */
.bs-related .relcard{
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  background: #faf7f5;
}
.bs-related .relcard::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background: var(--frame-sq-green) center/contain no-repeat;
}

/* 旧: オーバーレイ方式を無効化（見えなくする） */
.wcard--framed-yellow::after,
.wcard--framed-green::after,
.wcard--framed-ivory::after,
.wcard--framed-cyan::after{ content:none !important; }

/* 新: 背景フレーム＋内側に画像を入れる方式 */
.wcard--frame-yellow{
  background: var(--frame-sq-yellow) center/100% 100% no-repeat;
  padding: clamp(8px, 1.2vw, 12px);     /* 額縁の内側余白 */
  border-radius: 12px;                   /* 額の角丸に合わせるなら調整 */
}
.wcard--frame-green{  background: var(--frame-sq-green)  center/100% 100% no-repeat; padding: clamp(8px,1.2vw,12px); border-radius:12px; }
.wcard--frame-ivory{  background: var(--frame-sq-ivory)  center/100% 100% no-repeat; padding: clamp(8px,1.2vw,12px); border-radius:12px; }
.wcard--frame-cyan{   background: var(--frame-sq-cyan)   center/100% 100% no-repeat; padding: clamp(8px,1.2vw,12px); border-radius:12px; }

.wcard-in{
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  background: #f6f3f1;                  /* 画像未設定時の下地 */
}
.wcard-in img,
.wcard-in .wcard-ph{
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
}

/* タイトル/メタの配置はそのまま */
.wcard-ttl{
  position: absolute; left: 10px; bottom: 10px;
  margin: 0; padding: 6px 10px; border-radius: 8px;
  font-size: clamp(13px,1.5vw,16px);
  color: #fff; background: rgba(0,0,0,.38);
  backdrop-filter: blur(2px);
}
.wcard-meta{
  position: absolute; right: 10px; bottom: 10px;
  margin: 0; padding: 4px 8px; font-size: 12px; color: #fff; opacity: .9;
  background: rgba(0,0,0,.28); border-radius: 6px;
}

/* 注意書き：TOCと同じ横長フレームを流用 */
.notice-inner.is-framed-wide{
  background: var(--frame-toc) center/100% 100% no-repeat;
  padding: clamp(18px, 2.4vw, 26px) clamp(18px, 2.4vw, 28px);
  color: #2b1a12;
}
.notice-title{ margin-top: 0; }
.notice-cta{
  display:inline-block; padding:.6em 1.1em; border-radius:999px;
  text-decoration:none; color:#fff; background:#823327;
}

/* =========================================
   ページ別の main 背景（ヘッダ・フッタ以外を覆う）
========================================= */
.home-main,
.blog-archive,
.blog-single,
.warchive,
.profile-main{
  /* 共通プロパティ */
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  min-height: 100dvh;   /* 短い画面でも背景が切れないように */
  width: 100%;
}

/* TOP（黄色） */
.home-main{
  background-image: url('https://adventcosplay.com/wp-content/uploads/2025/08/background-top-page_Y.jpg');
}

/* ギャラリー（赤） */
.warchive{
  background-image: url('https://adventcosplay.com/wp-content/uploads/2025/08/background-top-page_R.jpg');
}

/* ブログ（緑）…一覧＆記事 */
.blog-archive,
.blog-single{
  background-image: url('https://adventcosplay.com/wp-content/uploads/2025/08/background-top-page_G.jpg');
}

/* プロフィール（青） */
.profile-main{
  background-image: url('https://adventcosplay.com/wp-content/uploads/2025/08/background-top-page_B.jpg');
}


/* ===== 詳細ページ用 背景 ===== */

/* ギャラリー詳細（赤） */
body.single-cosplay_work {
  background-image: url('https://adventcosplay.com/wp-content/uploads/2025/08/background-top-page_R.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}

/* ブログ本文（緑） */
body.single-post {
  background-image: url('https://adventcosplay.com/wp-content/uploads/2025/08/background-top-page_G.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}



/* 背景を隠す “面色” を透明化 */
main,
.wrapper,
.site-main,
.warchive,
.warchive-inner,
.warchive-grid,
.notice-panel,
.notice-inner{
  background-color: transparent !important;
}

/* 背景はページと一緒にスクロール（固定をやめる） */
body { background-attachment: scroll !important; }

/* main や wrapper が内部スクロールを作らないように */
main, .wrapper, .site-main {
  overflow: visible !important;
  max-height: none !important;
}

/* 共通の“紙面”スタイル */
.page-paper{
  background: rgba(255,255,255,.92);
  border-radius: 14px;
  box-shadow: 0 10px 28px rgba(0,0,0,.08);
  padding: clamp(18px, 2vw, 28px);
  backdrop-filter: saturate(110%) blur(2px); /* 対応ブラウザのみ効く */
}

/* ブログ本文とギャラリー詳細に適用 */
.blog-single .bs-article,
.gallery-single .gallery-single-article{
  max-width: 980px;
  margin: 24px auto;
  box-sizing: border-box;
}

/* ↑上の2つに “紙面” を付与 */
.blog-single .bs-article,
.gallery-single .gallery-single-article{ 
  background: rgba(255,255,255,.92);
  border-radius: 14px;
  box-shadow: 0 10px 28px rgba(0,0,0,.08);
  padding: clamp(18px, 2vw, 28px);
  backdrop-filter: saturate(110%) blur(2px);
}

/* 目次の中身も不透明にして読みやすく */
.bs-toc,
.gs-infobox,
.notice-inner{
  background: rgba(255,255,255,.96);
  border-radius: 12px;
}

/* ギャラリー詳細 = 赤 */
body.single-cosplay_work{
  background-image: url('https://adventcosplay.com/wp-content/uploads/2025/08/background-top-page_R.jpg') !important;
}

/* ブログ本文 = 緑 */
body.single-post{
  background-image: url('https://adventcosplay.com/wp-content/uploads/2025/08/background-top-page_G.jpg') !important;
}

/* ===== ブログ本文：背景は body、本文は半透明の紙 ===== */

/* 背景はページ全体（body）にだけ適用：緑 */
body.single-post{
  background-image: url('https://adventcosplay.com/wp-content/uploads/2025/08/background-top-page_G.jpg');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  background-attachment: scroll; /* 固定にしたければ fixed に */
}

/* main などコンテナは透明にして背景を見せる */
.blog-single,
.blog-single .wrapper,
.blog-single .site-main{
  background: transparent !important;
  overflow: visible !important;
}

/* “紙” スタイル（本文ボックス） */
.blog-single .bs-article{
  max-width: 980px;
  margin: 24px auto;
  padding: clamp(18px, 2.2vw, 32px);
  background: rgba(255,255,255,.92);         /* ← 透明度は .85〜.98 で好みに調整 */
  border-radius: 14px;
  box-shadow: 0 12px 30px rgba(0,0,0,.10);
  backdrop-filter: saturate(110%) blur(2px); /* 対応ブラウザのみ効く */
  box-sizing: border-box;
}

/* 目次・注意枠なども紙に寄せる（必要なら） */
.blog-single .bs-toc,
.blog-single .ads-side,            /* 右広告の箱 */
.blog-single .bs-related{
  background: rgba(255,255,255,.96);
  border-radius: 12px;
  box-shadow: 0 8px 22px rgba(0,0,0,.08);
  padding: 14px;
}

/* スマホ微調整 */
@media (max-width: 768px){
  .blog-single .bs-article{ margin: 16px auto; padding: 16px; }
}

/* 画像や表が紙からはみ出さないように */
.blog-single .bs-article img,
.blog-single .bs-article table{
  max-width: 100%;
  height: auto;
}
/* =============================
   背景イメージ & 本文ボックス
============================= */

/* --- ギャラリー詳細 --- */
/* 背景＝羊皮紙 / コンテンツ枠＝紙 */
body.single-cosplay_work {
  background-image: url('https://adventcosplay.com/wp-content/uploads/2025/08/smokeground_Y.jpg');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  background-attachment: scroll;
}
.gallery-single .gallery-single-article{
  max-width: 1080px;
  margin: 24px auto;
  padding: clamp(18px, 2.2vw, 32px);
  background: rgba(255,253,240,.9);
  border-radius: 14px;
  box-shadow: 0 12px 30px rgba(0,0,0,.10);
  backdrop-filter: saturate(110%) blur(2px);
  box-sizing: border-box;
}

/* --- ブログ本文 --- */
/* 背景＝ガス雲 / コンテンツ枠＝半透明紙 */
body.single-post {
  background-image: url('https://adventcosplay.com/wp-content/uploads/2025/08/smokeground_G.jpg');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  background-attachment: fixed; /* スクロール感強調 */
}
.blog-single .blog-article {
  max-width: 960px;
  margin: 24px auto;
  padding: clamp(18px, 2.2vw, 28px);
  background: rgba(250, 250, 250, 0.88);
  border-radius: 12px;
  box-shadow: 0 8px 22px rgba(0,0,0,.1);
  backdrop-filter: blur(3px);
  box-sizing: border-box;
}

/* --- プライバシーポリシー --- */
/* 背景＝夜空 / コンテンツ枠＝無色で少し透過 */
body.page-slug-policy {
  background-image: url('https://adventcosplay.com/wp-content/uploads/2025/08/smokeground_B.jpg');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  background-attachment: fixed;
}
.page-slug-policy main {
  max-width: 1000px;
  margin: 32px auto;
  padding: clamp(20px, 2.5vw, 36px);
  background: rgba(255,255,255,0.75); /* 無色に近い半透明 */
  border-radius: 12px;
  box-shadow: 0 10px 28px rgba(0,0,0,.15);
  backdrop-filter: blur(4px);
  box-sizing: border-box;
}