@charset "UTF-8";
/* =========================================================
    HI STOCK LOAN — Main SCSS (reorganized)
    Global Reset + Base Font + Color Scheme
========================================================= */
/* ① SCSS Modules (모든 @use는 최상단) */
/* ② 테마 & 공통 모듈 */
/* theme/_hisla.scss — body 섹션 전용 테마
   Header/Footer/Container 관련 규칙 제거 (layout으로 분리)
*/
:root {
  --font-ui: "Apple SD Gothic Neo", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Pretendard", "Noto Sans KR", "Malgun Gothic", "맑은 고딕", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-36px: clamp(26px, 4.2vw, 36px);
  --font-32px: clamp(24px, 3.8vw, 32px);
  --font-30px: clamp(22px, 3.4vw, 30px);
  --font-28px: clamp(20px, 3.1vw, 28px);
  --font-24px: clamp(18px, 2.6vw, 24px);
  --font-22px: clamp(17px, 2.3vw, 22px);
  --font-20px: clamp(16px, 2vw, 20px);
  --font-18px: clamp(15px, 1.8vw, 18px);
  --font-16px: clamp(14px, 1.6vw, 16px);
  --font-14px: clamp(12px, 1.4vw, 14px);
  --font-12px: clamp(11px, 1.2vw, 12px);
  --font-hero: var(--font-36px);
  --font-display: var(--font-30px);
  --font-title: var(--font-24px);
  --font-body: var(--font-16px);
  --font-caption: var(--font-14px);
  --hisla-shadow: 0 8px 20px rgba(30,40,60,.08);
  --vh: 100vh;
}

@supports (height: 100dvh) {
  :root {
    --vh: 100dvh;
  }
}
/* 폼 컨트롤이 UA 폰트로 바꾸지 않도록 강제 상속 */
:where(button, input, select, textarea) {
  font: inherit; /* size/weight/line-height 함께 상속 */
  font-family: inherit; /* 혹시 모를 예외 대비 */
  letter-spacing: inherit;
  color: inherit;
}

ul, li, address, p {
  list-style: none;
  margin: 0;
  padding: 0;
  font-style: normal;
}

button, select {
  cursor: pointer;
  border-width: initial;
  border-style: none;
  border-color: initial;
  border-image: initial;
}

:root {
  --header-h: 64px;
  --footer-h: 256px;
}

/* 모바일에서 푸터가 더 높으니 값만 바꿔주기 */
@media (max-width: 768px) {
  :root {
    --footer-h: 388px;
  }
}
/* 서브 타이틀 바로 아래 오는 리스트 섹션들이
   최소한 화면을 채우도록 보정 */
.subpage-title + .awards-sec,
.subpage-title + .press-sec,
.subpage-title + .news-sec,
.subpage-title + .news-view-sec {
  /* app.js에서 --vh 셋팅해주고 있으니까 같이 활용 */
  min-height: calc(var(--vh, 1vh) * 100 - var(--header-h) - var(--footer-h));
}

/* 본문 영역이 쭉 차도록 */
.subpage-main__body {
  flex: 1 0 auto;
}

/* 서브 타이틀 바로 아래 오는 리스트 섹션들이
   최소한 화면을 어느 정도 채우도록 */
.subpage-title + .awards-sec,
.subpage-title + .press-sec,
.subpage-title + .news-sec,
.subpage-title + .news-view-sec {
  min-height: calc(100vh - var(--header-h) - 256px);
}

/* 헤더 공통 */
.site-header {
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: #fff;
  box-shadow: none;
  transition: box-shadow 0.2s ease, background-color 0.2s ease, height 0.2s ease;
}
.site-header .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30px 0;
  transition: padding 0.2s ease;
}

/* 모바일도 fixed로 운용해서 항상 위에 있도록 */
@media (min-width: 0) {
  .site-header {
    position: fixed;
  }
  body.with-fixed-header {
    padding-top: var(--header-h);
  }
}
/* 데스크탑에서도 그대로 fixed */
@media (min-width: 1200px) {
  .site-header {
    position: fixed;
  }
}
/* 스크롤 그림자 */
.site-header.is-scrolled {
  box-shadow: 0 8px 20px rgba(30, 40, 60, 0.2);
}

/* 오버레이/모바일드로어 열릴 때는 그림자 제거 */
.site-header.menu-overlay-open,
.site-header.drawer-open {
  box-shadow: none !important;
}

.site-header.menu-overlay-open .gnb {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

/* 브랜드 */
.brand {
  display: inline-flex;
  align-items: center;
}
.brand .logo {
  width: 134px;
  height: 42px;
}
.brand .logo_m {
  width: 202px;
  height: 20px;
}

@media (min-width: 1200px) {
  .site-header.is-scrolled .container {
    padding: 8px 0;
  }
  .site-header .brand .logo.desktop-only {
    display: block;
  }
  .site-header .brand .logo_m.mobile-only {
    display: none;
  }
  .site-header.is-scrolled .brand .logo.desktop-only {
    display: none;
  }
  .site-header.is-scrolled .brand .logo_m.mobile-only {
    display: block;
  }
  .site-header.is-scrolled .gnb__list {
    gap: 26px;
  }
  .site-header.is-scrolled .gnb__item > a {
    padding: 6px 2px;
    font-size: 16px;
  }
  .site-header.is-scrolled .gnb__item > a::after {
    bottom: 5px;
  }
  .site-header.is-scrolled .gnb__item .gnb__sub {
    margin-top: 4px;
  }
}
.icon-search {
  width: 20px;
  height: 20px;
  margin-right: 15px;
  border: 0;
  background: url("/assets/icons/icon_search.svg") no-repeat center/20px;
  cursor: pointer;
}

.menu-trigger.type-x {
  display: inline-flex;
}

/* GNB */
.gnb__list {
  display: flex;
  gap: 34px;
  list-style: none;
  padding: 0;
  margin: 0;
}

/* 🔹 메뉴별 레이어 우선순위 제어 */
.gnb__item {
  position: relative;
  z-index: 0;
  font-size: 18px;
  font-weight: 700;
  /* JS hover-intent 때문에 잠시 유지되는 "열림" 상태 */
}
.gnb__item.is-open {
  z-index: 10;
}
.gnb__item {
  /* 실제 마우스가 올라가 있거나 포커스 된 현재 메뉴 */
}
.gnb__item:hover, .gnb__item:focus-within {
  z-index: 20;
}

/* 메인 메뉴 링크 */
.gnb__item > a {
  position: relative;
  display: inline-block;
  padding: 10px 2px;
  font-weight: 700;
  color: #111111;
  transition: color 0.2s ease;
  /* 🔹 하단 라인: 센터에서 좌우로 늘어나는 타입 */
}
.gnb__item > a::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 8px;
  width: 100%;
  height: 2px;
  background: #2090ff;
  /* 처음 상태: 가운데에서 0배 (안 보임) */
  transform: translateX(-50%) scaleX(0);
  transform-origin: center;
  opacity: 0;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

/* 🔹 활성/호버 상태: 컬러 + 라인 확장 */
.gnb__item:hover > a,
.gnb__item:focus-within > a,
.gnb__item.is-open > a {
  color: #2090ff;
}

.gnb__item:hover > a::after,
.gnb__item:focus-within > a::after,
.gnb__item.is-open > a::after {
  transform: translateX(-50%) scaleX(1);
  opacity: 1;
}

.gnb__sub {
  position: absolute;
  top: 100%;
  left: 50%;
  z-index: 200;
  font-size: 16px;
  font-weight: 500;
  min-width: 180px;
  width: max-content;
  max-width: 420px;
  background: #fff;
  border: 1px solid #eceff3;
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(30, 40, 60, 0.08);
  padding: 10px;
  list-style: none;
  display: block;
  transform: translate(-50%, 8px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  /* ⬇ 사라질 때도 부드럽게: opacity/transform은 0.18초 동안, visibility는 0.18초 뒤에 hidden */
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s;
}

.gnb__item:hover > .gnb__sub,
.gnb__item:focus-within > .gnb__sub,
.gnb__item.is-open > .gnb__sub,
.gnb__sub:hover,
.gnb__sub:focus-within {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 0);
  /* 열릴 때는 delay 없이 바로 transition 시작 */
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s;
}

.gnb__sub::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -10px;
  height: 10px;
}

.gnb__sub::after {
  content: "";
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 10px;
  height: 10px;
  background: #fff;
  border-left: 1px solid #eceff3;
  border-top: 1px solid #eceff3;
  box-shadow: -2px -2px 4px rgba(30, 40, 60, 0.05);
}

.site-header, .gnb {
  overflow: visible !important;
}

.gnb__sub li a {
  display: block;
  padding: 8px 12px;
  border-radius: 8px;
  color: #111111;
}

.gnb__sub li a:hover {
  background: #f1f1f1;
}

/* 반응형 */
.desktop-only {
  display: none;
}

.mobile-only {
  display: inline-flex;
}

@media (min-width: 1200px) {
  .desktop-only {
    display: block;
  }
  .mobile-only {
    display: none;
  }
}
@media (max-width: 768px) {
  .gnb__list {
    display: none;
  }
  .site-header.is-scrolled .container {
    padding: 20px 0;
  }
}
/* =============================== */
/* 모바일 드로어: 헤더 아래 레이어 */
/* =============================== */
.nav-drawer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  top: var(--header-h); /* 헤더 바로 아래부터 */
  z-index: 950; /* 헤더(1000)보다 낮게 */
  display: grid;
  grid-template-columns: 1fr;
  pointer-events: none;
}

.nav-drawer__scrim {
  background: rgba(8, 10, 20, 0.55);
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity 0.2s;
}

.nav-drawer__panel {
  position: fixed;
  top: var(--header-h);
  bottom: 0;
  left: 0;
  width: 100%;
  background: #fff;
  transform: translateX(-100%);
  transition: transform 0.25s ease;
  padding: 16px;
  overflow: auto;
  border-top: 1px solid #e2e5eb;
}

.nav-drawer.is-open {
  pointer-events: auto;
}

.nav-drawer.is-open .nav-drawer__scrim {
  opacity: 1;
}

.nav-drawer.is-open .nav-drawer__panel {
  transform: translateX(0);
}

@media (min-width: 768px) {
  .nav-drawer__panel {
    width: min(80vw, 460px);
  }
}
/* 모바일 아코디언 */
.mnav__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 6px;
}

.mnav__main {
  width: 100%;
  text-align: left;
  padding: 20px 14px;
  background: #fff;
  border-bottom: 1px solid #e2e5eb;
  font-size: 18px;
  font-weight: 700;
  position: relative;
  padding-right: 40px;
}
.mnav__main:last-child {
  border-bottom: none;
}

.mnav__item:last-child .mnav__main {
  border-bottom: none;
}
.mnav__item:last-child .mnav__sub.is-open {
  border-top: 1px solid #e2e5eb;
}

/* 열리고 닫힐 서브 */
.mnav__sub {
  list-style: none;
  margin: 0;
  padding: 0 6px 0 10px;
  display: grid;
  gap: 4px;
  font-size: 16px;
  font-weight: 500;
  /* 애니메이션용 기본 닫힘 상태 */
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.25s ease, opacity 0.25s ease, padding 0.25s ease;
}

/* 열렸을 때 */
.mnav__sub.is-open {
  padding: 8px 6px 8px 10px;
  max-height: 500px;
  opacity: 1;
  background: #f8f8f8;
  border-bottom: 1px solid #e2e5eb;
}

.mnav__sub a {
  display: block;
  padding: 8px 10px;
  border-radius: 10px;
  color: #000;
}
.mnav__sub a:hover, .mnav__sub a:focus, .mnav__sub a:active {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 2px;
}

/* 아이콘 */
.mnav__icon {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  transition: transform 0.25s ease;
}

/* 기본: + */
.mnav__main .mnav__icon::before {
  content: "+";
  font-size: 32px;
  font-weight: 200;
  color: #1b2533;
}

/* 열림: - 로 바꾸면서 아이콘 자체도 회전 */
.mnav__main.is-open .mnav__icon {
  transform: translateY(-50%) rotate(180deg);
}

.mnav__main.is-open .mnav__icon::before {
  content: "−";
  margin-top: -11px;
}

/* 데스크탑 오버레이 */
.nav-overlay {
  position: fixed;
  inset: 0;
  z-index: 950;
  pointer-events: none;
  display: none;
}

.nav-overlay.is-open {
  pointer-events: auto;
  display: block;
}

.nav-overlay__scrim {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  top: var(--header-h);
  background: rgba(8, 10, 20, 0.55);
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.nav-overlay__panel {
  position: fixed;
  left: 0;
  right: 0;
  top: var(--header-h);
  background: #fff;
  border-bottom: 1px solid #eceff3;
  box-shadow: 0 12px 28px rgba(30, 40, 60, 0.12);
  max-height: calc(100vh - var(--header-h));
  overflow: auto;
  transform: translateY(-10px);
  opacity: 0;
  transition: transform 0.22s ease, opacity 0.22s ease;
  pointer-events: auto;
  display: flex;
  justify-content: center;
  border-top: #e2e5eb 1px solid;
}

.nav-overlay.is-open .nav-overlay__scrim {
  opacity: 1;
}

.nav-overlay.is-open .nav-overlay__panel {
  transform: translateY(0);
  opacity: 1;
}

/* 오버레이 내부 레이아웃 */
.dnav {
  padding: 24px 0 28px;
  width: 1200px;
}

.dnav__cols {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(6, minmax(140px, 1fr));
  gap: 18px min(2.2vw, 22px);
}

.dnav__col {
  min-width: 0;
  border-right: #e2e5eb 1px solid;
}

.dnav__head {
  display: block;
  font-size: 18px;
  font-weight: 800;
  color: #1b2533;
  margin-bottom: 10px;
  text-indent: 10px;
}

.dnav__links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}

.dnav__links a {
  display: block;
  padding: 8px 10px;
  border-radius: 8px;
  color: #142033;
  font-weight: 600;
  font-size: 16px;
}

.dnav__links a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 2px;
}

.site-footer {
  background: #f7f8fb;
  padding: 20px 0 50px;
  position: relative;
  margin-top: 72px;
}
.site-footer .footer__head {
  border-bottom: #868a93 1px solid;
  padding: 15px 0;
  width: 100%;
}
.site-footer .footer__head li {
  display: inline-block;
  padding-right: 24px;
}
.site-footer .footer__head li span {
  font-weight: 700;
  color: #0068ff;
  text-decoration-line: underline;
  padding-left: 5px;
}
.site-footer .footer__meta {
  font-size: 14px;
  font-weight: 300;
  color: #000;
  margin-top: 15px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.site-footer .footer__meta .footer__links {
  display: flex;
  gap: 18px;
  flex-direction: row;
  flex-wrap: wrap;
}
.site-footer .footer__meta .footer__links li span {
  font-weight: 700;
}
.site-footer .footer__meta .footer__links li {
  white-space: nowrap;
}
.site-footer .footer__meta .footer__info {
  display: flex;
  gap: 18px;
  flex-direction: row;
}
.site-footer .footer__meta .footer__info span {
  color: #6b7280;
}
.site-footer .copyright {
  font-size: 14px;
  font-weight: 300;
  padding-top: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.site-footer .copyright .ci {
  display: block;
  width: 116px;
  height: 26px;
}
.site-footer .copyright .ci::after {
  content: url("/assets/common/ci.svg");
}
.site-footer .call {
  position: fixed;
  right: 24px;
  bottom: 40px;
  z-index: 1000;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 1px solid #e3e7ee;
  box-shadow: 0 10px 24px rgba(20, 30, 50, 0.15);
  background: #2563eb no-repeat url("/assets/icons/icon_call-wh.svg") 50%/30px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.12s ease, box-shadow 0.2s ease;
  transform: translateY(12px);
}
.site-footer .call:hover {
  box-shadow: 0 18px 36px rgba(20, 30, 50, 0.3);
}
.site-footer .call:active {
  transform: translateY(12px) scale(0.92);
}
.site-footer .call a {
  width: 60px;
  height: 60px;
  display: block;
}
.site-footer .fab-kakao,
.site-footer .fab-chat {
  position: fixed;
  right: 24px;
  z-index: 1000;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 1px solid #e3e7ee;
  box-shadow: 0 10px 24px rgba(20, 30, 50, 0.15);
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: box-shadow 0.2s ease, transform 0.12s ease;
}
.site-footer .fab-kakao:hover,
.site-footer .fab-chat:hover {
  box-shadow: 0 18px 36px rgba(20, 30, 50, 0.3);
}
.site-footer .fab-kakao:active,
.site-footer .fab-chat:active {
  transform: scale(0.92);
}
.site-footer .fab-kakao {
  bottom: 120px;
  background: #ffb400 no-repeat url("/assets/icons/icon_kakaotalk.svg") 50%/32px;
}
.site-footer .fab-chat {
  bottom: 200px;
  background-image: url("/assets/icons/icon_chatting.svg"), linear-gradient(135deg, #ff0080 0%, #7a00d1 100%);
  background-repeat: no-repeat;
  background-position: center, center;
  background-size: 32px, cover;
}
.site-footer .chat-tip {
  position: fixed;
  right: 28px;
  bottom: 202px;
  z-index: 999;
  height: 56px;
  padding: 8px 66px 8px 40px;
  border-radius: 999px;
  border: 1px solid #e3e7ee;
  background: #fff;
  box-shadow: 0 10px 24px rgba(20, 30, 50, 0.15);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  font-size: 13px;
  color: #111111;
  opacity: 0;
  transform: translateX(60px);
  transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events: none;
  white-space: nowrap;
  cursor: pointer;
}
.site-footer .chat-tip.is-visible {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}
.site-footer .chat-tip.is-hidden {
  opacity: 0;
  transform: translateX(60px);
  pointer-events: none;
}
.site-footer .chat-tip__close {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid #111111;
  background: #111111;
  cursor: pointer;
  pointer-events: auto;
}
.site-footer .chat-tip__close::before, .site-footer .chat-tip__close::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 8px;
  height: 1px;
  background: #fff;
  transform-origin: center;
}
.site-footer .chat-tip__close::before {
  transform: translate(-50%, -50%) rotate(45deg);
}
.site-footer .chat-tip__close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}
.site-footer .chat-tip__title {
  font-weight: 600;
}
.site-footer .chat-tip__sub {
  font-size: 11px;
  color: #374151;
  display: flex;
  align-items: center;
  gap: 6px;
}
.site-footer .chat-tip__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ef4444;
  flex: 0 0 auto;
}

@media (max-width: 768px) {
  .site-footer .footer__head li {
    display: block;
    margin-bottom: 6px;
  }
  .site-footer .footer__meta {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }
  .site-footer .footer__meta .footer__links {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .site-footer .footer__meta .footer__info {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
  }
  .site-footer .footer__meta .footer__info li {
    text-align: right;
  }
  .site-footer .call {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }
  .site-footer .call:active {
    transform: translateY(0) scale(0.92);
  }
}
/* === [MERGED] Back-to-top FAB (auto-injected if missing) === */
.site-footer .fab {
  position: fixed;
  right: 24px;
  bottom: 280px;
  z-index: 1000;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 1px solid #e3e7ee;
  box-shadow: 0 10px 24px rgba(20, 30, 50, 0.15);
  background: #fff no-repeat url("/assets/icons/icon_up.svg") 50%/20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
  transform: translateY(12px);
}
.site-footer .fab:hover {
  box-shadow: 0 18px 36px rgba(20, 30, 50, 0.3);
}
.site-footer .fab:active {
  transform: translateY(12px) scale(0.92);
}

.site-footer .fab.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.site-footer .fab.is-visible:active {
  transform: translateY(0) scale(0.92);
}

/* 컨테이너/바 */
.menu-trigger {
  position: relative;
  width: 20px;
  height: 16px;
  display: inline-block;
}

.menu-trigger span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: #000;
  border-radius: 2px;
  transition: all 0.2s;
}

.menu-trigger span:nth-of-type(1) {
  top: 0;
}

.menu-trigger span:nth-of-type(2) {
  top: 7px;
}

.menu-trigger span:nth-of-type(3) {
  bottom: 0;
}

/* 초기 애니(선택) */
.menu-trigger.type-x span:nth-of-type(1) {
  animation: menu-bar-01 0.35s forwards;
}

.menu-trigger.type-x span:nth-of-type(2) {
  transition: all 0.1s 0.1s;
  opacity: 1;
}

.menu-trigger.type-x span:nth-of-type(3) {
  animation: menu-bar-02 0.35s forwards;
}

/* active → X */
.menu-trigger.active span:nth-of-type(1) {
  animation: active-menu-bar-01 0.35s forwards;
}

.menu-trigger.active span:nth-of-type(2) {
  opacity: 0;
}

.menu-trigger.active span:nth-of-type(3) {
  animation: active-menu-bar-02 0.35s forwards;
}

/* keyframes */
@keyframes menu-bar-01 {
  0% {
    transform: translateY(7px) rotate(45deg);
  }
  50% {
    transform: translateY(7px) rotate(0);
  }
  100% {
    transform: translateY(0) rotate(0);
  }
}
@keyframes menu-bar-02 {
  0% {
    transform: translateY(-7px) rotate(-45deg);
  }
  50% {
    transform: translateY(-7px) rotate(0);
  }
  100% {
    transform: translateY(0) rotate(0);
  }
}
@keyframes active-menu-bar-01 {
  0% {
    transform: translateY(0) rotate(0);
  }
  50% {
    transform: translateY(7px) rotate(0);
  }
  100% {
    transform: translateY(7px) rotate(45deg);
  }
}
@keyframes active-menu-bar-02 {
  0% {
    transform: translateY(0) rotate(0);
  }
  50% {
    transform: translateY(-7px) rotate(0);
  }
  100% {
    transform: translateY(-7px) rotate(-45deg);
  }
}
.load-fade {
  --load-fade-translate: 24px;
  opacity: 0;
  transform: translate3d(0, var(--load-fade-translate), 0);
  transition: opacity 0.45s ease, transform 0.45s ease;
  will-change: opacity, transform;
}

.load-fade.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.load-fade--opacity {
  --load-fade-translate: 0px;
}

.load-fade.load-fade--no-transform.is-visible {
  transform: none;
}

/* =========================================================
   Generic scroll/load motions
========================================================= */
.motion-enabled [data-motion]:not(.is-visible) {
  opacity: 0;
}

.motion-base {
  opacity: 0;
  transform: translate3d(0, var(--motion-translate, 24px), 0) scale(var(--motion-scale, 1));
  transition-property: opacity, transform;
  transition-duration: var(--motion-duration, 0.52s);
  transition-timing-function: var(--motion-ease, cubic-bezier(0.22, 0.61, 0.36, 1));
  transition-delay: var(--motion-delay, 0s);
  will-change: opacity, transform;
}

.motion-base.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

.motion-fade-up {
  --motion-translate: 24px;
}

.motion-fade-in {
  --motion-translate: 0px;
}

.motion-zoom-in {
  --motion-translate: 16px;
  --motion-scale: .94;
}

@media (prefers-reduced-motion: reduce) {
  .motion-base {
    opacity: 1 !important;
    transform: none !important;
    transition-duration: 0ms !important;
  }
}
body.search-overlay-open {
  overflow: hidden;
}

.search-overlay {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 16px;
  background: rgba(8, 10, 20, 0.55);
  backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.25s ease, visibility 0s linear 0.25s;
  color: #111111;
}

.search-overlay.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.25s ease;
}

.search-overlay__scrim {
  position: absolute;
  inset: 0;
}

