/* =========================================================
   GYEOP · AUTH
========================================================= */


/* =========================================================
   PAGE
========================================================= */

html,
body {
  min-height: 100%;
}


body {
  background:
    var(--paper);

  color:
    var(--ink);
}


/* =========================================================
   NAV
========================================================= */

.auth-nav {
  position: fixed;

  z-index: 100;

  top: 0;
  left: 0;
  right: 0;

  height: 90px;

  display: flex;

  align-items: center;
  justify-content: space-between;

  padding:
    0
    clamp(26px, 5vw, 80px);

  background:
    rgba(
      243,
      239,
      230,
      0.94
    );

  border-bottom:
    1px solid
    rgba(
      24,
      37,
      31,
      0.07
    );

  backdrop-filter:
    blur(14px);

  -webkit-backdrop-filter:
    blur(14px);
}


.auth-nav__back {
  position: relative;

  color:
    var(--muted);

  font-size:
    11px;

  font-weight:
    400;

  text-decoration:
    none;

  letter-spacing:
    -0.01em;

  transition:
    color
    0.2s
    ease;
}


.auth-nav__back::after {
  content: "";

  position: absolute;

  left: 0;
  right: 100%;
  bottom: -5px;

  height: 1px;

  background:
    var(--ink);

  transition:
    right
    0.25s
    ease;
}


.auth-nav__back:hover {
  color:
    var(--ink);
}


.auth-nav__back:hover::after {
  right: 0;
}


/* =========================================================
   MAIN
========================================================= */

.auth-main {
  min-height:
    100svh;

  padding-top:
    90px;

  display: flex;
}


/* =========================================================
   SHELL
========================================================= */

.auth-shell {
  width: 100%;

  max-width:
    var(--content-width);

  min-height:
    calc(
      100svh - 90px
    );

  margin:
    0 auto;

  padding:
    clamp(70px, 10vh, 120px)
    var(--page-padding);

  display: grid;

  grid-template-columns:
    minmax(0, 1.08fr)
    minmax(380px, 0.72fr);

  gap:
    clamp(
      80px,
      10vw,
      160px
    );

  align-items:
    center;
}


/* =========================================================
   INTRO
========================================================= */

.auth-intro {
  max-width:
    620px;
}


.auth-eyebrow {
  display: block;

  color:
    var(--coral);

  font-family:
    "DM Sans",
    sans-serif;

  font-size:
    9px;

  font-weight:
    600;

  letter-spacing:
    0.18em;
}


.auth-intro h1 {
  margin:
    35px
    0
    0;

  font-size:
    clamp(
      50px,
      5vw,
      78px
    );

  font-weight:
    300;

  line-height:
    1.13;

  letter-spacing:
    -0.06em;

  word-break:
    keep-all;
}


.auth-intro p {
  margin:
    38px
    0
    0;

  color:
    var(--muted);

  font-size:
    15px;

  font-weight:
    300;

  line-height:
    1.9;

  letter-spacing:
    -0.02em;
}


/* =========================================================
   NOTE
========================================================= */

.auth-note {
  display: flex;

  align-items:
    center;

  gap:
    11px;

  margin-top:
    52px;

  padding-top:
    22px;

  border-top:
    1px solid
    var(--border);

  color:
    var(--muted);

  font-size:
    11px;

  font-weight:
    300;
}


.auth-note__dot {
  width: 7px;
  height: 7px;

  flex:
    0 0 7px;

  border-radius:
    50%;

  background:
    var(--coral);
}


/* =========================================================
   PANEL
========================================================= */

.auth-panel {
  width: 100%;

  border-top:
    1px solid
    var(--border-strong);
}


.auth-panel__heading {
  display: flex;

  align-items:
    flex-start;

  gap:
    17px;

  padding:
    26px
    0
    30px;
}


.auth-panel__number {
  padding-top:
    5px;

  color:
    var(--coral);

  font-family:
    "DM Sans",
    sans-serif;

  font-size:
    9px;

  font-weight:
    600;
}


.auth-panel__heading h2 {
  margin: 0;

  font-size:
    21px;

  font-weight:
    400;

  letter-spacing:
    -0.035em;
}


.auth-panel__heading p {
  margin:
    7px
    0
    0;

  color:
    var(--muted);

  font-size:
    11px;

  font-weight:
    300;

  line-height:
    1.6;
}


/* =========================================================
   FORM
========================================================= */

.auth-form {
  width: 100%;
}


/* =========================================================
   FIELD
========================================================= */

.auth-field {
  padding:
    24px
    0;

  border-bottom:
    1px solid
    var(--border);
}


