body {
  font-family: 'Poppins', sans-serif;
  background-color: #ffffff;
}

.landing-page {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 100vw;
    overflow-x: hidden;
    flex-wrap: wrap;
}
.welcome_page {
  width: 100%;
  height: 100vh;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  transition: width 0.5s ease-in-out, margin 0.5s ease-in-out;
  /* background: url("../img/globalnoticeboard_bg.png") no-repeat center/cover; */
  background-color: #e8ede8; /* Fallback while bg image loads - prevents white flash */
  background-image: url("../img/globalnoticeboard_bg.png");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.welcome_page.shrink {
  width: calc(100% - 400px);
  margin-left: 0;
  margin-right: auto;
}

/* Main container */
.main-container {
  /* width: 630px; */
  height: auto;
  min-height: 100vh;
  padding: 40px 48px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  text-align: center;
  position: relative;
  width: 100%;
  flex: 1;
  box-sizing: border-box;
}

/* Logo */
.logo {
  max-width: 400px;
  width: 100%;
  margin-bottom: 20px;
  height: auto;
}

/* Title */
.title {
  font-size: 54px;
  line-height: 81px;
  font-weight: 600;
  color: #000;
}

/* Content block */
.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  margin-top: 20px;
}

/* Subtitle */
.subtitle {
  font-size: 35px;
  line-height: 45px;
  font-weight: 600;
  color: #000;
  font-family: var(--font-medium);
}

/* Button */
.primary-button {
  /* width: 173px; */
  height: 46px;
  background-color: #529B50;
  border: none;
  border-radius: 3px;
  color: #ffffff;
  font-size: 16px;
  /* font-weight: 600; */
  cursor: pointer;
  padding: 10px 20px;
  font-family: var(--font-regular);
}

/* Footer - part of flex flow, pushed to bottom */
.footer {
  width: 100%;
  text-align: center;
  padding: 20px 0;
  margin-top: auto; /* Push to bottom of flex container */
  flex-shrink: 0;
}

.footer p {
  font-size: 35px;
  line-height: 52px;
 font-family: var(--font-medium);
  color: #000;
}

/* ============================================
   RESPONSIVE STYLES - MEDIA QUERIES
   ============================================ */

/* Tablet Landscape and Below (max-width: 1024px) */
@media (max-width: 1024px) {
  .main-container {
    height: auto;
    min-height: auto;
    padding: 30px 24px 0;
    gap: 0;
    justify-content: center;
  }

  .welcome_page {
    height: 100vh;
  }

  .welcome_page.shrink {
    width: calc(100% - 350px);
  }

  .logo {
    max-width: 260px;
    margin-bottom: 12px;
  }

  .title {
    font-size: 36px;
    line-height: 50px;
  }

  .subtitle {
    font-size: 24px;
    line-height: 34px;
  }

  .content {
    gap: 20px;
    margin-top: 12px;
  }

  .primary-button {
    height: 42px;
    font-size: 14px;
    padding: 10px 16px;
  }

  .footer p {
    font-size: 24px;
    line-height: 36px;
  }

  .footer {
    padding: 16px 0;
  }
}

/* Tablet Portrait (max-width: 768px) */
@media (max-width: 768px) {
  .landing-page {
    height: auto;
    min-height: 100vh;
    padding: 0;
    flex-direction: column;
  }

  .welcome_page {
    width: 100% !important;
    height: 100vh;
    min-height: 100vh;
    margin: 0 !important;
  }

  .welcome_page.shrink {
    width: 100% !important;
    margin-right: 0 !important;
  }

  .main-container {
    padding: 20px 32px 0;
    gap: 0;
    min-height: auto;
    height: auto;
    justify-content: center;
  }

  .logo {
    max-width: 280px;
    margin-bottom: 12px;
  }

  .title {
    font-size: 34px;
    line-height: 46px;
  }

  .subtitle {
    font-size: 22px;
    line-height: 32px;
  }

  .content {
    gap: 18px;
    margin-top: 12px;
  }

  .primary-button {
    height: 42px;
    font-size: 14px;
    padding: 10px 16px;
  }

  .footer {
    padding: 14px 0;
  }

  .footer p {
    font-size: 22px;
    line-height: 32px;
  }
}

