@charset "UTF-8";
/* 경복대학교(KBU) AID 교육 플랫폼 — 커스텀 CSS  (네임스페이스: .xnkbu / #header.xnkbu / #footer.xnkbu) */

/* ===== 0. 폰트 ============================================================ */
@font-face {
    font-family: 'Pretendard Variable';
    font-weight: 45 920;
    font-style: normal;
    font-display: swap;
    src: url('/customs/main/xnkbu-font-pretendard.woff2') format('woff2-variations');
}

@font-face {
    font-family: 'Space Grotesk';
    font-weight: 300 700;
    font-style: normal;
    font-display: swap;
    src: url('/customs/main/xnkbu-font-space-grotesk.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                   U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
                   U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Space Grotesk';
    font-weight: 300 700;
    font-style: normal;
    font-display: swap;
    src: url('/customs/main/xnkbu-font-space-grotesk-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                   U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                   U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ===== 1. 토큰 ============================================================ */
:root {
    --xnkbu-font: 'Pretendard Variable', Pretendard, system-ui, -apple-system, 'Malgun Gothic', sans-serif;
    --xnkbu-font-en: 'Space Grotesk', var(--xnkbu-font);

    --xnkbu-navy: #04203F;
    --xnkbu-pink: #E5007E;
    --xnkbu-pink-l: #FF4FA8;
    --xnkbu-pink-d: #7A0E4C;

    --xnkbu-ink: #14141A;
    --xnkbu-ink-2: #20202A;
    --xnkbu-body: #6B6B72;
    --xnkbu-body-2: #7A7A82;
    --xnkbu-mute: #9A9AA2;
    --xnkbu-line: #E4E4DF;
    --xnkbu-line-2: #EFEFEB;
    --xnkbu-line-3: #D6D9E0;
    --xnkbu-surface: #FFFFFF;
    --xnkbu-surface-2: #F1F1EE;
    --xnkbu-surface-3: #F6F6F4;
    --xnkbu-surface-4: #F4F2EC;
    --xnkbu-surface-5: #EFEFEB;

    --xnkbu-w: 1352px;
    --xnkbu-gutter: 44px;
    --xnkbu-hd-h: 88px;

    --xnkbu-globe: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.5'%3E%3Ccircle cx='10' cy='10' r='8'/%3E%3Cellipse cx='10' cy='10' rx='3.6' ry='8'/%3E%3Cline x1='2' y1='10' x2='18' y2='10'/%3E%3C/svg%3E");

    --xnkbu-chevron-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 9l7 7 7-7'/%3E%3C/svg%3E");
    --xnkbu-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E");

    --xnkbu-ease: cubic-bezier(.4, 0, .2, 1);
}

/* ===== 2. 시스템 기본 요소 정리 · 리셋 ==================================== */

#content #visual {
    display: none !important;
}

#content #root {
    margin: 0 !important;
    padding: 0 !important;
}

html.xnkbu-aid-page {
    color-scheme: light;
}

html.xnkbu-aid-page body,
html.xnkbu-aid-page #content {
    margin: 0 !important;
    padding: 0 !important;
    background: var(--xnkbu-surface);
}

.xnkbu,
#header.xnkbu,
#footer.xnkbu {
    font-family: var(--xnkbu-font);
    color: var(--xnkbu-ink);
    -webkit-font-smoothing: antialiased;
}

.xnkbu *,
.xnkbu *::before,
.xnkbu *::after,
#header.xnkbu *,
#header.xnkbu *::before,
#header.xnkbu *::after,
#footer.xnkbu *,
#footer.xnkbu *::before,
#footer.xnkbu *::after {
    box-sizing: border-box;
}

.xnkbu button,
.xnkbu input,
.xnkbu select,
#header.xnkbu button,
#header.xnkbu input,
#header.xnkbu select,
#footer.xnkbu button,
#footer.xnkbu input,
#footer.xnkbu select {
    font-family: var(--xnkbu-font);
}

.xnkbu .xn-widget-container,
.xnkbu .xn-widget-container * {
    font-family: var(--xnkbu-font) !important;
}

.xnkbu a,
#header.xnkbu a,
#footer.xnkbu a {
    text-decoration: none;
}

.xnkbu a:hover,
.xnkbu a:focus,
#header.xnkbu a:hover,
#header.xnkbu a:focus,
#footer.xnkbu a:hover,
#footer.xnkbu a:focus {
    text-decoration: none;
}

.xnkbu a:not([class]),
#header.xnkbu a:not([class]),
#footer.xnkbu a:not([class]),
.xnkbu .xn-widget-container a,
.xnkbu .xn-widget-container a:hover {
    color: inherit;
}

.xnkbu a:focus-visible,
.xnkbu button:focus-visible,
.xnkbu input:focus-visible,
.xnkbu [tabindex]:focus-visible,
#header.xnkbu a:focus-visible,
#header.xnkbu button:focus-visible,
#footer.xnkbu a:focus-visible {
    outline: 2px solid var(--xnkbu-pink);
    outline-offset: 2px;
    border-radius: 4px;
}

.xnkbu-sr-only {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.xnkbu-in {
    max-width: var(--xnkbu-w);
    margin: 0 auto;
}

.xnkbu-sec {
    padding: 0 var(--xnkbu-gutter);
    background: var(--xnkbu-surface);
}

.xnkbu-sec-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 26px;
}

.xnkbu-eyebrow {
    margin: 0;
    font-family: var(--xnkbu-font-en);
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: .22em;
    color: var(--xnkbu-pink-l);
}

.xnkbu-sec-title {
    margin: 14px 0 0;
    font-size: 40px;
    font-weight: 800;
    line-height: 1.24;
    letter-spacing: -.04em;
    color: var(--xnkbu-ink);
}

.xnkbu-sec-head > :first-child > .xnkbu-sec-title:only-child,
.xnkbu-sec-head > .xnkbu-sec-title {
    margin-top: 0;
}

.xnkbu-sec-more {
    flex: none;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    color: var(--xnkbu-body-2);
    transition: color .2s var(--xnkbu-ease);
}

.xnkbu-sec-more:hover,
.xnkbu-sec-more:focus-visible {
    color: var(--xnkbu-pink);
}

.xnkbu-brand,
.xnkbu-field-in,
.xnkbu-widget-course .xncwi-link {
    color: var(--xnkbu-ink);
}

.xnkbu-ft-links a,
.xnkbu-ft-info a {
    color: inherit;
}

/* ===== 2.5 <ul> 특이도 함정 =============================================== */

#footer.xnkbu .xnkbu-certs-in {
    margin-left: auto;
    margin-right: auto;
}

#header.xnkbu .xnkbu-submenu {
    margin: 14px 0 0;
    padding: 10px;
}

/* ===== 3. 헤더 ============================================================ */

#header.xnkbu {
    position: sticky;
    top: 0;
    z-index: 60;
    height: var(--xnkbu-hd-h);
    background: var(--xnkbu-surface);
    border-bottom: 1px solid var(--xnkbu-line);
    transition: background .28s var(--xnkbu-ease), box-shadow .28s var(--xnkbu-ease),
                border-color .28s var(--xnkbu-ease);
}

#header.xnkbu.is-aid {
    background: transparent;
    border-bottom-color: transparent;
}

#header.xnkbu.is-aid.scrolled {
    background: rgba(255, 255, 255, .88);
    -webkit-backdrop-filter: saturate(150%) blur(14px);
    backdrop-filter: saturate(150%) blur(14px);
    box-shadow: 0 6px 24px rgba(20, 20, 26, .08);
}

.xnkbu-hd-in {
    display: grid;
    grid-template-columns: minmax(max-content, 1fr) auto minmax(max-content, 1fr);
    align-items: center;
    gap: 24px;
    height: 100%;
    padding: 0 var(--xnkbu-gutter);
}

.xnkbu-brand {
    justify-self: start;
    display: inline-flex;
    align-items: center;
    margin-left: -2px;
}

.xnkbu-brand-logo {
    display: block;
    height: 52px;
    width: auto;
    max-height: calc(var(--xnkbu-hd-h) - 24px);
    object-fit: contain;
}

.xnkbu-brand-text {
    font-size: 21px;
    font-weight: 800;
    letter-spacing: -.03em;
    color: var(--xnkbu-ink);
}

/* --- GNB --- */
.xnkbu-nav {
    justify-self: center;
    min-width: 0;
}

.xnkbu-gnb {
    display: flex;
    justify-content: center;
    gap: 44px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.xnkbu-gnb-item {
    position: relative;
}

.xnkbu-gnb-item > a {
    display: block;
    padding: 7px 0;
    border-bottom: 2px solid transparent;
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -.025em;
    color: var(--xnkbu-ink-2);
    white-space: nowrap;
    transition: border-color .2s var(--xnkbu-ease), color .2s var(--xnkbu-ease);
}

.xnkbu-gnb-item > a:hover,
.xnkbu-gnb-item > a:focus-visible {
    border-bottom-color: var(--xnkbu-pink);
}

#header.xnkbu.is-aid:not(.scrolled) .xnkbu-gnb-item > a,
#header.xnkbu.is-aid:not(.scrolled) .xnkbu-btn-login {
    text-shadow: 0 1px 10px rgba(255, 255, 255, .8);
}

.xnkbu-submenu {
    display: none;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    min-width: 180px;
    margin: 14px 0 0;
    padding: 10px;
    list-style: none;
    background: var(--xnkbu-surface);
    border: 1px solid var(--xnkbu-line);
    border-radius: 16px;
    box-shadow: 0 18px 38px rgba(20, 20, 26, .12);
}

.xnkbu-submenu > li > a {
    display: block;
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 500;
    color: var(--xnkbu-body);
    white-space: nowrap;
    transition: background .18s var(--xnkbu-ease), color .18s var(--xnkbu-ease);
}

.xnkbu-submenu > li > a:hover,
.xnkbu-submenu > li > a:focus-visible {
    background: var(--xnkbu-surface-2);
    color: var(--xnkbu-ink);
}

/* --- 유틸 --- */
.xnkbu-utils {
    justify-self: end;
    display: flex;
    align-items: center;
    gap: 12px;
}

.xnkbu-lang .xn-change_language-container {
    position: relative;
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
}

.xnkbu-lang .xn-change_language-title {
    display: none;
}

.xnkbu-lang .xn-change_language-select_box {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    width: auto;
    height: 32px;
    min-width: 0;
    padding: 0 11px;
    border: 1px solid var(--xnkbu-line-3);
    border-radius: 6px;
    background: transparent;
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1;
    color: #3A3A42;
    white-space: nowrap;
    cursor: pointer;
    transition: border-color .2s var(--xnkbu-ease), background .2s var(--xnkbu-ease);
}

.xnkbu-lang .xn-change_language-select_box > i {
    width: 13px;
    height: 13px;
    flex: none;
    background: currentColor;
    -webkit-mask: var(--xnkbu-globe) no-repeat center / contain;
    mask: var(--xnkbu-globe) no-repeat center / contain;
}

.xnkbu-lang .xn-change_language-select_box:hover,
.xnkbu-lang .xn-change_language-select_box:focus-visible {
    border-color: var(--xnkbu-ink);
}

#header.xnkbu.is-aid:not(.scrolled) .xnkbu-lang .xn-change_language-select_box {
    background: transparent;
    border-color: rgba(20, 20, 26, .28);
    text-shadow: 0 1px 10px rgba(255, 255, 255, .8);
}

.xnkbu-lang .xn-change_language-select_dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 70;
    min-width: 132px;
    padding: 6px;
    border: 1px solid var(--xnkbu-line);
    border-radius: 10px;
    background: var(--xnkbu-surface);
    box-shadow: 0 14px 30px rgba(20, 20, 26, .14);
}

.xnkbu-lang .xn-change_language-select_dropdown.show {
    display: block;
}

.xnkbu-lang .xn-change_language-select_dropdown-item {
    display: block;
    width: 100%;
    padding: 8px 10px;
    border: 0;
    border-radius: 7px;
    background: none;
    font-size: 13px;
    font-weight: 500;
    color: #3A3A42;
    text-align: left;
    white-space: nowrap;
    cursor: pointer;
}

.xnkbu-lang .xn-change_language-select_dropdown-item:hover {
    background: var(--xnkbu-surface-2);
    color: var(--xnkbu-ink);
}

.xnkbu-btn-login {
    font-size: 15px;
    font-weight: 600;
    line-height: 1;
    color: #5A5A62;
    transition: color .2s var(--xnkbu-ease);
}

.xnkbu-btn-login:hover,
.xnkbu-btn-login:focus-visible {
    color: var(--xnkbu-ink);
}

.xnkbu-btn-join {
    display: inline-flex;
    align-items: center;
    height: 42px;
    padding: 0 22px;
    border-radius: 999px;
    background: var(--xnkbu-ink);
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    white-space: nowrap;
    transition: background .2s var(--xnkbu-ease);
}

.xnkbu-btn-join:hover,
.xnkbu-btn-join:focus-visible {
    background: var(--xnkbu-pink);
    color: #fff;
}

/* --- 계정 메뉴 (시스템 v2 마크업 재스타일) --- */
#header.xnkbu .xn-header-member-btn-group {
    position: relative;
}

#header.xnkbu .btn-dropdown-user-menu {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 42px;
    padding: 0 18px;
    border: 0;
    border-radius: 999px;
    background: var(--xnkbu-ink);
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    cursor: pointer;
    transition: background .2s var(--xnkbu-ease);
}

#header.xnkbu .btn-dropdown-user-menu:hover,
#header.xnkbu .btn-dropdown-user-menu[aria-expanded="true"] {
    background: var(--xnkbu-pink);
}

#header.xnkbu .btn-dropdown-user-menu svg,
#header.xnkbu .btn-dropdown-user-menu > i {
    display: none !important;
}

#header.xnkbu .btn-dropdown-user-menu::after {
    content: '';
    width: 13px;
    height: 13px;
    background: #fff;
    -webkit-mask: var(--xnkbu-chevron-down) no-repeat center / contain;
    mask: var(--xnkbu-chevron-down) no-repeat center / contain;
    transition: transform .2s var(--xnkbu-ease);
}

#header.xnkbu .xn-header-member-btn-group.show .btn-dropdown-user-menu::after {
    transform: rotate(180deg);
}

#header.xnkbu .xn-v2-user-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    z-index: 70;
    min-width: 288px;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--xnkbu-line);
    border-radius: 18px;
    background: var(--xnkbu-surface);
    box-shadow: 0 22px 48px rgba(20, 20, 26, .16);
}

#header.xnkbu .xn-header-member-btn-group.show .xn-v2-user-dropdown {
    display: block;
}

#header.xnkbu .xn-v2-user-info {
    padding: 16px 14px 14px;
    border-bottom: 1px solid var(--xnkbu-line-2);
    background: var(--xnkbu-surface-3);
}

#header.xnkbu .xn-v2-user-name {
    font-size: 16px;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--xnkbu-ink);
}

#header.xnkbu .xn-v2-user-id {
    margin-top: 2px;
    font-family: var(--xnkbu-font-en);
    font-size: 12.5px;
    color: var(--xnkbu-body-2);
}

#header.xnkbu .xn-v2-user-login-info {
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

#header.xnkbu .xn-v2-user-login-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 12.5px;
}

#header.xnkbu .xn-v2-user-login-label {
    color: var(--xnkbu-body-2);
}

#header.xnkbu .xn-v2-user-login-value {
    font-weight: 600;
    color: var(--xnkbu-ink);
}

#header.xnkbu .xn-v2-dropdown-group {
    padding: 10px 6px;
    border-bottom: 1px solid var(--xnkbu-line-2);
}

#header.xnkbu .xn-v2-logout-group {
    border-bottom: 0;
}

#header.xnkbu .xn-v2-logout-item form {
    margin: 0;
}

#header.xnkbu .xn-v2-dropdown-group-title {
    padding: 0 8px 6px;
    font-family: var(--xnkbu-font-en);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--xnkbu-mute);
}

#header.xnkbu .xn-v2-dropdown-item,
#header.xnkbu .xn-v2-logout-button {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 8px;
    border: 0;
    border-radius: 10px;
    background: none;
    font-size: 14.5px;
    font-weight: 500;
    color: #3A3A42;
    text-align: left;
    cursor: pointer;
    transition: background .18s var(--xnkbu-ease), color .18s var(--xnkbu-ease);
}

#header.xnkbu .xn-v2-dropdown-item:hover,
#header.xnkbu .xn-v2-logout-button:hover {
    background: var(--xnkbu-surface-2);
    color: var(--xnkbu-ink);
}

#header.xnkbu .xn-v2-dropdown-item-icon {
    flex: none;
    width: 20px;
    height: 20px;
    margin-right: 2px;
    background: no-repeat center / contain;
}

#header.xnkbu .xn-v2-icon-admin-page        { background-image: url('/customs/main/xn-v2-icon-admin-page.svg'); }
#header.xnkbu .xn-v2-icon-course-dashboard  { background-image: url('/customs/main/xn-v2-icon-course-dashboard.svg'); }
#header.xnkbu .xn-v2-icon-mypage            { background-image: url('/customs/main/xn-v2-icon-mypage.svg'); }
#header.xnkbu .xn-v2-icon-go-to-lms         { background-image: url('/customs/main/xn-v2-icon-go-to-lms.svg'); }
#header.xnkbu .xn-v2-icon-mypage-dashboard  { background-image: url('/customs/main/xn-v2-icon-mypage-dashboard.svg'); }
#header.xnkbu .xn-v2-icon-myinformation     { background-image: url('/customs/main/xn-v2-icon-myinformation.svg'); }
#header.xnkbu .xn-v2-icon-edit-password     { background-image: url('/customs/main/xn-v2-icon-edit-password.svg'); }
#header.xnkbu .xn-v2-icon-language          { background-image: url('/customs/main/xn-v2-icon-canvas-language-settings.svg'); }
#header.xnkbu .xn-v2-icon-logout            { background-image: url('/customs/main/xn-v2-icon-logout.svg'); }

#header.xnkbu .xn-v2-canvas-language-settings {
    justify-content: flex-start;
}

#header.xnkbu .xn-v2-language-help-icon {
    flex: none;
    width: 16px;
    height: 16px;
    margin-left: 6px;
    opacity: .6;
    cursor: pointer;
}

/* --- 햄버거 (1024px 이하) --- */
.xnkbu-hamburger {
    display: none;
    flex: none;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 0;
    border-radius: 10px;
    background: none;
    cursor: pointer;
}

.xnkbu-hamburger span {
    display: block;
    width: 22px;
    height: 2px;
    margin: 4px auto;
    border-radius: 2px;
    background: var(--xnkbu-ink);
    transition: transform .2s var(--xnkbu-ease), opacity .2s var(--xnkbu-ease);
}

/* ===== 4. AID 카탈로그 (/aid) ============================================== */

.xnkbu_cnt_wrap.xnkbu-aid {
    background: var(--xnkbu-surface);
}

/* ----- 4.1 히어로 --------------------------------------------------------- */

