/* responsive.css — スマホ・タブレット対応（Phase 4・2026-07-22）
   方針（§8.2 修正4）: 1024px以上=現行の左右分割／未満=入力を縦一列にし、
   プレビューは「入力⇄プレビュー」タブで切り替える。デザインはライトモード特化。 */

/* スマホ用の切替タブは、PC（左右分割）では隠す */
.mobile-view-tabs { display: none; }

/* step5の「プレビュータブへの誘導」文は、PCでは不要（右に常時プレビューがあるため）隠す */
.mobile-preview-hint { display: none; }

/* step5の左列にある大きなプレビューは、画面の広さによらず出さない
   （2026-08-06 M1-1）。右の列に、全体表示・ページ送り・拡大縮小のできる
   プレビューが常にあるため、同じものが2枚並ぶ形になっていた。
   PCでは左列（高さ660px）に対して中身が800pxあり、用紙が下端で切れたまま
   操作エリアを覆っていた。スマホでは2026-07-23に同じ手当てを済ませてある。
   左列は「PDFをダウンロード」「データを保存」の操作エリアとして空けておく */
.preview-fullscreen { display: none; }

/* プレビュー内のPDFボタンはスマホ・タブレット専用（PCは入力側のボタンが常に見えている） */
.btn-preview-pdf { display: none; }

/* ===== タブレット・スマホ（1024px以下）: 縦一列＋プレビュー切替 ===== */
@media (max-width: 1024px) {
  .split-layout {
    flex-direction: column;
    overflow: hidden;
  }

  .mobile-view-tabs {
    display: flex;
    gap: 4px;
    padding: var(--space-sm) var(--space-md);
    background-color: var(--bg-card);
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
  }
  .mv-tab {
    flex: 1;
    padding: var(--space-sm);
    border-radius: var(--radius-sm);
    font-weight: var(--font-weight-medium);
    color: var(--text-secondary);
    background-color: var(--bg-secondary);
    transition: background-color var(--transition-fast), color var(--transition-fast);
  }
  .mv-tab.active {
    background-color: var(--color-primary);
    color: #fff;
  }

  .form-panel {
    max-width: none;
    min-width: 0;
    width: 100%;
    border-right: none;
  }
  .preview-panel {
    min-width: 0;
    width: 100%;
  }

  /* いま選ばれているパネルだけを見せる（もう片方は畳む） */
  .split-layout[data-view="form"] .preview-panel { display: none; }
  .split-layout[data-view="preview"] .form-panel { display: none; }

  /* step5の大きな固定プレビューは畳み（Safariで操作不能になった）、タブへの誘導文を出す。
     プレビューは上の「プレビュー」タブ＝2-cの共通プレビューで見てもらう（指摘d・最小修正） */
  .preview-fullscreen { display: none; }

  /* プレビュータブからもPDFを出せるようにする（実機指摘⑤の解消。誘導先で行き止まりにしない） */
  .btn-preview-pdf {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    flex-shrink: 0;
  }

  .mobile-preview-hint {
    display: block;
    margin-top: var(--space-md);
    padding: var(--space-md);
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    background-color: var(--color-primary-alpha);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    line-height: 1.6;
  }
}

/* ===== スマホ（640px以下）: さらに詰める ===== */
@media (max-width: 640px) {
  .app-header { padding: 0 var(--space-md); height: 54px; }

  /* 390px幅では、ヘッダーの中身が横に収まらず崩れていた（2026-08-30 実測）。
     横の勘定＝16＋247（左）＋111（右）＋16＝390 で**余白がゼロ**。入りきらないので
     文字が2行に折り返し、54pxの箱から上下へはみ出して重なった
     （ロゴ高さ80px／［ホームに戻る］57px／［年度計算］70px＝いずれも箱の54pxを超える）。
     狭い画面では、この2つのボタンを**アイコンだけ**にして幅を空ける。
     押せる場所であることは枠と面が示すので、2026-08-11 M2-8の裁定（枠と文字で立たせる）の
     ねらいは保てる。読み上げ用の名前は aria-label に残っているので、意味も失わない */
  .header-back-btn span,
  #btn-calculator .btn-label-text { display: none; }
  .header-back-btn { padding: var(--space-xs) var(--space-sm); }
  /* ロゴは折り返さない（「てまら／く」と割れていた） */
  .brand-wordmark { white-space: nowrap; }

  /* ホーム */
  .home-container { padding: var(--space-xl) var(--space-md); }
  .home-cards { flex-direction: column; }
  .home-actions { flex-direction: column; }
  .home-actions .btn { width: 100%; justify-content: center; }
  /* 書類別のボタンも、狭い画面では縦に積む（2026-08-13 M3-h） */
  .home-actions-sub { flex-direction: column; }
  .home-actions-sub .btn { width: 100%; justify-content: center; }
  /* ボタンが横幅いっぱいになるので、説明は左そろえで読ませる（2026-07-29 バッチ5） */
  .home-actions-note { text-align: left; }

  /* 2列入力は縦積み。ただし年月日など form-row-tight は横並びのまま残す */
  .form-row { flex-direction: column; gap: 0; }
  .form-row .form-group { margin-bottom: var(--space-lg); }
  .form-row.form-row-tight {
    flex-direction: row;
    gap: var(--space-sm);
    align-items: flex-end;
    margin-bottom: var(--space-lg);
  }

  /* プログレスは丸だけにして横に詰める（ラベルは省く） */
  .progress-steps { padding: var(--space-md) var(--space-sm); overflow-x: auto; }
  .step-label { display: none; }
  .step-circle { width: 26px; height: 26px; }
  .step-line { min-width: 10px; }

  .form-panel { padding: var(--space-md); }
  .preview-content { padding: var(--space-md); }

  /* 狭い画面では見出しを省き、操作バー（全体表示・送り・拡大縮小）に幅を渡す */
  .preview-header { flex-wrap: wrap; gap: var(--space-sm); }
  .preview-title { display: none; }
  .preview-controls { width: 100%; justify-content: center; }

  /* 動的リスト項目（年月＋内容＋削除）は縦に折り返して窮屈さを解消 */
  .dynamic-list-item { flex-wrap: wrap; }
  .item-remove-btn { margin-top: 0; }

  /* 年月欄はスマホでは横いっぱいに使い、西暦4桁がはっきり見えるようにする
     （実機フィードバック5: 2桁しか見えず、4桁で入れることに気づけなかった） */
  .dynamic-list-item .ym-group { flex: 1 1 100%; }
  .dynamic-list-item .ym-group .form-input { min-width: 5em; }

  /* 年号切替＋電卓のツールバーが入りきるように */
  .form-toolbar { flex-wrap: wrap; gap: var(--space-sm); }

  /* 保存カードの操作ボタン（2-cで用意した折り返しを踏襲） */
  .home-actions, .preview-actions { gap: var(--space-sm); }
}