/* AI-ing index journey — from ax-landing */

.ax-home{
  --ink:#05060a;
  --amber:#ff5e9c;       /* 분홍 포인트 (사이트 테마) */
  --amber-hot:#ff9ec4;
  --slate:#7d9bc4;
  --fg:#eef1f6;
  --fg-dim:#adb6c6;
  --maxw:1180px;
  --ease:cubic-bezier(.16,1,.3,1);
}
.ax-home{
  background:var(--ink);
  color:var(--fg);
  font-family:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  /* overflow-x:hidden 은 sticky 고정을 깨뜨림 — 절대 넣지 말 것 */
  word-break:keep-all;
  overflow-wrap:break-word;
}

.grain{
  position:fixed;inset:-50%;z-index:90;pointer-events:none;
  opacity:.04;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grainShift 1.1s steps(3) infinite;
}
@keyframes grainShift{
  0%{transform:translate(0,0)}33%{transform:translate(-2%,1%)}66%{transform:translate(1%,-2%)}100%{transform:translate(0,0)}
}
.vignette{
  position:fixed;inset:0;z-index:80;pointer-events:none;
  background:
    radial-gradient(130% 100% at 50% 50%,transparent 64%,rgba(0,0,0,.3) 100%),
    linear-gradient(to bottom,rgba(5,6,10,.32),transparent 14%,transparent 90%,rgba(5,6,10,.38));
}

/* 단계형 pin: 섹션 1화면, ScrollTrigger pin 이 스크롤 권한 확보 */
.ax-overview{
  height:100vh;
  height:100dvh;
  position:relative;
  overflow:visible;
  z-index:1;
  touch-action: pan-y;
}
.ax-journey{
  position:relative;
  overflow:visible;
  z-index:1;
  touch-action: pan-y;
  height:auto;
}
.ax-overview-stage{
  position:relative;
  top:0;
  height:100vh;
  height:100dvh;
  overflow:hidden;
  background:#05060a;
  z-index:2;
}
.ax-journey-stage{
  position:relative;
  top:0;
  height:100vh;
  height:100dvh;
  overflow:hidden;
  background:#05060a;
  z-index:2;
}
.ax-journey.is-locked,
.ax-overview.is-locked{
  touch-action: none;
}
.ax-journey-vid{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  background:#05060a;
  filter:saturate(1.06) contrast(1.05);
  transform-origin:50% 45%;
  will-change:transform;
}
.ax-journey-scrim{
  position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(96deg,rgba(5,6,10,.2) 0%,rgba(5,6,10,.08) 42%,transparent 72%),
    linear-gradient(to top,rgba(5,6,10,.28) 0%,transparent 42%);
  opacity:.55;
  transition:none;
}
/* 좌측 카피용 스크림 */
.ax-journey-scrim.has-copy{
  opacity:1;
  background:
    linear-gradient(96deg,rgba(5,6,10,.93) 0%,rgba(5,6,10,.86) 30%,rgba(5,6,10,.42) 54%,rgba(5,6,10,.06) 76%,rgba(5,6,10,.3) 100%),
    linear-gradient(to top,rgba(5,6,10,.48) 0%,transparent 38%);
}
/* 02 우측 카피용 스크림 (거울) */
.ax-journey-scrim.has-copy.is-right{
  background:
    linear-gradient(264deg,rgba(5,6,10,.93) 0%,rgba(5,6,10,.86) 30%,rgba(5,6,10,.42) 54%,rgba(5,6,10,.06) 76%,rgba(5,6,10,.3) 100%),
    linear-gradient(to top,rgba(5,6,10,.48) 0%,transparent 38%);
}