.xnkbu-hero {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 760px;
    margin-top: calc(var(--xnkbu-hd-h) * -1);
    padding: 410px var(--xnkbu-gutter) 0;
    border-bottom-left-radius: 48px;
    border-bottom-right-radius: 48px;
    background: linear-gradient(150deg, #B9C6D6, #8FA2B8);
    text-align: center;
}

.xnkbu-hero-media {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border-bottom-left-radius: 48px;
    border-bottom-right-radius: 48px;
}

.xnkbu-hero-slides {
    position: absolute;
    inset: 0;
}

.xnkbu-hero-slides .xn-widget-container,
.xnkbu-hero-slides .xn-widget-slider-container,
.xnkbu-hero-slides .carousel,
.xnkbu-hero-slides .carousel-inner,
.xnkbu-hero-slides .carousel-item {
    height: 100% !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
}

.xnkbu-hero-slides .xnws-img {
    height: 100% !important;
    width: 100% !important;
    background-position: center !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
}

.xnkbu-hero-slides .xnws-caption {
    position: absolute !important;
    z-index: 3 !important;
    top: 152px !important;
    right: 0 !important;
    bottom: auto !important;
    left: 0 !important;
    width: auto !important;
    padding: 0 var(--xnkbu-gutter) !important;
    text-align: center !important;
    color: var(--xnkbu-ink) !important;
}

/* .xnkbu-slide-* : 슬라이드 위젯 캡션(HTML)에서만 쓰는 클래스 — 코드 검색으로는 안 잡힌다 */
.xnkbu-slide-eyebrow {
    margin: 0;
    font-family: var(--xnkbu-font-en);
    font-size: 17px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: .26em;
    color: var(--xnkbu-ink);
    text-shadow: 0 1px 14px rgba(255, 255, 255, .98),
                 0 0 26px rgba(255, 255, 255, .9);
}

.xnkbu-slide-title {
    margin: 22px auto 0;
    max-width: 1000px;
    font-size: 74px;
    font-weight: 800;
    line-height: 1.16;
    letter-spacing: -.035em;
    color: var(--xnkbu-ink);
    text-shadow: 0 1px 16px rgba(255, 255, 255, .75);
    text-wrap: pretty;
}

.xnkbu-slide-title em {
    font-style: normal;
    color: var(--xnkbu-pink);
}

.xnkbu-slide-lead {
    margin: 14px auto 0;
    max-width: 660px;
    font-size: clamp(13.5px, 1.35vw, 17px);
    font-weight: 500;
    line-height: 1.65;
    color: var(--xnkbu-ink-2);
    text-shadow: 0 1px 12px rgba(255, 255, 255, .95),
                 0 0 22px rgba(255, 255, 255, .85);
}

.xnkbu-slide-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: clamp(14px, 1.6vw, 20px);
    padding: clamp(11px, 1.1vw, 15px) clamp(20px, 2.4vw, 32px);
    border-radius: 999px;
    background: var(--xnkbu-pink);
    font-size: clamp(13.5px, 1.2vw, 15px);
    font-weight: 700;
    transition: background .2s var(--xnkbu-ease), transform .2s var(--xnkbu-ease);
}

.xnkbu-slide-cta:hover,
.xnkbu-slide-cta:focus-visible {
    background: var(--xnkbu-ink);
    transform: translateY(-2px);
}

.xnkbu-hero-slides .carousel-indicators {
    z-index: 4;
    bottom: 96px;
}

.xnkbu-hero-slides .carousel-indicators li {
    width: 8px;
    height: 8px;
    border: 0;
    border-radius: 50%;
    background: rgba(20, 20, 26, .3);
}

.xnkbu-hero-slides .carousel-indicators .active {
    background: var(--xnkbu-pink);
}

.xnkbu-hero-slides .carousel-control-prev,
.xnkbu-hero-slides .carousel-control-next {
    z-index: 4;
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border: 1px solid rgba(20, 20, 26, .1);
    border-radius: 50%;
    background: rgba(255, 255, 255, .8);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    box-shadow: 0 6px 20px rgba(20, 20, 26, .1);
    opacity: 1;
    transition: background .2s var(--xnkbu-ease), border-color .2s var(--xnkbu-ease),
                transform .2s var(--xnkbu-ease);
}

.xnkbu-hero-slides .carousel-control-prev { left: var(--xnkbu-gutter); }
.xnkbu-hero-slides .carousel-control-next { right: var(--xnkbu-gutter); }

.xnkbu-hero-slides .carousel-control-prev:hover,
.xnkbu-hero-slides .carousel-control-next:hover,
.xnkbu-hero-slides .carousel-control-prev:focus-visible,
.xnkbu-hero-slides .carousel-control-next:focus-visible {
    border-color: var(--xnkbu-ink);
    background: var(--xnkbu-ink);
    transform: translateY(-50%) scale(1.06);
}

.xnkbu-hero-slides .carousel-control-prev-icon,
.xnkbu-hero-slides .carousel-control-next-icon {
    width: 15px;
    height: 15px;
    background-color: var(--xnkbu-ink);
    background-image: none;
    -webkit-mask: var(--xnkbu-chevron) no-repeat center / contain;
    mask: var(--xnkbu-chevron) no-repeat center / contain;
}

.xnkbu-hero-slides .carousel-control-prev-icon {
    transform: rotate(180deg);
}

.xnkbu-hero-slides .carousel-control-prev:hover .carousel-control-prev-icon,
.xnkbu-hero-slides .carousel-control-next:hover .carousel-control-next-icon,
.xnkbu-hero-slides .carousel-control-prev:focus-visible .carousel-control-prev-icon,
.xnkbu-hero-slides .carousel-control-next:focus-visible .carousel-control-next-icon {
    background-color: #fff;
}

.xnkbu-hero-scrim {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(180deg,
        rgba(255, 255, 255, .62) 0%,
        rgba(255, 255, 255, .34) 46%,
        rgba(255, 255, 255, .16) 100%);
}

.xnkbu-hero-glow {
    position: absolute;
    z-index: 2;
    left: 50%;
    top: 20px;
    transform: translateX(-50%);
    width: 1280px;
    max-width: 100%;
    height: 560px;
    pointer-events: none;
    background: radial-gradient(ellipse closest-side at center,
        rgba(255, 255, 255, .42) 0%,
        rgba(255, 255, 255, .24) 48%,
        rgba(255, 255, 255, 0) 92%);
}

.xnkbu-search,
.xnkbu-hero-tags {
    position: relative;
    z-index: 3;
}

.xnkbu-search {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 780px;
    max-width: 100%;
    height: 82px;
    margin: 50px auto 0;
    padding: 0 12px 0 32px;
    border: 1px solid #E4E7EC;
    border-radius: 999px;
    background: var(--xnkbu-surface);
    box-shadow: 0 22px 48px rgba(20, 20, 26, .14);
    text-align: left;
}

.xnkbu-search-input {
    flex: 1;
    min-width: 0;
    height: 100%;
    border: 0;
    background: none;
    font-size: 19px;
    font-weight: 500;
    color: var(--xnkbu-ink);
    outline: none;
}

.xnkbu-search-input::placeholder {
    color: var(--xnkbu-mute);
}

.xnkbu-search-btn {
    flex: none;
    display: inline-flex;
    align-items: center;
    height: 58px;
    padding: 0 34px;
    border: 0;
    border-radius: 999px;
    background: var(--xnkbu-pink);
    font-size: 17px;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    cursor: pointer;
    transition: background .2s var(--xnkbu-ease);
}

button.xnkbu-search-btn:hover,
button.xnkbu-search-btn:focus-visible {
    background: var(--xnkbu-ink);
}

.xnkbu-hero-tags {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 9px;
    margin-top: 28px;
}

.xnkbu-tag {
    padding: 9px 17px;
    border: 1px solid var(--xnkbu-line-3);
    border-radius: 999px;
    background: rgba(255, 255, 255, .7);
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1;
    color: #3A3A42;
    transition: background .2s var(--xnkbu-ease), color .2s var(--xnkbu-ease),
                border-color .2s var(--xnkbu-ease);
}

a.xnkbu-tag:hover,
a.xnkbu-tag:focus-visible {
    background: var(--xnkbu-ink);
    border-color: var(--xnkbu-ink);
    color: #fff;
}

.xnkbu-scroll {
    position: absolute;
    left: 50%;
    bottom: -52px;
    transform: translateX(-50%);
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 104px;
    height: 104px;
    padding: 0;
    -webkit-appearance: none;
    appearance: none;
    border: 1px solid #E4E7EC;
    border-radius: 50%;
    background: var(--xnkbu-surface);
    box-shadow: 0 10px 30px rgba(20, 20, 26, .1);
    cursor: pointer;
    transition: box-shadow .25s var(--xnkbu-ease), transform .25s var(--xnkbu-ease);
}

.xnkbu-scroll:hover {
    transform: translateX(-50%) translateY(3px);
    box-shadow: 0 16px 36px rgba(20, 20, 26, .16);
}

.xnkbu-scroll:hover .xnkbu-scroll-arrow {
    color: var(--xnkbu-pink);
}

.xnkbu-scroll-arrow {
    transition: color .2s var(--xnkbu-ease);
}

.xnkbu-scroll-arrow {
    font-size: 22px;
    line-height: 1;
    color: var(--xnkbu-ink);
}

.xnkbu-scroll-ring {
    position: absolute;
    inset: 0;
    animation: kbuSpin 16s linear infinite;
}

.xnkbu-scroll-ring svg {
    display: block;
    width: 104px;
    height: 104px;
}

.xnkbu-scroll-ring text {
    font-family: var(--xnkbu-font-en);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: .28em;
    fill: var(--xnkbu-mute);
}

@keyframes kbuSpin {
    0%   { transform: rotate(0); }
    100% { transform: rotate(360deg); }
}

/* ----- 4.2 분야 아코디언 --------------------------------------------------- */

.xnkbu-fields {
    padding-top: 112px;
}

.xnkbu-field-list {
    display: flex;
    gap: 10px;
    height: 420px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.xnkbu-field {
    flex: 1;
    min-width: 0;
    transition: flex .55s var(--xnkbu-ease);
}

.xnkbu-field-in {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    overflow: hidden;
    -webkit-appearance: none;
    appearance: none;
    border: 1px solid var(--xnkbu-line);
    border-radius: 24px;
    background: #20222B;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: default;
    transition: background .35s var(--xnkbu-ease), border-color .35s var(--xnkbu-ease);
}

.xnkbu-field-in[href] {
    cursor: pointer;
}

.xnkbu-field-bg {
    position: absolute;
    inset: 0;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    transform: scale(1.02);
    transition: transform .6s var(--xnkbu-ease);
}

.xnkbu-field-scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
        rgba(10, 12, 20, 0) 34%,
        rgba(10, 12, 20, .42) 62%,
        rgba(10, 12, 20, .86) 100%);
    transition: background .45s var(--xnkbu-ease);
}

.xnkbu-field:hover .xnkbu-field-bg,
.xnkbu-field:focus-within .xnkbu-field-bg {
    transform: scale(1.06);
}

.xnkbu-field:hover .xnkbu-field-scrim,
.xnkbu-field:focus-within .xnkbu-field-scrim {
    background: linear-gradient(180deg,
        rgba(10, 12, 20, 0) 40%,
        rgba(10, 12, 20, .38) 66%,
        rgba(10, 12, 20, .88) 100%);
}

@media (hover: hover) and (min-width: 1200px) {
    .xnkbu-field:hover,
    .xnkbu-field:focus-within {
        flex: 2.6;
    }
}

.xnkbu-field:hover .xnkbu-field-in,
.xnkbu-field:focus-within .xnkbu-field-in {
    border-color: var(--xnkbu-ink);
}

.xnkbu-field-grid {
    position: absolute;
    inset: 0;
    opacity: .35;
    background-image:
        linear-gradient(rgba(255, 255, 255, .10) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .10) 1px, transparent 1px);
    background-size: 36px 36px;
}

.xnkbu-field-wm {
    z-index: 1;
    position: absolute;
    right: -18px;
    top: 44px;
    font-family: var(--xnkbu-font-en);
    font-size: 104px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.06em;
    color: rgba(255, 255, 255, .16);
    pointer-events: none;
}

.xnkbu-field-no {
    z-index: 2;
    position: absolute;
    left: 18px;
    top: 24px;
    font-family: var(--xnkbu-font-en);
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: .18em;
    color: rgba(255, 255, 255, .78);
    text-shadow: 0 1px 8px rgba(0, 0, 0, .5);
}

.xnkbu-field-txt {
    z-index: 2;
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: 26px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 74px;
}

.xnkbu-field-name,
.xnkbu-field-desc {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.xnkbu-field-name {
    font-size: 19px;
    font-weight: 800;
    line-height: 1.4;
    letter-spacing: -.035em;
    color: #fff;
    text-shadow: 0 1px 12px rgba(0, 0, 0, .45);
}

.xnkbu-field-desc {
    margin-top: 8px;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.6;
    color: rgba(255, 255, 255, .82);
    text-shadow: 0 1px 10px rgba(0, 0, 0, .45);
}

.xnkbu-field-in.has-bg .xnkbu-field-grid {
    display: none;
}

.xnkbu-field-in.has-bg .xnkbu-field-wm {
    color: rgba(255, 255, 255, .22);
    text-shadow: 0 2px 18px rgba(0, 0, 0, .35);
}

.xnkbu-field-in.has-bg .xnkbu-field-scrim::before {
    content: '';
    position: absolute;
    inset: 0 0 auto;
    height: 128px;
    background: linear-gradient(180deg, rgba(10, 12, 20, .42) 0%, rgba(10, 12, 20, 0) 100%);
}

/* ----- 4.3 개설 강좌 (course 위젯 재스타일) -------------------------------- */
.xnkbu-courses {
    padding-top: 104px;
}

.xnkbu-widget-course .xn-widget-container {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
    box-shadow: none !important;
}

.xnkbu-courses .xnkbu-in {
    position: relative;
}

.xnkbu-widget-course .xncw-top-container {
    position: static !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-end !important;
    gap: 24px !important;
    width: 100% !important;
    min-height: 42px !important;
    margin: 0 0 26px !important;
    padding: 0 106px 0 0 !important;
    border: 0 !important;
    background: none !important;
}

.xnkbu-widget-course .xncw-title-wrap {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
}

.xnkbu-widget-course .xncw-title-wrap * {
    margin: 0 !important;
    padding: 0 !important;
    font-size: 40px !important;
    font-weight: 800 !important;
    line-height: 1.24 !important;
    letter-spacing: -.04em !important;
    color: var(--xnkbu-ink) !important;
    text-align: left !important;
}

.xnkbu-widget-course .xncw-more {
    position: static !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 2px !important;
    height: 42px !important;
    line-height: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--xnkbu-body-2) !important;
    cursor: pointer;
    transition: color .2s var(--xnkbu-ease);
}

.xnkbu-widget-course .xncw-more:hover,
.xnkbu-widget-course .xncw-more:focus-visible {
    color: var(--xnkbu-pink) !important;
}

.xnkbu-widget-course .xncw-more svg,
.xnkbu-widget-course .xncw-more > i {
    display: none !important;
}

.xnkbu-widget-course .xncw-more::after {
    content: '';
    width: 13px;
    height: 13px;
    margin-left: 2px;
    background: currentColor;
    -webkit-mask: var(--xnkbu-chevron) no-repeat center / contain;
    mask: var(--xnkbu-chevron) no-repeat center / contain;
}

.xnkbu-widget-course .xncw-more-text {
    display: inline-block !important;
    height: auto !important;
    line-height: 1 !important;
}

.xnkbu-widget-course .xnbw-items-container {
    position: static !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
}

.xnkbu-widget-course .xnbw-item-container-wrap.course-wrap {
    display: grid !important;
    width: 100% !important;
    min-width: 0 !important;
    vertical-align: top !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 24px !important;
    margin: 0 !important;
    padding: 0 !important;
}

.xnkbu-widget-course .xnbw-item-container {
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
}

.xnkbu-widget-course .xnbw-items-btn-wrap {
    position: absolute !important;
    top: 2px !important;
    z-index: 3 !important;
    display: block !important;
    width: 42px !important;
    height: 42px !important;
}

.xnkbu-widget-course .xnbw-items-btn-wrap:first-of-type { left: auto !important; right: 50px !important; }
.xnkbu-widget-course .xnbw-items-btn-wrap:last-of-type  { right: 0 !important; }

.xnkbu-widget-course .xnbw-items-btn-wrap > button {
    margin: 0 !important;
}

.xnkbu-widget-course .xnbw-items-prev-btn,
.xnkbu-widget-course .xnbw-items-next-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 42px !important;
    height: 42px !important;
    padding: 0 !important;
    border: 1px solid var(--xnkbu-line) !important;
    border-radius: 50% !important;
    background: var(--xnkbu-surface) !important;
    box-shadow: 0 6px 18px rgba(20, 20, 26, .10) !important;
    transition: border-color .2s var(--xnkbu-ease), box-shadow .2s var(--xnkbu-ease);
}

.xnkbu-widget-course .xnbw-items-prev-btn:hover,
.xnkbu-widget-course .xnbw-items-next-btn:hover {
    border-color: var(--xnkbu-ink) !important;
    box-shadow: 0 10px 24px rgba(20, 20, 26, .16) !important;
}

.xnkbu-widget-course .xnbw-items-prev-btn:disabled,
.xnkbu-widget-course .xnbw-items-next-btn:disabled {
    opacity: .35 !important;
    box-shadow: none !important;
}

.xnkbu-widget-course .xnbw-items-prev-btn i,
.xnkbu-widget-course .xnbw-items-next-btn i {
    width: 15px !important;
    height: 15px !important;
    background: var(--xnkbu-ink) !important;
    background-position: 0 0 !important;
    -webkit-mask: var(--xnkbu-chevron) no-repeat center / contain;
    mask: var(--xnkbu-chevron) no-repeat center / contain;
}

.xnkbu-widget-course .xnbw-items-prev-btn i { transform: rotate(180deg); }

/* --- 카드 --- */
.xnkbu-widget-course .xncwi-link {
    display: block !important;
    height: 100% !important;
}

.xnkbu-widget-course .xncwi-container {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid var(--xnkbu-line) !important;
    border-radius: 20px !important;
    background: var(--xnkbu-surface) !important;
    box-shadow: none !important;
    transition: border-color .25s var(--xnkbu-ease), box-shadow .25s var(--xnkbu-ease),
                transform .25s var(--xnkbu-ease) !important;
}

.xnkbu-widget-course .xncwi-link:hover .xncwi-container,
.xnkbu-widget-course .xncwi-link:focus-visible .xncwi-container {
    border-color: var(--xnkbu-ink) !important;
    box-shadow: 0 18px 38px rgba(20, 20, 26, .12) !important;
    transform: translateY(-5px) !important;
}

.xnkbu-widget-course .xncwi-background {
    display: block !important;
    width: 100% !important;
    aspect-ratio: 16 / 9 !important;
    height: auto !important;
    object-fit: cover !important;
    border-radius: 0 !important;
    background: var(--xnkbu-surface-2) !important;
}

.xnkbu-widget-course .xncwi-label-wrapper {
    position: absolute !important;
    top: 13px !important;
    left: 13px !important;
    right: 13px !important;
    width: auto !important;
    height: auto !important;
    z-index: 2 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    margin: 0 !important;
    padding: 0 !important;
    pointer-events: none;
}

