@charset "utf-8";
/* 縦型フィード（feed.html）／ Wireframe V3 WF-3①
   ==========================================================================

   基盤は Tig Short（`tig-creator-player`）。
   出典は tig-workspace/docs/design-system の component-map.md / foundations.md / tokens/radius.md。
   寸法・不透明度は**実装の実測値をそのまま**使い、色だけブランド側へ寄せている。

   Short 実装 → ここでのクラス
   ---------------------------------------------------------------------------
   TigPlayer.vue                 .tp            ルート。--vh / --video-aspect-ratio を持つ
   TutorialButton.vue            .tp-help       32×32 ／ top:16 right:16（実測）
   UnmuteButton.vue              .tp-mute
   PlaylistFilterButton.vue      .tp-filter
   ControllerArea.vue            .tp-ctl        animation = Default / Poped
   SeekArea.vue                  .tp-seek       --tig-seek-point-size
   SubtitleOverlay.vue           .tp-sub        PC 20px ／ SP 15px、分岐は 768px（Short の値）
   PlaylistBannerInfo.vue        .tp-info .tp-t width 75% ／ max-width 312 ／ 22px ／ lh 1.4
   SwitchButtonArea.vue          .tp-sw         min-width 64 ／ padding-left 16 ／ アイコン 40×40
   FooterArea.vue                .tp-footer     width 100% ／ bottom 0
   LoadingArea.vue               .tp-loading    bg rgba(0,0,0,.25) ／ 120×80 ／ top 45%
   TutorialArea.vue              .tp-tutorial   bg rgba(0,0,0,.64)
   PlaylistSwipeTutorial.vue     .tp-swipe      bg rgba(0,0,0,.64)
   StockArea.vue                 .tp-stock      stockArea_modal ／ .stocklist-header
   StockToastArea.vue            .tp-toast      width 219 ／ padding 4 ／ radius 8 ／ bg #232426
   ShareArea.vue                 .tp-share      h276 ／ max-width 588 ／ 見出し下 1px #171717
   modal/TigModalComponent.vue   .tp-sheet      radius 8 ／ 幅 80%（SP 90%）／ 最大高 78.5%

   ---------------------------------------------------------------------------
   採らなかったもの

   ・**Active color `#05ADFF`**（foundations §5）。Player のハードコードで顧客可変ではないが、
     本サイトにはブランドのアクセント（テラコッタ）がある。ここでは使わず、
     可変キー `--custom-style-seekbar-color` 経由でテラコッタを流している。
     Player 本体で色を変えるには実装改修（SCSS 化）が要るので、Backlog チケット案件。
   ・**HelpLayer の rgba(0,0,0,.3)**。同じ「操作案内の暗幕」で TutorialArea が .64 と
     倍以上ちがう（component-map §10-d の指摘）。ここでは濃い方（.64）に揃えた。

   ---------------------------------------------------------------------------
   Short 固有の CSS 変数（foundations §10）。**顧客が実行時に変更できる9キー**なので、
   ブランド色はここから入れる。Player 側のハードコードには触らない。 */

:root {
  /* ---- Short の顧客可変キー（9つ）。ブランドの値を流し込む */
  --custom-style-card-bg-color: #F5F1E8;              /* IVORY */
  --custom-style-card-text-color: #1E2F52;            /* CORRIDOR NAVY */
  --custom-style-card-animation-bg-color: #232426;    /* StockToast の実装既定 */
  --custom-style-card-animation-text-color: #FFFFFF;
  --custom-style-item-image-border-color: #E6DCC6;    /* HERITAGE SAND */
  --custom-style-item-image-icon-text-color: #FFFFFF;
  --custom-style-seekbar-color: #CA4F27;              /* OSAKA TERRA（採用値） */
  --custom-style-stock-folder-badge-bg-color: #CA4F27;
  --custom-style-stock-folder-badge-text-color: #FFFFFF;

  /* ---- Short のテーマ／レイアウト変数 */
  --bg-color-common: #16141C;                    /* foundations §5 black */
  --bg-color-stock-area-sub-header: #2E2C33;     /* 同 icon black */
  --delete-border-color: #EF4040;                /* color.scss $warn */
  --delete-text-color: #EF4040;
  --tig-seek-point-size: 8px;
  --video-aspect-ratio: 9 / 16;
  --default-transition: .3s ease;
  --vh: 1vh;                                     /* JS が実測に置き換える */

  /* ---- 角丸（tokens/radius.md） */
  --r-2: 2px; --r-4: 4px; --r-8: 8px; --r-12: 12px; --r-16: 16px;
  --r-pill: 9999px;

  /* ---- 派生値 */
  --tp-h: calc(var(--vh) * 100);
  /* PC では 9:16 の枠に letterbox する。操作もこの幅に合わせる */
  --tp-w: min(100vw, calc(var(--tp-h) * 9 / 16));
  --tp-pad: 16px;
}

