/* rit. 독서모임 1기 — Figma LP v12 (4721:65317) 기준 */
@font-face{font-family:Bookk;src:url('assets/BookkGothic-Light.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Bookk;src:url('assets/BookkGothic-Bold.woff2') format('woff2');font-weight:700;font-display:swap}

:root{
  --wine:#520c36;--plum:#39132a;--plum-2:#401830;--deep:#28101e;--night:#170710;
  --lime:#bcf67c;--lime-100:#f3fce8;--green:#aadc97;--green-hero:#b2e5a0;--green-header:#92c57f;--green-founder:#8bbc79;
  --green-faq:#85bd46;--green-title:#88c447;--surface:#f4f4f6;--gray-box:rgba(205,204,204,.8);
  --tex-paper:url('assets/80d400721aff87f001a83dd8c6cf7849e1d65b0a.webp');
  --tex-crumple:url('assets/79dec09667f113db3f2ccb338caaf0c9027ea1ca.webp');
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:clip}
body{margin:0;color:var(--plum);font-family:Bookk,"Apple SD Gothic Neo",sans-serif;font-weight:400;overflow-x:clip;-webkit-font-smoothing:antialiased}
h1,h2,h3,p,ul{margin:0}ul{padding:0;list-style:none}
h1,h2,h3,strong,b{font-weight:700}
a{color:inherit;text-decoration:none}
img{display:block}
.inner{width:min(1120px,calc(100% - 64px));margin:auto}
main>section{position:relative;overflow:hidden}
a:focus-visible,summary:focus-visible{outline:3px solid var(--wine);outline-offset:3px}

/* 인라인 rit. 로고(Figma: Hatch Medium Italic) — 원본 워드마크 SVG를 마스크로 재사용 */
.rit{display:inline-block;width:1.42em;height:.66em;line-height:.66em;overflow:hidden;vertical-align:baseline;margin-right:.08em;font-style:normal;-webkit-text-fill-color:transparent;background:currentColor;
  -webkit-mask:url('assets/ec9bbe946d554ba2f3f76295ec98c0911209df83.svg') center/contain no-repeat;mask:url('assets/ec9bbe946d554ba2f3f76295ec98c0911209df83.svg') center/contain no-repeat}

/* 장식 패턴 레이어: 1440 캔버스 좌표 그대로, 가운데 정렬 */
.pattern{position:absolute;top:0;left:50%;width:1440px;height:100%;transform:translateX(-50%);pointer-events:none}
.pattern .s{pointer-events:auto;cursor:pointer}
.pattern .s{position:absolute}
.pattern span.s img{width:100%;height:100%}

/* ───────── HEADER ───────── */
.site-header{background:var(--green-header);padding:24px 0}
.header-inner{display:flex;align-items:center;gap:10px}
.wordmark{width:41px;height:19px}
.recruiting{font-size:12px;font-weight:700;line-height:1.4;letter-spacing:-.12px;color:var(--wine)}
.header-cta{margin-left:auto;background:var(--lime);padding:8px 16px;border-radius:99px;font-size:13px;font-weight:700;line-height:1.4;letter-spacing:-.13px;color:#1c1c1e}

/* ───────── 01 HERO ───────── */
.hero{height:1060px;background:var(--green-hero)}
.s1{left:805px;top:740px;width:370.2px;height:307px}
.s2{left:257px;top:-65.2px;width:250.5px;height:273px;transform:rotate(-105deg)}
.s3{left:842px;top:386px;width:312.9px;height:334.5px}
.s4{left:740.6px;top:90.4px;width:319.7px;height:311.7px}
.s5{left:355px;top:147px;width:329.1px;height:309.9px}
.s6{left:-15px;top:117px;width:329.3px;height:325.3px}
.s7{left:931px;top:-133px;width:362.3px;height:260px}
.s8{left:341px;top:801px;width:309px;height:322px}
.s9{left:150px;top:457px;width:297px;height:288px}
.s10{left:1193.4px;top:765.7px;width:334.5px;height:332.8px;transform:rotate(-64.89deg)}
.s11{left:1175px;top:442px;width:309.9px;height:297.7px;transform:rotate(180deg)}
.s12{left:-39.3px;top:721.9px;width:362.7px;height:339.6px}
.s13{left:1093px;top:112px;width:334.2px;height:323px}
.s14{left:451px;top:513px;width:367.9px;height:327px}
.dashed-line{position:absolute;left:665px;top:528px;width:1060px;height:4px;transform:rotate(90deg)}

.hero-copy{position:absolute;top:217px;left:50%;transform:translateX(-50%);width:589px;display:flex;flex-direction:column;align-items:center;gap:39px;text-align:center}
.hero h1{display:inline-grid;font-size:80px;line-height:1.22;letter-spacing:-3.2px;color:var(--wine);white-space:nowrap}
.hero h1>span{grid-area:1/1;justify-self:start;align-self:start}
.hl-1{margin:0 0 0 112px}
.hl-2{margin:98px 0 0 12px}
.hl-3{margin:196px 0 0 0;padding:0 10px;background:var(--wine);color:var(--lime)}
.hl-4{margin:294px 0 0 122px}
.hero-copy>p{font-size:24px;line-height:1.4;letter-spacing:-.96px;color:var(--plum-2)}
.hero-cta{background:var(--lime);padding:18px 80px;border-radius:99px;font-size:24px;font-weight:700;line-height:1.22;letter-spacing:-.96px;color:var(--wine)}

/* ───────── 02 PROBLEM ───────── */
.problem{height:820px;background:var(--plum);color:#fff}
.problem .inner{position:relative;height:100%}
.problem h2{position:absolute;top:80px;left:0;font-size:64px;line-height:1.22;letter-spacing:-2.56px;color:var(--lime)}
.problem-copy{position:absolute;left:556px;width:552px;font-size:24px;line-height:1.4;letter-spacing:-.96px}
.problem-copy strong{display:block;margin-bottom:8px}
.problem-copy.first{top:422px}.problem-copy.second{top:630px}

/* ───────── 03 COMPLETION ───────── */
.completion{height:820px;background:var(--green) var(--tex-paper) center bottom/100% 100% no-repeat;color:var(--plum)}
.completion:before,.completion:after{content:"";position:absolute;left:50%;background:url('assets/9b55c6f677b6d77f655325a03899c52b53a1e244.webp') center/100% 100% no-repeat}
.completion:before{top:0;width:1465px;height:171px;transform:translateX(-50%)}
.completion:after{top:560px;width:2156px;height:251px;margin-left:-781px;transform:rotate(180deg)}
.completion-copy{position:absolute;z-index:1;top:272px;left:50%;transform:translateX(-50%);width:672px;text-align:center}
.completion h2{font-size:48px;line-height:1.22;letter-spacing:-1.92px;white-space:nowrap}
.completion-mark{display:inline-block;margin-top:16px;padding:0 10px;background:var(--wine);color:var(--lime);font-size:80px;font-weight:700;line-height:1.22;letter-spacing:-3.2px}
.completion-body{margin-top:48px;font-size:24px;line-height:1.4;letter-spacing:-.96px}

/* ───────── 04 FOUNDER ───────── */
.founder{height:820px;background:var(--green-founder);text-align:center}
.founder-label{position:absolute;top:80px;left:50%;transform:translateX(-50%);width:min(1120px,100%);font-size:24px;font-weight:700;line-height:1.22;letter-spacing:-.96px;color:var(--lime)}
.founder-quote{position:absolute;top:135px;left:50%;transform:translateX(-50%);width:1120px;font-size:100px;line-height:1.3;letter-spacing:-4px;
  background:linear-gradient(var(--lime),var(--green-founder));-webkit-background-clip:text;background-clip:text;color:transparent}
.founder-stack{position:absolute;top:334px;left:50%;transform:translateX(-50%);width:552px;height:486px;display:grid;background:var(--deep);color:#fff;text-align:left}
.founder-card{grid-area:1/1;padding:40px 40px 0;display:flex;flex-direction:column;gap:24px;font-size:24px;line-height:1.4;letter-spacing:-.96px}
.founder-progress{grid-area:1/1;align-self:end;position:relative;z-index:2;display:flex;gap:4px;padding:0 40px 33px}
.founder-progress button{position:relative;flex:1;height:20px;padding:0;border:0;background:none;cursor:pointer}
.founder-progress button:before,.founder-progress span{content:"";position:absolute;left:0;top:7px;height:6px;border-radius:100px}
.founder-progress button:before{right:0;background:rgba(243,252,232,.4)}
.founder-progress span{width:0;background:rgba(243,252,232,.8)}
.founder-progress button.is-done span{width:100%}
.founder-progress button.is-active span{animation:story-fill 6s linear forwards}
.founder-stack.paused .founder-progress span{animation-play-state:paused}
.founder-progress button:focus-visible{outline:2px solid var(--lime);outline-offset:2px}
.founder-stack.up{cursor:pointer}
@keyframes story-fill{from{width:0}to{width:100%}}
.founder-card .rit{color:var(--lime)}

.founder-card footer{display:flex;align-items:flex-end;justify-content:flex-end;gap:8px;text-align:right;font-size:16px;font-weight:700;line-height:1.4;letter-spacing:-.64px}
.founder-card footer span{opacity:.5}
.founder-card footer img{width:64px;height:64px;object-fit:cover}

/* ───────── 05 BOOKS ───────── */
.books{display:flex;flex-direction:column;padding-top:80px;background:#eee var(--tex-crumple) center/100% 100.38%;color:var(--wine)}
/* 책장 장식: 1440 캔버스에서 가장 위 라벨(y=401)부터 섹션 바닥(y=820)까지만 잘라 CTA 아래 24px에 배치 */
.books-art{order:2;position:relative;flex:0 0 auto;width:1440px;height:419px;margin:24px auto 0;overflow:hidden}
.books-art>*{margin-top:-401px}
.spines{position:absolute;left:0;top:462px;display:flex;align-items:flex-end;gap:4px}
.spines img{flex:0 0 auto;object-fit:cover}
.book-label{position:absolute;transform:translateX(-50%);padding:12px;background:#fafafb;font-size:12px;line-height:1.4;letter-spacing:-.48px;color:var(--deep);white-space:nowrap}
.l1{left:210.5px;top:421px}.l2{left:525.5px;top:518px}.l3{left:693.5px;top:703px}.l4{left:133px;top:645px}.l5{left:606px;top:401px}
.books-inner{order:1;position:relative;z-index:1}
.books-copy{margin-left:auto;width:560px;display:flex;flex-direction:column;align-items:flex-end;text-align:right}
.books-copy h2{display:flex;flex-direction:column;align-items:flex-end;gap:16px}
.rotator{display:inline-block;padding:0 10px;background:var(--wine);color:var(--lime);font-size:48px;line-height:1.22;letter-spacing:-1.92px;white-space:nowrap}
.books-title-main{font-size:56px;line-height:1.22;letter-spacing:-2.24px;white-space:nowrap}
.books-copy p{margin-top:16px;font-size:24px;line-height:1.4;letter-spacing:-.96px}
.books-copy .books-note{font-size:16px;letter-spacing:-.64px}
.books-copy .marker{background:linear-gradient(var(--lime),var(--lime)) left bottom/100% 100% no-repeat;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.books-cta{margin-top:28px;background:var(--lime);color:var(--deep);padding:18px 80px;border-radius:99px;font-size:24px;font-weight:700;line-height:1.22;letter-spacing:-.96px;white-space:nowrap}

/* ───────── 06 JOURNEY ───────── */
.journey{height:1060px;background:var(--plum-2)}
.journey-title{position:absolute;top:76px;left:50%;transform:translateX(-50%);width:560px;text-align:center;color:var(--lime)}
.journey-title h2{font-size:48px;line-height:1.22;letter-spacing:-1.92px}
.journey-title p{margin-top:16px;font-size:24px;line-height:1.4;letter-spacing:-.96px}
.journey-card{position:absolute;top:260px;left:50%;transform:translateX(-50%);width:1120px;height:800px;padding:40px;overflow:hidden;display:flex;flex-direction:column;gap:24px;
  background:var(--green) var(--tex-paper) center bottom/100% 100% no-repeat;color:var(--plum)}
.steps{display:flex;gap:14px}
.steps button{display:grid;place-items:center;width:48px;height:48px;padding:0;border:0;background:var(--deep);color:#fff;font:inherit;font-size:24px;font-weight:700;line-height:1.4;opacity:.1;cursor:pointer;transition:opacity .4s}
.steps button[aria-selected="true"]{opacity:1}
.steps button:focus-visible{outline:2px solid var(--deep);outline-offset:2px}
.journey-panels{display:grid;flex:1}
.jp{grid-area:1/1;display:flex;flex-direction:column;gap:24px;min-width:0}
.journey-text h3{font-size:24px;line-height:1.22;letter-spacing:-.96px}
.journey-text p{margin-top:16px;font-size:20px;line-height:1.4;letter-spacing:-.8px}
.stage-wrap{display:flex;justify-content:center;margin-top:auto}
.stage{position:relative;flex:0 0 auto;width:960px;height:564px;overflow:hidden;--cx:0px;--cw:960}
.phone{position:absolute;width:320px;height:696px;object-fit:cover}
.p1{left:151px;top:64px}.p2{left:489px;top:0}
.crop{position:absolute;width:300px;overflow:hidden}
.crop img{position:absolute;max-width:none}
.c2a{left:174px;top:15px;height:615px}.c2a img{left:-.02%;top:-6.1%;width:100.04%;height:106.1%}
.c2b{left:486px;top:65px;height:619px}.c2b img{left:0;top:-5.35%;width:100%;height:105.37%}
.u1{left:66px;top:27px}.u2{left:611px;top:434px}.u3{left:35px;top:71px}.u4{left:627px;top:477px}
.qa{position:absolute;left:24.5px;top:10px;width:911px;height:502px}
.bub{position:absolute;inset:0;width:100%;height:100%}
.bub-a{clip-path:inset(62px 484.5px 246.5px 107px round 16px);transform-origin:266px 159px}
.bub-b{clip-path:inset(0 95px 308px 476px round 16px);transform-origin:646px 97px}

.bub-c{clip-path:inset(230px 571px 78px 0 round 16px);transform-origin:170px 327px}
.bub-e{clip-path:inset(374px 56px 0 239px round 16px);transform-origin:547px 438px}
.bub-d{clip-path:inset(166px 0 142px 591px round 16px);transform-origin:751px 263px}
.p4{left:507px;top:25px}
.v1{left:765px;top:42px}.v2{left:742px;top:86px}.v3{left:24px;top:384px}.v4{left:45px;top:428px}.v5{left:67px;top:472px}
.done-card{position:absolute;left:106px;top:51px;width:380px;padding:24px;display:flex;flex-direction:column;gap:16px;background:#f4f5fd;color:#1c1c1e}
.done-head{display:flex;gap:24px;padding-bottom:8px}
.done-meta{flex:1;display:flex;flex-direction:column;justify-content:space-between}
.done-chip{display:inline-block;padding:6px 12px;border-radius:100px;background:var(--plum-2);color:var(--lime);font-size:14px;line-height:1}
.done-title{margin-top:8px;font-size:34px;font-weight:700;line-height:1.2}
.done-author{display:flex;align-items:flex-end;gap:8px}
.done-author img{width:32px;height:32px;object-fit:cover}
.done-author p{font-size:10px;font-weight:700;line-height:1.4;letter-spacing:-.4px;color:var(--plum-2);opacity:.5;white-space:nowrap}
.done-cover{width:80px;height:136px;object-fit:cover}
.done-stats{display:flex;gap:4px}
.done-stats div{flex:1;display:flex;flex-direction:column;gap:8px;padding:16px 12px;border:1px solid rgba(28,28,30,.04);border-radius:12px}
.done-stats b{font-size:13px;line-height:1.2;white-space:nowrap}
.done-stats span{font-size:10px;line-height:1.2;color:#8a8a8e}
.done-note{font-size:14px;line-height:1.4;letter-spacing:-.56px;color:var(--plum-2)}
.tag{position:absolute;z-index:1;background:var(--lime);border:1px solid var(--plum);padding:8px 16px;font-size:18px;font-weight:700;line-height:1.22;letter-spacing:-.72px;white-space:nowrap}
.t1{left:24px;top:428px}.t2{left:132px;top:25px;font-size:12px;letter-spacing:-.48px}.t3{left:679px;top:440px}.t4{left:67px;top:472px}.t5{left:695px;top:484px}

/* ───────── 07 BENEFITS ───────── */
.benefits{height:1280px;background:var(--deep)}
.d1{left:774.19px;top:867.44px;width:416.2px;height:345.1px}
.d2{left:158.1px;top:-37.7px;width:281.6px;height:306.9px;transform:rotate(-105deg)}
.d3{left:810.6px;top:467.65px;width:358.4px;height:378px}
.d4{left:699.2px;top:133.7px;width:366px;height:356.9px}
.d5{left:268.29px;top:199.5px;width:370.5px;height:349.6px}
.d6{left:-148.5px;top:166.22px;width:372.4px;height:366.5px}
.d7{left:915.84px;top:-114px;width:407.3px;height:292.3px}
.d8{left:252.56px;top:936.02px;width:347.4px;height:362px}
.d9{left:37.83px;top:549.29px;width:333.9px;height:323.8px}
.d10{left:1210.8px;top:896.3px;width:376px;height:374.1px;transform:rotate(-64.89deg)}
.d11{left:1190.15px;top:532.42px;width:348.4px;height:334.7px;transform:rotate(180deg)}
.d12{left:-178.3px;top:843px;width:414.1px;height:389.8px}
.d13{left:1097.96px;top:161.43px;width:375.7px;height:363.1px}
.d14{left:376.22px;top:612.24px;width:413.6px;height:367.6px}
.benefits-title{position:absolute;top:140px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center;color:var(--lime)}
.benefits-title h2{font-size:64px;line-height:1.22;letter-spacing:-2.56px;white-space:nowrap}
.benefits-title p{font-size:24px;line-height:1.4;letter-spacing:-.96px}
.benefit-panel{position:absolute;top:343px;left:50%;transform:translateX(-50%);padding:40px;display:flex;flex-direction:column;gap:8px;background:var(--green)}
.benefit-list{display:flex;flex-direction:column;gap:8px}
.benefit-list li{display:flex;align-items:flex-start;gap:24px;padding:16px 24px;background:var(--lime-100)}
.chip{flex:0 0 auto;padding:4px;background:var(--plum);color:var(--lime-100);font-size:16px;line-height:1.4;letter-spacing:-.64px}
.benefit-list strong{font-size:20px;line-height:1.22;letter-spacing:-.8px;white-space:nowrap}
.benefit-list small{margin-left:-20px;font-size:12px;line-height:1.22;letter-spacing:-.48px;color:#351327;white-space:nowrap}
.price{position:relative;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:24px 32px;background:var(--deep);color:var(--lime)}
.benefit-target{display:flex;align-items:center;gap:8px;font-size:14px;line-height:1.4;letter-spacing:-.56px;color:#457114;white-space:nowrap}
.benefit-target b{font-weight:700}
.price-badge{display:flex;flex-direction:column;align-items:center}
.price-badge>span{display:flex;gap:4px}
.price-badge i{display:grid;place-items:center;width:24px;height:24px;border-radius:100px;background:var(--lime);color:var(--plum);font-style:normal;font-size:16px;font-weight:700;line-height:1}
.price p{display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.price del{font-size:16px;line-height:1.4;letter-spacing:-.64px}
.price strong{font-size:28px;line-height:1.22;letter-spacing:-1.12px}
.fold{position:absolute;right:0;bottom:-1px;width:24px;height:24px;transform:rotate(-90deg)}

/* ───────── 08 FOR WHOM ───────── */
.fit{height:820px;background:var(--night);color:var(--lime-100)}
.fit-shape{position:absolute;left:calc(50% - 671px);top:77px;width:1342px;height:666px;pointer-events:none}
.fit-inner{position:relative;height:100%}
.fit-q{position:absolute;top:80px;left:0;font-size:40px;font-weight:400;line-height:1.4;letter-spacing:-1.6px}
.fit-lines{position:absolute;top:147px;left:0;font-size:40px;line-height:1.4;letter-spacing:-1.6px;color:rgba(243,252,232,.5);white-space:nowrap}
.fit-answer{position:absolute;top:530px;right:0;width:880px;display:flex;flex-direction:column;align-items:flex-end;gap:16px;text-align:right;color:var(--lime);font-weight:700}
.fit-answer-title{font-size:56px;line-height:1.22;letter-spacing:-2.24px}
.fit-answer-body{font-size:22px;line-height:1.22;letter-spacing:-.88px}

/* ───────── 09 FAQ ───────── */
.faq{background:var(--green-hero);padding:100px 0 192px}
.faq h2{width:min(1120px,calc(100% - 64px));margin:auto;text-align:center;font-size:32px;line-height:1.4;letter-spacing:-1.28px;color:var(--deep)}
.faq-list{width:min(1120px,calc(100% - 64px));margin:76px auto 0;display:flex;flex-direction:column;gap:16px}
.faq details{background:var(--green-faq);color:var(--lime-100)}
.faq details{transition:background-color .35s}
html:not(.js) .faq details[open],.faq details.is-open{background:var(--wine)}
.faq summary{display:flex;align-items:center;gap:24px;padding:32px;cursor:pointer;list-style:none;font-size:24px;font-weight:700;line-height:1.22;letter-spacing:-.96px}
.faq summary::-webkit-details-marker{display:none}
.faq summary:before{content:"";flex:0 0 12px;height:12px;background:url('assets/dot.svg') center/contain no-repeat}
.faq summary{transition:padding .38s cubic-bezier(.22,1,.36,1)}
html:not(.js) .faq details[open] summary,.faq details.is-open summary{padding-bottom:10px}
html:not(.js) .faq details[open] summary:before,.faq details.is-open summary:before{background-image:url('assets/dot-active.svg')}
.faq-a{overflow:hidden}
.faq-a p{padding:0 32px 32px 68px;font-size:15px;line-height:1.8;letter-spacing:-.15px}
.faq-link{display:inline-block;margin-top:6px;color:var(--lime);font-weight:700;text-decoration:underline;text-underline-offset:3px}

/* ───────── 10 FINAL CTA ───────── */
.final{background:var(--night);padding:104px 20px;display:flex;flex-direction:column;align-items:center;text-align:center;color:var(--lime)}
.final h2{width:min(800px,100%);font-size:42px;line-height:1.4;letter-spacing:-1.68px}
.final-note{font-size:14px;line-height:1.6;letter-spacing:-.14px;opacity:.8}
.final-cta{margin-top:28px;background:var(--lime);color:var(--night);padding:18px 40px;border-radius:99px;font-size:16px;font-weight:700;line-height:1.4;letter-spacing:-.32px}
[aria-disabled="true"]{cursor:default}

/* ───────── 11 FOOTER ───────── */
.site-footer{background:var(--surface);border-top:1px solid #e5e5ea;padding:48px 0 56px;color:#4a4a4f}
.footer-cols{display:flex;gap:64px}
.footer-brand{width:400px;display:flex;flex-direction:column;gap:12px}
.footer-brand img{width:140px;height:64.86px}
.footer-brand p,.footer-col p{font-size:13px;line-height:1.7;letter-spacing:-.13px}
.footer-col{min-width:140px;display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.footer-col a,.footer-link{font:inherit;font-size:13px;line-height:1.7;letter-spacing:-.13px;color:#4a4a4f;text-decoration:none;background:none;border:0;padding:0;cursor:pointer;text-align:left}
.footer-col a:hover,.footer-link:hover{color:var(--wine);text-decoration:underline}
.footer-link:focus-visible{outline:3px solid var(--wine);outline-offset:3px}
.download-sheet{width:min(420px,calc(100% - 32px));word-break:keep-all;border:0;padding:28px;background:var(--deep);color:var(--lime-100);font-size:16px;line-height:1.5;letter-spacing:-.64px}
.download-sheet::backdrop{background:rgba(23,7,16,.6)}
.download-title{margin-bottom:8px;color:var(--lime);font-size:18px;font-weight:700}
.download-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.download-cta,.download-close{padding:12px 20px;border-radius:99px;font:inherit;font-size:15px;font-weight:700;cursor:pointer}
.download-cta{background:var(--lime);color:var(--deep)}
.download-close{background:none;border:1px solid rgba(243,252,232,.4);color:var(--lime-100)}
.footer-col .footer-head{font-size:12px;font-weight:700;line-height:1.5;letter-spacing:.96px;color:#1c1c1e}
.footer-bottom{margin-top:36px;padding-top:20px;border-top:1px solid #e5e5ea;display:flex;gap:16px;font-size:12px;line-height:1.6;letter-spacing:-.12px}

/* ───────── 약관·방침 페이지 ───────── */
.footer-bottom a{color:inherit;text-decoration:none}
.footer-bottom a:hover{color:var(--wine);text-decoration:underline}
.apply-terms a{color:var(--lime);text-underline-offset:2px}
.legal-page{background:var(--surface)}
.legal{padding:64px 16px 96px;color:#2a2a2e;word-break:keep-all}
.legal-inner{max-width:760px;margin:0 auto}
.legal-eyebrow{font-size:14px;font-weight:700;line-height:1.4;color:#457114}
.legal-eyebrow .rit{color:#457114}
.legal h1{margin-top:8px;font-size:40px;line-height:1.25;letter-spacing:-1.6px;color:var(--wine)}
.legal-meta{margin-top:8px;font-size:14px;color:#8a8a8e}
.legal h2{margin-top:48px;padding-top:24px;border-top:1px solid #e5e5ea;font-size:20px;line-height:1.4;letter-spacing:-.6px;color:var(--wine);scroll-margin-top:24px}
.legal p,.legal li{font-size:16px;line-height:1.8;letter-spacing:-.32px}
.legal p{margin-top:12px}
.legal ol,.legal ul{margin-top:12px;padding-left:22px}
.legal ol{list-style:decimal}.legal ul{list-style:disc}
.legal li+li{margin-top:6px}
.legal li ul{margin-top:6px}
.legal .rit{color:var(--wine)}
.legal-toc{margin-top:32px;padding:20px 24px;background:#fff;border:1px solid #e5e5ea;border-radius:12px}
.legal-toc ol{margin:0;columns:2;column-gap:32px}
.legal-toc li{font-size:14px;break-inside:avoid}
.legal-toc a{color:#2a2a2e}
.legal-toc a:hover{color:var(--wine)}
.legal-table-wrap{margin-top:16px;overflow-x:auto}
.legal table{width:100%;min-width:560px;border-collapse:collapse;background:#fff;font-size:14px;line-height:1.7}
.legal th,.legal td{padding:12px 14px;border:1px solid #e5e5ea;text-align:left;vertical-align:top}
.legal th{background:#f0f0f3;font-weight:700;white-space:nowrap}
.legal-card{margin-top:12px;padding:16px 20px;background:#fff;border:1px solid #e5e5ea;border-radius:12px}
.legal-card p{margin:0}
.legal-note{font-size:14px!important;color:#8a8a8e}
.legal-todo{padding:2px 4px;background:#ffe58f;color:#5c3d00;border-radius:4px}
.legal a:focus-visible{outline:3px solid var(--wine);outline-offset:2px}
@media(max-width:767px){
  .legal{padding:40px 20px 72px}
  .legal h1{font-size:30px}
  .legal h2{margin-top:36px;font-size:18px}
  .legal p,.legal li{font-size:15px}
  .legal-toc ol{columns:1}
}

/* ───────── 사업자 정보 ───────── */
.footer-biz{margin-top:12px;font-style:normal;font-size:11px;line-height:1.7;letter-spacing:-.11px;color:#8a8a8e;word-break:keep-all}
.footer-biz span{display:inline-block;margin-right:14px}

/* ───────── 오픈 알림 신청 폼 (짙은 배경 + 라임 버튼) ───────── */
.apply-sheet{--ink:var(--lime-100);--ink-2:rgba(243,252,232,.72);--ink-3:rgba(243,252,232,.5);--line:rgba(243,252,232,.16);
  width:min(480px,calc(100% - 32px));max-height:calc(100% - 32px);border:0;padding:0;background:var(--deep);color:var(--ink);word-break:keep-all;overflow:auto;color-scheme:dark}
.apply-sheet::backdrop{background:rgba(23,7,16,.66)}
/* 시트 열림·닫힘: PC는 살짝 떠오르며, 모바일은 아래에서 올라오고 내려가며 */
.apply-sheet[open],.download-sheet[open]{animation:sheet-in .36s cubic-bezier(.22,1,.36,1)}
.apply-sheet[open]::backdrop,.download-sheet[open]::backdrop{animation:backdrop-in .3s ease-out}
.apply-sheet.closing,.download-sheet.closing{animation:sheet-out .26s cubic-bezier(.4,0,1,1) forwards}
.apply-sheet.closing::backdrop,.download-sheet.closing::backdrop{animation:backdrop-out .26s ease-in forwards}
.apply-form{overflow:hidden}
@keyframes sheet-in{from{opacity:0;transform:translateY(24px) scale(.98)}to{opacity:1;transform:none}}
@keyframes sheet-out{from{opacity:1;transform:none}to{opacity:0;transform:translateY(24px) scale(.98)}}
@keyframes backdrop-in{from{opacity:0}to{opacity:1}}
@keyframes backdrop-out{from{opacity:1}to{opacity:0}}
@keyframes sheet-up{from{transform:translateY(100%)}to{transform:none}}
@keyframes sheet-down{from{transform:none}to{transform:translateY(100%)}}
.apply-form{position:relative;padding:36px 32px 32px}
.apply-close{position:absolute;top:12px;right:12px;width:40px;height:40px;border:0;background:none;color:var(--ink);font-size:28px;line-height:1;cursor:pointer}
.apply-eyebrow{font-size:14px;font-weight:700;line-height:1.4;color:var(--ink-2)}
.apply-eyebrow .rit{color:var(--ink-2)}
.apply-title{margin-top:6px;font-size:26px;line-height:1.3;letter-spacing:-1.04px;color:var(--lime)}
.apply-lead{margin-top:8px;font-size:15px;line-height:1.55;letter-spacing:-.6px;color:var(--ink-2)}
.apply-field{display:flex;flex-direction:column;gap:8px;margin-top:22px}
.apply-label{font-size:14px;font-weight:700;line-height:1.4}
.apply-label em,.apply-check em{margin-left:4px;font-style:normal;font-size:12px;font-weight:700;color:var(--lime)}
.apply-label em.opt,.apply-check em.opt,.apply-survey em.opt{font-weight:400;color:var(--ink-3)}
.apply-field input,.apply-field textarea{width:100%;padding:8px 0 10px;border:0;border-bottom:1.5px solid rgba(243,252,232,.3);border-radius:0;background:none;font:inherit;font-size:22px;line-height:1.4;letter-spacing:-.5px;color:var(--ink);transition:border-color .2s}
.apply-field textarea{font-size:18px;line-height:1.5;resize:none;min-height:calc(2 * 1.5em + 18px)}
.apply-field input::placeholder,.apply-field textarea::placeholder{color:var(--ink-3)}
.apply-field input:focus,.apply-field textarea:focus{outline:none;border-bottom-color:var(--lime);box-shadow:0 1.5px 0 var(--lime)}
.apply-field input:focus-visible,.apply-field textarea:focus-visible{outline:none}
.apply-error{font-size:13px;line-height:1.4;color:#ff9b8f}
.apply-error:empty{display:none}
/* 체크박스 영역: 시트보다 아주 살짝 더 어두운 자줏빛 면으로 구분 */
.apply-checks{display:flex;flex-direction:column;gap:10px;margin-top:24px;padding:18px 16px;border-radius:14px;background:#1e0b16}
.apply-check{display:flex;align-items:flex-start;gap:10px;font-size:14px;line-height:1.45;cursor:pointer}
.apply-check input{flex:0 0 auto;width:18px;height:18px;margin:1px 0 0;accent-color:var(--lime)}
.apply-check .rit{color:var(--ink)}
.apply-agree{display:flex;flex-direction:column;gap:8px;margin-left:28px}
.apply-terms{font-size:12px;line-height:1.6;color:var(--ink-2)}
.apply-terms summary{cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.apply-terms ul{margin-top:6px;padding-left:16px;list-style:disc}
.apply-note{font-size:12px;line-height:1.5;color:var(--ink-3)}
.apply-submit{width:100%;margin-top:24px;padding:17px;border:0;border-radius:99px;background:var(--lime);color:var(--deep);font:inherit;font-size:17px;font-weight:700;letter-spacing:-.34px;cursor:pointer;transition:opacity .2s}
.apply-submit:disabled{opacity:.3;cursor:not-allowed}
.apply-hint{margin-top:10px;font-size:12px;line-height:1.5;text-align:center;color:var(--ink-3)}
.apply-close:focus-visible,.apply-submit:focus-visible,.apply-skip:focus-visible{outline:3px solid var(--lime);outline-offset:3px}
.apply-survey{margin:22px 0 0;padding:18px 0 0;border:0;border-top:1px solid var(--line)}
.apply-survey legend{padding:0;font-size:14px;font-weight:700}
.apply-q{margin-top:16px;font-size:15px;font-weight:700;line-height:1.45;color:var(--ink)}
/* 선택지: 한 줄 4칸이 가로를 꽉 채우고, 누르기 쉬운 높이(48px) */
.apply-options{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:10px}
.apply-options label{position:relative;display:flex;align-items:center;justify-content:center;min-height:48px;padding:8px 4px;border:1px solid rgba(243,252,232,.22);border-radius:99px;font-size:14px;white-space:nowrap;line-height:1.2;text-align:center;color:var(--ink-2);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background-color .15s,color .15s,border-color .15s}
.apply-options input{position:absolute;opacity:0;pointer-events:none}
.apply-options label:has(input:checked){background:var(--lime);border-color:var(--lime);color:var(--deep);font-weight:700}
.apply-options label:has(input:focus-visible){outline:2px solid var(--lime);outline-offset:2px}
.apply-done-actions{display:flex;flex-direction:column;align-items:center}
.apply-skip{margin-top:10px;padding:8px 12px;border:0;background:none;font:inherit;font-size:14px;color:var(--ink-2);text-decoration:underline;cursor:pointer}

/* ───────── FLOATING CTA ───────── */
.float-cta{position:fixed;z-index:50;right:32px;bottom:calc(32px + env(safe-area-inset-bottom, 0px));display:none;align-items:center;justify-content:center;padding:16px 28px;border-radius:99px;background:var(--lime);color:var(--night);font-size:16px;font-weight:700;line-height:1.4;letter-spacing:-.32px;white-space:nowrap;box-shadow:0 10px 28px rgba(23,7,16,.28)}
.js .float-cta{display:flex;opacity:0;translate:0 calc(100% + 48px);pointer-events:none;transition:opacity .3s var(--ease-out),translate .5s var(--ease-out)}
.js .float-cta.show{opacity:1;translate:0 0;pointer-events:auto}
.float-cta:focus-visible{outline:3px solid var(--wine);outline-offset:3px}

/* ───────── TABLET (768–1199) ───────── */
@media(max-width:1199px){
  .hero-copy{transform:translateX(-50%) scale(.85);transform-origin:top center}
  .problem h2{font-size:52px}
  .problem-copy{left:auto;right:0;width:50%;font-size:21px}
  .founder-quote{width:calc(100% - 64px);font-size:72px}
  .books-copy{width:auto}
  .books-title-main{font-size:48px}
  .rotator{font-size:40px}
  .books-art{zoom:.72;width:780px;margin:calc(24px / .72) 0 0}
  /* 앱 화면이 폭에 맞춰 줄어드는 구간: 박스·섹션 높이를 고정값 대신 내용에 맞춤 */
  .journey{height:auto;padding-top:76px}
  .journey-title{position:relative;top:auto;left:auto;transform:none;margin:0 auto}
  .journey-card{position:relative;top:auto;left:auto;transform:none;width:calc(100% - 64px);height:auto;margin:43px auto 0;padding-bottom:0}
  .phones{zoom:.8}
  .fit-q,.fit-lines{font-size:clamp(22px,3.1vw,32px);letter-spacing:-.04em}
  .fit-lines{white-space:normal}
  .fit-lines{top:137px}
  .fit-answer{width:100%}
  .fit-answer-title{font-size:48px}
}

/* ───────── MOBILE (<768) ───────── */
@media(max-width:767px){
  .apply-sheet{width:100%;max-width:none;max-height:92%;margin:auto 0 0;border-radius:20px 20px 0 0}
  .apply-sheet[open]{animation-name:sheet-up}
  .apply-sheet.closing{animation-name:sheet-down}
  .apply-field input{font-size:20px}
  .apply-field textarea{font-size:17px}
  .apply-form{padding:32px 20px calc(24px + env(safe-area-inset-bottom, 0px))}
  .apply-title{font-size:22px}
  .apply-options{grid-template-columns:repeat(2,1fr)}
  .apply-options label{font-size:15px}
  .apply-checks{padding:16px 14px}
  .float-cta{left:16px;right:16px;bottom:calc(12px + env(safe-area-inset-bottom, 0px));padding:16px}
  p,h1,h2,h3,strong,li{word-break:keep-all;overflow-wrap:break-word}
  .inner{width:calc(100% - 40px)}
  .site-header{padding:14px 0}
  .header-cta{padding:10px 14px;font-size:12px}
  .pattern{transform:translateX(-50%) scale(.5);transform-origin:top center;height:200%}

  .hero{height:auto;padding:72px 20px 88px}
  .hero-copy{position:relative;z-index:1;top:auto;left:auto;transform:none;width:100%;gap:28px}
  .hero h1{font-size:clamp(40px,12vw,54px);letter-spacing:-2px}
  .hl-1{margin:0 0 0 1.4em}.hl-2{margin:1.22em 0 0 .15em}.hl-3{margin:2.44em 0 0 0}.hl-4{margin:3.66em 0 0 1.52em}
  .hero-copy>p{font-size:17px;line-height:1.5;letter-spacing:-.68px;text-wrap:balance}
  .hero-cta{padding:16px 32px;font-size:18px}

  .problem{height:auto;padding:60px 0}
  .problem .inner{height:auto}
  .problem h2,.problem-copy{position:static;width:100%}
  .problem h2{font-size:36px;letter-spacing:-1.44px}
  .problem-copy{margin-top:44px;font-size:18px;letter-spacing:-.72px}
  .problem-copy.second{margin-top:32px}

  .completion{height:640px}
  .completion:before{width:700px;height:82px}
  .completion:after{top:auto;bottom:-10px;width:900px;height:105px;margin-left:-450px}
  .completion-copy{top:150px;width:calc(100% - 40px)}
  .completion h2{font-size:28px;white-space:normal}
  .completion-mark{font-size:58px}
  .completion-body{margin-top:32px;font-size:17px;line-height:1.55;letter-spacing:-.68px}

  .founder{height:auto;padding:56px 20px}
  .founder-label,.founder-quote{position:static;transform:none;width:100%}
  .founder-stack{position:relative;top:auto;left:auto;transform:none;width:100%;height:auto;margin-top:-40px}
  .founder-label{font-size:20px}
  .founder-quote{margin-top:16px;font-size:40px;letter-spacing:-1.6px}
  .founder-card{padding:28px 28px 64px;font-size:18px;letter-spacing:-.72px}
  .founder-progress{padding:0 24px 20px}
  .founder-card footer{font-size:13px}

  .books{padding-top:56px}
  .books-inner{height:auto}
  .books-copy{width:100%}
  .books-copy h2{gap:10px}
  .rotator{font-size:clamp(14px,4.6vw,26px);letter-spacing:-.04em;padding:0 8px}
  .js .rotator>span{right:8px}
  .books-title-main{font-size:clamp(24px,8.4vw,30px);letter-spacing:-.04em}
  .books-copy p{font-size:16px;letter-spacing:-.64px}
  .books-copy .books-note{font-size:13px}
  .books-cta{margin-top:24px;padding:16px 32px;font-size:18px}
  .books-art{zoom:.55;width:780px;margin:calc(24px / .55) 0 0}

  .journey{height:auto;padding:60px 16px 0}
  .journey-title{position:relative;top:auto;left:auto;transform:none;width:100%}
  .journey-title h2{font-size:34px}
  .journey-title p{font-size:17px;letter-spacing:-.68px}
  .journey-card{position:relative;top:auto;left:auto;transform:none;width:100%;height:auto;margin-top:40px;padding:24px}
  .journey-card{padding:20px 0 0}
  .steps,.journey-text{padding:0 20px}
  .journey-text p{font-size:17px}
  .stage-wrap{justify-content:flex-start;overflow:hidden;margin-top:0}
  .stage{margin-left:calc(var(--cx) * -1)}
  /* 좌우 빈 여백만 덜어낸 크롭: 라벨·화면의 실제 가장자리(PC 기준) ± 8px */
  .stage-1{--cx:16px;--cw:929}
  .stage-2{--cx:27px;--cw:850}
  .stage-3{--cx:17px;--cw:927}
  .stage-4{--cx:16px;--cw:938}

  .benefits{height:auto;padding:64px 16px 88px}
  .benefits-title,.benefit-panel{position:relative;z-index:1;top:auto;left:auto;transform:none}
  .benefits-title h2{font-size:32px;white-space:normal}
  .benefits-title p{font-size:16px;letter-spacing:-.64px}
  .benefit-panel{margin-top:40px;padding:16px}
  .benefit-list li{flex-direction:column;align-items:flex-start;gap:8px;padding:14px 16px}
  .benefit-list strong{font-size:17px;white-space:normal}
  .benefit-list small{margin-left:0}
  .price{padding:20px}
  .price strong{font-size:clamp(18px,5.6vw,22px)}
  .price-badge i{width:clamp(16px,5.2vw,24px);height:clamp(16px,5.2vw,24px);font-size:clamp(11px,3.6vw,16px)}
  .benefit-target{flex-wrap:wrap;white-space:normal;row-gap:6px}

  .fit{height:auto;padding:60px 0 64px}
  .fit-inner{height:auto}
  /* 가로로 긴 도형을 세로로 돌려 섹션 전체를 덮음 */
  .fit-shape{left:50%;top:50%;width:1040px;height:auto;max-width:none;transform:translate(-50%,-50%) rotate(90deg)}
  .fit-q,.fit-lines,.fit-answer{position:static;width:100%}
  .fit-q{font-size:24px;letter-spacing:-.96px}
  .fit-lines{margin-top:12px;font-size:18px;letter-spacing:-.72px;white-space:normal}
  .fit-lines li{margin-top:6px}
  .fit-answer{margin-top:44px;gap:14px}
  .fit-answer-title{font-size:30px;letter-spacing:-1.2px}
  .fit-answer-body{font-size:15px;line-height:1.5;letter-spacing:-.6px}

  .faq{padding:60px 0 80px}
  .faq h2{font-size:22px;width:calc(100% - 40px)}
  .faq-list{width:calc(100% - 32px);margin-top:36px;gap:10px}
  .faq summary{padding:20px;gap:14px;font-size:17px}
  .faq-a p{padding:0 20px 20px 46px}

  .final{padding:72px 20px}
  .final h2{font-size:28px}

  .footer-cols{flex-wrap:wrap;gap:32px}
  .footer-brand{width:100%}
  .footer-col{min-width:120px}
}


/* ═════════ MOTION (script.js가 html.js를 붙였을 때만) ═════════ */
:root{--ease-out:cubic-bezier(.22,1,.36,1);--ease-pop:cubic-bezier(.34,1.56,.64,1)}

/* 스크롤 등장: 떠오르듯 하나씩 */
.js [data-reveal]{opacity:0;translate:0 24px;transition:opacity .45s var(--ease-out),translate .55s var(--ease-out);transition-delay:var(--d,0ms)}
.js [data-reveal].is-revealed{opacity:1;translate:0 0}
.js [data-reveal="rise"]{translate:0 48px;transition-duration:.6s}
.js [data-stagger] [data-reveal]{translate:0 16px;transition-duration:.45s}
.js [data-stagger] [data-reveal].is-revealed{translate:0 0}

/* 패럴랙스는 장식에만 적용하며 책등의 바닥 정렬은 그대로 유지한다. */
.hero .pattern .s{translate:0 var(--parallax-y,0px)}
.spines{translate:var(--parallax-x,0px) 0}
.book-label{translate:0 var(--parallax-y,0px)}
/* 종이 가장자리를 경계 밖까지 겹쳐 이동 중에도 빈 틈이 생기지 않게 한다. */
.js .completion:before{top:-24px;height:195px;translate:0 var(--paper-top-y,0px)}
.js .completion:after{height:275px;translate:0 var(--paper-bottom-y,0px)}
/* 태그의 등장 translate와 스크롤 transform을 별도로 합성한다. */
.js .jp :is(.phone,.crop,.done-card,.qa,.tag){transform:translateY(var(--parallax-y,0px));transition:transform .28s var(--ease-out)}
@media(max-width:767px){
  .js .completion:before{top:-12px;height:94px}
  .js .completion:after{height:117px}
}

/* 섹션 1·7 배경 도형: 무작위로 하나씩 등장/퇴장 반복 */
.js .pattern .s{opacity:0;scale:.6;transition:opacity .45s var(--ease-out),scale .5s var(--ease-pop)}
.js .pattern .s.on{opacity:var(--shape-opacity,1);scale:1}
.pattern .s.pop,.js .pattern .s.on.pop{scale:1.12;transition-duration:.18s}

/* 섹션 1 CTA 강조: 등장 후 두 번만 은은하게 퍼짐 */
.hero-cta{position:relative;transition:translate .25s var(--ease-out),box-shadow .25s}
.hero-cta:hover,.js .hero-cta.is-revealed:hover{translate:0 -2px;box-shadow:0 8px 20px rgba(82,12,54,.18)}
.js .hero-cta.is-revealed:after{content:"";position:absolute;inset:0;border:2px solid rgba(188,246,124,.8);border-radius:inherit;opacity:0;animation:cta-pulse 2.6s var(--ease-out) 1s 2;pointer-events:none}
@keyframes cta-pulse{0%{opacity:.7;transform:scale(1)}70%,100%{opacity:0;transform:scale(1.09,1.35)}}

/* 섹션 3 「완독」: 배경이 아래에서 위로 칠해짐 */
.js .completion-mark{background:linear-gradient(var(--wine),var(--wine)) left bottom/100% 0% no-repeat;color:var(--wine);transition:opacity .45s var(--ease-out),translate .55s var(--ease-out),background-size .75s var(--ease-out),color .3s;transition-delay:var(--d,0ms),var(--d,0ms),calc(var(--d,0ms) + 150ms),calc(var(--d,0ms) + 450ms)}
.js .completion-mark.is-revealed{background-size:100% 100%;color:var(--lime)}

/* 섹션 4: 인용문 타이핑 → 카드가 아래에서 떠오름 → 카드 교체 */
.js .founder-quote{background-size:100% 390px;background-repeat:no-repeat}
.founder-quote .caret{display:inline-block;width:4px;height:.8em;margin-left:4px;vertical-align:-.04em;background:var(--lime);animation:caret .8s steps(1) infinite}
@keyframes caret{50%{opacity:0}}
.js .founder-stack{opacity:0;translate:0 48px;transition:opacity .35s var(--ease-out),translate .55s var(--ease-out)}
.js .founder-stack.up{opacity:1;translate:0 0}
.js .founder-card{opacity:0;translate:24px 0;visibility:hidden;transition:opacity .3s var(--ease-out),translate .4s var(--ease-out),visibility 0s .4s}
.js .founder-card.is-active{opacity:1;translate:0 0;visibility:visible;transition-delay:0s}
.js .founder-card.is-leaving{translate:-24px 0}
.js .rev .founder-card{translate:-24px 0}
.js .rev .founder-card.is-active{translate:0 0}
.js .rev .founder-card.is-leaving{translate:24px 0}
.js .founder-card.no-tr{transition:none}
.founder-stack{overflow:hidden}
.founder-stack.manual .founder-progress button.is-active span{animation:none;width:100%}

/* 섹션 5: 형광펜이 왼쪽에서 오른쪽으로 칠해짐 */
.js .books-copy .marker{background-size:0% 100%;transition:background-size .7s var(--ease-out) .2s}
.js .books-copy .is-revealed .marker{background-size:100% 100%}
.js .bub{opacity:0;translate:0 14px;scale:.96;transition:opacity .45s var(--ease-out),translate .55s var(--ease-out),scale .55s var(--ease-pop)}
.js .bub.on{opacity:1;translate:0 0;scale:1}
/* 섹션 5 하이라이트 문구: 아래에서 올라오며 교체, 박스 폭은 문구 길이에 맞춰 늘고 줄어듦 */
html:not(.js) .rotator>span:not(:first-child){display:none}
.js .rotator{position:relative;height:1.22em;overflow:hidden;box-sizing:content-box;transition:width .4s var(--ease-out)}
.js .rotator>span{position:absolute;right:10px;top:0;opacity:0;translate:0 100%;transition:opacity .3s var(--ease-out),translate .4s var(--ease-out)}
.js .rotator>span.is-active{opacity:1;translate:0 0}
.js .rotator>span.is-out{opacity:0;translate:0 -100%}

/* 섹션 6: 단계 전환 */
.js .jp{opacity:0;visibility:hidden;transition:opacity .18s ease-in,visibility 0s .18s}
.js .jp.is-active{opacity:1;visibility:visible;transition:opacity .32s var(--ease-out),visibility 0s;transition-delay:.08s,0s}
.js .jp .journey-text{opacity:0;translate:0 8px;transition:opacity .25s var(--ease-out),translate .35s var(--ease-out)}
.js .journey-card.is-revealed .jp.is-active .journey-text{opacity:1;translate:0 0;transition-delay:.06s}
.js .jp .stage-wrap{opacity:0;translate:0 16px;transition:opacity .35s var(--ease-out),translate .45s var(--ease-out)}
.js .journey-card.is-revealed .jp.is-active .stage-wrap{opacity:1;translate:0 0;transition-delay:.14s}
.js .jp .tag{opacity:0;translate:0 10px;transition:opacity .4s var(--ease-out),translate .4s var(--ease-out),transform .28s var(--ease-out)}
.js .journey-card.is-revealed .jp.is-active .tag{opacity:1;translate:0 0}
.js .jp.is-active .tag:nth-of-type(1){transition-delay:.3s,.3s,0s}.js .jp.is-active .tag:nth-of-type(2){transition-delay:.42s,.42s,0s}
.js .jp.is-active .tag:nth-of-type(3){transition-delay:.54s,.54s,0s}.js .jp.is-active .tag:nth-of-type(4){transition-delay:.66s,.66s,0s}
.js .jp.is-active .tag:nth-of-type(5){transition-delay:.78s,.78s,0s}

@media(prefers-reduced-motion:reduce){
  .founder-progress button.is-active span{animation:none;width:100%}
  html{scroll-behavior:auto}
  *{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;transition-delay:0s!important}
  .hero .pattern .s,.spines,.book-label{translate:none!important}
  .js .jp :is(.phone,.crop,.done-card,.qa,.tag){transform:none!important}
  .js .completion:before{top:0;height:171px;translate:none!important}
  .js .completion:after{height:251px;translate:none!important}
  .js .pattern .s.on{opacity:1}
  @media(max-width:767px){
    .js .completion:before{height:82px}
    .js .completion:after{height:105px}
  }
  .pattern .s.pop{scale:1!important}
  .js [data-reveal],.js .founder-stack{opacity:1;translate:none}
  .js .hero-cta.is-revealed:after{animation:none}
}