/* ============================================================
   水鏡・松江城 全体CSS  v004
   設定場所: コンテンツを入力 > リリース > リリース設定(Web) > Web版のCSSを設定
   注意: このファイルは保存した時点で本番にも即時反映される。
         更新時はファイル名の連番を上げてアップロードすること(同名は反映されない)。
   v004: フォントを明朝→Noto Sans JP(ゴシック)に変更 / 黒沈みテキストを一括修正
   v005: フォントが反映されない原因を修正。eventosは内側の .v-application--wrap に
         既定フォント(HiraKakuPro-W6/Meiryo)を再指定しており、body/.v-application 指定では
         中身に届かなかった。コンテンツ要素へ直接・十分な詳細度で指定し直す
         (アイコン要素<i>/.v-icon は除外し、mdi等のグリフを壊さない)
   v006: ブース等 詳細ページの機能名ヘッダー(白箱+黒字)を他ページと揃えて銀文字に
   ============================================================ */

/* 1. Webフォント(必ず先頭に置く) */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&display=swap');

/* 2. ブランド変数 —— 案件で書き換えるのはここだけ */
:root {
  /* brand(チラシ準拠) */
  --brand-night:   #0b1533;  /* 地色: 星空の濃紺 */
  --brand-deep:    #14274e;  /* 面: 深藍 */
  --brand-blue:    #2c4a8a;  /* 補助: 星空ブルー */
  --brand-silver:  #e9edf5;  /* 文字: 白銀 */
  --brand-lantern: #e8a33d;  /* アクセント: ランタン橙(CV・強調のみ) */
  --brand-gold:    #c9a86a;  /* 罫線・見出し飾り: 金 */

  /* semantic(標準UI・モジュールが参照する) */
  --header-bg-color:   rgba(11, 21, 51, .92);
  --header-name-color: var(--brand-silver);
  --header-line-color: rgba(201, 168, 106, .45);
  --top-bg-color:      var(--brand-deep);
  --top-text-color:    var(--brand-silver);
  --top-line-color:    var(--brand-gold);
  --btn-bg-color:      var(--brand-lantern);
  --btn-text-color:    #1a1a1a;
  --footer-bg-color:   var(--brand-night);
  --footer-text-color: var(--brand-silver);
  --booth-list-color:  var(--brand-gold);
  --booth-search-color: var(--brand-blue);
  --booth-icon-color:  var(--brand-gold);
  --booth-pagination-color: var(--brand-blue);
  --booth-detail-color: var(--brand-deep);
}

/* 3. フォント標準化(Noto Sans JP基調・eventosはデフォルトが太字)
   ※ eventos は内側の .v-application--wrap に既定フォントを再指定するため、
      body/.v-application だけでは中身に届かない。コンテンツ要素へ詳細度(0,1,1)以上で
      直接当てて上書きする。アイコン(<i>/.v-icon/mdi/material)は除外してグリフを守る。 */
body,
.v-application,
.v-application--wrap {
  font-family: 'Noto Sans JP', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', '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: 'Noto Sans JP', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Meiryo', sans-serif !important;
}
h1, h2, h3, h4 { font-weight: 700; }

