/* ============================================================
   v6-info.css — 정보 구간 (가이드맵 · 이용안내 · 월간 운행 일정)
   ------------------------------------------------------------
   왜 이 세 섹션만 "라이트" 인가
   ─────────────────────────────────────────────────────────────
   이 구간의 내용은 전부 관리자가 입력한다.
     · information.json 의 경고문은 #c92a2a(빨강), 강조는 #007bff(파랑)
     · calendar.json 의 행사/휴장 배지도 #fab005 · #fa5252 · #7950f2
   전부 **흰 카드를 전제로 고른 색**이다. 배경을 다크로 뒤집으면
   관리자가 지금까지 넣어온 색이 통째로 깨진다.
   → 몰입 구간은 다크, 정보 구간은 라이트로 나눈다.
     대신 경계에서 뚝 끊기지 않도록 위아래를 마스크로 녹인다.

   ★ 첨부 화면에서 글자가 안 보였던 진짜 원인
   ─────────────────────────────────────────────────────────────
   `body { color: var(--tx-1) }` (거의 흰색) 이 흰 카드 안으로 상속됐다.
   원본 price.css 는 일부 요소에만 색을 지정하고 나머지는 기본 검정에
   기대고 있었는데, 그 기본값이 흰색으로 바뀌면서 **흰 배경에 흰 글씨**가 됐다.
   아래 `color` 재지정이 그 상속 뿌리를 되돌린다.
============================================================ */

/* ---------- ① 상속 뿌리 복구 : 흰 카드 위 글자를 다시 어둡게 ---------- */
#guide,
#price,
#calendar {
    color: #2b3340;
    padding-top: clamp(110px, 14vh, 170px);
    padding-bottom: clamp(110px, 14vh, 170px);
}

/* 원본이 라이트 배경을 전제로 만든 컴포넌트들 — 명시적으로 못 박는다 */
#price .price-card,
#price .price-card *,
#calendar .operating-calendar-container,
#guide .map-container {
    color: inherit;
}

/* 관리자 입력값에 색이 없는 본문은 충분히 진하게 */
#price .price-card {
    color: #2b3340;
}

/* ---------- ② 라이트 워시 (app6.js 가 주입) ----------
   ⚠ 처음엔 세 섹션 모두 위아래 14% 를 투명하게 빼서 다크로 녹였다.
     그런데 가이드맵 → 이용안내 처럼 **라이트 구간끼리 맞닿는 경계**에서는
     양쪽 페이드가 겹쳐 300px 가까운 어두운 띠가 생겼다.

   정보 구간(가이드맵 · 이용안내 · 운행일정)은 **하나의 연속된 라이트 구간**이다.
   → 바깥 경계(가이드맵 위 / 운행일정 아래)에서만 다크로 녹이고,
     구간 안쪽 경계는 거의 불투명하게 유지해 띠가 생기지 않게 한다. */
.v6-light {
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
        linear-gradient(180deg, #E4EAF2 0%, #F5F8FB 26%, #F5F8FB 74%, #E4EAF2 100%);
    pointer-events: none;
    /* 기본 : 안쪽 경계 — 가장자리에서도 88% 를 유지한다 */
    -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, .88) 0%, #000 3%, #000 97%, rgba(0, 0, 0, .88) 100%);
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, .88) 0%, #000 3%, #000 97%, rgba(0, 0, 0, .88) 100%);
}

/* 정보 구간의 시작 — 위쪽만 다크로 녹인다 */
#guide .v6-light {
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 15%, #000 97%, rgba(0, 0, 0, .88) 100%);
    mask-image: linear-gradient(180deg, transparent 0%, #000 15%, #000 97%, rgba(0, 0, 0, .88) 100%);
}

/* 정보 구간의 끝 — 아래쪽만 다크로 녹인다 */
#calendar .v6-light {
    -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, .88) 0%, #000 3%, #000 85%, transparent 100%);
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, .88) 0%, #000 3%, #000 85%, transparent 100%);
}

