@charset "utf-8";
/*
 * TIO 태블릿/대화면 반응형 오버레이
 * ---------------------------------------------------------------------------
 * app/{individual,expert,enterprise}/css/default.css 뒤에 로드된다.
 * (app/layout/head.php 의 $CSS_PATH <link> 바로 다음)
 *
 * 설계 규칙 — 반드시 지킬 것
 *
 *   R1. @media (min-width:768px) 밖에는 :root 토큰 기본값 외에 어떤 선언도 두지 않는다.
 *       → 폰(≤767px) 경로에 규칙이 단 하나도 추가되지 않아 폰 회귀 확률이 구조적으로 0.
 *
 *   R2. !important 는 레이아웃 골격 6개 프로퍼티에만 쓴다.
 *       max-width / width / left / right / margin-left / margin-right
 *       페이지 inline <style> 은 <body> 안에 있어 캐스케이드상 항상 이 파일보다 뒤다.
 *       타이포·간격·색상에는 절대 쓰지 않는다(페이지별 의도 보존).
 *
 *   R3. orientation 미디어쿼리는 쓰지 않는다.
 *       회전하면 width 가 바뀌므로 min-width 만으로 재배치가 자동 해결된다.
 *       orientation 은 iPad Split View(폭 320px 인데 landscape)에서 오판한다.
 *       세로 공간 부족은 max-height 쿼리 + dvh 로 다룬다(키보드 올린 폰까지 커버).
 *
 *   R4. fixed 요소 중앙정렬에 transform 을 쓰지 않는다.
 *       (1) .ts-sheet 는 translateY(100%) + @keyframes sheetUp 애니메이션을 쓴다 → 덮으면 죽는다
 *       (2) transform 은 fixed 자손의 containing block 을 만들어 중첩 fixed 를 파괴한다
 *       대신 left:0 + right:0 + margin-inline:auto + max-width 의 auto-margin 중앙정렬을 쓴다.
 *       (app/expert/client_records.php 의 .cr-sheet 가 이미 쓰는 검증된 패턴)
 *
 *   R5. vh 는 항상 2줄 폴백으로 쓴다.  max-height:NNvh; max-height:NNdvh;
 *       (app/individual/notification.php:114-115 의 기존 선례)
 *
 *   R6. (2026-08-21 개정) 미디어쿼리에 (pointer: coarse) 를 걸지 않는다.
 *       원래는 전 쿼리에 coarse 를 걸어 터치 기기 전용이었다. "PC 에서 앱을 확인하는
 *       화면이 바뀌면 안 된다"는 요구사항 때문이었는데, 그 결과 PC 브라우저에서
 *       앱이 1920px 화면 한가운데 360px 컬럼으로 갇혀 보였다. 요구사항이 뒤집혀
 *       게이트를 제거했고, 이제 폭 조건만으로 PC·태블릿이 함께 발화한다.
 *
 *       태블릿 회귀는 없다 — 768/1024 구간의 값은 그대로다. 1366+ 만 기기별로 갈린다:
 *       터치 기기는 종전 960px 상한을 유지하고, PC(pointer:fine)만 파일 하단의
 *       전폭 블록이 100% 로 덮어쓴다. iPad Pro 12.9" 가로(1366)도 960px 그대로다.
 *
 *       body.platform-* 클래스로 게이팅하지 않는 이유는 종전과 같다: 그 클래스는
 *       JS 가 DOM ready 이후에 붙여서 360px → 확장으로 튀는 깜빡임이 생긴다.
 *       미디어쿼리는 순수 CSS 라 첫 페인트부터 정확하다.
 *
 * 브레이크포인트  (별도 표기가 없으면 PC·태블릿 공통)
 *   ≤767   phone      360px  (현행 유지 — 변경 0)   폰 전 기종, iPad Slide Over/좁은 Split View
 *   768+   tablet-p   600px  iPad mini(744)/9세대(768)/Air(820), Galaxy Tab 세로(800)
 *   1024+  tablet-l   840px  iPad 가로(1024/1180/1194), Galaxy Tab 가로(1280)
 *   1366+  large      960px  iPad Pro 12.9" 가로 — 터치 기기만
 *   1366+  desktop    100%   PC(pointer:fine) 전폭 — 파일 하단 전폭 블록
 */


/* ===========================================================================
   토큰 — 폰 기본값. default.css 의 현재 값과 정확히 동일하게 둔다.
   (이 블록은 값을 "바꾸지" 않는다. 아래 미디어쿼리가 참조할 기준점일 뿐이다.)
   =========================================================================== */
