/*!
 * ACTS Match — 뷰포트 레이아웃 전환 + 테마 flex 충돌 차단
 * (미디어 조건 없이 로드 — 모바일 깨짐 방지용)
 */

/* ─── 기본: 데스크탑 블록만 표시 ─── */
.am-responsive-shell {
	display: block !important;
	width: 100% !important;
	max-width: 100% !important;
}

.am-responsive-shell .am-r-mobile {
	display: none;
}

.am-responsive-shell .am-r-desktop {
	display: block;
}

/* ─── 모바일 뷰포트 ─── */
@media (max-width: 1023px) {

	/* 테마·HCJM이 entry-content 를 flex column + 자식 flex:1 로 늘리는 경우 차단 */
	body.acts-match-route-active .entry-content,
	body.acts-match-route-active .site-content .entry-content,
	body.acts-match-route-active #content .entry-content {
		display: block !important;
		flex-direction: column !important;
		align-items: stretch !important;
	}

	body.acts-match-route-active .entry-content > .am-responsive-shell,
	body.acts-match-route-active .mainpage-wrapper > .am-responsive-shell,
	body.acts-match-route-active .am-responsive-shell {
		display: block !important;
		width: 100% !important;
		max-width: 100% !important;
		flex: none !important;
		min-height: 0 !important;
	}

	body.acts-match-route-active .mainpage-wrapper,
	body.acts-match-route-active .mainpage-wrapper .wp-block-shortcode,
	body.acts-match-route-active .mainpage-wrapper .alignleft,
	body.acts-match-route-active .mainpage-wrapper .wp-block-group {
		display: block !important;
		float: none !important;
		width: 100% !important;
		max-width: 100% !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
		box-sizing: border-box !important;
	}

	/* 모바일: 데스크탑 셸 전체 숨김 (자식 개별 숨김·.am-board-list 루트 숨김 충돌 방지) */
	.am-responsive-shell > .am-r-desktop {
		display: none !important;
		visibility: hidden !important;
		height: 0 !important;
		max-height: 0 !important;
		overflow: hidden !important;
		margin: 0 !important;
		padding: 0 !important;
		position: absolute !important;
		left: -99999px !important;
		top: 0 !important;
		width: 0 !important;
		pointer-events: none !important;
		opacity: 0 !important;
	}

	.am-responsive-shell > .am-r-mobile {
		display: block !important;
		width: 100% !important;
		max-width: 100% !important;
		flex: none !important;
		position: relative !important;
		left: auto !important;
		visibility: visible !important;
		opacity: 1 !important;
		height: auto !important;
		overflow-x: hidden !important;
		overflow-y: visible !important;
	}

	html:has(body.acts-match-route-active),
	body.acts-match-route-active {
		overflow-x: hidden !important;
		overscroll-behavior-x: none !important;
		width: 100% !important;
		max-width: 100% !important;
	}

	body.acts-match-route-active #page,
	body.acts-match-route-active #main,
	body.acts-match-route-active .site,
	body.acts-match-route-active .site-content,
	body.acts-match-route-active #content,
	body.acts-match-route-active .entry-content,
	body.acts-match-route-active .mainpage-wrapper {
		overflow-x: hidden !important;
		max-width: 100% !important;
		width: 100% !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}

	/* front.css 그리드 등이 모바일 영역에 스며들 경우 */
	.am-r-mobile .am-board-main,
	.am-r-mobile .am-wrap {
		display: block !important;
		grid-template-columns: none !important;
		grid-template-rows: none !important;
		gap: 0 !important;
		padding: 0 !important;
		max-width: 100% !important;
	}

	/* 모바일 루트 — 블록 레이아웃 고정 */
	.am-r-mobile .am-m-wrap {
		display: block !important;
		width: 100% !important;
		max-width: 100% !important;
		margin: 0 auto !important;
		flex: none !important;
		align-self: stretch !important;
	}

	.am-r-mobile .am-m-wrap > * {
		flex: none !important;
		width: 100% !important;
		max-width: 100% !important;
		min-height: 0 !important;
		height: auto !important;
	}

	/* 모바일 상단 헤더 — 한 줄(뒤로 · 제목 · 알림), 테마/자식 width:100% 덮어쓰기 방지 */
	.am-r-mobile .am-m-wrap .am-header {
		display: flex !important;
		flex-direction: row !important;
		flex-wrap: nowrap !important;
		align-items: center !important;
		justify-content: space-between !important;
		width: 100% !important;
		height: auto !important;
		min-height: 0 !important;
	}

	.am-r-mobile .am-m-wrap .am-header .am-back-btn,
	.am-r-mobile .am-m-wrap .am-header .am-circle-btn,
	.am-r-mobile .am-m-wrap .am-header button.am-circle-btn {
		width: 38px !important;
		max-width: 38px !important;
		min-width: 38px !important;
		height: 38px !important;
		flex: 0 0 38px !important;
		border-radius: 50% !important;
	}

	.am-r-mobile .am-m-wrap .am-header .am-title-block {
		flex: 1 1 auto !important;
		width: auto !important;
		max-width: none !important;
		min-width: 0 !important;
	}

	/* 타입 탭 — 3열 균등·중앙 (front-mobile.css 와 동일) */
	.am-r-mobile .am-m-wrap > .bd-type-toggle {
		display: flex !important;
		justify-content: center !important;
		width: 100% !important;
		max-width: 100% !important;
		overflow-x: hidden !important;
		overflow-y: hidden !important;
		padding-left: 14px !important;
		padding-right: 14px !important;
		box-sizing: border-box !important;
	}

	.am-r-mobile .bd-type-toggle .bd-type-scroll {
		display: grid !important;
		grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
		align-items: stretch !important;
		justify-content: center !important;
		justify-items: stretch !important;
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
		height: auto !important;
		min-height: 0 !important;
		margin: 0 auto !important;
		padding: 0 !important;
		box-sizing: border-box !important;
		overflow: visible !important;
		gap: 8px !important;
	}

	.am-r-mobile .bd-type-card {
		display: inline-flex !important;
		flex-direction: row !important;
		flex: none !important;
		width: 100% !important;
		min-width: 0 !important;
		justify-content: center !important;
		height: auto !important;
		min-height: 0 !important;
		max-height: none !important;
		align-self: stretch !important;
		writing-mode: horizontal-tb !important;
		white-space: nowrap !important;
	}

	/* 검색 행 */
	.am-r-mobile .bd-search-row {
		display: flex !important;
		flex-direction: row !important;
		align-items: center !important;
		width: 100% !important;
		height: auto !important;
	}

	.am-r-mobile .bd-search-input-wrap {
		flex: 1 1 auto !important;
		width: auto !important;
		min-width: 0 !important;
		height: auto !important;
	}

	.am-r-mobile .bd-icon-btn {
		flex: 0 0 48px !important;
		width: 48px !important;
		height: 48px !important;
		align-self: stretch !important;
	}

	.am-r-mobile .bd-search-input {
		font-size: 16px !important;
		height: 48px !important;
		min-height: 48px !important;
	}

	/* 카테고리 칩 — 가로 스크롤 */
	.am-r-mobile .bd-cat-row {
		display: flex !important;
		flex-direction: row !important;
		flex-wrap: nowrap !important;
		align-items: center !important;
		justify-content: flex-start !important;
		overflow-x: auto !important;
		overflow-y: hidden !important;
		width: 100% !important;
		max-width: 100% !important;
		height: auto !important;
		min-height: 0 !important;
		max-height: none !important;
		overscroll-behavior-x: contain !important;
		-webkit-overflow-scrolling: touch;
	}

	.am-r-mobile .bd-cat-chip,
	body.acts-match-route-active .entry-content a.bd-cat-chip,
	body.acts-match-route-active .entry-content a.bd-type-card,
	body.acts-match-route-active .entry-content a.bd-cat-chip {
		display: inline-flex !important;
		flex: 0 0 auto !important;
		flex-direction: row !important;
		width: auto !important;
		min-width: auto !important;
		max-width: none !important;
		height: auto !important;
		min-height: 0 !important;
		max-height: none !important;
		align-self: center !important;
		writing-mode: horizontal-tb !important;
		white-space: nowrap !important;
	}

	body.acts-match-route-active .entry-content a.bd-type-card {
		flex: 0 0 auto !important;
		height: auto !important;
		min-height: 0 !important;
		max-height: none !important;
	}

	.am-r-mobile .bd-list-meta {
		display: flex !important;
		flex-direction: row !important;
		flex-wrap: nowrap !important;
		align-items: center !important;
		justify-content: space-between !important;
		gap: 10px !important;
		width: 100% !important;
		height: auto !important;
	}

	body.acts-match-route-active .entry-content .bd-list-count,
	.am-r-mobile .bd-list-count {
		display: flex !important;
		flex-direction: row !important;
		flex-wrap: nowrap !important;
		align-items: baseline !important;
		flex: 1 1 auto !important;
		min-width: 0 !important;
		width: auto !important;
		max-width: none !important;
		height: auto !important;
		margin: 0 !important;
		white-space: nowrap !important;
	}

	body.acts-match-route-active .entry-content .bd-list-count strong,
	.am-r-mobile .bd-list-count strong {
		display: inline !important;
		width: auto !important;
		flex: none !important;
	}

	body.acts-match-route-active .entry-content .bd-sort,
	.am-r-mobile .bd-sort {
		flex: 0 0 auto !important;
		width: auto !important;
		min-width: 96px !important;
		max-width: 38% !important;
		height: auto !important;
	}

	.am-r-mobile .bd-list {
		display: flex !important;
		flex-direction: column !important;
		width: 100% !important;
	}

	.am-r-mobile .bd-card {
		display: block !important;
		width: 100% !important;
		flex: none !important;
		height: auto !important;
	}

	/* 테마 .entry-content 가 링크·자식에 flex:1 을 줄 때 카드 레이아웃 보호 */
	body.acts-match-route-active .entry-content a.bd-card,
	.am-r-mobile a.bd-card {
		display: block !important;
		flex: none !important;
		flex-direction: unset !important;
		align-items: stretch !important;
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
	}

	body.acts-match-route-active .entry-content a.bd-card .bd-card-foot,
	.am-r-mobile a.bd-card .bd-card-foot {
		display: flex !important;
		flex-direction: row !important;
	}

	/* 데스크탑 카드(bdd-*)가 모바일 영역에 섞이면 숨김 */
	.am-r-mobile .bdd-card,
	.am-r-mobile .bdd-card-grid,
	.am-r-mobile .am-card-grid {
		display: none !important;
	}

	/* 데스크탑 카드가 노출될 때 푸터·SVG 최소 보정 */
	.am-responsive-shell .am-r-desktop .bdd-card-foot,
	.am-r-mobile .bdd-card-foot {
		display: flex !important;
		flex-direction: row !important;
		align-items: center !important;
	}

	.am-responsive-shell .am-r-desktop .bdd-card-stat svg,
	.am-r-mobile .bdd-card-stat svg,
	.am-responsive-shell .am-r-desktop .bdd-card-avatar svg,
	.am-r-mobile .bdd-card-avatar svg {
		width: 12px !important;
		height: 12px !important;
		max-width: 12px !important;
		max-height: 12px !important;
		flex: none !important;
		display: block !important;
	}

	.am-responsive-shell .am-r-desktop .bdd-card-author-name,
	.am-r-mobile .bdd-card-author-name {
		flex-direction: row !important;
		writing-mode: horizontal-tb !important;
		word-break: keep-all !important;
	}

	body.acts-match-route-active {
		background: #f7f7fb;
	}

	/* HCJM 하단 탭바 여백 (mainpage와 동일 변수) */
	body.acts-match-has-hcjm-tabbar:has(.hcjm-tabbar) {
		--hcjm-tabbar-fab-overhang: 22px;
		--hcjm-tabbar-space: calc(var(--hcjm-tabbar-h, 64px) + var(--hcjm-tabbar-safe, env(safe-area-inset-bottom, 0px)) + var(--hcjm-tabbar-fab-overhang));
	}

	html.hcjm-env-android body.acts-match-has-hcjm-tabbar:has(.hcjm-tabbar) {
		--hcjm-tabbar-safe: 0px;
		--hcjm-tabbar-space: calc(var(--hcjm-tabbar-h, 64px) + var(--hcjm-tabbar-fab-overhang));
	}

	body.acts-match-has-hcjm-tabbar .am-m-wrap {
		padding-bottom: var(--hcjm-tabbar-space, 96px) !important;
	}

	body.acts-match-has-hcjm-tabbar .bd-fab {
		display: none !important;
	}

	body.am-page-write .hcjm-tabbar {
		display: none !important;
	}

	/* HCJM 탭바 — acts-match 본문 안에 있어도 하단 고정·표시 */
	body.acts-match-has-hcjm-tabbar .hcjm-tabbar.hcjm-only-mobile {
		display: flex !important;
		position: fixed !important;
		left: 0 !important;
		right: 0 !important;
		bottom: 0 !important;
		width: 100% !important;
		z-index: 220 !important;
		visibility: visible !important;
		opacity: 1 !important;
		transform: none !important;
	}
}

