/* ----------Design Token---------- */
:root {
  /* -----Referance Token----- */
  /* Colors */
  /* Primary */
  --green-100: #fdfffb;
  --green-200: #eaffc8;
  --green-300: #d6ff95;
  --green-400: #c3ff62;
  --green-500: #afff2f;
  --green-600: #9bfb00;
  --green-700: #7bc800;
  --green-800: #5c9500;
  --green-900: #3d6200;
  /* gray */
  --gray-50: #ffffff;
  --gray-100: #f5f5f5;
  --gray-200: #c2c2c2;
  --gray-300: #a8a8a8;
  --gray-400: #8f8f8f;
  --gray-500: #757575;
  --gray-600: #5c5c5c;
  --gray-700: #424242;
  --gray-800: #292929;
  --gray-900: #0f0f0f;
  /* sementic */
  --success: #4caf50;
  --error: #e53935;
  --warning: #ffb300;
  --info: #4a90e2;
  /* accent */
  --orange-default: #ff8c42;
  --orange-light: #ffe9db;
  --orange-dark: #ff6d0f;
  --yellow-100: #fffae6;
  --yellow-200: #ffeeb3;
  --yellow-300: #ffe380;
  --yellow-400: #ffd84d;

  /* Spacing */
  --spacing-4: 4px;
  --spacing-8: 8px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-18: 18px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-36: 36px;
  --spacing-48: 48px;
  --spacing-64: 64px;

  /* Font Size */
  --font-xs: 12px;
  --font-sm: 14px;
  --font-md: 16px;
  --font-lg: 18px;
  --font-2lg: 20px;
  --font-3lg: 22px;
  --font-4lg: 24px;
  --font-5lg: 28px;
  --font-6lg: 36px;

  /* -----System Token---- */
  /* Backgraond */
  --color-bg-primary: var(--gray-100);
  --color-bg-inverse: var(--gray-900);

  /* Text */
  --color-text-primary: var(--gray-900);
  --color-text-inverse: var(--gray-100);

  /* -----Responsive----- */
  /* Layout Spacing */
  --layout-padding-sm: 16px;
  --layout-padding-md: 24px;

  /* Container */
  --container-max: 1280px;
}

/* css 초기화 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html {
}
body {
  overflow-x: hidden;
  background-color: var(--gray-50);
  font-family: "Noto Sans KR", sans-serif;
  font-size: var(--font-md);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -0.02em;
  color: var(--gray-900);
}
ul,
li {
  list-style: none;
}
a {
  color: inherit;
  text-decoration: none;
}
img {
  display: block;
  border: 0;
  object-fit: cover;
}
/* -----Button----- */
button {
  appearance: none;
  border: none;
  background: none;
  padding: 0.5rem 1rem;

  font: inherit;
  color: inherit;

  cursor: pointer;

  /* 최소 터치 영역 확보 */
  min-width: 44px;
  min-height: 44px;
}
button:focus-visible {
  outline: 2px solid var(--color-bg-inverse);
  outline-offset: 2px;
}
/* 비활성 상태 */
button:disabled {
  opacity: 0.2;
  cursor: not-allowed;
}

/* ----------Component Token---------- */
/* -----Layout----- */
.layout {
  position: relative;
  width: 100%;
  min-height: 100vh;
  display: flex;
  align-items: center;
  flex-direction: column;
  padding-top: 84px;
  padding-bottom: 84px;
}
.full-layout {
  position: relative;
  width: 100%;
  min-height: 100vh;
  display: flex;
  align-items: center;
  flex-direction: column;
  overflow-x: hidden;
  gap: var(--spacing-16);
  padding-top: 164px;
  padding-bottom: 84px;
  background-color: var(--gray-100);
}
.container {
  position: relative;
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  flex: 1;
  padding: 0 var(--layout-padding-sm);
  /* background-color: #d4d4d4; */
}
.card-container {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-16);
}

