/* web-outlogin : side login box — white card matching web-list / web-visit.
   Logged in: 내 정보 rows + button row. Logged out: login form. */

.web-outlogin {
	background:#fff; /* white card — stands out on the tinted page (--web-background) */
	border:1px solid #e5e7eb;
	border-radius:12px;
	padding:1.1rem 1.1rem 1.2rem;
	box-shadow:0 4px 14px rgba(0,0,0,.08);
}

/* --- Header --- */
.web-outlogin .wo-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:.6rem; }
.web-outlogin .wo-title { margin:0; font-size:16px; font-weight:800; color:var(--web-primary-foreground); }
.web-outlogin .wo-admin { color:#868e96; white-space:nowrap; } /* size from .f-sm */
.web-outlogin .wo-admin:hover { color:var(--web-primary-foreground); text-decoration:none; }

/* --- 내 정보 rows (label left, value right) --- */
.web-outlogin .wo-rows { margin:0 0 .9rem; }
.web-outlogin .wo-row {
	display:flex; align-items:center; justify-content:space-between; gap:.6rem;
	padding:.45rem 0;
	border-top:1px dashed #e5e7eb;   /* size from .f-xs on .wo-rows */
}
.web-outlogin .wo-row:first-child { border-top:0; }
.web-outlogin .wo-row dt { color:#868e96; font-weight:400; }
.web-outlogin .wo-row dd { margin:0; color:var(--web-primary-foreground); font-weight:700; min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.web-outlogin .wo-point { color:var(--web-primary-hover); }
.web-outlogin .wo-point:hover { color:var(--web-primary-foreground); text-decoration:none; }

/* --- Button row (내정보 · 알림 · 로그아웃) --- */
.web-outlogin .wo-btns { display:flex; gap:.4rem; }
.web-outlogin .wo-btn {
	flex:1 1 0;
	display:inline-flex; align-items:center; justify-content:center; gap:.3rem;
	padding:.5rem .4rem;
	background:#fff; border:1px solid #e5e7eb; border-radius:8px;
	color:#495057; font-weight:600; white-space:nowrap; /* size from .f-sm */
	transition:border-color .15s ease, color .15s ease;
}
.web-outlogin .wo-btn:hover { border-color:var(--web-primary-foreground); color:var(--web-primary-foreground); text-decoration:none; }
.web-outlogin .wo-noti b {
	display:inline-block; min-width:16px; padding:0 4px;
	border-radius:8px; background:#ff4d5e; color:#fff;
	font-size:10px; line-height:16px; text-align:center;
}

/* --- Login form --- */
.web-outlogin .wo-field {
	display:flex; align-items:center;
	background:#fff; border:1px solid #e5e7eb; border-radius:8px;
	margin-bottom:.5rem;
	transition:border-color .15s ease;
}
.web-outlogin .wo-field:focus-within { border-color:var(--web-primary-foreground); }
.web-outlogin .wo-field .fa { flex:0 0 38px; text-align:center; color:#adb5bd; }
.web-outlogin .wo-field input {
	flex:1 1 auto; min-width:0;
	border:0; background:transparent; outline:none;
	padding:.6rem .75rem .6rem 0; color:var(--web-primary-foreground); /* size from .f-sm */
}
.web-outlogin .wo-submit {
	display:block; width:100%;
	margin:.3rem 0 .8rem; padding:.65rem 0;
	border:0; border-radius:8px;
	background:var(--web-primary-foreground); color:#fff;   /* == site primary */
	font-weight:700; cursor:pointer; /* size from .f-sm */
	transition:background .15s ease;
}
.web-outlogin .wo-submit:hover { background:color-mix(in srgb, var(--web-primary-foreground) 80%, #000); }

.web-outlogin .wo-foot { display:flex; align-items:center; justify-content:space-between; color:#495057; } /* size from .f-sm */
.web-outlogin .wo-foot .custom-control-label { line-height:1.5rem; cursor:pointer; }
.web-outlogin .wo-links a { color:#495057; }
.web-outlogin .wo-links a:hover { color:var(--web-primary-foreground); text-decoration:none; }
.web-outlogin .wo-sep { color:#ced4da; margin:0 .35rem; }