*{box-sizing:border-box}html{font-size:16px}html,body{width:100%;height:100%;margin:0}body{color:#111;letter-spacing:0;background:#fff;font-family:Arial,Noto Sans KR,sans-serif;line-height:1.55;overflow:hidden}button,textarea{font:inherit}.site-header{z-index:1100;background:#fff;border:1px solid #111;grid-template-columns:1fr 1fr 1fr;align-items:center;width:100%;height:48px;display:grid;position:relative}.site-title{text-align:center;white-space:nowrap;cursor:pointer;color:inherit;font-size:16px;line-height:1;text-decoration:none}.menu-panel{background:#fff;border-right:1px solid #111;width:min(460px,85vw);height:100vh;padding:60px 32px 40px;transition:transform .25s;position:absolute;top:0;left:0;overflow-y:auto;transform:translate(-100%)}.menu-overlay.is-open .menu-panel{transform:translate(0)}.page-index{flex-direction:column;display:flex}.page-index a{color:#111;grid-template-columns:45px 1fr;padding:10px 0;font-size:14px;text-decoration:none;transition:color .15s;display:grid}.menu-about-text{color:#888;font-size:10px}.page-index a:hover{color:#888}.site-logo{padding-left:20px;font-size:16px;font-weight:400;line-height:1}.site-title{text-align:center;font-size:16px;line-height:1}.site-author{justify-self:end;padding-right:20px;font-size:16px;font-weight:400;line-height:1}.exhibition{background:#fff;border:1px solid #111;border-top:0;width:100vw;height:calc(100vh - 48px);display:flex;position:relative;overflow:hidden}.history,.demo{background:#fff;flex-shrink:0;height:100%;overflow:hidden auto}.side-menu{background:#fff;border-right:1px solid #111;flex-direction:column;flex-shrink:0;width:20%;height:100%;padding:20px;display:flex;overflow:hidden auto}.side-menu .menu-about{text-align:right;margin-top:auto}.history{background:#fff;flex-shrink:0;width:60%;height:100%;overflow-y:auto;container-type:inline-size}.demo{background:#fff;flex-shrink:0;width:20%;height:100%;overflow-y:auto}.open-demo-button{color:#fff;cursor:pointer;z-index:1200;background:#111;border:1px solid #111;border-radius:0;padding:8px 11px;position:fixed;top:62px;right:16px}.open-demo-button:hover{color:#111;background:#fff}.open-demo-button[hidden]{display:none}.divider{cursor:col-resize;z-index:1000;width:14px;height:100%;position:absolute;top:0;transform:translate(-50%)}.divider:before{content:"";background:#111;width:1px;height:100%;transition:width .15s;position:absolute;top:0;left:50%;transform:translate(-50%)}.divider-handle{opacity:0;background:#111;border-radius:999px;width:6px;height:64px;transition:opacity .15s,width .15s,height .15s;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.divider:hover:before,body.is-dragging .divider:before{width:3px}.divider:hover .divider-handle,body.is-dragging .divider-handle{opacity:1;width:9px;height:74px}.divider:after{content:"드래그하여 크기 조절";white-space:nowrap;color:#fff;opacity:0;pointer-events:none;background:#111;padding:5px 7px;font-size:10px;transition:opacity .15s,transform .15s;position:absolute;top:calc(50% - 52px);left:50%;transform:translate(-50%,5px)}.divider:hover:after,body.is-dragging .divider:after{opacity:1;transform:translate(-50%)}body.is-dragging{cursor:col-resize;-webkit-user-select:none;user-select:none}.intro{background:#fff;width:100%}.intro-content{width:100%;padding:72px 12%}.intro-title{margin:0 0 32px;font-size:16px;font-weight:400;line-height:1.5}.intro-text{margin:0;font-size:16px;font-weight:400;line-height:1.7}.back-to-top{color:#111;cursor:pointer;z-index:100;background:#fff;border:1px solid #111;padding:8px 12px;font-size:10px;line-height:1;position:absolute;bottom:60px;left:50%;transform:translate(-50%)}.back-to-top:hover{color:#fff;background:#111}.side-menu .menu-section h2{margin:0 0 20px;font-size:16px;font-weight:400}.side-menu .menu-section p{margin:0 0 16px;font-size:16px;line-height:1.55}.side-menu .page-index a,.side-menu .page-index a span{font-size:16px}.divider{z-index:1000;pointer-events:none;background:#111;width:1px;height:100%;position:absolute;top:0;left:80%}.divider-handle{display:none}.copyright{color:#777;white-space:nowrap;z-index:9999;opacity:1;visibility:visible;margin:0;font-size:10px;display:block;position:fixed;bottom:15px;left:50%;transform:translate(-50%)}.scroll-scene{background:#fff;height:300vh;position:relative}.scroll{background:#fff;width:100%;position:sticky;top:0}.top-roll,.roll-body,.roll-cap{display:none}.paper-window{z-index:10;width:80%;height:8vh;margin:6vh auto 0;transition:height .45s cubic-bezier(.22,.61,.36,1);position:relative;overflow:hidden}.paper{background:#fff;border-radius:2px;width:100%;min-height:1000px;position:absolute;top:0;left:0;box-shadow:inset 0 12px 20px #00000014,inset 0 -12px 20px #00000014}.paper-window:after{content:"";filter:blur(8px);opacity:0;pointer-events:none;z-index:20;background:#00000024;width:100%;height:16px;transition:opacity .2s;position:absolute;bottom:-8px;left:0}.paper-window:hover:after{opacity:1}.paper-content{padding:72px 12%}.paper-content p{margin:0 0 32px}.paper-end{z-index:25;opacity:0;background:#111;width:80%;height:1px;position:absolute;left:10%}.scroll-guide{white-space:nowrap;color:#fff;z-index:100;pointer-events:none;opacity:1;background:#aaa;padding:5px 7px;font-size:10px;line-height:1;transition:background .15s,opacity .2s,transform .2s;position:absolute;top:65%;left:50%;transform:translate(-50%,-50%)}.paper-window:hover .scroll-guide{color:#fff;background:#111}.scroll-guide.is-hidden{opacity:0;transform:translate(-50%,-50%)translateY(-5px)}.next-section{background:#fff;min-height:100vh;padding:15vh 10vw}.next-section p{font-family:sans-serif}.next-section h1{font-weight:400}.book{background:#fff;justify-content:center;align-items:center;width:100%;min-height:100vh;display:flex;overflow:hidden}.book-stage{background:#fff;flex-direction:column;justify-content:center;align-items:center;width:100%;height:80%;min-height:80vh;display:flex}.book-pages{perspective:1800px;width:min(900px,88%);height:min(580px,68vh);position:relative}.book-page{width:50%;height:100%;box-shadow:none;backface-visibility:hidden;cursor:pointer;background:#fff;border:1px solid #111;transition:transform 1s cubic-bezier(.65,0,.35,1);position:absolute;top:0;overflow:hidden}.page-prev,.page-left{transform-origin:100%;left:0}.page-prev{z-index:1}.page-left{z-index:5}.page-right,.page-next{transform-origin:0;left:50%}.page-right{z-index:6}.page-next{z-index:2}.page-right.turn-next{transform:rotateY(-180deg)}.page-left.turn-prev{transform:rotateY(180deg)}.page-content{box-sizing:border-box;flex-direction:column;justify-content:flex-start;width:100%;height:100%;padding:38px;display:flex}.page-content span{color:#777;margin-bottom:18px;font-size:11px}.page-content h1{margin:0 0 14px;font-size:24px;font-weight:400}.page-content p{margin:0;font-size:14px}.page-blank,.page-blank .page-content{color:#fff;background:#888}.book-pages:after{content:"";z-index:20;pointer-events:none;background:#111;width:1px;height:100%;position:absolute;top:0;left:50%}.book-hint{color:#111;margin:14px 0 0;font-size:11px}.book-cursor-guide{color:#fff;white-space:nowrap;z-index:100;pointer-events:none;opacity:0;background:#111;padding:5px 7px;font-size:10px;line-height:1;transition:opacity .15s,background .15s;position:absolute;top:0;left:0;transform:translate(12px,12px)}.book-pages.is-next-hover .book-cursor-guide,.book-pages.is-prev-hover .book-cursor-guide{opacity:1;background:#111}.css{color:#111;background:#fff;width:100%;min-height:100vh;padding:72px 72px 0;font-size:16px;position:relative}.css-content,.frame-experiment{width:100%}.frame-title{margin:0 0 24px;font-size:16px;font-weight:400;line-height:1.5}.frame{box-sizing:border-box;border:1px solid #0000;transition:border-color .15s;position:relative}.margin-frame{aspect-ratio:1.6;background:#eee;width:min(100%,520px);margin-left:auto;margin-right:auto;padding:44px}.border-frame{aspect-ratio:1.6;background:#ddd;width:100%;padding:36px}.padding-frame{aspect-ratio:1.6;background:#ccc;width:100%;padding:36px}.content-frame{aspect-ratio:1.6;background:#bbb;width:100%}.frame-label{color:#111;white-space:nowrap;pointer-events:none;margin:0;font-family:Arial,Noto Sans KR,sans-serif;font-size:16px;font-weight:400;line-height:1;position:absolute;top:12px;left:14px}.frame:hover:not(:has(.frame:hover)){border-color:#111}.frame-description{margin-top:48px;padding-bottom:20px;font-size:16px;line-height:1.7}.frame-description p{margin:0 0 28px}.frame-description p:last-child{margin-bottom:0}.css-break{background:#fff;width:100%;height:100%;font-family:sans-serif;position:relative;overflow:hidden}.css-break #page{background:#fff;width:100%;height:100%;position:relative}.css-break #canvas{width:100%;height:100%;display:block}.css-break #object{cursor:grab;background:#111;border-radius:50%;width:100px;height:100px;position:absolute;transform:translate(-50%,-50%)}.css-break #page>div{pointer-events:none}.history-break{background:#fff;height:auto;min-height:70vh}.css-break.history-break #page{background:#fff;height:70vh;min-height:70vh}.page-text{white-space:pre-line}.demo-break{background:#fff;width:100%;height:100%;font-family:sans-serif;position:relative;overflow:hidden}.demo-break .break-page{background:#fff;width:100%;height:100%;position:relative}.demo-break .break-canvas{z-index:1;width:100%;height:100%;display:block;position:relative}.demo-break .break-input{z-index:2;box-sizing:border-box;resize:none;color:#0000;caret-color:#0000;width:100%;height:100%;font:inherit;line-height:inherit;letter-spacing:inherit;scrollbar-width:none;background:0 0;border:0;outline:0;padding:0;position:absolute;inset:0;overflow:auto}.demo-break .break-input::-webkit-scrollbar{display:none}.demo-break .break-input::selection{background:0 0}.demo-break .break-caret{z-index:3;pointer-events:none;background:#111;width:1px;animation:1s step-end infinite break-caret-blink;position:absolute}@keyframes break-caret-blink{50%{opacity:0}}.demo-break .break-object{cursor:default;z-index:4;pointer-events:none;background:#111;border-radius:50%;width:70px;height:70px;position:absolute;transform:translate(-50%,-50%)}.demo-break .break-fixed-object{pointer-events:none}.demo-break{height:auto;min-height:100vh}.demo-break .break-page{height:150vh;min-height:150vh}