/**
 * トレカ・スリーブのサイズ早見表（[picolabo_toreka]）。共通部品は base.css。
 *
 * 左（スマホでは上）にタイトルの選択、右に結果（カードの大きさ・合うスリーブ・重ねた図・主な商品）。パネルの下に、身近なカードとの比べとタイトル別の一覧。
 * 図は viewBox を mm にした SVG で、線は vector-effect で太さをそろえる（実物大で大きくしても細くならない）。
 * スリーブの段は色で見分ける：インナー＝ライム、スリーブ＝ブルー、オーバー＝グレーの点線、カード＝薄い青の面。
 */

.tk {
	--tk-inner: var(--c-lime-ink);
	--tk-sleeve: var(--c-blue);
	--tk-over: var(--c-ink-3);
}

/* カタカナの多い題名を「スリー｜ブ」のように切らないよう、picolabo_phrase_html が入れた <wbr> の位置だけで折り返す。 */
.tk .pt-head__title {
	word-break: keep-all;
}

@media (min-width: 1000px) {
	.tk-pick {
		position: sticky;
		top: calc(var(--header-h) + 16px);
	}
}

/* タイトルを選ぶ
   -------------------------------------------------------------------------- */
.tk-pick {
	display: grid;
	gap: 20px;
}

.tk-pick__group {
	display: grid;
	gap: 10px;
}

.pt .tk-pick__label {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 10px;
	font-size: 1.4rem;
	font-weight: 700;
}

.tk-pick__label span {
	color: var(--c-ink-3);
	font-family: var(--font-en);
	font-size: 1.3rem;
	font-weight: 500;
	font-variant-numeric: tabular-nums;
}

.tk-games {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.pt .tk-game-btn {
	min-height: 40px;
	padding: 0 14px;
	font-size: 1.35rem;
}

/* 結果
   -------------------------------------------------------------------------- */
.tk-result {
	display: grid;
	gap: 28px;
}

.tk-game,
.tk-body {
	display: grid;
	gap: 28px;
}

.tk-game {
	gap: 10px;
}

.pt .tk-game__title {
	margin: 0;
	font-size: 1.6rem;
	font-weight: 700;
	line-height: 1.5;
}

.pt .tk-game__size {
	display: flex;
	align-items: baseline;
	gap: 6px;
	font-family: var(--font-en);
	font-weight: 600;
	line-height: 1.1;
	font-variant-numeric: tabular-nums;
}

.tk-game__size b {
	font-size: clamp(4.4rem, 7vw, 6.4rem);
	font-weight: 600;
	letter-spacing: 0.01em;
}

.tk-game__size span {
	color: var(--c-ink-3);
	font-size: clamp(2.8rem, 4vw, 3.6rem);
}

.tk-game__size small {
	margin-left: 4px;
	font-size: 2rem;
}

.pt .tk-game__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.tk-tag {
	padding: 3px 12px;
	border: 1px solid var(--c-line-2);
	border-radius: 999px;
	color: var(--c-ink-2);
	font-size: 1.2rem;
	font-weight: 700;
}

.tk-tag--standard {
	border-color: var(--c-blue-ink);
	background: var(--c-blue-ink);
	color: #fff;
}

.tk-tag--small {
	border-color: var(--c-lime-ink);
	background: var(--c-lime-ink);
	color: #fff;
}

.tk-game__note {
	padding: 12px 16px;
	border-radius: var(--radius-s);
	background: var(--c-tint);
	font-size: 1.45rem;
}

.tk-block {
	display: grid;
	gap: 12px;
	padding-top: 24px;
	border-top: 1px solid var(--c-line);
}

.tk-block__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 16px;
}

.pt .tk-block__title {
	margin: 0;
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.5;
}

/* 合うスリーブの大きさ */
.tk-fit {
	display: grid;
	gap: 0;
}

.tk-fit__row {
	--tk-c: var(--tk-sleeve);
	display: grid;
	grid-template-columns: 9.5em minmax(0, 1fr);
	align-items: baseline;
	gap: 2px 16px;
	padding-block: 12px;
	border-bottom: 1px dashed var(--c-line-2);
}

.tk-fit__row--inner {
	--tk-c: var(--tk-inner);
}

.tk-fit__row--over {
	--tk-c: var(--tk-over);
}

.pt .tk-fit__name {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 1.4rem;
	font-weight: 700;
}

.tk-fit__name::before {
	content: "";
	flex: none;
	width: 12px;
	height: 12px;
	border: 2px solid var(--tk-c);
	border-radius: 3px;
}

