/**********************************************
 * 버킷리스트 타임라인 생성기 컨테이너
 **********************************************/
.bucket-timeline-container {
  margin: 20px auto !important;
  padding: 30px !important;
  background: #f8f9fa !important;
  border-radius: 12px !important;
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 1180px !important;
  font-family: 'Noto Sans KR', Arial, sans-serif !important;
  color: #333333 !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
  overflow: hidden !important;
  font-size: 15px !important;
  line-height: 1.5 !important;
}

@media screen and (max-width: 768px) {
  .bucket-timeline-container {
    padding: 12px 6px !important;
    margin: 10px auto !important;
    border-radius: 8px !important;
  }
}

.bucket-title {
  text-align: center !important;
  font-size: 2em !important;
  margin-bottom: 5px !important;
  color: #4361ee !important;
  font-weight: 700 !important;
}

.bucket-subtitle {
  text-align: center !important;
  font-size: 1em !important;
  margin-bottom: 10px !important;
  color: #7f7f7f !important;
}

.main-notice {
  margin: 0 auto 20px !important;
  text-align: center !important;
  max-width: 800px !important;
  font-size: 0.9em !important;
  color: #7f7f7f !important;
}

/**********************************************
 * 플렉스 레이아웃
 **********************************************/
.bucket-layout {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 20px !important;
  margin-bottom: 20px !important;
}

.input-section {
  flex: 1 !important;
  background: #fff !important;
  border-radius: 10px !important;
  padding: 20px !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05) !important;
  border: 1px solid #e0e0e0 !important;
  min-width: 300px !important;
}

.output-section {
  flex: 1.5 !important;
  background: #fff !important;
  border-radius: 10px !important;
  padding: 20px !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05) !important;
  border: 1px solid #e0e0e0 !important;
  min-width: 300px !important;
}

.items-section {
  width: 100% !important;
  background: #fff !important;
  border-radius: 10px !important;
  padding: 20px !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05) !important;
  border: 1px solid #e0e0e0 !important;
  margin-bottom: 20px !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

.section-title {
  font-size: 1.25em !important;
  font-weight: 600 !important;
  margin-top: 0 !important;
  margin-bottom: 20px !important;
  color: #333333 !important;
  padding-bottom: 10px !important;
  border-bottom: 2px solid #f2f2f2 !important;
}

/**********************************************
 * 입력 필드 스타일
 **********************************************/
.input-row {
  display: flex !important;
  gap: 12px !important;
  margin-bottom: 16px !important;
}

.input-group {
  margin-bottom: 16px !important;
  position: relative !important;
  width: 100% !important;
}

.input-row .input-group {
  margin-bottom: 0 !important;
}

.input-group.half {
  width: calc(50% - 6px) !important;
}

.input-group.item-group {
  width: 65% !important;
}

.input-group.age-group {
  width: 35% !important;
}

.input-group label {
  display: block !important;
  margin-bottom: 6px !important;
  font-weight: 500 !important;
  color: #333333 !important;
  font-size: 0.95em !important;
}

.input-container {
  position: relative !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.input-group input, 
.input-group select {
  width: 100% !important;
  padding: 10px 12px !important;
  border: 1px solid #cccccc !important;
  border-radius: 6px !important;
  font-size: 1em !important;
  color: #333333 !important;
  background: #fff !important;
  transition: all 0.2s !important;
  box-sizing: border-box !important;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.05) !important;
}

.input-group input:focus,
.input-group select:focus {
  border-color: #4361ee !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(67, 97, 238, 0.1) !important;
}

.input-addon {
  position: absolute !important;
  right: 12px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  color: #7f7f7f !important;
  font-size: 0.9em !important;
  font-weight: 500 !important;
}

/**********************************************
 * 버튼 스타일
 **********************************************/
.btn-primary {
  display: block !important;
  width: 100% !important;
  padding: 12px !important;
  background: #4361ee !important;
  color: #fff !important;
  border: none !important;
  border-radius: 6px !important;
  font-size: 1em !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
  box-shadow: 0 2px 4px rgba(67, 97, 238, 0.2) !important;
  text-align: center !important;
}

.btn-primary:hover {
  background: #3a56e4 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 3px 6px rgba(67, 97, 238, 0.25) !important;
}

.btn-primary:active {
  transform: translateY(1px) !important;
  box-shadow: 0 1px 2px rgba(67, 97, 238, 0.1) !important;
}

