/*!
 * LandingPage2 / css/demo.css
 * ------------------------------------------------------------------
 * スマホデモ（#demoScreen の中身）専用スタイル。担当A の管轄。
 * すべてのセレクタは #demoScreen 配下に限定する（landing.css 側やページ全体には一切影響しない）。
 * デザイントークンは実アプリ src/frontend/LuminaGallery/neu.js の値をそのまま転記
 * （このファイルから JS を import できないため、CSS変数として複製する。upload.css の作法を踏襲）。
 * 変数名は landing.css 側の同名変数と衝突しないよう "--fa-" prefix を付け、
 * #demoScreen 自身に定義することで「#demoScreen 配下限定」を保ったまま自己完結させる。
 * ------------------------------------------------------------------
 */

/* ── デザイントークン（#demoScreen にのみ定義。descendant はここから継承する） ── */
#demoScreen {
  --fa-bg:        #ECECEC;
  --fa-surface:   #F2F2F2;
  --fa-surface-hi:#FAFAFA;
  --fa-ink:       #2E2E2E;
  --fa-ink-soft:  #8A8A8A;
  --fa-ink-faint: #B0B0B0;
  --fa-accent:    #3D3D3D;
  --fa-danger:    #E11D48;
  --fa-line:      rgba(0,0,0,.08);

  --fa-raise:    6px 6px 14px rgba(180,180,180,.5), -6px -6px 14px rgba(255,255,255,.9);
  --fa-raise-sm: 3px 3px 8px rgba(180,180,180,.55), -3px -3px 8px rgba(255,255,255,.95);
  --fa-raise-xs: 1.5px 1.5px 4px rgba(180,180,180,.5), -1.5px -1.5px 4px rgba(255,255,255,.95);
  --fa-inset:    inset 4px 4px 9px rgba(190,190,190,.85), inset -4px -4px 9px rgba(255,255,255,.95);
  --fa-inset-sm: inset 2px 2px 5px rgba(190,190,190,.8), inset -2px -2px 5px rgba(255,255,255,.95);

  --fa-r-card: 24px;
  --fa-r-thumb: 14px;
  --fa-r-btn: 16px;
  --fa-r-pill: 999px;

  /* 実アプリ neu.js:44 の NEU.font と一致させる（末尾の system-ui, sans-serif は
     Google Fonts 未読込時のフォールバックとして残す）。数字・英字のユーティリティ表示
     （--fa-util）も実アプリでは別スタックを持たず同じ Quicksand 系を使っているため、
     ここでは同一の値にしておく。 */
  --fa-ja:  'Quicksand','M PLUS Rounded 1c','Hiragino Maru Gothic ProN',system-ui,sans-serif;
  --fa-util:'Quicksand','M PLUS Rounded 1c','Hiragino Maru Gothic ProN',system-ui,sans-serif;
}

/* ── ローカルリセット（#demoScreen 配下のみ） ── */
#demoScreen .fa-app,
#demoScreen .fa-app * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
/* button のブラウザ既定（枠線・グレー背景・OS フォント）を打ち消すリセット。
   セレクタをあえて `.fa-app` を挟まない形にしているのは CSS 詳細度のため。
   `#demoScreen .fa-app button` と書くと詳細度が (ID:1, class:1, type:1) になり、
   demo.css の大半のルール `#demoScreen .fa-xxx`（= (1,1,0)）に**ソース順と無関係に**
   勝ってしまう。その結果ピルやシートのボタンの padding / background / border /
   font-size / color が丸ごと無効化される（実際に .fa-pill 等 28 ルールが死んでいた）。
   `#demoScreen button` なら (1,0,1) になり、個別ルール側が正しく勝つ。
   `#demoScreen` 配下に限定するスコープは保たれている（直下の子は .fa-app のみ）。 */
#demoScreen button {
  border: none; background: none; padding: 0; margin: 0; font: inherit; color: inherit;
  cursor: pointer; -webkit-appearance: none; appearance: none; text-align: inherit;
}
#demoScreen .fa-app input,
#demoScreen .fa-app textarea,
#demoScreen .fa-app select { font-family: var(--fa-ja); -webkit-appearance: none; appearance: none; }
#demoScreen .fa-app img { -webkit-user-drag: none; user-select: none; display: block; max-width: none; }
#demoScreen .fa-app ::selection { background: rgba(61,61,61,.25); }

/* ── アプリ全体のルート（#demoScreen 自体のサイズ・position は landing.css 側の管轄） ── */
#demoScreen .fa-app {
  position: absolute; inset: 0; overflow: hidden;
  font-family: var(--fa-ja);
  color: var(--fa-ink);
  background: var(--fa-bg);
  -webkit-font-smoothing: antialiased;
}

/* ── 画面（gallery / videos / month / upload）── 常時マウントし、表示のみ切り替える ── */
#demoScreen .fa-screen { position: absolute; inset: 0; display: none; }
#demoScreen .fa-screen--active { display: block; }
#demoScreen .fa-scroll {
  position: absolute; inset: 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
  scrollbar-width: none; padding: 14px 14px calc(14px + 68px);
}
#demoScreen .fa-scroll::-webkit-scrollbar { display: none; }
#demoScreen .fa-scroll--upload { display: flex; align-items: flex-start; justify-content: center; padding-top: 30px; }

/* ── タブバー（写真/動画/送る。LIFF の ?path= 切替を可視化するデモ用クローム） ── */
#demoScreen .fa-tabbar {
  position: absolute; left: 0; right: 0; bottom: 0; height: 62px; z-index: 30;
  display: flex; align-items: stretch; justify-content: space-around;
  background: var(--fa-surface);
  box-shadow: 0 -2px 14px rgba(0,0,0,.08);
  border-top: 1px solid var(--fa-line);
}
#demoScreen .fa-tab {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  color: var(--fa-ink-faint); font-family: var(--fa-util); font-size: 10.5px; font-weight: 600; letter-spacing: .02em;
  transition: color .18s ease;
}
#demoScreen .fa-tab__icon { display: flex; }
#demoScreen .fa-tab__label { line-height: 1; }
#demoScreen .fa-tab--active { color: var(--fa-ink); }
#demoScreen .fa-tab--active .fa-tab__icon { color: var(--fa-accent); }

/* ── 検索窓 ──
   実アプリはスクロール連動フェード（下スクロールで消える旧UX）を廃止し、常時表示に
   統一済み（GalleryView.jsx:668-670）。デモも sticky のまま常に見える状態を保つだけにし、
   フェード用の transition / 専用クラスは持たない。 */
#demoScreen .fa-searchbar-wrap {
  position: sticky; top: 0; z-index: 12; padding-bottom: 10px; background: var(--fa-bg);
}
#demoScreen .fa-searchbar {
  display: flex; align-items: center; gap: 8px; min-height: 52px; padding: 8px 16px;
  background: var(--fa-surface); border: 1px solid var(--fa-line); border-radius: 16px;
  box-shadow: var(--fa-raise-sm); cursor: pointer;
}
#demoScreen .fa-searchbar__icon { color: var(--fa-ink-faint); display: flex; flex-shrink: 0; }
#demoScreen .fa-searchbar__chips { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; flex: 1; }
/* 検索テキスト入力（GalleryView.jsx:697 準拠）。チップと同じ行に並ぶので幅は残りを埋めるだけにし、
   チップが多い時は折り返して次の行に来られるよう min-width を絞っておく。 */
#demoScreen .fa-searchbar__input {
  flex: 1; min-width: 60px; background: transparent; border: none; outline: none;
  font-family: var(--fa-ja); font-size: 13px; font-weight: 500; color: var(--fa-ink); padding: 4px 0;
}
#demoScreen .fa-searchbar__input::placeholder { color: var(--fa-ink-faint); font-weight: 500; }

/* ChipInSearch.jsx 準拠: 枠線なし・小さめ文字・広めの letter-spacing。
   文字色・×ボタンの色はチップの種類（タグ／お気に入り／アップロード日）ごとに
   呼び出し側（demo-app.js の buildFilterChip）がインラインで指定する。 */
#demoScreen .fa-chip {
  display: inline-flex; align-items: center; gap: 4px; background: var(--fa-surface-hi);
  border: none; border-radius: 999px; padding: 3px 4px 3px 9px; box-shadow: var(--fa-raise-xs);
  font-size: 9.5px; font-weight: 700; letter-spacing: .08em; font-family: var(--fa-ja);
}
#demoScreen .fa-chip__x {
  width: 14px; height: 14px; border-radius: 50%; background: var(--fa-bg);
  display: flex; align-items: center; justify-content: center; margin-left: 1px;
}

