:root{
  --blue:#0080ff; --blue-strong:#004fff; --blue-050:#eef6ff; --blue-100:#d6ebff; --blue-ink:#003a99;
  --sky:#a0e1fd; --sky-soft:#e8f6ff;
  --ink:#191f28; --sub:#333d4b; --muted:#6b7684; --faint:#b0b8c1;
  --line:#e5e8eb; --line-soft:#f2f4f6; --line-strong:#d1d6db; --gray-500:#b0b8c1;
  --paper:#ffffff; --bg:#ffffff; --wash:#f0f6fa;
  --mint:#00d084; --yellow:#fcb900; --coral:#f04452; --violet:#7c6cf5;
  --radius:24px; --radius-sm:14px;
  --shadow:0 1px 3px rgba(17,17,17,.04),0 18px 40px rgba(17,17,17,.06);
  --shadow-lg:0 30px 72px rgba(0,80,200,.14);
  --font:"Pretendard","Pretendard Variable",system-ui,-apple-system,"Apple SD Gothic Neo",sans-serif;
  --num:"Manrope","Pretendard",system-ui,sans-serif;
  /* header geometry — sticky elements subtract --minimize-height while the bar is hidden */
  --header-height:74px; --minimize-height:0px;
  --ease-out3:cubic-bezier(.165,.84,.44,1);   /* power3.out — reveal, header */
  --ease-ui:cubic-bezier(.22,.61,.36,1);      /* hover, press, small UI moves */
  /* status palette */
  --ok:#0ED058; --ok-bg:#e8faf0;
  --warn2:#FDCB01; --warn2-bg:#fff8e0;
  --danger:#F04452; --danger-bg:#feecec;
  --info:#57C5C7; --info-bg:#e7f8f8;
  /* semantic roles mapped onto the palette */
  --background-dark:#0B293D; --background-navy:#143043; --background-primary:#f0f6fa;
  --border-color:var(--line); --border-hover:var(--blue);
  --surface:var(--paper); --surface-hover:var(--line-soft);
  color-scheme:light;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);font-size:16px;line-height:1.6;
  word-break:keep-all;overflow-x:hidden;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer}
h1,h2,h3{margin:0;font-weight:900;letter-spacing:-.035em;text-wrap:balance}
p{margin:0}
.tnum{font-family:var(--num);font-variant-numeric:tabular-nums}
.wrap{max-width:1400px;margin:0 auto;padding-inline:24px}

/* buttons — spec matched to a blue/purple-gradient CTA system */
.btn{position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:14px 40px;font-size:16px;line-height:1.7;font-weight:700;letter-spacing:-.01em;
  border:0;border-radius:8px;background:none;white-space:nowrap;text-align:center;
  transition:background .3s,color .3s,transform .18s var(--ease-ui),box-shadow .18s var(--ease-ui)}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
@media(prefers-reduced-motion:reduce){.btn:hover,.btn:active{transform:none}}
.btn svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2.3}
.btn.lg{padding-top:16px;padding-bottom:16px;font-size:20px;line-height:1.6}

.btn.primary{color:#fff;box-shadow:0 8px 20px rgba(0,128,255,.22)}
.btn.primary:hover{box-shadow:0 14px 28px rgba(0,128,255,.30)}
.btn.primary:before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;
  background:linear-gradient(98deg,#00B4FF 1.72%,#0081FF 49.42%,#A600FF 97.11%);transition:opacity .3s}
.btn.primary:hover{background:var(--blue);transition:none}
.btn.primary:hover:before{opacity:0}

.btn.ghost{color:var(--ink);background:var(--paper);box-shadow:inset 0 0 0 1px var(--line-strong)}
.btn.ghost:hover{color:var(--blue)}

.btn.soft{color:var(--ink);background:var(--paper);box-shadow:inset 0 0 0 1px var(--line-strong)}
.btn.soft:hover{color:var(--blue)}

.btn.white{background:#fff;color:var(--blue-strong)}
.btn.white:hover{color:var(--ink)}

/* header */
/* header: 74px, hides upward on scroll-down and returns on scroll-up */
header .wrap{max-width:1600px}
header{position:fixed;top:0;left:0;width:100%;height:var(--header-height);z-index:100;background:var(--paper);
  border-bottom:1px solid transparent;
  transition:border-color .3s,transform .4s var(--ease-out3),opacity .4s var(--ease-out3)}
header.minimize{border-bottom-color:var(--line-strong)}
header.hidden{transform:translateY(-100%);opacity:0}
body{padding-top:var(--header-height)}
.nav{display:flex;align-items:center;gap:30px;height:100%}
.logo{display:flex;align-items:center;gap:9px;font-weight:900;font-size:21px;letter-spacing:-.045em}
.logo .m{width:34px;height:34px;border-radius:11px;background:var(--blue);color:#fff;display:grid;place-items:center;font-family:var(--num);font-weight:800;font-size:19px;box-shadow:0 6px 14px rgba(28,123,255,.4)}
/* GNB: centred menu with 260px / 508px dropdown panels */
.menu-container{display:flex;justify-content:center;height:100%;z-index:1;margin:0 auto}
#menu{display:flex;list-style:none;margin:0;padding:0;height:100%}
#menu>li{position:relative}
#menu>li>a{position:relative;display:flex;align-items:center;justify-content:center;gap:4px;height:100%;
  padding:0 20px;color:var(--ink);font-size:16px;font-weight:700;letter-spacing:-.01em;transition:color .3s;cursor:pointer}
#menu>li>a:hover,#menu>li.open-menu>a{color:var(--blue)}
#menu .chev{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:2.2;transition:transform .3s}
#menu>li.open-menu .chev{transform:rotate(-180deg)}
#menu ul.sub-menu{position:absolute;top:calc(100% - 10px);left:-12px;list-style:none;margin:0;
  padding:20px;width:260px;background:var(--paper);border-radius:12px;border:1px solid var(--line-strong);
  opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s;box-shadow:var(--shadow)}
#menu>li.open-menu>ul.sub-menu{opacity:1;visibility:visible}
#menu ul.sub-menu.wide{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:508px;gap:10px 20px}
#menu ul.sub-menu>li{margin-bottom:10px}
#menu ul.sub-menu.wide>li{margin-bottom:0}
#menu ul.sub-menu>li:last-child{margin-bottom:0}
#menu ul.sub-menu>li>a{display:block;padding:8px 12px;font-size:16px;font-weight:700;letter-spacing:-.01em;
  color:var(--sub);border-radius:4px;transition:background .3s,color .3s}
#menu ul.sub-menu>li>a:hover{background:var(--line-soft);color:var(--blue)}
.menu-description{display:block;margin-top:4px;color:var(--muted);font-size:16px;font-weight:500;letter-spacing:-.01em}
/* header utils: dark start button that turns brand-blue on hover */
.nav .right{display:flex;align-items:center;gap:32px}
.nav .login{font-weight:600;font-size:16px;color:var(--sub);transition:color .3s}
.nav .login:hover{color:var(--blue)}
.nav .start{padding:10px 28px;border-radius:8px;color:#fff;background:var(--sub);font-weight:700;font-size:16px;
  border:0;transition:background .3s;white-space:nowrap}
.nav .start:hover{background:var(--blue)}
.burger{display:none}

/* HERO — centered single column */
.hero{position:relative;overflow:hidden;text-align:center;background:var(--bg)}
.hero .wrap{padding-block:74px 0}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:700;color:var(--blue-strong);background:var(--paper);border:1px solid var(--blue-100);padding:8px 16px;border-radius:30px;box-shadow:var(--shadow)}
.eyebrow i{width:7px;height:7px;border-radius:50%;background:var(--mint);display:block}
.hero h1{font-size:clamp(34px,6vw,64px);line-height:1.25;letter-spacing:-.02em;margin:24px auto 0;max-width:780px}
.hero h1 .hl{color:var(--blue);position:relative;white-space:nowrap}
.hero h1 .hl:after{content:"";position:absolute;left:-2px;right:-2px;bottom:8px;height:14px;background:var(--sky);z-index:-1;border-radius:8px}
.hero .lede{font-size:19px;color:var(--sub);max-width:560px;margin:22px auto 0}
.hero .cta{display:flex;gap:12px;justify-content:center;margin:32px 0 16px;flex-wrap:wrap}
.hero .trust{display:flex;align-items:center;justify-content:center;gap:14px;color:var(--muted);font-size:13.5px;flex-wrap:wrap}
.hero .trust .stars{color:var(--yellow);letter-spacing:2px}