.ax-journey-ui{
  position:relative;z-index:3;height:100%;
  max-width:var(--maxw);margin:0 auto;
  padding:clamp(88px,12vh,120px) clamp(20px,5vw,56px) clamp(60px,9vh,90px);
}
.panel-slot{
  position:relative;
  height:100%;
  width:100%;
}
/* 한 장만 절대배치 — 겹침 방지. 모션은 GSAP이 transform 담당 */
.panel{
  position:absolute;
  left:0;top:0;
  width:min(58ch,600px);
  visibility:hidden;
  pointer-events:none;
  transform-origin:left center;
}
/* 02: 오른쪽 나열 */
.panel[data-panel="1"]{
  left:auto;
  right:0;
  text-align:right;
  transform-origin:right center;
}
.panel[data-panel="1"] .act-index{
  justify-content:flex-end;
}
.panel[data-panel="1"] h2,
.panel[data-panel="1"] .act-target,
.panel[data-panel="1"] .act-list{
  margin-left:auto;
  margin-right:0;
}
.panel[data-panel="1"] .act-list li{
  grid-template-columns:1fr auto;
  direction:rtl;
}
.panel[data-panel="1"] .act-list li > div{
  direction:ltr;
  text-align:right;
}
.panel[data-panel="1"] .act-list .kf-bar{
  transform-origin:right center;
}
.panel.is-on{
  visibility:visible;
  pointer-events:auto;
}

.act-index{
  display:flex;align-items:baseline;gap:16px;
  font-size:11px;letter-spacing:.34em;text-transform:uppercase;color:var(--slate);
  margin-bottom:clamp(14px,2.4vh,22px);
}
.act-index b{
  font-size:clamp(2.1rem,4.6vw,3.4rem);font-weight:200;letter-spacing:-.03em;
  color:var(--amber);line-height:1;
  display:inline-block;
  text-shadow:0 0 40px rgba(255,94,156,.28);
}
.panel h2{
  font-size:clamp(1.55rem,3.5vw,2.9rem);font-weight:250;line-height:1.24;letter-spacing:-.032em;
  max-width:min(20ch,600px);
}
.act-target{
  margin-top:clamp(14px,2.2vh,20px);max-width:min(46ch,600px);
  font-size:clamp(.8rem,1.08vw,.94rem);line-height:1.8;color:var(--fg-dim);font-weight:300;
}
.act-target strong{color:var(--slate);font-weight:500}
.act-list{
  list-style:none;margin-top:clamp(22px,3.8vh,40px);
  display:grid;gap:clamp(12px,1.9vh,18px);
}
.act-list li{
  display:grid;grid-template-columns:auto 1fr;gap:clamp(12px,1.4vw,18px);
  padding-top:clamp(12px,1.9vh,18px);
  border-top:1px solid transparent;
  position:relative;
}
/* Remotion/HyperFrames 스타일: 보더 라인 드로잉 */
.act-list .kf-bar{
  position:absolute;left:0;right:0;top:0;height:1px;
  background:rgba(125,155,196,.28);
  transform:scaleX(0);
  transform-origin:left center;
  pointer-events:none;
}
.act-list .arrow{color:var(--amber);font-size:.95rem;line-height:1.6;opacity:.85;display:inline-block}
.act-list h3{
  font-size:clamp(.94rem,1.32vw,1.1rem);font-weight:600;letter-spacing:-.015em;
  margin-bottom:5px;
}
.act-list p{
  font-size:clamp(.8rem,1.04vw,.9rem);line-height:1.78;color:var(--fg-dim);font-weight:300;
}
.act-list p b{color:var(--amber);font-weight:600}

/* ---------- Kinetic type (Remotion / HyperFrames feel) ---------- */
.kf-line{
  display:block;
  overflow:hidden;
  padding-bottom:.06em; /* descender 잘림 방지 */
}
.kf-line-inner{
  display:block;
  will-change:transform;
  /* blur 필터 잔상 방지 — 항상 선명 */
  filter:none !important;
  -webkit-font-smoothing:antialiased;
}
.kf-word{
  display:inline-block;
  will-change:transform;
  filter:none !important;
}
.kf-num,.kf-kicker{
  filter:none !important;
  -webkit-font-smoothing:antialiased;
}
.kf-mask{
  display:inline-block;
  overflow:hidden;
  vertical-align:bottom;
}
.kf-kicker-track{
  display:inline-block;
  overflow:hidden;
  vertical-align:baseline;
}
.act-index .kf-kicker{
  display:inline-block;
  will-change:transform;
}

