/* Reader pages */
.l-reader {
  --reader-paper: rgba(255, 255, 255, 0.92);
  --reader-line: rgba(14, 61, 46, 0.10);
  --reader-line-soft: rgba(14, 61, 46, 0.08);
  --reader-shadow: 0 8px 22px rgba(14, 61, 46, 0.035);
  --reader-shadow-hover: 0 14px 30px rgba(14, 61, 46, 0.08);
}

.p-reader-intro {
  text-align: center;
  padding-bottom: 8px;
}

.p-reader-intro__kicker,
.p-reader-section__kicker {
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(14, 61, 46, 0.54);
  margin-bottom: 12px;
}

.p-reader-intro__title {
  font-family: 'Noto Serif JP', serif;
  line-height: 1.76;
  font-weight: 300;
  letter-spacing: 0.02em;
  color: #31322e;
}

.p-reader-intro__en {
  margin-top: 8px;
  font-family: var(--font-family-serif);
  font-size: clamp(14px, 1.6vw, 19px);
  line-height: 1.5;
  letter-spacing: 0.16em;
  color: rgba(14, 61, 46, 0.70);
  font-style: italic;
}

.p-reader-intro__lead {
  margin: 18px auto 0;
  max-width: 700px;
  color: #5f5e58;
  font-size: 14px;
  line-height: 2.05;
}

.p-reader-section {
  margin-top: 30px;
}

.p-reader-section__head {
  align-items: flex-end;
  gap: 16px;
  margin-bottom: 18px;
}

.p-reader-section__title {
  font-family: 'Noto Serif JP', serif;
  line-height: 1.78;
  font-weight: 300;
  letter-spacing: 0.03em;
  color: #364039;
}

.p-reader-section .c-back-link {
  margin: 0;
}

.p-reader-section .c-back-link a,
.p-reader-single__back .c-back-link a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 2px;
  border-bottom: 1px solid rgba(14, 61, 46, 0.22);
  color: var(--color-primary);
  font-size: 12px;
  letter-spacing: 0.10em;
}

.p-reader-slider {
  margin-top: 8px;
}

.p-reader-slider__viewport {
  overflow: hidden;
  border-radius: 22px;
}

.p-reader-slider__track {
  display: flex;
  gap: 12px;
  width: max-content;
  padding-bottom: 4px;
  animation: orn-reader-scroll 30s linear infinite;
  /* 同クラス是正（§22・scene.cssの探すページマーケーと同根）：SP実機での始動直後リペイントちらつき予防。 */
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* 2026-08-06 §5仕組み化：探すページのシーンスライダーで発見したタッチ端末:hover固着バグ（タップ後アニメーション永久停止）と同根。
   このスライダーは未報告だが同一パターンのため予防的に同じ修正を適用（hover機能を持つ入力装置に限定）。 */
@media (hover: hover) {
  .p-reader-slider__track:hover {
    animation-play-state: paused;
  }
}

.p-reader-slider__item {
  width: 148px;
  flex: 0 0 148px;
}

.p-reader-slider__thumb {
  display: block;
  aspect-ratio: 1 / 1;
  border-radius: 18px;
  overflow: hidden;
  background: #d7ddd8;
  border: 1px solid rgba(14, 61, 46, 0.08);
  box-shadow: 0 10px 24px rgba(27, 44, 36, 0.04);
}

.p-reader-slider__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.p-reader-slider__thumb-empty {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #dfe8df, #f0eee6);
}

.p-reader-slider__text {
  display: block;
  margin-top: 8px;
  font-size: 11px;
  line-height: 1.65;
  color: #5b5a54;
  text-align: center;
}

@keyframes orn-reader-scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(calc(-50% - 6px)); }
}

/* SAM様指摘（SP角丸ボックスの余白なし）是正：`.wp-block-post-template` は [orn_reader_list] の実出力に
   存在しないクラスのためこのグリッド指定が一度もマッチせず、カードがdisplay:block/gap:normalで隙間なく
   積み重なっていた（PC/SP共通・§22同クラス是正でscene.cssにも同一パターンあり是正済み）。
   このファイル（reader.css）はscene.cssより後に読み込まれ実際にカスケードで勝つ側のためここが本体修正。 */
.p-reader-picks,
.p-reader-archive__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  list-style: none;
  padding: 0;
}

.p-reader-archive__grid > li {
  margin-block-start: 0 !important;
}

.c-reader-card {
  height: 100%;
  background: var(--reader-paper);
  border: 1px solid var(--reader-line);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: var(--reader-shadow);
  transition: transform .22s ease, box-shadow .22s ease, background .22s ease;
  display: flex;
  flex-direction: column;
}

