@font-face {
  font-family: "YClover";
  src: url("../assets/font/YClover-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

*,
*::before,
*::after {
  font-family: "Pretendard", sans-serif;
  /* 본문 전체 Pretendard로 설정 */
}

body {
  margin: 0;
  /* body 기본 마진 제거 */
  padding: 0;
  /* body 기본 padding 제거 */
}

/* 공통 헤더 */
.site-header {
  position: fixed;
  /* 뷰포트 기준 고정 위치 */
  /* position 값의 기본값은 static */
  top: 0;
  /* 화면 상단에 고정 */
  left: 0;
  /* 화면 좌측에 고정 */
  width: 100%;
  /* 너비 100% (뷰포트 전체) */
  z-index: 1000;
  /* 다른 요소 위에 표시 */
  background-color: #ffffff;
  /* 배경색 흰색 */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  /* 하단 그림자 */
}

.header-inner {
  display: flex;
  /* Flex 레이아웃 적용 */
  align-items: center;
  /* 자식 요소들을 가로 방향으로 중앙 정렬 */
  justify-content: space-between;
  /* 자식 요소들을 양 끝으로 균등 배치 */
  max-width: 1240px;
  /* 최대 너비 1200px */
  margin: 0 auto;
  /* 바깥으로 상하 여백 0, 좌우 auto (가운데 정렬) */
  padding: 0 24px;
  /* 안쪽으로 좌우 여백 24px */
  height: 64px;
  /* 헤더 높이 64px 고정 */
  box-sizing: border-box;
  /* 테두리와 패딩을 너비에 포함 */
}

.header-left {
  display: flex;
  align-items: center;
  gap: 28px;
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: "YClover", sans-serif;
  font-size: 1.25rem;
  /* 폰트 사이즈 1.25rem (20px) */
  font-weight: 700;
  /* 폰트 두께 700 (Bold) */
  color: #e85d4a;
  /* 로고 컬러: 맛길 브랜드 컬러 (따뜻한 주황-빨강 계열) */
  text-decoration: none;
  /* 텍스트 밑줄 등 장식 제거 */
  letter-spacing: -0.5px;
  /* 글자 간격 -0.5px (살짝 좁게) */
}

.logo-icon {
  display: block;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
}

.nav {
  display: flex;
  /* Flex 레이아웃 적용 */
  gap: 32px;
  /* 자식 요소들 사이 간격 32px */
}

.nav a {
  font-size: 0.95rem;
  /* 폰트 사이즈 0.95rem */
  font-weight: 500;
  /* 폰트 두께 500 (Regular) */
  color: #444444;
  /* 텍스트 컬러 #444로 지정 */
  text-decoration: none;
  /* 텍스트 밑줄 등 장식 제거 */
  transition: color 0.2s;
  /* 컬러 변경 시 0.2초 동안 부드럽게 전환 */
}

.nav a:hover {
  color: #e85d4a;
  /* 호버 시 텍스트 컬러를 맛길 브랜드 컬러로 변경 */
}

.nav a.is-current {
  color: #e85d4a;
  font-weight: 600;
}

.btn-login {
  font-size: 0.9rem;
  /* 폰트 사이즈 0.9rem */
  font-weight: 600;
  /* 폰트 두께 600 */
  color: #ffffff;
  /* 텍스트 컬러 흰색 */
  background-color: #e85d4a;
  /* 배경색 맛길 브랜드 컬러 */
  text-decoration: none;
  /* 텍스트 밑줄 등 장식 제거 */
  padding: 8px 20px;
  /* 안쪽으로 상하 여백 8px, 좌우 여백 20px */
  border-radius: 6px;
  /* 테두리 둥글기 6px */
  transition: background-color 0.2s;
  /* 배경색 변경 시 0.2초 동안 부드럽게 전환 */
}

.btn-login:hover {
  background-color: #c94a38;
  /* 호버 시 배경색을 더 어두운 컬러로 변경 */
}

.header-right {
  display: flex;
  /* Flex 레이아웃 적용 */
  align-items: center;
  /* 검색 바와 로그인 버튼을 가로 방향으로 중앙 정렬 */
  gap: 12px;
  /* 검색 바와 로그인 버튼 사이 간격 12px */
}

.search-bar {
  display: flex;
  /* Flex 레이아웃 적용 */
  align-items: center;
  /* 입력 필드와 버튼을 가로 방향으로 중앙 정렬 */
  height: 38px;
  /* 높이 38px 고정 */
  border: 1.5px solid #ddd;
  /* 테두리 #ddd 색상으로 1.5px 실선 */
  border-radius: 20px;
  /* 테두리 둥글기 20px (pill 형태) */
  overflow: hidden;
  /* 넘치는 콘텐츠 숨김 */
  background-color: #f7f7f7;
  /* 배경색 연한 회색 */
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
  /* 테두리 컬러·그림자 변경 시 0.2초 동안 부드럽게 전환 */
  width: 260px;
  /* 너비 260px 고정 */
}

.search-bar:focus-within {
  border-color: #e85d4a;
  /* 내부 요소 포커스 시 테두리 컬러 변경 */
}

.search-input {
  flex: 1;
  /* 남은 공간 모두 차지 */
  height: 100%;
  /* 높이 100% (부모 요소에 맞춤) */
  border: none;
  /* 테두리 제거 */
  outline: none;
  /* 포커스 외곽선 제거 */
  background: transparent;
  /* 배경 투명 */
  padding: 0 14px;
  /* 안쪽으로 좌우 여백 14px */
  font-size: 0.875rem;
  /* 폰트 사이즈 14px */
  color: #333;
  /* 텍스트 컬러 #333으로 지정 */
}

.search-input::placeholder {
  color: #aaa;
  /* placeholder 컬러 #aaa로 지정 */
}

.search-button {
  display: flex;
  /* Flex 레이아웃 적용 */
  align-items: center;
  /* 자식 요소들을 가로 방향으로 중앙 정렬 */
  justify-content: center;
  /* 아이콘 중앙 배치 */
  width: 40px;
  /* 너비 40px 고정 */
  height: 100%;
  /* 높이 100% (부모 요소에 맞춤) */
  border: none;
  /* 테두리 제거 */
  background: transparent;
  /* 배경 투명 */
  cursor: pointer;
  /* 마우스 커서를 포인터(손가락)로 변경 */
  color: #888;
  /* 아이콘 컬러 #888 */
  flex-shrink: 0;
  /* Flex 아이템 축소 방지 */
  transition: color 0.2s;
  /* 컬러 변경 시 0.2초 동안 부드럽게 전환 */
}

.search-button:hover {
  color: #e85d4a;
  /* 호버 시 아이콘 컬러 변경 */
}

/* 공통 본문 상단 여백 (고정 헤더 높이만큼) */
.main-content {
  padding-top: 64px;
}

/* 공통 푸터 */
.site-footer {
  background-color: #f7f7f7;
  /* 배경색 연한 회색 */
  border-top: 1px solid #eee;
  /* 상단 구분선 */
  margin-top: auto;
  /* 본문이 짧아도 하단에 위치 */
}

.footer-inner {
  max-width: 1200px;
  /* 최대 너비 1200px */
  margin: 0 auto;
  /* 좌우 중앙 정렬 */
  padding: 0 24px;
  /* 안쪽으로 좌우 여백 24px */
  box-sizing: border-box;
  /* 테두리와 패딩을 너비에 포함 */
}

.footer-top {
  display: flex;
  /* Flex 레이아웃 적용 */
  align-items: center;
  /* 로고와 링크를 가로 방향으로 중앙 정렬 */
  justify-content: space-between;
  /* 로고와 링크를 양 끝으로 배치 */
  padding: 28px 0 20px;
  /* 안쪽으로 상단 28px, 하단 20px */
  border-bottom: 1px solid #e4e4e4;
  /* 하단 구분선 */
}

.footer-logo {
  font-size: 1.1rem;
  /* 폰트 사이즈 1.1rem */
  font-weight: 700;
  /* 폰트 두께 700 (Bold) */
  color: #e85d4a;
  /* 로고 컬러: 맛길 브랜드 컬러 */
  text-decoration: none;
  /* 텍스트 밑줄 등 장식 제거 */
  font-family: "YClover", sans-serif;
}

.footer-nav {
  display: flex;
  /* Flex 레이아웃 적용 */
  gap: 24px;
  /* 링크 사이 간격 24px */
}

.footer-nav-link {
  font-size: 14px;
  /* 폰트 사이즈 14px */
  color: #555;
  /* 텍스트 컬러 #555로 지정 */
  text-decoration: none;
  /* 텍스트 밑줄 등 장식 제거 */
  transition: color 0.2s;
  /* 컬러 변경 시 0.2초 동안 부드럽게 전환 */
}

.footer-nav-link:hover {
  color: #e85d4a;
  /* 호버 시 텍스트 컬러를 맛길 브랜드 컬러로 변경 */
  font-weight: 600;
  /* 폰트 두께 600으로 변경 */
}

.footer-bottom {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 0;
  /* 안쪽으로 상하 여백 16px */
}

.footer-desc {
  font-size: 12px;
  color: #888;
}

.footer-copy {
  font-size: 12px;
  /* 폰트 사이즈 12px */
  color: #aaa;
  /* 텍스트 컬러 #aaa */
}