@charset "utf-8";
/* =====================================================================
   B-SIDE · 시스템 메시지 화면 리스킨 (#access)
   "로그인이 필요합니다" · "권한이 없습니다" 등 — 게시판 접근이 막혔을 때 뜨는 화면
   (라이믹스 message 모듈 스킨) → 로그인 팝업과 같은 다크 카드 · PC/모바일 공통
   ※ 원래 스킨 CSS보다 우선하도록 html body #access 로 시작
   ===================================================================== */

html body #access {
	position: relative;
	width: auto;
	max-width: 420px;
	margin: 48px auto 64px;
	overflow: hidden;
	box-sizing: border-box;
	border: 1px solid rgba(255, 255, 255, .1);
	border-radius: 24px;
	background:
		radial-gradient(420px 220px at 100% 0%, rgba(129, 140, 248, .22), transparent 70%),
		radial-gradient(360px 200px at 0% 100%, rgba(56, 189, 248, .10), transparent 70%),
		#15152a;
	box-shadow: 0 40px 80px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .06);
	font-family: var(--bs-f-ko, "Pretendard Variable", Pretendard, sans-serif);
	color: var(--bs-tx, #ececf7);
	animation: bs-access-in .4s cubic-bezier(.2, .9, .3, 1.1) both;
}
@keyframes bs-access-in {
	0% { opacity: 0; transform: translateY(14px) scale(.97) }
	100% { opacity: 1; transform: none }
}
/* 상단 미니 건반 (로그인 팝업과 동일) */
html body #access:before {
	display: block;
	height: 20px;
	border-bottom: 1px solid rgba(255, 255, 255, .08);
	background-image:
		linear-gradient(90deg,
			transparent 0 12px, #0b0b18 12px 20px, transparent 20px 28px, #0b0b18 28px 36px,
			transparent 36px 60px, #0b0b18 60px 68px, transparent 68px 76px, #0b0b18 76px 84px,
			transparent 84px 92px, #0b0b18 92px 100px, transparent 100px 112px),
		linear-gradient(90deg, rgba(255, 255, 255, .16) 0 15px, rgba(0, 0, 0, .35) 15px 16px);
	background-size: 112px 12px, 16px 100%;
	background-repeat: repeat-x;
	content: '';
}

/* ---------- 머리: 🔒 라벨 + 메시지 ---------- */
html body #access .login-header {
	margin: 0;
	padding: 28px 30px 4px;
}
html body #access .login-header:before {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin-bottom: 14px;
	font-family: var(--bs-f-mono, "JetBrains Mono", monospace);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .14em;
	color: var(--bs-acc-2, #38bdf8);
	content: '● MEMBERS ONLY';
}
html body #access .login-header h1 {
	margin: 0;
	padding: 0;
	font-family: var(--bs-f-ko, "Pretendard Variable", Pretendard, sans-serif);
	font-size: 24px;
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: -0.03em;
	color: #fff;
}
html body #access .login-header h1:before {
	margin-right: 8px;
	content: '🔒';
}
html body #access .login-header .message {
	margin: 12px 0 0;
	padding: 10px 14px;
	border: 1px solid rgba(255, 255, 255, .1);
	border-radius: 12px;
	background: rgba(255, 255, 255, .04);
	font-size: 13px;
	line-height: 1.55;
	color: var(--bs-tx-2, #a6a6c4);
}

/* ---------- 몸통: 입력칸 ---------- */
html body #access .login-body {
	margin: 0;
	padding: 20px 30px 0;
}
html body #access .login-body .control-group { margin: 0 0 6px; }
html body #access input[type=text],
html body #access input[type=email],
html body #access input[type=password] {
	display: block;
	width: 100%;
	height: 54px;
	margin: 0 0 10px;
	padding: 0 16px;
	box-sizing: border-box;
	border: 1px solid rgba(255, 255, 255, .1);
	border-radius: 14px;
	background: rgba(255, 255, 255, .04);
	font-family: inherit;
	font-size: 16px;            /* 16px 이상: 아이폰 입력 시 화면 확대 방지 */
	font-weight: 500;
	line-height: normal;
	color: #fff;
	caret-color: var(--bs-acc-2, #38bdf8);
	color-scheme: dark;
	-webkit-appearance: none;
	appearance: none;
	transition: border-color .15s, background-color .15s, box-shadow .15s;
}
html body #access input::placeholder { color: var(--bs-tx-3, #6d6d8f); opacity: 1; }
html body #access input[type=text]:hover,
html body #access input[type=email]:hover,
html body #access input[type=password]:hover { border-color: rgba(255, 255, 255, .2); }
html body #access input[type=text]:focus,
html body #access input[type=email]:focus,
html body #access input[type=password]:focus {
	outline: 0;
	border-color: var(--bs-acc, #818cf8);
	background: rgba(129, 140, 248, .08);
	box-shadow: 0 0 0 4px rgba(129, 140, 248, .18);
}
/* 크롬 자동완성: 다크 유지 + 글씨 보이게 */
html body #access input:-webkit-autofill,
html body #access input:-webkit-autofill:hover,
html body #access input:-webkit-autofill:active {
	-webkit-text-fill-color: #fff !important;
	-webkit-box-shadow: 0 0 0 1000px #1d1d36 inset !important;
	box-shadow: 0 0 0 1000px #1d1d36 inset !important;
	transition: background-color 99999s ease 0s;
}
html body #access input:-webkit-autofill:focus {
	-webkit-text-fill-color: #fff !important;
	-webkit-box-shadow: 0 0 0 1000px #23234a inset, 0 0 0 4px rgba(129, 140, 248, .18) !important;
	box-shadow: 0 0 0 1000px #23234a inset, 0 0 0 4px rgba(129, 140, 248, .18) !important;
}