/* hero product board (original, centered, floating chips) */
.stage{position:relative;max-width:840px;margin:52px auto 0;padding-bottom:70px}
.board{background:var(--paper);border:1px solid var(--line);border-radius:26px;box-shadow:var(--shadow-lg);padding:18px;text-align:left}
.board .bar{display:flex;gap:7px;padding:4px 6px 14px}
.board .bar b{width:11px;height:11px;border-radius:50%;background:var(--line);display:block}
.board .bar b:first-child{background:var(--coral)}.board .bar b:nth-child(2){background:var(--yellow)}.board .bar b:nth-child(3){background:var(--mint)}
.board .grid{display:grid;grid-template-columns:180px 1fr;gap:14px}
.mini-side{background:var(--wash);border-radius:16px;padding:14px;display:flex;flex-direction:column;gap:6px}
.mini-side .s{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:10px;font-size:12.5px;color:var(--muted);font-weight:600}
.mini-side .s.on{background:var(--blue);color:#fff}
.mini-side .s .d{width:16px;height:16px;border-radius:6px;background:currentColor;opacity:.35;flex:none}
.mini-side .s.on .d{opacity:.85}
.mini-main{display:flex;flex-direction:column;gap:11px}
.mrow{display:flex;align-items:center;gap:12px;padding:13px;border-radius:14px;border:1px solid var(--line);background:var(--paper)}
.mrow .av{width:40px;height:40px;border-radius:12px;flex:none;display:grid;place-items:center;color:#fff}
.mrow .av svg{width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:2}
.av.g1{background:linear-gradient(135deg,var(--blue),var(--blue-strong))}
.av.g2{background:linear-gradient(135deg,var(--coral),#f0568f)}
.av.g3{background:linear-gradient(135deg,var(--mint),#12b3c9)}
.av.g4{background:linear-gradient(135deg,var(--violet),#5b8cff)}
.mrow .tx{flex:1;min-width:0}
.mrow .tx i{display:block;height:8px;border-radius:5px;background:var(--line);margin-bottom:8px}
.mrow .tx i:first-child{width:48%;background:var(--blue-100)}
.mrow .tx i:last-child{width:78%;margin-bottom:0}
.chip{font-size:11.5px;font-weight:700;padding:4px 10px;border-radius:20px;flex:none}
.chip.ok{color:var(--mint);background:color-mix(in srgb,var(--mint) 16%,transparent)}
.chip.sch{color:var(--blue-strong);background:var(--blue-050)}
.chip.wt{color:var(--yellow);background:color-mix(in srgb,var(--yellow) 20%,transparent)}
.float{position:absolute;background:var(--paper);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow-lg);padding:15px 18px}
.f1{top:6px;right:-14px;display:flex;align-items:center;gap:12px}
.f1 .pic{width:38px;height:38px;border-radius:12px;background:linear-gradient(135deg,var(--violet),var(--blue));display:grid;place-items:center;color:#fff}
.f1 b{font-family:var(--num);font-size:22px;font-weight:800;display:block;line-height:1}
.f1 small{font-size:11.5px;color:var(--muted)}
.f2{bottom:36px;left:-16px;display:flex;align-items:center;gap:11px;font-size:13.5px;font-weight:700}
.f2 .dot{width:30px;height:30px;border-radius:50%;background:var(--mint);color:#fff;display:grid;place-items:center}
.f2 .dot svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:3}

/* section shell */
/* section rhythm: 200px top padding, 80px head gap */
section.blk{padding-top:200px;padding-bottom:0}
section.blk--secondary{padding-bottom:200px}
.head{text-align:center;max-width:720px;margin:0 auto 80px}
.head .icon{margin-bottom:16px}
.head .icon svg{width:72px;height:72px;fill:var(--blue);stroke:none;display:inline-block}
.kicker{display:inline-block;margin-bottom:4px;font-size:13px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--blue)}
.head h2{font-size:clamp(28px,3.8vw,48px);line-height:1.3;letter-spacing:-.02em;margin:0}
.head h2 .em{color:var(--blue)}
.head p{margin-top:16px;color:var(--muted);font-size:18px;line-height:1.5}

/* positioning: 1등 + horizontal feature cards (scroll rail) */
.rail{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(240px,1fr);gap:20px;overflow-x:auto;padding-bottom:8px;scroll-snap-type:x mandatory}
.rail::-webkit-scrollbar{height:8px}.rail::-webkit-scrollbar-thumb{background:var(--line);border-radius:20px}
.fcard{scroll-snap-align:start;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:26px;box-shadow:var(--shadow);transition:transform .15s,box-shadow .15s}
.fcard:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.fcard .ic{width:54px;height:54px;border-radius:16px;display:grid;place-items:center;margin-bottom:18px}
.fcard .ic svg{width:27px;height:27px;stroke:#fff;fill:none;stroke-width:2}
.ic.b1{background:linear-gradient(135deg,var(--blue),var(--blue-strong))}
.ic.b2{background:linear-gradient(135deg,var(--violet),#5b8cff)}
.ic.b3{background:linear-gradient(135deg,var(--mint),#12b3c9)}
.ic.b4{background:linear-gradient(135deg,var(--yellow),var(--coral))}
.ic.b5{background:linear-gradient(135deg,var(--coral),#f0568f)}
.ic.b6{background:linear-gradient(135deg,#3aa0ff,var(--blue))}
.fcard h3{font-size:18.5px;margin-bottom:10px;font-weight:700}
.fcard p{color:var(--muted);font-size:14px;margin-bottom:14px}
.fcard .more{color:var(--blue-strong);font-weight:700;font-size:13.5px;display:inline-flex;align-items:center;gap:5px}
.fcard .more svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.6}

/* stats band — 3 columns */
.stats{background:linear-gradient(120deg,var(--blue),var(--blue-strong));color:#fff}
.stats .wrap{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;padding-block:56px;text-align:center}
.stats .s{position:relative}
.stats .s+.s:before{content:"";position:absolute;left:0;top:14%;height:72%;width:1px;background:rgba(255,255,255,.22)}
.stats .s b{font-family:var(--num);font-size:clamp(34px,5vw,54px);font-weight:800;letter-spacing:-.03em;display:block}
.stats .s span{color:#d3e5ff;font-size:15px;margin-top:6px;display:block}

/* testimonial carousel */
.tsect{background:var(--bg)}
.carousel{max-width:760px;margin:0 auto;position:relative}
.slides{overflow:hidden;border-radius:var(--radius)}
.track{display:flex;transition:transform .45s cubic-bezier(.4,0,.2,1)}
.slide{min-width:100%;box-sizing:border-box}
.tcard{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:38px 40px;text-align:center}
.tcard .stars{color:var(--yellow);letter-spacing:3px;font-size:18px}
.tcard blockquote{margin:18px 0 24px;font-size:20px;line-height:1.6;color:var(--ink);font-weight:500}
.tcard .who{display:flex;align-items:center;justify-content:center;gap:12px}
.tcard .who .av{width:46px;height:46px;border-radius:50%;background:var(--blue-050);color:var(--blue-strong);display:grid;place-items:center;font-weight:700}
.tcard .who b{font-size:14.5px;display:block}
.tcard .who small{color:var(--muted);font-size:12.5px}
.cbtn{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;background:var(--paper);border:1px solid var(--line);box-shadow:var(--shadow);display:grid;place-items:center;color:var(--ink)}
.cbtn svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2.4}
.cbtn.prev{left:-22px}.cbtn.next{right:-22px}
.dots{display:flex;gap:8px;justify-content:center;margin-top:22px}
.dots button{width:9px;height:9px;border-radius:50%;background:var(--line);border:0;padding:0;transition:width .2s,background .2s}
.dots button.on{width:26px;background:var(--blue);border-radius:20px}

/* social proof + CTA */
.proof{text-align:center}
.proof h2{font-size:clamp(26px,3.4vw,38px);line-height:1.25;max-width:640px;margin:0 auto}
.proof h2 .em{color:var(--blue)}
.proof .cta{display:flex;gap:12px;justify-content:center;margin-top:30px;flex-wrap:wrap}
.avatars{display:flex;justify-content:center;margin:8px 0 22px}
.avatars span{width:40px;height:40px;border-radius:50%;border:3px solid var(--bg);margin-left:-12px;display:grid;place-items:center;font-weight:700;font-size:14px;color:#fff}
.avatars span:first-child{margin-left:0}

/* final promo CTA */
.promo{background:linear-gradient(135deg,#0b62e6,#1c7bff 60%,#4f97ff);color:#fff;border-radius:30px;padding:58px 40px;text-align:center;box-shadow:var(--shadow-lg);position:relative;overflow:hidden}
.promo .tag{display:inline-block;background:var(--yellow);color:#5a3d00;font-weight:800;font-size:13px;padding:6px 14px;border-radius:20px;margin-bottom:16px}
.promo h2{font-size:clamp(28px,3.8vw,44px);margin-bottom:12px}
.promo p{color:#dce8ff;font-size:17px;max-width:520px;margin:0 auto 26px}

/* how it works — 4 steps */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.stepc{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:26px;position:relative}
.stepc .n{width:40px;height:40px;border-radius:12px;background:var(--blue-050);color:var(--blue);font-family:var(--num);font-weight:800;font-size:18px;display:grid;place-items:center;margin-bottom:18px}
.stepc h3{font-size:17.5px;margin-bottom:8px;font-weight:700}
.stepc p{color:var(--muted);font-size:14px}
.stepc .arrow{position:absolute;right:-14px;top:46px;color:var(--line);z-index:2}
.stepc .arrow svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:2.5}

/* pricing — plan card spec: 16px radius, #DDD border, gradient badge, baseline price */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:stretch}
.plan{position:relative;background:var(--paper);border:1px solid var(--line-strong);border-radius:16px;padding:40px 34px;display:flex;flex-direction:column}
/* featured plan: gradient border via border-box trick */
.plan.pop{border:3px solid transparent;padding:40px 34px;
  background:linear-gradient(var(--paper),var(--paper)) padding-box,
             linear-gradient(98deg,#00B4FF 1.72%,#0081FF 49.42%,#A600FF 97.11%) border-box}
.plan__title{display:flex;align-items:center;gap:12px;margin-bottom:6px}
.plan__title h3{font-size:20px;font-weight:700}
.plan__title .badge{padding:4px 20px;border-radius:99px;color:#fff;font-size:13px;font-weight:700;white-space:nowrap;
  background:linear-gradient(98deg,#00B4FF 1.72%,#0081FF 49.42%,#A600FF 97.11%)}
.plan .desc{color:var(--muted);font-size:15px;min-height:48px}
/* price + unit aligned on the baseline */
.plan__account{display:flex;align-items:flex-end;gap:8px;margin-top:20px;margin-bottom:34px}
.plan__account b{font-family:var(--num);font-size:40px;font-weight:800;letter-spacing:-.03em;line-height:1}
.plan__account sub{position:relative;top:-4px;font-size:15px;font-weight:600;color:var(--muted);vertical-align:baseline}
/* checklist: icon pinned left, 34px indent, 24px rhythm */
.plan ul{list-style:none;padding:0;margin:0 0 30px;display:flex;flex-direction:column;gap:24px}
.plan li{position:relative;padding-left:34px;color:var(--sub);font-size:17px;line-height:1.5}
.plan li svg{position:absolute;left:0;top:50%;transform:translateY(-50%);width:24px;height:24px;stroke:var(--blue);fill:none;stroke-width:2.6}
.plan .btn{margin-top:auto;width:100%}

/* urgency bar */
.timer{display:flex;align-items:center;justify-content:center;gap:10px;min-height:100px;padding:20px 24px;
  border-radius:16px;background:linear-gradient(88deg,#FFFF8B .88%,#D0FF71 99.7%);color:#1d2b00;
  font-size:19px;font-weight:700;text-align:center;flex-wrap:wrap}
.timer b{font-family:var(--num);font-size:24px;font-weight:800}

/* featured review: one large + stacked side column, scrim overlay */
.rev-hl{display:grid;grid-template-columns:auto 512px;gap:20px}
.rev-hl__item{position:relative;border-radius:16px;overflow:hidden;min-height:300px;
  background:linear-gradient(135deg,var(--blue-050),var(--sky))}
.rev-hl__item:after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,0) 52.94%,rgba(0,0,0,.30) 82.88%)}
.rev-hl__side{display:grid;grid-template-rows:1fr 1fr;gap:20px}
.rev-hl__side .rev-hl__item{min-height:140px;background:linear-gradient(135deg,var(--wash),var(--blue-050))}
.rev-hl__title{position:absolute;inset:auto 30px 30px;z-index:1;color:#fff;font-size:20px;font-weight:700;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;text-overflow:ellipsis}
.rev-hl__side .rev-hl__title{inset:auto 20px 20px;font-size:16px}

/* faq accordion — gray-200 fill, 16px radius, 20px row gap, rotating chevron */
.faq{max-width:1000px;margin:0 auto;display:flex;flex-wrap:wrap;row-gap:20px}
.faq details{width:100%;background:var(--line-soft);border-radius:16px;transition:background .3s}
.faq details[open]{background:var(--wash)}
.faq summary{position:relative;cursor:pointer;list-style:none;padding:36px 90px 36px 40px;
  font-weight:700;font-size:20px;line-height:1.4;letter-spacing:-.02em}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:"";position:absolute;right:40px;top:50%;width:26px;height:26px;
  background:no-repeat center/contain;transform:translateY(-50%);transition:transform .3s;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E")}
.faq details[open] summary:after{transform:translateY(-50%) rotate(180deg)}
.faq p{padding:0 90px 36px 40px;margin-top:-8px;color:var(--muted);font-size:17px;line-height:1.7}

/* hero banner carousel — auto-advancing slides with play/pause */
.hban{position:relative;margin-top:52px;border-radius:24px;overflow:hidden;background:var(--line-soft)}
.hban__track{display:flex;transition:transform .6s var(--ease-out3)}
.hban__slide{min-width:100%;display:flex;align-items:center;justify-content:space-between;gap:40px;
  padding:48px 56px;text-align:left}
.hban__slide.s1{background:linear-gradient(120deg,var(--sky-soft),var(--sky))}
.hban__slide.s2{background:linear-gradient(120deg,#EEF4FF,#D6E4FF)}
.hban__slide.s3{background:linear-gradient(120deg,#FFF7E0,#FFE9B8)}
.hban__copy{min-width:0}
.hban__copy .tagline{display:inline-block;padding:5px 14px;border-radius:99px;background:rgba(255,255,255,.75);
  font-size:13px;font-weight:700;color:var(--blue-ink);margin-bottom:14px}
.hban__copy h3{font-size:clamp(22px,3vw,34px);line-height:1.3;letter-spacing:-.02em}
.hban__copy p{margin-top:12px;color:var(--sub);font-size:17px}
.hban__art{flex:none;width:200px;height:132px;border-radius:16px;background:rgba(255,255,255,.8);
  display:grid;place-items:center;color:var(--muted);font-weight:700;font-size:14px}
.hban__ui{position:absolute;left:0;right:0;bottom:18px;display:flex;align-items:center;justify-content:center;gap:12px}
.hban__dots{display:flex;gap:8px}
.hban__dots button{width:9px;height:9px;border-radius:50%;background:rgba(17,17,17,.22);border:0;padding:0;
  transition:width .3s,background .3s}
.hban__dots button.on{width:26px;border-radius:20px;background:var(--blue)}
.hban__play{width:30px;height:30px;border-radius:50%;border:0;background:rgba(255,255,255,.85);
  display:grid;place-items:center;color:var(--ink)}
.hban__play svg{width:13px;height:13px;stroke:none;fill:currentColor}

/* decorative accents beside section titles (original marks) */
.head h2{position:relative;display:inline-block}
.head h2 .mk{position:absolute;pointer-events:none;z-index:-1}
.head h2 .mk--a{width:44px;height:44px;top:-26px;left:-34px;
  background:radial-gradient(circle at 50% 50%,var(--sky) 40%,transparent 41%);
  -webkit-mask:radial-gradient(circle,#000 99%,transparent);opacity:.9}
.head h2 .mk--b{width:150px;height:10px;bottom:2px;left:50%;transform:translateX(-50%);
  background:var(--sky);border-radius:99px;opacity:.85}
.head h2 .mk--c{width:26px;height:26px;top:-18px;right:-28px;border-radius:8px;
  background:var(--yellow);transform:rotate(18deg);opacity:.9}

/* mobile sticky action bar */
.mbar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:90;gap:10px;
  padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px));
  background:var(--paper);border-top:1px solid var(--line-strong)}
.mbar .btn{flex:1;padding:14px 16px;font-size:15px}
@media(max-width:760px){
  .mbar{display:flex}
  body{padding-bottom:84px}
}

/* pull-quote review — gray ground, big quote, 44px round avatar */
.srev{background:var(--wash)}
.srev__container{display:flex;gap:100px;justify-content:space-between;align-items:center}
.srev__content{position:relative;max-width:550px}
.srev__quote{font-size:clamp(24px,3vw,36px);font-weight:700;line-height:1.35;letter-spacing:-.02em}
.srev__desc{color:var(--sub);margin-top:32px;font-size:17px;line-height:1.7}
.srev__desc p+p{margin-top:12px}
.srev__source{display:flex;align-items:center;gap:10px;margin-top:40px}
.srev__profile{width:44px;height:44px;border-radius:99px;overflow:hidden;flex:none;
  background:var(--line);display:grid;place-items:center;font-weight:700;color:var(--muted)}
.srev__profile img{width:100%;height:100%;object-fit:cover}
.srev__info{color:var(--sub);font-size:15px}
.srev__info b{display:block;color:var(--ink);font-size:16px}
.srev__media{flex:1;min-width:0;max-width:520px;aspect-ratio:1/1;border-radius:16px;overflow:hidden;
  background:linear-gradient(135deg,var(--blue-050),var(--sky))}
.srev__media img{width:100%;height:100%;object-fit:cover}

/* full-bleed CTA with a centered object over a background */
.scta{position:relative;overflow:hidden;border-radius:30px;padding:80px 40px;
  background:linear-gradient(135deg,#0b62e6,#0080ff 55%,#4f97ff)}
.scta__bg{position:absolute;inset:0;background:no-repeat center center/cover;opacity:.35}
.scta__content{position:relative;text-align:center;color:#fff}
.scta__object{max-width:300px;margin:0 auto 32px;aspect-ratio:1/1.0783;border-radius:20px;
  background:rgba(255,255,255,.16);display:grid;place-items:center;overflow:hidden}
.scta__object img{width:100%;height:100%;object-fit:cover}
.scta__title{margin-bottom:36px;font-size:clamp(26px,3.6vw,40px);line-height:1.3;letter-spacing:-.02em}

/* feature showcase — left list drives the right image panel */
.sync{display:flex;justify-content:space-between;align-items:center;gap:100px}
.sync__control{width:520px;flex:none}
.sync__btn{display:block;width:100%;text-align:left;padding:32px 0 24px;background:none;border:0;
  box-shadow:0 1px 0 0 var(--line-strong)}
.sync__btn:first-child{padding-top:0}
.sync__title{position:relative;display:flex;align-items:center;color:var(--muted);
  font-size:24px;font-weight:700;letter-spacing:-.02em;transition:color .3s,padding .3s}
.sync__icon{position:absolute;left:0;width:32px;height:32px;transform:scale(0);transition:transform .3s}
.sync__icon svg{display:block;width:100%;height:100%;stroke:var(--blue);fill:none;stroke-width:2.2}
.sync__desc{color:var(--sub);margin-top:12px;font-size:17px;line-height:1.6;display:none}
.sync__btn[aria-selected="true"] .sync__title{color:var(--ink);padding-left:44px}
.sync__btn[aria-selected="true"] .sync__icon{transform:scale(1)}
.sync__btn[aria-selected="true"] .sync__desc{display:block}
.sync__list{position:relative;flex:1;min-width:0;aspect-ratio:1/.9113}
.sync__item{position:absolute;inset:0;border-radius:16px;overflow:hidden;opacity:0;visibility:hidden;
  transition:opacity .5s,visibility .5s;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--blue-050),var(--sky));color:var(--blue-ink);font-weight:700;font-size:20px}
.sync__item[aria-hidden="false"]{opacity:1;visibility:visible}
.sync__item img{width:100%;height:100%;object-fit:cover}

/* media + caption grid (3-up, square media) */
.cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:80px 20px}
.cols--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.cols__media{position:relative;aspect-ratio:1/1;border-radius:16px;overflow:hidden;
  background:linear-gradient(135deg,var(--wash),var(--blue-050))}
.cols--2 .cols__media{aspect-ratio:1/.7594}
.cols__media img{width:100%;height:100%;object-fit:cover}
.cols__content{text-align:center;margin-top:32px}
.cols__content h3{font-size:22px;font-weight:700;letter-spacing:-.02em}
.cols__desc{margin-top:12px;color:var(--sub);font-size:17px;line-height:1.6}

/* pricing compare — sticky column heads over a scrollable rail */
.cmp{background:var(--line-soft)}
/* 385px 고정 3개라 넓은 화면에서 오른쪽이 남았다. 칸이 폭을 나눠 갖게 한다 */
.cmp__container{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;
  padding-top:20px;padding-bottom:8px}
.cmp__item{min-width:0}
/* 900~761px: 가로 스크롤로 두되, 넘어간다는 신호를 남긴다.
   스크롤바를 숨겨 놨더니 오른쪽에 뭐가 더 있는지 알 방법이 없었다. */
@media(max-width:900px) and (min-width:641px){
  .cmp__container{grid-template-columns:repeat(3,300px);overflow-x:auto;
    scroll-snap-type:x proximity;
    scrollbar-width:none;padding-inline:var(--gut);margin-inline:calc(var(--gut) * -1);
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 34px),transparent);
            mask-image:linear-gradient(90deg,#000 calc(100% - 34px),transparent)}
  .cmp__container::-webkit-scrollbar{display:none}
  .cmp__item{scroll-snap-align:start}
}

/* 640px 이하: 가로 스크롤을 포기한다.
   실측 — 390px 에서 칸 3개(976px)가 390px 안에 들어가지 못해 586px 가 숨고,
   '포스트워크' 칸은 노출 0% 였다. 스크롤바도 숨겨 놔서 더 있다는 신호조차 없었다.
   "우리가 낫다"를 보여주는 표인데 정작 우리 칸이 안 보였다.
   세로로 쌓고, 결론인 포스트워크를 맨 위로 올린다. */
@media(max-width:640px){
  .cmp__container{grid-template-columns:1fr;gap:14px;overflow:visible;
    padding-inline:0;margin-inline:0;-webkit-mask-image:none;mask-image:none}
  .cmp__item:nth-child(3){order:-1}
  .cmp__item:nth-child(3) .cmp__head{color:var(--blue-text)}
  .cmp__item:nth-child(3) .cmp__list{background:var(--blue-050)}
}
.cmp__head{position:sticky;top:calc(var(--header-height) - var(--minimize-height) + 20px);z-index:2;display:flex;align-items:center;gap:12px;
  padding:0 32px;height:80px;background:var(--line);border-radius:8px;font-weight:700;font-size:20px}
.cmp__head .tag{color:var(--ink);background:#FFE05B;padding:4px 12px;border-radius:99px;font-size:13px;font-weight:700}
.cmp__list{list-style:none;margin:10px 0 0;padding:0;background:var(--paper);border-radius:8px}
.cmp__list>li{display:flex;align-items:center;gap:10px;min-height:80px;padding:18px 32px;color:var(--sub);font-size:16px}
.cmp__list>li+li{border-top:1px solid var(--line)}
.cmp__list>li svg{width:22px;height:22px;flex:none;stroke:var(--blue);fill:none;stroke-width:2.6}
.cmp__list>li.no{color:var(--gray-500)}
.cmp__list>li.no svg{stroke:var(--gray-500)}
/* 중립 항목 — 우열을 매기지 않고 '구조가 이렇다'만 말한다.
   경쟁자를 X로 찍어 내리는 비교표는 신생 서비스의 신뢰를 오히려 깎는다. */
.cmp__list>li.neu{color:var(--gray-500)}
.cmp__list>li.neu svg{stroke:var(--gray-400,#98a2b3);stroke-width:2.2}

/* radio select cards — 2-up, brand border + brand label when checked */
.pick{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;max-width:760px;margin:0 auto}
.pick label{position:relative;display:block;padding:22px 38px;border:2px solid var(--wash);
  background:var(--wash);border-radius:8px;cursor:pointer;transition:border-color .3s}
.pick input{position:absolute;opacity:0;left:-9999px;width:1px;height:1px}
.pick time{display:block;color:var(--sub);font-weight:700;font-size:18px;transition:color .3s}
.pick span{display:block;margin-top:4px;color:var(--muted);font-weight:500;font-size:15px;transition:color .3s}
.pick label:has(input:checked){border-color:var(--blue)}
.pick label:has(input:checked) time{color:var(--blue)}
.pick label:focus-within{outline:3px solid var(--blue);outline-offset:2px}

/* demo viewer — dark media panel + sky side rail */
.viewer{display:flex;gap:20px}
.viewer__slider{flex:1;min-width:0;border-radius:16px;background:var(--sub)}
.viewer__media{position:relative;overflow:hidden;border-radius:8px;aspect-ratio:1/.5651;margin:16px 16px 0;
  background:linear-gradient(135deg,var(--blue-050),var(--sky))}
.viewer__info{padding:32px 40px}
.viewer__info b{color:#fff;font-size:20px;font-weight:700;display:block;overflow-wrap:anywhere}
.viewer__info small{color:var(--gray-500);font-size:14px;display:block;margin-top:6px}
.viewer__content{flex:none;width:381px;display:flex;flex-direction:column;gap:30px;
  background:var(--sky);padding:40px 30px;border-radius:16px}
.viewer__content h3{font-size:20px;font-weight:700;color:var(--ink)}
.viewer__row{display:flex;align-items:flex-start;gap:12px;color:var(--ink);font-size:16px}
.viewer__row svg{width:24px;height:24px;flex:none;stroke:var(--ink);fill:none;stroke-width:2.2}

/* footer — 5 columns */
footer{border-top:1px solid var(--line);background:var(--paper);margin-top:24px}
.foot{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr 1.2fr;gap:30px;padding-block:56px}
.foot .about .logo{margin-bottom:14px}
.foot .about p{color:var(--muted);font-size:13.5px;max-width:250px}
.foot h4{font-size:13px;font-weight:700;margin-bottom:16px}
.foot a{display:block;color:var(--muted);font-size:13.5px;margin-bottom:11px}
.foot a:hover{color:var(--blue-strong)}
.foot .contact p{color:var(--muted);font-size:13px;margin-bottom:8px}
.foot .contact b{color:var(--ink)}
.sns{display:flex;gap:10px;margin-top:14px}
.sns a{width:36px;height:36px;border-radius:10px;background:var(--wash);display:grid;place-items:center;margin:0}
.sns a svg{width:18px;height:18px;stroke:var(--muted);fill:none;stroke-width:2}
.foot-bot{border-top:1px solid var(--line);padding-block:22px;display:flex;justify-content:space-between;gap:16px;color:var(--muted);font-size:12.5px;flex-wrap:wrap}
.foot-bot .lg a{display:inline;margin:0 0 0 18px;color:var(--muted)}

@media(max-width:900px){
  .menu-container,.nav .login{display:none}
  .burger{display:grid;place-items:center;width:42px;height:42px;border-radius:11px;border:1px solid var(--line);background:var(--paper);margin-left:auto}
  .burger svg{width:20px;height:20px;stroke:var(--ink);fill:none;stroke-width:2}
  .board .grid{grid-template-columns:1fr}
  .mini-side{flex-direction:row;overflow:auto}
  .stats .wrap{grid-template-columns:1fr}
  .stats .s+.s:before{display:none}
  .foot{grid-template-columns:1fr 1fr}
  .foot .about,.foot .contact{grid-column:1/-1}
  .steps{grid-template-columns:1fr 1fr}
  .stepc .arrow{display:none}
  .plans{grid-template-columns:1fr}
  section.blk{padding-block:64px}
  .cbtn.prev{left:6px}.cbtn.next{right:6px}
}
@media(max-width:520px){
  .nav .right .btn.ghost{display:none}
  .steps{grid-template-columns:1fr}
  .foot{grid-template-columns:1fr}
  .tcard{padding:28px 22px}
  .tcard blockquote{font-size:17px}
}
@media(max-width:900px){
  .rev-hl{grid-template-columns:1fr}
  .rev-hl__side{grid-template-rows:auto auto}
  .plan{padding:32px 26px}
  .plan li{font-size:15.5px}
  .plan__account b{font-size:34px}
  section.blk{padding-top:96px}
  section.blk--secondary{padding-bottom:96px}
  .head{margin-bottom:44px}
  .head .icon svg{width:56px;height:56px}
  .faq summary{padding:26px 64px 26px 24px;font-size:17px}
  .faq summary:after{right:24px;width:22px;height:22px}
  .faq p{padding:0 64px 26px 24px;font-size:15.5px}
  .cmp__item{min-width:0}
  .cmp__head{top:76px;height:68px;padding:0 20px;font-size:17px}
  .cmp__list>li{padding:16px 20px;min-height:64px;font-size:15px}
  .pick{grid-template-columns:1fr}
  .viewer{flex-direction:column}
  .viewer__content{width:auto}
  .srev__container{flex-direction:column;gap:40px;align-items:stretch}
  .srev__content{max-width:none}
  .srev__media{max-width:none;width:100%}
  .scta{padding:56px 24px;border-radius:24px}
  .sync{flex-direction:column;gap:40px}
  .sync__control{width:100%}
  .sync__title{font-size:20px}
  .sync__list{width:100%;aspect-ratio:1/.75}
  .cols{grid-template-columns:1fr 1fr;gap:40px 16px}
  .cols__content{margin-top:20px}
  .cols__content h3{font-size:19px}
  .cols__desc{font-size:15.5px}
}
@media(max-width:520px){
  .cols,.cols--2{grid-template-columns:1fr}
}

/* scroll reveal — only arms when JS marks the page, so no-JS keeps everything visible */
.js-reveal .reveal{opacity:0;transform:translateY(40px);
  transition:opacity .6s var(--ease-out3),transform .6s var(--ease-out3)}
.js-reveal .reveal.in{opacity:1;transform:none}
.js-reveal .reveal.d1{transition-delay:.08s}
.js-reveal .reveal.d2{transition-delay:.16s}
.js-reveal .reveal.d3{transition-delay:.24s}
.js-reveal .reveal.d4{transition-delay:.32s}

@media(prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
  .js-reveal .reveal{opacity:1!important;transform:none!important}
}
:focus-visible{outline:3px solid var(--blue);outline-offset:2px;border-radius:8px}

/* hot-deal band — price headline + single action */
.deal{display:flex;align-items:center;justify-content:center;gap:28px;flex-wrap:wrap;
  padding:34px 40px;border-radius:16px;
  background:linear-gradient(88deg,#FFFF8B .88%,#D0FF71 99.7%)}
.deal__copy{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;justify-content:center}
.deal__tag{padding:5px 14px;border-radius:99px;background:var(--ink);color:#fff;
  font-size:14px;font-weight:700;white-space:nowrap}
.deal__title{color:#1d2b00;font-size:clamp(22px,3vw,32px);font-weight:800;letter-spacing:-.02em}
.deal__title b{font-family:var(--num);color:var(--blue-strong)}
.deal .btn{background:var(--ink);color:#fff;padding:16px 32px;font-size:17px}
.deal .btn:hover{background:var(--blue)}
@media(max-width:760px){
  .deal{flex-direction:column;gap:18px;padding:26px 20px;text-align:center}
  .deal .btn{width:100%}
}


/* ============ hero: headline left, support copy + CTAs right ============ */
.hero2{padding-top:64px}
.hero2__top{display:grid;grid-template-columns:1.25fr 1fr;gap:60px;align-items:start;margin-bottom:56px}
.hero2__title{font-size:clamp(32px,4.6vw,56px);line-height:1.25;letter-spacing:-.03em;font-weight:800;margin:0}
.hero2__aside{padding-top:10px}
.hero2__lede{font-size:18px;line-height:1.6;color:var(--sub);margin:0 0 24px}
.hero2__lede b{color:var(--blue);font-weight:700}
.hero2__cta{display:flex;gap:12px;flex-wrap:wrap}
.hero2__cta .btn{padding:14px 26px;font-size:16px}
/* wide rounded media banner under the hero */
.hero2__media{position:relative;border-radius:16px;overflow:hidden;aspect-ratio:16/6.2;
  background:linear-gradient(135deg,var(--blue-050),var(--sky));display:grid;place-items:center;
  color:var(--blue-ink);font-weight:700;font-size:18px}
.hero2__media img,.hero2__media video{width:100%;height:100%;object-fit:cover}

/* ============ showcase cards: large image cards with overlay + plus ============ */
.cards{position:relative}
.cards__rail{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(300px,1fr);gap:20px;
  overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding-bottom:6px}
.cards__rail::-webkit-scrollbar{height:0}
.card2{position:relative;scroll-snap-align:center;aspect-ratio:1/1.12;border-radius:16px;overflow:hidden;
  display:block;isolation:isolate}
.card2 img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.card2:after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(0,0,0,0) 45%,rgba(0,0,0,.45) 85%)}
.card2--green{background:linear-gradient(160deg,#4BE38A,#17C46B)}
.card2--photo{background:linear-gradient(160deg,#8aa0b8,#4c5f75)}
.card2--blue{background:linear-gradient(160deg,#2f8dff,#0064e0)}
.card2--violet{background:linear-gradient(160deg,#9a8bff,#6248f5)}
.card2--amber{background:linear-gradient(160deg,#FFC93F,#F5883B)}
.card2__body{position:absolute;left:30px;right:80px;bottom:28px;color:#fff}
.card2__title{font-size:clamp(20px,2.1vw,26px);line-height:1.35;font-weight:800;letter-spacing:-.02em}
.card2__title u{text-decoration:none;box-shadow:inset 0 -3px 0 0 rgba(255,255,255,.85);padding-bottom:2px}
.card2__desc{margin-top:10px;font-size:15px;color:rgba(255,255,255,.9)}
.card2__plus{position:absolute;right:26px;bottom:26px;width:38px;height:38px;border-radius:50%;
  border:0;background:rgba(255,255,255,.92);color:#111;display:grid;place-items:center;
  transition:transform .3s,background .3s}
.card2__plus svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2.6}
.card2:hover .card2__plus{transform:rotate(90deg);background:#fff}
/* big stat sitting on a card, with a hand-drawn ring */
.card2__stat{position:absolute;left:0;right:0;top:44%;transform:translateY(-50%);text-align:center;
  font-family:var(--num);font-size:clamp(44px,6vw,72px);font-weight:800;color:#fff;letter-spacing:-.03em}
.card2__ring{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%) rotate(-6deg);
  width:74%;aspect-ratio:1/.62;border:5px solid var(--sky);border-radius:50%;opacity:.95}
/* carousel arrows, bottom-right like the reference */
.cards__nav{display:flex;justify-content:flex-end;gap:10px;margin-top:22px}
.cards__nav button{width:44px;height:44px;border-radius:50%;background:var(--paper);
  border:1px solid var(--line-strong);display:grid;place-items:center;color:var(--ink);transition:background .3s,color .3s}
.cards__nav button:hover{background:var(--line-soft);color:var(--blue)}
.cards__nav svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2.2}
/* blue accent marks at the end of a section headline */
.sparkle{position:relative;display:inline-block;width:26px;height:26px;vertical-align:top;margin-left:2px}
.sparkle i{position:absolute;display:block;background:var(--blue);border-radius:99px}
.sparkle i:nth-child(1){width:4px;height:13px;left:11px;top:-2px;transform:rotate(12deg)}
.sparkle i:nth-child(2){width:4px;height:10px;left:1px;top:6px;transform:rotate(-38deg)}
.sparkle i:nth-child(3){width:4px;height:10px;left:20px;top:6px;transform:rotate(42deg)}

@media(max-width:900px){
  .hero2__top{grid-template-columns:1fr;gap:26px;margin-bottom:34px}
  .hero2__aside{padding-top:0}
  .hero2__media{aspect-ratio:16/9}
  .cards__rail{grid-auto-columns:minmax(260px,78%)}
  .card2__body{left:20px;right:66px;bottom:22px}
}


/* ============ black data band ============ */
.dband{position:relative;background:#0B293D;overflow:hidden}
.dband:before{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,#143043 0%,#0B293D 60%),
             radial-gradient(62% 52% at 50% 104%,rgba(0,128,255,.38),transparent 70%),
             radial-gradient(40% 46% at 16% 92%,rgba(14,208,88,.14),transparent 70%)}
.dband .wrap{position:relative;padding-block:120px}
.dband__title{text-align:center;color:#fff;font-size:clamp(28px,3.8vw,44px);line-height:1.3;
  letter-spacing:-.02em;font-weight:800;margin-bottom:80px}
.dband__title u{text-decoration:none;box-shadow:inset 0 -6px 0 0 var(--blue)}
.dband__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:40px 20px;text-align:center}
.dnum{font-family:var(--num);color:#fff;font-size:clamp(34px,5vw,56px);font-weight:500;
  letter-spacing:-.02em;line-height:1;display:flex;align-items:flex-start;justify-content:center;gap:4px}
.dnum sup{font-size:.5em;font-weight:500;line-height:1;margin-top:.18em}
.dlabel{margin-top:18px;color:#fff;font-size:17px;font-weight:500}

/* ============ tall feature cards, 3 up ============ */
.fgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.fcard3{position:relative;display:flex;flex-direction:column;min-height:560px;padding:40px 36px;
  border-radius:16px;background:var(--line-soft);overflow:hidden}
.fcard3--dark{background:#143043;color:#fff}
.fcard3--dark .fcard3__label{color:#8fa6b8}
.fcard3__label{font-size:17px;font-weight:600;color:var(--muted);margin-bottom:14px}
.fcard3__title{font-size:clamp(20px,2.1vw,26px);line-height:1.4;font-weight:800;letter-spacing:-.02em}
.fcard3__title u{text-decoration:none;box-shadow:inset 0 -4px 0 0 var(--blue)}
.fcard3__big{margin-top:auto;font-family:var(--num);font-size:clamp(40px,4.6vw,62px);font-weight:700;
  letter-spacing:-.03em;color:var(--blue);line-height:1}
.fcard3__media{margin:28px -36px -40px;flex:1;min-height:220px;border-radius:12px 12px 0 0;overflow:hidden;
  background:linear-gradient(150deg,var(--blue-050),var(--sky));display:grid;place-items:center;
  color:var(--blue-ink);font-weight:700;font-size:15px}
.fcard3__media img{width:100%;height:100%;object-fit:cover}

/* ============ floating dismissible deal bar ============ */
.dealbar{position:fixed;left:50%;transform:translateX(-50%);z-index:95;
  bottom:calc(20px + env(safe-area-inset-bottom,0px));
  display:flex;align-items:center;gap:18px;padding:14px 18px;
  background:var(--paper);border:1px solid var(--blue-100);border-radius:12px;
  box-shadow:0 12px 40px rgba(17,17,17,.14);max-width:calc(100vw - 32px)}
.dealbar[hidden]{display:none}
.dealbar__text{font-size:16px;font-weight:700;color:var(--ink);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.dealbar__btn{padding:12px 22px;border-radius:8px;border:0;white-space:nowrap;
  background:linear-gradient(88deg,#D6FF6B,#B6F04A);color:#22330a;font-size:15px;font-weight:700;
  transition:filter .3s}
.dealbar__btn:hover{filter:brightness(1.05)}
.dealbar__x{width:30px;height:30px;border:0;background:none;color:var(--faint);
  display:grid;place-items:center;border-radius:50%;transition:background .3s,color .3s}
.dealbar__x:hover{background:var(--line-soft);color:var(--ink)}
.dealbar__x svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2.2}

@media(max-width:900px){
  .fgrid{grid-template-columns:1fr}
  .fcard3{min-height:460px;padding:32px 26px}
  .fcard3__media{margin:24px -26px -32px}
  .dband .wrap{padding-block:80px}
  .dband__title{margin-bottom:48px}
  .dband__grid{grid-template-columns:1fr;gap:36px}
}
@media(max-width:760px){
  .dealbar{left:16px;right:16px;transform:none;max-width:none;gap:10px;padding:12px;
    bottom:calc(84px + env(safe-area-inset-bottom,0px))}
  .dealbar__text{font-size:14px;white-space:normal}
  .dealbar__btn{padding:10px 14px;font-size:13.5px}
}


/* ============ staggered photo collage + proof headline ============ */
.collage{display:flex;align-items:center;justify-content:center;gap:20px;
  margin:0 calc(50% - 50vw);padding:0 8px;overflow:hidden}
.collage figure{margin:0;flex:none;border-radius:16px;overflow:hidden;
  background:linear-gradient(150deg,var(--blue-050),var(--sky));
  display:grid;place-items:center;color:var(--blue-ink);font-size:13px;font-weight:700}
.collage figure img{width:100%;height:100%;object-fit:cover;display:block}
/* each column: its own width, height and vertical drift */
.collage .c1{width:210px;height:300px;transform:translateY(6px)}
.collage .c2{width:250px;display:flex;flex-direction:column;gap:20px;background:none}
.collage .c2 span{border-radius:16px;overflow:hidden;display:grid;place-items:center;
  background:linear-gradient(150deg,var(--blue-050),var(--sky));color:var(--blue-ink);font-size:13px;font-weight:700}
.collage .c2 span:first-child{height:230px}
.collage .c2 span:last-child{height:170px}
.collage .c3{width:340px;height:520px}
.collage .c4{width:250px;display:flex;flex-direction:column;gap:20px;background:none}
.collage .c4 span{border-radius:16px;overflow:hidden;display:grid;place-items:center;
  background:linear-gradient(150deg,var(--blue-050),var(--sky));color:var(--blue-ink);font-size:13px;font-weight:700}
.collage .c4 span:first-child{height:180px}
.collage .c4 span:last-child{height:250px}
.collage .c5{width:210px;height:330px;transform:translateY(-10px)}

.proof2{text-align:center;padding-top:64px}
.proof2 h2{font-size:clamp(26px,3.8vw,44px);line-height:1.35;letter-spacing:-.02em;font-weight:800}
.proof2 h2 b{color:var(--blue);box-shadow:inset 0 -5px 0 0 var(--blue-100)}

@media(max-width:900px){
  .collage{gap:12px}
  .collage .c1,.collage .c5{width:120px;height:190px}
  .collage .c2,.collage .c4{width:140px;gap:12px}
  .collage .c2 span:first-child{height:130px}.collage .c2 span:last-child{height:96px}
  .collage .c4 span:first-child{height:100px}.collage .c4 span:last-child{height:140px}
  .collage .c3{width:190px;height:300px}
  .proof2{padding-top:40px}
}


/* ============ drawn product mocks (stand in for real screenshots) ============ */
.scr{position:absolute;inset:0;background:var(--paper);display:flex;overflow:hidden;text-align:left}
.scr__side{flex:none;width:23%;background:#f9fbfd;border-right:1px solid var(--line);padding:14px 12px;
  display:flex;flex-direction:column;gap:7px}
.scr__brand{display:flex;align-items:center;gap:7px;margin-bottom:8px}
.scr__brand i{width:19px;height:19px;border-radius:6px;background:var(--blue);flex:none}
.scr__brand b{height:7px;width:52px;border-radius:4px;background:var(--line-strong);display:block}
.scr__nav{height:9px;border-radius:5px;background:var(--line);width:78%}
.scr__nav.on{background:var(--blue);width:92%}
.scr__nav.s{width:62%}
.scr__main{flex:1;min-width:0;display:flex;flex-direction:column}
.scr__top{height:38px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:8px;padding:0 14px}
.scr__top i{height:8px;border-radius:4px;background:var(--line);width:88px}
.scr__top b{margin-left:auto;height:22px;width:76px;border-radius:6px;
  background:linear-gradient(98deg,#00B4FF,#0081FF 55%,#A600FF);display:block}
.scr__body{flex:1;padding:14px;display:flex;flex-direction:column;gap:9px;min-height:0}
.scr__row{display:flex;align-items:center;gap:10px;padding:10px;border:1px solid var(--line);
  border-radius:9px;background:var(--paper)}
.scr__av{width:26px;height:26px;border-radius:8px;flex:none;
  background:linear-gradient(135deg,var(--blue),#5b8cff)}
.scr__av.g{background:linear-gradient(135deg,#1ecf9a,#12b3c9)}
.scr__av.o{background:linear-gradient(135deg,#FFC93F,#F5883B)}
.scr__av.v{background:linear-gradient(135deg,#9a8bff,#6248f5)}
.scr__lines{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}
.scr__lines i{height:6px;border-radius:4px;background:var(--line);display:block}
.scr__lines i:first-child{width:46%;background:var(--blue-100)}
.scr__lines i:last-child{width:74%}
.scr__chip{flex:none;font-size:9px;font-weight:700;padding:3px 8px;border-radius:20px;
  background:var(--blue-050);color:var(--blue-strong)}
.scr__chip.ok{background:#e6f7f0;color:#0ea371}
.scr__chip.wt{background:#fdf3e0;color:#c9830a}
/* compact variant for the smaller card slots */
.scr--mini .scr__side{display:none}
.scr--mini .scr__top{height:32px}
.scr--mini .scr__body{padding:11px;gap:7px}
.scr--mini .scr__row{padding:8px}
/* chat variant */
.scr__msg{max-width:78%;padding:8px 11px;border-radius:12px;background:var(--line-soft);
  display:flex;flex-direction:column;gap:5px}
.scr__msg i{height:6px;border-radius:4px;background:var(--line-strong);display:block;width:100%}
.scr__msg i:last-child{width:62%}
.scr__msg.me{margin-left:auto;background:var(--blue);}
.scr__msg.me i{background:rgba(255,255,255,.75)}

/* mock fills its slot */
.hero2__media,.fcard3__media,.collage figure,.collage .c2 span,.collage .c4 span{position:relative}
.hero2__media{background:#f0f6fa}
.fcard3__media{background:#f0f6fa}


/* ============ post preview tile — reads well at any collage size ============ */
.pm{position:absolute;inset:0;display:flex;flex-direction:column;padding:14px;gap:10px;
  background:var(--paper);text-align:left}
.pm__head{display:flex;align-items:center;gap:8px;flex:none}
.pm__av{width:24px;height:24px;border-radius:50%;flex:none;background:linear-gradient(135deg,var(--blue),#5b8cff)}
.pm__av.g{background:linear-gradient(135deg,#1ecf9a,#12b3c9)}
.pm__av.o{background:linear-gradient(135deg,#FFC93F,#F5883B)}
.pm__av.v{background:linear-gradient(135deg,#9a8bff,#6248f5)}
.pm__name{height:6px;width:54px;border-radius:4px;background:var(--line-strong)}
.pm__text{display:flex;flex-direction:column;gap:6px;flex:none}
.pm__text i{height:6px;border-radius:4px;background:var(--line);display:block}
.pm__text i:nth-child(1){width:92%}
.pm__text i:nth-child(2){width:78%}
.pm__text i:nth-child(3){width:56%}
.pm__img{flex:1;min-height:0;border-radius:10px;
  background:linear-gradient(150deg,var(--blue-050),var(--sky))}
.pm__img.a{background:linear-gradient(150deg,#e7fbf2,#bff0dc)}
.pm__img.b{background:linear-gradient(150deg,#fff4e0,#ffe0bd)}
.pm__img.c{background:linear-gradient(150deg,#efeaff,#d9cdff)}
.pm__foot{display:flex;align-items:center;gap:6px;flex:none}
.pm__foot span{height:6px;border-radius:4px;background:var(--line)}
.pm__foot span:nth-child(1){width:26px}
.pm__foot span:nth-child(2){width:18px}
.pm__foot b{margin-left:auto;font-size:9px;font-weight:700;color:var(--blue-strong);
  background:var(--blue-050);padding:3px 7px;border-radius:20px}
/* collage tiles get a real surface + soft lift */
.collage figure,.collage .c2 span,.collage .c4 span{background:var(--paper);
  box-shadow:0 2px 6px rgba(17,17,17,.05),0 14px 30px rgba(17,17,17,.06)}

/* dark feature card: fill the middle instead of leaving a void */
.fcard3__glow{position:absolute;left:0;right:0;bottom:-8%;height:62%;pointer-events:none;
  background:radial-gradient(60% 70% at 50% 100%,rgba(0,128,255,.40),transparent 72%)}
.fcard3__dots{position:absolute;left:0;right:0;bottom:0;height:46%;opacity:.5;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.22) 1px,transparent 1px);
  background-size:13px 13px;
  -webkit-mask:linear-gradient(0deg,#000,transparent);mask:linear-gradient(0deg,#000,transparent)}
.fcard3__sub{margin-top:14px;color:#8fa6b8;font-size:15px;line-height:1.6;position:relative}
.fcard3__big{position:relative}
.fcard3__big small{display:block;margin-top:10px;font-family:var(--font);font-size:14px;
  font-weight:600;color:#8fa6b8;letter-spacing:0}


/* button size ladder — steps down with the viewport */
@media(max-width:900px){
  .btn{padding:13px 30px;font-size:15.5px}
  .btn.lg{padding-top:15px;padding-bottom:15px;font-size:17px}
}
@media(max-width:520px){
  .btn{padding:12px 22px;font-size:15px}
  .btn.lg{padding-top:14px;padding-bottom:14px;font-size:16px}
}

/* card lift on hover, shared easing */
.fcard3,.plan,.stepc,.quote,.tcard,.fcard{transition:transform .25s var(--ease-ui),box-shadow .25s var(--ease-ui)}
.fcard3:hover,.plan:hover,.stepc:hover{transform:translateY(-4px);
  box-shadow:0 18px 40px rgba(25,31,40,.10)}
@media(prefers-reduced-motion:reduce){
  .fcard3:hover,.plan:hover,.stepc:hover{transform:none}
}

/* status chips now use the shared status palette */
.scr__chip.ok{background:var(--ok-bg);color:#0a8f43}
.scr__chip.wt{background:var(--warn2-bg);color:#96760a}
.pill.ok{color:#0a8f43;background:var(--ok-bg)}
.pill.warn{color:#96760a;background:var(--warn2-bg)}
.pill.bad{color:var(--danger);background:var(--danger-bg)}


/* ============ pill tag row (Toss-style rounded labels) ============ */
.tags{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:26px}
.tag{display:inline-flex;align-items:center;gap:6px;padding:9px 16px;border-radius:100px;
  background:var(--line-soft);color:var(--sub);font-size:14.5px;font-weight:600;
  transition:background .2s var(--ease-ui),color .2s var(--ease-ui)}
.tag:hover{background:var(--blue-050);color:var(--blue-strong)}
.tag i{width:6px;height:6px;border-radius:50%;background:var(--blue);display:block;flex:none}
.tag.ok i{background:var(--ok)} .tag.warn i{background:var(--warn2)} .tag.info i{background:var(--info)}

/* ============ list rows (scannable key/value) ============ */
.lrows{border-top:1px solid var(--line);margin-top:28px}
.lrow{display:flex;align-items:center;gap:16px;padding:20px 4px;border-bottom:1px solid var(--line);
  transition:background .2s var(--ease-ui)}
.lrow:hover{background:var(--surface-hover)}
.lrow__ic{width:40px;height:40px;border-radius:12px;flex:none;display:grid;place-items:center;
  background:var(--blue-050);color:var(--blue-strong)}
.lrow__ic svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2}
.lrow__t{min-width:0;flex:1}
.lrow__t b{display:block;font-size:16.5px;font-weight:700}
.lrow__t span{display:block;margin-top:3px;color:var(--muted);font-size:14.5px}
.lrow__v{flex:none;font-family:var(--num);font-weight:700;font-size:17px;color:var(--blue-strong)}

/* ============ decorative pill layer (Jihak bg-pill-row) ============ */
.deco{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.deco__row{position:absolute;display:flex;gap:18px;opacity:.5}
.deco__row span{display:block;width:120px;height:56px;border-radius:100px;background:var(--blue-050)}
.deco__row span:nth-child(2n){background:var(--sky-soft);width:78px}
.deco__row span:nth-child(3n){background:#eef7ee;width:150px}
.deco__row--1{top:8%;left:-6%;transform:rotate(-8deg)}
.deco__row--2{bottom:6%;right:-10%;transform:rotate(6deg)}
.blk{position:relative}
.blk > .wrap{position:relative;z-index:1}

/* count-up keeps its own width so the layout never jumps */
.dnum{font-variant-numeric:tabular-nums}
@media(max-width:900px){
  .deco__row span{width:84px;height:40px}
  .lrow{padding:16px 2px;gap:12px}
  .lrow__ic{width:34px;height:34px;border-radius:10px}
}


/* ---- touch targets: keep every control tappable on a phone ---- */
@media(max-width:900px){
  /* footer links: 22px -> 44px hit area */
  .foot a{padding-block:11px;margin-bottom:0}
  .foot .sns a{padding-block:0;width:44px;height:44px}
  .foot-bot .lg a{display:inline-block;padding-block:10px}
  /* logo + icon buttons */
  .logo{padding-block:6px}
  .dealbar__x{width:40px;height:40px}
  .hban__play{width:40px;height:40px}
  .cbtn{width:44px;height:44px}
  /* carousel dots: small visual, large hit area */
  .dots button,.hban__dots button{position:relative}
  .dots button:after,.hban__dots button:after{content:"";position:absolute;
    left:50%;top:50%;transform:translate(-50%,-50%);width:44px;height:44px}
  /* mock chips stay legible */
  .scr__chip{font-size:10.5px;padding:3px 7px}
}
@media(max-width:400px){
  .scr--mini .scr__chip{display:none}
}


/* header right group must fit a 375px phone */
@media(max-width:900px){
  .nav{gap:12px}
  .nav .right{gap:10px;margin-left:auto}
  .nav .start{padding:10px 16px;font-size:14.5px}
  .burger{width:40px;height:40px;margin-left:0}
  .logo{font-size:18px}
  .logo .m{width:30px;height:30px;font-size:17px}
}
@media(max-width:400px){
  .nav .start{padding:9px 12px;font-size:13.5px}
}


/* ============ hover layer: every interactive thing answers back ============ */
@media (hover:hover) and (pointer:fine){
  /* wordmark */
  .logo{transition:opacity .2s var(--ease-ui)}
  .logo:hover{opacity:.72}

  /* pill tags */
  .tag{cursor:default}
  .tag:hover{background:var(--blue-050);color:var(--blue-strong);transform:translateY(-1px)}

  /* collage tiles lift and sharpen */
  .collage figure,.collage .c2 span,.collage .c4 span{
    transition:transform .3s var(--ease-ui),box-shadow .3s var(--ease-ui)}
  .collage figure:hover,.collage .c2 span:hover,.collage .c4 span:hover{
    transform:translateY(-6px);
    box-shadow:0 6px 14px rgba(25,31,40,.08),0 26px 50px rgba(25,31,40,.12)}

  /* feature showcase list */
  .sync__btn{transition:background .25s var(--ease-ui)}
  .sync__btn:hover .sync__title{color:var(--ink)}

  /* FAQ rows */
  .faq details{transition:background .25s var(--ease-ui),box-shadow .25s var(--ease-ui)}
  .faq summary:hover{color:var(--blue)}
  .faq details:hover{background:var(--surface-hover)}

  /* demo slot picker */
  .pick label{transition:border-color .3s var(--ease-ui),transform .2s var(--ease-ui)}
  .pick label:hover{border-color:var(--blue-100);transform:translateY(-2px)}

  /* comparison rows */
  .cmp__list>li{transition:background .2s var(--ease-ui)}
  .cmp__list>li:hover{background:var(--surface-hover)}

  /* big image cards */
  .card2{transition:transform .3s var(--ease-ui),box-shadow .3s var(--ease-ui)}
  .card2:hover{transform:translateY(-6px);box-shadow:0 26px 50px rgba(25,31,40,.18)}

  /* footer + menu links get a colour answer */
  .foot a{transition:color .2s var(--ease-ui)}
  .menu-description{transition:color .2s var(--ease-ui)}
  #menu ul.sub-menu>li>a:hover .menu-description{color:var(--blue-strong)}

  /* mock rows inside product screens react too */
  .scr__row{transition:border-color .25s var(--ease-ui),box-shadow .25s var(--ease-ui)}
  .hero2__media:hover .scr__row{border-color:var(--blue-100)}

  /* review + step cards */
  .tcard,.quote{transition:transform .25s var(--ease-ui),box-shadow .25s var(--ease-ui)}
  .tcard:hover,.quote:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(25,31,40,.10)}

  /* carousel arrows scale slightly */
  .cbtn,.cards__nav button{transition:background .2s var(--ease-ui),color .2s var(--ease-ui),transform .2s var(--ease-ui)}
  .cbtn:hover,.cards__nav button:hover{transform:scale(1.06)}
}

@media(prefers-reduced-motion:reduce){
  .collage figure:hover,.collage .c2 span:hover,.collage .c4 span:hover,
  .card2:hover,.tcard:hover,.quote:hover,.pick label:hover,.tag:hover,
  .cbtn:hover,.cards__nav button:hover{transform:none}
}


/* ============ real product screenshots fill their slots ============ */
.hero2__media{padding:0;background:var(--line-soft);border:1px solid var(--line)}
.hero2__media img{width:100%;height:100%;object-fit:cover;object-position:top left;display:block}
.fcard3__media img{width:100%;height:100%;object-fit:cover;object-position:top left;display:block}
.sync__item{background:var(--line-soft);padding:0}
.sync__item img{width:100%;height:100%;object-fit:cover;object-position:top left;display:block}
.collage figure img,.collage .c2 span img,.collage .c4 span img{
  width:100%;height:100%;object-fit:cover;object-position:top left;display:block}
/* screenshots read better with a hairline + subtle inner edge */
.hero2__media,.sync__item,.collage figure,.collage .c2 span,.collage .c4 span{
  box-shadow:0 2px 6px rgba(25,31,40,.06),0 18px 40px rgba(25,31,40,.08)}
.hero2__media{box-shadow:0 8px 20px rgba(25,31,40,.08),0 30px 70px rgba(25,31,40,.12)}


/* ============ Threads-flavoured post thread ============
   The platform's signature: round avatars joined by a vertical
   connector line, hairline separators, almost no chrome.        */
.thread{max-width:600px;margin:0 auto;background:var(--paper);
  border:1px solid var(--line);border-radius:20px;padding:6px 22px}
.tpost{position:relative;display:flex;gap:14px;padding:20px 0;
  border-bottom:1px solid var(--line-soft)}
.tpost:last-child{border-bottom:0}
.tpost__col{position:relative;flex:none;width:42px;display:flex;flex-direction:column;align-items:center}
.tpost__av{width:42px;height:42px;border-radius:50%;flex:none;overflow:hidden;
  background:linear-gradient(135deg,var(--blue),#5b8cff);display:grid;place-items:center;
  color:#fff;font-weight:700;font-size:15px}
.tpost__av img{width:100%;height:100%;object-fit:cover}
.tpost__av.g{background:linear-gradient(135deg,#1ecf9a,#12b3c9)}
.tpost__av.o{background:linear-gradient(135deg,#FFC93F,#F5883B)}
.tpost__av.v{background:linear-gradient(135deg,#9a8bff,#6248f5)}
/* the connector line — what makes it read as a thread */
.tpost__line{flex:1;width:2px;margin-top:8px;border-radius:2px;background:var(--line-strong)}
.tpost:last-child .tpost__line{display:none}
.tpost__body{flex:1;min-width:0;padding-bottom:2px}
.tpost__head{display:flex;align-items:center;gap:6px;margin-bottom:6px}
.tpost__name{font-weight:700;font-size:15px;color:#111112;letter-spacing:-.01em}
.tpost__badge{width:15px;height:15px;flex:none}
.tpost__time{margin-left:auto;color:var(--muted);font-size:13.5px;font-variant-numeric:tabular-nums}
.tpost__text{font-size:15.5px;line-height:1.55;color:#111112;overflow-wrap:anywhere}
.tpost__chip{display:inline-flex;align-items:center;gap:5px;margin-top:10px;
  padding:4px 10px;border-radius:100px;font-size:12px;font-weight:700;
  background:var(--blue-050);color:var(--blue-strong)}
.tpost__chip.ok{background:var(--ok-bg);color:#0a8f43}
.tpost__chip.wt{background:var(--warn2-bg);color:#96760a}
.tpost__actions{display:flex;gap:18px;margin-top:12px;color:var(--muted)}
.tpost__actions button{background:none;border:0;padding:0;display:flex;align-items:center;gap:6px;
  color:inherit;font-size:13.5px;font-weight:600;transition:color .2s var(--ease-ui)}
.tpost__actions svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.9}
.tpost__actions button:hover{color:var(--blue)}
.thread__foot{display:flex;align-items:center;gap:10px;padding:16px 0 18px;color:var(--muted);font-size:14px}
.thread__foot .who{display:flex}
.thread__foot .who span{width:22px;height:22px;border-radius:50%;border:2px solid var(--paper);
  margin-left:-8px;background:var(--line-strong)}
.thread__foot .who span:first-child{margin-left:0}
@media(max-width:600px){
  .thread{border-radius:16px;padding:4px 16px}
  .tpost{gap:11px;padding:16px 0}
  .tpost__col,.tpost__av{width:38px}
  .tpost__av{height:38px}
}


/* brand mark is now an image */
.logo img.m{width:34px;height:34px;border-radius:10px;object-fit:contain;
  background:transparent;box-shadow:none;display:block;flex:none}
.foot .logo img.m{width:30px;height:30px}
@media(max-width:900px){.logo img.m{width:30px;height:30px}}


/* CTA buttons became links — keep them looking and behaving like buttons */
a.btn,a.start,a.dealbar__btn{text-decoration:none;cursor:pointer}
a.btn:hover,a.start:hover{text-decoration:none}
.mbar a.btn{flex:1}
.plan a.btn{margin-top:auto;width:100%}
.hero2__cta a.btn,.cta a.btn{display:inline-flex}


/* 4-plan grid */
.plans--4{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.plans--4 .plan{padding:32px 24px}
.plans--4 .plan li{font-size:15px;gap:8px;padding-left:30px}
.plans--4 .plan li svg{width:20px;height:20px}
.plans--4 .plan ul{gap:16px}
.plans--4 .plan__account b{font-size:32px}
.plans--4 .plan .desc{min-height:66px;font-size:14px}
.plan li b{font-weight:800;color:var(--ink)}
@media(max-width:1100px){.plans--4{grid-template-columns:1fr 1fr}}
@media(max-width:700px){.plans--4{grid-template-columns:1fr}}
.cmp__head .tag{margin-left:auto;padding:4px 10px;font-size:12px}


/* trust badges under the hero copy */
.trustrow{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:22px}
.trustrow__item{display:inline-flex;align-items:center;gap:7px;
  font-size:14.5px;font-weight:600;color:var(--sub)}
.trustrow__item svg{width:18px;height:18px;stroke:var(--blue);fill:none;stroke-width:2}
.lrow__v{font-size:13px;padding:4px 10px;border-radius:100px;background:var(--blue-050)}
.lrow__v:not(:empty){font-family:var(--font)}
@media(max-width:900px){.trustrow{gap:8px 14px}.trustrow__item{font-size:13.5px}}


/* ============ flip cards: light front, dark back ============ */
.fgrid{perspective:1600px}
.flip{position:relative;min-height:548px;border-radius:16px}
.flip__inner{position:relative;width:100%;height:100%;min-height:inherit;
  transform-style:preserve-3d;transition:transform .7s var(--ease-out3)}
.flip.is-flipped .flip__inner{transform:rotateY(180deg)}
/* both faces stack in the same box */
.flip .fcard3{position:absolute;inset:0;margin:0;
  -webkit-backface-visibility:hidden;backface-visibility:hidden}
.flip .fcard3--back{transform:rotateY(180deg)}
/* the flip owns the lift, not the faces */
.flip .fcard3:hover{transform:none;box-shadow:none}
.flip .fcard3--back:hover{transform:rotateY(180deg)}
.flip{transition:transform .25s var(--ease-ui),box-shadow .25s var(--ease-ui)}
.flip:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(25,31,40,.10)}

/* affordance: a small rotate button, bottom-right */
.flip__btn{position:absolute;right:18px;bottom:18px;z-index:3;
  width:40px;height:40px;border-radius:50%;border:1px solid var(--line-strong);
  background:var(--paper);color:var(--ink);display:grid;place-items:center;
  transition:background .25s var(--ease-ui),color .25s var(--ease-ui),transform .35s var(--ease-ui)}
.flip__btn svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:2}
.flip__btn:hover{background:var(--blue);color:#fff;border-color:var(--blue)}
.flip.is-flipped .flip__btn{transform:rotate(-180deg);
  background:rgba(255,255,255,.14);color:#fff;border-color:rgba(255,255,255,.34)}
.flip__hint{position:absolute;right:66px;bottom:29px;z-index:3;
  font-size:12.5px;font-weight:600;color:var(--muted);
  opacity:0;transition:opacity .25s var(--ease-ui);pointer-events:none;white-space:nowrap}
.flip:hover .flip__hint{opacity:1}
.flip.is-flipped .flip__hint{color:#8fa6b8}

@media(max-width:900px){
  .flip{min-height:470px}
  .flip__btn{right:14px;bottom:14px}
  .flip__hint{display:none}
}
@media(prefers-reduced-motion:reduce){
  .flip__inner{transition:none}
  .flip:hover{transform:none}
}


/* features that are not shipped yet read as pending, not as promises */
.plan li.soon{color:var(--muted)}
.plan li.soon svg{stroke:var(--faint)}
.soon__tag{margin-left:8px;padding:2px 8px;border-radius:100px;
  background:var(--line-soft);color:var(--muted);font-size:11.5px;font-weight:700;white-space:nowrap}
.plan__account b{overflow-wrap:anywhere}


/* ============ deal bar must not cover the hero mockup ============ */
.dealbar{opacity:0;visibility:hidden;transform:translateX(-50%) translateY(12px);
  transition:opacity .4s var(--ease-out3),transform .4s var(--ease-out3),visibility .4s}
.dealbar.is-in{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
@media(max-width:760px){
  .dealbar{transform:translateY(12px)}
  .dealbar.is-in{transform:translateY(0)}
}

/* ============ before / after: the problem, stated in two frames ============ */
.ba{display:grid;grid-template-columns:1fr auto 1fr;gap:28px;align-items:stretch}
.ba__card{position:relative;border-radius:20px;overflow:hidden;min-height:440px;display:flex;
  flex-direction:column;justify-content:flex-end;isolation:isolate}
.ba__card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.ba__card:after{content:"";position:absolute;inset:0;z-index:-1}
.ba__card--before:after{background:linear-gradient(180deg,rgba(9,14,24,.15) 30%,rgba(9,14,24,.88))}
.ba__card--after:after{background:linear-gradient(180deg,rgba(9,30,60,.08) 30%,rgba(4,26,56,.80))}
.ba__tag{position:absolute;top:22px;left:22px;z-index:1;padding:6px 14px;border-radius:100px;
  font-size:13px;font-weight:800;letter-spacing:.02em}
.ba__card--before .ba__tag{background:rgba(255,255,255,.18);color:#fff;backdrop-filter:blur(6px)}
.ba__card--after .ba__tag{background:var(--blue);color:#fff}
.ba__body{position:relative;padding:28px;color:#fff}
.ba__body h3{font-size:clamp(20px,2.4vw,27px);line-height:1.35;letter-spacing:-.02em}
.ba__body ul{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-direction:column;gap:9px}
.ba__body li{display:flex;align-items:flex-start;gap:9px;font-size:15px;color:rgba(255,255,255,.86)}
.ba__body li svg{width:17px;height:17px;flex:none;margin-top:3px;stroke:currentColor;fill:none;stroke-width:2.4}
.ba__arrow{align-self:center;width:56px;height:56px;border-radius:50%;flex:none;
  background:var(--paper);border:1px solid var(--line);display:grid;place-items:center;
  box-shadow:var(--shadow)}
.ba__arrow svg{width:24px;height:24px;stroke:var(--blue);fill:none;stroke-width:2.4}
@media(max-width:900px){
  .ba{grid-template-columns:1fr;gap:16px}
  .ba__card{min-height:340px}
  .ba__arrow{transform:rotate(90deg);margin:0 auto}
}

/* ============ feature cards: each one gets its own visual language ============ */
.fcard3__media{position:relative;background:var(--wash)}
/* crop the screenshot to the part that actually matters */
.fcard3__media img{transform-origin:top left}
.fcard3__media--zoom img{width:175%;height:auto;min-height:100%;object-fit:cover;object-position:top left}
/* a number/label overlay so the three cards never read the same */
.fcard3__stat{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:18px 20px;
  background:linear-gradient(180deg,rgba(255,255,255,0),rgba(255,255,255,.96) 45%);
  display:flex;align-items:baseline;gap:9px}
.fcard3__stat b{font-family:var(--num);font-size:26px;font-weight:800;color:var(--blue);letter-spacing:-.02em}
.fcard3__stat span{font-size:14px;font-weight:600;color:var(--sub)}

.dnum sup{font-size:.42em;font-weight:600;opacity:.75}
.dlabel{margin-top:16px;line-height:1.5;font-size:16px;color:#cfe0f5}
.dband__grid>div{padding-inline:10px}


/* ============ hero: soft pastel field, try-it-now composer ============ */
.hero2{position:relative;background:var(--paper)}






.hero2 .wrap{position:relative;z-index:1}

/* composer */
.try{margin:34px 0 0}
.try__box{display:flex;align-items:center;gap:10px;padding:10px 10px 10px 18px;
  background:var(--paper);border:1px solid var(--line-strong);border-radius:18px;
  box-shadow:0 2px 6px rgba(25,31,40,.05),0 18px 44px rgba(25,31,40,.10);
  transition:border-color .2s var(--ease-ui),box-shadow .2s var(--ease-ui)}
.try__box:focus-within{border-color:var(--blue);box-shadow:0 2px 6px rgba(0,128,255,.10),0 20px 48px rgba(0,128,255,.18)}
.try__box input{flex:1;min-width:0;border:0;outline:0;background:none;font-size:16.5px;color:var(--ink);padding:10px 0}
.try__box input::placeholder{color:var(--faint)}
.try__go{flex:none;width:42px;height:42px;border-radius:50%;border:0;background:var(--blue);color:#fff;
  display:grid;place-items:center;transition:background .2s var(--ease-ui),transform .15s var(--ease-ui)}
.try__go:hover{background:var(--blue-strong);transform:translateY(-1px)}
.try__go:disabled{background:var(--line-strong);cursor:not-allowed;transform:none}
.try__go svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:2.4}
.try__chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:16px}
.try__chip{padding:8px 16px;border-radius:100px;border:1px solid var(--line-strong);background:var(--paper);
  font-size:14px;font-weight:600;color:var(--sub);cursor:pointer;
  transition:border-color .2s var(--ease-ui),color .2s var(--ease-ui),background .2s var(--ease-ui)}
.try__chip:hover{border-color:var(--blue);color:var(--blue);background:var(--blue-050)}
.try__hint{margin-top:14px;font-size:13.5px;color:var(--muted);text-align:center}

/* results */
.try__out{margin-top:22px;display:grid;gap:12px}
.try__out[hidden]{display:none}
.draft{background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:20px 22px;
  text-align:left;box-shadow:var(--shadow);opacity:0;transform:translateY(10px);
  animation:draftIn .5s var(--ease-out3) forwards}
.draft:nth-child(2){animation-delay:.1s}
.draft:nth-child(3){animation-delay:.2s}
@keyframes draftIn{to{opacity:1;transform:none}}
.draft__head{display:flex;align-items:center;gap:9px;margin-bottom:10px}
.draft__av{width:26px;height:26px;border-radius:50%;background:linear-gradient(135deg,var(--blue),#5b8cff);flex:none}
.draft__name{font-size:13.5px;font-weight:700;color:var(--ink)}
.draft__tag{margin-left:auto;font-size:11.5px;font-weight:700;padding:3px 9px;border-radius:100px;
  background:var(--blue-050);color:var(--blue-strong)}
.draft__text{font-size:15.5px;line-height:1.7;color:var(--ink);white-space:pre-line}
.draft__meta{margin-top:12px;display:flex;gap:14px;font-size:12.5px;color:var(--muted)}
@media(prefers-reduced-motion:reduce){.draft{opacity:1;transform:none;animation:none}}
@media(max-width:760px){
  
  .try__box{padding-left:14px;border-radius:15px}
  .try__box input{font-size:15.5px}
}


/* ============ flip on hover, brand-blue back face ============ */
@media (hover:hover) and (pointer:fine){
  .flip:hover .flip__inner{transform:rotateY(180deg)}
  .flip:hover .flip__btn{transform:rotate(-180deg);
    background:rgba(255,255,255,.18);color:#fff;border-color:rgba(255,255,255,.38)}
  .flip:hover .flip__hint{color:rgba(255,255,255,.85)}
}
/* clicking still works (touch + keyboard), and wins over hover */
.flip.is-flipped .flip__inner{transform:rotateY(180deg)}

/* back face: main blue instead of the muddy navy */
.fcard3--back,
.flip .fcard3--dark{
  background:linear-gradient(150deg,#0080ff 0%,#0b6ae0 52%,#004fff 100%);
  color:#fff}
.flip .fcard3--dark .fcard3__label{color:#cfe4ff}
.flip .fcard3--dark .fcard3__sub{color:#e2eeff}
.flip .fcard3--dark .fcard3__big{color:#fff}
.flip .fcard3--dark .fcard3__big small{color:#cfe4ff}
/* soften the overlays so they read on blue, not muddy */
.flip .fcard3__glow{background:radial-gradient(62% 72% at 50% 100%,rgba(255,255,255,.34),transparent 72%)}
.flip .fcard3__dots{opacity:.32;
  background-image:radial-gradient(rgba(255,255,255,.4) 1px,transparent 1px)}


/* hero: clean white, no pastel blobs */
.hero2{background:
  radial-gradient(760px 340px at 50% -6%, var(--blue-050), transparent 62%),
  var(--paper)}


/* ============ hero split: copy left, safety panel right ============ */
.hsplit{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;text-align:left}
.hsplit .try{margin-left:0;margin-right:0;max-width:none}
.hsplit .try__chips,.hsplit .try__hint{justify-content:flex-start;text-align:left}

/* the one thing we sell, shown as live state */
.guard{background:var(--paper);border:1px solid var(--line);border-radius:20px;
  box-shadow:0 2px 8px rgba(25,31,40,.05),0 26px 60px rgba(25,31,40,.10);overflow:hidden}
.guard__top{display:flex;align-items:center;gap:10px;padding:16px 20px;border-bottom:1px solid var(--line)}
.guard__dot{width:9px;height:9px;border-radius:50%;background:var(--ok);flex:none;
  box-shadow:0 0 0 4px rgba(14,208,88,.16)}
.guard__title{font-size:14.5px;font-weight:700}
.guard__live{margin-left:auto;font-size:11.5px;font-weight:700;color:var(--ok);
  background:var(--ok-bg);padding:3px 10px;border-radius:100px}
.guard__rows{padding:8px 20px 16px}
.guard__row{display:flex;align-items:center;gap:12px;padding:13px 0;border-bottom:1px solid var(--line-soft)}
.guard__row:last-child{border-bottom:0}
.guard__ic{width:32px;height:32px;border-radius:10px;flex:none;display:grid;place-items:center;
  background:var(--blue-050);color:var(--blue-strong)}
.guard__ic svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2.1}
.guard__t{flex:1;min-width:0}
.guard__t b{display:block;font-size:14.5px;font-weight:700}
.guard__t span{display:block;font-size:13px;color:var(--muted);margin-top:2px}
.guard__v{flex:none;font-family:var(--num);font-size:14px;font-weight:700;color:var(--ok)}
.guard__foot{padding:14px 20px;background:var(--wash);font-size:13px;color:var(--sub);
  display:flex;align-items:center;gap:8px}
.guard__foot svg{width:16px;height:16px;stroke:var(--blue);fill:none;stroke-width:2.2;flex:none}

/* numbered steps, verb-first */
.steps3{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.step3__n{font-family:var(--num);font-size:15px;font-weight:800;color:var(--faint);letter-spacing:.06em}
.step3 h3{font-size:19px;font-weight:700;margin:14px 0 8px;letter-spacing:-.02em}
.step3 p{color:var(--muted);font-size:15px;line-height:1.65}
.step3{padding-top:22px;border-top:2px solid var(--line)}
.step3--on{border-top-color:var(--blue)}
.step3--on .step3__n{color:var(--blue)}

@media(max-width:980px){
  .hsplit{grid-template-columns:1fr;gap:40px;text-align:center}
  .hsplit .try__chips,.hsplit .try__hint{justify-content:center;text-align:center}
  .steps3{grid-template-columns:1fr;gap:20px}
}

.plan__best{margin:10px 0 0;font-size:13.5px;line-height:1.5;color:var(--sub);
  padding:10px 12px;border-radius:10px;background:var(--wash)}
.plan__best b{color:var(--blue-strong);font-weight:800;margin-right:4px}
.plan.pop .plan__best{background:var(--blue-050)}

/* brand mark is a glassy 3D render — needs more room to read */
.logo img.m{width:40px;height:40px;border-radius:0}
.logo{gap:8px;font-size:20px}
.foot .logo img.m{width:34px;height:34px}
@media(max-width:900px){.logo img.m{width:34px;height:34px}}


/* ============ bento: cards of different weights, interlocked ============ */
.bento{display:grid;grid-template-columns:repeat(6,1fr);gap:16px}
.bx{position:relative;background:var(--paper);border:1px solid var(--line);border-radius:18px;
  overflow:hidden;display:flex;flex-direction:column;min-height:280px;
  transition:transform .3s var(--ease-ui),box-shadow .3s var(--ease-ui),border-color .3s var(--ease-ui)}
.bx:hover{transform:translateY(-4px);border-color:var(--blue-100);
  box-shadow:0 18px 44px rgba(25,31,40,.10)}
.bx--w3{grid-column:span 3}
.bx--w2{grid-column:span 2}
.bx--w4{grid-column:span 4}
.bx--w6{grid-column:span 6}
.bx--tall{min-height:360px}
/* the visual sits on top, the words underneath */
.bx__vis{flex:1;min-height:0;position:relative;overflow:hidden;background:var(--wash);
  border-bottom:1px solid var(--line)}
.bx__vis img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top left}
.bx__vis--zoom img{width:190%;height:auto;min-height:100%}
.bx__vis--right img{object-position:top right}
.bx__body{flex:none;padding:20px 22px 22px}
.bx__body h3{font-size:17.5px;font-weight:700;letter-spacing:-.02em;margin-bottom:7px}
.bx__body p{font-size:14.5px;line-height:1.6;color:var(--muted)}
.bx__go{position:absolute;top:14px;right:14px;z-index:2;width:30px;height:30px;border-radius:50%;
  background:rgba(255,255,255,.92);border:1px solid var(--line);display:grid;place-items:center;
  color:var(--muted);opacity:0;transform:translateY(-4px);
  transition:opacity .25s var(--ease-ui),transform .25s var(--ease-ui),color .25s var(--ease-ui)}
.bx__go svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2.2}
.bx:hover .bx__go{opacity:1;transform:none;color:var(--blue)}
/* dark accent tile */
.bx--dark{background:linear-gradient(150deg,#0080ff 0%,#0b6ae0 52%,#004fff 100%);border-color:transparent;color:#fff}
.bx--dark .bx__vis{background:transparent;border-bottom:0;display:grid;place-items:center;padding:24px}
.bx--dark .bx__body h3{color:#fff}
.bx--dark .bx__body p{color:#dbe9ff}
.bx--dark .bx__big{font-family:var(--num);font-size:clamp(34px,4vw,50px);font-weight:800;
  letter-spacing:-.03em;color:#fff;line-height:1}
.bx--dark .bx__sub{margin-top:8px;font-size:14px;color:#cfe4ff;text-align:center}

/* "그 외에도" — dense chip row, the right home for small features */
.more{margin-top:28px;text-align:center}
.more__label{font-size:14px;font-weight:600;color:var(--muted);margin-bottom:14px}
.more__row{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.more__chip{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:10px;
  border:1px solid var(--line);background:var(--paper);font-size:13.5px;font-weight:600;color:var(--sub);
  transition:border-color .2s var(--ease-ui),color .2s var(--ease-ui)}
.more__chip:hover{border-color:var(--blue-100);color:var(--blue-strong)}
.more__chip svg{width:15px;height:15px;stroke:var(--blue);fill:none;stroke-width:2.2}

/* mid-page CTA so the ask repeats */
.midcta{text-align:center;padding:44px 24px;border-radius:20px;background:var(--wash);
  border:1px solid var(--line)}
.midcta h3{font-size:clamp(20px,2.6vw,28px);font-weight:800;letter-spacing:-.02em}
.midcta p{margin-top:10px;color:var(--muted);font-size:16px}
.midcta .row{display:flex;gap:10px;justify-content:center;margin-top:22px;flex-wrap:wrap}

@media(max-width:980px){
  .bento{grid-template-columns:repeat(2,1fr)}
  .bx--w3,.bx--w2,.bx--w4,.bx--w6{grid-column:span 1}
  .bx--w6{grid-column:span 2}
}
@media(max-width:620px){
  .bento{grid-template-columns:1fr}
  .bx--w6{grid-column:span 1}
  .bx{min-height:240px}
}

/* demo thread sits inside the hero, a touch tighter than the standalone one */
/* composer results — three drafts pop out of the search box, one after another */
.drafts{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;align-items:stretch;text-align:left}
.dcard{display:flex;flex-direction:column;gap:10px;min-height:186px;padding:16px 15px 14px;
  border:1px solid var(--line);border-radius:14px;background:var(--paper);
  box-shadow:0 1px 2px rgba(25,31,40,.04),0 12px 28px rgba(25,31,40,.07);
  opacity:0;transform:translateY(-10px) scale(.94);transform-origin:50% 0;
  transition:opacity .34s var(--ease-out3),transform .46s cubic-bezier(.22,1.34,.42,1);
  transition-delay:var(--d,0ms)}
.dcard.in{opacity:1;transform:none}
.dcard__head{display:flex;align-items:center;gap:8px}
.dcard__head .tpost__av{width:26px;height:26px;font-size:12px}
.dcard__name{font-weight:700;font-size:13.5px;color:#111112;letter-spacing:-.01em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dcard__tag{margin-left:auto;flex:none;padding:4px 9px;border-radius:100px;
  background:var(--blue-050);color:var(--blue-strong);font-size:11.5px;font-weight:700;letter-spacing:-.01em}
.dcard__text{flex:1;margin:0;font-size:13.8px;line-height:1.62;color:var(--sub);
  white-space:pre-line;overflow-wrap:anywhere}
.dcard__foot{display:flex;align-items:center;gap:10px;padding-top:11px;border-top:1px solid var(--line-soft)}
.dcard__state{font-size:12px;color:var(--muted)}
.dcard__foot .tpost__actions{margin:0 0 0 auto;gap:12px}
.dcard__foot .tpost__actions svg{width:16px;height:16px}

/* skeleton while the drafts are being written */
.drafts--loading .dcard{min-height:186px;
  background:linear-gradient(100deg,var(--line-soft) 30%,#fff 50%,var(--line-soft) 70%) 0 0/300% 100%;
  border-color:var(--line-soft);box-shadow:none;animation:draftShimmer 1.1s linear infinite}
@keyframes draftShimmer{to{background-position:-300% 0}}

@media (max-width:900px){
  .drafts{grid-template-columns:1fr;gap:10px}
  .dcard{min-height:0}
}
@media (prefers-reduced-motion:reduce){
  .dcard{transition-duration:.01ms;transform:none}
  .drafts--loading .dcard{animation:none}
}
.try__out{margin-top:20px}

/* keep the line breaks the draft actually has */
.tpost__text{white-space:pre-line}


/* glass icons that match the brand mark */
.glass{width:64px;height:64px;flex:none;object-fit:contain;display:block}
.bx__icon{position:absolute;top:16px;left:18px;z-index:2;width:52px;height:52px;object-fit:contain;
  filter:drop-shadow(0 6px 14px rgba(0,128,255,.22))}
.bx--dark .bx__icon{filter:drop-shadow(0 6px 16px rgba(0,0,0,.28))}
.guard__glass{width:30px;height:30px;object-fit:contain}
.step3__icon{width:56px;height:56px;object-fit:contain;margin-bottom:14px;display:block;
  filter:drop-shadow(0 6px 14px rgba(0,128,255,.18))}

/* icon sits with the words, not on top of the screenshot */
.bx__icon{position:static;width:38px;height:38px;flex:none;object-fit:contain;
  filter:drop-shadow(0 4px 10px rgba(0,128,255,.24))}
.bx__head{display:flex;align-items:center;gap:11px;margin-bottom:7px}
.bx__head h3{margin-bottom:0}
.bx--dark .bx__icon{filter:drop-shadow(0 4px 12px rgba(0,0,0,.3))}
.step3__icon{filter:drop-shadow(0 6px 14px rgba(0,128,255,.2))}

.hero__deco{display:block;width:100%;max-width:520px;margin:0 auto 18px;object-fit:contain}
@media(max-width:980px){.hero__deco{max-width:420px}}

.plans--3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:900px){.plans--3{grid-template-columns:1fr}}

/* hero back to the layout that read best: big headline left, copy+CTA right, wide shot under */
.hero2__top{display:grid;grid-template-columns:1.2fr 1fr;gap:64px;align-items:start;margin-bottom:52px}
.hero2__title{font-size:clamp(34px,5.4vw,60px);line-height:1.22;letter-spacing:-.035em;margin:0}
.hero2__aside{padding-top:12px}
.hero2__lede{font-size:17.5px;line-height:1.7;color:var(--sub);margin:0 0 26px}
.hero2__lede b{color:var(--blue);font-weight:700}
.hero2__cta{display:flex;gap:12px;flex-wrap:wrap}
.hero2__media{border-radius:18px;overflow:hidden;border:1px solid var(--line);
  box-shadow:0 8px 24px rgba(25,31,40,.08),0 40px 80px rgba(25,31,40,.12);
  max-height:620px}
.hero2__media img{width:100%;height:auto;display:block}
@media(max-width:980px){
  .hero2__top{grid-template-columns:1fr;gap:26px;margin-bottom:34px}
  .hero2__aside{padding-top:0}
}

/* composer lives under the headline now, so it inherits the left column width */
.hero2__try-lede{margin:22px 0 14px;font-size:16.5px;color:var(--sub)}
.hero2__top .try{max-width:none;margin:0}
.hero2__top .try__chips,.hero2__top .try__hint{justify-content:flex-start;text-align:left}
.hero2__top .try__box{border-radius:16px}
.hero2__top .try__out{max-height:none}
@media(max-width:980px){
  .hero2__try-lede{margin-top:18px}
  .hero2__top .try__chips,.hero2__top .try__hint{justify-content:center;text-align:center}
}


/* ============ closing CTA: airy, mark-led, one action ============ */
.endcta{position:relative;text-align:center;padding:76px 24px 84px;border-radius:28px;
  background:radial-gradient(620px 300px at 50% 18%, var(--blue-050), transparent 68%), var(--paper)}
.endcta__mark{width:clamp(130px,16vw,190px);height:auto;margin:0 auto 34px;display:block;
  filter:drop-shadow(0 22px 44px rgba(0,80,200,.18))}
.endcta__title{font-size:clamp(28px,4.2vw,46px);line-height:1.28;letter-spacing:-.035em;
  font-weight:800;color:var(--ink);margin-bottom:34px}
.endcta__btn{padding:17px 44px;font-size:17.5px;border-radius:12px}
.endcta__sub{margin-top:20px;font-size:15px}
.endcta__sub a{color:var(--muted);font-weight:600;text-decoration:none;
  border-bottom:1px solid var(--line-strong);padding-bottom:2px;transition:color .2s var(--ease-ui),border-color .2s var(--ease-ui)}
.endcta__sub a:hover{color:var(--blue);border-color:var(--blue)}
@media(max-width:760px){
  .endcta{padding:52px 18px 60px;border-radius:22px}
  .endcta__mark{margin-bottom:26px}
  .endcta__title{margin-bottom:26px}
  .endcta__btn{padding:15px 32px;font-size:16px}
}

/* tall cards back, three across */
.fgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;perspective:1600px}
.flip{min-height:640px}
.fcard3{padding:40px 34px}
.fcard3__ic{width:44px;height:44px;object-fit:contain;margin-bottom:16px;display:block}
.fcard3__media{margin:28px -34px -40px;flex:1;min-height:240px;border-radius:12px 12px 0 0;overflow:hidden}
.fcard3__media img{width:170%;height:auto;min-height:100%;object-fit:cover;object-position:top left}
.head .tags{margin-top:26px}
@media(max-width:980px){.fgrid{grid-template-columns:1fr}.flip{min-height:480px}}


/* ============ floating pill tabs riding on top of the product shot ============ */
.heroshot{position:relative;padding-top:30px}
.ftabs{position:sticky;top:calc(var(--header-height) - var(--minimize-height) + 14px);z-index:30;margin:0 auto;width:max-content;
  display:flex;align-items:center;gap:4px;padding:7px;
  background:rgba(255,255,255,.82);backdrop-filter:blur(14px) saturate(160%);
  border:1px solid rgba(255,255,255,.7);border-radius:100px;
  box-shadow:0 8px 20px rgba(25,31,40,.10),0 26px 60px rgba(25,31,40,.14);
  max-width:calc(100% - 28px);overflow-x:auto;scrollbar-width:none}
.ftabs::-webkit-scrollbar{display:none}
.ftab{flex:none;border:0;background:none;border-radius:100px;padding:11px 22px;
  font-size:15px;font-weight:700;color:var(--sub);white-space:nowrap;cursor:pointer;
  transition:background .25s var(--ease-ui),color .25s var(--ease-ui)}
.ftab:hover{color:var(--ink)}
.ftab.is-on{background:var(--blue);color:#fff;box-shadow:0 6px 16px rgba(0,128,255,.34)}
.heroshot .hero2__media{margin-top:0}
.heroshot .hero2__media img{transition:opacity .3s var(--ease-ui)}
.heroshot .hero2__media.is-swapping img{opacity:.35}
@media(max-width:760px){
  .heroshot{padding-top:26px}
  .ftabs{padding:5px;gap:2px;left:16px;right:16px;transform:none;max-width:none;justify-content:flex-start}
  .ftab{padding:9px 15px;font-size:13.5px}
}


/* ============ scroll-linked feature showcase (copy left, shot right) ============ */
.show{position:relative;background:var(--wash)}
.show__rail{position:absolute;left:34px;top:50%;transform:translateY(-50%);z-index:2;
  display:flex;flex-direction:column;gap:9px}
.show__rail i{display:block;width:22px;height:2px;border-radius:2px;background:var(--line-strong);
  transition:width .3s var(--ease-ui),background .3s var(--ease-ui)}
.show__rail i.on{width:34px;background:var(--ink)}
.show__row{display:grid;grid-template-columns:1fr 1.35fr;gap:72px;align-items:center;
  padding-block:104px}
.show__row+.show__row{border-top:1px solid var(--line)}
.show__row:nth-child(even) .show__copy{order:2}
.show__row:nth-child(even) .show__media{order:1}
.show__copy h3{font-size:clamp(24px,3vw,34px);line-height:1.34;letter-spacing:-.03em;font-weight:800}
.show__copy p{margin-top:18px;font-size:17px;line-height:1.7;color:var(--muted)}
.show__more{display:inline-flex;align-items:center;gap:10px;margin-top:30px;
  padding:13px 13px 13px 24px;border-radius:100px;background:var(--ink);color:#fff;
  font-size:15.5px;font-weight:700;text-decoration:none;
  transition:background .25s var(--ease-ui),transform .2s var(--ease-ui)}
.show__more:hover{background:var(--blue);transform:translateY(-2px)}
.show__more i{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;
  background:rgba(255,255,255,.18)}
.show__more svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2.4}
/* the shot, with a card floating over it */
.show__media{position:relative}
.show__shot{border-radius:18px;overflow:hidden;border:1px solid var(--line);background:var(--paper);
  box-shadow:0 4px 14px rgba(25,31,40,.06),0 30px 70px rgba(25,31,40,.10)}
.show__shot img{width:100%;height:auto;display:block}
.show__float{position:absolute;right:-18px;bottom:-22px;width:262px;z-index:2;
  background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:18px;
  box-shadow:0 10px 26px rgba(25,31,40,.10),0 34px 70px rgba(25,31,40,.16)}
.show__float b{display:block;font-size:15.5px;font-weight:800;letter-spacing:-.02em}
.show__float span{display:block;margin-top:5px;font-size:13.5px;color:var(--muted);line-height:1.5}
.show__float .pill{display:inline-flex;align-items:center;gap:6px;margin-bottom:11px;
  padding:4px 10px;border-radius:100px;background:var(--blue-050);color:var(--blue-strong);
  font-size:11.5px;font-weight:700}
.show__float .bar{margin-top:13px;height:6px;border-radius:6px;background:var(--line-soft);overflow:hidden}
.show__float .bar i{display:block;height:100%;border-radius:6px;background:var(--blue)}
@media(max-width:980px){
  .show__rail{display:none}
  .show__row{grid-template-columns:1fr;gap:34px;padding-block:64px}
  .show__row:nth-child(even) .show__copy{order:1}
  .show__row:nth-child(even) .show__media{order:2}
  .show__float{right:12px;bottom:-16px;width:216px;padding:15px}
}

/* wider content, and the floating card must stay inside the gutter */
.show__float{right:0;bottom:-20px}
.show__row{gap:80px}
.hero2__media,.heroshot{max-width:none}
@media(max-width:1460px){.wrap{max-width:1200px}}


/* tab bar rides with you through the product shot */
.heroshot{padding-top:0}
/* .ftabs의 margin-bottom:-26px 제거 — .heroshot 시절 잔재이고, 되살아나면 겹친다 */
.heroshot .hero2__media{margin-top:0}
/* give the sticky room to travel: the shot column is the scroll track */
.heroshot{position:relative}
@media(max-width:760px){
  .ftabs{left:auto;right:auto;width:calc(100% - 32px);margin-inline:16px;
    justify-content:flex-start}
}

/* sticky needs a clean overflow chain */
.hero2{overflow:visible}
.hero2__media{overflow:hidden}
/* first card matches the other two (light), so the row reads as one set */
.flip .fcard3:not(.fcard3--back){background:var(--line-soft);color:var(--ink)}
.flip .fcard3:not(.fcard3--back) .fcard3__label{color:var(--muted)}
.flip .fcard3:not(.fcard3--back) .fcard3__title{color:var(--ink)}
.flip .fcard3:not(.fcard3--back) .fcard3__sub{color:var(--sub)}
.flip .fcard3:not(.fcard3--back) .fcard3__big{color:var(--blue)}
.flip .fcard3:not(.fcard3--back) .fcard3__big small{color:var(--muted)}
.flip .fcard3:not(.fcard3--back) .fcard3__glow,
.flip .fcard3:not(.fcard3--back) .fcard3__dots{display:none}

/* hero: headline + composer left, supporting copy + CTA right */
.hero2__top{display:grid;grid-template-columns:1.25fr .85fr;gap:64px;align-items:start;
  margin-bottom:46px;text-align:left}
.hero2__left{min-width:0}
.hero2__aside{padding-top:14px}
@media(max-width:1100px){
  .hero2__top{grid-template-columns:1fr;gap:30px}
  .hero2__aside{padding-top:0}
}

/* headline + composer left-aligned, product shot centered below */
.hero2{text-align:left}
.hero2__top{display:grid;grid-template-columns:1.25fr .85fr;gap:64px;align-items:start;
  margin-bottom:46px;text-align:left}
.hero2__left{min-width:0}
.hero2__left .try{max-width:620px;margin:0}
.hero2__aside{padding-top:14px}
.heroshot{max-width:1200px;margin:0 auto;text-align:center}
.heroshot .hero2__media{margin:0 auto}
@media(max-width:1100px){
  .hero2__top{grid-template-columns:1fr;gap:28px}
  .hero2__aside{padding-top:0}
}


/* ============ thread laid over a real photo ============ */
.tscene{position:relative;border-radius:24px;overflow:hidden;min-height:620px;
  box-shadow:0 8px 24px rgba(25,31,40,.10),0 40px 90px rgba(25,31,40,.16)}
.tscene__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.tscene:after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(100deg,rgba(12,16,24,.62) 0%,rgba(12,16,24,.30) 44%,rgba(12,16,24,.05) 72%)}
.tscene__inner{position:relative;z-index:2;display:grid;grid-template-columns:1.05fr .95fr;
  gap:48px;align-items:center;padding:64px 56px}
.tscene__copy{color:#fff;max-width:420px}
.tscene__copy h2{font-size:clamp(26px,3.4vw,40px);line-height:1.3;letter-spacing:-.03em;font-weight:800}
.tscene__copy p{margin-top:16px;font-size:17px;line-height:1.7;color:rgba(255,255,255,.82)}
.tscene__ic{width:54px;height:54px;object-fit:contain;margin-bottom:20px;display:block;
  filter:drop-shadow(0 8px 20px rgba(0,0,0,.35))}
.tscene__stat{display:flex;gap:26px;margin-top:28px;padding-top:22px;
  border-top:1px solid rgba(255,255,255,.22)}
.tscene__stat div b{display:block;font-family:var(--num);font-size:24px;font-weight:800;color:#fff}
.tscene__stat div span{font-size:13px;color:rgba(255,255,255,.7)}
/* the thread card floats over the photo */
.tscene .thread{background:rgba(255,255,255,.96);backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.8);border-radius:20px;max-width:none;margin:0;
  box-shadow:0 12px 30px rgba(0,0,0,.18),0 40px 80px rgba(0,0,0,.24)}
@media(max-width:980px){
  .tscene__inner{grid-template-columns:1fr;gap:30px;padding:40px 24px}
  .tscene__copy{max-width:none}
  .tscene:after{background:linear-gradient(180deg,rgba(12,16,24,.66) 0%,rgba(12,16,24,.52) 100%)}
}

/* ============ closing CTA: gradient must not clip, mark reads as an app ============ */
.endcta{border-radius:0;background:none;padding:96px 24px 104px;overflow:visible}
.blk--secondary:has(.endcta){position:relative;overflow:hidden}
.endcta:before{content:"";position:absolute;left:50%;top:-10%;transform:translateX(-50%);
  width:min(1100px,120vw);height:520px;z-index:0;pointer-events:none;
  background:radial-gradient(closest-side,var(--blue-050),transparent 78%)}
.endcta>*{position:relative;z-index:1}
/* app-icon tile so the mark looks like it lives in a product */
.endcta__tile{width:clamp(116px,13vw,150px);aspect-ratio:1;margin:0 auto 34px;
  border-radius:26%;display:grid;place-items:center;background:var(--paper);
  border:1px solid var(--line);
  box-shadow:0 10px 24px rgba(25,31,40,.10),0 30px 64px rgba(0,80,200,.18)}
.endcta__tile img{width:74%;height:74%;object-fit:contain}


/* ============ spacing pass: give everything room to breathe ============ */

/* hero — more air above, and between the pieces */
.hero .wrap[style]{padding-block:52px 0 !important}
.hero2__top{margin-bottom:64px;gap:72px}
.hero2__title{margin-bottom:0}
.hero2__try-lede{margin:28px 0 16px}
.hero2__left .try{max-width:620px}
.hero2__aside{padding-top:18px}
.hero2__lede{margin-bottom:30px;line-height:1.75}
.heroshot{margin-top:8px}

/* feature cards — equal height, roomier inside */
.fgrid{gap:24px}
/* 앞면이 목업 한 장으로 바뀌면서 바닥에 133px이 비었다.
   뒷면 글은 이 높이 안에 다 들어온다 — scrollHeight가 더 큰 건 장식용
   .fcard3__glow가 카드 밖까지 번지기 때문이고, overflow로 잘려 의도대로 보인다. */
.flip{min-height:600px}
.fcard3{padding:44px 38px}
.fcard3__label{margin-bottom:16px}
.fcard3__title{margin-bottom:0}
.fcard3__sub{margin-top:18px}
.fcard3__big{margin-top:auto;padding-top:28px}
.fcard3__media{margin:32px -38px -44px;min-height:250px}

/* mid CTA — stop it hugging the cards */
.midcta{margin-top:88px !important;padding:56px 28px}
.midcta p{margin-top:12px}
.midcta .row{margin-top:28px}

/* showcase rows — clear separation, larger shots */
.show__row{padding-block:120px;gap:88px}
.show__row+.show__row{border-top:1px solid var(--line)}
.show__copy p{margin-top:20px}
.show__more{margin-top:34px}
.show__float{bottom:-28px}

/* dark band — breathing room around the numbers */
.dband .wrap{padding-block:132px}
.dband__title{margin-bottom:92px}
.dband__grid{gap:52px 24px}

/* FAQ — tighter to its heading, roomier between rows */
.faq{row-gap:14px}
#faq .head{margin-bottom:56px}

/* section rhythm: keep 200 at top but add bottom air where a section ends a topic */
section.blk{padding-bottom:0}
section.blk--secondary{padding-bottom:180px}

@media(max-width:980px){
  .hero .wrap[style]{padding-block:64px 0 !important}
  .hero2__top{margin-bottom:38px;gap:30px}
  .flip{min-height:520px}
  .fcard3{padding:34px 26px}
  .fcard3__media{margin:26px -26px -34px}
  .midcta{margin-top:56px !important;padding:40px 22px}
  .show__row{padding-block:72px;gap:34px}
  .dband .wrap{padding-block:86px}
  .dband__title{margin-bottom:52px}
  section.blk--secondary{padding-bottom:110px}
}

/* hero shot: show the whole frame, no crop */
.hero2__media{max-height:none;overflow:hidden;border-radius:18px}
.hero2__media img{width:100%;height:auto;display:block}
.heroshot{max-width:1200px;margin:8px auto 0}

/* the shot defines its own height — no forced aspect box */
.hero2__media{aspect-ratio:auto;display:block;place-items:initial;height:auto}
.hero2__media img{width:100%;height:auto;object-fit:initial;display:block}


/* features page: summary strip under the title */
.fsum{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;max-width:900px;margin:36px auto 0}
.fsum__item{display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:26px 16px;border-radius:16px;background:var(--paper);border:1px solid var(--line);
  transition:transform .25s var(--ease-ui),box-shadow .25s var(--ease-ui),border-color .25s var(--ease-ui)}
.fsum__item:hover{transform:translateY(-4px);border-color:var(--blue-100);
  box-shadow:0 16px 36px rgba(25,31,40,.09)}
.fsum__item img{width:46px;height:46px;object-fit:contain;margin-bottom:6px}
.fsum__item b{font-size:16px;font-weight:700}
.fsum__item span{font-size:13.5px;color:var(--muted)}

/* rail: sit beside the rows, not on the page edge */
.show{position:relative}
.show__rail{left:max(18px,calc((100vw - 1400px)/2 - 28px))}
@media(max-width:1500px){.show__rail{display:none}}
@media(max-width:820px){.fsum{grid-template-columns:1fr 1fr;gap:12px}.fsum__item{padding:20px 12px}}

/* safety cards: give the glass icons a tinted bed */
.cols__media{background:linear-gradient(150deg,var(--blue-050),var(--sky));
  display:grid;place-items:center}

/* ============ features: the app tabs follow the whole page ============ */
.ftabs-scope{position:relative}
.ftabs-dock{position:sticky;top:calc(var(--header-height) - var(--minimize-height) + 14px);
  z-index:30;display:flex;justify-content:center;align-items:flex-start;
  pointer-events:none;padding-block:0;height:0}
.ftabs-dock .ftabs{pointer-events:auto;position:static;margin:0;
  transform:translateY(-50%);opacity:0;transition:opacity .3s var(--ease-ui),transform .3s var(--ease-ui)}
.ftabs-dock.is-up .ftabs{transform:none;opacity:1}
@media (max-width:760px){
  .ftabs-dock{justify-content:flex-start;overflow-x:auto;scrollbar-width:none}
  .ftabs-dock::-webkit-scrollbar{display:none}
}

/* the showcase rows the tabs jump to need room under the sticky bar */
.ftabs-scope .show__row{scroll-margin-top:calc(var(--header-height) + 88px)}

/* ============ composer: its own hero row — opens up to 1600 and pushes the mockup down ============ */
.try{position:relative;width:620px;max-width:100%;margin-left:0;
  transition:width .46s var(--ease-out3),margin-left .46s var(--ease-out3)}
/* opens to the width of the product shot below it, so the two line up */
.try:hover,.try:focus-within,.try.is-open{
  width:min(1200px,calc(100vw - 48px));max-width:none;
  margin-left:calc(50% - min(600px,50vw - 24px))}
.try__box{transition:border-color .2s var(--ease-ui),box-shadow .3s var(--ease-ui),
  padding .3s var(--ease-out3)}
.try:hover .try__box,.try__box:focus-within{padding-left:22px;padding-right:12px}
@media (max-width:1100px){.try,.try:hover,.try:focus-within,.try.is-open{width:100%}}
/* examples sit in the flow, so opening the box moves the mockup down instead of covering it */
.try__eg{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;
  margin-top:16px;opacity:.92;
  transition:opacity .26s var(--ease-ui)}
.try:hover .try__eg,.try:focus-within .try__eg{opacity:1}
.try.is-open .try__eg{height:0;margin-top:0;opacity:0}
.try__eg b{flex:none;font-size:12.5px;font-weight:600;color:var(--muted);letter-spacing:-.01em}
/* 예시 칩. 업종이 앞에 붙어 있어 방문자가 자기 업종을 먼저 알아본다.
   셰브론은 '이건 눌러서 바로 결과를 본다'는 표시이고, 평소엔 숨어 있다가
   가까이 가면 나온다. */
.try__eg button{display:inline-flex;align-items:center;gap:0;
  padding:6px 6px 6px 7px;border-radius:100px;border:1px solid var(--line-strong);
  background:var(--paper);color:var(--sub);font-size:13.5px;font-weight:600;
  letter-spacing:-.01em;cursor:pointer;white-space:nowrap;
  box-shadow:0 1px 2px rgba(17,17,18,.04);
  transition:border-color .18s var(--ease-ui),color .18s var(--ease-ui),
    background .18s var(--ease-ui),transform .18s var(--ease-ui),
    box-shadow .18s var(--ease-ui)}
.try__eg-k{flex:none;display:inline-grid;place-items:center;height:24px;padding:0 10px;
  margin-right:9px;border-radius:100px;background:var(--blue-050);color:var(--blue);
  font-size:11.5px;font-weight:700;font-style:normal;letter-spacing:.01em;
  transition:background .18s var(--ease-ui),color .18s var(--ease-ui)}
.try__eg button > span{padding-right:4px}
.try__eg-go{flex:none;width:15px;height:15px;margin-left:2px;
  fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
  opacity:0;transform:translateX(-4px);
  transition:opacity .18s var(--ease-ui),transform .2s var(--ease-out3)}
.try__eg button:hover,.try__eg button:focus-visible{
  border-color:var(--blue);color:var(--blue);background:var(--blue-050);
  transform:translateY(-2px);box-shadow:0 6px 16px -8px rgba(0,110,255,.45)}
.try__eg button:hover .try__eg-k,.try__eg button:focus-visible .try__eg-k{
  background:var(--blue);color:#fff}
.try__eg button:hover .try__eg-go,.try__eg button:focus-visible .try__eg-go{
  opacity:1;transform:none}
.try__eg button:active{transform:translateY(0) scale(.985)}
@media (prefers-reduced-motion:reduce){
  .try__eg,.try__box,.ftabs-dock .ftabs{transition-duration:.01ms}
}

/* composer at phone width — examples wrap onto their own lines */
@media (max-width:760px){
  .try__eg{margin-top:14px;justify-content:flex-start;flex-wrap:nowrap;
    overflow-x:auto;scrollbar-width:none;
    padding-inline:var(--gut);margin-inline:calc(var(--gut) * -1)}
  .try__eg::-webkit-scrollbar{display:none}
  .try.is-open .try__eg{display:none;height:auto}
  .try__eg button{font-size:12.5px;padding:5px 5px 5px 6px}
  .try__eg-k{height:22px;padding:0 9px;font-size:11px;margin-right:8px}
  .try__eg-go{display:none}
}

/* the hero mockup now stands on its own — the pill tabs moved to the features page */
.heroshot{padding-top:48px}
@media(max-width:900px){.heroshot{padding-top:32px}}

/* hero: the composer sat in a pocket of dead space — tighten it up */
.hero2__top{margin-bottom:34px}
.hero2__try-lede{margin:0 0 12px}
.try{margin-top:0}
.heroshot{padding-top:30px}
.try{width:820px}                    /* less emptiness to the right at rest */
@media(max-width:1100px){.try{width:100%}}
@media(max-width:900px){
  .hero2__top{margin-bottom:26px}
  .heroshot{padding-top:22px}
}
@media(max-width:900px){.hero .wrap[style]{padding-block:36px 0 !important}}

/* 초안 세 장은 처음부터 보인다. 이게 이 제품의 가장 강한 증거인데 hover 뒤에
   숨겨두면 터치 기기에서는 영영 보이지 않는다 — 폰으로 들어오는 사람이 대부분이다.
   입력창에 손이 가면 살짝 더 또렷해지는 정도로만 반응한다. */
.drafts-slot{display:grid;grid-template-rows:minmax(0,1fr);margin-top:16px;
  transition:margin-top .42s var(--ease-out3)}
.try.is-open .drafts-slot{display:none}
.drafts--ghost{min-height:0;opacity:.88;
  transition:opacity .3s var(--ease-ui),transform .4s var(--ease-out3)}
.try:hover .drafts--ghost,.try:focus-within .drafts--ghost{opacity:1;transform:translateY(-2px)}
.drafts--ghost .dcard{position:relative;min-height:0;transform:none;opacity:1;overflow:hidden;
  background:linear-gradient(150deg,rgba(255,255,255,.66),rgba(214,235,255,.52));
  -webkit-backdrop-filter:blur(16px) saturate(180%);backdrop-filter:blur(16px) saturate(180%);
  border:1px solid rgba(255,255,255,.9);
  box-shadow:0 1px 0 rgba(255,255,255,1) inset,0 10px 30px rgba(24,64,120,.13)}
/* the frosted grain */
.drafts--ghost .dcard:after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.35;
  background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.3'/%3E%3C/svg%3E")}
/* a soft blue wash behind the row so the glass has something to refract */
.drafts--ghost:before{content:"";position:absolute;z-index:0;left:2%;right:2%;top:24px;bottom:-6px;
  border-radius:140px;filter:blur(40px);
  background:radial-gradient(55% 100% at 18% 50%,rgba(0,128,255,.30),transparent 72%),
             radial-gradient(55% 100% at 82% 50%,rgba(160,225,253,.42),transparent 72%)}
.drafts--ghost{position:relative}
.drafts--ghost .dcard{z-index:1}
.drafts--ghost .dcard__tag{background:rgba(255,255,255,.78);color:var(--muted)}
.drafts--ghost .dcard__name{color:var(--sub)}
.drafts--ghost .dcard__state{color:var(--muted)}
.drafts--ghost .dcard__foot{border-top-color:rgba(255,255,255,.85)}
.drafts--ghost .gl i{background:rgba(25,31,40,.13)}
.drafts--ghost .tpost__av{filter:none;opacity:.9}
@supports not (backdrop-filter:blur(2px)){
  .drafts--ghost .dcard{background:rgba(255,255,255,.9)}
}
.drafts--ghost .dcard__name,.drafts--ghost .dcard__state{color:var(--faint)}
.gl{flex:1;display:flex;flex-direction:column;gap:9px;padding:2px 0 4px}
.gl i{display:block;height:9px;width:100%;border-radius:100px;background:var(--line-soft)}
@media (max-width:900px){
  /* 세 장 중 두 장을 지우면 '세 가지 각도를 준다'는 말이 화면에서 사라진다.
     지우는 대신 옆으로 넘겨보게 둔다. */
  .drafts--ghost,.drafts{grid-template-columns:repeat(3,78%);
    overflow-x:auto;scroll-snap-type:x mandatory;
    padding-inline:var(--gut);margin-inline:calc(var(--gut) * -1);
    scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .drafts--ghost::-webkit-scrollbar,.drafts::-webkit-scrollbar{display:none}
  .drafts--ghost .dcard,.drafts .dcard{scroll-snap-align:center}
  .drafts--ghost:before{display:none}
}

/* ============ login / signup ============ */
.auth .wrap{max-width:1080px}
.auth__grid{display:grid;grid-template-columns:1fr .82fr;gap:60px;align-items:start;
  padding-block:16px 88px}
.auth__card{padding:32px 34px 30px;border:1px solid var(--line);border-radius:20px;background:var(--paper);
  box-shadow:0 1px 2px rgba(25,31,40,.04),0 24px 60px rgba(25,31,40,.08)}
.auth__mark{display:block;width:48px;height:48px;margin-bottom:18px}
.auth__tabs{display:flex;gap:4px;padding:4px;margin-bottom:26px;
  border-radius:12px;background:var(--line-soft)}
.auth__tab{flex:1;padding:10px 0;border:0;border-radius:9px;background:none;cursor:pointer;
  font:inherit;font-size:14.5px;font-weight:700;letter-spacing:-.01em;color:var(--muted);
  transition:background .2s var(--ease-ui),color .2s var(--ease-ui),box-shadow .2s var(--ease-ui)}
.auth__tab.is-on{background:var(--paper);color:var(--ink);box-shadow:0 1px 3px rgba(25,31,40,.10)}
.auth__form h1{font-size:26px;line-height:1.32;letter-spacing:-.03em;margin:0}
.auth__sub{margin:10px 0 24px;font-size:15.5px;line-height:1.6;color:var(--sub)}
.fld{display:block;margin-bottom:14px}
.fld > span{display:block;margin-bottom:7px;font-size:13px;font-weight:600;color:var(--sub)}
.fld input{width:100%;padding:14px 16px;border:1px solid var(--line-strong);border-radius:12px;
  background:var(--paper);font:inherit;font-size:15.5px;color:var(--ink);
  transition:border-color .18s var(--ease-ui),box-shadow .18s var(--ease-ui)}
.fld input::placeholder{color:var(--faint)}
.fld input:focus{outline:0;border-color:var(--blue);box-shadow:0 0 0 3px rgba(0,128,255,.14)}
.fld input:user-invalid{border-color:#f04452}
.fld__row{display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin:4px 0 20px;font-size:13.5px}
.fld__row a{color:var(--muted)}
.fld__row a:hover{color:var(--blue)}
.chk{display:flex;align-items:center;gap:8px;color:var(--sub);font-size:13.5px;cursor:pointer}
.chk input{width:16px;height:16px;accent-color:var(--blue);flex:none;cursor:pointer}
.chk--terms{align-items:flex-start;margin:4px 0 20px;line-height:1.55}
.chk--terms input{margin-top:2px}
.chk--terms a{color:var(--blue);font-weight:600}
.auth__go{display:flex;justify-content:center;width:100%;padding:16px 24px}
.auth__msg{margin:14px 0 0;padding:12px 14px;border-radius:10px;
  background:var(--blue-050);color:var(--sub);font-size:13.5px;line-height:1.6}
.auth__msg.bad{background:#fff0f1;color:#c9313d}
.auth__msg[hidden]{display:none}
.auth__side{padding-top:14px}
.auth__side h2{font-size:18px;letter-spacing:-.02em;margin:0 0 18px}
.auth__list{list-style:none;margin:0;padding:0;display:grid;gap:17px}
.auth__list li{display:grid;gap:4px;padding-left:16px;border-left:2px solid var(--blue-100)}
.auth__list b{font-size:15px;letter-spacing:-.01em}
.auth__list span{font-size:14px;line-height:1.6;color:var(--muted)}
.auth__help{margin:26px 0 0;font-size:13.5px;color:var(--muted)}
.auth__help a{color:var(--blue);font-weight:600}
@media(max-width:860px){
  .auth__grid{grid-template-columns:1fr;gap:36px;padding-block:4px 64px}
  .auth__card{padding:26px 22px 24px}
  .auth__form h1{font-size:23px}
  .auth__side{padding-top:0}
}

/* the stand-in account for walking the screens before the server is attached */
.demo{margin-top:22px;padding:16px 16px 14px;border:1px dashed var(--line-strong);
  border-radius:14px;background:var(--wash)}
.demo__head{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.demo__badge{padding:4px 10px;border-radius:99px;background:var(--blue-100);color:var(--blue-strong);
  font-size:11.5px;font-weight:800;letter-spacing:-.01em}
.demo__fill{margin-left:auto;padding:6px 12px;border:1px solid var(--line-strong);border-radius:99px;
  background:var(--paper);font:inherit;font-size:12.5px;font-weight:700;color:var(--sub);cursor:pointer;
  transition:border-color .18s var(--ease-ui),color .18s var(--ease-ui)}
.demo__fill:hover{border-color:var(--blue);color:var(--blue)}
.demo__creds{display:grid;grid-template-columns:auto 1fr;gap:5px 14px;margin:0 0 10px;
  font-size:13.5px}
.demo__creds dt{color:var(--muted)}
.demo__creds dd{margin:0;color:var(--ink);font-weight:600;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px}
.demo__note{margin:0;font-size:12.5px;line-height:1.6;color:var(--muted)}
.demo__note b{color:var(--sub);font-weight:700}

/* anything that looks like a real account or a real number says so */
.thread__label{display:inline-flex;align-items:center;gap:7px;margin:0 0 14px;
  padding:6px 12px;border-radius:99px;background:var(--line-soft);
  color:var(--muted);font-size:12.5px;font-weight:600;letter-spacing:-.01em}
.thread__label:before{content:"";width:6px;height:6px;border-radius:50%;background:var(--faint)}

/* ============================================================
   hero composer — the three cards were reading as one smeared
   panel: a blurred blue wash bled across the gaps and tinted the
   left card differently from the right. Separate them properly.
   ============================================================ */

/* the wash behind the row is what fused them together */
.drafts--ghost:before{display:none}

.drafts--ghost{gap:16px}
.drafts--ghost .dcard{
  background:rgba(255,255,255,.72);
  -webkit-backdrop-filter:blur(14px) saturate(150%);backdrop-filter:blur(14px) saturate(150%);
  border:1px solid rgba(214,235,255,.9);
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 6px 18px rgba(24,64,120,.07);
  padding:15px 16px 13px}
.drafts--ghost .dcard:after{opacity:.22}

/* the type tag belongs beside the name, not stranded at the far edge */
.drafts--ghost .dcard__head{gap:7px}
.drafts--ghost .dcard__name{flex:0 0 auto}
.drafts--ghost .dcard__tag{margin-left:6px;background:var(--blue-050);color:var(--blue-strong);
  box-shadow:none}
.drafts--ghost .dcard__foot{justify-content:flex-start;padding-top:10px}

/* skeleton lines were full-width on every row, which read as a solid block */
.gl{gap:8px;padding:4px 0 2px}
.gl i{height:8px;background:rgba(25,31,40,.10)}

/* the example chips sat in a huddle on the left of a 1200px row */
.try__eg{justify-content:flex-start;gap:10px}
.try__eg b{margin-right:2px;color:var(--muted)}

@media(max-width:900px){
  .drafts--ghost{gap:10px}
}
/* the waiting line belongs under the skeleton, not floated to the right edge */
.drafts--ghost .dcard{min-height:0}
.drafts--ghost .dcard__state{margin-right:auto}
.drafts--ghost .gl{padding-bottom:6px}

/* ============================================================
   wider content column — the page had 1400px capped to 1200px
   below 1460, which left a lot of unused screen on a laptop
   ============================================================ */
.wrap{max-width:1640px;padding-inline:40px}
header .wrap{max-width:1640px}
@media(max-width:1720px){.wrap,header .wrap{max-width:1440px}}
@media(max-width:1500px){.wrap,header .wrap{max-width:1280px;padding-inline:32px}}
@media(max-width:1180px){.wrap,header .wrap{max-width:100%;padding-inline:28px}}
@media(max-width:760px){.wrap,header .wrap{padding-inline:20px}}

/* things that were sized against the old 1200px column */
.heroshot,.hero2__media{max-width:1400px}
.screens{max-width:1200px}
.flow{max-width:860px}
.wdont{max-width:1040px}
.cmp__note{max-width:1040px}

/* ============================================================
   match the reference layout, measured from the live site at a
   1920 viewport: container 1600 centred, hero media fills it,
   support copy 20/700/32 with -0.2px tracking
   ============================================================ */
.wrap,header .wrap{width:min(1600px,100% - 48px);max-width:none;
  margin-inline:auto;padding-inline:0}
@media(max-width:760px){.wrap,header .wrap{width:min(1600px,100% - 40px)}}

/* the product shot runs the full width of the column, like the reference */
.heroshot,.hero2__media{max-width:none;width:100%}
.screens{max-width:none;width:100%}

/* right-hand support copy */
.hero2__lede{font-size:20px;line-height:32px;letter-spacing:-.2px}
.hero2__lede b{font-weight:700}
.hero2__cta .btn{font-size:16px;line-height:27.2px;letter-spacing:-.16px}
/* the headline was centring itself inside its column via auto side margins,
   so it drifted inward as the column grew. Pin it to the container edge. */
.hero2__title{margin-inline:0;max-width:none}
.hero2__try-lede{margin-inline:0}
/* `.hero h1` (0,1,1) was beating `.hero2__title` (0,1,0) and re-centring the
   headline with auto side margins. Match on both so it stays at the edge. */
.hero .hero2__title,.hero2 .hero2__title{margin:24px 0 0;max-width:none}

/* ============================================================
   the gutter scales with the viewport instead of collapsing to a
   fixed 24px the moment the window stops being wide. Measured off
   the reference: content ≈ 92% of the viewport, capped at 1600,
   with a floor so phones keep a real margin.
   ============================================================ */
.wrap,header .wrap{width:min(1600px,100% - clamp(40px,8%,320px));padding-inline:0}
@media(max-width:760px){.wrap,header .wrap{width:min(1600px,100% - 40px)}}

/* ============================================================
   the stats band was 590px tall to hold one heading and three
   numbers, with ~200px of empty navy above and below. Tighten it
   and give the figures a structure to sit in.
   ============================================================ */
.dband .wrap{padding-block:72px}
.dband__title{margin-bottom:44px;font-size:clamp(26px,3.2vw,38px)}

.dband__grid{
  gap:0;text-align:center;
  border:1px solid rgba(255,255,255,.14);border-radius:20px;
  background:rgba(255,255,255,.04);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  overflow:hidden;max-width:980px;margin-inline:auto}
.dband__grid > div{
  padding:34px 22px 30px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px}
.dband__grid > div + div{border-left:1px solid rgba(255,255,255,.14)}

.dnum{
  font-family:Manrope,Pretendard,sans-serif;font-variant-numeric:tabular-nums;
  font-size:clamp(40px,4.4vw,58px);font-weight:700;line-height:1;letter-spacing:-.03em;
  color:#fff;margin:0;display:flex;align-items:baseline;justify-content:center;gap:2px}
.dnum sup{font-size:.38em;font-weight:600;color:var(--sky);top:-.06em;position:relative}
.dlabel{margin:0;font-size:14px;line-height:1.6;color:#b8cbdb;letter-spacing:-.01em}

@media(max-width:820px){
  .dband .wrap{padding-block:52px}
  .dband__title{margin-bottom:30px}
  .dband__grid{grid-template-columns:1fr;max-width:420px}
  .dband__grid > div{padding:24px 20px;flex-direction:row;justify-content:space-between;text-align:left;gap:18px}
  .dband__grid > div + div{border-left:0;border-top:1px solid rgba(255,255,255,.14)}
  .dnum{font-size:36px}
  .dlabel{font-size:13px;text-align:right}
}

/* ============================================================
   the example thread sitting on the photo: make it read like a
   real client, not a grey panel
   ============================================================ */
.tscene .thread{
  background:rgba(255,255,255,.96);
  -webkit-backdrop-filter:blur(20px) saturate(160%);backdrop-filter:blur(20px) saturate(160%);
  border:1px solid rgba(255,255,255,.7);
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 24px 60px rgba(8,22,38,.30);
  padding:22px 24px 18px}
.tscene .thread__label{
  background:var(--blue-050);color:var(--blue-strong);font-weight:700;margin-bottom:16px}
.tscene .thread__label:before{background:var(--blue)}
.tscene .tpost{padding:14px 0}
.tscene .tpost:first-of-type{padding-top:2px}
.tscene .tpost__name{font-size:14.5px}
.tscene .tpost__time{font-size:12.5px;color:var(--faint)}
.tscene .tpost__text{font-size:14.5px;line-height:1.62;color:var(--sub)}
.tscene .tpost__av{width:38px;height:38px;font-size:13px;
  box-shadow:0 2px 8px rgba(8,22,38,.16)}
.tscene .tpost__col{width:38px}
.tscene .tpost__chip{margin-top:9px;font-size:11.5px;padding:5px 10px}
.tscene .tpost__actions{gap:16px;margin-top:10px;opacity:.5}
.tscene .tpost__actions svg{width:17px;height:17px}
.tscene .thread__foot{
  margin-top:4px;padding:14px 0 2px;border-top:1px solid var(--line-soft);
  font-size:12.5px;color:var(--muted)}

/* the mark had a white plate baked in; it is cut out now, so let it glow
   instead of sitting on the photo like a sticker */
.tscene__ic{filter:drop-shadow(0 6px 18px rgba(0,60,140,.45))}

/* ============================================================
   the header menu on phones and tablets. The burger was rendered
   at every width below 900 but nothing was listening to it, so
   기능 · 요금 안내 · FAQ · 미리보기 · 로그인 were unreachable from
   the header on every phone and iPad.
   ============================================================ */
@media(max-width:900px){
  .menu-container{
    display:block;position:fixed;left:0;right:0;
    top:calc(var(--header-height) - var(--minimize-height));
    background:var(--paper);border-bottom:1px solid var(--line);
    box-shadow:0 14px 34px rgba(25,31,40,.12);
    padding:4px 24px 16px;
    transform:translateY(-12px);opacity:0;visibility:hidden;
    transition:opacity .22s var(--ease-ui),transform .24s var(--ease-out3),visibility .22s;
    z-index:80}
  body.nav-open .menu-container{transform:none;opacity:1;visibility:visible}
  body.nav-open{overflow:hidden}
  #menu{flex-direction:column;height:auto;width:100%;gap:0}
  #menu > li{width:100%}
  #menu > li > a{height:auto;min-height:52px;padding:14px 2px;justify-content:flex-start;
    font-size:17px;width:100%;border-bottom:1px solid var(--line-soft)}
  #menu > li:last-child > a{border-bottom:0}
  /* the sign-in link lives in the header, so bring it back beside the burger */
  .nav .login{display:inline-flex;align-items:center;min-height:44px;margin-right:6px;font-size:15px}
  .burger{position:relative;z-index:81}
  .burger svg{transition:transform .22s var(--ease-ui)}
  body.nav-open .burger svg{transform:rotate(90deg)}
}
@media(max-width:420px){
  .nav .login{display:none}   /* at this width the panel carries it instead */
}
.menu-login{display:none}
@media(max-width:420px){.menu-login{display:block}}
@media(max-width:900px){
  /* the panel was stretching to the full viewport; it should be as tall as its links */
  .menu-container{height:auto;max-height:calc(100vh - var(--header-height) - 20px);overflow-y:auto}
  body.nav-open:before{content:"";position:fixed;inset:0;z-index:70;
    background:rgba(25,31,40,.28);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
}

/* ============================================================================
   PHONE PASS — the page was designed at desktop and squeezed. Fixed by
   walking the live site at 390px screen by screen.
   ============================================================================ */
@media(max-width:760px){

  /* 1. the hero opened with 125px of nothing above the headline */
  .hero .wrap[style]{padding-block:22px 0 !important}
  .hero2__title{font-size:clamp(28px,8.4vw,36px);line-height:1.28;margin-top:8px}
  .hero2__top{margin-bottom:20px;gap:18px}
  .hero2__lede{font-size:16px;line-height:1.6;margin-bottom:18px}
  .hero2__cta{gap:8px}
  .hero2__cta .btn{flex:1;padding:14px 12px;font-size:15px;justify-content:center}

  /* 2. the sticky bar already carries 무료로 시작 on every screen, so the
        header copy of it is one CTA too many on a 390px row */
  .nav .start{display:none}
  .nav .right{gap:4px}

  /* 3. the examples are a hover affordance; on a phone they are just clutter
        above the fold. The input placeholder already says what to type. */
  .try__eg{display:none}
  .try{margin-top:20px}
  .try__box{padding:8px 8px 8px 16px}
  .try__box input{font-size:16px}          /* 16px stops iOS zooming on focus */

  /* 4. a 1600px desktop dashboard squeezed into 350px said nothing. Let it be
        legible and scrollable inside its own frame instead. */
  .heroshot{padding-top:22px}
  .hero2__media{overflow-x:auto;-webkit-overflow-scrolling:touch;
    scroll-snap-type:x proximity;border-radius:14px}
  .hero2__media::-webkit-scrollbar{height:0}
  .hero2__media img{width:auto;max-width:none;height:280px;scroll-snap-align:start}
  .heroshot:after{content:"옆으로 밀어 보세요";display:block;margin-top:10px;
    text-align:center;font-size:12px;color:var(--faint)}

  /* 5. section rhythm: 200px gaps designed for a desktop column */
  section.blk{padding-block:56px}
  .head h2{font-size:clamp(24px,6.4vw,30px);line-height:1.32}
  .head p{font-size:15.5px;line-height:1.65}
  .head{margin-bottom:28px}

  /* 6. the product shot inside a flip card was running past the card edge */
  .fcard3__media{overflow:hidden;border-radius:12px}
  .fcard3__media img{width:100%;height:auto;object-fit:cover}
  .flip{min-height:0}
  .flip__hint{display:none}
  .flip__btn{right:12px;bottom:12px;width:40px;height:40px}

  /* 7. before / after photos were tall enough to need two swipes each */
  .ba{gap:14px}
  .ba__card img{height:210px;object-fit:cover}
  .ba__body{padding:18px}
  .ba__card h3{font-size:19px}
  .ba__card li{font-size:14.5px;line-height:1.6}
  .ba__arrow{display:none}

  /* 8. the thread scene: the photo had nothing to do at this width */
  .tscene{padding:20px}
  .tscene__bg{opacity:.35}
  .tscene__inner{gap:20px}
  .tscene__copy h2{font-size:24px}
  .tscene .thread{padding:16px 16px 12px}

  /* 9. FAQ rows were 17px copy in a 350px column */
  .faq summary{font-size:15.5px;padding:16px 14px}
  .faq p{font-size:14.5px;line-height:1.7;padding:0 14px 16px}

  /* 10. the closing block */
  .endcta__title{font-size:26px}
  .endcta__tile{width:64px;height:64px}
}

@media(max-width:420px){
  .hero2__cta{flex-direction:column}
  .hero2__cta .btn{width:100%}
  .heroshot .hero2__media img{height:240px}
}

/* the composer was re-centring itself on the viewport as it opened, so it
   jumped sideways. Pin it to the container's left edge and let it grow right. */
.try{margin-left:0 !important}
.try:hover,.try:focus-within,.try.is-open{
  width:100%;max-width:none;margin-left:0 !important}
@media(max-width:1100px){
  .try,.try:hover,.try:focus-within,.try.is-open{width:100%}
}

/* ============================================================================
   Four asks, walked one at a time on the live page.
   ============================================================================ */

/* 1. the before / after photos become square */
.ba__card{aspect-ratio:4/3;height:auto;min-height:0}
.ba__card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ba{align-items:stretch}
@media(max-width:760px){
  .ba__card{aspect-ratio:4/3}
  .ba__card img{height:100%}
}

/* 2. the flip cards were set small for their size, and the icon on the back
      face was a 44px stamp on a 400px card */
.fcard3__title{font-size:clamp(23px,2.5vw,31px);line-height:1.34}
.fcard3__label{font-size:13.5px;letter-spacing:.06em}
.fcard3__sub{font-size:16px;line-height:1.68}
.fcard3__big{line-height:1.05}
.fcard3__big small{font-size:14.5px}
.fcard3__ic{width:76px;height:76px;margin-bottom:20px;
  filter:drop-shadow(0 10px 26px rgba(0,60,140,.42))}
@media(max-width:900px){
  .fcard3__title{font-size:24px}
  .fcard3__ic{width:62px;height:62px}
  .fcard3__sub{font-size:15px}
}

/* 3. white copy was sitting straight on a photograph */
.tscene{position:relative;isolation:isolate}
.tscene:after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(100deg,rgba(6,14,26,.86) 0%,rgba(6,14,26,.70) 34%,
      rgba(6,14,26,.34) 62%,rgba(6,14,26,.16) 100%),
    linear-gradient(0deg,rgba(6,14,26,.55) 0%,rgba(6,14,26,0) 40%)}
.tscene__inner{position:relative;z-index:2}
.tscene__copy h2{text-shadow:0 2px 20px rgba(3,10,20,.55)}
.tscene__copy p{color:#dbe7f4}
.tscene__stat b{color:#fff}
.tscene__stat span{color:#a9bed4}
/* more air between the thread scene and the stats band */
.tscene{margin-bottom:0}
section.blk:has(.tscene){padding-block:120px}
.dband{margin-top:24px}
.dband .wrap{padding-block:104px}
@media(max-width:760px){
  section.blk:has(.tscene){padding-block:56px}
  .dband .wrap{padding-block:56px}
}

/* ============================================================================
   the three cards under the composer — "이렇게 넣어보세요" and the waiting
   state. They read as grey skeletons; give them the product's material.
   ============================================================================ */
.try__eg b{
  display:inline-flex;align-items:center;gap:6px;
  font-size:13px;font-weight:700;color:var(--blue-strong);letter-spacing:-.01em}
.try__eg b:before{content:"";width:5px;height:5px;border-radius:50%;background:var(--blue)}
.try__eg button{
  border:1px solid var(--line);background:var(--paper);color:var(--sub);
  box-shadow:0 1px 2px rgba(25,31,40,.05);font-weight:600}
.try__eg button:hover{border-color:var(--blue);color:var(--blue-strong);
  background:var(--blue-050);box-shadow:0 4px 14px rgba(0,128,255,.16);transform:translateY(-1px)}

.drafts--ghost .dcard{
  background:linear-gradient(158deg,rgba(255,255,255,.86),rgba(236,245,255,.72));
  border:1px solid rgba(214,235,255,.95);
  box-shadow:0 1px 0 rgba(255,255,255,1) inset,0 8px 22px rgba(24,64,120,.09)}
.drafts--ghost .dcard__head{padding-bottom:12px;margin-bottom:2px;
  border-bottom:1px dashed rgba(0,128,255,.16)}
.drafts--ghost .dcard__name{color:var(--sub);font-weight:700}
.drafts--ghost .dcard__tag{background:#fff;color:var(--blue-strong);
  box-shadow:0 0 0 1px rgba(0,128,255,.18)}
.drafts--ghost .tpost__av{opacity:1;box-shadow:0 2px 8px rgba(24,64,120,.18)}

/* the skeleton lines shimmer gently so the row reads as "about to fill",
   not as a broken render */
.gl i{background:linear-gradient(100deg,rgba(25,31,40,.09) 30%,rgba(255,255,255,.75) 50%,rgba(25,31,40,.09) 70%)
  0 0/300% 100%;animation:glShimmer 2.4s linear infinite}
.gl i:nth-child(2){animation-delay:.25s}
.gl i:nth-child(3){animation-delay:.5s}
@keyframes glShimmer{to{background-position:-300% 0}}

.drafts--ghost .dcard__state{
  display:inline-flex;align-items:center;gap:7px;
  color:var(--muted);font-weight:600;font-size:12.5px}
.drafts--ghost .dcard__state:before{
  content:"";width:7px;height:7px;border-radius:50%;background:var(--blue);
  box-shadow:0 0 0 3px rgba(0,128,255,.16);animation:glPulse 1.8s ease-in-out infinite}
@keyframes glPulse{50%{opacity:.35;box-shadow:0 0 0 5px rgba(0,128,255,.06)}}

@media(prefers-reduced-motion:reduce){
  .gl i,.drafts--ghost .dcard__state:before{animation:none}
  .gl i{background:rgba(25,31,40,.10)}
}
/* the plan price now carries a qualifier beside it */
.plan__account{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.plan__account small{font-size:13px;font-weight:600;color:var(--muted);letter-spacing:-.01em}


/* 세 장을 주는 이유가 보이게. 각도 이름 아래 한 줄이 '왜 이 각도인지'를 말한다 */
.dcard__why{margin:0;font-size:12px;line-height:1.5;color:var(--muted);
  letter-spacing:-.01em}
.dcard__len{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.dcard__foot .dcard__len{margin-left:8px}
.drafts--ghost .dcard__why{opacity:.55}

/* ==========================================================================
   댓글 장면 → 어두운 밴드. 두 섹션을 하나의 스크롤 동작으로 잇는다.

   스크롤을 내리면 위 장면의 배경이 커지면서 어두워지고, 그 어둠이 그대로
   아래 밴드의 배경이 된다. 화면이 바뀌는 게 아니라 같은 장면이 깊어지는
   것처럼 읽히게 하려는 것이다. --p는 JS가 0→1로 채운다.
   ========================================================================== */
.merge{--p:0;position:relative}
.merge__top{position:relative;z-index:1;background:transparent}
.merge .tscene{
  transform:scale(calc(1 + var(--p) * .04));
  border-radius:calc(24px * (1 - var(--p)));
  transition:transform .12s linear,border-radius .12s linear;
  will-change:transform}
.merge .tscene__bg{
  transform:scale(calc(1.02 + var(--p) * .14));
  transition:transform .12s linear;
  will-change:transform}
/* 장면 위로 덮이는 어둠. 아래 밴드 색과 같은 색이라 이어져 보인다 */
.merge .tscene:before{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;
  background:linear-gradient(180deg,rgba(11,41,61,.25) 0%,#0B293D 100%);
  opacity:calc(var(--p) * .92);transition:opacity .12s linear}
.merge .tscene__inner{position:relative;z-index:4}
.merge .tscene__copy,.merge .thread{
  opacity:calc(1 - var(--p) * .72);transition:opacity .12s linear}

/* 밴드는 위 장면에서 그대로 흘러내린다 */
.merge__band{background:transparent}
.merge__band:before{opacity:calc(.35 + var(--p) * .65)}

/* ---------- 숫자 ---------------------------------------------------------- */
.dstat{position:relative;padding-inline:10px}
.dnum{justify-content:center}
.dnum.is-in{animation:dnumPop .5s cubic-bezier(.16,1.1,.3,1) both}
@keyframes dnumPop{from{opacity:0;transform:translateY(14px) scale(.94)}to{opacity:1;transform:none}}
/* 숫자 아래 막대가 그 수치의 크기를 눈으로 말한다 */
.dbar{display:block;width:min(160px,70%);height:4px;margin:22px auto 0;border-radius:99px;
  background:rgba(255,255,255,.14);position:relative;overflow:hidden}
.dbar:after{content:"";position:absolute;inset:0;width:0;border-radius:99px;
  background:linear-gradient(90deg,#0080ff,#4ea4ff)}
.dstat.is-in .dbar:after{width:var(--w);transition:width .9s .18s cubic-bezier(.22,.7,.32,1)}
/* '0'은 채울 게 없다. 막대 대신 막혔다는 표시를 쓴다 */
.dbar--none{background:rgba(255,255,255,.1)}
.dbar--none:after{content:none}
.dbar--none:before{content:"";position:absolute;left:50%;top:50%;width:0;height:2px;
  background:#ff6b5e;border-radius:99px;transform:translate(-50%,-50%) rotate(-12deg)}
.dstat.is-in .dbar--none:before{width:70%;transition:width .5s .3s cubic-bezier(.22,.7,.32,1)}
.dlabel{opacity:0;transform:translateY(10px)}
.dstat.is-in .dlabel{opacity:1;transform:none;
  transition:opacity .5s .12s var(--ease-out3),transform .5s .12s var(--ease-out3)}

@media (max-width:820px){
  .merge .tscene{transform:none;border-radius:20px}
  .merge .tscene__bg{transform:scale(1.02)}
  .dbar{width:min(140px,60%);margin-top:18px}
}
@media (prefers-reduced-motion:reduce){
  .merge .tscene,.merge .tscene__bg,.merge .tscene:before,
  .merge .tscene__copy,.merge .thread{transform:none;transition:none}
  .dnum.is-in{animation:none}
  .dstat .dlabel{opacity:1;transform:none}
  .dstat.is-in .dbar:after{transition:none;width:var(--w)}
  .dstat.is-in .dbar--none:before{transition:none;width:70%}
}

/* 히어로 각주 — 버튼 아래에서 리스크를 걷어내고, 약속의 경계를 분명히 한다 */
.hero2__note{margin:14px 0 0;font-size:13.5px;color:var(--muted)}
.hero2__promise{margin:18px 0 0;padding:14px 16px;border-radius:14px;
  background:var(--blue-050);font-size:14px;line-height:1.65;color:var(--sub)}
.hero2__promise b{color:var(--ink);font-weight:700}
.try__note{margin:14px 0 0;font-size:12.5px;line-height:1.6;color:var(--muted);text-align:center}
.try__note b{color:var(--sub);font-weight:700}
.try.is-open .try__note{display:none}
@media (max-width:900px){
  .hero2__promise{font-size:13.5px;padding:13px 14px}
  .try__note{text-align:left}
}

/* ==========================================================================
   초안이 한 장씩, 한 줄씩 쓰인다

   세 장을 한꺼번에 떨어뜨리면 '만들어 놓은 걸 보여준다'로 읽히고,
   한 장씩 올라와 한 줄씩 적히면 '지금 쓰고 있다'로 읽힌다.
   ========================================================================== */
.dcard--writing .dcard__state{display:inline-flex;align-items:center;gap:7px;color:var(--blue)}
.dcard__pen{width:7px;height:7px;border-radius:50%;background:var(--blue);
  animation:penBlink 1s ease-in-out infinite}
@keyframes penBlink{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.7)}}
.dcard--writing{box-shadow:0 1px 2px rgba(17,17,18,.05),0 10px 26px -14px rgba(0,110,255,.5)}

.dcard__text{white-space:pre-wrap}
.dcard__ln{display:block;min-height:1.62em;opacity:0;transform:translateY(5px);
  transition:opacity .3s var(--ease-ui),transform .34s var(--ease-out3)}
.dcard__ln.in{opacity:1;transform:none}

/* 등장/퇴장은 .stage가 맡는다. 여기서 opacity를 다시 잡으면 ID 특정도로
   stage 규칙을 이겨버려 카드가 영영 안 보인다. */
#tryDrafts .dcard{transition:box-shadow .3s var(--ease-ui)}

/* ==========================================================================
   섹션 단위 스크롤. mandatory는 화면보다 긴 섹션에서 갇히므로 proximity로
   — 조금 스크롤하면 가까운 섹션에 맞춰지고, 길게 끌면 그냥 지나간다.
   ========================================================================== */
/* 스크롤 스냅은 걷어냈다. 섹션 높이가 0.6~1.7화면으로 제각각이라 스냅이
   걸릴 때마다 화면이 튀었다. 높이가 고르지 않은 페이지에서 스냅은 도움이
   아니라 방해다. 대신 섹션 사이 간격을 하나의 스케일로 잡아 리듬을 준다. */
@media (prefers-reduced-motion:no-preference){ html{scroll-behavior:smooth} }

/* ==========================================================================
   랜딩 세로 리듬 — 한 섹션이 끝나고 다음이 시작되는 게 눈에 보이게
   ========================================================================== */
body:has(.hero2){--lp-y:clamp(58px,5.6vw,96px)}
body:has(.hero2) section.blk{padding-block:var(--lp-y)}
body:has(.hero2) section.blk--secondary{padding-block:var(--lp-y)}
body:has(.hero2) .show__row{padding-block:calc(var(--lp-y) * .8)}
body:has(.hero2) .merge__band .wrap{padding-block:var(--lp-y) calc(var(--lp-y) * 1.1)}
/* 섹션 제목과 그 아래 내용 사이도 같은 비율로 */
body:has(.hero2) .head{margin-bottom:clamp(28px,2.9vw,44px)}

/* 기능 카드 아래가 바로 다음 섹션에 붙어 있었다 */
#features .fgrid{margin-bottom:8px}
#features{padding-bottom:40px}

/* ==========================================================================
   댓글 장면은 흰 바탕에서 시작한다. 사진 위 어두운 판이 아니라 우리 화면처럼.
   스크롤하면 그 흰 바탕이 어두워지며 아래 밴드로 이어진다.
   ========================================================================== */
.tscene{background:#fff}
.tscene__bg{display:block;opacity:.92;filter:saturate(.88) brightness(1.04)}
.tscene:after{content:"" !important;position:absolute;inset:0;z-index:1;
  background:linear-gradient(100deg,
    rgba(255,255,255,.97) 0%, rgba(255,255,255,.93) 30%,
    rgba(255,255,255,.62) 56%, rgba(255,255,255,.18) 78%,
    rgba(255,255,255,.06) 100%)}
.tscene__copy{color:var(--ink)}
.tscene__copy h2{color:var(--ink)}
.tscene__copy p{color:var(--sub)}
.tscene__stat div b{color:var(--ink)}
.tscene__stat div span{color:var(--muted)}
.merge .tscene{box-shadow:0 1px 2px rgba(25,31,40,.05),0 30px 70px -40px rgba(25,31,40,.22)}
.merge .tscene:before{background:linear-gradient(180deg,rgba(31,111,214,.30) 0%,#0B54B8 100%)}

/* 장면에서 밴드로 넘어가는 경계선을 없앤다. 두 배경이 각자 그려져서
   중간에 색이 한 번 꺾였다. 하나의 세로 그라데이션으로 흘려보낸다. */
.merge{background:linear-gradient(180deg,
  #ffffff 0%, #f2f7fc 12%, #7aaee8 32%, #1f6fd6 48%,
  #0B54B8 62%, #0A4AA6 80%, #0A4AA6 100%)}
.merge__band{background:transparent}
.merge__band:before{opacity:0;transition:opacity .4s var(--t-ease,ease)}
.merge__band .wrap{padding-block:104px 120px}
/* 숫자 칸을 하나의 판으로 묶어 밴드 위에 얹는다 */
.dband__grid{background:rgba(255,255,255,.08);border-radius:22px;padding:44px 12px 40px;
  backdrop-filter:blur(2px)}
.dstat + .dstat{box-shadow:inset 1px 0 0 rgba(255,255,255,.10)}
@media (max-width:820px){
  .dband__grid{grid-template-columns:1fr;gap:34px;padding:32px 16px}
  .dstat + .dstat{box-shadow:inset 0 1px 0 rgba(255,255,255,.10);padding-top:30px}
}

/* 무엇으로 요금이 나뉘는지 — 표를 보기 전에 단위부터 알려준다 */
.meters{list-style:none;margin:0 0 48px;padding:0;
  display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.meters li{padding:21px 19px;border-radius:18px;background:var(--line-soft)}
.meters b{display:block;font-size:15px;font-weight:800;letter-spacing:-.025em;margin-bottom:9px}
.meters p{margin:0;font-size:13px;line-height:1.65;color:var(--sub)}
.meters small{display:block;margin-top:12px;padding-top:12px;font-size:13px;color:var(--muted);
  border-top:1px solid rgba(17,17,18,.07)}
@media (max-width:860px){
  .meters{grid-template-columns:1fr;gap:12px;margin-bottom:36px}
  .meters li{padding:20px}
}

/* ==========================================================================
   기능 페이지 — 세로 리듬을 하나의 스케일로

   실측한 이음새가 320 / 200 / 380 / 180 이었다. 같은 값이 두 번도 안 나온다.
   특히 380px는 900px 화면에서 스크롤 한 번이 통째로 빈 화면이었다.
   값 하나를 키우는 게 아니라 8의 배수 스케일 하나로 통일한다.
   ========================================================================== */
body:has(.ftabs-scope){
  --sec-y:96px;    /* 배경이 바뀌는 섹션 이음새 */
  --row-y:80px;    /* 헤어라인으로 나뉘는 쇼케이스 행 */
  --edge-y:120px;  /* 스티키 탭바가 지나가는 첫 행만 한 단계 넓게 */
}
@media(max-width:980px){
  body:has(.ftabs-scope){--sec-y:56px;--row-y:48px;--edge-y:72px}
}
body:has(.ftabs-scope) .show__row{padding-block:var(--row-y)}
body:has(.ftabs-scope) .show__row:first-child{padding-top:var(--edge-y)}
body:has(.ftabs-scope) .show__row:last-child{padding-bottom:var(--sec-y)}
body:has(.ftabs-scope) section.blk,
body:has(.ftabs-scope) section.blk--secondary{padding-block:var(--sec-y)}

/* 히어로 칩이 딛고 설 바닥. 칩의 아래 테두리와 배경색이 바뀌는 지점이
   정확히 같은 픽셀이라 잘린 것처럼 보였다. 호버 그림자도 깔 자리가 없었다.
   마진이 아니라 패딩이어야 한다 — 래퍼의 padding-bottom이 0이면 마진이
   히어로 밖으로 collapse 돼 흰 배경이 따라오지 않는다. */
.hero2:has(.fsum) .wrap[style]{padding-block:40px 72px !important}
@media(max-width:980px){
  .hero2:has(.fsum) .wrap[style]{padding-block:28px 48px !important}
}

/* 제목이 스크린샷에 가려 잘려 보이던 것 — align-items:center가 짧은 카피를
   72px 아래로 내려서 행마다 수평선이 둘씩 생겼다. 윗변을 맞춘다. */
body:has(.ftabs-scope) .show__row{align-items:start}
body:has(.ftabs-scope) .show__copy{padding-top:4px}

/* 이 데모는 브랜드 자료를 쓰지 않는 형식 미리보기다. 문단으로 변명하는 대신
   카드 머리에 한 칸으로 사실을 적어 둔다. */
.dcard__demo{flex:none;padding:3px 8px;border-radius:100px;background:var(--line-soft);
  color:var(--muted);font-size:11px;font-weight:700;letter-spacing:-.01em}
.dcard__head{gap:7px}

/* ==========================================================================
   검색창에 손이 가면 목업이 줄고 그 옆으로 초안 세 장이 튀어나온다

   가만히 있을 때는 제품 화면 한 장이 크게 보인다. 검색창에 마우스를 올리거나
   포커스가 가면 목업이 한 칸으로 줄면서 오른쪽에 세 칸이 생기고, 카드가
   하나씩 시차를 두고 올라온다. 주제를 넣으면 그 자리에서 글이 채워진다.
   ========================================================================== */
.hstage{display:grid;grid-template-columns:minmax(0,1fr);gap:26px;align-items:start;
  width:100%;justify-self:stretch}
.hstage .try__out{width:100%;min-width:0}
.hstage .heroshot{min-width:0}

.hstage .drafts{
  display:grid;grid-template-columns:none !important;
  grid-auto-flow:column;grid-auto-columns:372px;gap:16px;
  overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;
  /* 오른쪽으로 화면 끝까지 넘어가게 한다 */
  margin-right:calc(50% - 50vw);
  padding:6px max(28px,calc(50vw - 50%)) 14px 0;
  max-height:0;opacity:0;
  transition:max-height .5s var(--ease-out3),opacity .35s var(--ease-ui),
    padding .5s var(--ease-out3)}
.hstage .drafts::-webkit-scrollbar{display:none}
.hstage.is-peek .drafts{max-height:440px;opacity:1}
.hstage .dcard{scroll-snap-align:start;opacity:0;transform:translateY(24px) scale(.95)}
.hstage.is-peek .dcard{opacity:1;transform:none;
  transition:opacity .42s var(--ease-ui),transform .52s cubic-bezier(.16,1.1,.3,1)}
.hstage.is-peek .dcard:nth-child(1){transition-delay:.05s}
.hstage.is-peek .dcard:nth-child(2){transition-delay:.13s}
.hstage.is-peek .dcard:nth-child(3){transition-delay:.21s}
.hstage.is-peek .dcard:nth-child(4){transition-delay:.29s}

/* 아직 주제를 안 넣었을 때 — 어떤 각도로 나오는지 형태만 보여준다 */
.dcard--peek .dcard__text{display:flex;flex-direction:column;gap:9px;padding:2px 0 4px}
.dcard--peek .dcard__text i{display:block;height:9px;border-radius:100px;background:var(--line-soft)}
.dcard--peek .dcard__foot{color:var(--muted)}

@media (max-width:900px){
  .hstage{gap:18px}
  .hstage .drafts{grid-auto-columns:78%;gap:12px;
    margin-right:-20px;padding:4px 20px 12px 0}
  .hstage.is-peek .drafts{max-height:420px}
}
@media (prefers-reduced-motion:reduce){
  .hstage,.hstage .heroshot,.hstage .dcard{transition:none}
}

/* ==========================================================================
   운영 방식 비교표

   숫자 세 개보다 표가 정직하다 — 무엇을 하고 무엇을 안 하는지가 한 눈에
   보인다. 우리 칸은 코드로 확인되는 것만 쓰고, 상대 칸은 제품을 지목하거나
   위법을 단정하지 않는다. '자동 좋아요·팔로우'에 우리가 회색 표시인 것도
   그대로 둔다 — 없는 건 없다고 적는 편이 신뢰를 만든다.
   ========================================================================== */
.ftable{border-radius:20px;overflow:hidden;background:rgba(255,255,255,.09);
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 20px 60px -30px rgba(3,30,70,.6)}
.ftable__head,.ftable__row{display:grid;
  grid-template-columns:minmax(0,1.25fr) repeat(3,minmax(0,1fr));
  align-items:center;gap:8px}
.ftable__head{padding:16px 21px;background:rgba(255,255,255,.12)}
.ftable__head span{font-size:13px;font-weight:700;color:rgba(255,255,255,.62);
  letter-spacing:-.01em;text-align:center}
.ftable__head span:first-child{text-align:left}
.ftable__head .is-us{color:#fff;position:relative}
.ftable__head .is-us:after{content:"";position:absolute;left:50%;bottom:-8px;width:34px;height:3px;
  border-radius:99px;background:#fff;transform:translateX(-50%)}
.ftable__row{padding:15px 21px}
.ftable__row + .ftable__row{border-top:1px solid rgba(255,255,255,.07)}
.ftable__row span{font-size:13px;line-height:1.5;color:rgba(255,255,255,.55);text-align:center}
.ftable__row span[role=rowheader]{text-align:left;font-weight:700;color:#fff;font-size:13.5px}
.ftable__row span.y{color:#fff;font-weight:600}
.ftable__row span.n{color:rgba(255,255,255,.5)}
.ftable__row span:last-child.y{color:#fff;font-weight:700}
.ftable__note{margin:24px auto 0;max-width:640px;text-align:center;
  font-size:13.5px;line-height:1.7;color:rgba(255,255,255,.62)}

@media (max-width:900px){
  .ftable{border-radius:16px}
  .ftable__head{display:none}
  .ftable__row{grid-template-columns:1fr;gap:6px;padding:18px 20px;text-align:left}
  .ftable__row span{text-align:left;padding-left:78px;position:relative}
  .ftable__row span[role=rowheader]{padding-left:0;margin-bottom:6px;font-size:16px}
  /* 헤더가 없으니 각 줄이 자기 이름을 달고 있어야 한다 */
  .ftable__row span:nth-child(2):before{content:"직접"}
  .ftable__row span:nth-child(3):before{content:"매크로"}
  .ftable__row span:nth-child(4):before{content:"포스트워크"}
  .ftable__row span:not([role=rowheader]):before{position:absolute;left:0;top:0;
    font-size:12px;font-weight:700;color:rgba(255,255,255,.34)}
}

/* 요금 히어로의 포스터 — 초안이 쌓이고 승인한 것만 나간다는 이야기를
   문장 대신 한 장으로 말한다 */
.poster{margin:44px auto 0;max-width:900px;text-align:center}
.poster img{width:100%;height:auto;display:block;border-radius:22px}
.poster figcaption{margin-top:18px;font-size:15px;font-weight:600;color:var(--muted);
  letter-spacing:-.015em}
@media (max-width:860px){
  .poster{margin-top:30px}
  .poster figcaption{font-size:13.5px;margin-top:14px}
}

/* ==========================================================================
   기능 페이지에 토스 타이포를 입힌다

   토스의 문법은 셋이다 — 크고 굵고 자간이 좁은 제목, 짧게 끊은 줄,
   그리고 문장 사이의 넉넉한 숨. 화려한 장치가 아니라 글자 크기와
   자간만으로 만들어지는 것이라 우리 구조에 그대로 얹을 수 있다.
   ========================================================================== */
body:has(.ftabs-scope) .fhero h1,
body:has(.ftabs-scope) .hero2__title{
  font-size:clamp(31px,4.2vw,53px);font-weight:800;letter-spacing:-.04em;line-height:1.26}
body:has(.ftabs-scope) .hero2__lede{
  font-size:clamp(15px,1.2vw,17px);line-height:1.66;color:var(--sub);letter-spacing:-.016em}

/* 행 제목 — 토스는 여기서 크기를 아끼지 않는다 */
body:has(.ftabs-scope) .show__copy h3{
  font-size:clamp(23px,2.5vw,35px);font-weight:800;letter-spacing:-.036em;line-height:1.32;
  margin-bottom:16px}
body:has(.ftabs-scope) .show__copy p{
  font-size:clamp(14.5px,1.1vw,16px);line-height:1.76;color:var(--sub);letter-spacing:-.012em;
  max-width:27em}

/* 섹션 제목 */
body:has(.ftabs-scope) .head h2{
  font-size:clamp(25px,2.9vw,40px);font-weight:800;letter-spacing:-.038em;line-height:1.3}
body:has(.ftabs-scope) .head p{
  font-size:clamp(14.5px,1.05vw,16px);line-height:1.72;color:var(--sub);letter-spacing:-.012em}

/* 칩 — 글자를 키우고 속을 조인다 */
body:has(.ftabs-scope) .fsum__item{padding:24px 20px}
body:has(.ftabs-scope) .fsum__item b{font-size:17px;letter-spacing:-.025em}
body:has(.ftabs-scope) .fsum__item span{font-size:14px;color:var(--muted)}

/* 탭 — 토스의 알약은 글자가 크고 여백이 넉넉하다 */
body:has(.ftabs-scope) .ftab{font-size:14px;padding:10px 19px;letter-spacing:-.018em}

@media(max-width:860px){
  body:has(.ftabs-scope) .show__copy p{max-width:none}
  body:has(.ftabs-scope) .ftab{font-size:14px;padding:10px 16px}
}


/* 슬라이드 카드는 목업 옆이 아니라 아래에 크게 눕는다. 글이 읽혀야 의미가 있다 */
.hstage .dcard{min-height:230px}
.hstage .dcard__text{font-size:15px;line-height:1.72}
.hstage .dcard__why{font-size:12.5px}
.hstage .dcard__head .dcard__name{font-size:14.5px}
@media (max-width:900px){
  .hstage .dcard{min-height:250px;padding:17px 17px 14px}
  .hstage .dcard__text{font-size:14px}
}

/* ==========================================================================
   히어로 등장 모션 — 슬라이드가 넘어가듯

   요소를 한꺼번에 띄우지 않고 한 겹씩 올린다. 제목이 먼저 서고, 설명이
   따라오고, 버튼이 떠오르고, 검색창이 넓어지며 자리를 잡고, 마지막에
   제품 화면이 아래에서 올라온다. 하나의 장면이 조립되는 것처럼 보이게.
   ========================================================================== */
@media (prefers-reduced-motion:no-preference){
  .hero2__title,.hero2__lede,.hero2__cta,.try__box,.hstage .heroshot{
    animation:heroIn .78s cubic-bezier(.18,.72,.24,1) both}
  .hero2__title{animation-name:heroTitle;animation-delay:.06s}
  .hero2__lede{animation-delay:.24s}
  .hero2__cta{animation-delay:.34s}
  .try__box{animation-name:heroBox;animation-delay:.44s}
  .hstage .heroshot{animation-name:heroShot;animation-delay:.60s;animation-duration:.95s}

  /* 제목은 아래에서 올라오며 자간이 조여든다 — 글자가 제자리를 찾는 느낌 */
  @keyframes heroTitle{
    from{opacity:0;transform:translateY(26px);letter-spacing:.01em}
    to{opacity:1;transform:none;letter-spacing:-.042em}
  }
  @keyframes heroIn{
    from{opacity:0;transform:translateY(18px)}
    to{opacity:1;transform:none}
  }
  /* 검색창은 가운데에서 양옆으로 펼쳐진다 */
  @keyframes heroBox{
    from{opacity:0;transform:scaleX(.82) translateY(14px)}
    to{opacity:1;transform:none}
  }
  /* 제품 화면은 살짝 눕힌 채 아래에서 올라와 바로 선다 */
  @keyframes heroShot{
    from{opacity:0;transform:translateY(56px) scale(.965) rotateX(7deg)}
    to{opacity:1;transform:none}
  }
  .hstage .heroshot{transform-origin:50% 0;perspective:1400px}

  /* 스크롤하면 제품 화면이 천천히 제 크기를 찾는다 */
  .hero2__title{will-change:transform,opacity}
}

/* ==========================================================================
   초안 카드 — 썸네일·태그·제목·미리보기·하단 정보

   레퍼런스의 카드 구조를 그대로 가져왔다. 다만 썸네일은 사진이 아니라
   각도를 색으로 구분하는 판이다 — 없는 이미지를 지어내지 않으면서도
   네 장이 서로 다른 글이라는 게 한 눈에 보인다.
   ========================================================================== */
.hstage .dcard{display:flex;flex-direction:column;gap:0;
  padding:18px 18px 15px;border-radius:17px;background:var(--paper);
  border:1px solid var(--line-soft);box-shadow:0 1px 2px rgba(17,17,18,.04),0 18px 40px -28px rgba(17,17,18,.28)}

.dcard__thumb{width:68px;height:68px;border-radius:16px;display:grid;place-items:center;
  margin-bottom:14px;flex:none;position:relative;overflow:hidden}
.dcard__thumb.t1{background:linear-gradient(145deg,#4aa3ff,#0b63d6)}
.dcard__thumb.t2{background:linear-gradient(145deg,#37d39a,#0f9d6e)}
.dcard__thumb.t3{background:linear-gradient(145deg,#ffa63d,#f2790c)}
.dcard__thumb.t4{background:linear-gradient(145deg,#9b7bff,#6435d6)}
.dcard__thumb:after{content:"";position:absolute;inset:0;
  background:radial-gradient(70% 60% at 28% 22%,rgba(255,255,255,.45),transparent 70%)}
/* 각도를 나타내는 글자 모양 — 사진이 없으니 형태로 구분한다 */
.dcard__glyph{position:relative;z-index:1;display:block;width:34px;height:26px;
  border-radius:6px;background:rgba(255,255,255,.92);
  box-shadow:0 6px 14px -6px rgba(0,0,0,.35)}
.dcard__thumb.t2 .dcard__glyph{border-radius:50%;width:28px;height:28px}
.dcard__thumb.t3 .dcard__glyph{width:34px;height:8px;border-radius:99px;
  box-shadow:0 12px 0 rgba(255,255,255,.92),0 24px 0 rgba(255,255,255,.62)}
.dcard__thumb.t4 .dcard__glyph{width:26px;height:26px;border-radius:8px;transform:rotate(45deg)}

.dcard__meta{display:flex;align-items:center;gap:9px;margin-bottom:12px}
.dcard__pill{flex:none;padding:4px 10px;border-radius:100px;background:var(--blue);
  color:#fff;font-size:11.5px;font-weight:700;letter-spacing:-.01em}
.dcard__kind{font-size:12.5px;font-weight:700;color:var(--ink);letter-spacing:-.02em}

.hstage .dcard__title{font-size:16px;font-weight:800;letter-spacing:-.03em;line-height:1.42;
  margin:0 0 12px;color:var(--ink);opacity:0;transform:translateY(6px);
  transition:opacity .32s var(--ease-ui),transform .36s var(--ease-out3);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.hstage .dcard__title.in{opacity:1;transform:none}
.hstage .dcard__text{flex:1;margin:0;font-size:13px;line-height:1.72;color:var(--sub);
  white-space:pre-wrap;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.hstage .dcard__foot{display:flex;align-items:center;gap:8px;margin-top:18px;padding-top:15px;
  border-top:1px solid var(--line-soft);font-size:12.5px;color:var(--muted)}
.dcard__dot{color:var(--line-strong)}

/* 아직 주제를 안 넣었을 때의 뼈대 */
.sk{display:block;height:11px;border-radius:100px;background:var(--line-soft);margin-bottom:9px}
.sk--t{height:17px;width:78%;margin-bottom:0}


.morebtn,.moreBtn{display:none}
.morebtn{display:inline-flex;align-items:center;gap:10px;margin:30px auto 0;
  padding:0 10px 0 21px;height:48px;border-radius:100px;background:var(--paper);
  border:1px solid var(--line-strong);color:var(--ink);font-size:16px;font-weight:700;
  letter-spacing:-.02em;font-size:14.5px;box-shadow:0 2px 6px rgba(17,17,18,.06),0 16px 36px -24px rgba(17,17,18,.4);
  transition:transform .2s var(--ease-ui),box-shadow .2s var(--ease-ui),border-color .2s var(--ease-ui)}
.morebtn svg{width:28px;height:28px;padding:7px;border-radius:50%;background:var(--blue);
  stroke:#fff;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;box-sizing:border-box}
.morebtn:hover{transform:translateY(-2px);border-color:var(--blue);text-decoration:none;
  box-shadow:0 4px 10px rgba(0,110,255,.12),0 20px 44px -24px rgba(0,110,255,.6)}
.hstage{justify-items:center}
.hstage > .try__out,.hstage > .heroshot{width:100%}

@media (max-width:900px){
  .dcard__thumb{width:70px;height:70px;border-radius:17px;margin-bottom:14px}
  .hstage .dcard__title{font-size:17px}
  .hstage .dcard__text{font-size:13.5px;-webkit-line-clamp:3}
  .morebtn{height:52px;font-size:15px;padding-left:22px}
}

/* ==========================================================================
   움직임 다시 잡기

   기존 값들이 짧고(.2~.35s) 곡선이 급해서 툭툭 끊겼다. 사람 눈에 부드럽게
   읽히는 건 '느린 시작'이 아니라 '긴 꼬리'다 — 빠르게 출발해 끝에서 길게
   감속하는 곡선을 쓰고, 지속시간을 한 단계 늘린다.
   ========================================================================== */
:root{
  --ez-out:cubic-bezier(.16,.84,.32,1);     /* 등장 — 끝이 길다 */
  --ez-soft:cubic-bezier(.32,.72,.28,1);    /* 상태 전환 */
  --ez-press:cubic-bezier(.34,1.3,.5,1);    /* 눌렀다 놓을 때 살짝 */
  --t-fast:.22s; --t-mid:.42s; --t-slow:.64s;
}

/* ---------- 히어로 등장: 한 박자 느리게, 겹쳐서 ------------------------- */
@media (prefers-reduced-motion:no-preference){
  .hero2__title,.hero2__lede,.hero2__cta,.try__box,.hstage .heroshot{
    animation-duration:1.05s;animation-timing-function:var(--ez-out)}
  .hero2__title{animation-delay:.08s}
  .hero2__lede{animation-delay:.30s}
  .hero2__cta{animation-delay:.44s}
  .try__box{animation-delay:.58s}
  .hstage .heroshot{animation-delay:.78s;animation-duration:1.25s}
}

/* ---------- 카드: 올라오는 결을 길게 ------------------------------------ */
.hstage .dcard{transition:transform var(--t-mid) var(--ez-soft),
  box-shadow var(--t-mid) var(--ez-soft),border-color var(--t-mid) var(--ez-soft)}
.hstage.is-peek .dcard{transition:opacity .62s var(--ez-out),transform .78s var(--ez-out)}
.hstage.is-peek .dcard:nth-child(1){transition-delay:.04s}
.hstage.is-peek .dcard:nth-child(2){transition-delay:.15s}
.hstage.is-peek .dcard:nth-child(3){transition-delay:.26s}
.hstage.is-peek .dcard:nth-child(4){transition-delay:.37s}
.hstage .dcard:hover{transform:translateY(-4px);border-color:var(--line-strong);
  box-shadow:0 3px 8px rgba(17,17,18,.05),0 26px 52px -30px rgba(17,17,18,.4)}
/* 카드에 손이 가면 썸네일이 살짝 부푼다 */
.dcard__thumb{transition:transform .5s var(--ez-soft)}
.hstage .dcard:hover .dcard__thumb{transform:scale(1.05) rotate(-1.5deg)}

/* 글이 적히는 결도 한 박자 느리게 */
.dcard__ln{transition:opacity .46s var(--ez-soft),transform .52s var(--ez-out)}
.hstage .dcard__title{transition:opacity .5s var(--ez-soft),transform .56s var(--ez-out)}
.dcard__pen{animation-duration:1.5s}

/* ---------- 버튼과 링크: 누르는 손맛 ------------------------------------ */
.btn,.morebtn,.try__go,.dock__go{
  transition:transform var(--t-fast) var(--ez-press),
    box-shadow var(--t-mid) var(--ez-soft),background var(--t-mid) var(--ez-soft),
    border-color var(--t-mid) var(--ez-soft),filter var(--t-fast) var(--ez-soft)}
.btn:active,.morebtn:active,.try__go:active{transform:scale(.97)}
.btn.primary:hover{filter:saturate(1.06) brightness(1.03)}
.try__go{transition:transform var(--t-fast) var(--ez-press),filter var(--t-fast) var(--ez-soft)}
.try__go:hover{transform:scale(1.06) translateY(-1px)}
.morebtn svg{transition:transform var(--t-mid) var(--ez-out)}
.morebtn:hover svg{transform:translateX(4px)}

/* 검색창은 손이 닿으면 살며시 떠오른다 */
.try__box{transition:box-shadow .5s var(--ez-soft),border-color .5s var(--ez-soft),
  transform .5s var(--ez-soft)}
.try:hover .try__box,.try:focus-within .try__box{transform:translateY(-2px)}

/* ---------- 진행선 ------------------------------------------------------ */

/* ---------- 섹션 진입 ---------------------------------------------------- */
.reveal{transition-duration:.9s !important;transition-timing-function:var(--ez-out) !important}
.show__row .show__copy > *{transition-duration:.85s;transition-timing-function:var(--ez-out)}

/* ---------- 비교표: 줄이 차례로 들어온다 -------------------------------- */
.ftable__row{opacity:0;transform:translateY(12px);
  transition:opacity .7s var(--ez-out),transform .8s var(--ez-out)}
.ftable.is-in .ftable__row{opacity:1;transform:none}
.ftable.is-in .ftable__row:nth-child(1){transition-delay:.05s}
.ftable.is-in .ftable__row:nth-child(2){transition-delay:.12s}
.ftable.is-in .ftable__row:nth-child(3){transition-delay:.19s}
.ftable.is-in .ftable__row:nth-child(4){transition-delay:.26s}
.ftable.is-in .ftable__row:nth-child(5){transition-delay:.33s}
.ftable.is-in .ftable__row:nth-child(6){transition-delay:.40s}
.ftable.is-in .ftable__row:nth-child(7){transition-delay:.47s}

/* ---------- 요금 카드 ---------------------------------------------------- */
.plan{transition:transform var(--t-mid) var(--ez-soft),box-shadow var(--t-mid) var(--ez-soft)}
.plan:hover{transform:translateY(-5px)}
.meters li{transition:transform var(--t-mid) var(--ez-soft),background var(--t-mid) var(--ez-soft)}
.meters li:hover{transform:translateY(-3px);background:var(--line)}

/* 포스터는 스크롤에 들어올 때 아주 천천히 자리를 잡는다 */
.poster img{transition:transform 1.1s var(--ez-out)}
.poster:hover img{transform:scale(1.015)}

@media (prefers-reduced-motion:reduce){
  .hstage .dcard,.dcard__thumb,.btn,.morebtn,.try__go,.try__box,.plan,.meters li,
  .poster img,.ftable__row{transition:none !important}
  .ftable__row{opacity:1;transform:none}
}

/* ==========================================================================
   호버를 전부 같은 결로

   페이지 곳곳의 호버가 .15~.25s로 짧고 이징이 제각각이라 어떤 건 툭 서고
   어떤 건 미끄러졌다. 마지막에 한 번 덮어 같은 곡선·같은 길이로 맞춘다.
   스크롤에 물린 값(.12s linear)은 건드리지 않는다 — 그건 프레임마다
   따라붙어야 하는 값이라 길어지면 오히려 늦게 따라온다.
   ========================================================================== */
.btn,.plan,.cmp__item,.fsum__item,.meters li,.try__eg button,.morebtn,
.show__more,.faq details,.publicnav a,.foot-bot a,.ftab,.dcard,
.flip__btn,.fcard3,.poster img,.hero2__cta a{
  transition-duration:.42s !important;
  transition-timing-function:cubic-bezier(.32,.72,.28,1) !important}

/* 색만 바뀌는 것은 조금 더 길게 — 눈에 덜 띄는 변화일수록 천천히 */
a,.publicnav a,.foot-bot a,.show__more,.panel__more{
  transition-property:color,background,border-color,transform,box-shadow,opacity;
  transition-duration:.5s;transition-timing-function:cubic-bezier(.32,.72,.28,1)}

/* 누르는 순간만 빠르게. 손이 떼어질 때 길게 돌아온다 */
.btn:active,.morebtn:active,.try__go:active,.try__eg button:active,.ftab:active{
  transition-duration:.09s !important}

/* 예시 칩 — 셰브론까지 같은 결로 */
.try__eg-k,.try__eg-go{transition-duration:.42s;
  transition-timing-function:cubic-bezier(.32,.72,.28,1)}

/* 카드 썸네일은 조금 더 느긋하게 부푼다 */
.hstage .dcard:hover .dcard__thumb{transition-duration:.6s}

/* 기능 페이지 플립 카드도 급하게 넘어갔다 */
.flip__inner{transition-duration:.72s !important;
  transition-timing-function:cubic-bezier(.32,.72,.28,1) !important}

@media (prefers-reduced-motion:reduce){
  .btn,.plan,.cmp__item,.fsum__item,.meters li,.try__eg button,.morebtn,
  .show__more,.faq details,.publicnav a,.foot-bot a,.ftab,.dcard,
  .flip__btn,.fcard3,.poster img,.hero2__cta a,.flip__inner{
    transition-duration:.01ms !important}
}

/* 헤더와 그 밖에 남아 있던 짧은 호버들 */
header a,header button,.gnb a,.menu a,.hdr a,
.faq summary,.plan__title,.panel__more,.dcard__pill,.dcard__kind,
.ig-switch,.tabs button,.toolbar button{
  transition-property:color,background,border-color,transform,box-shadow,opacity,filter;
  transition-duration:.42s;transition-timing-function:cubic-bezier(.32,.72,.28,1)}
header a:active,header button:active{transition-duration:.09s}

@media (prefers-reduced-motion:reduce){
  header a,header button,.faq summary,.tabs button,.toolbar button{
    transition-duration:.01ms !important}
}

/* 헤더 메뉴는 #menu 아래 규칙이 더 강해서 앞의 덮기가 닿지 않았다 */
header .nav a,header #menu a,header #menu li a,header .right a,header .logo,
header .nav button,header .right button{
  transition-property:color,background,border-color,transform,box-shadow,opacity,filter !important;
  transition-duration:.42s !important;
  transition-timing-function:cubic-bezier(.32,.72,.28,1) !important}
header .nav a:active,header .right a:active{transition-duration:.09s !important}
@media (prefers-reduced-motion:reduce){
  header .nav a,header #menu a,header .right a,header .logo{transition-duration:.01ms !important}
}

/* ==========================================================================
   기능 설명 — 스크롤에 맞춰 한 항목씩 펼쳐지는 구조

   토스가 쓰는 방식이다. 목록은 제자리에 머물고, 스크롤에 따라 지금 항목만
   설명이 펼쳐지며 나머지는 회색으로 물러난다. 오른쪽 화면도 같이 바뀐다.
   여섯 개를 여섯 번 스크롤해 지나치는 대신, 한 자리에서 여섯 번 갈아 끼운다.
   ========================================================================== */
.fsync{position:relative}
.fsync__track{height:calc(var(--n,6) * 68vh)}
.fsync__stick{position:sticky;top:var(--header-height,64px);
  height:calc(100vh - var(--header-height,64px));display:grid;align-items:center}
.fsync__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);
  gap:clamp(40px,5vw,88px);align-items:center}

.fsync__eyebrow{margin:0 0 12px;font-size:14px;font-weight:700;color:var(--blue);
  letter-spacing:-.01em}
.fsync__head{font-size:clamp(25px,2.9vw,40px);font-weight:800;letter-spacing:-.038em;
  line-height:1.3;margin:0 0 clamp(24px,2.6vw,40px)}

.fsync__list{list-style:none;margin:0;padding:0}
.fsync__item{padding:18px 0;border-top:1px solid var(--line-soft);cursor:pointer}
.fsync__item:last-child{border-bottom:1px solid var(--line-soft)}
.fsync__item h3{margin:0;font-size:clamp(17px,1.5vw,20px);font-weight:800;
  letter-spacing:-.028em;line-height:1.45;color:var(--line-strong);
  transition:color .5s cubic-bezier(.32,.72,.28,1)}
.fsync__item.is-on h3{color:var(--ink)}
.fsync__item:hover h3{color:var(--sub)}
.fsync__item.is-on:hover h3{color:var(--ink)}

/* 설명은 내용 높이를 몰라도 되는 0fr → 1fr 로 접었다 편다 */
.fsync__more{display:grid;grid-template-rows:0fr;
  transition:grid-template-rows .6s cubic-bezier(.32,.72,.28,1)}
.fsync__more > div{overflow:hidden}
.fsync__item.is-on .fsync__more{grid-template-rows:1fr}
.fsync__more p{margin:12px 0 0;font-size:clamp(14.5px,1.05vw,16px);line-height:1.75;
  color:var(--sub);letter-spacing:-.012em;
  opacity:0;transform:translateY(6px);
  transition:opacity .5s .1s cubic-bezier(.32,.72,.28,1),transform .55s .1s cubic-bezier(.32,.72,.28,1)}
.fsync__item.is-on .fsync__more p{opacity:1;transform:none}
.fsync__more .show__more{margin-top:16px;opacity:0;transform:translateY(6px);
  transition:opacity .5s .18s cubic-bezier(.32,.72,.28,1),transform .55s .18s cubic-bezier(.32,.72,.28,1)}
.fsync__item.is-on .fsync__more .show__more{opacity:1;transform:none}

/* 오른쪽 화면은 겹쳐 두고 지금 것만 보인다 */
.fsync__media{position:relative;aspect-ratio:16/10;border-radius:18px;
  background:var(--line-soft);overflow:hidden;
  box-shadow:0 2px 6px rgba(17,17,18,.05),0 40px 80px -48px rgba(17,17,18,.5)}
.fsync__shot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:top left;opacity:0;transform:scale(1.015) translateY(10px);
  transition:opacity .7s cubic-bezier(.32,.72,.28,1),transform .85s cubic-bezier(.32,.72,.28,1)}
.fsync__shot.is-on{opacity:1;transform:none}

@media (max-width:980px){
  /* 좁은 화면에서는 스티키를 걷고 평범한 목록으로 — 스티키가 갇히면 답답하다 */
  .fsync__track{height:auto}
  .fsync__stick{position:static;height:auto;padding-block:var(--sec-y,56px)}
  .fsync__grid{grid-template-columns:1fr;gap:28px}
  .fsync__media{order:-1}
  .fsync__item.is-on .fsync__more,.fsync__more{grid-template-rows:1fr}
  .fsync__item h3{color:var(--ink)}
  .fsync__more p,.fsync__more .show__more{opacity:1;transform:none}
}
@media (prefers-reduced-motion:reduce){
  .fsync__more,.fsync__more p,.fsync__more .show__more,.fsync__shot,.fsync__item h3{
    transition:none}
}


/* 비교표 밴드를 들어내면서 장면이 평범한 흰 섹션으로 돌아왔다.
   밴드용 규칙은 붙을 마크업이 없어 죽은 코드지만, 혹시 남은 게 걸리지
   않도록 장면 쪽만 분명히 되돌려 둔다. */
.tscene:before{content:none !important}
.tscene{transform:none !important;border-radius:24px !important}
.tscene__copy,.thread{opacity:1 !important}

/* 각도 썸네일 — CSS 도형 대신 실제 렌더 */
.dcard__thumb{background:var(--line-soft) !important;padding:0}
.dcard__thumb:after{content:none !important}
.dcard__thumb img{width:100%;height:100%;object-fit:cover;display:block;border-radius:inherit}

/* 초안이 나오면 히어로 버튼 줄 아래에 '이 주제로' 버튼이 따라 붙는다 */
.hero2__aside .morebtn{margin:16px 0 0;height:46px;font-size:14px;padding-left:19px}
.hero2__aside .morebtn svg{width:26px;height:26px;padding:6px}
@media (max-width:900px){ .hero2__aside .morebtn{width:100%;justify-content:center} }

/* ==========================================================================
   히어로 아이브로우 + 가격 미리보기
   처음 본 사람이 판단해야 하는 두 가지를 페이지 안에서 답한다:
   "이게 나를 위한 제품인가"(아이브로우)와 "그래서 14일 뒤 얼마인가"(ppeek).
   숫자는 app/core.py의 PLANS와 entitlements()를 그대로 따른다 —
   체험이 끝나면 ai/publishes가 0이 되므로 '계속 무료'라고 쓰지 않는다.
   ========================================================================== */
.hero2__eyebrow{margin:0 0 14px;font-size:14px;font-weight:700;letter-spacing:-.01em;
  color:var(--blue);display:inline-flex;align-items:center;gap:8px}
.hero2__eyebrow:before{content:"";width:6px;height:6px;border-radius:50%;
  background:currentColor;flex:none}

.ppeek{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));
  gap:16px;max-width:880px;margin:0 auto}
.ppeek>div{background:var(--paper);border:1px solid var(--line);border-radius:18px;
  padding:26px 28px;display:flex;flex-direction:column;gap:12px}
.ppeek>.ppeek__paid{background:var(--ink);border-color:var(--ink);color:#fff}
.ppeek__tag{margin:0;font-size:13px;font-weight:700;letter-spacing:-.01em;color:var(--muted)}
.ppeek__paid .ppeek__tag{color:rgba(255,255,255,.62)}
.ppeek__free ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.ppeek__free li{font-size:16px;font-weight:600;color:var(--ink);letter-spacing:-.015em;
  display:flex;align-items:center;gap:9px}
.ppeek__free li:before{content:"";width:16px;height:16px;flex:none;border-radius:50%;
  background:var(--blue-soft,rgba(0,128,255,.12));
  box-shadow:inset 0 0 0 2px var(--blue)}
.ppeek__price{margin:0;display:flex;align-items:baseline;gap:7px}
.ppeek__price b{font-size:clamp(28px,3.4vw,38px);font-weight:800;letter-spacing:-.035em}
.ppeek__price span{font-size:15px;color:rgba(255,255,255,.66);font-weight:600}
.ppeek__note{margin:0;font-size:13.5px;line-height:1.65;color:rgba(255,255,255,.7)}
.ppeek__more{margin-top:auto;display:inline-flex;align-items:center;gap:7px;
  font-size:14.5px;font-weight:700;color:#fff;text-decoration:none;letter-spacing:-.015em}
.ppeek__more svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round;
  transition:transform .42s cubic-bezier(.32,.72,.28,1)}
.ppeek__more:hover svg{transform:translateX(4px)}
@media(max-width:640px){
  .ppeek>div{padding:22px 20px}
}

/* ==========================================================================
   기능 카드 목업
   전에는 1680px 대시보드 스크린샷을 426px 카드에 넣어 726px 폭으로 잘라 썼다.
   글자가 읽히지 않고 세 번째 카드는 이미지가 카드 밖으로 넘쳤다.
   지금은 앱을 폰 폭 430px · 2배 해상도로 찍은 780px 이미지라,
   카드 안에서 CSS 픽셀 기준 1:1로 들어가며 글자가 그대로 읽힌다.
   위에서부터 보여주고 아래는 카드 밖으로 자연스럽게 흘려보낸다.
   ========================================================================== */
/* 목업은 780x736~860 — 박스를 정사각으로 두면 세 장 모두 가로가 살고
   넘치는 아래쪽만 잘린다. 박스가 이미지보다 세로로 길면 cover가 가로를 깎는다. */
.fcard3__media{flex:0 0 auto;margin:26px auto 0;width:min(100%,336px);
  aspect-ratio:1/1;height:auto;min-height:0;
  border-radius:16px;overflow:hidden;background:var(--paper);
  box-shadow:0 1px 0 var(--line) inset,0 22px 44px -28px rgba(16,24,40,.3)}
.fcard3__media img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block}
@media(max-width:1100px){ .fcard3__media{width:min(100%,312px)} }
@media(max-width:640px){ .fcard3__media{width:min(100%,290px);margin-top:22px} }

/* ==========================================================================
   채널 배지 — 문제 섹션 머리
   "왜 이렇게 지치는지" 바로 아래에서 어디를 매일 굴려야 하는지 보여준다.
   스레드 마크는 단색 path 하나라 currentColor로 테마를 따라간다.
   ========================================================================== */
.plat{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:10px 16px;margin:20px 0 0}
.plat__i{display:inline-flex;align-items:center;gap:7px;
  padding:7px 14px 7px 11px;border-radius:100px;
  background:var(--paper);border:1px solid var(--line);
  font-size:14.5px;font-weight:700;letter-spacing:-.015em;color:var(--ink)}
.plat__g{width:18px;height:18px;flex:none;fill:currentColor}
.plat__g--ig{fill:none;stroke:currentColor;stroke-width:1.9}
.plat__g--ig .dot{fill:currentColor;stroke:none}
.plat__t{font-size:14.5px;color:var(--muted);letter-spacing:-.01em}
@media(max-width:480px){ .plat__t{flex-basis:100%;text-align:center} }

/* ==========================================================================
   요금 — 플랜 고르기에서 "쌓아 올리기"로
   4단 플랜은 "나는 어디에 해당하나"를 먼저 풀게 만든다.
   기본 하나에 필요한 것만 더하는 구조는 그 질문 자체를 없앤다.
   ========================================================================== */
.build{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:20px;
  max-width:1060px;margin:0 auto}
.build>div{background:var(--paper);border:1px solid var(--line);border-radius:20px;padding:30px 32px}
.build>.build__base{background:var(--ink);border-color:var(--ink);color:#fff}
.build__tag{margin:0 0 10px;font-size:12.5px;font-weight:700;letter-spacing:.02em;
  text-transform:uppercase;color:var(--muted)}
.build__base .build__tag{color:rgba(255,255,255,.58)}
.build__base h3{margin:0;font-size:clamp(24px,2.6vw,30px);font-weight:800;letter-spacing:-.03em}
.build__what{margin:6px 0 0;font-size:15px;color:rgba(255,255,255,.72)}
.build__price{margin:18px 0 22px;display:flex;align-items:baseline;gap:6px}
.build__price b{font-family:var(--num,inherit);font-size:clamp(36px,4.4vw,52px);font-weight:800;
  letter-spacing:-.04em;line-height:1}
.build__price span{font-size:16px;font-weight:600;color:rgba(255,255,255,.7)}
.build__list{list-style:none;margin:0;padding:20px 0 0;display:grid;gap:11px;
  border-top:1px solid rgba(255,255,255,.14)}
.build__list li{position:relative;padding-left:24px;font-size:15px;line-height:1.5;
  color:rgba(255,255,255,.86)}
.build__list li:before{content:"";position:absolute;left:0;top:7px;width:13px;height:8px;
  border-left:2px solid var(--blue);border-bottom:2px solid var(--blue);
  transform:rotate(-45deg);border-radius:1px}

.adds{list-style:none;margin:0;padding:0;display:grid}
.adds li{display:flex;align-items:flex-start;gap:18px;padding:17px 0;
  border-top:1px solid var(--line-soft)}
.adds li:first-child{border-top:0;padding-top:4px}
.adds li>div{min-width:0}
.adds b{display:block;font-size:16px;font-weight:700;letter-spacing:-.02em;color:var(--ink)}
.adds span{display:block;margin-top:4px;font-size:14px;line-height:1.55;color:var(--muted)}
.adds__p{flex:none;margin:0;font-size:19px;font-weight:800;letter-spacing:-.03em;
  color:var(--ink);white-space:nowrap}
.adds__p small{margin-left:3px;font-size:12.5px;font-weight:600;color:var(--muted)}

.combo{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:20px;
  max-width:1060px;margin:20px auto 0}
.combo__copy{background:var(--blue-050,#eef6ff);border:1px solid var(--blue-100,#d6ebff);
  border-radius:20px;padding:30px 32px}
.combo__copy h3{margin:0 0 20px;font-size:clamp(22px,2.4vw,28px);font-weight:800;
  letter-spacing:-.03em;line-height:1.3;color:var(--ink)}
.combo__calc{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.combo__calc li{display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  font-size:15px;color:var(--sub)}
.combo__calc b{font-weight:700;color:var(--ink);white-space:nowrap}
.combo__sum{display:flex;align-items:baseline;gap:6px;margin:16px 0 20px;padding-top:16px;
  border-top:1px solid var(--blue-100,#d6ebff)}
.combo__sum b{font-size:clamp(32px,4vw,44px);font-weight:800;letter-spacing:-.04em;
  line-height:1;color:var(--blue)}
.combo__sum span{font-size:16px;font-weight:700;color:var(--blue)}
.combo__note{margin:12px 0 0;font-size:13.5px;color:var(--muted)}
.combo__side{display:grid;gap:20px;align-content:start}
.combo__box{background:var(--paper);border:1px solid var(--line);border-radius:20px;padding:26px 28px}
.combo__box p{margin:0;font-size:14px;line-height:1.6;color:var(--muted)}
.combo__year{margin:0 0 8px !important}
.combo__year b{font-size:19px;font-weight:800;letter-spacing:-.025em;color:var(--ink)}
.combo__box .ppeek__more{margin-top:14px;color:var(--blue)}

.trialbox{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;
  max-width:1060px;margin:20px auto 0;padding:20px 26px;
  background:var(--line-soft);border-radius:16px}
.trialbox b{font-size:16px;font-weight:800;letter-spacing:-.02em;color:var(--ink)}
.trialbox span{font-size:14.5px;color:var(--muted);line-height:1.6}

@media(max-width:900px){
  .build,.combo{grid-template-columns:1fr}
  .build>div,.combo__copy,.combo__box{padding:26px 22px}
  .trialbox{padding:18px 20px}
}

/* ==========================================================================
   직접 운영 vs 포스트워크
   전에는 밤에 노트북을 보는 사람 사진과 편안해진 사람 사진이었다.
   나머지 페이지가 전부 실제 제품 화면인데 그 섹션만 스톡 사진이라 톤이 튀었고,
   무엇보다 "내가 하는 짓인데?"가 아니라 남의 이야기로 읽혔다.
   그래서 감정이 아니라 실제 하루의 단계를 세어 보여준다.
   ========================================================================== */
.vs{display:grid;grid-template-columns:1fr auto 1fr;align-items:stretch;gap:18px;
  max-width:1020px;margin:0 auto}
.vs__side{background:var(--paper);border:1px solid var(--line);border-radius:20px;
  padding:28px 30px;display:flex;flex-direction:column}
.vs__side--pw{background:var(--ink);border-color:var(--ink);color:#fff}
.vs__tag{margin:0 0 18px;font-size:12.5px;font-weight:700;letter-spacing:.02em;
  text-transform:uppercase;color:var(--muted)}
.vs__side--pw .vs__tag{color:rgba(255,255,255,.6)}
.vs__steps{list-style:none;margin:0;padding:0;counter-reset:vs;display:grid;gap:0}
.vs__steps li{counter-increment:vs;position:relative;padding:11px 0 11px 34px;
  font-size:15px;line-height:1.5;color:var(--sub);letter-spacing:-.015em}
.vs__steps li+li{border-top:1px solid var(--line-soft)}
.vs__side--pw .vs__steps li{color:rgba(255,255,255,.84)}
.vs__side--pw .vs__steps li+li{border-top-color:rgba(255,255,255,.12)}
.vs__steps li:before{content:counter(vs);position:absolute;left:0;top:11px;
  width:21px;height:21px;border-radius:50%;display:grid;place-items:center;
  background:var(--line-soft);color:var(--muted);
  font-size:11.5px;font-weight:800;font-variant-numeric:tabular-nums}
.vs__side--pw .vs__steps li:before{background:rgba(255,255,255,.14);color:#fff}
/* 내일 또 1번부터 — 이 줄이 이 섹션의 요점이다 */
.vs__loop{color:var(--ink) !important;font-weight:700}
.vs__loop:before{content:"↻" !important;background:transparent !important;
  color:var(--ink) !important;font-size:15px !important}
/* 한 번만 하면 되는 일과, 사람이 하는 일 */
.vs__once:before{content:"1" !important}
.vs__me{color:#fff !important;font-weight:700}
.vs__me:before{background:var(--blue) !important;color:#fff !important}
.vs__note{margin:18px 0 0;padding-top:16px;border-top:1px solid rgba(255,255,255,.14);
  font-size:14.5px;line-height:1.65;color:rgba(255,255,255,.76)}
.vs__note b{color:#fff;font-weight:700}
.vs__mid{display:grid;place-items:center;align-self:center}
.vs__word{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;
  background:var(--paper);border:1px solid var(--line);
  font-size:13px;font-weight:800;color:var(--muted);letter-spacing:-.02em}
@media(max-width:860px){
  .vs{grid-template-columns:1fr;gap:12px}
  .vs__mid{padding:2px 0}
  .vs__side{padding:24px 22px}
}

/* ==========================================================================
   신뢰 배지
   전에는 "Meta 공식 API로만 연결하고, 계정 비밀번호는 받지 않습니다"가
   히어로 설명문 안에 문장으로 들어 있었다. SNS 자동화를 처음 보는 사람이
   가장 먼저 불안해하는 지점인데, 긴 문장 안에 섞이면 읽히지 않는다.
   네 칸으로 끊어 눈에 먼저 들어오게 한다. 전부 코드로 확인한 사실만 적는다.
   ========================================================================== */
.trust{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px 20px;margin:24px 0 0;padding:20px 0 0;border-top:1px solid var(--line)}
.trust li{position:relative;padding-left:22px;min-width:0}
.trust li:before{content:"";position:absolute;left:0;top:5px;width:12px;height:7px;
  border-left:2px solid var(--blue);border-bottom:2px solid var(--blue);
  transform:rotate(-45deg);border-radius:1px}
.trust b{display:block;font-size:14.5px;font-weight:700;letter-spacing:-.02em;color:var(--ink)}
.trust span{display:block;margin-top:2px;font-size:13px;line-height:1.5;color:var(--muted)}
@media(max-width:560px){ .trust{grid-template-columns:1fr;gap:11px} }

/* ==========================================================================
   준비 → 승인 → 운영
   여기 3개 카드와 바로 아래 3개 상세 섹션이 같은 내용을 두 번 말하고 있었다.
   설명은 아래 실제 화면에 맡기고, 여기는 흐름만 알려주는 자리로 줄인다.
   2번 칸만 색이 다른 이유가 이 제품의 요점이다 — 사람이 하는 일은 그것뿐이다.
   ========================================================================== */
.steps3{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;margin:0;padding:0;max-width:1020px;margin-inline:auto}
.steps3 li{background:var(--paper);border:1px solid var(--line);border-radius:18px;
  padding:26px 26px 28px}
.steps3__n{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;
  background:var(--line-soft);color:var(--muted);
  font-size:13.5px;font-weight:800;font-variant-numeric:tabular-nums}
.steps3__n--me{background:var(--blue);color:#fff;
  box-shadow:0 0 0 4px var(--blue-050,#eef6ff)}
.steps3 b{display:block;margin:14px 0 7px;font-size:19px;font-weight:800;
  letter-spacing:-.03em;color:var(--ink)}
.steps3 p{margin:0;font-size:14.5px;line-height:1.6;color:var(--muted)}
@media(max-width:860px){ .steps3{grid-template-columns:1fr;gap:12px} }

/* 실제 화면은 더 크게 — 글을 읽지 않아도 흐름이 보여야 한다.
   .show__row 는 grid 이므로 비율로 키운다. */
.show__shot img{width:100%;display:block}
@media(min-width:1101px){
  .show__row{grid-template-columns:1fr 1.7fr;gap:56px}
  .show__row:nth-child(even){grid-template-columns:1.7fr 1fr}
}

/* ==========================================================================
   자동응답 장면의 주석
   인스타그램을 흉내 낸 대화만 보여주면 "그래서 포스트워크가 여기서 뭘 했지?"가
   남는다. 세 단계를 옆에 적어 우리 몫을 분명히 한다.
   ========================================================================== */
.tsteps{list-style:none;margin:18px 0 0;padding:16px 0 0;display:grid;gap:11px;
  border-top:1px solid var(--line-soft)}
.tsteps li{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;
  column-gap:11px;align-items:center}
.tsteps span{grid-row:1 / span 2;display:grid;place-items:center;width:23px;height:23px;
  border-radius:50%;background:var(--blue);color:#fff;
  font-size:11.5px;font-weight:800;font-variant-numeric:tabular-nums}
.tsteps b{font-size:14px;font-weight:700;letter-spacing:-.02em;color:var(--ink)}
.tsteps i{font-style:normal;font-size:12.5px;line-height:1.5;color:var(--muted)}
@media(max-width:900px){ .tsteps{margin-top:14px} }

/* ==========================================================================
   장면 단위 랜딩 (.sc)
   =========================================================================
   전에는 한 섹션 안에서 설명을 끝내려 했다. 기능명·제목·설명·화면·상태·
   부가설명·버튼이 한 화면에 다 있으니 어디를 먼저 볼지가 흐려졌다.

   여기서는 한 화면에 한 문장만 둔다. 다음 이야기는 다음 스크롤에서 한다.
   그래서 필요한 건 장식이 아니라 두 가지다 — 큰 제목과 큰 여백.

   폭은 두 벌만 쓴다. 글은 좁게(--read), 제품 화면은 넓게(--wide).
   섹션마다 980·1100·1280으로 달라지면 정돈감이 사라진다.
   색도 흰색과 아주 옅은 중성색 둘뿐이다. 브랜드색은 '결정'의 순간에만 쓴다 —
   승인 버튼과 강조 문구. 그래야 파란색이 의미를 갖는다.
   ========================================================================== */
:root{
  /* 이전 랜딩이 1600px 기준이라 760px 로 좁히니 답답해졌다.
     글은 읽히는 한도 안에서 최대한 넓게, 제품 화면은 이전만큼 크게. */
  --read: 1280px;         /* 글이 놓이는 폭 */
  --wide: 1720px;         /* 제품 화면이 놓이는 폭 */
  /* 2vw는 큰 모니터에 맞춰 잡은 값이라 태블릿 가로(1024~1180)에서 22px밖에
     안 나왔다. 폭은 넓은데 내용이 화면 가장자리에 붙어 답답해 보였다.
     기울기를 키우고 상한을 올려서, 390px에서 18px·1112px에서 36px·
     큰 화면에서 52px이 되도록 한다. */
  --gut: clamp(18px, 3.2vw, 52px);
  --air: clamp(96px, 13vw, 180px);   /* 장면과 장면 사이 */
  --off: #f7f8fa;         /* 유일한 보조 배경 */
}

.sc{padding-block:var(--air);background:var(--paper)}
.sc--tint{background:var(--off)}
.sc>.col{width:min(var(--wide), 100% - var(--gut)*2);margin-inline:auto}
.sc__big{margin:0;font-size:clamp(40px,6.2vw,76px);line-height:1.15;
  letter-spacing:-.048em;font-weight:800;color:var(--ink);text-wrap:balance}
.sc__big em{font-style:normal;color:var(--blue)}
.sc__say{margin:clamp(22px,2.6vw,34px) 0 0;font-size:clamp(18px,1.55vw,21px);
  line-height:1.7;color:var(--muted);letter-spacing:-.012em;max-width:62ch}
.sc__who{margin:0 0 clamp(18px,2vw,26px);font-size:16px;font-weight:700;
  letter-spacing:-.012em;color:var(--blue);display:inline-flex;align-items:center;gap:8px}
.sc__who:before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.sc__step{margin:0 0 clamp(14px,1.6vw,20px);font-size:15px;font-weight:800;
  letter-spacing:.06em;color:var(--faint);font-variant-numeric:tabular-nums}
.sc__do{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;
  margin-top:clamp(28px,3.2vw,40px)}
.sc__quiet{display:inline-flex;align-items:center;gap:7px;font-size:17.5px;font-weight:700;
  letter-spacing:-.015em;color:var(--sub);text-decoration:none}
.sc__quiet svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round;
  transition:transform .42s cubic-bezier(.32,.72,.28,1)}
.sc__quiet:hover{color:var(--ink);text-decoration:none}
.sc__quiet:hover svg{transform:translateX(4px)}
.sc__fine{margin:clamp(18px,2vw,24px) 0 0;font-size:15px;color:var(--faint);letter-spacing:-.01em}

/* 제품 화면 — 이 제품은 설명보다 화면이 상품이다 */
.shot,.shotwide{margin:clamp(44px,6vw,80px) auto 0;padding:0;
  width:min(var(--wide), 100% - var(--gut)*2)}
.shot--narrow{width:min(900px, 100% - var(--gut)*2)}
.shot img,.shotwide img{display:block;width:100%;height:auto;border-radius:clamp(12px,1.4vw,20px);
  border:1px solid var(--line);
  box-shadow:0 40px 80px -48px rgba(16,24,40,.34), 0 2px 6px rgba(16,24,40,.04)}
.shotwide{width:min(1840px, 100% - var(--gut)*2)}

.sc--hero{padding-top:clamp(60px,9vw,120px)}
.sc--hero .sc__big{font-size:clamp(44px,7.4vw,88px);line-height:1.06;letter-spacing:-.052em}

/* ② 업무가 하나씩 쌓이는 장면. 설명하지 않고 세어 보여준다. */
.pile{list-style:none;width:min(880px, 100% - var(--gut)*2);
  margin:clamp(40px,5vw,64px) auto 0;padding:0;display:grid;gap:0}
.pile li{padding:clamp(15px,1.8vw,21px) 0;border-top:1px solid var(--line-soft);
  font-size:clamp(18px,1.8vw,23px);font-weight:700;letter-spacing:-.025em;color:var(--sub)}
.pile li:first-child{border-top:0}
.pile__loop{color:var(--ink) !important;display:flex;align-items:center;gap:10px}
.pile__loop:before{content:"↻";font-size:18px;color:var(--ink)}

/* ③ 전환 화면에는 문장만 둔다 */
.sc--turn{background:var(--ink);color:#fff}
.sc--turn .sc__big{color:#fff}
.sc--turn .sc__big em{color:#8fc4ff}
.sc--turn .sc__say{color:rgba(255,255,255,.66)}

/* ⑧ 신뢰 — 흩어져 있던 것을 한 곳에 모은다 */
.four{list-style:none;width:min(var(--wide), 100% - var(--gut)*2);
  margin:clamp(44px,5vw,68px) auto 0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));gap:2px;
  background:var(--line);border:1px solid var(--line);border-radius:18px;overflow:hidden}
.four li{background:var(--paper);padding:clamp(24px,2.6vw,32px)}
.four b{display:block;font-size:19px;font-weight:800;letter-spacing:-.025em;color:var(--ink)}
.four span{display:block;margin-top:10px;font-size:16px;line-height:1.66;color:var(--muted)}

/* ⑨ 가격 — 테두리 친 표 대신 한 줄씩 */
.sc__beta{margin:clamp(20px,2.2vw,26px) 0 0;display:inline-flex;align-items:center;gap:10px;
  padding:9px 16px 9px 10px;border-radius:100px;background:var(--off);
  font-size:13.5px;color:var(--sub);letter-spacing:-.01em}
.sc__beta i{font-style:normal;padding:3px 8px;border-radius:99px;background:var(--ink);color:#fff;
  font-size:10.5px;font-weight:800;letter-spacing:.04em}
.pricetag{width:min(var(--wide), 100% - var(--gut)*2);margin:clamp(44px,5vw,64px) auto 0;
  display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(32px,4vw,72px);align-items:start}
.pricetag__main,.pricetag__what,.pricetag .btn,.pricetag .sc__quiet{grid-column:1}
.pricetag__add,.pricetag__note{grid-column:2;grid-row:auto}
.pricetag__add{margin-top:0}
.pricetag__note{margin-top:18px}
@media(max-width:860px){
  .pricetag{grid-template-columns:1fr;gap:0}
  .pricetag__main,.pricetag__what,.pricetag__add,.pricetag__note,
  .pricetag .btn,.pricetag .sc__quiet{grid-column:1}
  .pricetag__add{margin-top:clamp(28px,3vw,38px)}
}
.pricetag__main{display:flex;align-items:baseline;gap:8px;margin:0}
.pricetag__main b{font-size:clamp(50px,6.8vw,78px);font-weight:800;letter-spacing:-.05em;
  line-height:1;color:var(--ink);font-variant-numeric:tabular-nums}
.pricetag__main span{font-size:19px;font-weight:700;color:var(--muted)}
.pricetag__what{margin:13px 0 0;font-size:18.5px;color:var(--sub);letter-spacing:-.015em}
.pricetag__add{list-style:none;margin:clamp(28px,3vw,38px) 0 0;padding:0;display:grid}
.pricetag__add li{display:flex;align-items:baseline;justify-content:space-between;gap:20px;
  padding:16px 0;border-top:1px solid var(--line-soft);
  font-size:18.5px;color:var(--sub);letter-spacing:-.015em}
.pricetag__add b{font-weight:800;color:var(--ink);white-space:nowrap;
  font-variant-numeric:tabular-nums}
.pricetag__note{margin:20px 0 0;padding-top:18px;border-top:1px solid var(--line-soft);
  font-size:13.5px;line-height:1.7;color:var(--faint)}
.pricetag .btn{margin-top:26px}
.pricetag .sc__quiet{margin-left:20px}

/* ⑩ FAQ */
.sc--faq .faq{width:min(var(--wide), 100% - var(--gut)*2);max-width:none;
  margin:clamp(40px,4.6vw,60px) auto 0}
/* 넓어진 만큼 두 단으로 나눈다. 한 줄이 1384px 인 FAQ 는 눈이 따라가지 못한다. */
@media(min-width:1000px){
  .sc--faq .faq{display:grid;grid-template-columns:1fr 1fr;column-gap:clamp(32px,3.4vw,64px);
    align-content:start}
  .sc--faq .faq > details{margin:0}
}

/* ⑪ 마지막 — 여기에는 화면도 카드도 넣지 않는다 */
.sc--last{background:var(--ink);color:#fff;text-align:center}
.sc--last .col{text-align:center}
.sc--last .sc__big{color:#fff}
.sc--last .sc__big em{color:#8fc4ff}
.sc--last .sc__say{color:rgba(255,255,255,.66)}
.sc--last .sc__do{justify-content:center}
.sc--last .sc__quiet{color:rgba(255,255,255,.76)}
.sc--last .sc__quiet:hover{color:#fff}
.sc--last .sc__fine{color:rgba(255,255,255,.44)}

@media(max-width:760px){
  .sc--hero .sc__big{letter-spacing:-.04em}
  .four{border-radius:14px}
  .pricetag .sc__quiet{margin:14px 0 0}
  .pricetag .btn{width:100%}
}

/* ==========================================================================
   상단 네비 — 7요소에서 5요소로
   =========================================================================
   전에는 기능·요금 안내·FAQ·미리보기·로그인·무료로 시작하기가 모두 같은 무게로
   있었다. FAQ는 구매 의도가 생긴 사람이 아래에서 보는 보조 정보이고,
   '미리보기'는 한 번 해석해야 하는 이름이었다 — 같은 목적지를 네비에서는
   미리보기, 히어로에서는 제품 먼저 둘러보기, 푸터에서는 제품 화면으로 불렀다.

   지금은 기능 · 제품 둘러보기 · 요금 셋이고, 오른쪽에 로그인(글자)과
   무료로 시작하기(버튼) 하나씩이다. FAQ는 데스크톱에서 감추고 모바일 패널과
   푸터에만 남긴다. 강조는 버튼 하나뿐이어야 두 CTA가 경쟁하지 않는다.
   ========================================================================== */
:root{ --header-height:80px }
header{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;
  transition:background .3s var(--ease-ui),border-color .3s var(--ease-ui),
             transform .4s var(--ease-out3),opacity .4s var(--ease-out3)}
header.minimize{background:rgba(255,255,255,.88);
  -webkit-backdrop-filter:saturate(1.6) blur(14px);backdrop-filter:saturate(1.6) blur(14px);
  border-bottom-color:var(--line)}
header .wrap.nav{width:min(1440px, 100% - var(--gut)*2);max-width:none;padding-inline:0;gap:28px}

.logo{font-size:21px;font-weight:800;letter-spacing:-.035em;gap:10px}
.logo .m{width:35px;height:35px;border-radius:11px;box-shadow:0 5px 12px rgba(28,123,255,.28)}

#menu>li>a{padding:0 19px;font-size:16.5px;font-weight:600;color:var(--sub);letter-spacing:-.015em}
#menu>li>a:hover{color:var(--ink)}
#menu>li>a[aria-current]{color:var(--ink);font-weight:700}
/* 별도 페이지로 나간다는 것을 화살표로 알린다. 버튼으로 만들지는 않는다. */
.menu-out{gap:5px !important}
.menu-out svg{width:15px;height:15px;flex:none;fill:none;stroke:currentColor;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round;opacity:.55;
  transition:transform .42s cubic-bezier(.32,.72,.28,1),opacity .3s}
.menu-out:hover svg{transform:translate(2px,-2px);opacity:1}
#menu>li>a{white-space:nowrap}
.menu-faq{display:none}                      /* 데스크톱에서는 감춘다 */

.nav .right{gap:20px}
.nav .login{font-size:16.5px;font-weight:600;color:var(--muted)}
.nav .login:hover{color:var(--ink)}
.nav .start{height:46px;display:inline-flex;align-items:center;padding:0 22px;border-radius:11px;
  font-size:16px;font-weight:700;background:var(--ink)}
.nav .start:hover{background:var(--blue)}

@media(max-width:900px){
  header{background:rgba(255,255,255,.92);
    -webkit-backdrop-filter:saturate(1.6) blur(14px);backdrop-filter:saturate(1.6) blur(14px)}
  header .wrap.nav{width:min(1440px, 100% - var(--gut)*2)}
  /* 좁은 화면에서는 '무료로 시작'만 밖에 둔다. 로그인은 패널 안으로. */
  .nav .login{display:none !important}
  .menu-faq{display:block}
  .menu-login{display:block;border-top:1px solid var(--line);margin-top:8px;padding-top:4px}
  .menu-login>a{color:var(--muted) !important}
  .nav .start{height:42px;padding:0 17px;font-size:15px}
  .menu-out svg{width:14px;height:14px}
}

/* ==========================================================================
   제품 동작을 스크롤로 보여주는 장면 (.play)
   =========================================================================
   페이드업만 붙인 애니메이션은 아무것도 설명하지 않는다. 여기서는 스크롤이
   제품 사용 경험 자체가 되게 한다 — 검토 대기 → 승인 → 승인 완료 → 예약.

   긴 트랙 위에 sticky 로 한 화면을 세우고, 스크롤 진행률을 data-step 으로
   바꾼다. 나머지는 전부 CSS 전환이라 JS 는 숫자 하나만 바꾼다.
   스크롤 스냅은 쓰지 않는다 — 전에 섹션 높이가 제각각이라 화면이 튀었다.
   ========================================================================== */
.sc--play{padding-block:0;background:var(--off)}
/* .play 자체가 트랙이다. sticky 자식이 이 높이만큼 화면에 붙어 있는 동안
   스크롤 진행률이 단계로 바뀐다. 트랙을 형제로 두면 그 앞이 빈 밴드가 된다. */
.play{height:175vh;position:relative}
.play__stick{position:sticky;top:var(--header-height);height:calc(100vh - var(--header-height));
  display:grid;align-content:center}
.play .duo{align-items:center}
.play .col{width:auto;margin:0;position:static}

.play__stage{position:relative;width:100%;display:grid;gap:14px;align-content:center}
.pcard{background:var(--paper);border:1px solid var(--line);border-radius:18px;
  padding:clamp(20px,2.4vw,26px);
  box-shadow:0 30px 60px -44px rgba(16,24,40,.3);
  transition:transform .7s cubic-bezier(.32,.72,.28,1), box-shadow .7s cubic-bezier(.32,.72,.28,1)}
.pcard__top{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.pcard__who{font-size:13px;color:var(--muted);letter-spacing:-.01em}
.pcard__pill{margin-left:auto;display:inline-flex;align-items:center;gap:6px;
  padding:5px 11px;border-radius:99px;font-size:11.5px;font-weight:750;
  transition:opacity .45s var(--ease-ui), transform .45s var(--ease-ui)}
.pcard__pill i{width:7px;height:7px;border-radius:1px;background:currentColor}
.pcard__pill--wait{background:#fff4dd;color:#8a5a0b}
.pcard__pill--done{background:#e7f7ee;color:#1b7a48;position:absolute;right:0;
  opacity:0;transform:translateY(-4px) scale(.96)}
.pcard__pill--done i{border-radius:50%}
.pcard__top{position:relative}
.pcard__title{margin:0 0 9px;font-size:clamp(17px,1.7vw,20px);font-weight:800;
  letter-spacing:-.03em;color:var(--ink)}
.pcard__body{margin:0;font-size:14.5px;line-height:1.7;color:var(--muted)}
.pcard__do{display:flex;align-items:center;gap:8px;margin-top:18px;padding-top:16px;
  border-top:1px solid var(--line-soft)}
.pcard__go{display:inline-flex;align-items:center;justify-content:center;height:38px;padding:0 20px;
  border-radius:9px;background:var(--line-soft);color:var(--muted);
  font-size:14px;font-weight:750;letter-spacing:-.015em;
  transition:background .45s var(--ease-ui), color .45s var(--ease-ui),
             box-shadow .45s var(--ease-ui), transform .2s var(--ease-ui)}
.pcard__sub{display:inline-flex;align-items:center;justify-content:center;height:38px;padding:0 14px;
  border-radius:9px;border:1px solid var(--line);color:var(--sub);font-size:14px;font-weight:650}

/* 예약 칸은 처음에는 비어 있다가 승인 뒤에 채워진다 */
.pslot{display:flex;align-items:center;gap:12px;padding:16px 20px;border-radius:14px;
  border:1px dashed var(--line-strong);background:transparent;
  opacity:.4;transform:translateY(-6px);
  transition:opacity .6s var(--ease-ui), transform .6s cubic-bezier(.32,.72,.28,1),
             background .6s var(--ease-ui), border-color .6s var(--ease-ui)}
.pslot__when{font-size:15px;font-weight:800;letter-spacing:-.02em;color:var(--faint);
  transition:color .6s var(--ease-ui)}
.pslot__what{font-size:13px;color:var(--faint);transition:color .6s var(--ease-ui)}

/* 자막은 한 번에 한 줄만 */
.play__cap{position:relative;height:3.4em;margin:clamp(22px,2.6vw,34px) 0 0;
  font-size:clamp(16px,1.35vw,18.5px);color:var(--blue);letter-spacing:-.012em;
  font-weight:650;line-height:1.7}
.play__cap span{position:absolute;inset:0;opacity:0;transform:translateY(5px);
  transition:opacity .45s var(--ease-ui), transform .45s var(--ease-ui)}

/* ---- 단계 ---------------------------------------------------------------- */
.play[data-step="1"] .pcard__go,
.play[data-step="2"] .pcard__go,
.play[data-step="3"] .pcard__go{background:var(--blue);color:#fff;
  box-shadow:0 8px 20px -8px rgba(0,128,255,.6)}
.play[data-step="1"] .pcard__go{transform:scale(.97)}

.play[data-step="2"] .pcard__pill--wait,
.play[data-step="3"] .pcard__pill--wait{opacity:0;transform:translateY(4px) scale(.96)}
.play[data-step="2"] .pcard__pill--done,
.play[data-step="3"] .pcard__pill--done{opacity:1;transform:none}

.play[data-step="3"] .pcard{transform:translateY(10px) scale(.985);
  box-shadow:0 16px 34px -28px rgba(16,24,40,.3)}
.play[data-step="3"] .pslot{opacity:1;transform:none;background:var(--paper);
  border-style:solid;border-color:var(--blue-100,#d6ebff)}
.play[data-step="3"] .pslot__when{color:var(--blue-ink,#003a99)}
.play[data-step="3"] .pslot__what{color:var(--sub)}

.play[data-step="0"] [data-cap="0"],
.play[data-step="1"] [data-cap="1"],
.play[data-step="2"] [data-cap="2"],
.play[data-step="3"] [data-cap="3"]{opacity:1;transform:none}

@media(max-width:760px){
  .play{height:150vh}
  .play__stick{gap:22px}
}
/* 움직임을 줄이라고 한 사람에게는 마지막 상태를 그냥 보여준다 */
@media(prefers-reduced-motion:reduce){
  .play{height:auto}
  .play__stick{position:static;height:auto;padding-block:var(--air)}
  .pcard,.pcard__pill,.pslot,.play__cap span,.pcard__go{transition:none !important}
  .pcard__go{background:var(--blue);color:#fff}
  .pcard__pill--wait{opacity:0}
  .pcard__pill--done{opacity:1;transform:none}
  .pslot{opacity:1;transform:none;background:var(--paper);border-style:solid}
  .play__cap{height:auto}
  .play__cap span{position:static;opacity:0;display:none}
  .play__cap [data-cap="3"]{display:block;opacity:1}
}

/* 되살린 이전 요소들을 장면 구조 안에 앉힌다.
   내용 구조는 바뀌었지만 이 둘은 이전 디자인에서 가장 잘 만든 부분이었다.
   비교표는 "이거 내가 하는 짓인데?"를 만들고, 대화 장면은 자동응답을
   설명하는 대신 보여준다. 폭만 새 체계(--wide)에 맞춘다. */
.sc--pain .plat{margin-top:clamp(28px,3.4vw,44px)}
.sc--pain .vs{width:min(var(--wide), 100% - var(--gut)*2);
  margin:clamp(40px,5vw,64px) auto 0;max-width:none}
.tscenewrap{width:min(var(--wide), 100% - var(--gut)*2);
  margin:clamp(44px,6vw,80px) auto 0}
.tscenewrap .tscene{margin:0}

/* ==========================================================================
   하위 페이지를 메인과 같은 톤으로
   =========================================================================
   메인만 장면 구조로 바꾸니 기능·요금 페이지와 톤이 갈렸다. 내용을 다시 쓰지
   않고도 맞출 수 있는 것은 세 가지다 — 제목 크기, 여백, 폭.
   메인에서 정한 두 벌(--read / --wide)을 여기서도 그대로 쓴다.
   ========================================================================== */
body.sub section.blk{padding-block:var(--air)}
body.sub .head{margin-bottom:clamp(44px,5vw,68px)}
body.sub .head h2{font-size:clamp(36px,5.4vw,64px);line-height:1.18;letter-spacing:-.048em;
  font-weight:800;text-wrap:balance}
body.sub .head p{font-size:clamp(18px,1.5vw,21px);line-height:1.7;color:var(--muted);
  margin-top:clamp(16px,1.8vw,22px)}
body.sub .hero2__title,body.sub .hero h1{font-size:clamp(42px,7vw,80px);line-height:1.08;
  letter-spacing:-.05em;font-weight:800}
body.sub .hero .lede,body.sub .hero2__lede{font-size:clamp(18px,1.55vw,21px);line-height:1.7}
body.sub .wrap{width:min(var(--wide), 100% - var(--gut)*2);max-width:none;padding-inline:0}

/* 마지막 CTA는 메인과 같은 장면으로 */
body.sub .endcta{padding-block:clamp(72px,9vw,120px)}
body.sub .endcta__title{font-size:clamp(32px,4.8vw,54px);line-height:1.2;letter-spacing:-.045em}

/* 배경은 흰색과 옅은 중성색 둘뿐 — 메인과 같은 규칙 */
body.sub section.blk--secondary{background:var(--off)}

/* ==========================================================================
   힉스필드로 뽑은 3D 오브젝트를 장면에 앉힌다
   =========================================================================
   규칙은 하나다 — 실제 제품 화면이 주인공이고 3D는 거들기만 한다.
   그래서 포스터는 제품 화면보다 작게, 각도 썸네일과 아이콘은 글자 옆 크기로 둔다.
   여백은 다른 장면과 같은 값(--air 기준의 clamp)을 쓴다.
   ========================================================================== */

/* ③ 전환 — 어두운 화면 위에 흰 카드로 올린다 */
.poster3{width:min(880px, 100% - var(--gut)*2);margin:clamp(40px,5vw,64px) auto 0;padding:0}
.poster3 img{display:block;width:100%;height:auto;border-radius:clamp(14px,1.5vw,22px);
  background:var(--paper);
  box-shadow:0 50px 100px -56px rgba(0,0,0,.6), 0 2px 8px rgba(0,0,0,.24)}

/* ④ 준비 — 초안이 나오는 네 가지 각도 */
.angles{list-style:none;margin:clamp(30px,3.6vw,46px) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(150px,100%),1fr));
  gap:clamp(12px,1.6vw,20px);max-width:760px}
.angles li{display:flex;align-items:center;gap:11px;padding:11px 15px 11px 11px;
  background:var(--paper);border:1px solid var(--line);border-radius:100px}
.angles img{width:34px;height:34px;flex:none;object-fit:contain}
.angles b{font-size:14.5px;font-weight:700;letter-spacing:-.02em;color:var(--sub);
  white-space:nowrap}

/* ⑧ 신뢰 — 네 칸 머리에 아이콘 */
.four li{display:flex;flex-direction:column;align-items:flex-start}
.four img{width:52px;height:52px;object-fit:contain;margin:-6px 0 14px -6px}

@media(max-width:760px){
  .angles{max-width:none;grid-template-columns:1fr 1fr}
  .angles b{font-size:13.5px;white-space:normal}
  .four img{width:44px;height:44px}
}

/* ==========================================================================
   레이아웃 개편 — 글은 머무르고 화면이 지나간다
   =========================================================================
   장면을 전부 세로로 쌓으니 스크롤이 단조로웠다. 이제 설명 장면은 2단으로
   두고, 왼쪽 글을 sticky 로 붙잡은 채 오른쪽 화면이 지나가게 한다.
   읽는 사람은 한 문장을 들고 있는 채로 제품이 움직이는 걸 본다.
   01과 03은 좌우를 뒤집어 리듬을 준다.
   ========================================================================== */
.sc--duo{padding-block:calc(var(--air) * .8)}
.duo{width:min(var(--wide), 100% - var(--gut)*2);margin-inline:auto;
  display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  gap:clamp(40px,5vw,96px);align-items:start}
.sc--duo .col{width:auto;margin:0;position:sticky;
  top:calc(var(--header-height) + clamp(20px,3.5vh,48px))}
.sc--duo .shot,.sc--duo .shotwide,.sc--duo .tscenewrap{width:100%;margin:0}
.sc--flip .duo{direction:rtl}
.sc--flip .duo > *{direction:ltr}
.sc--duo .sc__big{font-size:clamp(34px,4.4vw,58px)}
.sc--duo .sc__say{font-size:clamp(17px,1.35vw,19px);max-width:46ch}
.sc--duo .angles{max-width:none;grid-template-columns:repeat(2,minmax(0,1fr))}

@media(max-width:1100px){
  .duo{grid-template-columns:1fr;gap:clamp(32px,5vw,52px)}
  .sc--duo .col{position:static}
  .sc--flip .duo{direction:ltr}
  .sc--duo .sc__big{font-size:clamp(36px,6vw,64px)}
  .sc--duo .sc__say{max-width:62ch}
}

/* ==========================================================================
   스크롤 연동 등장 — 한 덩어리로 뜨지 않고 차례로 선다
   =========================================================================
   전에는 블록 전체가 한 번에 페이드업했다. 읽는 순서와 뜨는 순서를 맞추면
   같은 시간 안에서도 훨씬 정돈돼 보인다. 눈을 끄는 게 목적이 아니라
   무엇을 먼저 읽어야 하는지를 말하는 게 목적이다.
   ========================================================================== */
html.js-scene .sc__who, html.js-scene .sc__step,
html.js-scene .sc__big, html.js-scene .sc__say,
html.js-scene .sc__do, html.js-scene .sc__fine,
html.js-scene .angles > li, html.js-scene .four > li,
html.js-scene .pricetag, html.js-scene .sc--faq .faq,
html.js-scene .shot, html.js-scene .shotwide,
html.js-scene .poster3, html.js-scene .tscenewrap, html.js-scene .vs,
html.js-scene .plat3 > li{
  opacity:0;transform:translateY(26px);
  transition:opacity .86s cubic-bezier(.16,.84,.32,1), transform .95s cubic-bezier(.16,.84,.32,1)}
html.js-scene .sc.is-in .sc__who,  html.js-scene .sc.is-in .sc__step{transition-delay:0s}
html.js-scene .sc.is-in .sc__big  {transition-delay:.07s}
html.js-scene .sc.is-in .sc__say  {transition-delay:.15s}
html.js-scene .sc.is-in .sc__do   {transition-delay:.22s}
html.js-scene .sc.is-in .sc__fine {transition-delay:.28s}
html.js-scene .sc.is-in .plat3 > li{transition-delay:calc(.18s + var(--i,0) * .08s)}
html.js-scene .sc.is-in .vs       {transition-delay:.24s}
html.js-scene .sc.is-in .shot,
html.js-scene .sc.is-in .shotwide,
html.js-scene .sc.is-in .poster3,
html.js-scene .sc.is-in .tscenewrap{transition-delay:.2s}
html.js-scene .sc.is-in .pricetag,
html.js-scene .sc.is-in .faq       {transition-delay:.18s}
html.js-scene .sc.is-in .angles > li,
html.js-scene .sc.is-in .four > li {transition-delay:calc(.24s + var(--i,0) * .07s)}
html.js-scene .sc.is-in .sc__who,  html.js-scene .sc.is-in .sc__step,
html.js-scene .sc.is-in .sc__big,  html.js-scene .sc.is-in .sc__say,
html.js-scene .sc.is-in .sc__do,   html.js-scene .sc.is-in .sc__fine,
html.js-scene .sc.is-in .angles > li, html.js-scene .sc.is-in .four > li,
html.js-scene .sc.is-in .pricetag, html.js-scene .sc.is-in .faq,
html.js-scene .sc.is-in .shot,     html.js-scene .sc.is-in .shotwide,
html.js-scene .sc.is-in .poster3,  html.js-scene .sc.is-in .tscenewrap,
html.js-scene .sc.is-in .vs,       html.js-scene .sc.is-in .plat3 > li{
  opacity:1;transform:none}

/* 화면은 장면을 지나가는 동안 아주 조금 더 움직인다. 눈치채지 못할 만큼만. */
[data-par]{will-change:transform}

@media(prefers-reduced-motion:reduce){
  html.js-scene .sc *{opacity:1 !important;transform:none !important;transition:none !important}
  [data-par]{transform:none !important}
  .sc--duo .col{position:static}
}

/* 비교 카드의 사진 — 원래 있던 것을 돌려놓는다.
   단계 목록만 두면 글자 덩어리 둘이라 좌우 차이가 늦게 읽힌다.
   사진이 먼저 분위기를 갈라주고, 숫자가 그 차이를 확인시킨다.
   카드 폭을 넘지 않게 위쪽만 둥글게 물려 넣는다. */
.vs__side{position:relative;overflow:hidden;isolation:isolate}
.vs__pic{position:absolute;inset:0;margin:0;padding:0;z-index:0;
  border-radius:inherit;background:var(--line-soft)}
.vs__pic img{display:block;width:100%;height:100%;object-fit:cover}
.vs__pic:after{content:"";position:absolute;inset:0}
.vs__side > :not(.vs__pic){position:relative;z-index:1}

/* 사진 위에 바로 글을 쓴다.
   전에는 사진이 카드 위쪽 40%를 차지하고 글은 그 아래 흰 바닥에서 시작했다.
   사진과 글이 두 덩어리로 갈려서, 사진은 장식이고 글은 글이었다.
   이제 사진은 카드 전체를 덮는 바탕이 되고 글이 그 위에 바로 올라간다.
   읽힘은 사진 위에 덮는 막의 농도가 책임진다 — 위쪽은 옅게 해서 사진이
   보이게 하고, 글이 촘촘해지는 아래로 갈수록 짙어진다. */
.vs__side--now .vs__pic img{object-position:center 26%;filter:saturate(.62) contrast(.94)}
.vs__side--now .vs__pic:after{
  background:linear-gradient(180deg,
    rgba(255,255,255,.72) 0%, rgba(255,255,255,.86) 26%,
    rgba(255,255,255,.93) 52%, rgba(255,255,255,.96) 100%)}
.vs__side--pw .vs__pic img{object-position:center 32%;filter:saturate(.78) brightness(.82)}
.vs__side--pw .vs__pic:after{
  background:linear-gradient(180deg,
    rgba(25,31,40,.62) 0%, rgba(25,31,40,.82) 26%,
    rgba(25,31,40,.91) 52%, rgba(25,31,40,.95) 100%)}

/* 사진 자리를 따로 비우지 않는다. 다만 맨 윗줄이 사진의 가장 밝은 부분에
   닿지 않도록 머리만 조금 더 준다. */
.vs__side{padding-top:clamp(34px,3.4vw,46px)}
.vs__tag{color:var(--ink)}
.vs__side--pw .vs__tag{color:#fff}

/* 준비 장면 여백 — 2단이라 위아래 여백까지 크게 두면 화면이 비어 보인다 */
.sc--duo{padding-block:calc(var(--air) * .62)}

/* ==========================================================================
   스레드 · 인스타그램 — 작은 배지에서 큰 3D 오브젝트로
   =========================================================================
   전에는 18px SVG 두 개가 알약 안에 들어 있어서 "어디에 올리는 제품인지"가
   거의 읽히지 않았다. 이 섹션의 요점이 '두 곳을 매일 굴려야 한다'이므로
   플랫폼 자체가 크게 보여야 한다. 다른 힉스필드 오브젝트와 같은 유리 질감이라
   페이지 안에서 따로 놀지 않는다.
   ========================================================================== */
.plat3{list-style:none;display:flex;flex-wrap:wrap;align-items:center;
  gap:clamp(16px,2.4vw,36px);margin:clamp(30px,3.6vw,48px) 0 0;padding:0}
.plat3 > li{display:flex;align-items:center;gap:14px;min-width:0}
.plat3 img{width:clamp(64px,7vw,104px);height:auto;flex:none;
  filter:drop-shadow(0 14px 26px rgba(16,24,40,.12))}
.plat3 b{display:block;font-size:clamp(18px,1.7vw,22px);font-weight:800;
  letter-spacing:-.03em;color:var(--ink);line-height:1.25}
.plat3 span{display:block;margin-top:4px;font-size:14.5px;color:var(--muted);
  letter-spacing:-.01em}
.plat3__say{font-size:15px;color:var(--faint);letter-spacing:-.01em;
  padding-left:clamp(0px,1.4vw,20px)}
@media(max-width:760px){
  .plat3{gap:18px}
  .plat3 > li{flex:1 1 100%}
  .plat3__say{flex-basis:100%;padding-left:0}
}

/* ==========================================================================
   히어로 모핑 — 두 플랫폼이 하나로 합쳐진다
   =========================================================================
   이 제품이 파는 게 "스레드와 인스타그램을 한 곳에서"이므로, 그 문장을
   글로 또 쓰는 대신 눈앞에서 일어나게 한다. 스크롤을 내리면 두 로고가
   가운데로 모이며 작아지고, 그 자리에 포스트워크 마크가 선다.
   스크롤 진행률이 data-m 을 0/1 로 바꾸는 것뿐이고 나머지는 전환이다.
   ========================================================================== */
.herotop{display:grid;grid-template-columns:minmax(0,1fr) auto;
  gap:clamp(32px,4vw,72px);align-items:center;
  width:min(var(--wide), 100% - var(--gut)*2);margin-inline:auto}
.herotop > .col{width:auto;margin:0}

.morph{flex:none;display:grid;justify-items:center;gap:4px}
.morph__stage{position:relative;width:clamp(230px,23vw,330px);aspect-ratio:1.18}
.morph__p,.morph__pw{position:absolute;top:50%;left:50%;width:50%;height:auto;
  transform-origin:center;
  transition:transform 1.05s cubic-bezier(.32,.72,.28,1),
             opacity .75s cubic-bezier(.32,.72,.28,1),
             filter .75s ease}
.morph__p--a{transform:translate(-103%,-50%) rotate(-8deg)}
.morph__p--b{transform:translate(3%,-50%) rotate(8deg)}
.morph__pw{width:70%;opacity:0;transform:translate(-50%,-50%) scale(.52);
  filter:blur(6px)}

/* 합쳐진 상태 */
.morph[data-m="1"] .morph__p--a{transform:translate(-50%,-50%) scale(.34) rotate(0deg);
  opacity:0;filter:blur(3px)}
.morph[data-m="1"] .morph__p--b{transform:translate(-50%,-50%) scale(.34) rotate(0deg);
  opacity:0;filter:blur(3px)}
.morph[data-m="1"] .morph__pw{opacity:1;transform:translate(-50%,-50%) scale(1);filter:none}

/* 두 문장이 같은 자리에서 교대한다.
   전에는 둘 다 position:absolute라 부모의 max-content 너비가 0이 됐고,
   그래서 태블릿 가로에서 글자가 화면 밖으로 새어 나갔다.
   같은 그리드 칸에 겹쳐 두면 박스가 '넓은 쪽 문장'만큼 실제로 자리를 차지한다. */
.morph__cap{display:grid;width:max-content;max-width:100%;
  margin:0;text-align:center;white-space:nowrap;
  font-size:16px;font-weight:650;letter-spacing:-.015em;color:var(--muted)}
.morph__cap span{grid-area:1/1;opacity:0;transform:translateY(6px);
  transition:opacity .6s var(--ease-ui), transform .6s var(--ease-ui)}
.morph[data-m="0"] [data-m="0"],
.morph[data-m="1"] [data-m="1"]{opacity:1;transform:none}
.morph[data-m="1"] [data-m="1"]{color:var(--blue)}

@media(max-width:1000px){
  .herotop{grid-template-columns:1fr;gap:clamp(28px,5vw,44px)}
  .morph{justify-items:flex-start}
  .morph__stage{width:clamp(210px,50vw,300px)}
  .morph__cap{text-align:left}
}
@media(prefers-reduced-motion:reduce){
  .morph__p,.morph__pw,.morph__cap span{transition:none !important}
  .morph__p{opacity:0}
  .morph__pw{opacity:1;transform:translate(-50%,-50%) scale(1);filter:none}
}

/* ==========================================================================
   화면이 똑바로 서는 연출 (data-tilt)
   =========================================================================
   전에는 목업이 스크롤에 따라 위아래로 떠다녔다. 제품 화면이 공중에 뜬 것처럼
   보여서 오히려 가벼워 보였다.

   지금은 기울어진 채로 들어와서 읽는 위치에 오면 똑바로 선다.
   화면을 집어서 눈앞에 세워 보여주는 동작에 가깝고, 다 서고 나면
   더는 움직이지 않는다 — 읽는 동안 흔들리는 것이 없어야 한다.
   ========================================================================== */
[data-tilt]{perspective:1600px;perspective-origin:50% 0%;overflow-x:clip}
[data-tilt] > img,
[data-tilt] > .tscene{
  transform-origin:50% 0%;
  will-change:transform;
  transition:box-shadow .8s cubic-bezier(.32,.72,.28,1)}
@media(prefers-reduced-motion:reduce){
  [data-tilt] > img,[data-tilt] > .tscene{transform:none !important}
}

/* 아이브로우 — 작고 흐려서 첫 문장이 안 읽혔다.
   이 한 줄이 "나를 위한 제품인가"를 3초 안에 판단하게 하는 자리다.
   알약으로 띄워 배경에서 분리하고 글자도 키운다. */
.sc__who{display:inline-flex;align-items:center;gap:10px;
  padding:10px 18px 10px 14px;border-radius:100px;
  background:var(--blue-050,#eef6ff);border:1px solid var(--blue-100,#d6ebff);
  font-size:clamp(15px,1.25vw,17px);font-weight:700;color:var(--blue-ink,#003a99);
  letter-spacing:-.015em;line-height:1.45}
.sc__who:before{width:7px;height:7px;background:var(--blue)}
.who__br{display:none}
@media(max-width:560px){
  .sc__who{align-items:flex-start;padding:11px 16px 11px 13px}
  .sc__who:before{margin-top:6px}
  .who__br{display:inline}
}

/* 되살린 주제 입력창 — 히어로 글과 제품 화면 사이 */
.trywrap{width:min(var(--wide), 100% - var(--gut)*2);
  margin:clamp(34px,4.4vw,60px) auto 0}
.trywrap .try,
.trywrap .try:hover,
.trywrap .try:focus-within,
.trywrap .try.is-open{width:100%;max-width:none;margin:0}
.trywrap .try__box{max-width:none;width:100%}

/* ==========================================================================
   테두리를 걷어낸다
   =========================================================================
   상자마다 1px 선을 두르면 요소 수만큼 선이 늘어나 화면이 잘게 쪼개져 보인다.
   구분은 선이 아니라 배경 톤과 그림자로 한다.
   다만 목록을 나누는 가로선은 남긴다 — 그건 테두리가 아니라 읽는 순서다.
   대신 더 옅게.
   ========================================================================== */

/* 제품 화면 — 그림자만으로 뜬다 */
.shot img,.shotwide img{border:0;
  box-shadow:0 44px 90px -50px rgba(16,24,40,.38), 0 3px 10px rgba(16,24,40,.05)}
.poster3 img{box-shadow:0 54px 110px -58px rgba(0,0,0,.62), 0 3px 12px rgba(0,0,0,.26)}

/* 신뢰 네 칸 — 선으로 나눈 격자에서 배경 톤으로 */
.four{background:transparent;border:0;border-radius:0;overflow:visible;
  gap:clamp(14px,1.6vw,22px)}
.four li{background:var(--off);border-radius:18px}
.sc--tint .four li{background:var(--paper)}

/* 각도 칩 — 알약 테두리 제거 */
.angles li{border:0;background:var(--off)}
.sc--tint .angles li{background:var(--paper)}

/* 비교 카드 */
.vs__side{border:0;box-shadow:0 30px 64px -46px rgba(16,24,40,.34)}
.vs__side--pw{box-shadow:0 30px 64px -44px rgba(16,24,40,.55)}
.vs__word{border:0;box-shadow:0 6px 16px -8px rgba(16,24,40,.22)}

/* 승인 장면 카드 */
.pcard{border:0;box-shadow:0 34px 68px -46px rgba(16,24,40,.34), 0 2px 6px rgba(16,24,40,.04)}
.pslot{border:0;background:rgba(16,24,40,.035)}
.play[data-step="3"] .pslot{border:0;background:var(--blue-050,#eef6ff)}

/* 입력창 · 아이브로우 · 더보기 */
.trywrap .try__box{border:0;
  box-shadow:0 2px 8px rgba(25,31,40,.06), 0 22px 52px rgba(25,31,40,.12)}
.trywrap .try__box:focus-within{border:0;
  box-shadow:0 2px 8px rgba(0,128,255,.12), 0 22px 56px rgba(0,128,255,.22)}
.sc__who{border:0}
.burger{border:0;background:var(--line-soft)}

/* 목록을 나누는 가로선은 남기되 더 옅게 — 이건 테두리가 아니라 읽는 순서다 */
.pile li,.vs__steps li + li,.pricetag__add li,.four li + li{border-color:rgba(16,24,40,.07)}
.vs__side--pw .vs__steps li + li{border-color:rgba(255,255,255,.10)}
.pricetag__note{border-top-color:rgba(16,24,40,.07)}
.vs__note{border-top-color:rgba(255,255,255,.10)}
.pcard__do{border-top-color:rgba(16,24,40,.07)}

/* 남은 둘도 같은 규칙으로 */
.pcard__sub{border:0;background:var(--line-soft);color:var(--sub)}
.tscene .thread{border:0;box-shadow:0 34px 76px -48px rgba(16,24,40,.42)}

/* 하위 페이지도 같은 규칙 — 상자 테두리 대신 그림자와 배경 톤 */
body.sub .card,
body.sub .build > div,
body.sub .combo__copy,
body.sub .combo__box,
body.sub .cmp__item,
body.sub .fcard3,
body.sub .poster,
body.sub .ftabs,
body.sub .plan{border:0}
body.sub .card,
body.sub .build > div,
body.sub .combo__box,
body.sub .plan{box-shadow:0 26px 56px -44px rgba(16,24,40,.30), 0 2px 6px rgba(16,24,40,.04)}
body.sub .build > .build__base{box-shadow:0 30px 64px -42px rgba(16,24,40,.55)}
body.sub .cmp__list{background:var(--off)}
body.sub .cmp__list > li + li{border-top-color:rgba(16,24,40,.07)}
body.sub .fsync__media{border:0;
  box-shadow:0 44px 90px -50px rgba(16,24,40,.38), 0 3px 10px rgba(16,24,40,.05)}
body.sub .fsync__item{border-top-color:rgba(16,24,40,.07)}
body.sub .fsync__item:last-child{border-bottom-color:rgba(16,24,40,.07)}
body.sub .faq details{border:0}
body.sub .trialbox{border:0}

/* ==========================================================================
   장면 점 네비 (.rail)
   =========================================================================
   장면이 11개인 페이지에서 지금 어디쯤인지 알 방법이 없었다.
   왼쪽에 점을 세워 현재 장면을 표시하고, 눌러서 건너뛸 수 있게 한다.
   평소에는 점만 보이고 손이 닿으면 이름이 나온다 — 읽는 것을 방해하지 않는다.
   ========================================================================== */
.rail{position:fixed;left:max(14px, calc((100vw - var(--wide)) / 2 - 34px));
  top:50%;transform:translateY(-50%);z-index:60;pointer-events:none}
.rail ol{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.rail button{pointer-events:auto;display:flex;align-items:center;gap:10px;
  border:0;background:none;padding:2px 0;cursor:pointer;font:inherit}
.rail i{display:block;width:7px;height:7px;border-radius:50%;flex:none;
  background:rgba(16,24,40,.20);
  transition:background .4s var(--ease-ui),transform .4s var(--ease-ui)}
.rail span{font-size:12.5px;font-weight:700;letter-spacing:-.015em;color:var(--muted);
  white-space:nowrap;opacity:0;transform:translateX(-4px);
  transition:opacity .3s var(--ease-ui),transform .3s var(--ease-ui)}
.rail button:hover i,.rail button:focus-visible i{background:rgba(16,24,40,.42)}
.rail button:hover span,.rail button:focus-visible span{opacity:1;transform:none}
.rail li.is-here i{background:var(--blue);transform:scale(1.5)}
.rail li.is-here span{opacity:1;transform:none;color:var(--ink)}
/* 어두운 장면 위에서는 점도 밝게 */
.rail.on-dark i{background:rgba(255,255,255,.28)}
.rail.on-dark span{color:rgba(255,255,255,.62)}
.rail.on-dark li.is-here i{background:#fff}
.rail.on-dark li.is-here span{color:#fff}
.rail.on-dark button:hover i{background:rgba(255,255,255,.6)}
@media(max-width:1240px){ .rail{display:none} }

/* ==========================================================================
   전환 장면을 브랜드 색으로 채운다
   =========================================================================
   흰색과 아주 옅은 중성색만 쓰다 보니 브랜드 색이 버튼에만 남았다.
   제품의 주장이 가장 선명한 이 한 장면은 색이 화면을 다 가져간다.
   페이지 전체에서 여기 한 번뿐이라 그만큼 세게 읽힌다.
   ========================================================================== */
.sc--turn{background:var(--blue);text-align:center}
.sc--turn .sc__say{margin-inline:auto;color:rgba(255,255,255,.82)}
.sc--turn .sc__step{color:rgba(255,255,255,.58)}

/* 파란 바탕에서는 색을 하나 더 얹는 대신 밝기로 강조한다.
   문장 전체는 물러나 있고 핵심 한 단어만 완전한 흰색이다.
   (전에는 em이 남색 #0b2f66이라 파란 배경에서 거의 읽히지 않았다.) */
.sc--turn .sc__big{color:rgba(255,255,255,.55)}
.sc--turn .sc__big em{color:#fff}

/* 네 단계 — 상자도 테두리도 없이, 점 네 개를 잇는 선 하나로만 순서를 말한다. */
.chain{--cgap:clamp(16px,2.2vw,32px);
  list-style:none;position:relative;display:grid;grid-template-columns:repeat(4,1fr);
  gap:var(--cgap);padding:0;
  width:min(1160px, 100% - var(--gut)*2);
  margin:clamp(52px,6.4vw,84px) auto 0}
.chain__i{display:flex;flex-direction:column;align-items:center;gap:5px;position:relative}
/* 연결선은 자기 점에서 다음 점까지만 긋는다. 열 너비를 몰라도 되므로
   칸이 몇 개든, gap이 얼마든 끝이 점을 넘어가지 않는다. */
.chain__i::after{content:"";position:absolute;top:8px;height:2px;
  left:calc(50% + 14px);width:calc(100% + var(--cgap) - 28px);
  background:rgba(255,255,255,.34)}
.chain__i:last-child::after{display:none}
.chain__i::before{content:"";width:18px;height:18px;border-radius:50%;background:#fff;
  position:relative;z-index:1;box-shadow:0 0 0 7px rgba(255,255,255,.15)}
.chain__n{margin-top:clamp(16px,1.8vw,24px);font-size:12.5px;font-weight:800;
  letter-spacing:.16em;color:rgba(255,255,255,.55);font-variant-numeric:tabular-nums}
.chain__t{font-size:clamp(22px,2.3vw,30px);font-weight:800;letter-spacing:-.035em;color:#fff}
.chain__d{margin-top:3px;font-size:clamp(13.5px,1.05vw,15.5px);line-height:1.62;
  letter-spacing:-.01em;color:rgba(255,255,255,.74);max-width:16em}

@media(max-width:900px){
  .chain{grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,38px) 18px}
  .chain__i::after{display:none}        /* 두 줄이 되면 가로선은 순서를 잘못 말한다 */
  .chain__i::before{width:14px;height:14px;box-shadow:0 0 0 5px rgba(255,255,255,.15)}
}
@media(max-width:520px){ .chain{grid-template-columns:1fr;gap:26px} }

/* ==========================================================================
   요금 계산기

   테두리를 쓰지 않는다는 규칙은 여기서도 지킨다. 왼쪽 '고르는 곳'은 옅은 면,
   오른쪽 '나오는 금액'은 흰 면 + 그림자로 한 단 띄워서 구분한다.
   값이 바뀌는 자리(합계)만 숫자를 크게 두고 나머지는 전부 물러나 있다.
   ========================================================================== */
.calc{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  gap:clamp(16px,1.8vw,26px);align-items:start;margin-top:clamp(20px,2.4vw,32px)}

.calc__side{background:var(--off);border-radius:22px;
  padding:clamp(22px,2.4vw,32px) clamp(20px,2.4vw,32px)}

.calc__row{display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:16px 0}
.calc__row + .calc__row{box-shadow:0 -1px 0 rgba(17,24,39,.07)}  /* 칸 사이 구분만, 상자는 아니다 */
.calc__lab{min-width:0}
.calc__lab b{display:block;font-size:16.5px;font-weight:750;letter-spacing:-.02em;color:var(--ink)}
.calc__lab span{display:block;margin-top:3px;font-size:13.5px;line-height:1.5;color:var(--muted)}

.knob{flex:none;display:inline-flex;align-items:center;gap:2px;
  background:var(--paper);border-radius:999px;padding:4px;
  box-shadow:0 1px 3px rgba(17,24,39,.09), 0 0 0 1px rgba(17,24,39,.05)}
.knob__b{width:34px;height:34px;border:0;border-radius:999px;background:transparent;
  font-size:19px;line-height:1;font-weight:700;color:var(--sub);cursor:pointer;
  transition:background .16s ease, color .16s ease}
.knob__b:hover:not(:disabled){background:var(--off);color:var(--ink)}
.knob__b:disabled{opacity:.28;cursor:default}
.knob__n{min-width:2.2ch;text-align:center;font-size:17px;font-weight:800;
  letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums}

.calc__opt{display:flex;gap:11px;align-items:flex-start;margin-top:18px;cursor:pointer}
.calc__opt input{margin-top:3px;width:18px;height:18px;accent-color:var(--blue);flex:none;cursor:pointer}
.calc__opt span{font-size:13.5px;line-height:1.55;color:var(--muted)}
.calc__opt b{display:block;font-size:15.5px;font-weight:700;letter-spacing:-.018em;color:var(--ink)}

/* 고른 쪽과 안 고른 쪽이 한눈에 갈려야 한다. 바탕이 이미 옅은 회색(--off)이라
   트랙을 5%로 깔면 흰 알약과 구분이 안 됐다. 트랙은 더 진하게, 고른 쪽은 흰 면. */
.seg{display:flex;gap:4px;margin-top:20px;background:rgba(17,24,39,.13);
  border-radius:999px;padding:4px}
.seg__b{flex:1;min-width:0;border:0;background:transparent;border-radius:999px;
  padding:10px 12px;font:inherit;font-size:14.5px;font-weight:700;letter-spacing:-.018em;
  color:var(--muted);cursor:pointer;transition:background .18s ease,color .18s ease,box-shadow .18s ease}
.seg__b i{font-style:normal;font-size:12px;font-weight:700;color:var(--blue);margin-left:5px}
.seg__b.is-on{background:var(--paper);color:var(--ink);
  box-shadow:0 1px 2px rgba(17,24,39,.14), 0 4px 10px -4px rgba(17,24,39,.22)}
.seg__b.is-on i{color:var(--blue)}

.calc__bill{background:var(--paper);border-radius:22px;
  padding:clamp(22px,2.4vw,32px) clamp(20px,2.4vw,30px);
  box-shadow:0 18px 44px -28px rgba(17,24,39,.34), 0 0 0 1px rgba(17,24,39,.05)}
.bill{list-style:none;margin:0;padding:0}
.bill li{display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  padding:9px 0;font-size:14.5px;letter-spacing:-.012em}
.bill li span{color:var(--sub)}
.bill li i{font-style:normal;color:var(--faint);font-variant-numeric:tabular-nums}
.bill li b{flex:none;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}

.bill__sum{display:flex;align-items:baseline;gap:7px;margin:14px 0 0;padding-top:16px;
  box-shadow:0 -1px 0 rgba(17,24,39,.09)}
.bill__sum span{font-size:16px;font-weight:700;color:var(--muted)}
.bill__sum b{font-size:clamp(34px,3.6vw,44px);font-weight:800;letter-spacing:-.04em;
  color:var(--ink);font-variant-numeric:tabular-nums;line-height:1.05}
.bill__once{margin:8px 0 0;font-size:13.5px;color:var(--muted)}
.bill__once b{color:var(--ink);font-weight:700}
.bill__quota{margin:12px 0 18px;font-size:13px;line-height:1.6;color:var(--faint);
  letter-spacing:-.01em}
.calc__bill .btn{width:100%;justify-content:center}

.calc__foot{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,1.8vw,26px);
  margin-top:clamp(16px,1.8vw,26px)}

@media(max-width:900px){
  .calc{grid-template-columns:1fr}
  .calc__foot{grid-template-columns:1fr}
}
@media(max-width:520px){
  .calc__row{flex-direction:row;align-items:center;gap:12px}
  .calc__lab span{font-size:12.5px}
  .knob__b{width:38px;height:38px}     /* 손가락으로 누르는 자리는 줄이지 않는다 */
  .bill__sum b{font-size:34px}
}

/* ==========================================================================
   마지막 손질 — 실제 기기 폭에서 재보고 고친 것들
   ========================================================================== */

/* 360px에서 헤더 한 줄이 안 들어갔다.
   로고 131 + 간격 28 + 오른쪽 188 = 347 인데 쓸 수 있는 폭이 324였고,
   '무료로 시작하기'와 햄버거가 화면 밖으로 밀려 있었다.
   features 페이지에는 아래 고정 CTA 바가 없어서 헤더 버튼을 지울 수는 없다.
   대신 간격과 버튼을 좁혀서 들어가게 한다. */
@media(max-width:430px){
  .nav{gap:10px}
  .nav .right{gap:6px}
  .nav .start{height:40px;padding:0 14px;font-size:14px;border-radius:10px}
  .logo{font-size:19px;gap:7px}
}

/* 손으로 누르는 자리는 글자 높이가 아니라 손가락 크기로 잡는다.
   본문 안에 섞인 링크는 그대로 두고, 혼자 서 있는 '더 보기' 계열만 넓힌다.
   보이는 크기는 그대로고 눌리는 범위만 커진다. */
.sc__quiet,
.ppeek__more,
.panel__more,
.pv__back,
.nav .login{display:inline-flex;align-items:center;min-height:38px}

/* ==========================================================================
   접근성 · 손가락 — 실제로 재고 눌러보고 고친 것들
   ========================================================================== */

/* 본문으로 건너뛰기.
   7개 페이지 전부에 없었다. 키보드만 쓰는 사람은 페이지를 열 때마다
   로고·메뉴 5개·로그인·시작하기를 지나야 본문 첫 글자에 닿았다.
   평소에는 보이지 않다가 Tab 을 처음 누르면 나타난다. */
.skiplink{
  position:fixed;top:10px;left:10px;z-index:200;
  transform:translateY(-160%);
  display:inline-flex;align-items:center;min-height:48px;padding:0 20px;
  border-radius:12px;background:var(--ink,#191f28);color:#fff;
  font-size:15px;font-weight:700;letter-spacing:-.02em;text-decoration:none;
  box-shadow:0 12px 32px -12px rgba(25,31,40,.55);
  transition:transform .18s cubic-bezier(.22,.7,.32,1);
}
.skiplink:focus-visible,
.skiplink:focus{transform:translateY(0);outline:3px solid var(--blue,#0080ff);outline-offset:3px}

/* 손으로 누르는 자리는 글자 높이가 아니라 손가락으로 잡는다.
   실측: .login 38 / .sc__quiet 38 / .ppeek__more 38 / .knob__b 34 —
   전부 44px 미만이었다. 보이는 크기는 그대로 두고 눌리는 범위만 넓힌다. */
.nav .login,
.sc__quiet,
.ppeek__more,
.pv__back,
.panel__more{display:inline-flex;align-items:center;min-height:44px}

/* 계산기 스테퍼는 진짜 버튼이다. 34px 은 엄지로 겨냥하기에 작다. */
.knob__b{width:44px;height:44px}
.knob{padding:3px}
.knob__n{min-width:2.4ch}

/* 푸터 링크도 폰에서는 줄 간격을 벌려 서로 잘못 눌리지 않게 */
@media(max-width:760px){
  footer .lg a,
  footer nav a,
  .foot-bot a{display:inline-flex;align-items:center;min-height:44px}
}

/* ==========================================================================
   명도 대비 — 실제로 계산해서 고친 것들
   =========================================================================
   회색 글자를 세 단(--sub / --muted / --faint)으로 쓰고 있었는데,
   흰 배경에서만 재고 정한 값이라 실제 화면에서 대부분 기준에 못 미쳤다.

   실측 (WCAG AA 본문 기준 4.5:1)
     --faint #b0b8c1  흰 배경 2.01:1   회색 면 1.89:1   ← 본문으로 쓰면 안 되는 값
     --muted #6b7684  흰 배경 4.66:1   #f7f8fa 4.34:1   #f2f4f6 4.19:1
   즉 --muted 는 흰 배경에서만 통과하고, 이 사이트가 실제로 쓰는 옅은 회색 면
   위에서는 전부 탈락한다. 그런 글자가 7개 페이지에 151개 있었다.

   색을 한 단씩 내리고, 옅은 면 위에서 쓸 색을 따로 둔다.
   --faint 는 아이콘·구분선 같은 비텍스트에만 남긴다.
   ========================================================================== */
:root{
  --muted:#5b6573;        /* 흰 5.9:1 · #f7f8fa 5.5:1 · #f2f4f6 5.3:1 — 면을 가리지 않는다 */
  --ink-quiet:#5b6573;    /* 전에 --faint 로 칠했던 '물러난 본문'의 새 자리 */
  --blue-text:#0064cc;    /* 작은 글자용 파랑. #0080ff 는 3.80:1 이라 14px 이하에 못 쓴다 */
}

/* --faint 로 칠해 2.01:1 이던 문장들. 하필 돈과 조건을 말하는 자리였다 —
   "카드 등록 없이 · 3일 무료 운영", "01 준비"~"04 응답",
   "연간 결제는 2개월치를 받지 않습니다", 계산기의 포함량 줄. */
.sc__fine,.sc__step,.pricetag__note,.plat3__say,
.pslot__when,.pslot__what,.tpost__time,.bill__quota{color:var(--ink-quiet)}

/* 옅은 회색 면 위의 본문 */
.sc--tint .sc__say,.faq p,.calc__lab span,.trialbox span,
.seg__b:not(.is-on){color:#4e5968}

/* 경쟁 비교표 왼쪽 두 칸이 1.89:1 이었다. 경쟁 대비 핵심 문장 8줄이다.
   '약하게' 보이려면 색이 아니라 아이콘 채도로 물러나게 한다. */
.cmp__list>li.no,.cmp__list>li.neu{color:#4e5968}

/* 작은 파란 글자 — 전부 3.80:1 이하였다 */
.seg__b i,.ppeek__more,.panel__more,.fsync__eyebrow{color:var(--blue-text)}

/* 파란 화면 위.
   여기 글자를 흰색 알파로 물러나게 했더니 헤드라인이 2.10:1 이 됐다.
   페이지에서 가장 세게 주장하는 장면의 제목이 안 읽히면 장면이 없는 것과 같다.
   배경을 한 단 진하게 깔고, 알파 대신 굵기와 크기로 위계를 만든다. */
.sc--turn{background:#0066cc}                       /* 흰 글자 5.4:1 */
.sc--turn .sc__big{color:rgba(255,255,255,.90)}     /* 4.8:1 */
.sc--turn .sc__big em{color:#fff}                   /* 5.4:1 — 강조는 완전한 흰색 */
.sc--turn .sc__say{color:rgba(255,255,255,.94)}
.sc--turn .sc__step{color:rgba(255,255,255,.88)}
.sc--turn .chain__n{color:rgba(255,255,255,.88)}
.sc--turn .chain__d{color:rgba(255,255,255,.94)}
.sc--turn .chain__i::after{background:rgba(255,255,255,.42)}

/* 기능 페이지 — 비활성 항목 제목이 1.46:1 인데 키보드 정지점이다.
   무엇에 포커스했는지 읽을 수가 없었다. 색이 아니라 투명도로 물러나게 한다. */
.fsync__item h3{color:var(--ink)}
.fsync__item:not(.is-on){opacity:.58}
.fsync__item.is-on{opacity:1}

/* 인라인 style 로 박아 둔 '위험' 태그가 3.26:1 이었다.
   인라인이라 어떤 검사에도 안 걸린다 — 클래스로 옮겨야 다음에 또 안 놓친다. */
.cmp__head .tag{background:#feecec !important;color:#a4161a !important}   /* 6.4:1 */

/* 위 블록이 밀린 자리들 — 더 구체적인 선택자가 이미 --faint/--blue 를 박고 있었다.
   같은 특이도로 맞춘다. */
.tscene .tpost__time{color:var(--ink-quiet)}          /* 2.01 → 5.9:1 */
.combo__box .ppeek__more{color:var(--blue-text)}      /* 3.80 → 5.2:1 */

/* 기능 페이지의 선택된 탭 — 흰 글자 on #0080ff = 3.80:1, 14px/700 이라 미달.
   같은 파랑 계열에서 한 단 진하게 내린다. */
.ftab.is-on{background:#0064cc;box-shadow:0 6px 16px rgba(0,100,204,.34)}

/* 승인 장면의 자막. 파란 글자 19px/650 은 large 가 아니라 4.5:1 이 필요하다. */
.play__cap span{color:var(--blue-text)}

/* 스레드 데모 칩 — 초록 #0a8f43 on #e8faf0 = 3.86:1 */
.tpost__chip.ok{color:#076b32}    /* #e8faf0 위 3.86 → 5.3:1 */
.tpost__chip.wt{color:#6b5300}    /* #fff8e0 위 3.90 → 6.2:1 */

/* 대화 장면의 단계 번호 — 흰 글자 on #0080ff, 12px/800 → 3.80:1.
   23px 짜리 작은 원이라 배경을 한 단 진하게 내리는 게 유일한 방법이다. */
.tsteps span{background:#0064cc}

/* 기능 페이지 바로가기 — <button role="tab"> 에서 <a href> 로 바꿨다.
   패널을 전환하는 게 아니라 같은 페이지 안에서 이동하는 것이므로 탭이 아니다.
   (전에는 role="tablist" 인데 tabpanel 도 aria-controls 도 화살표 키도 없어서
   보조기기가 "탭 1/6 선택됨"이라고 잘못 안내했다.) */
.ftab{text-decoration:none;display:inline-flex;align-items:center;min-height:44px}
.ftab:hover{text-decoration:none}
/* 좁은 폭에서 45%가 잘려 있었다. 스크롤 가능하다는 신호를 남긴다. */
@media(max-width:760px){
  .ftabs{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 26px),transparent);
         mask-image:linear-gradient(90deg,#000 calc(100% - 26px),transparent)}
}

/* ==========================================================================
   레이아웃·상호작용 — 감사에서 실측으로 잡힌 것들
   ========================================================================== */

/* 폰에서 같은 CTA가 한 화면에 세 개 떠 있었다 —
   헤더 '무료로 시작하기' + 히어로 '3일 무료로 시작하기' + 하단 고정바.
   헤더와 하단바는 같은 문구·같은 링크다. 하단바가 엄지에 가까우니 그쪽을 남긴다.
   390x844 기준으로 세로 40px 를 되찾는다. */
@media(max-width:760px){
  body:has(.mbar) .nav .start{display:none}
}

/* FAQ — 답을 하나 열면 같은 행의 '안 연 질문'까지 244px 로 부풀었다.
   grid item 의 기본 align-items:stretch 때문이다. 닫힌 상자가 빈 회색
   덩어리로 커지는 걸 방문자가 한 번 이상하게 여긴다. */
.sc--faq .faq{align-items:start}

/* 요금 장면 — 가격과 CTA 사이가 386px 벌어져 있었다.
   2열 그리드에서 오른쪽 항목이 키를 잡는데 왼쪽은 그 구간이 비어 있다.
   눈이 59,000원에서 버튼까지 386px 를 건너뛰어야 했다. */
.pricetag{align-items:start}
.pricetag .btn{grid-row:3;justify-self:start}
.pricetag .sc__quiet{justify-self:start}

/* 04 응답 — 왼쪽 col 308px, 오른쪽 목업 1027px 라 719px 가 비어 있었다.
   화면 절반이 스크롤 내내 빈 채로 남는다. */
.sc--act:has(.tscenewrap) .duo{align-items:center}

/* 04 응답 안쪽 캡션 — h2 였던 것을 문단으로 강등했으므로 스타일을 옮긴다 */
.tscene__copy .tscene__t{margin:0 0 10px;font-size:17px;font-weight:750;
  letter-spacing:-.02em;color:var(--ink);line-height:1.45}

/* 움직임 줄이기를 켜면 '02 승인' 자막 자리에 03 발행의 문장이 떴다.
   정지 상태에서 보여야 할 것은 그 장면의 첫 문장이다. */
@media(prefers-reduced-motion:reduce){
  .play__cap [data-cap="3"]{display:none;opacity:0}
  .play__cap [data-cap="0"]{display:block;opacity:1}
}

/* 히어로 입력창 — 사이트의 유일한 텍스트 입력인데 outline:0 이 전역
   포커스 링을 지우고 있었다. 커서가 어디 있는지 알 수 없었다. */
.try__box:focus-within{box-shadow:0 0 0 3px rgba(0,100,204,.55),
  0 2px 8px rgba(0,128,255,.12), 0 22px 56px rgba(0,128,255,.22)}

/* 장면 점 네비가 1280~1440 에서 H1 글자 위에 올라타고 클릭까지 가로챘다.
   점만 누르게 하고 라벨은 히트 영역에서 뺀다. */
/* 장면 점 네비를 걷어낸다.
   실측 — 라벨이 본문 첫 글자 위로 파고든 양:
     1280:26px  1366:23px  1440:21px  1600:17px  1728:17px  1920:21px
   모든 폭에서 겹친다. 예외가 없다.

   이유는 구조에 있다. 본문은 width:min(--wide, 100% - gut*2) 라서
   화면이 1720px 보다 좁으면 항상 '화면 폭 - 여백 두 번'을 다 쓴다.
   즉 왼쪽에 남는 공간은 언제나 gut(약 46px) 하나뿐인데,
   레일은 점 7px + 간격 10px + 라벨 40px 이상을 요구한다. 들어갈 자리가 없다.

   왼쪽 12px 로 밀거나 라벨의 pointer-events 만 끄는 것으로는 안 된다 —
   겹쳐 보이는 것 자체가 문제이기 때문이다.
   이 네비는 '지금 어디쯤인지'를 알려주는 보조 장치이고, 없어도 페이지는
   그대로 읽힌다. 본문 위에 글자가 올라타는 것보다 없는 편이 낫다.
   (키보드 Tab 순서에서 11개 버튼이 히어로 CTA 앞을 막던 문제도 같이 사라진다.) */
#sceneRail{display:none !important}

/* ==========================================================================
   기능 페이지 왼쪽 목록이 화면 높이에 따라 잘리던 것
   =========================================================================
   .fsync__stick 이 height:calc(100vh - 헤더) 로 못 박혀 있는데, 안에 든 내용은
   그보다 크다. sticky 라서 스크롤해도 잘린 부분에 닿을 수 없다.

   실측 (마지막 항목 "얼마나 썼는지 숨기지 않습니다" 가 화면 밖으로 나간 양)
     1440x900  0px      1440x800   0px
     1366x768  15px     1280x720  47px
     1024x640  82px     1440x700  88px
   노트북(1366x768, 1280x720)이 정확히 이 구간이다.

   두 단으로 대응한다.
   ① 높이가 어중간할 때는 제목·여백을 줄여 6개가 다 들어가게 한다.
   ② 그래도 모자랄 만큼 낮으면 sticky 연출 자체를 포기하고 평면 목록으로 둔다.
      연출보다 "6번째 항목을 읽을 수 있는 것"이 먼저다.
   ========================================================================== */

/* 높이를 고정하지 않는다. 최소 높이만 주고 내용이 크면 늘어나게 한다. */
@media (min-width:981px){
  .fsync__stick{height:auto;min-height:calc(100dvh - var(--header-height,64px))}
}

/* ① 낮은 화면에서는 세로로 쓰는 값을 줄인다 */
@media (min-width:981px) and (max-height:820px){
  .fsync__head{font-size:clamp(22px,2.4vw,30px);margin-bottom:18px}
  .fsync__eyebrow{margin-bottom:8px;font-size:13px}
  .fsync__item{padding:12px 0}
  .fsync__grid{gap:clamp(28px,3.4vw,56px)}
}
@media (min-width:981px) and (max-height:740px){
  .fsync__head{font-size:clamp(20px,2.1vw,26px);margin-bottom:14px}
  .fsync__item{padding:9px 0}
  .fsync__item .fsync__more p{font-size:13.5px;line-height:1.55}
}

/* ② 더 낮으면 스크롤 연출을 포기한다 — 잘린 항목을 남기는 것보다 낫다 */
@media (min-width:981px) and (max-height:660px){
  .fsync__track{height:auto}
  .fsync__stick{position:static;height:auto;min-height:0;padding-block:48px}
  .fsync__item .fsync__more{grid-template-rows:1fr}   /* 전부 펼쳐 둔다 */
}

/* 푸터를 한 벌로 통일했다.
   기능·약관·개인정보 3개 페이지만 링크 2개짜리 최소 푸터였다.
   기능 페이지를 끝까지 읽은 사람 — 가장 관심이 높은 사람 — 이 바닥에서
   요금이나 문의로 갈 길이 없었다. 이탈이 가장 큰 지점에서 내비게이션이 사라졌다.

   칼럼 제목은 h4 에서 문단으로 바꿨다. 본문이 h2 로 끝나는데 푸터가 h4 로
   시작해서 제목 단계가 h2→h4 로 건너뛰고 있었다(logos 는 h1→h4).
   스크린리더로 제목만 훑는 사람에게 구조가 끊긴다. */
.foot .foot__head{margin:0 0 14px;font-size:13px;font-weight:700;
  letter-spacing:.02em;color:var(--ink)}

/* 04 응답 — 안쪽 카드가 왼쪽 열과 같은 말을 반복하고 있었다.
   왼쪽: "인스타그램 댓글이 정해 둔 조건에 맞으면 미리 적어둔 문구로 답하고…"
   안쪽: "인스타그램 댓글에 미리 정해 둔 문구로 답글이 나갑니다…"
   그 탓에 왼쪽 열은 308px, 오른쪽은 1027px 가 되어 719px 가 빈 채로 남았다.
   화면 절반이 스크롤 내내 비어 있고, 시선은 진짜 제목이 아니라
   목업 안의 제목으로 갔다.
   고유한 사실만 왼쪽으로 옮기고 중복은 걷어냈다. */
.factrow{display:flex;flex-wrap:wrap;gap:0 clamp(24px,3vw,44px);
  margin:clamp(26px,3vw,36px) 0 0;padding-top:clamp(18px,2vw,24px);
  box-shadow:0 -1px 0 rgba(16,24,40,.10)}
.factrow > div{min-width:0}
.factrow dt{font-size:clamp(16px,1.5vw,19px);font-weight:750;letter-spacing:-.025em;
  color:var(--ink);margin:0}
.factrow dd{margin:4px 0 0;font-size:13.5px;line-height:1.5;color:var(--ink-quiet)}
@media(max-width:560px){ .factrow{gap:16px 26px} }

/* 안쪽 카드는 이제 대화 목업 하나다 — 2열 그리드를 풀어 폭을 다 쓰게 한다 */
.tscene__inner{grid-template-columns:1fr;gap:0;padding:clamp(28px,3.4vw,44px)}

/* 02 승인 — 2,563px(페이지 높이의 17%)을 쓰는데 실제 내용은 306px 였다.
   그 동안 일어나는 변화는 배지 교체·버튼 색·자막 네 줄·예약 슬롯 하나가 전부다.
   휠을 네다섯 번 굴려야 다음 장면으로 넘어가고, 폰에서는 스와이프가
   "먹힌다"고 느껴진다. 트랙을 175vh 로 줄이고, 단계 전환이 트랙 전체에
   고르게 퍼지도록 이징 창을 넓혔다(0.74 → 0.86).

   폰에서는 스크롤 연출 자체를 뺀다. 내용이 한 화면에 들어가는데
   화면을 붙잡아 둘 이유가 없다. */
@media(max-width:760px){
  .play{height:auto}
  .play__stick{position:static;height:auto;padding-block:var(--air)}
  .play__cap span{position:static;opacity:1;transform:none}
  .play__cap{height:auto;display:grid;gap:6px}
}

/* ==========================================================================
   시각 체계 정리 — 타이포 5단 · 반경 4종 · 여백 체계
   =========================================================================
   실측한 현재 상태
     글자 크기  22종   (15 / 12.5 / 14.5 / 13.5 / 13 / 16 / 18.5 / 19 / 14 / 17 …)
     모서리     11종   (20 / 100 / 18 / 16 / 8 / 9 / 11 / 12 …)
   0.5px 차이 나는 값이 열두 개 넘게 공존해서, 화면을 옮길 때마다 글자 크기가
   미묘하게 달라 보인다. 단계를 줄이면 같은 역할이 같은 크기로 읽힌다.
   ========================================================================== */
:root{
  /* 다섯 단계. 이 밖의 값은 쓰지 않는다. */
  --t-display: clamp(40px, 5.2vw, 68px);   /* 장면 제목 */
  --t-h1:      clamp(34px, 4.0vw, 52px);   /* 페이지 제목 */
  --t-h2:      clamp(26px, 2.8vw, 40px);   /* 구역 제목 */
  --t-body:    17px;                        /* 본문 */
  --t-caption: 14px;                        /* 보조 */

  --lh-display:1.14; --lh-h1:1.18; --lh-h2:1.25; --lh-body:1.72; --lh-caption:1.55;
  --ls-display:-.04em; --ls-h1:-.032em; --ls-h2:-.03em; --ls-body:-.01em;

  /* 네 종류. 알약은 999px 하나로 통일한다(50% / 99px / 100px 이 섞여 있었다). */
  --r1:10px;   /* 칩·작은 버튼 */
  --r2:16px;   /* 카드·입력창 */
  --r3:24px;   /* 큰 화면 블록 */
  --pill:999px;

  /* 여백 — 장면 사이와 장면 안을 따로 둔다 */
  --gap-sec: clamp(96px, 11vw, 168px);
  --gap-head: 24px;      /* 제목 → 설명 */
  --gap-visual: 64px;    /* 설명 → 그림 */
}
@media(max-width:760px){
  :root{ --gap-sec: clamp(72px, 14vw, 104px); --gap-head:20px; --gap-visual:40px; }
}

/* 다섯 단계를 실제 요소에 물린다 */
.sc__big{font-size:var(--t-display);line-height:var(--lh-display);letter-spacing:var(--ls-display)}
.sc--hero .sc__big{font-size:clamp(44px,6.0vw,76px)}
.sc__say{font-size:var(--t-body);line-height:var(--lh-body);letter-spacing:var(--ls-body)}
.sc__fine,.sc__step,.chain__d,.pricetag__note,.factrow dd{
  font-size:var(--t-caption);line-height:var(--lh-caption)}
body.sub .hero h1{font-size:var(--t-h1);line-height:var(--lh-h1);letter-spacing:var(--ls-h1)}
body.sub .head h2,.sc--faq .sc__big,.fsync__head{font-size:var(--t-h2);line-height:var(--lh-h2);letter-spacing:var(--ls-h2)}
.lede,.faq p,.legal p,.legal li{font-size:var(--t-body);line-height:var(--lh-body)}

/* 반경 네 종류로 수렴 */
.card,.faq details,.four>li,.try__box,.vs__side,.pcard,.combo__box,
.calc__side,.calc__bill,.cmp__list,.fcard3,.plan,.build>div{border-radius:var(--r2)}
.shot img,.shotwide img,.tscene,.poster img,.fsync__media,.scta{border-radius:var(--r3)}
.pill,.eyebrow,.angles>li,.btn,.tabs,.tabs button,.seg,.seg__b,
.knob,.knob__b,.ftab,.vs__word,.chain__i::before{border-radius:var(--pill)}
.btn{border-radius:var(--r1)}

/* 삼중 강조를 끊는다.
   크기가 크면 색은 평범하게, 색이 강하면 크기는 평범하게 — 둘 중 하나만.
   지금은 본문 안에서 <b> 굵기 + 파란 색 + 큰 크기가 한꺼번에 걸린 곳이 있었다. */
.sc__say b,.faq p b,.lede b{font-weight:650;color:inherit}
.vs__note b{font-weight:700;color:inherit}

/* 위 블록이 놓친 자리들 — 전수로 찾아서 눈금에 붙인다.
   0.5px 단위로 흩어진 값(13.5 / 14.5 / 16.5 / 18.5)이 가장 많았다.
   사람이 구분하지 못하는 차이를 열두 종류 유지할 이유가 없다. */

/* caption 14px 로 */
.chain__n,.vs__tag,.thread__label,.tpost__time,.tpost__chip,
.pcard__who,.pslot__what,.pslot__when,.tpost__name,.pcard__body,
.plat3 span,.angles b,.four span,.bill__quota,.combo__note,
.foot a,.foot p,.foot-bot{font-size:var(--t-caption)}

/* body 17px 로 */
.plat3__say,.vs__steps li,.vs__note,.vs__loop,.sc__quiet,
.nav .login,.nav .start,.factrow dd,.pricetag__what,
.faq summary,.legal dd,.legal dt{font-size:var(--t-body)}

/* h2 로 올릴 것 — '숫자가 그래픽이 되게' */
.chain__t{font-size:clamp(22px,2.2vw,30px);line-height:1.25;letter-spacing:var(--ls-h2)}
.pcard__title{font-size:20px;line-height:1.4;letter-spacing:-.025em}

/* 반경 마무리 */
.pcard__go,.start,.skiplink{border-radius:var(--r1)}
.pslot,.thread{border-radius:var(--r2)}
.thread__label,.sc__who,.tpost__chip,.sc__beta{border-radius:var(--pill)}

/* 더 구체적인 선택자에 밀린 나머지 — 같은 특이도로 맞춘다.
   (.tscene .tpost__time 처럼 2-클래스 선택자가 이미 값을 박고 있었다) */
.tscene .tpost__time,.tscene .tpost__chip,.tscene .tpost__name,
.tscene .tpost__text,.tscene .tpost__av,.tscene .thread__foot,
.tscene .tsteps b,.tscene .tsteps i{font-size:var(--t-caption)}
.tscene .tpost__text{font-size:var(--t-body)}
.foot .foot__head{font-size:var(--t-caption)}
.vs .vs__word{font-size:var(--t-caption)}
.factrow dt,.pricetag__what,.nav .start,.nav .login,
.skiplink,.sc__do .sc__quiet{font-size:var(--t-body)}
.nav .start{border-radius:var(--r1)}
.tscene .thread{border-radius:var(--r2)}

/* 여백 체계를 실제 장면에 물린다 —
   "빈 공간도 디자인 요소"라는 지적대로, 장면 사이를 늘리고
   장면 안의 제목→설명→그림 간격을 고정한다. */
.sc{padding-block:var(--gap-sec)}
.sc__big + .sc__say{margin-top:var(--gap-head)}
.sc__say + .sc__do,.sc__say + .angles,.sc__say + .factrow,
.sc__say + .chain,.col + .shot,.col + .shotwide{margin-top:var(--gap-visual)}

/* 기울임(tilt)을 걷어낸다.
   3D 투영으로 목업을 12% 넓히고 양옆을 잘라내면서까지 얻는 게 "떠 있는 느낌"
   하나뿐이었다. 제품 화면은 제품 화면으로 보여야 신뢰가 간다.
   마크업에서 data-tilt 를 뺐으므로 JS 드라이버는 대상이 0개가 되어 그냥 쉰다. */
[data-tilt]{perspective:none;overflow:visible}
.shot img,.shotwide img,.tscenewrap{transform:none !important}

/* 제품 UI 는 축소해서 다 보여주는 대신 크롭해서 확대한다.
   히어로는 2560x1640 전체를 1296px 로 줄여 쓰고 있었다 — 50% 축소라
   화면 안 글자가 읽히지 않는다. 화면 폭을 크게 쓰되 위아래를 잘라
   "지금 검토할 글"이 실제 크기로 보이게 한다. */
.shotwide{position:relative;overflow:hidden;border-radius:var(--r3);
  aspect-ratio:1440/720;box-shadow:0 44px 90px -50px rgba(16,24,40,.38), 0 3px 10px rgba(16,24,40,.05)}
.shotwide img{width:100%;height:auto;min-height:100%;object-fit:cover;object-position:top center;
  border-radius:0;box-shadow:none;display:block}

.shot{position:relative;overflow:hidden;border-radius:var(--r3);
  aspect-ratio:1100/820;box-shadow:0 40px 84px -48px rgba(16,24,40,.34), 0 2px 8px rgba(16,24,40,.05)}
.shot img{width:100%;height:auto;min-height:100%;object-fit:cover;object-position:top left;
  border-radius:0;box-shadow:none;display:block;transform:scale(1.18);transform-origin:top left}

@media(max-width:760px){
  /* 폰에서는 전체 대시보드를 쓰지 않는다 — 더 좁게 잘라 핵심만 */
  .shotwide{aspect-ratio:390/300}
  .shot{aspect-ratio:390/340}
  .shot img{transform:scale(1.45)}
}

/* ==========================================================================
   히어로 — 한 화면의 주인공을 둘로 줄인다
   =========================================================================
   지금 한 화면에 대형 H1 · 파란 강조어 · CTA · 3D 오브젝트 · 움직이는 캡션 ·
   체험 입력창 · 대형 제품 스크린샷이 연달아 나온다. 각각은 나쁘지 않은데
   모이면서 서로 시선을 빼앗는다.

   주인공은 (1) 대형 카피 (2) 3D 오브젝트 둘로 두고,
   CTA·캡션·입력창·스크린샷은 한 단계씩 내린다.
   3D 로고 자체는 유지한다 — 넣으라고 하신 것이고, 이 페이지의 기억점이다.
   ========================================================================== */
.herotop{align-items:center;gap:clamp(28px,3.4vw,56px)}

/* 3D 오브젝트는 카피와 시각 무게를 나눠 갖는다. 여백에 떠 있지 않게 자리를 준다 */
.morph__stage{width:clamp(240px,20vw,320px)}
.morph__cap{margin-top:10px;font-size:var(--t-caption);font-weight:600;
  color:var(--ink-quiet);text-align:center}
.morph[data-m="1"] [data-m="1"]{color:var(--blue-text)}

/* 체험 입력창은 보조다 — 주인공 옆에서 같은 무게로 서지 않게 한 단 내린다 */
.trywrap{margin-top:clamp(36px,4vw,56px)}
.trywrap .try__box{box-shadow:0 1px 3px rgba(25,31,40,.06), 0 10px 26px -14px rgba(25,31,40,.22)}
.trywrap .try__box:focus-within{box-shadow:0 0 0 3px rgba(0,100,204,.5), 0 10px 28px -12px rgba(0,100,204,.3)}
#tryInput{font-size:var(--t-body)}

/* 제품 화면은 히어로의 결론이다 — 입력창보다 뒤에, 더 크게 */
.shotwide{margin-top:clamp(44px,5vw,72px)}

/* 부가 문구는 조용히 */
.sc__fine{color:var(--ink-quiet)}

@media(max-width:1000px){
  /* 태블릿부터는 텍스트 50 / 이미지 50 을 유지하지 않는다.
     제목 → 설명 → 그림 순서로 세운다. */
  .herotop{grid-template-columns:1fr}
  .morph{justify-items:center;margin-top:8px}
  .morph__cap{text-align:center}
}

/* 요금 히어로 — 그래픽을 빼고 숫자를 그래픽으로 쓴다.
   전에는 1,162KB 짜리 포스터가 페이지의 첫 화면을 차지했다.
   가격 페이지에서 사람이 찾는 건 그림이 아니라 숫자다. */
.bignum{margin-top:clamp(40px,5vw,72px);text-align:center}
.bignum__n{margin:0;display:flex;align-items:baseline;justify-content:center;gap:10px;flex-wrap:wrap}
.bignum__n b{font-family:var(--num);font-size:clamp(64px,10vw,132px);font-weight:800;
  letter-spacing:-.05em;line-height:1;color:var(--ink);font-variant-numeric:tabular-nums}
.bignum__n span{font-size:var(--t-body);font-weight:700;color:var(--ink-quiet)}
.bignum__w{margin:14px 0 0;font-size:var(--t-body);color:var(--body)}
.bignum__go{margin-top:clamp(26px,3vw,36px)}
.bignum__fine{margin:16px auto 0;max-width:46ch;font-size:var(--t-caption);
  line-height:1.6;color:var(--ink-quiet)}