/**
 * よし耳鼻咽喉科 — スマホ向け院内混雑状況バー
 * 768px 以下のみ表示
 */

@media (min-width: 769px) {
	.yoshi-mobile-congestion-bar {
		display: none !important;
	}
}

@media (max-width: 768px) {
	.yoshi-mobile-congestion-bar {
		position: fixed;
		left: 0;
		right: 0;
		bottom: var(--yoshi-mobile-congestion-bottom, 0);
		z-index: 101;
		box-sizing: border-box;
		padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
		background: linear-gradient(180deg, #f8fbff 0%, #ffffff 100%);
		border-top: 1px solid rgba(46, 125, 180, 0.18);
		border-radius: 12px 12px 0 0;
		box-shadow: 0 -4px 16px rgba(30, 60, 90, 0.1);
		font-family: -apple-system, BlinkMacSystemFont, 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
		color: #2c3e50;
		line-height: 1.45;
		transform: translateY(0);
		transition: transform 0.25s ease, opacity 0.25s ease;
	}

	.yoshi-mobile-congestion-bar.is-hidden {
		display: none;
	}

	.yoshi-mobile-congestion-bar__head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 8px;
		margin-bottom: 6px;
	}

	.yoshi-mobile-congestion-bar__title {
		margin: 0;
		font-size: 12px;
		font-weight: 600;
		color: #3d5a73;
		letter-spacing: 0.02em;
	}

	.yoshi-mobile-congestion-bar__close {
		flex-shrink: 0;
		width: 36px;
		height: 36px;
		margin: -4px -6px -4px 0;
		padding: 0;
		border: none;
		border-radius: 8px;
		background: rgba(46, 125, 180, 0.08);
		color: #4a6278;
		font-size: 22px;
		line-height: 1;
		cursor: pointer;
		-webkit-tap-highlight-color: transparent;
	}

	.yoshi-mobile-congestion-bar__close:focus-visible {
		outline: 2px solid #2e7db4;
		outline-offset: 2px;
	}

	.yoshi-mobile-congestion-bar__status {
		margin: 0 0 4px;
		font-size: 15px;
		font-weight: 700;
		color: #1a2b3c;
	}

	.yoshi-mobile-congestion-bar__note {
		margin: 0;
		font-size: 12px;
		color: #4d6275;
	}

	.yoshi-mobile-congestion-bar__meta {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		gap: 6px 10px;
		margin-top: 8px;
	}

	.yoshi-mobile-congestion-bar__time {
		margin: 0;
		font-size: 11px;
		color: #6b7f92;
	}

	.yoshi-mobile-congestion-bar__cta {
		margin: 0;
		font-size: 11px;
		font-weight: 600;
	}

	.yoshi-mobile-congestion-bar__cta a,
	.yoshi-mobile-congestion-bar__cta-link {
		color: #1a7f5a;
		text-decoration: underline;
		text-underline-offset: 2px;
	}

	.yoshi-mobile-congestion-bar__cta a:focus-visible,
	.yoshi-mobile-congestion-bar__cta-link:focus-visible {
		outline: 2px solid #1a7f5a;
		outline-offset: 2px;
	}

	/* ページ最下部コンテンツが隠れないよう余白（バー＋固定フッターメニュー分） */
	body.yoshi-mobile-congestion-active #body_wrap,
	body.yoshi-mobile-congestion-active #all_wrapp {
		padding-bottom: calc(
			var(--yoshi-mobile-congestion-bar-height, 0px) + var(--yoshi-mobile-congestion-fixmenu-height, 0px) + env(safe-area-inset-bottom, 0px)
		);
	}
}