/* ============================================================ base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body.tp-body {
  margin: 0; background: #000; color: #fff;
  font-family: var(--sans); font-size: 15px; line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
}
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
p, h1, h2, ul, ol, dl, dd, dt, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
:focus-visible { outline: 2px solid #fff; outline-offset: 3px; border-radius: var(--r-4); }

.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }


/* ============================================================ スワイプの合図 */
/* 上下にスワイプできることを、**次の1枚の上端をのぞかせて**伝える
   （依頼者指示 2026-08-27）。

   ・動かすのは .tp-frame。**.tp-item は動かさない** ―― scroll-snap の
     位置は要素の変形後の箱で決まるので、item を動かすと snap が追いかけてきて
     現在地の判定（IntersectionObserver）まで揺れる（実測）
   ・scrollTop も触らない。触ると snap が引き戻しに来る
   ・いまの1枚と次の1枚を**同じだけ**持ち上げるので、あいだに隙間ができない
   ・動かすのは transform だけ。レイアウトは動かない */
.tp { --tp-peek: clamp(44px, calc(var(--vh) * 7), 72px); }
/* 操作列（.tp-ctl）は .tp-chrome の中にあって**1つを使い回している**ので、
   frame と一緒に持ち上げないと、のぞかせた帯をそのまま覆ってしまう
   （実測：帯 787〜844px に対して操作列が 786〜830px に居座っていた）。
   もどる・使い方（.tp-b）はアプリ側の操作なので動かさない。 */
.tp-frame.is-peek,
.tp-ctl.is-peek {
  animation: tp-peek 1.15s var(--e-inout-cubic) both;
}
@keyframes tp-peek {
  0%   { transform: translateY(0); }
  36%  { transform: translateY(calc(var(--tp-peek) * -1)); }
  58%  { transform: translateY(calc(var(--tp-peek) * -1)); }
  100% { transform: translateY(0); }
}
/* 動きを止めている人には出さない。
   同じことは使い方（「上下にスワイプすると、次の場所の動画に移ります。」）が
   文字で伝えているので、情報は落ちない */
@media (prefers-reduced-motion: reduce) {
  .tp-frame.is-peek, .tp-ctl.is-peek { animation: none; }
}

/* ============================================================ ルート */
.tp { position: fixed; inset: 0; overflow: hidden; }

/* ---- Tigプレーヤーの起動状態（PM_COMMON-236・feed.htmlの入口化）
   feed.html は開いたら即座にTigの全画面プレーヤーへ渡す入口になった。
   このページ自身の器（.tp-feed の縦型フィードや .tp-chrome/.tp-ctl などの
   フェイクの操作UI一式）は、実データが乗らないダミーなので使い道が無く、
   起動待ち・失敗時のどちらでも中身の無いまま見えてしまってはいけない。
   data-player-state は feed-tig.js が起動状況に応じて立てる属性
   （既定値はHTML側に launching を持たせてあるので、JSが動く前の一瞬も隠れている）。
   起動できたとき（＝Tigのモーダルが全画面で被さる）は元に戻さない ――
   モーダルを閉じたら別ページへ移すので、この器を見せ直す必要が無いため。 */
