.running-calorie-calculator {
  max-width: 1180px !important;
  margin: 20px auto !important;
  background: #f5f5f5 !important;
  padding: 20px !important;
  border: 1px solid #999 !important;
  font-family: 'Dotum', '돋움', sans-serif !important;
  box-sizing: border-box !important;
}

.running-calorie-calculator * {
  box-sizing: border-box !important;
}

/* 헤더 영역 */
.calc-header {
  text-align: center !important;
  margin-bottom: 20px !important;
  background-color: #fff3e0 !important;
  padding: 15px !important;
  border: 1px solid #ff6f00 !important;
}

.calc-header h2 {
  color: #e65100 !important;
  font-size: 1.8em !important;
  margin: 0 0 5px 0 !important;
  font-weight: bold !important;
}

.calc-header p {
  color: #bf360c !important;
  margin: 0 !important;
  font-size: 1em !important;
}

/* 메인 콘텐츠 영역 */
.calc-content {
  display: flex !important;
  gap: 15px !important;
  margin-bottom: 15px !important;
}

.calc-input-panel,
.calc-result-panel {
  flex: 1 !important;
  background: white !important;
  border: 1px solid #ccc !important;
  padding: 15px !important;
  min-height: 700px !important;
}

/* 입력 패널 */
.panel-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-bottom: 15px !important;
  padding-bottom: 8px !important;
  border-bottom: 1px solid #ddd !important;
}

.calc-input-title,
.calc-result-title {
  color: #e65100 !important;
  font-size: 1.2em !important;
  margin: 0 !important;
  font-weight: bold !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding-bottom: 8px !important;
  border-bottom: 1px solid #ddd !important;
  margin-bottom: 15px !important;
}

.btn-reset {
  padding: 6px 10px !important;
  background-color: #d32f2f !important;
  color: white !important;
  border: 1px solid #b71c1c !important;
  cursor: pointer !important;
  font-size: 0.9em !important;
  font-weight: bold !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
}

.btn-reset:hover {
  background-color: #b71c1c !important;
}

.input-group {
  margin-bottom: 15px !important;
  position: relative !important;
}

.input-row {
  display: flex !important;
  gap: 10px !important;
  margin-bottom: 15px !important;
}

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

.input-group label {
  display: block !important;
  margin-bottom: 5px !important;
  color: #555 !important;
  font-weight: bold !important;
  font-size: 1em !important;
}

.input-group input,
.input-group select {
  width: 100% !important;
  padding: 8px 10px !important;
  border: 1px solid #999 !important;
  font-size: 1em !important;
  color: #333 !important;
  background: white !important;
  transition: border-color 0.3s ease !important;
}

.input-group input:focus,
.input-group select:focus {
  outline: 2px solid #ff6f00 !important;
  outline-offset: -2px !important;
}

.input-group input.error {
  border-color: #d32f2f !important;
  background-color: #ffebee !important;
}

.input-group input.success {
  border-color: #4caf50 !important;
  background-color: #f1f8e9 !important;
}

.input-status {
  font-size: 0.8em !important;
  margin-top: 2px !important;
  min-height: 16px !important;
  transition: opacity 0.3s ease !important;
}

.input-status.error {
  color: #d32f2f !important;
}

.input-status.success {
  color: #4caf50 !important;
}

.hint {
  font-size: 0.85em !important;
  color: #666 !important;
  margin-top: 3px !important;
}

/* 빠른 선택 버튼 */
.quick-weight-buttons,
.quick-time-buttons {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 3px !important;
  margin-top: 6px !important;
}

.quick-btn {
  padding: 4px 6px !important;
  background-color: #fff8e1 !important;
  color: #e65100 !important;
  border: 1px solid #ff9800 !important;
  cursor: pointer !important;
  font-size: 0.8em !important;
  font-weight: bold !important;
  transition: all 0.2s ease !important;
}

.quick-btn:hover {
  background-color: #ffecb3 !important;
  transform: scale(1.02) !important;
}

.quick-btn:active {
  transform: scale(0.98) !important;
}

.btn-calculate {
  width: 100% !important;
  padding: 12px !important;
  background: #ff6f00 !important;
  color: white !important;
  border: 1px solid #e65100 !important;
  font-size: 1.1em !important;
  font-weight: bold !important;
  cursor: pointer !important;
  margin: 15px 0 !important;
  transition: all 0.3s ease !important;
}

.btn-calculate:hover {
  background: #e65100 !important;
  transform: translateY(-1px) !important;
}

.btn-calculate:disabled {
  background: #ccc !important;
  border-color: #999 !important;
  cursor: not-allowed !important;
  transform: none !important;
}

/* 추가 기능 */
.additional-features {
  margin-top: 20px !important;
  border-top: 1px solid #ddd !important;
  padding-top: 15px !important;
}

.additional-features h4 {
  font-size: 1em !important;
  color: #555 !important;
  margin: 0 0 10px 0 !important;
  font-weight: bold !important;
}

