/* ==========================================
   1. 画面全体の土台（スクロールの干渉を防ぐ）
   ========================================== */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  background-color: #fedefd; /* 全体のピンク背景 */
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  color: #333;
  /* 🔴 ページ全体が変に揺れないように固定 */
  overflow: hidden; 
}

/* ==========================================
   2. ヘッダー：ロゴとタイトルの黄金比
   ========================================== */
h1 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  margin: 20px 0;
  font-size: 1.5em;
  font-weight: 700;
  color: #444;
  text-shadow: 0 1px 2px rgba(255,255,255,0.5);
}

h1 img {
  width: 40px;
  height: 40px;
  object-fit: contain;
}

/* ==========================================
   3. メインコンテンツ（余白のプロ調整）
   ========================================== */
.content {
  flex: 1;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 10px 15px;
  padding-bottom: 110px; /* フッターとボタンの避難場所 */
  box-sizing: border-box;
  /* 🔴 縦に長いコンテンツ（マイページ等）を動かせるようにする */
  overflow-y: auto !important;
}

/* ==========================================
   4. 【最重要】予約表：横スクロールと固定を完全両立
   ========================================== */
.table-container {
  width: 100%;
  max-height: 65vh;
  /* 🔴 横スクロールを「強制」させ、縦スクロールと分離する */
  overflow: auto !important; 
  position: relative;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.08);
  border: 1px solid rgba(255,255,255,0.4);
}

table {
  border-collapse: separate;
  border-spacing: 0;
  /* 🔴 文字が絶対に折り返さない幅を確保する魔法の一行 */
  width: max-content; 
  min-width: 100%;
}

