/* 静的ページ（/uriba/・/yomimono/）の見た目。scripts/build_pages.py が生成するHTML用。
   3Dの世界観（昭和の百貨店: クリーム・生成り地、赤・金・墨の差し色、明朝／角ゴシック）に揃える。
   色の値は style.css と同じ。3D用の style.css は読み込まない（固定配置の前提が違うため） */
:root {
  --ink: #1f1a15;
  --ink-soft: #3a2f24;
  --cream: #f4ecd9;
  --kinari: #fbf6ea;
  --red: #b03a2e;
  --red-deep: #8e2b22;
  --gold: #c9a227;
  --gold-soft: #e0bf5a;
  --text: #2a2218;
  --muted: #6f604a;
  --line: #d8cca8;
  --mincho: "Zen Old Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --gothic: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background-color: var(--cream);
  /* 生成りの紙のような細い横縞（画像を使わない） */
  background-image: repeating-linear-gradient(0deg, rgba(120, 96, 60, 0.035) 0 1px, transparent 1px 4px);
  color: var(--text);
  font-family: var(--gothic);
  line-height: 1.85;
  overflow-x: hidden;
}
a { color: var(--red-deep); text-underline-offset: 3px; }
a:hover { color: var(--red); }
h1, h2, h3 { font-family: var(--mincho); font-weight: 900; line-height: 1.4; color: var(--ink); }
img { max-width: 100%; }

/* --- 開示文言・PR（ページの最上部。スクロールせずに見える） --- */
.pr-bar {
  position: sticky; /* スクロールしても開示文言とPRが見えたままにする */
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 16px;
  background: var(--ink);
  color: var(--kinari);
  font-size: 0.76rem;
  line-height: 1.5;
  border-bottom: 3px solid var(--red);
}
.pr-badge {
  flex: 0 0 auto;
  background: var(--gold);
  color: var(--ink);
  font-weight: 700;
  font-size: 0.72rem;
  padding: 1px 7px;
  border-radius: 2px;
  letter-spacing: 0.08em;
}

/* --- 看板（店名）とフロア案内 --- */
.masthead {
  background: var(--kinari);
  border-bottom: 1px solid var(--line);
}
.masthead-inner {
  max-width: 1040px;
  margin: 0 auto;
  padding: 16px 16px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.store-name {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mincho);
  font-weight: 900;
  font-size: 1.55rem;
  letter-spacing: 0.12em;
  color: var(--ink);
  text-decoration: none;
}
.store-mark {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--red);
  color: var(--kinari);
  font-size: 1.2rem;
  letter-spacing: 0;
  box-shadow: 0 0 0 2px var(--kinari), 0 0 0 4px var(--gold);
}
.walk-top {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--ink);
  text-decoration: none;
  border: 1.5px solid var(--ink);
  padding: 5px 14px;
  border-radius: 999px;
  background: #fff8e8;
}
.walk-top:hover { background: var(--ink); color: var(--gold-soft); }

.floor-nav {
  background: var(--ink);
  color: var(--kinari);
  border-top: 3px solid var(--gold);
}
.floor-row {
  max-width: 1040px;
  margin: 0 auto;
  padding: 6px 16px;
  display: flex;
  align-items: baseline;
  gap: 12px;
  border-bottom: 1px solid rgba(224, 191, 90, 0.25);
}
.floor-row:last-child { border-bottom: none; }
.floor-tag {
  flex: 0 0 4.6em;
  font-family: var(--mincho);
  font-weight: 700;
  color: var(--gold-soft);
  font-size: 0.86rem;
  letter-spacing: 0.1em;
}
.floor-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 2px 16px;
  font-size: 0.86rem;
}
.floor-nav a { color: var(--kinari); text-decoration: none; }
.floor-nav a:hover, .floor-nav a[aria-current] { color: var(--gold-soft); text-decoration: underline; }

/* --- 本文 --- */
.page {
  max-width: 1040px;
  margin: 0 auto;
  padding: 10px 16px 48px;
}
.crumbs ol {
  list-style: none;
  margin: 8px 0 18px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  font-size: 0.78rem;
  color: var(--muted);
}
.crumbs li + li::before { content: "›"; margin: 0 6px 0 2px; color: var(--gold); }
.crumbs a { color: var(--muted); }

.eyebrow {
  display: inline-block;
  margin: 0;
  padding: 2px 12px;
  background: var(--red);
  color: var(--kinari);
  font-family: var(--mincho);
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.2em;
}
.uriba h1, .yomimono h1, .yomimono-index h1 {
  font-size: clamp(1.7rem, 4.4vw, 2.5rem);
  margin: 10px 0 14px;
  letter-spacing: 0.06em;
  padding-bottom: 10px;
  border-bottom: 3px double var(--gold);
}
.lead, .prose { max-width: 42em; font-size: 1rem; }
.lead p, .prose p { margin: 0 0 1em; }
.prose h2 { font-size: 1.35rem; margin: 1.8em 0 0.6em; padding-left: 10px; border-left: 5px solid var(--red); }
.prose h3 { font-size: 1.1rem; margin: 1.4em 0 0.4em; }
.dates { font-size: 0.8rem; color: var(--muted); margin: -4px 0 18px; }

