/* =============================================================================
   /intro — 스크롤 없이 저절로 도는 모션그래픽
   팔레트 근거: ../TOKENS_bright.md (배경 #E8F3FD = 장면 그림 실측값)
   ============================================================================= */
:root{
  --bg:#E8F3FD; --card:#FFFFFF; --sunk:#F2F8FD;
  --ink:#10243D; --ink-soft:#4A5568; --ink-mute:#6B7C93;
  --teal:#2F9C98; --teal-text:#1F7F7C; --amber:#E0952A;
  --line:#C9DCEB; --line-strong:#A8C4DA;
  --safe-b:env(safe-area-inset-bottom,0px);
}
*,*::before,*::after{box-sizing:border-box}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,
              "Apple SD Gothic Neo","Noto Sans KR",sans-serif;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}

/* ══════════ 무대 ══════════ */
.stage{
  position:relative;height:100svh;overflow:hidden;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
}
:root{--artW:min(100vw,430px);--artTop:max(11svh, calc(58svh - var(--artW) * 1.5 * .37 - 40px))}
.stage__art{position:absolute;left:50%;transform:translateX(-50%);
            /* 마마 9/30: 위로 몰림·자막 위 여백 과다 → 잘림 없이(폭 100%) 장면+자막 묶음을 로고~하단 사이 가운데로.
               자막을 화면 바닥 기준이 아니라 장면 바로 아래(프레임 70% 지점)에 붙인다 */
            width:100%;max-width:430px;aspect-ratio:720/1080;top:var(--artTop);
            -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 12%);
                    mask-image:linear-gradient(to bottom,transparent 0,#000 12%)}
.stage .line{bottom:auto;top:calc(var(--artTop) + var(--artW) * 1.5 * .70)}
/* ★영상 자체가 화면을 채운다★ */
#film{object-fit:contain}
.lay{
  position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
  opacity:0;transition:opacity .22s linear;
}
.lay.is-on{opacity:1}

/* ★루프 파일이 오기 전 임시★ — 정지 이미지에 켄번스(살짝 줌·떠오름)를 준다.
   그림이 완전히 멈춰 있으면 "모션그래픽이 없다" 는 말이 다시 나온다. */
.lay--still.is-on{animation:kenburns 9s ease-in-out infinite alternate}
@keyframes kenburns{
  0%{transform:scale(1) translateY(0)}
  100%{transform:scale(1.045) translateY(-1.2%)}
}

/* ══════════ 로고 ══════════ */
/* ★로고는 영상 위 상단 고정★ — 앞 판은 로고가 전체를 덮었다가 사라지는 구조였는데,
   ★사라지는 순간이 또 하나의 끊김★ 이었다. 계속 얹혀 있으면 화면이 안 끊긴다. */
.hero{
  position:absolute;top:calc(2svh + 8px);left:0;right:0;z-index:5;
  display:flex;justify-content:center;pointer-events:none;
}
/* ★로고 뒤에 옅은 바탕을 깐다★ — 영상의 하늘·구름과 겹쳐 흰 글자가 묻혔다.
   그림자만으로는 부족했다. 알약 모양이라 장면을 덜 가린다. */
.hero > svg{
  background:rgba(255,255,255,.82);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  border-radius:999px;padding:10px 22px 14px;
}
.heroMark{width:min(50vw,200px);height:auto}

/* ══════════ 한 줄 문구 ══════════ */
.line{
  position:absolute;left:24px;right:24px;bottom:calc(13svh + var(--safe-b));z-index:4;
  margin:0;text-align:center;
  font-size:clamp(22px,6.2vw,29px);font-weight:800;letter-spacing:-.035em;line-height:1.35;
  pointer-events:none;
}
/* ★단어가 아래서 튀어 오른다★ — 한 덩어리로 켜면 "나타났다" 로 끝난다 */
.line .w{display:inline-block;transform:translateY(120%);opacity:0}
.line.is-in .w{animation:wordUp .5s cubic-bezier(.2,1.4,.35,1) forwards;
               animation-delay:calc(var(--i) * .07s)}
.line.is-out .w{animation:wordDown .32s ease-in forwards;
                animation-delay:calc(var(--i) * .03s)}
@keyframes wordUp{
  0%{transform:translateY(120%) scale(.94);opacity:0}
  60%{opacity:1}
  100%{transform:translateY(0) scale(1);opacity:1}
}
@keyframes wordDown{
  0%{transform:translateY(0);opacity:1}
  100%{transform:translateY(-70%);opacity:0}
}

.more{
  position:absolute;bottom:calc(20px + var(--safe-b));left:50%;transform:translateX(-50%);
  z-index:5;font-size:13px;color:var(--ink-mute);text-decoration:none;
  border-bottom:1px solid var(--line-strong);padding-bottom:2px;
}

/* ══════════ 정보 ══════════ */
.info{background:var(--card);border-top:1px solid var(--line);
      padding:64px 24px calc(72px + var(--safe-b));max-width:430px;margin:0 auto}
.info__h{margin:0 0 12px;font-size:30px;font-weight:800;letter-spacing:-.03em}
.info__p{margin:0 0 30px;font-size:16px;line-height:1.8;color:var(--ink-soft)}
.cards{list-style:none;margin:0 0 34px;padding:0;display:flex;flex-direction:column;gap:10px}
.card{background:var(--sunk);border:1px solid var(--line);border-radius:14px;
      padding:16px 18px;display:flex;flex-direction:column;gap:5px}
.card__k{font-size:12.5px;font-weight:700;letter-spacing:.02em;color:var(--teal-text)}
.card__v{font-size:16.5px;font-weight:600;letter-spacing:-.01em}
.contact{display:flex;flex-direction:column;gap:10px}
.contact__btn{display:block;text-align:center;padding:16px;border-radius:13px;
  background:var(--teal-text);color:#fff;font-size:16px;font-weight:700;text-decoration:none}
.foot{margin:30px 0 0;font-size:13px;color:var(--ink-mute);text-align:center}
a:focus-visible{outline:3px solid var(--teal-text);outline-offset:3px}

/* =============================================================================
   ★움직임 줄이기★ — 영상을 쓰지 않고 ★정지 이미지★ 로 둔다(기획안·마마 지시).
   ============================================================================= */
@media (prefers-reduced-motion: reduce){
  /* 9/30 마마 PC(Windows 애니메이션 끔)에서 영상이 꺼지고 배치가 깨짐 → 본편 영상·문구·이름표는 그대로 두고
     장식(입자·빛 번짐·줌·단어 튀어오름)만 끈다 */
  .line .w{animation:none !important;transform:none;opacity:1}
}

@media (min-width:520px){
  body{background:#D7E8F6}
  .stage,.info{max-width:430px;margin-left:auto;margin-right:auto}
}


/* =============================================================================
   ★오버레이 모션 레이어★ (2026-09-29, 마마 "딱 봐도 우와~~~ 할 정도로")
   전부 `transform`·`opacity` 만. 위치는 % 라 그림과 함께 움직인다.
   ============================================================================= */
.fx{position:absolute;left:50%;top:var(--artTop);transform:translateX(-50%); /* 영상 상자와 같은 자리 (9/30 레이아웃 변경에 맞춤) */
    width:100%;max-width:430px;aspect-ratio:720/1080;z-index:4;pointer-events:none}

/* ── 검출 라벨 칩 ── */
.chip{
  position:absolute;transform:translate(-50%,-50%) scale(.6);opacity:0;
  background:#2F9C98;color:#fff;font-size:11.5px;font-weight:700;letter-spacing:-.02em;
  padding:4px 9px;border-radius:999px;white-space:nowrap;
  box-shadow:0 2px 8px rgba(16,36,61,.25);
}
.chip.is-on{animation:chipPop .5s cubic-bezier(.2,1.6,.35,1) forwards}
.chip.is-off{animation:chipOut .3s ease-in forwards}
@keyframes chipPop{
  0%{transform:translate(-50%,-50%) scale(.6) translateY(6px);opacity:0}
  60%{transform:translate(-50%,-50%) scale(1.08);opacity:1}
  100%{transform:translate(-50%,-50%) scale(1);opacity:1}
}
@keyframes chipOut{to{transform:translate(-50%,-50%) scale(.9);opacity:0}}

/* ── 4b 점이 늘어난다 (★숫자 대신★ — 공개물 수치 금지) ── */
.fx__dots{position:absolute;inset:0}
.dot{
  position:absolute;width:9px;height:9px;border-radius:50%;
  background:#2F9C98;box-shadow:0 0 0 0 rgba(47,156,152,.5);
  transform:translate(-50%,-50%) scale(0);opacity:0;
}
.dot.is-on{animation:dotIn .5s cubic-bezier(.2,1.7,.35,1) forwards}
@keyframes dotIn{
  0%{transform:translate(-50%,-50%) scale(0);opacity:0;box-shadow:0 0 0 0 rgba(47,156,152,.55)}
  70%{opacity:1}
  100%{transform:translate(-50%,-50%) scale(1);opacity:1;box-shadow:0 0 0 10px rgba(47,156,152,0)}
}

/* ── 7 체크가 그려진다 ── */
.fx__check{
  position:absolute;left:84%;top:13%;width:22%;height:auto; /* 9/30: 움직이는 모니터 대신 하늘 쪽 고정 배지 */
  transform:translate(-50%,-50%);opacity:0;
}
.fx__check.is-on{opacity:1}
.fx__check circle,.fx__check path{stroke-dasharray:100;stroke-dashoffset:100}
.fx__check.is-on circle{animation:draw .55s ease-out forwards}
.fx__check.is-on path{animation:draw .4s ease-out .35s forwards}
@keyframes draw{to{stroke-dashoffset:0}}

/* ── 장면 전환 순간 빛 번짐 ── */
.fx__flash{position:absolute;inset:0;opacity:0;
  background:radial-gradient(ellipse 70% 50% at 50% 45%,rgba(255,255,255,.75),transparent 70%)}
.fx__flash.is-on{animation:flash .5s ease-out forwards}
@keyframes flash{0%{opacity:0}18%{opacity:.85}100%{opacity:0}}

/* ── 가장자리 옅은 입자 ── */
.fx__spark{position:absolute;inset:0;overflow:hidden}
.sp{position:absolute;width:5px;height:5px;border-radius:50%;
    background:rgba(47,156,152,.5);opacity:0;
    animation:spark var(--d) ease-in-out var(--delay) infinite}
@keyframes spark{
  0%,100%{opacity:0;transform:translateY(0) scale(.7)}
  35%{opacity:.75;transform:translateY(-14px) scale(1)}
  70%{opacity:0;transform:translateY(-26px) scale(.8)}
}

/* ── 문구 핵심 단어 밑줄 ── */
.line .w.key{position:relative}
.line .w.key::after{
  content:"";position:absolute;left:0;right:0;bottom:-3px;height:3px;border-radius:2px;
  background:#2F9C98;transform:scaleX(0);transform-origin:0 50%;
}
.line.is-in .w.key::after{
  animation:underline .45s cubic-bezier(.3,.9,.3,1) forwards;
  animation-delay:calc(var(--i) * .07s + .34s);
}
@keyframes underline{to{transform:scaleX(1)}}

/* ── 첫 1초 전체 줌인 ── */
.stage__art.is-open{animation:openZoom 1.2s cubic-bezier(.25,.8,.3,1) forwards}
@keyframes openZoom{0%{transform:translateX(-50%) scale(1.07)}100%{transform:translateX(-50%) scale(1)}}

@media (prefers-reduced-motion: reduce){
  .fx__spark,.fx__flash{display:none !important}
  .stage__art.is-open{animation:none}
}

/* =============================================================================
   ★정리 화면★ — 마마 "마지막에 확실하게 도로로그가 뭔지"
   필름 50.96 에서 멈추고 카드를 순서대로 띄운 뒤 다시 재생한다.
   ★문구는 전부 카탈로그 인쇄 원문★ 이다.
   ============================================================================= */
.wrap{
  position:absolute;inset:0;z-index:6;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;
  padding:calc(2svh + 76px) 22px calc(60px + var(--safe-b));
  background:linear-gradient(180deg,rgba(232,243,253,.88),rgba(232,243,253,.98) 22%);
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
  opacity:0;visibility:hidden;transition:opacity .4s ease,visibility .4s;
}
.wrap.is-on{opacity:1;visibility:visible}

.wrap__card{
  width:100%;max-width:360px;
  background:var(--card);border:1px solid var(--line);border-radius:16px;
  padding:16px 18px;box-shadow:0 4px 14px rgba(16,36,61,.07);
  opacity:0;transform:translateY(16px) scale(.97);
}
/* ★카드가 하나씩 스프링으로 올라온다★ */
.wrap__card.is-in{animation:cardUp .55s cubic-bezier(.2,1.4,.35,1) forwards}
@keyframes cardUp{to{opacity:1;transform:translateY(0) scale(1)}}

.wrap__lead{margin:0;font-size:19px;font-weight:800;line-height:1.45;letter-spacing:-.03em}
.wrap__lead b{color:var(--teal-text)}
.wrap__sub{margin:7px 0 0;font-size:13px;color:var(--ink-soft)}

/* 3단계 */
.wrap__steps{display:flex;flex-direction:column;gap:11px}
.st{display:flex;align-items:center;gap:11px}
/* ★34px 로 뒀다가 그림이 안 읽혔다★ — 원본 512px 를 15:1 로 줄이니 점토 디테일이 사라졌다.
   46px 로 키우고 그림을 꽉 채운다(배경 여백을 줄여 실제 그림이 커지게). */
.st__ic{
  flex:0 0 auto;width:46px;height:46px;border-radius:12px;
  background:#DCF0EF center/40px no-repeat;
}
/* 점토 아이콘이 오면 여기에 넣는다 — 오기 전에는 번호로 대신한다 */
.st__ic[data-ic="shoot"]{background-image:url("img/step1_shoot.webp")}
.st__ic[data-ic="locate"]{background-image:url("img/step2_locate.webp")}
.st__ic[data-ic="check"]{background-image:url("img/step3_check.webp")}
.st b{display:block;font-size:14px;font-weight:700;letter-spacing:-.02em}
.st span{display:block;font-size:12.5px;line-height:1.55;color:var(--ink-soft);margin-top:2px}

/* 결과물 */
.wrap__out{display:flex;flex-direction:column;gap:10px}
.out{border-left:3px solid var(--teal);padding-left:11px}
.out b{display:block;font-size:14px;font-weight:700;letter-spacing:-.02em}
.out span{display:block;font-size:12px;line-height:1.5;color:var(--ink-soft);margin-top:2px}

/* 마무리 */
.wrap__end{text-align:center}
.wrap__logo{width:150px;height:auto;margin-bottom:8px}
.wrap__co{margin:0;font-size:13px;font-weight:600}
.wrap__ct{margin:5px 0 0;font-size:13px;color:var(--teal-text);font-weight:600}


/* ★작은 폰 대비★ — 390×844 에서는 필요 625 / 가용 698 로 들어가지만 여유가 73px 뿐이다.
   iPhone SE(667) 같은 화면에서는 넘친다. 카드 수를 줄이지 않고 ★조금씩 깎아★ 맞춘다. */
@media (max-height:780px){
  .wrap{padding-top:calc(2svh + 58px);padding-bottom:calc(34px + var(--safe-b));gap:9px}
  .wrap__card{padding:13px 15px;border-radius:14px}
  .wrap__lead{font-size:17px}
  .wrap__sub{font-size:12px}
  .wrap__steps{gap:9px}
  .st__ic{width:40px;height:40px;background-size:35px}
  .st span,.out span{font-size:11.5px;line-height:1.45}
  .wrap__out{gap:8px}
  .wrap__logo{width:124px}
}