.tp[data-player-state] > :not(.tp-fallback) { display: none; }
.tp-fallback {
  display: none;
  position: absolute; inset: 0; z-index: 40;
  flex-direction: column; align-items: center; justify-content: center; gap: 20px;
  padding: 24px; text-align: center;
}
.tp[data-player-state="failed"] .tp-fallback { display: flex; }
.tp-fallback-t { max-width: 320px; font-size: 15px; line-height: 1.85; }
/* .tp-ok は元は <button> 用（block化はブラウザ既定の inline-block）。
   ここでは <a> に使うため、揃うように明示する（gap で間隔を持たせるので margin-top は打ち消す） */
.tp-fallback .tp-ok { display: inline-flex; align-items: center; justify-content: center; margin-top: 0; }

/* 縦スワイプで次の場所へ。1画面 = 1スポット */
.tp-feed {
  height: var(--tp-h); overflow-y: auto; overflow-x: hidden;
  scroll-snap-type: y mandatory; scroll-behavior: smooth;
  overscroll-behavior: contain;
  scrollbar-width: none;
}
.tp-feed::-webkit-scrollbar { display: none; }
.tp-item {
  height: var(--tp-h); scroll-snap-align: start; scroll-snap-stop: always;
  display: flex; align-items: center; justify-content: center;
}
.tp-item[hidden] { display: none; }

/* 動画の枠。ここを基準に、字幕・吹き出し・操作列が乗る */
.tp-frame { position: relative; width: var(--tp-w); height: var(--tp-h); }

.tp-media { position: absolute; inset: 0; overflow: hidden; background: #000; }
.tp-media img, .tp-media video {
  width: 100%; height: 100%; object-fit: cover;
}
.tp-media video { position: absolute; inset: 0; opacity: 0; transition: opacity var(--default-transition); }
.tp-media.is-playing video { opacity: 1; }

/* Base gradiation（foundations §5）＝ #000 0% → 100% a60%。
   上下ともに敷く。上は操作、下は文字を読ませるため */
.tp-grad {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(0,0,0,.6) 0%, rgba(0,0,0,0) 22%),
    linear-gradient(to top, rgba(0,0,0,.6) 0%, rgba(0,0,0,0) 46%);
}

/* 動画のどこを押しても再生／一時停止（Short と同じ） */
.tp-tap { position: absolute; inset: 0; z-index: 1; }
/* 中央の再生印は**支給 SVG を DOM に置く**（依頼者指示 2026-08-26）。
   形を CSS で描き直さないため、data URI と ::after をやめた。
   地は他のサムネイルと同じ半透明の白。暗い映像の上でも輪郭が出る */
.tp-tap-p { transition: opacity var(--default-transition); }
.tp-media.is-playing .tp-tap-p { opacity: 0; }

/* ---- 動画の上の「押せる印」（依頼者指示 2026-08-26）
   画面の中央から右寄りに置く。押すとスポットの詳細ポップアップが開く。
   絵は src/assets/ui/tap.png（APNG・45コマ）を背景で出す ―― <img> にすると、
   素材が届くまで壊れた画像の印が出てしまうため。 */
.tp-cue {
  /* 中央の再生ボタン（.tp-tap::after）と当たらない位置。
     64% / 50% では、止まっているときに再生の丸と 7px 重なっていた（実測） */
  position: absolute; z-index: 3; left: 70%; top: 41%;
  transform: translate(-50%, -50%);
  width: 96px; height: 96px; display: grid; place-items: center;
}
.tp-cue-i {
  width: 100%; height: 100%;
  background: url("../img/ui/tap.png") center center / contain no-repeat;
}
/* 素材が無いときと、動きを止めている人に出す印。
   ブランドの graphic language の POINT（円を発見の節目に）をそのまま使う。
   **破線枠や灰色のボックスは置かない**（提案に出せる面のままにする） */
