/* Material Design 3 の考え方に沿ったスタイル。
   色・書体・形・高さ・動きをトークン(CSS 変数)で持ち、各コンポーネントはトークンを参照する。
   色はベースラインのトーナルパレット(ライト/ダーク)を使う。 */

:root {
  color-scheme: light dark;

  /* 色: 役割(role)で持つ */
  --md-primary: #6750a4;
  --md-on-primary: #ffffff;
  --md-primary-container: #eaddff;
  --md-on-primary-container: #21005d;
  --md-secondary: #625b71;
  --md-on-secondary: #ffffff;
  --md-secondary-container: #e8def8;
  --md-on-secondary-container: #1d192b;
  --md-tertiary: #7d5260;
  --md-on-tertiary: #ffffff;
  --md-tertiary-container: #ffd8e4;
  --md-on-tertiary-container: #31111d;
  --md-error: #b3261e;
  --md-on-error: #ffffff;
  --md-error-container: #f9dedc;
  --md-on-error-container: #410e0b;
  --md-background: #fef7ff;
  --md-on-background: #1d1b20;
  --md-surface: #fef7ff;
  --md-on-surface: #1d1b20;
  --md-surface-variant: #e7e0ec;
  --md-on-surface-variant: #49454f;
  --md-outline: #79747e;
  --md-outline-variant: #cac4d0;
  --md-surface-container-lowest: #ffffff;
  --md-surface-container-low: #f7f2fa;
  --md-surface-container: #f3edf7;
  --md-surface-container-high: #ece6f0;
  --md-surface-container-highest: #e6e0e9;
  --md-inverse-surface: #322f35;
  --md-inverse-on-surface: #f5eff7;
  --md-inverse-primary: #d0bcff;
  --md-scrim: #000000;

  /* 形 */
  --md-shape-xs: 4px;
  --md-shape-sm: 8px;
  --md-shape-md: 12px;
  --md-shape-lg: 16px;
  --md-shape-xl: 28px;
  --md-shape-full: 999px;

  /* 高さ(影) */
  --md-elevation-1: 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 3px 1px rgba(0, 0, 0, 0.15);
  --md-elevation-2: 0 1px 2px rgba(0, 0, 0, 0.3), 0 2px 6px 2px rgba(0, 0, 0, 0.15);
  --md-elevation-3: 0 1px 3px rgba(0, 0, 0, 0.3), 0 4px 8px 3px rgba(0, 0, 0, 0.15);

  /* 動き */
  --md-ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --md-duration-short: 150ms;
  --md-duration-medium: 250ms;

  /* 書体 */
  --md-font: "Roboto", system-ui, -apple-system, "Hiragino Sans", "Noto Sans JP", sans-serif;
  /* 読む入口と読み込み中の演出。ワイン×ローズ×シャンパンゴールドで、
     作品を開く瞬間を「特別な時間」として見せる */
  --accent-rose: #d81b60;
  --accent-rose-bright: #ff6f9f;
  --accent-rose-soft: #ffc2d4;
  --accent-gold: #efc9a8;
  --accent-wine: #1c0710;
  --accent-serif: "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", "Noto Serif JP",
    "Noto Serif CJK JP", "Source Han Serif JP", "Noto Serif", "Times New Roman", serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --md-primary: #d0bcff;
    --md-on-primary: #381e72;
    --md-primary-container: #4f378b;
    --md-on-primary-container: #eaddff;
    --md-secondary: #ccc2dc;
    --md-on-secondary: #332d41;
    --md-secondary-container: #4a4458;
    --md-on-secondary-container: #e8def8;
    --md-tertiary: #efb8c8;
    --md-on-tertiary: #492532;
    --md-tertiary-container: #633b48;
    --md-on-tertiary-container: #ffd8e4;
    --md-error: #f2b8b5;
    --md-on-error: #601410;
    --md-error-container: #8c1d18;
    --md-on-error-container: #f9dedc;
    --md-background: #141218;
    --md-on-background: #e6e0e9;
    --md-surface: #141218;
    --md-on-surface: #e6e0e9;
    --md-surface-variant: #49454f;
    --md-on-surface-variant: #cac4d0;
    --md-outline: #938f99;
    --md-outline-variant: #49454f;
    --md-surface-container-lowest: #0f0d13;
    --md-surface-container-low: #1d1b20;
    --md-surface-container: #211f26;
    --md-surface-container-high: #2b2930;
    --md-surface-container-highest: #36343b;
    --md-inverse-surface: #e6e0e9;
    --md-inverse-on-surface: #322f35;
    --md-inverse-primary: #6750a4;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--md-font);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--md-on-background);
  background: var(--md-background);
  -webkit-text-size-adjust: 100%;
}

a {
  color: inherit;
}

img {
  max-width: 100%;
}

/* hidden 属性の要素は、クラスで display を指定していても隠したままにする */
[hidden] {
  display: none !important;
}

:focus-visible {
  outline: 3px solid var(--md-primary);
  outline-offset: 2px;
  border-radius: var(--md-shape-xs);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* 書体スケール */
h1 {
  font-size: 1.75rem;
  line-height: 2.25rem;
  font-weight: 400;
  letter-spacing: 0;
  margin: 0 0 16px;
}

.icon {
  width: 24px;
  height: 24px;
  flex: none;
  fill: currentColor;
}

/* トップアプリバー */
.app-bar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 64px;
  padding: 8px 16px;
  background: var(--md-surface-container);
  color: var(--md-on-surface);
}

.app-bar__brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  text-decoration: none;
  border-radius: var(--md-shape-full);
  padding: 4px 8px 4px 4px;
  transition: background var(--md-duration-short) var(--md-ease-standard);
}

.app-bar__brand:hover {
  background: color-mix(in srgb, var(--md-on-surface) 8%, transparent);
}

.app-bar__logo {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--md-shape-full);
  background: var(--md-primary-container);
  color: var(--md-on-primary-container);
  font-size: 1.125rem;
  font-weight: 500;
}

.app-bar__brand-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.app-bar__title {
  font-size: 1.375rem;
  line-height: 1.75rem;
  font-weight: 400;
  overflow-wrap: anywhere;
}

/* 海外検索でも「めくる」と一緒に見つかるよう、ローマ字表記を小さく添える。
   サイト名を変えたときは SITE_NAME_ROMAN も変える(空なら出さない) */
.app-bar__roman {
  color: var(--md-on-surface-variant);
  font-size: 0.625rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 24px 16px 48px;
}

/* ボタン */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 24px;
  border: none;
  border-radius: var(--md-shape-full);
  font: inherit;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  letter-spacing: 0.1px;
  text-decoration: none;
  cursor: pointer;
  transition: box-shadow var(--md-duration-short) var(--md-ease-standard),
    background var(--md-duration-short) var(--md-ease-standard);
}

.btn--filled {
  background: var(--md-primary);
  color: var(--md-on-primary);
}

.btn--filled:hover {
  box-shadow: var(--md-elevation-1);
  background: color-mix(in srgb, var(--md-on-primary) 8%, var(--md-primary));
}

.btn--tonal {
  background: var(--md-secondary-container);
  color: var(--md-on-secondary-container);
}

.btn--tonal:hover {
  box-shadow: var(--md-elevation-1);
  background: color-mix(in srgb, var(--md-on-secondary-container) 8%, var(--md-secondary-container));
}

.btn--text {
  padding: 0 12px;
  background: transparent;
  color: var(--md-primary);
}

.btn--text:hover {
  background: color-mix(in srgb, var(--md-primary) 8%, transparent);
}

/* アイコンボタン */
.icon-btn {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--md-shape-full);
  color: var(--md-on-surface-variant);
  text-decoration: none;
  transition: background var(--md-duration-short) var(--md-ease-standard);
}

.icon-btn:hover {
  background: color-mix(in srgb, var(--md-on-surface) 8%, transparent);
}

.icon-btn--disabled {
  visibility: hidden;
}

/* 検索バー */
.search {
  margin-bottom: 24px;
}

.search-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 56px;
  padding: 4px 4px 4px 16px;
  border-radius: var(--md-shape-full);
  background: var(--md-surface-container-high);
  color: var(--md-on-surface-variant);
  transition: box-shadow var(--md-duration-short) var(--md-ease-standard);
}

.search-bar:focus-within {
  box-shadow: var(--md-elevation-1);
}

.search-bar__icon {
  color: var(--md-on-surface-variant);
}

.search-bar__input {
  flex: 1 1 auto;
  min-width: 0;
  border: none;
  background: transparent;
  color: var(--md-on-surface);
  font: inherit;
  font-size: 1rem;
  line-height: 1.5rem;
  padding: 8px 0;
}

.search-bar__input::placeholder {
  color: var(--md-on-surface-variant);
}

.search-bar__input:focus {
  outline: none;
}

.search__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
}

/* セグメントボタン */
.segmented {
  display: inline-flex;
  border: 1px solid var(--md-outline);
  border-radius: var(--md-shape-full);
  overflow: hidden;
}

.segmented__item {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 16px;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  color: var(--md-on-surface);
  cursor: pointer;
  transition: background var(--md-duration-short) var(--md-ease-standard);
}

.segmented__item + .segmented__item {
  border-left: 1px solid var(--md-outline);
}

.segmented__item input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.segmented__item:hover {
  background: color-mix(in srgb, var(--md-on-surface) 8%, transparent);
}

.segmented__item:has(input:checked) {
  background: var(--md-secondary-container);
  color: var(--md-on-secondary-container);
}

.segmented__item:has(input:focus-visible) {
  outline: 3px solid var(--md-primary);
  outline-offset: -3px;
}

/* タグ一覧: 日本語のラベルを分類ごとに並べて探しやすくする */
.tag-lead {
  margin: 0 0 24px;
  color: var(--md-on-surface-variant);
}

.tag-group {
  margin: 0 0 32px;
}

.tag-group__title {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--md-outline-variant);
  font-size: 1.125rem;
  line-height: 1.75rem;
  font-weight: 500;
}

.tag-group__count {
  color: var(--md-on-surface-variant);
  font-size: 0.75rem;
  font-weight: 400;
}