/* 이용안내 구간은 배경 사진이 없어 흰 판처럼 밋밋했다.
   주제(해발 1,458m 산악 정보)에 맞춰 **등고선 지도** 결을 깐다.
   ─ 우하단·좌상단 두 지점을 중심으로 도는 동심원 = 봉우리 등고선
   ─ 아래쪽에 깔리는 푸른 기류 = 능선의 대기
   본문이 진한 남색(#2b3340)이라 대비는 그대로 유지된다. */
#price .v6-light {
    background:
        repeating-radial-gradient(circle at 82% 116%,
            rgba(26, 60, 110, .055) 0 1px,
            transparent 1px 30px),
        repeating-radial-gradient(circle at 12% -14%,
            rgba(26, 60, 110, .04) 0 1px,
            transparent 1px 38px),
        radial-gradient(115% 55% at 20% 104%, rgba(26, 96, 201, .12), transparent 62%),
        radial-gradient(95% 50% at 84% 100%, rgba(26, 96, 201, .085), transparent 62%),
        radial-gradient(70% 42% at 50% -4%, rgba(255, 255, 255, .95), transparent 62%),
        linear-gradient(180deg, #E1E9F3 0%, #F6F9FC 20%, #EFF4FA 58%, #E1E9F3 100%);
}

/* 원본 배경사진(::before)에도 같은 마스크를 씌운다.
   안 그러면 사진 가장자리에서 다시 딱딱한 선이 생긴다. */
#guide::before,
#calendar::before {
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 16%, #000 84%, transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0%, #000 16%, #000 84%, transparent 100%);
}

/* 정보 구간에서는 다크 이음매를 끈다.
   라이트 워시의 마스크가 이미 같은 역할을 하고,
   겹치면 첨부 화면처럼 카드 위아래가 어둡게 덮여 글자가 죽는다. */
#guide>.v6-seam-a,
#guide>.v6-seam-b,
#price>.v6-seam-a,
#price>.v6-seam-b,
#calendar>.v6-seam-a,
#calendar>.v6-seam-b {
    display: none;
}

/* ---------- ③ 섹션 헤더 — 라이트 워시 위이므로 원본 색 그대로 살린다 ---------- */
#guide .section-header,
#price .section-header,
#calendar .section-header {
    color: #1D2A3A;
    text-shadow: none;
}

#guide .section-overline,
#price .section-overline,
#calendar .section-overline {
    color: #1A60C9;
    font-weight: 700;
    letter-spacing: .24em;
}

#guide .section-title,
#price .section-title,
#calendar .section-title {
    font-family: 'Nanum Myeongjo', serif;
    font-weight: 800;
    color: #16202C;
}

/* ---------- ④ 이용안내는 "카드 4장" 이 아니라 "한 판" 으로 읽히게 ----------
   카드 박스를 지우고 구분선만 남긴다. 박스가 없으면 행을 stretch 로 맞춰도
   빈 흰 공간이 보이지 않으므로, 높이를 같은 행끼리 맞출 수 있다. */
#price .price-card {
    background: transparent;
    border: 0;
    box-shadow: none;
    border-radius: 0;
}

#guide .map-container {
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(16, 28, 46, .2);
}

#guide .download-button {
    color: #16202C;
}

/* 원본부터 있던 저대비 배지(흰 글씨 + 밝은 주황/노랑/하늘색).
   팔레트는 관리자 화면과 맞춰야 하므로 건드리지 않고,
   글자에 미세한 그림자만 넣어 가장자리를 살린다. */
#price .discount-rate {
    text-shadow: 0 1px 2px rgba(0, 0, 0, .38);
    font-weight: 800;
}

