/* 드로어 컨테이너 */
.mdrawer {
  position: fixed;
  inset: 0 0 0 auto;
  width: min(100vw, 100%);
  background: rgba(0,0,0,.25);
  box-shadow: -8px 0 24px rgba(0,0,0,.18);
  z-index: 1000;
  /* 열림/닫힘 트랜지션은 JS에서 transform 토글로 제어한다고 가정 */
}

/* 내부 네비 */
.mdrawer__nav {
  display: block;
  padding: 14px 16px 24px;
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Noto Sans KR', sans-serif;
  line-height: 1.45;
}

/* 상단바 */
/* 상단바 */
.mTopmenu {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap:wrap;
  gap: 8px;
  margin: 0 0 12px;
  padding: 0 0 12px;
  list-style: none;
  border-bottom: 1px solid #ececec;
}
.mTopmenu li.logo a:hover { background: none; }
.mTopmenu li.logo a { height: 28px; display: inline-block; }
.mTopmenu li.logo a img { height: 100%; }

/* 로그인 전: 버튼들 가로 나열 */
.mTopmenu .auth {
  display: flex;
  align-items: center;
  gap: 8px;
}
.mTopmenu .auth > a {
  font-size: 12px;
  line-height: 20px;
  display: inline-block;
  padding: 3px 5px;
  height: auto;
  border: 1px solid #ccc;
  white-space: nowrap;
}
.mTopmenu li.logout{
	display:flex;
}
.auth__links { display:flex; align-items:center; gap:12px; height:33px;margin:10px 0;}
.auth__links .link { font-size: 13.5px; color:#333; text-decoration: none;display:inline-block;padding:3px 5px; height:25px;line-height:25px;border:1px solid #ccc;border-radius:10px; }
.auth__links .link:hover { text-decoration: none; background:#000;color:#fff;  transition: background-color 1s ease;font-weight:bold;}
/* 로그인 후: 세로 레이아웃 */
.mTopmenu .auth.is-logged-in {
  display: flex;
  flex-direction: column; /* 위: 아바타/이름/권한, 아래: 링크 */
  align-items: flex-end;  /* 오른쪽 정렬 */
  gap: 4px;
}

.mTopmenu .auth.is-logged-in .userbox {
  display: flex;
  align-items: center;
  gap: 6px;
}

.mTopmenu .auth.is-logged-in .userbox__avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #eee;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
}

.mTopmenu .auth.is-logged-in .userbox__meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.mTopmenu .auth.is-logged-in .auth__links {
  display: flex;
  gap: 8px;
  font-size: 12px;
}
.mTopmenu .auth.is-logged-in .auth__links a {
  color: #333;
  text-decoration: none;
  padding: 2px 4px;
  border: 1px solid #ccc;
}


.btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 34px; padding: 0 12px; border-radius: 8px;
  font-size: 14px; text-decoration: none; white-space: nowrap;
  border: 1px solid #ddd; background: #fff; color: #333;
}
.btn--login { border-color:#bbb; }
.btn--signup { background:#111; color:#fff; border-color:#111; }

.is-logged-in .userbox {
  display: flex; align-items: center; gap: 10px;
}
.userbox__avatar {
  width: 34px; height: 34px; border-radius: 50%;
  background: #111; color: #fff; display: inline-flex;
  align-items: center; justify-content: center; font-weight: 700;
}
.userbox__meta { display: flex; flex-direction: column; }
.userbox__name { font-size: 14px; }
.userbox__role { font-size: 12px; color:#777; }

/* 1차 링크 */
.mdrawer__nav > a {
  display:block; padding: 12px 6px; margin: 0 0 4px;
  text-decoration:none; color:#111; border-radius:8px;
}
.mdrawer__nav > a:hover { background:#f6f6f6; }

/* details 그룹 */
.mdrawer__nav details {
  border:1px solid #eee; border-radius:10px; padding:6px 8px; margin:8px 0;
}
.mdrawer__nav summary {
  cursor:pointer; font-weight:600; padding:6px 2px;
  list-style:none;
}
.mdrawer__nav details a {
  display:block; padding:8px 6px; margin:2px 0; border-radius:8px;
  color:#333; text-decoration:none;
}
.mdrawer__nav details a:hover { background:#f8f8f8; }

/* 하단 콜투액션/콜 */
.mdrawer__cta {
  display:block; text-align:center; margin:12px 0 0;
  background:#0a66ff; color:#fff; border-radius:10px; padding:12px 10px; text-decoration:none;
  font-weight:600;
}
.mdrawer__call {
  display:block; text-align:center; margin:10px 0 0 !important; color:#0a66ff; text-decoration:none;
}

/* 로그아웃 버튼 재사용 */
.logout_btn { color:#d00 !important; border-radius:10px !important;}

@media(max-width:1024px){
	.mdrawer__nav{
	  width: 300px;
	  height: 100%;
	  background: #fff;
	  border-right: 1px solid var(--c-line); /* 패널 구획 */
	  padding: 14px 16px;
	  overflow:auto;
	  box-sizing:border-box;
	}
}