/************************************
** css/character-modal.css
** ソニリアと世界観（ID:11）「主な活動」モーダル（創作 / 作業会 / 創作交流・紹介）
** 計画: .kilo/plans/20261103-character-modal-implementation-plan.md §4-7
** 寸法・色・レスポンシブ境界は work/character-modal-mock/style.css の実測確定値に合わせる。
** スコープ: .page-id-11（body_class）。DOM は js/character-modal.js が body 直下へ追加するため、
**   本文も .page-id-11 のスコープ内に入る。
** 変数（--color-*）は playlist-modal.css と同じサイトトークン＋フォールバック値。
** 文字サイズ: design-policy 方針A（メタ14px/500、説明15.2px、タイトル16.8px、
**   モーダルタイトル18px、CTA15.2px。12px未満0、<14px かつ <700 も0）
** z-index: マスク10050 / ダイアログ10051（創作紹介・再生リストモーダルと同一）
** ダイアログ上限: 作業会・創作交流は min(94vh, 900px) / 創作（.is-creation）は発信＝YouTube一覧と同じ min(86vh, 900px)
** レスポンシブ境界（plan §0-4）:
**   1025px以上 = ヘッダーCTA / 写真2行・列196px / X枠400px
**   1025px以上かつ高さ900px以下 = 写真1行・列190px（本文スクロールを出さない）
**   1025px以上かつ高さ780px以下 = 記録カードを横長（サムネ200px）にして高さを抑える
**     ※ 創作は例外で縦カードのまま（発信モーダルと同じ2:1系サムネイル）
**   769〜1024px = ヘッダーCTA / 写真1行・各48%・最大430px / X枠 min(60vh,520px)
**   481〜768px = ヘッダーCTA / 写真1行・各88%・最大380px
**   480px以下 = フッターCTA（横いっぱい）/ 写真1行・各88%・最大380px
**   ※ CTAの切り替えは 480/481。768px を起点にしない。
************************************/

/* 背景スクロールロック（クラス名はこのページ固有。他ページでは付与されない） */
html.character-modal-open,
html.character-modal-open body {
  overflow: hidden;
}

/* === マスクとダイアログ外枠 === */
.page-id-11 .character-modal-mask {
  position: fixed;
  inset: 0;
  z-index: 10050;
  background: rgba(46, 52, 64, 0.55);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.page-id-11 .character-modal-mask.is-open {
  opacity: 1;
  visibility: visible;
}

.page-id-11 .character-modal-dialog {
  position: fixed;
  z-index: 10051;
  left: 50%;
  top: 50%;
  width: min(960px, calc(100vw - 40px));
  /* 作業会・創作交流は内容が収まる実測値の94vh。創作は is-creation で発信モーダルと同じ86vhへ。 */
  max-height: min(94vh, 900px);
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  background: #ffffff;
  border-radius: 10px;
  box-shadow: 0 18px 60px rgba(20, 25, 35, 0.35);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, calc(-50% + 16px)) scale(0.98);
  /* visibility はフェードアウト完了後に隠す（開時は is-open で遅延0＝即 visible。focus() を効かせるため） */
  transition: opacity 0.3s cubic-bezier(0.25, 0.8, 0.35, 1), transform 0.3s cubic-bezier(0.25, 0.8, 0.35, 1), visibility 0s linear 0.3s;
}

.page-id-11 .character-modal-dialog.is-open {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -50%) scale(1);
  transition: opacity 0.3s cubic-bezier(0.25, 0.8, 0.35, 1), transform 0.3s cubic-bezier(0.25, 0.8, 0.35, 1), visibility 0s linear 0s;
}

/* 2026-11-05: 閉じた後に生成された X iframe を描画させない（iPad Safari 対策）。
   JS の destroyXEmbeds() までの即時ガード。 */
.page-id-11 .character-modal-mask {
  pointer-events: none;
}
.page-id-11 .character-modal-mask.is-open {
  pointer-events: auto;
}
.page-id-11 .character-modal-dialog {
  pointer-events: none;
}
.page-id-11 .character-modal-dialog.is-open {
  pointer-events: auto;
}
.page-id-11 .character-modal-dialog:not(.is-open) .character-modal-x-frame iframe {
  display: none !important;
}

/* 創作（主な領域）は発信＝YouTube一覧モーダルと同じ上限（min(86vh,900px)）。
   769px以上に限定し、≤768の88vh / ≤480の90vhは共通値のまま使う。 */
@media (min-width: 769px) {
  .page-id-11 .character-modal-dialog.is-creation {
    max-height: min(86vh, 900px);
  }
}

