/* ============================================================
   fintech-theme.css — 기존(레거시) 페이지 전체 모던 핀테크 재스타일
   head.html 마지막에 로드되어 legacy CSS(main.css 등)를 오버라이드한다.
   openapi-portal.css 의 디자인 토큰과 동일 계열. 애니메이션 미사용.
   ============================================================ */

/* ---------- 전역 타이포 ---------- */
html, body {
  font-family: "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", "Malgun Gothic", "Apple SD Gothic Neo", sans-serif !important;
  color: #101828;
  -webkit-font-smoothing: antialiased;
}

/* 페이지 배경 — 회색(#f7f8fa)은 흰 카드 대비를 쓰는 레거시/oa- 화면용.
   전역(!important)으로 걸려 있어 흰 배경 기준의 퍼블 화면(.mz-main)까지 회색이 되던 것을
   퍼블 화면만 흰색으로 예외 처리했다. */
body {
  background: #f7f8fa !important;
}
/* 퍼블 셸(.mz-main)과 API 가이드(.apiguide-wrap)는 흰 배경 —
   흰 헤더가 회색 페이지 위에 별도 띠처럼 떠 보이지 않도록 /mcp와 통일 */
body:has(.mz-main), body:has(.apiguide-wrap) {
  background: #fff !important;
}

/* 레거시 고정 헤더 여백 보정 (신규 헤더는 sticky 64px) */
body.user, body.register, body.main, body.my { padding-top: 0 !important; }
header { position: relative; z-index: 100; }

/* ---------- 신규(oa) 페이지 콘텐츠 리셋 — body.main 레이아웃에서도 동일 렌더 보장 ---------- */
.oa-page a { color: inherit; text-decoration: none; }
.oa-page button { font-family: inherit; cursor: pointer; }
.oa-page img { max-width: 100%; }
.oa-page, .oa-page * { box-sizing: border-box; }

