@charset "utf-8";

/*
 * KAPA 전역 레이아웃 보정
 * vertical-rhythm.min.css 로드 후, responsive.css 다음에 연결
 */

/* 상단 로고: 막대 높이에서 위아래만 조금 남기고 채움 */
.main-nav.small-height .nav-logo-wrap .logo {
    height: var(--menu-bar-height-scrolled);
}
.nav-logo-wrap .logo img,
.nav-logo-wrap .logo img:not([draggable]) {
    height: calc(100% - 12px);
    width: auto;
    max-height: none;
    max-width: none;
}

/* 화면에는 안 보이지만 읽기 프로그램은 읽는 안내 글 */
.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* ── 간격 유틸 보완 (원본 vertical-rhythm에 없는 값) ── */
.mb-12 {
    margin-bottom: 12px !important;
}

@media only screen and (max-width: 767px) {
    .mb-sm-15 {
        margin-bottom: 15px !important;
    }
}

@media only screen and (max-width: 480px) {
    .mb-xxs-30 {
        margin-bottom: 30px !important;
    }
}

/* ── 짧은 페이지 푸터 하단 고정 ── */
.page {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100svh;
}

.page > main,
.page > #main {
    flex: 1 0 auto;
}

/* ── 서브 히어로: 고정 메뉴·타이틀 겹침 방지 (전 페이지 동일 = 뉴스 기준) ── */
#main > section.page-section.pb-100:first-of-type {
    margin-top: 0 !important;
    padding-top: calc(var(--menu-bar-height, 85px) + 15px) !important;
    padding-bottom: 75px !important;
    min-height: 230px;
    box-sizing: border-box;
}

/* 서브 페이지 상단 흰 덮개 농도. 숫자만 바꾸면 전 페이지에 적용됩니다. */
#main > section.page-section.pb-100[class*="bg-light-alpha"]:first-of-type::before {
    background: rgba(252, 252, 252, 0.7);
}

#main > section.page-section.pb-100:first-of-type > .container.pt-50 {
    padding-top: 12px !important;
}

@media only screen and (max-width: 991px) {
    #main > section.page-section.pb-100:first-of-type {
        padding-top: calc(var(--menu-bar-height-scrolled, 65px) + 12px) !important;
        padding-bottom: 40px !important;
        min-height: 200px;
    }
}

/* 본문 바로가기: 페이지 CSS가 .btn { position:relative } 로 덮어쓰면 상단이 밀림 */
a.btn.skip-to-content {
    position: absolute !important;
}

/* ── 서브 히어로: 상위메뉴 pill(회원등록업무 등) 전 페이지 비표시 ── */
#main > section.page-section.pb-100:first-of-type h2.section-caption-border {
    display: none !important;
}

/* ── 서브 본문 섹션 기본 여백 유지 ── */
/* hero-shortcut-section 제외: 바로가기 글래스 패널 아래 48px 틈이 생겨 떠 보이는 문제 방지 */
#main > section.page-section:not(.pb-100):not(.hero-shortcut-section) {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
}

@media only screen and (max-width: 991px) {
    #main > section.page-section:not(.pb-100):not(.hero-shortcut-section) {
        padding-top: 40px !important;
        padding-bottom: 40px !important;
    }
}

/* ── 서브 히어로: 긴 제목 2줄 처리 (한 단어만 떨어지는 현상 완화) ── */
#main > section.page-section.pb-100:first-of-type .hs-title-1,
#main > section.page-section.pb-100:first-of-type .hs-title-1 #page-hero-title {
    word-break: keep-all;
    overflow-wrap: normal;
    text-wrap: balance;
    line-height: 1.25;
}

@media (min-width: 992px) {
    /* col-md-8(66%)보다 넓게 — 긴 탭명·메뉴명 한 줄 또는 균형 잡힌 2줄 */
    #main > section.page-section.pb-100:first-of-type .col-md-8.offset-md-2 {
        width: 83.33333333%;
        margin-left: 8.33333333%;
    }

    /* base 70px 고정 대신 길이에 맞게 유동 (서브 히어로만) — 약 4~5pt 축소 */
    #main > section.page-section.pb-100:first-of-type .hs-title-1 {
        font-size: clamp(1.875rem, 2vw + 0.9rem, 2.875rem);
    }
}

