로그아웃 버튼 및 로직 추가 css수정

src/styles/common.css

@@ -102,6 +102,14 @@ input, textarea {
   justify-content: space-between;
 }
 
+.header-actions {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  flex-shrink: 0;
+  margin-left: 1rem;
+}
+
 .brand { display: flex; align-items: center; gap: 0.75rem; }
 .main-logo { height: clamp(28px, 4vmin, 40px); width: auto; }
 .brand h1 { font-size: clamp(0.85rem, 1.4vmin, 1.05rem); font-weight: 600; color: var(--text-main); }
@@ -175,7 +183,8 @@ input, textarea {
 }
 
 /* --- Role Toggle Switch --- */
-.role-toggle-wrapper {
+.role-toggle-wrapper,
+.role-switcher {
   display: flex;
   align-items: center;
   gap: 0.75rem;
@@ -197,20 +206,23 @@ input, textarea {
   font-weight: 700;
 }
 
-.role-toggle {
+.role-toggle,
+.switch {
   position: relative;
   display: inline-block;
   width: 40px;
   height: 20px;
 }
 
-.role-toggle input {
+.role-toggle input,
+.switch input {
   opacity: 0;
   width: 0;
   height: 0;
 }
 
-.role-slider {
+.role-slider,
+.slider {
   position: absolute;
   cursor: pointer;
   top: 0;
@@ -222,7 +234,8 @@ input, textarea {
   border-radius: 20px;
 }
 
-.role-slider:before {
+.role-slider:before,
+.slider:before {
   position: absolute;
   content: "";
   height: 16px;
@@ -235,11 +248,13 @@ input, textarea {
   box-shadow: 0 1px 3px rgba(0,0,0,0.2);
 }
 
-input:checked + .role-slider {
+.role-toggle input:checked + .role-slider,
+.switch input:checked + .slider {
   background-color: var(--primary);
 }
 
-input:checked + .role-slider:before {
+.role-toggle input:checked + .role-slider:before,
+.switch input:checked + .slider:before {
   transform: translateX(20px);
 }