/* モーダル背景とbodyのスクロール制御 */
html.modal-open,
body.modal-open {
	height: 100%;
	overflow: hidden;
	overscroll-behavior: contain;
}

/* モーダル全体（背景） */
.auth-modal {
	position: fixed;
	inset: 0;
	display: none;
	align-items: center;
	justify-content: center;
	z-index: 9999;
	background: rgba(0, 0, 0, .5);
	overflow: hidden; /* 背景レイヤーでスクロールさせない */
}

.auth-modal.is-open {
	display: flex;
}

/* モーダルパネル（スクロール可能コンテナ） */
.auth-modal__panel {
	--auth-modal-accent: #444;
	--auth-modal-title-fg: #fff;
	background: ivory;
	max-width: 520px;
	width: calc(100% - 32px);
	max-height: calc(100vh - 40px); /* 上下に余白を確保 */
	border-radius: 0.5em;
	overflow: hidden; /* パネル自体は hidden */
	display: flex;
	flex-direction: column;
}

/* タイトルバー（固定） */
.auth-modal__titlebar {
	background: var(--auth-modal-accent);
	padding: 10px 16px;
	flex-shrink: 0; /* 高さ固定 */
}

.auth-modal__title {
	margin: 0;
	color: var(--auth-modal-title-fg);
	font-size: 18px;
}

/* ボディ部分（スクロール可能） */
.auth-modal__body {
	padding: 20px;
	overflow-y: auto; /* 縦スクロール有効 */
	overflow-x: hidden;
	-webkit-overflow-scrolling: touch; /* iOS用スムーズスクロール */
	flex: 1; /* 残りのスペースを全て使用 */
}

/* AUTH_MODAL用の調整 */
#AUTH_MODAL {
	position: fixed;
	inset: 0;
	display: grid;
	place-items: center;
	z-index: 10000;
	overflow: hidden; /* 背景でスクロールさせない */
}

#AUTH_MODAL .auth-modal__panel {
	background: ivory;
	max-height: calc(100vh - 6rem);
	width: min(92vw, 640px);
	border-radius: 0.5em;
	display: flex;
	flex-direction: column;
	overflow: hidden; /* パネル外枠は hidden */
}

#AUTH_MODAL .modal-body,
#AUTH_MODAL .auth-modal__body {
	overflow-y: auto;
	overflow-x: hidden;
	-webkit-overflow-scrolling: touch;
	flex: 1;
	max-width: 100%;
}

/* フォーム要素 */
.auth-label {
	display: block;
	margin: 0 0 6px 0;
	font-weight: bold;
}

input.newFormer {
	display: block;
	width: 100%;
	box-sizing: border-box;
	padding: 12px 14px;
	border: 1px solid #ccc;
	border-radius: 0.5em;
	font-size: 16px;
	line-height: 1.4;
	min-height: 44px;
	appearance: none;
	-webkit-appearance: none;
	margin: 0;
}

/* ボタン行 */
.auth-btnrow {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
	align-items: center;
	margin-top: 2px;
}

.auth-btnrow > .ABTN {
	text-align: center;
	user-select: none;
}

.auth-spacer {
	height: 10px;
}

/* QRコード表示 */
#qrBox {
	display: flex;
	justify-content: center;
	padding: 12px;
}

#qrTarget svg {
	width: 180px;
	height: 180px;
}

/* グリッドレイアウト */
#AUTH_MODAL .auth-grid {
	display: grid;
	gap: 12px;
}

.auth-btnrow {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

.auth-btnrow .ABTN {
	flex: 1 1 160px;
	text-align: center;
}

#STOREDIVH {
	display: grid;
	gap: 12px;
	grid-template-columns: 1fr;
}

#STOREDIVL img {
	max-width: 100%;
	height: auto;
	display: block;
}

#qrTarget canvas,
#qrTarget svg {
	max-width: 100%;
	height: auto;
}

/* テキスト表示 */
code,
.buc-code {
	word-break: break-all;
	overflow-wrap: anywhere;
}

.wbBA {
	word-break: break-all;
}

.dF {
	display: flex;
}

.jcC {
	justify-content: center;
}

.min-h12e {
	min-height: 1.2em;
}

.dG {
	display: grid;
}

.gp10p {
	gap: 10px;
}

.contactP {
	margin: 8px 0 12px;
	line-height: 1.6;
}

.twofaAppsUL {
	margin: 0;
	padding-left: 1.2em;
	line-height: 1.8;
}

code,
kbd,
samp,
pre {
	font-family: inherit;
}

code {
	font-family: "Arial", Arial, "Helvetica Neue", Helvetica, "Noto Sans JP", sans-serif;
	font-weight: 500;
	font-variation-settings: "wght" 500;
}

pre {
	font-family: inherit;
	white-space: pre;
}

pre code {
	font-family: inherit;
	font-weight: inherit;
}

/* メールボックス表示 */
.auth-modal .emailBox {
	max-width: 100%;
	padding: 10px;
	border-radius: 0.5em;
}

.auth-modal .fit-1line {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: clip;
}

.auth-modal code.emailText {
	display: inline-block;
	font-family: "Arial Black", Arial, "Helvetica Neue", Helvetica, "Noto Sans JP", sans-serif;
	font-weight: 900;
	line-height: 1.1;
}

.emailBox .emailText {
	font-size: var(--fit-font-size, 18px);
}


/* ログインフォーム調整 */
#auth-modal #loginForm .auth-label {
	display: block;
	margin: .3em 0 0;
}

#auth-modal #loginForm input.newFormer[type="email"],
#auth-modal #loginForm input.newFormer[type="password"] {
	display: block;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	margin: .5em 0;
	min-height: 44px;
}

/* フォーカス時の配色 */
#auth-modal #loginForm input.newFormer[type="email"]:focus,
#auth-modal #loginForm input.newFormer[type="password"]:focus {
	background-color: #FEB645;
	border: 1px solid transparent;
	outline: none;
}

/* ボタン配置調整 */
#auth-modal .auth-btnrow {
	display: grid;
	row-gap: .6em;
	justify-items: center;
	padding-top: .6em;
}

#auth-modal .auth-btnrow .ABTN {
	width: auto;
	min-width: 12em;
	max-width: 80vw;
	margin: 0 auto;
}

.tfabutton {
	text-decoration: none;
	color: white !important;
	padding-left: 1.5em;
	padding-right: 0;
	padding-top: 0;
	padding-bottom: 0;
	margin-left: 0;
	margin-right: 0;
}