#demoScreen .fa-empty {
  text-align: center; padding: 44px 16px; color: var(--fa-ink-soft);
  font-size: 12px; font-weight: 600; letter-spacing: .02em; font-family: var(--fa-ja);
}

/* 空状態カード（アイコン＋見出し＋CTA。GalleryView.jsx:633-644, 838-852 準拠。機能2）。
   月詳細向け（既定）は浮き出しカード、ギャラリー全体向け（--flat）は背景無しでスクロール領域に直接置く。 */
#demoScreen .fa-empty-card {
  text-align: center; padding: 40px 20px; margin: 2px 0 0;
  background: var(--fa-surface); border-radius: var(--fa-r-card); box-shadow: var(--fa-raise);
}
#demoScreen .fa-empty-card--flat { background: transparent; box-shadow: none; padding: 40px 24px 48px; }
#demoScreen .fa-empty-card__icon {
  width: 56px; height: 56px; border-radius: 50%; margin: 0 auto 16px;
  background: var(--fa-surface); box-shadow: var(--fa-inset-sm);
  display: flex; align-items: center; justify-content: center;
}
#demoScreen .fa-empty-card__heading { font-family: var(--fa-ja); font-size: 15px; font-weight: 700; color: var(--fa-ink); }
#demoScreen .fa-empty-card__sub { font-family: var(--fa-ja); font-size: 12px; color: var(--fa-ink-soft); margin-top: 6px; }
#demoScreen .fa-empty-card__cta {
  margin-top: 18px; padding: 10px 22px; border-radius: var(--fa-r-pill);
  background: var(--fa-surface); box-shadow: var(--fa-raise-sm); color: var(--fa-accent);
  font-family: var(--fa-ja); font-size: 11px; font-weight: 700; letter-spacing: .06em;
}

/* ── 月カード（一覧・ギャラリー） ── */
#demoScreen .fa-month-list { display: flex; flex-direction: column; gap: 14px; }
#demoScreen .fa-month-card { background: var(--fa-surface); border-radius: var(--fa-r-card); box-shadow: var(--fa-raise); padding: 12px; }

#demoScreen .fa-month-header { display: flex; align-items: center; gap: 8px; padding: 4px 4px 12px; user-select: none; cursor: pointer; }
#demoScreen .fa-month-header__left { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
#demoScreen .fa-chevron { display: flex; opacity: .65; color: var(--fa-ink); transform: rotate(-90deg); transition: transform .32s cubic-bezier(.22,1,.36,1); }
#demoScreen .fa-chevron--flat { transform: rotate(0deg); }
#demoScreen .fa-month-header__ym {
  font-family: var(--fa-ja); font-weight: 800; font-size: 17px; color: var(--fa-ink);
  letter-spacing: .01em; font-variant-numeric: tabular-nums;
}
#demoScreen .fa-month-header__slash { opacity: .4; font-weight: 600; font-size: .85em; padding: 0 1px; }
/* タグ横スクロール領域とその左右フェードの入れ物（MonthSection.jsx:96-109,186-202 準拠）。
   flex:1 はこちらへ移し、内側の .fa-month-header__tags は純粋なスクロール要素にする。 */
#demoScreen .fa-month-header__tags-wrap { flex: 1; min-width: 0; position: relative; }
#demoScreen .fa-month-header__tags { display: flex; gap: 8px; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
#demoScreen .fa-month-header__tags::-webkit-scrollbar { display: none; }
#demoScreen .fa-month-header__fade {
  position: absolute; top: 0; bottom: 0; width: 24px; pointer-events: none; opacity: 0;
  transition: opacity .25s ease;
}
#demoScreen .fa-month-header__fade--l { left: 0; background: linear-gradient(90deg, var(--fa-surface) 0%, rgba(242,242,242,0) 100%); }
#demoScreen .fa-month-header__fade--r { right: 0; background: linear-gradient(270deg, var(--fa-surface) 0%, rgba(242,242,242,0) 100%); }
#demoScreen .fa-iconbtn {
  flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center;
  justify-content: center; color: var(--fa-ink); opacity: .5; transition: opacity .2s ease;
}
#demoScreen .fa-iconbtn:hover { opacity: .85; }
#demoScreen .fa-month-header--pulse { animation: fa-header-pulse .56s ease; }

/* ── ピル（タグ・メモ・クイックフィルタ共通） ── */
#demoScreen .fa-pill {
  display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; white-space: nowrap;
  border-radius: 999px; padding: 5px 12px; font-size: 11.5px; font-family: var(--fa-ja); font-weight: 600;
  background: var(--fa-surface-hi); color: #5A5A5A; border: 1px solid rgba(0,0,0,.10);
  transition: transform .12s ease;
}
#demoScreen .fa-pill:active { transform: scale(.94); }
#demoScreen .fa-pill--tag { background: #fff; color: var(--fa-ink-soft); }
/* 選択中は PillTag.jsx / TagDropdown.jsx と同じ「薄いグレー地＋凹み影（inset）＋濃色文字」。
   以前の濃色グラデーション＋白文字は旧世代の表現なので廃止する。 */
#demoScreen .fa-pill--active {
  background: #DCDCDC; color: var(--fa-ink); border-color: rgba(0,0,0,.22);
  box-shadow: var(--fa-inset-sm);
}
/* お気に入りのクイックフィルタだけは選択時に赤系で強調する（TagDropdown.jsx:41-53 準拠）。
   タグ・アップローダーの標準的な選択色（薄灰）より優先させる。 */
#demoScreen .fa-pill--quick.fa-pill--active {
  background: #ff4757; color: #fff; border-color: transparent;
  box-shadow: 0 3px 10px -3px rgba(255,71,87,.55);
}
#demoScreen .fa-pill--dashed { background: transparent; border: 1px dashed rgba(0,0,0,.28); color: var(--fa-ink-soft); }
/* 検索ドロップダウンの QUICK FILTER 用ピル（お気に入り等）。通常のタグピルより
   一回り大きいタップ領域にして、単独ボタンとして押しやすくする。 */
#demoScreen .fa-pill--quick { padding: 7px 14px 7px 12px; font-weight: 700; }
#demoScreen .fa-pill__label { max-width: 160px; overflow: hidden; text-overflow: ellipsis; }
/* UPLOADED セクション（アップロード日）用ピル。実アプリの TagDropdown.jsx:64-107 は
   タグの濃灰ではなく --fa-accent の実線塗りで選択状態を示すため専用クラスにする。 */
#demoScreen .fa-pill--date {
  background: var(--fa-bg); color: var(--fa-accent); box-shadow: var(--fa-raise-xs);
  border: none; font-size: 10px; font-weight: 700; letter-spacing: .05em; padding: 4px 11px;
}
#demoScreen .fa-pill--date-active {
  background: var(--fa-accent); color: #fff; box-shadow: 0 2px 8px -2px rgba(61,61,61,.45);
  padding: 4px 10px 4px 7px;
}

/* ── 写真グリッド・セル ── */
#demoScreen .fa-photo-grid { display: grid; gap: 8px; margin-top: 2px; }
#demoScreen .fa-photo-grid--3 { grid-template-columns: repeat(3, 1fr); }

#demoScreen .fa-cell { position: relative; aspect-ratio: 1; border-radius: var(--fa-r-thumb); overflow: hidden; }
#demoScreen .fa-cell--photo { background: #fff; box-shadow: var(--fa-raise-xs); cursor: pointer; transition: transform .2s cubic-bezier(.22,1,.36,1); }
#demoScreen .fa-cell--photo:active { transform: scale(.95); }
#demoScreen .fa-cell--photo img {
  position: absolute; top: 4px; left: 4px; width: calc(100% - 8px); height: calc(100% - 8px);
  object-fit: cover; border-radius: 9px; pointer-events: none;
}
#demoScreen .fa-cell--broken img { opacity: 0; }
#demoScreen .fa-cell--broken::after { content: ''; position: absolute; inset: 4px; border-radius: 9px; background: #DADADA; }
#demoScreen .fa-cell__play {
  position: absolute; top: 4px; left: 4px; right: 4px; bottom: 4px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.18);
}
/* 再生アイコンの円形バッジ（PhotoThumb.jsx:200-207 準拠）。以前はオーバーレイに
   アイコンが直に浮いていたが、実アプリは半透明の暗い円をもう一枚重ねている。 */
