/* ============================================================
   v6-core.css — 토큰 · 공기층 · 섹션 이음매
   ------------------------------------------------------------
   개편의 핵심은 "각 섹션이 부드럽게 이어지게" 하는 것이다.
   원본은 히어로(영상) → #111 → #1a1a1d → 사진배경 → #eef2f7(밝음)
   으로 색이 툭툭 끊겨 경계선이 그대로 보였다.

   v6 는 세 개의 장치로 이 경계를 지운다.
     ① 페이지 전체를 관통하는 단 하나의 배경 그라데이션 (--flow)
     ② 모든 섹션 위아래에 깔리는 이음매 마스크 (.v6-band::before/after)
     ③ 전 페이지 공통 공기층 (.v6-atmos) — 같은 대기 속에 있게 만든다
============================================================ */

:root {
    /* 심연 → 슬레이트 → 심연. 페이지 전체가 하나의 색 흐름을 탄다 */
    --ink-0: #04070E;
    --ink-1: #080D18;
    --ink-2: #0D1626;
    --ink-3: #131F33;

    --line: rgba(255, 255, 255, .10);
    --line-soft: rgba(255, 255, 255, .06);

    --tx-1: #F2F5FA;
    --tx-2: rgba(242, 245, 250, .80);
    --tx-3: rgba(242, 245, 250, .62);

    /* CI 블루 + 운영 골드(원본 공지 라벨색 #f5ed00 계열) */
    --sky: #1A60C9;
    --sky-soft: rgba(26, 96, 201, .28);
    --gold: #F5ED00;
    --gold-deep: #C9A227;

    --live: #37D399;
    --soon: #FBBF24;
    --stop: #F87171;

    --rail-h: 74px;
    --ann-h: 38px;
    --tab-h: 0px;

    --ease: cubic-bezier(.16, 1, .3, 1);

    --w: min(1280px, 92vw);
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    /* 상단 레일 + 자막 스트립 높이만큼 앵커 오프셋 */
    scroll-padding-top: calc(var(--rail-h) + var(--ann-h) + 12px);
    background: var(--ink-0);
}

body {
    margin: 0;
    color: var(--tx-1);
    font-family: 'Pretendard', 'Montserrat', -apple-system, sans-serif;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;

    /* ① 페이지 전체를 관통하는 단 하나의 배경 흐름 */
    background:
        linear-gradient(180deg,
            var(--ink-0) 0%,
            var(--ink-1) 18%,
            var(--ink-2) 42%,
            var(--ink-3) 62%,
            var(--ink-2) 80%,
            var(--ink-0) 100%);
    background-attachment: fixed;
}

/* ③ 공기층 — 아주 옅은 상승 기류 + 비네트.
   fixed 로 깔려서 어느 섹션을 보든 같은 공기 속에 있는 느낌을 준다. */
.v6-atmos {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(120% 70% at 50% -10%, rgba(26, 96, 201, .16), transparent 60%),
        radial-gradient(90% 60% at 50% 110%, rgba(26, 96, 201, .10), transparent 60%),
        radial-gradient(140% 100% at 50% 50%, transparent 40%, rgba(0, 0, 0, .55) 100%);
}

/* ============================================================
   ② 섹션 이음매
   각 섹션의 위·아래 140px 를 페이지 배경색으로 페이드시킨다.
   원본 섹션들이 각자 자기 배경(#111 / 사진 / #eef2f7)을 갖고 있어도
   경계에서 서로 녹아들어 "선"이 사라진다.
============================================================ */
.v6-flow {
    position: relative;
    z-index: 1;
}

.v6-band {
    position: relative;
    isolation: isolate;
}

/* 이음매는 전용 엘리먼트로 넣는다.
   ::before/::after 로 하면 원본 CSS(#guide::before, #calendar::before 처럼
   id 선택자로 배경사진을 까는 규칙)와 특이도 싸움이 난다.
   → app6.js 가 각 .v6-band 의 처음/끝에 <i> 두 개를 주입한다. */
.v6-seam-a,
.v6-seam-b {
    position: absolute;
    left: 0;
    right: 0;
    height: 150px;
    z-index: 8;
    pointer-events: none;
}

/* 가운데 농도를 .5 → .34 로 낮춰 음영 띠가 덜 무겁게 보이도록 했다 */
.v6-seam-a {
    top: -1px;
    background: linear-gradient(180deg, var(--seam, var(--ink-1)) 0%, rgba(8, 13, 24, .34) 42%, transparent 100%);
}

.v6-seam-b {
    bottom: -1px;
    background: linear-gradient(0deg, var(--seam-b, var(--ink-2)) 0%, rgba(13, 22, 38, .34) 42%, transparent 100%);
}

#cablecar {
    --seam: var(--ink-0);
    --seam-b: var(--ink-1);
}

#experience {
    --seam: var(--ink-1);
    --seam-b: var(--ink-2);
}

#facility {
    --seam: var(--ink-2);
    --seam-b: var(--ink-2);
}

#dining {
    --seam: var(--ink-2);
    --seam-b: var(--ink-3);
}

