@font-face{font-family:"Leckerli One";font-weight:400;font-display:swap;src:url(/static/06c20f872ec962ef/bookmatch/fonts/leckerli-sub.woff2) format("woff2")}
@font-face{font-family:Bookk;font-weight:100 500;font-display:swap;src:url(/static/e18822c1644ab711/bookmatch/fonts/bk-Light.woff2) format("woff2")}
@font-face{font-family:Bookk;font-weight:600 900;font-display:swap;src:url(/static/7041ab167e7d7602/bookmatch/fonts/bk-Bold.woff2) format("woff2")}
:root{
  color-scheme:light;
  --wine:#520c36;--plum:#39132a;--plum-2:#401830;--deep:#28101e;--night:#170710;
  --lime:#bcf67c;--lime-100:#f3fce8;--leaf:#8df466;--leaf-700:#77be28;--leaf-900:#457114;--glow:#b2e5a0;
  --pink:#ab2473;--pink-soft:#cd72a7;--berry:#6c1549;--mauve:#984276;--lav:#dadae9;
  --surface:#f4f4f6;--paper:#fafafb;
  --tex-paper:url(/static/6970771b00609534/assets/80d400721aff87f001a83dd8c6cf7849e1d65b0a.webp);
  --tex-crumple:url(/static/fc2389c92999c41c/assets/79dec09667f113db3f2ccb338caaf0c9027ea1ca.webp);
  --tex-crumple-2:url(/static/c0f8a68371e13e70/assets/bookmatch/image-c0f8a68371e13e70.webp);
  --ease:cubic-bezier(.22,1,.36,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--deep);overflow-x:clip}
body{margin:0;background:var(--deep);color:var(--plum);font-family:Bookk,"Apple SD Gothic Neo",sans-serif;font-weight:300;
  -webkit-font-smoothing:antialiased;overflow-x:clip;word-break:keep-all;overflow-wrap:break-word}