.goal-section {
  margin-top: 15px !important;
  border-top: 1px solid #eee !important;
  padding-top: 10px !important;
}

.goal-section h5 {
  font-size: 0.9em !important;
  color: #555 !important;
  margin: 0 0 8px 0 !important;
  font-weight: bold !important;
}

.goal-buttons {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 4px !important;
}

.goal-btn {
  padding: 6px 8px !important;
  background-color: #e8f5e8 !important;
  color: #2e7d32 !important;
  border: 1px solid #4caf50 !important;
  cursor: pointer !important;
  font-size: 0.8em !important;
  font-weight: bold !important;
  transition: all 0.2s ease !important;
}

.goal-btn:hover {
  background-color: #c8e6c9 !important;
  transform: scale(1.02) !important;
}

/* 결과 패널 */
.main-result {
  display: flex !important;
  gap: 15px !important;
  margin-bottom: 20px !important;
  padding: 15px !important;
  background-color: #f8f8f8 !important;
  border: 1px solid #ddd !important;
}

.calorie-display {
  flex: 1 !important;
  text-align: center !important;
  padding: 20px !important;
  background-color: #fff3e0 !important;
  border: 1px solid #ff6f00 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
}

.calorie-value {
  font-size: 2.2em !important;
  font-weight: bold !important;
  color: #e65100 !important;
  margin-bottom: 8px !important;
  text-align: center !important;
  transition: all 0.3s ease !important;
}

.calorie-value.updated {
  animation: pulse 0.6s ease-in-out !important;
}

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

.calorie-label {
  font-size: 1.1em !important;
  color: #bf360c !important;
  font-weight: bold !important;
  text-align: center !important;
}

.exercise-info {
  flex: 1 !important;
}

.info-row {
  display: flex !important;
  justify-content: space-between !important;
  margin-bottom: 8px !important;
  font-size: 0.9em !important;
  padding: 4px 0 !important;
  border-bottom: 1px dotted #ddd !important;
}

.info-row .label {
  font-weight: bold !important;
  color: #555 !important;
}

.info-row .value {
  font-weight: bold !important;
  color: #e65100 !important;
}

/* 목표 정보 */
.goal-info {
  margin-bottom: 20px !important;
  padding: 15px !important;
  background-color: #f3e5f5 !important;
  border: 1px solid #9c27b0 !important;
  animation: slideIn 0.5s ease-out !important;
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.goal-info h4 {
  font-size: 1em !important;
  color: #555 !important;
  margin: 0 0 10px 0 !important;
  font-weight: bold !important;
}

.goal-data {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 10px !important;
}

.goal-item {
  display: flex !important;
  justify-content: space-between !important;
  font-size: 0.9em !important;
  padding: 4px 0 !important;
  border-bottom: 1px dotted #ddd !important;
}

.goal-item .label {
  font-weight: bold !important;
  color: #555 !important;
}

.goal-item .value {
  font-weight: bold !important;
  color: #7b1fa2 !important;
}

/* 상세 분석 */
.detailed-analysis {
  margin-bottom: 20px !important;
}

.detailed-analysis h4 {
  font-size: 1em !important;
  color: #555 !important;
  margin: 0 0 10px 0 !important;
  font-weight: bold !important;
}

.analysis-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 10px !important;
}

.analysis-item {
  padding: 10px !important;
  border: 1px solid #ddd !important;
  background-color: #fafafa !important;
  text-align: center !important;
  transition: all 0.3s ease !important;
}

.analysis-item:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
}

.analysis-label {
  font-size: 0.9em !important;
  color: #555 !important;
  font-weight: bold !important;
  margin-bottom: 5px !important;
}

.analysis-value {
  font-size: 1.1em !important;
  font-weight: bold !important;
  color: #ff6f00 !important;
}

/* 건강 정보 */
.health-info {
  margin-bottom: 20px !important;
}

.health-info h4 {
  font-size: 1em !important;
  color: #555 !important;
  margin: 0 0 10px 0 !important;
  font-weight: bold !important;
}

.health-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 8px !important;
}

.health-item {
  display: flex !important;
  justify-content: space-between !important;
  font-size: 0.9em !important;
  padding: 6px 8px !important;
  background-color: #e8f5e8 !important;
  border: 1px solid #4caf50 !important;
}

.health-item .label {
  font-weight: bold !important;
  color: #555 !important;
}

.health-item .value {
  font-weight: bold !important;
  color: #2e7d32 !important;
}

/* 액션 버튼 */
.action-buttons {
  margin-bottom: 20px !important;
}

.copy-btn {
  width: 100% !important;
  padding: 10px 14px !important;
  background-color: #ff6f00 !important;
  color: white !important;
  border: 1px solid #e65100 !important;
  cursor: pointer !important;
  font-weight: bold !important;
  font-size: 1em !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  transition: all 0.3s ease !important;
}

