/* ========================================
   九州国立博物館 開館状況表示 CSS
   完全版 - 全機能対応・style.css独立版
   ========================================
   
   このファイルは、トップページに表示される
   「日付 + 開館状態」のボックスのスタイルを定義しています。
   
   ★重要: style.cssの影響を受けないように独立させています
   
   対象HTML:
   <div class="museum-status-box">
     <div class="status-header">
       <div class="status-date">1月3日（金）</div>
       <div class="status-badge open">開館中</div>
       <div class="last-entry-notice">入館は16:30まで</div>
       <div class="next-open-day">次の開館日: 1月6日（火）</div>
     </div>
   </div>
======================================== */

/* ----------------------------------------
   メインボックス（.museum-status-box）
   外枠全体のスタイル
---------------------------------------- */
.museum-status-box {
  background: white !important;              /* 背景色: 白 */
  border: 3px solid #2c5282 !important;      /* 枠線: 3px幅、青色 */
  border-radius: 4px !important;             /* 角丸: 4px */
  padding: 10px 16px !important;             /* 内側の余白: 上下10px、左右16px */
  box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;  /* 影: 軽い影をつける */
  display: block !important;                 /* 表示形式: ブロック要素 */
  visibility: visible !important;            /* 可視性: 表示 */
  opacity: 1 !important;                     /* 透明度: 完全不透明 */
  width: 100% !important;                    /* 幅: 親要素の100% */
  max-width: 100% !important;                /* 最大幅: 100% */
  
  /* ★style.cssの影響を無効化★ */
  font-size: 16px !important;                /* 基準フォントサイズを固定 */
  line-height: 1.2 !important;               /* 行間を固定 */
  letter-spacing: normal !important;         /* 文字間隔をリセット */
  font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif !important;
  font-weight: 400 !important;
  -webkit-font-smoothing: auto !important;
  box-sizing: border-box !important;
}

/* ----------------------------------------
   休館日時のスタイル（.kyukan）
   定期休館日の時は枠線の色を赤に変更
---------------------------------------- */
.museum-status-box.kyukan {
  border-color: #dc3545 !important;
}

/* ----------------------------------------
   臨時休館時のスタイル（.rinji-kyukan）
   臨時休館の時は枠線の色をオレンジに変更
---------------------------------------- */
.museum-status-box.rinji-kyukan {
  border-color: #ff6b00 !important;
}

/* ----------------------------------------
   ヘッダー部分（.status-header）
   日付とバッジを横並びにするコンテナ
---------------------------------------- */
.status-header {
  display: flex !important;                  /* フレックスボックス: 横並び配置 */
  align-items: center !important;            /* 縦方向の配置: 中央揃え */
  justify-content: center !important;        /* 横方向の配置: 中央揃え */
  gap: 12px !important;                      /* 要素間の間隔: 12px */
  flex-wrap: wrap !important;                /* 折り返し: スマホで改行可能 */
  visibility: visible !important;            /* 可視性: 表示 */
  margin: 0 !important;                      /* マージンをリセット */
  padding: 0 !important;                     /* パディングをリセット */
}

/* ----------------------------------------
   日付部分（.status-date）
   「1月3日（金）」の表示
---------------------------------------- */
.status-date {
  font-size: 18px !important;                /* 文字サイズ: 18px固定 */
  font-weight: bold !important;              /* 太さ: 太字 */
  color: #1a202c !important;                 /* 文字色: ダークグレー */
  display: inline-block !important;          /* 表示形式: インラインブロック */
  visibility: visible !important;            /* 可視性: 表示 */
  line-height: 1.2 !important;               /* 行間: 固定 */
  margin: 0 !important;                      /* マージンをリセット */
  padding: 0 !important;                     /* パディングをリセット */
  letter-spacing: normal !important;         /* 文字間隔をリセット */
  white-space: nowrap !important;            /* テキストを折り返さない */
}

/* ----------------------------------------
   開館状態バッジ（.status-badge）
   「開館中」「休館日」などのボタン表示
---------------------------------------- */
.status-badge {
  padding: 4px 16px !important;              /* 内側の余白: 上下4px、左右16px */
  border-radius: 4px !important;             /* 角丸: 4px */
  font-size: 14px !important;                /* 文字サイズ: 14px固定 */
  font-weight: bold !important;              /* 太さ: 太字 */
  color: white !important;                   /* 文字色: 白 */
  display: inline-block !important;          /* 表示形式: インラインブロック */
  visibility: visible !important;            /* 可視性: 表示 */
  border: 2px solid transparent !important;  /* 枠線: 2px幅（色は各状態で指定） */
  line-height: 1.4 !important;               /* 行間: 固定 */
  margin: 0 !important;                      /* マージンをリセット */
  letter-spacing: normal !important;         /* 文字間隔をリセット */
  white-space: nowrap !important;            /* テキストを折り返さない */
}