.search-overlay__panel {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 960px;
  margin: 40px auto;
  border-radius: 18px;
  background: #fff;
  padding: 48px 56px 56px;
  box-shadow: 0 30px 60px rgba(7, 9, 20, 0.25);
  display: flex;
  flex-direction: column;
  gap: 32px;
  max-height: calc(100vh - 80px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  opacity: 0;
  transform: translate3d(0, 32px, 0) scale(0.98);
  transition: opacity 0.32s ease, transform 0.32s ease;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.search-overlay.is-open .search-overlay__panel {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

.search-overlay__panel::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.search-overlay__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.search-overlay__eyebrow {
  font-size: var(--font-18px);
  font-weight: 600;
  color: #666666;
}

.search-overlay__close {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(16, 24, 40, 0.15);
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
  position: relative;
}

.search-overlay__close::before,
.search-overlay__close::after {
  content: "";
  position: absolute;
  width: 18px;
  height: 2px;
  background: #111111;
  border-radius: 1px;
  transition: background 0.2s ease;
}

.search-overlay__close::before {
  transform: rotate(45deg);
}

.search-overlay__close::after {
  transform: rotate(-45deg);
}

.search-overlay__close:hover {
  border-color: rgba(16, 24, 40, 0.4);
  background: rgba(8, 12, 32, 0.04);
}

.search-overlay__bar {
  display: flex;
  align-items: center;
  gap: 12px;
  border-radius: 18px;
  background: #f7f8fb;
  padding: 16px 20px;
  border: 1px solid rgba(24, 32, 48, 0.08);
}

.search-overlay__bar input {
  flex: 1;
  border: none;
  background: transparent;
  font-size: var(--font-20px);
  font-weight: 600;
  outline: none;
  color: #111111;
}

.search-overlay__bar input::placeholder {
  color: rgba(30, 36, 48, 0.4);
}

.search-overlay__clear {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: rgba(20, 26, 32, 0.1);
  color: transparent;
  position: relative;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.2s ease;
}

.search-overlay__clear::before,
.search-overlay__clear::after {
  content: "";
  position: absolute;
  width: 14px;
  height: 2px;
  background: #fff;
  top: 50%;
  left: 50%;
  margin-top: -1px;
  margin-left: -7px;
}

.search-overlay__clear::before {
  transform: rotate(45deg);
}

.search-overlay__clear::after {
  transform: rotate(-45deg);
}

.search-overlay__clear:hover {
  background: rgba(20, 26, 32, 0.18);
}

.search-overlay__body {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 40px;
}

.search-suggest__title {
  font-size: var(--font-16px);
  color: #666666;
  margin-bottom: 14px;
}

.search-suggest__chips {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.search-suggest__chips button {
  border: none;
  border-radius: 999px;
  padding: 8px 18px;
  background: #f3f5fa;
  color: #111111;
  font-size: var(--font-14px);
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}

.search-suggest__chips button:hover {
  background: #e4ebff;
  transform: translateY(-1px);
}

.search-results {
  min-height: 280px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.search-results__meta p {
  font-size: var(--font-16px);
  color: #666666;
}

.search-results__meta strong {
  margin: 0 4px;
  font-size: var(--font-18px);
  color: #111111;
}

.search-results__list {
  list-style: none;
  padding: 1px 0 5px;
  margin: 0;
  max-height: min(440px, 60vh);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.search-results__list li {
  border: 1px solid rgba(24, 32, 48, 0.08);
  border-radius: 16px;
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.search-results__list a {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px 20px;
}

.search-results__category {
  font-size: var(--font-13px);
  font-weight: 600;
  color: #2563eb;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.search-results__title {
  font-size: var(--font-20px);
  font-weight: 700;
  color: #111111;
}

.search-results__desc {
  font-size: var(--font-15px);
  color: #666666;
}

.search-results__list mark {
  background: rgba(255, 226, 115, 0.4);
  padding: 0 2px;
  border-radius: 2px;
}

.search-results__list li:hover {
  transform: translateY(-1px);
  border-color: rgba(32, 144, 255, 0.5);
  box-shadow: 0 3px 3px rgba(12, 18, 40, 0.12);
}

.search-results__empty {
  font-size: var(--font-15px);
  color: #666666;
  margin-top: 30px;
}

@media (max-width: 768px) {
  .search-overlay {
    padding: 0;
    align-items: stretch;
    justify-content: stretch;
    background: #f3f4f6;
  }
  .search-overlay__panel {
    margin: 0;
    border-radius: 0;
    padding: 28px 20px 36px;
    max-height: none;
    min-height: 100vh;
    overflow-y: auto;
  }
  .search-overlay__body {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .search-results__list {
    max-height: none;
    overflow: visible;
  }
}
@media (max-width: 520px) {
  .search-overlay__bar {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .search-overlay__bar input {
    font-size: var(--font-18px);
  }
  .search-overlay__clear {
    align-self: flex-end;
  }
  .search-results__title {
    font-size: var(--font-18px);
  }
}
.hs-date-picker {
  position: fixed;
  z-index: 9999;
  width: 280px;
  background: #fff;
  border: 1px solid #e6e8ef;
  border-radius: 14px;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.18);
  padding: 12px;
  display: none;
}

.hs-date-picker.is-open {
  display: block;
}

.hs-date-picker__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.hs-date-picker__title {
  font-size: 15px;
  font-weight: 700;
  color: #111111;
}

.hs-date-picker__nav {
  width: 32px;
  height: 32px;
  border: 0;
  background: #f7f8fb;
  color: #111111;
  border-radius: 8px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.hs-date-picker__nav:hover,
.hs-date-picker__nav:focus-visible {
  background: #2563eb;
  color: #fff;
}

.hs-date-picker__week {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  font-size: 12px;
  color: #666666;
  text-align: center;
  margin-bottom: 6px;
}

.hs-date-picker__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}

.hs-date-picker__cell {
  border: 0;
  background: transparent;
  font-size: 13px;
  font-weight: 400;
  color: #2563eb;
  width: 100%;
  padding: 6px 0;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.hs-date-picker__cell:not(.is-disabled) {
  font-weight: 800;
}

.hs-date-picker__cell.is-adjacent {
  color: #666666;
}

.hs-date-picker__cell:hover,
.hs-date-picker__cell:focus-visible {
  background: #f7f8fb;
}

.hs-date-picker__cell.is-selected {
  background: #2563eb;
  color: #fff;
}

.hs-date-picker__cell.is-disabled {
  color: #666666;
  cursor: not-allowed;
}

.hs-date-picker__cell.is-disabled:hover,
.hs-date-picker__cell.is-disabled:focus-visible {
  background: transparent;
}

.hs-date-picker__cell.is-placeholder {
  pointer-events: none;
}

/* ③ 페이지 전용 */
/* 페이지 전용 */
/* =========================================================
    HI STOCK LOAN — Main SCSS (reorganized)
    Global Reset + Base Font + Color Scheme
========================================================= */
/* ① SCSS Modules (모든 @use는 최상단) */
/* ② 테마 & 공통 모듈 */
/* ===== HERO ===== */
.hero {
  background: #fff;
  padding: 0 0 18px;
}

.hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

@media (min-width: 1200px) {
  .hero__grid {
    grid-template-columns: 8fr 4fr;
  } /* 시안 비율 */
}
.slider {
  border-radius: 20px;
}

.slider__nav {
  width: 40px;
  height: 40px;
  background: rgba(0, 0, 0, 0.35);
}

.slider__pagination {
  bottom: 14px;
  gap: 8px;
}

.slider__pagination button {
  width: 8px;
  height: 8px;
  border-radius: 8px;
}

.slider__pagination button.is-active {
  background: #ff2d7a;
}

/* === [MERGED] HERO controls & slider layout === */
.hero__slider {
  position: relative;
}

.slider {
  position: relative;
  overflow: hidden;
}

.slider__track {
  display: flex;
  transition: transform 0.5s ease;
  will-change: transform;
}

.slide {
  flex: 0 0 100%;
  position: relative;
}
.slide .slide-title {
  color: #fff;
  position: absolute;
  left: 50px;
  top: 40px;
}
.slide .slide-title h1 {
  font-size: var(--font-36px);
  font-weight: 800;
  left: 50px;
  top: 20px;
  line-height: 1.4;
}
.slide .slide-title h2 {
  font-size: var(--font-16px);
  font-weight: 600;
  left: 50px;
  top: 135px;
  margin-top: 10px;
}

.slide--dark .slide-title {
  color: #fff;
}

.slide--light .slide-title, .slide--light .slide-title h1, .slide--light .slide-title h2 {
  color: #111111;
}

.hero-controls {
  position: absolute;
  left: 44px;
  bottom: 40px;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 10px;
}

.hc-btn {
  width: 15px;
  height: 30px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  line-height: 1;
  background: transparent 0;
  border: 0;
}

.hc-prev, .hc-next {
  font-size: 30px;
  font-weight: 100;
  padding-bottom: 9px;
}

.hc-toggle {
  font-size: 12px;
  background: #afafaf;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  color: #fff;
}

.hc-counter {
  font-weight: 500;
  color: #1b2533;
}

.hc-current {
  font-weight: 900;
}

@media (max-width: 767px) {
  .hero-controls {
    left: 14px;
    bottom: 16px;
    padding: 6px 10px;
    gap: 8px;
  }
  .slide .slide-title {
    left: 26px;
    top: 20px;
  }
  .slide .slide-title h1 {
    font-size: var(--font-36px);
    font-weight: 800;
    left: 50px;
    top: 20px;
  }
  .slide .slide-title h2 {
    font-size: var(--font-16px);
    font-weight: 600;
    left: 50px;
    top: 135px;
    margin-top: 6px;
  }
}
/* ===== 배너 우측 탭 공통 ==== */
.tabs--hero {
  background: #fff;
  border-radius: 20px;
  border: #e2e5eb solid 1px;
  padding: 20px 32px;
}
@media (max-width: 768px) {
  .tabs--hero {
    padding: 16px 24px 26px;
  }
}
.tabs--hero .tabs__list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-bottom: #e2e5eb solid 1px;
}
.tabs--hero .tabs__tab {
  height: 44px;
  font-weight: 400;
  font-size: var(--font-16px);
  letter-spacing: -0.3px;
  background: transparent;
  padding-bottom: 2px;
}
.tabs--hero .tabs__tab.is-active {
  font-weight: 700;
  border-bottom: #111111 solid 2px;
  padding-bottom: 0;
}
.tabs--hero .hero__callcenter {
  margin-top: 34px;
  text-align: left;
  border-top: 1px solid #e2e5eb;
  background: url("/assets/icons/icon_call.svg") no-repeat right bottom/42px;
}
.tabs--hero .hero__callcenter .hero__cs {
  margin-top: 34px;
  font-size: var(--font-18px);
  font-weight: 500;
  color: #111111;
  text-align: left;
  line-height: 1;
  padding-bottom: 2px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.tabs--hero .hero__callcenter .hero__cs span {
  font-size: var(--font-32px);
  font-weight: 700;
}
@media (max-width: 768px) {
  .tabs--hero .hero__callcenter {
    display: none;
  }
}
.tabs--hero {
  /* ===== 배너 우측 - 상담신청 탭 ==== */
}
.tabs--hero input, .tabs--hero select {
  border-radius: 10px;
  font-size: var(--font-16px);
  font-weight: 600;
  text-indent: 15px;
  color: #000;
}
.tabs--hero #qName {
  width: 100%;
  height: 52px;
  margin-top: 34px;
  border: 1px solid #e2e5eb;
}
.tabs--hero .call-number {
  width: 100%;
  height: 52px;
  margin-top: 24px;
  border: 1px solid #e2e5eb;
  border-radius: 10px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.tabs--hero .call-number select, .tabs--hero .call-number input {
  border: none;
  width: 32%;
  height: 100%;
  background: transparent;
}
.tabs--hero .call-number #qPhone1 option {
  font-weight: 600;
  color: #000;
}
.tabs--hero .btn-primary {
  height: 52px;
  font-size: var(--font-16px);
  font-weight: 800;
  border-radius: 10px;
  background: #2090ff;
  margin-top: 24px;
}
.tabs--hero {
  /* ===== 배너 우측 - 매수/매도 탭 ==== */
}
.tabs--hero .trade__list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  margin-top: 18px;
  background-image: linear-gradient(#e2e5eb, #e2e5eb);
  background-repeat: no-repeat;
  background-size: 1px 104px;
  background-position: 50% 36px; /* 중앙 */
}
.tabs--hero .trade__list h1 {
  font-size: var(--font-16px);
  font-weight: 400;
  color: #686868;
  text-align: center;
  line-height: 1;
  margin: 0 0 16px;
}
.tabs--hero .trade__list ul {
  padding: 0;
}
.tabs--hero .trade__list li {
  list-style: none;
  font-size: var(--font-14px);
  line-height: 1.6;
  color: #000;
  max-width: 30vw;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (min-width: 1200px) {
  .tabs--hero .trade__list li {
    max-width: 135px;
  }
}
@supports (font: -apple-system-body) {
  .tabs--hero .trade__list {
    margin-top: 20px;
  }
}
.tabs--hero .btn-more {
  height: 52px;
  font-size: var(--font-16px);
  font-weight: 400;
  border-radius: 10px;
  background: #fff;
  margin-top: 24px;
  color: #686868;
  border: 1px solid #e2e5eb;
}

/* ===== 섹션 타이틀 + 상품 탭 ===== */
.products {
  padding: 48px 0 24px;
}
.products .section-head {
  margin-bottom: 34px;
  text-align: center;
}
.products .section-head h1 {
  all: unset;
  font-size: var(--font-18px);
  font-weight: 400;
  color: #111111;
  display: inline-block;
  margin-bottom: 34px;
}
.products .section-head h2 {
  all: unset;
  font-size: var(--font-24px);
  font-weight: 700;
  color: #111111;
  display: inline-block;
  margin-bottom: 34px;
  letter-spacing: -0.3px;
  /* &::before{
    content:""; display:inline-block; width:6px; height:6px;
    background:linear-gradient(135deg,#ff2d7a,#a032ff);
    border-radius:50%; margin-right:8px; vertical-align:2px;
  } */
}
@media (max-width: 768px) {
  .products .section-head h1 {
    display: block;
    margin-bottom: 0;
  }
  .products .section-head h2 {
    display: block;
  }
}

/* === Tabs motion === */
.tabs--product .tabs__list {
  position: relative; /* 인디케이터 절대 위치용 */
  display: flex;
  border: 1px solid #e2e5eb;
  border-radius: 25px;
  background: #fff;
  width: 100%; /* 시안 길이 */
  isolation: isolate; /* 인디케이터 위계 안정 */
}
.tabs--product {
  /* 탭 색 전환 */
}
.tabs--product .tabs__tab {
  flex: 1 1 50%; /* 기본 1:1 */
  transition: flex-basis 0.38s cubic-bezier(0.22, 1, 0.36, 1), color 0.2s ease, background-color 0.2s ease;
  will-change: flex-basis;
  height: 50px;
  border-radius: 25px;
  font-weight: 700;
  font-size: var(--font-18px);
  color: #111111;
  background: transparent;
  position: relative;
  transition: color 0.2s ease, background-color 0.2s ease;
}
.tabs--product .tabs__tab.is-active {
  color: #fff;
  font-weight: 800;
  z-index: 2;
}
.tabs--product {
  /* 첫 번째 탭이 활성일 때: 60/40 */
}
.tabs--product.is-active-1 .tabs__tab:nth-child(1) {
  flex-basis: 60%;
}
.tabs--product.is-active-1 .tabs__tab:nth-child(2) {
  flex-basis: 40%;
}
.tabs--product.is-active-1 .tabs__indicator {
  background: linear-gradient(90deg, #7a00d1, #ff0080);
}
.tabs--product {
  /* 두 번째 탭이 활성일 때: 40/60 */
}
.tabs--product.is-active-2 .tabs__tab:nth-child(1) {
  flex-basis: 40%;
}
.tabs--product.is-active-2 .tabs__tab:nth-child(2) {
  flex-basis: 60%;
}
.tabs--product.is-active-2 .tabs__indicator {
  background: linear-gradient(90deg, #ff0080, #7a00d1);
}
.tabs--product {
  /* 모바일 1:1 유지 */
}
@media (max-width: 768px) {
  .tabs--product .tabs__tab {
    flex-basis: 50% !important;
  }
}
.tabs--product {
  /* 인디케이터 (슬라이딩 바) */
}
.tabs--product .tabs__indicator {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 50px;
  border-radius: 25px;
  width: 0;
  transform: translateX(0);
  transition: transform 0.38s cubic-bezier(0.22, 1, 0.36, 1), width 0.38s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform, width;
  z-index: 1;
}
.tabs--product {
  /* 패널 모션: 살짝 페이드+슬라이드 */
}
.tabs--product .tabs__panels .tabs__panel {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.28s ease, transform 0.28s ease;
  will-change: opacity, transform;
}
.tabs--product .tabs__panels .tabs__panel.is-active {
  opacity: 1;
  transform: translateY(0);
}

/* === [MERGED] Product carousel layout === */
.pcarousel {
  position: relative;
}

.pcarousel__viewport {
  overflow: hidden;
  padding-top: 10px;
}

.pcarousel__track {
  display: flex;
  gap: 24px;
  transition: transform 0.45s ease;
  will-change: transform;
}

/* ===== 메인 간편 상담신청 모달/알럿 ===== */
html.no-scroll,
body.no-scroll {
  overflow: hidden;
  height: 100%;
  touch-action: none;
}

.layer-popup {
  display: none;
  position: fixed;
  z-index: 99999;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  outline: 0;
  background: rgba(8, 10, 20, 0.55);
  backdrop-filter: blur(6px);
}

.layer-popup.show {
  display: block;
}

.fade {
  transition: opacity 0.15s linear;
}

.modal-dialog {
  position: relative;
  margin: 0 auto;
  height: 100%;
  z-index: 300;
}

.modal-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  overflow: hidden;
  pointer-events: auto;
  background-color: #fff;
  padding: 40px 38px;
  border: 1px solid #e6e9f0;
  border-radius: 26px;
  outline: 0;
  min-width: 640px;
  max-width: min(860px, 100vw - 80px);
  max-height: calc(100vh - 48px);
  box-shadow: 0 20px 60px rgba(12, 24, 50, 0.18);
  display: flex;
  flex-direction: column;
}

.modal-body {
  position: relative;
  color: #1d1e25;
  overflow-y: auto;
  overflow-x: hidden;
  flex: 1 1 auto;
  min-height: 0;
}

/* 모달 스크롤바: 동의서(detail) 스타일과 동일하게 */
.modal-body:hover::-webkit-scrollbar-track,
.modal-body:active::-webkit-scrollbar-track {
  background-color: #f2f3f8;
}

.modal-body::-webkit-scrollbar {
  -webkit-appearance: none;
  width: 6px;
}

.modal-body::-webkit-scrollbar-track {
  border-radius: 10px;
  background-color: #fff;
}

.modal-body::-webkit-scrollbar-thumb {
  background-color: #61A5FF;
  border-radius: 10px;
}

.modal-body::-webkit-scrollbar-button {
  display: none;
}

@media (max-height: 760px) {
  .modal-content {
    top: 24px;
    transform: translateX(-50%);
  }
}
.modal-body .modal-title {
  padding: 0 0 18px;
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  display: inline-block;
}

.modal-body .close {
  all: unset;
  position: absolute;
  top: -5px;
  right: 0;
  font-size: 2.2rem;
  font-weight: 400;
  cursor: pointer;
}

.modal-body .check-all {
  color: #1d1e25;
  width: 100%;
  font-size: 1.1rem;
  font-weight: 700;
  border-top: 1px solid #a9c9ff;
  padding: 18px 0 14px;
}

.modal-body .check-all input[type=checkbox] {
  display: none;
}

.modal-body .check-all input[type=checkbox] + label {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 1px solid #111111;
  border-radius: 4px;
  background: #fff;
  position: relative;
  vertical-align: middle;
  cursor: pointer;
}

.modal-body .check-all input[type=checkbox] + label span {
  display: inline-block;
  padding: 0 0 0 30px;
  position: relative;
  top: -5px;
  width: 100vw;
  width: 100dvw;
}

.modal-body .check-all input[type=checkbox]:checked + label {
  background: #111111;
}

.modal-body .check-all input[type=checkbox]:checked + label::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 2px;
  width: 8px;
  height: 11px;
  border-right: 3px solid #fff;
  border-bottom: 3px solid #fff;
  transform: rotate(40deg);
}

.modal-body .check-all p {
  font-size: 1.05rem;
  font-weight: 400;
  padding-top: 8px;
  line-height: 1.55rem;
  padding-bottom: 6px;
  color: #586070;
}

.slideButton {
  position: relative;
  border-top: 1px solid #dbdbdb;
  padding-top: 18px;
  padding-right: 36px;
  cursor: pointer;
}

.slideButton h1 {
  font-size: 1.05rem;
  font-weight: 800;
  color: #2f6cff;
}

.slideButton span {
  font-weight: 600;
  color: #7a8294;
}

.slideButton span.required {
  font-weight: 700;
  color: #000;
}

.slideButton p {
  font-size: 1.02rem;
  font-weight: 400;
  padding-top: 10px;
  margin-bottom: 10px;
  color: #4b5563;
}

.arrowrap {
  position: absolute;
  top: 22px;
  right: 0;
}

.slideButton .arrow-left {
  display: block;
}

.slideButton .arrow-left svg {
  height: 1rem;
}

.check-option {
  color: #1d1e25;
  font-size: 1.02rem;
  font-weight: 600;
  margin-bottom: 16px;
}

.check-option input[type=checkbox] {
  display: none;
}

.check-option input[type=checkbox] + label {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 1px solid #111111;
  border-radius: 4px;
  background: #fff;
  position: relative;
  vertical-align: middle;
  margin-right: 8px;
  cursor: pointer;
}

.check-option input[type=checkbox] + label .confirm-text span {
  display: inline-block;
  padding: 0 0 0 30px;
  position: relative;
  top: -3px;
  width: 90vw;
  width: 90dvw;
}

.check-option input[type=checkbox]:checked + label {
  background: #111111;
}

.check-option input[type=checkbox]:checked + label::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 2px;
  width: 8px;
  height: 11px;
  border-right: 3px solid #fff;
  border-bottom: 3px solid #fff;
  transform: rotate(40deg);
}

.pop-req-btn {
  margin-top: 34px;
}

.pop-req-btn input {
  font-size: 17px;
  font-weight: 700;
  width: 100%;
  color: #fff;
  border-radius: 30px;
  background-color: #4f8dff;
  padding: 14px 16px;
  border: 0;
}

.pop-req-btn input:hover {
  background-color: #2f6cff;
}

.slide-in-div {
  display: none;
  position: fixed;
  top: 0;
  right: -100%;
  width: 100%;
  height: 100%;
  background-color: white;
  z-index: 9999;
  transition: right 0.5s ease-in-out;
  flex-direction: column;
}

.slide-in-div.show {
  right: 0;
  display: flex !important;
}

.slide-in-div .title {
  color: #006FFF;
  padding: 45px 50px 50px 40px;
  font-size: 1.3rem;
  font-weight: 700;
  display: inline-block;
  word-break: keep-all;
}

.slide-in-div .title h1 span {
  color: #828282;
}

.slide-in-div .title .black {
  color: #000;
}

.slide-in-div button {
  position: absolute;
  display: inline-block;
  background: rgba(255, 255, 255, 0);
  font-size: 2.5rem;
  top: 33px;
  right: 40px;
  border: 0;
}

.slide-in-div .detail {
  overflow: hidden;
  overflow-y: scroll;
  flex: 1 1 auto;
  min-height: 0;
  height: auto;
  padding: 0 41px;
  margin-right: 40px;
}

.slide-in-div .detail h1 {
  font-size: 1.5rem;
}

.slide-in-div .detail p {
  font-size: 1.1rem;
  line-height: 1.8rem;
}

.pl-20 {
  padding-left: 20px;
}

.slide-in-div .detail:hover::-webkit-scrollbar-track,
.slide-in-div .detail:active::-webkit-scrollbar-track {
  background-color: #f2f3f8;
}

.slide-in-div .detail::-webkit-scrollbar {
  -webkit-appearance: none;
  width: 6px;
}

.slide-in-div .detail::-webkit-scrollbar-track {
  border-radius: 10px;
  background-color: #fff;
}

.slide-in-div .detail::-webkit-scrollbar-thumb {
  background-color: #61A5FF;
  border-radius: 10px;
}

.slide-in-div .detail::-webkit-scrollbar-button {
  display: none;
}

.slideInDiv-close {
  flex: 0 0 auto;
  margin: 40px;
}

.slideInDiv-close input {
  font-size: 18px;
  font-weight: 700;
  width: 100%;
  color: #fff;
  border-radius: 30px;
  background-color: #006FFF;
  border: 0;
  padding: 15px;
}

.custom-alert {
  display: none;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background-color: white;
  border: 1px solid #ccc;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  z-index: 99999;
  width: 400px;
  padding: 20px;
  border-radius: 30px;
  text-align: center;
}

.custom-alert .title {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 17px;
}

.custom-alert .message {
  font-size: 18px;
  font-weight: 400;
  margin-bottom: 20px;
}

.custom-alert .completion-btn {
  font-size: 18px;
  font-weight: 700;
  background-color: #61A5FF;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 30px;
  cursor: pointer;
}

.custom-alert .completion-btn:hover {
  background-color: #006FFF;
}

.overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(8, 10, 20, 0.55);
  backdrop-filter: blur(6px);
  z-index: 99999;
}

@media (max-width: 768px) {
  .layer-popup {
    padding: 0;
    align-items: stretch;
    justify-content: stretch;
    background: #f3f4f6;
  }
  .modal-dialog {
    height: 100%;
  }
  .modal-content {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    width: 100%;
    height: 100%;
    min-width: 100%;
    max-width: 100%;
    max-height: 100%;
    border-radius: 0;
    padding: 24px 16px;
    overflow: hidden;
  }
  .modal-body {
    min-height: 100%;
    overflow-y: auto;
  }
  .slide-in-div {
    height: 100vh;
  }
  .custom-alert {
    width: calc(100% - 32px);
  }
}
/* ✅ 기본: 2개 (태블릿/좁은 PC) */
.pcarousel__card {
  flex: 0 0 calc((100% - 24px) / 2); /* 2 per view */
}

/* ✅ 중간 PC: 3개 */
@media (min-width: 920px) {
  .pcarousel__card {
    flex-basis: calc((100% - 48px) / 3); /* 3 per view */
  }
}
/* ✅ 넓은 PC: 4개 */
@media (min-width: 1200px) {
  .pcarousel__card {
    flex-basis: calc((100% - 72px) / 4); /* 4 per view */
  }
}
/* 기존대로 버튼 여백 */
@media (min-width: 769px) {
  .pcarousel__viewport {
    margin: 0 34px;
  }
}
/* ✅ 모바일: 기존처럼 60% 슬라이더 유지 */
@media (max-width: 619px) {
  .pcarousel__card {
    flex-basis: 65%;
  }
  .pcarousel__nav {
    display: none !important;
  } /* mobile hide buttons */
}
.pcarousel__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 42px;
  height: 42px;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

.pcarousel__prev {
  left: -12px;
  font-size: 40px;
  font-weight: 300;
  font-family: "Pretendard";
}

.pcarousel__next {
  right: -12px;
  font-size: 40px;
  font-weight: 300;
  font-family: "Pretendard";
}

.card-grid--product {
  gap: 24px;
} /* fallback spacing */
/* ===== 상품 카드 ===== */
.card-grid--product {
  row-gap: 16px;
}

.card {
  border-radius: 20px;
  border: 1px solid #e2e5eb;
  cursor: pointer;
}

.card--product,
.card-grid--product .card {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%; /* 그리드/캐러셀에서 동일 높이로 스트레치 */
  box-sizing: border-box;
  transform: translateY(0px);
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.card--product .card__head,
.card-grid--product .card .card__head {
  color: #111111;
  margin-top: 25px;
}
.card--product .card__head .credit__logo,
.card-grid--product .card .card__head .credit__logo {
  width: 76px;
  height: 60px;
  margin: 0 auto;
}
.card--product .card__head .credit,
.card-grid--product .card .card__head .credit {
  font-size: 14px;
  font-weight: 400;
  display: block;
  margin: 6px 0 16px;
}
.card--product .card__mid,
.card-grid--product .card .card__mid {
  display: block;
}
.card--product .card__mid strong,
.card-grid--product .card .card__mid strong {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.2px;
  margin-bottom: 4px;
  color: #111111;
}
.card--product .card__mid .rate,
.card-grid--product .card .card__mid .rate {
  font-size: 36px;
  line-height: 1;
  margin-bottom: 8px;
  color: #ff2d7a;
  font-weight: 800;
  letter-spacing: -0.5px;
}
.card--product .btn,
.card-grid--product .card .btn {
  color: #ff2d7a;
  height: 34px;
  border-radius: 17px;
  border: #ff2d7a 1px solid;
  font-weight: 400;
  font-size: 14px;
  margin: 20px 0 30px;
}
.card--product:hover,
.card-grid--product .card:hover {
  border: 1px solid #ff2d7a;
  transform: translateY(-5px);
  box-shadow: 0 5px 0px #e2e5eb;
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.card--product:hover .btn,
.card-grid--product .card:hover .btn {
  color: #fff;
  font-weight: 600;
  background: #ff2d7a;
}
.card--product .card__foot,
.card-grid--product .card .card__foot {
  margin-top: auto;
  width: 100%;
  background: #f7f7f7;
  padding: 10px 15px;
  border-radius: 0 0 20px 20px;
}
.card--product .card__foot .card__copy,
.card-grid--product .card .card__foot .card__copy {
  color: #111111;
  font-size: 18px;
  font-weight: 400;
  padding-bottom: 8px;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.card--product .card__foot .card__tags,
.card-grid--product .card .card__foot .card__tags {
  background-image: linear-gradient(#bcbcbc, #bcbcbc);
  background-repeat: no-repeat;
  background-size: 100% 1px;
  background-position: top;
  padding-top: 8px;
}
.card--product .card__foot .card__tags .tag,
.card-grid--product .card .card__foot .card__tags .tag {
  color: #666666;
  font-size: 14px;
  font-weight: 400;
  display: inline-block;
  margin: 0 2px;
  line-height: 0;
}

/* ===== 통계/배너 ===== */
.stats {
  padding: 24px 0;
}
.stats .stats__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
@media (min-width: 1200px) {
  .stats .stats__grid {
    grid-template-columns: 1fr 1fr;
  }
}
.stats .stats__card {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  padding: 26px 24px;
  min-height: 284px;
}
.stats .stats__card h3 {
  font-size: var(--font-20px);
  font-weight: 700;
  color: #111111;
  margin-bottom: 24px;
  line-height: 1.2;
}
.stats .stats__card .metrics {
  display: flex;
  flex-direction: column;
  margin: 0;
}
.stats .stats__card .metrics dt {
  font-size: var(--font-16px);
  font-weight: 500;
  line-height: 1.2;
}
.stats .stats__card .metrics dd {
  all: unset;
  margin-bottom: 12px;
}
.stats .stats__card .metrics dd strong {
  font-size: var(--font-24px);
  font-weight: 700;
  color: #111111;
}
.stats .stats__card .caption {
  font-size: var(--font-14px);
  line-height: 1.3;
  margin-top: 14px;
}
.stats .stats__card > * {
  position: relative;
  z-index: 1;
}
.stats .stats__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.stats .stats__video {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  object-fit: contain;
  opacity: 0;
}
.stats .stats__card.is-gif-playing .stats__video {
  opacity: 1;
}
@media (hover: hover) {
  .stats .stats__card:hover .stats__video {
    opacity: 1;
  }
}
.stats .left {
  color: #666666;
  background-color: #dcf2fe;
  background-image: url("/assets/illust/woman.png");
  background-repeat: no-repeat;
  background-position: right -34px bottom -110px;
  background-size: 308px auto;
}
.stats .left.is-gif-playing {
  background-image: none;
}
@media (hover: hover) {
  .stats .left:hover {
    background-image: none;
  }
}
.stats .left .stats__video {
  width: 320px;
  height: auto;
  right: -40px;
  bottom: -110px;
  left: auto;
  top: auto;
}
.stats .right {
  color: #111111;
  background-color: #e7e2fd;
  background-image: url("/assets/illust/man.png");
  background-repeat: no-repeat;
  background-position: right -41px bottom -124px;
  background-size: 324px auto;
}
.stats .right.is-gif-playing {
  background-image: none;
}
@media (hover: hover) {
  .stats .right:hover {
    background-image: none;
  }
}
.stats .right .stats__video {
  width: 388px;
  height: auto;
  right: -73px;
  bottom: -123px;
  left: auto;
  top: auto;
}
.stats .right p {
  font-size: var(--font-24px);
  font-weight: 700;
  line-height: 1.4;
  margin: 0;
  position: relative;
  z-index: 1;
}

/* ===== 3열 기능 카드 ===== */
.features {
  padding-bottom: 24px;
}
.features .feature {
  font-weight: 700;
  min-height: 218px;
  background: #f9fafc;
  border-radius: 20px;
  padding: 0;
  border: #f5f5f7 1px solid;
  position: relative;
  transform: translateY(0);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  box-shadow: none;
}
.features .feature:hover, .features .feature:focus-within {
  transform: translateY(-5px);
  box-shadow: 0 10px 24px rgba(20, 30, 50, 0.08);
  border-color: rgba(20, 30, 50, 0.08);
}
.features .feature .feature__link {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  height: 100%;
  min-height: inherit;
  padding: 36px 110px 36px 24px;
  border-radius: inherit;
  color: inherit;
  text-decoration: none;
}
.features .feature .chip {
  background: #111111;
  color: #fff;
  font-size: var(--font-14px);
  border-radius: 24px;
  padding: 4px 10px;
  text-align: center;
}
.features .feature h3 {
  font-size: var(--font-24px);
  color: #111111;
  margin: 10px 0;
  line-height: 1.2;
}
.features .feature p {
  color: #666666;
  margin: 0;
  line-height: 1.4;
  font-size: var(--font-16px);
  font-weight: 500;
}
.features .loan-1 {
  background: #f9fafc right bottom/180px no-repeat url("/assets/illust/loan-1.png");
}
.features .loan-2 {
  background: #f9fafc right bottom/180px no-repeat url("/assets/illust/loan-2.png");
}
.features .loan-3 {
  background: #f9fafc right bottom/180px no-repeat url("/assets/illust/loan-3.png");
}

/* === [MERGED] Loan features 3-up grid (PC) / single column (Mobile) === */
.features__list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
.features__list .feature {
  height: 100%;
}

@media (min-width: 1024px) {
  .features__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
  }
}
/* 푸터 배경/여백은 layout/_footer.scss에서 관리 */
/* === Info 3-up grid (notice/cs/media) === */
.info .info__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
@media (min-width: 1024px) {
  .info .info__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
  }
}
@media (max-width: 1023px) {
  .info .notice__list li .tit {
    width: 70vw;
  }
  .info p {
    font-size: var(--font-24px);
    line-height: 1.4;
    font-weight: 600;
  }
}
.info .info__card {
  height: 100%;
  border-radius: 20px;
  background: #fff;
  border: #e2e5eb 1px solid;
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 162px;
}
.info .info__head {
  display: flex;
  flex-direction: row;
}
.info .info__head h3 {
  font-size: var(--font-18px);
  font-weight: 700;
  margin: 0;
  margin-right: 8px;
}
.info .info__head span::after {
  content: ">";
  font-size: 17px;
  font-weight: 700;
}
.info .info__head a {
  display: flex;
}
.info .notice__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.info {
  /* li는 테두리만 */
}
.info .notice__list li {
  border-top: 1px solid #f0f2f5;
}
.info .notice__list li:first-child {
  border-top: 0;
}
.info {
  /* ✅ 실제 레이아웃은 a가 담당 (세로로 제목 + 날짜) */
}
.info .notice__list li > a {
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-decoration: none;
  color: inherit;
  padding: 6px 0;
}
.info {
  /* 제목 공통 스타일 */
}
.info .notice__list .tit {
  font-size: var(--font-16px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}
.info .notice__list li > a:hover .tit {
  font-weight: 600;
}
.info {
  /* 날짜 */
}
.info .notice__list time {
  color: #8a94a6;
  font-size: var(--font-14px);
  white-space: nowrap;
}
.info .info__links {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: space-evenly;
}
.info .info__links a {
  font-size: var(--font-16px);
  width: 30%;
  text-align: center;
  position: relative;
  display: inline-block;
}
.info .info__links a img {
  width: 30px;
  height: 40px;
  margin: auto;
  padding-bottom: 10px;
}
.info .info__links a:hover {
  font-weight: 600;
}
.info .info__links span:first-child, .info .info__links span:last-child {
  display: none;
}
.info .info__links span::after {
  content: "|";
  color: #e2e5eb;
}
.info .info__links .cs__item {
  transition: transform 0.3s ease;
}
.info .info__links .cs__item:hover img, .info .info__links .cs__item:focus img {
  animation: bounce 0.6s ease-in-out;
}
.info .info__links .media__item {
  filter: grayscale(1) brightness(1) invert(0);
  transition: filter 0.1s ease;
}
.info .info__links .media__item:hover, .info .info__links .media__item:focus {
  filter: none;
}

@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }
  30% {
    transform: translateY(-8px);
  }
  50% {
    transform: translateY(0);
  }
  70% {
    transform: translateY(-4px);
  }
  90% {
    transform: translateY(0);
  }
}
/* === [MERGED] Tabs visibility (active only) === */
.tabs__panels .tabs__panel {
  display: none;
}

.tabs__panels .tabs__panel.is-active {
  display: block;
}

/* === [MERGED] Info 3-up grid (notice / cs / media) above footer === */
.info .info__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

@media (min-width: 1024px) {
  .info .info__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
  }
}
/* === Patch 2025-10-20: Carousel right-clipping/left-shift fix === */
.pcarousel__track {
  align-items: stretch;
}

.pcarousel__card {
  min-width: 0;
}

.intro-hero {
  padding: 40px 0 60px;
}
@media (max-width: 768px) {
  .intro-hero {
    padding: 40px 0 60px;
  }
}

.intro-hero__text {
  margin: 0 0 60px;
  font-size: 18px;
  font-weight: 800;
  color: #111111;
  line-height: 1.8;
}
.intro-hero__text strong {
  color: #2563eb;
}
@media (max-width: 768px) {
  .intro-hero__text {
    font-size: 16px;
  }
}

.intro-hero__cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}
@media (max-width: 900px) {
  .intro-hero__cards {
    grid-template-columns: 1fr;
  }
}

.intro-card {
  position: relative;
  border-radius: 24px;
  padding: 28px 28px 24px;
  background: #fff;
  box-shadow: 0 1px 1px rgba(20, 46, 90, 0.08);
  min-height: 210px;
  text-align: left;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: translateY(25px);
  opacity: 0;
  transition: transform 0.4s ease, box-shadow 0.3s ease, opacity 0.4s ease;
}
.intro-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 6px 4px rgba(20, 46, 90, 0.12);
}
@media (max-width: 768px) {
  .intro-card {
    padding: 24px;
  }
}

.intro-01 {
  background: #dcf2fe url(/assets/illust/intro-01.png) no-repeat right 24px top 36px/150px auto;
  border: 1px solid #caefff;
}

.intro-02 {
  background: #eae8fc url(/assets/illust/intro-02.png) no-repeat left 24px top 36px/150px auto;
  border: 1px solid #dedeff;
}

.intro-03 {
  background: #dcfcdb url(/assets/illust/intro-03.png) no-repeat right 24px top 36px/150px auto;
  border: 1px solid #dcf2da;
}

.intro-04 {
  background: #faffcf url(/assets/illust/intro-04.png) no-repeat left 24px top 36px/150px auto;
  border: 1px solid #f4f4bd;
}

@media (min-width: 900px) {
  .intro-02,
  .intro-04 {
    padding-left: 200px;
    background-position: left 24px top 36px;
  }
}
@media (max-width: 899px) {
  .intro-01,
  .intro-02,
  .intro-03,
  .intro-04 {
    background-position: right 16px top 28px;
    background-size: 130px auto;
  }
}
.intro-card--visible {
  opacity: 1;
  transform: translateY(0);
}

.intro-card__head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
}
.intro-card__head h3 {
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
  margin: 0;
}

.intro-card__badge {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(32, 144, 255, 0.18), rgba(255, 101, 132, 0.18));
  color: #111111;
  font-weight: 700;
  font-size: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.intro-card__body {
  font-size: 16px;
  font-weight: 500;
}
.intro-card__body ul {
  margin: 0;
  padding-left: 24px;
  color: #666666;
}
.intro-card__body ul li {
  list-style-type: disc;
}
.intro-card__body ul li + li {
  margin-top: 6px;
}

.intro-card__art {
  width: 120px;
  height: 90px;
  border-radius: 18px;
  margin-top: auto;
  margin-left: auto;
  background: linear-gradient(135deg, rgba(32, 144, 255, 0.18), rgba(255, 101, 132, 0.18));
}

.intro-loan {
  padding: 30px 0 80px;
}
@media (max-width: 768px) {
  .intro-loan {
    padding-bottom: 40px;
  }
}

.intro-loan__head {
  text-align: left;
  margin-bottom: 40px;
}
.intro-loan__head h2 {
  font-size: clamp(21px, 3vw, 24px);
  margin: 0 0 12px;
  font-weight: 800;
}
.intro-loan__head p {
  font-size: clamp(16px, 3vw, 18px);
  color: #666666;
}

.intro-loan__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 36px;
}
@media (max-width: 1024px) {
  .intro-loan__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 768px) {
  .intro-loan__grid {
    grid-template-columns: 1fr;
  }
}

.loan-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 408px;
  border-radius: 24px;
  background: #fff;
  transform: translateY(25px);
  opacity: 0;
  transition: transform 0.4s ease, box-shadow 0.3s ease, opacity 0.4s ease;
}
.loan-card__head {
  display: flex;
  flex-direction: column;
}
.loan-card__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0;
  font-size: 21px;
  font-weight: 700;
  background: #fff;
  padding: 12px 0;
  cursor: pointer;
  transition: color 0.16s ease;
}
.loan-card__link:hover {
  color: #2563eb;
}
.loan-card ul {
  color: #666666;
}
.loan-card ul li {
  list-style-type: disc;
  margin-left: 24px;
  font-size: 16px;
  font-weight: 500;
}
.loan-card ul li + li {
  margin-top: 6px;
}

.intro-card--visible.loan-card,
.loan-card.intro-card--visible {
  opacity: 1;
  transform: translateY(0);
}

.loan-card__arrow {
  font-size: 24px;
  display: inline-flex;
  transition: transform 0.2s ease;
}

.loan-card__link:hover .loan-card__arrow {
  animation: loan-card-arrow 0.7s ease-in-out infinite;
  color: #2563eb;
  font-weight: 900;
}

@keyframes loan-card-arrow {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(-15px);
  }
  100% {
    transform: translateX(0);
  }
}
.loan-card__label {
  display: none;
}

