/* ============================================================
   photo/ 専用スタイル（出張フォトマップ）
   配色は /tplybook/tplybook.css の --tb-* を使う明るい配色。
   ============================================================ */

.ph-body [hidden] { display: none !important; }

.ph-body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--tb-paper-tint);
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  color: var(--tb-ink);
}
body.ph-body .site-header { flex: none; }
.ph-main { flex: 1 0 auto; padding: 20px 16px 40px; }
body.ph-body .site-footer { flex: none; margin-top: auto; }

.ph-wrap { max-width: 1100px; margin: 0 auto; }

.ph-title { margin: 0 0 6px; font-size: 1.6rem; font-weight: 700; line-height: 1.4; }
/* 地図ページの見出し。左に見出しとリード文、右に写真の総枚数のカード（見出しとリード文の2行ぶんの高さ） */
.ph-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px 16px;
  margin-bottom: 20px;
}
.ph-head .ph-title { margin: 0; }
.ph-lead { margin: 0; color: var(--tb-ink-soft); font-size: 0.95rem; }
.ph-count {
  grid-column: 2;
  grid-row: 1 / span 2;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0 20px;
  background: #fff;
  border: 1px solid var(--tb-line);
  border-radius: var(--tb-radius);
  font-size: 0.85rem;
  line-height: 1.2;
  color: var(--tb-ink-soft);
  white-space: nowrap;
}
.ph-count b {
  font-family: "JetBrains Mono", monospace;
  font-weight: 400;
  font-size: 1.9rem;
  color: var(--tb-brand);
  margin: 0 4px;
}
.ph-section { margin: 32px 0 14px; font-size: 1.15rem; font-weight: 700; }
.ph-empty { padding: 2rem 0; color: var(--tb-ink-soft); }

.ph-panel {
  background: #fff;
  border: 1px solid var(--tb-line);
  border-radius: var(--tb-radius);
  padding: 18px;
}

/* ---------- タイル地図（1カラム） ---------- */
.ph-map-panel { padding: 14px; container-type: inline-size; }
.ph-map {
  --gap: 4px;
  /* 100cqw は親パネルの内側幅（container-type はパネルに付ける） */
  --tile: calc((100cqw - 13 * var(--gap)) / 14);
  display: grid;
  grid-template-columns: repeat(14, 1fr);
  /* 広い画面では横長のタイルにして、地図が1画面に収まる高さにする。狭い画面では正方形 */
  grid-template-rows: repeat(13, max(calc(var(--tile) * 0.66), min(var(--tile), 26px)));
  grid-auto-rows: auto;
  gap: var(--gap);
}

/* スライドショー（アルバムの写真をランダムに流す）。
   地図の左上の空き＝日本列島の背中に収める。タイルに近づきすぎないよう、
   空いている 1〜10列・1〜7行のうち 1〜9列・1〜6行だけを使う（右に1列、下に1行の余白が残る） */
.ph-show {
  grid-column: 1 / span 9;
  grid-row: 1 / span 6;
  display: flex;
  align-items: stretch;
  gap: 20px;
  min-width: 0;
  padding: 4px 0 8px 4px;
  color: inherit;
  text-decoration: none;
}
.ph-show-frame {
  position: relative;
  flex: none;
  height: 100%;
  aspect-ratio: 4 / 3;
  background: var(--tb-paper-deep);
  border: 6px solid #fff;
  border-radius: 2px;
  box-shadow: 0 3px 14px rgba(0, 0, 0, 0.2);
  overflow: hidden;
}
/* 2枚を重ねて、不透明度で入れ替える。写真は切り抜かない */
.ph-show-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  transition: opacity 0.9s;
}
.ph-show-img.is-on { opacity: 1; }
/* メッセージボード。見出し（県名・撮影年月）と本文（一言）。
   高さは写真と同じで固定（写真が替わっても、一言が無くても、大きさは変わらない） */
