/* ============================================================
   NAC通信 配信ダッシュボード — スタイル
   実装指示書 §17（デザイントークン・確定 2026-08-08）の転記。勝手に変えない。
   §17.3「色に頼らない区別」は装飾ではなく安全機構。省略しない。
   ============================================================ */

/* ── §17.1 色 ─────────────────────────────────────── */
:root {
  --c-primary:        #0D336D;   /* 主色（ネイビー）: ヘッダー・リンク・取り消せる操作の主ボタン */
  --c-primary-hover:  #08214A;
  --c-primary-pale:   #E8EDF7;   /* 情報バー・テスト送信エリアの下地 */
  --c-primary-border: #D0D8EE;
  --c-stripe-alt:     #DFE6F3;   /* テスト送信エリアの斜めストライプ副色 */
  --c-mid-blue:       #7597B9;   /* プログレスバーの軌道。文字色に使わない（3.05:1） */
  --c-bg:             #F2F5F7;   /* ページの下地 */
  --c-card:           #FFFFFF;
  --c-card-border:    #E2E7EC;
  --c-text:           #121212;   /* 本文の文字 */
  --c-text-sub:       #4A5568;   /* 説明文・ラベル・最終更新日時 */
  --c-deco:           #999C9F;   /* 区切り記号と無効ボタンのラベルだけ。読ませる文字に使わない */
  --c-danger:         #A32B22;   /* 危険（不可逆）: 本配信ボタン・エラー。白文字 7.18:1 */
  --c-danger-hover:   #7E1F18;
  --c-danger-pale:    #FBEEEC;
  --c-danger-border:  #EBC9C4;
  --c-warn:           #8A5A00;   /* 警告 */
  --c-warn-pale:      #FCF4E4;
  --c-warn-border:    #E8D5A8;
  --c-ok:             #1E6B45;   /* 完了 */
  --c-ok-pale:        #E9F2EC;
  --c-ok-border:      #C2DBCC;
  --c-idle:           #4A5568;   /* 未配信 */
  --c-idle-pale:      #EEF1F4;
  --c-cancel-pale:    #F2F5F7;   /* 取消済み（破線 #A0A6AC＋打ち消し線） */
  --c-cancel-border:  #A0A6AC;
  --c-input-border:   #C8CFD6;   /* フォーカス時はネイビー枠＋2px アウトライン */
  --c-disabled-bg:    #EEF1F4;
  --c-disabled-border:#D8DEE4;
  --radius: 4px;                 /* 角丸 */
}

/* ── §17.2 文字 ────────────────────────────────────── */
* { box-sizing: border-box; margin: 0; padding: 0; }

html {
  /* Web フォントは読み込まない */
  font-family: 'Helvetica Neue', Arial, 'Hiragino Sans',
               'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
}

body {
  background: var(--c-bg);
  color: var(--c-text);
  font-size: 14px;            /* 本文 PC 14px / 400 / 1.8 */
  font-weight: 400;
  line-height: 1.8;
}

h1 { font-size: 32px; font-weight: 600; line-height: 1.35; margin-bottom: 16px; }
h2 { font-size: 18px; font-weight: 600; line-height: 1.5; margin-bottom: 16px; }

.note, .meta-line { font-size: 13px; line-height: 1.75; color: var(--c-text-sub); }
.page-sub { color: var(--c-text-sub); margin-bottom: 32px; }

.num {
  font-size: 28px; font-weight: 600;
  font-variant-numeric: tabular-nums;   /* 数値（件数） */
}

a { color: var(--c-primary); }

/* ── §17.4 レイアウト・余白（4px の倍数のみ）───────────── */
.container {
  max-width: 1120px;          /* PC: コンテンツ最大幅 1120px・中央寄せ */
  margin: 0 auto;
  padding: 24px;              /* 左右余白 24px */
}

.card {
  background: var(--c-card);
  border: 1px solid var(--c-card-border);
  border-radius: var(--radius);
  padding: 24px;              /* カード内側 PC 24px */
  margin-bottom: 24px;        /* カード同士 24px */
}

section + .danger-divider { margin-top: 32px; }   /* セクションの間 32px */

