@font-face {
  font-display: swap;
  font-family: "Ceremoir Mobile Wordmark";
  font-style: normal;
  font-weight: 400;
  src: url("data:font/woff2;base64,d09GMgABAAAAAAV0AAwAAAAACvQAAAUlAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGhYGYABcEQgKjjyKWgE2AiQDKAsWAAQgBYI0ByAbKQgIHoPj7hCiRFhiMW+Kuj5KB99pP7sb7raOK+UqKwWVHp2kgs5I7lFfJA/Qvfrufsak2LRYDNagsSrWO+tYXKxovQYVSf8DBNOdujTd1VCCifUGEgt5QFprWkqlaDR8Ykl/bfpAeXvAnwB/tR+ml0ZEftEBAkAOAj0KgaBfR8MS8gVlpLiDJgD1Jx1aA2t/ZQqMBKck4lE+8/Aw8OQjutD+3xFgV7ggi0X+0T+Ptq6TxwAwPkYEY0gC/QpoMveh8OEnSJgI0Xeh39Md2rNty0bBjQG5K0LhTIxc7ejDE/x4AHI3waScFFhBe/lIDsfDSxxTLC0jjATCHrZ4hnidYt7s49zo5UgG1Xvf3GmgkaWa/ejuYd6xVOEO8boFaRN/2RZ0L8CqOU4sHk+MN1TP6J7nibYNRffwlzf8yUNO7xtIb7ldR8em3hKv900mZtTEC2ymZJYhmWTc2NQfvYO/SI23pZrdUiTLtAZkLjMy4vUu8+bYxz/Bzh9tYjGBPbxIE/DczxJ1w/E83kA7usQVC755/r7RRPuMmniATcTKIeoKzICUhSKWSLHXBvk4XNTPEk1DuE6LN86tMm7cEJGAhHSTeXPbMQJuK0nAuVFtBUII2o10kok1aYJldPj6KUKZWs+KSc+B0YSMeH1rMLbHnVridr2F9IYjWeRLdvVH3+AvUsPxfd70Mq9bmlBxuaB/z2Ds0sm09QdmZEtMhmSplHzR7WvopHq6N9r6XTOyJfmm/OZUGZEBfIejuRjkI3KsMW0k+yANNtS+qn9nCj5/ny2eiQwgudpwvC/zm9D0rWzhEmqtqOCZXGKlTHZ25wt07Skxqmw0XJHLRENYHHKooUUwx9SSfJ6rocqQ57IVGapaYPWrw+XycG2NDQaaFdHeK3T6v96ou3VRgy/10OD6qOXbedSNKOwNDOSzv3+cFzUWwNJXPhCa7R7OnS3/Opfa3iHY+77UiT/NUI9Rz3ByCv1qX6nA0ESp8stXNqHc0Qi2mgL9q7d/UOiPc8DokVbl6fW1vV8ena2Fs/5n1VQ59EY/O65nVKaETP5tn8qpzb3a8WODx6xRJT2beBhwteWLcAX2+tea1M6MqBVv7wKmqiaFR9FUZRZ4e69GZgqpw89V15UFP14uXvjuwfPPjnxU1OWzMoXf+tpG0X6BgziKOcZssPZeiapYXjZrUm+ZMx7JPLxUGbnqbd3AxMwpMMz+aTDECBgBneAQXhO3htbg6s7x97I/z76pSRVWRo5amudB8fc/XRswOuoQCReb9livTl5KjWBoakYwUi+dfMXaa7pIrHXwcU9tFiUiNaBwaMjBTN1Tmcl8+tTdjKi+woBUvo6FUZEpeCM3DU8lnJKGmYMuBX4I5CcFqjm1EqKr3fEsrYZWIFC16vt1/ifKSn4khm37g/FPytoG2OzOtoqeiYfqvreyldWZ2M+vfqirDwwOPquiLAkJKTwldv9C/3OmPrWypL/oF1ACANaRhHDQPwABgICv3mXuCRRdf6UR2LcA4HVqdvy38H9dcQ7r7IrRBJol2PX/Aa312EsH1+ESL0aekDEAcoTaEAzWMRxMoyvwgz9YF4HAj5eeoElpgYjHBKDvRSmxkASgxfkQVTIMUqIDAB/QyAhTfDJKQSwZYy6LTOLqCplMwRMjRfav8mU7Rps1S5YcmNPmo0C5arXKFCqRpZxnFUxFgVKN0J+viM5fo0aeaLkyhESJTFUWTObT5Pwt0p4UmUArhy2KA3OTCv53xAcAAA==")
    format("woff2");
  unicode-range: U+0043, U+0045, U+0049, U+004D, U+004F, U+0052;
}

.headerFrame {
  background: #fbf9f6;
  box-sizing: border-box;
  flex: 0 0 auto;
  height: 62px;
  position: relative;
  width: 100%;
  z-index: 50;
}