.xnkbu-widget-course .xncwi-status-label,
.xnkbu-widget-course .xncwi-payment-label,
.xnkbu-widget-course .xncwi-series-course-label {
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    margin: 0 !important;
    padding: 8px 12px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: var(--xnkbu-ink) !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    color: #fff !important;
}

.xnkbu-widget-course .xncwi-status-label.upcoming,
.xnkbu-widget-course .xncwi-status-label.closed,
.xnkbu-widget-course .xncwi-status-label.end {
    background: #8A8A92 !important;
}

.xnkbu-widget-course .xncwi-payment-label {
    background: var(--xnkbu-pink) !important;
}

.xnkbu-widget-course .xncwi-series-course-label {
    background: rgba(20, 20, 26, .62) !important;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

.xnkbu-widget-course .xncwi-catalog-info-container {
    height: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    margin: 0 !important;
    padding: 24px 24px 0 !important;
    background: none !important;
    border: 0 !important;
}

.xnkbu-widget-course .xncwi-catalog-title {
    font-size: 12.5px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    color: var(--xnkbu-body-2) !important;
}

.xnkbu-widget-course .xncwi-certificate-wrap {
    position: static !important;
    top: auto !important;
    right: auto !important;
    width: auto !important;
    flex: none !important;
    display: inline-flex !important;
    align-items: center !important;
    vertical-align: middle !important;
}

.xnkbu-widget-course .xncwi-certificate-wrap:empty {
    display: none !important;
}

.xnkbu-widget-course .xncwi-certificate-icon {
    display: none !important;
}

.xnkbu-widget-course .xncwi-certificate-title {
    display: inline-flex !important;
    align-items: center !important;
    height: 22px !important;
    padding: 0 9px !important;
    border: 1px solid rgba(229, 0, 126, .38) !important;
    border-radius: 999px !important;
    background: rgba(229, 0, 126, .07) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    color: var(--xnkbu-pink) !important;
}

.xnkbu-widget-course .xncwi-info-container {
    height: auto !important;
    flex: 0 0 auto !important;
    display: flex !important;
    flex-direction: column !important;
    margin: 0 !important;
    padding: 12px 24px 0 !important;
    background: none !important;
    border: 0 !important;
}

.xnkbu-widget-course .xncwi-title {
    display: -webkit-box !important;
    height: 62px !important;
    max-height: 62px !important;
    overflow: hidden !important;
    -webkit-line-clamp: 2 !important;
    line-clamp: 2;
    -webkit-box-orient: vertical !important;
    text-overflow: ellipsis !important;
    white-space: normal !important;
    word-break: keep-all !important;
    margin: 0 !important;
    font-size: 22px !important;
    font-weight: 800 !important;
    line-height: 1.4 !important;
    letter-spacing: -.035em !important;
    color: var(--xnkbu-ink) !important;
    text-wrap: pretty;
}

.xnkbu-widget-course .xncwi-catagory-title {
    margin: 6px 0 0 !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    color: var(--xnkbu-body-2) !important;
}

.xnkbu-widget-course .xncwi-author,
.xnkbu-widget-course .xncwi-studydate-wrap,
.xnkbu-widget-course .xncwi-recruitment-wrap,
.xnkbu-widget-course .xncwi-course-duration {
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    line-height: 1.7 !important;
    color: var(--xnkbu-ink) !important;
    background: none !important;
}

.xnkbu-widget-course .xncwi-catagory-title:empty {
    display: none !important;
}

.xnkbu-widget-course .xncwi-author {
    margin-top: 18px !important;
    padding-top: 16px !important;
    border-top: 1px solid var(--xnkbu-line-2) !important;
}

.xnkbu-widget-course .xncwi-status,
.xnkbu-widget-course .xncwi-recruitment {
    margin-right: 6px !important;
    font-weight: 500 !important;
    color: var(--xnkbu-body-2) !important;
}

.xnkbu-widget-course .xncwi-date {
    font-family: var(--xnkbu-font-en) !important;
    font-weight: 600 !important;
    color: var(--xnkbu-ink) !important;
}

.xnkbu-widget-course .xncwi-info-footer {
    height: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    margin: 0 !important;
    padding: 0 24px 26px !important;
    border: 0 !important;
    background: none !important;
    font-size: 13.5px !important;
    line-height: 1.7 !important;
    color: var(--xnkbu-body-2) !important;
}

.xnkbu-widget-course .xncwi-info-footer {
    justify-content: flex-start !important;
}

.xnkbu-widget-course .xncwi-course-duration {
    display: flex !important;
    align-items: baseline !important;
    gap: 3px !important;
    width: 100% !important;
}

.xnkbu-widget-course .xncwi-course-duration::before {
    content: var(--xnkbu-duration-label, '');
    margin-right: auto;
    font-weight: 500;
    color: var(--xnkbu-body-2);
}

/* ----- 4.4 공지 · 퀵액세스 ------------------------------------------------- */

.xnkbu-support {
    margin-top: 104px;
    padding: 88px var(--xnkbu-gutter);
    background: var(--xnkbu-surface-3);
}

.xnkbu-support-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 20px;
}

.xnkbu-panel {
    position: relative;
    padding: 34px 36px;
    border-radius: 24px;
}

.xnkbu-panel-notice {
    border: 1px solid #E8E8E4;
    background: var(--xnkbu-surface);
}

.xnkbu-panel .xn-widget-container {
    position: static !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
    box-shadow: none !important;
}

.xnkbu-panel .xnbw-top-container {
    position: static !important;
    display: block !important;
    margin: 0 0 10px !important;
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
}

.xnkbu-panel .xnbw-title {
    margin: 0 !important;
    font-size: 21px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    letter-spacing: -.03em !important;
    color: var(--xnkbu-ink) !important;
}

.xnkbu-panel .xnbw-sub-title {
    margin: 4px 0 0 !important;
    font-size: 13px !important;
    color: var(--xnkbu-body-2) !important;
}

.xnkbu-panel .xnbw-more-tab {
    position: absolute !important;
    top: 34px !important;
    right: 36px !important;
    z-index: 2 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    color: var(--xnkbu-body-2) !important;
    cursor: pointer;
    transition: color .2s var(--xnkbu-ease);
}

.xnkbu-panel .xnbw-more-tab:hover,
.xnkbu-panel .xnbw-more-tab:focus-visible {
    color: var(--xnkbu-pink) !important;
}

.xnkbu-panel .xnbw-more-tab-plus-icon {
    width: 13px !important;
    height: 13px !important;
    background: currentColor !important;
    -webkit-mask: var(--xnkbu-chevron) no-repeat center / contain;
    mask: var(--xnkbu-chevron) no-repeat center / contain;
}

.xnkbu-panel .xnbw-category-wrap {
    display: none !important;
}

.xnkbu-panel .xnbw-board-post-list,
.xnkbu-panel .xnbw-items-container {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 0 !important;
    list-style: none !important;
}

.xnkbu-panel .xnbw-item-container {
    height: auto !important;
    min-height: 0 !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-bottom: 1px solid var(--xnkbu-line-2) !important;
    background: none !important;
}

.xnkbu-panel .xnbw-board-post-list {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 15px 0 !important;
    background: none !important;
}

.xnkbu-panel .xnbw-post-list-category {
    transition: background .18s var(--xnkbu-ease), color .18s var(--xnkbu-ease) !important;
    flex: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 58px !important;
    height: 24px !important;
    margin: 0 !important;
    padding: 0 9px !important;
    border: 0 !important;
    border-radius: 6px !important;
    background: var(--xnkbu-surface-2) !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    color: var(--xnkbu-body-2) !important;
    white-space: nowrap !important;
}

.xnkbu-panel .xnbw-item-container:last-child {
    border-bottom: 0 !important;
}

.xnkbu-panel .xnbw-post-list-title {
    flex: 1 !important;
    min-width: 0 !important;
    margin: 0 !important;
    font-size: 15.5px !important;
    font-weight: 500 !important;
    line-height: 24px !important;
    color: #2A2A28 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.xnkbu-panel .xnbw-board-post-list:hover .xnbw-post-list-category,
.xnkbu-panel .xnbw-board-post-list:focus-visible .xnbw-post-list-category {
    background-color: var(--xnkbu-pink) !important;
    color: #fff !important;
}

.xnkbu-panel .xnbw-board-post-list:hover .xnbw-post-list-title,
.xnkbu-panel .xnbw-board-post-list:focus-visible .xnbw-post-list-title {
    color: var(--xnkbu-pink) !important;
}

.xnkbu-panel .xnbw-post-list-created {
    flex: none !important;
    margin: 0 !important;
    font-family: var(--xnkbu-font-en) !important;
    font-size: 12.5px !important;
    font-weight: 500 !important;
    color: var(--xnkbu-body) !important;
}

.xnkbu-panel-quick {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 24px;
    background: linear-gradient(140deg, var(--xnkbu-pink), var(--xnkbu-pink-d));
}

.xnkbu-quick-eyebrow {
    margin: 0;
    font-family: var(--xnkbu-font-en);
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: .18em;
    color: rgba(255, 255, 255, .7);
}

.xnkbu-quick-title {
    margin: 0;
    font-size: 28px;
    font-weight: 800;
    line-height: 1.34;
    letter-spacing: -.035em;
    color: #fff;
}

.xnkbu-quick-links {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 20px;
}

.xnkbu-quick-btn {
    display: inline-flex;
    align-items: center;
    height: 42px;
    padding: 0 18px;
    -webkit-appearance: none;
    appearance: none;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, .2);
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1;
    color: #fff;
    cursor: pointer;
    transition: background .2s var(--xnkbu-ease), color .2s var(--xnkbu-ease);
}

.xnkbu-quick-btn:hover,
.xnkbu-quick-btn:focus-visible {
    background: #fff;
    color: var(--xnkbu-pink-d);
}

/* ===== 4.5 파킹 페이지 (/) ================================================= */
html.xnkbu-parking-page body,
html.xnkbu-parking-page #content {
    margin: 0 !important;
    padding: 0 !important;
    background: var(--xnkbu-surface);
}

.xnkbu-parking {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 56px var(--xnkbu-gutter);
}

.xnkbu-parking-in {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 620px;
    text-align: center;
}

.xnkbu-parking-logo {
    height: 54px;
    width: auto;
    max-width: 100%;
    margin-bottom: 44px;
    object-fit: contain;
}

.xnkbu-parking-eyebrow {
    margin: 0 0 16px;
    font-family: var(--xnkbu-font-en);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .14em;
    color: var(--xnkbu-pink);
}

.xnkbu-parking-title {
    margin: 0;
    font-size: 40px;
    font-weight: 800;
    line-height: 1.24;
    letter-spacing: -.02em;
    color: var(--xnkbu-ink);
}

.xnkbu-parking-lead {
    margin: 20px 0 0;
    font-size: 16px;
    line-height: 1.8;
    color: var(--xnkbu-body);
}

.xnkbu-parking-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 44px;
    padding: 18px 38px;
    border-radius: 999px;
    background: var(--xnkbu-ink);
    font-size: 16px;
    font-weight: 700;
    transition: background .2s var(--xnkbu-ease), transform .2s var(--xnkbu-ease);
}

.xnkbu-parking-cta:hover,
.xnkbu-parking-cta:focus-visible {
    background: var(--xnkbu-pink);
    transform: translateY(-2px);
}

/* ===== 5. 푸터 ============================================================ */

/* --- 슬로건 밴드 (메인 전용) --- */
#footer.xnkbu {
    padding: 0;
    background: var(--xnkbu-surface);
}

.xnkbu-slogan {
    padding: 68px var(--xnkbu-gutter);
    border-top: 1px solid #E6E4DE;
    border-bottom: 1px solid #E6E4DE;
    background: var(--xnkbu-surface-4);
}

.xnkbu-slogan-in {
    max-width: 1000px;
    margin: 0 auto;
    text-align: center;
}

.xnkbu-slogan-img {
    display: block;
    height: 120px;
    width: auto;
    margin: 0 auto 24px;
}

.xnkbu-slogan-copy {
    margin: 0;
    font-size: 25px;
    font-weight: 500;
    line-height: 1.66;
    letter-spacing: -.025em;
    color: #2A2822;
    text-wrap: pretty;
}

.xnkbu-slogan-cta {
    display: inline-flex;
    align-items: center;
    height: 50px;
    margin-top: 28px;
    padding: 0 30px;
    background: var(--xnkbu-pink);
    font-size: 15px;
    font-weight: 600;
    line-height: 1;
    color: #fff;
    transition: background .2s var(--xnkbu-ease);
}

.xnkbu-slogan-cta:hover,
.xnkbu-slogan-cta:focus-visible {
    background: var(--xnkbu-ink);
    color: #fff;
}

/* --- 인증 마크 밴드 --- */
.xnkbu-certs {
    padding: 30px var(--xnkbu-gutter);
    border-top: 1px solid #E8E8E4;
    background: var(--xnkbu-surface);
}

.xnkbu-certs-in {
    display: grid;
    grid-template-columns: repeat(6, auto);
    justify-content: center;
    gap: 16px 40px;
    align-items: center;
    max-width: var(--xnkbu-w);
    margin: 0 auto;
    padding: 0;
    list-style: none;
}

.xnkbu-cert {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-width: 0;
}

.xnkbu-cert-img {
    flex: none;
    width: 52px;
    height: 40px;
    object-fit: contain;
    object-position: center;
}

.xnkbu-cert-txt {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    min-width: 0;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.45;
    color: #6B7280;
}

.xnkbu-cert-txt > span {
    display: block;
    white-space: nowrap;
}

/* --- 정책 · 주소 · 저작권 --- */
.xnkbu-ft {
    padding: var(--xnkbu-gutter);
    background: var(--xnkbu-surface-5);
}

.xnkbu-ft-in {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 32px;
    max-width: var(--xnkbu-w);
    margin: 0 auto;
}

.xnkbu-ft-name {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.6;
    color: var(--xnkbu-ink);
}

.xnkbu-ft-links {
    display: flex;
    flex-wrap: wrap;
    gap: 22px;
    font-size: 13.5px;
    font-weight: 500;
    color: #6B6B70;
}

.xnkbu-ft-links a:hover,
.xnkbu-ft-links a:focus-visible {
    color: var(--xnkbu-pink);
}

.xnkbu-ft-family {
    position: relative;
    margin-left: auto;
}

/* 열린 목록까지 디자인하기 위해 네이티브 select 대신 버튼 + 목록으로 구성한다.
   (select 의 팝업은 OS 가 그리므로 CSS 가 적용되지 않는다) */
.xnkbu-ft-family-btn {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 200px;
    height: 36px;
    padding: 0 14px;
    border: 1px solid var(--xnkbu-line-3);
    border-radius: 999px;
    background: transparent;
    font-family: var(--xnkbu-font);
    font-size: 13px;
    font-weight: 500;
    color: #6B6B70;
    cursor: pointer;
    transition: border-color .18s var(--xnkbu-ease), color .18s var(--xnkbu-ease);
}

.xnkbu-ft-family-btn:hover,
.xnkbu-ft-family-btn:focus-visible,
.xnkbu-ft-family.is-open .xnkbu-ft-family-btn {
    border-color: var(--xnkbu-ink);
    color: var(--xnkbu-ink);
}

.xnkbu-ft-family-caret {
    width: 13px;
    height: 13px;
    flex: none;
    background: currentColor;
    -webkit-mask: var(--xnkbu-chevron-down) no-repeat center / contain;
    mask: var(--xnkbu-chevron-down) no-repeat center / contain;
    transition: transform .2s var(--xnkbu-ease);
}

.xnkbu-ft-family.is-open .xnkbu-ft-family-caret {
    transform: rotate(180deg);
}

/* 푸터 최하단이라 위로 펼친다. */
.xnkbu-ft-family-list {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 0;
    z-index: 70;
    width: 200px;
    margin: 0;
    padding: 6px;
    list-style: none;
    border: 1px solid var(--xnkbu-line);
    border-radius: 12px;
    background: var(--xnkbu-surface);
    box-shadow: 0 16px 34px rgba(20, 20, 26, .16);
}

.xnkbu-ft-family-list[hidden] {
    display: none;
}

.xnkbu-ft-family-list li + li {
    margin-top: 2px;
}

.xnkbu-ft-family-list a {
    display: block;
    padding: 9px 11px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.3;
    color: #3A3A42;
    text-decoration: none;
    transition: background .16s var(--xnkbu-ease), color .16s var(--xnkbu-ease);
}

.xnkbu-ft-family-list a:hover,
.xnkbu-ft-family-list a:focus-visible {
    background: var(--xnkbu-surface-2);
    color: var(--xnkbu-ink);
    text-decoration: none;
}

#footer.xnkbu .xnkbu-ft-links .footer_link {
    display: flex;
    flex-wrap: wrap;
    gap: inherit;
    flex: none;
    width: auto;
    margin: 0;
    padding: 0;
    text-align: left;
}

#footer.xnkbu .xnkbu-ft-links .footer_link li {
    display: inline-block;
    margin: 0;
    padding: 0;
    background: none;
}

#footer.xnkbu .xnkbu-ft-links .footer_link li a,
#footer.xnkbu .xnkbu-ft-links .footer_link li span {
    display: inline-block;
    padding: 0;
}

#footer.xnkbu .xnkbu-ft-links .footer_link li:first-child a {
    color: var(--xnkbu-ink);
}

#footer.xnkbu .xnkbu-ft-links .footer_link li a:hover,
#footer.xnkbu .xnkbu-ft-links .footer_link li a:focus-visible {
    color: var(--xnkbu-pink);
    text-decoration: none;
}

.xnkbu-ft-info {
    flex: 0 0 100%;
    font-family: var(--xnkbu-font-en);
    font-size: 12.5px;
    font-weight: 400;
    line-height: 1.9;
    color: var(--xnkbu-body);
    text-align: left;
}

.xnkbu-ft-info .xnkbu-ft-addr,
.xnkbu-ft-info .xnkbu-ft-campus {
    display: block;
}

.xnkbu-ft-info .xnkbu-ft-campus strong {
    margin-right: 6px;
    font-weight: 700;
    color: var(--xnkbu-ink-2);
}

.xnkbu-ft-info .xnkbu-ft-copy {
    display: block;
    margin-top: 10px;
    color: var(--xnkbu-mute);
}

.xnkbu-ft-sep {
    margin: 0 6px;
}

.xnkbu-ft-info a:hover,
.xnkbu-ft-info a:focus-visible {
    color: var(--xnkbu-pink);
}

/* ===== 5.5 링크 색 확정 ===================================================== */

#header.xnkbu .xnkbu-brand { color: var(--xnkbu-ink); }

#header.xnkbu .xnkbu-gnb-item > a { color: var(--xnkbu-ink-2); }

#header.xnkbu .xnkbu-submenu > li > a { color: var(--xnkbu-body); }
#header.xnkbu .xnkbu-submenu > li > a:hover,
#header.xnkbu .xnkbu-submenu > li > a:focus-visible { color: var(--xnkbu-ink); }

#header.xnkbu .xnkbu-btn-login { color: #5A5A62; }
#header.xnkbu .xnkbu-btn-login:hover,
#header.xnkbu .xnkbu-btn-login:focus-visible { color: var(--xnkbu-ink); }

#header.xnkbu .xnkbu-btn-join,
#header.xnkbu .xnkbu-btn-join:hover,
#header.xnkbu .xnkbu-btn-join:focus-visible { color: #fff; }