/* ヘッダー: タイトル → バッジ → CTA（481px以上）→ ✕。バッジはモバイルでもタイトルと同じ左側に出す */
.page-id-11 .character-modal-head {
  display: grid;
  grid-template-columns: minmax(0, auto) auto 1fr auto;
  align-items: center;
  gap: 0.8em;
  padding: 0.8em 1.2em;
  border-bottom: 1px solid var(--color-border, #DCE6EE);
  background: #ffffff;
  border-radius: 10px 10px 0 0;
}

.page-id-11 .character-modal-title {
  grid-column: 1;
  min-width: 0;
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--color-text, #2E3440);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* バッジチップ（カードのアイコン表記「Cluster 月1回」等）。空色は作業会・藤色は創作交流の区別に使わない */
.page-id-11 .character-modal-badge {
  grid-column: 2;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  padding: 0.28em 0.6em;
  border: 1px solid transparent;
  border-radius: 4px;
  background: rgba(79, 126, 153, 0.12);
  color: var(--color-sky-deep, #4A6F88);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
  white-space: nowrap;
}

.page-id-11 .character-modal-badge[hidden] {
  display: none;
}

/* CTA（ヘッダー／フッター共用の土台）。ヘッダー側は 2クラスで特異度を上げ寸法を上書きする
   （playlist-modal.css 20261103 追加修正1 の教訓。順序非依存） */
.page-id-11 .character-modal-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  font-size: 15.2px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  border-radius: 8px;
  padding: 0.55em 1.2em;
  border: 1px solid transparent;
  background: var(--color-fuji-mid, #7369A0);
  color: #ffffff;
  transition: background 0.2s ease;
}

.page-id-11 .character-modal-cta:hover {
  background: var(--color-fuji-deep, #5F568E);
  color: #ffffff;
}

.page-id-11 .character-modal-cta[hidden] {
  display: none;
}

/* 2026-11-04: CTAラベルの光学補正（ヘッダーCTAのみ。playlist-modal.css と同一）。 */
.page-id-11 .character-modal-cta.character-modal-head-cta .character-modal-cta-label {
  display: inline-block;
  transform: translateY(-0.5px);
}

.page-id-11 .character-modal-cta.character-modal-head-cta .character-modal-cta-chevron {
  display: inline-block;
  transform: translateY(0.5px);
}

.page-id-11 .character-modal-cta.character-modal-head-cta {
  grid-column: 3;
  justify-self: end;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  box-sizing: border-box;
  height: 35.2px; /* ✕（2.2em × 16px）と同一 */
  border-radius: 6px;
  padding: 0 0.9em;
}

.page-id-11 .character-modal-close {
  grid-column: 4;
  justify-self: end;
  width: 2.2em;
  height: 2.2em;
  border: 1px solid var(--color-border, #DCE6EE);
  border-radius: 8px;
  background: #ffffff;
  color: #5A6472;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}

.page-id-11 .character-modal-close:hover {
  background: #EDEFF1;
}

.page-id-11 .character-modal-close:focus-visible,
.page-id-11 .character-modal-cta:focus-visible,
.page-id-11 .character-modal-record-card:focus-visible,
.page-id-11 .character-modal-tab:focus-visible,
.page-id-11 .character-modal-photo:focus-visible,
.page-id-11 .character-modal-x-frame:focus-visible,
.page-id-11 .character-modal-photo-rail:focus-visible {
  outline: 2px solid var(--color-fuji-deep, #5F568E);
  outline-offset: 2px;
}

/* 本文は空色背景＋白カード。sticky フェードの張り付き範囲＝content box とするため padding は 0
   （外周余白は section-head / record-grid 等の margin が担う） */
.page-id-11 .character-modal-body {
  flex: 1;
  min-height: 0;
  padding: 0;
  overflow-y: auto;
  background: var(--color-bg-light, #F3FAFD);
  border-radius: 0 0 10px 10px;
  -webkit-overflow-scrolling: touch;
}

.page-id-11 .character-modal-body::-webkit-scrollbar {
  width: 7px;
}

.page-id-11 .character-modal-body::-webkit-scrollbar-track {
  background: transparent;
}

.page-id-11 .character-modal-body::-webkit-scrollbar-thumb {
  background: rgba(95, 86, 142, 0.35);
  border-radius: 4px;
}

/* --- 本体の上下フェード4状態（js/lib/activity-fade.js がダイアログに is-* を付与） ---
   上端＝::before、下端＝::after。sticky の描画位置はデバイスピクセルへ丸められるため
   2px 張り出してクリップ境界に一致させる（playlist-modal.css R4 と同一対策）。
   既定（no-js）は is-top 相当（上消・下表）。 */
.page-id-11 .character-modal-body::before {
  content: "";
  display: block;
  position: sticky;
  top: -2px;
  height: 31px;
  margin-bottom: -31px;
  z-index: 1;
  background: linear-gradient(to bottom, var(--color-bg-light, #F3FAFD), rgba(243, 250, 253, 0));
  pointer-events: none;
  opacity: 0;
}

.page-id-11 .character-modal-body::after {
  content: "";
  display: block;
  position: sticky;
  bottom: -2px;
  height: 31px;
  margin-top: -31px;
  z-index: 1;
  background: linear-gradient(to bottom, rgba(243, 250, 253, 0), var(--color-bg-light, #F3FAFD));
  pointer-events: none;
  opacity: 1;
}

/* 先頭: 上消・下表 / 中間: 上下表 / 最下端: 上表・下消 / 非スクロール: 両消 */
.page-id-11 .character-modal-dialog.is-top .character-modal-body::before { opacity: 0; }
.page-id-11 .character-modal-dialog.is-mid .character-modal-body::before,
.page-id-11 .character-modal-dialog.is-bottom .character-modal-body::before { opacity: 1; }
.page-id-11 .character-modal-dialog.is-top .character-modal-body::after { opacity: 1; }
.page-id-11 .character-modal-dialog.is-bottom .character-modal-body::after,
.page-id-11 .character-modal-dialog.is-noscroll .character-modal-body::after { opacity: 0; }
.page-id-11 .character-modal-dialog.is-noscroll .character-modal-body::before { opacity: 0; }

/* フッターCTA行は 481px以上では非表示（CTAはヘッダー）。480px以下で display:flex */
.page-id-11 .character-modal-foot {
  display: none;
  justify-content: center;
  padding: 0.8em 1.2em;
  border-top: 1px solid var(--color-border, #DCE6EE);
  border-radius: 0 0 10px 10px;
  background: #ffffff;
}

/* 本文は1ペインだけ表示（workshop / creator をキーで差し替え） */
.page-id-11 .character-modal-pane {
  display: block;
}

.page-id-11 .character-modal-pane[hidden] {
  display: none;
}

/* ---------------- 本文の共通パーツ ---------------- */

.page-id-11 .character-modal-section-head {
  display: flex;
  align-items: baseline;
  gap: 0.6em;
  margin: 0.9em 1.6em 0.45em;
}

/* 記念写真の見出しは右端に共通コントロールを置く。狭い幅ではコントロールだけ2行目へ落とす。 */
.page-id-11 .character-modal-section-head--gallery {
  align-items: center;
  flex-wrap: wrap;
  row-gap: 0.45em;
}

.page-id-11 .character-modal-section-head h3 {
  display: flex;
  align-items: center;
  gap: 0.45em;
  margin: 0;
  font-size: 16.8px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--color-main, #5F568E);
}

/* 見出し左の4pxバーのみ（▦ / ◫ のアイコンは出さない・plan §0-2） */
.page-id-11 .character-modal-section-head h3::before {
  content: "";
  width: 4px;
  height: 1.05em;
  border-radius: 2px;
  background: var(--color-fuji, #BBB7DA);
}

.page-id-11 .character-modal-section-meta {
  font-size: 14px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: #5A6472;
  white-space: nowrap;
}

.page-id-11 .character-modal-section-note {
  margin: 0 1.6em 0.6em;
  font-size: 15.2px;
  line-height: 1.65;
  color: #5A6472;
}

.page-id-11 .character-modal-section-inline-note,
.page-id-11 .character-modal-sections-empty {
  margin: 0.6em 1.6em 0;
  font-size: 14px;
  line-height: 1.65;
  color: #5A6472;
}

.page-id-11 .character-modal-section-icon {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: var(--color-bg-fuji, #F6F3FB);
  color: var(--color-fuji-mid, #7369A0);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}

/* ---------------- 作業会・創作交流・創作 共通: 記録カード ---------------- */

.page-id-11 .character-modal-record-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9rem;
  margin: 0 1.6em 0.8em;
}

.page-id-11 .character-modal-record-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid var(--color-border, #DCE6EE);
  border-radius: 8px;
  color: var(--color-text, #2E3440);
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.page-id-11 .character-modal-record-card:hover {
  transform: translateY(-2px);
  border-color: var(--color-fuji, #BBB7DA);
  box-shadow: 0 6px 18px rgba(90, 140, 170, 0.18);
}

/* サムネイル右上の「開く ›」オーバーレイ（創作紹介モーダルのE案と同寸法） */
.page-id-11 .character-modal-record-card-chev {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.25em;
  height: 32px;
  padding: 0 11px;
  border-radius: 8px;
  background: rgba(46, 52, 64, 0.62);
  color: #ffffff;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  transition: background-color 0.15s ease;
}

.page-id-11 .character-modal-record-card:hover .character-modal-record-card-chev,
.page-id-11 .character-modal-record-card:focus-visible .character-modal-record-card-chev {
  background: rgba(46, 52, 64, 0.82);
}

.page-id-11 .character-modal-record-thumb {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #EDEFF1;
}

.page-id-11 .character-modal-record-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.page-id-11 .character-modal-record-text {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.15em;
  padding: 0.7em 0.9em 0.85em;
}

.page-id-11 .character-modal-item-date {
  display: block;
  margin: 0 0 0.2em;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums;
  color: var(--color-sky-deep, #4A6F88);
}

.page-id-11 .character-modal-item-date.is-empty {
  display: none;
}

.page-id-11 .character-modal-record-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.9em;
  font-size: 16.8px;
  font-weight: 700;
  line-height: 1.45;
  color: var(--color-main, #5F568E);
}

@media (min-width: 1024px) {
  .page-id-11 .character-modal-record-title {
    -webkit-line-clamp: 1;
    min-height: 1.45em;
  }
}

.page-id-11 .character-modal-record-desc {
  display: -webkit-box;
  overflow: hidden;
  font-size: 15.2px;
  line-height: 1.55;
  color: #4A5462;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* 創作交流・紹介の横長カード右下の導線（「開く ›」だけ）。カード全体がリンク。
   見た目・hover（色 / gap / シェブロンの translateX）はサイト共通の .top-card-aff に従う。 */
.page-id-11 .character-modal-record-card .top-card-aff {
  align-self: flex-end;
  margin-top: auto;
  padding-top: 0.55em;
}

/* 横長カード（創作交流・紹介。1イベント1枚） */
.page-id-11 .character-modal-record-card--wide {
  flex-direction: row;
  align-items: stretch;
}

.page-id-11 .character-modal-record-card--wide .character-modal-record-thumb {
  flex: 0 0 260px;
}

.page-id-11 .character-modal-record-card--wide .character-modal-record-text {
  justify-content: flex-start;
  padding: 0.85em 1.1em;
}

/* ---------------- 作業会: 記念写真の横スクロール（左が新しく右が古い） ----------------
   base = PC（1025px以上）で2行グリッド・列196px。769〜1024px は1行48%、480〜768px は1行88%。
   スクロール・スナップ・スクロールバー非表示は css/gallery-rail.css（.tokikai-gallery-rail）が持つ。 */
.page-id-11 .character-modal-photo-wrap {
  position: relative;
  margin: 0 1.6em;
}

.page-id-11 .character-modal-photo-rail {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(2, minmax(0, 1fr));
  grid-auto-columns: 196px;
  gap: 0.55rem;
  padding: 0 0 0.35em;
}

.page-id-11 .character-modal-photo-item {
  scroll-snap-align: start;
}

.page-id-11 .character-modal-photo {
  position: relative;
  display: block;
  isolation: isolate;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid var(--color-border, #DCE6EE);
  border-radius: 6px;
  background: #EDEFF1;
}

/* contain で見切れない（plan §0-2） */
.page-id-11 .character-modal-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 0.25s ease;
}

.page-id-11 .character-modal-photo:hover img {
  transform: scale(1.04);
}

/* すりガラス額縁（css/character-katsudo.css の .creation-katsudo-card-image と同じ表現）。
   疑似要素は position:absolute + pointer-events:none。セル寸法を変えない。 */
.page-id-11 .character-modal-photo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  padding: 5px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  pointer-events: none;
}

.page-id-11 .character-modal-photo::after {
  content: "";
  position: absolute;
  inset: 5px;
  z-index: 3;
  border: 1px solid var(--color-fuji, #BBB7DA);
  border-radius: 4px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.65);
  pointer-events: none;
}

@supports not ((backdrop-filter: blur(3px)) or (-webkit-backdrop-filter: blur(3px))) {
  .page-id-11 .character-modal-photo::before {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

.page-id-11 .character-modal-photo-date {
  position: absolute;
  left: 6px;
  bottom: 6px;
  z-index: 4;
  padding: 0.15em 0.45em;
  border-radius: 4px;
  background: rgba(46, 52, 64, 0.68);
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.6;
  font-variant-numeric: tabular-nums;
}

.page-id-11 .character-modal-photo-x {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 4;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 4px;
  background: rgba(46, 52, 64, 0.6);
  color: #ffffff;
  opacity: 0;
  transition: opacity 0.2s ease, background 0.2s ease;
}

.page-id-11 .character-modal-photo:hover .character-modal-photo-x,
.page-id-11 .character-modal-photo:focus-visible .character-modal-photo-x {
  opacity: 1;
  background: rgba(46, 52, 64, 0.82);
}

.page-id-11 .character-modal-photo-x svg {
  width: 11px;
  height: 11px;
  fill: currentColor;
}

/* 写真の下（右下）に置く共通コントロール。旧フッター（ヒント＋矢印）と同じ高さぶんを
   ここで確保し、ダイアログの高さを削除前（1280×1000 で約846px / 1280×720 で約493px）に保つ。 */
.page-id-11 .character-modal-photo-footer {
  display: flex;
  justify-content: flex-end;
  margin: 0.4em 1.6em 0.85em;
}

/* ---------------- 創作交流・紹介: イベントタブ＋X公式埋め込み ---------------- */

/* スクロール時にタブが上部へスティッキー（スティッキーフェードより前に出す） */
.page-id-11 .character-modal-tabs-wrap {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 0.55em 1.6em 0.6em;
  background: var(--color-bg-light, #F3FAFD);
}

.page-id-11 .character-modal-tabs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0.6em;
}

.page-id-11 .character-modal-tab {
  display: flex;
  flex-direction: column;
  gap: 0.15em;
  min-width: 0;
  padding: 0.6em 0.8em;
  border: 1px solid var(--color-border, #DCE6EE);
  border-radius: 8px;
  background: #ffffff;
  color: var(--color-text, #2E3440);
  font-size: 14px;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.page-id-11 .character-modal-tab:hover {
  border-color: var(--color-fuji, #BBB7DA);
}

.page-id-11 .character-modal-tab[aria-selected="true"] {
  border-color: var(--color-fuji, #BBB7DA);
  background: var(--color-bg-fuji, #F6F3FB);
  box-shadow: inset 0 0 0 1px var(--color-fuji, #BBB7DA);
}

.page-id-11 .character-modal-tab-date {
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
  color: var(--color-sky-deep, #4A6F88);
}

.page-id-11 .character-modal-tab-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--color-main, #5F568E);
}

.page-id-11 .character-modal-panel {
  margin-top: 0.2em;
}

.page-id-11 .character-modal-panel[hidden] {
  display: none;
}

/* タブ切替で隣り合うパネル間に仕切り線は出さない（plan §0-3） */
.page-id-11 .character-modal-event-block {
  margin: 0 1.6em 1.6em;
}

.page-id-11 .character-modal-event-posts {
  margin-top: 1.1em;
}

.page-id-11 .character-modal-event-posts[hidden] {
  display: none;
}

.page-id-11 .character-modal-event-posts-title {
  display: flex;
  align-items: center;
  gap: 0.45em;
  margin: 0 0 0.35em;
  font-size: 16.8px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--color-main, #5F568E);
}

.page-id-11 .character-modal-event-posts-note {
  margin: 0 0 0.8em;
  font-size: 15.2px;
  line-height: 1.65;
  color: #5A6472;
}

.page-id-11 .character-modal-event-posts-empty {
  margin: 0;
  font-size: 14px;
  line-height: 1.65;
  color: #5A6472;
}

/* X公式埋め込みの枠。読み込み前後でダイアログの高さが変わらないよう、高さを固定する。
   PC（1025px以上）は400px、それ以下は min(60vh, 520px)。中身は枠内スクロール。 */
.page-id-11 .character-modal-x-frame {
  height: min(60vh, 520px);
  padding: 0.9em;
  background: #ffffff;
  border: 1px solid var(--color-border, #DCE6EE);
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(31, 32, 65, 0.06);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(95, 86, 142, 0.35) transparent;
}

.page-id-11 .character-modal-x-frame::-webkit-scrollbar {
  width: 7px;
}

.page-id-11 .character-modal-x-frame::-webkit-scrollbar-track {
  background: transparent;
}

.page-id-11 .character-modal-x-frame::-webkit-scrollbar-thumb {
  background: rgba(95, 86, 142, 0.35);
  border-radius: 4px;
}

@media (min-width: 1025px) {
  .page-id-11 .character-modal-x-frame {
    height: 400px;
  }
}

.page-id-11 .character-modal-x-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 0.9rem;
  margin: 0;
}

/* 描画待ちのセル（成功時は枠を消して中身だけ残す。失敗時は JS がセルを削除して詰める） */
.page-id-11 .character-modal-x-embed {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 240px;
  overflow: hidden;
  border: 1px dashed var(--color-border, #DCE6EE);
  border-radius: 8px;
  background: #F7F9FA;
}

/* 読み込み中は白い iframe の上に明示的な待機表示を重ねる（真っ白に見せない）。
   成功して is-loading が外れると同時に消える。 */
.page-id-11 .character-modal-x-embed.is-loading::before {
  content: "Xのポストを読み込み中…";
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 7px;
  background: #F7F9FA;
  font-size: 14px;
  font-weight: 500;
  color: #6B7280;
}

.page-id-11 .character-modal-x-embed.is-rendered {
  min-height: 0;
  border: 0;
  background: transparent;
}

.page-id-11 .character-modal-x-embed iframe {
  max-width: 100% !important;
  border-radius: 8px;
}

/* === PC（1025px以上）でも縦が短い画面: 写真レールを1行にして本文スクロールを出さない ===
   1080p相当（innerHeight 901px 以上）は2行のまま。900px 以下は1行に切り替える。 */
@media (min-width: 1025px) and (max-height: 900px) {
  .page-id-11 .character-modal-photo-rail {
    display: flex;
    gap: 0.6rem;
    padding-bottom: 0.2em;
  }

  .page-id-11 .character-modal-photo-item {
    flex: 0 0 190px;
    max-width: 190px;
  }
}

/* === PC（1025px以上）で高さ780px以下: 記録カードを横長にして高さを抑える ===
   縦長カードのままでは 1366×768 相当（innerHeight 約660px）で本文がスクロールするため、
   サムネイル左・テキスト右の横長カードへ切り替える。 */
@media (min-width: 1025px) and (max-height: 780px) {
  .page-id-11 .character-modal-record-card:not(.character-modal-record-card--wide) {
    flex-direction: row;
    align-items: stretch;
  }

  .page-id-11 .character-modal-record-card:not(.character-modal-record-card--wide) .character-modal-record-thumb {
    flex: 0 0 200px;
  }

  .page-id-11 .character-modal-record-card:not(.character-modal-record-card--wide) .character-modal-record-text {
    justify-content: flex-start;
    padding: 0.7em 0.9em;
  }

  .page-id-11 .character-modal-record-card:not(.character-modal-record-card--wide) .character-modal-record-title {
    min-height: 0;
  }
}

/* ---------------- 創作（主な領域）: 発信（YouTube一覧）モーダルと同じ寸法・構成 ----------------
   先頭に説明文カード（lead）、その下に2列グリッド。カード内の説明文は1行クランプで
   途中が見切れるため表示しない。空いた高さはサムネイルの縦幅へ回し、カード全体の高さは
   従来どおりに保つ。サムネイルは 2:1（高さ883px以下2.4:1 / 800px以下2.6:1）。 */
.page-id-11 .character-modal-lead {
  margin: 1em 1.6em 0;
  padding: 0.65em 1em;
  background: #ffffff;
  border: 1px solid var(--color-border, #DCE6EE);
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(31, 32, 65, 0.06);
  font-size: 15.2px;
  line-height: 1.7;
  color: #4A5462;
}

.page-id-11 .character-modal-pane-creation .character-modal-record-grid {
  margin: 0.8em 1.6em 0.9em;
}

.page-id-11 .character-modal-pane-creation .character-modal-record-thumb {
  /* 説明文をカードから外したぶん、サムネイルの縦幅を説明文1行分だけ広げる。
     aspect-ratio は content-box の内容高さに効くため、padding-top で
     説明文（15.2px × 1.55）＋行間（0.15em）を上乗せすると、
     カード全体の高さ（サムネイル＋白地＋枠線）は説明文があったときと変わらない。 */
  box-sizing: content-box;
  aspect-ratio: 2 / 1;
  padding-top: calc(15.2px * 1.55 + 0.15em);
}

/* 上乗せした padding 領域まで画像で覆い、白い帯を残さない。 */
.page-id-11 .character-modal-pane-creation .character-modal-record-thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.page-id-11 .character-modal-pane-creation .character-modal-record-text {
  padding: 0.7em 0.9em;
}

@media (min-width: 1024px) {
  .page-id-11 .character-modal-pane-creation .character-modal-record-grid {
    /* 本文の表示域 = ダイアログ上限(86vh/900) - ヘッダー65 - リード/上下余白 - グリッド下余白 */
    --creation-available: calc(min(86vh, 900px) - 65px - 96px);
    --creation-card-h: min(350px, calc((var(--creation-available) - 24px) / 2));
    --creation-row-gap: max(24px, calc(var(--creation-available) - (2 * var(--creation-card-h))));
    row-gap: var(--creation-row-gap);
  }

  .page-id-11 .character-modal-pane-creation .character-modal-record-card {
    min-height: var(--creation-card-h);
  }

  .page-id-11 .character-modal-pane-creation .character-modal-record-text {
    justify-content: center;
  }

  .page-id-11 .character-modal-pane-creation .character-modal-record-title {
    -webkit-line-clamp: 1;
    min-height: 1.45em;
  }
}

/* 説明文を外したあと、1行タイトルが白地の上に寄らないよう、
   min-height（2.9em）と同じ行高にして白地の中央へ置く。
   創作の8タイトルは全幅で1行に収まるため、行数は1行に固定する。 */
@media (max-width: 1023px) {
  .page-id-11 .character-modal-pane-creation .character-modal-record-title {
    line-height: 2.9em;
    max-height: 2.9em;
    -webkit-line-clamp: 1;
  }
}

@media (min-width: 1024px) and (max-height: 883px) {
  .page-id-11 .character-modal-pane-creation .character-modal-record-thumb {
    aspect-ratio: 2.4 / 1;
  }
}

@media (min-width: 1024px) and (max-height: 800px) {
  .page-id-11 .character-modal-pane-creation .character-modal-record-thumb {
    aspect-ratio: 2.6 / 1;
  }
}

/* 高さ780px以下の「横長カード」化は創作だけ解除し、YouTube一覧と同じ縦カードを維持する。 */
@media (min-width: 1025px) and (max-height: 780px) {
  .page-id-11 .character-modal-pane-creation .character-modal-record-card:not(.character-modal-record-card--wide) {
    flex-direction: column;
  }

  .page-id-11 .character-modal-pane-creation .character-modal-record-card:not(.character-modal-record-card--wide) .character-modal-record-thumb {
    flex: 0 0 auto;
    width: 100%;
  }

  .page-id-11 .character-modal-pane-creation .character-modal-record-card:not(.character-modal-record-card--wide) .character-modal-record-text {
    justify-content: center;
    padding: 0.7em 0.9em 0.85em;
  }

  .page-id-11 .character-modal-pane-creation .character-modal-record-card:not(.character-modal-record-card--wide) .character-modal-record-title {
    min-height: 1.45em;
  }
}

/* === [769〜1024px: タブレット] 写真レールは1行・各48%・最大430px === */
@media (min-width: 769px) and (max-width: 1024px) {
  .page-id-11 .character-modal-photo-rail {
    display: flex;
    gap: 0.6rem;
    padding-bottom: 0.2em;
  }

  .page-id-11 .character-modal-photo-item {
    flex: 0 0 48%;
    max-width: 430px;
  }
}

/* === [768] === */
@media (max-width: 768px) {
  .page-id-11 .character-modal-dialog {
    width: calc(100vw - 32px);
    max-height: 88vh;
  }

  /* ヘッダーCTAのフッターへの出し分けは 480/481 で行う（768px を起点にしない・plan §0-4） */
  .page-id-11 .character-modal-head {
    padding: 0.7em 1em;
  }

  .page-id-11 .character-modal-title {
    font-size: 17px;
  }

  /* 創作の説明文カードは発信モーダルと同じ余白・文字サイズ */
  .page-id-11 .character-modal-lead {
    margin: 1em 1.1em 0;
    font-size: 14.4px;
  }

  /* 本文は sticky フェードのため padding 0 固定。外周余白は margin で代替する */
  .page-id-11 .character-modal-section-head {
    margin: 1.2em 1.1em 0.5em;
  }

  .page-id-11 .character-modal-section-head h3 {
    font-size: 16px;
  }

  .page-id-11 .character-modal-section-note,
  .page-id-11 .character-modal-section-inline-note,
  .page-id-11 .character-modal-sections-empty {
    margin-left: 1.1em;
    margin-right: 1.1em;
  }

  .page-id-11 .character-modal-record-grid {
    margin: 0 1.1em 1em;
    gap: 0.8rem;
  }

  .page-id-11 .character-modal-pane-creation .character-modal-record-grid {
    margin: 0.8em 1.1em 0.9em;
  }

  /* ≤768px は説明文が14.4pxになるため、サムネイルに上乗せする高さも同じ比率で下げる。 */
  .page-id-11 .character-modal-pane-creation .character-modal-record-thumb {
    padding-top: calc(14.4px * 1.55 + 0.15em);
  }

  .page-id-11 .character-modal-photo-wrap {
    margin-left: 1.1em;
    margin-right: 1.1em;
  }

  .page-id-11 .character-modal-photo-footer {
    margin: 0.5em 1.1em 0.85em;
  }

  /* モバイル・タブレット幅（481〜768px）: 1行・各88%・最大380px */
  .page-id-11 .character-modal-photo-rail {
    display: flex;
    gap: 0.6rem;
    padding-bottom: 0.2em;
    scroll-snap-type: x mandatory;
  }

  .page-id-11 .character-modal-photo-item {
    flex: 0 0 88%;
    max-width: 380px;
  }

  .page-id-11 .character-modal-tabs-wrap {
    padding-left: 1.1em;
    padding-right: 1.1em;
  }

  .page-id-11 .character-modal-tab {
    padding: 0.55em 0.65em;
  }

  .page-id-11 .character-modal-tab-title {
    font-size: 12.5px;
    font-weight: 700;
  }

  .page-id-11 .character-modal-event-block {
    margin-left: 1.1em;
    margin-right: 1.1em;
  }

  /* Xは1列、枠は min(60vh, 520px) のまま */
  .page-id-11 .character-modal-x-grid {
    grid-template-columns: 1fr;
  }

  .page-id-11 .character-modal-x-frame {
    padding: 0.7em;
  }

  .page-id-11 .character-modal-record-card--wide {
    flex-direction: column;
  }

  .page-id-11 .character-modal-record-card--wide .character-modal-record-thumb {
    flex: 0 0 auto;
    width: 100%;
  }

  .page-id-11 .character-modal-record-card--wide .character-modal-record-text {
    padding: 0.7em 0.9em 0.85em;
  }

  /* 方針A: 説明系は14.4px、タイトル16px（メタ14px固定） */
  .page-id-11 .character-modal-record-desc,
  .page-id-11 .character-modal-section-note,
  .page-id-11 .character-modal-event-posts-note {
    font-size: 14.4px;
  }

  .page-id-11 .character-modal-event-posts-title {
    font-size: 15.2px;
  }

  .page-id-11 .character-modal-record-title {
    font-size: 16px;
  }

  .page-id-11 .character-modal-cta {
    font-size: 14.4px;
  }
}

/* === [560] 記録カードを1列に === */
@media (max-width: 560px) {
  .page-id-11 .character-modal-record-grid {
    grid-template-columns: 1fr;
  }
}

/* === [480] ヘッダーCTAをフッターへ（横いっぱい）=== */
@media (max-width: 480px) {
  .page-id-11 .character-modal-dialog {
    /* 発信（YouTube一覧）モーダルと同じ幅・高さ */
    width: calc(100vw - 24px);
    max-height: 90vh;
  }

  .page-id-11 .character-modal-lead {
    margin: 0.9em 0.9em 0;
    font-size: 14px;
  }

  .page-id-11 .character-modal-pane-creation .character-modal-record-text {
    padding: 0.6em 0.8em 0.75em;
  }

  .page-id-11 .character-modal-head {
    padding: 0.65em 0.9em;
    gap: 0.55em;
  }

  .page-id-11 .character-modal-head-cta {
    display: none;
  }

  .page-id-11 .character-modal-foot {
    display: flex;
    padding: 0.65em 0.9em;
  }

  .page-id-11 .character-modal-foot-cta {
    width: 100%;
    justify-content: center;
    font-size: 14.4px;
  }

  .page-id-11 .character-modal-section-head,
  .page-id-11 .character-modal-section-note,
  .page-id-11 .character-modal-section-inline-note,
  .page-id-11 .character-modal-sections-empty,
  .page-id-11 .character-modal-record-grid,
  .page-id-11 .character-modal-photo-wrap,
  .page-id-11 .character-modal-photo-footer,
  .page-id-11 .character-modal-event-block {
    margin-left: 0.9em;
    margin-right: 0.9em;
  }

  .page-id-11 .character-modal-pane-creation .character-modal-record-grid {
    margin: 0.8em 0.9em 0.9em;
  }

  .page-id-11 .character-modal-tabs-wrap {
    padding-left: 0.9em;
    padding-right: 0.9em;
  }

  .page-id-11 .character-modal-tab {
    padding: 0.5em 0.55em;
  }

  .page-id-11 .character-modal-tab-title {
    font-size: 12px;
    font-weight: 700;
  }
}

/* タブ見出しのサイズ下限: base 14px / ≤768 で12.5px / ≤480 で12px。12px 未満へは下げない（design-policy 方針A） */

@media (prefers-reduced-motion: reduce) {
  .page-id-11 .character-modal-mask,
  .page-id-11 .character-modal-dialog,
  .page-id-11 .character-modal-record-card,
  .page-id-11 .character-modal-record-card-chev,
  .page-id-11 .character-modal-tab,
  .page-id-11 .character-modal-photo img,
  .page-id-11 .character-modal-photo-x,
  .page-id-11 .character-modal-photo-rail,
  .page-id-11 .character-modal-cta {
    transition: none !important;
  }

  .page-id-11 .character-modal-photo-rail,
  .page-id-11 .character-modal-record-card:hover,
  .page-id-11 .character-modal-photo:hover img {
    scroll-behavior: auto;
    transform: none;
  }
}

/* === 2026-11-03 モーダル内の改行位置（行頭禁則・カタカナ語の途中切れ・追い出し）===
   実測: 「…作業しまし/ょ」（最終行1字）、「掲載していま/す。」（2字追い出し）、
   「ワールドクリエイ/ター」「アプ/リ」「ソニ/リア」等のカタカナ語途中切れを 390/360 で確認。
   値はサイト本文系の正準値（css/page-single.css:579-594）と同値。
   word-break を2行で書いているのは auto-phrase 非対応ブラウザ向けのフォールバック記法（サイト実装と同じ）。
   keep-all は使わない — 本モーダルは js/phrase-break.js（BudouX の <wbr>）の対象外なので、
   keep-all にすると Firefox・非JS で折返し位置がなくなり横溢れする。 */
.page-id-11 .character-modal-lead,
.page-id-11 .character-modal-record-desc,
.page-id-11 .character-modal-section-note,
.page-id-11 .character-modal-event-posts-note {
  line-break: strict;
  word-break: normal;
  word-break: auto-phrase;
  overflow-wrap: break-word;
  text-wrap: pretty;
}

/* レコードタイトル・タブ見出し（行数 clamp 付き）: 末尾の句読点・長音を枠外に置く指定を加える
   （clamp タイトルの正準値は css/page-blog.css:504-518）。 */
.page-id-11 .character-modal-record-title,
.page-id-11 .character-modal-tab-title {
  line-break: strict;
  word-break: normal;
  word-break: auto-phrase;
  overflow-wrap: break-word;
  /* text-wrap: pretty;  一時的に無効化 (hover gap テストとの両立のため) */
  hanging-punctuation: allow-end;
}

/* 2026-11-04: ≤480 は下寄せボトムシート
   計画: .kilo/plans/20261104-mapping-links-and-mobile-modal-drawer-plan.md §3-5 */
.page-id-11 .character-modal-grabber {
  display: none;
  flex: 0 0 auto;
  width: 40px;
  height: 4px;
  margin: 0.55em auto 0.1em;
  border-radius: 2px;
  background: var(--color-border, #DCE6EE);
}

@media (max-width: 480px) {
  .page-id-11 .character-modal-dialog {
    left: 12px;
    right: 12px;
    top: auto;
    bottom: 12px;
    width: auto;
    max-height: 90vh;
    border-radius: 16px;
    opacity: 1;
    transform: translateY(calc(100% + 12px));
  }

  .page-id-11 .character-modal-dialog.is-open {
    opacity: 1;
    transform: translateY(0);
  }

  .page-id-11 .character-modal-grabber {
    display: block;
  }

  .page-id-11 .character-modal-head {
    border-radius: 16px 16px 0 0;
    touch-action: none;
  }

  .page-id-11 .character-modal-body {
    border-radius: 0;
  }

  .page-id-11 .character-modal-foot {
    border-radius: 0 0 16px 16px;
  }
}