/* =========================================================
   트렌드렌즈 · Landing
   Palette : white / blue / red   ·   Font : Noto Sans KR
   ========================================================= */
:root{
  --ink:#0A1F44;        /* 본문 텍스트 (딥 네이비) */
  --ink-soft:#5A6B8C;   /* 보조 텍스트 */
  --blue:#1E5EFF;       /* 메인 블루 */
  --blue-deep:#0B39C8;  /* 진한 블루 */
  --red:#FF2E4D;        /* 포인트 레드 */
  --paper:#FFFFFF;      /* 배경 = 본문 배경 동일 */
  --mist:#F1F5FF;       /* 연한 블루 톤 블록 */
  --line:#E1E8FA;       /* 구분선 */
  --shadow:0 18px 44px rgba(16,42,110,.12);
  --shadow-sm:0 8px 22px rgba(16,42,110,.09);
  --w:480px;            /* H5 폭 */
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:'Noto Sans KR',sans-serif;
  color:var(--ink);
  background:var(--paper);         /* PC 배경 = 본문 배경 동일 */
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  padding-bottom:96px;             /* 고정 CTA 공간 확보 */
}
img{max-width:100%;display:block}
b{font-weight:900}

/* 중앙 정렬된 H5 컬럼 */
.shell{
  max-width:var(--w);
  margin:0 auto;
  padding:0 22px;
  overflow:hidden;
}

/* ============ 버튼 공통 ============ */
.btn{
  position:relative;overflow:hidden;
  font-family:inherit;font-weight:700;font-size:16px;
  border:none;cursor:pointer;border-radius:15px;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  width:100%;padding:16px 20px;letter-spacing:-.2px;
  transition:transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.btn__ch{border-radius:6px;flex:0 0 auto}
.btn:active{transform:scale(.98)}

/* 버튼 위를 지나가는 하이라이트 (亮光) */
.btn--primary::before,
.btn--dock::before{
  content:"";position:absolute;top:-20%;bottom:-20%;left:0;width:42%;
  pointer-events:none;
  background:linear-gradient(100deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.14) 35%,
    rgba(255,255,255,.62) 50%,
    rgba(255,255,255,.14) 65%,
    rgba(255,255,255,0) 100%);
  transform:translateX(-260%) skewX(-18deg);
  animation:sheen 3.6s cubic-bezier(.4,0,.2,1) infinite;
}
.btn--dock::before{animation-duration:3s;animation-delay:.6s}
@keyframes sheen{
  0%{transform:translateX(-260%) skewX(-18deg)}
  55%,100%{transform:translateX(330%) skewX(-18deg)}
}
/* 마우스를 올리면 하이라이트가 한 번 더 즉시 지나감 */
.btn--primary:hover::before,
.btn--dock:hover::before{animation-duration:1.1s}

.btn--primary{
  color:#fff;
  background:linear-gradient(120deg,var(--blue) 0%,var(--blue-deep) 60%,#0A2AA8 100%);
  box-shadow:0 14px 28px rgba(30,94,255,.34);
  animation:breatheB 3.2s ease-in-out infinite;
}
@keyframes breatheB{
  50%{filter:drop-shadow(0 0 10px rgba(30,94,255,.5)) saturate(1.12)}
}
.btn--primary:hover{transform:translateY(-2px);box-shadow:0 20px 36px rgba(30,94,255,.42)}
.btn__arrow{font-size:14px;transition:transform .2s ease}
.btn--dock:hover .btn__arrow{transform:translateX(4px)}

/* ============ HERO ============ */
.hero{padding:34px 0 8px;text-align:center}
.hero__eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:11.5px;font-weight:700;letter-spacing:.14em;
  color:var(--blue-deep);background:var(--mist);
  padding:7px 14px;border-radius:999px;border:1px solid var(--line);
}
.hero__eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--red);
  box-shadow:0 0 0 4px rgba(255,46,77,.16)}

