/*
 * TabiPark Wait Time - スタイルシート
 *
 * デザイン方針：
 * ・白背景＋淡い水色＋グレーを基調
 * ・アクセントカラー #32c0c1
 * ・待ち時間の長さは信号色（赤・緑）を使わず、濃淡のトーンで表現する
 * ・スマホでの閲覧を最優先（横スクロールが発生しないレイアウト）
 * ・記事本文の横幅に自然に収まる（tableは使用しない）
 */

/* 全体を囲むラッパー。box-sizingをborder-boxに固定し、横幅計算のズレを防ぐ */
.tabipark-waittime-wrap,
.tabipark-waittime-wrap * {
	box-sizing: border-box;
}

.tabipark-waittime-wrap {
	max-width: 100%;
	margin: 24px 0;
	font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
	color: #333333;
}

/* ---------- ヘッダー部分 ---------- */

.tabipark-header {
	margin-bottom: 16px;
	padding-bottom: 12px;
	border-bottom: 2px solid #32c0c1;
}

.tabipark-title {
	margin: 0 0 8px;
	font-size: 20px;
	line-height: 1.4;
	color: #1f2933;
}

.tabipark-updated {
	margin: 0 0 4px;
	font-size: 13px;
	color: #6b7280;
}

.tabipark-description {
	margin: 0;
	font-size: 13px;
	color: #6b7280;
}

.tabipark-no-data {
	padding: 16px;
	background: #f4fbfb;
	border: 1px solid #d9f0f0;
	border-radius: 8px;
	color: #6b7280;
	font-size: 14px;
}

/* Last Good Cache使用時（更新遅延）の案内。赤系のアラート色は使わず、控えめなアンバー系に留める */
.tabipark-stale-notice {
	margin: 8px 0 0;
	padding: 8px 12px;
	background: #fbf6ea;
	border: 1px solid #ecdfc0;
	border-radius: 6px;
	color: #8a6d3b;
	font-size: 12.5px;
	line-height: 1.5;
}

.tabipark-error {
	padding: 12px;
	background: #fbf4f4;
	border: 1px solid #eddcdc;
	border-radius: 8px;
	color: #7a4a4a;
	font-size: 14px;
}

/* ---------- エリアカード一覧 ---------- */