.loan-card__desc {
  color: #666666;
  font-size: 16px;
  font-weight: 500;
  margin: 4px 0 36px;
}

.loan-card__foot {
  min-height: 260px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-radius: 20px;
  padding: 28px 24px 30px;
  background: #f7f8fb;
}

.loan-card__btn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 12px 28px;
  border-radius: 999px;
  background: #2563eb;
  border: 1px solid #2563eb;
  color: #fff;
  font-weight: 600;
  transition: background-color 0.16s ease, color 0.16s ease, transform 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 1px 1px rgba(20, 46, 90, 0.3);
}
.loan-card__btn:hover {
  color: #2563eb;
  background: #fff;
  transform: translateY(-4px);
  box-shadow: 0 4px 3px rgba(20, 46, 90, 0.5);
}

/* Stock Loan Section ============================ */
.stock-motion-ready [data-stock-motion] {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.5s ease, transform 0.6s ease;
}
.stock-motion-ready [data-stock-motion].is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .stock-motion-ready [data-stock-motion] {
    opacity: 1 !important;
    transform: none !important;
  }
}
.stock-hero {
  padding: 80px 0 40px;
}
@media (max-width: 1024px) {
  .stock-hero {
    grid-template-columns: 1fr;
    text-align: left;
  }
}
.stock-hero__eyebrow {
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #2563eb;
  font-weight: 600;
  margin-bottom: 16px;
}
.stock-hero__title {
  font-size: clamp(32px, 4vw, 44px);
  font-weight: 800;
  margin: 0 0 24px;
  color: #111111;
}
.stock-hero__desc {
  font-size: 18px;
  font-weight: 700;
  color: #111111;
  margin: 0 0 8px;
  line-height: 1.7;
}
.stock-hero__bullets {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 32px 0 0;
  padding: 0;
  list-style: none;
}
.stock-hero__bullets li {
  background: rgba(32, 144, 255, 0.08);
  color: #2563eb;
  font-weight: 600;
  padding: 10px 18px;
  border-radius: 999px;
}
.stock-hero__cta {
  margin-top: 32px;
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.stock-hero__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 52px;
  padding: 0 32px;
  border-radius: 999px;
  background: #2563eb;
  color: #fff;
  font-weight: 600;
  box-shadow: 0 18px 30px rgba(32, 144, 255, 0.35);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.stock-hero__btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 22px 36px rgba(32, 144, 255, 0.35);
}
.stock-hero__contact {
  display: flex;
  flex-direction: column;
  font-weight: 600;
  color: #111111;
  line-height: 1.2;
}
.stock-hero__contact a {
  font-size: 24px;
  color: inherit;
}
.stock-hero__art {
  justify-self: end;
  background: #fff;
  border-radius: 32px;
  padding: 32px;
  box-shadow: 0 30px 60px rgba(15, 23, 42, 0.12);
}
.stock-hero__art img {
  width: min(420px, 100%);
  height: auto;
  display: block;
}
@media (max-width: 1024px) {
  .stock-hero__art {
    justify-self: stretch;
  }
}

.stock-benefits {
  padding: 40px 0 80px;
}
.stock-benefits__head {
  text-align: left;
  margin-bottom: 48px;
}
.stock-benefits__head h2 {
  font-size: clamp(21px, 3vw, 24px);
  margin: 0 0 12px;
}
.stock-benefits__head p {
  font-size: clamp(16px, 3vw, 18px);
  color: #666666;
  margin: 0;
}
.stock-benefits__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}
@media (max-width: 768px) {
  .stock-benefits__grid {
    grid-template-columns: 1fr;
  }
}

.stock-benefit {
  background: #fff;
  border-radius: 24px;
  padding: 32px;
  border: 1px solid rgba(16, 24, 39, 0.08);
  box-shadow: 0 18px 40px rgba(17, 24, 39, 0.08);
  min-height: 192px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.stock-benefit__title {
  font-size: 20px;
  font-weight: 700;
  position: relative;
  padding-bottom: 22px;
  margin: 0;
}
.stock-benefit__title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 36px;
  height: 3px;
  background: #2563eb;
}
.stock-benefit p {
  margin: 0;
  color: #666666;
  line-height: 1.7;
}

.stock-steps {
  padding: 20px 0 120px;
}
.stock-steps__head {
  text-align: left;
  margin-bottom: 48px;
}
.stock-steps__head h2 {
  font-size: clamp(21px, 3vw, 24px);
  margin: 0 0 12px;
}
.stock-steps__head p {
  font-size: clamp(16px, 3vw, 18px);
  color: #666666;
  margin: 0;
}
.stock-steps__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 80px;
}
@media (max-width: 960px) {
  .stock-steps__grid {
    grid-template-columns: 1fr;
    gap: 60px;
  }
}

.stock-step {
  background: #fff;
  border-radius: 24px;
  text-align: center;
  box-shadow: 0 22px 50px rgba(15, 23, 42, 0.08);
  position: relative;
  text-align: left;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 400px;
  border: 1px solid rgba(16, 24, 39, 0.06);
}
.stock-step .top-left {
  padding: 32px;
  min-height: 200px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.stock-step__title {
  display: flex;
  align-items: center;
  font-size: 20px;
  font-weight: 700;
  margin: 0 0 12px;
  gap: 10px;
}
.stock-step__index {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: rgba(32, 144, 255, 0.1);
  color: #2563eb;
  font-weight: 700;
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.stock-step h3 {
  margin: 0;
}
.stock-step__desc {
  margin: 0;
  color: #666666;
  line-height: 1.7;
}
.stock-step img {
  width: min(160px, 70%);
  margin: 24px auto 0;
  display: block;
}
.stock-step .bottom-right {
  min-height: 200px;
  border-radius: 0 0 24px 24px;
}
.stock-step .step-01 {
  background: #fcefe5 url(/assets/illust/stock-01.png) no-repeat center bottom -2px/220px auto;
}
.stock-step .step-02 {
  background: #fcefe5 url(/assets/illust/stock-02.png) no-repeat center bottom -2px/220px auto;
}
.stock-step .step-03 {
  background: #fcefe5 url(/assets/illust/stock-03.png) no-repeat center bottom -2px/220px auto;
}
@media (min-width: 961px) {
  .stock-step + .stock-step::before {
    content: "";
    position: absolute;
    left: -46px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 16px solid rgba(20, 46, 90, 0.8);
  }
}
@media (max-width: 960px) {
  .stock-step {
    flex-direction: row;
    align-items: stretch;
    min-height: 200px;
  }
  .stock-step .top-left {
    padding: 24px;
    width: 55%;
  }
  .stock-step .bottom-right {
    width: 45%;
    border-radius: 0 24px 24px 0;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 0 12px 12px;
  }
  .stock-step + .stock-step {
    margin-top: 28px;
  }
  .stock-step + .stock-step::before {
    content: "";
    position: absolute;
    top: -52px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 16px solid rgba(20, 46, 90, 0.8);
  }
}
@media (max-width: 450px) {
  .stock-step .stock-step__index {
    width: 36px;
    height: 36px;
    font-size: 16px;
    border-radius: 8px;
  }
  .stock-step .stock-step__title {
    font-size: 18px;
  }
  .stock-step .stock-step__desc {
    font-size: 14px;
    line-height: 1.5;
  }
}
@media (max-width: 600px) {
  .stock-step .step-01,
  .stock-step .step-02,
  .stock-step .step-03 {
    background-size: clamp(140px, 40vw, 200px) auto;
  }
}

/* =========================================================
    HI STOCK LOAN — Main SCSS (reorganized)
    Global Reset + Base Font + Color Scheme
========================================================= */
/* ① SCSS Modules (모든 @use는 최상단) */
/* ② 테마 & 공통 모듈 */
.sub-head {
  position: relative;
  z-index: 50;
  padding: 140px 0 90px;
}
@media (max-width: 768px) {
  .sub-head {
    padding: 30px 0 50px;
  }
}
.sub-head::before {
  content: "";
  position: absolute;
  top: 0px;
  left: 50%;
  width: 100vw;
  height: 1px;
  background: #e2e6ea;
  transform: translateX(-50%);
  z-index: 0;
}
.sub-head {
  /* 실제 안의 글자가 라인 위로 오게 */
}
.sub-head::after {
  content: "";
  position: absolute;
  top: 40px;
  left: 50%;
  width: 100vw;
  height: 1px;
  background: #e2e6ea;
  transform: translateX(-50%);
  z-index: 0;
}
.sub-head .sub-head__path {
  font-size: 16px;
  font-weight: 500;
  color: #666666;
  position: absolute;
  top: 4px;
  right: 0;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 14px;
  z-index: 80;
}
.sub-head .sub-head__path a {
  width: 14px;
  height: 14px;
  background: url(/assets/icons/icon_home.svg) no-repeat 50%/14px;
}
.sub-head .sub-head__parent {
  font-weight: 500;
}
.sub-head .sub-head__sep {
  color: #c9c9c9;
}
.sub-head .sub-head__select {
  color: #111111;
  font-weight: 400;
  background: #fff;
  padding: 4px 30px 4px 10px;
  line-height: 1.4;
  appearance: none;
  /* ▼ */
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='9' viewBox='0 0 10 9' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 2L9 2L5 8L1 2Z' fill='%23303030'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 14px 14px;
}
.sub-head {
  /* 모바일일 때는 폭을 조금 키워서 보기 쉽게 */
}
@media (max-width: 768px) {
  .sub-head::before {
    display: none;
  }
  .sub-head::after {
    display: none;
  }
  .sub-head .sub-head__path {
    display: none;
  }
}
.sub-head .sub-head__title {
  font-size: 32px;
  font-weight: 800;
  color: #080a0c;
  text-align: center;
}
@media (max-width: 768px) {
  .sub-head .sub-head__title {
    font-size: 26px;
  }
}

.sub-select {
  position: relative;
  width: 140px;
  z-index: 3;
}

.sub-select__btn {
  width: 100%;
  background: #fff;
  min-height: 30px;
  padding: 4px 10px 4px 0;
  text-align: left;
  color: #303030;
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  position: relative;
}

.sub-select__icon {
  position: absolute;
  right: 0;
  width: 10px;
  height: 9px;
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='9' viewBox='0 0 10 9' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 2L9 2L5 8L1 2Z' fill='%23303030'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  transition: transform 0.15s ease-out;
}

.sub-select.is-open .sub-select__icon {
  transform: rotate(180deg);
}

.sub-select__list {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: #fff;
  border-top: 1px solid #000;
  border-radius: 0 0 10px 10px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
  list-style: none;
  display: none;
  z-index: 90;
}

.sub-select.is-open .sub-select__list {
  display: block;
}

.sub-select__list li {
  padding: 8px 10px;
  cursor: pointer;
  white-space: nowrap;
  font-size: 13px;
  color: #303030;
}
.sub-select__list li:first-child {
  padding-top: 10px;
}
.sub-select__list li:last-child {
  padding-bottom: 10px;
  border-radius: 0 0 10px 10px;
}

.sub-select__list li:hover {
  background: #f6f8fb;
}

.sub-select__list li.is-active {
  background: #f1f1f1;
  font-weight: 700;
}

/* 숨김 select */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  padding: 0;
  margin: 0;
}

.brand-section {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px 56px;
}
.brand-section + .brand-section {
  padding-top: 60px;
}
@media (max-width: 768px) {
  .brand-section {
    padding-bottom: 46px;
  }
}

.section-title {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 40px;
  position: relative;
}
.section-title::after {
  content: "";
  display: block;
  width: 50px;
  height: 3px;
  background: #000;
  margin-top: 30px;
}

.section-sub-title {
  font-size: 21px;
  font-weight: 400;
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 20px;
}
.section-sub-title:after {
  content: "";
  flex: 1;
  height: 1px;
  background: #000;
  width: 100%;
  margin-top: 2px;
}

.section-body {
  line-height: 1.7;
  color: #242b33;
  font-size: 16px;
  margin-bottom: 60px;
}
.section-body p + p {
  margin-top: 1.2rem;
}

/* BI */
.bi-wrap {
  margin-top: 32px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}
@media (max-width: 1199px) {
  .bi-wrap {
    grid-template-columns: 1fr;
  }
}

.bi-wrap .bi-concept {
  margin-bottom: 60px;
}
.bi-wrap .bi-title {
  font-size: 16px;
  font-weight: 500;
  margin: 20px 0 30px;
}
.bi-wrap .bi-concept-text {
  font-size: 21px;
  font-weight: 300;
  color: #000;
  line-height: 2.5;
}
.bi-wrap .bi-concept-text strong {
  font-weight: 700;
}

.bi-elements {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 120px;
}
@media (max-width: 768px) {
  .bi-elements {
    grid-template-columns: 1fr;
  }
}
.bi-elements {
  position: relative;
}
.bi-elements::before {
  content: "+";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 46px;
  font-weight: 100;
  line-height: 1;
  color: #aaaaaa;
  pointer-events: none;
  z-index: 0;
}

.bi-box {
  height: 160px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  background-image: linear-gradient(#dbdbdb, #dbdbdb);
  background-repeat: no-repeat;
  background-size: 100% 1px;
  background-position: 50% 83px;
  padding-top: 12px;
  gap: 66px;
}
@media (max-width: 768px) {
  .bi-box.invert {
    flex-direction: column-reverse;
    background-position: 50% 86px;
  }
}
.bi-box .bi-element {
  height: 36px;
}
.bi-box .bi-word {
  font-size: 21px;
  font-weight: 700;
  color: #111111;
}
.bi-box .bi-text {
  font-size: 16px;
  font-weight: 500;
  color: #666666;
  text-align: center;
}

.bi-keyword {
  margin-bottom: 60px;
  padding-bottom: 30px;
}

.keyword-elements, .symbol-elements {
  display: flex;
  gap: 120px;
  align-items: stretch;
}
.keyword-elements .bi-box, .symbol-elements .bi-box {
  position: relative;
  flex: 1 1 0;
  height: 120px;
  padding-top: 0;
  background-position: 50% 63px;
  gap: 65px;
}
.keyword-elements .bi-box:not(:last-child)::after, .symbol-elements .bi-box:not(:last-child)::after {
  content: "+";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 46px;
  font-weight: 100;
  line-height: 1;
  color: #aaaaaa;
  pointer-events: none;
  z-index: 1;
}
@media (min-width: 769px) {
  .keyword-elements .bi-box:not(:last-child)::after, .symbol-elements .bi-box:not(:last-child)::after {
    right: -74px;
  }
}

@media (max-width: 768px) {
  .keyword-elements {
    flex-direction: column;
    gap: 80px;
  }
  .keyword-elements .bi-box {
    flex-direction: row;
    background-size: 1px 100%;
    background-position: 160px 50%;
    gap: 3vw;
  }
  .keyword-elements .bi-box .bi-word {
    min-width: 148px;
    text-align: center;
  }
  .keyword-elements .bi-box .bi-text {
    text-align: left;
    padding-left: 6px;
  }
  .keyword-elements .bi-box:not(:last-child)::after {
    top: auto;
    bottom: -80px;
    left: 62px;
  }
}
.bi-logotype .bi-elements {
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
}
.bi-logotype .bi-elements::before {
  display: none;
}
@media (max-width: 768px) {
  .bi-logotype .bi-elements {
    grid-template-columns: 1fr;
  }
}

.logo-card {
  height: 218px;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.logo-card.grid {
  background-image: repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0.1) 0, rgba(0, 0, 0, 0.1) 1px, transparent 1px, transparent 5px), repeating-linear-gradient(to right, rgba(0, 0, 0, 0.1) 0, rgba(0, 0, 0, 0.1) 1px, transparent 1px, transparent 5px);
  border: 1px solid #dbdbdb;
}
.logo-card.dark {
  background: #1b3764;
}
.logo-card.navy {
  background: #0e1c73;
}
.logo-card .type-normal {
  height: 74px;
}
.logo-card .type-variant {
  height: 36px;
}
.logo-card .logo-type {
  height: 56px;
}

.note {
  margin-top: 14px;
  font-size: 14px;
  font-weight: 500;
  color: #8792a0;
}

.symbol-elements .bi-box {
  height: 290px;
  background-position: 50% 178px;
}
.symbol-elements .bi-box:first-child img {
  height: 36px;
  margin-top: 102px;
}
.symbol-elements .bi-box:nth-child(2) {
  background: transparent url(/assets/illust/ci-symbol.png) no-repeat 50% top/120px;
}
.symbol-elements .bi-box:nth-child(2) .bi-text {
  width: 100%;
}
.symbol-elements .bi-box:nth-child(2) .bi-text:first-child {
  width: 50%;
  position: absolute;
  top: 20px;
  text-align: left;
  padding-bottom: 20px;
  background-image: linear-gradient(to right, #dbdbdb 20px, #f3f5f8 50%);
  background-repeat: no-repeat;
  background-size: 100% 1px;
  background-position: 50% 35px;
  transform: translateX(-50%);
}
.symbol-elements .bi-box:nth-child(2) .bi-text:nth-child(2) {
  position: absolute;
  width: 50%;
  bottom: 70px;
  text-align: right;
  padding-top: 20px;
  background-image: linear-gradient(to left, #dbdbdb 20px, #f3f5f8 50%);
  background-repeat: no-repeat;
  background-size: 100% 1px;
  background-position: -50% 10px;
  transform: translateX(50%);
}
.symbol-elements .bi-box:nth-child(2) .bi-text:last-child {
  position: absolute;
}
@media (min-width: 769px) {
  .symbol-elements .bi-box:nth-child(2) .bi-text:last-child {
    bottom: 0;
  }
}
.symbol-elements .bi-box:last-child img {
  height: 42px;
  margin-top: 102px;
}
.symbol-elements .bi-box:not(:last-child)::after {
  top: 118px;
}

@media (max-width: 768px) {
  .symbol-elements {
    flex-direction: column;
    gap: 90px;
  }
  .symbol-elements .bi-box.invert {
    flex-direction: column-reverse;
    background-position: right 50% bottom 68px;
  }
  .symbol-elements .bi-box:first-child img {
    margin-top: 0px;
  }
  .symbol-elements .bi-box:first-child::after {
    top: 166px;
  }
  .symbol-elements .bi-box:nth-child(2) {
    flex: 1 1 236px;
  }
  .symbol-elements .bi-box:nth-child(2)::after {
    top: 256px;
  }
  .symbol-elements .bi-box:nth-child(2) .bi-text:nth-child(2) {
    bottom: 20px;
  }
  .symbol-elements .bi-box:nth-child(2) .bi-text:last-child {
    top: 0;
    right: 0;
    text-align: right;
    width: 74px;
  }
  .symbol-elements .bi-box:last-child img {
    margin-top: 0px;
  }
  .symbol-elements .bi-box:last-child {
    background-position: right 50% top 73px;
  }
  .symbol-elements .bi-box:not(:last-child)::after {
    left: 50%;
    transform: translateX(-50%);
  }
}
/* S&C systems 부분 */
.snc-flex {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 32px;
  margin-top: 26px;
}
@media (max-width: 1200px) {
  .snc-flex {
    grid-template-columns: 1fr;
  }
}

.snc-mark {
  background: #f6f8fb;
  border: 1px solid #edf0f4;
  border-radius: 16px;
  padding: 18px 20px 22px;
}
.snc-mark .snc-mark-title {
  font-weight: 600;
  margin-bottom: 6px;
}
.snc-mark .snc-mark-desc {
  font-size: 14px;
  color: #49525e;
  line-height: 1.6;
}

.snc-logo-bar {
  margin-top: 22px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 768px) {
  .snc-logo-bar {
    grid-template-columns: 1fr;
  }
}

.snc-logo {
  border: 1px solid #dde1e6;
  border-radius: 12px;
  min-height: 90px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 8px;
}
.snc-logo.dark {
  background: #0f2142;
}
.snc-logo .snc-logo-name {
  font-weight: 600;
  color: #0f2142;
}
.snc-logo.dark .snc-logo-name {
  color: #fff;
}

/* =========================================================
    HI STOCK LOAN — Main SCSS (reorganized)
    Global Reset + Base Font + Color Scheme
========================================================= */
/* ① SCSS Modules (모든 @use는 최상단) */
/* ② 테마 & 공통 모듈 */
.vision-sec {
  padding: 60px 0 0;
  background: #fff;
}
.vision-sec .vision-sec__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;
}
.vision-sec .vision-sec__inner .vision-text {
  margin-bottom: 28px;
}
.vision-sec .vision-sec__inner .vision-text .section-lead {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 40px;
  position: relative;
}
.vision-sec .vision-sec__inner .vision-text .section-lead span {
  font-weight: 300;
}
.vision-sec .vision-sec__inner .vision-text .section-lead::after {
  content: "";
  display: block;
  width: 50px;
  height: 3px;
  background: #000;
  margin-top: 30px;
}
.vision-sec .vision-sec__inner .vision-text .section-text {
  line-height: 1.7;
  color: #242b33;
  font-size: 16px;
  margin-bottom: 30px;
}
.vision-sec .vision-sec__inner .vision-text .section-text p + p {
  margin-top: 1.2rem;
}
.vision-sec .vision-sec__inner {
  /* 0단계: 안 보이는 상태에서 가운데 1자만 있는 느낌 */
}
.vision-sec .vision-sec__inner .vision-imgbox {
  position: relative;
  overflow: hidden;
  /* top right bottom left */
  /* 위·아래는 32px, 좌우는 50% → 가운데 세로줄만 남음 */
  clip-path: inset(30% 50% 30% 50% round 50px);
  transition: clip-path 0.9s ease;
  background: #fff;
}
.vision-sec .vision-sec__inner .vision-imgbox img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}
.vision-sec .vision-sec__inner .vision-imgbox {
  /* 1단계: 우리가 처음에 보고 싶었던 둥근 창 */
}
.vision-sec .vision-sec__inner .vision-imgbox.is-stage1 {
  clip-path: inset(30% 24px 30% 24px round 50px);
}
.vision-sec .vision-sec__inner .vision-imgbox {
  /* 2단계: 완전 펼침 (직사각형) */
}
.vision-sec .vision-sec__inner .vision-imgbox.is-open {
  clip-path: inset(0 0 0 0 round 0);
}

@media (max-width: 768px) {
  .vision-sec .vision-sec__inner {
    /* 0단계: 안 보이는 상태에서 가운데 1자만 있는 느낌 */
  }
  .vision-sec .vision-sec__inner .vision-imgbox {
    position: relative;
    overflow: hidden;
    /* top right bottom left */
    /* 위·아래는 32px, 좌우는 50% → 가운데 세로줄만 남음 */
    clip-path: inset(30% 50% 30% 50% round 20px);
    transition: clip-path 0.9s ease;
    background: #fff;
  }
  .vision-sec .vision-sec__inner .vision-imgbox img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
  }
  .vision-sec .vision-sec__inner .vision-imgbox {
    /* 1단계: 우리가 처음에 보고 싶었던 둥근 창 */
  }
  .vision-sec .vision-sec__inner .vision-imgbox.is-stage1 {
    clip-path: inset(30% 12px 30% 12px round 20px);
  }
  .vision-sec .vision-sec__inner .vision-imgbox {
    /* 2단계: 완전 펼침 (직사각형) */
  }
  .vision-sec .vision-sec__inner .vision-imgbox.is-open {
    clip-path: inset(0 0 0 0 round 0);
  }
}
/* =========================================================
    HI STOCK LOAN — Main SCSS (reorganized)
    Global Reset + Base Font + Color Scheme
========================================================= */
/* ① SCSS Modules (모든 @use는 최상단) */
/* ② 테마 & 공통 모듈 */
.ethics-sec {
  padding: 60px 0;
  background: #fff;
}
.ethics-sec .ethics-sec__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;
}
.ethics-sec .ethics-sec__inner .ethics-text {
  margin-bottom: 28px;
}
.ethics-sec .ethics-sec__inner .ethics-text .section-lead {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 40px;
  position: relative;
}
.ethics-sec .ethics-sec__inner .ethics-text .section-lead span {
  font-weight: 300;
}
.ethics-sec .ethics-sec__inner .ethics-text .section-lead::after {
  content: "";
  display: block;
  width: 50px;
  height: 3px;
  background: #000;
  margin-top: 30px;
}
.ethics-sec .ethics-sec__inner .ethics-text .section-text {
  line-height: 1.7;
  color: #242b33;
  font-size: 16px;
  margin-bottom: 30px;
}
.ethics-sec .ethics-sec__inner .ethics-text .section-text p + p {
  margin-top: 1.2rem;
}
.ethics-sec .ethics-sec__inner .ethics-text .ethics-subtitle {
  font-size: 21px;
  font-weight: 700;
  margin: 0 0 10px;
  position: relative;
}
.ethics-sec .ethics-sec__inner .ethics-text .ethics-subtitle span {
  font-weight: 300;
}
.ethics-sec .ethics-sec__inner .ethics-text .ethics-subtitle::after {
  content: "";
  display: block;
  width: 30px;
  height: 1px;
  background: #000;
  margin-top: 10px;
}
.ethics-sec .ethics-sec__inner .ethics-text li {
  margin-bottom: 40px;
}
.ethics-sec .ethics-sec__inner .ethics-imgbox {
  width: 100%;
  padding: 0 15%;
}
.ethics-sec .ethics-sec__inner .ethics-imgbox img {
  width: 100%;
  height: auto;
  display: block;
}
.ethics-sec + .ethics-sec {
  padding: 0;
  margin-bottom: 160px;
}

