/* PUB-01 베리북스란 — 움직임 (디자이너 HTML 「베리북스 서비스 소개」 모션 판의 값 그대로)
   pub-landing-1022.css · pub-landing-1023.css 뒤에 부름 · 동작은 js/pub-landing-1023.js
   움직임 줄이기(prefers-reduced-motion)를 켠 사람에게는 모두 멈춤 */

/* 한 화면씩 넘어가는 스크롤 — 스크립트가 없을 때 CSS 로 섹션 머리에 붙음 · 꼬리말은 끝에 붙음 */
html:has(.lv-page):not(.lv-paged) { scroll-snap-type: y mandatory; }   /* 스크립트가 돌면 휠 · 키보드는 js 가 한 화면씩(붙는 스크롤과 부드러운 넘김이 서로 막아 꺼 둠) */
.lv-page > section, html:has(.lv-page) body > header { scroll-snap-align: start; }
html:has(.lv-page) body > footer { scroll-snap-align: end; }
/* 히어로는 머리말과 한 화면 · 함께하는 기관 띠는 숫자 카드와 한 화면 (디자이너 HTML 의 화면 나눔) */
.lv-page > .lv-hero, .lv-page > .lv-partners { scroll-snap-align: none; }

/* 상단 메뉴 — 따라 내려옴(화면 위에 붙음) · 내리면 그림자 (디자이너 HTML .gnb sticky · .sc) · 섹션 머리는 메뉴 바로 아래 */
html:has(.lv-page) [data-layout="gnb"] { position: sticky; top: 0; z-index: 60; transition: box-shadow .3s; }
html:has(.lv-page) [data-layout="gnb"].is-scrolled { box-shadow: 0 8px 24px rgba(15,56,31,.06); }
.lv-page > section { scroll-margin-top: 124px; }