/* Mobile Landscape (max-width: 640px) */
@media (max-width: 640px) {
  .welcome_page {
    width: 100% !important;
    height: 100vh;
    min-height: 100vh;
  }

  .welcome_page.shrink {
    width: 100% !important;
    margin-right: 0 !important;
  }

  .main-container {
    padding: 20px 24px 0;
    gap: 0;
    min-height: auto;
    justify-content: center;
  }

  .logo {
    max-width: 220px;
    margin-bottom: 10px;
  }

  .title {
    font-size: 28px;
    line-height: 38px;
  }

  .subtitle {
    font-size: 20px;
    line-height: 28px;
  }

  .content {
    gap: 16px;
    margin-top: 10px;
  }

  .primary-button {
    height: 40px;
    font-size: 14px;
    padding: 8px 16px;
  }

  .footer {
    padding: 12px 0;
  }

  .footer p {
    font-size: 20px;
    line-height: 30px;
  }
}

/* Mobile Portrait (max-width: 480px) */
@media (max-width: 480px) {
  .landing-page {
    padding: 0;
  }

  .main-container {
    padding: 16px 20px 0;
    gap: 0;
  }

  .logo {
    max-width: 200px;
    margin-bottom: 8px;
  }

  .title {
    font-size: 24px;
    line-height: 32px;
  }

  .subtitle {
    font-size: 18px;
    line-height: 26px;
  }

  .content {
    gap: 14px;
    margin-top: 8px;
  }

  .primary-button {
    height: 38px;
    font-size: 13px;
    padding: 8px 14px;
    width: auto;
    min-width: 130px;
  }

  .footer {
    padding: 10px 0;
  }

  .footer p {
    font-size: 18px;
    line-height: 26px;
  }
}

/* Small Mobile (max-width: 375px) */
@media (max-width: 375px) {
  .landing-page {
    padding: 0;
  }

  .main-container {
    padding: 0 16px;
    gap: 6px;
  }

  .logo {
    max-width: 180px;
    margin-bottom: 6px;
  }

  .title {
    font-size: 20px;
    line-height: 28px;
  }

  .subtitle {
    font-size: 16px;
    line-height: 22px;
  }

  .content {
    gap: 12px;
    margin-top: 6px;
  }

  .primary-button {
    height: 36px;
    font-size: 12px;
    padding: 8px 12px;
    min-width: 110px;
  }

  .footer {
    padding: 8px 0;
  }

  .footer p {
    font-size: 16px;
    line-height: 24px;
  }
}

/* Extra Small Mobile (max-width: 320px) */
@media (max-width: 320px) {
  .main-container {
    padding: 12px 12px 0;
    gap: 0;
  }

  .logo {
    max-width: 160px;
    margin-bottom: 5px;
  }

  .title {
    font-size: 18px;
    line-height: 24px;
  }

  .subtitle {
    font-size: 14px;
    line-height: 20px;
  }

  .content {
    gap: 10px;
    margin-top: 5px;
  }

  .primary-button {
    height: 34px;
    font-size: 11px;
    padding: 6px 10px;
    min-width: 100px;
  }

  .footer {
    padding: 6px 0;
  }

  .footer p {
    font-size: 14px;
    line-height: 20px;
  }
}

.login-logo {
  width: 120px;
  margin: 0 auto 15px;
}

/* Home page button variants */
.btn-explore-home {
  margin-bottom: 12px;
}

.btn-signup-home {
  background: linear-gradient(135deg, var(--primary-500), var(--primary-600)) !important;
}

.btn-login-home {
  color: var(--primary-600) !important;
  background: #eaeaea !important;
  border: 2px solid var(--primary-500) !important;
}

/* Button responsive adjustments for small screens */
@media (max-width: 480px) {
  .btn-signup-home,
  .btn-login-home {
    font-size: 13px;
    padding: 8px 14px;
    min-width: 120px;
  }
}

@media (max-width: 375px) {
  .btn-signup-home,
  .btn-login-home {
    font-size: 12px;
    padding: 8px 12px;
    min-width: 110px;
  }
}

