/* 共通UI規格。ui-standardized を付けた公開ページだけへ適用する。 */
:root {
  --ui-text-xs: 0.875rem;
  --ui-text-sm: 0.9375rem;
  --ui-text-body: 1rem;
  --ui-text-lead: 1.125rem;
  --ui-text-h3: clamp(1.25rem, 1.125rem + 0.5vw, 1.5rem);
  --ui-text-h2: clamp(1.5rem, 1.25rem + 1vw, 2rem);
  --ui-text-h1: clamp(2rem, 1.5rem + 2vw, 3rem);
  --ui-leading-body: 1.8;
  --ui-leading-heading: 1.4;
  --ui-space-1: 0.25rem;
  --ui-space-2: 0.5rem;
  --ui-space-3: 0.75rem;
  --ui-space-4: 1rem;
  --ui-space-6: 1.5rem;
  --ui-space-8: 2rem;
  --ui-space-12: 3rem;
  --ui-space-16: 4rem;
  --ui-gutter: 1rem;
  --ui-section-space: clamp(3rem, 2rem + 4vw, 6rem);
  --ui-width-prose: 48rem;
  --ui-width-content: 64rem;
  --ui-width-wide: 75rem;
  --ui-control-size: 3rem;
  --ui-control-large: 3.5rem;
  --ui-radius: 0.25rem;
  --ui-foreground: #f4e4c1;
  --ui-muted: #c9b897;
  --ui-surface: #120a0f;
  --ui-page-background: linear-gradient(180deg, #0b0608 0%, #120a0f 35%, #180f12 100%);
  --ui-accent: #daa520;
  --ui-on-accent: #1a0a1f;
  --ui-focus: #f4e4c1;
  --ui-header-height: 6rem;
  --ui-logo-height: 7.5rem;
  --ui-icon-size: 2rem;
}

:where(.ui-standardized img) { height: auto; }
.member-directory {
  --member-gap: clamp(0.75rem, 2vw, 1.5rem);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--member-gap);
  max-width: 53.75rem;
  margin: var(--ui-space-8) auto 0;
  padding: 0;
  list-style: none;
}
.member-directory__item { flex: 0 0 calc((100% - 2 * var(--member-gap)) / 3); min-width: 0; }
.member-directory__link { display: block; transition: transform 0.2s ease; }
.member-directory__link img { display: block; width: 100%; aspect-ratio: 1; object-fit: contain; }
.member-directory__link:hover { transform: translateY(-0.25rem); }
.member-directory__link:hover img { filter: drop-shadow(0 0 0.4rem rgba(244, 228, 193, 0.45)); }
.member-directory__link img,
.character-directory__avatar img {
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 50%;
}
.member-portrait__name {
  display: block;
  margin-top: var(--ui-space-4);
  font-size: var(--ui-text-body);
  line-height: var(--ui-leading-body);
  color: var(--member-gold, #c9a961);
  text-align: center;
}
@media (min-width: 768px) {
  .member-directory__item { flex-basis: calc((100% - 3 * var(--member-gap)) / 4); }
}
.ui-standardized { scroll-padding-top: calc(var(--ui-header-height) + var(--ui-space-4)); }
.ui-standardized body { font-size: var(--ui-text-body); line-height: var(--ui-leading-body); }
.ui-standardized body,
.ui-standardized .page-container { background: var(--ui-page-background); }
/* ページ固有の下地だけを透過し、カード・画像・ダイアログは保持する。 */
.ui-standardized :is(main.product-page, main.patch-page, main.release-page, .library, .product-summary) {
  background: transparent;
}
.ui-standardized .product-page::before { content: none; }
.ui-standardized :is(h1, h2, h3) { text-wrap: balance; overflow-wrap: anywhere; }
.ui-standardized :is(p, dd, li) { overflow-wrap: anywhere; }
.ui-standardized :is(.section, .product-section, .character-profile, .release-hero, .news-section) {
  padding: var(--ui-section-space) var(--ui-gutter);
}
.ui-standardized :is(.section__inner, .library__inner, .gallery__layout, .character .section__inner) {
  width: 100%; max-width: var(--ui-width-wide); margin-inline: auto; min-width: 0;
}
.ui-standardized :is(.story__text, .product-lead, .news-intro, .news-list, .character-profile__text) {
  max-width: var(--ui-width-prose); font-size: var(--ui-text-body); line-height: var(--ui-leading-body);
  letter-spacing: 0.05em; text-align: left;
}
.ui-standardized .product-lead { padding-inline: 0; text-indent: 0; font-style: normal; }
.ui-standardized :is(.section h2, .section-heading .eyebrow, .gallery__content h2, .character h2, .patch-section__heading h2) {
  font-size: var(--ui-text-h2); line-height: var(--ui-leading-heading); letter-spacing: 0.08em;
}
.ui-standardized :is(h1.eyebrow, .character-profile__name, .patch-hero h1, .release-hero__date) {
  font-size: var(--ui-text-h1); line-height: var(--ui-leading-heading); letter-spacing: 0.08em;
}
.ui-standardized :is(.character-profile__role, .character-profile__meta dt, .role-vertical, .site-footer p, .library-card__label) {
  font-size: var(--ui-text-xs);
}
.ui-standardized :is(.character-profile__text p, .character-profile__quote, .product-meta__item dd, .spec-row dd) {
  font-size: var(--ui-text-body); line-height: var(--ui-leading-body); letter-spacing: 0.05em;
}
.ui-standardized :is(.product-meta__item dt, .spec-row dt) { font-size: var(--ui-text-sm); }
.ui-standardized :is(.product-meta, .spec-table, .product-summary__content) {
  max-width: var(--ui-width-content); padding: var(--ui-space-6); margin-inline: auto;
}
.ui-standardized :is(.product-meta__item, .spec-row) {
  grid-template-columns: minmax(0, 1fr); gap: var(--ui-space-2); padding-block: var(--ui-space-6);
}
.ui-standardized :is(.product-meta__item, .spec-row, .character-profile__body) > * { min-width: 0; }
.ui-standardized .download-card { padding: var(--ui-space-8) var(--ui-space-6); }
.ui-standardized .section.story { width: 100%; padding-inline: var(--ui-gutter); }
.ui-standardized :is(.character__note, .gallery__lead) { color: var(--ui-muted); }
.ui-standardized .character h2 { color: var(--ui-foreground); }

/* 独立した操作の当たり領域。本文内リンクは段落の行間を維持する。 */
.ui-standardized :is(.btn, .gallery__cta, .patch-download-button, .library-modal__close, .skip-btn) {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--ui-control-size); min-width: var(--ui-control-size); max-width: 100%;
  padding: var(--ui-space-3) var(--ui-space-6); border-radius: var(--ui-radius);
  font-size: var(--ui-text-body); line-height: 1.5; letter-spacing: 0.08em;
  text-align: center; white-space: normal; overflow-wrap: anywhere; touch-action: manipulation;
}
.ui-standardized .patch-download-button {
  display: flex; width: min(100%, 32.5rem); min-height: var(--ui-control-large);
}
.ui-standardized .patch-download-button span { font-size: var(--ui-text-lead); letter-spacing: 0.08em; }
.ui-standardized .patch-banner { min-height: 5rem; }
.ui-standardized .patch-banner__label { font-size: var(--ui-text-h3); letter-spacing: 0.08em; }
.ui-standardized :is(.btn.cta, .btn:hover, .gallery__cta:hover) { color: var(--ui-on-accent); }
.ui-standardized :is(a, button):focus-visible { outline: 3px solid var(--ui-focus); outline-offset: 4px; }
.ui-standardized .age-gate { --ui-focus: #4b3286; }
.ui-standardized .main-nav { --ui-focus: #5a154f; }
.ui-standardized .skip-link {
  position: fixed; left: var(--ui-gutter); top: var(--ui-space-2); transform: translateY(-200%);
  z-index: 3000; padding: var(--ui-space-3) var(--ui-space-4); background: var(--ui-surface); color: var(--ui-foreground);
}
.ui-standardized .skip-link:focus { transform: none; }
.ui-standardized .ui-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

.ui-standardized .site-header {
  height: var(--ui-header-height); padding: var(--ui-space-2) var(--ui-gutter);
  background: rgba(11, 6, 8, 0.94);
}
.ui-standardized .brand {
  width: calc(var(--ui-logo-height) * 6222 / 3500);
  max-width: calc(100% - var(--ui-control-size) - var(--ui-space-4));
  height: calc(var(--ui-header-height) - 2 * var(--ui-space-2));
  overflow: hidden;
}
/* 画像の上下余白だけを切り詰め、ヘッダーの高さを変えずに拡大する。 */
.ui-standardized .brand__logo { width: 100%; height: auto; max-width: none; flex-shrink: 0; }
@media (max-width: 767px) {
  .ui-standardized { --ui-header-height: 4rem; }
  .ui-standardized .brand {
    --mobile-logo-width: 8rem;
    position: relative;
    width: var(--mobile-logo-width);
    height: calc(var(--mobile-logo-width) * 1863 / 4260);
    flex-shrink: 0;
  }
  /* 元画像の透明余白を除いた絵柄を128px幅で表示する。素材自体は変更しない。 */
  .ui-standardized .brand__logo {
    position: absolute;
    width: calc(var(--mobile-logo-width) * 6222 / 4260);
    left: calc(var(--mobile-logo-width) * -1078 / 4260);
    top: calc(var(--mobile-logo-width) * -612 / 4260);
  }
}
.ui-standardized .hamburger {
  width: var(--ui-control-size); height: var(--ui-control-size); padding: var(--ui-space-3);
  justify-content: center; align-items: center;
}
.ui-standardized .hamburger span { width: 1.5rem; flex-shrink: 0; }
.ui-standardized .main-nav {
  top: var(--ui-header-height); width: min(22rem, 100%); height: calc(100dvh - var(--ui-header-height));
  padding: var(--ui-space-6); gap: var(--ui-space-2); overflow-y: auto; overscroll-behavior: contain;
  visibility: hidden;
}
.ui-standardized .main-nav.is-open { visibility: visible; }
.ui-standardized .main-nav a { display: flex; align-items: center; min-height: var(--ui-control-size); padding: var(--ui-space-2); font-size: var(--ui-text-body); }
.ui-standardized :is(.characters-page main, .release-page, main.product-page, main.patch-page) { padding-top: var(--ui-header-height); }
.ui-standardized .gallery-page .page-container { padding-top: var(--ui-header-height); }
.ui-standardized .news-page { padding-top: 0; }
.ui-standardized .news-page main { padding-top: var(--ui-header-height); }
.ui-standardized .hero { margin-top: var(--ui-header-height); padding: 0; }

.ui-standardized .sacrament-link {
  flex: 1 0 auto; min-height: var(--ui-control-size);
  padding: var(--ui-space-2) var(--ui-space-6);
}
.ui-standardized .sacrament-link__main { font-size: var(--ui-text-body); line-height: 1.5; }

.ui-standardized .member-slider__btn {
  appearance: none; background: transparent; border: 0; box-shadow: none; transform: none;
}
.ui-standardized .member-slider__btn::before { content: none; }
.ui-standardized .member-slider__btn .arrow-icon {
  width: var(--ui-icon-size); height: var(--ui-icon-size); transform: none;
}

/* 表示上の小さなドットと、48pxのクリック領域を分ける。 */
.ui-standardized :is(.member-slider__btn, .member-slider__dot, .member-slider__dot.is-active) {
  width: var(--ui-control-size); height: var(--ui-control-size); min-width: var(--ui-control-size);
}
.ui-standardized .member-slider__dots { gap: var(--ui-space-1); margin: 0; }
.ui-standardized :is(.member-slider__dot, .member-slider__dot.is-active, .member-slider__dot:hover:not(.is-active)) {
  background: transparent; box-shadow: none; animation: none; transform: none;
}
.ui-standardized .member-slider__dot::before,
.ui-standardized .member-slider__dot:hover:not(.is-active)::before {
  inset: 50% auto auto 50%; width: 0.5rem; height: 0.5rem; transform: translate(-50%, -50%);
  background: var(--ui-muted); border: 0; border-radius: 1rem;
}
.ui-standardized .member-slider__dot.is-active::before { width: 1.5rem; background: var(--ui-accent); }

.ui-standardized .gallery__layout { grid-template-columns: minmax(0, 1fr); gap: var(--ui-space-8); }
.ui-standardized .gallery__visual { padding: 0; border-radius: var(--ui-radius); min-width: 0; }
.ui-standardized .gallery-thumbs { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ui-space-2); }
.ui-standardized .gallery-thumb { min-height: var(--ui-control-size); }
.ui-standardized .gallery-thumb img { width: 100%; height: auto; aspect-ratio: 16/9; min-height: var(--ui-control-size); }
.ui-standardized .gallery-thumb.is-active { outline: 2px solid var(--ui-accent); outline-offset: 2px; }
.ui-standardized .gallery-thumb:hover img { filter: brightness(1.15); }
.ui-standardized .library { padding-top: var(--ui-space-12); }
.ui-standardized .library__inner { padding-inline: 0; }
.ui-standardized .library-grid { width: 100%; grid-template-columns: minmax(0, 1fr); gap: var(--ui-space-4); }
.ui-standardized .library-card { border-radius: var(--ui-radius); }
.ui-standardized .library-card__label { display: block; }
.ui-standardized .library-card:hover img { filter: brightness(1.1); }
.ui-standardized .library-card:hover::after { background: transparent; backdrop-filter: none; }
.ui-standardized .library-modal { padding: 0; overscroll-behavior: contain; }
.ui-standardized .library-modal__shell { min-height: 100%; padding: var(--ui-space-6) var(--ui-gutter) var(--ui-space-8); }
.ui-standardized .library-modal__panel { width: min(100%, var(--ui-width-prose)); height: auto; margin-bottom: var(--ui-space-4); }
.ui-standardized .library-modal__figure img { object-fit: contain; height: auto; }
.ui-standardized .library-modal__story { padding: var(--ui-space-6); font-size: var(--ui-text-body); line-height: var(--ui-leading-body); }
.ui-standardized .library-modal__story p { letter-spacing: 0.05em; opacity: 1; }
.ui-standardized .library-modal__close { position: sticky; bottom: var(--ui-space-4); order: -1; top: var(--ui-space-4); z-index: 2; }
.ui-standardized .library-modal__scroll-hint { width: var(--ui-control-size); height: var(--ui-control-size); }
.ui-standardized .character-directory { padding-inline: var(--ui-gutter); }
.ui-standardized .character-directory__grid li { min-width: 0; }
.ui-standardized .news-page .news-entry__title { font-size: var(--ui-text-h3); }
.ui-standardized .news-page :is(.news-entry__body, .news-lead) { font-size: var(--ui-text-body); line-height: var(--ui-leading-body); }
.ui-standardized .news-page .news-entries { max-width: var(--ui-width-prose); gap: var(--ui-space-8); }
.ui-standardized .age-gate { padding: var(--ui-space-4); }
.ui-standardized .age-gate .overlay { width: min(100%, 40rem); padding: var(--ui-space-6); }
.ui-standardized .age-gate .overlay h1 { font-size: var(--ui-text-h2); }
.ui-standardized .age-gate .lead { font-size: var(--ui-text-body); }
.ui-standardized body:has(.age-gate:not(.age-gate--hidden)) { overflow-y: auto; }
.ui-standardized .release-hero__date { background: none; -webkit-text-fill-color: var(--ui-foreground); color: var(--ui-foreground); }
.ui-standardized .release-page .section-heading { text-align: center; }
.ui-standardized .patch-back-link { display: inline-flex; min-height: var(--ui-control-size); align-items: center; }
.ui-standardized .patch-section__heading p { color: var(--ui-muted); }

@media (min-width: 768px) {
  :root { --ui-gutter: 2rem; }
  .ui-standardized .library-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ui-space-6); }
  .ui-standardized :is(.product-meta__item, .spec-row) { grid-template-columns: minmax(8rem, 1fr) minmax(0, 3fr); gap: var(--ui-space-6); }
}
@media (min-width: 1024px) {
  .ui-standardized .library-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* ギャラリーの横並びは広い画面だけ。タブレットでは画像群を中央に保つ。 */
@media (min-width: 1280px) {
  .ui-standardized .gallery__layout { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
}
@media (prefers-reduced-motion: reduce) {
  .ui-standardized *, .ui-standardized *::before, .ui-standardized *::after {
    animation: none !important; transition-duration: 0s !important; scroll-behavior: auto !important;
  }
  .ui-standardized :is(.reveal-item, [data-reveal]) { opacity: 1 !important; transform: none !important; visibility: visible !important; }
}