.xnkbu .xnkbu-sec-more { color: var(--xnkbu-body-2); }
.xnkbu .xnkbu-sec-more:hover,
.xnkbu .xnkbu-sec-more:focus-visible { color: var(--xnkbu-pink); }

.xnkbu .xnkbu-slide-cta,
.xnkbu .xnkbu-slide-cta:hover,
.xnkbu .xnkbu-slide-cta:focus-visible { color: #fff; }

.xnkbu .xnkbu-parking-cta,
.xnkbu .xnkbu-parking-cta:hover,
.xnkbu .xnkbu-parking-cta:focus-visible { color: #fff; }

.xnkbu a.xnkbu-tag { color: #3A3A42; }
.xnkbu a.xnkbu-tag:hover,
.xnkbu a.xnkbu-tag:focus-visible { color: #fff; }

.xnkbu .xncwi-link,
.xnkbu .xncwi-link:hover { color: var(--xnkbu-ink); }

.xnkbu .xnkbu-panel .xn-widget-container a,
.xnkbu .xnkbu-panel .xn-widget-container a:hover { color: inherit; }

#footer.xnkbu .xnkbu-slogan-cta,
#footer.xnkbu .xnkbu-slogan-cta:hover,
#footer.xnkbu .xnkbu-slogan-cta:focus-visible { color: #fff; }

#footer.xnkbu .xnkbu-ft-links a { color: #6B6B70; }
#footer.xnkbu .xnkbu-ft-links a:hover,
#footer.xnkbu .xnkbu-ft-links a:focus-visible { color: var(--xnkbu-pink); }

#footer.xnkbu .xnkbu-ft-info a { color: inherit; }
#footer.xnkbu .xnkbu-ft-info a:hover,
#footer.xnkbu .xnkbu-ft-info a:focus-visible { color: var(--xnkbu-pink); }

/* ===== 6. 반응형 ========================================================== */

/* --- Laptop / Tablet landscape : 1024 ~ 1199 --- */
@media (max-width: 1199px) {
    :root {
        --xnkbu-gutter: 32px;
    }

    .xnkbu-hero {
        height: auto;
        min-height: 620px;
        padding-top: 324px;
        padding-bottom: 90px;
    }

    .xnkbu-hero-slides .xnws-caption {
        top: 132px !important;
    }

    .xnkbu-hero-slides .carousel-indicators {
        bottom: 56px;
    }

    .xnkbu-slide-title {
        font-size: 58px;
    }

    .xnkbu-sec-title {
        font-size: 34px;
    }

    .xnkbu-widget-course .xncw-title-wrap * {
        font-size: 34px !important;
    }

    .xnkbu-field-list {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        height: auto;
    }

    .xnkbu-field-in {
        height: 260px;
    }

    .xnkbu-certs-in {
        grid-template-columns: repeat(3, 1fr);
        gap: 18px 24px;
    }
}

/* --- Tablet portrait : 768 ~ 1023 (여기서부터 햄버거) --- */
@media (max-width: 1024px) {
    .xnkbu-hamburger {
        display: block;
        order: 3;
    }

    .xnkbu-hd-in {
        grid-template-columns: 1fr auto auto;
        gap: 16px;
    }

    /* 조상 요소의 position 에 좌우 폭이 좌우되지 않도록 뷰포트 기준으로 고정한다.
       (absolute + top:100% 조합에서 패널 폭이 내용만큼 좁아지는 현상 대응) */
    .xnkbu-nav {
        display: none;
        position: fixed;
        top: var(--xnkbu-hd-h);
        left: 0;
        right: 0;
        width: 100%;
        box-sizing: border-box;
        max-height: calc(100vh - var(--xnkbu-hd-h));
        overflow-y: auto;
        overscroll-behavior: contain;
        z-index: 65;
        padding: 12px var(--xnkbu-gutter) 20px;
        background: var(--xnkbu-surface);
        border-bottom: 1px solid var(--xnkbu-line);
        box-shadow: 0 18px 38px rgba(20, 20, 26, .12);
    }

    #header.xnkbu.xnkbu-nav-open .xnkbu-nav {
        display: block;
    }

    #header.xnkbu.is-aid.xnkbu-nav-open {
        background: var(--xnkbu-surface);
        border-bottom-color: var(--xnkbu-line);
    }

    #header.xnkbu.is-aid.xnkbu-nav-open .xnkbu-gnb-item > a,
    #header.xnkbu.is-aid.xnkbu-nav-open .xnkbu-btn-login {
        text-shadow: none;
    }

    .xnkbu-gnb {
        flex-direction: column;
        justify-content: flex-start;
        gap: 0;
    }

    .xnkbu-gnb-item > a {
        padding: 14px 0;
        border-bottom: 1px solid var(--xnkbu-line-2);
        font-size: 16px;
    }

    .xnkbu-submenu {
        position: static;
        transform: none;
        display: none;
        min-width: 0;
        margin: 0;
        padding: 4px 0 10px 12px;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }

    .xnkbu-gnb-item.open > .xnkbu-submenu {
        display: block;
    }

    .xnkbu-support-grid {
        grid-template-columns: 1fr;
    }

    .xnkbu-widget-course .xnbw-item-container-wrap.course-wrap {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .xnkbu-field-list {
        grid-template-columns: repeat(2, 1fr);
    }

    .xnkbu-slide-title {
        font-size: 48px;
    }

    .xnkbu-search {
        height: 72px;
        padding-left: 24px;
    }

    .xnkbu-search-input {
        font-size: 17px;
    }

    .xnkbu-search-btn {
        height: 52px;
        padding: 0 26px;
        font-size: 16px;
    }

    .xnkbu-ft-in {
        gap: 18px;
    }

    .xnkbu-ft-info {
        margin-left: 0;
        text-align: left;
    }
}

/* --- Mobile : ~767 --- */
@media (max-width: 767px) {
    :root {
        --xnkbu-gutter: 20px;
        --xnkbu-hd-h: 64px;
    }

    .xnkbu-brand-logo {
        height: 36px;
    }

    /* 언어 선택은 반응형에서도 반드시 노출한다. 폭이 좁으므로 지구본 아이콘만 남긴다. */
    .xnkbu-lang .xn-change_language-select_box {
        width: 32px;
        height: 32px;
        gap: 0;
        padding: 0;
        justify-content: center;
    }

    .xnkbu-lang .xn-change_language-select_box > span {
        display: none;
    }

    .xnkbu-lang .xn-change_language-select_box > i {
        width: 15px;
        height: 15px;
    }

    .xnkbu-utils {
        gap: 8px;
    }

    .xnkbu-btn-join,
    #header.xnkbu .btn-dropdown-user-menu {
        height: 36px;
        padding: 0 14px;
        font-size: 13.5px;
    }

    #header.xnkbu .xn-header-member-btn-group .xn-header-member-btn-text {
        max-width: 84px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    #header.xnkbu .xn-v2-user-dropdown {
        right: calc(var(--xnkbu-gutter) * -1 + 8px);
        min-width: min(304px, calc(100vw - 24px));
    }

    .xnkbu-hero {
        min-height: 0;
        padding-top: 217px;
        padding-bottom: 84px;
        border-bottom-left-radius: 28px;
        border-bottom-right-radius: 28px;
    }

    .xnkbu-hero-media {
        border-bottom-left-radius: 28px;
        border-bottom-right-radius: 28px;
    }

    .xnkbu-slide-eyebrow {
        font-size: 13px;
        letter-spacing: .18em;
    }

    .xnkbu-hero-slides .xnws-caption {
        top: 96px !important;
        padding: 0 20px !important;
    }

    .xnkbu-hero-slides .carousel-indicators {
        bottom: 44px;
    }

    .xnkbu-hero-slides .carousel-control-prev,
    .xnkbu-hero-slides .carousel-control-next {
        width: 38px;
        height: 38px;
    }

    .xnkbu-hero-slides .carousel-control-prev { left: 12px; }
    .xnkbu-hero-slides .carousel-control-next { right: 12px; }

    .xnkbu-hero-slides .carousel-control-prev-icon,
    .xnkbu-hero-slides .carousel-control-next-icon {
        width: 13px;
        height: 13px;
    }

    .xnkbu-slide-caption.has-cta .xnkbu-slide-title {
        margin-top: 10px;
        font-size: 24px;
    }

    .xnkbu-slide-caption.has-cta .xnkbu-slide-lead {
        display: none;
    }

    .xnkbu-slide-title {
        margin-top: 16px;
        font-size: 32px;
        letter-spacing: -.03em;
    }

    .xnkbu-search {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        height: auto;
        margin-top: 32px;
        padding: 14px;
        border-radius: 22px;
    }

    .xnkbu-search-input {
        height: 44px;
        padding: 0 10px;
        font-size: 16px;
    }

    .xnkbu-search-btn {
        justify-content: center;
        width: 100%;
        height: 48px;
        padding: 0;
    }

    .xnkbu-hero-tags {
        margin-top: 20px;
    }

    .xnkbu-tag {
        padding: 8px 14px;
        font-size: 12.5px;
    }

    .xnkbu-scroll {
        width: 76px;
        height: 76px;
        bottom: -38px;
    }

    .xnkbu-scroll-ring svg {
        width: 76px;
        height: 76px;
    }

    .xnkbu-fields {
        padding-top: 72px;
    }

    .xnkbu-courses {
        padding-top: 64px;
    }

    .xnkbu-sec-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .xnkbu-sec-title {
        font-size: 26px;
    }

    .xnkbu-widget-course .xncw-title-wrap * {
        font-size: 26px !important;
    }

    .xnkbu-field-list {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .xnkbu-field-in {
        height: 168px;
        border-radius: 18px;
    }

    .xnkbu-field-wm {
        font-size: 76px;
        top: 20px;
    }

    .xnkbu-widget-course .xnbw-item-container-wrap.course-wrap {
        grid-template-columns: 1fr !important;
    }

    .xnkbu-widget-course .xncwi-title {
        font-size: 19px !important;
    }

    .xnkbu-support {
        margin-top: 64px;
        padding: 56px var(--xnkbu-gutter);
    }

    .xnkbu-panel {
        padding: 24px 20px;
        border-radius: 18px;
    }

    .xnkbu-panel .xnbw-item-container {
        align-items: flex-start !important;
        padding: 14px 0 !important;
    }

    .xnkbu-panel .xnbw-post-list-title {
        white-space: normal !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
        font-size: 14.5px !important;
    }

    .xnkbu-quick-title {
        font-size: 23px;
    }

    .xnkbu-slogan {
        padding: 48px var(--xnkbu-gutter);
    }

    .xnkbu-slogan-img {
        height: 40px;
        margin-bottom: 18px;
    }

    .xnkbu-slogan-copy {
        font-size: 17px;
        line-height: 1.7;
    }

    .xnkbu-slogan-cta {
        margin-top: 22px;
        height: 46px;
        padding: 0 22px;
        font-size: 14px;
    }

    .xnkbu-certs-in {
        grid-template-columns: repeat(2, 1fr);
        gap: 14px 16px;
    }

    .xnkbu-cert-img {
        width: 44px;
        height: 34px;
    }

    .xnkbu-cert-txt {
        font-size: 10.5px;
    }

    .xnkbu-cert-txt > span {
        white-space: normal;
    }

    .xnkbu-parking {
        padding: 40px 20px;
    }

    .xnkbu-parking-logo {
        height: 42px;
        margin-bottom: 32px;
    }

    .xnkbu-parking-title {
        font-size: 28px;
    }

    .xnkbu-parking-lead {
        font-size: 14.5px;
    }

    .xnkbu-parking-cta {
        margin-top: 32px;
        padding: 16px 30px;
        font-size: 15px;
    }

    .xnkbu-ft-family {
        margin-left: 0;
    }

    .xnkbu-ft {
        padding: 28px var(--xnkbu-gutter);
    }

    .xnkbu-ft-links {
        gap: 14px;
        font-size: 12.5px;
    }

    .xnkbu-ft-info {
        font-size: 11.5px;
    }
}

@media (max-width: 380px) {
    .xnkbu-slide-title {
        font-size: 28px;
    }

    .xnkbu-hero-tags {
        gap: 6px;
    }

    .xnkbu-certs-in {
        grid-template-columns: 1fr;
    }
}

/* ===== 7. 모션 최소화 ===================================================== */
@media (prefers-reduced-motion: reduce) {
    .xnkbu-scroll-ring {
        animation: none;
    }

    .xnkbu *,
    .xnkbu *::before,
    .xnkbu *::after,
    #header.xnkbu *,
    #footer.xnkbu * {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ===== 8. 서브페이지 (/sub/*) ============================================== */
/* 기본 페이지 타이틀 배너 숨김 — .xnkbu-sp-hero 가 대신한다.
   커스텀 조각이 들어간 페이지에서만 숨기도록 :has() 로 한정한다.
     /pages/{id}        : #root > div > .xn-header-bg-container.titleonly
     /sub/{slug}        : .xnfsp-group-title-container / .xnfsp-title-container */
div:has(> .wysiwyg-content .xnkbu-sp-wrapper) > .xn-header-bg-container,
.xn-front-subpage-container:has(.xnkbu-sp-wrapper) .xnfsp-group-title-container,
.xn-front-subpage-container:has(.xnkbu-sp-wrapper) .xnfsp-title-container {
    display: none !important;
}

.xnkbu-sp-wrapper {
    max-width: var(--xnkbu-w);
    margin: 0 auto;
    padding: 64px var(--xnkbu-gutter) 96px;
    font-family: var(--xnkbu-font);
    color: var(--xnkbu-ink);
    line-height: 1.7;
    word-break: keep-all;
}

.xnkbu-sp-wrapper * {
    box-sizing: border-box;
}

.xnkbu-sp-hero {
    margin-bottom: 56px;
    padding-bottom: 40px;
    border-bottom: 1px solid var(--xnkbu-line);
}

.xnkbu-sp-hero-eyebrow {
    margin: 0 0 12px;
    font-family: var(--xnkbu-font-en);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .16em;
    color: var(--xnkbu-pink);
}

.xnkbu-sp-hero-title {
    margin: 0 0 14px;
    font-size: 42px;
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -.03em;
    color: var(--xnkbu-ink);
}

.xnkbu-sp-hero-lead {
    max-width: 680px;
    margin: 0;
    font-size: 17px;
    color: var(--xnkbu-body);
}

.xnkbu-sp-section {
    margin-bottom: 64px;
}

.xnkbu-sp-section:last-child {
    margin-bottom: 0;
}

.xnkbu-sp-heading {
    margin: 0 0 10px;
    font-size: 28px;
    font-weight: 800;
    line-height: 1.35;
    letter-spacing: -.025em;
    color: var(--xnkbu-ink);
}

.xnkbu-sp-lead {
    margin: 0 0 32px;
    font-size: 16px;
    color: var(--xnkbu-body);
}

.xnkbu-sp-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.xnkbu-sp-list li {
    position: relative;
    margin: 0 0 9px;
    padding-left: 18px;
    font-size: 15px;
    color: #4A4A52;
}

.xnkbu-sp-list li:last-child {
    margin-bottom: 0;
}

.xnkbu-sp-list li::before {
    content: '';
    position: absolute;
    top: 11px;
    left: 2px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--xnkbu-pink);
}

.xnkbu-sp-list strong {
    font-weight: 700;
    color: var(--xnkbu-ink);
}

/* --- 스텝 카드 --- */
.xnkbu-sp-steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.xnkbu-sp-step {
    padding: 28px 24px 26px;
    border: 1px solid var(--xnkbu-line);
    border-radius: 18px;
    background: var(--xnkbu-surface);
}

.xnkbu-sp-step-icon,
.xnkbu-sp-dept-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin-bottom: 18px;
    border-radius: 50%;
    background: var(--xnkbu-surface-4);
    color: var(--xnkbu-ink);
}

.xnkbu-sp-step-icon svg,
.xnkbu-sp-dept-icon svg {
    display: block;
    width: 24px;
    height: 24px;
}

.xnkbu-sp-step-no {
    display: block;
    margin-bottom: 6px;
    font-family: var(--xnkbu-font-en);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .16em;
    color: var(--xnkbu-pink);
}

.xnkbu-sp-step-name {
    margin: 0 0 8px;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -.015em;
    color: var(--xnkbu-ink);
}

.xnkbu-sp-step-desc {
    margin: 0;
    font-size: 14.5px;
    color: var(--xnkbu-body);
}

/* --- 대상별 안내 탭 (순수 CSS) --- */
.xnkbu-sp-tabs {
    position: relative;
}

.xnkbu-sp-radio {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.xnkbu-sp-tablist {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 20px;
}

.xnkbu-sp-tablist label {
    display: inline-flex;
    align-items: center;
    height: 44px;
    padding: 0 24px;
    border: 1px solid var(--xnkbu-line-3);
    border-radius: 999px;
    background: var(--xnkbu-surface);
    font-size: 15px;
    font-weight: 600;
    color: #3A3A42;
    cursor: pointer;
    transition: border-color .18s var(--xnkbu-ease), background-color .18s var(--xnkbu-ease),
                color .18s var(--xnkbu-ease);
}

.xnkbu-sp-tablist label:hover {
    border-color: var(--xnkbu-ink);
    background: var(--xnkbu-surface-2);
    color: var(--xnkbu-ink);
}

.xnkbu-sp-panel {
    display: none;
    padding: 32px 30px;
    border: 1px solid var(--xnkbu-line);
    border-radius: 18px;
    background: var(--xnkbu-surface-3);
}

.xnkbu-sp-panel-title {
    margin: 0 0 16px;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -.015em;
    color: var(--xnkbu-ink);
}

#xnkbu-sp-tab1:checked ~ .xnkbu-sp-tablist label[for="xnkbu-sp-tab1"],
#xnkbu-sp-tab2:checked ~ .xnkbu-sp-tablist label[for="xnkbu-sp-tab2"],
#xnkbu-sp-tab3:checked ~ .xnkbu-sp-tablist label[for="xnkbu-sp-tab3"] {
    border-color: var(--xnkbu-ink);
    background: var(--xnkbu-ink);
    color: #fff;
}

#xnkbu-sp-tab1:focus-visible ~ .xnkbu-sp-tablist label[for="xnkbu-sp-tab1"],
#xnkbu-sp-tab2:focus-visible ~ .xnkbu-sp-tablist label[for="xnkbu-sp-tab2"],
#xnkbu-sp-tab3:focus-visible ~ .xnkbu-sp-tablist label[for="xnkbu-sp-tab3"] {
    outline: 2px solid var(--xnkbu-pink);
    outline-offset: 2px;
}

#xnkbu-sp-tab1:checked ~ .xnkbu-sp-panels .xnkbu-sp-panel-1,
#xnkbu-sp-tab2:checked ~ .xnkbu-sp-panels .xnkbu-sp-panel-2,
#xnkbu-sp-tab3:checked ~ .xnkbu-sp-panels .xnkbu-sp-panel-3 {
    display: block;
}

