/* ============================================================
   BeautePress — カスタムスタイル
   カラー: #B89968(main) / #FAF7F2(bg) / #2C2620(text)
          #8B6F47(accent) / #7A8F6B(success) / #C17A6F(danger)
   ============================================================ */

:root {
  --c-main:    #B89968;
  --c-accent:  #8B6F47;
  --c-bg:      #FAF7F2;
  --c-text:    #2C2620;
  --c-success: #7A8F6B;
  --c-danger:  #C17A6F;
  --c-border:  #E8DDD0;
  --c-surface: #FFFFFF;
  --c-muted:   #F5F0EB;

  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
}

/* ---- Base ---- */
*, *::before, *::after { box-sizing: border-box; }

body {
  background-color: var(--c-bg);
  color: var(--c-text);
  font-family: 'Noto Sans JP', sans-serif;
  -webkit-text-size-adjust: 100%;
  line-height: 1.6;
}

/* ---- Buttons ---- */
.btn-main {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--c-main);
  color: #fff;
  border: none;
  border-radius: var(--radius-md);
  font-family: inherit;
  font-weight: 700;
  cursor: pointer;
  transition: background-color .15s, transform .1s;
  min-height: 48px;
  padding: 0 1.25rem;
  text-decoration: none;
}
.btn-main:hover  { background-color: var(--c-accent); }
.btn-main:active { background-color: #7a6040; transform: scale(.98); }

.btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: var(--c-main);
  border: 1.5px solid var(--c-main);
  border-radius: var(--radius-md);
  font-family: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: background-color .15s;
  min-height: 48px;
  padding: 0 1.25rem;
  text-decoration: none;
}
.btn-outline:hover { background-color: #fdf3e8; }

/* ---- Form inputs — iOS ズーム防止のため 16px 以上 ---- */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="time"],
input[type="date"],
input[type="number"],
textarea,
select {
  font-size: 16px;
  font-family: inherit;
  color: var(--c-text);
}

/* ---- Cards ---- */
.card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  box-shadow: 0 1px 4px rgba(44,38,32,.06);
}

