body {
    font-family: 'Helvetica Neue', Arial, sans-serif;
    margin: 20px;
    background-color: #f4f7f6;
    color: #333;
    font-size: 0.75em; /* 全体のフォントサイズをさらに調整 */
}

h1 {
    text-align: center;
    color: #2c3e50;
    font-size: 1.7em; /* H1も相対的に調整 */
}

/* View Switcher Styles */
.view-switcher {
    text-align: center;
    margin-bottom: 15px;
}

.view-switcher button {
    padding: 8px 15px;
    margin: 0 5px;
    border: 1px solid #3498db;
    background-color: #fff;
    color: #3498db;
    cursor: pointer;
    border-radius: 4px;
    transition: background-color 0.3s, color 0.3s;
}

.view-switcher button:hover {
    background-color: #3498db;
    color: #fff;
}

.view-switcher button.active {
    background-color: #2980b9;
    color: #fff;
    border-color: #2980b9;
}

/* Main Gantt Layout */
.gantt-main-container {
    display: flex;
    width: 100%;
    max-width: 1200px; /* Adjust as needed, or use 100% for full width */
    margin: 20px auto;
    border: 1px solid #ddd;
    border-radius: 8px;
    background-color: #fff;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    /* overflow: hidden; /* This might hide shadows or absolutely positioned elements if not careful */
}

.gantt-fixed-left {
    display: flex;
    flex-direction: column;
    width: 300px; /* Adjusted again: Name(min 100) + Assignee(100) + Start(50) + End(50) = 300px */
    flex-shrink: 0;
    border-right: 1px solid #ddd;
    background-color: #fdfdfd;
}

.gantt-scrollable-right {
    /* width: 55%; */ /* Will take remaining space */
    flex-grow: 1; /* Allow this to take remaining space */
    overflow-x: auto;
    position: relative;
}

/* Headers */
.gantt-header-fixed {
    display: flex; /* Layout for header cells */
    background-color: #3498db;
    color: white;
    font-weight: bold;
    border-bottom: 1px solid #2980b9;
    position: sticky;
    top: 0;
    z-index: 20;
}

.gantt-header-name {
    min-width: 100px;
    flex-grow: 1;
    padding: 2px 4px;
    box-sizing: border-box;
    border-right: 1px solid #2980b9;
}

.gantt-header-assignee {
    width: 100px; /* Increased width */
    flex-shrink: 0;
    padding: 2px 4px;
    box-sizing: border-box;
    border-right: 1px solid #2980b9;
}

.gantt-header-start-date {
    width: 50px; /* Decreased width */
    flex-shrink: 0;
    padding: 2px 4px;
    box-sizing: border-box;
    border-right: 1px solid #2980b9;
}

.gantt-header-end-date {
    width: 50px; /* Decreased width */
    flex-shrink: 0;
    padding: 2px 4px;
    box-sizing: border-box;
}

.gantt-timeline-header {
    background-color: #3498db;
    /* padding: 0; /* Padding will be on individual cells */
    color: white;
    font-weight: bold;
    border-bottom: 1px solid #2980b9;
    white-space: nowrap; /* Critical for horizontal layout of day cells */
    position: sticky; /* Sticky timeline header within the scrollable area */
    top: 0;
    z-index: 10; /* Below fixed-left header if they overlap due to page scroll */
}

/* Task Info and Timeline Bar Areas */
.gantt-task-info-area {
    /* Max height and overflow-y if needed, synchronized with timeline bar area */
    /* For now, let content define height. Syncing height is tricky. */
}

.gantt-timeline-bar-area {
    position: relative; /* For absolute positioning of task bars */
     /* Background grid for timeline can be applied here if desired */
}

/* Row Structure (Conceptual - JS will create these parts) */
.gantt-task-row-info {
    display: flex; /* Layout for task cells */
    border-bottom: 1px solid #eee;
}

.gantt-task-row-timeline {
    border-bottom: 1px solid #eee;
    position: relative; /* For task bar container */
    min-height: 25px; /* Adjusted based on reduced padding in info cells */
    /* padding: 5px 0; */ /* Removed vertical padding to make bar full height */
    box-sizing: border-box;
}

