@import"https://fonts.googleapis.com/css2?family=East+Sea+Dokdo&family=Nanum+Myeongjo:wght@400;700;800&family=Noto+Serif+KR:wght@300;500;700&display=swap";@font-face{font-family:JeongseonArirang;src:url(/fonts/%EC%A0%95%EC%84%A0%EC%95%84%EB%A6%AC%EB%9E%91%EC%B2%B4TTF.ttf) format("truetype");font-weight:400;font-style:normal}:root{--bg-paper: #fcfaf2;--ink-black: #1a1a1a;--ink-grey: #5a5a5a;--seal-red: #8a2323;--img-w: 815px;--aspect-ratio: 1216 / 832;--header-aspect: 1500 / 600}*{margin:0;padding:0;box-sizing:border-box}body{background:var(--bg-paper);color:var(--ink-black);font-family:Nanum Myeongjo,"Noto Serif KR",serif;overflow-x:hidden;background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0IiBoZWlnaHQ9IjQiPgo8cmVjdCB3aWR0aD0iNCIgaGVpZ2h0PSI0IiBmaWxsPSIjZmNmYWYyIi8+CjxyZWN0IHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9IiNlOGU0ZGMiLz4KPC9zdmc+)}#root{display:flex;flex-direction:column;min-height:100vh}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:var(--bg-paper)}::-webkit-scrollbar-thumb{background:var(--ink-grey);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--ink-black)}@keyframes slideUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.fade-enter{opacity:0}.fade-enter-active{opacity:1;transition:opacity .5s ease-in}.fade-exit{opacity:1}.fade-exit-active{opacity:0;transition:opacity .5s ease-in}.btn-reset{background:none;border:none;cursor:pointer;font-family:inherit}.slash-container{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:50;display:flex;align-items:center;justify-content:center}.slash-svg{position:absolute;width:150%;height:30%;overflow:visible}.slash-path{mix-blend-mode:difference;opacity:0;transform-origin:center}.slash-container.active .slash-path{filter:drop-shadow(0 0 10px rgba(255,255,255,.9)) drop-shadow(0 0 20px rgba(200,220,255,.6))}.main-header{width:100%;max-width:1500px;aspect-ratio:var(--header-aspect);margin:0 auto 40px;background-image:url(https://fyd.fjwm.uk/875.png);background-size:100% 100%;background-position:center;border-bottom:3px solid var(--ink-black);display:flex;justify-content:flex-end;align-items:flex-end;padding:0 4% 4% 0;position:relative;box-shadow:0 5px 20px #0000001a}.main-header nav{display:flex;gap:20px;flex-wrap:wrap;justify-content:flex-end}.main-header nav button{background:none;border:none;color:#000;font-family:JeongseonArirang,cursive;font-size:clamp(1.8rem,4.5vw,3.5rem);font-weight:400;cursor:pointer;transition:all .3s cubic-bezier(.25,.46,.45,.94);position:relative;text-shadow:-2px -2px 0 #fff,2px -2px 0 #fff,-2px 2px 0 #fff,2px 2px 0 #fff,0px 0px 10px rgba(255,255,255,.8)}.main-header nav button:after{content:"";position:absolute;width:0;height:5px;bottom:0;left:0;background:var(--seal-red);transition:.3s ease-out;box-shadow:0 0 5px #fff}.main-header nav button:hover{color:var(--seal-red);transform:scale(1.1) translateY(-5px)}.main-header nav button.active:after{width:100%}@media(max-width:1100px){.main-header{border-bottom-width:2px;padding-bottom:1%}.main-header nav button{font-size:clamp(1.4rem,4.5vw,3.5rem)}}.prologue-scene{width:100%;max-width:var(--img-w);height:auto;display:block;margin:40px auto 30px;border:2px solid var(--ink-black);box-shadow:0 10px 30px #00000026;transition:transform .5s ease}.prologue-scene:hover{transform:scale(1.02)}.prologue-text{text-align:center;padding:20px 20px 80px;font-size:1.6rem;line-height:2.6;color:var(--ink-black);animation:fadeIn 2s ease-in}.prologue-title{font-size:2.2rem;font-weight:900;color:var(--seal-red);display:block;margin-bottom:20px}.section-active{display:block;width:100%;max-width:var(--img-w);margin:0 auto}.anime-slideUp{animation:slideUp .8s ease-out}.char-item{width:100%;margin-bottom:120px;text-align:center;padding:0 15px}.img-container{width:100%;max-width:var(--img-w);aspect-ratio:var(--aspect-ratio);margin:0 auto;overflow:hidden;border:4px solid transparent;outline:2px solid var(--ink-black);box-shadow:0 10px 30px #00000026;cursor:pointer;transition:.4s cubic-bezier(.25,1,.5,1);background:#fff;position:relative}.img-container:hover{transform:scale(1.02);outline-offset:4px;outline-color:var(--seal-red);box-shadow:0 20px 50px #8a232333}.img-container img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}.img-container:hover img{transform:scale(1.05)}.char-name{font-size:clamp(2rem,8vw,3.5rem);color:var(--ink-black);margin-top:20px;font-weight:800;letter-spacing:5px;display:inline-block;padding-bottom:5px;border-bottom:2px solid var(--ink-black);transition:color .3s}.char-item:hover .char-name{color:var(--seal-red);border-color:var(--seal-red)}.character-section{width:100%;max-width:var(--img-w);margin:0 auto}.sub-nav{display:flex;justify-content:center;gap:10px;margin-bottom:40px;flex-wrap:wrap}.sub-nav button{padding:8px 20px;background:var(--bg-paper);border:2px solid var(--ink-grey);color:var(--ink-grey);cursor:pointer;font:inherit;font-weight:700;transition:.3s;border-radius:4px}.sub-nav button:hover{border-color:var(--ink-black);color:var(--ink-black)}.sub-nav button.active{background:var(--ink-black);color:var(--bg-paper);border-color:var(--ink-black);box-shadow:0 4px 10px #0003}.list-container{display:flex;flex-direction:column;gap:20px}.modal-overlay{position:fixed;inset:0;background:#fcfaf2fa;z-index:3000;display:flex;flex-direction:column;overflow-y:auto;padding:40px 20px;animation:modalFadeIn .3s ease-out}.modal-overlay.fade-out{animation:modalFadeOut .3s ease-in forwards}.modal-body{margin:auto;display:flex;gap:30px;align-items:flex-start;width:100%;max-width:1200px;animation:modalSlideUp .4s ease-out}.modal-img-box{flex:1;border:5px solid var(--ink-black);min-width:0;background:#000;position:relative;box-shadow:0 20px 60px #0003;overflow:hidden}.modal-image{width:100%;height:100%;object-fit:cover;object-position:top center;display:block}.modal-side{width:380px;display:flex;flex-direction:column;gap:15px;flex-shrink:0}.modal-side h2{font-size:3.5rem;color:var(--ink-black);border-bottom:4px solid var(--ink-black);padding-bottom:5px}.state-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.state-grid button{padding:12px;background:var(--bg-paper);border:2px solid var(--ink-black);font:inherit;font-weight:700;cursor:pointer;transition:.2s}.state-grid button:hover{background:var(--ink-grey);color:#fff}.state-grid button.active{background:var(--seal-red);border-color:var(--seal-red);color:#fff;transform:scale(1.05)}.info-table{font-size:1.2rem;line-height:2;margin-top:15px;border-top:2px solid var(--ink-grey);padding-top:15px}.info-table b{color:var(--seal-red);margin-right:10px}.close-btn{position:absolute;top:20px;right:30px;font-size:4rem;cursor:pointer;color:var(--ink-grey);z-index:3100;transition:transform .3s}.close-btn:hover{transform:rotate(90deg);color:var(--ink-black)}@keyframes modalFadeIn{0%{opacity:0;-webkit-backdrop-filter:blur(0px);backdrop-filter:blur(0px)}to{opacity:1;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}}@keyframes modalFadeOut{0%{opacity:1;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}to{opacity:0;-webkit-backdrop-filter:blur(0px);backdrop-filter:blur(0px)}}@keyframes inkUnseal{0%{opacity:0;transform:scale(.85);clip-path:circle(0% at 50% 50%)}40%{opacity:1;transform:scale(1.02)}to{opacity:1;transform:scale(1);clip-path:circle(150% at 50% 50%)}}.modal-body{display:flex;gap:30px;align-items:flex-start;width:100%;max-width:1200px;animation:inkUnseal .7s cubic-bezier(.19,1,.22,1) forwards;transform-origin:center center;will-change:transform,clip-path}.fade-in-quick{opacity:0;animation:fadeIn .5s ease-out .3s forwards}@keyframes fadeIn{to{opacity:1}}@media(max-width:1100px){.modal-overlay{padding-top:60px}.modal-body{flex-direction:column;align-items:center}.modal-img-box{width:100%;max-width:800px}.modal-image{object-position:top center}.modal-side{width:100%;max-width:600px}}.constellation-chart-container{display:flex;justify-content:center;align-items:center;position:relative;-webkit-user-select:none;user-select:none}.constellation-svg{overflow:visible}.star-label-main{font-family:JeongseonArirang,serif;font-size:16px;font-weight:700;text-shadow:0 0 5px rgba(255,255,255,.9)}.star-label-sub{font-size:11px;font-weight:400;font-family:sans-serif;opacity:.8}.star-line-anim{stroke-dasharray:1000;stroke-dashoffset:1000;animation:drawConstellation 1.5s cubic-bezier(.22,1,.36,1) forwards .3s}.star-area-fill{opacity:0;animation:fadeInFill 1s ease-out forwards .8s}.star-point-anim{opacity:0;transform:scale(0);transform-origin:center;animation:popInStar .5s back-out forwards}@keyframes popInStar{0%{opacity:0;r:0}to{opacity:1}}@keyframes popInStar{0%{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}@keyframes drawConstellation{to{stroke-dashoffset:0}}@keyframes fadeInFill{to{opacity:1}}.cover{position:fixed;inset:0;background:var(--bg-paper);z-index:2000;display:flex;flex-direction:column;justify-content:center;align-items:center;cursor:pointer;transition:opacity 1.5s ease-in-out,transform 1.5s ease-in-out}.cover img{width:2432px;height:1664px;max-width:98vw;max-height:98vh;object-fit:contain;filter:contrast(1.1) sepia(.2);box-shadow:0 10px 50px #0000004d;transition:transform 3s ease}.cover:hover img{transform:scale(1.02)}.cover.fade-out{opacity:0;pointer-events:none}.slash-effect{position:absolute;inset:0;pointer-events:none;z-index:2001}
