/* =========================
   Header (2단) – Full CSS (구분자 수정 포함)
   - 1단: 불투명 흰색
   - 2단: 글래스(blur) + 위쪽 페이드
   - position: sticky
   ========================= */

/* Vars */
:root{
  --hd-top: 60px;                 /* 1단 높이 */
  --hd-bottom: 60px;              /* 2단 높이 */
  --line: #E8ECF5;                /* 하단 헤어라인 */
  --link: #007bff;
  --text: #333;
  --muted: #666;
}

/* ===== 리셋(이전 실험/중복 규칙 무력화) ===== */
.header_common_safe_area::before,
.header_common_safe_area::after{ content:none !important; }
.header_common_safe_area,
.header-top,
.header-bottom{ background: transparent !important; border:0 !important; }
.header-bottom{ position: relative !important; top: 0 !important; }

/* ===== 래퍼 ===== */
.header_common_safe_area{
  position: sticky; top: 0; z-index: 1000;
  isolation: isolate;                /* stacking 안정화 */
}
.header_common_layout{ width:100%; }
.header_common_layout .inner{
  max-width: 100%;
  margin: 0 auto;
  padding: 0;
  display: block;
}

/* ===== 1단 (로고/유틸) – 불투명 흰색 ===== */
.header-top{
  display:flex; align-items:center; justify-content:space-between;
  min-height: var(--hd-top);
  padding: 20px 40px;                         /* 높이 고정 위해 세로 패딩 0 */
  background: #fff !important;             /* 완전 흰색 */
  z-index: 2;
}
.header-top-left .header-logo{
  display:block; width:198px; height:38px; /* 실제 로고 높이에 맞추기 */
  background: url('/assets/imgs/logo.svg') no-repeat center / contain;
}
.header.active .header-logo{
  background: url('/assets/imgs/logo.svg') no-repeat center / contain;
}

.header-top-right{ 
  display:flex; 
  align-items:center; 
  gap: 0; /* 구분자 제어를 위해 gap은 0, 간격은 아래에서 */
}

.header-top-link{
  color: #22272B; 
  font-size:15px; 
  text-decoration:none; 
  transition:color .2s; 
  font-weight: 600;
  padding: 0 10px;
}

/* ✨ 구분자: 바로 앞에도 a가 있을 때만 | 표시 */
.header-top-link + .header-top-link{
  position: relative;
  padding-left: 14px;     /* |와 텍스트 간격 */
  margin-left: 6px;       /* 링크 간 간격 */
}
.header-top-link + .header-top-link::before{
  content: "|";
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-48%);  /* 수직정렬 미세 보정 */
  color: #22272B;
  line-height: 1;
  opacity: 0.3;
}

/* 버튼/유저 */
.header-top-btn{
  color:#fff; border:0; padding:12px 15px;
  border-radius:4px; font-size:14px; cursor:pointer; transition: background .2s;
  margin-left: 12px; /* 링크 그룹과 간격 */
  border-radius: 47px;
  background: #166FED;
  font-size: 14px; font-weight: 500;
}
.header-top-btn:hover{ background:#0056b3; }

.header-top-user{ display:flex; align-items:center; gap:10px; }
.header-top-username{ font-weight:500; color: var(--text); }

/* ===== 2단 (알림 + GNB) – 글래스 + 페이드 ===== */

/* ===== 1024px 이하에서 PC 헤더 전체 숨김 ===== */
@media (max-width: 1024px) {
  .header_common_safe_area {
    display: none !important;
  }
  
  /* 모바일 메뉴 토글 버튼 표시 */
  .mobile-menu-toggle {
    display: flex !important;
  }
  
  /* 모바일 메뉴 표시 */
  .mobile-menu {
    display: block !important;
  }
}

/* ===== 1024px 초과에서 모바일 메뉴 숨김 ===== */
@media (min-width: 1025px) {
  .mobile-menu-toggle {
    display: none !important;
  }
  
  .mobile-menu {
    display: none !important;
  }
}

/* ===== 모바일 메뉴 토글 버튼 스타일 ===== */
.mobile-menu-toggle {
  display: none;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 10000;
  position: relative;
  pointer-events: auto;
  user-select: none;
  min-width: 32px;
  min-height: 32px;
}

/* 1024px 이하에서 모바일 메뉴 토글 버튼 표시 */
@media (max-width: 1024px) {
  .mobile-menu-toggle {
    display: flex !important;
  }
}

/* 햄버거 아이콘 컨테이너 */
.hamburger-icon {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  width: 24px;
  height: 18px;
}

.hamburger-line {
  width: 24px;
  height: 2px;
  background-color: #22272B;
  transition: all 0.3s ease;
  border-radius: 1px;
}

.mobile-menu-toggle.active .hamburger-line:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}

.mobile-menu-toggle.active .hamburger-line:nth-child(2) {
  opacity: 0;
}

.mobile-menu-toggle.active .hamburger-line:nth-child(3) {
  transform: rotate(-45deg) translate(7px, -6px);
}

/* 모바일 메뉴 텍스트 스타일 */
.mobile-menu-text {
  font-size: 14px;
  font-weight: 500;
  color: #22272B;
  white-space: nowrap;
}

/* ===== 모바일 헤더 스타일 ===== */
.mobile-header {
  display: none;
  background-color: #fff;
  border-bottom: 1px solid #E8ECF5;
  position: relative;
  z-index: 9998;
}

/* 1024px 이하에서 모바일 헤더 표시 */
@media (max-width: 1024px) {
  .mobile-header {
    display: block !important;
  }
}