:root{
	--app-max-w: 360px;			/* .container / .header / .nav-bar 공통 폭 */
	--app-rail-max-w: 320px;	/* .inner__cen320 — 마크업 352회 사용되는 콘텐츠 레일 */
	--app-gutter: 20px;			/* 레일 좌우 여백 */
	--app-cols: 2;				/* 카드 그리드 열 수 — 마크업이 space-between 기반 고정 2열이라 2 를 유지한다 */
	--app-card-h: 140px;		/* 카드 최소 높이 */
	--app-modal-max-w: 320px;	/* 중앙 다이얼로그 최대 폭 */
	--app-modal-max-h: 88vh;
	--app-modal-max-h: 88dvh;
	/* 떠 있는 시트(작성 시트·선택 시트)의 최대 폭.
	   앱 컬럼을 따라가되 960px 을 넘지 않는다. 폰~태블릿에서는 컬럼이 늘 960px
	   이하라 min() 이 컬럼 값을 그대로 돌려주고, PC 전폭(100%)에서만 960px 로
	   잘린다. 즉 이 한 줄이 "시트는 화면을 꽉 채우지 않는다"를 전 구간에서
	   보장하며, 브레이크포인트마다 값을 다시 적을 필요가 없다. */
	--app-sheet-max-w: min(var(--app-max-w), 960px);
}


/* ===========================================================================
   768px+ — 태블릿 세로
   =========================================================================== */
