.rbi-efficiency-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;
}

.rbi-efficiency-calculator * {
  box-sizing: border-box !important;
}

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

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

.calc-header p {
  color: #666 !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,
.calc-info-panel {
  flex: 1 !important;
  background: white !important;
  border: 1px solid #ccc !important;
  padding: 15px !important;
  min-height: 650px !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,
.calc-info-title {
  color: #333 !important;
  font-size: 1.2em !important;
  margin: 0 !important;
  font-weight: bold !important;
  display: flex !important;
  align-items: center !important;
  padding-bottom: 8px !important;
  border-bottom: 1px solid #ddd !important;
  margin-bottom: 15px !important;
}

.btn-reset {
  padding: 6px 10px !important;
  background-color: #dc143c !important;
  color: white !important;
  border: 1px solid #8b0000 !important;
  cursor: pointer !important;
  font-size: 0.9em !important;
  font-weight: bold !important;
}

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

.input-group {
  margin-bottom: 15px !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;
}

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

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

/* 빠른 설정 버튼 */
.quick-opportunity-buttons,
.quick-rbi-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: #f8f8f8 !important;
  color: #333 !important;
  border: 1px solid #ccc !important;
  cursor: pointer !important;
  font-size: 0.8em !important;
  font-weight: bold !important;
}

.quick-btn:hover {
  background-color: #e8e8e8 !important;
}

.btn-calculate {
  width: 100% !important;
  padding: 12px !important;
  background: #228b22 !important;
  color: white !important;
  border: 1px solid #006400 !important;
  font-size: 1.1em !important;
  font-weight: bold !important;
  cursor: pointer !important;
  margin: 15px 0 !important;
}

.btn-calculate:hover {
  background: #006400 !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;
}

.situation-group {
  border: 1px solid #ddd !important;
  padding: 10px !important;
  background-color: #fafafa !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;
}

.efficiency-display {
  flex: 1 !important;
  text-align: center !important;
  padding: 15px !important;
  background-color: #f0fff0 !important;
  border: 1px solid #228b22 !important;
}

.efficiency-value {
  font-size: 2.5em !important;
  font-weight: bold !important;
  color: #228b22 !important;
  margin-bottom: 5px !important;
}

.efficiency-label {
  font-size: 1em !important;
  color: #666 !important;
  font-weight: bold !important;
  margin-bottom: 8px !important;
}

.efficiency-grade {
  font-size: 1.2em !important;
  font-weight: bold !important;
  color: #333 !important;
  padding: 4px 8px !important;
  border: 1px solid #999 !important;
  background-color: #f0f0f0 !important;
  display: inline-block !important;
}

.player-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: #000080 !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;
}

.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: #228b22 !important;
}

/* 등급 기준표 */
.grade-table {
  margin-bottom: 20px !important;
}

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

.grade-list {
  border: 1px solid #ddd !important;
  background-color: #fafafa !important;
  padding: 10px !important;
}

.grade-item {
  padding: 4px 8px !important;
  margin-bottom: 4px !important;
  font-size: 0.9em !important;
  font-weight: bold !important;
  border-left: 4px solid #ccc !important;
}

.s-grade {
  color: #ff6b35 !important;
  border-left-color: #ff6b35 !important;
  background-color: #fff5f3 !important;
}

.a-grade {
  color: #1e90ff !important;
  border-left-color: #1e90ff !important;
  background-color: #f0f8ff !important;
}

.b-grade {
  color: #228b22 !important;
  border-left-color: #228b22 !important;
  background-color: #f0fff0 !important;
}

.c-grade {
  color: #ffa500 !important;
  border-left-color: #ffa500 !important;
  background-color: #fffaf0 !important;
}

.d-grade {
  color: #dc143c !important;
  border-left-color: #dc143c !important;
  background-color: #fff0f0 !important;
}

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

