/* =========================================================
   GYEOP · BASE
========================================================= */

:root {
  --paper: #f3efe6;
  --ink: #18251f;
  --muted: #7c817b;

  --coral: #ef674d;
  --coral-soft: rgba(239, 103, 77, 0.16);

  --sage: #7f9687;

  --border: rgba(24, 37, 31, 0.14);
  --border-strong: rgba(24, 37, 31, 0.27);

  --page-padding: clamp(24px, 7vw, 120px);
  --content-width: 1240px;
}


/* =========================================================
   RESET
========================================================= */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  margin: 0;
  padding: 0;

  scroll-behavior: smooth;
}

body {
  margin: 0;
  padding: 0;

  min-width: 320px;
  min-height: 100vh;

  background: var(--paper);
  color: var(--ink);

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

  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;

  overflow-x: hidden;
}

button,
input {
  font: inherit;
}

button {
  color: inherit;
}

a {
  color: inherit;
  text-decoration: none;
}


/* =========================================================
   LOGO
========================================================= */

.logo {
  display: inline-flex;
  align-items: center;

  color: var(--ink);

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

  font-size: 18px;
  font-weight: 600;

  line-height: 1;
}

.logo__left,
.logo__right {
  letter-spacing: 0.18em;
}

.logo__right {
  margin-left: 3px;
}


.logo-node {
  position: relative;

  width: 30px;
  height: 30px;

  display: inline-flex;

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

  flex: 0 0 30px;
}

.logo-node__halo {
  position: absolute;

  left: 50%;
  top: 50%;

  width: 30px;
  height: 30px;

  border-radius: 50%;

  background: var(--coral-soft);

  transform: translate(-50%, -50%);

  animation:
    gyeop-halo
    3.8s
    ease-in-out
    infinite;
}

.logo-node__core {
  position: relative;
  z-index: 2;

  width: 10px;
  height: 10px;

  border-radius: 50%;

  background: var(--coral);

  animation:
    gyeop-core
    3.8s
    ease-in-out
    infinite;
}


/* =========================================================
   SECTION LABEL
========================================================= */

.section-label {
  display: block;

  color: var(--coral);

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

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

  letter-spacing: 0.18em;
}

.section-label--light {
  color: rgba(243, 239, 230, 0.42);
}


/* =========================================================
   CONVERSATION NAV BADGE
========================================================= */

.nav-conversation-link {
  display: inline-flex;

  align-items: center;

  gap: 6px;
}


.nav-conversation-badge {
  min-width: 17px;
  height: 17px;

  display: inline-flex;

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

  padding:
    0
    5px;

  border-radius:
    999px;

  background:
    var(--coral);

  color:
    var(--paper);

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

  font-size:
    8px;

  font-weight:
    600;

  line-height:
    1;
}


.nav-conversation-badge[hidden] {
  display:
    none !important;
}


/* =========================================================
   LOGO ANIMATION
========================================================= */

@keyframes gyeop-halo {

  0%,
  58%,
  100% {
    opacity: 0.42;
    transform: translate(-50%, -50%) scale(0.92);
  }

  68% {
    opacity: 0.65;
    transform: translate(-50%, -50%) scale(1);
  }

  80% {
    opacity: 0.25;
    transform: translate(-50%, -50%) scale(1.18);
  }

  90% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.35);
  }

}


@keyframes gyeop-core {

  0%,
  58%,
  100% {
    transform: scale(1);
  }

  68% {
    transform: scale(1.12);
  }

  80% {
    transform: scale(1);
  }

}


/* =========================================================
   ACCESSIBILITY
========================================================= */

@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;

    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;

    transition-duration: 0.01ms !important;
  }

}