thead th {
  position: sticky;
  top: 0;
  background: linear-gradient(to bottom, #fdfde0, #f9f9ca) !important;
  z-index: 100;
  padding: 16px 25px; /* プロっぽいゆとり */
  font-weight: 600;
  /* 🔴 絶対に改行させない */
  white-space: nowrap !important; 
  border-bottom: 2px solid #eee;
  color: #666;
}

/* 1列目（時間）の固定と幅の調整 */
table th:first-child,
table td:first-child {
  position: sticky;
  left: 0;
  background-color: #fdfde0 !important;
  z-index: 150;
  border-right: 1px solid #ddd;
  
  /* 🔴 幅を半分（約40px〜50px程度）に制限 */
  width: 45px; 
  min-width: 45px; 
  max-width: 50px;
  
  /* 文字がはみ出さないよう小さく調整 */
  font-size: 0.85em; 
  padding: 10px 4px; 
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; /* もし文字が長すぎたら「...」にする */
}

/* 左上角（時間ヘッダー）も同じ幅に */
thead th:first-child {
  z-index: 200;
  top: 0;
  left: 0;
  width: 45px;
  min-width: 45px;
}

thead th:first-child { z-index: 200; top: 0; left: 0; }

table td {
  padding: 15px;
  border-bottom: 1px solid #f2f2f2;
  border-right: 1px solid #f2f2f2;
  text-align: center;
}

/* ==========================================
   5. スタイリッシュな装飾（祝日・空き・ホバー）
   ========================================== */
.holiday { 
  background-color: #fff5f5 !important; 
  color: #e53935 !important; 
  font-weight: bold;
}

.clickable { 
  background-color: #f1fbf1; 
  color: #2e7d32; 
  font-weight: bold; 
  border-radius: 8px;
  transition: all 0.2s ease;
  cursor: pointer;
}

.clickable:hover {
  background-color: #e1f5e1;
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(46,125,50,0.15);
}

/* ==========================================
   6. マイページ：横スクロールなしの高級カード
   ========================================== */
.mypage .container {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 24px;
  padding: 35px 25px;
  box-shadow: 0 15px 35px rgba(0,0,0,0.07);
  width: 100%; 
  max-width: 550px; /* PCで見ても美しく、スマホでピッタリ */
  margin: 20px auto;
  box-sizing: border-box;
  border-top: 8px solid #f4b6c2;
}

.mypage .section {
  display: flex;
  align-items: center;
  padding: 20px 0;
  border-bottom: 1px solid #f0f0f0;
}

.mypage .section label {
  width: 100px;
  font-weight: bold;
  color: #999;
  font-size: 0.85em;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.mypage .section .value {
  flex: 1;
  text-align: left;
  padding-left: 15px;
  color: #222;
  font-size: 1.1em;
  font-weight: 500;
  word-break: break-all;
}

/* ==========================================
   7. 【絶対保持】ポップアップ（マスト機能）
   ========================================== */
.popup {
  position: fixed; inset: 0; background: rgba(0,0,0,0.75);
  display: flex; justify-content: center; align-items: center; z-index: 9999; padding: 20px;
  backdrop-filter: blur(5px); /* 背景をぼかして高級感を */
}
.popup-content {
  background: white; padding: 45px 25px 25px; border-radius: 20px;
  width: 100%; max-width: 450px; max-height: 85vh; overflow-y: auto; position: relative;
  box-shadow: 0 25px 60px rgba(0,0,0,0.4);
}
.close-btn { position: absolute; top: 15px; right: 20px; font-size: 30px; color: #ccc; cursor: pointer; transition: color 0.2s; }
.close-btn:hover { color: #ff4d4d; }

/* ==========================================
   8. フッター：スタイリッシュなボトムナビ
   ========================================== */
footer {
  position: fixed;
  bottom: 0;
  left: 0;   /* 🔴 これを追加 */
  right: 0;  /* 🔴 念のためこれも追加 */
  width: 100%;
  height: 65px;
  background: rgba(40, 40, 40, 0.95);
  display: flex; 
  justify-content: space-around;
  align-items: center;
  z-index: 2000;
  backdrop-filter: blur(10px);
}
footer a { color: #aaa; text-decoration: none; font-size: 10px; display: flex; flex-direction: column; align-items: center; gap: 4px; }
footer a:hover { color: #fff; }
footer a img { width: 22px; height: 22px; filter: brightness(0.8); }

/* メッセージボタン */
.openMessages {
  position: fixed; bottom: 80px; left: 50%; transform: translateX(-50%);
  padding: 12px 28px; background: #1976d2; color: white; border-radius: 40px; z-index: 1500; font-weight: bold;
  box-shadow: 0 6px 20px rgba(25,118,210,0.3);
}

/* スマホ用微調整 */
@media (max-width: 600px) {
  .mypage .section { flex-direction: column; align-items: flex-start; gap: 6px; }
  .mypage .section label { width: 100%; }
}
/* ==========================================
   9. 登録・ログイン画面専用デザイン
   ========================================== */
.register-page {
  overflow-y: auto !important; /* 登録画面はスクロールOKに */
}

.register-page h1 {
  color: #d81b60; /* 少し濃いめのピンク */
  margin-top: 40px;
}

#registerForm {
  background: white;
  padding: 30px;
  border-radius: 20px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.05);
  width: 90%;
  max-width: 400px;
  margin: 0 auto 20px;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

#registerForm label {
  font-size: 0.85em;
  font-weight: bold;
  color: #666;
  margin-bottom: -10px;
  padding-left: 5px;
}

#registerForm input {
  padding: 12px 15px;
  border: 1px solid #eee;
  border-radius: 10px;
  background-color: #f9f9f9;
  font-size: 16px; /* iPhoneでズームされないための最小サイズ */
  transition: all 0.3s;
}

#registerForm input:focus {
  outline: none;
  border-color: #f4b6c2;
  background-color: #fff;
  box-shadow: 0 0 0 3px rgba(244, 182, 194, 0.2);
}

#registerButton {
  margin-top: 10px;
  padding: 15px;
  background: linear-gradient(135deg, #f4b6c2, #d81b60);
  color: white;
  border: none;
  border-radius: 12px;
  font-size: 1em;
  font-weight: bold;
  cursor: pointer;
  box-shadow: 0 4px 15px rgba(216, 27, 96, 0.2);
}

#registerButton:disabled {
  background: #ccc;
  box-shadow: none;
}

.link {
  display: block;
  text-align: center;
  color: #888;
  text-decoration: none;
  font-size: 0.9em;
  margin-bottom: 50px;
}