/* ---------- ⑤ 좌우 여백
   원본 #price 는 full-width 라 카드가 화면 끝까지 붙는다.
   그 상태에서는 우측 고도 레일과 겹친다(첨부 화면의 "1,275").
   좌우 여백을 줘서 겹침을 없애고, 다른 섹션과 폭을 맞춘다. ---------- */
#price {
    padding-left: clamp(16px, 4.5vw, 72px);
    padding-right: clamp(16px, 4.5vw, 72px);
}

/* ============================================================
   이용안내 레이아웃 — 4열 → 2열 2단
   ------------------------------------------------------------
   원본은 데스크톱에서 카드 4장을 좁은 4열로 세우고
   `align-items: stretch` 로 **전부 가장 긴 카드 높이에 맞춰 늘렸다.**
   그래서 내용이 짧은 '이용 요금' 카드 아래에 큰 빈 공간이 생기고,
   좌우에는 쓰지 않는 여백이 남았다.

     좌 : 이용 요금 · 할인 안내   (표 — 가로폭이 필요하다)
     우 : 기본 운영 정보 · 기타 유의 사항 (목록 — 세로로 길다)

   ⚠ 관리자가 '기타 유의 사항'(customInfo)을 끄면 price.js 가
     `.three-items-layout` 을 붙인다. 그때는 운영 정보가 오른쪽 두 칸을
     모두 차지하도록 영역을 다시 짠다. 데이터 바인딩은 건드리지 않는다.
============================================================ */
#price .price-layout-container {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
        "fare info"
        "disc etc";
    /* 박스를 지웠으므로 같은 행끼리 높이를 맞춰도 빈 공간이 보이지 않는다 */
    align-items: stretch;
    gap: 0;
    max-width: 1440px;
    margin-inline: auto;
    padding: 0;
}

/* ---------- 구분선 ---------- */
#price {
    --pr-line: rgba(26, 52, 92, .16);
}

#price .fare-card,
#price .discount-card {
    border-right: 1px solid var(--pr-line);
}

#price .fare-card,
#price .info-guide-card {
    border-bottom: 1px solid var(--pr-line);
}

/* 기타 유의 사항이 꺼지면 운영 정보가 두 행을 쓰므로 밑줄이 필요 없다 */
#price .three-items-layout .info-guide-card {
    border-bottom: 0;
}

#price .fare-card {
    grid-area: fare;
}

#price .discount-card {
    grid-area: disc;
}

#price .info-guide-card {
    grid-area: info;
}

#price .custom-info-card {
    grid-area: etc;
}

/* 기타 유의 사항이 꺼진 경우 — 운영 정보가 오른쪽 두 칸을 쓴다 */
#price .price-layout-container.three-items-layout {
    grid-template-areas:
        "fare info"
        "disc info";
}

/* 원본 three-items-layout 의 flex 잔재 무력화 */
#price .price-layout-container.three-items-layout .price-card {
    flex-basis: auto;
    min-width: 0;
}

/* 구분선이 박스를 대신하므로 안쪽 여백을 넉넉히 준다 */
#price .price-card {
    min-width: 0;
    padding: 24px 38px 26px;
}

#price .fare-card,
#price .discount-card {
    padding-left: 0;
}

#price .info-guide-card,
#price .custom-info-card {
    padding-right: 0;
}

/* ============================================================
   컴팩트 타입 스케일 — FHD 한 화면에 최대한 담기 위해
   ------------------------------------------------------------
   ⚠ 확인함 : 이용안내 섹션에는 **관리자 글자크기 설정이 없다.**
     · information.json 에 fontSize 필드 없음
     · price.js 는 폰트 크기를 읽지 않음
     · 관리자의 "글자 크기" 입력(livecontrol/index.html:291)은 공지 자막 전용
   따라서 CSS 로 조정해도 관리자 값과 충돌하지 않는다.
============================================================ */
#price {
    padding-top: clamp(34px, 4vh, 58px);
    padding-bottom: clamp(34px, 4vh, 58px);
}

