/**
 * WK Viewer 標準スキン（architecture.md §4.3）。
 * カスタムプロパティで上書き可能。コントラスト比 4.5:1 以上を確保する。
 */
.wkviewer {
	--wkviewer-accent: #2271b1;
	--wkviewer-border: #c3c4c7;
	--wkviewer-radius: 4px;
	--wkviewer-text: #1d2327;
	--wkviewer-muted: #50575e;
	--wkviewer-bg: #ffffff;
	--wkviewer-row-alt-bg: #f6f7f7;
	--wkviewer-spacing: 1em;

	box-sizing: border-box;
	color: var( --wkviewer-text );
	background: var( --wkviewer-bg );
}

.wkviewer *,
.wkviewer *::before,
.wkviewer *::after {
	box-sizing: inherit;
}

.wkviewer .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect( 0, 0, 0, 0 );
	white-space: nowrap;
	border: 0;
}

.wkviewer-empty,
.wkviewer-not-found {
	padding: 0.9em 1em;
	color: var( --wkviewer-muted );
	background: var( --wkviewer-row-alt-bg );
	border: 1px solid var( --wkviewer-border );
	border-radius: var( --wkviewer-radius );
}

/* 検索/絞込コントロール（Pro, v0.2.6）。テーマの input/select/button 既定スタイル漏れ対策として !important は使わず、
 * プラグイン自身のクラス配下のみに限定したセレクタで指定する（テーマの他要素には影響しない）。 */
.wkviewer-controls {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0 0 20px;
}

