@charset "UTF-8";

.mh_tab_wrap {
	position: relative;
	margin: 10px;
}

/* 라디오는 화면에 보이지 않고 상태 저장 용도로만 사용 (JS 없이 순수 CSS로 탭 전환) */
.mh_tab_radio {
	position: absolute;
	width: 0;
	height: 0;
	opacity: 0;
	pointer-events: none;
}

/* 탭 네비게이션 — 페이지(내용) 스크롤 시에도 상단에 고정 */
.mh_tab_nav {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 0px;
	position: sticky;
	top: 0;
	z-index: 10;
	/* 책갈피(탭 버튼) 뒤 여백만 투명 — 탭 버튼 자체 배경색은 유지 */
	background: transparent;
}

.mh_tab_btn {
	flex: 1 1 auto;
	text-align: center;
	padding: 10px 14px;
	background: var(--mh_tab_inactive_bg, #f5f5f5);
	color: var(--mh_tab_inactive_color, #555555);
	font-size: var(--mh_tab_title_size, 15px);
	cursor: pointer;
	user-select: none;
	transition: background .15s, color .15s;
	border-radius: 14px 14px 0 0;
	box-sizing: border-box;
}
.mh_tab_btn:hover {
	opacity: .85;
}

/* 경사 모양(책갈피) — 왼쪽은 직선, 오른쪽만 비스듬히 잘린 모양 */
.mh_tab_btn.mh_tab_shape_slant {
	border-radius: 0;
	clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 100%, 0 100%);
	padding: 10px 28px 10px 14px;
}

.mh_tab_panels {
	border: 1px solid var(--mh_tab_inactive_bg, #f5f5f5);
	border-top:0px;
	border-radius: 0 0 10px 10px;
	overflow: hidden;
	background: var(--mh_tab_content_bg, #fff);
}

.mh_tab_panel {
	display: none;
	padding: 14px;
	font-size: var(--mh_tab_content_size, 14px);
	color: var(--mh_tab_content_color, #333333);
	background: var(--mh_tab_content_bg, #fff);
}

/* 선택된 탭 표시 — 제목 앞에 빨간색 ▶ 화살표를 붙이고, 글자는 흰색 + 검은 그림자로
 * 강조해 "지금 보고 있는 탭"임을 나타낸다 */
.mh_tab_radio:nth-of-type(1):checked ~ .mh_tab_nav .mh_tab_btn:nth-of-type(1),
.mh_tab_radio:nth-of-type(2):checked ~ .mh_tab_nav .mh_tab_btn:nth-of-type(2),
.mh_tab_radio:nth-of-type(3):checked ~ .mh_tab_nav .mh_tab_btn:nth-of-type(3),
.mh_tab_radio:nth-of-type(4):checked ~ .mh_tab_nav .mh_tab_btn:nth-of-type(4),
.mh_tab_radio:nth-of-type(5):checked ~ .mh_tab_nav .mh_tab_btn:nth-of-type(5),
.mh_tab_radio:nth-of-type(6):checked ~ .mh_tab_nav .mh_tab_btn:nth-of-type(6),
.mh_tab_radio:nth-of-type(7):checked ~ .mh_tab_nav .mh_tab_btn:nth-of-type(7),
.mh_tab_radio:nth-of-type(8):checked ~ .mh_tab_nav .mh_tab_btn:nth-of-type(8),
.mh_tab_radio:nth-of-type(9):checked ~ .mh_tab_nav .mh_tab_btn:nth-of-type(9),
.mh_tab_radio:nth-of-type(10):checked ~ .mh_tab_nav .mh_tab_btn:nth-of-type(10),
.mh_tab_radio:nth-of-type(11):checked ~ .mh_tab_nav .mh_tab_btn:nth-of-type(11),
.mh_tab_radio:nth-of-type(12):checked ~ .mh_tab_nav .mh_tab_btn:nth-of-type(12),
.mh_tab_radio:nth-of-type(13):checked ~ .mh_tab_nav .mh_tab_btn:nth-of-type(13),
.mh_tab_radio:nth-of-type(14):checked ~ .mh_tab_nav .mh_tab_btn:nth-of-type(14),
.mh_tab_radio:nth-of-type(15):checked ~ .mh_tab_nav .mh_tab_btn:nth-of-type(15),
.mh_tab_radio:nth-of-type(16):checked ~ .mh_tab_nav .mh_tab_btn:nth-of-type(16),
.mh_tab_radio:nth-of-type(17):checked ~ .mh_tab_nav .mh_tab_btn:nth-of-type(17),
.mh_tab_radio:nth-of-type(18):checked ~ .mh_tab_nav .mh_tab_btn:nth-of-type(18),
.mh_tab_radio:nth-of-type(19):checked ~ .mh_tab_nav .mh_tab_btn:nth-of-type(19),
.mh_tab_radio:nth-of-type(20):checked ~ .mh_tab_nav .mh_tab_btn:nth-of-type(20) {
	font-weight: 600;
	color: #ffffff;
	text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000, 0 2px 3px rgba(0,0,0,.55);
}
.mh_tab_radio:nth-of-type(1):checked ~ .mh_tab_nav .mh_tab_btn:nth-of-type(1)::before,
.mh_tab_radio:nth-of-type(2):checked ~ .mh_tab_nav .mh_tab_btn:nth-of-type(2)::before,
.mh_tab_radio:nth-of-type(3):checked ~ .mh_tab_nav .mh_tab_btn:nth-of-type(3)::before,
.mh_tab_radio:nth-of-type(4):checked ~ .mh_tab_nav .mh_tab_btn:nth-of-type(4)::before,
.mh_tab_radio:nth-of-type(5):checked ~ .mh_tab_nav .mh_tab_btn:nth-of-type(5)::before,
.mh_tab_radio:nth-of-type(6):checked ~ .mh_tab_nav .mh_tab_btn:nth-of-type(6)::before,
.mh_tab_radio:nth-of-type(7):checked ~ .mh_tab_nav .mh_tab_btn:nth-of-type(7)::before,
.mh_tab_radio:nth-of-type(8):checked ~ .mh_tab_nav .mh_tab_btn:nth-of-type(8)::before,
.mh_tab_radio:nth-of-type(9):checked ~ .mh_tab_nav .mh_tab_btn:nth-of-type(9)::before,
.mh_tab_radio:nth-of-type(10):checked ~ .mh_tab_nav .mh_tab_btn:nth-of-type(10)::before,
.mh_tab_radio:nth-of-type(11):checked ~ .mh_tab_nav .mh_tab_btn:nth-of-type(11)::before,
.mh_tab_radio:nth-of-type(12):checked ~ .mh_tab_nav .mh_tab_btn:nth-of-type(12)::before,
.mh_tab_radio:nth-of-type(13):checked ~ .mh_tab_nav .mh_tab_btn:nth-of-type(13)::before,
.mh_tab_radio:nth-of-type(14):checked ~ .mh_tab_nav .mh_tab_btn:nth-of-type(14)::before,
.mh_tab_radio:nth-of-type(15):checked ~ .mh_tab_nav .mh_tab_btn:nth-of-type(15)::before,
.mh_tab_radio:nth-of-type(16):checked ~ .mh_tab_nav .mh_tab_btn:nth-of-type(16)::before,
.mh_tab_radio:nth-of-type(17):checked ~ .mh_tab_nav .mh_tab_btn:nth-of-type(17)::before,
.mh_tab_radio:nth-of-type(18):checked ~ .mh_tab_nav .mh_tab_btn:nth-of-type(18)::before,
.mh_tab_radio:nth-of-type(19):checked ~ .mh_tab_nav .mh_tab_btn:nth-of-type(19)::before,
.mh_tab_radio:nth-of-type(20):checked ~ .mh_tab_nav .mh_tab_btn:nth-of-type(20)::before {
	content: "▶ ";
	color: #e53935;
	text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff, 0 2px 3px rgba(0,0,0,.55);
	font-weight: 700;
	margin-right:7px;
}

/* 선택된 탭에 대응하는 내용 패널 표시 */
.mh_tab_radio:nth-of-type(1):checked ~ .mh_tab_panels .mh_tab_panel:nth-of-type(1),
.mh_tab_radio:nth-of-type(2):checked ~ .mh_tab_panels .mh_tab_panel:nth-of-type(2),
.mh_tab_radio:nth-of-type(3):checked ~ .mh_tab_panels .mh_tab_panel:nth-of-type(3),
.mh_tab_radio:nth-of-type(4):checked ~ .mh_tab_panels .mh_tab_panel:nth-of-type(4),
.mh_tab_radio:nth-of-type(5):checked ~ .mh_tab_panels .mh_tab_panel:nth-of-type(5),
.mh_tab_radio:nth-of-type(6):checked ~ .mh_tab_panels .mh_tab_panel:nth-of-type(6),
.mh_tab_radio:nth-of-type(7):checked ~ .mh_tab_panels .mh_tab_panel:nth-of-type(7),
.mh_tab_radio:nth-of-type(8):checked ~ .mh_tab_panels .mh_tab_panel:nth-of-type(8),
.mh_tab_radio:nth-of-type(9):checked ~ .mh_tab_panels .mh_tab_panel:nth-of-type(9),
.mh_tab_radio:nth-of-type(10):checked ~ .mh_tab_panels .mh_tab_panel:nth-of-type(10),
.mh_tab_radio:nth-of-type(11):checked ~ .mh_tab_panels .mh_tab_panel:nth-of-type(11),
.mh_tab_radio:nth-of-type(12):checked ~ .mh_tab_panels .mh_tab_panel:nth-of-type(12),
.mh_tab_radio:nth-of-type(13):checked ~ .mh_tab_panels .mh_tab_panel:nth-of-type(13),
.mh_tab_radio:nth-of-type(14):checked ~ .mh_tab_panels .mh_tab_panel:nth-of-type(14),
.mh_tab_radio:nth-of-type(15):checked ~ .mh_tab_panels .mh_tab_panel:nth-of-type(15),
.mh_tab_radio:nth-of-type(16):checked ~ .mh_tab_panels .mh_tab_panel:nth-of-type(16),
.mh_tab_radio:nth-of-type(17):checked ~ .mh_tab_panels .mh_tab_panel:nth-of-type(17),
.mh_tab_radio:nth-of-type(18):checked ~ .mh_tab_panels .mh_tab_panel:nth-of-type(18),
.mh_tab_radio:nth-of-type(19):checked ~ .mh_tab_panels .mh_tab_panel:nth-of-type(19),
.mh_tab_radio:nth-of-type(20):checked ~ .mh_tab_panels .mh_tab_panel:nth-of-type(20) {
	display: block;
}