#price .section-header {
    margin-bottom: .9rem;
}

#price .section-overline {
    font-size: .64rem;
    margin-bottom: .45rem;
}

#price .section-title {
    font-size: clamp(1.45rem, 2.1vw, 1.85rem);
}

#price .price-card-title {
    font-size: 1rem;
    margin-bottom: 14px;
    padding-bottom: 9px;
}

#price .guide-section .price-card-title {
    font-size: .95rem;
}

/* 요금표 */
#price .fare-header-content .category-title {
    font-size: 1rem;
}

#price .fare-header-content .category-note {
    font-size: .66rem;
}

#price .fare-table th,
#price .fare-table td {
    padding: 5px 8px;
}

#price .fare-table thead th {
    padding-bottom: 10px;
}

#price .fare-type-header td {
    padding-top: 12px;
    font-size: .82rem;
}

#price .fare-price-label {
    font-size: .64rem;
    padding: 2px 7px;
}

#price .fare-price-cell {
    white-space: nowrap;
    font-size: .95rem;
}

#price .fare-bottom-note {
    margin-top: 14px;
    padding-top: 12px;
    font-size: .73rem;
}

/* 할인표 */
#price .discount-table th,
#price .discount-table td {
    padding: 5px 10px;
    font-size: .78rem;
}

#price .discount-table .discount-rate {
    padding: 3px 10px;
    min-width: 50px;
    font-size: .74rem;
}

#price .discount-notes {
    margin-top: 12px;
    padding-top: 12px;
}

#price .discount-notes p {
    font-size: .73rem;
}

/* 운영 정보 · 유의사항 */
#price .info-guide-card .guide-section:not(:last-child) {
    padding-bottom: 14px;
    margin-bottom: 14px;
}

#price .operation-items-wrapper {
    gap: 11px;
}

#price .operation-content h5 {
    font-size: .86rem;
}

#price .operation-content p {
    font-size: .78rem;
}

#price .operation-content span {
    font-size: .7rem;
}

#price .notice-list li {
    font-size: .78rem;
    padding-left: 15px;
    margin-bottom: 3px;
}

#price .custom-info-group-title {
    font-size: .86rem;
}

/* 기타 유의 사항은 목록이 길다 — 넓은 화면에서 2단으로 흘려 높이를 줄인다 */
@media (min-width: 1025px) {
    #price .custom-info-section {
        column-count: 2;
        column-gap: 32px;
    }

    #price .custom-info-section>.price-card-title {
        column-span: all;
    }

    #price .notice-list li,
    #price .custom-info-group-title {
        break-inside: avoid;
    }

    #price .custom-info-group-title,
    #price .custom-info-list-subtitle {
        break-after: avoid;
    }
}

@media (max-width: 1024px) {

    #price .price-layout-container,
    #price .price-layout-container.three-items-layout {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "fare"
            "disc"
            "info"
            "etc";
    }

    /* 1열에서는 세로 구분선이 의미 없다 — 가로선만 남긴다 */
    #price .price-card {
        padding: 30px 4px 34px;
        border-right: 0 !important;
        border-bottom: 1px solid var(--pr-line);
    }

    #price .price-layout-container>.price-card:last-child,
    #price .custom-info-card {
        border-bottom: 0;
    }
}

/* 고도 레일이 라이트 구간에 들어오면 색을 뒤집어 계속 읽히게 한다 */
.v6-altrail.on-light .v6-altrail-line {
    background: rgba(24, 40, 64, .18);
}

.v6-altrail.on-light .v6-altrail-val {
    color: #46536A;
}

.v6-altrail.on-light .v6-altrail-val b {
    color: #1A60C9;
}

.v6-altrail.on-light .v6-altrail-line i {
    background: linear-gradient(180deg, #1A60C9, #0B3D86);
    box-shadow: 0 0 12px rgba(26, 96, 201, .35);
}