.snow-container{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:1;overflow:hidden}.heart-particle{position:absolute;pointer-events:none;filter:drop-shadow(0 0 8px rgba(255,107,157,.4));will-change:transform}.heart-particle.frozen{position:fixed;bottom:0;will-change:auto}.app{min-height:100vh;width:100%;display:flex;flex-direction:column;align-items:center;padding:var(--spacing-unit);position:relative;overflow-x:clip;overflow-y:visible}.bgm-toggle{position:fixed;top:16px;right:16px;z-index:100;background:#ffffff40;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1.5px solid rgba(255,255,255,.4);border-radius:50%;width:40px;height:40px;display:flex;align-items:center;justify-content:center;font-size:18px;cursor:pointer;transition:background .2s,transform .15s;box-shadow:0 2px 10px #0000001a;padding:0;line-height:1}.bgm-toggle:hover{background:#ffffff73;transform:scale(1.08)}.bgm-toggle:active{transform:scale(.95)}.first-page,.second-page{background:linear-gradient(135deg,#b39ddb,#ce93d8 25%,#e1bee7,#f8bbd0,#fecfef,#ffb3d9,#fecfef);justify-content:center;align-items:center;cursor:pointer}.third-page{background:linear-gradient(135deg,#b39ddb,#ce93d8 25%,#e1bee7,#f8bbd0,#fecfef,#ffb3d9,#fecfef);justify-content:center;align-items:center;overflow-y:auto}.envelope-scene{width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:calc(100vh - (var(--spacing-unit) * 2));gap:24px;padding:var(--spacing-unit)}.envelope-label{margin-bottom:8px;text-align:center}.closed-envelope{width:min(280px,calc(100% - 80px));cursor:pointer;filter:drop-shadow(0 10px 32px rgba(160,120,60,.22));transition:transform .2s ease}.closed-envelope:active{transform:scale(.94)}.closed-envelope-flap{width:100%;height:60px;background:linear-gradient(180deg,#fdf6e3,#fceabb);clip-path:polygon(0 100%,50% 0%,100% 100%)}.closed-envelope-body{background:linear-gradient(175deg,#fffdf5,#fef9e7 40%,#fdf3d7);border-radius:0 0 12px 12px;border:1.5px solid rgba(220,195,130,.35);border-top:none;height:180px;display:flex;align-items:center;justify-content:center}.closed-envelope-seal{font-size:75px;filter:drop-shadow(0 2px 6px rgba(180,100,160,.25))}.closed-envelope-text{display:flex;flex-direction:column;justify-content:space-between;padding:16px 24px;width:100%;height:100%}.envelope-from,.envelope-to{margin:0;font-family:Nura,cursive,sans-serif;color:#8b6914}.envelope-from{align-self:flex-start;text-align:left;font-weight:500;font-size:18px;padding:0;margin:0 -15px}.envelope-phrase{margin:0;font-family:Sarabun,cursive,sans-serif;color:#a07828;font-size:16px;font-weight:500;align-self:center;text-align:center;opacity:.85}.envelope-to{align-self:flex-end;text-align:right;font-size:19px;font-weight:500;margin:-5px -15px}.opened-envelope-bottom{width:min(240px,60%);margin-top:-10px}.opened-envelope-flap-open{width:100%;height:56px;background:linear-gradient(180deg,#fceabb,#fdf6e3);clip-path:polygon(0 0,50% 100%,100% 0);transform:rotate(180deg)}.opened-envelope-body-empty{background:linear-gradient(175deg,#fffdf5,#fef9e7 40%,#fdf3d7);border-radius:0 0 10px 10px;border:1.5px solid rgba(220,195,130,.35);border-top:none;height:138px}.letter-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#000c;z-index:10}.love-letter{position:relative;z-index:11;width:min(380px,calc(100% - 32px));aspect-ratio:1 / 1.414;filter:drop-shadow(0 12px 40px rgba(200,80,120,.22))}.love-letter-inner{position:relative;background:#fff;border-radius:16px;border:4px solid #f06292;padding:24px clamp(20px,5vw,36px);width:100%;height:100%;display:flex;flex-direction:column;gap:0px;overflow-y:auto;overflow-x:visible;box-sizing:border-box}.letter-deco-top{display:flex;justify-content:center;align-items:flex-start;position:relative;margin-bottom:4px}.letter-garland{font-size:clamp(14px,3.5vw,20px);letter-spacing:4px;filter:drop-shadow(0 1px 3px rgba(200,80,120,.15))}.letter-deco-rose{position:absolute;top:-8px;right:-4px;font-size:clamp(28px,7vw,42px);transform:rotate(15deg)}.letter-heading{font-family:Nura,cursive,sans-serif;font-size:clamp(28px,7vw,42px);color:#444;margin:0;font-weight:400}.letter-text{font-family:Nura,cursive,sans-serif;font-size:clamp(16px,4vw,22px);color:#555;line-height:1.8;margin:0;flex:1;text-align:left}.letter-deco-bottom{display:flex;justify-content:flex-end;align-items:flex-end;margin:0;padding:0;gap:0px}.letter-deco-xoxo{font-family:Nura,cursive,sans-serif;font-size:clamp(22px,5.5vw,32px);color:#e91e63;font-style:italic}.letter-sign-area{display:flex;flex-direction:column;text-align:right;height:50px;gap:0px;margin:0;padding:0}.letter-signature{font-family:Nura,cursive,sans-serif;font-size:clamp(16px,4vw,22px);color:#888;display:flex;flex-wrap:wrap;margin:-10px 0;padding:0}.letter-signature-name{height:50px;width:auto;object-fit:contain;display:block;margin:0 0 0 auto}.letter-scatter{position:absolute;pointer-events:none;opacity:.6}.letter-scatter-1{top:8px;left:12px;font-size:18px;transform:rotate(-15deg)}.letter-scatter-2{bottom:60px;right:8px;font-size:16px;transform:rotate(20deg)}.recap-page-content{width:100%;text-align:center;display:flex;align-items:center;justify-content:center;flex-direction:column;min-height:calc(100vh - (var(--spacing-unit) * 2));position:relative}.recap-title{margin:0;padding:40px 0;font-size:clamp(34px,9vw,56px);line-height:1.6;background-image:linear-gradient(135deg,#8439a2,#8439a2 64%,#8439a2);-webkit-background-clip:text;background-clip:text;color:transparent;overflow:visible}.recap-chat{width:min(680px,calc(100% - (var(--spacing-unit) * 2)));max-height:calc(100vh - 120px);overflow-y:auto;-webkit-overflow-scrolling:touch;display:flex;flex-direction:column;gap:10px;padding:calc(var(--spacing-unit) * 1.2);border-radius:20px;background:#ffffff38;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);box-shadow:0 8px 28px #9b59b62e;scroll-behavior:smooth;contain:style}.recap-chat-bubble{max-width:82%;padding:20px 14px 5px;border-radius:16px;font-family:Nura,cursive,sans-serif;font-size:clamp(18px,4.2vw,28px);line-height:1.3;will-change:opacity,transform;backface-visibility:hidden}.recap-chat-text{margin:0}.recap-chat-image{display:block;width:min(100%,260px);border-radius:12px;object-fit:cover}.recap-chat-image+.recap-chat-text{margin-top:8px}.recap-chat-bubble.theirs{align-self:flex-start;text-align:left;background:#ffffffe6;color:#7a4a93}.recap-chat-bubble.mine{align-self:flex-end;text-align:right;background:#9b59b6d9;color:#fff}.recap-intro{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1;width:100%}.recap-intro-title{background-image:linear-gradient(135deg,#9b59b6,#e91e90,#9b59b6);background-clip:text;-webkit-background-clip:text;color:transparent}h1.recap-intro-title.main-title{font-size:clamp(64px,16vw,96px)}.recap-section-wrapper{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;flex:1;overflow:visible;will-change:opacity,transform;transform:translateZ(0)}.recap-line-wrapper{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;overflow:visible;padding-top:36px;will-change:opacity,transform;transform:translateZ(0)}.recap-progress{position:absolute;bottom:calc(var(--spacing-unit) * 2);left:50%;transform:translate(-50%);width:min(560px,calc(100% - (var(--spacing-unit) * 2)));display:flex;gap:8px}.recap-progress-segment{flex:1;height:6px;border-radius:999px;background:#ffffff59;overflow:hidden}.recap-progress-fill{height:100%;border-radius:999px;background:#fffffff2;transition:width .4s cubic-bezier(.4,0,.2,1)}.background-decoration{position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden;pointer-events:none;z-index:0}.floating-heart{position:absolute;font-size:clamp(30px,8vw,60px);opacity:.4;animation:float 6s ease-in-out infinite;filter:drop-shadow(0 0 10px rgba(179,157,219,.4))}.heart-1{top:10%;left:10%;animation-delay:0s}.heart-2{top:20%;right:15%;animation-delay:1.5s}.heart-3{bottom:20%;left:20%;animation-delay:3s}.heart-4{bottom:15%;right:10%;animation-delay:4.5s}@keyframes float{0%,to{transform:translateY(0) rotate(0);opacity:.3}50%{transform:translateY(-20px) rotate(10deg);opacity:.5}}.first-page-content{position:relative;z-index:1;width:100%;max-width:600px;text-align:center;padding:calc(var(--spacing-unit) * 2)}.content-placeholder{background:#fffffff2;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:var(--border-radius);padding:calc(var(--spacing-unit) * 3);box-shadow:0 8px 32px #b39ddb40;border:2px solid rgba(179,157,219,.3)}.main-title{font-family:Nura,cursive,sans-serif;font-size:clamp(32px,8vw,48px);font-weight:400;background:linear-gradient(90deg,#8439a2,#8439a2);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:calc(var(--spacing-unit) * 1.5);line-height:1.6;letter-spacing:.02em;opacity:1;padding-top:40px;padding-bottom:0;overflow:visible}.subtitle{font-family:Nura,cursive,sans-serif;font-size:clamp(16px,4vw,20px);color:#666;line-height:1.6}.app-header{text-align:center;padding:calc(var(--spacing-unit) * 2) var(--spacing-unit);width:100%;max-width:600px}.app-header h1{font-size:clamp(24px,5vw,32px);margin-bottom:calc(var(--spacing-unit) / 2);color:var(--primary-color)}.app-header p{font-size:clamp(14px,3vw,18px);color:var(--secondary-color)}.app-main{flex:1;width:100%;max-width:600px;display:flex;flex-direction:column;gap:var(--spacing-unit);padding:var(--spacing-unit)}.card{background:var(--card-background);border-radius:var(--border-radius);padding:calc(var(--spacing-unit) * 1.5);box-shadow:0 2px 8px #0000001a;width:100%}.card h2{font-size:clamp(20px,4vw,24px);margin-bottom:var(--spacing-unit);color:var(--text-color)}.card p{font-size:clamp(14px,3vw,16px);margin-bottom:calc(var(--spacing-unit) * 1.5);color:var(--secondary-color)}.counter{display:flex;justify-content:center;margin-top:calc(var(--spacing-unit) * 1.5)}.btn{padding:calc(var(--spacing-unit) * .75) calc(var(--spacing-unit) * 1.5);border:none;border-radius:calc(var(--border-radius) / 2);font-size:clamp(14px,3vw,16px);font-weight:600;cursor:pointer;transition:all .3s ease;touch-action:manipulation;-webkit-tap-highlight-color:transparent}.btn-primary{background-color:var(--primary-color);color:#fff}.btn-primary:hover{background-color:#9b59b6;transform:translateY(-2px);box-shadow:0 4px 12px #b39ddb66,0 0 15px #ff6b9d33}.btn-primary:active{transform:translateY(0);box-shadow:0 2px 4px #b39ddb4d}.scroll-card{background:linear-gradient(135deg,#b39ddb,#9b59b6);color:#fff;box-shadow:0 4px 20px #b39ddb4d,inset 0 0 30px #ff6b9d1a}.scroll-card h2,.scroll-card p{color:#fff}.gsap-card{background:linear-gradient(135deg,var(--primary-color) 0%,#9b59b6 100%);color:#fff;position:relative;overflow:hidden;box-shadow:0 4px 20px #b39ddb4d,inset 0 0 30px #ffc1071a}.gsap-card h2,.gsap-card p{color:#fff}.pulse-indicator{position:absolute;top:20px;right:20px;width:12px;height:12px;background:#fffc;border-radius:50%;box-shadow:0 0 10px #ffffff80}@media (max-width: 380px){.main-title{font-size:clamp(26px,7vw,38px);padding-top:20px}.recap-title{font-size:clamp(26px,8vw,42px);padding:40px var(--spacing-unit)}.recap-chat{padding:calc(var(--spacing-unit) * .8);gap:8px}.recap-chat-bubble{max-width:90%;padding:16px 10px 4px;font-size:clamp(15px,4vw,22px);border-radius:12px}.recap-chat-image{width:min(100%,200px)}.love-letter{width:calc(100% - 20px)}.love-letter-inner{padding:16px clamp(12px,3vw,20px);border-width:3px;border-radius:12px}.letter-heading{font-size:clamp(20px,6vw,30px)}.letter-text{font-size:clamp(13px,3.5vw,18px);line-height:1.6}.closed-envelope{width:min(220px,calc(100% - 40px))}.closed-envelope-flap{height:48px}.closed-envelope-body{height:150px}.closed-envelope-seal{font-size:60px}.envelope-from{font-size:15px}.envelope-to{font-size:16px}.opened-envelope-bottom{width:min(200px,55%)}.recap-progress{gap:4px;bottom:var(--spacing-unit)}.recap-progress-segment{height:4px}.content-placeholder{padding:calc(var(--spacing-unit) * 2)}.first-page-content{padding:var(--spacing-unit)}.envelope-scene{gap:16px;padding:calc(var(--spacing-unit) * .5)}}@media (max-width: 480px) and (min-width: 381px){.main-title{padding-top:24px}.recap-title{padding:40px calc(var(--spacing-unit) * .5)}.recap-chat-bubble{max-width:86%}.love-letter{width:min(360px,calc(100% - 24px))}.recap-progress{bottom:calc(var(--spacing-unit) * 1.2);gap:6px}.recap-progress-segment{height:5px}.first-page-content{padding:calc(var(--spacing-unit) * 1.5)}}@media (max-height: 500px) and (orientation: landscape){.love-letter{aspect-ratio:unset;height:calc(100vh - 80px);overflow-y:auto}.love-letter-inner{height:auto;min-height:100%}.recap-page-content{min-height:calc(100vh - var(--spacing-unit))}.envelope-scene{min-height:calc(100vh - var(--spacing-unit));gap:12px;padding:calc(var(--spacing-unit) * .5)}.main-title{padding-top:12px}.recap-chat{max-height:calc(100vh - 80px);overflow-y:auto;-webkit-overflow-scrolling:touch}.recap-progress{bottom:var(--spacing-unit)}}@media (min-width: 768px){.app{padding:calc(var(--spacing-unit) * 2)}.app-main{gap:calc(var(--spacing-unit) * 1.5)}.recap-chat{width:min(720px,calc(100% - (var(--spacing-unit) * 4)));gap:12px;padding:calc(var(--spacing-unit) * 1.5);border-radius:24px}.recap-chat-bubble{max-width:75%;border-radius:18px}.love-letter{width:min(420px,calc(100% - 48px))}.recap-progress{width:min(620px,calc(100% - (var(--spacing-unit) * 4)))}.content-placeholder{padding:calc(var(--spacing-unit) * 4)}}@media (min-width: 1024px){.app-main{max-width:800px}.recap-chat{width:min(760px,calc(100% - (var(--spacing-unit) * 6)))}.recap-chat-bubble{max-width:70%}.love-letter{width:min(440px,calc(100% - 64px))}.recap-progress{width:min(680px,calc(100% - (var(--spacing-unit) * 6)))}}@supports (padding: env(safe-area-inset-bottom)){.app{padding-bottom:max(var(--spacing-unit),env(safe-area-inset-bottom));padding-left:max(var(--spacing-unit),env(safe-area-inset-left));padding-right:max(var(--spacing-unit),env(safe-area-inset-right))}.recap-progress{bottom:max(calc(var(--spacing-unit) * 2),calc(env(safe-area-inset-bottom) + var(--spacing-unit)))}}*{margin:0;padding:0;box-sizing:border-box}:root{--primary-color: #b39ddb;--secondary-color: #9b59b6;--accent-pink: #ff6b9d;--background: #ffffff;--text-color: #333333;--card-background: #f8f9fa;--border-radius: 20px;--spacing-unit: 16px}@font-face{font-family:Nura;src:url(/fonts/nura/%E0%B8%9F%E0%B8%AD%E0%B8%99%E0%B8%95%E0%B9%8C%E0%B8%99%E0%B8%B9%E0%B8%A3%E0%B9%88%E0%B8%B2%E0%B8%9A%E0%B8%B5%E0%B8%9E%E0%B8%B4%E0%B8%99/nura-beepin-thin.otf) format("opentype"),url(/fonts/nura/%E0%B8%9F%E0%B8%AD%E0%B8%99%E0%B8%95%E0%B9%8C%E0%B8%99%E0%B8%B9%E0%B8%A3%E0%B9%88%E0%B8%B2%E0%B8%9A%E0%B8%B5%E0%B8%9E%E0%B8%B4%E0%B8%99/nura-beepin-thin.ttf) format("truetype");font-weight:400;font-style:normal;font-display:swap}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:var(--background);color:var(--text-color);line-height:1.6;overflow-x:hidden}#root{min-height:100vh;width:100%}html{scroll-behavior:smooth}*{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.app,.card,.btn{will-change:transform;transform:translateZ(0);backface-visibility:hidden;perspective:1000px}@media (max-width: 768px){:root{--spacing-unit: 12px}}