/* ================================================================
   op_rate2.css  —  주거용오피스텔 금리표 전용 스타일
   ----------------------------------------------------------------
   · apt_rate2.css(아파트) 를 복사해 만든 파일.
   · 아파트에 영향 주지 않으므로 여기서 자유롭게 수정 가능.
   · 변경점: 라이트모드 전체를 크림/베이지 -> 쿨 블루 톤으로 교체
       배경     #F7F3ED -> #EDF3F9
       은행헤더 #F0EAE0 -> #DCE6F0
       테두리·부제 텍스트도 같은 계열로 맞춤.
       본문색(--tx)과 강조색(--accent 브라운)은 그대로 유지.
   ================================================================ */
/* 
  apt_rate.css — 아파트담보대출 금리표 스타일시트
  MIDNIGHT OCEAN (다크) + LIGHT CREAM (라이트) 듀얼 테마
 */


/* 
  1. 리셋 & CSS 변수 (다크모드 기본값)
  */
* {
  margin: 0; padding: 0; box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}:root {
  /* 배경 */
  --bg: #0A1420;
  --card: #0D1B2A;
  --card2: #132D4A;

  /* 보더 */
  --b1: #152840;
  --b2: #1B3A5C;
  --b3: #1B3A5C;
  --b4: #3a7090;

  /* 텍스트 */
  --tx: #E0F0FF;
  --tx2: #93C5E0;
  --tx3: #3D5A73;

  /* 색상 */
  --blue: #4ECDC4;
  --blue-l: rgba(78,205,196,.12);
  --red: #FF7B7B;
  --red-l: rgba(255,123,123,.12);
  --dn: #4ECDC4;
  --grn: #5CE0B8;
  --grn-l: rgba(92,224,184,.12);
  --accent: #4ECDC4;
  --accent-l: rgba(78,205,196,.1);
  --r: 0px;
}/* ============================================================
  2. 라이트모드 CSS 변수 오버라이드
   ============================================================ */
body.light {
  --bg: #EDF3F9;      /* 페이지 배경 (기존 크림 #F7F3ED) */
  --card: #FFFFFF;
  --card2: #DCE6F0;
  --b1: #D9E2EC;
  --b2: #C7D3E0;
  --b3: #B4C3D3;
  --b4: #8FA3B8;
  --tx: #1E2A38;
  --tx2: #4A5C70;
  --tx3: #8296AB;
  --blue: #3D85C6;
  --blue-l: rgba(61,133,198,.08);
  --red: #D4533A;
  --red-l: rgba(212,83,58,.07);
  --dn: #3D85C6;
  --grn: #2E8B57;
  --grn-l: rgba(46,139,87,.07);
  --accent: #C87D3A;
  --accent-l: rgba(200,125,58,.06);
}/* ============================================================
   3. 라이트모드 — 개별 컴포넌트 오버라이드
   ============================================================ */