/* 사이드 01/02/03 — 복잡도 줄이기 위해 숨김 (휠로만 이동) */
.steps{
  display:none;
  position:absolute;right:clamp(16px,3vw,40px);top:50%;
  translate:0 -50%;z-index:4;
  flex-direction:column;gap:14px;
}
.steps button{
  appearance:none;border:0;background:transparent;cursor:pointer;
  color:var(--slate);font:inherit;
  font-size:11px;letter-spacing:.28em;text-transform:uppercase;
  padding:6px 0;text-align:right;
}
.steps button.is-on{color:var(--amber)}
.steps button span{
  display:inline-block;width:28px;height:1px;margin-right:10px;
  background:currentColor;vertical-align:middle;
  transform:scaleX(.4);transform-origin:right center;
}
.steps button.is-on span{transform:scaleX(1)}

.scroll-hint{
  position:absolute;bottom:40px;left:50%;translate:-50% 0;z-index:5;
  font-size:10px;letter-spacing:.4em;color:var(--slate);text-transform:uppercase;
  display:flex;flex-direction:column;align-items:center;gap:10px;
  pointer-events:none;
}
.scroll-hint i{
  display:block;width:1px;height:40px;
  background:linear-gradient(var(--slate),transparent);
  animation:hintPulse 2.1s var(--ease) infinite;
}
@keyframes hintPulse{0%,100%{opacity:.25;transform:scaleY(.55)}50%{opacity:1;transform:scaleY(1)}}
.scroll-hint.is-hide{visibility:hidden}

/* ---------- 개요: 글귀(mf) + 에이전트 레이어 ---------- */
.ax-overview-stage{
  background:#000;
}
.ax-overview-black,
.ax-journey-black{
  position:absolute;inset:0;z-index:1;
  background:#000;
  opacity:1;
  pointer-events:none;
  transition:background .9s cubic-bezier(.16,1,.3,1);
}
.ax-overview.is-mf-bright .ax-overview-black,
.ax-overview.is-mf-bright .ax-journey-black{
  background:#0a0c12;
}
.ax-journey-vid{transition:opacity .55s ease}

