/* ============================================================
   パンどろぼう展（米子会場） 全体CSS  v005
   v005: 見どころページ廃止に伴い、専用スタイル(.pd-mika等)一式を削除
   v004: 見どころページに原画キャプション用スタイルを追加
   v003: 見どころページのスタイルを全体CSSへ移動
     - WEBページ側のHTMLが長すぎて保存できない（「入力内容に誤りがあります」）
       ため、カルーセル等のCSSをここへ集約してHTML本文を小さくした
   v002: 実サイト点検の反映
     - ページネーション番号（赤地）の文字色が沈む問題を修正
   ※Live!ホームのWEBページ枠の重複・見どころの並び順は
     CSSではなく管理画面の設定で対応（docs/work_instructions.md 参照）
   ------------------------------------------------------------
   （v001）
   設定場所: コンテンツを入力 > リリース > リリース設定(Web) > Web版のCSSを設定

   【運用の注意】
   - このファイルは保存した時点で本番にも即時反映される（下書きの概念なし）
   - 更新時は「初期状態に戻す→保存」でキャッシュを切ってから、
     ファイル名の連番を上げてアップロードすること（水鏡案件 §6-2 の知見）

   【設計方針】
   水鏡・松江城（ダークテーマ）で確立した構造をそのまま継承し、
   :root とフォントの差し替えだけでライトテーマへ転換できるかを検証する
   ＝マスターテンプレートの「テーマ非依存性」の実証を兼ねる。
   ============================================================ */

/* 1. Webフォント（必ず先頭。公式サイト準拠の Zen Maru Gothic ＋ Noto Sans JP） */
@import url('https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@400;500;700;900&family=Noto+Sans+JP:wght@400;500;700&display=swap');

/* 2. ブランド変数 —— 案件で書き換えるのはここだけ */
:root {
  /* brand（公式サイト pandorobou-ten.com 準拠） */
  --brand-cream:  #f7f2e4;  /* 地色: 生成り */
  --brand-yellow: #f8cf46;  /* 面: パンどろぼうイエロー */
  --brand-red:    #cf2318;  /* 主役: 見出し・ボタンの赤（テキスト用にコントラスト調整済み）
                               ※原色 #e8382b は生成り地でコントラスト比3.73とAA未満のため、
                                 文字・ボタンには少し濃いこの値を使う（比4.81 / 白文字5.38） */
  --brand-red-vivid: #e8382b;  /* 面積の大きい装飾・イラスト寄りの箇所用（原色） */
  --brand-brown:  #6b4423;  /* 文字: こげ茶（黒は使わない） */
  --brand-crust:  #d9a15b;  /* パンの耳・罫線 */
  --brand-white:  #ffffff;  /* カード面 */

  /* semantic（標準UI・モジュールが参照する） */
  --header-bg-color:   rgba(255, 255, 255, .95);
  --header-name-color: var(--brand-brown);
  --header-line-color: rgba(217, 161, 91, .5);
  --top-bg-color:      var(--brand-cream);
  --top-text-color:    var(--brand-brown);
  --top-line-color:    var(--brand-red);
  --btn-bg-color:      var(--brand-red);
  --btn-text-color:    #ffffff;
  --footer-bg-color:   var(--brand-yellow);
  --footer-text-color: var(--brand-brown);
  --booth-list-color:  var(--brand-red);
  --booth-search-color: var(--brand-crust);
  /* v002: ページネーションの選択中の番号は「文字色を変えられない」ため、
     背景を明るい黄にして こげ茶の文字が読めるようにする（比5.66） */
  --booth-pagination-color: var(--brand-yellow);
  --booth-detail-color: var(--brand-cream);

  /* パーツ共通 */
  --radius-card: 20px;   /* 公式サイトは角丸が大きい */
  --radius-pill: 999px;
}

/* 3. フォント標準化（Zen Maru Gothic 基調）
   ★ eventos は内側の .v-application--wrap に既定フォントを再指定するため、
     body/.v-application だけでは中身に届かない（Windowsでメイリオに落ちる）。
     コンテンツ要素へ詳細度(0,1,1)以上で直接当てる。
     アイコン（<i>/.v-icon/mdi/material）は除外してグリフを守る。 —— 水鏡 §6-1 */