.walk { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 22px 0 8px; }
.btn-walk {
  display: inline-block;
  background: var(--red);
  color: var(--kinari);
  font-family: var(--mincho);
  font-weight: 700;
  font-size: 1.02rem;
  letter-spacing: 0.08em;
  padding: 10px 22px;
  text-decoration: none;
  border: 2px solid var(--gold);
  box-shadow: 0 0 0 3px var(--red), 0 3px 0 3px var(--red-deep);
  border-radius: 2px;
}
.btn-walk:hover { color: #fff; background: var(--red-deep); }
.walk-note { font-size: 0.78rem; color: var(--muted); }
.price-note { font-size: 0.8rem; color: var(--muted); margin: 10px 0 0; }

/* --- 商品のカード --- */
.shelf { margin-top: 30px; }
.shelf h2 {
  font-size: 1.25rem;
  margin: 0 0 12px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.shelf h2::before {
  content: "";
  width: 14px;
  height: 14px;
  background: var(--gold);
  transform: rotate(45deg);
  flex: 0 0 auto;
}
.cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}
.card {
  background: var(--kinari);
  border: 1px solid var(--line);
  border-top: 4px solid var(--red);
  display: flex;
  flex-direction: column;
}
.card-photo {
  margin: 0;
  padding: 12px 12px 6px;
  background: #fff;
  border-bottom: 1px solid var(--line);
}
.card-photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain; /* 切り抜かない（縦横比を保った縮小のみ） */
}
.card-photo figcaption { font-size: 0.66rem; color: var(--muted); text-align: right; margin-top: 4px; }
.card-photo-none {
  display: grid;
  place-items: center;
  aspect-ratio: 1 / 1;
  font-size: 0.8rem;
  color: var(--muted);
}
.card-body { padding: 10px 14px 14px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.card-name { font-size: 1.02rem; margin: 0; }
.card-rec {
  display: inline-block;
  font-family: var(--gothic);
  font-size: 0.66rem;
  font-weight: 700;
  color: var(--red-deep);
  border: 1px solid var(--red);
  padding: 0 5px;
  margin-right: 6px;
  vertical-align: 2px;
}
.card-note { font-size: 0.84rem; margin: 0; flex: 1; line-height: 1.7; }
.btn-amazon {
  align-self: flex-start;
  display: inline-block;
  margin-top: 4px;
  background: var(--ink);
  color: var(--gold-soft);
  font-weight: 700;
  font-size: 0.86rem;
  padding: 6px 14px;
  text-decoration: none;
  border-radius: 2px;
}
.btn-amazon:hover { color: #fff; }
.btn-amazon.is-soon { background: #ddd3bb; color: var(--muted); }

/* --- 関連・ほかの売り場・出典 --- */
.related, .others, .sources { margin-top: 36px; }
.related h2, .others h2, .sources h2 { font-size: 1.1rem; margin: 0 0 8px; }
.others ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 6px 16px;
}
.others li { border-bottom: 1px dotted var(--line); padding: 4px 0; }
.sources ul { margin: 0; padding-left: 1.2em; font-size: 0.8rem; color: var(--muted); }

.yomi-list { list-style: none; margin: 0; padding: 0; }
.yomi-item a {
  display: block;
  padding: 14px 4px;
  border-bottom: 1px dotted var(--line);
  text-decoration: none;
  color: var(--text);
}
.yomi-title { display: block; font-family: var(--mincho); font-weight: 700; font-size: 1.1rem; color: var(--ink); }
.yomi-desc { display: block; font-size: 0.85rem; color: var(--muted); }
.empty { color: var(--muted); }

/* --- フッター --- */
.site-foot {
  background: var(--ink);
  color: #d9ceb4;
  font-size: 0.78rem;
  padding: 26px 16px 34px;
  border-top: 4px solid var(--red);
  text-align: center;
}
.site-foot p { max-width: 720px; margin: 0 auto 8px; }
.foot-store { font-family: var(--mincho); font-weight: 900; font-size: 1.1rem; color: var(--gold-soft); letter-spacing: 0.2em; }
.foot-links { display: flex; justify-content: center; gap: 18px; margin-top: 12px !important; }
.site-foot a { color: var(--kinari); }

@media (max-width: 560px) {
  .pr-bar { font-size: 0.7rem; padding: 6px 12px; }
  .store-name { font-size: 1.25rem; }
  .store-mark { width: 32px; height: 32px; font-size: 1rem; }
  .floor-row { gap: 10px; padding: 5px 16px; }
  .floor-tag { flex: 0 0 3.8em; font-size: 0.8rem; letter-spacing: 0.04em; }
  .floor-nav ul { gap: 0 12px; font-size: 0.82rem; }
  /* スマホでは写真を左、文字を右に並べる */
  .cards { grid-template-columns: 1fr; gap: 12px; }
  .card { flex-direction: row; border-top-width: 1px; border-left: 4px solid var(--red); }
  .card-photo { flex: 0 0 116px; padding: 8px 8px 4px; border-bottom: none; border-right: 1px solid var(--line); }
  .card-body { padding: 8px 12px 12px; }
  .card-name { font-size: 0.95rem; }
}

/* 表（読みものの一覧表・早見表）。スマホでは横にスクロールさせ、ページ全体は横に広げない */
.table-wrap { overflow-x: auto; margin: 1.2em 0; -webkit-overflow-scrolling: touch; }
.table-wrap table { border-collapse: collapse; width: 100%; min-width: 28em; font-size: 0.95em; }
.table-wrap th, .table-wrap td { border: 1px solid rgba(90, 60, 30, 0.25); padding: 0.5em 0.7em; text-align: left; vertical-align: top; }
.table-wrap thead th { background: #2b2420; color: #f3e9d2; font-weight: 600; }
.table-wrap tbody tr:nth-child(even) td { background: rgba(201, 162, 39, 0.07); }
.uriba-list { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(12em, 1fr)); gap: 0.6em; }
.uriba-list a { display: block; padding: 0.8em 1em; border: 1px solid rgba(90, 60, 30, 0.25); border-radius: 6px; text-decoration: none; }