.element {
  display: flex;
  flex-direction: column;
  min-height: 100vh; /* make full-height but flexible */
  align-items: flex-start;
  gap: 10px;
  padding: 24px; /* default small padding, desktop enlarged by media queries */
  position: relative;
  background-color: #1c233f;
  box-sizing: border-box;
}

.element .layout-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  /* max-width: 1720px;  */
  min-height: 95vh;
  align-items: center;
  padding: 170px 0 0; /* desktop spacing preserved, reduced on smaller screens by mq */
  position: relative;
  background-color: #dfe3ea;
  border-radius: 40px 0 0 40px;
  overflow: hidden;
  box-sizing: border-box;
}

.element .login-card {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 56px 90px;
  position: relative;
  flex: 0 0 auto;
  background-color: #ffffff;
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid;
  border-color: #e5e5ec;
  box-shadow: 0px 4px 20px #0000000f;
  z-index: 2;
  width: 100%;
  max-width: 720px; /* keeps card a comfortable reading width */
  box-sizing: border-box;
}

.element .frame {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 460px;
  align-items: center;
  gap: 48px;
  position: relative;
  box-sizing: border-box;
}

.element .frame .login-form{
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 36px;
  position: relative;
  box-sizing: border-box;
}

.element .div {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 400px;
  align-items: center;
  gap: 36px;
  position: relative;
  flex: 0 0 auto;
  box-sizing: border-box;
}

.element .layer {
  position: relative;
  width: 185px;
  height: 36px;
  max-width: 100%;
}

.element .text-wrapper {
  position: relative;
  align-self: stretch;
  font-family: "Pretendard-SemiBold", Helvetica;
  font-weight: 600;
  color: #222222;
  font-size: 40px;
  letter-spacing: 0;
  line-height: 52px;
  word-break: keep-all;
  text-align: center;
}

.element .frame-2 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;
  position: relative;
  align-self: stretch;
  width: 100%; 
  flex: 0 0 auto;
}

.element .frame-3 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.element .frame-4 {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 460px;
  align-items: flex-start;
  gap: 12px;
  position: relative;
  flex: 0 0 auto;
}

.element .component {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 16px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
  background-color: #ffffff;
  border-radius: 8px;
  border: 1px solid;
  border-color: #D4D4D8;
  box-sizing: border-box;
}

.element .component.err{
  border-color: #ee3e3e;
}



.element .div-2 {
  position: relative;
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
}

.element .vector {
  position: absolute;
  width: 47.92%;
  height: 47.92%;
  top: 5.21%;
  left: 26.04%;
}

.element .img {
  position: absolute;
  width: 77.83%;
  height: 35.42%;
  top: 59.38%;
  left: 11.08%;
  max-width: 100%;
}

.element .vector-2 {
  position: absolute;
  width: 100%;
  height: 100%;
  top: -1725.00%;
  left: -3525.00%;
}
 

.element .text-wrapper-2 {
  position: relative;
  width: 100%;
  max-width: 396px;
  margin-top: -1px;
  font-family: "Pretendard-Regular", Helvetica;
  font-weight: 400;
  font-size: 18px;
  letter-spacing: 0;
  line-height: 26px; 
  box-sizing: border-box;
}

/* Hide native input borders and outlines while keeping focus visible via parent styles */
.element input.text-wrapper-2 {
  border: none;
  background: transparent;
  outline: none;
  -webkit-appearance: none;
  width: 100%;
}
.element input.text-wrapper-2:focus {
  outline: none;
  box-shadow: none;
}

.element .icon {
  position: absolute;
  width: 66.67%;
  height: 75.00%;
  top: 9.38%;
  left: 13.54%;
}

.element .frame-5 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.element .frame-6 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  position: relative;
  flex: 0 0 auto;
}

.element .vector-wrapper {
  position: relative;
  width: 24px;
  height: 24px;
  background-color: #253660;
  border-radius: 800px;
}

.element .vector-3 {
  position: absolute;
  width: 50.00%;
  height: 33.33%;
  top: 28.12%;
  left: 19.79%;
}

.element .vector-4 {
  position: absolute; 
  left: 13.54%; 
}

.element .text-wrapper-3 {
  position: relative;
  width: fit-content;
  margin-top: -1.00px;
  font-family: "Pretendard-Regular", Helvetica;
  font-weight: 400;
  color: #54595a;
  font-size: 18px;
  letter-spacing: 0;
  line-height: 26px;
  white-space: nowrap;
}

.element .p {
  position: relative;
  align-self: stretch;
  font-family: "Pretendard-Regular", Helvetica;
  font-weight: 400;
  color: #ee3e3e;
  font-size: 14px;
  letter-spacing: 0;
  line-height: 20px;
}


