/* =============================================
   JACKSTELLA 金型案件管理システム - スタイル v2.0
   改善指示書【1】〜【5】対応版
   ============================================= */

:root {
  --primary: #6b1a3a;
  --primary-lt: #9b2b56;
  --primary-dk: #4a0f28;
  --accent: #8b1a4a;
  --accent-dk: #6b0f38;
  --success: #16a34a;
  --warning: #d97706;
  --danger: #dc2626;
  --info: #0891b2;
  --purple: #7c3aed;
  --gray: #6b7280;
  --bg: #f1f5f9;
  --surface: #ffffff;
  --border: #e2e8f0;
  --text: #1e293b;
  --muted: #64748b;
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.15);
  --radius: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --header-h: 62px;
  --sidebar-w: 230px;
  --ease: 0.2s ease;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}
body {
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  min-height: 100vh;
  -webkit-tap-highlight-color: transparent;
}

/* ─── ユーティリティ ─── */
.hidden {
  display: none !important;
}
.txt-sm {
  font-size: 0.82rem;
}
.txt-muted {
  color: var(--muted);
}
.txt-danger {
  color: var(--danger);
}
.txt-success {
  color: var(--success);
}
.txt-primary {
  color: var(--primary);
}
.fw700 {
  font-weight: 700;
}
.w100 {
  width: 100%;
}
.mb-8 {
  margin-bottom: 8px;
}
.mb-12 {
  margin-bottom: 12px;
}
.ml-auto {
  margin-left: auto;
}
.flex {
  display: flex;
}
.flex-1 {
  flex: 1;
}
.items-center {
  align-items: center;
}
.gap-8 {
  gap: 8px;
}
.nowrap {
  white-space: nowrap;
}

/* ─── ログイン ─── */
.login-page {
  min-height: 100vh;
  background: linear-gradient(150deg, #2d0a18 0%, #4a0f28 40%, #6b1a3a 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  position: relative;
  overflow: hidden;
}
.login-page::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("images/aichi-logo.png") center/400px no-repeat;
  opacity: 0.04;
  pointer-events: none;
}
.login-card {
  background: white;
  border-radius: var(--radius-xl);
  padding: 40px 36px;
  box-shadow: var(--shadow-lg);
  width: 100%;
  max-width: 440px;
  position: relative;
}
.login-header {
  text-align: center;
  margin-bottom: 28px;
}
.login-logo {
  margin-bottom: 14px;
}
.login-logo-img {
  width: 110px;
  height: 110px;
  object-fit: contain;
  filter: drop-shadow(0 4px 12px rgba(107, 26, 58, 0.25));
  transition: transform 0.3s ease;
}
.login-logo-img:hover {
  transform: scale(1.05) rotate(2deg);
}
.login-header h1 {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--primary-dk);
}
.login-header p {
  font-size: 0.88rem;
  color: var(--muted);
  margin-top: 4px;
}
.login-error {
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: var(--danger);
  border-radius: var(--radius);
  padding: 10px 14px;
  margin-bottom: 14px;
  font-size: 0.9rem;
}
.demo-box {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
  text-align: center;
}
.demo-box p {
  font-size: 0.82rem;
  color: var(--muted);
  margin-bottom: 10px;
}
.demo-btns {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ─── QRスキャンログイン ─── */
.qr-login-section {
  margin-top: 18px;
}
.qr-login-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  color: var(--muted);
  font-size: 0.82rem;
}
.qr-login-divider::before,
.qr-login-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}
.qr-login-hint {
  font-size: 0.78rem;
  color: var(--muted);
  text-align: center;
  background: #f8fafc;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 8px 12px;
  margin-bottom: 10px;
  line-height: 1.7;
}
.qr-login-hint i {
  color: var(--info);
  margin-right: 4px;
}
.btn-qr-scan {
  background: linear-gradient(135deg, var(--primary), var(--primary-lt));
  color: #fff;
  border: none;
  font-size: 0.95rem;
  font-weight: 700;
  padding: 12px;
  border-radius: var(--radius);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 48px;
  transition: opacity 0.15s;
}
.btn-qr-scan:hover {
  opacity: 0.88;
}
.btn-qr-scan i {
  font-size: 1.2rem;
}
.qr-video-wrap {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  background: #000;
  line-height: 0;
}
.qr-scan-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.qr-scan-frame {
  width: 180px;
  height: 180px;
  border-radius: 12px;
  border: 3px solid rgba(255, 255, 255, 0.8);
  box-shadow: 0 0 0 4000px rgba(0, 0, 0, 0.45);
  animation: qr-pulse 1.8s ease-in-out infinite;
}
@keyframes qr-pulse {
  0%,
  100% {
    border-color: rgba(255, 255, 255, 0.8);
  }
  50% {
    border-color: rgba(155, 43, 86, 0.9);
    box-shadow:
      0 0 0 4000px rgba(0, 0, 0, 0.45),
      0 0 20px 4px rgba(155, 43, 86, 0.6);
  }
}
.qr-scan-status {
  position: absolute;
  bottom: 10px;
  left: 0;
  right: 0;
  text-align: center;
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
  padding: 4px 8px;
}
.qr-scan-success {
  background: #dcfce7;
  border: 1.5px solid #86efac;
  border-radius: var(--radius);
  padding: 10px 14px;
  margin-top: 8px;
  text-align: center;
  color: var(--success);
  font-size: 0.88rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

/* ── QRスキャンページ（アプリ内） ── */
.qrscan-page-wrap {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 16px;
}
.qrscan-card {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 20px;
  width: 100%;
  max-width: 480px;
}
.qrscan-hint {
  font-size: 0.84rem;
  color: var(--muted);
  background: #f0f9ff;
  border: 1px solid #bae6fd;
  border-radius: var(--radius);
  padding: 10px 14px;
  margin-bottom: 16px;
  line-height: 1.6;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.qrscan-hint i {
  color: var(--info);
  margin-top: 2px;
  flex-shrink: 0;
}
.qr-page-scan-area .qr-video-wrap {
  max-height: 340px;
}
.qr-page-scan-area video {
  width: 100%;
  border-radius: 10px;
  background: #000;
  max-height: 340px;
  object-fit: cover;
  display: block;
}

.pw-wrap {
  display: flex;
  gap: 8px;
}
.pw-wrap input {
  flex: 1;
}
.pw-eye {
  background: var(--bg);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: 0 14px;
  cursor: pointer;
  color: var(--muted);
}

/* ─── フォーム基本 ─── */
.form-field {
  margin-bottom: 16px;
}
.form-field label {
  display: block;
  font-weight: 600;
  font-size: 0.9rem;
  margin-bottom: 6px;
  color: var(--text);
}
input[type="text"],
input[type="date"],
input[type="time"],
input[type="password"],
input[type="number"],
textarea,
select {
  width: 100%;
  padding: 11px 14px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  font-family: inherit;
  font-size: 1rem;
  color: var(--text);
  background: white;
  transition:
    border-color var(--ease),
    box-shadow var(--ease);
  -webkit-appearance: none;
  appearance: none;
}
select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 10px center;
  background-repeat: no-repeat;
  background-size: 18px;
  padding-right: 36px;
}
input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--primary-lt);
  box-shadow: 0 0 0 3px rgba(107, 26, 58, 0.12);
}
textarea {
  resize: vertical;
  min-height: 80px;
}
.inp-readonly {
  background: var(--bg) !important;
  color: var(--muted) !important;
}
.req {
  color: var(--danger);
  font-weight: 700;
}
.req-notice {
  color: var(--danger);
  font-size: 0.82rem;
  font-weight: 700;
}
.auto-tag {
  display: inline-block;
  background: #dbeafe;
  color: #1d4ed8;
  font-size: 0.68rem;
  padding: 1px 7px;
  border-radius: 10px;
  font-weight: 600;
  vertical-align: middle;
}
.form-hint {
  font-size: 0.82rem;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  padding: 8px 12px;
  background: var(--bg);
  border-radius: var(--radius);
}
.required-mark {
  color: #dc2626;
  font-weight: 700;
  margin-left: 3px;
  font-size: 0.85em;
}

/* ─── ボタン ─── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 18px;
  border: none;
  border-radius: var(--radius);
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--ease);
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}
.btn:active {
  transform: scale(0.97);
}
.btn-primary {
  background: var(--primary);
  color: white;
}
.btn-primary:hover {
  background: var(--primary-dk);
}
.btn-success {
  background: var(--success);
  color: white;
}
.btn-success:hover {
  background: #15803d;
}
.btn-danger {
  background: var(--danger);
  color: white;
}
.btn-danger:hover {
  background: #b91c1c;
}
.btn-warning {
  background: var(--warning);
  color: white;
}
.btn-outline {
  background: white;
  color: var(--text);
  border: 1.5px solid var(--border);
}
.btn-outline:hover {
  background: var(--bg);
}
.btn-sm {
  padding: 6px 12px;
  font-size: 0.82rem;
}
.btn-lg {
  padding: 12px 22px;
  font-size: 1rem;
}
.btn-xl {
  padding: 14px 28px;
  font-size: 1.05rem;
}
.btn-block {
  width: 100%;
  justify-content: center;
}
.icon-btn {
  background: none;
  border: none;
  padding: 8px;
  cursor: pointer;
  color: inherit;
  border-radius: var(--radius);
  font-size: 1.1rem;
  transition: background var(--ease);
}
.icon-btn:hover {
  background: rgba(0, 0, 0, 0.06);
}

/* ─── ヘッダー ─── */
.app-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--header-h);
  background: linear-gradient(90deg, var(--primary-dk) 0%, var(--primary) 100%);
  color: white;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  z-index: 300;
  box-shadow: 0 2px 8px rgba(74, 15, 40, 0.4);
}
.header-l,
.header-r {
  display: flex;
  align-items: center;
  gap: 12px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
}
/* ブランドロゴをホームボタン化 */
.brand-home-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: var(--radius);
  transition:
    background var(--ease),
    transform 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.brand-home-btn:hover {
  background: rgba(255, 255, 255, 0.12);
}
.brand-home-btn:active {
  transform: scale(0.96);
}
.brand-logo-img {
  width: 38px;
  height: 38px;
  object-fit: contain;
  filter: brightness(1.1) drop-shadow(0 0 6px rgba(255, 255, 255, 0.3));
  flex-shrink: 0;
}
.brand-name {
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}
.brand-sub {
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.65);
  font-weight: 500;
}
.user-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  padding: 6px 10px;
  border-radius: var(--radius);
  transition: background var(--ease);
}
.user-chip:hover {
  background: rgba(255, 255, 255, 0.1);
}
.avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.88rem;
  font-weight: 700;
  color: white;
  flex-shrink: 0;
}
.avatar-lg {
  width: 44px;
  height: 44px;
  font-size: 1rem;
  background: var(--primary);
}
.user-label {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}
.user-label span:first-child {
  font-size: 0.9rem;
  font-weight: 600;
}
.role-tag {
  font-size: 0.68rem;
  padding: 1px 7px;
  border-radius: 10px;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.25);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.3);
  align-self: flex-start;
  margin-top: 2px;
}
.user-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: white;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  min-width: 210px;
  z-index: 400;
  overflow: hidden;
}
.um-profile {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  color: var(--text);
}
.user-menu hr {
  border: none;
  border-top: 1px solid var(--border);
}
.um-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  background: none;
  border: none;
  padding: 12px 16px;
  font-family: inherit;
  font-size: 0.95rem;
  cursor: pointer;
  color: var(--text);
  transition: background var(--ease);
}
.um-item:hover {
  background: var(--bg);
}

/* ─── サイドバー ─── */
.sidebar {
  position: fixed;
  top: var(--header-h);
  left: 0;
  width: var(--sidebar-w);
  height: calc(100vh - var(--header-h));
  background: white;
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  z-index: 200;
  transition: transform var(--ease);
  box-shadow: var(--shadow);
  overflow-y: auto;
}
.sb-logo-area {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 14px 12px;
  border-bottom: 2px solid var(--border);
  background: linear-gradient(135deg, #fdf2f6 0%, #fff 100%);
}
.sb-logo-img {
  width: 44px;
  height: 44px;
  object-fit: contain;
  flex-shrink: 0;
  filter: drop-shadow(0 2px 4px rgba(107, 26, 58, 0.2));
}
.sb-logo-name {
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--primary-dk);
  line-height: 1.2;
}
.sb-logo-sub {
  font-size: 0.68rem;
  color: var(--muted);
  margin-top: 2px;
}
.sb-nav {
  flex: 1;
  padding: 10px 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.sb-foot {
  padding: 10px 8px;
  border-top: 1px solid var(--border);
}
.sb-version {
  font-size: 0.72rem;
  color: var(--muted);
  text-align: center;
  padding: 4px 0 10px;
}
.sb-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  background: none;
  border: none;
  padding: 13px 14px;
  font-family: inherit;
  font-size: 0.97rem;
  color: var(--muted);
  border-radius: var(--radius);
  cursor: pointer;
  transition: all var(--ease);
  text-align: left;
  -webkit-tap-highlight-color: transparent;
  /* aタグ対応 */
  text-decoration: none;
  box-sizing: border-box;
}
a.sb-item {
  color: var(--muted);
}
.sb-item:hover {
  background: #f1f5f9;
  color: var(--text);
}
.sb-item.active {
  background: #fdf2f6;
  color: var(--primary);
  font-weight: 700;
  border-left: 3px solid var(--primary);
}
.sb-item i {
  width: 22px;
  font-size: 1rem;
  text-align: center;
  flex-shrink: 0;
}
.sb-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 190;
}

/* ─── メイン ─── */
#main {
  margin-top: var(--header-h);
  margin-left: var(--sidebar-w);
  min-height: calc(100vh - var(--header-h));
  padding: 24px 10px 24px 24px; /* 右余白を狭める */
  transition: margin-left var(--ease);
}
.page {
  display: none;
  max-width: 1400px;
} /* 右余白縮小に合わせて拡大 */
.page.active {
  display: block;
}
/* ダッシュボードページは幅制限なし・パディングなし */
.page--dashboard {
  max-width: none !important;
}
/* ダッシュボードページが表示中は #main のパディングを除去 */
#main:has(#pg-detail.page--dashboard.active) {
  padding: 0;
  overflow: hidden;
}
.page--dashboard.active {
  display: flex;
  flex-direction: column;
  height: calc(100vh - var(--header-h));
  overflow: hidden;
  padding: 0 !important;
  margin-top: 0;
}
.page--dashboard #detail-content {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
/* ── モバイル：ページ全体スクロール可能に ── */
@media (max-width: 900px) {
  #main:has(#pg-detail.page--dashboard.active) {
    overflow: auto;
  }
  .page--dashboard.active {
    height: auto;
    overflow: visible;
    min-height: calc(100vh - var(--header-h));
  }
  .page--dashboard #detail-content {
    overflow: visible;
    flex: unset;
  }
}

/* ─── ページヘッダー ─── */
.pg-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 22px;
  flex-wrap: wrap;
  gap: 12px;
}
.pg-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.5rem;
  font-weight: 800;
}
.pg-title i {
  color: var(--primary-dk);
}
.pg-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* ─── フィルターバー ─── */
.filter-bar {
  display: flex;
  gap: 10px;
  margin-bottom: 18px;
  flex-wrap: wrap;
  background: white;
  padding: 14px;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}
.search-wrap {
  position: relative;
  flex: 1;
  min-width: 200px;
}
.search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
}
.search-inp {
  width: 100%;
  padding-left: 36px !important;
}
.sel-inp {
  padding: 10px 32px 10px 14px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  font-family: inherit;
  font-size: 0.95rem;
  color: var(--text);
  background: white;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 8px center;
  background-repeat: no-repeat;
  background-size: 18px;
}

/* ─── 案件一覧テーブル ─── */
.list-container {
  background: white;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.project-table {
  width: 100%;
  border-collapse: collapse;
}
.project-table th {
  padding: 12px 14px;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--muted);
  background: #f8fafc;
  border-bottom: 2px solid var(--border);
  text-align: left;
  white-space: nowrap;
}
.project-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
  font-size: 0.92rem;
}
.project-table tr:last-child td {
  border-bottom: none;
}
.project-table tr.row-overdue td {
  background: #fef2f2;
}
.project-table tr.row-today td {
  background: #fffbeb;
}
/* 完了 → 薄い緑枠 */
.project-table tr.row-completed td {
  background: #f0fdf4;
}
.project-table tr.row-completed:first-child td:first-child {
  border-left: 3px solid #86efac;
}
.project-table tr.row-completed td:first-child {
  border-left: 3px solid #86efac;
}
/* 検収・納品済 → 薄い青枠 */
.project-table tr.row-delivered td {
  background: #eff6ff;
}
.project-table tr.row-delivered td:first-child {
  border-left: 3px solid #93c5fd;
}
/* ホバー */
.project-table tr:hover td {
  background: #f8fafc;
  cursor: pointer;
}
.project-table tr.row-overdue:hover td {
  background: #fee2e2;
}
.project-table tr.row-today:hover td {
  background: #fef3c7;
}
.project-table tr.row-completed:hover td {
  background: #dcfce7;
}
.project-table tr.row-delivered:hover td {
  background: #dbeafe;
}

/* ─── 【4】サムネイル ─── */
.thumb-cell {
  width: 84px;
}
.thumb-wrap {
  width: 76px;
  height: 58px;
  overflow: hidden;
  border-radius: var(--radius);
  border: 1px solid var(--border);
}
.thumb-img {
  width: 76px;
  height: 58px;
  object-fit: cover;
  cursor: zoom-in;
  transition: transform var(--ease);
  display: block;
}
.thumb-img:hover {
  transform: scale(1.06);
}
.thumb-empty {
  width: 76px;
  height: 58px;
  border-radius: var(--radius);
  background: var(--bg);
  border: 1px dashed var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-size: 1rem;
}

/* ─── 【4】案件番号 2行表示 ─── */
.project-num-sm {
  font-size: 0.78rem;
  color: var(--muted);
  font-weight: 600;
  letter-spacing: 0.02em;
}
.project-num-lines {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}
.project-num-top {
  font-size: 0.75rem;
  color: var(--muted);
  font-weight: 600;
  letter-spacing: 0.04em;
}
.project-num-bot {
  font-size: 0.82rem;
  color: var(--primary);
  font-weight: 700;
  letter-spacing: 0.03em;
}
.num-cell {
  width: 92px;
  vertical-align: top;
  padding-top: 10px;
}
.mold-name-cell {
  font-size: 0.97rem;
  font-weight: 700;
}

/* 入荷日セル：年と月/日を2行表示 */
.arrival-date-cell {
  vertical-align: middle;
  padding-right: 14px; /* 右隣の金型名との余白 */
  white-space: nowrap;
}
.arr-year {
  display: block;
  font-size: 0.72rem;
  color: var(--muted);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.03em;
}
.arr-md {
  display: block;
  font-size: 0.92rem;
  color: var(--text);
  font-weight: 700;
  line-height: 1.2;
}

/* 担当者セル：日付と同じフォントサイズ */
.assignee-cell {
  font-size: 0.92rem;
  color: var(--text);
  font-weight: 600;
  white-space: normal;
  word-break: break-all;
  line-height: 1.3;
}

/* ステータスバッジ */
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 0.78rem;
  font-weight: 700;
  white-space: nowrap;
}
.s-pre-arrival {
  background: #f1f5f9;
  color: #475569;
  border: 1px solid #cbd5e1;
}
.s-arrived {
  background: #dbeafe;
  color: #1d4ed8;
  border: 1px solid #93c5fd;
}
.s-in-progress {
  background: #fef9c3;
  color: #854d0e;
  border: 1px solid #fde047;
}
.s-on-hold {
  background: #fee2e2;
  color: #991b1b;
  border: 1px solid #fca5a5;
}
.s-outsourced {
  background: #f3e8ff;
  color: #6d28d9;
  border: 1px solid #c4b5fd;
}
.s-completed {
  background: #dcfce7;
  color: #166534;
  border: 1px solid #86efac;
}
.s-delivered {
  background: #dbeafe;
  color: #1e3a8a;
  border: 1px solid #93c5fd;
  font-weight: 800;
}

/* ─── 納品済み強調 ─── */
.detail-delivered-card {
  border: 2px solid #93c5fd !important;
  background: #eff6ff !important;
}
.delivered-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #1d4ed8;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 10px;
}

/* ─── 【5】ステータス付随情報 ─── */
.status-extra {
  margin-top: 4px;
  font-size: 0.78rem;
  font-weight: 600;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.hold-extra {
  color: #991b1b;
}
.outsource-extra {
  color: #6d28d9;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.outsource-extra span {
  display: flex;
  align-items: center;
  gap: 4px;
}
.status-extra-card {
  margin-top: 8px;
}
.detail-status-extra {
  margin-top: 8px;
  padding: 10px 14px;
  background: #f8fafc;
  border-radius: var(--radius);
  border: 1px solid var(--border);
}
.detail-status-extra .hold-extra {
  font-size: 0.92rem;
}
.detail-status-extra .outsource-extra {
  font-size: 0.92rem;
}

/* 今日入荷バッジ */
.today-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #fef9c3;
  color: #854d0e;
  border: 1px solid #fde047;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 0.73rem;
  font-weight: 700;
}

/* 遅延バッジ */
.overdue-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #fee2e2;
  color: var(--danger);
  border: 1px solid #fca5a5;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 0.73rem;
  font-weight: 700;
}
/* 遅延バッジ小（案件番号列内） */
.overdue-badge-sm {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: #fee2e2;
  color: var(--danger);
  border: 1px solid #fca5a5;
  padding: 1px 5px;
  border-radius: 8px;
  font-size: 0.67rem;
  font-weight: 700;
}
/* あと何日バッジ（納期カウントダウン） */
.due-days-badge {
  display: inline-flex;
  align-items: center;
  font-size: 0.73rem;
  font-weight: 800;
  padding: 1px 6px;
  border-radius: 8px;
  white-space: nowrap;
}
.due-days-badge.due-days-over {
  color: #dc2626;
  background: #fee2e2;
  border: 1px solid #fca5a5;
}
.due-days-badge.due-days-today {
  color: #dc2626;
  background: #fee2e2;
  border: 1px solid #fca5a5;
}
.due-days-badge.due-days-warn {
  color: #dc2626;
  background: #fff1f2;
  border: 1px solid #fecdd3;
}
.due-days-badge.due-days-ok {
  color: #dc2626;
  background: transparent;
  border: none;
}
/* ページネーション */
.list-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 12px 16px;
  background: white;
  border-top: 1px solid var(--border);
}
.pager-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  border: 1.5px solid var(--border);
  background: white;
  font-size: 0.85rem;
  color: var(--text);
  cursor: pointer;
  transition: all var(--ease);
}
.pager-btn:hover:not(:disabled) {
  background: var(--primary);
  color: white;
  border-color: var(--primary);
}
.pager-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.pager-info {
  font-size: 0.85rem;
  color: var(--muted);
  font-weight: 600;
  white-space: nowrap;
}

/* 件数インジケーター */
.list-count-bar {
  padding: 8px 16px;
  background: white;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

/* 無限スクロール センチネル */
.scroll-sentinel {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: white;
  border-top: 1px solid var(--border);
}
.scroll-sentinel-inner {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 0.85rem;
}
.scroll-sentinel-end {
  padding: 12px;
  background: white;
}
.spinner-sm {
  width: 20px;
  height: 20px;
  border: 2px solid var(--border);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

/* 業務タグ */
.work-tag {
  display: inline-block;
  background: #f0f9ff;
  color: var(--info);
  border: 1px solid #bae6fd;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  margin: 2px;
}
/* 【4】承認済タグ（グレー化） */
.work-tag-done {
  background: #f1f5f9 !important;
  color: #94a3b8 !important;
  border-color: #cbd5e1 !important;
  text-decoration: line-through;
}
.detail-work-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

/* 【1】役職バッジ */
.role-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 10px;
  font-size: 0.78rem;
  font-weight: 700;
}
.role-admin {
  background: #fce7f3;
  color: #9d174d;
}
.role-sales {
  background: #eff6ff;
  color: #1d4ed8;
}
.role-section_leader {
  background: #f0fdf4;
  color: #166534;
}
.role-worker {
  background: #f8fafc;
  color: #475569;
}
.role-accounting {
  background: #fefce8;
  color: #854d0e;
}

/* ─── カードビュー（モバイル） ─── */
.project-cards {
  display: none;
  flex-direction: column;
  gap: 10px;
  padding: 10px;
}
.project-card {
  background: white;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 14px;
  cursor: pointer;
  transition: all var(--ease);
}
.project-card:hover {
  border-color: var(--primary-lt);
  box-shadow: 0 2px 8px rgba(107, 26, 58, 0.12);
}
.project-card.card-overdue {
  border-color: #fca5a5;
  background: #fff5f5;
}
.project-card.card-today {
  border-color: #fde047;
  background: #fffbeb;
}
/* 完了 → 薄い緑枠 */
.project-card.card-completed {
  border-color: #86efac;
  background: #f0fdf4;
}
.project-card.card-completed:hover {
  border-color: #4ade80;
  background: #dcfce7;
}
/* 検収・納品済 → 薄い青枠 */
.project-card.card-delivered {
  border-color: #93c5fd;
  background: #eff6ff;
}
.project-card.card-delivered:hover {
  border-color: #60a5fa;
  background: #dbeafe;
}
.pc-top {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.pc-thumb-wrap {
  flex-shrink: 0;
  width: 90px;
  height: 70px;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border);
}
.pc-thumb-inner {
  width: 90px;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  color: var(--muted);
  font-size: 1.1rem;
}
.pc-thumb-img {
  width: 90px;
  height: 70px;
  object-fit: cover;
  cursor: zoom-in;
  display: block;
  transition: transform var(--ease);
}
.pc-thumb-img:hover {
  transform: scale(1.06);
}
.pc-info {
  flex: 1;
  min-width: 0;
}
.pc-mold {
  font-size: 1rem;
  font-weight: 700;
  margin: 2px 0;
}
.pc-customer {
  font-size: 0.85rem;
  color: var(--muted);
}
.pc-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
  align-items: center;
}
.pc-badges {
  display: flex;
  gap: 6px;
  margin-top: 8px;
  flex-wrap: wrap;
}

/* ─── 空状態 ─── */
.empty-state {
  text-align: center;
  padding: 48px 20px;
  color: var(--muted);
}
.empty-state i {
  font-size: 3rem;
  color: #cbd5e1;
  margin-bottom: 14px;
  display: block;
}
.empty-state p {
  font-size: 1rem;
}