/* 로그인 유지 → 토글 스위치 */
html body #access label[for=keepid] {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 4px 0 14px;
	font-size: 13px;
	font-weight: 500;
	color: var(--bs-tx-2, #a6a6c4);
	cursor: pointer;
	user-select: none;
}
html body #access input[type=checkbox] {
	position: relative;
	top: 0;
	flex: none;
	width: 38px;
	height: 22px;
	margin: 0;
	border-radius: 22px;
	background: rgba(255, 255, 255, .12);
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition: background .2s;
}
html body #access input[type=checkbox]:before {
	position: absolute;
	top: 3px;
	left: 3px;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 2px 6px rgba(0, 0, 0, .35);
	transition: transform .2s cubic-bezier(.3, 1.4, .5, 1);
	content: '';
}
html body #access input[type=checkbox]:checked { background: var(--bs-grad, linear-gradient(90deg, #818cf8, #38bdf8)); }
html body #access input[type=checkbox]:checked:before { transform: translateX(16px); }
html body #access input[type=checkbox]:focus-visible { outline: 0; box-shadow: 0 0 0 4px rgba(129, 140, 248, .25); }

/* ---------- 버튼: 그라데이션 알약 ---------- */
html body #access .login-body .button {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	height: 54px;
	margin: 0;
	border: 0;
	border-radius: 999px;
	background: var(--bs-grad, linear-gradient(90deg, #818cf8, #38bdf8));
	box-shadow: 0 10px 30px rgba(129, 140, 248, .35);
	font-family: inherit;
	font-size: 16px;
	font-weight: 700;
	line-height: 1;
	color: #111122;
	text-decoration: none;
	cursor: pointer;
	touch-action: manipulation;
	-webkit-tap-highlight-color: transparent;
	transition: box-shadow .2s, filter .15s;
}
html body #access .login-body .button:after { content: '→'; }
html body #access .login-body .button:hover,
html body #access .login-body .button:focus {
	outline: 0;
	background: var(--bs-grad, linear-gradient(90deg, #818cf8, #38bdf8));
	box-shadow: 0 14px 36px rgba(56, 189, 248, .3);
	color: #111122;
}
html body #access .login-body .button:active { filter: brightness(.92); }

/* ---------- 바닥: 찾기 · 가입 ---------- */
html body #access .login-footer {
	margin: 22px 30px 0;
	padding: 18px 0 26px;
	border-top: 1px solid rgba(255, 255, 255, .08);
	text-align: center;
	font-size: 13px;
	color: var(--bs-tx-3, #6d6d8f);
}
html body #access .login-footer > a {
	font-size: 13px;
	font-weight: 500;
	color: var(--bs-tx-2, #a6a6c4);
	text-decoration: none;
}
html body #access .login-footer > a:last-child { color: var(--bs-acc-2, #38bdf8); }
html body #access .login-footer > a:hover { color: #fff; text-decoration: none; }
html body #access .login-footer > .bar {
	display: inline-block;
	width: 3px;
	height: 3px;
	margin: 0 12px;
	border-radius: 50%;
	background: var(--bs-tx-3, #6d6d8f);
	font-size: 0;
	vertical-align: middle;
}

/* ---------- 📱 모바일 ---------- */
@media all and (max-width: 640px) {
	html body #access {
		max-width: none;
		margin: 24px 16px 40px;
		border-radius: 22px;
	}
	html body #access .login-header { padding: 24px 22px 4px; }
	html body #access .login-header h1 { font-size: 21px; }
	html body #access .login-body { padding: 18px 22px 0; }
	html body #access .login-footer { margin: 20px 22px 0; }
}
@media (prefers-reduced-motion: reduce) {
	html body #access { animation: none; }
}