/* ログインページ専用（タブレット以下・モバイルレイアウト）
   ブランドパネル上段＋フォーム下段（v2/login.css と併用） */

@media (max-width: 960px) {
	body.login-page {
		/* 固定ヘッダー分だけ確実に押し下げる（margin-top の不確実さ回避） */
		padding-top: 56px;
		box-sizing: border-box;
	}

	body.login-page > header.login-header {
		display: flex !important;
	}
	body.login-page .login-header {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		height: 56px;
		background: var(--gradient);
		z-index: 999;
		display: flex;
		align-items: center;
		justify-content: flex-start;
		padding: 0 1.5rem;
		box-sizing: border-box;
	}
	body.login-page .login-header-inner {
		display: flex;
		align-items: center;
		justify-content: flex-start;
		height: 100%;
		min-height: 56px;
		gap: 10px;
	}
	body.login-page .login-header__mark {
		height: 26px;
		width: auto;
		display: block;
		filter: brightness(0) invert(1);
		opacity: 0.95;
	}
	body.login-page .login-header__logo {
		height: 32px;
		width: auto;
		display: block;
		filter: brightness(0) invert(1);
		opacity: 0.95;
		vertical-align: middle;
	}
	body.login-page .login-header__fallback {
		display: none;
		font-size: 1.25rem;
		font-weight: 900;
		color: #fff;
	}

	body.login-page .login-main {
		/* body の padding-top でヘッダー分は確保済み */
		margin-top: 24px !important;
		min-height: calc(100vh - 56px - 24px);
		display: flex;
		flex-direction: column;
	}

	body.login-page .page-layout {
		flex: 1;
		min-height: 0;
	}

	body.login-page .brand-panel {
		display: none;
	}

	body.login-page .form-panel {
		flex: 1;
		display: flex;
		align-items: flex-start;
		justify-content: center;
		/* 固定ヘッダー下でLMSチップが隠れないよう、padding を丸ごと上書き */
		padding: clamp(28px, 5vh, 48px) 18px 32px;
		min-height: 0;
	}

	body.login-page .form-panel__inner {
		max-width: 100%;
		width: 100%;
		display: flex;
		flex-direction: column;
	}

	body.login-page .form-footer {
		margin-top: auto;
		padding-top: 28px;
	}

	body.login-page .form-header {
		margin-bottom: 28px;
	}

	/* iOS 自動ズーム防止 */
	body.login-page .form-input {
		font-size: 16px;
		height: 56px;
	}

	body.login-page .input-icon {
		font-size: 20px;
		left: 14px;
	}

	body.login-page .input-wrap--pw .form-input {
		padding-right: 52px;
	}

	body.login-page .pw-toggle {
		height: 56px;
		width: 52px;
	}
}

/* 狭い幅では説明文を詰める */
@media (max-width: 560px) {
	body.login-page .brand-panel {
		padding: 22px 16px 20px;
	}

	body.login-page .brand-strapline {
		font-size: 10px;
	}
}

@media (min-width: 561px) and (max-width: 960px) {
	body.login-page .form-header {
		margin-top: 8px;
	}
}