/* ============================================================
   v6-survey.css — 고객 만족도 조사 상시 배너
   ------------------------------------------------------------
   자리 : 월간 운행 일정(라이트) 과 푸터(다크) 사이.
          "산에서 내려온 뒤 한마디 남기고 가세요" 가 되는 지점이고,
          라이트 → 다크로 넘어가는 이음매를 이 배너가 대신 만든다.

   ⚠ 문구·링크·노출은 전부 관리자 값이다 (survey6.js 참고).
     여기서는 모양만 정한다.
============================================================ */

.v6-survey {
    position: relative;
    isolation: isolate;
    padding: clamp(58px, 8vh, 96px) 24px;
    text-align: center;
    color: #fff;
    background: #0B111C;
    overflow: hidden;
}

.v6-survey[hidden] {
    display: none;
}

/* 능선 위로 번지는 새벽빛 — 푸터의 검정으로 자연스럽게 떨어진다 */
.v6-survey::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(90% 130% at 50% -20%, rgba(245, 237, 0, .13), transparent 62%),
        radial-gradient(70% 110% at 18% 120%, rgba(26, 96, 201, .22), transparent 68%),
        linear-gradient(to bottom, rgba(255, 255, 255, .05), transparent 42%);
}

/* 위쪽 라이트 섹션과 닿는 경계를 가늘게 그어 준다 */
.v6-survey::after {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: min(720px, 80%);
    height: 1px;
    z-index: -1;
    background: linear-gradient(90deg, transparent, rgba(245, 237, 0, .45), transparent);
}

.sv-inner {
    max-width: 640px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.sv-label {
    font-family: 'Montserrat', sans-serif;
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .3em;
    color: var(--gold, #f5ed00);
    margin-bottom: 16px;
}

.sv-title {
    margin: 0 0 14px;
    font-family: 'Nanum Myeongjo', serif;
    font-size: clamp(1.45rem, 3.2vw, 2.05rem);
    font-weight: 700;
    line-height: 1.45;
    color: #fff;
    word-break: keep-all;
}

.sv-text {
    margin: 0 0 30px;
    font-size: clamp(.9rem, 1.6vw, 1rem);
    line-height: 1.85;
    color: rgba(255, 255, 255, .78);
    word-break: keep-all;
}

.sv-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 15px 30px;
    border-radius: 999px;
    background: var(--gold, #f5ed00);
    color: #12140A;
    text-decoration: none;
    font-weight: 800;
    font-size: .95rem;
    box-shadow: 0 14px 34px rgba(245, 237, 0, .24);
    transition: transform .35s var(--ease, cubic-bezier(.165, .84, .44, 1)),
        box-shadow .35s ease, gap .3s ease;
}

.sv-btn:hover {
    transform: translateY(-3px);
    gap: 15px;
    box-shadow: 0 20px 44px rgba(245, 237, 0, .34);
}

.sv-btn-ico {
    width: 19px;
    height: 19px;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sv-note {
    margin-top: 14px;
    font-size: .76rem;
    letter-spacing: .02em;
    color: rgba(255, 255, 255, .5);
}

@media (max-width: 768px) {
    .v6-survey {
        padding: 54px 20px;
    }

    .sv-text {
        margin-bottom: 24px;
    }

    .sv-btn {
        width: 100%;
        max-width: 320px;
        justify-content: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sv-btn {
        transition: none;
    }
}

/* ============================================================
   우하단 바로가기 FAB
   ------------------------------------------------------------
   배너가 문서 맨 아래에 있어서, 스크롤을 끝까지 내리지 않으면
   설문이 있다는 사실 자체를 모른다. 맨위로 버튼 한 칸 위에
   같은 결의 원형 버튼을 세우고, 손이 닿으면 라벨이 펼쳐진다.

   ⚠ 노출은 관리자 값을 따른다 — survey6.js 가 hidden 을 벗긴다.
============================================================ */
#survey-fab {
    position: fixed;
    right: 24px;
    bottom: calc(24px + var(--tab-h) + 68px);
    z-index: 70;
    display: inline-flex;
    align-items: center;
    gap: 0;
    height: 46px;
    padding: 0;
    border-radius: 999px;
    text-decoration: none;
    color: var(--tx-1, #fff);
    background: rgba(9, 14, 22, .78);
    border: 1px solid var(--line, rgba(255, 255, 255, .14));
    backdrop-filter: blur(14px) saturate(150%);
    -webkit-backdrop-filter: blur(14px) saturate(150%);
    box-shadow: 0 12px 30px rgba(0, 0, 0, .38);
    overflow: hidden;
    opacity: 0;
    transform: translateY(14px) scale(.9);
    pointer-events: none;
    transition: gap .38s var(--ease), padding .38s var(--ease), opacity .4s var(--ease),
        background .3s, color .3s, border-color .3s, transform .4s var(--ease);
}

#survey-fab[hidden] {
    display: none;
}

/* 히어로를 벗어나야 나타난다 — 히어로에서는 영상 위의 한 줄이 그 역할을 한다 */
#survey-fab.show {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.sf-ico {
    flex: none;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
}

.sf-ico svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* 라벨은 평소 접혀 있다 — 원형 버튼으로 보인다 */
.sf-txt {
    max-width: 0;
    opacity: 0;
    white-space: nowrap;
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: -.01em;
    transition: max-width .38s var(--ease), opacity .28s ease;
}

#survey-fab.show:hover,
#survey-fab.show:focus-visible {
    gap: 2px;
    padding-right: 18px;
    transform: translateY(-3px) scale(1);
    color: #12140A;
    background: var(--gold, #f5ed00);
    border-color: transparent;
    box-shadow: 0 16px 36px rgba(245, 237, 0, .3);
}

#survey-fab.show:hover .sf-txt,
#survey-fab.show:focus-visible .sf-txt {
    max-width: 140px;
    opacity: 1;
}

/* 라이트 정보 구간 위에서는 반전 — 맨위로 버튼과 같은 규칙 */
#survey-fab.on-light {
    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);
}