.brand{display:flex;align-items:center;justify-content:center;gap:9px;margin:22px 0 4px}
.brand__mark{
  width:34px;height:34px;border-radius:10px;
  display:grid;place-items:center;color:#fff;font-size:15px;
  background:linear-gradient(135deg,var(--blue),var(--red));
  box-shadow:0 6px 14px rgba(30,94,255,.3);
  animation:spin 8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
.brand__name{font-size:20px;font-weight:900;letter-spacing:-.5px}
.brand__name b{color:var(--blue)}

.hero__title{
  font-size:34px;font-weight:900;line-height:1.24;letter-spacing:-1.2px;
  margin:14px 0 14px;
}
.hero__title .hl{
  position:relative;color:var(--red);white-space:nowrap;
}
.hero__title .hl::after{
  content:"";position:absolute;left:-2px;right:-2px;bottom:4px;height:11px;
  background:rgba(255,46,77,.16);border-radius:4px;z-index:-1;
}
.hero__sub{color:var(--ink-soft);font-size:15px;max-width:360px;margin:0 auto 26px}

/* Hero 렌즈 무대 (배경 투명 PNG + 뒤에서 번지는 광채) */
.hero__stage{position:relative;margin-bottom:26px}
.hero__stage::before{      /* 렌즈 뒤 오라 */
  content:"";position:absolute;left:50%;top:46%;
  width:72%;aspect-ratio:1;transform:translate(-50%,-50%);
  border-radius:50%;pointer-events:none;z-index:0;
  background:radial-gradient(circle,
    rgba(30,94,255,.30) 0%,
    rgba(122,59,255,.16) 38%,
    rgba(255,46,77,.10) 58%,
    rgba(255,255,255,0) 72%);
  filter:blur(14px);
  animation:aura 5.5s ease-in-out infinite;
}
@keyframes aura{
  50%{transform:translate(-50%,-50%) scale(1.14);opacity:.72}
}
.lens-frame{
  position:relative;z-index:1;
  animation:float 6s ease-in-out infinite;
}
.lens-frame img{
  width:100%;
  filter:drop-shadow(0 16px 26px rgba(16,42,110,.26));
}
.lens-frame__badge{
  /* 이미지가 투명 PNG 라 여백이 아닌 렌즈 아래쪽에 맞춰 배치 */
  position:absolute;left:50%;bottom:2%;transform:translateX(-50%);z-index:3;
  white-space:nowrap;
  display:inline-flex;align-items:center;gap:7px;
  background:rgba(255,255,255,.86);backdrop-filter:blur(6px);
  color:var(--blue-deep);font-weight:700;font-size:13px;
  padding:8px 13px;border-radius:999px;border:1px solid var(--line);
  box-shadow:var(--shadow-sm);
}
.lens-frame__badge i{color:var(--red)}
@keyframes float{50%{transform:translateY(-8px)}}

.hero__chips{display:flex;gap:8px;justify-content:center;margin-top:14px;flex-wrap:wrap}
.chip{
  font-size:12.5px;font-weight:700;color:var(--ink);
  background:#fff;border:1px solid var(--line);border-radius:999px;
  padding:8px 13px;display:inline-flex;align-items:center;gap:7px;
  box-shadow:var(--shadow-sm);
}
.chip i{color:var(--blue)}
.chip,.pill{transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.chip:hover,.pill:hover{transform:translateY(-2px);border-color:#C9D6FB;box-shadow:var(--shadow)}
.hero__note{font-size:12.5px;color:var(--ink-soft);margin-top:12px}

/* ============ 스캔라인 특효 ============ */
.scanline{
  position:absolute;left:0;right:0;top:0;height:34%;pointer-events:none;z-index:2;
  background:linear-gradient(180deg,rgba(30,94,255,0) 0%,rgba(30,94,255,.14) 70%,rgba(30,94,255,.26) 100%);
  border-bottom:1.5px solid rgba(30,94,255,.45);
  /* 좌우 끝을 흐리게 해서 사각형 띠가 아니라 빛의 흐름처럼 보이게 */
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent);
  animation:scan 3.6s ease-in-out infinite;
}
@keyframes scan{
  0%{transform:translateY(-40%);opacity:0}
  20%{opacity:1}
  80%{opacity:1}
  100%{transform:translateY(300%);opacity:0}
}

/* ============ 블록 공통 ============ */
.block{padding:44px 0}
.block--tint{
  background:var(--mist);
  margin:0 -22px;padding:44px 22px;   /* full-bleed within shell */
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.rule{display:flex;align-items:center;justify-content:center;gap:0;margin-bottom:18px}
.rule span{height:2px;width:34px;background:var(--line);border-radius:2px}
.rule i{width:8px;height:8px;border-radius:50%;background:var(--red);margin:0 3px;
  box-shadow:0 0 0 4px rgba(255,46,77,.14)}
.kicker{
  text-align:center;font-size:11.5px;font-weight:700;letter-spacing:.16em;
  color:var(--blue);margin-bottom:8px;
}
.block__title{
  text-align:center;font-size:26px;font-weight:900;line-height:1.32;
  letter-spacing:-.8px;margin-bottom:26px;
}

/* ============ 혜택 리스트 ============ */
.benefits{list-style:none;display:grid;gap:12px}
.benefit{
  display:flex;gap:14px;align-items:flex-start;
  background:#fff;border:1px solid var(--line);border-radius:18px;
  padding:16px 16px;box-shadow:var(--shadow-sm);
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
.benefit:hover{transform:translateY(-3px);border-color:#C9D6FB;box-shadow:var(--shadow)}
.benefit__ic{
  position:relative;overflow:hidden;
  flex:0 0 auto;width:46px;height:46px;border-radius:13px;
  display:grid;place-items:center;font-size:19px;color:#fff;
  background:linear-gradient(135deg,var(--blue),var(--blue-deep));
  box-shadow:0 8px 16px rgba(30,94,255,.28);
}
/* 아이콘 광택: 카드에 마우스를 올리면 한 번 반짝 */
.benefit__ic::after{
  content:"";position:absolute;inset:-40%;pointer-events:none;
  background:linear-gradient(115deg,transparent 42%,rgba(255,255,255,.65) 50%,transparent 58%);
  transform:translateX(-120%);
}
.benefit:hover .benefit__ic::after{animation:icSheen .75s ease-out}
@keyframes icSheen{to{transform:translateX(120%)}}
.benefit:nth-child(2) .benefit__ic{background:linear-gradient(135deg,#3B6BFF,#7A3BFF)}
.benefit:nth-child(3) .benefit__ic{background:linear-gradient(135deg,var(--red),#C81232)}
.benefit:nth-child(4) .benefit__ic{background:linear-gradient(135deg,#1E5EFF,var(--red))}
.benefit h3{font-size:15.5px;font-weight:700;margin-bottom:3px;letter-spacing:-.3px}
.benefit p{font-size:13.5px;color:var(--ink-soft)}

/* ============ 이미지 샷 (커리큘럼/커뮤니티) ============
   배경 투명 PNG 라 카드 프레임 없이 섹션 위에 그대로 떠 있음 */
.shot{
  position:relative;border-radius:22px;overflow:hidden;margin-bottom:24px;
  background:none;border:none;box-shadow:none;
}
.shot img{width:100%;filter:drop-shadow(0 14px 24px rgba(16,42,110,.16))}
.shot__tag{
  position:absolute;right:12px;top:12px;z-index:3;
  display:inline-flex;align-items:center;gap:7px;
  background:rgba(10,31,68,.82);color:#fff;font-size:12px;font-weight:700;
  padding:7px 12px;border-radius:999px;backdrop-filter:blur(4px);
}
.shot__tag i{color:#7FA6FF}

/* ============ 스텝 ============ */
.steps{list-style:none;display:grid;gap:12px}
.step{
  display:flex;gap:14px;align-items:flex-start;
  background:#fff;border:1px solid var(--line);border-radius:16px;padding:15px 16px;
  box-shadow:var(--shadow-sm);
}
.step__no{
  flex:0 0 auto;font-size:20px;font-weight:900;font-style:italic;
  color:var(--blue);min-width:34px;line-height:1.4;
  background:linear-gradient(180deg,var(--blue),var(--red));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.step h3{font-size:15px;font-weight:700;margin-bottom:2px;letter-spacing:-.3px}
.step p{font-size:13.5px;color:var(--ink-soft)}

/* ============ 커뮤니티 pill ============ */
.comm-points{display:flex;flex-wrap:wrap;gap:9px;justify-content:center;margin-bottom:24px}
.pill{
  font-size:13px;font-weight:700;color:var(--ink);
  background:#fff;border:1px solid var(--line);border-radius:999px;
  padding:9px 15px;display:inline-flex;align-items:center;gap:7px;
  box-shadow:var(--shadow-sm);
}
.pill i{color:var(--red)}

/* ============ FOOTER ============ */
.foot{padding:32px 0 20px;text-align:center;border-top:1px solid var(--line)}
.foot__brand{font-size:16px;font-weight:900;margin-bottom:12px}
.foot__brand i{color:var(--blue)}
.foot__desc{font-size:12px;color:var(--ink-soft);max-width:400px;margin:0 auto 18px;line-height:1.7}
.foot__info{display:grid;gap:6px;font-size:12px;color:var(--ink-soft);margin-bottom:18px}
.foot__info i{color:var(--blue);width:16px}
.foot__legal{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.foot__legal a{color:var(--ink);font-size:12.5px;font-weight:700;text-decoration:none}
.foot__legal a:hover{color:var(--blue)}
.foot__legal span{color:var(--line)}
.foot__copy{font-size:11px;color:var(--ink-soft)}

/* ============ 고정 CTA (항상 노출·중앙 정렬) ============ */
.dock{
  position:fixed;left:0;right:0;bottom:0;z-index:40;
  display:flex;justify-content:center;
  padding:12px 16px calc(12px + env(safe-area-inset-bottom));
  background:linear-gradient(180deg,rgba(255,255,255,0),rgba(255,255,255,.95) 40%);
  pointer-events:none;
}
.btn--dock{
  pointer-events:auto;max-width:var(--w);
  color:#fff;font-size:16.5px;
  background:linear-gradient(120deg,var(--red) 0%,#E01236 45%,var(--blue) 130%);
  box-shadow:0 12px 30px rgba(255,46,77,.4);
}
.btn--dock:hover{transform:translateY(-2px);box-shadow:0 18px 38px rgba(255,46,77,.5)}
.btn--dock{animation:breatheR 2.6s ease-in-out infinite}
@keyframes breatheR{
  50%{filter:drop-shadow(0 0 12px rgba(255,46,77,.6)) saturate(1.15)}
}

/* ============ 모달 ============ */
.modal{
  position:fixed;inset:0;z-index:60;display:none;
  align-items:flex-end;justify-content:center;
  background:rgba(10,31,68,.5);backdrop-filter:blur(3px);
  padding:0;
}
.modal.open{display:flex;animation:fade .2s ease}
@keyframes fade{from{opacity:0}to{opacity:1}}
.modal__box{
  width:100%;max-width:var(--w);max-height:82vh;overflow-y:auto;
  background:#fff;border-radius:22px 22px 0 0;
  padding:26px 22px 30px;position:relative;
  box-shadow:0 -20px 50px rgba(10,31,68,.25);
  animation:slideup .28s cubic-bezier(.2,.7,.3,1);
}
@keyframes slideup{from{transform:translateY(40px)}to{transform:translateY(0)}}
.modal__x{
  position:absolute;right:16px;top:16px;width:34px;height:34px;border:none;
  border-radius:50%;background:var(--mist);color:var(--ink);cursor:pointer;font-size:16px;
}
.modal__x:hover{background:var(--line)}
.modal__title{font-size:19px;font-weight:900;margin-bottom:6px;padding-right:36px}
.modal__title::before{content:"";display:block;width:38px;height:3px;border-radius:3px;
  background:linear-gradient(90deg,var(--blue),var(--red));margin-bottom:12px}
.modal__body{font-size:13.5px;color:var(--ink-soft);line-height:1.75}
.modal__body h4{color:var(--ink);font-size:14.5px;font-weight:700;margin:16px 0 5px}
.modal__body p{margin-bottom:8px}

/* ============ Reveal on scroll ============ */
.reveal{opacity:0;transform:translateY(22px)}
.reveal.in{opacity:1;transform:none;transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.3,1)}
/* 리스트는 한 장씩 순차 등장 */
.benefits .reveal.in,.steps .reveal.in{transition-delay:calc(var(--i,0) * .09s)}

@media (prefers-reduced-motion:reduce){
  /* '*' 는 가상요소를 잡지 못하므로 ::before/::after 까지 함께 정지 */
  *,*::before,*::after{animation:none!important}
  .reveal{opacity:1;transform:none}
  .btn--primary::before,.btn--dock::before{opacity:0}   /* 흐르는 하이라이트 숨김 */
  .scanline{display:none}
}

/* 넓은 화면에서도 중앙 컬럼 유지 (배경색 동일) */
@media (min-width:481px){
  body{background:var(--paper)}
}