.auth-label {
  display: block;

  margin-bottom:
    14px;

  color:
    var(--muted);

  font-size:
    10px;

  font-weight:
    400;
}


.auth-input {
  display: block;

  width: 100%;

  padding: 0;

  border: 0;

  outline: none;

  background:
    transparent;

  color:
    var(--ink);

  font-family:
    "DM Sans",
    "IBM Plex Sans KR",
    sans-serif;

  font-size:
    clamp(
      20px,
      1.8vw,
      27px
    );

  font-weight:
    400;

  line-height:
    1.4;

  letter-spacing:
    -0.03em;
}


.auth-input::placeholder {
  color:
    rgba(
      24,
      37,
      31,
      0.20
    );

  opacity: 1;
}


/* =========================================================
   ACCOUNT
========================================================= */

.auth-account {
  display: flex;

  align-items:
    center;
  justify-content:
    space-between;

  gap:
    25px;

  padding:
    25px
    0;

  border-top:
    1px solid
    var(--border);

  border-bottom:
    1px solid
    var(--border);
}


.auth-account[hidden] {
  display: none;
}


.auth-account span {
  color:
    var(--muted);

  font-size:
    10px;
}


.auth-account strong {
  font-family:
    "DM Sans",
    sans-serif;

  font-size:
    13px;

  font-weight:
    500;

  letter-spacing:
    -0.02em;
}


/* =========================================================
   MESSAGE
========================================================= */

.auth-message {
  min-height:
    20px;

  margin:
    17px
    0
    0;

  color:
    var(--coral);

  font-size:
    11px;

  font-weight:
    300;

  line-height:
    1.6;
}


.auth-message[data-type="success"] {
  color:
    var(--sage);
}


/* =========================================================
   ACTION
========================================================= */

.auth-action {
  appearance:
    none;

  -webkit-appearance:
    none;

  width: 100%;

  display: flex;

  align-items:
    center;
  justify-content:
    space-between;

  gap:
    20px;

  margin-top:
    24px;

  padding:
    19px
    0;

  border: 0;

  border-top:
    1px solid
    var(--ink);

  border-bottom:
    1px solid
    var(--ink);

  background:
    transparent;

  color:
    var(--ink);

  font-family:
    "IBM Plex Sans KR",
    sans-serif;

  font-size:
    13px;

  font-weight:
    500;

  cursor:
    pointer;

  transition:
    padding
    0.25s
    ease,
    background
    0.25s
    ease,
    color
    0.25s
    ease;
}


.auth-action:hover {
  padding:
    19px
    14px;

  background:
    var(--ink);

  color:
    var(--paper);
}


.auth-action:disabled {
  cursor:
    wait;

  opacity:
    0.55;
}


.auth-action__arrow {
  font-family:
    "DM Sans",
    sans-serif;

  transition:
    transform
    0.25s
    ease;
}


.auth-action:hover
.auth-action__arrow {
  transform:
    translateX(3px)
    translateY(-2px);
}


/* =========================================================
   SECONDARY
========================================================= */

.auth-secondary {
  display: flex;

  align-items:
    center;
  justify-content:
    space-between;

  gap:
    20px;

  margin-top:
    24px;

  color:
    var(--muted);

  font-size:
    10px;

  font-weight:
    300;
}


.auth-secondary a {
  position: relative;

  color:
    var(--ink);

  font-weight:
    400;

  text-decoration:
    none;
}


.auth-secondary a::after {
  content: "";

  position: absolute;

  left: 0;
  right: 0;
  bottom: -4px;

  height: 1px;

  background:
    rgba(
      24,
      37,
      31,
      0.35
    );
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

  .auth-shell {
    grid-template-columns:
      1fr;

    gap:
      70px;

    padding-top:
      80px;

    padding-bottom:
      80px;
  }


  .auth-intro,
  .auth-panel {
    max-width:
      620px;
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 520px) {

  .auth-nav {
    height:
      76px;

    padding:
      0
      22px;
  }


  .auth-main {
    padding-top:
      76px;
  }


  .auth-shell {
    min-height:
      calc(
        100svh - 76px
      );

    padding:
      60px
      22px
      70px;

    gap:
      55px;
  }


  .auth-intro h1 {
    font-size:
      clamp(
        42px,
        13vw,
        54px
      );
  }


  .auth-intro p {
    font-size:
      14px;
  }


  .auth-note {
    margin-top:
      38px;
  }


  .auth-panel__heading {
    padding-bottom:
      22px;
  }


  .auth-field {
    padding:
      21px
      0;
  }


  .auth-input {
    font-size:
      20px;
  }


  .auth-secondary {
    align-items:
      flex-start;

    flex-direction:
      column;

    gap:
      11px;
  }

}