/* --- 담당부서 카드 --- */
.xnkbu-sp-depts {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.xnkbu-sp-dept {
    padding: 30px 28px;
    border: 1px solid var(--xnkbu-line);
    border-radius: 18px;
    background: var(--xnkbu-surface);
}

.xnkbu-sp-dept-name {
    margin: 0 0 4px;
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -.015em;
    color: var(--xnkbu-ink);
}

.xnkbu-sp-dept-role {
    margin: 0 0 18px;
    font-size: 14.5px;
    color: var(--xnkbu-body);
}

.xnkbu-sp-tel {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 44px;
    padding: 0 22px;
    border: 1px solid var(--xnkbu-line-3);
    border-radius: 999px;
    background: var(--xnkbu-surface);
    font-size: 16px;
    font-weight: 700;
    transition: border-color .18s var(--xnkbu-ease), background-color .18s var(--xnkbu-ease),
                color .18s var(--xnkbu-ease);
}

.xnkbu-sp-tel-label {
    font-family: var(--xnkbu-font-en);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .1em;
    color: var(--xnkbu-mute);
}

.xnkbu-sp-tel:hover .xnkbu-sp-tel-label,
.xnkbu-sp-tel:focus-visible .xnkbu-sp-tel-label {
    color: #fff;
}

/* --- 운영시간 --- */
.xnkbu-sp-hours {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    margin-top: 16px;
    padding: 22px 28px;
    border: 1px solid var(--xnkbu-line);
    border-radius: 18px;
    background: var(--xnkbu-surface-3);
}

.xnkbu-sp-hours-label {
    display: inline-flex;
    align-items: center;
    height: 30px;
    padding: 0 14px;
    border-radius: 999px;
    background: var(--xnkbu-ink);
    font-size: 12.5px;
    font-weight: 700;
    color: #fff;
}

.xnkbu-sp-hours-value {
    font-size: 16px;
    font-weight: 600;
    color: var(--xnkbu-ink);
}

.xnkbu-sp-hours-note {
    font-size: 14.5px;
    color: var(--xnkbu-body);
}

/* --- 안내 박스 --- */
.xnkbu-sp-note {
    padding: 26px 28px;
    border: 1px solid var(--xnkbu-line);
    border-left: 3px solid var(--xnkbu-pink);
    border-radius: 18px;
    background: var(--xnkbu-surface);
}

.xnkbu-sp-note-title {
    margin: 0 0 10px;
    font-size: 16px;
    font-weight: 700;
    color: var(--xnkbu-ink);
}

/* --- 준비중 --- */
.xnkbu-sp-ready {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 420px;
    padding: 72px 32px;
    border: 1px solid var(--xnkbu-line);
    border-radius: 24px;
    background: var(--xnkbu-surface-3);
    text-align: center;
}

.xnkbu-sp-ready-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 76px;
    height: 76px;
    margin-bottom: 28px;
    border-radius: 50%;
    background: var(--xnkbu-surface);
    border: 1px solid var(--xnkbu-line);
    color: var(--xnkbu-pink);
}

.xnkbu-sp-ready-icon svg {
    display: block;
    width: 32px;
    height: 32px;
}

.xnkbu-sp-ready-title {
    margin: 0 0 12px;
    font-size: 30px;
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: -.03em;
    color: var(--xnkbu-ink);
}

.xnkbu-sp-ready-lead {
    max-width: 520px;
    margin: 0 0 32px;
    font-size: 16px;
    color: var(--xnkbu-body);
}

.xnkbu-sp-ready-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

.xnkbu-sp-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 48px;
    padding: 0 28px;
    border: 1px solid var(--xnkbu-line-3);
    border-radius: 999px;
    background: var(--xnkbu-surface);
    font-size: 15px;
    font-weight: 700;
    transition: border-color .18s var(--xnkbu-ease), background-color .18s var(--xnkbu-ease),
                color .18s var(--xnkbu-ease), transform .18s var(--xnkbu-ease);
}

.xnkbu-sp-btn:hover,
.xnkbu-sp-btn:focus-visible {
    border-color: var(--xnkbu-ink);
    background: var(--xnkbu-ink);
    transform: translateY(-2px);
}

.xnkbu-sp-btn-primary {
    border-color: var(--xnkbu-pink);
    background: var(--xnkbu-pink);
}

.xnkbu-sp-btn-primary:hover,
.xnkbu-sp-btn-primary:focus-visible {
    border-color: var(--xnkbu-ink);
    background: var(--xnkbu-ink);
}

/* --- 링크 색 확정 --- */
.xnkbu-sp-wrapper a,
.xnkbu-sp-wrapper a:hover,
.xnkbu-sp-wrapper a:focus {
    color: var(--xnkbu-ink);
    text-decoration: none;
}

.xnkbu-sp-tel:hover,
.xnkbu-sp-tel:focus-visible,
.xnkbu-sp-btn:hover,
.xnkbu-sp-btn:focus-visible {
    color: #fff;
}

.xnkbu-sp-btn-primary,
.xnkbu-sp-btn-primary:hover,
.xnkbu-sp-btn-primary:focus-visible {
    color: #fff;
}

.xnkbu-sp-tel:hover,
.xnkbu-sp-tel:focus-visible {
    border-color: var(--xnkbu-ink);
    background: var(--xnkbu-ink);
}

@media (max-width: 1199px) {
    .xnkbu-sp-wrapper {
        padding: 56px var(--xnkbu-gutter) 84px;
    }

    .xnkbu-sp-steps {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 767px) {
    .xnkbu-sp-wrapper {
        padding: 36px 20px 64px;
    }

    .xnkbu-sp-hero {
        margin-bottom: 40px;
        padding-bottom: 28px;
    }

    .xnkbu-sp-hero-title {
        font-size: 30px;
    }

    .xnkbu-sp-hero-lead {
        font-size: 15.5px;
    }

    .xnkbu-sp-section {
        margin-bottom: 48px;
    }

    .xnkbu-sp-heading {
        font-size: 23px;
    }

    .xnkbu-sp-lead {
        margin-bottom: 24px;
        font-size: 15px;
    }

    .xnkbu-sp-steps,
    .xnkbu-sp-depts {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .xnkbu-sp-step,
    .xnkbu-sp-dept {
        padding: 22px 20px;
    }

    .xnkbu-sp-step-icon,
    .xnkbu-sp-dept-icon {
        width: 44px;
        height: 44px;
        margin-bottom: 14px;
    }

    .xnkbu-sp-tablist label {
        height: 40px;
        padding: 0 18px;
        font-size: 14px;
    }

    .xnkbu-sp-panel,
    .xnkbu-sp-hours,
    .xnkbu-sp-note {
        padding: 22px 20px;
    }

    .xnkbu-sp-ready {
        min-height: 0;
        padding: 48px 22px;
        border-radius: 18px;
    }

    .xnkbu-sp-ready-icon {
        width: 62px;
        height: 62px;
        margin-bottom: 22px;
    }

    .xnkbu-sp-ready-title {
        font-size: 23px;
    }

    .xnkbu-sp-ready-lead {
        margin-bottom: 24px;
        font-size: 15px;
    }

    .xnkbu-sp-btn {
        height: 44px;
        padding: 0 22px;
        font-size: 14px;
    }
}

/* ===== 8.1 서브페이지 — 공통 보강 (2026-09-08) ============================= */
/* ★ 버그 픽스 — 연락처·버튼 hover 글자색
   `.xnkbu-sp-wrapper a:hover`(0,2,1) 가 `.xnkbu-sp-tel:hover`(0,2,0) 보다 특이도가 높아
   검정 배경 위에 검정 글씨가 남았다. 래퍼를 앞에 붙여 특이도를 올린다.
   `.xnkbu-sp-btn-primary`(0,1,0) 도 `.xnkbu-sp-wrapper a`(0,1,1) 에 지고 있었다. */
.xnkbu-sp-wrapper a.xnkbu-sp-tel:hover,
.xnkbu-sp-wrapper a.xnkbu-sp-tel:focus-visible,
.xnkbu-sp-wrapper a.xnkbu-sp-btn:hover,
.xnkbu-sp-wrapper a.xnkbu-sp-btn:focus-visible,
.xnkbu-sp-wrapper a.xnkbu-sp-btn-primary,
.xnkbu-sp-wrapper a.xnkbu-sp-btn-primary:hover,
.xnkbu-sp-wrapper a.xnkbu-sp-btn-primary:focus-visible {
    color: #fff;
}

.xnkbu-sp-wrapper a.xnkbu-sp-tel:hover .xnkbu-sp-tel-label,
.xnkbu-sp-wrapper a.xnkbu-sp-tel:focus-visible .xnkbu-sp-tel-label {
    color: #fff;
}

/* --- 섹션 부제(작은 라벨) --- */
.xnkbu-sp-eyebrow {
    display: block;
    margin: 0 0 10px;
    font-family: var(--xnkbu-font-en);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .16em;
    color: var(--xnkbu-pink);
}

/* --- 서술형 본문 --- */
/* 긴 글은 한 줄이 너무 길어지면 읽히지 않는다. 읽기 폭을 880px 로 제한한다. */
.xnkbu-sp-prose,
.xnkbu-sp-quote,
.xnkbu-sp-sign {
    max-width: 880px;
}

.xnkbu-sp-prose p {
    margin: 0 0 20px;
    font-size: 16.5px;
    line-height: 1.85;
    color: #4A4A52;
}

.xnkbu-sp-prose p:last-child {
    margin-bottom: 0;
}

.xnkbu-sp-prose strong {
    font-weight: 700;
    color: var(--xnkbu-ink);
}

.xnkbu-sp-prose-lead {
    font-size: 18.5px !important;
    font-weight: 600;
    color: var(--xnkbu-ink) !important;
}

/* --- 인용 / 도입문 --- */
.xnkbu-sp-quote {
    margin: 0 0 36px;
    padding: 0 0 0 26px;
    border-left: 3px solid var(--xnkbu-pink);
    font-size: 24px;
    font-weight: 800;
    line-height: 1.5;
    letter-spacing: -.03em;
    color: var(--xnkbu-navy);
}

/* --- 서명 --- */
.xnkbu-sp-sign {
    margin-top: 40px;
    padding-top: 28px;
    border-top: 1px solid var(--xnkbu-line);
    text-align: right;
}

.xnkbu-sp-sign-date {
    margin: 0 0 6px;
    font-family: var(--xnkbu-font-en);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .1em;
    color: var(--xnkbu-mute);
}

.xnkbu-sp-sign-name {
    margin: 0;
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--xnkbu-ink);
}

/* --- 수치 요약 --- */
.xnkbu-sp-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    margin: 0;
    padding: 0;
    border: 1px solid var(--xnkbu-line);
    border-radius: 18px;
    background: var(--xnkbu-surface);
    list-style: none;
    overflow: hidden;
}

.xnkbu-sp-stat {
    padding: 30px 26px;
    border-left: 1px solid var(--xnkbu-line-2);
}

.xnkbu-sp-stat:first-child {
    border-left: 0;
}

.xnkbu-sp-stat-value {
    display: block;
    margin-bottom: 8px;
    font-family: var(--xnkbu-font-en);
    font-size: 32px;
    font-weight: 700;
    letter-spacing: -.03em;
    line-height: 1.1;
    color: var(--xnkbu-navy);
}

.xnkbu-sp-stat-value small {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0;
}

.xnkbu-sp-stat-label {
    display: block;
    margin-bottom: 4px;
    font-size: 15px;
    font-weight: 700;
    color: var(--xnkbu-ink);
}

.xnkbu-sp-stat-note {
    display: block;
    font-size: 13.5px;
    color: var(--xnkbu-body);
}

/* --- 범용 카드 그리드 --- */
.xnkbu-sp-cards {
    display: grid;
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.xnkbu-sp-cards--2 {
    grid-template-columns: repeat(2, 1fr);
}

.xnkbu-sp-cards--3 {
    grid-template-columns: repeat(3, 1fr);
}

.xnkbu-sp-card {
    padding: 30px 28px;
    border: 1px solid var(--xnkbu-line);
    border-radius: 18px;
    background: var(--xnkbu-surface);
}

.xnkbu-sp-card--fill {
    background: var(--xnkbu-surface-3);
}

.xnkbu-sp-card-no {
    display: block;
    margin-bottom: 10px;
    font-family: var(--xnkbu-font-en);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .16em;
    color: var(--xnkbu-pink);
}

.xnkbu-sp-card-name {
    margin: 0 0 10px;
    font-size: 18.5px;
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--xnkbu-ink);
}

.xnkbu-sp-card-desc {
    margin: 0;
    font-size: 15px;
    color: var(--xnkbu-body);
}

/* 설명 없이 제목만 있는 카드(연계 핵심역량 등)는 아래 여백을 없앤다 */
.xnkbu-sp-card-name:last-child {
    margin-bottom: 0;
}

/* --- 태그 pill --- */
.xnkbu-sp-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 16px 0 0;
    padding: 0;
    list-style: none;
}

.xnkbu-sp-tag {
    display: inline-flex;
    align-items: center;
    height: 30px;
    padding: 0 14px;
    border: 1px solid var(--xnkbu-line-3);
    border-radius: 999px;
    background: var(--xnkbu-surface);
    font-size: 13px;
    font-weight: 600;
    color: #3A3A42;
}

/* --- 전주기 흐름 --- */
.xnkbu-sp-flow {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.xnkbu-sp-flow-item {
    position: relative;
    flex: 1 1 0;
    min-width: 150px;
    padding: 22px 22px 20px;
    border: 1px solid var(--xnkbu-line);
    border-radius: 18px;
    background: var(--xnkbu-surface);
}

.xnkbu-sp-flow-item + .xnkbu-sp-flow-item::before {
    content: '';
    position: absolute;
    top: 50%;
    left: -16px;
    width: 12px;
    height: 12px;
    transform: translateY(-50%);
    background: var(--xnkbu-chevron) center / 12px 12px no-repeat;
    opacity: .35;
}

.xnkbu-sp-flow-step {
    display: block;
    margin-bottom: 8px;
    font-family: var(--xnkbu-font-en);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .16em;
    color: var(--xnkbu-pink);
}

.xnkbu-sp-flow-name {
    margin: 0 0 6px;
    font-size: 16.5px;
    font-weight: 700;
    letter-spacing: -.015em;
    color: var(--xnkbu-ink);
}

.xnkbu-sp-flow-desc {
    margin: 0;
    font-size: 14px;
    color: var(--xnkbu-body);
}

/* --- 표 --- */
.xnkbu-sp-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--xnkbu-line);
    border-radius: 18px;
    background: var(--xnkbu-surface);
    -webkit-overflow-scrolling: touch;
}

.xnkbu-sp-table {
    width: 100%;
    min-width: 860px;
    border-collapse: collapse;
    font-size: 14.5px;
}

.xnkbu-sp-table caption {
    padding: 20px 24px 0;
    font-size: 14px;
    color: var(--xnkbu-body);
    text-align: left;
}

.xnkbu-sp-table th,
.xnkbu-sp-table td {
    padding: 22px 20px;
    border-bottom: 1px solid var(--xnkbu-line-2);
    text-align: left;
    vertical-align: top;
    line-height: 1.65;
}

.xnkbu-sp-table thead th {
    padding: 15px 20px;
    border-bottom: 1px solid var(--xnkbu-line-3);
    background: var(--xnkbu-surface-3);
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--xnkbu-navy);
    white-space: nowrap;
}

.xnkbu-sp-table tbody th {
    width: 168px;
    background: #FBFBFA;
    font-weight: 700;
    color: var(--xnkbu-ink);
}

.xnkbu-sp-table tbody tr:last-child th,
.xnkbu-sp-table tbody tr:last-child td {
    border-bottom: 0;
}

/* 마지막 행이 네이비 밴드일 때 래퍼 라운드에 맞춘다 */
.xnkbu-sp-table tbody tr:last-child.xnkbu-sp-table-band th {
    border-bottom: 0 !important;
}

/* 전 대상 공통 셀 */
.xnkbu-sp-table-common {
    background: #FCFCFB;
}

.xnkbu-sp-table-common-label {
    display: inline-flex;
    align-items: center;
    height: 26px;
    margin-bottom: 12px;
    padding: 0 12px;
    border-radius: 999px;
    background: #EDF2F8;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--xnkbu-navy);
}

.xnkbu-sp-table-common-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 28px;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none;
}

.xnkbu-sp-table-common-list li {
    position: relative;
    margin: 0;
    padding-left: 14px;
}

.xnkbu-sp-table-common-list li::before {
    content: '';
    position: absolute;
    top: 10px;
    left: 0;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--xnkbu-pink);
}

/* 배지 칩 */
.xnkbu-sp-table-chip {
    display: inline-flex;
    align-items: center;
    padding: 7px 13px;
    border-radius: 999px;
    background: #F1F1EE;
    font-family: var(--xnkbu-font-en);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--xnkbu-navy);
    white-space: nowrap;
}

.xnkbu-sp-table td {
    color: #4A4A52;
}

/* 구간 밴드 — 진한 네이비 솔리드는 반복될수록 눈이 아프다.
   연한 네이비 틴트 + 왼쪽 마젠타 바로 낮춘다. */
.xnkbu-sp-table-band th {
    padding: 14px 18px !important;
    background: #EDF2F8 !important;
    border-bottom: 1px solid var(--xnkbu-line-2) !important;
    box-shadow: inset 3px 0 0 var(--xnkbu-pink);
    color: var(--xnkbu-navy) !important;
    font-size: 14.5px;
    font-weight: 700;
    letter-spacing: -.015em;
    text-align: left;
    width: auto !important;
}

.xnkbu-sp-table-band th span {
    display: inline-block;
    margin-left: 10px;
    font-family: var(--xnkbu-font-en);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .12em;
    color: #7C8CA3;
}

.xnkbu-sp-table-level {
    display: block;
    margin-bottom: 4px;
    font-family: var(--xnkbu-font-en);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .16em;
    color: var(--xnkbu-pink);
}

.xnkbu-sp-table ol,
.xnkbu-sp-table ul {
    margin: 0;
    padding-left: 17px;
}

.xnkbu-sp-table li {
    margin-bottom: 3px;
}

.xnkbu-sp-table li:last-child {
    margin-bottom: 0;
}

.xnkbu-sp-scroll-hint {
    margin: 10px 0 0;
    font-size: 13.5px;
    color: var(--xnkbu-mute);
}

/* --- 디지털 배지 등급 --- */
.xnkbu-sp-badges {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.xnkbu-sp-badge {
    display: flex;
    flex-direction: column;
    padding: 28px 24px 26px;
    border: 1px solid var(--xnkbu-line);
    border-top: 4px solid var(--xnkbu-line-3);
    border-radius: 4px 4px 18px 18px;
    background: var(--xnkbu-surface);
}

.xnkbu-sp-badge--1 {
    border-top-color: #C2CBD8;
}

.xnkbu-sp-badge--2 {
    border-top-color: #6F8199;
}

.xnkbu-sp-badge--3 {
    border-top-color: var(--xnkbu-navy);
}

.xnkbu-sp-badge--4 {
    border-top-color: var(--xnkbu-pink);
}

.xnkbu-sp-badge-tier {
    display: block;
    margin-bottom: 4px;
    font-family: var(--xnkbu-font-en);
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--xnkbu-navy);
}

.xnkbu-sp-badge-ko {
    display: block;
    margin-bottom: 18px;
    font-size: 14px;
    font-weight: 600;
    color: var(--xnkbu-body);
}

