@import "https://fonts.googleapis.com/css2?family=Nanum+Myeongjo:wght@400;700;800&family=Nunito:wght@400;600;700;800&family=Gaegu:wght@300;400;700&display=swap";@import "https://fonts.googleapis.com/css2?family=Gaegu:wght@300;400;700&display=swap";*{box-sizing:border-box;margin:0;padding:0}:root{--font-ko:"Nanum Myeongjo", "Batang", serif;--font-en:"Nunito", "Arial", sans-serif;--font-ui:"Gaegu", cursive, sans-serif}html[lang=ko] body{font-family:var(--font-ko)}html[lang=en] body{font-family:var(--font-en)}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:#333;background:#e8f5e9}[lang=ko]{font-family:var(--font-ko)}[lang=en]{font-family:var(--font-en)}.language-toggle{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);cursor:pointer;font-family:var(--font-ui);color:#333;background:#ffffffb3;border:none;border-radius:20px;align-items:center;gap:.3rem;padding:.4rem .8rem;font-size:.95rem;font-weight:700;transition:transform .2s,box-shadow .2s;display:flex;box-shadow:0 2px 8px #0000001a}.language-toggle:hover{transform:scale(1.05);box-shadow:0 3px 12px #00000026}.language-toggle:active{transform:scale(.97)}.lang-flag{font-size:1.2rem;line-height:1}.lang-label{line-height:1}.home{background:linear-gradient(#87ceeb 0%,#b5e8d5 40%,#e8f5e9 100%);min-height:100vh;position:relative;overflow:hidden}.home-header{text-align:center;padding:2.5rem 1rem 1.5rem;position:relative}.home-lang-toggle{z-index:10;position:absolute;top:1rem;right:1rem}.home-title-wrapper{z-index:2;position:relative}.home-title{font-family:var(--font-ui);color:#2e7d32;text-shadow:2px 2px #fff9;letter-spacing:.05em;margin:0;font-size:clamp(2.2rem,6vw,3.5rem)}.title-emoji{margin:0 .2em;font-size:.8em;animation:3s ease-in-out infinite sway;display:inline-block}.title-emoji:last-child{animation-delay:.5s}@keyframes sway{0%,to{transform:rotate(-5deg)}50%{transform:rotate(5deg)}}.home-subtitle{font-family:var(--font-ui);color:#558b2f;opacity:.9;margin:.3rem 0 0;font-size:clamp(1rem,3vw,1.5rem)}.floating-deco{pointer-events:none;z-index:1;position:absolute;inset:0}.float-item{opacity:.6;font-size:1.4rem;animation:linear infinite floatUp;position:absolute;top:20%}@keyframes floatUp{0%{opacity:.6;transform:translateY(0)rotate(0)}50%{opacity:.9}to{opacity:.4;transform:translateY(-30px)rotate(15deg)}}.story-grid{grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1.2rem;max-width:900px;margin:0 auto;padding:1rem 1.5rem 6rem;display:grid}.story-card{background:var(--card-color);cursor:pointer;text-align:center;border:none;border-radius:24px;padding:1.8rem 1.2rem;font-family:inherit;transition:box-shadow .3s;position:relative;overflow:hidden;box-shadow:0 6px 20px #0000001a,0 2px 6px #0000000f}.story-card:hover{box-shadow:0 10px 30px #00000026,0 4px 10px #00000014}.story-card:before{content:"";background:#fff3;border-radius:50%;width:80px;height:80px;position:absolute;top:-20px;right:-20px}.story-card:after{content:"";background:#ffffff26;border-radius:50%;width:60px;height:60px;position:absolute;bottom:-15px;left:-15px}.card-emoji{filter:drop-shadow(2px 2px 2px #0000001a);margin-bottom:.6rem;font-size:3.5rem}.card-title{color:#333;margin:0 0 .3rem;font-size:1.3rem;font-weight:700;line-height:1.4}.card-subtitle{color:#555;opacity:.85;margin:0 0 .6rem;font-size:.95rem;line-height:1.4}.card-pages{font-family:var(--font-ui);color:#666;background:#ffffff80;border-radius:20px;padding:.2rem .8rem;font-size:.85rem;display:inline-block}.home-footer{pointer-events:none;z-index:10;height:60px;position:fixed;bottom:0;left:0;right:0}.footer-grass{background:#4caf50;border-radius:50% 50% 0 0/100% 100% 0 0;height:40px;position:absolute;bottom:0;left:0;right:0}.footer-content{justify-content:space-around;padding:0 2rem;display:flex;position:absolute;bottom:20px;left:0;right:0}.footer-flower{font-size:1.4rem;animation:2.5s ease-in-out infinite sway;display:inline-block}@media (width<=600px){.story-grid{grid-template-columns:1fr;gap:1rem;padding:1rem 1rem 6rem}.home-header{padding:2rem 1rem 1rem}.card-emoji{font-size:2.8rem}}@media (width>=601px) and (width<=900px){.story-grid{grid-template-columns:repeat(2,1fr)}}.story-viewer{flex-direction:column;min-height:100dvh;transition:background .5s;display:flex;position:relative;overflow:hidden}.viewer-top-bar{z-index:10;justify-content:space-between;align-items:center;gap:.5rem;padding:.8rem 1rem;display:flex;position:relative}.back-btn{cursor:pointer;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);font-size:1rem;font-family:var(--font-ui);color:#333;background:#ffffffb3;border:none;border-radius:30px;flex-shrink:0;align-items:center;gap:.3rem;padding:.5rem 1rem;transition:background .2s;display:flex}.back-btn:hover{background:#ffffffe6}.back-arrow{font-size:1.2rem}.page-indicator{flex-shrink:1;align-items:center;gap:6px;min-width:0;display:flex}.dot{cursor:pointer;background:#ffffff80;border:none;border-radius:50%;flex-shrink:0;width:10px;height:10px;transition:all .3s}.dot.active{background:#ff8f00;transform:scale(1.4);box-shadow:0 0 8px #ff8f0066}.dot.done{background:#ff8f0080}.top-bar-right{flex-shrink:0;align-items:center;gap:.4rem;display:flex}.audio-controls{gap:.2rem;display:flex}.audio-btn{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);cursor:pointer;background:#ffffff80;border:none;border-radius:50%;justify-content:center;align-items:center;width:36px;height:36px;font-size:1.1rem;transition:transform .2s,background .2s,box-shadow .2s;display:flex}.audio-btn:hover{background:#fffc;transform:scale(1.1)}.audio-btn:active{transform:scale(.95)}.audio-btn.is-active{background:#ff8f0040;box-shadow:0 0 8px #ff8f004d}.story-title-banner{text-align:center;margin-bottom:.3rem;padding:0 1rem}.story-title-banner h1{color:#333;text-shadow:1px 1px #ffffff80;margin:0;font-size:clamp(1.3rem,4vw,2rem);font-weight:700}.banner-emoji{margin-bottom:.2rem;font-size:2rem;display:block}.content-area{flex:1;justify-content:center;align-items:center;padding:0 1rem;display:flex;position:relative;overflow:hidden}.page-content{flex-direction:column;align-items:center;gap:.8rem;width:100%;max-width:800px;display:flex}.illustration-wrapper{aspect-ratio:4/3;background:#fff;border-radius:20px;width:100%;max-width:700px;overflow:hidden;box-shadow:0 8px 30px #0000001f}.illustration-wrapper svg{width:100%;height:100%;display:block}.text-wrapper{text-align:center;width:100%;max-width:700px;padding:0 .5rem}.text-dual{flex-direction:column;gap:.35rem;display:flex}.story-text{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);border-radius:16px;margin:0}.story-text.text-primary{color:#333;background:#ffffffb3;padding:.8rem 1.2rem;font-size:clamp(1.15rem,3.2vw,1.55rem);font-weight:700;line-height:1.8;transition:box-shadow .3s}.story-text.text-primary.is-speaking{animation:1.5s ease-in-out infinite speaking-glow;box-shadow:0 0 0 3px #ff8f0066,0 4px 16px #ff8f0026}@keyframes speaking-glow{0%,to{box-shadow:0 0 0 3px #ff8f004d,0 4px 16px #ff8f001a}50%{box-shadow:0 0 0 4px #ff8f0080,0 4px 20px #ff8f0040}}.story-text.text-secondary{color:#999;background:#ffffff4d;padding:.4rem 1rem;font-size:clamp(.8rem,2.2vw,1rem);font-weight:400;line-height:1.6}.page-counter{text-align:center;font-family:var(--font-ui);color:#00000059;z-index:10;padding:.6rem 0 1.2rem;font-size:1rem;position:relative}.end-overlay{pointer-events:none;z-index:20;justify-content:center;padding-top:1rem;display:flex;position:fixed;top:0;left:0;right:0}.end-stars{gap:.5rem;display:flex}.end-star{opacity:0;font-size:1.8rem;animation:.5s ease-out forwards starPop,2s ease-in-out infinite starFloat}@keyframes starPop{0%{opacity:0;transform:scale(0)}60%{transform:scale(1.3)}to{opacity:1;transform:scale(1)}}@keyframes starFloat{0%,to{transform:translateY(0)}50%{transform:translateY(-6px)}}.story-not-found{color:#666;flex-direction:column;justify-content:center;align-items:center;gap:1rem;min-height:100vh;font-size:1.5rem;display:flex}.story-not-found button{color:#fff;cursor:pointer;background:#4caf50;border:none;border-radius:30px;padding:.8rem 2rem;font-family:inherit;font-size:1.2rem}@media (width<=480px){.illustration-wrapper{max-width:95vw}.story-text.text-primary{padding:.6rem .8rem}.story-text.text-secondary{padding:.3rem .6rem}.back-text{display:none}.audio-btn{width:32px;height:32px;font-size:1rem}}@media (height>=800px){.content-area{padding:.5rem 1rem}.page-content{gap:1rem}}@media (width>=700px) and (orientation:landscape){.page-content{flex-direction:row;gap:2rem;max-width:1000px}.illustration-wrapper{flex:1.2;max-width:550px}.text-wrapper{flex:1}}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{-webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{color:#333;background:#e8f5e9;min-height:100dvh;font-family:Gaegu,Jua,Noto Sans KR,cursive,sans-serif;overflow-x:hidden}#root{min-height:100dvh}::selection{color:#1b5e20;background:#a5d6a7}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:#c8e6c9}::-webkit-scrollbar-thumb{background:#81c784;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#66bb6a}button,a{-webkit-tap-highlight-color:transparent;touch-action:manipulation}button{-webkit-user-select:none;user-select:none}:focus-visible{outline-offset:2px;border-radius:8px;outline:3px solid #ff8f00}