@charset "utf-8";
/*
 * TIO PC(마우스) 전용 오버레이 — 일지/기록 작성 화면
 * ---------------------------------------------------------------------------
 * app/layout/head.php 에서 app-responsive.css 다음에 로드된다.
 *
 * 배경
 *   전문가(치료사)가 PC 브라우저로 일지를 작성할 때
 *     (1) 바텀시트가 max-width 없이 left:0/right:0 이라 뷰포트 전폭(1600px+)으로
 *         퍼져서, 뒤에 비치는 360px 앱 컬럼과 폭이 어긋나 보이고
 *     (2) 작성 칸이 min-height:90px 라 긴 일지를 좁은 창에서 스크롤하며 써야 했다.
 *   이 파일은 그 두 가지만 PC 에서 교정한다.
 *
 * 설계 규칙 — app-responsive.css 의 R1~R6 을 그대로 승계한다
 *
 *   D1. 모든 선언은 (hover:hover) and (pointer:fine) 안에만 둔다.
 *       app-responsive.css 는 폭 조건만 보지만(2026-08-21 R6 개정), 이 파일은
 *       마우스 환경에서만 의미 있는 교정이라 pointer:fine 게이트를 유지한다.
 *       앱 WebView·태블릿·폰은 전부 coarse 이므로 이 파일의 규칙이 단 하나도
 *       적용되지 않는다 → 모바일 회귀 확률이 구조적으로 0.
 *
 *   D2. 블록을 둘로 나눈다.
 *       A) 폭 조건 없는 pointer:fine  — 작성 칸(textarea) 자동 확장
 *       B) min-width:1024px 추가      — 바텀시트 → 화면 중앙 모달
 *       A 에 폭 조건을 걸지 않는 이유: 활동일지(visit_report_write.php)는
 *       캘린더에서 iframe(.vr-sheet) 안에 임베드되는데, iframe 내부의 미디어쿼리는
 *       부모 창이 아니라 iframe 자신의 폭(360px)을 본다. min-width:1024px 를 걸면
 *       임베드된 활동일지에서만 규칙이 죽는다.
 *
 *   D3. !important 는 레이아웃 골격(R2 의 6개 프로퍼티)에만 쓴다.
 *       나머지는 `body` 접두어로 특이성을 (0,1,2) 로 올려 이긴다.
 *       페이지의 <style> 은 <body> 안에 있어 캐스케이드상 항상 이 파일보다 뒤이므로,
 *       같은 특이성으로는 외부 CSS 가 절대 이기지 못한다.
 *
 *   D4. 중앙 정렬에 transform 을 쓰지 않는다 (R4).
 *       top:0 + bottom:0 + height:fit-content + margin:auto 의
 *       over-constrained 해소로 수직 중앙을 잡는다. transform 은 fixed 자손의
 *       containing block 을 만들어 중첩 fixed 를 파괴한다.
 *
 *   D5. (2026-08-21 개정) 네 시트가 --pc-sheet-max-w 하나를 공유한다.
 *       값은 var(--app-max-w) — 뒷배경 앱 컬럼과 같은 폭이다.
 *       원래는 480px 고정이었고, 근거는 ".vr-sheet 안은 iframe 이고 그 내부가 360px
 *       앱 레이아웃이라 넓혀도 콘텐츠는 그대로인 채 좌우 빈 띠만 늘어난다" 였다.
 *       그 전제가 사라졌다 — app-responsive.css 가 PC 에서도 발화하게 되면서
 *       iframe 내부도 자기 폭(= 시트 폭)에 맞춰 확장된다. 넓힌 만큼 콘텐츠가 따라온다.
 *
 *   D6. 여백·타이포는 이 파일에서 건드리지 않는다.
 *       시트가 컬럼 폭을 따르게 된 뒤로는 app-responsive.css 의 타이포 스케일
 *       (.text01~05, body font-size)이 시트 안에도 그대로 적용된다. 여기서 또
 *       조정하면 두 파일이 같은 값을 두고 싸운다.
 *
 * 롤백: head.php 의 <link> 1줄만 주석 처리하면 완전히 되돌아간다.
 */


