/* ==========================================================================
   RATLAB 무료특강 랜딩 (#/landing)
   HD현대중공업 메인 구조를 그대로 따랐습니다.
     .lp-biz-frame  : 100% x 100vh, overflow hidden
     .lp-cut        : 100vw x 100vh, padding 40px          (= 화면의 약 93%가 카드)
     .lp-cut-box    : height 100%, border-radius 24px      (풀블리드 카드)
     .lp-cut-info   : 세로 가운데 정렬, 좌우 여백 220px
   ========================================================================== */

.lp{
  --lp-orange:#FF8A00;
  --lp-bg:#050608;
  --lp-bg2:#0d0e12;
  --lp-line:rgba(255,255,255,.12);
  --lp-muted:#9aa1ad;
  --lp-kakao:#FEE500;
  --lp-kakao-ink:#3A1D1D;
  --lp-pad:40px;
  /* 모바일 브라우저는 주소창 때문에 100svh 와 window.innerHeight 가 다릅니다.
     JS 가 실제 높이를 --lp-vh 로 넣어주며, 값이 없을 때만 100svh 로 대체합니다. */
  --lp-vh:100svh;
  --lp-cardh:min(66vh,600px);

  background:var(--lp-bg);
  color:#fff;
  font-family:'Pretendard','Apple SD Gothic Neo',system-ui,-apple-system,'Malgun Gothic',sans-serif;
  word-break:keep-all;
  /* 주의: 여기에 overflow-x:hidden 을 주면 .lp 가 스크롤 컨테이너가 되어
     GSAP ScrollTrigger 의 화면 고정(pin)이 동작하지 않습니다.
     가로 넘침은 .lp-biz-frame / .lp-learn-in 안쪽에서 이미 잘라내고 있습니다. */
}
.lp *{box-sizing:border-box}
.lp img{max-width:100%;display:block}
.lp a{color:inherit;text-decoration:none}
.lp p,.lp h1,.lp h2,.lp h3,.lp span,.lp li{color:inherit}
.lp-wrap{width:min(1240px,92vw);margin:0 auto}
.lp-eyebrow{color:var(--lp-orange);font-weight:800;font-size:clamp(12px,1.4vw,14px);letter-spacing:.22em;margin:0 0 18px}

/* ---------------- 상단 헤더 ---------------- */
.lp-header{
  position:fixed;top:0;left:0;right:0;z-index:60;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:14px min(4vw,32px);
  border-bottom:1px solid transparent;
  transition:background .35s ease,backdrop-filter .35s ease,border-color .35s ease;
}
.lp-header.solid{background:rgba(5,6,8,.82);backdrop-filter:blur(14px);border-bottom-color:var(--lp-line)}
.lp-brand{display:flex;align-items:center;gap:10px;font-weight:900;font-size:clamp(15px,2vw,18px);letter-spacing:-.02em;cursor:pointer}
.lp-brand img{width:30px;height:30px;border-radius:50%}
.lp-nav{display:flex;align-items:center;gap:clamp(10px,2vw,26px)}
.lp-nav .lnk{font-size:14px;font-weight:700;color:#c8cdd6;transition:color .2s;background:none;border:0;cursor:pointer;padding:0}
.lp-nav .lnk:hover{color:#fff}
@media (max-width:860px){.lp-nav .lnk{display:none}}

.lp-kakao{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--lp-kakao);color:var(--lp-kakao-ink);
  font-weight:900;font-size:clamp(13px,1.5vw,15px);
  padding:11px 20px;border-radius:999px;border:0;cursor:pointer;
  box-shadow:0 8px 24px rgba(254,229,0,.18);
  transition:transform .18s ease,box-shadow .18s ease;white-space:nowrap;
}
.lp-kakao:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(254,229,0,.28)}
.lp-kakao svg{width:18px;height:18px;flex:none}
.lp-kakao.lg{padding:16px 30px;font-size:clamp(15px,1.8vw,17px)}

.lp-ghost{
  display:inline-flex;align-items:center;gap:8px;padding:12px 22px;border-radius:999px;
  border:1px solid var(--lp-line);color:#fff;font-weight:800;font-size:14px;cursor:pointer;
  background:rgba(255,255,255,.05);transition:background .2s,border-color .2s;
}
.lp-ghost:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.3)}

