/* ======================================
   Header (clean & sectioned)
   ====================================== */
:root{
  --hdr-h: 60px;
  --c-bg: #ffffff;
  --c-fg: #111111;
  --c-muted: #6b7280;
  --c-line: #e5e7eb;     /* 구획 라인 */
  --c-accent: #111111;   /* 버튼/포커스 */
  --radius: 12px;
  --gap: 12px;
}

/* 공통 래퍼 */
.hdr{
  position: sticky;
  top: 0;
  z-index: 1000;
  background: var(--c-bg);
  border-bottom: 1px solid var(--c-line); /* 상단 구획 라인 */
}


/* 지도 페이지에서는 해상도 무관하게 PC 헤더 감춤 */
.page-map .hdr{
  display: none !important;
}

/* 드로어가 지도 오버레이 위로 올라오도록 */
.mdrawer{
  position: fixed; top:0; right:0; bottom:0;
  width: 100vw; max-width: 100%;
  background:#fff;
  z-index: 2000001;
  transform: translateX(100%);
  transition: transform .25s ease;
  box-shadow: -10px 0 24px rgba(0,0,0,.18);
}
.mdrawer.open{ transform: translateX(0); }

/* 플로팅 햄버거 버튼도 맵 위로 */
#hdr-toggle-btn{ z-index: 9998; }

/* 바: 좌/중/우 구분 */
.hdr__bar {
  height: var(--hdr-h);
  display: flex;
  align-items: center;
  padding: 0 16px;
  gap: var(--gap);
  justify-content: space-between;
}
.hdr__left,
.hdr__right {
  flex: 0 0 auto;   /* 내용만큼 */
  height:28px;
  margin:16px 0
}
.hdr__right {
	display:flex;
	gap:15px;
}
.hdr__nav {
  flex: 1;          /* 남는 공간 전부 차지 */
  gap:20px;
  display: flex;
  justify-content: center;  /* nav 내용은 가운데 정렬 */
}
/* 브랜드 */
.hdr__brand{ display:inline-flex; align-items:center; gap:10px; }
.hdr__logo{ height: 28px; width:auto; display:block; }