.tag-group__details > summary {
  cursor: pointer;
  color: var(--md-primary);
  font-size: 0.875rem;
}

.tag-group__details .chips {
  margin-top: 12px;
}

/* チップ */
.chips {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 16px;
  padding: 0;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid var(--md-outline);
  border-radius: var(--md-shape-sm);
  background: transparent;
  color: var(--md-on-surface-variant);
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  text-decoration: none;
  transition: background var(--md-duration-short) var(--md-ease-standard);
}

.chip:hover {
  background: color-mix(in srgb, var(--md-on-surface) 8%, transparent);
}

.chip--selected {
  border-color: transparent;
  background: var(--md-secondary-container);
  color: var(--md-on-secondary-container);
}

.chip__icon {
  width: 18px;
  height: 18px;
}

.chip__count {
  color: var(--md-on-surface-variant);
  font-size: 0.75rem;
}

/* ページの説明文(お気に入り・履歴・作者一覧) */
.page-lead {
  margin: 0 0 24px;
  color: var(--md-on-surface-variant);
}

/* 作品ページ: お気に入りボタンと作者リンク */
.title-header__actions {
  /* 上の見出しと、下のタグの両方から離す */
  margin: 12px 0 16px;
}

.title-header__author a {
  color: inherit;
}

/* 閲覧履歴: 履歴を消す */
.history-actions {
  margin: 24px 0 0;
}

/* 結果バー */
.result-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin-bottom: 16px;
}

.result-bar__title {
  margin: 0;
  overflow-wrap: anywhere;
}

.result-count {
  color: var(--md-on-surface-variant);
  font-size: 0.875rem;
}

/* 並べ替えは「新しい順」で固定。並びの基準が分かるように文字で示す */
.result-sort {
  margin-left: auto;
  color: var(--md-on-surface-variant);
  font-size: 0.8125rem;
}

/* カード */
.cards {
  list-style: none;
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  margin: 0;
  padding: 0;
}

.card {
  border-radius: var(--md-shape-md);
  background: var(--md-surface-container-low);
  overflow: hidden;
  transition: box-shadow var(--md-duration-medium) var(--md-ease-standard),
    transform var(--md-duration-medium) var(--md-ease-standard);
}

.card:hover {
  box-shadow: var(--md-elevation-2);
  transform: translateY(-2px);
}

.card__link {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-bottom: 12px;
  text-decoration: none;
}

.card__cover {
  width: 100%;
  height: auto;
  aspect-ratio: 7 / 10;
  object-fit: cover;
  background: var(--md-surface-variant);
  border-bottom: 1px solid var(--md-outline-variant);
}

.card__title {
  padding: 0 12px;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  color: var(--md-on-surface);
}

.card__meta {
  padding: 0 12px;
  color: var(--md-on-surface-variant);
  font-size: 0.75rem;
  line-height: 1rem;
}

/* 作品カードの本文の言語(日本語 / English など)。UI の表示言語とは別 */
.card__language {
  padding: 0 12px 8px;
  color: var(--md-primary);
  font-size: 0.75rem;
  line-height: 1rem;
}

/* 発見用の棚(地域の人気・世界の人気・新着)。横に流さず、折り返して読める形にする */
.shelves {
  display: grid;
  gap: 24px;
  margin-bottom: 24px;
}

.shelf__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin-bottom: 8px;
}

.shelf__title {
  margin: 0;
  font-size: 1.125rem;
  line-height: 1.5rem;
  font-weight: 500;
}

.shelf__note {
  margin-left: 8px;
  color: var(--md-on-surface-variant);
  font-size: 0.875rem;
  font-weight: 400;
}

.shelf__head .btn {
  margin-left: auto;
}

/* ランキングの順位バッジ。表紙の左上に置き、カード全体のリンクとして押せる */
.card--ranked .card__link {
  position: relative;
}

.card__rank {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 1;
  display: grid;
  place-items: center;
  min-width: 32px;
  height: 32px;
  padding: 0 6px;
  border-radius: var(--md-shape-full);
  background: var(--md-primary);
  color: var(--md-on-primary);
  font-size: 0.875rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  box-shadow: var(--md-elevation-1);
}

.card__status,
.badge {
  display: inline-flex;
  align-items: center;
  width: max-content;
  margin: 0 12px;
  padding: 0 8px;
  border-radius: var(--md-shape-full);
  font-size: 0.75rem;
  line-height: 1.5rem;
  background: var(--md-surface-variant);
  color: var(--md-on-surface-variant);
}

.badge--available,
.card__status--available {
  background: var(--md-primary-container);
  color: var(--md-on-primary-container);
}

.badge--unavailable,
.card__status--unavailable {
  background: var(--md-error-container);
  color: var(--md-on-error-container);
}

/* ランキングページ */
.ranking-header {
  margin-bottom: 16px;
}

.ranking-header__title {
  margin-bottom: 4px;
}

.ranking-header__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin: 0;
  color: var(--md-on-surface-variant);
  font-size: 0.875rem;
}

.ranking-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.ranking-note {
  color: var(--md-on-surface-variant);
  font-size: 0.8125rem;
}

/* 作品ヘッダーの配信状況(閲覧者の地域) */
.title-header__region {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  font-size: 0.875rem;
}

.title-header__region .badge {
  margin: 0;
}

.title-header__region-name {
  color: var(--md-on-surface-variant);
}

.title-header__rank {
  color: var(--md-primary);
  font-weight: 500;
}

/* ページ送り */
.pager {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  margin: 24px 0 8px;
}

.pager a[rel="next"] {
  justify-self: end;
}

.pager-status {
  color: var(--md-on-surface-variant);
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
}

/* パンくず */
.breadcrumb {
  margin-bottom: 8px;
}

/* 作品ヘッダー */
.title-header {
  margin-bottom: 24px;
}

.title-header__name {
  margin-bottom: 4px;
}

.title-header__author {
  margin: 0 0 12px;
  color: var(--md-on-surface-variant);
}

.title-header__description {
  margin: 0;
  max-width: 60ch;
}

/* 作品ページ: 表紙を大きく中央に置き、どこを押しても読める入口にする。
   表紙・巻名・ページ数・ボタンは 1 つのリンクなので、タッチ領域は表紙全体の大きさになる */
.read-hero {
  width: min(100%, 380px);
  margin: 0 auto 24px;
  padding: 20px 16px;
  border-radius: var(--md-shape-lg);
  /* 表紙のまわりにうっすらローズの光を敷き、読みたい気持ちを立てる */
  background:
    radial-gradient(120% 80% at 50% 0%, color-mix(in srgb, var(--accent-rose-bright) 13%, transparent), transparent 70%),
    var(--md-surface-container-low);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-rose) 10%, transparent);
}

.read-hero__link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: min(100%, 320px);
  margin: 0 auto;
  color: var(--md-on-surface);
  text-align: center;
  text-decoration: none;
}

.read-hero__cover {
  width: 100%;
  height: auto;
  aspect-ratio: 7 / 10;
  margin-bottom: 8px;
  border-radius: var(--md-shape-md);
  background: var(--md-surface-variant);
  box-shadow: 0 16px 36px color-mix(in srgb, var(--accent-wine) 24%, transparent),
    var(--md-elevation-2);
  object-fit: cover;
  transition: box-shadow var(--md-duration-medium) var(--md-ease-standard),
    transform var(--md-duration-medium) var(--md-ease-standard);
}

.read-hero__link:hover .read-hero__cover {
  box-shadow: 0 24px 52px color-mix(in srgb, var(--accent-rose) 28%, transparent),
    var(--md-elevation-3);
  transform: translateY(-2px);
}

/* 表紙ごと押せることが分かるよう、触れた瞬間にローズの縁を返す。
   全画面の幕が出るまでの数十ミリ秒も、無反応にはしない */
.read-hero__link:active .read-hero__cover,
.read-hero__link.is-navigating .read-hero__cover,
.read-hero__link:focus-visible .read-hero__cover {
  box-shadow: 0 0 0 3px var(--accent-rose-bright), 0 18px 40px rgba(150, 18, 64, 0.4);
  transform: scale(0.99);
}

.read-hero__name {
  font-weight: 500;
  overflow-wrap: anywhere;
}

.read-hero__meta {
  color: var(--md-on-surface-variant);
  font-size: 0.875rem;
}