#survey-fab.show.on-light:hover {
    color: #12140A;
    background: var(--gold, #f5ed00);
}

/* 배너에 도착하면 스스로 물러난다 — 같은 곳을 두 번 가리키지 않는다 */
#survey-fab.show.is-there {
    opacity: 0;
    pointer-events: none;
    transform: translateY(10px) scale(.92);
}

@media (max-width: 768px) {
    #survey-fab {
        right: 16px;
        bottom: calc(16px + var(--tab-h) + 62px);
        height: 42px;
    }

    .sf-ico {
        width: 40px;
        height: 40px;
    }
}

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

    #survey-fab,
    .sf-txt {
        transition: none;
    }
}

/* ============================================================
   히어로 위 한 줄 — 메뉴를 늘리는 대신 여기에 둔다
   ------------------------------------------------------------
   상단 GNB 에 항목을 더하면 모바일에서 메뉴가 좁아진다.
   티켓 버튼과 경쟁하지 않도록 버튼이 아니라 얇은 선형 링크로 두고,
   두 CTA 가 올라온 뒤(1.15s) 뒤따라 떠오른다.
============================================================ */
/* ── 데스크톱 : 날씨 위젯 아래 오른쪽 스택 ──
   원래 #main-weather-info 가 갖고 있던 위치값을 래퍼로 올린다.
   히어로가 접힐 때 함께 사라지도록 --hp 연동 투명도도 래퍼가 맡는다. */
.v6-hero-side {
    position: absolute;
    right: clamp(16px, 3vw, 44px);
    top: calc(var(--rail-h) + var(--ann-h) + 26px);
    z-index: 4;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 12px;
    opacity: calc(1 - var(--hp, 0) * 2);
    transition: opacity .3s;
}

/* 위치·투명도는 이제 래퍼가 쥔다 (id 선택자를 이기려면 .class #id 가 필요하다) */
.v6-hero-side #main-weather-info {
    position: static;
    right: auto;
    top: auto;
    z-index: auto;
    opacity: 1;
}

/* 스택 안에서는 여백 없이 오른쪽 정렬 */
.v6-hero-side .v6-hero-survey {
    margin: 0;
}

.v6-hero-survey {
    margin: 18px auto 0;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 12px 24px 12px 20px;
    border-radius: 16px;
    text-decoration: none;
    text-align: left;
    color: #fff;
    border: 0;
    background: transparent;
    /* 영상 위에 바로 얹히므로 글자 자체가 그림자를 진다 */
    text-shadow: 0 2px 14px rgba(0, 0, 0, .62);
    opacity: 0;
    transition: background .25s, transform .25s var(--ease);
}

.v6-hero-survey[hidden] {
    display: none;
}

.v6-hero-survey>svg {
    width: 21px;
    height: 21px;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: .8;
}

.hs-txt {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

/* 1행 — 질문 */
.hs-txt b {
    font-size: .92rem;
    font-weight: 700;
    line-height: 1.35;
    color: #fff;
}

/* 2행 — 행동 */
.hs-txt em {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-style: normal;
    font-size: .8rem;
    line-height: 1.35;
    color: rgba(255, 255, 255, .74);
}

/* 화살표는 텍스트가 아니라 도형이라 폰트에 흔들리지 않는다 */
.hs-txt i {
    width: 14px;
    height: 9px;
    flex: none;
    background: currentColor;
    -webkit-mask: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 12'%3E%3Cpath d='M1 6h17M13 1l5 5-5 5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    mask: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 12'%3E%3Cpath d='M1 6h17M13 1l5 5-5 5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    transition: transform .25s var(--ease);
}

/* 평소엔 테두리가 없고, 손이 닿을 때만 바탕이 옅게 든다 */
.v6-hero-survey:hover,
.v6-hero-survey:focus-visible {
    transform: translateY(-2px);
    background: rgba(255, 255, 255, .1);
}

.v6-hero-survey:hover .hs-txt em,
.v6-hero-survey:focus-visible .hs-txt em {
    color: #fff;
}

.v6-hero-survey:hover .hs-txt i,
.v6-hero-survey:focus-visible .hs-txt i {
    transform: translateX(4px);
}

/* CTA(0.85s) 뒤에 떠오른다 */
.v6-hero.is-ready .v6-hero-survey {
    animation: v6rise 1s var(--ease) 1.15s forwards;
}

@media (max-width: 600px) {
    .v6-hero-survey {
        margin-top: 12px;
        gap: 10px;
        padding: 10px 16px;
    }

    .v6-hero-survey>svg {
        width: 19px;
        height: 19px;
    }

    .hs-txt b {
        font-size: .86rem;
    }

    .hs-txt em {
        font-size: .75rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .v6-hero.is-ready .v6-hero-survey {
        animation: none;
        opacity: 1;
    }
}