.xnkbu-sp-badge-req {
    margin: 0 0 auto;
    font-size: 14.5px;
    line-height: 1.65;
    color: #4A4A52;
}

.xnkbu-sp-badge-req em {
    display: block;
    margin-top: 6px;
    font-size: 13.5px;
    font-style: normal;
    color: var(--xnkbu-body-2);
}

.xnkbu-sp-badge-meta {
    margin: 20px 0 0;
    padding-top: 16px;
    border-top: 1px solid var(--xnkbu-line-2);
    font-size: 13px;
    font-weight: 600;
    color: var(--xnkbu-mute);
}

/* --- FAQ (정적) --- */
.xnkbu-sp-faq {
    margin: 0;
    padding: 0;
    list-style: none;
}

.xnkbu-sp-faq-item {
    padding: 28px 30px;
    border: 1px solid var(--xnkbu-line);
    border-radius: 18px;
    background: var(--xnkbu-surface-3);
}

.xnkbu-sp-faq-item + .xnkbu-sp-faq-item {
    margin-top: 12px;
}

.xnkbu-sp-faq-q {
    position: relative;
    margin: 0 0 12px;
    padding-left: 34px;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--xnkbu-ink);
}

.xnkbu-sp-faq-q::before {
    content: 'Q';
    position: absolute;
    top: 1px;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--xnkbu-pink);
    font-family: var(--xnkbu-font-en);
    font-size: 13px;
    font-weight: 700;
    color: #fff;
}

.xnkbu-sp-faq-a {
    margin: 0;
    padding-left: 34px;
    font-size: 15.5px;
    line-height: 1.8;
    color: #4A4A52;
}

/* --- 실습시설 --- */
.xnkbu-sp-facils {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.xnkbu-sp-facil {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--xnkbu-line);
    border-radius: 18px;
    background: var(--xnkbu-surface);
    overflow: hidden;
}

/* 이미지 대신 CSS 로만 그린 추상 비주얼 (외부 에셋 없음) */
.xnkbu-sp-facil-visual {
    position: relative;
    height: 148px;
    background:
        linear-gradient(135deg, rgba(229, 0, 126, .14), transparent 62%),
        linear-gradient(180deg, #072B52, var(--xnkbu-navy));
}

.xnkbu-sp-facil-visual::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(to right, rgba(255, 255, 255, .085) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, .085) 1px, transparent 1px);
    background-size: 26px 26px;
}

.xnkbu-sp-facil-visual span {
    position: absolute;
    right: 20px;
    bottom: 16px;
    font-family: var(--xnkbu-font-en);
    font-size: 40px;
    font-weight: 700;
    letter-spacing: -.04em;
    color: rgba(255, 255, 255, .18);
}

.xnkbu-sp-facil-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 26px 26px 24px;
}

.xnkbu-sp-facil-en {
    display: block;
    margin-bottom: 6px;
    font-family: var(--xnkbu-font-en);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--xnkbu-pink);
}

.xnkbu-sp-facil-name {
    margin: 0 0 10px;
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--xnkbu-ink);
}

.xnkbu-sp-facil-desc {
    margin: 0 0 auto;
    font-size: 14.5px;
    color: var(--xnkbu-body);
}

/* --- 정의형 정보 목록 --- */
.xnkbu-sp-info {
    margin: 0;
    border: 1px solid var(--xnkbu-line);
    border-radius: 18px;
    background: var(--xnkbu-surface);
    overflow: hidden;
}

.xnkbu-sp-info-row {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    padding: 22px 28px;
    border-bottom: 1px solid var(--xnkbu-line-2);
}

.xnkbu-sp-info-row:last-child {
    border-bottom: 0;
}

.xnkbu-sp-info-term {
    flex: 0 0 148px;
    margin: 0;
    font-size: 14.5px;
    font-weight: 700;
    color: var(--xnkbu-navy);
}

.xnkbu-sp-info-desc {
    margin: 0;
    font-size: 15.5px;
    color: #4A4A52;
}

.xnkbu-sp-info-desc small {
    display: block;
    margin-top: 4px;
    font-size: 13.5px;
    color: var(--xnkbu-body);
}

/* --- 지도 자리 (외부 지도 이미지 미사용) --- */
.xnkbu-sp-map {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    min-height: 260px;
    margin-bottom: 16px;
    padding: 32px;
    border: 1px solid var(--xnkbu-line);
    border-radius: 18px;
    background:
        linear-gradient(135deg, rgba(229, 0, 126, .10), transparent 60%),
        linear-gradient(180deg, #072B52, var(--xnkbu-navy));
    color: #fff;
}

.xnkbu-sp-map-label {
    margin: 0 0 8px;
    font-family: var(--xnkbu-font-en);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .16em;
    color: rgba(255, 255, 255, .6);
}

.xnkbu-sp-map-addr {
    margin: 0 0 22px;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -.02em;
    color: #fff;
}

.xnkbu-sp-wrapper .xnkbu-sp-map-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 48px;
    padding: 0 26px;
    border-radius: 999px;
    background: #fff;
    font-size: 15px;
    font-weight: 700;
    color: var(--xnkbu-navy);
    transition: background-color .18s var(--xnkbu-ease), color .18s var(--xnkbu-ease);
}

.xnkbu-sp-wrapper .xnkbu-sp-map-btn:hover,
.xnkbu-sp-wrapper .xnkbu-sp-map-btn:focus-visible {
    background: var(--xnkbu-pink);
    color: #fff;
}

/* --- 조직도 --- */
.xnkbu-sp-org {
    padding: 44px 32px;
    border: 1px solid var(--xnkbu-line);
    border-radius: 24px;
    background: var(--xnkbu-surface-3);
}

.xnkbu-sp-org-level {
    position: relative;
    display: flex;
    justify-content: center;
    padding-top: 30px;
}

.xnkbu-sp-org-level:first-child {
    padding-top: 0;
}

.xnkbu-sp-org-level:not(:first-child)::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    width: 1px;
    height: 30px;
    background: var(--xnkbu-line-3);
}

.xnkbu-sp-org-node {
    min-width: 260px;
    margin: 0;
    padding: 18px 26px;
    border-radius: 14px;
    text-align: center;
}

.xnkbu-sp-org-node--navy {
    background: var(--xnkbu-navy);
    color: #fff;
}

.xnkbu-sp-org-node--outline {
    border: 1px solid var(--xnkbu-navy);
    background: var(--xnkbu-surface);
    color: var(--xnkbu-navy);
}

.xnkbu-sp-org-node-name {
    display: block;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -.02em;
}

.xnkbu-sp-org-node-role {
    display: block;
    margin-top: 4px;
    font-size: 13.5px;
    font-weight: 600;
    opacity: .72;
}

.xnkbu-sp-org-teams {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin: 0;
    padding: 52px 0 0;
    list-style: none;
}

/* 거점센터 → 팀 커넥터: 세로 줄기 + 가로 가지 + 팀별 세로 꼬리 */
.xnkbu-sp-org-teams::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    width: 1px;
    height: 26px;
    background: var(--xnkbu-line-3);
}

.xnkbu-sp-org-teams::after {
    content: '';
    position: absolute;
    top: 26px;
    left: 16.6%;
    right: 16.6%;
    height: 1px;
    background: var(--xnkbu-line-3);
}

.xnkbu-sp-org-team {
    position: relative;
    padding: 24px 22px;
    border: 1px solid var(--xnkbu-line);
    border-radius: 18px;
    background: var(--xnkbu-surface);
}

.xnkbu-sp-org-team::before {
    content: '';
    position: absolute;
    top: -26px;
    left: 50%;
    width: 1px;
    height: 26px;
    background: var(--xnkbu-line-3);
}

.xnkbu-sp-org-team-name {
    margin: 0 0 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--xnkbu-line-2);
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--xnkbu-navy);
    text-align: center;
}

.xnkbu-sp-org-members {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.xnkbu-sp-org-members li {
    padding: 7px 13px;
    border-radius: 999px;
    background: #EAEEF4;
    font-size: 13.5px;
    font-weight: 600;
    color: #33445C;
}

.xnkbu-sp-org-committees {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 20px 0 0;
    padding: 0;
    list-style: none;
    justify-content: center;
}

.xnkbu-sp-org-committees li {
    padding: 9px 16px;
    border: 1px dashed var(--xnkbu-line-3);
    border-radius: 999px;
    background: var(--xnkbu-surface);
    font-size: 13.5px;
    font-weight: 600;
    color: #4A5A72;
}

.xnkbu-sp-org-caption {
    margin: 20px 0 0;
    font-size: 13.5px;
    color: var(--xnkbu-mute);
    text-align: center;
}

/* --- 8.1 반응형 --- */
@media (max-width: 1199px) {
    .xnkbu-sp-stats,
    .xnkbu-sp-badges {
        grid-template-columns: repeat(2, 1fr);
    }

    .xnkbu-sp-stat {
        border-top: 1px solid var(--xnkbu-line-2);
    }

    .xnkbu-sp-stat:nth-child(1),
    .xnkbu-sp-stat:nth-child(2) {
        border-top: 0;
    }

    .xnkbu-sp-stat:nth-child(odd) {
        border-left: 0;
    }

    .xnkbu-sp-facils,
    .xnkbu-sp-cards--3 {
        grid-template-columns: repeat(2, 1fr);
    }

    .xnkbu-sp-org-teams {
        grid-template-columns: 1fr;
        padding-top: 30px;
    }

    .xnkbu-sp-org-teams::after,
    .xnkbu-sp-org-team::before {
        display: none;
    }

    .xnkbu-sp-org-teams::before {
        height: 30px;
    }
}

@media (max-width: 767px) {
    .xnkbu-sp-quote {
        margin-bottom: 26px;
        padding-left: 18px;
        font-size: 19px;
    }

    .xnkbu-sp-prose p {
        font-size: 15.5px;
        line-height: 1.8;
    }

    .xnkbu-sp-prose-lead {
        font-size: 17px !important;
    }

    .xnkbu-sp-stats,
    .xnkbu-sp-badges,
    .xnkbu-sp-facils,
    .xnkbu-sp-cards--2,
    .xnkbu-sp-cards--3 {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .xnkbu-sp-stat {
        border-left: 0 !important;
        border-top: 1px solid var(--xnkbu-line-2);
        padding: 22px 20px;
    }

    .xnkbu-sp-stat:first-child {
        border-top: 0;
    }

    .xnkbu-sp-card,
    .xnkbu-sp-faq-item,
    .xnkbu-sp-badge,
    .xnkbu-sp-facil-body,
    .xnkbu-sp-flow-item {
        padding: 22px 20px;
    }

    .xnkbu-sp-flow {
        flex-direction: column;
    }

    .xnkbu-sp-flow-item + .xnkbu-sp-flow-item::before {
        top: -16px;
        left: 50%;
        transform: translateX(-50%) rotate(90deg);
    }

    .xnkbu-sp-info-row {
        flex-direction: column;
        gap: 6px;
        padding: 18px 20px;
    }

    .xnkbu-sp-info-term {
        flex: none;
    }

    .xnkbu-sp-map {
        min-height: 0;
        padding: 24px 20px;
    }

    .xnkbu-sp-map-addr {
        font-size: 17px;
    }

    .xnkbu-sp-org {
        padding: 28px 18px;
        border-radius: 18px;
    }

    .xnkbu-sp-org-node {
        min-width: 0;
        width: 100%;
        padding: 16px 18px;
    }

    .xnkbu-sp-org-teams {
        gap: 12px;
    }

    .xnkbu-sp-sign {
        text-align: left;
    }

    .xnkbu-sp-faq-q {
        font-size: 16.5px;
    }

    .xnkbu-sp-faq-a {
        font-size: 15px;
    }
}

/* ===== 8.2 서브페이지 — 서술형 2단 레이아웃 (2026-09-08) ==================== */
/* 인사말·소개처럼 글만 있는 페이지가 한쪽만 차고 오른쪽이 비어 보이던 문제를
   좌측 이미지 영역 + 우측 본문 2단으로 해결한다.
   좌측 비주얼은 외부 이미지 없이 CSS 로만 그린다. 실제 사진이 준비되면
   .xnkbu-sp-figure-visual 안에 <img> 를 넣으면 그대로 꽉 채워진다. */
.xnkbu-sp-split {
    display: grid;
    grid-template-columns: 360px 1fr;
    gap: 56px;
    align-items: start;
}

.xnkbu-sp-split-aside {
    position: sticky;
    top: 120px;
}

/* 2단 안에서는 읽기 폭 제한을 풀어 오른쪽 칼럼을 꽉 채운다 */
.xnkbu-sp-split .xnkbu-sp-prose,
.xnkbu-sp-split .xnkbu-sp-quote,
.xnkbu-sp-split .xnkbu-sp-sign {
    max-width: none;
}

/* --- 이미지 영역 --- */
.xnkbu-sp-figure {
    margin: 0;
}

.xnkbu-sp-figure-visual {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 18px;
    overflow: hidden;
    background:
        linear-gradient(150deg, rgba(229, 0, 126, .18), transparent 58%),
        linear-gradient(180deg, #072B52, var(--xnkbu-navy));
}

.xnkbu-sp-figure-visual::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(to right, rgba(255, 255, 255, .075) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, .075) 1px, transparent 1px);
    background-size: 30px 30px;
}

.xnkbu-sp-figure-visual::after {
    content: '';
    position: absolute;
    top: -25%;
    right: 22%;
    width: 3px;
    height: 150%;
    transform: rotate(22deg);
    background: var(--xnkbu-pink);
    opacity: .55;
}

.xnkbu-sp-figure-visual--portrait {
    aspect-ratio: 3 / 4;
}

.xnkbu-sp-figure-visual--tall {
    aspect-ratio: 4 / 5;
}

/* 가로 사진(갤러리 렌더 16:9)을 넣을 때 — 세로 비율에 넣으면 과하게 잘린다 */
.xnkbu-sp-figure-visual--wide {
    aspect-ratio: 4 / 3;
}

.xnkbu-sp-figure-visual--square {
    aspect-ratio: 1 / 1;
}

/* 실제 사진이 들어오면 장식(그리드·대각선)을 끈다 — 사진 위에 선이 겹치면 안 된다 */
.xnkbu-sp-figure-visual:has(img) {
    background: var(--xnkbu-surface-3);
}

.xnkbu-sp-figure-visual:has(img)::before,
.xnkbu-sp-figure-visual:has(img)::after {
    display: none;
}

/* 실제 사진으로 교체할 때 */
.xnkbu-sp-figure-visual img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.xnkbu-sp-figure-mark {
    position: relative;
    margin: 0;
    font-family: var(--xnkbu-font-en);
    font-size: 42px;
    font-weight: 700;
    letter-spacing: -.04em;
    line-height: 1.1;
    color: rgba(255, 255, 255, .94);
    text-align: center;
}

.xnkbu-sp-figure-mark small {
    display: block;
    margin-top: 10px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .18em;
    color: rgba(255, 255, 255, .52);
}

.xnkbu-sp-figure figcaption {
    margin-top: 18px;
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--xnkbu-body);
}

.xnkbu-sp-figure figcaption strong {
    display: block;
    margin-bottom: 4px;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--xnkbu-ink);
}

.xnkbu-sp-figure-note {
    margin: 14px 0 0;
    font-size: 12.5px;
    color: var(--xnkbu-mute);
}

/* --- 2단 오른쪽 칼럼 첫 도입문 --- */
.xnkbu-sp-lead-intro {
    margin: 0 0 30px;
    font-size: 18.5px;
    font-weight: 600;
    line-height: 1.75;
    letter-spacing: -.01em;
    color: var(--xnkbu-ink);
}

/* 표 바로 아래 붙는 안내 박스 */
.xnkbu-sp-note--gap {
    margin-top: 20px;
}

