/* =========================================================
   レスポンシブデザイン（スマホ対応）
   ========================================================= */

/* 基本設定 */
* {
  -webkit-tap-highlight-color: transparent;
  /* 文字の重なりを防ぐ */
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* スマホ（768px以下） */
@media (max-width:none
  /* ページ全体 - パディング調整で文字重なり防止 */
  main {
    padding: var(--spacing-md) var(--spacing-md) var(--spacing-xl);
    width: 100%;
    box-sizing: border-box;
    line-height: 1.7;
  }
  
  /* ヘッダー下の余白を調整 */
  main > *:first-child {
    margin-top: 0;
  }
  
  /* カード - パディング調整 */
  .card-modern {
    padding: var(--spacing-lg) var(--spacing-md);
    margin-bottom: var(--spacing-md);
    width: 100%;
    box-sizing: border-box;
    /* 文字がはみ出さないように */
    overflow: hidden;
  }
  
  /* 見出しサイズ調整 - 文字重なり防止 */
  h1, .h1, .page-title {
    font-size: var(--font-size-2xl);
    margin-bottom: var(--spacing-md);
    line-height: 1.4;
    word-wrap: break-word;
    overflow-wrap: break-word;
    margin-top: var(--spacing-sm);
  }
  
  h2, .h2, .section-title {
    font-size: var(--font-size-xl);
    margin-bottom: var(--spacing-md);
    line-height: 1.5;
    word-wrap: break-word;
    overflow-wrap: break-word;
  }
  
  h3, .h3, .subsection-title {
    font-size: var(--font-size-lg);
    margin-bottom: var(--spacing-sm);
    line-height: 1.5;
    word-wrap: break-word;
    overflow-wrap: break-word;
  }
  
  /* 段落の行間を広げる */
  p {
    line-height: 1.7;
    margin-bottom: var(--spacing-md);
  }
  
  /* フォーム要素 - iOSのズーム防止 + 文字重なり防止 */
  .form-input,
  .form-select,
  .form-textarea,
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="file"],
  select,
  textarea {
    font-size: 16px !important; /* iOSのズーム防止 */
    padding: var(--spacing-md);
    min-height: 48px; /* タッチターゲットサイズ */
    width: 100%;
    box-sizing: border-box;
    word-wrap: break-word;
    overflow-wrap: break-word;
  }
  
  /* ボタン - 全幅にしてタッチしやすく + 文字重なり防止
     ※ pill-btn（ヘッダーの admin / ログアウト）と
        scroll-top-btn（スクロールボタン）は除外 */
  .btn,
  button:not(.hamburger-btn),
  input[type="button"],
  input[type="submit"],
  a.btn,
  a[class*="btn"]:not(.pill-btn):not(.scroll-top-btn) {
    width: 100%;
    max-width:none;
    padding: var(--spacing-md) var(--spacing-lg);
    min-height: 48px; /* タッチターゲットサイズ */
    font-size: var(--font-size-base);
    box-sizing: border-box;
    white-space: normal; /* 長いテキストを折り返す */
    word-wrap: break-word;
    overflow-wrap: break-word;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 1.5;
    border-radius: var(--radius-md);
    font-weight: 600;
  }
  
  .btn-container .btn,
  .btn-container button,
  .btn-container a[class*="btn"] {
    min-width: unset;
  }
  
  .btn-container.flex-col .btn,
  .btn-container.flex-col button,
  .btn-container.flex-col a[class*="btn"] {
    max-width:none;
  }
  
  .btn-sm,
  button.btn-sm {
    min-height: 44px;
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--font-size-sm);
    border-radius: var(--radius-md);
  }
  
  .btn-lg,
  button.btn-lg {
    min-height: 52px;
    padding: var(--spacing-lg) var(--spacing-xl);
    font-size: var(--font-size-lg);
    border-radius: var(--radius-md);
  }
  
  /* ボタンコンテナ - 縦並びで重なり防止 */
  .btn-container,
  .btn-group,
  .button-group,
  div[class*="btn-container"],
  div[class*="button-group"] {
    flex-direction: column;
    width: 100%;
    gap: var(--spacing-sm);
    box-sizing: border-box;
  }
  
  /* フォーム内ボタン */
  form .btn,
  form button[type="submit"],
  form input[type="submit"],
  form input[type="button"],
  form a[class*="btn"] {
    width: 100%;
    max-width:none;
    min-height: 48px;
    box-sizing: border-box;
  }
  
  /* リンクボタン */
  a[class*="link"],
  .link-detail,
  .link-edit,
  .link-delete {
    display: inline-block;
    min-height: 44px;
    padding: var(--spacing-sm) var(--spacing-md);
    box-sizing: border-box;
    text-align: center;
    word-wrap: break-word;
    border-radius: var(--radius-md);
    line-height: 1.5;
  }
  
  /* 特殊なボタン */
  .search-btn,
  .sub-btn {
    min-height: 44px;
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--font-size-sm);
    box-sizing: border-box;
    border-radius: var(--radius-md);
    line-height: 1.5;
  }
  
  /* テーブルラッパー - スマホ版のみ横スクロール対応 */
  .table-wrapper,
  .table-wrap,
  .grades-table,
  .results-table,
  .class-table,
  div[class*="table"] {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
    box-sizing: border-box;
  }
  
  /* テーブル本体 - 構造を保ったまま横スクロール対応 */
  table,
  .table-modern {
    display: table;
    width: 100%;
    font-size: var(--font-size-base);
    border-collapse: collapse;
    box-sizing: border-box;
    line-height: 1.6;
  }
  
  table thead,
  table tbody,
  table tr,
  .table-modern thead,
  .table-modern tbody,
  .table-modern tr {
    display: table-row;
    width: 100%;
  }
  
  table th,
  table td,
  .table-modern th,
  .table-modern td {
    display: table-cell;
    padding: var(--spacing-md) var(--spacing-sm);
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: normal;
    line-height: 1.6;
    font-size: var(--font-size-sm);
    vertical-align: middle;
  }
  
  table th {
    font-weight: 600;
    font-size: var(--font-size-sm);
    padding: var(--spacing-sm) var(--spacing-sm);
  }
  
  /* 成績表の最小幅 */
  .grades-table table,
  .grades-table .table-modern,
  .results-table table,
  .results-table .table-modern {
    min-width: 800px;
  }
  
  /* クラステーブルの最小幅 */
  .class-table table,
  .class-table .table-modern {
    min-width: 500px;
  }
  
  /* グリッド - 1列に */
  .grid,
  .grid-2,
  .grid-3,
  .grid-auto {
    grid-template-columns: 1fr;
    gap: var(--spacing-md);
    width: 100%;
    box-sizing: border-box;
  }
  
  /* フレックス - 縦並び */
  .flex {
    flex-wrap: wrap;
    width: 100%;
    box-sizing: border-box;
  }
  
  .flex-row-mobile {
    flex-direction: column;
  }
  
  /* スペーシング調整 */
  .spacer-lg {
    margin-bottom: var(--spacing-md);
  }
  
  .spacer-xl {
    margin-bottom: var(--spacing-lg);
  }
  
  /* テキストサイズ調整 */
  .text-small {
    font-size: var(--font-size-xs);
  }
  
  /* リスト */
  .list-item {
    padding: var(--spacing-md);
    word-wrap: break-word;
    overflow-wrap: break-word;
  }
  
  /* アラート */
  .alert {
    padding: var(--spacing-md);
    font-size: var(--font-size-sm);
    word-wrap: break-word;
    overflow-wrap: break-word;
  }
  
  /* バッジ */
  .badge {
    font-size: var(--font-size-xs);
    padding: 0.25rem 0.625rem;
    white-space: normal;
    word-wrap: break-word;
  }
  
  /* サブナビゲーション */
  .sub-nav {
    flex-direction: column;
    align-items: stretch;
    gap: var(--spacing-sm);
    width: 100%;
    box-sizing: border-box;
  }
  
  .sub-btn {
    width: 100%;
    text-align: center;
    justify-content: center;
    box-sizing: border-box;
  }
  
  /* ラベルとフォーム要素の重なり防止 */
  .form-group {
    margin-bottom: var(--spacing-md);
    width: 100%;
    box-sizing: border-box;
  }
  
  .form-label {
    display: block;
    margin-bottom: var(--spacing-sm);
    word-wrap: break-word;
    overflow-wrap: break-word;
  }
  
  /* 検索フォームなどの横並び要素を縦並びに */
  .search-row {
    flex-direction: column;
    width: 100%;
    gap: var(--spacing-sm);
  }
  
  .search-row input,
  .search-row select {
    width: 100%;
    box-sizing: border-box;
  }
  
  /* ページヘッダー内の要素を縦並びに */
  .page-head,
  .admin-head {
    flex-direction: column;
    align-items: stretch !important;
    gap: var(--spacing-md);
  }
  
  /* 画像グリッドを1列に */
  .img-grid {
    grid-template-columns: 1fr !important;
    gap: var(--spacing-md);
  }
  
  /* 選択肢グリッドを1列に */
  .choice-grid {
    grid-template-columns: 1fr !important;
    gap: var(--spacing-sm);
  }
  
  /* すべての表示要素のレスポンシブ対応 */
  .card,
  .card-modern,
  .box,
  div[class*="card"],
  div[class*="box"] {
    width: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
  }
  
  /* リスト表示 */
  ul,
  ol,
  .list,
  .list-item {
    width: 100%;
    box-sizing: border-box;
    word-wrap: break-word;
  }
  
  /* 画像 */
  img {
    max-width:none;
    height: auto;
    box-sizing: border-box;
  }
  
  /* インライン要素の折り返し */
  span,
  .badge,
  .tag {
    word-wrap: break-word;
    overflow-wrap: break-word;
    display: inline-block;
    max-width:none;
  }
  
  /* フレックスコンテナ */
  .flex-row {
    flex-direction: column;
    width: 100%;
  }
  
  /* グリッドコンテナ */
  [class*="grid"] {
    grid-template-columns: 1fr !important;
    width: 100%;
    box-sizing: border-box;
  }
}

