/* ============================================================
   v6-nav.css — 햄버거 폐지. 메뉴 상시 노출.
   ------------------------------------------------------------
   원본 : 좌상단 햄버거 + 중앙 로고 + 좌측 티켓 버튼 + 중앙 공지자막
          → 로고와 자막이 같은 줄에서 자리를 다투고,
            메뉴는 두 번 클릭해야 보인다(햄버거 → 항목).

   v6   : 데스크톱 = 상단 레일에 6개 직접 노출 + 스크롤스파이
          모바일   = 상단은 로고·티켓만, 하단 탭바 5개(엄지 도달 범위)
          공지자막 = 레일 바로 아래 전용 스트립으로 분리
============================================================ */

.v6-rail {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--rail-h);
    z-index: 120;

    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 24px;
    padding: 0 clamp(16px, 3vw, 40px);

    /* 히어로 위에서는 유리처럼 투명, 스크롤하면 잠긴다 */
    background: linear-gradient(180deg, rgba(4, 7, 14, .72), rgba(4, 7, 14, 0));
    border-bottom: 1px solid transparent;
    transition: background .45s var(--ease), border-color .45s var(--ease),
        backdrop-filter .45s var(--ease), height .45s var(--ease);
}

.v6-rail.is-solid {
    background: rgba(4, 7, 14, .82);
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    border-bottom-color: var(--line-soft);
}

/* 그리드 아이템이 내용 폭 때문에 레일 밖으로 밀려나지 않게 한다 */
.v6-rail>* {
    min-width: 0;
}

/* ---------- 브랜드 ---------- */
.v6-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: inherit;
}

/* 케이블 위를 지나는 곤돌라 — 발왕산 케이블카의 상징.
   원본에 있던 "둥둥 떠다니는" 느낌을 아주 작은 진폭으로 남겼다. */
.v6-brand-mark {
    width: 42px;
    height: 30px;
    flex: none;
    overflow: visible;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.bm-line {
    stroke: rgba(255, 255, 255, .55);
    stroke-width: 1.4;
}

.bm-peak {
    stroke: var(--gold);
    stroke-width: 1.5;
    opacity: .85;
}

.bm-arm {
    stroke: rgba(255, 255, 255, .8);
    stroke-width: 1.5;
}

.bm-cab {
    stroke: #fff;
    stroke-width: 1.7;
    fill: rgba(26, 96, 201, .35);
}

.bm-win {
    stroke: rgba(255, 255, 255, .7);
    stroke-width: 1.2;
}

.bm-car {
    transform-box: fill-box;
    transform-origin: 50% 0%;
    animation: bmSway 4.5s ease-in-out infinite;
}

@keyframes bmSway {

    0%,
    100% {
        transform: rotate(-2.2deg);
    }

    50% {
        transform: rotate(2.2deg);
    }
}

.v6-brand-txt {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    white-space: nowrap;
}

.v6-brand-txt b {
    font-family: 'Montserrat', sans-serif;
    font-size: .84rem;
    font-weight: 800;
    letter-spacing: .17em;
    color: #fff;
}

.v6-brand-txt i {
    display: flex;
    align-items: center;
    gap: 7px;
    font-style: normal;
    font-family: 'Montserrat', sans-serif;
    font-size: .56rem;
    font-weight: 600;
    letter-spacing: .28em;
    color: var(--tx-3);
}

/* ---------- GNB ---------- */
/* 메뉴는 화면 정중앙에 놓는다.
   그리드 칸 안에서 가운데 정렬하면, 좌우(브랜드 / 티켓)의 폭이 달라
   메뉴가 한쪽으로 밀려 보인다. 레일에서 띄워 화면 기준으로 중앙에 고정한다.
   레일이 position:fixed 라 그 기준으로 배치된다. */
.v6-gnb {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.v6-gnb>ul {
    display: flex;
    align-items: center;
    gap: clamp(6px, 1.6vw, 26px);
    list-style: none;
    margin: 0;
    padding: 0;
}

.v6-gnb>ul>li {
    position: relative;
}

.v6-gnb>ul>li>a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 10px 12px;
    text-decoration: none;
    color: var(--tx-2);
    transition: color .25s;
}

.v6-gnb>ul>li>a b {
    font-family: 'Montserrat', sans-serif;
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .1em;
}

.v6-gnb>ul>li>a i {
    font-style: normal;
    font-size: .62rem;
    letter-spacing: .04em;
    color: var(--tx-3);
    transition: color .25s;
}

.v6-gnb>ul>li>a:hover,
.v6-gnb>ul>li>a.is-active {
    color: #fff;
}

.v6-gnb>ul>li>a:hover i,
.v6-gnb>ul>li>a.is-active i {
    color: var(--gold);
}

/* 스크롤스파이 언더라인 — 현재 보고 있는 섹션을 따라 미끄러진다 */
.v6-gnb-ink {
    position: absolute;
    bottom: 4px;
    left: 0;
    height: 2px;
    width: 0;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--gold), var(--gold-deep));
    box-shadow: 0 0 14px rgba(245, 237, 0, .45);
    opacity: 0;
    transition: transform .45s var(--ease), width .45s var(--ease), opacity .3s;
    transform: translateX(0);
}

