/* =========================================================
   新サイト 一件ずつの記録ページ
   - parts.css の後に読み込む。クラス名は rec-
   ========================================================= */

/* ---------- 写真 ---------- */
.rec-photo { position: relative; background: #2B3138; aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.rec-photo-sample {
  width: 100%; height: 100%; display: flex; align-items: flex-end; padding: 12px;
  background: linear-gradient(160deg, #C9D1DA 0%, #9AA5B1 55%, #6F7A86 100%); color: #fff; font-size: 13px; font-weight: 700;
}
.rec-photo-count { position: absolute; right: 8px; bottom: 8px; background: rgba(22,32,43,.75); color: #fff; font-size: 12px; padding: 2px 8px; }
.rec-photo-caption { padding: 6px 16px; font-size: 12px; color: var(--cmt-text-sub); border-bottom: 1px solid var(--cmt-line); }
.rec-photo--hidden { background: var(--cmt-surface); aspect-ratio: 16 / 7; flex-direction: column; gap: 8px; color: var(--cmt-text-sub); font-size: 13px; text-align: center; padding: 16px; line-height: 1.6; }
.rec-photo--hidden svg { width: 28px; height: 28px; }

/* ---------- 見出し（題・日付・場所・札） ---------- */
.rec-head { padding: 16px 16px 18px; border-bottom: 1px solid var(--cmt-line); }
.rec-title { margin: 0 0 6px; font-size: 24px; line-height: 1.35; font-weight: 900; color: var(--cmt-text); }
.rec-sub { margin: 0 0 10px; font-size: 15px; color: var(--cmt-text); line-height: 1.6; }
.rec-code { display: block; margin-top: 8px; font-family: var(--cmt-font-mono); font-size: 13px; color: var(--cmt-text-sub); }
.rec-lead { margin: 12px 0 0; font-size: 15px; line-height: 1.8; }

/* ---------- 章 ---------- */
.rec-sec { padding: 24px 16px 4px; }
.rec-sec > h2 { margin: 0 0 12px; padding-bottom: 6px; border-bottom: 2px solid var(--cmt-text); font-size: 20px; line-height: 1.4; }
.rec-sec > h2 small { font-size: 12px; font-weight: 500; color: var(--cmt-text-sub); margin-left: 6px; }
.rec-sec p { margin: 0 0 10px; }
.rec-note { font-size: 12px; color: var(--cmt-text-sub); line-height: 1.7; margin: 8px 0 0; }

/* 項目の表（左に名前・右に値） */
.rec-dl { display: grid; grid-template-columns: 7.5em 1fr; margin: 0; font-size: 15px; }
.rec-dl dt, .rec-dl dd { margin: 0; padding: 10px 0; border-bottom: 1px solid var(--cmt-line); line-height: 1.55; }
.rec-dl dt { color: var(--cmt-text-sub); font-size: 13px; padding-right: 8px; }
.rec-dl dd { font-weight: 700; min-width: 0; overflow-wrap: anywhere; }
.rec-dl dd .rec-plain { font-weight: 400; color: var(--cmt-text-sub); }
.rec-dl time { font-family: var(--cmt-font-mono); font-variant-numeric: tabular-nums; }

/* 見分ける情報の箱（捜索中だけ） */
.rec-ident { margin: 20px 16px 0; border: 2px solid var(--cmt-text); }
.rec-ident h2 { margin: 0; padding: 8px 12px; background: var(--cmt-text); color: #fff; font-size: 15px; }
.rec-ident-body { padding: 12px; }
.rec-ident-label { font-size: 12px; color: var(--cmt-text-sub); margin: 0 0 4px; }
.rec-plate {
  display: inline-block; padding: 6px 12px; border: 3px solid var(--cmt-plate); color: var(--cmt-plate); background: #fff;
  font-size: 22px; font-weight: 900; letter-spacing: .04em; line-height: 1.2; margin-bottom: 4px;
}
.rec-ident-value { font-size: 17px; font-weight: 700; margin: 0 0 4px; line-height: 1.5; }

/* 持ち主・情報提供者のひとこと */
.rec-quote { margin: 20px 16px 0; padding: 4px 0 4px 14px; border-left: 4px solid var(--cmt-text-sub); }
.rec-quote-label { font-size: 12px; color: var(--cmt-text-sub); margin: 0 0 4px; }
.rec-quote p { margin: 0; font-size: 16px; line-height: 1.75; }

/* 経過（横にめくる） */
.rec-timeline { display: flex; gap: 10px; overflow-x: auto; padding: 4px 0 10px; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
.rec-step { flex: 0 0 72%; max-width: 240px; scroll-snap-align: start; border: 1px solid var(--cmt-line); border-top: 4px solid var(--cmt-text-sub); padding: 10px 12px; background: #fff; }
.rec-step--found { border-top-color: var(--cmt-found); }
.rec-step--searching { border-top-color: var(--cmt-searching-text); }
.rec-step-when { font-family: var(--cmt-font-mono); font-size: 13px; color: var(--cmt-text-sub); }
.rec-step-what { font-size: 15px; font-weight: 700; line-height: 1.5; margin: 4px 0; }
.rec-step-src { font-size: 12px; color: var(--cmt-text-sub); }

/* 確からしさ（4 段） */
.rec-grade { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; margin: 4px 0 6px; }
.rec-grade span { height: 8px; background: var(--cmt-line); }
.rec-grade span.on { background: var(--cmt-text); }
.rec-grade-labels { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; font-size: 11px; color: var(--cmt-text-sub); line-height: 1.35; }
.rec-grade-labels b { color: var(--cmt-text); }

/* 知っておきたいこと（不審バイヤー） */
.rec-know { margin: 20px 16px 0; padding: 14px 14px 16px; background: var(--cmt-surface); border-top: 3px solid var(--cmt-buyer); }
.rec-know h2 { margin: 0 0 6px; font-size: 17px; }
.rec-know p { margin: 0; font-size: 15px; line-height: 1.75; }

/* 番号つきの手順 */
.rec-steps { list-style: none; margin: 0; padding: 0; counter-reset: s; }
.rec-steps li { counter-increment: s; display: grid; grid-template-columns: 28px 1fr; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--cmt-line); }
.rec-steps li::before { content: counter(s); width: 28px; height: 28px; background: var(--cmt-navy); color: #fff; font-weight: 700; display: flex; align-items: center; justify-content: center; font-family: var(--cmt-font-num); }
.rec-steps b { display: block; font-size: 15px; }
.rec-steps span { font-size: 13px; color: var(--cmt-text-sub); }

/* 地図（位置の注記と大きな地図への入口。地図そのものは地図の配信元が決まってから） */
.rec-map { position: relative; margin: 0; border-bottom: 1px solid var(--cmt-line); }
.rec-map svg { display: block; width: 100%; height: auto; }
.rec-map-btn { position: absolute; left: 12px; bottom: 12px; }
.rec-map-note { padding: 8px 16px; font-size: 12px; color: var(--cmt-text-sub); line-height: 1.6; }

/* 入口（テーマ・持ち主の方へ など） */
.rec-links { list-style: none; margin: 0; padding: 0; }
.rec-links a { display: flex; align-items: center; justify-content: space-between; min-height: 52px; padding: 8px 0; border-bottom: 1px solid var(--cmt-line); text-decoration: none; font-weight: 700; }
.rec-links a::after { content: "→"; color: var(--cmt-navy); margin-left: 8px; }
.rec-links small { display: block; font-weight: 400; font-size: 12px; color: var(--cmt-text-sub); }
.rec-theme { display: block; padding: 12px 14px; background: var(--cmt-region-bg); border-left: 4px solid var(--cmt-region); text-decoration: none; }
.rec-theme small { display: block; font-size: 12px; color: var(--cmt-text-sub); }
.rec-theme b { font-size: 16px; }

/* 広める */
.rec-share { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.rec-share a { min-height: 44px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--cmt-navy); color: var(--cmt-navy); font-weight: 700; font-size: 14px; text-decoration: none; border-radius: var(--cmt-r-btn); }

/* チラシの画像（伏せた状態） */
.rec-flyer-stage { background: #3A3F46; padding: 20px 16px 14px; text-align: center; }
.rec-flyer {
  width: min(78%, 280px); margin: 0 auto; background: #fff; color: #222; text-align: left; padding: 14px 14px 18px;
  box-shadow: 0 6px 18px rgba(0,0,0,.35); transform: rotate(-2deg); font-size: 13px; line-height: 1.6;
}
.rec-flyer-catch { background: #222; color: #fff; text-align: center; font-weight: 900; font-size: 15px; padding: 4px; margin-bottom: 8px; }
.rec-flyer-co { font-weight: 900; font-size: 14px; margin-top: 6px; }
.rec-blur { display: inline-block; height: 12px; width: 7em; background: repeating-linear-gradient(90deg, #B8BEC6 0 6px, #CDD2D8 6px 12px); vertical-align: middle; filter: blur(1.2px); }
.rec-flyer-back { text-align: center; color: #555; padding: 30px 0; }
.rec-flyer-note { margin: 10px 0 0; font-size: 12px; color: #D5DAE0; }
.rec-flyer-stage .cmt-toggle { margin-top: 12px; background: #2B3036; border-color: #555C64; }
.rec-flyer-stage .cmt-toggle button { color: #fff; }
.rec-flyer-stage .cmt-toggle button[aria-pressed="true"] { background: #fff; color: var(--cmt-text); }

/* ---------- 画面下の固定ボタン（記録ページでは下のナビの代わり） ---------- */
.rec-actions {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: grid; grid-template-columns: 1fr auto; gap: 8px;
  padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
  background: var(--cmt-white); border-top: 1px solid var(--cmt-line);
}
.rec-actions .cmt-btn { min-height: 48px; font-size: 15px; line-height: 1.3; flex-direction: column; gap: 0; }
.rec-actions .cmt-btn small { font-size: 11px; font-weight: 500; opacity: .9; }
.rec-actions-spacer { height: calc(72px + env(safe-area-inset-bottom)); }

/* 取り下げ */
.rec-withdrawn { padding: 32px 16px; text-align: left; }
.rec-withdrawn h1 { font-size: 20px; margin: 0 0 8px; }

@media (min-width: 768px) {
  .rec-wrap { max-width: 720px; margin: 0 auto; }
  .rec-actions { max-width: 720px; margin: 0 auto; }
  .rec-photo { aspect-ratio: 16 / 9; }
}

/* 読み込み中・見つからない */
.rec-load { padding: 32px 16px; font-size: 15px; color: var(--cmt-text-sub); line-height: 1.7; }
.rec-sample-banner { background: var(--cmt-surface); border-bottom: 1px solid var(--cmt-line); padding: 8px 16px; font-size: 12px; color: var(--cmt-text-sub); line-height: 1.6; }
.rec-more { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; color: var(--cmt-navy); text-underline-offset: 3px; }
button.rec-photo { width: 100%; padding: 0; border: 0; cursor: pointer; font: inherit; }
.rec-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rec-share button { min-height: 44px; border: 1px solid var(--cmt-navy); background: var(--cmt-white); color: var(--cmt-navy); font: inherit; font-weight: 700; font-size: 14px; border-radius: var(--cmt-r-btn); cursor: pointer; }
.rec-flyer-stage img { max-width: min(78%, 320px); height: auto; display: block; margin: 0 auto; }

/* 警察の記録の小さな地図 */
.rec-minimap { display: block; width: 100%; max-width: 480px; aspect-ratio: 5 / 3.8; height: auto; border: 1px solid var(--cmt-line); margin: 0 0 8px; }

/* 動画のボタン（捜索中の記録だけ） */
.rec-videos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.rec-videos .cmt-btn { justify-content: center; }

/* 共有ボタン（X・LINE・Facebook・Threads・URL・その他で共有）: ロゴは白、地は各社の色。ロゴの周りの余白を空ける */
.rec-share { grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 8px; }
.rec-wrap .rec-share .rec-sh, .rec-share .rec-sh { min-height: 48px; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 0 14px; border: 0; color: #fff; font-weight: 700; font-size: 14px; text-decoration: none; border-radius: var(--cmt-r-btn, 4px); cursor: pointer; }
.rec-sh img { flex: none; width: 20px; height: 20px; display: block; }
.rec-sh--x { background: #000; }
.rec-share .rec-sh--threads { background: #fff; color: #000; border: 1px solid #000; } /* Threads のロゴは黒の線なので、白い地に */
.rec-sh--line { background: #06C755; }
.rec-sh--fb { background: #1877F2; }
.rec-share .rec-sh--url, .rec-share .rec-sh--more { background: var(--cmt-white); color: var(--cmt-navy); border: 1px solid var(--cmt-navy); }
.rec-sh:focus-visible { outline: 3px solid var(--cmt-car); outline-offset: 2px; }

/* ロゴの大きさと余白（各社の決まりに合わせた安全側: スマホ 40px・PC 28px、左右の余白はロゴの幅と同じ） */
.rec-share { --sh-logo: 40px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.rec-wrap .rec-share .rec-sh, .rec-share .rec-sh { min-height: calc(var(--sh-logo) + 24px); padding: 0 var(--sh-logo); gap: 14px; justify-content: flex-start; }
.rec-share .rec-sh--url, .rec-share .rec-sh--more { justify-content: center; padding: 0 14px; }
.rec-sh img { width: var(--sh-logo); height: var(--sh-logo); object-fit: contain; }
@media (min-width: 760px) { .rec-share { --sh-logo: 28px; } }
.rec-share .rec-sh.rec-sh--threads { background: #fff; color: #000; border: 1px solid #000; }

/* 動画のボタンはロゴの画像（白地・高さ 44px 以上） */
.rec-vbtn { min-height: 48px; padding: 0 12px; background: #fff; }
.rec-vbtn img { display: block; height: 24px; width: auto; max-width: 100%; }

/* 写真が複数のとき: 左右の矢印・何枚目か・押すと大きく開く */
.rec-photo-zoom { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; display: flex; align-items: center; justify-content: center; }
.rec-photo-zoom:focus-visible { outline: 3px solid var(--cmt-car); outline-offset: -3px; }
.rec-photo-count { z-index: 2; font-size: 13px; padding: 3px 10px; }
.rec-nav { position: absolute; z-index: 2; top: 50%; transform: translateY(-50%); width: 48px; height: 64px; padding: 0 0 4px; border: 0; background: rgba(22,32,43,.62); color: #fff; font: inherit; font-size: 34px; line-height: 1; cursor: pointer; }
.rec-nav--prev { left: 0; border-radius: 0 6px 6px 0; }
.rec-nav--next { right: 0; border-radius: 6px 0 0 6px; }
.rec-nav:hover { background: rgba(22,32,43,.85); }
.rec-nav:focus-visible { outline: 3px solid #fff; outline-offset: -4px; }
.rec-lightbox { padding: 0; border: 0; background: rgba(13,23,32,.94); max-width: none; max-height: none; width: 100vw; height: 100vh; height: 100dvh; margin: 0; }
.rec-lightbox[open] { display: flex; align-items: center; justify-content: center; }
.rec-lightbox::backdrop { background: rgba(13,23,32,.94); }
.rec-lightbox img { max-width: 96vw; max-height: 86vh; max-height: 86dvh; object-fit: contain; display: block; }
.rec-lightbox .rec-nav { position: fixed; }
.rec-lb-close { position: fixed; top: 12px; right: 12px; min-height: 44px; padding: 0 16px; border: 1px solid #fff; background: rgba(255,255,255,.12); color: #fff; font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; }
.rec-lb-count { position: fixed; left: 50%; bottom: 14px; transform: translateX(-50%); color: #fff; font-size: 14px; }

/* 警察の記録の小さな地図（MAP と同じ地理院タイル） */
.rec-minimap { position: relative; overflow: hidden; background: #E4EDF3; }
.rec-minimap-stage { position: absolute; left: 50%; top: 50%; width: 768px; height: 768px; }
.rec-minimap-stage img { position: absolute; width: 256px; height: 256px; max-width: none; }
.rec-minimap-dot { position: absolute; left: 50%; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: #F04E23; border: 2px solid #fff; box-shadow: 0 0 0 8px rgba(240,78,35,.25); }
.rec-minimap-wrap { max-width: 480px; margin: 0 0 8px; }
.rec-minimap-wrap .rec-minimap { margin: 0; }
.rec-minimap-credit { margin: 2px 0 0; padding: 0; font-size: 10px; line-height: 1.4; color: var(--cmt-text-sub); }
.rec-minimap-credit a { color: inherit; }

/* 警察の記録の小さな地図が暗い地図（CARTO）のとき: MAP と同じ見え方 */
.rec-minimap--dark { background: #2a3040; }
.rec-minimap--dark .rec-minimap-stage img { filter: brightness(2) saturate(.9); }

/* 小さな地図の拡大縮小（＋－）。指で押せる 44px */
.rec-minimap-zoom { position: absolute; right: 8px; bottom: 8px; z-index: 2; display: grid; box-shadow: 0 1px 6px rgba(22,32,43,.3); }
.rec-minimap-zoom button { width: 44px; height: 44px; padding: 0; border: 1px solid var(--cmt-line); background: #fff; color: var(--cmt-navy); font: inherit; font-size: 22px; font-weight: 700; line-height: 1; cursor: pointer; }
.rec-minimap-zoom button + button { border-top: 0; }
.rec-minimap-zoom button:disabled { color: #9AA5B1; cursor: default; }
.rec-minimap-zoom button:focus-visible { outline: 3px solid var(--cmt-navy); outline-offset: -3px; }

/* 小さな地図のベクターの絵の層（MapLibre）。点（rec-minimap-dot）と＋－は上 */
.rec-minimap-vec, .rec-minimap-vec.maplibregl-map { position: absolute; inset: 0; z-index: 0; }
.rec-minimap-dot { z-index: 1; }