.tk-fit__row--over .tk-fit__name::before {
	border-style: dashed;
}

.pt .tk-fit__size {
	font-family: var(--font-en);
	font-size: 2rem;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.pt .tk-fit__gap {
	grid-column: 2;
	color: var(--c-ink-3);
	font-size: 1.2rem;
}

.pt .tk-fit__note {
	grid-column: 2;
	color: var(--c-ink-2);
	font-size: 1.35rem;
	line-height: 1.6;
}

@media (max-width: 599px) {
	.tk-fit__row {
		grid-template-columns: minmax(0, 1fr);
	}

	.pt :is(.tk-fit__gap, .tk-fit__note) {
		grid-column: 1;
	}
}

.pt .tk-combo {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 12px;
	font-size: 1.4rem;
}

.tk-combo span {
	padding: 1px 10px;
	border-radius: 999px;
	background: var(--c-ink);
	color: #fff;
	font-size: 1.2rem;
	font-weight: 700;
}

/* まず買うならこの3つ。商品ボックスは base.css の pt-pick。 */
.pt .tk-picks__lead {
	color: var(--c-ink-2);
	font-size: 1.35rem;
	line-height: 1.7;
}

/* 図（viewBox は mm） */
.tk-fig-wrap {
	overflow-x: auto;
}

.tk-fig {
	display: block;
	width: 100%;
	max-width: 520px;
	height: auto;
	margin-inline: auto;
}

.tk.is-real .tk-fig {
	max-width: none;
}

.tk-fig rect,
.tk-fig path {
	vector-effect: non-scaling-stroke;
}

.tk-fig__over {
	fill: none;
	stroke: var(--tk-over);
	stroke-width: 1.5;
	stroke-dasharray: 5 4;
}

.tk-fig__sleeve {
	fill: rgba(0, 174, 239, 0.06);
	stroke: var(--tk-sleeve);
	stroke-width: 2;
}

.tk-fig__inner {
	fill: none;
	stroke: var(--tk-inner);
	stroke-width: 1.5;
}

.tk-fig__card {
	fill: var(--c-tint-blue);
	stroke: var(--c-ink);
	stroke-width: 1.5;
}

.tk-fig__lead {
	fill: none;
	stroke-width: 1;
	stroke-dasharray: none;
}

.tk-fig__lead.tk-fig__card {
	stroke: var(--c-ink);
}

.tk-fig__dot {
	stroke: none;
}

.tk-fig__dot.tk-fig__over {
	fill: var(--tk-over);
}

.tk-fig__dot.tk-fig__sleeve {
	fill: var(--tk-sleeve);
}

.tk-fig__dot.tk-fig__inner {
	fill: var(--tk-inner);
}

.tk-fig__dot.tk-fig__card {
	fill: var(--c-ink);
}

.tk-fig__name {
	fill: var(--c-ink);
	font-family: var(--font-ja);
	font-size: 4.2px;
	font-weight: 700;
}

.tk-fig__mm,
.tk-cmp__mm {
	fill: var(--c-ink-2);
	font-family: var(--font-en);
	font-size: 3.8px;
	font-weight: 500;
}

/* 主なスリーブ */
.tk-items {
	display: grid;
	border-top: 1px solid var(--c-line);
}

.tk-item {
	display: grid;
	grid-template-columns: 5.5em minmax(0, 1fr) auto;
	align-items: center;
	gap: 12px;
	padding-block: 12px;
	border-bottom: 1px solid var(--c-line);
}

.tk-item__type {
	justify-self: start;
	padding: 2px 8px;
	border: 1.5px solid var(--tk-sleeve);
	border-radius: 4px;
	color: var(--c-blue-ink);
	font-size: 1.15rem;
	font-weight: 700;
	white-space: nowrap;
}

.tk-item__type--inner {
	border-color: var(--tk-inner);
	color: var(--c-lime-ink);
}

.tk-item__type--over {
	border-color: var(--tk-over);
	border-style: dashed;
	color: var(--c-ink-2);
}

.tk-item__body {
	display: grid;
	min-width: 0;
	line-height: 1.5;
}

.tk-item__maker {
	color: var(--c-ink-3);
	font-size: 1.2rem;
}

.tk-item__name {
	font-size: 1.45rem;
	font-weight: 700;
}

.tk-item__spec {
	color: var(--c-ink-2);
	font-family: var(--font-en);
	font-size: 1.3rem;
	font-variant-numeric: tabular-nums;
}

.pt .tk-item__link {
	min-height: 36px;
	padding: 0 14px;
	font-size: 1.25rem;
}

@media (max-width: 599px) {
	.tk-item {
		grid-template-columns: minmax(0, 1fr) auto;
	}

	.tk-item__type {
		grid-column: 1 / -1;
	}
}

/* 大きさあわせ */
.tk-calib {
	display: grid;
	gap: 12px;
	padding: 20px;
	border: 2px solid var(--c-ink);
	border-radius: var(--radius-s);
	background: var(--c-tint);
}

.tk-calib[hidden] {
	display: none;
}

.pt .tk-calib__title {
	font-size: 1.5rem;
	font-weight: 700;
}

.pt .tk-calib__text {
	color: var(--c-ink-2);
	font-size: 1.35rem;
	line-height: 1.7;
}

.tk-calib__stage {
	display: grid;
	place-items: center;
	overflow: hidden;
	padding-block: 8px;
}

.tk-calib__card {
	display: grid;
	place-items: center;
	width: 204px;
	max-width: 100%;
	aspect-ratio: 53.98 / 85.6;
	border: 2px dashed var(--c-ink);
	border-radius: 6% / 3.7%;
	background: #fff;
	color: var(--c-ink-3);
	font-size: 1.2rem;
	line-height: 1.5;
	text-align: center;
}

/* 身近なカードとの比べ・タイトル別の一覧
   -------------------------------------------------------------------------- */
.tk-more {
	display: grid;
	gap: clamp(40px, 5vw, 56px);
	margin-top: clamp(40px, 5vw, 56px);
}

/* 一覧の表（min-width: 560px）で列が広がり、スマホでページごと横にはみ出さないようにする。表は .tk-table-wrap の中で横にスクロールする。 */
.tk-more > * {
	min-width: 0;
}

.tk-more__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 16px;
	margin-bottom: 16px;
}

