:root {
    --bg: #f5f6f8;
    --surface: #ffffff;
    --text: #1c1c1e;
    --text-sub: #6b7280;
    --border: #d9dde3;
    --primary: #1a73e8;
    --primary-text: #ffffff;
    --secondary: #eef1f5;
    --secondary-text: #1c1c1e;
    --danger: #d93025;
    --success: #1e8e3e;
  }
  html[data-theme="dark"] {
    --bg: #121212;
    --surface: #1e1e1e;
    --text: #f2f2f2;
    --text-sub: #a0a0a0;
    --border: #3a3a3a;
    --primary: #4d9dff;
    --primary-text: #0b0b0b;
    --secondary: #2a2a2a;
    --secondary-text: #f2f2f2;
    --danger: #ff6b6b;
    --success: #55c073;
  }
  @media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]) {
      --bg: #121212;
      --surface: #1e1e1e;
      --text: #f2f2f2;
      --text-sub: #a0a0a0;
      --border: #3a3a3a;
      --primary: #4d9dff;
      --primary-text: #0b0b0b;
      --secondary: #2a2a2a;
      --secondary-text: #f2f2f2;
      --danger: #ff6b6b;
      --success: #55c073;
    }
  }

  * { box-sizing: border-box; }
  html, body {
    margin: 0; padding: 0;
    background: var(--bg);
    color: var(--text);
    font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic", sans-serif;
    font-size: 16px;
    /* LINEアプリ内ブラウザは、ページ上端での引っ張り(オーバースクロール)を検知すると
       ブラウザ自体を丸いバブルに最小化するジェスチャーを発動する。overscroll-behaviorで
       引っ張り動作自体を無効化し、その発動条件を断つ。 */
    overscroll-behavior-y: none;
  }
  .hidden { display: none !important; }

  .app-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 16px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    position: sticky; top: 0; z-index: 10;
  }
  .app-title { font-weight: bold; font-size: 16px; }
  .icon-btn {
    border: none; background: transparent; font-size: 20px; cursor: pointer; padding: 4px 8px;
  }

  main { padding: 16px 16px 40px; max-width: 480px; margin: 0 auto; }

  .screen h2 { margin-top: 0; }
  .hint { color: var(--text-sub); font-size: 14px; }

  label { display: block; margin: 14px 0 4px; font-weight: 600; font-size: 14px; }
  input[type=text], input[type=tel], input[type=date], input[type=time], input[type=number],
  input[type=password], input[type=email],
  textarea, select {
    width: 100%;
    padding: 12px;
    font-size: 16px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    color: var(--text);
    margin-top: 4px;
  }
  input:disabled { color: var(--text-sub); background: var(--secondary); }
  textarea { resize: vertical; }

  .input-with-btn { display: flex; gap: 8px; align-items: stretch; }
  .input-with-btn input, .input-with-btn textarea { flex: 1; }

  .btn {
    display: block;
    width: 100%;
    min-height: 56px;
    font-size: 18px;
    font-weight: bold;
    border: none;
    border-radius: 12px;
    margin-top: 16px;
    cursor: pointer;
  }
  .btn-primary { background: var(--primary); color: var(--primary-text); }
  .btn-secondary { background: var(--secondary); color: var(--secondary-text); }
  .btn-large { font-size: 20px; }
  .btn-link {
    background: transparent; border: none; color: var(--primary);
    font-size: 15px; cursor: pointer; padding: 8px 0; display: block; text-align: center;
  }
  .btn-small {
    min-height: 44px; padding: 0 14px; border-radius: 8px; border: 1px solid var(--border);
    background: var(--secondary); color: var(--secondary-text); font-size: 15px; cursor: pointer;
  }
  .mic-btn {
    min-width: 48px; border-radius: 8px; border: 1px solid var(--border);
    background: var(--secondary); font-size: 20px; cursor: pointer;
  }
  .mic-btn.recording { background: var(--danger); color: #fff; }

  .step-header {
    display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px;
  }
  .step-dots { font-size: 13px; color: var(--text-sub); letter-spacing: 2px; }

  .user-info {
    text-align: center; color: var(--text-sub); margin-bottom: 24px; font-size: 14px;
  }

  .center-box { text-align: center; padding: 60px 20px; }
  .spinner {
    width: 40px; height: 40px; margin: 0 auto 16px;
    border: 4px solid var(--border); border-top-color: var(--primary);
    border-radius: 50%; animation: spin 0.8s linear infinite;
  }
  @keyframes spin { to { transform: rotate(360deg); } }

  .overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,0.55);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    z-index: 100; color: #fff;
  }
  .overlay .spinner { border-color: rgba(255,255,255,0.3); border-top-color: #fff; }
  .overlay-text { margin-top: 8px; }

  .photo-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 8px;
  }
  .photo-thumb {
    position: relative; aspect-ratio: 1/1; border-radius: 8px; overflow: hidden;
    border: 1px solid var(--border); background: var(--secondary);
  }
  .photo-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .photo-thumb .remove-btn {
    position: absolute; top: 2px; right: 2px; background: rgba(0,0,0,0.6); color: #fff;
    border: none; border-radius: 50%; width: 22px; height: 22px; font-size: 13px; cursor: pointer;
  }

  .signature-status {
    margin-top: 8px; padding: 10px 12px; border-radius: 8px; background: var(--secondary);
    color: var(--text-sub); font-size: 14px;
  }
  .signature-status.signed { color: var(--success); font-weight: bold; }

  /* サイン全画面オーバーレイ: スマホ画面いっぱいを使い、指を大きく動かしてサインできるようにする */
  .signature-overlay {
    position: fixed; inset: 0; z-index: 200;
    background: var(--bg);
    display: flex; flex-direction: column;
    overscroll-behavior: none;
    touch-action: none;
  }
  .signature-overlay-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 16px; font-weight: bold; background: var(--surface); border-bottom: 1px solid var(--border);
  }
  #signature-canvas {
    flex: 1; width: 100%; touch-action: none;
    background: #fff; display: block;
  }
  #btn-signature-done { margin: 12px 16px calc(12px + env(safe-area-inset-bottom)); }

  .search-filter-row { display: flex; gap: 8px; margin-top: 8px; }
  .search-filter-row select { margin-top: 0; }

  .parts-list-row {
    display: grid; grid-template-columns: 2fr 1fr 1fr auto; gap: 6px; align-items: center; margin-top: 8px;
  }
  .parts-list-row input { margin-top: 0; }
  .parts-total { text-align: right; margin-top: 12px; font-weight: bold; }

  .readonly-field { margin-top: 14px; color: var(--text-sub); font-size: 14px; }

  .confirm-row { padding: 8px 0; border-bottom: 1px solid var(--border); }
  .confirm-row .label { font-size: 12px; color: var(--text-sub); }
  .confirm-row .value { font-size: 15px; white-space: pre-wrap; }

  .done-check { font-size: 48px; }
  .done-receipt-no { font-weight: bold; font-size: 18px; }

  .search-result-list { margin-top: 16px; }
  .search-card {
    background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
    padding: 12px; margin-bottom: 10px; cursor: pointer;
  }
  .search-card .title { font-weight: bold; }
  .search-card .sub { color: var(--text-sub); font-size: 13px; }

  /* ===== ダッシュボード(ホーム画面) ===== */
  .dash-greeting { color: var(--text-sub); font-size: 14px; margin-bottom: 4px; }
  .dash-name { font-weight: bold; font-size: 18px; margin-bottom: 16px; }

  .clock-card {
    background: var(--surface); border: 1px solid var(--border); border-radius: 16px;
    padding: 20px; text-align: center; margin-bottom: 16px;
  }
  .clock-time { font-size: 40px; font-weight: 700; letter-spacing: 1px; font-variant-numeric: tabular-nums; }
  .clock-date { color: var(--text-sub); font-size: 13px; margin-top: 2px; }
  .status-badge {
    display: inline-block; margin-top: 10px; padding: 6px 16px; border-radius: 999px;
    font-weight: bold; font-size: 14px;
  }
  .status-badge.status-未出勤 { background: var(--secondary); color: var(--text-sub); }
  .status-badge.status-出勤中 { background: rgba(30,142,62,0.15); color: var(--success); }
  .status-badge.status-休憩中 { background: rgba(230,159,0,0.18); color: #b8860b; }
  .status-badge.status-退勤済 { background: rgba(107,114,128,0.18); color: var(--text-sub); }

  .clock-times-row {
    display: flex; justify-content: center; gap: 24px; margin-top: 12px; font-size: 13px; color: var(--text-sub);
  }
  .clock-times-row b { color: var(--text); font-size: 15px; display: block; }

  .punch-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }
  .punch-btn {
    min-height: 64px; border: none; border-radius: 14px; font-size: 17px; font-weight: bold; cursor: pointer;
    color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  }
  .punch-btn:disabled { opacity: 0.35; cursor: not-allowed; }
  .punch-btn.punch-in { background: var(--success); }
  .punch-btn.punch-out { background: var(--danger); }
  .punch-btn.punch-break { background: #e69f00; grid-column: span 2; }
  .punch-btn .punch-icon { font-size: 22px; }

  .gps-forced-note {
    margin-top: 14px; font-size: 12px; color: var(--text-sub); text-align: center;
  }
  .switch { position: relative; display: inline-block; width: 44px; height: 24px; flex-shrink: 0; }
  .switch input { opacity: 0; width: 0; height: 0; }
  .switch-track {
    position: absolute; inset: 0; background: var(--border); border-radius: 999px; cursor: pointer; transition: 0.15s;
  }
  .switch-track::before {
    content: ""; position: absolute; width: 18px; height: 18px; left: 3px; top: 3px;
    background: #fff; border-radius: 50%; transition: 0.15s;
  }
  .switch input:checked + .switch-track { background: var(--primary); }
  .switch input:checked + .switch-track::before { transform: translateX(20px); }

  .tile-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 4px;
  }
  .tile {
    background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
    padding: 14px; cursor: default;
  }
  .tile.tile-wide { grid-column: span 2; }
  .tile.tile-clickable { cursor: pointer; }
  .tile-label { font-size: 12px; color: var(--text-sub); display: flex; align-items: center; gap: 4px; }
  .tile-value { font-size: 22px; font-weight: bold; margin-top: 4px; }
  .tile-sub { font-size: 12px; color: var(--text-sub); margin-top: 2px; }
  .tile-badge {
    display: inline-block; margin-top: 6px; padding: 2px 8px; border-radius: 999px;
    background: var(--primary); color: var(--primary-text); font-size: 11px; font-weight: bold;
  }
  .tile-badge.zero { background: var(--secondary); color: var(--text-sub); }

  .site-list, .announce-list, .schedule-list { margin-top: 6px; }
  .site-row, .announce-row, .schedule-row {
    padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 13px;
  }
  .site-row:last-child, .announce-row:last-child, .schedule-row:last-child { border-bottom: none; }
  .site-row .name, .announce-row .title, .schedule-row .name { font-weight: bold; }
  .site-row .sub, .schedule-row .sub { color: var(--text-sub); font-size: 12px; }
  .announce-row .body { color: var(--text-sub); font-size: 12px; margin-top: 2px; white-space: pre-wrap; }
  .empty-note { color: var(--text-sub); font-size: 13px; padding: 6px 0; }

  .quick-links { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 16px 0; }
  .quick-link {
    position: relative;
    background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
    padding: 14px; text-align: center; font-weight: bold; cursor: pointer;
  }
  .quick-link .icon { font-size: 22px; display: block; margin-bottom: 4px; }
  .quick-link.disabled { opacity: 0.5; cursor: default; }
  .soon-badge {
    position: absolute; top: 6px; right: 6px; font-size: 10px; font-weight: bold;
    background: var(--secondary); color: var(--text-sub); padding: 1px 6px; border-radius: 999px;
  }

  .ai-result {
    margin-top: 16px; padding: 14px; border-radius: 10px; background: var(--surface);
    border: 1px solid var(--border); white-space: pre-wrap; font-size: 14px; line-height: 1.6; min-height: 40px;
  }

  .section-title { font-weight: bold; font-size: 15px; margin: 20px 0 8px; }

  .month-nav { display: flex; align-items: center; justify-content: space-between; margin: 8px 0 12px; }
  .month-nav b { font-size: 16px; }
  .history-row {
    display: grid; grid-template-columns: 64px 1fr 1fr 50px; gap: 6px; align-items: center;
    padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 13px;
  }
  .history-row.header { color: var(--text-sub); font-size: 11px; font-weight: bold; }
  .history-totals { text-align: right; margin-top: 10px; font-size: 14px; }
  .history-totals b { font-size: 16px; }

  .req-card {
    background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
    padding: 12px; margin-bottom: 10px;
  }
  .req-card .top { display: flex; justify-content: space-between; align-items: center; }
  .req-status { font-size: 12px; padding: 2px 10px; border-radius: 999px; font-weight: bold; }
  .req-status.st-申請中 { background: rgba(230,159,0,0.18); color: #b8860b; }
  .req-status.st-承認 { background: rgba(30,142,62,0.15); color: var(--success); }
  .req-status.st-却下 { background: rgba(217,48,37,0.15); color: var(--danger); }
  .req-actions { display: flex; gap: 8px; margin-top: 8px; }
  .req-actions .btn-small { flex: 1; }

  /* ===== 工事日報 ===== */
  .dr-site-card {
    background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
    padding: 12px; margin-top: 10px;
  }
  .dr-site-card .dr-site-header {
    display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px;
  }
  .dr-site-card .dr-site-header b { font-size: 13px; color: var(--text-sub); }
  .dr-site-card label { margin: 8px 0 2px; font-size: 13px; }
  .dr-time-row { display: flex; gap: 8px; }
  .dr-time-row input { flex: 1; }

  .dr-history-row {
    padding: 10px 0; border-bottom: 1px solid var(--border); font-size: 13px; cursor: pointer;
  }
  .dr-history-row:last-child { border-bottom: none; }
  .dr-history-row .name { font-weight: bold; }
  .dr-history-row .sub { color: var(--text-sub); font-size: 12px; }