/* products-parts-v1 — PRODUCTS の共通部品（ホームの予告と products.html の両方で使う）。2026-09-28。
   方針（オーナー 2026-09-28）
     「HUBはチケット以外にもカレンダーとか日程調整とかいろいろ機能があるからそれもできること見せたい」
     「STUDIOもタイムスタンプ機能があることがわからない」
     「スタジオのサムネは、INSHUとBAUHAUSとおはVのカラーブロック、CHMLABを使って」
   ・ホームの予告と products.html は同じ部品を使う（予告で見たものが、遷移先で大きくなって現れる）。
   ・帯の地と、帯の中の色は各製品の本物のリポジトリの値だけ（ブランド契約 §2「PRODUCTS の例外」）。書体はサイトの2書体のまま。
   ・画面は製品のコードから忠実に組み直したもの。見本の値は製品自身の見本（STUDIO: LP の timestampSample、
     HUB: dev-marketing / dev-calendar の見本）で、HUB の告知画像と同じ注記「実際の画面をもとに構成 / 表示データはサンプル」を付ける。
   ・余白は 8u（docs/DESIGN-DETAIL-STANDARD.md）。製品の画面の内側の寸法は、製品のコードの値（px）をそのまま写す。 */

/* ================= 0. 帯（採用済みの値、products-bands-v1 と同じ） ================= */
.pv-band {
  position: relative;
  isolation: isolate;
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 96px var(--site-gutter, max(var(--page-pad, 24px), calc((100vw - var(--site-max, 1168px)) / 2))) 94px;   /* 帯の端 → 最初の文字 96、最後のインク → 帯の端 96（最後の行の字面の下 2 を引いて 94） */
}
.pv-band *, .pv-band *::before, .pv-band *::after { box-sizing: border-box; }
.pv-band { word-break: auto-phrase; line-break: strict; }            /* 和文を文節で折り返す（語の途中で切らない） */
.pv-band::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0 auto 0 50%;
  width: 100vw;
  transform: translateX(-50%);
  pointer-events: none;
}
/* STUDIO：vapor-studio の LP の地 #09090f（tailwind.config.ts:26）に、CTA の金の洗い bg-accent-gold/[0.10]（LandingPage.tsx:622）＝ #1d1a16 */
.pv-band--studio::before { background: linear-gradient(rgba(212, 179, 85, 0.1), rgba(212, 179, 85, 0.1)), #09090f; }
/* HUB：vapor-hub の --surface-hover #1b1e27（globals.css:46）＋ LP の青写真の格子（HomeLanding.module.css:8-18） */
.pv-band--hub::before { background: #1b1e27; }
.pv-band--hub::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0 auto 0 50%;
  width: 100vw;
  transform: translateX(-50%);
  pointer-events: none;
  background:
    linear-gradient(rgba(255, 255, 255, 0.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.018) 1px, transparent 1px);
  background-size: 64px 64px;
  /* 升目はページの左のガターから数える。background-position の % は画像との差の割合になるので、--site-gutter（100% 基準）ではなく
     画面の幅から同じ値を求める。最初の横線は帯の端の 32 下（境目に線を置かない） */
  background-position: left max(var(--site-pad, 24px), calc((100vw - var(--site-max, 1168px)) / 2)) top 32px;
  -webkit-mask-image: linear-gradient(to bottom, #000, transparent 78%);
  mask-image: linear-gradient(to bottom, #000, transparent 78%);
}
@media (max-width: 767px) { .pv-band { padding-block: 64px 62px; } }

/* 帯の中の色（各リポジトリの値） */
.pv-band--studio {
  --pv-ink: #ffffff;                         /* 見出し text-white（LandingPage.tsx:575） */
  --pv-ink-2: rgba(255, 255, 255, 0.55);     /* リード white/55（:178） */
  --pv-ink-3: rgba(255, 255, 255, 0.42);     /* 補助 white/42（:134） */
  --pv-kicker: rgba(232, 207, 122, 0.7);     /* KickerRow gold-light/70（:56） */
  color: var(--pv-ink);
}
.pv-band--hub {
  --pv-ink: #f8fafc;                         /* ink（HomeLanding.module.css:222） */
  --pv-ink-2: #aeb6c5;                       /* ヒーローのリード（:237） */
  --pv-ink-3: #94a3b8;                       /* 補助（:251） */
  --pv-kicker: #a8afbd;                      /* eyebrow（:207） */
  color: var(--pv-ink);
}

/* ================= 1. 製品の名乗り（左の列） ================= */
.pv-id { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.pv-id .pv-kicker {
  margin: -2px 0 8px;                        /* 帯の端 → 字面 96（行の箱の上の 2 を引く） */
  font: 700 12px/16px "Zen Kaku Gothic New", sans-serif;
  letter-spacing: 0.08em;
  color: var(--pv-kicker);
}
.pv-id .pv-name {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0;
  font: 600 40px/48px "Barlow Condensed", sans-serif;
  letter-spacing: 0.04em;
  color: var(--pv-ink);
}
.pv-id .pv-name img { flex: none; width: 48px; height: 48px; }
.pv-id .pv-lead {
  margin: 12.5px 0 0;                        /* 名前の字面 → リードの字面 24（名前の行の下 5.5・リードの行の上 6 を引く） */
  font: 500 20px/32px "Zen Kaku Gothic New", sans-serif;
  letter-spacing: 0.02em;
  color: var(--pv-ink);
}
.pv-id .pv-lead span { display: block; }
.pv-id .pv-body {
  margin: 16px 0 0;
  font: 500 15px/24px "Zen Kaku Gothic New", sans-serif;
  color: var(--pv-ink-2);
}
.pv-id .pv-body span { display: block; }
/* 機能の一覧（各製品の公式の4項目。名前＋一言） */
.pv-feat { display: grid; gap: 8px; margin: 11.5px 0 0;   /* リード → 機能 24（インク） */ padding: 0; list-style: none; }
.pv-feat li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 16px; margin: 0; padding: 0; }   /* 説明が入らないときは、まとめて次の行へ */
.pv-feat b { flex: none; font: 700 14px/24px "Zen Kaku Gothic New", sans-serif; letter-spacing: 0.04em; color: var(--pv-ink); }
.pv-feat span { min-width: 0; font: 500 13px/24px "Zen Kaku Gothic New", sans-serif; color: var(--pv-ink-2); }
/* スマホ（主指揮 2026-09-28）：機能名の後に説明を同じ行で続ける。説明は縮めず（min-width: auto）、入らなければ一まとまりで次の行へ回す。
   1 行より長い説明だけは文節で折る（.pv-band の word-break: auto-phrase） */
@media (max-width: 767px) {
  .pv-feat span { min-width: auto; }
}
/* 操作リンク：サイト共通の型（.u）。Barlow 600、0.2em、1px の線を文字の行の箱の 6px 下、押せる高さ 48（products-v9 と同じ、インクから 8.5）。
   色はサイト共通の控えめな紙色（EXPLORE・OPEN はサイトの操作なので、帯の中でも製品の金にしない） */
.pv-u {
  display: inline-flex;
  align-items: flex-end;
  gap: 10px;
  min-height: 48px;
  margin: 24px 0 0;
  padding: 0 0 6px;
  border: 0;
  border-bottom: 1px solid currentColor;
  border-radius: 0;
  background: none;
  color: rgba(243, 236, 220, 0.78);           /* サイトの操作は契約の控えめな紙色（製品の金は使わない。主指揮 2026-09-28） */
  font: 600 13px/13px "Barlow Condensed", sans-serif;
  letter-spacing: 0.2em;
  text-decoration: none;
  white-space: nowrap;
}
.pv-u svg { flex: none; width: 13px; height: 13px; }
.pv-feat + .pv-u { margin-top: -11.5px; }   /* 本文 → 操作 24（インク）。押せる箱 48 は上へ伸びる */
.pv-u:hover { color: #f3ecdc; }
.pv-u:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }

/* ================= 2. 画面の図（見出し＋画面＋注記） ================= */
.pv-fig { margin: 0; min-width: 0; }
.pv-fig-label {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin: 0 0 14px;                          /* 図の見出しの字面 → 画面 16 */
  line-height: 16px;
}
.pv-fig-label .pv-en { font: 600 13px/16px "Barlow Condensed", sans-serif; letter-spacing: 0.04em; color: var(--pv-kicker); }
.pv-fig-label .pv-ja { font: 700 13px/16px "Zen Kaku Gothic New", sans-serif; letter-spacing: 0.04em; color: var(--pv-ink); }
.pv-note {
  margin: 5px 0 0;                           /* 画面 → 注記の字面 8 */
  font: 500 11px/16px "Zen Kaku Gothic New", sans-serif;
  color: var(--pv-ink-3);
}

/* ================= 3. STUDIO：タイムスタンプ（LP の TimestampShowcase をそのまま写す、LandingPage.tsx:186-232） ================= */
.pv-ts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }    /* gap-3 */
.pv-ts-card { min-width: 0; margin: 0; padding: 14px; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 8px; }  /* p-3.5 rounded-lg */
.pv-ts-card--list { background: rgba(255, 255, 255, 0.025); }
.pv-ts-card--yt { background: rgba(0, 0, 0, 0.4); }
.pv-ts-label { margin: 0; font: 500 11px/16px "Zen Kaku Gothic New", sans-serif; letter-spacing: 0.08em; color: rgba(255, 255, 255, 0.35); }  /* text-white/35（9px mono → サイトの和文 11px） */
.pv-ts-rows { display: grid; gap: 6px; margin: 10px 0 0; padding: 0; list-style: none; }   /* mt-2.5 space-y-1.5 */
.pv-ts-rows li {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 8px 10px;                                               /* px-2.5 py-2 */
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.25);
}
.pv-ts-check {                                                     /* 金の採用印（LandingPage.tsx:198-203） */
  display: flex; flex: none; align-items: center; justify-content: center;
  width: 16px; height: 16px;
  border: 1px solid rgba(212, 179, 85, 0.45);
  border-radius: 4px;
  background: rgba(212, 179, 85, 0.15);
}
.pv-ts-check::after { content: ""; width: 6px; height: 6px; border-radius: 1px; background: #e8cf7a; }
.pv-ts-time { flex: none; font: 600 13px/16px "Barlow Condensed", sans-serif; font-variant-numeric: tabular-nums; letter-spacing: 0.04em; color: rgba(232, 207, 122, 0.85); }
.pv-ts-cap { min-width: 0; overflow: hidden; font: 500 13px/16px "Zen Kaku Gothic New", sans-serif; color: rgba(255, 255, 255, 0.75); white-space: nowrap; text-overflow: ellipsis; }
.pv-ts-ythead { display: flex; align-items: center; gap: 8px; padding-bottom: 8px; border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
.pv-ts-ythead::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: rgba(239, 68, 68, 0.8); }   /* bg-red-500/80 */
.pv-ts-ch { display: grid; gap: 6px; margin: 12px 0 0; padding: 0; list-style: none; }
.pv-ts-ch li { display: flex; gap: 8px; margin: 0; font: 500 13px/20px "Zen Kaku Gothic New", sans-serif; color: rgba(255, 255, 255, 0.7); }
.pv-ts-ch .pv-ts-time { color: rgba(125, 211, 252, 0.8); line-height: 20px; }   /* text-sky-300/80 */

/* ================= 4. STUDIO：テンプレート ================= */
/* 4 枚を同じ高さのまま、列の幅にぴったり満たす（オーナー 2026-09-28「スタジオのバナーの画像の配置が悪いな。真ん中にすごい隙間ある」）。
   高さを h とすると、サムネ 1 枚 = 16/9·h、ポスト 1 枚 = 4/5·h。列の幅 W = (2·16/9 + 2·4/5)·h + 16 + 16 + 32。
   よって、サムネの組 = (W − 64)·160/232 + 16、ポストの組 = (W − 64)·72/232 + 16。隙間は固定の値だけ（組の中 16、組の間 32）。
   左端は左のガター、右端は右のガター。原寸 480 の上限は外す（主指揮の判断。1920 で約 1.07 倍） */
.pv-tpl {
  display: grid;
  grid-template-columns: calc((100% - 64px) * 0.689655 + 16px) calc((100% - 64px) * 0.310345 + 16px);
  column-gap: 32px;
  align-items: start;
  min-width: 0;
}
.pv-tpl-group { margin: 0; min-width: 0; }
.pv-tpl-row { display: flex; gap: 16px; }
.pv-tpl-item { flex: 1 1 0; min-width: 0; margin: 0; }
.pv-tpl-item img { display: block; width: 100%; height: auto; border-radius: 2px; }
.pv-tpl-item figcaption { margin: 6px 0 0;   /* 画像 → 名前の字面 8 */ font: 500 12px/16px "Zen Kaku Gothic New", sans-serif; color: var(--pv-ink-2); }
/* スマホ：2 つの組を上下に積む（組の中の 2 枚は同じ幅で、列いっぱい） */
@media (max-width: 767px) {
  .pv-tpl { grid-template-columns: minmax(0, 1fr); row-gap: 24px; }
  .pv-tpl-row { gap: 12px; }
}

/* ================= 5. HUB：画面の器（アプリの地 #0b0c0f、business-shell.css:6。角は --radius-sharp 2px、線は --hairline） ================= */
.pv-screen {
  min-width: 0;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 2px;
  background: #0b0c0f;
  color: #f1f5f9;
  font-family: "Zen Kaku Gothic New", sans-serif;
}
/* 抽象の図（オーナー 2026-09-28「HUBに具体的っぽい予定とか架空の人物の名前使わないでくれ」）。
   製品の画面の形と、製品の UI の語（列の名前・優先度・曜日・○△×・項目名・状態）だけで見せる。
   人は名前のない丸（アバターの形）、題は細い棒。読み込み中の骨組みに見えないよう、棒は細く（題 6・補助 4）長さを変え、
   本物のチップの色（優先度・ボード・予定の色）と状態の変化（列の移動・確定）で生きた画面にする。 */
.pv-bar { display: inline-block; flex: 0 1 auto; width: var(--w, 64px); max-width: 100%; height: 6px; border-radius: 3px; background: rgba(226, 232, 240, 0.38); }
.pv-bar--sub { height: 4px; border-radius: 2px; background: rgba(148, 163, 184, 0.32); }
.pv-av { display: inline-block; flex: none; width: 20px; height: 20px; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 50%; background: #1b1e27; }
.pv-av--rv { border-color: rgba(139, 92, 246, 0.4); }                     /* レビュアーの丸の枠（KanbanBoard.tsx:1152） */
.pv-avs { display: inline-flex; }
.pv-avs .pv-av { width: 18px; height: 18px; box-shadow: 0 0 0 2px #0b0c0f; }   /* ring-2 ring-surface */
.pv-avs .pv-av + .pv-av { margin-left: -6px; }

/* チケットのカード（KanbanBoard.tsx:586-619, 808-1035。題・ボード名・タグ・日付・人は棒と丸に） */
.pv-tk {
  display: grid;
  flex: none;
  gap: 10px;
  min-width: 0;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-left: 4px solid #d4b355;                                  /* 優先度 高 = accent-gold（:586-590） */
  border-radius: 2px;
  background: rgba(20, 22, 29, 0.6);                               /* bg-surface-light/60 */
}
.pv-tk[data-priority="mid"] { border-left-color: rgba(139, 92, 246, 0.4); }   /* 中 = secondary/40 */
.pv-tk[data-priority="low"] { border-left-color: rgba(255, 255, 255, 0.05); } /* 低 = white/5 */
.pv-tk-top { display: flex; align-items: flex-start; gap: 8px; min-width: 0; }
.pv-tk-title { display: grid; flex: 1; gap: 7px; min-width: 0; padding-top: 7px; }
.pv-tk-pri { flex: none; display: inline-flex; align-items: center; min-height: 20px; padding: 1px 6px; border: 1px solid rgba(212, 179, 85, 0.4); border-radius: 2px; background: rgba(212, 179, 85, 0.2); color: #e8cf7a; font: 600 11px/1 "Zen Kaku Gothic New", sans-serif; letter-spacing: 0.025em; }
.pv-tk[data-priority="mid"] .pv-tk-pri { border-color: rgba(139, 92, 246, 0.4); background: rgba(139, 92, 246, 0.15); color: #a78bfa; }
.pv-tk[data-priority="low"] .pv-tk-pri { border-color: rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.05); color: #94a3b8; }
.pv-tk-meta { display: flex; align-items: center; gap: 8px; min-width: 0; min-height: 16px; }
.pv-tk-board { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.pv-tk-board > i:first-child { flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--dot, #d4b355); }
.pv-tk-tag { display: inline-flex; flex: none; align-items: center; gap: 3px; padding: 3px 5px; border-radius: 2px; background: rgba(255, 255, 255, 0.05); color: #94a3b8; font: 600 10px/1 "Barlow Condensed", sans-serif; }
.pv-tk-tag .pv-bar { width: var(--w, 18px); height: 3px; background: rgba(148, 163, 184, 0.4); }
.pv-tk-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; align-items: center; }
.pv-tk-person { display: flex; align-items: center; gap: 6px; min-width: 0; line-height: 1; }
.pv-tk-person > span:first-child { flex: none; width: 60px; font: 500 11px/1 "Zen Kaku Gothic New", sans-serif; letter-spacing: 0.05em; color: #64748b; white-space: nowrap; }
.pv-tk-person[data-tone="reviewer"] > span:first-child { color: #a78bfa; }   /* text-secondary-light */
.pv-tk-counts { display: flex; justify-content: flex-end; gap: 8px; color: #64748b; font: 600 13px/20px "Barlow Condensed", sans-serif; }
.pv-tk-counts span { display: inline-flex; align-items: center; gap: 2px; }
.pv-tk-counts svg { width: 13px; height: 13px; }

/* カンバン（列 4 本、KanbanBoard.tsx:90-99, 517-582）。列の中は製品と同じくスクロールする領域なので、画面の下端で切れる */
.pv-kb-screen { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.pv-kb { display: grid; flex: 1 1 auto; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; min-height: 0; }
.pv-kb-col { display: flex; flex-direction: column; gap: 8px; min-width: 0; min-height: 0; overflow: hidden; }
.pv-kb-head { display: flex; flex: none; align-items: center; justify-content: space-between; gap: 6px; min-height: 44px; padding: 6px 12px; border: 1px solid; border-radius: 2px; }
.pv-kb-head b { font: 600 14px/1 "Zen Kaku Gothic New", sans-serif; color: #f1f5f9; white-space: nowrap; }
.pv-kb-head > span { display: inline-flex; align-items: center; gap: 6px; }
.pv-kb-n { min-width: 22px; padding: 2px 8px; border-radius: 9999px; background: rgba(0, 0, 0, 0.2); color: #cbd5e1; font: 600 12px/16px "Barlow Condensed", sans-serif; text-align: center; }
.pv-kb-stall { padding: 2px 8px; border-radius: 9999px; background: rgba(251, 191, 36, 0.1); color: #fcd34d; font: 500 11px/16px "Zen Kaku Gothic New", sans-serif; white-space: nowrap; }   /* 「滞留 N」（:562-566） */
.pv-kb-col[data-status="todo"] .pv-kb-head { background: rgba(148, 163, 184, 0.2); border-color: rgba(148, 163, 184, 0.4); }
.pv-kb-col[data-status="in_progress"] .pv-kb-head { background: rgba(96, 165, 250, 0.2); border-color: rgba(96, 165, 250, 0.4); }
.pv-kb-col[data-status="review"] .pv-kb-head { background: rgba(245, 158, 11, 0.2); border-color: rgba(245, 158, 11, 0.4); }
.pv-kb-col[data-status="done"] .pv-kb-head { background: rgba(16, 185, 129, 0.2); border-color: rgba(16, 185, 129, 0.4); }
/* スマホの状態のタブ（状態名＋件数、KanbanBoard.tsx:284-342）は 767 以下だけ */
.pv-kb-tabs { display: none; }
@media (max-width: 767px) {
  .pv-kb-tabs { display: grid; flex: none; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; margin-bottom: 12px; }
  .pv-kb-tabs span { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 2px; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 2px; color: #94a3b8; font: 600 12px/1.2 "Zen Kaku Gothic New", sans-serif; }
  .pv-kb-tabs span b { font: 600 12px/1 "Barlow Condensed", sans-serif; }
  .pv-kb-tabs span[data-on] { border-color: rgba(96, 165, 250, 0.4); background: rgba(96, 165, 250, 0.2); color: #f1f5f9; }
  .pv-kb { grid-template-columns: minmax(0, 1fr); }
  .pv-kb-col:not([data-status="in_progress"]) { display: none; }
}

/* カレンダー（CalendarView.tsx:463-563、CalendarMonth.tsx。予定の色はパレット 12 色から、colors.ts の eventStyle を実行した値） */
.pv-cal-screen { display: flex; flex-direction: column; min-height: 0; }
.pv-cal-head { display: flex; flex: none; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 12px; }
.pv-cal-btns, .pv-cal-chips, .pv-cal-tabs { display: flex; gap: 4px; }
.pv-cal-tabs { margin-left: auto; }
.pv-cal-btns span, .pv-cal-chips span, .pv-cal-tabs span {
  display: inline-flex; align-items: center; justify-content: center; min-width: 28px; height: 28px; padding: 0 8px;
  border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 2px; color: #cbd5e1; font: 500 12px/1 "Zen Kaku Gothic New", sans-serif; white-space: nowrap;
}
.pv-cal-chips span[data-on] { border-color: rgba(212, 179, 85, 0.6); background: rgba(212, 179, 85, 0.15); color: #e8cf7a; }   /* 締切：金の枠と金 15% の地（:783-785） */
.pv-cal-tabs span[data-on] { border-color: transparent; background: rgba(139, 92, 246, 0.22); color: #f1f5f9; }            /* 選択中：紫 22% の地 */
.pv-cal { display: grid; flex: 1 1 auto; grid-template-columns: repeat(7, minmax(0, 1fr)); grid-template-rows: auto; grid-auto-rows: minmax(64px, 1fr); border: 1px solid rgba(255, 255, 255, 0.05); border-radius: 2px; min-height: 0; }
.pv-cal-wd { padding: 8px; background: rgba(20, 22, 29, 0.4); border-bottom: 1px solid rgba(255, 255, 255, 0.05); color: #cbd5e1; text-align: center; font: 600 11px/1 "Zen Kaku Gothic New", sans-serif; letter-spacing: 0.1em; }
.pv-cal-wd:nth-child(7n + 1) { color: #fca5a5; }   /* 日 red-300 */
.pv-cal-wd:nth-child(7n) { color: #93c5fd; }       /* 土 blue-300 */
.pv-cal-d { position: relative; display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 4px 2px; border-right: 1px solid rgba(255, 255, 255, 0.05); border-bottom: 1px solid rgba(255, 255, 255, 0.05); overflow: hidden; }
.pv-cal-d:nth-child(7n) { border-right: 0; }
.pv-cal-d[data-sel] { background: rgba(139, 92, 246, 0.15); box-shadow: inset 0 0 0 1px rgba(139, 92, 246, 0.6); }   /* 選択日（:345-355） */
.pv-cal-n { align-self: flex-start; display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; margin: 0 0 2px 4px; border-radius: 9999px; background: #0b0b10; color: #cbd5e1; font: 600 12px/1 "Barlow Condensed", sans-serif; font-variant-numeric: tabular-nums; }
.pv-cal-d:nth-child(7n + 1) .pv-cal-n { color: #fca5a5; }
.pv-cal-d:nth-child(7n) .pv-cal-n { color: #93c5fd; }
.pv-cal-n[data-today] { background: #d4b355; color: #08090c; }                                            /* 今日：金の塗り丸に暗い文字（:357-379） */
.pv-ev { display: flex; flex: none; align-items: center; gap: 6px; min-width: 0; min-height: 28px; padding: 4px 6px; border-radius: 4px; overflow: hidden; }
.pv-ev .pv-av { width: 16px; height: 16px; }
.pv-ev .pv-bar { height: 5px; background: rgba(255, 255, 255, 0.62); }
.pv-ev[data-c="purple"]  { background: rgb(42, 34, 67);  border-left: 3px solid rgb(168, 148, 239); }   /* #8b5cf6 */
.pv-ev[data-c="cyan"]    { background: rgb(2, 54, 64);   border-left: 3px solid rgb(14, 184, 214); }    /* #06b6d4 */
.pv-ev[data-c="blue"]    { background: rgb(23, 41, 71);  border-left: 3px solid rgb(115, 165, 245); }   /* #3b82f6 */
.pv-ev[data-c="emerald"] { background: rgb(7, 55, 37);   border-left: 3px solid rgb(70, 190, 140); }    /* #10b981 */
.pv-ev[data-c="rose"]    { background: rgb(66, 30, 46);  border-left: 3px solid rgb(227, 128, 170); }   /* #ec4899 */
.pv-ev[data-c="gold"]    { background: rgb(62, 50, 15);  border-left: 3px solid rgb(193, 161, 66); }    /* #d4b355 */
.pv-ev[data-c="due"]     { border: 1px dashed rgba(193, 161, 66, 0.65); }                              /* チケットの締切：破線枠（colors.ts:265-281、calendar/page.tsx:421-440） */
.pv-ev[data-c="due"] b { flex: none; color: #f1f5f9; font: 600 11px/1 "Zen Kaku Gothic New", sans-serif; }
.pv-ev[data-c="due"] .pv-bar { background: rgba(241, 245, 249, 0.45); }
/* スマホのカレンダー「予定」（CalendarAgenda.tsx:80-185） */
.pv-agenda { display: none; }
.pv-ag-day { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; padding: 12px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.05); }
.pv-ag-day:first-child { padding-top: 0; }
.pv-ag-day:last-child { padding-bottom: 0; border-bottom: 0; }
.pv-ag-date { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; margin: 0; padding-top: 4px; }
.pv-ag-date b { font: 600 24px/1 "Barlow Condensed", sans-serif; font-variant-numeric: tabular-nums; color: #e2e8f0; }
.pv-ag-date b[data-today] { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: #d4b355; color: #08090c; font-size: 20px; }
.pv-ag-date span { font: 600 11px/1.45 "Barlow Condensed", sans-serif; letter-spacing: 0.04em; text-transform: uppercase; color: #64748b; }
.pv-ag-date span[data-wd="sun"] { color: #fca5a5; }
.pv-ag-date span[data-wd="sat"] { color: #93c5fd; }
.pv-ag-day ul { display: grid; align-content: start; gap: 4px; margin: 0; padding: 0; list-style: none; }
.pv-ag-day .pv-ev { min-height: 36px; padding: 8px 12px; border-radius: 2px; gap: 12px; }
@media (max-width: 767px) {
  .pv-cal-screen .pv-cal { display: none; }
  .pv-cal-screen .pv-agenda { display: grid; }
  .pv-cal-screen .pv-cal-chips { display: none; }
}

/* 日程調整（一覧のカード SchedulePollCard.tsx:572-625、詳細の回答状況 825-885・自分の回答 746・実施日時 921-989） */
.pv-poll-screen { display: flex; flex-direction: column; min-height: 0; }
.pv-poll-top { display: flex; align-items: center; gap: 8px; min-width: 0; }
.pv-poll-top .pv-bar { height: 7px; }
.pv-poll-badge { flex: none; padding: 2px 8px; border: 1px solid rgba(139, 92, 246, 0.3); border-radius: 2px; background: rgba(139, 92, 246, 0.1); color: #a78bfa; font: 600 11px/1.45 "Zen Kaku Gothic New", sans-serif; letter-spacing: 0.05em; white-space: nowrap; }
.pv-poll-range { display: grid; gap: 6px; margin: 12px 0 0; font: 500 12px/18px "Zen Kaku Gothic New", sans-serif; }
.pv-poll-range > span { display: flex; align-items: center; gap: 8px; }
.pv-poll-range > span:first-child { color: #e8cf7a; }                                                    /* 候補（金） */
.pv-poll-range > span + span { color: #6ee7b7; }                                                          /* 確定（emerald-300） */
.pv-poll-range .pv-bar { height: 4px; background: currentColor; opacity: 0.55; }
.pv-poll-sum { display: flex; flex: none; align-items: center; justify-content: space-between; margin: 16px 0 8px; }
.pv-poll-sum b { font: 500 11px/1 "Zen Kaku Gothic New", sans-serif; letter-spacing: 0.1em; color: #cbd5e1; }
.pv-poll-sum span { font: 500 12px/1 "Zen Kaku Gothic New", sans-serif; color: #64748b; }
.pv-poll-t { width: 100%; table-layout: fixed; border-collapse: collapse; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 2px; text-align: left; }
.pv-poll-t thead th { padding: 8px; background: #14161d; color: #64748b; font: 500 12px/1 "Zen Kaku Gothic New", sans-serif; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06); }
.pv-poll-t thead th:first-child { width: 30%; }
.pv-poll-t tbody tr { border-top: 1px solid rgba(255, 255, 255, 0.05); vertical-align: top; }
.pv-poll-t tbody th { padding: 12px 8px; }
.pv-poll-t tbody th .pv-bar { display: block; height: 5px; }
.pv-poll-t tbody th .pv-bar + .pv-bar { margin-top: 7px; }
.pv-poll-t td { padding: 10px 8px; min-width: 0; }
.pv-poll-t td b { display: block; margin-bottom: 6px; font: 600 12px/1.4 "Zen Kaku Gothic New", sans-serif; color: #cbd5e1; white-space: nowrap; }
.pv-poll-t td > i:not(.pv-avs) { display: block; width: 8px; height: 1px; margin-top: 8px; background: #475569; }   /* 誰もいないとき「-」 */
/* 自分の回答：○ △ × の 3 ボタン、選んだものは色つき（:184-198）。凡例（:746） */
.pv-poll-mine { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; }
.pv-poll-mine .pv-bar { display: block; }
.pv-poll-btns { display: flex; gap: 4px; }
.pv-poll-btns span { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 32px; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 3px; background: rgba(255, 255, 255, 0.02); color: #94a3b8; font: 600 14px/1 "Zen Kaku Gothic New", sans-serif; }
.pv-poll-btns span[data-a="yes"][data-on] { border-color: rgba(52, 211, 153, 0.5); background: rgba(52, 211, 153, 0.15); color: #a7f3d0; }
.pv-poll-btns span[data-a="maybe"][data-on] { border-color: rgba(212, 179, 85, 0.5); background: rgba(212, 179, 85, 0.15); color: #e8cf7a; }
.pv-poll-legend { margin: 0 0 8px; color: #64748b; font: 500 12px/1 "Zen Kaku Gothic New", sans-serif; }
.pv-poll-final { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pv-poll-final > span:first-child { display: flex; flex: 1; align-items: center; gap: 8px; min-width: 0; color: #6ee7b7; font: 600 12px/1 "Zen Kaku Gothic New", sans-serif; }
.pv-poll-final .pv-bar { height: 5px; background: currentColor; opacity: 0.6; }
.pv-poll-final > span:last-child { display: inline-flex; flex: none; align-items: center; min-height: 32px; padding: 0 12px; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 2px; color: #cbd5e1; font: 500 12px/1 "Zen Kaku Gothic New", sans-serif; white-space: nowrap; }
.pv-poll-eyebrow { display: block; margin-bottom: 8px; font: 600 11px/1 "Barlow Condensed", sans-serif; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(232, 207, 122, 0.9); }
.pv-poll-eyebrow::before { content: "> "; }                                                              /* .vh-eyebrow-accent（globals.css:8686-8699） */

/* ================= 6. 動き（ページ固有の見せ場。IntersectionObserver で一度だけ。products-motion-v1.js） =================
   ・序破急の流れを一つずつ：見どころが一行ずつ並び、同じ行が概要欄に写る（STUDIO）／テンプレートが左から一続きの帯で現れる／
     日程調整の最多の候補が確定し、その予定がカレンダーに入る（HUB）／カードが「進行中」から「レビュー」へ移る（products.html）。
   ・動きを減らす設定では、すべて完成の状態で静止（JS は何もしない）。JS が無いときも完成の状態。 */
.pv-armed .pv-ts-rows li, .pv-armed .pv-ts-ch li { opacity: 0; transform: translateX(-12px); }
.pv-armed .pv-ts-check { background: transparent; }
.pv-armed .pv-ts-check::after { transform: scale(0); }
.pv-play .pv-ts-rows li, .pv-play .pv-ts-ch li { animation: pv-row-in 520ms cubic-bezier(0.2, 0.7, 0.1, 1) both; animation-delay: calc(var(--i, 0) * 260ms + 120ms); }
.pv-play .pv-ts-ch li { animation-delay: calc(var(--i, 0) * 260ms + 300ms); }
.pv-play .pv-ts-check { animation: pv-check-bg 360ms ease-out both; animation-delay: calc(var(--i, 0) * 260ms + 360ms); }
.pv-play .pv-ts-check::after { animation: pv-check-in 360ms cubic-bezier(0.3, 1.4, 0.5, 1) both; animation-delay: calc(var(--i, 0) * 260ms + 360ms); }
@keyframes pv-row-in { from { opacity: 0; transform: translateX(-12px); } to { opacity: 1; transform: none; } }
@keyframes pv-check-bg { from { background: transparent; } to { background: rgba(212, 179, 85, 0.15); } }
@keyframes pv-check-in { from { transform: scale(0); } to { transform: scale(1); } }

/* テンプレート：左から右へ一続きの帯で現れる（行全体を一つの切り抜きで開く） */
.pv-armed.pv-tpl { clip-path: inset(0 100% 0 0); }
.pv-play.pv-tpl { animation: pv-sweep 1100ms cubic-bezier(0.65, 0, 0.2, 1) both; }
.pv-play.pv-tpl img { animation: pv-settle 1400ms cubic-bezier(0.2, 0.7, 0.1, 1) both; }
@keyframes pv-sweep { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes pv-settle { from { transform: scale(1.06); } to { transform: none; } }

/* HUB：日程調整 → カレンダー。状態の文字（送信済み／確定済み、未確定／カレンダー作成済み）は、
   JS が無いとき・動きを減らす設定のときは完成の側（確定済み・カレンダー作成済み）。 */
[data-pv-state="sent"] { display: none; }
.pv-armed:not(.pv-flip) [data-pv-state="sent"] { display: inline; }
.pv-armed:not(.pv-flip) [data-pv-state="final"] { display: none; }
.pv-armed [data-pv-flow="range-final"] { opacity: 0; }
.pv-armed [data-pv-flow="event"] { opacity: 0; transform: translateY(-8px) scale(0.96); }
.pv-armed [data-pv-flow="badge"]::after { content: none; }
.pv-play [data-pv-flow="range-final"] { animation: pv-fade 400ms ease-out both; animation-delay: 1000ms; }
.pv-play [data-pv-flow="event"] { animation: pv-event-in 560ms cubic-bezier(0.2, 0.9, 0.2, 1.1) both; animation-delay: 1250ms; }
@keyframes pv-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes pv-event-in { from { opacity: 0; transform: translateY(-8px) scale(0.96); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .pv-armed .pv-ts-rows li, .pv-armed .pv-ts-ch li, .pv-armed [data-pv-flow] { opacity: 1; transform: none; }
  .pv-armed.pv-tpl { clip-path: none; }
}