/* ─── ローダー ─── */
.loading-state {
  display: flex;
  justify-content: center;
  padding: 48px;
}
.spinner {
  width: 40px;
  height: 40px;
  border: 3px solid var(--border);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* ─── フォームカード ─── */
.form-card {
  background: white;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.form-section {
  padding: 24px;
  border-bottom: 1px solid var(--border);
}
.form-section:last-child {
  border-bottom: none;
}
.form-section-title {
  font-size: 1rem;
  font-weight: 800;
  color: var(--primary-dk);
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.form-section-title i {
  color: var(--accent-dk);
}
.welding-title {
  color: var(--danger);
}
.welding-title i {
  color: var(--danger);
}
.form-grid2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.form-actions {
  padding: 20px 24px;
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  background: #f8fafc;
  flex-wrap: wrap;
}

/* ─── 業務タイプセレクター ─── */
.work-type-selector {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* ── カテゴリブロック ── */
.wt-category-block {
  background: #f8fafc;
  border: 1.5px solid #e2e8f0;
  border-radius: 10px;
  padding: 12px 14px 14px;
}

/* ── カテゴリ全選択ボタン ── */
.wt-category-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 14px 6px 10px;
  border: 2px solid #94a3b8;
  border-radius: 8px;
  background: white;
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  color: #475569;
  cursor: pointer;
  transition: all 0.18s;
  margin-bottom: 10px;
  letter-spacing: 0.02em;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.wt-category-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: #eff6ff;
}
/* 一部選択中 */
.wt-category-btn.some-selected {
  border-color: #f59e0b;
  color: #b45309;
  background: #fffbeb;
}
/* 全選択中 */
.wt-category-btn.all-selected {
  border-color: var(--primary);
  background: var(--primary);
  color: white;
}
.wt-category-btn.all-selected:hover {
  background: var(--primary-dark, #1d4ed8);
  border-color: var(--primary-dark, #1d4ed8);
}
/* バッジ（選択数/全数） */
.wt-cat-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  padding: 1px 6px;
  background: rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  font-size: 0.78rem;
  font-weight: 700;
  margin-left: 2px;
}
.wt-category-btn.all-selected .wt-cat-badge {
  background: rgba(255, 255, 255, 0.3);
}
.wt-category-btn.some-selected .wt-cat-badge {
  background: #fef3c7;
  color: #92400e;
}

.wt-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.wt-chip {
  padding: 7px 15px;
  border: 2px solid var(--border);
  border-radius: 20px;
  background: white;
  font-family: inherit;
  font-size: 0.88rem;
  cursor: pointer;
  transition: all var(--ease);
  font-weight: 600;
  color: var(--text);
  -webkit-tap-highlight-color: transparent;
}
.wt-chip:hover {
  border-color: var(--primary-lt);
}
.wt-chip.selected {
  border-color: var(--primary);
  background: var(--primary);
  color: white;
}
.wt-chip.welding-chip.selected {
  border-color: #9b2b56;
  background: #9b2b56;
}
/* カラー付きチップ（マスターでタグ色設定済み） */
.wt-chip.has-color {
  background: var(--chip-color);
  border-color: var(--chip-color);
  color: #fff;
}
.wt-chip.has-color.selected {
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.2);
  opacity: 0.9;
}

/* ─── 工程並び替え ─── */
.work-order-list {
  min-height: 60px;
  border: 2px dashed var(--border);
  border-radius: var(--radius);
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.work-order-empty {
  text-align: center;
  color: var(--muted);
  font-size: 0.88rem;
  padding: 16px;
}
.work-order-item {
  display: flex;
  align-items: center;
  gap: 10px;
  background: white;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 14px;
  cursor: grab;
  transition:
    background 0.15s,
    border-color 0.15s,
    box-shadow 0.15s;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}
.work-order-item:active {
  cursor: grabbing;
}
.work-order-item.dragging {
  opacity: 0.4;
  background: #f0f9ff;
  box-shadow: none;
}
.work-order-item.dragover {
  border-color: var(--primary);
  background: #fdf2f6;
  box-shadow: 0 0 0 3px rgba(var(--primary-rgb, 139, 0, 39), 0.15);
}
.drag-handle {
  color: var(--muted);
  font-size: 0.9rem;
}
.order-num {
  width: 24px;
  height: 24px;
  background: var(--primary);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.78rem;
  font-weight: 700;
  flex-shrink: 0;
}
.order-name {
  flex: 1;
  font-weight: 600;
  font-size: 0.92rem;
}
.order-remove {
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  font-size: 0.85rem;
}
.order-remove:hover {
  color: var(--danger);
}

/* ══════════════════════════════════════════
   トグルスイッチ（汎用）
   ・toggle-lbl 内の checkbox だけを視覚的に隠す
   ・display:none は使わず position:absolute で
     フォーカス・キーボード操作を維持する
   ══════════════════════════════════════════ */
.toggle-lbl input[type="checkbox"] {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  opacity: 0;
  pointer-events: none;
}
.toggle-lbl {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  user-select: none;
  padding: 12px 16px;
  background: var(--bg);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  transition:
    border-color var(--ease),
    background var(--ease);
  min-height: 48px; /* 指で押しやすいタップターゲット */
  width: 100%;
  box-sizing: border-box;
}
.toggle-lbl:hover {
  border-color: var(--primary-lt);
  background: #fdf2f6;
}
/* チェック済みの見た目変化（:has はモダンブラウザ対応） */
.toggle-lbl:has(input:checked) {
  border-color: var(--primary);
  background: #fff0f6;
}
.toggle-slider {
  width: 48px;
  height: 28px;
  background: #cbd5e1;
  border-radius: 14px;
  position: relative;
  transition: background var(--ease);
  flex-shrink: 0;
}
.toggle-slider::after {
  content: "";
  position: absolute;
  width: 22px;
  height: 22px;
  background: white;
  border-radius: 50%;
  top: 3px;
  left: 3px;
  transition: transform var(--ease);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}
.toggle-lbl input[type="checkbox"]:checked + .toggle-slider {
  background: var(--primary);
}
.toggle-lbl input[type="checkbox"]:checked + .toggle-slider::after {
  transform: translateX(20px);
}
.toggle-label-text {
  font-size: 0.97rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--text);
}
.toggle-field label {
  display: flex;
  align-items: center;
}

/* ── 溶接条件 専用レイアウト ── */
.weld-rod-field {
  max-width: 460px;
}
.weld-rod-field select {
  font-size: 1rem;
}

/* 予熱・後熱 カード縦並び */
.weld-heat-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 8px;
}
.weld-heat-item {
  background: white;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.weld-heat-label {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* 温度入力エリア */
.temp-inp-wrap {
  display: flex;
  align-items: center;
  flex-direction: row;
  gap: 10px;
  padding-top: 12px;
  border-top: 1px dashed var(--border);
  animation: fadeIn 0.2s ease;
  flex-wrap: wrap;
}
.temp-sub-label {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--muted);
}
.inp-temp {
  width: 180px;
  padding: 10px 14px;
  font-size: 1rem;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  font-family: inherit;
  color: var(--text);
  background: white;
  transition:
    border-color var(--ease),
    box-shadow var(--ease);
}
.inp-temp:focus {
  border-color: var(--primary-lt);
  box-shadow: 0 0 0 3px rgba(107, 26, 58, 0.12);
  outline: none;
}

/* proc-detail アニメーション */
.proc-detail {
  animation: fadeIn 0.2s ease;
}
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* 後方互換（旧クラス） */
.toggle-temp-wrap {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 4px 0;
}

.weld-warn {
  background: #fff1f2;
  border: 1px solid #fecdd3;
  color: var(--danger);
  border-radius: var(--radius);
  padding: 12px 16px;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
}

/* ─── 【3】処理・外注 レイアウト修正版 ─── */
.proc-block {
  background: var(--bg);
  border-radius: var(--radius);
  padding: 4px 0; /* toggle-lbl 自身がパディングを持つため余白不要 */
}
.proc-toggle-row {
  display: block;
} /* flex解除してtoggle-lblをフル幅に */
.proc-detail {
  margin-top: 12px;
  padding: 14px 16px;
  background: white;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  gap: 10px;
  animation: fadeIn 0.2s ease;
}
.proc-detail-label {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--muted);
  margin-bottom: 2px;
}

/* ─── ファイルアップロード ─── */
.upload-area {
  border: 2px dashed var(--border);
  border-radius: var(--radius-lg);
  padding: 28px;
  text-align: center;
  cursor: pointer;
  transition: all var(--ease);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.upload-area:hover {
  border-color: var(--primary-lt);
  background: #fdf2f6;
}
.upload-area i {
  font-size: 2rem;
  color: var(--muted);
}
.upload-area p {
  font-size: 0.92rem;
  color: var(--muted);
}
.file-previews {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.preview-thumb {
  position: relative;
  width: 80px;
  height: 80px;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border);
}
.preview-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* 圧縮後サイズバッジ */
.preview-size-badge {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 0.6rem;
  text-align: center;
  padding: 2px 0;
  line-height: 1.3;
}
.preview-remove {
  position: absolute;
  top: 2px;
  right: 2px;
  background: rgba(220, 38, 38, 0.85);
  color: white;
  border: none;
  border-radius: 50%;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 0.7rem;
}
.preview-doc {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #f8fafc;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 8px 12px;
  font-size: 0.85rem;
}
.preview-doc i {
  color: var(--danger);
  font-size: 1.1rem;
}
.preview-doc-remove {
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  padding: 2px;
  margin-left: auto;
}
.preview-doc-remove:hover {
  color: var(--danger);
}

/* ─── 顧客セレクター ─── */
.customer-sel-wrap {
  position: relative;
}
.customer-sel-wrap .btn {
  justify-content: flex-start;
  text-align: left;
}
.modal-customer-box {
  max-width: 580px;
}
.customer-modal-body {
  padding: 16px 20px;
}
/* 【3】あいうえお行インデックスボタン */
.kana-index-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
  padding: 10px;
  background: var(--bg);
  border-radius: var(--radius);
}
.kana-idx-btn {
  padding: 6px 10px;
  border: 1.5px solid var(--border);
  border-radius: 6px;
  background: white;
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  color: var(--text);
  transition: all var(--ease);
}
.kana-idx-btn:hover {
  border-color: var(--primary-lt);
  background: #fdf2f6;
  color: var(--primary);
}
.customer-picker-list {
  max-height: 360px;
  overflow-y: auto;
}
.kana-group-header {
  padding: 8px 14px;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--muted);
  background: #f8fafc;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  cursor: pointer;
  transition: background var(--ease);
}
.kana-group-header:hover,
.kana-group-header.kana-active {
  background: #fdf2f6;
  color: var(--primary);
}
.customer-picker-item {
  padding: 12px 16px;
  cursor: pointer;
  transition: background var(--ease);
  border-bottom: 1px solid var(--border);
}
.customer-picker-item:last-child {
  border-bottom: none;
}
.customer-picker-item:hover {
  background: #f0f9ff;
}
.cp-name {
  font-weight: 700;
  font-size: 0.95rem;
}
.cp-sub {
  font-size: 0.82rem;
  color: var(--muted);
  margin-top: 2px;
}

/* ─── オートコンプリート ─── */
.autocomplete-wrap {
  position: relative;
}
.autocomplete-list {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: white;
  border: 1.5px solid var(--primary-lt);
  border-radius: 0 0 var(--radius) var(--radius);
  box-shadow: var(--shadow-md);
  z-index: 100;
  max-height: 200px;
  overflow-y: auto;
}
.autocomplete-item {
  padding: 10px 14px;
  cursor: pointer;
  font-size: 0.92rem;
  border-bottom: 1px solid var(--border);
}
.autocomplete-item:last-child {
  border-bottom: none;
}
.autocomplete-item:hover {
  background: #f0f9ff;
}

/* ─── 案件詳細 ─── */
.detail-header-card {
  background: white;
  border-radius: var(--radius-lg);
  padding: 24px;
  box-shadow: var(--shadow);
  margin-bottom: 16px;
}
.detail-num-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.detail-project-num {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--primary);
}
.detail-info-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.detail-info-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.detail-info-label {
  font-size: 0.78rem;
  color: var(--muted);
  font-weight: 700;
  text-transform: uppercase;
}
.detail-info-value {
  font-size: 0.97rem;
  font-weight: 600;
}
.detail-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}
.detail-section-card {
  background: white;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.detail-section-card.full {
  grid-column: 1/-1;
}
.dsc-head {
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}
.dsc-head h3 {
  font-size: 0.97rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--primary);
}
.dsc-head h3 i {
  color: var(--primary-dk);
}
.dsc-body {
  padding: 16px 20px;
}
.field-row {
  display: flex;
  gap: 12px;
  margin-bottom: 12px;
  align-items: flex-start;
}
.field-lbl {
  font-size: 0.8rem;
  color: var(--muted);
  font-weight: 700;
  min-width: 90px;
  flex-shrink: 0;
}
.field-val {
  font-size: 0.95rem;
}

/* 工程承認リスト */
.process-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px 20px;
}
.process-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  background: white;
}
.process-item.approved {
  border-color: #86efac;
  background: #f0fdf4;
}
.process-num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--muted);
  flex-shrink: 0;
}
.process-name {
  flex: 1;
  font-weight: 600;
  font-size: 0.92rem;
}
.process-status {
  font-size: 0.8rem;
  color: var(--muted);
}
.process-approved-label {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--success);
  font-size: 0.82rem;
  font-weight: 700;
}

/* ステータス変更 */
.status-selector {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 16px 20px;
}
.status-sel-btn {
  padding: 10px 16px;
  border: 2px solid var(--border);
  border-radius: 20px;
  background: white;
  font-family: inherit;
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
  transition: all var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.status-sel-btn.active {
  border-color: var(--primary);
  background: var(--primary);
  color: white;
}

/* フォトグリッド */
.photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 8px;
  padding: 16px;
}
.photo-grid-item {
  position: relative;
  aspect-ratio: 1;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border);
  cursor: zoom-in;
}
.photo-grid-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--ease);
}
.photo-grid-item:hover img {
  transform: scale(1.06);
}
.photo-grid-item .delete-photo {
  position: absolute;
  top: 4px;
  right: 4px;
  background: rgba(220, 38, 38, 0.85);
  color: white;
  border: none;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 0.7rem;
}
.photo-grid-item:hover .delete-photo {
  display: flex;
}
.photo-cap {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.6));
  color: white;
  font-size: 0.7rem;
  padding: 4px 6px;
}

/* コメント */
.comment-list {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.comment-item {
  display: flex;
  gap: 10px;
}
.comment-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--primary);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.82rem;
  font-weight: 700;
  flex-shrink: 0;
}
.comment-bubble {
  flex: 1;
  background: #f8fafc;
  border-radius: 0 var(--radius) var(--radius) var(--radius);
  padding: 10px 14px;
}
.comment-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
  flex-wrap: wrap;
}
.comment-author {
  font-weight: 700;
  font-size: 0.85rem;
}
.comment-time {
  font-size: 0.75rem;
  color: var(--muted);
}
.comment-text {
  font-size: 0.92rem;
}
.comment-status {
  background: #f0f9ff;
  border-left: 3px solid var(--info);
}
.comment-input-row {
  padding: 14px 20px;
  border-top: 1px solid var(--border);
  display: flex;
  gap: 10px;
}
.comment-input-row input {
  flex: 1;
}

/* ─── マスター管理 ─── */
.master-tabs {
  display: flex;
  gap: 0;
  background: white;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  box-shadow: var(--shadow);
  overflow: hidden;
  border-bottom: 2px solid var(--border);
  flex-wrap: wrap;
}
.master-tab {
  flex: 1;
  min-width: 80px;
  padding: 14px 10px;
  border: none;
  background: white;
  font-family: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  color: var(--muted);
  transition: all var(--ease);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  -webkit-tap-highlight-color: transparent;
}
.master-tab:hover {
  background: #f8fafc;
  color: var(--text);
}
.master-tab.active {
  color: var(--primary);
  border-bottom: 2px solid var(--primary);
  background: white;
  margin-bottom: -2px;
}
.master-content {
  background: white;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 20px;
}
.master-toolbar {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.master-table {
  width: 100%;
  border-collapse: collapse;
}
.master-table th {
  padding: 10px 14px;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--muted);
  background: #f8fafc;
  border-bottom: 2px solid var(--border);
  text-align: left;
}
.master-table td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  font-size: 0.9rem;
  vertical-align: middle;
}
.master-table tr:last-child td {
  border-bottom: none;
}
.master-table tr:hover td {
  background: #f9fafb;
}
.act-col {
  white-space: nowrap;
}
/* 顧客マスター */
.customer-master-table td:nth-child(3) {
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.payment-day-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 20px;
  font-size: 0.78rem;
  font-weight: 600;
  background: #f0fdf4;
  color: #16a34a;
  border: 1px solid #86efac;
}
.active-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}
.active-dot.on {
  background: var(--success);
}
.active-dot.off {
  background: var(--muted);
}

/* ─── モーダル ─── */
.modal {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.modal-bg {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
}
.modal-box {
  position: relative;
  background: white;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  width: 100%;
  max-width: 560px;
  max-height: 90vh;
  overflow-y: auto;
  z-index: 1;
}
.modal-sm {
  max-width: 420px;
}
.modal-md {
  max-width: 560px;
}
.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}
.modal-head h3 {
  font-size: 1.05rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 8px;
}
.modal-body {
  padding: 20px;
}
.modal-foot {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  padding: 14px 20px;
  border-top: 1px solid var(--border);
}

/* ─── 【4】写真ビューア（矢印ナビ付き） ─── */
.photo-viewer {
  position: relative;
  max-width: 94vw;
  max-height: 92vh;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
.photo-viewer-main {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  overflow: hidden;
}
.photo-viewer-main img {
  max-width: 80vw;
  max-height: 78vh;
  object-fit: contain;
  border-radius: var(--radius);
  touch-action: none; /* ジェスチャー制御をJSに委譲 */
  user-select: none;
  transform-origin: center center;
  transition: transform 0.05s linear;
}
.photo-viewer-close {
  position: absolute;
  top: -18px;
  right: -18px;
  background: white;
  border: none;
  border-radius: 50%;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 1rem;
  box-shadow: var(--shadow-md);
  z-index: 2;
}
.photo-viewer-nav {
  background: rgba(255, 255, 255, 0.92);
  border: none;
  border-radius: 50%;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 1.1rem;
  box-shadow: var(--shadow-md);
  z-index: 2;
  transition: all var(--ease);
  color: var(--text);
  flex-shrink: 0;
}
.photo-viewer-nav:hover {
  background: white;
  transform: scale(1.08);
}
.photo-viewer-nav:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}
.photo-viewer-counter {
  color: white;
  font-size: 0.85rem;
  font-weight: 600;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}
.photo-viewer-cap {
  color: white;
  font-size: 0.9rem;
  margin-top: 4px;
  text-align: center;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}
/* スマホ：ナビボタンを画面端に固定してタップしやすく */
@media (max-width: 600px) {
  .photo-viewer {
    max-width: 100vw;
    max-height: 100vh;
    gap: 0;
  }
  .photo-viewer-main img {
    max-width: 100vw;
    max-height: 82vh;
    border-radius: 0;
  }
  .photo-viewer-nav {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 64px;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.35);
    color: white;
  }
  .photo-viewer-nav.prev {
    left: 0;
  }
  .photo-viewer-nav.next {
    right: 0;
  }
  .photo-viewer-nav:disabled {
    opacity: 0.15;
  }
  .photo-viewer-close {
    top: 8px;
    right: 8px;
    position: fixed;
  }
}

/* ─── トースト ─── */
#toast-wrap {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.toast {
  background: white;
  border-radius: var(--radius);
  padding: 12px 14px 12px 18px;
  box-shadow: var(--shadow-md);
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 260px;
  max-width: 380px;
  font-size: 0.93rem;
  animation: toastIn 0.3s ease;
  border-left: 4px solid;
  cursor: pointer;
  transition:
    opacity 0.15s,
    transform 0.15s;
  position: relative;
}
.toast:hover {
  opacity: 0.9;
  transform: translateX(-2px);
}
.toast-msg {
  flex: 1;
  line-height: 1.4;
}
.toast-close {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  cursor: pointer;
  color: var(--muted);
  font-size: 0.8rem;
  border-radius: 4px;
  transition:
    background 0.15s,
    color 0.15s;
  padding: 0;
}
.toast-close:hover {
  background: #f1f5f9;
  color: var(--text);
}
.toast-success {
  border-left-color: var(--success);
}
.toast-error {
  border-left-color: var(--danger);
}
.toast-info {
  border-left-color: var(--info);
}
.toast-warning {
  border-left-color: var(--warning);
}
@keyframes toastIn {
  from {
    transform: translateX(110%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}
@keyframes toastOut {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(110%);
    opacity: 0;
  }
}
.toast.dismissing {
  animation: toastOut 0.22s ease forwards !important;
  pointer-events: none;
}
/* ─── 不具合バッジ ─── */
.defect-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #fff1f2;
  color: var(--danger);
  border: 1px solid #fecdd3;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 0.73rem;
  font-weight: 700;
}

/* ─── 【3】ステータスフィルタ タグボタン ─── */
.status-filter-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.status-filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 13px;
  border: 2px solid var(--border);
  border-radius: 20px;
  background: white;
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  transition: all var(--ease);
  color: var(--muted);
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}
.status-filter-btn:hover {
  border-color: var(--primary-lt);
  color: var(--primary);
  background: #fdf2f6;
}
.status-filter-btn.active {
  border-color: var(--primary);
  background: var(--primary);
  color: white;
}
.status-filter-btn[data-val="pre_arrival"].active {
  background: #475569;
  border-color: #475569;
  color: white;
}
.status-filter-btn[data-val="arrived"].active {
  background: #1d4ed8;
  border-color: #1d4ed8;
  color: white;
}
.status-filter-btn[data-val="in_progress"].active {
  background: #854d0e;
  border-color: #854d0e;
  color: white;
}
.status-filter-btn[data-val="on_hold"].active {
  background: #991b1b;
  border-color: #991b1b;
  color: white;
}
.status-filter-btn[data-val="outsourced"].active {
  background: #6d28d9;
  border-color: #6d28d9;
  color: white;
}
.status-filter-btn[data-val="completed"].active {
  background: #166534;
  border-color: #166534;
  color: white;
}
/* 遅延フィルターボタン */
.sb-overdue {
  border-color: #fca5a5;
  color: var(--danger);
}
.sb-overdue:hover {
  background: #fee2e2 !important;
  border-color: var(--danger) !important;
  color: var(--danger) !important;
}
.sb-overdue.active {
  background: var(--danger) !important;
  border-color: var(--danger) !important;
  color: white !important;
}

/* ─── カテゴリー別フィルター ─── */
.category-filter-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}
.category-filter-label {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--muted);
  white-space: nowrap;
}
.category-filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border: 2px solid var(--border);
  border-radius: 20px;
  background: white;
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  transition: all var(--ease);
  color: var(--muted);
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}
.category-filter-btn:hover {
  opacity: 0.85;
}
.category-filter-btn.active {
  color: white;
}
/* 溶接：薄いレッド/ローズ系 */
.category-filter-btn.cat-welding {
  border-color: #fecdd3;
  color: #be123c;
  background: #fff1f2;
}
.category-filter-btn.cat-welding:hover {
  background: #fecdd3;
}
.category-filter-btn.cat-welding.active {
  background: #be123c;
  border-color: #be123c;
  color: white;
}
/* 加工：薄いブルー系 */
.category-filter-btn.cat-machining {
  border-color: #bfdbfe;
  color: #1d4ed8;
  background: #eff6ff;
}
.category-filter-btn.cat-machining:hover {
  background: #bfdbfe;
}
.category-filter-btn.cat-machining.active {
  background: #1d4ed8;
  border-color: #1d4ed8;
  color: white;
}
/* 測定：薄いグリーン系 */
.category-filter-btn.cat-measurement {
  border-color: #bbf7d0;
  color: #15803d;
  background: #f0fdf4;
}
.category-filter-btn.cat-measurement:hover {
  background: #bbf7d0;
}
.category-filter-btn.cat-measurement.active {
  background: #15803d;
  border-color: #15803d;
  color: white;
}
/* 新型製作：薄いパープル系 */
.category-filter-btn.cat-new_mold {
  border-color: #e9d5ff;
  color: #7e22ce;
  background: #fdf4ff;
}
.category-filter-btn.cat-new_mold:hover {
  background: #e9d5ff;
}
.category-filter-btn.cat-new_mold.active {
  background: #7e22ce;
  border-color: #7e22ce;
  color: white;
}

/* ─── 顧客名・金型名 大フォント（詳細） ─── */
.detail-title-block {
  margin-bottom: 20px;
}
.detail-customer-name {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--muted);
  margin-bottom: 4px;
}
.detail-mold-name {
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--text);
  line-height: 1.2;
  margin-bottom: 10px;
}
.detail-sub-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* カードビューのバッジインライン */
.pc-badges-inline {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}

/* ─── 不具合一覧 ─── */
/* .defect-count-bar は v5.1追加スタイルセクションに移動 */
.defect-count-label {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--danger);
}

/* 不具合入力エリア */
.defect-toggle-row {
  margin-bottom: 12px;
}
.defect-input-area {
  padding: 12px;
  background: #fff1f2;
  border-radius: var(--radius);
  border: 1px solid #fecdd3;
}

/* ─── 【4】レポート ─── */
.report-filter-bar {
  background: white;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 16px 20px;
  margin-bottom: 18px;
}
.report-filter-inner {
  display: flex;
  gap: 14px;
  align-items: flex-end;
  flex-wrap: wrap;
}
.report-date-range {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}
.inp-date-sm {
  width: 150px;
  padding: 8px 10px;
  font-size: 0.9rem;
}
.range-sep {
  color: var(--muted);
  font-weight: 700;
  font-size: 1rem;
}
.report-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.report-summary-row {
  grid-column: 1/-1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.report-kpi {
  background: white;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 20px;
  text-align: center;
}
.report-kpi.kpi-warn {
  border-top: 3px solid var(--warning);
}
.report-kpi.kpi-danger {
  border-top: 3px solid var(--danger);
}
.kpi-num {
  font-size: 2.4rem;
  font-weight: 800;
  color: var(--primary-dk);
  line-height: 1;
}
.kpi-lbl {
  font-size: 0.82rem;
  color: var(--muted);
  margin-top: 6px;
  font-weight: 600;
}
.report-card {
  background: white;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.report-card.full {
  grid-column: 1/-1;
}
.report-card-title {
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
  font-weight: 800;
  font-size: 0.97rem;
  color: var(--primary-dk);
  display: flex;
  align-items: center;
  gap: 8px;
}
.report-table {
  width: 100%;
  border-collapse: collapse;
}
.report-table th {
  padding: 10px 16px;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--muted);
  background: #f8fafc;
  border-bottom: 2px solid var(--border);
  text-align: left;
}
.report-table td {
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  font-size: 0.9rem;
  vertical-align: middle;
}
.report-table tr:last-child td {
  border-bottom: none;
}
.mini-bar {
  background: var(--border);
  border-radius: 4px;
  height: 8px;
  width: 100%;
  overflow: hidden;
}
.mini-bar-fill {
  background: var(--primary);
  height: 100%;
  border-radius: 4px;
  min-width: 2px;
}
.status-dist-bar {
  display: flex;
  height: 36px;
  border-radius: var(--radius);
  overflow: hidden;
  margin: 14px 20px 10px;
}
.dist-seg {
  display: flex;
  align-items: center;
  justify-content: center;
  transition: flex 0.4s ease;
}
.dist-seg-label {
  font-size: 0.72rem;
  font-weight: 700;
  color: white;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  pointer-events: none;
}
.status-dist-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 20px 14px;
}