.tp-cue::before, .tp-cue::after {
  content: ""; position: absolute; left: 50%; top: 50%; border-radius: 50%;
  transform: translate(-50%, -50%); opacity: 0; pointer-events: none;
}
.tp-cue::before {
  width: 44px; height: 44px;
  border: 2px solid rgba(255, 255, 255, .94);
  box-shadow: 0 2px 14px rgba(0, 0, 0, .45), inset 0 0 0 1px rgba(0, 0, 0, .18);
}
.tp-cue::after {
  width: 14px; height: 14px; background: var(--custom-style-seekbar-color);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .4);
}
.tp.is-nocue .tp-cue::before, .tp.is-nocue .tp-cue::after { opacity: 1; }
.tp.is-nocue .tp-cue-i { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .tp.is-nocue .tp-cue::before { animation: cue-ring 2.4s var(--e-out-quart) infinite; }
}
@keyframes cue-ring {
  0%   { transform: translate(-50%, -50%) scale(.82); opacity: .95; }
  70%  { transform: translate(-50%, -50%) scale(1.32); opacity: 0; }
  100% { transform: translate(-50%, -50%) scale(1.32); opacity: 0; }
}
/* 動きを止めている人には APNG を出さない（止められないため）。
   代わりに、動かない POINT を出す */
@media (prefers-reduced-motion: reduce) {
  .tp-cue-i { display: none; }
  .tp-cue::before, .tp-cue::after { opacity: 1; animation: none; }
}

/* ---- 画面下の情報。右の操作列を外したので、幅は画面いっぱいまで使える
   （依頼者指示 2026-08-26）。下は操作列（.tp-ctl）のぶんだけ空ける */
.tp-bottom {
  position: absolute; z-index: 2; left: var(--tp-pad); right: var(--tp-pad); bottom: 84px;
  display: flex; flex-direction: column; gap: 16px;
}

/* ---- PlaylistBannerInfo。目的タグ → スポット名 → エリアと目安 の順。
   かたまり全体が詳細への入口なので、透明なボタンを重ねてある */
.tp-info { position: relative; width: 100%; max-width: 340px; }
.tp-info-b {
  position: absolute; inset: -8px -10px; z-index: 1;
  border-radius: var(--r-8); background: transparent;
}
.tp-info-b:hover { background: rgba(255, 255, 255, .07); }
.tp-info > *:not(.tp-info-b) { position: relative; z-index: 2; pointer-events: none; }
.tp-t {
  font-family: var(--serif); font-size: 22px; line-height: 1.4; font-weight: 600;
  letter-spacing: .02em; text-shadow: 0 2px 10px rgba(0,0,0,.7);
  text-wrap: balance;      /* 「太子町立竹内街道歴史資料館」で2行目が1文字になる */
}
.tp-m { margin-top: 6px; font-size: 12.5px; letter-spacing: .04em; color: rgba(255,255,255,.88); }
.tp-area {
  display: inline-block; margin-right: 8px; padding: 0 8px; border-radius: var(--r-4);
  /* 白文字を載せる面なので、地は文字用の濃い版（4.5:1 を満たす） */
  background: var(--mu-ink, var(--mu)); color: #fff; font-weight: 500; font-size: 11.5px;
}
/* 目的タグ（観る／体験する／食べる／映え）はサイトの表示から外した
   （依頼者指示 2026-08-26）。エリアの表示（.tp-area）は残す。 */


/* ============================================================ 固定の操作 */
/* PC でも動画の枠に沿わせる。フレーム幅の中央寄せ */
.tp-chrome {
  position: absolute; inset: 0; z-index: 5;
  width: var(--tp-w); margin-inline: auto; pointer-events: none;
}
.tp-chrome > * { pointer-events: auto; }

/* Short にヘッダーは無いので、実装どおり個別に置く（component-map §2-b） */
.tp-b {
  position: absolute; z-index: 6;
  display: inline-flex; align-items: center; gap: 6px; justify-content: center;
  width: 32px; height: 32px; padding: 4px; border-radius: 50%;
  background: rgba(46, 44, 51, .4);      /* icon black #2E2C33 の 40%（実装の実測値） */
  color: #fff;
}
.tp-b svg { width: 24px; height: 24px; }
/* 見た目は実装どおり 32px のまま、当たり判定だけ 44px に広げる（ブランドガイド p11） */
.tp-b::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 44px; height: 44px; transform: translate(-50%, -50%);
}
/* 上に残すのは「もどる」と「使い方」だけ。
   絞り込みは外し、音の切り替えは下の操作列へ移した（依頼者指示 2026-08-26） */
