/* =========================================================
   legal-pages.css
   アプリ規約系（利用規約 / 外部送信 / データ取り扱い）
   Base: 375px / Fluid range: 320px – 640px
   Visual reference: public/app/css/privacy-policy.css
   ========================================================= */

@layer reset {
	*,
	*::before,
	*::after {
		box-sizing: border-box;
	}

	* {
		margin: 0;
	}

	html {
		-webkit-text-size-adjust: 100%;
		text-size-adjust: 100%;
		-webkit-tap-highlight-color: transparent;
	}

	body {
		line-height: 1.5;
	}

	img,
	picture,
	video,
	canvas,
	svg {
		display: block;
		max-width: 100%;
	}

	input,
	button,
	textarea,
	select {
		font: inherit;
	}

	p,
	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
		overflow-wrap: break-word;
	}

	a {
		color: inherit;
		text-decoration: none;
	}

	ul,
	ol {
		list-style: none;
		padding: 0;
	}

	button {
		background: none;
		border: 0;
		padding: 0;
		cursor: pointer;
	}

	table {
		border-collapse: collapse;
	}
}

@layer tokens {
	:root {
		--pp-root: clamp(
			calc(16px * 320 / 375),
			calc(100vw * 16 / 375),
			calc(16px * 640 / 375)
		);

		--pp-font: "M PLUS 1", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;

		--pp-color-bg: #ffffff;
		--pp-color-surface: #ffffff;
		--pp-color-text: #000000;
		--pp-color-muted: #000000;
		--pp-color-border: #a6acb1;
		--pp-color-link: #1a6bb5;
		--pp-color-th: #f1f1f1;

		--pp-radius-card: 0.625rem;
		--pp-space-page-x: 0.625rem;
		--pp-space-page-y: 1.25rem;
		--pp-space-section: 1.25rem;
		--pp-max: 37.5rem;
	}
}

@layer base {
	html {
		font-size: var(--pp-root);
		scroll-padding-top: 0.5rem;
	}

	body.app {
		font-family: var(--pp-font);
		font-weight: 400;
		color: var(--pp-color-text);
		background: var(--pp-color-bg);
		min-height: 100dvh;
	}

	h1,
	h2,
	h3,
	p,
	li,
	span,
	th,
	td {
		transform: rotate(0.03deg);
	}

	a:not([class]) {
		color: var(--pp-color-link);
		text-decoration: underline;
		text-underline-offset: 0.15em;
		word-break: break-all;
	}
}