/* ===========================================================================
   A. 작성 칸 자동 확장 — PC(마우스) 전 폭
   ===========================================================================
   field-sizing:content 는 Chrome/Edge 123+ · Safari 26+ 가 지원한다.
   Firefox 는 아직 미지원이라 app/common/js/textarea-autogrow.js 가 폴백으로
   scrollHeight 기반 높이를 계산한다. 둘 다 min-height/max-height 로 clamp 되므로
   어느 경로든 최종 동작은 같다.

   max-height 를 두는 이유: 상한이 없으면 긴 일지에서 칸이 무한정 늘어나
   시트 하단의 [저장] 버튼이 화면 밖으로 밀린다.
   =========================================================================== */
@media (hover:hover) and (pointer:fine){

	/* 기록 작성 시트 — expert/client_requests.php:72,
	                    expert/client_requests_calendar.php:241
	   원래: min-height:90px; resize:vertical (height 미지정) */
	body .eval-sheet textarea{
		field-sizing: content;
		height: auto;              /* field-sizing 은 height:auto 일 때만 동작한다 */
		min-height: 180px;
		max-height: 46vh;
		resize: vertical;          /* 자동 확장과 별개로 마우스 미세조정도 남겨둔다 */
	}

	/* 활동일지 — expert/visit_report_write.php:39
	   원래: height:120px; resize:none (250자 제한이라 상한을 낮게 잡는다) */
	body .vr-textarea{
		field-sizing: content;
		height: auto;
		min-height: 200px;
		max-height: 40vh;
		resize: vertical;
	}
}


/* ===========================================================================
   B. 바텀시트 → 화면 중앙 모달 — 1024px 이상 PC
   ===========================================================================
   .eval-sheet / .cr-sheet / .rs-sheet / .vr-sheet 는 전부
   position:fixed; left:0; right:0; bottom:0 의 바텀시트다.
   PC 에서는 하단에 붙을 이유가 없고, .eval-sheet 는 max-width 조차 없어
   1600px 화면에서 전폭으로 퍼진다.

   ※ app-responsive.css 도 같은 선택자에 max-width 를 준다(2026-08-21 부터 PC 에서도
     발화한다). 폭은 그쪽 값을 --app-max-w 로 받아 쓰고, 이 블록은 바텀시트를
     화면 중앙 모달로 바꾸는 배치만 담당한다.
   =========================================================================== */
