/* 간소화 랜딩(/landing/) — 광고 사진 8장을 한 줄로 + 사진마다 작은 반응. 맨 끝은 메인과 같은 ㉒ 창업문의 양식 · ㉓ 고정 상담 줄.
   PC 는 사진 가운데 폭 720px(좌우 여백은 사진마다 가장자리 색을 늘려 채움, 10-28), 휴대폰은 화면 폭 가득.
   겹친 층(.lp-at)의 자리는 사진 원본 픽셀(--x --y --w --h)을 사진 크기(--W --H)로 나눈 백분율 → 화면 폭이 바뀌어도 사진과 같이 줄고 는다.
   잘라 붙인 조각(.lp-cut)은 같은 사진(--img, lp.js 가 사진을 다 받은 뒤 넣음)을 배경으로 깔고 자기 자리만큼만 보여 준다.
   줄임 동작(prefers-reduced-motion)이면 base.css 가 움직임을 다 끄고, 여기 모든 정지 상태는 '마지막 모습'(사진 그대로)이다. */

.lp-body {
  background: var(--c-green-deep) radial-gradient(120% 60% at 50% 0, var(--c-green) 0, var(--c-green-deep) 70%) fixed;
}
.lp { position: relative; max-width: 720px; margin-inline: auto; background: var(--c-black); box-shadow: 0 0 60px rgba(0, 0, 0, .45); }
.lp-sec { position: relative; }
/* PC(721px 이상): 사진은 가운데 720px 그대로, 좌우 여백은 사진마다 그 사진 가장자리 색을 바깥으로 늘린 그림(lpNN-side-l/r.jpg)으로 채워
   초록 바탕 위에 사진 상자가 따로 떠 보이지 않게 한다(10-28 대표님). 옆 그림은 사진과 2px 겹쳐 깔아 이음매가 생기지 않게.
   경로는 미리보기(lp/css/) 기준 ../../assets — 공개용 조립(build.py)이 css/ 로 옮기며 ../assets 로 바꾼다. */
@media (min-width: 721px) {
  .lp { max-width: none; background: none; box-shadow: none; }
  .lp-sec { background-repeat: no-repeat; background-position: left top, right top; background-size: calc(50% - 358px) 100%, calc(50% - 358px) 100%; }
  .lp-sec > .lp-fig { max-width: 720px; margin-inline: auto; }
  #lp01 { background-image: url(../assets/lp/lp01-side-l.jpg), url(../assets/lp/lp01-side-r.jpg); }
  #lp02 { background-image: url(../assets/lp/lp02-side-l.jpg), url(../assets/lp/lp02-side-r.jpg); }
  #lp03 { background-image: url(../assets/lp/lp03-side-l.jpg), url(../assets/lp/lp03-side-r.jpg); }
  #lp04 { background-image: url(../assets/lp/lp04-side-l.jpg), url(../assets/lp/lp04-side-r.jpg); }
  #lp05 { background-image: url(../assets/lp/lp05-side-l.jpg), url(../assets/lp/lp05-side-r.jpg); }
  #lp06 { background-image: url(../assets/lp/lp06-side-l.jpg), url(../assets/lp/lp06-side-r.jpg); }
  #lp07 { background-image: url(../assets/lp/lp07-side-l.jpg), url(../assets/lp/lp07-side-r.jpg); }
  #lp08 { background-image: url(../assets/lp/lp08-side-l.jpg), url(../assets/lp/lp08-side-r.jpg); }
}
.lp-fig { --W: 1254; --H: 1254; position: relative; margin: 0; overflow: hidden; isolation: isolate; background: var(--c-black); }
.lp-fig img { display: block; width: 100%; height: auto; }
.lp-stage { position: relative; }

