/* 앱 소개 히어로, 상단 네비게이션 */

/* APP INTRO · SECTION 01 — 겨울 히어로 */
#intro{
  --snow:#F7FAFE; --ice:#A9D3EE; --sky:#3D8CD4; --deep:#0C1B2E;
  --line:rgba(12,27,46,.09);
  --dis:'Archivo','Pretendard','Pretendard Variable',sans-serif;
  position:relative;z-index:2;isolation:isolate;overflow:hidden;
  min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;
  background:var(--snow);color:var(--deep);letter-spacing:-.012em}
#intro button{cursor:none}
.site-nav__brand,.site-nav__menu button,.site-nav__cta,.btn{font-family:var(--pre);color:inherit;line-height:1.3;
  -webkit-appearance:none;appearance:none;background:none;border:0}

/* 눈바람 · 오로라 빛 */
.intro__glow{position:absolute;z-index:0;pointer-events:none;border-radius:50%;filter:blur(58px)}
.intro__glow.g1{left:50%;top:36%;width:126vw;height:80vh;transform:translate(-50%,-50%);
  background:radial-gradient(58% 58% at 50% 50%,rgba(150,203,238,.66),rgba(150,203,238,0) 72%)}
.intro__glow.g2{left:20%;top:56%;width:66vw;height:56vh;transform:translate(-50%,-50%);
  background:radial-gradient(52% 52% at 50% 50%,rgba(126,220,214,.34),rgba(126,220,214,0) 72%)}
.intro__glow.g3{left:80%;top:44%;width:62vw;height:54vh;transform:translate(-50%,-50%);
  background:radial-gradient(52% 52% at 50% 50%,rgba(163,175,236,.32),rgba(163,175,236,0) 72%)}
.intro__wind{position:absolute;top:82vh;left:-18%;right:-18%;bottom:-12%;z-index:0;pointer-events:none;filter:blur(24px);opacity:.85;
  background:linear-gradient(101deg,transparent 0 14%,rgba(255,255,255,.9) 27%,transparent 41%,
    transparent 57%,rgba(255,255,255,.62) 69%,transparent 84%);
  animation:drift-sway 26s ease-in-out infinite alternate}
