: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; cursor: pointer; }
.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 { user-select: none; }
.restricted-media:not(.is-granted) .restricted-media-card > img,
.restricted-media-card.is-restricted-pending > 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,
.restricted-media-card.is-restricted-pending::after { position: absolute; inset: 0; pointer-events: none; background: var(--restricted-media-overlay); content: ''; }
.restricted-media-card:focus-visible { outline: 3px solid rgba(217, 123, 74, .72); outline-offset: 3px; }

.restricted-media-consent { position: fixed; inset: 0; z-index: 500; display: none; place-items: center; padding: 20px; background: rgba(24, 16, 12, .58); }
.restricted-media-consent.open { display: grid; }
.restricted-media-consent-dialog { width: min(100%, 460px); padding: 28px 24px 24px; border: 1px solid rgba(255,255,255,.78); border-radius: 20px; background: #fffaf5; box-shadow: 0 20px 60px rgba(30,18,10,.3); color: #3f2b21; text-align: center; }
.restricted-media-consent-dialog h2 { margin: 0; font: 700 18px/1.65 'Noto Sans JP', sans-serif; }
.restricted-media-consent-dialog p { margin: 12px 0 22px; font: 500 15px/1.7 'Noto Sans JP', sans-serif; }
.restricted-media-consent-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.restricted-media-consent-actions button { min-height: 46px; padding: 10px 16px; border-radius: 999px; cursor: pointer; font: 700 14px 'Noto Sans JP', sans-serif; }
.restricted-media-consent-cancel { border: 1px solid #c8aa98; background: #fff; color: #624537; }
.restricted-media-consent-confirm { border: 1px solid #d97b4a; background: #d97b4a; color: #fff; }
.restricted-media-consent-actions button:hover { filter: brightness(.96); }
.restricted-media-consent-actions button:focus-visible { outline: 3px solid rgba(217, 123, 74, .48); outline-offset: 2px; }

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

@media (max-width: 430px) {
  .restricted-media-consent { padding: 16px; }
  .restricted-media-consent-dialog { padding: 24px 18px 18px; border-radius: 18px; }
  .restricted-media-consent-dialog h2 { font-size: 16px; }
}