:root{
  --primary:#1a365d; --accent:#d4af37;
  --bg:#f8f9fa; --card:#fff; --line:#d0d7e2;
  --muted:#555; --info:#2b6cb0;
  --chip-bg:#f1f5f9; --chip-line:#e2e8f0;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:Arial,sans-serif;background:var(--bg);margin:0;padding:24px}
@media(max-width:520px){ body{padding:16px} }
.hide{display:none!important}

/* Header (로고만) */
.huchu-header{
  position:sticky;
  top:0;
  z-index:100;
  background:#ffffffcc;
  backdrop-filter:saturate(120%) blur(6px);
  border-bottom:1px solid var(--line);
}
.huchu-header__inner{
  max-width:960px;
  margin:0 auto;
  padding:10px 16px;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:12px;
}
.huchu-logo{
  display:inline-flex;
  align-items:center;
  text-decoration:none;
  gap:10px;
}
.logo-img{display:block;width:auto;height:28px}
.logo-fallback{display:none}
.logo-mark{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:28px;
  height:28px;
  border-radius:8px;
  border:1px solid #bfe9e4;
  background:linear-gradient(180deg,#d9fbf6,#bdf2ea);
  color:#0F172A;
  font-weight:900;
}
.logo-text{font:800 16px/1 Arial;color:#1a2542}

/* 상단 통계 */
.top-stats{max-width:720px;margin:14px auto}
.stat-card{
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:#fff;
  border:1px solid var(--line);
  border-radius:12px;
  padding:12px 16px;
  box-shadow:0 2px 8px rgba(0,0,0,.06);
}
.stat-label{
  display:flex;
  align-items:center;
  gap:8px;
  color:#42526e;
  font-weight:700;
}
.stat-dot{width:10px;height:10px;border-radius:50%;background:var(--info)}
.stat-value{
  display:flex;
  align-items:baseline;
  gap:4px;
  font-variant-numeric:tabular-nums;
}
.stat-value .num{
  font-weight:800;
  font-size:22px;
  color:#0b2a66;
  line-height:1;
}
.stat-value .suffix{
  font-size:14px;
  color:#6b7a99;
  line-height:1;
}
.type-chip-wrap{margin-top:8px}
.type-chips{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px;
}
.type-chip{
  display:flex;
  justify-content:space-between;
  align-items:center;
  border:1px solid var(--chip-line);
  background:var(--chip-bg);
  border-radius:999px;
  padding:8px 10px;
  min-width:0;
}
.type-chip .label{
  font-size:12px;
  color:#42526e;
  font-weight:700;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.type-chip .val{
  font-size:14px;
  font-weight:800;
  color:#0b2a66;
  margin-left:8px;
}

/* 계산기 컨테이너 */
.container{
  max-width:720px;
  margin:0 auto;
  background:var(--card);
  padding:22px;
  border-radius:14px;
  box-shadow:0 2px 10px rgba(0,0,0,.08);
}
@media(max-width:520px){ .container{padding:16px} }
h1{margin:0 0 8px;font-size:24px;color:#1a365d}
.subtitle{
  margin:0 0 18px;
  color:var(--muted);
  line-height:1.55;
  font-size:14px;
}
.step{
  margin:16px 0;
  padding:14px;
  border-radius:12px;
  background:#f1f4f9;
  border:1px solid var(--line);
  box-shadow:0 2px 8px rgba(0,0,0,.04);
}
label{
  display:block;
  font-weight:700;
  margin-bottom:6px;
  color:#1a365d;
}
#calcSteps{counter-reset:step}
.steplabel{
  position:relative;
  padding-left:30px;
  font-weight:800;
  color:#1a365d;
  line-height:1.2;
  display:block;
}
.steplabel::before{
  counter-increment:step;
  content:counter(step);
  position:absolute;
  left:0;
  top:50%;
  transform:translateY(-50%);
  width:22px;
  height:22px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:#1a365d;
  color:#fff;
  font-size:12px;
  font-weight:800;
  border:2px solid var(--accent);
  box-shadow:0 2px 6px rgba(11,31,58,.15);
}
.steplabel.no-badge-before{padding-left:0}
.steplabel.no-badge-before::before{
  display:none;
  counter-increment:none;
}
.badge-inline{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:22px;
  height:22px;
  margin:0 6px;
  border-radius:50%;
  background:#1a365d;
  color:#fff;
  font-size:12px;
  font-weight:800;
  border:2px solid var(--accent);
  line-height:1;
  vertical-align:middle;
  position:relative;
  top:-1px;
}
.amount-row{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:nowrap;
  width:100%;
}
.amount-row input{
  flex:0 0 336px;
  width:336px;
  min-width:0;
}
@media(max-width:520px){
  .amount-row input{
    flex:0 0 252px;
    width:252px;
  }
}
.amount-display{
  flex:0 0 auto;
  white-space:nowrap;
  font-size:13px;
  color:#334155;
  background:#F1F5F9;
  padding:8px 10px;
  border-radius:8px;
  border:1px solid #E2E8F0;
  text-align:left;
}
select,input,textarea{
  width:100%;
  padding:10px;
  border:1px solid #ccc;
  border-radius:8px;
  font-size:14px;
  background:#fff;
}
button{
  width:100%;
  padding:12px;
  border:0;
  border-radius:8px;
  background:#1a365d;
  color:#fff;
  font-size:16px;
  cursor:pointer;
  transition:background .15s;
}
button:hover{background:#153154}

/* 모달 & 버튼 */
.modal{position:fixed;inset:0;z-index:1000}
.modal .overlay{
  position:absolute;
  inset:0;
  background:rgba(2,6,23,.55);
  backdrop-filter:saturate(120%) blur(2px);
}
.modal .panel{
  position:relative;
  z-index:1;
  margin:auto;
  margin-top:8vh;
  width:min(92vw,760px);
  max-height:86vh;
  background:#fff;
  border:1px solid var(--line);
  border-radius:16px;
  box-shadow:0 12px 40px rgba(2,6,23,.25);
  display:flex;
  flex-direction:column;
}
.modal .panel-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 16px;
  border-bottom:1px dashed #cfd8ea;
}
.modal .panel-title{font-weight:800;color:#0b2a66}
.modal .panel-body{
  padding:16px 20px;
  overflow:auto;
  flex:1 1 auto;
}
.modal .panel-footer{
  border-top:1px solid #e6ecf5;
  padding:12px 16px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}
.btn{
  appearance:none;
  border:0;
  border-radius:10px;
  cursor:pointer;
  padding:12px 16px;
  font-weight:800;
  font-size:14px;
  line-height:1;
}
.btn-secondary{
  background:#f1f5f9;
  color:#334155;
  border:1px solid #d6dbe6;
}
.btn-kakao{
  background:#FEE500;
  color:#3C1E1E;
  border:1px solid #f4d000;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  font-weight:800;
}

/* 상태 칩(우측 상단) */
.status-pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  border-radius:999px;
  padding:6px 10px;
  font:800 12px/1 Arial;
  border:1px solid var(--line);
  background:#f8fafc;
  color:#0f172a;
}
.status-pill.info{
  background:#eff6ff;
  border-color:#bfdbfe;
  color:#1e40af;
}
.status-pill.success{
  background:#ecfdf5;
  border-color:#bbf7d0;
  color:#166534;
}
.status-pill.error{
  background:#fef2f2;
  border-color:#fecaca;
  color:#991b1b;
}

/* 결과 카드 */
.kpis{
  margin:12px 0 18px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}
.kpi{
  background:#fff;
  border:1px solid #e3e9f2;
  border-radius:12px;
  padding:14px 16px;
  box-shadow:0 2px 6px rgba(0,0,0,.05);
}
.kpi-label{font-size:12px;color:#5f6b85}
.kpi-value{
  font-size:clamp(15px, 2.4vw, 19px);
  font-weight:800;
  color:#0b2a66;
  margin-top:4px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.section-title{
  margin:16px 0 10px;
  font-weight:800;
  color:#0b2a66;
  display:flex;
  align-items:center;
  gap:8px;
}
.chip-row{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:12px;
  flex-wrap:wrap;
}
.chip{
  display:inline-flex;
  align-items:baseline;
  gap:8px;
  background:var(--chip-bg);
  border:1px solid var(--chip-line);
  border-radius:999px;
  padding:9px 14px;
  color:#1f2a3a;
  white-space:nowrap;
}
.chip .label,.chip .val{
  line-height:1;
  font-variant-numeric:tabular-nums;
}
.chip .label{font-size:13px;color:#42526e;font-weight:700}
.chip .label.rate-min{color:#0ea5e9;font-weight:800}
.chip .label.rate-max{color:#ef4444;font-weight:800}
.chip .val{
  font-size:clamp(14px, 3.2vw, 16px);
  font-weight:800;
  color:#0b2a66;
}
.chip-tilde{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 6px;
  font-size:18px;
  line-height:1;
  font-weight:800;
  color:#6b7a99;
}
.breakdown-card{
  background:#fff;
  border:1px solid #e6ecf5;
  border-radius:14px;
  box-shadow:0 4px 18px rgba(11,31,58,.06);
  padding:18px;
}
.card-section + .card-section{
  border-top:1px dashed #e3e9f2;
  margin-top:12px;
  padding-top:12px;
}
.rowlist{margin-top:10px;border-top:1px dashed #e3e9f2}
.rowlist .row{
  display:grid;
  grid-template-columns:14px auto 1fr;
  column-gap:10px;
  align-items:center;
  padding:10px 0;
  border-bottom:1px dashed #e3e9f2;
}
.rowlist .row:last-child{border-bottom:none}
.icon-dot{
  width:10px;
  height:10px;
  border-radius:50%;
  display:inline-block;
}
.dot-blue{background:#2b6cb0}
.dot-gold{background:#d4af37}
.dot-navy{background:#1a365d}
.dot-green{background:#2f855a}
.dot-slate{background:#6b7a99}
.row .label{
  color:#42526e;
  font-weight:700;
  white-space:nowrap;
}
.row .value{
  color:#0b2a66;
  text-align:right;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Footer */
.huchu-footer{
  margin-top:24px;
  background:#fff;
  border-top:1px solid var(--line);
}
.huchu-footer__inner{
  max-width:960px;
  margin:0 auto;
  padding:18px 16px;
}
.huchu-footer__bar{
  border-top:1px solid var(--line);
  text-align:center;
  padding:10px 16px;
  background:#f9fafb;
  color:#6b7280;
}

/* 안내 박스 */
.notice{
  border:1px solid var(--line);
  border-radius:12px;
  padding:12px 14px;
  background:#fff;
}
.notice.info{border-color:#bfdbfe;background:#eff6ff}
.notice.success{border-color:#bbf7d0;background:#ecfdf5}
.notice.error{border-color:#fecaca;background:#fef2f2}

/* ======================= 베타 홈 레이아웃 ======================= */

/* 메인 래퍼 */
.beta-main{margin-top:8px;}
.beta-inner{
  max-width:960px;
  margin:0 auto 40px;
  padding:0 16px 40px;
}

/* 히어로 영역 */
.beta-hero{
  margin-top:16px;
  margin-bottom:24px;
}
.beta-hero-grid{
  display:grid;
  grid-template-columns:minmax(0, 1.4fr) minmax(0, 1fr);
  gap:24px;
  align-items:stretch;
}
@media(max-width:768px){
  .beta-hero-grid{grid-template-columns:1fr;}
}

/* 왼쪽 배너 */
.beta-hero-banner{
  background:#020617;
  border-radius:20px;
  padding:20px 24px;
  color:#e5e7eb;
  box-shadow:0 18px 40px rgba(15,23,42,.35);
  min-height:180px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}
.beta-hero-banner__slides{flex:1 1 auto;}
.beta-hero-slide{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.beta-hero-slide__pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:4px 10px;
  border-radius:999px;
  font-size:11px;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  background:#0f172a;
  color:#e5e7eb;
  border:1px solid rgba(148,163,184,.6);
}
.beta-hero-slide__title{
  margin:4px 0;
  font-size:18px;
  font-weight:800;
  color:#f9fafb;
}
.beta-hero-slide__desc{
  margin:0;
  font-size:13px;
  line-height:1.5;
  color:#cbd5f5;
}
.beta-hero-slide__btn{
  margin-top:16px;
  width:auto;
  align-self:flex-start;
  padding:8px 16px;
  border-radius:999px;
  border:0;
  background:#f97316;
  color:#111827;
  font-size:12px;
  font-weight:700;
  cursor:default;
}
.beta-hero-banner__dots{
  margin-top:10px;
  display:flex;
  gap:6px;
}
.beta-hero-banner__dots .dot{
  width:6px;
  height:6px;
  border-radius:999px;
  border:0;
  padding:0;
  background:#4b5563;
}
.beta-hero-banner__dots .dot.is-active{
  width:16px;
  background:#facc15;
}

/* 오른쪽 카드 + 금일 이용자수 */
.beta-hero-right{
  display:flex;
  flex-direction:column;
  gap:12px;
}

/* 2×2 카드 (이미지 전용) */
.beta-hero-cards{background:transparent;}
.beta-hero-cards__grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}
.beta-hero-card{
  display:block;
  border-radius:20px;
  overflow:hidden;
}
.beta-hero-card img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}

/* 금일 이용자수 + 아래 배너 */
.beta-subinfo{
  margin-top:8px;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.beta-subinfo__metric-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:#ffffff;
  border-radius:999px;
  border:1px solid #d1d5db;
  padding:7px 14px;
  font-size:12px;
}
.beta-subinfo__label{
  color:#111827;
  font-weight:700;
}
.beta-subinfo__value{
  display:flex;
  align-items:baseline;
  gap:3px;
  font-variant-numeric:tabular-nums;
}
.beta-subinfo__value span{line-height:1;}
.beta-subinfo__value .unit{
  font-size:11px;
  color:#6b7280;
}
.beta-subinfo__banner{
  border-radius:20px;
  overflow:hidden;
  background:#e5e7eb;
}
.beta-subinfo__banner img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}

/* 공통 섹션 박스 */
.beta-section{margin-bottom:28px;}
.beta-section__header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:10px;
}
.beta-section__title-wrap{
  display:flex;
  align-items:center;
  gap:8px;
}
.beta-section__title{
  margin:0;
  font-size:16px;
  font-weight:800;
  color:#111827;
}
.beta-section__meta{
  font-size:11px;
  color:#6b7280;
}

/* 회색 카드 */
.beta-card{
  background:#f3f4f6;
  border-radius:18px;
  padding:14px 16px;
  border:1px solid #e5e7eb;
}
.beta-card--wide{width:100%;}

/* 대출현황 카드 그리드 */
.beta-loanstatus-grid{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:10px;
}
@media(max-width:960px){
  .beta-loanstatus-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}
@media(max-width:520px){
  .beta-loanstatus-grid{grid-template-columns:1fr;}
}
.beta-loanstatus-item{
  background:#ffffff;
  border-radius:12px;
  padding:10px 12px;
  box-shadow:0 2px 6px rgba(15,23,42,.05);
  border:1px solid #e5e7eb;
}
.beta-loanstatus-item__label{
  font-size:11px;
  color:#6b7280;
  margin-bottom:4px;
}
.beta-loanstatus-item__value{
  font-size:13px;
  font-weight:800;
  color:#111827;
}

/* 상품유형별 대출잔액: 좌우 2열 */
.beta-product-grid{
  display:grid;
  grid-template-columns:minmax(0, 1.1fr) minmax(0, 1.1fr);
  gap:16px;
}
@media(max-width:768px){
  .beta-product-grid{grid-template-columns:1fr;}
}
.beta-product-donut-wrap{
  background:#ffffff;
  border-radius:16px;
  padding:12px;
  border:1px solid #e5e7eb;
  box-shadow:0 2px 6px rgba(15,23,42,.05);
  min-height:260px;
  display:flex;
}
.beta-product-donut-wrap canvas{
  width:100% !important;
  height:100% !important;
}
.beta-product-boxes{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
}
@media(max-width:768px){
  .beta-product-boxes{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}
@media(max-width:520px){
  .beta-product-boxes{grid-template-columns:1fr;}
}
.beta-product-box{
  background:#ffffff;
  border-radius:12px;
  padding:10px 12px;
  border:1px solid #e5e7eb;
  box-shadow:0 2px 6px rgba(15,23,42,.05);
}
.beta-product-box__title{
  font-size:11px;
  font-weight:700;
  color:#111827;
  margin-bottom:4px;
}
.beta-product-box__amount{
  font-size:13px;
  font-weight:800;
  color:#0b2a66;
}

/* 베타 푸터 */
.beta-footer{
  margin-top:40px;
  background:#020617;
  color:#9ca3af;
  padding:18px 16px 26px;
}
.beta-footer__top{
  max-width:960px;
  margin:0 auto 10px;
  display:flex;
  gap:18px;
  font-size:12px;
}
.beta-footer__top a{
  color:#e5e7eb;
  text-decoration:none;
}
.beta-footer__top a:hover{text-decoration:underline;}
.beta-footer__bottom{
  max-width:960px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  gap:4px;
  font-size:11px;
  line-height:1.6;
}
.beta-footer__brand{
  display:flex;
  align-items:center;
  gap:6px;
  margin-bottom:4px;
}
.beta-footer__logo-mark{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:22px;
  height:22px;
  border-radius:999px;
  background:#facc15;
  color:#111827;
  font-size:13px;
  font-weight:900;
}
.beta-footer__logo-text{
  font-weight:800;
  color:#e5e7eb;
  letter-spacing:.06em;
}
.beta-footer__info p{margin:0;}
.beta-footer__info p + p{margin-top:2px;}

/* 푸터용 로고 이미지 (흰색 PNG용) */
.beta-footer__logo-img{
  display:block;
  height:18px;
  width:auto;
}

/* ======================= 베타 전용 상단 레이아웃 ======================= */

/* 베타 페이지용 body: 상단 여백 제거 + 전체 폭 헤더 */
body.beta-body{
  margin:0;
  padding:0;
  background:var(--bg);
}

/* 혹시 body 바로 아래에 남아있는 옛날 텍스트 링크(파란 밑줄) 강제 숨김 */
body.beta-body > a{display:none;}

/* 베타 헤더: 전체 폭 흰색, sticky 해제 */
.beta-header.huchu-header{
  position:relative;
  top:auto;
  background:#ffffff;
  border-bottom:1px solid var(--line);
  box-shadow:none;
}

/* 로고는 왼쪽, MENU 버튼은 오른쪽 끝 + 세로폭 넉넉하게(기존의 약 2배) */
.beta-header__inner{
  max-width:960px;
  margin:0 auto;
  padding:24px 24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}

/* 메뉴 래퍼 */
.beta-menu{position:relative;}

/* MENU 버튼 – 검정 직사각형 + 햄버거 아이콘 (CSS만으로) */
.beta-menu-toggle{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:10px 22px;
  border-radius:10px;
  border:0;
  background:#000000;
  color:#ffffff;
  font-size:13px;
  font-weight:800;
  cursor:pointer;
  width:auto;
  box-shadow:0 4px 10px rgba(15,23,42,.25);
  letter-spacing:.08em;
}
.beta-menu-toggle::before{
  content:"";
  display:inline-block;
  width:14px;
  height:2px;
  border-radius:999px;
  background:#ffffff;
  box-shadow:0 -4px 0 #ffffff, 0 4px 0 #ffffff; /* 위/아래 줄 */
}

/* 드롭다운 패널: 버튼 아래 작게 뜨는 카드형 메뉴 */
.beta-menu-panel{
  position:absolute;
  right:0;
  top:calc(100% + 8px);
  min-width:210px;
  background:#ffffff;
  border-radius:12px;
  border:1px solid #e5e7eb;
  box-shadow:0 12px 30px rgba(15,23,42,.18);
  padding:6px 0;
  z-index:200;
}

/* 드롭다운 안 링크 스타일 */
.beta-menu-link{
  display:block;
  padding:8px 14px;
  font-size:12px;
  font-weight:600;
  color:#111827;
  text-decoration:none;
  white-space:nowrap;
}
.beta-menu-link:hover{background:#f3f4f6;}

/* ======================= 관리자 전용 스타일(지역 선택 버튼) ======================= */
/* 베타 관리자: 담보대출 LTV/금리 설정 > 지역 선택 */
#adminLoanConfigSection .admin-region-list{
  display:flex;
  flex-wrap:nowrap;
  gap:8px;
  padding:8px 0;
  background:transparent;
}

/* 기본: 흰색 버튼 */
#adminLoanConfigSection .admin-region-btn{
  flex:0 0 auto;
  min-width:60px;                 /* "충청도" 기준 */
  padding:6px 12px;
  border-radius:999px;
  border:1px solid #d4d4d8;
  background:#ffffff !important;  /* 기본 흰색 */
  color:#111827 !important;
  font-size:13px;
  font-weight:700;
  text-align:center;
  line-height:1;
  cursor:pointer;
}

/* 선택된 지역만 노란색(#FFC001) */
#adminLoanConfigSection .admin-region-btn.is-active{
  background:#FFC001 !important;
  border-color:#FFC001;
  color:#111827 !important;
}

/* 포커스 표시 */
#adminLoanConfigSection .admin-region-btn:focus{
  outline:2px solid #facc15;
  outline-offset:1px;
}

/* 베타 페이지 기본: 버튼 width 자동 (지역 선택 등에서 꽉 차지 않도록) */
body.beta-body button{
  width:auto;
}

/* 관리자 공통: 메인 액션 버튼 (LTV/금리 저장, 통계 저장 등) */
.admin-primary-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:9px 18px;
  border-radius:999px;
  border:0;
  background:#111827;
  color:#f9fafb;
  font-size:13px;
  font-weight:800;
  letter-spacing:.02em;
  box-shadow:0 8px 18px rgba(15,23,42,.35);
  cursor:pointer;
  width:auto !important; /* 전역 button{width:100%} 덮어쓰기 */
}
.admin-primary-btn:hover{
  background:#020617;
}

/* ======================= 온투업 대출상품정보(베타 허브 + 상세) ======================= */

/* 전체 레이아웃 */
.products-main{
  max-width:960px;
  margin:0 auto 40px;
  padding:16px;
}

/* 히어로(상단) 영역 – 상세페이지용 */
.products-hero{
  margin-top:20px;
  margin-bottom:18px;
}

/* 공통 섹션 타이틀 */
.products-section{
  margin-bottom:28px;
}
.products-section__title{
  margin:0 0 12px;
  font-size:18px;
  font-weight:800;
  color:#111827;
}

/* 허브 카드 묶음 */
.product-hub{
  display:flex;
  flex-direction:column;
  gap:18px;
}

/* 공통 카드 */
.product-card{
  background:#ffffff;
  border-radius:18px;
  border:1px solid #e5e7eb;
  box-shadow:0 6px 16px rgba(15,23,42,.06);
  padding:16px 18px 18px;
}
.product-card__title{
  margin:0 0 6px;
  font-size:16px;
  font-weight:800;
  color:#111827;
}
.product-card__desc{
  margin:0 0 10px;
  font-size:13px;
  line-height:1.6;
  color:#4b5563;
}
.product-card__bullets{
  margin:0 0 10px;
  padding-left:18px;
  font-size:13px;
  color:#4b5563;
}
.product-card__bullets li+li{
  margin-top:4px;
}

/* 해시태그 */
.product-card__tags{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-bottom:10px;
}
.product-card__tags span,
.product-tag{
  display:inline-flex;
  align-items:center;
  padding:4px 8px;
  border-radius:999px;
  background:#f3f4f6;
  border:1px solid #e5e7eb;
  font-size:11px;
  color:#4b5563;
  white-space:nowrap;
}

/* ===== 아파트 카드용 상세보기 버튼 그룹 ===== */
.product-card__buttons{
  margin-top:8px;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:flex-start;
}
.product-card__buttons .product-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:6px 11px;          /* 8x16 → 6x11 정도로 축소 */
  border-radius:999px;
  background:#000000;
  color:#ffffff;
  font-size:11px;            /* 13px → 11px */
  font-weight:800;
  text-decoration:none;
  box-shadow:0 2px 6px rgba(0,0,0,.25);
  border:0;
  white-space:nowrap;
  width:auto;
}
.product-card__buttons .product-btn:hover{
  background:#111827;
}
.product-card__buttons .product-btn:active{
  transform:translateY(1px);
  box-shadow:0 2px 5px rgba(0,0,0,.25);
}

/* 다른 카드 하단의 텍스트 링크 */
.product-card__link{
  display:inline-flex;
  margin-top:6px;
  font-size:12px;
  font-weight:700;
  color:#1d4ed8;
  text-decoration:underline;
}
.product-card__link:hover{
  color:#1e40af;
}

/* 하단 안내 카드 그리드 (FAQ / 온투업을 찾는 경우) */
.products-info-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
}
@media(max-width:768px){
  .products-info-grid{
    grid-template-columns:1fr;
  }
}

/* 공통 상세 정보 카드 */
.product-info-card{
  background:#f3f4f6;
  border-radius:16px;
  border:1px solid #e5e7eb;
  padding:16px 18px 18px;
  font-size:13px;
}
.product-info-card h3{
  margin:0 0 6px;
  font-size:14px;
  font-weight:800;
  color:#111827;
}
.product-info-card p{
  margin:0 0 6px;
  font-size:13px;
  line-height:1.7;
  color:#4b5563;
}
.product-info-card ul{
  margin:4px 0 8px;
  padding-left:20px;
}
.product-info-card li{
  line-height:1.7;
}
.product-info-card li+li{
  margin-top:2px;
}

/* ===== 아파트 일반담보대출 상세페이지 전용 스타일 ===== */

/* 히어로 카드 */
.hero-card{
  padding:16px 18px 18px;
}

/* 제목: 20px, 굵게 + 그라디언트 밑줄 */
.hero-card h2{
  position:relative;
  display:inline-block;
  margin:0 0 12px;
  font-size:20px;
  font-weight:800;
  color:#0F172A;
  padding-bottom:6px;
}
.hero-card h2::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:2px;
  background:linear-gradient(
    90deg,
    rgba(59,130,246,0),
    #3B82F6,
    #60A5FA,
    rgba(96,165,250,0)
  );
}

/* 인트로 문장 아래 여백 */
.hero-card .hero-intro{
  font-size:15px;
  font-weight:500;
  margin-bottom:14px;
}

/* 히어로 카드 안 항목 줄 간격(대상고객/대출한도 등) */
.hero-card p{
  margin:0 0 3px;
  line-height:1.5;
}

/* 히어로 카드 하단 주석 두 줄 */
.hero-summary-note{
  font-size:11px;
  color:#6b7280;
  line-height:1.5;
  margin:0 !important;
}
.hero-note-main{
  margin-top:8px !important;
}
.hero-note-sub{
  margin-top:0 !important;
}

/* 만기연장 설명 텍스트: '연장가능' 아래 정렬용 */
.extend-note{
  display:inline-block;
  font-size:12px;
  color:#6b7280;
  margin-left:4px;
}

/* 상세 페이지 하단 뒤로가기 칩 버튼 */
.back-chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:6px 14px;
  border-radius:999px;
  background:#111827;
  border:1px solid #111827;
  color:#ffffff;
  font-size:12px;
  font-weight:700;
  text-decoration:none;
  line-height:1;
}
.back-chip:hover{
  background:#1f2937;
}
/* 담보대출 계산기 안내 2컬럼 레이아웃 */
.calculator-section-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr)); /* 5:5 비율 */
  gap:14px;
}
@media(max-width:768px){
  .calculator-section-grid{
    grid-template-columns:1fr;
  }
}

/* 두 카드 공통: 카드 전체를 세로 플렉스 레이아웃으로 */
.calculator-card,
.calculator-extra-card{
  display:flex;
  flex-direction:column;
}

/* ================= 왼쪽 카드(계산기) ================= */

/* 제목 아래 h3는 그대로 사용 */
.calculator-card h3{
  margin:0 0 10px;
}

/* 리스트 전체를 column flex로 만들어서 마지막 li를 아래로 밀기 */
.calculator-card ul{
  margin:0;
  padding-left:20px;
  display:flex;
  flex-direction:column;
  flex:1 1 auto; /* 카드 안에서 세로 공간을 채우도록 */
}

/* 일반 li는 기본 그대로 */
.calculator-card ul li{
  margin-bottom:4px;
}

/* 마지막 줄: 텍스트 + 버튼 한 줄 배치 + 카드 하단으로 밀기 */
.calculator-last-li{
  margin-top:auto;                /* ➜ 이 줄이 핵심: 마지막 li를 맨 아래로 */
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.calculator-last-li span{
  flex:1 1 auto;
}
.calculator-last-li .product-card__buttons{
  margin-top:0;  /* li 안에서는 위 여백 제거 */
}

/* 계산기 "바로가기" 버튼 – 그라데이션 전용 */
.product-card__buttons .product-btn.product-btn--calculator{
  background:linear-gradient(90deg,#faee21,#6fe600,#00ffff);
  color:#111827;
  box-shadow:0 6px 14px rgba(15,23,42,.25);
}
.product-card__buttons .product-btn.product-btn--calculator:hover{
  background:linear-gradient(90deg,#f5e307,#65d400,#06e5ff);
}
.product-card__buttons .product-btn.product-btn--calculator:active{
  transform:translateY(1px);
  box-shadow:0 3px 8px rgba(15,23,42,.3);
}

/* ================= 오른쪽 카드(네이버 블로그) ================= */

.calculator-extra-subtitle{
  margin:0 0 10px;
  font-size:14px;      /* 왼쪽 카드 '대출 승인...'과 같은 크기 */
  font-weight:800;
  color:#111827;
}
.calculator-extra-text{
  margin:0;
  font-size:13px;
  line-height:1.7;
  color:#4b5563;
}
.naver-blog-text{
  color:#2dbe3c;
  font-weight:700;
}
/* 실제 대출 사례 카드 – 본문 아래, 우측 정렬 버튼 */
.calculator-extra-card .product-card__buttons{
  margin-top:18px;          /* 본문과 버튼 사이 간격 */
  justify-content:flex-end; /* 오른쪽 끝으로 붙이기 */
}

/* 오른쪽 카드 부제목 ↔ 본문 사이 간격 조정 */
.calculator-extra-subtitle{
  margin: 0 0 12px !important;  /* 10px이 왼쪽 카드와 동일 값 */
}
/* 화면에는 안 보이지만, SEO/스크린리더용 텍스트 */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}