@media (min-width: 1024px) {
	body.acts-match-has-hcjm-tabbar .hcjm-tabbar.hcjm-only-mobile {
		display: none !important;
	}
}

@media (min-width: 1024px) {
	.am-responsive-shell > .am-r-mobile {
		display: none !important;
	}
}

/* ─── 데스크탑: ACTS Match 본문 중앙 정렬 (1280px 캔버스) ─── */
@media (min-width: 1024px) {
	body.acts-match-route-active .site-content > .ast-container,
	body.acts-match-route-active #primary,
	body.acts-match-route-active #content,
	body.acts-match-route-active .site-content {
		width: 100% !important;
		max-width: 100% !important;
		margin-left: auto !important;
		margin-right: auto !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
		float: none !important;
	}

	body.acts-match-route-active .entry-content {
		display: block !important;
		width: 100% !important;
		max-width: 100% !important;
		margin-left: auto !important;
		margin-right: auto !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
		float: none !important;
		clear: both !important;
		align-items: stretch !important;
	}

	body.acts-match-route-active .entry-content > .wp-block-shortcode,
	body.acts-match-route-active .entry-content > .alignleft,
	body.acts-match-route-active .entry-content > .wp-block-group {
		display: block !important;
		width: 100% !important;
		max-width: 100% !important;
		margin-left: auto !important;
		margin-right: auto !important;
		float: none !important;
		clear: both !important;
	}

	body.acts-match-route-active .am-responsive-shell,
	body.acts-match-route-active .am-responsive-shell > .am-r-desktop {
		display: block !important;
		width: 100% !important;
		max-width: 100% !important;
		margin-left: auto !important;
		margin-right: auto !important;
		visibility: visible !important;
		position: static !important;
		left: auto !important;
		height: auto !important;
		opacity: 1 !important;
		pointer-events: auto !important;
		overflow: visible !important;
	}

	body.acts-match-route-active .am-responsive-shell > .am-r-desktop .am-wrap.am-layout-desktop,
	body.acts-match-route-active .am-responsive-shell > .am-r-desktop .am-board-hero {
		display: block !important;
		visibility: visible !important;
		position: static !important;
		left: auto !important;
		width: auto !important;
		max-width: none !important;
		height: auto !important;
		opacity: 1 !important;
		pointer-events: auto !important;
		overflow: visible !important;
	}

	body.acts-match-route-active .am-wrap.am-layout-desktop,
	body.acts-match-route-active .am-wrap.am-browse,
	body.acts-match-route-active .am-wrap.am-mypage {
		box-sizing: border-box;
		width: 100%;
		max-width: 1280px;
		margin-left: auto;
		margin-right: auto;
	}

	/* am-wrap 안쪽 bdd-* 는 캔버스 폭 100% (이중 1280 여백 방지) */
	body.acts-match-route-active .am-wrap.am-layout-desktop .bdd-main,
	body.acts-match-route-active .am-wrap.am-layout-desktop .bdd-detail-main,
	body.acts-match-route-active .am-wrap.am-layout-desktop .bdd-write-main,
	body.acts-match-route-active .am-wrap.am-layout-desktop .bdd-board-topstrip,
	body.acts-match-route-active .am-wrap.am-layout-desktop .bdd-page-hero-inner {
		max-width: 100%;
		margin-left: auto;
		margin-right: auto;
	}
}

