@charset "UTF-8";
/* ========================================================================
   配信カレンダー page-calendar.php 用スタイル(白基調+ティール)
   v0.17.17: 絞り込みUI / 丸サムネ / 一覧レイアウト刷新
   ======================================================================== */

.calendar-page {
  background: var(--bg-base);
  color: var(--text-primary);
  min-height: 60vh;
  padding: 3rem 1.25rem;
}
.calendar-page__inner { max-width: 960px; margin: 0 auto; }

.calendar-page__header {
  text-align: center;
  margin-bottom: 2rem;
}
.calendar-page__title {
  font-size: 1.6rem;
  letter-spacing: 0.04em;
  color: var(--text-primary);
  margin: 0 0 1.5rem;
}

.calendar-page__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  margin-bottom: 1rem;
}
.calendar-page__nav--bottom { margin-top: 2rem; margin-bottom: 0; }
.calendar-page__current {
  font-size: 1.3rem;
  color: var(--text-primary);
  font-weight: 700;
  min-width: 120px;
  text-align: center;
}
.calendar-nav__btn {
  display: inline-block;
  padding: 0.4rem 0.9rem;
  border: 1px solid var(--brand);
  color: var(--brand);
  text-decoration: none;
  font-size: 0.9rem;
  border-radius: 4px;
  white-space: nowrap;
  transition: all 0.15s ease;
}
.calendar-nav__btn:hover {
  background: var(--brand);
  color: #fff;
}

/* 年月ジャンプ(絞り込みカード内に統合) */
.calendar-filter__jump {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  padding-bottom: 0.85rem;
  margin-bottom: 0.85rem;
  border-bottom: 1px solid var(--border-light);
}
.calendar-filter__jump-controls {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: nowrap;
}
.calendar-filter__select--ym {
  width: auto;
  min-width: 0;
  flex: 0 1 auto;
  padding-left: 0.4rem;
  padding-right: 0.3rem;
}
.calendar-filter__jump-btn {
  flex: 0 0 auto;
  white-space: nowrap;
  background: var(--brand);
  border: 1px solid var(--brand);
  color: #fff;
  border-radius: 5px;
  padding: 0.5rem 1rem;
  font-family: inherit;
  font-size: 0.85rem;
  cursor: pointer;
  transition: background 0.15s ease;
}
.calendar-filter__jump-btn:hover { background: var(--brand-dark); border-color: var(--brand-dark); }

.calendar-page__empty {
  text-align: center;
  color: var(--text-muted);
  padding: 3rem 0;
  font-size: 0.95rem;
}

/* ------------------------------------------------------------------ */
/* 絞り込みUI                                                          */
/* ------------------------------------------------------------------ */
.calendar-filter {
  /* v0.19.100: /works/ の .works-filters とデザインを統一(薄グレー背景・ボーダーなし) */
  background: #f7f9fa;
  border: none;
  border-radius: 8px;
  padding: 14px 16px;
  margin-bottom: 2rem;
}
.calendar-filter__row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.85rem;
}
.calendar-filter__field {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  min-width: 140px;
}
.calendar-filter__field--search {
  flex: 1 1 220px;
  min-width: 180px;
}
.calendar-filter__label {
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  color: var(--text-secondary);
  font-weight: 700;
}
.calendar-filter__select,
.calendar-filter__input {
  /* v0.19.100: /works/ のフィルター(.works-filter)とデザインを統一 */
  background: #fff;
  color: var(--text-primary);
  border: 1px solid #cfd4d8;
  border-radius: 6px;
  padding: 8px 12px;
  font-family: inherit;
  font-size: 0.85rem;
  width: 100%;
  box-sizing: border-box;
  cursor: pointer;
  transition: border-color 0.15s ease;
}
.calendar-filter__select:focus,
.calendar-filter__input:focus {
  outline: none;
  border-color: var(--brand);
}
.calendar-filter__input::placeholder { color: var(--text-muted); }
.calendar-filter__clear {
  flex: 0 0 auto;
  background: transparent;
  border: 1px solid var(--border-light);
  color: var(--text-secondary);
  border-radius: 5px;
  padding: 0.5rem 0.9rem;
  font-family: inherit;
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.15s ease;
}
.calendar-filter__clear:hover {
  border-color: var(--brand);
  color: var(--brand);
}
.calendar-filter__count {
  margin: 0.75rem 0 0;
  font-size: 0.8rem;
  color: var(--text-muted);
}

.calendar-page__noresult {
  text-align: center;
  color: var(--text-muted);
  padding: 2.5rem 0;
  font-size: 0.95rem;
}

