/* css/style.css */

/* --- HTML 및 전체 선택자 기본 설정 --- */
html {
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}
*, *::before, *::after {
    box-sizing: inherit;
}

/* --- 공통 body 스타일 --- */
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f7f6;
    color: #333;
    line-height: 1.6;
    overflow-x: hidden; /* 가로 스크롤 방지 */
    /* 하단 고정 탭바 높이만큼 body에 패딩 추가 */
    padding-bottom: 75px;
}

/* --- 공통 .container 스타일 --- */
.container {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: 15px;
    padding-right: 15px;
}

.top-aligned {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}

h1 { color: #2c3e50; margin-bottom: 20px; }
.logo { max-width: 150px; margin-bottom: 20px; }

/* --- 폼 관련 스타일 --- */
.input-group {
    margin-bottom: 15px;
    text-align: left;
    width: 100%;
}
.input-group input {
    width: 100%;
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 18px;
}

button { /* 공통 버튼 스타일 */
    background-color: #4A90E2;
    color: white;
    padding: 12px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.3s ease;
    width: 100%;
    margin-top: 10px;
}
button:hover { background-color: #357ABD; }

/* --- 메시지 스타일 --- */
.message {
    margin-top: 15px; padding: 10px; border-radius: 4px;
    font-size: 0.9em; min-height: 1.2em;
}
.message.success { background-color: #e7f4e4; color: #28a745; border: 1px solid #c3e6cb; }
.message.error { background-color: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; }

.cache-version {
  position: fixed;
  bottom: 5px; right: 5px;
  font-size: 10px;
  color: #888;
  background: rgba(255,255,255,.7);
  padding: 2px 5px;
  border-radius: 3px;
  z-index: 2000;
}
/* --- 로그인 페이지 스타일 --- */
.page-login .login-container {
    max-width: 500px;
    padding-top: 50px;
    padding-bottom: 20px;
    text-align: center;
}

/* --- 메인 페이지 스타일 --- */
.page-main .main-container {
    max-width: 500px;
}

.page-main .app-header {
    text-align: center;
    padding-top: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
    margin-bottom: 15px;
}
.page-main .app-header h1 { font-size: 1.5em; margin-top: 0; margin-bottom: 5px; }
.page-main .time-display { font-size: 0.9em; color: #555; margin-bottom: 5px; }
.page-main .user-greeting { font-size: 1.1em; color: #333; font-weight: bold; }

.page-main .app-content {
    width: 100%;
    padding-bottom: 20px;
}

.page-main .action-buttons { display: flex; gap: 10px; margin-bottom: 20px; }
.page-main .action-buttons button { flex-grow: 1; }
.page-main .action-buttons button.action-completed { background-color: #28a745; border-color: #28a745; color: white; cursor: not-allowed; }
.page-main .action-buttons button.action-completed:hover { background-color: #218838; border-color: #1e7e34; }
.page-main .action-buttons button:disabled:not(.action-completed) { background-color: #cccccc; color: #666666; cursor: not-allowed; opacity: 0.7; border-color: #cccccc; }
.page-main .action-buttons button.action-completed:disabled { background-color: #28a745; border-color: #28a745; color: white; opacity: 1; cursor: not-allowed; }

.page-main .action-buttons2 { display: flex; gap: 10px; margin-bottom: 20px; }
.page-main .action-buttons2 button { flex-grow: 1; background-color: #000; border-color: #000; color: white; border-radius:30px; }
.page-main .action-buttons2 button.action-completed { background-color: #606060; border-color: #606060; color: white; cursor: not-allowed; }
.page-main .action-buttons2 button.action-completed:hover { background-color: #218838; border-color: #1e7e34; }
.page-main .action-buttons2 button:disabled:not(.action-completed) { background-color: #cccccc; color: #666666; cursor: not-allowed; opacity: 0.7; border-color: #cccccc; }
.page-main .action-buttons2 button.action-completed:disabled { background-color: #606060; border-color: #606060; color: white; opacity: 1; cursor: not-allowed; }

.page-main .location-info { margin-top: 20px; padding: 15px; background-color: #fff; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
.page-main .location-info h3 { margin-top: 0; font-size: 1.2em; color: #4A90E2; }
.page-main #gpsCoordinates { font-size: 0.9em; color: #666; margin-bottom: 10px; }
.page-main #map { width: 100%; height: 200px; min-height: 150px; background-color: #e9e9e9; border-radius: 4px; }

/* --- 뷰 전환 및 하단 탭바 스타일 --- */
.page-main .view { display: none; width: 100%; }
.page-main .view.active-view { display: block; }

.page-main .bottom-tabs {
    position: fixed; bottom: 0; left: 0; right: 0;
    margin-left: auto; margin-right: auto; max-width: 500px;
    height: 60px; display: flex; justify-content: space-around;
    background-color: #fff; border-top: 1px solid #ddd;
    box-shadow: 0 -2px 5px rgba(0,0,0,0.1); z-index: 1000;
}
.page-main .tab-button {
    background: none; border: none; color: #777; padding: 6px 0; font-size: 12px; cursor: pointer;
    flex-grow: 1; text-align: center; margin: 0; width: auto; display: flex; flex-direction: column;
    align-items: center; justify-content: center; line-height: 1.2;
}
.page-main .tab-button .material-symbols-outlined { font-size: 24px; margin-bottom: 2px; }
.page-main .tab-button .tab-label { font-size: 11px; display: block; }
.page-main .tab-button.active { color: #4A90E2; font-weight: normal; }

/* --- 달력 뷰 스타일 --- */
.page-main #calendarView { width: 100%; padding: 10px 0; }
.page-main .calendar-controls { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; padding: 0 10px; }
.page-main .calendar-controls h2 { margin: 0 10px; font-size: 1.4em; color: #333; flex-grow: 1; text-align: center; }
.page-main .month-nav-btn {
    width: auto; margin-top: 0; padding: 8px 15px; font-size: 1.2em; line-height: 1;
    background-color: #f0f0f0; border: 1px solid #ddd; color: #333;
    border-radius: 4px; cursor: pointer; min-width: 44px; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
}
.page-main .month-nav-btn:hover { background-color: #e0e0e0; }
.page-main .calendar-table-container { width: 100%; }
.page-main .calendar-table { width: 100%; border-collapse: collapse; font-size: 0.9em; }
.page-main .calendar-table th, .page-main .calendar-table td { border: 1px solid #e0e0e0; padding: 8px; text-align: center; vertical-align: middle; }
.page-main .calendar-table th { background-color: #f7f7f7; font-weight: bold; color: #555; }
.page-main .calendar-table td { color: #333; }
.page-main .calendar-table .day-holiday { color: #d9534f; }
.page-main .calendar-table .day-saturday { color: #337ab7; }
.page-main #calendarMessage { margin-top: 15px; text-align: center; }

/* --- 앱 업데이트 알림 스타일 --- */
#app-update-notification {
    position: fixed; bottom: 75px; left: 50%; transform: translateX(-50%);
    background-color: #2c3e50; color: white; padding: 12px 20px;
    border-radius: 25px; z-index: 9999; font-size: 14px; font-weight: 500;
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
    opacity: 0; visibility: hidden;
    transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out, bottom 0.5s ease-in-out;
}
#app-update-notification.show {
    opacity: 1; visibility: visible; transform: translateX(-50%) translateY(-10px); width:90%; 
}

/* css/style.css 에 추가 */
.page-main .cancel-buttons {
    margin-top: 5px; /* 위 버튼 그룹과의 간격 */
}
.page-main .btn-cancel {
    background-color: #6c757d; /* 회색 계열 */
    border-color: #6c757d;
}
.page-main .btn-cancel:hover {
    background-color: #5a6268;
}
.page-main .btn-cancel:disabled {
    background-color: #cccccc;
    opacity: 0.6;
}

/* --- 확인 모달 스타일 --- */
.modal-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    display: none; /* 기본적으로 숨김 */
    align-items: center;
    justify-content: center;
    z-index: 2000;
}
.modal-content {
    background-color: white;
    padding: 25px;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    width: 90%;
    max-width: 400px;
    text-align: center;
}
.modal-content h3 {
    margin-top: 0;
    font-size: 1.4em;
    color: #333;
}
.modal-content p {
    margin-bottom: 25px;
    font-size: 1em;
    color: #555;
}
.modal-actions {
    display: flex;
    justify-content: space-between;
    gap: 10px;
}
.modal-actions button {
    width: 100%;
    margin-top: 0;
}
.btn-secondary { background-color: #6c757d; }
.btn-secondary:hover { background-color: #5a6268; }
.btn-danger { background-color: #dc3545; }
.btn-danger:hover { background-color: #c82333; }

/* 버튼과 취소 버튼을 감싸는 컨테이너 */
.action-buttons-new {
    display: flex;
    align-items: center;
    margin-bottom: 10px; /* 위아래 버튼 그룹 간의 간격 */
}

/* 기본 버튼 스타일 (선택 사항) */
.action-buttons-new button {
    padding: 8px 16px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: #f7f7f7;
    cursor: pointer;
}
.action-buttons button:disabled {
    background-color: #e9ecef;
    cursor: not-allowed;
}


/* 출근/퇴근이 완료된 버튼에 적용될 스타일 */
.action-buttons-new button.action-taken {
    background-color: #f0f0f0; /* 비활성화된 느낌의 회색 */
    color: #555;
    cursor: default; /* 마우스 커서 기본 모양으로 */
    pointer-events: none; /* 클릭 방지 */
}

/* [X] 취소 버튼 스타일 */
.cancel-btn {
    display: none; /* 평소에는 숨김 */
    background-color: #e74c3c; /* 빨간색 배경 */
    color: white;
    border: none;
    width: 24px;
    margin-left: 8px; /* 왼쪽 버튼과의 간격 */
    cursor: pointer;
    font-weight: bold;
    font-size: 21px;

    /* 'X' 글자를 버튼 중앙에 배치하기 위함 */
    justify-content: center;
    align-items: center;
}

.cancel-btn:hover {
    background-color: #c0392b; /* 마우스를 올리면 더 진한 빨간색 */
}
.action-buttons-new button {
    padding: 8px 16px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: #f7f7f7;
    cursor: pointer;
    transition: background-color 0.2s; /* 부드러운 색상 전환 효과 */
}

/* 비활성화된(disabled) 버튼에 대한 스타일 */
.action-buttons-new button:disabled {
    background-color: #f0f0f0;   /* 비활성화된 느낌의 배경색 */
    color: #888;                /* 비활성화된 느낌의 글자색 */
    cursor: not-allowed;         /* '진입 금지' 커서 모양으로 변경 */
    /* 브라우저는 disabled된 요소에 자동으로 pointer-events: none;을 적용하므로,
       CSS에서 별도로 지정할 필요가 없습니다. */
}