/* ============================
   repay-ch 전용 레이아웃 개선
============================ */

/* header와 본문 사이 여백 */
body.subpage {
  padding-top: 40px !important;
}

/* layout 상단 여백 */
.layout-2col {
  margin-top: 00px !important;
}

/* 본문 상단 패딩 */
.center-content {
  padding-top: 20px !important;
}

/* 본문 전체 폭 최적화 */
.center-content .container {
  max-width: 860px !important;
  margin: 0 auto !important;
  padding: 28px !important;
  background: rgba(255,255,255,0.7);
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  backdrop-filter: blur(4px);
}

/* ============================
   입력 UI 개선
============================ */

.input-section label {
  font-weight: 600;
  margin-bottom: 6px;
  display: block;
  color: #222;
}

.input-section input,
.input-section select {
  padding: 12px !important;
  border-radius: 10px !important;
  border: 1px solid #ddd !important;
  font-size: 15px !important;
  margin-bottom: 14px !important;
  width: 100% !important;
  background: #f9f9f9 !important;
  transition: all .15s ease !important;
}

.input-section input:focus,
.input-section select:focus {
  border-color: #4a6fff !important;
  background: #fff !important;
  box-shadow: 0 0 0 2px rgba(74,111,255,0.15) !important;
}

/* 안내문 */
.notice {
  font-size: 13px;
  color: #666;
  margin-top: -10px;
  margin-bottom: 20px;
}

/* ============================
   버튼 UI 개선
============================ */

.btn-row {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 10px;
  margin-bottom: 30px;
}

.btn-row button {
  width: 100%;
  padding: 14px 18px !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  border-radius: 12px !important;
  border: none !important;
  cursor: pointer !important;
  transition: background .15s ease !important;
}

/* 계산하기 버튼 */
.btn-row button:first-child {
  background: #4a6fff !important;
  color: #fff !important;
}

.btn-row button:first-child:hover {
  background: #3a59e0 !important;
}

/* 초기화 버튼 */
.btn-row button:last-child {
  background: #fff !important;
  border: 1px solid #ccc !important;
  color: #333 !important;
}

/* ============================
   요약 카드 개선
============================ */

.summary-card {
  border-radius: 14px !important;
  padding: 20px !important;
  background: #f8f9ff !important;
  border: 1px solid #e0e4ff !important;
  color: #333 !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

/* ============================
   아코디언 개선
============================ */

.calc-acc-btn {
  background: #ffe812 !important;
  color: #3c1e1e !important;
  padding: 14px 18px !important;
  border-radius: 10px !important;
  font-size: 17px !important;
  font-weight: 800 !important;
  border: none !important;
  cursor: pointer !important;
  box-shadow: 0 4px 10px rgba(0,0,0,0.15) !important;
  transition: background 0.2s ease, transform 0.15s ease !important;
}

.calc-acc-btn:hover {
  background: #ffdf00 !important;
  transform: translateY(-2px) !important;
}

.calc-acc-content {
  max-height: 0 !important;
  overflow: hidden !important;
  transition: max-height 0.35s ease, padding 0.35s ease !important;
}

.calc-acc-content.open {
  max-height: 2000px !important;
  padding: 15px !important;
}

/* ============================
   설명 박스
============================ */

.explain-box {
  margin-top: 15px;
  margin-bottom: 30px;
  padding: 18px 20px;
  background: rgba(255,255,255,0.9);
  border-radius: 14px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  font-size: 15px;
  line-height: 1.6;
  color: #333;
  border-left: 6px solid #4a6fff;
}

/* ============================
   sidebar 위치 조정
============================ */

#side {
  margin-left: 24px !important;
}

/* ============================
   모바일 대응
============================ */

@media (max-width: 480px) {
  .center-content .container {
    padding: 18px !important;
  }

  #side {
    margin-left: 0 !important;
    margin-top: 20px !important;
  }
}

/* ============================
   하단 상담 버튼 UI 개선
============================ */

/* 버튼 전체 영역 여백 */
.call-fixed {
  padding: 14px 0 !important;
}

/* 버튼 위 여백 추가 */
.call-fixed {
  margin-top: 40px !important; /* 바로 위 콘텐츠와 간격 확보 */
}

/* 버튼 폭 줄이기 */
.call-fixed .consult-call {
  display: inline-flex !important;
  padding: 12px 20px !important;
  border-radius: 12px !important;
  background: rgba(255,255,255,0.15) !important;
  backdrop-filter: blur(6px) !important;
  font-size: 17px !important;
  width: auto !important;       /* ⭐ 폭 자동 조절 */
  max-width: 320px !important;  /* ⭐ 너무 길어지지 않도록 제한 */
  margin: 0 auto !important;    /* ⭐ 가운데 정렬 */
}

/* 버튼 내부 아이콘 크기 조정 */
.call-fixed .consult-call .phone-icon svg {
  width: 22px !important;
  height: 22px !important;
}

/* 버튼 아래 여백 */
body.subpage {
  padding-bottom: 80px !important;
}

/* ============================
   하단 상담 버튼 — index.html 동일 폭
============================ */

/* 버튼 전체 영역 여백 */
.call-fixed {
  padding: 16px 0 !important;
  margin-top: 40px !important; /* 위 콘텐츠와 간격 */
}

/* 버튼 폭을 자동으로 줄이고 가운데 정렬 */
.call-fixed .consult-call {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  padding: 12px 20px !important;
  border-radius: 12px !important;
  background: rgba(255,255,255,0.15) !important;
  backdrop-filter: blur(6px) !important;
  font-size: 17px !important;
  font-weight: 800 !important;
  width: auto !important;        /* ⭐ 폭 자동 */
  max-width: 320px !important;   /* ⭐ 너무 길어지지 않도록 제한 */
  margin: 0 auto !important;     /* ⭐ 가운데 정렬 */
}

/* 전화 아이콘 크기 조정 */
.call-fixed .phone-icon svg {
  width: 22px !important;
  height: 22px !important;
}

/* 하단 전체 여백 */
body.subpage {
  padding-bottom: 100px !important;
}