body,
.v-application,
.v-application--wrap {
  font-family: 'Zen Maru Gothic', 'Noto Sans JP', 'Hiragino Maru Gothic ProN',
               'Hiragino Sans', 'Meiryo', sans-serif !important;
  font-weight: normal;
}
.v-application--wrap p, .v-application--wrap a, .v-application--wrap li,
.v-application--wrap td, .v-application--wrap th, .v-application--wrap dd, .v-application--wrap dt,
.v-application--wrap h1, .v-application--wrap h2, .v-application--wrap h3,
.v-application--wrap h4, .v-application--wrap h5, .v-application--wrap h6,
.v-application--wrap button, .v-application--wrap input, .v-application--wrap textarea, .v-application--wrap label,
.v-application--wrap span:not(.v-icon):not([class*="icon"]):not([class*="mdi"]):not([class*="material"]),
.v-application--wrap div:not([class*="icon"]):not(.v-icon) {
  font-family: 'Zen Maru Gothic', 'Noto Sans JP', 'Hiragino Maru Gothic ProN',
               'Hiragino Sans', 'Meiryo', sans-serif !important;
}
h1, h2, h3, h4 { font-weight: 700; }

/* 4. 地色 —— 生成りベース（ライトテーマ）
   ※ 水鏡ではここに夜空グラデを入れていた。差し替えるのは色だけで構造は同じ */
.widget__wrap, .list__wrap, .detail__wrap {
  background-color: var(--brand-cream) !important;
}

/* 本文の文字色を「黒」→「こげ茶」に（公式サイトの柔らかさの要） */
.widget__wrap, .list__wrap, .detail__wrap,
.detail__contents, .html__wrap {
  color: var(--brand-brown);
}

/* 5. 標準UIのテーマ上書き（公式サンプル準拠セレクタ中心） */

/* コンテンツ名・アンダーライン */
.widget-title__text { color: var(--brand-brown) !important; }
.widget-header__border, .widget-title__border {
  border-color: var(--top-line-color) !important;
}

