/* rit. 독서모임 1기 — Figma LP v12 (4721:65317) 기준 · 시즌2 가을 색 미리보기(s2-autumn-preview) */
/* 본문 서체: 부산단디고딕(부산광역시 배포). L=300·400, M=500, B=700. KS X 1001 한글 2,350자 + 사이트 사용 글자로 잘라 씀 */
@font-face{font-family:Bookk;src:url('/static/70cc51dd4a607a3c/assets/BusanDandiGothic-L.woff2') format('woff2');font-weight:100 449;font-display:swap}
@font-face{font-family:Bookk;src:url('/static/9b8bcddf00e3dda4/assets/BusanDandiGothic-M.woff2') format('woff2');font-weight:450 599;font-display:swap}
@font-face{font-family:Bookk;src:url('/static/22b9dcc69876f52a/assets/BusanDandiGothic-B.woff2') format('woff2');font-weight:600 900;font-display:swap}

:root{
  --wine:#8a1c1a;--plum:#5a2216;--plum-2:#4a1d14;--deep:#2f2416;--night:#1a1209;
  --lime:#f2c12e;--lime-100:#fff5d6;--green:#efd58a;--green-hero:#f7e7b0;--green-header:#fbf0cc;--green-founder:#c8862c;
  --green-faq:#8a1c1a;--green-title:#e3c46a;--surface:#f6f3ee;--gray-box:rgba(205,204,204,.8);
  --tex-paper:url('/static/6970771b00609534/assets/80d400721aff87f001a83dd8c6cf7849e1d65b0a.webp');
  --tex-crumple:url('/static/fc2389c92999c41c/assets/79dec09667f113db3f2ccb338caaf0c9027ea1ca.webp');
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:clip;-webkit-text-size-adjust:100%;text-size-adjust:100%}
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('/static/cd12366f44180a83/assets/ec9bbe946d554ba2f3f76295ec98c0911209df83.svg') center/contain no-repeat;mask:url('/static/cd12366f44180a83/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}

.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:82px;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 1.4em}
.hl-2{margin:1.22em 0 0 .15em}
.hl-3{margin:2.44em 0 0 0;padding:0 10px;background:var(--wine);color:var(--lime)}
.hl-4{margin:3.66em 0 0 .922em} /* 위치를 글자 크기(em) 기준으로 두어 크기를 바꿔도 겹침 배치가 그대로 */
.hl-5{display:grid;place-items:center;box-sizing:border-box;width:60px;height:60px;margin:264px 0 0 392.25px;border:4px solid var(--wine);border-radius:100px;font-size:32px;letter-spacing:-1.28px;line-height:1}
.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}
/* 제목과 본문 사이 끊긴 점선(Figma 섹션 2 · Line 6) */
.problem-dash{position:absolute;top:312px;left:calc(50% - 710px);width:1440px;height:20px;max-width:none;pointer-events:none}