.tp-back   { left: var(--tp-pad); top: var(--tp-pad); }
.tp-help   { right: var(--tp-pad); top: var(--tp-pad); }   /* 実装の top:16 right:16 */

/* ---- ControllerArea ＋ SeekArea
   左から 再生／音／シークバー／旅ポケット の1行（依頼者指示 2026-08-26）。
   フッターの列（.tp-footer）は無くなったので、ここが最下段になる */
.tp-ctl {
  position: absolute; left: 0; right: 0; z-index: 6;
  bottom: calc(14px + env(safe-area-inset-bottom));
  padding: 0 var(--tp-pad);
  display: flex; align-items: center; gap: 10px;
}
.tp-c {
  flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center; color: #fff;
  transition: background var(--default-transition);
}
.tp-c:hover { background: rgba(255, 255, 255, .14); }
.tp-c svg { width: 26px; height: 26px; fill: currentColor; }
.tp-c .ic-pause, .tp-c.is-playing .ic-play { display: none; }
.tp-c.is-playing .ic-pause { display: block; }
.tp-c .ic-on { display: none; }
.tp-c[aria-pressed="false"] .ic-off { display: none; }
.tp-c[aria-pressed="false"] .ic-on { display: block; }
/* 旅ポケットだけは文字を添える。中身を見にいく入口だと分かるように */
.tp-c-pk {
  width: auto; min-width: 44px; height: 44px; padding: 0 14px; border-radius: var(--r-pill);
  display: inline-flex; align-items: center; gap: 7px;
  background: rgba(46, 44, 51, .55); font-size: 13px; font-weight: 500;
}
.tp-c-pk:hover { background: rgba(46, 44, 51, .74); }
.tp-c-i { font-size: 15px; line-height: 1; }
.tp-c-l { white-space: nowrap; }
.tp-c-n[hidden] { display: none; }
.tp-c-n {
  min-width: 20px; height: 20px; padding: 0 5px; border-radius: var(--r-pill);
  display: inline-grid; place-items: center; font-size: 11.5px; font-weight: 700;
  background: var(--custom-style-stock-folder-badge-bg-color);
  color: var(--custom-style-stock-folder-badge-text-color);
}
.tp-seek {
  position: relative; flex: 1 1 auto; min-width: 0; height: 3px; border-radius: var(--r-2);
  background: rgba(255,255,255,.28);
}
.tp-seek-b {
  position: absolute; left: 0; top: 0; bottom: 0; width: 0%;
  border-radius: var(--r-2); background: var(--custom-style-seekbar-color);
}
.tp-seek-p {
  position: absolute; top: 50%; left: 0;
  width: var(--tig-seek-point-size); height: var(--tig-seek-point-size);
  margin-left: calc(var(--tig-seek-point-size) / -2); border-radius: 50%;
  background: var(--custom-style-seekbar-color); transform: translateY(-50%);
}

/* ---- FooterArea は無くなった（依頼者指示 2026-08-26）。
   「しおりにする」と「30 / 37」の件数表示を外し、旅ポケットは操作列に移した。
   旅ポケットの中身（StockArea）で使う .tp-sw* は下のシート側で定義する */

/* ---- LoadingArea */
.tp-loading {
  position: absolute; left: 0; right: 0; top: 45%; z-index: 7;
  height: 80px; display: flex; align-items: center; justify-content: center; gap: 10px;
  background: rgba(0,0,0,.25);
}
.tp-loading[hidden] { display: none; }
.tp-loading span {
  width: 9px; height: 9px; border-radius: 50%; background: #fff;
  animation: tp-bounce .8s ease-in-out infinite;
}
.tp-loading span:nth-child(1) { animation-delay: -.18s; }
.tp-loading span:nth-child(2) { animation-delay: -.09s; }
@keyframes tp-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-11px); } }

/* ============================================================ 暗幕 */
/* TutorialArea / PlaylistSwipeTutorial は実装どおり .64。
   HelpLayer の .3 とは揃っていないが、濃い方に寄せた（feed.css 冒頭の注記） */
