@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 :is(h1, .seo-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 :is(h1, .seo-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 :is(h1, .seo-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 :is(h1, .seo-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 :is(h1, .seo-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 :is(h1, .seo-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 :is(h1, .seo-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 :is(h1, .seo-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 :is(h1, .seo-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 :is(h1, .seo-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 :is(h1, .seo-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 */