/* ---------------- 1. 키비주얼 ---------------- */
.lp-kv-frame{
  position:relative;height:var(--lp-vh);min-height:560px;overflow:hidden;
  transform-origin:50% 50%;will-change:transform,border-radius;background:#000;
}
.lp-kv-frame video,.lp-kv-frame .lp-kv-poster{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;
}
.lp-kv-frame::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(5,6,8,.40) 0%,rgba(5,6,8,.04) 30%,rgba(5,6,8,.70) 76%,rgba(5,6,8,.93) 100%),
    linear-gradient(90deg,rgba(5,6,8,.60) 0%,rgba(5,6,8,.10) 52%,rgba(5,6,8,0) 100%);
}
.lp-kv-text{position:absolute;inset:auto 0 0;z-index:2;padding:0 min(6vw,64px) clamp(90px,14vh,150px)}
.lp-kv-text h1{
  font-size:clamp(28px,6.2vw,76px);line-height:1.12;font-weight:900;letter-spacing:-.035em;margin:0 0 22px;
  text-shadow:0 2px 28px rgba(0,0,0,.6);
}
.lp-kv-text h1 em{font-style:normal;color:var(--lp-orange)}
.lp-kv-sub{
  font-size:clamp(15px,1.9vw,20px);color:#e2e6ec;font-weight:600;line-height:1.65;margin:0 0 34px;max-width:44ch;
  text-shadow:0 2px 18px rgba(0,0,0,.7);
}
.lp-kv-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center}

/* 줄 마스킹 - 애니메이션이 실패해도 글자는 항상 보이도록 기본값은 '보임' */
.lp-mask{display:block;overflow:hidden}
.lp-mask > i{display:block;font-style:normal}
.lp.masking .lp-mask > i{transform:translateY(115%);transition:transform .9s cubic-bezier(.16,1,.3,1)}
.lp.masking .lp-kv-text.in .lp-mask > i{transform:translateY(0)}
.lp.masking .lp-kv-text.in .lp-mask:nth-child(2) > i{transition-delay:.09s}

