html,body,#root{margin:0;height:100%}*,*:before,*:after{box-sizing:border-box}.App{display:flex;flex-direction:column;min-height:100vh}.header{display:flex;align-items:center;justify-content:flex-start;gap:16px;background-color:#4f46e5;color:#fff;padding:16px 24px;font-size:28px;font-weight:700}.header-title{font-size:28px;font-weight:700}.blog-list-len{font-size:18px;font-weight:600;line-height:1;color:#e0e7ff}.header-actions{display:flex;align-items:center;gap:12px;margin-left:auto}.add-blog-btn{flex-shrink:0;font-family:inherit;font-size:15px;font-weight:600;color:#fff;background:linear-gradient(135deg,#3b82f6,#2563eb);border:none;border-radius:8px;padding:10px 18px;cursor:pointer;box-shadow:0 4px 12px #2563eb59;transition:background .15s ease,box-shadow .15s ease,transform .15s ease}.add-blog-btn:hover{background:linear-gradient(135deg,#2563eb,#1d4ed8);transform:translateY(-1px);box-shadow:0 6px 16px #2563eb73}.add-blog-btn:focus-visible{outline:2px solid #ffffff;outline-offset:2px}.tooltip{z-index:1100;max-width:260px;padding:8px 12px;font-family:inherit;font-size:13px;font-weight:500;line-height:1.4;white-space:normal;word-break:break-word;color:#fff;background-color:#111827;border-radius:8px;box-shadow:0 8px 20px #11182759;pointer-events:none}.tooltip:after{content:"";position:absolute;top:-4px;left:50%;transform:translate(-50%) rotate(45deg);width:8px;height:8px;background-color:#111827;border-radius:1px}.random-blogs-btn{background:linear-gradient(135deg,#a855f7,#7c3aed);box-shadow:0 4px 12px #7c3aed59}.random-blogs-btn:hover{background:linear-gradient(135deg,#9333ea,#6d28d9);box-shadow:0 6px 16px #7c3aed73}.fast-comment-btn{background:linear-gradient(135deg,#22c55e,#16a34a);box-shadow:0 4px 12px #16a34a59}.fast-comment-btn:hover{background:linear-gradient(135deg,#16a34a,#15803d);box-shadow:0 6px 16px #16a34a73}.game-btn{font-size:20px;line-height:1;padding:9px 14px;border-radius:999px;background:linear-gradient(135deg,#f472b6,#a21caf 55%,#7e22ce);box-shadow:0 4px 14px #a21cac73}.game-btn:hover{background:linear-gradient(135deg,#ec4899,#86198f 55%,#6b21a8);transform:translateY(-1px) scale(1.05);box-shadow:0 6px 18px #a21cac8c}.game-btn:active{transform:translateY(0) scale(.98);box-shadow:0 2px 8px #a21cac66}.game-page{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:16px;padding:32px 24px 40px;text-align:center;background:linear-gradient(160deg,#0f172a,#1e1b4b 55%,#312e81);animation:game-page-fade-in .25s ease}.game-title{margin:0;font-size:56px;font-weight:800;letter-spacing:.02em;color:#fff;background:linear-gradient(90deg,#f9a8d4,#a5b4fc,#67e8f9);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.game-hint{margin:0;font-size:15px;font-weight:500;color:#c7d2fe}@keyframes game-page-fade-in{0%{opacity:0}to{opacity:1}}.gomoku{display:flex;flex-direction:column;align-items:center;gap:18px;width:100%}.gomoku-status{min-height:58px;display:flex;align-items:center;justify-content:center}.gomoku-turn{display:flex;align-items:center;gap:12px;padding:10px 26px;font-size:20px;font-weight:700;letter-spacing:.01em;color:#fff;background:#ffffff14;border:1px solid rgba(255,255,255,.16);border-radius:999px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);box-shadow:0 8px 24px #00000040;animation:game-page-fade-in .2s ease}.turn-stone{width:22px;height:22px;border-radius:50%;flex-shrink:0}.turn-stone-black{background:radial-gradient(circle at 32% 30%,#6b7280,#1f2937 45%,#030712);box-shadow:0 2px 5px #00000080,inset 0 -2px 3px #0009}.turn-stone-white{background:radial-gradient(circle at 32% 30%,#fff,#e5e7eb 55%,#b3b9c4);box-shadow:0 2px 5px #0006,inset 0 -2px 3px #00000026}.gomoku-banner{font-size:34px;font-weight:800;letter-spacing:.02em;color:#fff;text-shadow:0 4px 16px rgba(0,0,0,.5);animation:gomoku-banner-pop .45s cubic-bezier(.34,1.56,.64,1)}.gomoku-banner-black{color:#f8fafc;text-shadow:0 0 24px rgba(148,163,184,.95),0 4px 16px rgba(0,0,0,.5)}.gomoku-banner-white{color:#fff;text-shadow:0 0 24px rgba(255,255,255,.85),0 4px 16px rgba(0,0,0,.5)}.gomoku-banner-draw{color:#fbbf24;text-shadow:0 0 24px rgba(251,191,36,.7),0 4px 16px rgba(0,0,0,.5)}@keyframes gomoku-banner-pop{0%{transform:scale(.55);opacity:0}to{transform:scale(1);opacity:1}}.gomoku-board-frame{padding:12px;background:linear-gradient(145deg,#a06c34,#7c4f1d 55%,#5c380f);border-radius:18px;box-shadow:0 24px 56px #00000080,inset 0 1px #ffffff38,inset 0 -3px 8px #0006}.gomoku-board{display:grid;grid-template-columns:repeat(15,1fr);grid-template-rows:repeat(15,1fr);gap:1px;width:min(92vw,588px);aspect-ratio:1 / 1;background:#4a2c0c;border-radius:4px;overflow:hidden}.gomoku-board>div{aspect-ratio:1 / 1;position:relative;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#eec078,#e2a955 60%,#d69a44)}.chess-black,.chess-white{width:84%;height:84%;border-radius:50%;animation:stone-drop .18s ease-out}.chess-black{background:radial-gradient(circle at 32% 30%,#6b7280,#1f2937 45%,#030712);box-shadow:0 3px 6px #00000073,inset 0 -2px 5px #000000a6,inset 0 2px 3px #ffffff2e}.chess-white{background:radial-gradient(circle at 32% 30%,#fff,#e8eaee 55%,#b3b9c4);box-shadow:0 3px 6px #0006,inset 0 -2px 5px #0000002e,inset 0 2px 3px #ffffffe6}@keyframes stone-drop{0%{transform:scale(1.35);opacity:.2}to{transform:scale(1);opacity:1}}.chess-marker{position:absolute;width:26%;height:26%;border-radius:50%;background:#ef4444;box-shadow:0 0 6px #ef4444cc}.win-ring{position:absolute;width:92%;height:92%;border-radius:50%;border:2px solid #fbbf24;box-shadow:0 0 14px #fbbf24e6,inset 0 0 10px #fbbf2499;animation:win-pulse 1.2s ease-in-out infinite}@keyframes win-pulse{0%,to{transform:scale(1);opacity:1}50%{transform:scale(1.08);opacity:.75}}.gomoku-board>div:not(.chess-black):not(.chess-white){cursor:pointer}.gomoku-board>div:not(.chess-black):not(.chess-white):after{content:"";width:84%;height:84%;border-radius:50%;opacity:0;transition:opacity .12s ease}.gomoku-board[data-player=black]>div:not(.chess-black):not(.chess-white):after{background:radial-gradient(circle at 32% 30%,#6b728099,#11182799 55%,#030712a6)}.gomoku-board[data-player=white]>div:not(.chess-black):not(.chess-white):after{background:radial-gradient(circle at 32% 30%,#ffffffd9,#e4e6eabf 55%,#a3aab5b3)}.gomoku-board>div:not(.chess-black):not(.chess-white):hover:after,.gomoku-board>div:not(.chess-black):not(.chess-white):focus-visible:after{opacity:1}.gomoku-board>div:not(.chess-black):not(.chess-white):focus-visible{outline:2px solid #fbbf24;outline-offset:-3px;border-radius:4px}.gomoku-board[data-over=true]>div:not(.chess-black):not(.chess-white){cursor:default}.gomoku-board[data-over=true]>div:not(.chess-black):not(.chess-white):after{display:none}.gomoku-reset{font-family:inherit;font-size:15px;font-weight:600;color:#fff;background:linear-gradient(135deg,#f59e0b,#d97706);border:none;border-radius:8px;padding:10px 26px;cursor:pointer;box-shadow:0 4px 12px #d9770666;transition:background .15s ease,box-shadow .15s ease,transform .15s ease}.gomoku-reset:hover{background:linear-gradient(135deg,#d97706,#b45309);transform:translateY(-1px);box-shadow:0 6px 16px #d9770680}.gomoku-reset:active{transform:translateY(0);box-shadow:0 2px 8px #d9770666}.gomoku-reset:focus-visible{outline:2px solid #ffffff;outline-offset:2px}.gomoku-post-records{font-family:inherit;font-size:15px;font-weight:600;color:#fff;background:linear-gradient(135deg,#22c55e,#16a34a);border:none;border-radius:8px;padding:10px 26px;cursor:pointer;box-shadow:0 4px 12px #16a34a66;transition:background .15s ease,box-shadow .15s ease,transform .15s ease}.gomoku-post-records:hover{background:linear-gradient(135deg,#16a34a,#15803d);transform:translateY(-1px);box-shadow:0 6px 16px #16a34a80}.gomoku-post-records:active{transform:translateY(0);box-shadow:0 2px 8px #16a34a66}.gomoku-post-records:focus-visible{outline:2px solid #ffffff;outline-offset:2px}.main{flex:1;display:flex;flex-direction:row;align-items:stretch;gap:24px;padding:24px}.blog-list-column{display:flex;flex-direction:column;gap:16px;width:300px;flex-shrink:0;align-self:stretch}.search{flex-shrink:0}.search-input{width:100%;font-family:inherit;font-size:14px;color:#111827;background-color:#fff;border:1px solid #d1d5db;border-radius:8px;padding:8px 12px;transition:border-color .15s ease,box-shadow .15s ease,background-color .15s ease}.search-input::placeholder{color:#9ca3af}.search-input:focus{outline:none;border-color:#6366f1;background-color:#fff;box-shadow:0 0 0 3px #6366f126}.blog-list{position:relative;width:100%;flex-shrink:0;flex:1;background:linear-gradient(180deg,#fff,#fafaff);border:1px solid #e5e7eb;border-radius:12px;box-shadow:0 1px 3px #00000014,0 12px 28px #4f46e514;padding:16px;display:flex;flex-direction:column;gap:8px;overflow:hidden}.blog-list:before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,#6366f1,#8b5cf6 55%,#d946ef)}.blog-list-title{margin:4px 0 8px;padding:0 4px;font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#6b7280}.blog-list-scroll{flex:1 1 0;min-height:0;overflow-y:auto;overflow-x:hidden}.blog-list-items{margin:0;padding:0;list-style:none}.blog-list-items li{margin-bottom:8px}.list-item{width:100%;height:40px;box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 12px;font-family:inherit;font-size:15px;font-weight:500;text-align:left;color:#374151;background-color:#f9fafb;border:none;border-radius:8px;cursor:pointer;transition:background-color .15s ease,color .15s ease,box-shadow .15s ease,transform .15s ease}.list-item:hover{background-color:#eef2ff;color:#4f46e5;transform:translate(2px)}.list-item:focus-visible{outline:2px solid #6366f1;outline-offset:2px}.list-item-selected,.list-item-selected:hover{background:linear-gradient(135deg,#6366f1,#4f46e5 55%,#4338ca);color:#fff;font-weight:600;box-shadow:0 6px 16px #4f46e559;transform:none}.list-item-arrow{font-size:14px;line-height:1;opacity:0;transform:translate(-4px);transition:opacity .15s ease,transform .15s ease}.list-item:hover .list-item-arrow,.list-item-selected .list-item-arrow{opacity:1;transform:translate(0)}.blog{flex:1;position:relative;background-color:#fff;border:1px solid #e5e7eb;border-radius:12px;box-shadow:0 1px 3px #00000014;padding:32px;display:flex;flex-direction:column;animation:blog-fade-in .25s ease}.blog-actions{position:absolute;top:16px;right:16px;display:flex;gap:8px}.edit-btn{font-family:inherit;font-size:14px;font-weight:600;color:#fff;background:linear-gradient(135deg,#60a5fa,#3b82f6 55%,#2563eb);border:none;border-radius:8px;padding:8px 16px;cursor:pointer;box-shadow:0 4px 12px #2563eb59;transition:background .15s ease,box-shadow .15s ease,transform .15s ease}.edit-btn:hover{background:linear-gradient(135deg,#3b82f6,#2563eb 55%,#1d4ed8);transform:translateY(-1px);box-shadow:0 6px 16px #2563eb80}.edit-btn:active{transform:translateY(0);box-shadow:0 2px 8px #2563eb66}.edit-btn:focus-visible{outline:2px solid #2563eb;outline-offset:2px}.delete-btn{font-family:inherit;font-size:14px;font-weight:600;color:#fff;background:linear-gradient(135deg,#f87171,#ef4444 55%,#dc2626);border:none;border-radius:8px;padding:8px 16px;cursor:pointer;box-shadow:0 4px 12px #dc262659;transition:background .15s ease,box-shadow .15s ease,transform .15s ease}.delete-btn:hover{background:linear-gradient(135deg,#ef4444,#dc2626 55%,#b91c1c);transform:translateY(-1px);box-shadow:0 6px 16px #dc262680}.delete-btn:active{transform:translateY(0);box-shadow:0 2px 8px #dc262666}.delete-btn:focus-visible{outline:2px solid #dc2626;outline-offset:2px}@keyframes blog-fade-in{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}.truncated-title{display:inline-block;max-width:300px;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;vertical-align:bottom}.blog-title{width:fit-content;font-size:24px;margin-top:0}.blog-detail{margin:8px 0 0;font-size:16px;line-height:1.6;color:#4b5563}.modal-overlay{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;background:#1118278c;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);animation:modal-overlay-fade-in .2s ease}.blog-form-modal{position:relative;width:100%;max-width:440px;background:#fff;border-radius:16px;box-shadow:0 24px 64px #11182759;padding:32px;overflow:hidden;animation:modal-pop-in .25s ease}.blog-form-modal:before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,#3b82f6,#2563eb 55%,#1d4ed8)}.visible-count{position:absolute;top:12px;left:12px;font-size:13px;font-weight:600;line-height:1;color:#6b7280;background-color:#f3f4f6;border-radius:6px;padding:6px 8px}.close-btn{position:absolute;top:12px;right:12px;width:32px;height:32px;display:flex;align-items:center;justify-content:center;font-family:inherit;font-size:16px;font-weight:600;line-height:1;color:#6b7280;background-color:#f3f4f6;border:none;border-radius:50%;cursor:pointer;transition:background-color .15s ease,color .15s ease,transform .15s ease}.close-btn:hover{background-color:#e5e7eb;color:#111827;transform:rotate(90deg)}.close-btn:focus-visible{outline:2px solid #3b82f6;outline-offset:2px}.blog-form-title{margin:0 0 20px;font-size:22px;font-weight:700;color:#111827}.blog-form-field{margin-bottom:16px}.blog-form-field label{display:block;margin-bottom:6px;font-size:13px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:#6b7280}.blog-form-field input,.blog-form-field textarea{width:100%;font-family:inherit;font-size:15px;color:#111827;background-color:#f9fafb;border:1px solid #d1d5db;border-radius:8px;padding:10px 12px;transition:border-color .15s ease,box-shadow .15s ease,background-color .15s ease}.blog-form-field textarea{min-height:96px;resize:vertical}.blog-form-field input:focus,.blog-form-field textarea:focus{outline:none;border-color:#3b82f6;background-color:#fff;box-shadow:0 0 0 3px #3b82f626}.duplicate-error{margin:8px 0 0;font-size:13px;font-weight:500;line-height:1.5;color:#dc2626}.blog-form-actions{display:flex;justify-content:flex-end;gap:12px;margin-top:24px}.blog-form-cancel{font-family:inherit;font-size:15px;font-weight:500;color:#4b5563;background-color:transparent;border:1px solid #d1d5db;border-radius:8px;padding:10px 16px;cursor:pointer;transition:background-color .15s ease,border-color .15s ease}.blog-form-cancel:hover{background-color:#f3f4f6;border-color:#9ca3af}.submit-btn{font-family:inherit;font-size:15px;font-weight:600;color:#fff;background:linear-gradient(135deg,#3b82f6,#2563eb);border:none;border-radius:8px;padding:10px 18px;cursor:pointer;box-shadow:0 4px 12px #2563eb4d;transition:background .15s ease,box-shadow .15s ease,transform .15s ease}.submit-btn:hover{background:linear-gradient(135deg,#2563eb,#1d4ed8);transform:translateY(-1px);box-shadow:0 6px 16px #2563eb66}@keyframes modal-overlay-fade-in{0%{opacity:0}to{opacity:1}}@keyframes modal-pop-in{0%{opacity:0;transform:translateY(12px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}.comments{margin-top:auto;padding-top:24px;border-top:1px solid #e5e7eb;display:flex;flex-direction:column;gap:16px}.comments-header{display:flex;align-items:center;gap:10px}.comments-title{margin:0;display:flex;align-items:center;gap:10px;font-size:18px;font-weight:700;letter-spacing:.01em;color:#111827}.comments-title:before{content:"";width:10px;height:10px;border-radius:50%;background:linear-gradient(135deg,#6366f1,#8b5cf6);box-shadow:0 2px 6px #6366f173}.comments-count{font-size:13px;font-weight:700;line-height:1;color:#4f46e5;background-color:#eef2ff;border:1px solid #e0e7ff;border-radius:999px;padding:4px 10px}.comments-list{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px;max-height:280px;overflow-y:auto}.comment-item{background:linear-gradient(180deg,#f9fafb,#f3f4f6);border:1px solid #e5e7eb;border-left:4px solid #6366f1;border-radius:10px;padding:12px 16px;animation:comment-fade-in .2s ease;transition:border-color .15s ease,box-shadow .15s ease,transform .15s ease}.comment-item:hover{border-color:#c7d2fe;border-left-color:#4f46e5;box-shadow:0 4px 12px #4f46e51f;transform:translate(2px)}.comment-text{margin:0;font-size:15px;line-height:1.55;color:#1f2937;white-space:pre-wrap;overflow-wrap:break-word}.comment-time{display:block;margin-top:6px;font-size:12px;color:#9ca3af}.comments-empty{margin:0;padding:16px;font-size:14px;color:#6b7280;background-color:#f9fafb;border:1px dashed #d1d5db;border-radius:10px;text-align:center}.comment-form{display:flex;flex-direction:column;gap:10px}.comment-textarea{width:100%;font-family:inherit;font-size:15px;line-height:1.5;color:#111827;background-color:#f9fafb;border:1px solid #d1d5db;border-radius:10px;padding:12px 14px;min-height:90px;resize:vertical;transition:border-color .15s ease,box-shadow .15s ease,background-color .15s ease}.comment-textarea::placeholder{color:#9ca3af}.comment-textarea:focus{outline:none;border-color:#6366f1;background-color:#fff;box-shadow:0 0 0 3px #6366f126}.comment-btn{align-self:flex-end;font-family:inherit;font-size:15px;font-weight:600;color:#fff;background:linear-gradient(135deg,#6366f1,#4f46e5 55%,#4338ca);border:none;border-radius:8px;padding:10px 20px;cursor:pointer;box-shadow:0 4px 12px #4f46e559;transition:background .15s ease,box-shadow .15s ease,transform .15s ease,opacity .15s ease}.comment-btn:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 6px 16px #4f46e580}.comment-btn:active:not(:disabled){transform:translateY(0);box-shadow:0 2px 8px #4f46e566}.comment-btn:focus-visible{outline:2px solid #4f46e5;outline-offset:2px}.comment-btn:disabled{opacity:.5;cursor:not-allowed;box-shadow:none}@keyframes comment-fade-in{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}.markdown-body{font-size:16px;line-height:1.6;color:#4b5563;overflow-wrap:break-word}.markdown-body>:first-child{margin-top:0}.markdown-body>:last-child{margin-bottom:0}.markdown-body .markdown-paragraph{margin:0 0 12px}.markdown-body h1,.markdown-body h2,.markdown-body h3,.markdown-body h4,.markdown-body h5,.markdown-body h6{margin:16px 0 8px;line-height:1.3;font-weight:700;color:#111827}.markdown-body h1{font-size:24px}.markdown-body h2{font-size:21px}.markdown-body h3{font-size:18px}.markdown-body h4{font-size:16px}.markdown-body h5{font-size:14px}.markdown-body h6{font-size:13px;letter-spacing:.04em;text-transform:uppercase;color:#6b7280}.markdown-body ul,.markdown-body ol{margin:0 0 12px;padding-left:24px}.markdown-body li{margin-bottom:4px}.markdown-body li::marker{color:#6366f1}.markdown-body blockquote{margin:0 0 12px;padding:10px 16px;border-left:4px solid #6366f1;border-radius:0 8px 8px 0;background:linear-gradient(90deg,#f5f3ff,#eef2ff)}.markdown-body .markdown-code-block{margin:0 0 12px;padding:12px 16px;border-radius:8px;background-color:#111827;overflow-x:auto}.markdown-body .markdown-code-block code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13.5px;line-height:1.55;color:#e5e7eb;white-space:pre}.markdown-body code.inline-code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.9em;color:#4338ca;background-color:#eef2ff;border:1px solid #e0e7ff;border-radius:4px;padding:1px 5px}.markdown-body hr{margin:16px 0;border:none;border-top:1px solid #e5e7eb}.markdown-body a{color:#4f46e5;font-weight:500;text-decoration:underline;text-underline-offset:2px;overflow-wrap:anywhere}.markdown-body a:hover{color:#4338ca}.markdown-body img.markdown-image{display:block;max-width:100%;height:auto;margin:8px 0;border-radius:8px}.markdown-hint{margin:8px 0 0;font-size:12.5px;font-weight:500;line-height:1.5;color:#9ca3af}.markdown-preview{margin-top:10px;padding:12px 14px;border:1px dashed #c7d2fe;border-radius:8px;background:linear-gradient(180deg,#f9fafb,#f5f3ff);max-height:220px;overflow-y:auto}.markdown-preview-label{margin-bottom:6px;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#6b7280}.markdown-preview .markdown-body{font-size:14px;color:#374151}