.v6-gnb-ink.is-on {
    opacity: 1;
}

/* 이용안내 드롭다운 */
.v6-sub {
    position: absolute;
    top: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%) translateY(-6px);
    min-width: 210px;
    list-style: none;
    margin: 0;
    padding: 8px;
    border-radius: 14px;
    background: rgba(8, 13, 24, .95);
    border: 1px solid var(--line);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 24px 60px rgba(0, 0, 0, .55);
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s var(--ease), transform .25s var(--ease), visibility .25s;
}

.has-sub:hover .v6-sub,
.has-sub:focus-within .v6-sub {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.v6-sub a {
    display: block;
    padding: 10px 14px;
    border-radius: 9px;
    font-size: .84rem;
    color: var(--tx-2);
    text-decoration: none;
    transition: background .2s, color .2s;
}

.v6-sub a:hover {
    background: rgba(255, 255, 255, .07);
    color: #fff;
    transform: none;
}

/* ---------- 우측: 날씨 + 티켓 ---------- */
.v6-rail-right {
    display: flex;
    align-items: center;
    justify-self: end;
    gap: 14px;
}

/* ---------- 공지 자막 스트립 ---------- */
.v6-annstrip {
    position: fixed;
    top: var(--rail-h);
    left: 0;
    right: 0;
    z-index: 115;
    height: var(--ann-h);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 clamp(16px, 3vw, 40px);
    background: linear-gradient(180deg, rgba(4, 7, 14, .55), rgba(4, 7, 14, 0));
    transition: background .45s var(--ease), backdrop-filter .45s var(--ease);
    pointer-events: none;
}

/* 공지가 없으면 띠 자체를 없앤다 — 빈 띠가 남으면 헤더가 두꺼워 보인다 */
.v6-annstrip.is-empty {
    display: none;
}

.v6-annstrip.is-solid {
    background: rgba(8, 13, 24, .9);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--line-soft);
}

/* 원본 announcement.css 를 그대로 쓰되 배치만 스트립에 맞춘다 */
.v6-annstrip #header-announcement-bar {
    position: static !important;
    transform: none !important;
    width: 100%;
    max-width: var(--w);
    margin: 0;
    pointer-events: auto;
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
    padding: 0 !important;
    cursor: pointer;
}

/* ============================================================
   모바일 하단 탭바
============================================================ */
.v6-tabbar {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 130;
    height: var(--tab-h);
    padding-bottom: env(safe-area-inset-bottom, 0);
    background: rgba(6, 10, 18, .94);
    backdrop-filter: blur(20px) saturate(150%);
    -webkit-backdrop-filter: blur(20px) saturate(150%);
    border-top: 1px solid var(--line);
}

.v6-tabbar a,
.v6-tabbar button {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    background: none;
    border: 0;
    padding: 8px 2px;
    color: var(--tx-3);
    text-decoration: none;
    font: inherit;
    cursor: pointer;
    transition: color .2s;
}

