:root{font-family:"Noto Serif KR","Malgun Gothic",serif;color:#483c34;background:#f4eadc;font-synthesis:none}*{box-sizing:border-box}html,body{margin:0;min-width:320px;min-height:100%;overscroll-behavior:none}button{font:inherit}.app{position:relative;min-height:100svh;overflow:hidden;padding:24px clamp(16px,4vw,64px) 18px;background:radial-gradient(circle at 50% 18%,#fffaf2 0,transparent 36%),linear-gradient(145deg,#f8efe3,#ead8c7)}.app:before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.08;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E")}header,footer{position:relative;z-index:5;max-width:1200px;margin:auto}header{display:flex;align-items:end;justify-content:space-between;gap:24px}header p{position:absolute;top:-2px;left:2px;margin:0;font:700 10px Arial,sans-serif;letter-spacing:.26em;color:#b28670}h1{margin:22px 0 0;font-size:clamp(34px,4.7vw,64px);line-height:1;letter-spacing:-.06em;font-weight:500;color:#5c4438}header span{padding-bottom:5px;font-size:12px;color:#9a7e70}.stage{position:relative;z-index:2;height:min(73vh,720px);min-height:490px;display:grid;place-items:center;touch-action:pan-y}.shadow{position:absolute;width:min(78vw,980px);height:90px;bottom:8%;border-radius:50%;background:rgba(113,76,56,.2);filter:blur(24px)}.cover{position:relative;width:min(36vw,410px);aspect-ratio:.78;border:0;border-radius:8px 16px 16px 8px;cursor:pointer;color:#775947;background:linear-gradient(145deg,#f2cdb8,#dfad96 68%,#edc4af);box-shadow:-12px 25px 45px rgba(103,66,48,.26),inset 0 0 0 2px rgba(255,255,255,.38);transform:rotate(-1deg) translateZ(0);transition:transform .32s ease,filter .32s ease;will-change:transform}.cover:hover{transform:translateY(-6px) rotate(0)}.cover-inner{position:absolute;inset:11%;display:flex;flex-direction:column;align-items:center;justify-content:center;border:1px solid rgba(123,81,59,.35)}.cover small,.cover em{font:700 10px Arial,sans-serif;letter-spacing:.28em;font-style:normal}.cover strong{margin:23px 0;font-size:clamp(38px,5vw,62px);line-height:.88;letter-spacing:-.03em}.cover i{position:absolute;right:0;bottom:0;width:72px;height:72px;display:grid;place-items:end;padding:0 15px 10px 0;font-size:30px;font-style:normal;background:linear-gradient(135deg,transparent 49%,#fff0df 50%);border-radius:0 0 14px}.book{position:relative;width:min(86vw,1120px);aspect-ratio:1.65;max-height:650px;filter:drop-shadow(0 26px 30px rgba(103,66,48,.22));transform:translateZ(0);contain:layout paint style}.hidden{display:none}.book.opening{animation:openBook .48s cubic-bezier(.2,.8,.2,1) both}.book-base{position:absolute;inset:10px 7px -10px;border-radius:9px;background:#d7a188}.spread{position:absolute;inset:0;display:grid;grid-template-columns:1fr 1fr;opacity:0;pointer-events:none;transform:translate3d(0,0,0);will-change:transform,opacity}.spread.active{opacity:1;pointer-events:auto}.spread.anim-next-out{animation:nextOut .38s cubic-bezier(.22,.61,.36,1) both}.spread.anim-next-in{animation:nextIn .38s cubic-bezier(.22,.61,.36,1) both}.spread.anim-prev-out{animation:prevOut .38s cubic-bezier(.22,.61,.36,1) both}.spread.anim-prev-in{animation:prevIn .38s cubic-bezier(.22,.61,.36,1) both}.page{position:relative;overflow:hidden;color:#41372f;background:#fffaf0;box-shadow:inset 0 0 34px rgba(113,76,56,.09)}.page:first-child{border-radius:12px 2px 2px 12px}.page:last-child{border-radius:2px 12px 12px 2px}.page:after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.22;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cfilter id='a'%3E%3CfeTurbulence baseFrequency='.72' numOctaves='3' type='fractalNoise'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)' opacity='.11'/%3E%3C/svg%3E")}.mount{position:absolute;left:10%;right:10%;top:10%;height:57%;padding:11px 11px 38px;background:white;box-shadow:0 9px 20px rgba(96,69,53,.14)}.mount img{display:block;width:100%;height:100%;object-fit:cover}.tape{position:absolute;width:70px;height:18px;background:rgba(233,216,179,.7);left:calc(50% - 35px);top:-7px;transform:rotate(-2deg)}.caption{position:absolute;left:12%;right:12%;bottom:9%}.caption time{font:700 9px Arial,sans-serif;letter-spacing:.17em;color:#a18373}.caption h2{margin:7px 0 5px;font-size:clamp(18px,2vw,28px);font-weight:600;letter-spacing:-.04em}.caption p{margin:0;font-size:clamp(10px,1vw,13px);line-height:1.55;color:#89756a}.num{position:absolute;bottom:3.5%;font:700 9px Arial,sans-serif;color:#b29a8d}.page:first-child .num{left:6%}.page:last-child .num{right:6%}.spine{position:absolute;z-index:10;left:calc(50% - 28px);top:0;bottom:0;width:56px;pointer-events:none;background:linear-gradient(90deg,transparent,rgba(104,76,59,.1) 38%,rgba(80,55,41,.2) 49%,rgba(255,255,255,.5) 52%,transparent)}.corner{position:absolute;z-index:20;bottom:0;width:78px;height:78px;border:0;cursor:pointer;color:#7b5c4d;font-size:31px;background:transparent;transition:opacity .2s,transform .2s}.corner:disabled{opacity:0;pointer-events:none}.corner.left{left:0;text-align:left;padding:29px 0 0 15px;background:linear-gradient(225deg,transparent 49%,#f0dfca 50%);border-radius:0 0 0 12px}.corner.right{right:0;text-align:right;padding:29px 15px 0 0;background:linear-gradient(135deg,transparent 49%,#f0dfca 50%);border-radius:0 0 12px}.corner:hover{transform:scale(1.05)}.close{position:absolute;z-index:25;right:0;top:-42px;border:1px solid rgba(119,82,62,.18);border-radius:999px;padding:7px 12px;color:#896d5e;background:rgba(255,250,242,.78);backdrop-filter:blur(8px);cursor:pointer}footer{display:grid;grid-template-columns:auto minmax(100px,330px) auto;align-items:center;justify-content:center;gap:16px;color:#9a7c6c;font:700 10px Arial,sans-serif;letter-spacing:.12em}.progress{height:2px;background:rgba(127,89,69,.14)}.progress i{display:block;height:100%;width:0;background:#c48f76;transition:width .35s ease}footer button{border:0;background:none;color:#9a7c6c;cursor:pointer}@keyframes openBook{from{opacity:0;transform:scale(.84) translateY(18px)}to{opacity:1;transform:scale(1) translateY(0)}}@keyframes nextOut{to{opacity:0;transform:translate3d(-3.5%,0,0) scale(.995)}}@keyframes nextIn{from{opacity:0;transform:translate3d(3.5%,0,0) scale(.995)}to{opacity:1;transform:translate3d(0,0,0) scale(1)}}@keyframes prevOut{to{opacity:0;transform:translate3d(3.5%,0,0) scale(.995)}}@keyframes prevIn{from{opacity:0;transform:translate3d(-3.5%,0,0) scale(.995)}to{opacity:1;transform:translate3d(0,0,0) scale(1)}}@media(max-width:760px){.app{padding:18px 10px 14px}header{display:block}header p{top:0}h1{font-size:36px;max-width:330px;margin-top:20px}header span{display:none}.stage{height:74svh;min-height:520px}.cover{width:min(75vw,370px)}.book{width:94vw;aspect-ratio:.78;max-height:none}.spread{grid-template-columns:1fr;grid-template-rows:1fr 1fr}.page:first-child{border-radius:10px 10px 2px 2px}.page:last-child{border-radius:2px 2px 10px 10px}.mount{left:17%;right:17%;top:8%;height:57%;padding:8px 8px 27px}.caption{left:15%;right:15%;bottom:7%}.caption h2{font-size:17px}.caption p{font-size:9px}.spine{left:0;right:0;top:calc(50% - 23px);bottom:auto;width:100%;height:46px;background:linear-gradient(180deg,transparent,rgba(104,76,59,.11) 40%,rgba(80,55,41,.18) 49%,rgba(255,255,255,.45) 52%,transparent)}.corner{width:64px;height:64px;font-size:26px}.corner.left{bottom:50%;padding:22px 0 0 12px}.corner.right{padding:22px 12px 0 0}.close{top:-38px}.spread.anim-next-out{animation:mobileNextOut .34s ease both}.spread.anim-next-in{animation:mobileNextIn .34s ease both}.spread.anim-prev-out{animation:mobilePrevOut .34s ease both}.spread.anim-prev-in{animation:mobilePrevIn .34s ease both}footer{grid-template-columns:auto minmax(70px,150px) auto;gap:9px}}@keyframes mobileNextOut{to{opacity:0;transform:translate3d(0,-2.5%,0)}}@keyframes mobileNextIn{from{opacity:0;transform:translate3d(0,2.5%,0)}to{opacity:1;transform:translate3d(0,0,0)}}@keyframes mobilePrevOut{to{opacity:0;transform:translate3d(0,2.5%,0)}}@keyframes mobilePrevIn{from{opacity:0;transform:translate3d(0,-2.5%,0)}to{opacity:1;transform:translate3d(0,0,0)}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}