/* -----image----- */
.thumbnail {
  width: 100%;
  min-width: 0;
  min-height: 0;
  aspect-ratio: 10/7;
}
.thumbnail img {
  width: 100%;
  height: 100%;
}
.card-thumbnail {
  width: 100%;
  min-width: 0;
  min-height: 0;
  aspect-ratio: 3/2;
  border-radius: var(--spacing-8);
  overflow: hidden;
}
.card-thumbnail img {
  width: 100%;
  height: 100%;
}
/* -----Typography----- */
.heading-1 {
  font-size: var(--font-5lg);
  font-weight: 700;
  line-height: 36px;
  letter-spacing: -0.02em;
}
.heading-2 {
  font-size: var(--font-3lg);
  font-weight: 600;
  line-height: 36px;
  letter-spacing: -0.02em;
}
.heading-3 {
  font-size: var(--font-lg);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -0.02em;
}
.body-text {
}
.caption {
  font-size: var(--font-sm);
  font-weight: 400;
  line-height: 36px;
  letter-spacing: -0.02em;
}

/* -----Button------ */
.btn {
  /* 버튼 기본 스타일 제거 */
  display: flex;
  align-items: center;
  justify-content: center;

  appearance: none;
  border: none;
  background: none;
  padding: var(--spacing-4) var(--spacing-8);
  cursor: pointer;

  width: 100%;
  height: 48px;
  border-radius: var(--spacing-4);
  font-weight: 600;
  line-height: 1;

  background-color: var(--color-bg-inverse);
  color: var(--color-text-inverse);
}
a.btn {
  display: flex;
}
/* -----PrevBtn----- */
.prev {
  display: flex;
  width: 100%;
  justify-content: flex-start;
  align-items: center;
}
.prev img {
  width: 20px;
  height: 20px;
}
.prev span {
  font-size: var(--font-md);
  font-weight: 500;
}
/* -----Input----- */
input:not([type="radio"]):not([type="checkbox"]) {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  border: 1px solid var(--gray-300);
  outline: none;
  background-color: var(--gray-100);
  padding: var(--spacing-8) var(--spacing-36);
  border-radius: var(--spacing-4);
  margin: 0;
  font: inherit;
  font-size: var(--font-sm);
  font-weight: 400;
  color: inherit;
  line-height: inherit;
  letter-spacing: inherit;
}
input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;

  width: 20px;
  height: 20px;
  border: 2px solid var(--gray-300);
  border-radius: 50%;
  background: white;
  cursor: pointer;

  display: inline-grid;
  place-content: center;
}

input[type="radio"]::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  transform: scale(0);
  transition: 0.15s ease;
  background: var(--green-700);
}

input[type="radio"]:checked::before {
  transform: scale(1);
}
.input-field,
.input-field-sign {
  position: relative;
  width: 100%;
}
.input-field img {
  position: absolute;
  height: 16px;
  width: 16px;
  top: 12px;
  left: 12px;
}
.input-field-sign img {
  position: absolute;
  height: 16px;
  width: 16px;
  top: 48px;
  left: 12px;
}
/* -----Card----- */
.card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  width: 100%;
  gap: var(--spacing-8);
  padding: var(--spacing-8);
  box-shadow: 0 4px 8px rgb(0, 0, 0, 0.15);
  border-radius: var(--spacing-8);
}
.card-name {
  display: flex;
  align-items: center;
  justify-content: center;
}
.card-name img {
  width: 16px;
  height: 16px;
}
.card-name h3 {
  font-size: var(--font-md);
  font-weight: 500;
}
.card-sub {
  font-size: var(--font-sm);
  font-weight: 500;
  color: var(--gray-400);
}
.card-tag {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-16);
}
.card-tag span {
  font-size: var(--font-sm);
  font-weight: 500;
  color: var(--gray-400);
}
.card-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
  gap: var(--spacing-8);
}
.card-actions .save-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-8);
  gap: var(--spacing-4);
}
.card-actions .save-btn img {
  width: 16px;
  height: 16px;
}
.card-actions .save-btn span {
}
.card-actions .share-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-8);
  gap: var(--spacing-4);
}
.card-actions .share-btn img {
  width: 16px;
  height: 16px;
}
.card-actions .share-btn span {
}
/* -----Logo----- */
.logo {
  width: 100%;
}
.logo img {
  width: 36px;
  height: 36px;
}
/* -----Header----- */
.header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  display: flex;

  align-items: center;
  justify-content: flex-end;
  width: 100%;
  padding: var(--spacing-36) var(--spacing-16) var(--spacing-16);
  gap: 28px;
  background-color: var(--gray-50);
}
/* -----TabBar----- */
.tap-bar {
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 1000;

  display: flex;
  align-items: flex-start;
  justify-content: center;
  width: 100%;
  height: 84px;
  padding: var(--spacing-8) var(--spacing-16) 0;
  background-color: var(--green-700);
  gap: var(--spacing-36);
}
.tap-bar a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
}
.tap-bar a img {
  width: 20px;
  height: 20px;
}
.tap-bar a span {
  font-size: var(--font-xs);
  font-weight: 400;
  color: var(--gray-100);
}
@media screen and (min-width: 768px) {
  .layout {
    padding: 0 var(--layout-padding-md);
  }
  .card-container {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-20);
  }
  .onboarding-title br {
    display: none;
  }
  /* .slider-container .card {
    flex: 0 0 calc((100% - 32px) / 3);
  } */
}
@media screen and (min-width: 1024px) {
  .layout {
    padding: 0 40px;
  }
  .card-container {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-24);
  }
  .onboarding-title br {
    display: none;
  }
  /* .slider-container .card {
    flex: 0 0 calc((100% - 48px) / 4);
  } */
}

