/* ==========================================================================
   タイプ詳細ページ — type-detail.css v2
   ========================================================================== */

/* ---------- Loading ---------- */
.td-loading {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 60vh;
	gap: 16px;
	color: var(--color-text-secondary);
}
.td-loading__spinner {
	width: 48px; height: 48px;
	border: 4px solid var(--color-border);
	border-top-color: var(--color-primary);
	border-radius: 50%;
	animation: td-spin .8s linear infinite;
}
@keyframes td-spin { to { transform: rotate(360deg); } }

/* ==========================================================================
   Index page — ヒーロー
   ========================================================================== */
.td-index { padding: 0 0 80px; }
.td-index-hero {
	position: relative;
	padding: 72px 0 56px;
	text-align: center;
	overflow: hidden;
	background: linear-gradient(135deg, #2d2055 0%, #4a2d7a 40%, #6b3fa0 70%, #8b6cc1 100%);
	color: #fff;
	margin-bottom: 56px;
}
.td-index-hero__bg {
	position: absolute;
	inset: 0;
	background-image:
		radial-gradient(circle at 20% 30%, rgba(214,92,154,0.2) 0%, transparent 50%),
		radial-gradient(circle at 80% 70%, rgba(240,192,64,0.15) 0%, transparent 50%);
	pointer-events: none;
}
.td-index-hero__label {
	font-family: var(--font-heading);
	font-size: 0.85rem;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	opacity: 0.7;
	margin-bottom: 12px;
}
.td-index-hero__title {
	font-size: 2.4rem;
	font-weight: 900;
	margin-bottom: 16px;
	line-height: 1.2;
}
.td-index-hero__desc {
	font-size: 1rem;
	opacity: 0.85;
	line-height: 1.8;
	max-width: 600px;
	margin: 0 auto 32px;
}
.td-index-hero__stats {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 24px;
}
.td-index-hero__stat { text-align: center; }
.td-index-hero__stat-num {
	display: block;
	font-family: var(--font-heading);
	font-size: 2.2rem;
	font-weight: 900;
	background: linear-gradient(135deg, #f0c040, #f7e98e);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}
.td-index-hero__stat-label {
	font-size: 0.78rem;
	opacity: 0.7;
}
.td-index-hero__stat-divider {
	width: 1px;
	height: 40px;
	background: rgba(255,255,255,0.2);
}

/* ==========================================================================
   Index page — グループ & カード
   ========================================================================== */
.td-group {
	margin-bottom: 56px;
}
.td-group__header {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 20px 24px;
	border-radius: var(--radius-lg);
	margin-bottom: 24px;
	color: #fff;
}
.td-group__header--analysts { background: linear-gradient(135deg, #6b4fa0, #8b6cc1); }
.td-group__header--diplomats { background: linear-gradient(135deg, #2e9b6e, #43b88c); }
.td-group__header--sentinels { background: linear-gradient(135deg, #3d8ab5, #5ba3c9); }
.td-group__header--explorers { background: linear-gradient(135deg, #c89520, #e4ae3a); }
.td-group__icon { font-size: 2rem; flex-shrink: 0; }
.td-group__name {
	font-size: 1.3rem;
	font-weight: 800;
	margin: 0;
}
.td-group__name small {
	font-weight: 400;
	opacity: 0.75;
	margin-left: 8px;
	font-size: 0.85rem;
}
.td-group__desc {
	font-size: 0.82rem;
	opacity: 0.85;
	margin-top: 2px;
}
.td-group__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
}

/* --- タイプカード --- */
.td-type-card {
	display: flex;
	flex-direction: column;
	background: #fff;
	border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow: var(--shadow-card);
	text-decoration: none;
	color: inherit;
	transition: transform 0.3s, box-shadow 0.3s;
	border: 2px solid transparent;
}
.td-type-card:hover {
	transform: translateY(-6px);
	box-shadow: var(--shadow-hover);
}
.td-type-card--analysts:hover { border-color: var(--color-analysts); }
.td-type-card--diplomats:hover { border-color: var(--color-diplomats); }
.td-type-card--sentinels:hover { border-color: var(--color-sentinels); }
.td-type-card--explorers:hover { border-color: var(--color-explorers); }

.td-type-card__visual {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 4px;
	padding: 12px 12px 0;
	background: linear-gradient(180deg, #f9f5ff, #fff);
}
.td-type-card__thumb {
	text-align: center;
}
.td-type-card__thumb img {
	width: 100%;
	aspect-ratio: 1;
	object-fit: contain;
	border-radius: var(--radius-sm);
	filter: drop-shadow(0 2px 4px rgba(80,40,120,0.1));
	transition: transform 0.3s;
}
.td-type-card:hover .td-type-card__thumb img {
	transform: scale(1.05);
}
.td-type-card__svaf-label {
	display: block;
	font-size: 0.6rem;
	color: var(--color-text-muted);
	margin-top: 2px;
	font-weight: 600;
}
.td-type-card__info {
	text-align: center;
	padding: 16px 12px 8px;
}
.td-type-card__mbti {
	display: block;
	font-family: var(--font-heading);
	font-size: 1.6rem;
	font-weight: 900;
	color: var(--color-primary);
	letter-spacing: 0.03em;
}
.td-type-card__title {
	display: block;
	font-size: 0.95rem;
	font-weight: 700;
	margin-top: 2px;
}
.td-type-card__animal {
	display: block;
	font-size: 0.82rem;
	color: var(--color-text-secondary);
	margin-top: 2px;
}
.td-type-card__btn {
	display: block;
	text-align: center;
	padding: 12px;
	font-size: 0.88rem;
	font-weight: 700;
	color: var(--color-primary);
	background: linear-gradient(180deg, transparent, rgba(139,108,193,0.06));
	border-top: 1px solid var(--color-border);
	transition: all 0.2s;
}
.td-type-card:hover .td-type-card__btn {
	background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
	color: #fff;
}

/* --- 下部CTA --- */
.td-index-cta {
	text-align: center;
	padding: 56px 24px;
	background: linear-gradient(135deg, var(--color-bg-dark), #3d2a70);
	border-radius: var(--radius-lg);
	color: #fff;
	margin-top: 16px;
}
.td-index-cta h2 { font-size: 1.5rem; font-weight: 800; margin-bottom: 10px; }
.td-index-cta p { opacity: 0.85; margin-bottom: 24px; }
.td-index-cta__btn {
	display: inline-block;
	padding: 16px 48px;
	background: linear-gradient(135deg, var(--color-accent), #f7e98e);
	color: var(--color-bg-dark);
	font-size: 1.15rem;
	font-weight: 800;
	border-radius: var(--radius-full);
	text-decoration: none;
	transition: transform 0.2s, box-shadow 0.2s;
	box-shadow: 0 4px 16px rgba(240,192,64,0.4);
}
.td-index-cta__btn:hover {
	transform: translateY(-3px);
	box-shadow: 0 6px 24px rgba(240,192,64,0.5);
}

/* ==========================================================================
   Article Container
   ========================================================================== */
.td-article {
	max-width: 900px;
	margin: 0 auto;
	padding: 40px 20px 80px;
}

/* ==========================================================================
   Hero Header — 大きなイラスト付き
   ========================================================================== */
.td-hero {
	text-align: center;
	padding: 48px 0 40px;
	margin-bottom: 48px;
	position: relative;
	background: linear-gradient(180deg, rgba(243,236,251,0.5), transparent);
	border-radius: var(--radius-lg);
}
.td-hero::after {
	content: '🐾  🐾  🐾';
	display: block;
	text-align: center;
	font-size: 1.2rem;
	letter-spacing: 16px;
	opacity: 0.2;
	margin-top: 24px;
}
.td-hero__mbti {
	font-family: var(--font-heading);
	font-size: 3.2rem;
	font-weight: 900;
	background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	letter-spacing: .05em;
}
.td-hero__title {
	font-size: 1.5rem;
	font-weight: 700;
	margin-top: 4px;
	color: var(--color-bg-dark);
}
.td-hero__animal {
	font-size: 1.1rem;
	color: var(--color-text-secondary);
	margin-top: 4px;
}
.td-hero__animal::before { content: '🐾 '; font-size: 0.9em; }
.td-hero__images {
	display: flex;
	justify-content: center;
	gap: 16px;
	margin: 28px 0 24px;
	flex-wrap: wrap;
}
.td-hero__img-card {
	text-align: center;
	width: 140px;
	transition: transform 0.3s;
}
.td-hero__img-card:hover {
	transform: scale(1.08) rotate(-2deg);
}
.td-hero__img-card img {
	width: 120px; height: 120px;
	object-fit: contain;
	border-radius: var(--radius-lg);
	background: linear-gradient(135deg, #f9f5ff, #fff0f8);
	padding: 8px;
	box-shadow: 0 4px 16px rgba(80,40,120,0.12);
	border: 2px solid rgba(139,108,193,0.15);
}
.td-hero__img-label {
	display: block;
	font-size: .75rem;
	color: var(--color-text-secondary);
	margin-top: 6px;
	font-weight: 600;
}
.td-hero__overview {
	max-width: 700px;
	margin: 0 auto;
	font-size: 1rem;
	line-height: 1.9;
	color: var(--color-text);
	text-align: left;
	background: rgba(255,255,255,0.6);
	padding: 24px;
	border-radius: var(--radius-md);
	border-left: 4px solid var(--color-primary);
}

/* ==========================================================================
   Section 共通
   ========================================================================== */
.td-section {
	margin-bottom: 56px;
	position: relative;
}
.td-section__title {
	font-size: 1.5rem;
	font-weight: 800;
	color: var(--color-primary-dark);
	margin-bottom: 8px;
	padding-bottom: 10px;
	border-bottom: 3px solid transparent;
	border-image: linear-gradient(90deg, var(--color-primary), var(--color-secondary), transparent) 1;
	display: block;
}
.td-section__title::before {
	content: '🐾 ';
	font-size: 0.8em;
}
.td-section__subtitle {
	font-size: .85rem;
	color: var(--color-text-secondary);
	margin-bottom: 24px;
	font-style: italic;
}

/* ==========================================================================
   認知機能スタック
   ========================================================================== */
.td-cog-stack {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	margin-bottom: 20px;
}
.td-cog-card {
	background: #fff;
	border-radius: var(--radius-lg);
	padding: 24px;
	box-shadow: var(--shadow-card);
	border-left: 5px solid var(--color-primary);
	transition: transform 0.2s;
}
.td-cog-card:hover { transform: translateY(-2px); }
.td-cog-card--dom { border-left-color: #e74c3c; }
.td-cog-card--aux { border-left-color: #3498db; }
.td-cog-card--ter { border-left-color: #2ecc71; }
.td-cog-card--inf { border-left-color: #95a5a6; }
.td-cog-card__label {
	font-size: .7rem;
	text-transform: uppercase;
	letter-spacing: .1em;
	color: var(--color-text-muted);
	font-weight: 700;
}
.td-cog-card__func {
	font-family: var(--font-heading);
	font-size: 1.4rem;
	font-weight: 800;
	margin: 6px 0;
}
.td-cog-card__name {
	font-size: .85rem;
	font-weight: 600;
	color: var(--color-primary);
	margin-bottom: 8px;
}
.td-cog-card__desc {
	font-size: .88rem;
	line-height: 1.8;
	color: var(--color-text);
}
.td-cog-tension {
	background: linear-gradient(135deg, #fef5f5, #f5f0fa);
	border-radius: var(--radius-lg);
	padding: 24px;
	margin-top: 16px;
	font-size: .92rem;
	line-height: 1.8;
	border: 1px solid rgba(231,76,60,0.15);
}
.td-cog-tension strong { color: #e74c3c; }

/* ==========================================================================
   SVAFバリアント比較
   ========================================================================== */
.td-svaf-variants {
	display: grid;
	gap: 24px;
}
.td-variant-card {
	background: #fff;
	border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow: var(--shadow-card);
	transition: transform 0.2s;
}
.td-variant-card:hover { transform: translateY(-2px); }
.td-variant-card__header {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 20px 24px;
	color: #fff;
}
.td-variant-card--s .td-variant-card__header { background: linear-gradient(135deg, #27ae60, #2ecc71); }
.td-variant-card--v .td-variant-card__header { background: linear-gradient(135deg, #2980b9, #3498db); }
.td-variant-card--a .td-variant-card__header { background: linear-gradient(135deg, #d4a017, #f0c040); }
.td-variant-card--f .td-variant-card__header { background: linear-gradient(135deg, #8b6cc1, #a98cd8); }
.td-variant-card__img {
	width: 80px; height: 80px;
	border-radius: var(--radius-lg);
	object-fit: contain;
	background: rgba(255,255,255,.25);
	padding: 6px;
	flex-shrink: 0;
	box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.td-variant-card__meta h3 {
	font-size: 1.15rem; font-weight: 700; margin-bottom: 2px;
}
.td-variant-card__meta small {
	opacity: .85; font-size: .8rem;
}
.td-variant-card__body {
	padding: 24px;
}
.td-variant-card__section {
	margin-bottom: 16px;
}
.td-variant-card__section:last-child { margin-bottom: 0; }
.td-variant-card__section-label {
	font-size: .75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--color-text-muted);
	margin-bottom: 6px;
	display: flex;
	align-items: center;
	gap: 6px;
}
.td-variant-card__section-label::before {
	content: '';
	width: 4px;
	height: 14px;
	border-radius: 2px;
	background: var(--color-primary);
}
.td-variant-card__section p {
	font-size: .92rem;
	line-height: 1.85;
}
.td-variant-card__comparison {
	background: linear-gradient(135deg, #f9f5ff, #fff5fa);
	border-radius: var(--radius-md);
	padding: 16px 20px;
	margin-top: 12px;
	font-size: .9rem;
	line-height: 1.85;
	border-left: 3px solid var(--color-primary);
}

/* ==========================================================================
   比較表
   ========================================================================== */
.td-compare-table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow: var(--shadow-card);
	margin-bottom: 24px;
	font-size: .85rem;
}
.td-compare-table th,
.td-compare-table td {
	padding: 14px 12px;
	text-align: left;
	vertical-align: top;
	border-bottom: 1px solid var(--color-border);
}
.td-compare-table thead th {
	background: var(--color-bg-dark);
	color: #fff;
	font-weight: 700;
	font-size: .8rem;
	text-align: center;
}
.td-compare-table thead th:first-child {
	text-align: left;
	background: #1d1640;
}
.td-compare-table th.td-col-s { background: #27ae60; }
.td-compare-table th.td-col-v { background: #2980b9; }
.td-compare-table th.td-col-a { background: #d4a017; }
.td-compare-table th.td-col-f { background: #8b6cc1; }
.td-compare-table tbody tr:nth-child(even) { background: #faf8fd; }
.td-compare-table tbody tr:hover { background: #f3eefa; }
.td-compare-table tbody th {
	font-weight: 700;
	background: #f5f0fa;
	white-space: nowrap;
	font-size: .82rem;
}
.td-compare-table tbody td {
	line-height: 1.65;
}

/* ==========================================================================
   成長のヒント
   ========================================================================== */
.td-growth-cards {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}
.td-growth-card {
	background: #fff;
	border-radius: var(--radius-lg);
	padding: 24px;
	box-shadow: var(--shadow-soft);
	transition: transform 0.2s;
	position: relative;
	overflow: hidden;
}
.td-growth-card:hover { transform: translateY(-2px); }
.td-growth-card::after {
	content: '🌱';
	position: absolute;
	bottom: -4px;
	right: -4px;
	font-size: 2.5rem;
	opacity: 0.07;
}
.td-growth-card__label {
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .08em;
	margin-bottom: 10px;
	padding: 4px 12px;
	border-radius: var(--radius-full);
	display: inline-block;
	color: #fff;
}
.td-growth-card--s .td-growth-card__label { background: linear-gradient(135deg, #27ae60, #2ecc71); }
.td-growth-card--v .td-growth-card__label { background: linear-gradient(135deg, #2980b9, #3498db); }
.td-growth-card--a .td-growth-card__label { background: linear-gradient(135deg, #d4a017, #f0c040); }
.td-growth-card--f .td-growth-card__label { background: linear-gradient(135deg, #8b6cc1, #a98cd8); }
.td-growth-card p {
	font-size: .9rem;
	line-height: 1.85;
}

/* ==========================================================================
   相性（イラスト付きカード）
   ========================================================================== */
.td-compat-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
}
.td-compat-card {
	background: linear-gradient(135deg, rgba(255,255,255,0.9), rgba(249,245,255,0.9));
	border-radius: var(--radius-lg);
	padding: 20px;
	box-shadow: var(--shadow-card);
	border: 1px solid rgba(139,108,193,0.1);
}
.td-compat-card h4 {
	font-size: .9rem;
	font-weight: 700;
	margin-bottom: 4px;
}
.td-compat-card__header {
	padding: 14px 18px;
	background: rgba(255,255,255,0.6);
	border-radius: var(--radius-md);
	margin-bottom: 16px;
}
.td-compat-card__header h4 {
	font-size: 1rem;
	font-weight: 700;
	color: var(--color-bg-dark);
}
.td-compat-category {
	margin-bottom: 18px;
}
.td-compat-category:last-child { margin-bottom: 0; }
.td-compat-category__label {
	font-size: 0.85rem;
	font-weight: 700;
	color: var(--color-text-secondary);
	margin-bottom: 10px;
	padding-left: 4px;
}
.td-compat-category__list {
	display: flex;
	gap: 10px;
}
.td-compat-match {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	background: rgba(255,255,255,0.8);
	border-radius: var(--radius-md);
	padding: 14px 8px;
	position: relative;
	transition: all 0.25s;
	border: 1px solid rgba(139,108,193,0.08);
}
.td-compat-match:hover {
	transform: translateY(-3px);
	box-shadow: var(--shadow-hover);
	border-color: var(--color-primary);
}
.td-compat-match__rank {
	position: absolute;
	top: 6px;
	left: 6px;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--color-accent);
	color: var(--color-bg-dark);
	font-size: 0.65rem;
	font-weight: 800;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 2px 4px rgba(240,192,64,0.3);
}
.td-compat-match__img {
	width: 64px;
	height: 64px;
	object-fit: contain;
	border-radius: var(--radius-md);
	filter: drop-shadow(0 3px 6px rgba(80,40,120,0.12));
}
.td-compat-match__info { text-align: center; }
.td-compat-match__name {
	display: block;
	font-size: 0.78rem;
	font-weight: 600;
	color: var(--color-bg-dark);
}
.td-compat-match__type {
	display: block;
	font-size: 0.65rem;
	color: var(--color-text-muted);
}

/* ==========================================================================
   関係性マップ
   ========================================================================== */
.td-rel-map {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
}
.td-rel-category {
	background: rgba(255,255,255,0.85);
	border-radius: var(--radius-lg);
	padding: 22px;
	box-shadow: var(--shadow-card);
	transition: transform 0.2s;
}
.td-rel-category:hover { transform: translateY(-2px); }
.td-rel-category__header {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	border-left: 4px solid #ccc;
	padding-left: 14px;
	margin-bottom: 16px;
}
.td-rel-category__icon {
	font-size: 1.5rem;
	flex-shrink: 0;
	line-height: 1;
	margin-top: 2px;
}
.td-rel-category__title {
	font-size: 1rem;
	font-weight: 700;
	color: var(--color-bg-dark);
	margin-bottom: 2px;
}
.td-rel-category__desc {
	font-size: 0.78rem;
	color: var(--color-text-secondary);
	line-height: 1.5;
}
.td-rel-category__types {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}
.td-rel-type-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	background: var(--color-bg);
	border-radius: var(--radius-md);
	padding: 12px 14px;
	text-decoration: none;
	transition: all 0.25s;
	min-width: 90px;
	border: 2px solid transparent;
}
.td-rel-type-card:hover {
	transform: translateY(-3px) scale(1.03);
	box-shadow: var(--shadow-hover);
	border-color: var(--color-primary);
}
.td-rel-type-card__img {
	width: 56px;
	height: 56px;
	object-fit: contain;
	filter: drop-shadow(0 2px 6px rgba(80,40,120,0.15));
}
.td-rel-type-card__mbti {
	font-family: var(--font-heading);
	font-size: 0.82rem;
	font-weight: 700;
	color: var(--color-primary);
}
.td-rel-type-card__animal {
	font-size: 0.7rem;
	color: var(--color-text-secondary);
}

/* ==========================================================================
   CTA
   ========================================================================== */
.td-cta {
	text-align: center;
	padding: 56px 24px;
	background: linear-gradient(135deg, var(--color-bg-dark), #3d2a70);
	border-radius: var(--radius-lg);
	color: #fff;
	position: relative;
	overflow: hidden;
}
.td-cta::before {
	content: '🐾  🐾  🐾  🐾  🐾';
	position: absolute;
	top: 12px;
	left: 50%;
	transform: translateX(-50%);
	font-size: 1.5rem;
	letter-spacing: 24px;
	opacity: 0.08;
}
.td-cta h2 { font-size: 1.5rem; font-weight: 800; margin-bottom: 10px; }
.td-cta p { opacity: .85; margin-bottom: 24px; font-size: 1rem; }
.td-cta__btn {
	display: inline-block;
	padding: 16px 48px;
	background: linear-gradient(135deg, var(--color-accent), #f7e98e);
	color: var(--color-bg-dark);
	font-size: 1.15rem;
	font-weight: 800;
	border-radius: var(--radius-full);
	text-decoration: none;
	transition: transform .2s, box-shadow .2s;
	box-shadow: 0 4px 16px rgba(240,192,64,0.4);
}
.td-cta__btn:hover {
	transform: translateY(-3px);
	box-shadow: 0 6px 24px rgba(240,192,64,.5);
}
.td-cta__btn::before { content: '🐾 '; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (min-width: 1024px) {
	.td-group__grid { grid-template-columns: repeat(4, 1fr); }
	.td-index-hero__title { font-size: 3rem; }
}

@media (max-width: 768px) {
	.td-group__grid { grid-template-columns: 1fr; }
	.td-type-card__visual { grid-template-columns: repeat(4, 1fr); }
	.td-index-hero { padding: 48px 0 40px; }
	.td-index-hero__title { font-size: 1.8rem; }
	.td-index-hero__desc { font-size: 0.9rem; }
	.td-index-hero__stats { gap: 16px; }
	.td-index-hero__stat-num { font-size: 1.6rem; }
	.td-group__header { flex-direction: column; text-align: center; gap: 8px; padding: 16px; }
	.td-hero__mbti { font-size: 2.4rem; }
	.td-hero__images { gap: 10px; }
	.td-hero__img-card { width: 80px; }
	.td-hero__img-card img { width: 70px; height: 70px; }
	.td-cog-stack { grid-template-columns: 1fr; }
	.td-compare-table { font-size: .75rem; }
	.td-compare-table th, .td-compare-table td { padding: 10px 8px; }
	.td-growth-cards { grid-template-columns: 1fr; }
	.td-compat-grid { grid-template-columns: 1fr; }
	.td-rel-map { grid-template-columns: 1fr; }
	.td-variant-card__header { flex-direction: column; text-align: center; gap: 10px; }
}

@media (max-width: 480px) {
	.td-type-card__svaf-label { font-size: 0.55rem; }
	.td-article { padding: 24px 14px 60px; }
	.td-hero__images { gap: 6px; }
	.td-hero__img-card { width: 72px; }
	.td-hero__img-card img { width: 64px; height: 64px; }
	.td-compat-category__list { flex-direction: column; }
	.td-compat-match { flex-direction: row; padding: 10px 14px; }
	.td-compat-match__rank { position: static; }
	.td-compat-match__img { width: 48px; height: 48px; }
	.td-compat-match__info { text-align: left; }
}

/* ---------- Print ---------- */
@media print {
	.ms-header, .ms-footer, .td-cta { display: none; }
	.td-article { max-width: 100%; padding: 0; }
	.td-variant-card, .td-cog-card, .td-growth-card, .td-compat-card {
		box-shadow: none;
		border: 1px solid #ddd;
		break-inside: avoid;
	}
	.td-compare-table { box-shadow: none; border: 1px solid #ddd; }
}