@import url('https://fonts.googleapis.com/css2?family=Varela+Round&family=Zen+Maru+Gothic:wght@400;500;700&display=swap'); body { font-family: 'Zen Maru Gothic', 'Varela Round', sans-serif; background-color: #fff9eb; background-image: radial-gradient(#ffeeb2 20%, transparent 20%), radial-gradient(#ffeeb2 20%, transparent 20%); background-size: 30px 30px; background-position: 0 0, 15px 15px; } /* 確保所有文字內容使用網站字體 */ * { font-family: 'Zen Maru Gothic', 'Varela Round', sans-serif; } /* 特別確保生成結果區域使用正確字體 */ #outputContent, #demoResultContent, .speech-bubble, .speech-bubble * { font-family: 'Zen Maru Gothic', 'Varela Round', sans-serif !important; } .nook-card { background-color: #fffdf9; border-radius: 40px; border: 4px solid white; box-shadow: 0 15px 35px -5px rgba(150, 75, 0, 0.15); } .nook-btn-primary { background-color: #964b00; color: white; border-bottom: 4px solid #703800; transition: all 0.1s; } .nook-btn-primary:active { transform: translateY(2px); border-bottom: 2px solid #703800; } .nook-btn-primary:disabled { background-color: #d2b48c; border-bottom: 4px solid #b89b72; cursor: not-allowed; } .nook-btn-secondary { background-color: #f5af19; color: #ffffff; border-bottom: 4px solid #c98e10; transition: all 0.1s; } .nook-btn-secondary:active { transform: translateY(2px); border-bottom: 2px solid #c98e10; } .nook-input { border: 2px solid #f2e1c1; border-radius: 20px; padding: 1rem; width: 100%; background-color: white; color: #5d4037; transition: border-color 0.2s; } .nook-input:focus { outline: none; border-color: #f5af19; box-shadow: 0 0 0 4px #fff2cc; } .speech-bubble { position: relative; background: white; border-radius: 30px; padding: 25px; border: 4px solid #f5af19; color: #5d4037; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05); } .speech-bubble .bubble-tail, .speech-bubble .bubble-tail-inner { position: absolute; width: 0; height: 0; border-left: 15px solid transparent; border-right: 15px solid transparent; } .speech-bubble--top-left .bubble-tail { top: -24px; left: 32px; border-bottom: 24px solid #f5af19; } .speech-bubble--top-left .bubble-tail-inner { top: -16px; left: 32px; border-bottom: 24px solid white; transform: scale(0.8) translateY(2px); } .speech-bubble--bottom-right .bubble-tail { bottom: -24px; right: 32px; border-top: 24px solid #f5af19; } .speech-bubble--bottom-right .bubble-tail-inner { bottom: -20px; right: 32px; border-top: 24px solid white; transform: scale(0.8) translateY(-2px); } @keyframes fade-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .animate-fade-in { animation: fade-in 0.5s ease-out forwards; } @keyframes slide-up { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .animate-slide-up { animation: slide-up 0.4s ease-out forwards; } @keyframes shake { 0%, 100% { transform: translateX(0); } 10%, 30%, 50%, 70%, 90% { transform: translateX(-3px); } 20%, 40%, 60%, 80% { transform: translateX(3px); } } .animate-shake { animation: shake 0.5s ease-in-out; }