/* ---------- 자리 잡기 ---------- */
.lp-at {
  position: absolute; display: block; margin: 0; padding: 0;
  left: calc(var(--x) / var(--W) * 100%); top: calc(var(--y) / var(--H) * 100%);
  width: calc(var(--w) / var(--W) * 100%); height: calc(var(--h) / var(--H) * 100%);
}
span.lp-at, .lp-move, .lp-cut, .lp-spark, video.lp-at, .lp-vid { pointer-events: none; }
/* 잘라 붙인 조각: 사진과 똑같은 크기의 판에 같은 사진을 100% 로 깔고, clip-path 로 자기 자리만 남긴다.
   (조각 상자에 맞춰 배경을 늘이면 상자 크기가 화소 단위로 반올림돼 0.2~0.5px 어긋났다 — 10-28 점검) */
.lp-cut {
  position: absolute; inset: 0; display: block;
  background: var(--img, none) 0 0 / 100% 100% no-repeat;
  clip-path: inset(calc(var(--y) / var(--H) * 100%) calc((var(--W) - var(--x) - var(--w)) / var(--W) * 100%)
                   calc((var(--H) - var(--y) - var(--h)) / var(--H) * 100%) calc(var(--x) / var(--W) * 100%));
  transform-origin: calc((var(--x) + var(--w) / 2) / var(--W) * 100%) calc((var(--y) + var(--h) / 2) / var(--H) * 100%);
}
.lp-move { position: absolute; inset: 0; display: block; }

/* 1·6번 영상: 사진과 같은 틀(같은 화면비 · cover). 못 받으면 lp.js 가 지워 아래 사진이 그대로 보인다 */
.lp-vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
/* 아이폰 저전력 모드 등으로 자동재생이 막히면 사파리가 영상 위에 재생 단추(▶)를 그린다 — 꾸밈 영상이라 숨긴다(포스터 = 사진 그대로 보임). 규칙을 나눠 둔다(모르는 선택자가 다른 규칙을 깨지 않게) */
.lp-vid::-webkit-media-controls-start-playback-button { display: none !important; -webkit-appearance: none; }
.lp-vid::-webkit-media-controls { display: none !important; }

/* ---------- 김(냄비 위): 검정 바탕 흰 김 영상(s23/steam.mp4, 426×288)에서 김이 있는 윗부분(가로 60~330 · 세로 0~72)만 크게 보이게 ---------- */
/* 틀(.lp-steam)은 자르기만 한다(쌓임 맥락을 만들지 않게 — 그래야 영상의 screen 섞기가 아래 사진과 섞인다).
   영상은 틀 폭의 426/270 배로 키워 김 부분을 틀에 맞추고, 아래 냄비 테두리 선은 둥근 마스크로 지운다. 사파리는 base.js 가 영상을 빼고(data-nosafari) lp.js 가 아래 CSS 김으로 바꾼다. */
