/* wayback-history.css - WayBack運用歴チェックツール専用スタイル */

/* 入力欄＋実行ボタンを同じ行に並べる */
.wb-form-row {
	display: flex;
	align-items: stretch;
	gap: 8px;
}
.wb-input-wrap {
	position: relative;
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
}
.wb-input {
	flex: 1 1 auto;
	min-width: 0;
	box-sizing: border-box;
	padding: 12px 36px 12px 14px;
	font-size: 15px;
	border: 1px solid #d1d5db;
	border-radius: 8px;
	line-height: 1.5;
}
.wb-clear {
	position: absolute;
	right: 8px;
	top: 50%;
	transform: translateY(-50%);
	border: none;
	background: transparent;
	color: #9ca3af;
	cursor: pointer;
	font-size: 14px;
	line-height: 1;
	padding: 4px 6px;
}
.wb-clear:hover { color: #6b7280; }
.wb-input:focus {
	outline: none;
	border-color: #3b82f6;
	box-shadow: 0 0 0 2px rgba(59, 130, 246, .2);
}
.wb-form-row .wb-run-btn {
	flex: 0 0 auto;
	margin: 0;
	white-space: nowrap;
}
.wb-seo-link { color: #1173c0; text-decoration: none; }
.wb-seo-link:hover { text-decoration: underline; }

/* サマリー */
.wb-summary {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 4px 0 16px;
}
.wb-summary-item {
	flex: 1;
	min-width: 140px;
	background: #f9fafb;
	border: 1px solid #e5e7eb;
	border-radius: 8px;
	padding: 12px 16px;
	text-align: center;
}
.wb-summary-item .wb-summary-label {
	font-size: 12px;
	color: #6b7280;
	display: block;
	margin-bottom: 4px;
}
.wb-summary-item .wb-summary-value {
	font-size: 20px;
	font-weight: 700;
	color: #1f2937;
}
.wb-summary-item .wb-summary-value small {
	font-size: 12px;
	font-weight: 400;
	color: #6b7280;
}

/* セクション見出し */
.wb-section-title {
	font-size: 15px;
	font-weight: 700;
	color: #374151;
	margin: 18px 0 8px;
}

/* 月別記録数チャート（バニラSVG）。横幅が短い場合は中央寄せ */
.wb-chart-wrap { margin-bottom: 8px; }
.wb-chart { width: 100%; overflow-x: auto; text-align: center; }
.wb-chart svg { display: inline-block; }
.wb-chart .wb-bar { fill: #3b82f6; }
.wb-chart .wb-bar:hover { fill: #2563eb; }
.wb-chart .wb-axis { stroke: #e5e7eb; stroke-width: 1; }
.wb-chart .wb-axis-label { fill: #9ca3af; font-size: 10px; }
.wb-chart-empty { color: #9ca3af; font-size: 13px; padding: 12px 0; }

/* 結果テーブル */
#result td { white-space: normal; vertical-align: top; font-size: 12px; }

/* 記録日セル（対象日を縦積みでリンク表示） */
.wb-td-dates { white-space: nowrap; }
.wb-td-dates .wb-date-link {
	display: block;
	padding: 1px 0;
	color: #1173c0;
	text-decoration: none;
	font-variant-numeric: tabular-nums;
}
.wb-td-dates .wb-date-link:hover { text-decoration: underline; }
.wb-td-title { max-width: 420px; }
.wb-td-title .wb-title-line { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.wb-td-title .wb-title-main { flex: 1 1 auto; min-width: 0; font-weight: 700; color: #1f2937; word-break: break-word; }
.wb-td-title .wb-title-desc { color: #6b7280; margin-top: 3px; word-break: break-word; }
.wb-td-title .wb-title-extlinks { margin-top: 5px; color: #6b7280; word-break: break-word; }
.wb-td-title .wb-title-none { color: #9ca3af; }

/* 文字数上限クランプの省略記号（クリックで全文/省略を開閉） */
.wb-ellipsis { color: #1173c0; text-decoration: none; cursor: pointer; font-weight: 700; padding: 0 2px; }
.wb-ellipsis:hover { text-decoration: underline; }

/* ローディング表示 */
.wb-spin {
	display: inline-block;
	width: 16px;
	height: 16px;
	border: 2px solid #e5e7eb;
	border-top-color: #3b82f6;
	border-radius: 50%;
	vertical-align: middle;
	animation: wb-spin-kf .7s linear infinite;
}
@keyframes wb-spin-kf { to { transform: rotate(360deg); } }
.wb-loading-cell { text-align: center; padding: 24px 0; }
.wb-chart-loading { display: flex; align-items: center; justify-content: center; height: 140px; }
.wb-none { color: #9ca3af; }

/* 最終HTTPステータスコードのラベル（TITLE左端） */
.wb-http-badge {
	display: inline-block;
	flex: 0 0 auto;
	padding: 1px 6px;
	border-radius: 4px;
	font-size: 11px;
	font-weight: 700;
	line-height: 1.6;
}
.wb-http-2xx { background: #d1fae5; color: #065f46; }   /* 2xx: successと同系の緑 */
.wb-http-3xx { background: #ffedd5; color: #9a3412; }   /* 3xx: オレンジ */
.wb-http-45xx { background: #fee2e2; color: #991b1b; }  /* 4xx/5xx: 赤 */
.wb-http-other { background: #f3f4f6; color: #6b7280; } /* その他: グレー */

/* ステータス列のラベル: デザインを統一（同一の箱・角丸・余白）し、縦積みで表示 */
.wb-status-cell {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
}
.wb-badge {
	display: inline-block;
	box-sizing: border-box;
	padding: 2px 10px;
	border-radius: 9999px;
	font-size: 11px;
	font-weight: 700;
	line-height: 1.6;
	white-space: nowrap;
}
/* 種別ごとの配色（枠線は付けず塗りのみで統一） */
.wb-badge-emptyContent { background: #fef3c7; color: #92400e; }
.wb-badge-notFound { background: #f3f4f6; color: #6b7280; }
.wb-badge-robotBlock { background: #e0e7ff; color: #3730a3; }
.wb-badge-redirectLoop { background: #ffedd5; color: #9a3412; }
.wb-badge-fetchFailure { background: #fee2e2; color: #991b1b; }
.wb-badge-parking { background: #ffedd5; color: #9a3412; }
.wb-badge-internal { background: #dbeafe; color: #1e40af; }
.wb-badge-external { background: #fee2e2; color: #b91c1c; }
/* 外部リンクアンカー見出しラベル（description下） */
.wb-badge-extlink { background: #ede9fe; color: #5b21b6; }

@media (max-width: 736px) {
	.wb-summary-item { min-width: 45%; }
	.wb-td-title { max-width: 200px; }
}