/* =========================================================
   privacy-policy.css
   Base: 375px / Fluid range: 320px – 640px
   Visual reference: https://www.otenki.com/app_tos_premium.htm
   ========================================================= */

/* ---------- Modern CSS Reset (@layer) ---------- */
@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;
	}
}

/* ---------- Design tokens ---------- */
@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-radius-card: 0.625rem; /* 10px @ 16 */
		--pp-space-page-x: 0.625rem; /* 10px @ 375 */
		--pp-space-page-y: 1.25rem; /* 20px @ 375 */
		--pp-space-section: 1.25rem; /* 20px */
		--pp-max: 37.5rem; /* 600px */
	}
}

/* ---------- Base ---------- */
@layer base {
	html {
		font-size: var(--pp-root);
	}

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

	/* Windows のラスタライズで横画が階段状ににじむため、既存LPと同じ回避策 */
	h1,
	h2,
	p,
	li,
	span {
		transform: rotate(0.03deg);
	}

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

/* ---------- Components ---------- */
@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; /* 16px */
		font-weight: 700;
		line-height: 1.5;
		text-align: center;
		color: var(--pp-color-text);
	}

	.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; /* 12px 10px */
		display: flex;
		flex-direction: column;
		gap: var(--pp-space-section);
		overflow-wrap: anywhere;
	}

	.pp-section {
		display: flex;
		flex-direction: column;
		gap: 0.625rem; /* 10px */
	}

	.pp-section__heading {
		font-size: 0.875rem; /* 14px */
		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; /* 13px */
		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; /* 6px */
	}

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

	.pp-list__item--katakana {
		grid-template-columns: 1.5em 1fr;
	}

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

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

	.pp-contact {
		display: flex;
		flex-direction: column;
		gap: 0.25rem;
	}

	.pp-note {
		color: var(--pp-color-muted);
	}

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