#demoScreen .fa-cell__play-badge {
  width: 28px; height: 28px; border-radius: 50%; background: rgba(20,20,20,.6);
  display: flex; align-items: center; justify-content: center;
}
/* 縦横比インジケーター（月詳細のみ。PhotoThumb.jsx:20-35,229-242 準拠）。
   写真の実際の縦横比をそのまま小さな矩形として描く。 */
#demoScreen .fa-cell__orientation {
  position: absolute; top: 7px; right: 7px; width: 14px; height: 14px;
  display: flex; align-items: center; justify-content: center; pointer-events: none;
  filter: drop-shadow(0 1px 2.5px rgba(0,0,0,.55));
}
#demoScreen .fa-cell__orientation-box {
  border-radius: 2px; box-sizing: border-box; border: 1.25px solid rgba(255,255,255,.95);
  background: linear-gradient(135deg, rgba(255,255,255,.38) 0%, rgba(255,255,255,.06) 100%);
}
#demoScreen .fa-cell__uploader {
  position: absolute; bottom: 7px; right: 7px; width: 16px; height: 16px; border-radius: 50%;
  background: rgba(255,255,255,.84); box-shadow: 0 1px 4px rgba(40,40,40,.3);
  display: flex; align-items: center; justify-content: center;
  font-size: 7px; font-weight: 800; color: var(--fa-ink); font-family: var(--fa-util);
}
/* +N セル: 実アプリ PlusPlaceholder.jsx は「押していない＝浮き」（raiseXs）で、
   写真サムネと同じ浮き方。押した瞬間だけ inset に沈む。色・フォントも NEU.ink / NEU.font。 */
#demoScreen .fa-cell--plus {
  display: flex; align-items: center; justify-content: center; background: var(--fa-surface);
  box-shadow: var(--fa-raise-xs); color: var(--fa-ink); font-size: 15px; font-weight: 600;
  letter-spacing: -.01em; font-variant-numeric: tabular-nums; cursor: pointer;
  font-family: var(--fa-ja); transition: box-shadow .15s ease, transform .15s ease;
}
#demoScreen .fa-cell--plus:active { box-shadow: var(--fa-inset-sm); transform: scale(.96); }
#demoScreen .fa-cell__plus-sign { font-size: .72em; opacity: .5; margin-right: 1px; }
/* +N セルをメモ追加ボタンと縦2段に組むときの外枠（MonthSection.jsx:385-393 準拠）。
   外枠だけが正方形を保ち、内側の +N セルは flex:1 で高さを譲る。 */
#demoScreen .fa-cell-plus-wrap { aspect-ratio: 1; display: flex; flex-direction: column; gap: 5px; }
#demoScreen .fa-cell--plus-compact { aspect-ratio: auto; flex: 1; min-height: 0; }
/* +N セルが無い月で、メモ追加ボタンをグリッド5列目の下端に単独配置するための枠
   （MonthSection.jsx:414-418 準拠）。 */
#demoScreen .fa-cell-addnote-standalone { display: flex; align-items: flex-end; }

/* ZIP / CLOSE セル: 実アプリの DownloadCell.jsx・CollapseCell.jsx は写真サムネと同じ
   「通常時は浮き（raiseXs）、押した瞬間だけ沈む（insetSm）」。常時陥没だった旧デザインを廃止。
   アイコンはテーマ色付きの円バッジ（28px）に載せる。 */
#demoScreen .fa-cell--action {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  background: var(--fa-surface); box-shadow: var(--fa-raise-xs); color: var(--fa-accent);
  cursor: pointer; text-align: center; transition: box-shadow .15s ease, transform .2s cubic-bezier(.22,1,.36,1);
}
#demoScreen .fa-cell--action:active { box-shadow: var(--fa-inset-sm); transform: scale(.96); }
#demoScreen .fa-cell__action-badge {
  width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  /* theme.tagActive（=--fa-accent）に 30(hex, 約19%) のアルファを足した相当色。
     CSS変数に直接アルファ suffix を付けられないため rgba 値へ変換して固定している。 */
  background: rgba(61,61,61,.19); color: var(--fa-accent);
}
#demoScreen .fa-cell__action-badge svg { display: block; }
#demoScreen .fa-cell__action-badge--flip svg { transform: rotate(180deg); }
#demoScreen .fa-cell__action-label {
  font-family: var(--fa-util); font-size: 9px; font-weight: 700; letter-spacing: .04em;
  color: var(--fa-accent); opacity: .65; line-height: 1.25;
}
#demoScreen .fa-cell--pulse { animation: fa-cell-pulse .9s ease; }

/* ── 月カード（トップページ・新構造） ──
   2026-08-01 実アプリ刷新（MonthSection.jsx:328-513・PhotoThumb.jsx・PlusPlaceholder.jsx・
   GalleryStyles.jsx）に追随。独立ヘッダーバー＋均一5列グリッドの旧デザインを廃止し、
   「ヒーロー写真（大）＋その左上に浮く年月バンド＋タグ帯＋小サムネ3枚＋右端ユーティリティ列」の
   5列グリッドに作り直す。月詳細（.fa-month-header 系・.fa-photo-grid--3 系）は変更しない。 */
#demoScreen .fa-monthcard-grid {
  display: grid;
  grid-template-columns: 1.5fr repeat(3, 1fr) 55px;
  grid-template-rows: 28px auto;
  gap: 3px;
}
#demoScreen .fa-monthcard-hero { grid-column: 1; grid-row: span 2; position: relative; }
/* ヒーロー写真は正方形固定を外し、グリッドセル（2行ぶち抜き）いっぱいに伸ばす
   （PhotoThumb.jsx fillCell 準拠。実際の width/height/aspect-ratio は
   buildPhotoCell がインラインで指定するため、ここでは触れない）。 */

/* 年月バンド。ヒーローの左上からはみ出して浮く、すりガラスの帯
   （GalleryStyles.jsx .lumina-band ＋ MonthSection.jsx:389-417 準拠）。
   半透明白の背景・backdrop-filter の値は実アプリのコード上の直書き値をそのまま転記した
   ものであり、--fa-* トークンには存在しない（実アプリ自身も GalleryStyles.jsx に直書きして
   おり、他で再利用されていない値のため。README.md の「差し替えポイント」参照）。 */
#demoScreen .fa-band {
  position: absolute; top: -19px; left: -20px; height: 32px; z-index: 2;
  display: inline-flex; align-items: center; gap: 4px;
  padding: 0 15px 0 10px;
  border: 1px solid rgba(255,255,255,.75);
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,.13);
  cursor: pointer; user-select: none;
  background: rgba(255,255,255,.56);
  -webkit-backdrop-filter: blur(12px) saturate(1.25);
  backdrop-filter: blur(12px) saturate(1.25);
}
/* backdrop-filter 非対応環境では透過を弱めて文字のコントラストを確保する
   （GalleryStyles.jsx の @supports フォールバックと同じ条件・同じ値）。 */
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  #demoScreen .fa-band { background: rgba(255,255,255,.85); }
}
#demoScreen .fa-band--pulse { animation: fa-header-pulse .56s ease; }

/* タグ帯（1行目・ヒーローの右）。写真の上には決して重ねない（MonthSection.jsx:420-456 準拠）。
   左右フェードは月詳細ヘッダーと同じ見た目でよいため .fa-month-header__fade を流用する。 */
#demoScreen .fa-monthcard-tagband { grid-row: 1; grid-column: 2 / 6; position: relative; min-width: 0; }
#demoScreen .fa-monthcard-tagband__scroll {
  display: flex; align-items: center; gap: 6px; height: 100%;
  overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; padding-left: 2px;
}
#demoScreen .fa-monthcard-tagband__scroll::-webkit-scrollbar { display: none; }

/* 小サムネの空き枠（写真が3枚に満たない月）。行の高さが決まらずカードが潰れるのを防ぐための
   透明な正方形プレースホルダー（MonthSection.jsx:464-467 準拠）。 */
#demoScreen .fa-monthcard-emptycell { aspect-ratio: 1; }

/* ユーティリティ列（2行目・右端）。上: +N セル（flat） ／ 下: メモ追加セル
   （MonthSection.jsx:483-497 準拠）。 */
#demoScreen .fa-monthcard-util { grid-column: 5; grid-row: 2; display: flex; flex-direction: column; gap: 3px; }
/* +N セル（実物）・空プレースホルダーの両方に付ける高さ配分用クラス。
   上段(+N)と下段(メモ追加)の高さ比は 1.7 : 1（+N が主導線なので大きく取る）。
   .fa-cell の aspect-ratio:1 を打ち消して flex の高さ配分に従わせる。 */