.c-reader-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--reader-shadow-hover);
  background: var(--color-bg);
}

.c-reader-card__image {
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--color-bg-sand);
}

.c-reader-card__image img,
.c-reader-card__thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}

.c-reader-card:hover .c-reader-card__image img,
.c-reader-card:hover .c-reader-card__thumb {
  transform: scale(1.03);
}

.c-reader-card__image-empty {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #dfe8df, #f0eee6);
}

.c-reader-card__body {
  padding: 14px 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 188px;
  flex: 1;
}

.c-reader-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.c-reader-card__tags .wp-block-post-terms {
  display: contents;
}

.c-tag,
.c-reader-card__tags a {
  display: inline-flex;
  align-items: center;
  padding: 5px 8px;
  border-radius: 999px;
  background: var(--color-tag-bg);
  color: rgba(14, 61, 46, 0.74);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.c-reader-card__tags .wp-block-post-terms__separator {
  display: none;
}

.c-reader-card__title {
  position: relative;
  margin: 0;
  min-height: 3.35em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-family: 'Noto Serif JP', serif;
  font-size: 14px;
  line-height: 1.68;
  font-weight: 300;
  letter-spacing: 0.02em;
  color: #31322e;
  text-align: left; /* No.48後半: reader-top一覧のカードタイトル左寄せ */
}

.c-reader-card__copy {
  margin: 0;
  flex: 1;
  min-height: 5.9em;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 11.5px;
  line-height: 1.82;
  color: #64635d;
}

.c-reader-card__read {
  margin-top: auto;
  padding-top: 2px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--color-primary);
  font-size: 11px;
  letter-spacing: 0.10em;
}

.c-reader-card__read::after {
  content: '→';
}

/* 2026-08-06 加藤さん指示：絞込エリアの縦間延びを詰める。
   旧`.p-reader-filter{margin:0 0 18px}`はscene.css側の本体スタイル（padding/背景/border持ち）と二重定義で
   紛らわしいため撤去＝scene.css側1箇所に一本化（余白値もそちらで縮小）。 */

.p-reader-filter__chips {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start; /* SAM様指摘：チップが59.5pxに巨大化していたのはalign-items:normal(=stretch)で行内最長チップに引き伸ばされていたため。今朝から同根4件目のstretchバグ。 */
  gap: 8px;
  margin-bottom: 10px;
}

.p-reader-filter__chip-group {
  display: contents;
}

.c-chip {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(14, 61, 46, 0.10);
  background: rgba(255, 255, 255, 0.86);
  color: #56615a;
  font-size: 10px;
  letter-spacing: 0.10em;
  transition: transform .2s ease, border-color .2s ease, background .2s ease, color .2s ease;
}

.c-chip:hover,
.c-chip.is-active {
  transform: translateY(-1px);
  border-color: rgba(14, 61, 46, 0.18);
  background: rgba(14, 61, 46, 0.05);
  color: var(--color-primary);
}

.p-reader-filter__form {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: end;
}

.p-reader-filter__field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.p-reader-filter__label {
  font-size: 10px;
  letter-spacing: 0.14em;
  color: rgba(14, 61, 46, 0.54);
}

.p-reader-filter select,
.p-reader-filter input[type="search"] {
  min-height: 42px;
  padding: 0 14px;
  border: 1px solid rgba(14, 61, 46, 0.10);
  background: rgba(255, 255, 255, 0.88);
  border-radius: 12px;
  color: #31322e;
  font-size: 13px;
}

.p-reader-filter__field--search {
  flex: 1 1 260px;
}

.p-reader-filter__field--search input {
  width: 100%;
}

.p-reader-filter__submit,
.p-reader-single__facility .c-button {
  min-height: 42px;
  padding: 0 18px;
  border: 1px solid rgba(14, 61, 46, 0.12);
  border-radius: 999px;
  background: linear-gradient(180deg, var(--color-mint-top) 0%, var(--color-mint-bottom) 100%);
  color: var(--color-primary);
  font-size: 11px;
  letter-spacing: 0.12em;
  cursor: pointer;
}

.p-reader-archive__grid .c-pager {
  margin-top: 24px;
  justify-content: center;
  gap: 8px;
}

.p-reader-archive__grid .c-pager a,
.p-reader-archive__grid .c-pager span {
  min-width: 38px;
  min-height: 38px;
  border-radius: 999px;
  background: #fff;
}

.p-reader-archive__grid .c-pager .is-current {
  background: #edf7f1;
  border-color: rgba(93, 202, 165, 0.45);
  color: var(--color-primary);
}