@media (max-width: 768px) {
  .ethics-sec .ethics-sec__inner .ethics-imgbox {
    padding: 0;
  }
}
/* ===== 파라미터 ===== */
/* ===== 루트 ===== */
.semi-ethics {
  --size: 720px;
  --bleed: clamp(20px, 4vw, 80px); /* 아래 여유 */
  /* 핵심 비율 변수 */
  --cap-dia: 50%; /* 캡 = 외경의 50% (D=100 -> 50, D=50 -> 25) */
  --hub-cap: 0.7; /* 허브 = 캡의 50% (넓을 때), 좁아질수록 ↑ (아래 컨테이너 쿼리) */
  width: min(100%, var(--size));
  aspect-ratio: 2/1; /* 반원 프레임 */
  position: relative;
  overflow: visible; /* arc만 클립, 캡/허브는 밖에 배치 */
  background: #fff;
  margin: 0 auto;
  padding-bottom: var(--bleed);
  /* 이 요소 자체를 컨테이너로: 내부에서 cqi 사용 가능 */
  container-type: inline-size;
}

/* 반원을 이 뷰포트에서만 클리핑 */
.semi-ethics__viewport {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

/* 상단 반원 6등분(정원 1:1을 위쪽 절반만 보이게) */
.semi-ethics__arc {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  width: 100%;
  aspect-ratio: 1/1;
  border-radius: 50%;
  background: conic-gradient(from -90deg, #7ccbfa 0deg 30deg, #2fa2f3 30deg 60deg, #0091f4 60deg 90deg, #007be2 90deg 120deg, #1360bc 120deg 150deg, #004e96 150deg 180deg, transparent 180deg 360deg);
  z-index: 0;
}

/* 캡(큰 흰 원): 외경의 50% */
.semi-ethics__cap {
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translate(-50%, -50%); /* 지름선에 '중심' 맞춤 */
  width: var(--cap-dia); /* ⬅ D의 50% */
  aspect-ratio: 1/1;
  border-radius: 50%;
  background: #fff;
  filter: drop-shadow(0 -16px 6px rgba(0, 0, 0, 0.1));
  z-index: 2;
}

/* 허브(작은 흰 원): 캡 * hub-cap (좁아질수록 0.6~0.8까지 키움) */
.semi-ethics__hub {
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translate(-50%, -50%);
  width: calc(var(--cap-dia) * var(--hub-cap)); /* ⬅ Cap의 비율로 */
  aspect-ratio: 1/1;
  border-radius: 50%;
  background: #fff;
  filter: drop-shadow(0 16px 6px rgba(0, 0, 0, 0.1));
  display: grid;
  place-items: center;
  text-align: center;
  z-index: 3;
}
.semi-ethics__hub span {
  position: absolute;
  font-weight: 700;
  font-size: clamp(14px, 3.4vw, 24px);
  color: #0b1018;
  line-height: 1; /* 폰트 여백 제거 */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
}

/* ===== 컨테이너 쿼리로 허브 비율 조절 =====
   컨테이너(.semi-ethics)의 인라인 크기(=외경 D)에 따라 허브를 상대적으로 크게 */
@container (max-width: $bp-desktop) {
  .semi-ethics {
    --hub-cap: 0.6;
  } /* D가 작아지면 hub = 0.6 * cap (예: D=50 -> cap=25 -> hub=15) */
}
@container (max-width: $bp-tablet) {
  .semi-ethics {
    --hub-cap: 0.7;
  } /* 더 작아지면 0.7배 */
}
@container (max-width: 480px) {
  .semi-ethics {
    --hub-cap: 0.8;
  } /* 아주 좁을 때 0.8배 (예: D=50 -> cap=25 -> hub=20) */
}
/* 컨테이너 쿼리 지원이 약한 환경용 폴백(선택):
@media (max-width: 900px){ .semi-ethics{ --hub-cap: 0.6; } }
@media (max-width: 640px){ .semi-ethics{ --hub-cap: 0.7; } }
@media (max-width: 480px){ .semi-ethics{ --hub-cap: 0.8; } }
*/
/* 라벨 레이어: 원 '중심'을 지름선(컨테이너 하단 중앙)에 정확히 앉힘 */
.ethics__labels {
  position: absolute;
  left: 50%;
  top: 140%; /* 지름선에 중심을 둘 준비 */
  transform: translate(-50%, -50%); /* ▶ 원 '중심' = 컨테이너 하단 중앙 */
  width: 100%;
  aspect-ratio: 1/1; /* arc/cap/hub과 동일한 정원 좌표계 */
  list-style: none;
  margin: 0;
  padding: 0;
  pointer-events: none;
  z-index: 1; /* arc(0) 위, cap/hub(2/3) 아래로 두려면 1 */
  /* 이제 이 값은 "반지름(R) 대비 퍼센트"로 동작 */
  --label-radius: 76%; /* 바깥 링 가장자리 근처면 88~96% 추천 */
  --label-offset: 0px; /* 개별 라벨 미세 상하 보정 시 사용 */
}
.ethics__labels li {
  position: absolute;
  left: 50%;
  top: 50%;
  height: 50%; /* ◀ li 높이 = R(반지름) */
  transform-origin: center center;
  /* 중심에 앉힌 뒤 → 각도 회전 → R 기준 비율만큼 위로 → 수평 보정 */
  transform: translate(-50%, -50%) rotate(var(--angle)) translateY(calc(-1 * var(--label-radius))) translateY(var(--label-offset)) rotate(calc(-1 * var(--angle)));
  display: flex;
  align-items: flex-start;
  justify-content: center;
  text-align: center;
}
.ethics__labels span {
  display: inline-block;
  font-weight: 700;
  font-size: clamp(14px, 3.4vw, 24px);
  line-height: 1.2;
  color: #fff;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  white-space: nowrap;
  padding: 2px 4px;
}

/* 아주 좁은 화면에서 라벨을 살짝 더 안쪽으로 */
/* 가로 스크롤 차단 래퍼 */
.ethics-guard {
  overflow-x: clip;
  margin-bottom: 140px;
} /* 구형 브라우저면 hidden */
/* 폴백 기본 on */
.semi-ethics__fallback {
  display: block;
  width: 100%;
  aspect-ratio: 2/1;
}

.semi-ethics__fallback img {
  width: 100%;
  height: auto;
  display: block;
}

/* CSS 드로잉은 기본 off */
.semi-ethics__viewport,
.ethics__labels,
.semi-ethics__cap,
.semi-ethics__hub {
  display: none;
}

/* 필수 기능 지원 시 → CSS 드로잉 활성화, 이미지 숨김 */
@supports (aspect-ratio: 1/1) and (background: conic-gradient(from 0deg, red, blue)) and (clip-path: inset(0 round 0)) {
  .semi-ethics__fallback {
    display: none;
  }
  .semi-ethics__viewport,
  .ethics__labels,
  .semi-ethics__cap,
  .semi-ethics__hub {
    display: revert;
  } /* block/grid 등 원래 값 복원 */
}
/* 인쇄 시는 이미지가 깔끔: */
@media print {
  .semi-ethics__fallback {
    display: block !important;
  }
  .semi-ethics__viewport,
  .ethics__labels,
  .semi-ethics__cap,
  .semi-ethics__hub {
    display: none !important;
  }
}
.semi-ethics.is-enhanced .semi-ethics__fallback {
  display: none;
}

.semi-ethics.is-enhanced .semi-ethics__viewport,
.semi-ethics.is-enhanced .ethics__labels,
.semi-ethics.is-enhanced .semi-ethics__cap,
.semi-ethics.is-enhanced .semi-ethics__hub {
  display: revert;
}

/* ===== 라벨 순차 모션 ===== */
.ethics__labels {
  /* 모션 파라미터 */
  --stagger: 90ms; /* 항목별 지연 */
  --dur: .60s; /* 이동 시간 */
}

/* ① 초기 상태: 중앙에서 살짝 축소 + 투명 */
.ethics__labels li {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.88); /* 약간 축소 */
  transition: transform var(--dur) cubic-bezier(0.22, 0.95, 0.35, 1), opacity 0.38s ease-out;
  transition-delay: 0ms;
}

/* ② in-view 되면: 각도/반지름 위치로 이동 + 불투명 */
.ethics__labels.is-in li {
  opacity: 1;
  transform: translate(-50%, -50%) rotate(var(--angle)) translateY(calc(-1 * var(--label-radius))) translateY(var(--label-offset)) rotate(calc(-1 * var(--angle)));
}

/* ③ 항목별 지연(왼쪽→오른쪽 순차) */
.ethics__labels li:nth-child(1) {
  --i: 0;
}

.ethics__labels li:nth-child(2) {
  --i: 1;
}

.ethics__labels li:nth-child(3) {
  --i: 2;
}

.ethics__labels li:nth-child(4) {
  --i: 3;
}

.ethics__labels li:nth-child(5) {
  --i: 4;
}

.ethics__labels li:nth-child(6) {
  --i: 5;
}

.ethics__labels.is-in li {
  transition-delay: calc(var(--i) * var(--stagger));
}

/* 접근성: 모션 최소화 설정을 존중 */
@media (prefers-reduced-motion: reduce) {
  .ethics__labels li,
  .ethics__labels.is-in li {
    transition: none !important;
    transform: translate(-50%, -50%) rotate(var(--angle)) translateY(calc(-1 * var(--label-radius))) translateY(var(--label-offset)) rotate(calc(-1 * var(--angle)));
    opacity: 1;
  }
}
/* =========================================================
    HI STOCK LOAN — Main SCSS (reorganized)
    Global Reset + Base Font + Color Scheme
========================================================= */
/* ① SCSS Modules (모든 @use는 최상단) */
/* ② 테마 & 공통 모듈 */
/* ========= SECTION LAYOUT ========= */
.org-sec {
  padding: clamp(24px, 4vw, 60px) 0 80px;
  background: #fff;
}

/* 데스크탑에서는 조직도 섹션 자체를 화면 세로 가운데에 배치 */
@media (min-width: 768px) {
  .org-sec {
    /* 헤더+서브타이틀 높이에 맞춰 숫자 조정 가능 */
    min-height: calc(100vh - 260px);
    display: flex;
    align-items: center;
  }
}
/* ========= ORGMAP GRID (기본 = PC) ========= */
.orgmap {
  --gap: 48px;
  /* 기둥/칩 크기 공통 값 */
  --pillar-h: 1000px;
  --pillar-w: 84px;
  --edge-gap: 90px;
  --chip-w-team: 230px;
  --chip-w-group: 320px;
  --chip-bg-team: #eef2f6;
  --chip-ring-team:#f2f4f8;
  --chip-bg-group: #ffffff;
  --chip-ring-group:#e9edf2;
  /* JS에서 업데이트 해주는 가이드 값 */
  --rail-left: 50%;
  --guide-top: 0px;
  --guide-h: 0px;
  display: grid;
  grid-template-columns: 1fr minmax(72px, var(--pillar-w)) 1fr;
  grid-template-areas: ".      top     ." "left   pillar  right" "auditor bottom ."; /* 감사 = 좌측, 대표이사 = 가운데 열 */
  position: relative;
  /* 고객~대표이사 세로 점선 */
}
.orgmap::before {
  content: "";
  position: absolute;
  left: var(--rail-left);
  transform: translateX(-50%);
  top: var(--guide-top);
  height: var(--guide-h);
  pointer-events: none;
  z-index: 0;
  border-left: 2px dashed #d5dae5;
}

/* 영역 매핑 (기본 = PC) */
.orgmap__node--top {
  grid-area: top;
}

.orgmap__pillar {
  grid-area: pillar;
}

.orgmap__col--left {
  grid-area: left;
}

.orgmap__col--right {
  grid-area: right;
}

.orgmap__node--bottom {
  grid-area: bottom;
}

.orgmap__auditor {
  grid-area: auditor;
}

/* ========= NODES (고객/대표이사 원, 기타 알약형) ========= */
.orgmap__node {
  justify-self: center;
  background: #fff;
  color: #111;
  box-shadow: 0 14px 30px rgba(20, 30, 60, 0.08);
  border-radius: 999px;
  padding: 26px 34px;
  font-size: var(--font-24px);
  font-weight: 700;
  z-index: 1;
}
.orgmap__node--round {
  width: 210px;
  height: 210px;
  display: grid;
  place-items: center;
}
.orgmap__node--pill {
  padding: 14px 28px;
  border: 8px solid #f0f2f6;
  color: #0b1018;
}
.orgmap__node--top {
  margin-top: 12px;
  margin-bottom: var(--edge-gap);
}
.orgmap__node--bottom {
  margin-top: var(--edge-gap);
}

/* ========= CEO → 감사 점선 연결 (감사 기준) ========= */
/* 감사 칩: 기본 위치 + 점선 기준 */
.orgmap__auditor {
  position: relative;
  align-self: center; /* 대표이사와 같은 row 중앙 정렬 */
  z-index: 0; /* 대표이사 아래 레이어 */
  overflow: visible !important; /* 칩 밖으로 나가는 선 보이게 */
}

/* 감사 '오른쪽 테두리 밖'에서부터 대표이사 방향으로 뻗는 점선 */
.orgmap__auditor::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 100%; /* 🔥 감사 박스 오른쪽 바깥에서 시작 */
  transform: translateY(-50%);
  border-top: 2px dashed #d5dae5;
  /* JS에서 넣는 값, 없으면 임시 60px */
  width: var(--auditor-ceo-w, 60px);
  pointer-events: none;
  z-index: 0; /* 프리즘(::before)와는 별개, 그냥 기본 */
}

/* 대표이사는 항상 감사 위에 올라오게 */
.orgmap__node--bottom {
  position: relative;
  z-index: 1;
}

/* ========= COLUMNS ========= */
.orgmap__col {
  display: flex;
  flex-direction: column;
  align-items: center;
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: center;
}

/* 기본 간격: 그룹, 팀, 디바이더 공통 */
.orgmap__col > li:first-child {
  margin-top: 0;
}

/* 팀 → 팀은 조금 더 붙게 (선택사항) */
.orgmap__col > li.team + li.team {
  margin-top: 20px;
}

/* ========= 그룹-팀 사이 바 ========= */
.org-divider {
  width: 50px;
  height: 3px;
  border-radius: 999px;
  background: #111111;
  margin-top: 45px;
}

/* 바 아래 첫 팀과의 간격 */
.orgmap__col > .org-divider + .team {
  margin-top: 45px;
}

/* 데스크탑에서 컬럼 박스 위치 */
@media (min-width: 768px) {
  .orgmap__col--left {
    justify-self: start;
  }
  .orgmap__col--right {
    justify-self: end;
  }
  .orgmap__col--left .org-chip--group,
  .orgmap__col--right .org-chip--group {
    max-height: 136px;
  }
}
/* ===== 텍스트 전용 load-fade 보정 ===== */
/* ========= 감사 칩 위치 (반응형 별도 보정) ========= */
@media (min-width: 768px) {
  .orgmap__auditor {
    justify-self: center;
  }
  .orgmap__node--bottom {
    justify-self: center; /* 가운데 열 내에서 중앙 */
  }
}
/* ========= CHIPS (공통 스타일 + 효과) ========= */
.org-chip {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  box-sizing: border-box;
  font-size: var(--font-24px);
  font-weight: 700;
  border-radius: 999px;
  padding: 14px 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  /* 기본 배경/보더(팀 기준) */
  background: var(--chip-bg-team);
  border: 20px solid var(--chip-ring-team);
  min-width: var(--chip-w-team);
  transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease, border-color 0.25s ease;
  /* 텍스트 */
}
.org-chip span {
  position: relative;
  z-index: 1;
  color: #4a5a70;
  transition: color 0.25s ease;
}
.org-chip {
  /* 스윕 하이라이트 (팀/그룹 공통) */
}
.org-chip::before {
  content: "";
  position: absolute;
  inset: -20%;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  z-index: 0;
  background: linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, 0.9) 45%, transparent 70%);
  transform: translateX(-60%);
}
.org-chip {
  /* is-hot일 때 살짝 튀어오름 + 그림자 */
}
.org-chip.is-hot {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(16, 24, 40, 0.18);
}
.org-chip {
  /* 텍스트 색상(기존 is-hot 느낌 유지) */
}
.org-chip.is-hot span {
  color: #2ea8ff;
}

/* ========= 그룹 칩 ========= */
.org-chip--group {
  padding: 18px 22px;
  border-width: 20px;
  font-size: var(--font-24px);
  min-width: var(--chip-w-group);
  background: var(--chip-bg-group);
  border-color: var(--chip-ring-group);
  position: relative;
  margin-top: 100px; /* 필요하면 조정 */
  overflow: visible; /* 가로 점선/연결선 보여주기 위해 */
  z-index: 1;
}

/* 그룹 가로 점선 (세로 점선 연결선) */
.org-chip--group::after {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  border-top: 2px dashed #d5dae5;
  width: var(--connector-w, 0px);
  pointer-events: none;
}

/* 세로축 기준 '왼쪽'에 있는 그룹칩: 패딩 끝(100%) + 보더 두께만큼 더 밖에서 시작 */
.org-chip--group.org-chip--left::after {
  left: calc(100% + 20px);
}

/* 세로축 기준 '오른쪽'에 있는 그룹칩: 오른쪽 패딩 끝(100%) + 보더 두께만큼 더 밖에서 시작 */
.org-chip--group.org-chip--right::after {
  right: calc(100% + 20px);
}

/* 그룹이 뜨거운 상태일 때: 링 강조 */
.org-chip--group.is-hot {
  border-color: #ffbc00;
}

/* ========= 팀 칩 ========= */
.org-chip.team {
  border-width: 0;
  font-size: var(--font-16px);
  height: 70px;
}

/* 팀이 뜨거운 상태일 때: 배경 그라데이션 */
.org-chip.team.is-hot {
  background: linear-gradient(135deg, #ffefc2, #ffd76a);
}

/* ========= 스윕 애니메이션 ========= */
/* ↓↓ 스크롤 내려갈 때 (위 → 아래) 한 번씩 반짝 */
@keyframes chipSweepDown {
  0% {
    opacity: 0;
    transform: translateX(-60%);
  }
  20% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateX(60%);
  }
}
/* ↑↑ 스크롤 올라갈 때 (아래 → 위) 한 번씩 반대로 스윕 */
@keyframes chipSweepUp {
  0% {
    opacity: 0;
    transform: translateX(60%);
  }
  20% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateX(-60%);
  }
}
/* JS에서 is-shine-* 클래스로 트리거 */
.org-chip.is-shine-down::before {
  animation: chipSweepDown 0.55s ease-out forwards;
}

.org-chip.is-shine-up::before {
  animation: chipSweepUp 0.55s ease-out forwards;
}

/* org-chip 기본 overflow:hidden을 감사 칩에서는 풀어주기 */
.org-chip.orgmap__auditor {
  overflow: visible !important; /* 🔥 밖으로 나가는 점선 보이게 */
}

/* ========= PILLAR (스크롤 알약) ========= */
.orgmap__pillar {
  justify-self: center;
  width: clamp(64px, 7vw, var(--pillar-w));
  height: var(--pillar-h);
  border-radius: 999px;
  background: #fff;
  border: 12px solid #fac109;
  box-shadow: 0 14px 20px rgba(1, 21, 83, 0.2);
  position: relative;
  transform: translateY(var(--pillar-y, 0px)); /* JS에서 세로 이동 */
  will-change: transform;
  z-index: 2;
}

.orgmap__track {
  position: absolute;
  inset: 0;
  border-radius: 999px;
}

.orgmap__thumb {
  position: absolute;
  inset: 12px;
  border-radius: 999px;
  background: transparent;
}

@media (max-width: 600px) {
  .orgmap {
    --gap: 28px;
    --pillar-w: 54px;
    --chip-w-team: 170px;
    --chip-w-group: 220px;
  }
  .orgmap__node {
    padding: 18px 22px;
  }
  .orgmap__node--round {
    width: 150px;
    height: 150px;
  }
  .orgmap__node--pill {
    padding: 10px 18px;
    border-width: 6px;
  }
  .org-chip {
    border-width: 14px;
    padding: 10px 16px;
  }
  .org-chip--group {
    border-width: 16px;
    padding: 14px 18px;
  }
  .org-chip.team {
    height: 60px;
  }
}
/* 슬로건(세로 텍스트 + 위/아래 점) */
.orgmap__slogan {
  position: absolute;
  inset: clamp(10px, 2vh, 20px) 0;
  display: flex;
  align-items: center;
  justify-content: center;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-size: 24px;
  font-weight: 800;
  line-height: 1.2;
  color: #ffbc00;
  --dot-size: 2em;
  --dot-min: 8px;
  --dot-max: 16px;
  --dot-gap: -.6em;
}

.orgmap__slogan::before,
.orgmap__slogan::after {
  content: "";
  position: absolute;
  left: 50%;
  width: clamp(var(--dot-min), var(--dot-size), var(--dot-max));
  height: clamp(var(--dot-min), var(--dot-size), var(--dot-max));
  transform: translateX(-50%);
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

.orgmap__slogan::before {
  top: var(--dot-gap);
}

.orgmap__slogan::after {
  bottom: var(--dot-gap);
}

/* ========= MOBILE LAYOUT (<= tablet) ========= */
@media (max-width: 768px) {
  .orgmap {
    /* 좌/우 50:50 분할 */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: clamp(16px, 4vw, 32px);
    /* 
      row1 :  .       top        → 왼쪽 빈칸, 오른쪽 고객
      row2 : left1   pillar      → 리스크/경영/IT + 알약
      row3 : left2   pillar      → 영업/전략/홍보 + 알약 계속
      row4 : auditor bottom      → 감사 + 대표이사
    */
    grid-template-areas: ".       top" "left1   pillar" "left2   pillar" "auditor bottom";
  }
  /* 왼쪽 = 조직 칩들 한 줄로 나열 (두 UL을 위/아래로) */
  .orgmap__col--left {
    grid-area: left1;
    justify-self: center;
    justify-items: center;
    text-align: center;
  }
  .orgmap__col--right {
    grid-area: left2;
    justify-self: center;
    justify-items: center;
    text-align: center;
    margin-top: 100px;
  }
  /* 오른쪽 축 정렬 */
  .orgmap__node--top {
    grid-area: top;
    justify-self: center;
  }
  .orgmap__pillar {
    grid-area: pillar;
    justify-self: center;
  }
  .orgmap__node--bottom {
    grid-area: bottom;
    justify-self: center;
  }
  /* 감사는 왼쪽 맨 아래 */
  .orgmap__auditor {
    grid-area: auditor;
    justify-self: center;
    margin-right: 0;
  }
  /* 모바일에서 슬로건/점 크기만 살짝 줄이기 */
  .orgmap__slogan {
    font-size: 20px;
    --dot-size: 1.4em;
    --dot-gap: -.5em;
  }
}
/* =========================================================
    HI STOCK LOAN — Main SCSS (reorganized)
    Global Reset + Base Font + Color Scheme
========================================================= */
/* ① SCSS Modules (모든 @use는 최상단) */
/* ② 테마 & 공통 모듈 */
.recruit-sec {
  padding: 60px 0;
  background: #fff;
}
.recruit-sec .recruit-sec__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;
}
.recruit-sec .recruit-sec__inner .recruit-text {
  margin-bottom: 28px;
}
.recruit-sec .recruit-sec__inner .recruit-text .section-lead {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 40px;
  position: relative;
}
.recruit-sec .recruit-sec__inner .recruit-text .section-lead span {
  font-weight: 300;
}
.recruit-sec .recruit-sec__inner .recruit-text .section-lead::after {
  content: "";
  display: block;
  width: 50px;
  height: 3px;
  background: #000;
  margin-top: 30px;
}
.recruit-sec .recruit-sec__inner .recruit-text .section-text {
  line-height: 1.7;
  color: #242b33;
  font-size: 16px;
  margin-bottom: 30px;
}
.recruit-sec .recruit-sec__inner .recruit-text .section-text p + p {
  margin-top: 1.2rem;
}
.recruit-sec .recruit-sec__inner .recruit-text .recruit-guide {
  margin: 24px 0;
  position: relative;
  background-image: linear-gradient(#111, #111);
  background-repeat: no-repeat;
  background-size: 100% 1px;
  background-position: 50% 85px;
  overflow-x: auto;
  scrollbar-gutter: auto;
}
.recruit-sec .recruit-sec__inner .recruit-text .recruit-guide ul {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.recruit-sec .recruit-sec__inner .recruit-text .recruit-guide li {
  width: 100%;
  height: 170px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  text-align: center;
}
.recruit-sec .recruit-sec__inner .recruit-text .recruit-guide li .step-num {
  font-size: 21px;
  font-weight: 700;
}
.recruit-sec .recruit-sec__inner .recruit-text .recruit-guide li .step-title {
  font-size: 18px;
  font-weight: 500;
}
.recruit-sec .recruit-sec__inner .recruit-text .recruit-guide .step-box {
  position: relative;
  min-width: 100px;
}
.recruit-sec .recruit-sec__inner .recruit-text .recruit-guide .step-box > * {
  position: relative;
  z-index: 1;
}
.recruit-sec .recruit-sec__inner .recruit-text .recruit-guide .step-box::before {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid #111;
  z-index: 0;
}
.recruit-sec .recruit-sec__inner .recruit-text + .recruit-text {
  margin-top: 60px;
}
.recruit-sec .recruit-sec__inner .recruit-imgbox {
  width: 100%;
  padding: 0 15%;
}
.recruit-sec .recruit-sec__inner .recruit-imgbox img {
  width: 100%;
  height: auto;
  display: block;
}
.recruit-sec + .recruit-sec {
  padding: 0;
  margin-bottom: 160px;
}

/* ================================
   인재상 인포그래픽 (recruit)
   ================================ */
.recruit-guard {
  margin: 40px 0 48px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.recruit-guard .semi-recruit {
  position: relative;
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
}

/* 폴백 이미지 */
.recruit-guard .semi-recruit__fallback {
  width: 100%;
  display: block;
}

/* CSS 인포그래픽 비활성 시 → 폴백 이미지 */
.recruit-guard .semi-recruit:not(.is-enhanced) .talent-visual {
  display: none;
}

.recruit-guard .semi-recruit:not(.is-enhanced) .semi-recruit__fallback {
  display: block;
}

.recruit-guard .semi-recruit.is-enhanced .semi-recruit__fallback {
  display: none;
}

/* 메인 비주얼 – 배경 투명 */
.recruit-guard .talent-visual {
  position: relative;
  width: 100%;
  padding: 120px 0;
  background: transparent;
}

/* === 중앙 궤도 (ring 지름 346px) === */
.recruit-guard .talent-visual__orbit {
  position: relative;
  width: 346px;
  height: 346px;
  margin: 0 auto;
}

/* 그라데이션 링 (지름 346px) */
.recruit-guard .talent-visual__ring {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 350px;
  height: 350px;
  transform: translate(-50%, -50%);
}

.recruit-guard .talent-visual__ring::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: linear-gradient(135deg, #2f80ff, #9b5cff);
  opacity: 0;
  transform: scale(0.4);
  transform-origin: center;
}

/* 코어 서클 (지름 330px) */
.recruit-guard .talent-visual__core {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 320px; /* 코어 지름 */
  height: 320px;
  border-radius: 50%;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.25);
  transform: translate(-50%, -50%) scale(0.1);
  opacity: 0;
  transform-origin: center;
}

/* 코어 안 지름 224px 서클 + 그림자 */
.recruit-guard .talent-visual__core::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 224px;
  height: 224px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 16px 12px rgba(15, 23, 42, 0.1);
  transform: translate(-50%, -50%);
  z-index: 0;
}

.recruit-guard .talent-visual__core-text {
  position: relative;
  z-index: 1;
  font-size: 24px;
  line-height: 1.6;
  font-weight: 700;
  color: #111827;
  text-align: center;
}

/* (1) 나오는 순서: 링 → 코어 → 사방 원 */
.recruit-guard .semi-recruit.is-visible .talent-visual__ring::before {
  animation: recruit-ring-expand 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.recruit-guard .semi-recruit.is-visible .talent-visual__core {
  animation: recruit-core-jelly 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards 0.35s;
}

/* === 사방 원 공통 설정 === */
/* 기본 상태: 중앙에 모여 있고 투명 */
.recruit-guard .talent-visual__item {
  --dx: 0px;
  --dy: 0px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy)));
  opacity: 0;
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.7s ease-out;
  pointer-events: none;
}

