:root {
  --primary-color: #4a6fa5;
  --secondary-color: #166088;
  --accent-color: #4fc3a1;
  --light-color: #f8f9fa;
  --dark-color: #343a40;
  --danger-color: #dc3545;
  --success-color: #28a745;
  --blue-color: #007bff;
  --today-bg-color: rgba(135, 206, 250, 0.25);
  --sunday-bg-color: rgba(255, 200, 200, 0.3);
  --saturday-bg-color: rgba(255, 248, 180, 0.3);
  --selected-bg-color: rgba(79, 195, 161, 0.3);
  --font-family: 'Noto Sans KR', 'Roboto', sans-serif;
  --shadow: 0 8px 16px rgba(0,0,0,0.1);
  --border-radius: 16px;
  --card-border-radius: 20px;
  --background-gradient: linear-gradient(135deg, #f5f7fa 0%, #e4efe9 100%);
}

* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  font-family: var(--font-family);
  line-height: 1.6;
  color: var(--dark-color);
  background: var(--background-gradient);
  min-height: 100vh;
  padding-top: 2rem;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.app-title {
  font-size: 2rem;
  font-weight: 700;
  color: var(--primary-color);
  margin-bottom: 2rem;
  padding-left: 1rem;
}

.card {
  background-color: white;
  border-radius: var(--card-border-radius);
  -webkit-box-shadow: var(--shadow);
  box-shadow: var(--shadow);
  padding: 2rem;
  margin-bottom: 2rem;
  border: none;
  -webkit-transition: -webkit-transform 0.15s, -webkit-box-shadow 0.15s;
  transition: -webkit-transform 0.15s, -webkit-box-shadow 0.15s;
  transition: transform 0.15s, box-shadow 0.15s;
  transition: transform 0.15s, box-shadow 0.15s, -webkit-transform 0.15s, -webkit-box-shadow 0.15s;
}

.card:hover {
  -webkit-transform: translateY(-0.5px);
  transform: translateY(-0.5px);
  -webkit-box-shadow: 0 12px 20px rgba(0,0,0,0.15);
  box-shadow: 0 12px 20px rgba(0,0,0,0.15);
}

.card h2 {
  color: var(--primary-color);
  margin-bottom: 1.5rem;
  font-size: 1.5rem;
}

.form-group {
  margin-bottom: 1.5rem;
}

.form-group label {
  display: block;
  font-weight: 500;
  color: var(--dark-color);
}

.form-control {
  width: 100%;
  padding: 0.9rem;
  font-size: 1rem;
  border: 1px solid #e0e0e0;
  border-radius: var(--border-radius);
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

.form-control:focus {
  outline: none;
  border-color: var(--primary-color);
  -webkit-box-shadow: 0 0 0 3px rgba(74, 111, 165, 0.2);
  box-shadow: 0 0 0 3px rgba(74, 111, 165, 0.2);
}

.btn {
  display: inline-block;
  padding: 0.9rem 1.8rem;
  font-size: 1rem;
  font-weight: 500;
  text-align: center;
  text-decoration: none;
  border: none;
  border-radius: var(--border-radius);
  cursor: pointer;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

.btn-primary {
  background-color: var(--primary-color);
  color: white;
}

.btn-primary:hover {
  background-color: var(--secondary-color);
  -webkit-transform: translateY(-3px);
  transform: translateY(-3px);
  -webkit-box-shadow: 0 5px 10px rgba(0,0,0,0.2);
  box-shadow: 0 5px 10px rgba(0,0,0,0.2);
}

.btn-danger {
  background-color: var(--danger-color);
  color: white;
}

.btn-danger:hover {
  background-color: #bd2130;
  -webkit-transform: translateY(-3px);
  transform: translateY(-3px);
  -webkit-box-shadow: 0 5px 10px rgba(0,0,0,0.2);
  box-shadow: 0 5px 10px rgba(0,0,0,0.2);
}

.calendar {
  width: 100%;
  border-collapse: separate;
  border-spacing: 3px;
  margin-top: 1rem;
  table-layout: fixed;
}

.calendar th, .calendar td {
  padding: 10px 5px;
  text-align: center;
  border: none;
  width: calc(100% / 7);
}

.calendar th {
  background-color: var(--primary-color);
  color: white;
  border-radius: 8px;
  font-weight: 500;
}

.calendar-day {
  min-height: 80px;
  position: relative;
  background-color: #f8f9fa;
  border-radius: 12px;
  -webkit-transition: background-color 0.1s, -webkit-transform 0.2s;
  transition: background-color 0.1s, -webkit-transform 0.2s;
  transition: background-color 0.1s, transform 0.2s;
  transition: background-color 0.1s, transform 0.2s, -webkit-transform 0.2s;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: flex-start;
  justify-content: flex-start;
  height: 100%;
  cursor: pointer;
}

.calendar-day > div:first-child {
  margin-top: 5px;
  margin-bottom: 5px;
  font-weight: 500;
}

.calendar-day.today {
  background-color: var(--today-bg-color) !important;
  -webkit-box-shadow: 0 0 0 2px var(--primary-color) inset;
  box-shadow: 0 0 0 2px var(--primary-color) inset;
}

.calendar-day.selected {
  background-color: var(--selected-bg-color) !important;
  -webkit-box-shadow: 0 0 0 2px var(--accent-color) inset;
  box-shadow: 0 0 0 2px var(--accent-color) inset;
  -webkit-transform: scale(0.98);
  transform: scale(0.98);
}

.calendar-day:hover {
  background-color: rgba(74, 111, 165, 0.1);
}

.meal-count {
  padding: 4px 8px;
  background-color: var(--accent-color);
  color: white;
  border-radius: 20px;
  cursor: pointer;
  display: block;
  margin: 0 auto;
  margin-top: 3px;
  margin-bottom: 5px;
  font-weight: 500;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  font-size: 0.9rem;
  max-width: 90%;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.meal-count:hover {
  -webkit-transform: translateY(-2px);
  transform: translateY(-2px);
  -webkit-box-shadow: 0 3px 6px rgba(0,0,0,0.2);
  box-shadow: 0 3px 6px rgba(0,0,0,0.2);
}

.checkbox-container {
  display: none; /* 체크박스 숨김 */
}

.context-menu {
  position: absolute;
  background-color: white;
  border-radius: var(--border-radius);
  -webkit-box-shadow: var(--shadow);
  box-shadow: var(--shadow);
  z-index: 100;
  display: none;
  overflow: hidden;
}

.context-menu ul {
  list-style: none;
}

.context-menu li {
  padding: 10px 20px;
  cursor: pointer;
  -webkit-transition: background-color 0.3s;
  transition: background-color 0.3s;
}

.context-menu li:hover {
  background-color: rgba(74, 111, 165, 0.1);
  color: var(--primary-color);
}

.modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1000;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-align-items: center;
  align-items: center;
}

.modal-content {
  background-color: white;
  padding: 2.5rem;
  border-radius: var(--card-border-radius);
  max-width: 500px;
  width: 100%;
  -webkit-box-shadow: var(--shadow);
  box-shadow: var(--shadow);
}

.modal-header {
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  -webkit-align-items: center;
  align-items: center;
  margin-bottom: 1.5rem;
}

.modal-title {
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--primary-color);
}

.close-modal {
  background: none;
  border: none;
  font-size: 1.8rem;
  cursor: pointer;
  color: #aaa;
  -webkit-transition: color 0.3s;
  transition: color 0.3s;
}

.close-modal:hover {
  color: var(--primary-color);
}

.modal-footer {
  margin-top: 2rem;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: flex-end;
  justify-content: flex-end;
  gap: 1rem;
}

.alert {
  padding: 1rem;
  margin-bottom: 1rem;
  border-radius: var(--border-radius);
  border-left: 4px solid transparent;
}

.alert-success {
  background-color: rgba(40, 167, 69, 0.1);
  border-left-color: var(--success-color);
  color: var(--success-color);
}

.alert-danger {
  background-color: rgba(220, 53, 69, 0.1);
  border-left-color: var(--danger-color);
  color: var(--danger-color);
}

.alert-blue {
  background-color: rgba(0, 123, 255, 0.1);
  border-left-color: var(--blue-color);
  color: var(--blue-color);
}

/* 2-column layout */
.content-container {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: 2rem;
  margin-top: 1rem;
}

.left-column {
  -webkit-flex: 1;
  flex: 1;
  min-width: 300px;
}

.right-column {
  -webkit-flex: 2;
  flex: 2;
  min-width: 600px;
}

/* Responsive styles */
@media (max-width: 992px) {
  .content-container {
    -webkit-flex-direction: column;
    flex-direction: column;
  }
  
  .left-column, .right-column {
    width: 100%;
    min-width: auto;
  }
}

@media (max-width: 768px) {
  body {
    padding-bottom: 70px; /* 하단 내비게이션 바 공간 확보 */
  }
  
  .container {
    padding: 10px;
  }
  
  .card {
    padding: 1.2rem;
  }
  
  .btn {
    padding: 0.8rem 1.5rem;
  }
  
  .calendar th, .calendar td {
    padding: 4px 2px;
  }
  
  .calendar-day {
    min-height: 50px;
  }

  .app-title {
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
  }
  
  .meal-count {
    padding: 3px 6px;
    font-size: 0.8rem;
    margin-top: 2px;
  }
  
  .mobile-bottom-nav {
    display: block;
  }
}

@media (max-width: 480px) {
  body {
    padding-bottom: 60px; /* 작은 화면에서 네비게이션 바 높이 줄임 */
  }
  
  .container {
    padding: 5px;
  }
  
  .card {
    padding: 0.8rem;
  }
  
  .calendar {
    border-spacing: 1px;
  }
  
  .calendar th {
    font-size: 0.8rem;
  }
  
  .calendar-day {
    min-height: 40px;
  }
  
  .calendar-day > div:first-child {
    font-size: 0.9rem;
    margin-top: 2px;
    margin-bottom: 1px;
  }
  
  .meal-count {
    font-size: 0.7rem;
    padding: 2px 4px;
  }
  
  .modal-content {
    padding: 1.5rem;
  }
  
  .mobile-bottom-nav {
    padding: 6px 0 max(6px, env(safe-area-inset-bottom));
  }
  
  .mobile-nav-item {
    padding: 4px;
    min-width: 36px;
    min-height: 36px;
  }
  
  .mobile-nav-item i {
    font-size: 14px;
    margin-bottom: 1px;
  }
  
  .mobile-nav-item span {
    font-size: 9px;
  }
}

/* 요일별 스타일 */
.calendar th:first-child {
  background-color: var(--danger-color);
}

.calendar td:first-child .calendar-day {
  background-color: var(--sunday-bg-color);
}

.calendar th:last-child {
  background-color: #f0ad4e; /* 토요일 헤더 */
}

.calendar td:last-child .calendar-day {
  background-color: var(--saturday-bg-color);
}

/* 여러 날짜에 걸친 이벤트 스타일 */
.multi-day-info {
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.8);
  margin-top: 2px;
  font-weight: 500;
  text-align: center;
}

/* 연차 이벤트 다중 날짜 스타일 */
.day-cell.leave.multi-day-start {
  border-left: 3px solid #ff6b35;
  position: relative;
}

.day-cell.leave.multi-day-start::after {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(to right, rgba(255, 107, 53, 0.3), transparent);
}

.day-cell.leave.multi-day-continue {
  border-left: 3px solid rgba(255, 107, 53, 0.5);
  border-right: 3px solid rgba(255, 107, 53, 0.5);
  position: relative;
}

.day-cell.leave.multi-day-continue::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(to right, transparent, rgba(255, 107, 53, 0.3));
}