.v6-tabbar svg {
    width: 21px;
    height: 21px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.v6-tabbar span {
    font-size: .6rem;
    letter-spacing: -.01em;
    white-space: nowrap;
}

/* 탭이 6개라 좁은 화면에서는 더 조인다 */

.v6-tabbar a.is-active,
.v6-tabbar button.is-active {
    color: var(--gold);
}

/* 운행정보 탭의 상태 점 — 색으로 현재 운행 상태를 알린다 */
.v6-tab-dot {
    position: absolute;
    top: 8px;
    right: calc(50% - 18px);
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--soon);
    box-shadow: 0 0 0 3px rgba(6, 10, 18, .9);
}

.v6-tabbar[data-state="live"] .v6-tab-dot {
    background: var(--live);
}

.v6-tabbar[data-state="stop"] .v6-tab-dot {
    background: var(--stop);
}

/* ============================================================
   반응형
============================================================ */

/* 상단 메뉴 8개(모나용평 포함)는 이 폭 아래로는 브랜드 로고와 부딪힌다.
   여기서부터는 하단 탭바가 메뉴를 대신한다. (기존 900px 에서 올림)
   경계값은 실측으로 정했다 — 1140px 아래에서는 가운데 메뉴가 좌우와 부딪힌다. */

/* ===============================================================
   모나용평 — 상위 브랜드로 구분
   ---------------------------------------------------------------
   발왕산 케이블카는 모나용평에 와야 탈 수 있다.
   즉 본체는 모나용평이고 이 사이트는 케이블카 이용에 필요한 정보를
   모아 둔 곳이다. 그래서 같은 층의 메뉴처럼 보이면 안 된다.

   구분하는 방법 네 가지 —
     ① 앞에 세로 구분선을 둬서 "여기서부터는 이 사이트 밖" 을 알린다
     ② 영문을 전부 대문자로, 자간을 넓혀 브랜드 표기처럼 조판한다
     ③ 다른 메뉴보다 밝게(흰색) 두고, 한글은 골드로 상시 표시한다
        (다른 메뉴의 한글은 회색이고 hover 때만 골드가 된다)
     ④ 바깥으로 나가는 링크임을 화살표로 표시한다

   티켓 버튼처럼 색을 채우지는 않는다. 채우면 버튼 두 개가 서로
   경쟁해 보여서 '상위' 가 아니라 '또 하나의 CTA' 로 읽힌다.
   =============================================================== */

.v6-extmark {
    font-size: .78em;
    line-height: 1;
    opacity: .75;
    transform: translateY(-1px);
    transition: transform .25s var(--ease), opacity .25s;
}

/* ===============================================================
   레일 3분할 — 왼쪽(브랜드·티켓) · 가운데(구간 메뉴) · 오른쪽(다른 페이지)
   ---------------------------------------------------------------
   티켓 버튼을 오른쪽 노란 버튼에서 왼쪽 아이콘으로 옮겼다.
   히어로 한가운데 이미 큰 '티켓 구매하기' 버튼이 있어서
   같은 화면에 노란 버튼이 두 개 있을 이유가 없었고,
   그만큼 가운데 메뉴가 쓸 자리가 넓어진다.
   =============================================================== */

.v6-rail-left {
    display: flex;
    align-items: center;
    gap: 24px;
    min-width: 0;
}

/* --- 티켓 아이콘 (스크롤 후 등장) --- */
/* 히어로의 큰 버튼이 화면 밖으로 나간 뒤에야 나타난다.
   둘이 동시에 보이면 같은 걸 두 번 권하는 꼴이 된다. */
.v6-ticket-mini {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px 7px 11px;
    border-radius: 999px;
    text-decoration: none;
    white-space: nowrap;

    color: #E7C766;
    border: none;
    background: transparent;

    /* 처음에는 없는 것처럼 접혀 있다 */
    opacity: 0;
    transform: translateX(-8px);
    pointer-events: none;
    max-width: 0;
    padding-left: 0;
    padding-right: 0;
    border-width: 0;
    overflow: hidden;
    transition: opacity .4s var(--ease), transform .4s var(--ease),
        max-width .45s var(--ease), padding .45s var(--ease),
        background-color .25s, border-color .25s;
}