@media (min-width:768px){

	:root{
		--app-max-w: 600px;
		--app-rail-max-w: 552px;
		--app-gutter: 24px;
		--app-cols: 2;
		--app-card-h: 168px;
		--app-modal-max-w: 460px;
		--app-modal-max-h: 88vh;
		--app-modal-max-h: min(88dvh, 720px);
	}

	/* ── 앱 컬럼 골격 ────────────────────────────────────────────────────
	   default.css  L233 .container{max-width:360px}
	                L264 .header{max-width:360px}     (expert L270 / enterprise L265)
	                L331 .nav-bar{max-width:360px}    (expert L334)
	   세 값이 3개 파일에서 바이트 단위로 동일하므로 변수 하나로 동시에 확장된다.
	   .footer(L350) 와 nav.php/footer.php 는 .container 자식이라 자동 추종한다. */
	.container{ max-width: var(--app-max-w) !important; }
	.header   { max-width: var(--app-max-w) !important; }
	.nav-bar  { max-width: var(--app-max-w) !important; }

	/* ── 콘텐츠 레일 ─────────────────────────────────────────────────────
	   default.css L138 .inner__cen320{width:90%; max-width:320px}
	               L265 .header .inner__cen320{max-width:320px}   ← 특이성 (0,2,0)
	   width:90% 를 고정 gutter 로 바꾼다. 큰 화면에서 90% 는 좌우 여백이 과도해진다. */
	.inner__cen320,
	.header .inner__cen320{
		width: calc(100% - var(--app-gutter) * 2) !important;
		max-width: var(--app-rail-max-w) !important;
	}

	/* ── .inner__cen360 — 마크업 5곳에서 쓰이나 default.css 에 정의가 없다 ──
	   app/common/login.php:75, app/{individual,expert,enterprise}/role_select.php:11,
	   app/expert/test_login.php:23 → 현재 무스타일 폴백 상태.
	   폰용 정식 정의 추가는 Phase 7 에서 default.css 에 넣고, 여기선 태블릿만 맞춘다. */
	.inner__cen360{
		position: relative;
		width: calc(100% - var(--app-gutter) * 2) !important;
		max-width: var(--app-rail-max-w) !important;
		margin-left: auto !important;
		margin-right: auto !important;
	}

	/* ── 페이지 CSS 의 레일 재클램프 해제 ────────────────────────────────
	   위 .inner__cen320 규칙은 !important 라 아래 (0,2,0) 선택자들을 이미 이긴다.
	     app/expert/{index:64, job_posting:50, mypage_active:43,
	                 expert_search_application_detail02:48}.php
	       → .mypage__active__wr .inner__cen320{max-width:375px}
	     app/expert/{bookmarked_classes:38, expert_search_application_detail:13,
	                 expert_visit_history:35}.php
	       → .mypage__active__wr .inner__cen320{max-width:320px}
	   반면 아래 선택자들은 별도 규칙이라 여기서 따로 풀어 준다.

	   .expert__search__list__detail > *  — expert/{index:65, job_posting:51,
	       mypage_active:44, expert_search_application_detail02:49}.php 에서 320px 로 재클램프
	   .tab-menu-container / .header-location / .selection-container /
	   #loc-dropdown / #map-loc-bar / #map-loc-dropdown
	       — 원래 마크업의 인라인 style="max-width:320px" 였던 것들.
	         인라인 속성은 미디어쿼리가 못 이기므로 각 페이지 <style> 로 옮겨 두었고
	         (Phase 2), 여기서 태블릿 확장을 담당한다. */
	.expert__search__list__detail > *,
	.tab-menu-container,
	.header-location,
	.selection-container,
	#loc-dropdown,
	#map-loc-bar,
	#map-loc-dropdown{
		width: 100% !important;
		max-width: var(--app-rail-max-w) !important;
		margin-left: auto !important;
		margin-right: auto !important;
	}

	/* ── 세로 여백 스케일업 ──────────────────────────────────────────────
	   default.css L237 .common__contents__wr{padding:20px 0 120px}
	   !important 미사용 — 페이지가 의도적으로 덮어쓴 값은 존중한다. */
	.common__contents__wr{ padding-top: 32px; padding-bottom: 140px; }
	.detail__contents__wr{ padding-bottom: 56px; }


	/* =======================================================================
	   Phase 3 — 뷰포트에 앵커된 요소를 앱 컬럼에 정렬
	   =======================================================================
	   fixed/absolute 요소는 .container 가 아니라 뷰포트를 기준으로 배치되므로
	   컬럼을 넓혀도 자동으로 따라오지 않는다. 태블릿 가로에서 1280px 전폭으로
	   퍼져 840px 컬럼과 어긋난다.

	   ※ R4 — transform 을 쓰지 않는다.
	     .ts-sheet 는 translateY(100%) + @keyframes 로 올라오고
	     (app/{individual,expert}/choice_visitday.php:55-56),
	     transform 은 fixed 자손의 containing block 도 파괴한다.
	     left:0 + right:0 + auto 마진의 over-constrained 해소로 중앙정렬한다.
	     (app/expert/client_records.php:55-57 .cr-sheet 가 이미 쓰는 패턴) */

	/* 뷰포트에 앵커된 면 — 배경이 깔리므로 어긋나면 바로 눈에 띈다.
	   .ws-app-rail 은 신규 페이지용 opt-in 클래스(아래 셀렉터 목록이 무한히
	   길어지지 않도록 앞으로는 이 클래스를 붙인다).

	   폭은 두 갈래로 나뉜다.
	     · 콘텐츠 면 (채팅 화면 등)  → 앱 컬럼과 같은 폭. 배경을 채우는 게 맞다.
	     · 떠 있는 시트            → --app-sheet-max-w. 대화상자가 1920px 이 되면
	                                 입력칸과 버튼이 화면 양끝으로 흩어져 오히려
	                                 쓰기 나쁘다. 폰~태블릿에서는 두 값이 같아
	                                 이 분리로 달라지는 건 PC 전폭뿐이다.
	   중앙정렬(left/right/margin auto)은 양쪽 모두 같으므로 함께 선언한다. */
	.ws-app-rail,
	.find__expert__chat__wr,   /* {individual,expert,enterprise}/matching_chat.php — max-width 없음 */
	.eval-sheet,               /* expert/client_requests.php:67, client_requests_calendar.php:211 — max-width 없음 */
	.vr-sheet,                 /* expert/client_requests_calendar.php:302 — height:92vh 고정 */
	.cr-sheet,                 /* expert/client_records.php:55 — 480px */
	.rs-sheet,                 /* expert/js/record-sheet.js:65 — JS 주입 */
	.wsp-sheet,                /* common/js/photo-picker.js:18 — max-width 없음 */
	.wca-sheet,                /* common/js/chat-attach.js:33 — 360px */
	.ts-sheet{                 /* {individual,expert}/choice_visitday.php:55 — 500px */
		left: 0 !important;
		right: 0 !important;
		margin-left: auto !important;
		margin-right: auto !important;
		max-width: var(--app-max-w) !important;
	}

	/* 떠 있는 시트만 별도 상한 (위 목록에서 콘텐츠 면 둘을 뺀 나머지) */
	.eval-sheet,
	.vr-sheet,
	.cr-sheet,
	.rs-sheet,
	.wsp-sheet,
	.wca-sheet,
	.ts-sheet{
		max-width: var(--app-sheet-max-w) !important;
	}

	/* 좌우 인셋을 준 fixed CTA — 레일 폭에 맞춘다.
	   individual/expert_upgrade.php:63 {left:16px; right:16px; max-width:calc(100% - 32px)} */
	.upgrade-submit{
		left: 0 !important;
		right: 0 !important;
		margin-left: auto !important;
		margin-right: auto !important;
		width: calc(100% - var(--app-gutter) * 2) !important;
		max-width: var(--app-rail-max-w) !important;
	}

	/* fixed 는 아니지만 컬럼 폭을 하드코딩한 배너
	   app/layout/footer_script.php:24 .ws-imp-inner{max-width:360px} */
	.ws-impersonation-banner .ws-imp-inner{
		max-width: var(--app-max-w) !important;
	}

	/* ── 중앙 다이얼로그 — 깨지진 않지만 태블릿에서 과하게 작아 보인다 ──
	   전폭 dim 오버레이 + 중앙정렬 자식 구조라 정렬 자체는 이미 맞다.
	   840px 컬럼에서 "정말 삭제할까요?" 를 840px 로 만들 이유는 없으므로
	   레일이 아니라 별도의 완만한 상한(--app-modal-max-w)을 쓴다. */
	.noti-modal,               /* {individual,expert}/notification.php:115, enterprise:41 — 360px */
	.cln__panel,               /* common/js/crm-link-notice.js:41 — 360px */
	.wca-modal,                /* common/js/chat-attach.js:41 — 360px */
	.fer-modal-card,           /* enterprise/index.php:523 — 320px */
	.specialty-sheet,          /* enterprise/{announcement_registration:88, job_posting_create:106}.php — 320px */
	.report-modal,             /* common/report.php:28 — 320px */
	.inquiry-modal,            /* common/inquiry.php:27 — 320px */
	.popup-box{                /* expert/client_requests.php:56 — 340px */
		max-width: var(--app-modal-max-w) !important;
	}

	/* 컬럼 폭까지 키워도 되는 큰 패널 (목록/폼을 담는다) */
	.efm__panel,               /* individual/index.php:367 — 420px */
	.ci-modal-box,             /* expert/client_info.php:34 — 480px */
	.dpw-frame{                /* common/js/daum-postcode.js:18 — 420px, 주소검색 iframe */
		max-width: min(var(--app-max-w), 620px) !important;
	}

	/* =======================================================================
	   Phase 4a — 타이포 스케일업
	   =======================================================================
	   default.css 의 텍스트는 전부 절대 px 라(.text01~05 = 12/14/16/18/11px,
	   .nav-item = 10px) 840px 화면에서도 본문이 12px 로 남는다.
	   body{font-size:0.75em}(L42) 만 키워도 거의 안 움직이므로 유틸리티 토큰
	   자체를 재정의한다.

	   ※ !important 를 쓰지 않는다 (R2).
	     페이지 inline <style> 이 의도적으로 지정한 크기는 그대로 두고
	     전역 유틸리티만 커지는 게 정확히 원하는 캐스케이드다. */
	body{ font-size: 0.8125em; }             /* 12 → 13px (em 기반 잔여 규칙용) */
	.text01{ font-size: 13px; }              /* 12 */
	.text02{ font-size: 15px; }              /* 14 */
	.text03{ font-size: 17px; }              /* 16 */
	.text04{ font-size: 20px; }              /* 18 */
	.text05{ font-size: 12px; }              /* 11 */
	.title__wr .title{ font-size: 22px; }    /* 20 */
	.title__wr .text { font-size: 15px; }    /* 14 */

	/* 고정 height 컨테이너는 폰트를 키우면 텍스트가 넘치므로 높이도 함께 키운다 */
	.tab__btn__wr li a{ height: 38px; line-height: 37px; font-size: 15px; padding: 0 16px; }
	.sns__btn{ height: 54px; line-height: 54px; font-size: 15px; }
	.nav-item, .nav-center, .center-label{ font-size: 12px; }

	/* 푸터 라벨 컬럼 — default.css L351-352
	     .footer .ft__info__wr .tit{width:70px}
	     .footer .ft__info__wr .tx {width:calc(100% - 70px)}
	   70px 는 12px 폰트 기준이라 13~14px 에서는 "사업자등록번호"(7자)가 안 들어가
	   두 줄로 접힌다. 라벨 폭도 폰트에 맞춰 키우고 본문 폭을 그만큼 줄인다. */
	.footer .ft__info__wr .tit{ width: 92px; }
	.footer .ft__info__wr .tx { width: calc(100% - 92px); }

	/* "맞춤 추천을 받아보세요" 말풍선 — default.css L307 {max-width:125px; height:26px}
	   박스가 고정인데 .text01 만 커지면 여유가 3px 까지 줄어 폰트 폴백/문구 변경 시
	   두 줄로 터진다(26px 고정 높이라 잘림). 박스를 폰트에 맞춰 함께 키운다.
	   ::before 삼각형(left:20px)과 카드에 8px 걸치는 배치는 원래 디자인이라 유지. */
	.main__contents__wr .title__wr .bubble__wr{
		max-width: 145px; height: 30px; line-height: 30px;
	}


	/* =======================================================================
	   Phase 4b — 카드 그리드 / 고정 높이 해제
	   =======================================================================
	   카드 폭은 calc(50% - 4px) 라 컬럼을 따라 넓어지는데 height 는 140px/198px
	   고정이라 태블릿에서 납작해진다(폰 172px 폭에서 1.2:1 → 840px 컬럼에서 2.8:1).
	   height:auto 로 풀고 aspect-ratio + min-height 로 비율을 유지한다.
	   default.css 의 height 선언이 특이성 (0,4,0)~(0,5,0) 이라 !important 가 필요하다. */

	/* 홈 상단 2열 타일 — default.css L319-320 (expert L322-323)
	   폭(calc(50% - 4px))과 배치는 건드리지 않는다. 마크업이
	   <ul class="flex__style style02"> = justify-content:space-between 이라
	   컬럼이 넓어지면 두 타일이 알아서 함께 넓어진다.
	   여기서 열 수를 3 으로 바꾸면 고정 2개 타일이 양끝으로 벌어져 가운데가 빈다.
	   실제로 깨지는 건 height:140px 고정뿐이므로 그것만 푼다. */
	.main__contents__box01 .main__con01__box > ul > li a{
		height: auto !important;
		min-height: var(--app-card-h);
	}
	/* aspect-ratio 는 쓰지 않는다 — 이 타일은 제목+부제+일러스트(bottom-right 고정)
	   뿐인 고정 콘텐츠라 폭에 비례해 높이를 키우면 가운데가 텅 빈다.
	   (384px 폭 × 16/11 = 265px → 실측상 빈 공간이 과도했음) */

	/* 홈 하단 리스트 카드 — default.css L292-294 {width:calc(50% - 4px); height:140px}
	   폭은 동일하게 유지하고 높이만 푼다. 내부 썸네일(height:80px)도 비례해 키운다. */
	.main__contents__box02 .main__con02__box .list__box{
		height: auto !important;
		min-height: var(--app-card-h);
	}
	.main__contents__box02 .list__box .flex__style.style03,
	.main__contents__box02 .list__box .flex__style.style03 > img:first-child{
		height: calc(var(--app-card-h) * 0.58);   /* 140:80 비율 유지 */
	}

	/* 기업 홈 가로 스와이퍼 카드 — enterprise/css/default.css L293,295
	   {width:95%} + a{height:198px} */
	.main__contents__box02 .main__con02__box .list__box a{
		height: auto !important;
		min-height: calc(var(--app-card-h) * 1.18);
	}

	/* 고정 열 수 그리드 → 내용 기반 auto-fill.
	   회전하면 열 수가 알아서 바뀌므로 orientation 쿼리가 필요 없다.
	   {individual,expert}/choice_visitday.php:73  repeat(4, 1fr)
	   enterprise/{announcement_registration:92, job_posting_create:110}.php,
	   expert/mypage_editprofile_popup.php:40      1fr 1fr           */
	.ts-time-grid{
		grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)) !important;
		gap: 10px;
	}
	.ts-time-slot{ height: 48px; font-size: 15px; }
	.specialty-grid{
		grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important;
	}

	/* 채팅 버블 — matching_chat.php:66 {max-width:240px}, :71 이미지 200px.
	   840px 컬럼에서 240px 버블은 지나치게 좁다. */
	.bubble{ max-width: min(72%, 520px) !important; }
	.chat-image{ max-width: 320px !important; max-height: 320px !important; }


	/* =======================================================================
	   Phase 5 — 남은 재클램프 요소
	   =======================================================================
	   전 페이지(135개)를 태블릿 가로에서 훑어 "부모는 넓은데 자기만 좁고 명시적
	   px max-width 를 가진" 요소를 검출한 결과 실제 대상은 아래 셋뿐이었다.
	   Phase 1~4 의 전역 규칙이 나머지를 이미 커버했다.

	   검출됐지만 의도적이라 두는 것:
	     .bubble__wr {160px}      — Phase 4 에서 폰트에 맞춰 정한 말풍선 폭
	     .text01#sr-* {204px}     — expert/expert_search_application_detail02 말줄임
	     .btn-apply {320px}       — CTA 버튼. 776px 짜리 버튼은 오히려 나쁜 UX */

	/* 캘린더 — 8개 파일이 동일한 마크업/셀렉터를 쓴다.
	   individual/{visit_schedule_calenderdetail, expert_visit_history_calender,
	               expert_search_application_calenderdetail}
	   expert/{client_requests_calendar, visit_schedule_calenderdetail,
	           expert_visit_history_calender, expert_search_application_calenderdetail}
	   enterprise/expert_visit_history_calender
	   .calendar-grid 는 repeat(7,1fr) 이라 이미 유연하다. 병목은 부모 클램프뿐. */
	/* .schedule-list 는 .calendar-container 안에 중첩돼 있어 부모를 풀기 전까지
	   검출되지 않았다(부모가 400px 라 자기 450px 상한이 발화하지 않음). */
	.calendar-container,
	.schedule-list{ max-width: var(--app-rail-max-w) !important; }
	.day-label{ font-size: 15px; padding: 10px 0; }
	.date .date-num{ padding: 10px 0; font-size: 15px; }

	/* expert/mypage_active.php:30 — 프로필 카드가 레일을 못 따라온다 */
	.profile-card{ max-width: var(--app-rail-max-w) !important; }

	/* 지도 — 마크업의 인라인 style="height:NNNpx" 라 !important 가 필요하다.
	   실측한 지도 캔버스 id 는 7종이고 원래 높이가 제각각이라 역할별로 나눠 올린다.
	   (#map-area / #search-map-area / #inline-map-section / #map-loc-* / #map-empty-panel
	    은 지도 캔버스가 아니라 래퍼·드롭다운이므로 제외)
	   가로모드는 세로 공간이 얕으므로 vh 가 아니라 고정값을 쓴다. */
	#address-map-preview{ height: 260px !important; }              /* 원래 180 — 주소 미리보기 */
	#detail-map,
	#map-container-inner{ height: 300px !important; }              /* 원래 200 */
	#map,
	#expert-map,
	#inline-map-container{ height: 360px !important; }             /* 원래 250 / 260 */
	#map-container{ height: 420px !important; }                    /* 원래 300 — 메인 지도 */

	/* ── 세로 공간 — 가로모드에서 뷰포트 높이가 얕아진다 ──────────────────
	   iPad 10.9": 세로 1180px 높이 → 가로 820px 높이.
	   반대로 컬럼이 840px 로 넓어지면 90vh 모달은 거대한 판이 된다.
	   min() 으로 두 문제를 동시에 잡는다. R5 대로 vh 폴백을 먼저 둔다. */
	.noti-modal, .efm__panel, .ci-modal-box, .cln__panel, .dpw-frame,
	.fer-modal-card, .ts-sheet, .cr-sheet, .rs-sheet, .eval-sheet, .vr-sheet,
	.wca-sheet, .report-modal, .inquiry-modal, .popup-box, .specialty-sheet{
		max-height: 88vh;
		max-height: var(--app-modal-max-h);
	}
}