/* ---------- oa-code 코드블록 글자색 보정 (레거시 CSS가 pre/code 색을 덮어쓰는 문제) ---------- */
.oa-code, .oa-code pre, .oa-code code, .oa-code em, .oa-code a {
  color: #e6eaf3 !important;
  background: transparent;
}
.oa-code { background: #0f1b3d !important; }
.oa-code .oa-copy { color: #cdd5e4 !important; }
.oa-code .oa-copy:hover { color: #ffffff !important; }

/* ---------- oa 버튼 글자색 보정 (레거시 CSS가 색을 덮어쓰는 문제) ---------- */
.oa-btn-primary, .oa-btn-primary:hover, a.oa-btn-primary, a.oa-btn-primary:hover {
  color: #fff !important;
}
.oa-btn-dark, .oa-btn-dark:hover, a.oa-btn-dark, a.oa-btn-dark:hover {
  color: #fff !important;
}

/* ---------- 신규 헤더 내 GNB 드롭다운 ---------- */
.oa-gnb { display: flex; gap: 2px; flex: 1; align-items: center; }
.oa-gnb-item { position: relative; }
.oa-gnb-link {
  display: inline-block; padding: 8px 13px; border-radius: 8px;
  font-weight: 600; font-size: 15px; color: #344054; text-decoration: none;
  border: 0; background: none; cursor: pointer;
}
.oa-gnb-link:hover { background: #f9fafb; color: #101828; text-decoration: none; }
.oa-gnb-drop {
  display: none; position: absolute; top: 100%; left: 0; min-width: 180px;
  background: #fff; border: 1px solid #e4e7ec; border-radius: 10px;
  box-shadow: 0 8px 24px rgba(16, 24, 40, .12); padding: 6px; z-index: 200;
}
.oa-gnb-item:hover > .oa-gnb-drop, .oa-gnb-drop.open { display: block; }
.oa-gnb-drop a {
  display: block; padding: 9px 12px; border-radius: 7px;
  font-size: 14px; color: #344054; text-decoration: none; white-space: nowrap;
}
.oa-gnb-drop a:hover { background: #f9fafb; color: #e2231a; }
.oa-gnb-drop-right { left: auto; right: 0; }

@media (max-width: 1100px) {
  /* .oa-header 하위로 특이도 상승(0-2-0) — 퍼블 페이지가 body에서 로드하는 assets/css/common.css의
     .oa-header-inner{flex-wrap:nowrap}(0-1-0, 후순위 로드)에 밀리지 않도록 */
  .oa-header .oa-header-inner { flex-wrap: wrap; height: auto; padding: 10px 16px; gap: 10px; }
  .oa-gnb { flex-wrap: wrap; }
}

/* ---------- 컨텐츠 컨테이너 ---------- */
.content-wrap { background: transparent; }
#content { background: transparent; }

/* ---------- 타이틀/브레드크럼 ---------- */
.page-title h2 {
  font-size: 28px !important; font-weight: 800 !important; letter-spacing: -.02em;
  color: #101828 !important; border: 0 !important;
}
.breadscrumb { font-size: 13px; color: #98a2b3 !important; }
.breadscrumb .breadscrumb-item, .breadscrumb a { color: #98a2b3 !important; }
.breadscrumb .active { color: #667085 !important; font-weight: 600; }

/* ---------- 버튼 ---------- */
.btn {
  border-radius: 8px !important;
  font-weight: 700 !important;
  box-shadow: none !important;
}
/* .btn-login은 레거시 폼 버튼(btn 클래스 동반)에만 — 헤더의 흰 pill 버튼(.oa-btn.btn-login)은 제외 */
.btn-primary, .btn.btn-login, button.login-submit {
  background: #e2231a !important; border-color: #e2231a !important; color: #fff !important;
}
.btn-primary:hover, .btn.btn-login:hover { background: #b91c14 !important; border-color: #b91c14 !important; }
.btn-secondary {
  background: #fff !important; border: 1px solid #d0d5dd !important; color: #344054 !important;
}
.btn-secondary:hover { background: #f9fafb !important; }
.btn-pages01 {
  background: #e2231a !important; color: #fff !important; border-radius: 8px !important;
  border: 0 !important; font-weight: 700 !important;
}

/* ---------- 폼 ---------- */
input[type="text"], input[type="password"], input[type="email"], input[type="number"],
select, textarea, .form-control {
  border: 1px solid #d0d5dd !important; border-radius: 8px !important;
  background: #fff !important; color: #101828 !important;
  font-family: inherit !important;
}
input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus,
select:focus, textarea:focus, .form-control:focus {
  border-color: #e2231a !important;
  box-shadow: 0 0 0 3px rgba(226, 35, 26, .12) !important;
  outline: none !important;
}
label { color: #344054; }

/* ---------- 테이블 ---------- */
table th {
  background: #f9fafb !important; color: #667085 !important;
  font-weight: 700 !important; border-color: #e4e7ec !important;
}
table td { border-color: #e4e7ec !important; }
.jsgrid-header-row > .jsgrid-header-cell { background: #f9fafb !important; color: #667085 !important; }
.jsgrid-grid-header, .jsgrid-grid-body, .jsgrid-header-row, .jsgrid-row > .jsgrid-cell,
.jsgrid-alt-row > .jsgrid-cell { border-color: #e4e7ec !important; }
.jsgrid-alt-row > .jsgrid-cell { background: #fcfcfd !important; }
.jsgrid-selected-row > .jsgrid-cell { background: #fef3f2 !important; }

/* ---------- 카드형 박스 공통 ---------- */
.text-wrap, .login-wrap form, .register-content .content-wrap > div > form,
.search-console {
  background: #fff; border: 1px solid #e4e7ec; border-radius: 12px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .05);
  padding: 24px;
}

/* ---------- LNB (좌측 메뉴) — 카드형 정돈 ---------- */
.lnb-wrap { background: transparent !important; }
.lnb-wrap .lnb, .lnb-wrap nav.lnb, .lnb-wrap #lnb {
  background: #fff !important; border: 1px solid #e4e7ec !important; border-radius: 14px !important;
  padding: 18px 14px !important;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .05);
}
.lnb-wrap ul { list-style: none !important; margin: 0 !important; padding: 0 !important; }

/* 그룹 타이틀 */
.lnb-wrap .sub-title {
  display: block !important;
  font-weight: 800 !important; color: #101828 !important; font-size: 17px !important;
  letter-spacing: -.01em;
  padding: 6px 12px 14px !important; margin: 0 0 12px !important;
  border-bottom: 1px solid #e4e7ec !important;
  background: none !important;
}

/* 메뉴 항목 */
.lnb-wrap .second-depth { display: block; padding: 0 !important; margin: 0 !important; }
.lnb-wrap .second-depth > li { margin: 3px 0 !important; padding: 0 !important; }
.lnb-wrap .second-depth li a,
.lnb-wrap .third-depth li a,
.lnb-wrap .second-depth li.noDepth {
  display: block !important;
  padding: 10px 12px !important; margin: 0 !important;
  border-radius: 8px !important;
  font-size: 14px !important; font-weight: 600 !important;
  color: #475467 !important; line-height: 1.5 !important;
  text-decoration: none !important;
  background: none;
}
.lnb-wrap .second-depth li a:hover,
.lnb-wrap .third-depth li a:hover {
  background: #f9fafb !important; color: #101828 !important;
}

/* 3뎁스는 살짝 들여쓰기 */
.lnb-wrap .third-depth { padding-left: 10px !important; margin: 2px 0 6px !important; }
.lnb-wrap .third-depth li { margin: 2px 0 !important; }

/* 현재 페이지 활성 표시 */
.lnb-wrap a.submenu-active {
  background: #fef3f2 !important; color: #e2231a !important; font-weight: 800 !important;
}
.lnb-wrap li.on > div.sub-title { color: #101828 !important; }

/* apiservice LNB 검색창 */
.lnb-wrap fieldset { border: 0 !important; margin: 0 0 12px !important; padding: 0 !important; }
.lnb-wrap #searchText {
  width: 98% !important; padding: 9px 36px 9px 12px !important;
  border: 1px solid #d0d5dd !important; border-radius: 8px !important; font-size: 13px !important;
}
.lnb-wrap .btn_submit { margin-left: -32px !important; background: none !important; border: 0 !important; color: #98a2b3 !important; }

/* ---------- 푸터 (다크 — 메인 목업 기준) ---------- */
.mz-footer {
  background: #141414 !important;
  border-top: 0 !important;
}
.mz-footer-inner {
  max-width: 1400px; margin: 0 auto;
  padding: 34px 24px;
  display: flex; align-items: center; justify-content: flex-start; gap: 72px;
  flex-wrap: wrap;
}
.mz-footer-logo { display: inline-flex; align-items: center; text-decoration: none !important; }
.mz-footer-logo img {
  height: 28px; display: block;
  /* 다크 배경에서 로고 가독성 확보 — 원색 로고를 쓰려면 아래 filter 한 줄 제거 */
  filter: brightness(0) invert(1);
}
.mz-footer-right { text-align: left; margin: 0; }
.mz-footer-links { display: flex; gap: 36px; justify-content: flex-start; flex-wrap: wrap; }
.mz-footer-links a {
  color: #cdd2da !important; font-size: 14px; font-weight: 600;
  text-decoration: none !important;
}
.mz-footer-links a:hover { color: #ffffff !important; text-decoration: underline !important; }
.mz-footer-copy {
  margin: 14px 0 0 !important;
  color: #6b7280 !important; font-size: 13px; letter-spacing: .02em;
}
@media (max-width: 800px) {
  .mz-footer-inner { flex-direction: column; align-items: flex-start; }
  .mz-footer-right { margin: 0; text-align: left; }
  .mz-footer-links { justify-content: flex-start; gap: 24px; }
}

/* 구형 푸터 클래스 잔재 대응 */
.footer-wrap { background: #141414 !important; border-top: 0 !important; color: #98a2b3 !important; }
.topbutton-wrap .btn-top {
  background: #fff !important; border: 1px solid #e4e7ec !important; border-radius: 50% !important;
  box-shadow: 0 4px 16px rgba(16, 24, 40, .12) !important;
}

/* ---------- 모달/다이얼로그 ---------- */
.modal-content {
  border-radius: 14px !important; border: 0 !important;
  box-shadow: 0 20px 50px rgba(16, 24, 40, .3) !important;
}
.modal-header { border-bottom: 1px solid #e4e7ec !important; }
.modal-footer { border-top: 1px solid #e4e7ec !important; }
.swal2-popup { border-radius: 14px !important; font-family: inherit !important; }

/* ---------- 배지/상태 ---------- */
.badge { border-radius: 999px !important; font-weight: 700 !important; }

/* ---------- 링크 ---------- */
a { color: inherit; }
a:hover { text-decoration: none; }

/* ---------- 페이지네이션 ---------- */
.pagination .page-item.active .page-link {
  background: #e2231a !important; border-color: #e2231a !important;
}
.pagination .page-link { color: #344054 !important; border-color: #e4e7ec !important; border-radius: 6px; }

/* ---------- 스크롤바 (webkit) ---------- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #d0d5dd; border-radius: 6px; }
::-webkit-scrollbar-track { background: transparent; }

.mcptitle { color: #DDD !important; }