@layer components {
	.pp {
		width: min(100%, var(--pp-max));
		margin-inline: auto;
		min-height: 100dvh;
		padding: var(--pp-space-page-y) var(--pp-space-page-x);
	}

	.pp__inner {
		display: flex;
		flex-direction: column;
		gap: 1rem;
	}

	.pp__title {
		font-size: 1rem;
		font-weight: 700;
		line-height: 1.5;
		text-align: center;
		color: var(--pp-color-text);
	}

	.pp__nav {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 0.5rem 1rem;
		font-size: 0.8125rem;
		line-height: 1.5;
	}

	.pp__card {
		background: var(--pp-color-surface);
		border: 1px solid var(--pp-color-border);
		border-radius: var(--pp-radius-card);
		padding: 0.75rem 0.625rem;
		display: flex;
		flex-direction: column;
		gap: var(--pp-space-section);
		overflow-wrap: anywhere;
	}

	.pp-section {
		display: flex;
		flex-direction: column;
		gap: 0.625rem;
		scroll-margin-top: 0.5rem;
	}

	.pp-section__heading {
		font-size: 0.875rem;
		font-weight: 700;
		line-height: 1.5;
		color: var(--pp-color-text);
	}

	.pp-section__body {
		display: flex;
		flex-direction: column;
		gap: 0.625rem;
		font-size: 0.8125rem;
		font-weight: 400;
		line-height: 1.5;
		color: var(--pp-color-text);
	}

	.pp-list {
		display: flex;
		flex-direction: column;
		gap: 0.625rem;
	}

	.pp-list--nested {
		gap: 0.375rem;
		padding-inline-start: 0.5rem;
	}

	.pp-list--tight {
		gap: 0.25rem;
	}

	.pp-list__item {
		display: grid;
		grid-template-columns: 2.25em 1fr;
		column-gap: 0.25em;
		align-items: start;
	}

	.pp-list__item--plain {
		display: block;
	}

	.pp-list__marker {
		font-variant-numeric: tabular-nums;
		line-height: 1.5;
	}

	.pp-list__text {
		line-height: 1.5;
		min-width: 0;
	}

	.pp__date {
		font-size: 0.8125rem;
		line-height: 1.5;
		text-align: right;
		color: var(--pp-color-text);
		padding-inline: 0.25rem;
	}

	/* 想定幅（320–640px）では列が収まらないため、横スクロールではなく
	   1件=1カードに縦積みする。列見出しの視覚表示は aria-hidden の
	   .pp-table__label。読み上げは thead の columnheader を使う。
	   PC 幅（サイトPPからの流入を想定）では通常のテーブル表示へ戻す。
	   display:block は WebKit で table の暗黙ロールを外すため、
	   HTML 側で role="table|row|cell" を明示している。 */
	.pp-table {
		width: 100%;
		display: block;
		font-size: 0.75rem;
		line-height: 1.5;
	}

	.pp-table thead {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}

	.pp-table tbody {
		display: flex;
		flex-direction: column;
		gap: 0.5rem;
	}

	.pp-table tr {
		display: block;
		border: 1px solid #d4dcdc;
		border-radius: 0.25rem;
		background: #fff;
		overflow: hidden;
	}

	.pp-table td {
		display: block;
		padding: 0.375rem 0.5rem;
		border-top: 1px solid #e6ecec;
		overflow-wrap: anywhere;
	}

	.pp-table__label {
		display: block;
		font-size: 0.6875rem;
		font-weight: 700;
		color: #555;
	}

	/* 先頭セル（サービス名）はカードの見出しとして扱う */
	.pp-table td:first-child {
		background: var(--pp-color-th);
		border-top: 0;
		font-weight: 700;
	}

	.pp-table td:first-child .pp-table__label {
		font-weight: 400;
	}

	/* PC 幅では列が収まるため通常のテーブルへ戻す。
	   min-width は与えず width:100% + 折り返しで横スクロールを出さない。
	   列幅は table-layout:fixed で固定し、表をまたいで揃える。 */
	@media (min-width: 768px) {
		.pp-table {
			display: table;
			table-layout: fixed;
			font-size: 0.5625rem;
		}

		.pp-table thead {
			position: static;
			width: auto;
			height: auto;
			margin: 0;
			overflow: visible;
			clip-path: none;
			white-space: normal;
		}

		.pp-table tbody {
			display: table-row-group;
		}

		.pp-table tr {
			display: table-row;
			border: 0;
			border-radius: 0;
		}

		.pp-table th,
		.pp-table td {
			display: table-cell;
			border: 1px solid #d4dcdc;
			padding: 0.375rem;
			vertical-align: top;
			text-align: left;
			overflow-wrap: anywhere;
		}

		.pp-table th {
			background: var(--pp-color-th);
			font-weight: 700;
		}

		.pp-table td,
		.pp-table td:first-child {
			background: transparent;
			font-weight: 400;
		}

		.pp-table__label {
			display: none;
		}

		/* サービス / 提供者 / 種類 / プライバシーポリシー / オプトアウト */
		.pp-table th:nth-child(1) {
			width: 14%;
		}

		.pp-table th:nth-child(2) {
			width: 16%;
		}

		.pp-table th:nth-child(3) {
			width: 20%;
		}

		.pp-table th:nth-child(4),
		.pp-table th:nth-child(5) {
			width: 25%;
		}

		/* 送信目的を含む6列表。URL列の幅を5列表と近い比率に保つ */
		.pp-table.pp-table--6col th:nth-child(1) {
			width: 12%;
		}

		.pp-table.pp-table--6col th:nth-child(2) {
			width: 13%;
		}

		.pp-table.pp-table--6col th:nth-child(3) {
			width: 19%;
		}

		.pp-table.pp-table--6col th:nth-child(4) {
			width: 13%;
		}

		.pp-table.pp-table--6col th:nth-child(5),
		.pp-table.pp-table--6col th:nth-child(6) {
			width: 21.5%;
		}
	}
}