@charset "EUC-KR";

/* ===== Register Modal ===== */
.register-modal{
  display:none;
  position:fixed;
  inset:0;
  background: rgba(0,0,0,.55);
  z-index:1000;
  padding:16px;                 /* È­¸é °¡ÀåÀÚ¸® ¾ÈÀü ¿©¹é */
  justify-content:center;
  align-items:center;
}
.register-modal.show{
  display:flex;
  animation: fadeIn .25s ease-out;
}

.register-modal-content{
  position:relative;
  width:100%;
  max-width: 560px;             /* ·Î±×Àκ¸´Ù ¾à°£ ³Ð°Ô */
  background: rgb(77 83 97 / 35%);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 3px solid rgba(255,255,255,.7);
  border-radius: 20px;
  padding: 24px 20px;
  box-shadow: 0 24px 60px rgba(0,0,0,.25);
  transform: scale(.96);
  animation: popIn .2s ease-out forwards;

  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
  overflow:hidden;
  box-sizing:border-box;
}

/* ŸÀÌƲ */
.reg-title{
  margin: 0 0 6px;
  font-weight:900;
  font-size: clamp(22px, 4vw, 28px);
  color:#ffffff;
  text-shadow: 0 2px 4px rgba(0,0,0,.2);
  text-align:center;
}

/* ¾È³» ¹Ú½º */
.register-modal-content .regInfo{
  width:100%;
  background: rgb(77 83 97 / 35%);
  border: 2px solid rgba(255,255,255,.75);
  border-radius: 12px;
  padding: 10px 12px;
  box-shadow: inset 0 2px 6px rgba(0,0,0,.05);
}
.register-modal-content .regInfo ul{
  margin:0;
  padding-left:18px;
  font-size: 12px;
  color:#f3f3ff;
}

/* Æû */
#registerPanel{
  width:100%;
  max-width:560px;
}

.insert_info{
  display:block;
  margin:10px 0 6px;
  font-weight:800;
  text-align:left;
}

/* ÇʼöÇ¥½Ã */
.req{
  color: #e60000;
  font-weight: 900;
  text-shadow: 0 0 2px rgba(0,0,0,0.4), 0 0 6px rgba(255,255,255,0.6);
  border: 1px solid rgba(230,0,0,0.6);
  border-radius: 4px;
  padding: 0 4px;
  margin-left: 2px;
  background: rgba(255,230,230,0.25);
}

/* ÀÔ·Â ÁÙ */
.field-row{
  display:flex;
  gap:8px;
  align-items:center;
}

/* ÀÎDz */
.sec-label{
  flex: 1 1 auto;
  width: 100%;
  height: 44px;
  border-radius: 12px;
  border: 2px solid rgba(0,0,0,.1);
  padding: 0 12px;
  font-size: 15px;
  background: #fff;
  box-sizing: border-box;
}

/* ¹Ì´Ï ¹öÆ° */
.btn.mini{
  flex:0 0 auto;
  height:44px;
  padding:0 14px;
  border-radius:12px;
  background:#fff;
  border:2px solid rgba(0,0,0,.1);
  font-weight:800;
  cursor:pointer;
  box-shadow:0 3px 6px rgba(0,0,0,.12);
}

/* CTA */
.register-modal-content .cta-wrap{
  width:100%;
  display:flex;
  justify-content:center;
  margin-top: 8px;
}
.register-modal-content .btn.cta{
  width:100%;
  max-width: 320px;
}

/* Á¼Àº È­¸é */
@media (max-width: 360px){
  .register-modal{ padding:12px; }
  .register-modal-content{ padding:18px 14px; }
}

/* °ø¿ë ¾Ö´Ï¸ÞÀ̼Ç(ȸ¿ø°¡ÀÔ ¸ð´Þ¿¡¼­ »ç¿ë) */
@keyframes fadeIn{ from{opacity:0} to{opacity:1} }
@keyframes popIn{ from{transform:scale(.92); opacity:0} to{transform:scale(1); opacity:1} }