/* ── ヘッダー（§5.1: ログイン中とログアウトを常に表示）──── */
.site-header { background: var(--c-primary); color: #fff; }
.site-header-inner {
  max-width: 1120px; margin: 0 auto; padding: 12px 24px;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  flex-wrap: wrap;
}
.site-title { font-weight: 600; }
.site-user { font-size: 13px; }
.logout-link { color: #fff; margin-left: 8px; }

/* ── 件数バー（§17.4: 上部 sticky・高さ 48px・常時表示）──── */
.count-bar {
  position: sticky; top: 0; z-index: 10;
  min-height: 48px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  background: var(--c-primary-pale);
  border: 1px solid var(--c-primary-border);
  border-radius: var(--radius);
  padding: 4px 16px;
  margin-bottom: 24px;
}
.count-bar .num { font-size: 20px; }

/* ── ボタン（§17.2/17.3）────────────────────────────── */
.btn {
  display: inline-block;
  font-size: 16px;            /* ボタン内文字 16px */
  font-family: inherit;
  min-height: 48px;           /* タップ領域 通常 48px */
  padding: 8px 24px;
  border-radius: var(--radius);
  border: 1px solid transparent;
  cursor: pointer;
  line-height: 1.5;
}

/* ベタ塗り＝押せるものだけ（§17.3） */
.btn-primary { background: var(--c-primary); color: #fff; }
.btn-primary:hover { background: var(--c-primary-hover); }

/* 危険ボタン: ベタ塗り＋幅いっぱい＋他より大きい（§17.3）。
   上の余白は §17.5 の実測値（PC 76px）以上を確保（最低 48px・§17.4） */
.btn-danger {
  background: var(--c-danger); color: #fff;
  width: 100%;
  min-height: 56px;           /* タップ領域 危険 56px */
  font-weight: 600;
  margin-top: 76px;
}
.btn-danger:hover { background: var(--c-danger-hover); }

/* 無効: 淡いグレーの塗り＋枠線と文字色も落とす（§17.1/17.3） */
.btn:disabled,
.btn[disabled] {
  background: var(--c-disabled-bg);
  border-color: var(--c-disabled-border);
  color: var(--c-deco);
  cursor: not-allowed;
}

/* ── 入力欄（§17.1/17.2）──────────────────────────── */
.field-label { display: block; font-weight: 600; margin-bottom: 8px; }
.text-input {
  font-size: 16px;            /* 16px 未満にしない（iOS 自動ズーム対策） */
  font-family: inherit;
  padding: 12px;
  min-height: 48px;
  border: 1px solid var(--c-input-border);
  border-radius: var(--radius);
  width: 100%;
  max-width: 320px;
}
.text-input:focus {
  border-color: var(--c-primary);
  outline: 2px solid var(--c-primary);
  outline-offset: 1px;
}
/* 危険操作の確認入力だけ枠を赤に（§17.1。/contacts の物理削除で使用） */
.text-input.input-danger { border-color: var(--c-danger); }
.text-input.input-danger:focus { outline-color: var(--c-danger); }

/* ── 通知ボックス（§17.3: 記号＋枠線種で色に頼らず区別）──── */
.box {
  display: flex; gap: 8px; align-items: flex-start;
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 16px;
}
.box p { margin: 0; }
.box p + p { margin-top: 4px; }

.box-info  { background: var(--c-primary-pale); border: 1px solid var(--c-primary-border); }
.box-ok    { background: var(--c-ok-pale);      border: 1px solid var(--c-ok-border); }      /* 実線 */
.box-error { background: var(--c-danger-pale);  border: 1px solid var(--c-danger-border); }  /* 実線 */
.box-warn  { background: var(--c-warn-pale);    border: 1px dashed var(--c-warn-border); }   /* 破線 */

/* ── 記号（§17.3: 画像・アイコンフォント不使用）──────────
   一致       = 塗りつぶしの円に ✓（緑）
   エラー     = 塗りつぶしの円に ×（赤）
   警告       = 輪郭だけの三角に ！（琥珀）— border の重ね合わせで作る */
.mark { flex: 0 0 auto; }

.mark-ok, .mark-ng {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px;
  border-radius: 50%;
  color: #fff; font-weight: 700; font-size: 14px; line-height: 1;
  margin-top: 2px;
}
.mark-ok { background: var(--c-ok); }
.mark-ng { background: var(--c-danger); }

.mark-warn {
  position: relative;
  display: inline-block;
  width: 26px; height: 23px;
  margin-top: 2px;
}
.mark-warn::before {           /* 外側の三角（琥珀） */
  content: '';
  position: absolute; left: 0; top: 0;
  border-left: 13px solid transparent;
  border-right: 13px solid transparent;
  border-bottom: 23px solid var(--c-warn);
}
.mark-warn::after {            /* 内側の三角（下地色）→ 輪郭だけに見える */
  content: '';
  position: absolute; left: 4px; top: 7px;
  border-left: 9px solid transparent;
  border-right: 9px solid transparent;
  border-bottom: 15.5px solid var(--c-warn-pale);
}
.mark-warn b {                 /* ！ */
  position: absolute; left: 0; right: 0; top: 7px; z-index: 1;
  text-align: center;
  font-size: 11px; font-weight: 700; line-height: 1;
  color: var(--c-warn);
}

/* ── バッジ（§17.3: 塗らない。常に淡色面＋枠線）─────────── */
.badge {
  display: inline-block;
  font-size: 13px;
  padding: 4px 8px;
  border-radius: var(--radius);
  line-height: 1.5;
}
.badge-queued    { background: var(--c-idle-pale);    border: 1px solid var(--c-card-border);  color: var(--c-idle); }
.badge-waiting   { background: var(--c-primary-pale); border: 1px solid var(--c-primary-border); color: var(--c-primary); }
.badge-running   { background: var(--c-primary-pale); border: 2px solid var(--c-primary); color: var(--c-primary); } /* 枠線2px */
.badge-running::before { content: '▶ '; }                                                     /* 先頭に ▶ */
.badge-done      { background: var(--c-ok-pale);      border: 1px solid var(--c-ok-border);   color: var(--c-ok); }
.badge-failed    { background: var(--c-danger-pale);  border: 1px solid var(--c-danger-border); color: var(--c-danger); }
.badge-cancelled {                                                                              /* 破線枠＋打ち消し線 */
  background: var(--c-cancel-pale);
  border: 1px dashed var(--c-cancel-border);
  color: var(--c-text-sub);
  text-decoration: line-through;
}

/* ── 本文プレビュー（§5.3-1）──────────────────────── */
.preview-frame {
  width: 100%;
  height: 60vh;
  min-height: 320px;
  border: 1px solid var(--c-card-border);
  border-radius: var(--radius);
  background: #fff;
}
.meta-line { margin-bottom: 8px; }
.meta-line strong { color: var(--c-text); }

/* ── テスト送信エリア（§17.3: 斜めストライプ。削除禁止）────
   装飾ではない: 色覚特性・屋外低視認の利用者が本配信エリアと
   区別できる唯一の手がかり */
.test-area {
  background: repeating-linear-gradient(135deg, #E8EDF7 0 8px, #DFE6F3 8px 16px);
  border: 1px solid var(--c-primary-border);
}
.test-area form { margin-top: 16px; }

/* ── 危険区切り（§17.4: テスト送信と本配信を分離）───────── */
.danger-divider {
  display: flex; align-items: center; gap: 16px;
  color: var(--c-danger);
  font-weight: 600;
  margin: 32px 0;
}
.danger-divider::before,
.danger-divider::after {
  content: '';
  flex: 1;
  border-top: 2px solid var(--c-danger-border);
}

/* ── 確認コード（§5.3-4）─────────────────────────── */
.code-block { margin-bottom: 24px; }
.code-label { font-weight: 600; }
.code-display {
  font-size: 40px; font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 12px;
  padding: 8px 0;
  user-select: none;          /* コピペではなく打ち直させる（§5.3-4） */
}
.code-input { letter-spacing: 8px; font-variant-numeric: tabular-nums; }

/* ── チェック行（§17.5: label が行全体を包む＝タップ領域を広く）── */
.check-box { margin-top: 24px; }
.check-row {
  display: flex; gap: 8px; align-items: flex-start;
  cursor: pointer;
  width: 100%;
  min-height: 48px;
}
.check-row input[type='checkbox'] {
  width: 24px; height: 24px;
  margin-top: 2px;
  accent-color: var(--c-warn);
  flex: 0 0 auto;
}

/* ── 比較表（号数不一致で両方の値を並べる・§5.3-7）──────── */
.compare-table { border-collapse: collapse; margin-top: 8px; }
.compare-table th, .compare-table td {
  text-align: left;
  padding: 4px 16px 4px 0;
  font-size: 14px;
}
.compare-table th { color: var(--c-text-sub); font-weight: 400; white-space: nowrap; }

/* ── ボタン追加分 ─────────────────────────────────── */
/* 通常操作の線ボタン（ベタ塗りは主/危険ボタンだけ・§17.3） */
.btn-secondary {
  background: #fff;
  border: 1px solid var(--c-primary);
  color: var(--c-primary);
  text-decoration: none;
  text-align: center;
}
.btn-secondary:hover { background: var(--c-primary-pale); }
.btn-small { min-height: 40px; padding: 4px 16px; font-size: 14px; }
.btn-block { display: block; width: 100%; }
a.btn { text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }

/* ── プログレスバー（/status・§5.4）──────────────────
   軌道は中間ブルー #7597B9（§17.1。文字色には使わない）、進捗は主色 */
.progress-block { margin: 16px 0 24px; }
.progress-nums { margin-bottom: 8px; }
.progress-failed { margin-left: 16px; color: var(--c-text-sub); }
.progress-track {
  height: 12px;
  background: var(--c-mid-blue);
  border-radius: var(--radius);
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  background: var(--c-primary);
  transition: width 0.6s ease;
}
.countdown-line { font-size: 16px; margin-bottom: 8px; }
.hidden { display: none !important; }

/* ── 管制画面のカード（/・§5.2）──────────────────── */
.month-heading { margin: 32px 0 16px; }
.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.job-card { margin-bottom: 0; }
.job-card-title { font-size: 18px; font-weight: 600; margin-bottom: 8px; }
.job-card .btn { margin-top: 8px; }
.dash-links { margin-top: 32px; }

/* ── データテーブル（/history・/contacts）───────────── */
.table-scroll { overflow-x: auto; }
.data-table { border-collapse: collapse; width: 100%; }
.data-table th, .data-table td {
  text-align: left;
  padding: 8px;
  border-bottom: 1px solid var(--c-card-border);
  font-size: 14px;
  white-space: nowrap;
}
.data-table th { color: var(--c-text-sub); font-weight: 600; }
.td-num { text-align: right; font-variant-numeric: tabular-nums; }
.td-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* 論理削除された行: 打ち消し線＋淡色で残す（§5.6） */
.row-inactive td { color: var(--c-text-sub); opacity: 0.65; }
.row-inactive td:nth-child(-n+2) { text-decoration: line-through; }

.inline-form { display: inline; }
.link-button {
  background: none; border: none; padding: 0;
  color: var(--c-primary); text-decoration: underline;
  font-size: 14px; font-family: inherit; cursor: pointer;
}
.link-danger { color: var(--c-danger); font-size: 13px; }

/* ── 拠点担当者フォーム ───────────────────────────── */
.contact-form .form-row { margin-bottom: 16px; }
.contact-group h2 .group-count { font-size: 13px; font-weight: 400; color: var(--c-text-sub); }

/* ── ログイン ─────────────────────────────────────── */
.login-wrap { max-width: 480px; margin: 0 auto; }

/* ── プレースホルダのトークン表示 ───────────────────── */
.ph-token {
  display: inline-block;
  background: #fff;
  border: 1px solid var(--c-danger-border);
  border-radius: var(--radius);
  padding: 0 8px;
  font-size: 13px;
}

/* ── 開発用リンク集 ───────────────────────────────── */
.dev-links { padding-left: 24px; }
.dev-links li { margin-bottom: 8px; }

/* ── スクリーンリーダー用（記号の意味をテキストでも伝える）── */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ============================================================
   スマートフォン（§17.2/17.4: 375px 幅で操作できること）
   ============================================================ */
@media (max-width: 600px) {
  body { font-size: 16px; }             /* 本文 SP 16px */
  h1 { font-size: 24px; }               /* 見出し SP 24px */
  .note, .meta-line { font-size: 13px; }/* 注釈は 12px まで下げない */

  .container { padding: 16px; }         /* 左右余白 16px・1 カラム */
  .card { padding: 16px; margin-bottom: 24px; }   /* カード内側 SP 16px */

  /* 危険ボタンの上の余白 SP 実測 102px（§17.5）。
     テスト送信と本配信が同時に画面へ入らない距離（§17.4） */
  .btn-danger { margin-top: 102px; }

  .count-bar .num { font-size: 18px; }
  .code-display { font-size: 32px; letter-spacing: 8px; }

  /* 管制画面: 1 カラム（§17.4） */
  .card-grid { grid-template-columns: 1fr; gap: 16px; }
}