.tabipark-area-list {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

/* エリアごとのカード：角丸・薄い枠・ごく薄い影・十分な余白 */
.tabipark-area-card {
	background: #ffffff;
	border: 1px solid #e2e8ec;
	border-radius: 12px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
	overflow: hidden;
	width: 100%;
}

.tabipark-area-header {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 14px 16px;
	background: #eef8f8; /* 淡い水色 */
	border-bottom: 1px solid #d9f0f0;
}

.tabipark-area-en {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: #1f8a8b;
	text-transform: uppercase;
}

.tabipark-area-ja {
	font-size: 15px;
	font-weight: 700;
	color: #1f2933;
}

/* ---------- アトラクション行 ---------- */

.tabipark-attraction-list {
	display: flex;
	flex-direction: column;
}

.tabipark-attraction-row {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
	padding: 14px 16px;
	border-bottom: 1px solid #eef1f3;
}

.tabipark-attraction-row:last-child {
	border-bottom: none;
}

/* アトラクション名は左側。長い名前でも横スクロールさせず折り返す */
.tabipark-attraction-name {
	flex: 1 1 auto;
	min-width: 0;
	font-size: 14.5px;
	line-height: 1.5;
	color: #333333;
	overflow-wrap: break-word;
	word-break: break-word;
}

/* 待ち時間は右側。幅を確保して数値の桁が変わってもガタつきにくくする */
.tabipark-wait-col {
	flex: 0 0 auto;
	min-width: 76px;
	text-align: right;
}

.tabipark-wait-value {
	font-size: 22px;
	font-weight: 700;
	line-height: 1.2;
}

/* 待ち時間の長さによる濃淡表現（信号色は使用しない） */
.tabipark-wait-short {
	color: #2aa5a6; /* アクセントカラー寄りの淡いトーン */
}

.tabipark-wait-medium {
	color: #3d8fa0;
}

.tabipark-wait-long {
	color: #56707d;
}

.tabipark-wait-very-long {
	color: #3d4852;
}

/* 前回比：待ち時間の下に小さく表示 */
.tabipark-wait-diff {
	margin-top: 4px;
	font-size: 12px;
	line-height: 1.4;
}

.tabipark-diff-up {
	color: #8a7a6b; /* 増加：暖かみのあるグレー（赤系にはしない） */
}

.tabipark-diff-down {
	color: #2a9d9e; /* 減少：アクセントカラー系のトーン（緑系にはしない） */
}

.tabipark-diff-same {
	color: #9aa3ab;
}

/* ---------- ステータスバッジ（休止中・案内終了・準備中） ---------- */

.tabipark-status-badge {
	display: inline-block;
	padding: 4px 10px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 600;
	white-space: nowrap;
	background: #eef1f3;
	color: #6b7280;
	border: 1px solid #dfe4e8;
}

.tabipark-status-suspended {
	background: #f2f6f6;
	color: #5c7a7b;
	border-color: #d9e6e6;
}

.tabipark-status-closed {
	background: #f0f1f2;
	color: #6b7280;
	border-color: #dde1e4;
}

.tabipark-status-preparing {
	background: #eef8f8;
	color: #1f8a8b;
	border-color: #cdeaea;
}

.tabipark-status-unknown {
	background: #f4f4f5;
	color: #7a7f85;
	border-color: #e2e4e7;
}

/* ---------- タブ切替（[tabipark_waittime_tabs]） ---------- */

.tabipark-tabs,
.tabipark-tabs * {
	box-sizing: border-box;
}

.tabipark-tabs {
	max-width: 100%;
	margin: 24px 0;
	font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
}

/* タブは横2列。派手なグラデーションは使わず、単色＋角丸で表現する */
.tabipark-tab-list {
	display: flex;
	gap: 8px;
	margin: 0 0 16px;
}

.tabipark-tab-button {
	flex: 1 1 50%;
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
	padding: 12px 8px;
	font-family: inherit;
	font-size: 14.5px;
	font-weight: 700;
	line-height: 1.4;
	color: #4a5560;
	background: #ffffff;
	border: 1px solid #d9e6e6;
	border-radius: 10px;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.tabipark-tab-button:hover {
	border-color: #32c0c1;
	color: #1f8a8b;
}

/* 選択中タブ：アクセントカラー系の単色背景に白文字で、はっきり分かるようにする */
.tabipark-tab-button.is-active {
	background: #32c0c1;
	border-color: #32c0c1;
	color: #ffffff;
}

.tabipark-tab-button.is-active:hover {
	color: #ffffff;
}

.tabipark-tab-button:focus-visible {
	outline: 2px solid #1f8a8b;
	outline-offset: 2px;
}

/* 非表示中のパネル（JSがhidden属性を切り替える） */
.tabipark-tab-panel[hidden] {
	display: none;
}

/* タブパネル内の待ち時間ラッパーは、単独ショートコード時の上マージンを詰めて二重の余白を避ける */
.tabipark-tab-panel > .tabipark-waittime-wrap {
	margin-top: 0;
}

/* ---------- データ元表記（ThemeParks.wiki） ---------- */

/* 目立ちすぎない小さな表記。ただし視認できる程度のコントラストは確保する */
.tabipark-source {
	margin: 12px 0 0;
	text-align: right;
	font-size: 11px;
	line-height: 1.4;
}

.tabipark-source a {
	color: #8a95a0;
	text-decoration: underline;
}

.tabipark-source a:hover,
.tabipark-source a:focus {
	color: #32c0c1;
}

/* ---------- レスポンシブ対応 ---------- */

/* PC幅：記事本文の横幅にそのまま収まるよう、tableを使わずカードを縦に並べる */
@media screen and (min-width: 600px) {
	.tabipark-title {
		font-size: 22px;
	}

	.tabipark-attraction-name {
		font-size: 15px;
	}

	.tabipark-wait-value {
		font-size: 24px;
	}
}

/* スマホ幅：余白を少し詰めつつ、横スクロールが発生しないようにする */
@media screen and (max-width: 380px) {
	.tabipark-attraction-row {
		padding: 12px;
	}

	.tabipark-wait-col {
		min-width: 64px;
	}

	.tabipark-wait-value {
		font-size: 20px;
	}
}