/* ─── 印刷エリア ─── */
.print-area {
  display: none;
}

/* ─── レスポンシブ ─── */
@media (max-width: 900px) {
  :root {
    --sidebar-w: 0px;
  }
  #sidebar {
    transform: translateX(-230px);
    width: 230px;
  }
  #sidebar.open {
    transform: none;
  }
  .sb-overlay.open {
    display: block;
  }
  #main {
    margin-left: 0;
    padding: 14px;
  }
  .detail-cols {
    grid-template-columns: 1fr;
  }
  .detail-info-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .project-table {
    display: none;
  }
  .project-cards {
    display: flex;
  }
  .form-grid2 {
    grid-template-columns: 1fr;
  }
  .pg-actions {
    gap: 6px;
  }
  .report-grid {
    grid-template-columns: 1fr;
  }
  .report-summary-row {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 540px) {
  .pg-title {
    font-size: 1.2rem;
  }
  .brand-sub {
    display: none;
  }
  .detail-info-grid {
    grid-template-columns: 1fr;
  }
  .detail-mold-name {
    font-size: 1.35rem;
  }
  .filter-bar {
    flex-direction: column;
  }
  .status-filter-tags {
    gap: 4px;
  }
  .status-filter-btn {
    padding: 5px 10px;
    font-size: 0.76rem;
  }
  .form-actions {
    flex-direction: column;
  }
  .form-actions .btn {
    justify-content: center;
  }
  .master-tab span {
    font-size: 0.72rem;
  }
  .kana-index-bar {
    gap: 4px;
  }
  .kana-idx-btn {
    padding: 4px 7px;
    font-size: 0.75rem;
  }
  .report-summary-row {
    grid-template-columns: repeat(2, 1fr);
  }
  .report-filter-inner {
    flex-direction: column;
    align-items: flex-start;
  }
  .inp-date-sm {
    width: 130px;
  }
}

/* ─── 印刷スタイル ─── */
@media print {
  body > *:not(#print-area) {
    display: none !important;
  }
  .print-area {
    display: block !important;
  }
  .print-page {
    width: 210mm;
    min-height: 297mm;
    padding: 14mm;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 10pt;
    color: #000;
  }
  .print-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 10mm;
    border-bottom: 2px solid #000;
    padding-bottom: 4mm;
  }
  .print-logo {
    font-size: 14pt;
    font-weight: 800;
  }
  .print-title {
    font-size: 18pt;
    font-weight: 800;
  }
  .print-number {
    font-size: 12pt;
    font-weight: 700;
  }
  .print-info-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 4mm;
    margin-bottom: 8mm;
  }
  .print-info-item {
    border: 1px solid #ccc;
    padding: 3mm;
  }
  .print-info-label {
    font-size: 8pt;
    color: #666;
    font-weight: 700;
  }
  .print-info-value {
    font-size: 10pt;
    font-weight: 700;
    margin-top: 1mm;
  }
  .print-photos {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 5mm;
    margin-bottom: 8mm;
  }
  .print-photo {
    width: 100%;
    aspect-ratio: 4/3;
    object-fit: cover;
    border: 1px solid #ccc;
  }
  .print-comment-section {
    margin-bottom: 8mm;
  }
  .print-comment-title {
    font-size: 10pt;
    font-weight: 700;
    margin-bottom: 3mm;
  }
  .print-comment-line {
    height: 8mm;
    border-bottom: 1px solid #ccc;
    margin-bottom: 2mm;
  }
  .print-qr-section {
    display: flex;
    align-items: center;
    gap: 6mm;
  }
  .print-qr-label {
    font-size: 9pt;
    color: #555;
  }
  .print-footer {
    margin-top: 8mm;
    font-size: 8pt;
    color: #888;
    text-align: right;
  }
}

/* ═══════════════════════════════════════════════════
   【新機能】追加スタイル v4.0
   ═══════════════════════════════════════════════════ */

/* ─── タッチ最適化 ─── */
.touch-btn {
  min-height: 44px;
  min-width: 44px;
}
.touch-select {
  min-height: 48px;
  font-size: 1rem;
  padding: 10px 14px;
}
.touch-textarea {
  min-height: 100px;
  font-size: 1rem;
  line-height: 1.7;
  padding: 12px 14px;
}
.touch-input {
  min-height: 48px;
  font-size: 1rem;
  padding: 10px 14px;
}

/* ─── ボタン全般拡大 ─── */
.btn {
  min-height: 40px;
}
.btn-xl {
  min-height: 52px;
  font-size: 1.05rem;
  font-weight: 700;
  padding: 12px 24px;
}
.btn-lg {
  min-height: 46px;
  font-size: 0.97rem;
  padding: 10px 20px;
}
.btn-touch {
  min-height: 44px;
  font-size: 0.93rem;
  padding: 10px 16px;
}
.btn-sm {
  min-height: 36px;
  padding: 6px 14px;
  font-size: 0.84rem;
}

/* ─── 【2】不具合写真スロット ─── */
.defect-photo-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 8px;
}
.defect-photo-slot {
  aspect-ratio: 1;
  border-radius: var(--radius);
  overflow: hidden;
  border: 2px dashed var(--border);
  background: var(--bg);
}
.defect-photo-add {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  height: 100%;
  cursor: pointer;
  color: var(--muted);
  font-size: 0.82rem;
  transition: background var(--ease);
}
.defect-photo-add:hover,
.defect-photo-add:active {
  background: #f0f4ff;
  color: var(--primary);
}
.defect-photo-add i {
  font-size: 1.6rem;
}
.defect-photo-preview {
  width: 100%;
  height: 100%;
}
.defect-photo-remove {
  position: absolute;
  top: 3px;
  right: 3px;
  background: rgba(220, 38, 38, 0.85);
  color: white;
  border: none;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  cursor: pointer;
  z-index: 2;
}
.defect-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 12px;
}
@media (max-width: 540px) {
  .defect-form-grid {
    grid-template-columns: 1fr;
  }
}

/* ─── 【3】工程別実績モーダル ─── */
.modal-record-box {
  max-width: 580px;
}

/* 工程写真スロット（3枚横並び） */
.rec-photo-slot {
  aspect-ratio: 1;
  border-radius: var(--radius);
  overflow: hidden;
  border: 2px dashed var(--border);
  background: var(--bg);
}
/* 実績写真 複数選択UI */
.rec-photo-add-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.rec-photo-add-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 20px;
  background: #eff6ff;
  border: 2px dashed var(--primary);
  border-radius: var(--radius);
  color: var(--primary);
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s;
  white-space: nowrap;
  flex: 1;
  min-width: 160px;
}
.rec-photo-add-btn:hover {
  background: #dbeafe;
}
.rec-photo-count {
  font-size: 0.8rem;
  color: var(--muted);
  font-weight: 600;
  white-space: nowrap;
}
.rec-photo-preview-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
}
.rec-pv-item {
  position: relative;
  aspect-ratio: 1;
  border-radius: 8px;
  overflow: hidden;
  border: 1.5px solid var(--border);
  background: var(--bg);
}
.rec-pv-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.rec-pv-info {
  position: absolute;
  bottom: 2px;
  left: 2px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 0.6rem;
  padding: 1px 4px;
  border-radius: 4px;
}
.rec-pv-del {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 20px;
  height: 20px;
  background: rgba(220, 38, 38, 0.85);
  color: white;
  border: none;
  border-radius: 50%;
  font-size: 0.6rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (max-width: 600px) {
  .rec-photo-preview-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ラベル */
.rec-label {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 6px;
}
.rec-label i {
  color: var(--primary-lt);
  width: 16px;
  text-align: center;
}

/* 工数入力エリア */
.time-input-area {
  background: var(--bg);
  border-radius: var(--radius-lg);
  padding: 16px;
  border: 1.5px solid var(--border);
}
.time-display-row {
  text-align: center;
  margin-bottom: 14px;
}
.time-display-big {
  font-size: 2.4rem;
  font-weight: 800;
  color: var(--primary-dk);
  line-height: 1;
  letter-spacing: -0.02em;
}

/* クイック工数ボタン */
.time-quick-btns {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}
.time-quick-btn {
  font-size: 0.9rem;
  font-weight: 700;
  padding: 12px 6px;
  border-color: var(--primary-lt) !important;
  color: var(--primary) !important;
  border-radius: var(--radius) !important;
  min-height: 48px;
}
.time-quick-btn:hover,
.time-quick-btn:active {
  background: var(--primary) !important;
  color: white !important;
  border-color: var(--primary) !important;
}
.time-reset-btn {
  grid-column: 1/-1;
  border-color: var(--border) !important;
  color: var(--muted) !important;
  font-size: 0.85rem;
  min-height: 40px;
}
.time-reset-btn:hover {
  background: #f1f5f9 !important;
  color: var(--text) !important;
}

/* 直接入力行 */
.time-manual-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}
.time-manual-row label {
  font-size: 0.82rem;
  color: var(--muted);
  font-weight: 700;
  white-space: nowrap;
}
.inp-minutes {
  width: 100px;
  text-align: center;
  font-size: 1.1rem;
  font-weight: 700;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: 8px 10px;
}

/* ─── 【3】工程カード（実績表示）3列グリッド ─── */
.process-records-list {
  padding: 8px 12px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  align-items: start;
}
@media (max-width: 1100px) {
  .process-records-list {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 680px) {
  .process-records-list {
    grid-template-columns: 1fr;
  }
}

.proc-record-card {
  background: white;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: visible;
  transition:
    border-color var(--ease),
    background var(--ease);
  display: flex;
  flex-direction: column;
  margin-bottom: 6px;
}
.proc-record-card.prc-approved {
  border-color: #86efac;
  background: linear-gradient(135deg, #f0fdf4 0%, #fafffe 100%);
}
.prc-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
}
.prc-num {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--bg);
  border: 2px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 800;
  color: var(--muted);
  flex-shrink: 0;
}
.prc-num-done {
  background: var(--success) !important;
  border-color: var(--success) !important;
  color: white !important;
}
.prc-title-block {
  flex: 1;
  min-width: 0;
}
.prc-name {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 1px;
}
.prc-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
}
.prc-time-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: #f0f9ff;
  color: var(--info);
  border: 1px solid #bae6fd;
  padding: 1px 6px;
  border-radius: 10px;
  font-size: 0.72rem;
  font-weight: 700;
}
.prc-entries-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 0.73rem;
  color: var(--muted);
  font-weight: 600;
}
.prc-approved-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #dcfce7;
  color: var(--success);
  border: 1px solid #86efac;
  padding: 2px 7px;
  border-radius: 10px;
  font-size: 0.75rem;
  font-weight: 700;
}
/* 本数サマリーバッジ（カード上段） */
.prc-count-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: 0 8px 4px;
}
.prc-count-chip {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  background: #fef3c7;
  color: #92400e;
  border: 1px solid #fde68a;
  padding: 1px 5px;
  border-radius: 6px;
  font-size: 0.68rem;
  font-weight: 700;
}
.prc-actions {
  display: flex;
  gap: 4px;
  flex-wrap: nowrap;
  flex-shrink: 0;
  align-items: center;
}
.prc-actions--header {
  margin-top: 0;
}
/* 実績ボタン（ヘッダー右上） */
.prc-btn-rec {
  padding: 3px 8px !important;
  font-size: 0.73rem !important;
  white-space: nowrap;
}
/* 承認バー（実績リスト直下） */
.prc-approve-bar {
  padding: 5px 8px;
  border-top: 1px dashed var(--border);
  background: #f0fdf4;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}
/* 実績未入力ロック状態 */
.prc-approve-bar--locked {
  background: #fefce8;
  border-top: 1px dashed #fde047;
}
.prc-btn-appr-disabled {
  width: 100%;
  padding: 6px 0 !important;
  font-size: 0.8rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: #e5e7eb !important;
  color: #9ca3af !important;
  border: 1px solid #d1d5db !important;
  cursor: not-allowed !important;
}
.prc-approve-hint {
  text-align: center;
  font-size: 0.72rem;
  color: #d97706;
  margin-top: 4px;
  padding: 3px 6px;
  background: #fef9c3;
  border-radius: 6px;
}

.prc-btn-appr-full {
  width: 100%;
  padding: 6px 0 !important;
  font-size: 0.8rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.prc-records {
  border-top: 1px solid var(--border);
  padding: 0 8px;
}
.prc-record-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  padding: 3px 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.78rem;
  min-width: 0;
}
.prc-record-row:last-child {
  border-bottom: none;
}
.prc-rec-worker {
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  flex-shrink: 0;
  max-width: 7em;
  overflow: hidden;
  text-overflow: ellipsis;
}
.prc-rec-time {
  font-weight: 700;
  color: var(--info);
  white-space: nowrap;
  background: #f0f9ff;
  border: 1px solid #bae6fd;
  border-radius: 8px;
  padding: 2px 7px;
  font-size: 0.78rem;
  flex-shrink: 0;
}
.prc-rec-comment {
  display: none;
}
/* 実績コメント表示行（コメントがある場合のみレンダリング） */
.prc-rec-comment-text {
  flex-basis: 100%; /* 必ず改行して新行に表示 */
  font-size: 0.75rem;
  color: var(--muted);
  padding: 2px 0 2px 2px;
  word-break: break-word;
  overflow-wrap: anywhere;
  white-space: pre-wrap; /* 改行を保持 */
  line-height: 1.4;
}
.prc-rec-comment-text i {
  color: var(--primary-lt);
  font-size: 0.7rem;
  margin-right: 3px;
}
.prc-rec-date {
  white-space: nowrap;
  flex-shrink: 0;
  font-size: 0.72rem;
  color: var(--muted);
}
.prc-empty {
  padding: 14px;
  text-align: center;
  color: var(--muted);
  font-size: 0.84rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
/* コンパクト版（承認バーがある場合） */
.prc-empty-compact {
  padding: 6px 8px;
  color: var(--muted);
  font-size: 0.78rem;
  display: flex;
  align-items: center;
  gap: 6px;
  border-top: 1px solid var(--border);
}
.prc-more {
  padding: 6px 14px;
  font-size: 0.77rem;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 6px;
}
/* 工程写真サムネイル */
.prc-process-photos {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  padding: 8px 14px 12px;
  border-top: 1px solid var(--border);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  overflow: hidden;
  background: inherit;
}
.prc-process-photo {
  width: 56px;
  height: 56px;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border);
  cursor: zoom-in;
  flex-shrink: 0;
}
.prc-process-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--ease);
}
.prc-process-photo:hover img {
  transform: scale(1.08);
}
/* 工程別チェックフィールド */
.prc-check-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border-top: 1px dashed var(--border);
  background: #fafafa;
  font-size: 0.82rem;
  flex-wrap: wrap;
}
.prc-check-label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
}
.prc-check-label input[type="checkbox"] {
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: var(--success);
}
.prc-count-input-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 8px 14px;
  border-top: 1px dashed var(--border);
  background: #fafafa;
}
.prc-count-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
}
.prc-count-inp {
  width: 64px;
  padding: 3px 6px;
  border: 1.5px solid var(--border);
  border-radius: 6px;
  font-size: 0.82rem;
  text-align: center;
}

/* 不具合写真閲覧エリア */
.defect-photos-view {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #fecdd3;
}
.defect-view-card {
  background: #fff1f2;
  border: 1px solid #fecdd3;
  border-radius: var(--radius);
  padding: 14px;
}

/* ─── 【1】添付資料リスト ─── */
.doc-list {
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.doc-item-info {
  flex: 1;
  min-width: 0;
}
.doc-item-name {
  font-weight: 700;
  font-size: 0.93rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.doc-item-meta {
  font-size: 0.78rem;
  color: var(--muted);
  margin-top: 2px;
}

/* ─── txt-info ─── */
.txt-info {
  color: var(--info);
}

/* ─── 詳細セクションの全幅カード（上部の定義と重複 / CSSは上位定義のみ有効） ─── */

/* ─── prc-record-rowのレスポンシブ ─── */
@media (max-width: 640px) {
  .prc-record-row {
    flex-wrap: wrap;
  }
  .prc-rec-comment {
    flex-basis: 100%;
  }
  .prc-rec-date {
    flex-basis: 100%;
    text-align: right;
  }
  .time-quick-btns {
    grid-template-columns: repeat(2, 1fr);
  }
  .time-reset-btn {
    grid-column: 1/-1;
  }
}

/* ════════════════════════════════════════════════
   【1】不具合報告カード・確認チェック v5.0
   ════════════════════════════════════════════════ */
.defect-report-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 14px;
}
.defect-report-card {
  background: white;
  border: 1.5px solid #fecdd3;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.defect-report-card.defect-legacy {
  border-color: var(--border);
  opacity: 0.85;
}
.drc-header {
  background: #fff1f2;
  padding: 12px 16px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  border-bottom: 1px solid #fecdd3;
}
.drc-project-info {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 0.9rem;
}
.drc-status-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

/* 確認チェックバッジ */
.check-badge {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
  background: #f0fdf4;
  color: var(--success);
  border: 1px solid #86efac;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 0.82rem;
  font-weight: 700;
}
.check-badge.check-done {
  cursor: default;
}
.check-detail {
  font-size: 0.73rem;
  font-weight: 400;
  color: var(--muted);
  display: block;
  width: 100%;
}
.check-btn-sup {
  background: #eff6ff;
  color: #1d4ed8;
  border: 1.5px solid #93c5fd;
  border-radius: 20px;
  font-size: 0.82rem;
  font-weight: 700;
  padding: 7px 14px;
  cursor: pointer;
  transition: all var(--ease);
  min-height: 40px;
}
.check-btn-sup:hover {
  background: #1d4ed8;
  color: white;
}
.check-btn-sales {
  background: #fefce8;
  color: #854d0e;
  border: 1.5px solid #fde68a;
  border-radius: 20px;
  font-size: 0.82rem;
  font-weight: 700;
  padding: 7px 14px;
  cursor: pointer;
  transition: all var(--ease);
  min-height: 40px;
}
.check-btn-sales:hover {
  background: #854d0e;
  color: white;
}

.drc-body {
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.drc-row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.drc-label {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--muted);
  min-width: 80px;
  flex-shrink: 0;
  margin-top: 2px;
}
.drc-val {
  font-size: 0.92rem;
  flex: 1;
}
.drc-content .drc-val {
  line-height: 1.7;
}
.drc-foot {
  padding: 10px 16px;
  border-top: 1px solid var(--border);
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

/* 不具合報告リンクボタン */
.btn-danger-outline {
  background: white;
  color: var(--danger);
  border: 1.5px solid var(--danger);
  border-radius: 20px;
  padding: 6px 14px;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  transition: all var(--ease);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 36px;
}
.btn-danger-outline:hover {
  background: var(--danger);
  color: white;
}

/* ════════════════════════════════════════════════
   【2】作業時間報告ページ v5.0
   ════════════════════════════════════════════════ */

/* タグフィルターバー */
.wr-tags-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 14px 16px;
  background: white;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  margin-bottom: 14px;
}
.wr-tag-btn {
  padding: 8px 16px;
  border: 2px solid var(--border);
  border-radius: 20px;
  background: white;
  font-family: inherit;
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
  transition: all var(--ease);
  color: var(--muted);
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  min-height: 42px;
}
.wr-tag-btn:hover {
  border-color: var(--primary-lt);
  color: var(--primary);
}
.wr-tag-btn.active {
  background: var(--primary);
  border-color: var(--primary);
  color: white;
}

/* 案件カード一覧 */
.wr-cards {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.wr-card {
  background: white;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
  transition:
    border-color var(--ease),
    box-shadow var(--ease);
}
.wr-card:hover {
  border-color: var(--primary-lt);
  box-shadow: var(--shadow-md);
}
.wr-card.wr-card-overdue {
  border-color: #fca5a5;
  background: #fff5f5;
}
.wr-card-header {
  padding: 14px 16px;
}
.wr-card-info {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.wr-card-title {
  margin-bottom: 6px;
}
.wr-card-customer {
  font-size: 0.9rem;
  color: var(--muted);
  font-weight: 600;
}
.wr-card-mold {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--text);
}
.wr-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 8px;
}
.wr-total-time {
  font-size: 0.88rem;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 5px;
}
.wr-total-time strong {
  color: var(--primary-dk);
}
.wr-card-actions {
  padding: 0 14px 14px;
}

/* 作業時間報告入力モーダル */
.modal-workrec-box {
  max-width: 640px;
}
.wr-modal-proj-name {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--primary-dk);
  background: var(--bg);
  border-radius: var(--radius);
  padding: 10px 14px;
  margin-bottom: 14px;
  border-left: 3px solid var(--primary);
}

/* 10枚写真グリッド */
.wr-photo-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  margin-top: 8px;
}
@media (max-width: 540px) {
  .wr-photo-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
  }
}

/* ─── 資料プレビューヒント【4】 ─── */
.doc-item-preview-hint {
  font-size: 0.75rem;
  color: var(--info);
  margin-left: auto;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 3px;
  flex-shrink: 0;
}

/* ════════════════════════════════════════════════
   【v5.1 追加スタイル】
   ════════════════════════════════════════════════ */

/* ─── 工程実績入力 写真グリッド（10枚対応） ─── */
.rec-photo-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  margin-top: 8px;
}
@media (max-width: 640px) {
  .rec-photo-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
  }
}
@media (max-width: 400px) {
  .rec-photo-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 5px;
  }
}

/* ─── 業務タグ カラー版 ─── */
.work-tag-colored {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  margin: 2px;
  border: 1px solid transparent;
}

/* ─── マスター管理 カラーピッカー ─── */
.color-pick-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 10px 14px;
  background: var(--bg);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
}
.inp-color-pick {
  width: 44px;
  height: 44px;
  border: 2px solid var(--border);
  border-radius: 8px;
  padding: 2px;
  background: white;
  cursor: pointer;
  flex-shrink: 0;
}
.inp-color-pick::-webkit-color-swatch-wrapper {
  padding: 0;
}
.inp-color-pick::-webkit-color-swatch {
  border: none;
  border-radius: 5px;
}
.color-pick-preview {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 90px;
  padding: 5px 12px;
  border-radius: 6px;
  font-size: 0.82rem;
  font-weight: 600;
  border: 1.5px solid rgba(0, 0, 0, 0.1);
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  transition: background var(--ease);
}
.master-color-swatch {
  display: inline-block;
  width: 16px;
  height: 16px;
  border-radius: 4px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  vertical-align: middle;
  margin-right: 4px;
  flex-shrink: 0;
}

/* ══════════════════════════════════
   カラーピッカー UI（業務タグ用）
   ══════════════════════════════════ */

/* プリセットパレット グリッド */
.color-preset-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 14px;
  background: var(--bg);
  border: 1.5px solid var(--border);
  border-radius: var(--radius) var(--radius) 0 0;
  border-bottom: none;
}

/* 各カラーボタン */
.color-preset-btn {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: 2.5px solid transparent;
  cursor: pointer;
  transition:
    transform 0.12s,
    box-shadow 0.12s,
    border-color 0.12s;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  flex-shrink: 0;
  position: relative;
}
.color-preset-btn:hover {
  transform: scale(1.15);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25);
}
.color-preset-btn.selected {
  border-color: white;
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.35);
  transform: scale(1.1);
}

/* 選択済みチェックアイコン */
.color-preset-check {
  color: white;
  font-size: 0.85rem;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  pointer-events: none;
}

/* プレビュー＋カスタム＋クリア行 */
.color-custom-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--bg);
  border: 1.5px solid var(--border);
  border-radius: 0 0 var(--radius) var(--radius);
  flex-wrap: wrap;
}

/* カスタムカラーラベル（クリックでネイティブピッカー起動） */
.color-custom-label {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1.5px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.12s;
  white-space: nowrap;
}
.color-custom-label:hover {
  border-color: var(--primary);
  color: var(--primary);
}

/* クリアボタン */
.color-clear-btn {
  margin-left: auto;
  white-space: nowrap;
}

/* カスタム色「登録」ボタン */
.color-save-btn {
  background: var(--primary);
  color: white;
  border: none;
  white-space: nowrap;
}
.color-save-btn:hover {
  background: var(--primary-dk);
}

/* 登録済みカスタム色セクション */
.custom-colors-label {
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--muted);
  padding: 6px 2px 4px;
}
#custom-colors-wrap {
  margin-top: 4px;
}
/* カスタム色ボタンの削除バッジ */
.custom-color-del {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #1e293b;
  color: white;
  font-size: 10px;
  line-height: 16px;
  text-align: center;
  cursor: pointer;
  display: none;
  z-index: 2;
}
.custom-color-btn:hover .custom-color-del {
  display: block;
}

/* プレビュー（現在選択色の表示） */
#mf-tag_color_preview.color-pick-preview {
  min-width: 110px;
  font-size: 0.82rem;
  font-weight: 700;
}

@media (max-width: 480px) {
  .color-preset-btn {
    width: 32px;
    height: 32px;
  }
  .color-preset-grid {
    gap: 6px;
    padding: 10px;
  }
}

/* ─── 溶接条件 予熱/後熱 - toggle-lbl幅をリセット＋タッチ最適化 ─── */
.weld-heat-item .toggle-lbl {
  width: auto; /* weld-heat-item内ではauto幅 */
  display: inline-flex;
  gap: 10px;
  min-height: 44px; /* タッチターゲット確保 */
  align-items: center;
}
/* weld-heat-item内のtoggle-lblは横スクロールさせず折り返す */
.weld-heat-item .temp-inp-wrap {
  margin-top: 10px;
}

/* ─── 処理/外注 proc-block セレクト幅修正 ─── */
.proc-detail select,
.proc-detail input[type="date"] {
  width: 100%;
  min-height: 44px;
  font-size: 1rem;
  padding: 8px 12px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  background: white;
  box-sizing: border-box;
}
.proc-detail select:focus,
.proc-detail input[type="date"]:focus {
  outline: none;
  border-color: var(--primary-lt);
  box-shadow: 0 0 0 3px rgba(155, 43, 86, 0.12);
}

/* ─── 溶接条件 セクション間の余白 ─── */
#welding-section {
  border-radius: var(--radius);
  background: #fff8fa;
  border: 1.5px solid #f9a8c9;
  margin-bottom: 16px;
}
#welding-section + .form-section {
  margin-top: 0;
}

/* ─── 処理・外注 proc-block 間の余白 ─── */
.proc-block + .proc-block {
  margin-top: 14px;
}
.proc-block .toggle-lbl {
  /* proc-block内ではfull幅を維持 */
  width: 100%;
}