#demoScreen .fa-monthcard-util__plus { flex: 1.7; min-height: 0; aspect-ratio: auto; }

/* トップページのヒーロー写真・小サムネイル用「フラット」表示（PhotoThumb.jsx:20,26-30,169-170 準拠）。
   白フチ・二重影をやめ、写真をセル全面に敷く。輪郭は極細のヘアラインのみで示す。
   角丸の実測値（10=ヒーロー/8=小サムネ）は呼び出し側（buildPhotoCell の flatOpts.radius）で
   インライン指定する。 */
#demoScreen .fa-cell--flat {
  background: transparent; box-shadow: inset 0 0 0 1px rgba(0,0,0,.06);
  cursor: pointer; transition: transform .2s cubic-bezier(.22,1,.36,1);
}
#demoScreen .fa-cell--flat:active { transform: scale(.95); }
#demoScreen .fa-cell--flat img {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  object-fit: cover; pointer-events: none;
}
#demoScreen .fa-cell--flat .fa-cell__play { top: 0; left: 0; right: 0; bottom: 0; }
/* 画像読み込み失敗時のプレースホルダーも inset 0 に合わせる（通常セルは 4px 固定）。 */
#demoScreen .fa-cell--flat.fa-cell--broken::after { inset: 0; }

/* +N セルの flat バリアント（PlusPlaceholder.jsx flat 準拠）。白フチ・二重影を持たず、
   面をわずかに沈ませただけの無彩色チップにして写真の隣で主張させない。
   数字は tabular-nums の縦積み（数字＋"more"）にする（旧デモの "+37" 横1行から変更）。 */
#demoScreen .fa-cell--plus-flat {
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.05); color: var(--fa-ink);
  font-family: var(--fa-ja); font-weight: 600; font-size: 15px;
  letter-spacing: -.02em; font-variant-numeric: tabular-nums;
  border-radius: 8px; cursor: pointer;
  transition: background .15s ease, transform .15s ease;
}
#demoScreen .fa-cell--plus-flat:active { background: rgba(0,0,0,.11); transform: scale(.96); }
#demoScreen .fa-cell--plus-flat__wrap { display: flex; flex-direction: column; align-items: center; line-height: 1; gap: 3px; }
#demoScreen .fa-cell--plus-flat__more { font-size: 7px; font-weight: 700; letter-spacing: .14em; opacity: .42; text-transform: uppercase; }

/* ユーティリティ列下段の「メモ追加」セル（MonthSection.jsx の NoteAddCell 相当・549-569行）。
   +N セルと縦に積んで正方形1マスに収めるため、点線枠の中にアイコンと「＋」を縦積みで置く
   （AddNoteButton のようなピル形にはしない）。 */
#demoScreen .fa-app .fa-notecell {
  flex: 1; min-height: 0; width: 100%;
  display: flex; align-items: center; justify-content: center; gap: 1px;
  background: transparent; border: 1px dashed rgba(0,0,0,.24);
  color: var(--fa-ink-soft); border-radius: 8px; padding: 0; cursor: pointer;
}
#demoScreen .fa-app .fa-notecell span { font-size: 9px; font-weight: 700; line-height: 1; font-family: var(--fa-ja); }

/* 選択モード中のサムネイル（PhotoThumb.jsx:160-163,210-221 準拠。機能3）。
   削除は赤（--select-danger）、移動・タグ追加はモノクロ（--select-mono）の2系統で、
   どちらも「非選択＝細い輪郭」「選択中＝太い輪郭＋左上チェック＋わずかに縮小」で見分ける。
   `${selectColor}8C`（約55%不透明度）相当は個別の rgba に固定して表現する。 */
#demoScreen .fa-cell--selectable { transition: transform .15s cubic-bezier(.22,1,.36,1), outline-color .15s ease; }
#demoScreen .fa-cell--selectable:not(.fa-cell--selected) { outline: 2px solid rgba(0,0,0,.2); outline-offset: -3px; }
#demoScreen .fa-cell--selected { outline: 3px solid; outline-offset: -3px; transform: scale(.94); }
#demoScreen .fa-cell--select-danger:not(.fa-cell--selected) { outline-color: rgba(255,71,87,.55); }
#demoScreen .fa-cell--select-danger.fa-cell--selected { outline-color: #ff4757; }
#demoScreen .fa-cell--select-mono:not(.fa-cell--selected) { outline-color: rgba(61,61,61,.55); }
#demoScreen .fa-cell--select-mono.fa-cell--selected { outline-color: var(--fa-accent); }
#demoScreen .fa-cell__check {
  position: absolute; top: 4px; left: 4px; width: 18px; height: 18px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid #fff; box-shadow: 0 2px 4px rgba(0,0,0,.35);
}
#demoScreen .fa-cell--select-danger .fa-cell__check { background: #ff4757; }
#demoScreen .fa-cell--select-mono .fa-cell__check { background: var(--fa-accent); }

/* ── メモピル列 ── */
#demoScreen .fa-note-row { display: flex; gap: 8px; overflow-x: auto; margin-top: 12px; scrollbar-width: none; }
#demoScreen .fa-note-row::-webkit-scrollbar { display: none; }
/* +N セルの下段・グリッド5列目に埋め込む「＋」ボタンの縮小版
   （MonthSection.jsx の AddNoteButton compact=true 相当。高さ20pxの横長ボタン）。 */
#demoScreen .fa-pill--note-compact {
  width: 100%; height: 20px; border-radius: 8px; padding: 0; justify-content: center;
}

/* ── 月詳細画面 ── */
/* こちらも常時表示（実アプリ MonthSection.jsx:132-138 は position:sticky で
   フェード制御を持たない）。 */
#demoScreen .fa-month-headerbar { position: sticky; top: 0; z-index: 12; padding-bottom: 10px; }
#demoScreen .fa-month-headerbar .fa-month-header {
  background: var(--fa-surface); border: 1px solid var(--fa-line); border-radius: 18px;
  box-shadow: var(--fa-raise-sm); padding: 12px; cursor: default;
}
#demoScreen .fa-month-detail-card { background: var(--fa-surface); border-radius: var(--fa-r-card); box-shadow: var(--fa-raise); padding: 12px; }

/* ── 動画タブ ── */
#demoScreen .fa-videos-title { font-family: var(--fa-ja); font-weight: 800; font-size: 19px; color: var(--fa-ink); padding: 6px 4px 14px; }

/* ── 検索ドロップダウン ── */
#demoScreen .fa-search-dropdown { position: absolute; inset: 0; z-index: 40; pointer-events: auto; }
#demoScreen .fa-overlay-backdrop { position: absolute; inset: 0; background: rgba(40,40,40,.32); animation: fa-fadein .18s ease-out; }
/* 検索ドロップダウン専用の背景。ボトムシート（メモ）より控えめな暗さにして、
   「ページ内の一部が開いた」感を出す（モーダルほど重くしない）。 */
#demoScreen .fa-overlay-backdrop--top { background: rgba(20,20,20,.22); }
#demoScreen .fa-search-panel {
  position: absolute; left: 14px; right: 14px; top: 76px; background: var(--fa-surface);
  border-radius: 20px; box-shadow: var(--fa-raise); padding: 16px;
  max-height: calc(100% - 150px); overflow-y: auto; scrollbar-width: none;
  animation: fa-sheetdown .22s cubic-bezier(.22,1,.36,1);
}
#demoScreen .fa-search-panel::-webkit-scrollbar { display: none; }
#demoScreen .fa-search-label {
  font-family: var(--fa-util); font-size: 10px; font-weight: 700; letter-spacing: .12em;
  color: var(--fa-ink-faint); margin: 16px 0 8px; text-transform: uppercase;
}
#demoScreen .fa-search-label:first-child { margin-top: 0; }
#demoScreen .fa-search-row { display: flex; gap: 8px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
#demoScreen .fa-search-row::-webkit-scrollbar { display: none; }
#demoScreen .fa-search-row--wrap { flex-wrap: wrap; overflow: visible; }

#demoScreen .fa-person {
  position: relative; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  font-size: 10px; color: var(--fa-ink-soft); font-family: var(--fa-ja); flex-shrink: 0;
}
/* アバターは実アプリ同様、個人ごとの色を持たずモノクロ（NEU.ink）に統一する
   （TagDropdown.jsx:144-147）。選択中/非選択中はこの円自体の色ではなく、周囲の
   outline（下記 .fa-person--active）で区別する。 */