.lp-scroll{
  position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:3;
  font-size:11px;letter-spacing:.3em;color:#9aa1ad;font-weight:800;
  display:flex;flex-direction:column;align-items:center;gap:8px;
}
.lp-scroll i{display:block;width:1px;height:34px;background:linear-gradient(#9aa1ad,transparent);animation:lpDrop 1.8s ease-in-out infinite}
@keyframes lpDrop{0%{transform:scaleY(.2);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(.2);transform-origin:bottom}}

/* ---------------- 숫자 ---------------- */
.lp-stats{border-top:1px solid var(--lp-line);border-bottom:1px solid var(--lp-line);background:var(--lp-bg2)}
.lp-stats-in{display:grid;grid-template-columns:repeat(4,1fr)}
.lp-stat{padding:clamp(22px,3.4vw,40px) clamp(10px,2vw,24px);text-align:center;border-left:1px solid var(--lp-line)}
.lp-stat:first-child{border-left:0}
.lp-stat b{display:block;font-size:clamp(22px,3.6vw,44px);font-weight:900;color:var(--lp-orange);letter-spacing:-.03em;line-height:1}
.lp-stat span{display:block;margin-top:10px;font-size:clamp(11px,1.2vw,13px);color:var(--lp-muted);font-weight:700}
@media (max-width:640px){
  .lp-stats-in{grid-template-columns:repeat(2,1fr)}
  .lp-stat:nth-child(3){border-left:0}
  .lp-stat:nth-child(n+3){border-top:1px solid var(--lp-line)}
}

/* ---------------- 2. 컷 (가로 이동) ---------------- */
.lp-biz{background:var(--lp-bg)}
.lp-biz-frame{position:relative;width:100%;overflow:hidden}
.lp-biz-track{display:flex;flex-direction:column}

.lp-cut{flex-shrink:0;width:100%;padding:var(--lp-pad)}
.lp-cut-box{
  position:relative;overflow:hidden;border-radius:24px;background:#0b0c10;
  min-height:clamp(420px,64vh,720px);
}
.lp-cut-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
.lp-cut-dim{
  position:absolute;inset:0;z-index:2;
  /* 사진이 잘 보이도록 어둡게 덮는 영역을 글자 쪽(왼쪽)으로만 좁혔습니다 */
  background:
    linear-gradient(90deg,rgba(0,0,0,.72) 0%,rgba(0,0,0,.44) 36%,rgba(0,0,0,.12) 68%,rgba(0,0,0,.05) 100%),
    linear-gradient(180deg,rgba(0,0,0,.28) 0%,rgba(0,0,0,0) 26%,rgba(0,0,0,0) 74%,rgba(0,0,0,.30) 100%);
}
.lp-cut-info{
  position:relative;z-index:3;display:flex;flex-direction:column;justify-content:center;
  width:100%;height:100%;min-height:inherit;padding:clamp(24px,6vw,120px);
}
.lp-cut-no{
  font-size:clamp(44px,7vw,104px);font-weight:900;line-height:.86;letter-spacing:-.05em;margin-bottom:18px;
  color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.42);
}
.lp-cut-cat{
  display:inline-block;align-self:flex-start;margin-bottom:16px;padding:7px 14px;border-radius:999px;
  background:rgba(255,138,0,.14);color:var(--lp-orange);font-size:clamp(12px,1.3vw,14px);font-weight:900;
  border:1px solid rgba(255,138,0,.32);
}
.lp-cut-title{
  font-size:clamp(26px,4.4vw,56px);font-weight:900;letter-spacing:-.035em;line-height:1.25;margin:0;
  text-shadow:0 2px 24px rgba(0,0,0,.65);
}
.lp-cut-title em{font-style:normal;color:var(--lp-orange)}
.lp-cut-desc{
  font-size:clamp(15px,1.6vw,19px);color:#d5dae2;font-weight:600;line-height:1.75;margin:20px 0 0;
  /* 좁은 화면에서 46ch 가 카드 밖으로 밀려 글자가 잘리던 문제 */
  max-width:min(46ch,100%);
  text-shadow:0 2px 18px rgba(0,0,0,.7);
}

/* 텍스트 등장 (활성 컷에서만) */
.lp-gsap .lp-cut-cat,
.lp-gsap .lp-cut-title,
.lp-gsap .lp-cut-desc,
.lp-gsap .lp-cut-no{opacity:0;transform:translateX(70px);transition:opacity .6s ease,transform .6s ease}
.lp-gsap .lp-cut.active .lp-cut-no{opacity:1;transform:translate(0);transition-delay:0s}
.lp-gsap .lp-cut.active .lp-cut-cat{opacity:1;transform:translate(0);transition-delay:.08s}
.lp-gsap .lp-cut.active .lp-cut-title{opacity:1;transform:translate(0);transition-delay:.16s}
.lp-gsap .lp-cut.active .lp-cut-desc{opacity:1;transform:translate(0);transition-delay:.26s}

/* GSAP 활성 시: 화면 고정 + 한 컷이 화면 전체 */
.lp-gsap .lp-biz-frame{height:var(--lp-vh)}
.lp-gsap .lp-biz-track{flex-direction:row;height:100%;width:max-content}
.lp-gsap .lp-cut{width:100vw;height:var(--lp-vh);transform-origin:50% 50%;will-change:transform}
.lp-gsap .lp-cut-box{height:100%;min-height:0}
.lp-gsap .lp-cut-info{min-height:0;height:100%}

.lp-cut-bar{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(255,255,255,.08);display:none;z-index:4}
.lp-gsap .lp-cut-bar{display:block}
.lp-cut-bar i{display:block;height:100%;width:0;background:var(--lp-orange)}

@media (max-width:900px){
  .lp{--lp-pad:16px}
  .lp-cut-box{border-radius:20px}
}

/* ---------------- 3. 증거 ---------------- */
.lp-proof{background:var(--lp-bg2);border-top:1px solid var(--lp-line);overflow:hidden}
.lp-proof-in{padding:clamp(60px,10vw,130px) 0}
.lp-proof-msg{
  width:min(1240px,92vw);margin:0 auto clamp(34px,5vw,64px);
  font-size:clamp(24px,4.4vw,54px);font-weight:900;letter-spacing:-.035em;line-height:1.28;
}
.lp-proof-msg span{color:rgba(255,255,255,.3);transition:color .25s ease}
.lp-photos{width:min(1240px,92vw);margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(10px,1.4vw,18px)}
.lp-photo{margin:0;border-radius:18px;overflow:hidden;border:1px solid var(--lp-line);background:#000;position:relative}
.lp-photo img{aspect-ratio:4/5;height:auto;object-fit:cover;width:100%;opacity:.92;transition:opacity .4s,transform .6s}
.lp-photo:hover img{opacity:1;transform:scale(1.04)}
.lp-photo figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:14px;
  background:linear-gradient(transparent,rgba(0,0,0,.85));
  font-size:clamp(11px,1.2vw,13px);font-weight:800;color:#fff;
}
@media (max-width:820px){.lp-photos{grid-template-columns:repeat(2,1fr)}}

/* 등장 - JS 가 .lp-reveal-on 을 붙였을 때만 숨겼다가 보여줍니다 */
.lp-reveal-on .lp-reveal{
  opacity:0;transform:translateY(110px) rotate(-9deg);
  transition:opacity .75s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1);
}
.lp-reveal-on .lp-reveal.in{opacity:1;transform:none}
.lp-reveal-on .lp-reveal:nth-child(2){transition-delay:.10s}
.lp-reveal-on .lp-reveal:nth-child(3){transition-delay:.20s}
.lp-reveal-on .lp-reveal:nth-child(4){transition-delay:.30s}