/* 4. 背景 —— 星空グラデーション(画像を使わず軽量に) */
.widget__wrap, .list__wrap, .detail__wrap {
  background-image: linear-gradient(180deg, #060d24 0%, #0b1533 40%, #14274e 100%) !important;
  background-attachment: fixed;
}

/* ブース一覧の白ベタを透過して背景を見せる(テンプレ由来の手法) */
section.contents__wrap.list__contents > section > div {
  background: transparent !important;
}

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

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

/* もっと見るボタン */
.v-btn__content { color: var(--top-line-color) !important; }

/* ブース: タイトル縦線・詳細タイトル下線 */
.booth-list-title__text { border-color: var(--booth-list-color) !important; color: var(--brand-silver) !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;
}

/* 標準ヘッダー(サブページ全体・SP時のホーム)を夜色に統一 */
/* ※自作ヘッダーはLive!ホームのみ。サブページは標準ヘッダーが出るため、
   白いロゴ枠・タブ領域を暗色テーマに合わせて「意図した見た目」にする。
   v003: 右側のタブ領域(.header-tab__wrap系・Vuetifyタブ)の白背景を追加で潰す */
.header__wrap, .header__content,
.header-logo__wrap, .header-logo__image-pc, .header-logo__image-sp,
.header-tab__wrap, .header-tab__pc, .header-tab__menu, .header-tab__sp,
.header-tab__wrap .v-tabs, .header-tab__wrap .v-tabs-bar,
.header-tab__wrap .v-tabs__bar, .header-tab__wrap .v-tab,
.header-tab__wrap .theme--light.v-tabs-bar {
  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; }

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

/* 7-a. ブース: 場所ラベル(booths.md の .sk-booth-place 用) */
.sk-booth-place {
  display: inline-block;
  color: var(--brand-gold);
  border: 1px solid var(--brand-gold);
  padding: .1em .8em;
  border-radius: 2px;
  font-size: .85em;
  letter-spacing: .1em;
  margin-bottom: .5em;
}

/* 7-b. ブース絞り込みボックスを暗色化(検索を残す場合の保険) */
.booth-search__wrap, .search-box__wrap {
  background: var(--brand-deep) !important;
  border: 1px solid var(--header-line-color) !important;
}

/* ============================================================
   8. 黒沈みテキスト対策(v004) —— 実サイトのコントラスト測定で検出
   暗色地に eventos 既定の黒文字(rgba(0,0,0,.87))が乗る箇所を銀に。
   ※白カード上(カード表示)は黒のままにするためスコープを限定する
   ============================================================ */

/* 8-1. お知らせ(ホーム等・暗色地) */
.information-title__text,
.information__title,
.information-description__text { color: var(--brand-silver) !important; }

/* 8-2. 演出「リスト表示」の題名・説明(カード表示=白地は対象外) */
.booth-list__wrap .booth-title__text,
.booth-list__wrap .booth-description__text { color: var(--brand-silver) !important; }

/* 8-3. ブース/お知らせ等「詳細ページ」の本文・タイトル(暗色地) */
.detail__contents .title__content__text,
.detail__contents .description,
.detail__contents .html__wrap,
.detail__contents .html__wrap * { color: var(--brand-silver) !important; }
/* ↑ ただし詳細本文中の自作ボタン(.sk-btn)の文字色は据え置く */
.detail__contents .sk-btn { color: var(--btn-text-color) !important; }
.detail__contents .sk-gold, .detail__contents .sk-booth-place { color: var(--brand-gold) !important; }

/* 8-4. もっとみるボタン(既定の青→金アウトラインに) */
.widget__bottom.v-btn,
button.widget__bottom {
  background-color: transparent !important;
  border: 1px solid var(--brand-gold) !important;
}
.widget__bottom .v-btn__content { color: var(--brand-gold) !important; }

/* 8-5. 自作の注記クラスに明示的な色(親が白地でない詳細ページでの沈み防止) */
.sk-note { color: var(--brand-silver); }

/* ============================================================
   9. ブース等 詳細ページの機能名ヘッダー(v006)
   既定は h2 に白背景+黒字("演出"等)で暗色テーマに浮く。
   白箱を外し銀文字に、下線は金にして他ページの見出しと揃える。
   ※WEBページ側は各ページのリセットで detail-title を非表示済み(競合しない)
   ============================================================ */
.detail-title__wrap,
.detail-title__text,
.detail-title__text h2 {
  background: transparent !important;
  color: var(--brand-silver) !important;
}
.detail-title__border.base-background-color {
  background-color: var(--brand-gold) !important;
}

/* 7. 汎用パーツ(HTMLモジュールから使う自作クラス) */
.sk-btn {
  display: inline-block;
  width: 100%;
  max-width: 350px;
  color: var(--btn-text-color) !important;
  background: var(--btn-bg-color);
  border: 1px solid var(--btn-bg-color);
  padding: 1em 2em;
  font-weight: 600;
  text-decoration: none;
  text-align: center;
  letter-spacing: .1em;
  transition: .3s;
}
.sk-btn:hover { background: transparent; color: var(--btn-bg-color) !important; }

.sk-note { font-size: .8em; opacity: .8; }
.sk-gold { color: var(--brand-gold); }