@charset "UTF-8";
/* ═══════════════════════════════════════════════════════════════════
 *  layouts/split-mobile.css — 급여제공 3종 모바일 공통 껍데기
 *
 *  급여제공계획서 · 급여제공결과평가 · 급여제공모니터링 은 뼈대가 같다.
 *      .xx-page > .xx-split > aside.xx-left(360px 목록) + section.xx-right(문서)
 *  좁은 화면에서 이 둘을 위아래로 쌓으면 목록도 문서도 반쪽이 된다.
 *  그래서 폰에서는
 *      ① 목록이 한 화면을 통째로 쓰고
 *      ② 수급자를 누르면 문서가 «전체 화면» 으로 덮고 올라온다(← 목록으로)
 *
 *  붙는 곳: /planer/ · /benefit-evaluation/ · /benefit-monitoring/ (+ 각 -demo 사본)
 *  ※ 반드시 각 페이지 style.css «뒤» 에 실어야 같은 특이도 싸움에서 이긴다.
 *  ※ 여는·닫는 동작(뒤로가기 포함)은 layouts/split-mobile.js.
 * ═══════════════════════════════════════════════════════════════════ */

:root {
	/* 상세 화면 위에 얹히는 «← 목록» 막대 높이 */
	--chm-bar-h: 48px;
}

/* 막대는 폰에서 상세가 열렸을 때만 존재한다 */
.chm-bar { display: none; }

