@import './compound/compound.css';

/* Financial Calculator Shared Styles */

/* 공통 결과 컨테이너 헤더 카드 */
.fina-result-hero {
  background: linear-gradient(135deg, #1a62ab 0%, #2383e2 100%);
  border-radius: 10px;
  padding: 20px;
  text-align: center;
  color: #ffffff;
  display: flex;
  flex-direction: column;
  gap: 6px;
  box-shadow: 0 4px 12px rgba(35, 131, 226, 0.25);
}

.fina-result-hero-label {
  font-size: 0.82rem;
  opacity: 0.85;
  font-weight: 500;
  letter-spacing: 0.03em;
}

.fina-result-hero-value {
  font-size: 1.9rem;
  font-weight: 700;
  font-family: var(--font-mono, monospace);
  letter-spacing: -0.01em;
}

/* 세부 내역 테이블 */
.fina-breakdown-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.fina-breakdown-table tr {
  border-bottom: 1px solid var(--border-color, #e9e9e6);
}

.fina-breakdown-table tr:last-child {
  border-bottom: none;
}

.fina-breakdown-table th {
  text-align: left;
  padding: 10px 4px;
  color: var(--text-secondary, #5f5e5b);
  font-weight: 500;
  width: 40%;
}

.fina-breakdown-table td {
  text-align: right;
  padding: 10px 4px;
  font-weight: 600;
  color: var(--text-primary, #37352f);
  font-family: var(--font-mono, monospace);
}

.fina-breakdown-table td.positive {
  color: #377d22;
}

.fina-breakdown-table td.negative {
  color: #d13735;
}

.fina-breakdown-table td.highlight {
  color: #1a62ab;
  font-size: 1rem;
}

/* 산출 근거 텍스트 */
.fina-basis-text {
  font-size: 0.78rem;
  color: var(--text-muted, #9b9a97);
  text-align: right;
  line-height: 1.5;
  margin-top: 4px;
}

/* 대출 안내 노트 */
.fina-note-card {
  background-color: #f7f7f5;
  border: 1px solid var(--border-color, #e9e9e6);
  border-radius: 8px;
  padding: 11px 14px;
  font-size: 0.85rem;
  color: var(--text-secondary, #5f5e5b);
  line-height: 1.5;
}

/* 결과 패널 wrapper (재사용) */
.fina-result-panel {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px dashed var(--border-color, #e9e9e6);
  display: flex;
  flex-direction: column;
  gap: 14px;
  animation: fadeIn 0.3s ease-out;
}

.fina-result-panel.hidden {
  display: none !important;
}