.menu-container{position:absolute;top:20px;left:50%;transform:translateX(-50%);z-index:100}.menu-top{display:flex;align-items:center;gap:16px}.menu-dots{cursor:pointer;display:flex;flex-direction:row;justify-content:space-between;width:60px;height:25px}.menu-dots span{display:block;width:12px;height:12px;background:rgb(0 0 0 / .6);border-radius:50%;transition:all 0.2s ease;box-shadow:1px 1px 2px rgb(255 255 255 / .8);animation:pulse 2s infinite}.menu-dots:hover span{transform:scale(1.3);background:rgb(0 0 0 / .8)}.menu-dots span{animation:pulse 2s infinite}@keyframes pulse{0%,100%{opacity:.6;transform:scale(1)}50%{opacity:1;transform:scale(1.1)}}.menu-options{word-break:normal!important;white-space:nowrap!important;display:none;position:absolute;top:36px;right:0;background:#fff;border:1px solid #ccc;border-radius:10px;box-shadow:0 4px 12px rgb(0 0 0 / .25);padding:12px;z-index:100;min-width:200px;font-family:sans-serif;font-size:14px}.menu-options label{display:flex;justify-content:space-between;align-items:center;margin:8px 0}.menu-dots:hover span{background:#ff9800;transition:background 0.3s}.menu-options input[type="file"]{max-width:100%;font-size:13px;padding:4px;box-sizing:border-box}.menu-options .back-to-dashboard-btn{display:block;margin:10px auto 0 auto;padding:8px 16px;background-color:#8B4513;color:#fff;text-decoration:none;border-radius:6px;font-weight:600;text-align:center;cursor:pointer;transition:background 0.2s ease}body{font-family:sans-serif;margin:0;min-height:100vh;overflow-y:auto;display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch}.book-wrapper{display:flex;justify-content:center;align-items:flex-start;margin:40px 0;width:100%;overflow:visible}#book{perspective:1500px;width:90vw;height:90vh;max-width:1000px;max-height:1400px;position:relative;cursor:pointer}.cover-img{width:200px;height:200px;object-fit:contain;display:block;margin:20px auto}.contents-page{width:100%;height:100%;position:relative;display:flex;flex-direction:column;align-items:center;overflow-y:auto}.contents-filter{padding:5px 10px;font-size:14px}#doneCounter{position:absolute;top:10px;right:30px;font-size:16px;background:rgb(139 69 19 / .1);padding:4px 12px!important;border-radius:8px;border:1px solid rgb(139 69 19 / .3);color:#8B4513;font-weight:600;margin:10px 0}#yarnTotalCounter{position:absolute;top:50px;right:30px;font-size:16px;background:rgb(139 69 19 / .1);padding:4px 12px!important;border-radius:8px;border:1px solid rgb(139 69 19 / .3);color:#8B4513;font-weight:600;margin:10px 0}#pendingCounter{position:absolute;top:90px;right:30px;margin:10px 0;font-size:16px;background:rgb(139 69 19 / .1);padding:4px 12px!important;border-radius:8px;border:1px solid rgb(139 69 19 / .3);color:#8B4513;font-weight:600}#planningCounter{position:absolute;top:130px;right:30px;margin:10px 0;font-size:16px;background:rgb(139 69 19 / .1);padding:4px 12px!important;border-radius:8px;border:1px solid rgb(139 69 19 / .3);color:#8B4513;font-weight:600}#contentsList{display:flex;flex-direction:column;align-items:center;width:100%;box-sizing:border-box;margin:0 auto}#contentsList>*{max-width:50%;width:100%;text-align:left;box-sizing:border-box}.btn-row{display:flex;gap:10px;margin-bottom:10px;align-items:center}.addWork{width:50px;height:50px;background-color:#28a745;color:#fff;font-size:24px;border:none;border-radius:8px;cursor:pointer;transition:background-color 0.2s;display:flex;justify-content:center;align-items:center;line-height:1;margin:0!important;padding:0!important}.addWork:hover{background-color:#218838}#loadBookBtn{display:block;margin:20px auto;padding:15px 30px;font-size:1.2rem;font-weight:700;cursor:pointer;border-radius:8px;border:none;background-color:#4CAF50;color:#fff;transition:background-color 0.2s}#loadBookBtn:hover{background-color:#45a049}#loadBookBtn:active{transform:scale(.95)}#loadBookBtn:focus{outline:none}.page{width:100%;height:100%;position:absolute;background:#fff;border:1px solid #000;display:flex;flex-direction:column;align-items:center;box-shadow:0 0 15px rgb(0 0 0 / .3);transform-origin:left center;transition:transform 0.8s cubic-bezier(.4,0,.2,1),box-shadow 0.8s;backface-visibility:hidden}.cover{background:linear-gradient(to bottom,#111 0%,#000 50%,#111 100%);color:gold;font-family:'Great Vibes',cursive;font-size:64px;text-shadow:0 0 10px rgb(255 215 0 / .8),2px 2px 10px rgb(0 0 0 / .8),0 0 20px rgb(255 215 0 / .4);--border-color:rgba(255, 215, 0, 0.6);border:3px solid #654321;box-shadow:inset 0 0 30px rgb(255 215 0 / .2),inset 0 0 60px rgb(0 0 0 / .3),0 0 40px rgb(0 0 0 / .8);display:flex;justify-content:center;align-items:center}.cover::before{content:'';position:absolute;inset:20px;border:2px solid var(--border-color);border-radius:10px;box-shadow:inset 0 0 20px var(--border-color)}@keyframes spinSparkle{0%{transform:rotate(0deg) scale(1);opacity:.5}50%{transform:rotate(180deg) scale(1.3);opacity:1}100%{transform:rotate(360deg) scale(1);opacity:.5}}.cover::after{content:'✦';position:absolute;top:50px;right:50px;font-size:40px;color:gold;text-shadow:0 0 15px rgb(255 215 0 / .8);animation:spinSparkle 5s linear infinite}.flipped{transform:rotateY(-180deg)}#contentsTitle{font-size:36px;margin-top:20px;margin-bottom:20px;color:#8B4513;text-shadow:1px 1px 3px rgb(0 0 0 / .2);font-weight:600}.small-label{font-family:'Great Vibes',cursive;font-size:18px;color:#8B4513;letter-spacing:1px}.work-entry{display:flex;align-items:center;padding:8px 12px;margin:4px 0;cursor:pointer;border-radius:4px;transition:background 0.2s}.work-entry:hover{background:rgb(139 69 19 / .1)}.delete-work-btn{background:rgb(255 0 0 / .1);border:1px solid rgb(255 0 0 / .3);color:darkred;margin-left:20px!important;border-radius:50%}.delete-work-btn:hover{background:rgb(255 0 0 / .2)}button{border:none;border-radius:50%;cursor:pointer;transition:all 0.3s ease;box-shadow:0 4px 15px rgb(0 0 0 / .3);font-weight:700}button:hover{transform:translateY(-2px) scale(1.05);box-shadow:0 8px 25px rgb(0 0 0 / .4)}button.addWork{width:50px;height:50px;background:linear-gradient(145deg,#28a745,#218838);color:#fff;font-size:28px;border-radius:50%}.page.flipped{transform:rotateY(-180deg);box-shadow:-5px 0 15px rgb(0 0 0 / .2)}@keyframes cornerPulse{0%,100%{transform:translate(-50%,-50%) rotate(45deg) scale(1);opacity:.7}50%{transform:translate(-50%,-50%) rotate(45deg) scale(1.2);opacity:1}}.page .corner-right,.page .corner-left{position:absolute;bottom:0;width:60px;height:60px;pointer-events:auto;cursor:pointer;z-index:10;transition:transform 0.3s ease-in-out}.page .corner-right{right:0;background:linear-gradient(135deg,transparent 50%,rgb(0 0 0 / .2) 100%);clip-path:polygon(100% 100%,0 100%,100% 0)}.page .corner-right::after{content:'➤';position:absolute;top:70%;left:70%;transform:translate(-50%,-50%) rotate(45deg);color:gold;font-size:16px;pointer-events:none;animation:cornerPulse 1.5s infinite ease-in-out}.page .corner-left{left:0;background:linear-gradient(-135deg,transparent 50%,rgb(0 0 0 / .2) 100%);clip-path:polygon(0 100%,100% 100%,0 0)}.page .corner-right:hover{transform:scale(1.05) rotate(10deg);background:linear-gradient(135deg,transparent 50%,rgb(0 0 0 / .3) 50%)}.page .corner-left:hover{transform:scale(1.05) rotate(-10deg);background:linear-gradient(-135deg,transparent 50%,rgb(0 0 0 / .3) 50%)}select{appearance:auto;margin:15px;padding:8px 12px;border:2px solid #8B4513;border-radius:8px;background:rgb(255 255 255 / .9);color:#654321;font-size:16px;font-family:'Crimson Text',serif}input,textarea{border:1px solid #8B4513;border-radius:5px;padding:8px;font-family:'Crimson Text',serif;font-size:14px;background:rgb(255 255 255 / .95)}input:focus,textarea:focus{outline:none;border-color:brown;box-shadow:0 0 10px rgb(165 42 42 / .3)}.work-page{background:linear-gradient(135deg,#fefefe 0%,#f5f3f0 100%);display:flex;flex-direction:column;gap:15px;padding:10px;width:100%;height:100%;box-sizing:border-box;overflow-y:auto}.topRow{display:flex;flex-direction:row;gap:20px;flex:0 0 auto;align-items:flex-start}.leftCol{display:flex;flex-direction:column;gap:5px;flex:1;min-width:0;justify-content:center}.rightCol{display:flex;flex-direction:column;gap:10px;flex:1;min-width:0}.bottomCol{display:flex;flex-direction:column;gap:10px;flex:1;margin-top:30px}.mainPreview{width:100%;aspect-ratio:1 / 1;display:flex;align-items:center;justify-content:center;color:#8B4513;border:2px dashed #8B4513;background:linear-gradient(135deg,#faf8f5 0%,#f0ede8 100%);border-radius:8px;box-shadow:inset 0 2px 10px rgb(0 0 0 / .1);overflow:hidden}.previewRow{display:flex;flex-wrap:wrap;gap:5px;align-items:flex-start}.previewRow>.imgSlot,.previewRow>div{width:84px;height:84px;display:flex;align-items:center;justify-content:center;font-size:12px;color:#8B4513;position:relative;border:2px dashed #8B4513;background:linear-gradient(135deg,#faf8f5 0%,#f0ede8 100%);border-radius:8px;overflow:hidden}.mainPreview img.previewImg{max-width:100%;max-height:100%;object-fit:contain}.previewRow img{width:100%;height:100%;object-fit:contain;cursor:pointer}.previewRow .removeBtn{position:absolute;top:2px;right:2px;background:rgb(0 0 0 / .6);color:#fff;border:none;border-radius:50%;cursor:pointer;width:20px;height:20px;font-size:14px;padding:0;display:inline-flex;align-items:center;justify-content:center}.fileRow{display:flex;align-items:center;gap:10px}.cameraInput{display:none}.cameraBtn{cursor:pointer;background:none;border:none;font-size:20px;line-height:2;align-items:center}.btnRow{display:flex;justify-content:center;gap:10px;margin-top:15px}.action-btn{border-radius:25px;padding:8px 16px;color:#fff;border:none;cursor:pointer;width:150px;font-size:14px;box-shadow:0 4px 15px rgb(0 0 0 / .3)}.saveBtn{background:linear-gradient(145deg,#28a745,#218838);width:150px;font-size:14px;border-radius:25px;padding:8px 16px;color:#fff}.backBtn{width:150px;font-size:14px;border-radius:25px;padding:8px 16px;background:linear-gradient(145deg,#6c757d,#5a6268);color:#fff}.small-label{font-family:'Segoe Print';font-size:14px;color:#000;margin-left:5px;padding-right:10px}.work-page input,.work-page textarea{border:1px solid #8B4513;border-radius:5px;padding:8px;font-family:'Crimson Text',serif;font-size:14px;background:rgb(255 255 255 / .95);box-sizing:border-box;width:100%}.work-page input:focus,.work-page textarea:focus{outline:none;border-color:brown;box-shadow:0 0 10px rgb(165 42 42 / .3)}.bottomCol textarea{width:100%;max-width:100%;min-height:60px;resize:vertical;box-sizing:border-box;padding:8px;font-size:14px;font-family:'Crimson Text',serif}.notes{flex:1;padding:5px;font-size:14px;resize:none}.planning-row{display:flex;align-items:center;gap:5px;width:150px;word-break:normal!important}#yearFilter,#yarnUnitDropdown{background-color:#000;color:#fff;border:1px solid #444;padding:6px 10px;border-radius:6px;font-size:14px;position:relative;z-index:9999;box-shadow:0 4px 10px rgb(0 0 0 / .5)}#yearFilter option{background-color:#000;color:#fff}.image-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:rgb(0 0 0 / .8);display:flex;align-items:center;justify-content:center;z-index:1000;opacity:0;transition:opacity 0.3s ease}.image-overlay img{max-width:90%;max-height:90%;object-fit:contain;transform:scale(.7);transition:transform 0.3s ease;border-radius:8px;box-shadow:0 0 20px rgb(0 0 0 / .5)}.image-overlay.show{opacity:1}.image-overlay.show img{transform:scale(1)}.mainPreview,.previewRow>div{border:2px dashed #8B4513;background:linear-gradient(135deg,#faf8f5 0%,#f0ede8 100%);border-radius:8px}.mainPreview{box-shadow:inset 0 2px 10px rgb(0 0 0 / .1)}#bookContainer::after{content:'';position:absolute;bottom:-100px;left:50%;transform:translateX(-50%) rotateX(90deg);width:400px;height:200px;background:radial-gradient(ellipse,rgb(0 0 0 / .4) 0%,transparent 70%);filter:blur(20px);z-index:-1}@media (max-width:768px){#contentsTitle{margin-left:30px;align-self:flex-start;margin-top:0;margin-bottom:30px}#contentsList>*{max-width:100%;text-align:left}.contents-filter{margin:10px 0!important;display:block!important;text-align:left!important;margin-left:30px!important;align-self:flex-start!important}#doneCounter,#yarnTotalCounter,#pendingCounter,#planningCounter{font-size:10px;padding:6px 8px;right:15px}#yarnTotalCounter{top:40px}#pendingCounter{top:70px}#planningCounter{top:100px}.menu-options{white-space:normal!important;word-break:break-word!important;width:100%;font-size:14px;padding:12px;box-sizing:border-box}.menu-options input[type="file"]{max-width:72%;font-size:13px;padding:4px;box-sizing:border-box}body{display:block!important;margin:0;padding:0;overflow:auto}.book-wrapper{height:100vh;display:flex;justify-content:center;align-items:center}.cover{font-size:42px}.contents-page{align-items:center!important}.page,.cover,.contents-page,.work-page{box-sizing:border-box;flex-direction:column;align-items:center;padding-bottom:40px;box-shadow:none}.book-wrapper{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;width:100%;min-height:calc(100vh - 40px);padding-bottom:40px}.cover::before{inset:10px}.topRow{flex-direction:column!important;gap:15px;align-items:stretch;width:100%}.leftCol,.rightCol{width:100%!important;flex:none!important;max-width:100%!important}.mainPreview{width:100%;height:auto}}