@media (max-width: 768px) {

	/* ─── ① 페이지 = 상단 고정바 아래 딱 한 화면 ───────────────
	   .app-layout 이 이미 padding-top: 58px 을 갖고 있으므로 그만큼만 뺀다.
	   높이를 못 박아 두어야 목록이 «자기 안에서» 스크롤된다(문서 스크롤 아님). */
	.pl-page, .be-page, .bm-page {
		padding: 0;
		height: calc(100vh - var(--mobile-bar-h, 58px));
		height: calc(100dvh - var(--mobile-bar-h, 58px));
		min-height: 0;
	}
	.pl-split, .be-split, .bm-split {
		grid-template-columns: 1fr;
		gap: 0;
		min-height: 0;
	}
	/* 문서(document)가 스크롤되면 안 된다 — 목록은 «자기 안에서» 굴러야 한다.
	   껍데기 둘이 min-height: 100vh 를 갖고 있어서, 거기에 .app-layout 의
	   padding-top: 58px 이 얹혀 문서가 58px 더 길어졌다. 그만큼 밀려 올라가면
	   목록 머리(«수급자 목록»)가 검은 고정바 뒤로 들어간다. */
	.app-layout, .main-content { min-height: 0; }

	/* ─── ② 목록 — 화면을 통째로, 테두리 없이 ─── */
	.pl-left, .be-left, .bm-left {
		min-height: 0;
		max-height: none;
		border: 0;
		border-radius: 0;
		box-shadow: none;
	}
	.pl-list-wrap, .be-list-wrap, .bm-list-wrap {
		-webkit-overflow-scrolling: touch;
		overscroll-behavior: contain;
	}
	/* 손가락은 마우스보다 굵다 — 누를 자리를 키우고, 오른쪽에 «열린다» 표시를 준다 */
	.pl-item, .be-item, .bm-item {
		position: relative;
		padding: 13px 30px 13px 12px;
	}
	.pl-item::after, .be-item::after, .bm-item::after {
		content: "";
		position: absolute;
		right: 13px;
		top: 50%;
		width: 7px;
		height: 7px;
		margin-top: -5px;
		border-right: 2px solid #cbd5e1;
		border-bottom: 2px solid #cbd5e1;
		transform: rotate(-45deg);
	}

	/* ─── ③ 상세 = 오른쪽에서 밀려 들어오는 전체 화면 ───────────
	   z-index 는 60 — 상단 고정바(1001)와 페이지 모달(90 이상) «아래» 여야 한다.
	   닫혀 있을 때 visibility:hidden 까지 주는 이유: 화면 밖 요소가
	   보조기술·탭 이동에 잡히면 안 되기 때문. */
	.pl-right, .be-right, .bm-right {
		position: fixed;
		top: calc(var(--mobile-bar-h, 58px) + var(--chm-bar-h, 48px));
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 60;
		margin: 0;
		border: 0;
		border-radius: 0;
		box-shadow: none;
		min-height: 0;
		transform: translateX(100%);
		visibility: hidden;
		transition: transform 0.26s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0.26s;
	}
	body.chm-detail .pl-right,
	body.chm-detail .be-right,
	body.chm-detail .bm-right {
		transform: none;
		visibility: visible;
		transition: transform 0.26s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s;
	}
	/* 안쪽 스크롤러 — pl/be 는 내부 칸이, bm 은 자기 자신이 스크롤된다 */
	.pl-right__content, #beRightContent, .bm-right {
		-webkit-overflow-scrolling: touch;
		overscroll-behavior: contain;
	}
	.pl-right__content { padding: 14px; }

	/* 카드·구역 머리글 — 좁은 칸에서 «공단 데이터 불러오 / 기» 처럼 낱말 한가운데가 잘렸다.
	   keep-all 이면 띄어쓰기에서만 접힌다(«공단 데이터 / 불러오기»). */
	.bm-card__head, .be-esec__head, .be-fsec__head, .be-summary__head,
	.pl-section__head, .pl-note__head, .pl-note-card__head, .pl-cycle__head {
		flex-wrap: wrap;
		row-gap: 6px;
		word-break: keep-all;
	}
	.bm-card__sub { margin-left: 0; }

	/* 문서 미선택 안내는 폰에서 볼 일이 없다(눌러야 열리므로) */
	.pl-right__empty, .be-right__empty { padding: 40px 20px; }

	/* ─── ④ «← 목록» 막대 ─── */
	.chm-bar {
		position: fixed;
		top: var(--mobile-bar-h, 58px);
		left: 0;
		right: 0;
		height: var(--chm-bar-h, 48px);
		z-index: 62;
		display: flex;
		align-items: center;
		gap: 10px;
		padding: 0 12px 0 4px;
		background: #ffffff;
		border-bottom: 1px solid #e2e8f0;
		box-shadow: 0 2px 12px rgba(15, 23, 42, 0.06);
		transform: translateY(-100%);
		visibility: hidden;
		transition: transform 0.26s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0.26s;
	}
	body.chm-detail .chm-bar {
		transform: none;
		visibility: visible;
		transition: transform 0.26s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s;
	}
	.chm-bar__back {
		flex-shrink: 0;
		display: inline-flex;
		align-items: center;
		gap: 6px;
		height: 36px;
		padding: 0 10px 0 8px;
		border: 0;
		background: transparent;
		color: #0f172a;
		font: inherit;
		font-size: 14px;
		font-weight: 700;
		cursor: pointer;
		border-radius: 8px;
	}
	.chm-bar__back:active { background: #f1f5f9; }
	.chm-bar__chev {
		width: 9px;
		height: 9px;
		border-left: 2px solid #0f172a;
		border-bottom: 2px solid #0f172a;
		transform: rotate(45deg);
		margin-left: 3px;
	}
	.chm-bar__who {
		min-width: 0;
		display: flex;
		align-items: baseline;
		gap: 7px;
		margin-left: auto;
		overflow: hidden;
	}
	.chm-bar__name {
		font-size: 14.5px;
		font-weight: 800;
		color: #0f172a;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.chm-bar__sub {
		flex-shrink: 0;
		font-size: 11.5px;
		font-weight: 600;
		color: #64748b;
		white-space: nowrap;
	}
}

/* 인쇄 — 시트를 «종이 위 문서» 로 되돌린다. 화면 밖으로 밀린 채 인쇄되면 백지가 나온다. */
@media print {
	.chm-bar { display: none !important; }
	.pl-right, .be-right, .bm-right {
		position: static !important;
		transform: none !important;
		visibility: visible !important;
		z-index: auto !important;
	}
}