/* ----------LoginPage---------- */
.auth-section {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  align-items: center;
  /* padding-top: 84px; */
  gap: var(--spacing-64);
}
.auth-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  align-items: center;
  gap: var(--spacing-48);
}
.auth-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  gap: var(--spacing-36);
}
.auth-header img {
  width: 50px;
  height: 50px;
}
.auth-header .title {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-12);
}
.auth-header .title h1 {
}
.auth-header .title h3 {
  color: var(--gray-500);
  font-size: var(--font-md);
  font-weight: 400;
}
.login-form {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-24);
  width: 100%;
}
.input-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  gap: var(--spacing-16);
}

.btn-login {
}
.btn-signup-outline {
  background-color: var(--gray-100);
  color: var(--gray-900);
}
.login-sns {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  justify-content: center;
  gap: var(--spacing-36);
}
.sns-title {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  gap: var(--spacing-8);
  overflow: hidden;
}
.sns-title img {
  flex: 1;
  width: 100%;
  height: 1px;
  object-fit: cover;
}
.sns-title span {
  flex-shrink: 0;
  white-space: nowrap;
  color: var(--gray-600);
}
.sns-btn {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-36);
}
.sns-btn a {
  width: 48px;
  height: 48px;
}
.sns-btn a img {
  width: 100%;
  height: 100%;
}

/* ----------Signup Page---------- */
.signup-section {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  align-items: center;
  /* padding-top: 84px; */
  gap: var(--spacing-36);
}

.signup-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  gap: var(--spacing-24);
}
.signup-form {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  gap: var(--spacing-16);
}
.input-field h3 {
}
.btn-primary {
  background-color: var(--green-700);
}

/* ----------OnboardingPage---------- */
.onboarding-section {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  align-items: center;
  padding-top: 84px;
}
.onboarding-section .header {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
}
.onboarding-section .header .random-btn {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: flex-start;
  gap: var(--spacing-4);
}
.onboarding-section .header .random-btn img {
  width: 24px;
  height: 24px;
}
.onboarding-section .header .random-btn .random-text {
  font-weight: 600;
  color: var(--green-700);
}
.onboarding-section .header .next {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
}
.onboarding-section .header .next .next-text {
}
.onboarding-section .header .next img {
  width: 20px;
  height: 20px;
}
.onboarding-main {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  gap: var(--spacing-64);
  padding-top: var(--spacing-64);
}
.onboarding-main img {
  width: 306px;
  height: 345px;
}
.onboarding-main .onboarding-title {
  text-align: center;
  font-size: var(--font-lg);
  font-weight: 600;
}
/* ----------OnboardingQuestionPage---------- */
.onboarding-question {
  display: flex;
  flex-direction: column;
  width: 100%;
  /* padding-top: 84px; */
}
.question-content {
  display: flex;
  flex-direction: column;
  width: 100%;
  /* padding-top: var(--spacing-64); */
  gap: var(--spacing-64);
}
.question-step {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  gap: var(--spacing-8);
}
.question-step img {
  height: 8px;
}
.question-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  width: 100%;
  gap: var(--spacing-24);
}
.question-title {
  font-size: var(--font-2lg);
  font-weight: 700;
}
.choice-list {
  display: flex;
  flex-direction: column;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-8);
}
.choice-item {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  padding: var(--spacing-8) var(--spacing-16);
  gap: var(--spacing-16);
}
.choice-item input {
  width: 20px;
  height: 20px;
}
.choice-item span {
}
.step-btn {
  display: flex;
  width: 100%;
  justify-content: space-between;
}
.question-prev-btn {
  color: var(--green-700);
}
.question-next-btn {
  color: var(--green-700);
}
.question-next-btn:disabled {
  color: var(--gray-400);
  cursor: not-allowed;
}
/* ----------ResultPage---------- */

