.bb{position:relative;overflow-x:clip}.bb-anchor{scroll-margin-top:64px;position:absolute;top:0}.bb-wrap{max-width:1200px;margin-inline:auto;padding:40px 20px 72px;container:bb/inline-size}@media (min-width:640px){.bb-wrap{padding:56px 32px 96px}}.bb-title{font-family:var(--font-display);letter-spacing:-.045em;font-variation-settings:"opsz" 72;color:var(--color-ink);margin:0 0 18px;font-size:clamp(36px,10vw,60px);font-weight:800;line-height:.95}.bb-binder{grid-template-columns:minmax(0,1fr) auto;align-items:start;display:grid}.bb-book{z-index:1;background:linear-gradient(150deg,#ffffff80,#fff0 42%),#e7dfd1;border-radius:20px;grid-area:1/1;padding:10px 10px 12px 26px;position:relative;box-shadow:inset 0 0 0 1px #17152a0f,0 1px #17152a0a,0 30px 60px -34px #17152a73}.bb-book:before{content:"";pointer-events:none;border:1.5px dashed #17152a21;border-radius:16px;position:absolute;inset:5px}.bb-rings{z-index:4;pointer-events:none;position:absolute;inset:10px auto 12px 7px}.bb-rings>span{background:linear-gradient(#fdfdfe 0%,#d4d5dc 38%,#8f919c 62%,#e8e9ee 100%);border-radius:999px;width:30px;height:10px;margin-top:-5px;position:absolute;left:0;box-shadow:inset 0 0 0 1px #17152a24,0 2px 3px #17152a4d}.bb-rings>span:first-child{top:16%}.bb-rings>span:nth-child(2){top:50%}.bb-rings>span:nth-child(3){top:84%}.bb-stack{perspective:2400px;touch-action:pan-y;display:grid;position:relative}.bb-stack:before,.bb-stack:after{content:"";background:#fbf8f3;border-radius:8px;grid-area:1/1;box-shadow:0 0 0 1px #17152a12}.bb-stack:before{translate:4px 4px}.bb-stack:after{translate:2px 2px}.bb-page{--u:calc(100cqw / 340);z-index:1;aspect-ratio:100/150;transform-origin:0;backface-visibility:hidden;border-radius:8px;outline:none;grid-area:1/1;position:relative;container-type:inline-size}.bb-page[hidden]{display:none}.bb-page:focus-visible{outline:3px solid var(--color-ribbon);outline-offset:3px}@container bb (min-width:680px){.bb-page{--u:calc(100cqw / 1000);aspect-ratio:100/60}.bb-page .bb-it{--x:var(--dx);--y:var(--dy);--w:var(--dw);--r:var(--dr)}.bb-book{border-radius:24px;padding:14px 14px 16px 40px}.bb-book:before{border-radius:19px;inset:6px}.bb-rings{inset:14px auto 16px 10px}.bb-rings>span{width:44px;height:13px;margin-top:-6.5px}}.bb-sheet{border-radius:inherit;color:var(--pg-ink);background:radial-gradient(circle at 5px 16%, #17152a47 0 3.5px, transparent 4.5px), radial-gradient(circle at 5px 50%, #17152a47 0 3.5px, transparent 4.5px), radial-gradient(circle at 5px 84%, #17152a47 0 3.5px, transparent 4.5px), radial-gradient(#17152a09 .6px, transparent 1px) 0 0 / 7px 7px, var(--pg);position:absolute;inset:0;box-shadow:inset 0 0 0 1px #17152a0f,0 1px 2px #17152a1f}.bb-sheet[data-dark]{background:radial-gradient(circle at 5px 16%, #000000b3 0 3.5px, transparent 4.5px), radial-gradient(circle at 5px 50%, #000000b3 0 3.5px, transparent 4.5px), radial-gradient(circle at 5px 84%, #000000b3 0 3.5px, transparent 4.5px), radial-gradient(#ffffff0d .6px, transparent 1px) 0 0 / 7px 7px, var(--pg)}.bb-sheet[data-page=sarang]{background:radial-gradient(circle at 5px 16%, #17152a38 0 3.5px, transparent 4.5px), radial-gradient(circle at 5px 50%, #17152a38 0 3.5px, transparent 4.5px), radial-gradient(circle at 5px 84%, #17152a38 0 3.5px, transparent 4.5px), radial-gradient(#e4ded3 1px, transparent 1.4px) 0 0 / calc(var(--u) * 22) calc(var(--u) * 22), #fff}.bb-it{--x:var(--mx);--y:var(--my);--w:var(--mw);--r:var(--mr);left:calc(var(--x) * 1cqw);top:calc(var(--y) * 1cqw);width:calc(var(--w) * 1cqw);rotate:var(--r);position:absolute}.bb-label{width:max-content;font-size:max(12px, calc(var(--u) * 17));align-items:center;gap:.55em;margin:0;display:flex;rotate:-1.5deg}.bb-label-tape{background:var(--tape);color:var(--tape-ink);font:700 1em/1 var(--font-mono);letter-spacing:.2em;text-shadow:0 -1px #0000002e;clip-path:polygon(0 12%,4% 0,100% 0,97% 50%,100% 100%,0 100%);border-radius:2px;padding:.42em .75em .36em .85em;display:block;box-shadow:inset 0 1px #ffffff4d,inset 0 -1px #00000029,0 1px 2px #17152a4d}.bb-sheet[data-outline] .bb-label-tape{text-shadow:none;box-shadow:inset 0 0 0 1px #16181d,0 1px 2px #17152a33}.bb-sheet[data-page=ot6] .bb-label-tape{text-shadow:none}.bb-label-kr{font:600 .92em/1 var(--font-kr);opacity:.72}.bb-pocket{aspect-ratio:100/146;border-radius:calc(var(--u) * 9);box-shadow:inset 0 0 0 1px #ffffffbf, 0 0 0 1px #17152a12, 0 calc(var(--u) * 4) calc(var(--u) * 10) calc(var(--u) * -5) #17152a4d;background:#ffffff57;rotate:none}.bb-pocket[data-pocket=wide]{aspect-ratio:100/70}.bb-sheet[data-dark] .bb-pocket{box-shadow:inset 0 0 0 1px #fff3, 0 calc(var(--u) * 4) calc(var(--u) * 10) calc(var(--u) * -5) #000000b3;background:#ffffff14}.bb-pc{border-radius:calc(var(--u) * 7);rotate:var(--r);box-shadow:0 calc(var(--u) * 2) calc(var(--u) * 5) calc(var(--u) * -1) #17152a4d;transition:translate .24s var(--ease-card);background:#17152a14;position:absolute;inset:5.5% 6.5% 4.5%;overflow:hidden}.bb-pocket[data-pocket=wide] .bb-pc{inset:8% 5% 6.5%}.bb-pocket:after{content:"";z-index:1;border-radius:inherit;pointer-events:none;background:linear-gradient(#0000 0 12%,#ffffffe6 12% calc(12% + 1.5px),#ffffff1a calc(12% + 1.5px)),linear-gradient(118deg,#0000 38%,#ffffff5c 47%,#ffffff0f 55%,#0000 62%);position:absolute;inset:0}.bb-pocket[data-pocket=wide]:after{background:linear-gradient(#0000 0 16%,#ffffffe6 16% calc(16% + 1.5px),#ffffff1a calc(16% + 1.5px)),linear-gradient(118deg,#0000 38%,#ffffff5c 47%,#ffffff0f 55%,#0000 62%)}@media (hover:hover) and (pointer:fine){.bb-pocket:hover .bb-pc{translate:0 calc(var(--u) * -10)}}.bb-top>figure{transition:translate .24s var(--ease-card)}@media (hover:hover) and (pointer:fine){.bb-top:hover>figure{translate:0 calc(var(--u) * -5)}}.bb-tag{width:max-content;max-width:100%;margin:calc(var(--u) * 9) 0 0 50%;color:var(--color-ink);font:500 max(10.5px, calc(var(--u) * 12.5)) / 1.2 var(--font-mono);white-space:nowrap;clip-path:polygon(.75em 0,100% 0,100% 100%,.75em 100%,0 50%);filter:drop-shadow(0 1px 1.5px #17152a4d);background:#fff;padding:.45em .85em .45em 1.55em;display:block;position:relative;overflow:hidden;translate:-50%;rotate:-3deg}.bb-tag:before{content:"";background:var(--pg);border-radius:50%;width:.45em;height:.45em;margin-top:-.225em;position:absolute;top:50%;left:.6em;box-shadow:inset 0 0 0 1px #17152a4d}.bb-washi{height:calc(var(--u) * 24)}.bb-washi>*{display:block}.bb-note{padding:calc(var(--u) * 16) calc(var(--u) * 14) calc(var(--u) * 12);background:linear-gradient(160deg, #ffffff59, #fff0 30%), linear-gradient(to top left, #17152a0f, #17152a00 22%), var(--note);color:#2b2536;font:700 max(12px, calc(var(--u) * 19)) / 1.08 var(--font-hand);overflow-wrap:break-word;box-shadow:0 1px 1px #17152a14, 0 calc(var(--u) * 12) calc(var(--u) * 18) calc(var(--u) * -12) #17152a80;margin:0}.bb-note:before{content:"";top:calc(var(--u) * -9);width:calc(var(--u) * 58);height:calc(var(--u) * 17);background:repeating-linear-gradient(-45deg,#ffffff8c 0 4px,#ffffff40 4px 8px);position:absolute;left:50%;translate:-50%;rotate:-4deg;box-shadow:0 0 0 1px #17152a0a}.bb-note-by{text-align:right;opacity:.72;margin-top:.45em;font-size:.82em;display:block}.bb-stk{aspect-ratio:1}.bb-stk>svg{width:100%;height:100%}.bb-say{--say-bg:var(--tape);--say-ink:var(--tape-ink);background:var(--say-bg);width:max-content;color:var(--say-ink);font:800 max(11px, calc(var(--u) * 15)) / 1 var(--font-display);letter-spacing:-.01em;white-space:nowrap;box-shadow:0 0 0 calc(var(--u) * 3.5) #fff, 0 calc(var(--u) * 3) calc(var(--u) * 7) calc(var(--u) * 1) #17152a47;border-radius:999px;padding:.42em .8em .46em}.bb-sheet[data-page=koko] .bb-say{--say-bg:#141414;--say-ink:#fff}.bb-sheet[data-outline] .bb-say{box-shadow:inset 0 0 0 1px #16181d, 0 0 0 calc(var(--u) * 3.5) #fff, 0 calc(var(--u) * 3) calc(var(--u) * 7) calc(var(--u) * 1) #17152a2e}.bb-sheet[data-page=ot6] .bb-say{--say-bg:var(--color-ribbon);--say-ink:#fff}.bb-tabs{z-index:0;flex-direction:column;grid-area:1/2;gap:4px;margin:22px 0 0 -12px;display:flex;position:relative}.bb-tab{width:54px;height:46px;color:var(--color-ink);cursor:pointer;transition:translate .22s var(--ease-card), box-shadow .22s var(--ease-card), background-color .22s var(--ease-card);-webkit-tap-highlight-color:transparent;background:linear-gradient(90deg,#17152a0d,#17152a00 22%),#fffdf9;border:0;border-radius:0 13px 13px 0;align-items:center;gap:10px;padding:0 0 0 16px;display:flex;position:relative;translate:-6px;box-shadow:inset 0 0 0 1px #17152a1a,0 1px 2px #17152a24}.bb-tab[aria-selected=true]{background:var(--tab);color:var(--tab-ink);translate:0;box-shadow:inset 0 -1px #0000001f,0 6px 14px -6px #17152a8c}.bb-tab[data-outline][aria-selected=true]{box-shadow:inset 0 0 0 1px #16181d,0 6px 14px -6px #17152a73}.bb-tab:focus-visible{outline:3px solid var(--color-ribbon);outline-offset:2px;z-index:1}@media (hover:hover) and (pointer:fine){.bb-tab:not([aria-selected=true]):hover{translate:-2px}}.bb-tab-face{background:#ffffff4d;border-radius:999px;flex:none;width:30px;height:30px;position:relative;overflow:hidden;box-shadow:0 0 0 2px #fff,0 0 0 3px #17152a1a}.bb-tab-face>img{object-fit:cover;width:100%;height:100%;scale:1.55}.bb-tab-name{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;font:700 12.5px/1 var(--font-mono);letter-spacing:.08em;position:absolute;overflow:hidden}.bb-tab[data-ot6] .bb-tab-face{background:var(--color-gold);color:#17152a;place-items:center;display:grid}.bb-tab[data-ot6] .bb-tab-face>svg{width:72%;height:72%}@container bb (max-width:300px){.bb-tab{height:42px}}@container bb (min-width:680px){.bb-tabs{gap:6px;margin-top:34px}.bb-tab{width:64px;height:54px;padding-left:20px}.bb-tab-face{width:34px;height:34px}}@container bb (min-width:960px){.bb-tabs{gap:8px;margin-top:40px}.bb-tab{width:164px;height:58px;padding-left:24px}.bb-tab-name{clip-path:none;width:auto;height:auto;position:static}}.bb-page:after{content:"";z-index:5;border-radius:inherit;opacity:0;pointer-events:none;background:linear-gradient(90deg,#17152a0d,#17152a52);position:absolute;inset:0}.bb-stack[data-turning][data-dir=fwd] .bb-page[data-role=prev]{z-index:2;animation:bb-turn-away .6s var(--ease-flip) both}.bb-stack[data-turning][data-dir=fwd] .bb-page[data-role=prev]:after{animation:bb-shade .6s var(--ease-flip) both}.bb-stack[data-turning][data-dir=back] .bb-page[data-role=cur]{z-index:2;animation:bb-turn-in .6s var(--ease-flip) both}.bb-stack[data-turning][data-dir=back] .bb-page[data-role=cur]:after{animation:bb-shade .6s var(--ease-flip) reverse both}@keyframes bb-turn-away{0%{transform:rotateY(0)}to{transform:rotateY(-100deg)}}@keyframes bb-turn-in{0%{transform:rotateY(-100deg)}to{transform:rotateY(0)}}@keyframes bb-shade{0%{opacity:0}to{opacity:1}}.bb-page[data-role=cur] .bb-stk,.bb-page[data-role=cur] .bb-say{animation:bb-slap .38s var(--ease-card) both;animation-delay:calc(.22s + var(--i,0) * 90ms)}@keyframes bb-slap{0%{opacity:0;scale:1.3}55%{opacity:1;scale:.94}to{opacity:1;scale:1}}@media (prefers-reduced-motion:reduce){.bb-stack[data-turning][data-dir] .bb-page[data-role=prev]{z-index:1;animation:none}.bb-stack[data-turning][data-dir] .bb-page[data-role=cur]{z-index:2;animation:.2s ease-out both nb-fade-in}.bb-stack[data-turning] .bb-page:after{animation:none}.bb-page[data-role=cur] .bb-stk,.bb-page[data-role=cur] .bb-say{animation:.2s ease-out both nb-fade-in}.bb-tab,.bb-pc,.bb-top>figure{transition:none}}