/* 모바일 헤더 상단 */
.mobile-header-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  background-color: #fff;
}

.mobile-header-left {
  display: flex;
  align-items: center;
}

.mobile-header-logo {
  display: flex;
  align-items: center;
}

.mobile-header-logo img {
  height: 20px;
  width: auto;
}

.mobile-header-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.mobile-header-link {
  color: #22272B;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
}

/* 모바일 네비게이션 */
.mobile-nav-container {
  position: relative;
  background-color: #fff;
  border-bottom: 1px solid #E8ECF5;
  overflow: visible;
  width: 100%;
  display: flex;
  align-items: center;
}

.mobile-nav {
  overflow: hidden;
  position: relative;
  flex: 1;
  margin: 0 32px;
  transition: none;
}

.mobile-nav.submenu-open {
  overflow: visible;
}

.mobile-nav-list {
  display: flex;
  list-style: none;
  margin: 0;
  gap: 30px;
  white-space: nowrap;
  transition: transform 0.3s ease;
  width: max-content;
  padding-right: 20px;
}

.mobile-nav-item {
  position: relative;
  flex-shrink: 0;
  z-index: 1;
}

.mobile-nav-submenu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: #fff;
  border: 1px solid #e9ecef;
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0,0,0,.1);
  z-index: 9999;
  min-width: 200px;
  white-space: nowrap;
}

.mobile-nav-submenu ul {
  list-style: none;
  margin: 0;
  padding: 8px 0;
}

.mobile-nav-submenu li {
  margin: 0;
}

.mobile-nav-submenu a {
  display: block;
  padding: 8px 16px;
  color: #333;
  text-decoration: none;
  font-size: 14px;
  transition: background-color 0.2s;
}

.mobile-nav-submenu a:hover {
  background-color: #f8f9fa;
}

.mobile-nav-link {
  display: block;
  padding: 15px 0;
  color: #666;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: color 0.2s;
}

.mobile-nav-item.active .mobile-nav-link {
  color: #22272B;
  font-weight: 600;
}

/* 모바일 헤더 2Depth 메뉴 스타일 */
.mobile-nav-submenu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: #fff;
  border: 1px solid #e9ecef;
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0,0,0,.1);
  z-index: 9999;
  min-width: 200px;
  white-space: nowrap;
}

.mobile-nav-item.active .mobile-nav-submenu {
  display: block;
}

.mobile-nav-submenu ul {
  list-style: none;
  margin: 0;
  padding: 10px 0;
}

.mobile-nav-submenu a {
  display: block;
  padding: 8px 20px;
  font-size: 14px;
  color: #666;
  text-decoration: none;
  transition: background .2s, color .2s;
}

.mobile-nav-submenu a:hover {
  background: #f8f9fa;
  color: var(--link);
}

