:root{--primary-bg:#fafbfc;--secondary-bg:#f8f9fa;--card-bg:#fffffff2;--primary-text:#1a1a1a;--secondary-text:#6b7280;--accent-blue:#3b82f6;--accent-hover:#2563eb;--border-light:#0000000f;--shadow-sm:0 1px 3px #0000000d;--shadow-md:0 4px 12px #00000014;--shadow-lg:0 10px 25px #0000001a;--gradient-primary:linear-gradient(135deg,#667eea 0%,#764ba2 100%);--gradient-text:linear-gradient(135deg,#667eea 0%,#764ba2 50%,#1a1a1a 100%)}html{box-sizing:border-box}*,:before,:after{box-sizing:inherit}body{background:var(--primary-bg);color:var(--primary-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;flex-direction:column;min-height:100vh;margin:0;padding:0;font-family:Inter,Noto Sans KR,Segoe UI,-apple-system,BlinkMacSystemFont,sans-serif;font-size:16px;line-height:1.6;display:flex}.container{flex-direction:column;flex-grow:1;justify-content:center;align-items:center;width:100%;max-width:800px;min-height:100vh;margin:0 auto;padding:2rem 1.5rem;display:flex}.quote-card{background:var(--card-bg);border:1px solid var(--border-light);box-shadow:var(--shadow-md);text-align:center;-webkit-backdrop-filter:blur(20px);border-radius:20px;width:100%;max-width:650px;padding:3rem 2.5rem;transition:all .4s cubic-bezier(.165,.84,.44,1);animation:.8s cubic-bezier(.165,.84,.44,1) fadeIn;position:relative;overflow:hidden}.quote-card:before{content:"";background:linear-gradient(90deg,#0000,#fffc,#0000);height:1px;position:absolute;top:0;left:0;right:0}.quote-card:hover{box-shadow:var(--shadow-lg);border-color:#3b82f61a;transform:translateY(-8px)}.quote-text{color:var(--primary-text);background:var(--gradient-text);-webkit-text-fill-color:transparent;text-rendering:optimizeLegibility;-webkit-background-clip:text;background-clip:text;margin-bottom:1.5rem;font-size:clamp(1.5rem,4vw,2.25rem);font-weight:600;line-height:1.4;position:relative}.quote-author{color:var(--secondary-text);opacity:.8;margin-bottom:2rem;font-size:1.1rem;font-weight:500}.button-group{flex-direction:column;align-items:center;gap:2rem;margin-top:1rem;display:flex}.btn{background:var(--gradient-primary);color:#fff;letter-spacing:.025em;cursor:pointer;box-shadow:var(--shadow-md);border:none;border-radius:16px;align-items:center;gap:.75rem;padding:1rem 2rem;font-size:1rem;font-weight:600;text-decoration:none;transition:all .3s cubic-bezier(.165,.84,.44,1);display:inline-flex;position:relative;overflow:hidden}.btn:before{content:"";background:linear-gradient(90deg,#0000,#fff3,#0000);width:100%;height:100%;transition:left .5s;position:absolute;top:0;left:-100%}.btn:hover:before{left:100%}.btn:hover{box-shadow:var(--shadow-lg);background:linear-gradient(135deg,#5a6acf 0%,#6b5b95 100%);transform:translateY(-2px)}.btn:active{box-shadow:var(--shadow-sm);transform:translateY(0)}.btn .btn-icon{width:20px;height:20px;transition:transform .3s}.btn:hover .btn-icon{transform:rotate(180deg)}.btn:disabled{opacity:.7;cursor:not-allowed;transform:none!important}.btn:disabled:hover{box-shadow:var(--shadow-md)!important;transform:none!important}.share-buttons{flex-wrap:wrap;justify-content:center;gap:1rem;display:flex}.share-btn{cursor:pointer;width:52px;height:52px;box-shadow:var(--shadow-sm);justify-content:center;align-items:center;display:flex;position:relative;overflow:hidden;border:1px solid var(--border-light)!important;background:var(--secondary-bg)!important;border-radius:16px!important;padding:.875rem!important;transition:all .3s cubic-bezier(.165,.84,.44,1)!important}.share-btn:before{content:"";opacity:0;pointer-events:none;background:linear-gradient(135deg,#ffffff4d,#ffffff1a);width:100%;height:100%;transition:opacity .3s;position:absolute;top:0;left:0}.share-btn:hover{box-shadow:var(--shadow-md);border-color:var(--accent-blue);transform:translateY(-3px)}.share-btn:hover:before{opacity:1}.share-btn:active{box-shadow:var(--shadow-sm);transform:translateY(-1px)}.share-btn .btn-icon{width:22px;height:22px;transition:all .3s}.share-btn.clicked{animation:.3s clickEffect}@keyframes clickEffect{0%{transform:scale(.95)}50%{transform:scale(1.05)}to{transform:scale(1)}}.share-btn:hover .btn-icon{transform:scale(1.1)rotate(180deg)}.share-btn.twitter{color:#fff!important;background:linear-gradient(135deg,#1da1f2,#0d8bd9)!important;border-color:#0000!important}.share-btn.facebook{color:#fff!important;background:linear-gradient(135deg,#4267b2,#365899)!important;border-color:#0000!important}.share-btn.clipboard{color:#fff!important;background:linear-gradient(135deg,#6b7280,#4b5563)!important;border-color:#0000!important}.share-btn.twitter:hover,.share-btn.facebook:hover,.share-btn.clipboard:hover{transform:translateY(-4px)scale(1.05);box-shadow:0 8px 25px #00000026}.share-btn:focus,.share-btn:focus-visible{outline:2px solid var(--accent-blue);outline-offset:2px}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.animate-spin{animation:1s linear infinite spin}@media (width<=768px){.container{padding:1.5rem 1rem}.quote-card{padding:2rem 1.5rem}.quote-text{font-size:clamp(1.25rem,5vw,1.75rem)}.quote-author{font-size:1rem}.btn{padding:.875rem 1.5rem;font-size:.95rem}.share-buttons{gap:.75rem}.share-btn{width:48px;height:48px}}@media (width<=480px){.quote-card{padding:1.5rem 1rem}.button-group{gap:1.5rem}}@media (width<=576px){.quote-text{font-size:1.35rem}.quote-author{font-size:1.05rem}.quote-card{padding:24px 20px}.button-group{flex-direction:column;width:100%}.btn{justify-content:center;width:100%}}@media (width<=400px){.quote-text{font-size:1.2rem}.quote-author{font-size:1rem}.quote-card{padding:20px 16px}}