/* スマホ・タブレット対応（幅 768px 以下）
   ─────────────────────────────────────────────────────────────
   PC の表示は変えない。この下の規則は @media (max-width: 768px) の中だけで効く
   （メニューボタン等、スマホ専用の部品を PC で隠す規則を除く）。
   計算・保存・帳票の処理には関与しない（見た目と操作性のみ）。
   audit-test-2.0-docker（2.1・4段階評価）と audit-test3（2.0.2・評価点方式）で
   同じファイルを使う。片方を直したらもう片方にも同じ内容を反映すること。 */

/* スマホ専用の部品は PC では表示しない */
.navtoggle, .quicklink, #sum_short, .draft-banner[hidden] { display: none; }

/* 入力途中の自動退避（この端末内）の復元案内。PC・スマホ共通で表示する */
.draft-banner {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  background: #fff8e1; border: 1px solid #e3c778; color: #7a4a00;
  border-radius: 4px; padding: 10px 12px; margin-bottom: 12px; font-size: 13px;
}
.draft-banner .msg { flex: 1 1 260px; }

@media (max-width: 768px) {
  body { font-size: 15px; }
  main { padding: 12px 10px 24px; }
  h1 { font-size: 18px; }
  .panel { padding: 12px 12px; overflow-x: auto; }   /* 表のはみ出しは枠内スクロールに留める */

  /* iPhone は 16px 未満の入力欄にフォーカスすると画面を拡大するため 16px にそろえる */
  input[type=text], input[type=number], input[type=date], input[type=search],
  input[type=password], select, textarea { font-size: 16px; }

  /* ── ヘッダ：1行に収め、メニューは ☰ で開閉 ───────────── */
  .topbar { padding: 8px 10px; gap: 8px; }
  .topbar .brand { flex: 1; min-width: 0; }
  .topbar .brand a { font-size: 16px; white-space: nowrap; }
  .topbar .ver { display: none; }
  .yearform label { display: none; }
  .yearform select { font-size: 15px; padding: 4px; }
  .navtoggle, .quicklink {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 40px; border-radius: 4px; font-family: inherit; cursor: pointer;
  }
  .navtoggle {
    width: 44px; font-size: 22px; line-height: 1; padding: 0;
    background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.5);
  }
  .quicklink {
    padding: 0 10px; font-size: 13px; color: var(--accent); background: #fff;
    text-decoration: none; font-weight: bold; white-space: nowrap;
  }
  .mainnav { display: none; padding: 0; }
  .mainnav.open { display: block; }
  .mainnav a, .navlogout button {
    display: block; width: 100%; text-align: left;
    padding: 13px 16px; font-size: 15px; border-top: 1px solid #34588a;
  }
  .navlogout { margin: 0; display: block; }

  .foot { flex-direction: column; gap: 4px; padding: 10px; }

  /* ── 一覧の表 → カード（table.cardable。見出しは mobile.js が data-label に写す） ── */
  table.cardable, table.cardable tbody, table.cardable tr, table.cardable td {
    display: block; width: 100%;
  }
  table.cardable tr.hrow { display: none; }
  table.cardable thead { display: none; }
  table.cardable tr {
    border: 1px solid var(--line); border-radius: 6px; background: #fff;
    margin-bottom: 10px; padding: 6px 10px;
  }
  table.cardable tr:nth-child(even) td { background: transparent; }
  table.cardable td {
    border: none; padding: 4px 0; display: flex; gap: 10px;
    justify-content: space-between; align-items: baseline; text-align: right;
  }
  table.cardable td.num, table.cardable td.center { text-align: right; }
  table.cardable td::before {
    content: attr(data-label); flex: 0 0 auto; max-width: 45%;
    color: var(--fg-sub); font-size: 12px; text-align: left; font-weight: normal;
  }
  table.cardable td:not([data-label])::before, table.cardable td[data-label=""]::before { content: none; }
  table.cardable td[colspan] { display: block; text-align: left; }
  table.cardable td .btn { padding: 9px 14px; font-size: 14px; }
  table.cardable tr.section td { display: block; text-align: left; font-weight: bold; }

  /* ── 回答入力：確認項目ごとのカード ─────────────────────── */
  .qtable.answer, .qtable.answer tbody { display: block; }
  .qtable.answer tr.hrow { display: none; }
  .qtable.answer tr.section, .qtable.answer tr.section td { display: block; }
  .qtable.answer tr.section td { border: none; background: transparent; padding: 10px 2px 4px; }
  .qtable.answer tr.qrow {
    display: grid; grid-template-columns: auto 1fr auto; gap: 6px 8px;
    grid-template-areas:
      "no risk guide"
      "name name name"
      "eval eval eval"
      "na pt pt"
      "rem rem rem";
    border: 1px solid var(--line); border-radius: 8px; background: #fff;
    padding: 10px 12px; margin-bottom: 10px;
  }
  .qtable.answer tr.qrow td { border: none; padding: 0; background: transparent; }
  .qtable.answer td.c-no { grid-area: no; font-weight: bold; color: var(--accent); align-self: center; }
  .qtable.answer td.c-no::before { content: "No."; }
  .qtable.answer td.c-risk { grid-area: risk; align-self: center; }
  .qtable.answer td.c-guide { grid-area: guide; text-align: right; }
  .qtable.answer td.c-guide .btn { padding: 7px 12px; font-size: 13px; }
  .qtable.answer td.c-name { grid-area: name; }
  .qtable.answer td.c-name .qname { font-size: 15px; }
  .qtable.answer td.c-eval { grid-area: eval; }
  .qtable.answer td.c-na { grid-area: na; text-align: left; align-self: center; }
  .qtable.answer td.c-na::after { content: " 非該当"; font-size: 14px; }
  .qtable.answer td.c-na:not(:has(input))::after { content: none; }   /* 対象外の項目 */
  .qtable.answer td.c-na input { width: 22px; height: 22px; vertical-align: middle; }
  .qtable.answer td.c-pt { grid-area: pt; align-self: center; }
  .qtable.answer td.c-pt::before { content: "項目得点 "; color: var(--fg-sub); font-weight: normal; font-size: 12px; }
  .qtable.answer td.c-rem { grid-area: rem; }
  .qtable.answer td.c-rem input.rem { width: 100%; padding: 9px 10px; }
  .qtable.answer tr.qrow.need-remarks { border: 2px solid var(--err); }
  .qtable.answer tr.na-on { background: #f4f4f4; }

  /* ランク選択（2.1）：指で押しやすい大きさに */
  .rankpick { gap: 6px; }
  .rankpick label.rk { flex: 1 1 0; }
  .rankpick label.rk span { display: block; min-width: 0; padding: 11px 0; font-size: 17px; }
  .rankpick .rk-clear { flex: 0 0 auto; padding: 10px 10px; font-size: 13px; margin-left: 0; }
  /* 評価点入力（2.0.2） */
  .qtable.answer input.imp { width: 100%; max-width: 160px; padding: 9px 10px; font-size: 18px; }

  /* 下部の集計バー：要点だけ1行＋ボタン */
  .summary-bar { padding: 6px 8px; gap: 6px; font-size: 13px; }
  .summary-bar #sum_main { display: none; }
  .summary-bar #sum_short { display: block; width: 100%; }
  .summary-bar .spacer { display: none; }
  .summary-bar .btn { flex: 1 1 0; padding: 11px 6px; font-size: 14px; }

  /* ── 見どころ：全画面表示 ─────────────────────────────── */
  .modal-back.show { align-items: stretch; }
  .modal {
    width: 100%; max-width: none; max-height: none; height: 100%;
    border-radius: 0; padding: 0 12px 0;
  }
  .modal h3 { position: sticky; top: 0; background: #fff; padding: 12px 0 8px; z-index: 1; }
  .modal > p:last-child {
    position: sticky; bottom: 0; background: #fff; margin: 0;
    padding: 8px 0 12px; border-top: 1px solid var(--line);
  }
  .modal > p:last-child .btn { width: 100%; padding: 12px; font-size: 15px; }
  .g-anchor td.band, .g-anchor td.blabel { white-space: normal; }

  /* ── ダッシュボード ───────────────────────────────────── */
  .grid4 { grid-template-columns: 1fr 1fr; gap: 8px; }
  .grid2 { grid-template-columns: 1fr; }
  .stat .value { font-size: 22px; }

  /* ── 各種フォーム・ツールバー ─────────────────────────── */
  .toolbar { gap: 6px; }
  .toolbar input[type=text], .toolbar input[type=search] { flex: 1 1 100%; }
  .btn { padding: 9px 14px; font-size: 14px; }
  .infogrid { grid-template-columns: 1fr; }
  .codesearch input[type=text] { font-size: 18px; }

  .login-card { margin: 4vh 12px; padding: 32px 22px 26px; }
}

@media (max-width: 768px) {
  /* 確認書の監査結果（見出し・値が交互に並ぶ表）：見出しと値の2列に組み直す */
  table.kv, table.kv tbody { display: block; max-width: none !important; }
  table.kv tr { display: grid; grid-template-columns: 38% 62%; }
  table.kv th, table.kv td { display: block; }
  table.kv td[colspan] { grid-column: 2; }
  /* 列が潰れる広い表（mobile.js が判定）は、枠内で横スクロールさせる */
  table.hscroll { min-width: 680px; }
}