/* ====== Layout ====== */

@font-face {
    font-family: 'Paperozi';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-5Medium.woff2') format('woff2');
    font-weight: 500;
    font-display: swap;
}

*{
	font-family: 'Paperozi';
}

.sl-wrap{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
}

.sl-card{
  width:min(560px, 94vw);
  border-radius:24px;
  padding:30px 26px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  background: linear-gradient(180deg, rgba(14,18,30,.72), rgba(8,10,18,.62));
  border:1px solid rgba(255,255,255,.10);
  box-shadow: 0 18px 60px rgba(0,0,0,.55);
  position:relative;
  overflow:hidden;
}

/* subtle glow */
.sl-card:before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(600px 240px at 20% 0%, rgba(120,255,236,.12), transparent 60%),
    radial-gradient(520px 240px at 90% 30%, rgba(120,155,255,.12), transparent 60%);
  pointer-events:none;
}

.sl-title{
  margin:0;
  font-family:Pretendard, sans-serif;
  font-weight:900;
  letter-spacing:.08em;
  color:#fff;
  text-align:center;
  position:relative;
  z-index:1;
}

.sl-sub{
  margin:10px 0 18px;
  text-align:center;
  color:rgba(255,255,255,.74);
  font-weight:700;
  position:relative;
  z-index:1;
}

/* ====== Server Select ====== */
.sl-servers{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin: 12px 0 16px;
  position:relative;
  z-index:1;
}

.sl-server{
  border-radius:16px;
  padding:14px 12px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color:#fff;
  cursor:pointer;
  text-align:left;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, background .15s ease;
}

.sl-server:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.08);
}

.sl-server.is-active{
  border-color: rgba(120,255,236,.75);
  box-shadow: 0 0 0 3px rgba(120,255,236,.16), 0 14px 40px rgba(0,0,0,.35);
}

.sl-server__name{
  font-weight:900;
  letter-spacing:.04em;
}
.sl-server__desc{
  margin-top:4px;
  font-size:12px;
  color:rgba(255,255,255,.70);
}

/* ====== Form (Input) ====== */
.sl-form{
  margin-top:10px;
  position:relative;
  z-index:1;
}


/* ====== Input Upgrade ====== */
.sl-input{
  width:100%;
  height:54px;                 /* 더 묵직하게 */
  border-radius:16px;
  padding:0 16px;
  outline:none;

  color:#fff;
  font-weight:800;
  letter-spacing:.02em;

  background:
    linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.05)); /* 더 선명한 유리감 */
  border:1px solid rgba(255,255,255,.22);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),   /* 위쪽 하이라이트 */
    inset 0 -10px 24px rgba(0,0,0,.25),    /* 안쪽 깊이감 */
    0 14px 40px rgba(0,0,0,.35);           /* 떠있는 느낌 */

  transition: border-color .15s ease, box-shadow .15s ease, transform .12s ease, background .15s ease;
}

.sl-input::placeholder{
  color: rgba(255,255,255,.55);
  font-weight:700;
}

.sl-input:hover{
  transform: translateY(-1px);
  border-color: rgba(255,255,255,.30);
  background:
    linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.06));
}

.sl-input:focus{
  border-color: rgba(120,255,236,.85);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    0 0 0 4px rgba(120,255,236,.16),
    0 18px 58px rgba(0,0,0,.45);
  background:
    linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.07));
}

/* 라벨도 “있어보이게” */
.sl-label{
  display:block;
  font-weight:900;
  color:rgba(255,255,255,.86);
  margin: 0 0 8px;
  letter-spacing:.04em;
  font-size:13px;
  text-transform: uppercase;
}

/* 필드 간격 조금 더 */
.sl-field{ margin-top:12px; }


/* row: remember + etc */
.sl-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top:10px;
}

.sl-check{
  display:flex;
  align-items:center;
  gap:8px;
  color:rgba(255,255,255,.72);
  font-weight:800;
  user-select:none;
}

.sl-check input{
  width:16px;
  height:16px;
  accent-color: rgb(120,255,236);
}

/* ====== Primary Button ====== */
.sl-btn{
  width:100%;
  height:48px;
  border-radius:14px;
  margin-top:14px;
  border:0;
  cursor:pointer;
  font-weight:900;
  letter-spacing:.06em;
  color:#041018;
  background: linear-gradient(90deg, rgba(120,255,236,.95), rgba(120,155,255,.95));
  box-shadow: 0 16px 44px rgba(0,0,0,.35);
  transition: transform .15s ease, filter .15s ease, box-shadow .15s ease;
}

.sl-btn:hover{
  transform: translateY(-1px);
  filter: brightness(1.05);
  box-shadow: 0 18px 52px rgba(0,0,0,.42);
}

.sl-btn:active{
  transform: translateY(0);
  filter: brightness(.98);
}

.sl-btn:disabled{
  opacity:.55;
  cursor:not-allowed;
  transform:none;
}

/* ====== Bottom Links (Home / Sign up) ====== */
.sl-links{
  display:flex;
  gap:10px;
  margin-top:14px;
  position:relative;
  z-index:1;
}

