:root{
  /* ▼背景画像URLをここで指定 */
  --xwag-bg: url('/wp-content/uploads/6Xv5xIKa.jpg');

  /* 色などカスタム */
  --xwag-ink: #2c1f13;        /* インク色 */
  --xwag-gold: #c8a96a;       /* 金インク */
  --xwag-parch: #fff9e9;      /* 羊皮紙 */
  --xwag-shadow: rgba(0,0,0,.5);
}

#xwag-overlay{
  position: fixed; inset: 0; z-index: 99999;
  display: grid; place-items: center;
  font-family: "Noto Serif JP", "Yu Mincho", serif;
}

#xwag-overlay .xwag-backdrop{
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at center, rgba(0,0,0,.15) 0%, rgba(0,0,0,.6) 70%),
    var(--xwag-bg) center/cover no-repeat;
  filter: saturate(0.95);
}

/* 本体の本 */
.xwag-book{
  position: relative;
  width: min(920px, 92vw);
  aspect-ratio: 16/10;
  transform: rotate(-.3deg);
  filter: drop-shadow(0 16px 40px var(--xwag-shadow));
}

.xwag-book__cover,
.xwag-book__pages{
  position: absolute; inset: 0;
  border-radius: 18px;
}

/* レザーカバー */
.xwag-book__cover{
  background:
    linear-gradient(145deg, #2f2431 0%, #1b1520 50%, #2a2230 100%);
  border: 2px solid rgba(200,169,106,.4);
  box-shadow:
    inset 0 0 0 3px rgba(0,0,0,.25),
    inset 0 0 80px rgba(0,0,0,.4);
}

/* ページ群（端に小口の段差） */
.xwag-book__pages{
  margin: 14px;
  border-radius: 12px;
  background:
    repeating-linear-gradient(90deg, #f9f2dc 0, #f9f2dc 4px, #f5ecd2 4px, #f5ecd2 8px);
  clip-path: inset(0 round 12px);
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.05),
    inset 0 0 60px rgba(0,0,0,.08);
}

/* 中央の紙ページ（実際のパネル） */
.xwag-panel{
  position: absolute; inset: 24px;
  border-radius: 12px;
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(255,255,255,.6), rgba(255,255,255,0) 60%),
    url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'>\
<defs><filter id='t' x='-20%' y='-20%' width='140%' height='140%'><feTurbulence baseFrequency='0.8' numOctaves='2' seed='7' type='fractalNoise'/><feColorMatrix type='saturate' values='0.1'/><feComponentTransfer><feFuncA type='table' tableValues='0 .12'/></feComponentTransfer></filter></defs>\
<rect width='100%' height='100%' fill='%23fff9e9'/>\
<rect width='100%' height='100%' filter='url(%23t)'/>\
</svg>") center/cover no-repeat,
    var(--xwag-parch);
  border: 1px solid rgba(0,0,0,.08);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.6),
    0 10px 18px rgba(0,0,0,.25);
  display: grid;
  place-items: center;
  text-align: center;
  padding: clamp(16px, 4vw, 32px);
}

/* 見出しと本文 */
.xwag-ttl{
  margin: 0 0 .6rem;
  font-size: clamp(22px, 3.6vw, 34px);
  color: var(--xwag-ink);
  letter-spacing: .04em;
  text-shadow: 0 1px 0 #fff6;
}

.xwag-txt{
  margin: 0 0 1.4rem;
  color: #5a4734;
  line-height: 1.8;
  font-size: clamp(14px, 2.1vw, 18px);
}

/* 行動ボタン（封蝋と革ボタン） */
.xwag-actions{
  display: flex; gap: .9rem; justify-content: center; flex-wrap: wrap;
  margin-bottom: .8rem;
}

.xwag-btn{
  display: inline-flex; align-items: center; justify-content: center;
  padding: .8rem 1.2rem;
  font-weight: 700; text-decoration: none;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.12);
  box-shadow: 0 6px 14px rgba(0,0,0,.18);
  transition: transform .08s ease, filter .2s ease, box-shadow .2s ease;
  cursor: pointer;
}

.xwag-btn:focus{ outline: 2px solid var(--xwag-gold); outline-offset: 2px; }

.xwag-btn--ok{
  background: radial-gradient(circle at 30% 20%, #d83b3b, #8b1c1c 70%);
  color: #fff;
  text-shadow: 0 1px 0 rgba(0,0,0,.3);
  border-color: #7a1e1e;
}
.xwag-btn--ok:hover{ transform: translateY(-1px); filter: brightness(1.05); }

.xwag-btn--no{
  background: linear-gradient(180deg, #6d5a3f, #54442f);
  color: #f3ead7;
  border-color: #3b2f20;
}
.xwag-btn--no:hover{ transform: translateY(-1px); filter: brightness(1.06); }

.xwag-note{
  margin: .4rem 0 0; font-size: .85rem; color: #7b6a53;
}

/* モバイル最適化 */
@media (max-width: 640px){
  .xwag-book{ width: 94vw; aspect-ratio: 3/4; }
  .xwag-panel{ inset: 16px; }
  .xwag-actions{ gap: .7rem; }
}

/* スクロール抑止（オーバーレイ出ている間） */
html.xwag-lock, body.xwag-lock{ overflow: hidden !important; }
/* ページ本体を非表示（ロック中） */
.xwag-lock #page, .xwag-lock main, .xwag-lock #content {
  visibility: hidden !important;
  pointer-events: none !important;
}
/* ページ本体を非表示（ロック中） */
.xwag-lock #page, .xwag-lock main, .xwag-lock #content {
  visibility: hidden !important;
  pointer-events: none !important;
}