.ph-show-board {
  flex: 0 1 290px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--tb-line);
  border-radius: var(--tb-radius);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  overflow: hidden;
}
.ph-show-meta {
  padding: 7px 14px;
  background: var(--tb-paper-deep);
  border-bottom: 1px solid var(--tb-line);
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--tb-ink-soft);
}
.ph-show-note {
  padding: 12px 14px;
  font-size: 1.05rem;
  font-weight: 500;
  line-height: 1.7;
  color: var(--tb-ink);
}
.ph-show:hover .ph-show-board { border-color: var(--tb-brand); }
/* 狭い画面では背中が小さいので、ボードは置かず、県名と一言を写真の下端に重ねる */
@container (max-width: 760px) {
  .ph-show { position: relative; width: fit-content; padding: 0 0 4px; }
  .ph-show-frame { border-width: 4px; }
  .ph-show-board {
    position: absolute;
    left: 4px;
    right: 4px;
    bottom: 8px;
    padding: 14px 6px 4px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0));
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
  .ph-show-meta { padding: 0; background: none; border: 0; font-size: 0.65rem; font-weight: 400; color: rgba(255, 255, 255, 0.85); }
  .ph-show-note {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    min-height: 0;
    padding: 0;
    border: 0;
    font-size: 0.72rem;
    line-height: 1.4;
    color: #fff;
  }
}
.ph-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  overflow: hidden;
  border-radius: 4px;
  font-size: clamp(9px, 1.9cqw, 15px);
  letter-spacing: -0.04em;
  white-space: nowrap;
  text-decoration: none;
  line-height: 1;
  transition: transform 0.15s, box-shadow 0.15s;
}
.ph-map .ph-tile.is-lv0 { background: #fff; border: 1px solid var(--tb-line-soft); color: var(--tb-ink-faint); }
/* 訪問済みだが写真が無い県（prefs.php の8番目が true）。赤い枠線だけ */
.ph-map .ph-tile.is-been { background: #fff; border: 2px solid var(--tb-brand); color: var(--tb-brand); }
.ph-map .ph-tile.is-lv1 { background: #fbd5d4; color: #7a2321; }
.ph-map .ph-tile.is-lv2 { background: #f58a88; color: #fff; }
.ph-map .ph-tile.is-lv3 { background: var(--tb-brand); color: #fff; }
.ph-map a.ph-tile:hover { transform: translateY(-2px); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15); }
.ph-map .ph-tile[style*="span 2"] { font-size: clamp(11px, 2.4cqw, 20px); }
/* スマホ幅ではタイルが約20pxになるので、3文字の県名（神奈川・和歌山・鹿児島）だけ長体にして収める */
@container (max-width: 520px) {
  .ph-tile.is-long > span { display: inline-block; transform: scaleX(0.66); }
}

.ph-map-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-top: 12px; }
/* お気に入りアルバムへのボタン（凡例の行の右端） */
.ph-album-link {
  margin-left: auto;
  padding: 5px 16px;
  background: var(--tb-brand);
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s;
}
.ph-album-link:hover { background: #d43c39; }
.ph-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.8rem;
  color: var(--tb-ink-soft);
}
.ph-legend li { display: flex; align-items: center; gap: 6px; }
.ph-sw { display: inline-block; width: 14px; height: 14px; border-radius: 3px; }
.ph-sw.is-lv0 { background: #fff; border: 1px solid var(--tb-line); }
.ph-sw.is-been { background: #fff; border: 2px solid var(--tb-brand); }

/* ---------- 県カード ---------- */
.ph-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 14px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.ph-card {
  background: #fff;
  border: 1px solid var(--tb-line);
  border-radius: var(--tb-radius);
  overflow: hidden;
  transition: transform 0.15s, box-shadow 0.15s;
}
.ph-card:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1); }
.ph-card a { display: block; color: inherit; text-decoration: none; }
.ph-card-thumb { display: block; aspect-ratio: 4 / 3; background: var(--tb-paper-deep); }
.ph-card-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ph-card-body { display: flex; justify-content: space-between; align-items: baseline; padding: 10px 12px; }
.ph-card-name { font-weight: 700; }
.ph-card-n { font-family: "JetBrains Mono", monospace; font-size: 0.85rem; color: var(--tb-ink-soft); }

/* ---------- 県ページ ---------- */
.ph-top { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 16px; margin-bottom: 18px; }
.ph-title-pref { margin: 0; }
.ph-back { font-size: 0.85rem; color: var(--tb-ink-soft); text-decoration: none; }
.ph-back:hover { color: var(--tb-brand); }
.ph-top-meta { margin-left: auto; font-size: 0.9rem; color: var(--tb-ink-soft); }

.ph-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}
.ph-photo {
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--tb-radius);
  background: var(--tb-paper-deep);
}
.ph-photo img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.25s; }
.ph-photo:hover img { transform: scale(1.05); }

.ph-pager { display: flex; justify-content: space-between; gap: 12px; margin-top: 32px; }
.ph-pager a {
  padding: 8px 14px;
  background: #fff;
  border: 1px solid var(--tb-line);
  border-radius: var(--tb-radius);
  color: var(--tb-ink);
  text-decoration: none;
  font-size: 0.9rem;
}
.ph-pager a:hover { color: var(--tb-brand); border-color: var(--tb-brand); }

/* ---------- ライトボックス ---------- */
.ph-lb {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 15, 18, 0.94);
}
.ph-lb-img {
  max-width: 100%;
  max-height: calc(100% - 64px);
  object-fit: contain;
  user-select: none;
}
.ph-lb-btn {
  position: absolute;
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s;
}
.ph-lb-btn:hover { background: rgba(255, 255, 255, 0.3); }
.ph-lb-close { top: 14px; right: 14px; }
.ph-lb-prev { left: 14px; top: 50%; transform: translateY(-50%); }
.ph-lb-next { right: 14px; top: 50%; transform: translateY(-50%); }
.ph-lb-info {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 14px;
  text-align: center;
  color: #fff;
  font-size: 0.9rem;
}
.ph-lb-pos { font-family: "JetBrains Mono", monospace; }
.ph-lb-cap { margin-left: 12px; color: rgba(255, 255, 255, 0.8); }
body.ph-lb-open { overflow: hidden; }