/* ─── 不具合一覧：カウントバー ─── */
.defect-count-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  padding: 12px 14px;
  background: white;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  margin-bottom: 14px;
}
.defect-count-label-wrap {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
.defect-stats {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}
.dstat-pending {
  font-size: 0.82rem;
  color: var(--warning);
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 4px;
}
.dstat-done {
  font-size: 0.82rem;
  color: var(--success);
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* ─── 不具合報告カード：確認ボタン行 ─── */
.drc-check-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 10px 16px;
  background: #fffbeb;
  border-top: 1px solid #fde68a;
}
.drc-check-row .btn-touch {
  min-height: 48px;
  font-size: 0.9rem;
  padding: 10px 18px;
  border-radius: 24px;
  flex: 1;
  min-width: 140px;
}

/* 完了バッジ */
.drc-complete-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #dcfce7;
  color: var(--success);
  border: 1px solid #86efac;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 0.78rem;
  font-weight: 700;
}
/* 全確認済カードの強調 */
.defect-report-card.drc-all-checked {
  border-color: #86efac;
}
.defect-report-card.drc-all-checked .drc-header {
  background: #f0fdf4;
  border-bottom-color: #bbf7d0;
}
.defect-report-card.drc-all-checked .drc-check-row {
  background: #f0fdf4;
  border-top-color: #bbf7d0;
}

/* ─── 不具合写真（カード内） ─── */
.drc-photos {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 6px;
}
.drc-photo {
  width: 80px;
  height: 80px;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1.5px solid var(--border);
  cursor: zoom-in;
  flex-shrink: 0;
  transition: box-shadow var(--ease);
}
.drc-photo:hover {
  box-shadow: var(--shadow-md);
}
.drc-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (max-width: 540px) {
  .drc-photo {
    width: 70px;
    height: 70px;
  }
}

/* ─── 作業時間報告：工程別一覧 ─── */
.wr-perwork-list {
  border-top: 1px solid var(--border);
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: #f8fafc;
}
.wr-perwork-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: white;
  border-radius: var(--radius);
  border: 1px solid var(--border);
}
.wr-perwork-name {
  flex: 1;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wr-perwork-time {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--info);
  background: #f0f9ff;
  border: 1px solid #bae6fd;
  border-radius: 8px;
  padding: 2px 8px;
  white-space: nowrap;
}
.wr-perwork-row .btn {
  white-space: nowrap;
}

/* ─── 溶接条件 タッチ最適化 ─── */
.weld-heat-item {
  min-height: auto;
}
/* .weld-heat-item .toggle-lbl は v5.1追加スタイルセクションに統合済み */
.toggle-slider {
  flex-shrink: 0;
}
.toggle-label-text {
  font-size: 0.95rem;
  user-select: none;
}

/* ─── 処理・外注トグル タッチ最適化 ─── */
.proc-toggle-row .toggle-lbl,
.outsrc-toggle-row .toggle-lbl {
  gap: 10px;
  min-height: 44px;
  align-items: center;
}

/* ─── ステータス変更ボタン タブレット最適化 ─── */
.status-sel-btn {
  min-height: 48px;
  font-size: 0.92rem;
  padding: 10px 16px;
}
@media (max-width: 640px) {
  .status-selector {
    gap: 6px;
  }
  .status-sel-btn {
    min-height: 52px;
    flex: 1;
    min-width: calc(50% - 8px);
    justify-content: center;
  }
}

/* ─── 案件詳細：ボタン類の最適化 ─── */
.dsc-head .btn-touch {
  min-height: 44px;
}

/* ─── 添付資料：プレビューヒント改善 ─── */
.doc-item {
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  background: white;
  cursor: pointer;
  transition:
    border-color var(--ease),
    box-shadow var(--ease);
  margin-bottom: 8px;
  min-height: 56px;
}
.doc-item:hover,
.doc-item:active {
  border-color: var(--primary-lt);
  box-shadow: var(--shadow-md);
}
.doc-item-icon {
  font-size: 1.5rem;
  flex-shrink: 0;
}

/* ─── work-tag-done → 上部（line 338付近）に定義済み、opacity追加のみ ─── */
.work-tag-done {
  opacity: 0.8;
}

/* ─── タブレット向けフォームレイアウト (≤900px) ─── */
@media (max-width: 900px) {
  .detail-cols {
    grid-template-columns: 1fr;
  }
  .detail-section-card.full {
    grid-column: 1;
  }
  .defect-form-grid {
    grid-template-columns: 1fr;
  }
  .wr-perwork-row {
    flex-wrap: wrap;
  }
  .wr-perwork-name {
    min-width: 0;
    flex-basis: 100%;
  }
  .wr-perwork-time {
    margin-left: auto;
  }
}

/* ─── スマートフォン向け (≤540px) ─── */
@media (max-width: 540px) {
  .drc-check-row {
    flex-direction: column;
  }
  .drc-check-row .btn-touch {
    min-width: unset;
  }
  .wr-perwork-row {
    gap: 6px;
  }
  .check-btn-sup,
  .check-btn-sales {
    min-height: 52px;
    font-size: 0.88rem;
  }
  .status-sel-btn {
    font-size: 0.85rem;
    padding: 8px 10px;
  }
}

/* ════════════════════════════════════════════════
   【v5.3】追加スタイル
   ════════════════════════════════════════════════ */

/* ─── 案件詳細ヘッダー 強化版 ─── */
.detail-customer-name {
  font-size: 1rem;
  font-weight: 700;
  color: var(--muted);
  margin-bottom: 3px;
  letter-spacing: 0.01em;
}
.detail-mold-name {
  font-size: 2rem;
  font-weight: 900;
  color: var(--primary-dk);
  line-height: 1.2;
  margin-bottom: 10px;
  letter-spacing: -0.01em;
}

/* ─── 不具合報告カード 拡大レイアウト ─── */
.defect-report-card {
  background: white;
  border-radius: var(--radius-lg);
  border: 1.5px solid var(--border);
  box-shadow: var(--shadow);
  margin-bottom: 18px;
  overflow: hidden;
  transition: box-shadow 0.2s;
}
.defect-report-card:hover {
  box-shadow: var(--shadow-md);
}
.drc-all-checked {
  border-color: #86efac;
  background: #f0fdf4;
}
.defect-report-card .drc-header {
  padding: 14px 18px 12px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.drc-project-info {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  flex: 1;
}
.drc-customer-name {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--text);
}
.drc-mold-name {
  font-size: 0.88rem;
  color: var(--muted);
  font-weight: 600;
}
.drc-meta {
  font-size: 0.78rem;
  color: var(--muted);
  white-space: nowrap;
}
.drc-pending-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #fef9c3;
  color: #854d0e;
  border: 1px solid #fde047;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 0.78rem;
  font-weight: 700;
}

/* 本文：内容＋写真 横並び */
.drc-content-layout {
  display: grid;
  grid-template-columns: 1fr 200px;
  gap: 0;
}
.drc-content-info {
  padding: 16px 18px;
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.drc-info-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.drc-info-label {
  font-size: 0.77rem;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  display: flex;
  align-items: center;
  gap: 5px;
}
.drc-info-label i {
  width: 12px;
  text-align: center;
  color: var(--info);
}
.drc-info-val {
  font-size: 0.95rem;
  color: var(--text);
  font-weight: 500;
}
.drc-info-process {
  font-size: 1rem;
  font-weight: 700;
  color: var(--primary-dk);
  background: #fdf2f6;
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 8px;
  border: 1px solid #f9a8c9;
  align-self: flex-start;
}
.drc-content-text {
  font-size: 0.95rem;
  line-height: 1.7;
  white-space: pre-wrap;
  color: var(--text);
  background: #f8fafc;
  padding: 10px 12px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  min-height: 60px;
}
.drc-info-reporter {
  margin-top: auto;
}

/* 写真エリア */
.drc-content-photos {
  padding: 12px;
  background: #f8fafc;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  justify-content: flex-start;
}
.drc-photos-lg {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}
.drc-photo-lg {
  position: relative;
  width: 100%;
  border-radius: var(--radius);
  overflow: hidden;
  cursor: pointer;
  border: 1.5px solid var(--border);
  aspect-ratio: 4/3;
}
.drc-photo-lg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.drc-photo-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 1.5rem;
  opacity: 0;
  transition: all 0.2s;
}
.drc-photo-lg:hover .drc-photo-overlay {
  background: rgba(0, 0, 0, 0.35);
  opacity: 1;
}
.drc-no-photo {
  font-size: 0.82rem;
  color: var(--muted);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 20px 10px;
}
.drc-no-photo i {
  font-size: 2rem;
  opacity: 0.4;
}

/* 確認チェックエリア */
.drc-confirm-area {
  padding: 14px 18px;
  background: #fffbeb;
  border-top: 1px solid #fde68a;
}
.drc-confirm-title {
  font-size: 0.82rem;
  font-weight: 800;
  color: #92400e;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.drc-confirm-title i {
  color: #d97706;
}
.drc-confirm-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
/* 確認済みバッジ */
.drc-check-badge {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: var(--radius);
  border: 1.5px solid;
}
.drc-check-sup-done {
  background: #ecfdf5;
  border-color: #6ee7b7;
  color: #065f46;
}
.drc-check-sales-done {
  background: #eff6ff;
  border-color: #93c5fd;
  color: #1e40af;
}
.drc-check-viewer-done {
  background: #faf5ff;
  border-color: #c4b5fd;
  color: #5b21b6;
}
.drc-check-btn-viewer {
  background: #fafafa;
  border-color: #c4b5fd !important;
}
.drc-check-btn-viewer:not(:disabled):hover {
  background: #f5f3ff;
}
.drc-check-badge > i {
  font-size: 1.4rem;
  flex-shrink: 0;
}
.drc-check-badge-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.drc-check-badge-title {
  font-size: 0.88rem;
  font-weight: 800;
}
.drc-check-badge-detail {
  font-size: 0.77rem;
  opacity: 0.8;
}
/* 確認ボタン (フル幅) */
.drc-check-btn-full {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: var(--radius);
  text-align: left;
}
.drc-check-btn-full > i:first-child {
  font-size: 1.4rem;
  flex-shrink: 0;
}
.drc-btn-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.drc-btn-title {
  font-size: 0.88rem;
  font-weight: 800;
}
.drc-btn-sub {
  font-size: 0.74rem;
  opacity: 0.8;
  font-weight: 400;
}
.drc-lock-icon {
  font-size: 0.85rem;
  opacity: 0.6;
  flex-shrink: 0;
}
.drc-arrow-icon {
  font-size: 0.9rem;
  opacity: 0.5;
  flex-shrink: 0;
}
.drc-check-btn-full:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* 閲覧確認者セクション */
.drc-viewers-section {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid #fde68a;
}
.drc-viewers-title {
  font-size: 0.78rem;
  font-weight: 700;
  color: #92400e;
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 8px;
}
.drc-viewers-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.drc-viewer-check {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 8px;
  background: #f8fafc;
  border: 1px solid var(--border);
  font-size: 0.82rem;
}
.drc-viewer-done {
  background: #ecfdf5;
  border-color: #6ee7b7;
  color: #065f46;
}
.drc-viewer-me {
  background: #eff6ff;
  border-color: #93c5fd;
}
.drc-viewer-check > i {
  flex-shrink: 0;
}
.drc-viewer-check > span:first-of-type {
  flex: 1;
  font-weight: 600;
}
.drc-check-time {
  font-size: 0.73rem;
  opacity: 0.75;
  white-space: nowrap;
}
.drc-viewer-comment {
  font-size: 0.76rem;
  color: #64748b;
  font-style: italic;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 160px;
}
/* 編集アクション */
.drc-edit-actions {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px dashed #fde68a;
}

/* 不具合カード：上部「案件詳細」リンクバー */
.drc-proj-link-bar {
  padding: 6px 12px;
  display: flex;
  justify-content: flex-end;
  background: #f1f5f9;
  border-bottom: 1px solid var(--border);
  border-radius: 8px 8px 0 0;
}
.drc-proj-link-btn {
  font-size: 0.78rem;
  padding: 3px 10px;
  height: 28px;
  color: var(--primary);
  border-color: var(--primary);
}
.drc-proj-link-btn:hover {
  background: var(--primary);
  color: #fff;
}

/* 不具合カードフッター（ボタン移動後は空でも残す） */
.drc-foot {
  padding: 4px 18px;
  border-top: 1px solid var(--border);
  background: #f8fafc;
}

/* ─── タブレット：不具合カードレイアウト調整 ─── */
@media (max-width: 768px) {
  .drc-content-layout {
    grid-template-columns: 1fr;
  }
  .drc-content-info {
    border-right: none;
    border-bottom: 1px solid var(--border);
  }
  .drc-content-photos {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-start;
  }
  .drc-photos-lg {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
  }
  .drc-photo-lg {
    width: 120px;
    height: 90px;
    aspect-ratio: unset;
  }
  .drc-confirm-row {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 480px) {
  .drc-confirm-row {
    grid-template-columns: 1fr;
  }
  .drc-check-btn-full {
    min-height: 56px;
  }
  .drc-mold-name,
  .drc-customer-name {
    font-size: 0.9rem;
  }
}

/* ─── 溶接条件セクション 最終修正 ─── */
/* welding-section が form-section の中にある場合のみ余白 */
.form-card .form-section#welding-section {
  padding: 20px 24px;
}
/* weld-heat-group 内でトグルが全幅を取らないように */
.weld-heat-item .toggle-lbl {
  width: fit-content !important;
  min-width: 220px;
  max-width: 100%;
}

/* ═══════════════════════════════════════════════════
   【v6.0】追加スタイル
   ═══════════════════════════════════════════════════ */

/* ─── 【1】ソートUI ─── */
.sortable-th {
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  transition: background 0.15s;
}
.sortable-th:hover {
  background: rgba(0, 0, 0, 0.05);
}
.sort-icon-neutral {
  opacity: 0.3;
  font-size: 0.75rem;
  margin-left: 4px;
}
.sort-icon-active {
  opacity: 1;
  font-size: 0.75rem;
  margin-left: 4px;
  color: var(--primary);
}

/* ─── 【3】作業時間報告 次工程タグ強調 ─── */
.wr-tag-next {
  box-shadow: 0 0 0 2px currentColor;
  font-weight: 800 !important;
}
.wr-tag-pending {
  opacity: 0.55;
}

/* ─── 【4】印刷スタイル（完全リデザイン） ─── */
@media print {
  body > *:not(#print-area) {
    display: none !important;
  }
  .print-area {
    display: block !important;
  }

  .print-page {
    width: 210mm;
    min-height: 297mm;
    padding: 12mm 14mm;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 9.5pt;
    color: #000;
    box-sizing: border-box;
  }

  /* ヘッダー */
  .print-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 6mm;
    border-bottom: 2.5px solid #000;
    padding-bottom: 3mm;
    gap: 8mm;
  }
  .print-logo {
    font-size: 13pt;
    font-weight: 800;
    flex-shrink: 0;
  }
  .print-center-block {
    flex: 1;
    text-align: center;
  }
  .print-title {
    font-size: 20pt;
    font-weight: 900;
    letter-spacing: 0.05em;
  }
  /* 顧客名・金型名 最大強調 */
  .print-names-row {
    margin-top: 2mm;
    line-height: 1.25;
  }
  .print-customer-name {
    display: block;
    font-size: 14pt;
    font-weight: 800;
    color: #1a1a1a;
    letter-spacing: 0.04em;
    margin-bottom: 1.5mm;
  }
  .print-names-sep {
    display: none;
  }
  .print-mold-name {
    display: block;
    font-size: 22pt;
    font-weight: 900;
    color: #000;
    letter-spacing: 0.02em;
    line-height: 1.15;
  }
  .print-number {
    font-size: 11pt;
    font-weight: 700;
    text-align: right;
    flex-shrink: 0;
  }

  /* 業務内容（大きく） */
  .print-business-section {
    margin-bottom: 5mm;
    padding: 4mm 5mm;
    border: 2px solid #333;
    border-radius: 3mm;
    background: #f8f8f8;
  }
  .print-section-label {
    font-size: 8pt;
    font-weight: 800;
    color: #555;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 2mm;
  }
  .print-business-value {
    font-size: 14pt;
    font-weight: 800;
    color: #000;
    line-height: 1.4;
  }

  /* 情報グリッド（3列） */
  .print-info-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3mm;
    margin-bottom: 5mm;
  }
  .print-info-item {
    border: 1px solid #ccc;
    padding: 2.5mm;
  }
  .print-info-label {
    font-size: 7.5pt;
    color: #666;
    font-weight: 700;
    margin-bottom: 0.5mm;
  }
  .print-info-value {
    font-size: 9.5pt;
    font-weight: 700;
  }

  /* 納期・顧客名・金型名 グリッドセル 強調 */
  .print-info-big .print-info-label {
    font-size: 8pt;
    color: #555;
    font-weight: 800;
  }
  .print-info-big .print-info-value {
    font-size: 13pt;
    font-weight: 900;
    color: #000;
  }
  .print-info-duedate .print-info-value {
    font-size: 16pt !important;
    font-weight: 900 !important;
    color: #c53030 !important;
    letter-spacing: 0.04em;
  }
  .print-info-duedate {
    border: 2.5px solid #e53e3e !important;
    background: #fff8f8 !important;
  }

  /* 予熱・後熱の赤枠強調（スクリーンプレビュー共通） */
  .print-heat-warn {
    border: 4px solid #c53030 !important;
    background: #fff0f0 !important;
    padding: 3mm !important;
  }
  .print-heat-warn .print-info-label {
    color: #991b1b !important;
    font-size: 8pt;
    font-weight: 800;
  }
  .print-heat-warn .print-info-value {
    color: #991b1b !important;
    font-size: 11pt;
    font-weight: 900;
  }
  .print-heat-icon {
    margin-right: 2mm;
    color: #c53030;
    font-weight: 900;
  }

  /* 写真 + QR 横並び */
  .print-photo-qr-row {
    display: flex;
    gap: 6mm;
    align-items: flex-start;
    margin-bottom: 5mm;
  }
  /* 写真カラム（左60〜70%） */
  .print-photos-col {
    flex: 1 1 62%;
    min-width: 0;
  }
  .print-photos-label {
    font-size: 8pt;
    font-weight: 800;
    color: #555;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 2mm;
    display: flex;
    align-items: center;
    gap: 3mm;
  }
  .print-photo-count-badge {
    font-size: 7.5pt;
    font-weight: 700;
    color: #1d4ed8;
    background: #eff6ff;
    border: 1px solid #93c5fd;
    border-radius: 10px;
    padding: 0 4px;
  }
  /* 写真グリッド：2列、枚数に応じて自動的に行が増える */
  .print-photos-area {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 3mm;
  }
  /* 写真1枚ラッパー */
  .print-photo-wrap {
    display: flex;
    flex-direction: column;
    gap: 1mm;
  }
  .print-photo {
    width: 100%;
    aspect-ratio: 4/3;
    object-fit: cover;
    border: 1px solid #ccc;
    display: block;
  }
  .print-photo-cap {
    font-size: 6.5pt;
    color: #666;
    text-align: center;
    line-height: 1.3;
    word-break: break-all;
  }
  .print-no-photo {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    aspect-ratio: 4/3;
    border: 1px dashed #ccc;
    color: #aaa;
    font-size: 9pt;
    gap: 3mm;
  }
  .print-qr-area {
    flex: 0 0 auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3mm;
  }
  .print-qr-label {
    font-size: 8pt;
    color: #666;
    line-height: 1.4;
    text-align: center;
  }

  /* コメント欄 */
  .print-comment-section {
    margin-bottom: 5mm;
  }
  .print-comment-title {
    font-size: 9.5pt;
    font-weight: 700;
    margin-bottom: 2mm;
  }
  .print-comment-line {
    height: 9mm;
    border-bottom: 1px solid #ccc;
    margin-bottom: 1mm;
  }

  /* フッター */
  .print-footer {
    margin-top: 5mm;
    font-size: 7.5pt;
    color: #888;
    text-align: right;
    border-top: 1px solid #ddd;
    padding-top: 2mm;
  }
}

/* ─── 【5】案件詳細ヘッダー最終修正 ─── */
.detail-header-card {
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: 18px 20px;
  margin-bottom: 16px;
}
@media (max-width: 480px) {
  .detail-header-card {
    padding: 14px 12px;
  }
}
/* ヘッダー内：テキスト左 / 写真右 の横並びレイアウト */
.detail-header-main {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 10px;
}
.detail-title-block {
  flex: 1;
  min-width: 0;
}
/* 案件写真 ヘッダー右側（最大2枚） */
.detail-header-photos {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}
.detail-header-photo-wrap {
  width: 120px;
  height: 90px;
  border-radius: 8px;
  overflow: hidden;
  border: 2px solid var(--border);
  cursor: pointer;
  transition:
    transform 0.15s,
    box-shadow 0.15s;
  background: #f1f5f9;
}
.detail-header-photo-wrap:hover {
  transform: scale(1.04);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
}
.detail-header-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* スマホでは写真を下に移動 */
@media (max-width: 600px) {
  .detail-header-main {
    flex-direction: column;
    gap: 10px;
  }
  .detail-header-photos {
    width: 100%;
    justify-content: flex-start;
  }
  .detail-header-photo-wrap {
    width: 100px;
    height: 75px;
  }
}
.detail-customer-name {
  font-size: 0.88rem;
  color: var(--muted);
  font-weight: 600;
  letter-spacing: 0.02em;
  margin-bottom: 2px;
}
.detail-mold-name {
  font-size: 1.55rem;
  font-weight: 900;
  color: var(--text);
  line-height: 1.2;
  margin-bottom: 6px;
}
.detail-sub-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.detail-sub-row .project-num-sm {
  font-size: 0.78rem;
  color: var(--muted);
  background: var(--bg-sub);
  padding: 2px 8px;
  border-radius: 6px;
  border: 1px solid var(--border);
}

/* ─── 【5】溶接条件セクション 最終確定 ─── */
.weld-heat-group {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 12px;
}
.weld-heat-item {
  flex: 1;
  min-width: 200px;
  background: #fff5f5;
  border: 1.5px solid #fca5a5;
  border-radius: var(--radius);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.weld-heat-label {
  font-size: 0.78rem;
  font-weight: 800;
  color: #b91c1c;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
/* toggle-lbl は行内に収める */
.weld-heat-item .toggle-lbl {
  display: inline-flex !important;
  width: auto !important;
  min-width: unset !important;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  background: #fff;
  cursor: pointer;
}
.weld-heat-item .toggle-lbl:hover {
  border-color: var(--primary);
}
.temp-inp-wrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 6px;
  border-top: 1px dashed #fca5a5;
  animation: fadeIn 0.2s ease;
}
.inp-temp {
  width: 100%;
  max-width: 220px;
  padding: 10px 14px;
  font-size: 1rem;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  background: #fff;
}

/* ─── 【5】処理・外注トグルセクション ─── */
.proc-block {
  background: #f8fafc;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 12px;
}
.proc-toggle-row,
.outsrc-toggle-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 0;
}
.proc-toggle-row .toggle-lbl,
.outsrc-toggle-row .toggle-lbl {
  display: inline-flex !important;
  width: auto !important;
  min-width: unset !important;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  background: #fff;
  cursor: pointer;
}
.proc-detail,
.outsrc-detail {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed var(--border);
  display: flex;
  flex-direction: column;
  gap: 10px;
  animation: fadeIn 0.2s ease;
}
.proc-detail select,
.outsrc-detail select,
.proc-detail input,
.outsrc-detail input {
  width: 100%;
  min-height: 44px;
  font-size: 1rem;
  padding: 8px 12px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  background: #fff;
  box-sizing: border-box;
}
.proc-detail-label,
.outsrc-detail-label {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--muted);
  margin-bottom: 3px;
  display: block;
}

/* ═══════════════════════════════════════════════════
   【v6.1】追加スタイル — 作業飛ばし防止 UI + 印刷改善
   ═══════════════════════════════════════════════════ */

/* ─── 作業時間報告：現在の工程行 ─── */
.wr-perwork-current {
  background: #eff6ff;
  border: 1.5px solid #93c5fd;
  border-radius: var(--radius);
  padding: 10px 12px;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.wr-perwork-step-badge {
  width: 100%;
  font-size: 0.72rem;
  font-weight: 800;
  color: #1d4ed8;
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 2px;
}
/* ─── 作業時間報告：待機中（前工程未完了）行 ─── */
.wr-perwork-waiting {
  background: #f8fafc;
  border: 1.5px dashed #cbd5e1;
  border-radius: var(--radius);
  padding: 8px 12px;
  opacity: 0.65;
  align-items: center;
  gap: 8px;
}
.wr-perwork-wait-icon {
  color: #94a3b8;
  font-size: 0.9rem;
  flex-shrink: 0;
}
.wr-perwork-name-muted {
  color: #94a3b8 !important;
  text-decoration: line-through;
}
.wr-perwork-wait-label {
  font-size: 0.75rem;
  color: #94a3b8;
  font-style: italic;
  margin-left: auto;
  white-space: nowrap;
}

/* ─── 予熱・後熱 赤枠強調（スクリーン共通） ─── */
.print-heat-warn {
  border: 4px solid #b91c1c !important;
  background: #fef2f2 !important;
  position: relative;
  padding: 6px 8px !important;
}
.print-heat-warn .print-info-label {
  color: #991b1b !important;
  font-weight: 800;
}
.print-heat-warn .print-info-value,
.print-heat-value {
  color: #991b1b !important;
  font-weight: 900;
}
.print-heat-icon {
  color: #b91c1c;
  font-weight: 900;
  margin-right: 4px;
}

/* ─── 業務内容リスト（スクリーン共通） ─── */
.print-business-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.print-business-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 0;
  border-bottom: 1px dotted #ddd;
}
.print-business-item:last-child {
  border-bottom: none;
}
.print-step-num {
  font-size: 1rem;
  font-weight: 900;
  color: #1e293b;
  background: #e2e8f0;
  border-radius: 50%;
  width: 1.6em;
  height: 1.6em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  line-height: 1;
}
.print-step-name {
  font-size: 1rem;
  font-weight: 700;
  color: #111;
}
.print-step-empty {
  font-size: 0.9rem;
  color: #888;
  font-style: italic;
}