/* PC版（769px以上） - ボタンとテーブルの適切な表示 */
@media (min-width: 769px) {
  /* ボタン - PC版では適切なサイズに */
  .btn,
  button:not(.hamburger-btn),
  input[type="button"],
  input[type="submit"] {
    width: auto;
    min-width: 120px;
    max-width:none;
    padding: var(--btn-padding-md-y) var(--btn-padding-md-x);
    border-radius: var(--radius-full);
  }
  
  .btn-container .btn,
  .btn-container button,
  .btn-group .btn {
    width: auto;
    min-width: 120px;
  }
  
  .btn-sm {
    padding: var(--btn-padding-sm-y) var(--btn-padding-sm-x);
    border-radius: var(--radius-full);
  }
  
  .btn-lg {
    padding: var(--btn-padding-lg-y) var(--btn-padding-lg-x);
    border-radius: var(--radius-full);
  }
  
  /* テーブル - PC版では通常表示 */
  table,
  .table-modern {
    display: table;
    width: 100%;
    min-width: auto;
    font-size: var(--font-size-sm);
    border-collapse: collapse;
  }
  
  table thead,
  table tbody,
  table tr,
  .table-modern thead,
  .table-modern tbody,
  .table-modern tr {
    display: table-row;
    width: 100%;
  }
  
  table th,
  table td,
  .table-modern th,
  .table-modern td {
    display: table-cell;
    padding: var(--spacing-sm) var(--spacing-md);
    line-height: 1.6;
    white-space: normal;
    vertical-align: middle;
  }
  
  /* テーブルラッパー - PC版では通常表示（横スクロール不要） */
  .table-wrapper,
  .table-wrap,
  .grades-table,
  .results-table,
  .class-table {
    overflow-x: visible;
  }
  
  .grades-table table,
  .grades-table .table-modern,
  .results-table table,
  .results-table .table-modern {
    min-width: auto;
  }
  
  .class-table table,
  .class-table .table-modern {
    min-width: auto;
  }
  
  /* ボタンコンテナ - PC版では横並び */
  .btn-container,
  .btn-group,
  .button-group {
    flex-direction: row;
    flex-wrap: wrap;
  }
  
  /* リンクボタン - PC版では通常サイズ */
  a[class*="link"],
  .link-detail,
  .link-edit,
  .link-delete {
    width: auto;
    min-width: auto;
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--radius-full);
  }
}

