/* ========== ベース ========== */
body{
  font-family: system-ui, -apple-system, "ヒラギノ角ゴ ProN","Hiragino Kaku Gothic ProN", "Segoe UI", Roboto, "Noto Sans JP", sans-serif;
  margin:0; padding:0;
  background:#f9f9f9; color:#222;
}
main{ padding:1rem; padding-bottom:calc(70px + env(safe-area-inset-bottom)); }

header{
  display:flex; align-items:center; justify-content:space-between;
  padding:.5rem 1rem; background:#eee;
}
#event-title-container{
  flex:1; display:flex; align-items:center; justify-content:center;
  font-weight:bold; font-size:1.1rem;
}
#theme-toggle{
  padding:.4rem .8rem; border:none; border-radius:6px; cursor:pointer; background:#ddd; font-size:.9rem;
}

/* ========== タイムライン ========== */
#timeline{ display:flex; flex-direction:column; gap:1rem; }
.timeline-group{ display:flex; gap:1rem; }
.timeline-item{
  flex:1; border-left:4px solid #ccc; background:#fff; padding:1rem; border-radius:8px;
  box-shadow:0 2px 5px rgba(0,0,0,.05);
}
.timeline-item.active{ border-color:#007BFF; background:rgba(0,123,255,.08); }
.timeline-item .time{ font-weight:bold; color:#333; }
.timeline-item .title{ margin:.25rem 0; font-size:1.1em; }
.timeline-item a{ color:#007BFF; text-decoration:none; }
.timeline-item a:hover{ text-decoration:underline; }

/* 属性別色 */
.timeline-item.class { border-color:#28a745; }
.timeline-item.tour  { border-color:#ffc107; }
.timeline-item.lunch { border-color:#e83e8c; }
.timeline-item.survey{ border-color:#17a2b8; }

/* ダークモード */
body.dark{ background:#121212; color:#eee; }
body.dark header{ background:#222; }
body.dark #theme-toggle{ background:#333; color:#eee; }
body.dark .timeline-item{ background:#1e1e1e; border-color:#555; }
body.dark .timeline-item.active{ border-color:#66aaff; background:rgba(102,170,255,.1); }
body.dark .timeline-item .time{ color:#ddd; }
body.dark .timeline-item a{ color:#66aaff; }

/* ========== 下部バー ========== */
#bottom-bar{
  position:fixed; left:0; right:0; bottom:0; height:60px; background:#fff; border-top:1px solid #ccc;
  display:flex; align-items:center; justify-content:space-between; padding:0 1rem; z-index:1000;
  transition:transform .3s ease-in-out;
}
#bottom-bar.hidden{ transform:translateY(100%); }
#bottom-bar .bar-content{ display:flex; justify-content:space-around; align-items:center; gap:1rem; }
#bottom-bar button{ background:#fff; color:#007BFF; border:none; border-radius:6px; padding:.5rem 1rem; font-weight:bold; cursor:pointer; }
.show-btn{
  position:fixed; bottom:1rem; right:1rem; padding:.6rem 1rem; background:#007BFF; color:#fff; border:none; border-radius:6px;
  box-shadow:0 2px 6px rgba(0,0,0,.2); cursor:pointer; z-index:1100;
}
/* --- 下部ボタンのテキストを強制1行にする --- */
#bottom-bar .bar-content { 
  flex-wrap: nowrap;       /* 念のため明示（既定はnowrap） */
}
#bottom-bar .bar-content button {
  white-space: nowrap;     /* 改行しない */
}


/* ========== モーダル ========== */
.modal{
  position:fixed; inset:0; background:rgba(0,0,0,.7);
  display:flex; align-items:center; justify-content:center; z-index:2000;
}
.modal.hidden{ display:none; }
.modal-content{
  background:rgba(30,30,30,.92); color:#fff; font-size:1.1rem; line-height:1.6; text-align:center;
  padding:1.2rem 1.2rem 1.5rem; border-radius:12px; max-width:92vw; width:680px; max-height:85vh; overflow-y:auto; position:relative;
}
.modal-close{
  position:absolute; top:10px; right:12px; background:transparent; border:none; font-size:1.5rem; color:#fff; cursor:pointer;
}

/* 見学用ラベル */
.status-label{ display:inline-block; padding:.4rem .8rem; border-radius:6px; font-weight:bold; font-size:1rem; margin:.5rem 0; color:#fff; }
.status-yes{ background:#28a745; }
.status-no{  background:#dc3545; }
.status-none{background:#6c757d; }

/* 見学モーダル disabledボタン */
#modal-content button:disabled{
  opacity:.5; cursor:not-allowed; background:#ccc!important; color:#666!important; box-shadow:none;
}

/* スピナー */
.spinner{ border:4px solid #f3f3f3; border-top:4px solid #66aaff; border-radius:50%; width:40px; height:40px; margin:0 auto 1rem; animation:spin 1s linear infinite; }
@keyframes spin{ 0%{transform:rotate(0)} 100%{transform:rotate(360deg)} }

/* ========== スタンプ帳 ========== */
/* 薄い紙っぽい台紙（画像なし・CSSのみ） */
.paper{
  background:
    linear-gradient(180deg, rgba(255,255,255,.95), rgba(248,246,240,.95)),
    radial-gradient(1200px 500px at 50% -20%, rgba(255,255,255,.65), transparent 70%),
    radial-gradient(1000px 800px at 50% 120%, rgba(0,0,0,.05), transparent 60%);
  border:1px solid rgba(0,0,0,.06);
  border-radius:12px;
  box-shadow:
    0 10px 30px rgba(0,0,0,.25),
    inset 0 1px 0 rgba(255,255,255,.7),
    inset 0 -1px 0 rgba(0,0,0,.04);
  padding:14px;
}

/* ページコンテナ */
.stampbook{
  margin:0 auto; width:min(92vw, 620px);
}
.sb-head{
  display:flex; align-items:center; justify-content:space-between; gap:.5rem; margin:.25rem 0 .6rem;
}
.sb-count{ font-size:.95rem; color:#ddd; }
.sb-nav button{
  background:#444; color:#fff; border:none; border-radius:8px; padding:.4rem .7rem; font-size:1rem; cursor:pointer;
}
.sb-nav button:disabled{ opacity:.4; cursor:not-allowed; }

/* 20個/ページ（4x5） */
.stamp-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:10px;
}
@media (max-width:420px){
  .stamp-grid{ gap:8px; }
}

/* スタンプ枠 */
.stamp-slot{
  position:relative;
  aspect-ratio:1/1;  /* 正方形スロット */
  border:2px dashed rgba(0,0,0,.18);
  border-radius:10px;
  background:repeating-linear-gradient(135deg, rgba(0,0,0,.02) 0 8px, rgba(0,0,0,.04) 8px 16px);
  overflow:hidden;
}
.slot-label{
  position:absolute; inset:auto 6px 6px 6px;
  font-size:.72rem; line-height:1.2; color:#666; text-align:center;
  text-wrap:balance;
}
.collected{ border-style:solid; border-color:rgba(0,0,0,.15); }

/* 押されたハンコ画像（上に重ねる） */
.stamp-img{
  position:absolute; inset:0; margin:auto; width:88%; height:88%; object-fit:contain; opacity:.96;
  filter: drop-shadow(0 1px 0 rgba(0,0,0,.05));
}

/* ダークモードでの紙 */
body.dark .paper{
  background:
    linear-gradient(180deg, rgba(36,36,36,.95), rgba(28,28,28,.95)),
    radial-gradient(1200px 500px at 50% -20%, rgba(255,255,255,.08), transparent 70%),
    radial-gradient(1000px 800px at 50% 120%, rgba(0,0,0,.4), transparent 60%);
  border-color:rgba(255,255,255,.06);
}
body.dark .slot-label{ color:#aaa; }