/* ─── 印刷：業務内容 番号付きリスト ─── */
@media print {
  .print-section-icon {
    font-style: normal;
    margin-right: 3mm;
  }

  .print-business-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2mm;
  }
  .print-business-item {
    display: flex;
    align-items: baseline;
    gap: 3mm;
    padding: 2mm 0;
    border-bottom: 1px dotted #ddd;
  }
  .print-business-item:last-child {
    border-bottom: none;
  }
  .print-step-num {
    font-size: 11pt;
    font-weight: 900;
    color: #1a1a1a;
    background: #e2e8f0;
    border-radius: 50%;
    width: 6mm;
    height: 6mm;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    line-height: 1;
  }
  .print-step-name {
    font-size: 12pt;
    font-weight: 800;
    color: #111;
  }
  .print-step-empty {
    font-size: 10pt;
    color: #888;
    font-style: italic;
  }

  /* ─── 印刷：予熱・後熱 警告バナー ─── */
  .print-heat-banner {
    display: flex;
    align-items: center;
    gap: 4mm;
    margin-bottom: 5mm;
    padding: 4mm 5mm;
    background: #fff0f0;
    border: 3px solid #dc2626;
    border-radius: 2mm;
  }
  .print-heat-banner-icon {
    font-size: 20pt;
    color: #dc2626;
    flex-shrink: 0;
    line-height: 1;
  }
  .print-heat-banner-text {
    font-size: 10.5pt;
    font-weight: 700;
    color: #991b1b;
    line-height: 1.4;
  }
  .print-heat-banner-text strong {
    font-size: 11.5pt;
    font-weight: 900;
  }

  /* ─── 印刷：予熱・後熱 グリッドアイテム（赤枠強調）統合版 ─── */
  .print-heat-warn {
    border: 4px solid #b91c1c !important;
    background: #fef2f2 !important;
    position: relative;
    padding: 3mm !important;
    box-shadow: inset 0 0 0 1px #fca5a5;
  }
  .print-heat-warn::before {
    content: "⚠";
    position: absolute;
    top: 1.5mm;
    right: 2mm;
    font-size: 9pt;
    color: #b91c1c;
    font-weight: 900;
  }
  .print-heat-warn .print-info-label {
    color: #991b1b !important;
    font-weight: 800;
    font-size: 8pt;
  }
  .print-heat-warn .print-info-value,
  .print-heat-value {
    color: #991b1b !important;
    font-weight: 900;
    font-size: 12pt;
    letter-spacing: 0.02em;
  }
  .print-heat-icon {
    margin-right: 1.5mm;
    color: #b91c1c;
    font-weight: 900;
  }
}

/* ═══════════════════════════════════════════════════
   v7.0 新規スタイル群
   ═══════════════════════════════════════════════════ */

/* ─── 【3】処理あり — 青枠強調（詳細画面） ─── */
.detail-process-highlight {
  border: 3px solid #1d4ed8 !important;
  background: #eff6ff !important;
  border-radius: var(--radius-lg);
}
.detail-process-highlight .dsc-head h3 {
  color: #1d4ed8 !important;
}
.process-alert-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 10px;
  background: #dbeafe;
  color: #1d4ed8;
  border: 1px solid #93c5fd;
  border-radius: 20px;
  font-size: 0.78rem;
  font-weight: 700;
  margin-left: 8px;
}
.field-val-process {
  color: #1d4ed8 !important;
  font-weight: 800 !important;
}

/* ─── 【3】処理あり — 印刷時の青枠強調 ─── */
@media print {
  .print-info-process {
    border: 3px solid #1d4ed8 !important;
    background: #eff6ff !important;
  }
  .print-info-process .print-info-label {
    color: #1e40af !important;
    font-weight: 800;
  }
  .print-info-process .print-info-value {
    color: #1e40af !important;
    font-weight: 900;
    font-size: 11pt;
  }
  .print-process-banner {
    display: flex;
    align-items: center;
    gap: 4mm;
    margin-bottom: 4mm;
    padding: 3.5mm 5mm;
    background: #eff6ff;
    border: 3px solid #1d4ed8;
    border-radius: 2mm;
  }
  .print-process-banner-icon {
    font-size: 16pt;
    color: #1d4ed8;
    flex-shrink: 0;
  }
  .print-process-banner-text {
    font-size: 9.5pt;
    font-weight: 700;
    color: #1e40af;
  }
  .print-process-banner-text strong {
    font-size: 10.5pt;
    font-weight: 900;
  }
}

/* ─── 【5】案件一覧：顧客名・金型名 1.5倍拡大 ─── */
.customer-mold-cell {
  width: 100%;
  overflow: hidden;
}
.cm-customer {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--muted);
  margin-bottom: 3px;
  letter-spacing: 0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cm-mold {
  font-size: 1.05rem; /* デフォルト（短い金型名） */
  font-weight: 900;
  color: var(--text);
  line-height: 1.25;
  white-space: normal;
  word-break: break-all;
}
/* 金型名が長い場合のフォントサイズ自動縮小クラス */
.cm-mold.mold-md {
  font-size: 0.92rem;
}
.cm-mold.mold-sm {
  font-size: 0.8rem;
}
.cm-mold.mold-xs {
  font-size: 0.72rem;
}
/* 担当者行（3行目） */
.cm-assignee {
  font-size: 0.82rem;
  color: var(--muted);
  font-weight: 600;
  margin-top: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cm-assignee-label {
  font-size: 0.75rem;
  color: var(--muted);
  font-weight: 500;
}
/* タグ縮小（一覧表示時） */
.project-table .work-tag,
.project-cards .work-tag {
  font-size: 0.68rem !important;
  padding: 1px 6px !important;
  margin: 1px !important;
}

/* モバイルカードの顧客名・金型名 */
.pc-mold {
  font-size: 1.1rem !important;
  font-weight: 900 !important;
}
.pc-customer {
  font-size: 0.9rem !important;
  font-weight: 600 !important;
}

/* ─── 【1】変更ログ スタイル ─── */
.change-log-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  max-height: 500px;
  overflow-y: auto;
}
.cl-row {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.cl-row:last-child {
  border-bottom: none;
}
.cl-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--bg-sub);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 0.85rem;
}
.cl-body {
  flex: 1;
  min-width: 0;
}
.cl-main {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  margin-bottom: 4px;
  font-size: 0.88rem;
}
.cl-field {
  font-weight: 800;
  color: var(--text);
  background: #f1f5f9;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 0.8rem;
}
.cl-old {
  color: var(--muted);
  text-decoration: line-through;
  font-size: 0.83rem;
}
.cl-arrow {
  color: var(--muted);
  font-size: 0.75rem;
  margin: 0 2px;
}
.cl-new {
  font-weight: 700;
  color: var(--text);
}
.cl-note {
  font-size: 0.8rem;
  color: var(--muted);
  font-style: italic;
}
.cl-meta {
  display: flex;
  gap: 12px;
  font-size: 0.78rem;
  color: var(--muted);
}
.cl-operator {
  font-weight: 600;
}
.cl-time {
  color: #94a3b8;
}

/* ─── 【2】外注一覧 スタイル ─── */
.outsource-summary {
  display: flex;
  gap: 20px;
  padding: 12px 16px;
  background: #f8fafc;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.outsource-cards {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.outsource-card {
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
  cursor: pointer;
  transition: all var(--ease);
}
.outsource-card:hover {
  border-color: var(--primary);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}
.oc-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  gap: 8px;
  flex-wrap: wrap;
}
.oc-info {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.oc-partner {
  font-size: 0.92rem;
  font-weight: 800;
  color: var(--primary);
  display: flex;
  align-items: center;
  gap: 6px;
}
.oc-title {
  margin-bottom: 8px;
}
.oc-customer {
  font-size: 0.88rem;
  color: var(--muted);
  font-weight: 600;
  margin-bottom: 2px;
}
.oc-mold {
  font-size: 1.15rem;
  font-weight: 900;
  color: var(--text);
}
.oc-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  font-size: 0.83rem;
  color: var(--muted);
}
.oc-meta span {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* ════════════════════════════
   検収・売上ページ スタイル
   ════════════════════════════ */

/* KPI サマリーカード行 */
.sales-summary-row {
  display: flex;
  gap: 14px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.sales-kpi-card {
  flex: 1;
  min-width: 180px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  border-radius: var(--radius-lg);
  background: #fff;
  box-shadow: var(--shadow-sm);
  border: 1.5px solid var(--border);
}
.sales-kpi-card.kpi-green {
  border-color: #86efac;
  background: #f0fdf4;
}
.sales-kpi-card.kpi-blue {
  border-color: #93c5fd;
  background: #eff6ff;
}
.sales-kpi-card.kpi-gray {
  border-color: var(--border);
}
.kpi-icon {
  font-size: 1.8rem;
  flex-shrink: 0;
  opacity: 0.7;
}
.kpi-green .kpi-icon {
  color: #16a34a;
}
.kpi-blue .kpi-icon {
  color: #2563eb;
}
.kpi-gray .kpi-icon {
  color: var(--muted);
}
.kpi-label {
  font-size: 0.78rem;
  color: var(--muted);
  font-weight: 700;
  margin-bottom: 2px;
}
.kpi-value {
  font-size: 1.5rem;
  font-weight: 900;
  color: var(--text);
  line-height: 1.1;
}
.kpi-sub {
  font-size: 0.75rem;
  color: var(--muted);
  margin-top: 2px;
}

/* タブバー */
.sales-tab-bar {
  display: flex;
  gap: 4px;
  margin-bottom: 18px;
  background: var(--bg-sub);
  padding: 4px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
}
.sales-tab {
  flex: 1;
  padding: 10px;
  border: none;
  background: transparent;
  border-radius: var(--radius);
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--muted);
  transition: all var(--ease);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.sales-tab:hover {
  background: #fff;
  color: var(--text);
}
.sales-tab.active {
  background: #fff;
  color: var(--primary);
  box-shadow: var(--shadow-sm);
}

/* ─── 営業ダッシュボード（縦リスト型） ─── */
/* ツールバー */
.spc-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
  padding: 8px 12px;
  background: #f8fafc;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
/* リストコンテナ */
.spc-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
/* 1行 */
.spc-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-lg);
  transition: all var(--ease);
}
.spc-row:hover {
  box-shadow: var(--shadow-sm);
}
.spc-row.achieved {
  border-color: #86efac;
  background: #f0fdf4;
}
/* 並び替えボタン列 */
.spc-row-move {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex-shrink: 0;
}
/* アバター */
.spc-row-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  font-weight: 800;
  flex-shrink: 0;
}
/* 名前エリア */
.spc-row-name-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 120px;
  flex-shrink: 0;
}
.spc-row-name {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* 達成バッジ（小） */
.achieved-badge-sm {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: #fef08a;
  color: #854d0e;
  border: 1px solid #fde047;
  padding: 1px 6px;
  border-radius: 8px;
  font-size: 0.68rem;
  font-weight: 800;
  white-space: nowrap;
  flex-shrink: 0;
}
/* 売上金額エリア */
.spc-row-amount {
  display: flex;
  align-items: baseline;
  gap: 5px;
  width: 160px;
  flex-shrink: 0;
}
.spc-row-amount-val {
  font-size: 1.05rem;
  font-weight: 900;
  color: var(--success);
}
.spc-row-count {
  font-size: 0.75rem;
  color: var(--muted);
}
/* プログレスエリア */
.spc-row-progress-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.spc-row-progress-bar {
  flex: 1;
  height: 8px;
  background: var(--border);
  border-radius: 4px;
  overflow: hidden;
  min-width: 60px;
}
.spc-row-progress-fill {
  height: 100%;
  background: var(--primary);
  border-radius: 4px;
  transition: width 0.5s ease;
  min-width: 2px;
}
.spc-row-progress-fill.full {
  background: var(--success);
}
.spc-row-pct {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--primary);
  white-space: nowrap;
  flex-shrink: 0;
}
.spc-row-pct.txt-success {
  color: var(--success);
}
.spc-row-target {
  font-size: 0.75rem;
  color: var(--muted);
  white-space: nowrap;
  flex-shrink: 0;
}
.spc-row-no-target {
  font-size: 0.75rem;
  color: var(--muted);
}
/* 共通操作ボタン */
.spc-ctrl-btn {
  width: 26px;
  height: 26px;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: #fff;
  color: var(--muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  transition: all var(--ease);
  flex-shrink: 0;
}
.spc-ctrl-btn:hover:not(:disabled) {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}
.spc-ctrl-btn:disabled {
  opacity: 0.25;
  cursor: default;
}
/* 非表示ボタン */
.spc-hide-btn:hover:not(:disabled) {
  background: #ef4444;
  border-color: #ef4444;
  color: #fff;
}
/* 旧カード型（後方互換で残す） */
.achieved-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #fef08a;
  color: #854d0e;
  border: 1px solid #fde047;
  padding: 3px 9px;
  border-radius: 10px;
  font-size: 0.73rem;
  font-weight: 800;
  flex-shrink: 0;
}
/* レスポンシブ - スマホで2段レイアウトに変更 */
@media (max-width: 640px) {
  .spc-row {
    flex-wrap: wrap;
    gap: 6px 8px;
    padding: 8px 10px;
  }
  /* 1行目: 並び替えボタン + アバター + 名前（小）+ 非表示ボタン */
  .spc-row-move {
    order: 1;
  }
  .spc-row-avatar {
    order: 2;
    width: 26px;
    height: 26px;
    font-size: 0.78rem;
  }
  .spc-row-name-wrap {
    order: 3;
    flex: 1;
    min-width: 0;
    width: auto;
  }
  .spc-row-name {
    font-size: 0.78rem;
    font-weight: 600;
  }
  .spc-hide-btn {
    order: 4;
  }
  /* 2行目: 売上金額 + プログレス（フル幅） */
  .spc-row-amount {
    order: 5;
    width: auto;
    flex-shrink: 0;
    min-width: 100px;
  }
  .spc-row-amount-val {
    font-size: 0.95rem;
  }
  .spc-row-progress-wrap {
    order: 6;
    flex: 1;
    flex-basis: 100%; /* 2行目にプログレスバーを配置 */
    min-width: 0;
    gap: 5px;
  }
  .spc-row-progress-bar {
    min-width: 40px;
  }
  .spc-row-target {
    font-size: 0.7rem;
  }
  .achieved-badge-sm {
    font-size: 0.62rem;
    padding: 1px 4px;
  }
}

/* ─── 穴チェックラベル ─── */
.hole-check-label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 12px;
  border-radius: 20px;
  cursor: pointer;
  border: 1.5px solid var(--border);
  background: #f8fafc;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--muted);
  transition: all var(--ease);
  user-select: none;
}
.hole-check-label input[type="checkbox"] {
  display: none;
}
.hole-check-label:hover {
  border-color: var(--success);
  color: var(--success);
}
.hole-check-label.hole-checked {
  border-color: #86efac;
  background: #f0fdf4;
  color: var(--success);
}
.hole-check-label.hole-check-alert {
  border-color: var(--danger) !important;
  background: #fee2e2 !important;
  color: var(--danger) !important;
  animation: shake 0.3s ease;
}
@keyframes shake {
  0%,
  100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-6px);
  }
  75% {
    transform: translateX(6px);
  }
}

/* ─── 実績入力モーダル：本数グリッド ─── */
.rec-count-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
@media (max-width: 480px) {
  .rec-count-grid {
    grid-template-columns: 1fr 1fr;
  }
}
.rec-count-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: #fafafa;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--muted);
}
.rec-count-item input {
  margin-top: 2px;
}
/* 大型1列（業務別専用グループ用） */
.rec-count-item--large {
  flex-direction: row;
  align-items: center;
  gap: 12px;
  background: #f0f9ff;
  border-color: #bae6fd;
  padding: 12px 16px;
  font-size: 0.95rem;
}
.rec-count-item--large .rec-count-label {
  flex: 1;
  color: var(--text);
  font-weight: 700;
}
.rec-count-item--large .prc-count-inp {
  width: 90px;
  font-size: 1.15rem;
  text-align: right;
  font-weight: 700;
  border: 2px solid #7dd3fc;
  border-radius: 8px;
  padding: 6px 8px;
}
.rec-check-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.rec-check-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: #fafafa;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 0.85rem;
  cursor: pointer;
}
.rec-check-item input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--success);
}

/* コスト分析リスト */
.cost-analysis-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cost-card {
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.cost-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  cursor: pointer;
  user-select: none;
  transition: background var(--ease);
  flex-wrap: wrap;
}
.cost-card-header:hover {
  background: var(--bg-sub);
}
.cost-card-title {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  min-width: 0;
}
.cost-card-kpis {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.cost-kpi-item {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.cost-kpi-label {
  font-size: 0.68rem;
  color: var(--muted);
  font-weight: 700;
}
.cost-kpi-val {
  font-size: 0.95rem;
  font-weight: 800;
}
.cost-kpi-badge {
  padding: 3px 10px;
  border-radius: 10px;
  font-size: 0.8rem;
  font-weight: 800;
}
.kpi-green {
  background: #dcfce7;
  color: #166534;
  border: 1px solid #86efac;
}
.kpi-yellow {
  background: #fef9c3;
  color: #854d0e;
  border: 1px solid #fde047;
}
.kpi-red {
  background: #fee2e2;
  color: #991b1b;
  border: 1px solid #fca5a5;
}
.cost-chevron {
  color: var(--muted);
  transition: transform 0.2s;
  flex-shrink: 0;
}
.cost-card.open .cost-chevron {
  transform: rotate(180deg);
}
.cost-card-detail {
  display: none;
  padding: 0 16px 14px;
  border-top: 1px solid var(--border);
}
.cost-card.open .cost-card-detail {
  display: block;
}
.cost-detail-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
  margin-top: 10px;
}
.cost-detail-table th {
  text-align: left;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--muted);
  padding: 6px 8px;
  border-bottom: 1.5px solid var(--border);
}
.cost-detail-table td {
  padding: 7px 8px;
  border-bottom: 1px solid var(--border);
}
.cost-total-row td {
  font-weight: 800;
  background: var(--bg-sub);
}

@media (max-width: 600px) {
  .sales-summary-row {
    flex-direction: column;
  }
  .sales-tab {
    font-size: 0.78rem;
    padding: 8px 6px;
  }
  .sales-dashboard-grid {
    grid-template-columns: 1fr;
  }
  .cost-card-header {
    gap: 8px;
  }
  .cost-card-kpis {
    gap: 8px;
  }
}

/* ════════════════════════════
   担当案件ページ (v8.1)
   ════════════════════════════ */
.myproj-rep-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 12px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 16px;
}
.myproj-rep-label {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--muted);
  white-space: nowrap;
}
.myproj-rep-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.myproj-rep-btn {
  padding: 5px 14px;
  border: 1.5px solid var(--border);
  border-radius: 20px;
  background: var(--surface);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  transition: all 0.15s ease;
}
.myproj-rep-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
}
.myproj-rep-btn.active {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}

.myproj-summary-row {
  display: flex;
  gap: 14px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.myproj-kpi-card {
  flex: 1;
  min-width: 180px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border-radius: var(--radius);
  border: 1.5px solid var(--border);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.myproj-kpi-card.kpi-blue {
  border-color: #93c5fd;
  background: #eff6ff;
}
.myproj-kpi-card.kpi-orange {
  border-color: #fcd34d;
  background: #fffbeb;
}
.myproj-kpi-card.kpi-green {
  border-color: #86efac;
  background: #f0fdf4;
}
.myproj-kpi-card .kpi-icon {
  font-size: 1.5rem;
  opacity: 0.75;
}
.kpi-blue .kpi-icon {
  color: #2563eb;
}
.kpi-orange .kpi-icon {
  color: #d97706;
}
.kpi-green .kpi-icon {
  color: #16a34a;
}
.myproj-kpi-card .kpi-body {
  flex: 1;
}
.myproj-kpi-card .kpi-label {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
}
.myproj-kpi-card .kpi-value {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--text-dark);
  line-height: 1.2;
}
.myproj-kpi-card .kpi-sub {
  font-size: 0.8rem;
  color: var(--muted);
  margin-top: 2px;
}

.myproj-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.myproj-card {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.15s;
}
.myproj-card:hover {
  box-shadow: var(--shadow-md);
}
.myproj-card.card-overdue {
  border-color: #fca5a5;
}
.myproj-card-top {
  padding: 14px 16px;
}
.myproj-card-info {
  cursor: pointer;
}
.myproj-card-nums {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.myproj-mold {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--text-dark);
  margin-bottom: 3px;
}
.myproj-customer {
  font-size: 0.85rem;
  color: var(--muted);
  margin-bottom: 6px;
}
.myproj-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 0.8rem;
  color: var(--muted);
  margin-bottom: 6px;
}
.myproj-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}
.myproj-amount-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 10px 16px 12px;
  background: #f8fafc;
  border-top: 1px solid var(--border);
}
.myproj-amount-label {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--muted);
  white-space: nowrap;
}
.myproj-amount-inp-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
}
.myproj-amount-inp {
  width: 140px;
  padding: 6px 10px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  font-size: 0.9rem;
  font-weight: 700;
}
.myproj-amount-inp:focus {
  border-color: var(--primary);
  outline: none;
}
.myproj-amount-unit {
  font-size: 0.85rem;
  color: var(--muted);
}
.myproj-deliver-btn {
  margin-left: auto;
}
.btn-success {
  background: var(--success);
  color: #fff;
  border: none;
}
.btn-success:hover {
  background: #15803d;
}

@media (max-width: 600px) {
  .myproj-summary-row {
    flex-direction: column;
  }
  .myproj-amount-row {
    flex-direction: column;
    align-items: flex-start;
  }
  .myproj-deliver-btn {
    margin-left: 0;
    width: 100%;
  }
}

/* ════════════════════════════
   QNAPボタン (v8.2)
   ════════════════════════════ */
/* 案件詳細 QRコードエリア（PC用・ヘッダー内） */
.detail-qr-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
  padding: 10px 12px;
  background: #faf5ff;
  border: 1.5px solid #e9d5ff;
  border-radius: var(--radius);
  flex-wrap: nowrap;
  overflow: hidden;
}
/* スマホでは PC 用 QR を非表示 */
@media (max-width: 900px) {
  .detail-qr-row {
    display: none;
  }
}
.detail-qr-wrap {
  flex-shrink: 0;
}
.detail-qr-wrap canvas {
  display: block;
  border-radius: 6px;
  border: 2px solid #e9d5ff;
  width: 96px !important;
  height: 96px !important;
}
.detail-qr-meta {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.detail-qr-title {
  font-size: 0.8rem;
  font-weight: 700;
  color: #6b21a8;
  display: flex;
  align-items: center;
  gap: 5px;
}
.detail-qr-sub {
  font-size: 0.72rem;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.detail-qr-num {
  font-size: 0.85rem;
  font-weight: 800;
  color: #3b0764;
  letter-spacing: 0.04em;
}

/* スマホ用 QR（最下部・900px以下のみ表示） */
.db-qr-mobile {
  display: none;
}
@media (max-width: 900px) {
  .db-qr-mobile {
    display: block;
    padding: 16px 12px;
    border-top: 1.5px solid var(--border);
    background: #faf5ff;
    overflow: hidden;
    box-sizing: border-box;
    width: 100%;
  }
  .db-qr-mobile-inner {
    display: flex;
    align-items: center;
    gap: 12px;
    overflow: hidden;
  }
  .db-qr-mobile-inner canvas {
    display: block;
    border-radius: 8px;
    border: 2px solid #e9d5ff;
    flex-shrink: 0;
    width: 100px !important;
    height: 100px !important;
    max-width: 100px;
  }
  .db-qr-mobile-meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    flex: 1;
    overflow: hidden;
  }
}

.detail-qnap-row {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.btn-qnap {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  background: linear-gradient(135deg, #d97706 0%, #b45309 100%);
  color: #fff;
  border-radius: var(--radius);
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 2px 8px rgba(180, 83, 9, 0.25);
  transition: all 0.18s ease;
  border: none;
  cursor: pointer;
  letter-spacing: 0.01em;
}
.btn-qnap:hover {
  background: linear-gradient(135deg, #b45309 0%, #92400e 100%);
  box-shadow: 0 4px 14px rgba(180, 83, 9, 0.35);
  transform: translateY(-1px);
  color: #fff;
  text-decoration: none;
}
.btn-qnap:active {
  transform: translateY(0);
}
.btn-qnap i:first-child {
  font-size: 1.25rem;
}
.btn-qnap-ext {
  font-size: 0.75rem;
  opacity: 0.8;
  margin-left: 2px;
}

/* ════════════════════════════
   役職バッジ admin_sys (v8.2)
   ════════════════════════════ */
.role-admin_sys {
  background: #fdf2f8;
  color: #7c3aed;
  border: 1px solid #ddd6fe;
}

/* ════════════════════════════
   従業員マスター ソートバー (v8.2)
   ════════════════════════════ */
.master-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-bottom: 14px;
}
.emp-sort-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.emp-sort-label {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--muted);
  white-space: nowrap;
}
.emp-sort-btn {
  padding: 5px 12px;
  border: 1.5px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  transition: all 0.15s;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.emp-sort-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
}
.emp-sort-btn.active {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}
.emp-sort-btn.active i {
  opacity: 1;
  color: #fff;
}

/* ════════════════════════════
   案件登録フォーム QNAPセクション
   ════════════════════════════ */
#f-qnap-url {
  font-size: 0.9rem;
}
.form-section-title .fa-folder-open {
  color: #d97706;
}

@media (max-width: 600px) {
  .btn-qnap {
    width: 100%;
    justify-content: center;
  }
  .emp-sort-bar {
    gap: 4px;
  }
  .emp-sort-btn {
    font-size: 0.75rem;
    padding: 4px 8px;
  }
}

/* ════════════════════════════
   権限ロール管理 (v8.3)
   ════════════════════════════ */

/* ── テーブル ── */
.role-perm-table {
  font-size: 0.82rem;
  min-width: 900px;
}
.perm-group-header {
  background: #f1f5f9;
  font-weight: 700;
  font-size: 0.75rem;
  text-transform: uppercase;
  color: var(--muted);
  text-align: center;
  border-bottom: 2px solid var(--border);
  padding: 4px 6px;
}
.perm-flag-header {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--muted);
  text-align: center;
  white-space: nowrap;
  padding: 4px 6px;
  border-bottom: 2px solid var(--border);
  max-width: 80px;
  overflow: hidden;
}
.role-name-col {
  min-width: 160px;
}
.perm-flag-cell {
  text-align: center;
  padding: 6px 4px;
}
.perm-on {
  color: #16a34a;
  font-size: 1rem;
}
.perm-off {
  color: #d1d5db;
  font-size: 0.85rem;
}
.role-name-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 0.8rem;
  font-weight: 700;
}

/* ── 編集モーダル ── */
.perm-section-title {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--text-dark);
  margin: 20px 0 8px;
  padding-bottom: 6px;
  border-bottom: 2px solid var(--border);
  display: flex;
  align-items: center;
  gap: 8px;
}
.perm-group-block {
  margin-bottom: 16px;
  padding: 12px 14px;
  background: var(--bg);
  border-radius: var(--radius);
  border: 1px solid var(--border);
}
.perm-group-title {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.perm-flags-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 8px;
}
.perm-check-label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  padding: 6px 10px;
  border-radius: 6px;
  border: 1.5px solid var(--border);
  background: var(--surface);
  transition: all 0.12s;
  font-size: 0.85rem;
}
.perm-check-label:hover {
  border-color: var(--primary);
}
.perm-check-label input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--primary);
}
.perm-check-label input[type="checkbox"]:checked + .perm-check-text {
  color: var(--primary);
  font-weight: 700;
}