.v6-rail.is-solid .v6-ticket-mini {
    opacity: 1;
    transform: none;
    pointer-events: auto;
    max-width: 200px;
    padding: 6px 4px;
    border-width: 0;
}

.v6-ticket-mini:hover {
    background: transparent;
    color: #F7DE8E;
}

.v6-ticket-mini .v6-ticket-ico {
    width: 21px;
    height: 21px;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.45;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.v6-ticket-mini-txt {
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .02em;
}

/* --- 오른쪽 : 다른 페이지 묶음 --- */
.v6-rail-right {
    justify-self: end;
    min-width: 0;
}

.v6-outbound {
    display: flex;
    align-items: center;
    gap: clamp(4px, .8vw, 14px);
    list-style: none;
    margin: 0;
    padding: 0;
}

.v6-outbound>li {
    position: relative;
}

.v6-outbound>li>a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 10px 12px;
    text-decoration: none;
    color: var(--tx-2);
    border-radius: 8px;
    transition: color .25s, background-color .25s;
}

.v6-outbound>li>a b {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: 'Montserrat', sans-serif;
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .13em;
    text-transform: uppercase;
    white-space: nowrap;
}

.v6-outbound>li>a i {
    font-style: normal;
    font-size: .6rem;
    letter-spacing: .04em;
    color: var(--tx-3);
    white-space: nowrap;
    transition: color .25s;
}

.v6-outbound>li>a:hover {
    color: #fff;
    background-color: rgba(255, 255, 255, .07);
}

.v6-outbound>li>a:hover i {
    color: var(--gold);
}

/* 모나용평 — 상위 브랜드라 웹캠보다 한 단계 또렷하게 둔다.
   발왕산 케이블카는 모나용평에 와야 탈 수 있다. 본체는 모나용평이다. */
.v6-outbound>li.is-parent {
    margin-left: clamp(6px, .9vw, 14px);
    padding-left: clamp(10px, 1.2vw, 18px);
}

.v6-outbound>li.is-parent::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 26px;
    background: linear-gradient(180deg,
            transparent,
            rgba(255, 255, 255, .22) 22%,
            rgba(255, 255, 255, .22) 78%,
            transparent);
}

.v6-outbound>li.is-parent>a b {
    font-weight: 700;
    letter-spacing: .16em;
    color: var(--tx-1);
}

.v6-outbound>li.is-parent>a i {
    color: var(--gold-deep);
    letter-spacing: .1em;
}

/* 바깥으로 나가는 링크 표시 */
.v6-extmark {
    font-size: .78em;
    line-height: 1;
    opacity: .75;
    transform: translateY(-1px);
    transition: transform .25s var(--ease), opacity .25s;
}

.v6-outbound>li.is-parent>a:hover .v6-extmark {
    opacity: 1;
    transform: translate(2px, -3px);
}

/* 드롭다운은 오른쪽 끝에서 잘리지 않게 오른쪽 기준으로 편다 */
.v6-rail-right .v6-sub {
    left: auto;
    right: 0;
    transform: translateY(-6px);
}

.v6-rail-right .has-sub:hover .v6-sub,
.v6-rail-right .has-sub:focus-within .v6-sub {
    transform: translateY(0);
}

/* ===============================================================
   반응형 — 넓은 폭에서 좁은 폭 순서로 둔다.
   기본 규칙과 특이도가 같으므로 반드시 기본 규칙보다 뒤에 와야 한다.
   =============================================================== */

/* ===============================================================
   반응형 — 넓은 폭에서 좁은 폭 순서.
   기본 규칙과 특이도가 같으므로 반드시 기본 규칙보다 뒤에 와야 한다.
   =============================================================== */

