/* ===== HOTstore landing — flowing-ribbon showcase ===== */
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.css');

:root{
  --green:#13C18B;          /* minty emerald (reference) */
  --green-600:#0FA877;
  --green-700:#0B8A61;
  --green-50:#E7FAF3;
  --green-100:#C8F3E5;
  --ink:#14201B;
  --ink-2:#3C4843;
  --muted:#7C8782;
  --line:#ECEFEC;
  --bg:#FFFFFF;
  --soft:#F4F8F6;

  --accent:#13C18B;
  --accent-600:#0FA877;
  --accent-50:#E7FAF3;
  --accent-100:#C8F3E5;
  --accent-ink:#0a4030;

  --ghost:#F0F4F1;          /* faint background type */

  --shadow-phone:0 40px 90px -30px rgba(20,32,27,.45);
  --shadow-sm:0 2px 10px rgba(20,32,27,.06);
  --shadow-md:0 18px 50px -16px rgba(20,32,27,.22);

  --maxw:1240px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
/* 고정 헤더 높이만큼 앵커 점프 오프셋 — #top(로고)/네비(#b0x)/다운로드로 이동 시
   섹션 상단이 고정 헤더 밑에 가려져 잘리는 현상 방지 */
#top,#b01,#b02,#b03,#b04,#b05,#download{scroll-margin-top:96px;}
body{
  margin:0;
  font-family:'Pretendard','Pretendard Variable',-apple-system,system-ui,sans-serif;
  color:var(--ink);background:var(--bg);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;cursor:pointer;border:none;background:none;}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 32px;}

/* type */
.eyebrow{font-size:13px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--accent-600);}
.h1{font-size:clamp(40px,6vw,80px);line-height:1.0;font-weight:800;letter-spacing:-.035em;text-wrap:balance;}
.h2{font-size:clamp(32px,4.6vw,60px);line-height:1.04;font-weight:800;letter-spacing:-.03em;text-wrap:balance;}
.h3{font-size:clamp(20px,2.3vw,28px);line-height:1.15;font-weight:700;letter-spacing:-.02em;}
.lead{font-size:clamp(16px,1.55vw,20px);line-height:1.62;color:var(--ink-2);font-weight:500;}
.cap{font-size:clamp(18px,2vw,26px);line-height:1.35;font-weight:700;letter-spacing:-.01em;}
.body{font-size:16px;line-height:1.65;color:var(--muted);}

/* giant rotated headline motif */
.vtype{
  writing-mode:vertical-rl;
  font-weight:800;letter-spacing:-.04em;line-height:.86;
  font-size:clamp(60px,11vw,168px);
  user-select:none;white-space:nowrap;
}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:9px;font-weight:700;font-size:16px;border-radius:999px;padding:15px 28px;transition:transform .18s cubic-bezier(.2,.8,.2,1),box-shadow .2s,background .2s;white-space:nowrap;}
.btn:active{transform:translateY(1px) scale(.99);}
.btn-primary{background:var(--accent);color:#fff;box-shadow:0 0 0 2px #fff,0 14px 30px -10px color-mix(in srgb,var(--accent) 75%,transparent);}
.btn-primary:hover{background:var(--accent-600);transform:translateY(-2px);box-shadow:0 0 0 2px #fff,0 18px 36px -12px color-mix(in srgb,var(--accent) 75%,transparent);}
.btn-dark{background:var(--ink);color:#fff;}
.btn-dark:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);}
.btn-ghost{background:#fff;color:var(--ink);box-shadow:inset 0 0 0 1.6px var(--line);}
.btn-ghost:hover{box-shadow:inset 0 0 0 1.6px var(--ink);}
.btn-light{background:#fff;color:var(--ink);box-shadow:var(--shadow-sm);}
.btn-light:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);}

.pill{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;font-weight:800;border-radius:999px;padding:8px 16px;background:var(--accent);color:#fff;box-shadow:0 0 0 2px #fff;}

/* phone */
.phone{
  width:300px;border-radius:42px;padding:11px;
  background:#fff;position:relative;
  box-shadow:var(--shadow-phone),inset 0 0 0 1px rgba(20,32,27,.06);
}
.phone--dark{background:#12211c;box-shadow:var(--shadow-phone),inset 0 0 0 1px rgba(255,255,255,.06);}
.phone__screen{border-radius:32px;overflow:hidden;background:#EEF0EE;position:relative;aspect-ratio:300/650;}
.phone__notch{position:absolute;top:11px;left:50%;transform:translateX(-50%);width:90px;height:24px;background:inherit;border-radius:0 0 15px 15px;z-index:30;}

/* reveal */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1);}
.reveal.in{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1!important;transform:none!important;transition:none;}html{scroll-behavior:auto;}}
.no-motion .reveal{opacity:1!important;transform:none!important;transition:none!important;}
.no-motion .floaty{animation:none!important;}

/* floating bob */
@keyframes bob{0%,100%{transform:translateY(0);}50%{transform:translateY(-16px);}}
.floaty{animation:bob 6s ease-in-out infinite;}

/* ribbon canvas wrapper */
.showcase{position:relative;}
.ribbon-svg{position:absolute;inset:0;width:100%;height:100%;z-index:0;overflow:visible;pointer-events:none;}

/* layout helpers */
.stage{position:relative;z-index:2;}

/* section device image (swap src per section) */
.sec-img{width:clamp(300px,42vw,480px);height:auto;display:block;filter:drop-shadow(0 28px 46px rgba(20,32,27,.20));}
.sec-img--hero{width:clamp(300px,42vw,480px);}

/* responsive */
@media (max-width:980px){
  .vtype{font-size:clamp(48px,16vw,110px);}
  .hide-mob{display:none!important;}
  .stack-mob{grid-template-columns:1fr!important;gap:40px!important;text-align:center;}
  .stack-mob .band-text{display:flex;flex-direction:column;align-items:center;}
  .stack-mob .band-text .lead{margin-left:auto;margin-right:auto;}
  .stack-mob .band-text ul{align-items:flex-start;}
  .hero-cta{justify-content:center;}
  /* 모바일에선 좌우 교차(side) 무시하고 모든 밴드를 이미지→텍스트 순서로 통일 */
  .band .band-phone{order:1!important;}
  .band .band-text{order:2!important;}
}
@media (max-width:560px){
  .wrap{padding:0 20px;}
  .phone{width:248px;}
  .h1{font-size:clamp(34px,9vw,46px);}
  /* 상단 로고 모바일 20% 축소 (60px → 48px) */
  .brand img{height:48px!important;}
  /* CTA 버튼: 동일 폭으로 위에서부터 세로 정렬 */
  .cta-group{flex-direction:column;align-items:center;}
  .cta-group > a{width:min(280px,100%);justify-content:center;}
}