/* Custom checkbox using SVG background */
.custom-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}
.custom-checkbox .check-input {
  /* visually hide native checkbox but keep it accessible */
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.custom-checkbox .custom-check-box {
  width: 18px;
  height: 18px;
  display: inline-block;
  /* dark circular background similar to original design */
  background-color: #253660;
  border-radius: 50%;
  /* default: no SVG shown (only background color) */
  background-repeat: no-repeat;
  background-position: center;
  background-size: 60% 60%;
}
.custom-checkbox .check-input:focus + .custom-check-box {
  outline-offset: 2px;
}
.custom-checkbox .check-input:checked + .custom-check-box {
  /* when checked, display the SVG check mark on top of the background */
  background-image: url('/images/base/login/vector-9-ed9f19dc48696366f00ce341e7b2f285.svg');
  transform: scale(0.92);
}
.custom-checkbox .custom-label-text {
  font-family: "Pretendard-Regular", Helvetica, sans-serif;
  font-weight: 400;
  color: #54595a;
  font-size: 18px;
}

.element .div-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 15px 24px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
  background-color: var(--variable-collection-111);
  border-radius: 8px;
  box-sizing: border-box;
  min-height: 48px; /* touch target */
}

.element .div-wrapper button { height: 48px; width: 100%; }

.element .text-wrapper-4 {
  position: relative;
  width: fit-content;
  margin-top: -1.00px;
  font-family: "Pretendard-Medium", Helvetica, sans-serif;
  font-weight: 500;
  color: #ffffff;
  font-size: 18px;
  text-align: center;
  letter-spacing: 0;
  line-height: 26px;
  white-space: nowrap;
}

.element .text-wrapper-5 {
  position: relative;
  align-self: stretch;
  font-family: "Pretendard-Regular", Helvetica, sans-serif;
  font-weight: 400;
  color: var(--variable-collection-main);
  font-size: 16px;
  text-align: center;
  letter-spacing: 0;
  line-height: 24px;
  text-decoration: underline;
}

.element .frame-7 {
  display: flex;
  align-items: center;
  justify-content: center; /* center children horizontally */
  gap: 16px; /* spacing between ���� text and phone */
  position: relative;
  align-self: stretch;
  width: 100%;
  height: 46px;
  background-color: #f8f8fa;
  border-radius: 8px;
  overflow: hidden;
  box-sizing: border-box;
  padding: 0 12px; /* small horizontal padding so texts don't touch edges */
}

.element .text-wrapper-6 {
  position: relative;
  font-family: "Pretendard-Regular", Helvetica, sans-serif;
  font-weight: 400;
  color: #222222;
  font-size: 14px;
  letter-spacing: 0;
  line-height: 20px;
  white-space: nowrap;
  margin: 0; /* reset any inherited offsets */
}

.element .text-wrapper-7 {
  position: relative;
  font-family: "Pretendard-Regular", Helvetica, sans-serif;
  font-weight: 400;
  color: #54595a;
  font-size: 14px;
  letter-spacing: 0;
  line-height: 20px;
  white-space: nowrap;
  margin: 0; /* reset any inherited offsets */
}

.element .landscape {
  /* decorative image positioned absolute so it doesn't increase container height */
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  max-width: 1720px;
  height: auto;
  margin-top: -385px;
  z-index: 0;
  pointer-events: none;
  object-fit: cover;
}

/* touch target and button sizing handled in .div-wrapper block above */

/* --- Responsive adjustments --- */
@media (min-width: 1201px) {
  /* Desktop: restore larger left padding like original */
  .element { padding-left: 200px; }
  .layout-container { padding-top: 170px; }
  .element .landscape { margin-top: -385px; }
}

@media (max-width: 1200px) {
  .element {   padding-right: 24px; }
  .layout-container { padding-top: 120px; }
  .element .login-card { max-width: 640px; padding: 40px; }
  .element .text-wrapper { font-size: 36px; line-height:44px; }
  .element .landscape { margin-top: -200px; }
}

@media (max-width: 900px) {
  .element { padding-left: 32px; padding-right: 20px; }
  .layout-container { padding-top: 80px; border-radius: 24px 0 0 24px; }
  .element .login-card { flex-direction: column; align-items: stretch; padding: 28px; max-width: 520px; }
  .element .frame { max-width: 100%; }
  .element .text-wrapper { font-size: 32px; line-height:40px; text-align: center; }
   
  .element .layout-container { 
    padding: 100px 20px 0; 
    border-radius: 0 0 0 0;
    height: 100vh; /* full height on small screens */
  }
}

@media (max-width: 480px) {
  .element { padding: 0px; }
  .layout-container { padding-top: 56px; }
  .element .login-card { padding: 18px; border-radius: 12px; }
  .element .text-wrapper { font-size: 24px; line-height:32px; text-align: center; }
  .element .frame-4, .element .div { max-width: 100%; }
  .element .text-wrapper-2 { font-size: 16px; }
  .element .component { padding: 12px; }
  .element .div-wrapper { padding: 12px; }
}