.tp-tutorial, .tp-swipe {
  position: absolute; inset: 0; z-index: 20; background: rgba(0,0,0,.64);
  display: flex; align-items: center; justify-content: center; padding: 24px;
}
.tp-tutorial[hidden], .tp-swipe[hidden] { display: none; }
.tp-tutorial-in, .tp-swipe-in { width: 100%; max-width: 340px; text-align: center; }
.tp-tutorial-h { font-family: var(--serif); font-size: 20px; font-weight: 600; margin-bottom: 16px; }
.tp-tutorial-l { text-align: left; font-size: 14px; line-height: 1.9; }
.tp-tutorial-l li { position: relative; padding-left: 22px; margin-bottom: 10px; }
.tp-tutorial-l li::before {
  content: counter(list-item); position: absolute; left: 0; top: 5px;
  width: 16px; height: 16px; border-radius: 50%; font-size: 10px; line-height: 16px;
  text-align: center; background: rgba(255,255,255,.22);
}
.tp-swipe-ic { display: block; font-size: 34px; animation: tp-up 1.6s ease-in-out infinite; }
@keyframes tp-up { 0%, 100% { transform: translateY(6px); opacity: .5; } 50% { transform: translateY(-6px); opacity: 1; } }
.tp-swipe-in p { margin-top: 10px; font-size: 15px; }
.tp-ok {
  margin-top: 22px; min-height: 48px; padding: 0 30px; border-radius: var(--r-pill);
  background: #fff; color: #16141C; font-weight: 500;
}

/* ============================================================ シート（modal_base） */
/* 実装は wrapper padding-top 48 ／ contents radius 8 ／ 幅 80%（SP 90%）／ 最大高 78.5% */
.tp-sheet {
  position: absolute; inset: 0; z-index: 30;
  display: flex; align-items: flex-end; justify-content: center;
  padding: 48px 0 0; background: rgba(0,0,0,.5);
}
.tp-sheet[hidden] { display: none; }
.tp-sheet-in {
  width: 100%; max-width: 588px; max-height: 78.5%;
  display: flex; flex-direction: column;
  background: var(--bg-color-common); border-radius: var(--r-16) var(--r-16) 0 0;
  animation: sheet-up .34s var(--e-out-quint) both;
}
@keyframes sheet-up { from { transform: translateY(14px); opacity: 0; } }
.tp-sheet-h {
  flex: 0 0 auto; min-height: 52px; padding: 12px 16px 12px 20px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  border-bottom: 1px solid #171717;     /* ShareArea .menu-header の実測値 */
  font-size: 14px; font-weight: 500;
}
.tp-sheet-b { flex: 1 1 auto; overflow-y: auto; padding: 18px 20px 20px; }
.tp-sheet-f {
  flex: 0 0 auto; padding: 14px 20px calc(16px + env(safe-area-inset-bottom));
  border-top: 1px solid #171717; display: grid; gap: 10px;
}
.tp-x {
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  font-size: 26px; line-height: 1; background: rgba(255,255,255,.08);
}

/* ---- スポットカード（WF-3②） */
/* 施設詳細のポップアップ（.tp-pop / .tc-*）は **spotcard.css** に移した。
   縦型フィードとスポットを選ぶ画面の両方で同じ実体を使うため（依頼者指示 2026-08-26）。
   このページも spotcard.css を読む。StockArea（.tp-stock）も器は .tp-pop を借りている */