#demoScreen .fa-person__avatar {
  width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: var(--fa-ink); color: #fff; font-weight: 800; font-size: 12px;
  box-shadow: var(--fa-raise-xs); font-family: var(--fa-util);
}
#demoScreen .fa-person--active .fa-person__avatar { outline: 2px solid var(--fa-accent); outline-offset: 2px; }
#demoScreen .fa-person--active { color: var(--fa-ink); }
#demoScreen .fa-person__label { max-width: 56px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 呼び名編集（鉛筆）ボタン。TagDropdown.jsx:152-166 のアイコンボタンをアバター右上に
   小さく再現する（デモは縦積みレイアウトのため、実アプリの横並びチップとは配置が異なる）。 */
#demoScreen .fa-person__edit {
  position: absolute; top: -2px; right: 4px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--fa-surface-hi); box-shadow: var(--fa-raise-xs);
  display: flex; align-items: center; justify-content: center; color: var(--fa-ink-soft);
}
/* 呼び名のインライン編集入力（プロンプトではなくその場で編集できるようにする） */
#demoScreen .fa-person__edit-input {
  width: 56px; font-size: 10px; font-family: var(--fa-ja); color: var(--fa-ink); text-align: center;
  background: var(--fa-surface-hi); border: 1px solid var(--fa-line); border-radius: 6px; padding: 1px 2px;
}

/* ── 没入ビュー（immersive） ── */
#demoScreen .fa-immersive { position: absolute; inset: 0; z-index: 50; background: #0A0A0A; overflow: hidden; touch-action: none; pointer-events: auto; }
/* 機能4: 入場アニメーションは canFlip（サムネからの FLIP ズームが可能か）で出し分ける
   （ImmersiveView.jsx:743 準拠）。FLIP ズームクローンが拡大を担うときは軽いフェードのみ、
   クローンを出さないとき（サムネ矩形が取れない・視差低減設定）はビュー自体が軽くポップインする。 */
#demoScreen .fa-immersive--flip { animation: fa-fadein .25s ease-out; }
#demoScreen .fa-immersive--pop { animation: fa-immersive-pop .38s cubic-bezier(.22,1,.36,1); }
#demoScreen .fa-immersive--closing { animation: fa-fadeout .22s ease-in forwards; }
#demoScreen .fa-immersive-fitbox { position: absolute; }
#demoScreen .fa-immersive-thumb,
#demoScreen .fa-immersive-full { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
#demoScreen .fa-immersive-full { object-fit: contain; opacity: 0; transition: opacity .3s ease; }
#demoScreen .fa-immersive-fitbox--loaded .fa-immersive-full { opacity: 1; }
#demoScreen .fa-immersive-fitbox--loaded .fa-immersive-thumb { opacity: 0; }
/* バグB対応: 画像読み込み失敗時のプレースホルダー。
   グリッドの .fa-cell--broken（薄いグレーの塗り＋壊れた画像アイコンを隠す）と
   同じ考え方を、#0A0A0A の全画面ビューでも成立するよう明度を上げて適用する。 */
#demoScreen .fa-immersive-thumb--broken { opacity: 0; }
#demoScreen .fa-immersive-fitbox--broken { background: #3A3A3A; }
#demoScreen .fa-immersive-fitbox--broken .fa-immersive-thumb,
#demoScreen .fa-immersive-fitbox--broken .fa-immersive-full { opacity: 0 !important; }
#demoScreen .fa-spinner {
  position: absolute; inset: 0; margin: auto; width: 22px; height: 22px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.18); border-top-color: rgba(255,255,255,.6);
  animation: fa-spin .8s linear infinite; z-index: 5;
}

#demoScreen .fa-immersive-chrome { position: absolute; inset: 0; transition: opacity .4s ease; }
#demoScreen .fa-immersive-chrome--hidden { opacity: 0; pointer-events: none; }
#demoScreen .fa-immersive-top {
  position: absolute; top: 0; left: 0; right: 0; padding: 48px 14px 20px; z-index: 15;
  display: flex; align-items: center; gap: 8px;
  background: linear-gradient(180deg, rgba(0,0,0,.58) 0%, rgba(0,0,0,0) 100%);
}
#demoScreen .fa-immersive-btn {
  flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.2);
  display: flex; align-items: center; justify-content: center;
  transition: background .2s ease, border-color .2s ease;
}
#demoScreen .fa-immersive-btn--danger { background: rgba(255,71,87,.85); border-color: rgba(255,71,87,.9); }
#demoScreen .fa-immersive-top__spacer { flex: 1; text-align: center; }
#demoScreen .fa-immersive-top__ym { font-family: var(--fa-ja); font-size: 11.5px; font-weight: 600; color: rgba(255,255,255,.88); }
#demoScreen .fa-immersive-top__count { font-family: var(--fa-ja); font-size: 9.5px; font-weight: 500; color: rgba(255,255,255,.48); margin-top: 2px; }
#demoScreen .fa-immersive-actions { display: flex; gap: 6px; flex-shrink: 0; }
#demoScreen .fa-immersive-close {
  height: 36px; border-radius: 999px; padding: 0 12px 0 9px;
  background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.28);
  display: flex; align-items: center; gap: 4px; color: #fff;
  font-family: var(--fa-ja); font-size: 11.5px; font-weight: 700;
}
#demoScreen .fa-immersive-bottom {
  position: absolute; bottom: 0; left: 0; right: 0; padding: 60px 18px 18px; z-index: 5;
  background: linear-gradient(0deg, rgba(0,0,0,.75) 0%, rgba(0,0,0,.25) 55%, rgba(0,0,0,0) 100%);
}
#demoScreen .fa-immersive-uploader { display: flex; align-items: center; gap: 6px; margin-bottom: 7px; }
#demoScreen .fa-immersive-uploader__badge {
  width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: var(--fa-ink); color: #fff; font-size: 8px; font-weight: 800; font-family: var(--fa-util); flex-shrink: 0;
}
#demoScreen .fa-immersive-uploader span:last-child { font-family: var(--fa-ja); font-size: 10.5px; font-weight: 600; color: rgba(255,255,255,.65); }
#demoScreen .fa-immersive-date { font-family: var(--fa-ja); font-weight: 700; font-size: 13.5px; color: #fff; text-shadow: 0 1px 8px rgba(0,0,0,.5); }
#demoScreen .fa-immersive-tags { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
#demoScreen .fa-immersive-tags span {
  font-family: var(--fa-util); font-size: 8.5px; font-weight: 700; letter-spacing: .08em;
  padding: 3px 8px; border-radius: 999px; background: rgba(255,255,255,.18); color: rgba(255,255,255,.85);
}
#demoScreen .fa-immersive-nav {
  position: absolute; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; border-radius: 50%;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.16);
  display: flex; align-items: center; justify-content: center; z-index: 10;
}
#demoScreen .fa-immersive-nav--left { left: 8px; }
#demoScreen .fa-immersive-nav--right { right: 8px; }

/* 動画の疑似再生（機能1）— デモには軽量な動画ファイルを用意していない（外部CDNの動画にも
   依存しない方針のため）。ImmersiveView.jsx の <video autoPlay loop> の代わりに、写真へ
   ゆっくりとした拡縮アニメーションを掛けて「動いている」ことを伝える代替とする。
   実際の再生位置・再生/一時停止・ミュート状態は demo-app.js 側でタイマー管理する。 */
#demoScreen .fa-immersive-fitbox--video-playing .fa-immersive-full,
#demoScreen .fa-immersive-fitbox--video-playing .fa-immersive-thumb { animation: fa-video-breathe 6s ease-in-out infinite; }
#demoScreen .fa-immersive-videobar { display: flex; align-items: center; gap: 10px; margin-top: 14px; }
#demoScreen .fa-immersive-videobar__play {
  flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%;
  background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.24);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