/* ---------------- 4. 배우는 것 ---------------- */
.lp-learn{background:var(--lp-bg);border-top:1px solid var(--lp-line)}
.lp-learn-in{padding:clamp(48px,8vw,96px) 0;overflow:hidden}
.lp-learn-head{width:min(1240px,92vw);margin:0 auto clamp(22px,3vw,40px)}
.lp-learn-head h2{font-size:clamp(26px,4.4vw,50px);font-weight:900;letter-spacing:-.035em;margin:0;line-height:1.2}
.lp-learn-head p{color:var(--lp-muted);font-size:clamp(15px,1.9vw,20px);font-weight:600;margin:14px 0 0}

.lp-learn-list{
  display:flex;gap:clamp(12px,1.6vw,20px);
  padding:0 max(4vw,calc((100vw - min(1240px,92vw))/2));
  overflow-x:auto;scroll-snap-type:x mandatory;
  -ms-overflow-style:none;scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.lp-learn-list::-webkit-scrollbar{display:none}

.lp-card{
  flex:0 0 clamp(280px,32vw,440px);scroll-snap-align:center;
  height:var(--lp-cardh);
  background:#111216;border:1px solid var(--lp-line);border-radius:24px;overflow:hidden;
  display:flex;flex-direction:column;
  transition:border-color .3s,transform .3s;
}
.lp-card:hover{border-color:rgba(255,138,0,.5);transform:translateY(-4px)}
.lp-card-img{position:relative;flex:0 0 52%;overflow:hidden;background:#0b0c10}
.lp-card-img img{width:100%;height:100%;object-fit:cover;display:block}
.lp-card-img::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(5,6,8,.08) 0%,rgba(5,6,8,0) 40%,rgba(17,18,22,.92) 100%);
}
.lp-card-body{flex:1;display:flex;flex-direction:column;justify-content:center;padding:clamp(20px,2.4vw,30px);min-height:0}
.lp-card-body b{display:block;font-size:12px;font-weight:900;color:var(--lp-orange);letter-spacing:.14em;margin-bottom:12px}
.lp-card-body h3{font-size:clamp(19px,2.1vw,26px);font-weight:900;letter-spacing:-.025em;margin:0 0 12px;line-height:1.3}
.lp-card-body p{color:var(--lp-muted);font-size:clamp(14px,1.4vw,16px);font-weight:600;line-height:1.65;margin:0}

/* 모바일: 화면 고정 없이 손가락으로 넘기는 방식 (핀 고정은 데스크톱에서만) */
.lp-swipe-hint{
  width:min(1240px,92vw);margin:16px auto 0;display:none;
  color:var(--lp-muted);font-size:12px;font-weight:700;letter-spacing:.04em;
}
@media (max-width:900px){
  .lp-learn-in{padding:clamp(40px,10vw,72px) 0}
  .lp-learn-list{padding:0 16px;gap:12px}
  .lp-card{flex:0 0 84vw;height:min(74vh,640px);border-radius:20px}
  .lp-card-img{flex:0 0 50%}
  .lp-swipe-hint{display:block;padding:0 4px}
}

