* { box-sizing: border-box; margin: 0; padding: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
body { background: #f8f9fa; color: #333; overflow-y: hidden; }
header { background: #1a1a1a; color: #fff; display: flex; justify-content: space-between; align-items: center; padding: 0 20px; height: 50px; flex-shrink: 0; }
.nav-tabs { display: flex; gap: 5px; height: 100%; align-items: flex-end; }
.nav-tab { background: #2d2d2d; color: #aaa; padding: 10px 25px; border-radius: 6px 6px 0 0; cursor: pointer; font-weight: bold; font-size: 14px; border: none; }
.nav-tab.active { background: #2e7d32; color: #fff; }
.tab-content { display: none; padding: 15px; width: 100%; height: calc(100vh - 50px); overflow-y: auto; }
.tab-content.active { display: block; }
.sub-tabs { display: flex; gap: 10px; margin-bottom: 10px; }
.sub-tab { background: #718096; color: #fff; padding: 8px 20px; border-radius: 6px; cursor: pointer; border: none; font-weight: bold; }
.sub-tab.active { background: #333; }
.month-button-group { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 8px; margin-bottom: 10px; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; }
.month-button-group::-webkit-scrollbar { height: 6px; }
.month-button-group::-webkit-scrollbar-thumb { background: #bbb; border-radius: 3px; }
.month-btn { background: #fff; color: #555; border: 1px solid #ddd; transition: all 0.2s; white-space: nowrap; }
.month-btn:hover { background: #f0f0f0; }
.month-btn.active { background: #333 !important; color: #fff !important; border-color: #333 !important; }
.master-card { background: #fff; border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); padding: 20px; margin-bottom: 20px; }
.master-card h3 { margin-bottom: 15px; font-size: 16px; border-left: 4px solid #2e7d32; padding-left: 8px; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 15px; margin-bottom: 15px; }
.form-group label { display: block; font-size: 12px; font-weight: bold; color: #666; margin-bottom: 5px; }
.form-group input, .form-group select { width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px; font-size: 14px; }
.btn { background: #2e7d32; color: #fff; border: none; padding: 10px 20px; border-radius: 4px; cursor: pointer; font-weight: bold; }
.btn-secondary { background: #718096; }
.master-table { width: 100%; border-collapse: collapse; margin-top: 10px; }
.master-table th, .master-table td { padding: 10px; border-bottom: 1px solid #eee; text-align: center; font-size: 14px; }
    .master-table th { background: #f1f3f5; font-weight: bold; color: #495057; }
.action-btn { padding: 4px 10px; border-radius: 4px; border: none; color: #fff; cursor: pointer; font-size: 12px; }
.group-header { background: #e9ecef; padding: 8px 12px; font-weight: bold; margin-top: 15px; border-radius: 4px; display: flex; justify-content: space-between; }
.btn-card { display: flex; align-items: center; justify-content: center; min-width: 80px; height: 36px; background: #f8f8f8; border-radius: 6px; cursor: pointer; font-size: 12px; font-weight: bold; padding: 0 4px; color: #555; border: 1px solid #ddd; white-space: nowrap; }
label > input[type="checkbox"], label > input[type="radio"] { display: none; }
label > input[type="checkbox"]:checked + .btn-card, label > input[type="radio"]:checked + .btn-card { background: #333; color: #fff; border-color: #333; }
.gantt-container { overflow-x: auto; overflow-y: auto; background: #fff; border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); height: calc(100vh - 170px); }
.gantt-table { border-collapse: separate; border-spacing: 0; width: max-content; table-layout: fixed; background: #fff; }
.gantt-table th, .gantt-table td { border-bottom: 1px solid #e2e8f0; border-right: 1px solid #e2e8f0; padding: 1px; font-size: 12px; text-align: center; box-sizing: border-box; }
.gantt-table th:first-child, .gantt-table td:first-child { border-left: 1px solid #e2e8f0; }
.row-1 { height: 32px; } .row-2 { height: 60px; } .row-3 { height: 88px; }
.gantt-header-month { position: sticky; top: 0; z-index: 20; background: #2d3748; color: #fff; font-weight: bold; height: 35px; border-top: 1px solid #2d3748; }
.gantt-header-day { position: sticky; top: 35px; z-index: 20; background: #edf2f7; color: #4a5568; width: 32px; min-width: 32px; max-width: 32px; height: 30px; }
.gantt-header-day.holiday { background: #fff5f5; color: #e53e3e; }
.gantt-header-day.saturday { background: #ebf8ff; color: #3182ce; }
.gantt-table td.holiday { background: #fffafb; }
.gantt-table td.saturday { background: #f8fbff; }
.gantt-row-title, .sub-row-title, .grandchild-row-title { position: sticky; left: 0; z-index: 10; width: 280px; min-width: 280px; max-width: 280px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left !important; cursor: pointer; }
thead tr:nth-child(1) th:first-child { position: sticky; left: 0; top: 0; z-index: 40 !important; background: #2d3748; border-top: 1px solid #2d3748; }
thead tr:nth-child(2) th:first-child { position: sticky; left: 0; top: 35px; z-index: 40 !important; background: #edf2f7; }
.gantt-row-title { background: #f1f3f5; font-weight: bold; padding-left: 15px !important; }
.gantt-row-title:hover { color: #2e7d32; }
.sub-row-title { background: #f7fafc; font-size: 11px; padding-left: 35px !important; }
.sub-row-title:hover { background: #edf2f7; color: #3182ce; }
.grandchild-row-title { background: #fffdfd; font-size: 11px; padding-left: 55px !important; }
.gantt-table td.has-bar { overflow: visible !important; z-index: 5; }
.gantt-bar { position: absolute; height: 26px; border-radius: 4px; cursor: grab; z-index: 5; display: flex; align-items: center; padding: 0 4px; font-size: 11px; font-weight: bold; color: #000; box-shadow: 1px 1px 3px rgba(0,0,0,0.15); user-select: none; }
.gantt-bar:active { cursor: grabbing; }
.resize-handle { position: absolute; top: 0; width: 12px; height: 100%; cursor: ew-resize; }
.resize-handle.left { left: 0; } .resize-handle.right { right: 0; }
#dragTooltip { position: fixed; background: rgba(0, 0, 0, 0.9); color: #fff; padding: 8px 14px; border-radius: 6px; font-size: 13px; font-weight: bold; pointer-events: none; z-index: 10000; display: none; box-shadow: 0 4px 10px rgba(0,0,0,0.3); }
#quickModalOverlay, #modalOverlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 9999; background: rgba(0,0,0,0.6); align-items: center; justify-content: center; padding: 10px; }
.modal-content { background: white; width: 100%; max-width: 500px; padding: 25px; border-radius: 16px; max-height: 85vh; overflow-y: auto; }
.flatpickr-calendar.inline { margin: 0 auto; box-shadow: 0 2px 8px rgba(0,0,0,0.1); border: 1px solid #ddd; }
#toast { position: fixed; bottom: 20px; right: 20px; background: #333; color: #fff; padding: 10px 20px; border-radius: 6px; display: none; z-index: 9999; }
#loading { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.3); display: none; justify-content: center; align-items: center; z-index: 10000; color: #fff; font-size: 20px; font-weight: bold; }

/* ====================================================
   マスキング問題の根本解決（セルによるバーの切断を防ぐ）
   ==================================================== */

/* 1. マス（セル）を重なりの壁にしない（バーを閉じ込めない） */
.gantt-table td.has-bar {
  z-index: auto !important;
}

/* 2. バー自身をすべてのマスの背景色より手前に浮かせる */
.gantt-bar {
  z-index: 50 !important;
}

/* 3. スクロール時に左に固定される「名前ヘッダー」はバーより上に保つ */
.gantt-row-title, .sub-row-title, .grandchild-row-title {
  z-index: 100 !important;
}