@import"https://fonts.googleapis.com/css2?family=Kiwi+Maru:wght@300;400;500;600;700&family=Noto+Sans+JP:wght@300;400;500;600;700&display=swap";:root{--primary-50: #faf9f8;--primary-100: #f5f2f1;--primary-200: #ebe5e3;--primary-300: #ddd3d0;--primary-400: #c7b7b2;--primary-500: #a89088;--primary-600: #8b726a;--primary-700: #765e5e;--primary-800: #5d4a47;--primary-900: #4a3936;--accent-rose: #d4a574;--accent-gold: #c9a876;--accent-sage: #a8b5a0;--accent-cream: #f7f3f0;--accent-warm: #e8d5c4;--accent-cool: #c8d0d8;--gray-50: #fefefe;--gray-100: #f8f8f8;--gray-200: #f0f0f0;--gray-300: #e8e8e8;--gray-400: #d0d0d0;--gray-500: #a8a8a8;--gray-600: #888888;--gray-700: #606060;--gray-800: #404040;--gray-900: #202020;--success-50: #f7faf7;--success-500: #6b9e6b;--warning-50: #fdfaf6;--warning-500: #c7a876;--error-50: #fdf7f7;--error-600: #c76b6b;--font-family-sans: "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--font-family-serif: "Noto Serif JP", Georgia, serif;--font-family-mono: "Consolas", "Monaco", "Courier New", monospace;--spacing-xs: .125rem;--spacing-sm: .375rem;--spacing-md: .75rem;--spacing-lg: 1.125rem;--spacing-xl: 1.75rem;--spacing-2xl: 2.5rem;--spacing-3xl: 3.5rem;--spacing-4xl: 5rem;--radius-xs: .25rem;--radius-sm: .5rem;--radius-md: .75rem;--radius-lg: 1rem;--radius-xl: 1.5rem;--radius-2xl: 2rem;--radius-full: 9999px;--shadow-xs: 0 1px 2px rgba(118, 94, 94, .05);--shadow-sm: 0 2px 4px rgba(118, 94, 94, .08);--shadow-md: 0 4px 8px rgba(118, 94, 94, .12);--shadow-lg: 0 8px 16px rgba(118, 94, 94, .15);--shadow-xl: 0 16px 32px rgba(118, 94, 94, .18);--shadow-2xl: 0 24px 48px rgba(118, 94, 94, .22);--transition-fast: .15s cubic-bezier(.4, 0, .2, 1);--transition-normal: .25s cubic-bezier(.4, 0, .2, 1);--transition-slow: .35s cubic-bezier(.4, 0, .2, 1);--header-height: 72px;--sidebar-width: 320px;--sidebar-width-mobile: 100vw;--content-max-width: 1400px;--container-padding: 2rem;--z-fixed: 1000;--z-dropdown: 1000;--z-sticky: 1020;--z-modal-backdrop: 1040;--z-modal: 1050;--z-popover: 1060;--z-tooltip: 1070}*{box-sizing:border-box}.article-detail img,.article-content img,article img{max-width:100%;box-shadow:var(--shadow-md);display:block;object-fit:cover;image-rendering:optimizeQuality;transform:translateZ(0)}.thumbnail-image{transition:opacity .3s ease;will-change:opacity}.thumbnail-image[loading=lazy]{opacity:.9}.thumbnail-image:not([loading=lazy]){opacity:1}.article-detail .article-content img{max-height:400px;width:auto;margin:var(--spacing-lg) auto}@media (max-width: 768px){.article-detail .article-content img{max-height:300px}}.article-detail{max-width:900px;margin:0 auto;background:linear-gradient(135deg,#fffffff2,#f7f3f0f2);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-radius:var(--radius-2xl);box-shadow:0 20px 40px #765e5e1a,0 8px 24px #765e5e14;overflow:hidden;animation:fadeInUp .6s ease-out}.article-detail-header{padding:var(--spacing-xl) var(--spacing-2xl);background:linear-gradient(135deg,#765e5e,#765e5ee6);color:#fff;position:relative;overflow:hidden}.article-detail-header:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><radialGradient id="a" cx="50%" cy="50%" r="50%"><stop offset="0%" stop-color="rgba(255,255,255,0.1)"/><stop offset="100%" stop-color="rgba(255,255,255,0)"/></radialGradient></defs><circle cx="50" cy="50" r="50" fill="url(%23a)"/></svg>') center/cover;opacity:.3}.article-title{font-size:2rem;font-weight:700;line-height:1.3;margin-bottom:var(--spacing-md);color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.2);position:relative;z-index:1}.article-categories{display:flex;flex-wrap:wrap;gap:var(--spacing-sm);margin-bottom:var(--spacing-md);position:relative;z-index:1}.article-categories .category-tag{background:#fff3;color:#fff;padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--radius-full);font-size:.875rem;font-weight:500;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.3);transition:all var(--transition-normal);cursor:pointer}.article-categories .category-tag:hover{background:#ffffff4d;transform:translateY(-2px);box-shadow:0 4px 12px #0003}.article-detail-meta{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:var(--spacing-md);position:relative;z-index:1}.article-author{display:flex;align-items:center;gap:var(--spacing-md)}.author-icon{width:48px;height:48px;border-radius:var(--radius-full);border:3px solid rgba(255,255,255,.3);object-fit:cover;box-shadow:0 4px 12px #0003}.author-name{font-weight:600;font-size:1.1rem;color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.3)}.article-stats{display:flex;gap:var(--spacing-lg);flex-wrap:wrap}.article-stats span{display:flex;align-items:center;gap:var(--spacing-xs);font-size:.95rem;color:#ffffffe6;font-weight:500}.edit-button,.delete-button{background:#fff3;color:#fff;border:1px solid rgba(255,255,255,.3);padding:var(--spacing-md) var(--spacing-xl);border-radius:var(--radius-lg);font-weight:600;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:all var(--transition-normal);cursor:pointer;margin-top:var(--spacing-lg)}.edit-button:hover{background:#ffffff4d;transform:translateY(-2px);box-shadow:0 4px 12px #0003}.article-content{padding:var(--spacing-3xl) var(--spacing-2xl)}.markdown-content{font-size:1.1rem;line-height:1.8;color:var(--gray-700);margin-bottom:var(--spacing-3xl)}.markdown-content h1,.markdown-content h2,.markdown-content h3,.markdown-content h4,.markdown-content h5,.markdown-content h6{color:#765e5e;margin-top:var(--spacing-2xl);margin-bottom:var(--spacing-lg);font-weight:600}.markdown-content p{margin-bottom:var(--spacing-lg);color:var(--gray-600)}.markdown-content blockquote{border-left:4px solid #765e5e;padding-left:var(--spacing-lg);margin:var(--spacing-lg) 0;font-style:italic;color:var(--gray-600);background:#765e5e0d;padding:var(--spacing-lg);border-radius:0 var(--radius-lg) var(--radius-lg) 0}.markdown-content code{background:#765e5e1a;padding:.2em .4em;border-radius:var(--radius-sm);font-family:var(--font-family-mono);font-size:.9em;color:#765e5e}.markdown-content pre{background:#765e5e0d;padding:var(--spacing-lg);border-radius:var(--radius-lg);overflow-x:auto;border:1px solid rgba(118,94,94,.1)}.markdown-content pre code{background:none;padding:0}.action-buttons{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:var(--spacing-xl);padding:var(--spacing-2xl);background:linear-gradient(135deg,#765e5e08,#f7f3f0cc);border-radius:var(--radius-2xl);border:1px solid rgba(118,94,94,.1);margin-top:var(--spacing-xl)}.like-button{display:flex;align-items:center;gap:var(--spacing-md);background:linear-gradient(135deg,#ff6b6b,#ff8e8e);color:#fff;border:none;padding:var(--spacing-lg) var(--spacing-2xl);border-radius:var(--radius-full);font-size:1.1rem;font-weight:600;cursor:pointer;transition:all var(--transition-normal);box-shadow:0 4px 16px #ff6b6b4d;position:relative;overflow:hidden;min-width:120px;justify-content:center}.like-button:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);transition:left .6s ease}.like-button:hover:before{left:100%}.like-button:hover{transform:translateY(-3px) scale(1.05);box-shadow:0 8px 24px #ff6b6b66;background:linear-gradient(135deg,#ff5252,#ff7979)}.like-button:active{transform:translateY(-1px) scale(1.02);animation:heartBeat .6s ease-in-out}.like-count{font-weight:700;font-size:1.1rem}@keyframes heartBeat{0%{transform:scale(1)}14%{transform:scale(1.3)}28%{transform:scale(1)}42%{transform:scale(1.3)}70%{transform:scale(1)}}.like-button.liked{background:linear-gradient(135deg,#ff4757,#ff6b7a);animation:likeSuccess .8s ease-out}@keyframes likeSuccess{0%{transform:scale(1);box-shadow:0 4px 16px #ff6b6b4d}50%{transform:scale(1.2);box-shadow:0 8px 32px #ff6b6b99}to{transform:scale(1);box-shadow:0 4px 16px #ff6b6b4d}}.share-buttons{display:flex;align-items:center;gap:var(--spacing-lg);flex-wrap:wrap}.share-buttons p{margin:0;font-weight:600;color:#765e5e;font-size:1rem}.share-icon{display:flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:var(--radius-full);background:linear-gradient(135deg,#765e5e1a,#765e5e0d);border:2px solid rgba(118,94,94,.2);transition:all var(--transition-normal);cursor:pointer;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.share-icon:hover{transform:translateY(-3px) scale(1.1);background:linear-gradient(135deg,#765e5e33,#765e5e1a);border-color:#765e5e66;box-shadow:0 8px 24px #765e5e33}.share-icon img{width:24px;height:24px;object-fit:contain}.article-user-info{padding:var(--spacing-2xl);background:linear-gradient(135deg,#765e5e0d,#f7f3f0cc);border-radius:var(--radius-2xl);margin-top:var(--spacing-2xl);border:1px solid rgba(118,94,94,.1)}.article-user-info h2{color:#765e5e;font-size:1.5rem;margin-bottom:var(--spacing-lg);font-weight:600}.user-info{display:flex;align-items:center;gap:var(--spacing-lg)}.user-icon{width:64px;height:64px;border-radius:var(--radius-full);border:3px solid rgba(118,94,94,.2);object-fit:cover;box-shadow:0 4px 12px #765e5e26}.user-info div p{margin:0;color:var(--gray-600)}.user-info div p:first-child{font-weight:600;font-size:1.1rem;color:#765e5e;margin-bottom:var(--spacing-sm)}@media (max-width: 768px){.article-detail{margin:var(--spacing-md);border-radius:var(--radius-xl)}.article-detail-header{padding:var(--spacing-2xl) var(--spacing-lg)}.article-title{font-size:1.75rem}.article-content{padding:var(--spacing-2xl) var(--spacing-lg)}.action-buttons{flex-direction:column;align-items:stretch;gap:var(--spacing-lg)}.like-button{width:100%;justify-content:center}.share-buttons{justify-content:center}.article-detail-meta{flex-direction:column;align-items:flex-start;gap:var(--spacing-md)}.article-stats{gap:var(--spacing-md)}.user-info{flex-direction:column;align-items:flex-start;text-align:left}}@media (max-width: 480px){.article-detail{margin:var(--spacing-sm)}.article-title{font-size:1.5rem}.share-icon{width:44px;height:44px}.share-icon img{width:20px;height:20px}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}html{scroll-behavior:smooth}body{margin:0;font-family:var(--font-family-sans);font-size:1rem;font-weight:400;line-height:1.7;color:var(--gray-800);background:linear-gradient(135deg,var(--gray-50) 0%,var(--primary-50) 30%,var(--accent-cream) 100%);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;min-height:100vh;letter-spacing:.01em}h1,h2,h3,h4,h5,h6{margin:0 0 var(--spacing-lg) 0;font-weight:600;line-height:1.4;color:var(--primary-800);font-family:var(--font-family-sans);letter-spacing:0}h1{font-size:2.5rem}h2{font-size:2rem}h3{font-size:1.5rem}h4{font-size:1.25rem}h5{font-size:1.125rem}h6{font-size:1rem}p{margin:0 0 var(--spacing-md) 0;color:var(--gray-600);line-height:1.7}a{color:var(--primary-600);text-decoration:none}a:hover{color:var(--primary-700)}.app{min-height:100vh;background:linear-gradient(135deg,var(--gray-50) 0%,var(--primary-50) 30%,var(--accent-cream) 100%)}.main-view{display:flex;min-height:100vh;background:linear-gradient(135deg,var(--gray-50) 0%,var(--primary-50) 30%,var(--accent-cream) 100%);position:relative}.main-container{display:flex;flex:1;margin-left:var(--sidebar-width);transition:margin-left var(--transition-normal);min-height:100vh}@media (max-width: 1024px){.main-container{margin-left:0}}.center{flex:1;max-width:var(--content-max-width);margin:0 0 0 auto;padding:var(--container-padding);width:100%;min-height:100vh;transition:margin-right var(--transition-normal)}@media (min-width: 961px){.center{margin-right:320px}.right-container.closed~.main-container .center{margin-right:0}}@media (max-width: 960px){.center{margin-right:0}}.mobile-header{display:none;position:fixed;top:0;left:0;right:0;height:var(--header-height);background:#765e5e;z-index:var(--z-fixed);padding:0 var(--spacing-lg);align-items:center;justify-content:space-between;box-shadow:var(--shadow-md)}@media (max-width: 1024px){.mobile-header{display:flex}}.header-title{font-size:1.5rem;font-weight:700;color:#fff;margin:0;flex:1;text-align:center}.side-menu{position:fixed;top:0;left:0;width:var(--sidebar-width);height:100vh;background:linear-gradient(180deg,var(--gray-50) 0%,var(--primary-100) 100%);border-right:1px solid var(--primary-200);box-shadow:var(--shadow-xl);z-index:var(--z-fixed);transition:transform var(--transition-normal);overflow-y:auto;display:flex;flex-direction:column;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}.side-menu.closed{transform:translate(-100%)}.side-menu.open{transform:translate(0)}.side-menu-header{padding:var(--spacing-xl) var(--spacing-lg);background:#765e5e;border-bottom:2px solid #765e5e;position:relative;display:flex;justify-content:space-between;align-items:flex-start;min-height:120px}.side-menu-header-content{flex:1}.side-menu-title{font-size:2rem;font-weight:700;color:var(--primary-700);margin:0 0 var(--spacing-sm) 0;text-shadow:0 2px 8px rgba(118,94,94,.15);letter-spacing:0;background:linear-gradient(135deg,var(--primary-700) 0%,var(--accent-rose) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-family:var(--font-family-sans)}.side-menu-subtitle{font-size:.875rem;color:var(--primary-500);margin:0;font-weight:500;opacity:.9;line-height:1.4}.mobile-close-button{display:none;background:var(--primary-100);border:2px solid var(--primary-200);border-radius:var(--radius-md);width:40px;height:40px;align-items:center;justify-content:center;color:var(--primary-600);cursor:pointer;transition:all var(--transition-fast)}.mobile-close-button:hover{background:var(--primary-200);border-color:var(--primary-300);color:var(--primary-700);transform:scale(1.05)}.mobile-close-button:active{transform:scale(.95)}.side-menu-content{flex:1;padding:var(--spacing-lg);display:flex;flex-direction:column;gap:var(--spacing-sm)}.menu-link{display:flex;align-items:center;gap:var(--spacing-lg);padding:var(--spacing-lg) var(--spacing-xl);border:1px solid transparent;border-radius:var(--radius-xl);background:#fffc;color:var(--gray-800);text-decoration:none;font-weight:600;font-size:1rem;transition:all var(--transition-normal);cursor:pointer;position:relative;overflow:hidden;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);letter-spacing:.01em}.menu-link:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,179,102,.2),transparent);transition:left var(--transition-slow)}.menu-link:hover:before{left:100%}.menu-link:hover{background:linear-gradient(135deg,var(--primary-100) 0%,var(--accent-cream) 100%);border-color:var(--primary-300);color:var(--primary-800);transform:translate(6px);box-shadow:var(--shadow-lg)}.menu-link.active{background:linear-gradient(135deg,var(--primary-700) 0%,var(--accent-rose) 100%);border-color:var(--primary-600);color:#fff;font-weight:700;box-shadow:var(--shadow-xl);transform:translate(4px)}.menu-link-icon{display:flex;align-items:center;gap:var(--spacing-sm);font-size:1.125rem}.menu-emoji{font-size:1.25rem;animation:gentle-float 3s ease-in-out infinite}.menu-link-text{font-size:1rem;font-weight:inherit}.menu-toggle{position:fixed;top:var(--spacing-lg);left:var(--spacing-lg);z-index:calc(var(--z-fixed) + 1);width:48px;height:48px;background:linear-gradient(135deg,#ffffff 0%,var(--primary-50) 100%);border:2px solid var(--primary-200);border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;color:var(--primary-600);cursor:pointer;transition:all var(--transition-normal);box-shadow:var(--shadow-md)}.menu-toggle:hover{background:linear-gradient(135deg,var(--primary-50) 0%,var(--primary-100) 100%);border-color:var(--primary-300);color:var(--primary-700);transform:scale(1.1);box-shadow:var(--shadow-lg)}.menu-toggle:active{transform:scale(.95)}.side-menu-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background:#ffb3664d;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:calc(var(--z-fixed) - 1);opacity:0;visibility:hidden;transition:all var(--transition-normal)}.side-menu-overlay.open{opacity:1;visibility:visible}.right-sidebar-header{display:flex;justify-content:space-between;align-items:center;padding:var(--spacing-lg);background:#765e5e;border-bottom:1px solid #765e5e;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.sidebar-main-title{font-size:1.5rem;font-weight:800;color:var(--primary-700);margin:0;font-family:var(--font-family-serif);letter-spacing:-.02em}.right-close-button{display:none;background:var(--primary-200);border:1px solid var(--primary-300);border-radius:var(--radius-full);width:40px;height:40px;align-items:center;justify-content:center;color:var(--primary-700);cursor:pointer;transition:all var(--transition-fast);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.right-close-button:hover{background:var(--primary-300);border-color:var(--primary-400);color:var(--primary-800);transform:scale(1.05)}.right-close-button:active{transform:scale(.95)}.right-container{position:fixed;top:0;right:0;width:350px;height:100vh;background:linear-gradient(180deg,var(--gray-50) 0%,var(--primary-100) 100%);box-shadow:var(--shadow-xl);z-index:var(--z-fixed);transition:transform var(--transition-normal);overflow-y:auto;display:flex;flex-direction:column;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}.right-container.open{transform:translate(0)}.right-toggle{position:fixed;top:var(--spacing-xl);right:var(--spacing-xl);z-index:calc(var(--z-fixed) + 1);width:48px;height:48px;background:linear-gradient(135deg,var(--gray-50) 0%,var(--primary-100) 100%);border:1px solid var(--primary-200);border-radius:var(--radius-full);display:flex;align-items:center;justify-content:center;color:var(--primary-700);cursor:pointer;transition:all var(--transition-normal);box-shadow:var(--shadow-lg);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.right-toggle:hover{background:linear-gradient(135deg,var(--primary-100) 0%,var(--primary-200) 100%);border-color:var(--primary-300);color:var(--primary-800);transform:scale(1.1);box-shadow:var(--shadow-xl)}@media (max-width: 1024px){.right-close-button{display:flex}.right-container{width:100vw}}.right-container{position:fixed;top:0;right:0;width:320px;height:100vh;background:linear-gradient(135deg,var(--gray-50) 100%);z-index:var(--z-fixed);transition:transform var(--transition-normal);overflow-y:auto;box-shadow:var(--shadow-lg)}.right-container.closed{transform:translate(100%)}.right-toggle{position:fixed;top:var(--spacing-lg);right:var(--spacing-lg);background:linear-gradient(135deg,var(--primary-700) 0%,var(--primary-800) 100%);color:#fff;border:none;border-radius:var(--radius-md);padding:var(--spacing-sm);cursor:pointer;z-index:var(--z-fixed);transition:all var(--transition-fast);box-shadow:var(--shadow-md)}.right-toggle:hover{background:linear-gradient(135deg,var(--primary-800) 0%,var(--primary-900) 100%);transform:scale(1.05)}@media (max-width: 1024px){.right-container{width:100%;max-width:320px}}.search-bar{padding:var(--spacing-lg)}.search-input{width:100%;padding:var(--spacing-md) var(--spacing-lg);border:2px solid var(--primary-200);border-radius:var(--radius-lg);font-size:.875rem;transition:all var(--transition-fast);background:#fff;font-family:var(--font-family-sans);box-shadow:inset 0 2px 4px #765e5e1a}.search-input:focus{outline:none;border-color:var(--accent-warm);box-shadow:0 0 0 4px #f4a26133;transform:translateY(-2px)}.search-input::placeholder{color:var(--primary-400);font-style:italic}.search-button{display:flex;align-items:center;gap:var(--spacing-sm);width:100%;padding:var(--spacing-md);background:linear-gradient(135deg,var(--primary-700) 0%,var(--primary-800) 100%);color:#fff;border:none;border-radius:var(--radius-md);font-size:.875rem;font-weight:500;cursor:pointer;transition:all var(--transition-fast);font-family:var(--font-family-sans)}.search-button:hover{background:linear-gradient(135deg,var(--primary-800) 0%,var(--primary-900) 100%);transform:translateY(-1px);box-shadow:var(--shadow-md)}.sidebar-content{padding:var(--spacing-lg)}.sidebar-title{font-size:1.125rem;font-weight:600;color:var(--primary-800);margin-bottom:var(--spacing-md)}.trending-section{margin-bottom:var(--spacing-xl)}.trending-tags{display:flex;flex-wrap:wrap;gap:var(--spacing-sm)}.trending-tag{display:inline-block;padding:var(--spacing-sm) var(--spacing-md);background:linear-gradient(135deg,var(--primary-100) 0%,var(--primary-50) 100%);border-radius:var(--radius-lg);font-size:.875rem;font-weight:500;cursor:pointer;transition:all var(--transition-fast);border:2px solid var(--primary-200);position:relative}.trending-tag:before{content:"✨";position:absolute;top:-4px;right:-4px;font-size:.75rem;opacity:0;transition:opacity var(--transition-fast)}.trending-tag:hover{background:linear-gradient(135deg,var(--accent-soft) 0%,var(--accent-warm) 100%);color:#fff;transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:var(--accent-coral)}.trending-tag:hover:before{opacity:1}.post-article-button{position:fixed;bottom:var(--spacing-xl);right:var(--spacing-xl);width:64px;height:64px;background:linear-gradient(135deg,var(--accent-warm) 0%,var(--accent-coral) 100%);color:#fff;border:none;border-radius:50%;font-size:1.5rem;cursor:pointer;z-index:var(--z-fixed);box-shadow:var(--shadow-lg);display:flex;align-items:center;justify-content:center;border:3px solid white}.post-article-button:hover{transform:scale(1.15) rotate(5deg);box-shadow:var(--shadow-xl);background:linear-gradient(135deg,var(--accent-coral) 0%,var(--accent-warm) 100%)}.articles-container{display:flex;flex-direction:column;gap:var(--spacing-lg);padding:var(--spacing-lg) 0}.articles-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--spacing-lg);padding-bottom:var(--spacing-md);border-bottom:2px solid #765e5e;background:#765e5e;padding:var(--spacing-lg);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm)}.section-title{font-size:2rem;font-weight:700;color:var(--primary-800);margin:0;display:flex;align-items:center;gap:var(--spacing-sm);text-shadow:0 2px 4px rgba(118,94,94,.1)}.articles-count{font-size:.875rem;color:var(--gray-600);margin:0;background:var(--primary-100);padding:var(--spacing-xs) var(--spacing-sm);border-radius:var(--radius-md)}.articles-grid{display:flex;flex-direction:column;gap:var(--spacing-lg);will-change:scroll-position;contain:layout style paint}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--spacing-3xl) var(--spacing-lg);text-align:center;color:var(--primary-600);min-height:400px;background:linear-gradient(135deg,var(--primary-50) 0%,var(--gray-50) 100%);border-radius:var(--radius-xl);border:2px dashed var(--primary-300);position:relative}.empty-state:before{content:"🐾";position:absolute;top:var(--spacing-lg);right:var(--spacing-lg);font-size:2rem;opacity:.3;animation:gentle-float 4s ease-in-out infinite}.empty-icon{font-size:4rem;margin-bottom:var(--spacing-lg);color:var(--primary-400);animation:soft-pulse 3s ease-in-out infinite}.empty-text{font-size:1.25rem;font-weight:600;color:var(--primary-700);margin-bottom:var(--spacing-sm)}.empty-subtext{font-size:1rem;color:var(--primary-500);margin:0;line-height:1.6}.article-card-link{text-decoration:none;color:inherit;display:block}.article-card{display:flex;gap:var(--spacing-lg);padding:var(--spacing-lg);background:#ebcfcf;border-radius:var(--radius-xl);box-shadow:var(--shadow-md);transition:all var(--transition-normal);border:2px solid var(--primary-100);min-height:200px;position:relative;overflow:hidden}.article-card:hover:before{opacity:1}.card-thumbnail{flex-shrink:0;width:200px;height:150px;border-radius:var(--radius-md);overflow:hidden;background:linear-gradient(135deg,var(--primary-100) 0%,var(--gray-100) 100%);box-shadow:var(--shadow-sm)}.thumbnail-image{width:100%;height:100%;object-fit:cover;transition:transform var(--transition-normal)}.article-card:hover .thumbnail-image{transform:scale(1.05)}.placeholder-thumbnail{width:100%;height:100%;background:linear-gradient(135deg,var(--primary-100) 0%,var(--gray-100) 100%);display:flex;align-items:center;justify-content:center;color:var(--primary-400);font-size:.875rem}.card-content{flex:1;display:flex;flex-direction:column;justify-content:space-between;min-height:150px}.card-header{margin-bottom:var(--spacing-md)}.article-title{font-size:1.25rem;font-weight:600;color:var(--primary-800);margin-bottom:var(--spacing-sm);line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.article-categories{display:flex;flex-wrap:wrap;gap:var(--spacing-xs);margin-top:var(--spacing-sm)}.category-tag{display:inline-block;padding:var(--spacing-xs) var(--spacing-md);background:#765e5e;color:#fff;border-radius:var(--radius-lg);font-size:.75rem;font-weight:600;box-shadow:var(--shadow-sm);transition:all var(--transition-fast);border:2px solid transparent}.category-tag:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:var(--accent-coral)}.article-meta{display:flex;gap:var(--spacing-lg);flex-wrap:wrap;font-size:.875rem;color:var(--gray-500);margin-top:auto}.meta-item{display:flex;align-items:center;gap:var(--spacing-xs);margin:0;padding:var(--spacing-xs) var(--spacing-sm);background:linear-gradient(135deg,var(--primary-50) 0%,white 100%);border-radius:var(--radius-md);border:1px solid var(--primary-200);font-size:.875rem;color:var(--primary-700);transition:all var(--transition-fast)}.meta-item:hover{background:linear-gradient(135deg,var(--primary-100) 0%,var(--primary-50) 100%);transform:translateY(-1px);box-shadow:var(--shadow-sm)}.meta-icon{color:var(--accent-warm);font-size:1rem}@media (max-width: 768px){:root{--container-padding: var(--spacing-md)}.center{padding:var(--spacing-md);margin-top:var(--header-height)}.article-card{flex-direction:column;gap:var(--spacing-md);min-height:auto}.card-thumbnail{width:100%;height:200px}.card-content{min-height:auto}.article-meta{gap:var(--spacing-md);margin-top:var(--spacing-md)}.post-article-button{width:56px;height:56px;bottom:var(--spacing-lg);right:var(--spacing-lg)}.articles-header{flex-direction:column;align-items:flex-start;gap:var(--spacing-sm)}.articles-container{padding:var(--spacing-md) 0}.calmie-welcome{padding:var(--spacing-lg);margin-bottom:var(--spacing-md)}.calmie-welcome h2{font-size:1.25rem}}@media (max-width: 480px){.article-card{padding:var(--spacing-md)}.card-thumbnail{height:150px}.article-title{font-size:1.125rem}.article-meta{font-size:.75rem;gap:var(--spacing-sm)}.section-title{font-size:1.5rem}.articles-container{padding:var(--spacing-sm) 0}}.loading-screen{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:400px;color:var(--primary-700);background:linear-gradient(135deg,var(--primary-50) 0%,var(--gray-50) 100%);border-radius:var(--radius-xl);padding:var(--spacing-3xl)}.spinner{width:56px;height:56px;border:5px solid var(--primary-200);border-top:5px solid var(--accent-warm);border-radius:50%;animation:spin 1.5s linear infinite;margin-bottom:var(--spacing-lg);box-shadow:var(--shadow-md)}.loading-screen p{font-size:1.125rem;font-weight:500;color:var(--primary-700);margin:0;text-align:center;animation:soft-pulse 2s ease-in-out infinite}.error-message{display:flex;align-items:center;justify-content:center;min-height:200px;color:var(--primary-700);background:linear-gradient(135deg,var(--accent-peach) 0%,var(--primary-50) 100%);border:2px solid var(--accent-warm);border-radius:var(--radius-xl);padding:var(--spacing-xl);margin:var(--spacing-lg) 0;text-align:center;font-size:1rem;box-shadow:var(--shadow-md);position:relative}.error-message p{margin:var(--spacing-lg) 0 0 0;color:var(--primary-800);font-weight:500;line-height:1.6}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}.flex{display:flex}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-sm{gap:var(--spacing-sm)}.gap-md{gap:var(--spacing-md)}.gap-lg{gap:var(--spacing-lg)}.w-full{width:100%}.h-full{height:100%}button:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--primary-700);outline-offset:2px}@media (prefers-color-scheme: dark){:root{--gray-50: #111827;--gray-100: #1f2937;--gray-200: #374151;--gray-300: #4b5563;--gray-400: #6b7280;--gray-500: #9ca3af;--gray-600: #d1d5db;--gray-700: #e5e7eb;--gray-800: #f3f4f6;--gray-900: #f9fafb;--primary-300: #d4a574;--primary-400: #c49660;--primary-500: #b4874c;--primary-600: #a47838;--primary-700: #e6d5c8;--primary-800: #f0e5d8;--text-primary: #f0f0f0;--text-secondary: #d0d0d0;--text-muted: #a0a0a0}body{background:linear-gradient(135deg,#1a1a1a,#2a2a2a,#1a2a3a);color:var(--text-primary)}.app,.main-view{background:linear-gradient(135deg,#1a1a1a,#2a2a2a,#1a2a3a)}.side-menu{background:linear-gradient(180deg,#2a2a2a,#1a1a1a);border-right-color:#3a3a3a}.article-card,.calmie-welcome{background:linear-gradient(135deg,#2a2a2a,#1a1a1a);border-color:#3a3a3a;color:var(--text-primary)}.article-detail{background:linear-gradient(135deg,#2a2a2af2,#1a1a1af2)}.article-detail-header{background:#272727}.article-user-info,.comments-section,.comment-card{background:linear-gradient(135deg,#2a2a2acc,#1a1a1acc);border-color:#3a3a3a}.action-buttons{background:linear-gradient(135deg,#2a2a2a99,#1a1a1a99);border-color:#3a3a3a}.content{background:linear-gradient(135deg,#2a2a2a,#1a1a1a)}.section-title,.article-title,.comment-form-title,.sidebar-main-title,.side-menu-title,.calmie-welcome h2,.post-article-page h1,.user-articles-section h3,.recommended-articles-section h3,.recommended-article h4{color:var(--primary-700)!important}.menu-section-title,.period-title,.sidebar-title,.articles-count,.comment-form-subtitle,.calmie-welcome p,.calmie-info p,.healing-tip p,.share-buttons p,.recommended-article p{color:var(--text-secondary)!important}.comment-textarea,.search-input,.form-group input[type=text],.tag-input-wrapper{background:#2a2a2acc!important;border-color:#4a4a4a!important;color:var(--text-primary)!important}.comment-textarea:focus,.search-input:focus,.form-group input[type=text]:focus,.tag-input-wrapper:focus-within{background:#2a2a2af2!important;border-color:var(--primary-500)!important}.comment-form-container,.period-tabs,.ranking-period-menu,.share-buttons{background:linear-gradient(135deg,#2a2a2a,#1a1a1a)!important;border-color:#3a3a3a!important}.period-tab,.period-button{color:var(--primary-700)!important}.period-tab:hover,.period-button:hover{color:var(--primary-800)!important}.meta-item,.stat-item,.character-count{color:var(--text-muted)!important}}@keyframes gentle-float{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}.calmie-info{background:linear-gradient(135deg,var(--primary-50) 0%,white 100%);padding:var(--spacing-md);border-radius:var(--radius-lg);border:2px solid var(--primary-200);margin-top:var(--spacing-sm)}.calmie-info p{margin:0 0 var(--spacing-sm) 0;font-size:.875rem;line-height:1.6;color:var(--primary-700);display:flex;align-items:flex-start;gap:var(--spacing-xs)}.calmie-info p:last-child{margin-bottom:0}.daily-healing{margin-top:var(--spacing-sm);display:flex;flex-direction:column;gap:var(--spacing-sm)}.healing-tip{background:linear-gradient(135deg,var(--accent-peach) 0%,var(--primary-50) 100%);padding:var(--spacing-md);border-radius:var(--radius-lg);border:2px solid var(--accent-warm);display:flex;align-items:flex-start;gap:var(--spacing-sm);transition:all var(--transition-fast)}.healing-tip:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}.healing-emoji{font-size:1.25rem;flex-shrink:0;margin-top:2px}.healing-tip p{margin:0;font-size:.875rem;line-height:1.5;color:var(--primary-800);font-weight:500}.search-input-wrapper{display:flex;flex-direction:column;gap:var(--spacing-sm)}@media (max-width: 768px){.calmie-info,.healing-tip{padding:var(--spacing-sm)}.healing-tip p,.calmie-info p{font-size:.8rem}.healing-emoji{font-size:1rem}.daily-healing{gap:var(--spacing-xs)}.section-title{font-size:1.5rem}}.content{flex:1;padding:var(--spacing-2xl);margin-left:0;transition:margin-left var(--transition-normal);background:linear-gradient(135deg,var(--gray-50) 0%,var(--primary-50) 100%);min-height:100vh;position:relative}.content.sidebar-open{margin-left:var(--sidebar-width)}.article-card{background:#bfa5a5;border:1px solid #e4bcbc;border-radius:var(--radius-2xl);padding:var(--spacing-2xl);margin-bottom:var(--spacing-2xl);box-shadow:var(--shadow-lg);transition:all var(--transition-normal);position:relative;overflow:hidden;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.article-card:before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--accent-warm) 0%,var(--accent-soft) 50%,var(--accent-peach) 100%);border-radius:var(--radius-xl) var(--radius-xl) 0 0}.article-card:hover{transform:translateY(-8px);box-shadow:var(--shadow-xl);border-color:var(--primary-200)}.article-card h3{color:var(--primary-700);font-size:1.5rem;font-weight:600;margin-bottom:var(--spacing-md);line-height:1.3}.article-card p{color:var(--gray-800);line-height:1.6;margin-bottom:var(--spacing-lg)}.article-meta{display:flex;align-items:center;gap:var(--spacing-md);font-size:.875rem;color:var(--gray-500);margin-bottom:var(--spacing-md)}.article-stats{display:flex;align-items:center;gap:var(--spacing-lg);margin-top:var(--spacing-md)}.stat-item{display:flex;align-items:center;gap:var(--spacing-sm);color:var(--primary-600);font-size:.875rem;font-weight:500}.stat-item svg{color:var(--accent-warm)}.calmie-welcome{background:linear-gradient(135deg,#ffffff 0%,var(--primary-50) 100%);border:2px solid var(--primary-100);border-radius:var(--radius-2xl);padding:var(--spacing-2xl);margin-bottom:var(--spacing-2xl);text-align:center;box-shadow:var(--shadow-lg);position:relative;overflow:hidden}.calmie-welcome:before{content:"";position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:radial-gradient(circle,rgba(255,179,102,.1) 0%,transparent 70%);animation:gentle-float 6s ease-in-out infinite}.calmie-welcome h2{font-size:2.5rem;color:var(--primary-700);margin-bottom:var(--spacing-md);position:relative;z-index:1}.calmie-welcome p{font-size:1.125rem;color:var(--primary-600);margin-bottom:var(--spacing-lg);position:relative;z-index:1}.healing-tips{display:flex;justify-content:center;gap:var(--spacing-lg);margin-top:var(--spacing-lg);position:relative;z-index:1}.healing-tip{background:#fffc;border:2px solid var(--primary-100);border-radius:var(--radius-lg);padding:var(--spacing-md);font-size:.875rem;color:var(--primary-600);font-weight:500;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.search-container{margin-bottom:var(--spacing-2xl);position:relative}.search-input{width:100%;padding:var(--spacing-lg) var(--spacing-xl);border:1px solid var(--primary-200);border-radius:var(--radius-2xl);font-size:1rem;background:linear-gradient(135deg,var(--gray-50) 0%,var(--primary-50) 100%);color:var(--gray-800);transition:all var(--transition-normal);box-shadow:var(--shadow-sm);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);letter-spacing:.01em}.search-input:focus{outline:none;border-color:var(--primary-400);box-shadow:0 0 0 3px #765e5e26;background:var(--gray-50)}.search-input::placeholder{color:var(--gray-500);font-weight:400}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--spacing-md);padding:var(--spacing-lg) var(--spacing-xl);border:1px solid transparent;border-radius:var(--radius-2xl);font-size:1rem;font-weight:600;text-decoration:none;cursor:pointer;transition:all var(--transition-normal);position:relative;overflow:hidden;letter-spacing:.01em;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.btn-primary{background:linear-gradient(135deg,var(--primary-700) 0%,var(--accent-rose) 100%);color:#fff;border-color:var(--primary-600);box-shadow:var(--shadow-lg)}.btn-primary:hover{background:linear-gradient(135deg,var(--primary-800) 0%,var(--primary-700) 100%);transform:translateY(-3px);box-shadow:var(--shadow-xl)}.btn-secondary{background:linear-gradient(135deg,var(--gray-50) 0%,var(--primary-100) 100%);color:var(--primary-800);border-color:var(--primary-300)}.btn-secondary:hover{background:linear-gradient(135deg,var(--primary-100) 0%,var(--primary-200) 100%);border-color:var(--primary-400);transform:translateY(-3px);box-shadow:var(--shadow-lg)}@keyframes gentle-float{0%,to{transform:translateY(0) rotate(0)}50%{transform:translateY(-10px) rotate(1deg)}}@keyframes soft-pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.8;transform:scale(1.05)}}@keyframes shimmer{0%{background-position:-200px 0}to{background-position:calc(200px + 100%) 0}}@keyframes fade-in-up{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}.loading{animation:soft-pulse 2s ease-in-out infinite}.shimmer{background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0,#f0f0f0 75%);background-size:200px 100%;animation:shimmer 1.5s infinite}@media (max-width: 1024px){.menu-toggle,.mobile-close-button{display:flex}.side-menu{width:var(--sidebar-width-mobile);max-width:320px}.side-menu-overlay{display:block}.content.sidebar-open{margin-left:0}.healing-tips{flex-direction:column;align-items:center}.calmie-welcome h2{font-size:2rem}.article-card{padding:var(--spacing-lg)}}@media (min-width: 1025px){.menu-toggle,.mobile-close-button,.side-menu-overlay{display:none}.side-menu{transform:translate(0)}.content{margin-left:var(--sidebar-width)}}@media (max-width: 768px){.content{padding:var(--spacing-md)}.side-menu-header{padding:var(--spacing-lg);min-height:100px}.side-menu-title{font-size:1.75rem}.calmie-welcome{padding:var(--spacing-lg)}.calmie-welcome h2{font-size:1.75rem}.article-stats{flex-direction:column;align-items:flex-start;gap:var(--spacing-sm);align-items:baseline}.healing-tips{gap:var(--spacing-sm)}.healing-tip{padding:var(--spacing-sm);font-size:.8rem}}@media (max-width: 480px){.content{padding:var(--spacing-sm)}.article-card{padding:var(--spacing-md);margin-bottom:var(--spacing-lg)}.calmie-welcome{padding:var(--spacing-md)}.calmie-welcome h2{font-size:1.5rem}.healing-tips{flex-wrap:wrap}.side-menu-content{padding:var(--spacing-md)}.menu-link{padding:var(--spacing-sm) var(--spacing-md)}}@media (-webkit-min-device-pixel-ratio: 2),(min-resolution: 192dpi){.article-card,.side-menu,.btn{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}.post-article-page{max-width:900px;margin:0 auto;padding:var(--spacing-2xl);background:var(--gray-50);border-radius:var(--radius-2xl);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:var(--shadow-xl);border:1px solid rgba(255,255,255,.2)}.post-article-page h1{font-size:2.5rem;font-weight:700;color:var(--primary-700);text-align:center;margin-bottom:var(--spacing-3xl);background:linear-gradient(135deg,var(--primary-700) 0%,var(--accent-rose) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.form-group{margin-bottom:var(--spacing-2xl)}.form-group label{display:block;font-weight:600;color:var(--primary-800);margin-bottom:var(--spacing-md);font-size:1.125rem}.form-group input[type=text],.form-group input[type=file]{width:100%;padding:var(--spacing-lg);border:2px solid var(--primary-200);border-radius:var(--radius-xl);font-size:1rem;background:#fffc;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:all var(--transition-normal);box-shadow:var(--shadow-sm)}.form-group input[type=text]:focus,.form-group input[type=file]:focus{outline:none;border-color:var(--primary-500);box-shadow:0 0 0 4px #765e5e1a;background:#fffffff2}.tag-input-wrapper{display:flex;flex-wrap:wrap;gap:var(--spacing-sm);padding:var(--spacing-md);border:2px solid var(--primary-200);border-radius:var(--radius-xl);background:#fffc;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);min-height:60px;align-items:flex-start;align-content:flex-start}.tag-input-wrapper:focus-within{border-color:var(--primary-500);box-shadow:0 0 0 4px #765e5e1a}.tag{display:inline-flex;align-items:center;gap:var(--spacing-xs);padding:var(--spacing-sm) var(--spacing-md);background:linear-gradient(135deg,var(--primary-600) 0%,var(--accent-rose) 100%);color:#fff;border-radius:var(--radius-full);font-size:.875rem;font-weight:500;box-shadow:var(--shadow-sm);animation:fade-in-up .3s ease-out}.tag button{background:none;border:none;color:#fff;font-size:1.125rem;cursor:pointer;padding:0;width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:all var(--transition-fast)}.tag button:hover{background:#fff3;transform:scale(1.1)}.tag-input-wrapper input{flex:1;min-width:120px;border:none;outline:none;background:transparent;font-size:1rem;padding:var(--spacing-sm)}.tag-input-wrapper input::placeholder{color:var(--gray-500)}.react-mde{border:2px solid var(--primary-200)!important;border-radius:var(--radius-xl)!important;overflow:hidden;box-shadow:var(--shadow-md);background:#ffffffe6;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.react-mde .mde-header{background:linear-gradient(135deg,var(--primary-100) 0%,var(--accent-cream) 100%)!important;border-bottom:1px solid var(--primary-200)!important;padding:var(--spacing-md)!important}.react-mde .mde-tabs button{background:transparent!important;border:none!important;color:var(--primary-700)!important;font-weight:600!important;padding:var(--spacing-sm) var(--spacing-lg)!important;border-radius:var(--radius-lg)!important;transition:all var(--transition-fast)!important}.react-mde .mde-tabs button.selected{background:var(--primary-600)!important;color:#fff!important;box-shadow:var(--shadow-sm)}.react-mde .mde-text{min-height:300px!important;padding:var(--spacing-lg)!important;font-size:1rem!important;line-height:1.6!important;border:none!important;background:#ffffff80!important}.react-mde .mde-preview .mde-preview-content{padding:var(--spacing-lg)!important;background:#ffffff80!important;min-height:300px!important}.media-preview{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:var(--spacing-lg);margin-top:var(--spacing-xl);padding:var(--spacing-lg);background:#ffffff80;border-radius:var(--radius-xl);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.media-item{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-md);background:#fffc;border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);transition:all var(--transition-normal)}.media-item:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}.media-item img,.media-item video{border-radius:var(--radius-md);box-shadow:var(--shadow-xs)}.media-item span,.secure-filename{font-size:.75rem;color:var(--gray-600);text-align:center;word-break:break-word;max-width:140px}.thumbnail-preview{margin-top:var(--spacing-md);padding:var(--spacing-md);border:1px solid var(--gray-300);border-radius:var(--radius-lg);background:var(--gray-50);text-align:center;transition:all var(--transition-normal)}.thumbnail-preview:hover{border-color:var(--primary-400);background:var(--primary-50)}.thumbnail-preview p{margin-top:var(--spacing-sm);font-size:.875rem;color:var(--gray-600)}.media-item button{padding:var(--spacing-xs) var(--spacing-sm);background:var(--primary-600);color:#fff;border:none;border-radius:var(--radius-md);font-size:.75rem;cursor:pointer;transition:all var(--transition-fast)}.media-item button:hover{background:var(--primary-700);transform:scale(1.05)}.post-article-page button{display:inline-flex;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-lg) var(--spacing-2xl);background:linear-gradient(135deg,var(--primary-600) 0%,var(--accent-rose) 100%);color:#fff;border:none;border-radius:var(--radius-full);font-size:1rem;font-weight:600;cursor:pointer;transition:all var(--transition-normal);box-shadow:var(--shadow-md);text-decoration:none;margin:var(--spacing-md) 0}.post-article-page button:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg);background:linear-gradient(135deg,var(--primary-700) 0%,var(--accent-gold) 100%)}.post-article-page button:active{transform:translateY(0);box-shadow:var(--shadow-sm)}.post-article-page button:disabled{opacity:.6;cursor:not-allowed;transform:none}@media (max-width: 768px){.post-article-page{padding:var(--spacing-xl);margin:var(--spacing-md)}.post-article-page h1{font-size:2rem}.media-preview{grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}}.view-mode-tabs{display:flex;gap:var(--spacing-sm);margin:var(--spacing-lg) 0;padding:var(--spacing-xs);background:#fffc;border-radius:var(--radius-xl);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:var(--shadow-sm)}.view-mode-tabs button{flex:1;padding:var(--spacing-md) var(--spacing-lg);border:none;border-radius:var(--radius-lg);background:transparent;color:var(--gray-600);font-weight:500;cursor:pointer;transition:all var(--transition-normal);font-size:.875rem}.view-mode-tabs button:hover{background:#765e5e1a;color:var(--primary-700);transform:translateY(-1px)}.view-mode-tabs button.active{background:linear-gradient(135deg,var(--primary-600) 0%,var(--accent-rose) 100%);color:#fff;box-shadow:var(--shadow-md);transform:translateY(-2px)}.period-tabs{display:flex;gap:var(--spacing-xs);margin:var(--spacing-md) 0;padding:var(--spacing-xs);background:#fff9;border-radius:var(--radius-lg);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.period-tabs button{flex:1;padding:var(--spacing-sm) var(--spacing-md);border:none;border-radius:var(--radius-md);background:transparent;color:var(--gray-600);font-weight:500;cursor:pointer;transition:all var(--transition-fast);font-size:.75rem}.period-tabs button:hover{background:#765e5e1a;color:var(--primary-700)}.period-tabs button.active{background:var(--primary-600);color:#fff;box-shadow:var(--shadow-sm)}.rank-badge{display:inline-flex;align-items:center;justify-content:center;min-width:32px;height:24px;padding:0 var(--spacing-xs);background:linear-gradient(135deg,var(--primary-600) 0%,var(--accent-rose) 100%);color:#fff;border-radius:var(--radius-full);font-size:.75rem;font-weight:700;box-shadow:var(--shadow-sm);margin-right:var(--spacing-sm)}.rank-badge.trend{background:linear-gradient(135deg,#ff6b6b,#ffa726);animation:pulse-trend 2s ease-in-out infinite}@keyframes pulse-trend{0%,to{transform:scale(1);box-shadow:var(--shadow-sm)}50%{transform:scale(1.05);box-shadow:var(--shadow-md)}}.article-stats{display:flex;align-items:baseline;gap:var(--spacing-sm);margin:var(--spacing-sm) 0;flex-wrap:wrap}.stat-item{display:inline-flex;align-items:center;gap:var(--spacing-xs);padding:var(--spacing-xs) var(--spacing-sm);background:#fffc;border-radius:var(--radius-md);font-size:.75rem;color:var(--gray-700);font-weight:500;box-shadow:var(--shadow-xs);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.meta-info{display:flex;align-items:center;gap:var(--spacing-sm);margin-top:var(--spacing-sm);flex-wrap:wrap}.meta-item{display:inline-flex;align-items:center;gap:var(--spacing-xs);font-size:.75rem;color:var(--gray-600);font-weight:400}.meta-item:hover{color:var(--primary-600);cursor:pointer}.article-card:has(.rank-badge){position:relative;overflow:visible}.article-card:has(.rank-badge):before{content:"";position:absolute;top:-2px;left:-2px;right:-2px;bottom:-2px;background:linear-gradient(135deg,var(--primary-600) 0%,var(--accent-rose) 100%);border-radius:var(--radius-xl);z-index:-1;opacity:.3;transition:opacity var(--transition-normal)}.article-card:has(.rank-badge):hover:before{opacity:.5}@media (max-width: 768px){.view-mode-tabs{flex-direction:column;gap:var(--spacing-xs)}.view-mode-tabs button{padding:var(--spacing-sm);font-size:.75rem}.period-tabs{flex-direction:column;gap:var(--spacing-xs)}.period-tabs button{padding:var(--spacing-xs) var(--spacing-sm);font-size:.7rem}.article-stats{gap:var(--spacing-xs)}.stat-item{padding:var(--spacing-xs);font-size:.7rem}.rank-badge{min-width:28px;height:20px;font-size:.7rem}}@media (max-width: 480px){.view-mode-tabs{margin:var(--spacing-md) 0}.period-tabs{margin:var(--spacing-sm) 0}.meta-info{flex-direction:column;align-items:flex-start;gap:var(--spacing-xs)}}.menu-section{margin-bottom:2rem}.menu-section-title{font-size:.9rem;font-weight:600;color:var(--text-secondary);margin-bottom:1rem;padding:0 1rem;text-transform:uppercase;letter-spacing:.05em}.view-mode-menu{display:flex;flex-direction:column;gap:.5rem}.ranking-period-menu{margin-top:1rem;padding:1rem;background:rgba(var(--primary-rgb),.05);border-radius:1rem;border:1px solid rgba(var(--primary-rgb),.1)}.period-title{font-size:.8rem;font-weight:600;color:var(--text-secondary);margin-bottom:.75rem;text-align:center}.period-buttons{display:flex;flex-direction:column;gap:.5rem}.period-button{background:rgba(var(--primary-rgb),.05);border:1px solid rgba(var(--primary-rgb),.2);border-radius:.75rem;padding:.5rem 1rem;font-size:.85rem;font-weight:500;color:var(--text-primary);cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);text-align:center}.period-button:hover{background:rgba(var(--primary-rgb),.1);border-color:rgba(var(--primary-rgb),.3);transform:translateY(-1px)}.period-button.active{background:linear-gradient(135deg,var(--primary-color),var(--primary-dark));border-color:var(--primary-color);color:#fff;box-shadow:0 4px 12px rgba(var(--primary-rgb),.3)}.period-button.active:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(var(--primary-rgb),.4)}@media (max-width: 768px){.ranking-period-menu{padding:.75rem}.period-buttons{gap:.375rem}.period-button{padding:.375rem .75rem;font-size:.8rem}}.period-tabs{display:flex;gap:var(--spacing-sm);margin:var(--spacing-md) 0;padding:var(--spacing-sm);background:rgba(var(--primary-rgb),.05);border-radius:var(--radius-xl);border:1px solid rgba(var(--primary-rgb),.1);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.period-tab{flex:1;background:transparent;border:2px solid transparent;border-radius:var(--radius-lg);padding:var(--spacing-md) var(--spacing-lg);font-size:.9rem;font-weight:600;color:var(--primary-600);cursor:pointer;transition:all var(--transition-normal);text-align:center;position:relative;overflow:hidden}.period-tab:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(var(--primary-rgb),.1),transparent);transition:left var(--transition-slow)}.period-tab:hover:before{left:100%}.period-tab:hover{background:rgba(var(--primary-rgb),.1);border-color:rgba(var(--primary-rgb),.2);color:var(--primary-700);transform:translateY(-2px)}.period-tab.active{background:linear-gradient(135deg,var(--primary-600) 0%,var(--accent-rose) 100%);border-color:var(--primary-500);color:#fff;box-shadow:var(--shadow-md);transform:translateY(-1px)}.period-tab.active:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}.comment-form-container{background:linear-gradient(135deg,#ffffff 0%,var(--primary-50) 100%);border-radius:var(--radius-xl);padding:var(--spacing-2xl);margin:var(--spacing-2xl) 0;border:2px solid var(--primary-100);box-shadow:var(--shadow-lg);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.comment-form-header{margin-bottom:var(--spacing-xl);text-align:center}.comment-form-title{font-size:1.5rem;font-weight:700;color:var(--primary-700);margin:0 0 var(--spacing-sm) 0;background:linear-gradient(135deg,var(--primary-600),var(--accent-rose));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.comment-form-subtitle{font-size:.95rem;color:var(--primary-500);margin:0;font-weight:500}.comment-form{display:flex;flex-direction:column;gap:var(--spacing-lg)}.comment-input-container{position:relative}.comment-textarea{width:100%;min-height:120px;padding:var(--spacing-lg);border:2px solid var(--primary-200);border-radius:var(--radius-lg);font-family:inherit;font-size:1rem;line-height:1.6;color:var(--gray-800);background:#fffc;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);resize:vertical;transition:all var(--transition-normal)}.comment-textarea:focus{outline:none;border-color:var(--primary-400);box-shadow:0 0 0 3px rgba(var(--primary-rgb),.1);background:#fffffff2}.comment-textarea:disabled{background:var(--gray-100);color:var(--gray-500);cursor:not-allowed}.comment-input-footer{display:flex;justify-content:space-between;align-items:center;margin-top:var(--spacing-sm);font-size:.85rem}.character-count{color:var(--gray-600);font-weight:500}.login-hint{color:var(--accent-coral);font-weight:600;font-size:.8rem}.comment-error{display:flex;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-md);background:#ef44441a;border:1px solid rgba(239,68,68,.2);border-radius:var(--radius-md);color:#dc2626;font-size:.9rem;font-weight:500}.error-icon{font-size:1.1rem}.comment-form-actions{display:flex;gap:var(--spacing-md);justify-content:flex-end}.comment-cancel-button{padding:var(--spacing-md) var(--spacing-xl);background:transparent;border:2px solid var(--gray-300);border-radius:var(--radius-lg);color:var(--gray-600);font-weight:600;cursor:pointer;transition:all var(--transition-fast)}.comment-cancel-button:hover:not(:disabled){background:var(--gray-100);border-color:var(--gray-400);color:var(--gray-700)}.comment-cancel-button:disabled{opacity:.5;cursor:not-allowed}.comment-submit-button{display:flex;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-md) var(--spacing-xl);background:linear-gradient(135deg,var(--primary-600) 0%,var(--accent-rose) 100%);border:2px solid transparent;border-radius:var(--radius-lg);color:#fff;font-weight:700;cursor:pointer;transition:all var(--transition-normal);box-shadow:var(--shadow-md)}.comment-submit-button:hover:not(:disabled){transform:translateY(-2px);box-shadow:var(--shadow-lg);background:linear-gradient(135deg,var(--primary-700) 0%,var(--accent-gold) 100%)}.comment-submit-button:disabled{opacity:.6;cursor:not-allowed;transform:none;box-shadow:var(--shadow-sm)}.loading-spinner{width:14px;height:14px;border:2px solid rgba(255,255,255,.3);border-top:2px solid white;border-radius:50%;animation:spin 1s linear infinite}.submit-icon{font-size:1.1rem}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.share-buttons{display:flex;align-items:center;gap:var(--spacing-md);margin-top:var(--spacing-lg);padding:var(--spacing-lg);background:rgba(var(--primary-rgb),.05);border-radius:var(--radius-lg);border:1px solid rgba(var(--primary-rgb),.1)}.share-buttons p{margin:0;font-weight:600;color:var(--primary-700);font-size:.9rem}.share-icon{display:flex;align-items:center;justify-content:center;width:40px;height:40px;background:#fff;border-radius:var(--radius-md);border:2px solid var(--primary-200);transition:all var(--transition-fast);box-shadow:var(--shadow-sm)}.share-icon:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:var(--primary-300)}.share-icon img{width:20px;height:20px;object-fit:contain}.recommendation-news{margin-top:var(--spacing-2xl);padding-top:var(--spacing-2xl);border-top:2px solid var(--primary-100)}.user-articles-section,.recommended-articles-section{margin-bottom:var(--spacing-2xl)}.user-articles-section h3,.recommended-articles-section h3{font-size:1.25rem;font-weight:700;color:var(--primary-700);margin-bottom:var(--spacing-lg)}.articles-list{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:var(--spacing-lg)}.recommended-article{background:linear-gradient(135deg,#ffffff 0%,var(--primary-50) 100%);border-radius:var(--radius-lg);padding:var(--spacing-lg);border:2px solid var(--primary-100);transition:all var(--transition-normal)}.recommended-article:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:var(--primary-200)}.recommended-article a{text-decoration:none;color:inherit}.recommended-article h4{font-size:1.1rem;font-weight:600;color:var(--primary-700);margin:0 0 var(--spacing-sm) 0;line-height:1.4}.recommended-article p{font-size:.9rem;color:var(--primary-500);margin:0;font-weight:500}@media (max-width: 768px){.period-tabs{flex-direction:column;gap:var(--spacing-xs)}.period-tab{padding:var(--spacing-sm) var(--spacing-md);font-size:.85rem}.comment-form-container{padding:var(--spacing-lg);margin:var(--spacing-lg) 0}.comment-form-actions{flex-direction:column;gap:var(--spacing-sm)}.comment-cancel-button,.comment-submit-button{width:100%;justify-content:center}.share-buttons{flex-wrap:wrap;gap:var(--spacing-sm)}.articles-list{grid-template-columns:1fr}}@keyframes heartFloat{0%{opacity:1;transform:translateY(0) translate(0) scale(1) rotate(0)}50%{opacity:.8;transform:translateY(calc(var(--random-y) * .5)) translate(calc(var(--random-x) * .5)) scale(1.2) rotate(180deg)}to{opacity:0;transform:translateY(var(--random-y)) translate(var(--random-x)) scale(.5) rotate(360deg)}}.comments-section{padding:var(--spacing-2xl);margin-top:var(--spacing-2xl)}.comments-section h2{color:#765e5e;font-size:1.5rem;margin-bottom:var(--spacing-xl);font-weight:600;display:flex;align-items:center;gap:var(--spacing-md)}.comments-section h2:before{content:"💬";font-size:1.2rem}.comment-card{border-radius:var(--radius-xl);padding:var(--spacing-xl);margin-bottom:var(--spacing-lg);border:1px solid rgba(118,94,94,.1);box-shadow:0 4px 12px #765e5e14;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:all var(--transition-normal)}.comment-card:hover{transform:translateY(-2px);box-shadow:0 8px 24px #765e5e1f;border-color:#765e5e33}.comment-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--spacing-md)}.comment-header strong{color:#765e5e;font-weight:600;font-size:1.1rem}.comment-date{color:var(--gray-500);font-size:.875rem;margin-bottom:var(--spacing-md)}.comment-body{color:var(--gray-700);line-height:1.6;margin-bottom:var(--spacing-lg);font-size:1rem}.comment-footer{display:flex;align-items:center;gap:var(--spacing-lg);padding-top:var(--spacing-md);border-top:1px solid rgba(118,94,94,.1)}.comment-footer button{background:linear-gradient(135deg,#765e5e1a,#765e5e0d);color:#765e5e;border:1px solid rgba(118,94,94,.2);padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--radius-lg);font-size:.875rem;font-weight:500;cursor:pointer;transition:all var(--transition-normal);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}.comment-footer button:hover{background:linear-gradient(135deg,#765e5e33,#765e5e1a);transform:translateY(-1px);box-shadow:0 4px 8px #765e5e26}.comments-section>p{text-align:center;color:var(--gray-500);font-style:italic;padding:var(--spacing-2xl);background:#ffffff80;border-radius:var(--radius-lg);border:2px dashed rgba(118,94,94,.2)}.recommendation-news{margin-top:var(--spacing-3xl)}.user-articles-section h3,.recommendation-news h3{color:#765e5e;font-size:1.5rem;margin-bottom:var(--spacing-xl);font-weight:600;display:flex;align-items:center;gap:var(--spacing-md)}.user-articles-section h3:before{content:"📚";font-size:1.2rem}.recommendation-news h3:before{content:"✨";font-size:1.2rem}.recommended-article{background:linear-gradient(135deg,#ffffffe6,#f7f3f0cc);border-radius:var(--radius-xl);padding:var(--spacing-lg);margin-bottom:var(--spacing-md);border:1px solid rgba(118,94,94,.1);transition:all var(--transition-normal);cursor:pointer;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.recommended-article:hover{transform:translateY(-3px);box-shadow:0 8px 24px #765e5e26;border-color:#765e5e33}.recommended-article h4{color:#765e5e;font-size:1.1rem;margin-bottom:var(--spacing-sm);font-weight:600}.recommended-article p{color:var(--gray-600);font-size:.9rem;margin:0}.mypage-container{max-width:1200px;margin:0 auto;padding:var(--spacing-xl);background:#fffffff2;border-radius:var(--radius-2xl);box-shadow:var(--shadow-lg);min-height:80vh;will-change:transform;transform:translateZ(0)}.mypage-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:60vh;gap:var(--spacing-lg)}.mypage-loading .loading-spinner{width:40px;height:40px;border:4px solid rgba(118,94,94,.1);border-top:4px solid var(--primary-600);border-radius:50%;animation:spin 1s linear infinite}.mypage-error{text-align:center;padding:var(--spacing-2xl);color:var(--gray-600)}.mypage-error h2{color:var(--gray-800);margin-bottom:var(--spacing-lg)}.mypage-error button{padding:var(--spacing-md) var(--spacing-xl);background:var(--primary-600);color:#fff;border:none;border-radius:var(--radius-lg);cursor:pointer;transition:all var(--transition-normal)}.mypage-error button:hover{background:var(--primary-700);transform:translateY(-2px)}.mypage-header{margin-bottom:var(--spacing-2xl)}.profile-section{display:flex;gap:var(--spacing-2xl);margin-bottom:var(--spacing-2xl);align-items:flex-start}.profile-avatar{position:relative;flex-shrink:0}.avatar-image{width:120px;height:120px;border-radius:50%;object-fit:cover;border:4px solid white;box-shadow:var(--shadow-md);will-change:transform}.avatar-image:hover{box-shadow:var(--shadow-lg)}.avatar-upload{position:absolute;bottom:0;right:0}#avatar-input{display:none}.upload-button{display:inline-flex;align-items:center;gap:var(--spacing-xs);padding:var(--spacing-sm) var(--spacing-md);background:var(--primary-600);color:#fff;border-radius:var(--radius-full);cursor:pointer;font-size:.75rem;font-weight:600;box-shadow:var(--shadow-sm);transition:all var(--transition-normal)}.upload-button:hover{background:var(--primary-700);transform:translateY(-2px);box-shadow:var(--shadow-md)}.profile-info{flex:1}.profile-display .username{font-size:2rem;font-weight:700;color:var(--gray-900);margin-bottom:var(--spacing-sm);background:linear-gradient(135deg,var(--primary-600) 0%,var(--accent-rose) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.profile-display .introduction{color:var(--gray-600);font-size:1rem;line-height:1.6;margin-bottom:var(--spacing-md);padding:var(--spacing-md);background:#ffffffb3;border-radius:var(--radius-lg);border-left:4px solid var(--primary-600)}.member-since{color:var(--gray-500);font-size:.875rem;margin-bottom:var(--spacing-lg)}.edit-button{padding:var(--spacing-md) var(--spacing-lg);background:linear-gradient(135deg,var(--primary-600) 0%,var(--accent-rose) 100%);color:#fff;border:none;border-radius:var(--radius-lg);cursor:pointer;font-weight:600;transition:all var(--transition-normal);box-shadow:var(--shadow-sm)}.edit-button:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}.edit-form{display:flex;flex-direction:column;gap:var(--spacing-lg)}.edit-input,.edit-textarea{padding:var(--spacing-md);border:2px solid rgba(118,94,94,.2);border-radius:var(--radius-lg);font-size:1rem;transition:all var(--transition-normal);background:#fffc;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.edit-input:focus,.edit-textarea:focus{outline:none;border-color:var(--primary-600);box-shadow:0 0 0 3px #765e5e1a;background:#fff}.edit-textarea{resize:vertical;font-family:inherit}.edit-actions{display:flex;gap:var(--spacing-md)}.save-button{padding:var(--spacing-md) var(--spacing-lg);background:linear-gradient(135deg,#10b981,#059669);color:#fff;border:none;border-radius:var(--radius-lg);cursor:pointer;font-weight:600;transition:all var(--transition-normal)}.save-button:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}.cancel-button{padding:var(--spacing-md) var(--spacing-lg);background:#6b7280;color:#fff;border:none;border-radius:var(--radius-lg);cursor:pointer;font-weight:600;transition:all var(--transition-normal)}.cancel-button:hover{background:#4b5563;transform:translateY(-2px)}.stats-section{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--spacing-lg)}.stat-card{background:linear-gradient(135deg,#ffffffe6,#ffffffb3);padding:var(--spacing-xl);border-radius:var(--radius-xl);text-align:center;border:1px solid rgba(118,94,94,.1);box-shadow:var(--shadow-sm);transition:all var(--transition-normal);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.stat-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);background:linear-gradient(135deg,#fffffff2,#ffffffe6)}.stat-number{font-size:2.5rem;font-weight:700;background:linear-gradient(135deg,var(--primary-600) 0%,var(--accent-rose) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:var(--spacing-sm)}.stat-label{color:var(--gray-600);font-weight:500;font-size:.875rem;text-transform:uppercase;letter-spacing:.5px}.mypage-tabs{display:flex;gap:var(--spacing-sm);margin-bottom:var(--spacing-2xl);padding:var(--spacing-xs);background:#ffffffb3;border-radius:var(--radius-xl);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:var(--shadow-sm)}.tab-button{flex:1;padding:var(--spacing-md) var(--spacing-lg);border:none;border-radius:var(--radius-lg);background:transparent;color:var(--gray-600);font-weight:500;cursor:pointer;transition:all var(--transition-normal);font-size:.875rem}.tab-button:hover{background:#765e5e1a;color:var(--primary-700);transform:translateY(-2px)}.tab-button.active{background:linear-gradient(135deg,var(--primary-600) 0%,var(--accent-rose) 100%);color:#fff;box-shadow:var(--shadow-md);transform:translateY(-2px)}.mypage-content{min-height:400px}.articles-section h2{color:var(--gray-800);margin-bottom:var(--spacing-xl);font-size:1.5rem;font-weight:600}.empty-state{text-align:center;padding:var(--spacing-3xl);color:var(--gray-600)}.empty-icon{font-size:4rem;margin-bottom:var(--spacing-lg)}.empty-state h3{color:var(--gray-800);margin-bottom:var(--spacing-md);font-size:1.25rem}.empty-state p{margin-bottom:var(--spacing-md);color:var(--gray-600)}.empty-state .note{font-size:.875rem;color:var(--gray-500);font-style:italic}.post-button{padding:var(--spacing-lg) var(--spacing-2xl);background:linear-gradient(135deg,var(--primary-600) 0%,var(--accent-rose) 100%);color:#fff;border:none;border-radius:var(--radius-full);cursor:pointer;font-weight:600;font-size:1rem;transition:all var(--transition-normal);box-shadow:var(--shadow-md)}.post-button:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}@media (max-width: 768px){.mypage-container{padding:var(--spacing-lg);margin:var(--spacing-md)}.profile-section{flex-direction:column;text-align:center;gap:var(--spacing-lg)}.avatar-image{width:100px;height:100px}.stats-section{grid-template-columns:repeat(2,1fr);gap:var(--spacing-md)}.stat-card{padding:var(--spacing-lg)}.stat-number{font-size:2rem}.mypage-tabs{flex-direction:column;gap:var(--spacing-xs)}.tab-button{text-align:center}.articles-grid{grid-template-columns:1fr;gap:var(--spacing-lg)}.edit-actions{flex-direction:column}}@media (max-width: 480px){.mypage-container{padding:var(--spacing-md);margin:var(--spacing-sm)}.stats-section{grid-template-columns:1fr}.profile-display .username{font-size:1.5rem}.empty-icon{font-size:3rem}}.search-bar{margin-bottom:var(--spacing-md)}.search-input-wrapper{display:flex;gap:var(--spacing-xs);align-items:center}.search-input{flex:1;padding:var(--spacing-sm) var(--spacing-md);border:2px solid var(--primary-200);border-radius:var(--radius-lg);font-size:.875rem;background:var(--gray-50);transition:all var(--transition-normal);outline:none}.search-input:focus{border-color:var(--primary-500);background:#fff;box-shadow:0 0 0 3px rgba(var(--primary-500-rgb),.1)}.search-input::placeholder{color:var(--gray-500)}.search-button{padding:var(--spacing-sm);background:var(--primary-600);color:#fff;border:none;border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-normal);display:flex;align-items:center;justify-content:center;min-width:36px;height:36px}.search-button:hover{background:var(--primary-700);transform:translateY(-1px)}.category-tags{display:flex;flex-wrap:wrap;gap:var(--spacing-xs);margin-top:var(--spacing-md)}.category-tag{padding:var(--spacing-xs) var(--spacing-sm);background:linear-gradient(135deg,var(--primary-100) 0%,var(--accent-rose-light) 100%);border:1px solid var(--primary-200);border-radius:var(--radius-full);font-size:.75rem;color:var(--primary-700);cursor:pointer;transition:all var(--transition-normal);white-space:nowrap}.category-tag:hover{background:linear-gradient(135deg,var(--primary-200) 0%,var(--accent-rose) 100%);transform:translateY(-1px);box-shadow:var(--shadow-sm)}.article-actions{display:flex;gap:var(--spacing-sm);margin:var(--spacing-lg) 0;justify-content:flex-end}.edit-button,.delete-button{padding:var(--spacing-sm) var(--spacing-md);border:none;border-radius:var(--radius-md);cursor:pointer;font-size:.875rem;font-weight:600;transition:all var(--transition-normal);display:flex;align-items:center;gap:var(--spacing-xs)}.edit-button{background:linear-gradient(135deg,var(--primary-600) 0%,var(--primary-700) 100%);color:#fff;box-shadow:var(--shadow-sm)}.edit-button:hover{background:linear-gradient(135deg,var(--primary-700) 0%,var(--primary-800) 100%);transform:translateY(-2px);box-shadow:var(--shadow-md)}.delete-button{background:linear-gradient(135deg,#ef4444,#dc2626);color:#fff;box-shadow:var(--shadow-sm)}.delete-button:hover{background:linear-gradient(135deg,#dc2626,#b91c1c);transform:translateY(-2px);box-shadow:var(--shadow-md)}.edit-button:active,.delete-button:active{transform:translateY(0)}.clickable-title,.clickable-header{cursor:pointer;transition:all var(--transition-normal);-webkit-user-select:none;user-select:none}.clickable-title:hover,.clickable-header:hover{opacity:.8;transform:translateY(-1px)}.clickable-title:active,.clickable-header:active{transform:translateY(0)}.post-article-button{position:fixed;bottom:2rem;right:2rem;width:56px;height:56px;background:linear-gradient(135deg,var(--primary-600) 0%,var(--accent-rose) 100%);border:none;border-radius:50%;color:#fff;font-size:1.5rem;cursor:pointer;box-shadow:var(--shadow-lg);transition:all var(--transition-normal);z-index:1000;display:flex;align-items:center;justify-content:center}.post-article-button:hover{transform:translateY(-3px) scale(1.05);box-shadow:var(--shadow-xl)}.post-article-button:active{transform:translateY(-1px) scale(1.02)}@keyframes gentle-float{0%,to{transform:translateY(0)}50%{transform:translateY(-3px)}}.mde-header{flex-shrink:0;display:flex;flex-wrap:wrap;align-items:stretch;border-bottom:1px solid #c8ccd0;border-radius:2px 2px 0 0;background:#f9f9f9}.mde-header .mde-tabs{display:flex;flex-direction:row}.mde-header .mde-tabs button{border-radius:2px;margin:6px 3px;background-color:transparent;border:1px solid transparent;cursor:pointer}.mde-header .mde-tabs button:first-child{margin-left:6px}.mde-header .mde-tabs button.selected{border:1px solid #c8ccd0}.mde-header .svg-icon{width:1em;height:1em;display:inline-block;font-size:inherit;overflow:visible;vertical-align:-.125em}.mde-header ul.mde-header-group{margin:0;padding:10px;list-style:none;display:flex;flex-wrap:nowrap}.mde-header ul.mde-header-group.hidden{visibility:hidden}.mde-header ul.mde-header-group li.mde-header-item{display:inline-block;position:relative;margin:0 4px}.mde-header ul.mde-header-group li.mde-header-item button{text-align:left;cursor:pointer;height:22px;padding:4px;margin:0;border:none;background:none;color:#242729}@keyframes tooltip-appear{0%{opacity:0}to{opacity:1}}.mde-header ul.mde-header-group li.mde-header-item button.tooltipped:hover:before{animation-name:tooltip-appear;animation-duration:.2s;animation-delay:.5s;animation-fill-mode:forwards;opacity:0;position:absolute;z-index:1000001;width:0;height:0;color:#000c;pointer-events:none;content:"";border:5px solid transparent;top:-5px;right:50%;bottom:auto;margin-right:-5px;border-top-color:#000c}.mde-header ul.mde-header-group li.mde-header-item button.tooltipped:hover:after{animation-name:tooltip-appear;animation-duration:.2s;animation-delay:.5s;animation-fill-mode:forwards;font-size:11px;opacity:0;position:absolute;z-index:1000000;padding:5px 8px;color:#fff;pointer-events:none;content:attr(aria-label);background:#000c;border-radius:3px;right:50%;bottom:100%;transform:translate(50%);margin-bottom:5px;white-space:nowrap}.mde-textarea-wrapper{position:relative}.mde-textarea-wrapper textarea.mde-text{width:100%;border:0;padding:10px;vertical-align:top;resize:vertical;overflow-y:auto}.mde-preview .mde-preview-content{padding:10px}.mde-preview .mde-preview-content p,.mde-preview .mde-preview-content blockquote,.mde-preview .mde-preview-content ul,.mde-preview .mde-preview-content ol,.mde-preview .mde-preview-content dl,.mde-preview .mde-preview-content table,.mde-preview .mde-preview-content pre{margin-top:0;margin-bottom:16px}.mde-preview .mde-preview-content h1,.mde-preview .mde-preview-content h2,.mde-preview .mde-preview-content h3{margin-top:24px;margin-bottom:16px;font-weight:600;line-height:1.25;border-bottom:1px solid #eee;padding-bottom:.3em}.mde-preview .mde-preview-content h1{font-size:1.6em}.mde-preview .mde-preview-content h2{font-size:1.4em}.mde-preview .mde-preview-content h3{font-size:1.2em}.mde-preview .mde-preview-content ul,.mde-preview .mde-preview-content ol{padding-left:2em}.mde-preview .mde-preview-content blockquote{margin-left:0;padding:0 1em;color:#777;border-left:.25em solid #ddd}.mde-preview .mde-preview-content blockquote>:first-child{margin-top:0}.mde-preview .mde-preview-content blockquote>:last-child{margin-bottom:0}.mde-preview .mde-preview-content code{padding:.2em 0;margin:0;font-size:90%;background-color:#0000000a;border-radius:3px}.mde-preview .mde-preview-content code:before,.mde-preview .mde-preview-content code:after{letter-spacing:-.2em;content:" "}.mde-preview .mde-preview-content pre{padding:16px;overflow:auto;font-size:85%;line-height:1.45;background-color:#f7f7f7;border-radius:3px}.mde-preview .mde-preview-content pre code{display:inline;padding:0;margin:0;overflow:visible;line-height:inherit;word-wrap:normal;background-color:transparent;border:0}.mde-preview .mde-preview-content pre code:before,.mde-preview .mde-preview-content pre code:after{content:none}.mde-preview .mde-preview-content pre>code{padding:0;margin:0;font-size:100%;word-break:normal;white-space:pre;background:transparent;border:0}.mde-preview .mde-preview-content a{color:#4078c0;text-decoration:none}.mde-preview .mde-preview-content a:hover{text-decoration:underline}.mde-preview .mde-preview-content>*:first-child{margin-top:0!important}.mde-preview .mde-preview-content>*:last-child{margin-bottom:0!important}.mde-preview .mde-preview-content:after{display:table;clear:both;content:""}.mde-preview .mde-preview-content table{display:block;width:100%;border-spacing:0;border-collapse:collapse}.mde-preview .mde-preview-content table thead th{font-weight:700}.mde-preview .mde-preview-content table th,.mde-preview .mde-preview-content table td{padding:6px 13px;border:1px solid #c8ccd0}.react-mde{border:1px solid #c8ccd0;border-radius:2px}.react-mde *{box-sizing:border-box}.react-mde .invisible{display:none}.react-mde .image-tip{-webkit-user-select:none;user-select:none;display:flex!important;padding:7px 10px;margin:0;font-size:13px;line-height:16px;color:gray;background-color:#f9f9f9;border-top:1px solid #c8ccd0;position:relative}.react-mde .image-tip .image-input{min-height:0;opacity:.01;width:100%!important;position:absolute;top:0;left:0;padding:5px;cursor:pointer}ul.mde-suggestions{position:absolute;min-width:180px;padding:0;margin:20px 0 0;list-style:none;cursor:pointer;background:#fff;border:1px solid #c8ccd0;border-radius:3px;box-shadow:0 1px 5px #1b1f2326}ul.mde-suggestions li{padding:4px 8px;border-bottom:1px solid #e1e4e8}ul.mde-suggestions li:first-child{border-top-left-radius:2px;border-top-right-radius:2px}ul.mde-suggestions li:last-child{border-bottom-right-radius:2px;border-bottom-left-radius:2px}ul.mde-suggestions li:hover,ul.mde-suggestions li[aria-selected=true]{color:#fff;background-color:#0366d6}