#guide {
    --seam: var(--ink-3);
    --seam-b: var(--ink-3);
}

#price {
    --seam: var(--ink-3);
    --seam-b: var(--ink-2);
}

#calendar {
    --seam: var(--ink-2);
    --seam-b: var(--ink-0);
}

/* 히어로 바로 다음 이음매 — 영상이 어둠으로 잠겨 들어가는 구간 */
.v6-seam-top {
    position: relative;
    height: 0;
    margin-top: -1px;
}

/* 원본 .page-section 의 회색 배경/보더를 걷어낸다 (경계선의 주범) */
.v6-flow .page-section,
.v6-flow .page-subsection {
    background-color: transparent;
    border-bottom: 0;
}

/* 밝은 섹션(가이드맵·이용안내·운행일정)은 배경을 낮춰 흐름에 합류시킨다.
   내부 컴포넌트 디자인은 원본 그대로 살린다. */
#guide,
#price,
#calendar {
    background-color: transparent !important;
}

/* 원본 ::before 배경사진 위로 본문을 올린다.
   이음매(.v6-seam-*)는 제외해야 한다 — id 특이도가 높아 absolute 가 풀린다. */
#guide>*:not([class*="v6-seam"]):not(.v6-light),
#price>*:not([class*="v6-seam"]):not(.v6-light),
#calendar>*:not([class*="v6-seam"]):not(.v6-light) {
    position: relative;
    z-index: 2;
}

/* ============================================================
   공통 섹션 헤더 (v6 가 새로 그리는 부분에서만 사용)
============================================================ */
.v6-head {
    width: var(--w);
    margin: 0 auto 48px;
    text-align: center;
}

.v6-overline {
    display: block;
    font-family: 'Montserrat', sans-serif;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .28em;
    color: var(--gold);
    margin-bottom: 14px;
}

.v6-title {
    font-family: 'Nanum Myeongjo', serif;
    font-size: clamp(1.9rem, 3.4vw, 3rem);
    font-weight: 800;
    line-height: 1.28;
    margin: 0 0 16px;
    color: var(--tx-1);
}

.v6-lede {
    margin: 0 auto;
    max-width: 680px;
    font-size: clamp(.94rem, 1.2vw, 1.05rem);
    line-height: 1.85;
    color: var(--tx-2);
}

/* ============================================================
   고도 인디케이터 — 스크롤 진행 = 상승 고도
============================================================ */
.v6-altrail {
    position: fixed;
    /* 본문(최대 1280px)의 바깥 여백 안에만 머무르게 한다 */
    right: 6px;
    width: 40px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 60;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    opacity: 0;
    transition: opacity .5s var(--ease);
    pointer-events: none;
}

.v6-altrail.is-on {
    opacity: 1;
}

.v6-altrail-line {
    position: relative;
    width: 1px;
    height: 34vh;
    background: rgba(255, 255, 255, .16);
}

.v6-altrail-line i {
    position: absolute;
    left: -1px;
    top: 0;
    width: 3px;
    height: var(--alt-p, 0%);
    background: linear-gradient(180deg, var(--gold), var(--gold-deep));
    box-shadow: 0 0 12px rgba(245, 237, 0, .5);
    border-radius: 2px;
}

.v6-altrail-val {
    font-family: 'Bebas Neue', sans-serif;
    letter-spacing: .06em;
    color: var(--tx-2);
    font-size: 1rem;
    display: flex;
    align-items: baseline;
    gap: 2px;
}

.v6-altrail-val b {
    color: var(--gold);
    font-size: 1.15rem;
}

/* ============================================================
   푸터
============================================================ */
.v6-footer {
    position: relative;
    z-index: 1;
    padding: 44px 0 calc(30px + var(--tab-h));
    background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .55));
    border-top: 1px solid var(--line-soft);
}

.v6-footer-grid {
    width: var(--w);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 2fr 1fr 1fr auto;
    gap: 26px 32px;
}

.v6-footer .brand {
    font-weight: 800;
    color: var(--tx-1);
    font-size: .95rem;
    margin: 0 0 7px;
}

.v6-footer p {
    margin: 0 0 5px;
    font-size: .76rem;
    line-height: 1.65;
    color: var(--tx-3);
}

.v6-footer ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.v6-footer .footer-main-menu>li:first-child {
    margin-bottom: 10px;
}

.v6-footer .footer-main-menu>li:first-child a {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: .7rem;
    letter-spacing: .18em;
    color: var(--gold);
}

.v6-footer li {
    margin-bottom: 7px;
}

.v6-footer a {
    color: var(--tx-2);
    text-decoration: none;
    font-size: .86rem;
    transition: color .2s;
}

.v6-footer a:hover {
    color: var(--tx-1);
}

/* 하위 항목은 상단 메뉴와 같은 결 — 영문 위, 한글 아래 */
.v6-footer .footer-submenu-item {
    margin-bottom: 6px;
}

.v6-footer .footer-submenu-item a {
    display: flex;
    align-items: baseline;
    gap: 6px;
    white-space: nowrap;
}

.v6-footer .footer-submenu-item b {
    font-family: 'Montserrat', sans-serif;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--tx-2);
    transition: color .2s;
    flex: none;
}