/* ── 従業員フォーム内の権限プレビュー ── */
.perm-preview-wrap {
  margin-top: 10px;
}
.perm-preview {
  padding: 10px 14px;
  border-radius: var(--radius);
  border: 1.5px solid var(--border);
  background: #f8fafc;
}
.perm-preview-title {
  font-size: 0.82rem;
  font-weight: 800;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.perm-preview-body {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.perm-flag-on {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
  background: #dcfce7;
  color: #166534;
}
.perm-flag-off {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.75rem;
  padding: 2px 8px;
  border-radius: 10px;
  background: #f8fafc;
  color: #9ca3af;
}

/* ── QNAPリンク未設定表示 ── */
.detail-qnap-empty {
  opacity: 0.6;
  font-size: 0.85rem;
}

/* ── btn-danger-outline ── */
.btn-danger-outline {
  border-color: #fca5a5;
  color: var(--danger);
}
.btn-danger-outline:hover {
  background: #fee2e2;
  border-color: var(--danger);
}

/* ── 権限ロール並び替えボタン ── */
.role-order-col {
  width: 52px;
  padding: 4px !important;
  text-align: center;
}
.role-order-btns {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.role-order-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 22px;
  border: 1.5px solid var(--border);
  border-radius: 5px;
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  font-size: 0.75rem;
  transition: all 0.12s;
  padding: 0;
  line-height: 1;
}
.role-order-btn:hover:not([disabled]) {
  background: var(--primary);
  border-color: var(--primary);
  color: white;
}
.role-order-btn[disabled],
.role-order-btn.disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

/* ── ロール操作ボタン ── */
.role-action-btn {
  width: 32px;
  height: 28px;
  padding: 0 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  font-size: 0.85rem;
}
.role-action-btn + .role-action-btn {
  margin-left: 4px;
}

/* ═══════════════════════════════════════════
   工程カード：本数チップ 色分け
   ═══════════════════════════════════════════ */
.prc-count-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 700;
  border: 1px solid;
  white-space: nowrap;
}
.prc-chip-tig {
  background: #fff1f2;
  color: #be123c;
  border-color: #fecdd3;
}
.prc-chip-laser {
  background: #ede9fe;
  color: #5b21b6;
  border-color: #c4b5fd;
}
.prc-chip-hole {
  background: #fce7f3;
  color: #9d174d;
  border-color: #f9a8d4;
}
.prc-chip-model {
  background: #e0f2fe;
  color: #0369a1;
  border-color: #7dd3fc;
}
.prc-chip-proc {
  background: #ecfdf5;
  color: #065f46;
  border-color: #6ee7b7;
}
.prc-chip-finish {
  background: #fff7ed;
  color: #9a3412;
  border-color: #fed7aa;
}
.prc-chip-check {
  background: #f0fdf4;
  color: #166534;
  border-color: #86efac;
}

/* ═══════════════════════════════════════════
   実績入力モーダル：業務別ラベル色
   ═══════════════════════════════════════════ */
.rec-label {
  display: block;
  font-weight: 700;
  margin-bottom: 8px;
  font-size: 0.9rem;
}
.rec-label--tig {
  color: #be123c;
}
.rec-label--laser {
  color: #5b21b6;
}
.rec-label--cad {
  color: #0369a1;
}
.rec-label--machining {
  color: #065f46;
}
.rec-label--finishing {
  color: #9a3412;
}
.rec-sub-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--muted);
  margin: 0 0 6px;
  letter-spacing: 0.02em;
}
.rec-count-group {
  background: #f8fafc;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
}

/* ═══════════════════════════════════════════
   最終承認ボタン：グレーアウト（穴チェック未完了）
   ═══════════════════════════════════════════ */
/* 最終承認ボタン（右パネル下部・大型・目立つ色） */
.btn-final-approve {
  display: block;
  width: 100%;
  padding: 14px 16px;
  border: none;
  border-radius: 10px;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 800;
  cursor: pointer;
  letter-spacing: 0.04em;
  transition: all 0.18s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.btn-final-approve--active {
  background: linear-gradient(135deg, #7c3aed 0%, #4f46e5 100%);
  color: #fff;
  box-shadow: 0 4px 14px rgba(79, 70, 229, 0.45);
}
.btn-final-approve--active:hover {
  background: linear-gradient(135deg, #6d28d9 0%, #4338ca 100%);
  box-shadow: 0 6px 18px rgba(79, 70, 229, 0.55);
  transform: translateY(-1px);
}
.btn-final-approve--locked {
  background: #e5e7eb;
  color: #9ca3af;
  border: 1.5px solid #d1d5db;
  cursor: not-allowed;
  opacity: 0.75;
  box-shadow: none;
}
.btn-final-approve--locked:hover {
  transform: none;
}
/* 旧スタイル後方互换 */
.btn-final-approve-locked {
  background: #e5e7eb !important;
  color: #9ca3af !important;
  border: 1.5px solid #d1d5db !important;
  cursor: not-allowed !important;
  opacity: 0.7;
}

/* ═══════════════════════════════════════════
   穴チェック照合ポップアップ
   ═══════════════════════════════════════════ */
.hole-verify-row {
  display: flex;
  align-items: stretch;
  gap: 12px;
  margin-bottom: 16px;
}
.hole-verify-box {
  flex: 1;
  border-radius: 10px;
  padding: 14px 16px;
  text-align: center;
  border: 2px solid;
}
.hole-verify-weld {
  background: #fff1f2;
  border-color: #fecdd3;
}
.hole-verify-mach {
  background: #ecfdf5;
  border-color: #6ee7b7;
}
.hole-verify-eq {
  display: flex;
  align-items: center;
  color: var(--muted);
  font-size: 1.2rem;
}
.hole-verify-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 6px;
}
.hole-verify-count {
  font-size: 2rem;
  font-weight: 900;
  line-height: 1;
  margin-bottom: 4px;
}
.hole-verify-weld .hole-verify-count {
  color: #be123c;
}
.hole-verify-mach .hole-verify-count {
  color: #065f46;
}
.hole-verify-detail {
  font-size: 0.78rem;
  color: var(--muted);
}
.hole-verify-result {
  border-radius: 8px;
  padding: 12px 14px;
  font-size: 0.88rem;
  line-height: 1.7;
  font-weight: 600;
}
.hv-ok {
  background: #f0fdf4;
  border: 1.5px solid #86efac;
  color: #166534;
}
.hv-ng {
  background: #fff1f2;
  border: 1.5px solid #fca5a5;
  color: #be123c;
}
/* 旧フォーマット注意 */
.hv-legacy-note {
  margin-top: 8px;
  padding: 8px 12px;
  background: #fffbeb;
  border: 1px solid #fcd34d;
  border-radius: 7px;
  color: #92400e;
  font-size: 0.8rem;
  line-height: 1.5;
}
@media (max-width: 480px) {
  .hole-verify-row {
    flex-direction: column;
  }
  .hole-verify-eq {
    justify-content: center;
    transform: rotate(90deg);
  }
}
/* 照合：セクションラベル */
.hv-section-label {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--muted);
  margin: 0 0 6px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
/* 冷却穴照合行 */
.hole-verify-cool-row {
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 0.85rem;
  line-height: 1.6;
  font-weight: 600;
}
.hv-cool-ok {
  background: #f0fdf4;
  border: 1.5px solid #86efac;
  color: #166534;
}
.hv-cool-ng {
  background: #fff1f2;
  border: 1.5px solid #fca5a5;
  color: #be123c;
}

/* ─── 実績入力モーダル：新デザイン ─── */
.rec-count-group {
  background: #f8fafc;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 0;
}
.rec-group-header {
  font-size: 0.88rem;
  font-weight: 800;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding-bottom: 8px;
  border-bottom: 1.5px solid var(--border);
}
.rec-group-header--tig {
  color: #be123c;
  border-color: #fecdd3;
}
.rec-group-header--laser {
  color: #5b21b6;
  border-color: #c4b5fd;
}
.rec-group-header--cad {
  color: #0369a1;
  border-color: #7dd3fc;
}
.rec-group-header--machining {
  color: #065f46;
  border-color: #6ee7b7;
}
.rec-group-header--discharge {
  color: #92400e;
  border-color: #fde68a;
}
.rec-group-header--wire {
  color: #1e40af;
  border-color: #bfdbfe;
}
.rec-group-header--finishing {
  color: #9a3412;
  border-color: #fed7aa;
}
.rec-count-rows {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 8px;
}
.rec-count-row {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 7px 12px;
  cursor: default;
  flex: 1;
  min-width: 160px;
}
.rec-count-row--cooling {
  background: #f0f9ff;
  border-color: #bae6fd;
}
.rec-count-row-label {
  flex: none;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
}
.rec-count-inp-lg {
  flex: 1; /* 残りスペースを使う */
  min-width: 0;
  max-width: 90px;
  font-size: 1.25rem;
  font-weight: 900;
  text-align: right;
  border: 2px solid var(--border);
  border-radius: 8px;
  padding: 6px 10px;
  color: var(--text);
  background: #fff;
}
.rec-count-inp-lg:focus {
  outline: none;
  border-color: var(--primary);
}
.rec-count-unit {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--muted);
  min-width: 18px;
}
/* 冷却穴アイコン（水玉） */
.txt-cooling {
  color: #0ea5e9;
  font-size: 0.7em;
  vertical-align: middle;
}
/* 指示書添付エリア */
.rec-attach-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.rec-attach-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  font-size: 0.82rem;
  font-weight: 700;
  background: #f8fafc;
  border: 1.5px dashed var(--border);
  border-radius: 8px;
  color: var(--primary);
  cursor: pointer;
  transition: background 0.15s;
}
.rec-attach-btn:hover {
  background: #eff6ff;
  border-color: var(--primary);
}
.rec-attach-name {
  font-size: 0.82rem;
  color: var(--muted);
  word-break: break-all;
}

/* 工程カード：実績行の本数サマリー */
.prc-rec-nums {
  color: var(--primary);
  font-weight: 700;
  font-size: 0.73rem;
  background: #eff6ff;
  padding: 2px 6px;
  border-radius: 8px;
  border: 1px solid #bfdbfe;
  white-space: nowrap;
  flex-shrink: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 120px; /* ← 最大幅を制限 */
}
/* 実績修正ボタン */
.prc-rec-edit-btn {
  padding: 2px 8px;
  font-size: 0.72rem;
  flex-shrink: 0;
}
.prc-rec-del-btn {
  padding: 2px 7px;
  font-size: 0.72rem;
  flex-shrink: 0;
  margin-left: 4px;
  border: 1px solid var(--danger);
  color: var(--danger);
  background: transparent;
  border-radius: 5px;
  cursor: pointer;
  transition:
    background 0.15s,
    color 0.15s;
}
.prc-rec-del-btn:hover {
  background: var(--danger);
  color: #fff;
}
/* 削除アイコンボタン（コンパクト版） */
.prc-rec-del-icon-btn {
  flex-shrink: 0;
  margin-left: 4px;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 1px solid var(--danger);
  color: var(--danger);
  background: transparent;
  border-radius: 5px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  transition:
    background 0.15s,
    color 0.15s;
}
.prc-rec-del-icon-btn:hover {
  background: var(--danger);
  color: #fff;
}
/* 追加チップ色 */
.prc-chip-tig-cool {
  background: #fce7f3;
  color: #9d174d;
  border-color: #f9a8d4;
}
.prc-chip-cad {
  background: #e0f2fe;
  color: #0369a1;
  border-color: #7dd3fc;
}
.prc-chip-proc-cool {
  background: #dcfce7;
  color: #14532d;
  border-color: #86efac;
}
.prc-chip-dis {
  background: #fef9c3;
  color: #92400e;
  border-color: #fde047;
}
.prc-chip-wire {
  background: #ede9fe;
  color: #4c1d95;
  border-color: #c4b5fd;
}

/* ── 必須ロール削除禁止ボタン ── */
.protected-role-btn {
  opacity: 0.45 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

/* ════════════════════════════════════════════════════════
   担当案件カード（v8.6 刷新）
   ════════════════════════════════════════════════════════ */

/* リスト: 縦1列 */
.myproj-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* カード外枠 */
.myproj-card {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition:
    box-shadow 0.15s,
    border-color 0.15s;
}
.myproj-card:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--primary-lt);
}
.myproj-card.card-overdue {
  border-color: #fca5a5;
  background: #fff8f8;
}

/* 担当案件ページャー */
.myproj-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 12px 0 4px;
}
.myproj-pager .pager-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1.5px solid var(--border);
  background: white;
  color: var(--text);
  cursor: pointer;
  font-size: 0.9rem;
  transition:
    background 0.15s,
    border-color 0.15s;
}
.myproj-pager .pager-btn:hover:not(:disabled) {
  background: var(--primary);
  color: white;
  border-color: var(--primary);
}
.myproj-pager .pager-btn:disabled {
  opacity: 0.35;
  cursor: default;
}
.myproj-pager .pager-info {
  font-size: 0.82rem;
  color: var(--muted);
  font-weight: 600;
  white-space: nowrap;
}
.myproj-pager-total {
  padding: 8px 0 4px;
  text-align: center;
  font-size: 0.8rem;
  color: var(--muted);
}

/* ── メイン横並び行 ── */
.mpcard-row {
  display: flex;
  align-items: stretch;
  gap: 0;
  cursor: pointer;
  padding: 0;
}

/* サムネイル */
.mpcard-thumb {
  flex: 0 0 90px;
  width: 90px;
  min-height: 90px;
  background: #f1f5f9;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-right: 1px solid var(--border);
}
.mpcard-thumb-img {
  width: 90px;
  height: 90px;
  object-fit: cover;
  display: block;
  cursor: zoom-in;
}
.mpcard-thumb-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  color: #cbd5e1;
  font-size: 1.6rem;
}
.mpcard-thumb.mpcard-thumb-noimg {
  flex-direction: column;
  gap: 4px;
  color: #94a3b8;
  font-size: 0.65rem;
  font-weight: 600;
}
.mpcard-thumb.mpcard-thumb-noimg i {
  font-size: 1.4rem;
  color: #cbd5e1;
}

/* 本文エリア */
.mpcard-body {
  flex: 1;
  min-width: 0;
  padding: 10px 12px;
}
.mpcard-meta-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.mpcard-customer {
  font-size: 0.82rem;
  color: var(--muted);
  font-weight: 600;
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mpcard-mold {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--text-dark);
  margin-bottom: 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mpcard-dates {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 0.77rem;
  color: var(--muted);
}
.lock-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 7px;
  border-radius: 10px;
  background: #f1f5f9;
  color: #64748b;
  font-size: 0.72rem;
  font-weight: 700;
}

/* 進捗列（右端） */
.mpcard-progress-col {
  flex: 0 0 70px;
  width: 70px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10px 6px;
  border-left: 1px solid var(--border);
  background: #f8fafc;
  gap: 3px;
}
.mpcard-prog-nums {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--primary);
  line-height: 1;
}
.mpcard-prog-sep {
  font-size: 0.8rem;
  color: var(--muted);
  margin: 0 1px;
}
.mpcard-prog-label {
  font-size: 0.65rem;
  color: var(--muted);
  font-weight: 600;
}
.mpcard-prog-bar-wrap {
  width: 52px;
  height: 6px;
  background: #e2e8f0;
  border-radius: 3px;
  overflow: hidden;
  margin-top: 3px;
}
.mpcard-prog-bar {
  height: 100%;
  background: var(--primary);
  border-radius: 3px;
  transition: width 0.4s;
}
.mpcard-prog-pct {
  font-size: 0.7rem;
  color: var(--primary);
  font-weight: 700;
}

/* 工程タグ行 */
.mpcard-tags-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 6px 12px 8px;
  border-top: 1px dashed #e2e8f0;
  cursor: pointer;
}

/* 受注金額行 */
.mpcard-amount-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 8px 12px 10px;
  background: #f0fdf4;
  border-top: 1px solid #bbf7d0;
}
.mpcard-amount-label {
  font-size: 0.78rem;
  font-weight: 700;
  color: #15803d;
  white-space: nowrap;
}
.mpcard-amount-inp-wrap {
  display: flex;
  align-items: center;
  gap: 5px;
}
.mpcard-amount-inp {
  width: 130px;
  padding: 5px 9px;
  border: 1.5px solid #86efac;
  border-radius: var(--radius);
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text);
}
.mpcard-amount-inp:focus {
  border-color: var(--success);
  outline: none;
}
.mpcard-amount-unit {
  font-size: 0.82rem;
  color: var(--muted);
}

/* スマホ対応 */
@media (max-width: 600px) {
  .mpcard-thumb {
    flex: 0 0 70px;
    width: 70px;
  }
  .mpcard-thumb-img {
    width: 70px;
    height: 70px;
  }
  .mpcard-mold {
    font-size: 0.98rem;
  }
  .mpcard-progress-col {
    flex: 0 0 58px;
    width: 58px;
  }
  .mpcard-prog-nums {
    font-size: 1rem;
  }
  .mpcard-amount-row {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ════════════════════════════════════════════════════════
   作業時間報告カード（v8.6 刷新・2列グリッド）
   ════════════════════════════════════════════════════════ */

/* 2列グリッド（PC/タブレット） */
.wr-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  align-items: start;
}
@media (max-width: 720px) {
  .wr-cards {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

/* カード外枠 */
.wr-card {
  background: white;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
  transition:
    border-color 0.15s,
    box-shadow 0.15s;
  display: flex;
  flex-direction: column;
}
.wr-card:hover {
  border-color: var(--primary-lt);
  box-shadow: var(--shadow-md);
}
.wr-card.wr-card-overdue {
  border-color: #fca5a5;
  background: #fff8f8;
}

/* ヘッダー：サムネイル + 本文 */
.wrcard-header {
  display: flex;
  align-items: stretch;
  cursor: pointer;
  gap: 0;
}

/* サムネイル（wrカード用） */
.wrcard-thumb {
  flex: 0 0 80px;
  width: 80px;
  min-height: 80px;
  background: #f1f5f9;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-right: 1px solid var(--border);
}
.wrcard-thumb .mpcard-thumb-placeholder {
  font-size: 1.4rem;
}
.wrcard-thumb .mpcard-thumb-noimg i {
  font-size: 1.2rem;
}

/* wrcard用サムネイル画像（_loadPageThumbnails で差し替え） */
#wr-cards-inner img.mpcard-thumb-img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  display: block;
  cursor: zoom-in;
}

/* 本文エリア */
.wrcard-header-body {
  flex: 1;
  min-width: 0;
  padding: 10px 12px;
}
.wrcard-meta-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 3px;
}
.wrcard-customer {
  font-size: 0.8rem;
  color: var(--muted);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 1px;
}
.wrcard-mold {
  font-size: 1.08rem;
  font-weight: 800;
  color: var(--text-dark);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 6px;
}

/* 現在の工程バッジ */
.wrcard-current-step {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 20px;
  background: #eff6ff;
  border: 1.5px solid #bfdbfe;
  font-size: 0.82rem;
  font-weight: 700;
  color: #1d4ed8;
  margin-bottom: 5px;
  max-width: 100%;
  overflow: hidden;
}
.wrcard-current-step.wrcard-all-done {
  background: #f0fdf4;
  border-color: #bbf7d0;
  color: #15803d;
}
.wrcard-current-name {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wrcard-current-time {
  font-size: 0.75rem;
  color: #3b82f6;
  font-weight: 600;
  flex-shrink: 0;
  margin-left: 4px;
}

/* 進捗バー（横） */
.wrcard-prog-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
}
.wrcard-prog-bar-bg {
  flex: 1;
  height: 6px;
  background: #e2e8f0;
  border-radius: 3px;
  overflow: hidden;
}
.wrcard-prog-bar-fill {
  height: 100%;
  background: var(--primary);
  border-radius: 3px;
  transition: width 0.4s;
}
.wrcard-prog-text {
  font-size: 0.72rem;
  color: var(--muted);
  font-weight: 700;
  flex-shrink: 0;
}

/* ════════════════════════════════════════════════════════
   案件詳細 ダッシュボードレイアウト (v9.0)
   ════════════════════════════════════════════════════════ */

/* ── ナビバー（1行） ── */
.db-navbar {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border-bottom: 1.5px solid var(--border);
  padding: 6px 12px;
  flex-shrink: 0;
  min-height: 44px;
  flex-wrap: wrap;
}
.db-back-btn {
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
  cursor: pointer;
  font-size: 0.85rem;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.db-back-btn:hover {
  background: #e2e8f0;
}
.db-nav-title {
  flex: 1;
  display: flex;
  align-items: baseline;
  gap: 5px;
  overflow: hidden;
  min-width: 0;
}
.db-nav-customer {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 120px;
}
.db-nav-sep {
  color: var(--border);
  font-size: 0.8rem;
}
.db-nav-mold {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}
.db-nav-num {
  font-size: 0.75rem;
  color: var(--primary);
  font-weight: 700;
  white-space: nowrap;
  flex-shrink: 0;
}
.db-nav-badges {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  flex-wrap: wrap;
}
.db-nav-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.db-icon-btn {
  width: 30px;
  height: 30px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  color: var(--muted);
  transition: all 0.15s;
}
.db-icon-btn:hover {
  background: #e2e8f0;
  color: var(--text);
}
.db-icon-btn--danger {
  border-color: #fca5a5;
  color: var(--danger);
}
.db-icon-btn--danger:hover {
  background: var(--danger);
  color: #fff;
}
.db-icon-btn--warn {
  border-color: #fcd34d;
  color: #d97706;
}
.db-icon-btn--warn:hover {
  background: #fbbf24;
  color: #fff;
}
.db-icon-btn--excel {
  border-color: #86efac;
  color: #16a34a;
}
.db-icon-btn--excel:hover {
  background: #16a34a;
  color: #fff;
}

/* ── 3カラムレイアウト ── */
.db-layout {
  display: grid;
  grid-template-columns: 32% 43% 25%;
  gap: 0;
  height: calc(100vh - var(--header-h) - 44px); /* header + db-navbar */
  overflow: hidden;
}

/* ── 左パネル ── */
.db-left {
  border-right: 1.5px solid var(--border);
  overflow-y: auto;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: #f8fafc;
}
/* 写真エリア（左パネル） */
.db-photos-area {
  background: #fff;
  border-radius: 8px;
  border: 1px solid var(--border);
  overflow: hidden;
  flex-shrink: 0;
}
.db-photos-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 8px;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--muted);
  border-bottom: 1px solid var(--border);
  background: #f8fafc;
}
.db-photo-add-inline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 5px;
  border: 1.5px solid var(--primary);
  color: var(--primary);
  font-size: 0.75rem;
  cursor: pointer;
  background: #fff;
}
.db-photo-add-inline:hover {
  background: #eff6ff;
}
/* 写真エリア下部の追加ボタン */
.db-photo-add-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 6px;
  border-top: 1.5px dashed #bfdbfe;
  background: #f8fbff;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--primary);
  cursor: pointer;
  transition: background 0.15s;
}
.db-photo-add-footer:hover {
  background: #eff6ff;
}
.db-photo-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3px;
  padding: 4px;
}
.db-photo-item {
  position: relative;
  aspect-ratio: 1;
  border-radius: 4px;
  overflow: hidden;
  cursor: zoom-in;
  background: #e2e8f0;
}
.db-photo-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.15s;
}
.db-photo-item:hover img {
  transform: scale(1.06);
}
.db-photo-del {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6rem;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s;
}
.db-photo-item:hover .db-photo-del {
  opacity: 1;
}
.db-photos-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 12px;
  color: #94a3b8;
  font-size: 0.78rem;
}
/* 旧サムネイルクラス（後方互換） */
.db-thumb-wrap {
  width: 100%;
  aspect-ratio: 4/3;
  border-radius: 8px;
  overflow: hidden;
  background: #e2e8f0;
  cursor: pointer;
  flex-shrink: 0;
}
.db-thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.db-thumb-empty-icon {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #94a3b8;
  font-size: 1.8rem;
}
.db-info-list {
  background: #fff;
  border-radius: 8px;
  border: 1px solid var(--border);
  padding: 4px 0;
}
.db-info-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 4px 10px;
  border-bottom: 1px solid #f1f5f9;
  font-size: 0.8rem;
  line-height: 1.4;
}
.db-info-row:last-child {
  border-bottom: none;
}
.db-info-k {
  font-weight: 700;
  color: var(--muted);
  flex-shrink: 0;
  min-width: 4.5em;
  font-size: 0.75rem;
}
.db-info-v {
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}
.db-sales-card {
  background: #fff;
  border-radius: 8px;
  border: 1.5px solid #86efac;
  padding: 8px 10px;
}
.db-sales-title {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--muted);
  margin-bottom: 4px;
}
.db-sales-amt {
  font-size: 1.1rem;
  font-weight: 900;
  color: var(--success);
  line-height: 1.2;
}
.db-sales-amt.db-sales-none {
  font-size: 0.8rem;
  color: var(--muted);
  font-weight: 400;
}
.db-sales-sub {
  font-size: 0.75rem;
  color: var(--danger);
  font-weight: 700;
}
.db-sales-profit {
  font-size: 0.82rem;
  font-weight: 800;
  color: #0369a1;
  margin-top: 2px;
}
.db-delivered-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #dcfce7;
  color: #166534;
  border: 1px solid #86efac;
  border-radius: 12px;
  padding: 2px 8px;
  font-size: 0.72rem;
  font-weight: 700;
  margin-top: 4px;
}
.db-qnap-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--primary);
  text-decoration: none;
}
.db-qnap-btn:hover {
  background: #eff6ff;
}
.db-status-card {
  background: #fff;
  border-radius: 8px;
  border: 1px solid var(--border);
  padding: 6px 8px;
}
.db-status-title {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--muted);
  margin-bottom: 5px;
}

/* 中央パネル用ステータスバー（横長・工程リスト上部） */
.db-status-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: #fff;
  border-bottom: 1.5px solid var(--border);
  flex-shrink: 0;
  flex-wrap: wrap;
}
.db-status-bar-label {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--muted);
  white-space: nowrap;
  flex-shrink: 0;
}
.db-status-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.db-status-btn {
  padding: 3px 7px;
  border: 1.5px solid var(--border);
  border-radius: 12px;
  background: var(--bg);
  font-family: inherit;
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 3px;
  transition: all 0.15s;
}
.db-status-btn.active {
  border-color: var(--primary);
  background: var(--primary);
  color: #fff;
}
.db-status-btn:hover:not(.active) {
  background: #e2e8f0;
}

