/* PUB-01 베리북스란 — 10/16 확정 판 (피그마 2026-10-22 사본 OxBR · 프레임 1878:9185)
   퍼블리싱 index.html 과 개발 C-02 페이지(cms_pages · slug about)가 같이 씀 · 클래스는 모두 lv- 로 시작
   값은 피그마 그대로(1440 화면 기준 · 본문 1120) — 좁은 화면은 맨 아래 @media 에서 세로로 쌓음 */

.lv-page { position: relative; overflow-x: clip; background: var(--vb-color-surface-white); color: #4a4b45; }
.lv-page :where(p, h1, h2, h3, ul, ol, dl, dd) { margin: 0; padding: 0; }
.lv-page :where(ul, ol) { list-style: none; }
.lv-wrap { width: min(1120px, 100% - 40px); margin: 0 auto; }

/* 공통 머리 — 함께 쓰는 사람들 · 보상체계 */
.lv-head { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.lv-head__eyebrow { font-size: 18px; font-weight: 700; line-height: 25px; letter-spacing: -0.9px; color: #2e9a57; }
.lv-head__title { font-size: 56px; font-weight: 700; line-height: 76px; letter-spacing: -2.8px; color: #4a4b45; }

/* Hero (1878:9187) — 초록 그라데이션 그림(뒤집어 깔고 88%) */
.lv-hero { position: relative; height: 776px; overflow: hidden; background: #2e9a57; }
.lv-hero__bg { position: absolute; left: calc(50% - 1598.4px); top: -639.2px; width: 3550.4px; height: 1996.8px; opacity: 0.88; transform: scaleY(-1);
    background: url("../images/landing-1022/hero-gradient.png") center / cover no-repeat; }
.lv-hero__text { position: relative; padding-top: 370px; }
.lv-hero__eyebrow { margin-left: -40px; font-size: 43px; font-weight: 600; line-height: 65px; letter-spacing: -1.72px; color: #fff; }
.lv-hero__title { margin: 5px 0 0 -40px; font-size: 70px; font-weight: 700; line-height: 88px; letter-spacing: -1.4px; color: #fff; }

/* 리딩레이스에서 베리북스로 · 숫자 카드 (1878:9194) */
.lv-intro { padding: 57.5px 0 121.5px; }
.lv-intro__inner { width: min(1262px, 100% - 40px); margin: 0 auto; }
.lv-intro__title { font-size: 56px; font-weight: 700; line-height: 76px; letter-spacing: -2.8px; color: #4a4b45; }
.lv-intro__title em { font-style: normal; color: #2e9a57; }
.lv-stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; margin-top: 74px !important; }
.lv-stat { position: relative; height: 246px; border-radius: 22px; background: #f3f3f3; overflow: hidden; }
.lv-stat__label { position: absolute; left: 28px; top: 28px; font-size: 18px; font-weight: 700; line-height: 25px; letter-spacing: -0.9px; color: #4a4b45; }
.lv-stat__value { position: absolute; right: 20px; bottom: 26px; display: flex; align-items: flex-end; }
.lv-stat__value strong { font-size: 80px; font-weight: 700; line-height: 82px; letter-spacing: -4px; color: #1b1b1b; }
.lv-stat__value span { margin-left: 4px; font-size: 18px; font-weight: 500; line-height: 22px; letter-spacing: -0.9px; color: #4a4b45; }
.lv-stat__value b { position: absolute; right: 0; top: -2px; font-size: 40px; font-weight: 700; line-height: 1; color: #1b1b1b; }
.lv-stat__value b + span { margin-left: 14px; }

/* 함께하는 기관 (1878:9216) — 로고 7개 · 양끝 흐림 */
.lv-partners { padding: 28px 0; }
.lv-partners__row { position: relative; display: flex; align-items: center; width: 1440px; max-width: 100%; height: 69px; margin: 0 auto; overflow: hidden; }
.lv-partners__row::before, .lv-partners__row::after { content: ""; position: absolute; top: 0; z-index: 1; width: 172.8px; height: 69px; pointer-events: none; }
.lv-partners__row::before { left: 0; background: linear-gradient(90deg, #fff, rgba(255,255,255,0)); }
.lv-partners__row::after { right: 0; background: linear-gradient(270deg, #fff, rgba(255,255,255,0)); }
.lv-logo { flex: 0 0 auto; margin: 0 calc((216px - var(--w)) / 2); object-fit: contain; }
.lv-logo--dream { --w: 104.4px; width: 104.4px; height: 39.6px; }
.lv-logo--chaek { --w: 97.2px; width: 97.2px; height: 43.2px; }
.lv-logo--camp { --w: 97.2px; width: 97.2px; height: 45px; }

/* 베리북스가 걸어온 길 (1878:9228 · 연표 1878:9237) */
.lv-history__hero { position: relative; display: flex; flex-direction: column; align-items: center; gap: 16px; height: 356px; padding-top: 83.5px; box-sizing: border-box; text-align: center;
    background: linear-gradient(180deg, rgba(43,122,75,0) 216px, #2b7a4b 356px),
                linear-gradient(180deg, rgba(43,122,75,0) 0%, rgba(43,122,75,0.4) 100%),
                linear-gradient(90deg, rgba(55,165,98,0.7), rgba(55,165,98,0.7)),
                url("../images/landing-1022/history-photo.png") center / cover no-repeat; }
.lv-history__eyebrow { font-size: 18px; font-weight: 700; letter-spacing: -0.9px; color: #8fddb0; }
.lv-history__title { font-size: 56px; font-weight: 700; line-height: 76px; letter-spacing: -2.8px; color: #fff; }
.lv-years { display: flex; justify-content: center; gap: 35px; height: 420px; padding-top: 28px !important; box-sizing: border-box; background: #2b7a4b; }
.lv-year { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 285px; height: 348px; margin-top: 8px; padding: 0 22px; box-sizing: border-box;
    border: 1px solid rgba(255,255,255,0.14); border-radius: 22px; background: rgba(255,255,255,0.09); text-align: center; cursor: default; outline: none; }
.lv-year > * { opacity: 0.5; }
.lv-year.is-on { margin-top: 0; background: rgba(255,255,255,0.2); box-shadow: 0 18px 36px rgba(10,60,30,0.18); }
.lv-year.is-on > * { opacity: 1; }
.lv-year:focus-visible { border-color: rgba(255,255,255,0.6); }
.lv-year__num { font-size: 56px; font-weight: 600; line-height: normal; letter-spacing: -2.8px; color: #c9f5d8; }
.lv-year__name { margin-top: 18px !important; font-size: 22px; font-weight: 700; letter-spacing: -1.1px; color: #fff; }
.lv-year__text { margin-top: 14px !important; font-size: 16px; font-weight: 500; line-height: 26px; letter-spacing: -0.8px; color: rgba(255,255,255,0.82); white-space: nowrap; }

/* 차별화 기능 Point 01 ~ 03 (1878:9270 · 9329 · 9385) — 색만 다름 */
.lv-point { --c: #2e9a57; --label-bg: #edf7ef; --shot: linear-gradient(101.35deg, #fbfdf5 0%, #e8f9e5 41.818%, #ddf7ee 69.091%, #ddefff 90.909%);
    --sh: 16,69,47; --bar: #e1eee8; --pick: linear-gradient(90deg, #228a4f, rgba(124,201,232,0.9)); --icon-bg: #e4f4ec; --fill: #eef7f3; --badge: #0f381f; --badge-b: #8fddb0;
    height: 776px; }
.lv-point--blue { --c: #4580c4; --label-bg: #eaf2fb; --shot: linear-gradient(101.35deg, #f9f9f9 0%, #e8eff9 38.182%, #c2e2f5 67.273%, #d7edf9 90.909%);
    --sh: 23,64,107; --bar: #dfeaf5; --pick: linear-gradient(90deg, #3a7bc8, rgba(140,203,240,0.9)); --icon-bg: #e4effa; --badge: #15304f; --badge-b: #9ccbf2; }
.lv-point--purple { --c: #6a4fc4; --label-bg: #f1edfa; --shot: linear-gradient(101.35deg, #f8f9f9 0%, #efebf9 38.182%, #cdc3e9 67.273%, #fadedf 90.909%);
    --sh: 58,42,122; --bar: #e8e3f4; --pick: linear-gradient(90deg, #6a4fc4, rgba(231,166,200,0.9)); --icon-bg: #eee9f8; --fill: #f4f1fb; --badge: #2a1e5c; --badge-b: #c9b9f6; }
.lv-point__inner { position: relative; display: flex; gap: 40px; width: min(1200px, 100% - 40px); margin: 0 auto; padding-top: 96px; }
.lv-point__text { flex: 0 0 590px; display: flex; flex-direction: column; align-items: flex-start; }
.lv-point__label { display: inline-flex; align-items: center; height: 35px; padding: 0 18px; border-radius: 999px; background: var(--label-bg);
    font-size: 16.1px; font-weight: 600; line-height: 25px; letter-spacing: -0.644px; color: var(--c); }
.lv-point__title { margin-top: 13px !important; font-size: 56px; font-weight: 700; line-height: 76px; letter-spacing: -2.8px; color: #4a4b45; }
.lv-point__desc { width: 528px; margin-top: 26px !important; font-size: 18.4px; font-weight: 500; line-height: 30px; letter-spacing: -0.736px; color: #4a4b45; }
.lv-checks { width: 528px; margin-top: auto !important; padding-bottom: 8px !important; }
.lv-point__text { height: 600px; }
.lv-checks li { display: flex; align-items: center; gap: 12px; height: 64px; font-size: 19.55px; font-weight: 600; line-height: 27.6px; letter-spacing: -0.782px; color: #4a4b45; }
.lv-checks li + li { border-top: 1px solid #dfe5df; }
.lv-checks li::before { content: "✓"; flex: 0 0 27px; height: 27px; border-radius: 8px; background: var(--c); font-size: 16px; font-weight: 600; line-height: 27px; text-align: center; color: #fff; }

.lv-shot { position: relative; flex: 0 0 570px; height: 555.75px; margin-top: 14px; border-radius: 22.8px; background: var(--shot); }
.lv-shot__screen { position: absolute; left: 28.5px; top: -7.1px; width: 513px; height: 570px; }
.lv-shot__back { position: absolute; left: 9.5px; top: 66.5px; width: 237.5px; height: 285px; overflow: hidden; border-radius: 19px; background: rgba(255,255,255,0.7); box-shadow: 0 7.6px 22.8px rgba(var(--sh),0.06); }
.lv-dot { position: absolute; left: 22.8px; width: 13.3px; height: 13.3px; }
.lv-bar { position: absolute; left: 45.6px; width: 133px; height: 9.5px; border-radius: 4.75px; background: var(--bar); }
.lv-shot__pick { position: absolute; left: 11.4px; top: 71.25px; display: flex; align-items: center; gap: 7.6px; width: 214.7px; height: 39.9px; padding-left: 13.3px; box-sizing: border-box;
    border-radius: 9.5px; background: var(--pick); font-size: 12.35px; font-weight: 600; letter-spacing: -0.6175px; color: #fff; white-space: nowrap; }
.lv-shot__front { position: absolute; left: 123.5px; top: 161.5px; width: 380px; height: 361px; overflow: hidden; border-radius: 19px; background: rgba(255,255,255,0.94); box-shadow: 0 13.3px 30.4px rgba(var(--sh),0.1); }
.lv-shot__head { position: absolute; left: 28.5px; display: flex; align-items: center; gap: 9.5px; height: 28.5px; font-size: 19px; font-weight: 700; letter-spacing: -0.95px; color: #1f2a24; white-space: nowrap; }
.lv-shot__icon { display: flex; align-items: center; justify-content: center; width: 28.5px; height: 28.5px; border-radius: 7.6px; background: var(--icon-bg); }
.lv-shot__input { position: absolute; left: 28.5px; top: 81.7px; width: 323px; height: 45.6px; padding: 15.2px 17.1px 0; box-sizing: border-box; border-radius: 11.4px; background: #eef7f3;
    font-size: 12.35px; font-weight: 500; letter-spacing: -0.6175px; color: #a7b3ac; }
.lv-shot__line { position: absolute; left: 0; width: 380px; height: 0.95px; background: var(--bar); }
.lv-shot__fill { position: absolute; left: 28.5px; width: 323px; height: 15.2px; border-radius: 5.7px; background: var(--fill); }
.lv-shot__badge { position: absolute; top: 117.42px; display: flex; align-items: center; gap: 10.26px; height: 61.56px; padding: 0 25.65px; box-sizing: border-box; border-radius: 999px; background: var(--badge);
    font-size: 25.65px; font-weight: 600; letter-spacing: -1.2825px; color: #fff; white-space: nowrap; }
.lv-shot__badge b { font-weight: 600; color: var(--badge-b); }
.lv-shot__badge span { font-size: 20.52px; font-weight: 500; letter-spacing: -1.026px; color: rgba(255,255,255,0.7); }

/* Point 02 — 수준별 카드 V1 ~ V4 */
.lv-lvcard { position: absolute; padding: 3.8px 13.3px 0; box-sizing: border-box; border-radius: 11.4px; font-size: 11.4px; font-weight: 700; line-height: 1.4; letter-spacing: -0.57px; color: #6f97c2; }
.lv-lvcard--1 { left: 57px; top: 87.4px; width: 266px; height: 91.2px; background: #e9f2fb; }
.lv-lvcard--2 { left: 47.5px; top: 110.2px; width: 285px; height: 68.4px; background: #dceaf8; }
.lv-lvcard--3 { left: 38px; top: 133px; width: 304px; height: 45.6px; background: #cfe2f5; }
.lv-lvcard--4 { left: 28.5px; top: 155.8px; width: 323px; height: 167.2px; padding: 0; border: 0.95px solid #dce8f5; background: #fff; filter: drop-shadow(0 -3.8px 6.65px rgba(23,64,107,0.1)); }
.lv-lvcard__chip { position: absolute; left: 18.05px; top: 18.05px; width: 77.9px; height: 22.8px; border-radius: 11.4px; background: #4580c4; line-height: 22.8px; text-align: center; color: #fff; }
.lv-lvcard__q { position: absolute; left: 18.05px; top: 56.05px; font-size: 15.2px; line-height: 1.4; letter-spacing: -0.76px; color: #1f2a24; white-space: nowrap; }
.lv-lvcard--4 i { position: absolute; left: 18.05px; height: 9.5px; border-radius: 4.75px; background: #eef5fc; }

/* Point 03 — 육각형 그래프 */
.lv-hex { position: absolute; left: 28.5px; top: 76px; width: 323px; height: 171px; overflow: hidden; }
.lv-hex img { position: absolute; display: block; max-width: none; }
.lv-hex__pt { width: 10.45px; height: 10.45px; margin: -0.95px 0 0 -0.95px; }
.lv-hex span { position: absolute; font-size: 12.35px; font-weight: 500; letter-spacing: -0.6175px; color: #6b766f; white-space: nowrap; }
.lv-hex span.is-on { font-weight: 700; color: #6a4fc4; }

/* 함께 쓰는 사람들 · 탭 B안 (1878:9657 · 1891:2) */
.lv-people { height: 776px; padding-top: 92.5px; box-sizing: border-box; }
.lv-people__body { position: relative; display: flex; gap: 40px; width: min(1262px, 100% - 40px); height: 461px; margin: 37px auto 0; }
.lv-tabs { display: flex; flex-direction: column; gap: 14px; flex: 0 0 620px; height: 421px; margin-top: 20px; }
.lv-tab { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; flex: 0 0 96px; padding: 0 36px; overflow: hidden; border: 0; border-radius: 24px;
    background: #eaf6ee; font-family: inherit; text-align: left; cursor: pointer; }
.lv-tab__who { font-size: 18px; font-weight: 700; line-height: 25px; letter-spacing: -0.9px; color: #2e9a57; }
.lv-tab__line { margin-top: 4px; font-size: 18.4px; font-weight: 500; line-height: 30px; letter-spacing: -0.736px; color: #4a4b45; white-space: nowrap; }
.lv-tab__desc { display: none; margin-top: 12px; font-size: 18.4px; font-weight: 500; line-height: 30px; letter-spacing: -0.736px; color: rgba(255,255,255,0.92); }
.lv-tab__desc b { font-weight: 700; color: #fff; }
.lv-tab.is-on { flex: 1 1 auto; background: linear-gradient(169.45deg, #4cb97a 13.139%, #2e9a57 86.131%); box-shadow: 0 18px 40px rgba(46,154,87,0.22); cursor: default; }
.lv-tab.is-on .lv-tab__who { color: #e6fbee; }
.lv-tab.is-on .lv-tab__line { font-size: 24px; line-height: 34px; letter-spacing: -1.2px; color: #fff; }
.lv-tab.is-on .lv-tab__desc { display: block; }
.lv-tab:focus-visible { outline: 2px solid #2e9a57; outline-offset: 3px; }
.lv-char { position: relative; flex: 0 0 602px; height: 461px; }
.lv-char__glow { position: absolute; left: 41px; top: 0; }
.lv-char__img { position: absolute; left: 41px; top: 56px; display: none; width: 520px; height: 388.27px; object-fit: contain; mix-blend-mode: multiply; }
.lv-char__img.is-on { display: block; }

/* 보상체계 캐러셀 (1878:9691) — 가운데 카드 1040 + 양옆 흐린 카드(0.94배 · 45%) */
.lv-reward { position: relative; height: 776px; padding-top: 73px; box-sizing: border-box; overflow: hidden; background: #eef7f0; }
.lv-reward .lv-head { gap: 7px; }
.lv-carousel { position: relative; width: 1040px; height: 480px; margin: 36px auto 0; }
.lv-carousel__side { position: absolute; top: 14.4px; width: 977.6px; height: 451.2px; padding: 0; border: 0; border-radius: 30.08px; background: #fff; opacity: 0.45;
    box-shadow: 0 15px 37.6px rgba(15,56,31,0.08); cursor: pointer; }
.lv-carousel__side--prev { right: calc(100% + 63.2px); }
.lv-carousel__side--next { left: calc(100% + 63.2px); }
.lv-slide { position: absolute; inset: 0; display: none; overflow: hidden; border-radius: 32px; background: #fff; box-shadow: 0 16px 40px rgba(15,56,31,0.08); }
.lv-slide.is-on { display: block; }
.lv-slide__text { position: absolute; left: 64px; top: 115.5px; width: 400px; }
.lv-slide__label { display: inline-flex; align-items: center; height: 35px; padding: 0 18px; border-radius: 999px;
    background: linear-gradient(120.89deg, #fbfdf5 0%, #e8f9e5 41.818%, #ddf7ee 69.091%, #ddefff 90.909%);
    font-size: 16.1px; font-weight: 600; line-height: 25px; letter-spacing: -0.644px; color: #2e9a57; }
.lv-slide__title { margin-top: 24px !important; font-size: 40px; font-weight: 700; line-height: 55px; letter-spacing: -1.6px; color: #4a4b45; white-space: nowrap; }
.lv-slide__desc { width: 380px; margin-top: 20px !important; font-size: 18.4px; font-weight: 500; line-height: 30px; letter-spacing: -0.736px; color: #4a4b45; }
.lv-art { position: absolute; left: 480px; top: 30px; width: 520px; height: 420px; border-radius: 24px; }
.lv-art img, .lv-art__blur { position: absolute; display: block; max-width: none; }

/* 01 · 거리 — KM 현황 카드 둘 */
.lv-km { position: absolute; overflow: hidden; border: solid rgba(255,255,255,0.8); }
.lv-km p, .lv-km span { position: absolute; font-weight: 600; line-height: 1.3; white-space: nowrap; }
.lv-km__mtn { position: absolute; overflow: hidden; }
.lv-km__mtn img { position: absolute; }
.lv-km__course { display: inline-flex; border: solid rgba(255,255,255,0.9); background: rgba(255,255,255,0.6); }
.lv-km__pct { background: rgba(255,255,255,0.88); color: #173c67; }
.lv-km__dist b { font-weight: 700; }
.lv-km__dist { font-weight: 400 !important; display: flex; align-items: baseline; }
.lv-km--tr { left: 60px; top: 79.94px; width: 400px; height: 201.835px; box-sizing: border-box; border-width: 0.734px; border-radius: 17.615px; opacity: 0.45;
    background: linear-gradient(139.38deg, #f5f0ff 0%, #cdbbea 74.074%); box-shadow: 0 5.872px 17.615px -4.404px rgba(23,60,103,0.12); color: #493379; }
.lv-km--tr .lv-km__mtn { left: -0.73px; top: 65.32px; width: 400px; height: 135.78px; }
.lv-km--tr .lv-km__name { left: 16.88px; top: 13.94px; font-size: 11.009px; }
.lv-km--tr .lv-km__course { left: 307.52px; top: 13.94px; padding: 3.67px 8.807px; border-width: 0.734px; border-radius: 14.679px; font-size: 8.807px; line-height: 13.211px; }
.lv-km--tr .lv-km__dist { left: 16.88px; top: 49.17px; gap: 5.138px; font-size: 10.275px; line-height: 14.679px; }
.lv-km--tr .lv-km__dist b { font-size: 27.89px; line-height: 1.3; }
.lv-km--tr .lv-km__pct { padding: 2.936px 5.872px; border-radius: 7.339px; font-size: 8.073px; }
.lv-km--rr { left: 30px; top: 115.94px; width: 460px; height: 232.11px; box-sizing: border-box; border-width: 0.844px; border-radius: 20.257px;
    background: linear-gradient(139.38deg, #eaf7fc 0%, #aaceea 74.074%); box-shadow: 0 6.752px 20.257px -5.064px rgba(23,60,103,0.12); color: #173c67; }
.lv-km--rr .lv-km__mtn { left: -0.84px; top: 75.12px; width: 460px; height: 156.147px; }
.lv-km--rr .lv-km__name { left: 19.41px; top: 16.04px; font-size: 12.661px; }
.lv-km--rr .lv-km__course { left: 354.5px; top: 16.04px; padding: 4.22px 10.128px; border-width: 0.844px; border-radius: 16.881px; font-size: 10.128px; line-height: 15.193px; }
.lv-km--rr .lv-km__dist { left: 19.41px; top: 56.55px; gap: 5.908px; font-size: 11.817px; line-height: 16.881px; }
.lv-km--rr .lv-km__dist b { font-size: 32.073px; line-height: 1.3; }
.lv-km--rr .lv-km__pct { padding: 3.376px 6.752px; border-radius: 8.44px; font-size: 9.284px; }

/* 디자인에 있는 움직임(1878:9755 · 9756 · 9758 · 9776 · 9785 · 9787) — 코스 선이 그려지고 현재 위치가 따라감 · 2초 반복 */
.lv-km__path { animation: lv-km-trim 2s linear infinite; }
.lv-km--tr .lv-km__path { animation-name: lv-km-trim-tr; }
.lv-km--rr .lv-km__path { animation-name: lv-km-trim-rr; }
.lv-km__pos--tr { animation: lv-km-pos-tr 2s linear infinite; }
.lv-km__pos--rr { animation: lv-km-pos-rr 2s linear infinite; }
@keyframes lv-km-trim-tr {
    0%, 10% { clip-path: inset(0 100% 0 0); visibility: hidden; animation-timing-function: ease-out; }
    10.01% { visibility: visible; }
    68.5%, 100% { clip-path: inset(0 0 0 0); visibility: visible; }
}
@keyframes lv-km-trim-rr {
    0%, 10% { clip-path: inset(0 100% 0 0); visibility: hidden; animation-timing-function: ease-out; }
    10.01% { visibility: visible; }
    79.5%, 100% { clip-path: inset(0 0 0 0); visibility: visible; }
}
@keyframes lv-km-pos-tr {
    0% { translate: -139.45px 25.688px; } 10% { translate: -139.45px 25.688px; } 13% { translate: -125.254px 27.874px; } 16.2% { translate: -110.946px 26.666px; }
    19.55% { translate: -97.166px 22.568px; } 23.2% { translate: -83.914px 16.954px; } 27.15% { translate: -70.697px 11.258px; } 31.5% { translate: -57.045px 6.73px; }
    36.45% { translate: -42.959px 3.788px; } 42.35% { translate: -28.665px 2.176px; } 50% { translate: -14.279px 1.731px; } 68.5% { translate: 0 0; } 100% { translate: 0 0; }
}
@keyframes lv-km-pos-rr {
    0% { translate: -211.009px 48.11px; } 10% { translate: -211.009px 48.11px; } 13.55% { translate: -189.273px 50.608px; } 17.35% { translate: -167.778px 46.442px; }
    21.35% { translate: -147.431px 38.195px; } 25.65% { translate: -127.178px 29.708px; } 30.35% { translate: -105.986px 24.023px; } 35.55% { translate: -84.234px 21.105px; }
    41.45% { translate: -62.292px 20.21px; } 48.4% { translate: -40.682px 16.397px; } 57.5% { translate: -20.068px 8.909px; } 79.5% { translate: 0 0; } 100% { translate: 0 0; }
}
@media (prefers-reduced-motion: reduce) {
    .lv-km__path, .lv-km__pos--tr, .lv-km__pos--rr { animation: none; }
}

/* 02 · 배지 — 획득 창 */
.lv-badge-pop { position: absolute; left: 44px; top: 25.4px; width: 432px; height: 369.2px; overflow: hidden; border-radius: 18px; background: #fff; box-shadow: 0 14.4px 36px rgba(15,56,31,0.15); }
.lv-badge-pop img { position: absolute; }
.lv-badge-pop p { position: absolute; left: 0; width: 100%; text-align: center; color: #0f381f; }
.lv-badge-pop__head { top: 49.7px; font-size: 18px; font-weight: 700; line-height: 27px; }
.lv-badge-pop__name { top: 224px; font-size: 25.2px; font-weight: 800; line-height: 35.1px; letter-spacing: -0.504px; }
.lv-badge-pop__desc { top: 262px; font-size: 12px; font-weight: 400; line-height: 18px; color: #5a6a5f !important; }
.lv-badge-pop__chip { position: absolute; left: 155.2px; top: 294px; width: 121.6px; height: 25.2px; padding: 4.5px 0 0 10.8px; box-sizing: border-box; border-radius: 12.6px; background: #fdf6e1;
    font-size: 12px; font-weight: 600; line-height: 16.2px; color: #987a29; white-space: nowrap; }

/* 03 · 랭킹 — 시상대 셋 */
.lv-podium { position: absolute; width: 156px; height: 262px; box-sizing: border-box; overflow: hidden; border: 1px solid #fff; border-radius: 20px;
    background: linear-gradient(180deg, rgba(255,255,255,0.94) 0%, rgba(255,255,255,0.86) 58%, rgba(250,252,250,0.8) 100%); box-shadow: 0 12px 28px rgba(10,56,33,0.15); text-align: center; }
.lv-podium__band { position: absolute; left: -1px; top: -1px; width: 156px; height: 64px; }
.lv-podium--1 .lv-podium__band { background: linear-gradient(90deg, rgba(255,248,217,0.96), rgba(240,250,242,0.72)); }
.lv-podium--2 .lv-podium__band { background: linear-gradient(90deg, rgba(237,247,255,0.96), rgba(245,250,252,0.72)); }
.lv-podium--3 .lv-podium__band { background: linear-gradient(90deg, rgba(242,237,252,0.96), rgba(237,247,250,0.72)); }
.lv-podium img { position: absolute; left: 35px; top: 13px; width: 84px; height: 78px; object-fit: contain; }
.lv-podium p { position: absolute; left: 0; width: 100%; white-space: nowrap; }
.lv-podium__name { top: 99px; font-size: 15px; font-weight: 700; color: #0f381f; }
.lv-podium__org { top: 120px; font-size: 12px; font-weight: 400; color: #596b5e; }
.lv-podium__km { top: 141px; display: flex; justify-content: center; align-items: baseline; gap: 4px; font-size: 12px; font-weight: 400; color: #596b5e; }
.lv-podium__km b { font-size: 26px; font-weight: 800; letter-spacing: -0.52px; color: #1c809e; }
.lv-podium dl { position: absolute; left: 15px; right: 15px; top: 183px; display: grid; grid-template-columns: 1fr auto; row-gap: 9px; padding-top: 13px; border-top: 1px solid #edf2f0;
    font-size: 12px; font-weight: 600; line-height: 15px; text-align: left; }
.lv-podium dt { color: #596b5e; }
.lv-podium dd { color: #1f3326; text-align: right; }

/* 마무리 CTA (1878:9805) */
.lv-cta { position: relative; height: 494px; overflow: hidden; background: #fff; }
.lv-cta__bg { position: absolute; left: calc(50% - 1185.75px); top: -148.2px; width: 2371.5px; height: 790.4px;
    background: radial-gradient(1185.8px 395.2px at 50% 50%, rgba(15,56,31,0.28), rgba(15,56,31,0)), url("../images/landing-1022/cta-gradient.png") center / cover no-repeat; }
.lv-cta__inner { position: relative; display: flex; flex-direction: column; align-items: center; gap: 36px; padding-top: 171px; }
.lv-cta__title { font-size: 46px; font-weight: 700; line-height: 64px; letter-spacing: -2.3px; color: #eef9ee; text-align: center; }
.lv-cta__actions { display: flex; gap: 12px; }
.lv-cta__btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 186px; height: 52px; box-sizing: border-box; border-radius: 999px; background: #fff;
    font-size: 16px; font-weight: 700; letter-spacing: -0.8px; color: #0f381f; text-decoration: none; white-space: nowrap; }
.lv-cta__btn--line { width: 112px; border: 1.5px solid rgba(255,255,255,0.9); background: transparent; color: #fff; }

/* 퀵 메뉴 (1878:9818) — 화면 오른쪽 · 세로 가운데 고정 · 마우스를 올리면 이름이 펼쳐짐 */
.lv-quick { position: fixed; right: 24px; top: 50%; z-index: 50; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; transform: translateY(-50%); }
.lv-quick__btn { display: flex; flex-direction: row-reverse; align-items: center; justify-content: flex-start; gap: 8px; height: 56px; min-width: 56px; padding: 0 16px; box-sizing: border-box;
    border-radius: 28px; background: #fff; box-shadow: 0 12px 32px rgba(15,56,31,0.14); font-size: 15px; font-weight: 700; color: #0f381f; text-decoration: none; white-space: nowrap; }
.lv-quick__btn--main { background: #228a4f; color: #fff; }
.lv-quick__btn img { flex: 0 0 24px; }
.lv-quick__btn span { display: none; }
.lv-quick__btn:hover span, .lv-quick__btn:focus-visible span { display: inline; }

/* 좁은 화면 — 세로로 쌓음 (디자인은 1440 하나라 개발 판단) */
@media (max-width: 1279px) {
    .lv-hero { height: auto; min-height: 520px; }
    .lv-hero__text { padding: 200px 0 120px; }
    .lv-hero__eyebrow, .lv-hero__title { margin-left: 0; }
    .lv-stats { grid-template-columns: repeat(3, 1fr); }
    .lv-years { flex-wrap: wrap; height: auto; padding-bottom: 40px !important; }
    .lv-point { height: auto; padding-bottom: 80px; }
    .lv-point__inner { flex-direction: column; align-items: center; }
    .lv-point__text { flex: none; height: auto; }
    .lv-checks { margin-top: 32px !important; }
    .lv-people { height: auto; padding-bottom: 80px; }
    .lv-people__body { flex-direction: column; align-items: center; height: auto; }
    .lv-tabs { flex: none; width: min(620px, 100%); }
    .lv-reward { height: auto; padding-bottom: 80px; }
    .lv-carousel { transform-origin: top center; }
}
@media (max-width: 767px) {
    .lv-hero__eyebrow { font-size: 24px; line-height: 36px; }
    .lv-hero__title { font-size: 36px; line-height: 48px; }
    .lv-intro__title, .lv-head__title, .lv-history__title, .lv-point__title { font-size: 32px; line-height: 44px; letter-spacing: -1.2px; }
    .lv-stats { grid-template-columns: repeat(2, 1fr); }
    .lv-point__text, .lv-point__desc, .lv-checks { width: 100%; }
    .lv-shot, .lv-char, .lv-carousel__side { display: none; }
    .lv-tab__line { white-space: normal; }
    .lv-carousel { width: calc(100% - 40px); height: auto; }
    .lv-slide { position: relative; inset: auto; height: auto; padding: 40px 24px; }
    .lv-slide__text { position: static; width: auto; }
    .lv-slide__title { white-space: normal; }
    .lv-slide__desc { width: auto; }
    .lv-art { display: none; }
    .lv-cta__title { font-size: 28px; line-height: 40px; padding: 0 20px; }
    .lv-cta__inner { padding-top: 120px; }
}