@charset "utf-8";

.outloginUser {position:relative;}
.outloginUser:has(.outloginUserMenu.on) #userMenuOnf i {transform:rotate(180deg);}
.outloginUser .userInfo {display:flex; align-items:center; gap:8px;}
.outloginUser .userInfo #userMenuOnf {display:flex; align-items:center; margin:0; padding:0; border:none; background:none; cursor:pointer; gap:8px; color:#374151;}
.outloginUser .userInfo #userMenuOnf i {font-size:16px; line-height:1; transition:transform 0.3s ease;}
.outloginUser .outloginUserMenu {display:flex; align-items:flex-start; flex-direction:column; position:absolute; z-index:1000; top:40px; right:0; min-width:140px; padding:8px 0; border:1px solid var(--layout-dropdown-border); border-radius:8px; background:var(--layout-dropdown-bg); opacity:0; box-shadow:0 4px 12px rgba(0, 0, 0, 0.1); list-style:none; transform:translateY(-10px); transition:all 0.3s ease;pointer-events:none;}

.outloginUser .outloginUserMenu.on {top:44px; opacity:1; pointer-events:unset;}
.outloginUser .outloginUserMenu a {display:flex; width:100%; padding:8px 12px; color:#374151; text-decoration:none;}
.outloginUser .outloginUserMenu a i {display:flex; justify-content:center; min-width:24px;}

/* 다크모드 */
html[color-theme="dark"] .outloginUser .userInfo #userMenuOnf {color:#e5e5e5;}
html[color-theme="dark"] .outloginUser .userInfo #userMenuOnf:hover {background:#2d2d2d; border-radius:4px;}
html[color-theme="dark"] .outloginUser .outloginUserMenu {background:#1a1a1a; border-color:#333; box-shadow:0 4px 12px rgba(0, 0, 0, 0.5);}
html[color-theme="dark"] .outloginUser .outloginUserMenu a {color:#e5e5e5;}
html[color-theme="dark"] .outloginUser .outloginUserMenu a:hover {background:#2d2d2d; color:#ffffff;}
html[color-theme="dark"] .outloginUser .outloginUserMenu a .color-pr {color:#1d9bf0;}
html[color-theme="dark"] .outloginUser .outloginUserMenu a.adminLink {color:#ef4444;}
html[color-theme="dark"] .outloginUser .outloginUserMenu a.adminLink:hover {background:rgba(239, 68, 68, 0.1);}
html[color-theme="dark"] .outloginUser .tnbLink {color:#9ca3af;}
html[color-theme="dark"] .outloginUser .tnbLink:hover {color:#ffffff; background:#2d2d2d;}
html[color-theme="dark"] .outloginUser .profile_img {border-color:#444;}