/* ========================================
   【機能】入館締切案内表示
   ========================================
   入館締切時刻が近づいたら表示される案内
   - 通常開館: 16:00〜閉館まで「入館は16:30まで」
   - 夜間20時: 19:00〜閉館まで「入館は19:30まで」
   - 夜間19時: 18:00〜閉館まで「入館は18:30まで」
======================================== */
.last-entry-notice {
  font-size: 12px !important;                /* 文字サイズ: 12px固定 */
  font-weight: bold !important;              /* 太さ: 太字 */
  color: #c53030 !important;                 /* 文字色: 赤系 */
  display: block !important;                 /* 表示形式: ブロック */
  width: 100% !important;                    /* 幅: 100% */
  text-align: center !important;             /* テキスト配置: 中央 */
  margin: 6px 0 0 0 !important;              /* マージン: 上のみ6px */
  padding: 6px 10px !important;              /* パディング: 上下6px、左右10px */
  background: #fff5f5 !important;            /* 背景色: 薄いピンク */
  border: 1px solid #feb2b2 !important;      /* 枠線: 1px、ピンク */
  border-radius: 4px !important;             /* 角丸: 4px */
  line-height: 1.3 !important;               /* 行間: 固定 */
  letter-spacing: normal !important;         /* 文字間隔をリセット */
  box-sizing: border-box !important;
}

/* ========================================
   【機能】次の開館日表示
   ========================================
   休館日・閉館後に表示される案内
======================================== */
.next-open-day {
  font-size: 11px !important;                /* 文字サイズ: 11px固定 */
  font-weight: normal !important;            /* 太さ: 標準 */
  color: #4a5568 !important;                 /* 文字色: グレー */
  display: block !important;                 /* 表示形式: ブロック */
  width: 100% !important;                    /* 幅: 100% */
  text-align: center !important;             /* テキスト配置: 中央 */
  margin: 6px 0 0 0 !important;              /* マージン: 上のみ6px */
  padding: 4px 8px !important;               /* パディング: 上下4px、左右8px */
  background: #f7fafc !important;            /* 背景色: 薄いグレー */
  border-radius: 4px !important;             /* 角丸: 4px */
  border: 1px solid #e2e8f0 !important;      /* 枠線: 1px、薄いグレー */
  line-height: 1.3 !important;               /* 行間: 固定 */
  letter-spacing: normal !important;         /* 文字間隔をリセット */
  box-sizing: border-box !important;
}

/* ========================================
   【機能】エラー表示
   ========================================
   情報取得失敗時のフォールバック表示
======================================== */
.status-badge.error {
  background: #95a5a6 !important;
  border-color: #95a5a6 !important;
}

/* ========================================
   状態ごとの背景色
   ========================================
   開館状態に応じてバッジの背景色を変更
   JavaScriptが自動的にクラスを付与します
======================================== */

/* ----------------------------------------
   休館日（.closed）
   定期休館日（月曜日など）
---------------------------------------- */
.status-badge.closed {
  background: #dc3545 !important;            /* 背景色: 赤 */
  border-color: #dc3545 !important;          /* 枠線色: 赤（背景と同じ） */
}

/* ----------------------------------------
   臨時休館（.rinji-closed）
   突発的な休館日
---------------------------------------- */
.status-badge.rinji-closed {
  background: #ff6b00 !important;            /* 背景色: オレンジ */
  border-color: #ff6b00 !important;          /* 枠線色: オレンジ（背景と同じ） */
}

/* ----------------------------------------
   本日開館日（.will-open）
   0:00〜9:30の間に表示
---------------------------------------- */
.status-badge.will-open {
  background: #1e6bb8 !important;            /* 背景色: 青 */
  border-color: #1e6bb8 !important;          /* 枠線色: 青（背景と同じ） */
}

