/* ============================================================ 現場NOTE — デザイントークン（共通 CSS 変数） 全 HTML ファイルの に で読み込む ============================================================ */ :root { /* ── フォント ── */ --font: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans JP", "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif; --fz: 13px; --fz-sm: 11px; --fz-xs: 10px; /* ── テキスト ── */ --ink: #111827; --ink2: #374151; --muted: #6b7280; --faint: #9ca3af; /* ── 背景 ── */ --bg: #f8fafc; --bg-card: #ffffff; --bg-head: #f3f4f6; /* ── 枠線 ── */ --line: #e5e7eb; --line-strong: #9ca3af; /* ── 角丸 ── */ --radius-sm: 4px; --radius: 6px; --radius-lg: 8px; --radius-xl: 10px; /* ── アクセント ── */ --green: #059669; --green-lt: #ecfdf5; --green-bd: #a7f3d0; /* ── ステータスカラー ── */ --ok-bg: #ecfdf5; --ok-bd: #a7f3d0; --ok-ink: #166534; --warn-bg: #fffbeb; --warn-bd: #fde68a; --warn-ink: #b45309; --ng-bg: #fef2f2; --ng-bd: #fecaca; --ng-ink: #dc2626; --info-bg: #f0f9ff; --info-bd: #bae6fd; --info-ink: #0369a1; /* ── 工事種別カラー ── */ --kind-31: #2563eb; --kind-32: #7c3aed; --kind-33: #0891b2; --kind-34: #d97706; --kind-35: #dc2626; --kind-36: #059669; /* ── ボタン ── */ --btn-pad: 5px 12px; --btn-fz: 12px; /* ── 印刷 ── */ --print-line: #9c9c9c; /* ── 子画面（日報・進捗・出面など）の最大幅 ── */ --content-max-w: 960px; } /* ============================================================ 共通リセット ============================================================ */ *, *::before, *::after { box-sizing: border-box; } body { margin: 0; font-family: var(--font); font-size: var(--fz); color: var(--ink); background: var(--bg); } /* ============================================================ 共通ボタン ============================================================ */ .btn { display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--line-strong); background: var(--bg-card); padding: var(--btn-pad); border-radius: var(--radius); font-size: var(--btn-fz); font-family: var(--font); cursor: pointer; white-space: nowrap; } .btn:hover { background: var(--bg-head); } .btn.primary { background: var(--ink); color: #fff; border-color: var(--ink); } .btn.primary:hover { background: var(--ink2); } .btn.green { background: var(--green); color: #fff; border-color: var(--green); } /* ============================================================ 共通フォームコントロール ============================================================ */ input[type="text"], input[type="tel"], input[type="number"], input[type="date"], select, textarea { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 4px 6px; font-size: var(--fz-sm); font-family: var(--font); background: var(--bg-card); color: var(--ink); width: 100%; } textarea { resize: vertical; min-height: 2.4em; } input::placeholder, textarea::placeholder { color: var(--faint); } /* ============================================================ カード ============================================================ */ .card { background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 10px 12px; } /* ============================================================ ステータスバッジ ============================================================ */ .badge-ok { background: var(--ok-bg); border: 1px solid var(--ok-bd); color: var(--ok-ink); border-radius: 999px; padding: 4px 14px; font-size: var(--fz-sm); line-height: 1.35; } .badge-warn { background: var(--warn-bg); border: 1px solid var(--warn-bd); color: var(--warn-ink); border-radius: 999px; padding: 4px 14px; font-size: var(--fz-sm); line-height: 1.35; } .badge-ng { background: var(--ng-bg); border: 1px solid var(--ng-bd); color: var(--ng-ink); border-radius: 999px; padding: 4px 14px; font-size: var(--fz-sm); line-height: 1.35; } /* ============================================================ 品質管理シート：行ハイライト ============================================================ */ tr.row-ng td { background: var(--ng-bg); } tr.row-warn td { background: var(--warn-bg); } /* ============================================================ モバイルヘッダー ============================================================ */ .mobile-header { position: sticky; top: 0; z-index: 100; background: var(--bg-card); border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 8px; padding: 8px 12px; } .mobile-header .brand { font-weight: 700; font-size: 15px; color: var(--ink); } /* ============================================================ ツールバー ============================================================ */ .toolbar { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; padding: 6px 10px; background: var(--bg-card); border-bottom: 1px solid var(--line); } /* ============================================================ セクション見出し ============================================================ */ .sect-head { border-left: 4px solid var(--green); padding-left: 8px; font-weight: 700; } /* ============================================================ 印刷共通 ============================================================ */ @media print { @page { size: A4 portrait; margin: 12mm 14mm; } body { background: #fff !important; } .toolbar, .btn, [data-noprint] { display: none !important; } -webkit-print-color-adjust: exact; print-color-adjust: exact; }