@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');
.hobong-cal-container * {
 box-sizing: border-box;
 margin: 0;
 padding: 0;
 font-family: 'Pretendard', sans-serif;
}
.hobong-cal-container {
 width: 100%;
 max-width: 600px;
 color: #212529;
 margin: 20px auto;
 border-radius: 8px;
}
.hobong-cal-header {
 padding: 24px 30px;
 border-bottom: 1px solid #e9ecef;
}
.hobong-cal-header h1 {
 font-size: 26px; font-weight: 800; line-height: 1.2;
}
.hobong-cal-header-description {
 margin-top: 8px; font-size: 15px; color: #495057;
}
.hobong-cal-main-content, .hobong-cal-footer {
 padding: 30px;
}
.hobong-cal-footer { padding-top: 0; }
.hobong-cal-input-section h3, .hobong-cal-list-section h3, .hobong-cal-total-section h3, .hobong-cal-reference-section h3 {
 font-size: 18px; font-weight: 700; margin-bottom: 16px;
}
.hobong-cal-input-grid {
 display: flex;
 flex-wrap: wrap;
 gap: 20px;
 margin-bottom: 12px;
}
.hobong-cal-input-group { flex: 1; min-width: 120px; }
.hobong-cal-input-group.period { flex-basis: 100%; }
.hobong-cal-input-group label {
 font-size: 14px; font-weight: 600; margin-bottom: 8px; display: block;
}
.hobong-cal-period-inputs { display: flex; gap: 8px; }
.hobong-cal-period-inputs input { text-align: center; }
.hobong-cal-input-group input[type="number"], .hobong-cal-input-group select {
 width: 100%;
 padding: 12px;
 border: 1px solid #dee2e6;
 border-radius: 6px;
 font-size: 16px;
}
.hobong-cal-input-group input:focus, .hobong-cal-input-group select:focus {
 outline: none; border-color: #4c6ef5; box-shadow: 0 0 0 2px rgba(76, 110, 245, 0.2);
}
.hobong-cal-error-message {
 color: #fa5252; font-size: 14px; margin-top: 8px; min-height: 1.4em; visibility: hidden; opacity: 0; transition: opacity 0.2s;
}
.hobong-cal-error-message.visible { visibility: visible; opacity: 1; }
.hobong-cal-btn {
 width: 100%; padding: 14px; border-radius: 6px; border: none; font-size: 16px; font-weight: 700; cursor: pointer; transition: all 0.2s;
}
.hobong-cal-btn-add {
 background-color: #4c6ef5; color: #ffffff; margin-top: 16px;
}
.hobong-cal-btn-add:hover { background-color: #364fc7; }
.hobong-cal-btn-add:disabled { background-color: #ced4da; color: #868e96; cursor: not-allowed; }
.hobong-cal-divider {
 border: 0; height: 1px; background-color: #e9ecef; margin: 32px 0;
}
#hobong-cal-career-list { list-style: none; padding: 0; }
.hobong-cal-career-item {
 display: flex; justify-content: space-between; align-items: center; padding: 16px; border-radius: 8px; background-color: #f8f9fa; margin-bottom: 12px; border: 1px solid #e9ecef;
}
.hobong-cal-career-item-details { flex-grow: 1; }
.hobong-cal-career-input-values {
 font-size: 14px; font-weight: 500; color: #868e96;
}
.hobong-cal-career-result {
 font-size: 16px; font-weight: 600; color: #343a40; margin-top: 4px;
}
.hobong-cal-icon-btn {
 display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; border: none; background-color: transparent; cursor: pointer; transition: background-color 0.2s ease;
}
.hobong-cal-delete-btn:hover { background-color: #fff5f5; }
.hobong-cal-delete-btn svg { fill: #fa5252; width: 18px; height: 18px; }

.hobong-cal-action-buttons { display: flex; gap: 12px; }
.hobong-cal-calculate-btn { background-color: #4c6ef5; color: #ffffff; flex: 2; }
.hobong-cal-calculate-btn:hover { background-color: #364fc7; }
.hobong-cal-calculate-btn:disabled { background-color: #ced4da; color: #868e96; cursor: not-allowed; }
.hobong-cal-reset-btn { background-color: #f1f3f5; color: #495057; flex: 1; }
.hobong-cal-reset-btn:hover { background-color: #e9ecef; }

.hobong-cal-reference-section ul { list-style: none; padding-left: 0; }
.hobong-cal-reference-section li {
 font-size: 14px; color: #495057; line-height: 1.6; margin-bottom: 4px;
}
@media (max-width: 768px) {
 .hobong-cal-input-grid { flex-direction: column; }
 .hobong-cal-input-group.period { flex-basis: auto; }
}

.hobong-cal-total-display-wrapper {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
  background-color: #f8f9fa;
  border: 1px solid #e9ecef;
  border-radius: 8px;
  padding: 24px;
  text-align: center;
}

.hobong-cal-result-group {
  flex: 1;
  min-width: 250px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.hobong-cal-result-title {
  font-size: 16px;
  font-weight: 700;
  color: #495057;
  margin-bottom: 0;
  padding-bottom: 12px;
  border-bottom: 2px solid #dee2e6;
}

.hobong-cal-result-values {
  display: flex;
  justify-content: center;
  gap: 16px;
}

.hobong-cal-total-unit {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: 4px;
  color: #4c6ef5;
}

.hobong-cal-total-unit .value {
  font-size: 36px;
  font-weight: 800;
  line-height: 1;
}

.hobong-cal-total-unit .label {
  font-size: 16px;
  font-weight: 600;
  color: #343a40;
  margin-top: 0;
}

.hobong-cal-hobong-unit {
  color: #e67700;
}