/* =========================================================
   GYEOP · START / ONBOARDING
========================================================= */

.product-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);

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

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


.product-nav__right {
  display: flex;
  align-items: center;
  gap: 36px;
}


.product-progress {
  display: flex;
  align-items: center;
  gap: 12px;

  color: var(--muted);

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

  font-size: 10px;
  letter-spacing: 0.08em;
}


.product-progress__item {
  color: inherit;
  text-decoration: none;

  transition:
    color
    0.25s
    ease;
}


.product-progress__item:hover,
.product-progress__item.is-active {
  color: var(--ink);
}


.product-progress__line {
  width: 34px;
  height: 1px;

  background:
    var(--border-strong);
}


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

.product-nav__auth {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}


.product-nav__auth-link {
  position: relative;

  color: var(--muted);

  font-size: 10px;
  font-weight: 400;

  line-height: 1;

  text-decoration: none;

  transition:
    color
    0.2s
    ease;
}


.product-nav__auth-link::after {
  content: "";

  position: absolute;

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

  height: 1px;

  background:
    var(--ink);

  transition:
    right
    0.25s
    ease;
}


.product-nav__auth-link:hover {
  color: var(--ink);
}


.product-nav__auth-link:hover::after {
  right: 0;
}


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

.product-main {
  padding-top: 90px;
}


/* =========================================================
   ONBOARDING
========================================================= */

.onboarding-section {
  min-height:
    calc(100svh - 90px);

  display: flex;
  align-items: center;

  padding:
    clamp(70px, 9vh, 110px)
    var(--page-padding);
}