@media (min-width:1024px) and (hover:hover) and (pointer:fine){

	:root{
		/* D5 (2026-08-21 개정) — 네 시트가 공유하는 단 하나의 폭.
		   원래는 480px 고정이었다. app-responsive.css 가 PC 에서도 발화하게 되면서
		   뒷배경 앱 컬럼이 1024+ 840px / 1366+ 전폭으로 넓어졌고, 그 안에서 시트만
		   480px 로 남으면 넓은 화면 한가운데 작은 카드처럼 떠 보인다.

		   그렇다고 컬럼을 그대로 따라가면 PC 전폭에서 시트가 1920px 이 되어
		   입력칸과 버튼이 화면 양끝으로 흩어진다. app-responsive.css 의
		   --app-sheet-max-w 가 그 둘을 조정한 값(컬럼 폭, 단 960px 상한)이다.
		   시트 폭의 단일 출처이므로 여기서 별도 px 를 적지 않는다. */
		--pc-sheet-max-w: var(--app-sheet-max-w);
	}

	/* D5 — 네 시트 모두 같은 폭, 뒷배경 앱 컬럼과 같은 중앙선에 놓는다.
	   D4 — transform 없이 auto-margin 으로 중앙정렬한다. */
	.eval-sheet,
	.cr-sheet,
	.rs-sheet,
	.vr-sheet{
		top: 0 !important;
		bottom: 0 !important;
		left: 0 !important;
		right: 0 !important;
		/* margin:0 auto 숏핸드(cr-sheet:57, record-sheet.js:67)를 이기려면
		   상하 롱핸드를 각각 !important 로 못박아야 한다 */
		margin-top: auto !important;
		margin-bottom: auto !important;
		margin-left: auto !important;
		margin-right: auto !important;
		max-width: var(--pc-sheet-max-w) !important;
	}

	/* 하단에 붙어 있을 때 생략됐던 아래쪽 모서리와 그림자를 살린다 */
	body .eval-sheet,
	body .cr-sheet,
	body .rs-sheet,
	body .vr-sheet{
		border-radius: 14px;
		box-shadow: 0 12px 40px rgba(0,0,0,0.18);
		max-height: 88vh;
		max-height: 88dvh;
	}

	/* 콘텐츠를 직접 그리는 시트는 내용만큼만 높이를 차지한다 */
	body .eval-sheet,
	body .cr-sheet,
	body .rs-sheet{
		height: fit-content;
	}

	/* 활동일지만 명시적 높이를 유지한다 — 안이 iframe 이라
	   fit-content 로 두면 0 으로 접힌다(iframe 은 내재 높이가 없다). */
	body .vr-sheet{
		height: 88vh;
		height: 88dvh;
	}

	/* 마우스 커서 피드백 — 터치에는 없던 hover 상태 */
	body .eval-sheet .sheet-actions button:hover{
		filter: brightness(0.96);
	}
	body .eval-sheet .sheet-actions button:disabled:hover{
		filter: none;
	}
}


/* ===========================================================================
   C. PC 공통 레이아웃 교정 — 768px 이상 PC
   ===========================================================================
   app-responsive.css 가 PC 에서도 발화하게 되면서(2026-08-21 R6 개정) 앱 컬럼이
   600 / 840 / 전폭으로 넓어졌다. 그 과정에서 드러난, 폰 폭에서는 보이지 않던
   두 가지 결함을 여기서 잡는다. 폭 구간 전체에 해당하므로 전폭 블록이 아니라
   이 공통 블록에 둔다 — 창을 1024px 로 줄인 PC 에서도 똑같이 발생한다.

   태블릿에는 걸지 않는다: 스와이퍼 breakpoints 를 PC 에만 준 터라 태블릿은
   슬라이드가 여전히 wrapper 폭을 넘쳐 흘러 아래 첫 번째 문제가 생기지 않는다.
   =========================================================================== */
@media (min-width:768px) and (hover:hover) and (pointer:fine){

	/* 스와이퍼 wrapper 가 space-between 을 겸하는 경우 —
	   expert/index.php:180 <ul class="swiper-wrapper flex__style style02">.
	   .flex__style.style02 의 justify-content:space-between 이 그대로 남아 있다.
	   폰에서는 슬라이드가 wrapper 폭을 넘쳐 흘러 무의미했지만, PC 는 slidesPerView
	   가 커져 슬라이드가 전부 들어가므로 남는 공간만큼 카드가 찢어진다
	   (실측: 카드 229px 인데 카드 간격 297px). 정렬은 Swiper 에게 맡긴다. */
	.swiper-wrapper.flex__style{ justify-content: flex-start !important; }

	/* 섹션 사이 세로 여백 —
	   app-responsive.css 768+ 블록이 .common__contents__wr 의 padding-bottom 을
	   140px 로 키운다. 그 값의 목적은 "마지막 섹션이 fixed 탭바에 가리지 않게"
	   인데 선택자가 모든 섹션에 걸려서, 세로가 넉넉한 PC 화면에서는 섹션마다
	   140px 짜리 빈 띠가 생긴다. 마지막 섹션만 원래 값을 남기고 나머지를 줄인다. */
	.common__contents__wr:not(:last-of-type){ padding-bottom: 48px; }
}