/* ===========================================================================
   세로 공간이 얕을 때 — 태블릿 가로, 폰 가로, 키보드 올라온 상태 전부 커버.
   orientation 쿼리보다 정확하다(R3): 실제 부족한 건 "높이"이지 "방향"이 아니다.
   ※ 이 블록만 min-width 밖에 있다. 폰 세로(≥560px 높이)에서는 발화하지 않으므로
     R1 의 취지(폰 세로 회귀 0)는 유지된다.
   =========================================================================== */
@media (max-height:560px){
	.eval-sheet, .vr-sheet, .cr-sheet, .rs-sheet, .ts-sheet, .wca-sheet, .wsp-sheet{
		max-height: 94vh;
		max-height: 94dvh;
		/* expert/client_requests_calendar.php:302 .vr-sheet{height:92vh} 무력화.
		   고정 height 는 콘텐츠가 짧아도 화면을 다 먹고 길면 잘린다. */
		height: auto;
	}
	/* 시트 안 액션 버튼이 스크롤 밖으로 밀려 못 누르는 것을 막는다 */
	.eval-sheet .sheet-actions,
	.cr-sheet-actions,
	.ts-sheet-footer{
		position: sticky; bottom: 0; background: #fff; z-index: 2;
	}
}


/* ===========================================================================
   1024px+ — 태블릿 가로 (주 타깃)
   =========================================================================== */