/* ---- 絞り込み */
.tf-g + .tf-g { margin-top: 20px; }
.tf-h { font-size: 12px; letter-spacing: .08em; color: rgba(255,255,255,.66); margin-bottom: 10px; }
.tp-sheet .chips { display: flex; flex-wrap: wrap; gap: 8px; }
.tp-sheet .chip {
  position: relative; display: inline-flex; align-items: center; height: 38px; padding: 0 15px;
  border: 1px solid rgba(255,255,255,.34); border-radius: var(--r-pill);
  font-size: 13px; font-weight: 500; color: #fff; white-space: nowrap;
  transition: background var(--default-transition), color var(--default-transition);
}
.tp-sheet .chip::after {
  content: ""; position: absolute; left: 0; right: 0; top: 50%;
  transform: translateY(-50%); height: 44px;
}
.tp-sheet .chip[aria-pressed="true"] { background: #fff; color: #16141C; border-color: #fff; }
.tp-sheet-n {
  flex: 0 0 auto; padding: 12px 20px calc(16px + env(safe-area-inset-bottom));
  border-top: 1px solid #171717; font-size: 13px; color: rgba(255,255,255,.82);
}

/* ---- StockArea（旅ポケット） */
/* ---- 旅ポケット。**トップの引き出し（style.css の .pk）と同じ組み**にそろえた
   （依頼者指示 2026-08-26）。器は .tp-pop を共用し、中身だけここで書く。
   プレーヤーは暗色だが、この面はサイト本体の言葉づかいに戻す。 */
.tp-stock .tp-pop-in { max-width: 400px; }
.ts-head {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between;
  padding: 18px 12px 12px 22px; border-bottom: 1px solid var(--ink-hair);
}
.ts-t {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--serif); font-weight: 500; font-size: 17px;
  letter-spacing: .06em; color: var(--navy);
}
.ts-c {
  min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px;
  display: inline-grid; place-items: center;
  background: var(--cta); color: #fff; font-family: var(--en); font-size: 12px;
}
.ts-x {
  width: 44px; height: 44px; font-size: 22px; line-height: 1; color: var(--ink-mid);
  transition: color var(--default-transition);
}
.ts-x:hover { color: var(--navy); }

.ts-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 14px 22px 4px; }
.tp-stock-g + .tp-stock-g { margin-top: 18px; }
.tp-stock-gt {
  display: flex; align-items: center; gap: 8px; margin-bottom: 6px;
  font-size: 11.5px; font-weight: 500; letter-spacing: .12em; color: var(--mu, var(--ink-mid));
}
/* エリアの色は縦の棒で示す。トップの .pk-gt と同じ見え方 */
.tp-stock-gt::before {
  content: ""; width: 3px; height: 12px; border-radius: 2px;
  background: var(--mu, var(--navy)); flex: 0 0 auto;
}
.tp-stock-i {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 0; border-top: 1px solid var(--ink-hair);
}
.tp-stock-i:first-of-type { border-top: 0; }
.tp-stock-n { flex: 1; font-size: 13.5px; font-weight: 500; line-height: 1.5; color: var(--navy); }
.tp-stock-l { font-size: 11.5px; color: var(--ink-mid); white-space: nowrap; }
.tp-stock-rm {
  width: 44px; height: 44px; margin-right: -12px; flex: 0 0 auto;
  font-size: 15px; color: var(--ink-mid);
  transition: color var(--default-transition);
}
.tp-stock-rm:hover { color: var(--terra); }

.ts-empty { flex: 0 0 auto; padding: 6px 22px 12px; font-size: 13px; line-height: 1.95; color: var(--ink-soft); }
.ts-empty[hidden] { display: none; }
.ts-foot {
  flex: 0 0 auto; padding: 14px 22px calc(18px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--ink-rule);
}
.ts-note { font-size: 12px; line-height: 1.8; color: var(--terra); margin-bottom: 10px; }
.ts-note:empty { display: none; }

/* ---- ShareArea。実装は h276 ／ max-width 588 */
.tp-share .tp-sheet-in { min-height: 276px; }
.tp-share-t { font-family: var(--serif); font-size: 17px; font-weight: 600; margin-bottom: 14px; }
.tp-share-row { display: flex; gap: 8px; }
.tp-share-i {
  flex: 1 1 auto; min-width: 0; height: 48px; padding: 0 14px;
  border: 1px solid rgba(255,255,255,.3); border-radius: var(--r-8);
  background: rgba(255,255,255,.06); color: #fff; font: inherit; font-size: 13px;
}
.tp-share-c {
  flex: 0 0 auto; height: 48px; padding: 0 20px; border-radius: var(--r-8);
  background: #fff; color: #16141C; font-weight: 500; font-size: 14px;
}

