/* ====================================================================
 * daily-mobile.css — スマホ（≤768px）専用の上書きレイヤ
 *
 * 規約:
 *   - 全ルールを @media screen and (max-width: 768px) の中に置く
 *     （= 769px以上のデスクトップと印刷には1pxも影響しない）
 *   - daily.css 本体・@media print には触れない
 *   - A4シート(210mm)は transform で画面幅にフィット（倍率は daily.js の
 *     fitSheets() が --sheet-scale に書く）。親 .sheet-viewport に縮小後の
 *     占有サイズを持たせ、iOS Safari でも右端が見切れないようにする
 * ==================================================================== */

@media screen and (max-width: 768px) {

  /* ----- コントロール列 ----- */
  .daily-controls {
    padding: 8px 10px;
    gap: 8px;
  }
  .week-select {
    width: 100%;
    min-height: 44px;
    font-size: 16px; /* iOSフォーカスズーム防止 */
  }
  .day-tabs {
    width: 100%;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .day-tabs::-webkit-scrollbar { display: none; }
  .day-tab {
    flex: 0 0 auto;
    min-height: 44px;
    padding: 10px 14px;
    font-size: 14px;
  }
  .btn-print {
    margin-left: 0;
    flex: 1 1 auto;
    min-height: 44px;
  }
  .meta { font-size: 11px; }

  /* ----- A4シートのフィット表示 ----- */
  .sheets-container {
    padding: 12px 8px 48px;
    overflow-x: hidden;
    gap: 16px;
  }
  .sheet-viewport {
    width: var(--sheet-viewport-width, 318px);
    min-height: var(--sheet-viewport-height, 449px);
    display: block;
  }
  .sheet-viewport > .sheet {
    transform: scale(var(--sheet-scale, 0.4));
    transform-origin: top left;
  }
  .sheet {
    /* CSS transform を使う。zoom は iOS Safari でレイアウト幅の扱いが揺れ、
     * 右端(6年生列)の見切れが残りやすい。親 .sheet-viewport が縮小後の
     * 占有サイズを持つので、画面幅計算と表示幅が一致する。 */
    max-width: none;
  }

  /* 凡例(色の見かた)はモバイルでは非表示。俊丞の要望(2026-06-22)＝色は把握済みで
     不要。狭い画面ではヘッダ右端を占有して窮屈なので畳む。desktop/印刷は表示維持。 */
  .sheet-legend { display: none; }
}