#demoScreen .fa-immersive-videobar__time { font-family: var(--fa-ja); font-size: 11px; font-weight: 600; color: rgba(255,255,255,.8); min-width: 34px; text-align: right; font-variant-numeric: tabular-nums; }
#demoScreen .fa-immersive-videobar__time--dur { color: rgba(255,255,255,.55); text-align: left; }
#demoScreen .fa-immersive-videobar__track { flex: 1; position: relative; height: 28px; cursor: pointer; touch-action: none; }
#demoScreen .fa-immersive-videobar__track-bg,
#demoScreen .fa-immersive-videobar__track-fill { position: absolute; top: 12px; height: 4px; border-radius: 999px; }
#demoScreen .fa-immersive-videobar__track-bg { left: 0; right: 0; background: rgba(255,255,255,.28); }
#demoScreen .fa-immersive-videobar__track-fill { left: 0; width: 0%; background: #fff; }
#demoScreen .fa-immersive-videobar__thumb {
  position: absolute; top: 50%; left: 0%; width: 13px; height: 13px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.5); transform: translate(-50%, -50%);
}

/* ── FLIP ズームクローン専用層（最前面。#demoScreen 内 position:absolute で完結） ── */
#demoScreen .fa-clone-layer { position: absolute; inset: 0; z-index: 80; pointer-events: none; overflow: hidden; }
#demoScreen .fa-flip-clone { position: absolute; object-fit: cover; will-change: left, top, width, height; }

/* ── オーバーレイ層（検索・メモ・トースト・ドメイン帯の入れ物。既定は非インタラクティブ） ── */
#demoScreen .fa-overlay-layer { position: absolute; inset: 0; z-index: 40; pointer-events: none; }

/* ── メモシート ──
   .fa-sheet-overlay はアクションシート・画質選択シート（機能3・4）でも使う汎用の
   全画面オーバーレイ名。.fa-note-overlay と全く同じ見た目（背景＋pointer-events）でよいため
   同じ規則にまとめている。 */
#demoScreen .fa-note-overlay,
#demoScreen .fa-sheet-overlay { position: absolute; inset: 0; z-index: 60; pointer-events: auto; }
#demoScreen .fa-sheet { position: absolute; left: 8px; right: 8px; bottom: 14px; font-family: var(--fa-ja); animation: fa-sheetup .26s cubic-bezier(.22,1,.36,1); }
#demoScreen .fa-sheet__card { background: var(--fa-bg); border-radius: 28px; overflow: hidden; box-shadow: 0 -10px 28px rgba(40,40,40,.22); }
#demoScreen .fa-sheet__handle { width: 40px; height: 4px; border-radius: 999px; background: #C9C9C9; margin: 10px auto 4px; }
#demoScreen .fa-sheet__header { padding: 14px 18px 10px; display: flex; align-items: center; gap: 8px; color: var(--fa-ink); }
/* 閲覧モードでは実タイトルがそのまま見出しに入り長くなりうるため、×ボタン等を
   押し出さないよう1行省略にする（flex子は min-width:0 が無いと省略が効かない）。 */
#demoScreen .fa-sheet__header span {
  font-size: 13px; font-weight: 800; flex: 1; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#demoScreen .fa-sheet__divider { height: 1px; background: rgba(0,0,0,.06); }
/* ヘッダーの鉛筆／×ボタン（MonthNoteSheet.jsx 準拠。体裁を揃えて2つ並んでも違和感が出ないようにする） */
#demoScreen .fa-sheet__iconbtn {
  width: 28px; height: 28px; border-radius: 50%; background: transparent;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  color: var(--fa-ink-soft); opacity: .6; transition: opacity .2s ease;
}
#demoScreen .fa-sheet__iconbtn:active { opacity: .95; }
/* 閲覧モードの本文表示（読み物として pre-wrap・スクロール可。MonthNoteSheet.jsx 準拠） */
#demoScreen .fa-sheet__readtext {
  white-space: pre-wrap; word-break: break-word; padding: 10px 12px;
  font-family: var(--fa-ja); font-size: 13px; line-height: 1.7; color: var(--fa-ink);
  max-height: 280px; overflow-y: auto;
}
#demoScreen .fa-sheet__field { padding: 12px 18px 0; }
#demoScreen .fa-sheet__field:last-of-type { padding-bottom: 6px; }
#demoScreen .fa-sheet__title,
#demoScreen .fa-sheet__textarea {
  width: 100%; background: var(--fa-bg); box-shadow: var(--fa-inset-sm); border: none; border-radius: 12px;
  padding: 10px 12px; font-family: var(--fa-ja); color: var(--fa-ink); outline: none;
  transition: box-shadow .15s ease;
}
#demoScreen .fa-sheet__title { font-size: 14px; font-weight: 700; }
#demoScreen .fa-sheet__textarea { min-height: 108px; font-size: 13px; line-height: 1.7; resize: none; border-radius: 14px; }
#demoScreen .fa-sheet__title:focus,
#demoScreen .fa-sheet__textarea:focus { box-shadow: var(--fa-inset-sm), 0 0 0 3px rgba(61,61,61,.18); }
#demoScreen .fa-sheet__title:disabled,
#demoScreen .fa-sheet__textarea:disabled { color: var(--fa-ink-soft); }
#demoScreen .fa-sheet__counter { text-align: right; font-size: 10.5px; color: var(--fa-ink-faint); margin-top: 6px; font-weight: 600; }
#demoScreen .fa-sheet__savewrap { padding: 8px 18px 16px; }
#demoScreen .fa-sheet__save {
  width: 100%; padding: 12px; border-radius: 10px; background: linear-gradient(135deg,#2E2E2E,#5A5A5A);
  box-shadow: var(--fa-raise-sm); color: #fff; font-family: var(--fa-ja); font-size: 14px; font-weight: 700;
}
#demoScreen .fa-sheet__save:disabled { background: #9E9E9E; box-shadow: var(--fa-inset-sm); cursor: default; }
#demoScreen .fa-sheet__cancel {
  margin-top: 8px; width: 100%; padding: 14px 0; border-radius: var(--fa-r-btn);
  background: var(--fa-surface); box-shadow: var(--fa-raise-sm);
  font-family: var(--fa-ja); font-size: 14px; font-weight: 700; color: var(--fa-ink);
}

/* ── メモの長押し削除シート（NoteActionSheet.jsx 準拠）──
   PhotoActionSheet の行（transparent・divider区切り）とは見た目が違い、box-shadow で
   浮き出させた1個のボタンになる点に注意（NoteActionSheet.jsx はこのボタンに角丸を
   指定していないため、ここでも border-radius は付けない）。 */
#demoScreen .fa-note-delete {
  width: 100%; display: flex; align-items: center; gap: 12px;
  padding: 15px 18px; border: none; background: var(--fa-surface);
  box-shadow: var(--fa-raise-sm);
  font-family: var(--fa-ja); font-size: 14px; font-weight: 600;
  color: var(--fa-danger); text-align: left; cursor: pointer;
  transition: box-shadow .15s ease;
}
#demoScreen .fa-note-delete:active { box-shadow: var(--fa-inset-sm); }
#demoScreen .fa-note-delete__icon { display: flex; flex-shrink: 0; }
#demoScreen .fa-note-delete__label { flex: 1; }

/* ── アクションシートの項目（PhotoActionSheet.jsx の SheetButton 準拠。機能3） ── */
#demoScreen .fa-action-row {
  width: 100%; display: flex; align-items: center; gap: 12px;
  padding: 15px 18px; background: transparent; border: none;
  font-family: var(--fa-ja); font-size: 14px; font-weight: 600;
  color: var(--fa-ink); text-align: left; cursor: pointer;
  transition: background .12s ease;
}
#demoScreen .fa-action-row:active { background: rgba(0,0,0,.05); }
#demoScreen .fa-action-row--danger { color: var(--fa-danger); }
#demoScreen .fa-action-row__icon { display: flex; flex-shrink: 0; }
#demoScreen .fa-action-row__label { flex: 1; }
#demoScreen .fa-action-divider { height: 1px; background: rgba(0,0,0,.06); margin: 0 18px; }

/* ── フローティング実行ボタン／キャンセルボタン（FloatingActionButton.jsx 準拠。機能3） ──
   実行ボタンの色は削除=赤系、移動・タグ追加=モノクロの2系統（--fa-ink を再利用）。 */