/* ------------------------------------------------------------------ */
/* 日付セクション                                                      */
/* ------------------------------------------------------------------ */
.calendar-day {
  margin-bottom: 2rem;
  border-top: 1px solid var(--border-light);
  padding-top: 1.5rem;
}
.calendar-day:first-of-type { border-top: none; padding-top: 0; }
.calendar-day__heading {
  font-size: 1.2rem;
  margin: 0 0 1rem;
  color: var(--text-primary);
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}
.calendar-day__day { font-size: 1.6rem; font-weight: 700; color: var(--brand); }
.calendar-day__weekday { font-size: 1rem; color: var(--text-secondary); }
.calendar-day__weekday--w0 { color: #d97070; }
.calendar-day__weekday--w6 { color: #4a8dc8; }

.calendar-day__releases {
  list-style: none;
  padding: 0;
  margin: 0;
  /* v0.20.33: グリッド化。 display/gap は front-flat-grid--col5 に委ねる */
}
.calendar-release-item { margin: 0; }

/* ------------------------------------------------------------------ */
/* 配信エントリ(カード全体が作品ページへのリンク)                     */
/* ------------------------------------------------------------------ */
.calendar-release-item { display: block; }
.calendar-release-item[hidden] { display: none; }

.calendar-release {
  display: flex;
  gap: 0.9rem;
  align-items: flex-start;
  padding: 0.7rem 0.85rem;
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: 8px;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.05s ease;
}
.calendar-release:hover {
  border-color: var(--brand);
  box-shadow: 0 2px 10px rgba(0,0,0,0.06);
}
.calendar-release:active { transform: translateY(1px); }

/* サムネ(作品ページの連載/コミックスリストと同じ: 幅65px・縦auto・角丸) */
.calendar-release__cover {
  flex: 0 0 65px;
  width: 65px;
  display: block;
  border-radius: 3px;
  overflow: hidden;
  background: var(--bg-soft);
}
.calendar-release__cover img {
  width: 100%;
  height: auto;
  display: block;
}
.calendar-release__cover-empty {
  display: block;
  width: 100%;
  aspect-ratio: 65 / 92;
  background: var(--bg-soft);
  border: 1px solid var(--border-light);
  border-radius: 3px;
}

.calendar-release__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.calendar-release__title-line {
  line-height: 1.45;
  color: var(--text-secondary);
}
.calendar-release__title {
  font-weight: 400;
  font-size: 0.8rem;
  color: var(--text-secondary);
}
.calendar-release__format-label {
  color: var(--text-secondary);
  font-size: 0.8rem;
  margin-left: 0.15rem;
}
.calendar-release__count {
  color: var(--text-secondary);
  font-size: 0.8rem;
  margin-left: 0.1rem;
}

/* 作家名(作品ページ work-hero__credits と同じ表記) */
.calendar-release__creator {
  display: block;
  font-size: 0.8rem;
  color: var(--text-secondary);
  line-height: 1.4;
}
.calendar-release__creator .credit-segment { display: inline; white-space: nowrap; }
.calendar-release__creator .credit-segment + .credit-segment::before {
  content: '／';
  color: var(--text-muted);
  margin: 0 0.25em;
}
.calendar-release__creator .credit-segment__role {
  color: var(--text-muted);
  font-size: 0.72rem;
  margin-right: 0.35em;
}

/* 配信状況(dc_works_api_topmeta_html の meta-badge 群) */
.calendar-release__status {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.15rem;
}
.calendar-release__status .meta-badge {
  display: inline-block;
  font-size: 0.7rem;
  line-height: 1.4;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  background: var(--bg-soft);
  color: var(--text-secondary);
  border: 1px solid var(--border-light);
  white-space: nowrap;
}
.calendar-release__status .meta-badge--status {
  color: var(--brand-dark);
  border-color: color-mix(in srgb, var(--brand) 35%, transparent);
}
.calendar-release__status .meta-badge--free {
  background: color-mix(in srgb, var(--brand) 12%, #fff);
  color: var(--brand-dark);
  border-color: color-mix(in srgb, var(--brand) 45%, transparent);
  font-weight: 700;
}

/* ------------------------------------------------------------------ */
/* レスポンシブ                                                        */
/* ------------------------------------------------------------------ */
@media (max-width: 600px) {
  .calendar-page { padding: 2rem 1rem; }
  /* ナビは PC と同じく 1 段(前月 / 当月 / 次月)を維持 */
  .calendar-page__nav { gap: 0.5rem; }
  .calendar-page__current { min-width: 0; font-size: 1.1rem; }
  .calendar-nav__btn { padding: 0.35rem 0.55rem; font-size: 0.8rem; }
  .calendar-filter__row { gap: 0.6rem; }
  .calendar-filter__field { min-width: 0; flex: 1 1 calc(50% - 0.3rem); }
  .calendar-filter__field--search { flex: 1 1 100%; }
  .calendar-filter__clear { flex: 1 1 100%; }
  .calendar-release__cover { flex: 0 0 56px; width: 56px; }
  .calendar-release__title { font-size: 0.9rem; }
}

/* ===== v0.20.22 calendar フィルタを /works/ と統一 ===== */
/* works-filter クラスを併用したので、 年月セレクトの幅だけ個別調整 */
.calendar-filter .works-filter.calendar-filter__select--ym {
  min-width: 0;
  flex: 0 0 auto;
  width: auto;
}
.calendar-filter .calendar-filter__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
}
.calendar-filter .calendar-filter__row + .calendar-filter__row {
  margin-top: 0.6rem;
}
/* v0.20.23: テキスト検索+クリアの行が親からはみ出す問題を修正。
   検索は伸縮(min-width 0で縮小可)、 クリアは固定幅、 box-sizing 統一。 */
.calendar-filter .works-filter,
.calendar-filter .works-filter-clear {
  box-sizing: border-box;
}
.calendar-filter .works-filter--search {
  flex: 1 1 200px;
  min-width: 0;
}
.calendar-filter .works-filter-clear {
  flex: 0 0 auto;
  white-space: nowrap;
}
/* SP: works と同じくフォーム類を白背景・タップ拡大防止・カスタム矢印 */
@media (max-width: 768px) {
  .calendar-filter .works-filter {
    -webkit-appearance: none;
    appearance: none;
    box-sizing: border-box;
    min-width: 0;
    max-width: 100%;
    background-color: #f7f9fa;
    border: 1px solid #d6dbdf;
    border-radius: 10px;
    padding: 11px 32px 11px 14px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    flex: 1 1 45%;
  }
  .calendar-filter .works-filter.calendar-filter__select--ym {
    flex: 1 1 45%;
  }
  .calendar-filter .works-filter--search {
    background-color: #fff;
    background-image: none;
    padding: 11px 14px;
    font-size: 16px;
    flex: 1 1 100%;
    width: 100%;
    box-sizing: border-box;
  }
  .calendar-filter .works-filter--search::placeholder {
    font-size: 13px;
  }
}

/* v0.20.25: 絞り込みエリアの開閉(hidden属性を確実に効かせる) */
.calendar-filter[hidden] { display: none !important; }

/* ===== v0.20.33 配信カレンダー リスト→コミックスグリッド化 ===== */
/* /works/?format=volume と同じ front-flat-card グリッドを流用。
   各日付ごとに front-flat-grid--col5 で表紙カードを並べる。 */
.calendar-day__releases.front-flat-grid {
  margin-top: 0.4rem;
}
/* v0.20.34: works側の 5列/SP3列・角丸なし は [data-works-grid] 限定で
   calendar に効かないため、 calendar 用に同等ルールを用意。 */
.calendar-day__releases.works-grid--comics.front-flat-grid--col5 {
  grid-template-columns: repeat(3, 1fr); /* SP 3列 */
}
@media (min-width: 769px) {
  .calendar-day__releases.works-grid--comics.front-flat-grid--col5 {
    grid-template-columns: repeat(5, 1fr); /* PC 5列 */
  }
}
/* 表紙: 横フィックス・縦は成り行き(配信ごとに縦横比が異なり断ち切れるため)、 角丸なし */
.calendar-day__releases .front-flat-card__banner--cover {
  aspect-ratio: auto;
  border-radius: 0;
  background: #f0f2f4;
}
.calendar-day__releases .front-flat-card__banner {
  border-radius: 0;
}
.calendar-day__releases .front-flat-card__banner--cover img {
  width: 100%;
  height: auto;         /* 縦は成り行き(上下断ち切れ防止) */
  object-fit: contain;
  display: block;
}
/* v0.20.232: NO IMAGE プレースホルダの高さを表紙サムネと揃える。
   カレンダーでは --cover 親が aspect-ratio:auto(画像成り行き)のため、画像が無いと
   プレースホルダが高さ0付近に潰れ「NO IMAGE」が極端に小さく表示されていた。
   コミックス表紙の標準比率(3:4)を与えてサムネと同等の高さにする。 */
.calendar-day__releases .front-flat-card__banner--cover > .front-flat-card__banner--empty,
.calendar-day__releases .front-flat-card__banner--cover > .dc-noimg {
  aspect-ratio: 3 / 4;
  width: 100%;
  height: auto;
}
/* 配信の 形式【】+話数/巻数 ラベル(タイトル直下) */
.calendar-card__release-label {
  font-size: 0.75rem;
  color: var(--text-secondary);
  line-height: 1.4;
  margin: 0.15rem 0 0.1rem;
}
.calendar-card__format { color: var(--text-muted); }
.calendar-card__count { color: var(--brand-dark); font-weight: 700; }