@charset "utf-8";
/* ==========================================================
   nav.css
   ========================================================== */

.gnb, .gnb *, #hd_pop, .hd_pops, .hd_pops * { box-sizing: border-box; }

:root { --etrl-gut: clamp(28px, 8.3vw, 160px); }
@media (max-width: 700px) {
    :root { --etrl-gut: 20px; }
}

.black-ops-one-regular {
    font-family: "black ops one", system-ui;
    font-weight: 400;
    font-style: normal;
}

.chakra-petch-light {
    font-family: "chakra petch", sans-serif;
    font-weight: 300;
    font-style: normal;
}

.chakra-petch-regular {
    font-family: "chakra petch", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.chakra-petch-medium {
    font-family: "chakra petch", sans-serif;
    font-weight: 500;
    font-style: normal;
}

.chakra-petch-semibold {
    font-family: "chakra petch", sans-serif;
    font-weight: 600;
    font-style: normal;
}

.chakra-petch-bold {
    font-family: "chakra petch", sans-serif;
    font-weight: 700;
    font-style: normal;
}

.chakra-petch-light-italic {
    font-family: "chakra petch", sans-serif;
    font-weight: 300;
    font-style: italic;
}

.chakra-petch-regular-italic {
    font-family: "chakra petch", sans-serif;
    font-weight: 400;
    font-style: italic;
}

.chakra-petch-medium-italic {
    font-family: "chakra petch", sans-serif;
    font-weight: 500;
    font-style: italic;
}

.chakra-petch-semibold-italic {
    font-family: "chakra petch", sans-serif;
    font-weight: 600;
    font-style: italic;
}

.chakra-petch-bold-italic {
    font-family: "chakra petch", sans-serif;
    font-weight: 700;
    font-style: italic;
}

@font-face {
    font-family: 'Pretendard';
    font-weight: 100;
    font-style: normal;
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-1Thin.woff') format('woff');
    font-display: swap;
}
@font-face {
    font-family: 'Pretendard';
    font-weight: 200;
    font-style: normal;
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-2ExtraLight.woff') format('woff');
    font-display: swap;
}
@font-face {
    font-family: 'Pretendard';
    font-weight: 300;
    font-style: normal;
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-3Light.woff') format('woff');
    font-display: swap;
}
@font-face {
    font-family: 'Pretendard';
    font-weight: 400;
    font-style: normal;
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-4Regular.woff') format('woff');
    font-display: swap;
}
@font-face {
    font-family: 'Pretendard';
    font-weight: 500;
    font-style: normal;
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-5Medium.woff') format('woff');
    font-display: swap;
}
@font-face {
    font-family: 'Pretendard';
    font-weight: 600;
    font-style: normal;
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-6Bold.woff') format('woff');
    font-display: swap;
}
@font-face {
    font-family: 'Pretendard';
    font-weight: 700;
    font-style: normal;
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-7ExtraBold.woff') format('woff');
    font-display: swap;
}
@font-face {
    font-family: 'Pretendard';
    font-weight: 800;
    font-style: normal;
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-8Heavy.woff') format('woff');
    font-display: swap;
}
@font-face {
    font-family: 'Pretendard';
    font-weight: 900;
    font-style: normal;
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-9Black.woff') format('woff');
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Thin.woff') format('woff');
    font-weight: 100;
    font-style: normal;
}
@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
}
@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
}
@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-SemiBold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
}
@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
}
@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-ExtraBold.woff') format('woff');
    font-weight: 800;
    font-style: normal;
}

@font-face {
	font-family: 'Paperozi';
	src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-1Thin.woff2') format('woff2');
	font-weight: 100;
	font-display: swap;
}

@font-face {
	font-family: 'Paperozi';
	src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-2ExtraLight.woff2') format('woff2');
	font-weight: 200;
	font-display: swap;
}

@font-face {
	font-family: 'Paperozi';
	src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-3Light.woff2') format('woff2');
	font-weight: 300;
	font-display: swap;
}

@font-face {
	font-family: 'Paperozi';
	src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-4Regular.woff2') format('woff2');
	font-weight: 400;
	font-display: swap;
}

@font-face {
    font-family: 'Paperozi';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-5Medium.woff2') format('woff2');
    font-weight: 500;
    font-display: swap;
}

