/* =============================================================
   外注施工管理システム 共通スタイル（本実装）
   ベース: 承認済みモック（Apple HIG基調）
   強化: 文字コントラスト・可読性（DEVELOPMENT_RULES.md §10.1）
   - 補足文字は #3C3C43 系の高コントラスト
   - 注釈 12px以上 / 本文 15px以上 / タップターゲット 44px以上
   ============================================================= */

:root {
  --bg: #F2F2F7;
  --card: #FFFFFF;
  --text-primary: #111113;
  --text-secondary: #3C3C43;   /* 補足・注釈（高コントラスト） */
  --text-tertiary: #55555E;    /* ラベル最小 */
  --blue: #0A66D0;             /* AA準拠の濃いブルー */
  --blue-bg: #E8F0FE;
  --green: #1E8E3E;
  --green-bg: #E6F4EA;
  --yellow: #B26A00;
  --yellow-bg: #FEF3D9;
  --purple: #6D28D9;
  --purple-bg: #F0E9FE;
  --red: #C5221F;
  --red-bg: #FCE8E6;
  --gray-badge: #55555E;
  --gray-bg: #ECECF1;
  --border: rgba(0, 0, 0, 0.10);
}

* { -webkit-tap-highlight-color: transparent; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
  -webkit-font-smoothing: antialiased;
  background: var(--bg);
  color: var(--text-primary);
  font-size: 15px;
  line-height: 1.6;
}

/* マイクロインタラクション（モック準拠） */
.tap { transition: transform .15s cubic-bezier(.2,.8,.2,1), opacity .15s, box-shadow .15s; cursor: pointer; }
.tap:active { transform: scale(.97); opacity: .9; }
.tap:hover { box-shadow: 0 4px 16px rgba(0,0,0,.08); }

/* カード */
.card { background: var(--card); border-radius: 1rem; box-shadow: 0 1px 3px rgba(0,0,0,.06); }

/* テキスト階層（コントラスト強化） */
.t-title { font-size: 22px; font-weight: 700; letter-spacing: -0.01em; color: var(--text-primary); }
.t-section { font-size: 17px; font-weight: 700; color: var(--text-primary); }
.t-body { font-size: 15px; color: var(--text-primary); }
.t-sub { font-size: 13px; color: var(--text-secondary); }        /* 補足 */
.t-note { font-size: 12px; color: var(--text-secondary); }       /* 注釈: 12px以上・高コントラスト */
.t-label { font-size: 13px; font-weight: 600; color: var(--text-tertiary); display: block; margin-bottom: 6px; }

/* 入力（16pxでiOSズーム防止・44px以上） */
.input {
  width: 100%; min-height: 48px;
  border: 1.5px solid var(--border); border-radius: 0.75rem;
  background: #F7F7FA; padding: 12px 14px;
  font-size: 16px; font-weight: 500; color: var(--text-primary);
  outline: none; transition: border-color .15s, background .15s, box-shadow .15s;
}
.input::placeholder { color: #6E6E78; font-weight: 400; }
.input:focus { border-color: var(--blue); background: #fff; box-shadow: 0 0 0 3px rgba(10,102,208,.15); }
.input:disabled { opacity: .6; }
select.input { appearance: none; }

/* ボタン（44px以上） */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 20px; border-radius: 0.875rem;
  font-size: 16px; font-weight: 700; border: none; cursor: pointer;
  transition: transform .15s cubic-bezier(.2,.8,.2,1), opacity .15s, box-shadow .15s;
}
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.btn-primary { background: var(--blue); color: #fff; box-shadow: 0 4px 14px rgba(10,102,208,.35); }
.btn-primary:hover:not(:disabled) { box-shadow: 0 6px 20px rgba(10,102,208,.45); }
.btn-secondary { background: #fff; color: var(--text-primary); border: 1.5px solid var(--border); }
.btn-danger { background: var(--red); color: #fff; }
.btn-ghost { background: transparent; color: var(--blue); }
.btn-sm { min-height: 40px; padding: 0 14px; font-size: 14px; border-radius: 0.75rem; }

/* バッジ・ステータス（濃色でコントラスト確保） */
.badge { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px; }
.badge-blue { background: var(--blue-bg); color: var(--blue); }
.badge-green { background: var(--green-bg); color: var(--green); }
.badge-yellow { background: var(--yellow-bg); color: var(--yellow); }
.badge-purple { background: var(--purple-bg); color: var(--purple); }
.badge-red { background: var(--red-bg); color: var(--red); }
.badge-gray { background: var(--gray-bg); color: var(--gray-badge); }

/* 通知バッジ */
.notif-badge {
  min-width: 22px; height: 22px; padding: 0 6px;
  background: var(--red); color: #fff;
  font-size: 12px; font-weight: 700; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
}

/* ヘッダー（すりガラス・モック準拠） */
.glass-header { background: rgba(255,255,255,.88); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 20; }

/* トースト */
.toast {
  position: fixed; left: 50%; bottom: 32px; transform: translateX(-50%) translateY(20px);
  background: rgba(17,17,19,.92); color: #fff; font-size: 14px; font-weight: 600;
  padding: 12px 22px; border-radius: 999px; opacity: 0; pointer-events: none;
  transition: opacity .25s, transform .25s; z-index: 100; max-width: 90vw; text-align: center;
  backdrop-filter: blur(8px);
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast.error { background: rgba(197,34,31,.95); }

/* ステップインジケータ */
.step-dot { width: 34px; height: 34px; border-radius: 999px; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; flex-shrink: 0; }
.step-done { background: var(--green); color: #fff; }
.step-active { background: var(--blue); color: #fff; box-shadow: 0 4px 12px rgba(10,102,208,.4); }
.step-pending { background: #fff; border: 1.5px solid #C7C7CE; color: var(--text-tertiary); }

/* ローディングスピナー */
.spinner { width: 20px; height: 20px; border: 2.5px solid rgba(255,255,255,.35); border-top-color: #fff; border-radius: 50%; animation: spin .7s linear infinite; }
.spinner-dark { border-color: rgba(0,0,0,.15); border-top-color: var(--blue); }
@keyframes spin { to { transform: rotate(360deg); } }

/* フェードイン */
.fade-in { animation: fadeIn .3s ease-out; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* テーブル（PC） */
.table-row { border-bottom: 1px solid var(--border); }
.table-row:hover { background: #FAFAFC; }
.th { font-size: 13px; font-weight: 700; color: var(--text-tertiary); text-align: left; padding: 12px 16px; }
.td { font-size: 14px; color: var(--text-primary); padding: 14px 16px; }