:root {
  --restricted-media-blur: 2px;
  --restricted-media-opacity: .9;
  --restricted-media-overlay: rgba(38, 24, 17, .3);
  --restricted-media-radius: 13px;
  --restricted-media-gap: 10px;
}

.restricted-media { position: relative; overflow: hidden; border-radius: var(--restricted-media-radius); }
.restricted-media-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--restricted-media-gap); }
.restricted-media-card { position: relative; display: block; overflow: hidden; aspect-ratio: 3 / 4; border: 1px solid #F2DCC8; border-radius: var(--restricted-media-radius); background: #fff; }
.restricted-media-card > img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .22s ease, filter .22s ease, opacity .22s ease; }
.restricted-media:not(.is-granted) .restricted-media-grid { pointer-events: none; user-select: none; }
.restricted-media:not(.is-granted) .restricted-media-card > img { filter: blur(var(--restricted-media-blur)); opacity: var(--restricted-media-opacity); transform: scale(1.1); }
.restricted-media:not(.is-granted) .restricted-media-card::after { position: absolute; inset: 0; background: var(--restricted-media-overlay); content: ''; }
.restricted-media.is-granted .restricted-media-overlay { display: none; }
.restricted-media-overlay { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; padding: 18px; }
.restricted-media-button { min-height: 44px; padding: 10px 22px; border: 1px solid rgba(255,255,255,.78); border-radius: 999px; background: #D97B4A; color: #fff; cursor: pointer; font: 700 14px 'Noto Sans JP', sans-serif; box-shadow: 0 8px 24px rgba(30,18,10,.28); }
.restricted-media-button:hover, .restricted-media-button:focus-visible { outline: none; transform: translateY(-1px); background: #C4612A; }

@media (max-width: 820px) {
  :root { --restricted-media-gap: 8px; --restricted-media-radius: 12px; }
}