/* ===== スタンプ・絵文字カレンダー =====
   [stamp_calendar] の月ビュー / 索引ビュー。
   月ビューは同じHTMLのまま、狭い画面で「日付リスト」に組み替える。
   旧カレンダーは7カラムのまま縮んでサムネイルが45pxになっていた。 */

.ug-cal {
  max-width: 1000px;
  margin: 0 auto;
}
.ug-cal a {
  text-decoration: none;
  color: inherit;
}

/* ---- 月ナビ ---- */
.ug-cal-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin: 0 0 0.8rem;
  font-size: 0.95rem;
}
.ug-cal-nav .ug-cal-cur {
  font-weight: 700;
  font-size: 1.15rem;
}
.ug-cal-nav a:hover {
  text-decoration: underline;
}
.ug-cal-nav .is-off {
  visibility: hidden;
}

/* ---- 月グリッド ---- */
.ug-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ug-cal-head {
  text-align: center;
  font-size: 0.85rem;
  padding: 0.3rem 0;
  background: #f6f6f6;
}
.ug-cal-head.is-dow0 { color: #d63b3b; }
.ug-cal-head.is-dow6 { color: #2f74d0; }

.ug-cal-cell {
  min-height: 92px;
  padding: 0.25rem;
  border: 1px solid #eee;
  box-sizing: border-box;
}
.ug-cal-cell.is-pad {
  border-color: transparent;
  background: transparent;
}
.ug-cal-day {
  display: block;
  font-size: 0.8rem;
  line-height: 1.2;
  color: #666;
}
.ug-cal-cell.is-dow0 .ug-cal-day { color: #d63b3b; }
.ug-cal-cell.is-dow6 .ug-cal-day { color: #2f74d0; }
/* 曜日は狭い画面の日付リスト用。グリッドでは見出し行があるので出さない */
.ug-cal-dow {
  display: none;
}

/* ---- セルの中身。同じ日に複数あっても並べるだけ（スライダーを使わない） ---- */
.ug-cal-items {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  margin: 0.15rem 0 0;
  padding: 0;
  list-style: none;
}
.ug-cal-item {
  margin: 0;
  padding: 0;
  min-width: 0;
  flex: 1 1 40%;
}
.ug-cal-item img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 0.12s;
}
.ug-cal-item a:hover img {
  transform: scale(1.06);
}
/* タイトルはグリッドでは出さない（ホバーの title 属性で見せる） */
.ug-cal--month .ug-cal-name,
.ug-cal--month .ug-cal-badge {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.ug-cal-count {
  margin: 0.8rem 0 0.2rem;
  font-size: 0.85rem;
  color: #666;
  text-align: right;
}
.ug-cal-back {
  margin: 0.2rem 0 0;
  font-size: 0.9rem;
}

/* ---- 索引（年ごとの月の表紙） ---- */
.ug-cal-years {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.9rem;
  margin: 0 0 1.2rem;
  padding: 0.5rem 0.6rem;
  background: #f6f6f6;
  border-radius: 6px;
  font-size: 0.9rem;
}
.ug-cal-years a:hover {
  text-decoration: underline;
}

.ug-cal-year {
  margin: 0 0 1.6rem;
}
.ug-cal-year-head {
  font-size: 1.05rem;
  margin: 0 0 0.5rem;
  color: #555;
}
.ug-cal-months {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.6rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ug-cal-month a {
  display: block;
  text-align: center;
}
.ug-cal-month img {
  display: block;
  width: 100%;
  height: auto;
  /* 月ごとに絵の縦横比が違うので正方形の枠に収める。年の並びが揃う */
  aspect-ratio: 1 / 1;
  object-fit: contain;
  transition: transform 0.12s;
}
.ug-cal-month a:hover img {
  transform: scale(1.06);
}
.ug-cal-month-name {
  display: block;
  font-size: 0.85rem;
}
.ug-cal-month-count {
  display: block;
  font-size: 0.7rem;
  color: #888;
}
/* 配信日が入っていない月。枠だけ残して年の並びを保つ */
.ug-cal-month.is-empty {
  text-align: center;
}
.ug-cal-month.is-empty::before {
  content: "";
  display: block;
  aspect-ratio: 1 / 1;
  border: 1px dashed #eee;
  border-radius: 4px;
  box-sizing: border-box;
}
.ug-cal-month.is-empty .ug-cal-month-name {
  color: #ccc;
}

/* ---- 配信日が未設定の一覧 ---- */
.ug-cal-items--flat {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.6rem;
}
.ug-cal-items--flat .ug-cal-item {
  flex: none;
  text-align: center;
}
.ug-cal-items--flat .ug-cal-name {
  display: block;
  font-size: 0.7rem;
  line-height: 1.25;
}

.ug-cal-badge {
  display: inline-block;
  font-size: 0.65rem;
  padding: 0 0.3em;
  border-radius: 3px;
  background: #eee;
  color: #555;
}
.ug-cal-badge.is-free { background: #e8f5e9; color: #2e7d32; }
.ug-cal-badge.is-ended { background: #eee; color: #888; }
.ug-cal-badge.is-upcoming { background: #fff3e0; color: #ef6c00; }

/* ===== 狭い画面: 月グリッドを日付リストに組み替える ===== */
@media (max-width: 600px) {
  .ug-cal--month .ug-cal-grid {
    display: block;
  }
  .ug-cal--month .ug-cal-head,
  .ug-cal--month .ug-cal-cell.is-pad,
  .ug-cal--month .ug-cal-cell.is-empty {
    display: none;
  }
  .ug-cal--month .ug-cal-cell {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    min-height: 0;
    padding: 0.5rem 0.2rem;
    border: 0;
    border-bottom: 1px solid #eee;
  }
  .ug-cal--month .ug-cal-day {
    flex: 0 0 2.6em;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.15;
    text-align: center;
    padding-top: 0.2rem;
  }
  /* 見出し行が消えるぶん、日付の下に曜日を出す */
  .ug-cal--month .ug-cal-dow {
    display: block;
    font-size: 0.7rem;
    font-weight: 400;
    margin-top: 0.1em;
  }
  .ug-cal--month .ug-cal-items {
    flex: 1 1 auto;
    display: block;
    margin: 0;
  }
  .ug-cal--month .ug-cal-item {
    flex: none;
  }
  .ug-cal--month .ug-cal-item + .ug-cal-item {
    margin-top: 0.5rem;
  }
  .ug-cal--month .ug-cal-item a {
    display: flex;
    align-items: center;
    gap: 0.6rem;
  }
  .ug-cal--month .ug-cal-item img {
    width: 56px;
    flex: 0 0 56px;
  }
  /* リストではタイトルを出す */
  .ug-cal--month .ug-cal-name {
    position: static;
    width: auto;
    height: auto;
    clip: auto;
    overflow: visible;
    white-space: normal;
    font-size: 0.85rem;
    line-height: 1.3;
  }
  .ug-cal--month .ug-cal-badge {
    position: static;
    width: auto;
    height: auto;
    clip: auto;
    overflow: visible;
    margin-left: 0.4em;
  }

  .ug-cal-months,
  .ug-cal-items--flat {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}