/* ── 서브 히어로: 메인 타이틀 — 모바일 통일 ── */
@media only screen and (max-width: 768px) {
    #main > section.page-section.pb-100:first-of-type .hs-title-1 {
        font-size: clamp(20px, 6vw, 28px) !important;
    }
}

/* ── 비클릭 정보 카드: hover 반응 제거 (링크·버튼 오해 방지) ── */
/* features-2 / 정보용 alt-features / 안내 카드 등은 클릭 불가 → hover 변화 없음 */
.features-2-item:hover:before {
    opacity: 0.15;
}
.light-content .features-2-item:hover:before {
    opacity: 1;
    background: var(--color-dark-mode-gray-2);
}

/* 협회주요업무 등: div 카드는 손가락 커서·떠오름 금지 */
div.alt-features-item.box-shadow,
#mainTasks .alt-features-item.box-shadow {
    cursor: default !important;
    transform: none !important;
}
div.alt-features-item.box-shadow:hover,
#mainTasks .alt-features-item.box-shadow:hover {
    cursor: default !important;
    transform: none !important;
}

.fee-main-card:hover,
.facility-card:hover {
    transform: none;
    box-shadow: var(--box-shadow);
}

.usage-example-item:hover {
    transform: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* ── 콘텐츠 탭: 페이지 수와 관계없이 동일한 버튼 상태로 제공 ── */
#main ul.nav.nav-tabs.tpl-minimal-tabs--button-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
    width: min(100%, 940px);
    margin-right: auto;
    margin-left: auto;
    padding: 0;
    border: 0;
}

#main ul.nav.nav-tabs.tpl-minimal-tabs--button-grid > li.nav-item {
    display: block;
    flex: 0 1 220px;
    min-width: 0;
    margin: 0;
    padding: 0;
}

/* 회원등록업무처럼 9개 탭은 데스크톱에서 5개·4개로 두 줄 고정 */
#main ul.nav.nav-tabs.tpl-minimal-tabs--button-grid.tpl-minimal-tabs--two-rows > li.nav-item {
    flex-basis: calc((100% - 64px) / 5);
}

#main ul.nav.nav-tabs.tpl-minimal-tabs--button-grid > li.nav-item > a.nav-link,
#main ul.nav.nav-tabs.tpl-minimal-tabs--button-grid > li.nav-item > a.nav-link:focus {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    height: 100%;
    padding: 8px 14px;
    line-height: 1.35;
    white-space: normal;
    text-align: center;
    background: #fff;
    border: 1px solid var(--color-gray-light-4);
    border-radius: 100px !important;
}

#main ul.nav.nav-tabs.tpl-minimal-tabs--button-grid > li.nav-item > a.nav-link:hover {
    background: rgba(0, 130, 200, 0.06);
    border-color: var(--kapa-blue) !important;
    color: var(--kapa-blue);
}

#main ul.nav.nav-tabs.tpl-minimal-tabs--button-grid > li.nav-item > a.nav-link.active,
#main ul.nav.nav-tabs.tpl-minimal-tabs--button-grid > li.nav-item > a.nav-link.active:hover {
    background: var(--kapa-blue) !important;
    border-color: var(--kapa-blue) !important;
    color: #fff !important;
    font-weight: 600;
}

#main ul.nav.nav-tabs.tpl-minimal-tabs--button-grid > li.nav-item > a.nav-link:focus-visible {
    outline: 2px solid var(--kapa-blue);
    outline-offset: 2px;
}

@media (max-width: 767px) {
    #main ul.nav.nav-tabs.tpl-minimal-tabs--button-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    #main ul.nav.nav-tabs.tpl-minimal-tabs--button-grid > li.nav-item {
        width: auto;
        flex: none;
        max-width: none;
    }

    #main ul.nav.nav-tabs.tpl-minimal-tabs--button-grid > li.nav-item:last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }
}

/* ── 콘텐츠 필터 탭: 탭 버튼 시스템과 동일한 상태로 제공 ── */
#main .works-filter.works-filter--button-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
    width: min(100%, 940px);
    margin-right: auto;
    margin-left: auto;
}

