/* ── 부트스트랩 레이아웃(상단 네비 + 푸터) 안에 끼워 넣기 위한 임베드 전용 보정 ──
   공유 style.css(standalone index.html 과 공용)는 손대지 않고 여기서만 덮어씀.
   원본은 #screen-* 가 100vh 풀스크린이라 네비 높이만큼 더해져 페이지가 넘침.
   이 파일은 MVC 임베드(고스톱 뷰)에서만 링크되며 standalone 게임에는 로드되지 않음. */

/* 네비 → 게임(#app) → 푸터 가 세로로 쌓이고, 게임이 남는 높이를 채우도록 */
body { display: flex; flex-direction: column; min-height: 100vh; }
#app { flex: 1 1 auto; width: 100%; }

/* 공유 style.css 의 배경 radial-gradient(투톤: #1d7a4a→#0c3a23)를
   임베드에서는 단색(원톤)으로 덮어써 하단 색 이질감 제거 */
html, body { background: #15693f; }

/* 모바일에서는 공용 푸터가 초록 게임 배경과 이질감이 있어 숨김(네비는 이동 위해 유지) */
@media (max-width: 768px) {
	.site-footer { display: none; }
}

/* 모바일: 손패(최대 10장)가 flex-wrap:nowrap 이라 가로로 넘침 →
   카드를 겹쳐서(음수 margin) 좁은 화면 폭에 맞춤. hover/선택 시 위로 떠서 식별 가능. */
@media (max-width: 640px) {
	.hand-area { gap: 0; }
	.hand-area .card + .card { margin-left: -16px; }
}

/* 100vh 강제 대신 #app(=뷰포트에서 네비/푸터를 뺀 공간) 높이에 맞춤 → 넘침 제거 */
#screen-start, #screen-game { min-height: 100%; }

/* ── Bootstrap 컴포넌트 클래스 충돌 차단 ──
   게임이 .modal/.card/.toast 같은 일반 클래스명을 쓰는데 Bootstrap에 동명 컴포넌트가 있어,
   게임이 선언하지 않은 부트스트랩 속성이 새어들어옴. 게임 컨테이너로 스코프해 되돌림. */

/* 선(先) 선택 등 모달: 부트스트랩 .modal 의 position:fixed/width:100%/height:100% 무력화 →
   .modal-root(오버레이) 안에서 내용 크기로 가운데 정렬되도록 */
#modal-root .modal {
	position: static; width: auto; height: auto;
	z-index: auto; overflow: visible;
}

/* 화투패: 부트스트랩 .card 의 흰 배경/보더/라운드 누수 제거 */
#app .card, #modal-root .card {
	background-color: transparent; border: 0; border-radius: 0;
}

/* 토스트: 부트스트랩 .toast 의 고정 폭(350px) 대신 내용 크기로 */
#toast.toast { width: auto; }