@charset "UTF-8";

		:root {
			--bg-color: #fbfbfd;
			--text-main: #1d1d1f;
			--text-sub: #86868b;
			--accent-color: #0066cc;
			--input-bg: rgba(0, 0, 0, 0.03);
			--glass-bg: rgba(255, 255, 255, 0.7);

			/* フォント変数の定義 */
			--font-heading: 'Playfair Display', serif;
			--font-base: 'Shippori Mincho', "Hiragino Mincho ProN", "Yu Mincho", serif;
			--font-sans: 'Noto Sans JP', -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Meiryo", sans-serif;
		}

		/* リセット */
		* {
			box-sizing: border-box;
			margin: 0;
			padding: 0;
		}

		body {
			/* ベースのフォントをしっぽり明朝に */
			font-family: var(--font-base);
			background-color: var(--bg-color);
			color: var(--text-main);
			line-height: 1.6;
			height: 100vh;
			display: grid;
			place-items: center; /* 画面中央に配置 */
			overflow: hidden;
			position: relative;
		}

		/* 背景の装飾（かすかな光の表現） */
		.bg-glow {
			position: absolute;
			width: 60vw;
			height: 60vw;
			background: radial-gradient(circle, rgba(0, 102, 204, 0.05) 0%, rgba(251, 251, 253, 0) 70%);
			top: -10vw;
			right: -10vw;
			z-index: 0;
			pointer-events: none;
		}

		/* メインコンテナ */
		main {
			position: relative;
			z-index: 10;
			width: 100%;
			max-width: 400px;
			padding: 2rem;
			display: grid;
			gap: 3rem;
		}

		/* ヘッダー部 */
		.auth-header {
			display: grid;
			gap: 0.5rem;
			text-align: center;
		}

		.app-title {
			/* タイトルに Playfair Display を適用 */
			font-family: var(--font-heading);
			font-size: 3rem;
			font-weight: 700;
			letter-spacing: -0.01em;
			font-style: italic; /* 少しエレガントさを強調 */
		}

		.app-subtitle {
			font-family: var(--font-heading);
			font-size: 1.15rem;
			color: var(--text-sub);
			font-weight: 500;
			letter-spacing: 0.02em;
		}

		/* フォームカプセル（グラスモーフィズム） */
		.auth-capsule {
			background-color: var(--glass-bg);
			backdrop-filter: blur(24px);
			-webkit-backdrop-filter: blur(24px);
			border: 1px solid rgba(255, 255, 255, 0.4);
			border-radius: 32px;
			padding: 2.5rem 2rem;
			box-shadow: 0 16px 40px rgba(0, 0, 0, 0.04);
			display: grid;
			gap: 1.5rem;
		}

		/* 入力グループ */
		.input-group {
			display: grid;
			gap: 0.5rem;
		}

		.input-label {
			font-size: 0.9rem;
			font-weight: 600;
			color: var(--text-sub);
			padding-left: 0.5rem;
		}

		.auth-input {
			width: 100%;
			background-color: var(--input-bg);
			border: none;
			border-radius: 16px;
			padding: 1rem 1.25rem;
			font-size: 1rem;
			font-family: inherit; /* しっぽり明朝を継承 */
			color: var(--text-main);
			outline: none;
			transition: background-color 0.2s ease, box-shadow 0.2s ease;
		}

		.auth-input:focus {
			background-color: #ffffff;
			box-shadow: 0 0 0 1px var(--accent-color);
		}

		.auth-input::placeholder {
			color: #a1a1a6;
		}

		/* アクションボタン */
		.btn-primary {
			background-color: var(--text-main);
			color: #ffffff;
			border: none;
			border-radius: 16px;
			padding: 1rem;
			font-size: 1.05rem;
			font-weight: 600;
			font-family: inherit;
			cursor: pointer;
			display: grid;
			place-items: center;
			transition: transform 0.2s ease, opacity 0.2s ease;
			margin-top: 0.5rem;
			letter-spacing: 0.05em;
		}

		.btn-primary:hover {
			transform: scale(0.98);
			opacity: 0.9;
		}

		/* モード切り替え（ログイン ⇔ 登録） */
		.auth-switch {
			text-align: center;
			font-size: 0.95rem;
			color: var(--text-sub);
			margin-top: 1rem;
		}

		.switch-btn {
			background: none;
			border: none;
			color: var(--text-main);
			font-weight: 700;
			font-size: 0.95rem;
			font-family: inherit;
			cursor: pointer;
			padding: 0;
			margin-left: 0.25rem;
			transition: color 0.2s ease;
		}

		.switch-btn:hover {
			color: var(--accent-color);
		}


		/* パスワード再発行リンク */
		.forgot-password {
			font-size: 0.8rem;
			color: var(--accent-color);
			text-decoration: none;
			font-weight: 500;
			transition: opacity 0.2s ease;
		}

		.forgot-password:hover {
			opacity: 0.8;
			text-decoration: underline;
		}


		/* 新規登録時のみ表示するフィールド */
		.signup-only {
			display: none;
		}

		/* モードごとの表示切り替え用クラス */
		body.is-signup .signup-only {
			display: grid;
		}

		body.is-signup .login-only {
			display: none;
		}



		p.er   { width:100%; max-width: 600px; margin:0 auto 10px auto; padding:10px; background: #FD4D4D; color:#fff; text-align: center; font-size:90%; }
		p.rock { width:100%; max-width: 600px; margin:0 auto 10px auto; padding:10px; background: #B64CE7; color:#fff; text-align: center; font-size:90%; }

		#tpass  { position:absolute; top:50%; right: 8%; width: 25px; height: 25px; cursor: pointer; }
		.eye { background-image: url(/img/eye-open.png); background-size: 100% 100%; opacity: 0.4; }
		.no-eye { background-image: url(/img/eye-close.png); background-size: 100% 100%; opacity: 0.4; }

		.hide { display: none; }