.header {
  align-items: center;
  background: #fbf9f6;
  box-sizing: border-box;
  display: flex;
  height: 62px;
  justify-content: space-between;
  padding: 0 18.65px;
  position: relative;
  width: 100%;
  z-index: 50;
}

.brand {
  align-items: center;
  color: #332a24;
  display: inline-flex;
  gap: 0;
  min-height: 44px;
  min-width: 0;
  text-decoration: none;
}

.brand > img {
  flex: 0 0 auto;
  height: 33.29px;
  width: 33.29px;
}

.wordmark {
  font-family: "Ceremoir Mobile Wordmark", Georgia, serif;
  font-size: 14.63px;
  font-weight: 400;
  letter-spacing: 3.53px;
  line-height: 1;
  margin-left: 8.57px;
  white-space: nowrap;
}

.brand > i {
  background: #d9d3cd;
  height: 12.6px;
  margin-left: 9px;
  width: 1.01px;
}

.brand > strong {
  color: #7b5a43;
  font-family:
    "Pretendard Variable", "Ceremoir Pretendard", Pretendard, sans-serif;
  font-size: 11.6px;
  font-weight: 700;
  letter-spacing: -0.035em;
  margin-left: 10.1px;
  white-space: nowrap;
}

.menuButton {
  align-items: center;
  appearance: none;
  background: transparent;
  border: 0;
  border-radius: 50%;
  color: #2d2926;
  cursor: pointer;
  display: grid;
  height: 44px;
  margin-right: -9.88px;
  padding: 0;
  place-items: center;
  transition:
    background-color 150ms ease,
    transform 150ms ease;
  width: 44px;
}

.menuButton > img {
  display: block;
  height: 14.62px;
  width: 17.14px;
}

.menuButton:active {
  background: rgb(184 148 112 / 12%);
  transform: scale(0.96);
}

.drawer {
  backdrop-filter: blur(18px);
  background: rgb(255 255 255 / 97%);
  border: 1px solid rgb(237 230 224 / 90%);
  border-radius: 17px;
  box-shadow: 0 18px 48px rgb(72 51 36 / 14%);
  left: 12px;
  padding: 9px;
  position: absolute;
  right: 12px;
  top: clamp(54px, 14.42vw, 62px);
  z-index: 45;
}

.drawer[hidden] {
  display: none;
}

.drawer nav {
  display: grid;
}

.drawer a {
  align-items: center;
  border-radius: 11px;
  color: #302c29;
  display: flex;
  font-family:
    "Pretendard Variable", "Ceremoir Pretendard", Pretendard, sans-serif;
  font-size: 14px;
  font-weight: 600;
  justify-content: space-between;
  min-height: 46px;
  padding: 0 13px;
  text-decoration: none;
}

.drawer a:hover {
  background: #faf6f2;
}

.bottomNav {
  align-items: stretch;
  backdrop-filter: blur(14px);
  background: rgb(255 255 255 / 97%);
  border-top: 1px solid #ece8e4;
  bottom: 0;
  box-sizing: border-box;
  box-shadow: 0 -5px 18px rgb(60 44 32 / 5%);
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  height: calc(52px + env(safe-area-inset-bottom));
  left: 50%;
  padding-bottom: env(safe-area-inset-bottom);
  position: fixed;
  transform: translateX(-50%);
  width: min(100%, 430px);
  z-index: 50;
}

.bottomNav a {
  align-items: center;
  color: #77736f;
  display: flex;
  flex-direction: column;
  font-family:
    "Pretendard Variable", "Ceremoir Pretendard", Pretendard, sans-serif;
  font-size: 9px;
  font-weight: 500;
  gap: 1px;
  justify-content: center;
  line-height: 1.15;
  min-width: 0;
  text-decoration: none;
}

.navIcon {
  display: block;
  flex: 0 0 auto;
  height: 20px;
  stroke: currentColor;
  width: 20px;
}

.bottomNav a[aria-current="page"] {
  color: #b78960;
  font-weight: 600;
}

.bottomNavReserve {
  height: calc(52px + env(safe-area-inset-bottom));
}

.accountNavPage,
.dashboardNavPage {
  display: contents;
}

.responsiveHeader {
  display: none;
  position: relative;
}

.menuButton:focus-visible,
.drawer a:focus-visible,
.bottomNav a:focus-visible {
  outline: 2px solid #79583f;
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .menuButton {
    transition-duration: 0.01ms !important;
  }
}

@media (min-width: 1024px) {
  .bottomNav {
    display: none;
  }

  .bottomNavReserve {
    display: none;
  }
}

@media (max-width: 1023px) {
  .responsiveHeader {
    display: block;
  }

  .accountNavPage :global(.account-page),
  .dashboardNavPage :global(.dashboard-page) {
    padding-bottom: calc(70px + env(safe-area-inset-bottom));
  }

  .dashboardNavPage :global(.dashboard-bottom-nav) {
    display: none;
  }
}