.km-siteFeedbackPopup {
	position: fixed;
	left: 18px;
	bottom: calc(18px + env(safe-area-inset-bottom));
	z-index: 180;
	display: grid;
	gap: 10px;
	max-width: min(92vw, 360px);
	opacity: 0;
	transform: translateY(12px);
	pointer-events: none;
	transition: opacity 0.25s ease, transform 0.25s ease;
}

.km-siteFeedbackPopup.is-visible {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}

.km-siteFeedbackPopup__teaser {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 14px;
	border: 1px solid #f2bcbf;
	border-radius: 9999px;
	background: rgba(255, 246, 247, 0.96);
	color: #5e5147;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.2;
	box-shadow: 0 4px 14px rgba(93, 77, 66, 0.16);
	cursor: pointer;
}

.km-siteFeedbackPopup__teaserIcon {
	flex: 0 0 auto;
}

.km-siteFeedbackPopup__teaserText {
	white-space: nowrap;
}

.km-siteFeedbackPopup__panel {
	position: relative;
	background: rgba(255, 251, 246, 0.98);
	border: 1px solid #f0d7c7;
	border-radius: 16px;
	box-shadow: 0 10px 24px rgba(93, 77, 66, 0.18);
	padding: 14px 14px 12px;
}

.km-siteFeedbackPopup__close {
	position: absolute;
	top: 8px;
	right: 8px;
	border: none;
	background: transparent;
	color: #9b8371;
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
}

.km-siteFeedbackPopup__title {
	margin: 0;
	color: #5e5147;
	font-size: 15px;
	font-weight: 800;
	line-height: 1.35;
}

.km-siteFeedbackPopup__lead {
	margin: 8px 0 0;
	color: #6c5b4f;
	font-size: 12px;
	line-height: 1.55;
}

.km-siteFeedbackPopup__quickActions {
	display: flex;
	gap: 8px;
	margin-top: 10px;
}

.km-siteFeedbackPopup__action,
.km-siteFeedbackPopup__submit {
	border-radius: 9999px;
	padding: 8px 12px;
	font-size: 12px;
	font-weight: 700;
	cursor: pointer;
}

.km-siteFeedbackPopup__action--primary,
.km-siteFeedbackPopup__submit {
	border: 1px solid #f08f64;
	background: #f08f64;
	color: #fff;
}

.km-siteFeedbackPopup__action--secondary {
	border: 1px solid #dac7b7;
	background: #fff;
	color: #6a5b4f;
}

.km-siteFeedbackPopup__form {
	margin-top: 10px;
	display: grid;
	gap: 10px;
}

.km-siteFeedbackPopup__topics {
	border: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 6px;
}

.km-siteFeedbackPopup__legend {
	margin: 0 0 2px;
	color: #5e5147;
	font-size: 12px;
	font-weight: 700;
}

.km-siteFeedbackPopup__topics label {
	display: flex;
	align-items: center;
	gap: 6px;
	color: #5e5147;
	font-size: 12px;
	line-height: 1.4;
}

.km-siteFeedbackPopup__commentLabel {
	color: #5e5147;
	font-size: 12px;
	font-weight: 700;
}

.km-siteFeedbackPopup textarea {
	min-height: 72px;
	resize: vertical;
	border: 1px solid #dfcec0;
	border-radius: 10px;
	padding: 9px 10px;
	font-size: 12px;
	line-height: 1.45;
	color: #4f453d;
	background: #fff;
}

.km-siteFeedbackPopup__formActions {
	display: flex;
	gap: 8px;
}

.km-siteFeedbackPopup__thanks {
	margin: 8px 0 0;
	padding: 9px 10px;
	border-radius: 10px;
	background: #f3efe7;
	color: #5b5047;
	font-size: 12px;
	font-weight: 700;
}

@media (max-width: 640px) {
	.km-siteFeedbackPopup {
		left: 10px;
		right: 10px;
		max-width: none;
		bottom: calc(12px + env(safe-area-inset-bottom));
	}

	/* TOPのモバイルではAIブタチェStickyと重ならないように上へ逃がす */
	body.home .km-siteFeedbackPopup {
		bottom: calc(86px + env(safe-area-inset-bottom));
		z-index: 226;
	}

	body.has-mobile-butache-sticky .km-siteFeedbackPopup {
		bottom: calc(86px + env(safe-area-inset-bottom));
	}

	body.has-mobile-share-sticky .km-siteFeedbackPopup {
		bottom: calc(108px + env(safe-area-inset-bottom));
	}

	.km-siteFeedbackPopup__teaser {
		justify-content: center;
	}
}