.mobile-nav-arrow {
  position: absolute;
  top: 0;
  width: 32px;
  height: 100%;
  background: linear-gradient(90deg, transparent 0%, #fff 30%);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  border: none;
  outline: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.mobile-nav-arrow-prev {
  left: 0;
  background: linear-gradient(90deg, #fff 70%, transparent 100%);
}

.mobile-nav-arrow-prev img {
  transform: rotate(180deg);
}

.mobile-nav-arrow-next {
  right: 0;
  background: linear-gradient(90deg, transparent 0%, #fff 30%);
}

.mobile-nav-arrow.visible {
  opacity: 1;
  visibility: visible;
}

.mobile-nav-arrow img {
  width: 32px;
  height: 32px;
  background: #fff;
  transition: transform 0.3s ease;
}

.mobile-nav-arrow.active img {
  transform: rotate(180deg);
}

/* ===== 모바일 메뉴 오버레이 스타일 ===== */
.mobile-menu-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(5px);
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* 1024px 이하에서 모바일 메뉴 오버레이가 기본적으로 보이도록 수정 */
@media (max-width: 1024px) {
  .mobile-menu-overlay {
    display: block !important;
    opacity: 0;
    visibility: hidden;
  }
  
  .mobile-menu-overlay.active {
    opacity: 1;
    visibility: visible;
  }
}

.mobile-menu-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #EFF2F7;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

.mobile-menu-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  background-color: #fff;
  flex-shrink: 0;
  position: sticky;
  top: 0;
  z-index: 10;
}

.mobile-menu-logo img {
  height: 32px;
  width: auto;
}

.mobile-menu-close {
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
}

.mobile-menu-close img {
  width: 24px;
  height: 24px;
}

/* 로그인 프롬프트 섹션 */
.mobile-menu-login-prompt {
  display: flex;
  align-items: center;
  padding: 16px;
  background-color: #fff;
}

.login-prompt-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #E3F2FD;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 12px;
}

.login-prompt-icon img {
  width: 24px;
  height: 24px;
}

.login-prompt-text {
  flex: 1;
  font-size: 16px;
  font-weight: 500;
  color: #22272B;
}

.login-prompt-arrow {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* 메뉴 네비게이션 */
.mobile-menu-nav {
  flex: 1;
  padding: 0;
  background: #fff;
  margin: 16px;
  border-radius: 10px;
  overflow-y: auto;
  max-height: calc(100vh - 200px); /* 헤더와 여백을 제외한 높이 */
}

.mobile-menu-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.mobile-menu-item {
  position: relative;
}

.mobile-menu-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 16px 20px 40px;
  color: #2A2B2D;
  text-decoration: none;
  font-size: 18px;
  font-weight: 600;
  width: 100%;
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.2s;
  min-height: 40px;
}

.mobile-menu-chevron {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.mobile-menu-chevron img {
  transition: transform 0.2s ease;
  opacity: 0.6;
}

.mobile-menu-item.expanded .mobile-menu-chevron img {
  transform: rotate(180deg);
}

/* 모바일 2Depth 서브메뉴 스타일 */
.mobile-menu-submenu {
  display: none;
}

.mobile-menu-item.expanded .mobile-menu-submenu {
  display: block;
}

.mobile-menu-submenu ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.mobile-menu-submenu li:last-child {
  border-bottom: none;
}

.mobile-menu-submenu a {
  display: block;
  padding: 15px 20px 15px 40px;
  color: #595B5E;
  text-decoration: none;
  font-size: 16px;
  font-weight: 500;
  transition: background-color 0.2s;
}


/* 모바일 메뉴 열린 상태에서 body 스크롤 방지 */
body.mobile-menu-open {
  overflow: hidden;
}




.header-bottom{
  position: relative;
  display:flex; align-items:center; justify-content:space-between;
  min-height: var(--hd-bottom);
  padding: 0 40px;                         /* 높이 고정 위해 세로 패딩 0 */
  z-index: 1;
}
/* 배경 레이어: 위쪽은 흰색 → 아래로 점점 투명, 그 아래 유리 톤 */
.header-bottom::before{
  content:"";
  position:absolute; inset:0;
  z-index:-1; pointer-events:none;
  background:
    linear-gradient(
      to bottom,
      rgba(255,255,255,1) 0%,
      rgba(255,255,255,.92) 14px,
      rgba(255,255,255,.75) 28px,
      rgba(255,255,255,.60) 48px,
      rgba(255,255,255,0) 110px
    ),
    rgba(255,255,255,0.60);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  box-shadow: inset 0 -1px var(--line);      /* 하단 헤어라인 */
  top: -20px;
}
/* 블러 미지원 폴백 */
@supports not (backdrop-filter: blur(1px)){
  .header-bottom::before{
    background:#fff;
    box-shadow: inset 0 -1px var(--line);
  }
}

/* 알림 */
.header-bottom-left { flex:0.7; min-width:0; display:flex; align-items:center; }

.notice-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  max-width: 100%;
  padding: 10px 14px;
  border-radius: 9999px;
  background: #F3FAFF;
  color: #2F3236;
  font-size: 16px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 400px;
}

.notice-text {
  transition: opacity 0.3s ease;
}

/* 아이콘 래퍼 */
.notice-icon {
  flex: 0 0 auto;
  width: 28px;   /* 24x25 SVG에 여백 약간 */
  height: 28px;
  border-radius: 50%;
  background: #E6F0FF;
  display: inline-grid;
  place-items: center;
  border: 1px solid #D8E6FF;
  position: relative; /* pulse용 */
}

/* SVG 크기만 맞추고 색상은 SVG 원본대로 유지 */
.notice-icon svg {
  width: 24px;
  height: 25px;
}

/* (옵션) 파동 효과 */
.notice-icon.pulse::after{
  content:"";
  position:absolute;
  inset: 0;
  border-radius:50%;
  box-shadow: 0 0 0 0 rgba(50,148,239,0.25);
  animation: ping 1.8s ease-out infinite;
}
@keyframes ping {
  0%   { box-shadow: 0 0 0 0 rgba(50,148,239,0.25); }
  80%  { box-shadow: 0 0 0 10px rgba(50,148,239,0); }
  100% { box-shadow: 0 0 0 10px rgba(50,148,239,0); }
}

/* 모바일 간격 살짝 축소 */
@media (max-width:768px){
  .notice-pill { 
    padding: 9px 12px; 
    font-size: 13px; 
    min-width: 250px;
  }
}

/* GNB */
.header-bottom-right{ flex:1; display:flex; justify-content:space-between; align-items:center; min-width: 0; }

/* 네비게이션 섹션 */
.header-nav-section {
	flex: 1;
	display: flex;
	justify-content: flex-start;
	min-width: 0;
}

.new-header-menu{ display:block; }
.new-header-menu-list{ display:flex; gap:40px; list-style:none; margin:0; padding:0; }
.new-header-menu-item{ position:relative; }

/* PC에서 모바일 메뉴가 레이아웃에 영향을 주지 않도록 설정 */
@media (min-width: 769px) {
	.header_mobile_nav_bar {
		display: none !important;
		position: absolute;
		top: -9999px;
		left: -9999px;
		width: 0;
		height: 0;
		overflow: hidden;
		z-index: -1;
	}
}

/* 모바일에서만 모바일 메뉴 표시 */
@media (max-width: 768px) {
	.header_mobile_nav_bar {
		display: flex !important;
	}
}
.new-header-menu-link{
  display:block; padding:10px 0; white-space:nowrap;
  font-size:16px; font-weight:500; color: #22272B; text-decoration:none; transition:color .2s;
}
.new-header-menu-link:hover{ color: var(--link); }

/* 서브메뉴 */
.new-header-submenu{
  position:absolute; top:100%; left:0; min-width:200px;
  background:#fff; border:1px solid #e9ecef; border-radius:4px; box-shadow:0 4px 12px rgba(0,0,0,.1);
  opacity:0; visibility:hidden; transform:translateY(-10px); transition:all .2s;
  z-index: 1000;
}

/* 메뉴 알림 표시 */
.new-header-menu-link.has-notification::after {
  content: '';
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #007bff;
  position: absolute;
  right: -8px;
  top: 0px;
}
/* 호버 효과 제거 - 클릭 방식으로 변경 */
.new-header-submenu ul{ list-style:none; margin:0; padding:10px 0; }
.new-header-submenu li{ margin:0; }
.new-header-submenu a{
  display:block; padding:8px 20px; font-size:14px; color:#666; text-decoration:none; transition: background .2s, color .2s;
}
.new-header-submenu a:hover{ background:#f8f9fa; color: var(--link); }

/* ===== 모바일 ===== */
@media (max-width: 768px){
  :root{ --hd-top: 72px; --hd-bottom: 72px; }
  .header-top{ flex-direction:column; gap:12px; }
  .header-top-right{ flex-wrap:wrap; justify-content:center; }
  /* 모바일에서는 구분자 간격 조금 축소 */
  .header-top-link{ padding: 0 8px; }
  .header-top-link + .header-top-link{
    padding-left: 12px;
    margin-left: 4px;
  }
  .header-bottom{ flex-direction:column; gap:12px; }
  .new-header-menu-list{ flex-wrap:wrap; justify-content:center; gap:20px; }
  .new-header-submenu{
    position:static;
    opacity:1; visibility:visible; transform:none; box-shadow:none; border:none; margin-top:8px;
  }
}

/* ===== 접근성/포커스 ===== */
a:focus-visible, button:focus-visible{
  outline: 2px solid #80bdff;
  outline-offset: 2px;
}

/* ===== 유틸 ===== */
.hidden{ position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* ===== (옵션) 헤더를 fixed로 쓰고 싶다면 =====
.header_common_safe_area{ position: fixed; top:0; left:0; right:0; }
.main-wrap .main-content{ padding-top: calc(var(--hd-top) + var(--hd-bottom)); }
*/

.wrap.full .main { margin-top:60px; }

/* ===== 결제요청 & 알림 버튼 ===== */
.header_text_btn {
	font-size: 15px;
	font-weight: 600;
	line-height: 20px;
	cursor: pointer;
	position: relative;
	white-space: nowrap;
	color: #22272B;
	text-decoration: none;
	transition: color .2s;
	background: none;
	border: none;
	display: flex;
	align-items: center;
	gap: 5px;
}

.header_text_btn.badge::after {
	content: '';
	display: block;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background-color: var(--primary2);
	position: absolute;
	right: 8px;
	top: 10px;
}

/* 결제요청 & 알림 박스 */
.header_payment_box,
.header_alert_box {
	align-items: baseline;
	display: flex;
	position: relative;
  padding: 0 10px;
}

/* 결제요청 & 알림 레이어 */
.header_payment_layer,
.header_alert_layer,
.mobile-header-payment-layer,
.mobile-header-alert-layer {
	width: 320px;
	border: 1px solid var(--secondary2);
	border-radius: 10px;
	background-color: #fff;
	z-index: 50;
	position: absolute;
	right: 0;
	top: calc(100% + 16px);
	overflow: hidden;
}

/* 모바일에서 결제요청 & 알림 레이어 위치 조정 */
@media (max-width: 1024px) {
	.mobile-header .header_payment_box,
	.mobile-header .mobile-header-alert-box {
		position: relative;
	}
	
	.mobile-header .header_payment_layer,
	.mobile-header .header_alert_layer {
		right: auto;
		left: 50%;
		transform: translateX(-50%);
	}
}

.header_payment_layer .head,
.header_alert_layer .head,
.mobile-header-payment-layer .head,
.mobile-header-alert-layer .head {
	padding: 16px 24px;
	border-bottom: 1px solid var(--secondary2);
}

.header_payment_layer .head .title,
.header_alert_layer .head .title,
.mobile-header-payment-layer .head .title,
.mobile-header-alert-layer .head .title {
	padding: 4px 0;
	font-size: 16px;
	font-weight: 600;
	line-height: 24px;
	color: var(--gray2);
}

.header_payment_layer .head .desc,
.header_alert_layer .head .desc,
.mobile-header-payment-layer .head .desc,
.mobile-header-alert-layer .head .desc {
	font-size: 12px;
	font-weight: 500;
	line-height: 16px;
	color: var(--gray4);
}

.header_payment_layer .body,
.header_alert_layer .body,
.mobile-header-payment-layer .body,
.mobile-header-alert-layer .body {
	height: 608px;
	margin: 6px 6px 0 0;
	padding: 0 16px 0 16px;
	overflow: auto;
}

.header_payment_layer .foot,
.header_alert_layer .foot,
.mobile-header-payment-layer .foot,
.mobile-header-alert-layer .foot {
	padding: 8px 16px;
	background-color: var(--gray5);
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: 16px;
}

.header_payment_layer .foot button,
.header_alert_layer .foot button,
.mobile-header-payment-layer .foot button,
.mobile-header-alert-layer .foot button {
	font-size: 12px;
	font-weight: 500;
	color: var(--gray3);
	cursor: pointer;
}

.header_payment_layer .body::-webkit-scrollbar,
.header_alert_layer .body::-webkit-scrollbar,
.mobile-header-payment-layer .body::-webkit-scrollbar,
.mobile-header-alert-layer .body::-webkit-scrollbar {
	width: 6px;
}

.header_payment_layer .body::-webkit-scrollbar-thumb,
.header_alert_layer .body::-webkit-scrollbar-thumb,
.mobile-header-payment-layer .body::-webkit-scrollbar-thumb,
.mobile-header-alert-layer .body::-webkit-scrollbar-thumb {
	background-color: #ADCCEB;
	border-radius: 5px;
}

.header_payment_layer .body::-webkit-scrollbar-track,
.header_alert_layer .body::-webkit-scrollbar-track,
.mobile-header-payment-layer .body::-webkit-scrollbar-track,
.mobile-header-alert-layer .body::-webkit-scrollbar-track {
	background-color: #F8F8F8;
}

.header_payment_layer .no_data,
.header_alert_layer .no_data,
.mobile-header-payment-layer .no_data,
.mobile-header-alert-layer .no_data {
	padding: 16px 0;
	text-align: center;
	font-size: 12px;
	font-weight: 500;
	color: var(--gray3);
	line-height: 16px;
}

/* 결제요청 & 알림 아이템 */
.header_payment_item,
.header_alert_item,
.mobile-header-payment-item,
.mobile-header-alert-item {
	padding: 16px 0;
	border-bottom: 1px dashed var(--secondary2);
}

.header_payment_item:last-child,
.header_alert_item:last-child {
	border-bottom: none;
}

.header_payment_item .item_head,
.header_alert_item .item_head {
	margin-bottom: 8px;
	padding: 0 8px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.header_payment_item .item_head .type,
.header_alert_item .item_head .type {
	font-size: 10px;
	font-weight: 300;
	font-family: "esamanru";
	color: var(--gray4);
}

.header_payment_item .item_head .state,
.header_alert_item .item_head .state {
	font-size: 10px;
	font-weight: 400;
	color: var(--gray4);
}

.header_payment_item .item_body,
.header_alert_item .item_body {
	margin-bottom: 8px;
	padding: 0 8px;
	padding-bottom: 8px;
}

.header_payment_item .item_body .title,
.header_alert_item .item_body .title {
	margin-bottom: 8px;
	font-size: 14px;
	font-weight: 600;
	color: var(--gray2);
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
}

.header_payment_item .item_body .title img,
.header_alert_item .item_body .title img {
	display: inline-block;
	vertical-align: middle;
}

.header_payment_item .item_body .content,
.header_alert_item .item_body .content {
	font-size: 12px;
	font-weight: 500;
	color: var(--gray3);
	line-height: 20px;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.header_payment_item .item_foot,
.header_alert_item .item_foot {
	padding: 0 8px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.header_payment_item .item_foot .time,
.header_alert_item .item_foot .time {
	font-size: 12px;
	font-weight: 400;
	color: var(--gray4);
}

.header_payment_item .item_foot .confirm,
.header_alert_item .item_foot .confirm {
	width: 64px;
	height: 24px;
	border-radius: 100px;
	color: var(--primary1);
	border: 1px solid var(--primary1);
	cursor: pointer;
}

/* 모바일 닫기 버튼 */
.header_payment_close_btn,
.header_alert_close_btn {
	display: none;
	background: none;
	border: none;
	cursor: pointer;
	padding: 5px;
}

.header_payment_close_btn img,
.header_alert_close_btn img {
	width: 20px;
	height: 20px;
}

/* 모바일 메뉴 로그인 영역 */
.mobile-menu-login-area {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 20px 16px;
	background-color: #fff;
	border-bottom: 1px solid #E5E7EB;
	flex-shrink: 0;
}

.mobile-menu-login-btn,
.mobile-menu-join-btn,
.mobile-menu-logout-btn,
.mobile-menu-admin-btn {
	padding: 8px 16px;
	border-radius: 6px;
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
	border: none;
}

.mobile-menu-login-btn,
.mobile-menu-logout-btn {
	background-color: #F3F4F6;
	color: #374151;
}

.mobile-menu-join-btn,
.mobile-menu-admin-btn {
	background-color: #3294EF;
	color: #fff;
}

/* 모바일 메뉴 프로필 영역 */
.mobile-menu-profile {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	position: relative;
}

.mobile-menu-profile-btn {
	display: flex;
	align-items: center;
	gap: 12px;
	background: none;
	border: none;
	cursor: pointer;
	padding: 0;
	flex: 1;
}

.mobile-menu-profile-btn .img img {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	object-fit: cover;
	border: 2px solid #E5E7EB;
}

.mobile-menu-profile-btn .profile-info {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.mobile-menu-profile-btn .name {
	font-size: 16px;
	font-weight: 600;
	color: #111827;
  text-align: left;
}

.mobile-menu-profile-btn .member-type {
	font-size: 12px;
	font-weight: 500;
	color: #6B7280;
}

/* 모바일 메뉴 액션 영역 */
.mobile-menu-actions {
	display: flex;
	align-items: center;
	gap: 12px;
	padding-top: 12px;
	border-top: 1px solid #F3F4F6;
}

/* 모바일 메뉴 결제요청 & 알림 박스 */
.mobile-menu-payment-box,
.mobile-menu-alert-box {
	position: relative;
}

.mobile-menu-payment-btn,
.mobile-menu-alert-btn {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 12px 16px;
	background-color: #F9FAFB;
	border: 1px solid #E5E7EB;
	border-radius: 8px;
	cursor: pointer;
	font-size: 14px;
	font-weight: 500;
	color: #374151;
	position: relative;
	transition: all 0.2s ease;
}

.mobile-menu-payment-btn:hover,
.mobile-menu-alert-btn:hover {
	background-color: #F3F4F6;
}

.mobile-menu-payment-btn.active,
.mobile-menu-alert-btn.active {
	color: #3294EF;
	border-color: #3294EF;
	background-color: #EFF6FF;
}

/* 알림 배지 */
.notification-badge {
	position: absolute;
	top: -4px;
	right: -4px;
	background-color: #EF4444;
	color: #fff;
	font-size: 10px;
	font-weight: 600;
	min-width: 16px;
	height: 16px;
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 4px;
}

/* 전문가 회원용 알림 아이콘 스타일 */
.mobile-menu-profile .mobile-menu-alert-box {
	margin-left: auto;
}

.mobile-menu-profile .mobile-menu-alert-btn {
	background: none;
	border: none;
	cursor: pointer;
	padding: 0;
}

/* 모바일 공통 알림창 */
.mobile-common-alert-layer {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.5);
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
}

.mobile-common-alert-layer > div {
	width: 90%;
	max-width: 400px;
	max-height: 80vh;
	background: #fff;
	border-radius: 12px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.mobile-common-alert-layer .head {
	background: #fff;
	padding: 20px;
	border-bottom: 1px solid #E5E7EB;
}

.mobile-common-alert-layer .head .title {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 18px;
	font-weight: 600;
	color: #111827;
}

.mobile-common-alert-layer .head .title button {
	background: none;
	border: none;
	cursor: pointer;
	padding: 4px;
}

.mobile-common-alert-layer .head .title button img {
	width: 20px;
	height: 20px;
}

.mobile-common-alert-layer .head .desc {
	font-size: 14px;
	color: #6B7280;
	margin-top: 8px;
}

.mobile-common-alert-layer .body {
	background: #fff;
	max-height: 60vh;
	overflow-y: auto;
}

.mobile-common-alert-layer .foot {
	background: #fff;
	padding: 20px;
	border-top: 1px solid #E5E7EB;
	display: flex;
	gap: 12px;
}

.mobile-common-alert-layer .foot button {
	flex: 1;
	padding: 12px;
	border: 1px solid #D1D5DB;
	border-radius: 8px;
	background: #fff;
	color: #374151;
	font-size: 14px;
	cursor: pointer;
}

.mobile-common-alert-layer .foot button:hover {
	background: #F9FAFB;
}

.mobile-common-alert-item {
	padding: 16px 20px;
	border-bottom: 1px solid #F3F4F6;
}

.mobile-common-alert-item:last-child {
	border-bottom: none;
}

.mobile-common-alert-item .item_head {
	display: flex;
	justify-content: space-between;
	margin-bottom: 8px;
}

.mobile-common-alert-item .item_head .type {
	font-size: 12px;
	color: #6B7280;
	background: #F3F4F6;
	padding: 4px 8px;
	border-radius: 4px;
}

.mobile-common-alert-item .item_head .state {
	font-size: 12px;
	color: #6B7280;
}

.mobile-common-alert-item .item_body {
	margin-bottom: 12px;
}

.mobile-common-alert-item .item_body .title {
	font-size: 14px;
	font-weight: 500;
	color: #111827;
	margin-bottom: 4px;
}

.mobile-common-alert-item .item_body .content {
	font-size: 13px;
	color: #6B7280;
	line-height: 1.4;
}

.mobile-common-alert-item .item_foot {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.mobile-common-alert-item .item_foot .time {
	font-size: 12px;
	color: #9CA3AF;
}

.mobile-common-alert-item .item_foot .confirm {
	padding: 6px 12px;
	background: #3B82F6;
	color: #fff;
	border: none;
	border-radius: 6px;
	font-size: 12px;
	cursor: pointer;
}

.mobile-common-alert-item .item_foot .confirm:hover {
	background: #2563EB;
}

.mobile-common-alert-layer .no_data {
	text-align: center;
	padding: 40px 20px;
	color: #6B7280;
	font-size: 14px;
}

/* 모바일 메뉴 알림 레이어 */
.mobile-menu-alert-layer {
	position: absolute;
	top: 100%;
	left: 0;
	width: 280px;
	border: 1px solid #E5E7EB;
	border-radius: 10px;
	background-color: #fff;
	z-index: 1000;
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
	overflow: hidden;
}

.mobile-menu-alert-layer .head {
	padding: 16px 20px;
	border-bottom: 1px solid #E5E7EB;
}

.mobile-menu-alert-layer .head .title {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 16px;
	font-weight: 600;
	color: #111827;
}

.mobile-menu-alert-close-btn {
	background: none;
	border: none;
	cursor: pointer;
	padding: 4px;
}

.mobile-menu-alert-close-btn img {
	width: 16px;
	height: 16px;
}

.mobile-menu-alert-layer .head .desc {
	font-size: 12px;
	font-weight: 500;
	color: #6B7280;
	margin-top: 4px;
}

.mobile-menu-alert-layer .body {
	max-height: 300px;
	overflow-y: auto;
	padding: 0 20px;
}

.mobile-menu-alert-layer .foot {
	padding: 12px 20px;
	background-color: #F9FAFB;
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: 12px;
}

.mobile-menu-alert-layer .foot button {
	font-size: 12px;
	font-weight: 500;
	color: #6B7280;
	cursor: pointer;
	background: none;
	border: none;
}

/* 모바일 메뉴 알림 아이템 */
.mobile-menu-alert-item {
	padding: 16px 0;
	border-bottom: 1px dashed #E5E7EB;
}

.mobile-menu-alert-item:last-child {
	border-bottom: none;
}

.mobile-menu-alert-item .item_head {
	margin-bottom: 8px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.mobile-menu-alert-item .item_head .type {
	font-size: 10px;
	font-weight: 300;
	color: #6B7280;
}

.mobile-menu-alert-item .item_head .state {
	font-size: 10px;
	font-weight: 400;
	color: #6B7280;
}

.mobile-menu-alert-item .item_body {
	margin-bottom: 8px;
}

.mobile-menu-alert-item .item_body .title {
	margin-bottom: 8px;
	font-size: 14px;
	font-weight: 600;
	color: #111827;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
}

.mobile-menu-alert-item .item_body .content {
	font-size: 12px;
	font-weight: 500;
	color: #6B7280;
	line-height: 20px;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.mobile-menu-alert-item .item_foot {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.mobile-menu-alert-item .item_foot .time {
	font-size: 12px;
	font-weight: 400;
	color: #6B7280;
}

.mobile-menu-alert-item .item_foot .confirm {
	width: 64px;
	height: 24px;
	border-radius: 100px;
	color: #3294EF;
	border: 1px solid #3294EF;
	cursor: pointer;
	background: none;
	font-size: 12px;
	font-weight: 500;
}

.mobile-menu-alert-layer .no_data {
	padding: 16px 0;
	text-align: center;
	font-size: 12px;
	font-weight: 500;
	color: #6B7280;
	line-height: 16px;
}

/* 모바일 메뉴 프로필 (기존 스타일 제거 - 새로운 스타일로 대체됨) */

/* ===== 2단 헤더 우측 영역 간격 조정 ===== */
.header-bottom-right {
	display: flex;
	align-items: center;
	gap: 20px; /* 메뉴와 프로필 사이 간격 */
}

/* 회원 프로필 버튼 스타일 조정 */
.header-bottom-right .header_profile {
	margin-left: 0; /* 우측 끝에 위치하므로 마진 제거 */
}

/* 프로필 텍스트 스타일 */
.header_profile_btn .profile_text {
	font-size: 14px;
	font-weight: 500;
	color: #22272B;
	margin: 0 8px;
	white-space: nowrap; /* 텍스트 줄바꿈 방지 */
}

/* ===== PC 헤더 반응형 처리 ===== */
@media (max-width: 1580px) {
	/* 마이페이지 텍스트가 두 줄로 나오지 않도록 조정 */
	.header_profile_btn .profile_text {
		font-size: 13px;
		margin: 0 6px;
	}
	
	/* 헤더 우측 영역 간격 조정 */
	.header-bottom-right {
		gap: 15px;
	}
	
	/* 메뉴 아이템 간격 조정 */
	.new-header-menu-list {
		gap: 20px;
	}
	
	.new-header-menu-link {
		font-size: 15px;
		padding: 0 8px;
	}
	
	/* 알림 메시지 조정 */
	.notice-pill {
		font-size: 15px;
		padding: 8px 12px;
	}
}

@media (max-width: 1420px) {
	/* 끝쪽 메뉴들이 잘리지 않도록 조정 */
  .header-bottom-left{
    flex : 0.6;
  }
	.header-bottom-right {
		gap: 10px;
	}
	
	/* 메뉴 아이템 간격 더 줄이기 */
	.new-header-menu-list {
		gap: 15px;
	}
	
	.new-header-menu-link {
		padding: 0 6px;
	}
	
	/* 프로필 텍스트 더 줄이기 */
	.header_profile_btn .profile_text {
		margin: 0 4px;
	}
	
	/* 헤더 전체 패딩 조정 */
	.header-top {
		padding: 20px 30px;
	}
	
	.header-bottom {
		padding: 0 30px;
	}
	
	/* 알림 메시지 조정 */
	.notice-pill {
		padding: 8px 10px;
	}
}

@media (max-width: 1200px) {
	/* 더 작은 화면에서 추가 조정 */
	.header-bottom-right {
		gap: 8px;
	}
	
	.new-header-menu-list {
		gap: 12px;
	}
	
	/* 알림 메시지 조정 */
	.notice-pill {
		min-width: 350px;
		font-size: 14px;
		padding: 8px 10px;
	}
	
	.new-header-menu-link {
		font-size: 14px;
		padding: 0 4px;
	}
	
	.header_profile_btn .profile_text {
		font-size: 13px;
		margin: 0 3px;
	}
	
	/* 헤더 패딩 더 줄이기 */
	.header-top {
		padding: 20px;
	}
	
	.header-bottom {
		padding: 0 20px;
	}
	
	/* 알림 메시지 조정 */
	.notice-pill {
		font-size: 13px;
		padding: 6px 8px;
	}
}

@media (max-width: 1000px) {
	/* 매우 작은 화면에서 추가 조정 */
	.header-bottom-right {
		gap: 6px;
	}
	
	.header-bottom-right .header_profile {
		margin-left: 6px;
	}
	
	.new-header-menu-list {
		gap: 10px;
	}
	
	.new-header-menu-link {
		font-size: 12px;
		padding: 0 3px;
	}
	
	.header_profile_btn .profile_text {
		font-size: 10px;
		margin: 0 2px;
	}
	
	/* 헤더 패딩 더 줄이기 */
	.header-top {
		padding: 12px 15px;
	}
	
	.header-bottom {
		padding: 0 15px;
	}
	
	/* 로고 크기 조정 */
	.header-top-left .header-logo {
		width: 160px;
		height: 30px;
	}
	
	/* 알림 메시지 조정 */
	.notice-pill {
		font-size: 12px;
		padding: 6px 8px;
	}
}

/* 모바일 공통 알림창 */
.mobile-common-alert-layer {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.5);
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
}

.mobile-common-alert-layer > div {
	width: 90%;
	max-width: 400px;
	max-height: 80vh;
	background: #fff;
	border-radius: 12px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.mobile-common-alert-layer .head {
	background: #fff;
	padding: 20px;
	border-bottom: 1px solid #E5E7EB;
}

.mobile-common-alert-layer .head .title {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 18px;
	font-weight: 600;
	color: #111827;
}

.mobile-common-alert-layer .head .title button {
	background: none;
	border: none;
	cursor: pointer;
	padding: 4px;
}

.mobile-common-alert-layer .head .title button img {
	width: 20px;
	height: 20px;
}

.mobile-common-alert-layer .head .desc {
	font-size: 14px;
	color: #6B7280;
	margin-top: 8px;
}

.mobile-common-alert-layer .body {
	background: #fff;
	max-height: 60vh;
	overflow-y: auto;
}

.mobile-common-alert-layer .foot {
	background: #fff;
	padding: 20px;
	border-top: 1px solid #E5E7EB;
	display: flex;
	gap: 12px;
}

.mobile-common-alert-layer .foot button {
	flex: 1;
	padding: 12px;
	border: 1px solid #D1D5DB;
	border-radius: 8px;
	background: #fff;
	color: #374151;
	font-size: 14px;
	cursor: pointer;
}

.mobile-common-alert-layer .foot button:hover {
	background: #F9FAFB;
}

.mobile-common-alert-item {
	padding: 16px 20px;
	border-bottom: 1px solid #F3F4F6;
}

.mobile-common-alert-item:last-child {
	border-bottom: none;
}

.mobile-common-alert-item .item_head {
	display: flex;
	justify-content: space-between;
	margin-bottom: 8px;
}

.mobile-common-alert-item .item_head .type {
	font-size: 12px;
	color: #6B7280;
	background: #F3F4F6;
	padding: 4px 8px;
	border-radius: 4px;
}

.mobile-common-alert-item .item_head .state {
	font-size: 12px;
	color: #6B7280;
}

.mobile-common-alert-item .item_body {
	margin-bottom: 12px;
}

.mobile-common-alert-item .item_body .title {
	font-size: 14px;
	font-weight: 500;
	color: #111827;
	margin-bottom: 4px;
}

.mobile-common-alert-item .item_body .content {
	font-size: 13px;
	color: #6B7280;
	line-height: 1.4;
}

.mobile-common-alert-item .item_foot {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.mobile-common-alert-item .item_foot .time {
	font-size: 12px;
	color: #9CA3AF;
}

.mobile-common-alert-item .item_foot .confirm {
	padding: 6px 12px;
	background: #3B82F6;
	color: #fff;
	border: none;
	border-radius: 6px;
	font-size: 12px;
	cursor: pointer;
}

.mobile-common-alert-item .item_foot .confirm:hover {
	background: #2563EB;
}

.mobile-common-alert-layer .no_data {
	text-align: center;
	padding: 40px 20px;
	color: #6B7280;
	font-size: 14px;
}

/* 모바일 공통 결제요청창 */
.mobile-common-payment-layer {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.5);
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
}

.mobile-common-payment-layer > div {
	width: 90%;
	max-width: 400px;
	max-height: 80vh;
	background: #fff;
	border-radius: 12px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.mobile-common-payment-layer .head {
	padding: 20px;
	border-bottom: 1px solid #eee;
	background: #fff;
}

.mobile-common-payment-layer .head .title {
	font-size: 18px;
	font-weight: 600;
	color: #333;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.mobile-common-payment-layer .head .title button {
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
}

.mobile-common-payment-layer .head .title button img {
	width: 20px;
	height: 20px;
}

.mobile-common-payment-layer .head .desc {
	font-size: 14px;
	color: #666;
	margin-top: 8px;
}

.mobile-common-payment-layer .body {
	flex: 1;
	overflow-y: auto;
	padding: 0;
	max-height: 60vh;
}

.mobile-common-payment-layer .foot {
	padding: 20px;
	border-top: 1px solid #eee;
	background: #fff;
	display: flex;
	gap: 10px;
}

.mobile-common-payment-layer .foot button {
	flex: 1;
	padding: 12px;
	border: 1px solid #ddd;
	background: #fff;
	color: #333;
	border-radius: 6px;
	font-size: 14px;
	cursor: pointer;
	transition: all 0.2s;
}

.mobile-common-payment-layer .foot button:hover {
	background: #f5f5f5;
	border-color: #ccc;
}

.mobile-common-payment-layer .mobile-common-payment-item {
	padding: 16px 20px;
	border-bottom: 1px solid #eee;
	background: #fff;
}

.mobile-common-payment-layer .mobile-common-payment-item:last-child {
	border-bottom: none;
}

.mobile-common-payment-layer .mobile-common-payment-item .item_head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 8px;
}

.mobile-common-payment-layer .mobile-common-payment-item .item_head .type {
	font-size: 12px;
	color: #007bff;
	background: #e3f2fd;
	padding: 2px 8px;
	border-radius: 4px;
}

.mobile-common-payment-layer .mobile-common-payment-item .item_head .state {
	font-size: 12px;
  color: #6B7280;
}

.mobile-common-payment-layer .mobile-common-payment-item .item_body {
	margin-bottom: 12px;
}

.mobile-common-payment-layer .mobile-common-payment-item .item_body .title {
	font-size: 14px;
	font-weight: 500;
	color: #333;
	margin-bottom: 4px;
}

.mobile-common-payment-layer .mobile-common-payment-item .item_body .content {
	font-size: 13px;
	color: #666;
	line-height: 1.4;
}

.mobile-common-payment-layer .mobile-common-payment-item .item_foot {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.mobile-common-payment-layer .mobile-common-payment-item .item_foot .time {
	font-size: 12px;
	color: #999;
}

.mobile-common-payment-layer .mobile-common-payment-item .item_foot .confirm {
	padding: 6px 12px;
	background: #007bff;
	color: #fff;
	border: none;
	border-radius: 4px;
	font-size: 12px;
	cursor: pointer;
}

.mobile-common-payment-layer .no_data {
	text-align: center;
	padding: 40px 20px;
	color: #999;
	font-size: 14px;
}