.hdr__nav a{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  text-decoration: none;
  color: var(--c-fg);
  border-radius: 8px;
  font-weight: 500;
}
.hdr__nav a:hover{ background: #f5f5f5; }
.hdr__nav a:focus-visible{
  outline: 2px solid var(--c-accent);
  outline-offset: 2px;
}


/* 유저/아바타 */
.hdr__user{ display:inline-flex; align-items:center; gap:8px; text-decoration:none; color:var(--c-fg); }
.hdr__avatar{ width:28px; height:28px; border-radius:50%; object-fit:cover; border:1px solid var(--c-line); }
.hdr__avatarFallback{
  width:28px; height:28px; border-radius:50%;
  display:inline-grid; place-items:center;
  background:#f3f4f6; font-weight:700; font-size:.8rem; color:#374151; border:1px solid var(--c-line);
}
.hdr__label{ font-weight: 600;font-size:13px; }

/* 버튼 */
.hdr__btn{
  display: inline-flex; align-items:center; justify-content:center;
  height: 28px; padding: 0 12px; border-radius: 10px;
  border: 1px solid var(--c-line); background: #fff; color: var(--c-fg);
  text-decoration: none; font-weight: 600;font-size:13px;box-sizing:border-box;
}
.hdr__btn:hover{ background:#f5f5f5;color:#000; }
.hdr__btn--pri{ background: var(--c-accent); color:#fff; border-color: var(--c-accent); }
.hdr__btn--pri:hover{ filter: brightness(0.95); }

/* 햄버거(모바일/태블릿 전용) */
.iconbtn{
  display: none; /* 기본은 감춤: 브레이크포인트에서 표시 */
  width: 28px; height: 28px; cursor:pointer;
  border: 0; background: #fff; -webkit-tap-highlight-color: transparent;margin:0;padding:0;
}
.iconbtn:focus-visible{ outline:2px solid var(--c-accent); outline-offset: 2px; }
.iconbtn__bar{
  display:block; width:28px; height:2px; background:#111; border-radius:2px;
  transition: transform .22s ease, opacity .22s ease, width .22s ease;
}
.iconbtn__bar + .iconbtn__bar{ margin-top:7px; }
#mMenuBtn[aria-expanded="true"] .iconbtn__bar:nth-child(1){ transform: translateY(9px) rotate(45deg); }
#mMenuBtn[aria-expanded="true"] .iconbtn__bar:nth-child(2){ opacity:0; transform:scaleX(0); }
#mMenuBtn[aria-expanded="true"] .iconbtn__bar:nth-child(3){ transform: translateY(-9px) rotate(-45deg); }

/* ======================================
   Drawer (mobile/tablet)
   ====================================== */
.mdrawer{
  position: fixed;
  inset: 0 0 0 0;
  z-index: 1100;
  display: grid;
  grid-template-columns: 1fr;
  background: rgba(0,0,0,.28);   /* 오버레이 */
  transform: translateX(-100%);
  opacity: 0;
  transition: transform .25s ease, opacity .25s ease;
}
.mdrawer.open{ transform: translateX(0); opacity:1; }
.mdrawer__nav{
  width: 300px;
  height: 100%;
  background: #fff;
  border-right: 1px solid var(--c-line); /* 패널 구획 */
  padding: 14px 16px;
  overflow:auto;
}
.mdrawer__nav a{
  display:block;
  text-align:center;
  padding: 10px 6px;
  text-decoration: none;
  background:#fff;
  border-radius:0;
  color: var(--c-fg);
  border-bottom: 1px solid #ccc;; /* 항목 구획 */
}
.mdrawer__nav > a{
	border-radius:10px;
	background:#efefef;
	border: 1px solid #ccc;; /* 항목 구획 */
}
.mdrawer__nav a:hover{ background:#f9fafb; }

/* details 그룹 구획 */
.mdrawer__nav details{
  border: 1px solid var(--c-line);
  border-radius: 10px;
  margin: 10px 0;
  overflow: hidden;
  background: #fff;
}
.mdrawer__nav summary{
  list-style: none;
  cursor: pointer;
  padding: 12px;
  font-weight: 700;
  color: var(--c-fg);
}
.mdrawer__nav summary::-webkit-details-marker{ display:none; }
.mdrawer__nav details[open] summary{ background:#f9fafb; }

/* summary 내부 링크 구획 */
.mdrawer__nav details > a{ padding: 10px 12px; border-bottom: 1px solid var(--c-line); }
.mdrawer__nav details > a:last-child{ border-bottom: 0; }

/* CTA / 로그인영역 구분 */
.mdrawer__cta{
  display:block; text-align:center;
  margin-top: 10px; padding: 12px;
  background: var(--c-line); color:#fff;
  border-radius: 10px; text-decoration: none; font-weight: 700;
}
.logout_btn{ display:block; text-align:center; padding: 12px; border:1px solid var(--c-line); border-radius:10px; margin-top:10px; text-decoration:none; color:var(--c-fg); }
.login_out{ margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--c-line); }

/* 콜 영역 구분 */
.mdrawer__call{
  display:block; margin-top: 12px; padding: 10px 12px;
  border: 1px solid var(--c-line); border-radius: 10px;
  background:#f9fafb; text-decoration:none; color:var(--c-fg);
}

/* 스크롤 잠금 */
.no-scroll{ overflow:hidden; touch-action:none; }

.mTopmenu{margin:0;padding:0;padding:0px;display:flex;flex-direction:row;gap:10px;}
.mTopmenu li a{display:block;height:30px;}
li.logo img{height:100%;}
.mTopmenu a{
	border-bottom:none;
}

/* ======================================
   Responsive breakpoints
   ====================================== */
/* ≤1024px: 모바일/태블릿 */
@media (max-width: 1024px){
  .hdr__nav{ display:none; } /* 가로 내비 감춤 */
  .iconbtn{ display:inline-grid; } /* 햄버거 표시 */
  .hdr__right{ display:flex;flex-direction:row;border-left: none; padding-left: 0; justify-content: end;gap:5px;} /* 좁은 화면에선 경계선 제거로 간결화 */
  .hdr__right button{
	  display:inline-block;
  }
}

/* ≥1025px: 데스크톱 */
@media (min-width: 1025px){
  body:not(.page-map) .mdrawer { display:none !important; }
  body:not(.page-map) .iconbtn { display:none; }
}

/* 고명도 배경에서 살짝 그림자(선호 시 주석 해제)
.hdr{ box-shadow: 0 1px 0 var(--c-line); }
*/