/* ==========================================================================
   TEYLL — 表（Figma c-teyll-table 1337:1448・c-teyll-table__row 1337:1374・-sp 1377:1711・1377:1646）
   白い面に、行ごとに下の線 1px（最後の行は線なし）。左端に色の線は付けない。SP は横にスクロールさせず、縦に積む
   - --info：「見出し｜中身」（会社情報・お問い合わせの確認の画面）。PC：角 32・左右 48・見出し（th）幅 200・TEYLL/PC/Label、中身（td）TEYLL/PC/Body。
     見出しと中身は1行めのベースラインでそろえる。SP：角 24・左右 20・見出し（SP/Label・薄い色）の下に中身（SP/Body）
     <div class="c-teyll-table c-teyll-table--info"><table class="c-teyll-table__table"><tbody>
       <tr class="c-teyll-table__row"><th class="c-teyll-table__head" scope="row">運営会社</th><td class="c-teyll-table__data">TRUSS株式会社</td></tr>
     </tbody></table></div>
     （dl にするときは <dl class="c-teyll-table__table"><div class="c-teyll-table__row"><dt class="c-teyll-table__head"><dd class="c-teyll-table__data"> でも同じ見た目）
   - --compare：料金の比較（PC：角 32・左右 40。1列め 280＝行の見出し th scope="row"、プラン3列は th scope="col"＝プラン名（H3）・おすすめの札・金額（EN-Step）。
     おすすめ（スタンダード）の列は is-recommended＝淡い紫を上から下まで（いちばん上のセルは上の角 24）。
     SP：見出しの行（thead）は出さず、行ごとに項目（SP/H4）の下にプラン3つを縦に（td の data-label にプラン名。おすすめは淡い紫の帯・角 8）
     <div class="c-teyll-table c-teyll-table--compare"><table class="c-teyll-table__table">
       <thead><tr class="c-teyll-table__row"><td class="c-teyll-table__item">プラン</td>
         <th class="c-teyll-table__cell" scope="col"><span class="c-teyll-table__plan"><span class="c-teyll-table__plan-name">ライト</span></span><span class="c-teyll-table__price"><span class="c-teyll-table__price-num">9,800</span><span class="c-teyll-table__price-unit">円／月（税別）</span></span></th>
         <th class="c-teyll-table__cell is-recommended" scope="col">…<span class="c-teyll-table__badge">おすすめ</span>…</th> …</tr></thead>
       <tbody><tr class="c-teyll-table__row"><th class="c-teyll-table__item" scope="row">ページ数</th>
         <td class="c-teyll-table__cell" data-label="ライト">1ページ</td><td class="c-teyll-table__cell is-recommended" data-label="スタンダード">最大5ページ</td>…</tr></tbody>
     </table></div>
   ========================================================================== */
.c-teyll-table {
	border-radius: var(--radius-teyll-card);
	background: var(--teyll-bg-canvas);
}

.c-teyll-table--info {
	padding: 8px 48px;
}

.c-teyll-table--compare {
	padding: 24px 40px;
}

.c-teyll-table__table {
	width: 100%;
	border-collapse: collapse;
}

.c-teyll-table__row {
	border-bottom: 1px solid var(--teyll-border-default);
}

.c-teyll-table__row:last-child,
tbody .c-teyll-table__row:last-child {
	border-bottom: 0;
}

/* ---------- --info ---------- */
.c-teyll-table--info .c-teyll-table__table,
.c-teyll-table--info tbody {
	display: block;
}

.c-teyll-table--info .c-teyll-table__row {
	display: flex; /* dl の div でも table の tr でも同じ並び（見出しと中身を1行めのベースラインでそろえる） */
	align-items: baseline;
	gap: 32px;
	padding: 24px 0;
}

.c-teyll-table--info .c-teyll-table__head {
	flex: none;
	width: 200px;
	padding: 0;
	font: var(--text-teyll-label);
	letter-spacing: var(--ls-teyll-label);
	color: var(--teyll-text-primary);
	text-align: left;
}