.btn-secondary {
  display: inline-block !important;
  padding: 10px 0 !important;
  background: #e6efff !important;
  color: #4361ee !important;
  border: 1px solid #c3ddfd !important;
  border-radius: 6px !important;
  font-size: 0.9em !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
  text-align: center !important;
}

.btn-secondary:hover {
  background: #d1e0ff !important;
  border-color: #a3cdfd !important;
}

.btn-reset {
  background: transparent !important;
  border: 1px solid #cccccc !important;
  color: #7f7f7f !important;
  padding: 10px 16px !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  font-size: 0.9em !important;
  transition: all 0.2s !important;
  min-width: 70px !important;
  text-align: center !important;
}

.btn-reset:hover {
  background: #f9f9f9 !important;
  color: #333333 !important;
  border-color: #a5a5a5 !important;
}

.btn-danger {
  display: inline-block !important;
  padding: 10px 0 !important;
  background: #fff5f5 !important;
  color: #e53e3e !important;
  border: 1px solid #fed7d7 !important;
  border-radius: 6px !important;
  font-size: 0.9em !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
  text-align: center !important;
}

.btn-danger:hover {
  background: #fed7d7 !important;
  color: #c53030 !important;
}

.btn-group {
  display: flex !important;
  gap: 10px !important;
  margin-top: 20px !important;
}

.data-actions {
  display: flex !important;
  justify-content: space-between !important;
  margin-top: 20px !important;
  gap: 2px !important;
}

.data-actions button {
  flex: 1 !important;
}

.data-notice, .main-notice {
  margin-top: 10px !important;
  font-size: 0.85em !important;
  color: #7f7f7f !important;
}

.notice-text {
  margin: 0 0 5px 0 !important;
  padding: 0 !important;
  font-style: italic !important;
}

/**********************************************
 * 중요도 선택 스타일
 **********************************************/
.priority-container {
  display: flex !important;
  gap: 10px !important;
}

.priority-option {
  flex: 1 !important;
  padding: 8px !important;
  text-align: center !important;
  background: #f5f5f5 !important;
  border: 1px solid #e0e0e0 !important;
  border-radius: 4px !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
}

.priority-option:hover {
  background: #e9e9e9 !important;
}

.priority-option.active {
  background: #e6efff !important;
  border-color: #c3ddfd !important;
  color: #4361ee !important;
}

.priority-star {
  color: #fbbf24 !important;
  display: block !important;
  font-size: 1.1em !important;
  line-height: 1 !important;
}

/**********************************************
 * 시간 요약 스타일
 **********************************************/
.time-summary {
  background: #e6efff !important;
  border-radius: 6px !important;
  padding: 12px 15px !important;
  margin: 20px 0 !important;
  border: 1px solid #c3ddfd !important;
}

.result-row {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-bottom: 5px !important;
  font-size: 0.95em !important;
}

.result-row:last-child {
  margin-bottom: 0 !important;
}

.result-label {
  color: #333333 !important;
  font-weight: 500 !important;
}

.result-value {
  font-weight: 600 !important;
  color: #4361ee !important;
}

/**********************************************
 * 타임라인 스타일
 **********************************************/
.timeline-container {
  position: relative !important;
  padding: 5px 0 !important;
  margin: 10px 0 !important;
  min-height: 200px !important;
}

.timeline-message {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  color: #a0aec0 !important;
  font-style: italic !important;
  text-align: center !important;
  width: 80% !important;
}

.timeline-wrapper {
  position: relative !important;
  margin-left: 20px !important;
}

.timeline-line {
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 3px !important;
  background: #e2e8f0 !important;
  border-radius: 4px !important;
}

.timeline-stage {
  position: relative !important;
  padding-left: 25px !important;
  margin-bottom: 10px !important;
}

.timeline-stage:last-child {
  margin-bottom: 0 !important;
}

.timeline-dot {
  position: absolute !important;
  left: -6px !important;
  top: 0 !important;
  width: 16px !important;
  height: 16px !important;
  border-radius: 50% !important;
  background: #4361ee !important;
  border: 3px solid #fff !important;
  box-shadow: 0 2px 4px rgba(0,0,0,0.15) !important;
  z-index: 2 !important;
}

.timeline-age {
  font-weight: 700 !important;
  font-size: 1em !important;
  color: #4361ee !important;
  margin-bottom: 3px !important;
}