/* ---------- アルバム（お気に入り） ---------- */
.ph-book-wrap { position: relative; margin-top: 4px; }
.ph-book {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  /* 紙を上端でそろえる。背景は付けず、紙だけが浮いて見えるようにする（上下の余白は影のぶん） */
  align-items: flex-start;
  padding: 10px 0 26px;
}
.ph-book::-webkit-scrollbar { display: none; }
.ph-page {
  flex: 0 0 100%;
  scroll-snap-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
  padding: 0 28px;
  scroll-margin-top: 130px;
}
.ph-page-cover .ph-cover-inner {
  background: #fff;
  border: 1px solid var(--tb-line);
  border-radius: 6px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12);
  padding: 48px 32px;
  text-align: center;
  max-width: 420px;
}
.ph-cover-title { margin: 0 0 14px; font-weight: 700; font-size: 1.5rem; }
.ph-cover-years { margin: 0 0 6px; color: var(--tb-ink-soft); font-family: "JetBrains Mono", monospace; }
.ph-cover-n { margin: 0 0 18px; color: var(--tb-ink-soft); }
.ph-cover-hint { margin: 0; font-size: 0.8rem; color: var(--tb-ink-faint); }

.ph-album-figure {
  background: #fff;
  border: 1px solid var(--tb-line);
  border-radius: 6px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12);
  padding: 20px 20px 18px;
  margin: 0;
  max-width: 760px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.ph-album-figure img {
  display: block;
  max-width: 100%;
  max-height: min(56vh, 600px);
  object-fit: contain;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.18));
}
.ph-album-figure figcaption { margin-top: 16px; text-align: center; }
.ph-album-note { margin: 0 0 8px; font-size: 1.2rem; font-weight: 500; line-height: 1.8; color: var(--tb-ink); }
.ph-album-meta { margin: 0; font-size: 0.85rem; color: var(--tb-ink-soft); }
.ph-album-meta a { color: var(--tb-ink-soft); text-decoration: underline; }
.ph-album-meta a:hover { color: var(--tb-brand); }

.ph-album-pos {
  margin-top: 14px;
  text-align: center;
  font-family: "JetBrains Mono", monospace;
  font-size: 0.75rem;
  color: var(--tb-ink-faint);
}

.ph-album-nav {
  position: absolute;
  /* 写真の中央あたり。縦長の写真が混ざって本が高くなっても、下がりすぎないようにする */
  top: min(50%, 300px);
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border: 1px solid var(--tb-line);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: var(--tb-ink-soft);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  z-index: 5;
  transition: opacity 0.15s, color 0.15s;
}
.ph-album-nav:hover { color: var(--tb-brand); }
.ph-album-prev { left: 8px; }
.ph-album-next { right: 8px; }
.ph-album-nav[hidden] { display: none; }

/* ---------- スマホ ---------- */
@media (max-width: 760px) {
  .ph-map-panel { padding: 10px; }
  .ph-title { font-size: 1.35rem; }
  /* 見出し：枚数は箱をやめて、見出しの右に文字だけで置く。リード文は幅いっぱい */
  .ph-head { gap: 6px 12px; margin-bottom: 16px; }
  .ph-lead { grid-column: 1 / -1; font-size: 0.88rem; line-height: 1.7; }
  .ph-count { grid-row: 1; align-items: flex-end; padding: 0 2px 4px; background: none; border: 0; font-size: 0.8rem; }
  .ph-count b { font-size: 1.3rem; margin: 0 2px; }
  /* 訪れた県：表紙を3列に並べて、県を選ぶ一覧にする */
  .ph-cards { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; }
  .ph-card-body { flex-wrap: wrap; gap: 0 4px; padding: 6px; }
  .ph-card-name { font-size: 0.8rem; }
  .ph-card-n { font-size: 0.72rem; }
  .ph-section { margin: 26px 0 10px; font-size: 1.05rem; }
  .ph-top-meta { margin-left: 0; width: 100%; }
  .ph-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
  .ph-lb-btn { width: 40px; height: 40px; }
  .ph-lb-prev { left: 6px; }
  .ph-lb-next { right: 6px; }

  .ph-page { padding: 0 14px; }
  .ph-page-cover .ph-cover-inner { padding: 32px 20px; }
  .ph-cover-title { font-size: 1.3rem; }
  .ph-album-figure { padding: 14px 14px 12px; }
  .ph-album-figure img { max-height: 52vh; }
  .ph-album-note { font-size: 1.05rem; }
  .ph-page { scroll-margin-top: 110px; }
  .ph-album-nav { top: min(50%, 200px); width: 36px; height: 36px; font-size: 1.2rem; }
  .ph-album-prev { left: 2px; }
  .ph-album-next { right: 2px; }
}

@media (prefers-reduced-motion: reduce) {
  .ph-tile, .ph-card, .ph-photo img, .ph-lb-btn { transition: none; }
  .ph-map a.ph-tile:hover, .ph-card:hover, .ph-photo:hover img { transform: none; }
  .ph-book { scroll-behavior: auto; }
  .ph-album-nav { transition: none; }
  .ph-show-img { transition: none; }
}