/* 필터 모달 — 테마 .entry-content 버튼·라벨 flex 간섭 차단 */
@media (max-width: 1023px) {
	body.acts-match-route-active #bd-filter-sheet label.bd-filter-trust-opt,
	body.acts-match-route-active .entry-content #bd-filter-sheet label.bd-filter-trust-opt {
		display: block !important;
		flex: none !important;
		width: 100% !important;
	}

	body.acts-match-route-active #bd-filter-sheet .bd-filter-trust-row,
	body.acts-match-route-active .entry-content #bd-filter-sheet .bd-filter-trust-row {
		display: grid !important;
		grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
		width: 100% !important;
	}

	body.acts-match-route-active #bd-filter-sheet button.bd-filter-sheet-apply,
	body.acts-match-route-active .entry-content #bd-filter-sheet button.bd-filter-sheet-apply {
		flex: 1 1 auto !important;
		width: auto !important;
		min-height: 48px !important;
		color: #fff !important;
		background: #4541FF !important;
	}

	body.acts-match-route-active #bd-filter-sheet button.bd-filter-sheet-close,
	body.acts-match-route-active .entry-content #bd-filter-sheet button.bd-filter-sheet-close {
		background: #F7F7FB !important;
		color: #4A4D63 !important;
		border-radius: 50% !important;
		width: 36px !important;
		height: 36px !important;
	}
}