* {
			box-sizing: border-box;
		}

		html {
			width: 100%;
			min-height: 100%;
			background: #F7FAFC;
			overflow-x: hidden;
		}

		body {
			margin: 0;
			width: 100%;
			min-height: 100vh;
			min-height: 100dvh;
			overflow-x: hidden;
			background:
				radial-gradient(
					circle at 50% 0%,
					rgba(0, 199, 217, .12),
					transparent 38%
				),
				linear-gradient(
					180deg,
					#FFFFFF 0%,
					#F7FAFC 100%
				);
			color: #0A1A33;
			font-family:
				-apple-system,
				BlinkMacSystemFont,
				"Segoe UI",
				sans-serif;
			-webkit-font-smoothing: antialiased;
		}

		.page {
			width: 100%;
			min-height: 100vh;
			min-height: 100dvh;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			padding:
				max(24px, env(safe-area-inset-top))
				20px
				max(24px, env(safe-area-inset-bottom));
		}

		.brand {
			margin-bottom: 18px;
			color: #64748B;
			font-size: 14px;
			font-weight: 600;
			letter-spacing: .08em;
			text-transform: uppercase;
		}

		.brand img {
			display: block;
			width: min(330px, 72vw);
			height: auto;
		}


		.card {
			width: 100%;
			max-width: 470px;
			padding: 42px;
			border: 1px solid #DCE4EC;
			border-radius: 24px;
			background: rgba(255,255,255,.92);
			box-shadow:
				0 24px 70px rgba(15,95,191,.08),
				inset 0 1px 0 rgba(255,255,255,.75);
			backdrop-filter: blur(18px);
			-webkit-backdrop-filter: blur(18px);
			text-align: center;
		}

		h1 {
			margin: 0;
			font-size: clamp(46px, 11vw, 68px);
			line-height: .98;
			letter-spacing: -.055em;
			font-weight: 750;
		}

		.subtitle {
			margin: 18px auto 0;
			max-width: 320px;
			color: #64748B;
			font-size: 17px;
			line-height: 1.55;
		}

		.login {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100%;
			min-height: 56px;
			margin-top: 34px;
			padding: 14px 22px;
			border-radius: 14px;
			background: #0F5FBF;
			color: #FFFFFF;
			font-size: 17px;
			font-weight: 700;
			text-decoration: none;
			transition:
				transform .15s ease,
				background .15s ease;
			-webkit-tap-highlight-color: transparent;
		}

		.login:hover {
			background: #0A55AB;
			transform: translateY(-1px);
		}

		.login:active {
			transform: scale(.985);
		}

		.labels {
			margin-top: 26px;
			color: #64748B;
			font-size: 13px;
			letter-spacing: .02em;
		}

			.notice {
				margin-top: 28px;
				padding-top: 24px;
				border-top: 1px solid #E5EAF1;
				color: #64748B;
				font-size: 14px;
				line-height: 1.6;
				text-align: left;
			}

			.notice strong {
				color: #0A1A33;
				font-weight: 650;
			}

			.notice a {
				color: #0F5FBF;
				text-decoration: none;
			}

			.notice a:hover {
				color: #0A1A33;
			}

			.legal-links {
				display: flex;
				flex-wrap: wrap;
				gap: 12px 18px;
				margin-top: 18px;
				font-size: 13px;
			}

		@media (max-width: 600px) {
			.page {
				justify-content: center;
				padding-left: 16px;
				padding-right: 16px;
			}

			.brand {
				margin-bottom: 14px;
				font-size: 12px;
			}

			.card {
				max-width: 100%;
				padding: 34px 22px 28px;
				border-radius: 20px;
			}

			h1 {
				font-size: clamp(44px, 14vw, 58px);
			}

			.subtitle {
				margin-top: 16px;
				font-size: 16px;
			}

			.login {
				min-height: 56px;
				margin-top: 28px;
				font-size: 17px;
			}

			.labels {
				margin-top: 22px;
				font-size: 12px;
			}
		}

		@media (max-width: 360px) {
			.card {
				padding-left: 18px;
				padding-right: 18px;
			}

			h1 {
				font-size: 42px;
			}
		}