.copy-btn {
  width: 100% !important;
  padding: 10px 14px !important;
  background-color: #228b22 !important;
  color: white !important;
  border: 1px solid #006400 !important;
  cursor: pointer !important;
  font-weight: bold !important;
  font-size: 1em !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.copy-btn:hover {
  background-color: #006400 !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;
}

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

.history-player {
  font-weight: bold !important;
  color: #228b22 !important;
}

.history-efficiency {
  color: #000080 !important;
  font-weight: bold !important;
}

.btn-clear-history {
  width: 100% !important;
  padding: 6px !important;
  background-color: #dc143c !important;
  color: white !important;
  border: 1px solid #8b0000 !important;
  cursor: pointer !important;
  font-size: 0.85em !important;
  font-weight: bold !important;
}

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

/* 정보 패널 */
.info-content {
  max-height: 350px !important;
  overflow-y: auto !important;
}

.info-item {
  margin-bottom: 15px !important;
  padding-bottom: 10px !important;
  border-bottom: 1px solid #eee !important;
}

.info-item:last-child {
  border-bottom: none !important;
}

.info-item h5 {
  font-size: 1em !important;
  color: #333 !important;
  margin: 0 0 5px 0 !important;
  font-weight: bold !important;
}

.info-item p {
  font-size: 0.9em !important;
  color: #666 !important;
  line-height: 1.4 !important;
  margin: 0 0 8px 0 !important;
}

.info-item ul {
  margin: 0 !important;
  padding-left: 20px !important;
}

.info-item li {
  font-size: 0.9em !important;
  color: #666 !important;
  line-height: 1.4 !important;
  margin-bottom: 3px !important;
}

/* 리그 비교 */
.league-comparison {
  margin-top: 15px !important;
  border-top: 1px solid #ddd !important;
  padding-top: 15px !important;
}

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

.comparison-content {
  font-size: 0.9em !important;
  color: #666 !important;
}

.comparison-item {
  padding: 4px 0 !important;
  border-bottom: 1px dotted #ddd !important;
}

/* 유명 선수 기록 */
.famous-players {
  margin-top: 15px !important;
  border-top: 1px solid #ddd !important;
  padding-top: 15px !important;
}

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

.famous-list {
  background-color: #f0fff0 !important;
  border: 1px solid #228b22 !important;
  padding: 10px !important;
}

.famous-item {
  padding: 4px 0 !important;
  font-size: 0.85em !important;
  color: #228b22 !important;
  font-weight: bold !important;
  border-bottom: 1px dotted #90ee90 !important;
}

.famous-item:last-child {
  border-bottom: none !important;
}

.notice {
  text-align: center !important;
  font-size: 0.9em !important;
  color: #666 !important;
  padding: 10px !important;
  background: #ffffcc !important;
  border: 1px solid #cccc00 !important;
}

.hidden {
  display: none !important;
}

/* 모바일 최적화 */
@media screen and (max-width: 768px) {
  .rbi-efficiency-calculator {
    padding: 10px 8px !important;
    margin: 10px auto !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,
  .calc-info-panel {
    min-height: auto !important;
    padding: 12px !important;
  }
  
  .panel-header {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
  }
  
  .calc-input-title,
  .calc-result-title,
  .calc-info-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;
  }
  
  .main-result {
    flex-direction: column !important;
    gap: 10px !important;
  }
  
  .efficiency-value {
    font-size: 2em !important;
  }
  
  .analysis-grid {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  
  .quick-opportunity-buttons,
  .quick-rbi-buttons {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  
  .quick-btn {
    padding: 5px 4px !important;
    font-size: 0.75em !important;
  }
  
  .history-list {
    max-height: 120px !important;
  }
  
  .info-content {
    max-height: 250px !important;
  }
}

@media screen and (max-width: 480px) {
  .rbi-efficiency-calculator {
    padding: 8px 5px !important;
  }
  
  .calc-header {
    padding: 8px !important;
  }
  
  .calc-header h2 {
    font-size: 1.4em !important;
  }
  
  .calc-input-panel,
  .calc-result-panel,
  .calc-info-panel {
    padding: 10px !important;
  }
  
  .quick-opportunity-buttons,
  .quick-rbi-buttons {
    grid-template-columns: 1fr !important;
  }
  
  .input-group input,
  .input-group select {
    padding: 6px 8px !important;
    font-size: 0.9em !important;
  }
  
  .btn-calculate,
  .copy-btn {
    font-size: 0.9em !important;
    padding: 10px 12px !important;
  }
  
  .efficiency-value {
    font-size: 1.8em !important;
  }
}