* { box-sizing: border-box; }

body{
  margin:0;
  min-height:100vh;
  background: var(--bg-body);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans KR", sans-serif;
  color: var(--color-text-primary);
}

.hidden{ display:none !important; }

.srOnly{
  position:absolute;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);
  white-space:nowrap;border:0;
}

.loginCard{
  width: 100%;
  min-height: 100vh;
  padding: 42px 52px 120px;
}

.loginCard__header{
  display:flex;
  align-items:center;
  gap: 18px;
}

.loginCard__avatar{
  width: 68px;
  height: 68px;
  border-radius: 999px;
  display:grid;
  place-items:center;
  background: color-mix(in srgb, var(--color-surface-1) 70%, white);
  border: 2px solid color-mix(in srgb, var(--color-border) 70%, transparent);
  color: color-mix(in srgb, var(--color-text-secondary) 75%, transparent);
}

.loginCard__avatar i{ font-size: 30px; }

.loginCard__title{
  margin:0;
  font-size: 64px;
  font-weight: 900;
  letter-spacing: -1px;
}

.loginCard__chat{
  margin-top: 26px;
  display:flex;
  flex-direction:column;
  gap: 14px;
  max-width: 520px;
}

.bubble{
  width: fit-content;
  max-width: 520px;
  padding: 18px 22px;
  border-radius: 28px;
  border: 1px solid color-mix(in srgb, var(--color-border) 70%, transparent);
  background: color-mix(in srgb, var(--bg-card) 85%, white);
  box-shadow: 0 10px 22px rgba(0,0,0,0.08);
}

.bubble__text{
  margin:0;
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -0.6px;
  color: var(--color-text-primary);
}

.bubble:first-child .bubble__text{
  font-size: 32px;
}

.loginCard__time{
  margin-top: 8px;
  font-size: 18px;
  font-weight: 700;
  color: color-mix(in srgb, var(--color-text-secondary) 70%, transparent);
}

.loginCard__form{
  position: fixed;
  right: 40px;
  bottom: 34px;
  display:flex;
  justify-content:flex-end;
}

#login-form{
  --h: 86px;
  --pad: 14px;
  --btn: 64px;

  width: min(760px, 60vw);
  height: var(--h);

  display:flex;
  align-items:center;
  padding: var(--pad);
  gap: 12px;

  border-radius: 999px;
  border: 0;
  background: color-mix(in srgb, var(--color-surface-1) 55%, white);

  box-shadow:
    0 18px 36px rgba(0,0,0,0.12),
    inset 0 1px 0 rgba(255,255,255,0.60);
}

#login-form input{
  flex: 1;
  height: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  padding: 0 10px 0 18px;

  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.4px;
  color: var(--color-text-primary);
}

#login-form input::placeholder{
  color: color-mix(in srgb, var(--color-text-secondary) 60%, transparent);
  font-weight: 800;
}

#login-form button{
  width: var(--btn);
  height: var(--btn);
  border-radius: 999px;
  border: 0;
  cursor:pointer;

  display:grid;
  place-items:center;
  color:#fff;

  background: linear-gradient(180deg,
    color-mix(in srgb, var(--color-primary) 70%, white) 0%,
    var(--color-primary) 100%
  );

  box-shadow:
    0 14px 30px rgba(0,0,0,0.18),
    inset 0 1px 0 rgba(255,255,255,0.22);
}

#login-form button i{
  font-size: 26px;
  transform: translate(1px, -1px);
}

#login-form:focus-within{
  box-shadow:
    0 18px 36px rgba(0,0,0,0.14),
    0 0 0 6px color-mix(in srgb, var(--color-accent) 20%, transparent),
    inset 0 1px 0 rgba(255,255,255,0.60);
}

@media (max-width: 720px){
  .loginCard{ padding: 28px 20px 120px; }
  .loginCard__title{ font-size: 42px; }
  .bubble__text{ font-size: 24px; }
  #login-form{ width: min(520px, 92vw); height: 70px; }
  #login-form input{ font-size: 18px; }
  #login-form{ --btn: 52px; --pad: 10px; }
  .loginCard__form{ right: 16px; bottom: 16px; }
}