.timeline-items {
  background: #f8f9fa !important;
  border-radius: 6px !important;
  padding: 6px !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05) !important;
}

.timeline-item {
  padding: 6px 8px !important;
  margin-bottom: 4px !important;
  border-radius: 4px !important;
  background: #fff !important;
  border-left: 3px solid #4361ee !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.03) !important;
  transition: all 0.2s !important;
}

.timeline-item:last-child {
  margin-bottom: 0 !important;
}

.timeline-item:hover {
  transform: translateX(2px) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08) !important;
}

.timeline-item.completed {
  border-left-color: #38a169 !important;
  background: #f0fff4 !important;
}

.timeline-item.travel { border-left-color: #4361ee !important; }
.timeline-item.career { border-left-color: #805ad5 !important; }
.timeline-item.health { border-left-color: #38a169 !important; }
.timeline-item.learning { border-left-color: #dd6b20 !important; }
.timeline-item.relationship { border-left-color: #e53e3e !important; }
.timeline-item.finance { border-left-color: #3182ce !important; }
.timeline-item.adventure { border-left-color: #ecc94b !important; }
.timeline-item.personal { border-left-color: #718096 !important; }

.timeline-item-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-bottom: 2px !important;
}

.timeline-item-text {
  font-weight: 500 !important;
  color: #333333 !important;
  font-size: 0.95em !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: calc(100% - 40px) !important;
}

.timeline-item-priority {
  color: #fbbf24 !important;
  font-size: 0.85em !important;
}

.timeline-item-meta {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 0.75em !important;
  color: #718096 !important;
}

.timeline-item-category {
  padding: 2px 6px !important;
  border-radius: 10px !important;
  font-size: 0.85em !important;
  font-weight: 500 !important;
  background: #e2e8f0 !important;
}

.timeline-item-category.travel { background: #ebf4ff !important; color: #4361ee !important; }
.timeline-item-category.career { background: #f3ebff !important; color: #805ad5 !important; }
.timeline-item-category.health { background: #e6ffea !important; color: #38a169 !important; }
.timeline-item-category.learning { background: #fff5eb !important; color: #dd6b20 !important; }
.timeline-item-category.relationship { background: #fff5f5 !important; color: #e53e3e !important; }
.timeline-item-category.finance { background: #ebf8ff !important; color: #3182ce !important; }
.timeline-item-category.adventure { background: #fffbeb !important; color: #d97706 !important; }
.timeline-item-category.personal { background: #f7fafc !important; color: #718096 !important; }

/**********************************************
 * 필터 스타일
 **********************************************/
.filter-container {
  margin-bottom: 15px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

.category-filter,
.priority-filter,
.status-filter {
  margin-bottom: 4px !important;
}

.filter-label {
  display: block !important;
  margin-bottom: 4px !important;
  font-weight: 500 !important;
  color: #333333 !important;
  font-size: 0.85em !important;
}

.filter-options {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 4px !important;
}

.filter-option {
  padding: 4px 8px !important;
  background: #f5f5f5 !important;
  border: 1px solid #e0e0e0 !important;
  border-radius: 4px !important;
  font-size: 0.8em !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
}

.filter-option:hover {
  background: #e9e9e9 !important;
}

.filter-option.active {
  background: #e6efff !important;
  color: #4361ee !important;
  border-color: #c3ddfd !important;
  font-weight: 500 !important;
}

/**********************************************
 * 버킷리스트 테이블 스타일
 **********************************************/
.bucket-items-container {
  width: 100% !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  border: 1px solid #e0e0e0 !important;
  border-radius: 8px !important;
  max-width: 100% !important;
}

.bucket-items-table {
  width: 100% !important;
  border-collapse: collapse !important;
  font-size: 0.95em !important;
}

.bucket-items-table th,
.bucket-items-table td {
  padding: 10px 12px !important;
  text-align: left !important;
  border-bottom: 1px solid #f0f0f0 !important;
}

.bucket-items-table th {
  background-color: #e6efff !important;
  color: #4361ee !important;
  font-weight: 600 !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 10 !important;
}

.bucket-items-table tr:nth-child(even) {
  background-color: #f8f9fa !important;
}

.bucket-items-table tr:hover {
  background-color: #f0f7ff !important;
}

.status-pending {
  padding: 3px 8px !important;
  border-radius: 12px !important;
  background: #ebf4ff !important;
  color: #4361ee !important;
  font-size: 0.85em !important;
  font-weight: 500 !important;
  display: inline-block !important;
}

.status-completed {
  padding: 3px 8px !important;
  border-radius: 12px !important;
  background: #e6ffea !important;
  color: #38a169 !important;
  font-size: 0.85em !important;
  font-weight: 500 !important;
  display: inline-block !important;
}

.item-actions {
  display: flex !important;
  gap: 5px !important;
}

.action-btn {
  padding: 4px 8px !important;
  border-radius: 4px !important;
  font-size: 0.85em !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
  border: none !important;
}

.action-btn.edit-btn {
  background: #ebf4ff !important;
  color: #4361ee !important;
}

.action-btn.edit-btn:hover {
  background: #d1e0ff !important;
}

.action-btn.delete-btn {
  background: #fff5f5 !important;
  color: #e53e3e !important;
}

.action-btn.delete-btn:hover {
  background: #fed7d7 !important;
}

.item-category {
  padding: 3px 8px !important;
  border-radius: 12px !important;
  font-size: 0.85em !important;
  font-weight: 500 !important;
  display: inline-block !important;
}

.item-category.travel { background: #ebf4ff !important; color: #4361ee !important; }
.item-category.career { background: #f3ebff !important; color: #805ad5 !important; }
.item-category.health { background: #e6ffea !important; color: #38a169 !important; }
.item-category.learning { background: #fff5eb !important; color: #dd6b20 !important; }
.item-category.relationship { background: #fff5f5 !important; color: #e53e3e !important; }
.item-category.finance { background: #ebf8ff !important; color: #3182ce !important; }
.item-category.adventure { background: #fffbeb !important; color: #d97706 !important; }
.item-category.personal { background: #f7fafc !important; color: #718096 !important; }

.item-priority {
  color: #fbbf24 !important;
}

/**********************************************
 * 모달 스타일
 **********************************************/
.modal {
  display: none !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background: rgba(0, 0, 0, 0.5) !important;
  z-index: 1000 !important;
  overflow: auto !important;
  align-items: center !important;
  justify-content: center !important;
}

.modal.active {
  display: flex !important;
}

.modal-content {
  background: #fff !important;
  border-radius: 10px !important;
  padding: 25px !important;
  width: 90% !important;
  max-width: 500px !important;
  position: relative !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15) !important;
}

.modal-close {
  position: absolute !important;
  top: 15px !important;
  right: 20px !important;
  font-size: 1.5em !important;
  color: #a0aec0 !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
}

.modal-close:hover {
  color: #e53e3e !important;
}

.modal-title {
  margin-top: 0 !important;
  margin-bottom: 20px !important;
  color: #4361ee !important;
  font-size: 1.3em !important;
  font-weight: 600 !important;
}

.modal-actions {
  display: flex !important;
  gap: 10px !important;
  margin-top: 25px !important;
}

/**********************************************
 * 모바일 대응
 **********************************************/
@media screen and (max-width: 1120px) {
  .input-section, 
  .output-section {
    flex: 1 1 100% !important;
  }
}

@media screen and (max-width: 768px) {
  .bucket-timeline-container {
    padding: 12px 6px !important;
  }
  
  .input-section, 
  .output-section,
  .items-section {
    padding: 15px 10px !important;
    min-width: 0 !important;
  }
  
  .input-row {
    flex-direction: column !important;
    gap: 16px !important;
  }
  
  .input-group.half,
  .input-group.item-group,
  .input-group.age-group {
    width: 100% !important;
  }
  
  .timeline-container {
    min-height: 180px !important;
  }
  
  .bucket-items-table {
    font-size: 0.85em !important;
  }
  
  .bucket-items-table th,
  .bucket-items-table td {
    padding: 8px 10px !important;
  }
  
  .filter-options {
    gap: 4px !important;
  }
  
  .filter-option {
    padding: 3px 6px !important;
    font-size: 0.75em !important;
  }
  
  .data-actions {
    flex-direction: column !important;
    gap: 8px !important;
  }
}

@media screen and (max-width: 480px) {
  .bucket-timeline-container {
    padding: 10px 5px !important;
  }
  
  .input-section, 
  .output-section,
  .items-section {
    padding: 12px 8px !important;
  }
  
  .bucket-title {
    font-size: 1.6em !important;
  }
  
  .section-title {
    font-size: 1.1em !important;
  }
  
  .modal-content {
    padding: 20px 15px !important;
  }
}