/* =========================================================
   Advent Cosplay — theme-frames.css  (clean stable)
   目的：
   - ページ装飾のみに集中（構造や幅は一切触らない）
   - 背景・額縁・ラベル・紙素材の統一
   依存：base.css（変数・色・フォント）
========================================================= */

/* ------------------------------
   0) 画像URLトークン
------------------------------ */
:root{
  /* ■ ページ背景 */
  --bg-home:    url("https://adventcosplay.com/wp-content/uploads/2025/08/background-top-page_R.jpg");
  --bg-gallery: url("https://adventcosplay.com/wp-content/uploads/2025/10/background_gallery.jpg");
  --bg-blog:    url("https://adventcosplay.com/wp-content/uploads/2025/10/background_blog.jpg");
  --bg-items:   url("https://adventcosplay.com/wp-content/uploads/2025/11/background_item.jpg");
  --bg-videos:  url("https://adventcosplay.com/wp-content/uploads/2025/10/background-space_04.png");
  --bg-profile: url("https://adventcosplay.com/wp-content/uploads/2025/11/background_profile.png");
--bg-profile-en: url("https://adventcosplay.com/wp-content/uploads/2025/11/background_profile_en.png");
  --bg-policy:  url("https://adventcosplay.com/wp-content/uploads/2025/08/smokeground_B.jpg");
  --bg-faq:     url("https://adventcosplay.com/wp-content/uploads/2025/08/smokeground_B.jpg");

  /* ■ 額縁・ラベル・紙素材 */
  --img-flame-wide: url("https://adventcosplay.com/wp-content/uploads/2025/10/label01.png");
  --label-blog-cat: url("https://adventcosplay.com/wp-content/uploads/2025/10/category.png");
  --paper-parchment: url("https://adventcosplay.com/wp-content/uploads/2025/08/smokeground_Y.jpg");

  /* ■ トレカ背景 */
  --tcard-gallery-bg: url("https://adventcosplay.com/wp-content/uploads/2025/10/gallery-nail.png");
  --tcard-blog-bg:    url("https://adventcosplay.com/wp-content/uploads/2025/10/blog-nail.png");

  /* ■ 紙ヴェール */
  --veil-paper: rgba(255,253,240,.62);

  /* 背景のアタッチ制御（デフォルトは scroll） */
  --bg-attach: scroll;
}

/* ------------------------------
   1) ページ全体の背景
------------------------------ */
body[data-page="home"]      { background: var(--bg-home)    center / auto repeat; background-attachment: var(--bg-attach); }
body[data-page="blog"]      { background: var(--bg-blog)    center / auto repeat; background-attachment: var(--bg-attach); }
body[data-page="gallery"]   { background: var(--bg-gallery) center / auto repeat; background-attachment: var(--bg-attach); }
body.page-slug-profile      { background: var(--bg-profile) center / auto repeat; background-attachment: var(--bg-attach); }
body.page-slug-profile-en   { background: var(--bg-profile-en) center / auto repeat; background-attachment: var(--bg-attach); }
body.page-slug-policy       { background: var(--bg-policy)  center / auto repeat; background-attachment: var(--bg-attach); }
body.page-slug-items        { background: var(--bg-items)   center / auto repeat; background-attachment: var(--bg-attach); }

body[data-bg="fixed"]{ --bg-attach: fixed; }

/* ------------------------------
   2) 額縁（NEWS / NOTICE）
------------------------------ */
.news-frame,
.notice-frame{
  background: var(--img-flame-wide) center / contain no-repeat;
  /* aspect-ratio: 1300 / 600;  ← 比率固定したい場合だけ有効 */
}
.notice-in{
  background: var(--veil-paper);
}

/* ------------------------------
   3) ブログ用装飾
------------------------------ */
.blog-title.has-label{
  position: relative;
  padding: .8em 1.2em .8em 2.8em;
}
.blog-title.has-label::before{
  content:"";
  position:absolute; inset:0 auto 0 0;
  width: 220px;
  background: var(--label-blog-cat) left center / contain no-repeat;
  opacity: .98;
  pointer-events: none;
}

/* 本文ボックス（羊皮紙スタイル） */
.paper-parchment{
  background: var(--paper-parchment) center / cover no-repeat;
  border-radius: 14px;
  box-shadow: 0 10px 28px rgba(0,0,0,.08);
  padding: clamp(18px, 2vw, 28px);
}

/* ------------------------------
   4) トレカ背景スコープ
------------------------------ */
.warchive-page{ --t-bg: var(--tcard-gallery-bg); }
.blog-archive { --t-bg: var(--tcard-blog-bg); }

/* ------------------------------
   5) main / wrapper の透明化
------------------------------ */
main,
.wrapper,
.site-main{
  background: transparent;
}

/* ------------------------------
   6) オプション：ページ全体を囲む額縁
------------------------------ */
/*
:root { --frame-w: clamp(14px, 2.6vw, 28px); }
body::before,
body::after{
  content:"";
  position: fixed;
  top: 0; bottom: 0;
  width: var(--frame-w);
  pointer-events: none;
  z-index: 0;
  background: none;  // 額縁画像を指定
}
body::before { left: 0; }
body::after  { right: 0; }


}*/