/**
 * [2026-10-19 신규] 팝업 사용성 보조 스타일 (9번) — hoJs/popup-ux.js와 함께 동작
 *
 * 1. 팝업이 열려 있는 동안 하단 고정 버튼·말풍선 숨김
 * 2. 닫기 버튼의 '누르는 영역'만 44px 이상으로 넓힘 (보이는 아이콘 크기·위치는 그대로)
 *    투명한 padding을 두르고 배경 이미지는 content-box에만 그린다.
 *    padding만큼 바깥으로 커지므로 위치값에서 같은 만큼 빼서 아이콘 자리를 유지한다.
 *    max()를 모르는 구형 브라우저는 해당 줄을 무시하고 기존 값을 그대로 쓴다.
 */

/* 1. 팝업 열림 */
html.popup-open .floating,
html.popup-open .asan-bubble {
	display: none !important;
}

/* 2. 메인 공지 팝업 닫기 (PC 아이콘 20px, 오른쪽 9px → padding 12px) */
.popup.plural .pop_close img,
.pop_close .close {
	box-sizing: content-box;
	padding: 12px;
	right: -3px;
	background-origin: content-box;
	background-clip: content-box;
}

/* 영상 팝업 닫기: 아이콘 둘레 10px까지 누를 수 있게 (휴대폰 아이콘 34px → 54px)
   링크에 padding을 주면 이미지가 줄어들어서, 투명한 가상 요소로 누르는 영역만 넓힌다 */
.popup .closeBtn::before {
	content: "";
	position: absolute;
	top: -10px;
	right: -10px;
	bottom: -10px;
	left: -10px;
}

@media screen and (max-width: 768px) {
	/* 맨 아래 개인정보·이용약관·비급여 팝업 닫기 (아이콘 9vw = 390px 화면에서 35px) */
	.info_popup .btn_close {
		box-sizing: content-box;
		padding: max(0px, calc((44px - 9vw) / 2));
		top: calc(-4vw - max(0px, calc((44px - 9vw) / 2)));
		right: calc(-4vw - max(0px, calc((44px - 9vw) / 2)));
		background-origin: content-box;
		background-clip: content-box;
	}

	/* [10번] 비급여 안내: 600px 고정 + 가로 스크롤 → 제목이 화면 밖, 오른쪽 절반을 밀어야 보임
	   표를 '항목 | 금액' 목록으로 바꿔 가로 스크롤 없이 보이게 한다. (layout.css 규칙을 덮어씀, HTML은 그대로)
	   표 전체를 2열 grid로 두고 tr은 상자를 없애(display:contents) th·td가 차례로 들어가게 한다.
	   → 4칸 줄은 2줄, 6칸 줄은 3줄이 되고, 한 상자 안에서 항목·금액 열 너비가 일정하다. 빈 칸은 숨김 */
	.non_benefit_info_area .info_txt {
		overflow-x: hidden;
	}
	.non_benefit_info_area .nb_wrap {
		min-width: 0;
	}
	.non_benefit_info_area .nb_table {
		display: block;
		border-collapse: separate;
	}
	.non_benefit_info_area .nb_table colgroup {
		display: none;
	}
	.non_benefit_info_area .nb_table tbody {
		display: grid;
		grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
	}
	.non_benefit_info_area .nb_table tr {
		display: contents;
	}
	.non_benefit_info_area .nb_table th,
	.non_benefit_info_area .nb_table td {
		display: block;
		padding: 8px 10px;
		border-left: none;
		border-top: 1px solid #e0e0e0;
		font-size: 13px;
		line-height: 18px;
	}
	.non_benefit_info_area .nb_table th {
		text-align: left;
	}
	.non_benefit_info_area .nb_table td {
		text-align: right;
	}
	/* 첫 줄의 두 번째 쌍부터는 구분선 (layout.css의 'tr:first-child 구분선 없음'을 덮어씀) */
	.non_benefit_info_area .nb_table tr:first-child > :nth-child(n+3) {
		border-top: 1px solid #e0e0e0;
	}
	.non_benefit_info_area .nb_table th:empty,
	.non_benefit_info_area .nb_table td:empty {
		display: none;
	}

	/* [12번] 휴대폰 전체 메뉴: 열린 동안 말풍선 숨김(맨 아래 배너를 덮음). 하단 버튼은 배너 바로 아래라 유지 */
	html.menu-open .asan-bubble {
		display: none !important;
	}

	/* 메인 공지 팝업 닫기 (휴대폰 아이콘 15px → padding 14.5px) */
	.popup.plural .pop_close img {
		padding: 14.5px;
		right: calc(2vw - 14.5px);
	}
	.pop_close .close {
		padding: 14.5px;
		right: -5.5px;
	}
}

/* [12번] 아이폰 Safari는 100vh가 주소창·도구막대에 가린 부분까지 포함해 메뉴 맨 아래(배너·하단 버튼)가 밀려날 수 있다.
   실제 보이는 높이(dvh)를 아는 브라우저만 바꾸고, 모르는 브라우저는 기존 100vh 그대로 */
@supports (height: 100dvh) {
	@media screen and (max-width: 768px) {
		.tabMenu,
		.tabMenu.on {
			height: 100dvh;
		}
		.tabMenu.on .tabMenuList {
			height: calc(100dvh - 29.7vw);
		}
	}
}