.copy-btn:hover {
  background-color: #e65100 !important;
  transform: translateY(-1px) !important;
}

.copy-btn:disabled {
  background: #ccc !important;
  border-color: #999 !important;
  cursor: not-allowed !important;
  transform: none !important;
}

/* 계산 히스토리 */
.calc-history {
  border-top: 1px solid #ddd !important;
  padding-top: 15px !important;
}

.calc-history h4 {
  font-size: 1em !important;
  color: #555 !important;
  margin: 0 0 10px 0 !important;
  font-weight: bold !important;
}

.history-list {
  max-height: 150px !important;
  overflow-y: auto !important;
  border: 1px solid #ddd !important;
  background: #fafafa !important;
  margin-bottom: 8px !important;
}

.no-history {
  text-align: center !important;
  color: #999 !important;
  font-size: 0.9em !important;
  padding: 15px !important;
}

.history-item {
  padding: 8px 10px !important;
  border-bottom: 1px solid #eee !important;
  font-size: 0.85em !important;
  cursor: pointer !important;
  transition: background-color 0.2s ease !important;
}

.history-item:hover {
  background-color: #f0f0f0 !important;
}

.history-calorie {
  color: #e65100 !important;
  font-weight: bold !important;
}

.btn-clear-history {
  width: 100% !important;
  padding: 6px !important;
  background-color: #d32f2f !important;
  color: white !important;
  border: 1px solid #b71c1c !important;
  cursor: pointer !important;
  font-size: 0.85em !important;
  font-weight: bold !important;
  transition: background-color 0.3s ease !important;
}

.btn-clear-history:hover {
  background-color: #b71c1c !important;
}

.notice {
  text-align: center !important;
  font-size: 0.8em !important;
  color: #999 !important;
  padding: 8px 10px !important;
  margin-top: 15px !important;
  background: #f9f9f9 !important;
  border: 1px solid #ddd !important;
  border-radius: 3px !important;
}

.hidden {
  display: none !important;
}

/* 모바일 최적화 */
@media screen and (max-width: 768px) {
  .running-calorie-calculator {
    padding: 8px 4px !important;
    margin: 8px 4px !important;
    max-width: calc(100vw - 8px) !important;
  }
  
  .calc-header {
    padding: 10px !important;
  }
  
  .calc-header h2 {
    font-size: 1.5em !important;
  }
  
  .calc-content {
    flex-direction: column !important;
    gap: 10px !important;
  }
  
  .calc-input-panel,
  .calc-result-panel {
    min-height: auto !important;
    padding: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  
  .panel-header {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
  }
  
  .calc-input-title,
  .calc-result-title {
    justify-content: center !important;
    font-size: 1.1em !important;
  }
  
  .btn-reset {
    align-self: center !important;
    width: 120px !important;
  }
  
  .input-row {
    flex-direction: column !important;
    gap: 12px !important;
  }
  
  .input-group {
    width: 100% !important;
    max-width: 100% !important;
  }
  
  .input-group input,
  .input-group select {
    width: 100% !important;
    max-width: 100% !important;
    padding: 8px 6px !important;
    font-size: 16px !important;
    border: 1px solid #999 !important;
    box-sizing: border-box !important;
  }
  
  .main-result {
    flex-direction: column !important;
    gap: 10px !important;
  }
  
  .calorie-value {
    font-size: 1.8em !important;
  }
  
  .analysis-grid,
  .goal-data {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  
  .quick-weight-buttons,
  .quick-time-buttons {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  
  .quick-btn {
    padding: 5px 4px !important;
    font-size: 0.75em !important;
  }
  
  .goal-buttons {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  
  .goal-btn {
    padding: 6px 8px !important;
    font-size: 0.8em !important;
  }
  
  .history-list {
    max-height: 120px !important;
  }
}

@media screen and (max-width: 480px) {
  .running-calorie-calculator {
    padding: 4px 2px !important;
    margin: 4px 2px !important;
    max-width: calc(100vw - 4px) !important;
  }
  
  .calc-header {
    padding: 8px !important;
  }
  
  .calc-header h2 {
    font-size: 1.4em !important;
  }
  
  .calc-input-panel,
  .calc-result-panel {
    padding: 6px !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  
  .input-group {
    width: 100% !important;
    max-width: 100% !important;
  }
  
  .input-group input,
  .input-group select {
    width: 100% !important;
    max-width: 100% !important;
    padding: 6px 4px !important;
    font-size: 16px !important;
    border: 1px solid #999 !important;
    box-sizing: border-box !important;
  }
  
  .quick-weight-buttons,
  .quick-time-buttons {
    grid-template-columns: 1fr !important;
  }
  
  .btn-calculate,
  .copy-btn {
    font-size: 0.9em !important;
    padding: 10px 12px !important;
  }
  
  .calorie-value {
    font-size: 1.6em !important;
  }
  
  .goal-buttons {
    grid-template-columns: 1fr !important;
  }
}