/* 나타남 — 아래에서 28 올라오며 (화면 예시는 오른쪽에서 48) */
.lv-js .lv-rv { opacity: 0; transform: translateY(28px); transition: opacity 1.1s cubic-bezier(.2,.8,.2,1), transform 1.1s cubic-bezier(.2,.8,.2,1); }
.lv-js .lv-rv--x { transform: translateX(48px); }
.lv-js .lv-rv.is-in { opacity: 1; transform: none; }
/* 한 자씩 — 낱말마다 감추고 글자가 아래에서 올라옴 */
.lv-ty .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.lv-ty .ch { display: inline-block; transform: translateY(110%); transition: transform .9s cubic-bezier(.77,0,.18,1); transition-delay: calc(var(--i) * var(--st, 30ms)); }
.lv-ty--fast { --st: 7ms; }
.lv-ty.is-in .ch { transform: none; }
.lv-ty.is-reset .ch { transition: none; }
/* 체크리스트 구분선 — 왼쪽부터 그어짐 */
.lv-js .lv-dv li + li { border-top: 0; }
.lv-js .lv-dv li { position: relative; }
.lv-js .lv-dv li + li::after { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 1px; background: #dfe5df; transform: scaleX(0); transform-origin: left; transition: transform 1s cubic-bezier(.2,.8,.2,1); }
.lv-js .lv-dv.is-in li + li::after { transform: none; }
.lv-js .lv-dv.is-in li:nth-child(3)::after { transition-delay: .15s; }

/* 히어로 장면 — 넓은 그림 위에 머리(고개 까딱 · 눈 깜빡임) · 나비를 캔버스에 그림 */
.lv-hero__scene { position: absolute; inset: 0; width: auto; height: auto; max-width: none; transform: none; overflow: hidden; background: #d3e7f4 url(../images/landing-1023/motion/hero-plate.webp) no-repeat; background-size: 1829px 776px; background-position: calc(50% + 167.5px) 0; }
.lv-hero__scene canvas, .lv-hero__fill { position: absolute; filter: saturate(1.14); }
.lv-hero__fill { background: url(../images/landing-1023/motion/hero-fill-l.png) 0 0 / 100% 100% no-repeat; }
.lv-hero__fill--r { background-image: url(../images/landing-1023/motion/hero-fill-r.png); }
.lv-hero__scene canvas { left: calc(50% - 747px); top: 0; width: 1829px; height: 776px; }
.lv-hero__butterfly { display: none; }

/* 숫자 카드 — 마우스를 올리면 위로 36 · 초록 그라데이션 · 흰 글 · 숫자가 굴러 올라옴 */
.lv-stat { z-index: 0; outline: none; transition: transform .45s cubic-bezier(.2,.8,.2,1), opacity 1.1s cubic-bezier(.2,.8,.2,1); }
.lv-stat::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(135deg, #2e9a57 0%, #55e896 100%); opacity: 0; transition: opacity .45s; }
.lv-stat :where(p, strong, span, b) { transition: color .45s; }
.lv-js .lv-stat.lv-rv.is-in.is-on, .lv-stat.is-on { transform: translateY(-36px); }
.lv-js .lv-stat.lv-rv.is-in { transition: transform .45s cubic-bezier(.2,.8,.2,1), opacity 1.1s cubic-bezier(.2,.8,.2,1); }
.lv-stat.is-on::before { opacity: 1; }
.lv-stat.is-on :where(p, strong, span, b) { color: #fff !important; }
.lv-stat:focus-visible { box-shadow: 0 0 0 3px #8fddb0; }
/* 굴러 올라오는 숫자 칸 — 단위 글자(18) 규칙이 숫자 칸에 걸려 작은 숫자가 올라가던 것 (2026-10-23 사용자) */
.lv-stat__value strong span { margin: 0; font: inherit; letter-spacing: inherit; color: inherit; }

/* 함께하는 기관 — 로고 띠가 26초에 한 번 흐름 · 마우스를 올리면 멈춤 · 양끝 흐림 */
.lv-partners { position: relative; height: 125px; padding: 0; overflow: hidden; }
.lv-partners__belt { position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: url(../images/landing-1023/motion/partners-belt.webp) 0 6.25px / 1296px 112.5px repeat-x;
    animation: lv-belt 26s linear infinite;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%); }
.lv-partners:hover .lv-partners__belt { animation-play-state: paused; }
@keyframes lv-belt { from { background-position: 0 6.25px; } to { background-position: -648px 6.25px; } }

/* 걸어온 길 — 사진 4장이 1.4초에 걸쳐 바뀌고 천천히 당겨짐 · 해 카드는 3.2초마다 */
.lv-history__hero { background: #2b7a4b; overflow: hidden; }
.lv-history__hero > :not(i) { position: relative; z-index: 1; }
.lv-history__ph { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transform: scale(1.05); transition: opacity 1.4s ease, transform 6s linear; }
.lv-history__ph.is-show { opacity: 1; transform: scale(1); }
.lv-history__ov { position: absolute; inset: 0; 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)); }
.lv-year { transition: transform .9s cubic-bezier(.2,.8,.2,1), background .9s, box-shadow .9s; }
.lv-year > * { transition: opacity .9s ease; }
.lv-year.is-on { margin-top: 8px; transform: translateY(-8px); }

/* Point 화면 예시 — 7초마다 위아래로 8 */
.lv-shot > * { animation: lv-float 7s ease-in-out infinite; }
@keyframes lv-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
/* 「답변 → 역량」 — 4.2초마다 앞 글자 · 화살표 · 뒤 글자 차례로 빛남 */
.lv-shot__badge em { font-style: normal; color: #fff; }
.lv-shot.is-in .lv-shot__badge b { animation: lv-accL 4.2s ease-in-out .8s infinite; }
.lv-shot.is-in .lv-shot__badge em { animation: lv-accR 4.2s ease-in-out .8s infinite; }
.lv-shot.is-in .lv-shot__badge span { animation: lv-accA 4.2s ease-in-out .8s infinite; }
@keyframes lv-accL { 0%, 18% { color: var(--badge-b, #c9b9f6); } 38%, 82% { color: #fff; } 100% { color: var(--badge-b, #c9b9f6); } }
@keyframes lv-accR { 0%, 24% { color: #fff; } 44%, 82% { color: var(--badge-b, #c9b9f6); } 100% { color: #fff; } }
@keyframes lv-accA { 0%, 18% { transform: none; color: rgba(255,255,255,.7); } 31% { transform: translateX(5px); color: var(--badge-b, #c9b9f6); } 44%, 100% { transform: none; color: rgba(255,255,255,.7); } }
/* 역량 육각형 — 값이 바뀌는 그림은 SVG 로 · 가장 높은 역량 이름이 보라 */
.lv-hex__radar { position: absolute; left: 0; top: 0; width: 323px; height: 171px; overflow: visible; display: none; }
.lv-js .lv-hex__radar { display: block; }
.lv-js .lv-hex img[src$="p3-hex-9.svg"], .lv-js .lv-hex .lv-hex__pt { display: none; }
.lv-hex__poly { fill: rgba(106,79,196,.22); stroke: #6a4fc4; stroke-width: 1.9; stroke-linejoin: round; }
.lv-hex__dot { fill: #fff; stroke: #6a4fc4; stroke-width: 1.9; }
.lv-hex span { transition: color .5s, font-weight .5s; }

/* 함께 쓰는 사람들 — 탭이 0.7초에 걸쳐 펼쳐짐 · 캐릭터는 아래에서 살짝 튀어 오름 */
.lv-tab { flex: 0 0 96px; transition: flex-basis .7s cubic-bezier(.65,0,.25,1), background .5s, box-shadow .5s; }
.lv-tab.is-on { flex: 0 0 201px; }
.lv-tab__who, .lv-tab__line { transition: color .5s, font-size .5s, line-height .5s; }
.lv-js .lv-tab__desc { display: block; max-height: 0; margin-top: 0; opacity: 0; overflow: hidden; transition: max-height .7s cubic-bezier(.65,0,.25,1), margin-top .7s cubic-bezier(.65,0,.25,1), opacity .3s; }
.lv-js .lv-tab.is-on .lv-tab__desc { max-height: 90px; margin-top: 12px; opacity: 1; transition: max-height .7s cubic-bezier(.65,0,.25,1), margin-top .7s cubic-bezier(.65,0,.25,1), opacity .5s .3s; }
.lv-char__rig { display: block !important; left: 1px; top: 4px; width: 600px; height: 403px; mix-blend-mode: normal; opacity: 0; transform: translateY(20px) scale(.96); transition: opacity .6s, transform .8s cubic-bezier(.34,1.56,.64,1); pointer-events: none; }
.lv-char__rig.is-on { opacity: 1; transform: none; }
.lv-char__rig canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.lv-char__rig img { display: none; }
/* 스크립트가 안 돌면 피그마 그림 */
html:not(.lv-js) .lv-char__rig canvas { display: none; }
html:not(.lv-js) .lv-char__rig img { display: block; position: absolute; left: 40px; top: 52px; width: 520px; height: auto; mix-blend-mode: multiply; }

/* 보상체계 캐러셀 — 가운데 카드 + 양옆 실제 슬라이드(0.94배 · 45%) · 6초 자동 · 끌어 넘기기 */
.lv-js .lv-carousel__side { display: none; }
.lv-js .lv-slide { display: block; opacity: .45; transition: transform .9s cubic-bezier(.2,.8,.2,1), opacity .9s; cursor: grab; user-select: none; -webkit-user-select: none; touch-action: pan-y; }
.lv-js .lv-slide.is-cur { opacity: 1; }
.lv-js .lv-slide:not(.is-cur) { cursor: pointer; }
.lv-js .lv-slide:not(.is-cur):hover { opacity: .85; }
.lv-js .lv-slide.is-jump { transition: none; }
.lv-js .lv-carousel.is-drag .lv-slide { cursor: grabbing; }
.lv-js .lv-slide .lv-slide__text > * { transition: opacity .35s; }
.lv-js .lv-slide:not(.is-cur) .lv-slide__text > * { opacity: 0; }
.lv-js .lv-slide .lv-art { opacity: 0; transform: translateY(24px); transition: transform 1s cubic-bezier(.2,.8,.2,1) .15s, opacity 1s .15s; }
.lv-js .lv-slide:not(.is-cur) .lv-art { transition-duration: .6s; transition-delay: 0s; }
.lv-js .lv-slide.is-cur .lv-art { opacity: 1; transform: none; }
.lv-ty--title .ch { transition-delay: calc(150ms + var(--i) * 30ms); }
.lv-ty--desc .ch { transition-delay: calc(450ms + var(--i) * 7ms); }
/* 배지 카드 — 튀어나오고 · 물결 · 배지가 3바퀴 돌며 커졌다 작아짐 · 글이 차례로 */
.lv-slide.is-cur .lv-badge-pop { animation: lv-popin .6s cubic-bezier(.34,1.56,.64,1) .25s both; }
.lv-slide.is-cur .lv-badge-pop__head { animation: lv-up .45s ease .55s both; }
.lv-slide.is-cur .lv-badge-pop__rp { animation: lv-rp 1.1s cubic-bezier(.2,.8,.2,1) .7s both; }
.lv-badge-pop__seed { position: absolute; left: 157.5px; top: 85px; width: 117px; height: 117px; }
.lv-badge-pop__seed img { position: static !important; display: block; width: 117px; height: 117px; backface-visibility: visible; }
.lv-slide.is-cur .lv-badge-pop__seed { animation: lv-bdg .7s cubic-bezier(.34,1.56,.64,1) .7s both, lv-hump 1.6s ease-in-out 1.45s both; }
.lv-slide.is-cur .lv-badge-pop__seed img { animation: lv-spin 1.6s cubic-bezier(.6,0,.3,1) 1.45s both; }
.lv-slide.is-cur .lv-badge-pop__name { animation: lv-up .5s ease 1.05s both; }
.lv-slide.is-cur .lv-badge-pop__desc { animation: lv-up .5s ease 1.15s both; }
.lv-slide.is-cur .lv-badge-pop__chip { animation: lv-up .5s ease 1.25s both; }
/* 명예의 전당 — 3위 · 2위 · 1위 차례로 올라오고 폭죽 */
.lv-js .lv-slide:not(.is-cur) .lv-podium { opacity: 0; }
.lv-slide.is-cur .lv-podium--3 { animation: lv-rise .8s cubic-bezier(.34,1.4,.64,1) .9s both; }
.lv-slide.is-cur .lv-podium--2 { animation: lv-rise .8s cubic-bezier(.34,1.4,.64,1) 1.45s both; }
.lv-slide.is-cur .lv-podium--1 { animation: lv-rise1 .9s cubic-bezier(.34,1.5,.64,1) 2s both; }
.lv-fx { position: absolute; left: 0; top: 0; width: 1040px; height: 480px; pointer-events: none; }
@keyframes lv-popin { 0% { opacity: 0; transform: scale(.55); } 100% { opacity: 1; transform: none; } }
@keyframes lv-up { 0% { opacity: 0; transform: translateY(8px); } 100% { opacity: 1; transform: none; } }
@keyframes lv-rp { 0% { opacity: .6; transform: scale(.5); } 100% { opacity: 0; transform: scale(1.15); } }
@keyframes lv-bdg { 0% { opacity: 0; transform: scale(.5); } 100% { opacity: 1; transform: none; } }
@keyframes lv-hump { 0% { scale: 1; } 22% { scale: 1.26; } 70% { scale: 1.26; } 100% { scale: 1; } }
@keyframes lv-spin { from { transform: perspective(600px) rotateY(0deg); } to { transform: perspective(600px) rotateY(1080deg); } }
@keyframes lv-rise { 0% { opacity: 0; transform: translateY(70px) scale(.92); } 100% { opacity: 1; transform: none; } }
@keyframes lv-rise1 { 0% { opacity: 0; transform: translateY(90px) scale(.9); } 100% { opacity: 1; transform: none; } }
/* 점 — 지금 슬라이드는 길게 */
.lv-dots { display: flex; justify-content: center; gap: 8px; margin-top: 28px; }
.lv-dots button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 4px; background: #d5ddd7; cursor: pointer; transition: width .45s, background .45s; }
.lv-dots button.is-on { width: 28px; background: #2e9a57; }

/* 마무리 CTA — 초록 그라데이션이 천천히 돌고 흐름(59 · 37 · 47초) */
.lv-cta__bg { left: calc(50% - 1080px); top: -30%; bottom: -30%; width: 2160px; height: auto; background: none; animation: lv-gA 59s ease-in-out -21s infinite alternate-reverse; will-change: transform; }
.lv-cta__bg i, .lv-cta__bg b { position: absolute; inset: 0; background: url(../images/landing-1023/motion/cta-gradient.webp) center / cover; will-change: transform, opacity; }
.lv-cta__bg i { animation: lv-gB 37s ease-in-out -9s infinite alternate; }
.lv-cta__bg b { opacity: 0; animation: lv-gC 47s ease-in-out -17s infinite alternate; }
@keyframes lv-gA { 0% { transform: rotate(0) scale(1); } 22% { transform: rotate(6deg) scale(1.08); } 47% { transform: rotate(-4deg) scale(1.15); } 71% { transform: rotate(7deg) scale(1.04); } 100% { transform: rotate(-6deg) scale(1.12); } }
@keyframes lv-gB { 0% { transform: translate(0,0); } 18% { transform: translate(-5%,4%); } 39% { transform: translate(4%,7%); } 61% { transform: translate(7%,-4%); } 83% { transform: translate(-3%,-7%); } 100% { transform: translate(2%,3%); } }
@keyframes lv-gC { 0% { opacity: 0; transform: scaleX(-1) translate(0,0); } 27% { opacity: .45; transform: scaleX(-1) translate(5%,-4%); } 58% { opacity: .12; transform: scaleX(-1) rotate(5deg) translate(-4%,3%); } 100% { opacity: .5; transform: scaleX(-1) rotate(-4deg) translate(3%,5%); } }
.lv-cta__btn { transition: transform .25s, box-shadow .25s, background .25s; }
.lv-cta__btn:hover { transform: translateY(-3px); box-shadow: 0 14px 28px rgba(15,56,31,.2); }
.lv-cta__btn--line:hover { background: rgba(255,255,255,.14); box-shadow: none; }

/* 퀵 메뉴 — 400 넘게 내리면 나타남 · 마우스를 올리면 이름이 0.45초에 펼쳐짐 */
.lv-js .lv-quick { opacity: 0; transform: translate(16px, -50%); transition: opacity .5s, transform .5s; pointer-events: none; }
.lv-js .lv-quick.is-show { opacity: 1; transform: translate(0, -50%); pointer-events: auto; }
.lv-quick__btn { padding: 0 16px; gap: 0; overflow: hidden; transition: box-shadow .3s; }
.lv-quick__btn:hover, .lv-quick__btn:focus-visible { padding: 0 16px; box-shadow: 0 16px 40px rgba(15,56,31,.2); }
.lv-quick__btn span, .lv-quick__btn:hover span, .lv-quick__btn:focus-visible span { display: inline-block; max-width: 0; padding-right: 0; opacity: 0; white-space: nowrap; transition: max-width .45s cubic-bezier(.2,.8,.2,1), opacity .3s, padding .45s; }
.lv-quick__btn:hover span, .lv-quick__btn:focus-visible span { max-width: 140px; padding: 0 16px 0 6px; opacity: 1; }

@media (prefers-reduced-motion: reduce) {
    html:has(.lv-page) { scroll-snap-type: none; }
    .lv-page *, .lv-page *::before, .lv-page *::after { animation: none !important; transition-duration: .01ms !important; }
}
@media (max-width: 1279px) {
    html:has(.lv-page) { scroll-snap-type: none; }
    .lv-js .lv-slide:not(.is-cur) { display: none; }
}