/**
 * モバイルカレンダーセクション専用CSS
 *
 * 責務: トップページのモバイル版カレンダー表示
 * 対象: .calendar-section-mobile 内の要素
 *
 * 注意: サイドバーのカレンダー基本スタイルは style-sidebar.css
 */

/* ==============================================
   Step 2: transformを使わない拡大
   各要素のサイズを直接変更（1.21倍）
   ============================================== */

@media (max-width: 1024px) {
  /* ==============================================
     セクション全体のスタイル
     ============================================== */
  .calendar-section-mobile {
    display: block;
    padding: 20px 30px 80px;
    background: var(--color-cream);
    text-align: center;
  }

  .calendar-section-mobile .section-header {
    margin-bottom: 25px;
  }

  .calendar-section-mobile .section-title {
    font-family: var(--font-base);
    font-size: 1.8rem;
    color: var(--color-brown);
    letter-spacing: 0.15em;
    margin-bottom: 5px;
  }

  .calendar-section-mobile .section-subtitle {
    font-family: var(--font-mincho);
    font-size: 0.9rem;
    color: var(--color-brown);
    opacity: 0.8;
  }

  /* ==============================================
     カレンダー本体のスタイル
     ============================================== */

  /* カレンダー枠スタイル */
  .calendar-section-mobile .sidebar-calendar {
    background: var(--color-brown, #7f3f20);
    border-radius: 12px;
    min-height: 420px;
    position: relative;
  }

  /* カレンダー内側パディング */
  .calendar-section-mobile .sidebar-calendar .simcal-calendar {
    padding: 12px 15px 8px 15px !important;
  }

  /* 月表示を拡大（18px → 24px） */
  .calendar-section-mobile .sidebar-calendar .simcal-current-year,
  .calendar-section-mobile .sidebar-calendar .simcal-current-month {
    font-size: 24px !important;
  }

  /* ナビゲーション行を拡大（30px → 36px） */
  .calendar-section-mobile .sidebar-calendar .simcal-nav {
    height: 36px !important;
    line-height: 36px !important;
  }

  /* ＜＞ボタンを拡大 */
  .calendar-section-mobile .sidebar-calendar .simcal-nav-button {
    font-size: 24px !important;
  }

  /* 曜日ヘッダーを拡大（14px → 24px） */
  .calendar-section-mobile .sidebar-calendar th {
    font-size: 24px !important;
    height: 40px !important;
    line-height: 40px !important;
  }

  /* セル行を拡大（24px → 29px） */
  .calendar-section-mobile .sidebar-calendar td {
    height: 40px !important;
    line-height: 40px !important;
  }

  /* 日付セル（●）を拡大（24px → 35px） */
  .calendar-section-mobile .sidebar-calendar .simcal-day-number {
    width: 35px !important;
    height: 35px !important;
    line-height: 28px !important;
    font-size: 1.6rem !important;
  }

  /* 今日の日付のオレンジ●を拡大（8px → 12px）& 右上に移動 */
  .calendar-section-mobile .sidebar-calendar .simcal-today .simcal-day-number::before {
    width: 12px !important;
    height: 12px !important;
    top: -2px !important;
    right: -2px !important;
  }

  /* 凡例を拡大（14px → 20px）& 下揃え */
  .calendar-section-mobile .calendar-legend {
    font-size: 20px !important;
    position: absolute;
    bottom: 12px;
    left: 0;
    right: 0;
  }

  .calendar-section-mobile .calendar-legend .legend-open {
    width: 20px !important;
    height: 20px !important;
  }
}