.lp-steam { overflow: hidden; }
.lp-steam > video {
  position: absolute; display: block; max-width: none; top: 0; left: calc(-100% * 60 / 270); width: calc(100% * 426 / 270); height: auto; aspect-ratio: 426 / 288;
  mix-blend-mode: screen; filter: brightness(1.45) contrast(1.25);
  -webkit-mask-image: radial-gradient(ellipse 34% 17% at 46% 8%, #000 45%, transparent 100%);
  mask-image: radial-gradient(ellipse 34% 17% at 46% 8%, #000 45%, transparent 100%);
}
.lp-steam--flip > video { transform: scaleX(-1); transform-origin: 45.8% 0; }
@supports not (mix-blend-mode: screen) { .lp-steam:not(.lp-steam--css) { display: none; } }

/* CSS 김(10-28): 사파리처럼 김 영상이 빠진 곳에 lp.js 가 .lp-steam--css + <i class="lp-puff"> 4개를 넣는다.
   흰 김 덩이가 틀 아래(냄비 위)에서 작게 생겨 위로 오르며 커지고 옅어진다. 섞기 없이 반투명 흰색만, 움직임은 transform·opacity 뿐.
   틀 위·아래 가장자리는 선형 마스크로 흐리게(잘린 선이 안 보이게). 처음 모습·줄임 동작은 투명(= 사진 그대로).
   시작 시점은 lp.js 가 틀마다 다르게 준다(7번 김 세 곳이 똑같이 오르지 않게). */
.lp-steam--css {
  -webkit-mask-image: linear-gradient(to top, transparent 0, #000 16%, #000 50%, transparent 100%);
  mask-image: linear-gradient(to top, transparent 0, #000 16%, #000 50%, transparent 100%);
}
.lp-puff {
  position: absolute; display: block; bottom: -12%; width: 23%; height: 105%; opacity: 0; transform-origin: 50% 100%;
  background:
    radial-gradient(ellipse 34% 30% at 42% 46%, rgba(255, 255, 255, .95) 0, rgba(255, 255, 255, 0) 100%),
    radial-gradient(ellipse 30% 34% at 60% 62%, rgba(255, 255, 255, .8) 0, rgba(255, 255, 255, 0) 100%),
    radial-gradient(ellipse 50% 50% at 50% 54%, rgba(255, 255, 255, .5) 0, rgba(255, 255, 255, .22) 45%, rgba(255, 255, 255, 0) 72%);
  animation: lp-puff-l 4.8s cubic-bezier(.3, .6, .4, 1) infinite;
}
.lp-puff:nth-child(1) { left: 8%; animation-name: lp-puff-r; }
.lp-puff:nth-child(2) { left: 29%; width: 27%; }
.lp-puff:nth-child(3) { left: 50%; animation-name: lp-puff-r; }
.lp-puff:nth-child(4) { left: 69%; }
@keyframes lp-puff-l {
  0% { transform: translate(0, 0) scale(.5, .4); opacity: 0; }
  18% { opacity: 1; }
  55% { opacity: .85; }
  100% { transform: translate(-12%, -62%) scale(1.25, 1.3); opacity: 0; }
}
@keyframes lp-puff-r {
  0% { transform: translate(0, 0) scale(.5, .4); opacity: 0; }
  18% { opacity: 1; }
  55% { opacity: .85; }
  100% { transform: translate(14%, -62%) scale(1.25, 1.3); opacity: 0; }
}

/* ---------- 빛줄기(금색 글자 위만): 글자 모양 마스크(lpNN-shine.png) 안에서 밝은 띠가 왼쪽→오른쪽으로 한 번 지나간다 ---------- */
.lp-shine {
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  background: linear-gradient(104deg, transparent 0 40%, rgba(255, 252, 232, .9) 50%, transparent 60% 100%) no-repeat 100% 0 / 250% 100%;
}
.lp-fig.in .lp-shine { animation: lp-sweep 6s ease-in-out .35s infinite; }
@keyframes lp-sweep { 0% { background-position: 100% 0; } 24%, 100% { background-position: 0 0; } }

/* ---------- 겹친 층 줄(2번 아래 판 · 4번 다섯 줄 · 5번 영수증): 바탕 줄은 처음엔 흐리게 → 화면에 들어오면 조각이 들어와 덮는다 ---------- */
.lp-dim { opacity: 0; }
.lp-dim--dark { background: rgba(10, 6, 3, .64); }
.lp-dim--board { background: rgba(252, 232, 188, .78); }
.js .lp-ready .lp-dim { opacity: 1; }
.js .lp-ready .lp-dim.in { opacity: 0; animation: lp-undim .45s ease-out both; animation-delay: calc(var(--lp-d, 0s) + .3s); }
.js .lp-ready .lp-dim:not(.in) + .lp-move { opacity: 0; }
.js .lp-ready .lp-dim.in + .lp-move { animation: lp-slide .75s cubic-bezier(.2, .7, .2, 1) both; animation-delay: var(--lp-d, 0s); }
.js .lp-ready .lp-dim.in + .lp-rise { animation-name: lp-rise; animation-duration: .7s; }
.js .lp-ready .lp-dim.in + .lp-drop { animation-name: lp-drop; animation-duration: .8s; animation-timing-function: ease-out; }
@keyframes lp-undim { from { opacity: 1; } to { opacity: 0; } }
@keyframes lp-slide { from { transform: translateX(-14%); opacity: 0; } 55% { opacity: 1; } to { transform: none; opacity: 1; } }
@keyframes lp-rise { from { transform: translateY(1.6%); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes lp-drop {
  0% { transform: translateY(-4%); opacity: 0; }
  45% { opacity: 1; }
  62% { transform: translateY(.45%); }
  80% { transform: translateY(-.2%); }
  100% { transform: none; opacity: 1; }
}

/* 4번 노란 화살표: 같은 화살표 모양만 오려(clip-path) 살짝 커졌다 돌아온다 — 커질 때만 원본을 덮으므로 어긋남이 없다 */
.lp-arrow {
  --aL: calc((var(--x) + var(--w) * .018) / var(--W) * 100%);
  --aM: calc((var(--x) + var(--w) * .667) / var(--W) * 100%);
  --aR: calc((var(--x) + var(--w) * .986) / var(--W) * 100%);
  --aT0: calc((var(--y) + var(--h) * .015) / var(--H) * 100%);
  --aT1: calc((var(--y) + var(--h) * .128) / var(--H) * 100%);
  --aC: calc((var(--y) + var(--h) * .503) / var(--H) * 100%);
  --aB1: calc((var(--y) + var(--h) * .879) / var(--H) * 100%);
  --aB0: calc((var(--y) + var(--h) * .985) / var(--H) * 100%);
  clip-path: polygon(var(--aL) var(--aT1), var(--aM) var(--aT1), var(--aM) var(--aT0), var(--aR) var(--aC), var(--aM) var(--aB0), var(--aM) var(--aB1), var(--aL) var(--aB1));
}
.js .lp-ready .lp-dim.in + .lp-move .lp-arrow { animation: lp-beat 2.4s ease-in-out infinite; animation-delay: calc(var(--lp-d, 0s) + 1s + var(--k, 0) * .2s); }
@keyframes lp-beat { 0%, 60%, 100% { transform: none; filter: none; } 28% { transform: scale(1.07); filter: brightness(1.1) saturate(1.1); } }

/* ---------- 3번: 배지 빛 고리(차례로 한 번) · '선착순!!' 도장 흔들림 · 전화 링크 맥박 테두리 ---------- */
.lp-ring {
  border-radius: 999px; opacity: 0;
  box-shadow: 0 0 0 3px #ffe27a, 0 0 18px 5px rgba(255, 210, 80, .75), inset 0 0 14px rgba(255, 236, 150, .6);
}
.lp-fig.in .lp-ring { animation: lp-ring 1.05s ease-out both; animation-delay: calc(.35s + var(--i, 0) * .17s); }
@keyframes lp-ring { 0% { opacity: 0; transform: scale(.97); } 30% { opacity: 1; transform: none; } 100% { opacity: 0; transform: scale(1.05); } }

/* 도장·방패: 둥근 마스크(가장자리 흐리게)로 그 자리만 남긴다 — 흔들리거나 커질 때 네모 모서리가 보이지 않게 */
.lp-stamp, .lp-shield {
  clip-path: none;
  -webkit-mask-image: radial-gradient(closest-side, #000 var(--mk, 82%), transparent 100%);
  mask-image: radial-gradient(closest-side, #000 var(--mk, 82%), transparent 100%);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-size: calc(var(--w) / var(--W) * 100%) calc(var(--h) / var(--H) * 100%);
  mask-size: calc(var(--w) / var(--W) * 100%) calc(var(--h) / var(--H) * 100%);
  -webkit-mask-position: calc(var(--x) / (var(--W) - var(--w)) * 100%) calc(var(--y) / (var(--H) - var(--h)) * 100%);
  mask-position: calc(var(--x) / (var(--W) - var(--w)) * 100%) calc(var(--y) / (var(--H) - var(--h)) * 100%);
}
.lp-stamp { transform-origin: calc((var(--x) + var(--w) / 2) / var(--W) * 100%) calc((var(--y) + var(--h) * .55) / var(--H) * 100%); }
.lp-fig.in .lp-stamp { animation: lp-shake 3.6s ease-in-out 1.4s infinite; }
@keyframes lp-shake {
  0%, 20%, 100% { transform: none; }
  3% { transform: rotate(-4deg) scale(1.06); }
  6.5% { transform: rotate(4deg) scale(1.07); }
  10% { transform: rotate(-3deg) scale(1.06); }
  13.5% { transform: rotate(2deg) scale(1.04); }
  17% { transform: rotate(-.5deg) scale(1.02); }
}

.lp-tel { z-index: 3; border-radius: 14px; -webkit-tap-highlight-color: rgba(255, 236, 0, .18); }
.lp-tel:focus-visible { outline: 3px solid #ffe600; outline-offset: 2px; }
.lp-tel--pulse::after { content: ""; position: absolute; inset: 0; border: 2px solid rgba(255, 236, 0, .95); border-radius: inherit; opacity: 0; pointer-events: none; }
.lp-fig.in .lp-tel--pulse::after { animation: lp-ping 2.2s ease-out 1s infinite; }
@keyframes lp-ping { 0% { opacity: .95; transform: none; } 75%, 100% { opacity: 0; transform: scale(1.04, 1.22); } }

/* ---------- 5번 금화 반짝임(CSS 별빛) ---------- */
.lp-spark {
  position: absolute; display: block; left: calc(var(--x) / var(--W) * 100%); top: calc(var(--y) / var(--H) * 100%);
  width: calc(7% * var(--s, 1)); aspect-ratio: 1; opacity: 0; transform: translate(-50%, -50%) scale(0);
  background:
    radial-gradient(circle, #fff 0 5%, rgba(255, 244, 196, .9) 9%, rgba(255, 220, 120, 0) 26%),
    linear-gradient(90deg, transparent 47.5%, rgba(255, 250, 225, .95) 50%, transparent 52.5%),
    linear-gradient(0deg, transparent 47.5%, rgba(255, 250, 225, .95) 50%, transparent 52.5%);
  -webkit-mask-image: radial-gradient(circle, #000 0 12%, transparent 62%);
  mask-image: radial-gradient(circle, #000 0 12%, transparent 62%);
}
.lp-fig.in .lp-spark { animation: lp-twinkle 3.2s ease-in-out infinite; animation-delay: calc(.4s + var(--i, 0) * .41s); }
@keyframes lp-twinkle {
  0%, 34%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(0) rotate(0deg); }
  14% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(45deg); }
}

/* ---------- 7번: 아주 느린 확대(1 → 1.03). 김·전화 링크가 같은 무대(.lp-stage) 안이라 함께 커져 어긋나지 않는다 ---------- */
.lp-zoom .lp-stage { transform-origin: 50% 60%; }
.lp-zoom.in .lp-stage { animation: lp-zoomin 16s ease-in-out infinite alternate; }
@keyframes lp-zoomin { from { transform: none; } to { transform: scale(1.03); } }

/* ---------- 8번: GPBA 배지 3개를 차례로 지나가는 빛줄기(overlay — 금색은 밝아지고 검정 글자는 그대로) · 방패 살짝 맥박 ---------- */
.lp-gp {
  mix-blend-mode: overlay; opacity: 0;
  background: linear-gradient(104deg, transparent 0 40%, rgba(255, 255, 255, .95) 50%, transparent 60% 100%) no-repeat 100% 0 / 250% 100%;
}
.lp-fig.in .lp-gp { animation: lp-sweep-gp 5.4s ease-in-out infinite; animation-delay: calc(.4s + var(--i, 0) * .35s); }
@keyframes lp-sweep-gp { 0% { background-position: 100% 0; opacity: 1; } 24% { background-position: 0 0; opacity: 1; } 25%, 100% { background-position: 0 0; opacity: 0; } }
.lp-shield { --mk: 86%; }
.lp-fig.in .lp-shield { animation: lp-pulse 2.8s ease-in-out .8s infinite; }
@keyframes lp-pulse { 0%, 100% { transform: none; } 50% { transform: scale(1.03); } }

/* 화면 밖 사진은 반복 움직임을 멈춘다(lp.js 가 .lp-off) */
.lp-off, .lp-off *, .lp-off *::after { animation-play-state: paused !important; }
/* 줄임 동작: base.css 의 '* { animation: none }' 은 ::after 까지는 닿지 않아 여기서 따로 끈다(전화 링크 맥박 테두리) */
@media (prefers-reduced-motion: reduce) {
  .lp-fig *::before, .lp-fig *::after { animation: none !important; }
}