/* =========================================================
   more.ri landing  —  style.css
   palette pulled from app screenshots
   lavender #A78BDB · blush #F5C4D8 · peach #FFE0CC
   coral #FF6B1A · ink #2A2230
   ========================================================= */

:root{
  --lav:      #A78BDB;
  --lav-deep: #8B6FD0;
  --blush:    #F5C4D8;
  --peach:    #FFE3D2;
  --coral:    #FF6B1A;
  --coral-d:  #F25400;
  --sky:      #4DA3FF;

  --ink:      #2A2230;
  --ink-soft: #5B5168;
  --paper:    #FFF8FB;
  --paper-2:  #FBEFF6;
  --white:    #FFFFFF;

  --grad-cool: linear-gradient(120deg, var(--lav-deep), var(--sky));
  --grad-warm: linear-gradient(120deg, var(--coral), #FF9A4D);
  --grad-soft: linear-gradient(160deg, #EFE2F5 0%, #FBE2EC 48%, #FFE7D6 100%);

  --shadow-phone: 0 30px 70px -28px rgba(80,40,90,.45);
  --shadow-card:  0 14px 40px -22px rgba(80,40,90,.35);

  --maxw: 1120px;
  --r-lg: 28px;
  --r-md: 18px;
  --r-sm: 12px;

  --font: "Pretendard","Pretendard Variable",-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo",system-ui,sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  font-family:var(--font);
  color:var(--ink);
  background:var(--paper);
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }

.grad{
  background:var(--grad-cool);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
.grad-warm{
  background:var(--grad-warm);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
.br-d{ display:inline; }

/* ============ NAV ============ */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:50;
  padding:14px 20px;
  transition:background .3s ease, box-shadow .3s ease, padding .3s ease;
}
.nav.is-stuck{
  background:rgba(255,248,251,.82);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  box-shadow:0 1px 0 rgba(120,80,130,.08);
  padding:10px 20px;
}
.nav__inner{
  max-width:var(--maxw); margin:0 auto;
  display:flex; align-items:center; justify-content:space-between;
}
.nav__brand{ display:flex; align-items:center; gap:9px; }
.nav__logo{
  width:30px; height:30px; border-radius:9px;
  display:block; object-fit:cover;
  box-shadow:0 6px 16px -6px rgba(180,120,140,.45);
}
.nav__name{ font-weight:800; font-size:19px; letter-spacing:-.02em; }
.nav__dot{ color:var(--coral); }
.nav__cta{
  background:var(--ink); color:#fff;
  padding:9px 18px; border-radius:999px;
  font-weight:700; font-size:14px;
  transition:transform .2s ease, background .2s ease;
}
.nav__cta:hover{ transform:translateY(-1px); background:#3b3142; }

/* ============ HERO ============ */
.hero{
  position:relative;
  padding:130px 20px 40px;
  background:var(--grad-soft);
  text-align:center;
  overflow:hidden;
}
.hero__glow{
  position:absolute; top:-180px; left:50%; translate:-50% 0;
  width:680px; height:680px; border-radius:50%;
  background:radial-gradient(circle, rgba(255,107,26,.22), transparent 62%);
  filter:blur(10px); pointer-events:none;
}
.hero__inner{ position:relative; max-width:760px; margin:0 auto; }
.hero__eyebrow{
  font-weight:700; font-size:14px; letter-spacing:.04em;
  color:var(--lav-deep); margin:0 0 18px;
}
.hero__title{
  font-size:clamp(34px,6.4vw,60px);
  line-height:1.12; letter-spacing:-.03em; font-weight:900;
  margin:0 0 20px;
}
.hero__lead{
  font-size:clamp(15px,2.4vw,19px);
  color:var(--ink-soft); margin:0 auto 30px; max-width:540px;
}
.hero__badges{
  display:flex; flex-wrap:wrap; gap:9px; justify-content:center;
  margin-bottom:34px;
}
.chip{
  background:rgba(255,255,255,.7);
  border:1px solid rgba(167,139,219,.28);
  padding:8px 15px; border-radius:999px;
  font-weight:600; font-size:14px; color:var(--ink);
  backdrop-filter:blur(6px);
}
.hero__store{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.hero__note{
  margin:18px 0 0; font-size:13px; color:var(--ink-soft); opacity:.8;
}

/* store buttons */
.store{
  display:inline-flex; align-items:center; gap:11px;
  background:var(--ink); color:#fff;
  padding:12px 20px 12px 17px; border-radius:15px;
  transition:transform .2s ease, box-shadow .2s ease;
  box-shadow:0 12px 26px -16px rgba(0,0,0,.5);
}
.store:hover{ transform:translateY(-2px); box-shadow:0 16px 30px -16px rgba(0,0,0,.55); }
.store__icon{ width:26px; height:26px; flex:none; }
.store__txt{ display:flex; flex-direction:column; line-height:1.15; text-align:left; }
.store__txt small{ font-size:11px; opacity:.78; }
.store__txt b{ font-size:17px; font-weight:700; letter-spacing:-.01em; }
.store--soon{ background:#cfc4d4; color:#fff; cursor:default; box-shadow:none; }
.store--soon:hover{ transform:none; }
.store--light{ background:#fff; color:var(--ink); }

/* hero phone — screenshots already include the device mockup,
   so no extra frame: just drop a soft shadow on the image itself */
.hero__phone{ margin:40px auto 0; width:min(290px,72vw); }
.phone{ position:relative; }
.phone img{
  width:100%; height:auto; display:block;
  filter:drop-shadow(0 30px 55px rgba(80,40,90,.34));
}
.phone--sm{ width:min(230px,60vw); }
.phone--md{ width:min(270px,68vw); }

/* promo images (1080×1440, 3:4 ratio) */
.promo-img{
  width: min(340px, 80vw);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-phone);
}
.promo-img img{
  width: 100%;
  height: 420px;
  object-fit: cover;
  object-position: center top;
  display: block;
  filter: none;
}
@media (max-width: 860px){
  .promo-img{ width: min(300px, 90vw); }
  .promo-img img{ height: 320px; }
}

/* ============ FEATURE rows ============ */
.feature{ padding:78px 20px; }
.feature--alt{ background:var(--paper-2); }
.feature__inner{
  max-width:var(--maxw); margin:0 auto;
  display:grid; grid-template-columns:1fr 1fr;
  align-items:center; gap:56px;
}
.feature__inner--reverse{ direction:rtl; }
.feature__inner--reverse > *{ direction:ltr; }

.feature__tag{
  display:inline-block;
  font-weight:700; font-size:13px; letter-spacing:.03em;
  color:var(--lav-deep);
  background:rgba(167,139,219,.14);
  padding:6px 13px; border-radius:999px; margin-bottom:18px;
}
.feature__head{
  font-size:clamp(26px,4vw,40px); line-height:1.18;
  letter-spacing:-.025em; font-weight:900; margin:0 0 18px;
}
.feature__body{
  font-size:clamp(15px,1.9vw,17px); color:var(--ink-soft);
  margin:0; max-width:440px;
}
.feature__shot{ display:flex; justify-content:center; }
.feature__shot .phone{ width:min(280px,74vw); }

/* ============ HIGHLIGHT ============ */
.hl{
  position:relative; overflow:hidden;
  padding:92px 20px 100px;
  background:linear-gradient(160deg,#2A2230 0%,#3A2740 55%,#52283A 100%);
  color:#fff; text-align:center;
}
.hl__glow{
  position:absolute; bottom:-220px; left:50%; translate:-50% 0;
  width:760px; height:520px; border-radius:50%;
  background:radial-gradient(circle, rgba(255,107,26,.4), transparent 62%);
  filter:blur(20px); pointer-events:none;
}
.hl__inner{ position:relative; max-width:820px; margin:0 auto; }
.hl__tag{
  display:inline-block; font-weight:700; font-size:13px; letter-spacing:.05em;
  color:#FFD2B0; background:rgba(255,107,26,.18);
  padding:7px 15px; border-radius:999px; margin-bottom:22px;
}
.hl__head{
  font-size:clamp(28px,5vw,48px); line-height:1.18;
  letter-spacing:-.03em; font-weight:900; margin:0 0 20px;
}
.hl__body{
  font-size:clamp(15px,2.2vw,18px);
  color:rgba(255,255,255,.78); margin:0 auto 50px; max-width:560px;
}
.hl__shots{
  display:flex; gap:24px; justify-content:center; align-items:flex-end;
  flex-wrap:wrap;
}
.hl__shots .phone--sm:first-child{ transform:translateY(-14px) rotate(-3deg); }
.hl__shots .phone--sm:last-child{ transform:translateY(8px) rotate(3deg); }
.hl__shots--one .phone img{ filter:drop-shadow(0 34px 60px rgba(0,0,0,.5)); }

/* ============ FEATURE GRID ============ */
.grid-sec{ padding:88px 20px; }
.grid-sec__inner{ max-width:var(--maxw); margin:0 auto; text-align:center; }
.grid-sec__head{
  font-size:clamp(26px,4vw,38px); font-weight:900;
  letter-spacing:-.025em; margin:0 0 10px;
}
.grid-sec__sub{ color:var(--ink-soft); margin:0 0 46px; font-size:16px; }
.grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:18px;
  text-align:left;
}
.card{
  background:var(--white);
  border:1px solid rgba(167,139,219,.16);
  border-radius:var(--r-md);
  padding:24px 22px;
  box-shadow:var(--shadow-card);
  transition:transform .25s ease, box-shadow .25s ease;
}
.card:hover{ transform:translateY(-4px); box-shadow:0 22px 46px -24px rgba(80,40,90,.45); }
.card__ico{
  display:inline-grid; place-items:center;
  width:46px; height:46px; border-radius:13px;
  background:var(--grad-soft); font-size:23px; margin-bottom:16px;
}
.card h3{ font-size:17px; font-weight:800; margin:0 0 7px; letter-spacing:-.01em; }
.card p{ font-size:14px; color:var(--ink-soft); margin:0; line-height:1.55; }

/* ============ REVIEW ============ */
.review{ padding:30px 20px 88px; background:var(--paper-2); }
.review__inner{ max-width:720px; margin:0 auto; text-align:center; }
.review__head{
  font-size:clamp(24px,3.6vw,34px); font-weight:900;
  letter-spacing:-.025em; margin:0 0 36px;
}
.quote{
  background:#fff; margin:0;
  border-radius:var(--r-lg); padding:38px 34px;
  box-shadow:var(--shadow-card);
}
.quote__stars{ color:#FF8A3D; letter-spacing:3px; font-size:20px; margin-bottom:16px; }
.quote blockquote{
  margin:0 0 18px; font-size:clamp(17px,2.4vw,20px);
  font-weight:600; line-height:1.6; letter-spacing:-.01em;
}
.quote figcaption{ font-size:14px; color:var(--ink-soft); }
.quote__who{ font-weight:700; color:var(--ink); }

/* ============ CTA ============ */
.cta{
  position:relative; overflow:hidden;
  padding:96px 20px;
  background:var(--grad-soft);
  text-align:center;
}
.cta__glow{
  position:absolute; top:-160px; right:-120px;
  width:560px; height:560px; border-radius:50%;
  background:radial-gradient(circle, rgba(167,139,219,.3), transparent 64%);
  filter:blur(14px); pointer-events:none;
}
.cta__inner{ position:relative; max-width:620px; margin:0 auto; }
.cta__head{
  font-size:clamp(28px,4.6vw,44px); font-weight:900;
  letter-spacing:-.03em; margin:0 0 14px;
}
.cta__sub{ color:var(--ink-soft); font-size:17px; margin:0 0 32px; }
.cta__store{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }

/* ============ FOOTER ============ */
.foot{ background:var(--ink); color:#fff; padding:44px 20px; }
.foot__inner{
  max-width:var(--maxw); margin:0 auto;
  display:flex; flex-direction:column; align-items:center; gap:18px;
  text-align:center;
}
.foot__brand{ display:flex; align-items:center; gap:9px; }
.foot__brand .nav__name{ color:#fff; }
.foot__links{ display:flex; gap:24px; flex-wrap:wrap; justify-content:center; }
.foot__links a{ font-size:14px; color:rgba(255,255,255,.72); transition:color .2s; }
.foot__links a:hover{ color:#fff; }
.foot__copy{ font-size:13px; color:rgba(255,255,255,.45); margin:0; }

/* ============ scroll reveal ============ */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .7s ease, transform .7s ease; }
.reveal.is-in{ opacity:1; transform:none; }

/* ============ RESPONSIVE ============ */
@media (max-width:860px){
  .feature__inner{ grid-template-columns:1fr; gap:34px; text-align:center; }
  .feature__inner--reverse{ direction:ltr; }
  .feature__text{ display:flex; flex-direction:column; align-items:center; }
  .feature__body{ max-width:520px; }
  .grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:560px){
  .hero{ padding-top:108px; }
  .br-d{ display:none; }
  .grid{ grid-template-columns:1fr; gap:14px; }
  .hl__shots .phone--sm:first-child,
  .hl__shots .phone--sm:last-child{ transform:none; }
  .store{ flex:1 1 auto; justify-content:center; }
}

/* reduced motion */
@media (prefers-reduced-motion:reduce){
  *{ animation:none!important; transition:none!important; scroll-behavior:auto!important; }
  .reveal{ opacity:1; transform:none; }
}

/* 부탁하기 — 보내기·확인 두 장면 (2026-10-06) */
.hl__pair{ display:flex; flex-wrap:wrap; justify-content:center; align-items:flex-start; gap:40px 56px; margin-top:44px; }
.hl__fig{ margin:0; display:flex; flex-direction:column; align-items:center; gap:22px; width:min(320px,86vw); }
.hl__cap{ color:#fff; font-size:18px; font-weight:700; line-height:1.5; text-align:center; word-break:keep-all; }
.hl__fig .phone img{ filter:drop-shadow(0 34px 60px rgba(0,0,0,.5)); }
.hl__widget{ width:100%; height:auto; display:block; filter:drop-shadow(0 26px 46px rgba(0,0,0,.45)); }

/* 사용법 페이지로 이어지는 기능 카드 */
.card--link{ display:block; text-decoration:none; color:inherit; }
.card__more{ display:inline-block; margin-top:12px; font-size:13px; font-weight:700; color:var(--lav-deep); }