/* もっと見るボタン（赤のピル型に） */
.widget__bottom.v-btn,
button.widget__bottom {
  background-color: var(--brand-red) !important;
  border: none !important;
  border-radius: var(--radius-pill) !important;
}
.widget__bottom .v-btn__content { color: #fff !important; }

/* ブース（見どころ）カード：角丸を大きく、白カード */
.booth-card-layout__content {
  border-radius: var(--radius-card) !important;
  overflow: hidden;
  background: var(--brand-white) !important;
}

/* ブース: タイトル・詳細 */
.booth-list-title__text {
  border-color: var(--booth-list-color) !important;
  color: var(--brand-brown) !important;
}
.base-background-color { background-color: var(--booth-detail-color) !important; }

/* ブース: 絞り込み・ページネーション */
.booth-search__button { background-color: var(--booth-search-color) !important; }
.v-pagination__item--active {
  background-color: var(--booth-pagination-color) !important;
  border-color: var(--booth-pagination-color) !important;
}
/* v002: アクティブなページ番号の視認性対策
   現象: 赤地(--brand-red)にこげ茶の文字が乗り、コントラスト比1.58で沈む。
   注意: この番号の「文字色」は eventos 側の指定が強く、!important でも上書きできない
        （実サイトで .v-pagination__item--active / theme付き / button付き など
          複数パターンを試したがいずれも変わらず）。
   対策: 文字色ではなく「背景」を明るいブランドイエローに変えて可読性を確保する
        （こげ茶 × 黄 = 比5.66でAA基準クリア）。
        → :root の --booth-pagination-color を黄に設定済み */

/* 標準ヘッダー（サブページ全ページで表示される）
   ※ 自作ヘッダーは Live!ホーム限定。サブページは標準ヘッダーになる —— 水鏡 §6-3
   ライトテーマなので白地のままでよいが、ロゴ枠・タブの色味だけ揃える */
.header__wrap, .header__content,
.header-logo__wrap, .header-tab__wrap, .header-tab__pc, .header-tab__menu, .header-tab__sp {
  background-color: var(--header-bg-color) !important;
}
.header-tab__name, .header-tab__v-tab,
.header__wrap .menu__name { color: var(--header-name-color) !important; }
.header-tab__wrap { border-color: var(--header-line-color) !important; }

/* 詳細ページの機能名ヘッダー（既定は白背景+黒字）—— 水鏡 v006 の知見
   ライトテーマでは白背景のままでよいが、文字色と下線を世界観に合わせる */
.detail-title__text h2 { color: var(--brand-brown) !important; }
.detail-title__border.base-background-color {
  background-color: var(--brand-red) !important;
}

/* 6. 標準UIの消し込み */
.top-button__wrap { display: none; }              /* 最上部に戻るボタン */
p.portal-event-top { display: none !important; }  /* イベントトップに戻る */

/* 7. 汎用パーツ（HTMLモジュールから使う自作クラス） */

/* ボタン（赤のピル型・公式サイト準拠） */
.pd-btn {
  display: inline-block;
  width: 100%;
  max-width: 400px;
  color: var(--btn-text-color) !important;
  background: var(--btn-bg-color);
  border: 2px solid var(--btn-bg-color);
  border-radius: var(--radius-pill);
  padding: 1em 2em;
  font-weight: 700;
  font-size: 1.05em;
  text-decoration: none;
  text-align: center;
  box-shadow: 0 4px 0 rgba(0, 0, 0, .12);
  transition: .2s;
}
.pd-btn:hover { transform: translateY(2px); box-shadow: 0 2px 0 rgba(0,0,0,.12); }

/* 白ボタン（サブ導線） */
.pd-btn--sub {
  background: var(--brand-white);
  color: var(--brand-red) !important;
}

/* セクション見出し（破線アンダーライン・公式サイト準拠） */
.pd-ttl {
  text-align: center;
  color: var(--brand-brown);
  font-size: 1.6em;
  font-weight: 700;
  letter-spacing: .1em;
  margin: 0 0 1.5em;
  padding-bottom: .6em;
  border-bottom: 3px dashed var(--brand-crust);
}

/* カード */
.pd-card {
  background: var(--brand-white);
  border-radius: var(--radius-card);
  padding: 2em 1.5em;
  box-shadow: 0 2px 10px rgba(107, 68, 35, .08);
  margin-bottom: 1.5em;
}

/* 黄色帯（セクション区切り） */
.pd-band-yellow { background: var(--brand-yellow); }

/* テーブル（料金表など） */
.pd-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--brand-white);
  border-radius: var(--radius-card);
  overflow: hidden;
}
.pd-table th, .pd-table td {
  border: 1px solid rgba(217, 161, 91, .45);
  padding: .9em 1em;
  text-align: left;
  font-weight: normal;
  color: var(--brand-brown);
}
.pd-table th {
  background: var(--brand-cream);
  font-weight: 700;
  white-space: nowrap;
}

/* 狭い画面では見出しセルの nowrap を解除（解除しないと表が画面幅を超え、
   ページ全体が横スクロールしてしまう）。長い表は個別に .pd-scroll で包む */
@media screen and (max-width: 600px) {
  .pd-table th { white-space: normal; }
  .pd-table th, .pd-table td { padding: .6em .5em; font-size: .88em; }
}

/* 横スクロールさせたい表のラッパ（ページ本体は横スクロールさせない） */
.pd-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* 注意書き */
.pd-note { font-size: .85em; line-height: 1.9; color: var(--brand-brown); opacity: .85; }
.pd-red  { color: var(--brand-red); font-weight: 700; }

/* 見どころラベル（ブース本文の冒頭に置く赤いバッジ） */
.pd-mikan {
  display: inline-block;
  background: var(--brand-red);
  color: #fff;
  font-weight: 700;
  font-size: .9em;
  border-radius: var(--radius-pill);
  padding: .25em 1.2em;
  margin: 0 0 .8em;
}

/* 重要アラート（土日祝＝日時指定予約制 の告知用） */
.pd-alert {
  background: var(--brand-red);
  color: #fff;
  border-radius: var(--radius-card);
  padding: 1.2em 1.5em;
  text-align: center;
  font-weight: 700;
  margin: 1.5em 0;
}
.pd-alert a { color: #fff !important; text-decoration: underline; }

/* 著作権表記（全ページ必須） */
.pd-copyright {
  text-align: center;
  font-size: .8em;
  color: var(--brand-brown);
  opacity: .8;
  margin-top: 2em;
}


/* 10. 見どころページ（features）用スタイル ―― v005で削除
   ページごと廃止されたため、.pd-mika / .pd-carousel* / .pd-single / .pd-carousel__cap
   のスタイル一式（旧v003〜v004）を削除した。*/