.read-hero__cta {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 56px;
  margin-top: 12px;
  overflow: hidden;
  border-radius: var(--md-shape-full);
  /* ワインからローズへ流れる光。押す前から「開きたい」と思わせる入口にする */
  background:
    radial-gradient(120% 180% at 18% 0%, rgba(255, 255, 255, 0.28), transparent 42%),
    linear-gradient(100deg, #a80d43 0%, var(--accent-rose) 45%, #d92f65 100%);
  color: #fff;
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  box-shadow: 0 8px 22px rgba(150, 18, 64, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  transition: box-shadow var(--md-duration-short) var(--md-ease-standard),
    transform var(--md-duration-short) var(--md-ease-standard),
    filter var(--md-duration-short) var(--md-ease-standard);
}

.read-hero__cta > * {
  position: relative;
  z-index: 1;
}

/* 光がすっと横切る。触れたときだけ動かし、常時のちらつきは避ける */
.read-hero__cta::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(105deg, transparent 32%, rgba(255, 255, 255, 0.4) 50%, transparent 68%);
  transform: translateX(-130%);
  transition: transform 700ms var(--md-ease-standard);
  pointer-events: none;
}

.read-hero__link:hover .read-hero__cta,
.read-hero__link:focus-visible .read-hero__cta {
  box-shadow: 0 12px 30px rgba(150, 18, 64, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.32);
  filter: brightness(1.05) saturate(1.05);
}

.read-hero__link:hover .read-hero__cta::after,
.read-hero__link:focus-visible .read-hero__cta::after,
.read-hero__link.is-navigating .read-hero__cta::after {
  transform: translateX(130%);
}

.read-hero__link:active .read-hero__cta {
  transform: scale(0.985);
  box-shadow: 0 4px 12px rgba(150, 18, 64, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

/* 押した瞬間に、遷移前のボタン自身を「読み込み中」に変える。
   全画面の幕は 80ms 後に出るので、その間の手応えをここで作る */
.read-hero__link.is-navigating {
  cursor: progress;
}

.read-hero__link.is-navigating .read-hero__cta {
  transform: scale(0.99);
}

.read-hero__link.is-navigating .read-hero__cta .icon {
  display: none;
}

.read-hero__link.is-navigating .read-hero__cta::before {
  content: "";
  position: relative;
  z-index: 1;
  width: 18px;
  height: 18px;
  border: 2px solid rgba(255, 255, 255, 0.38);
  border-top-color: #fff;
  border-radius: var(--md-shape-full);
  animation: spinner-rotate 0.8s linear infinite;
}

/* 巻一覧から直接開くときも、表紙が反応したことを一瞬だけ見せる */
.card__link.is-navigating .card__cover {
  box-shadow: 0 0 0 2px var(--accent-rose-bright), 0 16px 32px rgba(150, 18, 64, 0.35);
}

/* 2 巻目以降の一覧。読む入口(1 巻目)と区別できるように見出しを付ける */
.volume-list {
  margin-top: 32px;
}

.volume-list__title {
  margin: 0 0 12px;
  font-size: 1.125rem;
  line-height: 1.5rem;
  font-weight: 500;
}

.empty {
  color: var(--md-on-surface-variant);
}

/* ダイアログ(年齢確認) */
.age-body {
  display: grid;
  place-items: center;
  min-height: 100dvh;
  padding: 24px 16px;
  background: var(--md-surface-container);
}

.age-body .container {
  padding: 0;
}

/* 年齢確認前の入口(ランディング・/age)の背景。
   写真は使わず、夜の部屋(backdrop-night.svg)と背中のシルエット(silhouette-night.svg)を
   SVG で重ねる。文字はダイアログの中で読ませ、背後の光はその縁からにじませる。
   18 歳未満と答えた画面は .age-body だけ(この .age-body--night を付けない)にして、
   演出を出さない。 */
.age-body--night {
  position: relative;
  /* この画面だけ、ボタン・リンク・フォーカスリングをローズ系にする */
  --md-primary: #ff9dbb;
  --md-on-primary: #3a0518;
  --md-primary-container: #ffd2de;
  --md-on-primary-container: #3a0518;
  --md-surface-container: rgba(19, 3, 11, 0.62);
  --md-on-surface: #fff3f7;
  --md-surface-container-high: rgba(46, 8, 24, 0.7);
  --md-on-surface-variant: #ffd3e0;
  --md-outline-variant: rgba(255, 194, 212, 0.22);
  color: #fff3f7;
  background-color: #12020a;
  /* ヘッダーとフッターは全幅に広げ、ダイアログは画面の中央に置く */
  justify-items: stretch;
  /* 部屋(ワインの闇・ブラインドの光・シルクの寝具)は静止した下地。
     人物は ::after で別の層にして、呼吸に合わせて動かす */
  background-image: url("backdrop-night.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

/* 背後の光がゆっくり呼吸する。ダイアログの縁と人物の輪郭を、ごく遅い明滅で揺らす */
.age-body--night::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(46% 40% at 80% 16%, rgba(255, 190, 140, 0.2), transparent 72%),
    radial-gradient(42% 36% at 10% 90%, rgba(255, 79, 135, 0.22), transparent 74%),
    radial-gradient(30% 26% at 86% 64%, rgba(255, 79, 135, 0.26), transparent 72%);
  mix-blend-mode: screen;
  animation: night-breathe 13s ease-in-out infinite;
}

/* 背中のシルエット。部屋は止めたまま人物だけをわずかに揺らし、
   肩・背中・腰の線が動くことで「そこに誰かがいる」気配を出す。
   画面の下端と右端を軸にするので、画面の外へはみ出さずに呼吸する */
.age-body--night::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: url("silhouette-night.svg");
  background-repeat: no-repeat;
  background-position: right -3% bottom;
  background-size: auto 64%;
  /* 輪郭をわずかにぼかし、写真の被写界深度のように部屋へ溶かす */
  filter: blur(0.5px);
  opacity: 0.94;
  transform-origin: 92% 100%;
  animation: night-sway 19s ease-in-out infinite;
  will-change: transform;
}

/* 幕の上に載るヘッダー・本文・フッターは、呼吸する光より手前に置く */
.age-body--night > .app-bar,
.age-body--night > main,
.age-body--night > .site-footer {
  position: relative;
  z-index: 1;
}

/* 背景の上に浮くヘッダーは、色を透かして画像を隠さない */
.age-body--night .app-bar {
  background: rgba(17, 2, 10, 0.5);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  backdrop-filter: blur(16px) saturate(1.2);
  border-bottom: 1px solid rgba(255, 194, 212, 0.12);
}

.age-body--night .app-bar__roman {
  color: rgba(255, 211, 224, 0.72);
}

/* ロゴの後ろに灯りをともす。ヘッダーがただの板に見えないように */
.age-body--night .app-bar__logo {
  animation: night-halo 7s ease-in-out infinite;
}

/* ダイアログは濃いワインのガラス。縁を光らせ、後ろの灯りをかすかに通す */
.age-body--night .dialog {
  border: 1px solid rgba(255, 194, 212, 0.26);
  background:
    linear-gradient(158deg, rgba(62, 13, 32, 0.82), rgba(24, 4, 14, 0.88) 62%, rgba(38, 7, 22, 0.86));
  box-shadow:
    0 32px 80px rgba(6, 0, 4, 0.72),
    0 0 0 1px rgba(255, 120, 160, 0.08),
    inset 0 1px 0 rgba(255, 226, 235, 0.18),
    inset 0 0 60px rgba(255, 79, 135, 0.08);
  -webkit-backdrop-filter: blur(18px) saturate(1.25);
  backdrop-filter: blur(18px) saturate(1.25);
  color: #fff3f7;
  /* 立ち上がったあとは、内側のローズがゆっくり満ち引きする */
  animation:
    night-rise 620ms var(--md-ease-standard) both,
    night-glass 11s ease-in-out 700ms infinite;
}

/* 見出しは明朝で組む。ローズの灯りを後ろににじませる */
.age-body--night .dialog__title {
  font-family: var(--accent-serif);
  letter-spacing: 0.08em;
  color: #fff6f9;
  text-shadow: 0 0 32px rgba(255, 95, 145, 0.5), 0 1px 2px rgba(0, 0, 0, 0.5);
  animation: night-title 11s ease-in-out infinite;
}

.age-body--night .dialog__text,
.age-body--night .landing-list {
  color: rgba(255, 226, 235, 0.84);
}

.age-body--night .landing-links a {
  color: var(--accent-rose-soft);
}

/* 「18 歳以上です」は、読む入口と同じローズのグラデーションで主役にする */
.age-body--night .btn--filled {
  position: relative;
  overflow: hidden;
  background: linear-gradient(140deg, #ff5f95 0%, #d81b60 46%, #a5103f 100%);
  color: #fff;
  box-shadow:
    0 12px 28px rgba(150, 18, 64, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

/* 主役のボタンを、時々ひときわ明るくする。ガラスに灯りが滑るように一度だけ流す */
.age-body--night .btn--filled::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    102deg,
    rgba(255, 236, 242, 0) 42%,
    rgba(255, 236, 242, 0.42) 50%,
    rgba(255, 236, 242, 0) 58%
  );
  background-repeat: no-repeat;
  background-size: 240% 100%;
  background-position: 145% 0;
  animation: night-sheen 9s ease-in-out infinite;
}

.age-body--night .btn--filled:hover {
  background: linear-gradient(140deg, #ff79a8 0%, #e4246c 46%, #b2144a 100%);
  box-shadow:
    0 14px 32px rgba(150, 18, 64, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.32);
}

.age-body--night .btn--filled:active {
  box-shadow:
    0 6px 16px rgba(150, 18, 64, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

/* 「18 歳未満です」は控えめに。主役のボタンと迷わせない */
.age-body--night .btn--text {
  color: var(--accent-rose-soft);
}

/* 光がゆっくり満ち引きしながら、わずかに漂う。周期は人物とずらしてあるので、
   2 つの動きが重なる瞬間が来ない = 機械的なループに見せない */
@keyframes night-breathe {
  0%,
  100% {
    opacity: 0.55;
    transform: scale(1) translate3d(0, 0, 0);
  }

  38% {
    opacity: 0.92;
    transform: scale(1.03) translate3d(-1.2%, 0.6%, 0);
  }

  72% {
    opacity: 0.7;
    transform: scale(1.015) translate3d(0.9%, -0.4%, 0);
  }
}

/* 人物の呼吸。背中を反らして息を吸い、肩と腰の線が静かに戻る。
   拡大と回転だけで動かし、画面の端に隙間ができないようにする */
@keyframes night-sway {
  0%,
  100% {
    transform: rotate(0deg) scale(1) translate3d(0, 0, 0);
  }

  34% {
    transform: rotate(-0.28deg) scale(1.012) translate3d(0, 0.4%, 0);
  }

  68% {
    transform: rotate(0.22deg) scale(1.006) translate3d(0, 0.1%, 0);
  }
}

@keyframes night-rise {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.985);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

/* ガラスの内側に灯るローズが、呼吸に合わせて強くなる */
@keyframes night-glass {
  0%,
  100% {
    box-shadow:
      0 32px 80px rgba(6, 0, 4, 0.72),
      0 0 0 1px rgba(255, 120, 160, 0.08),
      inset 0 1px 0 rgba(255, 226, 235, 0.18),
      inset 0 0 60px rgba(255, 79, 135, 0.08);
  }

  50% {
    box-shadow:
      0 34px 88px rgba(6, 0, 4, 0.76),
      0 0 26px rgba(255, 95, 145, 0.18),
      inset 0 1px 0 rgba(255, 226, 235, 0.26),
      inset 0 0 90px rgba(255, 79, 135, 0.16);
  }
}

@keyframes night-title {
  0%,
  100% {
    text-shadow: 0 0 32px rgba(255, 95, 145, 0.5), 0 1px 2px rgba(0, 0, 0, 0.5);
  }

  50% {
    text-shadow: 0 0 46px rgba(255, 120, 160, 0.78), 0 1px 2px rgba(0, 0, 0, 0.5);
  }
}

/* ボタンの上を灯りが一度流れ、そのあと長く止まる */
@keyframes night-sheen {
  0%,
  52% {
    background-position: 145% 0;
  }

  78%,
  100% {
    background-position: -45% 0;
  }
}

@keyframes night-halo {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(255, 95, 145, 0);
  }

  50% {
    box-shadow: 0 0 20px 2px rgba(255, 95, 145, 0.4);
  }
}

/* 狭い画面では人物を小さくして右下に残す。ダイアログの外に肩の線だけ覗かせる */
@media (max-width: 600px) {
  .age-body--night::after {
    background-position: right -6% bottom;
    background-size: auto 46%;
  }
}

/* 横長の画面では人物を画面の高さに合わせ、腰まで見せる */
@media (min-width: 1024px) {
  .age-body--night::after {
    background-size: auto 72%;
  }
}

/* 動きを減らす設定では、呼吸・漂い・きらめきをすべて止めて静止画にする */
@media (prefers-reduced-motion: reduce) {
  .age-body--night::before,
  .age-body--night::after,
  .age-body--night .dialog,
  .age-body--night .dialog__title,
  .age-body--night .app-bar__logo,
  .age-body--night .btn--filled::before {
    animation: none !important;
  }
}

/* 強制色モードでは写真のような装飾を落とし、素の面と枠だけで見せる */
@media (forced-colors: active) {
  .age-body--night {
    background-image: none;
    background-color: Canvas;
    color: CanvasText;
  }

  .age-body--night::before,
  .age-body--night::after,
  .age-body--night .btn--filled::before {
    display: none;
  }

  .age-body--night .app-bar,
  .age-body--night .dialog {
    background: Canvas;
    color: CanvasText;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: none;
  }
}

/* ---- サイト全体の背景 ----
   作品を探す画面(一覧・作品・タグ・ランキングなど)に、夜の部屋の空気を敷く。
   ワインの闇・ランプの灯り・シルク・レース・花びらを重ね、作品を開くまでの時間を
   「大人の時間」として見せる。読む画面(reader-body)・年齢確認(age-body)・
   管理画面は対象外にして、作品と操作の見やすさを優先する。 */

.site-body--ambient {
  /* 背景に合わせて画面の色をワイン×ローズへ寄せる。
     Material の役割トークンを差し替えるので、各コンポーネントは変更不要 */
  --md-primary: #ff9dbb;
  --md-on-primary: #3a0518;
  --md-primary-container: rgba(255, 79, 135, 0.22);
  --md-on-primary-container: #ffd9e4;
  --md-secondary: #e7b7c8;
  --md-on-secondary: #3a0518;
  --md-secondary-container: rgba(255, 79, 135, 0.18);
  --md-on-secondary-container: #ffe3ec;
  --md-tertiary: #efc9a8;
  --md-on-tertiary: #3a1a05;
  --md-tertiary-container: rgba(239, 201, 168, 0.18);
  --md-on-tertiary-container: #ffe9d4;
  --md-error: #ffb4ab;
  --md-on-error: #690005;
  --md-background: #0d0108;
  --md-on-background: #f7e9f0;
  --md-surface: #12020a;
  --md-on-surface: #f7e9f0;
  --md-surface-variant: #3a1022;
  --md-on-surface-variant: #e3b9c9;
  --md-outline: #c08ba0;
  --md-outline-variant: rgba(255, 194, 212, 0.2);
  --md-surface-container-lowest: #090105;
  --md-surface-container-low: rgba(34, 6, 18, 0.64);
  --md-surface-container: rgba(22, 4, 12, 0.6);
  --md-surface-container-high: rgba(48, 10, 27, 0.66);
  --md-surface-container-highest: rgba(60, 14, 34, 0.72);
  --md-inverse-surface: #f7e9f0;
  --md-inverse-on-surface: #2a0714;
  --md-inverse-primary: #a5103f;

  /* 入力欄・スクロールバーも暗い画面に合わせる */
  color-scheme: dark;
  background-color: #0d0108;
  color: var(--md-on-background);
  /* 背景レイヤー(z-index: -1)を本文の後ろに閉じ込める */
  isolation: isolate;
}

/* 部屋そのもの。スクロールしても動かないよう、画面に固定する */
.site-ambient {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  background-color: #0d0108;
  background-image:
    linear-gradient(180deg, rgba(8, 1, 5, 0.16), rgba(8, 1, 5, 0.42) 56%, rgba(8, 1, 5, 0.6)),
    url("ambient-wine.svg");
  background-position: center top;
  background-size: cover;
  background-repeat: no-repeat;
}

/* 灯りがゆっくり呼吸する。カードの縁と文字の背景を、ごく遅い明滅で揺らす */
.site-ambient__glow {
  position: absolute;
  inset: -8%;
  background:
    radial-gradient(46% 38% at 84% 12%, rgba(255, 190, 140, 0.2), transparent 72%),
    radial-gradient(44% 36% at 8% 90%, rgba(255, 79, 135, 0.22), transparent 74%),
    radial-gradient(30% 26% at 88% 66%, rgba(255, 79, 135, 0.2), transparent 72%);
  mix-blend-mode: screen;
  animation: ambient-breathe 17s ease-in-out infinite;
  will-change: opacity, transform;
}

/* 背中のシルエット。部屋は止めたまま人物だけをわずかに揺らし、
   肩・背中・腰の線が動くことで「そこに誰かがいる」気配を出す。
   本文の邪魔をしないよう、低い透明度とぼかしで闇に溶かす */
.site-ambient__silhouette {
  position: absolute;
  right: -3%;
  bottom: -2%;
  width: min(52vw, 620px);
  height: min(80vh, 920px);
  background: url("silhouette-night.svg") right bottom / contain no-repeat;
  filter: blur(1.4px) saturate(0.9);
  opacity: 0.34;
  transform-origin: 92% 100%;
  animation: ambient-sway 23s ease-in-out infinite;
  will-change: transform;
}

/* 漂う灯り(玉ボケ)。花びらと人物の間に、ごく薄い粒を漂わせる */
.site-ambient__embers {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(3px 3px at 12% 76%, rgba(255, 194, 212, 0.6), transparent 100%),
    radial-gradient(2px 2px at 24% 40%, rgba(255, 207, 174, 0.5), transparent 100%),
    radial-gradient(3px 3px at 66% 24%, rgba(255, 143, 178, 0.45), transparent 100%),
    radial-gradient(2px 2px at 82% 58%, rgba(255, 194, 212, 0.5), transparent 100%),
    radial-gradient(3px 3px at 92% 30%, rgba(255, 207, 174, 0.4), transparent 100%),
    radial-gradient(2px 2px at 44% 88%, rgba(255, 143, 178, 0.45), transparent 100%);
  background-repeat: no-repeat;
  opacity: 0.55;
  animation: ambient-ember 21s ease-in-out infinite;
  will-change: opacity, transform;
}

/* ---- 背景の上に載る部品。ガラス越しに灯りを透かす ---- */
.site-body--ambient .app-bar {
  border-bottom: 1px solid rgba(255, 194, 212, 0.12);
  background: rgba(14, 2, 9, 0.58);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  backdrop-filter: blur(18px) saturate(1.2);
}

.site-body--ambient .app-bar__logo {
  background: linear-gradient(150deg, #ff7fa6, #a5103f);
  color: #fff3f7;
  box-shadow:
    0 0 18px rgba(255, 79, 135, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

.site-body--ambient .app-bar__roman {
  color: rgba(255, 211, 224, 0.7);
}

.site-body--ambient .search-bar {
  border: 1px solid rgba(255, 194, 212, 0.14);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
  backdrop-filter: blur(14px) saturate(1.15);
}

.site-body--ambient .card {
  border: 1px solid rgba(255, 194, 212, 0.1);
}

.site-body--ambient .card:hover {
  box-shadow:
    0 14px 34px rgba(90, 8, 36, 0.55),
    0 0 0 1px rgba(255, 120, 160, 0.22);
}

.site-body--ambient .btn--filled {
  background: linear-gradient(140deg, #ff5f95 0%, #d81b60 50%, #a5103f 100%);
  color: #fff5f8;
  box-shadow:
    0 8px 22px rgba(120, 10, 48, 0.38),
    inset 0 1px 0 rgba(255, 255, 255, 0.24);
}

.site-body--ambient .btn--filled:hover {
  background: linear-gradient(140deg, #ff79a8 0%, #e4246c 50%, #b2144a 100%);
  box-shadow:
    0 12px 28px rgba(120, 10, 48, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.site-body--ambient .site-footer {
  border-top-color: rgba(255, 194, 212, 0.14);
}

/* 狭い画面では人物を小さくして右下に残す。カードの読みやすさを優先する */
@media (max-width: 600px) {
  .site-ambient__silhouette {
    right: -8%;
    width: min(72vw, 380px);
    height: min(56vh, 520px);
    opacity: 0.26;
  }
}

/* 横長の画面では人物を画面の高さに合わせ、腰まで見せる */
@media (min-width: 1024px) {
  .site-ambient__silhouette {
    height: min(84vh, 980px);
  }
}

/* 動きを減らす設定では、呼吸・漂い・きらめきをすべて止めて静止画にする */
@media (prefers-reduced-motion: reduce) {
  .site-ambient__glow,
  .site-ambient__silhouette,
  .site-ambient__embers {
    animation: none;
  }
}

/* ハイコントラスト・強制カラーでは背景を消し、文字と枠だけにする */
@media (prefers-contrast: more) {
  .site-ambient__glow,
  .site-ambient__embers {
    display: none;
  }

  .site-ambient__silhouette {
    opacity: 0.16;
  }
}

@media (forced-colors: active) {
  .site-ambient {
    display: none;
  }

  .site-body--ambient {
    background-color: Canvas;
    color: CanvasText;
  }
}

@keyframes ambient-breathe {
  0%,
  100% {
    opacity: 0.55;
    transform: scale(1) translate3d(0, 0, 0);
  }

  38% {
    opacity: 0.9;
    transform: scale(1.035) translate3d(-1.2%, 0.6%, 0);
  }

  72% {
    opacity: 0.68;
    transform: scale(1.015) translate3d(0.9%, -0.4%, 0);
  }
}

/* 人物の呼吸。背中を反らして息を吸い、肩と腰の線が静かに戻る。
   拡大と回転だけで動かし、画面の端に隙間ができないようにする */
@keyframes ambient-sway {
  0%,
  100% {
    transform: rotate(0deg) scale(1) translate3d(0, 0, 0);
  }

  34% {
    transform: rotate(-0.24deg) scale(1.01) translate3d(0, 0.3%, 0);
  }

  68% {
    transform: rotate(0.18deg) scale(1.005) translate3d(0, 0.1%, 0);
  }
}

/* 漂う灯り。ゆっくり浮き上がりながら、明滅する */
@keyframes ambient-ember {
  0%,
  100% {
    opacity: 0.4;
    transform: translate3d(0, 0, 0);
  }

  50% {
    opacity: 0.75;
    transform: translate3d(0, -1.4%, 0);
  }
}

.dialog {
  width: min(100%, 420px);
  padding: 24px;
  border-radius: var(--md-shape-xl);
  background: var(--md-surface-container-high);
  color: var(--md-on-surface);
  box-shadow: var(--md-elevation-3);
}

.dialog__title {
  margin: 0 0 16px;
  font-size: 1.5rem;
  line-height: 2rem;
  font-weight: 400;
}

.dialog__text {
  margin: 0 0 24px;
  color: var(--md-on-surface-variant);
}

.dialog__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  margin: 0;
}

/* トップのサイト紹介(検索結果から来た未確認の閲覧者に見せる) */
.landing-list {
  margin: 0 0 24px;
  padding-left: 1.5em;
  color: var(--md-on-surface-variant);
}

.landing-list li {
  margin-bottom: 8px;
}

.landing-links {
  margin: 16px 0 0;
  font-size: 0.875rem;
}

/* ビューア */
.reader-body {
  background: var(--md-surface-container-lowest);
  color: var(--md-on-surface);
  overflow: hidden;
  /* スマホで引っ張って更新(オーバースクロール)しないようにする。ピンチでの拡大は残す */
  overscroll-behavior: none;
}

.reader {
  /* 画像を画面いっぱいに出す(上下のバーは重ねて表示する)。
     --app-vh は JS が実際に見えている高さで更新する(スマホのブラウザー UI で下端が切れる対策) */
  position: relative;
  height: calc(var(--app-vh, 1vh) * 100);
  min-height: 100vh;
  overflow: hidden;
  background: var(--md-surface-container-lowest);
}

/* タップした瞬間にブラウザーが付ける青いハイライトを消す(画像をめくる邪魔になるため) */
.reader,
.reader * {
  -webkit-tap-highlight-color: transparent;
}

.reader-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 56px;
  padding: 0 8px;
  background: var(--md-surface-container);
  color: var(--md-on-surface);
}

.reader-bar .icon-btn {
  color: var(--md-on-surface);
}

.reader-name {
  flex: 1;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 500;
}

.reader-counter {
  padding-right: 8px;
  color: var(--md-on-surface-variant);
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
}

.reader-stage {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  cursor: pointer;
  /* ダブルタップの遅延を無くす(ピンチでの拡大は許可する) */
  touch-action: manipulation;
}

/* バーを出している間は、画像がバーに隠れないよう内側に寄せる(画像全体が見える) */
.reader[data-ui="shown"] .reader-pages {
  padding-top: 64px;
  padding-bottom: 84px;
  transition: padding 0.2s ease;
}

@media (prefers-reduced-motion: reduce) {
  .reader[data-ui="shown"] .reader-pages {
    transition: none;
  }
}

.reader-pages {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  height: 100%;
  max-width: 100%;
}

/* どんな縦横比のページでも、画面内で最大の大きさにして全体を表示する
   (縦長は幅いっぱい、横長は高さいっぱい、小さい画像は拡大) */
.reader-pages img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center;
}

/* 見開き表示: 2 ページを横に並べる。右綴じでは小さいページ番号が右に来るように反転する */
.reader[data-spread="on"] .reader-pages img {
  width: calc(50% - 1px);
  max-width: calc(50% - 1px);
}

.reader[data-spread="on"][data-direction="rtl"] .reader-pages {
  flex-direction: row-reverse;
}

.reader-hint {
  padding: 8px;
  text-align: center;
  font-size: 0.75rem;
  line-height: 1rem;
  color: var(--md-on-surface-variant);
  background: var(--md-surface-container);
}

/* 読み込み中の演出。押した直後から動きを出し、反応が無いと感じさせない。
   画面遷移の間は全画面の「ワイン色の幕」を下ろし、押した表紙をぼかして透かす。
   ビューアでは最初のページ画像が読めるまで、下のページをぼかして覆う。
   色・光・書体で「作品を開く時間」そのものを演出する */
.loading {
  --loading-ink: #fff6f9;
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: 24px;
  isolation: isolate;
  background:
    radial-gradient(120% 90% at 12% -10%, rgba(126, 18, 56, 0.72), transparent 58%),
    radial-gradient(110% 100% at 92% 108%, rgba(70, 8, 36, 0.82), transparent 62%),
    linear-gradient(155deg, #240811 0%, #16040c 55%, #2a0714 100%);
  color: var(--loading-ink);
  text-align: center;
}

.loading[hidden] {
  display: none;
}

/* ビューアでは下のページ画像を透かす。読み込みが進むほど背景の色が立ち上がる */
.loading--reader {
  position: absolute;
  z-index: 5;
  background:
    radial-gradient(90% 70% at 28% 8%, rgba(126, 18, 56, 0.5), transparent 70%),
    linear-gradient(160deg, rgba(26, 5, 14, 0.92), rgba(28, 4, 15, 0.95));
  -webkit-backdrop-filter: blur(26px) saturate(1.25) brightness(0.62);
  backdrop-filter: blur(26px) saturate(1.25) brightness(0.62);
}

/* 押した表紙。強くぼかして、色と気配だけを見せる */
.loading__art {
  position: absolute;
  inset: -12%;
  z-index: -3;
  width: 124%;
  height: 124%;
  max-width: none;
  max-height: none;
  object-fit: cover;
  opacity: 0.9;
  filter: blur(18px) saturate(1.5) brightness(0.5) contrast(1.05);
  transform: scale(1.04);
  animation: loading-art 9s var(--md-ease-standard) both;
}

.loading__art[hidden] {
  display: none;
}

/* ゆっくり呼吸するローズの光。画面の四隅を色で満たす */
.loading__aura {
  position: absolute;
  z-index: -2;
  width: 64vmax;
  aspect-ratio: 1;
  border-radius: var(--md-shape-full);
  filter: blur(42px);
  opacity: 0.55;
  pointer-events: none;
}

.loading__aura--rose {
  top: -34vmax;
  left: -24vmax;
  background: radial-gradient(circle, rgba(255, 79, 135, 0.55) 0%, rgba(255, 79, 135, 0) 66%);
  animation: loading-breathe 7s ease-in-out infinite;
}

.loading__aura--wine {
  right: -30vmax;
  bottom: -38vmax;
  background: radial-gradient(circle, rgba(120, 12, 60, 0.78) 0%, rgba(120, 12, 60, 0) 68%);
  animation: loading-breathe 9s ease-in-out infinite reverse;
}

/* 縁を落として中央の文言に視線を集める */
.loading__veil {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(85% 65% at 50% 42%, transparent 0%, rgba(9, 1, 5, 0.28) 70%, rgba(9, 1, 5, 0.7) 100%),
    linear-gradient(180deg, rgba(12, 2, 7, 0.26), rgba(12, 2, 7, 0.62));
}

.loading--reader .loading__veil {
  background: radial-gradient(90% 70% at 50% 44%, transparent 0%, rgba(9, 1, 5, 0.5) 100%);
}

/* 幕の上を、ごくゆっくり光が横切る。静かなのに「開演前」の高揚を出す */
.loading__veil::before {
  content: "";
  position: absolute;
  inset: -30%;
  background: linear-gradient(
    112deg,
    transparent 34%,
    rgba(255, 205, 222, 0.09) 48%,
    rgba(255, 190, 210, 0.14) 52%,
    transparent 66%
  );
  transform: translateX(-24%);
  animation: loading-beam 9s ease-in-out infinite alternate;
  pointer-events: none;
}

.loading__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: min(100%, 360px);
  padding: 8px;
}

/* 明るい表紙が来ても文字が沈まないよう、中央に薄い暗がりを敷く */
.loading__inner::before {
  content: "";
  position: absolute;
  inset: -48px -16px;
  z-index: -1;
  border-radius: var(--md-shape-full);
  background: radial-gradient(closest-side, rgba(10, 1, 5, 0.5), rgba(10, 1, 5, 0));
  pointer-events: none;
}

.loading__inner > * {
  animation: loading-rise 520ms var(--md-ease-standard) both;
}

.loading__inner > :nth-child(2) {
  animation-delay: 60ms;
}

.loading__inner > :nth-child(3) {
  animation-delay: 120ms;
}

.loading__inner > :nth-child(4) {
  animation-delay: 180ms;
}

.loading__inner > :nth-child(5) {
  animation-delay: 240ms;
}

.loading__brand {
  font-size: 0.625rem;
  line-height: 1;
  font-weight: 600;
  letter-spacing: 0.52em;
  text-indent: 0.52em;
  text-transform: uppercase;
  color: var(--accent-gold);
  opacity: 0.92;
}

.loading__title {
  margin-top: 2px;
  font-family: var(--accent-serif);
  font-size: clamp(1.5rem, 7vw, 1.9rem);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.14em;
  text-indent: 0.14em;
  color: var(--loading-ink);
  text-shadow: 0 0 24px rgba(255, 95, 145, 0.38), 0 1px 2px rgba(0, 0, 0, 0.55);
}

.spinner {
  position: relative;
  width: 46px;
  height: 46px;
  border: 1.5px solid rgba(255, 196, 213, 0.22);
  border-top-color: var(--accent-rose-bright);
  border-right-color: var(--accent-gold);
  border-radius: var(--md-shape-full);
  box-shadow: 0 0 24px rgba(255, 79, 135, 0.35), inset 0 0 16px rgba(255, 79, 135, 0.18);
  animation: spinner-rotate 1.25s cubic-bezier(0.5, 0.05, 0.5, 0.95) infinite;
}

.spinner::before {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--md-shape-full);
}

/* 中心で脉打つ光。回転する輪だけより、体温を感じる動きにする */
.loading__spark {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 6px;
  height: 6px;
  border-radius: var(--md-shape-full);
  background: #fff2f7;
  box-shadow: 0 0 8px 2px rgba(255, 111, 159, 0.9), 0 0 20px 6px rgba(255, 79, 135, 0.55);
  animation: loading-heartbeat 1.5s ease-in-out infinite;
}

.loading__lead {
  max-width: 30ch;
  margin-top: -4px;
  font-family: var(--accent-serif);
  font-size: 0.8125rem;
  line-height: 1.7;
  letter-spacing: 0.1em;
  color: rgba(255, 226, 235, 0.8);
}

.loading__progress {
  position: relative;
  width: 132px;
  height: 2px;
  margin-top: 2px;
  overflow: hidden;
  border-radius: var(--md-shape-full);
  background: linear-gradient(
    90deg,
    rgba(255, 194, 212, 0.12),
    rgba(239, 201, 168, 0.3),
    rgba(255, 194, 212, 0.12)
  );
}

.loading__progress > span {
  position: absolute;
  inset: 0 auto 0 0;
  width: 40%;
  border-radius: inherit;
  background: linear-gradient(90deg, transparent, var(--accent-rose-soft), var(--accent-gold), transparent);
  animation: loading-sweep 1.7s var(--md-ease-standard) infinite;
}

.loading--leaving {
  animation: loading-out 240ms var(--md-ease-standard) forwards;
  /* 幕が晴れていく間は、もう本文を操作できるようにする(待たせない) */
  pointer-events: none;
}

@keyframes spinner-rotate {
  to {
    transform: rotate(360deg);
  }
}
@keyframes loading-out {
  to {
    opacity: 0;
  }
}

@keyframes loading-rise {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes loading-art {
  from {
    opacity: 0;
    transform: scale(1.14);
  }

  to {
    opacity: 0.9;
    transform: scale(1.04);
  }
}

@keyframes loading-breathe {
  0%,
  100% {
    opacity: 0.38;
    transform: scale(0.95);
  }

  50% {
    opacity: 0.7;
    transform: scale(1.08);
  }
}

@keyframes loading-heartbeat {
  0%,
  100% {
    opacity: 0.75;
    transform: translate(-50%, -50%) scale(0.85);
  }

  50% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.2);
  }
}

@keyframes loading-beam {
  from {
    transform: translateX(-24%);
  }

  to {
    transform: translateX(24%);
  }
}

@keyframes loading-sweep {
  from {
    transform: translateX(-110%);
  }

  to {
    transform: translateX(350%);
  }
}

@media (prefers-reduced-motion: reduce) {
  /* 動きを減らす設定では、回転・明滅・スイープを止め、
     色・書体・静的な進捗線だけで「開いている」ことを伝える */
  .loading,
  .loading *,
  .loading *::before,
  .loading *::after,
  .read-hero__cta::after {
    animation: none !important;
    transition: none !important;
  }

  .loading__inner > * {
    opacity: 1;
    transform: none;
  }

  .loading__art {
    opacity: 0.9;
    transform: none;
  }

  .loading__progress > span {
    left: 0;
    width: 100%;
    opacity: 0.45;
    transform: none;
  }

  .read-hero__link.is-navigating .read-hero__cta::before {
    animation: none;
  }
}

@media (prefers-contrast: more) {
  .loading__brand,
  .loading__title,
  .loading__lead {
    color: #fff;
    text-shadow: none;
  }

  .loading__progress {
    outline: 1px solid #fff;
  }
}



/* スナックバー */
.snackbar {
  position: absolute;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  max-width: calc(100% - 32px);
  margin: 0;
  padding: 12px 16px;
  border-radius: var(--md-shape-xs);
  background: var(--md-inverse-surface);
  color: var(--md-inverse-on-surface);
  font-size: 0.875rem;
  line-height: 1.25rem;
  box-shadow: var(--md-elevation-3);
}

/* 縦読みで最終ページの下端まで来たときの案内。
   すぐに読了画面で覆わず、まずこのボタンだけを出す */
.reader-end-prompt {
  position: absolute;
  left: 50%;
  bottom: max(88px, calc(env(safe-area-inset-bottom) + 88px));
  z-index: 4;
  transform: translateX(-50%);
  box-shadow: var(--md-elevation-3);
}

/* .btn の display が [hidden] より優先されるため、隠すときは明示する */
.reader-end-prompt[hidden] {
  display: none !important;
}

/* 読了画面(設計書 §11.2)。最終ページの次へ進もうとしたときに表示する */
.finished {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: grid;
  place-items: center;
  padding: 16px;
  padding-left: max(16px, env(safe-area-inset-left));
  padding-right: max(16px, env(safe-area-inset-right));
  padding-bottom: max(16px, env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--md-scrim) 50%, transparent);
}

.finished__panel {
  position: relative;
  width: min(100%, 560px);
  max-height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 24px;
  border-radius: var(--md-shape-xl);
  background: var(--md-surface-container-high);
  color: var(--md-on-surface);
  box-shadow: var(--md-elevation-3);
}

.finished__close {
  position: absolute;
  top: 12px;
  right: 12px;
  color: var(--md-on-surface-variant);
}

.finished__title {
  margin: 0 0 8px;
  font-size: 1.5rem;
  line-height: 2rem;
  font-weight: 400;
}

.finished__text {
  margin: 0 0 16px;
  color: var(--md-on-surface-variant);
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.finished__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.finished__related {
  margin-top: 24px;
}

.finished__related-title {
  margin: 0 0 12px;
  font-size: 1.125rem;
  line-height: 1.5rem;
  font-weight: 500;
}

.cards--related {
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 12px;
}

/* 広告枠(設計書 §11 のプレースホルダー)。
   「広告」と表示して作品と区別し、領域を確保して読み込み時のレイアウト移動を抑える */
.ad-slot {
  margin: 24px auto 0;
  border: 1px dashed var(--md-outline-variant);
  border-radius: var(--md-shape-md);
  background: var(--md-surface-container-low);
  text-align: center;
  overflow: hidden;
}

.ad-slot__label {
  display: inline-block;
  padding: 4px 12px;
  border-bottom: 1px dashed var(--md-outline-variant);
  color: var(--md-on-surface-variant);
  font-size: 0.6875rem;
  line-height: 1rem;
  font-weight: 500;
  letter-spacing: 0.5px;
}

.ad-slot__body {
  display: grid;
  place-items: center;
  min-height: 90px;
  padding: 8px;
  color: var(--md-on-surface-variant);
  font-size: 0.75rem;
}

.finished__panel .ad-slot {
  margin-top: 24px;
}

/* 幅 320px 前後の端末では 300px の iframe が枠からはみ出すので、枠の幅に収める */
.ad-slot__body iframe {
  max-width: 100%;
}

/* 広告が入らなかった枠は畳む(空の点線枠が表示の失敗に見えるため。ads.md §4.1) */
.ad-slot--empty {
  display: none;
}

/* 一覧グリッド内の広告枠(インフィード。ads.md §4.1)。
   作品カードと誤認しないよう、行全体を使い、カードの見た目(背景・浮き上がり)を外す */
.card--ad {
  grid-column: 1 / -1;
  background: transparent;
  border-radius: 0;
}

.card--ad:hover {
  box-shadow: none;
  transform: none;
}

.card--ad .ad-slot {
  margin: 0;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 1ms !important;
    animation-duration: 1ms !important;
  }

  .card:hover {
    transform: none;
  }

  .read-hero__link:hover .read-hero__cover {
    transform: none;
  }

  .read-hero__link:active .read-hero__cover,
  .read-hero__link.is-navigating .read-hero__cover,
  .read-hero__link:focus-visible .read-hero__cover {
    transform: none;
  }

  .read-hero__link:active .read-hero__cta,
  .read-hero__link.is-navigating .read-hero__cta {
    transform: none;
  }
}

/* ------------------------------------------------------------------
   ユニバーサルデザイン: 利用者を選ばず、同じように使えるようにする調整
   1 公平な利用 / 2 利用の柔軟性 / 3 単純で直感的 / 4 認知できる情報
   5 誤操作の許容 / 6 身体的負担の軽減 / 7 接近して使える大きさと空間
   ------------------------------------------------------------------ */

/* 1・6: キーボードとスクリーンリーダーの利用者が本文へ直接移動できるようにする */
.skip-link {
  position: absolute;
  left: 8px;
  top: -56px;
  z-index: 20;
  padding: 12px 16px;
  border-radius: var(--md-shape-sm);
  background: var(--md-primary);
  color: var(--md-on-primary);
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  transition: top var(--md-duration-short) var(--md-ease-standard);
}

.skip-link:focus {
  top: 8px;
}

/* 4: フォーカスが固定ヘッダーに隠れないようにする */
[id] {
  scroll-margin-top: 80px;
}

#main:focus,
#stage:focus {
  outline: none;
}

/* 4: 成人向けであることを常に示す */
.site-footer {
  max-width: 1100px;
  margin: 0 auto;
  padding: 24px 16px 40px;
  border-top: 1px solid var(--md-outline-variant);
  color: var(--md-on-surface-variant);
  font-size: 0.75rem;
  line-height: 1.5;
}

.site-footer__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin-bottom: 12px;
  font-size: 0.875rem;
}

.site-footer__nav a {
  padding: 4px 0;
  color: var(--md-on-surface-variant);
  text-decoration: none;
}

.site-footer__nav a:hover {
  color: var(--md-primary);
  text-decoration: underline;
}

.site-footer__note {
  margin: 0;
}

/* エラーページ(404 など) */
.error-page {
  padding: 48px 0;
  text-align: center;
}

.error-page__code {
  margin: 0 0 8px;
  font-size: 4rem;
  line-height: 1;
  font-weight: 500;
  color: var(--md-primary);
  font-variant-numeric: tabular-nums;
}

.error-page__message {
  margin: 0 0 24px;
  font-size: 1.25rem;
  line-height: 1.75rem;
}

.error-page__hint {
  margin: -16px 0 24px;
  color: var(--md-on-surface-variant);
  font-size: 0.875rem;
}

/* 静的ページ(利用規約・プライバシーポリシー・お問い合わせ) */
.prose {
  max-width: 70ch;
}

.prose h2 {
  margin: 32px 0 12px;
  font-size: 1.25rem;
  line-height: 1.75rem;
  font-weight: 500;
}

.prose p {
  margin: 0 0 16px;
}

.prose ul,
.prose ol {
  margin: 0 0 16px;
  padding-left: 1.5em;
}

.prose li {
  margin-bottom: 8px;
}

.prose__updated,
.prose__note {
  color: var(--md-on-surface-variant);
  font-size: 0.875rem;
}

/* 1: JavaScript が無くても状況が分かるようにする */
.reader-noscript {
  margin: 0;
  padding: 16px;
  text-align: center;
  color: var(--md-on-surface-variant);
}

/* 2: 見開きの状態は文字でも示す(形や色だけに頼らない) */
.reader-hint {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px 12px;
}

.reader-hint__text {
  color: var(--md-on-surface-variant);
}

.reader-hint__controls {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.reader-control {
  min-height: 32px;
  padding: 0 12px;
  font-size: 0.75rem;
}

/* hidden を付けたボタンは必ず隠す(.btn の display が [hidden] より優先されるため) */
.reader-control[hidden] {
  display: none !important;
}

/* 全画面 API が無い端末(iPhone など)向けの案内 */
.reader-pwa {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  color: var(--md-on-surface-variant);
  font-size: 0.6875rem;
  line-height: 1.2;
}

/* 7: 端末の安全領域(ノッチ・ジェスチャーバー)を避ける */
.reader-bar {
  padding-left: max(8px, env(safe-area-inset-left));
  padding-right: max(8px, env(safe-area-inset-right));
}

.reader-hint {
  padding-bottom: max(8px, env(safe-area-inset-bottom));
}

/* 画像を画面いっぱいに出すため、上下のバーは画像に重ね、タップで出し入れする */
.reader-bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 3;
  background: color-mix(in srgb, var(--md-surface-container) 92%, transparent);
  backdrop-filter: blur(6px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.reader-hint {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 3;
  background: color-mix(in srgb, var(--md-surface-container) 92%, transparent);
  backdrop-filter: blur(6px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.reader[data-ui="hidden"] .reader-bar {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-100%);
}

.reader[data-ui="hidden"] .reader-hint {
  opacity: 0;
  pointer-events: none;
  transform: translateY(100%);
}

@media (prefers-reduced-motion: reduce) {
  .reader-bar,
  .reader-hint {
    transition: none;
  }
}

/* 全画面のときは背景も暗くして画像を目立たせる */
.reader:fullscreen {
  background: #000;
}

/* PC 用の送りボタンは広い画面のときだけ出す */
.reader-nav {
  display: none;
}

.reader-hint__text--desktop {
  display: none;
}

/* PC(広い画面)はバーを常に表示し、画像は余白の内側に収める(スマホは画面いっぱいのまま) */
@media (min-width: 900px) {
  .reader {
    display: grid;
    grid-template-rows: auto 1fr auto;
    background: var(--md-surface-container-low);
  }

  .reader-stage {
    position: relative;
    inset: auto;
    min-height: 0; /* グリッド行が画像の高さで伸びないようにする(はみ出し防止) */
    touch-action: auto;
  }

  .reader-pages {
    min-height: 0;
  }

  /* バーは重ねずに通常の位置へ。タップでの出し入れはスマホだけの機能にする */
  .reader-bar,
  .reader-hint,
  .reader[data-ui="hidden"] .reader-bar,
  .reader[data-ui="hidden"] .reader-hint {
    position: static;
    opacity: 1;
    transform: none;
    pointer-events: auto;
    background: var(--md-surface-container);
    backdrop-filter: none;
  }

  .reader-pages {
    padding: 8px 88px;
  }

  .reader-nav {
    position: absolute;
    top: 50%;
    display: grid;
    place-items: center;
    width: 56px;
    height: 96px;
    transform: translateY(-50%);
    border: 1px solid var(--md-outline-variant);
    border-radius: var(--md-shape-md);
    background: color-mix(in srgb, var(--md-surface-container) 80%, transparent);
    color: var(--md-on-surface);
    cursor: pointer;
  }

  .reader-nav:hover:not(:disabled) {
    background: var(--md-surface-container);
  }

  .reader-nav:disabled {
    opacity: 0.35;
    cursor: default;
  }

  .reader-nav--prev {
    left: 16px;
  }

  .reader-nav--next {
    right: 16px;
  }

  /* 右綴じでは「前へ」を右、「次へ」を左に置く(タップ位置と揃える) */
  .reader[data-direction="rtl"] .reader-nav--prev {
    left: auto;
    right: 16px;
  }

  .reader[data-direction="rtl"] .reader-nav--next {
    left: 16px;
    right: auto;
  }

  /* 位置だけでなく矢印の向きも読み進める向きに合わせる(右綴じは左へ進む)。
     左端の「次へ」は左向き、右端の「前へ」は右向きになる(左綴じは従来のまま) */
  .reader[data-direction="rtl"] .reader-nav--prev svg,
  .reader[data-direction="rtl"] .reader-nav--next svg {
    transform: scaleX(-1);
  }

  .reader-hint__text--touch {
    display: none;
  }

  .reader-hint__text--desktop {
    display: inline;
  }
}

/* 6: タッチ操作の端末では押せる範囲を大きくする */
@media (pointer: coarse) {
  .btn {
    min-height: 48px;
  }

  .icon-btn {
    width: 48px;
    height: 48px;
  }

  .segmented__item {
    min-height: 48px;
  }

  .chip {
    min-height: 40px;
  }

  .reader-control {
    min-height: 40px;
  }
}

/* 2: 文字を大きくしても崩れないようにする(固定の高さで切らない) */
.card__title,
.card__meta,
.reader-name,
.result-bar__title {
  overflow-wrap: anywhere;
}

/* 4: 高コントラストの設定に合わせて輪郭と文字を強くする */
@media (prefers-contrast: more) {
  .chip,
  .segmented,
  .search-bar,
  .card,
  .read-hero,
  .ad-slot,
  .finished__panel {
    border: 2px solid var(--md-on-surface);
  }

  .card__meta,
  .result-count,
  .pager-status,
  .empty,
  .site-footer,
  .reader-hint__text,
  .reader-counter,
  .finished__text,
  .ad-slot__label,
  .ad-slot__body,
  .error-page__hint {
    color: var(--md-on-surface);
  }
}

/* 4: Windows のハイコントラストモードでも区別できるようにする */
@media (forced-colors: active) {
  .btn,
  .chip,
  .segmented,
  .search-bar,
  .card,
  .read-hero__cover,
  .dialog,
  .ad-slot,
  .finished__panel {
    border: 1px solid CanvasText;
  }

  .btn--filled,
  .read-hero__cta,
  .chip--selected,
  .segmented__item:has(input:checked) {
    background: Highlight;
    color: HighlightText;
  }

  .card:hover {
    box-shadow: none;
  }

  /* 読み込み中の演出は、強制色モードでは装飾を落として輪と文言だけにする */
  .loading,
  .loading--reader {
    background: Canvas;
    color: CanvasText;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .loading__art,
  .loading__aura,
  .loading__veil,
  .loading__inner::before,
  .read-hero__cta::after {
    display: none;
  }

  .loading__brand,
  .loading__title,
  .loading__lead {
    color: CanvasText;
    text-shadow: none;
  }

  .spinner {
    border-color: CanvasText;
    border-top-color: Highlight;
    border-right-color: Highlight;
    box-shadow: none;
  }

  .loading__spark {
    background: Highlight;
    box-shadow: none;
  }

  .loading__progress {
    background: Canvas;
    border: 1px solid CanvasText;
  }

  .loading__progress > span {
    background: Highlight;
  }
}

/* 7: 小さい画面でも余白と大きさを確保する */
@media (max-width: 480px) {
  .container {
    padding: 16px 12px 32px;
  }

  .cards {
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 12px;
  }

  /* 表紙は画面幅に合わせて広げる(押しやすさを優先する) */
  .read-hero {
    padding: 16px 12px;
  }

  .app-bar__title {
    font-size: 1.125rem;
    line-height: 1.5rem;
  }

  .app-bar__roman {
    font-size: 0.5625rem;
    letter-spacing: 0.14em;
  }

  .finished {
    padding: 8px;
    padding-left: max(8px, env(safe-area-inset-left));
    padding-right: max(8px, env(safe-area-inset-right));
    padding-bottom: max(8px, env(safe-area-inset-bottom));
  }

  .finished__panel {
    padding: 20px 16px;
  }

  .finished__actions .btn {
    flex: 1 1 auto;
  }

  .error-page__code {
    font-size: 3rem;
  }
}

/* ------------------------------------------------------------------
   管理画面(設計書 §5.5)
   ------------------------------------------------------------------ */

.admin-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  max-width: 1100px;
  margin: 0 auto;
  padding: 8px 16px;
  border-bottom: 1px solid var(--md-outline-variant);
}

.admin-heading {
  margin: 32px 0 12px;
  font-size: 1.125rem;
  line-height: 1.5rem;
  font-weight: 500;
}

.admin-stats {
  list-style: none;
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  margin: 0 0 16px;
  padding: 0;
}

.admin-stats li {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 16px;
  border-radius: var(--md-shape-md);
  background: var(--md-surface-container);
}

.admin-stat__value {
  font-size: 1.5rem;
  line-height: 2rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.admin-stat__label {
  color: var(--md-on-surface-variant);
  font-size: 0.75rem;
  line-height: 1rem;
}

.admin-warning,
.admin-error,
.admin-ok {
  margin: 0 0 16px;
  padding: 12px 16px;
  border-radius: var(--md-shape-sm);
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.admin-warning {
  background: var(--md-tertiary-container);
  color: var(--md-on-tertiary-container);
}

.admin-error {
  background: var(--md-error-container);
  color: var(--md-on-error-container);
}

.admin-ok {
  background: var(--md-secondary-container);
  color: var(--md-on-secondary-container);
}

.admin-note {
  color: var(--md-on-surface-variant);
  font-size: 0.75rem;
  line-height: 1.5;
}

.admin-form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
  margin-bottom: 24px;
}

.admin-form--stack {
  flex-direction: column;
  align-items: stretch;
  max-width: 720px;
}

.admin-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  padding: 0;
  border: none;
}

.admin-field__label {
  color: var(--md-on-surface-variant);
  font-size: 0.75rem;
  line-height: 1rem;
}

.admin-input {
  min-height: 48px;
  padding: 12px 16px;
  border: 1px solid var(--md-outline);
  border-radius: var(--md-shape-sm);
  background: var(--md-surface-container-lowest);
  color: var(--md-on-surface);
  font: inherit;
  font-size: 1rem;
}

textarea.admin-input {
  min-height: 96px;
  resize: vertical;
}

.admin-input--num {
  width: 8rem;
  min-height: 40px;
  padding: 8px 12px;
}

.admin-radio {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  font-size: 0.875rem;
}

.admin-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.admin-inline {
  display: inline;
}

.admin-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--md-outline-variant);
  border-radius: var(--md-shape-md);
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.admin-table th,
.admin-table td {
  padding: 12px;
  text-align: left;
  white-space: nowrap;
  border-bottom: 1px solid var(--md-outline-variant);
}

.admin-table th {
  background: var(--md-surface-container);
  color: var(--md-on-surface-variant);
  font-weight: 500;
}

.admin-table tr:last-child td {
  border-bottom: none;
}

.admin-table td:nth-child(2) {
  max-width: 32ch;
  white-space: normal;
  overflow-wrap: anywhere;
}

.admin-tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--md-shape-sm);
  background: var(--md-surface-variant);
  color: var(--md-on-surface-variant);
  font-size: 0.75rem;
}

.admin-tag--ok {
  background: var(--md-primary-container);
  color: var(--md-on-primary-container);
}

/* 管理画面のログイン(設計書 §5.5)。年齢確認のダイアログとは別に、管理画面の見た目に揃える */

.admin-login-body {
  display: grid;
  place-items: center;
  min-height: 100dvh;
  padding: 24px 16px;
  background: var(--md-surface-container);
}

.admin-login {
  width: min(100%, 420px);
}

.admin-login__card {
  padding: 24px;
  border: 1px solid var(--md-outline-variant);
  border-radius: var(--md-shape-xl);
  background: var(--md-surface-container-lowest);
  box-shadow: var(--md-elevation-1);
}

.admin-login__brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
  color: var(--md-on-surface-variant);
  font-size: 0.875rem;
  text-decoration: none;
}

.admin-login__title {
  margin: 0 0 16px;
  font-size: 1.375rem;
  line-height: 1.75rem;
  font-weight: 500;
}

.admin-login__form {
  display: grid;
  gap: 16px;
}

.admin-login__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.admin-login__card .admin-note {
  margin: 16px 0 0;
}

@media (max-width: 480px) {
  .admin-login__actions .btn {
    flex: 1 1 auto;
  }
}

/* 取り込みの流れ(元サイト → R2 → サイト) */

.admin-flow {
  display: grid;
  gap: 28px;
  margin: 0 0 24px;
  padding: 0;
  list-style: none;
}

.admin-flow__step {
  position: relative;
  padding: 16px;
  border: 1px solid var(--md-outline-variant);
  border-radius: var(--md-shape-md);
  background: var(--md-surface-container-low);
}

.admin-flow__step:not(:last-child)::after {
  content: "↓";
  position: absolute;
  left: 50%;
  bottom: -24px;
  transform: translateX(-50%);
  color: var(--md-primary);
  font-size: 1.125rem;
  line-height: 1;
}

.admin-flow__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 4px;
}

.admin-flow__label {
  font-weight: 500;
}

.admin-flow__value {
  color: var(--md-primary);
  font-size: 1.25rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.admin-flow__form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 8px;
}

.admin-flow__form .admin-details {
  flex: 1 1 240px;
  margin: 0;
}

/* 使い方(番号付きの手順) */

.admin-steps {
  display: grid;
  gap: 12px;
  margin: 0 0 16px;
  padding-left: 1.25rem;
  font-size: 0.875rem;
  line-height: 1.6;
}

.admin-steps li::marker {
  color: var(--md-primary);
  font-weight: 500;
}

.admin-steps strong {
  display: block;
  margin-bottom: 2px;
  font-size: 1rem;
}

/* 詳しい設定(たたんでおく) */

.admin-details {
  margin: 8px 0;
  font-size: 0.8125rem;
}

.admin-details > summary {
  cursor: pointer;
  color: var(--md-primary);
}

.admin-details[open] {
  display: grid;
  gap: 8px;
}

.admin-card__badge {
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: var(--md-shape-sm);
  background: var(--md-primary-container);
  color: var(--md-on-primary-container);
  font-size: 0.6875rem;
  font-weight: 500;
  vertical-align: middle;
}

/* 取り込みの自動化(設計書 §5.5) */

.admin-cards {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  margin-bottom: 24px;
}

.admin-card {
  margin: 0;
  padding: 16px;
  border: 1px solid var(--md-outline-variant);
  border-radius: var(--md-shape-md);
  background: var(--md-surface-container-low);
}

.admin-card__title {
  margin: 0 0 8px;
  font-size: 0.9375rem;
  line-height: 1.5rem;
  font-weight: 500;
}

.admin-task {
  margin: 0 0 16px;
  padding: 16px;
  border: 1px solid var(--md-outline-variant);
  border-radius: var(--md-shape-md);
  background: var(--md-surface-container-low);
}

.admin-task[hidden] {
  display: none;
}

.admin-progress {
  height: 8px;
  margin: 8px 0;
  border-radius: 4px;
  background: var(--md-surface-variant);
  overflow: hidden;
}

.admin-progress__bar {
  width: 0;
  height: 100%;
  border-radius: 4px;
  background: var(--md-primary);
  transition: width 0.4s ease;
}

.admin-log {
  max-height: 200px;
  margin: 8px 0 12px;
  padding: 8px 12px;
  overflow-y: auto;
  border-radius: var(--md-shape-sm);
  background: var(--md-surface-container);
  color: var(--md-on-surface-variant);
  font-size: 0.75rem;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

@media (prefers-reduced-motion: reduce) {
  .admin-progress__bar {
    transition: none;
  }
}

/* 購入ボタン(CPS。ads.md §3.2)。広告枠(.ad-slot)とは別コンポーネントにする */
.purchase {
  margin: 0 0 24px;
  padding: 16px;
  border: 1px solid var(--md-outline-variant);
  border-radius: var(--md-shape-md);
  background: var(--md-surface-container);
}

.purchase__note {
  margin: 0 0 12px;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--md-on-surface-variant);
}

.purchase__list {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.purchase__price {
  font-weight: 400;
  opacity: 0.9;
}

/* ストアのカタログ(紹介サイト型。referral-site.md §5) */
.shop__note {
  margin: 0 0 12px;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--md-on-surface-variant);
}

.shop__count {
  margin: 0 0 16px;
  color: var(--md-on-surface-variant);
}

.shop__cover {
  max-width: 100%;
  height: auto;
  border-radius: var(--md-shape-md);
}


/* 縦読み(スクロール)。横読みと同じ位置に重ね、ページを縦に並べる(見開き・送りは使わない) */
.reader-vertical {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  overflow-x: hidden;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  background: var(--md-surface-container-lowest);
  /* 上下のバーに最初のページ・最後のページが隠れないようにする */
  padding: 56px 0 72px;
}

.reader-vertical img {
  display: block;
  width: 100%;
  max-width: 900px;
  height: auto;
  margin: 0 auto;
  /* 読み込み前でもページの高さを確保し、再開位置がずれにくいようにする */
  aspect-ratio: auto 1280 / 1836;
  background: var(--md-surface-container);
}

/* 作品詳細の中央枠(読む入口の下)と購入ボタンの間隔。
   第三者広告と購入ボタンが近接して誤クリックにつながらないようにする(ads.md §4.1) */
.read-hero + .ad-slot {
  margin-bottom: 32px;
}

/* ビューア本文中の広告(縦読みの 1 ページ目の後と 10 ページごと。ads.md §4.1)。
   ページ画像の幅に合わせ、広告が入らなかった枠は .ad-slot--empty で畳まれる */
.reader-ad {
  display: flex;
  justify-content: center;
  padding: 16px 12px;
}

/* 幅 320px の端末でも 300px のバナーがはみ出さないようにする */
.reader-ad .ad-slot {
  margin: 0;
  width: 100%;
  max-width: 336px;
}

/* 横読みのときは縦読みのページを出さない */
.reader[data-layout="horizontal"] .reader-vertical {
  display: none;
}

/* 縦読みのときはページ送りボタンと見開き切り替えを出さない */
.reader[data-layout="vertical"] .reader-pages,
.reader[data-layout="vertical"] .reader-nav,
.reader[data-layout="vertical"] #spread {
  display: none;
}

/* PC ではバーが画像に重ならない(グリッドの中に収まる)ので、余白は付けない */
@media (min-width: 900px) {
  .reader-vertical {
    padding: 0;
  }
}

/* 出所バッジ */
.source-badge {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 0 8px;
  border-radius: var(--md-shape-full);
  background: var(--md-tertiary-container);
  color: var(--md-on-tertiary-container);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* 作品情報の表(外部作品の詳細) */
.meta-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px 24px;
  margin: 16px 0;
  padding: 16px;
  border-radius: var(--md-shape-md);
  background: var(--md-surface-container-low);
}

.meta-list div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.meta-list dt {
  color: var(--md-on-surface-variant);
  font-size: 0.75rem;
}

.meta-list dd {
  margin: 0;
  font-size: 0.875rem;
}