@keyframes drift-sway{from{transform:translate3d(-3.5%,1.6%,0)}to{transform:translate3d(3.5%,-1.6%,0)}}
/* 위쪽 : 스플래시의 밤과 이어지는 새벽 그라데이션 */
.intro__dawn{position:absolute;left:0;right:0;top:0;height:74vh;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,
    var(--ink) 0%,var(--ink) 15%,#0C1A2A 26%,#132539 36%,#1C3654 46%,
    #2E5885 56%,#5388B8 65%,#93C2E3 73%,#CBE2F4 80%,#EDF5FC 87%,rgba(247,250,254,0) 96%)}
.intro__dawn-glow{position:absolute;left:50%;top:66vh;transform:translate(-50%,-50%);
  width:160vw;height:56vh;z-index:0;pointer-events:none;border-radius:50%;filter:blur(56px);
  background:radial-gradient(50% 50% at 50% 50%,rgba(222,240,253,.9),
    rgba(162,206,238,.36) 46%,rgba(162,206,238,0) 74%)}
.intro__floor{position:absolute;left:50%;bottom:-8vh;transform:translateX(-50%);
  width:118vw;height:36vh;z-index:0;pointer-events:none;border-radius:50%;filter:blur(18px);
  background:radial-gradient(50% 50% at 50% 50%,rgba(255,255,255,.96),rgba(255,255,255,0) 70%)}
.intro__dusk{position:absolute;left:0;right:0;bottom:0;z-index:6;pointer-events:none;
  height:clamp(90px,15vh,170px);
  background:linear-gradient(180deg,rgba(247,250,254,0) 0%,rgba(247,250,254,.72) 46%,
    #F7FAFE 84%,#F7FAFE 100%)}

/* 네비게이션 */
.site-nav{height:0;
  --snow:#F7FAFE; --ice:#A9D3EE; --sky:#3D8CD4; --deep:#0C1B2E;
  --line:rgba(12,27,46,.09);
  --dis:'Archivo','Pretendard','Pretendard Variable',sans-serif}
.site-nav__bar{position:fixed;top:0;left:0;right:0;z-index:60;height:58px;
  display:flex;align-items:center;justify-content:space-between;gap:clamp(10px,2.4vw,30px);
  padding:0 clamp(16px,4vw,48px);
  background:rgba(10,18,30,.32);border-bottom:1px solid rgba(255,255,255,.1);
  -webkit-backdrop-filter:blur(18px) saturate(1.3);backdrop-filter:blur(18px) saturate(1.3);
  opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-12px);
  transition:opacity .5s var(--ease),transform .5s var(--ease),visibility .5s,
    background .6s var(--ease),border-color .6s var(--ease)}
.site-nav__bar.show{opacity:1;visibility:visible;pointer-events:auto;transform:none}
/* 밤하늘 위 */
.site-nav__bar .site-nav__brand{color:#fff}
.site-nav__bar .site-nav__brand .logo-mark{color:#7FC8F2}
.site-nav__bar .site-nav__menu button{color:rgba(255,255,255,.66)}
.site-nav__bar .site-nav__menu button::after{background:#fff}
.site-nav__bar .site-nav__menu button:hover,.site-nav__bar .site-nav__menu button.on{color:#fff}
.site-nav__bar .site-nav__cta{background:#fff;color:var(--deep)}
.site-nav__bar .site-nav__cta svg{stroke:var(--deep)}
/* 설원 위 */
.site-nav__bar.light{background:rgba(247,250,254,.78);border-bottom-color:var(--line)}
.site-nav__bar.light .site-nav__brand{color:var(--deep)}
.site-nav__bar.light .site-nav__brand .logo-mark{color:#0082D3}
.site-nav__bar.light .site-nav__menu button{color:rgba(12,27,46,.58)}
.site-nav__bar.light .site-nav__menu button::after{background:#0C1B2E}
.site-nav__bar.light .site-nav__menu button:hover,.site-nav__bar.light .site-nav__menu button.on{color:#0C1B2E}
.site-nav__bar.light .site-nav__cta{background:var(--deep);color:#fff}
.site-nav__bar.light .site-nav__cta svg{stroke:#fff}
.site-nav__bar .site-nav__brand,.site-nav__bar .site-nav__brand svg,.site-nav__bar .site-nav__menu button,.site-nav__bar .site-nav__cta,.site-nav__bar .site-nav__cta svg{
  transition:color .6s var(--ease),background .6s var(--ease),stroke .6s var(--ease),
    transform .35s var(--ease),box-shadow .35s var(--ease)}
.site-nav__brand{display:flex;align-items:center;gap:7px;background:none;border:0;padding:0;
  font-family:var(--dis);font-weight:800;font-size:17px;letter-spacing:-.035em;
  transition:opacity .3s}
.site-nav__brand:hover{opacity:.62}
.site-nav__brand .logo-mark{width:19px;height:19px;flex:0 0 auto;color:#7FC8F2;transition:color .6s var(--ease)}
.logo-mark{fill:currentColor;stroke:none;display:block}
.site-nav__menu{display:flex;gap:clamp(8px,1.8vw,26px);margin:0 auto}
.site-nav__menu button{background:none;border:0;padding:9px 2px;position:relative;white-space:nowrap;
  font-size:14px;font-weight:500;transition:color .3s}
.site-nav__menu button::after{content:'';position:absolute;left:0;right:0;bottom:4px;height:1.5px;
  transform:scaleX(0);transform-origin:0 50%;transition:transform .45s var(--ease)}
.site-nav__menu button:hover::after,.site-nav__menu button.on::after{transform:scaleX(1)}

/* 데모 단계 서브 네비게이션 */
.step-nav{position:relative;z-index:6;margin-top:auto;padding-top:clamp(12px,2vh,22px);
  display:flex;justify-content:center;pointer-events:none}
.step-nav__inner{display:flex;gap:3px;padding:4px;border-radius:100px;pointer-events:auto;flex-wrap:wrap;
  background:rgba(255,255,255,.9);border:1px solid rgba(12,27,46,.08);
  box-shadow:0 14px 30px -18px rgba(12,27,46,.5);
  -webkit-backdrop-filter:blur(18px) saturate(1.5);backdrop-filter:blur(18px) saturate(1.5)}
.step-nav__inner button{border:0;background:none;border-radius:100px;padding:6px clamp(9px,1vw,14px);
  font-size:12.5px;font-weight:700;letter-spacing:-.02em;white-space:nowrap;
  color:rgba(12,27,46,.44);transition:color .35s var(--ease),background .35s var(--ease)}
.step-nav__inner button:hover{color:rgba(12,27,46,.82)}
.step-nav__inner button.on{background:#0C1B2E;color:#fff}
.site-nav__cta{display:inline-flex;align-items:center;gap:7px;white-space:nowrap;
  background:var(--deep);color:#fff;border:0;border-radius:100px;padding:10px 18px;
  font-size:13.5px;font-weight:700;letter-spacing:-.02em;transition:var(--t-base) var(--ease)}
.site-nav__cta svg{width:14px;height:14px;stroke:#fff;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.site-nav__cta:hover{transform:translateY(-2px);box-shadow:0 14px 28px -12px rgba(12,27,46,.6)}

/* 히어로 카피 */
.intro__copy{position:relative;z-index:4;display:flex;flex-direction:column;align-items:center;
  text-align:center;gap:clamp(13px,1.9vh,20px);padding:clamp(320px,62vh,840px) 20px 0}
.intro__eyebrow{font-family:var(--dis);font-size:13px;font-weight:800;
  letter-spacing:.22em;color:var(--sky)}
.intro__title{font-family:var(--kr);font-weight:800;font-size:clamp(35px,6.2vw,82px);
  line-height:1.06;letter-spacing:-.045em;word-break:keep-all}
.intro__title em{font-style:normal;background:linear-gradient(96deg,#0C1B2E 4%,#2C74B8 50%,#6FB2E4 96%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.intro__lead{font-size:clamp(14.5px,1.5vw,18px);line-height:1.82;color:rgba(12,27,46,.6);
  max-width:min(580px,92%);word-break:keep-all}
.intro__actions{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:2px}
.btn{display:inline-flex;align-items:center;gap:8px;border:1px solid transparent;border-radius:100px;
  padding:14px 26px;font-size:15px;font-weight:700;letter-spacing:-.025em;transition:var(--t-base) var(--ease)}
.btn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.btn.pri{background:var(--deep);color:#fff;box-shadow:0 18px 36px -18px rgba(12,27,46,.72)}
.btn.pri:hover{transform:translateY(-3px);box-shadow:0 24px 46px -18px rgba(12,27,46,.78)}
.btn.sec{background:rgba(255,255,255,.68);border-color:rgba(12,27,46,.13);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.btn.sec:hover{background:#fff;border-color:rgba(12,27,46,.22);transform:translateY(-3px)}
.intro__rating{display:flex;align-items:center;gap:9px;font-family:var(--num);
  font-size:12.5px;font-weight:500;color:rgba(12,27,46,.45)}
.intro__stars{display:flex;gap:2.5px}
.intro__stars svg{width:13px;height:13px;fill:var(--sky)}

/* 목업 무대 */
.intro__stage{position:relative;z-index:4;flex:1;display:flex;justify-content:center;align-items:flex-start;
  padding:clamp(16px,3.6vh,42px) 20px 0;min-height:min(54vh,460px)}
.chip-grid{position:absolute;inset:0;pointer-events:none}
.chip{position:absolute;display:flex;align-items:center;gap:10px;white-space:nowrap;
  padding:9px 15px 9px 10px;border-radius:16px;pointer-events:auto;
  background:rgba(255,255,255,.62);
  -webkit-backdrop-filter:blur(18px) saturate(1.6);backdrop-filter:blur(18px) saturate(1.6);
  box-shadow:0 22px 44px -22px rgba(12,27,46,.36),inset 0 1px 0 rgba(255,255,255,.9);
  animation:chip-float 7.2s ease-in-out infinite}
.chip .ic{width:31px;height:31px;flex:0 0 auto;border-radius:11px;display:grid;place-items:center;
  background:linear-gradient(145deg,#E4F1FC,#BEDDF4);box-shadow:inset 0 1px 0 #fff}
.chip .ic svg{width:15px;height:15px;stroke:#2C74B8;fill:none;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.chip .ic+span{display:block;min-width:0}
.chip b{display:block;font-size:13px;font-weight:700;letter-spacing:-.028em;color:var(--deep)}
.chip b+span{display:block;font-size:11px;font-weight:500;color:rgba(12,27,46,.5);margin-top:1px}
.chip.p1{left:3%;top:3%;animation-duration:7.8s}
.chip.p2{left:8%;top:36%;animation-duration:8.6s;animation-delay:-1.4s}
.chip.p3{right:3%;top:1%;animation-duration:8.2s;animation-delay:-.7s}
.chip.p4{right:7%;top:33%;animation-duration:7.4s;animation-delay:-2.1s}
.chip.p5{left:19%;top:64%;animation-duration:9s;animation-delay:-3s}
.chip.p6{right:18%;top:60%;animation-duration:8.1s;animation-delay:-1.9s}
@keyframes chip-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}

/* 아이폰 목업 */
.intro__device{position:relative;z-index:5;display:flex;justify-content:center;align-items:flex-end}
.intro__phone{position:relative;width:clamp(210px,20.5vw,266px);aspect-ratio:9/19.2;padding:7px;
  border-radius:clamp(30px,3vw,40px);background:linear-gradient(160deg,#243B55,#0A1523 52%,#1B3049);
  box-shadow:0 50px 84px -36px rgba(9,26,48,.6),0 12px 28px -14px rgba(9,26,48,.4),
    inset 0 0 0 1px rgba(255,255,255,.17);
  animation:phone-float 9s ease-in-out infinite}
@keyframes phone-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-13px)}}
.intro__phone-island{position:absolute;top:15px;left:50%;transform:translateX(-50%);width:31%;height:15px;
  border-radius:10px;background:#0A1523;z-index:3}
.intro__screen{position:relative;height:100%;overflow:hidden;border-radius:clamp(24px,2.5vw,34px);
  background:linear-gradient(180deg,#FAFCFF,#E9F2FA);display:flex;flex-direction:column;
  font-size:clamp(7.3px,.71vw,9.1px);color:var(--deep);line-height:1.35}
.ui-status{display:flex;justify-content:space-between;align-items:center;padding:1.5em 1.7em .2em;
  font-weight:700;font-size:1.05em}
.ui-status .sig{display:flex;align-items:flex-end;gap:.22em}
.ui-status .sig i{display:block;width:.28em;background:var(--deep);border-radius:.1em}
.ui-status .sig i:nth-child(1){height:.34em} .ui-status .sig i:nth-child(2){height:.55em}
.ui-status .sig i:nth-child(3){height:.76em} .ui-status .sig i:nth-child(4){height:.97em;opacity:.3}
.ui-head{display:flex;align-items:flex-start;justify-content:space-between;gap:.6em;padding:1.4em 1.5em .9em}
.ui-head .pl{font-size:1.4em;font-weight:800;letter-spacing:-.035em}
.ui-head .dt{font-size:.98em;opacity:.48;margin-top:.3em;font-weight:500}
.ui-weather{display:flex;align-items:center;gap:.3em;flex:0 0 auto;padding:.45em .72em;border-radius:1em;
  background:rgba(61,140,212,.11);color:#2C74B8;font-weight:700;font-size:1em}
.ui-summary{position:relative;overflow:hidden;margin:0 1.2em;padding:1.15em 1.25em;border-radius:1.5em;
  color:#fff;background:linear-gradient(140deg,#4F9EE0,#2A6CB0 58%,#1C4C82);
  box-shadow:0 1em 1.7em -.9em rgba(28,76,130,.65)}
.ui-summary .k{font-size:.98em;font-weight:600;opacity:.82}
.ui-summary .v{font-family:var(--num);font-size:2.4em;font-weight:600;letter-spacing:-.03em;
  line-height:1.04;margin-top:.14em}
.ui-summary .v s{text-decoration:none;font-size:.4em;font-weight:700;opacity:.86;margin-left:.28em}
.ui-summary .m{display:flex;gap:.9em;margin-top:.5em;font-size:.95em;font-weight:600;opacity:.84}
.ui-summary svg{position:absolute;right:-.4em;bottom:-.3em;width:9.5em;height:3.6em;opacity:.45;
  stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ui-list{margin:1.2em 1.2em 0}
.ui-list__title{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:.72em;
  font-size:1.08em;font-weight:800;letter-spacing:-.03em}
.ui-list__title s{text-decoration:none;font-size:.85em;font-weight:600;color:#2C74B8}
.ui-row{display:flex;align-items:center;gap:.65em;margin-bottom:.5em;padding:.65em .85em;
  border-radius:1em;background:#fff;box-shadow:0 .45em 1em -.55em rgba(12,27,46,.18)}
.ui-row i{width:.6em;height:.6em;border-radius:50%;flex:0 0 auto}
.ui-row b{font-size:1.05em;font-weight:700;letter-spacing:-.025em}
.ui-row span{margin-left:auto;padding:.3em .62em;border-radius:.8em;font-size:.9em;font-weight:700}
.ui-row .ok{background:rgba(61,140,212,.13);color:#2C74B8}
.ui-row .mid{background:rgba(226,150,45,.18);color:#A2650B}
.ui-row .off{background:rgba(12,27,46,.07);color:rgba(12,27,46,.45)}
.ui-tabs{margin-top:auto;display:flex;justify-content:space-around;padding:.9em 1em 1.6em;
  background:rgba(255,255,255,.88);border-top:1px solid rgba(12,27,46,.07)}
.ui-tabs i{display:flex;flex-direction:column;align-items:center;gap:.35em;font-style:normal;
  font-size:.85em;font-weight:700;color:rgba(12,27,46,.32)}
.ui-tabs i.on{color:#2C74B8}
.ui-tabs svg{width:1.55em;height:1.55em;stroke:currentColor;fill:none;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}

/* 스크롤에 맞춰 하나씩 등장 */
.reveal{opacity:0;transform:translateY(42px);
  transition:opacity .5s var(--ease),transform .5s var(--ease)}
.reveal.on{opacity:1;transform:none;
  transition:opacity 1.1s var(--ease),transform 1.1s var(--ease)}
.intro__title.reveal.on{transition-delay:.09s}
.intro__lead.reveal.on{transition-delay:.18s}
.intro__actions.reveal.on{transition-delay:.27s}
.intro__rating.reveal.on{transition-delay:.36s}
.chip.reveal{transform:none}          /* 카드는 떠다니는 움직임과 겹치지 않게 투명도만 */
.chip.p3.reveal{transition-delay:.06s} .chip.p2.reveal{transition-delay:.1s}
.chip.p4.reveal{transition-delay:.16s} .chip.p5.reveal{transition-delay:.22s}
.chip.p6.reveal{transition-delay:.28s}

/* 반응형 */
@media (max-width:1280px){.chip.p5,.chip.p6{display:none}}
@media (max-width:1024px){.chip.p2,.chip.p4{display:none}}
@media (max-width:860px){
  .site-nav__menu{display:none}
  .step-nav__inner button{padding:6px 9px;font-size:11.5px}
  .intro__stage{flex-direction:column;align-items:center;justify-content:flex-start}
  .chip-grid{position:static;display:flex;flex-wrap:wrap;justify-content:center;gap:8px;
    margin-bottom:clamp(14px,3vh,26px)}
  .chip{position:static;display:inline-flex;animation:none;padding:8px 13px 8px 9px}
  .chip.p5,.chip.p6{display:none}
  .chip.p2,.chip.p4{display:inline-flex}
  .intro__phone{width:min(64vw,230px)}
}
@media (max-width:640px){
  .chip.p2,.chip.p4{display:none}
  .btn{padding:13px 22px;font-size:14px}
}
@media (prefers-reduced-motion:reduce){
  #intro *,#intro *::before,#intro *::after{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
}