@media (min-width:1024px){

	:root{
		--app-max-w: 840px;
		--app-rail-max-w: 776px;
		--app-gutter: 32px;
		--app-cols: 2;
		--app-card-h: 184px;
		--app-modal-max-w: 520px;
		--app-modal-max-h: 86vh;
		--app-modal-max-h: min(86dvh, 760px);
	}

	/* 컬럼이 840px 로 넓어지면 탭바 아이콘 간격이 과도하게 벌어진다.
	   높이만 키우고 폭은 컬럼을 따르되, 아이콘은 중앙으로 모은다. */
	.nav-bar{ height: 78px; }
	.nav-bar .center-button{ width: 78px; height: 78px; top: -38px; }

	/* 타이포 2단계 (Phase 4a 연장) */
	body{ font-size: 0.875em; }              /* 14px */
	.text01{ font-size: 14px; }
	.text02{ font-size: 16px; }
	.text03{ font-size: 18px; }
	.text04{ font-size: 22px; }
	.text05{ font-size: 13px; }
	.title__wr .title{ font-size: 24px; }
	.title__wr .text { font-size: 16px; }
	.nav-item, .nav-center, .center-label{ font-size: 13px; }
	.main__contents__wr .title__wr .bubble__wr{
		max-width: 160px; height: 32px; line-height: 32px;
	}

	.footer .ft__info__wr .tit{ width: 104px; }
	.footer .ft__info__wr .tx { width: calc(100% - 104px); }

	/* 캘린더 셀 — 컬럼이 840px 이면 7열이 각 110px 이라 날짜가 허전하다 */
	.date .date-num{ padding: 14px 0; font-size: 16px; }
	.day-label{ font-size: 16px; padding: 12px 0; }
	#address-map-preview{ height: 300px !important; }
	#detail-map,
	#map-container-inner{ height: 360px !important; }
	#map,
	#expert-map,
	#inline-map-container{ height: 440px !important; }
	#map-container{ height: 500px !important; }
}