/* ----------------------------------------
   開館中（.open）
   9:31〜17:00の間に表示（通常日）
---------------------------------------- */
.status-badge.open {
  background: #1e6bb8 !important;            /* 背景色: 青 */
  border-color: #1e6bb8 !important;          /* 枠線色: 青（背景と同じ） */
}

/* ----------------------------------------
   閉館中（.after-close）
   17:01〜23:59の間に表示
---------------------------------------- */
.status-badge.after-close {
  background: #6c757d !important;            /* 背景色: グレー */
  border-color: #6c757d !important;          /* 枠線色: グレー（背景と同じ） */
}

/* ----------------------------------------
   夜間開館中（.night-open）
   夜間開館日の9:31〜19:00/20:00に表示
---------------------------------------- */
.status-badge.night-open {
  background: #7c3aed !important;            /* 背景色: 紫 */
  border-color: #7c3aed !important;          /* 枠線色: 紫（背景と同じ） */
}

/* ========================================
   レスポンシブ対応
   ========================================
   スマホ表示時のサイズ調整
======================================== */

/* ----------------------------------------
   スマホサイズ（480px以下）
---------------------------------------- */
@media (max-width: 480px) {
  .museum-status-box {
    padding: 10px 14px !important;           /* 内側の余白: スマホでも同じ */
    font-size: 16px !important;              /* フォントサイズを固定 */
  }
  
  .status-header {
    gap: 10px !important;                    /* 要素間の間隔: 10px */
  }
  
  .status-date {
    font-size: 17px !important;              /* 文字サイズ: 17px */
  }
  
  .status-badge {
    padding: 4px 14px !important;            /* 内側の余白: 少し縮小 */
    font-size: 13px !important;              /* 文字サイズ: 13px */
  }
  
  .last-entry-notice {
    font-size: 11px !important;              /* 文字サイズ: 11px */
    padding: 5px 8px !important;             /* パディング: 縮小 */
    margin-top: 5px !important;              /* マージン: 5px */
  }
  
  .next-open-day {
    font-size: 10px !important;              /* 文字サイズ: 10px */
    padding: 3px 6px !important;             /* パディング: 縮小 */
    margin-top: 5px !important;              /* マージン: 5px */
  }
}

/* ----------------------------------------
   PC表示（992px以上）
   Bootstrap5のlgブレイクポイント
   確実に表示されるよう強制指定
---------------------------------------- */
@media (min-width: 992px) {
  .museum-status-box {
    display: block !important;               /* 表示形式: ブロック */
    visibility: visible !important;          /* 可視性: 表示 */
    font-size: 16px !important;              /* フォントサイズを固定 */
  }
  
  .status-header {
    display: flex !important;                /* フレックスボックス: 横並び */
    visibility: visible !important;          /* 可視性: 表示 */
  }
  
  .status-date,
  .status-badge {
    display: inline-block !important;        /* 表示形式: インラインブロック */
    visibility: visible !important;          /* 可視性: 表示 */
  }
  
  .last-entry-notice,
  .next-open-day {
    display: block !important;               /* 表示形式: ブロック */
    visibility: visible !important;          /* 可視性: 表示 */
  }
}

/* ========================================
   印刷時のスタイル
   ========================================
======================================== */
@media print {
  .museum-status-box {
    box-shadow: none !important;
    border: 2px solid #000 !important;
    background: white !important;
  }

  .status-badge {
    background: white !important;
    color: #000 !important;
    border: 2px solid #000 !important;
  }

  .last-entry-notice {
    background: none !important;
    color: #000 !important;
    border: 1px solid #000 !important;
  }

  .next-open-day {
    background: none !important;
    border: 1px solid #000 !important;
  }
}

/* ========================================
   【メンテナンス時の注意事項】
   ========================================
   
   ■ 色の変更
   各状態の背景色は「状態ごとの背景色」セクションで
   変更できます。
   
   ■ サイズ調整
   各要素の font-size を変更するとサイズが変わります。
   
   ■ 余白調整
   padding を変更すると内側の余白が変わります。
   
   ■ 臨時休館の枠色
   .museum-status-box.rinji-kyukan の
   border-color で変更できます。
   
   ■ 休館日の枠色
   .museum-status-box.kyukan の
   border-color で変更できます。
   
   ■ 入館締切案内の色
   .last-entry-notice の color と background で
   変更できます。
   
   ■ 新機能の表示/非表示
   .last-entry-notice や .next-open-day に
   display: none を設定すると非表示になります。
   
======================================== */