@font-face {
	font-family: 'Paperozi';
	src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-6SemiBold.woff2') format('woff2');
	font-weight: 600;
	font-display: swap;
}

@font-face {
	font-family: 'Paperozi';
	src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-7Bold.woff2') format('woff2');
	font-weight: 700;
	font-display: swap;
}

@font-face {
	font-family: 'Paperozi';
	src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-8ExtraBold.woff2') format('woff2');
	font-weight: 800;
	font-display: swap;
}

@font-face {
	font-family: 'Paperozi';
	src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-9Black.woff2') format('woff2');
	font-weight: 900;
	font-display: swap;
}

@font-face {
    font-family: 'Suit';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-Thin.woff2') format('woff2');
    font-weight: 100;
    font-display: swap;
}

@font-face {
    font-family: 'Suit';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-ExtraLight.woff2') format('woff2');
    font-weight: 200;
    font-display: swap;
}

@font-face {
    font-family: 'Suit';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-Light.woff2') format('woff2');
    font-weight: 300;
    font-display: swap;
}

@font-face {
    font-family: 'Suit';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-Regular.woff2') format('woff2');
    font-weight: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Suit';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-Medium.woff2') format('woff2');
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: 'Suit';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-display: swap;
}

@font-face {
    font-family: 'Suit';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-Bold.woff2') format('woff2');
    font-weight: 700;
    font-display: swap;
}

@font-face {
    font-family: 'Suit';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-ExtraBold.woff2') format('woff2');
    font-weight: 800;
    font-display: swap;
}

@font-face {
    font-family: 'Suit';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-Heavy.woff2') format('woff2');
    font-weight: 900;
    font-display: swap;
}

@font-face {
	font-family: 'Isamanru';
	src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-10@1.0/GongGothicLight.woff') format('woff');
	font-weight: 300;
	font-display: swap;
}

@font-face {
	font-family: 'Isamanru';
	src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-10@1.0/GongGothicMedium.woff') format('woff');
	font-weight: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Isamanru';
	src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-10@1.0/GongGothicBold.woff') format('woff');
	font-weight: 700;
	font-display: swap;
}

/* esamanru(이사만루체) */
@font-face {
	font-family: 'esamanru';
	src: url('https://cdn.jsdelivr.net/gh/fonts-archive/esamanru/esamanru-Light.woff2') format('woff2'),
	     url('https://cdn.jsdelivr.net/gh/fonts-archive/esamanru/esamanru-Light.woff') format('woff');
	font-weight: 300;
	font-display: swap;
}
@font-face {
	font-family: 'esamanru';
	src: url('https://cdn.jsdelivr.net/gh/fonts-archive/esamanru/esamanru-Medium.woff2') format('woff2'),
	     url('https://cdn.jsdelivr.net/gh/fonts-archive/esamanru/esamanru-Medium.woff') format('woff');
	font-weight: 500;
	font-display: swap;
}
@font-face {
	font-family: 'esamanru';
	src: url('https://cdn.jsdelivr.net/gh/fonts-archive/esamanru/esamanru-Bold.woff2') format('woff2'),
	     url('https://cdn.jsdelivr.net/gh/fonts-archive/esamanru/esamanru-Bold.woff') format('woff');
	font-weight: 700;
	font-display: swap;
}

/* ===== index2 GNB ===== */
.gnb {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 100;
    height: 74px;
    background: transparent;
    transition:
        transform 0.55s cubic-bezier(0.16, 1, 0.3, 1),
        background-color 0.3s ease,
        box-shadow 0.3s ease;
    will-change: transform;
}
.gnb-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    width: 100%;
    height: 100%;
    padding: 0 var(--etrl-gut);
    animation: gnbDrop 0.95s cubic-bezier(0.16, 1, 0.3, 1) 0.3s both;
}
@keyframes gnbDrop {
    from { transform: translateY(-100%); }
    to   { transform: translateY(0); }
}