@media (max-width: 1340px) {

    /* 영문만 남긴다 — 두 줄이 접히는 것보다 한 줄이 낫다 */
    .v6-gnb>ul>li>a i,
    .v6-outbound>li>a i {
        display: none;
    }

    .v6-gnb>ul {
        gap: 6px;
    }

    .v6-gnb>ul>li>a {
        padding: 10px 6px;
    }

    .v6-gnb>ul>li>a b {
        font-size: .75rem;
    }

    /* 오른쪽 묶음도 함께 조인다. 여기가 넓으면 가운데 메뉴가 밀린다. */
    .v6-outbound {
        gap: 6px;
    }

    .v6-outbound>li>a {
        padding: 10px 5px;
    }

    .v6-outbound>li>a b {
        font-size: .70rem;
        letter-spacing: .1em;
    }

    .v6-outbound>li.is-parent {
        margin-left: 6px;
        padding-left: 10px;
    }

    .v6-outbound>li.is-parent>a b {
        letter-spacing: .12em;
    }

    /* 티켓 아이콘은 그림만 남긴다 */
    .v6-ticket-mini-txt {
        display: none;
    }

    .v6-rail.is-solid .v6-ticket-mini {
        padding: 7px 9px;
    }
}


/* 1140~1250px — 노트북 창을 줄인 폭. 한 단계 더 조여야 좌우와 안 부딪힌다.
   이 아래(1140px)로는 하단 탭바가 메뉴를 대신한다. */
@media (max-width: 1250px) {
    .v6-gnb>ul>li>a b {
        font-size: .70rem;
        letter-spacing: .07em;
    }

    .v6-gnb>ul {
        gap: 4px;
    }

    .v6-gnb>ul>li>a {
        padding: 10px 5px;
    }

    .v6-outbound>li>a b {
        font-size: .66rem;
        letter-spacing: .07em;
    }

    .v6-outbound>li>a {
        padding: 10px 4px;
    }

    .v6-outbound>li.is-parent {
        margin-left: 4px;
        padding-left: 9px;
    }
}

@media (max-width: 1140px) {
    .v6-gnb {
        display: none;
    }

    /* 헤더에는 로고와 티켓만 남긴다. 좁은 폭에서 오른쪽 묶음까지 넣으면 빽빽해진다.
       실시간 웹캠과 모나용평 링크는 푸터에 그대로 있다. */
    .v6-rail-right {
        display: none;
    }

    .v6-gnb-ink {
        display: none;
    }

    .v6-rail {
        grid-template-columns: auto 1fr;
    }

    .v6-rail-right {
        justify-self: end;
    }

    .v6-tabbar {
        display: flex;
    }


    .v6-brand-mark {
        width: 34px;
        height: 24px;
    }

    .v6-brand-txt b {
        font-size: .72rem;
        letter-spacing: .13em;
    }



}

@media (max-width: 400px) {
    .v6-tabbar svg {
        width: 19px;
        height: 19px;
    }

    .v6-tabbar span {
        font-size: .55rem;
    }
}


/* ---------------------------------------------------------------
   모바일 — 티켓을 헤더 오른쪽 끝에 상시 노출한다.

   PC 에서는 히어로 한가운데 큰 버튼이 있어 스크롤 후에만 나타내지만,
   모바일은 히어로 버튼이 한참 아래로 밀려 손이 닿지 않는다.
   그래서 처음부터 오른쪽에 띄워 둔다.
   .v6-rail-left 를 한 줄 전체로 늘리고 양끝 정렬만 바꾼다.
   (DOM 순서를 그대로 두어야 .ticket-purchase-btn 클릭 집계가 유지된다)
   --------------------------------------------------------------- */
@media (max-width: 1140px) {
    .v6-rail-left {
        grid-column: 1 / -1;
        width: 100%;
        justify-content: space-between;
        gap: 12px;
    }

    /* 스크롤 여부와 무관하게 보인다 */
    .v6-ticket-mini,
    .v6-rail.is-solid .v6-ticket-mini {
        opacity: 1;
        transform: none;
        pointer-events: auto;
        max-width: 200px;
        padding: 6px 2px 6px 10px;
        overflow: visible;
    }

    .v6-ticket-mini-txt {
        display: inline;
        font-size: .7rem;
    }
}

/* 아주 좁은 폭에서는 글자를 빼고 아이콘만 남긴다 */
@media (max-width: 380px) {
    .v6-ticket-mini-txt {
        display: none;
    }
}