/* === [Responsive Module] 모바일 반응형 및 미디어 쿼리 === */
/* ========================================================
   실전 방문 가이드 (공간 & 분위기 / 실전 팁 / 추천 대상) & AI 안내 배지
   ======================================================== */
.kyokyeoi-practical-guide {
	margin: 1.2rem 0;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.kyokyeoi-practical-guide .guide-item {
	background: #f8fafc;
	border: 1px solid #e2e8f0;
	border-left: 3.5px solid var(--kyokyeoi-blue);
	border-radius: 8px;
	padding: 0.85rem 1.15rem;
}

.kyokyeoi-practical-guide .guide-item-title {
	font-size: 0.95rem;
	font-weight: 750;
	color: var(--kyokyeoi-ink);
	margin-bottom: 0.35rem;
}

.kyokyeoi-practical-guide .guide-item-content {
	font-size: 0.9rem;
	line-height: 1.6;
	color: #334155;
}

.kyokyeoi-practical-guide .guide-tips-list {
	margin: 0.2rem 0 0 1.2rem;
	padding: 0;
	font-size: 0.9rem;
	line-height: 1.6;
	color: #334155;
}

.kyokyeoi-practical-guide .guide-tips-list li {
	margin-bottom: 0.25rem;
}

.kyokyeoi-practical-guide .audience-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.45rem;
	margin-top: 0.25rem;
}

.kyokyeoi-practical-guide .aud-chip {
	display: inline-block;
	background: #e2e8f0;
	color: #1e293b;
	font-size: 0.82rem;
	font-weight: 600;
	padding: 0.25rem 0.65rem;
	border-radius: 20px;
}

/* AI 데이터 취합 안내 및 더블체크 권고 배지 */
.kyokyeoi-ai-disclaimer {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	background: #f8fafc;
	border: 1px dashed #cbd5e1;
	border-radius: 8px;
	padding: 0.85rem 1.1rem;
	margin-top: 1.5rem;
}

.kyokyeoi-ai-disclaimer .disc-icon {
	font-size: 1.25rem;
	line-height: 1.2;
}

.kyokyeoi-ai-disclaimer .disc-body {
	flex: 1;
}

.kyokyeoi-ai-disclaimer .disc-title {
	display: block;
	font-size: 0.86rem;
	font-weight: 750;
	color: #334155;
	margin-bottom: 0.2rem;
}

.kyokyeoi-ai-disclaimer .disc-desc {
	font-size: 0.8rem;
	line-height: 1.55;
	color: #64748b;
	margin: 0;
}

/* ========================================================
   모바일 완벽 반응형 표준 (max-width: 768px): 양사이드 여백 최소화(8px) & 전폭 전개
   ======================================================== */
