/* ============================
   📌 프리미엄 계산기 UI 스타일 (공통)
   ============================ */

/* 전체 입력 영역 */
.input-section {
  background: #ffffff;
  padding: 22px;
  border-radius: 18px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.06);
  margin-top: 20px;
}

/* 라벨 */
.input-section label {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 6px;
  display: block;
  color: #333;
}

/* 입력 필드 (공통) */
.input-section input[type="number"],
.input-section input[type="date"],
.input-section select {
  width: 100%;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid #e5e5e5;
  background: #fafafa;
  font-size: 16px;
  margin-bottom: 14px;
  transition: all .2s;
}

.input-section input:focus,
.input-section select:focus {
  border-color: #4a7dff;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(74,125,255,0.15);
}

/* 안내 텍스트 */
.date-info-text {
  font-size: 13px;
  color: #777;
  margin-top: -6px;
  margin-bottom: 10px;
}

/* 버튼 영역 */
.btn-row {
  margin-top: 20px;
  text-align: center;
}

/* 메인 버튼 */
.btn-row button:first-child {
  width: 100%;
  padding: 16px;
  background: #4a7dff;
  color: #fff;
  border: none;
  border-radius: 14px;
  font-size: 17px;
  font-weight: 600;
  cursor: pointer;
  transition: all .2s;
}

.btn-row button:first-child:hover {
  background: #3b6af0;
}

/* 초기화 버튼 */
.btn-row button:last-child {
  width: 100%;
  padding: 14px;
  background: #f3f3f3;
  border: 1px solid #ddd;
  border-radius: 12px;
  font-size: 15px;
  cursor: pointer;
  transition: all .2s;
}

.btn-row button:last-child:hover {
  background: #e9e9e9;
}

/* ============================
   📌 요약 카드 (공통)
   ============================ */
.summary-card,
#hl_summary {
  background: #f8faff;
  border: 1px solid #dce7ff;
  padding: 20px;
  border-radius: 16px;
  margin-top: 20px;
  font-size: 15px;
}

/* ============================
   📌 아코디언 버튼 (공통)
   ============================ */
.interest-accordion-btn,
.hl-acc-btn,
.calc-acc-btn {
  width: 100%;
  padding: 14px;
  background: #f7f7f7;
  border-radius: 12px;
  border: 1px solid #e5e5e5;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all .2s;
  margin-top: 16px;
}

.interest-accordion-btn:hover,
.hl-acc-btn:hover,
.calc-acc-btn:hover {
  background: #efefef;
}

/* ============================
   📌 아코디언 내용 (공통)
   ============================ */
#interestAccordion,
#hl_accordion,
.calc-acc-content {
  overflow: hidden;
  transition: max-height .35s ease;
  background: #fff;
  border-radius: 12px;
  margin-top: 12px;
  border: 1px solid #eee;
  padding: 0 16px;
}

/* ============================
   📌 설명 박스 (공통)
   ============================ */
.explain-box,
#hl_seo,
.seo-box-animated {
  margin-top: 20px;
  padding: 18px;
  background: #fafafa;
  border-radius: 14px;
  border: 1px solid #eee;
}

/* ============================
   📌 강조 박스 (생계비 계산기 전용)
   ============================ */
.repay-highlight-box {
  background: #f8faff;
  border: 1px solid #dce7ff;
  padding: 18px;
  border-radius: 14px;
  margin-top: 16px;
}

.repay-highlight-box-red {
  background: #fff7f7;
  border: 1px solid #ffd4d4;
  padding: 18px;
  border-radius: 14px;
  margin-top: 16px;
}

/* 행 스타일 */
.row {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  font-size: 15px;
}

.row .label {
  color: #555;
}

.row .value {
  font-weight: 600;
  color: #222;
}