/* =========================================================
   user.menu.css — 상단 햄버거 버튼과 전체 메뉴 판
   (2026-10-11 요청 01~08. 메뉴 내용은 관리자 「메뉴 관리」가 채운다)
   ========================================================= */

/* ── 햄버거 버튼 ─────────────────────────────────────────── */
[data-user-header] .header-menu-btn {
	display:inline-flex; align-items:center; justify-content:center;
	width:40px; height:40px; padding:0; border:0; border-radius:var(--unc-radius-md);
	background:none; cursor:pointer;
	transition: background-color .16s var(--unc-ease);
}
[data-user-header] .header-menu-btn:hover,
[data-user-header] .header-menu-btn:focus-visible {
	background:var(--unc-brand-soft); outline:none;
}
[data-user-header] .header-menu-btn:focus-visible { outline:2px solid var(--unc-brand-strong); outline-offset:2px; }
.header-menu-btn__bars { display:flex; flex-direction:column; gap:4px; width:20px; }
.header-menu-btn__bars i { display:block; height:2px; border-radius:2px; background:var(--unc-ink); }

/* ── 판 ──────────────────────────────────────────────────── */
.site-menu { position:fixed; inset:0; z-index:1200; }
.site-menu[hidden] { display:none; }
.site-menu__scrim { position:absolute; inset:0; background:rgba(17,20,24,.45); }

.site-menu__panel {
	position:absolute; top:0; right:0; bottom:0;
	display:flex; flex-direction:column;
	width:min(360px, 88vw); background:#fff;
	box-shadow:-12px 0 32px rgba(15,42,18,.12);
	overflow-y:auto; overscroll-behavior:contain;
}

.site-menu__head {
	display:flex; align-items:center; justify-content:space-between;
	padding:18px 20px; border-bottom:1px solid var(--unc-line);
}
.site-menu__brand { color:var(--unc-ink); font-size:1.0625rem; font-weight:800; }
.site-menu__close {
	display:inline-flex; align-items:center; justify-content:center;
	width:36px; height:36px; padding:0; border:0; border-radius:var(--unc-radius-sm);
	background:none; color:var(--unc-ink-3); font-size:1.5rem; line-height:1; cursor:pointer;
}
.site-menu__close:hover, .site-menu__close:focus-visible { background:var(--unc-bg-soft); outline:none; }
.site-menu__close:focus-visible { outline:2px solid var(--unc-brand-strong); outline-offset:2px; }

/* ── 계정 줄 ─────────────────────────────────────────────── */
.site-menu__account { padding:16px 20px; border-bottom:1px solid var(--unc-line); background:var(--unc-bg-soft); }
.site-menu__account ul { display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; }
.site-menu__account-auth { flex:1 0 100%; display:flex; align-items:center; gap:8px; margin-bottom:4px; }
.site-menu__auth-link { color:var(--unc-brand-strong); font-size:0.9375rem; font-weight:700; }
.site-menu__auth-link:hover { text-decoration:underline; }
.site-menu__auth-sep { color:var(--unc-muted); font-size:0.8125rem; }
.site-menu__account-link { color:var(--unc-ink-3); font-size:0.875rem; font-weight:600; }
.site-menu__account-link:hover { color:var(--unc-brand-strong); text-decoration:underline; }

/* 로그아웃 단추는 링크처럼 보여야 줄이 흐트러지지 않는다. */
[data-user-header] .header-logout-btn {
	display:inline-flex; align-items:center; height:24px; padding:0;
	border:0; background:none; cursor:pointer;
	color:var(--unc-ink-3); font-size:0.875rem; font-weight:600; line-height:1;
}
[data-user-header] .header-logout-btn:hover,
[data-user-header] .header-logout-btn:focus-visible { color:var(--unc-brand-strong); text-decoration:underline; outline:none; }

/* ── 서비스 메뉴 ─────────────────────────────────────────── */
.site-menu__service { padding:8px 0 28px; }
.site-menu__list, .site-menu__sublist { list-style:none; margin:0; padding:0; }
.site-menu__item { border-bottom:1px solid var(--unc-line); }
.site-menu__item:last-child { border-bottom:0; }

.site-menu__link {
	display:flex; align-items:center; justify-content:space-between; gap:12px;
	padding:15px 20px; color:var(--unc-ink); font-size:1rem; font-weight:700;
	word-break:keep-all; cursor:pointer;
}
.site-menu__link:hover { background:var(--unc-bg-soft); }
.site-menu__link:focus-visible { outline:2px solid var(--unc-brand-strong); outline-offset:-2px; }
.site-menu__chevron { flex:0 0 auto; color:var(--unc-muted); font-size:1rem; }

/* <details> 로 펼친다 — 스크립트가 없어도 열리고 키보드가 이미 아는 동작이다. */
.site-menu__fold > summary { list-style:none; }
.site-menu__fold > summary::-webkit-details-marker { display:none; }
.site-menu__fold[open] > summary .site-menu__chevron { transform:rotate(90deg); }
.site-menu__fold > summary .site-menu__chevron { transition:transform .16s var(--unc-ease); }

.site-menu__sublist { padding:2px 0 10px; background:var(--unc-bg-soft); }
.site-menu__sublink {
	display:block; padding:11px 20px 11px 34px;
	color:var(--unc-ink-3); font-size:0.9375rem; word-break:keep-all;
}
.site-menu__sublink:hover { color:var(--unc-brand-strong); text-decoration:underline; }
.site-menu__sublink:focus-visible { outline:2px solid var(--unc-brand-strong); outline-offset:-2px; }

/* 판이 열려 있는 동안 뒤 화면이 따라 움직이지 않게 한다. */
body.site-menu-open { overflow:hidden; }

@media (max-width:480px) {
	.site-menu__panel { width:100%; }
	.site-menu__link { padding:14px 16px; }
	.site-menu__sublink { padding-left:30px; }
	.site-menu__head, .site-menu__account { padding-left:16px; padding-right:16px; }
}