.result-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  /* padding-top: 72px; */
}
.result {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: var(--spacing-16) 0;
  gap: var(--spacing-16);
}
.user-choice {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  width: 100%;
}
.user-choice .main-title {
  display: flex;
  align-items: flex-end;
  width: 100%;
  gap: var(--spacing-4);
}
.user-choice .main-title h2 {
}
.user-choice .main-title span {
  color: var(--gray-500);
}
.user-choice .sub-title {
  color: var(--gray-500);
}
/* ----------HomePage---------- */
.full-header-section {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
  padding: var(--spacing-36) var(--spacing-16) var(--spacing-16);
  gap: 28px;
  background-color: var(--gray-50);
  box-shadow: 0 4px 8px rgb(0, 0, 0, 0.15);
}
.quick-tab {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  gap: var(--spacing-8);
}
.quick-tab a {
  flex: 1;
  min-width: 0;
  text-align: center;
}
.quick-tab span {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.section {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: var(--spacing-16);
  gap: var(--spacing-12);
  background-color: var(--gray-50);
  box-shadow: 0 4px 8px rgb(0, 0, 0, 0.15);
}
.section-title {
}
.card-slider {
  width: 100%;
  padding: 0 var(--spacing-8);
  border-radius: var(--spacing-12);
}
.card-viewport {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  overflow: hidden;
  position: relative;
  box-shadow: 0 4px 8px rgb(0, 0, 0, 0.15);
}
.card-link {
}
.slider-container {
  display: flex;
  gap: var(--spacing-16);
  width: 100%;
  transition: transform 0.3s ease;
  will-change: transform;
  touch-action: pan-y;
}
.slider-container .card {
  flex: 0 0 100%;
  width: 100%;
}
/* ---------SearchPage---------- */
.search-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.search-header {
  display: flex;
  align-items: center;
  width: 100%;
  justify-content: space-between;
  gap: var(--spacing-12);
}
.search-header a {
  width: 24px;
  height: 24px;
}
.search-header a img {
  width: 100%;
  height: 100%;
}
.search {
}
.search img {
}
.search input {
}
.delete-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  white-space: nowrap;
}
.delete-btn span {
  display: inline-block;
  white-space: nowrap;
}
.keyword-section {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  width: 100%;
  gap: var(--spacing-12);
  padding-top: var(--spacing-24);
}
.search-list {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  gap: var(--spacing-24);
}
.search-tag {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 36px;
  flex-shrink: 0; /* 줄어들지 않음 */
  background-color: var(--gray-100);
  border-radius: var(--spacing-16);
  /* padding: var(--spacing-4) var(--spacing-12); */
  gap: var(--spacing-4);
}
.search-tag img {
  width: 16px;
  height: 16px;
}
/* ----------DetailPage---------- */
.detail-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  gap: var(--spacing-16);
  padding-bottom: 84px;
  background-color: var(--gray-100);
}
.detail-card {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  align-items: center;
  justify-content: center;
  background-color: var(--gray-50);
  box-shadow: 0 4px 8px rgb(0, 0, 0, 0.15);
}
.detail-main {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  width: 100%;
  padding: 0 var(--spacing-16);
}
.detail-title {
  display: flex;
  flex-direction: column;
  width: 100%;
  justify-content: center;
  padding-top: var(--spacing-16);
}
.detail-title .detail-sub {
}
.detail-title .detail-tag {
  display: flex;
  align-items: center;
  gap: var(--spacing-16);
}
.detail-title .detail-tag span {
  color: var(--gray-400);
}