.sl-link{
  width: 100%;
  height:42px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:14px;
  text-decoration:none;
  font-weight:900;
  letter-spacing:.02em;
  color:rgba(255,255,255,.86);
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);
  transition: background .15s ease, border-color .15s ease, transform .15s ease;
}

.sl-link:hover{
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.22);
  transform: translateY(-1px);
}

.sl-link--primary{
  border-color: rgba(120,255,236,.40);
  box-shadow: 0 0 0 3px rgba(120,255,236,.10);
}

/* ====== Error ====== */
.sl-err{
  margin-top:14px;
  padding:10px 12px;
  border-radius:14px;
  background: rgba(255, 60, 90, .12);
  border:1px solid rgba(255, 60, 90, .30);
  color:#fff;
  font-weight:900;
  text-align:center;
  position:relative;
  z-index:1;
}

/* ====== Mobile ====== */
@media (max-width:520px){
  .sl-servers{ grid-template-columns:1fr; }
  .sl-card{ padding:26px 18px; border-radius:22px; }
  .sl-links{ flex-direction:column; }
  .sl-link{ width:100%; }
}


/* 필드 간격 */
.sl-field{ margin-top:14px; }
.sl-label{
  display:block;
  margin:0 0 8px;
  font-weight:900;
  letter-spacing:.06em;
  font-size:12px;
  color:rgba(255,255,255,.86);
}

.sl-input-wrap{ position:relative; }

/* 아이콘 */
.sl-ico{
  position:absolute;
  left:14px;
  top:50%;
  transform:translateY(-50%);
  opacity:.9;
  pointer-events:none;
}

/* 인풋 */
.sl-input{
  width:100%;
  height:56px;
  border-radius:16px;
  padding:0 44px 0 46px;
  outline:none;

  color:#fff;
  font-weight:800;
  letter-spacing:.02em;

  background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.06));
  border:1px solid rgba(255,255,255,.22);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    inset 0 -12px 26px rgba(0,0,0,.26),
    0 16px 48px rgba(0,0,0,.38);

  transition: border-color .15s ease, box-shadow .15s ease, transform .12s ease, background .15s ease;
}

.sl-input::placeholder{
  color: rgba(255,255,255,.55);
  font-weight:700;
}

.sl-input:hover{
  transform: translateY(-1px);
  border-color: rgba(255,255,255,.30);
}

.sl-input:focus{
  border-color: rgba(120,255,236,.85);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    0 0 0 4px rgba(120,255,236,.16),
    0 20px 64px rgba(0,0,0,.48);
}

/* 비번 보기 버튼 */
.sl-eye{
  position:absolute;
  right:12px;
  top:50%;
  transform:translateY(-50%);
  width:34px;
  height:34px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
  color:#fff;
  cursor:pointer;
}
.sl-eye:hover{ background: rgba(255,255,255,.10); }

/* 체크박스 */
.sl-remember{ margin-top:14px; }
.sl-check{
  display:flex;
  align-items:center;
  gap:10px;
  cursor:pointer;
  user-select:none;
}
.sl-check input{ position:absolute; opacity:0; pointer-events:none; }
.sl-check__box{
  width:20px; height:20px;
  border-radius:6px;
  border:1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.06);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
}
.sl-check__txt{
  color: rgba(255,255,255,.80);
  font-weight:800;
}
.sl-check input:checked + .sl-check__box{
  border-color: rgba(120,255,236,.85);
  box-shadow: 0 0 0 3px rgba(120,255,236,.14);
  background: rgba(120,255,236,.10);
}


/* ===== Remember me (checkbox) ===== */
.sl-remember{ margin-top: 10px; }

.sl-check{
  display:flex;
  align-items:center;
  gap:10px;
  cursor:pointer;
  user-select:none;
}

.sl-check input{
  /* 실제 체크박스는 접근성 유지한 채로 숨김 */
  position:absolute;
  opacity:0;
  width:1px; height:1px;
}

.sl-check__box{
  width:18px;
  height:18px;
  border-radius:6px;
  border:1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.06);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.25);
  display:inline-grid;
  place-items:center;
  transition: box-shadow .15s ease, border-color .15s ease, transform .15s ease, background .15s ease;
}

.sl-check__box::after{
  content:"";
  width:9px;
  height:5px;
  border-left:2px solid rgba(255,255,255,.95);
  border-bottom:2px solid rgba(255,255,255,.95);
  transform: rotate(-45deg) translateY(-1px);
  opacity:0;
  transition: opacity .12s ease;
}

.sl-check input:checked + .sl-check__box{
  background: rgba(120,255,236,.18);
  border-color: rgba(120,255,236,.70);
  box-shadow:
    0 0 0 3px rgba(120,255,236,.18),
    0 10px 26px rgba(0,0,0,.35);
}

.sl-check input:checked + .sl-check__box::after{
  opacity:1;
}

.sl-check__txt{
  color: rgba(255,255,255,.78);
  font-weight:800;
  letter-spacing:.02em;
}

/* 키보드 포커스(탭) */
.sl-check input:focus-visible + .sl-check__box{
  box-shadow:
    0 0 0 4px rgba(163,107,255,.22),
    0 0 0 1px rgba(255,255,255,.18) inset;
}