.v6-footer .footer-submenu-item i {
    font-style: normal;
    font-size: .7rem;
    letter-spacing: -.01em;
    color: var(--tx-3);
    overflow: hidden;
    text-overflow: ellipsis;
}

.v6-footer .footer-submenu-item a:hover b {
    color: var(--gold);
}

/* ============================================================
   원본 interactions.css 보정
   a:hover { transform: scale(1.05) } 가 전역이라 레일/탭바가 흔들린다.
============================================================ */
.v6-rail a:hover,
.v6-tabbar a:hover,
.v6-footer a:hover,
#realtime-info a:hover,
.v6-rail button:hover,
.v6-tabbar button:hover,
#realtime-info button:hover {
    transform: none;
}

/* ============================================================
   맨 위로 — 원본은 반투명 검정 원 + ▲ 글리프였다.
   테두리 링이 스크롤 진행도를 그리는 형태로 다시 그렸다.
   (hero6.js 가 --sp 를 0~100 으로 흘려보낸다)
============================================================ */
#top-btn {
    position: fixed;
    right: 24px;
    bottom: calc(24px + var(--tab-h));
    z-index: 70;
    width: 58px;
    height: 58px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    box-shadow: none;
    display: grid;
    place-items: center;
    cursor: pointer;
    opacity: 0;
    transform: translateY(14px) scale(.9);
    transition: opacity .4s var(--ease), transform .4s var(--ease);
}

#top-btn.show {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* 진행도 링 */
.top-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: conic-gradient(var(--gold) calc(var(--sp, 0) * 1%), rgba(255, 255, 255, .16) 0);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2px));
    transition: opacity .3s;
}

/* 알맹이 */
.top-core {
    position: absolute;
    inset: 5px;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    background: rgba(9, 14, 22, .74);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid var(--line-soft);
    color: var(--tx-1);
    transition: background .25s, color .25s;
}

.top-core svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform .3s var(--ease);
}

.top-core i {
    font-style: normal;
    font-family: 'Montserrat', sans-serif;
    font-size: .48rem;
    font-weight: 800;
    letter-spacing: .18em;
    color: var(--tx-3);
}

#top-btn:hover {
    transform: translateY(-3px) !important;
}

#top-btn:hover .top-core {
    background: rgba(9, 14, 22, .92);
    color: var(--gold);
}

#top-btn:hover .top-core svg {
    transform: translateY(-2px);
}

#top-btn:hover .top-core i {
    color: var(--gold);
}

/* 라이트 정보 구간 위에서는 반전 */
#top-btn.on-light .top-core {
    background: rgba(255, 255, 255, .92);
    border-color: rgba(24, 40, 64, .12);
    color: #16202C;
    box-shadow: 0 10px 26px rgba(16, 28, 46, .18);
}

#top-btn.on-light .top-core i {
    color: #5A6678;
}

#top-btn.on-light .top-ring {
    background: conic-gradient(#1A60C9 calc(var(--sp, 0) * 1%), rgba(24, 40, 64, .14) 0);
}

/* ============================================================
   프로토타입 전환 바
============================================================ */




/* ============================================================
   반응형
============================================================ */
@media (max-width: 1140px) {
    :root {
        --rail-h: 62px;
    }

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

/* 하단 탭바가 켜지는 폭(v6-nav.css 의 1000px)과 반드시 같아야 한다.
   어긋나면 탭바가 본문 맨 아래를 가린다. */
@media (max-width: 1140px) {
    :root {
        --tab-h: 64px;
    }

    body {
        padding-bottom: var(--tab-h);
    }
}

@media (max-width: 768px) {
    :root {
        --ann-h: 34px;
    }

    .v6-altrail {
        display: none;
    }

    .v6-seam-a,
    .v6-seam-b {
        height: 110px;
    }

    .v6-footer-grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }

}

@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: .001ms !important;
        transition-duration: .001ms !important;
    }
}


/* --- 푸터 SNS — 모나용평 공식 채널 (원본 푸터에서 복원) --- */
.v6-footer .footer-socials {
    min-width: 150px;
}

.v6-footer .footer-socials-title {
    margin: 0 0 14px;
    font-size: .72rem;
    letter-spacing: .14em;
    font-weight: 700;
    color: var(--tx-1);
}

.v6-footer .sns-links {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.v6-footer .sns-links a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 50%;
    transition: border-color .2s ease, background-color .2s ease, transform .2s ease;
}

.v6-footer .sns-links a:hover {
    border-color: rgba(255, 255, 255, .42);
    background-color: rgba(255, 255, 255, .06);
    transform: translateY(-2px);
}

.v6-footer .sns-links img {
    width: 20px;
    height: 20px;
    object-fit: contain;
    /* 아이콘 원본이 어두운 색이라 다크 배경에서 밝게 뒤집는다 */
    filter: brightness(0) invert(1);
    opacity: .82;
}

.v6-footer .sns-links a:hover img {
    opacity: 1;
}

@media (max-width: 1100px) {
    .v6-footer-grid {
        grid-template-columns: 1fr 1fr;
    }
}