/* 바깥 큰 서클 – 항상 보이는 상태 기준 (펄스 시 안 사라지게) */
.recruit-guard .talent-visual__bubble {
  min-width: 112px;
  min-height: 112px;
  border-radius: 50%;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4;
  color: #ffffff;
  background: linear-gradient(-45deg, #3b82ff, #7c3aed);
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.45);
  transform: scale(1);
  opacity: 1;
  pointer-events: auto;
}

.recruit-guard .talent-visual__bubble span {
  display: block;
  padding: 0 6px;
}

/* 색상 변형 */
.recruit-guard .talent-visual__item--values .talent-visual__bubble {
  background: linear-gradient(45deg, #4f46e5, #a855f7);
}

.recruit-guard .talent-visual__item--challenge .talent-visual__bubble {
  background: linear-gradient(-135deg, #6366f1, #4c1d95);
}

.recruit-guard .talent-visual__item--work .talent-visual__bubble {
  background: linear-gradient(135deg, #8b5cf6, #2563eb);
}

/* (3) 링 밖으로 58~60px 거리 – 대각선 위치
   Challenge → Creativity → Values → Work Hard (시계방향) */
.recruit-guard .semi-recruit.is-visible .talent-visual__item--challenge {
  --dx: -213px;
  --dy: 213px;
  opacity: 1;
  transition-delay: 0.9s;
}

.recruit-guard .semi-recruit.is-visible .talent-visual__item--creativity {
  --dx: -213px;
  --dy: -213px;
  opacity: 1;
  transition-delay: 1s;
}

.recruit-guard .semi-recruit.is-visible .talent-visual__item--values {
  --dx: 213px;
  --dy: -213px;
  opacity: 1;
  transition-delay: 1.1s;
}

.recruit-guard .semi-recruit.is-visible .talent-visual__item--work {
  --dx: 213px;
  --dy: 213px;
  opacity: 1;
  transition-delay: 1.2s;
}

/* (3) 링과 작은 서클 사이 중간쯤에 4px 도트 2개 */
/* 공통 도트 기본값 */
.recruit-guard .talent-visual__dots {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 0.7s ease-out;
}

.recruit-guard .talent-visual__dots::before,
.recruit-guard .talent-visual__dots::after {
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #6366f1;
}

/* 링과 사방 원 사이 중간 정도까지 밀어 넣는 거리 */
/* Challenge: 좌하단 → 안쪽(우상단) 방향 */
.recruit-guard .semi-recruit.is-visible .talent-visual__item--challenge .talent-visual__dots {
  opacity: 1;
  transform: translate(-50%, -50%) translate(64px, -64px) rotate(-45deg);
  transition-delay: 1s;
}

/* Creativity: 좌상단 → 안쪽(우하단) 방향 */
.recruit-guard .semi-recruit.is-visible .talent-visual__item--creativity .talent-visual__dots {
  opacity: 1;
  transform: translate(-50%, -50%) translate(64px, 64px) rotate(-135deg);
  transition-delay: 1.1s;
}

/* Values: 우상단 → 안쪽(좌하단) 방향 */
.recruit-guard .semi-recruit.is-visible .talent-visual__item--values .talent-visual__dots {
  opacity: 1;
  transform: translate(-50%, -50%) translate(-64px, 64px) rotate(135deg);
  transition-delay: 1.2s;
}

/* Work Hard: 우하단 → 안쪽(좌상단) 방향 */
.recruit-guard .semi-recruit.is-visible .talent-visual__item--work .talent-visual__dots {
  opacity: 1;
  transform: translate(-50%, -50%) translate(-64px, -64px) rotate(45deg);
  transition-delay: 1.3s;
}

/* (4) 두근두근 펄스 – JS 없이 CSS만으로 “돌아가면서” */
@keyframes recruit-heartbeat {
  0%, 100% {
    transform: scale(1);
  }
  20% {
    transform: scale(1.08);
  }
  35% {
    transform: scale(0.97);
  }
  55% {
    transform: scale(1.05);
  }
}
/* Challenge → Creativity → Values → Work Hard
   한 바퀴 돌듯이 순차 딜레이 */
.recruit-guard .semi-recruit.is-visible .talent-visual__item--challenge .talent-visual__bubble {
  animation: recruit-heartbeat 4s ease-out infinite;
  animation-delay: 1s;
}

.recruit-guard .semi-recruit.is-visible .talent-visual__item--creativity .talent-visual__bubble {
  animation: recruit-heartbeat 4s ease-out infinite;
  animation-delay: 2s;
}

.recruit-guard .semi-recruit.is-visible .talent-visual__item--values .talent-visual__bubble {
  animation: recruit-heartbeat 4s ease-out infinite;
  animation-delay: 3s;
}

.recruit-guard .semi-recruit.is-visible .talent-visual__item--work .talent-visual__bubble {
  animation: recruit-heartbeat 4s ease-out infinite;
  animation-delay: 4s;
}

/* 반응형 – 모바일에서 전체 스케일 다운 */
@media (max-width: 768px) {
  .recruit-guard {
    margin: 32px 0 40px;
  }
  .recruit-guard .talent-visual {
    width: 100%; /* 부모 컨테이너 기준 100% */
    display: flex;
    justify-content: center;
  }
  .recruit-guard .talent-visual__orbit {
    transform: scale(0.9); /* 대략 가로폭 거의 꽉 차게 */
    transform-origin: center;
  }
}
@media (max-width: 480px) {
  .recruit-guard .talent-visual__orbit {
    transform: scale(0.7); /* 더 작은 화면에서 한 번 더 축소 */
  }
}
/* === ring / core 애니메이션 === */
/* 링 먼저 */
@keyframes recruit-ring-expand {
  0% {
    transform: scale(0.4);
    opacity: 0;
  }
  70% {
    transform: scale(1.06);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
/* 그 다음 코어 젤리 */
@keyframes recruit-core-jelly {
  0% {
    transform: translate(-50%, -50%) scale(0.1);
    opacity: 0;
  }
  55% {
    transform: translate(-50%, -50%) scale(1.08);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
}
/* 모션 줄이기 */
@media (prefers-reduced-motion: reduce) {
  .recruit-guard .talent-visual__core,
  .recruit-guard .talent-visual__ring::before,
  .recruit-guard .talent-visual__item,
  .recruit-guard .talent-visual__dots,
  .recruit-guard .talent-visual__bubble {
    animation: none !important;
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}
/* =========================================================
    HI STOCK LOAN — Main SCSS (reorganized)
    Global Reset + Base Font + Color Scheme
========================================================= */
/* ① SCSS Modules (모든 @use는 최상단) */
/* ② 테마 & 공통 모듈 */
.contrib-sec {
  padding: 60px 0 120px;
  background: #fff;
}
.contrib-sec .contrib-sec__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;
}
.contrib-sec {
  /* 상단 리드 텍스트 */
}
.contrib-sec .contrib-head {
  text-align: left;
  margin-bottom: 40px;
}
.contrib-sec .contrib-head__lead {
  max-width: 1200px;
  margin: 0 auto;
  line-height: 1.7;
  color: #242b33;
  font-size: 18px;
  font-weight: 800;
}
.contrib-sec {
  /* 타임라인 래퍼 */
}
.contrib-sec .contrib-timeline {
  border-top: 1px solid #111;
  padding: 40px;
}
.contrib-sec {
  /* ===== 연도 블록 ===== */
}
.contrib-sec .contrib-year {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  column-gap: 40px;
}
.contrib-sec .contrib-year__label {
  font-size: 32px;
  font-weight: 800;
  white-space: nowrap;
  margin: 0;
}
.contrib-sec .contrib-year__list {
  position: relative;
}
.contrib-sec {
  /* ===== 개별 항목 ===== */
}
.contrib-sec .contrib-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 310px;
  column-gap: 32px;
  padding: 5px 0 35px;
  /* ▶ 기본 상태: 아래로 살짝 내려간 상태 + 투명 */
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1), transform 1s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--contrib-delay, 0s);
  will-change: transform, opacity;
}
.contrib-sec {
  /* JS에서 is-in 붙으면 위로 올라오면서 보이기 */
}
.contrib-sec .contrib-item.is-in {
  opacity: 1;
  transform: translateY(0);
}
.contrib-sec {
  /* 텍스트 + 도트 영역 */
}
.contrib-sec .contrib-item__body {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 42px;
  /* grid row 높이에 맞춰 세로로 쭉 늘어나게 (→ 우측 이미지 높이와 동일) */
  align-self: stretch;
}
.contrib-sec {
  /* ▶ 세로라인: 각 게시물마다 1개, 도트 바로 아래에서 시작해서
     해당 행의 맨 아래까지 자동으로 늘어남 */
}
.contrib-sec .contrib-item__body::before {
  content: "";
  position: absolute;
  left: 4px; /* 도트(10px)의 중앙 근처 */
  top: 75px; /* 도트 중심 높이 - 디자인에 맞춰 조정 */
  bottom: 0; /* 행의 맨 아래까지 */
  width: 1px;
  background: #848484;
}
.contrib-sec {
  /* 도트 (세로라인 위에 올라타는 원) */
}
.contrib-sec .contrib-item__dot {
  position: relative;
  display: block;
  margin-top: 15px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #111;
  flex: 0 0 10px;
}
.contrib-sec .contrib-item__meta {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 24px;
}
.contrib-sec .contrib-item__date {
  font-weight: 400;
  color: #303030;
}
.contrib-sec .contrib-item__title {
  font-weight: 700;
  color: #111111;
  margin: 0;
}
.contrib-sec {
  /* 썸네일 */
}
.contrib-sec .contrib-item__thumb {
  margin: 0;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.18);
  align-self: flex-start;
}
.contrib-sec .contrib-item__thumb img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  transform: scale(1);
}
.contrib-sec {
  /* ▶ 이미지 hover 시 확대 효과 (PC에서만) */
}
@media (hover: hover) and (pointer: fine) {
  .contrib-sec .contrib-item__thumb img {
    transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .contrib-sec .contrib-item__thumb:hover img {
    transform: scale(1.06);
  }
}
.contrib-sec {
  /* 더보기 버튼 */
}
.contrib-sec .contrib-more-wrap {
  margin-top: 24px;
  text-align: center;
}
.contrib-sec .contrib-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 220px;
  padding: 14px 40px;
  border-radius: 999px;
  border: 0;
  background: #f3f4f6;
  font-size: 15px;
  font-weight: 500;
  color: #111827;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.1s ease, box-shadow 0.2s ease;
}
.contrib-sec .contrib-more:hover {
  background: #e5e7eb;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.12);
  transform: translateY(-1px);
}
.contrib-sec .contrib-more:active {
  box-shadow: none;
  transform: translateY(0);
}
.contrib-sec {
  /* ===== 반응형 ===== */
}
@media (max-width: 960px) {
  .contrib-sec .contrib-timeline {
    padding: 40px 0;
  }
  .contrib-sec .contrib-year {
    grid-template-columns: 110px minmax(0, 1fr);
    column-gap: 24px;
  }
  .contrib-sec .contrib-year .contrib-item__body {
    gap: 24px;
  }
  .contrib-sec .contrib-item {
    column-gap: 20px;
  }
}
@media (max-width: 768px) {
  .contrib-sec {
    padding: 40px 0 80px;
  }
  .contrib-sec .contrib-head__lead {
    font-size: 15px;
  }
  .contrib-sec .contrib-year {
    column-gap: 0px;
  }
  .contrib-sec .contrib-year .contrib-item__body {
    gap: 17px;
  }
  .contrib-sec .contrib-year__label {
    margin-bottom: 8px;
  }
  .contrib-sec .contrib-year__list {
    padding-left: 18px;
  }
  .contrib-sec .contrib-item {
    grid-template-columns: 1fr;
    row-gap: 26px;
  }
  .contrib-sec .contrib-item__body {
    align-self: auto;
  }
  .contrib-sec .contrib-item__body::before {
    top: 48px;
  }
  .contrib-sec .contrib-item__thumb {
    max-width: 100%;
  }
}
@media (max-width: 480px) {
  .contrib-sec .contrib-head__lead {
    text-align: left;
  }
  .contrib-sec .contrib-year {
    grid-template-columns: 64px minmax(0, 1fr);
  }
  .contrib-sec .contrib-year__label {
    font-size: 20px;
  }
  .contrib-sec .contrib-item {
    padding: 3px 0 35px;
    row-gap: 18px;
  }
  .contrib-sec .contrib-item__body::before {
    top: 34px;
  }
  .contrib-sec .contrib-item__dot {
    margin-top: 8px;
  }
  .contrib-sec .contrib-item__meta {
    font-size: 16px;
  }
}
.contrib-sec {
  /* 모션 줄이기 옵션 */
}
@media (prefers-reduced-motion: reduce) {
  .contrib-sec .contrib-item {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .contrib-sec .contrib-item__thumb img {
    transition: none !important;
    transform: none !important;
  }
}

/* =========================================================
    HI STOCK LOAN — Main SCSS (reorganized)
    Global Reset + Base Font + Color Scheme
========================================================= */
/* ① SCSS Modules (모든 @use는 최상단) */
/* ② 테마 & 공통 모듈 */
.loan-sec {
  padding: 80px 0 120px;
  background: #fff;
}
.loan-sec .loan-sec__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;
}
.loan-sec {
  /* ================= 타이틀 & 상단 바 ================= */
}
.loan-sec .loan-head {
  margin-bottom: 32px;
  text-align: center;
  font-size: 16px;
  font-weight: 400;
  color: #111111;
}
.loan-sec .loan-head__title {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 28px;
}
.loan-sec .loan-head__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 auto;
}
.loan-sec .loan-head__left,
.loan-sec .loan-head__right {
  display: flex;
  align-items: center;
}
.loan-sec {
  /* 정렬 버튼 (좌측: 추천상품 ▾) */
}
.loan-sec .loan-sort {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #fff;
  cursor: pointer;
}
.loan-sec .loan-sort__icon {
  position: relative;
  width: 12px;
  height: 12px;
  display: inline-block;
  margin-left: 2px;
  /* 화살대(가운데 세로 라인) */
}
.loan-sec .loan-sort__icon::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0px;
  transform: translateX(-50%);
  width: 2px;
  height: 11px;
  background: #111111;
  border-radius: 1px;
}
.loan-sec .loan-sort__icon {
  /* 화살촉(V자) */
}
.loan-sec .loan-sort__icon::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 4px;
  width: 8px;
  height: 8px;
  border-left: 2px solid #111111;
  border-bottom: 2px solid #111111;
  transform: translateX(-50%) rotate(-45deg);
}
.loan-sec {
  /* 🔹 추천상품 버튼 hover 시 화살표 위아래로 살짝 튀는 모션 */
}
.loan-sec .loan-sort:hover .loan-sort__icon {
  animation: loanSortArrowBounce 0.8s ease-in-out infinite;
}
.loan-sec .loan-sort__list {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 140px;
  padding: 6px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
  display: none;
  z-index: 20;
}
.loan-sec .loan-sort.is-open .loan-sort__list {
  display: block;
}
.loan-sec .loan-sort__item {
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 14px;
  cursor: pointer;
  white-space: nowrap;
  margin-bottom: 5px;
}
.loan-sec .loan-sort__item:last-child {
  margin-bottom: 0;
}
.loan-sec .loan-sort__item:hover,
.loan-sec .loan-sort__item.is-active {
  background: #f3f4f6;
}
.loan-sec {
  /* 리스트형 버튼 (우측) */
}
.loan-sec .loan-view-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.loan-sec .loan-view-toggle__icon {
  position: relative;
  width: 15px;
  height: 15px;
  transform: translateY(1px);
}
.loan-sec .loan-view-toggle__icon::before,
.loan-sec .loan-view-toggle__icon::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: #111111;
  border-radius: 2px;
}
.loan-sec {
  /* 1~3번째 줄을 before에서 */
}
.loan-sec .loan-view-toggle__icon::before {
  top: 0;
  box-shadow: 0 4px 0 #111111, 0 8px 0 #111111;
}
.loan-sec {
  /* 4번째 줄 */
}
.loan-sec .loan-view-toggle__icon::after {
  top: 12px;
}
.loan-sec {
  /* 🔹 [리스트형 아이콘] 리스트 모드가 아닐 때, hover 시 라인이 위에서부터 하나씩 오른쪽에서 들어오는 모션 */
}
.loan-sec:not(.is-list) .loan-view-toggle:hover .loan-view-toggle__icon::before {
  animation: loanListLinesDraw 0.7s ease-out forwards;
}
.loan-sec:not(.is-list) .loan-view-toggle:hover .loan-view-toggle__icon::after {
  animation: loanListLastLineDraw 0.7s ease-out forwards;
  transform-origin: right center;
}
.loan-sec {
  /* ================= 카드 그리드 (PC) ================= */
}
.loan-sec .loan-grid {
  display: grid !important; /* 메인 flex 규칙 차단 */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: 24px;
  row-gap: 24px;
  width: 100%;
  /* 메인 캐러셀 변수 의존 제거 */
  --pcarousel-card-w: auto !important;
  --pcarousel-card-gap: 24px !important;
  --card-w: auto !important;
}
.loan-sec {
  /* 그리드 아이템 폭/플렉스/transform 리셋 */
}
.loan-sec .loan-grid > * {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  flex: 0 0 auto !important;
  /* transform: none !important;  ← hover translateY 살리려고 일부러 안 씀 */
}
.loan-sec .card--product.is-search-selected {
  outline: 2px solid #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.25);
  position: relative;
}
.loan-sec {
  /* 혹시 남아있는 캐러셀 wrapper만 transform 리셋 */
}
.loan-sec .loan-grid > .pcarousel__card,
.loan-sec .loan-grid .pcarousel__card {
  transform: none !important;
}
.loan-sec .loan-grid .card--product {
  height: 100%;
}
.loan-sec {
  /* ====== 반응형 (PC 그리드) ====== */
}
@media (max-width: 1200px) {
  .loan-sec .loan-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 960px) {
  .loan-sec .loan-head__title {
    font-size: 24px;
  }
  .loan-sec .loan-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.loan-sec {
  /* =========================================================
     ✅ 모바일 가로형 카드 레이아웃 (시안 반영)
     - 768px 이하에서 카드 1열 + 가로형
     - 메인 ProductCards.js 템플릿 & 네가 수동 복붙한 카드 둘 다 대응
     ========================================================= */
}
@media (max-width: 768px) {
  .loan-sec {
    padding: 64px 0 96px;
  }
  .loan-sec .loan-head {
    margin-bottom: 24px;
  }
  .loan-sec .loan-head__title {
    font-size: 22px;
    margin-bottom: 20px;
  }
  .loan-sec .loan-head__bar {
    max-width: none;
    padding: 0 4px;
  }
  .loan-sec .loan-grid {
    grid-template-columns: 1fr;
    row-gap: 12px;
  }
  .loan-sec {
    /* 카드 자체를 가로형 2컬럼 그리드로 */
  }
  .loan-sec .loan-grid .card,
  .loan-sec .loan-grid .card--product {
    display: grid !important;
    --left-max: 150px; /* 여기 숫자만 바꾸면 됨 */
    grid-template-columns: minmax(0, clamp(0px, 30%, var(--left-max))) 1fr;
    grid-template-rows: auto auto;
    column-gap: 16px;
    row-gap: 13px;
    align-items: center;
    text-align: left !important;
    padding: 18px 16px !important;
    border-radius: 16px;
  }
  .loan-sec {
    /* 좌측: 로고(메인 템플릿) */
  }
  .loan-sec .loan-grid .card__head .credit__logo,
  .loan-sec .loan-grid .card__head img.credit__logo {
    grid-column: 1;
    width: 56px;
    height: 56px;
    object-fit: contain;
    justify-self: center;
    align-self: center;
  }
  .loan-sec {
    /* 좌측: 로고가 없는(수동 카드) 경우 bank 텍스트도 왼쪽 블록 느낌 */
  }
  .loan-sec .loan-grid .card__head .bank {
    font-size: 12px;
    color: #6b7280;
    margin: 6px 0 0;
  }
  .loan-sec {
    /* 우측 상단 제목영역 */
  }
  .loan-sec .loan-grid .card__head {
    grid-column: 1;
    grid-row: 1/span 2;
    margin: 0 !important;
    text-align: center !important;
  }
  .loan-sec {
    /* 우측: 금리 */
  }
  .loan-sec .loan-grid .rate {
    grid-column: 2;
    font-size: 22px;
    font-weight: 800;
    color: #e11d85;
    margin: 0 !important;
    padding: 8px 0 16px;
    border-bottom: 1px solid #e5e7eb;
  }
  .loan-sec .loan-grid .rate .rate__suffix {
    font-size: 0.9em;
    font-weight: 700;
  }
  .loan-sec {
    /* 우측: 카피 */
  }
  .loan-sec .loan-grid .card__body,
  .loan-sec .loan-grid .card__copy,
  .loan-sec .loan-grid .card__desc {
    grid-column: 2;
    font-size: 14px;
    font-weight: 600;
    color: #111;
    margin: 0 !important;
    padding: 0 !important;
  }
  .loan-sec .loan-grid .card__mid {
    grid-column: 2;
    grid-row: 1;
    padding-top: 6px;
  }
  .loan-sec .loan-grid .card__mid strong {
    font-size: 17px;
    font-weight: 700;
    line-height: 1.3;
  }
  .loan-sec .loan-grid .card__foot {
    background: #ffffff;
    padding: 0;
    grid-column: 2;
    grid-row: 2;
  }
  .loan-sec {
    /* 우측: 태그 */
  }
  .loan-sec .loan-grid .card__tags {
    grid-column: 2;
    font-size: 12px;
    color: #6b7280;
    line-height: 1.4;
    background-image: none !important;
  }
  .loan-sec .loan-grid .card__tags span, .loan-sec .loan-grid .card__tags .tag {
    margin-right: 6px;
  }
  .loan-sec {
    /* 모바일 시안에는 버튼 안보이게 */
  }
  .loan-sec .loan-grid .card__cta,
  .loan-sec .loan-grid > .btn,
  .loan-sec .loan-grid a.btn,
  .loan-sec .loan-grid .card__cta .btn,
  .loan-sec .loan-grid .card__foot .btn {
    display: none !important;
  }
}
@media (max-width: 480px) {
  .loan-sec .loan-grid .card,
  .loan-sec .loan-grid .card--product {
    grid-template-columns: 84px minmax(0, 1fr);
    padding: 16px 14px !important;
  }
}
.loan-sec {
  /* =========================================================
     ✅ [추가] 리스트 모드 전용 스타일
     - 네 ProductCards 템플릿( card__head / card__mid / rate / card__foot ) 기준
     - 위의 모바일 가로형 스타일은 그대로 두고,
       .loan-sec.is-list 일 때만 아래가 덮어씀
     ========================================================= */
  /* 리스트 헤더는 기본 숨김(그리드 모드) */
}
.loan-sec .loan-list-head {
  display: none;
}
.loan-sec.is-list {
  /* =========================================================
  ✅ 리스트 모드일 때 토글 아이콘을 2x2 그리드 모양으로 변경
  - .loan-sec에 is-list 클래스가 붙은 상태 (라벨: "그리드형")
  ========================================================= */
}
.loan-sec.is-list .loan-view-toggle__icon {
  width: 15px;
  height: 15px;
  transform: translateY(1px);
}
.loan-sec.is-list .loan-view-toggle__icon::before,
.loan-sec.is-list .loan-view-toggle__icon::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 7px;
  height: 7px;
  box-sizing: border-box;
  border-radius: 2px;
  border: 2px solid #111111;
  background: transparent;
  /* 🔹 네모 4개를 box-shadow로 복제 (2x2 그리드) */
  box-shadow: 8px 0 0 0 #111111, 0 8px 0 0 #111111, 8px 8px 0 0 #111111;
}
.loan-sec.is-list {
  /* ::after는 따로 쓸 필요 없으니 숨겨도 됨 (중복 방지용) */
}
.loan-sec.is-list .loan-view-toggle__icon::after {
  display: none;
}
.loan-sec.is-list {
  /* 🔹 [그리드형 아이콘] hover 시 네모가 위→아래, 좌→우 순서로 오른쪽에서 들어오는 모션 */
}
.loan-sec.is-list .loan-view-toggle:hover .loan-view-toggle__icon::before {
  animation: loanGridBoxesIn 0.7s ease-out forwards;
}
.loan-sec.is-list {
  /* ---------- PC 리스트 헤더 ---------- */
}
.loan-sec.is-list .loan-list-head {
  display: grid;
  grid-template-columns: minmax(170px, 1fr) minmax(120px, 1fr) minmax(70px, 1fr) minmax(125px, 1fr) minmax(60px, 1fr) minmax(100px, 1fr);
  gap: 12px;
  padding: 4px 0 18px;
  font-size: 18px;
  font-weight: 400;
  color: #666666;
  border-bottom: 1px solid #111;
  text-align: center;
}
.loan-sec.is-list {
  /* 그리드는 block으로 바꿔 “행 리스트”처럼 */
}
.loan-sec.is-list .loan-grid {
  display: block !important;
  margin-top: 0;
}
.loan-sec.is-list {
  /* ---------- PC 리스트 카드(행) ---------- */
}
.loan-sec.is-list .loan-grid .card {
  display: grid !important;
  grid-template-columns: minmax(170px, 1fr) minmax(120px, 1fr) minmax(70px, 1fr) minmax(125px, 1fr) minmax(60px, 1fr) minmax(100px, 1fr);
  gap: 12px;
  align-items: center;
  padding: 5px 0 !important;
  border: 0;
  border-bottom: 1px solid #e5e7eb;
  border-radius: 0 !important;
  background: #fff !important;
  text-align: left !important;
  position: relative;
}
.loan-sec.is-list .loan-grid .card:hover {
  border-top: #ff2d7a 1px solid;
  border-bottom: #ff2d7a 1px solid;
}
.loan-sec.is-list {
  /* 1열: 여신기관(로고+credit) */
}
.loan-sec.is-list .loan-grid .card__head {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 !important;
  padding: 0 !important;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
}
.loan-sec.is-list .loan-grid .card__head .credit__logo,
.loan-sec.is-list .loan-grid .card__head img.credit__logo {
  width: 50px;
  height: 50px;
  object-fit: contain;
  padding: 5px;
  flex: 0 0 auto;
  margin: 0;
  background: #f3f5f8;
  border-radius: 50%;
}
.loan-sec.is-list .loan-grid .card__head .credit {
  font-size: 18px;
  font-weight: 500;
  color: #111;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  margin: 0;
}
.loan-sec.is-list {
  /* card__mid를 해체해서 strong / rate가 컬럼 직접 타게 */
}
.loan-sec.is-list .loan-grid .card__mid {
  display: contents;
}
.loan-sec.is-list {
  /* 2열: 상품명 */
}
.loan-sec.is-list .loan-grid .card__mid strong {
  grid-column: 2;
  grid-row: 1;
  font-size: 18px;
  font-weight: 500;
  color: #111;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  margin: 0;
}
.loan-sec.is-list {
  /* 3열: 금리 */
}
.loan-sec.is-list .loan-grid .card__mid .rate {
  grid-column: 3;
  grid-row: 1;
  font-size: 18px;
  font-weight: 800;
  color: #ff2d7a;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  white-space: nowrap;
  text-align: left;
}
.loan-sec.is-list {
  /* card__foot 해체 후 copy/tags 직접 배치 */
}
.loan-sec.is-list .loan-grid .card__foot {
  display: contents;
}
.loan-sec.is-list {
  /* 4열: 특징(copy) */
}
.loan-sec.is-list .loan-grid .card__copy {
  grid-column: 4;
  grid-row: 1; /* ✅ 한 줄 고정 */
  font-size: 18px;
  color: #111;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  padding: 0;
}
.loan-sec.is-list {
  /* 5열: 요약(tags) */
}
.loan-sec.is-list .loan-grid .card__tags {
  grid-column: 5;
  grid-row: 1; /* ✅ 한 줄 고정 */
  color: #6b7280;
  line-height: 1.4;
  background: none !important;
  min-width: 0;
  word-break: keep-all;
  margin: 0;
}
.loan-sec.is-list .loan-grid .card__tags .tags {
  font-size: 18px;
  font-weight: 500;
}
.loan-sec.is-list {
  /* 6열: 자세히보기 버튼(PC에서만) */
}
.loan-sec.is-list .loan-grid a.btn {
  grid-column: 6;
  grid-row: 1;
  justify-self: end;
  white-space: nowrap;
  position: relative;
  z-index: 2;
  margin: 20px 0;
}
.loan-sec.is-list {
  /* =====================================================
     ✅ 리스트 모드 모바일: 여신기관/상품명/금리만
     ===================================================== */
}
@media (max-width: 768px) {
  .loan-sec.is-list .loan-list-head {
    grid-template-columns: 1.5fr 1fr 0.5fr;
    padding: 10px 0;
    border-bottom: 1px solid #111111;
  }
  .loan-sec.is-list .loan-list-head span:nth-child(n+4) {
    display: none;
  }
  .loan-sec.is-list .loan-grid .card {
    grid-template-columns: 1.5fr 1fr 0.5fr;
    padding: 14px 0 !important;
    grid-template-rows: auto;
  }
  .loan-sec.is-list .loan-grid .card__head {
    grid-column: 1;
    grid-row: 1;
    font-size: 14px;
  }
  .loan-sec.is-list .loan-grid .credit__logo {
    width: 34px;
    height: 34px;
  }
  .loan-sec.is-list .loan-grid .card__mid strong {
    grid-column: 2;
    grid-row: 1;
  }
  .loan-sec.is-list .loan-grid .card__mid .rate {
    grid-column: 3;
    grid-row: 1;
    text-align: right;
  }
  .loan-sec.is-list {
    /* 나머지 다 숨김 */
  }
  .loan-sec.is-list .loan-grid .card__copy,
  .loan-sec.is-list .loan-grid .card__tags,
  .loan-sec.is-list .loan-grid .card__foot,
  .loan-sec.is-list .loan-grid a.btn,
  .loan-sec.is-list .loan-grid .card__cta {
    display: none !important;
  }
}
.loan-sec {
  /* ===============================================
      카드/리스트 진입 애니메이션
     =============================================== */
  /* 🔹 그리드형: 위에서 아래, 좌→우 순차 등장 */
}
.loan-sec .loan-grid.is-anim-grid .card {
  animation-name: loanProductsGridIn;
  animation-duration: 0.6s;
  animation-timing-function: cubic-bezier(0.16, 0.84, 0.44, 1);
  animation-fill-mode: backwards;
  animation-delay: var(--enter-delay, 0s);
}
.loan-sec {
  /* 🔹 리스트형: 위에서 아래, 우→좌 슬라이드 인 */
}
.loan-sec.is-list .loan-grid.is-anim-list .card {
  animation-name: loanProductsListIn;
  animation-duration: 0.6s;
  animation-timing-function: cubic-bezier(0.16, 0.84, 0.44, 1);
  animation-fill-mode: backwards;
  animation-delay: var(--enter-delay, 0s);
}