.ax-mf-layer{
  position:absolute;inset:0;z-index:4;
  display:flex;align-items:center;justify-content:center;
  pointer-events:none;
  opacity:0;
  visibility:hidden;
  transition:opacity .35s ease,visibility .35s ease;
}
.ax-overview.is-mf .ax-mf-layer{
  opacity:1;
  visibility:visible;
}
/* 스크롤 유도(개요·서비스 공통): └ 를 45° 기울여 ↓ 화살 */
.ax-overview-stage .scroll-cue,
.ax-overview-stage #overview-scroll-hint,
.ax-journey-stage .scroll-cue,
.ax-journey-stage #scroll-hint{
  position:absolute !important;
  left:50% !important;
  bottom:clamp(32px,6.5vh,52px) !important;
  z-index:30 !important;
  width:14px !important;
  height:14px !important;
  margin:0 !important;
  box-sizing:border-box !important;
  /* 오른쪽+아래 테두리 = L자 → 45° 회전하면 아래를 가리킴 */
  border:0 !important;
  border-right:2.5px solid rgba(255,255,255,.82) !important;
  border-bottom:2.5px solid rgba(255,255,255,.82) !important;
  border-radius:0 !important;
  background:transparent !important;
  /* style.css 의 rotate:/translate: 개별 속성 무력화 */
  rotate:none !important;
  translate:none !important;
  transform:translateX(-50%) rotate(45deg) !important;
  transform-origin:center center !important;
  opacity:.78 !important;
  animation:ovCueBounce 1.8s ease-in-out infinite !important;
  pointer-events:none !important;
  transition:opacity .35s ease,visibility .35s ease !important;
}
.ax-overview-stage .scroll-cue.hide,
.ax-overview-stage #overview-scroll-hint.hide,
.ax-journey-stage .scroll-cue.hide,
.ax-journey-stage #scroll-hint.hide,
.ax-journey-stage .scroll-cue.is-hide,
.ax-journey-stage #scroll-hint.is-hide{
  opacity:0 !important;
  visibility:hidden !important;
  animation:none !important;
}
@keyframes ovCueBounce{
  0%,100%{
    transform:translateX(-50%) translateY(0) rotate(45deg) !important;
    opacity:.78;
  }
  50%{
    transform:translateX(-50%) translateY(9px) rotate(45deg) !important;
    opacity:.32;
  }
}
.ax-mf-layer .mf-line{
  position:absolute;
  left:50%;top:50%;
  width:min(920px,90vw);
  margin:0;
  transform:translate(-50%,-50%);
  text-align:center;
  font-size:clamp(1.15rem,2.8vw,2.05rem);
  font-weight:300;
  line-height:1.65;
  letter-spacing:-.02em;
  color:rgba(255,255,255,.92);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  will-change:opacity,transform,filter;
}
.ax-mf-layer .mf-line.is-on{visibility:visible}
.ax-mf-layer .mf-accent{
  color:#c4bfff;
  font-weight:500;
}

/* ---------- 개요: 전체화면 장면 (한 장씩, 카드 스택 아님) ---------- */
.ax-cards,
.ax-scenes{
  position:absolute;inset:0;z-index:5;
  padding:0;
  opacity:0;visibility:hidden;
  pointer-events:none;
  transition:opacity .4s ease,visibility .4s ease;
}
.ax-overview.is-cards .ax-cards,
.ax-overview.is-cta .ax-cards{
  opacity:1;visibility:visible;
  pointer-events:auto;
}
.ax-overview.is-cards .ax-overview-black,
.ax-overview.is-cta .ax-overview-black{
  background:#05060a;
}
.ax-cards-stage,
.ax-scenes-stage{
  position:relative;
  width:100%;
  max-width:none;
  height:100%;
  margin:0;
}
.ax-card,
.ax-scene{
  position:absolute;
  inset:0;
  width:100%;
  max-width:none;
  border-radius:0;
  overflow:hidden;
  background:#05060a;
  border:none;
  box-shadow:none;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  will-change:transform,opacity;
  transition:
    transform .72s cubic-bezier(.16,1,.3,1),
    opacity .55s ease,
    visibility .55s;
  z-index:2;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:clamp(14px,2.4vh,28px);
  padding:clamp(72px,10vh,96px) clamp(16px,4vw,40px) clamp(56px,8vh,80px);
  box-sizing:border-box;
}
/* 한 장만 표시 — is-stack 은 사용하지 않음 */
.ax-card.is-on,
.ax-scene.is-on,
.ax-card.is-prein,
.ax-scene.is-prein{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  z-index:5;
}
.ax-card.is-stack,
.ax-scene.is-stack{
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
}

.ax-card--from-left{ transform:translateX(-18vw) scale(.98); }
.ax-card--from-right{ transform:translateX(18vw) scale(.98); }
.ax-card--from-bottom{ transform:translateY(12vh) scale(.98); }
.ax-card.is-on,
.ax-scene.is-on{
  transform:translate(0,0) scale(1);
}

/* 전체화면 미디어 */
.ax-scene-media,
.ax-card .ax-card-media{
  position:relative;
  flex:0 1 auto;
  width:min(1100px,92vw);
  max-height:min(62vh,620px);
  aspect-ratio:16 / 9;
  border-radius:12px;
  overflow:hidden;
  background:#0a0b10;
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 24px 64px rgba(0,0,0,.45);
}
.ax-scene-body,
.ax-card .ax-card-body{
  flex:0 0 auto;
  width:min(720px,92vw);
  padding:0;
  text-align:center;
}
.ax-scene-body .ax-card-quote,
.ax-card .ax-card-quote{
  font-size:clamp(1rem,2.1vw,1.28rem);
  line-height:1.55;
  color:rgba(255,255,255,.92);
}