.day-cell.leave.multi-day-continue::after {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(to right, rgba(255, 107, 53, 0.3), transparent);
}

.day-cell.leave.multi-day-end {
  border-right: 3px solid #ff6b35;
  position: relative;
}

.day-cell.leave.multi-day-end::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(to right, transparent, rgba(255, 107, 53, 0.3));
}

/* 업무 일정 다중 날짜 스타일 */
.day-cell.business.multi-day-start {
  border-left: 3px solid #8e44ad;
  position: relative;
}

.day-cell.business.multi-day-start::after {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(to right, rgba(142, 68, 173, 0.3), transparent);
}

.day-cell.business.multi-day-continue {
  border-left: 3px solid rgba(142, 68, 173, 0.5);
  border-right: 3px solid rgba(142, 68, 173, 0.5);
  position: relative;
}

.day-cell.business.multi-day-continue::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(to right, transparent, rgba(142, 68, 173, 0.3));
}

.day-cell.business.multi-day-continue::after {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(to right, rgba(142, 68, 173, 0.3), transparent);
}

.day-cell.business.multi-day-end {
  border-right: 3px solid #8e44ad;
  position: relative;
}

.day-cell.business.multi-day-end::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(to right, transparent, rgba(142, 68, 173, 0.3));
}

/* 다중 날짜 이벤트 호버 효과 */
.day-cell.multi-day-start:hover,
.day-cell.multi-day-continue:hover,
.day-cell.multi-day-end:hover {
  transform: scale(1.02);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* 모바일 하단 내비게이션 바 */
.mobile-bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: white;
  border-top: 1px solid #e2e8f0;
  padding: 8px 0 max(8px, env(safe-area-inset-bottom));
  z-index: 100;
  box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.1);
  display: none;
}

.mobile-bottom-nav-content {
  display: flex;
  justify-content: space-around;
  align-items: center;
  max-width: 100%;
  margin: 0 auto;
  padding: 0 16px;
}

.mobile-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 6px;
  min-width: 40px;
  min-height: 40px;
  border-radius: 8px;
  text-decoration: none;
  color: #64748b;
  transition: all 0.2s ease;
  cursor: pointer;
  touch-action: manipulation;
}

.mobile-nav-item:active {
  transform: scale(0.95);
  background: rgba(74, 111, 165, 0.1);
}

.mobile-nav-item.active {
  color: var(--primary-color);
  background: rgba(74, 111, 165, 0.1);
}

.mobile-nav-item i {
  font-size: 16px;
  margin-bottom: 2px;
}

.mobile-nav-item span {
  font-size: 10px;
  font-weight: 500;
}