/**
 * 東央技研 CMS Design System v1.0
 * 3システム統一（案件管理・写真台帳・図面CAD）
 * プレミアム・立体・ゴージャス・白基調
 */

/* ===== デザイントークン ===== */
:root {
  /* Primary Colors */
  --ds-primary: #1a6de0;
  --ds-primary-light: #3b8af5;
  --ds-primary-dark: #1557b0;
  --ds-primary-glow: rgba(26,109,224,0.15);

  /* Accent (Gold/Warm) */
  --ds-accent: #f59e0b;
  --ds-accent-light: #fbbf24;
  --ds-accent-glow: rgba(245,158,11,0.12);

  /* Semantic */
  --ds-success: #10b981;
  --ds-warning: #f59e0b;
  --ds-danger: #ef4444;
  --ds-info: #3b82f6;

  /* Backgrounds */
  --ds-bg: #f3f4f8;
  --ds-bg-card: #ffffff;
  --ds-bg-elevated: #ffffff;
  --ds-bg-subtle: #f8f9fc;
  --ds-bg-muted: #eef0f4;

  /* Text */
  --ds-text: #1a1d2e;
  --ds-text-secondary: #5a6074;
  --ds-text-muted: #9ca3b4;
  --ds-text-inverse: #ffffff;

  /* Borders */
  --ds-border: rgba(0,0,0,0.08);
  --ds-border-strong: rgba(0,0,0,0.14);
  --ds-border-focus: rgba(26,109,224,0.4);

  /* Shadows — 立体感の核 */
  --ds-shadow-xs: 0 1px 2px rgba(0,0,0,0.04);
  --ds-shadow-sm: 0 1px 3px rgba(0,0,0,0.06), 0 2px 8px rgba(0,0,0,0.04);
  --ds-shadow-md: 0 2px 4px rgba(0,0,0,0.04), 0 8px 24px rgba(0,0,0,0.08);
  --ds-shadow-lg: 0 4px 8px rgba(0,0,0,0.04), 0 12px 32px rgba(0,0,0,0.1), 0 24px 48px rgba(0,0,0,0.04);
  --ds-shadow-xl: 0 8px 16px rgba(0,0,0,0.06), 0 20px 48px rgba(0,0,0,0.12), 0 32px 64px rgba(0,0,0,0.06);
  --ds-shadow-glow: 0 0 20px rgba(26,109,224,0.12), 0 4px 16px rgba(26,109,224,0.08);
  --ds-shadow-inset: inset 0 1px 0 rgba(255,255,255,0.9);
  --ds-shadow-inset-btn: inset 0 1px 0 rgba(255,255,255,0.25);

  /* Gradients */
  --ds-grad-header: linear-gradient(180deg, #ffffff 0%, #f7f8fb 100%);
  --ds-grad-card: linear-gradient(180deg, #ffffff 0%, #fcfcfe 100%);
  --ds-grad-primary: linear-gradient(180deg, #3b8af5 0%, #1a6de0 100%);
  --ds-grad-primary-hover: linear-gradient(180deg, #4d96f7 0%, #2178e8 100%);
  --ds-grad-success: linear-gradient(180deg, #34d399 0%, #10b981 100%);
  --ds-grad-danger: linear-gradient(180deg, #f87171 0%, #ef4444 100%);
  --ds-grad-gold: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  --ds-grad-subtle: linear-gradient(180deg, rgba(26,109,224,0.03) 0%, transparent 100%);

  /* Typography */
  --ds-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Hiragino Kaku Gothic ProN', 'Noto Sans JP', sans-serif;
  --ds-font-mono: 'SF Mono', 'Fira Code', monospace;
  --ds-fs-xs: 11px;
  --ds-fs-sm: 13px;
  --ds-fs-md: 15px;
  --ds-fs-lg: 18px;
  --ds-fs-xl: 22px;
  --ds-fs-2xl: 28px;
  --ds-fw-normal: 400;
  --ds-fw-medium: 500;
  --ds-fw-bold: 700;
  --ds-fw-black: 800;

  /* Spacing */
  --ds-sp-1: 4px;
  --ds-sp-2: 8px;
  --ds-sp-3: 12px;
  --ds-sp-4: 16px;
  --ds-sp-5: 20px;
  --ds-sp-6: 24px;
  --ds-sp-8: 32px;

  /* Radius */
  --ds-rad-xs: 6px;
  --ds-rad-sm: 8px;
  --ds-rad-md: 12px;
  --ds-rad-lg: 16px;
  --ds-rad-xl: 20px;
  --ds-rad-full: 9999px;

  /* Transitions */
  --ds-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ds-transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ===== 全体の背景 ===== */
body[data-pj-theme="light"],
body[data-ph-theme="light"] {
  background: var(--ds-bg) !important;
}

/* ===== 統一ヘッダー 立体化 ===== */
.pj-topbar,
.pj-detail-topbar,
.ph-header {
  background: var(--ds-grad-header) !important;
  border-bottom: 1px solid var(--ds-border) !important;
  box-shadow: var(--ds-shadow-sm) !important;
}

/* ===== 統一カード 立体化 ===== */
/* 案件管理 */
.pj-app[data-theme="light"] .pj-card,
.pj-app[data-theme="light"] .pj-board-card,
.pj-app[data-theme="light"] .pj-doc-card,
.pj-app[data-theme="light"] .pj-member-card,
.pj-app[data-theme="light"] .pj-photo-card {
  background: var(--ds-grad-card) !important;
  border: 1px solid var(--ds-border) !important;
  border-radius: var(--ds-rad-lg) !important;
  box-shadow: var(--ds-shadow-md), var(--ds-shadow-inset) !important;
  transition: var(--ds-transition) !important;
}
.pj-app[data-theme="light"] .pj-card:hover,
.pj-app[data-theme="light"] .pj-board-card:hover,
.pj-app[data-theme="light"] .pj-doc-card:hover {
  box-shadow: var(--ds-shadow-lg), var(--ds-shadow-inset) !important;
  border-color: rgba(26,109,224,0.15) !important;
  transform: translateY(-3px) !important;
}
.pj-app[data-theme="light"] .pj-card:active,
.pj-app[data-theme="light"] .pj-board-card:active {
  transform: translateY(-1px) scale(0.995) !important;
  box-shadow: var(--ds-shadow-sm), var(--ds-shadow-inset) !important;
}

/* 写真台帳 */
.ph-app[data-theme="light"] .ph-card {
  background: var(--ds-grad-card) !important;
  border: 1px solid var(--ds-border) !important;
  border-radius: var(--ds-rad-lg) !important;
  box-shadow: var(--ds-shadow-md), var(--ds-shadow-inset) !important;
  transition: var(--ds-transition) !important;
}
.ph-app[data-theme="light"] .ph-card:hover {
  box-shadow: var(--ds-shadow-lg), var(--ds-shadow-inset) !important;
  transform: translateY(-3px) !important;
}

/* ===== 統一ボタン 立体化 ===== */
/* プライマリボタン */
.pj-app[data-theme="light"] .pj-primary-btn,
.pj-app[data-theme="light"] .pj-btn-primary,
.ph-app[data-theme="light"] .ph-tool-btn.ph-tool-primary,
body[data-pj-theme="light"] .pj-btn-primary,
body[data-ph-theme="light"] .ph-tool-btn.ph-tool-primary {
  background: var(--ds-grad-primary) !important;
  color: var(--ds-text-inverse) !important;
  border: none !important;
  border-radius: var(--ds-rad-md) !important;
  box-shadow: 0 2px 4px rgba(26,109,224,0.3), 0 4px 12px rgba(26,109,224,0.15), var(--ds-shadow-inset-btn) !important;
  font-weight: var(--ds-fw-bold) !important;
  transition: var(--ds-transition) !important;
  text-shadow: 0 1px 1px rgba(0,0,0,0.1);
}
.pj-app[data-theme="light"] .pj-primary-btn:hover,
.pj-app[data-theme="light"] .pj-btn-primary:hover,
.ph-app[data-theme="light"] .ph-tool-btn.ph-tool-primary:hover,
body[data-pj-theme="light"] .pj-btn-primary:hover {
  background: var(--ds-grad-primary-hover) !important;
  box-shadow: 0 4px 8px rgba(26,109,224,0.35), 0 8px 20px rgba(26,109,224,0.2), var(--ds-shadow-inset-btn) !important;
  transform: translateY(-1px) !important;
}
.pj-app[data-theme="light"] .pj-primary-btn:active,
.pj-app[data-theme="light"] .pj-btn-primary:active,
body[data-pj-theme="light"] .pj-btn-primary:active {
  transform: translateY(0) scale(0.98) !important;
  box-shadow: 0 1px 2px rgba(26,109,224,0.3), inset 0 1px 2px rgba(0,0,0,0.1) !important;
}

/* セカンダリボタン */
.pj-app[data-theme="light"] .pj-btn-cancel,
.pj-app[data-theme="light"] .pj-icon-btn,
.ph-app[data-theme="light"] .ph-tool-btn.ph-tool-secondary,
body[data-pj-theme="light"] .pj-btn-cancel {
  background: linear-gradient(180deg, #ffffff 0%, #f5f6f8 100%) !important;
  border: 1px solid var(--ds-border-strong) !important;
  border-radius: var(--ds-rad-md) !important;
  box-shadow: var(--ds-shadow-xs), var(--ds-shadow-inset) !important;
  color: var(--ds-text-secondary) !important;
  transition: var(--ds-transition) !important;
}
.pj-app[data-theme="light"] .pj-icon-btn:hover,
.pj-app[data-theme="light"] .pj-btn-cancel:hover,
body[data-pj-theme="light"] .pj-btn-cancel:hover {
  background: linear-gradient(180deg, #ffffff 0%, #eef0f4 100%) !important;
  box-shadow: var(--ds-shadow-sm), var(--ds-shadow-inset) !important;
  border-color: rgba(26,109,224,0.2) !important;
  transform: translateY(-1px) !important;
}

/* エクスポートボタン */
.ph-app[data-theme="light"] .ph-tool-btn.ph-tool-export {
  background: linear-gradient(180deg, #14b8a6 0%, #0d9488 100%) !important;
  color: #fff !important;
  box-shadow: 0 2px 4px rgba(13,148,136,0.3), 0 4px 12px rgba(13,148,136,0.15), var(--ds-shadow-inset-btn) !important;
}

/* 危険ボタン */
.pj-app[data-theme="light"] .pj-btn-danger,
body[data-pj-theme="light"] .pj-btn-danger {
  background: var(--ds-grad-danger) !important;
  color: var(--ds-text-inverse) !important;
  border: none !important;
  box-shadow: 0 2px 4px rgba(239,68,68,0.3), 0 4px 12px rgba(239,68,68,0.15), var(--ds-shadow-inset-btn) !important;
}

/* アップロードボタン */
.pj-app[data-theme="light"] .pj-upload-btn {
  background: linear-gradient(180deg, #ffffff 0%, #f5f6f8 100%) !important;
  border: 1px dashed var(--ds-border-strong) !important;
  border-radius: var(--ds-rad-md) !important;
  box-shadow: var(--ds-shadow-xs) !important;
  color: var(--ds-primary) !important;
  font-weight: var(--ds-fw-bold) !important;
  transition: var(--ds-transition) !important;
}
.pj-app[data-theme="light"] .pj-upload-btn:hover {
  border-color: var(--ds-primary) !important;
  background: linear-gradient(180deg, #f0f6ff 0%, #e8f0fe 100%) !important;
  box-shadow: var(--ds-shadow-sm), 0 0 12px rgba(26,109,224,0.06) !important;
}

/* ===== 統一入力欄 立体化 ===== */
.pj-app[data-theme="light"] .pj-input,
.pj-app[data-theme="light"] .pj-textarea,
.pj-app[data-theme="light"] .pj-field-input,
.pj-app[data-theme="light"] .pj-field-textarea,
.pj-app[data-theme="light"] select,
.ph-app[data-theme="light"] .ph-input,
.ph-app[data-theme="light"] .ph-textarea,
.ph-app[data-theme="light"] .ph-select,
body[data-pj-theme="light"] .pj-input,
body[data-pj-theme="light"] .pj-textarea,
body[data-pj-theme="light"] .pj-field-input,
body[data-ph-theme="light"] .ph-input,
body[data-ph-theme="light"] .ph-textarea,
body[data-ph-theme="light"] .ph-select {
  background: var(--ds-bg-subtle) !important;
  border: 1px solid var(--ds-border-strong) !important;
  border-radius: var(--ds-rad-sm) !important;
  color: var(--ds-text) !important;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.03) !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
}
.pj-app[data-theme="light"] .pj-input:focus,
.pj-app[data-theme="light"] .pj-textarea:focus,
.pj-app[data-theme="light"] .pj-field-input:focus,
.ph-app[data-theme="light"] .ph-input:focus,
.ph-app[data-theme="light"] .ph-textarea:focus,
body[data-pj-theme="light"] .pj-input:focus,
body[data-pj-theme="light"] .pj-textarea:focus,
body[data-ph-theme="light"] .ph-input:focus {
  border-color: var(--ds-border-focus) !important;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.03), 0 0 0 3px var(--ds-primary-glow) !important;
  outline: none !important;
}

/* ===== チップ/バッジ 立体化 ===== */
.pj-app[data-theme="light"] .pj-chip,
.ph-app[data-theme="light"] .ph-chip {
  background: var(--ds-bg-card) !important;
  border: 1px solid var(--ds-border) !important;
  border-radius: var(--ds-rad-full) !important;
  box-shadow: var(--ds-shadow-xs) !important;
  font-weight: var(--ds-fw-bold) !important;
  transition: var(--ds-transition) !important;
}
.pj-app[data-theme="light"] .pj-chip.active,
.pj-app[data-theme="light"] .pj-chip:hover,
.ph-app[data-theme="light"] .ph-chip.active {
  background: linear-gradient(180deg, #e8f0fe 0%, #d4e4fd 100%) !important;
  border-color: rgba(26,109,224,0.3) !important;
  color: var(--ds-primary) !important;
  box-shadow: var(--ds-shadow-xs), 0 0 8px rgba(26,109,224,0.06) !important;
}

/* ===== ボトムナビ 立体化 ===== */
.pj-app[data-theme="light"] .pj-bottom-nav,
.ph-app[data-theme="light"] .ph-bottom-nav {
  background: linear-gradient(180deg, #ffffff 0%, #f8f9fb 100%) !important;
  border-top: 1px solid var(--ds-border) !important;
  box-shadow: 0 -4px 16px rgba(0,0,0,0.04), 0 -1px 4px rgba(0,0,0,0.02) !important;
}
.pj-app[data-theme="light"] .pj-nav-item.active,
.ph-app[data-theme="light"] .ph-nav-item.active {
  color: var(--ds-primary) !important;
}

/* ===== タブ 立体化 ===== */
.pj-app[data-theme="light"] .pj-detail-tabs {
  background: var(--ds-bg-card) !important;
  border-radius: var(--ds-rad-lg) !important;
  box-shadow: var(--ds-shadow-sm) !important;
  border: 1px solid var(--ds-border) !important;
  padding: 4px !important;
}
.pj-app[data-theme="light"] .pj-detail-tab.active {
  background: var(--ds-grad-primary) !important;
  color: var(--ds-text-inverse) !important;
  border-radius: var(--ds-rad-md) !important;
  box-shadow: 0 2px 8px rgba(26,109,224,0.2), var(--ds-shadow-inset-btn) !important;
}

/* ===== ステータスフロー（概要ページ）立体化 ===== */
.pj-app[data-theme="light"] .pj-status-step {
  box-shadow: var(--ds-shadow-xs) !important;
}
.pj-app[data-theme="light"] .pj-status-step.active {
  box-shadow: var(--ds-shadow-sm), 0 0 12px var(--ds-primary-glow) !important;
}

/* ===== プログレスバー 立体化 ===== */
.pj-app[data-theme="light"] .pj-progress-bar,
.ph-app[data-theme="light"] .ph-export-progress-bar {
  background: var(--ds-bg-muted) !important;
  border-radius: var(--ds-rad-full) !important;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.06) !important;
  overflow: hidden !important;
}

/* ===== モーダル/オーバーレイ 立体化 ===== */
body[data-pj-theme="light"] .pj-task-form,
body[data-ph-theme="light"] [style*="border-radius:16px"][style*="background:var(--ph-bg2"] {
  background: var(--ds-bg-card) !important;
  border: 1px solid var(--ds-border) !important;
  border-radius: var(--ds-rad-xl) !important;
  box-shadow: var(--ds-shadow-xl) !important;
  color: var(--ds-text) !important;
}

/* ===== ツールバー(写真台帳) 立体化 ===== */
.ph-app[data-theme="light"] .ph-toolbar {
  background: linear-gradient(180deg, #ffffff 0%, #f8f9fb 100%) !important;
  border: 1px solid var(--ds-border) !important;
  box-shadow: var(--ds-shadow-md) !important;
  border-radius: var(--ds-rad-lg) !important;
}

/* ===== ズームコントロール 立体化 ===== */
.ph-app[data-theme="light"] .ph-zoom-btn {
  background: linear-gradient(180deg, #ffffff 0%, #f5f6f8 100%) !important;
  border: 1px solid var(--ds-border-strong) !important;
  box-shadow: var(--ds-shadow-sm) !important;
  color: var(--ds-text) !important;
}
.ph-app[data-theme="light"] .ph-zoom-btn:hover {
  box-shadow: var(--ds-shadow-md) !important;
  transform: translateY(-1px) !important;
}

/* ===== セクションヘッダー装飾 ===== */
.pj-app[data-theme="light"] .pj-section-title,
.pj-app[data-theme="light"] h3 {
  color: var(--ds-text) !important;
}

/* ===== 空状態 ===== */
.pj-app[data-theme="light"] .pj-empty {
  background: var(--ds-bg-card) !important;
  border: 2px dashed var(--ds-border) !important;
  border-radius: var(--ds-rad-lg) !important;
  box-shadow: var(--ds-shadow-xs) !important;
}

/* ===== リンクボタン ===== */
.pj-app[data-theme="light"] .pj-link-btn {
  color: var(--ds-primary) !important;
  font-weight: var(--ds-fw-bold) !important;
}

/* ===== スクロールバー (Webkit) ===== */
.pj-app[data-theme="light"] ::-webkit-scrollbar,
.ph-app[data-theme="light"] ::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
.pj-app[data-theme="light"] ::-webkit-scrollbar-track,
.ph-app[data-theme="light"] ::-webkit-scrollbar-track {
  background: transparent;
}
.pj-app[data-theme="light"] ::-webkit-scrollbar-thumb,
.ph-app[data-theme="light"] ::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.12);
  border-radius: 3px;
}
.pj-app[data-theme="light"] ::-webkit-scrollbar-thumb:hover,
.ph-app[data-theme="light"] ::-webkit-scrollbar-thumb:hover {
  background: rgba(0,0,0,0.2);
}

/* ===== テーブル（エクスポート一覧表等）立体化 ===== */
.ph-app[data-theme="light"] .ph-export-table {
  background: var(--ds-bg-card) !important;
  border-radius: var(--ds-rad-lg) !important;
  box-shadow: var(--ds-shadow-sm) !important;
  overflow: hidden !important;
  border: 1px solid var(--ds-border) !important;
}
.ph-app[data-theme="light"] .ph-export-table th {
  background: var(--ds-bg-subtle) !important;
  font-weight: var(--ds-fw-bold) !important;
}

/* ===== セレクト option ===== */
.pj-app[data-theme="light"] select option,
.ph-app[data-theme="light"] select option,
body[data-pj-theme="light"] select option,
body[data-ph-theme="light"] select option {
  background: #ffffff !important;
  color: var(--ds-text) !important;
}

/* ===== 微細なアニメーション（射幸心） ===== */
@keyframes ds-shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
@keyframes ds-pulse-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(26,109,224,0.15); }
  50% { box-shadow: 0 0 16px 4px rgba(26,109,224,0.08); }
}

/* カードのシマー効果 */
.pj-app[data-theme="light"] .pj-card::before,
.ph-app[data-theme="light"] .ph-card::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important; left: 0 !important;
  right: 0 !important; bottom: 0 !important;
  background: linear-gradient(
    135deg,
    transparent 0%,
    rgba(26,109,224,0.02) 30%,
    rgba(26,109,224,0.04) 50%,
    rgba(26,109,224,0.02) 70%,
    transparent 100%
  ) !important;
  pointer-events: none !important;
  border-radius: inherit !important;
}

/* アクティブなナビアイテムのグロー */
.pj-app[data-theme="light"] .pj-nav-item.active::after,
.ph-app[data-theme="light"] .ph-nav-item.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 24px;
  height: 3px;
  background: var(--ds-grad-primary);
  border-radius: 2px;
  box-shadow: 0 0 8px rgba(26,109,224,0.3);
}

/* ===== アクセシビリティ: 色コントラスト比 WCAG 2.1 AA ===== */
/* 薄い色のテキストを最低4.5:1比率に引き上げ */
.pj-app[data-theme="light"] [style*="color:var(--sub)"],
.pj-app[data-theme="light"] .pj-sub,
.ph-app[data-theme="light"] .ph-sub {
  color: #5a6074 !important; /* #999→#5a6074 白背景で5.0:1 */
}
.pj-app[data-theme="light"] [style*="color:#999"],
.ph-app[data-theme="light"] [style*="color:#999"] {
  color: #5a6074 !important;
}
.pj-app[data-theme="light"] [style*="color:#888"],
.ph-app[data-theme="light"] [style*="color:#888"] {
  color: #5a6074 !important;
}
/* プレースホルダー: 最低3:1 */
.pj-app[data-theme="light"] ::placeholder,
.ph-app[data-theme="light"] ::placeholder {
  color: #767b8a !important; /* 白背景で3.5:1 */
}
/* 小さいテキスト（11px以下）はさらに濃く */
.pj-app[data-theme="light"] [style*="font-size:10px"],
.pj-app[data-theme="light"] [style*="font-size:11px"],
.ph-app[data-theme="light"] [style*="font-size:10px"],
.ph-app[data-theme="light"] [style*="font-size:11px"] {
  color: #4a4f5e !important; /* 小さい文字は濃く */
}

/* ===== 図面CAD ライトテーマ 3D強化 ===== */

/* タイトルバー立体化 */
.dw-app[data-theme="light"] .dw-titlebar {
  background: linear-gradient(180deg, #ffffff 0%, #f7f8fb 100%) !important;
  border-bottom: 1px solid rgba(0,0,0,0.08) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04) !important;
}

/* 図面選択画面トップ立体化 */
.dw-app[data-theme="light"] .dw-sel-top {
  background: linear-gradient(180deg, #ffffff 0%, #f7f8fb 100%) !important;
  border-bottom: 1px solid rgba(0,0,0,0.08) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important;
}

/* 案件カード立体化 */
.dw-app[data-theme="light"] .dw-pjcard {
  background: linear-gradient(180deg, #ffffff 0%, #fcfcfe 100%) !important;
  border: 1px solid rgba(0,0,0,0.08) !important;
  border-radius: 16px !important;
  box-shadow:
    0 2px 4px rgba(0,0,0,0.04),
    0 8px 24px rgba(0,0,0,0.08),
    inset 0 1px 0 rgba(255,255,255,0.9) !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.dw-app[data-theme="light"] .dw-pjcard:hover {
  box-shadow:
    0 4px 8px rgba(0,0,0,0.04),
    0 12px 32px rgba(0,0,0,0.1),
    0 24px 48px rgba(0,0,0,0.04),
    inset 0 1px 0 rgba(255,255,255,0.9) !important;
  border-color: rgba(26,109,224,0.15) !important;
  transform: translateY(-3px) !important;
}

/* 図面リストアイテム立体化 */
.dw-app[data-theme="light"] .dw-dwcard {
  background: linear-gradient(180deg, #ffffff 0%, #fcfcfe 100%) !important;
  border: 1px solid rgba(0,0,0,0.07) !important;
  border-radius: 12px !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05), 0 4px 12px rgba(0,0,0,0.06), inset 0 1px 0 rgba(255,255,255,0.9) !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.dw-app[data-theme="light"] .dw-dwcard:hover {
  box-shadow: 0 4px 8px rgba(0,0,0,0.06), 0 12px 24px rgba(0,0,0,0.08), inset 0 1px 0 rgba(255,255,255,0.9) !important;
  border-color: rgba(26,109,224,0.15) !important;
  transform: translateY(-2px) !important;
}

/* 右パネル立体化 */
.dw-app[data-theme="light"] .dw-rpanel {
  background: linear-gradient(180deg, #ffffff 0%, #f8f9fb 100%) !important;
  border-left: 1px solid rgba(0,0,0,0.08) !important;
  box-shadow: -4px 0 16px rgba(0,0,0,0.04) !important;
}

/* ツールバーボタン立体化（ライトテーマ） */
.dw-app[data-theme="light"] .dw-tb-btn {
  background: linear-gradient(180deg, #ffffff 0%, #f3f5f8 100%) !important;
  border: 1px solid rgba(0,0,0,0.12) !important;
  border-radius: 10px !important;
  color: #3a3d52 !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08), 0 2px 8px rgba(0,0,0,0.04), inset 0 1px 0 rgba(255,255,255,0.9) !important;
  transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.dw-app[data-theme="light"] .dw-tb-btn:hover {
  background: linear-gradient(180deg, #ffffff 0%, #eaecf0 100%) !important;
  box-shadow: 0 3px 8px rgba(0,0,0,0.1), 0 6px 16px rgba(0,0,0,0.06), inset 0 1px 0 rgba(255,255,255,0.9) !important;
  border-color: rgba(26,109,224,0.2) !important;
  transform: translateY(-1px) !important;
  color: #1a6de0 !important;
}
.dw-app[data-theme="light"] .dw-tb-btn.active {
  background: linear-gradient(180deg, #e8f0fe 0%, #d4e4fd 100%) !important;
  border-color: rgba(26,109,224,0.3) !important;
  color: #1a6de0 !important;
  box-shadow: 0 2px 8px rgba(26,109,224,0.15), 0 0 12px rgba(26,109,224,0.08), inset 0 1px 0 rgba(255,255,255,0.6) !important;
}

/* 戻るボタン立体化 */
.dw-app[data-theme="light"] .dw-tb-back {
  background: linear-gradient(180deg, #ffffff 0%, #f3f5f8 100%) !important;
  border: 1px solid rgba(0,0,0,0.10) !important;
  color: #5a6074 !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06), inset 0 1px 0 rgba(255,255,255,0.9) !important;
  border-radius: 10px !important;
}
.dw-app[data-theme="light"] .dw-tb-back:hover {
  background: linear-gradient(180deg, #f0f6ff 0%, #e8f0fe 100%) !important;
  border-color: rgba(26,109,224,0.3) !important;
  color: #1a6de0 !important;
  box-shadow: 0 3px 8px rgba(26,109,224,0.12), inset 0 1px 0 rgba(255,255,255,0.9) !important;
}

/* 戻るボタン（選択画面）立体化 */
.dw-app[data-theme="light"] .dw-sel-back {
  background: linear-gradient(180deg, #e8f0fe 0%, #d4e4fd 100%) !important;
  border: 1px solid rgba(26,109,224,0.25) !important;
  border-radius: 12px !important;
  color: #1a6de0 !important;
  box-shadow: 0 2px 6px rgba(26,109,224,0.12), inset 0 1px 0 rgba(255,255,255,0.5) !important;
}
.dw-app[data-theme="light"] .dw-sel-back:hover {
  background: linear-gradient(180deg, #d4e4fd 0%, #c2d6fb 100%) !important;
  box-shadow: 0 4px 12px rgba(26,109,224,0.2), inset 0 1px 0 rgba(255,255,255,0.4) !important;
}

/* 設定ダイアログ立体化 */
.dw-app[data-theme="light"] .dw-settings-box {
  background: #ffffff !important;
  border: 1px solid rgba(0,0,0,0.08) !important;
  box-shadow: 0 8px 16px rgba(0,0,0,0.06), 0 20px 48px rgba(0,0,0,0.12) !important;
}

/* テーマカード立体化 */
.dw-app[data-theme="light"] .dw-theme-card {
  background: linear-gradient(180deg, #ffffff 0%, #f8f9fb 100%) !important;
  border: 2px solid rgba(0,0,0,0.08) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06), inset 0 1px 0 rgba(255,255,255,0.9) !important;
}
.dw-app[data-theme="light"] .dw-theme-card.on {
  background: linear-gradient(180deg, #e8f0fe 0%, #d4e4fd 100%) !important;
  border-color: rgba(26,109,224,0.4) !important;
  box-shadow: 0 2px 12px rgba(26,109,224,0.2), inset 0 1px 0 rgba(255,255,255,0.6) !important;
}

/* CADモード切替ボタン立体化 */
.dw-app[data-theme="light"] .dw-cad-mode-sw {
  background: rgba(0,0,0,0.04) !important;
  border: 1px solid rgba(0,0,0,0.08) !important;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.06) !important;
}
.dw-app[data-theme="light"] .dw-cad-mode-btn.on {
  background: linear-gradient(180deg, #e8f0fe 0%, #d4e4fd 100%) !important;
  color: #1a6de0 !important;
  box-shadow: 0 2px 6px rgba(26,109,224,0.15) !important;
}

/* 入力/セレクト立体化 */
.dw-app[data-theme="light"] .dw-settings-row input:not([type=color]):not([type=range]):not([type=checkbox]),
.dw-app[data-theme="light"] .dw-settings-row select {
  background: #f8f9fc !important;
  border: 1px solid rgba(0,0,0,0.14) !important;
  border-radius: 8px !important;
  color: #1a1d2e !important;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.03) !important;
}
.dw-app[data-theme="light"] .dw-settings-row input:focus,
.dw-app[data-theme="light"] .dw-settings-row select:focus {
  border-color: rgba(26,109,224,0.4) !important;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.03), 0 0 0 3px rgba(26,109,224,0.12) !important;
}

/* ステータスバー立体化 */
.dw-app[data-theme="light"] .dw-status {
  background: linear-gradient(180deg, #eef0f4 0%, #f3f4f8 100%) !important;
  border-top: 1px solid rgba(0,0,0,0.07) !important;
  box-shadow: 0 -1px 4px rgba(0,0,0,0.03) !important;
}

/* プロメニューバー立体化 */
.dw-app[data-theme="light"] .dw-pro-menubar {
  background: linear-gradient(180deg, #ffffff 0%, #f7f8fb 100%) !important;
  border-bottom: 1px solid rgba(0,0,0,0.07) !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04) !important;
}
.dw-app[data-theme="light"] .dw-pro-menu-drop {
  background: #ffffff !important;
  border: 1px solid rgba(0,0,0,0.10) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.1), 0 2px 8px rgba(0,0,0,0.06) !important;
}

/* スクロールバー */
.dw-app[data-theme="light"] ::-webkit-scrollbar { width: 6px; height: 6px; }
.dw-app[data-theme="light"] ::-webkit-scrollbar-track { background: transparent; }
.dw-app[data-theme="light"] ::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.12);
  border-radius: 3px;
}
.dw-app[data-theme="light"] ::-webkit-scrollbar-thumb:hover {
  background: rgba(0,0,0,0.2);
}

/* ===== カレンダー 立体化 ===== */
.pj-app[data-theme="light"] .pj-cal-header {
  background: var(--ds-bg-card) !important;
  border-radius: var(--ds-rad-lg) !important;
  box-shadow: var(--ds-shadow-sm), var(--ds-shadow-inset) !important;
  border: 1px solid var(--ds-border) !important;
  padding: 12px 16px !important;
  margin-bottom: 12px !important;
}
.pj-app[data-theme="light"] .pj-cal-nav {
  background: linear-gradient(180deg, #ffffff 0%, #f3f5f8 100%) !important;
  border: 1px solid var(--ds-border-strong) !important;
  border-radius: var(--ds-rad-sm) !important;
  box-shadow: var(--ds-shadow-xs), var(--ds-shadow-inset) !important;
  color: var(--ds-text) !important;
}
.pj-app[data-theme="light"] .pj-cal-nav:hover {
  box-shadow: var(--ds-shadow-sm), var(--ds-shadow-inset) !important;
  border-color: rgba(26,109,224,0.25) !important;
}
.pj-app[data-theme="light"] .pj-cal-cell {
  background: var(--ds-bg-card) !important;
  border: 1px solid var(--ds-border) !important;
  border-radius: var(--ds-rad-sm) !important;
  box-shadow: var(--ds-shadow-xs) !important;
  transition: var(--ds-transition) !important;
}
.pj-app[data-theme="light"] .pj-cal-cell:hover {
  box-shadow: var(--ds-shadow-sm) !important;
  border-color: rgba(26,109,224,0.2) !important;
  transform: translateY(-1px) !important;
}
.pj-app[data-theme="light"] .pj-cal-cell.today {
  background: linear-gradient(180deg, #f0f6ff 0%, #e8f0fe 100%) !important;
  border-color: rgba(26,109,224,0.3) !important;
  box-shadow: var(--ds-shadow-sm), 0 0 0 2px rgba(26,109,224,0.12) !important;
}
.pj-app[data-theme="light"] .pj-cal-list-item {
  background: var(--ds-bg-card) !important;
  border: 1px solid var(--ds-border) !important;
  border-radius: var(--ds-rad-sm) !important;
  box-shadow: var(--ds-shadow-xs) !important;
  transition: var(--ds-transition) !important;
}
.pj-app[data-theme="light"] .pj-cal-list-item:hover {
  box-shadow: var(--ds-shadow-sm) !important;
  transform: translateY(-1px) !important;
}


/* ===== 2026 UIリデザイン v2.0 ===== */

/* グラスモーフィズム */
.ds-glass{background:rgba(255,255,255,0.7);backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);border:1px solid rgba(255,255,255,0.3)}

/* マイクロインタラクション */
@keyframes ds-fade-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes ds-scale-in{from{opacity:0;transform:scale(0.95)}to{opacity:1;transform:scale(1)}}
@keyframes ds-slide-up{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@keyframes ds-shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
.ds-animate-in{animation:ds-fade-in 0.4s ease both}
.ds-animate-scale{animation:ds-scale-in 0.3s ease both}
.ds-stagger>*{animation:ds-fade-in 0.4s ease both}
.ds-stagger>*:nth-child(1){animation-delay:0.05s}.ds-stagger>*:nth-child(2){animation-delay:0.1s}
.ds-stagger>*:nth-child(3){animation-delay:0.15s}.ds-stagger>*:nth-child(4){animation-delay:0.2s}
.ds-stagger>*:nth-child(5){animation-delay:0.25s}.ds-stagger>*:nth-child(6){animation-delay:0.3s}
.ds-btn-hover{transition:all 0.2s cubic-bezier(0.4,0,0.2,1)}
.ds-btn-hover:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(26,109,224,0.25)}
.ds-btn-hover:active{transform:translateY(0)}

/* スケルトン */
.ds-skeleton{background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0 50%,#f0f0f0 75%);background-size:200% 100%;animation:ds-shimmer 1.5s infinite;border-radius:6px}
.ds-skeleton-text{height:14px;margin-bottom:8px;width:80%}
.ds-skeleton-title{height:20px;margin-bottom:12px;width:60%}
.ds-skeleton-card{height:120px;border-radius:12px}

/* カラーシステム */
:root{--ds-success:#10b981;--ds-warning:#f59e0b;--ds-error:#ef4444;--ds-info:#3b82f6;--ds-success-bg:rgba(16,185,129,0.08);--ds-warning-bg:rgba(245,158,11,0.08);--ds-error-bg:rgba(239,68,68,0.08);--ds-info-bg:rgba(59,130,246,0.08);--ds-gradient-primary:linear-gradient(135deg,#1a6de0 0%,#3b82f6 50%,#60a5fa 100%);--ds-gradient-warm:linear-gradient(135deg,#f59e0b 0%,#f97316 100%)}

/* バッジ */
.ds-badge{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:20px;font-size:11px;font-weight:700}
.ds-badge-success{background:var(--ds-success-bg);color:var(--ds-success)}
.ds-badge-warning{background:var(--ds-warning-bg);color:var(--ds-warning)}
.ds-badge-error{background:var(--ds-error-bg);color:var(--ds-error)}
.ds-badge-info{background:var(--ds-info-bg);color:var(--ds-info)}

/* Bento Grid */
.ds-bento{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}
.ds-bento-wide{grid-column:span 2}

/* ツールチップ */
.ds-tooltip{position:relative}.ds-tooltip::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);background:#1e293b;color:#fff;padding:4px 10px;border-radius:6px;font-size:11px;font-weight:600;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity 0.15s;z-index:50}
.ds-tooltip:hover::after{opacity:1}

/* カード2026 */
.ds-card-2026{background:#fff;border:1px solid rgba(0,0,0,0.06);border-radius:16px;padding:20px;transition:all 0.2s cubic-bezier(0.4,0,0.2,1);box-shadow:0 1px 3px rgba(0,0,0,0.04)}
.ds-card-2026:hover{box-shadow:0 4px 16px rgba(0,0,0,0.08);transform:translateY(-1px)}

/* インプット2026 */
.ds-input-2026{width:100%;padding:10px 14px;border:1.5px solid rgba(0,0,0,0.1);border-radius:10px;font-size:14px;background:#fff;color:#1e293b;transition:all 0.15s}
.ds-input-2026:focus{outline:none;border-color:var(--ds-primary);box-shadow:0 0 0 3px var(--ds-primary-glow)}

/* ボタン2026 */
.ds-btn-2026{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:10px 20px;border-radius:10px;font-size:14px;font-weight:600;border:none;cursor:pointer;transition:all 0.2s cubic-bezier(0.4,0,0.2,1)}
.ds-btn-primary{background:var(--ds-gradient-primary);color:#fff;box-shadow:0 2px 8px rgba(26,109,224,0.25)}
.ds-btn-primary:hover{box-shadow:0 4px 16px rgba(26,109,224,0.35);transform:translateY(-1px)}
.ds-btn-secondary{background:#f1f5f9;color:#475569;border:1px solid rgba(0,0,0,0.06)}
.ds-btn-danger{background:var(--ds-error);color:#fff}

/* テーブル2026 */
.ds-table-2026{width:100%;border-collapse:separate;border-spacing:0}
.ds-table-2026 thead th{font-size:11px;font-weight:700;color:#94a3b8;text-transform:uppercase;letter-spacing:0.05em;padding:8px 12px;text-align:left;border-bottom:1px solid rgba(0,0,0,0.06)}
.ds-table-2026 tbody td{padding:12px;font-size:13px;color:#334155;border-bottom:1px solid rgba(0,0,0,0.03)}
.ds-table-2026 tbody tr:hover{background:rgba(26,109,224,0.02)}

/* モーダル2026 */
.ds-modal-overlay{position:fixed;inset:0;z-index:100000;background:rgba(0,0,0,0.4);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;animation:ds-fade-in 0.2s ease}
.ds-modal-content{background:#fff;border-radius:20px;padding:28px;width:90%;max-width:480px;box-shadow:0 24px 48px rgba(0,0,0,0.12);animation:ds-scale-in 0.3s ease}

/* タブ2026 */
.ds-tabs{display:flex;gap:2px;background:#f1f5f9;border-radius:10px;padding:3px}
.ds-tab{flex:1;padding:8px 16px;border-radius:8px;font-size:13px;font-weight:600;color:#64748b;text-align:center;cursor:pointer;transition:all 0.15s;border:none;background:transparent}
.ds-tab.active,.ds-tab:hover{background:#fff;color:#1e293b;box-shadow:0 1px 3px rgba(0,0,0,0.08)}

/* スイッチ2026 */
.ds-switch{width:44px;height:24px;border-radius:12px;background:#cbd5e1;position:relative;cursor:pointer;transition:background 0.2s;border:none;padding:0}
.ds-switch::after{content:"";position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;background:#fff;transition:transform 0.2s;box-shadow:0 1px 3px rgba(0,0,0,0.15)}
.ds-switch.on{background:var(--ds-primary)}.ds-switch.on::after{transform:translateX(20px)}

/* 空状態 */
.ds-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:48px 24px;text-align:center;color:#94a3b8}
.ds-empty svg{width:64px;height:64px;margin-bottom:16px;opacity:0.3}
.ds-empty-title{font-size:16px;font-weight:700;color:#64748b;margin-bottom:4px}
.ds-empty-text{font-size:13px;line-height:1.6}

/* プログレスバー */
.ds-progress{height:6px;background:#f1f5f9;border-radius:3px;overflow:hidden}
.ds-progress-fill{height:100%;border-radius:3px;transition:width 0.5s cubic-bezier(0.4,0,0.2,1)}

/* アバター */
.ds-avatar{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;color:#fff;background:var(--ds-gradient-primary);flex-shrink:0}

/* モバイル */
@media(max-width:768px){.ds-bento{grid-template-columns:1fr}.ds-modal-content{width:95%;border-radius:16px;padding:20px}.ds-btn-2026{padding:12px 20px;font-size:15px}.ds-input-2026{padding:12px 14px;font-size:16px}}
@supports(padding-bottom:env(safe-area-inset-bottom)){.ds-safe-bottom{padding-bottom:env(safe-area-inset-bottom)}}
@media(min-width:768px) and (max-width:1024px){.ds-bento{grid-template-columns:repeat(2,1fr)}}