/* 개요 끝 CTA — 카드 비운 뒤 중앙에 서비스 보기만 */
.ax-overview-cta{
  position:absolute;
  inset:0;
  z-index:40;
  display:none;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:16px;
  padding:24px 20px;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .45s ease,visibility .45s;
  background:rgba(5,6,10,.55);
}
.ax-overview-cta.is-on,
.ax-overview.is-cta .ax-overview-cta{
  display:flex !important;
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:auto !important;
}
.ax-overview-cta[hidden]{
  display:none !important;
}
.ax-overview.is-cta .ax-overview-cta[hidden]{
  display:flex !important;
}
.ax-overview.is-cta .ax-cards,
.ax-overview.is-cta .ax-scenes{
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
}
.ax-overview-cta-label{
  margin:0;
  font-size:clamp(.92rem,1.8vw,1.1rem);
  font-weight:300;
  color:rgba(255,255,255,.78);
  text-align:center;
  word-break:keep-all;
}
.ax-overview-cta-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:15px 28px;
  border-radius:3px;
  background:#e61862;
  color:#fff;
  font-weight:700;
  font-size:15px;
  text-decoration:none;
  font-family:Pretendard,sans-serif;
  box-shadow:0 10px 32px rgba(230,24,98,.35);
  transition:filter .2s,transform .2s;
}
.ax-overview-cta-btn:hover{
  filter:brightness(1.06);
  transform:translateY(-1px);
}
.ax-overview{ cursor:pointer; }
.ax-overview.is-cta{ cursor:default; }

.ax-card-media{
  position:relative;
  aspect-ratio:16 / 9;
  background:#0a0b10;
  overflow:hidden;
}
.ax-card-vid,
.ax-card-gif{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
  filter:saturate(1.04) contrast(1.03);
}
.ax-card-body{
  padding:0;
}
.ax-card-quote{
  margin:0;
  font-family:Georgia,"Times New Roman",serif;
  font-style:italic;
  font-size:clamp(1rem,2.1vw,1.28rem);
  line-height:1.55;
  color:rgba(255,255,255,.92);
  word-break:keep-all;
}

@media(max-width:768px){
  /* 모바일도 전체화면 한 장 — 화면 높이 안에 맞춤 */
  .ax-cards,
  .ax-scenes{
    padding:0;
    overflow:hidden;
  }
  .ax-cards-stage,
  .ax-scenes-stage{
    width:100%;
    max-width:none;
    height:100%;
  }
  .ax-card,
  .ax-scene{
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    max-width:none !important;
    margin:0;
    display:flex !important;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:12px;
    padding:64px 14px 52px !important;
    border-radius:0 !important;
    box-shadow:none !important;
    transition:
      transform .7s cubic-bezier(.16,1,.3,1),
      opacity .5s ease,
      visibility .5s !important;
  }
  .ax-card:not(.is-on):not(.is-prein),
  .ax-scene:not(.is-on):not(.is-prein){
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
  }
  .ax-card.is-on,
  .ax-card.is-prein,
  .ax-scene.is-on,
  .ax-scene.is-prein{
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
  }
  .ax-card--from-left{ transform:translateX(-40vw) scale(.97) !important; }
  .ax-card--from-right{ transform:translateX(40vw) scale(.97) !important; }
  .ax-card--from-bottom{ transform:translateY(16vh) scale(.97) !important; }
  .ax-card.is-on,
  .ax-scene.is-on{
    transform:translate(0,0) scale(1) !important;
  }
  .ax-scene-media,
  .ax-card .ax-card-media{
    width:min(96vw,520px) !important;
    max-width:96vw !important;
    max-height:min(42dvh,320px) !important;
    aspect-ratio:16 / 9;
    border-radius:10px;
  }
  .ax-scene-body,
  .ax-card .ax-card-body{
    width:min(94vw,420px);
    text-align:center;
  }
  .ax-card-quote{
    font-size:clamp(.92rem,3.6vw,1.05rem);
    line-height:1.5;
  }
  .ax-overview-cta{ padding:24px 14px; }
  .ax-overview-stage .scroll-cue,
  .ax-overview-stage #overview-scroll-hint{
    width:12px !important;
    height:12px !important;
    bottom:clamp(22px,5vh,36px) !important;
  }
}