/* ── 中央パネル ── */
.db-center {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #f1f5f9;
}
.db-center-head {
  background: #fff;
  border-bottom: 1.5px solid var(--border);
  padding: 6px 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  flex-wrap: wrap;
}
.db-center-head h3 {
  font-size: 0.88rem;
  font-weight: 800;
  color: var(--primary);
  display: flex;
  align-items: center;
  gap: 5px;
  flex: 1;
  min-width: 0;
}
.db-process-list {
  flex: 1;
  overflow-y: auto;
  padding: 4px 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* ── 右パネル ── */
.db-right {
  border-left: 1.5px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #f8fafc;
  padding: 6px;
  gap: 5px;
}
/* 穴照合行 */
.db-hole-row {
  border-radius: 7px;
  padding: 5px 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex-shrink: 0;
  font-size: 0.78rem;
  font-weight: 700;
}
.db-hole-ok {
  background: #f0fdf4;
  border: 1.5px solid #86efac;
  color: #166534;
}
.db-hole-ng {
  background: #fff1f2;
  border: 1.5px solid #fca5a5;
  color: #be123c;
}
.db-hole-none {
  background: #f8fafc;
  border: 1px solid var(--border);
  color: var(--muted);
  font-weight: 400;
}
.db-hole-label {
  font-size: 0.72rem;
  font-weight: 700;
}
.db-hole-vals {
  font-size: 0.8rem;
}
.db-hole-badge {
  font-size: 0.72rem;
}
/* 不具合チップ */
.db-defect-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 6px;
  border-radius: 10px;
  background: #fff1f2;
  border: 1px solid #fca5a5;
  color: var(--danger);
  font-size: 0.65rem;
  font-weight: 700;
  cursor: pointer;
  flex-shrink: 0;
  align-self: flex-start;
}
.db-defect-chip:hover {
  background: #ffe4e6;
}
/* 業務タグ */
.db-work-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  flex-shrink: 1; /* 横に伸びないよう縮小を許可 */
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}
/* コメント入力 */
.db-comment-input {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}
.db-comment-inp {
  flex: 1;
  min-width: 0;
  padding: 5px 8px;
  border: 1.5px solid var(--border);
  border-radius: 6px;
  font-size: 0.8rem;
  font-family: inherit;
}
.db-comment-inp:focus {
  outline: none;
  border-color: var(--primary);
}
/* 履歴スクロールエリア：残り高さをすべて使用 */
.db-history-scroll {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden; /* 横スクロール完全ブロック */
  min-height: 120px;
  background: #fff;
  border-radius: 7px;
  border: 1px solid var(--border);
  padding: 0;
  max-width: 100%;
  box-sizing: border-box;
}
/* 写真追加ボタン */
.db-photo-add-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 5px 10px;
  background: #fff;
  border: 1.5px dashed var(--primary);
  border-radius: 6px;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--primary);
  cursor: pointer;
  flex-shrink: 0;
}
.db-photo-add-btn:hover {
  background: #eff6ff;
}
/* 最終承認エリア */
.db-approve-area {
  flex-shrink: 0;
  padding: 2px 0 0;
}

/* ── 右パネル 履歴エントリ ── */
.db-hist-row {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  padding: 6px 8px;
  border-bottom: 1px solid #f1f5f9;
  font-size: 0.78rem;
  line-height: 1.4;
  overflow: hidden; /* 横はみ出し防止 */
  max-width: 100%;
  box-sizing: border-box;
}
.db-hist-row:last-child {
  border-bottom: none;
}
.db-hist-log {
  background: #fafafa;
}
.db-hist-comment {
  background: #fff;
}
.db-hist-icon {
  font-size: 0.7rem;
  color: var(--muted);
  margin-top: 2px;
  flex-shrink: 0;
  width: 14px;
  text-align: center;
}
.db-hist-avatar {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}
.db-hist-body {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0; /* flex子要素のはみ出し防止に必須 */
  flex: 1;
  overflow: hidden;
  word-break: break-word;
  overflow-wrap: anywhere;
}
.db-hist-label {
  font-weight: 700;
  color: var(--text);
  font-size: 0.75rem;
}
.db-hist-author {
  font-weight: 700;
  color: var(--primary);
  font-size: 0.75rem;
}
.db-hist-change {
  color: var(--muted);
  font-size: 0.72rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap; /* 変更ログは1行省略 */
}
.db-hist-note {
  color: #92400e;
  font-size: 0.72rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap; /* 備考も1行省略 */
}
.db-hist-text {
  color: var(--text);
  font-size: 0.78rem;
  word-break: break-word; /* 長い単語/URLも折り返す */
  overflow-wrap: anywhere; /* どこでも折り返しOK */
  white-space: pre-wrap; /* 改行文字を保持しつつ折り返す */
  max-width: 100%;
}
.db-hist-time {
  color: #94a3b8;
  font-size: 0.68rem;
}
.db-hist-empty {
  padding: 16px;
  text-align: center;
  color: var(--muted);
  font-size: 0.78rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

/* ── レスポンシブ（タブレット以下） ── */
/* スマホ専用インフォバー：デスクトップでは非表示 */
.db-mobile-infobar {
  display: none;
}
.db-right-info {
  display: contents;
} /* デスクトップ：通常フロー */

@media (max-width: 900px) {
  .db-layout {
    grid-template-columns: 1fr;
    height: auto !important;
    overflow: visible !important;
  }
  .db-left,
  .db-center,
  .db-right {
    border: none;
    border-bottom: 1.5px solid var(--border);
    max-height: none !important;
    overflow: visible !important;
    overflow-x: hidden !important; /* 横スクロール禁止 */
    height: auto !important;
  }
  /* スマホ：穴数照合・業務タグを実績の直上に表示 */
  .db-mobile-infobar {
    display: block;
    padding: 8px;
    background: #f8fafc;
    border-bottom: 1px solid var(--border);
  }
  .db-mobile-infobar .db-work-tags {
    flex-wrap: wrap;
    gap: 4px;
    padding: 4px 0 0;
  }
  /* 右パネルの穴数照合・業務タグは非表示（スマホでは重複するため） */
  .db-right-info {
    display: none;
  }
  .db-history-scroll {
    min-height: 100px;
    max-height: 300px;
    overflow-x: hidden; /* スマホでも横スクロール禁止 */
  }
  .db-center {
    min-height: 300px;
  }
  .db-process-list {
    overflow: visible;
    max-height: none;
  }
  /* スマホ：不具合報告セクションは別途 @media ブロックで制御 */
}
/* デスクトップ：不具合報告は既存のdetail-section-cardとして左パネルに含まれるため中央には不要 */
.db-defect-section {
  display: none !important;
}
.db-defect-section .detail-section-card {
  border-radius: 0;
  border-left: none;
  border-right: none;
  border-bottom: none;
}

/* PC版左パネルの不具合報告カード */
.db-defect-card {
  margin-top: 4px;
}
.db-defect-card .detail-section-card {
  border-radius: var(--radius);
  margin: 0;
}

@media (max-width: 900px) {
  /* スマホ：不具合報告セクションを強制表示 */
  .db-defect-section {
    display: block !important;
  }
  /* スマホ：左パネルの不具合カードは非表示（db-defect-sectionに表示） */
  .db-defect-card {
    display: none !important;
  }
}

@media (max-width: 1200px) and (min-width: 901px) {
  .db-layout {
    grid-template-columns: 30% 44% 26%;
  }
}

/* processカードをコンパクトに（ダッシュボード用） */
.db-process-list .proc-record-card {
  /* padding は各要素側で制御 */
  gap: 0;
}

/* 工程タグ行 */
.wrcard-tags {
  display: block;
  padding: 6px 12px 8px;
  border-top: 1px dashed #e2e8f0;
}

/* 累計工数行 */
.wrcard-total-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
  background: #f8fafc;
  border-top: 1px solid #f1f5f9;
  font-size: 0.78rem;
  color: var(--muted);
  flex-wrap: wrap;
}
.wrcard-total-label {
  display: flex;
  align-items: center;
  gap: 4px;
}
.wrcard-total-val {
  color: var(--primary-dk);
  font-size: 0.85rem;
}
.wrcard-due {
  margin-left: auto;
  white-space: nowrap;
}

/* アクションボタン */
.wrcard-actions {
  padding: 10px 12px;
  border-top: 1px solid var(--border);
}
.wrcard-btn-main {
  width: 100%;
  padding: 11px 14px;
  font-size: 0.92rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border-radius: 8px;
  min-height: 46px;
}
.wrcard-btn-work {
  font-weight: 800;
  max-width: 180px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* スマホ対応 */
@media (max-width: 480px) {
  .wrcard-thumb {
    flex: 0 0 66px;
    width: 66px;
  }
  .wrcard-mold {
    font-size: 0.95rem;
  }
  .wrcard-btn-main {
    font-size: 0.85rem;
    padding: 10px;
  }
}

/* ── ロール一覧の必須マーク ── */
.role-name-badge .fa-lock {
  font-size: 0.65rem;
  opacity: 0.7;
  vertical-align: middle;
}

/* ── 権限ロール管理ヒント ── */
.role-sort-hint {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  color: var(--muted);
}

@media (max-width: 600px) {
  .perm-flags-grid {
    grid-template-columns: 1fr 1fr;
  }
  .role-perm-table {
    font-size: 0.75rem;
  }
  .role-order-btn {
    width: 22px;
    height: 20px;
    font-size: 0.7rem;
  }
}

/* ════════════════════════════════════════
   スケルトンローダー（詳細画面 段階的ロード用）
   ════════════════════════════════════════ */
@keyframes skel-shimmer {
  0% {
    background-position: -600px 0;
  }
  100% {
    background-position: 600px 0;
  }
}
.skel {
  background: linear-gradient(90deg, #e2e8f0 25%, #f1f5f9 50%, #e2e8f0 75%);
  background-size: 600px 100%;
  animation: skel-shimmer 1.4s ease-in-out infinite;
  border-radius: 6px;
}
/* 写真グリッドのスケルトン */
.skel-photo-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3px;
  padding: 4px;
}
.skel-photo {
  aspect-ratio: 1;
  border-radius: 4px;
}
/* 工程カードのスケルトン */
.skel-process-card {
  height: 90px;
  margin-bottom: 8px;
  border-radius: 8px;
}
/* 履歴行のスケルトン */
.skel-hist-row {
  height: 44px;
  margin-bottom: 6px;
  border-radius: 8px;
}
/* 汎用ライン */
.skel-line {
  height: 24px;
  margin-bottom: 6px;
  border-radius: 6px;
}
.skel-line--sm {
  height: 18px;
}

/* ── 写真グリッド追加スタイル ── */
/* 枚数バッジ */
.db-photos-count-badge {
  font-size: 0.72rem;
  font-weight: 700;
  background: #eff6ff;
  color: var(--primary);
  border: 1px solid #bfdbfe;
  border-radius: 20px;
  padding: 1px 8px;
}
/* 「もっと見る」ボタン */
.db-photo-more-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 8px 0;
  background: #f8fafc;
  border: none;
  border-top: 1.5px dashed #bfdbfe;
  color: var(--primary);
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s;
}
.db-photo-more-btn:hover {
  background: #eff6ff;
}
/* 遅延ロード写真（フェードイン） */
.db-photo-thumb-lazy {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition:
    transform 0.15s,
    opacity 0.3s;
  opacity: 0;
  animation: photo-fade-in 0.3s ease forwards;
}
@keyframes photo-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.db-photo-item:hover .db-photo-thumb-lazy {
  transform: scale(1.06);
}
/* スケルトン状態の写真アイテム */
.skel-photo-item {
  aspect-ratio: 1;
  border-radius: 4px;
  overflow: hidden;
  background: #e2e8f0;
}
/* 添付資料エリア */
.db-docs-area {
  background: #fff;
  border-radius: 8px;
  border: 1px solid var(--border);
  overflow: hidden;
  margin-top: 8px;
}
.db-doc-list {
  padding: 4px 0;
}
/* 基本情報のブロック表示行 */
.db-info-row--block {
  flex-direction: column;
  align-items: flex-start !important;
  gap: 2px;
}
.db-info-row--block .db-info-k {
  margin-bottom: 2px;
}
.db-info-row--block .db-info-v {
  font-size: 0.82rem;
  line-height: 1.5;
}

/* ═══════════════════════════════════════════════════════════════
   【v11.2】 レイアウト最適化パッチ
   1) 業務内容・履歴コメントの横スクロール撤廃・改行強制
   2) 工程別実績カードのコンパクト化
   3) 案件一覧カードの1行高さ削減・横並び強化
   4) タブレット向けフォント・ボタン最適化
   ═══════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────
   1) 業務内容・コメント・履歴：横スクロール撤廃・改行強制
   ───────────────────────────────────────── */

/* 業務タグコンテナ（詳細画面・一覧共通）横はみ出し禁止 */
.db-work-tags,
.detail-work-tags,
.pc-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  min-width: 0;
  max-width: 100%;
  flex-shrink: 1;
  overflow: hidden;
  white-space: normal;
}
/* テーブルの業務内容 <td> は通常セルのまま（flexにしない） */
.work-tag-cell {
  white-space: normal;
  vertical-align: top;
  padding-top: 8px;
  overflow: visible;
}

/* ─── カテゴリーグループ表示 ─── */
/* コンテナ：縦方向に積み重ね（カテゴリーごとに改行） */
.grouped-work-tags {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 100%;
}
/* 1カテゴリー行：ラベル＋タグを横並び・折り返し許可 */
.tag-group-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 3px;
  padding: 3px 5px;
  border-radius: 5px;
  background: rgba(0, 0, 0, 0.025);
}
/* カテゴリーラベル（溶接 / 加工 / 測定 / 新型） */
.tag-group-label {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 0.68rem;
  font-weight: 700;
  border: 1.5px solid currentColor;
  border-radius: 4px;
  padding: 2px 6px;
  margin-right: 4px;
  white-space: nowrap;
  flex-shrink: 0;
  min-width: 2.8em;
  justify-content: center;
}
/* カテゴリー間のセパレーター（縦方向なので非表示） */
.tag-group-sep {
  display: none;
}
/* カード内でも同じグループ表示を適用 */
.pc-badges .grouped-work-tags {
  margin-top: 4px;
}
.pc-badges .tag-group-row {
  background: rgba(0, 0, 0, 0.02);
  padding: 2px 5px;
}
/* 担当案件カード内 */
.wrcard-tags .grouped-work-tags {
  gap: 5px;
}
.wrcard-tags .tag-group-row {
  padding: 3px 6px;
  background: rgba(0, 0, 0, 0.025);
}

/* work-tag 自体の折り返し保証 */
.work-tag {
  white-space: normal !important;
  word-break: break-word !important;
  overflow-wrap: anywhere;
  max-width: 100%;
}

/* 履歴・コメント欄の横はみ出し禁止（コンテナのみ。子要素への強制は行わない） */
.db-history-scroll {
  max-width: 100%;
  overflow-x: hidden;
  overflow-y: auto;
}

/* 履歴アイテム：テキスト部分のみ折り返し（アイコン・バッジには影響させない） */
.db-hist-body,
.db-hist-text,
.db-hist-comment,
.db-comment-text {
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: anywhere;
  min-width: 0;
  max-width: 100%;
}
/* 履歴アイテム行（横幅を制限） */
.db-hist-item {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}

/* 不具合カード：overflow:hiddenは外さない → visible に変更して見切れ防止 */
.db-defect-card {
  min-width: 0;
  max-width: 100%;
  overflow: visible; /* hidden にすると内容が見切れるため visible */
  flex-shrink: 0; /* db-left の flex で潰されないよう */
}
/* 不具合の「内容文・詳細テキスト」だけ折り返し（バッジ・アイコンには掛けない） */
.defect-content,
.defect-text,
.drc-content-text,
.drc-info-val,
.drc-val,
.drc-body,
.drc-row .drc-val {
  word-break: break-word;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
  min-width: 0;
  max-width: 100%;
}
/* 左パネル履歴・コメントのテキスト部分のみ折り返し */
.db-hist-body .hist-text,
.db-hist-body .hist-content,
.db-comment-body,
.db-hist-text,
.db-hist-change,
.db-hist-note,
.db-hist-label {
  word-break: break-word;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
  min-width: 0;
  max-width: 100%;
}
/* 履歴行コンテナ：幅制限のみ（アバター・アイコンに影響させない） */
.db-hist-row,
.db-hist-body {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}

/* 業務タグラップ：中のdivをflexで折り返す（tdはflexにしない） */
.work-tag-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  max-width: 260px;
}

/* 全体の横スクロール完全禁止（body・main） */
body,
#main,
.page-section {
  overflow-x: hidden;
  max-width: 100%;
  box-sizing: border-box;
}

/* ─────────────────────────────────────────
   2) 工程別実績・承認カードのコンパクト化
   ───────────────────────────────────────── */

/* カード自体を小さく */
.proc-record-card {
  margin-bottom: 4px !important;
  border-radius: 8px !important;
}

/* ヘッダー行を締める */
.prc-header {
  padding: 4px 7px !important;
  gap: 5px !important;
}

/* 番号バッジを小さく */
.prc-num {
  width: 22px !important;
  height: 22px !important;
  font-size: 0.7rem !important;
}

/* 工程名フォントを少し小さく */
.prc-name {
  font-size: 0.8rem !important;
  margin-bottom: 0 !important;
}

/* サマリーバッジを締める */
.prc-time-badge {
  padding: 0px 5px !important;
  font-size: 0.68rem !important;
}
.prc-entries-badge {
  font-size: 0.68rem !important;
}
.prc-approved-chip {
  padding: 1px 5px !important;
  font-size: 0.7rem !important;
}

/* 本数サマリーチップ */
.prc-count-summary {
  padding: 0 7px 3px !important;
  gap: 2px !important;
}
.prc-count-chip {
  padding: 0px 4px !important;
  font-size: 0.63rem !important;
}

/* 実績ボタンを小さく・タッチしやすく */
.prc-btn-rec {
  padding: 2px 7px !important;
  font-size: 0.7rem !important;
  min-height: 26px !important;
}

/* 承認バー */
.prc-approve-bar {
  padding: 4px 7px !important;
}
.prc-btn-appr-full {
  padding: 4px 0 !important;
  font-size: 0.75rem !important;
  min-height: 30px !important;
}

/* 実績行を締める */
.prc-records {
  padding: 0 7px !important;
}
.prc-record-row {
  padding: 2px 0 !important;
  gap: 3px !important;
  font-size: 0.74rem !important;
}

/* 工程リスト全体のgapを縮める */
.db-process-list {
  gap: 3px !important;
  padding: 3px 5px !important;
}

/* ─────────────────────────────────────────
   3) 案件一覧カード：1行高さ削減・横並び強化
   ───────────────────────────────────────── */

/* カードの上下パディングを削減 */
.project-card {
  padding: 9px 11px !important;
}

/* サムネイルを小さく */
.pc-thumb-wrap {
  width: 70px !important;
  height: 56px !important;
}
.pc-thumb-inner {
  width: 70px !important;
  height: 56px !important;
  font-size: 0.9rem !important;
}
.pc-thumb-img {
  width: 70px !important;
  height: 56px !important;
}

/* 金型名 */
.pc-mold {
  font-size: 0.9rem !important;
  font-weight: 800 !important;
  margin: 1px 0 !important;
}

/* 顧客名 */
.pc-customer {
  font-size: 0.78rem !important;
}

/* pc-meta（日付・期限）を横一列に */
.pc-meta {
  display: flex !important;
  flex-wrap: nowrap !important;
  flex-direction: row !important;
  gap: 8px !important;
  margin-top: 4px !important;
  align-items: center;
  overflow: hidden;
  max-width: 100%;
}
.pc-meta > span {
  white-space: nowrap;
  font-size: 0.72rem !important;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* pc-badges（ステータス＋工程タグ）を横一列に */
.pc-badges {
  display: flex !important;
  flex-wrap: wrap !important;
  flex-direction: row !important;
  gap: 3px !important;
  margin-top: 4px !important;
  align-items: center;
}

/* カードグリッド：スマホ（～900px）は1列flex ※PC(901px~)はtable表示のためcards=none */

/* ─────────────────────────────────────────
   4) タブレット向けフォント・ボタン最適化
   ───────────────────────────────────────── */

@media (max-width: 1024px) {
  /* 全体フォント微縮小 */
  body {
    font-size: 14px;
  }

  /* ボタン：見た目を小さく・タップしろを維持 */
  .btn {
    min-height: 36px !important;
    padding: 5px 12px !important;
    font-size: 0.82rem !important;
  }
  .btn-sm {
    min-height: 32px !important;
    padding: 4px 10px !important;
    font-size: 0.76rem !important;
  }
  .btn-xs {
    min-height: 28px !important;
    padding: 3px 8px !important;
    font-size: 0.72rem !important;
  }

  /* ステータスボタン */
  .db-status-btn {
    padding: 3px 7px !important;
    font-size: 0.72rem !important;
    gap: 3px !important;
  }
  .db-status-btn span {
    display: inline;
  }

  /* 詳細画面ヘッダー文字 */
  .db-center-head h3 {
    font-size: 0.82rem !important;
  }

  /* 右パネル情報行 */
  .db-info-k {
    font-size: 0.72rem !important;
  }
  .db-info-v {
    font-size: 0.78rem !important;
  }
}

@media (max-width: 768px) {
  /* スマホでさらに締める */
  .prc-btn-rec {
    min-height: 30px !important;
  }
  .prc-btn-appr-full {
    min-height: 32px !important;
  }
  .pc-meta {
    flex-wrap: wrap !important;
  }
}

/* ════════════════════════════════════════════
   ホーム画面（ログイン後メニュー）v9.6
   ════════════════════════════════════════════ */

.home-wrap {
  max-width: 680px;
  margin: 0 auto;
  padding: 16px 12px 40px;
}

/* ── ウェルカムバナー ── */
.home-welcome {
  background: linear-gradient(
    135deg,
    var(--primary-dk) 0%,
    var(--primary-lt) 100%
  );
  border-radius: var(--radius-xl);
  padding: 20px 20px 16px;
  color: #fff;
  margin-bottom: 24px;
  box-shadow: 0 6px 24px rgba(107, 26, 58, 0.25);
}
.home-welcome-inner {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}
.home-avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: 800;
  color: #fff;
  flex-shrink: 0;
  border: 2.5px solid rgba(255, 255, 255, 0.5);
  letter-spacing: 0;
}
.home-greeting-sub {
  font-size: 0.82rem;
  opacity: 0.85;
  margin-bottom: 2px;
}
.home-greeting-name {
  font-size: 1.3rem;
  font-weight: 800;
  line-height: 1.2;
}
.home-greeting-name span {
  font-size: 1.4rem;
}

/* サマリーバッジ行 */
.home-summary-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.home-sum-badge {
  display: flex;
  align-items: center;
  gap: 5px;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 20px;
  padding: 4px 12px;
  font-size: 0.78rem;
  font-weight: 700;
  color: #fff;
  cursor: pointer;
  transition: background 0.15s;
  white-space: nowrap;
}
.home-sum-badge:hover {
  background: rgba(255, 255, 255, 0.28);
}
.home-sum-badge .badge-num {
  font-size: 1rem;
  font-weight: 900;
}
.home-sum-badge.overdue {
  background: rgba(220, 38, 38, 0.45);
  border-color: rgba(255, 100, 100, 0.5);
}

/* ── メニューグリッド ── */
.home-menu-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.home-menu-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 18px 8px 14px;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition:
    transform 0.18s,
    box-shadow 0.18s,
    border-color 0.18s,
    background 0.18s;
  text-decoration: none;
  color: var(--text);
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.home-menu-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
  border-color: var(--primary);
}
.home-menu-item:active {
  transform: scale(0.96);
  box-shadow: none;
}

/* アイコン円 */
.home-menu-icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  flex-shrink: 0;
  transition: transform 0.18s;
}
.home-menu-item:hover .home-menu-icon {
  transform: scale(1.1);
}

/* ラベル */
.home-menu-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-align: center;
  line-height: 1.3;
  color: var(--text);
}

/* バッジ（件数） */
.home-menu-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  min-width: 20px;
  height: 20px;
  background: var(--danger);
  color: #fff;
  border-radius: 10px;
  font-size: 0.65rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
  box-shadow: 0 2px 6px rgba(220, 38, 38, 0.4);
  animation: badge-pop 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55) both;
}
.home-menu-badge--danger {
  background: var(--danger);
  box-shadow: 0 2px 6px rgba(220, 38, 38, 0.4);
}
.home-menu-badge--new {
  background: #16a34a;
  box-shadow: 0 2px 6px rgba(22, 163, 74, 0.4);
  top: 8px;
  right: 8px;
}
.home-menu-badge--outsource {
  background: #ea580c;
  box-shadow: 0 2px 6px rgba(234, 88, 12, 0.4);
}
/* 遅延と新着が両方ある場合は縦にずらす */
.home-menu-badge--danger + .home-menu-badge--new {
  top: 32px;
}
@keyframes badge-pop {
  from {
    transform: scale(0);
  }
  to {
    transform: scale(1);
  }
}

/* 各メニューのアイコン背景色 */
.hmi-list {
  background: #eff6ff;
  color: #2563eb;
}
.hmi-new {
  background: #f0fdf4;
  color: #16a34a;
}
.hmi-myproj {
  background: #fef3c7;
  color: #d97706;
}
.hmi-work {
  background: #f5f3ff;
  color: #7c3aed;
}
.hmi-defect {
  background: #fff1f2;
  color: #e11d48;
}
.hmi-outsrc {
  background: #fff7ed;
  color: #ea580c;
}
.hmi-sales {
  background: #f0fdfa;
  color: #0d9488;
}
.hmi-report {
  background: #fdf4ff;
  color: #9333ea;
}
.hmi-master {
  background: #f8fafc;
  color: #475569;
}
.hmi-qrscan {
  background: #f0f9ff;
  color: #0891b2;
}
.hmi-gantt {
  background: #ecfdf5;
  color: #059669;
}

/* マスター管理ページ ツールリンク */
.master-tool-links {
  display: flex;
  gap: 12px;
  padding: 16px 0 8px;
  flex-wrap: wrap;
}
.master-tool-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  color: #334155;
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
  transition:
    background 0.15s,
    border-color 0.15s;
}
.master-tool-btn:hover {
  background: #e2e8f0;
  border-color: #94a3b8;
}

/* スマホ：2列 */
@media (max-width: 480px) {
  .home-menu-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
  }
  .home-menu-item {
    padding: 14px 4px 10px;
    gap: 5px;
  }
  .home-menu-icon {
    width: 42px;
    height: 42px;
    font-size: 1.05rem;
  }
  .home-menu-label {
    font-size: 0.65rem;
  }
  .home-wrap {
    padding: 10px 8px 30px;
  }
  .home-welcome {
    padding: 16px 14px 12px;
  }
  .home-greeting-name {
    font-size: 1.1rem;
  }
}
@media (max-width: 360px) {
  .home-menu-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
  }
  .home-menu-icon {
    width: 36px;
    height: 36px;
    font-size: 0.9rem;
  }
  .home-menu-label {
    font-size: 0.6rem;
  }
}

/* ════════════════════════════════════════════
   ページネーション（案件一覧 v9.6）
   ════════════════════════════════════════════ */
.pagination-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 16px 8px 8px;
  flex-wrap: wrap;
}
.pg-btn {
  min-width: 36px;
  height: 36px;
  padding: 0 10px;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    background var(--ease),
    border-color var(--ease),
    color var(--ease);
}
.pg-btn:hover:not(:disabled) {
  background: #eff6ff;
  border-color: var(--primary);
  color: var(--primary);
}
.pg-btn.active {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
  pointer-events: none;
}
.pg-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.pg-ellipsis {
  width: 28px;
  text-align: center;
  color: var(--muted);
  font-size: 0.85rem;
  line-height: 36px;
}
.list-count-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 4px 10px;
  flex-wrap: wrap;
}
.pager-info {
  font-size: 0.82rem;
  color: var(--muted);
  font-weight: 600;
}
.pager-range {
  font-size: 0.82rem;
  color: var(--primary);
  font-weight: 700;
}