/* ===========================================================================
   1366px+ — iPad Pro 12.9" 가로 / 데스크톱
   상한을 둬서 텍스트 한 줄이 지나치게 길어지는 것을 막는다.
   =========================================================================== */
@media (min-width:1366px){
	:root{
		--app-max-w: 960px;
		--app-rail-max-w: 896px;
	}
}


/* ===========================================================================
   1366px+ PC — 전폭 레이아웃          ※ (pointer:fine) 전용
   ===========================================================================
   위 1366+ 블록이 준 960px 상한을 PC 에서만 걷어내고 뷰포트를 꽉 채운다.
   터치 기기(iPad Pro 12.9" 가로 = 1366)는 이 블록이 발화하지 않아 960px 그대로다.

   왜 pointer 로 가르는가
     "꽉 채움"은 마우스 + 큰 모니터에서만 이득이다. 태블릿은 1366 이 이미 물리
     화면 전체라 상한을 걷어내면 여백만 사라지고 한 줄이 지나치게 길어진다.
     R6 에서 coarse 게이트를 없앤 것과 모순되지 않는다 — 없앤 건 "PC 를 배제하는"
     게이트였고, 여기 있는 건 "PC 에만 추가로 주는" 게이트다.

   전폭에서 따로 손봐야 하는 것
     max-width 만 풀면 개수가 고정된 요소들이 화면 폭만큼 늘어나 망가진다.
     아래 세 가지가 실제 대상이었고, 나머지는 위 블록들이 이미 커버한다.
       1. .nav-bar        — 탭 5개가 1920px 을 space-around 로 나눠 극단 분산
       2. 홈 상단 2타일    — 고정 2개라 50% 면 각 900px 짜리 납작한 판이 된다
       3. 광고 배너        — width:100% + aspect-ratio:3/1 이라 높이가 600px 로 폭발
   =========================================================================== */