@media (max-width: 768px) {
	/* 1. 최외곽 메인 컨테이너만 좌우 8px 여백, 중첩 여백은 제로화 */
	body {
		--wp--style--root--padding-left: 8px !important;
		--wp--style--root--padding-right: 8px !important;
		--wp--preset--spacing--50: 8px !important;
	}

	.creapig-header,
	header.wp-block-template-part,
	main#wp--skip-link--target,
	.single main,
	.page main,
	.category main,
	.home main,
	.creapig-footer,
	.entry-content,
	.wp-block-group.has-global-padding {
		padding-left: 0 !important;
		padding-right: 0 !important;
		max-width: 100% !important;
		width: 100% !important;
	}

	/* 모바일 최외곽 여백은 main 내부에서 좌우 8px만 단 1번 부여 */
	body.kyokyeoi-has-hub-page main#wp--skip-link--target,
	body.kyokyeoi-has-hub-page .entry-content,
	.page:has(.kyokyeoi-hub-wrap) main#wp--skip-link--target,
	.page:has(.kyokyeoi-hub-wrap) .entry-content {
		padding-left: 8px !important;
		padding-right: 8px !important;
		box-sizing: border-box !important;
	}

	/* 2. 허브 컨테이너 (.kyokyeoi-hub-wrap): 모바일에서 넓고 시원하게 100% 전개, .kyokyeoi-card와 동일 규격 */
	.kyokyeoi-hub-wrap {
		padding: 1.1rem 0.85rem !important;
		margin: 0.4rem 0 1rem 0 !important;
		border-radius: 8px !important;
		width: 100% !important;
		box-sizing: border-box !important;
	}

	.kyokyeoi-hub-wrap .hub-header {
		margin-bottom: 0.85rem !important;
	}

	.kyokyeoi-hub-wrap .parent-country-link {
		margin-bottom: 0.5rem !important;
	}

	.kyokyeoi-hub-wrap .parent-country-link a {
		font-size: 0.78rem !important;
		padding: 0.22rem 0.6rem !important;
	}

	.kyokyeoi-hub-wrap .hub-title {
		font-size: 1.25rem !important;
		line-height: 1.35 !important;
	}

	/* 모바일 내부 박스 패딩 최적화 (공백 낭비 제거) */
	.flight-access-info-box,
	.city-climate-box {
		padding: 0.75rem 0.75rem !important;
		margin-bottom: 0.85rem !important;
	}

	.country-flight-banner {
		margin-bottom: 0.85rem !important;
	}

	.country-flight-btn {
		padding: 0.75rem 1rem !important;
		font-size: 0.92rem !important;
	}

	/* 국가 6대 팩트 그리드: 모바일에서 1열 시원하게 전개 */
	.hub-fact-quad-grid {
		grid-template-columns: 1fr !important;
		gap: 0.5rem !important;
		margin-bottom: 0.85rem !important;
	}

	.fact-quad-cell {
		padding: 0.75rem 0.75rem !important;
	}

	.hub-weather-full-wrap {
		padding: 0.75rem 0.6rem !important;
		margin-bottom: 0.85rem !important;
	}

	.city-guide-sections {
		grid-template-columns: 1fr !important;
		gap: 0.55rem !important;
		margin-top: 0.85rem !important;
	}

	.guide-box {
		padding: 0.75rem 0.75rem !important;
	}

	/* 3. 본문 카드: 화면 가로폭 시원하게 100% 꽉 채움 */
	.kyokyeoi-card {
		padding: 1.1rem 0.85rem !important;
		margin: 0.75rem 0 !important;
		border-radius: 8px !important;
		width: 100% !important;
	}

	.kyokyeoi-card-header {
		margin-bottom: 0.75rem !important;
	}

	.kyokyeoi-card-header .card-title {
		font-size: 1.25rem !important;
		line-height: 1.35 !important;
		word-break: keep-all;
	}

	/* 원어/영문 상호명 */
	.store-names-row {
		display: flex !important;
		flex-direction: column !important;
		gap: 0.35rem !important;
		padding: 0.5rem 0.65rem !important;
		margin-bottom: 0.65rem !important;
		font-size: 0.88rem !important;
	}

	.store-names-row .store-name-item {
		word-break: break-all;
		line-height: 1.4;
	}

	/* 평점 및 따봉 버튼 */
	.store-score-row {
		display: flex !important;
		flex-direction: column !important;
		align-items: flex-start !important;
		gap: 0.6rem !important;
		padding: 0.6rem 0.75rem !important;
		margin: 0.6rem 0 !important;
	}

	.store-score-row .score-left {
		font-size: 0.95rem !important;
		white-space: nowrap !important;
		display: flex !important;
		align-items: center !important;
		gap: 0.5rem !important;
	}

	.kyokyeoi-travel-score,
	.kyokyeoi-pig-score {
		font-size: 1.15rem !important;
		letter-spacing: 0.04em !important;
		white-space: nowrap !important;
	}

	.store-score-row .score-right {
		width: 100% !important;
	}

	.btn-visitor-like {
		width: 100% !important;
		justify-content: center !important;
		padding: 0.45rem 1rem !important;
		font-size: 0.88rem !important;
		box-sizing: border-box !important;
	}

	/* 지도 높이 */
	.kyokyeoi-card-map-wrap.large-map {
		height: 280px !important;
		margin: 0.8rem 0 !important;
	}

	/* 주소 복사 행 */
	.address-row {
		flex-wrap: wrap !important;
		gap: 0.4rem !important;
		font-size: 0.85rem !important;
	}

	.address-row .addr-text {
		width: 100% !important;
		word-break: break-all;
	}

	.address-row .btn-copy {
		margin-left: auto;
	}

	/* 최저가 비교 바: 모바일/태블릿에서도 무조건 엄격한 1줄(한 줄) 고정 */
	.kyokyeoi-trip-bar.slim-bar {
		padding: 0.5rem 0.75rem !important;
		margin: 0.8rem 0 !important;
		overflow-x: auto !important;
	}

	.kyokyeoi-trip-bar.slim-bar .trip-bar-content-line {
		display: flex !important;
		flex-direction: row !important;
		align-items: center !important;
		justify-content: space-between !important;
		flex-wrap: nowrap !important;
		gap: 0.35rem !important;
		width: 100% !important;
	}

	.kyokyeoi-trip-bar.slim-bar .trip-bar-left {
		flex-shrink: 1 !important;
		min-width: 0 !important;
	}

	.kyokyeoi-trip-bar.slim-bar .trip-bar-title {
		font-size: 0.78rem !important;
		white-space: nowrap !important;
		overflow: hidden !important;
		text-overflow: ellipsis !important;
	}

	.kyokyeoi-trip-bar.slim-bar .trip-bar-buttons {
		width: auto !important;
		display: flex !important;
		flex-direction: row !important;
		flex-wrap: nowrap !important;
		gap: 0.25rem !important;
		flex-shrink: 0 !important;
	}

	.kyokyeoi-trip-bar.slim-bar .trip-btn {
		padding: 0.25rem 0.4rem !important;
		font-size: 0.72rem !important;
		text-align: center !important;
		justify-content: center !important;
		white-space: nowrap !important;
	}

	.kyokyeoi-trip-bar.slim-bar .trip-bar-commission-notice {
		text-align: right !important;
		font-size: 0.65rem !important;
	}

	/* 사진 뷰어 */
	.kyokyeoi-photo-archive {
		padding: 0.75rem !important;
		margin: 0.8rem 0 !important;
		width: 100% !important;
	}

	.photo-main-frame {
		height: 280px !important;
		margin-bottom: 0.75rem !important;
	}

	.photo-num-btn {
		width: 34px !important;
		height: 34px !important;
		font-size: 0.85rem !important;
	}

	/* 리뷰 리스트 */
	.review-columns {
		gap: 0.85rem !important;
	}

	.rev-col {
		padding: 0.85rem 0.95rem !important;
	}

	.rev-list li {
		font-size: 0.88rem !important;
		line-height: 1.55 !important;
	}
}

