/* =====================================================
   documents-demo/demo.css
   체험 전용 «문서» 페이지에서만 쓰는 규칙.

   사이드바 메뉴를 전부 잠근다 — 이 페이지는 비회원이 보는 체험판이라
   다른 메뉴로 넘어가 봐야 로그인 화면만 나온다. 눌러도 안 되는 링크를
   그대로 두면 «막힌 사이트» 처럼 보이므로, 아예 흐리게 죽여 둔다.
     · 지금 보고 있는 «문서» 만 또렷하게 남긴다 (여기가 어디인지 알려주는 표시).
     · 아래 «로그인 / 무료 회원가입» 버튼은 그대로 살린다 — 체험 다음에 눌러야 할 것이다.
   ===================================================== */

.sb .sb-nav .sb-link,
.sb .sb-logo {
	pointer-events: none;
	cursor: default;
	opacity: .38;
	filter: grayscale(1);
}

/* 현재 페이지(문서)는 색을 살려 «여기» 라는 걸 보여준다 */
.sb .sb-nav .sb-link.active {
	opacity: 1;
	filter: none;
}

/* 로그인·회원가입 버튼은 잠그지 않는다 */
.sb .sb-footer .sb-auth-btn {
	pointer-events: auto;
	opacity: 1;
	filter: none;
}

/* ── 욕구조사 모바일 칩(남/여 · 수급자/보호자 · 예/아니오) ──────────────────
   공용 need-edit-style.css 의 모바일 규칙 `.compact-check-cell label { padding: 4px 0 }` 이
   `.chip` 의 안여백(8px 12px)을 덮어쓴다(특이도 0,1,1 > 0,1,0). 테두리·둥근 모서리는 남고
   좌우 여백만 0 이 되어 글자가 둥근 테두리에 닿아 잘린 것처럼 보였다. 여기서 되살린다. */
@media (max-width: 768px) {
	.compact-check-cell label.chip {
		display: inline-flex;
		align-items: center;
		gap: 8px;
		padding: 7px 14px 7px 10px;
		margin: 0 8px 8px 0;
		border: 1px solid #d1d5db;
		border-radius: 999px;
		background: #fff;
		font-size: 14px;
		line-height: 1.2;
		color: #374151;
	}
	.compact-check-cell label.chip input[type="checkbox"],
	.compact-check-cell label.chip input[type="radio"] {
		margin: 0;
	}
	.compact-check-cell label.chip:has(input:checked) {
		border-color: #3b82f6;
		background: #eff6ff;
		color: #1d4ed8;
		font-weight: 600;
	}
}

/* 체험 페이지에는 케어 AI 플로팅 버튼을 띄우지 않는다 — 사이드바가 JS 로 inline display 를 켜므로 !important 가 필요하다 */
#cbFabWrap, .cb-fab-wrap { display: none !important; }

/* =====================================================
   체험에서 «못 쓰는» 버튼 — 없애지 않고 흐리게 둔다.
   왜 — 로그인이 없어 hasPermission() 이 전부 false 라 종전에는 도구 모음의 버튼 두 개가
   통째로 사라졌다. 실제 화면과 모양이 달라 «기능이 없는 반쪽짜리» 로 보인다.
   있는 그대로 보여 주되 눌리지 않게 하는 편이 정직하고, 실제 화면과도 같다.

   pointer-events 를 «버튼» 에서 끄고 «감싼 span» 이 받게 한 이유 —
   disabled 버튼은 브라우저가 마우스 이벤트를 먹어 버려서 버튼에 title 을 달면 설명이 안 뜬다.
   ===================================================== */
.doc-demo-off {
	display: inline-flex;
	cursor: not-allowed;
}
.doc-demo-off > button[disabled] {
	opacity: .45;
	filter: grayscale(.55);
	pointer-events: none;
}