@charset "UTF-8";
/* =========================================================================
   퀵메뉴 공통 스타일 (모든 교육 페이지 공용)
   -------------------------------------------------------------------------
   · 데스크톱(>=1080px) : 콘텐츠 박스 오른쪽 '바깥' 여백에 세로 레일
   · 모바일(<=1079px)   : 화면 하단 고정 바 (bottom navigation)
   · 래퍼 id( #education / #education-26 등)나 컬럼 폭에 의존하지 않도록
     박스 오른쪽 끝(left:100%) 기준으로 앵커링합니다.
   · 사용법: 이 파일을 style.css 이후에 로드하세요. 여러 페이지 공통 적용은
     공통 헤더 include(head_education.jsp)에 아래 한 줄을 추가하면 됩니다.
       <link rel="stylesheet" href="/resources/common/css/edu-quick-menu.css?v=270">
   ========================================================================= */

/* 레일을 '박스' 기준으로 배치하기 위한 기준 컨테이너.
   .wrapper 는 margin:0 auto 만 가진 컨테이너라 position:relative 를 줘도 레이아웃 영향이 없습니다. */
.wrapper { position: relative; }

/* ---------- 공통 ---------- */
.wrapper #quick-menu,
.wrapper #quick-menu.md {
	z-index: 40;
	font-family: 'NanumSquareNeoBold', 'Pretendard', sans-serif;
}
.wrapper #quick-menu .quick-body { margin: 0; }
.wrapper #quick-menu .quick-body ul li.active a::before { display: none; }

/* ================= 데스크톱: 오른쪽 여백 세로 레일 ================= */
@media screen and (min-width: 1080px) {
	.wrapper #quick-menu,
	.wrapper #quick-menu.md {
		position: absolute;
		top: auto;              /* 헤더 아래 자연 위치 → 페이지별 헤더 높이에 자동 정렬 */
		left: 100%;             /* 박스(컬럼) 오른쪽 '바깥' 끝에 붙임 (컬럼 폭과 무관) */
		margin-left: 16px;      /* 박스와의 간격 */
		right: auto; bottom: auto;
		width: 104px;
		background: transparent;
	}

	/* 항목을 개별 박스로 분리 + 사이 간격 */
	.wrapper #quick-menu .quick-body ul {
		display: block;
		background: transparent;
		border: 0;
		border-radius: 0;
		overflow: visible;
	}
	.wrapper #quick-menu .quick-body ul li,
	.wrapper #quick-menu.md .quick-body ul li {
		flex: none;
		margin: 0 0 8px;
		background: #fff;
		border: 1px solid #E7E7EA;
		border-radius: 10px;
		overflow: hidden;
	}
	.wrapper #quick-menu .quick-body ul li:last-child { margin-bottom: 0; }
	.wrapper #quick-menu .quick-body ul li a,
	.wrapper #quick-menu.md .quick-body ul li a {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 50px;
		padding: 0 6px;
		font-size: 14px;
		color: #6C6D72;
	}
	/* 활성 항목: 민트 채움 */
	.wrapper #quick-menu .quick-body ul li.active,
	.wrapper #quick-menu.md .quick-body ul li.active,
	.wrapper #quick-menu.md.on .quick-body ul li.active {
		background: #19CEB3;
		border-color: #19CEB3;
	}
	.wrapper #quick-menu .quick-body ul li.active a { color: #fff; font-weight: 700; }

	/* 이벤트 배너: 레일 아래에 이어서 */
	.wrapper #quick-event {
		position: static;
		top: auto; left: auto; bottom: auto;
		margin: 10px 0 0;
		width: 100%;
		text-align: center;
	}
	.wrapper #quick-event:empty { display: none; }
	.wrapper #quick-event img { width: 100%; max-width: 100%; height: auto; border-radius: 12px; }
}

/* ================= 모바일/좁은 화면: 하단 고정 바 ================= */
@media screen and (max-width: 1079px) {
	.wrapper #quick-menu,
	.wrapper #quick-menu.md {
		position: fixed;
		top: auto;
		left: 0; right: 0; bottom: 0;
		margin: 0;
		width: 100%;
		background: #fff;
		border-top: 1px solid #E7E7EA;
		box-shadow: 0 -2px 10px rgba(0, 0, 0, .06);
	}
	.wrapper #quick-menu .quick-body ul {
		display: flex;
		border: 0;
		border-radius: 0;
	}
	.wrapper #quick-menu .quick-body ul li,
	.wrapper #quick-menu.md .quick-body ul li {
		flex: 1;
		margin: 0;
		border: 0;
		background: transparent;
	}
	.wrapper #quick-menu .quick-body ul li a,
	.wrapper #quick-menu.md .quick-body ul li a {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		height: 56px;
		padding: 0;
		font-size: 13px;
		color: #6C6D72;
	}
	/* 활성: 민트 텍스트 + 상단 인디케이터 */
	.wrapper #quick-menu .quick-body ul li.active,
	.wrapper #quick-menu.md .quick-body ul li.active,
	.wrapper #quick-menu.md.on .quick-body ul li.active {
		background: transparent;
	}
	.wrapper #quick-menu .quick-body ul li.active a { color: #19CEB3; font-weight: 700; }
	.wrapper #quick-menu .quick-body ul li.active a::after {
		content: '';
		position: absolute;
		top: 0; left: 0; right: 0;
		height: 2px;
		background: #19CEB3;
	}
	/* 하단 바에서는 이벤트 배너 숨김 (콘텐츠 가림 방지) */
	.wrapper #quick-event { display: none; }
	/* 하단 바가 콘텐츠/푸터를 가리지 않도록 여백 확보 */
	.wrapper { padding-bottom: 64px; }
}

@media screen and (max-width: 380px) {
	.wrapper #quick-menu .quick-body ul li a { font-size: 12px; }
}


/* =========================================================================
   신규 카드 상단 배지 간격 (카드형 신청·참석 페이지 전용)
   - .list-item 이 있는 신규 디자인 페이지에서만 매칭됩니다.
   ========================================================================= */
.wrapper .list-item .label .label-tag + .label-tag { margin-left: 4px; }

/* -------------------------------------------------------------------------
   MY 배지 색상 복구
   educationV2.css 의  #education-26 .education-list .list-item .label>span
   { background-color: rgba(0,0,0,.3) } (특이도 131)  이
   label.css 의 .label-tag.red (특이도 20) 를 덮어써서 red 가 안 먹습니다.
   아래 선택자는 특이도 151 로 그보다 높아 색을 복구합니다.
   (주니어/시니어처럼 인라인 style 을 쓰는 배지는 영향 없음)
   ------------------------------------------------------------------------- */
#education-26 .education-list .list-item .label > span.label-tag.red { background-color: #FF5065; }
#education-26 .education-list .list-item .label > span.label-tag.gray { background-color: #898A8E; }

/* -------------------------------------------------------------------------
   카드 하단 '추가 참석하기' 버튼
   - 기존 텍스트 링크(.btn-cancel) 대신 버튼형으로 표기.
   - 카드(.list-item)와 같은 폭의 민트 버튼으로 카드 아래에 배치.
   ------------------------------------------------------------------------- */
.wrapper .education-list li .btn-add {
	display: block;
	margin: 8px 21px 0;   /* 카드 테두리 1px + 좌우 패딩 20px = '신청' 버튼과 동일 폭 (양옆만 맞춤) */
	padding: 12px 0;
	border-radius: 8px;
	background: #19CEB3;
	color: #fff;
	font-size: 15px;
	font-weight: 700;
	text-align: center;
	text-decoration: none;
}
.wrapper .education-list li .btn-add:hover { opacity: .95; }