@keyframes loanProductsGridIn {
  0% {
    opacity: 0;
    transform: translateY(32px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes loanProductsListIn {
  0% {
    opacity: 0;
    transform: translateX(32px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes loanSortArrowBounce {
  0%, 100% {
    transform: translateY(0);
  }
  30% {
    transform: translateY(-5px);
  }
  60% {
    transform: translateY(3px);
  }
}
@keyframes loanListLinesDraw {
  /* 처음엔 3줄 모두 오른쪽 바깥에 있음 */
  0% {
    box-shadow: 15px 4px 0 #111111, 15px 8px 0 #111111;
  }
  /* 1단계: 첫 번째 줄(맨 위) 자리에만 들어옴 */
  33% {
    box-shadow: 0 4px 0 #111111, 15px 8px 0 #111111;
  }
  /* 2단계: 두 번째 줄까지 자리로 들어옴 */
  66% {
    box-shadow: 0 4px 0 #111111, 0 8px 0 #111111;
  }
  /* 마지막: 둘 다 제자리 */
  100% {
    box-shadow: 0 4px 0 #111111, 0 8px 0 #111111;
  }
}
@keyframes loanListLastLineDraw {
  0%, 66% {
    transform: scaleX(0);
  }
  100% {
    transform: scaleX(1);
  }
}
@keyframes loanGridBoxesIn {
  /* 처음: 오른쪽 바깥쪽에서 시작 (3개 클론 전부 x=16px 쯤) */
  0% {
    box-shadow: 16px 0 0 0 #111111, 16px 8px 0 0 #111111, 16px 16px 0 0 #111111;
  }
  /* 1단계: 윗줄 오른쪽 네모 자리로 */
  33% {
    box-shadow: 8px 0 0 0 #111111, 16px 8px 0 0 #111111, 16px 16px 0 0 #111111;
  }
  /* 2단계: 왼쪽 아래 네모 자리로 */
  66% {
    box-shadow: 8px 0 0 0 #111111, 0 8px 0 0 #111111, 16px 16px 0 0 #111111;
  }
  /* 마지막: 오른쪽 아래 네모 자리로 */
  100% {
    box-shadow: 8px 0 0 0 #111111, 0 8px 0 0 #111111, 8px 8px 0 0 #111111;
  }
}
/* =========================================================
    HI STOCK LOAN — Main SCSS (reorganized)
    Global Reset + Base Font + Color Scheme
========================================================= */
/* ① SCSS Modules (모든 @use는 최상단) */
/* ② 테마 & 공통 모듈 */
.loan-detail-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 16px;
  background: rgba(8, 10, 20, 0.55);
  backdrop-filter: blur(6px);
  z-index: 1100;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.32s ease, visibility 0s linear 0.32s;
}

.loan-detail-overlay.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.32s ease, visibility 0s linear 0s;
}

.loan-detail {
  position: relative;
  width: 100%;
  max-width: 720px;
  margin: 40px auto;
  background: #ffffff;
  border-radius: 18px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
  padding: 28px 24px 32px;
  /* ✅ 모달 내부에서만 스크롤 */
  max-height: calc(100vh - 80px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  opacity: 0;
  transform: translate3d(0, 32px, 0) scale(0.98);
  transition: opacity 0.32s ease, transform 0.32s ease;
  /* ✅ 스크롤바 숨기기 (라운드 모서리 깨지지 않게) */
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.loan-detail.has-scroll-indicator::after {
  content: "";
  position: sticky;
  left: 0;
  right: 0;
  bottom: -32px;
  display: block;
  height: 64px;
  margin-top: -64px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #fff 80%);
  pointer-events: none;
  z-index: 1;
}

.loan-detail-overlay.is-open .loan-detail {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

/* WebKit 계열 스크롤바 숨김 */
.loan-detail::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.loan-detail__close {
  position: absolute;
  right: 18px;
  top: 18px;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  border: 0;
  background: #f7f8fb;
  cursor: pointer;
}
.loan-detail__close::before, .loan-detail__close::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 14px;
  height: 2px;
  background: #111111;
  border-radius: 2px;
}
.loan-detail__close::before {
  transform: translate(-50%, -50%) rotate(45deg);
}
.loan-detail__close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.loan-detail__scroll-indicator {
  position: sticky;
  left: auto;
  bottom: 16px;
  width: 48px;
  height: 16px;
  margin: 0 auto;
  transform: none;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  z-index: 2;
}
.loan-detail__scroll-indicator::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 2px;
  height: 2px;
  border-radius: 2px;
  background: rgba(17, 24, 39, 0.45);
}
.loan-detail__scroll-indicator::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 10px;
  width: 10px;
  height: 10px;
  border-right: 2px solid rgba(17, 24, 39, 0.55);
  border-bottom: 2px solid rgba(17, 24, 39, 0.55);
  transform: translateX(-50%) rotate(45deg);
}

.loan-detail__scroll-indicator.is-visible {
  opacity: 1;
}

.loan-detail__header {
  text-align: left;
  margin-bottom: 60px;
}

.loan-detail__title {
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -0.03em;
  margin: 50px 0 80px;
  text-align: center;
}

.loan-detail__tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 18px;
}

.loan-detail__tag {
  display: inline-block;
  padding: 2px 18px;
  border-radius: 999px;
  background: #303030;
  font-size: 18px;
  font-weight: 500;
  color: #fff;
}

/* === 상세 텍스트 컬러 마킹 === */
.loan-detail__mark {
  font-weight: 700;
}

.loan-detail__mark--primary {
  color: #2090ff;
}

.loan-detail__mark--secondary {
  color: #fd1e76;
}

.loan-detail__mark--accent {
  color: #e5e5e5;
}

/* 상세 내용 안에 자동 생성되는 링크 스타일 */
.loan-detail__link {
  color: #2090ff;
  word-break: break-all;
}

.loan-detail__link:hover,
.loan-detail__link:focus-visible {
  text-decoration: underline;
  opacity: 0.9;
}

/* === 계좌운용규칙 요약본 row === */
.loan-detail__row-summary th {
  white-space: nowrap;
  vertical-align: middle;
}

.loan-detail__row-summary td {
  vertical-align: middle;
}

/* === 요약본 보기 버튼 === */
.loan-detail__summary-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 140px;
  padding: 8px 18px;
  border-radius: 999px;
  border: 1px solid #ff2d7a;
  background: #fff;
  color: #ff2d7a;
  font-size: 14px;
  font-weight: 400;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.loan-detail__summary-btn:hover,
.loan-detail__summary-btn:focus-visible {
  background: #ff2d7a;
  color: #fff;
  font-weight: 700;
  border-color: #ff2d7a;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}

@media (max-width: 768px) {
  .loan-detail__row-summary td {
    text-align: right;
  }
}
/* 섹션 공통 */
.loan-detail__section {
  background: #fff;
}

.loan-detail__section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 0;
  border-bottom: 1px solid #e6e8ef;
  cursor: pointer;
}

.loan-detail__section-title {
  font-size: 24px;
  font-weight: 800;
  margin: 0;
}

.loan-detail__toggle {
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 4px;
}

/* 아이콘 기본 모양 + 회전 모션 */
.loan-detail__toggle-icon {
  display: block;
  width: 14px;
  height: 14px;
  border-top: 2px solid #111;
  border-right: 2px solid #111;
  transform-origin: center;
  transition: transform 0.12s ease;
}

/* 펼쳐진 상태(aria-expanded="true") – 위쪽 화살표 */
.loan-detail__toggle[aria-expanded=true] .loan-detail__toggle-icon {
  transform: rotate(-45deg);
}

/* 접힌 상태(aria-expanded="false") – 아래쪽 화살표 */
.loan-detail__toggle[aria-expanded=false] .loan-detail__toggle-icon {
  transform: rotate(135deg);
}

/* 내용 컨테이너 – JS에서 height/opacity 애니메이션 */
.loan-detail__section-body {
  overflow: hidden;
  will-change: height, opacity;
}

/* ✅ 마지막 섹션(기타)이 접힌 상태에서는 하단 border 제거 */
.loan-detail__section:last-of-type.is-collapsed .loan-detail__section-head {
  border-bottom: none;
}

/* === 테이블 레이아웃 === */
.loan-detail__table {
  width: 100%;
  font-size: 18px;
  background: #f7f8fb;
  color: #111111;
  padding: 24px;
  border-radius: 0;
  border-bottom: 1px solid #e6e8ef;
}

.loan-detail__table th,
.loan-detail__table td {
  padding: 4px 0;
  vertical-align: top;
}

/* 왼쪽 라벨 */
.loan-detail__table th {
  width: 120px;
  font-weight: 500;
  text-align: left;
}

/* 오른쪽 값 */
.loan-detail__table td {
  font-weight: 800;
  text-align: right;
}

/* ============================= */
/* ① 여신기관 + 가능증권사 묶음 */
/* ============================= */
/* 여신기관 – 그룹의 시작: 위쪽은 기본 간격 유지 */
.loan-detail__table tr[data-row-key=여신기관] th,
.loan-detail__table tr[data-row-key=여신기관] td {
  padding-top: 0;
}

/* 가능증권사 – 위쪽은 약간, 아래는 그룹 끝 + 라인 */
.loan-detail__table tr[data-row-key=가능증권사] th,
.loan-detail__table tr[data-row-key=가능증권사] td {
  padding-bottom: 18px;
  border-bottom: 1px solid #e6e8ef;
}

/* ============================= */
/* ② 금리(연) 블록               */
/* ============================= */
/* 제목 행: 한 줄 전체를 제목처럼 (우측 비우고 좌측만 사용) */
.loan-detail__row-block-title[data-row-key="금리(연)"] th {
  padding-top: 18px;
  padding-bottom: 14px;
  font-weight: 800;
  text-align: left;
}

/* 내용 행: 기간/금리 모음 + 하단 라인 */
.loan-detail__row-block-body[data-row-key="금리(연)-body"] td {
  padding-top: 0;
  padding-bottom: 18px;
  border-bottom: 1px solid #e6e8ef;
}

/* ============================= */
/* ③ 포트폴리오 블록             */
/* ============================= */
.loan-detail__row-block-title[data-row-key=포트폴리오] th {
  padding-top: 18px;
  padding-bottom: 14px;
  font-weight: 800;
  text-align: left;
}

.loan-detail__row-block-body[data-row-key=포트폴리오-body] td {
  padding-bottom: 18px;
  border-bottom: 1px solid #e6e8ef;
}

/* 금리/포트폴리오 안쪽 subrow – 좌측 항목 / 우측 값 */
.loan-detail__subrow {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}

.loan-detail__subrow + .loan-detail__subrow {
  margin-top: 8px;
}

.loan-detail__subkey {
  display: inline-block;
  font-weight: 500;
  min-width: 78px;
}

.loan-detail__subval {
  font-weight: 800;
  color: #111827;
}

/* ================================= */
/* ④ 대환대출 / 추가대출 / 마통 묶음 */
/* ================================= */
/* 묶음의 시작: 위쪽 여유를 조금 더 줌 */
.loan-detail__table tr[data-row-key=대환대출] th,
.loan-detail__table tr[data-row-key=대환대출] td {
  padding-top: 18px;
}

/* 이 묶음은 마지막 라인 없음 (테이블 하단 border만 남김) */
/* 요약본 row와의 간격 */
.loan-detail__row-summary th,
.loan-detail__row-summary td {
  padding-top: 18px;
}

/* 하단 CTA */
.loan-detail__bottom {
  margin-top: 28px;
  text-align: center;
}

.loan-detail__cta {
  margin-top: 30px;
  min-width: 220px;
  width: 100%;
}
.loan-detail__cta:hover, .loan-detail__cta:focus-visible {
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
}

/* ✅ 배경(body/html) 스크롤 막기 공통 */
body.is-modal-open {
  overflow: hidden;
}

/* ======================== */
/* 모바일: 전체 페이지 형식 */
/* ======================== */
@media (max-width: 768px) {
  .loan-detail-overlay {
    padding: 0;
    align-items: stretch;
    justify-content: stretch;
    background: #f3f4f6;
  }
  .loan-detail {
    max-width: none;
    margin: 0;
    border-radius: 0;
    min-height: 100vh;
    padding: 20px 16px 24px;
    max-height: none;
    height: 100vh;
    overflow-y: auto;
  }
  .loan-detail__title {
    font-size: 20px;
    margin: 30px 0 40px;
  }
  .loan-detail__table {
    font-size: 16px;
    padding: 18px 16px;
  }
}
/* =========================================================
    HI STOCK LOAN — Main SCSS (reorganized)
    Global Reset + Base Font + Color Scheme
========================================================= */
/* ① SCSS Modules (모든 @use는 최상단) */
/* ② 테마 & 공통 모듈 */
.admov-sec {
  padding: 40px 0 80px;
}
@media (max-width: 768px) {
  .admov-sec {
    padding: 32px 0 64px;
  }
}

.admov-desc {
  text-align: left;
  font-size: 18px;
  font-weight: 800;
  color: #111111;
  margin-bottom: 24px;
}
@media (max-width: 768px) {
  .admov-desc {
    font-size: 16px;
  }
}

.admov-divider {
  border: 0;
  border-top: 2px solid #111111;
  margin-bottom: 32px;
}

/* ============ 카드 그리드 ============ */
.admov-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px 22px;
}
@media (max-width: 1024px) {
  .admov-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 768px) {
  .admov-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

/* 개별 카드 */
.admov-card {
  background: #f7f7f7;
  border: 1px solid #e2e5eb;
  border-radius: 24px;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  cursor: pointer;
}
.admov-card:hover, .admov-card:focus-within {
  background: #fff;
  transform: translateY(-8px);
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.16);
}

/* 썸네일 버튼 */
.admov-card__thumb {
  position: relative;
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  width: 100%;
  cursor: pointer;
}

/* 16:9 박스 */
.admov-card__thumb-inner {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  overflow: hidden;
  border-radius: 24px 24px 0 0;
}
.admov-card__thumb-inner img,
.admov-card__thumb-inner iframe {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.admov-card__thumb-inner {
  /* ★ 호버 미리보기용 iframe은 클릭을 통과시켜서 카드 클릭이 먹게 함 */
}
.admov-card__thumb-inner iframe {
  pointer-events: none;
}

/* 썸네일 오버레이 + 재생 아이콘 */
.admov-card__thumb-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  background: radial-gradient(circle at center, rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0.45));
  opacity: 0;
  transition: opacity 0.2s ease;
}

.admov-card__play-icon {
  width: 50px;
  height: 50px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.5);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
}
.admov-card__play-icon::before {
  content: "";
  position: absolute;
  border-style: solid;
  border-width: 10px 0 10px 16px;
  border-color: transparent transparent transparent #111111;
  transform: translateX(2px);
}

.admov-card__thumb-inner img {
  transition: transform 0.25s ease;
}

.admov-card:hover .admov-card__thumb-inner img,
.admov-card:focus-within .admov-card__thumb-inner img {
  transform: scale(1.04);
}

.admov-card:hover .admov-card__thumb-overlay,
.admov-card:focus-within .admov-card__thumb-overlay {
  opacity: 1;
}

/* 카드 하단 텍스트 */
.admov-card__body {
  padding: 16px 18px 18px;
  text-align: center;
}
@media (max-width: 768px) {
  .admov-card__body {
    padding: 14px 14px 16px;
  }
}

.admov-card__title {
  font-size: 18px;
  font-weight: 400;
  color: #111111;
  letter-spacing: -0.02em;
}
@media (max-width: 768px) {
  .admov-card__title {
    font-size: 15px;
  }
}

/* 타이틀과 메타 사이 라인 */
.admov-card__line {
  margin: 10px auto 12px;
  width: 60%;
  max-width: 220px;
  height: 1px;
  background: #e5e7eb;
}

/* 메타 (#2019.11 #30초) */
.admov-card__meta {
  display: flex;
  justify-content: center;
  gap: 12px;
  font-size: 14px;
  color: #666666;
}

.admov-card__meta-item {
  white-space: nowrap;
}

/* ============ 더보기 버튼 ============ */
.admov-more-wrap {
  text-align: center;
  margin-top: 72px;
}

.admov-more-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 240px;
  padding: 14px 32px;
  border-radius: 10px;
  border: 1px solid #e2e5eb;
  background: #e2e5eb;
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.18s ease, box-shadow 0.18s ease, transform 0.12s ease;
}
.admov-more-btn:hover, .admov-more-btn:focus-visible {
  background: #fff;
  box-shadow: 0 3px 10px rgba(15, 23, 42, 0.18);
  transform: translateY(-1px);
}

@media (max-width: 768px) {
  .admov-more-btn {
    width: 100%;
  }
}
.admov-more-btn__page {
  margin-left: 6px;
  font-weight: 400;
  color: #6b7280;
}

.admov-empty {
  margin-top: 38px;
  text-align: center;
  font-size: 18px;
  color: #666666;
}

/* ============ 유튜브 모달 ============ */
/**
 * 오버레이 전체:
 * - 화면 전체 fixed
 * - 패딩으로 여백 확보
 * - 내용이 살짝 커져도 스크롤 가능(overflow: auto)
 */
.admov-overlay {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
  overflow: auto;
}

.admov-overlay.is-open {
  display: flex;
}

/* dim */
.admov-overlay__scrim {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
}

.admov-overlay__panel {
  position: relative;
  z-index: 1;
  max-height: calc(var(--vh, 1vh) * 100 - 48px);
  display: flex;
  flex-direction: column;
}

/* 헤더: 타이틀 + 닫기 버튼 (이 영역은 스케일 안 먹음) */
.admov-overlay__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.admov-overlay__title {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.75);
}

/* 닫기 버튼 */
.admov-overlay__close {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  border: none;
  background: #f7f8fb;
  cursor: pointer;
  position: relative;
  margin-left: 8px;
}
.admov-overlay__close::before, .admov-overlay__close::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 14px;
  height: 2px;
  border-radius: 2px;
  background: #111111;
}
.admov-overlay__close::before {
  transform: translate(-50%, -50%) rotate(45deg);
}
.admov-overlay__close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

/**
 * 16:9 프레임:
 * - 기본은 가로 100% / 16:9
 * - 하지만 "헤더 + 여백" 을 고려해서 max-height 를 걸어줌
 *   → 뷰포트가 낮아지면 width 가 같이 줄어들면서
 *     전체가 화면 안에 들어오도록 자동 축소
 */
.admov-overlay__frame-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  background: #000;
  border-radius: 14px;
  overflow: hidden;
  max-height: calc(100vh - 120px);
}