/* ---- Touch targets (最低 44×44px) ---- */
.touch-target {
  min-height: 44px;
  min-width:  44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---- Calendar cell available-day ---- */
/* Phase 113: 予約できる日は常時うすい色のチップ（角丸＋カレンダー色の薄塗り）＝見ただけで「押せる」と分かる。
   これにより「○のある日をタップ…」の説明文を撤去。色はカレンダー色トークンから自動（color-mix 非対応は薄ベージュ）。 */
.cal-day-open {
  cursor: pointer;
  transition: background-color .12s;
  border-radius: 14px;
  margin: 3px;
  background-color: #fdf3e8;
}
.cal-day-open:hover  { background-color: #f9e9d5; }
.cal-day-open:active { background-color: #f7e4c8; }
@supports (background: color-mix(in srgb, red 10%, transparent)) {
  .cal-day-open          { background-color: color-mix(in srgb, var(--c-calendar, var(--c-main)) 12%, transparent); }
  .cal-day-open:hover    { background-color: color-mix(in srgb, var(--c-calendar, var(--c-main)) 22%, transparent); }
  .cal-day-open:active   { background-color: color-mix(in srgb, var(--c-calendar, var(--c-main)) 32%, transparent); }
}

.cal-mark {
  display: inline-block;
  width: 28px;
  height: 28px;
  line-height: 28px;
  text-align: center;
  border-radius: 50%;
  background-color: var(--c-calendar, var(--c-main)); /* Phase 36b: カレンダー色トークン（NULL時 var(--c-main)＝現状） */
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  margin-top: 2px;
}
/* Phase 92: 撮影会イベントの日の○。--c-event（既定でも通常○と区別できる色）で塗る。 */
.cal-mark--event {
  background-color: var(--c-event, var(--c-calendar, var(--c-main)));
}

/* ---- Status badges ---- */
.badge-confirmed { background:#E8F3E5; color:#3D6B38; }
.badge-cancelled { background:#F5EDED; color:#8B4040; }
.badge-completed { background:#E5EDF5; color:#2F5A8A; }

/* ---- Admin table ---- */
.admin-table tbody tr:hover { background-color: #fdf7f0; }
.admin-table th {
  font-size: .75rem;
  font-weight: 600;
  color: #7a6b5a;
  text-transform: uppercase;
  letter-spacing: .03em;
}

/* ---- Animations ---- */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; }
}
/* Phase 25g-fix2: to から identity transform(translateY(0)) を除去。animation-fill-mode:both で .fade-in に
   transform が残り続けると、その内側の position:fixed が viewport でなく .fade-in 基準になる（パネル/背景が
   ページ上部・幅760に寄る不具合）。除去しても見た目（最終 translateY 0＝none）は不変。 */
.fade-in { animation: fadeIn .25s ease both; }

/* ---- Scrollbar (Webkit) ---- */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #d4c4b0; border-radius: 3px; }

/* ============================================================
   Phase 12a: 設定画面 縦サイドメニューレイアウト
   ============================================================ */
.settings-layout {
  display: flex;
  gap: 24px;
  align-items: flex-start;
}

.settings-sidebar {
  width: 220px;
  flex-shrink: 0;
  position: sticky;
  top: 16px;
  align-self: flex-start;
}

.settings-menu {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.settings-menu-category {
  font-size: 12px;
  font-weight: 700;
  color: #a99c8a;
  letter-spacing: .04em;
  padding: 14px 12px 4px;
}
.settings-menu-category:first-child { padding-top: 0; }

.settings-menu-link {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 12px;
  border-radius: 10px;
  font-size: .9rem;
  font-weight: 600;
  color: #6b6055;
  text-decoration: none;
  border-left: 3px solid transparent;
  transition: background-color .12s, color .12s;
}
.settings-menu-link:hover { background-color: #f5ede0; color: var(--c-text); }
.settings-menu-link.active {
  background-color: #fff8f0;
  color: var(--c-main);
  border-left-color: var(--c-main);
}
.settings-menu-link:focus-visible {
  outline: 2px solid var(--c-main);
  outline-offset: 2px;
}

.settings-content {
  flex: 1;
  min-width: 0;
  max-width: 760px;
}

/* ---- モバイル: 横スクロールタブ ---- */
@media (max-width: 767px) {
  .settings-layout { flex-direction: column; gap: 1rem; }
  .settings-sidebar { width: 100%; position: static; }
  .settings-menu {
    flex-direction: row;
    overflow-x: auto;
    white-space: nowrap;
    gap: 0;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--c-muted);
  }
  .settings-menu-category { display: none; }
  .settings-menu-link {
    flex-shrink: 0;
    min-height: 44px;
    padding: 8px 16px;
    border-left: none;
    border-bottom: 2px solid transparent;
    border-radius: 8px 8px 0 0;
    margin-bottom: -2px;
  }
  .settings-menu-link.active {
    background-color: transparent;
    border-bottom-color: var(--c-main);
  }
  .settings-content { max-width: 100%; }
}

/* ============================================================
   Phase 12b: 予約ページ デザインテンプレート
   ============================================================ */
:root {
  --accent-color: #333333;
  --bg-color: #ffffff;
  --text-color: #1a202c;
  --heading-font: system-ui, -apple-system, 'Noto Sans JP', sans-serif;
  --body-font: system-ui, -apple-system, 'Noto Sans JP', sans-serif;
  --tpl-radius: 4px;
}

/* テンプレート別の変数上書き */
/* Phase 25c-fix: 背景の塗りを var(--c-bg) に統一（旧 --bg-color では design_color_bg(--c-bg) が効かなかった）。
   テンプレ別の既定背景は --c-bg にも反映し、背景未設定なら従来のテンプレ既定背景を維持する。
   --bg-color は後方互換のため残置（現在は未使用）。 */
[data-template="minimal"] {
  --bg-color: #ffffff;
  --c-bg: #ffffff;
  --text-color: #1a202c;
  --c-text: #1a202c; /* Phase 25c-fix4: 文字色を --c-text に統一（テンプレ既定。design_color_text 未設定時に使用） */
  --heading-font: system-ui, -apple-system, 'Noto Sans JP', sans-serif;
  --body-font: system-ui, -apple-system, 'Noto Sans JP', sans-serif;
  --tpl-radius: 4px;
}
[data-template="elegant"] {
  --bg-color: #faf8f5;
  --c-bg: #faf8f5;
  --text-color: #2d2926;
  --c-text: #2d2926; /* Phase 25c-fix4 */
  --heading-font: 'Noto Serif JP', 'Yu Mincho', serif;
  --body-font: 'Noto Sans JP', sans-serif;
  --tpl-radius: 2px;
}
[data-template="natural"] {
  --bg-color: #f5efe6;
  --c-bg: #f5efe6;
  --text-color: #3d3527;
  --c-text: #3d3527; /* Phase 25c-fix4 */
  --heading-font: 'Noto Sans JP', sans-serif;
  --body-font: 'Noto Sans JP', sans-serif;
  --tpl-radius: 16px;
}

/* テンプレート適用（顧客レイアウトの body / 管理プレビューの .bp-stage）。
   Phase 25a: iframe撤廃に伴い [data-template] → [data-template] に汎用化。
   公開ページ([data-template])は引き続き一致し、管理画面の直接埋め込みプレビュー
   (.bp-stage[data-template]) にも同じテンプレCSSを適用＝見た目を完全一致させる。
   ※ data-template を持つ要素配下にだけ効くので、管理画面の他要素・公開ページに影響しない。 */
[data-template] {
  background-color: var(--c-bg); /* Phase 25c-fix: design_color_bg(--c-bg) を背景に反映 */
  color: var(--c-text); /* Phase 25c-fix4: 文字色を --c-text に統一（design_color_text／テンプレ別 --c-text） */
  font-family: var(--body-font);
}
[data-template] h1,
[data-template] h2,
[data-template] .catchphrase {
  font-family: var(--heading-font);
}
/* アクセントカラーをメインボタン等へ反映 */
[data-template] .btn-main {
  background-color: var(--accent-color);
}
[data-template] .btn-main:hover {
  filter: brightness(0.9);
}
[data-template] .btn-outline {
  color: var(--accent-color);
  border-color: var(--accent-color);
}

/* キャッチコピー・自己紹介文 */
/* Phase 77: 寄せ/大きさは --bp-text-align / --bp-font-scale で可変（未設定時は var() フォールバックで従来値＝1px不変） */
.catchphrase {
  font-size: calc(1.25rem * var(--bp-font-scale, 1));
  font-weight: 700;
  text-align: var(--bp-text-align, center);
  line-height: 1.6;
  color: var(--c-text); /* Phase 25c-fix4: 文字色を --c-text に統一 */
  margin-bottom: .75rem;
}
.bio {
  max-width: 720px;
  margin: 0 auto;
  font-size: calc(.9rem * var(--bp-font-scale, 1));
  line-height: 1.95;
  color: var(--c-text); /* Phase 25c-fix4: 文字色を --c-text に統一 */
  text-align: var(--bp-text-align, center);
  opacity: .9;
}
[data-template="elegant"] .catchphrase { letter-spacing: .05em; }
[data-template="natural"] .catchphrase { font-size: calc(1.3rem * var(--bp-font-scale, 1)); }

/* ============================================================
   Phase 12c: 予約ページ 画像（プロフィール・ヘッダー）
   ============================================================ */
.page-header-image {
  width: 100%;
  margin-bottom: 24px;
  border-radius: var(--tpl-radius, 4px);
  overflow: hidden;
}
.page-header-image img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 1;
  object-fit: cover;
}

/* 標準レイアウト：丸画像と自己紹介は常に縦並び（横に列にしない・全画面幅で）。 */
.profile-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.profile-image {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
/* テンプレート別のプロフィール枠 */
[data-template="minimal"] .profile-image { border: none; }
[data-template="elegant"] .profile-image { border: 2px solid var(--accent-color); }
[data-template="natural"] .profile-image { border: 4px solid #e8dcc8; }

/* 縦並びになったので自己紹介は中央寄せを既定に（寄せ設定があればそちらが勝つ）。 */
.profile-block .bio { text-align: var(--bp-text-align, center); margin: 0; }

/* プロフィールの名前・肩書き・自己紹介は、長くなったら自動で折り返す（全レイアウト共通）。
   スペースの無い長い文字列もはみ出さず2行以上になる。 */
.catchphrase, .profile-title, .bio {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* プロフィール文字色（任意）。#pi-section に --pi-text-color が出ているときだけその色、無ければ --c-text。
   !important で title の inline color(var(--c-text)) も上書き（未設定時は同値＝無回帰）。 */
#pi-section .catchphrase,
#pi-section .profile-title,
#pi-section .bio,
#pi-section .bp-seo-meta {
  color: var(--pi-text-color, var(--c-text)) !important;
}


/* プロフィール=X風オーバーラップ：丸プロフィール画像を横長画像の下辺中央に半分重ねる。
   classic（既定）には一切影響しない（data-profile-layout="overlap" のときだけ適用）。 */
[data-profile-layout="overlap"] .page-header-image { margin-bottom: 0; }
[data-profile-layout="overlap"] .pi-avatar-overlap {
  display: flex;
  justify-content: center;
  margin-top: 1rem;        /* ヘッダー画像が無いときの通常余白（重ねない） */
  margin-bottom: .85rem;
  position: relative;
  z-index: 2;
  /* 横幅いっぱいの透明な帯が下のヘッダー画像のクリックを奪うのを防ぐ＝
     丸アイコン以外はクリックを下へ通す（編集画面で周辺をクリックできるように）。 */
  pointer-events: none;
}
/* ヘッダー画像が「ある」ときだけ半分重ねる（消すとナビ帯に食い込むのを防ぐ）。 */
[data-profile-layout="overlap"] .page-header-image + .pi-avatar-overlap {
  margin-top: -60px;       /* 丸(120px)の半分ぶん上へ＝ヘッダーに半分重なる */
}
[data-profile-layout="overlap"] .pi-avatar-overlap .profile-image {
  pointer-events: auto;    /* 丸アイコン自体はクリック可（画像差し替え） */
}
/* 重なり表示の丸画像：詳細度を下げて（.pi-avatar-overlap を外す）枠スタイル8種（[data-blockstyle] .profile-image）に
   負ける＝枠スタイルを選んでいればそれを優先で丸画像にも適用。未選択のときだけ下の白フチが既定で出る。 */
[data-profile-layout="overlap"] .profile-image {
  border: 4px solid var(--c-bg, #fff);   /* 既定：ページ背景色のフチで“切り抜き”風（枠スタイル選択時はそちらが勝つ） */
  box-shadow: 0 2px 10px rgba(0,0,0,.18);
  margin: 0;
}
/* overlap では肩書き/自己紹介は丸画像の下に中央寄せで続く */
[data-profile-layout="overlap"] .profile-block { flex-direction: column; align-items: center; }
[data-profile-layout="overlap"] .profile-block .bio { text-align: var(--bp-text-align, center); }

/* プロフィール=sidetext：左に丸画像／右にキャッチ・肩書き・自己紹介の3つを縦に。 */
[data-profile-layout="sidetext"] .pi-side {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 1rem;
}
[data-profile-layout="sidetext"] .pi-side .profile-image { flex: none; margin: 0; }
[data-profile-layout="sidetext"] .pi-side-texts { flex: 1 1 auto; min-width: 0; }
/* 右カラムは左寄せを既定に（title の inline text-align:center / 各 margin を上書き）。
   長いテキスト（スペースの無い文字列含む）は自動で折り返す＝はみ出さず2行以上になる。 */
[data-profile-layout="sidetext"] .pi-side-texts > * {
  text-align: var(--bp-text-align, left) !important;
  margin: 0 0 .4rem !important;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}
[data-profile-layout="sidetext"] .pi-side-texts > *:last-child { margin-bottom: 0 !important; }
@media (max-width: 380px) {
  /* 極小画面は丸画像を少し小さく */
  [data-profile-layout="sidetext"] .pi-side .profile-image { width: 96px; height: 96px; }
}

/* 設定画面: 画像プレビュー枠 */
.image-preview-frame {
  position: relative;
  width: 100%;
  border: 2px dashed var(--c-border, #ccc);
  background: #f7f4ef;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.image-preview-text {
  position: absolute;
  font-size: .75rem;
  color: #aaa;
}

/* ============================================================
   Phase 12d: ギャラリー（管理UI・顧客表示・ライトボックス）
   ============================================================ */
/* --- 管理画面: アップロード/並び替え --- */
.gallery-upload-area .dropzone,
#galDropzone {
  border: 2px dashed var(--c-border, #ccc);
  border-radius: 10px;
  padding: 32px 16px;
  text-align: center;
  cursor: pointer;
  background: #faf7f2;
  transition: background-color .15s, border-color .15s;
}
#galDropzone:hover { background: #f5ede0; }
#galDropzone.dragover {
  border-color: var(--c-main, #B89968);
  background: #fff3e0;
}
.upload-progress .error { color: #c17a6f; }

.gallery-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.gallery-item {
  position: relative;
  aspect-ratio: 3 / 2;
  border-radius: 8px;
  overflow: hidden;
  background: #eee;
  cursor: default;
}
.gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gallery-delete-btn {
  position: absolute; top: 4px; right: 4px;
  background: rgba(193,122,111,.92); color: #fff;
  border: none; border-radius: 6px;
  font-size: .7rem; padding: .2rem .45rem; cursor: pointer;
  font-family: inherit;
}
.drag-handle {
  position: absolute; left: 4px; top: 4px;
  background: rgba(0,0,0,.45); color: #fff;
  border-radius: 6px; font-size: .8rem; padding: .1rem .35rem;
  cursor: move; user-select: none; line-height: 1;
}
.gallery-expand-form { text-align: left; }

@media (max-width: 600px) {
  .gallery-list { grid-template-columns: repeat(2, 1fr); }
}

/* --- Phase 23o: 公開ページの大ブロック間の余白（約10px・並び順に依存しない） ---
   公開ページ(calendar.php)では profile/calendar/gallery/sns の各ブロックを .bp-pblock で包む。
   隣接する .bp-pblock の間にだけ 10px を付ける（先頭は付かない＝ヘッダーとの間隔は不変）。
   各ブロックは内部に独自の上下余白(profile margin-bottom:1.5rem / gallery padding-top:2rem /
   sns inline margin-top:1.5rem)を持つため、.bp-pblock 内ではそれらを中和して隙間を 10px に一本化。
   マージン相殺で半減しないよう、ブロック側の上下マージンを 0 にしている。
   ※ .bp-pblock は公開ページのみで使用（/admin/design のプレビューや管理画面では未使用＝無影響）。 */
.bp-pblock + .bp-pblock { margin-top: 10px; }
.bp-pblock > section { margin-top: 0 !important; margin-bottom: 0 !important; }
.bp-pblock > .gallery-section { padding-top: 0 !important; }

/* --- Phase 27e: リンクボタンの枠デザイン（4種・全リンク一括）。既定 .bp-link-btn は従来のインラインstyleと同一。
   data-btnstyle（body / .bp-stage）で形状/枠/影だけ切替（色＝var(--c-main) は不変）。公開・プレビュー共通。 --- */
.bp-link-btn {
  display: flex; align-items: center; justify-content: center; min-height: 52px;
  padding: .75rem 1.25rem; border-radius: 14px; background: var(--block-fill-color, var(--c-main)); color: var(--c-text);
  /* Phase 77: ボタン文字も大きさ倍率に追従（未設定=1=従来） */
  font-weight: 700; font-size: calc(.95rem * var(--bp-font-scale, 1)); text-decoration: none; line-height: 1.4; text-align: center;
  word-break: break-word; box-shadow: 0 1px 4px rgba(44, 38, 32, .10); transition: opacity .12s;
  box-sizing: border-box; /* outline でボーダーを足しても外寸が変わらない（既定は従来と同一表示） */
}
/* 角張り塗り */
[data-btnstyle="square"] .bp-link-btn { border-radius: 4px; }
/* 枠線のみ（背景なし・アクセント色のボーダー＆文字）。box-sizing:border-box でサイズ不変 */
[data-btnstyle="outline"] .bp-link-btn {
  background: transparent; color: var(--c-main); border: 2px solid var(--c-main); box-shadow: none;
}
/* 影付き（立体） */
[data-btnstyle="shadow"] .bp-link-btn { box-shadow: 0 6px 16px rgba(44, 38, 32, .28); }
/* rounded（既定）は .bp-link-btn そのまま */

/* Phase 88: リッチボタン（アイコン/画像＋タイトル＋サブ説明）。シンプル(.bp-link-btn のみ)は従来の中央寄せのまま。 */
.bp-link-btn.bp-link-btn-rich { justify-content: flex-start; gap: 12px; text-align: left; padding-top: 8px; padding-bottom: 8px; }
.bp-link-btn-ico { flex: 0 0 auto; width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; }
.bp-link-btn-ico img { width: 60px; height: 60px; object-fit: cover; border-radius: 10px; display: block; }
.bp-link-btn-snsico { color: var(--c-text); } /* SNSアイコンSVGは currentColor＝ボタン文字色に追従 */
.bp-link-btn-snsico svg { width: 40px; height: 40px; } /* 自動SNSアイコンも画像に合わせて大きく */
.bp-link-btn-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.bp-link-btn-title { font-weight: 700; line-height: 1.3; }
.bp-link-btn-sub { font-weight: 400; font-size: calc(.78rem * var(--bp-font-scale, 1)); opacity: .85; line-height: 1.45; }
.bp-link-btn-ph { opacity: .55; font-weight: 400; } /* 編集の空ボタン「（タップして入力）」 */

/* --- Phase 89a: 文章（テキスト）ブロック。枠は .card（下の data-blockstyle 8種に追従＝他ブロックと一致）。
   タイトル=見出しフォント(--heading-font)／本文=本文フォント(--body-font)・改行保持。色/寄せ/大きさもページ設定に追従。
   公開(public_link_item.php)／編集プレビュー(design/index.php)共用。 --- */
[data-template] .bp-text-block { padding: 1rem 1.1rem; text-align: var(--bp-text-align, center); }
[data-template] .bp-text-title {
  font-family: var(--heading-font);
  font-weight: 700; font-size: calc(1.1rem * var(--bp-font-scale, 1));
  line-height: 1.5; color: var(--c-text);
}
[data-template] .bp-text-body {
  font-family: var(--body-font);
  font-size: calc(.95rem * var(--bp-font-scale, 1)); line-height: 1.85;
  color: var(--c-text); white-space: pre-wrap; word-break: break-word;
}
[data-template] .bp-text-block .bp-text-title + .bp-text-body { margin-top: .45rem; }
/* Phase 89e: 軽い装飾の本文（太字＋マーカー）。改行は <br> で表現＝white-space は normal に。
   マーカー＝選択文字の背景色。クラス許可リスト（bp-mk-y/p/g/b）で色を固定（任意の色コードはHTMLに通さない）。 */
[data-template] .bp-text-body.bp-text-rich { white-space: normal; }
[data-template] .bp-text-body.bp-text-rich strong { font-weight: 700; }
[data-template] .bp-text-body.bp-text-rich mark { background: transparent; color: inherit; border-radius: 2px; padding: 0 .08em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
[data-template] .bp-text-body.bp-text-rich mark.bp-mk-y { background: #fff3a0; }
[data-template] .bp-text-body.bp-text-rich mark.bp-mk-p { background: #ffd0e0; }
[data-template] .bp-text-body.bp-text-rich mark.bp-mk-g { background: #c8f0c2; }
[data-template] .bp-text-body.bp-text-rich mark.bp-mk-b { background: #cbe6fb; }
/* Phase 89g: 見出し（タイトル）も軽い装飾（太字/マーカー）に対応。マーカー＝本文と同じクラス許可リスト（bp-mk-y/p/g/b）。 */
[data-template] .bp-text-title strong { font-weight: 700; }
[data-template] .bp-text-title mark { background: transparent; color: inherit; border-radius: 2px; padding: 0 .08em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
[data-template] .bp-text-title mark.bp-mk-y { background: #fff3a0; }
[data-template] .bp-text-title mark.bp-mk-p { background: #ffd0e0; }
[data-template] .bp-text-title mark.bp-mk-g { background: #c8f0c2; }
[data-template] .bp-text-title mark.bp-mk-b { background: #cbe6fb; }
/* Phase 89f: 本文中の自動リンク。色はページの文字色に合わせ、下線で「リンク」とわかるように。 */
[data-template] .bp-text-body a { color: inherit; text-decoration: underline; text-underline-offset: 2px; word-break: break-all; }

/* --- Phase 65: SNSピル（フォローボタン）をページ設定に全面同期。
   書体=var(--body-font) / 文字色=var(--c-text) / 塗り=var(--block-fill-color) /
   枠色=var(--block-border-color)（＝文字色 --c-text 追従・他ブロックと一致） /
   枠の形=下の data-blockstyle 8種（.bp-link-btn と同じ挙動・SNSもセレクタに追加）。
   既定（data-blockstyle 無し）は従来のピル形（radius999・1px枠）を再現。
   公開(public_sns.php の <a>)／編集プレビュー(design/index.php の <span>)共用。
   Phase 66: 親が最大3列・等幅グリッド（repeat(N,minmax(0,1fr))）。pill はセルいっぱいに伸び、
             中身（アイコン＋任意テキスト）を中央寄せ＝justify-content:center / min-width:0。 --- */
[data-template] .bp-sns-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-width: 0; min-height: 44px; padding: .5rem .875rem;
  border-radius: 999px; background: var(--block-fill-color, #fff);
  border: 1px solid var(--block-border-color, var(--c-border));
  color: var(--c-text); text-decoration: none;
  font-family: var(--body-font, inherit); font-size: 14px;
  box-sizing: border-box; transition: background-color .12s, border-color .12s, box-shadow .12s;
}
[data-template] .bp-sns-btn:hover { background: var(--block-fill-color, #fdf3e8); }

/* ============================================================
   Phase 35a / 76: 枠スタイル8種（全ブロック共通・完全統一）。<body>/.bp-stage の data-blockstyle で発火。
   対象＝ボタン(.bp-link-btn)/SNS(.bp-sns-btn)/カード([data-blockstyle] .card＝公開ラッパ限定)/料金(.pv-plan)/
         画像(.bp-pic-img・.gallery-thumb・.bp-gal-item)/月タブ帯・ギャラリータブ(.bp-month-strip)。
   Phase 76: owner要望で「ブロックごとに違う当て方」を廃止し、各スタイルを全ブロックに同一適用。
     ・影系(float/offset/soft)を画像・月タブ帯にも付与（従来は抑制されていた）。
     ・pill は控えめ丸み 20px で全統一（ボタンの r999 廃止）。double は 3px、offset は 3px ハード影で全統一。
     ・offset/float の影は密グリッド(ギャラリー gap 4〜8px)でも収まる控えめ値。
   枠色＝var(--block-border-color, var(--c-border))（35f以降は文字色 var(--c-text) 追従）。塗りは var(--c-main)/surface 据え置き。
   ※全セレクタ [data-blockstyle] 配下限定＝管理画面(layouts/admin.php)に無波及。data-blockstyle 非出力(既定)時は全不発火＝現状同一。
   ※owner要望でprofile/ヘッダー画像も対象に追加（profile は円形維持の上書きあり・下記参照）。カレンダー内部グリッド線/月タブ区切り/アクティブ塗り/予約動作には不接触。
   ※box-shadow は要素自身の overflow:hidden では隠れない（月タブ帯/ギャラリーにも影が出る）。
   ============================================================ */

/* 既定（data-blockstyle 無し＝属性なし）は現状同一：picture=r14 / 月タブ帯=1.5px枠+r16 / gal-item(プレビュー専用)=r8。 */
.bp-pic-img     { border-radius: 14px; }
.bp-month-strip { border: 1.5px solid var(--block-border-color, var(--c-border)); border-radius: 16px; }
.bp-gal-item    { border-radius: 8px; }

/* Phase 87a: グリッドピクチャ（横3枚/横4枚）。列数は inline grid-template-columns。各セルは正方形 cover。
   .bp-pic-cell-img は .bp-pic-img も併せ持つので枠スタイル8種（border/影/radius）に追従する。 */
.bp-pic-grid     { display: grid; gap: 8px; }
.bp-pic-cell     { position: relative; }
.bp-pic-cell-img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; }
/* Phase 87d: 固定スロットの空き枠（公開）。透明だが列を保持＝左右だけ入れたら中央が空く（位置固定）。 */
.bp-pic-slot-empty { aspect-ratio: 1 / 1; background: transparent; }

/* Phase 87b: スライド（横スワイプ・CSS scroll-snap）。次の写真が少し見切れて「スワイプで続く」を示す。
   Phase 87b-fix: 前へ/次への矢印を重ねる（デスクトップのクリック操作用。スマホはスワイプ＋矢印どちらでも）。 */
.bp-pic-slide        { width: 100%; position: relative; }
/* Phase 87c-6: overflow-x:auto は overflow-y も auto 化し枠スタイルの box-shadow(float/offset/soft)を上下左右でクリップする。
   トラックに余白を持たせて影が収まるようにする（clip は padding box の外側＝余白分は影が見える）。scroll-padding で snap も余白に合わせる。 */
.bp-pic-slide-track  { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: 8px 6px 16px; scroll-padding-left: 6px; }
.bp-pic-slide-track::-webkit-scrollbar { display: none; }
.bp-pic-slide-track > .bp-pic-cell { flex: 0 0 86%; scroll-snap-align: start; }
.bp-pic-slide-img    { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.bp-pic-slide-nav    { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 36px; height: 36px; border: none; border-radius: 50%; background: rgba(0,0,0,.5); color: #fff; font-size: 1.3rem; line-height: 36px; text-align: center; cursor: pointer; padding: 0; }
.bp-pic-slide-prev   { left: 8px; }
.bp-pic-slide-next   { right: 8px; }

/* ① standard：細枠＋小角丸 */
[data-blockstyle="standard"] .bp-link-btn,
[data-blockstyle="standard"] .bp-sns-btn,
[data-blockstyle="standard"] .card,
[data-blockstyle="standard"] .pv-plan,
[data-blockstyle="standard"] .bp-pic-img,
[data-blockstyle="standard"] .gallery-thumb,
[data-blockstyle="standard"] .bp-gal-item,
[data-blockstyle="standard"] .bp-month-strip,
  [data-blockstyle="standard"] .page-header-image,
  [data-blockstyle="standard"] .profile-image {
  border: 1px solid var(--block-border-color, var(--c-border)); border-radius: 6px; box-shadow: none;
}
/* ② fill：塗りつぶし（枠なし・フラット） */
[data-blockstyle="fill"] .bp-link-btn,
[data-blockstyle="fill"] .bp-sns-btn,
[data-blockstyle="fill"] .card,
[data-blockstyle="fill"] .pv-plan,
[data-blockstyle="fill"] .bp-pic-img,
[data-blockstyle="fill"] .gallery-thumb,
[data-blockstyle="fill"] .bp-gal-item,
[data-blockstyle="fill"] .bp-month-strip,
  [data-blockstyle="fill"] .page-header-image,
  [data-blockstyle="fill"] .profile-image {
  border: none; border-radius: 14px; box-shadow: none;
}
/* ③ pill：控えめの丸み 20px で全ブロック統一 */
[data-blockstyle="pill"] .bp-link-btn,
[data-blockstyle="pill"] .bp-sns-btn,
[data-blockstyle="pill"] .card,
[data-blockstyle="pill"] .pv-plan,
[data-blockstyle="pill"] .bp-pic-img,
[data-blockstyle="pill"] .gallery-thumb,
[data-blockstyle="pill"] .bp-gal-item,
[data-blockstyle="pill"] .bp-month-strip,
  [data-blockstyle="pill"] .page-header-image,
  [data-blockstyle="pill"] .profile-image {
  border: 1.5px solid var(--block-border-color, var(--c-border)); border-radius: 20px; box-shadow: none;
}
/* ④ float：影付き浮き（全ブロック共通・密グリッド配慮の控えめ影） */
[data-blockstyle="float"] .bp-link-btn,
[data-blockstyle="float"] .bp-sns-btn,
[data-blockstyle="float"] .card,
[data-blockstyle="float"] .pv-plan,
[data-blockstyle="float"] .bp-pic-img,
[data-blockstyle="float"] .gallery-thumb,
[data-blockstyle="float"] .bp-gal-item,
[data-blockstyle="float"] .bp-month-strip,
  [data-blockstyle="float"] .page-header-image,
  [data-blockstyle="float"] .profile-image {
  border: none; border-radius: 14px; box-shadow: 0 4px 12px rgba(0, 0, 0, .15);
}
/* ⑤ double：二重線・太枠（3px 全統一） */
[data-blockstyle="double"] .bp-link-btn,
[data-blockstyle="double"] .bp-sns-btn,
[data-blockstyle="double"] .card,
[data-blockstyle="double"] .pv-plan,
[data-blockstyle="double"] .bp-pic-img,
[data-blockstyle="double"] .gallery-thumb,
[data-blockstyle="double"] .bp-gal-item,
[data-blockstyle="double"] .bp-month-strip,
  [data-blockstyle="double"] .page-header-image,
  [data-blockstyle="double"] .profile-image {
  border: 3px double var(--block-border-color, var(--c-border)); border-radius: 8px; box-shadow: none;
}
/* ⑥ sharp：角ばり（radius 0） */
[data-blockstyle="sharp"] .bp-link-btn,
[data-blockstyle="sharp"] .bp-sns-btn,
[data-blockstyle="sharp"] .card,
[data-blockstyle="sharp"] .pv-plan,
[data-blockstyle="sharp"] .bp-pic-img,
[data-blockstyle="sharp"] .gallery-thumb,
[data-blockstyle="sharp"] .bp-gal-item,
[data-blockstyle="sharp"] .bp-month-strip,
  [data-blockstyle="sharp"] .page-header-image,
  [data-blockstyle="sharp"] .profile-image {
  border: 1.5px solid var(--block-border-color, var(--c-border)); border-radius: 0; box-shadow: none;
}
/* ⑦ offset：オフセット影（lit.link風ハードシャドウ＝枠色連動・3px 全統一・密グリッド対応） */
[data-blockstyle="offset"] .bp-link-btn,
[data-blockstyle="offset"] .bp-sns-btn,
[data-blockstyle="offset"] .card,
[data-blockstyle="offset"] .pv-plan,
[data-blockstyle="offset"] .bp-pic-img,
[data-blockstyle="offset"] .gallery-thumb,
[data-blockstyle="offset"] .bp-gal-item,
[data-blockstyle="offset"] .bp-month-strip,
  [data-blockstyle="offset"] .page-header-image,
  [data-blockstyle="offset"] .profile-image {
  border: 1.5px solid var(--block-border-color, var(--c-border)); border-radius: 6px; box-shadow: 3px 3px 0 var(--block-border-color, var(--c-border));
}
/* ⑧ soft：淡い（薄枠＋大きめ角丸＋ささやき影＝ふんわり）。color-mix 非対応環境でも安全な固定rgba。 */
[data-blockstyle="soft"] .bp-link-btn,
[data-blockstyle="soft"] .bp-sns-btn,
[data-blockstyle="soft"] .card,
[data-blockstyle="soft"] .pv-plan,
[data-blockstyle="soft"] .bp-pic-img,
[data-blockstyle="soft"] .gallery-thumb,
[data-blockstyle="soft"] .bp-gal-item,
[data-blockstyle="soft"] .bp-month-strip,
  [data-blockstyle="soft"] .page-header-image,
  [data-blockstyle="soft"] .profile-image {
  border: 1px solid var(--block-border-color, var(--c-border)); border-radius: 16px; box-shadow: 0 2px 7px rgba(0, 0, 0, .06);
}

/* Phase 76: 旧 Phase 35a-3 / 35a-5 の「画像 facet」「月タブ帯外周 facet」は、上の統一ルール（各スタイル＝全ブロック同一）へ吸収。
   画像/月タブ帯の border/radius/影は全スタイルで他ブロックと一致＝owner要望の「全部に適用」。基底 .bp-pic-img/.bp-month-strip/.bp-gal-item は上で定義済み。 */

/* owner要望: ヘッダー画像(.page-header-image)・プロフィール画像(.profile-image)にも枠スタイル8種を適用（上の各ルールに追加済み）。
   プロフィール画像（丸）は枠スタイルの border/影は受けつつ、形は常に円形を維持（角丸の上書きを無効化）。
   overlap の白フチ（[data-profile-layout="overlap"] .pi-avatar-overlap .profile-image）はより詳細度が高く優先される。 */
[data-blockstyle] .profile-image { border-radius: 50%; }

/* --- 顧客ページ: ギャラリー表示 --- */
.gallery-section { padding: 2rem 0 0; }
.gallery-heading {
  text-align: center;
  margin-bottom: 1.5rem;
  font-family: var(--heading-font, sans-serif);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--text-color, #2C2620);
}
/* Phase 55f: 作品集テーマタブをカレンダー月タブと同じ「連結セグメント帯」に。
   最大3つ表示・超過は ←/→ で3つずつ窓送り・1つ=全幅/2つ=半分/3つ=1/3（flex-1）。
   外周の枠/角は .bp-month-strip（枠スタイル8種に既に同期）を流用。フォントは --body-font に追従。
   セグメントは公開 .gallery-tab / 編集 .bp-gal-tab 共通（custom.css は公開・admin 両方で読込済み）。 */
/* Phase 168: 料金の種類タブ（.pv-prc-tabs / .pv-prc-tab）も作品集タブと同じ見た目・同じ挙動にする。 */
.gallery-tabs, .pv-prc-tabs {
  display: flex;
  overflow: hidden;
  margin-bottom: 1rem;
  /* Phase 55i: カレンダー背景色(--c-calendar-bg)とは非同期。独立した面色（白カード相当）を使う。 */
  background: var(--c-surface, #fff);
}
.gallery-tab, .bp-gal-tab, .pv-prc-tab {
  flex: 1 1 0;
  min-width: 0;
  padding: .85rem .4rem;
  text-align: center;
  border: none;            /* 区切り線(border-left)は JS が表示中の窓に対して付与 */
  background: transparent;
  /* Phase 55j: 文字の色設定(design_color_text → --c-text)に同期。--text-color はテンプレ固定で追従しないため使わない。 */
  color: var(--c-text, #2C2620);
  font-family: var(--body-font, inherit);
  font-size: .85rem;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  transition: background-color .12s, color .12s;
}
/* Phase 168/151e: 選択中は背景が差し色。文字は --c-on-main（差し色の明るさから自動判定した読める色）を使う。
   ⚠️ 以前は var(--c-text) で、差し色が濃い雰囲気だと黒地に黒文字で読めなかった（月タブと同じ不具合）。
   --c-on-main 未設定（色が未設定の人）は従来どおり --c-text にフォールバック。 */
.gallery-tab.is-active, .bp-gal-tab.is-active, .pv-prc-tab.is-active {
  background: var(--block-fill-color, var(--c-main, #c8a27a));
  color: var(--c-on-main, var(--c-text, #2C2620));
}
.gallery-tab-arrow {
  flex: 0 0 auto;
  padding: .85rem .85rem;
  border: none;
  background: transparent;
  color: var(--c-text, #2C2620);
  font-family: inherit;
  font-size: .9rem;
  font-weight: 700;
  cursor: pointer;
}
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.gallery-thumb {
  display: block;
  aspect-ratio: var(--gallery-aspect, 3 / 4);
  overflow: hidden;
  border-radius: var(--tpl-radius, 4px);
  cursor: pointer;
}
.gallery-thumb img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .2s, opacity .2s;
}
.gallery-thumb:hover img { transform: scale(1.03); opacity: .9; }

@media (max-width: 600px) {
  /* Phase 54: スマホも横3列（owner要望）。比率は --gallery-aspect で可変。 */
  .gallery-grid { grid-template-columns: repeat(3, 1fr); gap: 4px; }
}

/* --- ライトボックス --- */
.lightbox {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(0,0,0,.95);
  display: flex; align-items: center; justify-content: center;
}
.lightbox img { max-width: 95vw; max-height: 90vh; object-fit: contain; }
.lightbox-close {
  position: absolute; top: 16px; right: 16px;
  background: transparent; color: #fff; border: none;
  font-size: 32px; line-height: 1; cursor: pointer;
}
.lightbox-prev, .lightbox-next {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 48px; height: 48px; border-radius: 50%;
  background: rgba(255,255,255,.15); color: #fff; border: none;
  font-size: 28px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.lightbox-prev { left: 12px; }
.lightbox-next { right: 12px; }
.lightbox-counter {
  position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%);
  color: #fff; font-size: .8125rem;
  background: rgba(0,0,0,.4); padding: .25rem .75rem; border-radius: 999px;
}
[x-cloak] { display: none !important; }

/* ============================================================
   Phase 12d-fix: 空スロット・区切り線・枠削減
   ============================================================ */
.gallery-empty-slot {
  aspect-ratio: 3 / 2;
  border: 2px dashed #c8c0b3;
  border-radius: 8px;
  background: #faf7f1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}
.gallery-empty-slot:hover {
  border-color: var(--accent-color, #7a6040);
  background: #f5ede0;
  transform: scale(1.02);
}
.empty-slot-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  color: #a99c8a;
}
.empty-slot-icon { font-size: 32px; font-weight: 200; line-height: 1; }
.empty-slot-text { font-size: 12px; }
.gallery-empty-slot:hover .empty-slot-inner { color: var(--accent-color, #7a6040); }

/* 12枚ごとの区切り線（グリッド全幅） */
.gallery-divider {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 0;
  margin: 4px 0;
  position: relative;
}
.gallery-divider::before,
.gallery-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, transparent, #d4c4b0, transparent);
}
.gallery-divider-label {
  padding: 0 16px;
  font-size: 11px;
  color: #a99c8a;
  font-weight: 500;
  letter-spacing: 0.05em;
}

/* 枠削減ボタン disabled */
.gallery-shrink-form button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.gallery-shrink-form button:disabled:hover { background: #fff; }

/* ============================================================
   Phase 13: コンテキストヘルプ（？アイコン＋ポップアップ）
   ============================================================ */
.help-tooltip-wrapper {
  position: relative;
  display: inline-block;
  margin-left: 4px;
  vertical-align: middle;
}
.help-tooltip-trigger {
  width: 18px; height: 18px;
  border-radius: 50%;
  border: 1px solid #a99c8a;
  background: #fff; color: #7a6b5a;
  font-size: 11px; font-weight: 600; line-height: 1;
  cursor: pointer; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  transition: all 0.15s ease;
}
.help-tooltip-trigger:hover {
  background: var(--accent-color, #7a6040);
  color: #fff;
  border-color: var(--accent-color, #7a6040);
}
.help-tooltip-trigger:focus-visible {
  outline: 2px solid var(--accent-color, #7a6040);
  outline-offset: 2px;
}
.help-tooltip-popup {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  background: #fff;
  border: 1px solid #d4c4b0;
  border-radius: 8px;
  padding: 12px 14px;
  min-width: 240px; max-width: 320px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
  font-size: 13px; line-height: 1.6; color: #333;
  white-space: normal; text-align: left;
}
.help-tooltip-popup::before {
  content: ''; position: absolute; bottom: 100%; left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent; border-bottom-color: #d4c4b0;
}
.help-tooltip-popup::after {
  content: ''; position: absolute; bottom: calc(100% - 1px); left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent; border-bottom-color: #fff;
}
/* モバイルでは画面下部固定で端に押し出されない */
@media (max-width: 480px) {
  .help-tooltip-popup {
    position: fixed; top: auto; bottom: 16px; left: 16px; right: 16px;
    transform: none; max-width: none;
  }
  .help-tooltip-popup::before,
  .help-tooltip-popup::after { display: none; }
}
[hidden] { display: none !important; }

/* Phase 18e: リクエスト未対応バッジ（テーマに連動させず固定の赤） */
.request-nav-link { position: relative; }
.request-badge {
  display: inline-block;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  margin-left: 4px;
  border-radius: 9px;
  background: #e53935;
  color: #fff;
  font-size: 11px;
  font-weight: bold;
  line-height: 18px;
  text-align: center;
  vertical-align: middle;
}

/* ============================================================
   Phase 29: 料金プラン（表示専用・公開ページ／管理プレビュー共通）
   ※ 編集時の affordance（点線・追加削除ボタン）は admin/design/index.php 側。
   ============================================================ */
.pv-pricing { margin-top: 1.5rem; }
.pv-pricing-title { text-align: center; font-size: 1rem; font-weight: 700; color: var(--c-text); margin-bottom: 1rem; }
.pv-pricing-list { display: block; }
.pv-plan {
  border: 1px solid var(--c-border); border-radius: 14px; padding: 1rem 1.1rem;
  margin-bottom: 1rem; background: var(--c-surface);
}
.pv-plan:last-child { margin-bottom: 0; }
.pv-plan-name { font-size: 1.05rem; font-weight: 700; color: var(--c-text); margin-bottom: .25rem; }
.pv-plan-note { font-size: .8125rem; color: var(--c-text); opacity: .65; margin-bottom: .5rem; }
.pv-plan-desc { font-size: .875rem; color: var(--c-text); line-height: 1.7; margin-bottom: .75rem; white-space: pre-wrap; }
.pv-plan-items { display: flex; flex-direction: column; gap: .2rem; }
.pv-pitem {
  display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap;
  padding: .5rem 0; border-bottom: 1px dashed var(--c-border);
}
.pv-pitem:last-child { border-bottom: none; }
.pv-pitem-time { font-weight: 700; color: var(--c-text); }
.pv-pitem-price { font-weight: 700; color: var(--c-text); margin-left: auto; white-space: nowrap; }
.pv-pitem-note { font-size: .78rem; color: var(--c-text); opacity: .55; flex-basis: 100%; }

/* ============================================================
   Phase 83: よくある質問（FAQ・表示専用・公開ページ／管理プレビュー共通）
   <details>/<summary> ネイティブ・アコーディオン＝公開ページに重い JS/ライブラリを足さない。
   枠は他ブロックと同じ --block-border-color に追従（Phase35/76）。文字色=var(--c-text)・書体=var(--body-font)。
   編集パネル(.bp-faq-*)は admin/design/index.php 側のUI（公開には出ない）。
   ============================================================ */
.pv-faq { margin-top: 1.5rem; }
.pv-faq-title { text-align: center; font-size: 1rem; font-weight: 700; color: var(--c-text); margin-bottom: 1rem; }
.pv-faq-list { display: flex; flex-direction: column; gap: .6rem; }
.pv-faq-item {
  border: 1px solid var(--block-border-color, var(--c-border)); border-radius: 12px;
  background: var(--c-surface); overflow: hidden;
}
.pv-faq-q {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: .6rem;
  padding: .85rem 1rem; font-weight: 700; color: var(--c-text); font-family: var(--body-font, inherit);
}
.pv-faq-q::-webkit-details-marker { display: none; }
.pv-faq-qtext { flex: 1 1 auto; min-width: 0; line-height: 1.5; }
.pv-faq-icon {
  flex: none; width: 9px; height: 9px; margin-bottom: 3px;
  border-right: 2px solid var(--c-text); border-bottom: 2px solid var(--c-text);
  transform: rotate(45deg); transition: transform .2s ease; opacity: .55;
}
.pv-faq-item[open] .pv-faq-icon { transform: rotate(-135deg); margin-bottom: -3px; }
.pv-faq-a {
  padding: 0 1rem 1rem; color: var(--c-text); opacity: .9; line-height: 1.8;
  font-family: var(--body-font, inherit); white-space: normal;
}
.pv-faq-ph {
  text-align: center; color: #aaa; line-height: 1.7;
  padding: 1.3rem 1rem; border: 1.5px dashed var(--c-border); border-radius: 12px;
}

/* ============================================================
   Phase 84: シェアボタン（公開ページ／管理プレビュー共通）。
   ボタン本体は .bp-link-btn ＝ページの枠/塗り/書体/文字色（data-blockstyle 8種）に自動追従＝他ボタンと一致。
   ここではアイコン＋文字の並びだけ調整。アイコンは stroke:currentColor で文字色に追従。
   ============================================================ */
.pv-share { margin-top: 1.5rem; }
.bp-share-btn { gap: .5rem; cursor: pointer; font-family: var(--body-font, inherit); }
.bp-share-ico { flex: none; }

/* ============================================================
   Phase 85: 相談ボタン（LINE・公開ページ／管理プレビュー共通）。
   ボタン本体は .bp-link-btn ＝ページの枠/塗り/書体/文字色（data-blockstyle 8種）に自動追従＝他ボタンと一致。
   ここではアイコン（💬）＋文字の並びと、未設定時のプレースホルダだけ調整。
   ============================================================ */
.pv-consult { margin-top: 1.5rem; }
.bp-consult-btn { gap: .5rem; cursor: pointer; font-family: var(--body-font, inherit); }
.bp-consult-ico { flex: none; line-height: 1; }
.pv-consult-ph {
  text-align: center; color: #aaa; line-height: 1.7;
  padding: 1.3rem 1rem; border: 1.5px dashed var(--c-border); border-radius: 12px;
}

/* ============================================================
   Phase 86 / 86a: 初回クーポン（表示のみ・公開ページ／管理プレビュー共通）。
   3スタイルを data-coupon-style=ticket|notch|minimal で切替（編集画面で選択）。
   枠/色/書体はページ設定（--block-border-color / --c-main / --body-font）に追従。割引ロジックは無し＝見せるだけ。
   ============================================================ */
.pv-coupon { margin-top: 1.5rem; }

/* --- 共通（中身） --- */
.pv-coupon-card { position: relative; font-family: var(--body-font, inherit); }
.pv-coupon-body { text-align: center; }
.pv-coupon-eyebrow {
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  color: var(--c-main); font-weight: 700;
  font-size: calc(.78rem * var(--bp-font-scale, 1)); letter-spacing: .06em;
}
.pv-coupon-eyetext { display: inline-flex; align-items: center; gap: .35rem; min-width: 0; }
.pv-coupon-eyeico { display: none; align-items: center; }   /* B のみ表示 */
.pv-coupon-eline { display: none; }                          /* C のみ表示 */
.pv-coupon-svg { width: 1.05em; height: 1.05em; display: block; }
.pv-coupon-offer {
  margin-top: .45rem; font-weight: 800; line-height: 1.18; word-break: break-word;
  font-size: calc(1.9rem * var(--bp-font-scale, 1)); color: var(--c-text);
}
.pv-coupon-note {
  margin-top: .55rem; font-size: calc(.8rem * var(--bp-font-scale, 1)); line-height: 1.6;
  color: var(--c-text); opacity: .72; word-break: break-word;
}
.pv-coupon-stub { display: none; }   /* A のみ表示 */
.pv-coupon-perf { display: none; }   /* B のみ表示（ミシン目＋食い込みノッチ） */

/* === A: スタブ式チケット === */
.pv-coupon-card[data-coupon-style="ticket"] {
  display: flex; align-items: stretch; overflow: hidden;
  border: 1px solid var(--block-border-color, var(--c-border)); border-radius: 14px;
  background: var(--c-surface); box-shadow: 0 6px 18px rgba(44, 38, 32, .10);
}
.pv-coupon-card[data-coupon-style="ticket"] .pv-coupon-stub {
  display: flex; flex: none; width: 58px; align-items: center; justify-content: center;
  background: var(--c-main); color: var(--c-surface);
}
.pv-coupon-card[data-coupon-style="ticket"] .pv-coupon-stub .pv-coupon-svg { width: 26px; height: 26px; }
.pv-coupon-card[data-coupon-style="ticket"] .pv-coupon-body {
  flex: 1 1 auto; min-width: 0; padding: .95rem 1rem;
  border-left: 2px dashed var(--block-border-color, var(--c-border));
}
.pv-coupon-card[data-coupon-style="ticket"] .pv-coupon-offer {
  margin-top: .2rem; font-size: calc(1.5rem * var(--bp-font-scale, 1));
}

/* === B: ミシン目＋ノッチ ===
   ミシン目線(.pv-coupon-perf)を特典と注釈の間に1本。両端の丸い切り込みは perf の ::before/::after で、
   カードの overflow:hidden により外側半分がクリップ＝枠にきれいに食い込む（はみ出さない）。 */
.pv-coupon-card[data-coupon-style="notch"] {
  overflow: hidden;
  border: 1px solid var(--block-border-color, var(--c-border)); border-radius: 16px;
  background: var(--c-surface); box-shadow: 0 6px 18px rgba(44, 38, 32, .10);
  padding: 1.15rem 1.3rem;
}
.pv-coupon-card[data-coupon-style="notch"] .pv-coupon-eyeico { display: inline-flex; }
.pv-coupon-card[data-coupon-style="notch"] .pv-coupon-offer { color: var(--c-main); }
.pv-coupon-card[data-coupon-style="notch"] .pv-coupon-perf {
  display: block; position: relative; height: 0; margin: .9rem -1.3rem;
  border-top: 1.5px dashed var(--block-border-color, var(--c-border));
}
.pv-coupon-card[data-coupon-style="notch"] .pv-coupon-perf::before,
.pv-coupon-card[data-coupon-style="notch"] .pv-coupon-perf::after {
  content: ''; position: absolute; top: 0; width: 15px; height: 15px; border-radius: 50%;
  background: var(--c-bg, #faf7f2); transform: translate(-50%, -50%);
}
.pv-coupon-card[data-coupon-style="notch"] .pv-coupon-perf::before { left: 0; }
.pv-coupon-card[data-coupon-style="notch"] .pv-coupon-perf::after { left: 100%; }
.pv-coupon-card[data-coupon-style="notch"] .pv-coupon-note { margin-top: .2rem; }

/* === C: ミニマル上品 === */
.pv-coupon-card[data-coupon-style="minimal"] {
  border: 1.5px solid var(--c-main); border-radius: 16px;
  background: var(--c-surface); padding: 1.25rem 1.2rem;
}
.pv-coupon-card[data-coupon-style="minimal"] .pv-coupon-eyebrow { letter-spacing: .1em; }
.pv-coupon-card[data-coupon-style="minimal"] .pv-coupon-eline {
  display: block; flex: 1 1 auto; max-width: 56px; height: 1px;
  background: var(--block-border-color, var(--c-border)); opacity: .7;
}
.pv-coupon-card[data-coupon-style="minimal"] .pv-coupon-offer { margin-top: .6rem; letter-spacing: .01em; }

/* owner要望: クーポンにも枠スタイル8種を適用。3つのcoupon-style(ticket/notch/minimal)の規則より「後」に置き、
   同詳細度(0,2,0)で勝つ＝枠スタイルを選んでいれば外枠(border/角丸/影)がそれに追従。未選択(data-blockstyle無し)時は
   発火せずクーポン既定のまま＝無回帰。内部装飾(スタブ/ミシン目/アイブロウ)は coupon-style 側のまま保持。 */
[data-blockstyle="standard"] .pv-coupon-card { border: 1px solid var(--block-border-color, var(--c-border)); border-radius: 6px; box-shadow: none; }
[data-blockstyle="fill"]     .pv-coupon-card { border: none; border-radius: 14px; box-shadow: none; }
[data-blockstyle="pill"]     .pv-coupon-card { border: 1.5px solid var(--block-border-color, var(--c-border)); border-radius: 20px; box-shadow: none; }
[data-blockstyle="float"]    .pv-coupon-card { border: none; border-radius: 14px; box-shadow: 0 4px 12px rgba(0, 0, 0, .15); }
[data-blockstyle="double"]   .pv-coupon-card { border: 3px double var(--block-border-color, var(--c-border)); border-radius: 8px; box-shadow: none; }
[data-blockstyle="sharp"]    .pv-coupon-card { border: 1.5px solid var(--block-border-color, var(--c-border)); border-radius: 0; box-shadow: none; }
[data-blockstyle="offset"]   .pv-coupon-card { border: 1.5px solid var(--block-border-color, var(--c-border)); border-radius: 6px; box-shadow: 3px 3px 0 var(--block-border-color, var(--c-border)); }
[data-blockstyle="soft"]     .pv-coupon-card { border: 1px solid var(--block-border-color, var(--c-border)); border-radius: 16px; box-shadow: 0 2px 7px rgba(0, 0, 0, .06); }

/* 未設定プレースホルダ（編集プレビューのみ） */
.pv-coupon-ph {
  text-align: center; color: #aaa; line-height: 1.7;
  padding: 1.3rem 1rem; border: 1.5px dashed var(--c-border); border-radius: 12px;
}

/* Phase 86a: クーポンのデザイン選択タイル（管理画面の編集パネル専用・公開には出ない）。 */
.bp-coupon-styles { display: flex; gap: 8px; margin-top: 4px; }
.bp-coupon-style {
  flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 8px 4px; border: 1.5px solid #E8DDD0; border-radius: 10px;
  background: #fff; cursor: pointer; font-family: inherit;
}
.bp-coupon-style.is-on { border-color: #B89968; background: #fbf7f0; }
.bp-coupon-style-name { font-size: 12px; color: #666; font-weight: 700; }
.bp-coupon-style.is-on .bp-coupon-style-name { color: #9c7b3f; }
.bp-coupon-style-ico {
  width: 100%; height: 26px; border-radius: 6px; position: relative;
  background: #fff; border: 1px solid #E8DDD0; overflow: hidden;
}
.bp-coupon-style-ico[data-coupon-style="ticket"]::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 9px; background: #B89968;
}
.bp-coupon-style-ico[data-coupon-style="notch"]::before {
  content: ''; position: absolute; left: 6px; right: 6px; top: 50%; border-top: 1.5px dashed #c9b896;
}
.bp-coupon-style-ico[data-coupon-style="minimal"] { border: 1.5px solid #B89968; }

/* ============================================================
   Phase 32: 公開ページ作例写真の保存抑止（作例限定・design_image_protect=ON 時のみ data-protect で発火）
   ※ 作例＝ギャラリーのサムネ(.gallery-thumb)とライトボックス拡大(#bpLightboxImg)のみ。
     リンク/予約ボタン/カレンダー/ヘッダー/プロフィール画像にはセレクタが当たらない＝無影響。
     pointer-events は触らない（拡大click・リンクを壊さないため）。
   ============================================================ */
.gallery-section[data-protect] .gallery-thumb,
.gallery-section[data-protect] .gallery-thumb img,
#bpLightbox[data-protect] #bpLightboxImg,
.bp-reviews[data-protect] img,
#bpReviewLb[data-protect] img {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
}

/* ============================================================
   Phase 33b: 作例ライトボックス拡大のウォーターマーク（透かし）
   ON時のみ #bpLightbox に data-watermark と --wm-bg(SVGデータURI) を出力（calendar.php）。
   全面・対角リピート（SVG背景・案1）。pointer-events:none で操作を絶対に妨げない。
   重なり順: 画像(0) < 透かし(::after z2) < 閉じる/前後/カウンタ(z3)。
   ============================================================ */
#bpLightbox[data-watermark]::after,
#bpReviewLb[data-watermark]::after {   /* Phase 80h: 口コミ拡大も同じ透かし */
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;           /* 開閉・拡大・閉じるボタン・スワイプを妨げない */
  z-index: 2;                     /* 画像の上 */
  background-image: var(--wm-bg);
  background-repeat: repeat;      /* 全面リピート */
  background-position: center;
  background-size: 260px 160px;   /* タイル間隔 */
}
.lightbox-close, .lightbox-prev, .lightbox-next, .lightbox-counter { z-index: 3; } /* 透かしより上＝操作系は常に視認・操作可 */