.c-teyll-table--info .c-teyll-table__data {
	flex: 1;
	min-width: 0;
	margin: 0;
	padding: 0;
	font: var(--text-teyll-body);
	letter-spacing: var(--ls-teyll);
	color: var(--teyll-text-primary);
}

/* ---------- --compare ---------- */
.c-teyll-table--compare .c-teyll-table__table {
	table-layout: fixed;
}

.c-teyll-table__item {
	width: 25%;
	padding: 24px 16px;
	font: var(--text-teyll-label);
	letter-spacing: var(--ls-teyll-label);
	color: var(--teyll-text-primary);
	text-align: left;
	vertical-align: middle;
}

thead .c-teyll-table__item {
	color: var(--teyll-text-secondary);
}

.c-teyll-table__cell {
	padding: 24px 16px;
	font: var(--text-teyll-body);
	letter-spacing: var(--ls-teyll);
	color: var(--teyll-text-primary);
	text-align: center;
	vertical-align: middle;
}

thead .c-teyll-table__cell {
	padding: 32px 16px 24px;
	font-weight: 400;
}

.c-teyll-table__cell.is-recommended {
	background: var(--teyll-bg-purple-pale);
}

thead .c-teyll-table__cell.is-recommended {
	border-radius: 24px 24px 0 0;
}

.c-teyll-table__plan {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px;
}

.c-teyll-table__plan-name {
	font: var(--text-teyll-h3);
	letter-spacing: var(--ls-teyll);
}

.c-teyll-table__badge {
	display: inline-flex;
	padding: 2px 8px;
	border-radius: var(--radius-full);
	background: var(--teyll-gradient-action);
	font: var(--text-teyll-label);
	letter-spacing: var(--ls-teyll-label);
	color: var(--teyll-text-on-dark);
}

.c-teyll-table__price {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: center;
	gap: 4px;
	margin-top: 4px;
}

.c-teyll-table__price-num {
	font: var(--text-teyll-en-step);
}

.c-teyll-table__price-unit {
	font: var(--text-teyll-label);
	letter-spacing: var(--ls-teyll-label);
	color: var(--teyll-text-secondary);
}

/* ---------- SP：縦に積む ---------- */
@media (max-width: 767px) {
	.c-teyll-table {
		border-radius: 24px;
	}

	.c-teyll-table--info {
		padding: 4px 20px;
	}

	.c-teyll-table--compare {
		padding: 4px 16px;
	}

	.c-teyll-table--info .c-teyll-table__row {
		flex-direction: column;
		align-items: stretch;
		gap: 4px;
		padding: 16px 0;
	}

	.c-teyll-table--info .c-teyll-table__head {
		width: auto;
		color: var(--teyll-text-secondary);
	}

	.c-teyll-table--compare .c-teyll-table__table,
	.c-teyll-table--compare tbody,
	.c-teyll-table--compare .c-teyll-table__row,
	.c-teyll-table--compare .c-teyll-table__item,
	.c-teyll-table--compare .c-teyll-table__cell {
		display: block;
		width: auto;
	}

	.c-teyll-table--compare thead {
		display: none; /* プラン名は各セルの data-label で出す */
	}

	.c-teyll-table--compare .c-teyll-table__row {
		display: flex;
		flex-direction: column;
		gap: 2px;
		padding: 16px 0;
	}

	.c-teyll-table--compare .c-teyll-table__item {
		margin-bottom: 6px;
		padding: 0;
		font: var(--text-teyll-h4);
		letter-spacing: var(--ls-teyll);
	}

	.c-teyll-table--compare .c-teyll-table__cell {
		display: flex;
		align-items: baseline;
		justify-content: space-between;
		gap: 12px;
		padding: 8px 12px;
		border-radius: 8px;
		font: var(--text-teyll-label);
		letter-spacing: var(--ls-teyll-label);
		text-align: right;
	}

	.c-teyll-table--compare .c-teyll-table__cell::before {
		content: attr(data-label);
		flex: none;
		font: var(--text-teyll-body-s);
		letter-spacing: var(--ls-teyll);
		color: var(--teyll-text-secondary);
		text-align: left;
	}
}