@charset "utf-8";

/*
 * index_auth.php 전용 스타일
 *
 * 다른 서버에 복사할 때 함께 옮길 파일:
 * - resources/css/auth.css
 * - resources/css/font_wrap.css
 * - resources/css/font/SUIT/ (woff)
 * - resources/img/noxarchive_logo.png
 * - resources/js/token.js (회원가입 토큰용, 선택)
 */

@import url('/resources/css/font_wrap.css');

:root {
	--main-black: #060605;
	--key-color: #7847C4;
	--font-family-suit: 'SUIT', 'Pretendard', sans-serif;
	--fs-14: 1.4rem;
	--fs-15: 1.5rem;
	--fs-16: 1.6rem;
	--fs-17: 1.7rem;
}

/* base reset */
* { margin: 0; padding: 0; font: inherit; color: inherit; }
*, :after, :before { box-sizing: border-box; }
html { font-size: 62.5%; scroll-behavior: smooth; }
html, body { height: 100%; }
body { margin: 0; line-height: 1; -webkit-font-smoothing: antialiased; min-width: 360px; font-size: 1.6rem; font-family: var(--font-family-suit); background-color: var(--main-black); color: #fff; }
a { text-decoration: none; color: inherit; }
img { width: 100%; vertical-align: top; }
button { background-color: transparent; border: 0; cursor: pointer; font: inherit; line-height: inherit; }
p, span, a { line-height: 150%; }

.f-suit { font-family: var(--font-family-suit); }


/* auth page */
body:has(#container.auth) { height: 100vh; overflow: hidden; background-color: #fff; color: var(--main-black); }
#container.auth { min-height: 100vh; }
.auth-page { display: flex; align-items: center; justify-content: center; overflow: hidden; position: relative; color: var(--main-black); }
.auth-glow { position: absolute; top: 50%; left: 50%; z-index: 0; width: 76.5rem; height: 76.5rem; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0) 68%); transform: translate(-50%, -58%); pointer-events: none; }
.auth-inner { display: flex; align-items: center; gap: 12rem; width: 100%; max-width: 64rem; padding: 4rem 2.4rem; margin-top: 7rem; text-align: center; }
.auth-logo { width: 18.4rem; max-width: 52vw; }
.auth-logo img { display: block; width: 100%; height: auto; }
.auth-desc { margin-top: 3rem; font-size: var(--fs-17); font-weight: 400; line-height: 150%; }
.auth-desc p { line-height: 150%; }
.auth-desc p + p { margin-top: 0; }
.auth-desc .auth-note { margin-top: 1.2rem; font-size: var(--fs-15); opacity: 0.55; }
.auth-actions { display: flex; align-items: stretch; gap: 1.2rem; }

.warning-wrap { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: stretch; gap: 2vw; width: 94%; max-width: 1024px; margin: 7vw auto 0; padding: 3vw; border: 3px solid #eeeeee; }
.warning-wrap .warning-num { align-self: start; aspect-ratio: 1/1; padding: 1.5vw 1.05vw 1.05vw; font: 900 150px/100% var(--font-family-suit); background: #fff; color: var(--main-black); border-radius: 50%; border: 1.3vw solid #ff1a1a; }
.warning-wrap .warning-body { display: flex; flex-direction: column; justify-content: center; gap: 2vw; min-width: 0; min-height: 0; }
.warning-wrap .warning-txt { min-width: 0; font: 400 24px/150% var(--font-family-suit); color: var(--main-black); }
.warning-wrap a { align-self: flex-start; display: flex; align-items: center; font-size: 23px; padding: 0.625vw 2vw; background-color: var(--main-black); color: #fff; }
.warning-wrap form { width: max-content; }

@media screen and (max-width: 1024px) {
	.warning-wrap { grid-template-columns: auto; padding: 4rem; position: fixed; left: 50%; top: 45%; transform: translate(-50%, -50%); }
	.warning-wrap .warning-num { width: max-content; font-size: 128px; padding: 28px 20px 20px; margin: 3rem auto; border: 16px solid #ff1a1a; }
	.warning-wrap .warning-txt { font-size: 22px; text-align: center; }
	.auth-actions { font-size: 18px; justify-content: center; }
	.warning-wrap .warning-body { gap: 5rem; }
	.warning-wrap a { padding: 12px 16px; } 
}
@media screen and (max-width: 768px) {
	.warning-wrap { gap: 1rem; padding: 1.6rem; }
	.warning-wrap .warning-num { padding: 2rem 1.5rem 1.5rem; font-size: 7.5rem; border-width: 1.4rem; }
	.warning-wrap .warning-txt { font-size: clamp(1.6rem, 3.4vw, 1.8rem); }
	.warning-wrap a { font-size: clamp(1.2rem, 3.2vw, 1.5rem); padding: 1rem 1.2rem; }
}