.gnb-logo { display: flex; align-items: center; flex: none; }
.gnb-logo img {
    height: 60px;
    width: auto;
    display: block;
    filter: url(#logo-white-only);
    transition: none;
}

/* 메뉴 */
.gnb-menu {
    display: flex;
    align-items: center;
    gap: clamp(26px, 3.4vw, 62px);
}
.gnb-menu .gnb-1d {
    position: relative;
    padding: 6px 0;
    font-family: 'Pretendard', sans-serif;
    font-size: 20px;
    font-weight: 500;
    color: #FFFFFF;
    text-decoration: none;
    white-space: nowrap;
    transition: none;
}
.gnb-menu .gnb-1d span {
    display: block;
    overflow: hidden;
    height: 1.35em;
}
.gnb-menu .gnb-1d i {
    display: block;
    height: 1.35em;
    font-style: normal;
    line-height: 1.35;
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.gnb-menu .gnb-item:hover .gnb-1d i { transform: translateY(-100%); }
.gnb-menu .gnb-1d i:nth-child(2) { color: #6AA3F4; }
.gnb.is-solid .gnb-menu .gnb-1d i:nth-child(2) { color: #2C6FD1; }

/* --- 아래로 스크롤 --- */
.gnb.is-hidden { transform: translateY(-100%); }

/* --- 위로 스크롤 --- */
.gnb.is-solid {
    background: #FFFFFF;
    box-shadow: 0 1px 0 rgba(11, 15, 20, 0.10), 0 10px 30px rgba(0, 0, 0, 0.14);
}
.gnb.is-solid .gnb-logo img { filter: url(#logo-black-only); }
.gnb.is-solid .gnb-menu .gnb-1d { color: #0B0F14; }

@media (max-width: 900px) {
    .gnb { height: 62px; }
    .gnb-logo img { height: 34px; }
    .gnb-menu { gap: 18px; }
    .gnb-menu .gnb-1d { font-size: 16px; }
}

/* ==========================================================
   그누보드 이식 보정
   ========================================================== */

.msg_sound_only,
.sound_only { display: inline-block !important; position: absolute; top: 0; left: 0; width: 0; height: 0; margin: 0 !important; padding: 0 !important; font-size: 0; line-height: 0; border: 0 !important; overflow: hidden !important; }

#hd_h1,
#skip_to_container { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
#hd_login_msg { display: none; }

#hd_pop { z-index: 1000; position: relative; margin: 0 auto; height: 0; }
#hd_pop h2 { position: absolute; font-size: 0; line-height: 0; overflow: hidden; }
.hd_pops { position: absolute; border: 1px solid #e9e9e9; background: #fff; }
.hd_pops img { max-width: 100%; }
.hd_pops_footer { padding: 0; background: #000; color: #fff; text-align: left; position: relative; }
.hd_pops_footer:after { display: block; visibility: hidden; clear: both; content: ""; }
.hd_pops_footer button { padding: 10px; border: 0; color: #fff; }
.hd_pops_footer .hd_pops_reject { background: #000; text-align: left; }
.hd_pops_footer .hd_pops_close { background: #393939; position: absolute; top: 0; right: 0; }

.newwin_pop { z-index: 1000; }

/* ==========================================================
   2차 메뉴
   ========================================================== */
.gnb-item { position: relative; }

.gnb-2d {
    position: absolute;
    top: 100%;
    left: 50%;
    padding-top: 16px;
    opacity: 0;
    visibility: hidden;
    transform: translateX(-50%);
    transition: opacity 0.18s ease,
                visibility 0s linear 0.32s;
}
.gnb-item:hover .gnb-2d,
.gnb-item:focus-within .gnb-2d {
    opacity: 1;
    visibility: visible;
    transition-delay: 0s;
}

.gnb-2d ul {
    margin: 0;
    padding: 12px 0;
    list-style: none;
    min-width: 196px;
    text-align: center;
    background: rgba(10, 14, 22, 0.92);
    -webkit-backdrop-filter: blur(14px);
            backdrop-filter: blur(14px);
    border: 1px solid rgba(150, 190, 238, 0.16);
    -webkit-clip-path: inset(0 -60px 100% -60px);
            clip-path: inset(0 -60px 100% -60px);
    transition: clip-path 0.5s cubic-bezier(0.16, 1, 0.3, 1),
        -webkit-clip-path 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.gnb-item:hover .gnb-2d ul,
.gnb-item:focus-within .gnb-2d ul {
    -webkit-clip-path: inset(0 -60px -60px -60px);
            clip-path: inset(0 -60px -60px -60px);
}

.gnb-2d li {
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity 0.26s ease,
                transform 0.42s cubic-bezier(0.16, 1, 0.3, 1);
}
.gnb-item:hover .gnb-2d li,
.gnb-item:focus-within .gnb-2d li {
    opacity: 1;
    transform: translateY(0);
}
.gnb-item:hover .gnb-2d li:nth-child(1),
.gnb-item:focus-within .gnb-2d li:nth-child(1) { transition-delay: 0.07s; }
.gnb-item:hover .gnb-2d li:nth-child(2),
.gnb-item:focus-within .gnb-2d li:nth-child(2) { transition-delay: 0.13s; }
.gnb-item:hover .gnb-2d li:nth-child(3),
.gnb-item:focus-within .gnb-2d li:nth-child(3) { transition-delay: 0.19s; }
.gnb-item:hover .gnb-2d li:nth-child(4),
.gnb-item:focus-within .gnb-2d li:nth-child(4) { transition-delay: 0.25s; }
.gnb-item:hover .gnb-2d li:nth-child(5),
.gnb-item:focus-within .gnb-2d li:nth-child(5) { transition-delay: 0.31s; }
.gnb-item:hover .gnb-2d li:nth-child(6),
.gnb-item:focus-within .gnb-2d li:nth-child(6) { transition-delay: 0.37s; }

@media (prefers-reduced-motion: reduce) {
    .gnb-2d ul,
    .gnb-2d li { transition-duration: 0.01ms; }
    .gnb-item:hover .gnb-2d li,
    .gnb-item:focus-within .gnb-2d li { transition-delay: 0s; }
}

.gnb-2d a {
    display: block;
    padding: 9px 22px;
    font-family: 'Pretendard', sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.5;
    color: rgba(226, 236, 248, 0.66);
    white-space: nowrap;
    text-decoration: none;
    transition: color 0.25s ease, background-color 0.25s ease;
}
.gnb-2d a:hover,
.gnb-2d a.on { color: #FFFFFF; background: rgba(106, 163, 244, 0.14); }

.gnb.is-solid .gnb-2d ul {
    background: #FFFFFF;
    border-color: rgba(11, 15, 20, 0.10);
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.16);
}
.gnb.is-solid .gnb-2d a { color: rgba(11, 15, 20, 0.62); }
.gnb.is-solid .gnb-2d a:hover,
.gnb.is-solid .gnb-2d a.on { color: #0B0F14; background: rgba(44, 111, 209, 0.10); }

.gnb-item.is-here .gnb-1d i:first-child { color: #6AA3F4; }
.gnb.is-solid .gnb-item.is-here .gnb-1d i:first-child { color: #2C6FD1; }

@media (max-width: 900px) {
    .gnb-2d ul { min-width: 160px; }
    .gnb-2d a { font-size: 14px; padding: 8px 16px; }
}

/* ==========================================================
   좁은 화면
   ========================================================== */

/* 열기 버튼 */
.gnb-burger {
    display: none;
    position: relative;
    width: 54px;
    height: 54px;
    flex: none;
    padding: 0;
    background: none;
    border: 0;
    cursor: pointer;
}
.gnb-burger span {
    position: absolute;
    left: 12px;
    width: 30px;
    height: 2px;
    background: #FFFFFF;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
                opacity 0.2s ease,
                background-color 0.3s ease;
}
.gnb-burger span:nth-child(1) { top: 18px; }
.gnb-burger span:nth-child(2) { top: 27px; }
.gnb-burger span:nth-child(3) { top: 36px; }
.gnb.is-solid .gnb-burger span { background: #0B0F14; }
.gnb.is-nav-open .gnb-burger span { background: #FFFFFF; }
.gnb.is-nav-open .gnb-burger span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
.gnb.is-nav-open .gnb-burger span:nth-child(2) { opacity: 0; }
.gnb.is-nav-open .gnb-burger span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }

.gnb-drawer {
    position: fixed;
    inset: 0;
    z-index: 99;
    display: flex;
    align-items: flex-start;
    padding: 104px var(--etrl-gut) 40px;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: rgba(6, 10, 18, 0.97);
    -webkit-backdrop-filter: blur(20px);
            backdrop-filter: blur(20px);
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.32s ease, visibility 0s linear 0.32s;
}
.gnb-drawer.is-open {
    visibility: visible;
    opacity: 1;
    transition: opacity 0.32s ease, visibility 0s linear 0s;
}
.gnb-dr-inner {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(28px, 4vw, 52px) clamp(24px, 5vw, 70px);
    width: 100%;
}
.gnb-dr-sec {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.45s ease, transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}
.gnb-drawer.is-open .gnb-dr-sec { opacity: 1; transform: translateY(0); }
.gnb-drawer.is-open .gnb-dr-sec:nth-child(1) { transition-delay: 0.06s; }
.gnb-drawer.is-open .gnb-dr-sec:nth-child(2) { transition-delay: 0.12s; }
.gnb-drawer.is-open .gnb-dr-sec:nth-child(3) { transition-delay: 0.18s; }
.gnb-drawer.is-open .gnb-dr-sec:nth-child(4) { transition-delay: 0.24s; }
.gnb-drawer.is-open .gnb-dr-sec:nth-child(5) { transition-delay: 0.30s; }

.gnb-dr-1d {
    display: block;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(150, 190, 238, 0.22);
    font-family: 'Chakra Petch', sans-serif;
    font-size: 22px;
    font-weight: 700;
    color: #FFFFFF;
}
.gnb-dr-sec ul { margin: 0; padding: 0; list-style: none; }
.gnb-dr-sec a {
    display: block;
    padding: 13px 0;
    font-family: 'Pretendard', sans-serif;
    font-size: 18px;
    font-weight: 500;
    color: rgba(226, 236, 248, 0.78);
    text-decoration: none;
    transition: color 0.25s ease;
}
.gnb-dr-sec a:hover,
.gnb-dr-sec a:focus-visible { color: #FFFFFF; }
.gnb-dr-sec a.on { color: #6AA3F4; }

.gnb.is-nav-open { background: rgba(6, 10, 18, 0.97); }
.gnb.is-nav-open .gnb-logo img { filter: url(#logo-white-only); }

@media (min-width: 1121px) {
    .gnb-drawer { display: none; }
    html.is-nav-locked, html.is-nav-locked body { overflow: visible; }
}

@media (max-width: 1120px) {
    .gnb-menu { display: none; }
    .gnb-burger { display: block; }
    .gnb-inner { gap: 16px; }
}

@media (max-width: 560px) {
    .gnb-drawer { padding-top: 88px; }
    .gnb-dr-inner { grid-template-columns: minmax(0, 1fr); }
}

html.is-nav-locked, html.is-nav-locked body { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
    .gnb-burger span,
    .gnb-drawer,
    .gnb-dr-sec { transition-duration: 0.01ms; }
    .gnb-dr-sec { transform: none; }
}

/* ==========================================================
   빠른 이동 (맨 위 · 맨 아래 · 폰 서브 페이지는 홈)
   ========================================================== */
.etrl-quick {
    position: fixed;
    right: 28px;
    bottom: 28px;
    z-index: 90;
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: opacity 0.25s ease, visibility 0s linear 0s;
}
.etrl-quick button,
.etrl-quick a {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 50%;
    background: rgba(11, 15, 20, 0.5);
    -webkit-backdrop-filter: blur(8px);
            backdrop-filter: blur(8px);
    color: #FFFFFF;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background-color 0.25s ease, border-color 0.25s ease;
}
.etrl-quick button:hover,
.etrl-quick a:hover { background: rgba(11, 15, 20, 0.78); border-color: rgba(106, 163, 244, 0.6); }
.etrl-quick button:active,
.etrl-quick a:active { background: rgba(11, 15, 20, 0.85); }
.etrl-quick button:focus-visible,
.etrl-quick a:focus-visible { outline: 2px solid #6AA3F4; outline-offset: 2px; }
.etrl-quick svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.etrl-quick .eq-home svg { width: 18px; height: 18px; }
@media (min-width: 768px) {
    .etrl-quick .eq-home { display: none; }
}

html.is-nav-locked .etrl-quick {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0s linear 0.2s;
}

@media (max-width: 767px) {
    .etrl-quick {
        right: 14px;
        bottom: calc(18px + env(safe-area-inset-bottom, 0px));
        gap: 8px;
    }
    .etrl-quick button,
    .etrl-quick a { width: 44px; height: 44px; }
}