/* ºñ¹ø input Æø º¸Á¤(ȸ¿ø°¡ÀÔ Æû¿¡¼­) */
#password,
#confirm_password{
  width: 100%;
  display: block;
}

/* ===== Register ÀÔ·Â ÅؽºÆ® Ä÷¯ °íÁ¤ ===== */
.register-modal-content input[type="text"],
.register-modal-content input[type="password"],
.register-modal-content input[type="email"]{
  color: #17324a !important;
  caret-color: #17324a;
  background: #fff;
}
.register-modal-content input::placeholder{
  color: rgba(23, 50, 74, 0.55);
}
.register-modal-content input:-webkit-autofill{
  -webkit-text-fill-color: #17324a !important;
  box-shadow: 0 0 0px 1000px #fff inset;
  transition: background-color 9999s ease-out 0s;
}

/* ===== Register: Existing User ===== */
.existing-user-row{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:10px;
  margin: 6px 0 10px;
  padding: 10px 12px;
  background: rgb(77 83 97 / 28%);
  border: 2px solid rgba(255,255,255,.65);
  border-radius: 12px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: inset 0 2px 6px rgba(0,0,0,.05);
  box-sizing: border-box;
}
.existing-user-row .insert_info{
  margin:0;
  font-weight:800;
  color:#fff;
  display:flex;
  align-items:center;
  gap:8px;
}
.existing-user-row input[type="checkbox"]{
  appearance: none;
  width:18px;
  height:18px;
  border: 2px solid rgba(255,255,255,.9);
  border-radius: 4px;
  background: rgba(255,255,255,.12);
  display:inline-block;
  position:relative;
  cursor:pointer;
  transition: all .15s ease;
}
.existing-user-row input[type="checkbox"]:checked{
  background: linear-gradient(135deg, rgba(255,255,255,.95), rgba(255,255,255,.75));
  border-color: rgba(255,255,255,1);
  box-shadow: 0 0 0 3px rgba(255,255,255,.15);
}
.existing-user-row input[type="checkbox"]:checked::after{
  content:"";
  position:absolute;
  inset:0;
  background: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 10.5l3.5 3.5L15 7.5' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px 12px no-repeat;
  filter: drop-shadow(0 1px 0 rgba(0,0,0,.25));
}

/* ÀΰÔÀÓ °èÁ¤ È®ÀÎ ¹Ú½º */
.existing-user-box{
  width:100%;
  margin-top: 6px;
  background: rgb(77 83 97 / 35%);
  border: 2px solid rgba(255,255,255,.75);
  border-radius: 12px;
  padding: 12px;
  box-shadow: inset 0 2px 6px rgba(0,0,0,.05);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);

  /* µîÀå ¾Ö´Ï¸ÞÀÌ¼Ç */
  opacity:0;
  transform: translateY(4px);
  animation: exBoxIn .18s ease-out forwards;
}
.existing-user-box .insert_info{
  margin: 0 0 8px;
  font-weight:800;
  color:#fff;
}
.existing-user-box .cta-wrap{
  display:flex;
  justify-content:flex-end;
  margin-top: 2px;
}
.existing-user-box .hint{
  margin: 8px 2px 0;
  font-size: 12px;
  color:#f0f2ff;
  opacity:.9;
}

@keyframes exBoxIn{
  to{ opacity:1; transform: translateY(0); }
}

/* ¿¡·¯ ¸Þ½ÃÁö */
.error-message{
  margin-top:6px;
  font-size:12px;
  color:#ffe3e3;
  text-shadow: 0 1px 0 rgba(0,0,0,.2);
}

/* Á¼Àº È­¸é¿¡¼­ row ¡æ column */
@media (max-width: 420px){
  .field-row{
    flex-direction:column;
    align-items:stretch;
    gap:8px;
  }
  .btn.mini{
    width:100%;
    text-align:center;
  }
}