.p-reader-archive__grid .wp-block-query-no-results {
  padding: 38px 18px;
  border: 1px dashed rgba(14, 61, 46, 0.12);
  border-radius: 18px;
  text-align: center;
  color: #6b6b67;
  font-size: 13px;
  line-height: 1.9;
  background: rgba(255, 255, 255, 0.50);
}

.c-prompt-box {
  margin-top: 34px;
  padding: 26px 28px 28px;
  background: var(--reader-paper);
  border: 1px solid var(--reader-line);
  border-radius: 22px;
  box-shadow: var(--reader-shadow);
}

.c-prompt-box__title {
  font-family: 'Noto Serif JP', serif;
  line-height: 1.78;
  font-weight: 300;
  letter-spacing: 0.03em;
  color: #364039;
}

.c-prompt-box__copy {
  margin-top: 12px;
  font-size: 13px;
  line-height: 2;
  color: #5f5e58;
}

.c-prompt-box__note {
  margin-top: 10px;
  font-size: 11px;
  line-height: 1.85;
  color: #7a7872;
}

.c-prompt-box .wp-block-buttons {
  margin-top: 18px;
  gap: 10px;
}

.c-prompt-box .wp-block-button__link {
  min-height: 40px;
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px solid rgba(14, 61, 46, 0.12);
  background: linear-gradient(180deg, var(--color-mint-top) 0%, var(--color-mint-bottom) 100%);
  color: var(--color-primary);
  font-size: 11px;
  letter-spacing: 0.12em;
}

.c-prompt-box .is-style-outline .wp-block-button__link {
  background: rgba(255, 255, 255, 0.86);
  color: #56615a;
}

.p-reader-single {
  max-width: 760px;
  margin-inline: auto; /* No.48: ブロック自体を中央寄せ（H1のtext-align:leftは維持＝文字だけ左） */
}

.p-reader-single__title-box {
  position: relative;
  padding: 10px 8px 8px;
  margin: 4px 0 2px;
}

.p-reader-single__title {
  font-family: 'Noto Serif JP', serif;
  line-height: 1.7;
  font-weight: 300;
  color: #31322e;
  text-align: left; /* No.48(訂正版): 記事内タイトルを左揃え（旧center・ブロック自体の中央配置=constrained layoutは維持） */
  padding: 0 34px;
}

.p-reader-single__softline {
  height: 10px;
  margin: 0 24px;
  border-bottom: 1px solid rgba(191, 168, 173, 0.72);
}

.p-reader-single__meta {
  justify-content: center;
  gap: 8px;
  margin-top: 14px;
}

.p-reader-single__hero {
  margin: 18px 0 24px;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: var(--reader-shadow);
}

.p-reader-single__hero img {
  width: 100%;
  height: auto;
  object-fit: unset;
}

.p-reader-single .wp-block-post-content {
  font-size: 16px;
  line-height: 2.05;
  color: #4d4c47;
}

.p-reader-single__note {
  margin-top: 18px;
  padding: 14px 16px;
  border-radius: 16px;
  background: rgba(14, 61, 46, 0.04);
  color: #5a5a54;
  font-size: 16px; /* No.52 「編集部より」メタ本文を16pxに（旧12px）。ラベルは .p-reader-single__note-label で別指定 */
  line-height: 1.9;
}

.p-reader-single__note-label {
  display: block;
  margin-bottom: 6px;
  color: rgba(14, 61, 46, 0.68);
  font-size: 16px; /* No.52 「編集部より」ラベル自体も既定16pxに（旧10px） */
  letter-spacing: 0.14em;
}

.p-reader-single__facility {
  margin-top: 18px;
}

.p-reader-single__back {
  margin-top: 36px;
  padding-top: 22px;
  border-top: 1px solid var(--reader-line-soft);
}

@media (prefers-reduced-motion: reduce) {
  .p-reader-slider__viewport {
    overflow-x: auto;
  }

  .p-reader-slider__track {
    animation: none;
  }
}

@media (max-width: 1100px) {
  .p-reader-picks,
  .p-reader-archive__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .p-reader-picks,
  .p-reader-archive__grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .p-reader-slider__item {
    width: 118px;
    flex-basis: 118px;
  }

  .p-reader-filter__form {
    align-items: stretch;
    align-content: flex-start; /* SAM様指摘（SP絞込エリアの間延び）是正：複数行flexのalign-content既定(stretch)が
      各フィールド行を等分に引き伸ばし、フィールド間に巨大な空白を作っていた（実測169.84px/フィールド→修正後で正常化確認）。 */
  }

  .p-reader-filter__field,
  .p-reader-filter__submit {
    width: 100%;
  }

  .p-reader-single__title {
    padding: 0;
  }
}