body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; margin: 20px; }
.container { max-width: 95%; margin: auto; }
.header { display: flex; justify-content: center; align-items: center; gap: 25px; margin-bottom: 20px; }
.header h1 { margin: 0; font-size: 2em; }
.header a { 
  text-decoration: none; 
  color: #495057; 
  background-color: #f1f3f5; 
  width: 25px; 
  height: 25px; 
  border-radius: 50%; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  font-size: 1em; 
  transition: background-color 0.2s; 
}
.header a:hover { background-color: #e9ecef; }
.calendar-table { 
    width: 100%; 
    border-collapse: collapse; 
    table-layout: fixed; 
    min-width: 800px; /* <-- min-width를 테이블 자체에 적용 */
}
.calendar-table th, .calendar-table td { border: 1px solid #ddd; padding: 8px; vertical-align: top; }
.calendar-table th { background-color: #f8f9fa; text-align: center; font-weight: normal; padding: 10px 8px; }
.calendar-table td { height: 110px; }
.day-number { font-weight: bold; }
.other-month .day-number { color: #ccc; }
.saturday { color: #007bff; }
.sunday { color: #dc3545; }
.vacation-entry { font-size: 0.8em; background-color: #e9f5ff; border-radius: 3px; padding: 2px 4px; margin-top: 4px; display: block; cursor: pointer; }
.holiday-name {
    font-size: 0.8em;
    color: #dc3545;
    font-weight: bold;
    margin-top: 4px;
}
.other-month .holiday-name {
    color: #ccc;
    font-weight: normal;
}
/* --- 휴가 종류별 색상 (신규 통합) --- */
.vacation-entry { border-radius: 4px; padding: 2px 4px 2px 8px; margin-bottom: 3px; display: block; font-size: 0.75em; border: 1px solid transparent; border-left-width: 5px; color: #212529; }
.vacation-type-연차 { background-color: #cce5ff; border-color: #b8daff; border-left-color: #28a745; } /* 녹색 테두리 */
.vacation-type-오전, .vacation-type-오후 { background-color: #d4edda; border-color: #c3e6cb; border-left-color: #ffa94d; } /* 연한 주황 테두리 */
.vacation-type-경조사 { background-color: #e2d9f3; border-color: #d6c8ea; border-left-color: #6c757d; } /* 회색 테두리 */
.vacation-type-예비군 { background-color: #f8d7da; border-color: #f5c6cb; border-left-color: #6c757d; } /* 회색 테두리 */
.vacation-entry {
    white-space: nowrap; /* 휴가 항목 내 텍스트 줄바꿈 방지 */
}
.other-month .vacation-entry { background-color: #f1f3f5 !important; color: #adb5bd; }

.form-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}
.form-header h2 {
    margin: 0;
}
.auth-link {
    font-size: 0.8em;
}

.form-container h2 { margin-top: 0; }
.form-grid { display: flex; flex-direction: column; gap: 15px; } /* 항목 간 간격 원복 */
.form-group { display: flex; flex-direction: column; }
.form-group label { margin-bottom: 5px; font-weight: bold; }
.form-group input, .form-group select { padding: 8px; border: 1px solid #ccc; border-radius: 4px; width: 100%; box-sizing: border-box; font-size: 1em; height: 33px; } /* 높이를 38px로 고정하여 모든 입력창 통일 */
.form-group button { background-color: #007bff; color: white; border: none; padding: 10px; border-radius: 4px; cursor: pointer; }
.form-group button:hover { background-color: #0056b3; }

/* --- 페이지 레이아웃 (신규 통합) --- */
.page-wrapper { display: flex; gap: 30px; align-items: flex-start; }
.form-container {
    flex: 1; /* 너비를 유연하게 조정 */
    min-width: 280px; /* 최소 너비 원복 */
    font-size: 0.9em; /* 폼 영역의 전체적인 폰트 크기 축소 */
    margin-top: 65px; /* 달력 헤더 높이만큼 상단 여백 추가 */
}
.content-wrapper { flex: 4; min-width: 0; display: flex; gap: 20px; align-items: flex-start; } /* 달력 영역에 더 많은 공간 할당 */
.calendar-area { 
    flex: 1.5; 
    /* min-width: 800px; */ /* <-- 이 줄을 제거하거나 주석 처리 */
    min-width: 0;           /* <-- flex 아이템이 제대로 줄어들도록 추가 */
    overflow-x: auto;       /* <-- 가로 스크롤 추가 */
    -webkit-overflow-scrolling: touch; /* <-- iOS 스크롤 부드럽게 */
}
.summary-section { 
    flex: 1; 
    margin-top: 15px; 
    overflow-x: auto;       /* <-- 이 줄을 추가하세요 */
    -webkit-overflow-scrolling: touch; /* <-- 이 줄도 추가하세요 */
}
.tabs { margin-bottom: 15px; display: flex; justify-content: space-between; align-items: center; } /* 구분선 제거 */
.tabs h2 { margin: 0; font-size: 1.2em; }
.tabs a { font-size: 0.9em; text-decoration: none; color: #007bff; }

.summary-table { 
    width: 100%; 
    border-collapse: collapse; 
    margin-top: 20px; 
    table-layout: fixed;  /* <-- 이 줄을 추가 (혹은 원본에 있었다면 유지) */
    /*min-width: 1400px;    /* ⭐ 이 줄을 여기에 추가하세요! */
}
.summary-table th, .summary-table td { border: 1px solid #ddd; padding: 5px 8px; text-align: left; font-size: 0.8em; }
.summary-table th { background-color: #e9ecef; }
.flash-messages { list-style: none; padding: 0; margin: 0 0 15px 0; }
.flash-messages li { padding: 10px 15px; border-radius: 5px; font-size: 0.9em; }
.flash-messages li.success { background-color: #d4edda; color: #155724; border: 1px solid #c3e6cb; }
.flash-messages li.error { background-color: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; }

.summary-table .name-cell { width: 20%; text-align: center; }
.summary-table .count-cell { text-align: center; width: 13%; }
.summary-table .total-cell { font-weight: bold; }
.summary-table .group-header td { font-weight: bold; padding: 6px 8px; border-top: 2px solid #adb5bd; }

.group-매장 { background-color: #e7f5ff !important; }
.group-배송 { background-color: #f3e8ff !important; }
.group-온라인 { background-color: #fff4e6 !important; }

.summary-table .group-header.group-매장 td { background-color: #e7f5ff; }
.summary-table .group-header.group-배송 td { background-color: #f3e8ff; }
.summary-table .group-header.group-온라인 td { background-color: #fff4e6; }

/* --- 상단 메뉴 (재통합) --- */
.main-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2px solid #dee2e6;
    margin-bottom: 20px;
    padding: 0 10px; /* 좌우 여백 추가 */
}
.main-nav .nav-links {
    display: flex;
}
.main-nav a {
    display: inline-block;
    padding: 10px 15px;
    text-decoration: none;
    color: #495057;
    border: 2px solid transparent;
    border-radius: 5px 5px 0 0;
    font-weight: 500;
    position: relative;
    top: 2px;
}
.main-nav a.active { color: #0056b3; border-color: #dee2e6; border-bottom-color: #fff; background-color: #fff; }
.main-nav a:not(.active):hover { background-color: #f8f9fa; }
.main-nav .auth-link {
    font-size: 0.9em;
    text-decoration: none;
    color: #007bff;
}

/* --- 이 코드를 <style> 태그 안에 추가하거나 수정하세요 --- */

/* 1. 기존 화살표(<, <<) 버튼 포함한 헤더 링크 기본 스타일 수정 (크기 축소) */
.header a {
    text-decoration: none;
    color: #212529;
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    padding: 3px 8px;      /* 기존 6px 12px 에서 축소 */
    border-radius: 5px;
    font-size: 1.1em;       /* 기존 1.2em 에서 축소 */
    transition: background-color 0.2s;
    display: inline-flex;   /* 내부 컨텐츠를 중앙 정렬하기 위해 추가 */
    align-items: center;
    justify-content: center;
}
.header a:hover { 
    background-color: #e9ecef; 
}

/* 2. '월간 다운로드' 버튼 전용 스타일 추가 */
.header .btn-link {
    font-size: 0.8em;       /* 폰트 크기 살짝 조정 */
    padding: 8px 16px;      /* 좌우 여백 확보 */
    margin-left: 15px;      /* 다른 요소와 간격 */
    white-space: nowrap;    /* 핵심: 줄바꿈 방지 */
}

/* --- 반응형 레이아웃 (모바일 & 태블릿) --- */
@media (max-width: 1200px) {
    /* 휴가/가산/사용자 관리 페이지의 메인 레이아웃을 세로로 변경 */
    .page-wrapper,
    .content-wrapper,
    .main-layout {
        flex-direction: column;
        gap: 25px;
    }

    /* 각 섹션이 가로 전체 너비를 사용하도록 설정 */
    .form-container,
    .summary-section,
    .left-panel,
    .right-panel {
        flex-basis: auto; /* flex-basis 초기화 */
        width: 100%;
        margin-top: 0;
    }

    /* 사용자 관리 페이지의 팀 컬럼 레이아웃을 세로로 변경 */
    .team-columns-container {
        flex-direction: column;
        width: 100%;
    }
    .team-column {
        width: 100%;
    }

    /* 달력/출근관리 등 페이지 상단 헤더가 좁은 화면에서 줄바꿈 되도록 설정 */
    .header, .page-header {
        flex-wrap: wrap;
        gap: 10px;
        justify-content: flex-start; /* 왼쪽 정렬 */
    }

    /* 좁은 화면에서 날짜 입력창이 넘치지 않도록 스타일 조정 */
    .form-group input[type="date"] {
        /* 가로 사이즈를 대폭 줄이기 위해 폰트 크기와 내부 여백을 최소화합니다. */
        padding: 1px 2px; /* 높이는 height 속성으로 제어되므로, 내부 여백은 최소화 */
        font-size: 0.8em; /* 폰트 크기를 대폭 줄여 'YYYY-MM-DD' 텍스트 너비 감소 */
    }
}


/* 연간 휴가 현황 페이지의 넓은 테이블 전용 스타일 */
#annual-summary-table {
    min-width: 1400px;
}