.onboarding-section--path {
  align-items: flex-start;

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


.onboarding-layout {
  width: 100%;

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

  margin: 0 auto;

  display: grid;

  grid-template-columns:
    minmax(0, 1.05fr)
    minmax(390px, 0.78fr);

  gap:
    clamp(70px, 9vw, 145px);

  align-items: center;
}


.onboarding-layout--path {
  align-items: start;
}


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

.onboarding-intro {
  align-self: center;
}


.onboarding-layout--path
.onboarding-intro {
  position: sticky;

  top: 170px;

  align-self: start;
}


.onboarding-intro h1 {
  margin:
    34px
    0
    0;

  font-size:
    clamp(48px, 4.6vw, 72px);

  font-weight: 300;

  line-height: 1.18;

  letter-spacing:
    -0.055em;

  word-break: keep-all;
}


.onboarding-intro p {
  margin:
    36px
    0
    0;

  color: var(--muted);

  font-size: 16px;

  font-weight: 300;

  line-height: 1.9;

  letter-spacing:
    -0.02em;

  word-break: keep-all;
}


/* =========================================================
   PATH PHILOSOPHY
========================================================= */

.path-philosophy {
  display: flex;

  align-items: flex-start;

  gap: 13px;

  margin-top: 48px;

  padding-top: 22px;

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


.path-philosophy__dot {
  width: 7px;
  height: 7px;

  flex:
    0 0 7px;

  margin-top: 8px;

  border-radius: 50%;

  background:
    var(--coral);
}


.path-philosophy p {
  margin: 0;

  font-size: 12px;

  line-height: 1.8;
}


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

.path-panel {
  width: 100%;

  min-width: 0;
}


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

.gyeop-form {
  width: 100%;

  min-width: 0;

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


.form-heading {
  display: flex;

  align-items: flex-start;

  gap: 16px;

  padding:
    25px
    0
    20px;
}


.form-heading__number {
  flex: 0 0 auto;

  padding-top: 4px;

  color: var(--coral);

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

  font-size: 10px;

  font-weight: 600;
}


.form-heading strong {
  display: block;

  font-size: 15px;

  font-weight: 500;
}


.form-heading p {
  margin:
    5px
    0
    0;

  color: var(--muted);

  font-size: 11px;
}


.form-row {
  position: relative;

  width: 100%;

  padding:
    24px
    0;

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


.form-label {
  display: block;

  margin-bottom: 16px;

  color: var(--muted);

  font-size: 11px;

  font-weight: 400;
}


.form-label-line {
  display: flex;

  align-items: center;

  gap: 10px;

  margin-bottom: 8px;
}


.form-label--inline {
  margin-bottom: 0;
}


.optional-label {
  display: inline-flex;

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

  padding:
    4px
    8px;

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

  border-radius: 999px;

  color: var(--muted);

  font-size: 9px;

  line-height: 1;
}


.form-helper {
  margin:
    0
    0
    17px;

  color: var(--muted);

  font-size: 11px;

  font-weight: 300;

  line-height: 1.6;
}


.form-helper a {
  color: var(--ink);

  text-decoration: none;

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


/* =========================================================
   INPUT
========================================================= */

.form-input {
  display: block;

  width: 100%;

  min-width: 0;

  margin: 0;

  padding: 0;

  border: 0;

  border-radius: 0;

  outline: none;

  background: transparent;

  color: var(--ink);

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

  font-size:
    clamp(21px, 2vw, 30px);

  line-height: 1.35;

  letter-spacing:
    -0.035em;
}


.form-input--large {
  font-size:
    clamp(25px, 2.3vw, 34px);
}


.form-input--year {
  max-width: 180px;
}


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

  opacity: 1;
}


input[type="number"] {
  appearance: textfield;
  -moz-appearance: textfield;
}


input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  margin: 0;

  -webkit-appearance: none;
}


/* =========================================================
   CHOICE
========================================================= */

.choice-group {
  display: flex;

  flex-wrap: wrap;

  gap: 9px;
}


.choice-button {
  appearance: none;

  display: inline-flex;

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

  min-height: 36px;

  padding:
    8px
    16px;

  border:
    1px solid
    rgba(24, 37, 31, 0.22);

  border-radius: 999px;

  background: transparent;

  color: var(--ink);

  font-size: 13px;

  cursor: pointer;

  transition:
    background 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease;
}


.choice-button:hover {
  border-color:
    var(--ink);
}


.choice-button.is-active {
  border-color:
    var(--ink);

  background:
    var(--ink);

  color:
    var(--paper);
}


/* =========================================================
   RANGE
========================================================= */

.range-fields {
  width: 100%;

  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    64px
    minmax(0, 1fr);

  align-items: end;

  gap: 18px;
}


.range-field label {
  display: block;

  margin-bottom: 8px;

  color: var(--muted);

  font-size: 10px;
}


.range-field input {
  display: block;

  width: 100%;

  padding: 0;

  border: 0;

  outline: none;

  background: transparent;

  color: var(--ink);

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

  font-size: 27px;
}


.range-divider {
  height: 1px;

  margin-bottom: 17px;

  background:
    var(--border-strong);
}


/* =========================================================
   MBTI SELECT
========================================================= */

.custom-select {
  position: relative;

  width: 100%;
}


.custom-select__trigger {
  width: 100%;

  display: flex;

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

  gap: 20px;

  padding:
    14px
    0;

  border: 0;

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

  background: transparent;

  color: var(--ink);

  font-size: 18px;

  cursor: pointer;
}


.custom-select__value {
  color: var(--muted);

  text-align: left;
}


.custom-select.has-value
.custom-select__value {
  color: var(--ink);
}


.custom-select__arrow {
  color: var(--muted);

  font-size: 12px;

  transition:
    transform
    0.25s
    ease;
}


.custom-select.is-open
.custom-select__arrow {
  transform:
    rotate(180deg);
}


.custom-select__menu {
  position: absolute;

  z-index: 80;

  top:
    calc(100% + 10px);

  left: 0;
  right: 0;

  display: flex;

  flex-direction: column;

  max-height: 440px;

  padding:
    6px
    0;

  overflow-y: auto;

  border:
    1px solid
    rgba(24, 37, 31, 0.11);

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

  box-shadow:
    0
    22px
    60px
    rgba(24, 37, 31, 0.10);

  opacity: 0;

  visibility: hidden;

  pointer-events: none;

  transform:
    translateY(-7px);

  transition:
    opacity 0.18s ease,
    transform 0.18s ease;
}


.custom-select.is-open
.custom-select__menu {
  opacity: 1;

  visibility: visible;

  pointer-events: auto;

  transform:
    translateY(0);
}


.custom-select__option {
  width: 100%;

  min-height: 68px;

  display: flex;

  flex-direction: column;

  align-items: flex-start;
  justify-content: center;

  gap: 5px;

  padding:
    13px
    18px;

  border: 0;

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

  background: transparent;

  color: var(--ink);

  text-align: left;

  cursor: pointer;
}


.custom-select__option strong {
  font-size: 12px;

  font-weight: 600;
}


.custom-select__option span {
  color: var(--muted);

  font-size: 11px;

  font-weight: 300;
}


.custom-select__option:hover {
  background:
    rgba(24, 37, 31, 0.035);
}


.custom-select__option.is-selected {
  background:
    var(--ink);

  color:
    var(--paper);
}


.custom-select__option.is-selected span {
  color:
    rgba(243, 239, 230, 0.62);
}


.custom-select__option--clear {
  min-height: 42px;

  display: flex;

  flex-direction: row;

  align-items: center;

  color: var(--muted);

  font-size: 10px;
}


/* =========================================================
   ENTITY AUTOCOMPLETE
========================================================= */

.entity-autocomplete {
  position: relative;

  width: 100%;
}


.entity-autocomplete__hint {
  margin:
    11px
    0
    0;

  color:
    var(--muted);

  font-size: 10px;

  font-weight: 300;

  line-height: 1.6;
}


.entity-suggestions {
  position: absolute;

  z-index: 90;

  top:
    calc(100% + 10px);

  left: 0;
  right: 0;

  max-height: 330px;

  overflow-y: auto;

  border:
    1px solid
    rgba(24, 37, 31, 0.11);

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

  box-shadow:
    0
    22px
    60px
    rgba(24, 37, 31, 0.10);

  backdrop-filter:
    blur(18px);

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


.entity-suggestions[hidden] {
  display: none;
}


.entity-suggestion {
  appearance: none;

  width: 100%;

  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    auto;

  gap: 20px;

  align-items: center;

  padding:
    16px
    18px;

  border: 0;

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

  background:
    transparent;

  color:
    var(--ink);

  text-align: left;

  cursor: pointer;

  transition:
    background
    0.18s
    ease,
    padding
    0.18s
    ease;
}


.entity-suggestion:last-child {
  border-bottom: 0;
}


.entity-suggestion:hover {
  padding-left: 22px;

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


.entity-suggestion__name {
  display: block;

  font-size: 14px;

  font-weight: 500;
}


.entity-suggestion__meta {
  display: block;

  margin-top: 5px;

  color:
    var(--muted);

  font-size: 10px;

  font-weight: 300;
}


.entity-suggestion__mark {
  color:
    var(--coral);

  font-size: 10px;

  font-weight: 500;
}


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

.form-message {
  min-height: 18px;

  margin:
    15px
    0
    0;

  color: var(--coral);

  font-size: 11px;
}


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


.action-button {
  width: 100%;

  display: flex;

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

  gap: 20px;

  margin-top: 28px;

  padding:
    18px
    0;

  border: 0;

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

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

  background: transparent;

  color:
    var(--ink);

  font-size: 14px;

  font-weight: 500;

  text-decoration: none;

  cursor: pointer;

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


.action-button:hover {
  padding:
    18px
    14px;

  background:
    var(--ink);

  color:
    var(--paper);
}


/* =========================================================
   HISTORY
========================================================= */

.activity-history {
  margin-top: 72px;

  padding-top: 28px;

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


.activity-history__header {
  display: flex;

  align-items: flex-end;
  justify-content: space-between;

  gap: 30px;

  margin-bottom: 24px;
}


.activity-history__eyebrow {
  display: block;

  margin-bottom: 8px;

  color: var(--coral);

  font-size: 9px;

  font-weight: 600;
}


.activity-history__header h2 {
  margin: 0;

  font-size: 23px;

  font-weight: 300;
}


.activity-history__count {
  display: flex;

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

  width: 34px;
  height: 34px;

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

  border-radius: 50%;

  color: var(--muted);

  font-size: 11px;
}


.activity-empty {
  padding:
    30px
    0;

  color:
    rgba(24, 37, 31, 0.35);

  font-size: 12px;

  line-height: 1.8;
}


.activity-item {
  display: grid;

  grid-template-columns:
    44px
    minmax(0, 1fr)
    auto;

  gap: 15px;

  align-items: center;

  padding:
    21px
    0;

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


.activity-item__index {
  color: var(--coral);

  font-size: 9px;

  font-weight: 600;
}


.activity-item__type {
  display: block;

  margin-bottom: 5px;

  color: var(--muted);

  font-size: 10px;
}


.activity-item__name {
  display: block;

  font-size: 17px;

  font-weight: 400;
}


.activity-item__period {
  display: block;

  margin-top: 6px;

  color: var(--muted);

  font-size: 10px;
}


.activity-item__remove {
  padding: 8px;

  border: 0;

  background: transparent;

  color:
    rgba(24, 37, 31, 0.38);

  font-size: 16px;

  cursor: pointer;
}


.activity-item__remove:hover {
  color: var(--coral);
}


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

@media (max-width: 900px) {

  .product-progress {
    display: none;
  }


  .onboarding-section {
    min-height: auto;

    padding:
      80px
      24px;
  }


  .onboarding-layout {
    grid-template-columns:
      1fr;

    gap: 65px;
  }


  .onboarding-layout--path
  .onboarding-intro {
    position: static;
  }


  .onboarding-intro,
  .gyeop-form,
  .path-panel {
    max-width: 620px;
  }

}


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

@media (max-width: 520px) {

  .product-nav {
    height: 76px;

    padding:
      0
      22px;
  }


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


  .onboarding-section {
    padding:
      65px
      22px;
  }


  .onboarding-layout {
    gap: 50px;
  }


  .onboarding-intro h1 {
    font-size:
      clamp(39px, 11vw, 48px);
  }


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


  .range-fields {
    grid-template-columns:
      minmax(0, 1fr)
      30px
      minmax(0, 1fr);

    gap: 10px;
  }


  .choice-button {
    padding:
      8px
      14px;

    font-size: 12px;
  }


  .entity-suggestion {
    padding:
      14px
      15px;
  }


  .entity-suggestion__mark {
    display: none;
  }

}

/* =========================================================
   NAV AUTH SPACING
========================================================= */

.product-nav__auth {
  display: flex;
  align-items: center;
  gap: 22px;
}