/* =========================================
	 左右2カラムのサインインレイアウト（Split）
	 Bootstrapと共存可能／レスポンシブ対応
	 ========================================= */

.auth-left {
	flex: 0 0 42%;
	/* ▼ 더 밝고 연한 보라~파랑 그라데이션 */
	background: linear-gradient(135deg, #a5b4fc, #818cf8 55%, #60a5fa);
	color:#fff;
	position: relative;
	display:flex; align-items:center; justify-content:center;
	padding: 48px 32px;
}
html, body {
  margin: 0;
  padding: 0;
}

.auth-left-inner{
	width:100%; max-width: 340px; text-align:left;
}
.brand-logo {
	height: 54px;
	display: flex;
	align-items: left;
	justify-content: left;
	font-weight: 800;
	margin-bottom: 14px;
}

.brand-logo-img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

.brand-title{
	font-size: 28px; font-weight:800; margin: 6px 0 6px;
}
.brand-sub{
	font-size:14px; opacity:.95; line-height:1.6;
}

/* 右側：フォーム */
.auth-right{
	flex: 1;
	padding: 48px 56px;
	display:flex; align-items:center; justify-content:center;
	background: #fff;
}
.form-card{ width:100%; max-width: 420px; }

.form-title{
	font-size: 24px; font-weight:800; margin: 0 0 10px; color:#0f172a;
}
.illus{
	/* ▼ シンプルなイラスト風サークル */
	width:80px; height:80px; border-radius:20px;
	background: #eef2ff;
	display:flex; align-items:center; justify-content:center;
	margin: 8px 0 14px;
	box-shadow: 0 6px 18px rgba(15,23,42,.12);
}
.ip-badge{
	display:inline-flex; align-items:center; gap:6px;
	font-size:12px; color:#334155;
	background: #f1f5f9;
	border:1px solid #e2e8f0;
	border-radius: 999px;
	padding: 6px 10px; margin: 4px 0 18px;
}
.ip-badge strong{ color:#0f172a; }

/* 入力UI */
.label{
	display:block; font-size: 13px; color:#475569; margin: 10px 2px 6px;
}
.input{
	width:100%; height:44px; border-radius:10px;
	background:#fff; border:1px solid #e2e8f0;
	padding: 10px 12px; color:#0f172a;
	transition: box-shadow .18s ease, border-color .18s ease;
}
.input::placeholder{ color:#94a3b8; }
.input:focus{
	outline:none; border-color:#60a5fa;
	box-shadow: 0 0 0 4px rgba(96,165,250,.25);
}

/* ボタン */
.btn-primary-split{
	width:100%; height:44px; border:0; border-radius:10px;
	font-weight:700; letter-spacing:.2px; color:#fff;
	background: linear-gradient(135deg,#4f46e5,#3b82f6);
	box-shadow: 0 10px 22px rgba(59,130,246,.30);
	transition: transform .06s ease, filter .2s ease;
}
.btn-primary-split:hover{ filter:brightness(1.06); }
.btn-primary-split:active{ transform: translateY(1px); }

/* 補助リンク */
.helper{
	margin-top:10px; font-size:12px; color:#64748b;
}
.helper a{ color:#3b82f6; text-decoration:none; }
.helper a:hover{ text-decoration:underline; }

/* レスポンシブ：横幅が狭い時は縦積み */
@media (max-width: 992px){
	.auth-wrap{ margin: 20px auto; border-radius: 0; }
}
@media (max-width: 860px){
	.auth-wrap{ flex-direction: column; }
	.auth-left{ flex-basis:auto; min-height: 180px; padding: 28px 22px; }
	.auth-right{ padding: 28px 22px; }
	.brand-title{ font-size:22px; }
}
.auth-wrap{
	width:100%;
	height:100vh;
	margin:0;
	border-radius:0;
	overflow:hidden;
	display:flex;
	box-shadow:none;
}

.auth-left{
	flex:0 0 40%;
	min-height:100%;
}

.auth-right{
	flex:1;
	min-height:100%;
	display:flex; align-items:center; justify-content:center;
	padding:60px;
}

.auth-left {
  flex: 0 0 42%;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 動画を全体にフィットさせる */
.auth-left .bg-video {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  object-fit: cover;    /* 비율 유지하며 꽉 채움 */
  z-index: 1;
}

/* オーバーレイするコンテンツ */
.auth-left-inner {
  position: relative;
  z-index: 2;
  text-align: left;
  color: #fff;
}
.brand-logo-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.5)); 
}

.brand-title {
  font-size: 28px;
  font-weight: 800;
  margin: 6px 0 6px;
  color: #fff;
  text-shadow: 0 2px 6px rgba(0,0,0,.6);
}

.brand-sub {
  font-size: 14px;
  opacity: .95;
  line-height: 1.6;
  color: #fff;
  text-shadow: 0 1px 4px rgba(0,0,0,.6);
}