/* --- 페이지 마감 배너 --- */
.xnkbu-sp-banner {
    padding: 56px 48px;
    border-radius: 24px;
    background:
        linear-gradient(140deg, rgba(229, 0, 126, .20), transparent 55%),
        linear-gradient(180deg, #072B52, var(--xnkbu-navy));
    text-align: center;
}

.xnkbu-sp-banner-label {
    margin: 0 0 16px;
    font-family: var(--xnkbu-font-en);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .18em;
    color: rgba(255, 255, 255, .55);
}

.xnkbu-sp-banner-text {
    margin: 0;
    font-size: 30px;
    font-weight: 800;
    line-height: 1.45;
    letter-spacing: -.03em;
    color: #fff;
}

/* --- 본문 중간 강조 인용 --- */
/* `.xnkbu-sp-prose p`(0,1,1) 가 (0,1,0) 을 덮으므로 래퍼를 붙여 특이도를 올린다 */
.xnkbu-sp-wrapper .xnkbu-sp-pullquote {
    margin: 34px 0;
    padding: 28px 32px;
    border-left: 3px solid var(--xnkbu-navy);
    border-radius: 0 18px 18px 0;
    background: var(--xnkbu-surface-3);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.55;
    letter-spacing: -.025em;
    color: var(--xnkbu-navy);
}

@media (max-width: 1199px) {
    .xnkbu-sp-split {
        grid-template-columns: 300px 1fr;
        gap: 40px;
    }

    .xnkbu-sp-figure-mark {
        font-size: 34px;
    }
}

@media (max-width: 900px) {
    .xnkbu-sp-split {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .xnkbu-sp-split-aside {
        position: static;
        max-width: 320px;
    }
}

@media (max-width: 767px) {
    .xnkbu-sp-banner {
        padding: 36px 22px;
        border-radius: 18px;
    }

    .xnkbu-sp-banner-text {
        font-size: 21px;
    }

    .xnkbu-sp-lead-intro {
        margin-bottom: 24px;
        font-size: 17px;
    }

    .xnkbu-sp-wrapper .xnkbu-sp-pullquote {
        margin: 26px 0;
        padding: 22px 20px;
        font-size: 17px;
    }
}

/* ===== 8.3 서브페이지 — 사진 갤러리 · 라이트박스 (2026-09-09) ================ */
/* 시설 & 인프라 안내에서 사용. 사진은 운영 자산 폴더(/customs/main/)에 업로드한 뒤
   경로를 그대로 참조한다. 확대 보기는 JS 없이 :target 으로만 동작한다. */
.xnkbu-sp-gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.xnkbu-sp-wrapper .xnkbu-sp-gallery-link {
    display: block;
    border: 1px solid var(--xnkbu-line);
    border-radius: 18px;
    background: var(--xnkbu-surface);
    overflow: hidden;
    transition: border-color .18s var(--xnkbu-ease), transform .18s var(--xnkbu-ease);
}

.xnkbu-sp-wrapper .xnkbu-sp-gallery-link:hover,
.xnkbu-sp-wrapper .xnkbu-sp-gallery-link:focus-visible {
    border-color: var(--xnkbu-ink);
    transform: translateY(-2px);
}

.xnkbu-sp-gallery-thumb {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    background: var(--xnkbu-surface-3);
}

.xnkbu-sp-gallery-cap {
    display: block;
    padding: 20px 22px 22px;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -.015em;
    color: var(--xnkbu-ink);
}

.xnkbu-sp-gallery-cap em {
    display: block;
    margin-top: 6px;
    font-size: 13px;
    font-style: normal;
    font-weight: 600;
    color: var(--xnkbu-pink);
}

/* --- 라이트박스 --- */
.xnkbu-sp-lightbox {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 99999;
    align-items: center;
    justify-content: center;
    padding: 56px 72px;
    background: rgba(4, 32, 63, .93);
}

.xnkbu-sp-lightbox:target {
    display: flex;
}

/* 사이트 공통 헤더가 라이트박스 위로 뜨지 않도록 잠시 낮춘다 */
body:has(.xnkbu-sp-lightbox:target) #header {
    z-index: 1 !important;
}

.xnkbu-sp-lightbox figure {
    position: relative;
    z-index: 1;
    max-width: 1100px;
    margin: 0;
}

.xnkbu-sp-lightbox img {
    display: block;
    width: 100%;
    max-height: 76vh;
    object-fit: contain;
    border-radius: 14px;
}

.xnkbu-sp-lightbox figcaption {
    margin-top: 18px;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -.015em;
    color: #fff;
    text-align: center;
}

.xnkbu-sp-wrapper .xnkbu-sp-lightbox-close,
.xnkbu-sp-wrapper .xnkbu-sp-lightbox-nav {
    position: absolute;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: rgba(255, 255, 255, .12);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    transition: background-color .18s var(--xnkbu-ease), color .18s var(--xnkbu-ease);
}

.xnkbu-sp-wrapper .xnkbu-sp-lightbox-close:hover,
.xnkbu-sp-wrapper .xnkbu-sp-lightbox-close:focus-visible,
.xnkbu-sp-wrapper .xnkbu-sp-lightbox-nav:hover,
.xnkbu-sp-wrapper .xnkbu-sp-lightbox-nav:focus-visible {
    background: var(--xnkbu-pink);
    color: #fff;
}

.xnkbu-sp-wrapper .xnkbu-sp-lightbox-close {
    top: 24px;
    right: 28px;
    height: 42px;
    padding: 0 22px;
}

.xnkbu-sp-wrapper .xnkbu-sp-lightbox-nav {
    top: 50%;
    width: 52px;
    height: 52px;
    margin-top: -26px;
    font-size: 20px;
}

.xnkbu-sp-wrapper .xnkbu-sp-lightbox-prev {
    left: 18px;
}

.xnkbu-sp-wrapper .xnkbu-sp-lightbox-next {
    right: 18px;
}

/* --- 실습시설 이름 카드(설명 없이 이름만) --- */
.xnkbu-sp-rooms {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.xnkbu-sp-room {
    padding: 28px 26px;
    border: 1px solid var(--xnkbu-line);
    border-left: 3px solid var(--xnkbu-navy);
    border-radius: 4px 18px 18px 4px;
    background: var(--xnkbu-surface);
}

.xnkbu-sp-room-no {
    display: block;
    margin-bottom: 12px;
    font-family: var(--xnkbu-font-en);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .16em;
    color: var(--xnkbu-pink);
}

.xnkbu-sp-room-name {
    margin: 0 0 6px;
    font-size: 18.5px;
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--xnkbu-ink);
}

.xnkbu-sp-room-en {
    margin: 0;
    font-family: var(--xnkbu-font-en);
    font-size: 13.5px;
    font-weight: 600;
    color: var(--xnkbu-body);
}

@media (max-width: 1199px) {
    .xnkbu-sp-gallery,
    .xnkbu-sp-rooms {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 767px) {
    .xnkbu-sp-gallery,
    .xnkbu-sp-rooms {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .xnkbu-sp-gallery-cap {
        padding: 16px 18px 18px;
        font-size: 15px;
    }

    .xnkbu-sp-room {
        padding: 22px 20px;
    }

    .xnkbu-sp-lightbox {
        padding: 64px 16px 40px;
    }

    .xnkbu-sp-wrapper .xnkbu-sp-lightbox-close {
        top: 14px;
        right: 14px;
        height: 38px;
        padding: 0 18px;
    }

    .xnkbu-sp-wrapper .xnkbu-sp-lightbox-nav {
        width: 44px;
        height: 44px;
        margin-top: -22px;
    }

    .xnkbu-sp-wrapper .xnkbu-sp-lightbox-prev {
        left: 8px;
    }

    .xnkbu-sp-wrapper .xnkbu-sp-lightbox-next {
        right: 8px;
    }
}

/* --- 오시는 길: 정적 지도 이미지를 넣을 경우 --- */
/* 지도 카드 안 첫 줄에 <img class="xnkbu-sp-map-img"> 를 넣으면 배경 그라데이션 대신 사진이 깔린다. */
.xnkbu-sp-map:has(.xnkbu-sp-map-img) {
    position: relative;
    justify-content: flex-end;
    min-height: 420px;
    overflow: hidden;
}

.xnkbu-sp-map-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.xnkbu-sp-map:has(.xnkbu-sp-map-img)::after {
    content: '';
    position: absolute;
    inset: 0;
    /* 지도는 가려지면 안 된다 — 글자가 놓이는 왼쪽만 어둡게 덮는 가로 스크림 */
    background: linear-gradient(90deg, rgba(4, 32, 63, .93) 0%, rgba(4, 32, 63, .78) 22%,
                                rgba(4, 32, 63, .35) 42%, rgba(4, 32, 63, 0) 58%);
}

.xnkbu-sp-map:has(.xnkbu-sp-map-img) .xnkbu-sp-map-label,
.xnkbu-sp-map:has(.xnkbu-sp-map-img) .xnkbu-sp-map-addr,
.xnkbu-sp-map:has(.xnkbu-sp-map-img) .xnkbu-sp-map-btn {
    position: relative;
    z-index: 1;
}

/* ===== 8.4 서브페이지 — 디자인 디벨롭 (2026-09-09) ========================== */
/* 내용은 그대로 두고 위계·리듬·질감만 올린다. 앞 블록(8~8.3)을 덮어쓰는 보정이다. */

/* --- 히어로: 좌 제목 / 우 리드 에디토리얼 2단 --- */
.xnkbu-sp-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
    column-gap: 56px;
    align-items: end;
    margin-bottom: 72px;
    padding-bottom: 30px;
    border-bottom: 1px solid var(--xnkbu-ink);
}

/* 구분선 왼쪽 끝에 마젠타 세그먼트 */
.xnkbu-sp-hero::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 88px;
    height: 3px;
    background: var(--xnkbu-pink);
}

.xnkbu-sp-hero-eyebrow {
    grid-column: 1;
    margin-bottom: 14px;
}

.xnkbu-sp-hero-title {
    grid-column: 1;
    margin: 0;
    font-size: 52px;
    line-height: 1.15;
    letter-spacing: -.04em;
}

.xnkbu-sp-hero-lead {
    grid-column: 2;
    grid-row: 2;
    max-width: none;
    padding-bottom: 6px;
    font-size: 16px;
    line-height: 1.7;
}

/* --- 섹션: 헤어라인 + 자동 번호 --- */
.xnkbu-sp-wrapper {
    counter-reset: xnkbu-sec;
}

.xnkbu-sp-section {
    margin-bottom: 88px;
}

.xnkbu-sp-heading {
    margin-bottom: 14px;
    padding-top: 24px;
    border-top: 1px solid var(--xnkbu-line-3);
    font-size: 31px;
    letter-spacing: -.03em;
}

.xnkbu-sp-heading::before {
    counter-increment: xnkbu-sec;
    content: counter(xnkbu-sec, decimal-leading-zero);
    display: block;
    margin-bottom: 12px;
    font-family: var(--xnkbu-font-en);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .18em;
    color: var(--xnkbu-pink);
}

.xnkbu-sp-lead {
    margin-bottom: 36px;
}

/* --- 카드 공통: 정지 상태의 질감 + 반응 --- */
.xnkbu-sp-card,
.xnkbu-sp-step,
.xnkbu-sp-dept,
.xnkbu-sp-flow-item,
.xnkbu-sp-room,
.xnkbu-sp-badge,
.xnkbu-sp-facil {
    transition: border-color .2s var(--xnkbu-ease), box-shadow .2s var(--xnkbu-ease),
                transform .2s var(--xnkbu-ease);
}

.xnkbu-sp-card:hover,
.xnkbu-sp-step:hover,
.xnkbu-sp-dept:hover,
.xnkbu-sp-room:hover,
.xnkbu-sp-badge:hover,
.xnkbu-sp-facil:hover {
    border-color: var(--xnkbu-line-3);
    box-shadow: 0 10px 30px rgba(4, 32, 63, .07);
    transform: translateY(-2px);
}

.xnkbu-sp-card-no,
.xnkbu-sp-step-no,
.xnkbu-sp-flow-step,
.xnkbu-sp-room-no {
    font-size: 11.5px;
    letter-spacing: .18em;
}

.xnkbu-sp-card-name {
    font-size: 19px;
}

/* --- 수치: 숫자를 확실히 크게 --- */
.xnkbu-sp-stats {
    border-color: var(--xnkbu-line-3);
}

.xnkbu-sp-stat {
    padding: 34px 28px;
}

.xnkbu-sp-stat-value {
    margin-bottom: 14px;
    font-size: 40px;
    letter-spacing: -.045em;
}

.xnkbu-sp-stat-value small {
    margin-left: 2px;
    font-size: 15px;
    color: var(--xnkbu-body);
}

.xnkbu-sp-stat-label {
    margin-bottom: 6px;
    font-size: 15.5px;
}

/* --- 실습시설 카드: 번호 타이포를 조판 요소로 --- */
.xnkbu-sp-room {
    position: relative;
    padding: 30px 28px 28px;
    overflow: hidden;
}

.xnkbu-sp-room::after {
    content: '';
    position: absolute;
    right: -40px;
    bottom: -40px;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: #F4F6FA;
}

.xnkbu-sp-room-no,
.xnkbu-sp-room-name,
.xnkbu-sp-room-en {
    position: relative;
    z-index: 1;
}

.xnkbu-sp-room-name {
    font-size: 20px;
}

/* --- 갤러리: 사진이 주인공 --- */
.xnkbu-sp-gallery-thumb {
    transition: transform .5s var(--xnkbu-ease);
}

.xnkbu-sp-wrapper .xnkbu-sp-gallery-link {
    position: relative;
    overflow: hidden;
}

.xnkbu-sp-wrapper .xnkbu-sp-gallery-link:hover .xnkbu-sp-gallery-thumb,
.xnkbu-sp-wrapper .xnkbu-sp-gallery-link:focus-visible .xnkbu-sp-gallery-thumb {
    transform: scale(1.04);
}

.xnkbu-sp-wrapper .xnkbu-sp-gallery-link:hover,
.xnkbu-sp-wrapper .xnkbu-sp-gallery-link:focus-visible {
    box-shadow: 0 14px 36px rgba(4, 32, 63, .12);
}

.xnkbu-sp-gallery-cap {
    padding: 22px 24px 24px;
}

/* --- 배지 등급: 상단 바를 조금 더 또렷하게 + 등급 타이포 --- */
.xnkbu-sp-badge {
    border-top-width: 5px;
    padding: 30px 26px 28px;
}

.xnkbu-sp-badge-tier {
    font-size: 21px;
}

.xnkbu-sp-badge-ko {
    margin-bottom: 20px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--xnkbu-line-2);
}

/* --- 표 --- */
.xnkbu-sp-table-wrap {
    border-color: var(--xnkbu-line-3);
}

.xnkbu-sp-table caption {
    padding: 22px 22px 2px;
    font-size: 13.5px;
    color: var(--xnkbu-mute);
}

/* --- 인용 --- */
.xnkbu-sp-quote {
    padding-left: 28px;
    font-size: 26px;
}

/* --- 안내 박스 --- */
.xnkbu-sp-note {
    border-color: var(--xnkbu-line-3);
    border-left-width: 4px;
    background: var(--xnkbu-surface-3);
}

/* --- 마감 배너 --- */
.xnkbu-sp-banner {
    position: relative;
    padding: 72px 48px;
    overflow: hidden;
}

.xnkbu-sp-banner::after {
    content: '';
    position: absolute;
    top: -30%;
    right: 12%;
    width: 3px;
    height: 160%;
    transform: rotate(22deg);
    background: var(--xnkbu-pink);
    opacity: .5;
}

.xnkbu-sp-banner-label,
.xnkbu-sp-banner-text {
    position: relative;
    z-index: 1;
}

.xnkbu-sp-banner-text {
    font-size: 34px;
}

/* --- 이미지 캡션 --- */
.xnkbu-sp-figure figcaption {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--xnkbu-line);
}

@media (max-width: 1199px) {
    .xnkbu-sp-hero-title {
        font-size: 42px;
    }

    .xnkbu-sp-stat-value {
        font-size: 34px;
    }
}

@media (max-width: 900px) {
    .xnkbu-sp-hero {
        grid-template-columns: 1fr;
        row-gap: 16px;
    }

    .xnkbu-sp-hero-lead {
        grid-column: 1;
        grid-row: auto;
        padding-bottom: 0;
    }
}

@media (max-width: 767px) {
    .xnkbu-sp-hero {
        margin-bottom: 48px;
        padding-bottom: 24px;
    }

    .xnkbu-sp-hero::after {
        width: 64px;
    }

    .xnkbu-sp-hero-title {
        font-size: 32px;
    }

    .xnkbu-sp-section {
        margin-bottom: 56px;
    }

    .xnkbu-sp-heading {
        padding-top: 20px;
        font-size: 24px;
    }

    .xnkbu-sp-lead {
        margin-bottom: 26px;
    }

    .xnkbu-sp-quote {
        padding-left: 18px;
        font-size: 20px;
    }

    .xnkbu-sp-stat {
        padding: 24px 20px;
    }

    .xnkbu-sp-stat-value {
        font-size: 30px;
    }

    .xnkbu-sp-banner {
        padding: 44px 22px;
    }

    .xnkbu-sp-banner-text {
        font-size: 22px;
    }

    .xnkbu-sp-room::after {
        display: none;
    }
}

/* --- 오시는 길: 지도 카드 전체를 카카오맵 링크로 --- */
/* 카드가 <a> 이므로 안쪽 label/addr/btn 은 <span>. p 였을 때의 블록 배치를 되살린다. */
.xnkbu-sp-wrapper a.xnkbu-sp-map,
.xnkbu-sp-wrapper a.xnkbu-sp-map:hover,
.xnkbu-sp-wrapper a.xnkbu-sp-map:focus-visible {
    color: #fff;
}

.xnkbu-sp-map-label,
.xnkbu-sp-map-addr {
    display: block;
}

.xnkbu-sp-map .xnkbu-sp-map-btn {
    /* 링크가 아니라 카드 안의 시각 요소 */
    cursor: inherit;
}

.xnkbu-sp-wrapper a.xnkbu-sp-map .xnkbu-sp-map-img {
    transition: transform .5s var(--xnkbu-ease);
}

.xnkbu-sp-wrapper a.xnkbu-sp-map:hover .xnkbu-sp-map-img,
.xnkbu-sp-wrapper a.xnkbu-sp-map:focus-visible .xnkbu-sp-map-img {
    transform: scale(1.03);
}

.xnkbu-sp-wrapper a.xnkbu-sp-map:hover .xnkbu-sp-map-btn,
.xnkbu-sp-wrapper a.xnkbu-sp-map:focus-visible .xnkbu-sp-map-btn {
    background: var(--xnkbu-pink);
    color: #fff;
}

.xnkbu-sp-wrapper a.xnkbu-sp-map:focus-visible {
    outline: 3px solid var(--xnkbu-pink);
    outline-offset: 3px;
}

/* ===== 8.5 서브페이지 — 아이콘 · 사진 활용 (2026-09-09) ===================== */
/* 아이콘은 24px 격자 stroke SVG 만 쓴다(외부 아이콘 폰트·이미지 없음). */

/* --- 공통 아이콘 배지 --- */
.xnkbu-sp-card-icon,
.xnkbu-sp-room-icon,
.xnkbu-sp-badge-icon {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    margin-bottom: 20px;
    border-radius: 16px;
    background: #EDF2F8;
    color: var(--xnkbu-navy);
}

.xnkbu-sp-card-icon svg,
.xnkbu-sp-room-icon svg,
.xnkbu-sp-badge-icon svg {
    display: block;
    width: 26px;
    height: 26px;
}

/* 카드 hover 시 아이콘도 반응 */
.xnkbu-sp-card:hover .xnkbu-sp-card-icon,
.xnkbu-sp-room:hover .xnkbu-sp-room-icon {
    background: var(--xnkbu-navy);
    color: #fff;
}

/* 카드 안에서 아이콘이 먼저 오면 번호 라벨은 아이콘 아래로 */
.xnkbu-sp-card-icon + .xnkbu-sp-card-no,
.xnkbu-sp-room-icon + .xnkbu-sp-room-no {
    margin-bottom: 8px;
}

/* --- 배지 등급별 아이콘 색 --- */
.xnkbu-sp-badge--1 .xnkbu-sp-badge-icon {
    background: #F0F2F5;
    color: #7B8A9C;
}

.xnkbu-sp-badge--2 .xnkbu-sp-badge-icon {
    background: #E7ECF2;
    color: #4C6178;
}

.xnkbu-sp-badge--3 .xnkbu-sp-badge-icon {
    background: #E3EAF3;
    color: var(--xnkbu-navy);
}

.xnkbu-sp-badge--4 .xnkbu-sp-badge-icon {
    background: #FCE6F1;
    color: var(--xnkbu-pink);
}

.xnkbu-sp-badge-icon {
    width: 48px;
    height: 48px;
    margin-bottom: 16px;
    border-radius: 999px;
}

.xnkbu-sp-badge-icon svg {
    width: 23px;
    height: 23px;
}

/* --- 정의형 목록 아이콘 --- */
.xnkbu-sp-info-term {
    display: flex;
    align-items: center;
    gap: 9px;
}

.xnkbu-sp-info-icon {
    display: inline-flex;
    flex: none;
    color: var(--xnkbu-pink);
}

.xnkbu-sp-info-icon svg {
    display: block;
    width: 17px;
    height: 17px;
}

/* --- 사진 밴드 (준비중 페이지 등) --- */
.xnkbu-sp-photo-band {
    position: relative;
    margin: 0;
    border-radius: 24px;
    overflow: hidden;
}

.xnkbu-sp-photo-band img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 6;
    object-fit: cover;
    background: var(--xnkbu-surface-3);
}

.xnkbu-sp-photo-band figcaption {
    position: absolute;
    left: 32px;
    bottom: 28px;
    z-index: 1;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -.015em;
    color: #fff;
}

.xnkbu-sp-photo-band::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(4, 32, 63, 0) 45%, rgba(4, 32, 63, .8));
}

/* --- 마감 배너에 사진 깔기 --- */
.xnkbu-sp-banner-img {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ★ 스크림은 사진보다 위여야 한다. ::before 는 DOM 순서상 img 아래에 깔리므로
   z-index 를 명시하지 않으면 글자가 사진에 묻힌다. */
.xnkbu-sp-banner:has(.xnkbu-sp-banner-img)::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(160deg, rgba(4, 32, 63, .94), rgba(7, 43, 82, .88));
}

.xnkbu-sp-banner:has(.xnkbu-sp-banner-img)::after {
    z-index: 2;
}

.xnkbu-sp-banner:has(.xnkbu-sp-banner-img) .xnkbu-sp-banner-label,
.xnkbu-sp-banner:has(.xnkbu-sp-banner-img) .xnkbu-sp-banner-text {
    z-index: 3;
}

