/* =========================================
			共通変数
		========================================= */
		:root {
			--bg: #fffafc;
			--pink: #ff66aa;
			--blue: #66ccff;
			--yellow: #fff45c;
			--choco: #663300;
			--line: #ffd4ec;
			--radius-xl: 20px;
			--radius-lg: 16px;
			--radius-md: 10px;
		}

		/* =========================================
			基本
		========================================= */
		body {
			background-color: var(--bg);
			background-image:
				radial-gradient(circle at 10% 10%, rgba(255,244,92,0.25) 0%, rgba(255,244,92,0) 60%),
				radial-gradient(circle at 80% 20%, rgba(102,204,255,0.2) 0%, rgba(102,204,255,0) 60%),
				radial-gradient(circle at 30% 80%, rgba(255,102,170,0.15) 0%, rgba(255,102,170,0) 60%);

			/* ★ここを調整（どの機種でも綺麗）*/
			background-size: cover;

			background-repeat: no-repeat;
			background-attachment: fixed;
			font-family: "Rounded Mplus 1c","Yu Gothic","Hiragino Sans",sans-serif;
			color: var(--choco);
			margin: 0;
			padding: 1rem 1rem 4rem;
			line-height: 1.4;
		}

		.app-shell {
			max-width: 520px;
			margin: 0 auto;
		}

		/* =========================================
			ヘッダー
		========================================= */
		.header-card {
			background: linear-gradient(
				90deg,
				var(--pink) 0%,
				var(--blue) 50%,
				var(--yellow) 100%
			);
			border-radius: var(--radius-xl);
			box-shadow: 0 8px 20px rgba(255,102,170,0.3);
			color: #fff;
			padding: 1rem 1.2rem;
		}