.wkviewer-controls input[type="search"],
.wkviewer-controls input[type="text"] {
	padding: 8px 12px;
	border: 1px solid var( --wkviewer-border, #dcdcde );
	border-radius: 6px;
	min-width: 240px;
	font-size: 14px;
}

.wkviewer-controls select {
	padding: 8px 12px;
	border: 1px solid var( --wkviewer-border, #dcdcde );
	border-radius: 6px;
	font-size: 14px;
}

.wkviewer-controls button {
	padding: 8px 16px;
	border: 1px solid var( --wkviewer-accent, #2271b1 );
	border-radius: 6px;
	background: var( --wkviewer-accent, #2271b1 );
	color: #fff;
	cursor: pointer;
	font-size: 14px;
}

.wkviewer-table-wrap {
	width: 100%;
	overflow-x: auto;
}

.wkviewer-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 1em;
}

.wkviewer-table th,
.wkviewer-table td {
	padding: 0.6em 0.8em;
	text-align: left;
	vertical-align: top;
	border-bottom: 1px solid var( --wkviewer-border );
}

.wkviewer-table thead th {
	font-weight: 600;
	color: var( --wkviewer-text );
	background: var( --wkviewer-row-alt-bg );
	border-bottom: 2px solid var( --wkviewer-border );
	white-space: nowrap;
}

.wkviewer-table tbody tr:nth-child( even ) {
	background: var( --wkviewer-row-alt-bg );
}

.wkviewer-table a,
.wkviewer-detail a {
	color: var( --wkviewer-accent );
}

.wkviewer-table a:focus-visible,
.wkviewer-detail a:focus-visible,
.wkviewer-pagination a:focus-visible {
	outline: 3px solid var( --wkviewer-accent );
	outline-offset: 1px;
}

.wkviewer-col-detail {
	white-space: nowrap;
}

.wkviewer-detail-link {
	white-space: nowrap;
}

/* ページネーション */
.wkviewer-pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1em;
	margin-top: var( --wkviewer-spacing );
}

.wkviewer-pagination a {
	padding: 0.4em 0.9em;
	border: 1px solid var( --wkviewer-border );
	border-radius: var( --wkviewer-radius );
	text-decoration: none;
}

.wkviewer-page-info {
	color: var( --wkviewer-muted );
}

/* 詳細表示 */
.wkviewer-detail {
	display: grid;
	grid-template-columns: minmax( 8em, max-content ) 1fr;
	gap: 0.6em 1em;
	margin: 0 0 var( --wkviewer-spacing );
}

.wkviewer-detail dt {
	font-weight: 600;
	color: var( --wkviewer-text );
}

.wkviewer-detail dd {
	margin: 0;
	word-break: break-word;
}

.wkviewer-back {
	margin-top: var( --wkviewer-spacing );
}

/* カード型ビュー（architecture.md §6.5.3） */
.wkviewer-card-grid {
	display: grid;
	grid-template-columns: repeat( var( --wkviewer-card-columns, 3 ), 1fr );
	gap: var( --wkviewer-spacing );
	margin: 0;
	padding: 0;
	list-style: none;
}

.wkviewer-card {
	border: 1px solid var( --wkviewer-border, #dcdcde );
	border-radius: 8px;
	overflow: hidden;
	background: #fff;
}

/* ホバー演出はカード本体（li）に当てる。子の a に当てると .wkviewer-card の
   overflow: hidden で影がクリップされて見えない。 */
.wkviewer-card {
	transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.wkviewer-card:hover {
	box-shadow: 0 4px 12px rgba( 0, 0, 0, 0.08 );
	transform: translateY( -2px );
}

@media ( prefers-reduced-motion: reduce ) {
	.wkviewer-card {
		transition: none;
	}

	.wkviewer-card:hover {
		transform: none;
	}
}

.wkviewer-card-link {
	display: flex;
	flex-direction: column;
	height: 100%;
	color: inherit;
	text-decoration: none;
}

.wkviewer-card-link:focus-visible {
	outline: 3px solid var( --wkviewer-accent );
	outline-offset: -3px;
}

.wkviewer-card-image {
	position: relative;
	aspect-ratio: var( --wkviewer-card-ratio, 16 / 9 );
	background: var( --wkviewer-row-alt-bg );
	overflow: hidden;
}

.wkviewer-card-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.wkviewer-card-image--empty {
	background: var( --wkviewer-row-alt-bg );
}

.wkviewer-card-body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 10px;
	padding: 16px;
}

/* テーマの h3/p 見出し・段落マージンがカード内へ漏れるのを止める（プラグイン自身のクラス配下のみ）. */
.wkviewer-card-body > * {
	margin: 0 !important;
}

.wkviewer-card-subtitle,
.wkviewer-card-date {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0 !important;
	color: var( --wkviewer-muted, #50575e );
	font-size: 14px;
	letter-spacing: 0 !important;
}

/*
 * カードのサブタイトル先頭アイコン（v0.2.5）。外部リクエスト無し・CSS インライン SVG data URI を
 * mask-image に指定し、background-color: currentColor で描画する（.wkviewer-card-date の
 * color を継承するため、アイコン用に別途色指定は不要）。
 */
.wkviewer-card-icon {
	display: inline-block;
	width: 1em;
	height: 1em;
	flex: 0 0 auto;
	background-color: currentColor;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.wkviewer-card-icon--calendar {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Crect x='1' y='2.5' width='14' height='12' rx='1.5' stroke='%23000' stroke-width='1.3'/%3E%3Cline x1='1' y1='6' x2='15' y2='6' stroke='%23000' stroke-width='1.3'/%3E%3Cline x1='4.5' y1='1' x2='4.5' y2='3.5' stroke='%23000' stroke-width='1.3' stroke-linecap='round'/%3E%3Cline x1='11.5' y1='1' x2='11.5' y2='3.5' stroke='%23000' stroke-width='1.3' stroke-linecap='round'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Crect x='1' y='2.5' width='14' height='12' rx='1.5' stroke='%23000' stroke-width='1.3'/%3E%3Cline x1='1' y1='6' x2='15' y2='6' stroke='%23000' stroke-width='1.3'/%3E%3Cline x1='4.5' y1='1' x2='4.5' y2='3.5' stroke='%23000' stroke-width='1.3' stroke-linecap='round'/%3E%3Cline x1='11.5' y1='1' x2='11.5' y2='3.5' stroke='%23000' stroke-width='1.3' stroke-linecap='round'/%3E%3C/svg%3E");
}

.wkviewer-card-icon--clock {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Ccircle cx='8' cy='8' r='6.5' stroke='%23000' stroke-width='1.3'/%3E%3Cline x1='8' y1='8' x2='8' y2='4.2' stroke='%23000' stroke-width='1.3' stroke-linecap='round'/%3E%3Cline x1='8' y1='8' x2='10.8' y2='9.6' stroke='%23000' stroke-width='1.3' stroke-linecap='round'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Ccircle cx='8' cy='8' r='6.5' stroke='%23000' stroke-width='1.3'/%3E%3Cline x1='8' y1='8' x2='8' y2='4.2' stroke='%23000' stroke-width='1.3' stroke-linecap='round'/%3E%3Cline x1='8' y1='8' x2='10.8' y2='9.6' stroke='%23000' stroke-width='1.3' stroke-linecap='round'/%3E%3C/svg%3E");
}

.wkviewer-card-icon--pin {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M8 15c3-3.6 5-6.4 5-9A5 5 0 0 0 3 6c0 2.6 2 5.4 5 9Z' stroke='%23000' stroke-width='1.3' stroke-linejoin='round'/%3E%3Ccircle cx='8' cy='6' r='1.8' stroke='%23000' stroke-width='1.2'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M8 15c3-3.6 5-6.4 5-9A5 5 0 0 0 3 6c0 2.6 2 5.4 5 9Z' stroke='%23000' stroke-width='1.3' stroke-linejoin='round'/%3E%3Ccircle cx='8' cy='6' r='1.8' stroke='%23000' stroke-width='1.2'/%3E%3C/svg%3E");
}

.wkviewer-card-icon--tag {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M2 2h6l6 6-6.5 6.5L2 8V2Z' stroke='%23000' stroke-width='1.3' stroke-linejoin='round'/%3E%3Ccircle cx='5.2' cy='5.2' r='1' fill='%23000'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M2 2h6l6 6-6.5 6.5L2 8V2Z' stroke='%23000' stroke-width='1.3' stroke-linejoin='round'/%3E%3Ccircle cx='5.2' cy='5.2' r='1' fill='%23000'/%3E%3C/svg%3E");
}

.wkviewer-card-icon--user {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Ccircle cx='8' cy='5' r='3' stroke='%23000' stroke-width='1.3'/%3E%3Cpath d='M2 14c0-3 2.7-5 6-5s6 2 6 5' stroke='%23000' stroke-width='1.3' stroke-linecap='round'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Ccircle cx='8' cy='5' r='3' stroke='%23000' stroke-width='1.3'/%3E%3Cpath d='M2 14c0-3 2.7-5 6-5s6 2 6 5' stroke='%23000' stroke-width='1.3' stroke-linecap='round'/%3E%3C/svg%3E");
}

.wkviewer-card-title {
	margin: 0 !important;
	padding: 0 !important;
	border: none !important;
	background: none !important;
	color: var( --wkviewer-text );
	font-weight: 700;
	font-size: 17px;
	line-height: 1.5;
	letter-spacing: 0 !important;
}

/* テーマの見出しに付く装飾バー（::before/::after）を打ち消す（プラグイン自身のクラスのみ対象）. */
.wkviewer-card-title::before,
.wkviewer-card-title::after {
	content: none !important;
	display: none !important;
}

.wkviewer-card-excerpt {
	margin: 0 !important;
	color: var( --wkviewer-muted, #50575e );
	font-size: 14px;
	line-height: 1.7;
	text-align: left !important;
}

@media screen and ( max-width: 768px ) {
	.wkviewer-card-grid {
		grid-template-columns: 1fr;
	}
}

/* SP: 768px 以下でテーブルをカード化する */
@media screen and ( max-width: 768px ) {
	.wkviewer-table thead {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		clip: rect( 0, 0, 0, 0 );
		white-space: nowrap;
		border: 0;
	}

	.wkviewer-table,
	.wkviewer-table tbody,
	.wkviewer-table tr,
	.wkviewer-table td {
		display: block;
		width: 100%;
	}

	.wkviewer-table tr {
		margin-bottom: 1em;
		border: 1px solid var( --wkviewer-border );
		border-radius: var( --wkviewer-radius );
		overflow: hidden;
	}

	.wkviewer-table td {
		display: flex;
		gap: 0.5em;
		border-bottom: 1px solid var( --wkviewer-border );
	}

	.wkviewer-table td:last-child {
		border-bottom: 0;
	}

	.wkviewer-table td::before {
		content: attr( data-label );
		flex: 0 0 auto;
		width: 40%;
		font-weight: 600;
		color: var( --wkviewer-text );
	}

	.wkviewer-detail {
		grid-template-columns: 1fr;
	}
}