/* Individual Cells in Task Info Area */
.gantt-task-name-cell {
    min-width: 100px; /* Match header */
    flex-grow: 1; /* Match header */
    padding: 2px 4px;
    box-sizing: border-box;
    border-right: 1px solid #eee;
    word-break: break-word;
    cursor: pointer; /* For memo functionality */
}

.gantt-task-name-cell:hover {
    background-color: #f0f0f0; /* For memo functionality */
}

.gantt-task-assignee-cell {
    width: 100px; /* Match header */
    flex-shrink: 0;
    padding: 2px 4px;
    box-sizing: border-box;
    border-right: 1px solid #eee;
    word-break: break-word;
}

/* 開始日セル用のスタイルを追加 */
.gantt-task-start-date-cell {
    width: 50px; /* Match header */
    flex-shrink: 0;
    padding: 2px 4px;
    box-sizing: border-box;
    border-right: 1px solid #eee;
    word-break: break-word;
}

/* 終了日セル用のスタイルを追加 */
.gantt-task-end-date-cell {
    width: 50px; /* Match header */
    flex-shrink: 0;
    padding: 2px 4px;
    box-sizing: border-box;
    word-break: break-word;
}

/* Timeline Day Cells */
.timeline-day-cell {
    display: inline-block;
    box-sizing: border-box;
    text-align: center;
    border-right: 1px solid #2980b9;
    width: 35px; /* Further reduced fixed width */
    height: 100%;
    padding: 2px 1px;
    color: white;
}

.timeline-day-cell:last-child {
    border-right: none;
}

/* Task Bar Container (now effectively .gantt-task-row-timeline) */
.gantt-task-bar-container {
    /* This class might be repurposed or its styles merged into .gantt-task-row-timeline */
    padding: 10px 5px; /* Padding for where bars are placed */
    box-sizing: border-box;
    /* background-image: ... (grid lines) ... ; can be applied to .gantt-timeline-bar-area */
}

/* Task Bar Styling */
.gantt-task-bar {
    position: absolute;
    top: 0; /* Bar full height */
    bottom: 0; /* Bar full height */
    height: auto;
    background-color: #5dade2;
    color: white;
    font-size: 0.8em;
    /* line-height: 20px; /* Removed as height is now auto */
    display: flex; /* For centering text if it were still there */
    align-items: center; /* For centering text if it were still there */
    justify-content: center; /* For centering text if it were still there */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    border: 1px solid #4a90e2;
    z-index: 1; /* Above background grid, but below sticky headers */
}

.gantt-task-bar-text {
    position: relative;
    z-index: 1;
    padding: 0 5px;
    display: inline-block;
    width: 100%;
    box-sizing: border-box;
}

.gantt-task-progress-bar {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 3px;
    z-index: 0;
}

.gantt-task-bar.tentative {
    background-color: #f39c12;
    opacity: 0.8;
}

/* Memo Edit Modal Styles */
.memo-modal {
    position: fixed; /* Stay in place */
    z-index: 100; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
    display: flex; /* Used with align-items and justify-content to center modal-content */
    align-items: center;
    justify-content: center;
}

.memo-modal-content {
    background-color: #fefefe;
    margin: auto; /* For older browsers, or if not using flex for centering */
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
    max-width: 500px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

.memo-modal-content h3 {
    margin-top: 0;
    color: #2c3e50;
}

.memo-modal-content textarea {
    width: calc(100% - 16px); /* Adjust for padding/border */
    padding: 8px;
    margin-bottom: 15px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    resize: vertical;
}

.memo-modal-actions button {
    padding: 10px 15px;
    margin-right: 10px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s;
}

#memo-save-btn {
    background-color: #28a745;
    color: white;
}
#memo-save-btn:hover {
    background-color: #218838;
}

#memo-delete-btn {
    background-color: #dc3545;
    color: white;
}
#memo-delete-btn:hover {
    background-color: #c82333;
}

#memo-cancel-btn {
    background-color: #6c757d;
    color: white;
}
#memo-cancel-btn:hover {
    background-color: #5a6268;
}