#demoScreen .fa-fab {
  position: absolute; left: 16px; right: 16px; bottom: 78px; z-index: 65;
  padding: 14px 20px; border-radius: var(--fa-r-pill); border: none;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  color: #fff; font-family: var(--fa-ja); font-size: 14px; font-weight: 700; letter-spacing: .03em;
  cursor: pointer; animation: fa-sheetup .3s cubic-bezier(.22,1,.36,1);
}
#demoScreen .fa-fab--danger {
  background: linear-gradient(135deg,#ff4757,#ff6b81);
  box-shadow: 6px 6px 16px rgba(180,180,180,.95), -4px -4px 12px #fff, 0 10px 24px -8px rgba(255,71,87,.55);
}
#demoScreen .fa-fab--mono {
  background: linear-gradient(135deg, var(--fa-ink), #5A5A5A);
  box-shadow: 6px 6px 16px rgba(180,180,180,.95), -4px -4px 12px #fff, 0 10px 24px -8px rgba(40,40,40,.45);
}
#demoScreen .fa-cancel-btn {
  position: absolute; left: 16px; right: 16px; bottom: 24px; z-index: 65;
  padding: 13px 20px; border-radius: var(--fa-r-pill); border: none;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  background: var(--fa-surface); color: var(--fa-danger);
  font-family: var(--fa-ja); font-size: 14px; font-weight: 700; letter-spacing: .03em;
  box-shadow: var(--fa-raise-sm), 0 8px 20px -8px rgba(225,29,72,.35);
  cursor: pointer; animation: fa-sheetup .3s cubic-bezier(.22,1,.36,1);
}

/* ── 画質選択シート（DownloadSheet.jsx / QualityCard.jsx 準拠。機能4）── */
#demoScreen .fa-download-card { padding: 8px 16px 28px; }
#demoScreen .fa-download-title { padding: 0 4px 14px; }
#demoScreen .fa-download-title__main { font-family: var(--fa-ja); font-weight: 800; font-size: 16px; color: var(--fa-ink); letter-spacing: -.01em; }
#demoScreen .fa-download-title__sub { font-family: var(--fa-ja); font-weight: 500; font-size: 11.5px; color: var(--fa-ink-soft); margin-top: 3px; letter-spacing: .01em; }
#demoScreen .fa-download-options { display: flex; flex-direction: column; gap: 8px; }
#demoScreen .fa-quality-card {
  display: flex; align-items: center; gap: 14px; width: 100%;
  padding: 14px 16px; border-radius: 18px; border: none;
  background: var(--fa-surface); box-shadow: var(--fa-raise-sm); text-align: left; cursor: pointer;
  transition: box-shadow .15s ease, transform .15s cubic-bezier(.22,1,.36,1);
}
#demoScreen .fa-quality-card:active { box-shadow: var(--fa-inset-sm); transform: scale(.985); }
#demoScreen .fa-quality-card--highlight { box-shadow: var(--fa-raise-sm), 0 0 0 2px var(--fa-accent); }
#demoScreen .fa-quality-card--highlight:active { box-shadow: var(--fa-inset-sm), 0 0 0 2px var(--fa-accent); }
#demoScreen .fa-quality-card__icon {
  width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
  background: rgba(61,61,61,.16); display: flex; align-items: center; justify-content: center;
}
#demoScreen .fa-quality-card__text { flex: 1; min-width: 0; }
#demoScreen .fa-quality-card__label { font-family: var(--fa-ja); font-weight: 700; font-size: 13.5px; color: var(--fa-ink); letter-spacing: -.005em; }
#demoScreen .fa-quality-card__sub { font-family: var(--fa-ja); font-weight: 500; font-size: 11px; color: var(--fa-ink); opacity: .65; margin-top: 2px; }
#demoScreen .fa-quality-card__size { font-family: var(--fa-ja); font-weight: 600; font-size: 11.5px; color: var(--fa-ink); opacity: .7; letter-spacing: .01em; flex-shrink: 0; }
#demoScreen .fa-quality-card__dlicon { display: flex; opacity: .6; flex-shrink: 0; }

/* ── トースト ──
   実アプリ Toast.jsx は「浮き出しピル＋スピナー/チェック＋進捗バー」で、黒いスナックバーではない。
   デモでは保存・タグ編集などZIP以外の用途にも流用するため、進捗バーは progress 指定時のみ出す
   （後続担当がダウンロード進捗で使う想定。showToast(msg, ms, { done, progress }) を参照）。
   bottom の位置はデモ独自のタブバー分クリアするため実アプリの値からは変更している。 */
#demoScreen .fa-toast {
  position: absolute; left: 50%; bottom: 84px; transform: translate(-50%, 8px);
  display: flex; align-items: center; gap: 10px;
  background: var(--fa-surface); box-shadow: var(--fa-raise);
  min-width: 190px; padding: 10px 16px; border-radius: 999px;
  opacity: 0; transition: opacity .22s ease, transform .22s ease;
  z-index: 70; pointer-events: none;
}
#demoScreen .fa-toast--visible { opacity: 1; transform: translate(-50%, 0); }
#demoScreen .fa-toast__icon { flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
#demoScreen .fa-toast__spinner {
  display: block; width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid #DCDCDC; border-top-color: var(--fa-accent);
  animation: fa-spin .7s linear infinite;
}
#demoScreen .fa-toast__body { flex: 1; min-width: 0; }
#demoScreen .fa-toast__msg {
  display: block; font-family: var(--fa-ja); font-size: 11.5px; font-weight: 600;
  color: var(--fa-ink); letter-spacing: .01em;
}
#demoScreen .fa-toast__track {
  display: block; margin-top: 5px; height: 2px; border-radius: 2px;
  background: rgba(255,255,255,.15); overflow: hidden;
}
#demoScreen .fa-toast__fill {
  display: block; height: 100%; border-radius: 2px; background: rgba(255,255,255,.7);
  transition: width .2s ease;
}

/* ── ドメイン帯（store シーン専用の一時オーバーレイ。半透明でアプリUIを壊さない） ── */
#demoScreen .fa-domainbar {
  position: absolute; left: 0; right: 0; top: 0; z-index: 45;
  display: flex; align-items: center; justify-content: center; gap: 6px; padding: 11px;
  background: rgba(30,30,30,.78); color: #fff; font-family: var(--fa-util); font-size: 11px; font-weight: 600;
  letter-spacing: .02em; transform: translateY(-100%); transition: transform .4s cubic-bezier(.22,1,.36,1);
  backdrop-filter: blur(6px);
}
#demoScreen .fa-domainbar--in { transform: translateY(0); }

/* ── アップロード画面（実アプリ upload.html 準拠のミニチュア） ── */
#demoScreen .fa-upload-card { width: 100%; max-width: 320px; background: var(--fa-surface); border-radius: var(--fa-r-card); box-shadow: var(--fa-raise); padding: 22px 16px; text-align: center; }
#demoScreen .fa-upload-title { font-size: 1.15rem; margin: 0 0 18px; color: var(--fa-ink); font-weight: 800; font-family: var(--fa-ja); }
#demoScreen .fa-upload-options { background: var(--fa-bg); border-radius: 16px; box-shadow: var(--fa-inset-sm); padding: 14px; margin-bottom: 16px; text-align: left; }
#demoScreen .fa-upload-option { margin-bottom: 12px; }
#demoScreen .fa-upload-option:last-child { margin-bottom: 0; }
#demoScreen .fa-upload-option label { font-size: .78rem; font-weight: 700; color: var(--fa-ink-soft); display: block; margin-bottom: 6px; }
#demoScreen .fa-upload-fake-select,
#demoScreen .fa-upload-fake-input {
  width: 100%; padding: 9px 10px; border-radius: 12px; font-size: .82rem;
  background: var(--fa-bg); box-shadow: var(--fa-inset-sm); color: var(--fa-ink); font-family: var(--fa-ja);
}
#demoScreen .fa-upload-fake-input::placeholder { color: var(--fa-ink-faint); }
#demoScreen .fa-upload-area {
  border: 2px dashed #007bff; padding: 38px 16px; border-radius: 18px; background: var(--fa-bg);
  box-shadow: var(--fa-inset); cursor: pointer; position: relative; overflow: hidden; transition: transform .15s ease;
}
#demoScreen .fa-upload-area:active { transform: scale(.98); }
#demoScreen .fa-upload-area p { margin: 0; font-weight: 700; color: #007bff; line-height: 1.6; font-size: .92rem; font-family: var(--fa-ja); }
#demoScreen .fa-upload-area span { font-size: .72rem; color: #666; font-weight: 400; margin-top: 6px; display: block; }
#demoScreen .fa-upload-area--ripple::after { content: ''; position: absolute; inset: 0; background: rgba(0,123,255,.16); animation: fa-ripple .4s ease-out; }
#demoScreen .fa-upload-filelist { display: none; max-height: 150px; overflow-y: auto; background: var(--fa-bg); box-shadow: var(--fa-inset-sm); border-radius: 12px; padding: 8px 10px; margin-top: 14px; text-align: left; scrollbar-width: none; }
#demoScreen .fa-upload-filelist::-webkit-scrollbar { display: none; }
#demoScreen .fa-upload-filelist--visible { display: block; }
#demoScreen .fa-upload-row { display: flex; align-items: center; gap: 6px; padding: 4px 0; font-size: .76rem; }
#demoScreen .fa-upload-row__name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #666; }
#demoScreen .fa-upload-row__track { width: 52px; height: 5px; border-radius: 999px; background: rgba(0,0,0,.08); overflow: hidden; flex-shrink: 0; }
#demoScreen .fa-upload-row__fill { display: block; height: 100%; width: 0%; background: linear-gradient(90deg,#28a745,#34ce57); }
#demoScreen .fa-upload-row__pct { width: 30px; text-align: right; color: var(--fa-ink-faint); font-variant-numeric: tabular-nums; flex-shrink: 0; }
#demoScreen .fa-upload-row--active .fa-upload-row__name { color: #007bff; font-weight: 700; }
#demoScreen .fa-upload-row--done .fa-upload-row__name { color: #28a745; }
#demoScreen .fa-upload-progresswrap { display: none; width: 100%; background: var(--fa-bg); box-shadow: var(--fa-inset-sm); border-radius: 999px; margin: 16px 0 6px; overflow: hidden; height: 12px; }
#demoScreen .fa-upload-progresswrap--visible { display: block; }
#demoScreen .fa-upload-progressbar { width: 0%; height: 100%; background: linear-gradient(90deg,#28a745,#34ce57); transition: width .25s ease-out; }
#demoScreen .fa-upload-status { font-weight: 700; font-size: .85rem; min-height: 1.3em; color: #555; font-family: var(--fa-ja); }

