@charset "utf-8";
/* 施設詳細のポップアップ。**縦型フィードとスポットを選ぶ画面で共有する**
   （依頼者指示 2026-08-26）。もとは feed.css にあったものを、
   複製せずに1か所へ集めるためにここへ移した。

   使う側：
     feed.html          … 動画の下の情報を押すと開く
     itinerary-spots.html  … 旅ポケットのカードの ⓘ を押すと開く

   開閉と中身は site/assets/js/spotcard.js（window.OCSpotCard）。 */

/* ============================================================ スポットの詳細（ポップアップ）
   ハーフモーダルをやめ、**下から立ち上がるポップアップ**にした
   （依頼者指示 2026-08-26）。地はアイボリー #F5F1E8、文字はネイビーで、
   組み方はトップページに合わせる（アーチの写真・明朝の見出し・事実は定義リスト）。
   プレーヤーは暗色だが、この面だけはサイト本体の言葉づかいに戻す。 */
.tp-pop {
  /* 浮きもの（旅ポケットの追従ボタン 70・引き出し 71・上限の札 72・
     右レール 80）より上に出す（2026-08-27 実測して修正）。
     読み込み中 90・生成中 95・スキップリンク 100・遷移の覆い 200 より下。 */
  position: fixed; inset: 0; z-index: 85;
  display: flex; align-items: center; justify-content: center;
  padding: 20px 16px calc(20px + env(safe-area-inset-bottom));
  background: rgba(22, 20, 28, .58);
  animation: pop-bg .3s var(--e-out-quart) both;
}
.tp-pop[hidden] { display: none; }
@keyframes pop-bg { from { opacity: 0; } }

