.comments{margin-top:3rem;padding-top:2rem;border-top:1px solid var(--border);font-family:var(--font-sans)}.comments-title{font-family:var(--font-sans);font-size:1.25rem;font-weight:700;margin:0 0 1.5rem}.comments-count{color:var(--accent);font-weight:600}.comments-note{font-size:.9rem;color:var(--muted-foreground)}.comment-auth.logged-out{padding:1.5rem 1.25rem;margin-bottom:1.75rem;border:1px solid var(--border);border-radius:.85rem;background:color-mix(in srgb,var(--muted) 28%,transparent);text-align:center}.comment-login-hint{display:block;font-size:.92rem;font-weight:600;color:var(--foreground);margin-bottom:.95rem}.comment-login-row{display:flex;flex-wrap:wrap;justify-content:center;gap:.55rem}.comment-login-btn{display:inline-flex;align-items:center;gap:.45rem;font-family:var(--font-sans);font-size:.86rem;font-weight:600;line-height:1;padding:.6rem 1rem;border-radius:.6rem;border:1px solid transparent;cursor:pointer;transition:transform .12s ease,box-shadow .12s ease,filter .12s ease}.comment-login-btn svg{display:block;flex-shrink:0}.comment-login-btn:hover{transform:translateY(-1px);box-shadow:0 4px 12px #00000024}.comment-login-btn:active{transform:translateY(0);box-shadow:none}.comment-login-btn.provider-github{background:#24292f;color:#fff}.comment-login-btn.provider-google{background:#fff;color:#3c4043;border-color:#dadce0}.comment-login-btn.provider-kakao{background:#fee500;color:#181600}.comment-auth.logged-in{display:flex;align-items:center;gap:.65rem;padding:.65rem .85rem;margin-bottom:1.5rem;border:1px solid color-mix(in srgb,var(--foreground) 25%,transparent);border-radius:.7rem;background:color-mix(in srgb,var(--muted) 22%,transparent)}.comment-auth-name{font-family:var(--font-sans);font-size:.9rem;font-weight:600;color:var(--foreground)}.comment-nick-input{flex:1;min-width:0;max-width:12rem;font-family:var(--font-sans);font-size:.9rem;font-weight:600;color:var(--foreground);background:transparent;border:1px solid transparent;border-radius:.4rem;padding:.25rem .45rem;transition:border-color .15s,background .15s}.comment-nick-input:hover{border-color:color-mix(in srgb,var(--foreground) 25%,transparent)}.comment-nick-input:focus{outline:none;background:var(--background);border-color:var(--accent)}.comment-nick-input::placeholder{color:var(--muted-foreground);font-weight:400}.comment-logout{margin-left:auto;font-family:var(--font-sans);font-size:.8rem;padding:.3rem .7rem;border-radius:.45rem;border:1px solid color-mix(in srgb,var(--foreground) 25%,transparent);background:var(--background);color:var(--muted-foreground);cursor:pointer;transition:color .15s,border-color .15s}.comment-logout:hover{color:var(--accent);border-color:var(--accent)}.comment-avatar{width:2.25rem;height:2.25rem;border-radius:50%;object-fit:cover;flex-shrink:0;box-shadow:0 1px 3px #00000014}.comment-avatar-fallback{display:inline-flex;align-items:center;justify-content:center;background:var(--muted);color:var(--muted-foreground);font-size:1rem}.comment-avatar-fallback svg{width:64%;height:64%;display:block}.comment-form{margin-bottom:1.75rem}.reply-form{margin:.85rem 0 .35rem}.comment-input{width:100%;box-sizing:border-box;font-family:var(--font-sans);font-size:.95rem;line-height:1.65;padding:.85rem 1rem;border:1px solid color-mix(in srgb,var(--foreground) 25%,transparent);border-radius:.65rem;background:var(--background);color:var(--foreground);resize:vertical;transition:border-color .15s,box-shadow .15s}.comment-input::placeholder{color:var(--muted-foreground)}.comment-input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent)}.comment-form-bar{display:flex;align-items:center;justify-content:space-between;gap:.75rem;margin-top:.6rem}.comment-secret-toggle{display:inline-flex;align-items:center;gap:.3rem;font-family:var(--font-sans);font-size:.8rem;font-weight:600;color:var(--muted-foreground);padding:.4rem .85rem;border:1px solid var(--border);border-radius:999px;cursor:pointer;user-select:none;transition:color .15s,border-color .15s,background .15s}.comment-secret-toggle:hover{color:var(--accent);border-color:var(--accent)}.comment-secret-toggle input{position:absolute;opacity:0;width:0;height:0}.comment-secret-toggle:has(input:checked){color:var(--accent);border-color:var(--accent);background:color-mix(in srgb,var(--accent) 14%,transparent)}.comment-secret-toggle:has(input:focus-visible){box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent)}.comment-btn.primary{font-family:var(--font-sans);font-size:.86rem;font-weight:600;padding:.5rem 1.2rem;border-radius:.55rem;border:1px solid var(--accent);background:var(--accent);color:var(--accent-foreground);cursor:pointer;transition:filter .15s,opacity .15s}.comment-btn.primary:hover{filter:brightness(1.08)}.comment-btn.primary:disabled{opacity:.5;cursor:default;filter:none}.comment-list{list-style:none;margin:0;padding:0}.comment-list.replies{margin-left:1.5rem;padding-left:1.1rem;border-left:2px solid var(--border)}.comment{padding:1.1rem 0;border-bottom:1px solid var(--border)}.comment-list.replies .comment:last-child{border-bottom:none}.comment-head{display:flex;align-items:center;gap:.65rem;margin-bottom:.55rem}.comment-meta{display:flex;flex-direction:column;line-height:1.35}.comment-name{font-family:var(--font-sans);font-size:.9rem;font-weight:600;color:var(--foreground)}.comment-time{font-family:var(--font-sans);font-size:.75rem;color:var(--muted-foreground)}.comment-secret-badge{font-size:.7rem;font-weight:600;color:var(--accent);vertical-align:middle}.comment.locked .comment-text{color:var(--muted-foreground);font-style:italic}.comment.locked .comment-avatar-fallback{background:var(--muted);color:var(--muted-foreground)}.comment-text{font-family:var(--font-sans);font-size:.95rem;line-height:1.7;margin:0;padding-left:2.9rem;white-space:pre-wrap;word-break:break-word}.comment-actions{display:flex;gap:.85rem;margin-top:.55rem;padding-left:2.9rem}.comment-link{font-family:var(--font-sans);font-size:.78rem;font-weight:500;background:none;border:none;padding:0;color:var(--muted-foreground);cursor:pointer}.comment-link:hover{color:var(--accent);text-decoration:underline;text-underline-offset:3px}.comment-link.danger:hover{color:var(--code)}