body.on-quiz{background:var(--plum-2)}
h1,h2,h3,p,ul,dl,dd{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}
button{font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid var(--lime);outline-offset:3px}
[hidden]{display:none!important}
.inner{width:min(720px,calc(100% - 40px));margin:auto}
.nw{white-space:nowrap}
.sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.u{text-decoration:underline;text-underline-offset:3px}
.rit{display:inline-block;width:1.42em;height:.66em;line-height:.66em;overflow:hidden;vertical-align:baseline;margin-right:.12em;font-style:normal;-webkit-text-fill-color:transparent;background:currentColor;-webkit-mask:url('data:image/svg+xml,%3Csvg width="41" height="19" viewBox="0 0 41 19" fill="none" xmlns="http://www.w3.org/2000/svg"%3E %3Cg id="rit. wordmark" clip-path="url%28%23clip0_4783_37833%29"%3E %3Cpath id="Vector" d="M40.9458 16.5456C40.8184 17.8207 39.6213 18.9174 38.2971 18.9174C36.9979 18.9174 36.0044 17.8207 36.1318 16.5456C36.2847 15.1939 37.431 14.0973 38.7298 14.0973C40.0797 14.0973 41.0732 15.1939 40.9458 16.5456Z" fill="%231C1C1E"/%3E %3Cpath id="Vector_2" d="M34.4908 11.6891L35.179 15.2851C34.1601 16.9938 31.9365 18.7027 29.6697 18.7027C26.435 18.7027 24.8813 16.5094 25.4926 13.398L26.3586 8.83286H23.8782L24.5234 5.56846H26.7406L27.5934 2.12534L29.8727 2.12549L30.3573 5.56846C30.3573 5.56846 33.1466 5.56846 34.9337 5.56846C34.7182 6.73374 34.3065 8.83286 34.3065 8.83286H29.6951L28.8546 13.1429C28.5745 14.6221 29.415 15.0812 30.4338 15.0812C31.8346 15.0812 33.1642 13.8144 34.4908 11.6891Z" fill="%231C1C1E"/%3E %3Cpath id="Vector_3" d="M22.0531 12.8537L23.8784 14.7091C23.3478 17.1 21.6489 19 19.2548 19C16.4276 19 15.4852 16.9597 16.0965 14.2309L17.2426 9.0537H14.6447L15.123 5.78927H21.2252V5.79578L19.5349 13.5678C19.3312 14.5114 19.2293 15.5315 20.1462 15.5315C21.0122 15.5315 21.722 14.0269 22.0531 12.8537ZM22.2602 2.01476C22.2602 3.36644 21.0631 4.38659 19.7387 4.38659C18.5416 4.38659 17.5992 3.54496 17.5992 2.37181C17.5992 1.02013 18.7963 0 20.1207 0C21.3178 0 22.2602 0.841612 22.2602 2.01476Z" fill="%231C1C1E"/%3E %3Cpath id="Vector_4" d="M9.02071 18.6937H1.19915L1.77142 15.4294H4.09438L5.01128 10.5327C5.1641 9.74211 5.11317 8.90048 4.34905 8.90048C3.45762 8.90048 2.82081 10.031 2.38782 11.2552L0 9.92692C0.738617 7.50408 2.8718 5.40655 5.29147 5.40655C6.76873 5.40655 7.99127 6.12065 7.99127 7.82936C7.99127 8.28841 7.91486 8.84949 7.68564 9.69109H7.96583C8.42428 7.82936 9.49401 5.48306 12.2448 5.48306C13.0344 5.48306 13.807 5.90164 14.0617 6.20767L13.2657 10.9895H12.0698C11.9679 10.2244 11.659 9.53807 10.7421 9.53807C9.31574 9.53807 8.24598 10.8897 7.94035 12.6495L7.45641 15.4294H9.56378L9.02071 18.6937Z" fill="%231C1C1E"/%3E %3C/g%3E %3Cdefs%3E %3CclipPath id="clip0_4783_37833"%3E %3Crect width="41" height="19" fill="white"/%3E %3C/clipPath%3E %3C/defs%3E %3C/svg%3E') center/contain no-repeat;mask:url('data:image/svg+xml,%3Csvg width="41" height="19" viewBox="0 0 41 19" fill="none" xmlns="http://www.w3.org/2000/svg"%3E %3Cg id="rit. wordmark" clip-path="url%28%23clip0_4783_37833%29"%3E %3Cpath id="Vector" d="M40.9458 16.5456C40.8184 17.8207 39.6213 18.9174 38.2971 18.9174C36.9979 18.9174 36.0044 17.8207 36.1318 16.5456C36.2847 15.1939 37.431 14.0973 38.7298 14.0973C40.0797 14.0973 41.0732 15.1939 40.9458 16.5456Z" fill="%231C1C1E"/%3E %3Cpath id="Vector_2" d="M34.4908 11.6891L35.179 15.2851C34.1601 16.9938 31.9365 18.7027 29.6697 18.7027C26.435 18.7027 24.8813 16.5094 25.4926 13.398L26.3586 8.83286H23.8782L24.5234 5.56846H26.7406L27.5934 2.12534L29.8727 2.12549L30.3573 5.56846C30.3573 5.56846 33.1466 5.56846 34.9337 5.56846C34.7182 6.73374 34.3065 8.83286 34.3065 8.83286H29.6951L28.8546 13.1429C28.5745 14.6221 29.415 15.0812 30.4338 15.0812C31.8346 15.0812 33.1642 13.8144 34.4908 11.6891Z" fill="%231C1C1E"/%3E %3Cpath id="Vector_3" d="M22.0531 12.8537L23.8784 14.7091C23.3478 17.1 21.6489 19 19.2548 19C16.4276 19 15.4852 16.9597 16.0965 14.2309L17.2426 9.0537H14.6447L15.123 5.78927H21.2252V5.79578L19.5349 13.5678C19.3312 14.5114 19.2293 15.5315 20.1462 15.5315C21.0122 15.5315 21.722 14.0269 22.0531 12.8537ZM22.2602 2.01476C22.2602 3.36644 21.0631 4.38659 19.7387 4.38659C18.5416 4.38659 17.5992 3.54496 17.5992 2.37181C17.5992 1.02013 18.7963 0 20.1207 0C21.3178 0 22.2602 0.841612 22.2602 2.01476Z" fill="%231C1C1E"/%3E %3Cpath id="Vector_4" d="M9.02071 18.6937H1.19915L1.77142 15.4294H4.09438L5.01128 10.5327C5.1641 9.74211 5.11317 8.90048 4.34905 8.90048C3.45762 8.90048 2.82081 10.031 2.38782 11.2552L0 9.92692C0.738617 7.50408 2.8718 5.40655 5.29147 5.40655C6.76873 5.40655 7.99127 6.12065 7.99127 7.82936C7.99127 8.28841 7.91486 8.84949 7.68564 9.69109H7.96583C8.42428 7.82936 9.49401 5.48306 12.2448 5.48306C13.0344 5.48306 13.807 5.90164 14.0617 6.20767L13.2657 10.9895H12.0698C11.9679 10.2244 11.659 9.53807 10.7421 9.53807C9.31574 9.53807 8.24598 10.8897 7.94035 12.6495L7.45641 15.4294H9.56378L9.02071 18.6937Z" fill="%231C1C1E"/%3E %3C/g%3E %3Cdefs%3E %3CclipPath id="clip0_4783_37833"%3E %3Crect width="41" height="19" fill="white"/%3E %3C/clipPath%3E %3C/defs%3E %3C/svg%3E') center/contain no-repeat}