.ax-journey-ui,
.steps{transition:opacity .35s ease,visibility .35s}

/* pin 섹션 해시 스크롤 보정 */
#overview,
#journey,
#about,
#cases,
#contact{
  scroll-margin-top:80px;
}

/* ---------- Mobile ---------- */
@media(max-width:768px){
  .ax-journey-ui{
    padding:clamp(72px,10vh,96px) 18px clamp(48px,8vh,72px);
  }
  .panel-slot{width:100%}
  .panel,
  .panel[data-panel="1"]{
    left:0!important;
    right:auto!important;
    width:100%;
    max-width:100%;
    text-align:left!important;
    transform-origin:left center!important;
  }
  .panel[data-panel="1"] .act-index{justify-content:flex-start}
  .panel[data-panel="1"] h2,
  .panel[data-panel="1"] .act-target,
  .panel[data-panel="1"] .act-list{
    margin-left:0;
    margin-right:0;
  }
  .panel[data-panel="1"] .act-list li{
    grid-template-columns:auto 1fr;
    direction:ltr;
  }
  .panel[data-panel="1"] .act-list li > div{
    direction:ltr;
    text-align:left;
  }
  .panel[data-panel="1"] .act-list .kf-bar{
    transform-origin:left center;
  }
  .panel h2{
    font-size:clamp(1.35rem,6.2vw,1.85rem);
    max-width:18ch;
  }
  .act-index b{font-size:clamp(1.7rem,7vw,2.3rem)}
  .act-target{font-size:.82rem;line-height:1.7}
  .act-list{gap:12px;margin-top:18px}
  .act-list h3{font-size:.92rem}
  .act-list p{font-size:.78rem;line-height:1.65}
  .steps{
    right:10px;
    gap:10px;
  }
  .steps button{
    font-size:10px;
    letter-spacing:.2em;
    padding:8px 0; /* 터치 타겟 */
  }
  .scroll-hint{bottom:28px;font-size:9px}
  /* 모바일: 좌측 스크림 조금 더 약하게 (영상 보이게) */
  .ax-journey-scrim.has-copy{
    background:
      linear-gradient(96deg,rgba(5,6,10,.9) 0%,rgba(5,6,10,.78) 42%,rgba(5,6,10,.25) 70%,rgba(5,6,10,.35) 100%),
      linear-gradient(to top,rgba(5,6,10,.55) 0%,transparent 40%);
  }
  .ax-journey-scrim.has-copy.is-right{
    background:
      linear-gradient(96deg,rgba(5,6,10,.9) 0%,rgba(5,6,10,.78) 42%,rgba(5,6,10,.25) 70%,rgba(5,6,10,.35) 100%),
      linear-gradient(to top,rgba(5,6,10,.55) 0%,transparent 40%);
  }
}

@media(prefers-reduced-motion:reduce){
  .grain,.scroll-hint i{animation:none}
  .ax-journey{height:auto}
  .ax-journey-stage{position:relative;height:auto;min-height:100vh}
  .panel{position:relative;top:auto;left:0!important;right:auto!important;visibility:visible;pointer-events:auto;transform:none;margin-bottom:56px;text-align:left!important}
  .steps{display:none}
}