@media (max-width: 767px) {
    .xnkbu-sp-card-icon,
    .xnkbu-sp-room-icon {
        width: 46px;
        height: 46px;
        margin-bottom: 14px;
        border-radius: 13px;
    }

    .xnkbu-sp-card-icon svg,
    .xnkbu-sp-room-icon svg {
        width: 22px;
        height: 22px;
    }

    .xnkbu-sp-photo-band {
        border-radius: 18px;
    }

    .xnkbu-sp-photo-band img {
        aspect-ratio: 4 / 3;
    }

    .xnkbu-sp-photo-band figcaption {
        left: 20px;
        bottom: 18px;
        font-size: 14px;
    }
}

/* ===== 8.6 교육 체계 — 표 대신 레벨 카드 (2026-09-09) ======================= */
/* 6열 표는 가로 스크롤이 생기고 눈이 아프다. 레벨 3장을 세로로 쌓고
   각 카드 안에서 대상 4그룹을 서브 그리드로 펼친다. LEVEL 1 은 4그룹이 같아 한 칸이다. */
.xnkbu-sp-levels {
    display: grid;
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.xnkbu-sp-level {
    display: grid;
    grid-template-columns: 236px minmax(0, 1fr);
    border: 1px solid var(--xnkbu-line);
    border-radius: 20px;
    background: var(--xnkbu-surface);
    overflow: hidden;
    transition: border-color .2s var(--xnkbu-ease), box-shadow .2s var(--xnkbu-ease);
}

.xnkbu-sp-level:hover {
    border-color: var(--xnkbu-line-3);
    box-shadow: 0 10px 30px rgba(4, 32, 63, .07);
}

/* --- 좌측 레벨 표지 --- */
.xnkbu-sp-level-head {
    display: flex;
    flex-direction: column;
    padding: 30px 26px;
    background: #EDF2F8;
    border-right: 1px solid #DFE7F0;
}

.xnkbu-sp-level-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin-bottom: 18px;
    border-radius: 14px;
    background: var(--xnkbu-navy);
    color: #fff;
}

.xnkbu-sp-level-icon svg {
    display: block;
    width: 24px;
    height: 24px;
}

.xnkbu-sp-level-no {
    display: block;
    margin-bottom: 6px;
    font-family: var(--xnkbu-font-en);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .18em;
    color: var(--xnkbu-pink);
}

.xnkbu-sp-level-name {
    margin: 0 0 auto;
    font-family: var(--xnkbu-font-en);
    font-size: 21px;
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.25;
    color: var(--xnkbu-navy);
}

.xnkbu-sp-level-badge {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    margin-top: 22px;
    padding: 8px 14px;
    border-radius: 999px;
    background: var(--xnkbu-surface);
    font-family: var(--xnkbu-font-en);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--xnkbu-navy);
}

/* --- 우측 본문 --- */
.xnkbu-sp-level-body {
    padding: 30px 30px 28px;
}

.xnkbu-sp-level-goal {
    margin: 0 0 24px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--xnkbu-line-2);
    font-size: 16.5px;
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.5;
    color: var(--xnkbu-ink);
}

.xnkbu-sp-level-goal span {
    display: inline-block;
    margin-left: 10px;
    font-family: var(--xnkbu-font-en);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .14em;
    color: var(--xnkbu-pink);
    white-space: nowrap;
}

.xnkbu-sp-level-targets {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.xnkbu-sp-level-targets--one {
    grid-template-columns: minmax(0, 1fr);
}

.xnkbu-sp-target-name {
    margin: 0 0 10px;
    padding-bottom: 9px;
    border-bottom: 1px solid var(--xnkbu-line-2);
    font-size: 14.5px;
    font-weight: 700;
    letter-spacing: -.015em;
    color: var(--xnkbu-navy);
}

.xnkbu-sp-target-list {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 14.5px;
    line-height: 1.6;
    color: #4A4A52;
}

.xnkbu-sp-target-list li {
    position: relative;
    margin-bottom: 7px;
    padding-left: 13px;
}

.xnkbu-sp-target-list li:last-child {
    margin-bottom: 0;
}

.xnkbu-sp-target-list li::before {
    content: '';
    position: absolute;
    top: 9px;
    left: 0;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--xnkbu-pink);
}

/* LEVEL 1 공통 칸은 3항목을 가로로 펼친다 */
.xnkbu-sp-level-targets--one .xnkbu-sp-target-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 32px;
}

.xnkbu-sp-level-targets--one .xnkbu-sp-target-list li {
    margin-bottom: 0;
}

@media (max-width: 1199px) {
    .xnkbu-sp-level {
        grid-template-columns: 200px minmax(0, 1fr);
    }

    .xnkbu-sp-level-targets {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px;
    }
}

@media (max-width: 767px) {
    .xnkbu-sp-level {
        grid-template-columns: 1fr;
        border-radius: 16px;
    }

    .xnkbu-sp-level-head {
        flex-direction: row;
        align-items: center;
        flex-wrap: wrap;
        gap: 12px;
        padding: 20px;
        border-right: 0;
        border-bottom: 1px solid #DFE7F0;
    }

    .xnkbu-sp-level-icon {
        width: 42px;
        height: 42px;
        margin-bottom: 0;
        border-radius: 12px;
    }

    .xnkbu-sp-level-icon svg {
        width: 21px;
        height: 21px;
    }

    .xnkbu-sp-level-no {
        margin-bottom: 2px;
    }

    .xnkbu-sp-level-name {
        margin: 0;
        font-size: 18px;
    }

    .xnkbu-sp-level-badge {
        margin-top: 0;
        margin-left: auto;
    }

    .xnkbu-sp-level-body {
        padding: 22px 20px;
    }

    .xnkbu-sp-level-goal {
        margin-bottom: 20px;
        font-size: 15.5px;
    }

    .xnkbu-sp-level-goal span {
        display: block;
        margin: 6px 0 0;
    }

    .xnkbu-sp-level-targets {
        grid-template-columns: 1fr;
        gap: 18px;
    }
}

/* ===== 8.7 기존 페이지 톤 통일 (이용 방법 · 문의하기 · 준비중) ============== */
/* 8.5 에서 새 페이지 아이콘을 라운드 사각 + 연네이비로 잡았다.
   먼저 만든 스텝·담당부서 아이콘이 원형 + 베이지라 페이지끼리 톤이 어긋난다. */
.xnkbu-sp-step-icon,
.xnkbu-sp-dept-icon {
    width: 54px;
    height: 54px;
    border-radius: 16px;
    background: #EDF2F8;
    color: var(--xnkbu-navy);
}

.xnkbu-sp-step-icon svg,
.xnkbu-sp-dept-icon svg {
    width: 26px;
    height: 26px;
}

.xnkbu-sp-step:hover .xnkbu-sp-step-icon,
.xnkbu-sp-dept:hover .xnkbu-sp-dept-icon {
    background: var(--xnkbu-navy);
    color: #fff;
}

/* 활성 탭·운영시간 라벨·버튼 hover 를 먹색에서 네이비로 통일 */
#xnkbu-sp-tab1:checked ~ .xnkbu-sp-tablist label[for="xnkbu-sp-tab1"],
#xnkbu-sp-tab2:checked ~ .xnkbu-sp-tablist label[for="xnkbu-sp-tab2"],
#xnkbu-sp-tab3:checked ~ .xnkbu-sp-tablist label[for="xnkbu-sp-tab3"] {
    border-color: var(--xnkbu-navy);
    background: var(--xnkbu-navy);
}

.xnkbu-sp-tablist label:hover {
    border-color: var(--xnkbu-navy);
    color: var(--xnkbu-navy);
}

.xnkbu-sp-hours-label {
    background: var(--xnkbu-navy);
}

.xnkbu-sp-tel:hover,
.xnkbu-sp-tel:focus-visible,
.xnkbu-sp-btn:hover,
.xnkbu-sp-btn:focus-visible {
    border-color: var(--xnkbu-navy);
    background: var(--xnkbu-navy);
}

.xnkbu-sp-btn-primary:hover,
.xnkbu-sp-btn-primary:focus-visible {
    border-color: var(--xnkbu-navy);
    background: var(--xnkbu-navy);
}

.xnkbu-sp-panel {
    border-color: var(--xnkbu-line-3);
}

.xnkbu-sp-ready {
    border-color: var(--xnkbu-line-3);
}

.xnkbu-sp-ready-icon {
    border-radius: 20px;
    background: #EDF2F8;
    border-color: #DFE7F0;
    color: var(--xnkbu-navy);
}

/* ===== 8.8 피드백 반영 (2026-09-09) ======================================== */
/* 섹션 번호(01·02) 제거 — 헤어라인만 남긴다 */
.xnkbu-sp-heading::before {
    display: none;
}

/* 페이지 타이틀 밑줄: 먹색이 너무 강했다. 옅은 라인으로. 마젠타 세그먼트는 유지 */
.xnkbu-sp-hero {
    border-bottom-color: var(--xnkbu-line-3);
}

/* 안내 박스 배경 흰색 */
.xnkbu-sp-note {
    background: var(--xnkbu-surface);
}

/* 배지 카드 hover — 8.4 의 공통 border-color 가 상단 등급 컬러 바까지 회색으로 덮었다.
   hover 상태에서도 등급색을 다시 명시해 유지한다. */
.xnkbu-sp-badge--1:hover {
    border-top-color: #C2CBD8;
}

.xnkbu-sp-badge--2:hover {
    border-top-color: #6F8199;
}

.xnkbu-sp-badge--3:hover {
    border-top-color: var(--xnkbu-navy);
}

.xnkbu-sp-badge--4:hover {
    border-top-color: var(--xnkbu-pink);
}

/* 읽기 폭 제한을 푸는 본문 (총장 인사말) */
.xnkbu-sp-prose--full {
    max-width: none;
}

/* 서명도 읽기 폭 제한 해제 (총장 인사말) — 본문만 풀면 서명이 안쪽으로 밀려 어긋난다 */
.xnkbu-sp-sign--full {
    max-width: none;
}

/* 첫 섹션 제목의 상단 헤어라인 제거 — 히어로 밑줄과 겹쳐 이중선으로 보인다 */
.xnkbu-sp-section:first-of-type .xnkbu-sp-heading {
    padding-top: 0;
    border-top: 0;
}

/* ===== 8.9 총장 인사말 — 인용 밴드 + 서명 카드 (2026-09-09) ================= */
/* 벤치마킹(아주대·고려대): 인사말은 상단에 "사진 + 핵심 인용" 덩어리를 두고
   본문을 그 아래로 흘린다. 경복대는 총장 인물 사진이 없어 캠퍼스 전경을 배경으로 쓰고
   인용문과 서명을 얹었다. 인물 사진이 준비되면 배경 이미지만 교체하면 된다. */
.xnkbu-sp-msgband {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 380px;
    margin: 0 0 56px;
    padding: 48px 52px;
    border-radius: 24px;
    overflow: hidden;
    background: var(--xnkbu-navy);
}

.xnkbu-sp-msgband-img {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.xnkbu-sp-msgband::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(90deg, rgba(4, 32, 63, .94) 0%, rgba(4, 32, 63, .84) 34%,
                                rgba(4, 32, 63, .5) 62%, rgba(4, 32, 63, .28) 100%);
}

/* 우측 마젠타 대각 스트로크 — 하우스 시그니처 */
.xnkbu-sp-msgband::after {
    content: '';
    position: absolute;
    top: -25%;
    right: 16%;
    z-index: 2;
    width: 3px;
    height: 160%;
    transform: rotate(22deg);
    background: var(--xnkbu-pink);
    opacity: .5;
}

.xnkbu-sp-msgband-label,
.xnkbu-sp-msgband-quote,
.xnkbu-sp-msgband-by {
    position: relative;
    z-index: 3;
}

.xnkbu-sp-msgband-label {
    margin: 0 0 18px;
    font-family: var(--xnkbu-font-en);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .18em;
    color: rgba(255, 255, 255, .58);
}

.xnkbu-sp-msgband-quote {
    max-width: 720px;
    margin: 0;
    font-size: 34px;
    font-weight: 800;
    line-height: 1.4;
    letter-spacing: -.035em;
    color: #fff;
}

.xnkbu-sp-msgband-by {
    margin: 26px 0 0;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, .22);
    font-size: 15px;
    font-weight: 600;
    color: rgba(255, 255, 255, .82);
}

.xnkbu-sp-msgband-by strong {
    display: block;
    margin-bottom: 3px;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -.02em;
    color: #fff;
}

/* --- 서명 카드 (사진 + 날짜 + 이름) --- */
.xnkbu-sp-signcard {
    display: flex;
    align-items: center;
    gap: 20px;
    max-width: none;
    margin-top: 48px;
    padding-top: 32px;
    border-top: 1px solid var(--xnkbu-line);
}

.xnkbu-sp-signcard-photo {
    flex: none;
    width: 108px;
    height: 108px;
    border-radius: 18px;
    object-fit: cover;
    background: var(--xnkbu-surface-3);
}

.xnkbu-sp-signcard-text {
    margin: 0;
}

.xnkbu-sp-signcard-date {
    display: block;
    margin-bottom: 7px;
    font-family: var(--xnkbu-font-en);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .1em;
    color: var(--xnkbu-mute);
}

.xnkbu-sp-signcard-name {
    display: block;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -.025em;
    color: var(--xnkbu-ink);
}

@media (max-width: 1199px) {
    .xnkbu-sp-msgband-quote {
        font-size: 28px;
    }
}

@media (max-width: 767px) {
    .xnkbu-sp-msgband {
        min-height: 0;
        margin-bottom: 36px;
        padding: 32px 22px;
        border-radius: 18px;
    }

    .xnkbu-sp-msgband::before {
        background: linear-gradient(180deg, rgba(4, 32, 63, .78) 0%, rgba(4, 32, 63, .95) 60%);
    }

    .xnkbu-sp-msgband::after {
        right: 8%;
    }

    .xnkbu-sp-msgband-quote {
        font-size: 21px;
    }

    .xnkbu-sp-msgband-by {
        margin-top: 20px;
        padding-top: 16px;
    }

    .xnkbu-sp-signcard {
        gap: 16px;
        margin-top: 36px;
        padding-top: 24px;
    }

    .xnkbu-sp-signcard-photo {
        width: 76px;
        height: 76px;
        border-radius: 14px;
    }

    .xnkbu-sp-signcard-name {
        font-size: 17px;
    }
}

/* 서명은 사진 없이 우측 정렬 텍스트만 둔다(상단 밴드로 시각 요소는 충분) */
.xnkbu-sp-signcard {
    display: block;
    text-align: right;
}

/* 밴드 대각 스트로크가 배경 건물과 겹쳐 산만해지지 않게 옅게 */
.xnkbu-sp-msgband::after {
    right: 9%;
    opacity: .32;
}

/* ===== 8.10 Depth 1 랜딩 — 하위 메뉴 카드 (2026-09-09) ===================== */
/* AID캠퍼스 / 교육 및 자격증 처럼 하위 페이지를 여는 상위 메뉴용 인덱스 페이지.
   카드 문구는 모두 하위 페이지 원문에서 가져온 한 줄이다(새로 쓴 문구 없음). */
.xnkbu-sp-menu {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.xnkbu-sp-menu--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.xnkbu-sp-wrapper a.xnkbu-sp-menu-item {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 32px 30px 28px;
    border: 1px solid var(--xnkbu-line);
    border-radius: 20px;
    background: var(--xnkbu-surface);
    transition: border-color .2s var(--xnkbu-ease), box-shadow .2s var(--xnkbu-ease),
                transform .2s var(--xnkbu-ease);
}

.xnkbu-sp-wrapper a.xnkbu-sp-menu-item:hover,
.xnkbu-sp-wrapper a.xnkbu-sp-menu-item:focus-visible {
    border-color: var(--xnkbu-line-3);
    box-shadow: 0 10px 30px rgba(4, 32, 63, .07);
    transform: translateY(-2px);
}

.xnkbu-sp-menu-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    margin-bottom: 22px;
    border-radius: 16px;
    background: #EDF2F8;
    color: var(--xnkbu-navy);
    transition: background-color .2s var(--xnkbu-ease), color .2s var(--xnkbu-ease);
}

.xnkbu-sp-menu-icon svg {
    display: block;
    width: 26px;
    height: 26px;
}

.xnkbu-sp-wrapper a.xnkbu-sp-menu-item:hover .xnkbu-sp-menu-icon,
.xnkbu-sp-wrapper a.xnkbu-sp-menu-item:focus-visible .xnkbu-sp-menu-icon {
    background: var(--xnkbu-navy);
    color: #fff;
}

.xnkbu-sp-menu-name {
    margin: 0 0 10px;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -.025em;
    color: var(--xnkbu-ink);
}

.xnkbu-sp-menu-desc {
    margin: 0 0 auto;
    font-size: 15px;
    line-height: 1.65;
    color: var(--xnkbu-body);
}

.xnkbu-sp-menu-go {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 26px;
    padding-top: 18px;
    border-top: 1px solid var(--xnkbu-line-2);
    font-family: var(--xnkbu-font-en);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .18em;
    color: var(--xnkbu-pink);
}

.xnkbu-sp-menu-go::after {
    content: '';
    width: 13px;
    height: 13px;
    background: var(--xnkbu-chevron) center / 13px 13px no-repeat;
    transition: transform .2s var(--xnkbu-ease);
}

.xnkbu-sp-wrapper a.xnkbu-sp-menu-item:hover .xnkbu-sp-menu-go::after,
.xnkbu-sp-wrapper a.xnkbu-sp-menu-item:focus-visible .xnkbu-sp-menu-go::after {
    transform: translateX(4px);
}

@media (max-width: 1199px) {
    .xnkbu-sp-menu {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .xnkbu-sp-menu,
    .xnkbu-sp-menu--2 {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .xnkbu-sp-wrapper a.xnkbu-sp-menu-item {
        padding: 24px 22px 22px;
    }

    .xnkbu-sp-menu-icon {
        width: 46px;
        height: 46px;
        margin-bottom: 16px;
        border-radius: 13px;
    }

    .xnkbu-sp-menu-icon svg {
        width: 22px;
        height: 22px;
    }

    .xnkbu-sp-menu-name {
        font-size: 18px;
    }

    .xnkbu-sp-menu-go {
        margin-top: 20px;
        padding-top: 14px;
    }
}
.xnkbu-sp-wrapper a.xnkbu-sp-mail {
    font-size: 15.5px;
    font-weight: 600;
    color: var(--xnkbu-ink);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-decoration-color: var(--xnkbu-line-3);
    text-underline-offset: 4px;
    transition: color .18s var(--xnkbu-ease), text-decoration-color .18s var(--xnkbu-ease);
}

.xnkbu-sp-wrapper a.xnkbu-sp-mail:hover,
.xnkbu-sp-wrapper a.xnkbu-sp-mail:focus-visible {
    color: var(--xnkbu-pink);
    text-decoration-color: var(--xnkbu-pink);
}

.xnkbu-sp-wrapper a.xnkbu-sp-mail:focus-visible {
    outline: 2px solid var(--xnkbu-pink);
    outline-offset: 3px;
    border-radius: 2px;
}