@media (min-width:1366px) and (pointer:fine){

	:root{
		--app-max-w: 100%;
		--app-rail-max-w: 100%;
		--app-gutter: 40px;
		--app-card-h: 200px;
		--app-modal-max-w: 560px;
	}

	/* ── 골격 — 뷰포트 전폭 ───────────────────────────────────────────── */
	.container{ max-width: 100% !important; }
	.header   { max-width: 100% !important; }
	.nav-bar  { max-width: 100% !important; }

	/* ── 탭바 — 바는 전폭, 아이콘 그룹만 중앙에 모은다 ────────────────────
	   default.css .nav-bar{justify-content:space-around} + .nav-item{flex:1} 조합은
	   전폭에서 탭 5개를 384px 씩 벌려 놓는다. flex 를 고정폭으로 바꿔 묶는다.
	   border-radius 30px 은 360px 짜리 떠 있는 바일 때의 디자인이라 전폭에선 편다. */
	.nav-bar{ justify-content: center; border-radius: 0; }
	.nav-bar .nav-item,
	.nav-bar .nav-center{ flex: 0 0 132px; }

	/* ── 홈 히어로 — 퀵메뉴 2타일 + 광고 배너, 둘 다 전폭 ────────────────
	   마크업은 .main__con01__box 안에 <ul>(타일 2장) 과 .main__con01__banner 가
	   세로로 쌓인 구조다. 그 세로 배치는 유지한다 — 둘을 가로로 나란히 놓으면
	   성격이 다른 요소(퀵메뉴 / 광고)가 동등한 3열처럼 읽힌다.

	   폭은 default.css 값(ul 100% / banner 100%)이 곧 전폭이라 따로 풀 게 없다.
	   대신 전폭이 되면서 생기는 두 가지를 여기서 흡수한다.

	   1) 타일이 각 900px 이 되어 200px 높이로는 4.5:1 로 납작해진다
	      → 타일에만 260px 을 준다. --app-card-h 를 올리지 않는 이유는 그 토큰이
	        홈 하단 리스트 카드에도 걸려 있어서, 같이 올리면 제목 + 메타 두 줄뿐인
	        구인공고 카드까지 속이 텅 빈 채로 커지기 때문이다(실제로 그렇게 됐다).
	        배경 일러스트는 bottom-right 고정이라 타일 높이를 키워도 안 흐트러진다.

	   2) 배너는 인라인 style 의 aspect-ratio:3/1 탓에 폭이 곧 높이라
	      전폭에서 높이가 608px 이 된다. 비율은 건드리지 않는다 — 슬라이드
	      이미지가 object-fit:cover(js/api/home.js renderAdBanners)라 눕히면
	      상하가 크롭돼 광고 문구가 잘린다(CRM 권장 규격이 안전 영역 60px 을
	      두라고 안내하는 이유다).

	   ※ 배너 원본 권장 규격은 1200×400px 이다
	     (crm/html/advertisement/advertisement-list.php:128).
	     전폭 1825px 은 원본을 1.5배 늘려 쓰는 것이라 이미지가 다소 흐려진다.
	     선명하게 가려면 CRM 의 권장 규격을 1920×640 으로 올려야 한다. */
	.main__contents__box01 .main__con01__box > ul,
	.main__con01__banner{
		max-width: 100% !important;
	}
	.main__contents__box01 .main__con01__box > ul > li a{
		min-height: 260px;
		padding: 20px 24px;
	}

	/* ── 히어로 타일 내부 타이포 ──────────────────────────────────────────
	   카드가 909px 인데 글자는 폰 기준 그대로다. 제목 .text02 는 1024+ 블록의
	   18px, 부제 .card-sub-text 는 페이지 <style> 에 12px 로 박혀 있다
	   (individual/index.php:133, expert/index.php:67). 둘 다 폰의 172px 카드에
	   맞춘 값이라 909px 카드에서는 구석에 붙은 잔글씨로 보인다.

	   .main__contents__box01 로 한정해 특이성을 (0,3,0) 으로 올린다 — 페이지
	   <style> 은 <body> 안이라 캐스케이드상 이 파일보다 뒤여서 (0,1,0) 으로는
	   이길 수 없다. 동시에 범위가 홈 상단 히어로로 좁혀져, 같은 .main__con01__box
	   클래스를 재사용하는 하단 섹션들(.main__contents__box02 안)에는 닿지 않는다. */
	.main__contents__box01 .main__con01__box .text02{
		font-size: 26px;
	}
	.main__contents__box01 .main__con01__box .card-sub-text{
		font-size: 16px;
		margin-top: 6px;
	}

	/* 배경 일러스트 — 원본이 98×83 / 90×82 로 작다(폰 172px 카드 기준이라
	   그 이상 필요가 없었다). 909px 카드에서는 우하단에 점처럼 남는다.
	   1.6배까지만 키운다 — PNG 확대라 그 이상은 눈에 띄게 흐려진다.
	   두 이미지 원본 크기가 서로 달라(98 vs 90) width 고정 대신 scale 을 써서
	   원래의 크기 비례를 유지한다. transform-origin 으로 우하단 앵커도 지킨다. */
	.main__contents__box01 .con01__bg{
		transform: scale(1.6);
		transform-origin: bottom right;
	}

	/* ── 홈 하단 리스트 카드 — 텍스트만 담는 카드는 더 낮게 ──────────────
	   768+ 블록이 .list__box 에 min-height:var(--app-card-h) 를 건다. 그 값은
	   썸네일 80px + 제목 + 메타를 담는 individual 홈 카드 기준이라, 텍스트
	   세 줄뿐인 expert 구인공고 카드(.mySwiper02)에는 과하다. 폰에서 90px
	   (expert/index.php:147)이던 카드가 200px 로 부풀어 속이 빈다. */
	.mySwiper02 .list__box{
		min-height: 150px !important;
	}

	/* ── 캘린더 — 7열이 각 250px 가 되므로 셀 여백을 함께 키운다 ────────── */
	.day-label{ font-size: 17px; padding: 14px 0; }
	.date .date-num{ padding: 18px 0; font-size: 17px; }

	/* ── 캘린더 일정 배지 ────────────────────────────────────────────────
	   {individual,expert,enterprise} 8개 캘린더가 같은 .badge-stack/.badge 를
	   쓴다(마크업·CSS 가 페이지마다 복제돼 있다).

	   배치는 폰과 똑같이 둔다 — 한 줄에 하나씩 세로로 쌓고, 3개를 넘으면 JS 가
	   "+N" 배지를 붙인다. 가로로 흘려 더 많이 담아 보기도 했는데, 날짜별로
	   줄 수가 달라져 주(週) 행 높이가 들쭉날쭉해지고 한눈에 "몇 건"인지 세기
	   어려워진다. 세로 한 줄 = 한 건이라는 규칙이 훨씬 빨리 읽힌다.

	   전폭에서 손보는 건 글자 크기뿐이다. 9px 은 폰의 45px 칸에 맞춘 값이라
	   260px 칸에서는 지나치게 작고, 이 파일이 다른 텍스트(.text01~05, .day-label,
	   .date-num)를 모두 키워 놓은 것과도 어긋난다.

	   .calendar-grid 로 한정해 특이성을 (0,2,0) 으로 올린다 — 페이지 <style> 은
	   <body> 안이라 캐스케이드상 이 파일보다 뒤이므로 같은 특이성으로는 못
	   이긴다. R2 대로 타이포에 !important 를 쓰지 않기 위한 방법이다.
	   (.badge 는 이름이 흔해서 범위를 좁히는 편이 안전하기도 하다) */
	.calendar-grid .badge{
		font-size: 12px;
		padding: 3px 8px;
		border-radius: 5px;
	}
	.calendar-grid .badge-stack{ gap: 3px; margin-top: 6px; }

	/* ── 지도 — 폭이 4~5배가 됐는데 높이가 그대로면 띠처럼 납작해진다 ───── */
	#address-map-preview{ height: 360px !important; }
	#detail-map,
	#map-container-inner{ height: 440px !important; }
	#map,
	#expert-map,
	#inline-map-container{ height: 540px !important; }
	#map-container{ height: 620px !important; }
}