Polish quick login buttons and hidden behavior

Fix [hidden] being overridden by button styles, render Google/Kakao/Naver quick login as icons, and show logout only when authenticated.

Co-authored-by: Cursor <cursoragent@cursor.com>

styles.css

@@ -35,6 +35,11 @@ html[data-theme="light"] {
   box-sizing: border-box;
 }
 
+/* Ensure HTML hidden attribute always works (avoid .btn overriding it) */
+[hidden] {
+  display: none !important;
+}
+
 body {
   margin: 0;
   font-family: var(--sans);
@@ -138,6 +143,43 @@ html[data-theme="light"] .topbar {
   justify-content: flex-end;
 }
 
+.sr-only {
+  position: absolute !important;
+  width: 1px !important;
+  height: 1px !important;
+  padding: 0 !important;
+  margin: -1px !important;
+  overflow: hidden !important;
+  clip: rect(0, 0, 0, 0) !important;
+  white-space: nowrap !important;
+  border: 0 !important;
+}
+
+.btn.icon-only {
+  width: 40px;
+  height: 40px;
+  padding: 0;
+  justify-content: center;
+  gap: 0;
+}
+
+.btn.icon-only svg {
+  width: 18px;
+  height: 18px;
+}
+
+.btn.provider-google {
+  border-color: rgba(66, 133, 244, 0.25);
+}
+
+.btn.provider-kakao {
+  border-color: rgba(250, 225, 0, 0.35);
+}
+
+.btn.provider-naver {
+  border-color: rgba(3, 199, 90, 0.28);
+}
+
 .user {
   display: inline-flex;
   align-items: center;