/* ── 通知画面（LINEのトーク画面モック。09 — 通知シーン）──
   FamilyAlbum本体のニューモーフィズムではなく、LINEアプリらしい平坦な見た目にする。
   毎日20時に届く Flex メッセージ（notifyService.js）の再現なので、その見出し色
   （実装側の ACCENT_COLOR '#9B82C8' と同値）だけを固有色として専用変数に切り出す。
   彩度の高い緑を大面積に敷くとLP全体の無彩色トーンから浮くため、チャット背景は
   ごく淡い彩度に抑える。 */
#demoScreen {
  --fa-notify-accent:    #9B82C8;
  --fa-notify-chat-bg:   #E4E7E2;
  --fa-notify-header-bg: #FFFFFF;
}
/* fa-screen の共通ルール（display:block）を上書きし、内部を縦積みレイアウトにする */
#demoScreen .fa-screen--notify.fa-screen--active { display: flex; flex-direction: column; }
/* LINEはアプリ本体とは別物という体裁のため、この画面の間はタブバーを隠す */
#demoScreen .fa-screen--notify.fa-screen--active ~ .fa-tabbar { display: none; }

#demoScreen .fa-line-header {
  flex-shrink: 0; display: flex; align-items: center; gap: 10px;
  padding: 14px 14px 12px; background: var(--fa-notify-header-bg);
  border-bottom: 1px solid var(--fa-line);
}
#demoScreen .fa-line-header__back { display: flex; color: var(--fa-ink-soft); flex-shrink: 0; }
#demoScreen .fa-line-header__id { display: flex; align-items: center; gap: 8px; min-width: 0; }
#demoScreen .fa-line-header__avatar,
#demoScreen .fa-line-avatar {
  width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
  background: var(--fa-notify-accent); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--fa-util); font-size: 10px; font-weight: 800; letter-spacing: .01em;
}
#demoScreen .fa-line-header__name {
  font-family: var(--fa-ja); font-size: 14.5px; font-weight: 700; color: var(--fa-ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

#demoScreen .fa-line-body {
  flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
  background: var(--fa-notify-chat-bg); padding: 14px 12px 20px; scrollbar-width: none;
}
#demoScreen .fa-line-body::-webkit-scrollbar { display: none; }
#demoScreen .fa-line-daypill {
  width: fit-content; margin: 0 auto 16px; padding: 3px 12px; border-radius: 999px;
  background: rgba(0,0,0,.16); color: #fff; font-family: var(--fa-ja);
  font-size: 10px; font-weight: 600;
}
#demoScreen .fa-line-msgrow { display: flex; align-items: flex-start; gap: 6px; }
#demoScreen .fa-line-msgcol { flex: 1; display: flex; flex-direction: column; min-width: 0; }
#demoScreen .fa-line-bubble-wrap {
  display: flex; align-items: flex-end; gap: 5px;
  animation: fa-sheetup .32s cubic-bezier(.22,1,.36,1);
}
#demoScreen .fa-line-timestamp {
  flex-shrink: 0; font-family: var(--fa-ja); font-size: 9.5px; font-weight: 500;
  color: var(--fa-ink-soft); opacity: .8; padding-bottom: 2px;
}
#demoScreen .fa-line-bubble {
  width: 246px; max-width: 78%; background: #fff; border-radius: 14px;
  box-shadow: 0 1px 2px rgba(0,0,0,.12); overflow: hidden; cursor: pointer;
  transition: transform .12s ease;
}
#demoScreen .fa-line-bubble__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px; border-bottom: 1px solid var(--fa-line);
}
#demoScreen .fa-line-bubble__title {
  font-family: var(--fa-ja); font-size: 13px; font-weight: 700; color: var(--fa-notify-accent);
}
#demoScreen .fa-line-bubble__meta {
  font-family: var(--fa-ja); font-size: 10.5px; font-weight: 500; color: var(--fa-ink-faint);
}
#demoScreen .fa-line-bubble__body { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 8px; }
#demoScreen .fa-line-section__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
#demoScreen .fa-line-section__label {
  font-family: var(--fa-ja); font-size: 11.5px; font-weight: 700; color: var(--fa-notify-accent);
}
#demoScreen .fa-line-section__count {
  font-family: var(--fa-ja); font-size: 10px; font-weight: 500; color: var(--fa-ink-faint);
}
#demoScreen .fa-line-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
#demoScreen .fa-line-cell {
  position: relative; aspect-ratio: 1; border-radius: 8px; overflow: hidden; background: var(--fa-bg);
}
#demoScreen .fa-line-cell img { width: 100%; height: 100%; object-fit: cover; display: block; }
#demoScreen .fa-line-cell__play {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 15px; text-shadow: 0 1px 4px rgba(0,0,0,.55);
}
#demoScreen .fa-line-cell--plus img { filter: brightness(.55); }
#demoScreen .fa-line-cell__plus-label {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: #fff; font-family: var(--fa-ja); font-weight: 800; font-size: 14px;
}
#demoScreen .fa-line-separator { height: 1px; background: var(--fa-line); margin: 2px 0; }

#demoScreen .fa-line-inputbar {
  flex-shrink: 0; display: flex; align-items: center; gap: 8px;
  padding: 10px 12px; background: var(--fa-notify-header-bg); border-top: 1px solid var(--fa-line);
}
#demoScreen .fa-line-inputbar__field {
  flex: 1; padding: 8px 12px; border-radius: 999px; background: var(--fa-bg);
  color: var(--fa-ink-faint); font-family: var(--fa-ja); font-size: 12px;
}
#demoScreen .fa-line-inputbar__send {
  flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%;
  background: var(--fa-ink-faint); color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: 12px; line-height: 1;
}

/* ── キーフレーム ── */
@keyframes fa-fadein   { from { opacity: 0; } to { opacity: 1; } }
@keyframes fa-fadeout  { from { opacity: 1; } to { opacity: 0; } }
@keyframes fa-sheetup  { from { transform: translateY(24px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes fa-sheetdown{ from { transform: translateY(-10px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes fa-spin     { to { transform: rotate(360deg); } }
@keyframes fa-ripple   { from { opacity: 1; } to { opacity: 0; } }
@keyframes fa-header-pulse { 0%, 100% { opacity: 1; } 40% { opacity: .45; } }
@keyframes fa-video-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.035); } }
@keyframes fa-immersive-pop { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: scale(1); } }
@keyframes fa-cell-pulse {
  0%, 100% { box-shadow: var(--fa-raise-xs); }
  35% { box-shadow: 0 0 0 3px rgba(61,61,61,.35), var(--fa-raise-xs); }
}

/* ── 視差効果を減らす設定への対応（#demoScreen 配下のみに限定して無効化） ── */
@media (prefers-reduced-motion: reduce) {
  #demoScreen .fa-app * {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}