/* ネタバレぼかし（画像・GIF・動画）
   文字・強さの初期値は「設定 → ネタバレぼかし」、ブロックごとの上書きはブロックの右側の設定で */
.wsb-frame {
  --wsb-tint: rgba(18, 22, 30, .18);   /* ぼかしの上に重ねる薄い暗さ */
  --wsb-label-bg: rgba(18, 22, 30, .72);
  --wsb-label-text: #fff;

  position: relative;
  display: inline-block;
  max-width: 100%;
  overflow: hidden;            /* ぼかしの端がにじみ出ないように */
  line-height: 0;
  vertical-align: top;
  border-radius: inherit;
  cursor: pointer;
}
.wsb-frame > .wsb-media {
  display: block;
  transition: filter .35s ease, transform .35s ease;
}
/* ぼかし中（画像・GIF・動画・埋め込み動画すべて） */
.wsb-frame:not(.is-revealed) > .wsb-media {
  filter: blur(var(--wsb-blur, 14px)) saturate(1.05);
  transform: scale(1.06);      /* 端が白く透けないよう少しだけ拡大 */
}

/* 中央の「ネタバレ注意」表示 */
.wsb-cover {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--wsb-tint);
  line-height: 1.4;
  transition: opacity .3s ease;
}
.wsb-label {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--wsb-label-bg);
  color: var(--wsb-label-text);
  text-align: center;
  box-shadow: 0 2px 10px rgba(0,0,0,.2);
  transition: transform .15s ease;
}
.wsb-frame:hover .wsb-label { transform: scale(1.04); }
.wsb-label-main { font-size: 13px; font-weight: 700; letter-spacing: .04em; }
.wsb-label-sub  { font-size: 11px; opacity: .85; }
.wsb-label-main::before {
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  margin: -2px 6px 0 0;
  vertical-align: middle;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5C6.5 5 2.7 9.2 1.5 12c1.2 2.8 5 7 10.5 7s9.3-4.2 10.5-7C21.3 9.2 17.5 5 12 5zm0 12a5 5 0 110-10 5 5 0 010 10zm0-8a3 3 0 100 6 3 3 0 000-6z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5C6.5 5 2.7 9.2 1.5 12c1.2 2.8 5 7 10.5 7s9.3-4.2 10.5-7C21.3 9.2 17.5 5 12 5zm0 12a5 5 0 110-10 5 5 0 010 10zm0-8a3 3 0 100 6 3 3 0 000-6z'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* マウス操作の端末は「クリック」、タッチ端末は「タップ」 */
.wsb-on-touch { display: none; }
@media (hover: none) {
  .wsb-on-mouse { display: none; }
  .wsb-on-touch { display: inline; }
}
/* 画像が小さい時は文字を小さく */
.wsb-frame.is-small .wsb-label { padding: 5px 10px; }
.wsb-frame.is-small .wsb-label-main { font-size: 11px; }
.wsb-frame.is-small .wsb-label-sub { display: none !important; }

/* 表示後 */
.wsb-frame.is-revealed { cursor: auto; }
.wsb-frame.is-revealed .wsb-cover { opacity: 0; pointer-events: none; }

/* もう一度ぼかすボタン（表示後、マウスを乗せた時／タッチ端末では常に小さく表示） */
.wsb-hide {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 3;
  display: none;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(18,22,30,.6);
  color: #fff;
  font-size: 11px;
  line-height: 1.5;
  cursor: pointer;
  opacity: 0;
  transition: opacity .2s;
}
.wsb-frame.is-revealed .wsb-hide { display: block; }
.wsb-frame.is-revealed:hover .wsb-hide,
.wsb-frame.is-revealed .wsb-hide:focus-visible { opacity: 1; }
@media (hover: none) { .wsb-frame.is-revealed .wsb-hide { opacity: .85; } }

.wsb-frame:focus-visible { outline: 3px solid #1e63c8; outline-offset: 2px; }

/* 動画（動画ブロック）は横幅いっぱい */
.wsb-frame.is-video { display: block; width: 100%; }
.wsb-frame.is-video > video.wsb-media { width: 100%; height: auto; }

/* 埋め込み動画（YouTube・chobit など） */
.wsb-frame.is-embed { display: block; width: 100%; }
.wsb-frame.is-embed > iframe.wsb-media { width: 100%; max-width: 100%; }
/* 埋め込みブロックの「縦横比を保つ枠」の中では、枠いっぱいに広げる */
.wp-block-embed__wrapper > .wsb-frame.is-embed,
.wp-has-aspect-ratio .wp-block-embed__wrapper > .wsb-frame.is-embed {
  position: absolute;
  inset: 0;
  height: 100%;
}
.wp-block-embed__wrapper > .wsb-frame.is-embed > iframe.wsb-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* 画像ブロック（中央寄せ・幅指定など）でも崩れないように */
.wp-block-image .wsb-frame { max-width: 100%; }
.wp-block-image.aligncenter .wsb-frame,
.wp-block-image .aligncenter .wsb-frame { margin: 0 auto; }

/* ギャラリーの中（画像が枠いっぱいに切り抜かれるレイアウト） */
.wp-block-gallery .wsb-frame {
  display: flex;
  flex: 1 0 0%;
  width: 100%;
  height: 100%;
}
.wp-block-gallery .wsb-frame > img.wsb-media {
  width: 100%;
  height: 100%;
  object-fit: cover;
  flex: 1 0 0%;
}

/* 印刷時はぼかさない */
@media print {
  .wsb-frame > .wsb-media { filter: none !important; transform: none !important; }
  .wsb-cover, .wsb-hide { display: none !important; }
}