/* iframe 은 프레임 안을 꽉 채움 */
.admov-overlay__frame-wrap iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ============ 카드 입장 애니메이션 ============ */
@keyframes admov-card-in {
  0% {
    opacity: 1;
    transform: translate3d(0, 16px, 0);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
/* JS에서 최초 로드 / 더보기 시 새 카드에만 붙는 클래스 */
@keyframes admov-card-in {
  from {
    opacity: 1;
    transform: translate3d(0, 16px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
.admov-card--enter {
  animation: admov-card-in 0.9s ease forwards;
}

.admov-grid.is-anim-admov .admov-card {
  opacity: 0;
  transform: translate3d(0, 16px, 0);
  animation: admov-card-in 0.38s ease-out forwards;
  animation-delay: var(--admov-enter-delay, 0s);
}

@media (prefers-reduced-motion: reduce) {
  .admov-grid.is-anim-admov .admov-card {
    animation: none;
    opacity: 1;
    transform: none;
  }
}
/* ====== 광고영상 카드 진입 애니메이션 ====== */
/* 애니메이션 시작 전 상태 (JS에서만 붙이는 클래스) */
.admov-card--will-enter {
  opacity: 0;
  transform: translateY(24px);
}

/* 실제 진입 애니메이션 */
.admov-card--enter {
  animation: admov-card-enter 0.55s ease-out forwards;
  animation-delay: var(--admov-enter-delay, 0s);
}

/* 투명 → 보이면서 위로 살짝 올라오는 모션 */
@keyframes admov-card-enter {
  0% {
    opacity: 0;
    transform: translateY(24px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
/* 작은 화면에서 패널 좌우 여백만 조금 더 확보 */
@media (max-width: 768px) {
  .admov-overlay {
    padding: 12px;
  }
  .admov-overlay__panel {
    max-width: 100%;
    max-height: calc(100vh - 24px);
  }
  .admov-overlay__title {
    font-size: 18px;
  }
}
/* 태블릿 이하 가로 모드에서도 동일하게 동작하게,
   별도 orientation 트릭 없이 aspect-ratio + max-height 로 대응 */
/* =========================================================
    HI STOCK LOAN — Main SCSS (reorganized)
    Global Reset + Base Font + Color Scheme
========================================================= */
/* ① SCSS Modules (모든 @use는 최상단) */
/* ② 테마 & 공통 모듈 */
/* ============ 공통 영역 ============ */
.awards-sec {
  padding: 40px 0 80px;
}
@media (max-width: 768px) {
  .awards-sec {
    padding: 32px 0 64px;
  }
}

.awards-sec__inner {
  display: flex;
  align-items: flex-start;
  gap: 40px;
}
@media (max-width: 1024px) {
  .awards-sec__inner {
    display: block;
  }
}

.awards-main {
  flex: 1 1 auto;
  min-width: 0;
}

/* ============ 모바일 필터 탭 ============ */
.awards-filter--tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 36px;
}
@media (max-width: 768px) {
  .awards-filter--tabs {
    margin-bottom: 28px;
  }
}

.awards-filter__btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 18px;
  border-radius: 999px;
  border: 1px solid #e5e7eb;
  background: #f5f5f5;
  font-size: 18px;
  font-weight: 500;
  color: #111111;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.16s ease, color 0.16s ease, border-color 0.16s ease, transform 0.08s ease;
}
.awards-filter__btn:hover, .awards-filter__btn:focus-visible {
  box-shadow: 0 3px 6px rgba(15, 23, 42, 0.18);
}
.awards-filter__btn:active {
  transform: translateY(1px);
}
.awards-filter__btn.is-active {
  background: #111111;
  border-color: #111111;
  color: #fff;
  font-weight: 700;
}

.awards-filter__count {
  margin-left: 5px;
}

/* 데스크탑에서는 상단 탭 숨기고 우측 패널만 사용 */
@media (min-width: 1025px) {
  .awards-filter--tabs {
    display: none;
  }
}
/* 상단 구분 라인 */
.awards-divider {
  border: 0;
  border-top: 2px solid #111111;
  margin: 8px 0 0;
}
@media (max-width: 768px) {
  .awards-divider {
    margin-top: 10px;
  }
}

/* ============ 리스트 ============ */
.awards-list {
  list-style: none;
  padding: 0;
}

.awards-item {
  padding: 36px 24px;
  border-bottom: 1px solid #e2e5eb;
}
.awards-item:last-child {
  border-bottom: 0;
}
@media (max-width: 768px) {
  .awards-item {
    padding: 36px 0;
  }
}

/* ================== 수상내역 리스트 진입 모션 ================== */
@keyframes awards-item-fade-up {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* 기본 상태 */
.awards-item {
  opacity: 1;
  transform: translateY(0);
}

/* JS에서 붙여주는 진입용 클래스 */
.awards-item--enter {
  opacity: 0;
  transform: translateY(24px);
  animation: awards-item-fade-up 0.6s ease-out forwards;
}

.awards-item__link {
  display: flex;
  align-items: center;
  gap: 36px;
  text-decoration: none;
  color: inherit;
}
@media (max-width: 768px) {
  .awards-item__link {
    gap: 18px;
  }
}

.awards-item__thumb {
  position: relative;
  flex: 0 0 150px;
  max-width: 150px;
  height: 120px;
  border-radius: 10px;
  border: 1px solid #e2e5eb;
  overflow: hidden;
  background: #f3f4f6;
}
@media (max-width: 768px) {
  .awards-item__thumb {
    flex-basis: 130px;
    max-width: 130px;
    height: 100px;
  }
}
.awards-item__thumb img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center top;
  transition: transform 0.2s ease-out;
}

/* 세로로 긴 이미지 → 위 기준으로 아래 잘라냄 */
.awards-item__thumb.awards-item__thumb--vertical img {
  object-position: center top;
}

/* 가로로 긴 이미지 → 가운데 기준 좌우 크롭 */
.awards-item__thumb.awards-item__thumb--horizontal img {
  object-position: center center;
}

.awards-item__content {
  flex: 1 1 auto;
  min-width: 0;
}

.awards-item__badge {
  margin-bottom: 12px;
  font-size: 18px;
  font-weight: 500;
  color: #666666;
}
@media (max-width: 768px) {
  .awards-item__badge {
    font-size: 16px;
  }
}

.awards-item__title {
  margin-bottom: 12px;
  font-size: 18px;
  font-weight: 600;
  color: #111111;
  line-height: 1.45;
  letter-spacing: -0.02em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
  max-width: 100%;
}
@media (max-width: 768px) {
  .awards-item__title {
    font-size: 16px;
  }
}

.awards-item__date {
  display: inline-block;
  font-size: 16px;
  color: #666666;
}
@media (max-width: 768px) {
  .awards-item__date {
    font-size: 14px;
  }
}

/* 리스트 없을 때 */
.awards-empty {
  margin-top: 32px;
  text-align: center;
  font-size: 16px;
  color: #666666;
}

/* ============ 더보기 버튼 ============ */
.awards-more-wrap {
  margin-top: 32px;
  text-align: center;
}

.awards-more-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 220px;
  padding: 12px 32px;
  border-radius: 10px;
  border: 1px solid #e2e5eb;
  background: #e5e7eb;
  font-size: 16px;
  font-weight: 600;
  color: #111111;
  cursor: pointer;
  transition: background-color 0.16s ease, box-shadow 0.16s ease, transform 0.08s ease;
}
.awards-more-btn:hover, .awards-more-btn:focus-visible {
  background: #fff;
  box-shadow: 0 3px 10px rgba(15, 23, 42, 0.18);
  transform: translateY(-1px);
}
.awards-more-btn:active {
  transform: translateY(0);
}
@media (max-width: 768px) {
  .awards-more-btn {
    width: 100%;
  }
}

/* ============ 우측 패널 (PC) ============ */
.awards-panel {
  flex: 0 0 280px;
  position: relative;
}
@media (max-width: 1024px) {
  .awards-panel {
    display: none;
  }
}

/* PC에서만 sticky (좌측 리스트 섹션 높이 안에서만 따라다님) */
@media (min-width: 1025px) {
  .awards-panel {
    position: sticky;
    top: 120px;
    align-self: flex-start;
  }
  .awards-panel__box {
    position: relative;
    top: auto;
  }
}
.awards-panel__box {
  border-radius: 18px;
  border: 1px solid #e5e7eb;
  background: #fff;
  padding: 24px;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.04);
}

.awards-panel__total {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  padding: 0 6px;
  margin: 0 0 10px;
  font-size: 21px;
  font-weight: 700;
  color: #111111;
  border: 0;
  background: transparent;
  cursor: pointer;
  text-align: left;
}
.awards-panel__total:hover {
  color: #2b77ff;
}

.awards-panel__total-count {
  font-weight: 500;
  margin-left: 5px;
}

.awards-panel__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.awards-panel__item + .awards-panel__item {
  margin-top: 10px;
}

.awards-panel__btn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 6px;
  border-radius: 10px;
  border: 0;
  background: transparent;
  cursor: pointer;
  text-align: left;
  transition: background-color 0.14s ease, transform 0.08s ease;
}
.awards-panel__item.is-active .awards-panel__btn, .awards-panel__btn:hover, .awards-panel__btn:focus-visible {
  background: #f1f1f1;
}

.awards-panel__icon {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: #f3f4f6;
  position: relative;
  overflow: hidden;
}

.awards-panel__icon--first {
  background-color: #c09954;
}

.awards-panel__icon--star {
  background-color: #c09954;
}

/* 어워즈 BI */
.awards-panel__icon--first::before,
.awards-panel__icon--star::before {
  content: "";
  position: absolute;
  inset: 0px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

/* ▶ 실제 SVG 경로는 여기 교체해서 사용하면 됨 */
.awards-panel__icon--first::before {
  background-image: url("/assets/icons/awards_first.svg");
}

.awards-panel__icon--star::before {
  background-image: url("/assets/icons/awards_star.svg");
}

/* 기타: 회색 서클 + 점 3개 나열 (가로) */
.awards-panel__icon--etc {
  background: #e5e7eb;
}
.awards-panel__icon--etc::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 4px;
  height: 4px;
  border-radius: 999px;
  background: #6b7280;
  transform: translate(-50%, -50%);
  /* 가운데 점 + 좌우 2개 점 */
  box-shadow: -7px 0 0 0 #6b7280, 7px 0 0 0 #6b7280;
}

.awards-panel__label {
  font-size: 20px;
  font-weight: 500;
  color: #111111;
}

.awards-panel__count {
  font-weight: 400;
  color: #666666;
}

/* =========================================================
    HI STOCK LOAN — Main SCSS (reorganized)
    Global Reset + Base Font + Color Scheme
========================================================= */
/* ① SCSS Modules (모든 @use는 최상단) */
/* ② 테마 & 공통 모듈 */
/* ============ 섹션 공통 ============ */
.press-sec {
  padding: 40px 0 80px;
}
@media (max-width: 768px) {
  .press-sec {
    padding: 32px 0 64px;
  }
}

/* ============ 상단 영역 (전체 건수 + 검색) ============ */
.press-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 36px;
}
@media (max-width: 768px) {
  .press-head {
    margin-bottom: 28px;
  }
}

.press-head__left {
  flex: 0 0 auto;
}

.press-head__right {
  flex: 0 0 auto;
}
@media (min-width: 769px) {
  .press-head__right {
    min-width: 340px;
  }
}

.press-total {
  font-size: 16px;
  color: #666666;
}
.press-total span[data-press-total] {
  font-weight: 700;
  color: #111111;
}

/* ============ 검색 영역 ============ */
.press-search {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}
@media (max-width: 768px) {
  .press-search {
    justify-content: flex-start;
  }
}

.press-search__select {
  position: relative;
  flex: 0 0 96px;
}
.press-search__select select {
  width: 100%;
  padding: 8px 30px 8px 10px;
  border-radius: 8px;
  border: 1px solid #d1d5db;
  background: #f9fafb;
  font-size: 14px;
  color: #111111;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}
.press-search__select select:focus {
  border-color: #2563eb;
  outline: none;
  box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.2);
}
.press-search__select::after {
  content: "";
  position: absolute;
  right: 10px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-left: 1px solid #6b7280;
  border-bottom: 1px solid #6b7280;
  transform: translateY(-50%) rotate(-45deg);
  pointer-events: none;
}

.press-search__input-wrap {
  display: flex;
  align-items: center;
  gap: 0;
  flex: 1 1 auto;
  min-width: 0;
}
@media (max-width: 768px) {
  .press-search__input-wrap {
    gap: 0;
  }
}

.press-search__input {
  flex: 1 1 auto;
  min-width: 0;
  height: 40px;
  padding: 0 12px;
  border-radius: 10px 0 0 10px;
  border: 1px solid #e6e8ef;
  border-right: 0px;
  font-size: 14px;
  color: #111111;
  background: #f7f8fb;
}
.press-search__input::placeholder {
  color: #666666;
}
.press-search__input:focus {
  outline: none;
  background: #fff;
}

.press-search__button {
  flex: 0 0 auto;
  height: 40px;
  padding: 0 12px;
  border-radius: 0 10px 10px 0;
  border: 1px solid #e6e8ef;
  background: #fff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease, transform 0.1s ease;
}
.press-search__button .icon-search {
  width: 20px;
  height: 20px;
  margin-right: 0;
  background: url("/assets/icons/icon_search.svg") no-repeat center/20px;
}
.press-search__button {
  /* 🟢 마우스 오버: 살짝 떠오르는 느낌 */
}
.press-search__button:hover, .press-search__button:focus-visible {
  background: #ffffff;
  border-color: #c4c9d1;
  box-shadow: 2px 2px 3px rgba(15, 23, 42, 0.18);
  transform: translateY(-1px);
  outline: none;
}
.press-search__button {
  /* 🔵 클릭(누르는) 느낌: 다시 내려오면서 살짝 눌린 느낌 */
}
.press-search__button:active {
  transform: translateY(0);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.18);
  background: #f3f4f6;
}

/* 상단 구분 라인 (awards-divider와 동일 느낌) */
.press-divider {
  border: 0;
  border-top: 2px solid #111111;
  margin: 8px 0 0;
}
@media (max-width: 768px) {
  .press-divider {
    margin-top: 10px;
  }
}

/* ============ 리스트 ============ */
.press-list {
  list-style: none;
  padding: 0;
}

.press-item {
  border-bottom: 1px solid #e2e5eb;
}
.press-item:last-child {
  border-bottom: 0;
}

.press-item__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 28px 24px;
  text-decoration: none;
  color: inherit;
  transition: background-color 0.12s ease, transform 0.06s ease;
}
@media (max-width: 768px) {
  .press-item__link {
    padding: 24px 0;
  }
}
.press-item__link:hover, .press-item__link:focus-visible {
  background: #f9fafb;
}
.press-item__link:active {
  transform: translateY(1px);
}

.press-item__title {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 18px;
  font-weight: 500;
  color: #111111;
  letter-spacing: -0.02em;
  line-height: 1.45;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 768px) {
  .press-item__title {
    font-size: 16px;
  }
}

.press-item__date {
  flex: 0 0 auto;
  margin-left: 16px;
  font-size: 18px;
  color: #666666;
  white-space: nowrap;
}
@media (max-width: 768px) {
  .press-item__date {
    font-size: 14px;
  }
}

/* 리스트 없을 때 */
.press-empty {
  margin-top: 32px;
  text-align: center;
  font-size: 18px;
  color: #666666;
}