/* ───────── 03 COMPLETION ───────── */
.completion{height:820px;background:var(--green) var(--tex-paper) center bottom/100% 100% no-repeat;color:var(--plum)}
.completion-paper{display:none}
.completion:before,.completion:after{content:"";position:absolute;left:50%;background:url('/static/114cfcdd5d764d25/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-text p+p{margin-top:8px}
.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(255,245,214,.4)}
.founder-progress span{width:0;background:rgba(255,245,214,.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{position:relative;height:960px;padding-top:120px;background:#f3eee4 var(--tex-crumple) center/100% 100.38%;color:var(--wine)}
/* 표지 줄·물결은 배경 장식: 1440 기준 좌표(Figma 섹션 10) */
.books-art{position:absolute;inset:0;pointer-events:none}
.books-wave{position:absolute;top:481px;left:calc(50% - 888px);width:1776px;height:599px;max-width:none}
.covers{position:absolute;top:630px;left:0;height:370px;display:flex;align-items:flex-end;gap:24px}
.covers{translate:var(--parallax-x,0px) 0}
/* 표지 줄: 같은 18권을 한 번 더 이어 붙여 왼쪽으로 천천히 끝없이 흐른다(JS가 복제) */
.covers-track{display:flex;align-items:flex-end;gap:inherit;height:100%;padding-right:24px}
.covers.is-rolling .covers-track{animation:covers-roll var(--roll-duration,150s) linear infinite}
.covers.is-paused .covers-track{animation-play-state:paused}
@keyframes covers-roll{to{transform:translateX(-50%)}}
.covers img{flex:0 0 auto;height:100%;width:auto;max-width:none;object-fit:cover}
.books-inner{position:relative;z-index:1;display:flex;justify-content:space-between;align-items:flex-start;gap:0}
.books-head{width:560px}
.books-head h2{display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.books-copy{width:560px;display:flex;flex-direction:column;align-items:flex-end;text-align:right}
.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:22px;font-size:26px;line-height:1.4;letter-spacing:-.96px}
.books-copy .books-body-2{margin-top:8px}
.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-copy u{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px}
.cta-pill{display:inline-block;margin-right:6px;padding:4px 6px 2px;border-radius:99px;background:var(--deep);color:var(--lime);font-size:.8em;vertical-align:.08em}
.books-cta{margin-top:40px;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:1116px;background:var(--plum-2)}
.journey-title{position:absolute;top:76px;left:50%;transform:translateX(-50%);width:880px;max-width:calc(100% - 64px);text-align:center;color:var(--lime)}
.journey-eyebrow{margin-bottom:8px;font-size:24px;font-weight:700;line-height:1.22;letter-spacing:-.96px;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:316px;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+p{margin-top:8px}
.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-wrap.is-scaled{justify-content:flex-start;overflow:hidden}
.stage-wrap.is-scaled .stage{transform-origin:0 0}
.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:140px;top:15px;height:615px}.c2a img{left:0;top:-4.89%;width:100%;height:106.06%}
.c2b{left:452px;top:65px;height:456px}.c2b img{left:-.02%;top:-6.58%;width:100.04%;height:142.54%}
.c2c{left:561px;top:296px;height:389px}.c2c img{left:-.02%;top:-32.13%;width:100.04%;height:167.1%}
.u1{left:66px;top:27px}.u2{left:636px;top:199px}.u3{left:35px;top:71px}.u4{left:652px;top:242px}
.qa{position:absolute;inset:0}
.bub{position:absolute;padding:28px;border-radius:16px;color:rgba(250,250,251,.81);font-size:20px;line-height:1.4;letter-spacing:-.8px;font-weight:300;white-space:nowrap;transform-origin:50% 50%}
.bub p+p{margin-top:4px}.bub b{font-weight:700}
.bub-a{left:177px;top:55px;background:rgba(206,102,54,.9)}
.bub-b{left:80px;top:337px;background:rgba(213,163,25,.9)}
.bub-c{left:413px;top:245px;background:rgba(208,78,68,.9)}
.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:#fffaf0;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:#8f8577}
.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:1540px;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{display:flex;flex-direction:column;align-items:center;gap:12px;font-size:64px;line-height:1.22;letter-spacing:-2.56px;white-space:nowrap}
.benefits-logo{height:.8em;width:auto}
.benefits-title p{font-size:24px;line-height:1.4;letter-spacing:-.96px}
.benefits-title .benefits-note{margin-top:-8px;font-size:16px;letter-spacing:-.64px;opacity:.8}
.benefit-list .lite{font-size:.75em;font-weight:300;letter-spacing:-.03em}
.benefit-panel{position:absolute;top:476px;left:50%;transform:translateX(-50%);box-sizing:border-box;width:min(640px, calc(100vw - 64px));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:18px 24px;background:var(--lime-100)}
.chip{flex:0 0 auto;white-space:nowrap;text-align:center;padding:0;background:#d9622b;color:#fff;font-size:13px;line-height:1;letter-spacing:-.52px}
.benefit-list strong{font-size:20px;line-height:1.35;letter-spacing:-.8px;white-space:nowrap}
.benefit-list li>div{display:flex;flex-direction:column;gap:6px}
.benefit-list .chip{justify-self:start} /* 박스=글자 크기 그대로 */
/* PC: 라벨 칸 폭을 고정(가장 긴 라벨 기준)해 카드마다 본문 시작선을 맞추고, 라벨·본문을 카드 높이 가운데에 */
.benefit-list li{display:grid;grid-template-columns:150px minmax(0,1fr);align-items:center;container-type:inline-size}
/* 카드가 좁아져도(1440px 미만) 원고 줄바꿈 그대로 카드 안에 들어가도록 글자 크기를 카드 폭에 맞춤.
   본문 칸 = 카드 안쪽 폭(100cqi) - 라벨 칸 150px - 간격 24px, 가장 긴 줄 ≈ 글자크기×16.9 */
.benefit-list strong{font-size:min(20px, calc((100cqi - 174px) / 16.9))}
.benefit-sub{font-size:min(16px, calc((100cqi - 174px) / 21.1))}
.benefit-sub{line-height:1.35;letter-spacing:-.6px;color:#4a1d14;white-space:nowrap}
.benefits-title p strong{font-weight:700}
.benefit-list small{margin-left:-20px;font-size:12px;line-height:1.22;letter-spacing:-.48px;color:#4a1d14;white-space:nowrap}
.price{position:relative;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:24px 40px 24px 32px;background:var(--deep);color:var(--lime)}
.benefit-target li{position:relative;padding-left:.9em}
.benefit-target li::before{content:"";position:absolute;left:.2em;top:.62em;width:4px;height:4px;border-radius:50%;background:currentColor}
.benefit-target{display:block;font-size:14px;line-height:1.4;letter-spacing:-.56px;color:#8a1c1a;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:2px}
.price-badge i{display:grid;place-items:center;width:24px;height:24px;border-radius:100px;background:#f28a4a;color:var(--plum);font-style:normal;font-size:16px;font-weight:700;line-height:1;letter-spacing:-.64px}
.price-badge>span:first-child i{background:#8a1c1a;color:#f28a4a}
.price p{display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.price del{font-size:16px;font-weight:300;line-height:1.4;letter-spacing:-.64px;opacity:.8}
.price strong{font-size:32px;line-height:1.22;letter-spacing:-1.28px;color:#f28a4a}
.fold{position:absolute;right:0;bottom:-1px;width:32px;height:32px;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(255,245,214,.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;font-weight:400;line-height:1.22;letter-spacing:-.88px}
.fit-answer .fit-answer-body-2{margin-top:-8px}

/* ───────── 09 FAQ ───────── */
/* ───────── 05-2 ROUTINE (Figma 섹션 9) ───────── */
.routine{position:relative;padding:86px 0 120px;background:#6191d0;color:#fff}
.routine-wave{position:absolute;top:-478px;left:calc(50% - 888px);width:1776px;height:599px;max-width:none;pointer-events:none}
.routine .inner{position:relative;z-index:1}
.routine-head{display:flex;flex-direction:column;gap:8px}
.routine-eyebrow{font-size:24px;font-weight:700;line-height:1.22;letter-spacing:-.96px}
.routine-head h2{font-size:48px;line-height:1.22;letter-spacing:-1.92px}
.routine-sub{font-size:24px;line-height:1.4;letter-spacing:-.96px}
.routine-note{font-size:16px;line-height:1.4;letter-spacing:-.64px}
.routine-cards{margin-top:80px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:21px}
.routine-card{min-width:0;display:flex;flex-direction:column;gap:16px;padding:40px 32px 56px;background:#f4f4f6 var(--tex-crumple) center/cover;color:var(--plum)}
.routine-badge{display:flex;gap:2px}
.routine-badge i{display:grid;place-items:center;width:48px;height:48px;border-radius:100px;font-style:normal;font-size:24px;font-weight:700;line-height:1;letter-spacing:-.96px}
.routine-badge.daily i{background:#8a1c1a;color:#f28a4a}
.routine-badge.weekend i{background:#2f5a92;color:#f2c12e}
.routine-badge.done i{background:#f28a4a;color:#5a2216}
.routine-card h3{font-size:28px;line-height:1.22;letter-spacing:-1.12px}
.routine-lede{font-size:16px;line-height:1.45;letter-spacing:-.48px;color:var(--wine);font-weight:700}
.routine-lede+h3{margin-top:-8px}
.routine-card ul{display:flex;flex-direction:column;gap:8px;padding-left:27px;list-style:disc;font-size:18px;line-height:1.4;letter-spacing:-.72px}
.faq{background:#f7e7b0;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('/static/01e24a28bf537996/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('/static/a65d74d5968c5337/assets/dot-active.svg')}
html:not(.js) .faq details[open] summary,.faq details.is-open summary{color:#f2c12e} /* 펼친 질문 제목도 왼쪽 동그라미와 같은 노란색 */
.faq summary{transition:padding .38s cubic-bezier(.22,1,.36,1),color .25s ease}
.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:52px 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{margin-top:16px;font-size:14px;line-height:1.6;letter-spacing:-.14px;color:#8fb6ea}
.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 #e8e1d6;padding:48px 0 56px;color:#534a40}
.footer-cols{display:flex;gap:64px}
.footer-brand{width:400px;display:flex;flex-direction:column;gap:12px}
.footer-brand img{display:block;width:43px;height:auto}
@media (min-width:1024px){.footer-brand img{width:62px}}
.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:#534a40;text-decoration:none;background:none;border:0;padding:0;cursor:pointer;text-align:left}
.footer-insta{align-self:flex-start;font-size:13px;line-height:1.7;letter-spacing:-.13px;color:#534a40;text-decoration:none}
.footer-insta:hover{color:var(--wine);text-decoration:underline}
.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(26,18,9,.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(255,245,214,.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 #e8e1d6;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:#8a1c1a}
.legal-eyebrow .rit{color:#8a1c1a}
.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:#8f8577}
.legal-version{margin-top:20px;padding:16px 18px;border-radius:12px;background:#f1ece3;font-size:14px!important;line-height:1.65;color:#534a40}
.legal-version p,.legal-version li{font-size:14px!important}
.legal-version ul{margin:8px 0 0;padding-left:1.2em}
.legal-version p+p,.legal-version ul+p{margin-top:8px}
.legal-version a{color:var(--wine);font-weight:700}
.legal h2{margin-top:48px;padding-top:24px;border-top:1px solid #e8e1d6;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-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 #e8e1d6;text-align:left;vertical-align:top}
.legal th{background:#f1ece3;font-weight:700;white-space:nowrap}
.legal-card{margin-top:12px;padding:16px 20px;background:#fff;border:1px solid #e8e1d6;border-radius:12px}
.legal-card p{margin:0}
.legal-note{font-size:14px!important;color:#8f8577}
.legal-todo{padding:2px 4px;background:#ffe58f;color:#5c3d00;border-radius:4px}
.legal a:focus-visible,.legal button: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}
  }

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

/* ───────── 오픈 알림 신청 폼 (짙은 배경 + 라임 버튼) ───────── */
.apply-sheet{--ink:var(--lime-100);--ink-2:rgba(255,245,214,.72);--ink-3:rgba(255,245,214,.5);--line:rgba(255,245,214,.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(26,18,9,.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(255,245,214,.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:#1f150a}
.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(255,245,214,.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(26,18,9,.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}
  .routine-head h2{font-size:40px}
  .routine-cards{gap:16px}
  .routine-card{padding:32px 20px 40px}
  .routine-card h3{font-size:22px}
  .routine-card ul{font-size:16px;padding-left:20px}
  .founder-quote{width:calc(100% - 64px);font-size:72px}
  .books-title-main{font-size:48px}
  .rotator{font-size:48px}
  .books{display:flex;flex-direction:column;height:auto;padding:104px 0 0}
  .books-art{order:2}
  .books-inner{flex-direction:column;gap:6px}
  .books-head,.books-copy{width:100%}
  .books-copy{align-items:flex-start;text-align:left}
  .books-art{position:relative;height:380px;margin-top:64px}
  .books-wave{top:-60px}
  .covers{top:70px;height:330px}
  /* 앱 화면이 폭에 맞춰 줄어드는 구간: 박스·섹션 높이를 고정값 대신 내용에 맞춤 */
  .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(42px,calc(12vw + 2px),56px);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 .922em}
  .hl-5{width:1.875em;height:1.875em;margin:8.25em 0 0 12.258em;border-width:.125em;font-size:.4em}
  .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}
  .problem-dash{position:relative;top:auto;left:50%;transform:translateX(-50%);display:block;width:864px;height:12px;margin-top:36px}
  .problem-dash+.problem-copy{margin-top:36px}
  .routine{padding:60px 0 72px}
  .routine-wave{top:-300px;left:calc(50% - 550px);width:1100px;height:371px}
  .routine-eyebrow{font-size:18px;letter-spacing:-.72px}
  .routine-head h2{font-size:clamp(26px,7.6vw,32px);letter-spacing:-.04em}
  .routine-sub{font-size:16px;letter-spacing:-.64px}
  .routine-note{font-size:12px;letter-spacing:-.48px}
  .routine-cards{margin-top:36px;grid-template-columns:1fr;gap:12px}
  .routine-card{padding:28px 24px 32px;gap:12px}
  .routine-badge i{width:40px;height:40px;font-size:20px}

  .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-inner{height:auto}
  .books-head h2{gap:10px}
  .rotator{font-size:clamp(16px,5.2vw,30px);letter-spacing:-.04em;padding:0 8px}
  .js .rotator>span{left:8px}
  .books-title-main{font-size:clamp(24px,8.4vw,30px);letter-spacing:-.04em}
  .books-copy p{font-size:min(18px, calc((100vw - 48px) / 16.5));letter-spacing:-.04em} /* 가장 긴 줄(18px 기준 ≈ 글자크기×16.2)이 좌우 24px 안에 들어가도록 */
  .books-cta{margin-top:24px;padding:16px clamp(18px,6vw,32px);font-size:clamp(15px,4.6vw,18px)}
  .books{padding-top:76px}
  .books-art{height:250px;margin-top:48px}
  .books-wave{top:-30px;left:calc(50% - 550px);width:1100px;height:371px}
  .covers{top:50px;height:200px;gap:12px}
  .covers-track{padding-right:12px}
  .covers{--roll-duration:90s}

  .journey{height:auto;padding:60px 16px 0}
  .journey-title{position:relative;top:auto;left:auto;transform:none;width:100%}
  .journey-eyebrow{font-size:20px}
  .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}
  .steps{gap:10px}
  .steps button{width:36px;height:36px;font-size:18px}
  .stage-wrap{justify-content:flex-start;overflow:hidden;margin-top:0}
  /* 좌우 빈 여백만 덜어낸 크롭: 라벨·화면의 실제 가장자리(PC 기준) ± 8px */
  .stage .tag{font-size:21px;letter-spacing:-.84px;padding:9px 18px}
  .stage .t2{font-size:14px;letter-spacing:-.56px}
  /* 앱 화면 좌우 여백을 같게 자르고(2·4단계), 라벨은 잘린 가장자리에서 40px(스테이지 기준) 안쪽으로 */
  .t1{left:56px}.t4{left:99px}.t3{left:609px}.t5{left:625px}
  .u1{left:151px}.u3{left:120px}.u2{left:585px}.u4{left:601px}
  .v3{left:86px}.v4{left:107px}.v5{left:129px}.v1{left:633px}.v2{left:610px}
  .stage-1{--cx:16px;--cw:929}
  .stage-2{--cx:80px;--cw:841}
  .stage-3{--cx:72px;--cw:815}
  .stage-4{--cx:46px;--cw:841}

  .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}
  .benefits-title .benefits-note{font-size:13px;letter-spacing:-.52px}
  .benefit-panel{width:auto;margin-top:40px;padding:16px}
  .benefit-list li{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:16px 16px}
  .benefit-list strong{font-size:17px;white-space:normal}
  .benefit-sub{font-size:14px;white-space:normal}
  .benefit-list small{margin-left:0}
  .benefit-list .chip{width:auto;margin-top:0}
  .price{padding:20px 36px 20px 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{white-space:normal}

  .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}
  /* 항목마다 한 줄: 가장 긴 항목(18px 기준 약 23자 폭)이 화면 폭에 들어가도록 글자 크기를 화면 폭에 맞춤 */
  .fit-lines{margin-top:12px;font-size:min(18px, calc((100vw - 48px) / 23));letter-spacing:-.04em;white-space:nowrap}
  .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:36px 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)}
/* 반복되는 종이 질감은 본문·찢어진 가장자리보다 느리게 흐른다. */
.js .completion{background-color:#f3eee4;background-image:none;isolation:isolate}
.js .completion-paper{display:block;position:absolute;inset:-320px 0;z-index:0;pointer-events:none;--paper-feather:40px;
  background:var(--tex-paper) center top/100% var(--paper-tile-height,710px) repeat-y;translate:0 var(--paper-texture-y,0px);
  /* 사진의 위아래를 종이색에 섞어 반복 경계의 밝기 차이를 줄인다. */
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 var(--paper-feather),#000 calc(100% - var(--paper-feather)),transparent);
  mask-image:linear-gradient(to bottom,transparent,#000 var(--paper-feather),#000 calc(100% - var(--paper-feather)),transparent);
  -webkit-mask-size:100% var(--paper-tile-height,710px);mask-size:100% var(--paper-tile-height,710px);
  -webkit-mask-repeat:repeat-y;mask-repeat:repeat-y}
.js .completion:before,.js .completion:after{z-index:1}
.js .completion-copy{z-index:2}
/* 종이 가장자리를 경계 밖까지 겹쳐 이동 중에도 빈 틈이 생기지 않게 한다. */
.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-paper{inset:-200px 0;--paper-feather:24px}
  .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(138,28,26,.18)}
.js .hero-cta.is-revealed:after{content:"";position:absolute;inset:0;border:2px solid rgba(242,193,46,.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;left: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){
  .js .completion{background-color:var(--green);background-image:var(--tex-paper)}
  .js .completion-paper{display:none;translate:none!important}
  .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,.covers{translate:none!important}
  .covers-track{animation: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}
}

/* モバイルの補助操作を隣接ターゲットと重ならない範囲で広げる */
.header-cta{min-height:44px;display:inline-flex;align-items:center}
.founder-progress button{height:44px;min-height:44px;margin-top:-12px;margin-bottom:-12px}
.founder-progress button:before,.founder-progress span{top:19px}
.journey-card .steps button{min-width:44px;min-height:44px}
.apply-close{width:44px;height:44px;position:sticky;float:right;top:8px;margin:8px 8px -52px 0;z-index:3}
.apply-check{min-height:24px;align-items:center}
.apply-terms summary{min-height:28px;display:flex;align-items:center}
.footer-cols a,.footer-cols button{min-height:28px;display:inline-flex;align-items:center}
.apply-sheet,.download-sheet{overscroll-behavior:contain;max-height:min(92dvh,var(--sheet-height,92dvh))}
html:has(dialog[open]){overflow:hidden}

.footer-bottom a,.footer-insta{min-height:28px;display:inline-flex;align-items:center}

.apply-form{overflow:visible}
.apply-deadline{margin-top:2px;font-size:13px;line-height:1.5;color:var(--lime)}
.apply-consent{position:relative}
.apply-consent>.apply-check{padding-right:52px}
.apply-consent>.apply-terms>summary{position:absolute;top:0;right:0;min-height:28px;display:flex;align-items:center}
/* 신청 완료 화면 30초 질문: 선택지 네모 */
#apply-sheet [data-survey] .apply-options label{border-radius:0}
/* 신청 창: 「rit. 독서모임 · 시즌1 / 제목」은 스크롤해도 위에 고정 */
.apply-head{position:sticky;top:0;z-index:2;margin:-36px -32px 0;padding:36px 32px 8px;background:var(--deep)}
.apply-head+.apply-lead{margin-top:0}
@media (max-width:767px){.apply-head{margin:-32px -20px 0;padding:32px 20px 8px}}
.apply-star{color:var(--lime)}
/* 신청 창 X: 고정된 제목 줄 안에 함께 고정 */
.apply-head .apply-close{position:absolute;top:12px;right:12px;float:none;margin:0}
/* 완료 화면 30초 질문: 선택지 한 줄(4칸) */
#apply-sheet [data-survey] .apply-options{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
#apply-sheet [data-survey] .apply-options label{min-height:44px;padding:6px 2px;font-size:13px;white-space:normal;word-break:keep-all}
/* 완료 화면 읽고 싶은 책 */
.apply-count{margin-left:6px;font-size:12px;font-weight:400;color:var(--ink-3)}
.apply-help{margin-top:4px;font-size:12px;line-height:1.5;color:var(--ink-3)}
.apply-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.apply-chips label{position:relative;display:inline-flex;align-items:center;min-height:36px;padding:6px 12px;border:1px solid rgba(255,245,214,.24);font-size:13px;line-height:1.3;cursor:pointer}
.apply-chips input{position:absolute;opacity:0;pointer-events:none}
.apply-chips label:has(input:checked){background:var(--lime);border-color:var(--lime);color:var(--deep);font-weight:700}
.apply-chips label:has(input:disabled){opacity:.35;cursor:not-allowed}
.apply-chips label:has(input:focus-visible){outline:2px solid var(--lime);outline-offset:2px}
/* 완료 화면: 북매칭 링크(북매칭 신청 창 링크와 같은 모양), 책 고르기 간격 */
.apply-books{margin-top:32px}
.apply-books .apply-q{margin-top:0}
.apply-sub-link{display:inline-block;text-decoration:underline;text-underline-offset:3px}

/* ───────── 시즌2 오픈 알림 모드: 「혹시 이런 적 있나요?」 다음 두 섹션만 흐리게 남기고 나머지는 숨김 ───────── */
.s2-gate{display:none}
html[data-mode="alert"] [data-teaser]{filter:blur(7px);pointer-events:none;user-select:none}
html[data-mode="alert"] [data-teaser] *{animation-play-state:paused}
html[data-mode="alert"] .founder-stack{visibility:hidden}
html[data-mode="alert"] .books,html[data-mode="alert"] .routine,html[data-mode="alert"] .journey,
html[data-mode="alert"] .s1-stories,html[data-mode="alert"] .benefits,html[data-mode="alert"] .faq,html[data-mode="alert"] .final,
html[data-mode="alert"] .footer-col[aria-label^="독서모임"],html[data-mode="alert"] [data-hide-alert]{display:none}
html[data-mode="alert"] .s2-gate{display:flex;position:relative;z-index:5;margin-top:-1100px;min-height:1100px;align-items:flex-end;justify-content:center;
  padding:0 20px 300px;background:linear-gradient(to bottom,rgba(26,18,9,0) 0,rgba(26,18,9,.4) 200px,rgba(26,18,9,.92) 460px,var(--night) 640px)}
.s2-gate-card{display:flex;flex-direction:column;align-items:center;text-align:center;color:var(--lime-100)}
.s2-gate-eyebrow{font-size:14px;line-height:1.4;color:var(--lime);font-weight:700}
.s2-gate-title{margin-top:12px;font-size:44px;line-height:1.25;letter-spacing:-1.6px;color:var(--lime);text-wrap:balance}
.s2-gate-body{margin-top:20px;font-size:18px;line-height:1.6;letter-spacing:-.5px;opacity:.9}
.s2-gate-note{margin-top:20px;font-size:14px;line-height:1.5;color:var(--lime)}
.s2-gate .final-cta{margin-top:20px}
@media (max-width:760px){
  html[data-mode="alert"] .s2-gate{margin-top:-760px;min-height:760px;padding-bottom:180px;
    background:linear-gradient(to bottom,rgba(26,18,9,0) 0,rgba(26,18,9,.45) 110px,rgba(26,18,9,.94) 300px,var(--night) 440px)}
  .s2-gate-title{font-size:30px;letter-spacing:-1px}
  .s2-gate-body{font-size:15px}
}
html[data-mode="alert"].gate-in-view .float-cta{opacity:0!important;pointer-events:none!important}

/* 시즌1 마감 안내 띠(헤더 아래, 오른쪽→왼쪽으로 흐름) */
.s1-closed-band{display:none;overflow:hidden;background:var(--wine);color:var(--lime);font-size:14px;line-height:1;padding:12px 0;white-space:nowrap}
html[data-mode="alert"] .s1-closed-band:not([hidden]){display:block}
.s1-closed-track{display:flex;width:max-content;animation:s1-band 38s linear infinite}
.s1-closed-track span{padding-right:80px}
.s1-closed-band:hover .s1-closed-track{animation-play-state:paused}
@keyframes s1-band{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  .s1-closed-band{white-space:normal;padding:12px 16px;line-height:1.5;text-align:center}
  .s1-closed-track{animation:none;width:auto;display:block}
  .s1-closed-track span+span{display:none}
  .s1-closed-track span{padding:0}
}
@media (max-width:760px){.s1-closed-band{font-size:13px;padding:10px 0}.s1-closed-track{animation-duration:30s}}

/* ───────── 시즌2 모집용 구성(초안): 히어로 사실 줄 · 시즌1 멤버 이야기 · 일정 — 모양은 Ellie 디자인 전 임시 ───────── */
.hero-facts{margin-top:20px;font-size:16px;font-weight:700;line-height:1.5;letter-spacing:-.4px;color:var(--wine)}
/* 날짜 줄 ↔ 신청 버튼 간격: 기존(간격+12px)의 절반. 바깥 간격(gap)이 폭마다 달라 폭별로 맞춤 */
.hero-facts+.hero-cta{margin-top:-13.5px} /* 768~1199: (39+12)/2 = 25.5px */
@media (min-width:1200px){.hero-facts+.hero-cta{margin-top:-10px}} /* (32+12)/2 = 22px */
@media (max-width:767px){.hero-facts+.hero-cta{margin-top:-8px}} /* (28+12)/2 = 20px */
.s1-stories{background:var(--lime-100);padding:100px 0}
.s1-stories .inner,.s2-schedule .inner{width:min(1120px,calc(100% - 32px));margin:auto;display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px}
.s1-eyebrow{font-size:16px;font-weight:700;color:var(--wine)}
.s1-stories h2,.s2-schedule h2{font-size:40px;line-height:1.25;letter-spacing:-1.6px;color:var(--deep)}
.s2-schedule{background:var(--surface);padding:100px 0}
.s2-steps{margin:32px 0 0;padding:0;list-style:none;width:min(640px,100%);display:flex;flex-direction:column;gap:10px;text-align:left}
.s2-steps li{display:grid;grid-template-columns:4.1em minmax(0,1fr);gap:12px;align-items:baseline;padding:14px 18px;background:#fff;border-radius:12px}
.s2-steps .s2-lab{font-size:16px;color:#6191d0}
.s2-steps li>div{font-size:16px;line-height:1.5;color:var(--deep)}
.s2-steps li>div p+p{margin-top:2px}
.s2-steps strong{font-weight:700}
.s2-steps ul{margin:6px 0 0;padding-left:1.15em;list-style:disc;font-size:14px;color:#6e6458}
.s2-hl{padding:0 4px;background:linear-gradient(#bcf67c,#bcf67c) 0 calc(100% - .19em)/100% .75em no-repeat} /* 브랜드 라임(lime/500): 기존 배경 높이의 1/2, 글자 아래 끝에 맞춤 */
.s2-steps ul li{display:list-item;padding:0;background:none;border-radius:0}
/* 일정 「세션」 칸: 세션 종류는 선 알약, 옆에 날짜 */
.s2-sess{margin-top:8px;display:flex;flex-direction:column;gap:6px}
.s2-sess p{display:flex;align-items:center;gap:8px;margin:0}
.s2-steps li>div .s2-sess p+p{margin-top:0}
.s2-pill{display:inline-flex;align-items:center;justify-content:center;min-width:6.4em;box-sizing:border-box;padding:2px 10px;border:1px solid #6191d0;border-radius:99px;color:#6191d0;font-size:13px;line-height:1.4;white-space:nowrap}
.s2-sub{margin-top:8px!important;font-size:14px;color:#6e6458}
@media (max-width:760px){
  .hero-facts{font-size:14px}
  .s1-stories,.s2-schedule{padding:64px 0}
  .s1-stories h2,.s2-schedule h2{font-size:26px;letter-spacing:-1px}
  .s2-steps li{grid-template-columns:3.3em minmax(0,1fr);padding:12px 14px}
  .s2-steps ul,.s2-sub{font-size:12.5px}
  .s2-pill{font-size:12px;padding:1px 8px}
  .s2-steps .s2-lab,.s2-steps li>div{font-size:14px}
}

/* ───────── 4주 리듬(E안): 일주일 타임라인 + 같은 크기 카드 ───────── */
.routine-cards{display:none}
/* 4주 독서 일정표 = 일주일 요약: 탭 4개(매일 읽기·정기 세션·주말 미션·완독) → 요일 동그라미(월~일 + ★완독)에서 해당 날이 색으로 켜지고 → 아래 카드 한 장 */
/* 4주 독서 일정표 = 일주일 요약. PC: 왼쪽 탭 4개(세로) | 오른쪽 요일 동그라미 + 설명 카드. 휴대폰: 탭 → 요일 → 카드 세로 */
.routine{--rt-daily:#fff1c9;--rt-session:#bcf67c;--rt-weekend:#f2c12e;--rt-fin:#f28a4a}
.rt-week{margin-top:44px;display:grid;grid-template-columns:240px minmax(0,1fr);gap:20px;align-items:stretch}
.rt-tabs{display:grid;grid-template-rows:repeat(4,minmax(0,1fr));gap:10px}
.rt-tab{padding:14px 12px;border:2px solid rgba(255,255,255,.7);border-radius:99px;background:none;color:#fff;font:inherit;font-size:20px;font-weight:700;line-height:1.2;white-space:nowrap;cursor:pointer;transition:background-color .25s,border-color .25s,color .25s}
.rt-right{display:flex;flex-direction:column;gap:16px;min-width:0}
.rt-days{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:10px}
.rt-dd{aspect-ratio:1;max-height:76px;justify-self:center;width:100%;max-width:76px;display:grid;place-items:center;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.16);color:rgba(255,255,255,.7);font:inherit;font-size:18px;font-weight:500;cursor:pointer;transition:background-color .25s,color .25s}
.rt-star{font-size:20px}
/* 색 = 탭 이름 그대로: 매일 읽기 크림 · 정기 세션 라임 · 주말 미션 노랑 · 완독 주황 */
.routine[data-pick="daily"] .rt-tab[data-rt="daily"],.routine .rt-dd.is-on[data-lit="daily"]{background:var(--rt-daily);border-color:var(--rt-daily);color:var(--deep)}
.routine[data-pick="session"] .rt-tab[data-rt="session"],.routine .rt-dd.is-on[data-lit="session"]{background:var(--rt-session);border-color:var(--rt-session);color:var(--deep)}
.routine[data-pick="weekend"] .rt-tab[data-rt="weekend"],.routine .rt-dd.is-on[data-lit="weekend"]{background:var(--rt-weekend);border-color:var(--rt-weekend);color:var(--plum)}
.routine[data-pick="fin"] .rt-tab[data-rt="fin"],.routine .rt-dd.is-on[data-lit="fin"]{background:var(--rt-fin);border-color:var(--rt-fin);color:var(--plum)}
.rt-dd.is-on{font-weight:700;animation:rt-dd-pop .45s cubic-bezier(.34,1.56,.64,1) both;animation-delay:calc(var(--i,0) * 40ms)}
@keyframes rt-dd-pop{0%{scale:.7}100%{scale:1}}
.routine [data-rt][role="button"]:focus-visible{outline:3px solid #fff;outline-offset:3px}
/* 탭 글자는 화면에 들어올 때 차례로, 누를 때 다시 팝 */
.rt-t{display:block}
.js .rt-week .rt-t{opacity:0;scale:.6}
.js .rt-week.is-revealed .rt-t{animation:rt-pop .5s cubic-bezier(.34,1.56,.64,1) both}
.js .rt-week.is-revealed .rt-tab:nth-child(1) .rt-t{animation-delay:calc(var(--d,0ms) + 300ms)}
.js .rt-week.is-revealed .rt-tab:nth-child(2) .rt-t{animation-delay:calc(var(--d,0ms) + 420ms)}
.js .rt-week.is-revealed .rt-tab:nth-child(3) .rt-t{animation-delay:calc(var(--d,0ms) + 540ms)}
.js .rt-week.is-revealed .rt-tab:nth-child(4) .rt-t{animation-delay:calc(var(--d,0ms) + 660ms)}
.js .rt-week.is-revealed [data-rt] .rt-t.is-repop{animation:rt-repop .5s cubic-bezier(.34,1.56,.64,1) both;animation-delay:0s}
@keyframes rt-repop{0%{opacity:0;scale:.6}60%{opacity:1}100%{opacity:1;scale:1}}
@keyframes rt-pop{0%{opacity:0;scale:.6}60%{opacity:1}100%{opacity:1;scale:1}}
/* 카드 네 장을 같은 칸에 겹쳐 두고 고른 것만 보인다 → 가장 긴 카드 높이로 고정돼 탭을 바꿔도 섹션 높이가 변하지 않는다 */
.rt-cards{flex:1;display:grid}
.rt-card{grid-area:1/1;background:#fbf9f5;color:var(--deep);border-radius:24px;padding:28px 32px;display:flex;flex-direction:column;justify-content:center;gap:14px}
.js .routine .rt-card{visibility:hidden;opacity:0;translate:0 10px;transition:opacity .35s var(--ease-out),translate .35s var(--ease-out),visibility 0s .35s}
.js .routine .rt-card.is-on{visibility:visible;opacity:1;translate:0 0;transition:opacity .4s var(--ease-out),translate .4s var(--ease-out),visibility 0s}
@media(prefers-reduced-motion:reduce){.js .rt-week .rt-t{opacity:1;scale:1;animation:none!important}.rt-dd.is-on{animation:none}.js .routine .rt-card{translate:none}}
.rt-card h3{font-size:24px;line-height:1.3;letter-spacing:-.8px}
.rt-card ul{display:flex;flex-direction:column;gap:6px;padding-left:1.15em;list-style:disc;font-size:17px;line-height:1.5}
@media (max-width:760px){
  .rt-week{margin-top:28px;grid-template-columns:1fr;gap:14px}
  .rt-tabs{grid-template-rows:none;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
  .rt-tab{padding:10px 2px;font-size:13px;border-width:1.5px}
  .rt-right{gap:14px}
  .rt-days{gap:5px}
  .rt-dd{font-size:13px}
  .rt-star{font-size:14px}
  .rt-card{padding:20px;border-radius:18px;justify-content:flex-start}
  .rt-card h3{font-size:19px}
  .rt-card ul{font-size:14px}
}

/* ───────── HSO 재구성(토니 10/24 정본 기반) 초안 스타일 ───────── */
.hero-copy:has(.h1-plain){width:min(960px,92vw);gap:28px}
.hero-cat{font-size:18px;font-weight:700;color:var(--wine);letter-spacing:-.5px}
/* 1기 배치 제목 + 분류 줄 + 4줄 설명: PC에서 버튼이 히어로 밖으로 밀리지 않게 */
@media (min-width:1200px){.hero:has(.hero-cat):not(:has(.h1-plain)){height:1160px}.hero-copy:has(.hero-cat):not(:has(.h1-plain)){top:160px;gap:32px}}
.hero h1.h1-plain{display:flex;flex-direction:column;align-items:center;gap:6px;font-size:68px;letter-spacing:-2.6px}
.hero h1.h1-plain>span{margin:0;grid-area:auto;justify-self:auto}
.hero-copy:has(.h1-plain)>p:not(.hero-cat):not(.hero-facts){font-size:21px;text-wrap:balance}
.hero-sub{font-size:17px;font-weight:500;color:var(--wine);text-decoration:underline;text-underline-offset:4px;margin-top:-12px}
.s1-lead{font-size:18px;line-height:1.5;color:var(--plum-2)}
.s1-note{margin-top:-4px;font-size:14px;color:var(--plum-2);opacity:.8}
/* 1기 이야기: < > 로 이야기 3개를 넘기고, 이야기 안의 캡처는 저절로 바뀜 */
.s1-carousel{position:relative;margin-top:40px;width:min(960px,100%);display:grid;grid-template-columns:48px minmax(0,1fr) 48px;align-items:center;gap:24px}
.s1-viewport{display:grid}
.s1-story{grid-area:1/1;margin:0;display:grid;grid-template-columns:396px minmax(0,1fr);gap:48px;align-items:center;text-align:left;opacity:0;visibility:hidden;transition:opacity .35s var(--ease-out),visibility .35s}
.s1-story.is-active{opacity:1;visibility:visible}
.s1-photos{position:relative;aspect-ratio:3/4;border-radius:20px;overflow:hidden;background:#fff;box-shadow:0 1px 2px rgba(47,36,22,.12)}
.s1-photos:has(img){background:none;box-shadow:none} /* 사진(투명 배경 PNG)이 들어가면 흰 바탕·그림자 없이 */
.s1-photo{position:absolute;inset:0;display:grid;place-items:center;padding:16px;border:2px dashed rgba(47,36,22,.25);border-radius:inherit;opacity:0;transition:opacity .6s var(--ease-out)}
.s1-photo.is-on{opacity:1}
.s1-photo:has(img){border:0;padding:0}
.s1-photo img{width:100%;height:100%;object-fit:cover}
.s1-photo span{font-size:14px;line-height:1.5;color:var(--ink-3,#8f8577);text-align:center}
.s1-story figcaption{display:flex;flex-direction:column;gap:10px}
.s1-num{font-size:14px;font-weight:700;letter-spacing:.04em;color:var(--wine)}
.s1-story figcaption b{font-size:28px;line-height:1.35;letter-spacing:-1px;color:var(--deep);word-break:keep-all}
.s1-story figcaption span:last-child{font-size:16px;line-height:1.5;color:var(--plum-2);word-break:keep-all}
.s1-nav{width:48px;height:48px;padding:0;border:0;border-radius:50%;background:rgba(0,0,0,.12);color:#fff;display:grid;place-items:center;cursor:pointer;transition:translate .2s var(--ease-out)}
.s1-nav:hover{translate:0 -2px}
.s1-nav:focus-visible{outline:3px solid var(--wine);outline-offset:3px}
.s1-next svg{rotate:180deg}
@media (max-width:760px){
  .s1-carousel{margin-top:28px;grid-template-columns:1fr;gap:0}
  /* 버튼은 사진 위 좌우 끝, 사진(폭 100%·3:4) 세로 가운데 */
  /* 버튼은 화면 좌우 끝에서 12px(=섹션 안쪽 여백 16px - 4px), 54px(1.5배). 사진에 걸쳐도 되므로 사진 크기는 줄이지 않는다 */
  .s1-nav{position:absolute;z-index:2;top:calc(min(330px, 100vw - 32px) * 2 / 3);translate:0 -50%;width:54px;height:54px}
  .s1-nav svg{width:30px;height:30px}
  .s1-nav:hover{translate:0 -50%}
  .s1-prev{left:-4px}
  .s1-next{right:-4px}
  .s1-story{grid-template-columns:1fr;gap:20px;text-align:center}
  .s1-photos{width:min(330px,100%);justify-self:center}
  .s1-story figcaption b{font-size:20px}
  .s1-story figcaption span:last-child{font-size:14px}
  .s1-lead{font-size:15px}
  .s1-note{font-size:12.5px}
}
@media(prefers-reduced-motion:reduce){.s1-story,.s1-photo,.s1-nav{transition:none}}
.mech{background:var(--surface);padding:110px 0}
.mech .inner{width:min(1120px,calc(100% - 32px));margin:auto;display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px}
.mech-eyebrow{font-size:16px;font-weight:700;color:var(--wine)}
.mech h2{font-size:40px;line-height:1.25;letter-spacing:-1.6px;color:var(--deep)}
.mech-loop{margin:36px 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:8px 4px;counter-reset:l}
.mech-loop li{display:flex;align-items:center;gap:4px;font-size:16px;font-weight:500;color:var(--deep)}
.mech-loop li span,.mech-loop li{padding:0}
.mech-loop li::before{counter-increment:l;content:counter(l);display:grid;place-items:center;width:24px;height:24px;border-radius:99px;background:var(--wine);color:var(--lime);font-size:13px;font-weight:700;margin-right:4px}
.mech-loop li:not(:last-child)::after{content:"→";margin:0 8px;color:var(--ink-3,#8f8577)}
.mech-cols{margin-top:36px;width:100%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;text-align:left}
.mech-col{background:#fff;border-radius:18px;padding:28px 26px;display:flex;flex-direction:column;gap:10px;color:var(--deep)}
.mech-who{font-size:15px;font-weight:500;color:var(--wine)}
/* 카드 오른쪽 위 장식(Figma 5774:90438, 휴대폰 시안 비율 그대로). 위치는 카드 오른쪽·위 모서리 기준 */
.mech-col{position:relative}
.mech-deco{position:absolute;inset:0;pointer-events:none}
.mech-deco>span{position:absolute;display:block}
.mech-deco img{display:block;width:100%;height:100%;object-fit:cover}
.md-app{right:-8px;top:8px;width:62px;height:62px;rotate:5deg}
.md-star{right:27px;top:8px;width:55px;height:55px}
.md-tulip{right:-11px;top:17px;width:52px;height:52px}
.md-av{overflow:hidden;border-radius:50%}
.md-av img{position:absolute;max-width:none}
.md-av-a{right:31px;top:10px;width:36px;height:37px}.md-av-a img{left:0;top:-50.83%;width:100%;height:175.01%}
.md-av-b{right:49px;top:41px;width:24px;height:24px}.md-av-b img{left:-45.94%;top:-32.81%;width:223.81%;height:223.81%}
.md-av-c{right:69px;top:-4px;width:27px;height:27px}
.md-av-d{right:138px;top:0;width:17px;height:17px}
.md-av-e{right:97px;top:8px;width:20px;height:20px}.md-av-e img{left:0;top:-123.59%;width:125.71%;height:223.85%}
.md-av-f{right:9px;top:37px;width:24px;height:24px}
.md-av-g{right:-5px;top:17px;width:28px;height:28px}
/* 카드가 나타난 뒤 장식이 하나씩 「팝」: 살짝 커졌다 제자리(0.42s), 60ms 간격 */
@keyframes md-pop{0%{opacity:0;scale:.3}70%{opacity:1;scale:1.08}100%{opacity:1;scale:1}}
.js .mech-deco>span{opacity:0;scale:.3}
.js .mech-col.is-revealed .mech-deco>span{animation:md-pop .42s cubic-bezier(.34,1.4,.64,1) forwards;animation-delay:calc(var(--d,0ms) + 220ms + var(--i,0) * 60ms)}
.mech-deco>span:nth-child(2){--i:1}.mech-deco>span:nth-child(3){--i:2}.mech-deco>span:nth-child(4){--i:3}
.mech-deco>span:nth-child(5){--i:4}.mech-deco>span:nth-child(6){--i:5}.mech-deco>span:nth-child(7){--i:6}
@media(prefers-reduced-motion:reduce){.js .mech-deco>span{opacity:1;scale:1;animation:none!important}}
.mech-col h3{font-size:24px;line-height:1.25;letter-spacing:-1px}
.mech-col ul{display:flex;flex-direction:column;gap:6px;padding-left:1.15em;list-style:disc;font-size:17px;line-height:1.5}
.mech-line{margin-top:28px;font-size:22px;font-weight:700;color:var(--deep);letter-spacing:-.8px}
.q-books{margin:28px 0 0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;width:min(760px,100%)}
.q-books a{display:flex;align-items:center;gap:14px;padding:12px 16px 12px 12px;background:rgba(255,255,255,.75);border-radius:14px;text-align:left;color:var(--deep)}
.q-books img{width:44px;height:64px;object-fit:cover;border-radius:4px;flex:none}
.q-books span{display:flex;flex-direction:column;gap:4px}
.q-books b{font-size:16px;line-height:1.4}
.q-books em{font-style:normal;font-size:14px;color:var(--wine)}
.final-sub{margin-top:14px;font-size:18px;line-height:1.6;opacity:.9}
html[data-mode="alert"] .mech{display:none}
@media (max-width:760px){
  .hero h1.h1-plain{font-size:clamp(30px,8.8vw,40px);letter-spacing:-1.4px;white-space:normal}
  .hero-copy:has(.h1-plain){width:100%;gap:20px}
  .hero-copy:has(.h1-plain)>p:not(.hero-cat):not(.hero-facts){font-size:16px}
  .hero-cat{font-size:14px}
  .hero-sub{font-size:15px;margin-top:-6px}
  .mech{padding:64px 0}
  .mech h2{font-size:clamp(22px,calc(7vw - 2px),28px)} /* 줄마다 한 줄로 고정, 기존보다 2px 작게 해 여유를 둠 */
  .mech-loop li{font-size:14px}
  .mech-cols{grid-template-columns:1fr;gap:10px}
  .mech-col{padding:20px}
  .mech-col h3{font-size:20px}
  .mech-col ul{font-size:15px}
  .mech-line{font-size:17px}
  .q-books{grid-template-columns:1fr}
  .final-sub{font-size:15px}
}

/* 선정 도서: 20권 서가 + 누른 책의 질문 카드 */
.books{height:auto;padding-bottom:120px}
.books .books-inner{width:min(1120px,calc(100% - 32px));margin:0 auto}
.shelf{position:relative;z-index:1;width:min(1120px,calc(100% - 32px));margin:56px auto 0;display:grid;grid-template-columns:auto minmax(0,1fr);gap:40px;align-items:start}
.shelf-grid{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(7,88px);gap:18px 14px}
.shelf-book{position:relative;display:block;width:88px;aspect-ratio:88/130;padding:0;border:0;border-radius:0;background:#e4dccd;cursor:pointer;opacity:.45;box-shadow:0 1px 2px rgba(47,36,22,.12);transition:translate .25s var(--ease-out),scale .25s var(--ease-out),opacity .25s var(--ease-out)}
.shelf-book img{width:100%;height:100%;object-fit:cover;border-radius:inherit}
.shelf-book:hover{translate:0 -3px;opacity:.75}
.shelf-book[aria-pressed="true"]{z-index:2;translate:0;scale:1.5;opacity:1}
.shelf-book:focus-visible{outline:3px solid var(--wine);outline-offset:4px}
/* 말풍선: 폭·높이 고정(질문 2줄 자리), 질문 글자 크기는 20권 중 가장 긴 질문이 2줄에 들어가도록 script.js가 한 번 정함 */
.shelf-card{--qmax:26px;position:sticky;top:96px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:14px;padding:28px;background:rgba(255,255,255,.8);border-radius:20px;color:var(--deep);text-align:center}
.shelf-card::after{content:"";position:absolute;right:44px;bottom:-15px;width:22px;height:16px;background:inherit;clip-path:polygon(0 0,100% 0,100% 100%)}
.shelf-card-q{width:100%;font-size:var(--qfs,var(--qmax));font-weight:700;line-height:1.38;letter-spacing:-.035em;white-space:pre;height:calc(var(--qlines,2) * 1.38em);display:flex;align-items:center;justify-content:center} /* 줄은 원고의 줄바꿈(\n)대로만 */
.shelf-card-t{color:var(--wine)}
.shelf-card-meta{font-size:15px;color:#8f8577}
.shelf-card.is-swapping .shelf-card-q,.shelf-card.is-swapping .shelf-card-meta{opacity:0;translate:0 6px}
.shelf-card-q,.shelf-card-meta{transition:opacity .22s var(--ease-out),translate .22s var(--ease-out)}
@media(max-width:1199px){
  .shelf{grid-template-columns:1fr;gap:24px}
  .shelf-card{position:relative;top:auto;order:-1;margin-bottom:12px}
  .shelf-grid{grid-template-columns:repeat(7,minmax(0,1fr))}
  .shelf-book{width:100%}
}
@media(max-width:760px){
  .books{padding-bottom:72px}
  .shelf{margin-top:36px;gap:18px}
  .shelf-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:14px 10px}
  .shelf-card{--qmax:19px;gap:10px;padding:18px;border-radius:16px}
  .shelf-card::after{right:32px;bottom:-12px;width:18px;height:13px}
  .shelf-card-meta{font-size:13px}
}
@media(prefers-reduced-motion:reduce){.shelf-book,.shelf-card-q,.shelf-card-meta{transition:none}}

/* 공감 섹션: 질문이 두 줄로 늘어 겹치던 것 — PC도 위에서 아래로 흐르게 */
@media(min-width:768px){
  .fit{position:relative;height:auto;padding:88px 0 112px;overflow:hidden}
  .fit-inner{height:auto}
  .fit-q,.fit-lines,.fit-answer{position:static}
  .fit-lines{margin-top:28px;white-space:normal}
  .fit-answer{margin:80px 0 0 auto;width:min(1040px,100%)}
  .fit-answer-title{font-size:48px;letter-spacing:-1.9px}
  .fit-answer .fit-answer-body-2{margin-top:0}
}
@media(min-width:768px) and (max-width:1199px){.fit-answer-title{font-size:38px;letter-spacing:-1.4px}}
.s2-schedule li b:not(:first-child){font-weight:700}

/* 신청 완료 화면 — 입금 안내(모집 모드에서만) */
html[data-mode="alert"] [data-show-recruit]{display:none}
.apply-pay{margin-top:20px;padding:20px;border-radius:16px;background:rgba(255,245,214,.06);border:1px solid var(--line)}
.apply-pay-rows{display:grid;gap:14px;margin:0}
.apply-pay-rows>div{display:grid;grid-template-columns:72px 1fr;gap:12px;align-items:baseline}
.apply-pay-rows dt{font-size:14px;color:var(--ink-3)}
.apply-pay-rows dd{margin:0;font-size:17px;line-height:1.45;letter-spacing:-.4px;color:var(--ink)}
.apply-pay-rows b{font-weight:700}
.apply-pay-sub{display:block;font-size:14px;color:var(--ink-2)}
.apply-pay-copy{width:100%;margin-top:18px;padding:13px 16px;border:1px solid rgba(255,245,214,.3);border-radius:99px;background:none;font:inherit;font-size:15px;font-weight:700;color:var(--ink);cursor:pointer}
.apply-pay-note{margin-top:14px;font-size:13px;line-height:1.55;color:rgba(255,245,214,.8)}
.apply-pay-note a{color:inherit}
.apply-pay-note u{text-decoration:underline;text-underline-offset:3px}
.nowrap{white-space:nowrap}
.mo-br{display:none}
/* 휴대폰: 단어 중간에서 끊지 않고, 마지막 줄에 한두 글자만 남지 않게 */
@media (max-width:760px){
  main :is(p,h2,h3,li,summary,figcaption b):not(.fit-lines li){word-break:keep-all;text-wrap:pretty}
  .mo-br{display:inline}
  /* 히어로 소개: 네 줄이 각각 한 줄로 들어가도록 문단 글자 크기를 화면 폭에 맞춤(가장 긴 줄 폭 ≈ 글자크기×17.2) */
  .hero-copy>p.hero-desc{font-size:min(17px, calc((100vw - 48px) / 17.6))}
}
/* 모든 섹션 제목 행간 130% (id로 지정해 섹션별 규칙보다 우선). 히어로 제목은 네 줄을 겹쳐 배치하는 디자인이라 제외 */
:is(#stories-title,#fit-title,#mech-title,#books-title,#journey-title,#routine-title,#founder-title,#schedule-title,.s2-gate-title,#benefits-title,#faq-title,#final-title),
:is(#books-title,#benefits-title) > span{line-height:1.3}
/* 휴대폰: 모든 섹션의 eyebrow·제목·서브 텍스트 폭 = 화면 폭 - 좌우 24px */
@media (max-width:760px){
  :is(.hero-cat,.hero-desc,.hero-facts,
      .s1-eyebrow,#stories-title,.s1-lead,.s1-note,
      .mech-eyebrow,#mech-title,
      .journey-title > p,#journey-title,
      .founder-label,#founder-title,
      #schedule-title,
      #benefits-title,.benefits-lead,.benefits-note,
      #faq-title,
      #final-title,.final-sub,.final-note){box-sizing:border-box;width:calc(100vw - 48px);max-width:none;margin-left:auto;margin-right:auto}
  /* 왼쪽 정렬 섹션: 섹션 여백(20px·16px)에서 24px까지 안쪽으로 */
  :is(#fit-title,.fit-lines,.fit-answer,.routine-eyebrow,#routine-title,.routine-sub,.routine-note){box-sizing:border-box;width:calc(100vw - 48px);max-width:none;margin-left:4px}
  :is(.books-head,.books-copy){box-sizing:border-box;width:calc(100vw - 48px);max-width:none;margin-left:8px}
  .journey-title{width:auto;max-width:none;margin-left:8px;margin-right:8px}
  /* 참가 혜택 소개: 가장 긴 셋째 줄(16px 기준 ≈ 글자크기×20.6)이 한 줄로 들어가도록 */
  .benefits-title p.benefits-lead{font-size:min(16px, calc((100vw - 48px) / 21.5))}
  /* 참가 혜택 카드: 내용을 가운데 정렬해 좌우 여백을 같게, 줄은 원고의 줄바꿈대로만 끊고
     가장 긴 줄(본문 17px 기준 ≈ 글자크기×16.7, 서브 14px 기준 ≈ ×18.8)이 카드 안에 들어가도록 크기를 화면 폭에 맞춤.
     카드 안쪽 폭 = 화면 폭 - 96px(패널 32px×2 + 카드 안쪽 16px×2) */
  .benefit-list li{align-items:center;text-align:center}
  .benefit-list li>div{align-items:center}
  .benefit-list strong{white-space:nowrap;font-size:min(17px, calc((100vw - 96px) / 17.2))}
  .benefit-sub{white-space:nowrap;font-size:min(14px, calc((100vw - 96px) / 19.3))}
}