/* 헤더 — 화면 배경 위에 옅게 어두운 띠 */
.site-header{background:rgba(16,6,12,.2);padding:14px 0}
.header-inner{display:flex;align-items:center;gap:10px}
.wordmark{width:30px;height:14px;color:#fff}
.wordmark svg{display:block;width:100%;height:100%}
.header-link{margin-left:auto;display:inline-flex;align-items:center;gap:4px;font-size:11px;line-height:1.4;letter-spacing:-.02em;color:#fff}
.header-link .arr{display:inline-block;transition:transform .25s var(--ease)}
.header-link:hover .arr{transform:translateX(3px)}

/* 동그라미 글자 제목(완독매칭테스트 · 책소개 · 같은갈래 · 이런책도) */
.dots{display:flex;flex-wrap:wrap;gap:2px}
.dots span{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;font-size:16px;font-weight:700;line-height:1;letter-spacing:-.04em}
.dots.pink span{background:var(--pink);color:var(--leaf)}
.dots.leaf span{background:var(--leaf);color:var(--plum)}

/* 버튼 */
.btn-lime{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:0;background:var(--lime);color:var(--wine);padding:16px 40px;
  font-size:18px;font-weight:700;line-height:1.22;letter-spacing:-.04em;transition:opacity .2s}
.btn-lime.pill{border-radius:99px}
.btn-lime:disabled{opacity:.35;cursor:not-allowed}
.tri{font-size:.8em}

/* 01 인트로 */
.intro{position:relative;overflow:hidden;background:var(--deep);padding:56px 0 64px;color:var(--lime);min-height:calc(100svh - var(--hh,43px));display:flex;flex-direction:column;justify-content:center}
.intro-inner{position:relative;z-index:1}
.intro .dots span{width:22px;height:22px;font-size:12px;background:var(--lime);color:var(--plum)}
.intro .dots span.o{background:none;box-shadow:inset 0 0 0 1px var(--lime);color:var(--lime);font-weight:300}
.intro h1{margin-top:18px;font-size:64px;line-height:1.3;letter-spacing:-.045em;color:var(--lime)}
.intro .lede{margin-top:20px;font-size:16px;line-height:1.55;letter-spacing:-.04em;color:var(--lime-100)}
.intro .lede b{font-weight:700}
.btn-col{display:flex;flex-direction:column;align-items:flex-start;gap:14px;margin-top:32px}
.text-link{padding:2px 0;font-size:13px;line-height:1.4;letter-spacing:-.02em;color:var(--lime);text-decoration:underline;text-underline-offset:3px}
@media (max-width:359px){.intro h1{font-size:54px}}

/* 인트로·결과 배경 도형 — 랜딩 1섹션과 같은 도형·좌표(1440 캔버스), 모바일은 절반 크기 */
.pattern{position:absolute;top:0;left:50%;width:1440px;height:1280px;transform:translateX(-50%) scale(.5);transform-origin:top center;pointer-events:none}
.pattern .s{position:absolute;pointer-events:auto;cursor:pointer;opacity:0;scale:.6;transition:opacity .45s var(--ease),scale .5s cubic-bezier(.34,1.56,.64,1)}
.pattern .s.on{opacity:1;scale:1}
.pattern .s.pop{scale:1.12;transition-duration:.18s}
.pattern.still .s{opacity:1;scale:1;pointer-events:none;cursor:default}
.pattern span.s img{width:100%;height:100%}
.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}

/* 02 질문 */
.quiz{background:var(--plum-2);padding:32px 0 64px;min-height:calc(100svh - var(--hh,43px))}
.quiz-card{background:var(--paper) var(--tex-paper) center bottom/cover no-repeat;padding:28px 22px 26px;color:var(--plum)}
.steps{display:flex;gap:8px}
.steps span{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--deep);color:#fff;font-size:15px;font-weight:700;line-height:1;opacity:.1;transition:opacity .35s}
.steps span.done{opacity:.35}
.steps span.now{opacity:1;color:var(--lime)}
.quiz h2{margin-top:28px;font-size:22px;line-height:1.44;letter-spacing:-.04em;color:var(--plum)}
.quiz .hint{margin-top:10px;font-size:12px;line-height:1.5;letter-spacing:-.04em;color:rgba(64,24,48,.75)}
.opts{display:flex;flex-direction:column;gap:8px;margin-top:24px}
.qopt{display:flex;flex-direction:column;gap:4px;width:100%;text-align:left;border:0;padding:16px;background:var(--paper);color:var(--plum);
  transition:background-color .2s,color .2s,opacity .2s,transform .2s var(--ease)}
.qopt b{font-size:14px;line-height:1.4;letter-spacing:-.02em}
.qopt small{font-size:11px;line-height:1.4;letter-spacing:-.02em;color:var(--mauve)}
.qopt:hover{transform:translateX(4px)}
.qopt.sel{background:var(--wine);color:var(--lime)}
.qopt.sel small{color:rgba(243,252,232,.75)}
.qopt.dim{opacity:.35;cursor:not-allowed}
.qopt.dim:hover{transform:none}
.quiz-nav{display:flex;align-items:center;justify-content:space-between;margin-top:28px}
.text-btn{border:0;background:none;padding:8px 2px;font-size:15px;font-weight:700;letter-spacing:-.01em;color:var(--plum);text-decoration:underline;text-underline-offset:3px}
.qbody{will-change:transform,opacity}
.qopt.sel{animation:tap .28s cubic-bezier(.34,1.56,.64,1)}
@keyframes tap{0%{transform:scale(.98)}100%{transform:none}}

/* 03 결과 직전 */
.picking{background:var(--deep);min-height:calc(100svh - var(--hh,43px));display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px;color:var(--lime);padding:40px 20px}
.picking-shelf{display:flex;align-items:flex-end;gap:3px;height:120px}
.picking-shelf img{height:110px;width:auto;opacity:.35;transition:opacity .2s,transform .3s var(--ease)}
.picking-shelf img.lit{opacity:1;transform:translateY(-10px)}
.picking-text{font-size:17px;font-weight:700;letter-spacing:-.03em}
.picking-text:after{content:"";display:inline-block;width:1.2em;text-align:left;animation:dots 1s steps(4) infinite}
@keyframes dots{0%{content:""}25%{content:"."}50%{content:".."}75%{content:"..."}}

/* 04 결과 */
.result{background:var(--deep);color:var(--lime-100);padding-bottom:40px}
.rcol{position:relative;z-index:1;width:min(440px,calc(100% - 44px));margin:auto}
.r-top{position:relative;overflow:hidden;padding:40px 0 60px}
.pick-eyebrow .rit{margin-right:.04em}
.pick-eyebrow{text-align:center;font-size:13px;line-height:1.4;letter-spacing:-.04em;color:var(--pink-soft)}
.pick-title{margin-top:8px;text-align:center;font-size:32px;line-height:1.18;letter-spacing:-.04em;color:var(--lime-100)}
.pick-au{margin-top:8px;text-align:center;font-size:12px;line-height:1.4;letter-spacing:-.02em;color:rgba(244,244,246,.5)}
.cover-stage{position:relative;height:350px;margin-top:10px}
.glow{position:absolute;left:50%;top:50%;width:400px;height:300px;margin:-120px 0 0 -222px;border-radius:50%;background:var(--glow);filter:blur(50px);pointer-events:none}
.cover-wrap{position:absolute;left:50%;top:25px;width:200px;height:300px;margin-left:-100px}
.cover{width:200px;height:300px;box-shadow:4px 4px 10px rgba(40,16,30,.18);object-fit:cover}
.cover-ph{display:flex;flex-direction:column;justify-content:space-between;padding:26px 45px 22px 20px;background:var(--lime-100) var(--tex-paper) center/cover;color:var(--wine)}
.cover-ph b{font-size:22px;line-height:1.3;letter-spacing:-.04em}
.cover-ph span{font-size:12px;line-height:1.4;color:var(--plum);opacity:.7}
.cover-ph .rit{width:2.3em;height:1.07em;color:var(--wine);font-size:12px}
.stickers{position:absolute;left:165px;top:24px;display:flex;flex-direction:column;align-items:flex-start;gap:2px}
.stickers span{padding:2px 8px;background:var(--surface);color:var(--plum);font-size:13px;font-weight:700;line-height:1.5;letter-spacing:-.04em;white-space:nowrap}
.stickers span:first-child{margin-left:10px}
.quotes{position:relative;z-index:1;padding-top:8px;margin-top:8px}
.q-tag{width:251px;max-width:78%;padding:16px 20px 24px;background:var(--pink);text-align:center;font-size:14px;line-height:1.45;letter-spacing:-.04em;color:var(--lime)}
.q-ask{position:relative;width:251px;max-width:78%;margin:-12px 0 0 auto;padding:20px 24px;background:var(--deep);border:1px solid var(--lime-100);text-align:center}
.q-ask .label{font-size:11px;font-weight:700;line-height:1.4;letter-spacing:-.02em;color:rgba(255,255,255,.75)}
.q-ask .bigq{margin-top:10px;font-size:18px;font-weight:700;line-height:1.45;letter-spacing:-.04em;color:var(--lime)}
.r-actions{position:relative;z-index:1;padding-bottom:28px}
.r-actions .btn-lime{display:flex;width:100%;padding:16px 24px}
.r-sub{display:flex;justify-content:center;gap:12px;margin-top:12px;opacity:.8}
.r-sub button{border:0;background:none;padding:8px;font-size:13px;line-height:1.4;letter-spacing:-.02em;color:var(--lime);text-decoration:underline;text-underline-offset:3px}
/* 결과 등장 모션 — 화면에 들어올 때 .in 이 붙음 */
.rv{opacity:0;transition:opacity .6s ease,transform .7s var(--ease)}
.rv.up{transform:translateY(28px)}
.rv.left{transform:translateX(-32px)}
.rv.right{transform:translateX(32px)}
.rv.pop{transform:scale(.6);transition:opacity .3s ease,transform .55s cubic-bezier(.34,1.56,.64,1)}
.rv.cover{transform:translateY(80px) rotate(-6deg) scale(.92);transition:opacity .45s ease,transform 1s cubic-bezier(.34,1.35,.64,1)}
.rv.glow{transform:scale(.5);transition:opacity 1.4s ease,transform 1.4s var(--ease)}
.rv.in{opacity:1;transform:none}
/* 책 소개 — 밝은 종이 면 */
.r-about{background:#efeff1 var(--tex-crumple-2) center bottom/cover no-repeat;padding:48px 0;color:var(--plum)}
.peek-head{display:flex;flex-direction:column;gap:2px;padding-top:8px}
.peek-head .dots span{width:32px;height:32px;color:var(--lime-100)}
.dots.teal-d span{background:#006b6d}
.dots.teal span{background:#22babd}
.story{margin-top:16px;padding:12px 16px;background:rgba(82,12,54,.04);color:var(--wine)}
.story .label{font-size:13px;font-weight:700;line-height:1.4;letter-spacing:-.02em}
.story p+p{margin-top:10px;font-size:13px;line-height:1.4;letter-spacing:-.02em}
.story-note{margin-top:8px;font-size:12px;line-height:1.5;letter-spacing:-.02em;color:rgba(82,12,54,.7)}
.bubbles{position:relative;margin-top:16px;padding:16px 0 24px}
.bubble{font-size:15px;line-height:1.6;letter-spacing:-.03em}
.b-about{margin-right:32px;padding:24px 16px;background:var(--lav);color:var(--plum)}
.b-ellie{position:relative;margin:-12px 0 0 64px;padding:16px 12px 24px 16px;background:var(--wine);color:var(--lime-100)}
.handle{display:block;font-family:"Leckerli One",cursive;font-size:14px;line-height:1.4;font-weight:400;opacity:.5}
.b-ellie .handle{margin-top:6px;text-align:right;color:#fff}
.av{width:48px;height:48px}
.bubbles .av{position:absolute;right:0;bottom:0}
.b-tony{margin-top:24px;padding:12px 14px;background:var(--paper);color:var(--plum)}
.b-tony .who{display:flex;align-items:flex-end}
.b-tony .bubble{margin-top:10px}
.b-tony .go{display:block;margin:16px 0 0 auto;border:0;background:none;padding:0;font-size:13px;line-height:1.4;letter-spacing:-.02em;color:var(--leaf-700);text-decoration:underline;text-underline-offset:3px}
/* 같은 갈래 · 이런 책도 */
.r-more{background:rgba(137,197,115,.75);color:var(--lime-100)}
.more-head{background:var(--deep);padding:40px 0 32px}
.more-title{font-size:32px;line-height:1.4;letter-spacing:-.04em;color:var(--lime)}
.more-lede{margin-top:16px;font-size:15px;line-height:1.55;letter-spacing:-.02em;color:var(--lime-100);opacity:.8}
/* 지그재그 테두리 — 짙은 삼각형 9개 */
.zig{height:12px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='42' height='12' viewBox='0 0 42 12' preserveAspectRatio='none'%3E%3Cpolygon points='0,0 42,0 21,12' fill='%2328101e'/%3E%3C/svg%3E") left top/calc(100% / 9) 12px repeat-x}
.zig.up{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='42' height='12' viewBox='0 0 42 12' preserveAspectRatio='none'%3E%3Cpolygon points='0,12 42,12 21,0' fill='%2328101e'/%3E%3C/svg%3E")}
.more-block{padding:32px 0 40px}
.more-block .dots{padding-top:8px}
.more-desc{padding-top:16px;font-size:14px;line-height:1.5;letter-spacing:-.01em;color:var(--lime-100);opacity:.9}
.more-desc strong{font-weight:700}
.chips{display:flex;flex-wrap:wrap;gap:8px;padding-top:16px}
.chips span{padding:10px 14px;background:var(--leaf-900);font-size:15px;line-height:1.4;letter-spacing:-.02em;color:var(--lime-100)}
.dots.leaf span{color:#6e1c4d}
.alt-head{display:flex;align-items:center;justify-content:space-between;padding-top:8px}
.alt-head .dots{padding-top:0}
.alt-head a{font-size:12px;line-height:1.4;letter-spacing:-.02em;color:var(--leaf);text-decoration:underline;text-underline-offset:3px}
.alts{display:flex;flex-direction:column;gap:8px;padding-top:16px}
.alts .bk{background:rgba(250,250,251,.9);padding:16px 18px}
.alts .bk h3{color:#401730}

/* 책 카드(라인업 · 이런 책도 공통) */
.bk{color:var(--deep)}
.bk-au{font-size:10px;font-weight:700;line-height:1.5;letter-spacing:-.02em;color:rgba(40,16,30,.6)}
.bk h3{margin-top:3px;font-size:19px;line-height:1.3;letter-spacing:-.04em;color:var(--wine)}
.bk-tag{padding:8px 0;font-size:13px;line-height:1.5;letter-spacing:-.03em;color:var(--berry)}

/* 05 라인업 */
.books{background:var(--surface) var(--tex-crumple) center top/100% auto repeat-y;padding:64px 0 80px;color:var(--wine)}
.books h2{font-size:28px;line-height:1.25;letter-spacing:-.045em}
.books h2 .hl{display:inline-block;margin-top:2px;padding:0 10px;background:var(--wine);color:var(--lime)}
.books .lede{margin-top:14px;font-size:14px;line-height:1.5;letter-spacing:-.04em}
.books-link{display:inline-flex;align-items:center;gap:5px;margin-top:14px;font-size:15px;font-weight:700;line-height:1.4;letter-spacing:-.02em;text-decoration:underline;text-underline-offset:3px}
.books-link .arr{display:inline-block;transition:transform .25s var(--ease)}
.books-link:hover .arr{transform:translateX(3px)}
.shelf{display:flex;align-items:flex-end;gap:3px;margin-top:32px;padding:0 0 10px;overflow-x:auto;scrollbar-width:none;border-bottom:6px solid var(--plum)}
.shelf::-webkit-scrollbar{display:none}
.shelf-b{flex:0 0 auto;border:0;padding:0;background:none;transition:transform .25s var(--ease)}
.shelf-b:hover{transform:translateY(-10px)}
.shelf-spine{height:180px;width:auto}
.books-hint{margin-top:10px;font-size:12px;line-height:1.5;letter-spacing:-.02em;color:rgba(124,52,95,.6)}
.booklist{display:flex;flex-direction:column;gap:8px;margin-top:28px}
.booklist .bk{padding:18px 18px 16px;background:var(--paper);scroll-margin:80px}
.booklist .bk-tag{padding:10px 0}
.booklist .bk.flash{animation:flash 1.4s var(--ease)}
@keyframes flash{0%,35%{background:var(--lime)}100%{background:var(--paper)}}
.bk-step{padding:4px 0;font-size:11.5px;line-height:1.35;letter-spacing:-.02em;color:#457114}
.bk-step:before{content:"■ "}

/* 푸터 */
.site-footer{background:var(--deep);border-top:1px solid rgba(243,252,232,.08);padding:48px 0 56px;color:rgba(243,252,232,.62);font-size:13px;line-height:1.7;letter-spacing:-.01em}
.footer-brand{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.footer-brand svg{display:block;width:43px;height:auto}
.site-footer a{color:inherit}
.site-footer a:hover{color:var(--lime);text-decoration:underline}
.footer-bottom{display:flex;flex-wrap:wrap;gap:16px;margin-top:36px;padding-top:20px;border-top:1px solid rgba(243,252,232,.12);font-size:12px;line-height:1.6}
@media (min-width:1024px){.footer-brand svg{width:62px}}

/* 저장 이미지 미리보기(공유·다운로드가 막힌 환경에서만 뜸) */
.save-sheet{width:min(420px,calc(100% - 32px));max-height:calc(100% - 32px);border:0;padding:20px;background:var(--deep);color:var(--lime-100);text-align:center}
.save-sheet::backdrop{background:rgba(23,7,16,.7)}
.save-sheet img{width:100%;height:auto}
.save-sheet p{margin-top:12px;font-size:13px;line-height:1.5}
.save-sheet button{margin-top:12px}
.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translate(-50%,20px);padding:10px 16px;background:var(--lime-100);color:var(--deep);font-size:14px;font-weight:700;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s var(--ease);z-index:20}
.toast.on{opacity:1;transform:translate(-50%,0)}

/* 오픈 알림 시트 — ritread.com 폼 스타일 */
.download-sheet::backdrop{background:rgba(23,7,16,.6)}
.apply-terms a{color:var(--lime);text-underline-offset:2px}
/* ───────── 오픈 알림 신청 폼 (짙은 배경 + 라임 버튼) ───────── */
.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}
.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}
.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}
@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%)}}
@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}
}

.apply-preview-note{margin-top:14px;padding:10px 12px;border-radius:10px;background:rgba(188,246,124,.12);font-size:13px;line-height:1.5;color:var(--lime)}
.apply-book{display:flex;align-items:center;gap:12px;min-height:80px;margin-top:18px;padding:12px 14px;border-radius:12px;background:rgba(243,252,232,.08)}
.apply-book img{flex:0 0 auto;height:56px;width:auto}
.apply-book div{display:flex;flex-direction:column;gap:1px;min-width:0}
.apply-book b{display:block;font-size:17px;line-height:1.4;color:var(--ink);letter-spacing:-.5px}
.apply-book span{font-size:13px;line-height:1.5;color:var(--ink-2)}

.fade{animation:fade .45s var(--ease)}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* PC — 첫 화면은 랜딩 1섹션과 같은 무게로 */
@media (min-width:768px){
  .quiz-card{padding:40px}
  .site-header{padding:18px 0}
  .wordmark{width:38px;height:18px}
  .header-link{font-size:13px}
}
@media (min-width:1024px){
  .intro{padding:64px 0 72px}
  .intro-inner{width:min(1120px,calc(100% - 128px))}
  .intro .dots span{width:32px;height:32px;font-size:17px}
  .intro h1{margin-top:28px;font-size:clamp(72px,7vw,104px);line-height:1.2}
  .intro .lede{margin-top:28px;font-size:22px}
  .intro .btn-col{margin-top:48px;gap:22px}
  .intro .btn-lime{padding:20px 64px;font-size:24px}
  .intro .text-link{font-size:17px}
  .books h2{font-size:44px}
  .books .lede{font-size:17px}
}
/* 책등 시각은 그대로, 각 버튼의 충돌 없는 선택 폭은 44px로 확보한다. */
.shelf-b{min-width:44px;flex:0 0 auto;display:flex;align-items:flex-end;justify-content:center;touch-action:manipulation}
.header-link,.text-link,.books-link,.alt-head a{min-height:44px;display:inline-flex;align-items:center}
.r-sub button,.text-btn,.go{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}
.site-footer a{min-height:28px;display:inline-flex;align-items:center}
.apply-sheet,.save-sheet{overscroll-behavior:contain;max-height:min(92dvh,var(--sheet-height,92dvh))}
html:has(dialog[open]){overflow:hidden}
@media (prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}
 *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
 .rv{opacity:1;transform:none}
 .pattern .s{opacity:1;scale:1}
 .qopt:hover{transform:none}
}

.apply-form{overflow:visible}