.pt .tk-more__title {
	margin: 0;
	font-size: clamp(1.8rem, 2.2vw, 2.2rem);
	font-weight: 700;
	line-height: 1.5;
}

.tk-more__note {
	color: var(--c-ink-3);
	font-size: 1.3rem;
}

.tk-compare__box {
	padding: clamp(16px, 3vw, 28px);
	border: 1px solid var(--c-line);
	border-radius: var(--radius);
	background: #fff;
	box-shadow: var(--shadow);
}

.tk-fig--compare {
	max-width: 760px;
}

.tk-cmp {
	stroke-width: 1.5;
}

.tk-cmp.is-standard {
	fill: var(--c-tint-blue);
	stroke: var(--c-blue-ink);
}

.tk-cmp.is-small {
	fill: var(--c-tint-lime);
	stroke: var(--c-lime-ink);
}

.tk-cmp.is-ref {
	fill: none;
	stroke: var(--c-ink-3);
	stroke-dasharray: 5 4;
}

.tk-cmp__name {
	fill: var(--c-ink);
	font-family: var(--font-ja);
	font-size: 4px;
	font-weight: 700;
}

.tk-table-wrap {
	overflow-x: auto;
	border: 1px solid var(--c-line);
	border-radius: var(--radius);
	background: #fff;
}

.tk-table {
	width: 100%;
	min-width: 560px;
	border-collapse: collapse;
	font-size: 1.4rem;
}

.tk-table :is(th, td) {
	padding: 10px 16px;
	border-bottom: 1px solid var(--c-line);
	text-align: left;
	vertical-align: top;
}

.tk-table thead th {
	background: var(--c-tint);
	color: var(--c-ink-2);
	font-size: 1.25rem;
	font-weight: 700;
	white-space: nowrap;
}

.tk-table tbody tr:last-child :is(th, td) {
	border-bottom: 0;
}

.tk-table td {
	font-family: var(--font-en);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.pt .tk-table__game {
	padding: 0;
	border: 0;
	background: none;
	color: var(--c-blue-ink);
	font: 700 1.4rem/1.6 var(--font-ja);
	text-align: left;
	text-decoration: underline;
	text-decoration-color: rgba(0, 118, 182, 0.35);
	text-underline-offset: 3px;
	cursor: pointer;
}

.pt .tk-table__game:hover {
	text-decoration-color: currentColor;
}

.tk-table__cat {
	display: block;
	color: var(--c-ink-3);
	font-family: var(--font-ja);
	font-size: 1.15rem;
}