@media (max-width: 320px) {
  .btn-signup-home,
  .btn-login-home {
    font-size: 11px;
    padding: 6px 10px;
    min-width: 100px;
    width: 100%;
  }
}
/* CSS Variables System */
	:root {
		/* Primary Colors */
		--primary-500: #529B50;
		--primary-600: #428040;
		--primary-700: #326630;
		--primary-400: #6BAF69;
		
		/* Neutral Colors */
		--neutral-900: #1A1A1A;
		--neutral-800: #333333;
		--neutral-700: #4D4D4D;
		--neutral-600: #666666;
		--neutral-500: #808080;
		--neutral-400: #999999;
		--neutral-300: #CCCCCC;
		--neutral-200: #E5E5E5;
		--neutral-100: #F5F5F5;
		--neutral-50: #FAFAFA;
		
		/* Semantic Colors */
		--success: #10B981;
		--error: #EF4444;
		--warning: #F59E0B;
		
		/* Background */
		--bg-primary: #FFFFFF;
		--bg-secondary: #F9FAFB;
		--bg-overlay: rgba(0, 0, 0, 0.4);
		
		/* Shadows */
		--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
		--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
		--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
		--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
		
		/* Border Radius */
		--radius-sm: 4px;
		--radius-md: 8px;
		--radius-lg: 12px;
		--radius-xl: 16px;
		--radius-full: 9999px;
		
		/* Spacing */
		--space-2: 8px;
		--space-3: 12px;
		--space-4: 16px;
		--space-5: 20px;
		--space-6: 24px;
		--space-8: 32px;
		
		/* Transitions */
		--transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
		--transition-base: 300ms cubic-bezier(0.4, 0, 0.2, 1);
		--transition-slow: 500ms cubic-bezier(0.4, 0, 0.2, 1);
	}
	
	/* Animations */
	@keyframes fadeInDown {
		from {
			opacity: 0;
			transform: translateY(-20px);
		}
		to {
			opacity: 1;
			transform: translateY(0);
		}
	}
	
	@keyframes fadeInUp {
		from {
			opacity: 0;
			transform: translateY(20px);
		}
		to {
			opacity: 1;
			transform: translateY(0);
		}
	}
	
	@keyframes scaleIn {
		from {
			opacity: 0;
			transform: scale(0.95);
		}
		to {
			opacity: 1;
			transform: scale(1);
		}
	}
	
	@keyframes slideDown {
		from {
			opacity: 0;
			transform: translateY(-10px);
		}
		to {
			opacity: 1;
			transform: translateY(0);
		}
	}
	
	@keyframes spin {
		to { transform: rotate(360deg); }
	}
	
	label.error{
		color: var(--error);
		font-size: 12px;
	}
	
	/* Focus visible for accessibility */
	*:focus-visible {
		outline: 2px solid var(--primary-500);
		outline-offset: 2px;
	}
	
	/* 80/20 Split Layout Styles - inherits from .main-container above */
	/* .main-container properties merged into main definition */
	
	.welcome_content {
		width: 100%;
		transition: width var(--transition-slow), margin var(--transition-slow);
		padding: 40px;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		flex: 1;
		margin-left: 0;
	}
	
	.welcome_content.shrink {
		width: calc(100% - 400px);
		margin-left: 0;
		margin-right: auto;
	}
	
	/* Enhanced Logo */
	.logo {
		animation: fadeInDown 0.6s ease-out both;
	}
	
	/* Enhanced Title */
	.title {
		animation: fadeInDown 0.6s ease-out 0.2s both;
		letter-spacing: -0.02em;
		color: var(--neutral-900);
	}
	
	/* Enhanced Subtitle */
	.subtitle {
		animation: fadeInUp 0.6s ease-out 0.4s both;
		color: var(--neutral-700);
	}
	
	/* Enhanced Primary Button */
	.primary-button {
		background: linear-gradient(135deg, var(--primary-500), var(--primary-600));
		border-radius: var(--radius-md);
		box-shadow: var(--shadow-md);
		transition: all var(--transition-base);
		position: relative;
		overflow: hidden;
		animation: scaleIn 0.6s ease-out 0.6s both;
	}
	
	.primary-button::before {
		content: '';
		position: absolute;
		top: 0;
		left: -100%;
		width: 100%;
		height: 100%;
		background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
		transition: left 0.5s;
	}
	
	.primary-button:hover {
		transform: translateY(-2px);
		box-shadow: var(--shadow-lg);
		background: linear-gradient(135deg, var(--primary-600), var(--primary-700));
	}
	
	.primary-button:hover::before {
		left: 100%;
	}
	
	.primary-button:active {
		transform: translateY(0);
		box-shadow: var(--shadow-sm);
	}
	
	/* Auth Backdrop Overlay - Removed blur effect */
	.auth-backdrop {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: transparent;
		opacity: 0;
		visibility: hidden;
		transition: all var(--transition-slow);
		z-index: 999;
		pointer-events: none;
	}
	
	.auth-backdrop.show {
		opacity: 1;
		visibility: visible;
	}
	
	/* Enhanced Auth Form Container */
	.auth-form-container {
		position: fixed;
		right: -420px;
		top: 0;
		width: 400px;
		height: 100vh;
		background: var(--bg-primary);
		box-shadow: var(--shadow-xl);
		transition: right var(--transition-slow) cubic-bezier(0.68, -0.55, 0.265, 1.55), opacity var(--transition-slow);
		opacity: 0;
		z-index: 1000;
		overflow-y: auto;
		padding: var(--space-8) var(--space-6);
	}
	
	.auth-form-container.show {
    right: 0;
    opacity: 1;
    box-shadow: -13px 0px 20px rgba(0, 0, 0, 0.08);
    border-radius: 0 8px 8px 0;
}
	
	/* Custom Scrollbar */
	.auth-form-container::-webkit-scrollbar {
		width: 8px;
	}
	
	.auth-form-container::-webkit-scrollbar-track {
		background: var(--neutral-100);
	}
	
	.auth-form-container::-webkit-scrollbar-thumb {
		background: var(--neutral-300);
		border-radius: var(--radius-full);
	}
	
	.auth-form-container::-webkit-scrollbar-thumb:hover {
		background: var(--neutral-400);
	}
	
	/* Enhanced Close Button */
	.auth-close-btn {
		position: absolute;
		top: var(--space-4);
		right: var(--space-4);
		width: 40px;
		height: 40px;
		background: var(--neutral-100);
		border: none;
		border-radius: var(--radius-full);
		font-size: 24px;
		cursor: pointer;
		color: var(--neutral-600);
		display: flex;
		align-items: center;
		justify-content: center;
		transition: all var(--transition-base);
		z-index: 10;
	}
	
	.auth-close-btn:hover {
		background: var(--neutral-200);
		color: var(--neutral-900);
		transform: rotate(90deg);
	}
	
	.auth-close-btn:active {
		transform: rotate(90deg) scale(0.95);
	}
	
	/* Footer - No blur effect */
	footer.footer {
		transition: none;
	}
	
	footer.footer.shrink {
		/* No blur effect applied */
	}
	
	/* Form Styling */
	.auth-form-container .form_box {
		background: transparent;
		box-shadow: none;
		padding: 0;
	}
	
	.auth-form-container .form_head {
		text-align: center;
		margin-bottom: var(--space-6);
	}
	
	.auth-form-container .gnb_logo img {
		max-width: 60px;
		margin-bottom: var(--space-3);
	}
	
	.auth-form-container h2,
	.auth-form-container h3 {
		font-size: 22px;
		color: var(--neutral-900);
		margin: var(--space-3) 0;
		font-weight: 600;
	}
	
	.auth-form-container .form_field {
		margin-bottom: var(--space-4);
	}
	
	.auth-form-container .form_label {
		display: block;
		margin-bottom: var(--space-2);
		color: var(--neutral-700);
		font-size: 14px;
		font-weight: 500;
	}
	
	/* Enhanced Input Fields */
	.auth-form-container .form_input {
		width: 100%;
		padding: var(--space-3) var(--space-4);
		border: 2px solid var(--neutral-200);
		border-radius: var(--radius-md);
		font-size: 14px;
		color: var(--neutral-900);
		background: var(--bg-primary);
		transition: all var(--transition-base);
		outline: none;
		box-sizing: border-box;
	}
	
	.auth-form-container .form_input:hover {
		border-color: var(--neutral-300);
	}
	
	.auth-form-container .form_input:focus {
		border-color: var(--primary-500);
		box-shadow: 0 0 0 3px rgba(82, 155, 80, 0.1);
		background: var(--bg-primary);
	}
	
	.auth-form-container .form_input::placeholder {
		color: var(--neutral-400);
	}
	
	/* Input Group with Icons */
	.auth-form-container .form_input_group {
		position: relative;
	}
	
	.auth-form-container .form_input_group .icon {
		position: absolute;
		right: var(--space-3);
		top: 50%;
		transform: translateY(-50%);
		color: var(--neutral-400);
		cursor: pointer;
		transition: color var(--transition-base);
	}
	
	.auth-form-container .form_input_group .icon:hover {
		color: var(--primary-500);
	}
	
	/* Enhanced Buttons */
	.auth-form-container .gnb-btn {
		width: 100%;
		padding: var(--space-3) var(--space-4);
		border: none;
		border-radius: var(--radius-md);
		font-size: 14px;
		font-weight: 500;
		cursor: pointer;
		transition: all var(--transition-base);
		position: relative;
		overflow: hidden;
		margin-bottom: var(--space-3);
	}
	
	.auth-form-container .gnb-btn-primary {
		background: linear-gradient(135deg, var(--primary-500), var(--primary-600));
		color: #fff;
		box-shadow: var(--shadow-md);
	}
	
	.auth-form-container .gnb-btn-primary:hover {
		transform: translateY(-1px);
		box-shadow: var(--shadow-lg);
		background: linear-gradient(135deg, var(--primary-600), var(--primary-700));
	}
	
	.auth-form-container .gnb-btn-primary:active {
		transform: translateY(0);
		box-shadow: var(--shadow-sm);
	}
	
	/* Loading State */
	.auth-form-container .gnb-btn.loading {
		pointer-events: none;
		opacity: 0.7;
	}
	
	.auth-form-container .gnb-btn.loading::after {
		content: '';
		position: absolute;
		width: 16px;
		height: 16px;
		top: 50%;
		left: 50%;
		margin: -8px 0 0 -8px;
		border: 2px solid rgba(255, 255, 255, 0.3);
		border-top-color: #fff;
		border-radius: 50%;
		animation: spin 0.6s linear infinite;
	}
	
	/* Google OAuth Button */
	.auth-form-container .gnb-btn-default {
		background: var(--bg-primary);
		border: 2px solid var(--neutral-200);
		color: var(--neutral-700);
		display: flex;
		align-items: center;
		justify-content: center;
		gap: var(--space-2);
	}
	
	.auth-form-container .gnb-btn-default:hover {
		background: var(--neutral-50);
		border-color: var(--neutral-300);
		transform: translateY(-1px);
		box-shadow: var(--shadow-md);
	}
	
	.auth-form-container .gnb-btn-default svg {
		flex-shrink: 0;
	}
	
	/* Links */
	.auth-form-container .forgot_link,
	.auth-form-container .btn-right-signup,
	.auth-form-container .btn-right-login {
		color: var(--primary-500);
		cursor: pointer;
		font-size: 13px;
		font-weight: 500;
		transition: color var(--transition-base);
	}
	
	.auth-form-container .forgot_link:hover,
	.auth-form-container .btn-right-signup:hover,
	.auth-form-container .btn-right-login:hover {
		color: var(--primary-600);
		text-decoration: underline;
	}
	
	/* Enhanced Alert Messages */
	.auth-form-container .gnb-alert {
		padding: var(--space-3) var(--space-4);
		border-radius: var(--radius-md);
		font-size: 13px;
		margin-bottom: var(--space-4);
		animation: slideDown 0.3s ease-out;
		display: flex;
		align-items: flex-start;
		gap: var(--space-2);
	}
	
	.auth-form-container .gnb-alert-warning {
		background: #FEF3C7;
		border: 1px solid #FCD34D;
		color: #92400E;
	}
	
	.auth-form-container .gnb-alert-success {
		background: #D1FAE5;
		border: 1px solid #6EE7B7;
		color: #065F46;
	}
	
	.auth-form-container .gnb-alert-danger {
		background: #FEE2E2;
		border: 1px solid #FECACA;
		color: #991B1B;
	}
	
	.form_box {
		width: 100%;
		margin: var(--space-5) auto 0;
	}
	
	/* Password Input Wrapper */
	.password-input-wrapper {
		position: relative;
		display: flex;
		align-items: center;
	}
	
	.password-input-wrapper .form_input {
		padding-right: 45px;
	}
	
	.password-toggle {
		position: absolute;
		right: 12px;
		top: 50%;
		transform: translateY(-50%);
		background: none;
		border: none;
		cursor: pointer;
		padding: 4px;
		display: flex;
		align-items: center;
		justify-content: center;
		color: var(--neutral-500);
		transition: color var(--transition-base);
		border-radius: var(--radius-sm);
	}
	
	.password-toggle:hover {
		color: var(--neutral-700);
		background: var(--neutral-100);
	}
	
	.password-toggle:focus {
		outline: 2px solid var(--primary-500);
		outline-offset: 2px;
		color: var(--neutral-700);
	}
	
	/* Remember Me Checkbox */
	.remember-me-label {
		display: flex;
		align-items: center;
		gap: 8px;
		cursor: pointer;
		font-size: 14px;
		color: var(--neutral-700);
		user-select: none;
	}
	
	.remember-me-checkbox {
		width: 18px;
		height: 18px;
		cursor: pointer;
		accent-color: var(--primary-500);
		border-radius: var(--radius-sm);
	}
	
	.remember-me-checkbox:focus {
		outline: 2px solid var(--primary-500);
		outline-offset: 2px;
	}
	
	/* Field-Level Error Messages */
	.field-error {
		color: #DC2626;
		font-size: 12px;
		margin-top: 6px;
		display: flex;
		align-items: center;
		gap: 4px;
		animation: slideDown 0.2s ease-out;
	}
	
	.field-error::before {
		content: '⚠';
		font-size: 14px;
	}
	
	.form_field .form_input.error {
		border-color: #DC2626;
		background: #FEF2F2;
	}
	
	.form_field .form_input.error:focus {
		border-color: #DC2626;
		box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1);
	}
	
	/* Enhanced Focus Styles for Accessibility */
	.auth-form-container input:focus,
	.auth-form-container button:focus,
	.auth-form-container a:focus,
	.auth-form-container .forgot_link:focus,
	.auth-form-container .btn-right-signup:focus,
	.auth-form-container .btn-right-login:focus {
		outline: 2px solid var(--primary-500);
		outline-offset: 2px;
	}
	
	.auth-form-container .gnb-btn:focus {
		outline: 2px solid var(--primary-600);
		outline-offset: 2px;
	}
	
	/* Make clickable spans keyboard accessible */
	.forgot_link,
	.btn-right-signup,
	.btn-right-login {
		display: inline-block;
		outline: none;
	}
	
	.forgot_link:focus-visible,
	.btn-right-signup:focus-visible,
	.btn-right-login:focus-visible {
		outline: 2px solid var(--primary-500);
		outline-offset: 2px;
		border-radius: 2px;
	}
	
	/* Improved Color Contrast for Accessibility */
	.auth-form-container .login-modal-subtitle {
		color: var(--neutral-600); /* Better contrast than light grey */
	}
	
	.auth-form-container .form_label {
		color: var(--neutral-700); /* Stronger contrast */
		font-weight: 500;
	}
	
	/* Loading Button State */
	.auth-form-container .gnb-btn.loading {
		position: relative;
		color: transparent;
		pointer-events: none;
	}
	
	.auth-form-container .gnb-btn.loading::before {
		content: '';
		position: absolute;
		width: 18px;
		height: 18px;
		top: 50%;
		left: 50%;
		margin: -9px 0 0 -9px;
		border: 2px solid rgba(255, 255, 255, 0.3);
		border-top-color: #fff;
		border-radius: 50%;
		animation: spin 0.6s linear infinite;
	}
	
	/* Responsive Design */
	@media (max-width: 1024px) {
		.auth-form-container {
			width: 350px;
			right: -370px;
			padding: var(--space-6) var(--space-5);
		}
		
		.auth-form-container.show {
			right: 0;
		}
		
		.welcome_content {
			padding: 20px;
		}
		
		.welcome_content.shrink {
			width: calc(100% - 350px);
			margin-right: auto;
		}
	}
	
	@media (max-width: 768px) {
		.auth-form-container {
			position: fixed;
			width: 100%;
			max-width: 100%;
			height: auto;
			max-height: 85vh;
			right: 0 !important;
			left: 0;
			bottom: -100%;
			top: auto;
			border-radius: var(--radius-xl) var(--radius-xl) 0 0;
			transition: bottom var(--transition-slow) cubic-bezier(0.68, -0.55, 0.265, 1.55), opacity var(--transition-slow);
			padding: 32px var(--space-5) var(--space-6);
			overflow-y: auto;
			-webkit-overflow-scrolling: touch;
			box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.15);
		}
		
		.auth-form-container.show {
			bottom: 0;
			right: 0 !important;
			opacity: 1;
		}
		
		/* Mobile pull handle */
		.auth-form-container::before {
			content: '';
			position: absolute;
			top: 12px;
			left: 50%;
			transform: translateX(-50%);
			width: 40px;
			height: 4px;
			background: var(--neutral-300);
			border-radius: var(--radius-full);
		}
		
		.welcome_content {
			padding: 20px;
		}
		
		.welcome_content.shrink {
			width: 100%;
		}
		
		.auth-form-container h2 {
			font-size: 20px;
		}
		
		.auth-form-container .form_input {
			padding: 10px 14px;
			font-size: 14px;
		}
		
		.auth-form-container .gnb-btn {
			padding: 10px 14px;
			font-size: 14px;
		}
	}
	
	/* Reduced motion for accessibility */
	@media (prefers-reduced-motion: reduce) {
		*,
		*::before,
		*::after {
			animation-duration: 0.01ms !important;
			animation-iteration-count: 1 !important;
			transition-duration: 0.01ms !important;
		}
	}