.sbb-reading-site .sbb-motion-section.e-con{padding:26px 0 48px}
.sbb-motion-showcase{width:100%}
.sbb-motion-heading{display:flex;justify-content:space-between;align-items:end;gap:24px;margin-bottom:27px}
.sbb-motion-heading .sbb-soft-eyebrow{font-size:10px;letter-spacing:.16em;margin:0 0 13px}
.sbb-motion-heading h2{font:500 clamp(27px,3vw,37px)/1.3 'Noto Sans KR',sans-serif!important;letter-spacing:-.045em;margin:0;color:#51483f}
.sbb-motion-toggle{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:44px;flex-shrink:0;padding:10px 13px;background:#fffdf8;color:#827361;border:1px solid #e4ddce;border-radius:30px;font:400 11px/1.4 'Noto Sans KR',sans-serif;cursor:pointer}
.sbb-motion-toggle[hidden]{display:none}
.sbb-motion-toggle:hover{background:#f5efe2;color:#5c4e3d}
.sbb-motion-play-glyph{display:none}.sbb-motion-toggle[aria-pressed=true] .sbb-motion-play-glyph{display:block}.sbb-motion-toggle[aria-pressed=true] .sbb-motion-pause-glyph{display:none}
.sbb-motion-card-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.sbb-motion-card{display:flex;flex-direction:column;background:#f2f5ed;border:1px solid #e6eadd;border-radius:24px;padding:16px 29px 27px;min-width:0;text-align:center;overflow:hidden}
.sbb-motion-card-pages{background:#fcf6e9;border-color:#eee4d0}.sbb-motion-card-space{background:#f0f5f6;border-color:#e0e8e9}
.sbb-motion-picture{width:100%;max-width:264px;margin:0 auto 3px;aspect-ratio:264/216;pointer-events:none}
.sbb-story-svg{display:block;width:100%;height:100%;overflow:visible}
.sbb-motion-card-copy{display:flex;flex-direction:column;align-items:center;flex:1;min-width:0}
.sbb-motion-card-copy h3{font:500 23px/1.35 'Noto Sans KR',sans-serif!important;letter-spacing:-.045em;margin:0 0 12px;color:#514c41}
.sbb-motion-card-copy>p{font-size:13px;line-height:1.8;color:#817563;margin:0 auto 13px;max-width:265px;min-height:47px}
.sbb-motion-card-copy>a{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:44px;font-size:12px;font-weight:500;color:#6d5a4b;text-decoration:none;border-bottom:1px solid #bfb6a2;line-height:1.4;padding:6px 0;margin-top:auto}
.sbb-motion-card-copy>a:hover{color:#3f4e35;border-color:#879b76}
.sbb-anim{transform-box:fill-box;transform-origin:center;animation-play-state:paused!important}
.sbb-motion-showcase.is-playing .sbb-anim{animation-play-state:running!important}
.sbb-motion-bed{animation:sbb-bed-breathe 6s ease-in-out infinite;transform-origin:center bottom}
.sbb-motion-moon{animation:sbb-night-moon 7s ease-in-out infinite}
.sbb-motion-cloud{animation:sbb-night-cloud 8s ease-in-out infinite}
.sbb-motion-shadow{animation:sbb-night-shadow 6s ease-in-out infinite}
.sbb-motion-twinkle{animation:sbb-night-star 4s ease-in-out infinite}
.sbb-motion-twinkle.sbb-delay{animation-delay:-2s}
.sbb-motion-book{animation:sbb-book-float 6.4s ease-in-out infinite}
.sbb-motion-page{animation:sbb-page-turn 6.4s ease-in-out infinite;transform-origin:left bottom}
.sbb-motion-heart{animation:sbb-heart-rise 6.4s ease-in-out infinite}
.sbb-motion-device{animation:sbb-device-rock 7s ease-in-out infinite;transform-origin:center bottom}
.sbb-motion-progress{animation:sbb-reading-progress 7s ease-in-out infinite;transform-origin:left center}
@keyframes sbb-bed-breathe{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-4px) scale(1.015)}}
@keyframes sbb-night-moon{0%,100%{transform:translateY(0) rotate(-5deg)}50%{transform:translateY(-8px) rotate(7deg)}}
@keyframes sbb-night-cloud{0%,100%{transform:translateX(-3px)}50%{transform:translateX(8px)}}
@keyframes sbb-night-shadow{0%,100%{transform:scaleX(1);opacity:.8}50%{transform:scaleX(.88);opacity:.5}}
@keyframes sbb-night-star{0%,100%{opacity:.5;transform:scale(.85) rotate(-4deg)}50%{opacity:1;transform:scale(1.13) rotate(6deg)}}
@keyframes sbb-book-float{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-5px) rotate(1deg)}}
@keyframes sbb-page-turn{0%,12%,100%{transform:skewY(0) scaleX(1)}48%,62%{transform:skewY(-8deg) scaleX(.58)}}
@keyframes sbb-heart-rise{0%,100%{transform:translateY(1px) scale(.95)}50%{transform:translateY(-7px) scale(1.07)}}
@keyframes sbb-device-rock{0%,100%{transform:rotate(-2deg)}50%{transform:translateY(-4px) rotate(2deg)}}
@keyframes sbb-reading-progress{0%,100%{transform:scaleX(.45)}55%,70%{transform:scaleX(1)}}
@media(min-width:768px) and (max-width:1024px){.sbb-motion-card{padding:14px 18px 23px}.sbb-motion-card-copy h3{font-size:21px!important}.sbb-motion-card-grid{gap:15px}}
@media(max-width:767px){
 .sbb-reading-site .sbb-motion-section.e-con{padding:14px 0 32px}
 .sbb-motion-heading{display:block;margin-bottom:19px}.sbb-motion-heading .sbb-soft-eyebrow{font-size:8px;margin-bottom:10px}.sbb-motion-heading h2{font-size:28px!important;max-width:310px}
 .sbb-motion-toggle{margin-top:13px;font-size:10px;padding:8px 12px;min-height:44px}
 .sbb-motion-card-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
 .sbb-motion-card{padding:12px 14px 17px;border-radius:20px}
 .sbb-motion-picture{max-width:150px;margin-bottom:8px}
 .sbb-motion-card-copy h3{font-size:17px!important;line-height:1.4!important;margin-bottom:9px}
 .sbb-motion-card-copy>p{font-size:11px;line-height:1.7;min-height:0;margin-bottom:4px}
 .sbb-motion-card-copy>a{font-size:11px;gap:5px;min-height:44px}
 .sbb-motion-card-roots{grid-column:span 2;display:grid;grid-template-columns:125px minmax(0,1fr);align-items:center;gap:10px;padding:14px 20px 15px 10px;text-align:left}
 .sbb-motion-card-roots .sbb-motion-picture{width:125px;margin:0}
 .sbb-motion-card-roots .sbb-motion-card-copy h3{font-size:20px!important}
 .sbb-motion-card-roots .sbb-motion-card-copy{align-items:flex-start}
 .sbb-motion-card-roots .sbb-motion-card-copy>p{min-height:0;margin-bottom:3px}
 .sbb-motion-card-roots .sbb-motion-card-copy>a{justify-content:flex-start}
}
@media(max-width:359px){
 .sbb-motion-card-roots{grid-template-columns:98px minmax(0,1fr);gap:8px;padding-right:13px}.sbb-motion-card-roots .sbb-motion-picture{width:98px}.sbb-motion-card-roots .sbb-motion-card-copy h3{font-size:18px!important}
 .sbb-motion-card{padding-inline:11px}.sbb-motion-card-copy h3{font-size:16px!important}.sbb-motion-card-copy>p{font-size:10px;min-height:0}.sbb-motion-card-copy>a{font-size:10px;gap:4px}
}
@media(prefers-reduced-motion:reduce){.sbb-motion-showcase .sbb-anim{animation:none!important;transform:none!important;opacity:1!important}.sbb-motion-toggle{display:none!important}}
