/* 모든 요소의 기본 여백 제거 + 크기 계산 방식 통일 */
* { margin: 0; padding: 0; box-sizing: border-box; }

/* 전체 페이지 기본 설정 */
body {
  font-family: 'Noto Sans KR', sans-serif; /* 구글 폰트 적용 */
  background: #fafaf8;                     /* 아주 연한 회색 배경 */
  color: #222;                             /* 기본 글자색 (거의 검정) */
}

/* ────────────────────────────────
   헤더 (상단 네비게이션 바)
──────────────────────────────── */

nav {
  display: flex;
  position: sticky;
  top: 0;
  z-index: 100;
  justify-content: space-between;
  align-items: center;
  padding: 0 24px;
  height: 60px;
  background: #ffffff !important;
  border-bottom: 1px solid #e5e5e5;
}

nav img {
  height: 60px;
}

/* 로고 영역 */
.logoSection a.logo {
  font-size: 22px;
  font-weight: 700;
  color: #222;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* 오른쪽 링크 묶음 */
.nav-links {
  display: flex;
  align-items: center;
  gap: 50px;
  background: #ffffff !important;
}

.nav-links a {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  text-decoration: none;
  color: #555;
  font-size: 16px;
  border-radius: 8px;
  transition: background 0.15s;
  background: #ffffff;
}

.nav-links a:hover {
  background: #f5f5f5;
}

/* 로그인/회원가입 버튼 */
.nav-links a#loginBtn {
  background: #f5a623;
  color: #fff;
  font-weight: 500;
  padding: 7px 16px;
  border-radius: 20px;
}

.nav-links a#loginBtn:hover {
  background: #fff;
  color: #f5a623;
  border: #f5a623 1px solid;
}

/* 마이페이지 버튼 */
.nav-links a#myPageBtn {
  background: #fff;
  color: #f5a623;
  border: #f5a623 1px solid;
  font-weight: 500;
  padding: 7px 16px;
  border-radius: 20px;
}

.nav-links a#myPageBtn:hover {
  background: #f5a623;
  color: #fff;
}

/* ────────────────────────────────
   유저 배너 (프로필 영역)
──────────────────────────────── */
.user-banner {
  background: #f5a623;        /* 주황색 배경 */
  padding: 2rem;              /* 안쪽 여백 */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.2rem;                /* 아바타와 이름 사이 간격 */
}

.user-avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;         /* 원형으로 만들기 */
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;    /* 이미지/이모지를 가운데 정렬 */
  overflow: hidden;           /* 원 밖으로 나오는 이미지 잘라내기 */
}

.user-name {
  font-size: 2rem;
  font-weight: 700;
  color: #fff;                /* 흰 글자 */
}

/* ────────────────────────────────
   검색창
──────────────────────────────── */
.search-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 1.2rem 2rem;
  background: #fff;
  border-bottom: 1px solid #eee; /* 아래 구분선 */
}

.search-bar input {
  flex: 1;                    /* 남은 공간을 전부 차지 (늘어남) */
  border: 1px solid #ddd;
  border-radius: 8px;         /* 살짝 둥근 모서리 */
  padding: 10px 16px;
  font-size: 0.9rem;
  font-family: inherit;       /* 부모(body)의 폰트 그대로 사용 */
  outline: none;              /* 클릭 시 파란 테두리 제거 */
}

.search-bar input:focus {
  border-color: #f5a623;      /* 클릭(포커스)하면 테두리 주황색으로 변경 */
}

.btn-filter {
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 10px 20px;
  font-size: 0.9rem;
  cursor: pointer;            /* 마우스 올리면 손가락 커서 */
  font-family: inherit;
}

/* ────────────────────────────────
   메뉴 카드 그리드
──────────────────────────────── */
.menu-grid {
  display: grid;                        /* 그리드 레이아웃 사용 */
  grid-template-columns: repeat(3, 1fr); /* 3열로 균등 분할 */
  gap: 12px;                            /* 카드 사이 간격 */
  padding: 1.5rem 2rem;
  max-width: 900px;                     /* 최대 너비 제한 */
  margin: 0 auto;                       /* 가운데 정렬 */
}

.menu-card {
  background: #fff;
  border-radius: 12px;
  border: 1.5px solid #eee;            /* 기본 회색 테두리 */
  padding: 1.4rem 1.2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;       /* 텍스트와 ⋮ 버튼을 양쪽 끝으로 */
  cursor: pointer;
  transition: box-shadow 0.15s, border-color 0.15s; /* 호버 효과 부드럽게 */
  text-decoration: none;               /* 링크 밑줄 제거 */
  color: #222;
}

.menu-card:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.08); /* 마우스 올리면 그림자 */
  border-color: #f5a623;                    /* 마우스 올리면 테두리 주황색 */
}

/* 각 카드별 테두리 색상 */
.menu-card.red    { border-color: #f8c0b0; } /* 내 일정 - 연한 빨강 */
.menu-card.blue   { border-color: #b0cff8; } /* 찜 목록 - 연한 파랑 */
.menu-card.green  { border-color: #b0f0d8; } /* 댓글 - 연한 초록 */
.menu-card.purple { border-color: #d0b0f8; } /* 상담사 - 연한 보라 */
.menu-card.orange { border-color: #f8d0a0; } /* 개인정보 - 연한 주황 */

.menu-card-left {
  display: flex;
  align-items: center;
  gap: 10px;                /* 아이콘과 텍스트 사이 간격 */
  font-size: 0.95rem;
  font-weight: 500;
}

.menu-icon { font-size: 1.2rem; }
.more-btn  { font-size: 1.2rem; color: #bbb; padding: 4px; } /* ⋮ 버튼 */

/* 회원탈퇴 카드 (3열 전체 차지 + 가운데 배치) */
.menu-card.withdraw {
  grid-column: 1 / -1;     /* 1열부터 끝까지 = 전체 너비 차지 */
  max-width: 500px;         /* 너무 넓어지지 않게 제한 */
  margin: 0 auto;           /* 가운데 정렬 */
  border-color: #fbb;       /* 연한 빨강 테두리 */
  color: #e44;              /* 빨간 글자 */
  justify-content: center;  /* 내용 가운데 정렬 */
  gap: 80px;
}

.menu-card.withdraw .more-btn { color: #e44; } /* ⋮ 버튼도 빨간색 */

/* ────────────────────────────────
   푸터 (하단 영역)
──────────────────────────────── */
footer {
  margin-top: 3rem;          /* 위쪽 여백 */
  background: #fff;
  border-top: 1px solid #eee;
  padding: 2rem;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr; /* 4열 균등 분할 */
  gap: 1.5rem;
  font-size: 0.85rem;
}

.footer-brand p    { color: #888; margin-top: 6px; font-size: 0.8rem; }
.footer-section h4 { font-weight: 700; margin-bottom: 10px; font-size: 0.85rem; }
.footer-section a  { display: block; color: #888; text-decoration: none; margin-bottom: 6px; font-size: 0.8rem; }
.footer-section a:hover { color: #f5a623; } /* 마우스 올리면 주황색 */
.footer-brand .sns { display: flex; gap: 10px; margin-top: 12px; font-size: 1.1rem; }
.footer-brand .sns a { color: #888; text-decoration: none; }