.detail-location {
  display: flex;
  align-items: center;
  padding-top: var(--spacing-16);
}
.detail-location img {
  width: 14px;
  height: 14px;
}
.detail-location h3 {
  font-size: var(--font-sm);
  font-weight: 500;
}
.detail-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  width: 100%;
  padding: var(--spacing-16) 0;
  gap: var(--spacing-16);
}
.meta-box {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-20);
}
.meta-box img {
  width: 20px;
  height: 20px;
}
.meta-box .meta-item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-8);
}
.meta-box .meta-item .meta-label {
  color: var(--gray-400);
}
.meta-box .meta-item .meta-value {
}
.detail-top {
  position: fixed;
  top: 28px;
  left: 0;
  z-index: 2000;

  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  padding: 0 var(--spacing-16);
  gap: var(--spacing-24);
}
.detail-top .detail-prev {
  width: 100%;
}
.detail-top .detail-prev img {
  width: 30px;
  height: 30px;
}
.detail-top .detail-action {
  display: flex;
  align-items: center;
  gap: var(--spacing-16);
}
.detail-top .detail-action .detail-share,
.detail-top .detail-action .detail-save {
  width: 30px;
  height: 30px;
}
.detail-top .detail-action .detail-share img,
.detail-top .detail-action .detail-save img {
  width: 100%;
  height: 100%;
}
.sub-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  width: 100%;
  padding: var(--spacing-16);
  gap: var(--spacing-16);
  background-color: var(--gray-50);
  /* box-shadow: 0 4px 8px rgb(0, 0, 0, 0.15); */
}
.sub-card span {
  font-size: var(--font-sm);
  font-weight: 600;
  color: var(--gray-500);
}
/* ----------BookmarkSection---------- */
.bookmark-section {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: var(--spacing-16);
  padding-bottom: var(--spacing-16);
}
/* ----------Mypage---------- */
.my-full-layout {
  position: relative;
  width: 100%;
  min-height: 100vh;
  display: flex;
  align-items: center;
  flex-direction: column;
  overflow-x: hidden;
  gap: var(--spacing-16);
  padding-top: 230px;
  padding-bottom: 84px;
  background-color: var(--gray-100);
}
.profile-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0 var(--spacing-24);
}
.profile-box span {
}
.profile-box .profile-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--spacing-8);
  background-color: var(--gray-100);
  border-radius: var(--spacing-16);
}
.my-travel-box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  /* padding: 0 var(--spacing-24); */
  gap: var(--spacing-48);
}
.my-recent-box,
.my-bookmark-box,
.my-style-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.travel-count {
  font-size: var(--font-2lg);
  font-weight: 500;
}

.my-recent-box span,
.my-bookmark-box span,
.my-style-box span {
  font-size: var(--font-xs);
  font-weight: 500;
  color: var(--gray-600);
}
.my-list-box {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  width: 100%;
  gap: var(--spacing-8);
  padding: 0 var(--spacing-16);
  /* padding-top: 84px; */
  background-color: var(--gray-50);
  box-shadow: 0 4px 8px rgb(0, 0, 0, 0.15);
}
.my-list {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.my-list-item {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  padding: var(--spacing-16) 0;
  gap: var(--spacing-20);
}
.my-list-item .my-list-icon {
  width: 20px;
  height: 20px;
}
.my-list-item span {
  width: 100%;
}
.my-list-item .enter-icon {
  width: 20px;
  height: 20px;
}
.logout {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  padding: var(--spacing-16) 0;
}
.logout span {
  color: var(--error);
}
/* ----------Menu-Section---------- */
.menu-full-layout {
  position: relative;
  width: 100%;
  min-height: 100vh;
  display: flex;
  align-items: center;
  flex-direction: column;
  overflow-x: hidden;
  gap: var(--spacing-16);
  padding-top: 92px;
  /* padding-bottom: 84px; */
  background-color: var(--gray-100);
}
.menu-section {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  width: 100%;
  height: 100vh;

  /* background-color: var(--gray-50); */
}
.menu {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;

  /* gap: 40px; */
}
.menu-header {
  width: 100%;
  padding: 0 var(--spacing-16);
  font-size: var(--font-sm);
  font-weight: 600;
  color: var(--gray-300);
  padding: var(--spacing-20);
}

.menu-item {
  /* font-size: var(--font-sm); */
}
.menu-detail {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  width: 100%;
  height: 100%;
  padding: 0 var(--spacing-16);
  font-size: var(--font-sm);
  background-color: var(--gray-50);
}
.menu-detail-title {
  padding: var(--spacing-20);
  color: var(--green-700);
}
.menu-detail-item {
  padding: var(--spacing-20);
}