#main .works-filter.works-filter--button-grid > a.filter {
    display: flex;
    flex: 0 1 220px;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    margin: 0;
    padding: 8px 14px;
    line-height: 1.35;
    white-space: normal;
    text-align: center;
    color: var(--color-dark-1);
    background: #fff;
    border: 1px solid var(--color-gray-light-4);
    border-radius: 100px;
}

#main .works-filter.works-filter--button-grid > a.filter::after {
    display: none;
}

#main .works-filter.works-filter--button-grid > a.filter:hover {
    color: var(--kapa-blue);
    background: rgba(0, 130, 200, 0.06);
    border-color: var(--kapa-blue);
}

#main .works-filter.works-filter--button-grid > a.filter.active,
#main .works-filter.works-filter--button-grid > a.filter.active:hover {
    color: #fff;
    background: var(--kapa-blue);
    border-color: var(--kapa-blue);
    font-weight: 600;
}

#main .works-filter.works-filter--button-grid > a.filter:focus-visible {
    outline: 2px solid var(--kapa-blue);
    outline-offset: 2px;
}

@media (max-width: 767px) {
    #main .works-filter.works-filter--button-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    #main .works-filter.works-filter--button-grid > a.filter {
        width: auto;
        min-width: 0;
    }

    #main .works-filter.works-filter--button-grid > a.filter:last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }
}

/* 상단 '회원전용' 단추: 유리 질감 (글자는 진하게 유지) */
.main-nav .inner-nav > ul > li > a.no-hover > .btn.btn-mod.btn-border.btn-small.btn-circle {
    background: rgba(255, 255, 255, 0.38);
    border-color: rgba(255, 255, 255, 0.72);
    color: var(--color-dark-1);
    box-shadow:
        0 0 0 1px rgba(17, 17, 17, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.65);
    backdrop-filter: blur(12px) saturate(1.2);
    -webkit-backdrop-filter: blur(12px) saturate(1.2);
}

.main-nav .inner-nav > ul > li > a.no-hover:hover > .btn.btn-mod.btn-border.btn-small.btn-circle,
.main-nav .inner-nav > ul > li > a.no-hover:focus-visible > .btn.btn-mod.btn-border.btn-small.btn-circle {
    background: rgba(255, 255, 255, 0.52);
    border-color: rgba(255, 255, 255, 0.88);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .main-nav .inner-nav > ul > li > a.no-hover > .btn.btn-mod.btn-border.btn-small.btn-circle {
        background: rgba(255, 255, 255, 0.92);
    }
}