/* 3. 본문 컨테이너 (메인 홈, 단일 글, 허브 페이지, 아카이브) 상단 여백 0px 및 1200px 칼정렬 */
main#wp--skip-link--target,
main.wp-block-group,
main.creapig-main-content,
.single main,
.page main,
.archive main,
.category main,
.home main {
	max-width: 1200px !important;
	width: 100% !important;
	margin-left: auto !important;
	margin-right: auto !important;
	margin-top: 0 !important;
	padding-top: 0 !important;
	padding-left: 1.25rem !important;
	padding-right: 1.25rem !important;
	box-sizing: border-box !important;
}

/* Twenty Twenty-Five 테마의 인라인 70px 상단 패딩 강제 무효화 (홈과 완전 동일하게 일치) */
main#wp--skip-link--target > .wp-block-group,
main.wp-block-group > .wp-block-group,
.page main > .wp-block-group,
.single main > .wp-block-group,
.archive main > .wp-block-group {
	padding-top: 0.5rem !important;
	margin-top: 0 !important;
}

/* Twenty Twenty-Five 테마의 인라인 제한 컨테이너(645px/38rem) 강제 확장 */
.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)),
main.wp-block-group.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull):not(.alignwide)) {
	max-width: 1200px !important;
	width: 100% !important;
}

/* 카드 및 허브 래퍼 1200px 100% 일치 */
.kyokyeoi-card,
.kyokyeoi-hub-wrap,
.kyokyeoi-main-portal-wrap {
	max-width: 1200px !important;
	width: 100% !important;
	margin-left: auto !important;
	margin-right: auto !important;
	box-sizing: border-box !important;
}

/* 국가 허브 - 도시별 가이드 4열 칩 & 테두리 잘림(Clipping) 완벽 방지 */
.cockpit-city-grid-full {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
	gap: 0.75rem;
	overflow: visible !important;
	padding: 6px !important;
}

@media (max-width: 768px) {
	.cockpit-city-grid-full {
		grid-template-columns: repeat(2, 1fr);
		gap: 0.6rem;
	}
}

.cockpit-city-card-btn {
	padding: 0.85rem 0.6rem !important;
	background: #ffffff !important;
	border: 1.5px solid #cbd5e1 !important;
	border-radius: 10px !important;
	text-decoration: none !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	text-align: center !important;
	box-sizing: border-box !important;
	outline: none !important;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03) !important;
	transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
	cursor: pointer !important;
}

.cockpit-city-card-btn strong {
	font-size: 0.95rem !important;
	font-weight: 750 !important;
	color: #1e3a8a !important;
	line-height: 1.2 !important;
	pointer-events: none !important;
}

.cockpit-city-card-btn:hover,
.cockpit-city-card-btn:focus,
.cockpit-city-card-btn:active {
	outline: none !important;
	border-color: #2563eb !important;
	background: #eff6ff !important;
	box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.22) !important;
	transform: translateY(-2px) !important;
}

.cockpit-city-card-btn:focus-visible {
	outline: none !important;
}