/* --- 3-1. 헤더 --- */
body.light .hd { background: #FFFFFF; }body.light .hd-title { color: #1E2A38; }body.light .hd-date-select {
  color: #C87D3A;
  background-color: rgba(200,125,58,.06);
  border-color: rgba(200,125,58,.2);
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%23C87D3A' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
}body.light .hd-date-select option { background: #FFFFFF; color: #1E2A38; }/* --- 3-2. 공지 영역 --- */
body.light .notice { background: linear-gradient(135deg, #FFF5F5 0%, #FFF9F0 100%) !important; border-color: rgba(212,83,58,.15) !important; }body.light .notice-txt { color: #4A5C70 !important; }body.light .notice-title { color: #D4533A !important; }body.light .notice-txt b { color: #33445A !important; }body.light .daily-notice { background: linear-gradient(135deg, #F0FAF5 0%, #F5F8F0 100%) !important; border-color: rgba(92,224,184,.15) !important; }body.light .dn-title { color: #C87D3A !important; }body.light .dn-txt { color: #4A5C70 !important; }/* --- 3-3. 은행 카드 (데이터 그리드) --- */
body.light .p-hd { background: #DCE6F0; }body.light .p-hd-blank { background: #DCE6F0; }body.light .p-hd .pc { color: #4A5C70; }body.light .bk-side { background: #DCE6F0; }body.light .data-wrap { background: #DCE6F0; }body.light .bk-nm { color: #1E2A38; }body.light .data-grid { background: #FFFFFF; }body.light .dr { background: #FFFFFF; border-color: #D9E2EC; }body.light .dc { background: #FFFFFF; border-color: #D9E2EC; }body.light .rc { background: #FFFFFF; border-color: #D9E2EC; }body.light .dr-lbl { color: #4A5C70; background: #E6EDF4; }body.light .rv { color: #1E2A38; }body.light .rc.has-val { background: #FFFFFF; }/* --- 3-4. 전일비 뱃지 --- */
body.light .chg.up { color: #D4533A; }body.light .chg.dn { color: #3D85C6; }body.light .chg.eq { color: #AFBECD; }body.light .chg.nw { color: #2E8B57; background: rgba(46,139,87,.08); }/* --- 3-5. 상세 아코디언 --- */
body.light .det-trigger { background: #F7FAFC; border-color: #D9E2EC; }body.light .det-trigger:active { background: #DCE6F0; }body.light .det-trigger-txt { color: #4A5C70; }body.light .det-row { background: #F7FAFC; border-color: #D9E2EC; }body.light .chevron { border-color: #8296AB; }body.light .det-txt { color: #4A5C70; }body.light .det-txt b { color: #1E2A38; }body.light .det-txt .r { color: #D4533A; }body.light .det-num { color: #D4533A; }/* --- 3-6. 상세 라벨 색상 --- */
body.light .dl-p { background: rgba(61,133,198,.08); color: #3D85C6; }body.light .dl-m { background: rgba(121,85,212,.08); color: #7955D4; }body.light .dl-e { background: rgba(200,125,58,.08); color: #C87D3A; border-color: rgba(200,125,58,.18); }body.light .dl-q { background: rgba(200,125,58,.06); color: #C87D3A; border-color: rgba(200,125,58,.15); }body.light .tg-q { background: rgba(200,125,58,.06); color: #C87D3A; border-color: rgba(200,125,58,.15); }/* --- 3-7. 용어 설묭 --- */
body.light .glossary-bar { background: #DCE6F0; }body.light .glossary-bar:active { background: #D9E2EC; }body.light .glossary-title { color: #1E2A38; }body.light .glossary-chevron { border-color: #8296AB; }body.light .gl-term { color: #C87D3A; }body.light .gl-desc { color: #4A5C70; }/* --- 3-8. 필터 바, 버튼 --- */
body.light .filter-bar {
  background-image: linear-gradient(to right, #E55D87 0%, #5FC3E4 51%, #E55D87 100%);
  background-size: 200% auto;
}body.light .filter-bar:active { opacity: .9; }body.light .filter-title { color: #FFFFFF; }body.light .filter-chevron { border-color: #8296AB; }body.light .filter-notice { color: #4A5C70; background: rgba(200,125,58,.02); border-color: #C7D3E0; }body.light .filter-notice b { color: #33445A; }body.light .filter-btn {
  background-image: linear-gradient(to right, #E55D87 0%, #5FC3E4 51%, #E55D87 100%);
  background-size: 200% auto;
}body.light .filter-btn:hover { background-position: right center; }body.light .filter-btn:active { opacity: .9; }body.light .filter-btn.loading { opacity: .8; }body.light .filter-btn.done { background: #2E8B57; }body.light .filter-btn-reset { background: #C7D3E0 !important; color: #33445A !important; }body.light .filter-btn-reset:active { background: #B4C3D3 !important; }body.light .fg-quick-btn { background: #DCE6F0; border-color: #C7D3E0; color: #4A5C70; }body.light .fg-quick-btn:hover { background: #C87D3A; color: #fff; border-color: #C87D3A; }body.light .fst-loan-type .f-txt { color: #3D85C6; }body.light .fst-property .f-txt { color: #2E8B57; }body.light .fst-borrower .f-txt { color: #C87D3A; }body.light .fst-family .f-txt { color: #D4533A; }body.light .fst-benefit .f-txt { color: #D4533A; }body.light .fst-sort .f-txt { color: #7B61FF; }/* --- 3-13. 하단 네비·플로팅 네비 --- */
body.light .bn-btn { background: #DCE6F0; border-color: #C7D3E0; color: #33445A; }body.light .bn-btn:active { background: #D9E2EC; }body.light .bn-top { color: #C87D3A; border-color: rgba(200,125,58,.2); background: rgba(200,125,58,.06); }body.light .bn-top:active { background: rgba(200,125,58,.12); }body.light #floatNav { background: #FFFFFF; border-color: #C7D3E0; box-shadow: 0 2px 12px rgba(45,31,16,.08); }body.light #floatNav button { background: #E4EDF5; border-color: #D9E2EC; color: #4A5C70; }body.light #floatNav button:hover { background: #D9E2EC; }body.light #floatNav .fn-label { color: #8296AB; }body.light #floatNav .fn-top { background: #C87D3A; color: #fff; border-color: #A86A30; }body.light #floatNav .fn-updn { background: #D9E2EC; color: #33445A; border-color: #C7D3E0; }body.light #floatNav .fn-bank { background: rgba(61,133,198,.05); color: #3D85C6; border-color: rgba(61,133,198,.15); }body.light #floatNav .fn-insure { background: rgba(46,139,87,.05); color: #2E8B57; border-color: rgba(46,139,87,.15); }/* --- 3-14. DSR 행 --- */
body.light .dsr-row .dr-lbl { background: #DCE6F0; }body.light .dv { color: #4A5C70; }body.light .dr-dsr .dr-lbl { background: #E4EDF5; }/* --- 3-15. 테마 토글 버튼 --- */
body.light .theme-toggle { background: #1a1a2e; border-color: #334155; color: #7EB8DA; }/* --- 3-16. 선택 조건 요약 --- */
body.light .filter-summary { background: #FFFFFF; border-color: #C87D3A; }body.light .fs-title { color: #C87D3A; }body.light .fs-tag { background: rgba(200,125,58,.06); color: #C87D3A; border-color: rgba(200,125,58,.2); }/* --- 3-17. 모바일 라이트모드 배경 통일 --- */
@media (max-width: 768px) {
  body.light { background: #EDF3F9 !important; }
  body.light .hero-wrapper,
  body.light .curve-container,
  body.light .curve-top,
  body.light .curve-bottom { background: #EDF3F9 !important; }
  body.light .header-section, body.light nav, body.light .navbar,
  body.light .top-menu-wrap, body.light .nav-wrapper,
  body.light header, body.light .site-header,
  body.light .hero-wrapper > *:first-child {
    background: #FFFFFF !important;
    border-color: #D9E2EC !important;
  }
  body.light .navbar a, body.light .nav-link,
  body.light .navbar-nav .nav-link { color: #33445A !important; }
  body.light .footer-section, body.light footer, body.light .site-footer,
  body.light .footer-menu-wrap {
    background: #FFFFFF !important;
    color: #4A5C70 !important;
    border-color: #D9E2EC !important;
  }
  body.light .footer-section a, body.light footer a,
  body.light .site-footer a { color: #4A5C70 !important; }
}/* ============================================================
   4. 기본 레이아웃 (body, 스크롤바)
   ============================================================ */
html, body {
  width: 100%;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}body {
  font-family: 'Noto Sans KR', -apple-system, sans-serif;
  background: var(--bg);
  color: var(--tx);
  padding-bottom: env(safe-area-inset-bottom, 16px);
}::-webkit-scrollbar { width: 0; height: 0; }/* 사이드바 기본 섹션 투명 처리 */
.faq-alt-section { background: transparent !important; }.section-title { display: none !important; }/* ============================================================
   5. 헤더 (상단 고정바)
   ============================================================ */
.hd {
  background: #0a1218;
  padding: 44px 8px 12px;
  display: flex; align-items: center; justify-content: space-between;
  position: sticky; top: 0; z-index: 100;
  border-bottom: 1px solid var(--b1);
}.hd-title {
  font-size: 21px; font-weight: 800; color: #FFFFFF; letter-spacing: -.5px;white-space:nowrap;flex:0 0 auto}.hd-date-select {
  appearance: none; -webkit-appearance: none;
  font-family: inherit; font-size: 13px; font-weight: 600;
  color: var(--accent); background: var(--accent-l);
  border: 1px solid rgba(78,205,196,.25); border-radius: 4px;
  padding: 5px 28px 5px 10px; cursor: pointer; outline: none;
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%234ECDC4' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 8px center;
  transition: border-color .15s;
}.hd-date-select:focus { border-color: var(--accent); }.hd-date-select option { background: var(--card); color: var(--tx); font-size: 14px; }/* 테마 토글 버튼 */
.theme-toggle {
  display: flex; align-items: center; gap: 6px;
  background: #DCE6F0; border: 1px solid #C7D3E0; border-radius: 20px;
  padding: 4px 10px 4px 8px; cursor: pointer;
  font-family: inherit; font-size: 12px; font-weight: 600; color: #4A5C70;
  transition: all .2s; outline: none; white-space: nowrap; flex-shrink: 0;
}.theme-toggle:active { background: #D9E2EC; }.theme-toggle .t-icon { font-size: 16px; line-height: 1; }/* ============================================================
   6. 공지 영역
   ============================================================ */
/* 필독 공지 */
.notice {
  margin: 10px 0 0; padding: 10px 16px;
  background: linear-gradient(135deg, #1a1025 0%, #0D1B2A 100%) !important;
  border: 1px solid rgba(255,123,123,.2); border-radius: 10px;
}.notice-title { font-size: 15px; font-weight: 700; color: #FF8A8A !important; margin-bottom: 4px; }.notice-txt { font-size: 14px; color: #B0C8DC !important; line-height: 1.5; }.notice-txt b { font-weight: 600; color: #E8F2FF !important; }/* 오늘의 안내 */
.daily-notice {
  margin: 6px 0 0; padding: 10px 16px;
  background: linear-gradient(135deg, #0D1B2A 0%, #0a2015 100%) !important;
  border: 1px solid rgba(78,205,196,.15); border-radius: 10px;
}.dn-title { font-size: 15px; font-weight: 700; color: #5CE0B8 !important; margin-bottom: 4px; }.dn-txt { font-size: 14px; color: #B0C8DC !important; line-height: 1.6; word-break: keep-all; }/* ============================================================
   7. 은행 카드 (금리 데이터 그리드)
   ============================================================ */
.bank {
  margin: 4px 0 0; background: var(--card); overflow: hidden;
  border: 1px solid var(--b1); border-radius: 12px;
}/* 등장 애니메이션 */
.bank { opacity: 0; transform: translateY(4px); animation: fadeUp .3s ease forwards; }.bank:nth-child(3) { animation-delay: .02s; }.bank:nth-child(4) { animation-delay: .04s; }.bank:nth-child(5) { animation-delay: .06s; }.bank:nth-child(6) { animation-delay: .08s; }.bank:nth-child(7) { animation-delay: .1s; }.bank:nth-child(8) { animation-delay: .12s; }.bank:nth-child(9) { animation-delay: .14s; }
@keyframes fadeUp {to { opacity: 1; transform: translateY(0); } }/* --- 7-1. 기간 헤더 (3개월~만기고정) --- */
.p-hd {
  display: grid; grid-template-columns: 42px 30px repeat(7, 1fr);
  background: var(--b1); border-bottom: 1px solid var(--b2);
  border-radius: 12px 12px 0 0;
}.p-hd-blank { background: var(--b1); }.p-hd .pc {
  display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 7px 0;
  font-size: 14px; font-weight: 700; color: #7EB8DA;
  border-right: 1px solid var(--b2); line-height: 1.2;
}.p-hd .pc:last-child { border-right: none; }/* --- 7-2. 은행명 사이드바 --- */
.data-wrap { display: flex; background: var(--b1); }.bk-side {
  flex: 0 0 42px; width: 42px;
  display: flex; flex-direction: column; align-items: center;
  justify-content: flex-start; gap: 4px;
  background: var(--b1); border-right: 1px solid var(--b2);
  border-bottom: 1px solid var(--b2); padding: 12px 2px 6px;
}.bk-dot { width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; }.bk-nm {
  font-size: 16px; font-weight: 800; color: #E0F0FF;
  writing-mode: vertical-rl; text-orientation: upright;
  letter-spacing: .5px; line-height: 1;
}/* --- 7-3. 데이터 행 (전일비, 매매, 생안) --- */
.data-grid { flex: 1; min-width: 0; }.dr {
  display: grid; grid-template-columns: 30px repeat(7, 1fr);
  border-bottom: 1px solid var(--b1);
}.dr:last-child { border-bottom: none; }.dr-lbl {
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 700; color: #7EB8DA;
  background: rgba(255,255,255,.03);
  border-right: 1px solid var(--b1);
  padding: 1px; line-height: 1.15;
  word-break: keep-all; text-align: center;
}/* --- 7-4. 전일비 뱃지 --- */
.dc {
  display: flex; align-items: center; justify-content: center;
  text-align: center; border-right: 1px solid var(--b1);
  padding: 4px 0; min-height: 30px;
}.dc:last-child { border-right: none; }.chg {
  font-family: 'DM Sans', sans-serif;
  font-size: 14px; font-weight: 700; white-space: nowrap;
  letter-spacing: -.2px; line-height: 1;
}.chg.up { color: var(--red); }.chg.dn { color: var(--dn); }.chg.eq { color: var(--b4); font-weight: 500; font-size: 15px; }.chg.nw {
  color: var(--grn); font-weight: 700; font-size: 13px;
  background: var(--grn-l); padding: 2px 5px; border-radius: 3px;
}/* --- 7-5. 금리 셀 --- */
.rc {
  display: flex; align-items: center; justify-content: center;
  text-align: center; border-right: 1px solid var(--b1);
  padding: 6px 0; min-height: 36px;
}.rc:last-child { border-right: none; }.rc.has-val { background: transparent; }.rv {
  font-family: 'DM Sans', sans-serif;
  font-size: 15px; font-weight: 700; color: #FFFFFF;
  letter-spacing: -.3px; line-height: 1;
}/* ============================================================
   8. 상세 아코디언 (금리·우대·중도·기타)
   ============================================================ */
.det-trigger {
  display: flex; align-items: flex-start; padding: 8px 14px;
  background: rgba(255,255,255,.02); border-top: 1px solid var(--b1);
  cursor: pointer; user-select: none; gap: 6px;
}.det-trigger:active { background: rgba(255,255,255,.06); }.det-trigger-txt {
  font-size: 15px; font-weight: 400; color: #93C5E0;
  line-height: 1.5; flex: 1; max-width: 700px;
}.det-trigger-txt .tg {
  display: inline-block; padding: 2px 6px; border-radius: 3px;
  font-size: 13px; font-weight: 700; margin-right: 4px; vertical-align: middle;
}.det-trigger .det-txt {
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis; max-width: 100%;
}.det-trigger.open .det-txt {
  white-space: normal; overflow: visible; text-overflow: unset;
}.tg-q {
  background: var(--accent-l); color: var(--accent);
  border: 1px solid rgba(78,205,196,.2);
}/* 화살표 (chevron) */
.chevron {
  display: inline-block; width: 7px; height: 7px;
  border-right: 1.5px solid var(--tx3); border-bottom: 1.5px solid var(--tx3);
  transform: rotate(45deg); margin-left: 6px; vertical-align: middle;
  transition: transform .25s ease; flex-shrink: 0;
  position: relative; top: -1px;
}.det-trigger.open .chevron { transform: rotate(-135deg); top: 1px; }/* 상세 본문 */
.det-body {
  overflow: hidden; max-height: 0;
  transition: max-height .3s cubic-bezier(.4,0,.2,1);
  background: var(--card2);
}.det-body.open { max-height: 500px; }.det-row {
  display: flex; align-items: flex-start; padding: 8px 14px;
  border-top: 1px solid var(--b1); gap: 6px;
}.det-label {
  flex-shrink: 0; font-size: 11px; font-weight: 600;
  padding: 2px 6px; border-radius: 3px; margin-top: 1px;
}.dl-p { background: rgba(78,205,196,.12); color: #4ECDC4; }.dl-m { background: rgba(160,140,255,.12); color: #A08CFF; }.dl-e { background: rgba(255,177,66,.15); color: #FFB142; border: 1px solid rgba(255,177,66,.25); }.dl-q { background: var(--accent-l); color: var(--accent); border: 1px solid rgba(78,205,196,.2); }.det-txt {
  font-size: 15px; color: #93C5E0; line-height: 1.8;
  word-break: keep-all; max-width: 700px;
}.det-txt b { color: var(--tx); font-weight: 700; }.det-num { color: #E0F0FF; font-weight: 700; }.det-txt .r { color: var(--red); font-weight: 700; }/* ============================================================
   9. DTI/DSR 행
   ============================================================ */
.dsr-row {
  display: none; margin-left: -43px;
  grid-template-columns: 73px repeat(7, 1fr);
}.dsr-row .dr-lbl {
  font-size: 11px; color: #7EB8DA; background: var(--b1);
  border-right: 1px solid var(--b2); border-top: 1px solid var(--b1);
  line-height: 1.15; letter-spacing: -.3px; padding: 2px 2px;
  word-break: keep-all;
}.dsr-row .dc { min-height: 26px; padding: 2px 0; }.dv {
  font-family: 'DM Sans', sans-serif;
  font-size: 14px; font-weight: 700; color: #7EB8DA;
  letter-spacing: -.2px; line-height: 1; white-space: nowrap;
}/* DSR 행 (구버전 dr-dsr 호환) */
.dr-dsr {
  display: none; margin-left: -43px;
  grid-template-columns: 73px repeat(7, 1fr);
}.dr-dsr .dr-lbl { background: #182840; }/* ============================================================
   10. 용어 해설 아코디언
   ============================================================ */
.glossary-bar {
  margin: 6px 0 0; padding: 8px 14px;
  background: var(--card2); border: 1px solid var(--b1); border-radius: 10px;
  display: flex; align-items: center; gap: 8px;
  cursor: pointer; user-select: none;
}.glossary-bar:active { background: var(--b1); }.glossary-icon { font-size: 16px; flex-shrink: 0; }.glossary-title { font-size: 16px; font-weight: 700; color: var(--tx); flex: 1; }.glossary-chevron {
  display: inline-block; width: 8px; height: 8px;
  border-right: 2px solid var(--tx3); border-bottom: 2px solid var(--tx3);
  transform: rotate(45deg); transition: transform .25s ease; flex-shrink: 0;
}.glossary-bar.open .glossary-chevron { transform: rotate(-135deg); }.glossary-body {
  overflow: hidden; max-height: 0;
  transition: max-height .35s cubic-bezier(.4,0,.2,1);
  background: var(--card); border: 1px solid var(--b1);
  border-top: none; margin: 0; border-radius: 0 0 10px 10px;
}.glossary-body.open { max-height: 600px; }.glossary-list { padding: 8px 14px 10px; }.gl-item { padding: 6px 0; border-bottom: 1px solid var(--b1); }.gl-item:last-child { border-bottom: none; }.gl-term { font-size: 15px; font-weight: 700; color: var(--accent); margin-bottom: 2px; }.gl-desc { font-size: 14px; color: #93C5E0; line-height: 1.5; word-break: keep-all; }/* ============================================================
   11. 필터 바 & 필터 영역
   ============================================================ */
/* --- 11-1. 필터 열기/닫기 바 (그라데이션) --- */
.filter-bar {
  margin: 6px 0 0; padding: 12px 16px;
  background-image: linear-gradient(to right, #E55D87 0%, #5FC3E4 51%, #E55D87 100%);
  border: none; border-radius: 12px;
  display: flex; align-items: center; gap: 8px;
  cursor: pointer; user-select: none;
  background-size: 200% auto; transition: 0.5s;
  box-shadow: 0 0 20px #eee;
}.filter-bar:hover { background-position: right center; }.filter-bar.open { background: #071639 !important; background-image: none !important; }.filter-bar:active { background: var(--b1); }.filter-icon { font-size: 18px; flex-shrink: 0; }.filter-title { font-size: 16px; font-weight: 700; color: #FFFFFF; flex: 1; }.filter-chevron {
  display: inline-block; width: 8px; height: 8px;
  border-right: 2px solid #FFFFFF; border-bottom: 2px solid #FFFFFF;
  transform: rotate(45deg); transition: transform .25s ease; flex-shrink: 0;
}.filter-bar.open .filter-chevron { transform: rotate(-135deg); }/* --- 11-2. 필터 본문 (접기/펼치기) --- */
.filter-body {
  overflow: hidden; max-height: 0;
  transition: max-height .35s cubic-bezier(.4,0,.2,1); margin: 0;
}.filter-body.open { max-height: 8000px; }.f-card-label .f-num {
  width: 22px; height: 22px; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800; flex-shrink: 0;
}.f-card-label .f-txt { color: var(--tx); }/* 카드 번호 배경색 */
.fst-loan-type .f-num { background: rgba(78,205,196,.12); color: #4ECDC4; }.fst-property .f-num { background: rgba(92,224,184,.12); color: #5CE0B8; }.fst-borrower .f-num { background: rgba(255,177,66,.12); color: #FFB142; }.fst-family .f-num { background: rgba(255,140,50,.12); color: #FF8C32; }.fst-benefit .f-num { background: rgba(255,123,123,.12); color: #FF7B7B; }.fst-sort .f-num { background: rgba(160,140,255,.12); color: #A08CFF; }/* 카드 제목 색상 */
.fst-loan-type .f-txt { color: #4ECDC4; }.fst-property .f-txt { color: #5CE0B8; }.fst-borrower .f-txt { color: #FFB142; }.fst-family .f-txt { color: #FF8C32; }.fst-benefit .f-txt { color: #FF7B7B; }.fst-sort .f-txt { color: #A08CFF; }.fg-note {
  font-size: 12px; color: var(--tx3); padding: 2px 0 0;
  line-height: 1.4; width: 100%; flex-basis: 100%;
}.filter-notice {
  font-size: 14px; color: #93C5E0; line-height: 1.6;
  padding: 8px 10px; margin-bottom: 6px;
  background: rgba(255,255,255,.03); border: 1px dashed var(--b2);
  border-radius: 4px; word-break: keep-all; grid-column: 1 / -1;
}.filter-notice b { color: #7EB8DA; font-weight: 600; }.seg-check { font-size: 11px; font-weight: 700; margin-left: 2px; }/* 범용 토글 (.sw — .tg-item 내) */
.sw { position: relative; width: 44px; height: 26px; flex-shrink: 0; }.sw input { opacity: 0; width: 0; height: 0; position: absolute; }.sw-track {
  position: absolute; inset: 0; background: var(--b3);
  border-radius: 13px; cursor: pointer; transition: all .2s;
}.sw-track::after {
  content: ''; position: absolute; top: 3px; left: 3px;
  width: 20px; height: 20px; background: #fff; border-radius: 50%;
  transition: all .2s; box-shadow: 0 1px 3px rgba(0,0,0,.15);
}.sw input:checked + .sw-track { background: var(--blue); }.sw input:checked + .sw-track::after { transform: translateX(18px); }.tg-item {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 0; border-top: 1px solid var(--b1);
}.tg-item:first-of-type { border-top: none; padding-top: 0; }.tg-text { font-size: 13px; font-weight: 500; color: var(--tx); }.tg-text small {
  display: block; font-size: 11px; color: var(--tx3);
  font-weight: 400; margin-top: 2px;
}.fg-quick-btn {
  padding: 5px 10px; border: 1px solid var(--b2); border-radius: 6px;
  font-size: 11px; font-weight: 500; font-family: inherit;
  color: var(--tx2); background: var(--b1);
  cursor: pointer; transition: all .2s;
}.fg-quick-btn:hover { background: var(--blue); color: #fff; border-color: var(--blue); }.fg-quick-btn:active { transform: scale(.96); }/* ============================================================
   18. 적용 버튼
   ============================================================ */
.filter-btn-wrap { padding: 8px 0 2px; display: flex; justify-content: center; }.filter-btn {
  width: 100%; padding: 14px 0;
  background-image: linear-gradient(to right, #E55D87 0%, #5FC3E4 51%, #E55D87 100%);
  color: #FFFFFF; font-family: inherit; font-size: 16px; font-weight: 700;
  border: none; border-radius: 10px; cursor: pointer;
  transition: 0.5s; letter-spacing: -.2px;
  background-size: 200% auto; box-shadow: 0 0 20px #eee;
}.filter-btn:hover {
  background-position: right center;
  transform: translateY(-1px);
  box-shadow: 0 4px 20px rgba(229,93,135,.4);
}.filter-btn:active { transform: translateY(0); }.filter-btn.loading {
  pointer-events: none;
  background: #071639 !important; background-image: none !important;
  position: relative;
}.filter-btn.loading::after {
  content: ''; display: inline-block; width: 14px; height: 14px;
  border: 2px solid rgba(255,255,255,.3); border-top-color: #fff;
  border-radius: 50%; animation: spin .6s linear infinite;
  margin-left: 8px; vertical-align: middle;
}
@keyframes spin {to { transform: rotate(360deg); } }.filter-btn.done {
  background: #071639 !important; background-image: none !important;
  pointer-events: none;
}.filter-btn-reset { background: var(--b3) !important; color: var(--tx) !important; }.filter-btn-reset:active { background: var(--b4) !important; }/* ============================================================
   19. 선택 조건 요약
   ============================================================ */
.filter-summary {
  background: var(--card); border: 2px solid var(--accent);
  border-radius: 10px; padding: 12px 16px;
  margin: 20px 0 25px 0;
  box-shadow: 0 2px 8px rgba(0,0,0,.15);
  position: relative;
  z-index: 1;
}.fs-title { font-size: 14px; font-weight: 700; color: var(--accent); margin-bottom: 8px; }.fs-content { display: flex; flex-wrap: wrap; gap: 6px; }.fs-tag {
  display: inline-block; padding: 4px 10px; border-radius: 6px;
  font-size: 12px; font-weight: 600;
  background: var(--accent-l); color: var(--accent);
  border: 1px solid rgba(78,205,196,.2);
}/* ============================================================
   20. 푸터 & 하단 네비게이션
   ============================================================ */
.ft {
  margin: 10px 0 0; padding: 14px 16px;
  background: var(--card); border: 1px solid var(--b1); border-radius: 10px;
  text-align: center; font-size: 14px; color: var(--tx3); line-height: 1.6;
}.bottom-nav { display: flex; gap: 10px; padding: 10px 16px 20px; justify-content: center; }.bn-btn {
  flex: 1; display: flex; align-items: center; justify-content: center;
  padding: 12px 0; background: var(--card2);
  border: 1px solid var(--b2); border-radius: 8px;
  font-family: inherit; font-size: 14px; font-weight: 700; color: #7EB8DA;
  text-decoration: none; cursor: pointer; transition: background .15s; outline: none;
}.bn-btn:active { background: var(--b1); }.bn-top {
  color: var(--accent); border-color: rgba(78,205,196,.25);
  background: var(--accent-l);
}.bn-top:active { background: rgba(78,205,196,.2); }/* ============================================================
   21. 플로팅 네비게이션 (우측 고정)
   ============================================================ */
#floatNav {
  position: fixed; right: calc(50% - 700px); top: 50%;
  transform: translateY(-50%); z-index: 9999;
  display: flex; flex-direction: column; gap: 3px;
  background: var(--card); border: 1px solid var(--b2);
  border-radius: 10px; padding: 8px 6px;
  box-shadow: 0 4px 18px rgba(0,0,0,.3);
  width: 68px; max-height: 88vh; overflow-y: auto;
}#floatNav button {
  width: 100%; padding: 4px 2px;
  border: 1px solid var(--b2); border-radius: 5px;
  background: var(--card2); color: #7EB8DA;
  font-size: 10px; font-family: inherit; cursor: pointer;
}#floatNav button:hover { background: var(--b1); }#floatNav .fn-label { font-size: 8px; color: var(--tx3); text-align: center; margin: 2px 0 1px; }#floatNav .fn-top {
  background: #1E293B; color: #fff; border-color: #334155;
  font-size: 14px; padding: 5px 0; margin-bottom: 2px;
}#floatNav .fn-updn { background: #334155; color: #fff; border-color: #475569; font-size: 12px; }#floatNav .fn-bank { background: rgba(78,205,196,.08); color: var(--blue); border-color: rgba(78,205,196,.2); }#floatNav .fn-insure { background: rgba(92,224,184,.08); color: var(--grn); border-color: rgba(92,224,184,.2); }/* 플로팅 토글 버튼 (모바일) */
#fnToggle {
  display: none; position: fixed; right: 8px; bottom: 16px;
  z-index: 10000; width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--b2); background: var(--card); color: #7EB8DA;
  font-size: 18px; box-shadow: 0 2px 10px rgba(0,0,0,.3);
  cursor: pointer; align-items: center; justify-content: center;
}#fnToggle.fn-hide { right: 8px; bottom: 16px; }/* ============================================================
   22. 금리 버블 (말풍선) 스타일
   ============================================================ */
.rv.clickable-rate { cursor: pointer; }.rv.clickable-rate:hover { text-decoration: underline; text-decoration-color: #ffd700; }/* ============================================================
   23. (?) 도움말 아이콘 & 말풍선
   ============================================================ */
.fg-help {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 50%;
  background: rgba(78,205,196,.2); color: #4ECDC4;
  font-size: 11px; font-weight: 700; cursor: pointer;
  margin-left: 4px; vertical-align: middle;
  border: 1px solid rgba(78,205,196,.4);
  transition: background .2s;
}.fg-help:hover { background: rgba(78,205,196,.4); }.fg-tooltip {
  display: none;
  background: #1a1a2e; border: 1.5px solid #00d4ff; border-radius: 8px;
  padding: 10px 12px; margin: 4px 0 6px;
  font-size: 12px; line-height: 1.7; color: #ccc;
  box-shadow: 0 4px 12px rgba(0,0,0,.4); position: relative;
}.fg-tooltip-title { color: #ffd700; font-weight: 700; font-size: 13px; margin-bottom: 4px; }.fg-tooltip-body { color: #bbb; }.fg-tooltip-body b { color: #E0F0FF; }.fg-tooltip-close {
  display: block; text-align: right; margin-top: 6px;
  color: #ff6b6b; font-size: 11px; cursor: pointer;
}/* 도움말 라이트모드 */
body.light .fg-help {
  background: rgba(37,99,235,.1); color: #2563EB;
  border-color: rgba(37,99,235,.3);
}body.light .fg-help:hover { background: rgba(37,99,235,.2); }body.light .fg-tooltip {
  background: #fff; border-color: #2563EB; color: #333;
  box-shadow: 0 4px 12px rgba(0,0,0,.12);
}body.light .fg-tooltip-title { color: #1e40af; }body.light .fg-tooltip-body { color: #555; }body.light .fg-tooltip-body b { color: #111; }body.light .fg-tooltip-close { color: #dc2626; }/* ============================================================
   24. 다크모드 강제 오버라이드 (!important)
   — body:not(.light) 상태에서 외부 테마 간섭 방지
   ============================================================ */

/* --- 24-1. 은행 카드 --- */
html body:not(.light) .bank { background: #0A1420 !important; border-color: #152840 !important; }html body:not(.light) .p-hd { background: #132D4A !important; border-color: #1B3A5C !important; }html body:not(.light) .p-hd-blank { background: #132D4A !important; }html body:not(.light) .p-hd .pc { color: #7EB8DA !important; border-color: #1B3A5C !important; }html body:not(.light) .data-wrap { background: #132D4A !important; }html body:not(.light) .bk-side { background: #132D4A !important; border-color: #1B3A5C !important; }html body:not(.light) .bk-nm { color: #E0F0FF !important; }html body:not(.light) .data-grid { background: #0A1420 !important; }html body:not(.light) .dr { background: #0A1420 !important; border-color: #152840 !important; }html body:not(.light) .dc { background: #0A1420 !important; border-color: #152840 !important; }html body:not(.light) .rc { background: #0A1420 !important; border-color: #152840 !important; }html body:not(.light) .rv { color: #FFFFFF !important; }html body:not(.light) .dr-lbl { background: #0E2035 !important; color: #7EB8DA !important; border-color: #152840 !important; }/* --- 24-2. 전일비 뱃지 --- */
html body:not(.light) .chg.up { color: #FF7B7B !important; }html body:not(.light) .chg.dn { color: #4ECDC4 !important; }html body:not(.light) .chg.eq { color: #5A5A5C !important; }html body:not(.light) .chg.nw { color: #5CE0B8 !important; background: rgba(92,224,184,.12) !important; }/* --- 24-3. 상세 아코디언 --- */
html body:not(.light) .det-trigger { background: #081420 !important; border-color: #152840 !important; }html body:not(.light) .det-trigger-txt { color: #93C5E0 !important; }html body:not(.light) .det-body { background: #0D1B2A !important; }html body:not(.light) .det-row { background: #0D1B2A !important; border-color: #152840 !important; }html body:not(.light) .det-txt { color: #93C5E0 !important; }html body:not(.light) .det-txt b { color: #E0F0FF !important; }html body:not(.light) .det-num { color: #E0F0FF !important; }html body:not(.light) .det-txt .r { color: #FF7B7B !important; }html body:not(.light) .chevron { border-color: #3D5A73 !important; }/* --- 24-4. 공지 영역 --- */
html body:not(.light) .notice { background: linear-gradient(135deg, #1a1025 0%, #0D1B2A 100%) !important; border-color: rgba(255,123,123,.2) !important; }html body:not(.light) .notice-title { color: #FF8A8A !important; }html body:not(.light) .notice-txt { color: #B0C8DC !important; }html body:not(.light) .notice-txt b { color: #E8F2FF !important; }html body:not(.light) .daily-notice { background: linear-gradient(135deg, #0D1B2A 0%, #0a2015 100%) !important; border-color: rgba(78,205,196,.15) !important; }html body:not(.light) .dn-title { color: #4ECDC4 !important; }html body:not(.light) .dn-txt { color: #93C5E0 !important; }/* --- 24-5. 용어 해설 --- */
html body:not(.light) .glossary-bar { background: #0D1B2A !important; border-color: #152840 !important; }html body:not(.light) .glossary-title { color: #E0F0FF !important; }html body:not(.light) .glossary-body { background: #0A1420 !important; border-color: #152840 !important; }html body:not(.light) .gl-term { color: #4ECDC4 !important; }html body:not(.light) .gl-desc { color: #93C5E0 !important; }/* --- 24-6. 필터 영역 --- */
html body:not(.light) .filter-bar { background: #0D1B2A !important; border-color: #152840 !important; }html body:not(.light) .filter-title { color: #E0F0FF !important; }html body:not(.light) .filter-body { background: transparent !important; border-color: transparent !important; }html body:not(.light) .fg-note { color: #93C5E0 !important; }html body:not(.light) .filter-notice { color: #93C5E0 !important; border-color: #1B3A5C !important; background: rgba(255,255,255,.03) !important; }/* --- 24-7. 헤더·푸터·네비 --- */
html body:not(.light) .hd { background: #070E18 !important; border-color: #152840 !important; }html body:not(.light) .hd-title { color: #FFFFFF !important; }html body:not(.light) .ft { background: #0A1420 !important; border-color: #152840 !important; color: #3D5A73 !important; }html body:not(.light) .bottom-nav .bn-btn { background: #0D1B2A !important; border-color: #1B3A5C !important; color: #7EB8DA !important; }html body:not(.light) .bottom-nav .bn-top { color: #4ECDC4 !important; border-color: rgba(78,205,196,.25) !important; background: rgba(78,205,196,.1) !important; }html body:not(.light) #floatNav { background: #0A1420 !important; border-color: #1B3A5C !important; }html body:not(.light) #fnToggle { background: #0A1420 !important; border-color: #1B3A5C !important; color: #7EB8DA !important; }html body:not(.light) #floatNav button { background: #0D1B2A !important; border-color: #1B3A5C !important; color: #7EB8DA !important; }/* --- 24-8. DSR 행 --- */
html body:not(.light) .dsr-row .dr-lbl { background: #132D4A !important; color: #7EB8DA !important; border-color: #1B3A5C !important; }html body:not(.light) .dv { color: #7EB8DA !important; }/* --- 24-9. 투명 배경 (외부 테마 간섭 방지) --- */
html body:not(.light) .faq-alt-section { background: transparent !important; }html body:not(.light) .faq-alt-section.over-curve { background: transparent !important; }html body:not(.light) .container { background: transparent !important; }html body:not(.light) section { background: transparent !important; }html body:not(.light) .over-curve { background: transparent !important; }html body:not(.light) .text-center { background: transparent !important; }html body:not(.light) .py-5 { background: transparent !important; }html body:not(.light) .hero-wrapper { background: transparent !important; }html body:not(.light) .curve-container { background: transparent !important; }html body:not(.light) .curve-top { background: transparent !important; }html body:not(.light) .curve-bottom { background: transparent !important; }/* ============================================================
   25. 반응형 — 모바일 (768px 이하)
   ============================================================ */
@media (max-width: 768px) {
  /* 헤더 */
  .hd { flex-wrap: wrap; gap: 8px; padding: 10px 8px; }
  .hd-title { width: 100%; font-size: 19px; }
  .hd-controls { flex: 1; justify-content: flex-end; }

  /* 사이드바 숨김, 플로팅 네비 */
  #mypageSidebar { display: none !important; }
  #floatNav { display: none; }
  #floatNav.fn-open {
    display: flex !important; right: 8px !important;
    top: 50% !important; transform: translateY(-50%) !important;
  }
  #fnToggle { display: block !important; }

  /* 폰트 축소 */
  .rv { font-size: 12px; }
  .chg { font-size: 11px; }
  .chg.nw { font-size: 10px; }
  .chg.eq { font-size: 12px; }
  .p-hd .pc { font-size: 11px; }
  .dr-lbl { font-size: 11px; }
  .bk-nm { font-size: 13px; }
  .dv { font-size: 11px; }
  .dsr-row .dr-lbl { font-size: 9px; }

  /* 필터 카드 */
  .f-card { padding: 16px 12px; }
  .fg-amount-row input { font-size: 14px; padding: 9px 10px; }
  .fg-quick-btns { gap: 4px; }
  .fg-quick-btn { padding: 4px 8px; font-size: 10px; }
  .opt-seg label { font-size: 11px; padding: 8px 4px; }

  /* 나이 셀렉트 모바일 전환 */
  .age-radio { display: none !important; }
  .age-select { display: block !important; }

  /* 다크모드 모바일 배경 */
  html body:not(.light) { background: #070E18 !important; color: #E0F0FF !important; }
  html body:not(.light) .hero-wrapper,
  html body:not(.light) .curve-container,
  html body:not(.light) .curve-top,
  html body:not(.light) .curve-bottom { background: #070E18 !important; }
  html body:not(.light) .header-section, html body:not(.light) nav,
  html body:not(.light) .navbar, html body:not(.light) .top-menu-wrap,
  html body:not(.light) .nav-wrapper, html body:not(.light) header,
  html body:not(.light) .site-header,
  html body:not(.light) .hero-wrapper > *:first-child {
    background: #070E18 !important; border-color: #152840 !important;
  }
  html body:not(.light) .navbar a, html body:not(.light) .nav-link,
  html body:not(.light) .navbar-nav .nav-link { color: #7EB8DA !important; }
  html body:not(.light) .footer-section, html body:not(.light) footer,
  html body:not(.light) .site-footer,
  html body:not(.light) .footer-menu-wrap {
    background: #070E18 !important; color: #7EB8DA !important; border-color: #152840 !important;
  }
  html body:not(.light) .footer-section a, html body:not(.light) footer a,
  html body:not(.light) .site-footer a { color: #7EB8DA !important; }
  html body:not(.light) .faq-alt-section { background: transparent !important; }
  html body:not(.light) .container { background: transparent !important; }
}/* ============================================================
   26. 반응형 — 데스크탑 (769px 이상)
   ============================================================ */
@media (min-width: 769px) {
  /* 사이드바 표시 */
  #mypageSidebar { display: block !important; }

  /* 다크모드 데스크탑: 페이지 전체를 다크로 (모바일과 동일)
     ── 원래는 unset 으로 외부 테마(흰 배경)를 그대로 노출했으나,
        금리표만 어둡고 헤더·푸터·배경은 흰색이라 어색해서 전체 다크로 통일. */
  html body:not(.light) { background: #070E18 !important; color: #E0F0FF !important; }
  html body:not(.light) .hero-wrapper, html body:not(.light) .curve-container,
  html body:not(.light) .curve-top, html body:not(.light) .curve-bottom { background: #070E18 !important; }
  html body:not(.light) .faq-alt-section { background: transparent !important; }
  html body:not(.light) .container { background: transparent !important; }
  html body:not(.light) .over-curve { background: transparent !important; }
  html body:not(.light) .header-section, html body:not(.light) nav,
  html body:not(.light) .navbar, html body:not(.light) .top-menu-wrap,
  html body:not(.light) .nav-wrapper, html body:not(.light) header,
  html body:not(.light) .site-header,
  html body:not(.light) .hero-wrapper > *:first-child {
    background: #070E18 !important; border-color: #152840 !important;
  }
  html body:not(.light) .navbar a, html body:not(.light) .nav-link,
  html body:not(.light) .navbar-nav .nav-link { color: #7EB8DA !important; }
  html body:not(.light) .footer-section, html body:not(.light) footer,
  html body:not(.light) .site-footer,
  html body:not(.light) .footer-menu-wrap {
    background: #070E18 !important; color: #7EB8DA !important; border-color: #152840 !important;
  }
  html body:not(.light) .footer-section a, html body:not(.light) footer a,
  html body:not(.light) .site-footer a { color: #7EB8DA !important; }

  /* 레이아웃 */
  .filter-section { display: block !important; }
  .filter-btn-wrap { grid-column: 1 / -1; }
  .glossary-list { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 4px 16px; }

  /* 최대폭 제한 */
  .hd, .glossary-bar, .glossary-body, .notice, .daily-notice,
  .filter-bar, .filter-body, .bank, .ft, .bottom-nav {
    max-width: 900px; margin-left: auto; margin-right: auto;
  }
}/* 부수조건 라벨 */
.dl-s { background: rgba(59,130,246,.12); color: #3B82F6; border: 1px solid rgba(59,130,246,.25); }body.light .dl-s { background: rgba(59,130,246,.08); color: #2563EB; border-color: rgba(37,99,235,.18); }/* 결과 행 (적용하기 후 표시) */
.det-result {
  display: none; align-items: flex-start; padding: 8px 14px;
  border-top: 1px solid var(--b1); gap: 6px;
  background: #081420;
}body.light .det-result {
  background: rgba(200,125,58,.06);
}.dl-r {
  background: rgba(0,212,255,.15); color: #00d4ff;
  border: 1px solid rgba(0,212,255,.3);
  flex-shrink: 0; font-size: 11px; font-weight: 600;
  padding: 2px 6px; border-radius: 3px; margin-top: 1px;
}body.light .dl-r {
  background: rgba(200,125,58,.1); color: #C87D3A;
  border-color: rgba(200,125,58,.2);
}/* 마우스 커서 손모양 */
.dv { cursor: pointer; }/* flatpickr 달력 커스텀 */
.flatpickr-calendar {
  border: 1px solid #1B3A5C !important;
  box-shadow: 0 4px 20px rgba(0,0,0,.5) !important;
}.flatpickr-day.flatpickr-disabled {
  color: #333 !important;
  cursor: not-allowed !important;
}.flatpickr-day.has-data {
  background: rgba(78,205,196,.15) !important;
  border-color: rgba(78,205,196,.3) !important;
}.flatpickr-day.has-data:hover {
  background: rgba(78,205,196,.3) !important;
}.flatpickr-day.selected {
  background: #2563EB !important;
  border-color: #2563EB !important;
}body.light .flatpickr-calendar {
  background: #FFFFFF !important;
  border-color: #C7D3E0 !important;
  box-shadow: 0 4px 20px rgba(45,31,16,.15) !important;
}body.light .flatpickr-day.has-data {
  background: rgba(200,125,58,.1) !important;
  border-color: rgba(200,125,58,.25) !important;
}body.light .flatpickr-day.has-data:hover {
  background: rgba(200,125,58,.2) !important;
}body.light .flatpickr-months, body.light .flatpickr-weekdays, body.light span.flatpickr-weekday, body.light .flatpickr-month {
  background: #DCE6F0 !important;
  color: #1E2A38 !important;
}body.light .flatpickr-day {
  color: #1E2A38 !important;
}body.light .flatpickr-day.flatpickr-disabled {
  color: #ccc !important;
}/* 오늘 날짜 표시 */
.flatpickr-day.today-label {
  position: relative;
}.flatpickr-day.today-label::after {
  content: '오늘';
  position: absolute;
  bottom: 1px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 8px;
  font-weight: 700;
  color: #ffd700;
  line-height: 1;
}body.light .flatpickr-day.today-label::after {
  color: #C87D3A;
}/* 날짜선택 입력 필드 스타일 */
/* flatpickr 입력 필드 스타일 (altInput 포함) */
input.flatpickr-input, .hd .flatpickr-input, .hd-controls .flatpickr-input, .hd input[readonly] {
  font-family: 'Noto Sans KR', sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #4ECDC4 !important;
  background: rgba(78,205,196,.1) !important;
  border: 1px solid rgba(78,205,196,.25) !important;
  border-radius: 4px !important;
  padding: 5px 10px !important;
  cursor: pointer !important;
  outline: none !important;
  text-align: center !important;
}body.light input.flatpickr-input, body.light .hd .flatpickr-input, body.light .hd-controls .flatpickr-input, body.light .hd input[readonly] {
  color: #C87D3A !important;
  background: rgba(200,125,58,.06) !important;
  border-color: rgba(200,125,58,.2) !important;
}/* 라이트모드 달력 월 드롭다운 배경 */
body.light .flatpickr-current-month select.flatpickr-monthDropdown-months {
  background: #DCE6F0 !important;
  color: #1E2A38 !important;
}body.light .flatpickr-current-month select.flatpickr-monthDropdown-months option {
  background: #FFFFFF !important;
  color: #1E2A38 !important;
}/* 라이트모드 오늘 날짜 배경 */
body.light .flatpickr-day.today-label {
  background: rgba(200,125,58,.15) !important;
  border-color: rgba(200,125,58,.35) !important;
}/* 라이트모드 오늘 날짜 동그라미 배경 */
body.light .flatpickr-day.today {
  background: rgba(200,125,58,.2) !important;
  border-color: #C87D3A !important;
  color: #1E2A38 !important;
}body.light .flatpickr-day.today:hover {
  background: rgba(200,125,58,.3) !important;
}/* 헤더 대출종류페이지 이동 버튼 */
.hd-nav {
  display: flex; gap: 6px; flex-wrap: wrap;
}.hd-nav-btn {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 12px; border-radius: 20px;
  font-family: inherit; font-size: 12px; font-weight: 600;
  text-decoration: none; cursor: pointer;
  background: rgba(255,255,255,.06); border: 1px solid #1B3A5C;
  color: #7EB8DA; transition: all .2s;
}.hd-nav-btn:hover {
  background: rgba(78,205,196,.1); border-color: rgba(78,205,196,.3);
}.hd-nav-btn.active {
  background: rgba(78,205,196,.15); border-color: #4ECDC4;
  color: #4ECDC4;
}.hd-nav-btn.active::before {
  content: '●'; font-size: 8px;
}.hd-nav-btn:not(.active)::before {
  content: '○'; font-size: 8px;
}/* 라이트모드 */
body.light .hd-nav-btn {
  background: rgba(200,125,58,.04); border-color: #C7D3E0;
  color: #4A5C70;
}body.light .hd-nav-btn:hover {
  background: rgba(200,125,58,.1); border-color: rgba(200,125,58,.3);
}body.light .hd-nav-btn.active {
  background: rgba(200,125,58,.12); border-color: #C87D3A;
  color: #C87D3A;
}/* 모바일 헤더 정렬 */
@media (max-width: 768px) {
  .hd-nav { width: 100%; order: 2; }
  .hd-controls { order: 3; }
}/* ============================================================
   텍스트모드
   ============================================================ */
.text-mode {
  max-width: 900px; margin: 0 auto;
  background: #0A1420; border: 1px solid #152840; border-radius: 12px;
  padding: 16px 20px; margin-bottom: 10px;
}body.light .text-mode {
  background: #FFFFFF; border-color: #D9E2EC;
}/* PC: 2열 그리드 */
.tm-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0 30px;
}
@media (max-width: 768px) {.tm-grid { grid-template-columns: 1fr; }
}.tm-divider {
  padding: 8px 0 4px; border-bottom: 1px solid #152840;
  color: #ffd700; font-size: 12px; font-weight: 700;
  margin-bottom: 4px;
}body.light .tm-divider { border-color: #D9E2EC; color: #C87D3A; }.tm-row {
  display: flex; align-items: center; padding: 7px 0;
  border-bottom: 1px solid rgba(21,40,64,.5); gap: 10px;
}body.light .tm-row { border-color: rgba(232,224,213,.7); }.tm-row:last-child { border-bottom: none; }.tm-label {
  flex: 0 0 75px; font-size: 12px; font-weight: 700;
  color: #4ECDC4; text-align: right; padding-right: 8px;
}body.light .tm-label { color: #C87D3A; }.tm-options {
  flex: 1; display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}/* 라디오 */
.tm-radio {
  display: flex; align-items: center; gap: 3px;
  font-size: 12px; color: #93C5E0; cursor: pointer; white-space: nowrap;
}body.light .tm-radio { color: #4A5C70; }.tm-radio input[type="radio"] {
  appearance: none; -webkit-appearance: none;
  width: 13px; height: 13px; border-radius: 50%;
  border: 2px solid #3D5A73; background: transparent;
  cursor: pointer; position: relative; flex-shrink: 0;
}.tm-radio input[type="radio"]:checked { border-color: #4ECDC4; }.tm-radio input[type="radio"]:checked::after {
  content: ''; position: absolute; top: 1.5px; left: 1.5px;
  width: 6px; height: 6px; border-radius: 50%; background: #4ECDC4;
}body.light .tm-radio input[type="radio"] { border-color: #C7D3E0; }body.light .tm-radio input[type="radio"]:checked { border-color: #C87D3A; }body.light .tm-radio input[type="radio"]:checked::after { background: #C87D3A; }/* 체크박스 */
.tm-check {
  display: flex; align-items: center; gap: 3px;
  font-size: 12px; color: #93C5E0; cursor: pointer;
}body.light .tm-check { color: #4A5C70; }.tm-check input[type="checkbox"] {
  appearance: none; -webkit-appearance: none;
  width: 13px; height: 13px; border-radius: 3px;
  border: 2px solid #3D5A73; background: transparent;
  cursor: pointer; position: relative; flex-shrink: 0;
}.tm-check input[type="checkbox"]:checked {
  border-color: #4ECDC4; background: #4ECDC4;
}.tm-check input[type="checkbox"]:checked::after {
  content: '✓'; position: absolute; top: -2px; left: 1px;
  font-size: 10px; color: #fff; font-weight: 700;
}body.light .tm-check input[type="checkbox"]:checked {
  border-color: #C87D3A; background: #C87D3A;
}/* 인풋 */
.tm-input {
  padding: 4px 8px; border: 1px solid #1B3A5C; border-radius: 4px;
  background: #132D4A; color: #E0F0FF; font-family: inherit;
  font-size: 13px; font-weight: 600; width: 90px;
  text-align: right; outline: none;
}body.light .tm-input {
  background: #DCE6F0; border-color: #C7D3E0; color: #1E2A38;
}.tm-input-sm { width: 50px; text-align: center; }.tm-unit { font-size: 11px; color: #3D5A73; }/* 셀렉트 */
.tm-select {
  padding: 4px 8px; border: 1px solid #1B3A5C; border-radius: 4px;
  background: #132D4A; color: #E0F0FF; font-family: inherit;
  font-size: 12px; outline: none;
}body.light .tm-select {
  background: #DCE6F0; border-color: #C7D3E0; color: #1E2A38;
}/* ============================================================
   텍스트모드 (기존 필터를 CSS만으로 변환)
   ============================================================ */

/* 카드 배경/테두리 제거 */
.text-view .f-card {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin-bottom: 0 !important;
}.text-view .f-card-label {
  display: none !important;
}/* 필터 그룹 간소화 */
.text-view .filter-group {
  padding: 5px 0 !important;
  border-bottom: 1px solid rgba(21,40,64,.3) !important;
}body.light .text-view .filter-group {
  border-bottom: 1px solid rgba(232,224,213,.5) !important;
}/* 라벨 축소 */
.text-view .fg-label {
  flex: 0 0 70px !important;
  font-size: 12px !important;
  text-align: right !important;
  padding-right: 8px !important;
}/* 세그먼트 → 텍스트 스타일 변환 */
.text-view .opt-seg {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  gap: 4px !important;
  flex-wrap: wrap !important;
}.text-view .opt-seg label {
  flex: none !important;
  padding: 3px 8px !important;
  font-size: 12px !important;
  border-radius: 4px !important;
  background: transparent !important;
  color: #93C5E0 !important;
  border: 1px solid transparent !important;
}.text-view .opt-seg label.seg-on, .text-view .opt-seg label:has(input:checked) {
  background: transparent !important;
  color: #4ECDC4 !important;
  font-weight: 700 !important;
  border: 1px solid #4ECDC4 !important;
  box-shadow: none !important;
}body.light .text-view .opt-seg label {
  color: #4A5C70 !important;
}body.light .text-view .opt-seg label.seg-on, body.light .text-view .opt-seg label:has(input:checked) {
  color: #C87D3A !important;
  border-color: #C87D3A !important;
}/* 금액 입력 축소 */
.text-view .fg-amount-row input {
  padding: 5px 8px !important;
  font-size: 13px !important;
  border-radius: 4px !important;
}.text-view .fg-quick-btns {
  display: none !important;
}/* 셀렉트 축소 */
.text-view .fg-select {
  padding: 5px 24px 5px 8px !important;
  font-size: 12px !important;
  border-radius: 4px !important;
}/* 노트 숨김 */
.text-view .fg-note {
  display: none !important;
}/* 토글 스위치 축소 */
.text-view .opt-toggle-text {
  font-size: 12px !important;
}/* PC: 2열 레이아웃 */
@media (min-width: 769px) {
  .text-view .filter-section {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0 20px !important;
  }
  .text-view .filter-btn-wrap {
    grid-column: 1 / -1 !important;
  }
  .text-view #filterSummary {
    grid-column: 1 / -1 !important;
  }
}/* 나이 라디오: 텍스트모드에서도 라디오 표시 */
.text-view .age-radio {
  display: flex !important;
}.text-view .age-select {
  display: none !important;
}/* ============================================================
   텍스트모드 적용/초기화 버튼 + 조건부 행
   ============================================================ */
.text-mode .filter-btn-wrap {
  display: flex;
  justify-content: center;
  padding: 16px 12px 20px;
}.text-mode .filter-btn {
  flex: 1;
  max-width: 200px;
}.text-mode .tm-row[style*="display:none"] { display: none !important; }.text-mode .tm-row { display: flex; }/* 텍스트모드 한글 금액 표시 */
.text-mode .fg-converted {
  display: block;
  font-size: 11px;
  color: var(--blue);
  margin-top: 2px;
}/* 텍스트모드 필수 표시 */
.text-mode .req {
  color: var(--red);
  font-weight: 700;
  font-size: 10px;
}/* 선택한 조건 요약 LTV 태그 강조 스타일 */
.fs-tag .fs-ltv {
  color: #ffd700;
  font-weight: 800;
}.fs-tag:has(.fs-ltv) {
  background: rgba(255, 215, 0, 0.15);
  border-color: rgba(255, 215, 0, 0.4);
}body.light .fs-tag:has(.fs-ltv) {
  background: #FFF3CD;
  border-color: #D4A017;
  color: #8B6914;
}body.light .fs-tag .fs-ltv {
  color: #8B6914;
}/* 최우선변제금액 태그 스타일 */
.fs-tag:has(.fs-price) {
  background: rgba(255, 123, 123, 0.15);
  border-color: rgba(255, 123, 123, 0.4);
}.fs-tag .fs-price {
  color: #FF7B7B;
  font-weight: 800;
}body.light .fs-tag:has(.fs-price) {
  background: #FFE8E8;
  border-color: #E06060;
}body.light .fs-tag .fs-price {
  color: #C04040;
}/* 녹색건축 검색 - 라이트모드 */
body.light #greenBuildResult, body.light #tmGreenBuildResult {
    background: #f5f0e8 !important;
    color: #4a3f2f !important;
    border: 1px solid #c8bfa8 !important;
}body.light #greenBuildResult *, body.light #tmGreenBuildResult * {
    color: #4a3f2f !important;
}body.light #greenBuildResult b, body.light #tmGreenBuildResult b {
    color: #6b4c1e !important;
}body.light #greenBuildResult div[onclick]:hover, body.light #tmGreenBuildResult div[onclick]:hover {
    background: #ece5d8 !important;
}body.light #greenBuildResult div[style*="border-bottom"], body.light #tmGreenBuildResult div[style*="border-bottom"] {
    border-bottom-color: #d5cdb8 !important;
}body.light #greenBuildKeyword, body.light #tmGreenBuildKeyword {
    background: #f5f0e8 !important;
    border-color: #c8bfa8 !important;
    color: #3a3226 !important;
}body.light #greenBuildSelect {
    background: #f5f0e8 !important;
    border-color: #c8bfa8 !important;
    color: #3a3226 !important;
}/* 달력 다크모드 - 오늘 날짜 표시 */
.flatpickr-calendar.arrowTop:not(.light *) .flatpickr-day.today {
    border-color: #00d4ff;
    color: #00d4ff;
}.flatpickr-calendar.arrowTop:not(.light *) .flatpickr-day.today:hover {
    background: #00d4ff;
    color: #fff;
    border-color: #00d4ff;
}.flatpickr-calendar.arrowTop:not(.light *) .flatpickr-day.has-data {
    background: rgba(0,212,255,.15);
    border-radius: 50%;
}/* 나이 말풍선 팝업 */
.age-popup-overlay {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.5);
  z-index: 9999;
  justify-content: center;
  align-items: center;
}.age-popup-overlay.active {
  display: flex;
}.age-popup-box {
  background: #1a1a2e;
  border: 1.5px solid #00d4ff;
  border-radius: 10px;
  padding: 16px 20px;
  max-width: 340px;
  width: 90%;
  font-size: 13px;
  line-height: 1.8;
  color: #bbb;
  box-shadow: 0 8px 30px rgba(0,0,0,0.6);
}.age-popup-box b { color: #ffd700; }.age-popup-close {
  display: block;
  text-align: right;
  margin-top: 10px;
  color: #ff6b6b;
  font-size: 12px;
  cursor: pointer;
}body.light .age-popup-box {
  background: #fff;
  border-color: #2563EB;
  color: #555;
  box-shadow: 0 8px 30px rgba(0,0,0,0.15);
}body.light .age-popup-box b { color: #1e40af; }body.light .age-popup-close { color: #dc2626; }/* 나이 팝업 테이블 */
.age-rate-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 8px;
  font-size: 12px;
}.age-rate-table th {
  background: rgba(255,215,0,0.15);
  color: #ffd700;
  padding: 6px 4px;
  text-align: center;
  font-weight: 700;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}.age-rate-table td {
  padding: 5px 4px;
  text-align: center;
  color: #ccc;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}.age-rate-table td:first-child {
  text-align: left;
  color: #8cb4ff;
  font-weight: 500;
}.age-rate-table tbody tr:last-child td {
  color: #666;
}.age-rate-note {
  margin-top: 8px;
  font-size: 11px;
  color: #888;
  line-height: 1.6;
}/* 라이트모드 */
body.light .age-rate-table th {
  background: rgba(30,64,175,0.1);
  color: #1e40af;
}body.light .age-rate-table td {
  color: #555;
  border-bottom-color: rgba(0,0,0,0.05);
}body.light .age-rate-table td:first-child {
  color: #2563EB;
}body.light .age-rate-note {
  color: #888;
}/* 우대조건 항목 클릭 커서 */
.gl-popup-btn {
  cursor: pointer;
  transition: background 0.2s;
}.gl-popup-btn:hover {
  background: rgba(78,205,196,0.1);
}body.light .gl-popup-btn:hover {
  background: rgba(37,99,235,0.05);
}/* 특허 표시 */
.patent-bar {
  width: auto;
  margin: 30px 135px 20px;
  border-top: 1px solid #2a3a50;
  border-bottom: 1px solid #2a3a50;
  padding: 24px 20px;
  display: flex;
  align-items: center;
  gap: 24px;
  box-sizing: border-box;
}.patent-logo { width: 200px; height: 100px; flex-shrink: 0; }.patent-logo img { width: 100%; height: 100%; object-fit: contain; }.patent-info { flex: 1; }.patent-num { font-size: 20px; color: #8cb4ff; font-weight: 700; }.patent-title { font-size: 15px; color: #888; margin-top: 6px; }.patent-cert {
  width: 90px; height: 120px; border-radius: 4px; overflow: hidden;
  border: 1px solid #2a3a50; cursor: pointer; flex-shrink: 0;
  transition: transform 0.2s;
}.patent-cert:hover { transform: scale(1.05); }.patent-cert img { width: 100%; height: 100%; object-fit: cover; }body.light .patent-bar { border-color: #ddd; }body.light .patent-num { color: #2563EB; }body.light .patent-cert { border-color: #ddd; }/* 특허 모바일 */
@media (max-width: 600px) {
  .patent-bar {
    flex-direction: column;
    text-align: center;
    gap: 12px;
    padding: 20px 16px;
  }
  .patent-logo { width: 120px; height: 60px; }
  .patent-num { font-size: 16px; }
  .patent-title { font-size: 13px; }
  .patent-cert { width: 100px; height: 136px; }
}/* 중도상환 flatpickr 캘린더 — 기존 다크테마 따르되 selected만 주황 */
.prepay-flatpickr {
    border-color: #1B3A5C !important;
    box-shadow: 0 4px 20px rgba(0,0,0,.5) !important;
}.prepay-flatpickr .flatpickr-day:hover {
    background: rgba(255,152,0,0.15) !important;
    border-color: rgba(255,152,0,0.3) !important;
}.prepay-flatpickr .flatpickr-day.selected {
    background: #FF9800 !important;
    border-color: #FF9800 !important;
    color: #fff !important;
}.prepay-flatpickr .flatpickr-day.today {
    border-color: transparent !important;
    background: none !important;
}body.light .prepay-flatpickr .flatpickr-day.today {
    border-color: transparent !important;
    background: none !important;
}/* 중도상환 flatpickr — 라이트모드 */
body.light .prepay-flatpickr {
    background: #FFFFFF !important;
    border-color: #C7D3E0 !important;
    box-shadow: 0 4px 20px rgba(45,31,16,.15) !important;
}body.light .prepay-flatpickr .flatpickr-months, body.light .prepay-flatpickr .flatpickr-weekdays, body.light .prepay-flatpickr span.flatpickr-weekday, body.light .prepay-flatpickr .flatpickr-month {
    background: #DCE6F0 !important;
    color: #1E2A38 !important;
}body.light .prepay-flatpickr .flatpickr-day {
    color: #1E2A38 !important;
}body.light .prepay-flatpickr .flatpickr-day.flatpickr-disabled {
    color: #ccc !important;
}body.light .prepay-flatpickr .flatpickr-day:hover {
    background: rgba(230,126,34,0.15) !important;
    border-color: rgba(230,126,34,0.3) !important;
}body.light .prepay-flatpickr .flatpickr-day.selected {
    background: #E67E22 !important;
    border-color: #E67E22 !important;
    color: #fff !important;
}body.light .prepay-flatpickr .flatpickr-day.today {
    border-color: transparent !important;
    background: none !important;
}/* 탭모드 중도상환 날짜 altInput — 다크모드 */
.fg-date-alt {
    flex: 1 !important;
    min-width: 0 !important;
    padding: 10px 12px !important;
    border: 1px solid #1B3A5C !important;
    border-radius: 8px !important;
    background: var(--card, #0F1D2A) !important;
    color: #E0E8F0 !important;
    font-size: 15px !important;
    font-family: 'Noto Sans KR', sans-serif !important;
    cursor: pointer !important;
    text-align: center !important;
    width: 100% !important;
    box-sizing: border-box !important;
}.fg-date-alt::placeholder {
    color: #5A7A8A !important;
}/* 탭모드 중도상환 날짜 altInput — 라이트모드 */
body.light .fg-date-alt {
    border-color: #C1CFDC !important;
    background: #FFFFFF !important;
    color: #1E2A38 !important;
}body.light .fg-date-alt::placeholder {
    color: #93A5B8 !important;
}/* 텍스트모드 중도상환 날짜 altInput — 다크모드 */
.tm-date-alt {
    width: 100% !important;
    padding: 7px 10px !important;
    border: 1px solid #1B3A5C !important;
    border-radius: 6px !important;
    background: var(--card, #0F1D2A) !important;
    color: #E0E8F0 !important;
    font-size: 14px !important;
    font-family: 'Noto Sans KR', sans-serif !important;
    cursor: pointer !important;
    text-align: center !important;
    box-sizing: border-box !important;
}.tm-date-alt::placeholder {
    color: #5A7A8A !important;
}/* 텍스트모드 중도상환 날짜 altInput — 라이트모드 */
body.light .tm-date-alt {
    border-color: #C1CFDC !important;
    background: #FFFFFF !important;
    color: #1E2A38 !important;
}body.light .tm-date-alt::placeholder {
    color: #93A5B8 !important;
}.fg-date-alt:focus {
    outline: none !important;
    border-color: #FF9800 !important;
}body.light .fg-date-alt:focus {
    border-color: #E67E22 !important;
}/* 예상중도수수료+이자 행 */
.prepay-fee-row .dr-lbl {
    color: #FF9800 !important;
    font-size: 10px !important;
}body.light .prepay-fee-row .dr-lbl {
    color: #E67E22 !important;
}.prepay-fee-row .dv {
    color: #FF9800 !important;
    font-weight: 700;
}body.light .prepay-fee-row .dv {
    color: #E67E22 !important;
}