body {
	font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 100vh;
	/* background-image: linear-gradient(to top right, #6a11cb 0%, #2575fc 100%); */
	/* Example gradient background */
	margin: 0;
	padding: 20px;
	box-sizing: border-box;
	color: #666;
	/* Apple's primary text color */
}

body,
html {
	width: 100%;
	height: 100%;
	overflow: hidden;
	/* background-color: #fff; */
	/* 背景色をコメントアウトしてグラデーションが見えるか確認 */
}

#gradient-canvas {
	display: block;
	width: 100%;
	height: 100%;
	position: fixed;
	/* 背景として固定 */
	top: 0;
	left: 0;
	z-index: -1;
	/* ロゴより後ろに配置 */
}

#logo {
	position: absolute;
	right: 8%;
	/* 右端から10%の位置 */
	bottom: 10%;
	/* 下端から20%の位置 */
	width: 20vw;
	/* ウィンドウ幅の25% */
	max-width: 220px;
	/* 最大幅を400pxに設定 */
	min-width: 120px;
	/* 最大幅を400pxに設定 */
	height: auto;
	/* 縦横比を維持 */
	object-fit: contain;
	/* アスペクト比を保ちつつコンテナに収める */
	z-index: 10;
	/* グラデーション背景より手前に表示 */
	mix-blend-mode: difference;
	/* 描画モードを「差の絶対値」に設定 */
}

.container {
	background-color: rgba(255, 255, 255, 0.25);
	/* Semi-transparent white for frosted glass */
	backdrop-filter: blur(10px) saturate(300%);
	-webkit-backdrop-filter: blur(10px) saturate(180%);
	/* For Safari */
	padding: 35px 45px;
	border-radius: 18px;
	/* Apple-like rounded corners */
	/* border: 1px solid rgba(209, 213, 219, 0.3); */
	/* Subtle border */
	box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.1);
	/* Softer, more diffused shadow */
	width: 100%;
	max-width: 380px;
	text-align: center;
}

h1 {
	margin-top: 0;
	margin-bottom: 30px;
	color: #555;
	font-size: 20px;
	/* Slightly larger */
	font-weight: 400;
	/* Apple uses semi-bold for titles */
}

label {
	display: block;
	margin-bottom: 8px;
	text-align: left;
	color: #555;
	/* Darker label text */
	font-weight: 500;
	font-size: 14px;
}

input[type="text"],
input[type="password"] {
	width: 100%;
	padding: 14px 16px;
	/* More padding */
	margin-bottom: 20px;
	border: 1px solid #dedede;
	/* Apple's input border color */
	border-radius: 12px;
	/* More rounded */
	box-sizing: border-box;
	font-size: 17px;
	/* Apple's typical input font size */
	/* background-color: #f5f5f7; */
	background-color: rgba(255, 255, 255, 0.15);
	/* Light gray background for inputs */
	color: #1d1d1f;

	backdrop-filter: blur(10px) saturate(300%);
	-webkit-backdrop-filter: blur(10px) saturate(180%);
}

input[type="text"]:focus,
input[type="password"]:focus {
	border-color: #007aff;
	/* Apple's blue focus color */
	outline: none;
	box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.3);
}

input[type="submit"] {
	/* background-color: #007aff; */
	background-color: #999;
	/* Apple's primary blue */
	color: white;
	padding: 14px 15px;
	border: none;
	border-radius: 12px;
	/* More rounded */
	cursor: pointer;
	width: 100%;
	font-size: 17px;
	font-weight: 500;
	transition: background-color 0.2s ease-in-out;
}

input[type="submit"]:hover {
	background-color: #075a83;
	/* Darker blue on hover */
}

.error {
	color: #ff3b30;
	/* Apple's red for errors */
	background-color: rgba(255, 59, 48, 0.1);
	border: 1px solid rgba(255, 59, 48, 0.3);
	padding: 10px;
	border-radius: 8px;
	margin-bottom: 20px;
	text-align: left;
	font-size: 14px;
}

.logout-link {
	display: inline-block;
	margin-top: 30px;
	color: #007aff;
	text-decoration: none;
	font-size: 15px;
	font-weight: 500;
}

.logout-link:hover {
	text-decoration: underline;
}

.protected-content {
	text-align: left;
	margin-bottom: 15px;
	color: #1d1d1f;
	line-height: 1.6;
	font-size: 16px;
}

.protected-content p:first-child {
	margin-top: 0;
}