/* ── 반응형 GNB: JavaScript 초기화 전 데스크톱 메뉴 노출 방지 ── */
@media (max-width: 1279px) {
    html.js .main-nav .desktop-nav:not(.js-opened) {
        display: none;
    }

    html.js .main-nav .mobile-nav {
        display: flex;
        appearance: none;
        border: 0;
        background: transparent;
        font: inherit;
    }

    /* 모바일 메뉴도 PC 메가 메뉴와 동일한 화이트·블루 컬러 체계 적용 */
    .main-nav.mobile-on .desktop-nav ul {
        background: #fff;
    }

    .main-nav.mobile-on .mn-sub {
        background: #f5faff;
    }

    .main-nav.mobile-on .desktop-nav ul li ul {
        border-bottom-color: rgba(var(--kapa-blue-rgb, 0, 130, 200), 0.18);
    }

    .main-nav.mobile-on .desktop-nav ul li a {
        color: #334155 !important;
        border-bottom-color: rgba(var(--kapa-blue-rgb, 0, 130, 200), 0.14);
    }

    .main-nav.mobile-on .desktop-nav ul li a:hover,
    .main-nav.mobile-on .desktop-nav ul li a.active {
        background: #e8f4fb;
        color: var(--kapa-blue-dark, #005DAB) !important;
    }

    .main-nav.mobile-on .mn-group-title {
        color: #334155 !important;
    }

    .main-nav.mobile-on .desktop-nav .mn-sub ul.mn-sub-nested-list > li > a {
        border-bottom-color: rgba(var(--kapa-blue-rgb, 0, 130, 200), 0.14) !important;
    }

    .main-nav.mobile-on .mn-has-sub > .mi-chevron-down,
    .main-nav.mobile-on .mn-has-sub > .mi-chevron-right {
        border-color: rgba(var(--kapa-blue-rgb, 0, 130, 200), 0.35);
        color: var(--kapa-blue, #0082C8);
    }

    .main-nav.mobile-on .js-opened > .mn-has-sub > .mi-chevron-down,
    .main-nav.mobile-on .js-opened > .mn-has-sub > .mi-chevron-right {
        border-color: var(--kapa-blue, #0082C8);
    }

    /* 모바일 펼침 메뉴: 활성 표시는 텍스트·밑줄만 사용하고 하위 메뉴를 분리 */
    .main-nav.mobile-on .desktop-nav > ul > li.js-opened > .mn-has-sub {
        color: var(--kapa-blue-dark, #005DAB) !important;
        background: #fff !important;
        font-weight: 700;
    }

    .main-nav.mobile-on .desktop-nav > ul > li.js-opened > .mn-has-sub::after {
        content: "";
        position: absolute;
        right: 16px;
        bottom: 0;
        left: 16px;
        height: 2px;
        background: var(--kapa-blue, #0082C8);
    }

    .main-nav.mobile-on .desktop-nav > ul > li.js-opened > .mn-sub {
        width: calc(100% - 16px);
        margin: 0 8px 12px;
        background: #fff !important;
        border: 1px solid rgba(var(--kapa-blue-rgb, 0, 130, 200), 0.2);
        border-top: 0;
        border-radius: 0 0 8px 8px;
        box-sizing: border-box;
    }

    .main-nav.mobile-on .desktop-nav > ul > li.js-opened > .mn-sub li {
        padding-left: 0;
    }

    .main-nav.mobile-on .desktop-nav > ul > li.js-opened > .mn-sub li > a {
        display: flex;
        align-items: center;
        min-height: 44px;
        padding: 10px 16px;
        border-bottom-color: rgba(var(--kapa-blue-rgb, 0, 130, 200), 0.14);
    }

    .main-nav.mobile-on .desktop-nav > ul > li.js-opened > .mn-sub li:last-child > a {
        border-bottom: 0;
    }

    .main-nav.mobile-on .desktop-nav > ul > li.js-opened > .mn-sub li > a:hover,
    .main-nav.mobile-on .desktop-nav > ul > li.js-opened > .mn-sub li > a:focus-visible {
        color: var(--kapa-blue-dark, #005DAB) !important;
        background: var(--kapa-blue-surface, #E8F7FD);
    }

    .main-nav.mobile-on .desktop-nav > ul > li.js-opened > .mn-sub li > a:focus-visible {
        outline: 2px solid var(--kapa-blue, #0082C8);
        outline-offset: -2px;
    }
}

/* ── 데스크톱 상단 GNB 메뉴 간격 (기존보다 조금 여유) ── */
@media (min-width: 1025px) {
    .main-nav:not(.mobile-on) .desktop-nav > ul > li {
        margin-left: 18px;
        margin-right: 18px;
    }

    .main-nav:not(.mobile-on) .desktop-nav > ul > li:first-child {
        margin-left: 0;
    }

    .main-nav:not(.mobile-on) .desktop-nav > ul > li:last-child {
        margin-right: 0;
    }

    .main-nav:not(.mobile-on) .desktop-nav > ul > li.desktop-nav-display {
        margin-left: 16px;
        margin-right: 10px;
    }
}

@media (min-width: 1500px) {
    .main-nav:not(.mobile-on) .desktop-nav > ul > li {
        margin-left: 22px;
        margin-right: 22px;
    }

    .main-nav:not(.mobile-on) .desktop-nav > ul > li:first-child {
        margin-left: 0;
    }

    .main-nav:not(.mobile-on) .desktop-nav > ul > li:last-child {
        margin-right: 0;
    }
}

/* ── 대메뉴 삭제 후 남은 7개 메뉴에 여유 폭 재분배 ── */
@media (min-width: 1025px) {
    .main-nav:not(.mobile-on) .desktop-nav > ul > li[data-mega-col] {
        margin-right: 28px;
        margin-left: 28px;
    }
}

@media (min-width: 1500px) {
    .main-nav:not(.mobile-on) .desktop-nav > ul > li[data-mega-col] {
        margin-right: 32px;
        margin-left: 32px;
    }
}

/* ── 데스크톱 상단 GNB 가독성: 본문(18px/불투명)과 맞춤, 메뉴는 600으로 조금 더 굵게 ── */
@media (min-width: 1025px) {
    .main-nav:not(.mobile-on) .desktop-nav > ul > li > a {
        font-size: 18px;
        font-weight: 600;
        color: var(--color-dark-1);
        opacity: 1;
    }

    /* 구)웹사이트: data-btn-animate가 font-size:small을 씌워 대메뉴보다 작아지는 것 방지 */
    .main-nav:not(.mobile-on) .desktop-nav > ul > li > a .btn-animate-y {
        font-size: inherit;
        font-weight: inherit;
    }
}

/*
 * 모바일 GNB 여백·구분선 정리
 * 텍스트는 좌측 정렬을 유지하고, 2단 메뉴만 동일한 좌우 여백 안에 배치한다.
 */
@media (max-width: 1279px) {
    .main-nav.mobile-on .desktop-nav > ul,
    .main-nav.mobile-on .desktop-nav > ul > li,
    .main-nav.mobile-on .desktop-nav > ul > li > .mn-sub,
    .main-nav.mobile-on .desktop-nav > ul > li > .mn-sub > .mn-sub-multi,
    .main-nav.mobile-on .desktop-nav > ul > li > .mn-sub > .mn-sub-multi > ul {
        width: 100% !important;
        margin: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        padding-right: 0 !important;
        padding-left: 0 !important;
        box-sizing: border-box;
    }

    .main-nav.mobile-on .desktop-nav > ul > li.js-opened > .mn-sub {
        width: calc(100% - 32px) !important;
        margin: 8px 16px 16px !important;
        padding: 0 !important;
        background: #f7fbfe !important;
        border: 1px solid rgba(var(--kapa-blue-rgb, 0, 130, 200), 0.22) !important;
        border-radius: 4px !important;
    }

    .main-nav.mobile-on .desktop-nav > ul > li.js-opened > .mn-sub > .mn-sub-multi > ul > li > a {
        min-height: 42px;
        padding: 9px 14px !important;
        text-align: left;
    }

    .main-nav.mobile-on .desktop-nav > ul > li.js-opened > .mn-sub > .mn-sub-multi > ul > li + li > a {
        border-top: 1px solid rgba(var(--kapa-blue-rgb, 0, 130, 200), 0.12);
    }

    .main-nav.mobile-on .desktop-nav > ul > li.js-opened > .mn-has-sub::after {
        right: 16px;
        left: 16px;
        height: 1px;
    }
}

/* 인쇄: 화면 높이·넘침 방지가 빈 종이를 한 장 더 만들지 않게 */
@media print {
    html,
    body {
        height: auto !important;
        min-height: 0 !important;
        overflow: visible !important;
    }

    .page {
        display: block !important;
        height: auto !important;
        min-height: 0 !important;
    }

    .page > main,
    .page > #main,
    main {
        overflow: visible !important;
        flex: none !important;
        height: auto !important;
        min-height: 0 !important;
    }

    .page-section,
    .small-section,
    .bg-image,
    .home-section {
        background-attachment: scroll !important;
    }

    #main > section.page-section.pb-100:first-of-type {
        padding-top: 0 !important;
        padding-bottom: 4px !important;
        min-height: 0 !important;
    }

    /* 화면용 제목(70px)이 인쇄에도 그대로 커지지 않게 */
    #main > section.page-section.pb-100:first-of-type .hs-title-1 {
        font-size: 22px !important;
        line-height: 1.3 !important;
    }

    #main > section.page-section:not(.pb-100):not(.hero-shortcut-section) {
        padding-top: 8px !important;
        padding-bottom: 8px !important;
    }
}