/* ============ 페이징 ============ */
.press-pagination {
  margin-top: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
@media (max-width: 768px) {
  .press-pagination {
    margin-top: 46px;
  }
}

.press-pagination__pages {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.press-pagination__page {
  min-width: 32px;
  height: 32px;
  padding: 0 8px;
  border-radius: 999px;
  border: 0;
  background: transparent;
  font-size: 18px;
  font-weight: 600;
  color: #666666;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.14s ease, color 0.14s ease, transform 0.08s ease;
}
.press-pagination__page:hover, .press-pagination__page:focus-visible {
  background: #f7f8fb;
  color: #111111;
}
.press-pagination__page.press-pagination__page--active {
  background: #111111;
  color: #fff;
  font-weight: 700;
}

/* 모바일: 활성 페이지 번호만 */
@media (max-width: 768px) {
  .press-pagination {
    gap: 8px;
  }
  .press-pagination__pages {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
  }
  /* 숫자 버튼은 기본적으로 안 보이게 */
  .press-pagination__page {
    display: none;
  }
  /* 활성 페이지만 한 개 보여주기 + 클릭 안 되게 */
  .press-pagination__page--active {
    display: inline-flex;
    pointer-events: none;
    cursor: default;
  }
}
/* 페이지 이전/다음 애로우 버튼 */
.press-pagination__arrow {
  min-width: 32px;
  height: 32px;
  border-radius: 999px;
  background: #fff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background-color 0.14s ease, border-color 0.14s ease, transform 0.08s ease;
}
.press-pagination__arrow:hover:not(:disabled), .press-pagination__arrow:focus-visible:not(:disabled) {
  background: #666666;
  color: #fff;
}
.press-pagination__arrow:disabled {
  opacity: 0;
  cursor: default;
}

.press-pagination__arrow-icon {
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
}

.press-pagination__arrow--first .press-pagination__arrow-icon,
.press-pagination__arrow--last .press-pagination__arrow-icon {
  font-size: 16px;
}

/* ============ 반응형 자잘한 조정 ============ */
@media (max-width: 480px) {
  .press-head {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }
  .press-search {
    flex-direction: row;
    align-items: stretch;
  }
  .press-search__select {
    flex: 0 0 90px;
  }
  .press-search__input-wrap {
    flex: 1 1 auto;
  }
}
/* ============ 리스트형 진입 모션 ============ */
.press-list.is-anim-list .press-item {
  animation: pressListIn 0.6s cubic-bezier(0.16, 0.84, 0.44, 1);
  animation-fill-mode: backwards;
  animation-delay: var(--enter-delay, 0s);
}

@keyframes pressListIn {
  0% {
    opacity: 0;
    transform: translateX(32px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
/* =========================================================
    HI STOCK LOAN — Main SCSS (reorganized)
    Global Reset + Base Font + Color Scheme
========================================================= */
/* ① SCSS Modules (모든 @use는 최상단) */
/* ② 테마 & 공통 모듈 */
/* ============ 섹션 공통 ============ */
.news-sec {
  padding: 40px 0 80px;
}
@media (max-width: 768px) {
  .news-sec {
    padding: 32px 0 64px;
  }
}

/* ============ 분류 탭 (수상내역 필터 재사용) ============ */
.news-filter {
  margin-bottom: 36px;
}

/* awards.scss 에서 PC에서 .awards-filter--tabs 를 display:none 처리했으므로
   뉴스·공지 안에서는 PC에서도 항상 보이도록 다시 켜줌 */
@media (min-width: 1025px) {
  .news-sec .awards-filter--tabs {
    display: flex;
  }
}
/* 모바일에서도 여백만 조금 조정 */
@media (max-width: 768px) {
  .news-filter {
    margin-bottom: 28px;
  }
}
/* ============ 상단 구분 라인 ============ */
.news-divider {
  border: 0;
  border-top: 2px solid #111111;
  margin: 8px 0 0;
}
@media (max-width: 768px) {
  .news-divider {
    margin-top: 10px;
  }
}

/* ============ 리스트 ============ */
.news-list {
  list-style: none;
  padding: 0;
}

.news-item {
  border-bottom: 1px solid #e2e5eb;
}
.news-item:last-child {
  border-bottom: 0;
}

.news-item__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 28px 24px;
  text-decoration: none;
  color: inherit;
  transition: background-color 0.12s ease, transform 0.06s ease;
}
@media (max-width: 768px) {
  .news-item__link {
    padding: 24px 0;
  }
}
.news-item__link:hover, .news-item__link:focus-visible {
  background: #f9fafb;
}
.news-item__link:active {
  transform: translateY(1px);
}

.news-item__title {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 18px;
  font-weight: 500;
  color: #111111;
  letter-spacing: -0.02em;
  line-height: 1.45;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 768px) {
  .news-item__title {
    font-size: 16px;
  }
}

.news-item__date {
  flex: 0 0 auto;
  margin-left: 16px;
  font-size: 18px;
  color: #666666;
  white-space: nowrap;
}
@media (max-width: 768px) {
  .news-item__date {
    font-size: 16px;
  }
}

/* 리스트 없을 때 */
.news-empty {
  margin-top: 32px;
  text-align: center;
  font-size: 16px;
  color: #666666;
}

.news-list.is-anim-list .news-item {
  animation: newsListIn 0.6s cubic-bezier(0.16, 0.84, 0.44, 1);
  animation-fill-mode: backwards;
  animation-delay: var(--enter-delay, 0s);
}

@keyframes newsListIn {
  0% {
    opacity: 0;
    transform: translateX(32px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
/* ============ 페이징 ============ */
.news-pagination {
  margin-top: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
@media (max-width: 768px) {
  .news-pagination {
    margin-top: 46px;
  }
}

.news-pagination__pages {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.news-pagination__page {
  min-width: 32px;
  height: 32px;
  padding: 0 8px;
  border-radius: 999px;
  border: 0;
  background: transparent;
  font-size: 18px;
  font-weight: 600;
  color: #666666;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.14s ease, color 0.14s ease, transform 0.08s ease;
}
.news-pagination__page:hover, .news-pagination__page:focus-visible {
  background: #f7f8fb;
  color: #111111;
}
.news-pagination__page.news-pagination__page--active {
  background: #111111;
  color: #fff;
  font-weight: 700;
}

.news-pagination__arrow {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: #fff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background-color 0.14s ease, border-color 0.14s ease, transform 0.08s ease;
}
.news-pagination__arrow:hover:not(:disabled), .news-pagination__arrow:focus-visible:not(:disabled) {
  background: #666666;
  color: #fff;
}
.news-pagination__arrow:disabled {
  opacity: 0;
  cursor: default;
}

.news-pagination__arrow-icon {
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
}

.news-pagination__arrow--first .news-pagination__arrow-icon,
.news-pagination__arrow--last .news-pagination__arrow-icon {
  font-size: 16px;
}

/* ========================= */
/* 모바일: 활성 페이지 번호만 */
/* ========================= */
@media (max-width: 768px) {
  .news-pagination {
    gap: 8px;
  }
  .news-pagination__pages {
    min-width: 40px;
    justify-content: center;
  }
  .news-pagination__page {
    display: none;
  }
  .news-pagination__page--active {
    display: inline-flex;
    pointer-events: none;
    cursor: default;
  }
}
/* ========================= */
/* News-View 페이지 */
/* ========================= */
.news-view-sec {
  padding: 40px 0 80px;
}
@media (max-width: 768px) {
  .news-view-sec {
    padding: 32px 0 64px;
  }
}

.news-view {
  max-width: 100%;
}

/* 상단 제목 + 일자 */
.news-view__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  padding: 36px 24px;
  border-bottom: 1px solid #e2e5eb;
  color: #111111;
  line-height: 1.5;
}
@media (max-width: 768px) {
  .news-view__head {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 24px 0;
  }
}

.news-view__title {
  font-size: 24px;
  font-weight: 700;
  margin: 0;
}
@media (max-width: 768px) {
  .news-view__title {
    font-size: 21px;
  }
}

.news-view__date {
  font-size: 24px;
}
@media (max-width: 768px) {
  .news-view__date {
    font-size: 18px;
  }
}

/* 상단 라인 */
.news-view__divider {
  border: 0;
  border-top: 2px solid #111111;
  margin: 0;
}

/* 본문 */
.news-view__body {
  padding: 48px 24px;
  font-size: 18px;
  line-height: 1;
  color: #111111;
  white-space: normal;
}
.news-view__body h3 {
  font-size: 21px;
  font-weight: 700;
  margin: 0 0 18px;
  line-height: 1.8;
}
.news-view__body p {
  line-height: 1.8;
}
.news-view__body P + h3 {
  margin-top: 40px;
}
.news-view__body {
  /* plain text + <br> 기반일 때도 보기 좋게 */
}
.news-view__body p + p {
  margin-top: 14px;
}
@media (max-width: 768px) {
  .news-view__body {
    padding: 36px 0;
    font-size: 16px;
  }
  .news-view__body h3 {
    font-size: 18px;
    margin: 0 0 16px;
  }
}

/* 이전/다음 글 네비게이션 */
.news-view__nav {
  margin-top: 56px;
  border-top: 1px solid #e2e5eb;
  border-bottom: 1px solid #e2e5eb;
}
@media (max-width: 768px) {
  .news-view__nav {
    margin-top: 36px;
  }
}

.news-view-nav__row {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 16px;
  padding: 24px;
  font-size: 18px;
}
.news-view-nav__row:not(:last-child) {
  border-bottom: 1px solid #eceff3;
}
@media (max-width: 768px) {
  .news-view-nav__row {
    grid-template-columns: 90px minmax(0, 1fr);
    row-gap: 6px;
    padding: 18px 0;
    font-size: 16px;
  }
  .news-view-nav__row .news-view-nav__date {
    display: none;
  }
}

.news-view-nav__label {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  font-weight: 500;
  color: #111111;
}

.news-view-nav__arrow {
  font-size: 18px;
  font-weight: 900;
  color: #666666;
}
.news-view-nav__arrow--up::before {
  content: "∧";
}
.news-view-nav__arrow--down::before {
  content: "∨";
}

.news-view-nav__title {
  display: inline-block;
  color: #111111;
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 700;
}
.news-view-nav__title:hover, .news-view-nav__title:focus-visible {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.news-view-nav__title--empty {
  color: #666666;
  font-weight: 400;
  cursor: default;
  pointer-events: none;
}

.news-view-nav__date.is-empty {
  display: none;
}

.news-view-nav__date {
  color: #666666;
}

/* 목록 버튼 */
.news-view__list-btn-wrap {
  margin-top: 110px;
  text-align: center;
}
@media (max-width: 768px) {
  .news-view__list-btn-wrap {
    margin-top: 60px;
  }
}

.news-view__list-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 240px;
  padding: 14px 40px;
  border-radius: 10px;
  border: 1px solid #111111;
  background: #111111;
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.16s ease, color 0.16s ease, box-shadow 0.16s ease, transform 0.08s ease;
}
.news-view__list-btn:hover, .news-view__list-btn:focus-visible {
  background: #fff;
  color: #111827;
  box-shadow: 0 3px 10px rgba(15, 23, 42, 0.18);
  transform: translateY(-1px);
}
.news-view__list-btn:active {
  transform: translateY(0);
}
@media (max-width: 768px) {
  .news-view__list-btn {
    width: 100%;
  }
}

/* 첨부 이미지 / 첨부 파일 공통 */
.news-view__attachments {
  padding: 24px;
  border-top: 1px solid #eceff3;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 24px;
}
@media (max-width: 768px) {
  .news-view__attachments {
    padding: 18px 0;
  }
}

.news-view__attachments-title {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: #111111;
}
@media (max-width: 768px) {
  .news-view__attachments-title {
    font-size: 14px;
  }
}

.news-view__attachments-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 6px;
}

.news-attach-item {
  font-size: 16px;
}
@media (max-width: 768px) {
  .news-attach-item {
    font-size: 14px;
  }
}

.news-attach-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #111111;
  text-decoration: none;
}
.news-attach-link:before {
  content: "·";
  font-size: 16px;
  line-height: 1;
}
.news-attach-link:hover, .news-attach-link:focus-visible {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* =========================================================
    HI STOCK LOAN — Main SCSS (reorganized)
    Global Reset + Base Font + Color Scheme
========================================================= */
/* ① SCSS Modules (모든 @use는 최상단) */
/* ② 테마 & 공통 모듈 */
/* ============ FAQ 섹션 공통 ============ */
.faq-sec {
  padding: 40px 0 80px;
}
@media (max-width: 768px) {
  .faq-sec {
    padding: 32px 0 64px;
  }
}

.faq-intro {
  margin: 0 0 24px;
  font-size: 18px;
  font-weight: 800;
  color: #111111;
}
@media (max-width: 768px) {
  .faq-intro {
    font-size: 16px;
  }
}

/* 상단 구분 라인 */
.faq-divider {
  border: 0;
  border-top: 2px solid #111111;
  margin: 0;
}

/* ============ FAQ 리스트 ============ */
.faq-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.faq-item {
  border-bottom: 1px solid #e2e5eb;
}
.faq-item:first-child {
  border-top: 0;
  transform: translateY(0px);
}
.faq-item:last-child {
  border-bottom: 0;
  transform: translateY(0px);
}

/* Q 버튼 (뉴스 리스트 행 느낌) */
.faq-item__question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 32px 24px;
  border: 0;
  background: transparent;
  font-size: 18px;
  font-weight: 500;
  color: #111111;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.12s ease, transform 0.06s ease;
}
@media (max-width: 768px) {
  .faq-item__question {
    font-size: 16px;
    padding: 32px 0;
  }
}
.faq-item__question:hover, .faq-item__question:focus-visible {
  background: #f9fafb;
}
.faq-item__question:active {
  transform: translateY(1px);
}

.faq-item__question-text {
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 아이콘 (+ / -) */
.faq-item__icon {
  position: relative;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin-left: auto;
  transition: transform 0.25s ease;
}

.faq-item__icon::before {
  content: "+";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 36px;
  font-weight: 300;
  line-height: 1;
  color: #111111;
}
@media (max-width: 768px) {
  .faq-item__icon::before {
    font-size: 26px;
  }
}

/* 열렸을 때: 회전 + − 로 변경 */
.faq-item.is-open .faq-item__icon {
  transform: rotate(180deg);
}

.faq-item.is-open .faq-item__icon::before {
  content: "−";
  top: 40%;
  left: 50%;
  transform: translate(-50%, -60%);
}

/* ============ A 영역 (열림/닫힘 모션) ============ */
.faq-item__answer {
  /* 기본: 닫힌 상태 */
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  padding: 0 24px;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.8;
  color: #111111;
  background: #f7f8fb;
  transition: max-height 0.26s ease, opacity 0.26s ease, padding 0.26s ease;
}
@media (max-width: 768px) {
  .faq-item__answer {
    font-size: 15px;
  }
}
.faq-item__answer p + p {
  margin-top: 8px;
}

/* 열려 있을 때 */
.faq-item.is-open {
  border-top: 1px solid #111111;
  border-bottom: 1px solid #111111;
}

.faq-item.is-open .faq-item__answer {
  max-height: 800px;
  opacity: 1;
  padding: 36px 24px;
  border-top: 1px solid #e2e5eb;
}

.faq-item:first-child.is-open {
  border-top: 0;
}

.faq-item:last-child.is-open {
  border-bottom: 0;
}

/* 리스트 없을 때 */
.faq-empty {
  margin-top: 32px;
  text-align: center;
  font-size: 16px;
  color: #666666;
}
@media (max-width: 768px) {
  .faq-empty {
    font-size: 14px;
  }
}

.faq-list.is-anim-list .faq-item {
  animation: faqListIn 0.6s cubic-bezier(0.16, 0.84, 0.44, 1);
  animation-fill-mode: backwards;
  animation-delay: var(--enter-delay, 0s);
}

@keyframes faqListIn {
  0% {
    opacity: 0;
    transform: translateX(32px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
/* =========================================================
    HI STOCK LOAN — Main SCSS (reorganized)
    Global Reset + Base Font + Color Scheme
========================================================= */
/* ① SCSS Modules (모든 @use는 최상단) */
/* ② 테마 & 공통 모듈 */
/* ============ 섹션 공통 ============ */
.online-sec {
  padding: 40px 0 80px;
}
@media (max-width: 768px) {
  .online-sec {
    padding: 32px 0 64px;
  }
}

/* 인트로 텍스트 */
.online-intro {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: #111111;
}
.online-intro + .online-intro {
  margin-top: 6px;
}
.online-intro--sub {
  font-size: 16px;
  font-weight: 500;
  color: #666666;
}
@media (max-width: 768px) {
  .online-intro {
    font-size: 16px;
  }
  .online-intro--sub {
    font-size: 14px;
  }
}

/* 상단 구분 라인 */
.online-divider {
  border: 0;
  border-top: 2px solid #111111;
  margin: 36px 0 0;
}

/* ============ 폼 공통 ============ */
.online-form {
  margin-top: 36px;
}

.online-form__fieldset {
  margin: 0;
  padding: 0 24px;
  border: 0;
}
.online-form__fieldset + .online-form__fieldset {
  margin-top: 36px;
}
@media (max-width: 768px) {
  .online-form__fieldset {
    padding: 0;
  }
}

.online-form__legend {
  margin-bottom: 24px;
  font-size: 18px;
  font-weight: 500;
  color: #111111;
}
.online-form__legend--message {
  font-size: 16px;
  font-weight: 400;
  margin-bottom: 16px;
  color: #666666;
}
@media (max-width: 768px) {
  .online-form__legend {
    font-size: 16px;
  }
}

/* 선택입력사항 레전드 */
.online-form__fieldset--optional .online-form__legend {
  color: #666666;
}

/* ============================= */
/* 필드 그리드: 모바일 1컬럼 / PC 2컬럼 */
/* ============================= */
.online-field-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px 24px;
  padding-bottom: 36px;
}
@media (min-width: 1200px) {
  .online-field-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.online-form__fieldset--required .online-field-grid {
  border-bottom: 1px solid #e2e5eb;
}

/* 개별 필드 */
.online-field {
  min-width: 0;
}
.online-field + .online-field {
  margin-top: 12px;
}

/* 그리드 내부에서는 margin 대신 gap 사용 */
.online-field-grid .online-field + .online-field {
  margin-top: 0;
}

/* 문의내용 텍스트에어리어는 전체폭 + 위 여백 */
.online-field--textarea {
  padding-bottom: 8px;
}
/* 인풋 / 셀렉트 / 텍스트에어리어 공통 */
.online-input,
.online-select,
.online-textarea {
  width: 100%;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  background: #f9fafb;
  font-size: 16px;
  font-family: inherit;
  padding: 14px 16px;
  color: #666666;
  line-height: 1.5;
  outline: none;
}
@media (max-width: 768px) {
  .online-input,
  .online-select,
  .online-textarea {
    font-size: 15px;
    padding: 13px 14px;
  }
}
.online-input::placeholder,
.online-select::placeholder,
.online-textarea::placeholder {
  color: #666666;
}
.online-input,
.online-select,
.online-textarea {
  /* ✅ 포커스 되거나, 값이 채워진(is-filled) 상태는 같은 스타일 */
}
.online-input:focus, .online-input.is-filled,
.online-select:focus,
.online-select.is-filled,
.online-textarea:focus,
.online-textarea.is-filled {
  border-color: #2563eb;
}
.online-input:focus, .online-input.is-filled,
.online-select:focus,
.online-select.is-filled,
.online-textarea:focus,
.online-textarea.is-filled {
  background: #fff;
  color: #111111;
}
.online-input.is-error,
.online-select.is-error,
.online-textarea.is-error {
  border-color: #ff2d7a;
}

/* 셀렉트 전용 */
.online-select-wrap {
  position: relative;
}

.online-select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 40px;
  cursor: pointer;
}

.online-select__arrow {
  position: absolute;
  top: 57%;
  right: 16px;
  width: 16px;
  height: 16px;
  pointer-events: none;
  transform: translateY(-43%);
}
.online-select__arrow::before {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid #6b7280;
}

/* 전화번호 그룹 */
.online-field--phone .online-phone {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  background: #f9fafb;
}
.online-field--phone {
  /* 010 셀렉트 + 가운데/뒤 번호를 1:1:1 비율로 */
}
.online-field--phone .online-phone > .online-select-wrap,
.online-field--phone .online-phone > .online-input--phone {
  flex: 1 1 0;
  min-width: 0;
}
.online-field--phone .online-select-wrap {
  position: relative;
}
.online-field--phone .online-select {
  width: 100%;
  border: 0;
  background: transparent;
  padding-left: 0;
  text-indent: 6px;
}
.online-field--phone .online-phone__dash {
  flex: 0 0 auto;
  margin: 0 2px;
  color: #9ca3af;
  font-size: 16px;
}
.online-field--phone .online-input--phone {
  border: 0;
  background: transparent;
  text-align: center;
  padding: 14px 0;
}
.online-field--phone .online-input--phone::placeholder {
  text-align: center;
}
.online-field--phone {
  /* 그룹에 is-filled 붙었을 때 한 박스처럼 강조 */
}
.online-field--phone.is-filled .online-phone {
  border-color: #2563eb;
  background: #ffffff;
  box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.1);
}
.online-field--phone.is-error .online-phone {
  border-color: #ff2d7a;
  background: #ffffff;
  box-shadow: 0 0 0 1px rgba(255, 45, 122, 0.12);
}

/* 연락가능시간 3칸 (타이틀 / 오전·오후 / 시간) */
.online-field--time .online-time {
  display: flex;
  align-items: stretch;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  background: #f9fafb;
  overflow: hidden;
}
.online-field--time {
  /* 각 칸을 1:1:1 비율로 */
}
.online-field--time .online-time__label,
.online-field--time .online-time__cell {
  flex: 1 1 0;
  min-width: 0;
}
.online-field--time {
  /* 타이틀 박스를 인풋처럼 보이게 */
}
.online-field--time .online-time__label {
  font-size: 16px;
  color: #666666;
  padding: 0 16px;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  white-space: nowrap;
}
@media (max-width: 768px) {
  .online-field--time .online-time__label {
    font-size: 15px;
    padding: 0 12px;
  }
}
.online-field--time .online-time__cell {
  position: relative;
}
.online-field--time .online-time__cell .online-select {
  width: 100%;
  border: 0;
  background: transparent;
  padding: 14px 40px 14px 12px;
}
.online-field--time {
  /* 그룹에 is-filled 붙었을 때 한 박스처럼 강조 */
}
.online-field--time.is-filled .online-time {
  border-color: #2563eb;
  background: #fff;
}

/* select는 이미 .online-select가 width:100%라서
   .online-time__cell에 flex만 주면 자동으로 1:1:1 맞춰짐 */
/* 금액 + 단위 */
.online-input-unit {
  position: relative;
}

.online-input-unit__suffix {
  position: absolute;
  top: 50%;
  right: 16px;
  transform: translateY(-50%);
  font-size: 15px;
  color: #666666;
}

/* 텍스트에어리어 */
.online-textarea {
  min-height: 160px;
  resize: vertical;
}

/* ============ 약관 동의 ============ */
.online-agree {
  margin-top: 36px;
  font-size: 18px;
}
@media (max-width: 768px) {
  .online-agree {
    margin-top: 28px;
    font-size: 16px;
  }
}

.online-agree__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 0;
}
.online-agree__row--all {
  padding-bottom: 10px;
}
.online-agree__row--item {
  padding-top: 10px;
  padding-bottom: 10px;
}

/* 체크박스 */
.online-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.online-check__input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.online-check__box {
  width: 20px;
  height: 20px;
  border-radius: 4px;
  border: 1px solid #111111;
  background: #fff;
  position: relative;
}

.online-check__input:checked + .online-check__box {
  background: #111111;
}

.online-check__input:checked + .online-check__box::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 2px;
  width: 8px;
  height: 11px;
  border-right: 3px solid #fff;
  border-bottom: 3px solid #fff;
  transform: rotate(40deg);
}

.online-check__label {
  color: #111111;
}

/* 전체 동의(첫번째 라인) 라벨만 굵게 */
.online-agree__row--all .online-check__label {
  font-weight: 700;
}

.online-check__badge {
  margin-left: 4px;
  font-size: 18px;
  color: #666666;
}

/* ✅ 첫 번째(개인정보 수집 및 이용, 필수) 배지만 굵게 */
.online-agree__row[data-online-terms=privacy] .online-check__badge {
  font-weight: 700;
  color: #111111;
}

/* 약관 토글 화살표 */
.online-agree__toggle {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: 0;
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.16s ease, transform 0.16s ease;
}
.online-agree__toggle::before {
  content: "∨";
  font-size: 18px;
  color: #111111;
  font-weight: 800;
  line-height: 1;
  transition: transform 0.16s ease, color 0.16s ease;
}
.online-agree__toggle.is-active::before {
  transform: rotate(180deg);
}
.online-agree__toggle:hover, .online-agree__toggle:focus-visible {
  background: #111111;
  font-weight: 900;
}
.online-agree__toggle:hover::before, .online-agree__toggle:focus-visible::before {
  color: #fff;
}

/* 행 아래 약관 상세 박스 (어코디언) */
.online-agree__detail {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  padding: 0;
  transition: max-height 0.26s ease, opacity 0.26s ease, padding 0.26s ease;
}

.online-agree__detail.is-open {
  max-height: 280px;
  opacity: 1;
  padding: 4px 24px 8px;
}

/* 바깥 박스: 테두리 + 배경 + 위아래 여백 담당 */
.online-agree__detail-inner {
  padding: 24px 12px;
  border-top: 1px solid #111111;
  border-bottom: 1px solid #111111;
  background: #fff;
  font-size: 14px;
  line-height: 1.8;
  color: #666666;
}
@media (max-width: 768px) {
  .online-agree__detail-inner {
    font-size: 12px;
  }
}
.online-agree__detail-inner p + p {
  margin-top: 24px;
}

/* 안쪽 박스: 실제 스크롤되는 영역 */
.online-agree__scroll {
  max-height: 210px;
  overflow-y: auto;
  padding-right: 24px;
}
@media (max-width: 768px) {
  .online-agree__scroll {
    max-height: 130px;
  }
}

/* 스크롤바 커스텀은 여기다 적용 */
.online-agree__scroll h1 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.7;
  color: #111111;
}
.online-agree__scroll .pl-20 {
  padding-left: 20px;
}
.online-agree__scroll::-webkit-scrollbar {
  -webkit-appearance: none;
  width: 12px;
  -webkit-overflow-scrolling: auto;
}
.online-agree__scroll::-webkit-scrollbar-track, .online-agree__scroll::-webkit-scrollbar-track-piece {
  border-radius: 10px;
  background-color: transparent !important;
  border: none !important;
  transition: background-color 0.2s ease;
}
.online-agree__scroll {
  /* ✅ 스크롤바 위에 직접 올렸을 때 */
  /* ✅ JS가 .is-hover 클래스 달아줄 때 트랙 색 표시 */
}
.online-agree__scroll.is-hover::-webkit-scrollbar-track, .online-agree__scroll.is-hover::-webkit-scrollbar-track-piece {
  background-color: #f2f3f8 !important;
}
.online-agree__scroll::-webkit-scrollbar-thumb {
  background-color: #2563eb;
  border-radius: 10px;
}
.online-agree__scroll::-webkit-scrollbar-button {
  display: none;
}
.online-agree__scroll p:first-child,
.online-agree__scroll p:nth-child(2) {
  padding-bottom: 36px;
}
.online-agree__scroll ol {
  padding: 12px 0;
}
.online-agree__scroll ol li {
  padding-bottom: 12px;
}
.online-agree__scroll ol li ul {
  padding: 12px;
}
.online-agree__scroll ol li ul li {
  padding-bottom: 2px;
}

/* ============ 제출 버튼 ============ */
.online-form__submit-wrap {
  margin-top: 36px;
  text-align: center;
}

.online-submit-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 240px;
  padding: 14px 40px;
  border-radius: 10px;
  border: 1px solid #2563eb;
  background: #2563eb;
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.16s ease, color 0.16s ease, box-shadow 0.16s ease, transform 0.08s ease;
}
.online-submit-btn:hover, .online-submit-btn:focus-visible {
  background: #fff;
  color: #2563eb;
  box-shadow: 0 3px 10px rgba(37, 99, 235, 0.32);
  transform: translateY(-1px);
}
.online-submit-btn:active {
  transform: translateY(0);
}
@media (max-width: 768px) {
  .online-submit-btn {
    width: 100%;
  }
}

/* =========================================================
    HI STOCK LOAN — Main SCSS (reorganized)
    Global Reset + Base Font + Color Scheme
========================================================= */
/* ① SCSS Modules (모든 @use는 최상단) */
/* ② 테마 & 공통 모듈 */
/* ============ 홈페이지 이용약관 ============ */
.doc-sec {
  padding: 40px 0 80px;
}
@media (max-width: 768px) {
  .doc-sec {
    padding: 32px 0 64px;
  }
}

.is-capturing .doc-highlight {
  align-items: center;
}
.is-capturing .doc-highlight__body {
  min-height: 32px;
  display: flex;
  align-items: center;
}
.is-capturing .doc-highlight__body p {
  transform: translateY(-10px);
}

/* 상단 큰 타이틀 (시안 기준 중앙 정렬) */
.doc-title {
  margin: 0 0 24px;
  text-align: center;
  font-size: 28px;
  font-weight: 700;
  color: #111111;
}
@media (max-width: 768px) {
  .doc-title {
    font-size: 22px;
  }
}

/* 시행/변경일자 메타 영역 */
.doc-meta {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  margin-bottom: 36px;
  position: relative;
  z-index: 5;
}
@media (max-width: 768px) {
  .doc-meta {
    margin-bottom: 28px;
  }
}

.doc-meta__label {
  font-size: 18px;
  font-weight: 700;
  color: #111111;
}
@media (max-width: 768px) {
  .doc-meta__label {
    font-size: 16px;
  }
}

/* 메타 select: 온라인 select 스타일을 조금 줄인 버전 */
.doc-meta__select {
  position: relative;
}
.doc-meta__select .sub-select {
  width: 180px;
  z-index: 6;
}
.doc-meta__select .sub-select.is-open .sub-select__btn {
  outline: none;
  background: #fff;
  border-radius: 10px 10px 0 0;
  border-top: 1px solid #111111;
  border-left: 1px solid #111111;
  border-right: 1px solid #111111;
  border-bottom: 1px solid #e6e8ef;
}
.doc-meta__select .sub-select__btn {
  width: 100%;
  min-height: 38px;
  padding: 8px 34px 8px 14px;
  border-radius: 10px;
  border: 1px solid #e6e8ef;
  background: #f7f8fb;
  font-size: 14px;
  color: #111111;
  font-weight: 500;
}
.doc-meta__select .sub-select__icon {
  right: 12px;
  background-size: 12px 10px;
}
.doc-meta__select .sub-select__list {
  border-top: none;
  border-radius: 0 0 10px 10px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
  border-top: 1px solid #e6e8ef;
  border-left: 1px solid #111111;
  border-right: 1px solid #111111;
  border-bottom: 1px solid #111111;
  background: #fff;
  padding: 10px 0;
  top: 39px;
  font-weight: 500;
  z-index: 60;
}
.doc-meta__select .sub-select__list li {
  border-radius: 0;
  padding: 8px 14px;
  font-size: 14px;
}
.doc-meta__select .sub-select__list .is-active {
  text-decoration-line: underline;
  text-underline-offset: 1px;
}

.doc-table {
  margin: 12px 0;
  overflow-x: auto;
}
.doc-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: 16px;
}
.doc-table table th,
.doc-table table td {
  border: 1px solid #e6e8ef;
  padding: 10px 12px;
  text-align: left;
  vertical-align: top;
}
.doc-table table th {
  background: #f7f8fb;
  font-weight: 600;
}

/* 상단 구분 라인 */
.doc-divider {
  border: 0;
  border-top: 2px solid #111111;
}

/* 본문 래퍼: 가운데 정렬, 폭 제한 */
.doc-body {
  max-width: 100%;
  margin: 36px 24px;
  font-size: 18px;
  line-height: 1.9;
  color: #666666;
}
@media (max-width: 768px) {
  .doc-body {
    margin: 28px 0;
    font-size: 16px;
  }
}

/* 본문 내부 큰 제목 */
.doc-body__title {
  margin: 0 0 70px;
  font-size: 24px;
  font-weight: 700;
  color: #111111;
}
@media (max-width: 768px) {
  .doc-body__title {
    font-size: 21px;
    margin-bottom: 60px;
  }
}

/* 조(條) 단위 섹션 */
.doc-article {
  font-size: 18px;
  margin: 0 0 60px;
}
.doc-article + .doc-article {
  margin-top: 28px;
}
@media (max-width: 768px) {
  .doc-article + .doc-article {
    margin-top: 24px;
  }
}

/* “제 1 조 (목적)” 제목 */
.doc-article__heading {
  margin: 0 0 36px;
  font-weight: 600;
  color: #111111;
}
@media (max-width: 768px) {
  .doc-article__heading {
    font-size: 16px;
    margin-bottom: 24px;
  }
}

.doc-article__subheading {
  margin: 24px 0 12px;
  font-size: 18px;
  font-weight: 700;
  color: #666666;
}
.doc-article__subheading:first-child {
  margin-top: 0;
}
@media (max-width: 768px) {
  .doc-article__subheading {
    font-size: 16px;
    margin: 20px 0 10px;
  }
}

/* 리스트/문단 공통 */
.doc-article p {
  margin: 0 0 24px;
}

.doc-article__list {
  margin: 0;
  padding: 0;
}
.doc-article__list li {
  margin-bottom: 8px;
}
.doc-article__list ol,
.doc-article__list ul {
  margin-top: 4px;
  padding-left: 0px;
}
.doc-article__list li ul {
  padding-left: 20px;
}
.doc-article__list li ul li {
  margin-bottom: 4px;
}

.doc-article--raw {
  font-size: 18px;
}
.doc-article--raw h1 {
  margin: 48px 0 24px;
  font-size: 18px;
  font-weight: 700;
  color: #111111;
}
.doc-article--raw h2 {
  margin: 24px 0 12px;
  font-size: 18px;
  font-weight: 600;
  color: #111111;
}
.doc-article--raw p {
  margin: 0 0 18px;
}
.doc-article--raw table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  margin: 16px 0;
}
.doc-article--raw th,
.doc-article--raw td {
  border: 1px solid #e6e8ef;
  padding: 10px 12px;
  text-align: left;
  vertical-align: top;
}
.doc-article--raw th {
  background: #f7f8fb;
  font-weight: 600;
}

.doc-article__list--sub {
  margin-bottom: 24px;
  padding-left: 16px;
}
.doc-article__list--sub li {
  list-style: circle;
  margin-left: 8px;
}
.doc-article__list--sub ol {
  margin: 8px 0 0 10px;
  padding-bottom: 2px;
}
.doc-article__list--sub ol li {
  list-style: lower-roman;
}

.doc-highlight {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 18px 20px;
  margin-bottom: 60px;
  border-radius: 10px;
  background: rgba(37, 99, 235, 0.08);
  border: 1px solid rgba(37, 99, 235, 0.25);
  color: #111111;
  font-size: 18px;
}
.doc-highlight__icon {
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
}
.doc-highlight__icon svg {
  width: 100%;
  height: 100%;
  display: block;
  filter: drop-shadow(0 4px 10px rgba(37, 99, 235, 0.35));
}
.doc-highlight__body {
  flex: 1;
}
.doc-highlight__body .doc-highlight__content {
  display: flex;
  align-items: center;
  min-height: 32px;
  width: 100%;
  font: inherit;
  line-height: inherit;
  color: inherit;
}
.doc-highlight__body p {
  margin: 0;
  font: inherit;
  line-height: inherit;
  color: inherit;
}
@media (max-width: 768px) {
  .doc-highlight {
    padding: 16px;
    font-size: 16px;
    gap: 10px;
  }
}

.pl-30 {
  padding-left: 30px;
}

.pt-20 {
  padding-top: 20px;
}

.mt-min-15 {
  margin-top: -15px;
}

.mb-10 {
  margin-bottom: 10px;
}

.border-0 {
  border: 0 !important;
}

.mt-60 {
  margin-top: 60px;
}

/* =========================================================
    HI STOCK LOAN — Main SCSS (reorganized)
    Global Reset + Base Font + Color Scheme
========================================================= */
/* ① SCSS Modules (모든 @use는 최상단) */
/* ② 테마 & 공통 모듈 */
.invest {
  padding: 0 0 120px;
}
.invest__inner {
  max-width: 1200px;
  margin: 0 auto;
}

.invest-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 32px;
  gap: 16px;
}
.invest-head__meta {
  display: flex;
  align-items: center;
  gap: 8px;
}
.invest-head__issue-label {
  font-size: 16px;
  font-weight: 400;
  color: #666666;
}
.invest-head__issue {
  font-size: 16px;
}
.invest-head__date {
  position: relative;
  display: inline-flex;
  align-items: center;
  font-size: 16px;
  font-weight: 700;
  color: #111111;
  background: none;
  border: 0;
  border-radius: 14px;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
  padding: 0;
}
.invest-head__date:hover, .invest-head__date:focus-visible {
  color: #2563eb;
}

.invest-calendar-btn {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  color: #111111;
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;
}
.invest-calendar-btn svg {
  width: 28px;
  height: 28px;
}
.invest-head__date:hover .invest-calendar-btn, .invest-head__date:focus-visible .invest-calendar-btn {
  color: #2563eb;
}

.invest-calendar-input {
  position: absolute;
  right: 172px;
  top: calc(100% - 36px);
  width: 48px;
  height: 40px;
  opacity: 0;
  pointer-events: none;
  border: 0;
  background: transparent;
}

.invest-block {
  margin-bottom: 60px;
}
.invest-block__head {
  margin-bottom: 28px;
}
.invest-block__title {
  margin: 0 0 24px;
  font-size: clamp(21px, 3vw, 24px);
  font-weight: 700;
}
.invest-block__desc {
  margin: 0;
  font-size: clamp(18px, 3vw, 21px);
}

.invest-block:first-of-type {
  margin-bottom: 120px;
}

.invest-table {
  font-size: 16px;
  overflow-x: auto;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 10px 32px rgba(15, 23, 42, 0.08);
  border: 1px solid #e6e8ef;
}
.invest-table table {
  width: 100%;
  border-collapse: collapse;
  padding: 8px 0;
}
.invest-table thead th {
  background: #f7f8fb;
  color: #111111;
  font-weight: 700;
  padding: 16px 24px;
  text-align: center;
  border-bottom: 1px solid #111111;
}
@media (max-width: 1199px) {
  .invest-table thead th {
    padding: 12px;
  }
}
.invest-table tbody td {
  border-bottom: 1px solid #e6e8ef;
  padding: 16px 24px;
  text-align: center;
}
@media (max-width: 1199px) {
  .invest-table tbody td {
    padding: 12px;
  }
}
@media (max-width: 1199px) {
  .invest-table tbody td {
    padding: 12px;
  }
}
.invest-table tbody tr:last-child td {
  border-bottom: 0;
}
.invest-table--recommend td:nth-child(1) {
  text-align: left;
  width: 15%;
}
.invest-table--recommend td:nth-child(2) {
  text-align: left;
  width: 15%;
}
.invest-table--recommend td:nth-child(3) {
  text-align: left;
}
.invest-table--matrix thead tr:first-child th {
  background: #fff;
  color: #111111;
}
.invest-table--matrix thead tr:nth-child(2) th {
  background: #f7f8fb;
  color: #111111;
  border-bottom: 1px solid #111111;
}

.invest-matrix-head--buy {
  color: #ff2d7a !important;
  border-bottom: 1px solid #ff2d7a !important;
}

.invest-matrix-head--sell {
  color: #2563eb !important;
  border-bottom: 1px solid #2563eb !important;
}

.invest-empty {
  margin: 0;
  padding: 32px 0;
  text-align: center;
  color: #9ca3af;
}

.invest-error {
  text-align: center;
  font-size: 15px;
  color: #ef4444;
  margin-top: 24px;
}

@media (max-width: 768px) {
  .invest-head {
    gap: 8px;
  }
}
.invest-notice {
  padding: 36px;
}
.invest-notice .invest-notice__texts {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.invest-notice .invest-notice__texts strong {
  font-size: 16px;
  padding: 5px 0;
  color: #2563eb;
}
.invest-notice .invest-notice__texts p {
  margin: 0;
  font-size: 15px;
  color: #666666;
  line-height: 1.6;
}

.invest-notice.doc-highlight {
  margin-bottom: 0;
  border-radius: 20px;
}

/* =========================================================
    HI STOCK LOAN — Main SCSS (reorganized)
    Global Reset + Base Font + Color Scheme
========================================================= */
/* ① SCSS Modules (모든 @use는 최상단) */
/* ② 테마 & 공통 모듈 */
.perpbr {
  padding: 0 0 120px;
}
.perpbr__inner {
  max-width: 1200px;
  margin: 0 auto;
}

.perpbr-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 36px;
  gap: 16px;
  position: relative;
  z-index: 2;
}
.perpbr-head__issn {
  display: inline-flex;
  align-items: center;
  font-size: 16px;
  color: #666666;
  border: 0;
  background: none;
  border-radius: 14px;
  cursor: pointer;
  transition: background-color 0.2s ease;
  position: relative;
  padding: 0;
}
.perpbr-head__baseline {
  font-weight: 700;
  color: #111111;
}
@media (max-width: 479px) {
  .perpbr-head {
    flex-direction: column-reverse;
    align-items: flex-end;
    gap: 12px;
    margin-bottom: 28px;
  }
}

.perpbr-calendar {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #111111;
  transition: color 0.2s ease;
}
.perpbr-calendar svg {
  width: 28px;
  height: 28px;
}

.perpbr-calendar__input {
  position: absolute;
  right: 85px;
  top: calc(100% - 28px);
  opacity: 0;
  pointer-events: none;
}

.perpbr-sort {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #fff;
  z-index: 5;
}
.perpbr-sort__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 0;
  background: transparent;
  font-size: 16px;
  color: #111111;
  cursor: pointer;
  padding: 6px 0;
}
.perpbr-sort__icon {
  position: relative;
  width: 12px;
  height: 12px;
  display: inline-block;
  margin-left: 2px;
}
.perpbr-sort__icon::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  width: 2px;
  height: 11px;
  background: currentColor;
  border-radius: 1px;
}
.perpbr-sort__icon::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 4px;
  width: 8px;
  height: 8px;
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateX(-50%) rotate(-45deg);
}
.perpbr-sort__btn:hover .perpbr-sort__icon, .perpbr-sort__btn:focus-visible .perpbr-sort__icon, .perpbr-sort.is-open .perpbr-sort__icon {
  animation: loanSortArrowBounce 0.8s ease-in-out infinite;
}
.perpbr-sort__list {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 140px;
  padding: 6px;
  border-radius: 12px;
  border: 1px solid #e6e8ef;
  background: #fff;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
  display: none;
  z-index: 60;
}
.perpbr-sort__list li {
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  white-space: nowrap;
  margin-bottom: 5px;
}
.perpbr-sort__list li:last-child {
  margin-bottom: 0;
}
.perpbr-sort__list li.is-active, .perpbr-sort__list li:hover {
  background: #f3f4f6;
  color: #111111;
}
.perpbr-sort.is-open .perpbr-sort__list {
  display: block;
}
@media (max-width: 479px) {
  .perpbr-sort {
    margin-right: 10px;
  }
}

.perpbr-head__issn:hover .perpbr-head__baseline,
.perpbr-head__issn:focus-visible .perpbr-head__baseline,
.perpbr-head__issn:hover .perpbr-calendar,
.perpbr-head__issn:focus-visible .perpbr-calendar {
  color: #2563eb;
}

.perpbr-tabs {
  position: relative;
  display: flex;
  gap: 0;
  border-bottom: 1px solid #e6e8ef;
  margin-bottom: 60px;
}
.perpbr-tabs::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 33.3333333333%;
  height: 2px;
  background: #111111;
  transform: translateX(100%);
  transition: transform 0.3s ease;
}
.perpbr-tabs[data-active-index="0"]::after {
  transform: translateX(0%);
}
.perpbr-tabs[data-active-index="1"]::after {
  transform: translateX(100%);
}
.perpbr-tabs[data-active-index="2"]::after {
  transform: translateX(200%);
}
.perpbr-tabs .perpbr-tab {
  flex: 1 1 33.333%;
  text-align: center;
  border: 0;
  background: transparent;
  padding: 36px 24px;
  font-size: var(--font-24px);
  font-weight: 500;
  color: #666666;
  cursor: pointer;
  text-shadow: 0 0 0 transparent;
  transition: color 0.2s ease, text-shadow 0.2s ease;
}
@media (max-width: 768px) {
  .perpbr-tabs .perpbr-tab {
    padding: 24px 12px;
  }
}
.perpbr-tabs .perpbr-tab.is-active {
  color: #111111;
  text-shadow: 0.02em 0 currentColor, -0.02em 0 currentColor;
}

.perpbr-table {
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 10px 32px rgba(20, 23, 42, 0.08);
  border: 1px solid #e6e8ef;
  overflow-x: auto;
}
.perpbr-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: 16px;
  table-layout: fixed;
  min-width: 960px;
}
@media (max-width: 1200px) {
  .perpbr-table table {
    min-width: 820px;
  }
}
@media (max-width: 768px) {
  .perpbr-table table {
    table-layout: auto;
    min-width: 640px;
  }
}
.perpbr-table thead th {
  padding: 18px 16px;
}
@media (min-width: 1200px) {
  .perpbr-table thead th {
    padding: 20px 28px;
  }
}
@media (max-width: 768px) {
  .perpbr-table thead th {
    padding: 12px 8px;
    white-space: nowrap;
  }
}
.perpbr-table thead th {
  font-weight: 700;
  text-align: center;
  color: #111111;
  border-bottom: 1px solid #111111;
  background: #f7f8fb;
}
.perpbr-table .perpbr-head-metric {
  font-weight: 600;
  color: #666666;
  transition: color 0.2s ease;
}
.perpbr-table .perpbr-head-metric.is-active {
  color: #111111;
}
.perpbr-table .perpbr-head-indicator {
  display: inline-block;
  margin-left: 6px;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid currentColor;
  position: relative;
  top: -2px;
}
.perpbr-table tbody td {
  padding: 14px 18px;
}
@media (min-width: 1200px) {
  .perpbr-table tbody td {
    padding: 16px 28px;
  }
}
@media (max-width: 768px) {
  .perpbr-table tbody td {
    padding: 10px 8px;
    white-space: nowrap;
  }
}
.perpbr-table tbody td {
  text-align: center;
  border-bottom: 1px solid #e6e8ef;
}
.perpbr-table tbody td.txt-right {
  text-align: right;
}
.perpbr-table .perpbr-metric.is-active {
  font-weight: 700;
  color: #111111;
}
.perpbr-table tbody td.txt-left {
  text-align: left;
}
.perpbr-table thead th:nth-child(1),
.perpbr-table tbody td:nth-child(1) {
  width: 8%;
  min-width: 60px;
}
.perpbr-table thead th:nth-child(2),
.perpbr-table tbody td:nth-child(2) {
  width: 24%;
  min-width: 160px;
}
.perpbr-table thead th:nth-child(3),
.perpbr-table tbody td:nth-child(3),
.perpbr-table thead th:nth-child(4),
.perpbr-table tbody td:nth-child(4) {
  width: 17%;
  min-width: 110px;
}
.perpbr-table thead th:nth-child(5),
.perpbr-table tbody td:nth-child(5) {
  width: 17%;
  min-width: 120px;
}
.perpbr-table thead th:nth-child(6),
.perpbr-table tbody td:nth-child(6) {
  width: 17%;
  min-width: 120px;
}
.perpbr-table tbody tr:last-child td {
  border-bottom: 0;
}

.perpbr-table .is-up {
  color: #ef4444;
}

.perpbr-table .is-down {
  color: #2563eb;
}

.perpbr-empty {
  margin: 0;
  padding: 40px 0;
  text-align: center;
  color: #666666;
}

.perpbr-more {
  text-align: center;
  margin-top: 48px;
}
.perpbr-more__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 240px;
  padding: 14px 32px;
  border-radius: 10px;
  border: 1px solid #e2e5eb;
  background: #e2e5eb;
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.18s ease, box-shadow 0.18s ease, transform 0.12s ease;
}
.perpbr-more__btn:hover, .perpbr-more__btn:focus-visible {
  background: #fff;
  box-shadow: 0 3px 10px rgba(15, 23, 42, 0.18);
  transform: translateY(-1px);
}
.perpbr-more__btn.is-disabled {
  opacity: 0.4;
  pointer-events: none;
  cursor: default;
  box-shadow: none;
  transform: none;
}
.perpbr-more__page {
  margin-left: 8px;
  font-weight: 400;
  color: #6b7280;
}
@media (max-width: 768px) {
  .perpbr-more__btn {
    width: 100%;
  }
}

.perpbr-error {
  text-align: center;
  font-size: 15px;
  color: #ef4444;
  margin-top: 16px;
}

/* ④ Global Reset */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-family: var(--font-ui);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

html, body {
  min-height: 100%;
  font-weight: 400;
  line-height: 1.5;
  background: #fff;
  word-break: keep-all;
  overflow-x: hidden;
}

body {
  color: #111111;
  font-size: var(--font-16px);
}

h1, .h1 {
  font-size: var(--font-32px);
  line-height: 1.25;
}

h2, .h2 {
  font-size: var(--font-30px);
  line-height: 1.3;
}

h3, .h3 {
  font-size: var(--font-24px);
  line-height: 1.35;
}

p, li {
  font-size: var(--font-16px);
  line-height: 1.6;
}

small, .caption {
  font-size: var(--font-14px);
  line-height: 1.4;
}

h1, h2, h3, h4, h5, h6,
p, ul, ol {
  margin: 0;
}

a {
  text-decoration: none;
  color: inherit;
  outline: none;
  cursor: pointer;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

.a11y-hidden {
  position: absolute;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  width: 1px;
  height: 1px;
  overflow: hidden;
  white-space: nowrap;
}

.container {
  width: min(100% - 24px, 1200px);
  margin-inline: auto;
}

.search-highlight {
  background: #fff2a8;
  color: inherit;
  padding: 0 2px;
  border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 16px;
  border-radius: 12px;
  border: 1px solid transparent;
  font-weight: 700;
  cursor: pointer;
  transition: 0.2s ease;
  text-decoration: none;
}

.btn-block {
  width: 100%;
}

.btn-primary {
  background: #2090ff;
  color: #fff;
  box-shadow: 0 6px 16px rgba(17, 24, 39, 0.1);
}

.btn-primary:hover {
  filter: brightness(1.05);
}

/* 접근성용 숨김 텍스트 */
.blind {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/*# sourceMappingURL=main.css.map */