/* ---- StockToastArea。実装は width 219 ／ padding 4 ／ radius 8 */
.tp-toast {
  position: absolute; z-index: 88;   /* 詳細ポップアップ（85）より上。結果の知らせは必ず見える */ left: 50%; bottom: 128px; transform: translateX(-50%);
  width: 219px; padding: 10px 4px; border-radius: var(--r-8); text-align: center;
  background: var(--custom-style-card-animation-bg-color);
  color: var(--custom-style-card-animation-text-color);
  font-size: 12.5px; line-height: 1.6;
  animation: toast-in .3s var(--e-out-quint) both;
}
.tp-toast[hidden] { display: none; }
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 8px); } }

/* ---- 保存ナッジ（WF-3③）。保存3件で「作れます」を出す */
.tp-nudge {
  /* シート（z 30）より下に置く。上にすると、開いている絞り込みや
     ポケットの操作をナッジが塞ぐ（2026-08-20 実操作で判明） */
  position: absolute; z-index: 25; left: var(--tp-pad); right: var(--tp-pad); bottom: 122px;
  max-width: 420px; margin-inline: auto;
  padding: 16px 44px 16px 18px; border-radius: var(--r-12);
  background: var(--custom-style-card-bg-color); color: var(--custom-style-card-text-color);
  box-shadow: 0 18px 40px rgba(0,0,0,.42);
  animation: nudge-in .45s var(--e-out-quint) both;
}
.tp-nudge[hidden] { display: none; }
@keyframes nudge-in { from { opacity: 0; transform: translateY(12px); } }
.tp-nudge-t { font-size: 14px; font-weight: 500; line-height: 1.7; }
.tp-nudge-a {
  display: inline-flex; align-items: center; min-height: 44px; margin-top: 2px;
  color: var(--custom-style-seekbar-color); font-weight: 500; font-size: 14px;
}
.tp-nudge-x {
  position: absolute; right: 4px; top: 4px; width: 44px; height: 44px;
  display: grid; place-items: center; font-size: 20px; color: rgba(30,47,82,.6);
}

/* ============================================================ 画面幅 */
/* Short は縦型フルスクリーン専用（foundations §4）。PC でも軸を変えず、
   9:16 の枠を中央に置いて左右を黒で埋める。 */
@media (min-width: 769px) {
  .tp-body::before {
    /* 枠の外にサイト名を出す。真っ黒だと、どのサイトを見ているか分からなくなる */
    content: "大阪文化回廊 STORIES OSAKA 2026";
    position: fixed; left: 28px; top: 26px; z-index: 1;
    font-size: 12px; letter-spacing: .14em; color: rgba(255,255,255,.42);
  }
  .tp-frame { border-radius: var(--r-16); overflow: hidden; }
  .tp-item { padding: 0; }
}

/* 字幕は Short の分岐（768px）に合わせる。PC 20px / SP 15px */
@media (max-width: 768px) {
  .tp-sub { font-size: 15px; }
  .tp-t { font-size: 20px; }
  .tp-sheet-in { max-width: none; }
}

@media (max-height: 620px) {
  /* 低い画面では積み木が高くなりすぎる。字幕を1行に抑える */
  .tp-bottom { gap: 10px; }
  .tp-sub { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important;
      transition-duration: .001ms !important; }
  .tp-feed { scroll-behavior: auto; }
}

/* ============================================================ 実写差し込みモード */
/* build_site.py --pending のときだけ出る。許諾確認前の写真を差し込んでいる印。
   画面のいちばん上に固定するので、上から撮ったスクリーンショットには必ず写る。
   配布用のビルド（引数なし）には、この帯もマークアップごと入らない。 */
.pending-bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 6px 16px; background: #BE2814; color: #fff;
  font-family: var(--sans); font-size: 11.5px; line-height: 1.6; letter-spacing: .04em;
}
.pending-bar b { font-weight: 700; }
.pending-bar b:first-child {
  padding: 1px 8px; border-radius: 3px; background: rgba(255, 255, 255, .18);
}
.pending-bar span { margin-left: auto; opacity: .82; }