/* 데스크톱에서 GSAP 이 켜지면 화면을 고정하고 가로로 밀어줍니다 */
@media (min-width:901px){
  .lp-gsap .lp-learn-in{
    height:var(--lp-vh);display:flex;flex-direction:column;justify-content:center;
    padding-top:0;padding-bottom:0;
  }
  .lp-gsap .lp-learn-list{overflow:visible;width:max-content}
  .lp-gsap .lp-card{height:min(66vh,600px)}
}

/* ---------------- 5. 마지막 CTA ---------------- */
.lp-cta{background:linear-gradient(180deg,var(--lp-bg) 0%,#140d04 100%);border-top:1px solid var(--lp-line);padding:clamp(64px,11vw,140px) 0;text-align:center}
.lp-cta h2{font-size:clamp(26px,4.8vw,56px);font-weight:900;letter-spacing:-.035em;line-height:1.22;margin:0 0 18px}
.lp-cta h2 em{font-style:normal;color:var(--lp-orange)}
.lp-cta-lead{color:var(--lp-muted);font-size:clamp(15px,1.9vw,20px);font-weight:600;margin:0 auto clamp(34px,5vw,56px);max-width:46ch;line-height:1.7}
.lp-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(10px,1.4vw,18px);margin:0 0 clamp(34px,5vw,54px);text-align:left}
.lp-step{background:rgba(255,255,255,.04);border:1px solid var(--lp-line);border-radius:20px;padding:clamp(20px,2.4vw,28px)}
.lp-step b{display:block;font-size:11px;letter-spacing:.2em;color:var(--lp-orange);font-weight:900;margin-bottom:12px}
.lp-step h3{font-size:clamp(15px,1.8vw,19px);font-weight:900;margin:0 0 8px;letter-spacing:-.02em}
.lp-step p{color:var(--lp-muted);font-size:13px;font-weight:600;line-height:1.6;margin:0}
@media (max-width:720px){.lp-steps{grid-template-columns:1fr}}
.lp-cta-note{margin-top:20px;color:#6f7683;font-size:12px;font-weight:600}
.lp-cta-sub{margin-top:22px;display:inline-block;color:#c8cdd6;font-size:14px;font-weight:700;border-bottom:1px solid rgba(255,255,255,.25);padding-bottom:2px;background:none;border-left:0;border-right:0;border-top:0;cursor:pointer}

/* ---------------- 우측 고정 오픈채팅 ---------------- */
.lp-side{
  position:fixed;right:clamp(14px,2vw,28px);bottom:clamp(16px,3vh,32px);z-index:70;
  display:flex;align-items:center;gap:10px;
  background:var(--lp-kakao);color:var(--lp-kakao-ink);font-weight:900;
  padding:14px 20px;border-radius:999px;font-size:clamp(13px,1.5vw,15px);border:0;cursor:pointer;
  box-shadow:0 14px 40px rgba(0,0,0,.45);animation:lpBob 3.2s ease-in-out infinite;
}
.lp-side svg{width:22px;height:22px;flex:none}
@keyframes lpBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@media (max-width:600px){
  .lp-side{left:14px;right:14px;bottom:14px;justify-content:center;border-radius:18px;padding:16px}
  .lp-scroll{display:none}
  .lp-kv-text{padding-bottom:clamp(110px,18vh,150px)}
  .lp-kv-actions{flex-direction:column;align-items:stretch}
  .lp-kv-actions .lp-kakao,.lp-kv-actions .lp-ghost{justify-content:center;width:100%}
}

/* ---------------- 푸터 ---------------- */
.lp-foot{background:#05070a;border-top:1px solid var(--lp-line);padding:44px 0 clamp(100px,14vh,120px);color:#6f7683;font-size:12px;line-height:1.85;font-weight:600}
.lp-foot b{color:#aeb4bf}
.lp-foot .lp-links{margin-top:14px;display:flex;gap:16px;flex-wrap:wrap}
.lp-foot .lp-links a,.lp-foot .lp-links button{color:#aeb4bf;border:0;border-bottom:1px solid rgba(255,255,255,.16);background:none;cursor:pointer;padding:0;font:inherit}

@media (prefers-reduced-motion:reduce){
  .lp *{animation:none !important;transition:none !important}
}