*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:30px}body{margin:0;background:#fbfaf6;color:#233b35;font-family:-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;line-height:1.7}a{color:inherit}a:focus-visible{outline:3px solid #b5522d;outline-offset:6px}.nav,main,footer{width:min(1120px,calc(100% - 64px));margin:auto}.nav{display:flex;align-items:center;justify-content:space-between;padding:27px 0;border-bottom:1px solid #dce1d8}.brand{display:flex;align-items:center;gap:10px;font-weight:750;font-size:20px;text-decoration:none}.mark{background:#245a4a;color:white;border-radius:11px;padding:0 10px;font-size:22px}.nav nav{display:flex;gap:25px;font-size:14px}.nav nav a{text-decoration:none}.hero{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;padding:92px 0 100px}.eyebrow{font-size:14px;font-weight:700;color:#5c7564;letter-spacing:.025em;margin:0 0 19px}h1{font-size:clamp(36px,4.3vw,56px);letter-spacing:-.055em;line-height:1.23;margin:0 0 24px}h2{font-size:34px;line-height:1.35;letter-spacing:-.04em;margin:0}h3{font-size:22px;letter-spacing:-.025em;margin:0 0 10px}.lead{font-size:18px;color:#61716a;line-height:1.85;margin:0 0 30px}.button{display:inline-flex;gap:30px;background:#245a4a;border-radius:8px;padding:13px 20px;color:white;text-decoration:none;font-weight:650}.status{font-size:12px;color:#73786c;margin-top:20px}.status span{display:inline-block;width:7px;height:7px;background:#b17442;border-radius:50%;margin-right:7px}.board{background:#e7ede4;border:1px solid #d5dfd1;border-radius:20px;padding:25px;box-shadow:0 22px 50px #213b3510;transform:rotate(1deg)}.board-top{display:flex;justify-content:space-between;align-items:center;font-weight:750;margin-bottom:25px;gap:8px}.pill{font-size:10px;background:#f8faf6;padding:5px 8px;border-radius:30px;font-weight:500}.columns{display:grid;grid-template-columns:1fr 1fr;gap:14px}.columns h3{font-size:12px;margin-bottom:13px;color:#687562}.note{padding:16px;border-radius:9px;margin:0 0 13px;box-shadow:0 3px 4px #253b3405}.yellow{background:#f7e9b4}.white{background:#fffefa}.pink{background:#f0d9c9}.note span{font-size:10px;color:#73816b}.note p{font-size:13px;line-height:1.8;font-weight:650;margin:9px 0}.line{height:4px;border-radius:4px;background:#425f3210;margin:11px 0;width:90%}.line.short{width:65%}.board-foot{display:flex;justify-content:space-between;padding:13px 9px 0;font-size:11px;font-weight:700;border-top:1px solid #cad6c4}.features{padding:70px 0;border-top:1px solid #dce1d8}.section-heading{margin-bottom:50px}.feature-row{display:grid;grid-template-columns:62px 1fr 120px;gap:25px;align-items:start;padding:28px 0;border-top:1px solid #dde2d8}.number{font-size:20px;color:#859781}.feature-row p{font-size:16px;color:#68746b;margin:0;max-width:650px}.tag{font-size:12px;justify-self:end;padding:6px 12px;border:1px solid #d7e0d1;border-radius:30px;color:#52664f}.guide{display:grid;grid-template-columns:1fr 1.25fr;gap:80px;padding:60px;background:#edf1e8;border-radius:18px;margin:25px 0 90px}.guide-content h3{font-size:18px}.guide-content p{color:#64725f;font-size:15px;margin:0 0 27px}.guide-content p:last-child{margin:0}.contact{padding:0 0 90px}.contact h2{font-size:27px;margin-bottom:20px}.contact a{font-size:18px;color:#356a54;text-underline-offset:6px;overflow-wrap:anywhere}footer{display:flex;justify-content:space-between;gap:25px;padding:35px 0 45px;border-top:1px solid #dce1d8;font-size:12px;color:#768073}footer strong{color:#344f3f;font-size:16px}footer p{margin:6px 0}footer nav{display:flex;gap:18px;align-items:start}footer a{text-decoration:none}@media(max-width:800px){.nav,main,footer{width:calc(100% - 36px)}.nav{align-items:start}.nav nav{gap:10px;font-size:11px;flex-wrap:wrap;justify-content:end;max-width:170px}.brand{font-size:16px;white-space:nowrap}.hero{grid-template-columns:1fr;padding:55px 0;gap:40px}.board{max-width:500px;transform:none}.lead{font-size:16px}.feature-row{grid-template-columns:35px 1fr;gap:13px}.tag{display:none}h2{font-size:29px}.feature-row h3{font-size:20px}.guide{grid-template-columns:1fr;padding:28px;gap:30px;margin-bottom:60px}footer{flex-direction:column}.contact{padding-bottom:55px}.contact h2{font-size:23px}footer nav{flex-wrap:wrap}.board-top{font-size:14px}.features{padding-top:45px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
/* ── 모션 ── */
:root{--ease:cubic-bezier(.22,1,.36,1);--accent:#245a4a}
html,body{overflow-x:clip}
.aurora{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.aurora span{position:absolute;border-radius:50%;filter:blur(80px);opacity:.55;animation:drift 22s ease-in-out infinite alternate}
.aurora span:nth-child(1){width:520px;height:520px;background:#dbe8d6;top:-160px;right:-120px}
.aurora span:nth-child(2){width:420px;height:420px;background:#f6e6c4;top:240px;left:-180px;animation-duration:28s;opacity:.4}
.aurora span:nth-child(3){width:360px;height:360px;background:#f0dccf;top:620px;right:18%;animation-duration:34s;opacity:.35}
@keyframes drift{to{transform:translate3d(60px,80px,0) scale(1.15)}}

.nav{position:sticky;top:0;z-index:20;transition:padding .4s var(--ease),border-color .4s,background .4s}
.nav::before{content:"";position:absolute;top:0;bottom:0;left:50%;width:100vw;transform:translateX(-50%);z-index:-1;background:#fbfaf6cc;backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px) saturate(1.4);opacity:0;transition:opacity .4s}
.nav.is-stuck{padding:14px 0;border-color:transparent}
.nav.is-stuck::before{opacity:1;box-shadow:0 1px 0 #dce1d8}
.nav nav a{position:relative;padding:2px 0}
.nav nav a::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1.5px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .35s var(--ease)}
.nav nav a:hover::after{transform:scaleX(1);transform-origin:left}
.mark{transition:transform .5s var(--ease)}
.brand:hover .mark{transform:rotate(-8deg) scale(1.06)}

h1 .hl{display:block;overflow:hidden;padding-bottom:.06em}
h1 .hl>span{display:inline-block}
h1 em{font-style:normal;background:linear-gradient(100deg,#245a4a,#4f8a63 45%,#b5763f);-webkit-background-clip:text;background-clip:text;color:transparent}
.button{position:relative;overflow:hidden;transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.button::before{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,#ffffff2e 50%,transparent 70%);transform:translateX(-100%);transition:transform .8s var(--ease)}
.button:hover{transform:translateY(-2px);box-shadow:0 12px 26px #245a4a33}
.button:hover::before{transform:translateX(100%)}
.button span{display:inline-block;transition:transform .35s var(--ease)}
.button:hover span{transform:translate(3px,-3px)}
.status span{animation:pulse 2.2s ease-in-out infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 #b1744266}50%{box-shadow:0 0 0 6px #b1744200}}

.board-wrap{perspective:1200px}
.board{transform:rotateY(-4deg) rotateX(3deg);transform-style:preserve-3d;transition:transform .7s var(--ease),box-shadow .7s var(--ease)}
.board-wrap:hover .board{box-shadow:0 34px 70px #213b3522}
.note{transition:transform .6s var(--ease),box-shadow .6s var(--ease)}
.note.is-lit{transform:translateY(-6px) translateZ(30px) rotate(-1deg);box-shadow:0 16px 30px #253b341f}
.board-foot{position:relative}
.board-foot span{color:#8a9786;transition:color .4s;cursor:default}
.board-foot span.is-on{color:#233b35}
.foot-bar{position:absolute;left:0;top:-1px;height:2px;width:0;background:var(--accent);border-radius:2px;transition:transform .6s var(--ease),width .6s var(--ease)}

.feature-row{position:relative;transition:background .4s var(--ease)}
.feature-row::before{content:"";position:absolute;inset:0 -20px;border-radius:14px;background:#fff;opacity:0;transform:scale(.98);transition:opacity .4s var(--ease),transform .4s var(--ease);z-index:-1;box-shadow:0 10px 30px #213b350d}
.feature-row:hover::before{opacity:1;transform:none}
.number{transition:color .4s,transform .5s var(--ease)}
.feature-row:hover .number{color:var(--accent);transform:translateX(4px)}
.tag{transition:background .4s,color .4s,border-color .4s}
.feature-row:hover .tag{background:var(--accent);border-color:var(--accent);color:#fff}
.guide{transition:box-shadow .5s var(--ease)}

/* 등장 애니메이션 (JS가 켜졌을 때만 숨긴다) */
.js .hero-copy>*{opacity:0;transform:translateY(18px);animation:rise .9s var(--ease) forwards}
.js .hero-copy>h1{opacity:1;transform:none;animation:none}
.js h1 .hl>span{transform:translateY(110%);animation:lineUp 1s var(--ease) forwards}
.js h1 .hl:nth-child(2)>span{animation-delay:.12s}
.js .hero-copy>.eyebrow{animation-delay:0s}
.js .hero-copy>.lead{animation-delay:.35s}
.js .hero-copy>.button{animation-delay:.48s}
.js .hero-copy>.status{animation-delay:.6s}
.js .board-wrap{opacity:0;transform:translateY(30px) scale(.97);animation:rise 1.1s var(--ease) .25s forwards}
.js .note{opacity:0;animation:pop .7s var(--ease) forwards;animation-delay:calc(.7s + var(--i,0) * .12s)}
@keyframes rise{to{opacity:1;transform:none}}
@keyframes lineUp{to{transform:none}}
@keyframes pop{from{opacity:0;transform:translateY(14px) scale(.94)}to{opacity:1}}
.js .reveal{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease),transform .9s var(--ease);transition-delay:calc(var(--i,0) * 80ms)}
.js .reveal.is-in{opacity:1;transform:none}
.js .feature-row.reveal.is-in{transition:opacity .9s var(--ease),transform .9s var(--ease),background .4s}

@media(max-width:800px){.board{transform:none}.feature-row::before{inset:0 -10px}}
@media(prefers-reduced-motion:reduce){
  .aurora span,.status span{animation:none}
  .js .hero-copy>*,.js h1 .hl>span,.js .board-wrap,.js .note{animation:none;opacity:1;transform:none}
  .js .reveal{opacity:1;transform:none;transition:none}
  .board,.note,.foot-bar{transition:none}
}

/* ── 설치 바로가기 ── */
.nav nav{align-items:center}
.nav nav a.nav-cta{background:var(--accent);color:#fff;padding:7px 14px;border-radius:999px;font-weight:650;transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.nav nav a.nav-cta::after{display:none}
.nav nav a.nav-cta:hover{transform:translateY(-1px);box-shadow:0 8px 18px #245a4a33}
.cta-row{display:flex;flex-wrap:wrap;gap:10px}
.button.ghost{background:transparent;color:var(--accent);box-shadow:inset 0 0 0 1.5px #245a4a40}
.button.ghost:hover{background:#245a4a0d;box-shadow:inset 0 0 0 1.5px var(--accent)}
.guide-content p a{color:var(--accent);font-weight:650;text-underline-offset:4px}
.contact .button.store{font-size:16px;color:#fff;text-decoration:none;margin-bottom:18px}
@media(max-width:800px){.nav nav a.nav-cta{padding:5px 10px}.cta-row .button{flex:1 1 auto;justify-content:center}}