/* ════════════════════════════════════════════
   金型一式登録モード（v9.3）
   ════════════════════════════════════════════ */

/* ── モード切り替えタブ ── */
.reg-mode-tabs {
  display: flex;
  gap: 8px;
  padding: 12px 16px 0;
  border-bottom: 2px solid var(--border);
  background: var(--surface);
  margin-bottom: -2px;
  position: relative;
  z-index: 1;
}
.reg-mode-tab {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 20px;
  border: 1.5px solid var(--border);
  border-bottom: none;
  border-radius: 8px 8px 0 0;
  background: #f8fafc;
  color: var(--muted);
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition:
    background var(--ease),
    color var(--ease),
    border-color var(--ease);
  white-space: nowrap;
}
.reg-mode-tab i {
  font-size: 0.85rem;
}
.reg-mode-tab:hover {
  background: #eff6ff;
  color: var(--primary);
  border-color: var(--primary);
}
.reg-mode-tab.active {
  background: var(--surface);
  color: var(--primary);
  border-color: var(--primary);
  border-bottom: 2px solid var(--surface);
  margin-bottom: -2px;
  font-weight: 700;
  position: relative;
  z-index: 2;
}

/* ── 一式フォーム 共通項目セクションタイトル ── */
.bulk-section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.bulk-section-badge {
  margin-left: auto;
  font-size: 0.72rem;
  font-weight: 700;
  background: #eff6ff;
  color: var(--primary);
  border: 1px solid #bfdbfe;
  border-radius: 20px;
  padding: 2px 10px;
}
.bulk-parts-count {
  margin-left: auto;
  font-size: 0.78rem;
  font-weight: 700;
  background: var(--primary);
  color: #fff;
  border-radius: 20px;
  padding: 2px 10px;
  min-width: 36px;
  text-align: center;
}

/* ── パーツ行 ── */
.bulk-part-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: #f8fafc;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  margin-bottom: 8px;
  transition:
    border-color var(--ease),
    box-shadow var(--ease);
}
.bulk-part-row:hover {
  border-color: var(--primary);
  box-shadow: 0 2px 8px rgba(107, 26, 58, 0.1);
}
.bulk-part-num {
  flex: 0 0 26px;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--primary);
  color: #fff;
  border-radius: 50%;
  font-size: 0.78rem;
  font-weight: 700;
  flex-shrink: 0;
}
.bulk-part-mold {
  flex: 1;
  min-width: 0;
}
.bulk-mold-inp {
  width: 100%;
  padding: 9px 12px;
  border: 1.5px solid var(--border);
  border-radius: 6px;
  font-size: 0.9rem;
  background: #fff;
  transition: border-color var(--ease);
  outline: none;
}
.bulk-mold-inp:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(107, 26, 58, 0.1);
}
.bulk-part-photo {
  flex: 0 0 80px;
  width: 80px;
}

/* 写真追加ボタン */
.bulk-photo-add-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  width: 76px;
  height: 76px;
  border: 2px dashed #bfdbfe;
  border-radius: 8px;
  background: #eff6ff;
  color: var(--primary);
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  transition:
    background var(--ease),
    border-color var(--ease);
}
.bulk-photo-add-btn:hover {
  background: #dbeafe;
  border-color: var(--primary);
}
.bulk-photo-add-btn i {
  font-size: 1.2rem;
}

/* 写真プレビュー */
.bulk-photo-preview {
  position: relative;
  width: 76px;
  height: 76px;
  border-radius: 8px;
  overflow: hidden;
  border: 1.5px solid var(--border);
  background: #e2e8f0;
}
.bulk-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: zoom-in;
  display: block;
  transition: transform 0.15s;
}
.bulk-thumb:hover {
  transform: scale(1.05);
}
.bulk-photo-del {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 20px;
  height: 20px;
  background: rgba(220, 38, 38, 0.85);
  color: #fff;
  border: none;
  border-radius: 50%;
  font-size: 0.65rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  transition: background var(--ease);
}
.bulk-photo-del:hover {
  background: var(--danger);
}
.bulk-photo-size {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  font-size: 0.6rem;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  text-align: center;
  padding: 2px 0;
  font-weight: 600;
}

/* 行削除ボタン */
.bulk-part-del-btn {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff0f0;
  border: 1.5px solid #fecaca;
  border-radius: 6px;
  color: var(--danger);
  cursor: pointer;
  font-size: 0.85rem;
  transition:
    background var(--ease),
    border-color var(--ease);
}
.bulk-part-del-btn:hover {
  background: #fee2e2;
  border-color: var(--danger);
}

/* ── パーツ追加ボタン ── */
.bulk-add-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 12px 0;
  margin-top: 4px;
  background: #f0fdf4;
  border: 2px dashed #86efac;
  border-radius: 8px;
  color: var(--success);
  font-size: 0.92rem;
  font-weight: 700;
  cursor: pointer;
  transition:
    background var(--ease),
    border-color var(--ease);
}
.bulk-add-btn:hover {
  background: #dcfce7;
  border-color: #4ade80;
}
.bulk-add-btn i {
  font-size: 0.95rem;
}

/* ── 空パーツヒント ── */
.bulk-empty-hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 20px;
  background: #f8fafc;
  border-radius: 8px;
  color: var(--muted);
  font-size: 0.88rem;
  border: 1.5px dashed var(--border);
  margin-bottom: 8px;
}

/* ── プログレスバー ── */
.bulk-progress-wrap {
  padding: 16px 20px;
  background: #f0f9ff;
  border: 1.5px solid #bae6fd;
  border-radius: 10px;
  margin: 16px 0;
}
.bulk-progress-msg {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--info);
  margin-bottom: 8px;
  min-height: 1.2em;
}
.bulk-progress-track {
  width: 100%;
  height: 10px;
  background: #e0f2fe;
  border-radius: 99px;
  overflow: hidden;
}
.bulk-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--info), var(--primary));
  border-radius: 99px;
  transition: width 0.4s ease;
  min-width: 4px;
}
.bulk-progress-count {
  margin-top: 6px;
  font-size: 0.8rem;
  color: var(--muted);
  text-align: right;
  font-weight: 600;
}

/* ── 完了モーダル ── */
.bulk-complete-modal {
  text-align: center;
  padding: 8px 0 0;
}
.bulk-complete-icon {
  font-size: 3rem;
  color: var(--success);
  margin-bottom: 12px;
  animation: bounce-in 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55) both;
}
@keyframes bounce-in {
  0% {
    transform: scale(0.3);
    opacity: 0;
  }
  60% {
    transform: scale(1.1);
    opacity: 1;
  }
  100% {
    transform: scale(1);
  }
}
.bulk-complete-title {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 6px;
}
.bulk-complete-sub {
  font-size: 0.88rem;
  margin-bottom: 10px;
  color: var(--warning);
  font-weight: 600;
}
.bulk-complete-list {
  text-align: left;
  list-style: none;
  max-height: 240px;
  overflow-y: auto;
  padding: 12px 16px;
  background: #f8fafc;
  border-radius: 8px;
  border: 1px solid var(--border);
  margin: 12px 0;
  font-size: 0.85rem;
}
.bulk-complete-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
  border-bottom: 1px solid #e2e8f0;
}
.bulk-complete-list li:last-child {
  border-bottom: none;
}
.bulk-fail-list {
  text-align: left;
  background: #fff5f5;
  border: 1px solid #fed7d7;
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 0.82rem;
  margin-top: 8px;
}
.bulk-fail-list ul {
  list-style: none;
  margin-top: 4px;
}
.bulk-fail-list li {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 0;
}
.bulk-complete-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-top: 16px;
  flex-wrap: wrap;
}

/* ── モバイル対応 ── */
@media (max-width: 600px) {
  .reg-mode-tabs {
    gap: 4px;
    padding: 8px 10px 0;
  }
  .reg-mode-tab {
    flex: 1;
    justify-content: center;
    padding: 8px 10px;
    font-size: 0.8rem;
  }
  .bulk-part-row {
    padding: 8px;
    gap: 6px;
  }
  .bulk-photo-add-btn,
  .bulk-photo-preview {
    width: 58px;
    height: 58px;
  }
  .bulk-part-photo {
    flex: 0 0 60px;
    width: 60px;
  }
  .bulk-mold-inp {
    font-size: 0.85rem;
    padding: 8px 10px;
  }
  .bulk-part-del-btn {
    width: 30px;
    height: 30px;
  }
  .bulk-complete-modal {
    padding: 0;
  }
  .bulk-complete-title {
    font-size: 1.1rem;
  }
  .bulk-complete-actions {
    flex-direction: column;
  }
  .bulk-complete-actions .btn {
    width: 100%;
  }
}

/* ════════════════════════════════════════════════
   工程表 PDF出力ボタン
   ════════════════════════════════════════════════ */
.db-icon-btn--pdf {
  background: linear-gradient(135deg, #c0392b, #e74c3c);
  color: #fff !important;
  border-color: #c0392b;
}
.db-icon-btn--pdf:hover {
  background: linear-gradient(135deg, #a93226, #cb4335);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(192, 57, 43, 0.35);
}

/* PDF生成中のローディングオーバーレイ */
#pdf-loading-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.72);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 99999;
  gap: 16px;
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
  backdrop-filter: blur(3px);
}
#pdf-loading-overlay .pdf-spin {
  width: 48px;
  height: 48px;
  border: 5px solid rgba(255, 255, 255, 0.25);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

/* ════════════════════════════════════════
   v6.0 新機能追加スタイル
   ════════════════════════════════════════ */

/* ── アナウンスバナー ── */
.home-announcements {
  display: none;
  padding: 0 12px;
  margin-bottom: 8px;
}
.ann-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 10px;
  margin-bottom: 8px;
  font-size: 0.88rem;
  font-weight: 600;
  animation: slideInDown 0.3s ease;
}
.ann-defect {
  background: #fef2f2;
  color: #b91c1c;
  border-left: 4px solid #ef4444;
}
.ann-completed {
  background: #f0fdf4;
  color: #15803d;
  border-left: 4px solid #22c55e;
}
.ann-msg {
  flex: 1;
}
.ann-btn {
  flex-shrink: 0;
  font-size: 0.78rem;
  padding: 4px 10px;
  background: #fff;
  border: 1.5px solid currentColor;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
}
.ann-btn:hover {
  opacity: 0.8;
}
@keyframes slideInDown {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ── 外注費 0円 赤ハイライト ── */
.outsource-card--no-cost {
  border: 2px solid #fca5a5 !important;
  background: #fff8f8 !important;
}
.oc-no-cost-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.72rem;
  font-weight: 700;
  color: #dc2626;
  background: #fee2e2;
  border-radius: 4px;
  padding: 2px 7px;
}
.oc-no-cost-summary {
  font-size: 0.78rem;
  color: #dc2626;
  font-weight: 600;
}
.oc-cost-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: #f8fafc;
  border-top: 1px solid #e2e8f0;
  flex-wrap: wrap;
}
.oc-cost-label {
  font-size: 0.82rem;
  font-weight: 600;
  color: #475569;
  white-space: nowrap;
}
.oc-cost-inp {
  width: 120px;
  padding: 6px 8px;
  border: 1.5px solid #cbd5e1;
  border-radius: 6px;
  font-size: 0.9rem;
}
.oc-cost-inp--empty {
  border-color: #fca5a5;
  background: #fff8f8;
  color: #dc2626;
}
.oc-cost-val {
  font-size: 0.9rem;
  font-weight: 700;
  color: #0f172a;
}

/* ── 工程承認待ちカード ── */
.apprwait-card {
  background: #fff;
  border-radius: 10px;
  border: 1.5px solid #e2e8f0;
  margin-bottom: 10px;
  padding: 14px;
  cursor: pointer;
  transition: box-shadow 0.2s;
}
.apprwait-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.apprwait-header {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.apprwait-count-badge {
  font-size: 0.75rem;
  font-weight: 700;
  color: #7c3aed;
  background: #ede9fe;
  border-radius: 12px;
  padding: 2px 8px;
  margin-left: auto;
}
.apprwait-info {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 0.85rem;
  margin-bottom: 6px;
}
.apprwait-customer {
  font-weight: 700;
  color: #0f172a;
}
.apprwait-mold {
  color: #475569;
}
.apprwait-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 6px;
}
.apprwait-tag {
  font-size: 0.75rem;
  padding: 3px 8px;
  border-radius: 10px;
  background: #fef3c7;
  color: #92400e;
  border: 1px solid #fde68a;
  font-weight: 600;
}
.apprwait-foot {
  display: flex;
  gap: 12px;
  font-size: 0.78rem;
  color: #64748b;
  border-top: 1px solid #f1f5f9;
  padding-top: 8px;
  margin-top: 4px;
}
.apprwait-summary {
  background: #f8fafc;
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 0.88rem;
  color: #475569;
  margin-bottom: 12px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ── NEWバッジ ── */
.new-stamp-badge {
  display: inline-block;
  background: linear-gradient(135deg, #f97316, #ef4444);
  color: #fff;
  font-size: 0.62rem;
  font-weight: 900;
  padding: 2px 5px;
  border-radius: 4px;
  letter-spacing: 0.5px;
  box-shadow: 0 1px 4px rgba(239, 68, 68, 0.4);
  pointer-events: none;
  user-select: none;
}
.new-stamp-badge.new-stamp-card {
  position: absolute;
  top: 4px;
  left: 4px;
  z-index: 2;
  font-size: 0.65rem;
}
.new-stamp-inline {
  display: inline-block;
  background: linear-gradient(135deg, #f97316, #ef4444);
  color: #fff;
  font-size: 0.58rem;
  font-weight: 900;
  padding: 1px 4px;
  border-radius: 3px;
  margin-right: 4px;
  vertical-align: middle;
}

/* ── 資料添付エリア強化 ── */
.db-doc-add-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.78rem;
  padding: 4px 10px;
  border: 1.5px solid var(--primary);
  color: var(--primary);
  border-radius: 6px;
  background: #fff;
  cursor: pointer;
  transition: background 0.15s;
}
.db-doc-add-btn:hover {
  background: var(--primary-lt, #f0f4ff);
}
.db-docs-area {
  background: #fff;
  border-radius: 10px;
  border: 1.5px solid #e2e8f0;
  margin-bottom: 12px;
  overflow: hidden;
}
.db-docs-area .db-photos-head {
  display: flex;
  align-items: center;
  padding: 10px 14px;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
}

/* ── フォント縮小・余白圧縮（タブレット/案件一覧） ── */
@media (max-width: 1024px) {
  .work-tag {
    font-size: 0.68rem !important;
    padding: 2px 5px !important;
  }
  .project-table td {
    padding: 5px 6px !important;
    font-size: 0.8rem !important;
  }
  .project-table th {
    padding: 5px 6px !important;
    font-size: 0.8rem !important;
  }
  .work-tag-cell {
    max-width: 160px;
  }
}

/* ── サイドバーバッジ ── */
.sb-badge-red {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  border-radius: 9px;
  background: #ef4444;
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 0 4px;
  margin-left: auto;
}
.sb-badge-red.hidden {
  display: none;
}

/* ── ホームメニューバッジ ── */
.home-menu-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  border-radius: 9px;
  background: #ef4444;
  color: #fff;
  font-size: 0.65rem;
  font-weight: 900;
  padding: 0 4px;
  position: absolute;
  top: 4px;
  right: 4px;
}
.hm-badge {
  /* alias */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  border-radius: 8px;
  font-size: 0.62rem;
  font-weight: 900;
  padding: 0 3px;
}
.hm-badge-red {
  background: #ef4444;
  color: #fff;
}

/* ── 不具合対策案スタイル ── */
.drc-countermeasure {
  border-left: 3px solid var(--primary, #3b82f6);
  background: #f0f4ff;
  border-radius: 0 6px 6px 0;
  padding: 6px 10px;
  margin-top: 4px;
}
.drc-countermeasure .drc-info-label {
  color: var(--primary, #3b82f6);
}

/* ── サイドメニュー アイコン強調 ── */
.sb-item i {
  width: 18px;
  text-align: center;
}

/* ── ホームメニューアイテムの相対配置（バッジ用） ── */
.home-menu-item {
  position: relative;
}

/* ── 案件一覧 タブレット余白圧縮 ── */
@media (max-width: 900px) {
  .project-card {
    padding: 10px 10px 8px !important;
    margin-bottom: 8px !important;
  }
  .pc-mold {
    font-size: 0.85rem !important;
  }
  .pc-customer {
    font-size: 0.78rem !important;
  }
  .pc-meta {
    gap: 4px !important;
  }
  .work-tag {
    font-size: 0.68rem !important;
    padding: 2px 5px !important;
  }
  .status-badge {
    font-size: 0.7rem !important;
    padding: 3px 7px !important;
  }
}

/* ── 詳細画面 外注費が0の時の強調 ── */
.db-sales-card .outsource-cost-zero {
  color: #dc2626;
  font-weight: 700;
  background: #fee2e2;
  border-radius: 4px;
  padding: 2px 6px;
  font-size: 0.85rem;
}

/* ── ann-card でホーム上部バナー ── */
#home-announcements {
  padding: 0 0 4px;
}

/* ════════════════════════════
   不具合確認者マスター
   ════════════════════════════ */
.defect-reviewer-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.defect-reviewer-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 8px;
  background: #f0f9ff;
  border: 1px solid #bae6fd;
  color: #0c4a6e;
  font-weight: 600;
  font-size: 0.92rem;
}
.defect-reviewer-option {
  border-radius: 6px;
  transition: background 0.15s;
}
.defect-reviewer-option:hover {
  background: #f5f3ff;
}
.reviewer-selected {
  background: #ede9fe !important;
}

/* ════════════════════════════
   従業員マスター 不具合閲覧確認者トグル
   ════════════════════════════ */
.defect-viewer-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  user-select: none;
  padding: 4px 8px;
  border-radius: 6px;
  transition: background 0.15s;
}
.defect-viewer-toggle:hover {
  background: #f0f9ff;
}
.defect-viewer-toggle input[type="checkbox"] {
  width: 16px;
  height: 16px;
  cursor: pointer;
}
.dv-on {
  color: var(--success, #16a34a);
  font-size: 0.82rem;
  font-weight: 600;
}
.dv-off {
  color: var(--muted, #9ca3af);
  font-size: 0.82rem;
}

/* ═══════════════════════════════════════════════════════════════
   【v7.0】不具合報告カード V3 — アコーディオン式 + 確認者縦列テーブル
   ═══════════════════════════════════════════════════════════════ */

/* ── アコーディオン ヘッダー（常時表示・3行サマリー） ── */
.drc-accordion-header {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 11px 16px;
  cursor: pointer;
  background: #fff1f2;
  border-bottom: 1px solid #fecdd3;
  transition: background 0.15s;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.drc-accordion-header:hover {
  background: #ffe4e6;
}
.drc-all-checked .drc-accordion-header {
  background: #f0fdf4;
  border-bottom-color: #bbf7d0;
}
.drc-all-checked .drc-accordion-header:hover {
  background: #dcfce7;
}

/* 1行目: 発生日 / 客先名 / 金型名 + シェブロン */
.drc-acc-row1 {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  min-height: 28px;
}
.drc-acc-date {
  font-size: 0.76rem;
  color: var(--muted);
  white-space: nowrap;
  flex-shrink: 0;
}
.drc-acc-sep {
  font-size: 0.76rem;
  color: #ccc;
  flex-shrink: 0;
}
.drc-acc-customer {
  font-size: 1rem;
  font-weight: 800;
  color: var(--primary-dk);
  white-space: nowrap;
  flex-shrink: 0;
}
.drc-acc-mold {
  font-size: 1rem;
  font-weight: 900;
  color: #1f2937;
  white-space: nowrap;
  flex-shrink: 0;
}
.drc-acc-chevron {
  font-size: 0.82rem;
  color: var(--muted);
  transition: transform 0.2s;
  flex-shrink: 0;
  margin-left: auto;
}
.drc-acc-chevron.drc-chev-open {
  transform: rotate(180deg);
}

/* 2行目: 不具合内容 */
.drc-acc-row2 {
  display: flex;
  align-items: center;
  gap: 6px;
}
.drc-acc-defect-icon {
  font-size: 0.8rem;
  color: #e05a0c;
  flex-shrink: 0;
}
.drc-acc-title {
  font-size: 0.88rem;
  color: var(--text);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

/* 3行目: 確認者ドット一覧 + ステータスチップ */
.drc-acc-row3 {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.drc-acc-viewers-label {
  font-size: 0.76rem;
  color: var(--muted);
  flex-shrink: 0;
}
.drc-acc-no-viewer {
  font-size: 0.76rem;
  color: var(--muted);
  font-style: italic;
}

/* ── drc-acc-summary は削除（後方互換で空定義のみ残す） ── */
.drc-acc-summary {
  display: contents;
}

/* ステータスチップ */
.drv-sum-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 0.78rem;
  font-weight: 700;
  white-space: nowrap;
  flex-shrink: 0;
}
.drv-sum-chip-done {
  background: #f0fdf4;
  color: #15803d;
  border: 1px solid #86efac;
}
.drv-sum-chip-pend {
  background: #fff7ed;
  color: #c2410c;
  border: 1px solid #fdba74;
}

/* シェブロンアイコン */
.drc-acc-chevron {
  font-size: 0.85rem;
  color: var(--muted);
  transition: transform 0.2s;
  flex-shrink: 0;
}
.drc-acc-chevron.drc-chev-open {
  transform: rotate(180deg);
}

/* ── アコーディオン 本文エリア ── */
.drc-accordion-body {
  /* display:none / block は JS で制御 */
}

/* ── セクション区切り ── */
.drc-section {
  padding: 16px 18px;
  border-bottom: 1px solid var(--border);
}
.drc-section:last-child {
  border-bottom: none;
}
.drc-section-defect {
  background: white;
}
.drc-section-confirm {
  background: #fffbeb;
  border-top: 1px solid #fde68a;
}

.drc-section-title {
  font-size: 0.82rem;
  font-weight: 800;
  color: #92400e;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.drc-section-title i {
  color: #d97706;
}
.drc-section-defect .drc-section-title {
  color: var(--primary-dk);
}
.drc-section-defect .drc-section-title i {
  color: var(--primary);
}

/* 確認進捗バッジ */
.drc-confirm-progress {
  margin-left: auto;
  font-size: 0.82rem;
  font-weight: 700;
  color: #c2410c;
  background: #fff7ed;
  border: 1px solid #fdba74;
  padding: 1px 8px;
  border-radius: 10px;
  text-transform: none;
  letter-spacing: 0;
}

/* ── 確認者テーブル（縦列） ── */
.drv-table {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* 確認行 */
.drv-row {
  display: grid;
  grid-template-columns: minmax(110px, auto) 52px 1fr;
  gap: 8px;
  align-items: start;
  padding: 10px 12px;
  border-radius: var(--radius);
  border: 1.5px solid;
}
.drv-row-done {
  background: #f0fdf4;
  border-color: #86efac;
}
.drv-row-pending {
  background: #f8fafc;
  border-color: var(--border);
}

/* 名前列 */
.drv-name {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 6px;
  padding-top: 2px;
}
.drv-row-done .drv-name {
  color: #065f46;
}
.drv-name i {
  font-size: 0.85rem;
  flex-shrink: 0;
}

/* ステータス列 */
.drv-status {
  font-size: 0.82rem;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 8px;
  text-align: center;
  white-space: nowrap;
}
.drv-status-done {
  background: #dcfce7;
  color: #15803d;
}
.drv-status-pending {
  background: #fef3c7;
  color: #92400e;
}

/* メタ（確認者名・日時） */
.drv-meta {
  font-size: 0.77rem;
  color: var(--muted);
  padding-top: 3px;
}

/* コメントエリア（確認入力 or コメント表示） */
.drv-comment-area {
  grid-column: 1 / -1;
  margin-top: 2px;
}

/* コメント入力ラップ */
.drv-comment-input-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.drv-comment-input {
  flex: 1;
  min-width: 160px;
  padding: 7px 10px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  font-size: 0.85rem;
  font-family: inherit;
  background: white;
  transition: border-color 0.15s;
}
.drv-comment-input:focus {
  outline: none;
  border-color: var(--primary-lt);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
}

/* 確認ボタン */
.drv-confirm-btn {
  background: var(--primary);
  color: white;
  border: none;
  border-radius: var(--radius);
  padding: 8px 16px;
  font-size: 0.85rem;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 38px;
  transition:
    background 0.15s,
    transform 0.1s;
  white-space: nowrap;
}
.drv-confirm-btn:hover {
  background: var(--primary-dk);
}
.drv-confirm-btn:active {
  transform: scale(0.97);
}

/* コメントバブル（確認済みのコメント表示） */
.drv-comment-bubble {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.8rem;
  color: #4b5563;
  background: white;
  border: 1px solid #d1fae5;
  border-radius: 8px;
  padding: 4px 10px;
  font-style: italic;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.drv-comment-bubble i {
  flex-shrink: 0;
  color: #059669;
}

/* 権限不足ノート */
.drv-lock-note {
  font-size: 0.78rem;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.drv-lock-note i {
  opacity: 0.6;
}

/* 全員完了バナー */
.drc-all-done-banner {
  margin-top: 12px;
  padding: 10px 14px;
  background: #f0fdf4;
  border: 1.5px solid #86efac;
  border-radius: var(--radius);
  color: #15803d;
  font-size: 0.88rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* 対策案なし */
.drc-no-countermeasure {
  color: var(--muted) !important;
  font-style: italic;
  background: #fff9f9 !important;
  border-color: #fecdd3 !important;
}

/* 編集ボタン（対策案ラベル内） */
.drv-edit-btn {
  padding: 2px 7px;
  font-size: 0.72rem;
  border-radius: 6px;
  margin-left: 4px;
  min-height: 24px;
}

/* ── レスポンシブ：スマートフォン ── */
@media (max-width: 540px) {
  .drc-acc-customer,
  .drc-acc-mold {
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .drc-acc-title {
    max-width: 200px;
  }
  .drv-row {
    grid-template-columns: 1fr 52px;
  }
  .drv-meta {
    grid-column: 1 / -1;
  }
  .drv-comment-area {
    grid-column: 1 / -1;
  }
  .drv-comment-input-wrap {
    flex-direction: column;
    align-items: stretch;
  }
  .drv-comment-input {
    min-width: unset;
  }
}

/* ── タブレット ── */
@media (max-width: 768px) {
  .drc-acc-customer {
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .drc-acc-mold {
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* ── 不具合ヘッダー 確認者ドット一覧（追加スタイル） ── */
.drc-acc-viewers {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 8px;
  flex-shrink: 0;
}
.drc-acc-vdot {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 12px;
  white-space: nowrap;
}
.vdot-done {
  background: #dcfce7;
  color: #15803d;
}
.vdot-pend {
  background: #fee2e2;
  color: #b91c1c;
}
.vdot-me {
  outline: 2px solid currentColor;
  outline-offset: 1px;
}
.drc-acc-vdot i {
  font-size: 0.72rem;
}
.vdot-name {
  max-width: 5em;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 540px) {
  .vdot-name {
    max-width: 3.5em;
  }
}