/* タブレット（769px - 1024px） */
@media (min-width: 769px) and (max-width:none
  .card-modern {
    padding: var(--spacing-xl) var(--spacing-lg);
  }
  
  .grid-3 {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* 小さいスマホ（480px以下） */
@media (max-width:none
  /* さらに小さなパディング */
  main {
    padding: var(--spacing-md) var(--spacing-sm) var(--spacing-lg);
  }
  
  .card-modern {
    padding: var(--spacing-md) var(--spacing-sm);
    border-radius: var(--radius-lg);
  }
  
  h1, .h1, .page-title {
    font-size: var(--font-size-xl);
  }
  
  h2, .h2, .section-title {
    font-size: var(--font-size-lg);
  }
  
  .btn {
    font-size: var(--font-size-sm);
    padding: var(--spacing-sm) var(--spacing-md);
  }
  
  /* トップバー */
  .topbar {
    padding: 0 var(--spacing-sm);
  }
  
  .topbar-title {
    font-size: var(--font-size-sm);
  }
}

/* 横画面（ランドスケープ） */
@media (max-width:none
  .card-modern {
    padding: var(--spacing-md) var(--spacing-lg);
  }
  
  h1, .h1, .page-title {
    font-size: var(--font-size-xl);
    margin-bottom: var(--spacing-sm);
  }
}

/* タッチデバイス用の最適化 */
@media (hover: none) and (pointer: coarse) {
  /* タッチデバイスではホバー効果を無効化 */
  .btn:hover,
  .card-modern:hover,
  .list-item:hover {
    transform: none;
  }
  
  /* タッチターゲットを大きく */
  a, button, input, select, textarea {
    min-height: 44px;
    min-width: 44px;
  }
}

/* PC用ヘッダー調整（769px以上） */
@media (min-width: 769px) {
  .topbar {
    height: 56px;
    min-height: 56px;
    max-height: 56px;
    padding: 0 24px;           /* 左右に少し余白 */
    gap: 16px;
  }

  .topbar-left {
    gap: 10px;
  }

  .hamburger-btn {
    width: 26px;
    height: 22px;
  }

  .hamburger-btn span {
    height: 2px;
  }

  .topbar-title {
    font-size: 1rem;          /* PCでは少し大きめに */
    line-height: 1.4;
  }

  .topbar-right .pill-btn {
    font-size: 0.8rem;
    padding: 4px 12px 5px;
  }
}