.tp-pop-in {
  position: relative; width: 100%; max-width: 440px;
  /* 外側は動かさず、**本文だけ**を送る。丸ごと送ると、写真と閉じるボタンが
     上へ抜けて押せなくなった（実測） */
  max-height: min(88vh, 760px); overflow: hidden;
  display: flex; flex-direction: column;
  background: var(--ivory); color: var(--navy);
  border-radius: var(--r-panel);
  box-shadow: 0 30px 70px rgba(0, 0, 0, .42);
  animation: pop-up .5s var(--e-out-quint) both;
}
/* 下から立ち上がる。動きを止めている人にはその場で出す */
@keyframes pop-up { from { transform: translateY(56px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .tp-pop, .tp-pop-in { animation: none !important; }
}

/* 写真は1枚。天端をアーチにして、トップの3館・しおりと同じ形にそろえる */
.tc-fig {
  flex: 0 0 auto; height: 190px; overflow: hidden;
  border-radius: var(--r-panel) var(--r-panel) 0 0;
  background: var(--sand);
}
.tc-fig img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tc-x {
  position: absolute; z-index: 2; right: 12px; top: 12px;
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, .92); color: var(--navy);
  box-shadow: 0 4px 14px rgba(22, 35, 61, .26);
  transition: background var(--transition);
}
.tc-x::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 44px; height: 44px; transform: translate(-50%, -50%);
}
.tc-x:hover { background: #fff; }
.tc-x svg { width: 20px; height: 20px; }

.tc-b { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  /* 下は 18 → 34px（依頼者指示 2026-09-08）。最後の行が公式サイトのリンクになり、
     すぐ下の CTA と近くて押し分けにくかったため */
  padding: 20px 22px 34px; }
.tc-t {
  font-family: var(--serif); font-weight: 500; font-size: 22px; line-height: 1.5;
  letter-spacing: .04em; color: var(--navy); text-wrap: balance;
}
.tc-m { margin-top: 7px; font-size: 12.5px; letter-spacing: .04em; color: var(--ink-mid); }
.tc-d { margin-top: 14px; font-size: 14.5px; line-height: 1.95; color: var(--ink-soft); text-wrap: pretty; }
.tc-facts { margin-top: 18px; border-top: 1px solid var(--ink-hair); }
.tc-facts > div {
  display: grid; grid-template-columns: 116px minmax(0, 1fr); gap: 10px;
  padding: 10px 0; border-bottom: 1px solid var(--ink-hair);
}
.tc-facts dt { font-size: 12px; letter-spacing: .04em; color: var(--ink-mid); }
.tc-facts dd { margin: 0; font-size: 13.5px; line-height: 1.8; color: var(--navy); }

/* 公式サイトの行（依頼者指示 2026-09-08）。所在地の下に置き、押すと別タブで
   公式サイトへ移る。
   ・**文言は全件共通**（依頼者判断 2026-09-08）。URL 全文を出していたときは
     37件中18件が2行以上になり、別タブの印（↗）だけが次の行へ落ちる回が出た。
     短い固定の文言にすれば、全件が **1行・44px** の同じ高さでそろう
   ・組みは他の行と同じ2列のまま。**色だけに頼らない**ので下線と ↗ を添える
   ・当たり判定は 44px（13.5px × 行間 1.8 ＝ 24.3px ＋ 上下 20px ＝ 44.3px）。
     行の上下 padding をリンク側へ移して確保し、ラベルの位置がずれないよう
     dt にも同じ 10px を入れる */
.tc-facts > .tc-fact-link { padding: 0; }
.tc-facts > .tc-fact-link dt { padding-top: 10px; }
.tc-link {
  display: inline-block; padding: 10px 0;
  color: var(--navy);
  text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px;
  transition: color var(--transition);
}
.tc-link:hover { color: var(--cta); }
/* 別タブで開く印。飾りだが文字の下限（12px）は割らない */
.tc-link-ex { display: inline-block; margin-left: 5px; font-size: 12px; line-height: 1; }

/* 押せない理由。色だけに頼らず、印（！）と文言で出す */
.tc-msg {
  margin: 0 0 10px; padding: 10px 14px 10px 30px; position: relative;
  border-radius: var(--r-card); background: var(--sand); color: var(--navy);
  font-size: 12.5px; line-height: 1.75;
}
.tc-msg::before { content: "！"; position: absolute; left: 13px; top: 10px; font-size: 12px; }
.tc-msg[hidden] { display: none; }
.tp-pop .tp-cta:disabled { opacity: .45; cursor: default; }
.tp-pop .tp-cta:disabled:hover { background: var(--cta); }

/* 下は「旅ポケットに入れる」だけ（依頼者指示 2026-08-26）。
   2026-08-27 から、置く画面によって文言と働きが変わる（spotcard.js の saveHook） */
.tc-f {
  flex: 0 0 auto;
  padding: 14px 22px calc(18px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--ink-hair); background: var(--ivory);
}
.tp-pop .tp-cta {
  width: 100%; min-height: 52px; border-radius: var(--r-btn);
  background: var(--cta); border: 1px solid transparent; color: #fff;
  font-size: 15px; font-weight: 500;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.tp-pop .tp-cta:hover { background: var(--cta-hover); }
.tp-pop .tp-cta[aria-pressed="true"] {
  background: var(--panel); color: var(--cta); border-color: var(--cta);
}
.tp-cta {
  min-height: 50px; border-radius: var(--r-pill); display: inline-flex;
  align-items: center; justify-content: center; gap: 8px;
  border: 1px solid rgba(255,255,255,.5); font-size: 14.5px; font-weight: 500;
}
.tp-cta[aria-pressed="true"] {
  background: var(--custom-style-stock-folder-badge-bg-color); border-color: transparent;
}
.tp-cta-fill { background: var(--custom-style-seekbar-color); border-color: transparent; }

/* 旅ポケットへ入れる CTA。プレーヤー側の変数（--custom-style-*）に依存しない形で
   持っておく（スポットを選ぶ画面は feed.css を読まないため） */
.tp-pop .tp-cta {
  width: 100%; min-height: 52px; border-radius: var(--r-btn);
  background: var(--cta); border: 1px solid transparent; color: #fff;
  font-size: 15px; font-weight: 500;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.tp-pop .tp-cta:hover { background: var(--cta-hover); }
.tp-pop .tp-cta[aria-pressed="true"] {
  background: var(--panel); color: var(--cta); border-color: var(--cta);
}